@adia-ai/web-components 0.7.27 → 0.8.0

package/components/command/command.css

@@ -14,9 +14,9 @@
 
     /* ── Colors ── */
     --command-bg:                 var(--a-bg-subtle);
-    --command-fg:                 var(--a-fg);
+    --command-fg:                 var(--md-sys-color-neutral-on-surface);
     --command-fg-muted:           var(--a-fg-muted);
-    --command-border:             var(--a-border-subtle);
+    --command-border:             var(--md-sys-color-neutral-outline-variant);
 
     /* ── Elevation ── */
     --command-shadow:             var(--a-shadow-lg);
@@ -34,7 +34,7 @@
     --command-item-radius:        var(--a-radius-md);
     --command-item-px:            var(--a-space-2);
     --command-item-py:            var(--a-space-2);
-    --command-item-fg:            var(--a-fg-subtle);
+    --command-item-fg:            var(--md-sys-color-neutral-on-surface-variant);
     --command-item-fg-hover:      var(--a-fg-hover);
     --command-item-bg-hover:      var(--a-bg-hover);
     --command-item-fg-disabled:   var(--a-ui-text-disabled);
@@ -64,7 +64,7 @@
     --command-footer-py:          var(--command-py);
 
     /* ── Footer kbd ── */
-    --command-kbd-border:         var(--a-border-subtle);
+    --command-kbd-border:         var(--md-sys-color-neutral-outline-variant);
     --command-kbd-radius:         var(--a-radius-sm);
     --command-kbd-bg:             var(--a-bg-muted);
     --command-kbd-fg:             var(--a-fg-muted);

package/components/context-menu/context-menu.css

@@ -26,14 +26,14 @@
 [data-context-menu-surface] {
   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(--context-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);
   opacity: 1;
   translate: 0 0;
   transition: opacity var(--a-duration-fast) var(--a-easing-out),

package/components/date-range-picker/date-range-picker.a2ui.json

@@ -290,7 +290,7 @@
       },
       "--date-range-picker-preview-bg": {
         "description": "In-range preview background (between from and pending to).",
-        "default": "var(--a-accent-muted)"
+        "default": "var(--md-sys-color-primary-container)"
       },
       "--date-range-picker-px": {
         "description": "Horizontal popover padding.",
@@ -302,11 +302,11 @@
       },
       "--date-range-picker-selected-bg": {
         "description": "Selected day-cell background (cascaded into the inner calendar via --calendar-picker-day-bg-selected).",
-        "default": "var(--a-accent)"
+        "default": "var(--md-sys-color-primary)"
       },
       "--date-range-picker-selected-fg": {
         "description": "Selected day-cell foreground.",
-        "default": "var(--a-accent-fg)"
+        "default": "var(--md-sys-color-primary-on-primary)"
       }
     },
     "traits": [],

package/components/date-range-picker/date-range-picker.css

@@ -11,12 +11,12 @@
 @scope (date-range-picker-ui) {
   /* ── Block 1 — TOKENS ── */
   :where(:scope) {
-    --date-range-picker-bg:               var(--a-bg);
-    --date-range-picker-fg:               var(--a-fg);
+    --date-range-picker-bg:               var(--md-sys-color-neutral-background);
+    --date-range-picker-fg:               var(--md-sys-color-neutral-on-surface);
 
     /* Popover surface */
     --date-range-picker-popover-bg:       var(--a-bg-subtle);
-    --date-range-picker-popover-border:   var(--a-border-subtle);
+    --date-range-picker-popover-border:   var(--md-sys-color-neutral-outline-variant);
     --date-range-picker-popover-radius:   var(--a-radius-lg);
     --date-range-picker-popover-shadow:   var(--a-shadow-lg);
     --date-range-picker-popover-padding:  var(--a-space-3);
@@ -32,9 +32,9 @@
     --date-range-picker-preset-gap:       var(--a-space-1);
 
     /* Selected / preview day cells (cascade into calendar) */
-    --date-range-picker-selected-bg:      var(--a-accent);
-    --date-range-picker-selected-fg:      var(--a-accent-fg);
-    --date-range-picker-preview-bg:       var(--a-accent-muted);
+    --date-range-picker-selected-bg:      var(--md-sys-color-primary);
+    --date-range-picker-selected-fg:      var(--md-sys-color-primary-on-primary);
+    --date-range-picker-preview-bg:       var(--md-sys-color-primary-container);
 
     /* Trigger — mirrors the canonical trigger surface used by
        <select-ui> and <calendar-picker-ui> so consumers see a
@@ -162,7 +162,7 @@ date-range-picker-ui [slot="popover"] {
   border-radius: var(--date-range-picker-popover-radius);
   background: var(--date-range-picker-popover-bg);
   box-shadow: var(--date-range-picker-popover-shadow);
-  color: var(--a-fg);
+  color: var(--md-sys-color-neutral-on-surface);
   /* Anchor-positioning fallback — popover.css and anchor.js handle
      placement; layout here just sets the grid. */
   inset: auto;
@@ -251,5 +251,5 @@ date-range-picker-ui [slot="footer"] {
   justify-content: flex-end;
   gap: var(--a-space-2);
   padding-block-start: var(--a-space-2);
-  border-block-start: 1px solid var(--a-border-subtle);
+  border-block-start: 1px solid var(--md-sys-color-neutral-outline-variant);
 }

package/components/date-range-picker/date-range-picker.yaml

@@ -179,13 +179,13 @@ tokens:
     default: var(--a-bg-hover)
   --date-range-picker-selected-bg:
     description: Selected day-cell background (cascaded into the inner calendar via --calendar-picker-day-bg-selected).
-    default: var(--a-accent)
+    default: var(--md-sys-color-primary)
   --date-range-picker-selected-fg:
     description: Selected day-cell foreground.
-    default: var(--a-accent-fg)
+    default: var(--md-sys-color-primary-on-primary)
   --date-range-picker-preview-bg:
     description: In-range preview background (between from and pending to).
-    default: var(--a-accent-muted)
+    default: var(--md-sys-color-primary-container)
   --date-range-picker-px:
     description: Horizontal popover padding.
     default: var(--a-space-3)

package/components/datetime-picker/datetime-picker.css

@@ -11,19 +11,19 @@
 @scope (datetime-picker-ui) {
   /* ── Block 1 — TOKENS ── */
   :where(:scope) {
-    --datetime-picker-bg:                  var(--a-bg);
-    --datetime-picker-fg:                  var(--a-fg);
+    --datetime-picker-bg:                  var(--md-sys-color-neutral-background);
+    --datetime-picker-fg:                  var(--md-sys-color-neutral-on-surface);
 
     /* Popover surface */
     --datetime-picker-popover-bg:          var(--a-bg-subtle);
-    --datetime-picker-popover-border:      var(--a-border-subtle);
+    --datetime-picker-popover-border:      var(--md-sys-color-neutral-outline-variant);
     --datetime-picker-popover-radius:      var(--a-radius-lg);
     --datetime-picker-popover-shadow:      var(--a-shadow-lg);
     --datetime-picker-popover-padding:     var(--a-space-3);
     --datetime-picker-popover-gap:         var(--a-space-3);
 
     /* Pane divider */
-    --datetime-picker-divider:             var(--a-border-subtle);
+    --datetime-picker-divider:             var(--md-sys-color-neutral-outline-variant);
 
     /* Trigger */
     --datetime-picker-trigger-min-width:   16em;
@@ -107,7 +107,7 @@ datetime-picker-ui [slot="popover"] {
   border-radius: var(--datetime-picker-popover-radius);
   background: var(--datetime-picker-popover-bg);
   box-shadow: var(--datetime-picker-popover-shadow);
-  color: var(--a-fg);
+  color: var(--md-sys-color-neutral-on-surface);
   /* Anchor-positioning fallback — popover.css and anchor.js handle
      placement; layout here just sets the grid. */
   inset: auto;
@@ -160,7 +160,7 @@ datetime-picker-ui [slot="popover"] [slot="footer"] {
   justify-content: flex-end;
   gap: var(--a-space-2);
   padding-block-start: var(--a-space-2);
-  border-block-start: 1px solid var(--a-border-subtle);
+  border-block-start: 1px solid var(--md-sys-color-neutral-outline-variant);
 }
 
 /* Narrow surfaces (e.g. inside a card on mobile): stack the panes

package/components/demo-toggle/demo-toggle.css

@@ -9,9 +9,9 @@
 
     /* ── Colors ── */
     --demo-toggle-bg:            var(--a-canvas-1);
-    --demo-toggle-border:        var(--a-border);
+    --demo-toggle-border:        var(--md-sys-color-neutral-outline);
     --demo-toggle-bar-bg:        var(--a-bg-muted);
-    --demo-toggle-bar-fg:        var(--a-fg);
+    --demo-toggle-bar-fg:        var(--md-sys-color-neutral-on-surface);
 
     /* ── Typography ── */
     --demo-toggle-label-size:    var(--a-ui-size);
@@ -114,7 +114,7 @@
 
   /* State-themed bar — when on, lean accent; when off, leave neutral. */
   :scope[data-state="on"] {
-    --demo-toggle-bar-bg: var(--a-accent-muted);
-    --demo-toggle-bar-fg: var(--a-accent-strong);
+    --demo-toggle-bar-bg: var(--md-sys-color-primary-container);
+    --demo-toggle-bar-fg: var(--a-primary-strong);
   }
 }

package/components/description-list/description-list.css

@@ -13,7 +13,7 @@
 
     /* ── Colors ── */
     --description-list-term-fg:        var(--a-fg-muted);
-    --description-list-desc-fg:        var(--a-fg);
+    --description-list-desc-fg:        var(--md-sys-color-neutral-on-surface);
   }
 
   :scope {

package/components/display-field/display-field.css

@@ -4,10 +4,10 @@
        as a sibling of an editable field) */
     --display-field-gap:            var(--a-space-1);
     --display-field-icon-gap:       var(--a-space-2);
-    --display-field-label-color:    var(--a-fg);
+    --display-field-label-color:    var(--md-sys-color-neutral-on-surface);
     --display-field-label-size:     var(--a-ui-sm);
     --display-field-label-weight:   var(--a-weight-medium);
-    --display-field-value-color:    var(--a-fg);
+    --display-field-value-color:    var(--md-sys-color-neutral-on-surface);
     --display-field-value-size:     var(--a-ui-md);
     --display-field-value-weight:   var(--a-weight-regular);
     --display-field-hint-color:     var(--a-fg-muted);

package/components/divider/divider.css

@@ -5,7 +5,7 @@
 @scope (divider-ui) {
   :where(:scope) {
     /* ── Tokens ── */
-    --divider-color:    var(--a-border-subtle);
+    --divider-color:    var(--md-sys-color-neutral-outline-variant);
     --divider-size:     1px;
     --divider-spacing:  var(--a-space-3);
     --divider-label-font: var(--a-ui-sm);

package/components/drawer/drawer.css

@@ -30,14 +30,14 @@
   --drawer-easing:      var(--a-easing-out);
 
   /* ── Colors ── */
-  --drawer-bg:          var(--a-canvas-dimmer);
-  --drawer-border:      var(--a-border-subtle);
-  --drawer-divider:     var(--a-border-subtle);
+  --drawer-bg:          var(--md-sys-color-neutral-surface-dimmer);
+  --drawer-border:      var(--md-sys-color-neutral-outline-variant);
+  --drawer-divider:     var(--md-sys-color-neutral-outline-variant);
   --drawer-shadow:      var(--a-shadow-lg);
   --drawer-backdrop:    var(--a-scrim-dialog);
-  --drawer-fg:          var(--a-fg);
+  --drawer-fg:          var(--md-sys-color-neutral-on-surface);
   --drawer-heading-fg:  var(--a-fg-strong);
-  --drawer-description-fg: var(--a-fg-subtle);
+  --drawer-description-fg: var(--md-sys-color-neutral-on-surface-variant);
 
   /* ── Typography ── */
   --drawer-font-family:      var(--a-font-family);
@@ -201,7 +201,7 @@ drawer-ui [slot="panel"] > [slot="header"]:has(> [slot]) {
 }
 
 drawer-ui [slot="panel"] > [slot="header"][padding] {
-  background: var(--a-canvas-0-scrim);
+  background: var(--md-sys-color-neutral-scrim-weakest);
 }
 
 drawer-ui [slot="panel"] > [slot="header"][center] {
@@ -301,7 +301,7 @@ drawer-ui [slot="panel"] > [slot="body"] {
 drawer-ui [slot="panel"] > [slot="body"]:last-of-type { flex: 1 0 auto; }
 drawer-ui [slot="panel"] > [slot="body"] + [slot="body"] { padding-top: 0; }
 drawer-ui [slot="panel"] > [slot="body"][bleed]   { padding: 0; }
-drawer-ui [slot="panel"] > [slot="body"][padding] { background: var(--a-canvas-0-scrim); }
+drawer-ui [slot="panel"] > [slot="body"][padding] { background: var(--md-sys-color-neutral-scrim-weakest); }
 
 /* ═══════ Footer ═══════
    Block default — single non-slotted child (e.g. <grid-ui>, <col-ui>, raw

package/components/embed/embed.css

@@ -3,7 +3,7 @@
     /* ── Tokens ── */
     --embed-bg:      var(--a-bg-muted);
     --embed-radius:  var(--a-radius-md);
-    --embed-border:  var(--a-border-subtle);
+    --embed-border:  var(--md-sys-color-neutral-outline-variant);
   }
 
   :scope {

package/components/empty-state/empty-state.css

@@ -9,7 +9,7 @@
 
     /* ── Colors ── */
     --empty-state-icon-fg:        var(--a-fg-muted);
-    --empty-state-heading-fg:     var(--a-fg);
+    --empty-state-heading-fg:     var(--md-sys-color-neutral-on-surface);
     --empty-state-desc-fg:        var(--a-fg-muted);
 
     /* ── Typography ──
@@ -64,14 +64,14 @@
      Color the icon + text only; no background/border tint. */
   :scope[variant="danger"] {
     --empty-state-icon-fg:    var(--a-danger-strong);
-    --empty-state-heading-fg: var(--a-danger-text);
-    --empty-state-desc-fg:    var(--a-danger-text);
+    --empty-state-heading-fg: var(--md-sys-color-danger-on-surface);
+    --empty-state-desc-fg:    var(--md-sys-color-danger-on-surface);
   }
 
   :scope[variant="warning"] {
     --empty-state-icon-fg:    var(--a-warning-strong);
-    --empty-state-heading-fg: var(--a-warning-text);
-    --empty-state-desc-fg:    var(--a-warning-text);
+    --empty-state-heading-fg: var(--md-sys-color-warning-on-surface);
+    --empty-state-desc-fg:    var(--md-sys-color-warning-on-surface);
   }
 
   /* ── §223 (v0.5.9): [minimal] — single-line muted layout ──

package/components/feed/feed.css

@@ -99,9 +99,9 @@ feed-item-ui[data-closing] {
 /* Item — atomic feed entry. */
 @scope (feed-item-ui) {
   :where(:scope) {
-    --feed-item-bg:       var(--a-bg);
-    --feed-item-fg:       var(--a-fg);
-    --feed-item-border:   var(--a-border-subtle);
+    --feed-item-bg:       var(--md-sys-color-neutral-background);
+    --feed-item-fg:       var(--md-sys-color-neutral-on-surface);
+    --feed-item-border:   var(--md-sys-color-neutral-outline-variant);
     --feed-item-radius:   var(--a-radius-md);
     --feed-item-px:       var(--a-space-3);
     --feed-item-py:       var(--a-space-2-5);
@@ -117,10 +117,10 @@ feed-item-ui[data-closing] {
      NOT --a-{variant}-fg (= --a-{variant}-text-strong, locked for solid
      --variant-strong fills) — pairing a locked fg with a flipping bg goes
      low-contrast in one scheme. Mirrors alert.css + toast.css wiring. */
-  :scope[variant="info"]    { --feed-item-fg: var(--a-info-text);    --feed-item-bg: var(--a-info-muted); }
-  :scope[variant="success"] { --feed-item-fg: var(--a-success-text); --feed-item-bg: var(--a-success-muted); }
-  :scope[variant="warning"] { --feed-item-fg: var(--a-warning-text); --feed-item-bg: var(--a-warning-muted); }
-  :scope[variant="danger"]  { --feed-item-fg: var(--a-danger-text);  --feed-item-bg: var(--a-danger-muted); }
+  :scope[variant="info"]    { --feed-item-fg: var(--md-sys-color-info-on-surface);    --feed-item-bg: var(--md-sys-color-info-container); }
+  :scope[variant="success"] { --feed-item-fg: var(--md-sys-color-success-on-surface); --feed-item-bg: var(--md-sys-color-success-container); }
+  :scope[variant="warning"] { --feed-item-fg: var(--md-sys-color-warning-on-surface); --feed-item-bg: var(--md-sys-color-warning-container); }
+  :scope[variant="danger"]  { --feed-item-fg: var(--md-sys-color-danger-on-surface);  --feed-item-bg: var(--md-sys-color-danger-container); }
 
   :scope {
     box-sizing: border-box;

package/components/field/field.css

@@ -2,11 +2,11 @@
   :where(:scope) {
     /* ── Tokens ── */
     --field-gap:             var(--a-space-2);
-    --field-label-color:     var(--a-fg);
+    --field-label-color:     var(--md-sys-color-neutral-on-surface);
     --field-label-size:      var(--a-ui-sm);
     --field-label-weight:    var(--a-weight-medium);
     --field-required-color:  var(--a-danger-strong);
-    --field-trailing-color:  var(--a-fg-subtle);
+    --field-trailing-color:  var(--md-sys-color-neutral-on-surface-variant);
     --field-trailing-size:   var(--a-ui-sm);
     --field-hint-color:      var(--a-fg-muted);
     --field-hint-size:       var(--a-ui-sm);

package/components/heatmap/heatmap.css

@@ -9,20 +9,20 @@
 
     /* ── Colors ── */
     --heatmap-empty-bg:         var(--a-bg-muted);
-    --heatmap-border:           1px solid var(--a-border-subtle);
-    --heatmap-text:             var(--a-fg);
-    --heatmap-label:            var(--a-fg-subtle);
+    --heatmap-border:           1px solid var(--md-sys-color-neutral-outline-variant);
+    --heatmap-text:             var(--md-sys-color-neutral-on-surface);
+    --heatmap-label:            var(--md-sys-color-neutral-on-surface-variant);
 
     /* ── Data ramp (5 buckets) ──
        Sequential tint scale, sourced from the L2 `--a-{family}-bucket-N`
        semantic aliases (see styles/colors/semantics.css §BUCKETS). The
        L2 layer handles light-dark() polarity so step 0 reads as
        low-intensity in either scheme without per-component math. */
-    --heatmap-bucket-0:         var(--a-accent-bucket-0);
-    --heatmap-bucket-1:         var(--a-accent-bucket-1);
-    --heatmap-bucket-2:         var(--a-accent-bucket-2);
-    --heatmap-bucket-3:         var(--a-accent-bucket-3);
-    --heatmap-bucket-4:         var(--a-accent-bucket-4);
+    --heatmap-bucket-0:         var(--a-primary-bucket-0);
+    --heatmap-bucket-1:         var(--a-primary-bucket-1);
+    --heatmap-bucket-2:         var(--a-primary-bucket-2);
+    --heatmap-bucket-3:         var(--a-primary-bucket-3);
+    --heatmap-bucket-4:         var(--a-primary-bucket-4);
 
     /* ── Legend ── */
     --heatmap-legend-size:      var(--a-caption-size);

package/components/inline-edit/inline-edit.a2ui.json

@@ -134,7 +134,7 @@
       },
       "--inline-edit-outline": {
         "description": "Outline color in the editing state.",
-        "default": "var(--a-accent-strong)"
+        "default": "var(--a-primary-strong)"
       },
       "--inline-edit-placeholder": {
         "description": "Placeholder text color in empty-static state.",

package/components/inline-edit/inline-edit.css

@@ -1,9 +1,9 @@
 @scope (inline-edit-ui) {
   :where(:scope) {
     --inline-edit-bg-hover:    var(--a-bg-muted);
-    --inline-edit-bg-edit:     var(--a-bg);
-    --inline-edit-outline:     var(--a-accent-strong);
-    --inline-edit-placeholder: var(--a-fg-subtle);
+    --inline-edit-bg-edit:     var(--md-sys-color-neutral-background);
+    --inline-edit-outline:     var(--a-primary-strong);
+    --inline-edit-placeholder: var(--md-sys-color-neutral-on-surface-variant);
     --inline-edit-px:          var(--a-space-1);
     --inline-edit-py:          var(--a-space-0-5);
     --inline-edit-radius:      var(--a-radius-sm);

package/components/inline-edit/inline-edit.yaml

@@ -72,7 +72,7 @@ tokens:
     default: var(--a-bg)
   --inline-edit-outline:
     description: Outline color in the editing state.
-    default: var(--a-accent-strong)
+    default: var(--a-primary-strong)
   --inline-edit-placeholder:
     description: Placeholder text color in empty-static state.
     default: var(--a-fg-subtle)

package/components/inline-message/inline-message.css

@@ -58,18 +58,18 @@
      the variant's default in inline-message.class.js). No padding / display / layout
      changes — these are variants, not modes (per css-patterns.md). */
   :scope[variant="info"] {
-    --inline-message-fg: var(--a-info-text);
+    --inline-message-fg: var(--md-sys-color-info-on-surface);
   }
 
   :scope[variant="success"] {
-    --inline-message-fg: var(--a-success-text);
+    --inline-message-fg: var(--md-sys-color-success-on-surface);
   }
 
   :scope[variant="warning"] {
-    --inline-message-fg: var(--a-warning-text);
+    --inline-message-fg: var(--md-sys-color-warning-on-surface);
   }
 
   :scope[variant="danger"] {
-    --inline-message-fg: var(--a-danger-text);
+    --inline-message-fg: var(--md-sys-color-danger-on-surface);
   }
 }

package/components/input/input.css

@@ -343,7 +343,7 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
   [slot="field"] > [slot="leading"] button-ui:hover,
   [slot="field"] > [slot="trailing"] button-ui:hover {
     --button-bg: var(--a-ui-bg-hover);
-    --button-fg: var(--a-fg);
+    --button-fg: var(--md-sys-color-neutral-on-surface);
   }
 
   /* When a trailing affordance is present in number mode, reserve room

package/components/inspector/inspector.css

@@ -1,7 +1,7 @@
 @scope (inspector-ui) {
   :where(:scope) {
     --inspector-pane-font-size: var(--a-ui-tiny);
-    --inspector-border:         1px solid var(--a-border-subtle);
+    --inspector-border:         1px solid var(--md-sys-color-neutral-outline-variant);
     --inspector-radius:         var(--a-radius);
   }
 

package/components/integration-card/integration-card.css

@@ -1,8 +1,8 @@
 @scope (integration-card-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --integration-card-bg:              var(--a-bg);
-    --integration-card-border:          1px solid var(--a-border-subtle);
+    --integration-card-bg:              var(--md-sys-color-neutral-background);
+    --integration-card-border:          1px solid var(--md-sys-color-neutral-outline-variant);
     --integration-card-radius:          var(--a-radius-md);
     --integration-card-px:              var(--a-space-4);
     --integration-card-py:              var(--a-space-4);
@@ -22,7 +22,7 @@
     --integration-card-heading-weight:  var(--a-weight-medium);
     --integration-card-description-fg:  var(--a-fg-muted);
     --integration-card-description-size: var(--a-ui-sm);
-    --integration-card-error-fg:        var(--a-danger-text);
+    --integration-card-error-fg:        var(--md-sys-color-danger-on-surface);
     --integration-card-error-size:      var(--a-ui-sm);
 
     /* ── States ── */

package/components/kbd/kbd.a2ui.json

@@ -25,6 +25,10 @@
         "lg"
       ],
       "default": ""
+    },
+    "textContent": {
+      "description": "Key label text, extracted from innerHTML (e.g. \"Ctrl+K\"). The main payload field for Kbd components extracted from HTML — mirrors Text/Code's textContent prop.",
+      "$ref": "common_types.json#/$defs/DynamicString"
     }
   },
   "required": [

package/components/kbd/kbd.css

@@ -2,8 +2,8 @@
   :where(:scope) {
     /* ── Tokens ── */
     --kbd-bg:        var(--a-bg-muted);
-    --kbd-fg:        var(--a-fg);
-    --kbd-border:    var(--a-border-subtle);
+    --kbd-fg:        var(--md-sys-color-neutral-on-surface);
+    --kbd-border:    var(--md-sys-color-neutral-outline-variant);
     --kbd-radius:    var(--a-radius-sm);
     --kbd-font:      var(--a-font-family-code);
     --kbd-px:        var(--a-space-1);

package/components/kbd/kbd.d.ts

@@ -15,4 +15,6 @@ import { UIElement } from '../../core/element.js';
 export class UIKbd extends UIElement {
   /** Sizing scale: sm, md (default), lg. */
   size: 'sm' | 'md' | 'lg';
+  /** Key label text, extracted from innerHTML (e.g. "Ctrl+K"). The main payload field for Kbd components extracted from HTML — mirrors Text/Code's textContent prop. */
+  textContent: string;
 }

package/components/kbd/kbd.yaml

@@ -19,6 +19,11 @@ props:
     - md
     - lg
     reflect: true
+  textContent:
+    description: Key label text, extracted from innerHTML (e.g. "Ctrl+K"). The main payload field for Kbd components extracted from HTML — mirrors Text/Code's textContent prop.
+    type: string
+    default: ''
+    dynamic: true
 events: {}
 slots:
   default:

package/components/link/link.css

@@ -89,9 +89,9 @@
   /* ── Disabled ── */
 
   :scope[disabled] > a {
-    color: var(--a-fg-disabled);
+    color: var(--md-sys-color-neutral-on-surface-disabled);
     cursor: not-allowed;
-    text-decoration-color: var(--a-fg-disabled);
+    text-decoration-color: var(--md-sys-color-neutral-on-surface-disabled);
     pointer-events: none;
   }
 }

package/components/list/list.css

@@ -1,10 +1,10 @@
 @scope (list-ui) {
   :where(:scope) {
     /* ── Colors ── */
-    --list-divider-color: var(--a-border-subtle);
-    --list-bg-selected:   var(--a-accent-muted);
-    --list-fg-selected:   var(--a-accent-strong);
-    --list-border-selected: var(--a-accent-strong);
+    --list-divider-color: var(--md-sys-color-neutral-outline-variant);
+    --list-bg-selected:   var(--md-sys-color-primary-container);
+    --list-fg-selected:   var(--a-primary-strong);
+    --list-border-selected: var(--a-primary-strong);
   }
 
   :scope {
@@ -74,7 +74,7 @@
   }
 
   :scope[selectable] > [role="listitem"]:focus-visible {
-    outline: 2px solid var(--a-accent-strong);
+    outline: 2px solid var(--a-primary-strong);
     outline-offset: -2px;
   }
 
@@ -97,7 +97,7 @@
     --list-item-gap-row:    var(--a-space-1);
 
     /* ── Colors ── */
-    --list-item-text-color: var(--a-fg);
+    --list-item-text-color: var(--md-sys-color-neutral-on-surface);
     --list-item-desc-color: var(--a-fg-muted);
     --list-item-icon-color: var(--a-fg-muted);
 
@@ -199,13 +199,13 @@
      consistently. No border-radius on the row itself — dividers (when
      present) span full-width and rounded corners would clash. */
   :scope[data-active] {
-    background: var(--a-accent-muted);
-    color: var(--a-accent-strong);
-    box-shadow: inset 2px 0 0 var(--a-accent-strong);
+    background: var(--md-sys-color-primary-container);
+    color: var(--a-primary-strong);
+    box-shadow: inset 2px 0 0 var(--a-primary-strong);
   }
 
   :scope[data-active] [slot="icon"],
   :scope[data-active] [slot="description"] {
-    color: var(--a-accent-strong);
+    color: var(--a-primary-strong);
   }
 }

package/components/list-window/list-window.css

@@ -1,7 +1,7 @@
 @scope (list-window-ui) {
   /* ── Block 1 — TOKENS (zero-specificity, exposable for theming) ── */
   :where(:scope) {
-    --list-window-bg:              var(--a-bg);
+    --list-window-bg:              var(--md-sys-color-neutral-background);
     --list-window-row-gap:         var(--a-space-1);
     --list-window-overscan-bg:     transparent;
     --list-window-sentinel-size:   var(--a-space-2);
@@ -20,7 +20,7 @@
   }
 
   :scope:focus-visible {
-    outline: 2px solid var(--a-accent-strong);
+    outline: 2px solid var(--a-primary-strong);
     outline-offset: -2px;
   }