@adia-ai/web-components 0.8.20 → 0.8.21

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog — @adia-ai/web-components
 
+## [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/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

@@ -778,7 +778,20 @@ export class UISelect extends UIFormElement {
       // 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"] {