@adia-ai/web-components 0.7.13 → 0.7.15

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog — @adia-ai/web-components
 
+## [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
+- **`input-ui`/`textarea-ui` `.value` property binding set before upgrade is no longer dropped.** A `.value=${x}` (or any reactive property) assigned during template stamp *before* the element upgrades landed as a pre-upgrade own data-property that `installProps`' `Object.defineProperty` clobbered with the signal default — so the field rendered blank while `value="${x}"` (attribute) worked, and `<select-ui>` was unaffected (inconsistent). `installProps` now captures + reifies the pre-upgrade value (WHATWG upgrade-a-property pattern), fixing it for `value` and every UIElement property. (color-app FEEDBACK-99; covered by `core/element.test.js`.)
+
 ## [0.7.13] — 2026-06-06
 
 ### 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);

package/core/element.js

@@ -34,6 +34,19 @@ function installProps(el, props) {
   for (const [key, cfg] of Object.entries(props)) {
     const attr = cfg.attribute ?? key.toLowerCase();
     const type = cfg.type ?? String;
+    // Lazy property upgrade: a property assigned on the instance BEFORE it
+    // upgraded (a template engine sets `.prop=${v}` during stamp — possibly
+    // before the element is defined; see the property-binding path in
+    // template.js which sets `el[name] = v` regardless of upgrade state)
+    // lives as an own data-property. The defineProperty below would clobber it
+    // with the signal default. Capture it and reify it into the signal so the
+    // value survives upgrade (WHATWG upgrade-a-property pattern). Fixes
+    // input-ui/textarea-ui `.value=${x}`. (A reflect:true prop set pre-upgrade
+    // reifies its value but won't update its attribute until the next set —
+    // setAttribute is a no-op in the upgrade constructor; a rare, fine corner.)
+    const hasPre = Object.prototype.hasOwnProperty.call(el, key);
+    const preValue = hasPre ? el[key] : undefined;
+    if (hasPre) delete el[key];
     const sig = signal(cfg.default ?? undefined);
     el[SIG].set(key, sig);
     Object.defineProperty(el, key, {
@@ -47,6 +60,7 @@ function installProps(el, props) {
       },
       configurable: true,
     });
+    if (hasPre) sig.value = preValue;
   }
 }
 

package/core/element.test.js

@@ -63,6 +63,23 @@ describe('UIElement — properties', () => {
     expect(el.label).toBe('hi');
   });
 
+  // FEEDBACK-99 (color-app, 2026-06-07): a property assigned on the instance
+  // BEFORE upgrade — template engines set `.prop=${v}` during stamp, possibly
+  // before the element is defined (see template.js property-binding path) —
+  // must survive upgrade, not be clobbered by the signal default. WHATWG
+  // "upgrade a property" pattern, here in installProps. Fixes input-ui `.value`.
+  it('reifies a property set on the instance before upgrade (lazy upgrade)', () => {
+    const tag = `test-el-${++registrationCounter}`;
+    const el = document.createElement(tag);   // undefined tag → un-upgraded
+    document.body.appendChild(el);
+    el.value = 'pre-upgrade';                  // own data-property, no accessor yet
+    class El extends UIElement {
+      static properties = { value: { type: String, default: '' } };
+    }
+    customElements.define(tag, El);            // upgrade → installProps runs
+    expect(el.value).toBe('pre-upgrade');      // reified, not clobbered to ''
+  });
+
   it('reflects Boolean properties to HTML attributes when reflect: true', () => {
     class El extends UIElement {
       static properties = { disabled: { type: Boolean, default: false, reflect: true } };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.7.13",
+  "version": "0.7.15",
   "description": "AdiaUI web components \u2014 vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-runtime.",
   "type": "module",
   "types": "./index.d.ts",