@adia-ai/web-components 0.7.28 → 0.8.1

package/components/calendar-picker/calendar-picker.css

@@ -7,7 +7,7 @@
     --calendar-picker-font-size:              var(--a-ui-size);
     --calendar-picker-label-size:             var(--a-label-size);
     --calendar-picker-label-fg:               var(--a-label-color);
-    --calendar-picker-label-fg-focus:         var(--a-fg-subtle);
+    --calendar-picker-label-fg-focus:         var(--md-sys-color-neutral-on-surface-variant);
 
     /* Trigger */
     --calendar-picker-trigger-height:         var(--a-size);
@@ -29,7 +29,7 @@
 
     /* Popover */
     --calendar-picker-popover-bg:             var(--a-bg-subtle);
-    --calendar-picker-popover-border:         var(--a-border-subtle);
+    --calendar-picker-popover-border:         var(--md-sys-color-neutral-outline-variant);
     --calendar-picker-popover-radius:         var(--a-radius-lg);
     --calendar-picker-popover-shadow:         var(--a-shadow-lg);
     --calendar-picker-popover-padding:        var(--a-space-2);
@@ -37,12 +37,12 @@
        7 columns at --a-size + inter-cell breathing + popover padding both
        sides (border-box). Matches calendar-grid-ui's width formula. */
     --calendar-picker-popover-width:          calc(7 * var(--a-size) + 6 * var(--a-space-1) + 2 * var(--a-space-2));
-    --calendar-picker-popover-fg:             var(--a-fg);
+    --calendar-picker-popover-fg:             var(--md-sys-color-neutral-on-surface);
 
     /* Header */
     --calendar-picker-header-gap:             var(--a-space-1);
     --calendar-picker-header-mb:              var(--a-space-2);
-    --calendar-picker-title-fg:               var(--a-fg);
+    --calendar-picker-title-fg:               var(--md-sys-color-neutral-on-surface);
     --calendar-picker-title-size:             var(--a-ui-size);
     --calendar-picker-title-weight:           var(--a-weight-medium);
 
@@ -54,7 +54,7 @@
     --calendar-picker-nav-bg:                 transparent;
     --calendar-picker-nav-bg-hover:           var(--a-bg-muted);
     --calendar-picker-nav-fg:                 var(--a-fg-muted);
-    --calendar-picker-nav-fg-hover:           var(--a-fg);
+    --calendar-picker-nav-fg-hover:           var(--md-sys-color-neutral-on-surface);
     --calendar-picker-nav-icon-size:          var(--a-caret-size);
 
     /* Weekday header — row height tracks the control height (one notch
@@ -73,15 +73,15 @@
     --calendar-picker-day-radius:             var(--a-radius);
     --calendar-picker-day-font-size:          var(--a-ui-size);
     --calendar-picker-day-bg:                 transparent;
-    --calendar-picker-day-fg:                 var(--a-fg-subtle);
+    --calendar-picker-day-fg:                 var(--md-sys-color-neutral-on-surface-variant);
     --calendar-picker-day-bg-hover:           var(--a-bg-hover);
-    --calendar-picker-day-fg-hover:           var(--a-fg);
-    --calendar-picker-day-bg-selected-hover:  var(--a-accent-bg-hover);
-    --calendar-picker-day-bg-selected:        var(--a-accent);
-    --calendar-picker-day-fg-selected:        var(--a-accent-fg);
+    --calendar-picker-day-fg-hover:           var(--md-sys-color-neutral-on-surface);
+    --calendar-picker-day-bg-selected-hover:  var(--a-primary-bg-hover);
+    --calendar-picker-day-bg-selected:        var(--md-sys-color-primary);
+    --calendar-picker-day-fg-selected:        var(--md-sys-color-primary-on-primary);
     --calendar-picker-day-fg-outside:         var(--a-fg-muted);
     --calendar-picker-day-fg-disabled:        var(--a-ui-text-disabled);
-    --calendar-picker-day-today-border:       var(--a-accent);
+    --calendar-picker-day-today-border:       var(--md-sys-color-primary);
     --calendar-picker-day-today-dot-size:     var(--a-space-0-5);
     --calendar-picker-day-today-dot-offset:   var(--a-space-1);
     --calendar-picker-day-grid-gap:           var(--a-space-px); /* 1px hairline between cells */

package/components/canvas/canvas.css

@@ -6,10 +6,10 @@
 
   :where(:scope) {
     --canvas-bg:              var(--a-canvas-0);
-    --canvas-fg:              var(--a-fg);
+    --canvas-fg:              var(--md-sys-color-neutral-on-surface);
     --canvas-font-family:     var(--a-font-family);
     --canvas-inset:           var(--a-space-2);
-    --canvas-surface-bg:      var(--a-bg);
+    --canvas-surface-bg:      var(--md-sys-color-neutral-background);
     --canvas-surface-max:     56rem;
   }
 

package/components/card/card.css

@@ -20,20 +20,20 @@
     --card-description-size:  var(--a-caption-size);
 
     /* ── Colors ── */
-    --card-bg:                var(--a-canvas-base);
-    --card-bg-padded:         var(--a-canvas-0-scrim);
-    --card-fg:                var(--a-fg);
+    --card-bg:                var(--md-sys-color-neutral-surface);
+    --card-bg-padded:         var(--md-sys-color-neutral-scrim-weakest);
+    --card-fg:                var(--md-sys-color-neutral-on-surface);
     --card-heading-fg:        var(--a-fg-strong);
-    --card-description-fg:    var(--a-fg-subtle);
-    --card-border:            1px solid var(--a-border-subtle);
-    --card-divider:           var(--a-border-subtle);
+    --card-description-fg:    var(--md-sys-color-neutral-on-surface-variant);
+    --card-border:            1px solid var(--md-sys-color-neutral-outline-variant);
+    --card-divider:           var(--md-sys-color-neutral-outline-variant);
     --card-shadow:            var(--a-shadow-sm);
 
     /* ── Loading ring ──
        The mask composition below uses an opaque source (masks are intensity-only,
        not theme-colored). `--a-chrome-light` is our theme-stable opaque white token.
        The visible ring color comes from the accent token. */
-    --card-loading-ring:      var(--a-accent-bg);
+    --card-loading-ring:      var(--a-primary-bg);
     --card-loading-mask-color: var(--a-chrome-light);
 
     /* ── Elevation ── */
@@ -47,7 +47,7 @@
     --card-loading-easing:    linear;
 
     /* ── Draggable ── */
-    --card-drag-bg-active:    var(--a-accent-muted);
+    --card-drag-bg-active:    var(--md-sys-color-primary-container);
   }
 
   :scope {
@@ -71,7 +71,7 @@
   :scope[variant="outline"] {
     --card-bg: transparent;
     --card-shadow: none;
-    --card-border: 1px solid var(--a-border);
+    --card-border: 1px solid var(--md-sys-color-neutral-outline);
   }
 
   :scope[variant="filled"] {
@@ -461,10 +461,10 @@
      brightest) per nesting depth; depths past brightest cap at brightest.
      :scope card-ui has specificity (0,1,1) which beats the
      :where(:scope) initializer (0,0,0) in each inner scope. */
-  :scope card-ui                                     { --card-bg: var(--a-canvas-base); --card-border: 1px solid var(--a-border); --a-radius: var(--a-radius-md); }
-  :scope card-ui card-ui                              { --card-bg: var(--a-canvas-bright); --a-radius: var(--a-radius-sm); }
-  :scope card-ui card-ui card-ui                       { --card-bg: var(--a-canvas-brighter); }
-  :scope card-ui card-ui card-ui card-ui                { --card-bg: var(--a-canvas-brightest); }
-  :scope card-ui card-ui card-ui card-ui card-ui         { --card-bg: var(--a-canvas-brightest); }
-  :scope card-ui card-ui card-ui card-ui card-ui card-ui  { --card-bg: var(--a-canvas-brightest); }
+  :scope card-ui                                     { --card-bg: var(--md-sys-color-neutral-surface); --card-border: 1px solid var(--md-sys-color-neutral-outline); --a-radius: var(--a-radius-md); }
+  :scope card-ui card-ui                              { --card-bg: var(--md-sys-color-neutral-surface-bright); --a-radius: var(--a-radius-sm); }
+  :scope card-ui card-ui card-ui                       { --card-bg: var(--md-sys-color-neutral-surface-brighter); }
+  :scope card-ui card-ui card-ui card-ui                { --card-bg: var(--md-sys-color-neutral-surface-brightest); }
+  :scope card-ui card-ui card-ui card-ui card-ui         { --card-bg: var(--md-sys-color-neutral-surface-brightest); }
+  :scope card-ui card-ui card-ui card-ui card-ui card-ui  { --card-bg: var(--md-sys-color-neutral-surface-brightest); }
 }

package/components/chart/chart.css

@@ -12,26 +12,26 @@
        and the chart inherits that value naturally. To register the
        default formally (and enable transitions), add an `@property` rule
        at `:root` in a global stylesheet. */
-    --chart-fg:             var(--a-fg);
-    --chart-bar:            var(--a-accent);
-    --chart-bar-hover:      var(--a-accent-bg-hover);
-    --chart-line:           var(--a-accent);
-    --chart-dot:            var(--a-accent);
-    --chart-grid:           var(--a-border-subtle);
+    --chart-fg:             var(--md-sys-color-neutral-on-surface);
+    --chart-bar:            var(--md-sys-color-primary);
+    --chart-bar-hover:      var(--a-primary-bg-hover);
+    --chart-line:           var(--md-sys-color-primary);
+    --chart-dot:            var(--md-sys-color-primary);
+    --chart-grid:           var(--md-sys-color-neutral-outline-variant);
     --chart-axis:           var(--a-fg-muted);
-    --chart-label:          var(--a-fg-subtle);
-    --chart-value:          var(--a-fg);
-    --chart-avg:            var(--a-warning);
+    --chart-label:          var(--md-sys-color-neutral-on-surface-variant);
+    --chart-value:          var(--md-sys-color-neutral-on-surface);
+    --chart-avg:            var(--md-sys-color-warning);
     --chart-area-opacity:   0.15;
     --chart-line-width:     2;
     --chart-radius:         4;
 
     /* Layout */
-    --chart-border:         var(--a-border-subtle);
+    --chart-border:         var(--md-sys-color-neutral-outline-variant);
     --chart-space-sm:       var(--a-space-1);
     --chart-space-md:       var(--a-space-2);
     --chart-space-lg:       var(--a-space-3);
-    --chart-dot-stroke:     var(--a-bg);
+    --chart-dot-stroke:     var(--md-sys-color-neutral-background);
     --chart-max-height:     28rem;
 
     /* Legend */
@@ -457,7 +457,7 @@
      produce a solid-disc render. The inline `fill="none"` attribute on the
      SVG element loses to any CSS rule that names `fill`. */
   circle[data-radial-track] {
-    stroke: var(--a-border-subtle);
+    stroke: var(--md-sys-color-neutral-outline-variant);
     fill: none;
   }
   circle[data-radial-bar] {
@@ -478,7 +478,7 @@
   /* ── Gauge ──
      Half-donut — track is faint backing, fill reads as primary accent. */
   :scope[type="gauge"] [data-radial-track] {
-    fill: var(--a-border-subtle);
+    fill: var(--md-sys-color-neutral-outline-variant);
     stroke: none;
   }
   :scope[type="gauge"] [data-gauge-fill] {
@@ -572,7 +572,7 @@
   [data-sankey-node][data-slice="9"] { fill: var(--chart-9); }
 
   [data-sankey-link] {
-    fill: var(--a-fg-subtle);
+    fill: var(--md-sys-color-neutral-on-surface-variant);
     opacity: 0.35;
   }
   [data-sankey-link]:hover {
@@ -646,17 +646,17 @@
   }
 
   :scope[color="info"] {
-    --chart-bar:      var(--a-info);
+    --chart-bar:      var(--md-sys-color-info);
     --chart-bar-hover: var(--a-info-bg-hover);
-    --chart-line:     var(--a-info);
-    --chart-dot:      var(--a-info);
+    --chart-line:     var(--md-sys-color-info);
+    --chart-dot:      var(--md-sys-color-info);
   }
 
   :scope[color="accent"] {
-    --chart-bar:      var(--a-accent);
-    --chart-bar-hover: var(--a-accent-bg-hover);
-    --chart-line:     var(--a-accent);
-    --chart-dot:      var(--a-accent);
+    --chart-bar:      var(--md-sys-color-primary);
+    --chart-bar-hover: var(--a-primary-bg-hover);
+    --chart-line:     var(--md-sys-color-primary);
+    --chart-dot:      var(--md-sys-color-primary);
   }
 
   /* ── Tooltip hit-target cursor ──
@@ -677,8 +677,8 @@
    ───────────────────────────────────────────────────────────────── */
 
 .chart-tooltip-popup {
-  --chart-tooltip-bg:       var(--a-fg);
-  --chart-tooltip-fg:       var(--a-bg);
+  --chart-tooltip-bg:       var(--md-sys-color-neutral-on-surface);
+  --chart-tooltip-fg:       var(--md-sys-color-neutral-background);
   --chart-tooltip-px:       var(--a-space-2-5);
   --chart-tooltip-py:       var(--a-space-1-5);
   --chart-tooltip-radius:   var(--a-radius-sm);

package/components/chart-legend/chart-legend.css

@@ -12,13 +12,13 @@
 
     /* ── Typography ── */
     --chart-legend-font-size:   var(--a-ui-tiny);
-    --chart-legend-fg:          var(--a-fg-subtle);
+    --chart-legend-fg:          var(--md-sys-color-neutral-on-surface-variant);
     --chart-legend-fg-inactive: var(--a-fg-muted);
 
     /* ── Interaction ── */
     --chart-legend-row-radius:  var(--a-radius-sm);
     --chart-legend-row-hover:   var(--a-canvas-2);
-    --chart-legend-row-fg-hover: var(--a-fg);
+    --chart-legend-row-fg-hover: var(--md-sys-color-neutral-on-surface);
 
     /* ── Focus ── */
     --chart-legend-focus-ring:  var(--a-focus-ring);

package/components/chat-thread/chat-input.css

@@ -34,9 +34,9 @@ chat-input-ui textarea-ui:not([disabled]) [slot="text"]:hover {
        hover / focus / disabled / placeholder treatments inside this
        @scope and re-paints them with these tokens. */
     --chat-input-bg:              var(--a-canvas-0);
-    --chat-input-fg:              var(--a-fg);
-    --chat-input-border:          var(--a-border-subtle);
-    --chat-input-caret-color:     var(--a-fg-subtle);
+    --chat-input-fg:              var(--md-sys-color-neutral-on-surface);
+    --chat-input-border:          var(--md-sys-color-neutral-outline-variant);
+    --chat-input-caret-color:     var(--md-sys-color-neutral-on-surface-variant);
     --chat-input-placeholder-fg:  var(--a-ui-text-placeholder);
 
     /* Hover — matches input-ui's affordance (subtle alpha lift on the
@@ -54,7 +54,7 @@ chat-input-ui textarea-ui:not([disabled]) [slot="text"]:hover {
        owned here so the inner textarea-ui's `--a-ui-text-disabled` doesn't
        leak through. */
     --chat-input-bg-disabled:     transparent;
-    --chat-input-border-disabled: var(--a-border-subtle);
+    --chat-input-border-disabled: var(--md-sys-color-neutral-outline-variant);
     --chat-input-fg-disabled:     var(--a-ui-text-disabled);
 
     /* Canonical focus ring — chat-input is a *nested-control host*.
@@ -69,7 +69,7 @@ chat-input-ui textarea-ui:not([disabled]) [slot="text"]:hover {
     /* ── Image preview ── */
     --chat-input-image-size:      3rem;                /* 48px at d=1 */
     --chat-input-image-radius:    var(--a-radius-sm);
-    --chat-input-image-border:    var(--a-border-subtle);
+    --chat-input-image-border:    var(--md-sys-color-neutral-outline-variant);
     --chat-input-preview-gap:     var(--a-space-2);
     --chat-input-preview-py:      var(--a-space-2);
 
@@ -77,7 +77,7 @@ chat-input-ui textarea-ui:not([disabled]) [slot="text"]:hover {
     --chat-input-remove-size:     var(--a-space-4);
     --chat-input-remove-offset:   var(--a-space-1);
     --chat-input-remove-bg:       var(--a-fg-muted);
-    --chat-input-remove-fg:       var(--a-bg);
+    --chat-input-remove-fg:       var(--md-sys-color-neutral-background);
     --chat-input-remove-font:     var(--a-ui-tiny);
 
     /* ── Transition ── */

package/components/chat-thread/chat-thread.css

@@ -1,9 +1,9 @@
 @scope (chat-thread-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --chat-border-color:          var(--a-border-subtle);
+    --chat-border-color:          var(--md-sys-color-neutral-outline-variant);
     --chat-radius:                var(--a-radius-lg);
-    --chat-bg:                    var(--a-bg);
+    --chat-bg:                    var(--md-sys-color-neutral-background);
     --chat-gap:                   var(--a-space-2);
     --chat-padding-y:             var(--a-space-3);
     --chat-padding-x:             var(--a-space-4);
@@ -19,12 +19,12 @@
     --chat-header-avatar-size:    var(--a-size-md);
     --chat-header-avatar-radius:  var(--a-radius-full);
     --chat-header-avatar-bg:      var(--a-bg-muted);
-    --chat-header-avatar-fg:      var(--a-fg-subtle);
+    --chat-header-avatar-fg:      var(--md-sys-color-neutral-on-surface-variant);
 
     /* ── Message avatar ── */
     --chat-msg-avatar-radius:     var(--a-radius-full);
     --chat-msg-avatar-bg:         var(--a-bg-muted);
-    --chat-msg-avatar-fg:         var(--a-fg-subtle);
+    --chat-msg-avatar-fg:         var(--md-sys-color-neutral-on-surface-variant);
 
     /* ── Bubble ── */
     --chat-bubble-padding-y:      var(--a-space-2);
@@ -33,12 +33,12 @@
     --chat-bubble-tail-radius:    var(--a-radius-sm);
 
     /* ── Bubble: user ── */
-    --chat-user-bg:               var(--a-primary);
-    --chat-user-fg:               var(--a-primary-fg);
+    --chat-user-bg:               var(--md-sys-color-primary);
+    --chat-user-fg:               var(--md-sys-color-primary-on-primary);
 
     /* ── Bubble: assistant ── */
     --chat-assistant-bg:          var(--a-bg-subtle);
-    --chat-assistant-fg:          var(--a-fg);
+    --chat-assistant-fg:          var(--md-sys-color-neutral-on-surface);
 
     /* ── Typography ── */
     --chat-header-avatar-size-font: var(--a-ui-md);

package/components/check/check.css

@@ -41,7 +41,7 @@ check-ui[indeterminate] {
     /* ── State: default ── */
     --check-bg:               var(--a-ui-bg);
     --check-border:           var(--a-ui-border);
-    --check-border-hover:     var(--a-fg-subtle);
+    --check-border-hover:     var(--md-sys-color-neutral-on-surface-variant);
 
     /* ── Transitions ── */
     --check-duration:         var(--a-duration-fast);
@@ -54,10 +54,10 @@ check-ui[indeterminate] {
     --check-bg-hover:         var(--a-bg-muted);
 
     /* ── State: checked ── */
-    --check-bg-checked:       var(--a-primary);
-    --check-border-checked:   var(--a-primary);
+    --check-bg-checked:       var(--md-sys-color-primary);
+    --check-border-checked:   var(--md-sys-color-primary);
     --check-fg-checked:       var(--a-chrome-light);
-    --check-bg-checked-hover: var(--a-primary-hover);
+    --check-bg-checked-hover: var(--md-sys-color-primary-hover);
 
     /* ── State: disabled ── */
     --check-fg-disabled:      var(--a-ui-text-disabled);

package/components/code/code-editor.js

@@ -38,7 +38,7 @@ import { tags as t } from '@lezer/highlight';
 
 export const adiaBaseTheme = EditorView.theme({
   '&':           { fontFamily: 'inherit', fontSize: 'inherit', color: 'inherit', backgroundColor: 'transparent' },
-  '.cm-content': { padding: '0', caretColor: 'inherit' },
+  '.cm-content': { caretColor: 'inherit' },
   '.cm-focused': { outline: 'none' },
 });
 

package/components/code/code.css

@@ -10,13 +10,13 @@
     --code-lint-marker-w: 3px; /* Vertical lint-marker rule; intrinsic measurement; no --a-space-* equivalent at this width. */
 
     /* ── Colors ── */
-    --code-bg:          var(--a-bg);
-    --code-fg:          var(--a-fg);
-    --code-border:      var(--a-border-subtle);
+    --code-bg:          var(--md-sys-color-neutral-background);
+    --code-fg:          var(--md-sys-color-neutral-on-surface);
+    --code-border:      var(--md-sys-color-neutral-outline-variant);
     --code-header-bg:   var(--a-bg-scrim);
     --code-header-fg:   var(--a-fg-muted);
     --code-copy-hover-bg: var(--a-bg-muted);
-    --code-copy-hover-fg: var(--a-fg);
+    --code-copy-hover-fg: var(--md-sys-color-neutral-on-surface);
 
     /* ── Typography ── */
     --code-font:        var(--a-font-family-code);
@@ -36,10 +36,10 @@
     /* Transparency-mixing in oklab — Safari < 18 has an OKLCH bug where
        the transparent operand's hue resolves to 0, red-shifting the mix.
        oklab is hue-agnostic and visually identical in fixed engines. */
-    --code-active-line-bg:   color-mix(in oklab, var(--a-accent-muted) 40%, transparent);
-    --code-selection-bg:     color-mix(in oklab, var(--a-accent-muted) 60%, transparent);
-    --code-selection-match:  color-mix(in oklab, var(--a-accent-muted) 30%, transparent);
-    --code-cursor:           var(--a-accent-strong);
+    --code-active-line-bg:   color-mix(in oklab, var(--md-sys-color-primary-container) 40%, transparent);
+    --code-selection-bg:     color-mix(in oklab, var(--md-sys-color-primary-container) 60%, transparent);
+    --code-selection-match:  color-mix(in oklab, var(--md-sys-color-primary-container) 30%, transparent);
+    --code-cursor:           var(--a-primary-strong);
     --code-focus-ring:       var(--a-focus-ring);
 
     /* ── Syntax highlight tokens ──
@@ -47,18 +47,18 @@
        tokens. Overridable per-instance by setting `--code-tok-*` on
        any ancestor. See docs/specs/code-editor.md §6.3 for the tag →
        class → role map. */
-    --code-tok-comment:      var(--a-fg-subtle);
-    --code-tok-keyword:      var(--a-accent-strong);
+    --code-tok-comment:      var(--md-sys-color-neutral-on-surface-variant);
+    --code-tok-keyword:      var(--a-primary-strong);
     --code-tok-string:       var(--a-success-strong);
     --code-tok-number:       var(--a-info-strong);
     --code-tok-boolean:      var(--a-info-strong);
-    --code-tok-operator:     var(--a-fg);
+    --code-tok-operator:     var(--md-sys-color-neutral-on-surface);
     --code-tok-punctuation:  var(--a-fg-muted);
     --code-tok-function:     var(--a-brand-strong);
-    --code-tok-variable:     var(--a-fg);
+    --code-tok-variable:     var(--md-sys-color-neutral-on-surface);
     --code-tok-type:         var(--a-warning-strong);
-    --code-tok-property:     var(--a-fg);
-    --code-tok-tag:          var(--a-accent-strong);
+    --code-tok-property:     var(--md-sys-color-neutral-on-surface);
+    --code-tok-tag:          var(--a-primary-strong);
     --code-tok-attribute:    var(--a-warning-strong);
     --code-tok-url:          var(--a-info-strong);
     --code-tok-invalid:      var(--a-danger-strong);
@@ -72,8 +72,8 @@
     --code-lint-warning:     var(--a-warning-strong);
     --code-lint-info:        var(--a-info-strong);
     --code-lint-tooltip-bg:  var(--a-bg-strong);  /* §230-bundle (v0.5.9): elevated panel surface. Was orphaned --a-surface-floating. */
-    --code-lint-tooltip-fg:  var(--a-fg);
-    --code-lint-tooltip-border: var(--a-border-subtle);
+    --code-lint-tooltip-fg:  var(--md-sys-color-neutral-on-surface);
+    --code-lint-tooltip-border: var(--md-sys-color-neutral-outline-variant);
   }
 
   /* ── Block (default) ── */
@@ -178,7 +178,7 @@
     column-gap: var(--a-space-3);
   }
   & > pre > code[data-line-state-mode] [data-line-num] {
-    color: var(--a-fg-subtle);
+    color: var(--md-sys-color-neutral-on-surface-variant);
     text-align: end;
     user-select: none;
     min-width: 1.5ch;
@@ -191,10 +191,10 @@
     content: " ";
   }
   & > pre > code [data-line-state="added"] {
-    background: var(--a-success-muted);
+    background: var(--md-sys-color-success-container);
   }
   & > pre > code [data-line-state="removed"] {
-    background: var(--a-danger-muted);
+    background: var(--md-sys-color-danger-container);
   }
 
   /* Footer — optional chrome band below the code block
@@ -285,8 +285,19 @@
 
      Selector discipline: `.cm-*` classes are CodeMirror's; `.tok-*`
      classes come from our `adiaHighlightStyle` (see core/_cm-theme.js).
-     CM's CSS-in-JS stylesheets load first + at lower specificity, so
-     these rules override without !important. */
+     TKT-0019 correction: this file is imported into `layer(components)`
+     (styles/index.css) — per the cascade-layer architecture, ANY
+     unlayered rule beats ANY layered rule regardless of specificity or
+     load order, and CM's runtime-injected `<style>` is unlayered by
+     construction (third-party DOM we don't control). Most `.cm-*`
+     overrides below don't collide with a CM default (color/font/etc.
+     are inherit/transparent in CM's own base styles), so they "just
+     work" without needing to fight this — but `.cm-content`'s padding
+     does collide (CM ships a non-zero default), and needed `!important`
+     to actually win; see that rule's own comment. This is the sanctioned
+     escape hatch for exactly this case (cascade-layer-architecture.md:
+     "!important … beat … third-party DOM injected outside our layers"),
+     not a specificity workaround. */
 
   & > [data-cm-mount] {
     display: block;
@@ -312,8 +323,20 @@
     padding: 0;
   }
 
+  /* padding: !important — TKT-0019. CM6 ships its own non-zero
+     `.cm-content` default padding (4px 0), injected as an unlayered
+     runtime `<style>` tag; this file lives in `layer(components)`, and
+     unlayered rules beat ANY layered rule regardless of specificity —
+     a plain `:scope .cm-content` selector (even a more specific one)
+     can never win here, only `!important` can (a layered `!important`
+     outranks an unlayered normal declaration). Confirmed empirically:
+     bumping selector specificity alone left the padding at CM's 4px 0
+     default. Kept as the sole padding source (code-editor.js's
+     `adiaBaseTheme` intentionally sets no padding — see its own
+     "structural only" comment) so `--code-py`/`--code-px` stays the one
+     token pair driving both the header and this content. */
   :scope .cm-content {
-    padding: var(--code-py) var(--code-px);
+    padding: var(--code-py) var(--code-px) !important;
     caret-color: var(--code-cursor);
   }
 

package/components/color-picker/color-picker.css

@@ -11,9 +11,9 @@
     --color-picker-thumb-shadow:     0 0 0 1px var(--a-chrome-ring-subtle), 0 2px 4px var(--a-chrome-shadow-soft);
     --color-picker-font:             var(--a-font-family-code);
     --color-picker-font-size:        var(--a-ui-sm);
-    --color-picker-fg:               var(--a-fg);
+    --color-picker-fg:               var(--md-sys-color-neutral-on-surface);
     --color-picker-label-fg:         var(--a-fg-muted);
-    --color-picker-border:           var(--a-border-subtle);
+    --color-picker-border:           var(--md-sys-color-neutral-outline-variant);
     --color-picker-output-bg:        var(--a-bg-muted);
     --color-picker-output-radius:    var(--a-radius-sm);
     --color-picker-fg-disabled:      var(--a-ui-text-disabled);
@@ -23,8 +23,8 @@
     --color-picker-pad-sm:           var(--a-space-2);
 
     /* ── Interactive ── */
-    --color-picker-focus-color:      var(--a-accent);
-    --color-picker-disabled-border:  var(--a-border-subtle);
+    --color-picker-focus-color:      var(--md-sys-color-primary);
+    --color-picker-disabled-border:  var(--md-sys-color-neutral-outline-variant);
 
     /* ── Transitions ── */
     --color-picker-duration:         var(--a-duration-fast);

package/components/combobox/combobox.css

@@ -31,7 +31,7 @@
     --combobox-easing:              var(--a-easing);
 
     /* ── Popover ── */
-    --combobox-popover-bg:          var(--a-canvas-bright);
+    --combobox-popover-bg:          var(--md-sys-color-neutral-surface-bright);
     --combobox-popover-border:      var(--a-ui-border);
     --combobox-popover-radius:      var(--a-radius);
     --combobox-popover-shadow:      var(--a-shadow-lg);
@@ -45,8 +45,8 @@
     --combobox-option-fg-selected:  var(--a-ui-text-selected);
 
     /* ── Match highlight ── */
-    --combobox-match-bg:            var(--a-accent-muted);
-    --combobox-match-fg:            var(--a-accent-strong);
+    --combobox-match-bg:            var(--md-sys-color-primary-container);
+    --combobox-match-fg:            var(--a-primary-strong);
 
     text-align: start;  /* §text-align-reset — block ancestor centering */
   }
@@ -194,7 +194,7 @@ combobox-ui [data-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);
   /* --combobox-list-max-block is set inline by #applyVisibleCap() when the
      rendered options exceed [max-visible-items] (default 10) — the menu hugs
@@ -259,8 +259,8 @@ combobox-ui [data-listbox] [role="option"] mark {
   /* Consume the :where(:scope) match tokens (custom props inherit through the
      DOM even though the popover paints in the top layer); raw-token fallbacks
      keep the highlight alive if the host tokens are unavailable. */
-  background: var(--combobox-match-bg, var(--a-accent-muted));
-  color: var(--combobox-match-fg, var(--a-accent-strong));
+  background: var(--combobox-match-bg, var(--md-sys-color-primary-container));
+  color: var(--combobox-match-fg, var(--a-primary-strong));
   padding: 0 0.1em;
   border-radius: var(--a-radius-sm);
 }

package/components/command/command.class.js

@@ -12,6 +12,7 @@
  */
 
 import { UIElement } from '../../core/element.js';
+import { logicalSlotted } from '../../core/logical-children.js';
 
 /**
  * <command-ui> — Searchable command palette.
@@ -56,6 +57,7 @@ export class UICommand extends UIElement {
   #footerEl = null;
   #bound = false;
   #itemByEl = new WeakMap();
+  #emptyNodes = [];
 
   static #RECENTS_MAX = 3;
 
@@ -83,8 +85,11 @@ export class UICommand extends UIElement {
   render() {
     // Stamp internal structure once
     if (!this.#inputEl) {
-      // Parse options from declarative children before replacing innerHTML
+      // Parse options + capture author-provided slot="empty" content
+      // before replacing innerHTML (dogfood-status yaml-drift finding:
+      // yaml documented an overridable empty state that was never wired).
       this.#parseOptions();
+      this.#emptyNodes = logicalSlotted(this, 'empty');
 
       this.innerHTML = `
         <header>
@@ -244,11 +249,17 @@ export class UICommand extends UIElement {
       }
     }
 
-    // Empty state
+    // Empty state — author-provided slot="empty" content wins over the
+    // default text (moves the same captured node references each time;
+    // safe since a node not currently attached is simply re-appended).
     if (!visibleCount) {
       const empty = document.createElement('div');
       empty.setAttribute('data-empty', '');
-      empty.textContent = 'No results found.';
+      if (this.#emptyNodes.length) {
+        empty.append(...this.#emptyNodes);
+      } else {
+        empty.textContent = 'No results found.';
+      }
       this.#listEl.appendChild(empty);
     }