@adia-ai/web-components 0.8.20 → 0.8.22

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog — @adia-ai/web-components
 
+## [0.8.22] — 2026-07-29
+
+### Fixed
+- **`select-ui` action rows no longer read as selected in an uncommitted select** (`components/select/`; independent-review finding, 2026-07-29). Action rows stamped `data-value=""`, and since `value` defaults to `''`, the aria-selected sync marked every command row selected whenever nothing was committed — the default state of a user menu, so screen readers announced "Log out, selected" and the row rendered at selected weight. Action rows now carry no `data-value` at all, both aria-selected paths (initial stamp + sync loop) skip them, and the regression test covers the sync loop the original tests missed.
+
+### Changed
+- **`combobox-ui` single-select rows carry a radio indicator** (`components/combobox/`; operator ruling 2026-07-27, extended). `select-ui` adopted the indicator treatment in 0.8.17 — "selection rides the control, not a row tint" — but combobox was left tinting the committed row with `--a-ui-bg-selected`, so two sibling single-select surfaces disagreed about what *selected* looks like (the same divergence class gh#474 fixed between `form-popover-ui` and `select-ui`). Rows now stamp `[data-single-option]` + a leading `[data-radio]` (bordered circle, primary ring + centre dot when committed), mirroring select-ui's structure and CSS exactly. `--combobox-option-bg-selected` / `-fg-selected` remain consumer-overridable API, but their DEFAULTS move to the plain row colors — set `--combobox-option-bg-selected` to re-enable a tinted row. Hover/active feedback is restated on the selected row, since the 2-attribute selected rule outweighs the single-attribute `[data-active]` one (the trap select-ui hit when its tint was removed). Tests 15 → 17.
+
+### Maintenance
+- **`dist/` bundles rebuilt** in this cut's window (4 file(s)) — regenerated from the source changes described above, not independent edits.
+
+## [0.8.21] — 2026-07-28
+
+### Fixed
+- **`card-ui`: a `<span slot="heading">` finally reads as a heading** (gh issue 471, from the adiav2 admin modal-patterns gallery). Only the FOOTER heading rule set size/weight/color; the header's heading slot got grid placement and flex layout but no typography, so a bare span inherited body text while an `<h3 slot="heading">` looked right — the same slot, two different results depending on the tag. The header slot now carries `--card-heading-size` / `--card-heading-weight` (defaulting to modal-ui and drawer-ui's pair, so a card title, a dialog title, and a drawer title read at one weight) plus `--card-heading-fg`; native `h1`–`h6` and the `text-ui` heading variants are exempt from the size/weight so they keep their own scale.
+- **`card-ui` yaml↔CSS token drift** — the yaml documented `--card-heading-color` and `--card-heading-size`, neither of which existed in the CSS (the real color token is `--card-heading-fg`). The yaml now names the tokens that ship.
+- **`table-ui`: `col.minWidth`/`col.maxWidth` now reach the grid template** (gh issue 463, from the adiav2 admin table audit ADIA2-6847). Both props were parsed from `<col-def>` and documented in the yaml since the initial table cut, but `#buildGridTemplate()` only ever emitted `minmax(6rem, Nfr)` — so a flexible column could collapse to 96px and consumers routed around it with fixed px widths that overflow the container instead of distributing slack. Flexible tracks now render `minmax(minWidth ?? 6rem, maxWidth ?? (flex ?? 1)fr)`; explicit `width` and user resize still win.
+- **`table-ui[wrap]` breaks at word boundaries** — the wrap opt-in used `overflow-wrap: anywhere`, which both broke words mid-glyph ("deficienc / y") and collapsed the cell's min-content contribution to one glyph, letting flexible tracks shrink to their floor. Now `break-word`: whole words wrap first, and a token only breaks when it alone overflows the cell (URLs, ids).
+- **`select-ui` action rows no longer wear radio indicators** (`components/select/`; operator report 2026-07-28 from adia-v2). The 0.8.17 radio ruling stamps every single-select row `[data-radio]` — including `{action}` rows, which are COMMANDS (they dispatch the `action` event and never become the value), so user menus grew radios on "Account" / "Log out". Action rows now render `[data-action-option]`: icon + label, no indicator at all; selection rows beside them keep theirs. The branch precedes the `[multiple]` one, so a command row in a multi-select doesn't get a checkbox either (it never becomes part of the value — `#onOptionClick` always treated it as a command). The yaml documents the entry shape.
+- **Option-row leads can't stack above their label anymore** (`components/select/select.css`; the second adia-v2 report). The lead (`mark`/`avatar`/`icon`) is injected inside `[data-option-label]`, which was a plain block — `icon-ui` (inline-flex) and `<img>` (inline) rode the text line by accident, but `adia-mark-ui` is block-level per ADR-0037 and stacked above the text in the workspace switcher. The label span is now a centered flex row with the trigger's leading gap, which also makes lead-to-label spacing uniform across all three lead types.
+
+### Maintenance
+- **`dist/` bundles rebuilt** in this cut's window (4 file(s)) — regenerated from the source changes described above, not independent edits.
+
 ## [0.8.20] — 2026-07-28
 
 ### Fixed

package/components/card/card.a2ui.json

@@ -244,11 +244,14 @@
       "--card-divider-color": {
         "description": "Override divider border color"
       },
-      "--card-heading-color": {
-        "description": "Override heading color"
+      "--card-heading-fg": {
+        "description": "Override heading color (header and footer heading slots)"
       },
       "--card-heading-size": {
-        "description": "Override heading text size"
+        "description": "Override header heading text size — applies to a generic slot=\"heading\" container; native h1–h6 and text-ui heading variants keep their own scale"
+      },
+      "--card-heading-weight": {
+        "description": "Override header heading font weight — same scope as --card-heading-size"
       },
       "--card-inset": {
         "description": "Override --inset for all children"

package/components/card/card.css

@@ -18,6 +18,10 @@
     /* ── Typography ── */
     --card-font-size:         var(--a-body-size);
     --card-description-size:  var(--a-caption-size);
+    /* Header heading — matches modal-ui/drawer-ui's heading pair so a card
+       title, a dialog title, and a drawer title read at one weight. */
+    --card-heading-size:      var(--a-ui-lg);
+    --card-heading-weight:    var(--a-weight-semibold);
 
     /* ── Colors ── */
     --card-bg:                var(--md-sys-color-neutral-surface);
@@ -246,11 +250,21 @@
     line-height: 1.3;
     margin: 0;
   }
-  /* Heading slot is a flex container — can hold title + inline badges/metadata */
+  /* Heading slot is a flex container — can hold title + inline badges/metadata.
+     It also carries the heading's own typography: the slot is routinely a bare
+     <span slot="heading">Title</span>, which inherited body text because only
+     the FOOTER heading rule set size/weight/color (gh issue 471). Native
+     h1–h6 and the text-ui heading variants bring their own scale, so they keep
+     it — the tokens apply to the generic container only. */
   & > header > [slot="heading"] {
     display: flex;
     align-items: center;
     gap: var(--card-header-gap);
+    color: var(--card-heading-fg);
+  }
+  & > header > [slot="heading"]:not(:is(h1, h2, h3, h4, h5, h6, text-ui)) {
+    font-size: var(--card-heading-size);
+    font-weight: var(--card-heading-weight);
   }
   & > header:has(> [slot="icon"]) > :is([slot="heading"], h1, h2, h3, h4, h5, h6) { grid-column: 2; }
   & > header:has(> [slot="icon"]) > :is(text-ui[variant="display"], text-ui[variant="title"], text-ui[variant="heading"], text-ui[variant="subsection"]):not([slot]) { grid-column: 2; }

package/components/card/card.yaml

@@ -111,10 +111,12 @@ tokens:
     description: Override description color
   --card-divider-color:
     description: Override divider border color
-  --card-heading-color:
-    description: Override heading color
+  --card-heading-fg:
+    description: Override heading color (header and footer heading slots)
   --card-heading-size:
-    description: Override heading text size
+    description: Override header heading text size — applies to a generic slot="heading" container; native h1–h6 and text-ui heading variants keep their own scale
+  --card-heading-weight:
+    description: Override header heading font weight — same scope as --card-heading-size
   --card-inset:
     description: Override --inset for all children
   --card-radius:

package/components/combobox/combobox.a2ui.json

@@ -342,7 +342,7 @@
         "description": "Background for the currently active (arrow-navigated) option"
       },
       "--combobox-option-bg-selected": {
-        "description": "Background for the currently committed option"
+        "description": "Background for the currently committed option. Defaults to `transparent`: selection is shown by the leading radio indicator rather than a row tint, matching select-ui. Set this to re-enable a tinted selected row."
       },
       "--combobox-option-fg-active": {
         "description": "Foreground for the currently active option"

package/components/combobox/combobox.class.js

@@ -394,10 +394,20 @@ export class UICombobox extends UIFormElement {
       el.dataset.value = opt.value ?? '';
       if (opt.disabled) el.setAttribute('aria-disabled', 'true');
       if (opt.value === this.value) el.setAttribute('aria-selected', 'true');
-      // Single wrapping span: [role="option"] is display:flex, and a bare
-      // <mark> + text-run pair become SEPARATE flex items — flex drops the
-      // whitespace between them ("Ada Lovelace" rendered "AdaLovelace").
-      el.innerHTML = `<span data-option-label>${this.#renderOptionLabel(opt.label ?? opt.value)}</span>`;
+      // Selection rides a RADIO indicator, not a row tint (operator ruling
+      // 2026-07-27, the same one select-ui's single-select rows follow) —
+      // combobox was the last single-select surface still speaking the old
+      // language, which made two sibling controls disagree about what
+      // "selected" looks like. [data-single-option] is the structural hook
+      // CSS keys off, mirroring select-ui exactly.
+      //
+      // Single wrapping span for the LABEL: [role="option"] is display:flex,
+      // and a bare <mark> + text-run pair become SEPARATE flex items — flex
+      // drops the whitespace between them ("Ada Lovelace" → "AdaLovelace").
+      el.setAttribute('data-single-option', '');
+      el.innerHTML =
+        `<span data-radio aria-hidden="true"></span>` +
+        `<span data-option-label>${this.#renderOptionLabel(opt.label ?? opt.value)}</span>`;
       el.addEventListener('click', this.#onOptionClick);
       el.addEventListener('mouseenter', this.#onOptionMouseEnter);
       return el;

package/components/combobox/combobox.css

@@ -41,8 +41,12 @@
     --combobox-option-py:           var(--a-space-1);
     --combobox-option-bg-active:    var(--a-ui-bg-hover);
     --combobox-option-fg-active:    var(--a-ui-text-hover);
-    --combobox-option-bg-selected:  var(--a-ui-bg-selected);
-    --combobox-option-fg-selected:  var(--a-ui-text-selected);
+    /* Selection rides the RADIO indicator, not a row tint (operator ruling
+       2026-07-27) — so these DEFAULT to the plain row colors, matching
+       select-ui. Both remain consumer-overridable API: set
+       --combobox-option-bg-selected to re-enable a tinted selected row. */
+    --combobox-option-bg-selected:  transparent;
+    --combobox-option-fg-selected:  var(--a-ui-text-subtle);
 
     /* ── Match highlight ── */
     --combobox-match-bg:            var(--md-sys-color-primary-container);
@@ -242,10 +246,54 @@ combobox-ui [data-listbox] [role="option"][data-active] {
 }
 
 combobox-ui [data-listbox] [role="option"][aria-selected="true"] {
-  background: var(--a-ui-bg-selected);
-  color: var(--a-ui-text-selected);
+  background: var(--combobox-option-bg-selected);
+  color: var(--combobox-option-fg-selected);
   font-weight: var(--a-ui-weight);
 }
+/* Hover/active feedback restated on the selected row: the 2-attribute rule
+   above outweighs the single-attribute [data-active] rule, so without this a
+   selected row would stop responding to keyboard/pointer highlight (the same
+   trap select-ui hit when its row tint was removed). */
+combobox-ui [data-listbox] [role="option"][aria-selected="true"][data-active] {
+  background: var(--a-ui-bg-hover);
+  color: var(--a-ui-text-hover);
+}
+
+/* ── Radio indicator (mirrors select-ui's single-select rows) ── */
+combobox-ui [data-listbox] [role="option"][data-single-option] {
+  gap: var(--a-space-2);
+}
+combobox-ui [data-listbox] [role="option"][data-single-option] [data-radio] {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  border: 1px solid var(--a-ui-border);
+  border-radius: 50%;
+  background: var(--md-sys-color-neutral-surface-bright);
+  transition: border-color var(--a-duration-fast) var(--a-easing);
+}
+combobox-ui [data-listbox] [role="option"][data-single-option] [data-radio]::after {
+  content: '';
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background: var(--md-sys-color-primary);
+  transform: scale(0);
+  transition: transform var(--a-duration-fast) var(--a-easing);
+}
+combobox-ui [data-listbox] [role="option"][data-single-option][aria-selected="true"] [data-radio] {
+  border-color: var(--md-sys-color-primary);
+}
+combobox-ui [data-listbox] [role="option"][data-single-option][aria-selected="true"] [data-radio]::after {
+  transform: scale(1);
+}
+combobox-ui [data-listbox] [role="option"][data-single-option] [data-option-label] {
+  flex: 1;
+  min-width: 0;
+}
 
 combobox-ui [data-listbox] [role="option"][aria-disabled="true"] {
   color: var(--a-ui-text-disabled);

package/components/combobox/combobox.yaml

@@ -247,7 +247,11 @@ tokens:
   --combobox-option-fg-active:
     description: Foreground for the currently active option
   --combobox-option-bg-selected:
-    description: Background for the currently committed option
+    description: >-
+      Background for the currently committed option. Defaults to
+      `transparent`: selection is shown by the leading radio indicator
+      rather than a row tint, matching select-ui. Set this to re-enable a
+      tinted selected row.
   --combobox-match-bg:
     description: Background for `<mark>` spans that highlight matched substrings
 requiredIcons:

package/components/select/select.a2ui.json

@@ -112,7 +112,7 @@
       "default": false
     },
     "options": {
-      "description": "Option list. Array of {value, label, disabled?, icon?, avatar?, mark?} or grouped {label, options: [...]}. Alternative to declarative <option> / <optgroup> children. Per-option icon/avatar/mark render in the list AND reflect in the trigger's selected state (mark takes precedence over avatar, which takes precedence over icon).",
+      "description": "Option list. Array of {value, label, disabled?, icon?, avatar?, mark?} or grouped {label, options: [...]}. Alternative to declarative <option> / <optgroup> children. Per-option icon/avatar/mark render in the list AND reflect in the trigger's selected state (mark takes precedence over avatar, which takes precedence over icon). An {action, label} entry is a COMMAND row, not a selection: it dispatches the `action` event, never becomes the value, and renders without the single-select radio indicator (user menus: Account / Log out).",
       "$ref": "common_types.json#/$defs/DynamicStringList"
     },
     "pattern": {
@@ -180,7 +180,8 @@
     "composes": [
       "icon-ui",
       "tag-ui",
-      "button-ui"
+      "button-ui",
+      "adia-mark-ui"
     ],
     "events": {
       "change": {

package/components/select/select.class.js

@@ -541,8 +541,12 @@ export class UISelect extends UIFormElement {
         ? new Set(this.value.split(',').map((s) => s.trim()).filter(Boolean))
         : null;
       for (const opt of this.#listbox.querySelectorAll('[role="option"]')) {
+        // Action rows have no data-value (they are commands — see the
+        // stamping note); null must never compare equal to a value, and
+        // `null === ''` is already false, but the explicit guard keeps a
+        // future `v ?? ''` normalization from resurrecting the leak.
         const v = opt.getAttribute('data-value');
-        const selected = selSet ? selSet.has(v) : v === this.value;
+        const selected = v !== null && (selSet ? selSet.has(v) : v === this.value);
         if (selected) opt.setAttribute('aria-selected', 'true');
         else opt.removeAttribute('aria-selected');
       }
@@ -766,19 +770,39 @@ export class UISelect extends UIFormElement {
       }
       const el = document.createElement('div');
       el.setAttribute('role', 'option');
-      el.setAttribute('data-value', opt.value || '');
+      // Action rows carry NO [data-value]: they are commands, not values.
+      // Stamping `opt.value || ''` gave them data-value="" — and since
+      // `this.value` ALSO defaults to '', the aria-selected sync marked
+      // every action row selected whenever nothing was committed (the
+      // default state of a user menu — reviewer finding, 2026-07-29).
+      // With the attribute absent, getAttribute() returns null and no
+      // value comparison can ever match.
+      if (!opt.action) el.setAttribute('data-value', opt.value || '');
       // §FB-46: [multiple] value is comma-separated — use Set membership.
       const selSet = this.multiple
         ? new Set(this.value.split(',').map((s) => s.trim()).filter(Boolean))
         : null;
-      const isSelected = selSet ? selSet.has(opt.value) : opt.value === this.value;
+      const isSelected = !opt.action && (selSet ? selSet.has(opt.value) : opt.value === this.value);
       // SPEC-040 — multi-select option rows render a leading checkbox
       // indicator (CSS-driven via [data-multi-option]); the `check` icon
       // shows when aria-selected="true".
       // Per-option leading glyph — mark (adia-mark-ui) wins over avatar
       // (img), which wins over icon (icon-ui).
       const lead = UISelect.#optionLeadHTML(opt);
-      if (this.multiple) {
+      // Action rows are COMMANDS in BOTH modes — this branch must precede
+      // the [multiple] one, or a {action} entry in a multi-select renders
+      // with a checkbox while #onOptionClick already treats it as a command
+      // (CodeRabbit, PR #467). They dispatch `action` and never become the
+      // value, so they carry no indicator at all: the 2026-07-27 radio
+      // ruling covers selection rows only (operator report 2026-07-28).
+      if (opt.action) {
+        el.setAttribute('data-action-option', '');
+        const label = document.createElement('span');
+        label.setAttribute('data-option-label', '');
+        if (lead) label.innerHTML = `${lead}${escapeHTML(opt.label)}`;
+        else label.textContent = opt.label;
+        el.appendChild(label);
+      } else if (this.multiple) {
         el.setAttribute('data-multi-option', '');
         const box = document.createElement('span');
         box.setAttribute('data-checkbox', '');

package/components/select/select.css

@@ -487,10 +487,22 @@ select-ui [role="option"][data-single-option][aria-selected="true"] [data-radio]
 select-ui [role="option"][data-single-option][aria-selected="true"] [data-radio]::after {
   transform: scale(1);
 }
-select-ui [role="option"][data-single-option] [data-option-label] {
+select-ui [role="option"][data-single-option] [data-option-label],
+select-ui [role="option"][data-action-option] [data-option-label] {
   flex: 1;
   min-width: 0;
 }
+/* The lead (mark/avatar/icon) is injected INSIDE the label span, which was
+   a plain block: icon-ui (inline-flex) and <img> (inline) ride the text
+   line by accident, but adia-mark-ui is block-level per ADR-0037 and
+   stacked ABOVE the label (bit adia-v2's workspace switcher, 2026-07-28).
+   A centered flex row makes every lead type an inline flex item; the gap
+   mirrors the trigger's leading gap. */
+select-ui [role="option"] [data-option-label] {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--select-trigger-gap);
+}
 select-ui [role="option"][data-multi-option] [data-checkbox] {
   flex-shrink: 0;
   display: inline-flex;

package/components/select/select.yaml

@@ -25,9 +25,10 @@ description: |
 # Per ADR-0027 — primitives that programmatically create other primitives
 # do NOT auto-import them. Consumer (or demo shell) must explicitly import.
 composes:
-  - icon-ui   # caret + option-row affixes (created in render)
-  - tag-ui    # multi-select chip per selected option in the trigger
-  - button-ui # clear-all / select-all / +N-overflow affordances (gh issue 276 — no native <button> in stamped DOM)
+  - icon-ui      # caret + option-row affixes (created in render)
+  - tag-ui       # multi-select chip per selected option in the trigger
+  - button-ui    # clear-all / select-all / +N-overflow affordances (gh issue 276 — no native <button> in stamped DOM)
+  - adia-mark-ui # [mark] trigger/option leading (created in render, gh#339)
 props:
   name:
     description: Form control name for form data submission
@@ -173,7 +174,7 @@ props:
     default: false
     reflect: true
   options:
-    description: "Option list. Array of {value, label, disabled?, icon?, avatar?, mark?} or grouped {label, options: [...]}. Alternative to declarative <option> / <optgroup> children. Per-option icon/avatar/mark render in the list AND reflect in the trigger's selected state (mark takes precedence over avatar, which takes precedence over icon)."
+    description: "Option list. Array of {value, label, disabled?, icon?, avatar?, mark?} or grouped {label, options: [...]}. Alternative to declarative <option> / <optgroup> children. Per-option icon/avatar/mark render in the list AND reflect in the trigger's selected state (mark takes precedence over avatar, which takes precedence over icon). An {action, label} entry is a COMMAND row, not a selection: it dispatches the `action` event, never becomes the value, and renders without the single-select radio indicator (user menus: Account / Log out)."
     type: array
     default: []
     dynamic: true  # JS-set collection prop with a custom setter — deliberately not in static properties

package/components/table/table.class.js

@@ -474,10 +474,14 @@ export class UITable extends UIElement {
         parts.push(`${this.#columnWidths.get(col.key)}px`);
       } else if (col.width) {
         parts.push(`${col.width}px`);
-      } else if (col.flex) {
-        parts.push(`minmax(6rem, ${col.flex}fr)`);
       } else {
-        parts.push('minmax(6rem, 1fr)');
+        // Flexible track: col.minWidth raises the 6rem floor (gh issue 463 —
+        // the prop was parsed and documented but never reached the template,
+        // so flex columns could collapse to 96px); col.maxWidth caps the
+        // track instead of letting the fr grow unbounded.
+        const min = col.minWidth ? `${col.minWidth}px` : '6rem';
+        const max = col.maxWidth ? `${col.maxWidth}px` : `${col.flex || 1}fr`;
+        parts.push(`minmax(${min}, ${max})`);
       }
     }
 

package/components/table/table.css

@@ -298,15 +298,17 @@
   }
 
   /* Wrap opt-in: per-table (all body cells) or per-cell (one column).
-     Restores the legacy `overflow-wrap: anywhere` behavior so wrapped
-     content can break inside long unbroken tokens (URLs, IDs). Row
-     height auto-grows to fit. */
+     `break-word` wraps at word boundaries and only breaks inside a token
+     when that single token alone overflows the cell (URLs, IDs). The
+     previous `anywhere` also collapsed the cell's min-content width to
+     one glyph, so flexible tracks shrank to their floor and words broke
+     mid-glyph (gh issue 463). Row height auto-grows to fit. */
   :scope[wrap] [data-body] [role="gridcell"],
   [data-body] [role="gridcell"][data-wrap] {
     white-space: normal;
     overflow: visible;
     text-overflow: clip;
-    overflow-wrap: anywhere;
+    overflow-wrap: break-word;
   }
 
   :scope[wrap] [data-body] [role="gridcell"] > span,
@@ -316,7 +318,7 @@
     white-space: normal;
     overflow: visible;
     text-overflow: clip;
-    overflow-wrap: anywhere;
+    overflow-wrap: break-word;
   }
 
   [data-align="right"] {