@adia-ai/web-components 0.7.3 → 0.7.4

package/components/skip-nav/skip-nav.css

@@ -1,7 +1,7 @@
 @scope (skip-nav-ui) {
   :where(:scope) {
-    --skip-nav-bg-default: var(--a-accent-bg);
-    --skip-nav-fg-default: var(--a-accent-fg);
+    --skip-nav-bg: var(--a-accent-bg);
+    --skip-nav-fg: var(--a-accent-fg);
   }
 
   /* Host renders nothing in flow — pure behavioral wrapper. The inner
@@ -28,8 +28,8 @@
     border: 0;
     /* Visible-state colors set here so the focus rule doesn't have to
        re-set them; UA's default <a> color is overridden either way. */
-    background: var(--skip-nav-bg, var(--skip-nav-bg-default));
-    color: var(--skip-nav-fg, var(--skip-nav-fg-default));
+    background: var(--skip-nav-bg);
+    color: var(--skip-nav-fg);
     text-decoration: none;
     border-radius: var(--a-radius-md);
     font-weight: var(--a-weight-medium);

package/components/slider/slider.css

@@ -7,8 +7,8 @@
        Variables
          W    = track width  (100% of the track element)
          t    = thumb width  (full outer width including internal padding)
-         h    = track height (var(--slider-track-height, var(--slider-track-height-default)))
-         pad  = internal padding on the thumb (var(--slider-thumb-padding, var(--slider-thumb-padding-default)))
+         h    = track height (var(--slider-track-height))
+         pad  = internal padding on the thumb (var(--slider-thumb-padding))
          p    = progress     (0.0 → 1.0, written by JS as --slider-pct)
 
        The thumb consists of two layers:
@@ -44,8 +44,8 @@
        In CSS (percentages relative to W):
 
          left = calc(t/2 + p · (W − t))
-              = calc(var(--slider-thumb-width, var(--slider-thumb-width-default)) / 2
-                     + var(--slider-pct, var(--slider-pct-default)) * (100% - var(--slider-thumb-width, var(--slider-thumb-width-default))))
+              = calc(var(--slider-thumb-width) / 2
+                     + var(--slider-pct) * (100% - var(--slider-thumb-width)))
 
        The element is shifted back by 50% via transform so its
        geometric center lands on the computed point.
@@ -60,54 +60,54 @@
        ═══════════════════════════════════════════════════════════════ */
 
     /* ── Layout ── */
-    --slider-gap-default:               var(--a-space-1);
-    --slider-readout-gap-default:       var(--a-space-0-5);
-    --slider-radius-default:            var(--a-radius-full);
+    --slider-gap:               var(--a-space-1);
+    --slider-readout-gap:       var(--a-space-0-5);
+    --slider-radius:            var(--a-radius-full);
 
     /* Track height scales with the universal [size] attribute
        via --a-toggle-size: 16 sm / 20 md / 24 lg at density=1.
        Override --slider-track-height directly for custom sizes. */
-    --slider-track-height-default:      var(--a-toggle-size);
+    --slider-track-height:      var(--a-toggle-size);
 
     /* Thumb padding: internal breathing room on all sides.
        The visual pill sits pad px away from the container edge. */
-    --slider-thumb-padding-default:     2px;
+    --slider-thumb-padding:     2px;
 
     /* Visual thumb height: track height minus top and bottom padding. */
-    --slider-thumb-visual-h-default:    calc(var(--slider-track-height, var(--slider-track-height-default)) - 2 * var(--slider-thumb-padding, var(--slider-thumb-padding-default)));
+    --slider-thumb-visual-h:    calc(var(--slider-track-height) - 2 * var(--slider-thumb-padding));
 
     /* Visual thumb width: 2×1 pill ratio. */
-    --slider-thumb-visual-w-default:    calc(var(--slider-thumb-visual-h, var(--slider-thumb-visual-h-default)) * 2);
+    --slider-thumb-visual-w:    calc(var(--slider-thumb-visual-h) * 2);
 
     /* Container / geometry thumb width: visual width plus left and
        right padding.  This is the width used in the travel equation. */
-    --slider-thumb-width-default:       calc(var(--slider-thumb-visual-w, var(--slider-thumb-visual-w-default)) + 2 * var(--slider-thumb-padding, var(--slider-thumb-padding-default)));
+    --slider-thumb-width:       calc(var(--slider-thumb-visual-w) + 2 * var(--slider-thumb-padding));
 
     /* Progress fraction (0.0 → 1.0) written by JS. */
-    --slider-pct-default:               0;
+    --slider-pct:               0;
 
     /* Dual-thumb progress fractions (0.0 → 1.0) written by JS when [dual]. */
-    --slider-pct-lower-default:         0;
-    --slider-pct-upper-default:         1;
+    --slider-pct-lower:         0;
+    --slider-pct-upper:         1;
 
     /* ── Colors ──
        Track: dim recessed surface  |  Fill: primary  |  Thumb: white chrome */
-    --slider-track-bg-default:          var(--a-bg-muted);
-    --slider-fill-bg-default:           var(--a-primary-bg);
-    --slider-thumb-bg-default:          var(--a-chrome-light);
-    --slider-fill-bg-disabled-default:  var(--a-canvas-1-scrim);
-    --slider-thumb-bg-disabled-default: var(--a-canvas-2-scrim);
+    --slider-track-bg:          var(--a-bg-muted);
+    --slider-fill-bg:           var(--a-primary-bg);
+    --slider-thumb-bg:          var(--a-chrome-light);
+    --slider-fill-bg-disabled:  var(--a-canvas-1-scrim);
+    --slider-thumb-bg-disabled: var(--a-canvas-2-scrim);
 
     /* ── Typography ── */
-    --slider-font-size-default:         var(--a-ui-size);
-    --slider-value-weight-default:      var(--a-weight-bold);
+    --slider-font-size:         var(--a-ui-size);
+    --slider-value-weight:      var(--a-weight-bold);
 
     /* ── Transition ── */
-    --slider-duration-default:          var(--a-duration-fast);
-    --slider-easing-default:            var(--a-easing);
+    --slider-duration:          var(--a-duration-fast);
+    --slider-easing:            var(--a-easing);
 
     /* ── Focus ── */
-    --slider-focus-ring-default:        var(--a-focus-ring);
+    --slider-focus-ring:        var(--a-focus-ring);
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
 }
 
@@ -116,7 +116,7 @@
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    gap: var(--slider-gap, var(--slider-gap-default));
+    gap: var(--slider-gap);
   }
 
   :scope[data-direction="row"] {
@@ -130,7 +130,7 @@
     display: flex;
     align-items: baseline;
     justify-content: space-between;
-    font-size: var(--slider-font-size, var(--slider-font-size-default));
+    font-size: var(--slider-font-size);
   }
 
   [slot="label"] {
@@ -140,12 +140,12 @@
   [slot="readout"] {
     display: flex;
     align-items: baseline;
-    gap: var(--slider-readout-gap, var(--slider-readout-gap-default));
+    gap: var(--slider-readout-gap);
   }
 
   [slot="value"] {
     color: var(--a-fg);
-    font-weight: var(--slider-value-weight, var(--slider-value-weight-default));
+    font-weight: var(--slider-value-weight);
     font-variant-numeric: tabular-nums;
   }
 
@@ -156,9 +156,9 @@
   /* Track: the reference frame W for all geometry calculations. */
   [slot="track"] {
     position: relative;
-    height: var(--slider-track-height, var(--slider-track-height-default));
-    border-radius: var(--slider-radius, var(--slider-radius-default));
-    background: var(--slider-track-bg, var(--slider-track-bg-default));
+    height: var(--slider-track-height);
+    border-radius: var(--slider-radius);
+    background: var(--slider-track-bg);
     cursor: pointer;
     touch-action: none;
   }
@@ -170,10 +170,10 @@
     left: 0;
     height: 100%;
     border-radius: inherit;
-    background: var(--slider-fill-bg, var(--slider-fill-bg-default));
+    background: var(--slider-fill-bg);
     pointer-events: none;
-    width: calc(var(--slider-thumb-width, var(--slider-thumb-width-default))
-                + var(--slider-pct, var(--slider-pct-default)) * (100% - var(--slider-thumb-width, var(--slider-thumb-width-default))));
+    width: calc(var(--slider-thumb-width)
+                + var(--slider-pct) * (100% - var(--slider-thumb-width)));
   }
 
   /* Dual-thumb geometry: each thumb has an EFFECTIVE travel of (W − 2t),
@@ -205,12 +205,12 @@
          fill_width = 72 + 0.6·644 = 458.4
          fill_right = 587.2                              (= upper visual right) */
   :scope[dual] [slot="fill"] {
-    left: calc(var(--slider-pct-lower, var(--slider-pct-lower-default))
-               * (100% - 2 * var(--slider-thumb-width, var(--slider-thumb-width-default))));
-    width: calc(2 * var(--slider-thumb-width, var(--slider-thumb-width-default))
-                + (var(--slider-pct-upper, var(--slider-pct-upper-default))
-                   - var(--slider-pct-lower, var(--slider-pct-lower-default)))
-                * (100% - 2 * var(--slider-thumb-width, var(--slider-thumb-width-default))));
+    left: calc(var(--slider-pct-lower)
+               * (100% - 2 * var(--slider-thumb-width)));
+    width: calc(2 * var(--slider-thumb-width)
+                + (var(--slider-pct-upper)
+                   - var(--slider-pct-lower))
+                * (100% - 2 * var(--slider-thumb-width)));
   }
 
   /* Thumb CONTAINER: full track height, geometry width.
@@ -219,18 +219,18 @@
   [slot="thumb"] {
     position: absolute;
     top: 50%;
-    left: calc(var(--slider-thumb-width, var(--slider-thumb-width-default)) / 2
-               + var(--slider-pct, var(--slider-pct-default)) * (100% - var(--slider-thumb-width, var(--slider-thumb-width-default))));
-    width: var(--slider-thumb-width, var(--slider-thumb-width-default));
-    height: var(--slider-track-height, var(--slider-track-height-default));
-    border-radius: var(--slider-radius, var(--slider-radius-default));
+    left: calc(var(--slider-thumb-width) / 2
+               + var(--slider-pct) * (100% - var(--slider-thumb-width)));
+    width: var(--slider-thumb-width);
+    height: var(--slider-track-height);
+    border-radius: var(--slider-radius);
     background: transparent;
     transform: translate(-50%, -50%);
     cursor: grab;
     touch-action: none;
     transition:
-      left     var(--slider-duration, var(--slider-duration-default)) var(--slider-easing, var(--slider-easing-default)),
-      transform var(--slider-duration, var(--slider-duration-default)) var(--slider-easing, var(--slider-easing-default));
+      left     var(--slider-duration) var(--slider-easing),
+      transform var(--slider-duration) var(--slider-easing);
     z-index: 1;
   }
 
@@ -241,15 +241,15 @@
   [slot="thumb"]::before {
     content: '';
     position: absolute;
-    inset: var(--slider-thumb-padding, var(--slider-thumb-padding-default));
+    inset: var(--slider-thumb-padding);
     border-radius: inherit;
-    background: var(--slider-thumb-bg, var(--slider-thumb-bg-default));
+    background: var(--slider-thumb-bg);
   }
 
   /* During drag: kill the left transition so the thumb follows
      the pointer frame-by-frame without CSS interpolation lag. */
   :scope[data-dragging] [slot="thumb"] {
-    transition: transform var(--slider-duration, var(--slider-duration-default)) var(--slider-easing, var(--slider-easing-default));
+    transition: transform var(--slider-duration) var(--slider-easing);
   }
 
   /* Dual-mode thumb positions: each thumb travels along (W − 2t) so they
@@ -262,15 +262,15 @@
      z-index nudges keep both thumbs paintable at boundary positions.
      The "active" (currently-dragging) thumb lifts above its sibling. */
   :scope[dual] [slot="thumb"][data-thumb="lower"] {
-    left: calc(var(--slider-thumb-width, var(--slider-thumb-width-default)) / 2
-               + var(--slider-pct-lower, var(--slider-pct-lower-default))
-               * (100% - 2 * var(--slider-thumb-width, var(--slider-thumb-width-default))));
+    left: calc(var(--slider-thumb-width) / 2
+               + var(--slider-pct-lower)
+               * (100% - 2 * var(--slider-thumb-width)));
     z-index: 2;
   }
   :scope[dual] [slot="thumb"][data-thumb="upper"] {
-    left: calc(var(--slider-thumb-width, var(--slider-thumb-width-default)) * 1.5
-               + var(--slider-pct-upper, var(--slider-pct-upper-default))
-               * (100% - 2 * var(--slider-thumb-width, var(--slider-thumb-width-default))));
+    left: calc(var(--slider-thumb-width) * 1.5
+               + var(--slider-pct-upper)
+               * (100% - 2 * var(--slider-thumb-width)));
     z-index: 3;
   }
   /* When the user is dragging a thumb, lift it above its sibling so the
@@ -287,7 +287,7 @@
   :scope[dual] [slot="value-lower"],
   :scope[dual] [slot="value-upper"] {
     color: var(--a-fg);
-    font-weight: var(--slider-value-weight, var(--slider-value-weight-default));
+    font-weight: var(--slider-value-weight);
     font-variant-numeric: tabular-nums;
   }
 
@@ -301,13 +301,13 @@
   }
 
   :scope:focus-visible { outline: none; }
-  :scope:focus-visible [slot="thumb"] { box-shadow: var(--slider-focus-ring, var(--slider-focus-ring-default)); }
+  :scope:focus-visible [slot="thumb"] { box-shadow: var(--slider-focus-ring); }
 
   /* Disabled */
   :scope[disabled] [slot="track"] { cursor: not-allowed; }
-  :scope[disabled] [slot="fill"]  { background: var(--slider-fill-bg-disabled, var(--slider-fill-bg-disabled-default)); }
+  :scope[disabled] [slot="fill"]  { background: var(--slider-fill-bg-disabled); }
   :scope[disabled] [slot="thumb"]::before {
-    background: var(--slider-thumb-bg-disabled, var(--slider-thumb-bg-disabled-default));
+    background: var(--slider-thumb-bg-disabled);
   }
 
   /* ── Hint (§184, v0.5.5, FEEDBACK-08 §7) ── */

package/components/spinner/spinner.css

@@ -5,49 +5,49 @@
      re-assigning --spinner-color. Stroke is 2px (raw px allowed for
      borders 1-2px per component-token-contract §"Forbidden patterns"). */
   :where(:scope) {
-    --spinner-size-default:           1rem;                       /* icon-ui md */
-    --spinner-color-default:          currentColor;
-    --spinner-stroke-default:         2px;
+    --spinner-size:           1rem;                       /* icon-ui md */
+    --spinner-color:          currentColor;
+    --spinner-stroke:         2px;
     /* Rotational cadence — interaction-duration tokens (`--a-duration-*`,
        120-300 ms) are tuned for hover/focus transitions; a full spinner
        revolution at 300 ms reads as a frantic blur. Canonical loader
        cadence is ~0.8 s per revolution (smooth, perceptible motion). */
-    --spinner-duration-default:       0.8s;
-    --spinner-track-opacity-default:  0.25;
-    --spinner-dot-size-default:       calc(var(--spinner-size, var(--spinner-size-default)) / 4);
-    --spinner-dot-gap-default:        calc(var(--spinner-size, var(--spinner-size-default)) / 8);
+    --spinner-duration:       0.8s;
+    --spinner-track-opacity:  0.25;
+    --spinner-dot-size:       calc(var(--spinner-size) / 4);
+    --spinner-dot-gap:        calc(var(--spinner-size) / 8);
     /* Knight-rider variant — horizontal track with a sliding thumb.
        Track width is a separate scale from the round-spinner --spinner-size
        (Knight reads as a bar, not a glyph). Track height defaults to the
        spinner-stroke for visual continuity with arc/ring. Thumb width
        expressed as a 0-1 ratio of the track so the keyframe math is
        single-variable. */
-    --spinner-bar-track-width-default:  4rem;
-    --spinner-bar-track-height-default: var(--spinner-stroke, var(--spinner-stroke-default));
-    --spinner-bar-thumb-ratio-default:  0.3;
+    --spinner-bar-track-width:  4rem;
+    --spinner-bar-track-height: var(--spinner-stroke);
+    --spinner-bar-thumb-ratio:  0.3;
   }
 
   /* ── Block 2 — BASE ────────────────────────────────────────────── */
   :scope {
     box-sizing: border-box;
     display: inline-block;
-    width:  var(--spinner-size, var(--spinner-size-default));
-    height: var(--spinner-size, var(--spinner-size-default));
-    color:  var(--spinner-color, var(--spinner-color-default));
+    width:  var(--spinner-size);
+    height: var(--spinner-size);
+    color:  var(--spinner-color);
     vertical-align: middle;
     flex-shrink: 0;
   }
 
   /* ── Size ladder (mirrors icon-ui's local rem declarations) ─────── */
-  :scope[size="sm"]  { --spinner-size-default: 0.875rem; }   /* 14px */
-  :scope[size="md"]  { --spinner-size-default: 1rem; }       /* 16px */
-  :scope[size="lg"]  { --spinner-size-default: 1.25rem; }    /* 20px */
+  :scope[size="sm"]  { --spinner-size: 0.875rem; }   /* 14px */
+  :scope[size="md"]  { --spinner-size: 1rem; }       /* 16px */
+  :scope[size="lg"]  { --spinner-size: 1.25rem; }    /* 20px */
 
   /* ── Tones (override --spinner-color token) ────────────────────── */
-  :scope[tone="current"] { --spinner-color-default: currentColor; }
-  :scope[tone="subtle"]  { --spinner-color-default: var(--a-fg-subtle); }
-  :scope[tone="accent"]  { --spinner-color-default: var(--a-accent-strong); }
-  :scope[tone="inverse"] { --spinner-color-default: var(--a-chrome-light); }
+  :scope[tone="current"] { --spinner-color: currentColor; }
+  :scope[tone="subtle"]  { --spinner-color: var(--a-fg-subtle); }
+  :scope[tone="accent"]  { --spinner-color: var(--a-accent-strong); }
+  :scope[tone="inverse"] { --spinner-color: var(--a-chrome-light); }
 
   /* ── Variant: ARC (default) — rotating quarter-circle border ───── */
   :scope[variant="arc"]::before,
@@ -58,9 +58,9 @@
     width: 100%;
     height: 100%;
     border-radius: 50%;
-    border: var(--spinner-stroke, var(--spinner-stroke-default)) solid;
+    border: var(--spinner-stroke) solid;
     border-color: currentColor transparent transparent transparent;
-    animation: spinner-ui-rotate var(--spinner-duration, var(--spinner-duration-default)) linear infinite;
+    animation: spinner-ui-rotate var(--spinner-duration) linear infinite;
   }
 
   /* ── Variant: RING — full ring with one rotating colored segment ── */
@@ -71,10 +71,10 @@
     width: 100%;
     height: 100%;
     border-radius: 50%;
-    border: var(--spinner-stroke, var(--spinner-stroke-default)) solid;
-    border-color: color-mix(in oklch, currentColor calc(var(--spinner-track-opacity, var(--spinner-track-opacity-default)) * 100%), transparent);
+    border: var(--spinner-stroke) solid;
+    border-color: color-mix(in oklch, currentColor calc(var(--spinner-track-opacity) * 100%), transparent);
     border-top-color: currentColor;
-    animation: spinner-ui-rotate var(--spinner-duration, var(--spinner-duration-default)) linear infinite;
+    animation: spinner-ui-rotate var(--spinner-duration) linear infinite;
   }
 
   /* ── Variant: DOTS — three bouncing dots ─────────────────────────
@@ -94,26 +94,26 @@
     align-items: center;
     justify-content: center;
     width: auto;             /* dots row is wider than tall */
-    min-width: var(--spinner-size, var(--spinner-size-default));
-    gap: var(--spinner-dot-gap, var(--spinner-dot-gap-default));
+    min-width: var(--spinner-size);
+    gap: var(--spinner-dot-gap);
   }
 
   :scope[variant="dots"] > [data-spinner-dot] {
-    width:  var(--spinner-dot-size, var(--spinner-dot-size-default));
-    height: var(--spinner-dot-size, var(--spinner-dot-size-default));
+    width:  var(--spinner-dot-size);
+    height: var(--spinner-dot-size);
     border-radius: 50%;
     background: currentColor;
-    animation: spinner-ui-bounce var(--spinner-duration, var(--spinner-duration-default)) ease-in-out infinite;
+    animation: spinner-ui-bounce var(--spinner-duration) ease-in-out infinite;
   }
   /* Stagger each dot so the row reads as a wave left → right.
      Three equal slices of one revolution (0, T/3, 2T/3) give the
      classic three-dot loading rhythm. */
   :scope[variant="dots"] > [data-spinner-dot="1"] { animation-delay: 0s; }
   :scope[variant="dots"] > [data-spinner-dot="2"] {
-    animation-delay: calc(var(--spinner-duration, var(--spinner-duration-default)) / 3);
+    animation-delay: calc(var(--spinner-duration) / 3);
   }
   :scope[variant="dots"] > [data-spinner-dot="3"] {
-    animation-delay: calc(var(--spinner-duration, var(--spinner-duration-default)) * 2 / 3);
+    animation-delay: calc(var(--spinner-duration) * 2 / 3);
   }
 
   /* ── Variant: KNIGHT — knight-rider sliding bar ──────────────────
@@ -126,11 +126,11 @@
      ratio 0.3 → translate end = 233.33% (of thumb width). */
   :scope[variant="knight"] {
     display: inline-block;
-    width: var(--spinner-bar-track-width, var(--spinner-bar-track-width-default));
-    height: var(--spinner-bar-track-height, var(--spinner-bar-track-height-default));
+    width: var(--spinner-bar-track-width);
+    height: var(--spinner-bar-track-height);
     background: color-mix(
       in oklch,
-      currentColor calc(var(--spinner-track-opacity, var(--spinner-track-opacity-default)) * 100%),
+      currentColor calc(var(--spinner-track-opacity) * 100%),
       transparent
     );
     border-radius: 9999px;
@@ -141,11 +141,11 @@
     content: "";
     position: absolute;
     inset: 0 auto 0 0;       /* top:0; right:auto; bottom:0; left:0 */
-    width: calc(var(--spinner-bar-thumb-ratio, var(--spinner-bar-thumb-ratio-default)) * 100%);
+    width: calc(var(--spinner-bar-thumb-ratio) * 100%);
     background: currentColor;
     border-radius: inherit;
     animation: spinner-ui-knight
-      var(--spinner-duration, var(--spinner-duration-default))
+      var(--spinner-duration)
       ease-in-out infinite alternate;
   }
 
@@ -186,12 +186,12 @@
        ::before paint the ellipsis fallback. */
     :scope[variant="dots"] > [data-spinner-dot] { display: none; }
     :scope[variant="dots"] {
-      width: var(--spinner-size, var(--spinner-size-default));   /* shrink back to a square in reduced mode */
+      width: var(--spinner-size);   /* shrink back to a square in reduced mode */
     }
     /* Knight-rider — hide the sliding thumb; the host's ::before
        above repaints as the ellipsis fallback. */
     :scope[variant="knight"] {
-      width: var(--spinner-size, var(--spinner-size-default));
+      width: var(--spinner-size);
       background: transparent;
     }
   }
@@ -215,7 +215,7 @@
   @keyframes spinner-ui-knight {
     from { transform: translateX(0); }
     to   { transform: translateX(
-      calc((1 / var(--spinner-bar-thumb-ratio, var(--spinner-bar-thumb-ratio-default)) - 1) * 100%)
+      calc((1 / var(--spinner-bar-thumb-ratio) - 1) * 100%)
     ); }
   }
 }

package/components/spinner/spinner.test.js

@@ -182,20 +182,18 @@ describe('spinner-ui — CSS source contract', () => {
     }
   });
 
-  it('size="sm" / "md" / "lg" all override --spinner-size-default', () => {
-    // The two-token convention (--{prop}-default for defaults +
-    // var(--{prop}, var(--{prop}-default)) at use sites) means size
-    // variants flip the -default token; consumer overrides write to
-    // the bare --{prop} which wins via the var() fallback chain.
-    expect(SPINNER_CSS).toMatch(/:scope\[size="sm"\][^}]*--spinner-size-default:\s*0\.875rem/);
-    expect(SPINNER_CSS).toMatch(/:scope\[size="md"\][^}]*--spinner-size-default:\s*1rem/);
-    expect(SPINNER_CSS).toMatch(/:scope\[size="lg"\][^}]*--spinner-size-default:\s*1\.25rem/);
+  it('size="sm" / "md" / "lg" all set --spinner-size', () => {
+    // Size variants re-point the active --spinner-size token; consumers
+    // override the same un-suffixed token on the element (or @layer overrides).
+    expect(SPINNER_CSS).toMatch(/:scope\[size="sm"\][^}]*--spinner-size:\s*0\.875rem/);
+    expect(SPINNER_CSS).toMatch(/:scope\[size="md"\][^}]*--spinner-size:\s*1rem/);
+    expect(SPINNER_CSS).toMatch(/:scope\[size="lg"\][^}]*--spinner-size:\s*1\.25rem/);
   });
 
-  it('tone="subtle" / "accent" / "inverse" override --spinner-color-default via semantic tokens', () => {
-    expect(SPINNER_CSS).toMatch(/:scope\[tone="subtle"\][^}]*--spinner-color-default:\s*var\(--a-fg-subtle\)/);
-    expect(SPINNER_CSS).toMatch(/:scope\[tone="accent"\][^}]*--spinner-color-default:\s*var\(--a-accent-strong\)/);
-    expect(SPINNER_CSS).toMatch(/:scope\[tone="inverse"\][^}]*--spinner-color-default:\s*var\(--a-chrome-light\)/);
+  it('tone="subtle" / "accent" / "inverse" set --spinner-color via semantic tokens', () => {
+    expect(SPINNER_CSS).toMatch(/:scope\[tone="subtle"\][^}]*--spinner-color:\s*var\(--a-fg-subtle\)/);
+    expect(SPINNER_CSS).toMatch(/:scope\[tone="accent"\][^}]*--spinner-color:\s*var\(--a-accent-strong\)/);
+    expect(SPINNER_CSS).toMatch(/:scope\[tone="inverse"\][^}]*--spinner-color:\s*var\(--a-chrome-light\)/);
   });
 
   it('arc variant uses a rotating quarter-circle border on ::before', () => {

package/components/stack/stack.css

@@ -1,12 +1,12 @@
 @scope (stack-ui) {
   :where(:scope) {
-    --stack-align-default: center;
+    --stack-align: center;
   }
 
   :scope {
     box-sizing: border-box;
     display: grid;
-    place-items: var(--stack-align, var(--stack-align-default));
+    place-items: var(--stack-align);
     /* Universal [padding] / [margin] opt-in — see tokens.css for scale. */
     padding: var(--a-padding, 0);
     margin: var(--a-margin, 0);
@@ -19,13 +19,13 @@
   }
 
   /* Alignment */
-  :scope[align="center"]       { --stack-align-default: center; }
-  :scope[align="top-left"]     { --stack-align-default: start start; }
-  :scope[align="top-right"]    { --stack-align-default: start end; }
-  :scope[align="bottom-left"]  { --stack-align-default: end start; }
-  :scope[align="bottom-right"] { --stack-align-default: end end; }
-  :scope[align="top"]          { --stack-align-default: start center; }
-  :scope[align="bottom"]       { --stack-align-default: end center; }
-  :scope[align="left"]         { --stack-align-default: center start; }
-  :scope[align="right"]        { --stack-align-default: center end; }
+  :scope[align="center"]       { --stack-align: center; }
+  :scope[align="top-left"]     { --stack-align: start start; }
+  :scope[align="top-right"]    { --stack-align: start end; }
+  :scope[align="bottom-left"]  { --stack-align: end start; }
+  :scope[align="bottom-right"] { --stack-align: end end; }
+  :scope[align="top"]          { --stack-align: start center; }
+  :scope[align="bottom"]       { --stack-align: end center; }
+  :scope[align="left"]         { --stack-align: center start; }
+  :scope[align="right"]        { --stack-align: center end; }
 }