@celestia-island/hikari 0.40.3 → 0.40.6

package/package.json

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

package/src/components/HkAffixPicker.test.tsx

@@ -5,6 +5,7 @@ import HkAffixPicker, { type HkAffixOption } from "./HkAffixPicker";
 
 const OPTIONS: HkAffixOption[] = [
   { key: "cn", label: "China", meta: "+86", flag: "🇨🇳", keywords: "zhongguo 中国 0086" },
+  { key: "cn-main", label: "中华人民共和国", meta: "+86", flag: "🇨🇳" },
   { key: "jp", label: "Japan", meta: "+81", flag: "🇯🇵" },
   { key: "us", label: "United States", meta: "+1", flag: "🇺🇸" },
 ];
@@ -154,9 +155,9 @@ describe("HkAffixPicker", () => {
   it("single mode lists every option, marks the active one, closes on pick", async () => {
     const { events, container } = mountPicker({ selected: "cn" });
     await openPopup(container);
-    expect(rows()).toHaveLength(3);
+    expect(rows()).toHaveLength(4);
     expect(rows()[0].hasAttribute("data-active")).toBe(true);
-    rows()[1].click();
+    rows()[2].click();
     await nextTick();
     expect(events.select.at(-1)).toBe("jp");
     // Single mode closes after the pick (leave transition may linger).
@@ -176,6 +177,30 @@ describe("HkAffixPicker", () => {
     expect(document.querySelector(".hk-affix-empty")?.textContent).toContain("No matches");
   });
 
+  it("fuzzy fallback finds a renamed CJK label by in-order subsequence", async () => {
+    const { container } = mountPicker();
+    await openPopup(container);
+    // 中国 is NOT a substring of 中华人民共和国 — only the in-order
+    // subsequence fallback (中 at 0, 国 at 6) can surface the cn-main
+    // row the substring pass misses.
+    await typeQuery("中国");
+    const labels = rows().map((r) => r.textContent);
+    // Both the China row (keyword substring match) and the renamed
+    // cn-main row (fuzzy subsequence) surface.
+    expect(labels).toContain("🇨🇳China+86");
+    expect(labels.some((l) => l.includes("中华人民共和国"))).toBe(true);
+  });
+
+  it("order-violating query does not fuzzy-match the CJK label", async () => {
+    const { container } = mountPicker();
+    await openPopup(container);
+    // 国民 is out of order in 中华人民共和国 (国 comes after 民) — the
+    // subsequence pass must NOT surface the row.
+    await typeQuery("国民");
+    expect(rows()).toHaveLength(0);
+    expect(document.querySelector(".hk-affix-empty")?.textContent).toContain("No matches");
+  });
+
   it("re-attaches the row list when the empty-state query is cleared", async () => {
     const { container } = mountPicker();
     await openPopup(container);
@@ -190,6 +215,7 @@ describe("HkAffixPicker", () => {
     expect(document.querySelector(".hk-affix-empty")).toBeNull();
     expect(rows().map((r) => r.textContent)).toEqual([
       expect.stringContaining("China"),
+      expect.stringContaining("中华人民共和国"),
       expect.stringContaining("Japan"),
       expect.stringContaining("United States"),
     ]);
@@ -197,7 +223,12 @@ describe("HkAffixPicker", () => {
     expect(document.querySelector(".hk-affix-list")).toBeTruthy();
     // Re-filtering after the remount keeps working on the live list.
     await typeQuery("+86");
-    expect(rows().map((r) => r.textContent)).toEqual([expect.stringContaining("China")]);
+    // Both +86 rows match by substring (the cn-main row via its meta) —
+    // the original fixtured "China" row is still surfaced.
+    expect(rows().map((r) => r.textContent)).toEqual([
+      expect.stringContaining("China"),
+      expect.stringContaining("中华人民共和国"),
+    ]);
   });
 
   it("multi mode renders selected tags and offers only the remaining rows", async () => {
@@ -211,13 +242,17 @@ describe("HkAffixPicker", () => {
     expect(tags()[0].querySelector(".hk-affix-tag-dot")).toBeTruthy();
     expect(tags()[1].querySelector(".hk-affix-tag-dot")).toBeNull();
     // Rows exclude the already-selected keys.
-    expect(rows().map((r) => r.textContent)).toEqual([expect.stringContaining("United States")]);
+    expect(rows().map((r) => r.textContent)).toEqual([
+      expect.stringContaining("中华人民共和国"),
+      expect.stringContaining("United States"),
+    ]);
   });
 
   it("multi mode keeps the popup open when a row is picked", async () => {
     const { events, container } = mountPicker({ mode: "multi", selected: ["cn"] });
     await openPopup(container);
-    rows()[0].click();
+    // With cn selected, the remaining rows are [cn-main, jp, us]; pick jp.
+    rows()[1].click();
     await nextTick();
     expect(events.select.at(-1)).toBe("jp");
     expect(rows().length).toBeGreaterThan(0);

package/src/components/HkAffixPicker.tsx

@@ -38,6 +38,18 @@ export interface HkAffixOption {
   disabled?: boolean;
 }
 
+/** True when every character of `query` appears in `text` in the same
+ *  order — gaps allowed ("中国" finds 中华人民共和国). Callers lowercase
+ *  both sides first, matching the substring pass. */
+function isSubsequence(query: string, text: string): boolean {
+  let i = 0;
+  for (const ch of text) {
+    if (ch === query[i]) i++;
+    if (i === query.length) return true;
+  }
+  return false;
+}
+
 /**
  * HkAffixPicker — the standardized "affix chip + searchable popup list"
  * control. A chip rides the prefix (left) or suffix (right) slot of a
@@ -190,7 +202,16 @@ export const HkAffixPicker = defineComponent({
     );
 
     /** Rows of the pick list. Multi hides already-selected keys (they
-     *  live in the tag list instead); single always shows everything. */
+     *  live in the tag list instead); single always shows everything.
+     *
+     *  Filtering is TWO-PASS over a single field at a time (never across
+     *  concatenated fields, which produces noise):
+     *    1. an exact substring match for precision (label / meta / key /
+     *       keywords, case-folded);
+     *    2. an in-order character subsequence fallback (gaps allowed) —
+     *       so a renamed or CJK-composed label like "中华人民共和国" is
+     *       still found by its short form "中国" (中 at 0, 国 at 6).
+     */
     const filteredRows = computed<readonly HkAffixOption[]>(() => {
       const base =
         props.mode === "multi"
@@ -202,7 +223,12 @@ export const HkAffixPicker = defineComponent({
         if (o.label.toLowerCase().includes(q)) return true;
         if (o.meta && o.meta.toLowerCase().includes(q)) return true;
         if (o.key.toLowerCase().includes(q)) return true;
-        return !!o.keywords && o.keywords.toLowerCase().includes(q);
+        if (o.keywords && o.keywords.toLowerCase().includes(q)) return true;
+        // Fuzzy fallback — per field, in-order subsequence, gaps allowed.
+        if (isSubsequence(q, o.label.toLowerCase())) return true;
+        if (o.meta && isSubsequence(q, o.meta.toLowerCase())) return true;
+        if (isSubsequence(q, o.key.toLowerCase())) return true;
+        return !!o.keywords && isSubsequence(q, o.keywords.toLowerCase());
       });
     });
 

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,12 +117,12 @@ describe("HkPhoneInput", () => {
     }
   });
 
-  it("still finds the PRC row when searching the short alias", async () => {
+  it("still finds the PRC row when searching the short form 中国", 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.
+    // The row renders the formal zh name (中华人民共和国), which contains
+    // 中国 only as an in-order subsequence (中 at 0, 国 at 6) — the affix
+    // picker's fuzzy fallback surfaces the +86 row, no alias needed.
     const search = document.querySelector<HTMLInputElement>(
       ".hk-affix-search .hk-input-element",
     );

package/src/components/HkPhoneInput.tsx

@@ -102,15 +102,14 @@ export const HkPhoneInput = defineComponent({
     );
 
     /** Picker rows come from the shared affix catalog shape; the
-     *  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"). */
+     *  keywords haystack keeps the old filter reach: en/zh names, 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.zhAlias ?? ""} ${c.iso} +${c.dial} 00${c.dial}`,
+        keywords: `${c.en} ${c.zh} ${c.iso} +${c.dial} 00${c.dial}`,
       })),
     );
 

package/src/data/dialCodes.test.ts

@@ -17,7 +17,6 @@ describe("dialCodes catalog", () => {
       dial: "86",
       en: "China",
       zh: "中华人民共和国",
-      zhAlias: "中国",
     });
     for (const entry of DIAL_CODES) {
       expect(entry.iso).toMatch(/^[a-z]{2}$/);

package/src/data/dialCodes.ts

@@ -19,12 +19,6 @@ 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). */
@@ -49,7 +43,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: "中华人民共和国", zhAlias: "中国" },
+  { iso: "cn", dial: "86", en: "China", zh: "中华人民共和国" },
   { 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: "中国台湾" },