@adia-ai/web-components 0.6.32 → 0.6.34

package/components/segmented/segmented.css

@@ -1,26 +1,26 @@
 @scope (segmented-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --segmented-height:           var(--a-size);
+    --segmented-height-default:           var(--a-size);
     /* Component-intrinsic visual constants; no --a-space-* equivalent */
-    --segmented-padding:          2px;
-    --segmented-border-width:     0px;
-    --segmented-inset:            calc(var(--segmented-padding) + var(--segmented-border-width));
-    --segmented-radius:           var(--a-radius);
+    --segmented-padding-default:          2px;
+    --segmented-border-width-default:     0px;
+    --segmented-inset-default:            calc(var(--segmented-padding, var(--segmented-padding-default)) + var(--segmented-border-width, var(--segmented-border-width-default)));
+    --segmented-radius-default:           var(--a-radius);
 
     /* ── Colors ── */
-    --segmented-bg:               var(--a-ui-bg);
-    --segmented-border:           transparent;
-    --segmented-indicator-bg:     var(--a-chrome-light);
-    --segmented-indicator-shadow: var(--a-shadow-sm);
-    --segmented-indicator-radius: calc(var(--segmented-radius) - var(--segmented-inset));
+    --segmented-bg-default:               var(--a-ui-bg);
+    --segmented-border-default:           transparent;
+    --segmented-indicator-bg-default:     var(--a-chrome-light);
+    --segmented-indicator-shadow-default: var(--a-shadow-sm);
+    --segmented-indicator-radius-default: calc(var(--segmented-radius, var(--segmented-radius-default)) - var(--segmented-inset, var(--segmented-inset-default)));
 
     /* ── Typography ── */
-    --segmented-font-size:        var(--a-ui-size);
+    --segmented-font-size-default:        var(--a-ui-size);
 
     /* ── Transition ── */
-    --segmented-duration:         var(--a-duration);
-    --segmented-easing:           var(--a-easing-out);
+    --segmented-duration-default:         var(--a-duration);
+    --segmented-easing-default:           var(--a-easing-out);
 
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
 }
@@ -46,13 +46,13 @@
     isolation: isolate;
     overflow: hidden;
 
-    min-height: var(--segmented-height);
-    padding: var(--segmented-padding);
-    font-size: var(--segmented-font-size);
+    min-height: var(--segmented-height, var(--segmented-height-default));
+    padding: var(--segmented-padding, var(--segmented-padding-default));
+    font-size: var(--segmented-font-size, var(--segmented-font-size-default));
 
-    background: var(--segmented-bg);
-    border: var(--segmented-border-width) solid var(--segmented-border);
-    border-radius: var(--segmented-radius);
+    background: var(--segmented-bg, var(--segmented-bg-default));
+    border: var(--segmented-border-width, var(--segmented-border-width-default)) solid var(--segmented-border, var(--segmented-border-default));
+    border-radius: var(--segmented-radius, var(--segmented-radius-default));
   }
 
   /* -- Indicator (hidden until first selection) -- */
@@ -63,16 +63,16 @@
   :scope[data-indicator-ready] > [data-indicator] {
     display: block;
     position: absolute;
-    inset: var(--segmented-inset);
+    inset: var(--segmented-inset, var(--segmented-inset-default));
     right: auto;
-    width: calc((100% - var(--segmented-inset) * 2) / var(--_segment-count));
+    width: calc((100% - var(--segmented-inset, var(--segmented-inset-default)) * 2) / var(--_segment-count));
 
-    background: var(--segmented-indicator-bg);
-    border-radius: var(--segmented-indicator-radius);
-    box-shadow: var(--segmented-indicator-shadow);
+    background: var(--segmented-indicator-bg, var(--segmented-indicator-bg-default));
+    border-radius: var(--segmented-indicator-radius, var(--segmented-indicator-radius-default));
+    box-shadow: var(--segmented-indicator-shadow, var(--segmented-indicator-shadow-default));
     pointer-events: none;
 
-    transition: transform var(--segmented-duration) var(--segmented-easing);
+    transition: transform var(--segmented-duration, var(--segmented-duration-default)) var(--segmented-easing, var(--segmented-easing-default));
   }
 
   /* Size handled by universal [size] attribute system. */

package/components/select/select.css

@@ -1,47 +1,47 @@
 @scope (select-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --select-gap:               var(--a-space-2);
-    --select-trigger-gap:       var(--a-space-1);
-    --select-height:            var(--a-size);
-    --select-px:                var(--a-ui-px);
-    --select-radius:            var(--a-radius);
-    --select-leading-radius:    var(--a-radius-full);
+    --select-gap-default:               var(--a-space-2);
+    --select-trigger-gap-default:       var(--a-space-1);
+    --select-height-default:            var(--a-size);
+    --select-px-default:                var(--a-ui-px);
+    --select-radius-default:            var(--a-radius);
+    --select-leading-radius-default:    var(--a-radius-full);
 
     /* ── Typography ── */
-    --select-font-size:         var(--a-ui-size);
-    --select-label-size:        var(--a-label-size);
+    --select-font-size-default:         var(--a-ui-size);
+    --select-label-size-default:        var(--a-label-size);
 
     /* ── Colors ── */
-    --select-bg:                var(--a-ui-bg);
-    --select-bg-selected:       var(--a-ui-bg-selected);
-    --select-bg-hover:          var(--a-ui-bg-hover);
-    --select-border:            var(--a-ui-border);
-    --select-border-hover:      var(--a-ui-border-hover);
-    --select-focus-ring:        var(--a-focus-ring);
-    --select-focus-ring-invalid: var(--a-focus-ring-invalid);
-    --select-label-fg:          var(--a-ui-text-muted);
-    --select-placeholder-fg:    var(--a-ui-text-placeholder);
-    --select-caret-fg:          var(--a-ui-text-muted);
-    --select-fg:                var(--a-ui-text);
-    --select-fg-hover:          var(--a-ui-text-hover);
-    --select-fg-selected:       var(--a-ui-text-selected);
-    --select-fg-subtle:         var(--a-ui-text-subtle);
-    --select-fg-muted:          var(--a-ui-text-muted);
-    --select-fg-disabled:       var(--a-ui-text-disabled);
-    --select-ghost-bg-hover:    var(--a-bg-muted);
+    --select-bg-default:                var(--a-ui-bg);
+    --select-bg-selected-default:       var(--a-ui-bg-selected);
+    --select-bg-hover-default:          var(--a-ui-bg-hover);
+    --select-border-default:            var(--a-ui-border);
+    --select-border-hover-default:      var(--a-ui-border-hover);
+    --select-focus-ring-default:        var(--a-focus-ring);
+    --select-focus-ring-invalid-default: var(--a-focus-ring-invalid);
+    --select-label-fg-default:          var(--a-ui-text-muted);
+    --select-placeholder-fg-default:    var(--a-ui-text-placeholder);
+    --select-caret-fg-default:          var(--a-ui-text-muted);
+    --select-fg-default:                var(--a-ui-text);
+    --select-fg-hover-default:          var(--a-ui-text-hover);
+    --select-fg-selected-default:       var(--a-ui-text-selected);
+    --select-fg-subtle-default:         var(--a-ui-text-subtle);
+    --select-fg-muted-default:          var(--a-ui-text-muted);
+    --select-fg-disabled-default:       var(--a-ui-text-disabled);
+    --select-ghost-bg-hover-default:    var(--a-bg-muted);
 
     /* ── Transition ── */
-    --select-duration:          var(--a-duration-fast);
-    --select-easing:            var(--a-easing);
+    --select-duration-default:          var(--a-duration-fast);
+    --select-easing-default:            var(--a-easing);
 
     /* ── Listbox ── */
-    --select-option-px:         var(--a-ui-px);
-    --select-option-py:         var(--a-ui-py);
-    --select-option-bg-hover:   var(--a-bg-hover);
-    --select-option-fg-active:  var(--a-ui-text-active);
-    --select-option-fg-disabled: var(--a-ui-text-disabled);
-    --select-group-label-size:  var(--a-ui-size);
+    --select-option-px-default:         var(--a-ui-px);
+    --select-option-py-default:         var(--a-ui-py);
+    --select-option-bg-hover-default:   var(--a-bg-hover);
+    --select-option-fg-active-default:  var(--a-ui-text-active);
+    --select-option-fg-disabled-default: var(--a-ui-text-disabled);
+    --select-group-label-size-default:  var(--a-ui-size);
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
 }
 
@@ -51,9 +51,9 @@
     position: relative;
     display: flex;
     flex-direction: column;
-    gap: var(--select-gap);
+    gap: var(--select-gap, var(--select-gap-default));
     min-width: 0;
-    font-size: var(--select-font-size);
+    font-size: var(--select-font-size, var(--select-font-size-default));
   }
 
   :scope[data-direction="row"] {
@@ -61,13 +61,13 @@
     grid-template-columns: 1fr 1fr;
     align-items: center;
   }
-  :scope[disabled] { pointer-events: none; color: var(--select-fg-disabled); }
+  :scope[disabled] { pointer-events: none; color: var(--select-fg-disabled, var(--select-fg-disabled-default)); }
 
   /* Label */
   :scope::before {
     content: attr(label);
-    font-size: var(--select-label-size);
-    color: var(--select-label-fg);
+    font-size: var(--select-label-size, var(--select-label-size-default));
+    color: var(--select-label-fg, var(--select-label-fg-default));
   }
   :scope:not([label])::before,
   :scope[label=""]::before { display: none; }
@@ -77,42 +77,42 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: var(--select-trigger-gap);
+    gap: var(--select-trigger-gap, var(--select-trigger-gap-default));
     min-width: 0;
-    min-height: var(--select-height);
-    padding: 0 var(--select-px);
-    border: 1px solid var(--select-border);
-    border-radius: var(--select-radius);
-    background: var(--select-bg);
+    min-height: var(--select-height, var(--select-height-default));
+    padding: 0 var(--select-px, var(--select-px-default));
+    border: 1px solid var(--select-border, var(--select-border-default));
+    border-radius: var(--select-radius, var(--select-radius-default));
+    background: var(--select-bg, var(--select-bg-default));
     line-height: 1;
     cursor: pointer;
     /* Match every property the hover / focus / invalid states change. */
     transition:
-      background   var(--select-duration) var(--select-easing),
-      border-color var(--select-duration) var(--select-easing),
-      color        var(--select-duration) var(--select-easing),
-      box-shadow   var(--select-duration) var(--select-easing);
+      background   var(--select-duration, var(--select-duration-default)) var(--select-easing, var(--select-easing-default)),
+      border-color var(--select-duration, var(--select-duration-default)) var(--select-easing, var(--select-easing-default)),
+      color        var(--select-duration, var(--select-duration-default)) var(--select-easing, var(--select-easing-default)),
+      box-shadow   var(--select-duration, var(--select-duration-default)) var(--select-easing, var(--select-easing-default));
   }
   [slot="trigger"]:hover {
-    border-color: var(--select-border-hover);
-    background: var(--select-bg-hover);
-    color: var(--select-fg);
+    border-color: var(--select-border-hover, var(--select-border-hover-default));
+    background: var(--select-bg-hover, var(--select-bg-hover-default));
+    color: var(--select-fg, var(--select-fg-default));
   }
   [slot="trigger"]:hover [slot="caret"] {
-    color: var(--select-fg-subtle);
+    color: var(--select-fg-subtle, var(--select-fg-subtle-default));
   }
   :scope:focus-visible { outline: none; }
   :scope:focus-visible [slot="trigger"] {
     /* Canonical ring via L3 token (see semantics.css FOCUS block). */
-    box-shadow: var(--select-focus-ring);
-    color: var(--select-fg);
+    box-shadow: var(--select-focus-ring, var(--select-focus-ring-default));
+    color: var(--select-fg, var(--select-fg-default));
   }
   :scope[aria-invalid="true"]:focus-visible [slot="trigger"],
   :scope[error]:focus-visible [slot="trigger"] {
-    box-shadow: var(--select-focus-ring-invalid);
+    box-shadow: var(--select-focus-ring-invalid, var(--select-focus-ring-invalid-default));
   }
   :scope:focus-visible::before {
-    color: var(--select-fg-subtle);
+    color: var(--select-fg-subtle, var(--select-fg-subtle-default));
   }
 
   /* Leading icon / avatar — inline-flex centers icon content vertically
@@ -122,14 +122,14 @@
     align-items: center;
     flex-shrink: 0;
     line-height: 1;
-    --a-icon-size: var(--select-font-size);
-    color: var(--select-fg-muted);
+    --a-icon-size: var(--select-font-size, var(--select-font-size-default));
+    color: var(--select-fg-muted, var(--select-fg-muted-default));
   }
 
   img[slot="leading"] {
-    width: var(--select-leading-size, calc(var(--select-height) - var(--select-gap)));
-    height: var(--select-leading-size, calc(var(--select-height) - var(--select-gap)));
-    border-radius: var(--select-leading-radius);
+    width: var(--select-leading-size, calc(var(--select-height, var(--select-height-default)) - var(--select-gap, var(--select-gap-default))));
+    height: var(--select-leading-size, calc(var(--select-height, var(--select-height-default)) - var(--select-gap, var(--select-gap-default))));
+    border-radius: var(--select-leading-radius, var(--select-leading-radius-default));
     object-fit: cover;
   }
 
@@ -138,7 +138,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    color: var(--select-fg);
+    color: var(--select-fg, var(--select-fg-default));
   }
   input[slot="display"] {
     border: none;
@@ -147,23 +147,23 @@
     padding: 0;
     margin: 0;
     font: inherit;
-    color: var(--select-fg);
+    color: var(--select-fg, var(--select-fg-default));
     min-width: 0;
     width: 100%;
   }
   input[slot="display"]::placeholder {
-    color: var(--select-placeholder-fg);
+    color: var(--select-placeholder-fg, var(--select-placeholder-fg-default));
   }
   :scope:not([value]) [slot="display"],
   :scope[value=""] [slot="display"] {
-    color: var(--select-placeholder-fg);
+    color: var(--select-placeholder-fg, var(--select-placeholder-fg-default));
   }
 
   /* Caret color is held against button-ui's stronger cascade by chaining
      :scope > [slot="trigger"] > [slot="caret"] — matches at the same
      specificity as button-ui's own slot rules without !important. */
   :scope > [slot="trigger"] > [slot="caret"] {
-    color: var(--select-caret-fg);
+    color: var(--select-caret-fg, var(--select-caret-fg-default));
     flex-shrink: 0;
   }
 
@@ -171,16 +171,16 @@
 
   /* Ghost variant */
   :scope[variant="ghost"] {
-    --select-bg: transparent;
-    --select-border: transparent;
-    --select-border-hover: transparent;
+    --select-bg-default: transparent;
+    --select-border-default: transparent;
+    --select-border-hover-default: transparent;
   }
   :scope[variant="ghost"] [slot="trigger"]:hover {
-    background: var(--select-ghost-bg-hover);
-    color: var(--select-fg);
+    background: var(--select-ghost-bg-hover, var(--select-ghost-bg-hover-default));
+    color: var(--select-fg, var(--select-fg-default));
   }
   :scope[variant="ghost"] > [slot="trigger"]:hover > [slot="caret"] {
-    color: var(--select-fg-subtle);
+    color: var(--select-fg-subtle, var(--select-fg-subtle-default));
   }
 }
 
@@ -197,7 +197,7 @@ select-ui [slot="listbox"] {
   overflow-y: auto;
   font-family: inherit;
   font-size: var(--a-ui-size);
-  color: var(--select-fg);
+  color: var(--select-fg, var(--select-fg-default));
 
   /* Positioned by JS (#positionListbox) — fixed to viewport */
   width: max-content;
@@ -225,7 +225,7 @@ select-ui [role="option"] {
   padding: var(--a-space-1) var(--a-ui-px);
   border-radius: var(--a-radius-sm);
   white-space: nowrap;
-  color: var(--select-fg-subtle);
+  color: var(--select-fg-subtle, var(--select-fg-subtle-default));
   cursor: pointer;
   transition:
     background var(--a-duration-fast) var(--a-easing),
@@ -233,16 +233,16 @@ select-ui [role="option"] {
 }
 select-ui [role="option"]:hover,
 select-ui [role="option"][data-focused] {
-  background: var(--select-option-bg-hover);
-  color: var(--select-fg-hover);
+  background: var(--select-option-bg-hover, var(--select-option-bg-hover-default));
+  color: var(--select-fg-hover, var(--select-fg-hover-default));
 }
 select-ui [role="option"][aria-selected="true"] {
-  color: var(--select-fg-selected);
-  background: var(--select-bg-selected);
+  color: var(--select-fg-selected, var(--select-fg-selected-default));
+  background: var(--select-bg-selected, var(--select-bg-selected-default));
   font-weight: var(--a-ui-weight);
 }
 select-ui [role="option"][aria-disabled="true"] {
-  color: var(--select-option-fg-disabled);
+  color: var(--select-option-fg-disabled, var(--select-option-fg-disabled-default));
   cursor: not-allowed;
 }
 select-ui [role="option"][aria-disabled="true"]:hover {
@@ -252,7 +252,7 @@ select-ui [role="option"][aria-disabled="true"]:hover {
 /* Option with icon */
 select-ui [role="option"] icon-ui {
   --a-icon-size: var(--a-ui-size);
-  color: var(--select-fg-muted);
+  color: var(--select-fg-muted, var(--select-fg-muted-default));
   margin-inline-end: var(--a-space-1);
   vertical-align: -0.125em;
 }
@@ -284,21 +284,21 @@ select-ui [data-menu-header] img {
 select-ui [data-menu-header] strong {
   display: block;
   font-weight: var(--a-weight-medium);
-  color: var(--select-fg);
+  color: var(--select-fg, var(--select-fg-default));
   font-size: var(--a-ui-size);
 }
 
 select-ui [data-menu-header] span {
   display: block;
   font-size: var(--a-ui-sm);
-  color: var(--select-fg-muted);
+  color: var(--select-fg-muted, var(--select-fg-muted-default));
 }
 
 select-ui [role="group"] [slot="group-label"] {
   padding: var(--a-space-1) var(--a-ui-px);
   font-size: var(--a-ui-tiny);
   font-weight: var(--a-ui-weight);
-  color: var(--select-fg-muted);
+  color: var(--select-fg-muted, var(--select-fg-muted-default));
   text-transform: uppercase;
   letter-spacing: 0.05em;
   white-space: nowrap;
@@ -317,6 +317,6 @@ select-ui > [slot="hint"] {
   display: block;
   margin-top: var(--select-hint-mt, var(--a-space-1));
   font-size: var(--select-hint-size, var(--a-ui-xs));
-  color: var(--select-hint-fg, var(--select-fg-muted));
+  color: var(--select-hint-fg, var(--select-fg-muted, var(--select-fg-muted-default)));
   line-height: var(--select-hint-lh, 1.4);
 }

package/components/skeleton/skeleton.css

@@ -1,11 +1,11 @@
 @scope (skeleton-ui) {
   :where(:scope) {
     /* ── Tokens ── */
-    --skeleton-bg:        var(--a-bg-muted);
-    --skeleton-highlight: var(--a-bg-subtle);
-    --skeleton-radius:    var(--a-radius-sm);
-    --skeleton-duration:  1.5s;
-    --skeleton-easing:    var(--a-easing);
+    --skeleton-bg-default:        var(--a-bg-muted);
+    --skeleton-highlight-default: var(--a-bg-subtle);
+    --skeleton-radius-default:    var(--a-radius-sm);
+    --skeleton-duration-default:  1.5s;
+    --skeleton-easing-default:    var(--a-easing);
   }
 
   :scope {
@@ -14,16 +14,16 @@
     display: block;
     position: relative;
     overflow: hidden;
-    background: var(--skeleton-bg);
-    border-radius: var(--skeleton-radius);
+    background: var(--skeleton-bg, var(--skeleton-bg-default));
+    border-radius: var(--skeleton-radius, var(--skeleton-radius-default));
   }
 
   /* ── Radius variants ── */
-  :scope[radius="none"] { --skeleton-radius: 0; }
-  :scope[radius="sm"]   { --skeleton-radius: var(--a-radius-sm); }
-  :scope[radius="md"]   { --skeleton-radius: var(--a-radius-md); }
-  :scope[radius="lg"]   { --skeleton-radius: var(--a-radius-lg); }
-  :scope[radius="full"] { --skeleton-radius: var(--a-radius-full); }
+  :scope[radius="none"] { --skeleton-radius-default: 0; }
+  :scope[radius="sm"]   { --skeleton-radius-default: var(--a-radius-sm); }
+  :scope[radius="md"]   { --skeleton-radius-default: var(--a-radius-md); }
+  :scope[radius="lg"]   { --skeleton-radius-default: var(--a-radius-lg); }
+  :scope[radius="full"] { --skeleton-radius-default: var(--a-radius-full); }
 
   /* ── Shimmer animation (default; suppress with [static]) ── */
   :scope:not([static])::after {
@@ -33,11 +33,11 @@
     background: linear-gradient(
       90deg,
       transparent 25%,
-      var(--skeleton-highlight) 50%,
+      var(--skeleton-highlight, var(--skeleton-highlight-default)) 50%,
       transparent 75%
     );
     background-size: 200% 100%;
-    animation: skeleton-shimmer var(--skeleton-duration) var(--skeleton-easing) infinite;
+    animation: skeleton-shimmer var(--skeleton-duration, var(--skeleton-duration-default)) var(--skeleton-easing, var(--skeleton-easing-default)) infinite;
   }
 
   @keyframes skeleton-shimmer {