@adia-ai/web-components 0.7.3 → 0.7.4

package/components/stat/stat.css

@@ -2,19 +2,19 @@
   :where(:scope) {
     /* ── Tokens ──
        Use size-responsive tokens so stat shrinks when parent card has size="sm". */
-    --stat-value-size-default:   var(--a-title-size);
-    --stat-value-weight-default: var(--a-weight-bold);
-    --stat-value-fg-default:     var(--a-fg-strong);
-    --stat-label-size-default:   var(--a-ui-size);
-    --stat-label-fg-default:     var(--a-fg);
-    --stat-change-size-default:  var(--a-ui-size);
-    --stat-up-fg-default:        var(--a-success-bg);
-    --stat-down-fg-default:      var(--a-danger-bg);
-    --stat-icon-fg-default:      var(--a-fg-muted);
+    --stat-value-size:   var(--a-title-size);
+    --stat-value-weight: var(--a-weight-bold);
+    --stat-value-fg:     var(--a-fg-strong);
+    --stat-label-size:   var(--a-ui-size);
+    --stat-label-fg:     var(--a-fg);
+    --stat-change-size:  var(--a-ui-size);
+    --stat-up-fg:        var(--a-success-bg);
+    --stat-down-fg:      var(--a-danger-bg);
+    --stat-icon-fg:      var(--a-fg-muted);
 
     /* ── Spacing ── */
-    --stat-column-gap-default:   var(--a-gap-self, var(--a-gap));
-    --stat-row-gap-default:      var(--a-gap-sm);
+    --stat-column-gap:   var(--a-gap-self, var(--a-gap));
+    --stat-row-gap:      var(--a-gap-sm);
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
 }
 
@@ -31,8 +31,8 @@
       "label  icon"
       "value  value"
       "change change";
-    column-gap: var(--stat-column-gap, var(--stat-column-gap-default));
-    row-gap: var(--stat-row-gap, var(--stat-row-gap-default));
+    column-gap: var(--stat-column-gap);
+    row-gap: var(--stat-row-gap);
     align-items: baseline;
   }
 
@@ -113,7 +113,7 @@
        chart-ui[slot="chart"]{height:100%} so the stretch governs. */
     align-self: stretch;
     height: auto;
-    margin-block: calc(-1 * var(--card-inset, var(--card-inset-default, 0px)));
+    margin-block: calc(-1 * var(--card-inset, 0px));
     /* HORIZONTAL bleed via explicit width: chart-ui pins its own
        `width:100%` (chart.css), which beats justify-self:stretch and would
        freeze the box to the track — so a negative margin-inline-end can't
@@ -121,7 +121,7 @@
        so the right edge overflows to the card edge while the left keeps the
        column gap. The percentage resolves against the grid track. */
     justify-self: start;
-    width: calc(100% + var(--card-inset, var(--card-inset-default, 0px)));
+    width: calc(100% + var(--card-inset, 0px));
     min-width: 0;
     /* override the inline-chart 4:3 — fill the row span instead */
     aspect-ratio: auto;
@@ -130,8 +130,8 @@
   /* ── Label (eyebrow) ── */
   [slot="label"] {
     grid-area: label;
-    font-size: var(--stat-label-size, var(--stat-label-size-default));
-    color: var(--stat-label-fg, var(--stat-label-fg-default));
+    font-size: var(--stat-label-size);
+    color: var(--stat-label-fg);
     line-height: 1.4;
     min-width: 0;
     overflow: hidden;
@@ -145,7 +145,7 @@
     display: inline-flex;
     align-items: center;
     gap: 0.25em;
-    font-size: var(--stat-change-size, var(--stat-change-size-default));
+    font-size: var(--stat-change-size);
     line-height: 1;
     justify-self: start;
   }
@@ -153,9 +153,9 @@
   /* ── Value ── */
   [slot="value"] {
     grid-column: 1 / -1;
-    font-size: var(--stat-value-size, var(--stat-value-size-default));
-    font-weight: var(--stat-value-weight, var(--stat-value-weight-default));
-    color: var(--stat-value-fg, var(--stat-value-fg-default));
+    font-size: var(--stat-value-size);
+    font-weight: var(--stat-value-weight);
+    color: var(--stat-value-fg);
     line-height: 1.2;
     min-width: 0;
     overflow: hidden;
@@ -166,29 +166,29 @@
   /* Trend arrows via ::before */
   :scope[trend="up"] [slot="change"]::before {
     content: "\25B2";
-    color: var(--stat-up-fg, var(--stat-up-fg-default));
+    color: var(--stat-up-fg);
   }
   :scope[trend="up"] [slot="change"] {
-    color: var(--stat-up-fg, var(--stat-up-fg-default));
+    color: var(--stat-up-fg);
   }
 
   :scope[trend="down"] [slot="change"]::before {
     content: "\25BC";
-    color: var(--stat-down-fg, var(--stat-down-fg-default));
+    color: var(--stat-down-fg);
   }
   :scope[trend="down"] [slot="change"] {
-    color: var(--stat-down-fg, var(--stat-down-fg-default));
+    color: var(--stat-down-fg);
   }
 
   :scope[trend="neutral"] [slot="change"] {
-    color: var(--stat-label-fg, var(--stat-label-fg-default));
+    color: var(--stat-label-fg);
   }
 
   /* ── Icon ── */
   [slot="icon"] {
     grid-area: icon;
     align-self: start;
-    color: var(--stat-icon-fg, var(--stat-icon-fg-default));
+    color: var(--stat-icon-fg);
     --a-icon-size: 1.25rem;
   }
 

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

@@ -5,34 +5,34 @@
 
 @scope (step-progress-ui) {
   :where(:scope) {
-    --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);
+    --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);
 
     /* Sizing — match the bespoke flex shape in registration + onboarding
        (flex:0 1 18rem; min-width:10rem). Consumers can override. */
-    --step-progress-flex-default:       0 1 18rem;
-    --step-progress-min-width-default:  10rem;
+    --step-progress-flex:       0 1 18rem;
+    --step-progress-min-width:  10rem;
   }
 
   :scope {
     display: flex;
     flex-direction: column;
-    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));
+    gap: var(--step-progress-gap);
+    flex: var(--step-progress-flex);
+    min-width: var(--step-progress-min-width);
   }
 
   /* 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, var(--step-progress-caption-fg-default));
-    font-size: var(--step-progress-caption-size, var(--step-progress-caption-size-default));
+    color: var(--step-progress-caption-fg);
+    font-size: var(--step-progress-caption-size);
     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, var(--step-progress-track-gap-default));
+    gap: var(--step-progress-track-gap);
   }
 
   [slot="track"] > span {
     flex: 1;
-    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));
+    height: var(--step-progress-dash-h);
+    border-radius: var(--step-progress-dash-radius);
+    background: var(--step-progress-dash-bg);
     transition: background var(--a-duration-fast, 150ms) var(--a-easing, ease);
   }
 
   [slot="track"] > span[data-active] {
-    background: var(--step-progress-dash-bg-active, var(--step-progress-dash-bg-active-default));
+    background: var(--step-progress-dash-bg-active);
   }
 }

package/components/stepper/stepper.css

@@ -12,41 +12,41 @@
 @scope (stepper-ui) {
   :where(:scope) {
     /* ── Circle ── */
-    --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;
+    --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;
 
     /* ── 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-default: var(--stepper-item-gap-sm, …)` resolves
+       `--stepper-item-gap-sm: var(--stepper-item-gap-sm, …)` resolves
        to invalid (cycle), which silently breaks any calc() that
        consumes it. */
-    --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;
+    --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;
   }
 
   :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-default:         var(--stepper-gap-sm, var(--a-space-2));
+    --stepper-item-gap-sm:         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, var(--stepper-item-gap-sm-default)));
+    padding-top: calc(var(--stepper-item-size) + var(--stepper-item-gap-sm));
     padding-left: 0;
     padding-bottom: 0;
   }

package/components/stream/stream.css

@@ -1,20 +1,20 @@
 @scope (stream-ui) {
   :where(:scope) {
-    --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;
+    --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;
   }
 
   :scope {
     box-sizing: border-box;
     display: block;
-    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));
+    color: var(--stream-fg);
+    font-family: var(--stream-font-family);
+    font-size: var(--stream-font-size);
+    line-height: var(--stream-leading);
     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, var(--stream-cursor-color-default));
-    animation: _stream-blink var(--stream-blink-duration, var(--stream-blink-duration-default)) step-end infinite;
+    color: var(--stream-cursor-color);
+    animation: _stream-blink var(--stream-blink-duration) step-end infinite;
     margin-left: 1px;
   }
 

package/components/swatch/swatch.css

@@ -1,55 +1,55 @@
 @scope (swatch-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --swatch-gap-default:               var(--a-space-2);
+    --swatch-gap:               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-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);
+    --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);
 
     /* ── 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-default:             var(--a-data-0);
-    --swatch-label-fg-default:          var(--a-fg-subtle);
+    --swatch-color:             var(--a-data-0);
+    --swatch-label-fg:          var(--a-fg-subtle);
 
     /* ── Shape ── */
-    --swatch-radius-block-default:      var(--a-radius-sm);
-    --swatch-radius-square-default:     var(--a-radius-sm);
+    --swatch-radius-block:      var(--a-radius-sm);
+    --swatch-radius-square:     var(--a-radius-sm);
 
     /* ── Block-shape extras (token-scale) ── */
-    --swatch-block-shadow-default:      inset 0 0 0 1px color-mix(in oklab, currentColor 8%, transparent);
+    --swatch-block-shadow:      inset 0 0 0 1px color-mix(in oklab, currentColor 8%, transparent);
 
     /* ── Typography ── */
-    --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);
+    --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);
 
     /* ── Badge ── */
-    --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);
+    --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);
 
     /* ── Copy button ── */
-    --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);
+    --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);
 
     /* ── Selectable ring ── */
-    --swatch-select-ring-default:       var(--a-accent);
-    --swatch-select-ring-width-default: 2px;
+    --swatch-select-ring:       var(--a-accent);
+    --swatch-select-ring-width: 2px;
   }
 
   :scope {
@@ -59,10 +59,10 @@
     box-sizing: border-box;
     display: inline-flex;
     align-items: center;
-    gap: var(--swatch-gap, var(--swatch-gap-default));
+    gap: var(--swatch-gap);
     min-width: 0;
-    color: var(--swatch-label-fg, var(--swatch-label-fg-default));
-    font-size: var(--swatch-label-size, var(--swatch-label-size-default));
+    color: var(--swatch-label-fg);
+    font-size: var(--swatch-label-size);
     line-height: 1.2;
     vertical-align: baseline;
   }
@@ -72,7 +72,7 @@
     box-sizing: border-box;
     display: block;
     flex-shrink: 0;
-    background: var(--swatch-color, var(--swatch-color-default));
+    background: var(--swatch-color);
     line-height: 0;
   }
 
@@ -87,31 +87,31 @@
 
   /* ═══════ Shape: dot ═══════ */
   :scope[shape="dot"] > [data-tile] {
-    width: var(--_size, var(--swatch-tile-md, var(--swatch-tile-md-default)));
-    height: var(--_size, var(--swatch-tile-md, var(--swatch-tile-md-default)));
+    width: var(--_size, var(--swatch-tile-md));
+    height: var(--_size, var(--swatch-tile-md));
     border-radius: 50%;
   }
 
   /* ═══════ Shape: square ═══════ */
   :scope[shape="square"] > [data-tile] {
-    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));
+    width: var(--_size, var(--swatch-tile-md));
+    height: var(--_size, var(--swatch-tile-md));
+    border-radius: var(--swatch-radius-square);
   }
 
   /* ═══════ Shape: line (solid hairline) ═══════ */
   :scope[shape="line"] > [data-tile] {
-    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));
+    width: var(--swatch-line-length);
+    height: var(--swatch-line-thickness);
+    border-radius: var(--swatch-line-thickness);
   }
 
   /* ═══════ Shape: dashed (dashed hairline) ═══════ */
   :scope[shape="dashed"] > [data-tile] {
-    width: var(--swatch-line-length, var(--swatch-line-length-default));
-    height: var(--swatch-line-thickness, var(--swatch-line-thickness-default));
+    width: var(--swatch-line-length);
+    height: var(--swatch-line-thickness);
     background: transparent;
-    border-top: var(--swatch-line-thickness, var(--swatch-line-thickness-default)) dashed var(--swatch-color, var(--swatch-color-default));
+    border-top: var(--swatch-line-thickness) dashed var(--swatch-color);
   }
 
   /* ═══════ Shape: block (token-scale tile) ═══════
@@ -126,18 +126,18 @@
 
   :scope[shape="block"] > [data-tile] {
     width: 100%;
-    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));
+    height: var(--_block-h, var(--swatch-tile-lg));
+    border-radius: var(--swatch-radius-block);
+    box-shadow: var(--swatch-block-shadow);
   }
 
   :scope[shape="block"] > [data-label] {
     text-align: center;
     font-family: var(--a-font-family-code);
-    font-size: var(--swatch-label-step-size, var(--swatch-label-step-size-default));
+    font-size: var(--swatch-label-step-size);
     font-variant-numeric: tabular-nums;
     color: var(--a-fg-muted);
-    margin-block-start: var(--swatch-label-step-mt, var(--swatch-label-step-mt-default));
+    margin-block-start: var(--swatch-label-step-mt);
     white-space: nowrap;
   }
 
@@ -164,7 +164,7 @@
     position: absolute;
     top: 0;
     inset-inline: 0;
-    height: var(--_block-h, var(--swatch-tile-lg, var(--swatch-tile-lg-default)));
+    height: var(--_block-h, var(--swatch-tile-lg));
     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, var(--swatch-tile-sm-default));
-    --_block-h: calc(var(--swatch-tile-lg, var(--swatch-tile-lg-default)) * 0.6);
+    --_size: var(--swatch-tile-sm);
+    --_block-h: calc(var(--swatch-tile-lg) * 0.6);
   }
   :scope[size="md"] {
-    --_size: var(--swatch-tile-md, var(--swatch-tile-md-default));
-    --_block-h: calc(var(--swatch-tile-lg, var(--swatch-tile-lg-default)) * 0.75);
+    --_size: var(--swatch-tile-md);
+    --_block-h: calc(var(--swatch-tile-lg) * 0.75);
   }
   :scope[size="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));
+    --_size: calc(var(--swatch-tile-md) * 1.4);
+    --_block-h: var(--swatch-tile-lg);
   }
 
   /* ═══════ 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, var(--swatch-detail-fg-default));
-    font-size: var(--swatch-detail-size, var(--swatch-detail-size-default));
+    color: var(--swatch-detail-fg);
+    font-size: var(--swatch-detail-size);
     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, 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));
+    padding: var(--swatch-badge-pad);
+    background: var(--swatch-badge-bg);
+    color: var(--swatch-badge-fg);
+    font-size: var(--swatch-badge-size);
     line-height: 1;
-    border-radius: var(--swatch-badge-radius, var(--swatch-badge-radius-default));
+    border-radius: var(--swatch-badge-radius);
     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, var(--swatch-copy-fg-default));
+    color: var(--swatch-copy-fg);
     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, var(--swatch-select-ring-width-default)) solid var(--swatch-select-ring, var(--swatch-select-ring-default));
+    outline: var(--swatch-select-ring-width) solid var(--swatch-select-ring);
     outline-offset: 1px;
   }
   :scope > [data-copy][hidden] { display: none; }
-  :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)); }
+  :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); }
 
   /* ═══════ 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-width-default)) var(--swatch-select-ring, var(--swatch-select-ring-default));
+    box-shadow: 0 0 0 var(--swatch-select-ring-width) var(--swatch-select-ring);
   }
   :scope[selected] {
-    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));
+    box-shadow: 0 0 0 var(--swatch-select-ring-width) var(--swatch-select-ring);
   }
   :scope[selectable]:hover:not([selected]) {
-    box-shadow: 0 0 0 1px color-mix(in oklab, var(--swatch-select-ring, var(--swatch-select-ring-default)) 50%, transparent);
+    box-shadow: 0 0 0 1px color-mix(in oklab, var(--swatch-select-ring) 50%, transparent);
   }
 }

package/components/swiper/swiper.class.js

@@ -250,21 +250,14 @@ export class UISwiper extends UIElement {
 
   // ── Snap & page helpers ──
   // The column count drives the page/dot math. `[slides-per-view]` (and the
-  // responsive @container rules) set `--swiper-columns-default` on the host /
-  // track per the component-token contract; consumers may override via the
-  // public `--swiper-columns`. We must read the SAME fallback chain the CSS
-  // width calc uses — `var(--swiper-columns, var(--swiper-columns-default))` —
-  // not just the public token. Reading only `--swiper-columns` (unset unless a
-  // consumer overrides) made #getColumns() always fall back to 1, so the dot
-  // count was `total - 1 + 1 = total slides` instead of the real page count
-  // (bug-29: 5 slides at slides-per-view=3 stamped 5 dots, not 3). Regressed by
-  // the 2026-05-24 OD-5 `-default` token sweep, which renamed the CSS side but
-  // not this read site.
+  // responsive @container rules) set `--swiper-columns` on the track; we read
+  // the computed value so the dot count tracks the real per-view count
+  // (bug-29: 5 slides at slides-per-view=3 → 3 dots, not 5). Consumers may
+  // override `--swiper-columns` at any ancestor.
   #getColumns() {
     if (!this.#track) return 1;
     const cs = getComputedStyle(this.#track);
-    const v = cs.getPropertyValue('--swiper-columns').trim()
-           || cs.getPropertyValue('--swiper-columns-default').trim();
+    const v = cs.getPropertyValue('--swiper-columns').trim();
     const n = parseInt(v, 10);
     return Number.isFinite(n) && n > 0 ? n : 1;
   }