@celestia-island/hikari 0.55.226 → 0.55.227

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.226",
+  "version": "0.55.227",
   "private": false,
   "type": "module",
   "description": "Hikari UI library, Vue 3 runtime — one design system for Vue 3 and Rust/WASM applications",

package/src/components/HkPopupSelect.mobile.test.tsx

@@ -31,6 +31,10 @@ afterEach(() => {
 
 const OPTIONS = [{ value: "a1", label: "Agent One" }];
 
+const DESCRIBED_OPTIONS = [
+  { value: "a1", label: "Agent One", description: "Personal · /srv/one" },
+];
+
 describe("HkPopupSelect (mobile sheet)", () => {
   it("hideLabel keeps the sheet's breadcrumb title on the field's name", async () => {
     // hideLabel only suppresses the INLINE caption; the sheet header
@@ -47,4 +51,18 @@ describe("HkPopupSelect (mobile sheet)", () => {
     expect(title, "the sheet renders a title band").toBeTruthy();
     expect(title!.textContent).toBe("Agent");
   });
+
+  it("described options keep their second line inside the sheet", async () => {
+    const c = mount(
+      h(HkPopupSelect, { modelValue: "", options: DESCRIBED_OPTIONS }),
+    );
+    const trigger = c.querySelector<HTMLButtonElement>(".hk-popup-select-trigger")!;
+    trigger.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await Promise.resolve();
+    await Promise.resolve();
+    const desc = document.body.querySelector(
+      ".hk-popover-panel .hk-popup-select-item-desc",
+    );
+    expect(desc?.textContent).toBe("Personal · /srv/one");
+  });
 });

package/src/components/HkPopupSelect.scss

@@ -149,6 +149,38 @@
   @include mi.item;
 }
 
+/* Two-line option rows, rendered ONLY for options that carry a
+ * description — a stock row keeps the bare label span (wrap allowed, no
+ * optical shift) so existing consumers see byte-identical geometry (R2).
+ * The body owns the row's flex growth so both lines ellipsis against the
+ * same edge. */
+.hk-popup-select-item-body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.hk-popup-select-item-label {
+  @include mi.label;
+}
+
+/* The secondary line inherits the row color (hover/checked tints flow
+ * through) and steps down via opacity + the caption size, so it stays
+ * clearly meta against both the plain and the primary checked face. */
+.hk-popup-select-item-desc {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--text-xs);
+  font-weight: 400;
+  color: inherit;
+  opacity: 0.62;
+  /* Same italic-overhang clipping room the label mixin reserves. */
+  padding-inline-end: var(--hk-menu-item-label-cushion);
+}
+
 /* Keyboard highlight face yields to checked/active; the hover face comes
  * from mi.item's own guarded :hover (identical values, higher specificity). */
 .hk-popup-select-item[data-highlighted]:not([data-checked]):not([data-active]) {

package/src/components/HkPopupSelect.test.tsx

@@ -81,4 +81,51 @@ describe("HkPopupSelect", () => {
     const c = mount(h(HkPopupSelect, { modelValue: "a1", label: "Agent", options: OPTIONS }));
     expect(c.querySelector(".hk-popup-select-trigger")!.getAttribute("aria-label")).toBeNull();
   });
+
+  it("an option description renders its own muted line under the label", async () => {
+    const c = mount(
+      h(HkPopupSelect, {
+        modelValue: "",
+        options: [{ value: "a1", label: "Agent One", description: "Personal · /srv/one" }],
+      }),
+    );
+    // Open the popout — option rows live in the anchored panel, which
+    // mounts across a microtask (the mobile sheet tests await the same).
+    c.querySelector<HTMLButtonElement>(".hk-popup-select-trigger")!
+      .dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await Promise.resolve();
+    await Promise.resolve();
+    const item = document.body.querySelector(".hk-popup-select-item")!;
+    expect(item.textContent).toContain("Agent One");
+    const desc = item.querySelector(".hk-popup-select-item-desc");
+    expect(desc?.textContent).toBe("Personal · /srv/one");
+    // The label sits in its own span so the two lines never merge.
+    expect(item.querySelector(".hk-popup-select-item-label")?.textContent).toBe("Agent One");
+  });
+
+  it("no description → the exact stock DOM: bare label span, no body wrapper", async () => {
+    const c = mount(h(HkPopupSelect, { modelValue: "", options: OPTIONS }));
+    c.querySelector<HTMLButtonElement>(".hk-popup-select-trigger")!
+      .dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await Promise.resolve();
+    await Promise.resolve();
+    const item = document.body.querySelector(".hk-popup-select-item")!;
+    // R2 contract: description-less rows render the pre-description DOM —
+    // no two-line anatomy, so no mi.label ellipsis/optical spec applies.
+    expect(item.querySelector(".hk-popup-select-item-body")).toBeNull();
+    expect(item.querySelector(".hk-popup-select-item-label")).toBeNull();
+    expect(item.querySelector("span")?.textContent).toBe("Agent One");
+  });
+
+  it("the collapsed trigger shows the label only, never the description", () => {
+    const c = mount(
+      h(HkPopupSelect, {
+        modelValue: "a1",
+        options: [{ value: "a1", label: "Agent One", description: "secret-meta" }],
+      }),
+    );
+    const value = c.querySelector(".hk-popup-select-value")!;
+    expect(value.textContent).toBe("Agent One");
+    expect(value.textContent).not.toContain("secret-meta");
+  });
 });

package/src/components/HkPopupSelect.tsx

@@ -9,6 +9,15 @@ import "./HkPopupSelect.scss";
 export interface HkPopupSelectOption {
   value: string;
   label: string;
+  /** Secondary line under the label, inside the same option row — a
+   * muted, single-line ellipsis strip for meta text (a row's owner,
+   * address, type) that must stay visible without leaking into the
+   * collapsed trigger, which keeps showing `label` alone. Absent → the
+   * row renders the EXACT stock DOM (bare label span, wrap allowed, no
+   * optical shift): the two-line anatomy exists only when there is a
+   * second line to show (R2: the mi.label ellipsis + 0.5px spec is a
+   * behavior change stock rows must not inherit silently). */
+  description?: string;
 }
 
 const activePopupId = ref<string | null>(null);
@@ -232,7 +241,16 @@ export default defineComponent({
                     onClick={() => select(opt.value)}
                     onPointerenter={() => { highlightedIndex.value = i; }}
                   >
-                    <span>{opt.label}</span>
+                    {opt.description ? (
+                      <span class="hk-popup-select-item-body">
+                        <span class="hk-popup-select-item-label">{opt.label}</span>
+                        <span class="hk-popup-select-item-desc">{opt.description}</span>
+                      </span>
+                    ) : (
+                      // Stock rows keep the exact pre-description DOM: no
+                      // body wrapper, no mi.label spec — the R2 contract.
+                      <span>{opt.label}</span>
+                    )}
                   </div>
                 ))}
           </HkScrollContainer>