@adia-ai/web-components 0.8.21 → 0.8.23

package/CHANGELOG.md

@@ -1,5 +1,61 @@
 # Changelog — @adia-ai/web-components
 
+## [0.8.23] — 2026-07-30
+
+### Removed
+- **BREAKING — the `--a-font` back-compat alias** (operator ruling 2026-07-30; ships in **0.8.23** as an operator-ruled PATCH exception to the removals-are-MINOR convention). The pre-ADR-0035 name is gone from `type/scale.css`; surviving `var(--a-font)` references resolve to UA serif. Consumer sweep is mechanical (`var(--a-font)` → `var(--a-font-family)`); `audit-font-family-floor` Check B and the plugin lint hooks flag any stragglers. MIGRATION GUIDE §v0.8.23.
+
+### Fixed
+- **`richtext-ui` lists inherit the body font spec** (gh#546, operator chat screenshot). `p` was pinned to `--richtext-body-size` while `ul`/`li` carried no font rule and inherited the HOST page's larger base — chat-rendered bullet items read bigger than the paragraph beside them. The body size + leading now sit once on `[data-richtext-body]` and everything inherits (headings/code still override). Probe: p and li both 14px inside an 18px host.
+- **Deployed-site freeze class eliminated** (gh#534, operator repro + live-browser diagnosis). Cold loads of the deployed site could stall the ~250-file raw module graph on one hung fetch, leaving the page as un-upgraded markup — visible, scrollable, zero interactivity, no error. Two-part fix: (1) on https (or `?force-bundle`) the prebuilt everything-bundle loads in PARALLEL with the module graph, so element registration rides one request; every registration is now `defineIfFree` (22 bare `customElements.define` calls guarded across components + modules — the parallel load surfaced each collision); (2) an 8s registration watchdog surfaces a plain-DOM reload prompt instead of an indefinite freeze. Probe-verified: three heavy routes clean under bundle+graph with zero collisions, dev path untouched, and a stalled-graph negative control trips the banner.
+- **A2UI runtime registry gains `ToolbarGroup → toolbar-group-ui`** (gh#535, operator screenshot). The missing entry made toolbar-group an unknown tag, so the docs transpiler Column-wrapped every toolbar group — the floating bulk-action bar rendered as vertical col-ui stacks on its site route. Rows regenerated; surface-verified warm (groups render, bars 67–75px, main thread responsive — the earlier freeze signal was cold-Vite first-compile noise, not a loop).
+- **`table-ui` perimeter is three-sided — no top edge** (gh#537, operator report). A line above the header read as a stray divider under a card edge or empty-state; the header row's own border-bottom is the table's top structure. Sides + bottom keep the standalone silhouette; `[frameless]` unchanged.
+- **`select-ui [searchable]` matches underscores as spaces** (gh#538) — typing "Los Angeles" now finds `America/Los_Angeles`; the timezone-selector pattern also displays humanized (de-underscored) labels while values keep exact IANA ids.
+- **`approvals` pattern: priority tag leads the request context** (gh#539, operator ruling) — the High tag moves from the trailing action cluster to the front of the requester/department/age line; trailing cluster is Reject · Approve only.
+- **`list-item-ui` iconless items no longer indent behind a ghost grid track** (gh#524, operator devtools screenshot). The `auto 1fr` grid charged its `column-gap` beside the empty leading track. The gap now rides the icon's own `margin-inline-end` (and the action's `margin-inline-start`); empty stamped icon spans hide. Surface-verified: Playwright measurement on /site/patterns/search-discovery — text indent 0 on iconless rows.
+- **`select-ui [mark]` implies the no-radio menu treatment** (gh#498 REOPENED — the first fix applied `[no-radio]` to the playground switcher and closed green while the site chrome switcher kept its radios; operator caught it same-day). A mark declares an identity switcher, so the semantic attribute now carries the treatment; `[no-radio]` remains for markless menus. Surface-verified this time: Playwright probe of the site chrome `#workspace-select` — 2 rows, 0 radio indicators. Tests 38 → 39.
+- **Nav selection icon color is one language** (gh#522, operator ruling). A nav-group containing the selected route filled its header glyph (gh#501) in plain label color — reading as unselected beside nav-item's primary accent glyph. The contains-selection state now reflects as `[data-selected-within]` (set by the gh#501 sync, observer-safe), and the header icon paints `--nav-group-icon-fg-selected` (default `--md-sys-color-primary`, one token language with `--nav-item-accent`) whenever the group is selected or contains the selection. Sub-items keep their own accent-bar system. Tests 9 → 10.
+- **`patterns/wizard-drawer` works on the site route** (gh#506, operator report). The open/cancel affordances were inline `onclick` handlers, which the site's A2UI render path does not execute — the drawer could never open on /site/patterns/wizard-drawer, so the whole three-step use case was dead there. All interactivity now lives in the pattern's `examples.js` setup module (which the route does run); verified end-to-end in a real browser: trigger opens → Next/Back swap panels with the stepper → Create closes.
+- **`tag-ui` no longer top-pins in table cells** (gh#503, adia-v2 report — measured −34px off-center). The TKT-0021 guard `align-self: start` acted on the PARENT's cross axis: correct in a col-ui stack, but vertical in every flex-row parent (table cells, row-ui, toolbars). Re-cut as `width: fit-content` — defeats column-stretch identically (stretch applies only at auto cross size), while row parents' `align-items: center` regains vertical control. Tag-only; badge/button never carried the rule.
+- **`alert-ui` variant icons clear legibility on their own tinted surface** (gh#507, operator screenshot). Icon fg moves from `--a-<family>-strong` (an on-SURFACE color, near-invisible against the family's dark-scheme container tint) to the gh#434 gate-proven `--md-sys-color-<family>-on-<family>-container` role (dark leg measured 5.6–9.2:1).
+
+- **`nav-group-ui` header glyph fills when a CHILD is selected** (gh#501, operator report). gh#459 ruled "the group CONTAINING the selected route fills" but relied on consumers setting `[selected]` on the group; a MutationObserver (subtree, `[selected]` filter + childList) now makes it self-enforcing — targeted weight sync only, since a full re-render from the observer would loop on its own textContent writes. Symmetric disconnect. Tests 7 → 9.
+- **`progress-row-ui` authored `[slot="meta"]` content survives render** (gh#502). `render()` unconditionally wrote `textContent` from the `[meta]` attr and hid the element when the attr was empty, so authored meta content (text + a trailing delta badge) was wiped — the slot was effectively attr-only. The attr still owns the text when set; absent, authored children are kept and only a genuinely empty meta hides. New test file, 4 passing. The `conversion-funnel` pattern's step-over-step variant now rides its delta badges inside the meta slot instead of a sibling column misaligned against the row.
+
+### Added
+- **`table-ui [frameless]` + the `--table-perimeter` token split** (gh#511, adia-v2 console tables). The 1px perimeter and the row dividers both read `--table-border` (TKT-0026), so a card-composed table always double-bordered — the card's rounded outline plus the table's square frame — and consumers couldn't drop one without the other. The perimeter now reads its own `--table-perimeter` (default: `var(--table-border)` — standalone tables unchanged); `[frameless]` blanks just that token. Pattern rule: inside `card-ui`, set frameless — the container owns the frame. Tests 45 → 49.
+- **`patterns/bulk-action-toolbar`: a floating, bottom-anchored variant** (gh#494, operator ruling — adia-v2 evidence-console + independent kit-side report, ADIA2-7028). Long/paginated tables scroll the top-swap bar out of view exactly when a mid-scroll selection needs it; the floating variant is a card-like elevated bar (`card-ui[elevation="3"]`) that rises `position: sticky` from the bottom of the table's own scroll container — never the browser viewport — driven by `table-ui`'s existing `select` event. Anatomy: `aria-live="polite"` selection count, an optional per-flow controls slot, actions with destructive last, an explicit Clear. Composed entirely from existing primitives (`card-ui` + `toolbar-ui` + `toolbar-group-ui`) — the anchored-surface primitive filed as gh#495 was not needed. The pattern doc now states which variant to pick and why (floating default once a table runs taller than ~one viewport). The top-swap variant stays valid and unchanged in shape; fixed alongside it: a real defect where its trailing action (Delete) silently spilled into an unreachable "more" menu (a flex-grow spacer inflates `toolbar-ui`'s own overflow-width measurement) — both variants now push their action group right via `toolbar-group-ui` + `align="space-between"` instead.
+- **`table-ui [valign]` — host + per-column vertical alignment** (gh#505, adia-v2 evidence-sources/organizations console tables). Every body-cell `align-items` was unconditionally `center`, which floats single-line neighbors (dates, status chips) at a different vertical center than a tall/wrapped primary cell — no way to opt into the Gmail/Linear/Notion "top-align, shared first-line scan anchor" convention. `<table-ui valign="top">` flips body cells to `align-items: flex-start` (default stays `center` — zero behavioral change for existing consumers); `columns[].valign` (or `<col-def valign="…">`) overrides the host per column, e.g. a `valign="center"` checkbox column inside a `valign="top"` table. Header cells and the structural checkbox/expand-toggle columns always stay centered regardless — they're single-line/fixed-size by contract, immune to the new token. New `--table-valign` mode token, added to the Sanctioned Mode Attributes table (`component-token-contract.md`). Tests 31 → 45.
+- **`alert-ui` sectioned content anatomy** (gh#507) — card-ui's rhythm inside the content slot: semantic `<header>`/`<section>`/`<footer>` children of the slotted wrapper, component-owned gaps (`--alert-section-gap`, `--alert-footer-gap`), footer right-aligned with its own step of air. Free-form content is untouched (the column engages only when structural children are present). The system-banners pattern's six banners now compose this way.
+- **`select-ui [no-radio]`** (gh#498, operator report). Opt-out for the single-select radio indicator on menu-shaped switchers — workspace/user identity menus — where the trigger already shows the committed value and a per-row radio reads as redundant. Drops only the dot: rows keep `[data-single-option]` layout and `aria-selected` (trigger + selected-row weight carry the signal); no effect under `[multiple]`. Applied to the admin-shell playground's workspace switcher, the reported surface. Tests 36 → 38.
+
+### Changed
+- **Carded tables adopt `[frameless]`** (gh#500 resolution) — the 11 card-composed `table-ui` instances across six patterns drop their doubled perimeter per the gh#511 rule: inside card-ui, the container owns the frame. Standalone tables unchanged.
+- **Default radius band: 6px–14px** (operator ruling 2026-07-30). `--a-radius-min` 0.25rem → 0.375rem, `--a-radius-max` 1.25rem → 0.875rem in `foundation/radius.css` and its `scale.css` ui-md byte-copy — every `--a-radius-xs/sm/md/lg` step re-clamps into the new band kit-wide. The ui-sm/ui-lg and content registers keep their own authored bands.
+- **`drawer-ui`: a leading `stepper-ui` in the body is sticky wizard chrome** (operator ruling 2026-07-30) — pins just below the sticky header on the panel's own background, padded and bled to the body edges so panels scroll cleanly beneath; `--drawer-sticky-offset` overridable for taller headers.
+- **`stepper-ui` state system re-cut** (operator ruling 2026-07-30, with mock): completed = `primary-container` bg + `primary` glyph, transparent border; current = `primary` bg + `on-primary` glyph, transparent border; next = transparent bg, `on-surface-variant` glyph, `outline-variant` border. Labels: current `on-surface`, completed/next `on-surface-variant` (new `--stepper-item-label-fg-done` token). All existing `--stepper-*` overrides keep working — only default values moved.
+- **`field-ui` labels read at 13-14px** (operator ruling 2026-07-30): `--field-label-size` moves `--a-ui-sm` → `--a-ui-md` (12px → 13px base register; 14px in larger registers) — labels no longer read smaller than the control text beside them.
+- **`description-list-ui [layout="inline"]` collapses responsively** — the two-column property|value grid stacks under 480px instead of squeezing the value column; pairs with the wizard-drawer review step's new settings-style layout.
+- **`patterns/wizard-drawer` restructured** (operator rulings): stepper moves from header chrome to the FIRST content block (`header / content (stepper) / content / footer`); the review step swaps its stacked list for `description-list-ui layout="inline"` — the responsive two-column settings layout. Anatomy sample + rules updated; browser-probe green end-to-end.
+- **`code-ui` color tokens map directly to `--md-sys-color-*` roles** (operator ask 2026-07-30). All 25 color refs (syntax `--code-tok-*`, editor chrome, lint markers) drop the `--a-*` alias hop for the md-sys role each alias already resolved to — value-identical except `--code-tok-function`: brand has no md-sys mirror, so it moves to `--md-sys-color-tertiary-active` (the identity-adjacent family). Layout/typography/motion tokens untouched; per-instance overrides work exactly as before.
+- **`table-ui` sort carets render larger** (gh#496, operator report). The header sort indicator (`caret-up-down` idle, `arrow-up`/`arrow-down` active) moves `--a-icon-size` 0.75em → 0.95em — ~+2px at the heading's `--a-ui-xs` size, em-based so it keeps scaling with the register. `--table-sort-*` overrides untouched.
+
+### Maintenance
+- **`core/` touched in this release window** (1 file(s), e.g. `core/provider.js`) — carried by the entries above.
+- **`dist/` bundles rebuilt** in this cut's window (8 file(s)) — regenerated from the source changes described above, not independent edits.
+- **`styles/` touched in this release window** (3 file(s), e.g. `foundation/radius.css`) — carried by the entries above.
+
+## [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

package/MIGRATION.md

@@ -46,12 +46,21 @@ Version cuts and migration scope:
 
 - **`0.8.0`** — MINOR lockstep cut (2026-07-15). Internal ranges `^0.7.0` → `^0.8.0`. **BREAKING (3 items):** the Material color-token adoption — `--md-sys-color-*` (a static export) is now the color system's source of truth and public API. Removed: the 19 `--a-accent-*` back-compat aliases (→ `--a-primary-*`), the 189 raw per-family `--a-{family}-{0..6}-{tint-|shade-}scrim` primitives (→ the static `--md-sys-color-{family}-scrim-*` ladder), and the `primitives-accent.css` deep-import path (→ `primitives-primary.css`). **Behavioral:** the 8 named `[theme]` presets no longer re-color components (only brand hue + radius/density/shadow knobs still respond). See [§ v0.8.0 section below](#migrating-to-adia-aiv080-2026-07-15).
 
+- **`0.8.23`** — PATCH lockstep cut (2026-07-30; operator ruling — an operator-ruled PATCH exception to the removals-are-MINOR convention). **BREAKING (1 item):** the `--a-font` back-compat alias is removed. See [§ v0.8.23 section below](#migrating-to-adia-aiv0823-2026-07-30).
+
 - **`0.8.11`** — PATCH lockstep cut (2026-07-23). Internal ranges stay at `^0.8.0`. **BREAKING: the size model.** Every component `size` enum is now exactly `sm | md | lg`; the removed tiers (`xs`, `xl`, icon's `2xl/3xl/4xl/fill`) are served by the new ancestor **`[scale]`** context — six hand-tabled tiers (`ui-sm · ui-md · ui-lg · content-sm · content-md · content-lg`): scale picks the table, `size` picks the row. `[verse]`/`[prose]` are deprecated aliases of `ui-sm`/`content-md` (removed at v1.0). Also new: `<adia-wordmark-ui>`. See [§ v0.8.11 section below](#migrating-to-adia-aiv0811-2026-07-23).
 
 Live demos and per-component docs at [ui-kit.exe.xyz/site/](https://ui-kit.exe.xyz/site/). The `adia-ui-migration` skill (in `.agents/skills/`) automates most of the mechanical sweeps in this guide.
 
 ---
 
+## Migrating to `@adia-ai/*@v0.8.23` (2026-07-30)
+
+- **Removed: the `--a-font` alias** (pre-ADR-0035 name, DEPRECATED since the 0.8.x line). Any surviving `font-family: var(--a-font)` goes invalid-at-computed-value-time → `inherit` → UA **serif** — the visible symptom is Times-faced labels on an otherwise-correct page.
+  - **Mechanical sweep:** replace `var(--a-font)` → `var(--a-font-family)` — exact match only; `--a-font-family` / `--a-font-*` names are current API and must not be touched. The kit's own sweep used `codemod-demo-host-css.mjs --token-only`, which consumers can run against their tree.
+  - **Detection:** `audit-font-family-floor.mjs` Check B flags any `var(--a-font)` usage as CRITICAL; the forge/factory lint hooks flag it at write time.
+  - The 0.8.16 font-family floors on text-bearing primitives remain, so kit components stay sans even beside a broken host declaration — only YOUR selectors referencing the dead token regress.
+
 ## Migrating to `@adia-ai/*@v0.8.11` (2026-07-23)
 
 **PATCH lockstep cut.** Internal ranges stay at `^0.8.0`. One breaking theme: **the size model contracts to `sm | md | lg` everywhere, and an ancestor `[scale]` attribute takes over everything the extra tiers did.** `styles/scale.css` (new, opt-in like verse/prose; `dist/scale.min.css` + `dist/scale.sheet.js`) defines six explicit tiers — `ui-sm` (≡ old `[verse]`), `ui-md` (≡ base), `ui-lg`, `content-sm`, `content-md` (≡ old `[prose]`), `content-lg` — each a full hand-tabled re-declaration of the `--a-size/-inset/-gap/-radius/-icon/-caret/-toggle` families and all 13 type roles. Scale picks the table, `[size]` picks the row; an unscaled page renders byte-identically to v0.8.10.

package/components/agent-trace/agent-trace.js

@@ -34,6 +34,7 @@
  *   trace-toggle — summary opened/closed
  */
 
+import { defineIfFree } from '../../core/register.js';
 import { UIElement } from '../../core/element.js';
 
 class UIAgentTrace extends UIElement {
@@ -220,5 +221,7 @@ function escapeAttr(s) {
   return String(s).replace(/"/g, '"');
 }
 
-customElements.define('agent-trace-ui', UIAgentTrace);
+// defineIfFree (gh#534): the prod bundle + module graph load in parallel;
+// second registration must no-op, not throw.
+defineIfFree('agent-trace-ui', UIAgentTrace);
 export { UIAgentTrace };

package/components/alert/alert.a2ui.json

@@ -179,7 +179,7 @@
         "description": "Close button. Stamped automatically when `closable` is set; the stamped element is `<button-ui slot=\"close\" icon=\"x\" variant=\"ghost\" size=\"sm\">`. Override by passing a custom `slot=\"close\"` button."
       },
       "content": {
-        "description": "Alert body. For single-line text use the `text=` attribute (alert.js stamps a `<span slot=\"content\">` automatically). For rich content with title + description, wrap in `<col-ui slot=\"content\">` — the alert root is `display: flex` row, so multiple bare children would lay out side-by-side instead of stacking."
+        "description": "Alert body. For single-line text use the `text=` attribute (alert.js stamps a `<span slot=\"content\">` automatically). For structured banners use card-ui's section rhythm INSIDE the content element (gh#507): semantic `<header>` (title), `<section>` (body), and `<footer>` (actions — right-aligned with its own step of air) children of the slotted wrapper; the component owns the gaps (`--alert-section-gap`, `--alert-footer-gap`), so spacing balances without per-banner col-ui/row-ui improvisation. Free-form content without those children lays out exactly as before."
       },
       "leading": {
         "description": "Leading icon. Stamped automatically from the `icon=` attribute; consumers can override by passing a custom `<icon-ui slot=\"leading\">`."

package/components/alert/alert.css

@@ -42,33 +42,38 @@
     background: var(--alert-bg);
   }
 
-  /* ── Variants ── */
+  /* ── Variants ──
+     Icon fg = the family's on-container tonal-text role (gh#507): the icon
+     sits ON the -container tint, and the gh#434 gate-proven on-container
+     stops clear AA on both legs there (dark leg measured 5.6-9.2:1). The
+     former --a-<family>-strong is an on-SURFACE color — near-invisible
+     against its own family's dark-scheme container tint. */
   :scope[variant="info"] {
     --alert-bg:      var(--md-sys-color-info-container);
     --alert-fg:      var(--md-sys-color-info-on-surface);
     --alert-border:  var(--md-sys-color-info-outline-variant);
-    --alert-icon-fg: var(--a-info-strong);
+    --alert-icon-fg: var(--md-sys-color-info-on-info-container);
   }
 
   :scope[variant="success"] {
     --alert-bg:      var(--md-sys-color-success-container);
     --alert-fg:      var(--md-sys-color-success-on-surface);
     --alert-border:  var(--md-sys-color-success-outline-variant);
-    --alert-icon-fg: var(--a-success-strong);
+    --alert-icon-fg: var(--md-sys-color-success-on-success-container);
   }
 
   :scope[variant="warning"] {
     --alert-bg:      var(--md-sys-color-warning-container);
     --alert-fg:      var(--md-sys-color-warning-on-surface);
     --alert-border:  var(--md-sys-color-warning-outline-variant);
-    --alert-icon-fg: var(--a-warning-strong);
+    --alert-icon-fg: var(--md-sys-color-warning-on-warning-container);
   }
 
   :scope[variant="danger"] {
     --alert-bg:      var(--md-sys-color-danger-container);
     --alert-fg:      var(--md-sys-color-danger-on-surface);
     --alert-border:  var(--md-sys-color-danger-outline-variant);
-    --alert-icon-fg: var(--a-danger-strong);
+    --alert-icon-fg: var(--md-sys-color-danger-on-danger-container);
   }
 
   /* `muted` and `neutral` are semantic aliases of the base — same tokens
@@ -105,6 +110,40 @@
     min-width: 0;
   }
 
+  /* ── Sectioned content (gh#507) — card-ui's header/section/footer rhythm,
+     owned by the component so banner spacing stops being per-author col-ui/
+     row-ui gap improvisation. Authors write semantic children inside the
+     content slot:
+       <div slot="content">
+         <header>…title…</header>
+         <section>…body…</section>
+         <footer><button-ui …></footer>
+       </div>
+     The wrapper columnizes only when structural children are present, so
+     existing free-form content is untouched. */
+  :scope [slot="content"]:has(> header, & > section, & > footer) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--alert-section-gap, var(--a-space-1));
+  }
+  :scope [slot="content"] > header,
+  :scope [slot="content"] > section,
+  :scope [slot="content"] > footer {
+    margin: 0;
+    padding: 0;
+  }
+  :scope [slot="content"] > header {
+    font-weight: var(--a-weight-medium);
+  }
+  /* Footer = the action band: right-aligned, its own step of air above so
+     a CTA never crowds the body (the live-update banner's reported cram). */
+  :scope [slot="content"] > footer {
+    display: flex;
+    gap: var(--a-space-2);
+    justify-content: flex-end;
+    margin-top: var(--alert-footer-gap, var(--a-space-1));
+  }
+
   /* Trailing action area — optional single button or small button group.
      flex-shrink:0 keeps it from collapsing; align-self:start anchors it
      to the first text line under the `align-items:start` root.

package/components/alert/alert.yaml

@@ -140,10 +140,14 @@ slots:
   content:
     description: >-
       Alert body. For single-line text use the `text=` attribute (alert.js
-      stamps a `<span slot="content">` automatically). For rich content
-      with title + description, wrap in `<col-ui slot="content">` — the
-      alert root is `display: flex` row, so multiple bare children would
-      lay out side-by-side instead of stacking.
+      stamps a `<span slot="content">` automatically). For structured
+      banners use card-ui's section rhythm INSIDE the content element
+      (gh#507): semantic `<header>` (title), `<section>` (body), and
+      `<footer>` (actions — right-aligned with its own step of air)
+      children of the slotted wrapper; the component owns the gaps
+      (`--alert-section-gap`, `--alert-footer-gap`), so spacing balances
+      without per-banner col-ui/row-ui improvisation. Free-form content
+      without those children lays out exactly as before.
   leading:
     description: >-
       Leading icon. Stamped automatically from the `icon=` attribute;

package/components/canvas/canvas.js

@@ -1,3 +1,4 @@
+import { defineIfFree } from '../../core/register.js';
 import { UIElement } from '../../core/element.js';
 // NOTE: the A2UI renderer (<a2ui-root>) lives in @adia-ai/web-modules and is
 // loaded lazily + guarded inside #ensureRenderer() (kicked off from connected()).
@@ -243,4 +244,6 @@ export class UICanvas extends UIElement {
   }
 }
 
-customElements.define('canvas-ui', UICanvas);
+// defineIfFree (gh#534): the prod bundle + module graph load in parallel;
+// second registration must no-op, not throw.
+defineIfFree('canvas-ui', UICanvas);

package/components/chat-thread/chat-input.js

@@ -1,3 +1,4 @@
+import { defineIfFree } from '../../core/register.js';
 import { UIElement } from '../../core/element.js';
 
 /**
@@ -272,6 +273,8 @@ class UIChatInput extends UIElement {
     this.#fileInput = null;
   }
 }
-customElements.define('chat-input-ui', UIChatInput);
+// defineIfFree (gh#534): the prod bundle + module graph load in parallel;
+// second registration must no-op, not throw.
+defineIfFree('chat-input-ui', UIChatInput);
 
 export { UIChatInput };

package/components/code/code.css

@@ -13,9 +13,9 @@
     --code-bg:          var(--md-sys-color-neutral-background);
     --code-fg:          var(--md-sys-color-neutral-on-surface);
     --code-border:      var(--md-sys-color-neutral-outline-variant);
-    --code-header-bg:   var(--a-bg-scrim);
-    --code-header-fg:   var(--a-fg-muted);
-    --code-copy-hover-bg: var(--a-bg-muted);
+    --code-header-bg:   var(--md-sys-color-neutral-scrim-weakest);
+    --code-header-fg:   var(--md-sys-color-neutral-on-surface-variant);
+    --code-copy-hover-bg: var(--md-sys-color-neutral-container-low);
     --code-copy-hover-fg: var(--md-sys-color-neutral-on-surface);
 
     /* ── Typography ── */
@@ -31,47 +31,50 @@
        Active only when `[language]` triggers the CM mount. Still safe
        to emit in read-only mode; unused until `.cm-editor` is in the
        DOM. See docs/specs/code-editor.md §6. */
-    --code-gutter-bg:        var(--a-bg-subtle);
-    --code-gutter-fg:        var(--a-fg-muted);
+    --code-gutter-bg:        var(--md-sys-color-neutral-surface);
+    --code-gutter-fg:        var(--md-sys-color-neutral-on-surface-variant);
     /* Transparency-mixing in oklab — Safari < 18 has an OKLCH bug where
        the transparent operand's hue resolves to 0, red-shifting the mix.
        oklab is hue-agnostic and visually identical in fixed engines. */
     --code-active-line-bg:   color-mix(in oklab, var(--md-sys-color-primary-container) 40%, transparent);
     --code-selection-bg:     color-mix(in oklab, var(--md-sys-color-primary-container) 60%, transparent);
     --code-selection-match:  color-mix(in oklab, var(--md-sys-color-primary-container) 30%, transparent);
-    --code-cursor:           var(--a-primary-strong);
+    --code-cursor:           var(--md-sys-color-primary-active);
     --code-focus-ring:       var(--a-focus-ring);
 
     /* ── Syntax highlight tokens ──
        Map Lezer/CodeMirror highlight tag names to AdiaUI semantic
-       tokens. Overridable per-instance by setting `--code-tok-*` on
+       tokens — mapped DIRECTLY to --md-sys-color-* roles (operator ask
+       2026-07-30; the --a-* alias hop removed). tok-function uses
+       tertiary-active: brand has no md-sys mirror, and tertiary is the
+       identity-adjacent md-sys family. Overridable per-instance by setting `--code-tok-*` on
        any ancestor. See docs/specs/code-editor.md §6.3 for the tag →
        class → role map. */
     --code-tok-comment:      var(--md-sys-color-neutral-on-surface-variant);
-    --code-tok-keyword:      var(--a-primary-strong);
-    --code-tok-string:       var(--a-success-strong);
-    --code-tok-number:       var(--a-info-strong);
-    --code-tok-boolean:      var(--a-info-strong);
+    --code-tok-keyword:      var(--md-sys-color-primary-active);
+    --code-tok-string:       var(--md-sys-color-success-active);
+    --code-tok-number:       var(--md-sys-color-info-active);
+    --code-tok-boolean:      var(--md-sys-color-info-active);
     --code-tok-operator:     var(--md-sys-color-neutral-on-surface);
-    --code-tok-punctuation:  var(--a-fg-muted);
-    --code-tok-function:     var(--a-brand-strong);
+    --code-tok-punctuation:  var(--md-sys-color-neutral-on-surface-variant);
+    --code-tok-function:     var(--md-sys-color-tertiary-active);
     --code-tok-variable:     var(--md-sys-color-neutral-on-surface);
-    --code-tok-type:         var(--a-warning-strong);
+    --code-tok-type:         var(--md-sys-color-warning-active);
     --code-tok-property:     var(--md-sys-color-neutral-on-surface);
-    --code-tok-tag:          var(--a-primary-strong);
-    --code-tok-attribute:    var(--a-warning-strong);
-    --code-tok-url:          var(--a-info-strong);
-    --code-tok-invalid:      var(--a-danger-strong);
+    --code-tok-tag:          var(--md-sys-color-primary-active);
+    --code-tok-attribute:    var(--md-sys-color-warning-active);
+    --code-tok-url:          var(--md-sys-color-info-active);
+    --code-tok-invalid:      var(--md-sys-color-danger-active);
 
     /* ── Lint markers (Phase 3 — editable JSON) ──
        `@codemirror/lint` paints gutter markers + diagnostic tooltips
        + inline underlines. Only fires in editable mode with a linter
        attached; read-only instances never see these selectors. */
-    --code-lint-gutter-bg:   var(--a-bg-subtle);
-    --code-lint-error:       var(--a-danger-strong);
-    --code-lint-warning:     var(--a-warning-strong);
-    --code-lint-info:        var(--a-info-strong);
-    --code-lint-tooltip-bg:  var(--a-bg-strong);  /* §230-bundle (v0.5.9): elevated panel surface. Was orphaned --a-surface-floating. */
+    --code-lint-gutter-bg:   var(--md-sys-color-neutral-surface);
+    --code-lint-error:       var(--md-sys-color-danger-active);
+    --code-lint-warning:     var(--md-sys-color-warning-active);
+    --code-lint-info:        var(--md-sys-color-info-active);
+    --code-lint-tooltip-bg:  var(--md-sys-color-neutral-surface-high);  /* §230-bundle (v0.5.9): elevated panel surface. Was orphaned --a-surface-floating. */
     --code-lint-tooltip-fg:  var(--md-sys-color-neutral-on-surface);
     --code-lint-tooltip-border: var(--md-sys-color-neutral-outline-variant);
   }
@@ -268,13 +271,13 @@
     pointer-events: none;
   }
   :scope[readonly] .cm-editor {
-    background: var(--a-bg-subtle);
+    background: var(--md-sys-color-neutral-surface);
   }
   :scope[aria-invalid="true"] {
-    border-color: var(--a-danger-strong);
+    border-color: var(--md-sys-color-danger-active);
   }
   :scope[aria-invalid="true"] .cm-focused {
-    outline: 2px solid var(--a-danger-strong);
+    outline: 2px solid var(--md-sys-color-danger-active);
     outline-offset: -1px;
   }
 

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/description-list/description-list.css

@@ -54,6 +54,15 @@
     margin-bottom: var(--description-list-gap-row);
   }
 
+  /* Responsive collapse (operator ruling 2026-07-30, the wizard-drawer
+     review step's settings layout): the two-column property|value grid
+     stacks on narrow viewports rather than squeezing the value column. */
+  @media (max-width: 480px) {
+    :scope[layout="inline"] {
+      grid-template-columns: 1fr;
+    }
+  }
+
   /* Inline: term and desc on one row */
   :scope[layout="inline"] {
     grid-template-columns: minmax(var(--description-list-term-min-width), max-content) 1fr;

package/components/drawer/drawer.css

@@ -286,6 +286,22 @@ drawer-ui [slot="panel"] > [slot="header"] > :is([slot="action"], [slot="close"]
   gap: var(--drawer-header-gap);
 }
 
+/* ═══════ Sticky progress block (operator ruling 2026-07-30) ═══════
+   A stepper-ui LEADING a drawer body is wizard chrome: it pins just below
+   the sticky header while the step panels scroll beneath — padded, on the
+   panel's own background so content can't ghost through, bled to the body
+   edges so the background spans full width. --drawer-sticky-offset
+   defaults to a one-line header's height (2×header-pad + one line +
+   divider); override for taller headers. */
+drawer-ui [slot="panel"] > [slot="body"] > stepper-ui:first-child {
+  position: sticky;
+  top: var(--drawer-sticky-offset, calc(2 * var(--drawer-header-pad) + 1lh + 1px));
+  z-index: 1;
+  background: var(--drawer-bg);
+  margin: calc(-1 * var(--drawer-inset)) calc(-1 * var(--drawer-inset)) 0;
+  padding: var(--a-space-3) var(--drawer-inset);
+}
+
 /* ═══════ Body (section) ═══════
    Padded by default. Multiple <section> siblings are allowed — they stack
    inside the panel's own scroll region (see panel's overflow-y + sticky

package/components/field/field.css

@@ -3,7 +3,10 @@
     /* ── Tokens ── */
     --field-gap:             var(--a-space-2);
     --field-label-color:     var(--md-sys-color-neutral-on-surface);
-    --field-label-size:      var(--a-ui-sm);
+    /* --a-ui-md, not -sm (operator ruling 2026-07-30): 13px base register /
+       14px in larger registers — 12px labels read too small beside 13-14px
+       control text. */
+    --field-label-size:      var(--a-ui-md);
     --field-label-weight:    var(--a-weight-medium);
     --field-required-color:  var(--a-danger-strong);
     --field-trailing-color:  var(--md-sys-color-neutral-on-surface-variant);

package/components/list/list.css

@@ -118,7 +118,10 @@
     box-sizing: border-box;
     display: grid;
     grid-template-columns: auto 1fr;
-    column-gap: var(--list-item-gap-column);
+    /* NO column-gap (gh#524): an iconless item's empty auto track still
+       charges the gap, indenting content behind a ghost cell. The
+       icon-to-text spacing rides the icon's own margin-inline-end
+       instead, so a zero-width track costs zero. */
     row-gap: var(--list-item-gap-row);
     font-size: var(--list-item-font-size);
     color: var(--list-item-text-color);
@@ -141,6 +144,12 @@
     grid-row: 1;
     align-self: center;
     color: var(--list-item-icon-color);
+    /* carries the old column-gap (gh#524) */
+    margin-inline-end: var(--list-item-gap-column);
+  }
+  /* An empty stamped icon span must not resurrect the ghost track. */
+  :scope [slot="icon"]:empty {
+    display: none;
   }
 
   :scope [slot="text"] {
@@ -177,6 +186,8 @@
     grid-template-columns: auto 1fr auto;
   }
   :scope [slot="action"] {
+    /* carries the old column-gap on the trailing side (gh#524) */
+    margin-inline-start: var(--list-item-gap-column);
     grid-column: 3;
     grid-row: 1;
     align-self: center;