@adia-ai/web-components 0.7.3 → 0.7.5

package/components/time-picker/time-picker.css

@@ -1,30 +1,30 @@
 @scope (time-picker-ui) {
   :where(:scope) {
     /* ── Tokens ── */
-    --time-picker-bg-default:                  var(--a-ui-bg);
-    --time-picker-fg-default:                  var(--a-ui-text);
-    --time-picker-fg-muted-default:            var(--a-ui-text-placeholder);
-    --time-picker-border-default:              var(--a-ui-border);
-    --time-picker-border-hover-default:        var(--a-ui-border-hover);
-    --time-picker-radius-default:              var(--a-radius);
-    --time-picker-height-default:              var(--a-size);
-    --time-picker-px-default:                  var(--a-ui-px);
-    --time-picker-py-default:                  0;
-    --time-picker-gap-default:                 var(--a-space-1);
-    --time-picker-font-size-default:           var(--a-ui-size);
-
-    --time-picker-segment-radius-default:      var(--a-radius-sm);
-    --time-picker-segment-px-default:          var(--a-space-1);
-    --time-picker-segment-bg-focus-default:    var(--a-accent);
-    --time-picker-segment-fg-focus-default:    var(--a-accent-fg);
-
-    --time-picker-separator-fg-default:        var(--a-fg-muted);
-
-    --time-picker-focus-ring-default:          var(--a-focus-ring);
-    --time-picker-focus-ring-invalid-default:  var(--a-focus-ring-invalid);
-
-    --time-picker-duration-default:            var(--a-duration-fast);
-    --time-picker-easing-default:              var(--a-easing);
+    --time-picker-bg:                  var(--a-ui-bg);
+    --time-picker-fg:                  var(--a-ui-text);
+    --time-picker-fg-muted:            var(--a-ui-text-placeholder);
+    --time-picker-border:              var(--a-ui-border);
+    --time-picker-border-hover:        var(--a-ui-border-hover);
+    --time-picker-radius:              var(--a-radius);
+    --time-picker-height:              var(--a-size);
+    --time-picker-px:                  var(--a-ui-px);
+    --time-picker-py:                  0;
+    --time-picker-gap:                 var(--a-space-1);
+    --time-picker-font-size:           var(--a-ui-size);
+
+    --time-picker-segment-radius:      var(--a-radius-sm);
+    --time-picker-segment-px:          var(--a-space-1);
+    --time-picker-segment-bg-focus:    var(--a-accent);
+    --time-picker-segment-fg-focus:    var(--a-accent-fg);
+
+    --time-picker-separator-fg:        var(--a-fg-muted);
+
+    --time-picker-focus-ring:          var(--a-focus-ring);
+    --time-picker-focus-ring-invalid:  var(--a-focus-ring-invalid);
+
+    --time-picker-duration:            var(--a-duration-fast);
+    --time-picker-easing:              var(--a-easing);
   }
 
   :scope {
@@ -32,22 +32,22 @@
     box-sizing: border-box;
     display: flex;
     align-items: center;
-    gap: var(--time-picker-gap, var(--time-picker-gap-default));
-    min-height: var(--time-picker-height, var(--time-picker-height-default));
-    padding: var(--time-picker-py, var(--time-picker-py-default)) var(--time-picker-px, var(--time-picker-px-default));
-    background: var(--time-picker-bg, var(--time-picker-bg-default));
-    color: var(--time-picker-fg, var(--time-picker-fg-default));
-    border: 1px solid var(--time-picker-border, var(--time-picker-border-default));
-    border-radius: var(--time-picker-radius, var(--time-picker-radius-default));
-    font-family: inherit;
-    font-size: var(--time-picker-font-size, var(--time-picker-font-size-default));
+    gap: var(--time-picker-gap);
+    min-height: var(--time-picker-height);
+    padding: var(--time-picker-py) var(--time-picker-px);
+    background: var(--time-picker-bg);
+    color: var(--time-picker-fg);
+    border: 1px solid var(--time-picker-border);
+    border-radius: var(--time-picker-radius);
+    font-family: var(--time-picker-font-family, var(--a-font-family-ui));
+    font-size: var(--time-picker-font-size);
     font-variant-numeric: tabular-nums;
     line-height: 1.4;
     cursor: text;
     transition:
-      border-color var(--time-picker-duration, var(--time-picker-duration-default)) var(--time-picker-easing, var(--time-picker-easing-default)),
-      background   var(--time-picker-duration, var(--time-picker-duration-default)) var(--time-picker-easing, var(--time-picker-easing-default)),
-      box-shadow   var(--time-picker-duration, var(--time-picker-duration-default)) var(--time-picker-easing, var(--time-picker-easing-default));
+      border-color var(--time-picker-duration) var(--time-picker-easing),
+      background   var(--time-picker-duration) var(--time-picker-easing),
+      box-shadow   var(--time-picker-duration) var(--time-picker-easing);
   }
 
   /* Display convention (ADR-0037): block-level by default; [inline] opts back to inline-level. */
@@ -57,17 +57,17 @@
   :scope [data-segment] {
     display: inline-block;
     min-width: 2ch;
-    padding: 0 var(--time-picker-segment-px, var(--time-picker-segment-px-default));
+    padding: 0 var(--time-picker-segment-px);
     text-align: center;
-    border-radius: var(--time-picker-segment-radius, var(--time-picker-segment-radius-default));
+    border-radius: var(--time-picker-segment-radius);
     color: inherit;
     background: transparent;
     outline: none;
     caret-color: transparent;
     cursor: text;
     transition:
-      background var(--time-picker-duration, var(--time-picker-duration-default)) var(--time-picker-easing, var(--time-picker-easing-default)),
-      color      var(--time-picker-duration, var(--time-picker-duration-default)) var(--time-picker-easing, var(--time-picker-easing-default));
+      background var(--time-picker-duration) var(--time-picker-easing),
+      color      var(--time-picker-duration) var(--time-picker-easing);
   }
 
   /* Meridiem is a touch wider since it carries two letters (AM/PM). */
@@ -79,20 +79,20 @@
   /* ── State: empty (placeholder via :empty) ── */
   :scope [data-segment]:empty::before {
     content: '--';
-    color: var(--time-picker-fg-muted, var(--time-picker-fg-muted-default));
+    color: var(--time-picker-fg-muted);
   }
 
   /* ── State: focused segment ── */
   :scope [data-segment]:focus,
   :scope [data-segment]:focus-visible {
-    background: var(--time-picker-segment-bg-focus, var(--time-picker-segment-bg-focus-default));
-    color: var(--time-picker-segment-fg-focus, var(--time-picker-segment-fg-focus-default));
+    background: var(--time-picker-segment-bg-focus);
+    color: var(--time-picker-segment-fg-focus);
     outline: none;
   }
 
   /* ── Separator ── */
   :scope [data-separator] {
-    color: var(--time-picker-separator-fg, var(--time-picker-separator-fg-default));
+    color: var(--time-picker-separator-fg);
     pointer-events: none;
     user-select: none;
   }
@@ -100,18 +100,18 @@
 
 /* hover rules — outside @scope (matches input-ui's Safari 17.x workaround). */
 time-picker-ui:not([disabled]):hover {
-  border-color: var(--time-picker-border-hover, var(--time-picker-border-hover-default));
+  border-color: var(--time-picker-border-hover);
 }
 
 /* Focus ring on the host when any segment is focused.
    Canonical L3 ring; consumed via --time-picker-focus-ring (aliases --a-focus-ring). */
 time-picker-ui:not([disabled]):focus-within {
-  box-shadow: var(--time-picker-focus-ring, var(--time-picker-focus-ring-default));
+  box-shadow: var(--time-picker-focus-ring);
 }
 
 time-picker-ui[aria-invalid="true"]:not([disabled]):focus-within,
 time-picker-ui[error]:not([disabled]):focus-within {
-  box-shadow: var(--time-picker-focus-ring-invalid, var(--time-picker-focus-ring-invalid-default));
+  box-shadow: var(--time-picker-focus-ring-invalid);
 }
 
 /* Disabled / readonly affordance */

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, var(--timeline-marker-w-default)) [content] 1fr [aside] auto
+     [marker] var(--timeline-marker-w) [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,86 +18,86 @@
 @scope (timeline-ui) {
   :where(:scope) {
     /* Grid */
-    --timeline-marker-w-default:           1.25rem;
-    --timeline-gap-col-default:            var(--a-space-2);
-    --timeline-gap-row-default:            var(--a-space-3);
+    --timeline-marker-w:           1.25rem;
+    --timeline-gap-col:            var(--a-space-2);
+    --timeline-gap-row:            var(--a-space-3);
 
     /* Dot */
-    --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);
+    --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);
 
     /* Sub-dot (outcomes) */
-    --timeline-subdot-size-default:        4px;
-    --timeline-subdot-bg-default:          var(--a-fg-subtle);
+    --timeline-subdot-size:        4px;
+    --timeline-subdot-bg:          var(--a-fg-subtle);
 
     /* Connector line */
-    --timeline-line-size-default:          2px;
-    --timeline-line-fg-default:            var(--a-border-subtle);
-    --timeline-line-fg-done-default:       var(--a-border);
+    --timeline-line-size:          2px;
+    --timeline-line-fg:            var(--a-border-subtle);
+    --timeline-line-fg-done:       var(--a-border);
 
     /* Marker box — the shared circular footprint the icon marker fills and
        the dot / spinner center within (the column track --timeline-marker-w
        is a touch wider for breathing room). One token sizes the whole marker
        system; consumers (agent-reasoning-ui, chat surfaces) override it to
        scale every marker type coherently. */
-    --timeline-marker-box-size-default:    1rem;
+    --timeline-marker-box-size:    1rem;
 
     /* Icon (replaces dot) */
-    --timeline-icon-size-default:          var(--timeline-marker-box-size, var(--timeline-marker-box-size-default));
-    --timeline-icon-bg-default:            var(--a-bg-muted);
-    --timeline-icon-fg-default:            var(--a-fg-subtle);
-    --timeline-icon-border-default:        var(--a-border-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);
+    --timeline-icon-size:          var(--timeline-marker-box-size);
+    --timeline-icon-bg:            var(--a-bg-muted);
+    --timeline-icon-fg:            var(--a-fg-subtle);
+    --timeline-icon-border:        var(--a-border-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);
 
     /* Typography */
-    --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);
+    --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);
 
     /* Motion */
-    --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;
+    --timeline-duration:           var(--a-duration-fast);
+    --timeline-easing:             var(--a-easing-out);
+    --timeline-spin-duration:      0.8s;
+    --timeline-pulse-duration:     2s;
   }
 
   :scope {
     box-sizing: border-box;
     display: grid;
     grid-template-columns:
-      [marker] var(--timeline-marker-w, var(--timeline-marker-w-default))
+      [marker] var(--timeline-marker-w)
       [content] 1fr
       [aside] auto;
-    column-gap: var(--timeline-gap-col, var(--timeline-gap-col-default));
-    row-gap: var(--timeline-gap-row, var(--timeline-gap-row-default));
+    column-gap: var(--timeline-gap-col);
+    row-gap: var(--timeline-gap-row);
     min-width: 0;
   }
 
   /* Compact variant (agent-reasoning + chat-adjacent) */
   :scope[size="sm"] {
-    --timeline-marker-w-default: 1rem;
-    --timeline-marker-box-size-default: 0.875rem;
-    --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);
+    --timeline-marker-w: 1rem;
+    --timeline-marker-box-size: 0.875rem;
+    --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);
   }
 
   /* Horizontal layout — fall back to flow layout; drops subgrid.
@@ -145,7 +145,7 @@ agent-reasoning-ui timeline-ui:not([orientation="horizontal"]),
     /* Reads the override THEN the inherited -default (set on timeline-ui,
        and shrunk by [size="sm"]) THEN a literal — so the marker box scales
        with both consumer overrides AND the sm compact variant. */
-    --timeline-item-marker-box-size:    var(--timeline-marker-box-size, var(--timeline-marker-box-size-default, 1rem));
+    --timeline-item-marker-box-size:    var(--timeline-marker-box-size, var(--timeline-marker-box-size, 1rem));
     --timeline-item-icon-size:          var(--timeline-icon-size, var(--timeline-item-marker-box-size));
     --timeline-item-icon-bg:            var(--timeline-icon-bg, var(--a-bg-muted));
     --timeline-item-icon-fg:            var(--timeline-icon-fg, var(--a-fg-subtle));
@@ -414,7 +414,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-dot-size-default)) + var(--timeline-gap-col, var(--timeline-gap-col-default)));
+  padding-top: calc(var(--timeline-dot-size) + var(--timeline-gap-col));
   text-align: center;
   position: relative;
 }
@@ -427,11 +427,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, var(--timeline-dot-size-default)) / 2 - var(--timeline-line-size, var(--timeline-line-size-default)) / 2);
+  top: calc(var(--timeline-dot-size) / 2 - var(--timeline-line-size) / 2);
   right: -50%;
   bottom: auto;
   width: 100%;
-  height: var(--timeline-line-size, var(--timeline-line-size-default));
+  height: var(--timeline-line-size);
 }
 
 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-duration-default)) var(--toast-easing, var(--toast-easing-default)),
-              opacity var(--toast-duration, var(--toast-duration-default)) var(--toast-easing, var(--toast-easing-default));
+  transition: transform var(--toast-duration) var(--toast-easing),
+              opacity var(--toast-duration) var(--toast-easing);
   transform: translateY(0);
   opacity: 1;
 }
 toast-ui[data-closing] {
-  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));
+  transition: transform var(--toast-duration) var(--toast-easing),
+              opacity var(--toast-duration) var(--toast-easing);
   opacity: 0;
 }
 toast-ui[data-closing],
@@ -29,30 +29,30 @@ toast-ui[data-closing][position="top-left"] {
 
 @scope (toast-ui) {
   :where(:scope) {
-    --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);
+    --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);
 
     /* ── Typography ── */
-    --toast-font-default:     var(--a-font-family);
-    --toast-size-default:     var(--a-ui-md);
+    --toast-font:     var(--a-font-family);
+    --toast-size:     var(--a-ui-md);
 
     /* ── Position offset ── */
-    --toast-offset-default:   var(--a-space-4);
+    --toast-offset:   var(--a-space-4);
 
     /* ── Close button ── */
-    --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);
+    --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);
   }
 
   :scope {
@@ -61,16 +61,16 @@ toast-ui[data-closing][position="top-left"] {
     z-index: 9999;
     display: flex;
     align-items: center;
-    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));
+    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);
     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, var(--toast-offset-default));
-    right: var(--toast-offset, var(--toast-offset-default));
+    bottom: var(--toast-offset);
+    right: var(--toast-offset);
     transform: translateY(1rem);
   }
   :where(:scope[position="bottom-left"]) {
-    bottom: var(--toast-offset, var(--toast-offset-default));
-    left: var(--toast-offset, var(--toast-offset-default));
+    bottom: var(--toast-offset);
+    left: var(--toast-offset);
     right: auto;
     transform: translateY(1rem);
   }
   :where(:scope[position="top-right"]) {
-    top: var(--toast-offset, var(--toast-offset-default));
-    right: var(--toast-offset, var(--toast-offset-default));
+    top: var(--toast-offset);
+    right: var(--toast-offset);
     bottom: auto;
     transform: translateY(-1rem);
   }
   :where(:scope[position="top-left"]) {
-    top: var(--toast-offset, var(--toast-offset-default));
-    left: var(--toast-offset, var(--toast-offset-default));
+    top: var(--toast-offset);
+    left: var(--toast-offset);
     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-default:     var(--a-info-muted);
-    --toast-fg-default:     var(--a-info-text);
-    --toast-border-default: var(--a-info-border-subtle);
+    --toast-bg:     var(--a-info-muted);
+    --toast-fg:     var(--a-info-text);
+    --toast-border: var(--a-info-border-subtle);
   }
   :where(:scope[variant="success"]) {
-    --toast-bg-default:     var(--a-success-muted);
-    --toast-fg-default:     var(--a-success-text);
-    --toast-border-default: var(--a-success-border-subtle);
+    --toast-bg:     var(--a-success-muted);
+    --toast-fg:     var(--a-success-text);
+    --toast-border: var(--a-success-border-subtle);
   }
   :where(:scope[variant="warning"]) {
-    --toast-bg-default:     var(--a-warning-muted);
-    --toast-fg-default:     var(--a-warning-text);
-    --toast-border-default: var(--a-warning-border-subtle);
+    --toast-bg:     var(--a-warning-muted);
+    --toast-fg:     var(--a-warning-text);
+    --toast-border: var(--a-warning-border-subtle);
   }
   :where(:scope[variant="danger"]) {
-    --toast-bg-default:     var(--a-danger-muted);
-    --toast-fg-default:     var(--a-danger-text);
-    --toast-border-default: var(--a-danger-border-subtle);
+    --toast-bg:     var(--a-danger-muted);
+    --toast-fg:     var(--a-danger-text);
+    --toast-border: 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-default:     var(--a-primary-bg);
-    --toast-fg-default:     var(--a-primary-fg);
-    --toast-border-default: var(--a-accent-border-subtle);
+    --toast-bg:     var(--a-primary-bg);
+    --toast-fg:     var(--a-primary-fg);
+    --toast-border: 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-default:     var(--a-bg-subtle);
-    --toast-fg-default:     var(--a-fg);
-    --toast-border-default: var(--a-border-subtle);
+    --toast-bg:     var(--a-bg-subtle);
+    --toast-fg:     var(--a-fg);
+    --toast-border: var(--a-border-subtle);
   }
 
   /* ── Message slot ── */

package/components/toc/toc.css

@@ -5,30 +5,30 @@
 @scope (toc-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --toc-gap-default:              var(--a-space-1);
-    --toc-indent-default:           var(--a-space-3);
-    --toc-padding-block-default:    var(--a-space-1);
-    --toc-padding-inline-default:   var(--a-space-2);
+    --toc-gap:              var(--a-space-1);
+    --toc-indent:           var(--a-space-3);
+    --toc-padding-block:    var(--a-space-1);
+    --toc-padding-inline:   var(--a-space-2);
 
     /* ── Colors ── */
-    --toc-fg-default:               var(--a-fg-muted);
-    --toc-fg-active-default:        var(--a-fg);
-    --toc-fg-hover-default:         var(--a-fg);
-    --toc-rule-active-default:      var(--a-accent-bg);
-    --toc-rule-inactive-default:    transparent;
+    --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-rule-inactive:    transparent;
 
     /* ── Typography ── */
-    --toc-size-default:             var(--a-ui-sm);
-    --toc-weight-default:           var(--a-weight);
-    --toc-weight-active-default:    var(--a-weight-medium);
+    --toc-size:             var(--a-ui-sm);
+    --toc-weight:           var(--a-weight);
+    --toc-weight-active:    var(--a-weight-medium);
   }
 
   /* ── Host ── */
   :scope {
     box-sizing: border-box;
     display: block;
-    color: var(--toc-fg, var(--toc-fg-default));
-    font-size: var(--toc-size, var(--toc-size-default));
+    color: var(--toc-fg);
+    font-size: var(--toc-size);
   }
 
   /* ── Nav scaffold ── */
@@ -42,7 +42,7 @@
     padding: 0;
     display: flex;
     flex-direction: column;
-    gap: var(--toc-gap, var(--toc-gap-default));
+    gap: var(--toc-gap);
   }
 
   li {
@@ -55,25 +55,25 @@
   a {
     display: block;
     box-sizing: border-box;
-    padding-block: var(--toc-padding-block, var(--toc-padding-block-default));
-    padding-inline: var(--toc-padding-inline, var(--toc-padding-inline-default));
+    padding-block: var(--toc-padding-block);
+    padding-inline: var(--toc-padding-inline);
     text-decoration: none;
     color: inherit;
     line-height: 1.4;
-    border-inline-start: 2px solid var(--toc-rule-inactive, var(--toc-rule-inactive-default));
+    border-inline-start: 2px solid var(--toc-rule-inactive);
     transition:
       color  var(--a-duration-fast) var(--a-easing),
       border-color var(--a-duration-fast) var(--a-easing);
   }
 
   a:hover {
-    color: var(--toc-fg-hover, var(--toc-fg-hover-default));
+    color: var(--toc-fg-hover);
   }
 
   a[data-active] {
-    color: var(--toc-fg-active, var(--toc-fg-active-default));
-    border-inline-start-color: var(--toc-rule-active, var(--toc-rule-active-default));
-    font-weight: var(--toc-weight-active, var(--toc-weight-active-default));
+    color: var(--toc-fg-active);
+    border-inline-start-color: var(--toc-rule-active);
+    font-weight: var(--toc-weight-active);
   }
 
   a:focus-visible {
@@ -83,10 +83,10 @@
   }
 
   /* ── Indentation by depth ── */
-  a[data-depth="0"] { padding-inline-start: var(--toc-padding-inline, var(--toc-padding-inline-default)); }
-  a[data-depth="1"] { padding-inline-start: calc(var(--toc-padding-inline, var(--toc-padding-inline-default)) + var(--toc-indent, var(--toc-indent-default)) * 1); }
-  a[data-depth="2"] { padding-inline-start: calc(var(--toc-padding-inline, var(--toc-padding-inline-default)) + var(--toc-indent, var(--toc-indent-default)) * 2); }
-  a[data-depth="3"] { padding-inline-start: calc(var(--toc-padding-inline, var(--toc-padding-inline-default)) + var(--toc-indent, var(--toc-indent-default)) * 3); }
-  a[data-depth="4"] { padding-inline-start: calc(var(--toc-padding-inline, var(--toc-padding-inline-default)) + var(--toc-indent, var(--toc-indent-default)) * 4); }
-  a[data-depth="5"] { padding-inline-start: calc(var(--toc-padding-inline, var(--toc-padding-inline-default)) + var(--toc-indent, var(--toc-indent-default)) * 5); }
+  a[data-depth="0"] { padding-inline-start: var(--toc-padding-inline); }
+  a[data-depth="1"] { padding-inline-start: calc(var(--toc-padding-inline) + var(--toc-indent) * 1); }
+  a[data-depth="2"] { padding-inline-start: calc(var(--toc-padding-inline) + var(--toc-indent) * 2); }
+  a[data-depth="3"] { padding-inline-start: calc(var(--toc-padding-inline) + var(--toc-indent) * 3); }
+  a[data-depth="4"] { padding-inline-start: calc(var(--toc-padding-inline) + var(--toc-indent) * 4); }
+  a[data-depth="5"] { padding-inline-start: calc(var(--toc-padding-inline) + var(--toc-indent) * 5); }
 }