@adia-ai/web-components 0.8.32 → 0.8.34

package/CHANGELOG.md

@@ -1,5 +1,56 @@
 # Changelog — @adia-ai/web-components
 
+## [0.8.34] — 2026-08-11
+
+### Fixed
+
+- **`date-range-picker-ui` — both calendar grids are now ONE click-start-click-end selection surface (gh#948, reported from adiav2 ADIA2-8020).** The change handlers were role-locked per pane (`from`-pane clicks could only ever write the range start), so a same-month range required paging the right pane back a month. First click = start, second = end in either grid; a second click earlier than the pending start restarts there; a click after a committed range starts fresh. Popover content-sizing (`width: max-content` + viewport/token caps) moved into the stylesheet so the JS anchor fallback and anchoring failures can no longer render a viewport-huge panel.
+- **`UIElement` — `reflect:true` booleans with a TRUE default now stamp their attribute on connect (gh#961).** installProps seeds the signal but can't write attributes (constructor restriction), and the setter's `Object.is` short-circuit skips reflection on same-value sets — so attribute-keyed CSS (`chat-thread:not([empty]) > chat-empty`, `editor-canvas:not([empty]) > editor-canvas-empty`, password-strength's `:not([show-label])`) read wrong state forever; 9 components carried the latent shape. The connect-time pre-sync loop now runs inside `untracked()` — its property reads otherwise subscribe a PARENT's render effect to template-created children's signals, the unbounded re-stamp oscillation the signals drain guard traps (the guard now names the still-dirty effect hosts).
+- **`modal-ui` — `aria-labelledby` falls back to an authored `[slot="heading"]` when `text=` is absent (gh#947), and an authored bare `<header>` no longer displaces into the body (gh#941).** Header icon+heading row layout is by tag + DOM order: the last non-button child claims the row, earlier content stays fixed-width.
+- **`table-ui` — composite-cell wrapper flex generalized to CSS (gh#940):** `[data-body] [role="gridcell"] > row-ui { flex: 1 }` covers progress AND avatar cells; the progress bar no longer collapses to ~33px. `<col-def meta>` JSON attribute carries per-column config (badge variant maps) declaratively.
+- **`step-progress-ui` — direction-agnostic sizing (gh#942):** `inline-size: 18rem` + `max-inline-size: 100%` replace the direction-fragile `flex-basis`, so a column-flex parent no longer inflates the component to 288px tall.
+- **`command-ui` / `combobox-ui` — `options` catalog schema corrected to rich objects (`DynamicObjectList`).** Both yamls declare `{value, label, icon?, …}` objects but omitted `items.type`, mapping to the string-list default — the dialect validator rejected every harvested rich-options palette (caught by exit-gate.corpus at release pre-flight).
+
+### Changed
+
+- **`richtext` — inline `<code>` chip background softened to container-low (gh#972):** the opaque `--a-canvas-2` chip out-competed body text where several tag references cluster; the 10% alpha tier recedes behind prose and composites consistently on stacked surfaces. The docs site's own `admin-page code` rule moves to the same tier (superseding its earlier well-strong non-text-contrast ruling — inline code is text formatting, not a UI component).
+- **`nav-item-ui` / `nav-group-ui` — state color spec (gh#968, operator ruling):** idle = neutral icons + neutral-high text on transparent; hover = on-surface on container-low; selected = on-surface on container. Selected glyphs drop the primary accent (supersedes gh#522's glyph half — the accent BAR keeps primary); `neutral/surfaceBright` was considered for the selected fill and ruled out.
+- **`tag-ui` / `badge-ui` / `tabs-ui` — font scale steps one rung (gh#965):** tag/badge default `--a-ui-sm` → `--a-ui-xs` with tiers shifting to `--a-ui-2xs`/`--a-ui-sm` (first consumer of the pre-staged 10px token); tabs `--a-ui-md` → `--a-ui-lg`.
+- **`description-list-ui` — `dt` renders as a kicker/data-label** (code family at `--a-label-size`, normal weight); **`dd` is semibold at context-inherited size** (`1em`) so the value leads the pair and tracks the surrounding prose.
+- **Token docs — the `-strong` semantics split documented (gh#969):** `--a-canvas-strong` is a surface-tonal tier while interactive families' `-strong` is the pressed/high-emphasis foreground — noted at the core.css declarations and in component-token-contract.md. No value changes.
+
+### Maintenance
+- **`dist/` bundles rebuilt** in this cut's window (4 file(s)) — regenerated from the source changes described above, not independent edits.
+- **`patterns/` touched in this release window** (1 file(s), e.g. `responsive-shell-sidebar/responsive-shell-sidebar.examples.html`) — carried by the entries above.
+- **`styles/` touched in this release window** (1 file(s), e.g. `semantics/core.css`) — carried by the entries above.
+
+## [0.8.33] — 2026-08-11
+
+### Added
+
+- **`accordion-item-ui` completes the body-padding token trio — `--accordion-item-body-px` / `--accordion-item-body-py` join the existing `--accordion-item-body-pt` (gh#852).** The body's horizontal and bottom padding came from `--accordion-item-px`/`--accordion-item-py`, undocumented internals shared with the header — no supported way existed to zero the body's padding (e.g. for a self-inset `table-ui` nested in the body) without also flattening the header. Both new tokens default to the shared header tokens (`--accordion-item-body-px: var(--accordion-item-px)`, `--accordion-item-body-py: var(--accordion-item-py)`), so existing renders are byte-identical; a consumer overriding either now only affects the body, never the header. `accordion-item.yaml`'s `tokens` block documents both alongside `--accordion-item-body-pt`.
+
+### Changed
+
+- **BREAKING — `alert-ui` drops `variant="muted"`/`"neutral"` (zero visual change) and `mark-ui` drops `variant="muted"` (VISIBLE BEHAVIOR CHANGE, no enum successor) — the variant/color/tone convention's last two carriers (gh#881, LLD §14).** Root cause is gh#873's exactly: style-like values sitting on a semantic-family axis. Neither component gains a `tone` prop — the ratified discipline is *at most* one style axis and one family axis, which permits zero, and neither has a second implemented fill style (alert: one container-tint + outline-variant banner; mark: one inline tint — zero CSS, zero call sites, zero corpus demand for a solid/outline form, grep-confirmed; the names `tone` and `muted|solid|outline` stay reserved should demand appear). `alert-ui` → `default·info·success·warning·danger`: the two retired values re-declared the exact four tokens `:where(:scope)` already sets (`--a-bg-muted` / `neutral-on-surface` / `neutral-outline-variant` / `--a-fg-muted`, `alert.css:4-7`), so the deleted rule was a second name for "no variant attribute" — every migration is dropping the attribute, and the family-less banner IS the quiet-chrome look. `mark-ui` → `warning(default)·info·success·danger`: `warning` stays the default and **no** `default` member is added (mark's family-less identity is the yellow marker — the convention its a2ui rules teach and its native-`<mark>` anti-pattern rests on; a `default` value would either alias `warning` or contradict the attribute's own default). Mark's `muted` was the one real render in this cut (`mark.css:35-38`), so it retires with a **token** successor instead of an enum one: `--mark-bg: var(--a-bg-muted); --mark-fg: var(--md-sys-color-neutral-on-surface)` — both tokens already public and unchanged, now documented as the escape hatch in `mark.yaml`'s `variant` description and the demo's note. Also repaired (source-wins, pre-existing drift): `mark.yaml` documented its token defaults as `--a-warning-muted`/`--a-warning-text`, but `mark.css:3-4` has always used `--md-sys-color-warning-container`/`-on-surface`. Call sites: the retiring demo rows in `alert.examples.html`/`mark.examples.html` deleted with their prose, and one real consumer — `system-banners`' beta-announcement banner, whose multi-line `<alert-ui>` tag only a `rg -nU` sweep can see (a line-based `git grep` misses it) — loses the attribute for an identical render. Zero `setAttribute('variant', …)` hits on either host; stale enum lists in `alert.class.js` (docblock + the `variant="error"` hallucination-alias warning text) and `mark.class.js`'s property comment updated. No new bg/fg pair anywhere, so `verify:contrast`'s roster is unchanged. `node scripts/build/components.mjs --verify` clean.
+- **BREAKING + VISIBLE BEHAVIOR CHANGE — `accent` retired as an enum value on `badge-ui`/`tag-ui` (`variant`) and `button-ui` (`color`) — the variant/color/tone convention cut (gh#873, gh#874, gh#875, gh#876).** Root cause: badge/tag were carrying a fill-style value (`accent`, plus badge's `muted`/`neutral`) on their semantic-family `variant` axis instead of the fill-style `tone` axis, and button's `color` enum carried `accent` with zero backing CSS (gh#875's original finding, re-confirmed) — three overlapping vocabularies for what should stay two orthogonal axes. Ratified convention (LLD, coordinator ruling 2026-08-10): every component exposes at most one style axis and one family axis; badge/tag keep `variant` = family, `tone` = style — button's own split (`variant` = style, `color` = family) was already the clean reference the other two migrate toward, not the reverse. Fixes: (1) `badge-ui` — `variant="accent"` → `variant="primary"` (pure rename, identical solid pair; the rename also gains working `tone="muted"`/`tone="outline"` pairings `primary` previously lacked); `variant="muted"`/`"neutral"` retire, merging into `tone="muted"` (badge's family-less `tone="muted"` also re-tokens `--a-bg-muted` → `--md-sys-color-neutral-low` + `-on-surface`, gh#873 — see below). (2) `tag-ui` — gains `primary` in its `variant` enum (new, not previously present) as the `accent`→`primary` rename target — coordinator-ratified sibling parity with badge (gh#372's actual intent: equivalent brand-emphasis capability on both siblings, not the same attribute name); tag's family-less `tone="muted"` is UNCHANGED (stays on `--a-bg-muted`, gh#778 dense-list rationale — badge and tag's family-less muteds are no longer the same shape, `badge.yaml` corrected). (3) `button-ui` — `color` enum drops `accent` (confirmed zero CSS at every step, gh#875 is now superseded and closes); same edit adds the missing `tonal` value to `variant`'s enum (yaml/CSS drift repair — `button.css` already implemented it). `STATUS_MAP.beta` (`badge.class.js`) moves `accent`→`primary` (identical render). Axis-4 JS render-method sweep (`table-toolbar.class.js`, `plan-picker.class.js`'s tag pills, `table/cell-types.js`'s badge cell renderer, `integration-card.class.js`'s status badge) updated to the new attributes, including two reused-DOM-node cases (`table/cell-types.js`, `integration-card.class.js`) where `variant`/`tone` must be explicitly cleared on the branch not taken, not just set on the branch taken — a stale attribute from a prior render otherwise survives. `verify:components --verify` clean.
+- **`--md-sys-color-neutral-low`/`-on-surface` join `verify:contrast`'s roster as `badge-ui`'s new family-less `[tone="muted"]` fill (gh#873).** The literally-requested pair (`neutral-low`/`neutral-high`) measures ~2.95:1 light / ~3.06:1 dark — fails AA at badge's ~12px uppercase text (4.5:1 threshold, not the 3:1 large-text one). Shipped pair honors the requested *background* (the visually distinctive half of the ask) paired with the family's own `-on-surface` role instead: measured 8.19:1 light / 8.46:1 dark — comfortably AA, confirmed by the new roster pair across all 13 palettes (default + 12 named `[theme]` identities, gh#435-style; 1820 pairs total, all pass). Family-tinted `tone="muted"` (info/success/warning/danger/primary) is unchanged. Consequence: badge's and tag's family-less `[tone="muted"]` are no longer the same shape (tag intentionally stays on the lighter `--a-bg-muted`, gh#778 dense-list rationale) — `badge.yaml`'s claim that they matched is corrected in the same edit.
+- **VISIBLE BEHAVIOR CHANGE — `badge-ui`/`tag-ui` default color formulas swapped back to their reported targets (gh#864).** `badge-ui`'s bare (no `[tone]`) family variants (`accent`/`info`/`success`/`warning`/`danger`) had been implementing `tag-ui`'s reported formula — tinted container bg + `on-surface` text — while `tag-ui`'s bare family variants had been implementing `badge-ui`'s — saturated `--a-{family}-bg` + on-{family} text. Root cause: gh#794 flipped `tag-ui`'s bare default to solid a day before gh#845 ratified `badge-ui`'s register, with no cross-check between the two changes. Swapped both back: `badge-ui`'s bare family variants are now solid (`--a-{family}-bg` + `-on-{family}`, opt into the tinted look via `[tone="muted"]`); `tag-ui`'s bare family variants are now the tinted container pair (`-{family}-container` + `-on-surface`, opt into the saturated stamp via `[tone="solid"]`). Neither component's `[tone="outline"]` text color moved — `-{family}-on-surface` stays, a deliberate 2026-07-15 contrast-safety fix for a documented 2.23:1 WCAG failure (`styles/colors/semantics/core.css`), not part of this swap. `tag-ui`'s family-less `default` variant (no `[variant]`) is unaffected — it stays solid unconditionally per gh#794, since that ruling was never about the family-formula swap. `verify:contrast` stays green (1794 pairs, WCAG AA) — the swap only re-points which selector carries which already-passing pair, no new color combination introduced. `badge.yaml`/`tag.yaml`'s `tone` prop schema defaults flip to match (`badge-ui`: `muted` → `solid`; `tag-ui`: `solid` → `muted`); both yamls' descriptions and `badge.test.js`/`tag.test.js`'s color-formula assertions updated to the new shape.
+- **`badge-ui`'s text weight moves semibold (600) → medium (500) — no longer distinguishes it from `tag-ui` (gh#866, revises gh#845).** `--badge-weight` now consumes `--a-weight-medium` instead of `--a-weight-semibold`; `tag-ui`'s text was already weight 500 (hardcoded, not tokenized — pre-existing, unrelated note). Per gh#845's own register ruling, weight was one of four axes (case/tracking/mono/weight) separating badge from tag; with weight now equal, the split holds via the remaining three — badge stays UPPERCASE, mono (`--a-font-family-code`), wide-tracked (`--a-font-tracking-wider`). `badge.test.js`'s weight-pinning assertion (added per gh#845) updated to expect 500; `badge.yaml`'s REGISTER doc note updated to say medium, not semibold.
+- **VISIBLE BEHAVIOR CHANGE — `badge-ui` diverges from `tag-ui` by TYPOGRAPHY, not shape (gh#845).** Operator ruling: tags and badges had converged to near-identical size/shape/type and needed to separate by register instead. `badge-ui` now renders **uppercase**, its own mono stack (kbd-ui's `--a-font-family-code` — MONO TRIAL taken: held up cleanly at small badge sizes in both schemes, screenshot-verified against the admin-dashboard notification/team/table surfaces; the tracked-caps-sans fallback was not needed), semibold weight, wide letter-spacing (`--a-font-tracking-wider`, 0.06em — inside the ruling's +0.04–0.08em band), and `font-variant-numeric: tabular-nums` for counts. Geometry moved the other direction: `--badge-radius` now consumes the same `--a-radius-full` pill token `tag-ui`'s `--tag-radius` uses (was `--a-radius-md`, a squarer chip) — `--badge-px`/`--badge-py` already shared tag's exact padding-token structure pre-845, so shape is no longer a differentiator at all. `tag-ui` is unchanged (stays proportional sentence-case, weight 500, never uppercase/tracked/mono) — it was the geometry reference for this change, not a target. Neither component exposes a prop that lets one adopt the other's typographic register; badge's `[variant]`/`[tone]` (the only attributes the two share) only ever re-point color tokens, never typography — pinned by new `badge.test.js` coverage. Semantic color voice and non-interactivity are unchanged; `verify:contrast` stays green (uppercase small text on semantic fills was re-measured, no regression — color pairs didn't move). Consumers relying on badge's prior squarer/proportional look (any surface treating badge and tag as visually interchangeable) will see a visible diff; no API/props changed.
+
+### Fixed
+
+- **`badge-ui`/`tag-ui`'s family-less solid default used the wrong neutral token pair, and badge's own default was still muted (follow-up to gh#864/gh#866, operator ruling 2026-08-10).** Both components' truly family-less default (`tag-ui`: `:where(:scope)` + `[variant="default"]` + `[tone="solid"]:not([variant])`; `badge-ui`: `:where(:scope)`) used `--md-sys-color-neutral-on-surface` (bg) + `-neutral-background` (fg) — ink/page tokens borrowed as a stand-in, not the actual `--md-sys-color-neutral`/`-on-neutral` pair that already exists in the token catalog as the true parallel to `-primary`/`-on-primary` etc. Separately, `badge-ui`'s base tokens were still `--a-bg-muted` + `-on-surface` (quiet chrome) even after gh#864 made every family variant solid by default — the swap only touched variants that HAD a family, missing the family-less base case entirely, so a bare `<badge-ui>` contradicted its own documented "solid by default" register. Both fixed: `tag-ui`'s three solid-neutral rules re-pointed to the correct pair (visually near-identical, same solid intent, correct tokens); `badge-ui`'s base tokens moved from muted to solid `neutral`/`on-neutral`, matching `tag-ui`'s already-solid neutral default and badge's own register — `[tone="muted"]`/`[variant="muted"|"neutral"]` still opt into the quiet-chrome look. Neither component's `[tone="muted"]` fg (`-neutral-on-surface`, correctly ink-on-muted-surface) or `[tone="outline"]` styling moved. `verify:contrast` stays green (1794 pairs, WCAG AA); `tag.test.js`'s three affected assertions updated to match.
+- **`popover-ui`'s panel border token swapped from `outline-variant` to `--a-ui-border` (`outline`), matching `select-ui`'s listbox border (gh#857, item 3 of 3 — closes the issue).** `popover.css`'s `--popover-border` default was the only overlay chrome in the shared trigger/panel family reading `outline-variant` while `select-ui`'s `[slot="listbox"]` (`select.css:277`) reads `outline` via `--a-ui-border` — both panels already share the identical `--md-sys-color-neutral-surface-bright` background per the existing comment's stated intent ("Matches select-ui's own dropdown surface exactly"), so the border now follows the same intent. Confirmed `popover-ui`'s other consumers first: `color-input-ui` (the only other component instantiating `<popover-ui>` in code) and the `filter-bar`/`inline-dialog`/`theme-panel` demo patterns all use the default panel chrome as-is — none override `--popover-border`, and nothing in `popover.yaml` documents a reason to keep `outline-variant`. `date-range-picker-ui`/`datetime-picker-ui`/`calendar-picker-ui`/`tour-ui` are NOT `<popover-ui>` consumers (they build their own native `[popover]` panels with independent `--<component>-popover-border` tokens) and are unaffected.
+- **`chart-ui` sparkline no longer pins flat/single-point series to the bottom of the plot (gh#850).** `#renderSparkline()` derived its vertical domain from the series' own `minVal`/`maxVal` (`range = maxVal - minVal || 1`) — when every value was equal (or there was one point), `range` fell back to the literal constant `1`, and every point mapped to `y = h - padY`, the exact bottom edge. Every other renderer in `chart.class.js` (`#renderBar`, `#renderLine`/`#renderArea`, `#renderScatter`, `#renderMultiLine`, `#renderStackedBar`, `#renderGroupedBar`, `#renderComposed`) already scales against a fixed 0-floor domain via `niceScale(0, Math.max(...vals), 5)`; `#renderSparkline` was the one holdout. Brought in line with that convention instead of inventing a new mechanism — a flat series (e.g. constant `90` for 7 days) now plots against a real 0-floor baseline instead of collapsing to the bottom edge.
+- **Three demo pages authored tags that do not exist (gh#848).** `patterns/diff-review.examples.html` used `<description-term-ui>` / `<description-detail-ui>` inside `<description-list-ui>`, and `patterns/agent-memory.examples.html` used `<form-container-ui>`. Neither tag has a `.yaml`, a `.a2ui.json`, or a `customElements.define` anywhere in `packages/` — they are undefined elements the browser renders as bare inline boxes, so the live demos were subtly wrong too and the A2UI conversion lost the region entirely. Replaced with the real contracts: native `<dt>`/`<dd>` (description-list.yaml: "consumer passes `<dt>`/`<dd>` children inline") and native `<form>` (registry.js §45: "no form-ui component exists"). Registering the invented tags was rejected — that would have been inventing a component to match a typo.
+- **Filter-bar removable chips read as compact/quiet, not oversized pills (gh#841).** Measurement (headless Playwright against the admin-dashboard filter bar) split the three candidate contributors named in the report: `tag-ui`'s geometry tokens (`--tag-px`/`--tag-py`/`--tag-font`) are pixel-identical to v0.8.31 — the size-ladder tokenization (#789) never changed them, and the bare-default removable tag (22px tall) measures *shorter* than the sibling `size="sm"` ghost buttons (24px) it sits beside. The `removable` dismiss button (16×16px) fits inside that box height too — no geometry regression anywhere. The "too big" read is 100% the #794 solid-default: a near-black stamped pill next to transparent ghost buttons reads heavy regardless of matching height. Fixed at the surface+pattern level, not the component: filter chips are now `size="sm" tone="muted"` — the canonical `patterns/filter-bar` demo (both the "Active filters" and "Filter bar + table" sections, plus its anatomy code sample and Rules list) and the admin-dashboard filter bar it was copied from. This corrects the #794 CHANGELOG entry's own call that the saas-admin filter-bar chips were "fine with the new solid default" — they read heavy next to ghost buttons in practice, which #794's static blast-radius audit didn't catch. `tag-ui` itself is unchanged; every other bare/solid tag surface (status pills, single prominent chips) is unaffected.
+
+### Maintenance
+- **`dist/` bundles rebuilt** in this cut's window (4 file(s)) — regenerated from the source changes described above, not independent edits.
+- **`traits/` touched in this release window** (15 file(s), e.g. `anchor-positioning/anchor-positioning.examples.html`) — carried by the entries above.
+
 ## [0.8.32] — 2026-08-09
 
 ### Added

package/MIGRATION.md

@@ -41,6 +41,8 @@ Version cuts and migration scope:
   - **Recommended consumer migration:** if you were using `@adia-ai/web-modules/runtime/a2ui-root/a2ui-root.js` + `@adia-ai/web-components/components/canvas/canvas.js` for generative UI surfaces, collapse to a single `import '@adia-ai/web-modules/generative'`. Both old paths still work.
   - See [§ v0.6.7 section below](#migrating-to-adia-aiv067-2026-05-19).
 
+- **Upcoming (variant/color/tone convention cut)** — **BREAKING:** `accent` is retired as an enum value on `badge-ui` (`variant`), `tag-ui` (`variant`), and `button-ui` (`color`) — `primary` is the brand-emphasis value on badge/tag (identical rendering; pure rename). Badge-ui's `variant` becomes family-only: `variant="muted"` / `variant="neutral"` are removed — both map to `tone="muted"` (the fill-style axis they always belonged on). Badge's family-less `tone="muted"` also re-tokens to the `--md-sys-color-neutral-low` fill (a visibly stronger tint — no markup change). The same one-axis rule then reaches **alert-ui** (`variant="muted"` / `"neutral"` removed — they were exact aliases of the default, so just drop the attribute; zero visual change) and **mark-ui** (`variant="muted"` removed with no enum successor — a neutral highlight is now a `--mark-bg`/`--mark-fg` token override); neither gains a `tone` axis. `accent` on OTHER components (icon-ui, text-ui, chart-ui, …) is unchanged. Pre-1.0 PATCH cadence. See [§ Upcoming — variant/color/tone convention cut](#upcoming-variant-color-tone-convention-cut).
+
 - **Upcoming (`<theme-provider>` cut)** — **BREAKING:** the token-theme attribute is renamed `data-theme` → `theme` repo-wide. Replace `<html data-theme="ocean">` → `<html theme="ocean">` and any `[data-theme="…"]` selectors → `[theme="…"]`. Mechanical: a word-boundary find-replace of `data-theme` → `theme` (preserve compound attrs like `data-theme-slug` / `data-themed`). Pre-1.0 PATCH cadence. Also new: the **`<theme-provider>`** element adopts the AdiaUI foundation into the document from anywhere (no `<head>` stylesheet link), with opt-in `theme="…"` (named preset) + `scale="verse|prose"` (typographic register) attributes that fetch their layer on demand.
   - **`theme` ≠ `scheme` — don't conflate the two axes.** This rename is purely the *theme* axis (a named preset: ocean / forest / slate / …). A light/dark *mode* is the orthogonal *scheme* axis — it belongs on `color-scheme` / `data-scheme`, **never** on `[theme]`. If you'd encoded a mode as `data-theme="dark"`, that was a category error: after the rename it is a no-op on *both* axes. Move it to the scheme axis — `<html style="color-scheme: dark">`, `data-scheme`, or `<toggle-scheme-ui>`. (Surfaced by color-app, 2026-06-07.)
 
@@ -54,6 +56,140 @@ Live demos and per-component docs at [ui-kit.exe.xyz/site/](https://ui-kit.exe.x
 
 ---
 
+## Upcoming — variant/color/tone convention cut
+
+**One theme: every color-ish attribute owns exactly one axis.** `variant`/`tone` on badge & tag
+and `variant`/`color` on button now each carry either a *semantic family* or a *fill style*,
+never both. `accent` (the name, not the capability) is retired on the three components —
+`primary` carries brand emphasis. The `accent` retirement's scope is **badge-ui / tag-ui /
+button-ui only**: `accent` remains valid on icon-ui, text-ui, chart-ui, heatmap-ui, rating-ui,
+spinner-ui, and toggle-scheme-ui — scope every sweep to the three tags, never find-replace
+`accent` blanket. The same one-axis discipline additionally retires style-like values from two
+more `variant` enums — **alert-ui** loses `muted` *and* `neutral`, **mark-ui** loses `muted`
+only (`neutral` was never one of its values) — and neither component gains a `tone` axis; they
+have exactly one fill style each.
+
+### Mechanical sweeps (safe to automate)
+
+- **`<badge-ui variant="accent">` → `<badge-ui variant="primary">`** — identical rendering
+  (both resolved to the same solid primary pair; the rename also gains working
+  `tone="muted"`/`tone="outline"` pairings that `primary` previously lacked).
+
+  ```bash
+  git grep -nE '<badge-ui[^>]*variant="accent"'
+  git grep -lE '<badge-ui[^>]*variant="accent"' | xargs perl -i -pe 's/(<badge-ui[^>]*variant=")accent(")/${1}primary${2}/g'
+  ```
+
+- **`<tag-ui variant="accent">` → `<tag-ui variant="primary">`** — identical rendering
+  (`primary` is new to tag-ui's enum in this cut, replacing `accent` token-for-token).
+
+  ```bash
+  git grep -nE '<tag-ui[^>]*variant="accent"'
+  git grep -lE '<tag-ui[^>]*variant="accent"' | xargs perl -i -pe 's/(<tag-ui[^>]*variant=")accent(")/${1}primary${2}/g'
+  ```
+
+- **`<badge-ui variant="muted">` / `<badge-ui variant="neutral">` → `<badge-ui tone="muted">`**
+  — drop the `variant` attribute, add `tone="muted"`. The two old values were identical to each
+  other; both land on the same new form. (Keep any real family value: `variant="info"
+  tone="muted"` stays exactly as it is — only bare `muted`/`neutral` on `variant` move.)
+  If the element already carries a `tone` attribute, drop `variant` instead — the one-liner
+  below would otherwise produce two `tone` attributes on the same element.
+
+  ```bash
+  git grep -nE '<badge-ui[^>]*variant="(muted|neutral)"'
+  git grep -lE '<badge-ui[^>]*variant="(muted|neutral)"' | xargs perl -i -pe 's/(<badge-ui[^>]*)variant="(?:muted|neutral)"/${1}tone="muted"/g'
+  ```
+
+- **`<alert-ui variant="muted">` / `<alert-ui variant="neutral">` → drop the attribute** — both
+  values re-declared the exact tokens of the family-less default, so a bare `<alert-ui>` renders
+  identically. Zero visual change. (Keep any real family value untouched: only bare
+  `muted`/`neutral` move.) alert-ui gains **no** `tone` axis — the quiet banner IS the default.
+
+  `-U` because an alert tag's attributes often span several lines (a line-based `git grep`
+  misses those); `(\s[^>]*)?\svariant=` so the pattern can't match `data-variant` or a
+  longer tag like `<alert-ui-extended>`; the `-g` excludes keep the rewrite off this guide's
+  own examples and off generated artifacts (regenerate those with your build, don't sed them).
+
+  ```bash
+  EX=(-g '!*MIGRATION*' -g '!*CHANGELOG.md' -g '!**/dist/**' -g '!*.a2ui.json' -g '!*.examples.md')
+  rg -nU '<alert-ui(\s[^>]*)?\svariant="(muted|neutral)"' "${EX[@]}"
+  rg -lU '<alert-ui(\s[^>]*)?\svariant="(muted|neutral)"' "${EX[@]}" \
+    | xargs perl -0777 -i -pe 's/(<alert-ui(?:\s[^>]*)?)\s+variant="(?:muted|neutral)"/${1}/gs'
+  ```
+
+- **Programmatic setters (JS render paths — the sweep HTML greps miss):**
+
+  ```bash
+  git grep -rnE "setAttribute\('variant', *'(accent|muted|neutral)'\)"
+  ```
+
+  For badge/tag hosts: `'accent'` → `'primary'`; `setAttribute('variant', 'muted'|'neutral')`
+  on a badge → `setAttribute('tone', 'muted')`. Verify each hit's element is actually a
+  badge/tag before rewriting — other components legitimately use these values.
+
+- **A2UI JSON documents** (chunks, saved compositions): on `"component": "Badge"` /
+  `"component": "Tag"` nodes only — `"variant": "accent"` → `"variant": "primary"`;
+  Badge `"variant": "muted"|"neutral"` → delete the `variant` member, add `"tone": "muted"`.
+
+  ```bash
+  git grep -nE '"variant": *"(accent|muted|neutral)"'   # then filter to Badge/Tag nodes — Text/Icon nodes also match and must NOT be touched
+  ```
+
+### Judgment items — *never auto-sweep*
+
+- **`<button-ui color="accent">` — value removed, no direct successor.** It never had CSS
+  (rendered as the default fill), so every call site encodes an *intent* the renderer ignored.
+  Re-read each site: a brand CTA wants `variant="primary"` (drop `color`); a semantic action
+  wants a real family (`color="danger"` / `"success"` / …); decorative uses just drop the attr.
+  Expect a visible change either way — the button finally renders something on purpose.
+
+  ```bash
+  git grep -nE '<button-ui[^>]*color="accent"'
+  ```
+
+- **`badge-ui` muted rendering change (no markup change; review only).** Family-less
+  `tone="muted"` (including everything the mechanical sweeps just moved onto it) now renders
+  the mid-tone `--md-sys-color-neutral-low` fill instead of the previous near-white container
+  tint — deliberately more distinct from the page surface (AA-verified at 8.2:1/8.5:1). If a
+  dense row of muted badges reads too heavy after upgrading, that surface likely wants
+  `<tag-ui tone="muted">` (which keeps the quiet chrome) or no chip at all.
+
+- **`status="beta"`** now renders `primary` instead of `accent` — same pixels, no action;
+  listed only so diff-watchers aren't surprised by the attribute reflection changing.
+
+- **`<mark-ui variant="muted">` — value REMOVED, and unlike alert's it was a real render.**
+  There is no enum successor: mark's four variants are a *family* axis and its family-less
+  identity is the yellow marker itself, so a neutral highlight is now a token override, not a
+  variant. Rewrite each site to the public tokens (`--mark-bg` / `--mark-fg` already exist and
+  are unchanged), or pick a real family if the highlight was actually semantic:
+
+  ```html
+  <!-- before -->  <mark-ui variant="muted">term</mark-ui>
+  <!-- after  -->  <mark-ui style="--mark-bg: var(--a-bg-muted); --mark-fg: var(--md-sys-color-neutral-on-surface)">term</mark-ui>
+  ```
+
+  ```bash
+  rg -nU '<mark-ui(\s[^>]*)?\svariant="muted"' -g '!*MIGRATION*' -g '!*CHANGELOG.md'
+  ```
+
+  Left unmigrated, `variant="muted"` matches no rule and the mark renders the default yellow —
+  fails loud (visibly), not silent.
+
+### Verify
+
+```bash
+git grep -nE '<(badge|tag)-ui[^>]*variant="(accent|muted|neutral)"'   # must be 0
+git grep -nE '<button-ui[^>]*color="accent"'                          # must be 0
+# must be 0 — -U for multi-line tags; the excludes keep this guide's own before/after
+# examples and generated artifacts out of the count
+rg -nU '<(alert|mark)-ui(\s[^>]*)?\svariant="(muted|neutral)"' \
+  -g '!*MIGRATION*' -g '!*CHANGELOG.md' -g '!**/dist/**' -g '!*.a2ui.json' -g '!*.examples.md'
+git grep -rnE "setAttribute\('variant', *'(accent|muted|neutral)'\)"  # 0 on badge/tag/alert/mark hosts
+npm run check   # in-repo consumers; downstream: your app's build + a visual pass on badge-dense views
+```
+
+---
+
 ## 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.

package/components/accordion/accordion-item.a2ui.json

@@ -102,6 +102,14 @@
         "description": "Open body top padding.",
         "default": 0
       },
+      "--accordion-item-body-px": {
+        "description": "Open body left/right padding — independent of the header's --accordion-item-px.",
+        "default": "var(--accordion-item-px)"
+      },
+      "--accordion-item-body-py": {
+        "description": "Open body bottom padding — independent of the header's --accordion-item-py.",
+        "default": "var(--accordion-item-py)"
+      },
       "--accordion-item-border": {
         "description": "Item surface border (full shorthand — mirrors --card-border).",
         "default": "none"

package/components/accordion/accordion-item.yaml

@@ -82,6 +82,12 @@ tokens:
   --accordion-item-body-pt:
     description: Open body top padding.
     default: 0
+  --accordion-item-body-px:
+    description: Open body left/right padding — independent of the header's --accordion-item-px.
+    default: var(--accordion-item-px)
+  --accordion-item-body-py:
+    description: Open body bottom padding — independent of the header's --accordion-item-py.
+    default: var(--accordion-item-py)
 
 keywords:
   - accordion-item

package/components/accordion/accordion.css

@@ -36,6 +36,8 @@
     --accordion-item-border:  none;
     --accordion-item-divider: none;
     --accordion-item-body-pt: 0;
+    --accordion-item-body-px: var(--accordion-item-px);
+    --accordion-item-body-py: var(--accordion-item-py);
 
     /* ── Colors ── */
     --accordion-item-header-fg:       var(--md-sys-color-neutral-on-surface-variant);
@@ -196,7 +198,7 @@
 
   :scope[open] [slot="body"] {
     display: block;
-    padding: var(--accordion-item-body-pt) var(--accordion-item-px) var(--accordion-item-py);
+    padding: var(--accordion-item-body-pt) var(--accordion-item-body-px) var(--accordion-item-body-py);
     border-top: var(--accordion-item-divider);   /* default `none` in flat → invisible, zero layout (Finding 3) */
   }
 }

package/components/agent-reasoning/agent-reasoning.a2ui.json

@@ -111,7 +111,7 @@
     ],
     "slots": {
       "default": {
-        "description": "Default slot — primary child content."
+        "description": "Default slot — NOT a step-authoring surface: the component rebuilds its body from the addStep()/addThought() pipeline and does not consume authored children (gh#938)."
       }
     },
     "states": [

package/components/agent-reasoning/agent-reasoning.yaml

@@ -57,7 +57,7 @@ events:
         description: Whether the reasoning section is now collapsed.
 slots:
   default:
-    description: "Default slot — primary child content."
+    description: "Default slot — NOT a step-authoring surface: the component rebuilds its body from the addStep()/addThought() pipeline and does not consume authored children (gh#938)."
 states:
   - name: idle
     description: Default, ready for interaction.
@@ -72,8 +72,8 @@ a2ui:
   rules:
     - rule: 'Agent inner-monologue + pipeline viewer with steps, thoughts, plans, and iterations.'
       reason: 'Reasoning visualization surface.'
-    - rule: 'Composes <timeline-ui> internally — pass reasoning steps as children rendered as <timeline-item-ui>.'
-      reason: 'Composition contract.'
+    - rule: 'JS-property-driven ONLY — steps arrive via addStep()/addThought(); the component renders them internally as <timeline-item-ui> rows. Authored light-DOM children are NOT consumed (gh#938) — for a static/harvestable reasoning-steps surface, author a plain <timeline-ui> with <timeline-item-ui> children instead.'
+      reason: 'Composition contract — the previous wording ("pass reasoning steps as children") read as declarative-children support the class never had; a stateful pipeline (timers, spine layout, iterations) has no static form.'
     - rule: 'noAutocollapse attribute prevents the auto-collapse-on-complete behavior; useful for debug surfaces.'
       reason: 'Behavior knob.'
     - rule: 'Different from <agent-trace-ui> (metrics + tool-call summary) — reasoning is narrative, trace is structured-data.'

package/components/alert/alert.a2ui.json

@@ -88,16 +88,14 @@
       "default": ""
     },
     "variant": {
-      "description": "Semantic color variant.",
+      "description": "Semantic severity family — the only color axis alert exposes. A quiet/passive banner is the family-less `default` (no attribute): the retired `muted`/`neutral` values were exact aliases of it.",
       "type": "string",
       "enum": [
         "default",
         "info",
         "success",
         "warning",
-        "danger",
-        "muted",
-        "neutral"
+        "danger"
       ],
       "default": "default"
     }
@@ -137,7 +135,7 @@
       },
       {
         "description": "Card with error alert and a retry button for error state display.",
-        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\",\n      \"ftr\"\n    ]\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"alert\"\n    ]\n  },\n  {\n    \"id\": \"alert\",\n    \"component\": \"Alert\",\n    \"variant\": \"error\",\n    \"title\": \"Something went wrong\",\n    \"description\": \"We encountered an error while loading the data. Please try again.\"\n  },\n  {\n    \"id\": \"ftr\",\n    \"component\": \"Footer\",\n    \"children\": [\n      \"retry\"\n    ]\n  },\n  {\n    \"id\": \"retry\",\n    \"component\": \"Button\",\n    \"text\": \"Retry\",\n    \"icon\": \"refresh\",\n    \"variant\": \"primary\"\n  }\n]",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\",\n      \"ftr\"\n    ]\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"alert\"\n    ]\n  },\n  {\n    \"id\": \"alert\",\n    \"component\": \"Alert\",\n    \"variant\": \"danger\",\n    \"title\": \"Something went wrong\",\n    \"description\": \"We encountered an error while loading the data. Please try again.\"\n  },\n  {\n    \"id\": \"ftr\",\n    \"component\": \"Footer\",\n    \"children\": [\n      \"retry\"\n    ]\n  },\n  {\n    \"id\": \"retry\",\n    \"component\": \"Button\",\n    \"text\": \"Retry\",\n    \"icon\": \"refresh\",\n    \"variant\": \"primary\"\n  }\n]",
         "name": "error-state"
       },
       {

package/components/alert/alert.class.js

@@ -17,7 +17,7 @@
  *
  * Inline alert banner with optional icon and close button.
  *
- * Variants: default, info, success, warning, danger, muted, neutral
+ * Variants: default, info, success, warning, danger
  * Slots: leading (icon), content (text), close (dismiss button)
  *
  * Events:
@@ -100,14 +100,14 @@ export class UIAlert extends UIElement {
    *
    *   HALLUCINATION ALIASES (warn-once, encourage canonical form):
    *     - variant="error" → variant="danger"  (not in the canonical
-   *       enum [default, info, success, warning, danger, muted, neutral])
+   *       enum [default, info, success, warning, danger])
    *     - [closeable] → [closable]  (alternate spelling, less standard
    *       than dismissible/closable; warn to discourage)
    */
   #normalizeAliases() {
     // variant=error → danger (hallucination; warn)
     if (this.getAttribute('variant') === 'error') {
-      _warnOnce('variant-error', 'variant="error" is not in the canonical enum [default, info, success, warning, danger, muted, neutral]. Mapping to "danger". Fix the source (LLM prompt / corpus pattern) to emit "danger" directly.');
+      _warnOnce('variant-error', 'variant="error" is not in the canonical enum [default, info, success, warning, danger]. Mapping to "danger". Fix the source (LLM prompt / corpus pattern) to emit "danger" directly.');
       this.setAttribute('variant', 'danger');
     }
 

package/components/alert/alert.css

@@ -76,18 +76,11 @@
     --alert-icon-fg: var(--md-sys-color-danger-on-danger-container);
   }
 
-  /* `muted` and `neutral` are semantic aliases of the base — same tokens
-     as the default variant, declared explicitly so the yaml enum and the
-     CSS contract agree. Use cases: passive callouts (beta banners,
-     tertiary notes) where the alert should read as quiet chrome rather
-     than carrying tonal weight. */
-  :scope[variant="muted"],
-  :scope[variant="neutral"] {
-    --alert-bg:      var(--a-bg-muted);
-    --alert-fg:      var(--md-sys-color-neutral-on-surface);
-    --alert-border:  var(--md-sys-color-neutral-outline-variant);
-    --alert-icon-fg: var(--a-fg-muted);
-  }
+  /* NB `variant` is alert's ONLY color axis and it is family-only
+     (gh#881, the two-axis convention). The former `muted`/`neutral`
+     values re-declared the exact base tokens above — a second name for
+     "no variant attribute" — and are retired: a passive callout (beta
+     banner, tertiary note) is just a bare <alert-ui>. */
 
   /* ── Slots ── */
   :scope [slot="leading"] {

package/components/alert/alert.d.ts

@@ -48,8 +48,8 @@ export class UIAlert extends UIElement {
   reason: '' | 'declined' | 'expired' | 'insufficient' | 'network';
   /** Single-line alert message. For two-line "headline + body" alerts, use [title] + [description] instead. For rich content (links, formatting), use the [slot="content"] slot. */
   text: string;
-  /** Semantic color variant. */
-  variant: 'default' | 'info' | 'success' | 'warning' | 'danger' | 'muted' | 'neutral';
+  /** Semantic severity family — the only color axis alert exposes. A quiet/passive banner is the family-less `default` (no attribute): the retired `muted`/`neutral` values were exact aliases of it. */
+  variant: 'default' | 'info' | 'success' | 'warning' | 'danger';
 
   addEventListener(type: 'close', listener: (ev: AlertCloseEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener(type: 'dunning-action', listener: (ev: AlertDunningActionEvent) => unknown, options?: boolean | AddEventListenerOptions): void;

package/components/alert/alert.yaml

@@ -58,7 +58,10 @@ props:
     type: string
     default: ""
   variant:
-    description: Semantic color variant.
+    description: >-
+      Semantic severity family — the only color axis alert exposes. A
+      quiet/passive banner is the family-less `default` (no attribute):
+      the retired `muted`/`neutral` values were exact aliases of it.
     type: string
     default: default
     enum:
@@ -67,8 +70,6 @@ props:
       - success
       - warning
       - danger
-      - muted
-      - neutral
   pattern:
     description: >-
       Domain pattern mode. Default is empty (standard alert). Setting
@@ -177,7 +178,7 @@ requiredIcons:
   - x
 a2ui:
   rules:
-    - rule: 'Inline alert/banner for status messages within a content region. Severity via variant (info, success, warn, error).'
+    - rule: 'Inline alert/banner for status messages within a content region. Severity via variant (info, success, warning, danger) — those four plus the family-less default are the whole enum.'
       reason: 'Canonical inline-alert primitive.'
     - rule: 'For ephemeral toast notifications use <toast-ui> (or post to <feed-ui>); alert-ui is persistent inline.'
       reason: 'Ephemeral vs persistent boundary.'
@@ -233,7 +234,7 @@ examples:
         {
           "id": "alert",
           "component": "Alert",
-          "variant": "error",
+          "variant": "danger",
           "title": "Something went wrong",
           "description": "We encountered an error while loading the data. Please try again."
         },

package/components/badge/badge.a2ui.json

@@ -2,7 +2,7 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$id": "https://adiaui.dev/a2ui/v0_9/components/Badge.json",
   "title": "Badge",
-  "description": "Inline pill-shaped badge — READ-ONLY status flag, count, or\nnotification dot. Text rendered via CSS `attr(text)`. Distinct from\n<tag-ui>, which is INTERACTIVE / removable and fires a `remove`\nevent. Use badge-ui for status flags (Beta / New / Deprecated),\nnotification counts, and unread indicators; use tag-ui for filter\nchips or user-managed labels.\n",
+  "description": "Inline pill-shaped badge — READ-ONLY status flag, count, or\nnotification dot. Text rendered via CSS `attr(text)`. Distinct from\n<tag-ui>, which is INTERACTIVE / removable and fires a `remove`\nevent. Use badge-ui for status flags (Beta / New / Deprecated),\nnotification counts, and unread indicators; use tag-ui for filter\nchips or user-managed labels.\n\nREGISTER (gh issue 845; weight revised gh#866): badge and tag share\nthe same geometry family — pill radius (`--a-radius-full`) and\npadding token rhythm are identical, so shape is NOT how you tell\nthem apart. Typography is: badge is UPPERCASE, mono (kbd-ui's\n`--a-font-family-code` stack), medium weight, wide-tracked\n(`--a-font-tracking-wider`, 0.06em), tabular numerals for counts.\nTag stays proportional sentence-case, also weight 500 — weight no\nlonger distinguishes the two (gh#866); case + tracking + mono carry\nthe register split now. Neither component exposes a prop that\ncrosses this line; the registers cannot be mixed à la carte.\nRemaining distinctions: badge is non-interactive and carries the\nsemantic-color voice (status tones ARE the message, solid by\ndefault — gh#864); tag is interactive/removable, muted/tinted by\ndefault for family variants (gh#864), solid by default for the\nfamily-less variant (gh#794, unaffected by gh#864).\n",
   "type": "object",
   "allOf": [
     {
@@ -32,7 +32,7 @@
       "default": "md"
     },
     "status": {
-      "description": "Semantic status shorthand. Auto-maps to variant and sets text. `new` → success \"New\"; `updated` → info \"Updated\"; `deprecated` → warning \"Deprecated\"; `removed` → danger \"Removed\"; `beta` → accent \"Beta\". Use `variant` + `text` directly for custom chips.",
+      "description": "Semantic status shorthand. Auto-maps to variant and sets text. `new` → success \"New\"; `updated` → info \"Updated\"; `deprecated` → warning \"Deprecated\"; `removed` → danger \"Removed\"; `beta` → primary \"Beta\". Use `variant` + `text` directly for custom chips.",
       "type": "string",
       "enum": [
         "new",
@@ -53,28 +53,25 @@
       "$ref": "common_types.json#/$defs/DynamicString"
     },
     "tone": {
-      "description": "Fill style — orthogonal to [variant]. Badge defaults to `muted`\n(quiet metadata is the primitive's identity — counts, IDs, status\npills in dense rows). Three values:\n  - `muted` (default) — tinted bg + scheme-paired text. Same as\n    the existing family-variant rules.\n  - `solid` — saturated bg + on-strong text. Use for hero badges\n    where the badge IS the state (e.g. a single inline error). The\n    existing `primary` variant is a shortcut for accent + solid.\n  - `outline` — transparent bg + family-colored border + family-\n    colored text. Lightest visual weight; good in dense data rows.\nVocabulary mirrors `<tag-ui>` (which defaults to solid, given its\ndifferent role as filter / autocomplete chip).\n",
+      "description": "Fill style — orthogonal to [variant]. Badge defaults to `solid`\n(gh#864 — badge and tag were swapped relative to their reported\ndefault formulas; this restores badge's own). Three values:\n  - `solid` (default) — saturated bg + on-strong text. The badge\n    IS the state (status stamp). `primary` is badge's sole\n    brand-emphasis variant (`accent` retired, gh#874).\n  - `muted` — tinted bg + scheme-paired text. Use for quiet\n    metadata — counts, IDs, status pills in dense rows. Family-tinted\n    `muted` (e.g. `variant=\"info\" tone=\"muted\"`) shares `<tag-ui>`'s\n    `[tone=\"muted\"]` shape; family-less `tone=\"muted\"` does NOT\n    (gh#873) — it renders the stronger `neutral-low` fill, while\n    `<tag-ui>`'s family-less muted stays on the lighter\n    `--a-bg-muted` pair (gh#778 dense-list rationale).\n  - `outline` — transparent bg + family-colored border + family-\n    colored text. Lightest visual weight; good in dense data rows.\nVocabulary mirrors `<tag-ui>` (which now defaults to `muted` for\nits family variants, gh#864 — different role as filter /\nautocomplete chip).\n",
       "type": "string",
       "enum": [
         "muted",
         "solid",
         "outline"
       ],
-      "default": "muted"
+      "default": "solid"
     },
     "variant": {
       "description": "Semantic color variant.",
       "type": "string",
       "enum": [
         "default",
-        "accent",
         "info",
         "success",
         "warning",
         "danger",
-        "primary",
-        "muted",
-        "neutral"
+        "primary"
       ],
       "default": "default"
     }
@@ -94,7 +91,7 @@
     "examples": [
       {
         "description": "Horizontal chart legend — Row of Badges with icon=\"dot\". Each badge's variant supplies the dot color. CANONICAL PATTERN: do NOT compose legends as Row(Row(Badge[text=●], Text), …) — that produces rows-of-rows markup. Use one Badge[icon=dot, text=label, variant=color] per series instead.",
-        "a2ui": "[\n  {\n    \"id\": \"legend\",\n    \"component\": \"Row\",\n    \"gap\": \"3\",\n    \"align\": \"center\",\n    \"children\": [\n      \"l1\",\n      \"l2\",\n      \"l3\",\n      \"l4\"\n    ]\n  },\n  {\n    \"id\": \"l1\",\n    \"component\": \"Badge\",\n    \"icon\": \"dot\",\n    \"text\": \"Organic\",\n    \"variant\": \"accent\",\n    \"size\": \"sm\"\n  },\n  {\n    \"id\": \"l2\",\n    \"component\": \"Badge\",\n    \"icon\": \"dot\",\n    \"text\": \"Direct\",\n    \"variant\": \"success\",\n    \"size\": \"sm\"\n  },\n  {\n    \"id\": \"l3\",\n    \"component\": \"Badge\",\n    \"icon\": \"dot\",\n    \"text\": \"Referral\",\n    \"variant\": \"warning\",\n    \"size\": \"sm\"\n  },\n  {\n    \"id\": \"l4\",\n    \"component\": \"Badge\",\n    \"icon\": \"dot\",\n    \"text\": \"Social\",\n    \"variant\": \"info\",\n    \"size\": \"sm\"\n  }\n]",
+        "a2ui": "[\n  {\n    \"id\": \"legend\",\n    \"component\": \"Row\",\n    \"gap\": \"3\",\n    \"align\": \"center\",\n    \"children\": [\n      \"l1\",\n      \"l2\",\n      \"l3\",\n      \"l4\"\n    ]\n  },\n  {\n    \"id\": \"l1\",\n    \"component\": \"Badge\",\n    \"icon\": \"dot\",\n    \"text\": \"Organic\",\n    \"variant\": \"primary\",\n    \"size\": \"sm\"\n  },\n  {\n    \"id\": \"l2\",\n    \"component\": \"Badge\",\n    \"icon\": \"dot\",\n    \"text\": \"Direct\",\n    \"variant\": \"success\",\n    \"size\": \"sm\"\n  },\n  {\n    \"id\": \"l3\",\n    \"component\": \"Badge\",\n    \"icon\": \"dot\",\n    \"text\": \"Referral\",\n    \"variant\": \"warning\",\n    \"size\": \"sm\"\n  },\n  {\n    \"id\": \"l4\",\n    \"component\": \"Badge\",\n    \"icon\": \"dot\",\n    \"text\": \"Social\",\n    \"variant\": \"info\",\n    \"size\": \"sm\"\n  }\n]",
         "name": "chart-legend"
       },
       {

package/components/badge/badge.class.js

@@ -12,14 +12,14 @@
  */
 
 /**
- * <badge-ui text="New" variant="accent"></badge-ui>
+ * <badge-ui text="New" variant="primary"></badge-ui>
  * <badge-ui text="3" variant="danger" size="sm"></badge-ui>
- * <badge-ui text="Organic" variant="accent" icon="dot"></badge-ui>  ← chart legend chip
+ * <badge-ui text="Organic" variant="primary" icon="dot"></badge-ui>  ← chart legend chip
  * <badge-ui status="beta"></badge-ui>                                ← status shorthand
  *
  * Inline badge / tag. Pill-shaped, text rendered via CSS attr().
  *
- * Variants: default, accent, info, success, warning, danger, primary, muted, neutral
+ * Variants: default, info, success, warning, danger, primary
  * Sizes: sm, md (default)
  * Icon: optional leading icon (any registered icon name; "dot" for legend
  *       markers). Inherits the variant's foreground color so legend chips
@@ -34,7 +34,7 @@ const STATUS_MAP = {
   updated:    { variant: 'info',    text: 'Updated' },
   deprecated: { variant: 'warning', text: 'Deprecated' },
   removed:    { variant: 'danger',  text: 'Removed' },
-  beta:       { variant: 'accent',  text: 'Beta' },
+  beta:       { variant: 'primary', text: 'Beta' },
 };
 
 export class UIBadge extends UIElement {