@adia-ai/web-components 0.7.3 → 0.7.5

package/components/preview/preview.css

@@ -13,23 +13,23 @@
 @scope (preview-ui) {
   /* ── Block 1 — TOKENS ── */
   :where(:scope) {
-    --preview-border-default:       1px solid var(--a-border-subtle);
-    --preview-radius-default:       var(--a-radius-lg);
-    --preview-render-bg-default:    var(--a-canvas-1);
-    --preview-render-pad-default:   var(--a-space-6);
-    --preview-render-gap-default:   var(--a-space-3);
+    --preview-border:       1px solid var(--a-border-subtle);
+    --preview-radius:       var(--a-radius-lg);
+    --preview-render-bg:    var(--a-canvas-1);
+    --preview-render-pad:   var(--a-space-6);
+    --preview-render-gap:   var(--a-space-3);
     /* split column floor — below this the grid wraps to a single column
        (responsive without container-type; see ADR note in css-patterns). */
-    --preview-split-min-default:    20rem;
+    --preview-split-min:    20rem;
   }
 
   /* ── Block 2 — BASE ── */
   :scope {
     display: block;
-    border: var(--preview-border, var(--preview-border-default));
-    border-radius: var(--preview-radius, var(--preview-radius-default));
+    border: var(--preview-border);
+    border-radius: var(--preview-radius);
     overflow: hidden;
-    background: var(--preview-render-bg, var(--preview-render-bg-default));
+    background: var(--preview-render-bg);
   }
 
   /* Render stage — wraps live demo nodes; flex row so multiple sibling
@@ -49,9 +49,9 @@
     display: flex;
     flex-direction: column;
     align-items: stretch;
-    gap: var(--preview-render-gap, var(--preview-render-gap-default));
-    padding: var(--preview-render-pad, var(--preview-render-pad-default));
-    background: var(--preview-render-bg, var(--preview-render-bg-default));
+    gap: var(--preview-render-gap);
+    padding: var(--preview-render-pad);
+    background: var(--preview-render-bg);
     overflow-x: auto;
   }
   /* Lone text-flow atoms shouldn't span the whole stage — keep them
@@ -78,7 +78,7 @@
   /* Code pane — divider line between panes; flatten the nested code-ui
      chrome so the preview frame owns the outer border + radius. */
   [data-preview-code] {
-    border-block-start: var(--preview-border, var(--preview-border-default));
+    border-block-start: var(--preview-border);
     min-width: 0; /* allow the code-ui to shrink in split grid */
   }
   [data-preview-code] code-ui {
@@ -91,7 +91,7 @@
   /* code-first — divider moves to the bottom of the (now-leading) code pane */
   :scope[code-first] [data-preview-code] {
     border-block-start: none;
-    border-block-end: var(--preview-border, var(--preview-border-default));
+    border-block-end: var(--preview-border);
   }
 
   /* Stacked layout — render above code. This is the BASE behaviour (above), so
@@ -109,11 +109,11 @@
      reverts to the stacked top-border via the base rule above. */
   :scope[layout="split"] {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--preview-split-min, var(--preview-split-min-default))), 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--preview-split-min)), 1fr));
   }
   :scope[layout="split"] [data-preview-code] {
     border-block-start: none;
-    border-inline-start: var(--preview-border, var(--preview-border-default));
+    border-inline-start: var(--preview-border);
     /* Stretch code-ui to the grid row height — the render side is often
        taller, so a short snippet would otherwise leave an empty code surface
        below it (same fill as rows mode). */
@@ -129,7 +129,7 @@
   @media (max-width: 32rem) {
     :scope[layout="split"] [data-preview-code] {
       border-inline-start: none;
-      border-block-start: var(--preview-border, var(--preview-border-default));
+      border-block-start: var(--preview-border);
     }
   }
 
@@ -147,7 +147,7 @@
     align-items: stretch;
   }
   :scope[rows] [data-preview-row] + [data-preview-row] {
-    border-block-start: var(--preview-border, var(--preview-border-default));
+    border-block-start: var(--preview-border);
   }
   /* In rows mode the render/code panes butt horizontally — divider is the
      inline-start border on the code cell, not the stacked top-border. The
@@ -156,7 +156,7 @@
      leaving empty space below a short snippet. */
   :scope[rows] [data-preview-row] > [data-preview-code] {
     border-block-start: none;
-    border-inline-start: var(--preview-border, var(--preview-border-default));
+    border-inline-start: var(--preview-border);
     display: grid;
   }
   :scope[rows] [data-preview-row] > [data-preview-code] code-ui {
@@ -187,7 +187,7 @@
     }
     :scope[rows] [data-preview-row] > [data-preview-code] {
       border-inline-start: none;
-      border-block-start: var(--preview-border, var(--preview-border-default));
+      border-block-start: var(--preview-border);
     }
   }
   /* Content-driven fallback — a single row whose live sample is wider than the
@@ -198,6 +198,6 @@
   }
   :scope[rows] [data-preview-row][data-stack] > [data-preview-code] {
     border-inline-start: none;
-    border-block-start: var(--preview-border, var(--preview-border-default));
+    border-block-start: var(--preview-border);
   }
 }

package/components/progress/progress.css

@@ -1,18 +1,18 @@
 @scope (progress-ui) {
   :where(:scope) {
     /* -- Tokens -- */
-    --progress-track-default:    var(--a-bg-muted);
-    --progress-fill-default:     var(--a-accent);
-    --progress-height-default:   0.375rem;
-    --progress-radius-default:   var(--a-radius-full);
-    --progress-duration-default: var(--a-duration);
-    --progress-easing-default:   var(--a-easing);
+    --progress-track:    var(--a-bg-muted);
+    --progress-fill:     var(--a-accent);
+    --progress-height:   0.375rem;
+    --progress-radius:   var(--a-radius-full);
+    --progress-duration: var(--a-duration);
+    --progress-easing:   var(--a-easing);
 
     /* -- Indeterminate motion -- */
-    --progress-shimmer-duration-default: 1.5s;
-    --progress-shimmer-easing-default:   ease-in-out;
-    --progress-spin-duration-default:    0.6s;
-    --progress-spin-easing-default:      linear;
+    --progress-shimmer-duration: 1.5s;
+    --progress-shimmer-easing:   ease-in-out;
+    --progress-spin-duration:    0.6s;
+    --progress-spin-easing:      linear;
   }
 
   :scope {
@@ -26,17 +26,17 @@
 
   [slot="track"] {
     width: 100%;
-    height: var(--progress-height, var(--progress-height-default));
-    border-radius: var(--progress-radius, var(--progress-radius-default));
-    background: var(--progress-track, var(--progress-track-default));
+    height: var(--progress-height);
+    border-radius: var(--progress-radius);
+    background: var(--progress-track);
     overflow: hidden;
   }
 
   [slot="fill"] {
     height: 100%;
-    border-radius: var(--progress-radius, var(--progress-radius-default));
-    background: var(--progress-fill, var(--progress-fill-default));
-    transition: width var(--progress-duration, var(--progress-duration-default)) var(--progress-easing, var(--progress-easing-default));
+    border-radius: var(--progress-radius);
+    background: var(--progress-fill);
+    transition: width var(--progress-duration) var(--progress-easing);
 
     /* Enter animation: paint the fill at 0 on first frame, then transition
        to the inline width set by JS — so a freshly-mounted determinate bar
@@ -53,12 +53,12 @@
     width: 100% !important;
     background: linear-gradient(
       90deg,
-      var(--progress-track, var(--progress-track-default)) 0%,
-      var(--progress-fill, var(--progress-fill-default)) 50%,
-      var(--progress-track, var(--progress-track-default)) 100%
+      var(--progress-track) 0%,
+      var(--progress-fill) 50%,
+      var(--progress-track) 100%
     );
     background-size: 200% 100%;
-    animation: progress-shimmer var(--progress-shimmer-duration, var(--progress-shimmer-duration-default)) var(--progress-shimmer-easing, var(--progress-shimmer-easing-default)) infinite;
+    animation: progress-shimmer var(--progress-shimmer-duration) var(--progress-shimmer-easing) infinite;
   }
 
   @keyframes progress-shimmer {
@@ -84,10 +84,10 @@
     display: block;
     width: 100%;
     height: 100%;
-    border: 2px solid var(--progress-fill, var(--progress-fill-default));
+    border: 2px solid var(--progress-fill);
     border-top-color: transparent;
-    border-radius: var(--progress-radius, var(--progress-radius-default));
-    animation: progress-spin var(--progress-spin-duration, var(--progress-spin-duration-default)) var(--progress-spin-easing, var(--progress-spin-easing-default)) infinite;
+    border-radius: var(--progress-radius);
+    animation: progress-spin var(--progress-spin-duration) var(--progress-spin-easing) infinite;
   }
 
   @keyframes progress-spin {

package/components/progress-row/progress-row.css

@@ -3,15 +3,15 @@
     /* ── Tokens ── */
     /* Row-gap between the label/meta row and the bar. Bumped --a-space-1 →
        --a-space-2 so the bar isn't crammed under the label. (bug-42) */
-    --progress-row-gap-default:           var(--a-space-2);
-    --progress-row-column-gap-default:    var(--a-space-2);
-    --progress-row-label-size-default:    var(--a-ui-size);
-    --progress-row-label-fg-default:      var(--a-fg);
-    --progress-row-meta-size-default:     var(--a-ui-sm);
-    --progress-row-meta-fg-default:       var(--a-fg-muted);
+    --progress-row-gap:           var(--a-space-2);
+    --progress-row-column-gap:    var(--a-space-2);
+    --progress-row-label-size:    var(--a-ui-size);
+    --progress-row-label-fg:      var(--a-fg);
+    --progress-row-meta-size:     var(--a-ui-sm);
+    --progress-row-meta-fg:       var(--a-fg-muted);
 
     /* Fill color piped into nested progress-ui via its own token */
-    --progress-row-fill-bg-default:       var(--a-accent-bg);
+    --progress-row-fill-bg:       var(--a-accent-bg);
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
 }
 
@@ -22,15 +22,15 @@
     grid-template-areas:
       "label meta"
       "bar   bar";
-    column-gap: var(--progress-row-column-gap, var(--progress-row-column-gap-default));
-    row-gap: var(--progress-row-gap, var(--progress-row-gap-default));
+    column-gap: var(--progress-row-column-gap);
+    row-gap: var(--progress-row-gap);
     align-items: baseline;
   }
 
   [slot="label"] {
     grid-area: label;
-    font-size: var(--progress-row-label-size, var(--progress-row-label-size-default));
-    color: var(--progress-row-label-fg, var(--progress-row-label-fg-default));
+    font-size: var(--progress-row-label-size);
+    color: var(--progress-row-label-fg);
     line-height: 1.4;
     min-width: 0;
     overflow: hidden;
@@ -40,8 +40,8 @@
 
   [slot="meta"] {
     grid-area: meta;
-    font-size: var(--progress-row-meta-size, var(--progress-row-meta-size-default));
-    color: var(--progress-row-meta-fg, var(--progress-row-meta-fg-default));
+    font-size: var(--progress-row-meta-size);
+    color: var(--progress-row-meta-fg);
     font-variant-numeric: tabular-nums;
     justify-self: end;
     line-height: 1.4;
@@ -50,11 +50,11 @@
   progress-ui {
     grid-area: bar;
     /* Pipe our component token into the nested progress component's token */
-    --progress-fill-bg: var(--progress-row-fill-bg, var(--progress-row-fill-bg-default));
+    --progress-fill-bg: var(--progress-row-fill-bg);
   }
 
   /* Variants — remap own tokens only; the nested progress inherits via --progress-row-fill-bg. */
-  :scope[variant="success"] { --progress-row-fill-bg-default: var(--a-success-bg); }
-  :scope[variant="warning"] { --progress-row-fill-bg-default: var(--a-warning-bg); }
-  :scope[variant="danger"]  { --progress-row-fill-bg-default: var(--a-danger-bg); }
+  :scope[variant="success"] { --progress-row-fill-bg: var(--a-success-bg); }
+  :scope[variant="warning"] { --progress-row-fill-bg: var(--a-warning-bg); }
+  :scope[variant="danger"]  { --progress-row-fill-bg: var(--a-danger-bg); }
 }

package/components/qr-code/qr-code.css

@@ -4,8 +4,8 @@
 
 @scope (qr-code-ui) {
   :where(:scope) {
-    --qr-code-fg-default: currentColor;
-    --qr-code-bg-default: transparent;
+    --qr-code-fg: currentColor;
+    --qr-code-bg: transparent;
   }
 
   :scope {
@@ -14,8 +14,8 @@
     /* The SVG itself carries explicit width/height; this is a fallback
        for cases where the SVG hasn't stamped yet (empty value/matrix). */
     line-height: 0;
-    color: var(--qr-code-fg, var(--qr-code-fg-default));
-    background: var(--qr-code-bg, var(--qr-code-bg-default));
+    color: var(--qr-code-fg);
+    background: var(--qr-code-bg);
   }
 
   /* Display convention (ADR-0037): block-level by default; [inline] opts back to inline-level. */

package/components/radio/radio.css

@@ -3,53 +3,53 @@
    both fail inside `@scope`. Selectors moved out. See
    docs/BROWSER-COMPAT.md §3a. */
 radio-ui:not([disabled]):hover [slot="dot"] {
-  border-color: var(--radio-border-hover, var(--radio-border-hover-default));
-  background: var(--radio-bg-hover, var(--radio-bg-hover-default));
+  border-color: var(--radio-border-hover);
+  background: var(--radio-bg-hover);
 }
 radio-ui[checked]:not([disabled]):hover [slot="dot"] {
-  background: var(--radio-bg-checked-hover, var(--radio-bg-checked-hover-default));
-  border-color: var(--radio-bg-checked-hover, var(--radio-bg-checked-hover-default));
+  background: var(--radio-bg-checked-hover);
+  border-color: var(--radio-bg-checked-hover);
 }
 radio-ui[checked] [slot="dot"] {
-  background: var(--radio-bg-checked, var(--radio-bg-checked-default));
-  border-color: var(--radio-border-checked, var(--radio-border-checked-default));
+  background: var(--radio-bg-checked);
+  border-color: var(--radio-border-checked);
 }
 radio-ui[checked] [slot="dot"]::after {
-  width: calc(var(--radio-size, var(--radio-size-default)) * 0.6);
-  height: calc(var(--radio-size, var(--radio-size-default)) * 0.6);
+  width: calc(var(--radio-size) * 0.6);
+  height: calc(var(--radio-size) * 0.6);
 }
 
 @scope (radio-ui) {
   :where(:scope) {
     /* ── Layout ── (size scales with universal [size] attribute via --a-toggle-size) */
-    --radio-size-default:             var(--a-toggle-size);
-    --radio-gap-default:              var(--a-space-2);
-    --radio-radius-default:           var(--a-radius-full);
+    --radio-size:             var(--a-toggle-size);
+    --radio-gap:              var(--a-space-2);
+    --radio-radius:           var(--a-radius-full);
 
     /* ── Colors ── */
-    --radio-bg-default:               var(--a-ui-bg);
-    --radio-border-default:           var(--a-ui-border);
-    --radio-border-hover-default:     var(--a-fg-subtle);
-    --radio-bg-hover-default:         var(--a-bg-muted);
+    --radio-bg:               var(--a-ui-bg);
+    --radio-border:           var(--a-ui-border);
+    --radio-border-hover:     var(--a-fg-subtle);
+    --radio-bg-hover:         var(--a-bg-muted);
 
     /* ── State: checked ── */
-    --radio-bg-checked-default:       var(--a-primary);
-    --radio-border-checked-default:   var(--a-primary);
-    --radio-fg-checked-default:       var(--a-chrome-light);
-    --radio-bg-checked-hover-default: var(--a-primary-hover);
+    --radio-bg-checked:       var(--a-primary);
+    --radio-border-checked:   var(--a-primary);
+    --radio-fg-checked:       var(--a-chrome-light);
+    --radio-bg-checked-hover: var(--a-primary-hover);
 
     /* ── State: disabled ── */
-    --radio-fg-disabled-default:      var(--a-ui-text-disabled);
+    --radio-fg-disabled:      var(--a-ui-text-disabled);
 
     /* ── State: focus ── */
-    --radio-focus-ring-default:       var(--a-focus-ring);
+    --radio-focus-ring:       var(--a-focus-ring);
 
     /* ── Typography ── */
-    --radio-font-size-default:        var(--a-ui-size);
+    --radio-font-size:        var(--a-ui-size);
 
     /* ── Transition ── */
-    --radio-duration-default:         var(--a-duration-fast);
-    --radio-easing-default:           var(--a-easing);
+    --radio-duration:         var(--a-duration-fast);
+    --radio-easing:           var(--a-easing);
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
 }
 
@@ -58,28 +58,28 @@ radio-ui[checked] [slot="dot"]::after {
     box-sizing: border-box;
     display: inline-flex;
     align-items: center;
-    gap: var(--radio-gap, var(--radio-gap-default));
+    gap: var(--radio-gap);
     cursor: pointer;
     user-select: none;
-    font-size: var(--radio-font-size, var(--radio-font-size-default));
+    font-size: var(--radio-font-size);
     outline: none;
   }
-  :scope[disabled] { cursor: not-allowed; color: var(--radio-fg-disabled, var(--radio-fg-disabled-default)); }
+  :scope[disabled] { cursor: not-allowed; color: var(--radio-fg-disabled); }
 
   /* Dot */
   [slot="dot"] {
     flex-shrink: 0;
-    width: var(--radio-size, var(--radio-size-default));
-    height: var(--radio-size, var(--radio-size-default));
-    border: 1.5px solid var(--radio-border, var(--radio-border-default));
-    border-radius: var(--radio-radius, var(--radio-radius-default));
-    background: var(--radio-bg, var(--radio-bg-default));
+    width: var(--radio-size);
+    height: var(--radio-size);
+    border: 1.5px solid var(--radio-border);
+    border-radius: var(--radio-radius);
+    background: var(--radio-bg);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     transition:
-      background var(--radio-duration, var(--radio-duration-default)) var(--radio-easing, var(--radio-easing-default)),
-      border-color var(--radio-duration, var(--radio-duration-default)) var(--radio-easing, var(--radio-easing-default));
+      background var(--radio-duration) var(--radio-easing),
+      border-color var(--radio-duration) var(--radio-easing);
   }
 
   /* Inner dot — scales from 0 to 40% when checked */
@@ -87,11 +87,11 @@ radio-ui[checked] [slot="dot"]::after {
     content: '';
     width: 0;
     height: 0;
-    border-radius: var(--radio-radius, var(--radio-radius-default));
-    background: var(--radio-fg-checked, var(--radio-fg-checked-default));
+    border-radius: var(--radio-radius);
+    background: var(--radio-fg-checked);
     transition:
-      width var(--radio-duration, var(--radio-duration-default)) var(--radio-easing, var(--radio-easing-default)),
-      height var(--radio-duration, var(--radio-duration-default)) var(--radio-easing, var(--radio-easing-default));
+      width var(--radio-duration) var(--radio-easing),
+      height var(--radio-duration) var(--radio-easing);
   }
 
   /* hover + [checked] rules moved outside @scope — see Safari 17.x bug note at top. */
@@ -100,7 +100,7 @@ radio-ui[checked] [slot="dot"]::after {
   :scope[label]::after { content: attr(label); }
 
   /* Focus */
-  :scope:focus-visible [slot="dot"] { box-shadow: var(--radio-focus-ring, var(--radio-focus-ring-default)); }
+  :scope:focus-visible [slot="dot"] { box-shadow: var(--radio-focus-ring); }
 
   /* Size handled by universal [size] attribute system. */
 }

package/components/range/range.css

@@ -2,44 +2,45 @@
    doesn't match the scope root. Plain selector outside works. See
    docs/BROWSER-COMPAT.md §3a. */
 range-ui:not([disabled]) [slot="field"]:hover [data-layer="fill"] {
-  background: var(--range-fill-bg-hover, var(--range-fill-bg-hover-default));
+  background: var(--range-fill-bg-hover);
 }
 
 @scope (range-ui) {
   :where(:scope) {
     /* ── Tokens (wired to --a-ui-*) ── */
-    --range-bg-default:              var(--a-ui-bg);
-    --range-fill-bg-default:         var(--a-ui-bg);
-    --range-fill-bg-hover-default:   var(--a-ui-bg-hover);
-    --range-fill-bg-active-default:  var(--a-ui-bg-active);
-    --range-fill-bg-disabled-default: var(--a-canvas-muted);
-    --range-fill-fg-default:         var(--a-fg);
-    --range-fill-fg-disabled-default: var(--a-ui-text-disabled);
-    --range-fill-label-fg-default:   var(--a-ui-text-subtle);
-    --range-border-default:          var(--a-ui-border);
-    --range-border-hover-default:    var(--a-ui-border-hover);
-    --range-border-dragging-default: var(--a-ui-border-active);
-    --range-focus-ring-default:      var(--a-focus-ring);
-    --range-focus-ring-invalid-default: var(--a-focus-ring-invalid);
-    --range-radius-default:          var(--a-radius);
-    --range-height-default:          var(--a-size);
-    --range-px-default:              var(--a-ui-px);
-    --range-font-size-default:       var(--a-ui-size);
-    --range-label-fg-default:        var(--a-ui-text-placeholder);
-    --range-value-fg-default:        var(--a-ui-text);
-    --range-value-weight-default:    var(--a-weight-bold);
-    --range-suffix-fg-default:       var(--a-ui-text-placeholder);
-    --range-fill-pct-default:        0%;
+    --range-bg:              var(--a-ui-bg);
+    --range-fill-bg:         var(--a-ui-bg);
+    --range-fill-bg-hover:   var(--a-ui-bg-hover);
+    --range-fill-bg-active:  var(--a-ui-bg-active);
+    --range-fill-bg-disabled: var(--a-canvas-muted);
+    --range-fill-fg:         var(--a-fg);
+    --range-fill-fg-disabled: var(--a-ui-text-disabled);
+    --range-fill-label-fg:   var(--a-ui-text-subtle);
+    --range-border:          var(--a-ui-border);
+    --range-border-hover:    var(--a-ui-border-hover);
+    --range-border-dragging: var(--a-ui-border-active);
+    --range-focus-ring:      var(--a-focus-ring);
+    --range-focus-ring-invalid: var(--a-focus-ring-invalid);
+    --range-radius:          var(--a-radius);
+    --range-height:          var(--a-size);
+    --range-px:              var(--a-ui-px);
+    --range-font-size:       var(--a-ui-size);
+    --range-font-family:     var(--a-font-family-ui);
+    --range-label-fg:        var(--a-ui-text-placeholder);
+    --range-value-fg:        var(--a-ui-text);
+    --range-value-weight:    var(--a-weight-bold);
+    --range-suffix-fg:       var(--a-ui-text-placeholder);
+    --range-fill-pct:        0%;
 
     /* ── Transitions ── */
-    --range-duration-default:        var(--a-duration-fast);
-    --range-easing-default:          var(--a-easing);
+    --range-duration:        var(--a-duration-fast);
+    --range-easing:          var(--a-easing);
 
     /* ── Layout ── */
-    --range-layer-gap-default:       var(--a-space-1);
+    --range-layer-gap:       var(--a-space-1);
 
     /* ── Hover text ── */
-    --range-label-fg-hover-default:  var(--a-fg-subtle);
+    --range-label-fg-hover:  var(--a-fg-subtle);
 
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
 }
@@ -55,61 +56,63 @@ range-ui:not([disabled]) [slot="field"]:hover [data-layer="fill"] {
   [slot="field"] {
     position: relative;
     display: block;
-    min-height: var(--range-height, var(--range-height-default));
-    border: 1px solid var(--range-border, var(--range-border-default));
-    border-radius: var(--range-radius, var(--range-radius-default));
+    min-height: var(--range-height);
+    border: 1px solid var(--range-border);
+    border-radius: var(--range-radius);
     overflow: hidden;
-    background: var(--range-bg, var(--range-bg-default));
+    background: var(--range-bg);
     font: inherit;
-    font-size: var(--range-font-size, var(--range-font-size-default));
+    /* font-family floor — see segment.css rationale. */
+    font-family: var(--range-font-family);
+    font-size: var(--range-font-size);
     line-height: 1;
     transition:
-      border-color var(--range-duration, var(--range-duration-default)) var(--range-easing, var(--range-easing-default)),
-      background var(--range-duration, var(--range-duration-default)) var(--range-easing, var(--range-easing-default));
+      border-color var(--range-duration) var(--range-easing),
+      background var(--range-duration) var(--range-easing);
     user-select: none;
     touch-action: none;
   }
   [slot="field"]:hover {
-    border-color: var(--range-border-hover, var(--range-border-hover-default));
+    border-color: var(--range-border-hover);
   }
   :scope:focus-visible { outline: none; }
   :scope:focus-visible [slot="field"] {
     /* Canonical ring via L3 token (see semantics.css FOCUS block). */
-    box-shadow: var(--range-focus-ring, var(--range-focus-ring-default));
+    box-shadow: var(--range-focus-ring);
   }
   :scope[aria-invalid="true"]:focus-visible [slot="field"],
   :scope[error]:focus-visible [slot="field"] {
-    box-shadow: var(--range-focus-ring-invalid, var(--range-focus-ring-invalid-default));
+    box-shadow: var(--range-focus-ring-invalid);
   }
 
   /* ── Dual-layer fill: identical layouts, overlay clipped to fill % ── */
   [slot="layer"] {
     display: flex;
     align-items: center;
-    gap: var(--range-layer-gap, var(--range-layer-gap-default));
-    min-height: var(--range-height, var(--range-height-default));
-    padding: 0 var(--range-px, var(--range-px-default));
+    gap: var(--range-layer-gap);
+    min-height: var(--range-height);
+    padding: 0 var(--range-px);
     box-sizing: border-box;
   }
 
   [data-layer="fill"] {
     position: absolute;
     inset: 0;
-    background: var(--range-fill-bg, var(--range-fill-bg-default));
-    clip-path: inset(0 calc(100% - var(--range-fill-pct, var(--range-fill-pct-default))) 0 0);
+    background: var(--range-fill-bg);
+    clip-path: inset(0 calc(100% - var(--range-fill-pct)) 0 0);
     pointer-events: none;
-    transition: clip-path var(--range-duration, var(--range-duration-default)) var(--range-easing, var(--range-easing-default));
+    transition: clip-path var(--range-duration) var(--range-easing);
   }
 
   /* Base layer text colors */
-  [data-layer="base"] [slot="label"]  { color: var(--range-label-fg, var(--range-label-fg-default)); }
-  [data-layer="base"] [slot="value"]  { color: var(--range-value-fg, var(--range-value-fg-default)); font-weight: var(--range-value-weight, var(--range-value-weight-default)); }
-  [data-layer="base"] [slot="suffix"] { color: var(--range-suffix-fg, var(--range-suffix-fg-default)); }
+  [data-layer="base"] [slot="label"]  { color: var(--range-label-fg); }
+  [data-layer="base"] [slot="value"]  { color: var(--range-value-fg); font-weight: var(--range-value-weight); }
+  [data-layer="base"] [slot="suffix"] { color: var(--range-suffix-fg); }
 
   /* Fill layer text colors (what shows through the filled portion) */
-  [data-layer="fill"] [slot="label"]  { color: var(--range-fill-label-fg, var(--range-fill-label-fg-default)); }
-  [data-layer="fill"] [slot="value"]  { color: var(--range-fill-fg, var(--range-fill-fg-default)); font-weight: var(--range-value-weight, var(--range-value-weight-default)); }
-  [data-layer="fill"] [slot="suffix"] { color: var(--range-fill-fg, var(--range-fill-fg-default)); opacity: 0.75; }
+  [data-layer="fill"] [slot="label"]  { color: var(--range-fill-label-fg); }
+  [data-layer="fill"] [slot="value"]  { color: var(--range-fill-fg); font-weight: var(--range-value-weight); }
+  [data-layer="fill"] [slot="suffix"] { color: var(--range-fill-fg); opacity: 0.75; }
 
   /* Shared layout rules */
   [slot="label"] {
@@ -128,32 +131,32 @@ range-ui:not([disabled]) [slot="field"]:hover [data-layer="fill"] {
   /* Hover / focus label brightening on base only */
   [slot="field"]:hover [data-layer="base"] [slot="label"],
   :scope:focus-visible [data-layer="base"] [slot="label"] {
-    color: var(--range-label-fg-hover, var(--range-label-fg-hover-default));
+    color: var(--range-label-fg-hover);
   }
   [slot="field"]:hover [data-layer="base"] [slot="suffix"],
   :scope:focus-visible [data-layer="base"] [slot="suffix"] {
-    color: var(--range-label-fg-hover, var(--range-label-fg-hover-default));
+    color: var(--range-label-fg-hover);
   }
 
   /* Hover-fill brighten moved outside @scope — see Safari 17.x bug note at top. */
 
   /* Dragging: deepest fill, sharper border, instant (no transition lag on the clip) */
   :scope[data-dragging] [slot="field"] {
-    border-color: var(--range-border-dragging, var(--range-border-dragging-default));
+    border-color: var(--range-border-dragging);
   }
   :scope[data-dragging] [data-layer="fill"] {
-    background: var(--range-fill-bg-active, var(--range-fill-bg-active-default));
+    background: var(--range-fill-bg-active);
     transition: none;
   }
 
   /* Disabled: muted fill + muted text */
   :scope[disabled] [data-layer="fill"] {
-    background: var(--range-fill-bg-disabled, var(--range-fill-bg-disabled-default));
+    background: var(--range-fill-bg-disabled);
   }
   :scope[disabled] [data-layer="fill"] [slot="value"],
   :scope[disabled] [data-layer="fill"] [slot="suffix"],
   :scope[disabled] [data-layer="fill"] [slot="label"] {
-    color: var(--range-fill-fg-disabled, var(--range-fill-fg-disabled-default));
+    color: var(--range-fill-fg-disabled);
   }
 
   /* Size handled by universal [size] attribute system. */