@adia-ai/web-components 0.7.3 → 0.7.5

package/components/search/search.css

@@ -1,9 +1,9 @@
 @scope (search-ui) {
   :where(:scope) {
     /* ── Tokens ── */
-    --search-radius-default:      var(--a-radius);
-    --search-duration-default:    var(--a-duration-fast);
-    --search-easing-default:      var(--a-easing);
+    --search-radius:      var(--a-radius);
+    --search-duration:    var(--a-duration-fast);
+    --search-easing:      var(--a-easing);
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
 }
 
@@ -19,11 +19,11 @@
   }
 
   [slot="suffix"] {
-    transition: opacity var(--search-duration, var(--search-duration-default)) var(--search-easing, var(--search-easing-default));
+    transition: opacity var(--search-duration) var(--search-easing);
   }
 
   /* Override input-ui radius to pill for search */
   input-ui {
-    --input-radius: var(--search-radius, var(--search-radius-default));
+    --input-radius: var(--search-radius);
   }
 }

package/components/segment/segment.css

@@ -2,35 +2,36 @@
    (Flavor B — attribute-removal restyle) both fail inside `@scope`.
    Selectors moved out. See docs/BROWSER-COMPAT.md §3a. */
 segment-ui:not([disabled]):not([selected]):hover {
-  color: var(--segment-fg-hover, var(--segment-fg-hover-default));
+  color: var(--segment-fg-hover);
 }
 segment-ui[selected] {
-  color: var(--segment-fg-selected, var(--segment-fg-selected-default));
+  color: var(--segment-fg-selected);
 }
 
 @scope (segment-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --segment-px-default:              var(--a-ui-px);
-    --segment-gap-default:             var(--a-space-1);
-    --segment-radius-default:          calc(var(--a-radius) - 2px);
+    --segment-px:              var(--a-ui-px);
+    --segment-gap:             var(--a-space-1);
+    --segment-radius:          calc(var(--a-radius) - 2px);
 
     /* ── Typography ── */
-    --segment-font-size-default:       var(--a-ui-size);
-    --segment-font-weight-default:     var(--a-ui-weight);
+    --segment-font-size:       var(--a-ui-size);
+    --segment-font-weight:     var(--a-ui-weight);
+    --segment-font-family:     var(--a-font-family-ui);
 
     /* ── Colors ── */
-    --segment-fg-default:              var(--a-ui-text-subtle);
-    --segment-fg-hover-default:        var(--a-ui-text-hover);
-    --segment-fg-selected-default:     var(--a-chrome-dark);
-    --segment-fg-disabled-default:     var(--a-ui-text-disabled);
+    --segment-fg:              var(--a-ui-text-subtle);
+    --segment-fg-hover:        var(--a-ui-text-hover);
+    --segment-fg-selected:     var(--a-chrome-dark);
+    --segment-fg-disabled:     var(--a-ui-text-disabled);
 
     /* ── Transition ── */
-    --segment-duration-default:        var(--a-duration-fast);
-    --segment-easing-default:          var(--a-easing);
+    --segment-duration:        var(--a-duration-fast);
+    --segment-easing:          var(--a-easing);
 
     /* ── Focus ── */
-    --segment-focus-ring-default:      var(--a-focus-ring);
+    --segment-focus-ring:      var(--a-focus-ring);
   }
 
   :scope {
@@ -41,15 +42,19 @@ segment-ui[selected] {
     justify-content: center;
     align-self: stretch;
     min-width: 0;
-    gap: var(--segment-gap, var(--segment-gap-default));
+    gap: var(--segment-gap);
 
-    padding-inline: var(--segment-px, var(--segment-px-default));
+    padding-inline: var(--segment-px);
 
     font: inherit;
-    font-size: var(--segment-font-size, var(--segment-font-size-default));
-    font-weight: var(--segment-font-weight, var(--segment-font-weight-default));
+    /* font-family floor — `font: inherit` alone has no default, so a broken
+       inherited font (e.g. serif host doc) leaks straight through. Anchor to
+       the UI font; overridable via --segment-font-family. */
+    font-family: var(--segment-font-family);
+    font-size: var(--segment-font-size);
+    font-weight: var(--segment-font-weight);
     line-height: 1;
-    color: var(--segment-fg, var(--segment-fg-default));
+    color: var(--segment-fg);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -59,12 +64,12 @@ segment-ui[selected] {
     z-index: 1;
     cursor: pointer;
     user-select: none;
-    border-radius: var(--segment-radius, var(--segment-radius-default));
+    border-radius: var(--segment-radius);
     background: transparent;
 
     transition:
-      color var(--segment-duration, var(--segment-duration-default)) var(--segment-easing, var(--segment-easing-default)),
-      background var(--segment-duration, var(--segment-duration-default)) var(--segment-easing, var(--segment-easing-default));
+      color var(--segment-duration) var(--segment-easing),
+      background var(--segment-duration) var(--segment-easing);
   }
 
   /* Text rendered via ::after so consumers can drive label via [text].
@@ -93,11 +98,11 @@ segment-ui[selected] {
 
   :scope:focus-visible {
     outline: none;
-    box-shadow: var(--segment-focus-ring, var(--segment-focus-ring-default));
+    box-shadow: var(--segment-focus-ring);
   }
 
   :scope[disabled] {
-    color: var(--segment-fg-disabled, var(--segment-fg-disabled-default));
+    color: var(--segment-fg-disabled);
     cursor: not-allowed;
     pointer-events: none;
   }

package/components/segmented/segmented.css

@@ -1,26 +1,27 @@
 @scope (segmented-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --segmented-height-default:           var(--a-size);
+    --segmented-height:           var(--a-size);
     /* Component-intrinsic visual constants; no --a-space-* equivalent */
-    --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);
+    --segmented-padding:          2px;
+    --segmented-border-width:     0px;
+    --segmented-inset:            calc(var(--segmented-padding) + var(--segmented-border-width));
+    --segmented-radius:           var(--a-radius);
 
     /* ── Colors ── */
-    --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)));
+    --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));
 
     /* ── Typography ── */
-    --segmented-font-size-default:        var(--a-ui-size);
+    --segmented-font-size:        var(--a-ui-size);
+    --segmented-font-family:      var(--a-font-family-ui);
 
     /* ── Transition ── */
-    --segmented-duration-default:         var(--a-duration);
-    --segmented-easing-default:           var(--a-easing-out);
+    --segmented-duration:         var(--a-duration);
+    --segmented-easing:           var(--a-easing-out);
 
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
 }
@@ -46,13 +47,17 @@
     isolation: isolate;
     overflow: hidden;
 
-    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));
+    min-height: var(--segmented-height);
+    padding: var(--segmented-padding);
+    /* font-family floor — anchor to the UI font so the control keeps its
+       AdiaUI identity even if the host page's inherited font is broken/unset
+       (e.g. a serif host document). Overridable via --segmented-font-family. */
+    font-family: var(--segmented-font-family);
+    font-size: var(--segmented-font-size);
 
-    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));
+    background: var(--segmented-bg);
+    border: var(--segmented-border-width) solid var(--segmented-border);
+    border-radius: var(--segmented-radius);
   }
 
   /* Display convention (ADR-0037): block-level by default; [inline] opts back to inline-level. */
@@ -66,16 +71,16 @@
   :scope[data-indicator-ready] > [data-indicator] {
     display: block;
     position: absolute;
-    inset: var(--segmented-inset, var(--segmented-inset-default));
+    inset: var(--segmented-inset);
     right: auto;
-    width: calc((100% - var(--segmented-inset, var(--segmented-inset-default)) * 2) / var(--_segment-count));
+    width: calc((100% - var(--segmented-inset) * 2) / var(--_segment-count));
 
-    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));
+    background: var(--segmented-indicator-bg);
+    border-radius: var(--segmented-indicator-radius);
+    box-shadow: var(--segmented-indicator-shadow);
     pointer-events: none;
 
-    transition: transform var(--segmented-duration, var(--segmented-duration-default)) var(--segmented-easing, var(--segmented-easing-default));
+    transition: transform var(--segmented-duration) var(--segmented-easing);
   }
 
   /* Size handled by universal [size] attribute system. */

package/components/select/select.css

@@ -1,47 +1,47 @@
 @scope (select-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --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);
+    --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);
 
     /* ── Typography ── */
-    --select-font-size-default:         var(--a-ui-size);
-    --select-label-size-default:        var(--a-label-size);
+    --select-font-size:         var(--a-ui-size);
+    --select-label-size:        var(--a-label-size);
 
     /* ── Colors ── */
-    --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);
+    --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);
 
     /* ── Transition ── */
-    --select-duration-default:          var(--a-duration-fast);
-    --select-easing-default:            var(--a-easing);
+    --select-duration:          var(--a-duration-fast);
+    --select-easing:            var(--a-easing);
 
     /* ── Listbox ── */
-    --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);
+    --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);
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
 }
 
@@ -51,9 +51,11 @@
     position: relative;
     display: flex;
     flex-direction: column;
-    gap: var(--select-gap, var(--select-gap-default));
+    gap: var(--select-gap);
     min-width: 0;
-    font-size: var(--select-font-size, var(--select-font-size-default));
+    /* font-family floor on the host — trigger/native-select/options inherit it. */
+    font-family: var(--select-font-family, var(--a-font-family-ui));
+    font-size: var(--select-font-size);
   }
 
   :scope[data-direction="row"] {
@@ -61,13 +63,13 @@
     grid-template-columns: 1fr 1fr;
     align-items: center;
   }
-  :scope[disabled] { pointer-events: none; color: var(--select-fg-disabled, var(--select-fg-disabled-default)); }
+  :scope[disabled] { pointer-events: none; color: var(--select-fg-disabled); }
 
   /* Label */
   :scope::before {
     content: attr(label);
-    font-size: var(--select-label-size, var(--select-label-size-default));
-    color: var(--select-label-fg, var(--select-label-fg-default));
+    font-size: var(--select-label-size);
+    color: var(--select-label-fg);
   }
   :scope:not([label])::before,
   :scope[label=""]::before { display: none; }
@@ -77,42 +79,42 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: var(--select-trigger-gap, var(--select-trigger-gap-default));
+    gap: var(--select-trigger-gap);
     min-width: 0;
-    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));
+    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);
     line-height: 1;
     cursor: pointer;
     /* Match every property the hover / focus / invalid states change. */
     transition:
-      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));
+      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);
   }
   [slot="trigger"]:hover {
-    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));
+    border-color: var(--select-border-hover);
+    background: var(--select-bg-hover);
+    color: var(--select-fg);
   }
   [slot="trigger"]:hover [slot="caret"] {
-    color: var(--select-fg-subtle, var(--select-fg-subtle-default));
+    color: var(--select-fg-subtle);
   }
   :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, var(--select-focus-ring-default));
-    color: var(--select-fg, var(--select-fg-default));
+    box-shadow: var(--select-focus-ring);
+    color: var(--select-fg);
   }
   :scope[aria-invalid="true"]:focus-visible [slot="trigger"],
   :scope[error]:focus-visible [slot="trigger"] {
-    box-shadow: var(--select-focus-ring-invalid, var(--select-focus-ring-invalid-default));
+    box-shadow: var(--select-focus-ring-invalid);
   }
   :scope:focus-visible::before {
-    color: var(--select-fg-subtle, var(--select-fg-subtle-default));
+    color: var(--select-fg-subtle);
   }
 
   /* Leading icon / avatar — inline-flex centers icon content vertically
@@ -122,14 +124,14 @@
     align-items: center;
     flex-shrink: 0;
     line-height: 1;
-    --a-icon-size: var(--select-font-size, var(--select-font-size-default));
-    color: var(--select-fg-muted, var(--select-fg-muted-default));
+    --a-icon-size: var(--select-font-size);
+    color: var(--select-fg-muted);
   }
 
   img[slot="leading"] {
-    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));
+    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);
     object-fit: cover;
   }
 
@@ -138,7 +140,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    color: var(--select-fg, var(--select-fg-default));
+    color: var(--select-fg);
   }
   input[slot="display"] {
     border: none;
@@ -147,23 +149,23 @@
     padding: 0;
     margin: 0;
     font: inherit;
-    color: var(--select-fg, var(--select-fg-default));
+    color: var(--select-fg);
     min-width: 0;
     width: 100%;
   }
   input[slot="display"]::placeholder {
-    color: var(--select-placeholder-fg, var(--select-placeholder-fg-default));
+    color: var(--select-placeholder-fg);
   }
   :scope:not([value]) [slot="display"],
   :scope[value=""] [slot="display"] {
-    color: var(--select-placeholder-fg, var(--select-placeholder-fg-default));
+    color: var(--select-placeholder-fg);
   }
 
   /* 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, var(--select-caret-fg-default));
+    color: var(--select-caret-fg);
     flex-shrink: 0;
   }
 
@@ -171,16 +173,16 @@
 
   /* Ghost variant */
   :scope[variant="ghost"] {
-    --select-bg-default: transparent;
-    --select-border-default: transparent;
-    --select-border-hover-default: transparent;
+    --select-bg: transparent;
+    --select-border: transparent;
+    --select-border-hover: transparent;
   }
   :scope[variant="ghost"] [slot="trigger"]:hover {
-    background: var(--select-ghost-bg-hover, var(--select-ghost-bg-hover-default));
-    color: var(--select-fg, var(--select-fg-default));
+    background: var(--select-ghost-bg-hover);
+    color: var(--select-fg);
   }
   :scope[variant="ghost"] [slot="trigger"]:hover [slot="caret"] {
-    color: var(--select-fg-subtle, var(--select-fg-subtle-default));
+    color: var(--select-fg-subtle);
   }
 
   /* ── SPEC-040 — Multi-select chip trigger ──
@@ -206,13 +208,13 @@
   }
   :scope[data-multi-chips] [data-chips] tag-ui {
     /* Chip styling tracks the active variant via tag-ui's own tokens. */
-    --tag-size-default: var(--a-ui-tiny);
+    --tag-size: var(--a-ui-tiny);
   }
   :scope[data-multi-chips] [data-chips] [data-more] {
     appearance: none;
-    border: 1px solid var(--select-border, var(--select-border-default));
-    background: var(--select-bg-hover, var(--select-bg-hover-default));
-    color: var(--select-fg-muted, var(--select-fg-muted-default));
+    border: 1px solid var(--select-border);
+    background: var(--select-bg-hover);
+    color: var(--select-fg-muted);
     border-radius: var(--a-radius-full);
     padding: 0 var(--a-space-2);
     font: inherit;
@@ -231,7 +233,7 @@
     border: none;
     padding: var(--a-space-0);
     margin-inline-start: var(--a-space-1);
-    color: var(--select-fg-muted, var(--select-fg-muted-default));
+    color: var(--select-fg-muted);
     cursor: pointer;
     border-radius: var(--a-radius-full);
     --a-icon-size: var(--a-ui-sm);
@@ -240,7 +242,7 @@
   }
   :scope[data-multi-chips] [data-clear-all][hidden] { display: none; }
   :scope[data-multi-chips] [data-clear-all]:hover {
-    color: var(--select-fg, var(--select-fg-default));
+    color: var(--select-fg);
     background: var(--a-bg-hover);
   }
 
@@ -270,7 +272,7 @@ select-ui [slot="listbox"] {
   overflow-y: auto;
   font-family: inherit;
   font-size: var(--a-ui-size);
-  color: var(--select-fg, var(--select-fg-default));
+  color: var(--select-fg);
 
   /* Positioned by JS (#positionListbox) — fixed to viewport */
   width: max-content;
@@ -300,7 +302,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, var(--select-fg-subtle-default));
+  color: var(--select-fg-subtle);
   cursor: pointer;
   transition:
     background var(--a-duration-fast) var(--a-easing),
@@ -308,16 +310,16 @@ select-ui [role="option"] {
 }
 select-ui [role="option"]:hover,
 select-ui [role="option"][data-focused] {
-  background: var(--select-option-bg-hover, var(--select-option-bg-hover-default));
-  color: var(--select-fg-hover, var(--select-fg-hover-default));
+  background: var(--select-option-bg-hover);
+  color: var(--select-fg-hover);
 }
 select-ui [role="option"][aria-selected="true"] {
-  color: var(--select-fg-selected, var(--select-fg-selected-default));
-  background: var(--select-bg-selected, var(--select-bg-selected-default));
+  color: var(--select-fg-selected);
+  background: var(--select-bg-selected);
   font-weight: var(--a-ui-weight);
 }
 select-ui [role="option"][aria-disabled="true"] {
-  color: var(--select-option-fg-disabled, var(--select-option-fg-disabled-default));
+  color: var(--select-option-fg-disabled);
   cursor: not-allowed;
 }
 select-ui [role="option"][aria-disabled="true"]:hover {
@@ -327,7 +329,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, var(--select-fg-muted-default));
+  color: var(--select-fg-muted);
   margin-inline-end: var(--a-space-1);
   vertical-align: -0.125em;
 }
@@ -337,7 +339,7 @@ select-ui [role="option"] icon-ui {
 select-ui [role="option"] img[data-option-avatar] {
   width: var(--a-ui-size);
   height: var(--a-ui-size);
-  border-radius: var(--select-leading-radius, var(--select-leading-radius-default));
+  border-radius: var(--select-leading-radius);
   object-fit: cover;
   margin-inline-end: var(--a-space-1);
   vertical-align: -0.2em;
@@ -370,21 +372,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, var(--select-fg-default));
+  color: var(--select-fg);
   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, var(--select-fg-muted-default));
+  color: var(--select-fg-muted);
 }
 
 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, var(--select-fg-muted-default));
+  color: var(--select-fg-muted);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   white-space: nowrap;
@@ -403,7 +405,7 @@ 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, var(--select-fg-muted-default)));
+  color: var(--select-hint-fg, var(--select-fg-muted));
   line-height: var(--select-hint-lh, 1.4);
 }
 
@@ -482,11 +484,11 @@ select-ui [role="option"][data-multi-option] [data-option-label] {
 select-ui [role="option"][data-multi-option][aria-selected="true"] {
   background: transparent;
   font-weight: inherit;
-  color: var(--select-fg, var(--select-fg-default));
+  color: var(--select-fg);
 }
 select-ui [role="option"][data-multi-option][aria-selected="true"]:hover,
 select-ui [role="option"][data-multi-option][aria-selected="true"][data-focused] {
-  background: var(--select-option-bg-hover, var(--select-option-bg-hover-default));
+  background: var(--select-option-bg-hover);
 }
 
 /* Empty state when there are no options. */

package/components/skeleton/skeleton.css

@@ -1,11 +1,11 @@
 @scope (skeleton-ui) {
   :where(:scope) {
     /* ── Tokens ── */
-    --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);
+    --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);
   }
 
   :scope {
@@ -14,16 +14,16 @@
     display: block;
     position: relative;
     overflow: hidden;
-    background: var(--skeleton-bg, var(--skeleton-bg-default));
-    border-radius: var(--skeleton-radius, var(--skeleton-radius-default));
+    background: var(--skeleton-bg);
+    border-radius: var(--skeleton-radius);
   }
 
   /* ── Radius variants ── */
-  :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); }
+  :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); }
 
   /* ── Shimmer animation (default; suppress with [static]) ── */
   :scope:not([static])::after {
@@ -33,11 +33,11 @@
     background: linear-gradient(
       90deg,
       transparent 25%,
-      var(--skeleton-highlight, var(--skeleton-highlight-default)) 50%,
+      var(--skeleton-highlight) 50%,
       transparent 75%
     );
     background-size: 200% 100%;
-    animation: skeleton-shimmer var(--skeleton-duration, var(--skeleton-duration-default)) var(--skeleton-easing, var(--skeleton-easing-default)) infinite;
+    animation: skeleton-shimmer var(--skeleton-duration) var(--skeleton-easing) infinite;
   }
 
   @keyframes skeleton-shimmer {