@celestia-island/hikari 0.55.1 → 0.55.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.1",
+  "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/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

package/src/components/HkModalBreadcrumb.test.tsx

@@ -218,16 +218,20 @@ describe("HkModalBreadcrumb label budget", () => {
     expect(labels()).toEqual(["abcdefghijklmnopqrst", "abcdefghijklmnopqr…"]);
   });
 
-  it("keeps the whole layer name for assistive tech when it cuts", async () => {
+  it("keeps the whole layer name on a cut label", async () => {
     manager.register("modal", true, LONG);
     manager.register("modal", true, "细节");
     await mountStrip();
     const nav = strip()!;
-    const first = nav.querySelector<HTMLElement>(
-      ":scope > .hk-modal-breadcrumb-crumb .hk-modal-breadcrumb-item",
+    const first = nav.querySelector<HTMLButtonElement>(
+      ":scope > .hk-modal-breadcrumb-crumb button.hk-modal-breadcrumb-item",
     )!;
-    expect(first.querySelector('[aria-hidden="true"]')!.textContent).toBe(LONG_TAIL);
-    expect(first.querySelector(".hk-modal-breadcrumb-sr-only")!.textContent).toBe(LONG);
+    // Rendered cut, announced whole: a truncated string is not a name.
+    expect(first.textContent).toBe(LONG_TAIL);
+    expect(first.getAttribute("aria-label")).toBe(LONG);
+    expect(first.getAttribute("aria-expanded")).toBe("false");
+    // An uncut label stays plain text — no new interaction surface.
+    expect(nav.querySelectorAll("button.hk-modal-breadcrumb-item")).toHaveLength(1);
     // The measurement clone must never join the a11y tree.
     expect(
       nav.querySelector(".hk-modal-breadcrumb-measure")!.getAttribute("aria-hidden"),
@@ -252,6 +256,251 @@ describe("HkModalBreadcrumb label budget", () => {
     }
   });
 
+  it("reveals a cut label on the same crumb's popover", async () => {
+    setViewport(1200);
+    manager.register("modal", true, LONG);
+    manager.register("modal", true, "细节");
+    await mountStrip();
+    const cut = () =>
+      strip()!.querySelector<HTMLButtonElement>("button.hk-modal-breadcrumb-item")!;
+    expect(document.body.querySelector(".hk-popover-panel")).toBeNull();
+
+    cut().click();
+    await nextTick();
+    await nextTick();
+    const panel = document.body.querySelector<HTMLElement>(".hk-popover-panel")!;
+    expect(panel).toBeTruthy();
+    // Desktop: an anchored popover carrying the WHOLE name, wrapping.
+    expect(panel.classList.contains("hk-is-sheet")).toBe(false);
+    expect(panel.querySelector(".hk-modal-breadcrumb-reveal")!.textContent).toBe(LONG);
+    expect(cut().getAttribute("aria-expanded")).toBe("true");
+
+    // Tapping the same crumb again puts it away.
+    cut().click();
+    await nextTick();
+    await nextTick();
+    expect(cut().getAttribute("aria-expanded")).toBe("false");
+    expect(document.body.querySelector(".hk-modal-breadcrumb-reveal")).toBeNull();
+  });
+
+  it("docks the revealed name as a bottom sheet on mobile", async () => {
+    setViewport(360);
+    manager.register("modal", true, LONG);
+    manager.register("modal", true, "细节");
+    await mountStrip();
+    strip()!.querySelector<HTMLButtonElement>("button.hk-modal-breadcrumb-item")!.click();
+    // Settle before asserting: the sheet's own registration re-folds the
+    // strip, and the surface must outlive that (see the phone test above).
+    await until(() => document.body.querySelector(".hk-modal-breadcrumb-reveal") !== null);
+    await until(() => false, 150);
+    const panel = document.body.querySelector<HTMLElement>(".hk-popover-panel")!;
+    expect(panel.classList.contains("hk-is-sheet")).toBe(true);
+    expect(panel.querySelector(".hk-modal-breadcrumb-reveal")!.textContent).toBe(LONG);
+    // It registers as a window layer like any other blocking sheet, and the
+    // name it reveals is the name it carries.
+    const blocking = [...manager.registry.value.values()].filter((entry) => entry.blocking);
+    expect(blocking.map((entry) => entry.title)).toContain(LONG);
+  });
+
+  it("keeps the revealed name open on a phone, where its own sheet moves the fold", async () => {
+    // Opening the reveal docks a blocking sheet, the sheet joins the stack
+    // the strip lists, and the tail is re-decided underneath: the tapped
+    // crumb can end up behind the trigger in the same frame. The surface
+    // belongs to the LAYER, not to the fold — closing it there made the
+    // reveal cancel itself on every phone (2026-09-16 review).
+    setViewport(360);
+    manager.register("modal", true, LONG); // cut, and visible before the tap
+    manager.register("modal", true, "第二层");
+    manager.register("modal", true, "第三层");
+    await mountStrip();
+    const crumb = strip()!.querySelector<HTMLButtonElement>("button.hk-modal-breadcrumb-item")!;
+    expect(crumb.getAttribute("aria-label")).toBe(LONG);
+
+    crumb.click();
+    await until(() => document.body.querySelector(".hk-modal-breadcrumb-reveal") !== null);
+    // Let every deferred consequence land (the sheet's registration, the
+    // re-measure, the fold) and assert the surface is STILL there.
+    await until(() => false, 200);
+    expect(document.body.querySelector(".hk-modal-breadcrumb-reveal")!.textContent).toBe(LONG);
+    expect(document.body.querySelector<HTMLElement>(".hk-popover-panel")!.classList.contains("hk-is-sheet")).toBe(true);
+  });
+
+  it("closes the reveal when its layer stops being cut (retitle)", async () => {
+    setViewport(1200);
+    const layer = manager.register("modal", true, LONG);
+    manager.register("modal", true, "细节");
+    await mountStrip();
+    strip()!.querySelector<HTMLButtonElement>("button.hk-modal-breadcrumb-item")!.click();
+    await nextTick();
+    await nextTick();
+    expect(document.body.querySelector(".hk-modal-breadcrumb-reveal")).toBeTruthy();
+
+    // The owner renames the window to something that fits: the crumb is
+    // plain text again, so an open panel would be anchored to nothing while
+    // showing a name that no longer exists.
+    manager.setTitle(layer.id, "短标题");
+    await nextTick();
+    await nextTick();
+    expect(strip()!.querySelectorAll("button.hk-modal-breadcrumb-item")).toHaveLength(0);
+    expect(document.body.querySelector(".hk-modal-breadcrumb-reveal")).toBeNull();
+  });
+
+  it("follows a retitle that is still cut", async () => {
+    setViewport(1200);
+    const layer = manager.register("modal", true, LONG);
+    manager.register("modal", true, "细节");
+    await mountStrip();
+    strip()!.querySelector<HTMLButtonElement>("button.hk-modal-breadcrumb-item")!.click();
+    await nextTick();
+    await nextTick();
+    const longer = "另一个非常长的层级标题占位一二三四五";
+    manager.setTitle(layer.id, longer);
+    await nextTick();
+    await nextTick();
+    expect(document.body.querySelector(".hk-modal-breadcrumb-reveal")!.textContent).toBe(longer);
+  });
+
+  it("does not reopen the reveal after the strip comes back", async () => {
+    // The strip unmounts when the stack drops to one layer: the reveal goes
+    // with it (its surface is rendered inside), and a stale `revealed` would
+    // otherwise spring back — anchored to the element that no longer exists
+    // — the moment another window opens (review round two).
+    setViewport(1200);
+    manager.register("modal", true, LONG);
+    const other = manager.register("modal", true, "细节");
+    await mountStrip();
+    strip()!.querySelector<HTMLButtonElement>("button.hk-modal-breadcrumb-item")!.click();
+    await nextTick();
+    await nextTick();
+    expect(document.body.querySelector(".hk-modal-breadcrumb-reveal")).toBeTruthy();
+
+    manager.unregister(other.id); // one layer left: the strip goes away
+    await nextTick();
+    expect(strip()).toBeNull();
+    manager.register("modal", true, "新来的层级");
+    await nextTick();
+    await nextTick();
+    expect(strip()).not.toBeNull();
+    expect(document.body.querySelector(".hk-modal-breadcrumb-reveal")).toBeNull();
+  });
+
+  it("closes the anchored reveal when its crumb folds behind the trigger", async () => {
+    // A fold that unmounts the anchor would leave the anchored panel
+    // measuring a detached 0×0 rect on its next reposition, which parks it
+    // in the viewport corner (review round two). The sheet form needs no
+    // anchor and keeps the name (see the phone test above).
+    setViewport(1200);
+    manager.register("modal", true, LONG);
+    manager.register("modal", true, "第二个很长的层级标题占位一二三");
+    manager.register("modal", true, "第三个很长的层级标题占位一二三");
+    manager.register("modal", true, "细节");
+    await mountStrip();
+    expect(more()).toBeNull();
+    strip()!.querySelector<HTMLButtonElement>("button.hk-modal-breadcrumb-item")!.click();
+    await nextTick();
+    await nextTick();
+    expect(document.body.querySelector(".hk-modal-breadcrumb-reveal")).toBeTruthy();
+
+    // More windows push the tapped crumb behind the trigger (the fold is
+    // re-decided a tick after the labels land, then rendered).
+    STACK_TITLES.forEach((title) => manager.register("modal", true, title));
+    await until(() => more() !== null, 300);
+    expect(more()).not.toBeNull();
+    expect(strip()!.querySelector<HTMLButtonElement>("button.hk-modal-breadcrumb-item")).not.toBeNull();
+    expect(document.body.querySelector(".hk-modal-breadcrumb-reveal")).toBeNull();
+  });
+
+  it("closes an open reveal when the folded-layers menu opens", async () => {
+    // On a phone the strip paints above the sheet's scrim, so its trigger
+    // stays tappable while a reveal is docked (review round two). The menu
+    // must take over from the reveal, not stack on top of it: one Escape,
+    // one surface.
+    setViewport(360);
+    [LONG, LONG, LONG, LONG].forEach((title, i) =>
+      manager.register("modal", true, `${i}：${title}`),
+    );
+    await mountStrip();
+    expect(more()).not.toBeNull();
+    strip()!.querySelector<HTMLButtonElement>("button.hk-modal-breadcrumb-item")!.click();
+    await until(() => document.body.querySelector(".hk-modal-breadcrumb-reveal") !== null);
+    expect(more()!.getAttribute("aria-expanded")).toBe("false");
+
+    more()!.click();
+    await nextTick();
+    await nextTick();
+    expect(more()!.getAttribute("aria-expanded")).toBe("true");
+    // The reveal's own sheet plays its leave out before the DOM drops it —
+    // and with nothing closing it, it never does (this assertion is what
+    // pins the symmetric close).
+    await until(() => document.body.querySelector(".hk-modal-breadcrumb-reveal") === null, 900);
+    expect(document.body.querySelector(".hk-modal-breadcrumb-reveal")).toBeNull();
+  });
+
+  it("closes whichever surface is open on Escape", async () => {
+    setViewport(1200);
+    STACK_TITLES.forEach((title) => manager.register("modal", true, title));
+    manager.register("modal", true, "细节");
+    await mountStrip();
+
+    // The folded-layers menu (anchored: its panel takes no focus, so the
+    // strip owns the key).
+    more()!.click();
+    await nextTick();
+    await nextTick();
+    expect(more()!.getAttribute("aria-expanded")).toBe("true");
+    document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
+    await nextTick();
+    expect(more()!.getAttribute("aria-expanded")).toBe("false");
+
+    // The revealed name.
+    strip()!.querySelector<HTMLButtonElement>("button.hk-modal-breadcrumb-item")!.click();
+    await nextTick();
+    await nextTick();
+    expect(document.body.querySelector(".hk-modal-breadcrumb-reveal")).toBeTruthy();
+    document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
+    await nextTick();
+    expect(document.body.querySelector(".hk-modal-breadcrumb-reveal")).toBeNull();
+  });
+
+  it("closes the reveal when its layer leaves the stack", async () => {
+    setViewport(1200);
+    const layer = manager.register("modal", true, LONG);
+    manager.register("modal", true, "细节");
+    await mountStrip();
+    strip()!.querySelector<HTMLButtonElement>("button.hk-modal-breadcrumb-item")!.click();
+    await nextTick();
+    await nextTick();
+    expect(document.body.querySelector(".hk-modal-breadcrumb-reveal")).toBeTruthy();
+
+    // The window closes under the open panel: there is no name left to
+    // reveal.
+    manager.unregister(layer.id);
+    await nextTick();
+    await nextTick();
+    expect(document.body.querySelector(".hk-modal-breadcrumb-reveal")).toBeNull();
+  });
+
+  it("opens the reveal instead of the hidden-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).
+    setViewport(800);
+    STACK_TITLES.forEach((title) => manager.register("modal", true, title));
+    manager.register("modal", true, "细节");
+    await mountStrip();
+    more()!.click();
+    await nextTick();
+    await nextTick();
+    expect(menuRows().length).toBeGreaterThan(0);
+    expect(more()!.getAttribute("aria-expanded")).toBe("true");
+
+    strip()!.querySelector<HTMLButtonElement>("button.hk-modal-breadcrumb-item")!.click();
+    await nextTick();
+    await nextTick();
+    expect(document.body.querySelector(".hk-modal-breadcrumb-reveal")).toBeTruthy();
+    expect(more()!.getAttribute("aria-expanded")).toBe("false");
+  });
+
   it("honours a narrower budget from the host", async () => {
     manager.register("modal", true, "自动化测试流水线冒烟");
     manager.register("modal", true, "细节");

package/src/components/HkModalBreadcrumb.tsx

@@ -14,6 +14,7 @@ import { useReportedTransition } from "../composables/useReportedTransition";
 import { scheduleEvery } from "../runtime/animationBus";
 import { ancestorZoom } from "../runtime/cssZoom";
 import { viewportGutterPx } from "../runtime/viewportGutter";
+import { useBreakpoint } from "../runtime/useBreakpoint";
 import { clampToDisplayWidth, displayWidthUnits, ELLIPSIS } from "../runtime/displayWidth";
 import HkPopover from "./HkPopover";
 import HkMenuPanel from "./HkMenuPanel";
@@ -69,6 +70,7 @@ export default defineComponent({
   setup(props) {
     const manager = usePopupManager();
     const { t } = useI18n();
+    const { isMobile } = useBreakpoint();
 
     /** Which entries the strip navigates. Windows (modal/drawer) always;
      *  dropdown-kind surfaces only while they BLOCK like a window — the
@@ -274,6 +276,12 @@ export default defineComponent({
 
     function openMenu(): void {
       if (!hidden.value.length) return;
+      // The two surfaces are never open together — and the symmetric close
+      // matters on a phone: the strip paints above the sheet's scrim, so
+      // its trigger stays tappable while a reveal is docked (review round
+      // two), and a menu opening underneath it would leave the pair
+      // fighting over one Escape.
+      revealed.value = null;
       menuItems.value = hidden.value.map(({ id, label }) => ({ id, label }));
       menuOpen.value = true;
     }
@@ -294,6 +302,79 @@ export default defineComponent({
       if (!stillFolded) menuOpen.value = false;
     });
 
+    // ── Truncated-name reveal ─────────────────────────────────────────
+    // A cut label travels whole to assistive tech, and the folded layers
+    // get the menu above — but a layer that is VISIBLE and still cut had no
+    // way to read it. Tapping such a crumb opens the same popover family
+    // (anchored under the crumb on desktop, bottom-up sheet on mobile) with
+    // the whole name, because the strip's own bar is not a place long text
+    // can be read from.
+    const revealed = ref<{ id: string; label: string } | null>(null);
+    const revealAnchor = ref<HTMLElement | null>(null);
+    const crumbEls = new Map<string, HTMLElement>();
+
+    function setCrumbEl(id: string, el: Element | null): void {
+      if (el) crumbEls.set(id, el as HTMLElement);
+      else crumbEls.delete(id);
+    }
+
+    function toggleReveal(crumb: Crumb): void {
+      if (revealed.value?.id === crumb.id) {
+        revealed.value = null;
+        return;
+      }
+      if (!crumbEls.has(crumb.id)) return;
+      menuOpen.value = false;
+      revealAnchor.value = crumbEls.get(crumb.id) ?? null;
+      revealed.value = { id: crumb.id, label: crumb.label };
+    }
+
+    // What keeps the reveal alive is the LAYER, never the fold: opening it
+    // on a phone docks a blocking sheet, which joins the stack the strip
+    // lists and re-decides the tail underneath — a fold that carried the
+    // tapped crumb behind the trigger used to close the surface in the same
+    // frame it opened (2026-09-16 review). It goes away when the layer
+    // itself does, and when the layer stops being cut in the first place
+    // (a retitle makes its crumb plain text again — an open panel would
+    // then be anchored to nothing while showing a name that no longer
+    // exists); a retitle that keeps cutting follows the live name.
+    watch([crumbs, tail], ([list, visibleTail]) => {
+      const open = revealed.value;
+      if (!open) return;
+      const crumb = list.find((entry) => entry.id === open.id);
+      if (!crumb || !crumb.truncated) {
+        revealed.value = null;
+        return;
+      }
+      // An ANCHORED panel whose crumb folded behind the trigger would keep
+      // a detached element as its anchor, and the next reposition (a
+      // resize, a panel resize) would measure a 0×0 rect and fly the panel
+      // into the viewport corner (review round two). The mobile sheet
+      // needs no anchor and keeps showing the name.
+      if (!isMobile.value && !visibleTail.some((entry) => entry.id === open.id)) {
+        revealed.value = null;
+        return;
+      }
+      if (crumb.label !== open.label) {
+        revealed.value = { id: crumb.id, label: crumb.label };
+      }
+    });
+
+    // Escape closes whichever strip surface is open. HkPopover owns Escape
+    // for its SHEET form (the panel takes focus there); the anchored form
+    // has no focusable panel, so a document listener covers both.
+    function onSurfaceKeydown(e: KeyboardEvent) {
+      if (e.key !== "Escape") return;
+      if (revealed.value) revealed.value = null;
+      else if (menuOpen.value) menuOpen.value = false;
+    }
+    const surfaceOpen = computed(() => revealed.value !== null || menuOpen.value);
+    watch(surfaceOpen, (open) => {
+      if (open) document.addEventListener("keydown", onSurfaceKeydown);
+      else document.removeEventListener("keydown", onSurfaceKeydown);
+    });
+    onBeforeUnmount(() => document.removeEventListener("keydown", onSurfaceKeydown));
+
     const topPx = ref(24);
     function resyncTop() {
       const app = document.getElementById(props.appRootId);
@@ -394,6 +475,7 @@ export default defineComponent({
           window.removeEventListener("resize", onViewportChange);
           releaseClone();
           menuOpen.value = false;
+          revealed.value = null;
           hiddenCount.value = 0;
         }
       },
@@ -502,16 +584,23 @@ export default defineComponent({
                 {/* A chevron separates two items — the FIRST rendered item
                     carries none, whether or not the trigger precedes it. */}
                 {(triggerShown.value || i > 0) && separator()}
-                <span class={itemClass(crumb)}>
-                  {crumb.truncated ? (
-                    <>
-                      <span aria-hidden="true">{crumb.text}</span>
-                      <span class="hk-modal-breadcrumb-sr-only">{crumb.label}</span>
-                    </>
-                  ) : (
-                    crumb.text
-                  )}
-                </span>
+                {crumb.truncated ? (
+                  // Cut label: tappable, and the full name is the button's
+                  // accessible name (a cut string is not a name).
+                  <button
+                    type="button"
+                    ref={(el) => setCrumbEl(crumb.id, el as Element | null)}
+                    class={`${itemClass(crumb)} hk-modal-breadcrumb-item-reveal`}
+                    aria-haspopup="dialog"
+                    aria-expanded={revealed.value?.id === crumb.id}
+                    aria-label={crumb.label}
+                    onClick={() => toggleReveal(crumb)}
+                  >
+                    {crumb.text}
+                  </button>
+                ) : (
+                  <span class={itemClass(crumb)}>{crumb.text}</span>
+                )}
               </span>
             ))}
           </nav>
@@ -542,6 +631,26 @@ export default defineComponent({
               ))}
             </HkMenuPanel>
           </HkPopover>
+          <HkPopover
+            modelValue={revealed.value !== null}
+            onUpdate:modelValue={(v: boolean) => {
+              if (!v) revealed.value = null;
+            }}
+            anchorRef={revealAnchor.value}
+            placement="bottom-start"
+            // Same clearance as the menu: the crumb sits inside the strip's
+            // own padding box, which paints above the anchored band.
+            offset={16}
+            sheetOnMobile
+            // The name is the surface's reason to exist, so it names it.
+            // The sheet heading ellipsises (it is chrome) — the panel body
+            // below carries the whole name and wraps.
+            title={revealed.value?.label ?? ""}
+          >
+            {revealed.value && (
+              <p class="hk-modal-breadcrumb-reveal">{revealed.value.label}</p>
+            )}
+          </HkPopover>
         </Teleport>
       ) : null;
   },