number-input — the [- NUM +] stepper

The geometry is one bordered row split three ways: two stepper buttons (text glyphs in font-nav bold — no icon dependency) around a borderless, centered native <input type="number">. The parts are full-hit squares — measured 40×40px at the default rung — whose own 1px borders form the dividers: negative margins overlap the shell border so every line stays exactly 1px. The native spinners are hidden (appearance: textfield, the platform stepper law) but native behavior is kept: ↑/↓ step with min/max/step read straight off the element attributes. DOM order is minus, input, plus and the row is plain flex — dir="rtl" flips it with zero physical CSS.

The behavior has three measured clocks: a CLICK steps once and clamps into [min, max]; a HOLD steps immediately, plateaus through a 300ms delay, then accelerates to one step every 100ms until pointerup ANYWHERE (window-level listeners — sliding off the button never strands the interval); TYPING commits on change — empty reverts to undefined, committed rewrites normalize ("007" → "7", the float-step snap keeps 0.5 steps on 0.5), and out-of-range values clamp. A disabled field disables the buttons in lockstep while the input turns readonly, not disabled — it stays focusable and selectable so assistive tech can still read the value; the trade is that a readonly value still submits, so drop the name when a disabled field must exit FormData. There is NO formatting or locale layer by contract: display is String(value), commit is valueAsNumber — locale-raw, the family owns only stepping.

The axes split by role (all measured in the axes table): density is the whole composite — the steppers ride the same hit channel as the shell, landing at exactly the WCAG 2.5.8 24px floor at the 2xs rung; the square corner is authored (shape/radius axes unread); the theme is the form-family split voice (well/ring/hover re-derive under .dark while the shell atoms stay frozen); elevation is the own control-well (the F-1 fillable-composite ruling); size and color are supply-only with the §1 native-collision guard. The chrome axis is AMBIENT (the control-integration context resolves frame | bare — not a component prop): in a bare context the fill and borders fold away for in-panel compositions (measured: shell background/border and button borders transparent, well none). Kinship: input and the form families (the same field scaffold, the same error wiring), input-otp (the digit-exact shell cousin).

Receipts: the density ladder (40×40px steppers at default; 24×24px + 10px voice at the 2xs stamp, restored on removal), the hold clock (immediate step → 300ms plateau → 100ms/step: values 4→5→7→10→13 at ~80/420/700/1000ms in the probe), the commit clamp ("007" → 7, 99 → 16 under max=16, empty → undefined), the theme split (--background flipped to oklch(0 0 0) while the shell stayed oklch(1 0 0); --shadow-well/--ring/--muted all flipped) and the bare-chrome strip were measured on this page's served DOM (probe, task 32); the unread/supply-only rows carry grep receipts over ui/number-input/. The error state's shell renders the dashed DESTRUCTIVE border through the family's unlayered attribute carve-out (border-style dashed + --jx-destructive — the atom-vs-atom cascade kill, fixed family-side after task 32 flagged it; re-measured dashed here), and the error WIRING — aria-invalid + described-by — is fully live. The query() seat below rides the md viewport key (48rem) on the consumed density lane.

<script lang="ts">
  import NumberInput from '@ui/number-input.svelte';
  import { query } from '@lib/universal-props-query.svelte';
</script>

<!-- below 48rem the base (small) applies; at 48rem+ the md case (large)
     wins — 32px steppers become 48px, the whole kernel ladder re-rungs -->
<NumberInput label="responsive" density={query({ md: 'large' }, 'small')} />

<script lang="ts">
  import NumberInput from '@ui/number-input.svelte';
  import { query } from '@lib/universal-props-query.svelte';
</script>

<!-- below 48rem the base (small) applies; at 48rem+ the md case (large)
     wins — 32px steppers become 48px, the whole kernel ladder re-rungs -->
<NumberInput label="responsive" density={query({ md: 'large' }, 'small')} />

<NumberInput label="floor rung" density="2xs" />
<NumberInput label="dark field" theme="dark" />