@celestia-island/hikari 0.40.31 → 0.40.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.40.31",
+  "version": "0.40.32",
   "private": false,
   "type": "module",
   "description": "Hikari Vue 3 component library — production-grade UI components based on shittim-chest design system",

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

@@ -0,0 +1,151 @@
+/**
+ * Source + behavior contract for HkNumberInput affixes (2026-09-08
+ * user report via shittim-chest: a "seconds" unit placed as an EXTERNAL
+ * sibling span next to a labeled HkNumberInput centered against the
+ * root (label row + input), so it sat ABOVE the input box's center
+ * axis). The affixes must ride INSIDE the field, and the component now
+ * also accepts plain `prefix`/`suffix` string props so consumers never
+ * need the external-span pattern again.
+ *
+ * Pinned guarantees:
+ *  1. The affix spans are flex items of the inner row with
+ *     align-items: center — the unit text shares the input box's
+ *     vertical axis, regardless of the label row above.
+ *  2. The inner row order is prefix → input → suffix → steppers, so an
+ *     affix always sits between the typed value and the stepper
+ *     column (never outside the bordered field).
+ *  3. Slots take precedence over the string props; absent both, no
+ *     affix span renders (no stray padding).
+ */
+import { afterEach, describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { createApp, h, type Component } from "vue";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import HkNumberInput from "./HkNumberInput";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const scss = readFileSync(join(here, "HkNumberInput.scss"), "utf-8");
+
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+function mountNumberInput(
+  opts: { slots?: Record<string, Component>; props?: Record<string, unknown> } = {},
+) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp({
+    render: () =>
+      h(HkNumberInput, { modelValue: 3, ...opts.props }, opts.slots ?? {}),
+  });
+  app.mount(container);
+  mounts.push({ app, container });
+  return { container };
+}
+
+function query(container: HTMLElement, selector: string): Element | null {
+  return container.querySelector(selector);
+}
+
+afterEach(() => {
+  for (const { app, container } of mounts.splice(0)) {
+    app.unmount();
+    container.remove();
+  }
+  document.body.innerHTML = "";
+});
+
+describe("HkNumberInput affix contract", () => {
+  it("centers the affix spans on the input box axis (SCSS contract)", () => {
+    const rule =
+      scss.match(/\.hk-number-input-prefix,\s*\.hk-number-input-suffix\s*{[^}]*}/)?.[0] ?? "";
+    expect(rule, "affix rule must exist").toContain("align-items: center");
+    expect(rule).toContain("flex-shrink: 0");
+  });
+
+  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] ?? "";
+    expect(rule, "steppers rule must exist").toContain("align-self: stretch");
+    const steps = scss.match(/\.hk-number-input-step\s*{[^}]*}/)?.[0] ?? "";
+    expect(steps).toContain("height: 50%");
+  });
+
+  it("self-declares border-box so per-size heights survive hosts without a reset", () => {
+    const field = scss.match(/\.hk-number-input-field\s*{[^}]*}/)?.[0] ?? "";
+    expect(field, "field rule must exist").toContain("box-sizing: border-box");
+  });
+
+  it("keeps the affix font size equal to the field font size in every size variant", () => {
+    for (const size of ["sm", "md", "lg"] as const) {
+      const field = scss.match(
+        new RegExp(`\\.hk-number-input-${size} \\.hk-number-input-field\\s*{[^}]*}`),
+      )?.[0];
+      expect(field, `${size} field rule must exist`).toBeTruthy();
+      const fieldSize = field?.match(/font-size:\s*([^;]+);/)?.[1]?.trim();
+      const affix = scss.match(
+        new RegExp(
+          `\\.hk-number-input-${size} \\.hk-number-input-(?:prefix|suffix),[\\s\\S]*?{[^}]*}`,
+        ),
+      )?.[0];
+      expect(affix, `${size} affix rule must exist`).toBeTruthy();
+      expect(affix?.match(/font-size:\s*([^;]+);/)?.[1]?.trim()).toBe(fieldSize);
+    }
+  });
+
+  it("renders the suffix string prop inside the field, before the steppers", () => {
+    const { container } = mountNumberInput({ props: { suffix: "秒" } });
+    const suffix = query(container, ".hk-number-input-suffix");
+    expect(suffix, "suffix span must render").not.toBeNull();
+    expect(suffix?.textContent).toBe("秒");
+
+    const inner = query(container, ".hk-number-input-inner");
+    const children = Array.from(inner?.children ?? []).map((el) => el.className);
+    expect(children).toEqual([
+      "hk-number-input-field",
+      "hk-number-input-suffix",
+      "hk-number-input-steppers",
+    ]);
+  });
+
+  it("renders the prefix string prop inside the field, before the input", () => {
+    const { container } = mountNumberInput({ props: { prefix: "PT" } });
+    const prefix = query(container, ".hk-number-input-prefix");
+    expect(prefix, "prefix span must render").not.toBeNull();
+    expect(prefix?.textContent).toBe("PT");
+    const children = Array.from(
+      query(container, ".hk-number-input-inner")?.children ?? [],
+    ).map((el) => el.className);
+    expect(children[0]).toBe("hk-number-input-prefix");
+  });
+
+  it("prefers the named slot over the string prop", () => {
+    const { container } = mountNumberInput({
+      props: { suffix: "prop-text" },
+      slots: { suffix: () => h("span", { class: "slot-marker" }, "slot-text") },
+    });
+    const suffix = query(container, ".hk-number-input-suffix");
+    expect(suffix?.textContent).toBe("slot-text");
+    expect(suffix?.querySelector(".slot-marker")).not.toBeNull();
+    expect(suffix?.textContent).not.toContain("prop-text");
+  });
+
+  it("treats an empty-string affix prop as no affix", () => {
+    const { container } = mountNumberInput({ props: { prefix: "", suffix: "" } });
+    expect(query(container, ".hk-number-input-prefix")).toBeNull();
+    expect(query(container, ".hk-number-input-suffix")).toBeNull();
+  });
+
+  it("renders no affix spans without props or slots", () => {
+    const { container } = mountNumberInput({});
+    expect(query(container, ".hk-number-input-prefix")).toBeNull();
+    expect(query(container, ".hk-number-input-suffix")).toBeNull();
+  });
+
+  it("still renders the field caption label above the box", () => {
+    const { container } = mountNumberInput({ props: { label: "轮播间隔" } });
+    const label = query(container, ".hk-input-label");
+    expect(label, "label must render").not.toBeNull();
+    expect(label?.textContent).toBe("轮播间隔");
+  });
+});

package/src/components/HkNumberInput.scss

@@ -45,6 +45,9 @@
 .hk-number-input-field {
   flex: 1;
   min-width: 0;
+  /* Self-declared so the per-size height guarantee never depends on a
+     host app's global reset (HkInput.scss precedent). */
+  box-sizing: border-box;
   background: transparent;
   border: none;
   outline: none;
@@ -74,7 +77,9 @@
   align-items: center;
   flex-shrink: 0;
   color: var(--hi-color-muted);
-  font-size: 0.875rem;
+  /* Font size tracks the field per size variant (see the size blocks
+     below) so the unit text never dwarfs or shrinks next to the typed
+     value. */
 }
 
 .hk-number-input-prefix {
@@ -89,6 +94,10 @@
   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;
   border-left: 1px solid var(--hi-color-border);
 }
 
@@ -131,6 +140,11 @@
   height: 1.75rem;
 }
 
+.hk-number-input-sm .hk-number-input-prefix,
+.hk-number-input-sm .hk-number-input-suffix {
+  font-size: 0.75rem;
+}
+
 .hk-number-input-sm .hk-number-input-step {
   width: 1.25rem;
 }
@@ -146,6 +160,11 @@
   height: 2.25rem;
 }
 
+.hk-number-input-md .hk-number-input-prefix,
+.hk-number-input-md .hk-number-input-suffix {
+  font-size: 0.875rem;
+}
+
 .hk-number-input-md .hk-number-input-step {
   width: 1.5rem;
 }
@@ -156,6 +175,11 @@
   height: 2.75rem;
 }
 
+.hk-number-input-lg .hk-number-input-prefix,
+.hk-number-input-lg .hk-number-input-suffix {
+  font-size: 1rem;
+}
+
 .hk-number-input-lg .hk-number-input-step {
   width: 1.75rem;
 }

package/src/components/HkNumberInput.tsx

@@ -12,6 +12,14 @@ export default defineComponent({
     disabled: { type: Boolean, default: false },
     placeholder: { type: String, default: undefined },
     label: { type: String, default: undefined },
+    /* Affix text rendered INSIDE the field (before/after the input,
+       flex-centered by the inner row). Slots of the same name take
+       precedence; empty/undefined means no affix. Consumers should use
+       these instead of placing unit text in a sibling element next to
+       the component — the root stacks label over input, so a sibling
+       centered against the root targets the wrong axis midpoint. */
+    prefix: { type: String, default: undefined },
+    suffix: { type: String, default: undefined },
     size: {
       type: String as PropType<"sm" | "md" | "lg">,
       default: "md",
@@ -87,8 +95,10 @@ export default defineComponent({
       <div class={wrapperClass.value}>
         {props.label && <label class="hk-input-label">{props.label}</label>}
         <div class="hk-number-input-inner">
-          {slots.prefix ? (
-            <span class="hk-number-input-prefix">{slots.prefix()}</span>
+          {(slots.prefix || props.prefix) ? (
+            <span class="hk-number-input-prefix">
+              {slots.prefix ? slots.prefix() : props.prefix}
+            </span>
           ) : null}
           <input
             ref={inputRef}
@@ -104,8 +114,10 @@ export default defineComponent({
               emitValue(Number((e.target as HTMLInputElement).value))
             }
           />
-          {slots.suffix ? (
-            <span class="hk-number-input-suffix">{slots.suffix()}</span>
+          {(slots.suffix || props.suffix) ? (
+            <span class="hk-number-input-suffix">
+              {slots.suffix ? slots.suffix() : props.suffix}
+            </span>
           ) : null}
           <div class="hk-number-input-steppers">
             <button