@adia-ai/web-components 0.7.27 → 0.8.0

package/components/toast/toast.css

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

package/components/toc/toc.a2ui.json

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

package/components/toc/toc.css

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

package/components/toc/toc.yaml

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

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

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

package/components/toolbar/toolbar.css

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

package/components/tooltip/tooltip.css

@@ -26,8 +26,8 @@
   box-sizing: border-box;
   margin: 0;
   padding: var(--a-space-1) var(--a-space-2);
-  background: var(--a-fg);
-  color: var(--a-bg);
+  background: var(--md-sys-color-neutral-on-surface);
+  color: var(--md-sys-color-neutral-background);
   font-family: var(--a-font-family);
   font-size: var(--a-ui-sm);
   line-height: 1.4;
@@ -69,8 +69,8 @@
   max-width: 18rem;
   padding: var(--a-space-2) var(--a-space-3);
   background: var(--a-canvas-0);
-  color: var(--a-fg);
-  border: 1px solid var(--a-border-subtle);
+  color: var(--md-sys-color-neutral-on-surface);
+  border: 1px solid var(--md-sys-color-neutral-outline-variant);
   border-radius: var(--a-radius-md);
   box-shadow: var(--a-shadow-md);
   font-size: var(--a-ui-tiny);
@@ -94,12 +94,12 @@
 }
 
 .tooltip-popup[data-follows="pointer"] [data-tip-role="label"] {
-  color: var(--a-fg-subtle);
+  color: var(--md-sys-color-neutral-on-surface-variant);
   font-weight: var(--tooltip-label-weight);
 }
 
 .tooltip-popup[data-follows="pointer"] [data-tip-role="series"] {
-  color: var(--a-fg-subtle);
+  color: var(--md-sys-color-neutral-on-surface-variant);
   font-size: calc(var(--a-ui-tiny) * 0.95);
 }
 
@@ -120,17 +120,17 @@
 }
 
 .tooltip-popup[data-follows="pointer"] [data-tip-role="name"] {
-  color: var(--a-fg-subtle);
+  color: var(--md-sys-color-neutral-on-surface-variant);
   font-weight: var(--a-weight-normal);
 }
 
 .tooltip-popup[data-follows="pointer"] [data-tip-role="value"] {
   font-weight: var(--tooltip-value-weight);
-  color: var(--a-fg);
+  color: var(--md-sys-color-neutral-on-surface);
 }
 
 .tooltip-popup[data-follows="pointer"] [data-tip-role="pct"] {
-  color: var(--a-fg-subtle);
+  color: var(--md-sys-color-neutral-on-surface-variant);
   font-weight: var(--a-weight-normal);
 }
 

package/components/tour/tour.css

@@ -61,7 +61,7 @@
 [data-tour-popover] {
   margin: 0;
   padding: var(--a-space-4);
-  border: 1px solid var(--tour-popover-border, var(--a-border-subtle));
+  border: 1px solid var(--tour-popover-border, var(--md-sys-color-neutral-outline-variant));
   border-radius: var(--tour-popover-radius, var(--a-radius-lg));
   background: var(--tour-popover-bg, var(--a-bg-subtle));
   box-shadow: var(--tour-popover-shadow, var(--a-shadow-lg));
@@ -69,7 +69,7 @@
   max-width: var(--tour-popover-max-width, 22rem);
   font-family: var(--tour-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);
   /* Above the spotlight (1000) so the user can read + click it */
   z-index: 1001;
   opacity: 1;
@@ -118,7 +118,7 @@
 [data-tour-popover] [data-tour-body] {
   margin: 0 0 var(--a-space-4);
   font-size: var(--a-ui-size);
-  color: var(--a-fg);
+  color: var(--md-sys-color-neutral-on-surface);
   line-height: 1.5;
 }
 

package/components/tree/tree.css

@@ -14,7 +14,7 @@
     --tree-font-size:       var(--a-ui-size);
 
     /* ── Colors ── */
-    --tree-fg:              var(--a-fg);
+    --tree-fg:              var(--md-sys-color-neutral-on-surface);
     --tree-fg-muted:        var(--a-fg-muted);
     --tree-bg-hover:        var(--a-bg-muted);
     --tree-bg-selected:     var(--a-bg-hover);
@@ -50,7 +50,7 @@
     --tree-item-caret-size:    var(--tree-caret-size, var(--a-space-2));
     --tree-item-icon-size:     var(--tree-icon-size, var(--a-space-3));
 
-    --tree-item-fg:            var(--tree-fg, var(--a-fg));
+    --tree-item-fg:            var(--tree-fg, var(--md-sys-color-neutral-on-surface));
     --tree-item-fg-muted:      var(--tree-fg-muted, var(--a-fg-muted));
     --tree-item-bg-hover:      var(--tree-bg-hover, var(--a-bg-muted));
     --tree-item-bg-selected:   var(--tree-bg-selected, var(--a-bg-hover));

package/components/upload/upload.css

@@ -4,13 +4,13 @@
     --upload-gap:              var(--a-space-2);
     --upload-radius:           var(--a-radius-md);
     --upload-font:             var(--a-ui-size);
-    --upload-border:           var(--a-border-subtle);
-    --upload-border-hover:     var(--a-accent);
-    --upload-border-dragover:  var(--a-accent-bg);
-    --upload-bg-dragover:      var(--a-accent-muted);
-    --upload-fg:               var(--a-fg-subtle);
-    --upload-fg-hover:         var(--a-accent);
-    --upload-label-fg:         var(--a-fg);
+    --upload-border:           var(--md-sys-color-neutral-outline-variant);
+    --upload-border-hover:     var(--md-sys-color-primary);
+    --upload-border-dragover:  var(--a-primary-bg);
+    --upload-bg-dragover:      var(--md-sys-color-primary-container);
+    --upload-fg:               var(--md-sys-color-neutral-on-surface-variant);
+    --upload-fg-hover:         var(--md-sys-color-primary);
+    --upload-label-fg:         var(--md-sys-color-neutral-on-surface);
     --upload-label-weight:     var(--a-weight-medium);
     --upload-label-size:       var(--a-label-size);
     --upload-hint-fg:          var(--a-fg-muted);

package/core/markdown.js

@@ -91,7 +91,7 @@ export function renderMarkdown(src) {
 const CODE_PH = (n) => `\0CODE${n}\0`;
 const CODE_PH_RE = /\0CODE(\d+)\0/g;
 
-function inline(text) {
+export function inline(text) {
   const escaped = esc(text);
 
   // 1. Extract inline-code spans FIRST and protect their (already-escaped,