@adia-ai/web-components 0.7.3 → 0.7.4

package/components/toggle-group/toggle-group.css

@@ -10,18 +10,18 @@ toggle-option-ui:not([disabled]):hover {
 @scope (toggle-group-ui) {
   :where(:scope) {
     /* ── Tokens ── */
-    --toggle-group-border-width-default: 1px;
-    --toggle-group-border-color-default: var(--a-ui-border);
-    --toggle-group-radius-default:       var(--a-radius);
-    --toggle-group-height-default:       var(--a-size);
+    --toggle-group-border-width: 1px;
+    --toggle-group-border-color: var(--a-ui-border);
+    --toggle-group-radius:       var(--a-radius);
+    --toggle-group-height:       var(--a-size);
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
 }
 
   :scope {
     box-sizing: border-box;
     display: flex;
-    border: var(--toggle-group-border-width, var(--toggle-group-border-width-default)) solid var(--toggle-group-border-color, var(--toggle-group-border-color-default));
-    border-radius: var(--toggle-group-radius, var(--toggle-group-radius-default));
+    border: var(--toggle-group-border-width) solid var(--toggle-group-border-color);
+    border-radius: var(--toggle-group-radius);
     overflow: hidden;
   }
 
@@ -70,6 +70,9 @@ toggle-option-ui:not([disabled]):hover {
     background: var(--toggle-option-bg);
     color: var(--toggle-option-fg);
     font: inherit;
+    /* font-family floor — see segment.css rationale (inline default; this
+       scope's tokens don't use the -default suffix). */
+    font-family: var(--toggle-option-font-family, var(--a-font-family-ui));
     font-size: var(--toggle-option-font-size);
     cursor: pointer;
     transition:

package/components/toggle-scheme/toggle-scheme.css

@@ -1,6 +1,6 @@
 @scope (toggle-scheme-ui) {
   :where(:scope) {
-    --toggle-scheme-icon-transition-default: var(--a-duration-fast) var(--a-easing);
+    --toggle-scheme-icon-transition: var(--a-duration-fast) var(--a-easing);
   }
 
   :scope {
@@ -18,6 +18,6 @@
   }
 
   :scope > [part="button"] {
-    transition: color var(--toggle-scheme-icon-transition, var(--toggle-scheme-icon-transition-default));
+    transition: color var(--toggle-scheme-icon-transition);
   }
 }

package/components/toolbar/toolbar.css

@@ -1,15 +1,15 @@
 @scope (toolbar-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --toolbar-gap-default:    var(--a-space-1);
-    --toolbar-radius-default: var(--a-radius-md);
-    --toolbar-px-default:     var(--a-space-1);
-    --toolbar-py-default:     var(--a-space-1);
+    --toolbar-gap:    var(--a-space-1);
+    --toolbar-radius: var(--a-radius-md);
+    --toolbar-px:     var(--a-space-1);
+    --toolbar-py:     var(--a-space-1);
 
     /* ── Colors ── */
-    --toolbar-bg-default:     transparent;
-    --toolbar-fg-default:     var(--a-fg);
-    --toolbar-border-default: var(--a-border-subtle);
+    --toolbar-bg:     transparent;
+    --toolbar-fg:     var(--a-fg);
+    --toolbar-border: var(--a-border-subtle);
   }
 
   /* ── Base ── */
@@ -18,10 +18,10 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: var(--toolbar-gap, var(--toolbar-gap-default));
-    padding: var(--toolbar-py, var(--toolbar-py-default)) var(--toolbar-px, var(--toolbar-px-default));
-    border-radius: var(--toolbar-radius, var(--toolbar-radius-default));
-    color: var(--toolbar-fg, var(--toolbar-fg-default));
+    gap: var(--toolbar-gap);
+    padding: var(--toolbar-py) var(--toolbar-px);
+    border-radius: var(--toolbar-radius);
+    color: var(--toolbar-fg);
     min-width: 0;        /* allow shrinking within flex/grid parents */
     overflow: hidden;    /* prevent pre-measurement flash before reflow */
   }
@@ -34,14 +34,14 @@
 
   /* ── Bordered ── */
   :scope[bordered] {
-    border: 1px solid var(--toolbar-border, var(--toolbar-border-default));
-    background: var(--toolbar-bg, var(--toolbar-bg-default));
+    border: 1px solid var(--toolbar-border);
+    background: var(--toolbar-bg);
   }
 
   /* ── Gap variants ── */
-  :scope[gap="sm"] { --toolbar-gap-default: var(--a-space-1); }
-  :scope[gap="md"] { --toolbar-gap-default: var(--a-space-2); }
-  :scope[gap="lg"] { --toolbar-gap-default: var(--a-space-3); }
+  :scope[gap="sm"] { --toolbar-gap: var(--a-space-1); }
+  :scope[gap="md"] { --toolbar-gap: var(--a-space-2); }
+  :scope[gap="lg"] { --toolbar-gap: var(--a-space-3); }
 
   /* ── Align ── */
   :scope[align="start"]         { justify-content: flex-start; }
@@ -102,9 +102,9 @@ toolbar-ui [data-toolbar-spillover-menu]:popover-open {
   background: var(--a-bg-subtle);
   box-shadow: var(--a-shadow-lg);
   min-width: 10rem;
-  font-family: inherit;
+  font-family: var(--toolbar-font-family, var(--a-font-family-ui));
   font-size: var(--a-ui-size);
-  color: var(--toolbar-fg, var(--toolbar-fg-default));
+  color: var(--toolbar-fg);
   /* Stack overflow items as rows (each row can be a group with its own gap). */
   display: flex;
   flex-direction: column;

package/components/tooltip/tooltip.css

@@ -3,12 +3,12 @@
     /* Host (anchor) tokens. The popover itself escapes to top-layer and
        cannot inherit these — top-layer rules below reference --a-*
        directly per documented exception. */
-    --tooltip-host-display-default: inline-flex;
+    --tooltip-host-display: inline-flex;
   }
   :scope {
     /* ── Base ── */
     box-sizing: border-box;
-    display: var(--tooltip-host-display, var(--tooltip-host-display-default));
+    display: var(--tooltip-host-display);
     position: relative;
   }
 }

package/components/tour/tour.css

@@ -1,8 +1,8 @@
 @scope (tour-ui) {
   :where(:scope) {
-    --tour-scrim-default:             var(--a-scrim-dialog);
-    --tour-spotlight-padding-default: var(--a-space-2);
-    --tour-spotlight-radius-default:  var(--a-radius-md);
+    --tour-scrim:             var(--a-scrim-dialog);
+    --tour-spotlight-padding: var(--a-space-2);
+    --tour-spotlight-radius:  var(--a-radius-md);
   }
 
   :scope {
@@ -67,7 +67,7 @@
   box-shadow: var(--tour-popover-shadow, var(--a-shadow-lg));
   min-width: var(--tour-popover-min-width, 18rem);
   max-width: var(--tour-popover-max-width, 22rem);
-  font-family: inherit;
+  font-family: var(--tour-font-family, var(--a-font-family-ui));
   font-size: var(--a-ui-size);
   color: var(--a-fg);
   /* Above the spotlight (1000) so the user can read + click it */

package/components/tree/tree.css

@@ -1,30 +1,30 @@
 @scope (tree-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --tree-row-height-default:      var(--a-size);
-    --tree-row-radius-default:      var(--a-radius-sm);
-    --tree-row-px-default:          var(--a-space-1);
-    --tree-row-gap-default:         var(--a-space-1);
-    --tree-actions-gap-default:     var(--a-space-0-5);
-    --tree-indent-default:          var(--a-space-4);
-    --tree-caret-size-default:      var(--a-space-2);
-    --tree-icon-size-default:       var(--a-space-3);
+    --tree-row-height:      var(--a-size);
+    --tree-row-radius:      var(--a-radius-sm);
+    --tree-row-px:          var(--a-space-1);
+    --tree-row-gap:         var(--a-space-1);
+    --tree-actions-gap:     var(--a-space-0-5);
+    --tree-indent:          var(--a-space-4);
+    --tree-caret-size:      var(--a-space-2);
+    --tree-icon-size:       var(--a-space-3);
 
     /* ── Typography ── */
-    --tree-font-size-default:       var(--a-ui-size);
+    --tree-font-size:       var(--a-ui-size);
 
     /* ── Colors ── */
-    --tree-fg-default:              var(--a-fg);
-    --tree-fg-muted-default:        var(--a-fg-muted);
-    --tree-bg-hover-default:        var(--a-bg-muted);
-    --tree-bg-selected-default:     var(--a-bg-hover);
+    --tree-fg:              var(--a-fg);
+    --tree-fg-muted:        var(--a-fg-muted);
+    --tree-bg-hover:        var(--a-bg-muted);
+    --tree-bg-selected:     var(--a-bg-hover);
 
     /* ── Transition ── */
-    --tree-duration-default:        var(--a-duration-fast);
-    --tree-easing-default:          var(--a-easing);
+    --tree-duration:        var(--a-duration-fast);
+    --tree-easing:          var(--a-easing);
 
     /* ── State ── */
-    --tree-focus-ring-default:      var(--a-focus-ring);
+    --tree-focus-ring:      var(--a-focus-ring);
   }
 
   :scope {
@@ -32,8 +32,8 @@
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    font-size: var(--tree-font-size, var(--tree-font-size-default));
-    color: var(--tree-fg, var(--tree-fg-default));
+    font-size: var(--tree-font-size);
+    color: var(--tree-fg);
   }
 }
 
@@ -69,35 +69,35 @@
   [slot="row"] {
     display: flex;
     align-items: center;
-    gap: var(--tree-row-gap, var(--tree-row-gap-default));
-    height: var(--tree-row-height, var(--tree-row-height-default));
-    padding-inline-end: var(--tree-row-px, var(--tree-row-px-default));
-    border-radius: var(--tree-row-radius, var(--tree-row-radius-default));
+    gap: var(--tree-row-gap);
+    height: var(--tree-row-height);
+    padding-inline-end: var(--tree-row-px);
+    border-radius: var(--tree-row-radius);
     cursor: pointer;
     user-select: none;
     white-space: nowrap;
     transition:
-      background var(--tree-duration, var(--tree-duration-default)) var(--tree-easing, var(--tree-easing-default)),
-      color var(--tree-duration, var(--tree-duration-default)) var(--tree-easing, var(--tree-easing-default));
+      background var(--tree-duration) var(--tree-easing),
+      color var(--tree-duration) var(--tree-easing);
     outline: none;
   }
 
   [slot="row"]:hover {
-    background: var(--tree-bg-hover, var(--tree-bg-hover-default));
+    background: var(--tree-bg-hover);
   }
 
   [slot="row"]:focus-visible {
-    box-shadow: var(--tree-focus-ring, var(--tree-focus-ring-default));
+    box-shadow: var(--tree-focus-ring);
   }
 
   /* :scope[selected] rules moved outside @scope — see tree-ui Safari note at end of file. */
 
   /* ── Caret ── */
   [slot="caret"] {
-    --a-icon-size: var(--tree-caret-size, var(--tree-caret-size-default));
+    --a-icon-size: var(--tree-caret-size);
     flex-shrink: 0;
-    color: var(--tree-fg-muted, var(--tree-fg-muted-default));
-    transition: transform var(--tree-duration, var(--tree-duration-default)) var(--tree-easing, var(--tree-easing-default));
+    color: var(--tree-fg-muted);
+    transition: transform var(--tree-duration) var(--tree-easing);
     transform: rotate(90deg);
   }
 
@@ -112,8 +112,8 @@
 
   /* ── Icon ── */
   [slot="icon"] {
-    --a-icon-size: var(--tree-icon-size, var(--tree-icon-size-default));
-    color: var(--tree-fg-muted, var(--tree-fg-muted-default));
+    --a-icon-size: var(--tree-icon-size);
+    color: var(--tree-fg-muted);
     flex-shrink: 0;
   }
 
@@ -134,7 +134,7 @@
   [slot="badge"] {
     flex-shrink: 0;
     font-size: var(--tree-badge-size, var(--a-ui-xs));
-    color: var(--tree-badge-fg, var(--tree-fg-muted, var(--tree-fg-muted-default)));
+    color: var(--tree-badge-fg, var(--tree-fg-muted));
     background: var(--tree-badge-bg, transparent);
     padding: 0 var(--tree-badge-px, var(--a-space-1));
     border-radius: var(--tree-badge-radius, var(--a-radius-sm));
@@ -149,10 +149,10 @@
   [slot="actions"] {
     display: flex;
     align-items: center;
-    gap: var(--tree-actions-gap, var(--tree-actions-gap-default));
+    gap: var(--tree-actions-gap);
     margin-inline-start: auto;
     opacity: 0;
-    transition: opacity var(--tree-duration, var(--tree-duration-default)) var(--tree-easing, var(--tree-easing-default));
+    transition: opacity var(--tree-duration) var(--tree-easing);
   }
 
   [slot="row"]:hover [slot="actions"] {
@@ -173,11 +173,11 @@
    `:where(:scope)` still resolve via inheritance. See
    docs/BROWSER-COMPAT.md §3a. */
 tree-ui[selected] > [slot="row"] {
-  background: var(--tree-bg-selected, var(--tree-bg-selected-default));
-  color: var(--tree-fg, var(--tree-fg-default));
+  background: var(--tree-bg-selected);
+  color: var(--tree-fg);
 }
 tree-ui[selected] > [slot="row"] [slot="icon"] {
-  color: var(--tree-fg, var(--tree-fg-default));
+  color: var(--tree-fg);
 }
 tree-ui[selected] > [slot="row"] [slot="actions"] {
   opacity: 1;

package/components/upload/upload.css

@@ -1,48 +1,48 @@
 @scope (upload-ui) {
   :where(:scope) {
     /* ── Tokens ── */
-    --upload-gap-default:              var(--a-space-2);
-    --upload-radius-default:           var(--a-radius-md);
-    --upload-font-default:             var(--a-ui-size);
-    --upload-border-default:           var(--a-border-subtle);
-    --upload-border-hover-default:     var(--a-accent);
-    --upload-border-dragover-default:  var(--a-accent-bg);
-    --upload-bg-dragover-default:      var(--a-accent-muted);
-    --upload-fg-default:               var(--a-fg-subtle);
-    --upload-fg-hover-default:         var(--a-accent);
-    --upload-label-fg-default:         var(--a-fg);
-    --upload-label-weight-default:     var(--a-weight-medium);
-    --upload-label-size-default:       var(--a-label-size);
-    --upload-hint-fg-default:          var(--a-fg-muted);
-    --upload-hint-size-default:        var(--a-ui-sm);
-    --upload-bg-disabled-default:      var(--a-ui-bg-disabled);
-    --upload-fg-disabled-default:      var(--a-ui-text-disabled);
-    --upload-border-disabled-default:  var(--a-ui-border-disabled);
-    --upload-focus-ring-default:       var(--a-focus-ring);
-    --upload-focus-ring-invalid-default: var(--a-focus-ring-invalid);
+    --upload-gap:              var(--a-space-2);
+    --upload-radius:           var(--a-radius-md);
+    --upload-font:             var(--a-ui-size);
+    --upload-border:           var(--a-border-subtle);
+    --upload-border-hover:     var(--a-accent);
+    --upload-border-dragover:  var(--a-accent-bg);
+    --upload-bg-dragover:      var(--a-accent-muted);
+    --upload-fg:               var(--a-fg-subtle);
+    --upload-fg-hover:         var(--a-accent);
+    --upload-label-fg:         var(--a-fg);
+    --upload-label-weight:     var(--a-weight-medium);
+    --upload-label-size:       var(--a-label-size);
+    --upload-hint-fg:          var(--a-fg-muted);
+    --upload-hint-size:        var(--a-ui-sm);
+    --upload-bg-disabled:      var(--a-ui-bg-disabled);
+    --upload-fg-disabled:      var(--a-ui-text-disabled);
+    --upload-border-disabled:  var(--a-ui-border-disabled);
+    --upload-focus-ring:       var(--a-focus-ring);
+    --upload-focus-ring-invalid: var(--a-focus-ring-invalid);
 
     /* ── Spacing ── */
-    --upload-dropzone-pad-default:     var(--a-space-6);
+    --upload-dropzone-pad:     var(--a-space-6);
 
     /* ── Transitions ── */
-    --upload-duration-default:         var(--a-duration-fast);
-    --upload-easing-default:           var(--a-easing);
+    --upload-duration:         var(--a-duration-fast);
+    --upload-easing:           var(--a-easing);
   }
 
   :scope {
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    gap: var(--upload-gap, var(--upload-gap-default));
-    font-size: var(--upload-font, var(--upload-font-default));
+    gap: var(--upload-gap);
+    font-size: var(--upload-font);
   }
 
   /* Label via ::before */
   :scope::before {
     content: attr(label);
-    font-size: var(--upload-label-size, var(--upload-label-size-default));
-    font-weight: var(--upload-label-weight, var(--upload-label-weight-default));
-    color: var(--upload-label-fg, var(--upload-label-fg-default));
+    font-size: var(--upload-label-size);
+    font-weight: var(--upload-label-weight);
+    color: var(--upload-label-fg);
   }
   :scope:not([label])::before,
   :scope[label=""]::before {
@@ -54,38 +54,38 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: var(--upload-dropzone-pad, var(--upload-dropzone-pad-default));
-    border: 2px dashed var(--upload-border, var(--upload-border-default));
-    border-radius: var(--upload-radius, var(--upload-radius-default));
-    color: var(--upload-fg, var(--upload-fg-default));
-    font-size: var(--upload-font, var(--upload-font-default));
+    padding: var(--upload-dropzone-pad);
+    border: 2px dashed var(--upload-border);
+    border-radius: var(--upload-radius);
+    color: var(--upload-fg);
+    font-size: var(--upload-font);
     text-align: center;
     cursor: pointer;
     transition:
-      border-color var(--upload-duration, var(--upload-duration-default)) var(--upload-easing, var(--upload-easing-default)),
-      background var(--upload-duration, var(--upload-duration-default)) var(--upload-easing, var(--upload-easing-default)),
-      color var(--upload-duration, var(--upload-duration-default)) var(--upload-easing, var(--upload-easing-default)),
-      box-shadow var(--upload-duration, var(--upload-duration-default)) var(--upload-easing, var(--upload-easing-default));
+      border-color var(--upload-duration) var(--upload-easing),
+      background var(--upload-duration) var(--upload-easing),
+      color var(--upload-duration) var(--upload-easing),
+      box-shadow var(--upload-duration) var(--upload-easing);
   }
   [data-dropzone]:hover {
-    border-color: var(--upload-border-hover, var(--upload-border-hover-default));
-    color: var(--upload-fg-hover, var(--upload-fg-hover-default));
+    border-color: var(--upload-border-hover);
+    color: var(--upload-fg-hover);
   }
   [data-dropzone]:focus-visible {
     /* Canonical ring via L3 token (see semantics.css FOCUS block). */
     outline: none;
-    box-shadow: var(--upload-focus-ring, var(--upload-focus-ring-default));
+    box-shadow: var(--upload-focus-ring);
   }
   [data-dropzone][data-dragover] {
-    border-color: var(--upload-border-dragover, var(--upload-border-dragover-default));
-    background: var(--upload-bg-dragover, var(--upload-bg-dragover-default));
+    border-color: var(--upload-border-dragover);
+    background: var(--upload-bg-dragover);
   }
 
   /* Hint via ::after on span */
   span[hint]::after {
     content: attr(hint);
-    font-size: var(--upload-hint-size, var(--upload-hint-size-default));
-    color: var(--upload-hint-fg, var(--upload-hint-fg-default));
+    font-size: var(--upload-hint-size);
+    color: var(--upload-hint-fg);
   }
   span[hint=""]::after {
     display: none;
@@ -98,8 +98,8 @@
   [data-filelist] {
     display: flex;
     flex-direction: column;
-    gap: var(--upload-gap, var(--upload-gap-default));
-    font-size: var(--upload-font, var(--upload-font-default));
+    gap: var(--upload-gap);
+    font-size: var(--upload-font);
   }
   [data-filelist]:empty {
     display: none;
@@ -108,12 +108,12 @@
   /* Disabled */
   :scope[disabled] {
     pointer-events: none;
-    color: var(--upload-fg-disabled, var(--upload-fg-disabled-default));
+    color: var(--upload-fg-disabled);
   }
   :scope[disabled] [data-dropzone] {
-    background: var(--upload-bg-disabled, var(--upload-bg-disabled-default));
-    border-color: var(--upload-border-disabled, var(--upload-border-disabled-default));
-    color: var(--upload-fg-disabled, var(--upload-fg-disabled-default));
+    background: var(--upload-bg-disabled);
+    border-color: var(--upload-border-disabled);
+    color: var(--upload-fg-disabled);
     cursor: not-allowed;
   }
 }