@adia-ai/web-components 0.0.26 → 0.0.28

package/components/agent-artifact/agent-artifact.a2ui.json

@@ -32,7 +32,7 @@
       "default": ""
     },
     "kind": {
-      "description": "Uppercase badge label.",
+      "description": "Badge label; value is normalized to uppercase before rendering.",
       "type": "string",
       "default": ""
     },

package/components/agent-artifact/agent-artifact.css

@@ -13,6 +13,7 @@
     --agent-artifact-fg-muted:          var(--a-fg-muted);
     --agent-artifact-border:            var(--a-border-subtle);
     --agent-artifact-header-bg:         var(--a-bg);
+    --agent-artifact-header-bg-hover:   var(--a-bg-hover);
 
     /* ── Typography ── */
     --agent-artifact-title-size:        var(--a-ui-md);
@@ -46,6 +47,16 @@
     cursor: pointer;
     user-select: none;
     min-width: 0;
+    transition: background var(--agent-artifact-duration);
+  }
+
+  [data-artifact-header]:hover {
+    background: var(--agent-artifact-header-bg-hover);
+  }
+
+  [data-artifact-header]:focus-visible {
+    outline: none;
+    box-shadow: var(--a-focus-ring) inset;
   }
 
   [data-artifact-icon] {

package/components/agent-artifact/agent-artifact.js

@@ -17,7 +17,8 @@
  *
  * Attributes:
  *   title       — header title (string)
- *   kind        — small uppercase badge, e.g. "A2UI", "JSON", "TICKET"
+ *   kind        — small badge, e.g. "A2UI", "JSON", "TICKET" (value is
+ *                 normalized to uppercase before rendering)
  *   icon        — icon-ui name for the header
  *   collapsed   — start collapsed (body hidden)
  *   tone        — neutral (default) | accent | warning | danger
@@ -59,6 +60,7 @@ class AdiaAgentArtifact extends AdiaElement {
 
   disconnected() {
     this.#headerEl?.removeEventListener('click', this.#onHeaderClick);
+    this.#headerEl?.removeEventListener('keydown', this.#onHeaderKey);
     this.#headerEl = this.#iconEl = this.#titleEl = null;
     this.#kindEl = this.#chevronEl = this.#bodyEl = null;
   }
@@ -73,6 +75,17 @@ class AdiaAgentArtifact extends AdiaElement {
     this.render();
   };
 
+  // Keyboard activation — Space/Enter toggle (matches role="button" semantics).
+  #onHeaderKey = (e) => {
+    if (e.key === ' ' || e.key === 'Enter') {
+      // Don't fire when the focus is on a slotted action button — let those
+      // handle their own activation.
+      if (e.target.closest('[slot="primary"], [slot="secondary"]')) return;
+      e.preventDefault();
+      this.#onHeaderClick(e);
+    }
+  };
+
   render() {
     if (!this.#headerEl) return;
 
@@ -95,6 +108,9 @@ class AdiaAgentArtifact extends AdiaElement {
     if (this.#bodyEl) {
       this.#bodyEl.hidden = this.collapsed;
     }
+    if (this.#headerEl) {
+      this.#headerEl.setAttribute('aria-expanded', String(!this.collapsed));
+    }
   }
 
   #build() {
@@ -120,10 +136,15 @@ class AdiaAgentArtifact extends AdiaElement {
 
     this.innerHTML = '';
 
-    // Header
+    // Header — keyboard-focusable button-style row that toggles collapsed.
+    // role/tabindex make Space/Enter activate it the same as click.
     this.#headerEl = document.createElement('div');
     this.#headerEl.setAttribute('data-artifact-header', '');
+    this.#headerEl.setAttribute('role', 'button');
+    this.#headerEl.setAttribute('tabindex', '0');
+    this.#headerEl.setAttribute('aria-expanded', String(!this.collapsed));
     this.#headerEl.addEventListener('click', this.#onHeaderClick);
+    this.#headerEl.addEventListener('keydown', this.#onHeaderKey);
 
     this.#iconEl = document.createElement('icon-ui');
     this.#iconEl.setAttribute('data-artifact-icon', '');

package/components/agent-artifact/agent-artifact.yaml

@@ -9,7 +9,7 @@ version: 1
 description: Inline container for structured agent artifacts (A2UI, JSON, tickets).
 props:
   kind:
-    description: Uppercase badge label.
+    description: Badge label; value is normalized to uppercase before rendering.
     type: string
     default: ""
   collapsed:

package/components/agent-questions/agent-questions.css

@@ -63,7 +63,13 @@
 
   [data-questions-option] {
     display: flex;
-    align-items: center;
+    /* Top-align so the leading icon stays with the label's first line
+       when a description wraps below; we restore visual centering on
+       the icon and check by nudging them to the label's first-line
+       center via margin-top. Centering the whole row dragged the icon
+       down to the body's vertical midpoint, which sat between label
+       and description rather than on the label. */
+    align-items: start;
     gap: var(--agent-questions-option-gap);
     padding: var(--agent-questions-option-padding);
     border: 1px solid var(--agent-questions-option-border);
@@ -101,6 +107,16 @@
 
   [data-questions-option-icon] {
     flex-shrink: 0;
+    /* Align the leading icon's center with the label's first-line
+       center. `1.5em` matches the label's effective line-height
+       (label is `font-size:` only — line-height inherits as 1.5).
+       `var(--a-icon-size)` is icon-ui's rendered height. Centering
+       the icon inside one line-box of the label's height puts its
+       midpoint on the label's first-line midpoint. We use em on the
+       icon's own font-size (which icon-ui keeps at the option's
+       font-size) so the offset scales with whatever the consumer
+       sets `--agent-questions-label-size` to. */
+    margin-top: calc((1.5em - var(--a-icon-size, 1em)) / 2);
   }
 
   [data-questions-option-body] {
@@ -134,6 +150,9 @@
     background: transparent;
     opacity: 0;
     transition: opacity var(--agent-questions-duration) var(--agent-questions-easing);
+    /* Match the leading-icon offset so a row of [icon · label · check]
+       reads as one horizontal line aligned to the label's first line. */
+    margin-top: calc((1.5em - var(--agent-questions-check-size)) / 2);
   }
 
   [data-questions-option][data-selected] [data-questions-option-check] {

package/components/agent-reasoning/agent-reasoning.css

@@ -55,6 +55,17 @@
     user-select: none;
     padding-bottom: var(--a-space-1);
     color: var(--agent-reasoning-fg-muted);
+    border-radius: var(--a-radius-sm);
+    transition: color var(--agent-reasoning-duration) var(--agent-reasoning-easing);
+  }
+
+  [data-reasoning-summary]:hover {
+    color: var(--agent-reasoning-fg);
+  }
+
+  [data-reasoning-summary]:focus-visible {
+    outline: none;
+    box-shadow: var(--a-focus-ring);
   }
 
   [data-reasoning-summary] > [data-reasoning-check],

package/components/agent-reasoning/agent-reasoning.js

@@ -109,6 +109,7 @@ class AdiaAgentReasoning extends AdiaElement {
       this.#finishTimer = null;
     }
     this.#summaryEl?.removeEventListener('click', this.#onSummaryClick);
+    this.#summaryEl?.removeEventListener('keydown', this.#onSummaryKey);
     this.#bodyEl?.removeEventListener('timeline-toggle', this.#onStepToggle);
     this.#summaryEl = null;
     this.#bodyEl = null;
@@ -265,12 +266,26 @@ class AdiaAgentReasoning extends AdiaElement {
     this.#render();
   };
 
+  // Keyboard activation — Space/Enter toggle (matches role="button" semantics).
+  #onSummaryKey = (e) => {
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault();
+      this.#onSummaryClick();
+    }
+  };
+
   #buildShell() {
     this.innerHTML = '';
 
+    // Summary is a click-to-toggle row; mark up + key-activate so it
+    // behaves like a button under keyboard nav too.
     this.#summaryEl = document.createElement('div');
     this.#summaryEl.setAttribute('data-reasoning-summary', '');
+    this.#summaryEl.setAttribute('role', 'button');
+    this.#summaryEl.setAttribute('tabindex', '0');
+    this.#summaryEl.setAttribute('aria-expanded', String(!this.collapsed));
     this.#summaryEl.addEventListener('click', this.#onSummaryClick);
+    this.#summaryEl.addEventListener('keydown', this.#onSummaryKey);
     this.appendChild(this.#summaryEl);
 
     this.#bodyEl = document.createElement('div');
@@ -341,6 +356,7 @@ class AdiaAgentReasoning extends AdiaElement {
     `;
 
     this.#bodyEl.hidden = this.collapsed;
+    this.#summaryEl.setAttribute('aria-expanded', String(!this.collapsed));
     if (this.collapsed) return;
 
     // Body rendering: we group contiguous steps into timeline-ui blocks and

package/components/agent-trace/agent-trace.css

@@ -43,9 +43,23 @@
     gap: var(--agent-trace-inline-gap);
     cursor: pointer;
     white-space: nowrap;
+    border-radius: var(--a-radius-sm);
+    padding: var(--a-space-0-5) var(--a-space-1);
+    margin: calc(var(--a-space-0-5) * -1) calc(var(--a-space-1) * -1);
+    transition: background var(--agent-trace-chevron-dur);
+  }
+
+  [data-trace-root] > summary:hover {
+    background: var(--a-bg-subtle);
+  }
+
+  [data-trace-root] > summary:focus-visible {
+    outline: none;
+    box-shadow: var(--a-focus-ring);
   }
 
   [data-trace-root] > summary::-webkit-details-marker { display: none; }
+  [data-trace-root] > summary::marker { content: ''; }
 
   [data-trace-status] {
     flex: 1;
@@ -92,35 +106,40 @@
     margin-block-start: var(--agent-trace-block-gap);
   }
 
-  /* Rows container — a stack; each row owns its own grid. This makes
-     expandable details elements play well, since <details> can't be a
-     grid item spanning multiple tracks cleanly. */
+  /* Rows container — one grid, every row participates via subgrid.
+     This is the only way to get score + detail to land on the same X
+     across all rows; per-row grids let `max-content` widen the score
+     track row-by-row, and "94/100" pushes its row's detail column ~16px
+     right of "7%"'s detail column. Subgrid pulls the track widths up
+     to the parent so every row sees the same column stops. */
   [data-trace-rows] {
     --trace-row-cols: var(--agent-trace-row-label-col) max-content 1fr;
-    display: flex;
-    flex-direction: column;
+    display: grid;
+    grid-template-columns: var(--trace-row-cols);
+    column-gap: var(--agent-trace-block-gap);
   }
 
   [data-trace-rows][data-has-details] {
     --trace-row-cols: var(--agent-trace-row-label-col) max-content 1fr auto;
   }
 
-  /* Each row's summary lays out the columns. For non-expandable rows
-     (plain divs), the row itself is the grid. For expandable rows
-     (<details>), the summary is the grid; the body is a block below. */
+  /* Each row + the headers row + each <details>'s <summary> all use
+     subgrid so they inherit the parent's column stops. <details> itself
+     is also a grid child so its open-state body can span all columns. */
   [data-trace-headers],
   div[data-trace-row],
+  details[data-trace-row],
   details[data-trace-row] > summary {
     display: grid;
-    grid-template-columns: var(--trace-row-cols);
+    grid-template-columns: subgrid;
+    grid-column: 1 / -1;
     column-gap: var(--agent-trace-block-gap);
     align-items: baseline;
     min-width: 0;
   }
 
-  details[data-trace-row] {
-    display: block;
-    min-width: 0;
+  details[data-trace-row] > [data-trace-row-body] {
+    grid-column: 1 / -1;
   }
 
   /* Column headers — small caps with subtle underline */
@@ -163,6 +182,11 @@
     background: var(--a-bg-subtle);
   }
 
+  details[data-trace-row] > summary:focus-visible {
+    outline: none;
+    box-shadow: var(--a-focus-ring);
+  }
+
   [data-trace-label] {
     color: var(--agent-trace-fg-subtle);
   }

package/components/alert/alert.a2ui.json

@@ -93,11 +93,17 @@
       "button"
     ],
     "slots": {
-      "default": {
-        "description": "Rich content for the alert body"
+      "action": {
+        "description": "Optional trailing action button (e.g. \"Refresh\", \"Status page\"). Right-aligned in the flex layout. See system-banners pattern for examples."
       },
-      "icon": {
-        "description": "Custom icon element"
+      "close": {
+        "description": "Close button. Stamped automatically when `closable` is set; the stamped element is `<button-ui slot=\"close\" icon=\"x\" variant=\"ghost\" size=\"sm\">`. Override by passing a custom `slot=\"close\"` button."
+      },
+      "content": {
+        "description": "Alert body. For single-line text use the `text=` attribute (alert.js stamps a `<span slot=\"content\">` automatically). For rich content with title + description, wrap in `<col-ui slot=\"content\">` — the alert root is `display: flex` row, so multiple bare children would lay out side-by-side instead of stacking."
+      },
+      "leading": {
+        "description": "Leading icon. Stamped automatically from the `icon=` attribute; consumers can override by passing a custom `<icon-ui slot=\"leading\">`."
       }
     },
     "states": [

package/components/alert/alert.css

@@ -65,6 +65,19 @@
     --alert-icon-fg: var(--a-danger-strong);
   }
 
+  /* `muted` and `neutral` are semantic aliases of the base — same tokens
+     as the default variant, declared explicitly so the yaml enum and the
+     CSS contract agree. Use cases: passive callouts (beta banners,
+     tertiary notes) where the alert should read as quiet chrome rather
+     than carrying tonal weight. */
+  :scope[variant="muted"],
+  :scope[variant="neutral"] {
+    --alert-bg:      var(--a-bg-muted);
+    --alert-fg:      var(--a-fg);
+    --alert-border:  var(--a-border-subtle);
+    --alert-icon-fg: var(--a-fg-muted);
+  }
+
   /* ── Slots ── */
   :scope [slot="leading"] {
     flex-shrink: 0;

package/components/alert/alert.js

@@ -4,7 +4,7 @@
  *
  * Inline alert banner with optional icon and close button.
  *
- * Variants: default, info, success, warning, danger
+ * Variants: default, info, success, warning, danger, muted, neutral
  * Slots: leading (icon), content (text), close (dismiss button)
  *
  * Events:

package/components/alert/alert.yaml

@@ -36,10 +36,27 @@ events:
   close:
     description: Fired when the close button is clicked
 slots:
-  default:
-    description: Rich content for the alert body
-  icon:
-    description: Custom icon element
+  content:
+    description: >-
+      Alert body. For single-line text use the `text=` attribute (alert.js
+      stamps a `<span slot="content">` automatically). For rich content
+      with title + description, wrap in `<col-ui slot="content">` — the
+      alert root is `display: flex` row, so multiple bare children would
+      lay out side-by-side instead of stacking.
+  leading:
+    description: >-
+      Leading icon. Stamped automatically from the `icon=` attribute;
+      consumers can override by passing a custom `<icon-ui slot="leading">`.
+  close:
+    description: >-
+      Close button. Stamped automatically when `closable` is set; the
+      stamped element is `<button-ui slot="close" icon="x" variant="ghost"
+      size="sm">`. Override by passing a custom `slot="close"` button.
+  action:
+    description: >-
+      Optional trailing action button (e.g. "Refresh", "Status page").
+      Right-aligned in the flex layout. See system-banners pattern for
+      examples.
 states:
   - name: idle
     description: Default, ready for interaction.

package/components/badge/badge.a2ui.json

@@ -61,8 +61,6 @@
         "warning",
         "danger",
         "primary",
-        "soft",
-        "outline",
         "muted",
         "neutral"
       ],

package/components/badge/badge.css

@@ -74,5 +74,25 @@
     --badge-fg: var(--a-danger-text);
   }
 
+  /* `primary` is the accent-filled variant — solid bg + on-accent text,
+     used for "PRO"-style emphasis chips that should read as a brand
+     stamp rather than tinted-on-canvas. Uses the L3 primary-* surface
+     matrix so it tracks the same accent-strong source as button-ui's
+     primary variant. */
+  :scope[variant="primary"] {
+    --badge-bg: var(--a-primary-bg);
+    --badge-fg: var(--a-primary-fg);
+  }
+
+  /* `muted` and `neutral` are semantic aliases of the base — same tokens
+     as the default variant, declared explicitly so the yaml enum and the
+     CSS contract agree. Use cases: passive metadata chips (counts, IDs,
+     "Not set" states) where the badge should read as quiet chrome. */
+  :scope[variant="muted"],
+  :scope[variant="neutral"] {
+    --badge-bg: var(--a-bg-muted);
+    --badge-fg: var(--a-fg);
+  }
+
   /* Size handled by universal [size] attribute system. */
 }

package/components/badge/badge.js

@@ -6,7 +6,7 @@
  *
  * Inline badge / tag. Pill-shaped, text rendered via CSS attr().
  *
- * Variants: default, accent, info, success, warning, danger
+ * Variants: default, accent, info, success, warning, danger, primary, muted, neutral
  * Sizes: sm, md (default)
  * Icon: optional leading icon (any registered icon name; "dot" for legend
  *       markers). Inherits the variant's foreground color so legend chips
@@ -36,7 +36,15 @@ class AdiaBadge extends AdiaElement {
   static template = () => null;
 
   connected() {
-    this.setAttribute('role', 'status');
+    /* Default role is `status` (matches badge's "passive callout" semantic
+       — a screen reader announces the badge text as a state without
+       interrupting). Consumers that wire interactivity (e.g.
+       `<chart-legend-ui>` toggling series) are free to set
+       `role="button"` (or any other role) before connection — we don't
+       overwrite an explicit consumer choice. */
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'status');
+    }
   }
 
   render() {

package/components/badge/badge.yaml

@@ -52,8 +52,6 @@ props:
       - warning
       - danger
       - primary
-      - soft
-      - outline
       - muted
       - neutral
 events: {}

package/components/breadcrumb/breadcrumb.a2ui.json

@@ -2,7 +2,7 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$id": "https://adiaui.dev/a2ui/v0_9/components/Breadcrumb.json",
   "title": "Breadcrumb",
-  "description": "Breadcrumb trail with auto-inserted separators.",
+  "description": "Breadcrumb trail with auto-inserted separators. Supports a leading icon (first child) and an overflow popover that collapses middle crumbs into a `…` menu.",
   "type": "object",
   "allOf": [
     {
@@ -13,6 +13,21 @@
     }
   ],
   "properties": {
+    "collapse": {
+      "description": "Collapse middle crumbs into a `…` overflow popover when there are 4+ items.",
+      "type": "boolean",
+      "default": false
+    },
+    "collapseKeepLeading": {
+      "description": "Number of leading items to keep visible when [collapse] is active. The first item (often a home/icon link) sits before the overflow popover.",
+      "type": "number",
+      "default": 1
+    },
+    "collapseKeepTrailing": {
+      "description": "Number of trailing items to keep visible when [collapse] is active. The last item is always the current page.",
+      "type": "number",
+      "default": 2
+    },
     "component": {
       "const": "Breadcrumb"
     },

package/components/breadcrumb/breadcrumb.css

@@ -75,4 +75,31 @@
     pointer-events: none;
     text-decoration: none;
   }
+
+  /* Items moved into the overflow popover are kept in the light DOM
+     so the consumer's order of truth stays intact; we only hide them
+     visually when [collapse] is active. */
+  [data-collapsed] {
+    display: none;
+  }
+
+  /* Overflow trigger — `<menu-ui data-overflow>` stamped between
+     the leading and trailing visible groups. Layout-wise it behaves
+     like any other [data-item], but the trigger button inside it
+     handles its own padding/focus, so we strip the item max-width to
+     let the `…` glyph size to its content. The popover surface and
+     the menu-item-ui rows inherit menu-ui's canonical styling — no
+     visual overrides needed here. */
+  [data-overflow] {
+    max-width: none;
+    overflow: visible;
+  }
+
+  /* Icon-leading shape — a `<icon-ui>` (or a link wrapping one) as
+     the first child should optical-center on the text baseline of
+     the rest of the row without inheriting the text-truncate cap. */
+  [data-item] > icon-ui:only-child,
+  a[data-item]:has(> icon-ui:only-child) {
+    max-width: none;
+  }
 }

package/components/breadcrumb/breadcrumb.js

@@ -1,8 +1,32 @@
+/**
+ * <breadcrumb-ui separator="/">
+ *   <a href="/"><icon-ui name="house"></icon-ui></a>
+ *   <a href="#">Workspace</a>
+ *   <span>Current page</span>
+ * </breadcrumb-ui>
+ *
+ * Trail with auto-inserted separators. Items can be plain elements or
+ * `<a href>` links; the last item is marked `aria-current="page"`.
+ *
+ * Variants:
+ *   • Default — text-only crumbs
+ *   • Icon-leading — first child is `<icon-ui>` (or a link wrapping one)
+ *   • Collapsed — `[collapse]` hides middle crumbs into a `…` overflow
+ *     popover; keeps `[collapse-keep-leading]` (default 1) and
+ *     `[collapse-keep-trailing]` (default 2) visible at the edges.
+ *
+ * The overflow uses `<popover-ui>` so it rides the top-layer (no
+ * z-index battles inside scrolling containers).
+ */
+
 import { AdiaElement } from '../../core/element.js';
 
 class AdiaBreadcrumb extends AdiaElement {
   static properties = {
-    separator: { type: String, default: '/', reflect: true },
+    separator:            { type: String,  default: '/', reflect: true },
+    collapse:             { type: Boolean, default: false, reflect: true },
+    collapseKeepLeading:  { type: Number,  default: 1, attribute: 'collapse-keep-leading', reflect: true },
+    collapseKeepTrailing: { type: Number,  default: 2, attribute: 'collapse-keep-trailing', reflect: true },
   };
 
   static template = () => null;
@@ -13,30 +37,84 @@ class AdiaBreadcrumb extends AdiaElement {
   }
 
   render() {
-    // Remove old separators
-    this.querySelectorAll('[data-sep]').forEach(el => el.remove());
+    // Strip prior chrome so render is idempotent across attribute changes.
+    this.querySelectorAll('[data-sep], [data-overflow]').forEach(el => el.remove());
 
-    const items = Array.from(this.children).filter(c => !c.hasAttribute('data-sep'));
+    const items = Array.from(this.children).filter(c =>
+      !c.hasAttribute('data-sep') && !c.hasAttribute('data-overflow')
+    );
     const last = items.length - 1;
 
+    // Reset per-item chrome
     items.forEach((child, i) => {
-      child.removeAttribute('data-separator');
       child.setAttribute('data-item', '');
+      child.removeAttribute('data-collapsed');
+      if (i === last) child.setAttribute('aria-current', 'page');
+      else child.removeAttribute('aria-current');
+    });
+
+    const keepLeading  = Math.max(0, this.collapseKeepLeading | 0);
+    const keepTrailing = Math.max(0, this.collapseKeepTrailing | 0);
+    const minLen = keepLeading + keepTrailing + 1;
+    const shouldCollapse = this.collapse && items.length >= Math.max(minLen, 4);
 
-      if (i === last) {
-        child.setAttribute('aria-current', 'page');
-      } else {
-        child.removeAttribute('aria-current');
-        // Insert separator span after this item (before next sibling)
-        if (!child.nextElementSibling?.hasAttribute('data-sep')) {
-          const sep = document.createElement('span');
-          sep.setAttribute('data-sep', '');
-          sep.setAttribute('aria-hidden', 'true');
-          sep.textContent = this.separator;
-          child.after(sep);
-        }
+    if (shouldCollapse) {
+      const collapsed = items.slice(keepLeading, items.length - keepTrailing);
+      collapsed.forEach(el => el.setAttribute('data-collapsed', ''));
+
+      const overflow = this.#buildOverflow(collapsed);
+      if (keepLeading > 0) items[keepLeading - 1].after(overflow);
+      else this.prepend(overflow);
+    }
+
+    // Stamp separators between every consecutive visible sibling.
+    const visible = Array.from(this.children).filter(c =>
+      !c.hasAttribute('data-sep') && !c.hasAttribute('data-collapsed')
+    );
+    for (let i = 0; i < visible.length - 1; i++) {
+      const sep = document.createElement('span');
+      sep.setAttribute('data-sep', '');
+      sep.setAttribute('aria-hidden', 'true');
+      sep.textContent = this.separator;
+      visible[i].after(sep);
+    }
+  }
+
+  #buildOverflow(collapsedItems) {
+    // Use <menu-ui> as the canonical popover-list primitive — same surface
+    // tokens as select-ui's listbox + menu-ui's action menu, with keyboard
+    // nav, top-layer rendering, and anchor positioning for free.
+    const menu = document.createElement('menu-ui');
+    menu.setAttribute('data-overflow', '');
+    menu.setAttribute('data-item', '');
+    menu.setAttribute('placement', 'bottom-start');
+
+    const trigger = document.createElement('button-ui');
+    trigger.setAttribute('slot', 'trigger');
+    trigger.setAttribute('text', '…');
+    trigger.setAttribute('variant', 'ghost');
+    trigger.setAttribute('size', 'sm');
+    trigger.setAttribute('aria-label', 'Show collapsed crumbs');
+    menu.appendChild(trigger);
+
+    for (const item of collapsedItems) {
+      const mi = document.createElement('menu-item-ui');
+      mi.setAttribute('text', item.textContent.trim());
+      // Encode the link target as the menu-item value; navigated on action.
+      if (item.tagName === 'A' && item.hasAttribute('href')) {
+        mi.setAttribute('value', item.getAttribute('href'));
       }
+      menu.appendChild(mi);
+    }
+
+    // menu-ui dispatches `action` with `detail: { value, text }` on item
+    // activation. Navigate to the encoded href; ignore placeholder `#`.
+    menu.addEventListener('action', (e) => {
+      const href = e.detail?.value;
+      if (href && href !== '#') window.location.href = href;
     });
+
+    return menu;
   }
 }