Number Input

Recipe CSS

This is the exact CSS your kit ships for Number Input — token-driven, so it re-themes with every knob. Get it (and the rest) from the configurator's Use kit panel.

/* === NumberInput (#5) === */
.numinput { padding: 0; }
.numinput__field { font-variant-numeric: tabular-nums; text-align: center; }
.numinput__step {
  width: var(--k-in-h-default, 40px);
  align-self: stretch;     /* fill the wrapper height so the hover fill reaches the edges */
  display: grid;           /* centre the −/+ glyph in BOTH axes (stretched height
                              would otherwise top-align it → looks crooked at rest) */
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--k-fg-muted);
  font-size: var(--k-type-body);
  font-weight: var(--k-weight-medium);
  line-height: 1;
  cursor: pointer;
  border-radius: 0;        /* outer corners only (below) — square inner edges keep it plumb */
}
.numinput__step:first-child {
  border-top-left-radius: calc(var(--k-radius-md) - var(--k-bw, 1px));
  border-bottom-left-radius: calc(var(--k-radius-md) - var(--k-bw, 1px));
}
.numinput__step:last-child {
  border-top-right-radius: calc(var(--k-radius-md) - var(--k-bw, 1px));
  border-bottom-right-radius: calc(var(--k-radius-md) - var(--k-bw, 1px));
}
.numinput__step:hover { background: var(--k-state-hover); color: var(--k-fg); }
.numinput__step:active { color: var(--k-primary); }
.numinput--with-suffix .numinput__field { text-align: left; padding-right: var(--k-s-4); }
.numinput__suffix {
  padding-right: var(--k-s-8);
  font-size: var(--k-type-eyebrow);
  color: var(--k-fg-muted);
  font-variant-numeric: tabular-nums;
}
.numinput__steps {
  display: flex;
  flex-direction: column;
  border-left: var(--k-divider);
  align-self: stretch;
}
.numinput__chev {
  flex: 1;
  width: 24px;
  border: 0;
  background: transparent;
  color: var(--k-fg-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  transition:
    background var(--k-dur-fast, 110ms) var(--k-ease, ease),
    color var(--k-dur-fast, 110ms) var(--k-ease, ease);
}
/* Round the column's OUTER corners to the field radius so the hover wash
 * sits flush inside the rounded wrapper (the container can't use
 * overflow:hidden — that would clip the focus halo). −bw keeps the radius
 * just inside the wrapper's own border. */
.numinput__steps .numinput__chev:first-child {
  border-top-right-radius: calc(var(--k-radius-md) - var(--k-bw, 1px));
}
.numinput__steps .numinput__chev:last-child {
  border-bottom-right-radius: calc(var(--k-radius-md) - var(--k-bw, 1px));
}
.numinput__chev:hover { background: var(--k-state-hover); color: var(--k-fg); }
.numinput__chev:active { color: var(--k-primary); }  /* press feedback */
.numinput__chev + .numinput__chev { border-top: var(--k-divider); }
/* Suppress per-button focus outline — parent .numinput already shows
 * :focus-within ring, so a second outline on chev/step is visual noise.
 * Accessibility: container-level focus indicator covers keyboard users. */
.numinput__chev:focus,
.numinput__chev:focus-visible,
.numinput__step:focus,
.numinput__step:focus-visible { outline: none; }