@celestia-island/hikari 0.55.188 → 0.55.190

package/package.json

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

package/src/components/HkAffixPicker.scss

@@ -196,8 +196,8 @@
 
   &:hover,
   &:focus-visible {
-    color: rgb(var(--color-danger, 240 70 80));
-    background: rgb(var(--color-danger, 240 70 80) / 12%);
+    color: rgb(var(--color-error, 247 118 142));
+    background: rgb(var(--color-error, 247 118 142) / 12%);
   }
 }
 

package/src/components/HkAuthSubmitButton.scss

@@ -8,5 +8,5 @@
 .s-auth-submit-error {
   margin: 0;
   font-size: var(--text-sm, 0.8125rem);
-  color: rgb(var(--color-error, 240 70 80));
+  color: rgb(var(--color-error, 247 118 142));
 }

package/src/components/HkAvatar.scss

@@ -7,8 +7,8 @@
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  background-color: var(--hi-color-gray-200, #E5E7EB);
-  color: var(--hi-color-gray-600, #4B5563);
+  background-color: rgb(var(--color-muted, 108 108 108) / 15%);
+  color: rgb(var(--color-text-secondary, 102 102 102));
   transition: all 0.2s ease;
 
   img {

package/src/components/HkBlockingToast.scss

@@ -80,17 +80,21 @@
 // dark-on-amber warning text for contrast).
 .hk-blocking-toast-info {
   background: var(--hi-color-info, #6abed6);
-  color: #fff;
+  /* On-solid content: ride the canonical slot (HkToast family), keep the
+   * #fff fallback so themeless hosts render as before. */
+  color: var(--hi-color-text-on-solid, #fff);
 }
 
 .hk-blocking-toast-warning {
   background: var(--hi-color-warning, #eed677);
+  /* Deliberate DARK-on-amber: the warning band is light by design, and
+   * the on-solid slot is white — a white glyph here would be unreadable. */
   color: #1c1c1e;
 }
 
 .hk-blocking-toast-danger {
   background: var(--hi-color-danger, #f85149);
-  color: #fff;
+  color: var(--hi-color-text-on-danger, #fff);
 }
 
 // ── Actions on a tinted surface ─────────────────────────────────────

package/src/components/HkConfirmDialog.scss

@@ -17,7 +17,7 @@
 .hk-confirm-dialog-message {
   margin: 0;
   color: color-mix(in srgb, var(--hi-color-text-secondary) 85%, transparent);
-  font-size: var(--hi-text-sm, 0.875rem);
+  font-size: var(--text-sm, 0.8125rem);
   line-height: 1.6;
   overflow-wrap: anywhere;
 }

package/src/components/HkCornerBadge.scss

@@ -73,7 +73,7 @@
   background: var(--hk-badge-bg);
   color: var(--hk-badge-text);
   border: 1px solid var(--hk-badge-border);
-  font-size: var(--text-4xs, 0.625rem);
+  font-size: var(--text-2xs, 0.625rem);
   font-weight: 700;
   line-height: 1;
   font-variant-numeric: tabular-nums;

package/src/components/HkDockBar.scss

@@ -117,8 +117,14 @@
   border: 1px solid var(--border-subtle);
   border-radius: var(--radius-md);
   /* Reverse soft light — dark mode: white halo; light mode: soft black
-   * shadow. Strength scales with --glow-scale (Style → Shadow). */
-  box-shadow: var(--glow-dock);
+   * shadow. Strength scales with --glow-scale (Style → Shadow). The
+   * default derives the halo from the theme's own ink channel, which IS
+   * mode-reversed — before 2026-10-19 the bare var(--glow-dock) had no
+   * publisher and no fallback, so the dock halo silently never rendered. */
+  box-shadow: var(
+    --glow-dock,
+    0 8px 32px rgb(var(--color-text, 30 30 30) / calc(8% * var(--glow-scale, 1)))
+  );
 }
 
 /* Vertical side docks (west / east edges) stack along the viewport's

package/src/components/HkDrawer.motion.test.ts

@@ -0,0 +1,111 @@
+import { readFileSync } from "node:fs";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import * as sass from "sass";
+import { describe, expect, it } from "vitest";
+
+/**
+ * Side-drawer motion contract (2026-10-19 phone recording).
+ *
+ * The left/right drawer used to share the scrim's opacity fade: at
+ * halfway through the close the panel was still on screen but its right
+ * half was transparent, so the page behind showed through and the right
+ * rounded corners dissolved — it read as a width shrink. Side drawers
+ * must slide as an opaque surface (transform only); the scrim keeps its
+ * own fade, and top/bottom sheets keep the fade.
+ */
+
+const here = dirname(fileURLToPath(import.meta.url));
+const src = readFileSync(join(here, "HkDrawer.scss"), "utf-8");
+
+// The side-drawer overrides sit after the generic blocks and before the
+// reduced-motion block (which also lists the active classes with
+// `transition: none`, so the full-file last occurrence would find that).
+const sideStart = src.indexOf("/* Side drawers slide as an OPAQUE surface.");
+const reduceStart = src.indexOf("@media (prefers-reduced-motion: reduce)");
+const side = src.slice(sideStart, reduceStart);
+
+/** Body of the LAST rule for a selector — the side overrides are declared
+ *  after the generic four-direction blocks. */
+function lastRule(selector: string, from = src): string {
+  const at = from.lastIndexOf(selector);
+  expect(at, `${selector} exists`).toBeGreaterThanOrEqual(0);
+  const open = from.indexOf("{", at);
+  const close = from.indexOf("}", open);
+  return from.slice(open + 1, close);
+}
+
+describe("HkDrawer side motion (opaque slide)", () => {
+  it("does not fade the left/right panel out", () => {
+    for (const sel of [
+      ".hk-drawer-left-enter-active",
+      ".hk-drawer-left-leave-active",
+      ".hk-drawer-right-enter-active",
+      ".hk-drawer-right-leave-active",
+    ]) {
+      const rule = lastRule(sel, side);
+      expect(rule, sel).toContain("transform");
+      expect(rule, sel).not.toContain("opacity");
+    }
+    for (const sel of [
+      ".hk-drawer-left-enter-from",
+      ".hk-drawer-left-leave-to",
+      ".hk-drawer-right-enter-from",
+      ".hk-drawer-right-leave-to",
+    ]) {
+      expect(lastRule(sel, side), sel).toContain("opacity: 1");
+    }
+  });
+
+  it("keeps the opaque side overrides after the generic fade rules (compiled order)", () => {
+    // The source slices above are anchored on a comment marker; this
+    // compiled assertion pins the cascade itself: the side override must
+    // come AFTER the generic four-direction block in the emitted CSS.
+    const fullCss = sass.compile(resolve(here, "HkDrawer.scss")).css;
+    // The reduced-motion block repeats the active selectors with
+    // `transition: none`; exclude it so the last occurrence is the side
+    // override under test.
+    const reduceAt = fullCss.lastIndexOf(
+      "@media (prefers-reduced-motion: reduce)",
+    );
+    const css = fullCss.slice(0, reduceAt > 0 ? reduceAt : fullCss.length);
+    const genericAt = css.indexOf(".hk-drawer-left-enter-active");
+    const overrideAt = css.lastIndexOf(".hk-drawer-left-enter-active");
+    expect(overrideAt).toBeGreaterThan(genericAt);
+    const overrideBody = css.slice(overrideAt, css.indexOf("}", overrideAt));
+    expect(overrideBody).toContain("transform");
+    expect(overrideBody).not.toContain("opacity");
+
+    const genericFromAt = css.indexOf(".hk-drawer-left-enter-from");
+    const sideFromAt = css.lastIndexOf(".hk-drawer-left-enter-from");
+    expect(sideFromAt).toBeGreaterThan(genericFromAt);
+    const sideFromBody = css.slice(sideFromAt, css.indexOf("}", sideFromAt));
+    expect(sideFromBody).toContain("opacity: 1");
+  });
+
+  it("keeps the sheet active opacity transition", () => {
+    // R3 mutation: deleting the generic active opacity transition kept the
+    // suite green. Guard that top/bottom sheets still animate opacity.
+    const generic = src.slice(0, sideStart);
+    expect(lastRule(".hk-drawer-top-enter-active", generic)).toContain("opacity");
+    expect(lastRule(".hk-drawer-bottom-leave-active", generic)).toContain(
+      "opacity",
+    );
+  });
+
+  it("keeps the off-screen side transforms", () => {
+    // The side override only resets opacity to 1; the generic from/to
+    // blocks must keep the translateX(±100%) that carries the panel in
+    // and out of the screen.
+    const left = src.slice(src.indexOf(".hk-drawer-left-enter-from"));
+    expect(left.slice(0, left.indexOf("}") + 1)).toContain("translateX(-100%)");
+    const right = src.slice(src.indexOf(".hk-drawer-right-enter-from"));
+    expect(right.slice(0, right.indexOf("}") + 1)).toContain("translateX(100%)");
+  });
+
+  it("keeps the fade for top/bottom sheets", () => {
+    expect(lastRule(".hk-drawer-top-enter-from")).toContain("opacity: 0");
+    expect(lastRule(".hk-drawer-bottom-enter-from")).toContain("opacity: 0");
+  });
+});

package/src/components/HkDrawer.scss

@@ -123,6 +123,30 @@
   transform: translateY(100%);
 }
 
+/* Side drawers slide as an OPAQUE surface. The panel used to share the
+ * scrim's fade (opacity: 0 in the enter/leave states); on a phone the
+ * drawer was still partly on screen when its right half went transparent
+ * — the page behind showed through and the right rounded corners
+ * dissolved, which reads as a width shrink (screen recording
+ * 2026-10-19). The scrim keeps its own fade; the panel only translates.
+ * Top/bottom sheets keep the fade above. */
+.hk-drawer-left-enter-active,
+.hk-drawer-right-enter-active {
+  transition: transform var(--duration-normal, 0.3s) cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.hk-drawer-left-leave-active,
+.hk-drawer-right-leave-active {
+  transition: transform var(--duration-normal, 0.3s) cubic-bezier(0.4, 0, 1, 1);
+}
+
+.hk-drawer-left-enter-from,
+.hk-drawer-left-leave-to,
+.hk-drawer-right-enter-from,
+.hk-drawer-right-leave-to {
+  opacity: 1;
+}
+
 .hk-drawer-header {
   display: flex;
   align-items: center;

package/src/components/HkIconButtonGroup.scss

@@ -104,7 +104,7 @@
         (var(--hk-icon-group-item-size) + var(--hk-icon-group-slider-gap))
     )
   );
-  transition: transform var(--duration, 0.18s) ease;
+  transition: transform var(--duration-short, 0.15s) ease;
   pointer-events: none;
 }
 

package/src/components/HkMenu.scss

@@ -132,7 +132,7 @@
   padding: 0 var(--space-4, 4px);
   border-radius: var(--radius-full, 9999px);
   background: rgb(var(--color-error, 247 118 142));
-  color: #fff;
+  color: var(--hi-color-text-on-danger, #fff);
   font-size: var(--text-2xs, 10px);
   font-weight: 700;
   line-height: 1;

package/src/components/HkMenuActionItem.tsx

@@ -21,6 +21,11 @@ export default defineComponent({
     /** Destructive styling (logout, delete…). */
     danger: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
+    /** Selected/current row — the unified menu-item grammar's [data-active]
+     *  face (primary wash + strong border + primary text; see
+     *  _menu-item.scss). For lists that mark "you are here", e.g. the
+     *  modal-breadcrumb layer picker highlighting the current layer. */
+    active: { type: Boolean, default: false },
   },
   emits: {
     click: (_e: MouseEvent) => true,
@@ -31,6 +36,7 @@ export default defineComponent({
         type="button"
         class={["hk-menu-action-item", props.danger ? "hk-menu-action-item--danger" : ""]}
         data-danger={props.danger || undefined}
+        data-active={props.active || undefined}
         disabled={props.disabled}
         role="menuitem"
         onClick={(e: MouseEvent) => emit("click", e)}

package/src/components/HkMessageBox.scss

@@ -20,7 +20,7 @@
 
   [data-tone="warning"] &,
   [data-tone="danger"] & {
-    color: rgb(var(--color-danger, 240 70 80));
+    color: rgb(var(--color-error, 247 118 142));
   }
 }
 

package/src/components/HkModalBreadcrumb.overflow.contract.test.ts

@@ -95,7 +95,7 @@ describe("HkModalBreadcrumb overflow fence", () => {
     expect(offset).toBeGreaterThan(clearance);
   });
 
-  it("routes the hidden-layers menu through the shared form-factor rule", () => {
+  it("routes the all-layers menu through the shared form-factor rule", () => {
     // HkPopover owns "anchored under the trigger on desktop, bottom-up
     // sheet on mobile" and registers the surface with the popup manager;
     // a bespoke panel here would fork that behaviour.

package/src/components/HkModalBreadcrumb.scss

@@ -109,9 +109,22 @@
   inset: calc(-1 * var(--space-8, 0.5rem));
 }
 
-.hk-modal-breadcrumb-more:hover {
-  background: var(--hk-breadcrumb-more-hover, rgba(0, 0, 0, 0.06));
-  color: var(--hi-color-text, #1f2328);
+/* Hover AND the open state (aria-expanded — on a phone the tap leaves
+ * :hover stuck on the trigger, so the two must share one legible face).
+ * Both colors ride tokens that exist in every theme: the wash is the
+ * menu-item grammar's own primary-subtle (a raw rgba(0,0,0,…) fallback
+ * vanished on dark surfaces), and the text is --hi-color-text-primary —
+ * the token family defines NO --hi-color-text, so the old fallback
+ * (#1f2328, light-theme ink) used to repaint the glyph near-black on a
+ * dark strip, i.e. unreadable exactly after the tap (2026-10-18 report).
+ * The host knob --hk-breadcrumb-more-hover still wins if declared. */
+.hk-modal-breadcrumb-more:hover,
+.hk-modal-breadcrumb-more[aria-expanded="true"] {
+  background: var(
+    --hk-breadcrumb-more-hover,
+    var(--c-primary-subtle, rgb(var(--color-primary, 122 162 247) / 8%))
+  );
+  color: var(--hi-color-text-primary, rgb(var(--color-text, 30 30 30)));
 }
 
 .hk-modal-breadcrumb-more:focus-visible {
@@ -119,7 +132,7 @@
   outline-offset: 1px;
 }
 
-/* The hidden-layers menu rides HkPopover, so it inherits the family's
+/* The all-layers menu rides HkPopover, so it inherits the family's
    dropdown chrome and mobile-sheet form. Only the inset is re-anchored:
    the popover panel already pads 4px, and HkMenuPanel's drawer-scale 12px
    inset on top of it read as a double margin. */
@@ -128,7 +141,7 @@
 }
 
 /* A visible-but-cut label is tappable: it opens the whole name in the same
-   popover family as the hidden-layers menu. The strip is pointer-
+   popover family as the all-layers menu. The strip is pointer-
    transparent, so only these buttons (and the "…" trigger) take the click. */
 .hk-modal-breadcrumb-item-reveal {
   /* No padding: the strip's ruler measures a plain item, so a padded
@@ -160,8 +173,14 @@
 
 .hk-modal-breadcrumb-item-reveal:hover,
 .hk-modal-breadcrumb-item-reveal[aria-expanded="true"] {
-  background: var(--hk-breadcrumb-more-hover, rgba(0, 0, 0, 0.06));
-  color: var(--hi-color-text, #1f2328);
+  /* Same token contract as the "…" trigger above (see there): sticky
+   * touch hover makes this face linger after the tap, so it must stay
+   * legible on dark surfaces too. */
+  background: var(
+    --hk-breadcrumb-more-hover,
+    var(--c-primary-subtle, rgb(var(--color-primary, 122 162 247) / 8%))
+  );
+  color: var(--hi-color-text-primary, rgb(var(--color-text, 30 30 30)));
 }
 
 .hk-modal-breadcrumb-item-reveal:focus-visible {
@@ -170,7 +189,9 @@
 }
 
 /* The revealed name itself: the strip's own type, wrapping instead of
-   cutting, and selectable (the strip around it is not). */
+   cutting, and selectable (the strip around it is not). Same token
+   contract as the trigger faces above — --hi-color-text does not exist
+   in any theme, and its light-ink fallback was unreadable on dark. */
 .hk-modal-breadcrumb-reveal {
   margin: 0;
   padding: var(--space-8, 0.5rem) var(--space-12, 0.75rem);
@@ -178,7 +199,7 @@
   font-size: var(--text-xs, 0.75rem);
   font-weight: 600;
   line-height: 1.5;
-  color: var(--hi-color-text, #1f2328);
+  color: var(--hi-color-text-primary, rgb(var(--color-text, 30 30 30)));
   overflow-wrap: anywhere;
   user-select: text;
 }

package/src/components/HkModalBreadcrumb.test.tsx

@@ -483,7 +483,7 @@ describe("HkModalBreadcrumb label budget", () => {
     expect(document.body.querySelector(".hk-modal-breadcrumb-reveal")).toBeNull();
   });
 
-  it("opens the reveal instead of the hidden-layers menu", async () => {
+  it("opens the reveal instead of the all-layers menu", async () => {
     // The two surfaces are never open together: tapping a crumb closes the
     // menu it was opened from (its leave plays out, so the logical state is
     // what the assertion reads).
@@ -905,34 +905,52 @@ describe("HkModalBreadcrumb overflow fold", () => {
   });
 });
 
-describe("HkModalBreadcrumb hidden-layers menu", () => {
+describe("HkModalBreadcrumb all-layers menu", () => {
   function registerStack(extraTitle: string): void {
     STACK_TITLES.forEach((title) => manager.register("modal", true, title));
     manager.register("modal", true, extraTitle);
   }
 
-  it("lists the folded layers with their full names", async () => {
+  it("lists every layer reversed, full names, current row selected", async () => {
     setViewport(360);
     registerStack("细节");
     await mountStrip();
     const allTitles = [...STACK_TITLES, "细节"];
-    // The tail that stays on the strip before the menu opens: the menu
-    // snapshots exactly the layers this run folds away.
-    const tailBefore = labels();
     expect(more()).not.toBeNull();
-    expect(tailBefore.length).toBeGreaterThan(0);
-    expect(tailBefore.length).toBeLessThan(allTitles.length);
 
     more()!.click();
     await nextTick();
     await nextTick();
     const rows = menuRows();
-    // Full names, in stack order — the strip's clamp never reaches here.
+    // EVERY layer, topmost first (reverse stack order) — not just the
+    // folded prefix — with full names: the strip's clamp never reaches
+    // here.
     expect(rows.map((row) => row.textContent)).toEqual(
-      allTitles.slice(0, allTitles.length - tailBefore.length),
+      allTitles.slice().reverse(),
     );
-    expect(rows.map((row) => row.textContent)).not.toContain(LONG_TAIL);
     expect(rows.some((row) => row.textContent?.includes("…"))).toBe(false);
+    // The current layer is marked with the unified menu-item grammar's
+    // selected face (HkMenuActionItem `active` → [data-active]), and it
+    // is the ONLY selected row.
+    const selected = rows.filter((row) => row.hasAttribute("data-active"));
+    expect(selected).toHaveLength(1);
+    expect(selected[0].textContent).toBe("细节");
+  });
+
+  it("never lists the menu's own sheet among the layers", async () => {
+    setViewport(360);
+    registerStack("细节");
+    await mountStrip();
+    more()!.click();
+    await nextTick();
+    await nextTick();
+    // The sheet form registered as a blocking layer (the strip itself
+    // lists it as a crumb — see the docking test below), yet the menu's
+    // rows stay the WINDOWS only: selecting "the menu" is not a place
+    // to go.
+    const rows = menuRows();
+    expect(rows.map((row) => row.textContent)).not.toContain("All layers");
+    expect(rows).toHaveLength(STACK_TITLES.length + 1);
   });
 
   it("docks the menu as a bottom-up sheet on mobile", async () => {
@@ -950,12 +968,12 @@ describe("HkModalBreadcrumb hidden-layers menu", () => {
     // window layer — it is named, and it counts as a layer of the stack it
     // was opened from.
     const blocking = [...manager.registry.value.values()].filter((entry) => entry.blocking);
-    expect(blocking.map((entry) => entry.title)).toContain("Hidden layers");
+    expect(blocking.map((entry) => entry.title)).toContain("All layers");
     // It is a window layer in every sense — including naming itself as the
     // current crumb of the very strip it was opened from.
     expect(
       strip()!.querySelector(".hk-modal-breadcrumb-item-current")!.textContent,
-    ).toBe("Hidden layers");
+    ).toBe("All layers");
   });
 
   it("drops the trigger and the menu once the stack stops folding", async () => {
@@ -971,8 +989,9 @@ describe("HkModalBreadcrumb hidden-layers menu", () => {
     expect(more()!.getAttribute("aria-expanded")).toBe("true");
 
     // Wide enough for the whole stack, still the same form factor (so the
-    // popover's own breakpoint rule is not what closes it): nothing is left
-    // to list, and the trigger the menu is anchored to must go with it.
+    // popover's own breakpoint rule is not what closes it): the strip now
+    // shows every layer itself, and the trigger the menu is anchored to
+    // goes with it.
     setViewport(760);
     await until(
       () =>
@@ -993,7 +1012,7 @@ describe("HkModalBreadcrumb hidden-layers menu", () => {
     const panel = document.body.querySelector<HTMLElement>(".hk-popover-panel")!;
     expect(panel).toBeTruthy();
     expect(panel.classList.contains("hk-is-sheet")).toBe(false);
-    expect(panel.getAttribute("aria-label")).toBe("Hidden layers");
+    expect(panel.getAttribute("aria-label")).toBe("All layers");
     expect(document.body.querySelector(".hk-popover-scrim")).toBeNull();
     // Anchored = a hidden level: nothing new joins the window stack.
     expect([...manager.registry.value.values()].filter((entry) => entry.blocking)).toHaveLength(0);
@@ -1015,15 +1034,19 @@ describe("HkModalBreadcrumb hidden-layers menu", () => {
     await nextTick();
     const rows = menuRows();
     expect(rows.length).toBeGreaterThan(1);
-    expect(rows[0].textContent).toBe(LONG);
+    // Reversed order: the topmost layer (the no-close-channel one) leads.
+    expect(rows[0].textContent).toBe("没有关闭通道的层级占位文本");
 
-    // Pick the SECOND folded layer: everything above it closes, it and
+    // Rows are reverse stack order: past the no-channel topmost (row 0),
+    // rows[k] is STACK_TITLES[STACK_TITLES.length - k] — pick k = 3,
+    // i.e. STACK_TITLES[5]; everything above it closes, it and
     // everything below it stay.
-    rows[1].click();
+    rows[3].click();
     await nextTick();
-    expect(closes[0]).not.toHaveBeenCalled();
-    expect(closes[1]).not.toHaveBeenCalled();
-    for (let i = 2; i < closes.length; i++) {
+    for (let i = 0; i <= 5; i++) {
+      expect(closes[i]).not.toHaveBeenCalled();
+    }
+    for (let i = 6; i < closes.length; i++) {
       expect(closes[i]).toHaveBeenCalledTimes(1);
     }
     expect(manager.registry.value.has(noChannel.id)).toBe(true);

package/src/components/HkModalBreadcrumb.tokens.contract.test.ts

@@ -0,0 +1,81 @@
+/**
+ * Source contract for the strip's trigger/reveal interaction face.
+ *
+ * The behavioural suite runs in happy-dom, which resolves no theme
+ * custom properties — a rule that falls back to a WRONG literal paints
+ * fine in the suite and breaks only in a real theme. That is exactly
+ * what shipped: the hover/open faces colored their glyphs with a
+ * var() reference to --hi-color-text (fallback #1f2328) — a token NO
+ * theme defines (the family spells it --hi-color-text-primary), so the
+ * light-theme ink #1f2328 won
+ * — and on a phone the tap leaves :hover stuck, making the "…" trigger
+ * near-invisible on every dark theme right after the tap (2026-10-18
+ * user report). The pins live here, next to the reason each exists.
+ */
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import { describe, expect, it } from "vitest";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const scss = readFileSync(join(here, "HkModalBreadcrumb.scss"), "utf-8");
+
+function rule(selector: string): string {
+  return scss.match(new RegExp(`${selector}\\s*{[^}]*}`, "m"))?.[0] ?? "";
+}
+
+describe("HkModalBreadcrumb trigger face tokens", () => {
+  it("never references the nonexistent --hi-color-text alias", () => {
+    // The alias family defines --hi-color-text-primary; --hi-color-text
+    // does not exist, so any var() use silently takes its light-theme
+    // fallback. (Matched as var() usage so prose in comments about the
+    // alias itself stays legal.)
+    expect(scss).not.toMatch(/var\(\s*--hi-color-text[,)]/);
+  });
+
+  it("paints the trigger's hover AND open face from live theme tokens", () => {
+    // One legible face for both states: the tap on a phone leaves :hover
+    // stuck on the trigger, so aria-expanded must share the rule.
+    const group = scss.match(
+      /\.hk-modal-breadcrumb-more:hover,\s*\n\.hk-modal-breadcrumb-more\[aria-expanded="true"\]\s*{[^}]*}/,
+    )?.[0];
+    expect(group).toBeTruthy();
+    expect(group).toContain("var(--hi-color-text-primary");
+    // The wash falls back to the menu-item grammar's own primary-subtle —
+    // a raw rgba(0,0,0,…) fallback vanished on dark surfaces.
+    expect(group).toContain("var(--c-primary-subtle");
+    expect(group).not.toContain("rgba(0, 0, 0");
+    // The host knob still wins when declared.
+    expect(group).toContain("--hk-breadcrumb-more-hover");
+  });
+
+  it("gives the cut-label reveal button the same token contract", () => {
+    const group = scss.match(
+      /\.hk-modal-breadcrumb-item-reveal:hover,\s*\n\.hk-modal-breadcrumb-item-reveal\[aria-expanded="true"\]\s*{[^}]*}/,
+    )?.[0];
+    expect(group).toBeTruthy();
+    expect(group).toContain("var(--hi-color-text-primary");
+    expect(group).toContain("var(--c-primary-subtle");
+    expect(group).not.toContain("rgba(0, 0, 0");
+  });
+
+  it("keeps the base faces on the tokens the strip already used", () => {
+    // Untouched by the fix, pinned so a refactor cannot quietly
+    // reintroduce a raw literal here either.
+    expect(rule(".hk-modal-breadcrumb-more")).toContain(
+      "color: var(--hi-color-text-secondary",
+    );
+    expect(rule(".hk-modal-breadcrumb-item")).toContain(
+      "color: var(--hi-color-text-secondary",
+    );
+  });
+
+  it("colors the revealed full name from a live token too", () => {
+    // The reveal body text rode the same broken alias — near-black ink
+    // on every dark theme.
+    expect(rule(".hk-modal-breadcrumb-reveal")).toContain(
+      "color: var(--hi-color-text-primary",
+    );
+  });
+});