@celestia-island/hikari 0.55.136 → 0.55.137

package/package.json

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

package/src/components/HkSelect.test.tsx

@@ -85,4 +85,96 @@ describe("HSelect mobile sheet", () => {
 
     app.unmount();
   });
+
+  it("consumes Escape while the panel is open so hosting dialogs stay put", async () => {
+    // The trigger commonly renders inside a dialog that closes on
+    // bubbled Escape (HkModal/HkDrawer). One press must close ONLY the
+    // dropdown; with the dropdown already closed the key bubbles on so
+    // the dialog's own Escape semantics are untouched.
+    setViewportWidth(1280);
+    const host = document.createElement("div");
+    document.body.appendChild(host);
+    const dialogKeydowns: KeyboardEvent[] = [];
+    host.addEventListener("keydown", (ev) => dialogKeydowns.push(ev as KeyboardEvent));
+
+    const app = createApp({
+      render: () =>
+        h("div", { onKeydown: () => {} }, [
+          h(HSelect, {
+            modelValue: "",
+            "onUpdate:modelValue": () => {},
+            options: [
+              { value: "a", label: "Option A" },
+              { value: "b", label: "Option B" },
+            ],
+          }),
+        ]),
+    });
+    app.mount(host);
+    await nextTick();
+
+    const trigger = host.querySelector<HTMLButtonElement>(".hk-select-trigger")!;
+
+    // Panel open: Escape closes it AND is consumed.
+    trigger.click();
+    await nextTick();
+    const escapeOpen = new KeyboardEvent("keydown", {
+      key: "Escape", bubbles: true, cancelable: true,
+    });
+    trigger.dispatchEvent(escapeOpen);
+    await nextTick();
+    expect(escapeOpen.defaultPrevented).toBe(true);
+    expect(dialogKeydowns).toHaveLength(0);
+
+    // Panel closed: the same key bubbles to the hosting dialog.
+    const escapeClosed = new KeyboardEvent("keydown", {
+      key: "Escape", bubbles: true, cancelable: true,
+    });
+    trigger.dispatchEvent(escapeClosed);
+    await nextTick();
+    expect(escapeClosed.defaultPrevented).toBe(false);
+    expect(dialogKeydowns).toHaveLength(1);
+
+    app.unmount();
+    host.remove();
+  });
+
+  it("titles the opened surface from panelTitle without a visible label", async () => {
+    // Consumers whose visible label lives outside the field (a titled
+    // row) still need the mobile sheet header / popout a11y name; an
+    // untitled surface registers an unnamed blocking layer on phones.
+    setViewportWidth(375);
+    const el = document.createElement("div");
+    document.body.appendChild(el);
+    const app = createApp({
+      render: () =>
+        h(HSelect, {
+          modelValue: "",
+          "onUpdate:modelValue": () => {},
+          panelTitle: "What this screen shows",
+          options: [
+            { value: "a", label: "Option A" },
+            { value: "b", label: "Option B" },
+          ],
+        }),
+    });
+    app.mount(el);
+    await nextTick();
+
+    // No visible field label rendered above the trigger.
+    expect(document.querySelector(".hk-select-label")).toBeNull();
+
+    const trigger = document.querySelector<HTMLButtonElement>(".hk-select-trigger")!;
+    trigger.click();
+    await nextTick();
+
+    const title = document.querySelector<HTMLElement>(".hk-select-sheet-title");
+    expect(title?.textContent?.trim()).toBe("What this screen shows");
+    // The sheet panel is the a11y-named dialog for the surface.
+    const panel = document.querySelector<HTMLElement>(".hk-select-sheet-panel");
+    expect(panel?.getAttribute("aria-label")).toBe("What this screen shows");
+
+    app.unmount();
+    el.remove();
+  });
 });

package/src/components/HkSelect.tsx

@@ -30,6 +30,15 @@ export default defineComponent({
   props: {
     modelValue: { type: String, default: "" },
     label: { type: String, default: undefined },
+    /**
+     * Title for the OPENED surface only (mobile sheet header, desktop
+     * popout's a11y name, popup-manager breadcrumb layer) — without
+     * rendering the visible field `label`. Consumers whose visible label
+     * lives elsewhere (a titled row around the field) pass this so the
+     * surface is not registered untitled; resolution order is
+     * panelTitle, then `label`, then empty (the historic behaviour).
+     */
+    panelTitle: { type: String, default: undefined },
     placeholder: { type: String, default: "" },
     error: { type: String, default: undefined },
     disabled: { type: Boolean, default: false },
@@ -100,6 +109,18 @@ export default defineComponent({
             normalizedOptions.value.length;
         }
       } else if (e.key === "Escape") {
+        // Consume the key ONLY when it actually closed something: the
+        // trigger commonly renders inside a dialog surface (HkModal and
+        // HkDrawer close on bubbled Escape), and one press must mean one
+        // thing — close the dropdown, not the dropdown AND the hosting
+        // dialog. The panel surface itself stops propagation for the
+        // same reason (HkSelectPanel's onSurfaceEscape); with the panel
+        // closed the key bubbles on as before, so the hosting dialog's
+        // own Escape semantics are untouched.
+        if (isOpen.value) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
         isOpen.value = false;
       }
     }
@@ -182,7 +203,7 @@ export default defineComponent({
           open={isOpen.value}
           onUpdate:open={(v: boolean) => { isOpen.value = v; }}
           anchorRef={triggerRef.value ?? null}
-          title={props.label ?? ""}
+          title={props.panelTitle ?? props.label ?? ""}
           placement="bottom-start"
           offset={4}
           onKeydown={onPopoutKeydown}