@adia-ai/web-components 0.7.27 → 0.8.0

package/components/select/select.css

@@ -274,7 +274,7 @@ select-ui [slot="listbox"] {
   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);
   max-height: 15rem;
   overflow-y: auto;
@@ -356,7 +356,7 @@ select-ui [role="option"] img[data-option-avatar] {
 /* Separator */
 select-ui [data-separator] {
   height: 1px;
-  background: var(--a-border-subtle);
+  background: var(--md-sys-color-neutral-outline-variant);
   margin: var(--a-space-1) 0;
   border: none;
 }
@@ -402,7 +402,7 @@ select-ui [role="group"] [slot="group-label"] {
 
 /* Divider between groups — enabled by <select-ui divider>. */
 select-ui[divider] [role="group"] + [role="group"] {
-  border-top: 1px solid var(--a-border-subtle);
+  border-top: 1px solid var(--md-sys-color-neutral-outline-variant);
   margin-top: var(--a-space-1);
   padding-top: var(--a-space-1);
 }
@@ -426,7 +426,7 @@ select-ui [slot="listbox"] [data-select-all] {
   align-items: center;
   justify-content: flex-end;
   padding: var(--a-space-1);
-  border-bottom: 1px solid var(--a-border-subtle);
+  border-bottom: 1px solid var(--md-sys-color-neutral-outline-variant);
   margin-bottom: var(--a-space-1);
 }
 select-ui [slot="listbox"] [data-select-all-btn] {
@@ -435,7 +435,7 @@ select-ui [slot="listbox"] [data-select-all-btn] {
   border: none;
   font: inherit;
   font-size: var(--a-ui-xs);
-  color: var(--a-accent);
+  color: var(--md-sys-color-primary);
   cursor: pointer;
   padding: var(--a-space-1) var(--a-space-2);
   border-radius: var(--a-radius-sm);
@@ -460,7 +460,7 @@ select-ui [role="option"][data-multi-option] [data-checkbox] {
   height: 1rem;
   border: 1px solid var(--a-ui-border);
   border-radius: var(--a-radius-sm);
-  background: var(--a-canvas-bright);
+  background: var(--md-sys-color-neutral-surface-bright);
   margin-inline-end: 0; /* row gap already provides spacing */
   transition:
     background var(--a-duration-fast) var(--a-easing),
@@ -476,8 +476,8 @@ select-ui [role="option"][data-multi-option] [data-checkbox] icon-ui {
   transition: color var(--a-duration-fast) var(--a-easing);
 }
 select-ui [role="option"][data-multi-option][aria-selected="true"] [data-checkbox] {
-  background: var(--a-accent);
-  border-color: var(--a-accent);
+  background: var(--md-sys-color-primary);
+  border-color: var(--md-sys-color-primary);
 }
 select-ui [role="option"][data-multi-option][aria-selected="true"] [data-checkbox] icon-ui {
   color: var(--a-chrome-light);

package/components/skip-nav/skip-nav.a2ui.json

@@ -79,11 +79,11 @@
     "tokens": {
       "--skip-nav-bg": {
         "description": "Background of the visible (focused) skip link.",
-        "default": "var(--a-accent-bg)"
+        "default": "var(--a-primary-bg)"
       },
       "--skip-nav-fg": {
         "description": "Foreground of the visible (focused) skip link.",
-        "default": "var(--a-accent-fg)"
+        "default": "var(--md-sys-color-primary-on-primary)"
       }
     },
     "traits": [],

package/components/skip-nav/skip-nav.css

@@ -1,7 +1,7 @@
 @scope (skip-nav-ui) {
   :where(:scope) {
-    --skip-nav-bg: var(--a-accent-bg);
-    --skip-nav-fg: var(--a-accent-fg);
+    --skip-nav-bg: var(--a-primary-bg);
+    --skip-nav-fg: var(--md-sys-color-primary-on-primary);
   }
 
   /* Host renders nothing in flow — pure behavioral wrapper. The inner
@@ -48,7 +48,7 @@
     overflow: visible;
     clip: auto;
     clip-path: none;
-    outline: 2px solid var(--a-accent-bg);
+    outline: 2px solid var(--a-primary-bg);
     outline-offset: 2px;
   }
 }

package/components/skip-nav/skip-nav.yaml

@@ -36,10 +36,10 @@ traits: []
 tokens:
   --skip-nav-bg:
     description: Background of the visible (focused) skip link.
-    default: var(--a-accent-bg)
+    default: var(--a-primary-bg)
   --skip-nav-fg:
     description: Foreground of the visible (focused) skip link.
-    default: var(--a-accent-fg)
+    default: var(--md-sys-color-primary-on-primary)
 a2ui:
   rules:
     - rule: 'Place as the FIRST focusable element on the page — inside <body> before any nav / shell chrome. Otherwise keyboard users still tab through the nav before hitting the skip link.'

package/components/slider/slider.css

@@ -95,8 +95,8 @@
     --slider-track-bg:          var(--a-bg-muted);
     --slider-fill-bg:           var(--a-primary-bg);
     --slider-thumb-bg:          var(--a-chrome-light);
-    --slider-fill-bg-disabled:  var(--a-canvas-1-scrim);
-    --slider-thumb-bg-disabled: var(--a-canvas-2-scrim);
+    --slider-fill-bg-disabled:  var(--md-sys-color-neutral-scrim-weaker);
+    --slider-thumb-bg-disabled: var(--md-sys-color-neutral-scrim-weak);
 
     /* ── Typography ── */
     --slider-font-size:         var(--a-ui-size);
@@ -134,7 +134,7 @@
   }
 
   [slot="label"] {
-    color: var(--a-fg-subtle);
+    color: var(--md-sys-color-neutral-on-surface-variant);
   }
 
   [slot="readout"] {
@@ -144,7 +144,7 @@
   }
 
   [slot="value"] {
-    color: var(--a-fg);
+    color: var(--md-sys-color-neutral-on-surface);
     font-weight: var(--slider-value-weight);
     font-variant-numeric: tabular-nums;
   }
@@ -286,7 +286,7 @@
   }
   :scope[dual] [slot="value-lower"],
   :scope[dual] [slot="value-upper"] {
-    color: var(--a-fg);
+    color: var(--md-sys-color-neutral-on-surface);
     font-weight: var(--slider-value-weight);
     font-variant-numeric: tabular-nums;
   }

package/components/spinner/spinner.css

@@ -45,8 +45,8 @@
 
   /* ── Tones (override --spinner-color token) ────────────────────── */
   :scope[tone="current"] { --spinner-color: currentColor; }
-  :scope[tone="subtle"]  { --spinner-color: var(--a-fg-subtle); }
-  :scope[tone="accent"]  { --spinner-color: var(--a-accent-strong); }
+  :scope[tone="subtle"]  { --spinner-color: var(--md-sys-color-neutral-on-surface-variant); }
+  :scope[tone="accent"]  { --spinner-color: var(--a-primary-strong); }
   :scope[tone="inverse"] { --spinner-color: var(--a-chrome-light); }
 
   /* ── Variant: ARC (default) — rotating quarter-circle border ───── */

package/components/spinner/spinner.test.js

@@ -191,8 +191,10 @@ describe('spinner-ui — CSS source contract', () => {
   });
 
   it('tone="subtle" / "accent" / "inverse" set --spinner-color via semantic tokens', () => {
-    expect(SPINNER_CSS).toMatch(/:scope\[tone="subtle"\][^}]*--spinner-color:\s*var\(--a-fg-subtle\)/);
-    expect(SPINNER_CSS).toMatch(/:scope\[tone="accent"\][^}]*--spinner-color:\s*var\(--a-accent-strong\)/);
+    // subtle reads the Material on-surface-variant role since the
+    // static-token migration (material-color-bridge-contract.md).
+    expect(SPINNER_CSS).toMatch(/:scope\[tone="subtle"\][^}]*--spinner-color:\s*var\(--md-sys-color-neutral-on-surface-variant\)/);
+    expect(SPINNER_CSS).toMatch(/:scope\[tone="accent"\][^}]*--spinner-color:\s*var\(--a-primary-strong\)/);
     expect(SPINNER_CSS).toMatch(/:scope\[tone="inverse"\][^}]*--spinner-color:\s*var\(--a-chrome-light\)/);
   });
 

package/components/stat/stat.css

@@ -6,7 +6,7 @@
     --stat-value-weight: var(--a-weight-bold);
     --stat-value-fg:     var(--a-fg-strong);
     --stat-label-size:   var(--a-ui-size);
-    --stat-label-fg:     var(--a-fg);
+    --stat-label-fg:     var(--md-sys-color-neutral-on-surface);
     --stat-change-size:  var(--a-ui-size);
     --stat-up-fg:        var(--a-success-bg);
     --stat-down-fg:      var(--a-danger-bg);

package/components/step-progress/step-progress.a2ui.json

@@ -2,7 +2,7 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$id": "https://adiaui.dev/a2ui/v0_9/components/StepProgress.json",
   "title": "StepProgress",
-  "description": "Discrete-dash step-progress indicator. One <span> dash per step in\n[total]; the first [value] dashes are filled with --a-accent. Used\nin multi-step flows (registration, onboarding, wizards). Replaces\nthe bespoke `[data-onb-progress]` + `[data-reg-progress]` markup\nthat lived in onboarding.css + registration.css with a single\nprimitive.\n",
+  "description": "Discrete-dash step-progress indicator. One <span> dash per step in\n[total]; the first [value] dashes are filled with --md-sys-color-primary. Used\nin multi-step flows (registration, onboarding, wizards). Replaces\nthe bespoke `[data-onb-progress]` + `[data-reg-progress]` markup\nthat lived in onboarding.css + registration.css with a single\nprimitive.\n",
   "type": "object",
   "allOf": [
     {

package/components/step-progress/step-progress.class.js

@@ -18,7 +18,7 @@
  *
  * Discrete-dash step progress indicator. One dash per step in the
  * total; the first `value` dashes carry [data-active] and paint with
- * --a-accent. Used in registration + onboarding flows; replaces the
+ * --a-primary. Used in registration + onboarding flows; replaces the
  * bespoke `[data-onb-progress]` / `[data-reg-progress]` markup.
  *
  * Primitive shape (per ROADMAP § Done):

package/components/step-progress/step-progress.css

@@ -9,8 +9,8 @@
     --step-progress-track-gap:  var(--a-space-1);
     --step-progress-dash-h:     4px;
     --step-progress-dash-radius: var(--a-radius-full);
-    --step-progress-dash-bg:    var(--a-border-subtle);
-    --step-progress-dash-bg-active: var(--a-accent);
+    --step-progress-dash-bg:    var(--md-sys-color-neutral-outline-variant);
+    --step-progress-dash-bg-active: var(--md-sys-color-primary);
     --step-progress-caption-fg: var(--a-fg-muted);
     --step-progress-caption-size: var(--a-ui-sm);
 

package/components/step-progress/step-progress.d.ts

@@ -1,6 +1,6 @@
 /**
  * `<step-progress-ui>` — Discrete-dash step-progress indicator. One <span> dash per step in
-[total]; the first [value] dashes are filled with --a-accent. Used
+[total]; the first [value] dashes are filled with --md-sys-color-primary. Used
 in multi-step flows (registration, onboarding, wizards). Replaces
 the bespoke `[data-onb-progress]` + `[data-reg-progress]` markup
 that lived in onboarding.css + registration.css with a single

package/components/step-progress/step-progress.yaml

@@ -7,7 +7,7 @@ category: feedback
 version: 1
 description: |
   Discrete-dash step-progress indicator. One <span> dash per step in
-  [total]; the first [value] dashes are filled with --a-accent. Used
+  [total]; the first [value] dashes are filled with --md-sys-color-primary. Used
   in multi-step flows (registration, onboarding, wizards). Replaces
   the bespoke `[data-onb-progress]` + `[data-reg-progress]` markup
   that lived in onboarding.css + registration.css with a single

package/components/stepper/stepper.css

@@ -13,23 +13,23 @@
   :where(:scope) {
     /* ── Circle ── */
     --stepper-size:            2rem;
-    --stepper-bg:              var(--a-bg);
-    --stepper-border:          var(--a-border);
+    --stepper-bg:              var(--md-sys-color-neutral-background);
+    --stepper-border:          var(--md-sys-color-neutral-outline);
     --stepper-fg:              var(--a-fg-muted);
     --stepper-font:            var(--a-ui-sm);
     --stepper-weight:          var(--a-weight-medium);
     --stepper-border-size:     2px;
 
-    --stepper-bg-active:       var(--a-bg);
-    --stepper-border-active:   var(--a-accent);
-    --stepper-fg-active:       var(--a-accent);
+    --stepper-bg-active:       var(--md-sys-color-neutral-background);
+    --stepper-border-active:   var(--md-sys-color-primary);
+    --stepper-fg-active:       var(--md-sys-color-primary);
 
-    --stepper-bg-done:         var(--a-accent);
-    --stepper-border-done:     var(--a-accent);
-    --stepper-fg-done:         var(--a-accent-fg);
+    --stepper-bg-done:         var(--md-sys-color-primary);
+    --stepper-border-done:     var(--md-sys-color-primary);
+    --stepper-fg-done:         var(--md-sys-color-primary-on-primary);
 
-    --stepper-line:            var(--a-border-subtle);
-    --stepper-line-done:       var(--a-accent);
+    --stepper-line:            var(--md-sys-color-neutral-outline-variant);
+    --stepper-line-done:       var(--md-sys-color-primary);
     --stepper-line-size:       2px;
 
     /* ── Layout ──
@@ -69,23 +69,23 @@
        co-located item legitimately reads parent tokens (the same
        scope pattern as menu-item-ui inside menu-ui's popover). */
     --stepper-item-size:           var(--stepper-size, 2rem);
-    --stepper-item-bg:             var(--stepper-bg, var(--a-bg));
-    --stepper-item-border:         var(--stepper-border, var(--a-border));
+    --stepper-item-bg:             var(--stepper-bg, var(--md-sys-color-neutral-background));
+    --stepper-item-border:         var(--stepper-border, var(--md-sys-color-neutral-outline));
     --stepper-item-fg:             var(--stepper-fg, var(--a-fg-muted));
     --stepper-item-font:           var(--stepper-font, var(--a-ui-sm));
     --stepper-item-weight:         var(--stepper-weight, var(--a-weight-medium));
     --stepper-item-border-size:    var(--stepper-border-size, 2px);
 
-    --stepper-item-bg-active:      var(--stepper-bg-active, var(--a-bg));
-    --stepper-item-border-active:  var(--stepper-border-active, var(--a-accent));
-    --stepper-item-fg-active:      var(--stepper-fg-active, var(--a-accent));
+    --stepper-item-bg-active:      var(--stepper-bg-active, var(--md-sys-color-neutral-background));
+    --stepper-item-border-active:  var(--stepper-border-active, var(--md-sys-color-primary));
+    --stepper-item-fg-active:      var(--stepper-fg-active, var(--md-sys-color-primary));
 
-    --stepper-item-bg-done:        var(--stepper-bg-done, var(--a-accent));
-    --stepper-item-border-done:    var(--stepper-border-done, var(--a-accent));
-    --stepper-item-fg-done:        var(--stepper-fg-done, var(--a-accent-fg));
+    --stepper-item-bg-done:        var(--stepper-bg-done, var(--md-sys-color-primary));
+    --stepper-item-border-done:    var(--stepper-border-done, var(--md-sys-color-primary));
+    --stepper-item-fg-done:        var(--stepper-fg-done, var(--md-sys-color-primary-on-primary));
 
-    --stepper-item-line:           var(--stepper-line, var(--a-border-subtle));
-    --stepper-item-line-done:      var(--stepper-line-done, var(--a-accent));
+    --stepper-item-line:           var(--stepper-line, var(--md-sys-color-neutral-outline-variant));
+    --stepper-item-line-done:      var(--stepper-line-done, var(--md-sys-color-primary));
     --stepper-item-line-size:      var(--stepper-line-size, 2px);
 
     --stepper-item-radius-full:    var(--a-radius-full);
@@ -98,9 +98,9 @@
 
     --stepper-item-label-weight:   var(--a-weight-medium);
     --stepper-item-label-size:     var(--a-ui-size);
-    --stepper-item-label-fg:       var(--a-fg);
+    --stepper-item-label-fg:       var(--md-sys-color-neutral-on-surface);
     --stepper-item-pending-fg:     var(--a-fg-muted);
-    --stepper-item-desc-fg:        var(--a-fg-subtle);
+    --stepper-item-desc-fg:        var(--md-sys-color-neutral-on-surface-variant);
     --stepper-item-desc-size:      var(--a-ui-sm);
 
     --stepper-item-icon-size:      0.625rem;

package/components/stream/stream.css

@@ -1,10 +1,10 @@
 @scope (stream-ui) {
   :where(:scope) {
-    --stream-fg:              var(--a-fg);
+    --stream-fg:              var(--md-sys-color-neutral-on-surface);
     --stream-font-size:       var(--a-body-size);
     --stream-font-family:     var(--a-font-family);
     --stream-leading:         var(--a-body-leading);
-    --stream-cursor-color:    var(--a-accent-bg);
+    --stream-cursor-color:    var(--a-primary-bg);
     --stream-blink-duration:  0.6s;
   }
 

package/components/swatch/swatch.class.js

@@ -540,7 +540,7 @@ export class UISwatch extends UIElement {
     }
     // Resolve the actual rendered color. For var(...) refs the inline
     // [color] attr is what was set; we read from computed style so that
-    // CSS-resolved tokens (e.g. var(--a-accent)) get their final value.
+    // CSS-resolved tokens (e.g. var(--md-sys-color-primary)) get their final value.
     const probe = this.color || getComputedStyle(this).getPropertyValue('--swatch-color').trim();
     if (probe === this.#lastColorForContrast) return;
     this.#lastColorForContrast = probe;

package/components/swatch/swatch.css

@@ -18,7 +18,7 @@
        <swatch-ui> still renders something visible; consumers usually set
        --swatch-color via [color] attr or inline style. */
     --swatch-color:             var(--a-data-0);
-    --swatch-label-fg:          var(--a-fg-subtle);
+    --swatch-label-fg:          var(--md-sys-color-neutral-on-surface-variant);
 
     /* ── Shape ── */
     --swatch-radius-block:      var(--a-radius-sm);
@@ -32,7 +32,7 @@
     --swatch-label-step-size:   10px;
     --swatch-label-step-mt:     4px;
     --swatch-detail-size:       var(--a-ui-xs);
-    --swatch-detail-fg:         var(--a-fg-subtle);
+    --swatch-detail-fg:         var(--md-sys-color-neutral-on-surface-variant);
 
     /* ── Badge ── */
     --swatch-badge-size:        var(--a-ui-xs);
@@ -44,11 +44,11 @@
     /* ── Copy button ── */
     --swatch-copy-size:         var(--a-space-3);
     --swatch-copy-fg:           var(--a-fg-muted);
-    --swatch-copy-fg-ok:        var(--a-success);
-    --swatch-copy-fg-fail:      var(--a-warning);
+    --swatch-copy-fg-ok:        var(--md-sys-color-success);
+    --swatch-copy-fg-fail:      var(--md-sys-color-warning);
 
     /* ── Selectable ring ── */
-    --swatch-select-ring:       var(--a-accent);
+    --swatch-select-ring:       var(--md-sys-color-primary);
     --swatch-select-ring-width: 2px;
   }
 
@@ -238,17 +238,17 @@
     font-size: var(--swatch-badge-size);
     line-height: 1;
     border-radius: var(--swatch-badge-radius);
-    box-shadow: 0 0 0 1px color-mix(in oklab, var(--a-border-subtle) 60%, transparent);
+    box-shadow: 0 0 0 1px color-mix(in oklab, var(--md-sys-color-neutral-outline-variant) 60%, transparent);
   }
 
   /* Make sure the badge has a positioning context — the tile holds it. */
   :scope { position: relative; }
 
   /* Badge variants — symbol color encodes semantic */
-  :scope > [data-badge] > [data-badge-variant="out-of-gamut"] { color: var(--a-warning); }
-  :scope > [data-badge] > [data-badge-variant="p3-only"]      { color: var(--a-info); }
-  :scope > [data-badge] > [data-badge-variant="apca-pass"]    { color: var(--a-success); }
-  :scope > [data-badge] > [data-badge-variant="apca-fail"]    { color: var(--a-danger); }
+  :scope > [data-badge] > [data-badge-variant="out-of-gamut"] { color: var(--md-sys-color-warning); }
+  :scope > [data-badge] > [data-badge-variant="p3-only"]      { color: var(--md-sys-color-info); }
+  :scope > [data-badge] > [data-badge-variant="apca-pass"]    { color: var(--md-sys-color-success); }
+  :scope > [data-badge] > [data-badge-variant="apca-fail"]    { color: var(--md-sys-color-danger); }
 
   /* ═══════ Auto-contrast label color ═══════
      When [auto-contrast] is set, JS computes the swatch's OKLab L and
@@ -303,7 +303,7 @@
     border-radius: var(--a-radius-xs);
     transition: color var(--a-duration-fast) var(--a-easing-out), background var(--a-duration-fast) var(--a-easing-out);
   }
-  :scope > [data-copy]:hover { color: var(--a-fg); background: var(--a-bg-muted); }
+  :scope > [data-copy]:hover { color: var(--md-sys-color-neutral-on-surface); background: var(--a-bg-muted); }
   :scope > [data-copy]:focus-visible {
     outline: var(--swatch-select-ring-width) solid var(--swatch-select-ring);
     outline-offset: 1px;

package/components/swiper/swiper.css

@@ -34,8 +34,8 @@
        the row. The hitbox stays at 1rem; only the visible circle grows. */
     --swiper-dot-size-active: calc(var(--swiper-dot-size) + var(--a-space-1));
     --swiper-dot-gap:         var(--a-space-2);
-    --swiper-dot-bg:          var(--a-border);
-    --swiper-dot-bg-active:   var(--a-fg);
+    --swiper-dot-bg:          var(--md-sys-color-neutral-outline);
+    --swiper-dot-bg-active:   var(--md-sys-color-neutral-on-surface);
     --swiper-dot-radius:      var(--a-radius-full);
 
     /* ── Host vertical rhythm ── */
@@ -52,7 +52,7 @@
     --swiper-btn-size:      3rem;
     --swiper-btn-bg:        transparent;
     --swiper-btn-bg-hover:  var(--a-bg-muted);
-    --swiper-btn-fg:        var(--a-fg);
+    --swiper-btn-fg:        var(--md-sys-color-neutral-on-surface);
     --swiper-btn-radius:    var(--a-radius-full);
     --swiper-btn-shadow:    none;
     --swiper-btn-offset:    var(--a-space-2);
@@ -245,7 +245,7 @@
   :scope[chrome="toolbar"] > [data-swiper-head] > [data-swiper-label] {
     font-size: var(--a-ui-md);
     font-weight: var(--a-weight-semibold);
-    color: var(--a-fg);
+    color: var(--md-sys-color-neutral-on-surface);
   }
 
   :scope[chrome="toolbar"] > [data-swiper-head] > [data-swiper-paddles] {
@@ -255,7 +255,7 @@
 
   :scope[chrome="toolbar"] > [data-swiper-foot] > [data-swiper-counter] {
     font-size: var(--a-ui-sm);
-    color: var(--a-fg-subtle);
+    color: var(--md-sys-color-neutral-on-surface-variant);
     font-variant-numeric: tabular-nums;
   }
 

package/components/switch/switch.css

@@ -29,8 +29,8 @@ switch-ui[checked] [slot="thumb"] {
 
     /* ── Colors ── */
     --switch-track-bg-hover:       var(--a-bg-muted);
-    --switch-track-bg-checked-hover: var(--a-primary-hover);
-    --switch-track-border-checked-hover: var(--a-primary-hover);
+    --switch-track-bg-checked-hover: var(--md-sys-color-primary-hover);
+    --switch-track-border-checked-hover: var(--md-sys-color-primary-hover);
     --switch-thumb-shadow:         var(--a-shadow-sm);
 
     /* ── Transition ── */
@@ -45,11 +45,11 @@ switch-ui[checked] [slot="thumb"] {
     --switch-track-width:          calc(var(--a-toggle-size) * 1.8);
     --switch-track-bg:             var(--a-ui-bg);
     --switch-track-border:         var(--a-ui-border);
-    --switch-track-border-hover:   var(--a-fg-subtle);
+    --switch-track-border-hover:   var(--md-sys-color-neutral-on-surface-variant);
 
     /* ── Track: checked ── */
-    --switch-track-bg-checked:     var(--a-primary);
-    --switch-track-border-checked: var(--a-primary);
+    --switch-track-bg-checked:     var(--md-sys-color-primary);
+    --switch-track-border-checked: var(--md-sys-color-primary);
 
     /* ── Thumb ── (derived from track; inset accounts for border + visual gap) */
     --switch-thumb-inset:          2px;

package/components/table/cell-types.js

@@ -1,5 +1,7 @@
 // cell-types.js - Built-in cell type registry for table-ui
 
+import { inline } from '../../core/markdown.js';
+
 const cellTypes = {};
 
 function registerCellType(name, config) {
@@ -216,7 +218,7 @@ registerCellType('link', {
     if (!el) {
       cell.textContent = '';
       el = document.createElement('a');
-      el.style.color = 'var(--table-accent, var(--a-primary))';
+      el.style.color = 'var(--table-accent, var(--md-sys-color-primary))';
       el.style.textDecoration = 'none';
       cell.appendChild(el);
     }
@@ -233,7 +235,34 @@ registerCellType('link', {
   sortFn: 'alphanumeric',
 });
 
-// 11. progress
+// 11. markdown — TKT-0008: cells with inline `code`/**bold**/*italic*/
+// [link](href) content the docs-transpiler couldn't express as a plain
+// string (table.yaml {columns,data} contract carries plain values; this
+// is the one escape hatch for INLINE-safe rich text, reusing the same
+// inline() converter core/markdown.js already round-trips against
+// scripts/build/lib/docs-transpiler.mjs's convertInline() — the two are
+// paired encode/decode halves of one contract, not independent parsers).
+// Block-level content (nested tables, component tags, colspan/rowspan)
+// stays out of scope; those still fall back to the preserved-HTML Code
+// panel synthesizeTable already emits.
+registerCellType('markdown', {
+  render(value, row, cell) {
+    let s = cell.firstElementChild;
+    if (!s || s.tagName !== 'SPAN') {
+      cell.replaceChildren();
+      s = cell.appendChild(document.createElement('span'));
+    }
+    s.innerHTML = inline(String(value ?? ''));
+    cell.title = s.textContent;
+  },
+  format(value) {
+    return String(value ?? '');
+  },
+  align: 'left',
+  sortFn: 'alphanumeric',
+});
+
+// 12. progress
 registerCellType('progress', {
   render(value, row, cell) {
     let wrapper = cell.querySelector('row-ui');
@@ -262,7 +291,7 @@ registerCellType('progress', {
   sortFn: 'numeric',
 });
 
-// 12. actions
+// 13. actions
 registerCellType('actions', {
   render(value, row, cell, meta) {
     const actions = meta?.actions || [];

package/components/table/table.a2ui.json

@@ -22,7 +22,7 @@
     },
     "data": {
       "description": "Row records. Array of plain objects keyed to columns[].key.",
-      "$ref": "common_types.json#/$defs/DynamicStringList"
+      "$ref": "common_types.json#/$defs/DynamicObjectList"
     },
     "density": {
       "description": "Controls cell padding and row height. 'compact' for dense data, 'standard' for default spacing, 'comfortable' for spacious rows.",

package/components/table/table.css

@@ -9,23 +9,28 @@
     --table-heading-fg:       var(--a-fg-muted);
     --table-heading-bg:       transparent;
 
-    --table-fg:               var(--a-fg);
+    --table-fg:               var(--md-sys-color-neutral-on-surface);
     --table-fg-hover:         var(--a-fg-strong);
     --table-fg-secondary:     var(--a-fg-muted);
-    --table-border:           var(--a-border-subtle);
-    --table-border-strong:    var(--a-border);
+    --table-border:           var(--md-sys-color-neutral-outline-variant);
+    --table-border-strong:    var(--md-sys-color-neutral-outline);
     --table-py:               var(--a-space-3);
     --table-px:               var(--a-space-4);
 
     --table-row-bg:           transparent;
-    --table-row-bg-hover:     var(--a-bg-hover);
+    /* container-low, not the generic --a-bg-hover state-layer token
+       (TKT-0020) — --a-bg-hover / --md-sys-color-neutral-hover is tuned
+       for small interactive targets (buttons); the same tone across a
+       full-width row reads too heavy. container-low is the lighter,
+       large-surface-appropriate tint. */
+    --table-row-bg-hover:     var(--md-sys-color-neutral-container-low);
     --table-row-bg-selected:  var(--a-bg-selected);
     --table-row-bg-striped:   var(--a-bg-subtle);
 
     --table-sort-fg:          var(--a-fg-muted);
-    --table-accent:           var(--a-primary);
+    --table-accent:           var(--md-sys-color-primary);
     --table-fg-disabled:      var(--a-ui-text-disabled);
-    --table-bg:               var(--a-bg);
+    --table-bg:               var(--md-sys-color-neutral-background);
     /* No default rounding — table-ui composes inside card-ui / drawer-ui
        which own the surface rounding; doubly-rounded corners (table inside
        card) look broken. Override per-instance via `--table-radius: …` if
@@ -40,7 +45,7 @@
     /* ── Filter popover ── */
     --table-filter-bg:        var(--a-canvas);
     --table-filter-fg:        var(--a-canvas-text);
-    --table-filter-border:    var(--a-border);
+    --table-filter-border:    var(--md-sys-color-neutral-outline);
     --table-filter-radius:    var(--a-radius-md);
     --table-filter-inset:     var(--a-space-2);
     --table-filter-gap:       var(--a-space-1);
@@ -50,11 +55,11 @@
     --table-filter-input-radius: var(--a-radius-sm);
     --table-filter-input-size: var(--a-ui-tiny);
     --table-filter-btn-px:    var(--a-space-1);
-    --table-filter-clear-fg:  var(--a-accent);
+    --table-filter-clear-fg:  var(--md-sys-color-primary);
 
     /* ── Chips / filter bar ── */
     --table-chip-bar-bg:      var(--a-canvas-subtle);
-    --table-chip-bar-border:  var(--a-border);
+    --table-chip-bar-border:  var(--md-sys-color-neutral-outline);
     --table-chip-bar-gap:     var(--a-space-1);
     --table-chip-bar-py:      var(--a-space-1);
     --table-chip-bar-px:      var(--a-space-2);
@@ -62,7 +67,7 @@
 
     /* ── Detail / expansion row ── */
     --table-detail-bg:        var(--a-canvas-subtle);
-    --table-detail-border:    var(--a-border);
+    --table-detail-border:    var(--md-sys-color-neutral-outline);
     --table-detail-py:        var(--a-space-3);
     --table-detail-px:        var(--a-space-4);
 
@@ -71,7 +76,7 @@
     --table-pinned-shadow:    var(--a-chrome-shadow-soft);
 
     /* ── Aggregation row ── */
-    --table-agg-border:       var(--a-border);
+    --table-agg-border:       var(--md-sys-color-neutral-outline);
     --table-agg-size:         var(--a-ui-tiny);
     --table-agg-py:           var(--a-space-2);
     --table-agg-px:           var(--a-space-3);