@celestia-island/hikari 0.55.237 → 0.55.238

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.237",
+  "version": "0.55.238",
   "private": false,
   "type": "module",
   "description": "Hikari UI library, Vue 3 runtime — one design system for Vue 3 and Rust/WASM applications",

package/src/DemoApp.tsx

@@ -360,12 +360,15 @@ export default defineComponent({
         </section>
 
         <section>
-          <h2>HInput (text / password) / HSearchInput / HNumberInput / HTextarea</h2>
+          <h2>HInput (text / password / number) / HSearchInput / HNumberInput / HTextarea</h2>
           <div class="form-grid">
             <HInput modelValue={form.value.text} onUpdate:modelValue={(v: string) => (form.value.text = v)} placeholder="Text input" />
             <HInput modelValue={form.value.text} onUpdate:modelValue={(v: string) => (form.value.text = v)} placeholder="Disabled" disabled />
             <HSearchInput modelValue={form.value.search} onUpdate:modelValue={(v: string | number) => (form.value.search = String(v))} placeholder="Search..." />
             <HNumberInput modelValue={form.value.number} onUpdate:modelValue={(v: number) => (form.value.number = v)} placeholder="Number" />
+            {/* The plain input's number variant — same shared lucide stepper
+                column, no browser-native spin buttons. */}
+            <HInput type="number" modelValue={String(form.value.number)} onUpdate:modelValue={(v: string) => (form.value.number = v === "" ? 0 : Number(v))} placeholder="Number (steppers)" />
             <HInput variant="password" modelValue={form.value.password} onUpdate:modelValue={(v: string) => (form.value.password = v)} placeholder="Password (filter reveal — default)" />
             <HInput variant="password" revealStrategy="sweep" modelValue={form.value.password} onUpdate:modelValue={(v: string) => (form.value.password = v)} placeholder="Password (sweep reveal — readable band)" />
             <HInput variant="password" revealStrategy="noise" modelValue={form.value.password} onUpdate:modelValue={(v: string) => (form.value.password = v)} placeholder="Password (noise reveal — screenshot-safe)" />

package/src/components/HkInput.number.test.tsx

@@ -0,0 +1,219 @@
+/**
+ * Behavior + source contract for HkInput's number variant (2026-10-30
+ * user request via the wowsp overlay settings): a number field used to
+ * carry the browser's NATIVE spin buttons — platform-drawn, unthemeable,
+ * the tiny up/down stack WebKit paints inside the field's right edge. The
+ * box now hides them (SCSS) and hosts the shared lucide stepper column
+ * (HkNumberSteppers) instead: pointer stepping runs through the component,
+ * keyboard stepping stays native (the field keeps type="number").
+ *
+ * Pinned guarantees:
+ *  1. type="number" AND variant="number" render the steppers + the box
+ *     markers (.hk-input-box-number, data-number-steppers); text and
+ *     textarea fields render none.
+ *  2. The native spin buttons are killed in SCSS under .hk-input-box-number
+ *     (-moz-appearance: textfield + the webkit pseudo-elements).
+ *  3. Pointer steps parse the STRING model (Number.parseFloat), honor the
+ *     min/max/step ATTRS (the same numbers the DOM input receives through
+ *     the spread), and emit the string form without float dust.
+ *  4. An unparsable draft restarts from the nearest meaningful bound.
+ *  5. The steppers' width folds into --hk-input-affix-end-w (suffix +
+ *     steppers SUM) so centered text and the marquee clear them.
+ *  6. disabled / readonly grey the column out.
+ */
+import { afterEach, describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { createApp, h, nextTick, ref, type Component } from "vue";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import HkInput from "./HkInput";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const scss = readFileSync(join(here, "HkInput.scss"), "utf-8");
+
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+interface NumberHarness {
+  container: HTMLElement;
+  emitted: string[];
+  setModel: (v: string) => void;
+}
+
+function mountNumber(
+  opts: { props?: Record<string, unknown>; slots?: Record<string, Component>; initial?: string } = {},
+): NumberHarness {
+  const model = ref(opts.initial ?? "60");
+  const emitted: string[] = [];
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp({
+    render: () =>
+      h(
+        HkInput,
+        {
+          type: "number",
+          placeholder: "Hang",
+          modelValue: model.value,
+          "onUpdate:modelValue": (v: string) => {
+            model.value = v;
+            emitted.push(v);
+          },
+          ...opts.props,
+        },
+        opts.slots ?? {},
+      ),
+  });
+  app.mount(container);
+  mounts.push({ app, container });
+  return { container, emitted, setModel: (v: string) => { model.value = v; } };
+}
+
+function query<T extends HTMLElement = HTMLElement>(container: HTMLElement, selector: string): T | null {
+  return container.querySelector<T>(selector);
+}
+
+function click(container: HTMLElement, dir: "up" | "down"): void {
+  const el = query(container, `.hk-number-input-step-${dir}`);
+  expect(el, `${dir} stepper must render`).not.toBeNull();
+  el!.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true }));
+}
+
+afterEach(() => {
+  for (const { app, container } of mounts.splice(0)) {
+    app.unmount();
+    container.remove();
+  }
+  document.body.innerHTML = "";
+});
+
+describe("HkInput number variant — stepper column", () => {
+  it("renders the steppers for type=number and variant=number, none for other types", async () => {
+    const typed = mountNumber();
+    await nextTick();
+    expect(query(typed.container, ".hk-number-input-steppers")).not.toBeNull();
+    const box = query(typed.container, ".hk-input-box")!;
+    expect(box.classList.contains("hk-input-box-number")).toBe(true);
+    expect(box.getAttribute("data-number-steppers")).toBe("true");
+    // The field stays native — keyboard stepping and validation untouched.
+    expect(query<HTMLInputElement>(typed.container, ".hk-input-element")!.type).toBe("number");
+
+    const variant = mountNumber({ props: { type: "text", variant: "number" }, initial: "3" });
+    await nextTick();
+    expect(query(variant.container, ".hk-number-input-steppers")).not.toBeNull();
+
+    const text = mountNumber({ props: { type: "text" }, initial: "abc" });
+    await nextTick();
+    expect(query(text.container, ".hk-number-input-steppers")).toBeNull();
+    expect(query(text.container, ".hk-input-box-number")).toBeNull();
+
+    const ta = mountNumber({ props: { type: "textarea" } });
+    await nextTick();
+    expect(query(ta.container, ".hk-number-input-steppers")).toBeNull();
+  });
+
+  it("steps the parsed string model and clears float dust", async () => {
+    const harness = mountNumber({ initial: "60" });
+    await nextTick();
+    click(harness.container, "up");
+    await nextTick(); // props (the model) settle before the next parse
+    click(harness.container, "down");
+    expect(harness.emitted).toEqual(["61", "60"]);
+
+    const dust = mountNumber({ initial: "0.2", props: { step: "0.1" } });
+    await nextTick();
+    click(dust.container, "up");
+    expect(dust.emitted).toEqual(["0.3"]);
+  });
+
+  it("honors the min/max/step attrs the DOM input also receives", async () => {
+    const harness = mountNumber({ initial: "60", props: { min: "60", max: "240", step: "10" } });
+    await nextTick();
+    const up = query<HTMLButtonElement>(harness.container, ".hk-number-input-step-up")!;
+    const down = query<HTMLButtonElement>(harness.container, ".hk-number-input-step-down")!;
+    expect(down.disabled, "at the min bound the down stepper greys out").toBe(true);
+    expect(up.disabled).toBe(false);
+
+    click(harness.container, "down");
+    expect(harness.emitted, "a dead stepper must not emit").toEqual([]);
+
+    click(harness.container, "up");
+    expect(harness.emitted).toEqual(["70"]);
+
+    harness.setModel("240");
+    await nextTick();
+    expect(up.disabled, "at the max bound the up stepper greys out").toBe(true);
+    expect(down.disabled).toBe(false);
+  });
+
+  it("restarts an unparsable draft from the nearest meaningful bound", async () => {
+    const harness = mountNumber({ initial: "", props: { min: "2", max: "5" } });
+    await nextTick();
+    click(harness.container, "up");
+    expect(harness.emitted).toEqual(["2"]);
+    harness.setModel("garbage");
+    await nextTick();
+    click(harness.container, "down");
+    expect(harness.emitted).toEqual(["2", "5"]);
+  });
+
+  it("greys the column out while disabled or readonly", async () => {
+    const disabled = mountNumber({ props: { disabled: true } });
+    await nextTick();
+    expect(query<HTMLButtonElement>(disabled.container, ".hk-number-input-step-up")!.disabled).toBe(true);
+    expect(query<HTMLButtonElement>(disabled.container, ".hk-number-input-step-down")!.disabled).toBe(true);
+
+    const readonly = mountNumber({ props: { readonly: true } });
+    await nextTick();
+    expect(query<HTMLButtonElement>(readonly.container, ".hk-number-input-step-up")!.disabled).toBe(true);
+  });
+
+  it("folds the stepper width into the end-side affix reservation", async () => {
+    const receiver = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "offsetWidth");
+    expect(receiver, "offsetWidth accessor exists on HTMLElement").toBeTruthy();
+    Object.defineProperty(HTMLElement.prototype, "offsetWidth", {
+      configurable: true,
+      get: () => 96,
+    });
+    try {
+      // suffix slot (96) + steppers column (96) — the end var is the SUM.
+      const both = mountNumber({ slots: { suffix: () => h("span", "px") } });
+      await nextTick();
+      const box = query(both.container, ".hk-input-box")!;
+      expect(box.style.getPropertyValue("--hk-input-affix-end-w")).toBe("192px");
+
+      const steppersOnly = mountNumber();
+      await nextTick();
+      expect(
+        query(steppersOnly.container, ".hk-input-box")!.style.getPropertyValue("--hk-input-affix-end-w"),
+      ).toBe("96px");
+    } finally {
+      if (receiver) {
+        Object.defineProperty(HTMLElement.prototype, "offsetWidth", receiver);
+      }
+    }
+  });
+});
+
+describe("HkInput number variant — SCSS contract", () => {
+  it("kills the native spin buttons under the number box", () => {
+    const rule = scss.match(/\.hk-input-box-number \.hk-input-element\s*{[^}]*}/)?.[0] ?? "";
+    expect(rule, "number element rule must exist").toContain("-moz-appearance: textfield");
+    expect(rule).toContain("::-webkit-inner-spin-button");
+    expect(rule).toContain("::-webkit-outer-spin-button");
+    expect(rule).toContain("-webkit-appearance: none");
+    expect(rule).toContain("margin: 0");
+  });
+
+  it("parks the suffix next to the steppers via the box marker", () => {
+    const rule =
+      scss.match(
+        /\.hk-input-box\[data-number-steppers\] \.hk-input-affix\.hk-input-suffix\s*{[^}]*}/,
+      )?.[0] ?? "";
+    expect(rule, "suffix park rule must exist").toContain("margin-inline-start: 0");
+
+    const column = scss.match(/\.hk-input-box \.hk-number-input-steppers\s*{[^}]*}/)?.[0] ?? "";
+    expect(column, "stepper column context rule must exist").toContain("margin-inline-start: auto");
+    expect(column).toContain("z-index: 1");
+  });
+});

package/src/components/HkInput.scss

@@ -186,6 +186,38 @@
   margin-inline-start: auto;
 }
 
+/* ── Number fields (type="number" / variant="number") ───────────────
+ * The browser's native spin buttons are retired: the shared lucide
+ * stepper column (HkNumberSteppers) takes the trailing edge instead, so
+ * every hikari number field draws the same up/down affordance regardless
+ * of host platform. The field itself keeps type="number" — keyboard
+ * arrows and min/max validation stay native. */
+.hk-input-box-number .hk-input-element {
+  -moz-appearance: textfield;
+
+  &::-webkit-inner-spin-button,
+  &::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+}
+
+/* The stepper column is an in-flow sibling riding ABOVE the absolutely
+ * positioned element (z-index 1, exactly like the affixes) and it owns the
+ * trailing auto margin — the slot the suffix's auto margin occupies when no
+ * steppers render. */
+.hk-input-box .hk-number-input-steppers {
+  position: relative;
+  z-index: 1;
+  margin-inline-start: auto;
+}
+
+/* With the steppers present the suffix parks NEXT to them: two auto margins
+ * would split the free space and float the suffix mid-gap. */
+.hk-input-box[data-number-steppers] .hk-input-affix.hk-input-suffix {
+  margin-inline-start: 0;
+}
+
 /* The placeholder-marquee window shares the element's content box: inset
  * by the same base padding plus the affix clearance, so the scrolling
  * strip never slides underneath the affixes either. Like the element,

package/src/components/HkInput.tsx

@@ -1,9 +1,10 @@
-import { computed, defineComponent, nextTick, onBeforeUnmount, onMounted, ref, useAttrs, useId, watch, type PropType } from "vue";
+import { computed, defineComponent, nextTick, onBeforeUnmount, onMounted, ref, useAttrs, useId, watch, type PropType, type Ref } from "vue";
 
 import type { PasswordStrengthEvaluator } from "../utils/password";
 
 import { HkPlaceholderMarquee } from "./HkPlaceholderMarquee";
 import HkPasswordSurface from "./HkPasswordSurface";
+import HkNumberSteppers from "./HkNumberSteppers";
 import "./HkInput.scss";
 
 export default defineComponent({
@@ -210,6 +211,13 @@ export default defineComponent({
       return props.type;
     });
 
+    /* A number field (type="number" or variant="number") carries the shared
+       lucide stepper column (HkNumberSteppers) INSTEAD of the browser's
+       native spin buttons — the field keeps its native semantics (arrow
+       keys step, min/max validation), the column is the pointer
+       affordance riding the trailing edge. */
+    const isNumberField = computed(() => resolvedType.value === "number");
+
     const filteredAttrs = computed(() => {
       const { class: _, style: __, ...rest } = attrs as Record<string, unknown>;
       return rest;
@@ -237,12 +245,17 @@ export default defineComponent({
     // / "end" pads each side only by its own affix.
     const prefixEl = ref<HTMLElement | null>(null);
     const suffixEl = ref<HTMLElement | null>(null);
+    /* The number steppers' column — measured INTO the end-side clearance
+       (summed with the suffix span) so centered text and the marquee
+       window always end short of the buttons. */
+    const steppersEl = ref<HTMLElement | null>(null);
     const affixStartW = ref(0);
     const affixEndW = ref(0);
 
     function measureAffixes() {
       affixStartW.value = prefixEl.value?.offsetWidth ?? 0;
-      affixEndW.value = suffixEl.value?.offsetWidth ?? 0;
+      affixEndW.value =
+        (suffixEl.value?.offsetWidth ?? 0) + (steppersEl.value?.offsetWidth ?? 0);
     }
 
     const affixRO: ResizeObserver | null =
@@ -251,14 +264,13 @@ export default defineComponent({
       affixRO?.disconnect();
     });
 
-    /** Stable ref callback for one affix slot — observes the live span
-     *  so width changes (a longer chip label, a swapped icon) re-publish
-     *  the custom properties without any consumer involvement. */
-    function bindAffix(which: "start" | "end") {
-      const slot = () => (which === "start" ? prefixEl : suffixEl);
+    /** Stable ref callback factory for one measured slot — observes the
+     *  live element so width changes (a longer chip label, a swapped
+     *  icon, a steppers size flip) re-publish the custom properties
+     *  without any consumer involvement. */
+    function bindMeasured(slot: () => Ref<HTMLElement | null>) {
       const set = (node: HTMLElement | null) => {
-        if (which === "start") prefixEl.value = node;
-        else suffixEl.value = node;
+        slot().value = node;
       };
       return (el: unknown) => {
         const node = (el as HTMLElement | null) ?? null;
@@ -288,8 +300,9 @@ export default defineComponent({
         measureAffixes();
       };
     }
-    const prefixAffixRef = bindAffix("start");
-    const suffixAffixRef = bindAffix("end");
+    const prefixAffixRef = bindMeasured(() => prefixEl);
+    const suffixAffixRef = bindMeasured(() => suffixEl);
+    const steppersRootRef = bindMeasured(() => steppersEl);
 
     const boxVars = computed(
       () =>
@@ -299,6 +312,60 @@ export default defineComponent({
         }) as Record<string, string>,
     );
 
+    /* ── number steppers (type="number" / variant="number") ──
+       min/max/step reach the DOM input as undeclared attrs through the
+       spread; the steppers read the SAME numbers so pointer stepping
+       agrees with the native keyboard stepping and validation. */
+    function attrNumber(key: string): number | undefined {
+      const raw = attrs[key];
+      if (raw == null || raw === "") return undefined;
+      const n = Number(raw);
+      return Number.isFinite(n) ? n : undefined;
+    }
+
+    const numberBounds = computed(() => ({
+      min: attrNumber("min"),
+      max: attrNumber("max"),
+      step: attrNumber("step") ?? 1,
+    }));
+
+    const currentNumber = computed(() =>
+      Number.parseFloat(String(props.modelValue ?? "")),
+    );
+
+    const canStepUp = computed(() => {
+      const { max } = numberBounds.value;
+      if (max == null) return true;
+      const current = currentNumber.value;
+      // An unparsable draft leaves the end open — the value itself picks
+      // the restart bound in stepNumberValue.
+      return !Number.isFinite(current) || current < max;
+    });
+
+    const canStepDown = computed(() => {
+      const { min } = numberBounds.value;
+      if (min == null) return true;
+      const current = currentNumber.value;
+      return !Number.isFinite(current) || current > min;
+    });
+
+    function stepNumberValue(dir: "up" | "down") {
+      if (props.disabled || props.readonly) return;
+      const { min, max, step } = numberBounds.value;
+      const current = currentNumber.value;
+      // An unparsable draft lands ON the bound (native number-input
+      // behavior): up restarts at min (else 0), down at max (else 0).
+      if (!Number.isFinite(current)) {
+        emit("update:modelValue", String(dir === "up" ? (min ?? 0) : (max ?? 0)));
+        return;
+      }
+      let next = dir === "up" ? current + step : current - step;
+      if (min != null && next < min) next = min;
+      if (max != null && next > max) next = max;
+      // Kill float dust (0.1 + 0.2 must not surface as 0.30000000000000004).
+      emit("update:modelValue", String(Number.parseFloat(next.toFixed(10))));
+    }
+
     function onInput(e: Event) {
       const target = e.target as HTMLInputElement | HTMLTextAreaElement;
       emit("update:modelValue", target.value);
@@ -348,6 +415,7 @@ export default defineComponent({
       `hk-input-box-${props.size}`,
       props.error ? "hk-input-box-error" : "",
       props.disabled ? "hk-input-box-disabled" : "",
+      isNumberField.value ? "hk-input-box-number" : "",
     ]);
 
     const isText = !isTextarea.value;
@@ -419,6 +487,10 @@ export default defineComponent({
           class={boxClass.value}
           style={boxVars.value}
           data-autogrow={isAutoGrow.value || undefined}
+          // Number boxes carry the marker so the SCSS can hide the native
+          // spin buttons and park the suffix next to the steppers (the
+          // column owns the trailing auto margin).
+          data-number-steppers={isNumberField.value || undefined}
           // Textarea boxes never carry the marker: their element is
           // excluded by :not() anyway, and keeping it off also spares
           // a textarea-scoped marquee from the per-side window insets.
@@ -545,6 +617,16 @@ export default defineComponent({
               {slots.suffixIcon()}
             </span>
           )}
+          {isNumberField.value && (
+            <HkNumberSteppers
+              rootRef={steppersRootRef}
+              size={props.size}
+              canUp={canStepUp.value}
+              canDown={canStepDown.value}
+              disabled={props.disabled || props.readonly}
+              onStep={stepNumberValue}
+            />
+          )}
         </div>
         )}
         {props.error ? (

package/src/components/HkNumberInput.affix.test.ts

@@ -27,6 +27,11 @@ import HkNumberInput from "./HkNumberInput";
 
 const here = dirname(fileURLToPath(import.meta.url));
 const scss = readFileSync(join(here, "HkNumberInput.scss"), "utf-8");
+/* The stepper column's rules moved to the shared HkNumberSteppers
+   stylesheet (2026-10-30) — the same affordance now renders inside
+   HkInput's number variant, so its geometry contract ships with the
+   component that draws it. */
+const steppersScss = readFileSync(join(here, "HkNumberSteppers.scss"), "utf-8");
 
 const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
 
@@ -65,9 +70,9 @@ describe("HkNumberInput affix contract", () => {
   });
 
   it("stretches the stepper column so height:50% steps and the divider span the box", () => {
-    const rule = scss.match(/\.hk-number-input-steppers\s*{[^}]*}/)?.[0] ?? "";
+    const rule = steppersScss.match(/\.hk-number-input-steppers\s*{[^}]*}/)?.[0] ?? "";
     expect(rule, "steppers rule must exist").toContain("align-self: stretch");
-    const steps = scss.match(/\.hk-number-input-step\s*{[^}]*}/)?.[0] ?? "";
+    const steps = steppersScss.match(/\.hk-number-input-step\s*{[^}]*}/)?.[0] ?? "";
     expect(steps).toContain("height: 50%");
   });
 
@@ -101,10 +106,13 @@ describe("HkNumberInput affix contract", () => {
 
     const inner = query(container, ".hk-number-input-inner");
     const children = Array.from(inner?.children ?? []).map((el) => el.className);
+    // The stepper column carries its size class on the stack root (the
+    // shared HkNumberSteppers sizes from it — HkNumberInput.scss no longer
+    // holds per-size step rules).
     expect(children).toEqual([
       "hk-number-input-field",
       "hk-number-input-suffix",
-      "hk-number-input-steppers",
+      "hk-number-input-steppers hk-number-input-steppers-md",
     ]);
   });
 

package/src/components/HkNumberInput.scss

@@ -91,50 +91,9 @@
   padding-inline-end: var(--space-8, 0.5rem);
 }
 
-.hk-number-input-steppers {
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  /* Stretch to the inner box so the step buttons' height:50% resolves
-     against the real box height and the divider spans it fully —
-     content-sized centering left a floating ~28px stack in a 36px box. */
-  align-self: stretch;
-  /* Inline-start so the divider faces the field/suffix side in both
-     LTR and RTL (the flex row flips under direction: rtl). */
-  border-inline-start: 1px solid var(--hi-color-border);
-}
-
-.hk-number-input-step {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  /* Width comes from the per-size blocks below (the size class is always
-     on the wrapper); height stays here as the size-independent half. */
-  height: 50%;
-  padding: 0;
-  background: transparent;
-  border: none;
-  color: var(--hi-color-muted);
-  cursor: pointer;
-  transition:
-    background-color var(--duration-fast, 0.15s) ease,
-    color var(--duration-fast, 0.15s) ease;
-
-  &:hover:not(:disabled) {
-    background: color-mix(in srgb, var(--hi-color-surface) 60%, transparent);
-    color: var(--hi-color-text-primary);
-  }
-
-  &:active:not(:disabled) {
-    background: color-mix(in srgb, var(--hi-color-primary) 15%, transparent);
-    color: var(--hi-color-primary);
-  }
-
-  &:disabled {
-    opacity: 0.3;
-    cursor: not-allowed;
-  }
-}
+/* The stepper column's rules live in HkNumberSteppers.scss (the shared
+   affordance also rendered by HkInput's number variant); the size class
+   rides the stack root itself, so no per-size step rules remain here. */
 
 /* --- Size variants --- */
 
@@ -149,15 +108,6 @@
   font-size: var(--text-xs, 0.75rem);
 }
 
-.hk-number-input-sm .hk-number-input-step {
-  width: var(--space-20, 1.25rem);
-}
-
-.hk-number-input-sm .hk-number-input-step svg {
-  width: 12px;
-  height: 12px;
-}
-
 .hk-number-input-md .hk-number-input-field {
   font-size: var(--text-base, 0.875rem);
   padding: 0 var(--space-12, 0.75rem);
@@ -169,10 +119,6 @@
   font-size: var(--text-base, 0.875rem);
 }
 
-.hk-number-input-md .hk-number-input-step {
-  width: var(--space-24, 1.5rem);
-}
-
 .hk-number-input-lg .hk-number-input-field {
   font-size: var(--text-md, 1rem);
   padding: 0 var(--space-16, 1rem);
@@ -183,12 +129,3 @@
 .hk-number-input-lg .hk-number-input-suffix {
   font-size: var(--text-md, 1rem);
 }
-
-.hk-number-input-lg .hk-number-input-step {
-  width: var(--space-28, 1.75rem);
-}
-
-.hk-number-input-lg .hk-number-input-step svg {
-  width: 16px;
-  height: 16px;
-}

package/src/components/HkNumberInput.tsx

@@ -1,5 +1,5 @@
-import { computed, defineComponent, onUnmounted, ref, type PropType } from "vue";
-import { scheduleAfter, scheduleEvery, type AnimationHandle } from "../runtime/animationBus";
+import { computed, defineComponent, ref, type PropType } from "vue";
+import HkNumberSteppers from "./HkNumberSteppers";
 import "./HkNumberInput.scss";
 
 export default defineComponent({
@@ -29,8 +29,6 @@ export default defineComponent({
     "update:modelValue": (_value: number) => true,
   },
   setup(props, { emit, slots }) {
-    let holdDelay: AnimationHandle | null = null;
-    let holdRepeat: AnimationHandle | null = null;
     const inputRef = ref<HTMLInputElement | null>(null);
 
     const canIncrement = computed(() =>
@@ -62,29 +60,6 @@ export default defineComponent({
       emitValue(props.modelValue - props.step);
     }
 
-    function startHold(dir: "up" | "down") {
-      stopHold();
-      // 300ms press threshold, then a 50ms repeat — both on the shared
-      // animation bus so the hold cadence parks with the reduced-motion
-      // switch like every other JS-driven animation.
-      holdDelay = scheduleAfter(() => {
-        holdDelay = null;
-        holdRepeat = scheduleEvery(() => {
-          if (dir === "up") increment();
-          else decrement();
-        }, 50);
-      }, 300);
-    }
-
-    function stopHold() {
-      holdDelay?.disconnect();
-      holdDelay = null;
-      holdRepeat?.disconnect();
-      holdRepeat = null;
-    }
-
-    onUnmounted(stopHold);
-
     const wrapperClass = computed(() => [
       "hk-number-input",
       `hk-number-input-${props.size}`,
@@ -119,60 +94,16 @@ export default defineComponent({
               {slots.suffix ? slots.suffix() : props.suffix}
             </span>
           ) : null}
-          <div class="hk-number-input-steppers">
-            <button
-              type="button"
-              class="hk-number-input-step hk-number-input-step-up"
-              disabled={!canIncrement.value || props.disabled}
-              onMousedown={(e: MouseEvent) => {
-                e.preventDefault();
-                startHold("up");
-              }}
-              onMouseup={(e: MouseEvent) => {
-                e.preventDefault();
-                stopHold();
-              }}
-              onMouseleave={(e: MouseEvent) => {
-                e.preventDefault();
-                stopHold();
-              }}
-              onClick={(e: MouseEvent) => {
-                e.preventDefault();
-                increment();
-              }}
-              tabindex={-1}
-            >
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="14" height="14">
-                <polyline points="18 15 12 9 6 15" />
-              </svg>
-            </button>
-            <button
-              type="button"
-              class="hk-number-input-step hk-number-input-step-down"
-              disabled={!canDecrement.value || props.disabled}
-              onMousedown={(e: MouseEvent) => {
-                e.preventDefault();
-                startHold("down");
-              }}
-              onMouseup={(e: MouseEvent) => {
-                e.preventDefault();
-                stopHold();
-              }}
-              onMouseleave={(e: MouseEvent) => {
-                e.preventDefault();
-                stopHold();
-              }}
-              onClick={(e: MouseEvent) => {
-                e.preventDefault();
-                decrement();
-              }}
-              tabindex={-1}
-            >
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="14" height="14">
-                <polyline points="6 9 12 15 18 9" />
-              </svg>
-            </button>
-          </div>
+          {/* The shared stepper column (lucide ChevronUp/Down) — it owns
+              the hold-to-repeat cadence on the animation bus; the bounds
+              mirror this field's min/max so dead ends render greyed. */}
+          <HkNumberSteppers
+            canUp={canIncrement.value}
+            canDown={canDecrement.value}
+            disabled={props.disabled}
+            size={props.size}
+            onStep={(dir: "up" | "down") => (dir === "up" ? increment() : decrement())}
+          />
         </div>
       </div>
     );

package/src/components/HkNumberSteppers.scss

@@ -0,0 +1,85 @@
+/* Shared stepper column for hikari's number fields — HkNumberInput and
+   HkInput's number variant (type="number" / variant="number"), rendered by
+   HkNumberSteppers.tsx. The rules moved here verbatim from HkNumberInput.scss
+   (2026-10-30) so both hosts load the affordance from one stylesheet; the
+   size class now lives on the STACK ROOT (hk-number-input-steppers-{sm,md,lg})
+   instead of the host wrapper, so the geometry follows each host's `size`
+   prop without needing the host's own size class anywhere up the tree. */
+
+.hk-number-input-steppers {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  /* Stretch to the host box so the step buttons' height:50% resolves
+     against the real box height and the divider spans it fully —
+     content-sized centering left a floating ~28px stack in a 36px box. */
+  align-self: stretch;
+  /* Inline-start so the divider faces the field/suffix side in both
+     LTR and RTL (the flex row flips under direction: rtl). */
+  border-inline-start: 1px solid var(--hi-color-border);
+}
+
+.hk-number-input-step {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* Width comes from the per-size blocks below; height stays here as the
+     size-independent half. */
+  height: 50%;
+  padding: 0;
+  background: transparent;
+  border: none;
+  color: var(--hi-color-muted);
+  cursor: pointer;
+  transition:
+    background-color var(--duration-fast, 0.15s) ease,
+    color var(--duration-fast, 0.15s) ease;
+
+  &:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--hi-color-surface) 60%, transparent);
+    color: var(--hi-color-text-primary);
+  }
+
+  &:active:not(:disabled) {
+    background: color-mix(in srgb, var(--hi-color-primary) 15%, transparent);
+    color: var(--hi-color-primary);
+  }
+
+  &:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+}
+
+/* --- Size variants (size class on the stack root) --- */
+
+.hk-number-input-steppers-sm .hk-number-input-step {
+  width: var(--space-20, 1.25rem);
+}
+
+.hk-number-input-steppers-sm .hk-number-input-step svg {
+  width: 12px;
+  height: 12px;
+}
+
+.hk-number-input-steppers-md .hk-number-input-step {
+  width: var(--space-24, 1.5rem);
+}
+
+/* The md svg size is declared EXPLICITLY: the retired inline markup carried
+   width/height=14 attributes that md silently leaned on — the lucide
+   components render their own 24px attribute default, so CSS owns every
+   size now. */
+.hk-number-input-steppers-md .hk-number-input-step svg {
+  width: 14px;
+  height: 14px;
+}
+
+.hk-number-input-steppers-lg .hk-number-input-step {
+  width: var(--space-28, 1.75rem);
+}
+
+.hk-number-input-steppers-lg .hk-number-input-step svg {
+  width: 16px;
+  height: 16px;
+}

package/src/components/HkNumberSteppers.test.tsx

@@ -0,0 +1,267 @@
+/**
+ * Behavior contract for the shared number steppers (2026-10-30): the
+ * lucide-drawn up/down column (ChevronUp / ChevronDown) that replaced both
+ * the hand-inlined polyline SVGs of HkNumberInput and the browser-native
+ * spin buttons of HkInput's number variant.
+ *
+ * Pinned behavior:
+ *  1. Click = one step per direction; a dead bound disables its button.
+ *  2. Press-and-hold arms on the shared animation bus (300ms) and repeats
+ *     every 50ms; the release click after a held run is SWALLOWED (the
+ *     original HkNumberInput cadence delivered it as one extra step).
+ *  3. A hold dies the moment its direction's bound goes dead mid-hold —
+ *     no repeat keeps running behind a button no mouseup can reach.
+ *  4. Non-primary buttons never arm a hold; leaving the button cancels it.
+ *  5. The stack root carries the size class and reports itself through the
+ *     rootRef function ref (the host's trailing-affix measurement), then
+ *     clears it on unmount.
+ */
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createApp, defineComponent, h, nextTick, ref } from "vue";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import HkNumberSteppers from "./HkNumberSteppers";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const scss = readFileSync(join(here, "HkNumberSteppers.scss"), "utf-8");
+
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+/* ── rAF pump: drive the shared animation bus deterministically ── */
+const rafQueue: Array<{ id: number; cb: FrameRequestCallback }> = [];
+let rafSeq = 0;
+let rafStubbed = false;
+/* Virtual clock: strictly increasing fired timestamps on the SAME axis as
+   performance.now() (the bus arms entries against the real clock). Per-pump
+   offsets accumulate, so a small offset never underflows the previous tick. */
+let vnow = 0;
+
+function stubRaf(): void {
+  if (rafStubbed) return;
+  rafStubbed = true;
+  vi.stubGlobal("requestAnimationFrame", (cb: FrameRequestCallback) => {
+    const id = ++rafSeq;
+    rafQueue.push({ id, cb });
+    return id;
+  });
+  vi.stubGlobal("cancelAnimationFrame", (id: number) => {
+    const i = rafQueue.findIndex((e) => e.id === id);
+    if (i !== -1) rafQueue.splice(i, 1);
+  });
+}
+
+/** Fire every queued frame `offsetMs` past the running virtual clock (which
+ *  never trails the real clock the bus armed its entries against). */
+function pumpRaf(offsetMs: number): void {
+  vnow = Math.max(vnow, performance.now()) + offsetMs;
+  for (const { cb } of rafQueue.splice(0)) cb(vnow);
+}
+
+/* ── mount harness ── */
+function mountSteppers(props: Record<string, unknown> = {}): {
+  container: HTMLElement;
+  steps: string[];
+} {
+  const steps: string[] = [];
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp({
+    render: () =>
+      h(HkNumberSteppers, {
+        onStep: (dir: "up" | "down") => steps.push(dir),
+        ...props,
+      }),
+  });
+  app.mount(container);
+  mounts.push({ app, container });
+  return { container, steps };
+}
+
+function button(container: HTMLElement, dir: "up" | "down"): HTMLButtonElement {
+  const el = container.querySelector(`.hk-number-input-step-${dir}`);
+  expect(el, `${dir} button must render`).not.toBeNull();
+  return el as HTMLButtonElement;
+}
+
+function press(target: HTMLButtonElement, buttonArg = 0): void {
+  target.dispatchEvent(
+    new MouseEvent("mousedown", { bubbles: true, cancelable: true, button: buttonArg }),
+  );
+}
+
+function release(target: HTMLButtonElement): void {
+  target.dispatchEvent(new MouseEvent("mouseup", { bubbles: true, cancelable: true }));
+}
+
+function click(target: HTMLButtonElement): void {
+  target.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true }));
+}
+
+afterEach(() => {
+  for (const { app, container } of mounts.splice(0)) {
+    app.unmount();
+    container.remove();
+  }
+  document.body.innerHTML = "";
+  rafQueue.length = 0;
+  vnow = 0;
+  if (rafStubbed) vi.unstubAllGlobals();
+  rafStubbed = false;
+});
+
+describe("HkNumberSteppers behavior", () => {
+  it("steps once per click and greys out dead bounds", () => {
+    const { container, steps } = mountSteppers();
+    click(button(container, "up"));
+    click(button(container, "down"));
+    expect(steps).toEqual(["up", "down"]);
+
+    const bounded = mountSteppers({ canUp: false });
+    expect(button(bounded.container, "up").disabled).toBe(true);
+    expect(button(bounded.container, "down").disabled).toBe(false);
+    click(button(bounded.container, "up"));
+    expect(bounded.steps).toEqual([]);
+    click(button(bounded.container, "down"));
+    expect(bounded.steps).toEqual(["down"]);
+  });
+
+  it("respects the disabled prop on both buttons", () => {
+    const { container, steps } = mountSteppers({ disabled: true });
+    expect(button(container, "up").disabled).toBe(true);
+    expect(button(container, "down").disabled).toBe(true);
+    click(button(container, "up"));
+    click(button(container, "down"));
+    expect(steps).toEqual([]);
+  });
+
+  it("arms the hold after 300ms, repeats per 50ms tick, and swallows the release click", () => {
+    stubRaf();
+    const { container, steps } = mountSteppers();
+    const up = button(container, "up");
+
+    press(up);
+    pumpRaf(10);
+    expect(steps, "arming delay — nothing yet").toEqual([]);
+
+    pumpRaf(320);
+    expect(steps, "threshold crossed — the first repeat fires in the same tick (the interval arms with lastRun=0, and the Map iteration visits entries added mid-tick)").toEqual(["up"]);
+
+    pumpRaf(1);
+    expect(steps, "inside the 50ms repeat window — nothing").toEqual(["up"]);
+
+    pumpRaf(60);
+    expect(steps).toEqual(["up", "up"]);
+
+    pumpRaf(120);
+    expect(steps, "one fire per frame, not two").toEqual(["up", "up", "up"]);
+
+    release(up);
+    pumpRaf(10);
+    expect(steps, "hold stopped — no further repeats").toEqual(["up", "up", "up"]);
+
+    click(up);
+    expect(steps, "the release click after a held run is swallowed").toEqual([
+      "up",
+      "up",
+      "up",
+    ]);
+
+    click(up);
+    expect(steps, "a fresh plain click steps again").toEqual([
+      "up",
+      "up",
+      "up",
+      "up",
+    ]);
+  });
+
+  it("kills the hold when its bound goes dead mid-hold", async () => {
+    stubRaf();
+    const steps: string[] = [];
+    const bounds = ref({ canUp: true });
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const Wrapper = defineComponent({
+      render: () =>
+        h(HkNumberSteppers, {
+          canUp: bounds.value.canUp,
+          onStep: (dir: "up" | "down") => {
+            steps.push(dir);
+            // The host clamps at its max and reports the dead bound.
+            bounds.value = { canUp: false };
+          },
+        }),
+    });
+    const app = createApp(Wrapper);
+    app.mount(container);
+    mounts.push({ app, container });
+
+    const up = button(container, "up");
+    press(up);
+    pumpRaf(320);
+    expect(steps, "arm + first repeat in the same tick").toEqual(["up"]);
+    await nextTick();
+
+    pumpRaf(60);
+    expect(steps, "the dead bound released the hold — no further steps").toEqual(["up"]);
+    pumpRaf(60);
+    expect(steps).toEqual(["up"]);
+  });
+
+  it("ignores non-primary buttons", () => {
+    stubRaf();
+    const { container, steps } = mountSteppers();
+    press(button(container, "up"), 2);
+    pumpRaf(400);
+    expect(steps).toEqual([]);
+  });
+
+  it("cancels a pending hold when the pointer leaves the button", () => {
+    stubRaf();
+    const { container, steps } = mountSteppers();
+    const up = button(container, "up");
+    press(up);
+    up.dispatchEvent(new MouseEvent("mouseleave"));
+    pumpRaf(400);
+    expect(steps).toEqual([]);
+  });
+});
+
+describe("HkNumberSteppers DOM + stylesheet contract", () => {
+  it("renders lucide chevrons, carries the size class, and reports its root", () => {
+    const roots: Array<HTMLElement | null> = [];
+    const { container } = mountSteppers({ size: "lg", rootRef: (el: HTMLElement | null) => roots.push(el) });
+
+    const stack = container.querySelector<HTMLElement>(".hk-number-input-steppers");
+    expect(stack, "stepper column must render").not.toBeNull();
+    expect(stack!.className).toBe("hk-number-input-steppers hk-number-input-steppers-lg");
+    expect(stack!.querySelector("svg.lucide-chevron-up")).not.toBeNull();
+    expect(stack!.querySelector("svg.lucide-chevron-down")).not.toBeNull();
+    expect(roots).toEqual([stack]);
+    expect(button(container, "up").getAttribute("tabindex")).toBe("-1");
+
+    mounts[0]!.app.unmount();
+    mounts.splice(0);
+    expect(roots.at(-1), "the rootRef clears on unmount").toBeNull();
+  });
+
+  it("owns every size's geometry in the shared stylesheet", () => {
+    for (const [size, px] of [["sm", "12px"], ["md", "14px"], ["lg", "16px"]] as const) {
+      const svg = scss.match(
+        new RegExp(`\\.hk-number-input-steppers-${size} \\.hk-number-input-step svg\\s*{[^}]*}`),
+      )?.[0];
+      expect(svg, `${size} svg rule must exist`).toBeTruthy();
+      expect(svg).toContain(`width: ${px}`);
+      expect(svg).toContain(`height: ${px}`);
+      const column = scss.match(
+        new RegExp(`\\.hk-number-input-steppers-${size} \\.hk-number-input-step\\s*{[^}]*}`),
+      )?.[0];
+      expect(column, `${size} column rule must exist`).toBeTruthy();
+    }
+    const stack = scss.match(/\.hk-number-input-steppers\s*{[^}]*}/)?.[0] ?? "";
+    expect(stack).toContain("align-self: stretch");
+    expect(stack).toContain("border-inline-start: 1px solid var(--hi-color-border)");
+  });
+});

package/src/components/HkNumberSteppers.tsx

@@ -0,0 +1,158 @@
+import { defineComponent, onUnmounted, type PropType } from "vue";
+import { ChevronDown, ChevronUp } from "lucide-vue-next";
+
+import { scheduleAfter, scheduleEvery, type AnimationHandle } from "../runtime/animationBus";
+import "./HkNumberSteppers.scss";
+
+/** Shared stepper column for hikari's number fields (HkNumberInput and
+ *  HkInput's number variant — type="number" / variant="number").
+ *
+ *  Extracted from HkNumberInput (2026-10-30) so the plain input can retire
+ *  the browser-native spin buttons too: one lucide-drawn affordance
+ *  (ChevronUp / ChevronDown) for every number field, replacing the
+ *  hand-inlined polyline SVGs the dedicated component used to carry.
+ *
+ *  Interaction contract — the original HkNumberInput cadence, plus two
+ *  hardening fixes:
+ *  - click = one step; press-and-hold = 300ms arming delay, then a 50ms
+ *    repeat, both scheduled on the shared animation bus so the hold
+ *    cadence parks with the reduced-motion switch like every other
+ *    JS-driven animation;
+ *  - a hold that reached the repeat phase swallows its release click (the
+ *    original delivered it as one extra step after a held run of repeats);
+ *  - a hold dies the moment the host reports its direction bound dead
+ *    (canUp/canDown flipping off mid-hold — the original kept the repeat
+ *    entry alive on the bus after a clamped field hit its max);
+ *  - non-primary buttons never arm the hold (the original intercepted
+ *    right-clicks too), and leaving the button cancels a pending hold.
+ *
+ *  The buttons are tabindex=-1: keyboard users step through the field's
+ *  native arrow keys (every host keeps real type="number" semantics) —
+ *  the column is the pointer affordance on top. */
+export default defineComponent({
+  name: "HkNumberSteppers",
+  emits: {
+    /** Step intent — once per click, once per repeat tick while held. */
+    step: (_dir: "up" | "down") => true,
+  },
+  props: {
+    /** Bounds mirrored from the host field's min/max so a dead end renders
+     *  greyed instead of silently ignoring clicks. */
+    canUp: { type: Boolean, default: true },
+    canDown: { type: Boolean, default: true },
+    disabled: { type: Boolean, default: false },
+    size: {
+      type: String as PropType<"sm" | "md" | "lg">,
+      default: "md",
+    },
+    /** Function ref for the host's width measurement — HkInput folds the
+     *  column into its trailing affix reservation so centered text and the
+     *  placeholder marquee never run underneath the buttons. */
+    rootRef: {
+      type: Function as PropType<(el: HTMLElement | null) => void>,
+      default: undefined,
+    },
+  },
+  setup(props, { emit }) {
+    let holdDelay: AnimationHandle | null = null;
+    let holdRepeat: AnimationHandle | null = null;
+    /* Set by the FIRST repeat tick — the release click that follows a held
+       run of steps must not add one more. */
+    let holdRepeated = false;
+
+    function step(dir: "up" | "down") {
+      if (props.disabled) return;
+      const blocked = dir === "up" ? !props.canUp : !props.canDown;
+      if (blocked) {
+        // The bound went dead under a live hold (a repeat stepped the field
+        // onto its max) — release the hold instead of leaving the bus entry
+        // running behind a disabled button no mouseup can reach.
+        stopHold();
+        return;
+      }
+      emit("step", dir);
+    }
+
+    function startHold(dir: "up" | "down") {
+      stopHold();
+      holdRepeated = false;
+      // 300ms press threshold, then a 50ms repeat — both on the shared
+      // animation bus (HkNumberInput's original cadence, kept verbatim).
+      holdDelay = scheduleAfter(() => {
+        holdDelay = null;
+        holdRepeat = scheduleEvery(() => {
+          holdRepeated = true;
+          step(dir);
+        }, 50);
+      }, 300);
+    }
+
+    function stopHold() {
+      holdDelay?.disconnect();
+      holdDelay = null;
+      holdRepeat?.disconnect();
+      holdRepeat = null;
+    }
+
+    onUnmounted(stopHold);
+
+    /* Created once per direction (not per render) so the div's ref handlers
+       stay referentially stable — a per-render closure would make Vue detach
+       and re-attach the ref on every patch. */
+    function pressHandlers(dir: "up" | "down") {
+      return {
+        onMousedown: (e: MouseEvent) => {
+          e.preventDefault();
+          if (e.button !== 0) return;
+          startHold(dir);
+        },
+        onMouseup: (e: MouseEvent) => {
+          e.preventDefault();
+          stopHold();
+        },
+        onMouseleave: () => stopHold(),
+        onClick: (e: MouseEvent) => {
+          e.preventDefault();
+          if (holdRepeated) {
+            holdRepeated = false;
+            return;
+          }
+          step(dir);
+        },
+      };
+    }
+
+    const upHandlers = pressHandlers("up");
+    const downHandlers = pressHandlers("down");
+
+    function bindRoot(el: unknown) {
+      props.rootRef?.((el as HTMLElement | null) ?? null);
+    }
+
+    return () => (
+      <div
+        class={["hk-number-input-steppers", `hk-number-input-steppers-${props.size}`]}
+        ref={bindRoot}
+      >
+        <button
+          type="button"
+          class="hk-number-input-step hk-number-input-step-up"
+          disabled={props.disabled || !props.canUp}
+          tabindex={-1}
+          {...upHandlers}
+        >
+          <ChevronUp size={14} aria-hidden="true" />
+        </button>
+        <button
+          type="button"
+          class="hk-number-input-step hk-number-input-step-down"
+          disabled={props.disabled || !props.canDown}
+          tabindex={-1}
+          {...downHandlers}
+        >
+          <ChevronDown size={14} aria-hidden="true" />
+        </button>
+      </div>
+    );
+  },
+});