@adia-ai/web-components 0.7.28 → 0.8.0

package/components/tag/tag.css

@@ -8,7 +8,7 @@ tag-ui[removable]:not([disabled]):hover {
   :where(:scope) {
     /* ── Tokens ── */
     --tag-bg:           var(--a-bg-muted);
-    --tag-fg:           var(--a-fg);
+    --tag-fg:           var(--md-sys-color-neutral-on-surface);
     --tag-border:       transparent;
     --tag-radius:       var(--a-radius-full);
     --tag-px:           var(--a-space-1-5);
@@ -51,6 +51,16 @@ tag-ui[removable]:not([disabled]):hover {
     box-sizing: border-box;
     display: inline-flex;
     align-items: center;
+    /* align-self: start — TKT-0021. A flex-column ancestor (col-ui
+       defaults to align-items: stretch) otherwise stretches a bare
+       tag-ui to the column's full width; a chip should size to its own
+       content regardless of ancestor. justify-content: center is the
+       matching defensive default badge-ui/button-ui already carry
+       (badge.css/button.css) — if the box is ever wider than its
+       content for any other reason, the label still centers instead of
+       reading left-aligned in an oversized pill. */
+    align-self: start;
+    justify-content: center;
     gap: var(--tag-gap);
     padding: var(--tag-py) var(--tag-px);
     border-radius: var(--tag-radius);
@@ -85,26 +95,28 @@ tag-ui[removable]:not([disabled]):hover {
      metadata-chip surfaces in dense lists. */
   :scope[variant="info"] {
     --tag-bg: var(--a-info-bg);
-    --tag-fg: var(--a-info-fg);
+    --tag-fg: var(--md-sys-color-info-on-info);
   }
 
   :scope[variant="success"] {
     --tag-bg: var(--a-success-bg);
-    --tag-fg: var(--a-success-fg);
+    --tag-fg: var(--md-sys-color-success-on-success);
   }
 
-  /* `--a-warning-bg` is the bright-amber step (semantics.css L3 redirect
-     to `-20-tint`) paired with `--a-warning-fg` (dark brown text) — the
-     canonical caution-tape pair. Pre-v0.6.36 this rule had a local
-     `-20-tint` override; that workaround moved to the token system. */
+  /* Same shape as the sibling families since the Material static-token
+     migration: amber fill + the palette's own fixed-light on-color
+     (`on-warning`, white in both schemes per Material's on-color law).
+     The pre-migration dark-brown-text override is gone — its
+     lower-than-siblings contrast is a known, operator-accepted
+     consequence (TKT-0018, wontfix pending palette adjustment). */
   :scope[variant="warning"] {
     --tag-bg: var(--a-warning-bg);
-    --tag-fg: var(--a-warning-fg);
+    --tag-fg: var(--md-sys-color-warning-on-warning);
   }
 
   :scope[variant="danger"] {
     --tag-bg: var(--a-danger-bg);
-    --tag-fg: var(--a-danger-fg);
+    --tag-fg: var(--md-sys-color-danger-on-danger);
   }
 
   /* `default` (no family) stays as quiet chrome — a stark fg/bg-inverse
@@ -112,7 +124,7 @@ tag-ui[removable]:not([disabled]):hover {
      stamp via `[tone="solid"]` when you want a high-contrast neutral pill. */
   :scope[variant="default"] {
     --tag-bg: var(--a-bg-muted);
-    --tag-fg: var(--a-fg);
+    --tag-fg: var(--md-sys-color-neutral-on-surface);
   }
 
   /* ── Tone modifier — orthogonal to [variant] ──
@@ -122,28 +134,28 @@ tag-ui[removable]:not([disabled]):hover {
      uses as its default. Use on metadata chips in dense lists where the
      saturated default would compete for attention. */
   :scope[tone="muted"][variant="info"] {
-    --tag-bg: var(--a-info-muted);
-    --tag-fg: var(--a-info-text);
+    --tag-bg: var(--md-sys-color-info-container);
+    --tag-fg: var(--md-sys-color-info-on-surface);
   }
   :scope[tone="muted"][variant="success"] {
-    --tag-bg: var(--a-success-muted);
-    --tag-fg: var(--a-success-text);
+    --tag-bg: var(--md-sys-color-success-container);
+    --tag-fg: var(--md-sys-color-success-on-surface);
   }
   :scope[tone="muted"][variant="warning"] {
-    --tag-bg: var(--a-warning-muted);
-    --tag-fg: var(--a-warning-text);
+    --tag-bg: var(--md-sys-color-warning-container);
+    --tag-fg: var(--md-sys-color-warning-on-surface);
   }
   :scope[tone="muted"][variant="danger"] {
-    --tag-bg: var(--a-danger-muted);
-    --tag-fg: var(--a-danger-text);
+    --tag-bg: var(--md-sys-color-danger-container);
+    --tag-fg: var(--md-sys-color-danger-on-surface);
   }
 
   /* `[tone="solid"]` on the neutral default (or no variant) inverts the
      chrome — solid fg-color bg with bg-color text. High-contrast neutral
      stamp. Explicit opt-in; the variant-less default stays quiet chrome. */
   :scope[tone="solid"]:not([variant="info"]):not([variant="success"]):not([variant="warning"]):not([variant="danger"]) {
-    --tag-bg: var(--a-fg);
-    --tag-fg: var(--a-bg);
+    --tag-bg: var(--md-sys-color-neutral-on-surface);
+    --tag-fg: var(--md-sys-color-neutral-background);
   }
 
   /* ── `[tone="outline"]` — transparent bg + family-colored border + text ──
@@ -155,25 +167,25 @@ tag-ui[removable]:not([disabled]):hover {
     --tag-bg: transparent;
   }
   :scope[tone="outline"][variant="info"] {
-    --tag-fg:     var(--a-info-text);
-    --tag-border: var(--a-info-border);
+    --tag-fg:     var(--md-sys-color-info-on-surface);
+    --tag-border: var(--md-sys-color-info-outline);
   }
   :scope[tone="outline"][variant="success"] {
-    --tag-fg:     var(--a-success-text);
-    --tag-border: var(--a-success-border);
+    --tag-fg:     var(--md-sys-color-success-on-surface);
+    --tag-border: var(--md-sys-color-success-outline);
   }
   :scope[tone="outline"][variant="warning"] {
-    --tag-fg:     var(--a-warning-text);
-    --tag-border: var(--a-warning-border);
+    --tag-fg:     var(--md-sys-color-warning-on-surface);
+    --tag-border: var(--md-sys-color-warning-outline);
   }
   :scope[tone="outline"][variant="danger"] {
-    --tag-fg:     var(--a-danger-text);
-    --tag-border: var(--a-danger-border);
+    --tag-fg:     var(--md-sys-color-danger-on-surface);
+    --tag-border: var(--md-sys-color-danger-outline);
   }
   /* Outline on neutral (no family) — fg-muted text + subtle border. */
   :scope[tone="outline"]:not([variant="info"]):not([variant="success"]):not([variant="warning"]):not([variant="danger"]) {
     --tag-fg:     var(--a-fg-muted);
-    --tag-border: var(--a-border);
+    --tag-border: var(--md-sys-color-neutral-outline);
   }
 
   /* Size handled by universal [size] attribute system. */

package/components/tag/tag.test.js

@@ -50,50 +50,43 @@ describe('tag-ui — content: attr(text) gating', () => {
 // ── Tone defaults (solid by default for families; muted as opt-out) ──
 //
 // Default tone is `solid` for family variants — the base `:scope[variant=…]`
-// rules use the saturated-fill pair `--a-{family}-bg` + `--a-{family}-fg`
-// (the chip IS the state). `[tone="muted"]` opts back into the canonical
-// muted pair `--a-{family}-muted` + `--a-{family}-text` (same look as
+// rules pair the saturated `--a-{family}-bg` fill with the palette's own
+// Material on-color `--md-sys-color-{family}-on-{family}` (the chip IS the
+// state). `[tone="muted"]` opts back into the Material container pair
+// `--md-sys-color-{family}-container` + `-on-surface` (same look as
 // <badge-ui>'s default). The `default` (no-family) variant stays quiet
-// chrome unless `[tone="solid"]` is set explicitly (then it inverts
-// to fg/bg for a high-contrast neutral stamp).
+// chrome unless `[tone="solid"]` is set explicitly (then it inverts to a
+// high-contrast neutral stamp). Token names updated for the Material
+// static-token migration (material-color-bridge-contract.md, 2026-07-15).
 
 describe('tag-ui — variant defaults to solid fill', () => {
   it.each([
     ['info'],
     ['success'],
+    ['warning'],
     ['danger'],
-  ])('[variant="%s"] base rule uses --a-{family}-bg + --a-{family}-fg', (family) => {
+  ])('[variant="%s"] base rule uses --a-{family}-bg + --md-sys-color-{family}-on-{family}', (family) => {
     const block = new RegExp(
       `:scope\\[variant="${family}"\\]\\s*\\{[^}]*` +
       `--tag-bg:\\s*var\\(--a-${family}-bg\\)[^}]*` +
-      `--tag-fg:\\s*var\\(--a-${family}-fg\\)`,
+      `--tag-fg:\\s*var\\(--md-sys-color-${family}-on-${family}\\)`,
       's'
     );
     expect(TAG_CSS).toMatch(block);
   });
-
-  it('[variant="warning"] uses the canonical --a-warning-bg + --a-warning-fg pair', () => {
-    // v0.6.36 token-system fix: --a-warning-bg now redirects to
-    // --a-warning-20-tint at the L3 layer (semantics.css), so consumers
-    // can pair `-bg` + `-fg` cleanly without local overrides. The pair
-    // resolves to bright-amber-bg + dark-brown-text in both schemes.
-    expect(TAG_CSS).toMatch(
-      /:scope\[variant="warning"\]\s*\{[^}]*--tag-bg:\s*var\(--a-warning-bg\)[^}]*--tag-fg:\s*var\(--a-warning-fg\)/s
-    );
-  });
 });
 
-describe('tag-ui — [tone="muted"] opts out to canonical muted pair', () => {
+describe('tag-ui — [tone="muted"] opts out to the Material container pair', () => {
   it.each([
     ['info'],
     ['success'],
     ['warning'],
     ['danger'],
-  ])('[tone="muted"][variant="%s"] uses --a-{family}-muted + --a-{family}-text', (family) => {
+  ])('[tone="muted"][variant="%s"] uses -container + -on-surface', (family) => {
     const block = new RegExp(
       `:scope\\[tone="muted"\\]\\[variant="${family}"\\]\\s*\\{[^}]*` +
-      `--tag-bg:\\s*var\\(--a-${family}-muted\\)[^}]*` +
-      `--tag-fg:\\s*var\\(--a-${family}-text\\)`,
+      `--tag-bg:\\s*var\\(--md-sys-color-${family}-container\\)[^}]*` +
+      `--tag-fg:\\s*var\\(--md-sys-color-${family}-on-surface\\)`,
       's'
     );
     expect(TAG_CSS).toMatch(block);
@@ -101,15 +94,15 @@ describe('tag-ui — [tone="muted"] opts out to canonical muted pair', () => {
 });
 
 describe('tag-ui — neutral default + explicit solid stamp', () => {
-  it('[variant="default"] stays quiet chrome (--a-bg-muted + --a-fg)', () => {
+  it('[variant="default"] stays quiet chrome (--a-bg-muted + neutral on-surface)', () => {
     expect(TAG_CSS).toMatch(
-      /:scope\[variant="default"\]\s*\{[^}]*--tag-bg:\s*var\(--a-bg-muted\)[^}]*--tag-fg:\s*var\(--a-fg\)/s
+      /:scope\[variant="default"\]\s*\{[^}]*--tag-bg:\s*var\(--a-bg-muted\)[^}]*--tag-fg:\s*var\(--md-sys-color-neutral-on-surface\)/s
     );
   });
 
-  it('[tone="solid"] without a family inverts to fg/bg high-contrast stamp', () => {
+  it('[tone="solid"] without a family inverts to a high-contrast neutral stamp', () => {
     expect(TAG_CSS).toMatch(
-      /:scope\[tone="solid"\]:not\(\[variant="info"\]\)[\s\S]*?--tag-bg:\s*var\(--a-fg\)[\s\S]*?--tag-fg:\s*var\(--a-bg\)/
+      /:scope\[tone="solid"\]:not\(\[variant="info"\]\)[\s\S]*?--tag-bg:\s*var\(--md-sys-color-neutral-on-surface\)[\s\S]*?--tag-fg:\s*var\(--md-sys-color-neutral-background\)/
     );
   });
 });
@@ -129,16 +122,16 @@ describe('tag-ui — [tone="outline"] strips fill + colors border', () => {
   ])('[tone="outline"][variant="%s"] colors fg + border per family', (family) => {
     const block = new RegExp(
       `:scope\\[tone="outline"\\]\\[variant="${family}"\\]\\s*\\{[^}]*` +
-      `--tag-fg:\\s*var\\(--a-${family}-text\\)[^}]*` +
-      `--tag-border:\\s*var\\(--a-${family}-border\\)`,
+      `--tag-fg:\\s*var\\(--md-sys-color-${family}-on-surface\\)[^}]*` +
+      `--tag-border:\\s*var\\(--md-sys-color-${family}-outline\\)`,
       's'
     );
     expect(TAG_CSS).toMatch(block);
   });
 
-  it('[tone="outline"] on neutral uses --a-fg-muted text + --a-border ring', () => {
+  it('[tone="outline"] on neutral uses --a-fg-muted text + neutral outline ring', () => {
     expect(TAG_CSS).toMatch(
-      /:scope\[tone="outline"\]:not\(\[variant="info"\]\)[\s\S]*?--tag-fg:\s*var\(--a-fg-muted\)[\s\S]*?--tag-border:\s*var\(--a-border\)/
+      /:scope\[tone="outline"\]:not\(\[variant="info"\]\)[\s\S]*?--tag-fg:\s*var\(--a-fg-muted\)[\s\S]*?--tag-border:\s*var\(--md-sys-color-neutral-outline\)/
     );
   });
 });

package/components/tags-input/tags-input.a2ui.json

@@ -227,7 +227,7 @@
     ],
     "slots": {
       "chip": {
-        "description": "Custom chip template — receives `{value, index}` per token.\nWhen absent, each token renders as a default\n`<tag-ui removable text=\"<value>\">`."
+        "description": "Planned: custom chip template, receiving `{value, index}` per\ntoken — NOT YET IMPLEMENTED (TKT-0023; the template mechanism's\nshape needs a design decision before it's built). Every token\ncurrently renders as the fixed default,\n`<tag-ui removable text=\"<value>\">`, with no override path."
       }
     },
     "states": [

package/components/tags-input/tags-input.css

@@ -25,10 +25,10 @@
     --tags-input-easing:          var(--a-easing);
 
     /* ── Chip overrides — cascaded into nested <tag-ui> ── */
-    --tags-input-chip-bg-invalid: var(--a-danger-muted);
+    --tags-input-chip-bg-invalid: var(--md-sys-color-danger-container);
 
     /* ── Suggestions popover ── */
-    --tags-input-suggestions-bg:        var(--a-canvas-bright);
+    --tags-input-suggestions-bg:        var(--md-sys-color-neutral-surface-bright);
     --tags-input-suggestions-border:    var(--a-ui-border);
     --tags-input-suggestions-radius:    var(--a-radius);
     --tags-input-suggestions-shadow:    var(--a-shadow-lg);
@@ -169,7 +169,7 @@ tags-input-ui [data-suggestions] {
   padding: var(--a-space-1);
   border: 1px solid var(--a-ui-border);
   border-radius: var(--a-radius);
-  background: var(--a-canvas-bright);
+  background: var(--md-sys-color-neutral-surface-bright);
   box-shadow: var(--a-shadow-lg);
   font-family: inherit;
   font-size: var(--a-ui-size);

package/components/tags-input/tags-input.yaml

@@ -186,9 +186,11 @@ events:
 slots:
   chip:
     description: |-
-      Custom chip template — receives `{value, index}` per token.
-      When absent, each token renders as a default
-      `<tag-ui removable text="<value>">`.
+      Planned: custom chip template, receiving `{value, index}` per
+      token — NOT YET IMPLEMENTED (TKT-0023; the template mechanism's
+      shape needs a design decision before it's built). Every token
+      currently renders as the fixed default,
+      `<tag-ui removable text="<value>">`, with no override path.
 states:
   - name: idle
     description: No tokens; no typed text.

package/components/text/text.css

@@ -8,7 +8,7 @@
     --text-leading:   var(--a-body-leading);
     --text-tracking:  var(--a-body-tracking);
     --text-case:      var(--a-body-case);
-    --text-color:     var(--a-fg);
+    --text-color:     var(--md-sys-color-neutral-on-surface);
     --text-color-strong:     var(--a-fg-strong);
   }
 
@@ -38,7 +38,7 @@
   }
 
   /* ── Variants ── */
-  :scope[variant="body"]       { --text-family: var(--a-body-family);    --text-weight: var(--a-body-weight);    --text-size: var(--a-body-size);    --text-leading: var(--a-body-leading);    --text-tracking: var(--a-body-tracking);    --text-case: var(--a-body-case);    --text-color: var(--a-fg); }
+  :scope[variant="body"]       { --text-family: var(--a-body-family);    --text-weight: var(--a-body-weight);    --text-size: var(--a-body-size);    --text-leading: var(--a-body-leading);    --text-tracking: var(--a-body-tracking);    --text-case: var(--a-body-case);    --text-color: var(--md-sys-color-neutral-on-surface); }
   :scope[variant="display"]    { --text-family: var(--a-display-family); --text-weight: var(--a-display-weight); --text-size: var(--a-display-size); --text-leading: var(--a-display-leading); --text-tracking: var(--a-display-tracking); --text-case: var(--a-display-case); --text-color: var(--a-display-color); }
   :scope[variant="title"]      { --text-family: var(--a-title-family);   --text-weight: var(--a-title-weight);   --text-size: var(--a-title-size);   --text-leading: var(--a-title-leading);   --text-tracking: var(--a-title-tracking);   --text-case: var(--a-title-case);   --text-color: var(--a-title-color); }
   :scope[variant="heading"]    { --text-family: var(--a-heading-family); --text-weight: var(--a-heading-weight); --text-size: var(--a-heading-size); --text-leading: var(--a-heading-leading); --text-tracking: var(--a-heading-tracking); --text-case: var(--a-heading-case); --text-color: var(--a-heading-color); }
@@ -78,10 +78,10 @@
 
   /* color — default | subtle | strong | accent | danger | success | warning
      (no value = variant default; "default" is an explicit reset). */
-  :scope[color="default"] { --text-color: var(--a-fg); }
+  :scope[color="default"] { --text-color: var(--md-sys-color-neutral-on-surface); }
   :scope[color="subtle"]  { --text-color: var(--a-fg-muted); }
   :scope[color="strong"]  { --text-color: var(--a-fg-strong); }
-  :scope[color="accent"]  { --text-color: var(--a-accent); }
+  :scope[color="accent"]  { --text-color: var(--md-sys-color-primary); }
   :scope[color="danger"]  { --text-color: var(--a-danger-bg); }
   :scope[color="success"] { --text-color: var(--a-success-bg); }
   :scope[color="warning"] { --text-color: var(--a-warning-bg); }

package/components/textarea/textarea.css

@@ -34,7 +34,7 @@ textarea-ui:not([disabled]) [slot="text"]:hover {
     /* ── State ── */
     --textarea-bg-hover:        var(--a-ui-bg-hover);
     --textarea-fg-hover:        var(--a-ui-text-hover);
-    --textarea-label-fg-focus:  var(--a-fg-subtle);
+    --textarea-label-fg-focus:  var(--md-sys-color-neutral-on-surface-variant);
     --textarea-bg-disabled:     var(--a-ui-bg-disabled);
     --textarea-fg-disabled:     var(--a-ui-text-disabled);
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */

package/components/time-picker/time-picker.css

@@ -15,8 +15,8 @@
 
     --time-picker-segment-radius:      var(--a-radius-sm);
     --time-picker-segment-px:          var(--a-space-1);
-    --time-picker-segment-bg-focus:    var(--a-accent);
-    --time-picker-segment-fg-focus:    var(--a-accent-fg);
+    --time-picker-segment-bg-focus:    var(--md-sys-color-primary);
+    --time-picker-segment-fg-focus:    var(--md-sys-color-primary-on-primary);
 
     --time-picker-separator-fg:        var(--a-fg-muted);
 

package/components/timeline/timeline.css

@@ -24,20 +24,20 @@
 
     /* Dot */
     --timeline-dot-size:           0.625rem;
-    --timeline-dot-bg:             var(--a-border);
-    --timeline-dot-bg-active:      var(--a-accent-bg);
+    --timeline-dot-bg:             var(--md-sys-color-neutral-outline);
+    --timeline-dot-bg-active:      var(--a-primary-bg);
     --timeline-dot-bg-done:        var(--a-success-bg);
     --timeline-dot-bg-error:       var(--a-danger-bg);
     --timeline-dot-bg-warning:     var(--a-warning-bg);
 
     /* Sub-dot (outcomes) */
     --timeline-subdot-size:        4px;
-    --timeline-subdot-bg:          var(--a-fg-subtle);
+    --timeline-subdot-bg:          var(--md-sys-color-neutral-on-surface-variant);
 
     /* Connector line */
     --timeline-line-size:          2px;
-    --timeline-line-fg:            var(--a-border-subtle);
-    --timeline-line-fg-done:       var(--a-border);
+    --timeline-line-fg:            var(--md-sys-color-neutral-outline-variant);
+    --timeline-line-fg-done:       var(--md-sys-color-neutral-outline);
 
     /* Marker box — the shared circular footprint the icon marker fills and
        the dot / spinner center within (the column track --timeline-marker-w
@@ -49,23 +49,23 @@
     /* Icon (replaces dot) */
     --timeline-icon-size:          var(--timeline-marker-box-size);
     --timeline-icon-bg:            var(--a-bg-muted);
-    --timeline-icon-fg:            var(--a-fg-subtle);
-    --timeline-icon-border:        var(--a-border-subtle);
-    --timeline-icon-bg-success:    var(--a-success-muted);
+    --timeline-icon-fg:            var(--md-sys-color-neutral-on-surface-variant);
+    --timeline-icon-border:        var(--md-sys-color-neutral-outline-variant);
+    --timeline-icon-bg-success:    var(--md-sys-color-success-container);
     --timeline-icon-fg-success:    var(--a-success-strong);
-    --timeline-icon-bg-accent:     var(--a-accent-muted);
-    --timeline-icon-fg-accent:     var(--a-accent);
-    --timeline-icon-bg-warning:    var(--a-warning-muted);
-    --timeline-icon-fg-warning:    var(--a-warning);
-    --timeline-icon-bg-danger:     var(--a-danger-muted);
+    --timeline-icon-bg-accent:     var(--md-sys-color-primary-container);
+    --timeline-icon-fg-accent:     var(--md-sys-color-primary);
+    --timeline-icon-bg-warning:    var(--md-sys-color-warning-container);
+    --timeline-icon-fg-warning:    var(--md-sys-color-warning);
+    --timeline-icon-bg-danger:     var(--md-sys-color-danger-container);
     --timeline-icon-fg-danger:     var(--a-danger-strong);
 
     /* Typography */
     --timeline-label-weight:       var(--a-weight-medium);
     --timeline-label-size:         var(--a-ui-size);
-    --timeline-label-fg:           var(--a-fg);
+    --timeline-label-fg:           var(--md-sys-color-neutral-on-surface);
     --timeline-label-fg-muted:     var(--a-fg-muted);
-    --timeline-desc-fg:            var(--a-fg-subtle);
+    --timeline-desc-fg:            var(--md-sys-color-neutral-on-surface-variant);
     --timeline-desc-size:          var(--a-ui-sm);
     --timeline-time-fg:            var(--a-fg-muted);
     --timeline-time-size:          var(--a-ui-sm);
@@ -129,18 +129,18 @@ agent-reasoning-ui timeline-ui:not([orientation="horizontal"]),
     --timeline-item-gap-row:            var(--timeline-gap-row, var(--a-space-3));
 
     --timeline-item-dot-size:           var(--timeline-dot-size, 0.625rem);
-    --timeline-item-dot-bg:             var(--timeline-dot-bg, var(--a-border));
-    --timeline-item-dot-bg-active:      var(--timeline-dot-bg-active, var(--a-accent-bg));
+    --timeline-item-dot-bg:             var(--timeline-dot-bg, var(--md-sys-color-neutral-outline));
+    --timeline-item-dot-bg-active:      var(--timeline-dot-bg-active, var(--a-primary-bg));
     --timeline-item-dot-bg-done:        var(--timeline-dot-bg-done, var(--a-success-bg));
     --timeline-item-dot-bg-error:       var(--timeline-dot-bg-error, var(--a-danger-bg));
     --timeline-item-dot-bg-warning:     var(--timeline-dot-bg-warning, var(--a-warning-bg));
 
     --timeline-item-subdot-size:        var(--timeline-subdot-size, 4px);
-    --timeline-item-subdot-bg:          var(--timeline-subdot-bg, var(--a-fg-subtle));
+    --timeline-item-subdot-bg:          var(--timeline-subdot-bg, var(--md-sys-color-neutral-on-surface-variant));
 
     --timeline-item-line-size:          var(--timeline-line-size, 2px);
-    --timeline-item-line-fg:            var(--timeline-line-fg, var(--a-border-subtle));
-    --timeline-item-line-fg-done:       var(--timeline-line-fg-done, var(--a-border));
+    --timeline-item-line-fg:            var(--timeline-line-fg, var(--md-sys-color-neutral-outline-variant));
+    --timeline-item-line-fg-done:       var(--timeline-line-fg-done, var(--md-sys-color-neutral-outline));
 
     /* Reads the override THEN the inherited -default (set on timeline-ui,
        and shrunk by [size="sm"]) THEN a literal — so the marker box scales
@@ -148,22 +148,22 @@ agent-reasoning-ui timeline-ui:not([orientation="horizontal"]),
     --timeline-item-marker-box-size:    var(--timeline-marker-box-size, var(--timeline-marker-box-size, 1rem));
     --timeline-item-icon-size:          var(--timeline-icon-size, var(--timeline-item-marker-box-size));
     --timeline-item-icon-bg:            var(--timeline-icon-bg, var(--a-bg-muted));
-    --timeline-item-icon-fg:            var(--timeline-icon-fg, var(--a-fg-subtle));
-    --timeline-item-icon-border:        var(--timeline-icon-border, var(--a-border-subtle));
-    --timeline-item-icon-bg-success:    var(--timeline-icon-bg-success, var(--a-success-muted));
+    --timeline-item-icon-fg:            var(--timeline-icon-fg, var(--md-sys-color-neutral-on-surface-variant));
+    --timeline-item-icon-border:        var(--timeline-icon-border, var(--md-sys-color-neutral-outline-variant));
+    --timeline-item-icon-bg-success:    var(--timeline-icon-bg-success, var(--md-sys-color-success-container));
     --timeline-item-icon-fg-success:    var(--timeline-icon-fg-success, var(--a-success-strong));
-    --timeline-item-icon-bg-accent:     var(--timeline-icon-bg-accent, var(--a-accent-muted));
-    --timeline-item-icon-fg-accent:     var(--timeline-icon-fg-accent, var(--a-accent));
-    --timeline-item-icon-bg-warning:    var(--timeline-icon-bg-warning, var(--a-warning-muted));
-    --timeline-item-icon-fg-warning:    var(--timeline-icon-fg-warning, var(--a-warning));
-    --timeline-item-icon-bg-danger:     var(--timeline-icon-bg-danger, var(--a-danger-muted));
+    --timeline-item-icon-bg-accent:     var(--timeline-icon-bg-accent, var(--md-sys-color-primary-container));
+    --timeline-item-icon-fg-accent:     var(--timeline-icon-fg-accent, var(--md-sys-color-primary));
+    --timeline-item-icon-bg-warning:    var(--timeline-icon-bg-warning, var(--md-sys-color-warning-container));
+    --timeline-item-icon-fg-warning:    var(--timeline-icon-fg-warning, var(--md-sys-color-warning));
+    --timeline-item-icon-bg-danger:     var(--timeline-icon-bg-danger, var(--md-sys-color-danger-container));
     --timeline-item-icon-fg-danger:     var(--timeline-icon-fg-danger, var(--a-danger-strong));
 
     --timeline-item-label-weight:       var(--timeline-label-weight, var(--a-weight-medium));
     --timeline-item-label-size:         var(--timeline-label-size, var(--a-ui-size));
-    --timeline-item-label-fg:           var(--timeline-label-fg, var(--a-fg));
+    --timeline-item-label-fg:           var(--timeline-label-fg, var(--md-sys-color-neutral-on-surface));
     --timeline-item-label-fg-muted:     var(--timeline-label-fg-muted, var(--a-fg-muted));
-    --timeline-item-desc-fg:            var(--timeline-desc-fg, var(--a-fg-subtle));
+    --timeline-item-desc-fg:            var(--timeline-desc-fg, var(--md-sys-color-neutral-on-surface-variant));
     --timeline-item-desc-size:          var(--timeline-desc-size, var(--a-ui-sm));
     --timeline-item-time-fg:            var(--timeline-time-fg, var(--a-fg-muted));
     --timeline-item-time-size:          var(--timeline-time-size, var(--a-ui-sm));
@@ -387,7 +387,7 @@ agent-reasoning-ui timeline-ui:not([orientation="horizontal"]),
 
   :scope > [data-timeline-toggle]:hover {
     background: var(--a-bg-subtle);
-    color: var(--timeline-item-label-fg, var(--a-fg));
+    color: var(--timeline-item-label-fg, var(--md-sys-color-neutral-on-surface));
   }
 
   /* Reserve room so the time isn't overlapped by the caret */

package/components/toast/toast.css

@@ -30,14 +30,14 @@ toast-ui[data-closing][position="top-left"] {
 @scope (toast-ui) {
   :where(:scope) {
     --toast-bg:       var(--a-bg-subtle);
-    --toast-fg:       var(--a-fg);
+    --toast-fg:       var(--md-sys-color-neutral-on-surface);
     --toast-radius:   var(--a-radius-md);
     --toast-shadow:   var(--a-shadow-lg);
     --toast-duration: var(--a-duration);
     --toast-easing:   var(--a-easing-out);
     --toast-pad-x:    var(--a-space-4);
     --toast-pad-y:    var(--a-space-3);
-    --toast-border:   var(--a-border-subtle);
+    --toast-border:   var(--md-sys-color-neutral-outline-variant);
     --toast-max-width: 24rem;
     --toast-gap:      var(--a-space-3);
 
@@ -116,36 +116,36 @@ toast-ui[data-closing][position="top-left"] {
 
   :where(:scope),
   :where(:scope[variant="info"]) {
-    --toast-bg:     var(--a-info-muted);
-    --toast-fg:     var(--a-info-text);
-    --toast-border: var(--a-info-border-subtle);
+    --toast-bg:     var(--md-sys-color-info-container);
+    --toast-fg:     var(--md-sys-color-info-on-surface);
+    --toast-border: var(--md-sys-color-info-outline-variant);
   }
   :where(:scope[variant="success"]) {
-    --toast-bg:     var(--a-success-muted);
-    --toast-fg:     var(--a-success-text);
-    --toast-border: var(--a-success-border-subtle);
+    --toast-bg:     var(--md-sys-color-success-container);
+    --toast-fg:     var(--md-sys-color-success-on-surface);
+    --toast-border: var(--md-sys-color-success-outline-variant);
   }
   :where(:scope[variant="warning"]) {
-    --toast-bg:     var(--a-warning-muted);
-    --toast-fg:     var(--a-warning-text);
-    --toast-border: var(--a-warning-border-subtle);
+    --toast-bg:     var(--md-sys-color-warning-container);
+    --toast-fg:     var(--md-sys-color-warning-on-surface);
+    --toast-border: var(--md-sys-color-warning-outline-variant);
   }
   :where(:scope[variant="danger"]) {
-    --toast-bg:     var(--a-danger-muted);
-    --toast-fg:     var(--a-danger-text);
-    --toast-border: var(--a-danger-border-subtle);
+    --toast-bg:     var(--md-sys-color-danger-container);
+    --toast-fg:     var(--md-sys-color-danger-on-surface);
+    --toast-border: var(--md-sys-color-danger-outline-variant);
   }
 
   /* `primary` is the accent-filled variant — solid bg + on-accent text
      for "branded" toasts (welcome banners, feature-launch nudges)
      where the message should read as a brand stamp rather than tinted
      status chrome. Tracks the same accent-strong source as button-ui's
-     primary; border picks up `--a-accent-border-subtle` since there's
+     primary; border picks up `--a-primary-border-subtle` since there's
      no `--a-primary-border-subtle` token. */
   :where(:scope[variant="primary"]) {
     --toast-bg:     var(--a-primary-bg);
-    --toast-fg:     var(--a-primary-fg);
-    --toast-border: var(--a-accent-border-subtle);
+    --toast-fg:     var(--md-sys-color-primary-on-primary);
+    --toast-border: var(--md-sys-color-primary-outline-variant);
   }
 
   /* `muted` and `neutral` are semantic aliases of the base canvas
@@ -156,8 +156,8 @@ toast-ui[data-closing][position="top-left"] {
   :where(:scope[variant="muted"]),
   :where(:scope[variant="neutral"]) {
     --toast-bg:     var(--a-bg-subtle);
-    --toast-fg:     var(--a-fg);
-    --toast-border: var(--a-border-subtle);
+    --toast-fg:     var(--md-sys-color-neutral-on-surface);
+    --toast-border: var(--md-sys-color-neutral-outline-variant);
   }
 
   /* ── Message slot ── */

package/components/toc/toc.a2ui.json

@@ -146,7 +146,7 @@
       },
       "--toc-rule-active": {
         "description": "Active-item indicator rule color (left border).",
-        "default": "var(--a-accent-bg)"
+        "default": "var(--a-primary-bg)"
       },
       "--toc-size": {
         "description": "Link font-size.",

package/components/toc/toc.css

@@ -12,9 +12,9 @@
 
     /* ── Colors ── */
     --toc-fg:               var(--a-fg-muted);
-    --toc-fg-active:        var(--a-fg);
-    --toc-fg-hover:         var(--a-fg);
-    --toc-rule-active:      var(--a-accent-bg);
+    --toc-fg-active:        var(--md-sys-color-neutral-on-surface);
+    --toc-fg-hover:         var(--md-sys-color-neutral-on-surface);
+    --toc-rule-active:      var(--a-primary-bg);
     --toc-rule-inactive:    transparent;
 
     /* ── Typography ── */

package/components/toc/toc.yaml

@@ -83,7 +83,7 @@ tokens:
     default: var(--a-space-1)
   --toc-rule-active:
     description: Active-item indicator rule color (left border).
-    default: var(--a-accent-bg)
+    default: var(--a-primary-bg)
   --toc-padding-block:
     description: Per-link block padding (top/bottom).
     default: var(--a-space-1)

package/components/toggle-group/toggle-group.css

@@ -41,10 +41,10 @@ toggle-option-ui:not([disabled]):hover {
     /* ── Colors ── */
     --toggle-option-bg:           transparent;
     --toggle-option-fg:           var(--a-fg-muted);
-    --toggle-option-fg-hover:     var(--a-fg);
+    --toggle-option-fg-hover:     var(--md-sys-color-neutral-on-surface);
     --toggle-option-bg-hover:     var(--a-bg-muted);
-    --toggle-option-selected-bg:  var(--a-accent-muted);
-    --toggle-option-selected-fg:  var(--a-accent-bg);
+    --toggle-option-selected-bg:  var(--md-sys-color-primary-container);
+    --toggle-option-selected-fg:  var(--a-primary-bg);
     --toggle-option-fg-disabled:  var(--a-ui-text-disabled);
 
     /* ── Typography ── */

package/components/toolbar/toolbar.css

@@ -8,8 +8,8 @@
 
     /* ── Colors ── */
     --toolbar-bg:     transparent;
-    --toolbar-fg:     var(--a-fg);
-    --toolbar-border: var(--a-border-subtle);
+    --toolbar-fg:     var(--md-sys-color-neutral-on-surface);
+    --toolbar-border: var(--md-sys-color-neutral-outline-variant);
   }
 
   /* ── Base ── */
@@ -97,7 +97,7 @@ toolbar-ui [data-toolbar-spillover-menu]:not(:popover-open) {
 toolbar-ui [data-toolbar-spillover-menu]:popover-open {
   margin: 0;
   padding: var(--a-space-1);
-  border: 1px solid var(--a-border-subtle);
+  border: 1px solid var(--md-sys-color-neutral-outline-variant);
   border-radius: var(--a-radius-lg);
   background: var(--a-bg-subtle);
   box-shadow: var(--a-shadow-lg);