@adia-ai/web-components 0.8.26 → 0.8.27

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog — @adia-ai/web-components
 
+## [0.8.27] — 2026-08-05
+
+### Added
+- **`menu-item-ui` gains `subtitle` (+ a trailing slot)** — menu rows can carry a secondary line, unblocking composite menu rows without native `<button>` stamps (gh#616, PR #623).
+
+### Maintenance
+- **`components/` touched in this release window** (5 file(s), e.g. `menu/menu-item.a2ui.json`) — carried by the entries above.
+- **`dist/` bundles rebuilt** in this cut's window (4 file(s)) — regenerated from the source changes described above, not independent edits.
+
 ## [0.8.26] — 2026-08-05
 
 ### Fixed

package/components/menu/menu-item.a2ui.json

@@ -2,7 +2,7 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$id": "https://adiaui.dev/a2ui/v0_9/components/MenuItem.json",
   "title": "MenuItem",
-  "description": "Child of `<menu-ui>`. One actionable row inside a menu, with optional leading icon + label + value.",
+  "description": "Child of `<menu-ui>`. One actionable row inside a menu, with optional leading icon + label + subtitle + value.",
   "type": "object",
   "allOf": [
     {
@@ -26,6 +26,11 @@
       "type": "string",
       "default": ""
     },
+    "subtitle": {
+      "description": "Optional secondary description line rendered under the label.",
+      "type": "string",
+      "default": ""
+    },
     "text": {
       "description": "Item label text.",
       "type": "string",
@@ -73,8 +78,14 @@
       "icon": {
         "description": "Custom leading element override; falls through to `[icon]` prop if not slotted."
       },
+      "subtitle": {
+        "description": "Custom secondary-line content override; falls through to `[subtitle]` prop if not slotted."
+      },
       "text": {
         "description": "Custom label content; falls through to `[text]` prop if not slotted."
+      },
+      "trailing": {
+        "description": "Trailing element pinned to the far edge (shortcut hint, check mark)."
       }
     },
     "states": [],

package/components/menu/menu-item.yaml

@@ -13,7 +13,7 @@ component: MenuItem
 category: navigation
 version: 1
 description: |-
-  Child of `<menu-ui>`. One actionable row inside a menu, with optional leading icon + label + value.
+  Child of `<menu-ui>`. One actionable row inside a menu, with optional leading icon + label + subtitle + value.
 
 props:
   icon:
@@ -24,6 +24,10 @@ props:
     description: Item label text.
     type: string
     default: ""
+  subtitle:
+    description: Optional secondary description line rendered under the label.
+    type: string
+    default: ""
   value:
     description: Stable identifier emitted via the parent menu's `select` event.
     type: string
@@ -44,6 +48,10 @@ slots:
     description: Custom leading element override; falls through to `[icon]` prop if not slotted.
   text:
     description: Custom label content; falls through to `[text]` prop if not slotted.
+  subtitle:
+    description: Custom secondary-line content override; falls through to `[subtitle]` prop if not slotted.
+  trailing:
+    description: Trailing element pinned to the far edge (shortcut hint, check mark).
 
 a2ui:
   rules:

package/components/menu/menu.class.js

@@ -258,6 +258,7 @@ export class UIMenuItem extends UIElement {
   static properties = {
     icon:     { type: String,  default: '', reflect: true },
     text:     { type: String,  default: '', reflect: true },
+    subtitle: { type: String,  default: '', reflect: true },
     value:    { type: String,  default: '', reflect: true },
     variant:  { type: String,  default: 'default', reflect: true },
     disabled: { type: Boolean, default: false, reflect: true },
@@ -265,6 +266,11 @@ export class UIMenuItem extends UIElement {
 
   static template = () => null;
 
+  // Set when connected() stamped role="menuitem" itself; a consumer-provided
+  // role (e.g. admin-roster's role="menuitemradio", gh#616) is never touched
+  // — that consumer also owns tabindex and any checked-state aria.
+  #roleStamped = false;
+
   connected() {
     // role="menuitem" ONLY when actually inside a menu container. A menu-ui
     // closes by moving its items back into its own light DOM (see #hide()),
@@ -273,12 +279,16 @@ export class UIMenuItem extends UIElement {
     // open popover (role="menu") adopts items via appendChild, which re-fires
     // connected(), so the role re-applies when the menu opens and is dropped
     // again on close.
-    if (this.closest('[role="menu"], [role="menubar"]')) {
+    if (this.hasAttribute('role') && !this.#roleStamped) {
+      // Consumer-owned role — leave role/tabindex alone.
+    } else if (this.closest('[role="menu"], [role="menubar"]')) {
       this.setAttribute('role', 'menuitem');
+      this.#roleStamped = true;
       if (!this.hasAttribute('tabindex')) this.setAttribute('tabindex', '-1');
     } else {
       this.removeAttribute('role');
       this.removeAttribute('tabindex');
+      this.#roleStamped = false;
     }
     this.#stamp();
     this.#syncAria();
@@ -313,6 +323,13 @@ export class UIMenuItem extends UIElement {
       span.textContent = this.text;
       this.appendChild(span);
     }
+
+    if (this.subtitle && !this.#ownChild('[slot="subtitle"]')) {
+      const sub = this.#stampMark(document.createElement('span'));
+      sub.setAttribute('slot', 'subtitle');
+      sub.textContent = this.subtitle;
+      this.appendChild(sub);
+    }
   }
 
   #syncAria() {
@@ -340,6 +357,21 @@ export class UIMenuItem extends UIElement {
     const textEl = this.#ownChild('[slot="text"]');
     if (this.#wasStamped(textEl)) textEl.textContent = this.text;
 
+    // Sync subtitle — only touch elements we stamped.
+    const subEl = this.#ownChild('[slot="subtitle"]');
+    if (this.subtitle) {
+      if (subEl) {
+        if (this.#wasStamped(subEl)) subEl.textContent = this.subtitle;
+      } else {
+        const el = this.#stampMark(document.createElement('span'));
+        el.setAttribute('slot', 'subtitle');
+        el.textContent = this.subtitle;
+        this.appendChild(el);
+      }
+    } else if (this.#wasStamped(subEl)) {
+      subEl.remove();
+    }
+
     this.#syncAria();
   }
 }

package/components/menu/menu.css

@@ -136,6 +136,8 @@ menu-item-ui[variant="danger"]:hover [slot="icon"] {
 
     /* ── Typography ── */
     --menu-item-font-size:      var(--a-ui-size);
+    --menu-item-subtitle-size:  var(--a-ui-sm);
+    --menu-item-subtitle-fg:    var(--a-fg-muted);
 
     /* ── Transition ── */
     --menu-item-duration:       var(--a-duration-fast);
@@ -178,6 +180,47 @@ menu-item-ui[variant="danger"]:hover [slot="icon"] {
     white-space: nowrap;
   }
 
+  /* Trailing (shortcut hint, check mark) — pinned to the far edge */
+  [slot="trailing"] {
+    flex-shrink: 0;
+    margin-left: auto;
+  }
+
+  /* ── Subtitle — two-line anatomy ──
+     Content-driven: a present [slot="subtitle"] switches the row to a
+     grid so the subtitle sits under the label while icon and trailing
+     content span both lines. */
+  :scope:has(> [slot="subtitle"]) {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    column-gap: var(--menu-item-gap);
+    row-gap: 0;
+  }
+  :scope:has(> [slot="subtitle"]) > [slot="icon"] {
+    grid-column: 1;
+    grid-row: 1 / span 2;
+  }
+  :scope:has(> [slot="subtitle"]) > [slot="text"] {
+    grid-column: 2;
+    grid-row: 1;
+  }
+  :scope:has(> [slot="subtitle"]) > [slot="trailing"] {
+    grid-column: 3;
+    grid-row: 1 / span 2;
+    margin-left: 0;
+  }
+  :scope > [slot="subtitle"] {
+    grid-column: 2;
+    grid-row: 2;
+    min-width: 0;
+    font-size: var(--menu-item-subtitle-size);
+    color: var(--menu-item-subtitle-fg);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   /* ── Variant: danger ── */
   :scope[variant="danger"] {
     --menu-item-fg: var(--a-danger-bg);

package/components/menu/menu.d.ts

@@ -45,6 +45,8 @@ export class UIMenuItem extends UIElement {
   disabled: boolean;
   /** Optional leading Phosphor icon name. */
   icon: string;
+  /** Optional secondary description line rendered under the label. */
+  subtitle: string;
   /** Item label text. */
   text: string;
   /** Stable identifier emitted via the parent menu's `select` event. */