@adia-ai/web-components 0.6.33 → 0.6.34

package/components/step-progress/step-progress.css

@@ -5,34 +5,34 @@
 
 @scope (step-progress-ui) {
   :where(:scope) {
-    --step-progress-gap:        var(--a-space-2);
-    --step-progress-track-gap:  var(--a-space-1);
-    --step-progress-dash-h:     4px;
-    --step-progress-dash-radius: var(--a-radius-full);
-    --step-progress-dash-bg:    var(--a-border-subtle);
-    --step-progress-dash-bg-active: var(--a-accent);
-    --step-progress-caption-fg: var(--a-fg-muted);
-    --step-progress-caption-size: var(--a-ui-sm);
+    --step-progress-gap-default:        var(--a-space-2);
+    --step-progress-track-gap-default:  var(--a-space-1);
+    --step-progress-dash-h-default:     4px;
+    --step-progress-dash-radius-default: var(--a-radius-full);
+    --step-progress-dash-bg-default:    var(--a-border-subtle);
+    --step-progress-dash-bg-active-default: var(--a-accent);
+    --step-progress-caption-fg-default: var(--a-fg-muted);
+    --step-progress-caption-size-default: var(--a-ui-sm);
 
     /* Sizing — match the bespoke flex shape in registration + onboarding
        (flex:0 1 18rem; min-width:10rem). Consumers can override. */
-    --step-progress-flex:       0 1 18rem;
-    --step-progress-min-width:  10rem;
+    --step-progress-flex-default:       0 1 18rem;
+    --step-progress-min-width-default:  10rem;
   }
 
   :scope {
     display: flex;
     flex-direction: column;
-    gap: var(--step-progress-gap);
-    flex: var(--step-progress-flex);
-    min-width: var(--step-progress-min-width);
+    gap: var(--step-progress-gap, var(--step-progress-gap-default));
+    flex: var(--step-progress-flex, var(--step-progress-flex-default));
+    min-width: var(--step-progress-min-width, var(--step-progress-min-width-default));
   }
 
   /* Caption row — small, muted text. Hidden when no caption provided
      (the [hidden] attribute is set by the JS). */
   [slot="caption"] {
-    color: var(--step-progress-caption-fg);
-    font-size: var(--step-progress-caption-size);
+    color: var(--step-progress-caption-fg, var(--step-progress-caption-fg-default));
+    font-size: var(--step-progress-caption-size, var(--step-progress-caption-size-default));
     line-height: 1.4;
   }
 
@@ -44,18 +44,18 @@
      item so the track scales with the column width. */
   [slot="track"] {
     display: flex;
-    gap: var(--step-progress-track-gap);
+    gap: var(--step-progress-track-gap, var(--step-progress-track-gap-default));
   }
 
   [slot="track"] > span {
     flex: 1;
-    height: var(--step-progress-dash-h);
-    border-radius: var(--step-progress-dash-radius);
-    background: var(--step-progress-dash-bg);
+    height: var(--step-progress-dash-h, var(--step-progress-dash-h-default));
+    border-radius: var(--step-progress-dash-radius, var(--step-progress-dash-radius-default));
+    background: var(--step-progress-dash-bg, var(--step-progress-dash-bg-default));
     transition: background var(--a-duration-fast, 150ms) var(--a-easing, ease);
   }
 
   [slot="track"] > span[data-active] {
-    background: var(--step-progress-dash-bg-active);
+    background: var(--step-progress-dash-bg-active, var(--step-progress-dash-bg-active-default));
   }
 }

package/components/stepper/stepper.css

@@ -12,41 +12,41 @@
 @scope (stepper-ui) {
   :where(:scope) {
     /* ── Circle ── */
-    --stepper-size:            2rem;
-    --stepper-bg:              var(--a-bg);
-    --stepper-border:          var(--a-border);
-    --stepper-fg:              var(--a-fg-muted);
-    --stepper-font:            var(--a-ui-sm);
-    --stepper-weight:          var(--a-weight-medium);
-    --stepper-border-size:     2px;
-
-    --stepper-bg-active:       var(--a-bg);
-    --stepper-border-active:   var(--a-accent);
-    --stepper-fg-active:       var(--a-accent);
-
-    --stepper-bg-done:         var(--a-accent);
-    --stepper-border-done:     var(--a-accent);
-    --stepper-fg-done:         var(--a-accent-fg);
-
-    --stepper-line:            var(--a-border-subtle);
-    --stepper-line-done:       var(--a-accent);
-    --stepper-line-size:       2px;
+    --stepper-size-default:            2rem;
+    --stepper-bg-default:              var(--a-bg);
+    --stepper-border-default:          var(--a-border);
+    --stepper-fg-default:              var(--a-fg-muted);
+    --stepper-font-default:            var(--a-ui-sm);
+    --stepper-weight-default:          var(--a-weight-medium);
+    --stepper-border-size-default:     2px;
+
+    --stepper-bg-active-default:       var(--a-bg);
+    --stepper-border-active-default:   var(--a-accent);
+    --stepper-fg-active-default:       var(--a-accent);
+
+    --stepper-bg-done-default:         var(--a-accent);
+    --stepper-border-done-default:     var(--a-accent);
+    --stepper-fg-done-default:         var(--a-accent-fg);
+
+    --stepper-line-default:            var(--a-border-subtle);
+    --stepper-line-done-default:       var(--a-accent);
+    --stepper-line-size-default:       2px;
 
     /* ── Layout ──
        Parent tokens use the bare `--stepper-*` name (no `-item-` infix)
        so the child's `:where(stepper-item-ui)` block can pull from
        parent → child via `var(--stepper-X, …)` without name collisions.
        A self-named child declaration like
-       `--stepper-item-gap-sm: var(--stepper-item-gap-sm, …)` resolves
+       `--stepper-item-gap-sm-default: var(--stepper-item-gap-sm, …)` resolves
        to invalid (cycle), which silently breaks any calc() that
        consumes it. */
-    --stepper-radius-full:     var(--a-radius-full);
-    --stepper-gap:             var(--a-space-3);
-    --stepper-gap-sm:          var(--a-space-2);
-    --stepper-pad-x:           var(--a-space-4);
-    --stepper-pad-y:           var(--a-space-6);
-    --stepper-offset-xs:       var(--a-space-1);
-    --stepper-min-width:       5rem;
+    --stepper-radius-full-default:     var(--a-radius-full);
+    --stepper-gap-default:             var(--a-space-3);
+    --stepper-gap-sm-default:          var(--a-space-2);
+    --stepper-pad-x-default:           var(--a-space-4);
+    --stepper-pad-y-default:           var(--a-space-6);
+    --stepper-offset-xs-default:       var(--a-space-1);
+    --stepper-min-width-default:       5rem;
   }
 
   :scope {
@@ -90,7 +90,7 @@
 
     --stepper-item-radius-full:    var(--a-radius-full);
     --stepper-item-gap:            var(--stepper-gap, var(--a-space-3));
-    --stepper-item-gap-sm:         var(--stepper-gap-sm, var(--a-space-2));
+    --stepper-item-gap-sm-default:         var(--stepper-gap-sm, var(--a-space-2));
     --stepper-item-pad-x:          var(--stepper-pad-x, var(--a-space-4));
     --stepper-item-pad-y:          var(--stepper-pad-y, var(--a-space-6));
     --stepper-item-offset-xs:      var(--stepper-offset-xs, var(--a-space-1));
@@ -114,7 +114,7 @@
     flex: 1;
     min-width: var(--stepper-item-min-width);
     text-align: center;
-    padding-top: calc(var(--stepper-item-size) + var(--stepper-item-gap-sm));
+    padding-top: calc(var(--stepper-item-size) + var(--stepper-item-gap-sm, var(--stepper-item-gap-sm-default)));
     padding-left: 0;
     padding-bottom: 0;
   }

package/components/stream/stream.css

@@ -1,20 +1,20 @@
 @scope (stream-ui) {
   :where(:scope) {
-    --stream-fg:              var(--a-fg);
-    --stream-font-size:       var(--a-body-size);
-    --stream-font-family:     var(--a-font-family);
-    --stream-leading:         var(--a-body-leading);
-    --stream-cursor-color:    var(--a-accent-bg);
-    --stream-blink-duration:  0.6s;
+    --stream-fg-default:              var(--a-fg);
+    --stream-font-size-default:       var(--a-body-size);
+    --stream-font-family-default:     var(--a-font-family);
+    --stream-leading-default:         var(--a-body-leading);
+    --stream-cursor-color-default:    var(--a-accent-bg);
+    --stream-blink-duration-default:  0.6s;
   }
 
   :scope {
     box-sizing: border-box;
     display: block;
-    color: var(--stream-fg);
-    font-family: var(--stream-font-family);
-    font-size: var(--stream-font-size);
-    line-height: var(--stream-leading);
+    color: var(--stream-fg, var(--stream-fg-default));
+    font-family: var(--stream-font-family, var(--stream-font-family-default));
+    font-size: var(--stream-font-size, var(--stream-font-size-default));
+    line-height: var(--stream-leading, var(--stream-leading-default));
     white-space: pre-wrap;
     word-break: break-word;
   }
@@ -22,8 +22,8 @@
   /* Blinking cursor during stream (default; suppress with [hide-cursor]) */
   :scope[streaming]:not([hide-cursor])::after {
     content: '▊';
-    color: var(--stream-cursor-color);
-    animation: _stream-blink var(--stream-blink-duration) step-end infinite;
+    color: var(--stream-cursor-color, var(--stream-cursor-color-default));
+    animation: _stream-blink var(--stream-blink-duration, var(--stream-blink-duration-default)) step-end infinite;
     margin-left: 1px;
   }
 

package/components/swatch/swatch.css

@@ -1,55 +1,55 @@
 @scope (swatch-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --swatch-gap:               var(--a-space-2);
+    --swatch-gap-default:               var(--a-space-2);
 
     /* ── Sizes ──
        The "tile" is the coloured shape; the label is plain text rendered
        beside (or below, for shape="block") the tile. Tile dimensions are
        size-driven; line shapes use a fixed thickness regardless of size. */
-    --swatch-tile-sm:           var(--a-space-2);          /* 8px ~ */
-    --swatch-tile-md:           var(--a-space-2-5);        /* 10px ~ */
-    --swatch-tile-lg:           40px;                       /* token-scale block */
-    --swatch-line-thickness:    2px;
-    --swatch-line-length:       calc(var(--swatch-tile-md) * 1.75);
+    --swatch-tile-sm-default:           var(--a-space-2);          /* 8px ~ */
+    --swatch-tile-md-default:           var(--a-space-2-5);        /* 10px ~ */
+    --swatch-tile-lg-default:           40px;                       /* token-scale block */
+    --swatch-line-thickness-default:    2px;
+    --swatch-line-length-default:       calc(var(--swatch-tile-md, var(--swatch-tile-md-default)) * 1.75);
 
     /* ── Colors ──
        Default colour falls back through the data palette so a bare
        <swatch-ui> still renders something visible; consumers usually set
        --swatch-color via [color] attr or inline style. */
-    --swatch-color:             var(--a-data-0);
-    --swatch-label-fg:          var(--a-fg-subtle);
+    --swatch-color-default:             var(--a-data-0);
+    --swatch-label-fg-default:          var(--a-fg-subtle);
 
     /* ── Shape ── */
-    --swatch-radius-block:      var(--a-radius-sm);
-    --swatch-radius-square:     var(--a-radius-sm);
+    --swatch-radius-block-default:      var(--a-radius-sm);
+    --swatch-radius-square-default:     var(--a-radius-sm);
 
     /* ── Block-shape extras (token-scale) ── */
-    --swatch-block-shadow:      inset 0 0 0 1px color-mix(in oklab, currentColor 8%, transparent);
+    --swatch-block-shadow-default:      inset 0 0 0 1px color-mix(in oklab, currentColor 8%, transparent);
 
     /* ── Typography ── */
-    --swatch-label-size:        var(--a-ui-size);
-    --swatch-label-step-size:   10px;
-    --swatch-label-step-mt:     4px;
-    --swatch-detail-size:       var(--a-ui-xs);
-    --swatch-detail-fg:         var(--a-fg-subtle);
+    --swatch-label-size-default:        var(--a-ui-size);
+    --swatch-label-step-size-default:   10px;
+    --swatch-label-step-mt-default:     4px;
+    --swatch-detail-size-default:       var(--a-ui-xs);
+    --swatch-detail-fg-default:         var(--a-fg-subtle);
 
     /* ── Badge ── */
-    --swatch-badge-size:        var(--a-ui-xs);
-    --swatch-badge-fg:          var(--a-chrome-fg);
-    --swatch-badge-bg:          var(--a-chrome-bg);
-    --swatch-badge-pad:         2px 4px;
-    --swatch-badge-radius:      var(--a-radius-xs);
+    --swatch-badge-size-default:        var(--a-ui-xs);
+    --swatch-badge-fg-default:          var(--a-chrome-fg);
+    --swatch-badge-bg-default:          var(--a-chrome-bg);
+    --swatch-badge-pad-default:         2px 4px;
+    --swatch-badge-radius-default:      var(--a-radius-xs);
 
     /* ── Copy button ── */
-    --swatch-copy-size:         var(--a-space-3);
-    --swatch-copy-fg:           var(--a-fg-muted);
-    --swatch-copy-fg-ok:        var(--a-success);
-    --swatch-copy-fg-fail:      var(--a-warning);
+    --swatch-copy-size-default:         var(--a-space-3);
+    --swatch-copy-fg-default:           var(--a-fg-muted);
+    --swatch-copy-fg-ok-default:        var(--a-success);
+    --swatch-copy-fg-fail-default:      var(--a-warning);
 
     /* ── Selectable ring ── */
-    --swatch-select-ring:       var(--a-accent);
-    --swatch-select-ring-width: 2px;
+    --swatch-select-ring-default:       var(--a-accent);
+    --swatch-select-ring-width-default: 2px;
   }
 
   :scope {
@@ -59,10 +59,10 @@
     box-sizing: border-box;
     display: inline-flex;
     align-items: center;
-    gap: var(--swatch-gap);
+    gap: var(--swatch-gap, var(--swatch-gap-default));
     min-width: 0;
-    color: var(--swatch-label-fg);
-    font-size: var(--swatch-label-size);
+    color: var(--swatch-label-fg, var(--swatch-label-fg-default));
+    font-size: var(--swatch-label-size, var(--swatch-label-size-default));
     line-height: 1.2;
     vertical-align: baseline;
   }
@@ -72,7 +72,7 @@
     box-sizing: border-box;
     display: block;
     flex-shrink: 0;
-    background: var(--swatch-color);
+    background: var(--swatch-color, var(--swatch-color-default));
     line-height: 0;
   }
 
@@ -87,31 +87,31 @@
 
   /* ═══════ Shape: dot ═══════ */
   :scope[shape="dot"] > [data-tile] {
-    width: var(--_size, var(--swatch-tile-md));
-    height: var(--_size, var(--swatch-tile-md));
+    width: var(--_size, var(--swatch-tile-md, var(--swatch-tile-md-default)));
+    height: var(--_size, var(--swatch-tile-md, var(--swatch-tile-md-default)));
     border-radius: 50%;
   }
 
   /* ═══════ Shape: square ═══════ */
   :scope[shape="square"] > [data-tile] {
-    width: var(--_size, var(--swatch-tile-md));
-    height: var(--_size, var(--swatch-tile-md));
-    border-radius: var(--swatch-radius-square);
+    width: var(--_size, var(--swatch-tile-md, var(--swatch-tile-md-default)));
+    height: var(--_size, var(--swatch-tile-md, var(--swatch-tile-md-default)));
+    border-radius: var(--swatch-radius-square, var(--swatch-radius-square-default));
   }
 
   /* ═══════ Shape: line (solid hairline) ═══════ */
   :scope[shape="line"] > [data-tile] {
-    width: var(--swatch-line-length);
-    height: var(--swatch-line-thickness);
-    border-radius: var(--swatch-line-thickness);
+    width: var(--swatch-line-length, var(--swatch-line-length-default));
+    height: var(--swatch-line-thickness, var(--swatch-line-thickness-default));
+    border-radius: var(--swatch-line-thickness, var(--swatch-line-thickness-default));
   }
 
   /* ═══════ Shape: dashed (dashed hairline) ═══════ */
   :scope[shape="dashed"] > [data-tile] {
-    width: var(--swatch-line-length);
-    height: var(--swatch-line-thickness);
+    width: var(--swatch-line-length, var(--swatch-line-length-default));
+    height: var(--swatch-line-thickness, var(--swatch-line-thickness-default));
     background: transparent;
-    border-top: var(--swatch-line-thickness) dashed var(--swatch-color);
+    border-top: var(--swatch-line-thickness, var(--swatch-line-thickness-default)) dashed var(--swatch-color, var(--swatch-color-default));
   }
 
   /* ═══════ Shape: block (token-scale tile) ═══════
@@ -126,18 +126,18 @@
 
   :scope[shape="block"] > [data-tile] {
     width: 100%;
-    height: var(--_block-h, var(--swatch-tile-lg));
-    border-radius: var(--swatch-radius-block);
-    box-shadow: var(--swatch-block-shadow);
+    height: var(--_block-h, var(--swatch-tile-lg, var(--swatch-tile-lg-default)));
+    border-radius: var(--swatch-radius-block, var(--swatch-radius-block-default));
+    box-shadow: var(--swatch-block-shadow, var(--swatch-block-shadow-default));
   }
 
   :scope[shape="block"] > [data-label] {
     text-align: center;
     font-family: var(--a-font-family-code);
-    font-size: var(--swatch-label-step-size);
+    font-size: var(--swatch-label-step-size, var(--swatch-label-step-size-default));
     font-variant-numeric: tabular-nums;
     color: var(--a-fg-muted);
-    margin-block-start: var(--swatch-label-step-mt);
+    margin-block-start: var(--swatch-label-step-mt, var(--swatch-label-step-mt-default));
     white-space: nowrap;
   }
 
@@ -164,7 +164,7 @@
     position: absolute;
     top: 0;
     inset-inline: 0;
-    height: var(--_block-h, var(--swatch-tile-lg));
+    height: var(--_block-h, var(--swatch-tile-lg, var(--swatch-tile-lg-default)));
     display: flex;
     align-items: center;
     justify-content: center;
@@ -178,16 +178,16 @@
      height (`--_block-h`) for each size preset. Line/dashed widths use
      --swatch-line-length so they stay consistent at all sizes. */
   :scope[size="sm"] {
-    --_size: var(--swatch-tile-sm);
-    --_block-h: calc(var(--swatch-tile-lg) * 0.6);
+    --_size: var(--swatch-tile-sm, var(--swatch-tile-sm-default));
+    --_block-h: calc(var(--swatch-tile-lg, var(--swatch-tile-lg-default)) * 0.6);
   }
   :scope[size="md"] {
-    --_size: var(--swatch-tile-md);
-    --_block-h: calc(var(--swatch-tile-lg) * 0.75);
+    --_size: var(--swatch-tile-md, var(--swatch-tile-md-default));
+    --_block-h: calc(var(--swatch-tile-lg, var(--swatch-tile-lg-default)) * 0.75);
   }
   :scope[size="lg"] {
-    --_size: calc(var(--swatch-tile-md) * 1.4);
-    --_block-h: var(--swatch-tile-lg);
+    --_size: calc(var(--swatch-tile-md, var(--swatch-tile-md-default)) * 1.4);
+    --_block-h: var(--swatch-tile-lg, var(--swatch-tile-lg-default));
   }
 
   /* ═══════ Detail line ═══════
@@ -195,8 +195,8 @@
      design-token swatch. For shape="block" sits under the label; for
      non-block shapes is inline (small, muted, after label). */
   :scope > [data-detail] {
-    color: var(--swatch-detail-fg);
-    font-size: var(--swatch-detail-size);
+    color: var(--swatch-detail-fg, var(--swatch-detail-fg-default));
+    font-size: var(--swatch-detail-size, var(--swatch-detail-size-default));
     font-family: var(--a-font-family-code);
     font-variant-numeric: tabular-nums;
     white-space: nowrap;
@@ -232,12 +232,12 @@
     justify-content: center;
     min-width: var(--a-space-4);
     height: var(--a-space-4);
-    padding: var(--swatch-badge-pad);
-    background: var(--swatch-badge-bg);
-    color: var(--swatch-badge-fg);
-    font-size: var(--swatch-badge-size);
+    padding: var(--swatch-badge-pad, var(--swatch-badge-pad-default));
+    background: var(--swatch-badge-bg, var(--swatch-badge-bg-default));
+    color: var(--swatch-badge-fg, var(--swatch-badge-fg-default));
+    font-size: var(--swatch-badge-size, var(--swatch-badge-size-default));
     line-height: 1;
-    border-radius: var(--swatch-badge-radius);
+    border-radius: var(--swatch-badge-radius, var(--swatch-badge-radius-default));
     box-shadow: 0 0 0 1px color-mix(in oklab, var(--a-border-subtle) 60%, transparent);
   }
 
@@ -296,7 +296,7 @@
     border: 0;
     padding: 2px 4px;
     margin-inline-start: var(--a-space-1);
-    color: var(--swatch-copy-fg);
+    color: var(--swatch-copy-fg, var(--swatch-copy-fg-default));
     font-size: var(--a-ui-sm);
     line-height: 1;
     cursor: pointer;
@@ -305,12 +305,12 @@
   }
   :scope > [data-copy]:hover { color: var(--a-fg); background: var(--a-bg-muted); }
   :scope > [data-copy]:focus-visible {
-    outline: var(--swatch-select-ring-width) solid var(--swatch-select-ring);
+    outline: var(--swatch-select-ring-width, var(--swatch-select-ring-width-default)) solid var(--swatch-select-ring, var(--swatch-select-ring-default));
     outline-offset: 1px;
   }
   :scope > [data-copy][hidden] { display: none; }
-  :scope > [data-copy][data-copy-state="ok"]   { color: var(--swatch-copy-fg-ok); }
-  :scope > [data-copy][data-copy-state="fail"] { color: var(--swatch-copy-fg-fail); }
+  :scope > [data-copy][data-copy-state="ok"]   { color: var(--swatch-copy-fg-ok, var(--swatch-copy-fg-ok-default)); }
+  :scope > [data-copy][data-copy-state="fail"] { color: var(--swatch-copy-fg-fail, var(--swatch-copy-fg-fail-default)); }
 
   /* ═══════ Selectable + selected states ═══════
      [selectable] makes the whole host focusable; ring on :focus-visible.
@@ -322,12 +322,12 @@
   }
   :scope[selectable]:focus { outline: none; }
   :scope[selectable]:focus-visible {
-    box-shadow: 0 0 0 var(--swatch-select-ring-width) var(--swatch-select-ring);
+    box-shadow: 0 0 0 var(--swatch-select-ring-width, var(--swatch-select-ring-width-default)) var(--swatch-select-ring, var(--swatch-select-ring-default));
   }
   :scope[selected] {
-    box-shadow: 0 0 0 var(--swatch-select-ring-width) var(--swatch-select-ring);
+    box-shadow: 0 0 0 var(--swatch-select-ring-width, var(--swatch-select-ring-width-default)) var(--swatch-select-ring, var(--swatch-select-ring-default));
   }
   :scope[selectable]:hover:not([selected]) {
-    box-shadow: 0 0 0 1px color-mix(in oklab, var(--swatch-select-ring) 50%, transparent);
+    box-shadow: 0 0 0 1px color-mix(in oklab, var(--swatch-select-ring, var(--swatch-select-ring-default)) 50%, transparent);
   }
 }