@celestia-island/hikari 0.55.0 → 0.55.2

package/package.json

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

package/src/components/HkDrawer.tsx

@@ -19,6 +19,7 @@ import { createBackGuard } from "../runtime/backStack";
 import { attachOverlayScrollbars, type OverlayScrollbarHandle } from "../composables/useOverlayScrollbar";
 import { useSurfaceTransition } from "../composables/useSurfaceTransition";
 import { useSurfaceMachine } from "../composables/useSurfaceMachine";
+import { useSurfaceContentHold } from "../composables/useSurfaceContentHold";
 import HIconButton from "./HkIconButton";
 import HIcon from "./HkIcon";
 import "./window-close.scss";
@@ -269,6 +270,8 @@ export default defineComponent({
       cleanup();
     });
 
+    const contentHold = useSurfaceContentHold(machine.phase);
+
     return () => {
       if (!machine.mounted.value) return null;
       const panelPrefix = `hk-drawer-${props.side}`;
@@ -295,7 +298,11 @@ export default defineComponent({
                 else if (e.key === "Tab" && panelRef.value) trapFocus(panelRef.value, e);
               }}
             >
-              {props.title || slots.header ? (
+              {/* Same close-fold content hold as HkModal: the sheet's
+                  slide-away plays over the last live content even when
+                  the consumer tears its state down on close. */}
+              {contentHold.hold(() => [
+              props.title || slots.header ? (
                 <div class="hk-drawer-header">
                   {slots.header ? (
                     slots.header()
@@ -314,13 +321,14 @@ export default defineComponent({
                     </HIconButton>
                   ) : null}
                 </div>
-              ) : null}
+              ) : null,
               <div ref={bodyWrapRef} class="hk-drawer-body-wrap">
                 <div ref={bodyRef} class="hk-drawer-body">{slots.default?.()}</div>
-              </div>
-              {slots.footer ? (
+              </div>,
+              slots.footer ? (
                 <div class="hk-drawer-footer">{slots.footer()}</div>
-              ) : null}
+              ) : null,
+              ])}
             </div>
       </Teleport>
       );

package/src/components/HkModal.contenthold.test.tsx

@@ -0,0 +1,156 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createApp, defineComponent, h, nextTick, ref } from "vue";
+
+import HkModal from "./HkModal";
+
+/**
+ * Source contract for the close-fold content hold (chest field report
+ * 2026-09-16): consumers routinely tear down the state that feeds the
+ * window's body in the same tick as the close (TodoLogModal's
+ * clear-on-close watcher emptied a 697px conversation window to a 200px
+ * stub BEFORE the fold started). While the machine is in a closing phase
+ * HkModal serves the last live-rendered children, so the fold always
+ * plays over the content the user was looking at.
+ *
+ * happy-dom has no transition engine, so the machine's duration probe
+ * reads a stubbed 0.3s (same harness trick as the surface-machine tests)
+ * and rAF is frozen — the flip timers drive the phase edges
+ * deterministically.
+ */
+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();
+  vi.unstubAllGlobals();
+  vi.useRealTimers();
+});
+
+function freezeRaf(): void {
+  vi.stubGlobal("requestAnimationFrame", (_cb: FrameRequestCallback) => 0 as unknown as number);
+  vi.stubGlobal("cancelAnimationFrame", () => {});
+}
+
+function stubDurations(): void {
+  const realGCS = window.getComputedStyle.bind(window);
+  vi.stubGlobal("getComputedStyle", (el: Element, ...rest: unknown[]) => {
+    const style = realGCS(el as Element, ...(rest as []));
+    return { ...style, transitionDuration: "0.3s" } as CSSStyleDeclaration;
+  });
+}
+
+interface Rig {
+  open: { value: boolean };
+  setLines: (lines: string[]) => void;
+  closeWithTeardown: () => void;
+  bodyText: () => string;
+  frameEl: () => HTMLElement | null;
+}
+
+/** Mount HkModal behind a wrapper that models the chest clear-on-close
+ *  pattern: the body state clears in the SAME handler that flips the
+ *  v-model false. */
+async function mountRig(initialLines: string[]): Promise<Rig> {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  containers.push(container);
+
+  const open = ref(false);
+  const lines = ref<string[]>(initialLines);
+
+  const Wrapper = defineComponent({
+    setup() {
+      return () =>
+        h(HkModal, {
+          modelValue: open.value,
+          closable: true,
+          title: "hold-test",
+          "onUpdate:modelValue": (v: boolean) => {
+            open.value = v;
+            // The reported chest pattern: destroy the content with the
+            // close request, before any leave animation runs.
+            if (!v) lines.value = [];
+          },
+        }, {
+          default: () => h("div", lines.value.map((l, i) => h("p", { key: i }, l))),
+        });
+    },
+  });
+  const app = createApp(Wrapper);
+  mounts.push(app);
+  app.mount(container);
+  await nextTick();
+
+  return {
+    open,
+    setLines: (next: string[]) => { lines.value = next; },
+    /** Faithful chest pattern: the store-watcher teardown runs in the SAME
+     *  tick as the v-model flip, regardless of who flipped it — clearing
+     *  only inside onUpdate:modelValue would miss programmatic closes and
+     *  the test would pass vacuously (R1 finding: the hold was never
+     *  exercised). */
+    closeWithTeardown: () => {
+      open.value = false;
+      lines.value = [];
+    },
+    bodyText: () => document.querySelector(".hk-modal-body-inner")?.textContent ?? "",
+    frameEl: () => document.querySelector<HTMLElement>(".hk-modal-content"),
+  };
+}
+
+describe("HkModal close-fold content hold", () => {
+  it("folds over the last live content even when the consumer clears state on close", async () => {
+    vi.useFakeTimers();
+    freezeRaf();
+    stubDurations();
+    const rig = await mountRig(["alpha", "beta"]);
+
+    // Open the surface to rest (flip timer 120ms + duration 300 + slack).
+    rig.open.value = true;
+    await vi.advanceTimersByTimeAsync(600);
+    expect(rig.bodyText()).toBe("alphabeta");
+
+    // Close with the SAME-TICK teardown — this is the exact moment the
+    // hold must earn its keep (without it the body blanks immediately).
+    rig.closeWithTeardown();
+    await vi.advanceTimersByTimeAsync(150); // mid-leave (past the flip)
+    expect(rig.frameEl()).not.toBeNull();
+    // THE contract: the fold plays over the ORIGINAL content — the
+    // same-tick teardown must not blank the window mid-fold.
+    expect(rig.bodyText()).toBe("alphabeta");
+
+    // The leave settles and the DOM goes away with it.
+    await vi.advanceTimersByTimeAsync(600);
+    expect(rig.frameEl()).toBeNull();
+    expect(rig.bodyText()).toBe("");
+  });
+
+  it("a reopen interrupt drops the hold and serves live content again", async () => {
+    vi.useFakeTimers();
+    freezeRaf();
+    stubDurations();
+    const rig = await mountRig(["alpha", "beta"]);
+
+    rig.open.value = true;
+    await vi.advanceTimersByTimeAsync(600);
+    const frameBeforeClose = rig.frameEl();
+
+    // Close with the same-tick teardown, then interrupt mid-leave.
+    rig.closeWithTeardown();
+    await vi.advanceTimersByTimeAsync(150);
+    expect(rig.bodyText()).toBe("alphabeta");
+
+    // Reopen with FRESH content — the hold releases with the phase.
+    rig.open.value = true;
+    rig.setLines(["gamma"]);
+    await vi.advanceTimersByTimeAsync(30);
+    expect(rig.bodyText()).toBe("gamma");
+
+    // …and the same element survives the reversal (no remount flash).
+    expect(rig.frameEl()).toBe(frameBeforeClose);
+    await vi.advanceTimersByTimeAsync(800);
+    expect(rig.bodyText()).toBe("gamma");
+    expect(rig.frameEl()).not.toBeNull();
+  });
+});

package/src/components/HkModal.leavepin.test.tsx

@@ -0,0 +1,169 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createApp, defineComponent, h, nextTick, ref } from "vue";
+
+import HkModal from "./HkModal";
+
+/**
+ * Source contract for the leave-window height pin (chest field report
+ * 2026-09-16): the close fold owns the frame's geometry for the whole
+ * leave, so HkModal must KEEP the size morph's pin through closingFrom →
+ * closingTo (morph.hold()) and only release it on the finalize edge. The
+ * composable-level semantics are pinned by useSizeMorph.test.ts; this file
+ * pins the HkModal INTEGRATION — the wiring bug class (calling stop()
+ * instead of hold()) leaves the composable tests green while every real
+ * modal folds over a resizing frame.
+ *
+ * happy-dom has no layout engine, so the frame's offsetHeight is stubbed
+ * at the HTMLElement prototype level BEFORE mount — the morph's
+ * openingFrom-tick arm then measures 500px and pins it, and every
+ * mid-leave assertion reads the inline height string directly.
+ */
+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();
+  vi.unstubAllGlobals();
+  vi.useRealTimers();
+});
+
+function freezeRaf(): void {
+  vi.stubGlobal("requestAnimationFrame", (_cb: FrameRequestCallback) => 0 as unknown as number);
+  vi.stubGlobal("cancelAnimationFrame", () => {});
+}
+
+function stubDurations(): void {
+  const realGCS = window.getComputedStyle.bind(window);
+  vi.stubGlobal("getComputedStyle", (el: Element, ...rest: unknown[]) => {
+    const style = realGCS(el as Element, ...(rest as []));
+    return { ...style, transitionDuration: "0.3s" } as CSSStyleDeclaration;
+  });
+}
+
+/** Prototype-level layout stub: every element measures `layoutH` tall.
+ *  Mutable so a test can simulate content growth mid-enter. */
+let layoutH = 500;
+function stubLayout(initial: number): void {
+  layoutH = initial;
+  Object.defineProperty(HTMLElement.prototype, "offsetHeight", {
+    configurable: true,
+    get: () => layoutH,
+  });
+}
+
+function restoreLayout(): void {
+  delete (HTMLElement.prototype as { offsetHeight?: number }).offsetHeight;
+}
+
+interface Rig {
+  open: { value: boolean };
+  pinHeight: () => string;
+  frameEl: () => HTMLElement | null;
+  clickClose: () => void;
+}
+
+async function mountRig(): Promise<Rig> {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  containers.push(container);
+
+  const open = ref(false);
+
+  const Wrapper = defineComponent({
+    setup() {
+      return () =>
+        h(HkModal, {
+          modelValue: open.value,
+          closable: true,
+          title: "pin-test",
+          "onUpdate:modelValue": (v: boolean) => { open.value = v; },
+        }, { default: () => h("div", "content") });
+    },
+  });
+  const app = createApp(Wrapper);
+  mounts.push(app);
+  app.mount(container);
+  await nextTick();
+
+  return {
+    open,
+    pinHeight: () => document.querySelector<HTMLElement>(".hk-modal-content")?.style.height ?? "",
+    frameEl: () => document.querySelector<HTMLElement>(".hk-modal-content"),
+    clickClose: () => {
+      const btn = document.querySelector<HTMLElement>(".hk-modal-close");
+      btn?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    },
+  };
+}
+
+describe("HkModal leave-window height pin", () => {
+  it("keeps the morph pin through the whole leave and releases at finalize", async () => {
+    vi.useFakeTimers();
+    freezeRaf();
+    stubDurations();
+    stubLayout(500);
+    try {
+      const rig = await mountRig();
+
+      // Open to rest: the enter-edge arm measured 500px and pinned it.
+      rig.open.value = true;
+      await vi.advanceTimersByTimeAsync(600);
+      expect(rig.frameEl()).not.toBeNull();
+      expect(rig.pinHeight()).toBe("500px");
+
+      // Close through the modal's own close button (the real path).
+      rig.clickClose();
+      await vi.advanceTimersByTimeAsync(150); // mid-leave, past the flip
+      expect(rig.frameEl()).not.toBeNull();
+      // THE contract: the pin survives the whole closing window — a
+      // stop()-instead-of-hold() wiring drops it here and the fold plays
+      // over a frame handed back to `height: auto`.
+      expect(rig.pinHeight()).toBe("500px");
+
+      // Still pinned late in the leave.
+      await vi.advanceTimersByTimeAsync(250);
+      if (rig.frameEl()) {
+        expect(rig.pinHeight()).toBe("500px");
+      }
+
+      // Finalize: the surface unmounts (the release write is invisible).
+      await vi.advanceTimersByTimeAsync(600);
+      expect(rig.frameEl()).toBeNull();
+    } finally {
+      restoreLayout();
+    }
+  });
+
+  it("flushes growth deferred through the enter with an open-edge remeasure", async () => {
+    vi.useFakeTimers();
+    freezeRaf();
+    stubDurations();
+    stubLayout(400);
+    try {
+      const rig = await mountRig();
+
+      // Open: the enter-edge arm pins the enter-time height (400px).
+      rig.open.value = true;
+      await vi.advanceTimersByTimeAsync(150); // mid-enter, past the flip
+      expect(rig.pinHeight()).toBe("400px");
+
+      // Content grows mid-enter — with the enter's defer gate the pin
+      // must NOT chase it (the choreography's height-relative geometry
+      // stays put; in a real browser the RO fires and is deferred too).
+      layoutH = 700;
+      await vi.advanceTimersByTimeAsync(50);
+      expect(rig.pinHeight()).toBe("400px");
+
+      // The open edge flushes the deferred growth one tick after the
+      // transition classes clear — the pin lands at the grown height.
+      await vi.advanceTimersByTimeAsync(450);
+      expect(rig.pinHeight()).toBe("700px");
+
+      // Sanity: the surface really rested open before the flush assertion.
+      expect(rig.frameEl()).not.toBeNull();
+    } finally {
+      restoreLayout();
+    }
+  });
+});

package/src/components/HkModal.tsx

@@ -21,6 +21,7 @@ import { scheduleFrame, type AnimationHandle } from "../runtime/animationBus";
 import { attachOverlayScrollbars, type OverlayScrollbarHandle } from "../composables/useOverlayScrollbar";
 import { useSurfaceTransition } from "../composables/useSurfaceTransition";
 import { useSurfaceMachine } from "../composables/useSurfaceMachine";
+import { useSurfaceContentHold } from "../composables/useSurfaceContentHold";
 import { useSizeMorph } from "../composables/useSizeMorph";
 import HButton from "./HkButton";
 import HFab from "./HkFab";
@@ -201,8 +202,19 @@ export default defineComponent({
      *  useSizeMorph). */
     const innerRef = ref<HTMLElement>();
     // Content-driven size morphing: the frame follows content growth with
-    // the height transition instead of snapping (see useSizeMorph).
-    const morph = useSizeMorph(contentRef, innerRef);
+    // the height transition instead of snapping (see useSizeMorph). The
+    // gate freezes resize-driven re-measurement through the enter unfold:
+    // the choreography's geometry is height-relative (translateY 5% +
+    // bottom-10% clip of the frame height), so content streaming in
+    // mid-enter would otherwise recompute the pixel geometry under the
+    // running animation (2026-09-16 chest field report — the frame
+    // snapped 459→697px mid-unfold). The open phase edge flushes the
+    // deferred growth with an animated remeasure.
+    const morph = useSizeMorph(contentRef, innerRef, {
+      deferRemeasure: () =>
+        machine.phase.value === "openingFrom" ||
+        machine.phase.value === "openingTo",
+    });
     let previouslyFocused: HTMLElement | null = null;
     let unmounted = false;
 
@@ -347,13 +359,29 @@ export default defineComponent({
             backGuard.push();
           }
           surfTrack.run();
+          // Arm the size morph WITH the enter (one tick later, once the
+          // mounting patch landed): the pin locks the frame's height for
+          // the whole unfold so late-streaming content cannot move the
+          // choreography mid-flight (see the morph's gate above). The
+          // zero-duration fast paths reach `open` before the tick — the
+          // open branch's own start() covers them.
+          void nextTick(() => {
+            const p = machine.phase.value;
+            if (p === "openingFrom" || p === "openingTo") morph.start();
+          });
         } else if (to === "open") {
           surfTrack.cancel();
           onAfterEnter();
-          // Size morphs arm once the open choreography finished —
-          // pinning during enter would fight the reveal's transform
-          // transition.
+          // Idempotent re-arm for the fast paths (see openingFrom); the
+          // morph is usually armed already by the enter-edge tick.
           morph.start();
+          // Flush the growth deferred through the unfold. One tick later
+          // the transition classes are off the frame, so the base height
+          // transition animates the pin change instead of the enter's
+          // transform/clip-only transition list swallowing it as a snap.
+          void nextTick(() => {
+            if (machine.phase.value === "open") morph.remeasure();
+          });
         } else if (to === "closingFrom") {
           // Close-request bookkeeping (was the watcher's close arm): the
           // registries forget the surface at request time; the finalize
@@ -361,8 +389,18 @@ export default defineComponent({
           surfTrack.run();
           overlay.close();
           backGuard.release();
-          // Release the pinned height so the leave owns the frame.
-          morph.stop();
+          // Keep the height PIN through the leave: the fold owns the
+          // frame's geometry and a mid-leave content change must not
+          // resize it. The pin releases on the finalize edge below.
+          morph.hold();
+          // The leave must not chase a live tail — the window folds over
+          // the final frame of content, not over a moving stream. A
+          // self-updating child inside the held content could still
+          // mutate the DOM mid-fold (the observer would re-pin the
+          // scroll), so auto-follow tears down with the close request;
+          // a reopen interrupt re-arms it at the open edge
+          // (onAfterEnter → setupAutoFollow).
+          teardownAutoFollow();
         } else if (
           to === "closed" &&
           (from === "closingFrom" || from === "closingTo") &&
@@ -373,6 +411,10 @@ export default defineComponent({
           event !== "UNMOUNT"
         ) {
           surfTrack.cancel();
+          // Bookkeeping reset for the NEXT open cycle: zeroes the morph's
+          // pin so the next enter starts clean (release() writes on the
+          // invisible, about-to-unmount frame — no visual effect).
+          morph.stop();
           onAfterLeaveFinalize();
         }
         // to === "closed" via UNMOUNT: teardown is owned by
@@ -743,6 +785,8 @@ export default defineComponent({
       return null;
     }
 
+    const contentHold = useSurfaceContentHold(machine.phase);
+
     return () => {
       if (!machine.mounted.value) return null;
 
@@ -773,7 +817,12 @@ export default defineComponent({
                   onClick={onContentClick}
                   tabindex={-1}
                 >
-                  {headerShown && (
+                  {/* Content hold: while the machine is in a closing
+                      phase this serves the last live-rendered children,
+                      so a consumer tearing down its state on close
+                      cannot blank the window mid-fold. */}
+                  {contentHold.hold(() => [
+                  headerShown ? (
                     <>
                       <div
                         class={[
@@ -807,7 +856,7 @@ export default defineComponent({
                         <div class="hk-modal-subheader">{slots.header()}</div>
                       )}
                     </>
-                  )}
+                  ) : null,
                   <div ref={bodyRef} class="hk-modal-body">
                     <div
                       ref={scrollContainerRef}
@@ -851,8 +900,9 @@ export default defineComponent({
                         )}
                       </>
                     )}
-                  </div>
-                  {renderFooter()}
+                  </div>,
+                  renderFooter(),
+                  ])}
                 </div>
           </div>
         </Teleport>

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

@@ -109,7 +109,52 @@ describe("HkModalBreadcrumb overflow fence", () => {
   it("keeps the fold off the accessibility tree and the names on it", () => {
     // The clone duplicates every label — it must stay invisible to AT.
     expect(tsx).toMatch(/hk-modal-breadcrumb-measure"[^>]*aria-hidden="true"/);
-    // A cut label still announces its whole name.
-    expect(tsx).toMatch(/hk-modal-breadcrumb-sr-only/);
+    // A cut label IS a button, and a cut string is not a name: the whole
+    // layer name travels as its accessible name.
+    expect(tsx).toMatch(/aria-label=\{crumb\.label\}/);
+    // The tappable label must reach through the pointer-transparent strip.
+    expect(rule(".hk-modal-breadcrumb-item-reveal")).toContain("pointer-events: auto");
+  });
+
+  it("keeps the tappable label the same box the ruler measures", () => {
+    // The clone renders a plain span per label, so padding on the button
+    // would make the fold under-count its own crumb; the ~17px text line is
+    // also under half a fingertip, and this is the phone-primary
+    // affordance. Grow the hit area, not the chrome.
+    const block = rule(".hk-modal-breadcrumb-item-reveal");
+    // `padding: 0` exactly — the old `padding: 0 var(--space-4, …)` also
+    // satisfied a bare "padding: 0" substring, so the guard was vacuous.
+    expect(block).toMatch(/padding:\s*0;/);
+    expect(block).toContain("pointer-events: auto");
+    expect(block).toContain("text-align: start");
+    const hitArea = scss.match(/\.hk-modal-breadcrumb-item-reveal::after\s*{[^}]*}/)?.[0] ?? "";
+    expect(hitArea).toContain("position: absolute");
+    expect(hitArea).toContain("inset: calc(-1 * var(--space-8");
+  });
+
+  it("leaves the label palette to the item classes", () => {
+    // The button carries the item classes too, and an equally specific rule
+    // later in the file wins: redeclaring `color` here repainted every cut
+    // crumb (and dropped the current layer's accent) in exactly the
+    // long-title case this feature exists for (2026-09-16 final review).
+    const block = rule(".hk-modal-breadcrumb-item-reveal");
+    expect(block).not.toContain("color:");
+    expect(rule(".hk-modal-breadcrumb-item")).toContain(
+      "color: var(--hi-color-text-secondary",
+    );
+    expect(rule(".hk-modal-breadcrumb-item-current")).toContain(
+      "color: var(--hi-color-primary",
+    );
+  });
+
+  it("opens the revealed name in the same popover family as the menu", () => {
+    // Two surfaces, one form-factor rule: both are HkPopovers that dock as
+    // a sheet on mobile, anchored to the crumb they belong to.
+    expect(tsx.match(/<HkPopover/g)).toHaveLength(2);
+    expect(tsx.match(/sheetOnMobile/g)).toHaveLength(2);
+    // A revealed name wraps instead of cutting.
+    const block = rule(".hk-modal-breadcrumb-reveal");
+    expect(block).toContain("overflow-wrap: anywhere");
+    expect(block).not.toContain("text-overflow: ellipsis");
   });
 });

package/src/components/HkModalBreadcrumb.scss

@@ -121,19 +121,60 @@
   --hk-menu-panel-inset: var(--space-4, 0.25rem);
 }
 
-/* Full layer name for assistive tech when the visible label is cut — the
-   strip is an aria-live region, and "自动化测试流水线冒烟请巡…" announces as
-   noise unless the whole name travels alongside it. */
-.hk-modal-breadcrumb-sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
+/* 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-
+   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
+     button would make the fold under-count its own crumb. The hit area is
+     grown by a pseudo-element instead, exactly like the "…" trigger. */
+  margin: 0;
   padding: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
   border: 0;
+  border-radius: var(--radius-sm, 0.25rem);
+  background: transparent;
+  /* font-family only: the item classes above own size, weight AND colour —
+     redeclaring `color` here would repaint every cut crumb (and drop the
+     current layer's accent) because an equally specific rule later in the
+     file wins. */
+  font-family: inherit;
+  text-align: start;
+  cursor: pointer;
+  pointer-events: auto;
+  position: relative;
+}
+
+/* A label is one text line tall (~17px) — under half a fingertip, and this
+   is the phone-primary affordance. Grow the hit area, not the chrome. */
+.hk-modal-breadcrumb-item-reveal::after {
+  content: "";
+  position: absolute;
+  inset: calc(-1 * var(--space-8, 0.5rem)) 0;
+}
+
+.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);
+}
+
+.hk-modal-breadcrumb-item-reveal:focus-visible {
+  outline: 2px solid var(--hi-color-primary, #7aa2f7);
+  outline-offset: 1px;
+}
+
+/* The revealed name itself: the strip's own type, wrapping instead of
+   cutting, and selectable (the strip around it is not). */
+.hk-modal-breadcrumb-reveal {
+  margin: 0;
+  padding: var(--space-8, 0.5rem) var(--space-12, 0.75rem);
+  max-width: min(24rem, calc(100vw - 2 * var(--viewport-gutter, 1rem)));
+  font-size: var(--text-xs, 0.75rem);
+  font-weight: 600;
+  line-height: 1.5;
+  color: var(--hi-color-text, #1f2328);
+  overflow-wrap: anywhere;
+  user-select: text;
 }
 
 /* The strip's own ruler: every layer laid out at its natural width so the