@adia-ai/web-components 0.6.32 → 0.6.34

package/components/nav-item/nav-item.css

@@ -6,49 +6,49 @@
    consumers extending below the floor and is harmlessly redundant on
    engines without the bug. */
 nav-item-ui:hover {
-  background: var(--nav-item-bg-hover);
-  color: var(--nav-item-fg-hover);
+  background: var(--nav-item-bg-hover, var(--nav-item-bg-hover-default));
+  color: var(--nav-item-fg-hover, var(--nav-item-fg-hover-default));
 }
 nav-item-ui:hover [slot="icon"] {
-  color: var(--nav-item-fg-hover);
+  color: var(--nav-item-fg-hover, var(--nav-item-fg-hover-default));
 }
 nav-item-ui[selected] {
-  background: var(--nav-item-bg-selected);
-  color: var(--nav-item-fg-selected);
+  background: var(--nav-item-bg-selected, var(--nav-item-bg-selected-default));
+  color: var(--nav-item-fg-selected, var(--nav-item-fg-selected-default));
 }
 nav-item-ui[selected] [slot="icon"] {
-  color: var(--nav-item-icon-fg-selected);
+  color: var(--nav-item-icon-fg-selected, var(--nav-item-icon-fg-selected-default));
 }
 nav-item-ui[selected] [slot="icon"]:empty::before {
   content: '';
   width: 2px;
   height: 1em;
   border-radius: 1px;
-  background: var(--nav-item-accent);
+  background: var(--nav-item-accent, var(--nav-item-accent-default));
 }
 
 @scope (nav-item-ui) {
   :where(:scope) {
-    --nav-item-accent:          var(--a-accent);
-    --nav-item-row-height:      var(--a-size);
-    --nav-item-row-height-sm:   var(--a-size-sm);
-    --nav-item-row-height-lg:   var(--a-size-lg);
-    --nav-item-row-px:          var(--a-ui-px);
-    --nav-item-row-gap:         var(--a-space-1);
-    --nav-item-row-radius:      var(--a-radius-md);
-    --nav-item-font-size:       var(--a-ui-size);
-    --nav-item-font-size-sm:    var(--a-ui-sm);
-    --nav-item-font-size-lg:    var(--a-ui-lg);
-    --nav-item-font-weight:     var(--a-weight-normal);
-    --nav-item-fg:              var(--a-ui-text-subtle);
-    --nav-item-fg-hover:        var(--a-ui-text-hover);
-    --nav-item-fg-selected:     var(--a-ui-text-selected);
-    --nav-item-icon-fg:         var(--a-ui-text-muted);
-    --nav-item-icon-fg-selected: var(--nav-item-accent);
-    --nav-item-bg-hover:        var(--a-ui-bg-hover);
-    --nav-item-bg-selected:     var(--a-ui-bg-selected);
-    --nav-item-icon-size:       calc(var(--nav-item-row-height) - var(--a-space-2));
-    --nav-item-badge-size:      var(--a-ui-sm);
+    --nav-item-accent-default:          var(--a-accent);
+    --nav-item-row-height-default:      var(--a-size);
+    --nav-item-row-height-sm-default:   var(--a-size-sm);
+    --nav-item-row-height-lg-default:   var(--a-size-lg);
+    --nav-item-row-px-default:          var(--a-ui-px);
+    --nav-item-row-gap-default:         var(--a-space-1);
+    --nav-item-row-radius-default:      var(--a-radius-md);
+    --nav-item-font-size-default:       var(--a-ui-size);
+    --nav-item-font-size-sm-default:    var(--a-ui-sm);
+    --nav-item-font-size-lg-default:    var(--a-ui-lg);
+    --nav-item-font-weight-default:     var(--a-weight-normal);
+    --nav-item-fg-default:              var(--a-ui-text-subtle);
+    --nav-item-fg-hover-default:        var(--a-ui-text-hover);
+    --nav-item-fg-selected-default:     var(--a-ui-text-selected);
+    --nav-item-icon-fg-default:         var(--a-ui-text-muted);
+    --nav-item-icon-fg-selected-default: var(--nav-item-accent, var(--nav-item-accent-default));
+    --nav-item-bg-hover-default:        var(--a-ui-bg-hover);
+    --nav-item-bg-selected-default:     var(--a-ui-bg-selected);
+    --nav-item-icon-size-default:       calc(var(--nav-item-row-height, var(--nav-item-row-height-default)) - var(--a-space-2));
+    --nav-item-badge-size-default:      var(--a-ui-sm);
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
 }
 
@@ -56,12 +56,12 @@ nav-item-ui[selected] [slot="icon"]:empty::before {
     box-sizing: border-box;
     display: flex;
     align-items: center;
-    gap: var(--nav-item-row-gap);
-    height: var(--nav-item-row-height);
-    padding: 0 var(--nav-item-row-px);
-    border-radius: var(--nav-item-row-radius);
-    font-size: var(--nav-item-font-size);
-    color: var(--nav-item-fg);
+    gap: var(--nav-item-row-gap, var(--nav-item-row-gap-default));
+    height: var(--nav-item-row-height, var(--nav-item-row-height-default));
+    padding: 0 var(--nav-item-row-px, var(--nav-item-row-px-default));
+    border-radius: var(--nav-item-row-radius, var(--nav-item-row-radius-default));
+    font-size: var(--nav-item-font-size, var(--nav-item-font-size-default));
+    color: var(--nav-item-fg, var(--nav-item-fg-default));
     cursor: pointer;
     user-select: none;
     white-space: nowrap;
@@ -69,12 +69,12 @@ nav-item-ui[selected] [slot="icon"]:empty::before {
       background var(--nav-duration-fast) var(--nav-easing),
       color var(--nav-duration-fast) var(--nav-easing);
     outline: none;
-    font-weight: var(--nav-item-font-weight);
+    font-weight: var(--nav-item-font-weight, var(--nav-item-font-weight-default));
   }
 
   :scope:focus-visible {
-    background: var(--nav-item-bg-hover);
-    color: var(--nav-item-fg-hover);
+    background: var(--nav-item-bg-hover, var(--nav-item-bg-hover-default));
+    color: var(--nav-item-fg-hover, var(--nav-item-fg-hover-default));
     outline: none;
   }
 
@@ -82,13 +82,13 @@ nav-item-ui[selected] [slot="icon"]:empty::before {
 
   /* Icon slot — always present, reserves space even when empty */
   [slot="icon"] {
-    width: var(--nav-item-icon-size);
-    height: var(--nav-item-icon-size);
+    width: var(--nav-item-icon-size, var(--nav-item-icon-size-default));
+    height: var(--nav-item-icon-size, var(--nav-item-icon-size-default));
     flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--nav-item-icon-fg);
+    color: var(--nav-item-icon-fg, var(--nav-item-icon-fg-default));
     transition: color var(--nav-duration-fast) var(--nav-easing);
   }
 
@@ -106,7 +106,7 @@ nav-item-ui[selected] [slot="icon"]:empty::before {
   }
 
   [slot="badge"] {
-    font-size: var(--nav-item-badge-size);
+    font-size: var(--nav-item-badge-size, var(--nav-item-badge-size-default));
     color: var(--nav-item-badge-fg);
     background: var(--nav-item-badge-bg);
     padding: 1px var(--nav-item-badge-px);
@@ -153,13 +153,13 @@ nav-item-ui[selected] [slot="icon"]:empty::before {
 
   /* ── Size variants ── */
   :scope[size="sm"] {
-    --nav-item-row-height: var(--nav-item-row-height-sm);
-    --nav-item-font-size:  var(--nav-item-font-size-sm);
+    --nav-item-row-height-default: var(--nav-item-row-height-sm, var(--nav-item-row-height-sm-default));
+    --nav-item-font-size-default:  var(--nav-item-font-size-sm, var(--nav-item-font-size-sm-default));
   }
 
   :scope[size="lg"] {
-    --nav-item-row-height: var(--nav-item-row-height-lg);
-    --nav-item-font-size:  var(--nav-item-font-size-lg);
+    --nav-item-row-height-default: var(--nav-item-row-height-lg, var(--nav-item-row-height-lg-default));
+    --nav-item-font-size-default:  var(--nav-item-font-size-lg, var(--nav-item-font-size-lg-default));
   }
 }
 

package/components/noodles/noodles.css

@@ -1,22 +1,22 @@
 @scope (noodles-ui) {
   :where(:scope) {
     /* ── Tokens ── */
-    --noodles-duration:             var(--a-duration-fast);
-    --noodles-easing:               var(--a-easing);
-    --noodles-stroke:               var(--a-accent-bg);
+    --noodles-duration-default:             var(--a-duration-fast);
+    --noodles-easing-default:               var(--a-easing);
+    --noodles-stroke-default:               var(--a-accent-bg);
     /* Component-intrinsic visual constants; no --a-space-* equivalent */
-    --noodles-stroke-width:         2px;
-    --noodles-stroke-readonly:      var(--a-fg-muted);
+    --noodles-stroke-width-default:         2px;
+    --noodles-stroke-readonly-default:      var(--a-fg-muted);
     /* Component-intrinsic visual constants; no --a-space-* equivalent */
-    --noodles-port-size:            10px;
-    --noodles-port-bg:              var(--a-accent-bg);
-    --noodles-port-border:          var(--a-bg);
-    --noodles-port-hover-ring:      0 0 0 3px var(--a-bg-muted);
-    --noodles-port-drop-scale:      1.4;
-    --noodles-port-drag-opacity:    0.4;
-    --noodles-dash-length:          8;
-    --noodles-dash-gap:             4;
-    --noodles-anim-speed:           0.6s;
+    --noodles-port-size-default:            10px;
+    --noodles-port-bg-default:              var(--a-accent-bg);
+    --noodles-port-border-default:          var(--a-bg);
+    --noodles-port-hover-ring-default:      0 0 0 3px var(--a-bg-muted);
+    --noodles-port-drop-scale-default:      1.4;
+    --noodles-port-drag-opacity-default:    0.4;
+    --noodles-dash-length-default:          8;
+    --noodles-dash-gap-default:             4;
+    --noodles-anim-speed-default:           0.6s;
   }
 
   :scope {
@@ -41,25 +41,25 @@
 
   :scope > svg[data-noodle-svg] path {
     fill: none;
-    stroke: var(--noodles-stroke);
-    stroke-width: var(--noodles-stroke-width);
+    stroke: var(--noodles-stroke, var(--noodles-stroke-default));
+    stroke-width: var(--noodles-stroke-width, var(--noodles-stroke-width-default));
     stroke-linecap: round;
     stroke-linejoin: round;
     transition:
-      stroke var(--noodles-duration) var(--noodles-easing),
-      stroke-dasharray var(--noodles-duration) var(--noodles-easing);
+      stroke var(--noodles-duration, var(--noodles-duration-default)) var(--noodles-easing, var(--noodles-easing-default)),
+      stroke-dasharray var(--noodles-duration, var(--noodles-duration-default)) var(--noodles-easing, var(--noodles-easing-default));
   }
 
   /* ── State: readonly ── */
   :scope[readonly] > svg[data-noodle-svg] path {
-    stroke: var(--noodles-stroke-readonly);
+    stroke: var(--noodles-stroke-readonly, var(--noodles-stroke-readonly-default));
     stroke-dasharray: 6 4;
   }
 
   /* ── State: animated ── */
   :scope[animated] > svg[data-noodle-svg] path {
-    stroke-dasharray: var(--noodles-dash-length) var(--noodles-dash-gap);
-    animation: noodle-march var(--noodles-anim-speed) linear infinite;
+    stroke-dasharray: var(--noodles-dash-length, var(--noodles-dash-length-default)) var(--noodles-dash-gap, var(--noodles-dash-gap-default));
+    animation: noodle-march var(--noodles-anim-speed, var(--noodles-anim-speed-default)) linear infinite;
   }
 
   @keyframes noodle-march {
@@ -71,33 +71,33 @@
   /* ── Port indicators ── */
   [data-noodle-port-indicator] {
     position: absolute;
-    width: var(--noodles-port-size);
-    height: var(--noodles-port-size);
+    width: var(--noodles-port-size, var(--noodles-port-size-default));
+    height: var(--noodles-port-size, var(--noodles-port-size-default));
     border-radius: 50%;
-    background: var(--noodles-port-bg);
-    border: 2px solid var(--noodles-port-border);
+    background: var(--noodles-port-bg, var(--noodles-port-bg-default));
+    border: 2px solid var(--noodles-port-border, var(--noodles-port-border-default));
     transform: translate(-50%, -50%);
     z-index: 2;
     cursor: crosshair;
     pointer-events: auto;
     transition:
-      transform var(--noodles-duration) var(--noodles-easing),
-      opacity var(--noodles-duration) var(--noodles-easing),
-      box-shadow var(--noodles-duration) var(--noodles-easing);
+      transform var(--noodles-duration, var(--noodles-duration-default)) var(--noodles-easing, var(--noodles-easing-default)),
+      opacity var(--noodles-duration, var(--noodles-duration-default)) var(--noodles-easing, var(--noodles-easing-default)),
+      box-shadow var(--noodles-duration, var(--noodles-duration-default)) var(--noodles-easing, var(--noodles-easing-default));
   }
 
   [data-noodle-port-indicator]:hover {
-    box-shadow: var(--noodles-port-hover-ring);
+    box-shadow: var(--noodles-port-hover-ring, var(--noodles-port-hover-ring-default));
   }
 
   /* ── State: drop ready ── */
   [data-noodle-drop-ready] {
-    transform: translate(-50%, -50%) scale(var(--noodles-port-drop-scale));
+    transform: translate(-50%, -50%) scale(var(--noodles-port-drop-scale, var(--noodles-port-drop-scale-default)));
   }
 
   /* ── State: dragging ── */
   [data-noodle-dragging] {
-    opacity: var(--noodles-port-drag-opacity);
+    opacity: var(--noodles-port-drag-opacity, var(--noodles-port-drag-opacity-default));
   }
 
   /* ── State: readonly ports ── */

package/components/option-card/option-card.css

@@ -2,83 +2,83 @@
    (Flavor B — attribute-removal restyle) both fail inside `@scope`.
    Selectors moved out. See docs/BROWSER-COMPAT.md §3a. */
 option-card-ui:not([checked]):not([disabled]):hover {
-  background: var(--option-card-bg-hover);
-  border-color: var(--option-card-border-hover);
+  background: var(--option-card-bg-hover, var(--option-card-bg-hover-default));
+  border-color: var(--option-card-border-hover, var(--option-card-border-hover-default));
 }
 option-card-ui[checked] > :not([slot]) {
   display: block;
 }
 option-card-ui[checked] {
-  background: var(--option-card-bg-checked);
-  border-color: var(--option-card-border-checked);
+  background: var(--option-card-bg-checked, var(--option-card-bg-checked-default));
+  border-color: var(--option-card-border-checked, var(--option-card-border-checked-default));
 }
 option-card-ui[checked]::before {
-  border-color: var(--option-card-radio-fill);
+  border-color: var(--option-card-radio-fill, var(--option-card-radio-fill-default));
   background:
     radial-gradient(
       circle,
-      var(--option-card-radio-dot) 0 30%,
-      var(--option-card-radio-fill) 30% 100%
+      var(--option-card-radio-dot, var(--option-card-radio-dot-default)) 0 30%,
+      var(--option-card-radio-fill, var(--option-card-radio-fill-default)) 30% 100%
     );
 }
 option-card-ui[checked] > [slot="heading"] {
-  color: var(--option-card-heading-color-checked);
+  color: var(--option-card-heading-color-checked, var(--option-card-heading-color-checked-default));
 }
 option-card-ui[checked] > [slot="icon"] {
-  color: var(--option-card-icon-color-checked);
+  color: var(--option-card-icon-color-checked, var(--option-card-icon-color-checked-default));
 }
 
 @scope (option-card-ui) {
   :where(:scope) {
     /* ── Container ── */
-    --option-card-padding-block:    var(--a-space-3);
-    --option-card-padding-inline:   var(--a-space-4);
-    --option-card-radius:           var(--a-radius-md);
-    --option-card-bg:               var(--a-bg);
-    --option-card-border:           var(--a-border);
-    --option-card-gap-x:            var(--a-space-3);
-    --option-card-gap-y:            var(--a-space-1);
+    --option-card-padding-block-default:    var(--a-space-3);
+    --option-card-padding-inline-default:   var(--a-space-4);
+    --option-card-radius-default:           var(--a-radius-md);
+    --option-card-bg-default:               var(--a-bg);
+    --option-card-border-default:           var(--a-border);
+    --option-card-gap-x-default:            var(--a-space-3);
+    --option-card-gap-y-default:            var(--a-space-1);
 
     /* ── State: hover ── */
-    --option-card-bg-hover:         var(--a-bg-muted);
-    --option-card-border-hover:     var(--a-fg-subtle);
+    --option-card-bg-hover-default:         var(--a-bg-muted);
+    --option-card-border-hover-default:     var(--a-fg-subtle);
 
     /* ── State: checked ── */
-    --option-card-bg-checked:       var(--a-accent-muted);
-    --option-card-border-checked:   var(--a-accent);
+    --option-card-bg-checked-default:       var(--a-accent-muted);
+    --option-card-border-checked-default:   var(--a-accent);
 
     /* ── Indicator (CSS radio circle, same size + recipe as <radio-ui>). */
-    --option-card-radio-size:       var(--a-toggle-size);
-    --option-card-radio-bg:         var(--a-bg);
-    --option-card-radio-border:     var(--a-border);
-    --option-card-radio-fill:       var(--a-accent);
+    --option-card-radio-size-default:       var(--a-toggle-size);
+    --option-card-radio-bg-default:         var(--a-bg);
+    --option-card-radio-border-default:     var(--a-border);
+    --option-card-radio-fill-default:       var(--a-accent);
     /* Mirror radio.css's --radio-fg-checked recipe: an always-light
        token rather than --a-accent-fg, which can flip dark depending
        on theme/scheme combos and produce a near-black inner dot
        against the accent disc. */
-    --option-card-radio-dot:        var(--a-chrome-light);
+    --option-card-radio-dot-default:        var(--a-chrome-light);
 
     /* ── Typography ── */
-    --option-card-heading-color:          var(--a-fg);
-    --option-card-heading-color-checked:  var(--a-fg-strong);
-    --option-card-heading-weight:         var(--a-weight-medium);
-    --option-card-heading-size:           var(--a-ui-size);
-    --option-card-desc-color:             var(--a-fg-muted);
-    --option-card-desc-size:              var(--a-ui-sm);
-    --option-card-desc-line-height:       1.4;
-    --option-card-icon-color:             var(--a-fg-subtle);
-    --option-card-icon-color-checked:     var(--a-fg-strong);
-    --option-card-icon-size:              1.5rem;
+    --option-card-heading-color-default:          var(--a-fg);
+    --option-card-heading-color-checked-default:  var(--a-fg-strong);
+    --option-card-heading-weight-default:         var(--a-weight-medium);
+    --option-card-heading-size-default:           var(--a-ui-size);
+    --option-card-desc-color-default:             var(--a-fg-muted);
+    --option-card-desc-size-default:              var(--a-ui-sm);
+    --option-card-desc-line-height-default:       1.4;
+    --option-card-icon-color-default:             var(--a-fg-subtle);
+    --option-card-icon-color-checked-default:     var(--a-fg-strong);
+    --option-card-icon-size-default:              1.5rem;
 
     /* ── State: disabled ── */
-    --option-card-disabled-opacity: 0.6;
+    --option-card-disabled-opacity-default: 0.6;
 
     /* ── Focus ── */
-    --option-card-focus-ring:       var(--a-focus-ring);
+    --option-card-focus-ring-default:       var(--a-focus-ring);
 
     /* ── Transitions ── */
-    --option-card-duration:         var(--a-duration-fast);
-    --option-card-easing:           var(--a-easing);
+    --option-card-duration-default:         var(--a-duration-fast);
+    --option-card-easing-default:           var(--a-easing);
   }
 
   /* ── Base — grid: indicator | (heading + description). Optional icon
@@ -90,19 +90,19 @@ option-card-ui[checked] > [slot="icon"] {
     grid-template-areas:
       "indicator heading"
       "indicator description";
-    column-gap: var(--option-card-gap-x);
-    row-gap: var(--option-card-gap-y);
-    padding: var(--option-card-padding-block) var(--option-card-padding-inline);
-    border: 1px solid var(--option-card-border);
-    border-radius: var(--option-card-radius);
-    background: var(--option-card-bg);
+    column-gap: var(--option-card-gap-x, var(--option-card-gap-x-default));
+    row-gap: var(--option-card-gap-y, var(--option-card-gap-y-default));
+    padding: var(--option-card-padding-block, var(--option-card-padding-block-default)) var(--option-card-padding-inline, var(--option-card-padding-inline-default));
+    border: 1px solid var(--option-card-border, var(--option-card-border-default));
+    border-radius: var(--option-card-radius, var(--option-card-radius-default));
+    background: var(--option-card-bg, var(--option-card-bg-default));
     cursor: pointer;
     user-select: none;
     outline: none;
     transition:
-      background var(--option-card-duration) var(--option-card-easing),
-      border-color var(--option-card-duration) var(--option-card-easing),
-      box-shadow var(--option-card-duration) var(--option-card-easing);
+      background var(--option-card-duration, var(--option-card-duration-default)) var(--option-card-easing, var(--option-card-easing-default)),
+      border-color var(--option-card-duration, var(--option-card-duration-default)) var(--option-card-easing, var(--option-card-easing-default)),
+      box-shadow var(--option-card-duration, var(--option-card-duration-default)) var(--option-card-easing, var(--option-card-easing-default));
   }
 
   /* When an icon slot is present, insert a third column for it
@@ -116,41 +116,41 @@ option-card-ui[checked] > [slot="icon"] {
   :scope > [slot="icon"] {
     grid-area: icon;
     align-self: start;
-    color: var(--option-card-icon-color);
-    --a-icon-size: var(--option-card-icon-size);
-    transition: color var(--option-card-duration) var(--option-card-easing);
+    color: var(--option-card-icon-color, var(--option-card-icon-color-default));
+    --a-icon-size: var(--option-card-icon-size, var(--option-card-icon-size-default));
+    transition: color var(--option-card-duration, var(--option-card-duration-default)) var(--option-card-easing, var(--option-card-easing-default));
   }
 
   /* ── Indicator — pure CSS radio circle, no separate <radio-ui>. */
   :scope::before {
     content: '';
     grid-area: indicator;
-    width: var(--option-card-radio-size);
-    height: var(--option-card-radio-size);
-    border: 1.5px solid var(--option-card-radio-border);
+    width: var(--option-card-radio-size, var(--option-card-radio-size-default));
+    height: var(--option-card-radio-size, var(--option-card-radio-size-default));
+    border: 1.5px solid var(--option-card-radio-border, var(--option-card-radio-border-default));
     border-radius: var(--a-radius-full);
-    background: var(--option-card-radio-bg);
+    background: var(--option-card-radio-bg, var(--option-card-radio-bg-default));
     align-self: start;
     margin-block-start: 0.125rem;
     flex-shrink: 0;
     transition:
-      background var(--option-card-duration) var(--option-card-easing),
-      border-color var(--option-card-duration) var(--option-card-easing);
+      background var(--option-card-duration, var(--option-card-duration-default)) var(--option-card-easing, var(--option-card-easing-default)),
+      border-color var(--option-card-duration, var(--option-card-duration-default)) var(--option-card-easing, var(--option-card-easing-default));
   }
 
   /* ── Slots — heading + description ── */
   :scope > [slot="heading"] {
     grid-area: heading;
-    color: var(--option-card-heading-color);
-    font-weight: var(--option-card-heading-weight);
-    font-size: var(--option-card-heading-size);
-    transition: color var(--option-card-duration) var(--option-card-easing);
+    color: var(--option-card-heading-color, var(--option-card-heading-color-default));
+    font-weight: var(--option-card-heading-weight, var(--option-card-heading-weight-default));
+    font-size: var(--option-card-heading-size, var(--option-card-heading-size-default));
+    transition: color var(--option-card-duration, var(--option-card-duration-default)) var(--option-card-easing, var(--option-card-easing-default));
   }
   :scope > [slot="description"] {
     grid-area: description;
-    color: var(--option-card-desc-color);
-    font-size: var(--option-card-desc-size);
-    line-height: var(--option-card-desc-line-height);
+    color: var(--option-card-desc-color, var(--option-card-desc-color-default));
+    font-size: var(--option-card-desc-size, var(--option-card-desc-size-default));
+    line-height: var(--option-card-desc-line-height, var(--option-card-desc-line-height-default));
   }
 
   /* ── Default slot — "spillover" content revealed when checked.
@@ -179,8 +179,8 @@ option-card-ui[checked] > [slot="icon"] {
       "icon       indicator"
       "heading    heading"
       "description description";
-    column-gap: var(--option-card-gap-x);
-    row-gap: var(--option-card-gap-y);
+    column-gap: var(--option-card-gap-x, var(--option-card-gap-x-default));
+    row-gap: var(--option-card-gap-y, var(--option-card-gap-y-default));
     padding: var(--a-space-4);
     align-items: start;
   }
@@ -188,7 +188,7 @@ option-card-ui[checked] > [slot="icon"] {
     grid-area: icon;
     justify-self: start;
     align-self: start;
-    --option-card-icon-size: 1.75rem;
+    --option-card-icon-size-default: 1.75rem;
   }
   :scope[layout="tile"]::before {
     grid-area: indicator;
@@ -206,11 +206,11 @@ option-card-ui[checked] > [slot="icon"] {
   /* ── State: disabled ── */
   :scope[disabled] {
     cursor: not-allowed;
-    opacity: var(--option-card-disabled-opacity);
+    opacity: var(--option-card-disabled-opacity, var(--option-card-disabled-opacity-default));
   }
 
   /* ── Focus ── */
   :scope:focus-visible {
-    box-shadow: var(--option-card-focus-ring);
+    box-shadow: var(--option-card-focus-ring, var(--option-card-focus-ring-default));
   }
 }

package/components/otp-input/otp-input.css

@@ -1,23 +1,23 @@
 @scope (otp-input-ui) {
   :where(:scope) {
     /* ── Tokens ── */
-    --otp-input-size:         var(--a-size);
-    --otp-input-gap:          var(--a-space-2);
-    --otp-input-radius:       var(--a-radius-md);
-    --otp-input-border:       var(--a-ui-border);
-    --otp-input-border-hover: var(--a-ui-border-hover);
-    --otp-input-border-focus: var(--a-accent);
-    --otp-input-bg-disabled:  var(--a-ui-bg-disabled);
-    --otp-input-fg-disabled:  var(--a-ui-text-disabled);
-    --otp-input-border-disabled: var(--a-ui-border-disabled);
-    --otp-input-font:         var(--a-font-family-code);
-    --otp-input-font-size:    var(--a-body-md);
-    --otp-input-bg:           var(--a-ui-bg);
-    --otp-input-fg:           var(--a-ui-text);
+    --otp-input-size-default:         var(--a-size);
+    --otp-input-gap-default:          var(--a-space-2);
+    --otp-input-radius-default:       var(--a-radius-md);
+    --otp-input-border-default:       var(--a-ui-border);
+    --otp-input-border-hover-default: var(--a-ui-border-hover);
+    --otp-input-border-focus-default: var(--a-accent);
+    --otp-input-bg-disabled-default:  var(--a-ui-bg-disabled);
+    --otp-input-fg-disabled-default:  var(--a-ui-text-disabled);
+    --otp-input-border-disabled-default: var(--a-ui-border-disabled);
+    --otp-input-font-default:         var(--a-font-family-code);
+    --otp-input-font-size-default:    var(--a-body-md);
+    --otp-input-bg-default:           var(--a-ui-bg);
+    --otp-input-fg-default:           var(--a-ui-text);
 
     /* ── Transitions ── */
-    --otp-input-duration:     var(--a-duration-fast);
-    --otp-input-easing:       var(--a-easing);
+    --otp-input-duration-default:     var(--a-duration-fast);
+    --otp-input-easing-default:       var(--a-easing);
   }
 
   :scope {
@@ -25,24 +25,24 @@
     box-sizing: border-box;
     display: flex;
     justify-content: space-around;
-    gap: var(--otp-input-gap);
+    gap: var(--otp-input-gap, var(--otp-input-gap-default));
   }
 
   /* ── Digit inputs ── */
   [slot="digit"] {
     box-sizing: border-box;
-    width: var(--otp-input-size);
-    height: var(--otp-input-size);
+    width: var(--otp-input-size, var(--otp-input-size-default));
+    height: var(--otp-input-size, var(--otp-input-size-default));
     text-align: center;
-    border: 1px solid var(--otp-input-border);
-    border-radius: var(--otp-input-radius);
-    background: var(--otp-input-bg);
-    color: var(--otp-input-fg);
-    font-family: var(--otp-input-font);
-    font-size: var(--otp-input-font-size);
+    border: 1px solid var(--otp-input-border, var(--otp-input-border-default));
+    border-radius: var(--otp-input-radius, var(--otp-input-radius-default));
+    background: var(--otp-input-bg, var(--otp-input-bg-default));
+    color: var(--otp-input-fg, var(--otp-input-fg-default));
+    font-family: var(--otp-input-font, var(--otp-input-font-default));
+    font-size: var(--otp-input-font-size, var(--otp-input-font-size-default));
     line-height: 1;
     outline: none;
-    transition: border-color var(--otp-input-duration) var(--otp-input-easing);
+    transition: border-color var(--otp-input-duration, var(--otp-input-duration-default)) var(--otp-input-easing, var(--otp-input-easing-default));
     /* Hide number spinner */
     -moz-appearance: textfield;
   }
@@ -53,11 +53,11 @@
   }
 
   [slot="digit"]:hover:not(:disabled) {
-    border-color: var(--otp-input-border-hover);
+    border-color: var(--otp-input-border-hover, var(--otp-input-border-hover-default));
   }
 
   [slot="digit"]:focus {
-    border-color: var(--otp-input-border-focus);
+    border-color: var(--otp-input-border-focus, var(--otp-input-border-focus-default));
   }
 
   /* ── Disabled ── */
@@ -65,13 +65,13 @@
     pointer-events: none;
   }
   :scope[disabled] [slot="digit"] {
-    background: var(--otp-input-bg-disabled);
-    color: var(--otp-input-fg-disabled);
+    background: var(--otp-input-bg-disabled, var(--otp-input-bg-disabled-default));
+    color: var(--otp-input-fg-disabled, var(--otp-input-fg-disabled-default));
     /* Dashed border rendered via SVG border-image for consistent ~8px
        dashes across browsers (native `border-style: dashed` is too short
        and varies by engine). The border-color fallback is used when
        border-image isn't supported. */
-    border: 1px dashed var(--otp-input-border-disabled);
+    border: 1px dashed var(--otp-input-border-disabled, var(--otp-input-border-disabled-default));
     border-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' preserveAspectRatio='none'><rect x='0.5' y='0.5' width='27' height='27' fill='none' stroke='%23999' stroke-width='1' stroke-dasharray='8 6'/></svg>") 1 repeat;
     cursor: not-allowed;
   }