@celestia-island/hikari 0.55.186 → 0.55.188

package/package.json

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

package/src/components/HkHeaderPicker.scss

@@ -9,7 +9,10 @@
   min-width: 0;
 }
 
-.hk-header-picker-trigger {
+/* Double-class on purpose: the ghost chrome must beat the base
+ * `.hk-select-trigger` field chrome regardless of stylesheet import
+ * order (both would otherwise sit at one class of specificity). */
+.hk-select-trigger.hk-header-picker-trigger {
   width: auto;
   /* Header-band compact: the button group beside it runs ~28px; the
    * trigger stays a touch taller for its label but must not drive the
@@ -20,6 +23,28 @@
   font-size: var(--text-sm);
   font-weight: 600;
   max-width: 16rem;
+  /* Ghost chrome (2026-10-18 user direction: the top-centre dropdown
+   * must read like the bottom-centre platform pill — no field border,
+   * hover tint only). Mirrors HkButton's ghost variant. */
+  background: transparent;
+  border-color: transparent;
+}
+
+.hk-select-trigger.hk-header-picker-trigger:hover:not([data-disabled]) {
+  background: var(--c-primary-light);
+  border-color: transparent;
+}
+
+.hk-select-trigger.hk-header-picker-trigger:active:not([data-disabled]) {
+  filter: brightness(0.95);
+}
+
+/* Keyboard / open ring survives — the ring rides the existing
+ * --shadow-focus; only the field border stays gone. */
+.hk-select-trigger.hk-header-picker-trigger:focus-visible,
+.hk-select-trigger.hk-header-picker-trigger[data-state="open"] {
+  background: var(--c-primary-light);
+  border-color: rgb(var(--color-focused-border));
 }
 
 .hk-header-picker-trigger .hk-select-value {

package/src/components/HkHeaderPicker.test.tsx

@@ -1,8 +1,13 @@
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { createApp, defineComponent, h, ref } from "vue";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
 
 import HkHeaderPicker, { type HkPickerOption } from "./HkHeaderPicker";
 
+const here = dirname(fileURLToPath(import.meta.url));
+
 /**
  * HkHeaderPicker — the header-centre selector (the button group's
  * sibling). These pins hold the standardized contract: trigger chrome,
@@ -122,13 +127,30 @@ describe("HkHeaderPicker", () => {
     expect(document.querySelectorAll('.hk-draggable-list-handle[data-hidden]').length).toBe(1);
   });
 
-  it("declares the placement prop with the top-down default (mirror-of-bottom contract)", () => {
+  it("declares the placement prop with the centered-down default (mirror-of-footer contract)", () => {
     // The panel is teleported to body, so the through-wiring is pinned at
     // the contract level: the prop exists, defaults to the header's
-    // downward growth, and the render passes it straight through
+    // downward growth CENTERED on the trigger (2026-10-18 user
+    // direction — the footer platform pill's symmetric pop, mirrored
+    // up top), and the render passes it straight through
     // (`placement={props.placement}` in HkHeaderPicker.tsx).
     expect(HkHeaderPicker.props!.placement).toBeDefined();
-    expect((HkHeaderPicker.props!.placement as { default: string }).default).toBe("bottom-start");
+    expect((HkHeaderPicker.props!.placement as { default: string }).default).toBe("bottom-center");
+  });
+
+  it("keeps the popout content-sized and the trigger chrome ghost", () => {
+    // 2026-10-18 user direction: the header-centre dropdown must read
+    // like the bottom-centre platform pill — no field border, hover
+    // tint only, and a compact centered menu (not a stretched field
+    // panel). Pinned at source level like the popout-width contract.
+    const tsx = readFileSync(join(here, "HkHeaderPicker.tsx"), "utf-8");
+    expect(tsx).toContain("matchAnchorWidth={false}");
+    const scss = readFileSync(join(here, "HkHeaderPicker.scss"), "utf-8");
+    // The ghost override must be double-classed to beat the base
+    // `.hk-select-trigger` chrome regardless of import order.
+    expect(scss).toContain(".hk-select-trigger.hk-header-picker-trigger");
+    expect(scss).toContain("border-color: transparent;");
+    expect(scss).toContain("background: var(--c-primary-light);");
   });
 
   it("disables the trigger when disabled", () => {

package/src/components/HkHeaderPicker.tsx

@@ -75,10 +75,15 @@ export default defineComponent({
     /** Desktop-popout side relative to the trigger. The header sits at
      *  the viewport's top, so the popout grows DOWNWARD (bottom-*) —
      *  the mirror of bottom-pinned pickers; auto-flip still rescues a
-     *  viewport that cannot fit it. */
+     *  viewport that cannot fit it. CENTERED on the trigger by default
+     *  (2026-10-18 user direction): the header pill mirrors the
+     *  footer's platform pill, whose menu pops symmetrically on the
+     *  trigger's midpoint — a start-anchored menu reads lopsided off a
+     *  narrow pill. Callers with edge-pinned triggers may still pin a
+     *  side explicitly. */
     placement: {
       type: String as PropType<SelectPanelPlacement>,
-      default: "bottom-start",
+      default: "bottom-center",
     },
     /** Accessible name of the trigger itself. */
     ariaLabel: { type: String, default: undefined },
@@ -302,6 +307,10 @@ export default defineComponent({
           title={props.panelTitle ?? ""}
           placement={props.placement}
           offset={4}
+          // The popout hugs its rows (not the trigger's width): the
+          // header pill is narrow, and the mirror-of-the-footer look
+          // means a compact centered menu, not a stretched field panel.
+          matchAnchorWidth={false}
           sheetOnMobile
           onKeydown={onPopoutKeydown}
         >

package/src/components/HkRowActions.test.tsx

@@ -69,6 +69,32 @@ describe("HkRowActions", () => {
     expect(btn.getAttribute("aria-expanded")).toBe("false");
   });
 
+  it("menu mode: a leaf row click emits select with the item and closes", async () => {
+    const items: HkMenuItem[] = [
+      { key: "edit", label: "Edit" },
+      { key: "delete", label: "Delete", danger: true },
+    ];
+    const selected: HkMenuItem[] = [];
+    const c = mount(h(HkRowActions, { items, onSelect: (item: HkMenuItem) => selected.push(item) }));
+    const btn = c.querySelector("button.hk-icon-button") as HTMLButtonElement;
+    btn.click();
+    await Promise.resolve();
+    await Promise.resolve();
+    // The menu rows render through HkSelectPanel's teleported popout.
+    const row = Array.from(
+      document.body.querySelectorAll<HTMLButtonElement>("button.hk-menu-row"),
+    ).find((b) => b.textContent?.trim() === "Edit");
+    expect(row).toBeTruthy();
+    row!.click();
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(selected).toHaveLength(1);
+    expect(selected[0]!.key).toBe("edit");
+    expect(selected[0]!.label).toBe("Edit");
+    // The leaf path closed the popup inside HkMenu; aria follows.
+    expect(btn.getAttribute("aria-expanded")).toBe("false");
+  });
+
   it("stops the click from reaching clickable ancestors", () => {
     const outer = vi.fn();
     const c = mount(

package/src/components/HkRowActions.tsx

@@ -89,7 +89,11 @@ export default defineComponent({
       emit("open", openerEl() ?? (e.currentTarget as HTMLElement));
     }
 
-    function onSelect(item: HkMenuItem) {
+    function onSelect(key: string, item: HkMenuItem) {
+      // HkMenu's select emit is (key, item) — the key FIRST, matching the
+      // HkMenu contract; the consumer-facing select carries the item.
+      // The popup is already closed by HkMenu's leaf path (closeAll runs
+      // before the emit), so `open` only needs to follow on paper.
       open.value = false;
       emit("select", item);
     }