@adia-ai/web-components 0.7.14 → 0.7.16

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog — @adia-ai/web-components
 
+## [0.7.16] — 2026-06-08
+
+### Changed
+- **Dist bundles rebuilt — the CDN / bundle path now matches source.** `dist/web-components.min.{css,js}` + the `.sheet.js` twin were regenerated to carry the 0.7.15 `badge-ui` / `tag-ui` padding (`--a-space-2` → `--a-space-1-5`) plus JS that the 0.7.15 cut shipped stale (it never rebundled). Consumers via `@adia-ai/web-components/css/bundled` + `/js/bundled` were getting the pre-0.7.15 output. `check:css-bundles-fresh` + `check:js-bundles-fresh` now gate this in CI.
+
+## [0.7.15] — 2026-06-08
+
+### Added
+- **New `<menu-label-ui>` — labeled group headings inside `<menu-ui>`.** A co-located child of `<menu-ui>` (registered via `defineIfFree('menu-label-ui', UIMenuLabel)` in `menu.js`; `UIMenuLabel` declared in the parent `menu.d.ts` by dts-codegen, like `menu-item`/`menu-divider`) that renders a non-interactive section heading to group `<menu-item-ui>` rows under labeled headings. Files: `components/menu/{menu-label.yaml,menu-label.a2ui.json}`. (Powers the embedded-app HCC demo's grouped / by-flow menu.)
+
+### Changed
+- **`badge-ui` + `tag-ui` horizontal padding tightened** — `--badge-px` / `--tag-px` `var(--a-space-2)` → `var(--a-space-1-5)` for a snugger chip that reads better in dense rows; vertical padding unchanged.
+
 ## [0.7.14] — 2026-06-08
 
 ### Fixed

package/components/badge/badge.css

@@ -4,7 +4,7 @@
     --badge-bg:        var(--a-bg-muted);
     --badge-fg:        var(--a-fg);
     --badge-radius:    var(--a-radius-md);
-    --badge-px:        var(--a-space-2);
+    --badge-px:        var(--a-space-1-5);
     --badge-py:        2px;
     --badge-gap:       var(--a-space-1);
     --badge-font-size: var(--a-ui-sm);

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

@@ -0,0 +1,66 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/MenuLabel.json",
+  "title": "MenuLabel",
+  "description": "Non-interactive group heading inside a `<menu-ui>` — a small uppercase kicker that names the group of `<menu-item-ui>` rows beneath it. Renders with role=\"presentation\" so the menu's roving focus skips it.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "MenuLabel"
+    },
+    "text": {
+      "description": "The group label. Stamped into a `<span slot=\"text\">`; consumer-provided slot content wins.",
+      "type": "string",
+      "default": ""
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "navigation",
+    "composes": [],
+    "events": {},
+    "examples": [],
+    "keywords": [
+      "menu-label",
+      "menu-group",
+      "section-header",
+      "menu-heading"
+    ],
+    "name": "UIMenuLabel",
+    "related": [
+      "Menu",
+      "MenuItem",
+      "MenuDivider"
+    ],
+    "slots": {
+      "text": {
+        "description": "Custom label content; falls through to the `[text]` prop if not slotted."
+      }
+    },
+    "states": [],
+    "status": "stable",
+    "synonyms": {
+      "menu-label": [
+        "menu-group-label",
+        "menu-section-header",
+        "menu-heading"
+      ]
+    },
+    "tag": "menu-label-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/menu/menu-label.yaml

@@ -0,0 +1,55 @@
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+#
+# Authored alongside UIMenuDivider as the labeled-group counterpart: a divider
+# SEPARATES groups, a label NAMES one. Ships as a sibling class in
+# menu/menu.class.js + is registered alongside UIMenu + UIMenuItem.
+
+# Child component of <menu-ui>. Surface only inside that parent.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: UIMenuLabel
+tag: menu-label-ui
+status: stable
+component: MenuLabel
+category: navigation
+version: 1
+description: |-
+  Non-interactive group heading inside a `<menu-ui>` — a small uppercase kicker that names the group of `<menu-item-ui>` rows beneath it. Renders with role="presentation" so the menu's roving focus skips it.
+
+props:
+  text:
+    description: The group label. Stamped into a `<span slot="text">`; consumer-provided slot content wins.
+    type: string
+    default: ""
+slots:
+  text:
+    description: Custom label content; falls through to the `[text]` prop if not slotted.
+
+a2ui:
+  rules:
+    - >-
+      <menu-label-ui> MUST be a direct child of <menu-ui>; like menu-item-ui
+      and menu-divider-ui it is hoisted into the top-layer popover via
+      <menu-ui>'s direct-descendant query — a label nested elsewhere renders
+      outside the popover.
+    - >-
+      Use a label to NAME a group and <menu-divider-ui> to SEPARATE groups.
+      The common pattern is one label at the top of each group with dividers
+      between groups; avoid a label with no items beneath it.
+    - >-
+      Non-interactive: role="presentation", no [value], fires no events, and
+      the menu's keyboard focus skips it. For a selectable row use
+      <menu-item-ui>; for an unavailable action use <menu-item-ui disabled>.
+
+keywords:
+  - menu-label
+  - menu-group
+  - section-header
+  - menu-heading
+
+related:
+  - Menu
+  - MenuItem
+  - MenuDivider
+
+synonyms:
+  menu-label: [menu-group-label, menu-section-header, menu-heading]

package/components/menu/menu.class.js

@@ -93,7 +93,7 @@ export class UIMenu extends UIElement {
     // → an empty popover (FEEDBACK-92). Skip anything already relocated into
     // the popover so a re-entrant #show() (reactive re-render while open)
     // doesn't reorder items. Mirrors the descendant query #hide() already uses.
-    const items = this.querySelectorAll('menu-item-ui, menu-divider-ui');
+    const items = this.querySelectorAll('menu-item-ui, menu-divider-ui, menu-label-ui');
     for (const item of items) {
       if (!pop.contains(item)) pop.appendChild(item);
     }
@@ -130,7 +130,7 @@ export class UIMenu extends UIElement {
     if (pop) {
       if (pop.matches(':popover-open')) pop.hidePopover?.();
       // Move items back to host (before the popover div) so next open can re-adopt them.
-      const items = pop.querySelectorAll('menu-item-ui, menu-divider-ui');
+      const items = pop.querySelectorAll('menu-item-ui, menu-divider-ui, menu-label-ui');
       for (const item of items) this.insertBefore(item, pop);
     }
 
@@ -352,3 +352,38 @@ export class UIMenuDivider extends UIElement {
     this.setAttribute('role', 'separator');
   }
 }
+
+export class UIMenuLabel extends UIElement {
+  static properties = {
+    text: { type: String, default: '', reflect: true },
+  };
+
+  static template = () => null;
+
+  connected() {
+    // Non-interactive group heading. role="presentation" so the menu's roving
+    // focus (which queries menu-item-ui only) skips it and a screen reader does
+    // not announce it as an actionable row — it visually labels the group below
+    // it (use a divider to separate groups; a label to name one).
+    this.setAttribute('role', 'presentation');
+    this.#stamp();
+  }
+
+  // Mirror menu-item-ui: stamp a <span slot="text"> from [text]; never touch a
+  // consumer-provided [slot="text"] (ADR-0010, slot content is source of truth).
+  #stamp() {
+    if (this.querySelector(':scope > [slot="text"]')) return;
+    if (this.text) {
+      const span = document.createElement('span');
+      span.setAttribute('slot', 'text');
+      span.dataset.menuLabelStamped = '1';
+      span.textContent = this.text;
+      this.appendChild(span);
+    }
+  }
+
+  render() {
+    const span = this.querySelector(':scope > [slot="text"]');
+    if (span?.dataset.menuLabelStamped === '1') span.textContent = this.text;
+  }
+}

package/components/menu/menu.css

@@ -34,8 +34,10 @@
      are neither `:scope >` children nor under a `:scope > [role]` wrapper. */
   :scope > menu-item-ui,
   :scope > menu-divider-ui,
+  :scope > menu-label-ui,
   :scope > [role="presentation"] menu-item-ui,
-  :scope > [role="presentation"] menu-divider-ui {
+  :scope > [role="presentation"] menu-divider-ui,
+  :scope > [role="presentation"] menu-label-ui {
     display: none;
   }
 }
@@ -200,3 +202,30 @@ menu-item-ui[variant="danger"]:hover [slot="icon"] {
     border: none;
   }
 }
+
+@scope (menu-label-ui) {
+  :where(:scope) {
+    /* ── Layout ── */
+    --menu-label-px: var(--a-space-2);
+    --menu-label-pt: var(--a-space-2);
+    --menu-label-pb: var(--a-space-1);
+  }
+
+  :scope {
+    box-sizing: border-box;
+    display: block;
+    padding: var(--menu-label-pt) var(--menu-label-px) var(--menu-label-pb);
+    /* Section-header look — matches <text-ui variant="kicker"> (same tokens). */
+    font-family: var(--a-kicker-family);
+    font-weight: var(--a-kicker-weight);
+    font-size: var(--a-kicker-size);
+    line-height: var(--a-kicker-leading);
+    letter-spacing: var(--a-kicker-tracking);
+    text-transform: uppercase;
+    color: var(--a-kicker-color);
+    cursor: default;
+    user-select: none;
+  }
+
+  [slot="text"] { display: block; }
+}

package/components/menu/menu.d.ts

@@ -52,3 +52,8 @@ export class UIMenuItem extends UIElement {
   /** Semantic variant. */
   variant: 'default' | 'danger';
 }
+
+export class UIMenuLabel extends UIElement {
+  /** The group label. Stamped into a `<span slot="text">`; consumer-provided slot content wins. */
+  text: string;
+}

package/components/menu/menu.js

@@ -10,10 +10,11 @@
  */
 
 import { defineIfFree } from '../../core/register.js';
-import { UIMenu, UIMenuItem, UIMenuDivider } from './menu.class.js';
+import { UIMenu, UIMenuItem, UIMenuDivider, UIMenuLabel } from './menu.class.js';
 
 defineIfFree('menu-ui', UIMenu);
 defineIfFree('menu-item-ui', UIMenuItem);
 defineIfFree('menu-divider-ui', UIMenuDivider);
+defineIfFree('menu-label-ui', UIMenuLabel);
 
-export { UIMenu, UIMenuItem, UIMenuDivider };
+export { UIMenu, UIMenuItem, UIMenuDivider, UIMenuLabel };

package/components/menu/menu.test.js

@@ -128,3 +128,49 @@ describe('<menu-ui> collects dynamically-rendered items (FEEDBACK-92)', () => {
     expect(order).toEqual(['1', '2']);
   });
 });
+
+describe('<menu-label-ui> group heading', () => {
+  let host;
+  beforeEach(() => { host = document.createElement('div'); document.body.appendChild(host); });
+  afterEach(() => host.remove());
+
+  it('hoists labels into the popover, stamps [text], and marks them presentational', async () => {
+    const menu = document.createElement('menu-ui');
+    menu.innerHTML = `
+      <button-ui slot="trigger" text="Open"></button-ui>
+      <menu-label-ui text="Group A"></menu-label-ui>
+      <menu-item-ui text="One" value="1"></menu-item-ui>
+      <menu-divider-ui></menu-divider-ui>
+      <menu-label-ui text="Group B"></menu-label-ui>
+      <menu-item-ui text="Two" value="2"></menu-item-ui>`;
+    host.appendChild(menu);
+    await settle();
+    menu.open = true;
+    await settle();
+
+    const pop = menu.querySelector('[data-menu-popover]');
+    const labels = pop.querySelectorAll('menu-label-ui');
+    expect(labels.length).toBe(2);
+    expect(labels[0].getAttribute('role')).toBe('presentation');
+    expect(labels[0].textContent.trim()).toBe('Group A');
+    expect(labels[1].textContent.trim()).toBe('Group B');
+  });
+
+  it('is non-interactive — outside the menuitem set the roving focus queries', async () => {
+    const menu = document.createElement('menu-ui');
+    menu.innerHTML = `
+      <button-ui slot="trigger" text="Open"></button-ui>
+      <menu-label-ui text="Heading"></menu-label-ui>
+      <menu-item-ui text="One" value="1"></menu-item-ui>`;
+    host.appendChild(menu);
+    await settle();
+    menu.open = true;
+    await settle();
+
+    const pop = menu.querySelector('[data-menu-popover]');
+    // A label is neither a menu-item-ui nor role="menuitem", so #enabledItems()
+    // (a `menu-item-ui` query) never lands arrow-key focus on it.
+    expect(pop.querySelector('menu-label-ui[role="menuitem"]')).toBeNull();
+    expect(pop.querySelectorAll('menu-item-ui').length).toBe(1);
+  });
+});

package/components/tag/tag.css

@@ -11,7 +11,7 @@ tag-ui[removable]:not([disabled]):hover {
     --tag-fg:           var(--a-fg);
     --tag-border:       transparent;
     --tag-radius:       var(--a-radius-full);
-    --tag-px:           var(--a-space-2);
+    --tag-px:           var(--a-space-1-5);
     --tag-py:           0.125rem;
     --tag-gap:          var(--a-space-1);
     --tag-font:         var(--a-ui-sm);