@adia-ai/web-components 0.6.33 → 0.6.35

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. */
 }

package/components/radio/radio.js

@@ -10,7 +10,7 @@
  */
 
 import { defineIfFree } from '../../core/register.js';
-import { UIRadio } from './class.js';
+import { UIRadio } from './radio.class.js';
 
 defineIfFree('radio-ui', UIRadio);
 

package/components/range/range.css

@@ -2,44 +2,44 @@
    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);
+  background: var(--range-fill-bg-hover, var(--range-fill-bg-hover-default));
 }
 
 @scope (range-ui) {
   :where(:scope) {
     /* ── Tokens (wired to --a-ui-*) ── */
-    --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-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%;
+    --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%;
 
     /* ── Transitions ── */
-    --range-duration:        var(--a-duration-fast);
-    --range-easing:          var(--a-easing);
+    --range-duration-default:        var(--a-duration-fast);
+    --range-easing-default:          var(--a-easing);
 
     /* ── Layout ── */
-    --range-layer-gap:       var(--a-space-1);
+    --range-layer-gap-default:       var(--a-space-1);
 
     /* ── Hover text ── */
-    --range-label-fg-hover:  var(--a-fg-subtle);
+    --range-label-fg-hover-default:  var(--a-fg-subtle);
 
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
 }
@@ -55,61 +55,61 @@ range-ui:not([disabled]) [slot="field"]:hover [data-layer="fill"] {
   [slot="field"] {
     position: relative;
     display: block;
-    min-height: var(--range-height);
-    border: 1px solid var(--range-border);
-    border-radius: var(--range-radius);
+    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));
     overflow: hidden;
-    background: var(--range-bg);
+    background: var(--range-bg, var(--range-bg-default));
     font: inherit;
-    font-size: var(--range-font-size);
+    font-size: var(--range-font-size, var(--range-font-size-default));
     line-height: 1;
     transition:
-      border-color var(--range-duration) var(--range-easing),
-      background var(--range-duration) var(--range-easing);
+      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));
     user-select: none;
     touch-action: none;
   }
   [slot="field"]:hover {
-    border-color: var(--range-border-hover);
+    border-color: var(--range-border-hover, var(--range-border-hover-default));
   }
   :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);
+    box-shadow: var(--range-focus-ring, var(--range-focus-ring-default));
   }
   :scope[aria-invalid="true"]:focus-visible [slot="field"],
   :scope[error]:focus-visible [slot="field"] {
-    box-shadow: var(--range-focus-ring-invalid);
+    box-shadow: var(--range-focus-ring-invalid, var(--range-focus-ring-invalid-default));
   }
 
   /* ── Dual-layer fill: identical layouts, overlay clipped to fill % ── */
   [slot="layer"] {
     display: flex;
     align-items: center;
-    gap: var(--range-layer-gap);
-    min-height: var(--range-height);
-    padding: 0 var(--range-px);
+    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));
     box-sizing: border-box;
   }
 
   [data-layer="fill"] {
     position: absolute;
     inset: 0;
-    background: var(--range-fill-bg);
-    clip-path: inset(0 calc(100% - var(--range-fill-pct)) 0 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);
     pointer-events: none;
-    transition: clip-path var(--range-duration) var(--range-easing);
+    transition: clip-path var(--range-duration, var(--range-duration-default)) var(--range-easing, var(--range-easing-default));
   }
 
   /* Base layer text colors */
-  [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); }
+  [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)); }
 
   /* Fill layer text colors (what shows through the filled portion) */
-  [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; }
+  [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; }
 
   /* Shared layout rules */
   [slot="label"] {
@@ -128,32 +128,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);
+    color: var(--range-label-fg-hover, var(--range-label-fg-hover-default));
   }
   [slot="field"]:hover [data-layer="base"] [slot="suffix"],
   :scope:focus-visible [data-layer="base"] [slot="suffix"] {
-    color: var(--range-label-fg-hover);
+    color: var(--range-label-fg-hover, var(--range-label-fg-hover-default));
   }
 
   /* 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);
+    border-color: var(--range-border-dragging, var(--range-border-dragging-default));
   }
   :scope[data-dragging] [data-layer="fill"] {
-    background: var(--range-fill-bg-active);
+    background: var(--range-fill-bg-active, var(--range-fill-bg-active-default));
     transition: none;
   }
 
   /* Disabled: muted fill + muted text */
   :scope[disabled] [data-layer="fill"] {
-    background: var(--range-fill-bg-disabled);
+    background: var(--range-fill-bg-disabled, var(--range-fill-bg-disabled-default));
   }
   :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);
+    color: var(--range-fill-fg-disabled, var(--range-fill-fg-disabled-default));
   }
 
   /* Size handled by universal [size] attribute system. */

package/components/range/range.js

@@ -10,7 +10,7 @@
  */
 
 import { defineIfFree } from '../../core/register.js';
-import { UIRange } from './class.js';
+import { UIRange } from './range.class.js';
 
 defineIfFree('range-ui', UIRange);
 

package/components/rating/rating.css

@@ -2,26 +2,26 @@
    root. Plain selector outside the @scope works. See
    docs/BROWSER-COMPAT.md §3a. */
 rating-ui:hover [data-rating-symbol] {
-  color: var(--rating-fg-hover);
+  color: var(--rating-fg-hover, var(--rating-fg-hover-default));
 }
 
 @scope (rating-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --rating-gap:              var(--a-space-1);
-    --rating-symbol-size:      var(--a-space-5);
+    --rating-gap-default:              var(--a-space-1);
+    --rating-symbol-size-default:      var(--a-space-5);
 
     /* ── Colors ── */
-    --rating-fg-empty:         var(--a-fg-muted);
-    --rating-fg-filled:        var(--a-fg-strong);
-    --rating-fg-hover:         var(--a-fg-strong);
+    --rating-fg-empty-default:         var(--a-fg-muted);
+    --rating-fg-filled-default:        var(--a-fg-strong);
+    --rating-fg-hover-default:         var(--a-fg-strong);
 
     /* ── Interaction ── */
-    --rating-duration:         var(--a-duration-fast);
-    --rating-easing:           var(--a-easing);
-    --rating-focus-ring:       0 0 0 2px var(--a-focus-ring);
-    --rating-focus-offset:     var(--a-space-1);
-    --rating-focus-radius:     var(--a-radius-sm);
+    --rating-duration-default:         var(--a-duration-fast);
+    --rating-easing-default:           var(--a-easing);
+    --rating-focus-ring-default:       0 0 0 2px var(--a-focus-ring);
+    --rating-focus-offset-default:     var(--a-space-1);
+    --rating-focus-radius-default:     var(--a-radius-sm);
   }
 
   :scope {
@@ -29,7 +29,7 @@ rating-ui:hover [data-rating-symbol] {
     box-sizing: border-box;
     display: inline-flex;
     align-items: center;
-    gap: var(--rating-gap);
+    gap: var(--rating-gap, var(--rating-gap-default));
     cursor: pointer;
     user-select: none;
     line-height: 1;
@@ -46,30 +46,30 @@ rating-ui:hover [data-rating-symbol] {
 
   :scope:focus-visible {
     outline: none;
-    border-radius: var(--rating-focus-radius);
-    box-shadow: var(--rating-focus-ring);
-    outline-offset: var(--rating-focus-offset);
+    border-radius: var(--rating-focus-radius, var(--rating-focus-radius-default));
+    box-shadow: var(--rating-focus-ring, var(--rating-focus-ring-default));
+    outline-offset: var(--rating-focus-offset, var(--rating-focus-offset-default));
   }
 
   [data-rating-symbol] {
     position: relative;
     display: inline-block;
-    width:  var(--rating-symbol-size);
-    height: var(--rating-symbol-size);
-    color: var(--rating-fg-empty);
-    transition: color var(--rating-duration) var(--rating-easing);
+    width:  var(--rating-symbol-size, var(--rating-symbol-size-default));
+    height: var(--rating-symbol-size, var(--rating-symbol-size-default));
+    color: var(--rating-fg-empty, var(--rating-fg-empty-default));
+    transition: color var(--rating-duration, var(--rating-duration-default)) var(--rating-easing, var(--rating-easing-default));
   }
 
   [data-rating-symbol] icon-ui {
-    --a-icon-size: var(--rating-symbol-size);
+    --a-icon-size: var(--rating-symbol-size, var(--rating-symbol-size-default));
     position: absolute;
     inset: 0;
   }
 
   [data-rating-symbol-fg] {
-    color: var(--rating-fg-filled);
+    color: var(--rating-fg-filled, var(--rating-fg-filled-default));
     clip-path: inset(0 100% 0 0);
-    transition: clip-path var(--rating-duration) var(--rating-easing);
+    transition: clip-path var(--rating-duration, var(--rating-duration-default)) var(--rating-easing, var(--rating-easing-default));
   }
 
   [data-rating-symbol][data-fill="half"] [data-rating-symbol-fg] {
@@ -81,15 +81,15 @@ rating-ui:hover [data-rating-symbol] {
 
   /* ── Variants override TOKENS only ── */
   :scope[variant="accent"] {
-    --rating-fg-filled: var(--a-accent-bg);
-    --rating-fg-hover:  var(--a-accent-bg);
+    --rating-fg-filled-default: var(--a-accent-bg);
+    --rating-fg-hover-default:  var(--a-accent-bg);
   }
   :scope[variant="warning"] {
-    --rating-fg-filled: var(--a-warning-bg);
-    --rating-fg-hover:  var(--a-warning-bg);
+    --rating-fg-filled-default: var(--a-warning-bg);
+    --rating-fg-hover-default:  var(--a-warning-bg);
   }
 
   /* ── Size ── */
-  :scope[size="sm"] { --rating-symbol-size: var(--a-space-4); }
-  :scope[size="lg"] { --rating-symbol-size: var(--a-space-7); }
+  :scope[size="sm"] { --rating-symbol-size-default: var(--a-space-4); }
+  :scope[size="lg"] { --rating-symbol-size-default: var(--a-space-7); }
 }

package/components/rating/rating.js

@@ -10,7 +10,7 @@
  */
 
 import { defineIfFree } from '../../core/register.js';
-import { UIRating } from './class.js';
+import { UIRating } from './rating.class.js';
 
 defineIfFree('rating-ui', UIRating);