@adia-ai/web-components 0.6.32 → 0.6.34

package/components/timeline/timeline.css

@@ -2,7 +2,7 @@
    TIMELINE-N + TIMELINE-ITEM-N
 
    Grid-based layout with three columns:
-     [marker] var(--timeline-marker-w) [content] 1fr [aside] auto
+     [marker] var(--timeline-marker-w, var(--timeline-marker-w-default)) [content] 1fr [aside] auto
 
    Items are subgrid of the container, so their dots/labels/aside
    align perfectly to a single vertical axis regardless of size.
@@ -18,77 +18,77 @@
 @scope (timeline-ui) {
   :where(:scope) {
     /* Grid */
-    --timeline-marker-w:           1.25rem;
-    --timeline-gap-col:            var(--a-space-2);
-    --timeline-gap-row:            var(--a-space-3);
+    --timeline-marker-w-default:           1.25rem;
+    --timeline-gap-col-default:            var(--a-space-2);
+    --timeline-gap-row-default:            var(--a-space-3);
 
     /* Dot */
-    --timeline-dot-size:           0.625rem;
-    --timeline-dot-bg:             var(--a-border);
-    --timeline-dot-bg-active:      var(--a-accent-bg);
-    --timeline-dot-bg-done:        var(--a-success-bg);
-    --timeline-dot-bg-error:       var(--a-danger-bg);
-    --timeline-dot-bg-warning:     var(--a-warning-bg);
+    --timeline-dot-size-default:           0.625rem;
+    --timeline-dot-bg-default:             var(--a-border);
+    --timeline-dot-bg-active-default:      var(--a-accent-bg);
+    --timeline-dot-bg-done-default:        var(--a-success-bg);
+    --timeline-dot-bg-error-default:       var(--a-danger-bg);
+    --timeline-dot-bg-warning-default:     var(--a-warning-bg);
 
     /* Sub-dot (outcomes) */
-    --timeline-subdot-size:        4px;
-    --timeline-subdot-bg:          var(--a-fg-subtle);
+    --timeline-subdot-size-default:        4px;
+    --timeline-subdot-bg-default:          var(--a-fg-subtle);
 
     /* Connector line */
-    --timeline-line-size:          2px;
-    --timeline-line-fg:            var(--a-border-subtle);
-    --timeline-line-fg-done:       var(--a-border);
+    --timeline-line-size-default:          2px;
+    --timeline-line-fg-default:            var(--a-border-subtle);
+    --timeline-line-fg-done-default:       var(--a-border);
 
     /* Icon (replaces dot) */
-    --timeline-icon-size:          1rem;
-    --timeline-icon-bg:            var(--a-bg-muted);
-    --timeline-icon-fg:            var(--a-fg-subtle);
-    --timeline-icon-bg-success:    var(--a-success-muted);
-    --timeline-icon-fg-success:    var(--a-success-strong);
-    --timeline-icon-bg-accent:     var(--a-accent-muted);
-    --timeline-icon-fg-accent:     var(--a-accent);
-    --timeline-icon-bg-warning:    var(--a-warning-muted);
-    --timeline-icon-fg-warning:    var(--a-warning);
-    --timeline-icon-bg-danger:     var(--a-danger-muted);
-    --timeline-icon-fg-danger:     var(--a-danger-strong);
+    --timeline-icon-size-default:          1rem;
+    --timeline-icon-bg-default:            var(--a-bg-muted);
+    --timeline-icon-fg-default:            var(--a-fg-subtle);
+    --timeline-icon-bg-success-default:    var(--a-success-muted);
+    --timeline-icon-fg-success-default:    var(--a-success-strong);
+    --timeline-icon-bg-accent-default:     var(--a-accent-muted);
+    --timeline-icon-fg-accent-default:     var(--a-accent);
+    --timeline-icon-bg-warning-default:    var(--a-warning-muted);
+    --timeline-icon-fg-warning-default:    var(--a-warning);
+    --timeline-icon-bg-danger-default:     var(--a-danger-muted);
+    --timeline-icon-fg-danger-default:     var(--a-danger-strong);
 
     /* Typography */
-    --timeline-label-weight:       var(--a-weight-medium);
-    --timeline-label-size:         var(--a-ui-size);
-    --timeline-label-fg:           var(--a-fg);
-    --timeline-label-fg-muted:     var(--a-fg-muted);
-    --timeline-desc-fg:            var(--a-fg-subtle);
-    --timeline-desc-size:          var(--a-ui-sm);
-    --timeline-time-fg:            var(--a-fg-muted);
-    --timeline-time-size:          var(--a-ui-sm);
-    --timeline-outcome-fg:         var(--a-fg-muted);
+    --timeline-label-weight-default:       var(--a-weight-medium);
+    --timeline-label-size-default:         var(--a-ui-size);
+    --timeline-label-fg-default:           var(--a-fg);
+    --timeline-label-fg-muted-default:     var(--a-fg-muted);
+    --timeline-desc-fg-default:            var(--a-fg-subtle);
+    --timeline-desc-size-default:          var(--a-ui-sm);
+    --timeline-time-fg-default:            var(--a-fg-muted);
+    --timeline-time-size-default:          var(--a-ui-sm);
+    --timeline-outcome-fg-default:         var(--a-fg-muted);
 
     /* Motion */
-    --timeline-duration:           var(--a-duration-fast);
-    --timeline-easing:             var(--a-easing-out);
-    --timeline-spin-duration:      0.8s;
-    --timeline-pulse-duration:     2s;
+    --timeline-duration-default:           var(--a-duration-fast);
+    --timeline-easing-default:             var(--a-easing-out);
+    --timeline-spin-duration-default:      0.8s;
+    --timeline-pulse-duration-default:     2s;
   }
 
   :scope {
     box-sizing: border-box;
     display: grid;
     grid-template-columns:
-      [marker] var(--timeline-marker-w)
+      [marker] var(--timeline-marker-w, var(--timeline-marker-w-default))
       [content] 1fr
       [aside] auto;
-    column-gap: var(--timeline-gap-col);
-    row-gap: var(--timeline-gap-row);
+    column-gap: var(--timeline-gap-col, var(--timeline-gap-col-default));
+    row-gap: var(--timeline-gap-row, var(--timeline-gap-row-default));
     min-width: 0;
   }
 
   /* Compact variant (agent-reasoning + chat-adjacent) */
   :scope[size="sm"] {
-    --timeline-marker-w: 1rem;
-    --timeline-dot-size: 6px;
-    --timeline-gap-row: var(--a-space-2);
-    --timeline-label-size: var(--a-ui-sm);
-    --timeline-label-weight: var(--a-weight-normal);
+    --timeline-marker-w-default: 1rem;
+    --timeline-dot-size-default: 6px;
+    --timeline-gap-row-default: var(--a-space-2);
+    --timeline-label-size-default: var(--a-ui-sm);
+    --timeline-label-weight-default: var(--a-weight-normal);
   }
 
   /* Horizontal layout — fall back to flow layout; drops subgrid.
@@ -396,7 +396,7 @@ timeline-ui[orientation="horizontal"] > timeline-item-ui {
   flex-direction: column;
   flex: 1 1 0;
   min-width: 0;
-  padding-top: calc(var(--timeline-dot-size) + var(--timeline-gap-col));
+  padding-top: calc(var(--timeline-dot-size, var(--timeline-dot-size-default)) + var(--timeline-gap-col, var(--timeline-gap-col-default)));
   text-align: center;
   position: relative;
 }
@@ -409,11 +409,11 @@ timeline-ui[orientation="horizontal"] > timeline-item-ui::before {
 
 timeline-ui[orientation="horizontal"] > timeline-item-ui::after {
   left: 50%;
-  top: calc(var(--timeline-dot-size) / 2 - var(--timeline-line-size) / 2);
+  top: calc(var(--timeline-dot-size, var(--timeline-dot-size-default)) / 2 - var(--timeline-line-size, var(--timeline-line-size-default)) / 2);
   right: -50%;
   bottom: auto;
   width: 100%;
-  height: var(--timeline-line-size);
+  height: var(--timeline-line-size, var(--timeline-line-size-default));
 }
 
 timeline-ui[orientation="horizontal"] > timeline-item-ui > [slot="label"],

package/components/toast/toast.css

@@ -7,14 +7,14 @@
    attribute toggling inside `@scope`. Selectors moved out as plain
    `toast-ui[data-…]` rules. See docs/BROWSER-COMPAT.md §3a. */
 toast-ui[data-open] {
-  transition: transform var(--toast-duration) var(--toast-easing),
-              opacity var(--toast-duration) var(--toast-easing);
+  transition: transform var(--toast-duration, var(--toast-duration-default)) var(--toast-easing, var(--toast-easing-default)),
+              opacity var(--toast-duration, var(--toast-duration-default)) var(--toast-easing, var(--toast-easing-default));
   transform: translateY(0);
   opacity: 1;
 }
 toast-ui[data-closing] {
-  transition: transform var(--toast-duration) var(--toast-easing),
-              opacity var(--toast-duration) var(--toast-easing);
+  transition: transform var(--toast-duration, var(--toast-duration-default)) var(--toast-easing, var(--toast-easing-default)),
+              opacity var(--toast-duration, var(--toast-duration-default)) var(--toast-easing, var(--toast-easing-default));
   opacity: 0;
 }
 toast-ui[data-closing],
@@ -29,30 +29,30 @@ toast-ui[data-closing][position="top-left"] {
 
 @scope (toast-ui) {
   :where(:scope) {
-    --toast-bg:       var(--a-bg-subtle);
-    --toast-fg:       var(--a-fg);
-    --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-max-width: 24rem;
-    --toast-gap:      var(--a-space-3);
+    --toast-bg-default:       var(--a-bg-subtle);
+    --toast-fg-default:       var(--a-fg);
+    --toast-radius-default:   var(--a-radius-md);
+    --toast-shadow-default:   var(--a-shadow-lg);
+    --toast-duration-default: var(--a-duration);
+    --toast-easing-default:   var(--a-easing-out);
+    --toast-pad-x-default:    var(--a-space-4);
+    --toast-pad-y-default:    var(--a-space-3);
+    --toast-border-default:   var(--a-border-subtle);
+    --toast-max-width-default: 24rem;
+    --toast-gap-default:      var(--a-space-3);
 
     /* ── Typography ── */
-    --toast-font:     var(--a-font-family);
-    --toast-size:     var(--a-ui-md);
+    --toast-font-default:     var(--a-font-family);
+    --toast-size-default:     var(--a-ui-md);
 
     /* ── Position offset ── */
-    --toast-offset:   var(--a-space-4);
+    --toast-offset-default:   var(--a-space-4);
 
     /* ── Close button ── */
-    --toast-close-duration: var(--a-duration-fast);
-    --toast-close-easing:   var(--a-easing);
-    --toast-focus-ring:     var(--a-focus-ring);
-    --toast-focus-radius:   var(--a-radius-sm);
+    --toast-close-duration-default: var(--a-duration-fast);
+    --toast-close-easing-default:   var(--a-easing);
+    --toast-focus-ring-default:     var(--a-focus-ring);
+    --toast-focus-radius-default:   var(--a-radius-sm);
   }
 
   :scope {
@@ -61,16 +61,16 @@ toast-ui[data-closing][position="top-left"] {
     z-index: 9999;
     display: flex;
     align-items: center;
-    gap: var(--toast-gap);
-    max-width: var(--toast-max-width);
-    padding: var(--toast-pad-y) var(--toast-pad-x);
-    background: var(--toast-bg);
-    color: var(--toast-fg);
-    font-family: var(--toast-font);
-    font-size: var(--toast-size);
-    border: 1px solid var(--toast-border);
-    border-radius: var(--toast-radius);
-    box-shadow: var(--toast-shadow);
+    gap: var(--toast-gap, var(--toast-gap-default));
+    max-width: var(--toast-max-width, var(--toast-max-width-default));
+    padding: var(--toast-pad-y, var(--toast-pad-y-default)) var(--toast-pad-x, var(--toast-pad-x-default));
+    background: var(--toast-bg, var(--toast-bg-default));
+    color: var(--toast-fg, var(--toast-fg-default));
+    font-family: var(--toast-font, var(--toast-font-default));
+    font-size: var(--toast-size, var(--toast-size-default));
+    border: 1px solid var(--toast-border, var(--toast-border-default));
+    border-radius: var(--toast-radius, var(--toast-radius-default));
+    box-shadow: var(--toast-shadow, var(--toast-shadow-default));
     opacity: 0;
     pointer-events: auto;
   }
@@ -79,25 +79,25 @@ toast-ui[data-closing][position="top-left"] {
 
   :where(:scope),
   :where(:scope[position="bottom-right"]) {
-    bottom: var(--toast-offset);
-    right: var(--toast-offset);
+    bottom: var(--toast-offset, var(--toast-offset-default));
+    right: var(--toast-offset, var(--toast-offset-default));
     transform: translateY(1rem);
   }
   :where(:scope[position="bottom-left"]) {
-    bottom: var(--toast-offset);
-    left: var(--toast-offset);
+    bottom: var(--toast-offset, var(--toast-offset-default));
+    left: var(--toast-offset, var(--toast-offset-default));
     right: auto;
     transform: translateY(1rem);
   }
   :where(:scope[position="top-right"]) {
-    top: var(--toast-offset);
-    right: var(--toast-offset);
+    top: var(--toast-offset, var(--toast-offset-default));
+    right: var(--toast-offset, var(--toast-offset-default));
     bottom: auto;
     transform: translateY(-1rem);
   }
   :where(:scope[position="top-left"]) {
-    top: var(--toast-offset);
-    left: var(--toast-offset);
+    top: var(--toast-offset, var(--toast-offset-default));
+    left: var(--toast-offset, var(--toast-offset-default));
     right: auto;
     bottom: auto;
     transform: translateY(-1rem);
@@ -116,24 +116,24 @@ 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-default:     var(--a-info-muted);
+    --toast-fg-default:     var(--a-info-text);
+    --toast-border-default: var(--a-info-border-subtle);
   }
   :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-default:     var(--a-success-muted);
+    --toast-fg-default:     var(--a-success-text);
+    --toast-border-default: var(--a-success-border-subtle);
   }
   :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-default:     var(--a-warning-muted);
+    --toast-fg-default:     var(--a-warning-text);
+    --toast-border-default: var(--a-warning-border-subtle);
   }
   :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-default:     var(--a-danger-muted);
+    --toast-fg-default:     var(--a-danger-text);
+    --toast-border-default: var(--a-danger-border-subtle);
   }
 
   /* `primary` is the accent-filled variant — solid bg + on-accent text
@@ -143,9 +143,9 @@ toast-ui[data-closing][position="top-left"] {
      primary; border picks up `--a-accent-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-bg-default:     var(--a-primary-bg);
+    --toast-fg-default:     var(--a-primary-fg);
+    --toast-border-default: var(--a-accent-border-subtle);
   }
 
   /* `muted` and `neutral` are semantic aliases of the base canvas
@@ -155,9 +155,9 @@ toast-ui[data-closing][position="top-left"] {
      saved" without success-green). Mirrors alert-ui's pattern. */
   :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-bg-default:     var(--a-bg-subtle);
+    --toast-fg-default:     var(--a-fg);
+    --toast-border-default: var(--a-border-subtle);
   }
 
   /* ── Message slot ── */

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

@@ -10,18 +10,18 @@ toggle-option-ui:not([disabled]):hover {
 @scope (toggle-group-ui) {
   :where(:scope) {
     /* ── Tokens ── */
-    --toggle-group-border-width: 1px;
-    --toggle-group-border-color: var(--a-ui-border);
-    --toggle-group-radius:       var(--a-radius);
-    --toggle-group-height:       var(--a-size);
+    --toggle-group-border-width-default: 1px;
+    --toggle-group-border-color-default: var(--a-ui-border);
+    --toggle-group-radius-default:       var(--a-radius);
+    --toggle-group-height-default:       var(--a-size);
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
 }
 
   :scope {
     box-sizing: border-box;
     display: inline-flex;
-    border: var(--toggle-group-border-width) solid var(--toggle-group-border-color);
-    border-radius: var(--toggle-group-radius);
+    border: var(--toggle-group-border-width, var(--toggle-group-border-width-default)) solid var(--toggle-group-border-color, var(--toggle-group-border-color-default));
+    border-radius: var(--toggle-group-radius, var(--toggle-group-radius-default));
     overflow: hidden;
   }
 }

package/components/toggle-scheme/toggle-scheme.css

@@ -1,6 +1,6 @@
 @scope (toggle-scheme-ui) {
   :where(:scope) {
-    --toggle-scheme-icon-transition: var(--a-duration-fast) var(--a-easing);
+    --toggle-scheme-icon-transition-default: var(--a-duration-fast) var(--a-easing);
   }
 
   :scope {
@@ -15,6 +15,6 @@
   }
 
   :scope > [part="button"] {
-    transition: color var(--toggle-scheme-icon-transition);
+    transition: color var(--toggle-scheme-icon-transition, var(--toggle-scheme-icon-transition-default));
   }
 }

package/components/toolbar/toolbar.css

@@ -1,15 +1,15 @@
 @scope (toolbar-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --toolbar-gap:    var(--a-space-1);
-    --toolbar-radius: var(--a-radius-md);
-    --toolbar-px:     var(--a-space-1);
-    --toolbar-py:     var(--a-space-1);
+    --toolbar-gap-default:    var(--a-space-1);
+    --toolbar-radius-default: var(--a-radius-md);
+    --toolbar-px-default:     var(--a-space-1);
+    --toolbar-py-default:     var(--a-space-1);
 
     /* ── Colors ── */
-    --toolbar-bg:     transparent;
-    --toolbar-fg:     var(--a-fg);
-    --toolbar-border: var(--a-border-subtle);
+    --toolbar-bg-default:     transparent;
+    --toolbar-fg-default:     var(--a-fg);
+    --toolbar-border-default: var(--a-border-subtle);
   }
 
   /* ── Base ── */
@@ -18,10 +18,10 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: var(--toolbar-gap);
-    padding: var(--toolbar-py) var(--toolbar-px);
-    border-radius: var(--toolbar-radius);
-    color: var(--toolbar-fg);
+    gap: var(--toolbar-gap, var(--toolbar-gap-default));
+    padding: var(--toolbar-py, var(--toolbar-py-default)) var(--toolbar-px, var(--toolbar-px-default));
+    border-radius: var(--toolbar-radius, var(--toolbar-radius-default));
+    color: var(--toolbar-fg, var(--toolbar-fg-default));
     min-width: 0;        /* allow shrinking within flex/grid parents */
     overflow: hidden;    /* prevent pre-measurement flash before reflow */
   }
@@ -34,14 +34,14 @@
 
   /* ── Bordered ── */
   :scope[bordered] {
-    border: 1px solid var(--toolbar-border);
-    background: var(--toolbar-bg);
+    border: 1px solid var(--toolbar-border, var(--toolbar-border-default));
+    background: var(--toolbar-bg, var(--toolbar-bg-default));
   }
 
   /* ── Gap variants ── */
-  :scope[gap="sm"] { --toolbar-gap: var(--a-space-1); }
-  :scope[gap="md"] { --toolbar-gap: var(--a-space-2); }
-  :scope[gap="lg"] { --toolbar-gap: var(--a-space-3); }
+  :scope[gap="sm"] { --toolbar-gap-default: var(--a-space-1); }
+  :scope[gap="md"] { --toolbar-gap-default: var(--a-space-2); }
+  :scope[gap="lg"] { --toolbar-gap-default: var(--a-space-3); }
 
   /* ── Align ── */
   :scope[align="start"]         { justify-content: flex-start; }
@@ -104,7 +104,7 @@ toolbar-ui [data-toolbar-spillover-menu]:popover-open {
   min-width: 10rem;
   font-family: inherit;
   font-size: var(--a-ui-size);
-  color: var(--toolbar-fg);
+  color: var(--toolbar-fg, var(--toolbar-fg-default));
   /* Stack overflow items as rows (each row can be a group with its own gap). */
   display: flex;
   flex-direction: column;

package/components/tooltip/tooltip.css

@@ -3,12 +3,12 @@
     /* Host (anchor) tokens. The popover itself escapes to top-layer and
        cannot inherit these — top-layer rules below reference --a-*
        directly per documented exception. */
-    --tooltip-host-display: inline-flex;
+    --tooltip-host-display-default: inline-flex;
   }
   :scope {
     /* ── Base ── */
     box-sizing: border-box;
-    display: var(--tooltip-host-display);
+    display: var(--tooltip-host-display, var(--tooltip-host-display-default));
     position: relative;
   }
 }

package/components/tree/tree.css

@@ -1,30 +1,30 @@
 @scope (tree-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --tree-row-height:      var(--a-size);
-    --tree-row-radius:      var(--a-radius-sm);
-    --tree-row-px:          var(--a-space-1);
-    --tree-row-gap:         var(--a-space-1);
-    --tree-actions-gap:     var(--a-space-0-5);
-    --tree-indent:          var(--a-space-4);
-    --tree-chevron-size:    var(--a-space-2);
-    --tree-icon-size:       var(--a-space-3);
+    --tree-row-height-default:      var(--a-size);
+    --tree-row-radius-default:      var(--a-radius-sm);
+    --tree-row-px-default:          var(--a-space-1);
+    --tree-row-gap-default:         var(--a-space-1);
+    --tree-actions-gap-default:     var(--a-space-0-5);
+    --tree-indent-default:          var(--a-space-4);
+    --tree-chevron-size-default:    var(--a-space-2);
+    --tree-icon-size-default:       var(--a-space-3);
 
     /* ── Typography ── */
-    --tree-font-size:       var(--a-ui-size);
+    --tree-font-size-default:       var(--a-ui-size);
 
     /* ── Colors ── */
-    --tree-fg:              var(--a-fg);
-    --tree-fg-muted:        var(--a-fg-muted);
-    --tree-bg-hover:        var(--a-bg-muted);
-    --tree-bg-selected:     var(--a-bg-hover);
+    --tree-fg-default:              var(--a-fg);
+    --tree-fg-muted-default:        var(--a-fg-muted);
+    --tree-bg-hover-default:        var(--a-bg-muted);
+    --tree-bg-selected-default:     var(--a-bg-hover);
 
     /* ── Transition ── */
-    --tree-duration:        var(--a-duration-fast);
-    --tree-easing:          var(--a-easing);
+    --tree-duration-default:        var(--a-duration-fast);
+    --tree-easing-default:          var(--a-easing);
 
     /* ── State ── */
-    --tree-focus-ring:      var(--a-focus-ring);
+    --tree-focus-ring-default:      var(--a-focus-ring);
   }
 
   :scope {
@@ -32,8 +32,8 @@
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    font-size: var(--tree-font-size);
-    color: var(--tree-fg);
+    font-size: var(--tree-font-size, var(--tree-font-size-default));
+    color: var(--tree-fg, var(--tree-fg-default));
   }
 }
 
@@ -69,35 +69,35 @@
   [slot="row"] {
     display: flex;
     align-items: center;
-    gap: var(--tree-row-gap);
-    height: var(--tree-row-height);
-    padding-inline-end: var(--tree-row-px);
-    border-radius: var(--tree-row-radius);
+    gap: var(--tree-row-gap, var(--tree-row-gap-default));
+    height: var(--tree-row-height, var(--tree-row-height-default));
+    padding-inline-end: var(--tree-row-px, var(--tree-row-px-default));
+    border-radius: var(--tree-row-radius, var(--tree-row-radius-default));
     cursor: pointer;
     user-select: none;
     white-space: nowrap;
     transition:
-      background var(--tree-duration) var(--tree-easing),
-      color var(--tree-duration) var(--tree-easing);
+      background var(--tree-duration, var(--tree-duration-default)) var(--tree-easing, var(--tree-easing-default)),
+      color var(--tree-duration, var(--tree-duration-default)) var(--tree-easing, var(--tree-easing-default));
     outline: none;
   }
 
   [slot="row"]:hover {
-    background: var(--tree-bg-hover);
+    background: var(--tree-bg-hover, var(--tree-bg-hover-default));
   }
 
   [slot="row"]:focus-visible {
-    box-shadow: var(--tree-focus-ring);
+    box-shadow: var(--tree-focus-ring, var(--tree-focus-ring-default));
   }
 
   /* :scope[selected] rules moved outside @scope — see tree-ui Safari note at end of file. */
 
   /* ── Chevron ── */
   [slot="chevron"] {
-    --a-icon-size: var(--tree-chevron-size);
+    --a-icon-size: var(--tree-chevron-size, var(--tree-chevron-size-default));
     flex-shrink: 0;
-    color: var(--tree-fg-muted);
-    transition: transform var(--tree-duration) var(--tree-easing);
+    color: var(--tree-fg-muted, var(--tree-fg-muted-default));
+    transition: transform var(--tree-duration, var(--tree-duration-default)) var(--tree-easing, var(--tree-easing-default));
     transform: rotate(90deg);
   }
 
@@ -112,8 +112,8 @@
 
   /* ── Icon ── */
   [slot="icon"] {
-    --a-icon-size: var(--tree-icon-size);
-    color: var(--tree-fg-muted);
+    --a-icon-size: var(--tree-icon-size, var(--tree-icon-size-default));
+    color: var(--tree-fg-muted, var(--tree-fg-muted-default));
     flex-shrink: 0;
   }
 
@@ -134,7 +134,7 @@
   [slot="badge"] {
     flex-shrink: 0;
     font-size: var(--tree-badge-size, var(--a-ui-xs));
-    color: var(--tree-badge-fg, var(--tree-fg-muted));
+    color: var(--tree-badge-fg, var(--tree-fg-muted, var(--tree-fg-muted-default)));
     background: var(--tree-badge-bg, transparent);
     padding: 0 var(--tree-badge-px, var(--a-space-1));
     border-radius: var(--tree-badge-radius, var(--a-radius-sm));
@@ -149,10 +149,10 @@
   [slot="actions"] {
     display: flex;
     align-items: center;
-    gap: var(--tree-actions-gap);
+    gap: var(--tree-actions-gap, var(--tree-actions-gap-default));
     margin-inline-start: auto;
     opacity: 0;
-    transition: opacity var(--tree-duration) var(--tree-easing);
+    transition: opacity var(--tree-duration, var(--tree-duration-default)) var(--tree-easing, var(--tree-easing-default));
   }
 
   [slot="row"]:hover [slot="actions"] {
@@ -173,11 +173,11 @@
    `:where(:scope)` still resolve via inheritance. See
    docs/BROWSER-COMPAT.md §3a. */
 tree-ui[selected] > [slot="row"] {
-  background: var(--tree-bg-selected);
-  color: var(--tree-fg);
+  background: var(--tree-bg-selected, var(--tree-bg-selected-default));
+  color: var(--tree-fg, var(--tree-fg-default));
 }
 tree-ui[selected] > [slot="row"] [slot="icon"] {
-  color: var(--tree-fg);
+  color: var(--tree-fg, var(--tree-fg-default));
 }
 tree-ui[selected] > [slot="row"] [slot="actions"] {
   opacity: 1;