@celestia-island/hikari 0.55.236 → 0.55.238

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.236",
+  "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/HkFaceShell.rail.test.tsx

@@ -424,6 +424,41 @@ describe("HkFaceShell rail chrome: toggle placement and the clip wrapper", () =>
     expect(clip!.querySelector(".sidebar-mock"), "the sidebar slot renders in the clip").toBeTruthy();
   });
 
+  it("hands the sidebar slot to the rail/full generations through the SWAP", async () => {
+    // The density dress rides the swap's GENERATION, never the host root:
+    // a root-level data-rail would restyle the frozen leaving generation
+    // mid-dissolve and reintroduce the squeeze this wave fixes. The root
+    // keeps data-rail as a STATE MARKER only (hosts/tests read it).
+    vi.useFakeTimers();
+    vi.stubGlobal("requestAnimationFrame", () => 0 as unknown as number);
+    vi.stubGlobal("cancelAnimationFrame", () => {});
+    const c = mountShell({ sidebarCollapsible: true });
+    const clip = () =>
+      c.panel().querySelector(":scope > .hk-sidebar-rail-clip") as HTMLElement;
+    const gens = () =>
+      Array.from(clip().querySelectorAll<HTMLElement>(".hk-sidebar-rail-generation"));
+
+    expect(clip().querySelector(".hk-sidebar-rail-swap"), "the swap mounts inside the clip").toBeTruthy();
+    expect(gens()).toHaveLength(1);
+    expect(gens()[0]!.hasAttribute("data-rail"), "expanded carries no rail density").toBe(false);
+    expect(gens()[0]!.style.width, "the generation pins the shell's sidebar width").toBe("224px");
+    expect(c.aside().hasAttribute("data-rail")).toBe(false);
+
+    c.toggle().click();
+    await vi.advanceTimersByTimeAsync(100); // mid-dissolve
+    const mid = gens();
+    expect(mid.length, "both generations share the swap's cell").toBe(2);
+    expect(mid[0]!.hasAttribute("data-rail"), "the leaving copy keeps the full dress").toBe(false);
+    expect(mid[0]!.style.width).toBe("224px");
+    expect(mid[1]!.hasAttribute("data-rail"), "the entering copy takes the rail dress").toBe(true);
+    expect(mid[1]!.style.width, "the rail generation pins the collapsed width").toBe("56px");
+    // The slot ran for the entering generation at its density; the root
+    // marker reads rail while the DENSITY lives on the generation.
+    expect(c.slotParams[c.slotParams.length - 1]!.collapsed).toBe(true);
+    expect(c.aside().hasAttribute("data-rail"), "the root keeps the state marker").toBe(true);
+    vi.unstubAllGlobals();
+  });
+
   it("does not touch the legacy sidebar path (no clip wrapper, no rail classes)", () => {
     const c = mountShell();
     expect(c.container.querySelector(".hk-sidebar-rail-clip")).toBeFalsy();

package/src/components/HkFaceShell.tsx

@@ -2,6 +2,7 @@ import { computed, defineComponent, ref, watch, type PropType } from "vue";
 import { HkCrossfade, HDrawer, HScrollContainer, useBreakpoint } from "@celestia-island/hikari";
 import { useI18n } from "../i18n/context";
 import { useSidebarRail } from "../composables/useSidebarRail";
+import HkSidebarRailSwap from "./HkSidebarRailSwap";
 import HkSidebarRailToggle, { isPointerOverRailToggle } from "./HkSidebarRailToggle";
 
 /** CSS-wide keywords. A shorthand rebuilt from one of them is NOT a
@@ -435,6 +436,10 @@ export const HkFaceShell = defineComponent({
               <aside
                 ref={railHostRef}
                 class="hk-sidebar-rail-host"
+                // STATE marker only (hosts/tests read "the rail layout is
+                // active"): the rail DENSITY dress itself rides the swap's
+                // generation inside the clip, so it can freeze on the
+                // leaving generation during the dissolve.
                 data-rail={railActive.value || undefined}
                 data-peeking={rail.peeking.value || undefined}
                 // Transient rail -> expanded window (useSidebarRail.pinning):
@@ -466,13 +471,29 @@ export const HkFaceShell = defineComponent({
                       border), so the slot's content clips inside this
                       wrapper — full rows stay inside rail width while the
                       panel width animates. The toggle stays a DIRECT child
-                      of the panel: it must never be clipped. */}
+                      of the panel: it must never be clipped. Inside the
+                      clip, the crossfade handoff (HkSidebarRailSwap)
+                      exchanges the rail and full generations through the
+                      tab-panel dissolve at width-pinned boxes, so the
+                      slot's content never re-lays-out at the panel's
+                      transient width — each generation sees its own
+                      `collapsed` dress, and the leaving copy stays
+                      frozen (and unclickable) while it dissolves. */}
                   <div class="hk-sidebar-rail-clip">
-                    {slots.sidebar({
-                      collapsed: railActive.value && !rail.peeking.value,
-                      onNavigate: onSidebarNavigate,
-                      peeking: rail.peeking.value,
-                    })}
+                    <HkSidebarRailSwap
+                      rail={railActive.value && !rail.peeking.value}
+                      railWidth={props.sidebarCollapsedWidth}
+                      expandedWidth={props.sidebarWidth}
+                    >
+                      {/* NOT `rail` — the scoped param would shadow the
+                          useSidebarRail handle the outer bindings read. */}
+                      {({ rail: density }: { rail: boolean }) =>
+                        slots.sidebar?.({
+                          collapsed: density,
+                          onNavigate: onSidebarNavigate,
+                          peeking: rail.peeking.value,
+                        })}
+                    </HkSidebarRailSwap>
                   </div>
                   <HkSidebarRailToggle expanded={!railActive.value} onToggle={rail.toggle} />
                 </div>

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",
     ]);
   });