@adia-ai/web-components 0.7.28 → 0.8.0

package/components/menu/menu.css

@@ -1,13 +1,13 @@
 @scope (menu-ui) {
   :where(:scope) {
     --menu-popover-padding:    var(--a-space-1);
-    --menu-popover-border:     var(--a-border-subtle);
+    --menu-popover-border:     var(--md-sys-color-neutral-outline-variant);
     --menu-popover-radius:     var(--a-radius-lg);
     --menu-popover-bg:         var(--a-bg-subtle);
     --menu-popover-shadow:     var(--a-shadow-lg);
     --menu-popover-min-width:  10rem;
     --menu-popover-font-size:  var(--a-ui-size);
-    --menu-popover-fg:         var(--a-fg);
+    --menu-popover-fg:         var(--md-sys-color-neutral-on-surface);
   }
 
   :scope {
@@ -47,14 +47,14 @@
 menu-ui [data-menu-popover] {
   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);
   min-width: 10rem;
   font-family: var(--menu-font-family, var(--a-font-family-ui));
   font-size: var(--a-ui-size);
-  color: var(--a-fg);
+  color: var(--md-sys-color-neutral-on-surface);
   /* Fade + lift in on first paint via @starting-style. Plain `transition`
      applies during exit too (display: none can't transition, but opacity
      can — and the close path is JS-controlled so no exit anim is needed). */
@@ -118,15 +118,15 @@ menu-item-ui[variant="danger"]:hover [slot="icon"] {
 
     /* ── Colors ── */
     --menu-item-bg:             transparent;
-    --menu-item-fg:             var(--a-fg-subtle);
-    --menu-item-fg-hover:       var(--a-fg);
+    --menu-item-fg:             var(--md-sys-color-neutral-on-surface-variant);
+    --menu-item-fg-hover:       var(--md-sys-color-neutral-on-surface);
     --menu-item-bg-hover:       var(--a-bg-muted);
     --menu-item-fg-disabled:    var(--a-ui-text-disabled);
     --menu-item-icon-fg:        var(--a-fg-muted);
-    --menu-item-icon-fg-hover:  var(--a-fg);
+    --menu-item-icon-fg-hover:  var(--md-sys-color-neutral-on-surface);
     --menu-item-icon-disabled:  var(--a-ui-text-disabled);
     --menu-item-danger-fg:      var(--a-danger-bg);
-    --menu-item-danger-bg:      var(--a-danger-muted);
+    --menu-item-danger-bg:      var(--md-sys-color-danger-container);
 
     /* ── Typography ── */
     --menu-item-font-size:      var(--a-ui-size);
@@ -201,7 +201,7 @@ menu-item-ui[variant="danger"]:hover [slot="icon"] {
     --menu-divider-my: var(--a-space-1);
 
     /* ── Colors ── */
-    --menu-divider-color: var(--a-border-subtle);
+    --menu-divider-color: var(--md-sys-color-neutral-outline-variant);
   }
 
   :scope {

package/components/modal/modal.css

@@ -11,17 +11,17 @@
   :where(:scope) {
     --modal-width:          32rem;
     --modal-radius:         var(--a-radius-lg);
-    --modal-bg:             var(--a-canvas-dimmer);
-    --modal-border:         var(--a-border-subtle);
+    --modal-bg:             var(--md-sys-color-neutral-surface-dimmer);
+    --modal-border:         var(--md-sys-color-neutral-outline-variant);
     --modal-shadow:         var(--a-shadow-lg);
     --modal-backdrop:       var(--a-scrim-dialog);
     --modal-duration:       var(--a-duration);
     --modal-easing:         var(--a-easing-out);
     --modal-heading-size:   var(--a-ui-lg);
     --modal-heading-weight: var(--a-weight-semibold);
-    --modal-header-fg:      var(--a-fg);
+    --modal-header-fg:      var(--md-sys-color-neutral-on-surface);
     --modal-close-fg:       var(--a-fg-muted);
-    --modal-close-hover:    var(--a-fg);
+    --modal-close-hover:    var(--md-sys-color-neutral-on-surface);
     --modal-pad-header:     var(--a-space-3);
     --modal-pad-body:       var(--a-space-4);
     --modal-pad-footer:     var(--a-space-3);

package/components/nav/nav.css

@@ -11,7 +11,7 @@
     --nav-py:        var(--a-space-2);
     --nav-font-size: var(--a-ui-size);
     --nav-bg:        transparent;
-    --nav-divider-bg: var(--a-border-subtle);
+    --nav-divider-bg: var(--md-sys-color-neutral-outline-variant);
     --nav-divider-my: var(--a-space-1);
 
     /* Primary-variant collapse */

package/components/nav-group/nav-group.css

@@ -10,7 +10,7 @@
     --nav-group-font-size-sm:  var(--a-ui-sm);
     --nav-group-font-size-lg:  var(--a-ui-lg);
     --nav-group-font-weight:   var(--a-weight-normal);
-    --nav-group-fg:            var(--a-fg);
+    --nav-group-fg:            var(--md-sys-color-neutral-on-surface);
     --nav-group-fg-hover:      var(--a-fg-strong);
     --nav-group-fg-muted:      var(--a-fg-muted);
     --nav-group-fg-selected:   var(--a-fg-strong);
@@ -215,7 +215,7 @@
 nav-group-ui [slot="popover"] {
   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);
   background: var(--a-bg-subtle);
   box-shadow: var(--a-shadow-lg);
@@ -250,27 +250,18 @@ nav-group-ui [slot="popover"] [role="option"]:hover {
   color: var(--nav-group-fg-hover);
 }
 
-/* Selected / current option — mirrors the main rail's nav-item selection:
-   muted fill + leading 2px accent bar. */
+/* Selected / current option — background fill alone (TKT-0017): a
+   paired leading accent bar (mirroring the main rail's nav-item
+   selection) was removed as a redundant second signal for the same
+   state — the muted fill + color + weight change already reads clearly
+   as "selected" on its own. */
 nav-group-ui [slot="popover"] [role="option"][aria-current="page"],
 nav-group-ui [slot="popover"] [role="option"][aria-selected="true"] {
-  position: relative;
   background: var(--nav-group-bg-hover);
   color: var(--nav-group-fg-selected);
   font-weight: var(--a-weight-medium);
 }
 
-nav-group-ui [slot="popover"] [role="option"][aria-current="page"]::before,
-nav-group-ui [slot="popover"] [role="option"][aria-selected="true"]::before {
-  content: '';
-  position: absolute;
-  inset-inline-start: calc(var(--a-space-2) * -0.5);
-  inset-block: 25%;
-  width: 2px;
-  border-radius: 1px;
-  background: var(--a-accent);
-}
-
 /* ── Section variant — groups render as kicker labels ──
    Primary variant defaults to collapsible:true (caret-toggleable).
    Section variant flips to collapsible:false-shape — header is a

package/components/nav-item/nav-item.css

@@ -29,7 +29,7 @@ nav-item-ui[selected] [slot="icon"]:empty::before {
 
 @scope (nav-item-ui) {
   :where(:scope) {
-    --nav-item-accent:          var(--a-accent);
+    --nav-item-accent:          var(--md-sys-color-primary);
     --nav-item-row-height:      var(--a-size);
     --nav-item-row-height-sm:   var(--a-size-sm);
     --nav-item-row-height-lg:   var(--a-size-lg);

package/components/noodles/noodles.a2ui.json

@@ -19,7 +19,7 @@
       "default": false
     },
     "color": {
-      "description": "Noodle stroke color. Defaults to --a-accent",
+      "description": "Noodle stroke color. Defaults to --a-primary-bg",
       "type": "string",
       "default": ""
     },

package/components/noodles/noodles.css

@@ -3,14 +3,14 @@
     /* ── Tokens ── */
     --noodles-duration:             var(--a-duration-fast);
     --noodles-easing:               var(--a-easing);
-    --noodles-stroke:               var(--a-accent-bg);
+    --noodles-stroke:               var(--a-primary-bg);
     /* Component-intrinsic visual constants; no --a-space-* equivalent */
     --noodles-stroke-width:         2px;
     --noodles-stroke-readonly:      var(--a-fg-muted);
     /* Component-intrinsic visual constants; no --a-space-* equivalent */
     --noodles-port-size:            10px;
-    --noodles-port-bg:              var(--a-accent-bg);
-    --noodles-port-border:          var(--a-bg);
+    --noodles-port-bg:              var(--a-primary-bg);
+    --noodles-port-border:          var(--md-sys-color-neutral-background);
     --noodles-port-hover-ring:      0 0 0 3px var(--a-bg-muted);
     --noodles-port-drop-scale:      1.4;
     --noodles-port-drag-opacity:    0.4;

package/components/noodles/noodles.d.ts

@@ -45,7 +45,7 @@ export type NoodlesNoodleDragEvent = CustomEvent<unknown>;
 export class UINoodles extends UIElement {
   /** Flowing dash animation on noodles */
   animated: boolean;
-  /** Noodle stroke color. Defaults to --a-accent */
+  /** Noodle stroke color. Defaults to --a-primary-bg */
   color: string;
   /** Noodle curve style */
   curve: 'bezier' | 'step' | 'straight';

package/components/noodles/noodles.yaml

@@ -15,7 +15,7 @@ props:
     type: boolean
     default: false
   color:
-    description: Noodle stroke color. Defaults to --a-accent
+    description: Noodle stroke color. Defaults to --a-primary-bg
     type: string
     default: ""
   curve:

package/components/option-card/option-card.css

@@ -34,39 +34,39 @@ option-card-ui[checked] [slot="icon"] {
     --option-card-padding-block:    var(--a-space-3);
     --option-card-padding-inline:   var(--a-space-4);
     --option-card-radius:           var(--a-radius-md);
-    --option-card-bg:               var(--a-bg);
-    --option-card-border:           var(--a-border);
+    --option-card-bg:               var(--md-sys-color-neutral-background);
+    --option-card-border:           var(--md-sys-color-neutral-outline);
     --option-card-gap-x:            var(--a-space-3);
     --option-card-gap-y:            var(--a-space-1);
 
     /* ── State: hover ── */
     --option-card-bg-hover:         var(--a-bg-muted);
-    --option-card-border-hover:     var(--a-fg-subtle);
+    --option-card-border-hover:     var(--md-sys-color-neutral-on-surface-variant);
 
     /* ── State: checked ── */
-    --option-card-bg-checked:       var(--a-accent-muted);
-    --option-card-border-checked:   var(--a-accent);
+    --option-card-bg-checked:       var(--md-sys-color-primary-container);
+    --option-card-border-checked:   var(--md-sys-color-primary);
 
     /* ── Indicator (CSS radio circle, same size + recipe as <radio-ui>). */
     --option-card-radio-size:       var(--a-toggle-size);
-    --option-card-radio-bg:         var(--a-bg);
-    --option-card-radio-border:     var(--a-border);
-    --option-card-radio-fill:       var(--a-accent);
+    --option-card-radio-bg:         var(--md-sys-color-neutral-background);
+    --option-card-radio-border:     var(--md-sys-color-neutral-outline);
+    --option-card-radio-fill:       var(--md-sys-color-primary);
     /* Mirror radio.css's --radio-fg-checked recipe: an always-light
-       token rather than --a-accent-fg, which can flip dark depending
+       token rather than --a-primary-fg, which can flip dark depending
        on theme/scheme combos and produce a near-black inner dot
        against the accent disc. */
     --option-card-radio-dot:        var(--a-chrome-light);
 
     /* ── Typography ── */
-    --option-card-heading-color:          var(--a-fg);
+    --option-card-heading-color:          var(--md-sys-color-neutral-on-surface);
     --option-card-heading-color-checked:  var(--a-fg-strong);
     --option-card-heading-weight:         var(--a-weight-medium);
     --option-card-heading-size:           var(--a-ui-size);
     --option-card-desc-color:             var(--a-fg-muted);
     --option-card-desc-size:              var(--a-ui-sm);
     --option-card-desc-line-height:       1.4;
-    --option-card-icon-color:             var(--a-fg-subtle);
+    --option-card-icon-color:             var(--md-sys-color-neutral-on-surface-variant);
     --option-card-icon-color-checked:     var(--a-fg-strong);
     --option-card-icon-size:              1.5rem;
 

package/components/otp-input/otp-input.css

@@ -10,7 +10,7 @@
     --otp-input-radius:       var(--a-radius-lg);
     --otp-input-border:       var(--a-ui-border);
     --otp-input-border-hover: var(--a-ui-border-hover);
-    --otp-input-border-focus: var(--a-accent);
+    --otp-input-border-focus: var(--md-sys-color-primary);
     --otp-input-bg-disabled:  var(--a-ui-bg-disabled);
     --otp-input-fg-disabled:  var(--a-ui-text-disabled);
     --otp-input-border-disabled: var(--a-ui-border-disabled);

package/components/page/page.css

@@ -20,11 +20,11 @@
 
     /* ── Surfaces ── */
     --page-bg:               var(--a-canvas-0);
-    --page-fg:               var(--a-fg);
+    --page-fg:               var(--md-sys-color-neutral-on-surface);
 
     /* ── Sticky-header chrome (when [data-header-stuck]) ── */
     --page-sticky-bg:        var(--a-canvas-0);
-    --page-sticky-border:    1px solid var(--a-border-subtle);
+    --page-sticky-border:    1px solid var(--md-sys-color-neutral-outline-variant);
     --page-sticky-shadow:    var(--a-shadow-sm);
   }
 

package/components/pane/pane.css

@@ -1,14 +1,14 @@
 @scope (pane-ui) {
   /* Tokens — :where() for zero specificity so consumers can override */
   :where(:scope) {
-    --pane-bg:              var(--a-bg);
-    --pane-border:          var(--a-border-subtle);
+    --pane-bg:              var(--md-sys-color-neutral-background);
+    --pane-border:          var(--md-sys-color-neutral-outline-variant);
     --pane-radius:          var(--a-radius-lg);
     /* Component-intrinsic measurement; no --a-space-* equivalent */
     --pane-bar-height:      var(--a-chrome-pane-header-height);
     --pane-header-px:       var(--a-space-3);
     --pane-header-py:       var(--a-space-2);
-    --pane-header-fg:       var(--a-fg);
+    --pane-header-fg:       var(--md-sys-color-neutral-on-surface);
     --pane-header-size:     var(--a-ui-size);
     --pane-header-weight:   var(--a-weight-medium);
     --pane-section-px:      var(--a-space-3);
@@ -20,7 +20,7 @@
     --pane-col-gap:         var(--a-space-3);
     /* Component-intrinsic measurement; no --a-space-* equivalent */
     --pane-resize-width:    4px;
-    --pane-resize-fg:       var(--a-border);
+    --pane-resize-fg:       var(--md-sys-color-neutral-outline);
     --pane-resize-fg-hover: var(--a-fg-muted);
 
     /* ── Spacing ── */
@@ -35,7 +35,7 @@
     --pane-section-header-weight: var(--a-weight-medium);
 
     /* ── Resize active ── */
-    --pane-resize-fg-active: var(--a-fg-subtle);
+    --pane-resize-fg-active: var(--md-sys-color-neutral-on-surface-variant);
 
     /* ── Transitions ── */
     --pane-duration:        var(--a-duration-fast);

package/components/password-strength/password-strength.css

@@ -11,7 +11,7 @@
     --password-strength-stack-gap:      var(--a-space-1);
 
     /* ── Colors ── */
-    --password-strength-segment-bg:     var(--a-canvas-1-scrim);
+    --password-strength-segment-bg:     var(--md-sys-color-neutral-scrim-weaker);
     --password-strength-color-weak:     var(--a-danger-bg);
     --password-strength-color-fair:     var(--a-warning-bg);
     --password-strength-color-good:     var(--a-info-bg);

package/components/pipeline-status/pipeline-status.css

@@ -27,17 +27,17 @@
     --pipeline-status-label-weight:    var(--a-weight-medium);
 
     /* Colors — keep aliases referenced via semantic tokens */
-    --pipeline-status-fg:              var(--a-fg-subtle);
-    --pipeline-status-label-fg:        var(--a-fg);
-    --pipeline-status-msg-fg:          var(--a-fg-subtle);
-    --pipeline-status-history-fg:      var(--a-fg-subtle);
-    --pipeline-status-log-fg:          var(--a-fg-subtle);
-
-    --pipeline-status-dot-bg:          var(--a-border);
-    --pipeline-status-dot-bg-active:   var(--a-accent);
+    --pipeline-status-fg:              var(--md-sys-color-neutral-on-surface-variant);
+    --pipeline-status-label-fg:        var(--md-sys-color-neutral-on-surface);
+    --pipeline-status-msg-fg:          var(--md-sys-color-neutral-on-surface-variant);
+    --pipeline-status-history-fg:      var(--md-sys-color-neutral-on-surface-variant);
+    --pipeline-status-log-fg:          var(--md-sys-color-neutral-on-surface-variant);
+
+    --pipeline-status-dot-bg:          var(--md-sys-color-neutral-outline);
+    --pipeline-status-dot-bg-active:   var(--md-sys-color-primary);
     --pipeline-status-dot-bg-complete: var(--a-success-strong);
 
-    --pipeline-status-history-border:  var(--a-border-subtle);
+    --pipeline-status-history-border:  var(--md-sys-color-neutral-outline-variant);
     --pipeline-status-border-thin:     1px;
 
     /* Motion */

package/components/popover/popover.css

@@ -7,8 +7,8 @@
 
     /* ── Colors (default panel chrome — opt out per `:has(>card-ui)` rule
        below or by setting tokens to transparent / 0) ── */
-    --popover-bg:      var(--a-canvas-dimmer);
-    --popover-border:  var(--a-border-subtle);
+    --popover-bg:      var(--md-sys-color-neutral-surface-dimmer);
+    --popover-border:  var(--md-sys-color-neutral-outline-variant);
     --popover-shadow:  var(--a-shadow-lg);
   }
 

package/components/preview/preview.css

@@ -13,7 +13,7 @@
 @scope (preview-ui) {
   /* ── Block 1 — TOKENS ── */
   :where(:scope) {
-    --preview-border:       1px solid var(--a-border-subtle);
+    --preview-border:       1px solid var(--md-sys-color-neutral-outline-variant);
     --preview-radius:       var(--a-radius-lg);
     --preview-render-bg:    var(--a-canvas-1);
     --preview-render-pad:   var(--a-space-6);
@@ -85,7 +85,7 @@
     display: block;
     --code-border: transparent;
     --code-radius: 0;
-    --code-bg: var(--a-bg);
+    --code-bg: var(--md-sys-color-neutral-background);
   }
 
   /* code-first — divider moves to the bottom of the (now-leading) code pane */
@@ -180,7 +180,14 @@
     margin-bottom: 0.5rem;
     border-radius: var(--a-radius-sm);
   }
-  /* Narrow: collapse each row to stacked render-over-code. */
+  /* Narrow: collapse each row to stacked render-over-code. The render
+     cell keeps its full --preview-render-pad (--a-space-6, 24px) inset;
+     code-ui's own header/body padding (--code-py/px, --a-space-2/3 —
+     8/12px) reads as visibly cramped directly underneath once the two
+     panes stack (they never collide side-by-side, only here). Step
+     code-ui's padding up to --a-space-4 (16px) at this breakpoint only —
+     narrows the gap without inflating a slim caption bar to the render
+     pane's full 24px. */
   @media (max-width: 40rem) {
     :scope[rows] [data-preview-row] {
       grid-template-columns: 1fr;
@@ -189,6 +196,10 @@
       border-inline-start: none;
       border-block-start: var(--preview-border);
     }
+    [data-preview-code] code-ui {
+      --code-py: var(--a-space-4);
+      --code-px: var(--a-space-4);
+    }
   }
   /* Content-driven fallback — a single row whose live sample is wider than the
      half-width cell gets [data-stack] from the component's overflow check, so it

package/components/progress/progress.a2ui.json

@@ -22,7 +22,7 @@
       "default": null
     },
     "variant": {
-      "description": "Render mode — `bar` (default) or `spinner`. For fill color set the `--progress-fill` token (defaults to `--a-accent`); there is no variant-as-color (use the token).",
+      "description": "Render mode — `bar` (default) or `spinner`. For fill color set the `--progress-fill` token (defaults to `--md-sys-color-primary`); there is no variant-as-color (use the token).",
       "type": "string",
       "enum": [
         "bar",

package/components/progress/progress.css

@@ -2,7 +2,7 @@
   :where(:scope) {
     /* -- Tokens -- */
     --progress-track:    var(--a-bg-muted);
-    --progress-fill:     var(--a-accent);
+    --progress-fill:     var(--md-sys-color-primary);
     --progress-height:   0.375rem;
     --progress-radius:   var(--a-radius-full);
     --progress-duration: var(--a-duration);

package/components/progress/progress.d.ts

@@ -15,6 +15,6 @@ import { UIElement } from '../../core/element.js';
 export class UIProgress extends UIElement {
   /** Current progress. 0..max (or 0..1 when max omitted). null = indeterminate (legacy -1 accepted for back-compat). */
   value: number;
-  /** Render mode — `bar` (default) or `spinner`. For fill color set the `--progress-fill` token (defaults to `--a-accent`); there is no variant-as-color (use the token). */
+  /** Render mode — `bar` (default) or `spinner`. For fill color set the `--progress-fill` token (defaults to `--md-sys-color-primary`); there is no variant-as-color (use the token). */
   variant: 'bar' | 'spinner';
 }

package/components/progress/progress.yaml

@@ -18,7 +18,7 @@ props:
     default: null
   variant:
     description: Render mode — `bar` (default) or `spinner`. For fill color set
-      the `--progress-fill` token (defaults to `--a-accent`); there is no
+      the `--progress-fill` token (defaults to `--md-sys-color-primary`); there is no
       variant-as-color (use the token).
     type: string
     default: bar

package/components/progress-row/progress-row.css

@@ -6,12 +6,12 @@
     --progress-row-gap:           var(--a-space-2);
     --progress-row-column-gap:    var(--a-space-2);
     --progress-row-label-size:    var(--a-ui-size);
-    --progress-row-label-fg:      var(--a-fg);
+    --progress-row-label-fg:      var(--md-sys-color-neutral-on-surface);
     --progress-row-meta-size:     var(--a-ui-sm);
     --progress-row-meta-fg:       var(--a-fg-muted);
 
     /* Fill color piped into nested progress-ui via its own token */
-    --progress-row-fill-bg:       var(--a-accent-bg);
+    --progress-row-fill-bg:       var(--a-primary-bg);
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
 }
 

package/components/radio/radio.css

@@ -29,14 +29,14 @@ radio-ui[checked] [slot="dot"]::after {
     /* ── Colors ── */
     --radio-bg:               var(--a-ui-bg);
     --radio-border:           var(--a-ui-border);
-    --radio-border-hover:     var(--a-fg-subtle);
+    --radio-border-hover:     var(--md-sys-color-neutral-on-surface-variant);
     --radio-bg-hover:         var(--a-bg-muted);
 
     /* ── State: checked ── */
-    --radio-bg-checked:       var(--a-primary);
-    --radio-border-checked:   var(--a-primary);
+    --radio-bg-checked:       var(--md-sys-color-primary);
+    --radio-border-checked:   var(--md-sys-color-primary);
     --radio-fg-checked:       var(--a-chrome-light);
-    --radio-bg-checked-hover: var(--a-primary-hover);
+    --radio-bg-checked-hover: var(--md-sys-color-primary-hover);
 
     /* ── State: disabled ── */
     --radio-fg-disabled:      var(--a-ui-text-disabled);

package/components/range/range.css

@@ -13,7 +13,7 @@ range-ui:not([disabled]) [slot="field"]:hover [data-layer="fill"] {
     --range-fill-bg-hover:   var(--a-ui-bg-hover);
     --range-fill-bg-active:  var(--a-ui-bg-active);
     --range-fill-bg-disabled: var(--a-canvas-muted);
-    --range-fill-fg:         var(--a-fg);
+    --range-fill-fg:         var(--md-sys-color-neutral-on-surface);
     --range-fill-fg-disabled: var(--a-ui-text-disabled);
     --range-fill-label-fg:   var(--a-ui-text-subtle);
     --range-border:          var(--a-ui-border);
@@ -40,7 +40,7 @@ range-ui:not([disabled]) [slot="field"]:hover [data-layer="fill"] {
     --range-layer-gap:       var(--a-space-1);
 
     /* ── Hover text ── */
-    --range-label-fg-hover:  var(--a-fg-subtle);
+    --range-label-fg-hover:  var(--md-sys-color-neutral-on-surface-variant);
 
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
 }

package/components/rating/rating.css

@@ -81,8 +81,8 @@ rating-ui:hover [data-rating-symbol] {
 
   /* ── Variants override TOKENS only ── */
   :scope[variant="accent"] {
-    --rating-fg-filled: var(--a-accent-bg);
-    --rating-fg-hover:  var(--a-accent-bg);
+    --rating-fg-filled: var(--a-primary-bg);
+    --rating-fg-hover:  var(--a-primary-bg);
   }
   :scope[variant="warning"] {
     --rating-fg-filled: var(--a-warning-bg);

package/components/richtext/richtext.class.js

@@ -35,6 +35,10 @@ export class UIRichText extends UIElement {
     // would bloat the DOM (and break parsing on multi-line content with
     // unescaped quotes). The property is the source of truth.
     markdown: { type: String, default: '', reflect: false },
+    // TKT-0004 added the CSS ([flush] paragraph-grade embedding mode) and
+    // the yaml prop but never registered it here — `el.flush = true` was a
+    // silent no-op (dogfood-status static-properties-vs-yaml finding).
+    flush:    { type: Boolean, default: false, reflect: true },
   };
 
   static template = () => null;

package/components/richtext/richtext.css

@@ -12,13 +12,13 @@
 
     /* ── Colors ── */
     --richtext-bg:             var(--a-canvas-0);
-    --richtext-fg:             var(--a-fg);
+    --richtext-fg:             var(--md-sys-color-neutral-on-surface);
     --richtext-fg-muted:       var(--a-fg-muted);
-    --richtext-fg-subtle:      var(--a-fg-subtle);
+    --richtext-fg-subtle:      var(--md-sys-color-neutral-on-surface-variant);
     --richtext-code-bg:        var(--a-canvas-2);
-    --richtext-border:         var(--a-border-subtle);
-    --richtext-link:           var(--a-accent-bg);
-    --richtext-link-hover:     var(--a-accent);
+    --richtext-border:         var(--md-sys-color-neutral-outline-variant);
+    --richtext-link:           var(--a-primary-bg);
+    --richtext-link-hover:     var(--md-sys-color-primary);
 
     /* ── Typography ── */
     --richtext-font:           var(--a-font-family);

package/components/richtext/richtext.yaml

@@ -33,6 +33,7 @@ props:
       off for standalone articles and chat transcripts.
     type: boolean
     default: false
+    reflect: true
 events: {}
 slots:
   default:

package/components/row/row.css

@@ -8,7 +8,7 @@
     --row-gap:     var(--a-gap-self, var(--a-gap));
     --row-justify: flex-start;
     --row-align:   center;
-    --row-drag-bg-active: var(--a-accent-muted);
+    --row-drag-bg-active: var(--md-sys-color-primary-container);
   }
 
   :scope {

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);