@adia-ai/web-components 0.7.27 → 0.8.0

package/CHANGELOG.md

@@ -1,4 +1,41 @@
 # Changelog — @adia-ai/web-components
+## [0.8.0] — 2026-07-15
+
+### BREAKING — Material Design color-token adoption (MINOR cut; see `.claude/docs/MIGRATION GUIDE.md` § v0.8.0)
+- **`--md-sys-color-*` is now the color system's source of truth and public API.** `styles/colors/material-static.css` (new) carries the full static export — 8 palettes × 59 semantic roles, verbatim from the nonoun-color-tokens-adia reference. The `--a-*` semantic layer (`semantics/core.css`, `surfaces.css`, `semantics/{features,aliases}.css`) is now a thin alias layer reading FROM it; the old calc()-computed OKLCH engine no longer feeds the semantic tokens. Contract + full phase history: `.claude/docs/specs/material-color-bridge-contract.md`.
+- **Removed: the 19 `--a-accent-*` back-compat aliases** (`accent` → `primary` family rename; sweep: `--a-accent*` → `--a-primary*`, or consume `--md-sys-color-primary*` directly).
+- **Removed: `styles/colors/scrims.css`'s 189 raw per-family scrim primitives** (`--a-{family}-{0..6}-{tint-|shade-}scrim`) — zero consumers remained once the semantic layer moved to the static `--md-sys-color-{family}-scrim-{weakest..strongest}` ladder. The semantic `--a-canvas-{0..6}-scrim` / `--a-scrim-*` role names keep working. Alpha ceiling note: the static ladder tops out at 60% (old ramp: 70%).
+- **Removed: `styles/colors/primitives-accent.css`** (deep-import path) — renamed `primitives-primary.css`.
+- **Behavioral: the 8 named `[theme]` presets no longer re-color components.** The presets overrode parametric hue/chroma knobs the static export doesn't read; only `--a-brand-hue` + the non-color knobs (`--a-radius-k`, `--a-density`, `--a-shadow-intensity`) still respond to `[theme]`. Operator-accepted tradeoff of the adoption.
+
+### Added
+- **`secondary` + `tertiary` color families** (full ramps, semantics, scrim roles): `tertiary` at hue 335 — the one slot in the open hue range that clears real CVD separation from all four intent hues (empirical deuteranopia/protanopia sweep via culori, not estimation); `secondary` as a muted `primary` variant (same hue 225, c-max 0.08), zero new CVD risk.
+
+### Changed
+- **Repo-wide consumer sweep onto `--md-sys-color-*`** — 2,472 call sites across 584 files (components, traits, demos, patterns, apps, site) moved from `--a-*` reads to the Material roles (`scripts/refactor/adopt-material-tokens.mjs`).
+- **12 component yaml SoTs re-synced with their swept CSS** (`calendar-grid`, `date-range-picker`, `inline-edit`, `noodles`, `progress`, `step-progress`, `toc`, `skip-nav` here; 4 more in web-modules) — token `default:` docs referenced the removed `--a-accent-*` names; sidecars + catalog regenerated.
+- **`tag-ui`** — warning solid-fill now pairs the amber fill with Material's fixed-light `on-warning` (white in both schemes, per Material's on-color law); the pre-migration dark-text override is gone. Known lower-than-siblings contrast, operator-accepted pending palette adjustment (TKT-0018, wontfix). Tests re-aligned to the post-migration token names (`tag.test.js`, `spinner.test.js`).
+
+### Maintenance
+- **`dist/` CDN bundles rebuilt** — and ~6% smaller (`web-components.min.css` 628.6 → ~590 KB): the retired scrims/bridge dead code is actually gone from the payload.
+## [0.7.28] — 2026-07-14
+
+### Added
+- **`table-ui` (`components/table/cell-types.js`) — `markdown` cell type: inline `` `code` ``/**bold**/*italic*/`[link](href)` rendered as real elements, not a plain string.** TKT-0008 (site-a2ui re-verification, direction 1): docs reference tables (props/API tables) mix prose with multiple inline `<code>` spans per cell — content the `{columns, data}` JSON contract previously couldn't carry, forcing a preserved-HTML fallback that dropped the table from the A2UI graph entirely. Renders via `core/markdown.js`'s `inline()` (now exported) — the exact encode/decode pairing the docs-transpiler's own `convertInline()` already produces elsewhere in the pipeline. `[title]` carries the tag-stripped plain text for the truncation tooltip. New unit suite in `table.test.js` (3 cases).
+
+### Changed
+- **`core/markdown.js` — `inline()` is now exported.** Was module-private; reused by `cell-types.js`'s new `markdown` cell type as the client-side half of the docs-transpiler's `convertInline()` contract. No behavior change to existing callers.
+
+### Fixed — TKT-0010, corpus admission-validation content gaps
+- **`kbd.yaml` — declares a `textContent` prop.** Every other text-bearing leaf (`Text`, `Code`) already declares one; `Kbd` was missing it, so the transpiler's unconditional `textContent` extraction for leaf types produced a value the catalog schema rejected as an unevaluated property on every harvested `<kbd-ui>` chunk (12 instances). Purely a schema declaration gap — no behavior change (the transpiler already extracted the value correctly).
+- **`chart.yaml`/`table.yaml` — `data` prop declares `items: {type: object}`.** Opts these two dynamic array props into `@adia-ai/a2ui-corpus`'s new `DynamicObjectList` schema (array-of-object) instead of the default `DynamicStringList` (array-of-string) — the wrong shape for chart/table row records. Paired with a transpiler fix in `@adia-ai/a2ui-compose` (the attribute value was never actually parsed); see that package's CHANGELOG.
+
+### Fixed — GH #224, SVG zero-viewport silent non-render
+- **`styles/resets.css` — `svg` gets its own reset rule, dropping `max-inline-size`/`block-size` instead of sharing `img`/`picture`/`video`/`canvas`'s `max-inline-size: 100%; block-size: auto` rule.** Per the SVG spec, a zero-size viewport — exactly what `max-inline-size: 100%` computes to inside a zero-intrinsic-size ancestor (the common `width:0; height:0; transform:scale(s)` pattern for a CSS-scaled canvas/scene) — makes the element **not render at all**, not "render at 0 visual size": silent, no console warning. `img`/`picture`/`video`/`canvas` don't share this failure mode. Components that embed SVG (`icon-ui`, etc.) already size it explicitly in their own scoped CSS and are unaffected either way (verified: no component CSS relies on the global rule's sizing behavior). Verified via the full web-modules test suite + a manual repro check against the reporting issue's own reproduction case (no dedicated new test — a global CSS reset rule).
+
+### Maintenance
+- **`dist/` CDN bundles rebuilt** (`host.min.css`, `host.sheet.js`, `theme-provider.min.js`, `web-components.min.{css,js}`, `web-components.sheet.js`) to inline the `resets.css` fix above.
+
 ## [0.7.27] — 2026-07-12
 
 Fixes harvested from the /site → A2UI docs migration's live operator reports (TKT-0002…0006) — each was a real framework defect the migration surfaced, not a docs-only issue — plus the router race that three separate flake classes traced back to.

package/components/accordion/accordion.css

@@ -38,11 +38,11 @@
     --accordion-item-body-pt: 0;
 
     /* ── Colors ── */
-    --accordion-item-header-fg:       var(--a-fg-subtle);
+    --accordion-item-header-fg:       var(--md-sys-color-neutral-on-surface-variant);
     --accordion-item-header-fg-hover: var(--a-fg-strong);
     --accordion-item-header-bg-hover: var(--a-bg-muted);
     --accordion-item-caret-fg:        var(--a-fg-muted);
-    --accordion-item-caret-fg-hover:  var(--a-fg-subtle);
+    --accordion-item-caret-fg-hover:  var(--md-sys-color-neutral-on-surface-variant);
 
     /* ── Layout ── */
     --accordion-item-radius:          var(--a-radius-md);
@@ -92,8 +92,8 @@
   :scope[variant="contained"],
   :where(accordion-ui[variant="contained"]) > :scope:not([variant="flat"]) {
     --accordion-item-bg:                  var(--a-bg-subtle);
-    --accordion-item-border:              1px solid var(--a-border-subtle);
-    --accordion-item-divider:             1px solid var(--a-border-subtle);
+    --accordion-item-border:              1px solid var(--md-sys-color-neutral-outline-variant);
+    --accordion-item-divider:             1px solid var(--md-sys-color-neutral-outline-variant);
     --accordion-item-body-pt:             var(--a-space-2);
     --accordion-item-header-radius:       0;      /* pill corners flush to the surface (Finding 8) */
     --accordion-item-header-focus-shadow: none;   /* inner ring off; surface ring below (Finding 2) */
@@ -139,6 +139,15 @@
 
   :scope [slot="header"]:hover {
     color: var(--accordion-item-header-fg-hover);
+  }
+
+  /* Hover highlight paints the ITEM's own box (TKT-0016), not just the
+     header slot — so an expanded item's body is inside the highlight
+     too, not sitting outside it on the plain background. Trigger stays
+     the header (only child that's ever :hover-targeted here); paint
+     target moves to :scope, which already carries the item's own
+     border-radius, so header + body read as one continuous shape. */
+  :scope:has(> [slot="header"]:hover) {
     background: var(--accordion-item-header-bg-hover);
   }
 

package/components/action-list/action-list.css

@@ -36,14 +36,14 @@ action-item-ui:hover [slot="icon"] {
     --action-item-radius:          var(--a-radius-md);
 
     --action-item-bg:              transparent;
-    --action-item-fg:              var(--a-fg-subtle);
+    --action-item-fg:              var(--md-sys-color-neutral-on-surface-variant);
     --action-item-fg-hover:        var(--a-fg-strong);
     --action-item-bg-hover:        var(--a-bg-muted);
     --action-item-fg-disabled:     var(--a-ui-text-disabled);
     --action-item-icon-fg:         var(--a-fg-muted);
-    --action-item-icon-fg-hover:   var(--a-fg);
+    --action-item-icon-fg-hover:   var(--md-sys-color-neutral-on-surface);
     --action-item-danger-fg:       var(--a-danger-bg);
-    --action-item-danger-bg:       var(--a-danger-muted);
+    --action-item-danger-bg:       var(--md-sys-color-danger-container);
 
     --action-item-font-size:       var(--a-ui-size);
     --action-item-icon-size:       var(--action-item-font-size);

package/components/agent-artifact/agent-artifact.css

@@ -9,10 +9,10 @@
 
     /* ── Colors ── */
     --agent-artifact-bg:                var(--a-bg-subtle);
-    --agent-artifact-fg:                var(--a-fg);
+    --agent-artifact-fg:                var(--md-sys-color-neutral-on-surface);
     --agent-artifact-fg-muted:          var(--a-fg-muted);
-    --agent-artifact-border:            var(--a-border-subtle);
-    --agent-artifact-header-bg:         var(--a-bg);
+    --agent-artifact-border:            var(--md-sys-color-neutral-outline-variant);
+    --agent-artifact-header-bg:         var(--md-sys-color-neutral-background);
     --agent-artifact-header-bg-hover:   var(--a-bg-hover);
 
     /* ── Typography ── */
@@ -33,7 +33,7 @@
     min-width: 0;
   }
 
-  :scope[tone="accent"]  { --agent-artifact-border: var(--a-accent-bg); }
+  :scope[tone="accent"]  { --agent-artifact-border: var(--a-primary-bg); }
   :scope[tone="warning"] { --agent-artifact-border: var(--a-warning-bg); }
   :scope[tone="danger"]  { --agent-artifact-border: var(--a-danger-bg); }
 

package/components/agent-questions/agent-questions.css

@@ -9,17 +9,17 @@
     --agent-questions-desc-size:       var(--a-ui-sm);
 
     /* ── Colors ── */
-    --agent-questions-q-fg:            var(--a-fg);
+    --agent-questions-q-fg:            var(--md-sys-color-neutral-on-surface);
     --agent-questions-helper-fg:       var(--a-fg-muted);
-    --agent-questions-label-fg:        var(--a-fg);
+    --agent-questions-label-fg:        var(--md-sys-color-neutral-on-surface);
     --agent-questions-desc-fg:         var(--a-fg-muted);
-    --agent-questions-option-bg:       var(--a-bg);
+    --agent-questions-option-bg:       var(--md-sys-color-neutral-background);
     --agent-questions-option-bg-hover: var(--a-bg-subtle);
-    --agent-questions-option-bg-sel:   var(--a-accent-muted);
-    --agent-questions-option-border:   var(--a-border-subtle);
-    --agent-questions-option-border-sel: var(--a-accent-bg);
-    --agent-questions-check-bg:        var(--a-accent-bg);
-    --agent-questions-check-fg:        var(--a-accent-fg);
+    --agent-questions-option-bg-sel:   var(--md-sys-color-primary-container);
+    --agent-questions-option-border:   var(--md-sys-color-neutral-outline-variant);
+    --agent-questions-option-border-sel: var(--a-primary-bg);
+    --agent-questions-check-bg:        var(--a-primary-bg);
+    --agent-questions-check-fg:        var(--md-sys-color-primary-on-primary);
 
     /* ── Layout ── */
     --agent-questions-gap:             var(--a-space-2);

package/components/agent-reasoning/agent-reasoning.css

@@ -10,15 +10,15 @@
     --agent-reasoning-weight-heading:  var(--a-weight-medium);
 
     /* Colors */
-    --agent-reasoning-fg:              var(--a-fg);
+    --agent-reasoning-fg:              var(--md-sys-color-neutral-on-surface);
     --agent-reasoning-fg-muted:        var(--a-fg-muted);
-    --agent-reasoning-fg-subtle:       var(--a-fg-subtle);
-    --agent-reasoning-border:          var(--a-border-subtle);
-    --agent-reasoning-spinner-track:   var(--a-border-subtle);
-    --agent-reasoning-spinner-head:    var(--a-accent-bg);
+    --agent-reasoning-fg-subtle:       var(--md-sys-color-neutral-on-surface-variant);
+    --agent-reasoning-border:          var(--md-sys-color-neutral-outline-variant);
+    --agent-reasoning-spinner-track:   var(--md-sys-color-neutral-outline-variant);
+    --agent-reasoning-spinner-head:    var(--a-primary-bg);
     --agent-reasoning-iter-bg:         var(--a-bg-subtle);
     --agent-reasoning-iter-bg-active:  var(--a-bg-muted);
-    --agent-reasoning-iter-border:     var(--a-border-subtle);
+    --agent-reasoning-iter-border:     var(--md-sys-color-neutral-outline-variant);
 
     /* Sizes */
     --agent-reasoning-marker-size:     var(--a-icon-size);

package/components/agent-trace/agent-trace.css

@@ -5,11 +5,11 @@
     --agent-trace-label-font:    var(--a-ui-sm);
 
     /* ── Colors ── */
-    --agent-trace-fg:            var(--a-fg);
+    --agent-trace-fg:            var(--md-sys-color-neutral-on-surface);
     --agent-trace-fg-muted:      var(--a-fg-muted);
-    --agent-trace-fg-subtle:     var(--a-fg-subtle);
-    --agent-trace-sep:           var(--a-fg-subtle);
-    --agent-trace-border:        var(--a-border-subtle);
+    --agent-trace-fg-subtle:     var(--md-sys-color-neutral-on-surface-variant);
+    --agent-trace-sep:           var(--md-sys-color-neutral-on-surface-variant);
+    --agent-trace-border:        var(--md-sys-color-neutral-outline-variant);
 
     /* ── Layout ── */
     --agent-trace-pill-gap:      var(--a-space-1);

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

@@ -197,7 +197,7 @@ class UIAgentTrace extends UIElement {
       success: 'var(--a-success-strong)',
       warning: 'var(--a-warning-strong)',
       danger:  'var(--a-danger-strong)',
-      info:    'var(--a-accent-strong)',
+      info:    'var(--a-primary-strong)',
       neutral: 'var(--a-fg-muted)',
     }[tone] || 'var(--a-fg-muted)';
 

package/components/alert/alert.css

@@ -2,8 +2,8 @@
   :where(:scope) {
     /* ── Colors ── */
     --alert-bg:       var(--a-bg-muted);
-    --alert-fg:       var(--a-fg);
-    --alert-border:   var(--a-border-subtle);
+    --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);
 
     /* ── Layout ── */
@@ -44,30 +44,30 @@
 
   /* ── Variants ── */
   :scope[variant="info"] {
-    --alert-bg:      var(--a-info-muted);
-    --alert-fg:      var(--a-info-text);
-    --alert-border:  var(--a-info-border-subtle);
+    --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);
   }
 
   :scope[variant="success"] {
-    --alert-bg:      var(--a-success-muted);
-    --alert-fg:      var(--a-success-text);
-    --alert-border:  var(--a-success-border-subtle);
+    --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);
   }
 
   :scope[variant="warning"] {
-    --alert-bg:      var(--a-warning-muted);
-    --alert-fg:      var(--a-warning-text);
-    --alert-border:  var(--a-warning-border-subtle);
+    --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);
   }
 
   :scope[variant="danger"] {
-    --alert-bg:      var(--a-danger-muted);
-    --alert-fg:      var(--a-danger-text);
-    --alert-border:  var(--a-danger-border-subtle);
+    --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);
   }
 
@@ -79,8 +79,8 @@
   :scope[variant="muted"],
   :scope[variant="neutral"] {
     --alert-bg:      var(--a-bg-muted);
-    --alert-fg:      var(--a-fg);
-    --alert-border:  var(--a-border-subtle);
+    --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);
   }
 

package/components/avatar/avatar.css

@@ -6,7 +6,7 @@
   :where(:scope) {
     --avatar-size:        var(--a-size);
     --avatar-bg:          var(--a-bg-muted);
-    --avatar-fg:          var(--a-fg-subtle);
+    --avatar-fg:          var(--md-sys-color-neutral-on-surface-variant);
     --avatar-radius:      var(--a-radius-full);
     --avatar-font-size:   var(--a-ui-sm);
     --avatar-font-weight: var(--a-weight-medium);
@@ -91,9 +91,9 @@ avatar-group-ui:hover > [slot="overflow"] {
     --avatar-group-counter-size:  2rem;
 
     /* ── Colors ── */
-    --avatar-group-border:        2px solid var(--a-bg);
+    --avatar-group-border:        2px solid var(--md-sys-color-neutral-background);
     --avatar-group-counter-bg:    var(--a-bg-muted);
-    --avatar-group-counter-fg:    var(--a-fg-subtle);
+    --avatar-group-counter-fg:    var(--md-sys-color-neutral-on-surface-variant);
     --avatar-group-counter-radius: var(--a-radius-full);
 
     /* ── Typography ── */

package/components/badge/badge.css

@@ -2,7 +2,7 @@
   :where(:scope) {
     /* ── Tokens ── */
     --badge-bg:        var(--a-bg-muted);
-    --badge-fg:        var(--a-fg);
+    --badge-fg:        var(--md-sys-color-neutral-on-surface);
     --badge-radius:    var(--a-radius-md);
     --badge-px:        var(--a-space-1-5);
     --badge-py:        2px;
@@ -73,28 +73,28 @@
      collapse contrast on muted: warning fails in dark, danger fails in light.
      Accent keeps the saturated-text-on-tint look (intentional brand emphasis). */
   :scope[variant="accent"] {
-    --badge-bg: var(--a-accent-muted);
-    --badge-fg: var(--a-accent-text);
+    --badge-bg: var(--md-sys-color-primary-container);
+    --badge-fg: var(--md-sys-color-primary-on-surface);
   }
 
   :scope[variant="info"] {
-    --badge-bg: var(--a-info-muted);
-    --badge-fg: var(--a-info-text);
+    --badge-bg: var(--md-sys-color-info-container);
+    --badge-fg: var(--md-sys-color-info-on-surface);
   }
 
   :scope[variant="success"] {
-    --badge-bg: var(--a-success-muted);
-    --badge-fg: var(--a-success-text);
+    --badge-bg: var(--md-sys-color-success-container);
+    --badge-fg: var(--md-sys-color-success-on-surface);
   }
 
   :scope[variant="warning"] {
-    --badge-bg: var(--a-warning-muted);
-    --badge-fg: var(--a-warning-text);
+    --badge-bg: var(--md-sys-color-warning-container);
+    --badge-fg: var(--md-sys-color-warning-on-surface);
   }
 
   :scope[variant="danger"] {
-    --badge-bg: var(--a-danger-muted);
-    --badge-fg: var(--a-danger-text);
+    --badge-bg: var(--md-sys-color-danger-container);
+    --badge-fg: var(--md-sys-color-danger-on-surface);
   }
 
   /* `primary` is the accent-filled variant — solid bg + on-accent text,
@@ -104,7 +104,7 @@
      primary variant. */
   :scope[variant="primary"] {
     --badge-bg: var(--a-primary-bg);
-    --badge-fg: var(--a-primary-fg);
+    --badge-fg: var(--md-sys-color-primary-on-primary);
   }
 
   /* `muted` and `neutral` are semantic aliases of the base — same tokens
@@ -114,7 +114,7 @@
   :scope[variant="muted"],
   :scope[variant="neutral"] {
     --badge-bg: var(--a-bg-muted);
-    --badge-fg: var(--a-fg);
+    --badge-fg: var(--md-sys-color-neutral-on-surface);
   }
 
   /* ── Tone modifier — orthogonal to [variant] ──
@@ -130,30 +130,30 @@
      See <tag-ui>'s identical workaround. Token-system follow-up planned. */
   :scope[tone="solid"][variant="info"] {
     --badge-bg: var(--a-info-bg);
-    --badge-fg: var(--a-info-fg);
+    --badge-fg: var(--md-sys-color-info-on-info);
   }
   :scope[tone="solid"][variant="success"] {
     --badge-bg: var(--a-success-bg);
-    --badge-fg: var(--a-success-fg);
+    --badge-fg: var(--md-sys-color-success-on-success);
   }
   :scope[tone="solid"][variant="warning"] {
     /* --a-warning-bg is the bright-amber step (semantics.css L3 redirect
        to -20-tint) — see also <tag-ui>'s warning solid pair. */
     --badge-bg: var(--a-warning-bg);
-    --badge-fg: var(--a-warning-fg);
+    --badge-fg: var(--md-sys-color-warning-on-warning);
   }
   :scope[tone="solid"][variant="danger"] {
     --badge-bg: var(--a-danger-bg);
-    --badge-fg: var(--a-danger-fg);
+    --badge-fg: var(--md-sys-color-danger-on-danger);
   }
   :scope[tone="solid"][variant="accent"] {
-    --badge-bg: var(--a-accent-bg);
-    --badge-fg: var(--a-accent-fg);
+    --badge-bg: var(--a-primary-bg);
+    --badge-fg: var(--md-sys-color-primary-on-primary);
   }
   /* Solid on neutral default → high-contrast inverse stamp. */
   :scope[tone="solid"]:not([variant="info"]):not([variant="success"]):not([variant="warning"]):not([variant="danger"]):not([variant="accent"]):not([variant="primary"]) {
-    --badge-bg: var(--a-fg);
-    --badge-fg: var(--a-bg);
+    --badge-bg: var(--md-sys-color-neutral-on-surface);
+    --badge-fg: var(--md-sys-color-neutral-background);
   }
 
   /* ── `[tone="outline"]` — transparent bg + family-colored border + text ── */
@@ -162,29 +162,29 @@
     border: 1px solid var(--badge-border, transparent);
   }
   :scope[tone="outline"][variant="info"] {
-    --badge-fg:     var(--a-info-text);
-    --badge-border: var(--a-info-border);
+    --badge-fg:     var(--md-sys-color-info-on-surface);
+    --badge-border: var(--md-sys-color-info-outline);
   }
   :scope[tone="outline"][variant="success"] {
-    --badge-fg:     var(--a-success-text);
-    --badge-border: var(--a-success-border);
+    --badge-fg:     var(--md-sys-color-success-on-surface);
+    --badge-border: var(--md-sys-color-success-outline);
   }
   :scope[tone="outline"][variant="warning"] {
-    --badge-fg:     var(--a-warning-text);
-    --badge-border: var(--a-warning-border);
+    --badge-fg:     var(--md-sys-color-warning-on-surface);
+    --badge-border: var(--md-sys-color-warning-outline);
   }
   :scope[tone="outline"][variant="danger"] {
-    --badge-fg:     var(--a-danger-text);
-    --badge-border: var(--a-danger-border);
+    --badge-fg:     var(--md-sys-color-danger-on-surface);
+    --badge-border: var(--md-sys-color-danger-outline);
   }
   :scope[tone="outline"][variant="accent"] {
-    --badge-fg:     var(--a-accent-text);
-    --badge-border: var(--a-accent-border);
+    --badge-fg:     var(--md-sys-color-primary-on-surface);
+    --badge-border: var(--md-sys-color-primary-outline);
   }
   /* Outline on neutral — fg-muted text + subtle ring. */
   :scope[tone="outline"]:not([variant="info"]):not([variant="success"]):not([variant="warning"]):not([variant="danger"]):not([variant="accent"]):not([variant="primary"]) {
     --badge-fg:     var(--a-fg-muted);
-    --badge-border: var(--a-border);
+    --badge-border: var(--md-sys-color-neutral-outline);
   }
 
   /* Size handled by universal [size] attribute system. */

package/components/blockquote/blockquote.css

@@ -9,7 +9,7 @@
     --blockquote-rule-width:  2px;
     --blockquote-pad-inline:  var(--a-space-3);
     --blockquote-pad-block:   var(--a-space-2);
-    --blockquote-fg:          var(--a-fg-subtle);
+    --blockquote-fg:          var(--md-sys-color-neutral-on-surface-variant);
     --blockquote-cite-fg:     var(--a-fg-muted);
     --blockquote-cite-size:   var(--a-ui-sm);
     --blockquote-cite-mt:     var(--a-space-2);

package/components/breadcrumb/breadcrumb.css

@@ -9,8 +9,8 @@
     --breadcrumb-current-weight: var(--a-weight-medium);
 
     /* ── Colors ── */
-    --breadcrumb-fg:           var(--a-fg-subtle);
-    --breadcrumb-fg-hover:     var(--a-fg);
+    --breadcrumb-fg:           var(--md-sys-color-neutral-on-surface-variant);
+    --breadcrumb-fg-hover:     var(--md-sys-color-neutral-on-surface);
     --breadcrumb-separator-fg: var(--a-fg-muted);
     --breadcrumb-current-fg:   var(--a-fg-strong);
 

package/components/button/button.css

@@ -19,7 +19,7 @@ button-ui:active { transform: scale(0.97); }
    untouched (primary/danger/etc. keep their light label). */
 button-ui:not([disabled]):hover { --button-bg: var(--button-bg-hover); }
 
-button-ui[variant="primary"]:not([disabled]):hover { --button-bg: var(--a-accent-strong); }
+button-ui[variant="primary"]:not([disabled]):hover { --button-bg: var(--a-primary-strong); }
 button-ui[color="danger"]:not([disabled]):hover     { --button-bg: var(--a-danger-strong); }
 button-ui[color="success"]:not([disabled]):hover    { --button-bg: var(--a-success-strong); }
 button-ui[color="info"]:not([disabled]):hover       { --button-bg: var(--a-info-strong); }
@@ -73,18 +73,18 @@ button-ui[variant="ghost"][color="warning"]:not([disabled]):hover   { --button-f
     --button-bg-hover:         var(--a-bg-strong);   /* neutral fill → neutral -strong surface on hover */
     --button-fg-hover:         var(--a-ui-text-hover);
     --button-border-hover:     transparent;
-    --button-bg-primary:       var(--a-primary);
+    --button-bg-primary:       var(--md-sys-color-primary);
     --button-fg-primary:       var(--a-chrome-light);
     --button-bg-outline:       transparent;
-    --button-fg-outline:       var(--a-fg);
+    --button-fg-outline:       var(--md-sys-color-neutral-on-surface);
     --button-border-outline:   var(--a-ui-border);
     --button-bg-ghost:         transparent;
-    --button-fg-ghost:         var(--a-fg-subtle);
+    --button-fg-ghost:         var(--md-sys-color-neutral-on-surface-variant);
     --button-fg-ghost-hover:   var(--a-fg-strong);
     --button-bg-ghost-hover:   transparent;   /* ghost hover is fg-only; consumers/demo may override to add a fill */
     --button-border-ghost:     transparent;
     --button-border-ghost-hover: transparent;
-    --button-bg-danger:        var(--a-danger);
+    --button-bg-danger:        var(--md-sys-color-danger);
     --button-fg-danger:        var(--a-chrome-light);  /* white on the saturated fill — see color rules */
     --button-bg-disabled:      var(--a-ui-bg-disabled);
     --button-fg-disabled:      var(--a-ui-text-disabled);
@@ -244,7 +244,7 @@ button-ui[variant="ghost"][color="warning"]:not([disabled]):hover   { --button-f
        brown-on-brown — the L3 `-bg` is the canonical solid-warning
        surface paired with `-fg` (dark text). */
     --button-bg: var(--a-warning-bg);
-    --button-fg: var(--a-warning-fg);
+    --button-fg: var(--md-sys-color-warning-on-warning);
   }
 
   /* ── Color × non-solid variants ──
@@ -257,14 +257,14 @@ button-ui[variant="ghost"][color="warning"]:not([disabled]):hover   { --button-f
      demo's "Approve" button (button.examples.html:50). --a-X-text is the
      family-colored text designed to read on a neutral page surface; -border is
      the L3 colored border alias. */
-  :scope[variant="outline"][color="danger"]  { --button-bg: transparent; --button-fg: var(--a-danger-text);  --button-border: var(--a-danger-border); }
-  :scope[variant="outline"][color="info"]     { --button-bg: transparent; --button-fg: var(--a-info-text);     --button-border: var(--a-info-border); }
-  :scope[variant="outline"][color="success"]  { --button-bg: transparent; --button-fg: var(--a-success-text);  --button-border: var(--a-success-border); }
-  :scope[variant="outline"][color="warning"]  { --button-bg: transparent; --button-fg: var(--a-warning-text);  --button-border: var(--a-warning-border); }
-  :scope[variant="ghost"][color="danger"]   { --button-bg: transparent; --button-fg: var(--a-danger-text); }
-  :scope[variant="ghost"][color="info"]      { --button-bg: transparent; --button-fg: var(--a-info-text); }
-  :scope[variant="ghost"][color="success"]   { --button-bg: transparent; --button-fg: var(--a-success-text); }
-  :scope[variant="ghost"][color="warning"]   { --button-bg: transparent; --button-fg: var(--a-warning-text); }
+  :scope[variant="outline"][color="danger"]  { --button-bg: transparent; --button-fg: var(--md-sys-color-danger-on-surface);  --button-border: var(--md-sys-color-danger-outline); }
+  :scope[variant="outline"][color="info"]     { --button-bg: transparent; --button-fg: var(--md-sys-color-info-on-surface);     --button-border: var(--md-sys-color-info-outline); }
+  :scope[variant="outline"][color="success"]  { --button-bg: transparent; --button-fg: var(--md-sys-color-success-on-surface);  --button-border: var(--md-sys-color-success-outline); }
+  :scope[variant="outline"][color="warning"]  { --button-bg: transparent; --button-fg: var(--md-sys-color-warning-on-surface);  --button-border: var(--md-sys-color-warning-outline); }
+  :scope[variant="ghost"][color="danger"]   { --button-bg: transparent; --button-fg: var(--md-sys-color-danger-on-surface); }
+  :scope[variant="ghost"][color="info"]      { --button-bg: transparent; --button-fg: var(--md-sys-color-info-on-surface); }
+  :scope[variant="ghost"][color="success"]   { --button-bg: transparent; --button-fg: var(--md-sys-color-success-on-surface); }
+  :scope[variant="ghost"][color="warning"]   { --button-bg: transparent; --button-fg: var(--md-sys-color-warning-on-surface); }
 
   /* Hover rules moved outside @scope — see Safari 17.x bug note at
      top of file. */

package/components/calendar-grid/calendar-grid.a2ui.json

@@ -126,11 +126,11 @@
       },
       "--calendar-grid-day-bg-selected": {
         "description": "Background of the selected day cell.",
-        "default": "var(--a-accent)"
+        "default": "var(--md-sys-color-primary)"
       },
       "--calendar-grid-day-fg-selected": {
         "description": "Text color of the selected day cell.",
-        "default": "var(--a-accent-fg)"
+        "default": "var(--md-sys-color-primary-on-primary)"
       },
       "--calendar-grid-day-size": {
         "description": "Square cell size for day buttons.",
@@ -138,7 +138,7 @@
       },
       "--calendar-grid-day-today-color": {
         "description": "Accent color used for the today-indicator dot + numeral tint.",
-        "default": "var(--a-accent)"
+        "default": "var(--md-sys-color-primary)"
       },
       "--calendar-grid-width": {
         "description": "Grid container width.",

package/components/calendar-grid/calendar-grid.css

@@ -25,7 +25,7 @@
     /* Header */
     --calendar-grid-header-gap:         var(--a-space-1);
     --calendar-grid-header-mb:          var(--a-space-2);
-    --calendar-grid-title-fg:           var(--a-fg);
+    --calendar-grid-title-fg:           var(--md-sys-color-neutral-on-surface);
     --calendar-grid-title-size:         var(--a-ui-size);
     --calendar-grid-title-weight:       var(--a-weight-medium);
 
@@ -37,7 +37,7 @@
     --calendar-grid-nav-bg:             transparent;
     --calendar-grid-nav-bg-hover:       var(--a-bg-muted);
     --calendar-grid-nav-fg:             var(--a-fg-muted);
-    --calendar-grid-nav-fg-hover:       var(--a-fg);
+    --calendar-grid-nav-fg-hover:       var(--md-sys-color-neutral-on-surface);
     --calendar-grid-nav-icon-size:      var(--a-caret-size);
 
     /* Weekday header — row height tracks the control height (one notch
@@ -57,20 +57,20 @@
     --calendar-grid-day-font-size:      var(--a-ui-size);
     --calendar-grid-day-font-family:    var(--a-font-family-ui);
     --calendar-grid-day-bg:             transparent;
-    --calendar-grid-day-fg:             var(--a-fg-subtle);
+    --calendar-grid-day-fg:             var(--md-sys-color-neutral-on-surface-variant);
     --calendar-grid-day-bg-hover:       var(--a-bg-hover);
-    --calendar-grid-day-fg-hover:       var(--a-fg);
-    --calendar-grid-day-bg-selected:    var(--a-accent);
-    --calendar-grid-day-fg-selected:    var(--a-accent-fg);
+    --calendar-grid-day-fg-hover:       var(--md-sys-color-neutral-on-surface);
+    --calendar-grid-day-bg-selected:    var(--md-sys-color-primary);
+    --calendar-grid-day-fg-selected:    var(--md-sys-color-primary-on-primary);
     /* In-range cells (strictly between rangeStart and rangeEnd) — muted
-       accent strip so the endpoints (full --a-accent fill) read as the
+       accent strip so the endpoints (full --a-primary fill) read as the
        primary selection while the in-range band reads as secondary
        context. Stylable independently of `selected`. */
-    --calendar-grid-day-bg-in-range:    var(--a-accent-muted);
-    --calendar-grid-day-fg-in-range:    var(--a-fg);
+    --calendar-grid-day-bg-in-range:    var(--md-sys-color-primary-container);
+    --calendar-grid-day-fg-in-range:    var(--md-sys-color-neutral-on-surface);
     --calendar-grid-day-fg-outside:     var(--a-fg-muted);
     --calendar-grid-day-fg-disabled:    var(--a-ui-text-disabled);
-    --calendar-grid-day-today-color:    var(--a-accent);
+    --calendar-grid-day-today-color:    var(--md-sys-color-primary);
     --calendar-grid-day-today-dot-size: var(--a-space-0-5);
     --calendar-grid-day-today-dot-offset: var(--a-space-1);
     --calendar-grid-day-grid-gap:       var(--a-space-px);

package/components/calendar-grid/calendar-grid.yaml

@@ -93,16 +93,16 @@ tokens:
     default: 2rem
   --calendar-grid-day-bg-selected:
     description: Background of the selected day cell.
-    default: var(--a-accent)
+    default: var(--md-sys-color-primary)
   --calendar-grid-day-fg-selected:
     description: Text color of the selected day cell.
-    default: var(--a-accent-fg)
+    default: var(--md-sys-color-primary-on-primary)
   --calendar-grid-day-bg-hover:
     description: Background on hover (non-selected, non-outside, non-disabled).
     default: var(--a-bg-hover)
   --calendar-grid-day-today-color:
     description: Accent color used for the today-indicator dot + numeral tint.
-    default: var(--a-accent)
+    default: var(--md-sys-color-primary)
 a2ui:
   rules:
     - >-