@celestia-island/hikari 0.40.3 → 0.40.4

package/package.json

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

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

@@ -0,0 +1,112 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, defineComponent, h, nextTick, ref } from "vue";
+
+import HkInput from "./HkInput";
+
+const mounts: ReturnType<typeof createApp>[] = [];
+const containers: HTMLElement[] = [];
+
+afterEach(async () => {
+  for (const app of mounts.splice(0)) app.unmount();
+  for (const el of containers.splice(0)) el.remove();
+});
+
+interface FieldHandle {
+  wrapper: HTMLElement;
+  label: HTMLLabelElement | null;
+  field: HTMLInputElement | HTMLTextAreaElement;
+}
+
+/** Mount HkInput with the given props and grab label + field element. */
+async function mountField(
+  props: Record<string, unknown>,
+  textarea = false,
+): Promise<FieldHandle> {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  containers.push(container);
+
+  const model = ref("");
+  const Wrapper = defineComponent({
+    setup() {
+      return () =>
+        h(HkInput, {
+          modelValue: model.value,
+          "onUpdate:modelValue": (v: string) => { model.value = v; },
+          ...props,
+        });
+    },
+  });
+  const app = createApp(Wrapper);
+  mounts.push(app);
+  app.mount(container);
+  await nextTick();
+
+  const wrapper = container.querySelector<HTMLElement>(".hk-input-wrapper")!;
+  const field = (textarea
+    ? wrapper.querySelector("textarea")
+    : wrapper.querySelector("input")) as
+    HTMLInputElement | HTMLTextAreaElement;
+  return { wrapper, label: wrapper.querySelector("label"), field };
+}
+
+describe("HkInput label association", () => {
+  it("binds the rendered label to the field without caller effort", async () => {
+    const { label, field } = await mountField({ label: "Workspace name" });
+    expect(label).toBeTruthy();
+    expect(label!.getAttribute("for")).toBe(field.id);
+    expect(field.id).not.toBe("");
+  });
+
+  it("generates unique ids to sibling fields in the same app", async () => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    containers.push(container);
+
+    const Wrapper = defineComponent({
+      setup() {
+        return () => [
+          h(HkInput, { modelValue: "", label: "One" }),
+          h(HkInput, { modelValue: "", label: "Two" }),
+        ];
+      },
+    });
+    const app = createApp(Wrapper);
+    mounts.push(app);
+    app.mount(container);
+    await nextTick();
+
+    const fields = container.querySelectorAll<HTMLInputElement>(".hk-input-element");
+    expect(fields).toHaveLength(2);
+    expect(fields[0]!.id).not.toBe("");
+    expect(fields[0]!.id).not.toBe(fields[1]!.id);
+    const labels = container.querySelectorAll<HTMLLabelElement>(".hk-input-label");
+    expect(labels[0]!.getAttribute("for")).toBe(fields[0]!.id);
+    expect(labels[1]!.getAttribute("for")).toBe(fields[1]!.id);
+  });
+
+  it("honors an explicit id prop over the generated one", async () => {
+    const { label, field } = await mountField({ label: "Name", id: "given-id" });
+    expect(field.id).toBe("given-id");
+    expect(label!.getAttribute("for")).toBe("given-id");
+  });
+
+  it("associates textarea fields the same way", async () => {
+    const { label, field } = await mountField(
+      { label: "Comment", type: "textarea" },
+      true,
+    );
+    expect(field.tagName).toBe("TEXTAREA");
+    expect(label!.getAttribute("for")).toBe(field.id);
+  });
+
+  it("omits spellcheck entirely when the prop is undefined", async () => {
+    const { field } = await mountField({ label: "Default" });
+    expect(field.hasAttribute("spellcheck")).toBe(false);
+  });
+
+  it("renders spellcheck={false} as an explicit attribute", async () => {
+    const { field } = await mountField({ label: "Literal", spellcheck: false });
+    expect(field.getAttribute("spellcheck")).toBe("false");
+  });
+});

package/src/components/HkInput.tsx

@@ -1,5 +1,5 @@
 import { Eye, EyeOff } from "lucide-vue-next";
-import { computed, defineComponent, nextTick, onBeforeUnmount, onMounted, ref, useAttrs, watch } from "vue";
+import { computed, defineComponent, nextTick, onBeforeUnmount, onMounted, ref, useAttrs, useId, watch } from "vue";
 
 import { useI18n } from "../i18n/context";
 
@@ -20,6 +20,20 @@ export default defineComponent({
     readonly: { type: Boolean, default: false },
     required: { type: Boolean, default: false },
     name: { type: String, default: undefined },
+    /**
+     * `id` for the field element; the rendered label's `for` points here.
+     * Generated via Vue's useId when omitted, so a bare `label` prop is
+     * fully associated for screen readers and label clicks with zero
+     * caller effort.
+     */
+    id: { type: String, default: undefined },
+    /**
+     * Native spellcheck toggle. Undefined keeps the browser default;
+     * `false` is the right call for exact-literal entry fields (type-
+     * to-confirm gates, addresses, serial paths) where the red squiggle
+     * under correct input reads as an error.
+     */
+    spellcheck: { type: Boolean, default: undefined },
     /** Submit intent on Enter (no modifiers) — see HkPasswordInput. */
     submitOnEnter: { type: Function, default: undefined },
     autocomplete: { type: String, default: "off" },
@@ -117,6 +131,13 @@ export default defineComponent({
       return rest;
     });
 
+    // Field identity: the rendered label points at this id, so a bare
+    // `label` prop gives a fully associated field (screen readers, label
+    // clicks) without caller effort. An explicit `id` prop wins.
+    // useId() must run synchronously in setup; it is SSR-safe.
+    const generatedId = useId();
+    const fieldId = computed(() => props.id ?? generatedId);
+
     // ── affix width reservation ──────────────────────────────────────
     // The input element overlays the WHOLE box (absolute inset:0) while
     // the prefix/suffix affixes flow above it — so centered text, the
@@ -250,7 +271,7 @@ export default defineComponent({
     return () => (
       <div class="hk-input-wrapper">
         {props.label && (
-          <label class="hk-input-label">
+          <label class="hk-input-label" for={fieldId.value}>
             {props.label}
             {props.required && <span class="hk-input-required">*</span>}
           </label>
@@ -279,11 +300,13 @@ export default defineComponent({
           {isText ? (
             <input
               ref={inputRef}
+              id={fieldId.value}
               type={resolvedType.value}
               value={props.modelValue}
               placeholder={nativePlaceholder.value}
               disabled={props.disabled}
               readonly={props.readonly}
+              spellcheck={props.spellcheck}
               name={props.name}
               autocomplete={props.autocomplete}
               data-1p-ignore
@@ -313,10 +336,12 @@ export default defineComponent({
           ) : (
             <textarea
               ref={inputRef}
+              id={fieldId.value}
               value={props.modelValue}
               placeholder={nativePlaceholder.value}
               disabled={props.disabled}
               readonly={props.readonly}
+              spellcheck={props.spellcheck}
               rows={props.rows}
               name={props.name}
               autocomplete={props.autocomplete}