@celestia-island/hikari 0.40.2 → 0.40.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.40.2",
+  "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}

package/src/components/HkPhoneInput.test.tsx

@@ -117,6 +117,26 @@ describe("HkPhoneInput", () => {
     }
   });
 
+  it("still finds the PRC row when searching the short alias", async () => {
+    const { container } = mountPhone();
+    await openPicker(container);
+    // The row renders the formal zh name (中华人民共和国), which no longer
+    // contains 中国 as a substring — the catalog's zhAlias keeps the old
+    // short form reachable from the search field.
+    const search = document.querySelector<HTMLInputElement>(
+      ".hk-affix-search .hk-input-element",
+    );
+    expect(search, "popup search field renders").toBeTruthy();
+    search!.value = "中国";
+    search!.dispatchEvent(new Event("input"));
+    await nextTick();
+    await nextTick();
+    const rows = pickerRows();
+    expect(rows.length).toBeGreaterThan(0);
+    expect(rows[0].textContent).toContain("China");
+    expect(rows[0].textContent).toContain("+86");
+  });
+
   it("picks a country from the list and refocuses the number field", async () => {
     const { container, events } = mountPhone();
     await openPicker(container);

package/src/components/HkPhoneInput.tsx

@@ -102,14 +102,15 @@ export const HkPhoneInput = defineComponent({
     );
 
     /** Picker rows come from the shared affix catalog shape; the
-     *  keywords haystack keeps the old filter reach: en/zh names, ISO
-     *  code, bare and zero-prefixed dial digits ("86"/"0086"). */
+     *  keywords haystack keeps the old filter reach: en/zh names plus
+     *  the optional zh search alias, ISO code, bare and zero-prefixed
+     *  dial digits ("86"/"0086"). */
     const dialOptions = computed<readonly HkAffixOption[]>(() =>
       props.countries.map((c) => ({
         key: c.iso,
         label: dialCodeName(c, locale),
         meta: `+${c.dial}`,
-        keywords: `${c.en} ${c.zh} ${c.iso} +${c.dial} 00${c.dial}`,
+        keywords: `${c.en} ${c.zh} ${c.zhAlias ?? ""} ${c.iso} +${c.dial} 00${c.dial}`,
       })),
     );
 

package/src/data/dialCodes.test.ts

@@ -12,7 +12,13 @@ import {
 
 describe("dialCodes catalog", () => {
   it("starts with China and contains the expected shape", () => {
-    expect(DIAL_CODES[0]).toMatchObject({ iso: "cn", dial: "86", en: "China", zh: "中国" });
+    expect(DIAL_CODES[0]).toMatchObject({
+      iso: "cn",
+      dial: "86",
+      en: "China",
+      zh: "中华人民共和国",
+      zhAlias: "中国",
+    });
     for (const entry of DIAL_CODES) {
       expect(entry.iso).toMatch(/^[a-z]{2}$/);
       expect(entry.dial).toMatch(/^\d+$/);

package/src/data/dialCodes.ts

@@ -19,6 +19,12 @@ export interface DialCodeEntry {
   en: string;
   /** Simplified Chinese country name. */
   zh: string;
+  /** Search-only Chinese alias — never rendered as the display name.
+   *  HkPhoneInput folds it into the popup's keyword haystack so the old
+   *  short form still finds the entry after a formal rename (e.g. the
+   *  PRC row renamed to 中华人民共和国 no longer contains 中国 as a
+   *  substring). */
+  zhAlias?: string;
 }
 
 /** Flag glyph for an ISO 3166-1 alpha-2 code (regional indicators). */
@@ -43,7 +49,7 @@ export function dialCodeName(entry: DialCodeEntry, locale: string): string {
  * prefixes like +1 / +7).
  */
 export const DIAL_CODES: readonly DialCodeEntry[] = [
-  { iso: "cn", dial: "86", en: "China", zh: "中国" },
+  { iso: "cn", dial: "86", en: "China", zh: "中华人民共和国", zhAlias: "中国" },
   { iso: "hk", dial: "852", en: "Hong Kong (China)", zh: "中国香港" },
   { iso: "mo", dial: "853", en: "Macau (China)", zh: "中国澳门" },
   { iso: "tw", dial: "886", en: "Taiwan (China)", zh: "中国台湾" },