@celestia-island/hikari 0.55.237 → 0.55.239

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>
     );