@adia-ai/web-components 0.6.32 → 0.6.34

package/components/pipeline-status/pipeline-status.css

@@ -5,51 +5,51 @@
      ───────────────────────────────────────────── */
   :where(:scope) {
     /* Layout */
-    --pipeline-status-gap:             var(--a-space-1);
-    --pipeline-status-column-gap:      var(--a-space-1);
-    --pipeline-status-py:              var(--a-space-2);
-    --pipeline-status-px:              var(--a-space-2);
-    --pipeline-status-current-min-h:   1.5em;
-    --pipeline-status-history-pt:      var(--a-space-1);
-    --pipeline-status-history-pad-y:   var(--a-space-0);
-    --pipeline-status-log-pt:          var(--a-space-1);
-    --pipeline-status-log-gap:         var(--a-space-0);
+    --pipeline-status-gap-default:             var(--a-space-1);
+    --pipeline-status-column-gap-default:      var(--a-space-1);
+    --pipeline-status-py-default:              var(--a-space-2);
+    --pipeline-status-px-default:              var(--a-space-2);
+    --pipeline-status-current-min-h-default:   1.5em;
+    --pipeline-status-history-pt-default:      var(--a-space-1);
+    --pipeline-status-history-pad-y-default:   var(--a-space-0);
+    --pipeline-status-log-pt-default:          var(--a-space-1);
+    --pipeline-status-log-gap-default:         var(--a-space-0);
 
     /* Dot sizing (aliased to spacing tokens to avoid raw px ≥ 3) */
-    --pipeline-status-dot-size:        var(--a-space-2);    /*  8px at d=1 */
-    --pipeline-status-log-dot-size:    var(--a-space-1-5);  /*  6px at d=1 */
+    --pipeline-status-dot-size-default:        var(--a-space-2);    /*  8px at d=1 */
+    --pipeline-status-log-dot-size-default:    var(--a-space-1-5);  /*  6px at d=1 */
 
     /* Typography */
-    --pipeline-status-font-family:     var(--a-font-family);
-    --pipeline-status-font-size:       var(--a-ui-sm);
-    --pipeline-status-history-size:    var(--a-ui-tiny);
-    --pipeline-status-log-size:        var(--a-ui-tiny);
-    --pipeline-status-label-weight:    var(--a-weight-medium);
+    --pipeline-status-font-family-default:     var(--a-font-family);
+    --pipeline-status-font-size-default:       var(--a-ui-sm);
+    --pipeline-status-history-size-default:    var(--a-ui-tiny);
+    --pipeline-status-log-size-default:        var(--a-ui-tiny);
+    --pipeline-status-label-weight-default:    var(--a-weight-medium);
 
     /* Colors — keep aliases referenced via semantic tokens */
-    --pipeline-status-fg:              var(--a-fg-subtle);
-    --pipeline-status-label-fg:        var(--a-fg);
-    --pipeline-status-msg-fg:          var(--a-fg-subtle);
-    --pipeline-status-history-fg:      var(--a-fg-subtle);
-    --pipeline-status-log-fg:          var(--a-fg-subtle);
+    --pipeline-status-fg-default:              var(--a-fg-subtle);
+    --pipeline-status-label-fg-default:        var(--a-fg);
+    --pipeline-status-msg-fg-default:          var(--a-fg-subtle);
+    --pipeline-status-history-fg-default:      var(--a-fg-subtle);
+    --pipeline-status-log-fg-default:          var(--a-fg-subtle);
 
-    --pipeline-status-dot-bg:          var(--a-border);
-    --pipeline-status-dot-bg-active:   var(--a-accent);
-    --pipeline-status-dot-bg-complete: var(--a-success-strong);
+    --pipeline-status-dot-bg-default:          var(--a-border);
+    --pipeline-status-dot-bg-active-default:   var(--a-accent);
+    --pipeline-status-dot-bg-complete-default: var(--a-success-strong);
 
-    --pipeline-status-history-border:  var(--a-border-subtle);
-    --pipeline-status-border-thin:     1px;
+    --pipeline-status-history-border-default:  var(--a-border-subtle);
+    --pipeline-status-border-thin-default:     1px;
 
     /* Motion */
-    --pipeline-status-duration:        var(--a-duration);
-    --pipeline-status-easing:          var(--a-easing);
+    --pipeline-status-duration-default:        var(--a-duration);
+    --pipeline-status-easing-default:          var(--a-easing);
     /* Infinite-pulse durations don't map to motion scale */
-    --pipeline-status-pulse-duration:  1.2s;
-    --pipeline-status-pulse-easing:    ease-in-out;
+    --pipeline-status-pulse-duration-default:  1.2s;
+    --pipeline-status-pulse-easing-default:    ease-in-out;
 
     /* Variant targets */
-    --pipeline-status-complete-fg:     var(--a-success-strong);
-    --pipeline-status-complete-border: var(--a-success-strong);
+    --pipeline-status-complete-fg-default:     var(--a-success-strong);
+    --pipeline-status-complete-border-default: var(--a-success-strong);
   }
 
   /* ─────────────────────────────────────────────
@@ -57,47 +57,47 @@
      ───────────────────────────────────────────── */
   :scope {
     display:             block;
-    font-family:         var(--pipeline-status-font-family);
-    font-size:           var(--pipeline-status-font-size);
-    color:               var(--pipeline-status-fg);
+    font-family:         var(--pipeline-status-font-family, var(--pipeline-status-font-family-default));
+    font-size:           var(--pipeline-status-font-size, var(--pipeline-status-font-size-default));
+    color:               var(--pipeline-status-fg, var(--pipeline-status-fg-default));
   }
 
   [data-pipeline-status] {
     display:             flex;
     flex-direction:      column;
-    gap:                 var(--pipeline-status-gap);
-    padding:             var(--pipeline-status-py) var(--pipeline-status-px);
+    gap:                 var(--pipeline-status-gap, var(--pipeline-status-gap-default));
+    padding:             var(--pipeline-status-py, var(--pipeline-status-py-default)) var(--pipeline-status-px, var(--pipeline-status-px-default));
   }
 
   /* Current stage */
   [data-pipeline-current] {
     display:             flex;
     align-items:         center;
-    gap:                 var(--pipeline-status-column-gap);
-    min-height:          var(--pipeline-status-current-min-h);
+    gap:                 var(--pipeline-status-column-gap, var(--pipeline-status-column-gap-default));
+    min-height:          var(--pipeline-status-current-min-h, var(--pipeline-status-current-min-h-default));
   }
 
   [data-pipeline-label] {
-    font-weight:         var(--pipeline-status-label-weight);
-    color:               var(--pipeline-status-label-fg);
+    font-weight:         var(--pipeline-status-label-weight, var(--pipeline-status-label-weight-default));
+    color:               var(--pipeline-status-label-fg, var(--pipeline-status-label-fg-default));
   }
 
   [data-pipeline-msg] {
-    color:               var(--pipeline-status-msg-fg);
+    color:               var(--pipeline-status-msg-fg, var(--pipeline-status-msg-fg-default));
   }
 
   /* Dot indicator */
   [data-pipeline-dot] {
     flex-shrink:         0;
-    width:               var(--pipeline-status-dot-size);
-    height:              var(--pipeline-status-dot-size);
+    width:               var(--pipeline-status-dot-size, var(--pipeline-status-dot-size-default));
+    height:              var(--pipeline-status-dot-size, var(--pipeline-status-dot-size-default));
     border-radius:       50%;
-    background:          var(--pipeline-status-dot-bg);
-    transition:          background var(--pipeline-status-duration) var(--pipeline-status-easing);
+    background:          var(--pipeline-status-dot-bg, var(--pipeline-status-dot-bg-default));
+    transition:          background var(--pipeline-status-duration, var(--pipeline-status-duration-default)) var(--pipeline-status-easing, var(--pipeline-status-easing-default));
   }
 
   [data-pipeline-dot="active"] {
-    animation:           pipeline-pulse var(--pipeline-status-pulse-duration) var(--pipeline-status-pulse-easing) infinite;
+    animation:           pipeline-pulse var(--pipeline-status-pulse-duration, var(--pipeline-status-pulse-duration-default)) var(--pipeline-status-pulse-easing, var(--pipeline-status-pulse-easing-default)) infinite;
   }
 
   [data-pipeline-dot="complete"] {
@@ -111,14 +111,14 @@
 
   /* Complete state — override tokens only */
   :scope[status="completed"] {
-    --pipeline-status-label-fg:       var(--pipeline-status-complete-fg);
-    --pipeline-status-history-border: var(--pipeline-status-complete-border);
+    --pipeline-status-label-fg-default:       var(--pipeline-status-complete-fg, var(--pipeline-status-complete-fg-default));
+    --pipeline-status-history-border-default: var(--pipeline-status-complete-border, var(--pipeline-status-complete-border-default));
   }
 
   /* History (expandable) */
   [data-pipeline-history] {
-    border-top:          var(--pipeline-status-border-thin) solid var(--pipeline-status-history-border);
-    padding-top:         var(--pipeline-status-history-pt);
+    border-top:          var(--pipeline-status-border-thin, var(--pipeline-status-border-thin-default)) solid var(--pipeline-status-history-border, var(--pipeline-status-history-border-default));
+    padding-top:         var(--pipeline-status-history-pt, var(--pipeline-status-history-pt-default));
   }
 
   [data-pipeline-history][hidden] {
@@ -127,19 +127,19 @@
 
   [data-pipeline-history] summary {
     cursor:              pointer;
-    font-size:           var(--pipeline-status-history-size);
-    color:               var(--pipeline-status-history-fg);
+    font-size:           var(--pipeline-status-history-size, var(--pipeline-status-history-size-default));
+    color:               var(--pipeline-status-history-fg, var(--pipeline-status-history-fg-default));
     user-select:         none;
-    padding:             var(--pipeline-status-history-pad-y) var(--a-space-1);
+    padding:             var(--pipeline-status-history-pad-y, var(--pipeline-status-history-pad-y-default)) var(--a-space-1);
     margin-inline:       calc(var(--a-space-1) * -1);
     border-radius:       var(--a-radius-sm);
-    transition:          background var(--pipeline-status-duration) var(--pipeline-status-easing),
-                         color      var(--pipeline-status-duration) var(--pipeline-status-easing);
+    transition:          background var(--pipeline-status-duration, var(--pipeline-status-duration-default)) var(--pipeline-status-easing, var(--pipeline-status-easing-default)),
+                         color      var(--pipeline-status-duration, var(--pipeline-status-duration-default)) var(--pipeline-status-easing, var(--pipeline-status-easing-default));
   }
 
   [data-pipeline-history] summary:hover {
     background:          var(--a-bg-subtle);
-    color:               var(--pipeline-status-label-fg);
+    color:               var(--pipeline-status-label-fg, var(--pipeline-status-label-fg-default));
   }
 
   [data-pipeline-history] summary:focus-visible {
@@ -148,29 +148,29 @@
   }
 
   [data-pipeline-history] summary::marker {
-    color:               var(--pipeline-status-history-fg);
+    color:               var(--pipeline-status-history-fg, var(--pipeline-status-history-fg-default));
   }
 
   /* Log list */
   [data-pipeline-log] {
     list-style:          none;
     margin:              0;
-    padding:             var(--pipeline-status-log-pt) 0 0 0;
+    padding:             var(--pipeline-status-log-pt, var(--pipeline-status-log-pt-default)) 0 0 0;
     display:             flex;
     flex-direction:      column;
-    gap:                 var(--pipeline-status-log-gap);
+    gap:                 var(--pipeline-status-log-gap, var(--pipeline-status-log-gap-default));
   }
 
   [data-pipeline-log] li {
     display:             flex;
     align-items:         center;
-    gap:                 var(--pipeline-status-column-gap);
-    font-size:           var(--pipeline-status-log-size);
-    color:               var(--pipeline-status-log-fg);
+    gap:                 var(--pipeline-status-column-gap, var(--pipeline-status-column-gap-default));
+    font-size:           var(--pipeline-status-log-size, var(--pipeline-status-log-size-default));
+    color:               var(--pipeline-status-log-fg, var(--pipeline-status-log-fg-default));
   }
 
   [data-pipeline-log] [data-pipeline-dot] {
-    width:               var(--pipeline-status-log-dot-size);
-    height:              var(--pipeline-status-log-dot-size);
+    width:               var(--pipeline-status-log-dot-size, var(--pipeline-status-log-dot-size-default));
+    height:              var(--pipeline-status-log-dot-size, var(--pipeline-status-log-dot-size-default));
   }
 }

package/components/popover/popover.css

@@ -1,19 +1,19 @@
 @scope (popover-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --popover-px:      var(--a-space-3);
-    --popover-py:      var(--a-space-2);
-    --popover-radius:  var(--a-radius-lg);
+    --popover-px-default:      var(--a-space-3);
+    --popover-py-default:      var(--a-space-2);
+    --popover-radius-default:  var(--a-radius-lg);
 
     /* ── Colors ── */
-    --popover-bg:      var(--a-bg-subtle);
-    --popover-border:  var(--a-border-subtle);
-    --popover-shadow:  var(--a-shadow-lg);
-    --popover-fg:      var(--a-fg);
+    --popover-bg-default:      var(--a-bg-subtle);
+    --popover-border-default:  var(--a-border-subtle);
+    --popover-shadow-default:  var(--a-shadow-lg);
+    --popover-fg-default:      var(--a-fg);
 
     /* ── Typography ── */
-    --popover-font:    var(--a-font-family);
-    --popover-font-size: var(--a-ui-size);
+    --popover-font-default:    var(--a-font-family);
+    --popover-font-size-default: var(--a-ui-size);
   }
 
   :scope {
@@ -37,14 +37,14 @@
   [slot="content"] {
     box-sizing: border-box;
     margin: 0;
-    padding: var(--popover-py) var(--popover-px);
-    background: var(--popover-bg);
-    border: 1px solid var(--popover-border);
-    border-radius: var(--popover-radius);
-    box-shadow: var(--popover-shadow);
-    font-family: var(--popover-font);
-    font-size: var(--popover-font-size);
-    color: var(--popover-fg);
+    padding: var(--popover-py, var(--popover-py-default)) var(--popover-px, var(--popover-px-default));
+    background: var(--popover-bg, var(--popover-bg-default));
+    border: 1px solid var(--popover-border, var(--popover-border-default));
+    border-radius: var(--popover-radius, var(--popover-radius-default));
+    box-shadow: var(--popover-shadow, var(--popover-shadow-default));
+    font-family: var(--popover-font, var(--popover-font-default));
+    font-size: var(--popover-font-size, var(--popover-font-size-default));
+    color: var(--popover-fg, var(--popover-fg-default));
     max-height: calc(100vh - 3rem);
     overflow-y: auto;
     /* Fade + lift in on first paint. @starting-style is the initial frame

package/components/progress/progress.css

@@ -1,18 +1,18 @@
 @scope (progress-ui) {
   :where(:scope) {
     /* -- Tokens -- */
-    --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);
+    --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);
 
     /* -- Indeterminate motion -- */
-    --progress-shimmer-duration: 1.5s;
-    --progress-shimmer-easing:   ease-in-out;
-    --progress-spin-duration:    0.6s;
-    --progress-spin-easing:      linear;
+    --progress-shimmer-duration-default: 1.5s;
+    --progress-shimmer-easing-default:   ease-in-out;
+    --progress-spin-duration-default:    0.6s;
+    --progress-spin-easing-default:      linear;
   }
 
   :scope {
@@ -26,17 +26,17 @@
 
   [slot="track"] {
     width: 100%;
-    height: var(--progress-height);
-    border-radius: var(--progress-radius);
-    background: var(--progress-track);
+    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));
     overflow: hidden;
   }
 
   [slot="fill"] {
     height: 100%;
-    border-radius: var(--progress-radius);
-    background: var(--progress-fill);
-    transition: width var(--progress-duration) var(--progress-easing);
+    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));
 
     /* 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) 0%,
-      var(--progress-fill) 50%,
-      var(--progress-track) 100%
+      var(--progress-track, var(--progress-track-default)) 0%,
+      var(--progress-fill, var(--progress-fill-default)) 50%,
+      var(--progress-track, var(--progress-track-default)) 100%
     );
     background-size: 200% 100%;
-    animation: progress-shimmer var(--progress-shimmer-duration) var(--progress-shimmer-easing) infinite;
+    animation: progress-shimmer var(--progress-shimmer-duration, var(--progress-shimmer-duration-default)) var(--progress-shimmer-easing, var(--progress-shimmer-easing-default)) infinite;
   }
 
   @keyframes progress-shimmer {
@@ -84,10 +84,10 @@
     display: block;
     width: 100%;
     height: 100%;
-    border: 2px solid var(--progress-fill);
+    border: 2px solid var(--progress-fill, var(--progress-fill-default));
     border-top-color: transparent;
-    border-radius: var(--progress-radius);
-    animation: progress-spin var(--progress-spin-duration) var(--progress-spin-easing) infinite;
+    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;
   }
 
   @keyframes progress-spin {

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

@@ -1,15 +1,15 @@
 @scope (progress-row-ui) {
   :where(:scope) {
     /* ── Tokens ── */
-    --progress-row-gap:           var(--a-space-1);
-    --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);
+    --progress-row-gap-default:           var(--a-space-1);
+    --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);
 
     /* Fill color piped into nested progress-ui via its own token */
-    --progress-row-fill-bg:       var(--a-accent-bg);
+    --progress-row-fill-bg-default:       var(--a-accent-bg);
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
 }
 
@@ -20,15 +20,15 @@
     grid-template-areas:
       "label meta"
       "bar   bar";
-    column-gap: var(--progress-row-column-gap);
-    row-gap: var(--progress-row-gap);
+    column-gap: var(--progress-row-column-gap, var(--progress-row-column-gap-default));
+    row-gap: var(--progress-row-gap, var(--progress-row-gap-default));
     align-items: baseline;
   }
 
   [slot="label"] {
     grid-area: label;
-    font-size: var(--progress-row-label-size);
-    color: var(--progress-row-label-fg);
+    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));
     line-height: 1.4;
     min-width: 0;
     overflow: hidden;
@@ -38,8 +38,8 @@
 
   [slot="meta"] {
     grid-area: meta;
-    font-size: var(--progress-row-meta-size);
-    color: var(--progress-row-meta-fg);
+    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-variant-numeric: tabular-nums;
     justify-self: end;
     line-height: 1.4;
@@ -48,11 +48,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);
+    --progress-fill-bg: var(--progress-row-fill-bg, var(--progress-row-fill-bg-default));
   }
 
   /* Variants — remap own tokens only; the nested progress inherits via --progress-row-fill-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); }
+  :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); }
 }

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);
-  background: var(--radio-bg-hover);
+  border-color: var(--radio-border-hover, var(--radio-border-hover-default));
+  background: var(--radio-bg-hover, var(--radio-bg-hover-default));
 }
 radio-ui[checked]:not([disabled]):hover [slot="dot"] {
-  background: var(--radio-bg-checked-hover);
-  border-color: var(--radio-bg-checked-hover);
+  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));
 }
 radio-ui[checked] [slot="dot"] {
-  background: var(--radio-bg-checked);
-  border-color: var(--radio-border-checked);
+  background: var(--radio-bg-checked, var(--radio-bg-checked-default));
+  border-color: var(--radio-border-checked, var(--radio-border-checked-default));
 }
 radio-ui[checked] [slot="dot"]::after {
-  width: calc(var(--radio-size) * 0.6);
-  height: calc(var(--radio-size) * 0.6);
+  width: calc(var(--radio-size, var(--radio-size-default)) * 0.6);
+  height: calc(var(--radio-size, var(--radio-size-default)) * 0.6);
 }
 
 @scope (radio-ui) {
   :where(:scope) {
     /* ── Layout ── (size scales with universal [size] attribute via --a-toggle-size) */
-    --radio-size:             var(--a-toggle-size);
-    --radio-gap:              var(--a-space-2);
-    --radio-radius:           var(--a-radius-full);
+    --radio-size-default:             var(--a-toggle-size);
+    --radio-gap-default:              var(--a-space-2);
+    --radio-radius-default:           var(--a-radius-full);
 
     /* ── Colors ── */
-    --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);
+    --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);
 
     /* ── State: checked ── */
-    --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);
+    --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);
 
     /* ── State: disabled ── */
-    --radio-fg-disabled:      var(--a-ui-text-disabled);
+    --radio-fg-disabled-default:      var(--a-ui-text-disabled);
 
     /* ── State: focus ── */
-    --radio-focus-ring:       var(--a-focus-ring);
+    --radio-focus-ring-default:       var(--a-focus-ring);
 
     /* ── Typography ── */
-    --radio-font-size:        var(--a-ui-size);
+    --radio-font-size-default:        var(--a-ui-size);
 
     /* ── Transition ── */
-    --radio-duration:         var(--a-duration-fast);
-    --radio-easing:           var(--a-easing);
+    --radio-duration-default:         var(--a-duration-fast);
+    --radio-easing-default:           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);
+    gap: var(--radio-gap, var(--radio-gap-default));
     cursor: pointer;
     user-select: none;
-    font-size: var(--radio-font-size);
+    font-size: var(--radio-font-size, var(--radio-font-size-default));
     outline: none;
   }
-  :scope[disabled] { cursor: not-allowed; color: var(--radio-fg-disabled); }
+  :scope[disabled] { cursor: not-allowed; color: var(--radio-fg-disabled, var(--radio-fg-disabled-default)); }
 
   /* Dot */
   [slot="dot"] {
     flex-shrink: 0;
-    width: var(--radio-size);
-    height: var(--radio-size);
-    border: 1.5px solid var(--radio-border);
-    border-radius: var(--radio-radius);
-    background: var(--radio-bg);
+    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));
     display: inline-flex;
     align-items: center;
     justify-content: center;
     transition:
-      background var(--radio-duration) var(--radio-easing),
-      border-color var(--radio-duration) var(--radio-easing);
+      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));
   }
 
   /* 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);
-    background: var(--radio-fg-checked);
+    border-radius: var(--radio-radius, var(--radio-radius-default));
+    background: var(--radio-fg-checked, var(--radio-fg-checked-default));
     transition:
-      width var(--radio-duration) var(--radio-easing),
-      height var(--radio-duration) var(--radio-easing);
+      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));
   }
 
   /* 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); }
+  :scope:focus-visible [slot="dot"] { box-shadow: var(--radio-focus-ring, var(--radio-focus-ring-default)); }
 
   /* Size handled by universal [size] attribute system. */
 }