@adia-ai/web-components 0.6.32 → 0.6.34

package/components/alert/alert.css

@@ -1,20 +1,20 @@
 @scope (alert-ui) {
   :where(:scope) {
     /* ── Colors ── */
-    --alert-bg:       var(--a-bg-muted);
-    --alert-fg:       var(--a-fg);
-    --alert-border:   var(--a-border-subtle);
-    --alert-icon-fg:  var(--a-fg-muted);
+    --alert-bg-default:       var(--a-bg-muted);
+    --alert-fg-default:       var(--a-fg);
+    --alert-border-default:   var(--a-border-subtle);
+    --alert-icon-fg-default:  var(--a-fg-muted);
 
     /* ── Layout ── */
-    --alert-radius:   var(--a-radius-md);
-    --alert-px:       var(--a-space-3);
-    --alert-py:       var(--a-space-2);
-    --alert-gap:      var(--a-space-2);
+    --alert-radius-default:   var(--a-radius-md);
+    --alert-px-default:       var(--a-space-3);
+    --alert-py-default:       var(--a-space-2);
+    --alert-gap-default:      var(--a-space-2);
 
     /* ── Typography ── */
-    --alert-font:        var(--a-ui-size);
-    --alert-line-height: var(--a-ui-line-height, 1.5);
+    --alert-font-default:        var(--a-ui-size);
+    --alert-line-height-default: var(--a-ui-line-height, 1.5);
   }
 
   :scope {
@@ -26,43 +26,43 @@
        text on multi-line alerts. The leading slot's own height = body
        line-height (below) means the icon optically centers on line 1. */
     align-items: start;
-    gap: var(--alert-gap);
-    padding: var(--alert-py) var(--alert-px);
-    border: 1px solid var(--alert-border);
-    border-radius: var(--alert-radius);
-    font-size: var(--alert-font);
-    line-height: var(--alert-line-height);
-    color: var(--alert-fg);
-    background: var(--alert-bg);
+    gap: var(--alert-gap, var(--alert-gap-default));
+    padding: var(--alert-py, var(--alert-py-default)) var(--alert-px, var(--alert-px-default));
+    border: 1px solid var(--alert-border, var(--alert-border-default));
+    border-radius: var(--alert-radius, var(--alert-radius-default));
+    font-size: var(--alert-font, var(--alert-font-default));
+    line-height: var(--alert-line-height, var(--alert-line-height-default));
+    color: var(--alert-fg, var(--alert-fg-default));
+    background: var(--alert-bg, var(--alert-bg-default));
   }
 
   /* ── Variants ── */
   :scope[variant="info"] {
-    --alert-bg:      var(--a-info-muted);
-    --alert-fg:      var(--a-info-text);
-    --alert-border:  var(--a-info-border-subtle);
-    --alert-icon-fg: var(--a-info-strong);
+    --alert-bg-default:      var(--a-info-muted);
+    --alert-fg-default:      var(--a-info-text);
+    --alert-border-default:  var(--a-info-border-subtle);
+    --alert-icon-fg-default: var(--a-info-strong);
   }
 
   :scope[variant="success"] {
-    --alert-bg:      var(--a-success-muted);
-    --alert-fg:      var(--a-success-text);
-    --alert-border:  var(--a-success-border-subtle);
-    --alert-icon-fg: var(--a-success-strong);
+    --alert-bg-default:      var(--a-success-muted);
+    --alert-fg-default:      var(--a-success-text);
+    --alert-border-default:  var(--a-success-border-subtle);
+    --alert-icon-fg-default: var(--a-success-strong);
   }
 
   :scope[variant="warning"] {
-    --alert-bg:      var(--a-warning-muted);
-    --alert-fg:      var(--a-warning-text);
-    --alert-border:  var(--a-warning-border-subtle);
-    --alert-icon-fg: var(--a-warning-strong);
+    --alert-bg-default:      var(--a-warning-muted);
+    --alert-fg-default:      var(--a-warning-text);
+    --alert-border-default:  var(--a-warning-border-subtle);
+    --alert-icon-fg-default: var(--a-warning-strong);
   }
 
   :scope[variant="danger"] {
-    --alert-bg:      var(--a-danger-muted);
-    --alert-fg:      var(--a-danger-text);
-    --alert-border:  var(--a-danger-border-subtle);
-    --alert-icon-fg: var(--a-danger-strong);
+    --alert-bg-default:      var(--a-danger-muted);
+    --alert-fg-default:      var(--a-danger-text);
+    --alert-border-default:  var(--a-danger-border-subtle);
+    --alert-icon-fg-default: var(--a-danger-strong);
   }
 
   /* `muted` and `neutral` are semantic aliases of the base — same tokens
@@ -72,21 +72,21 @@
      than carrying tonal weight. */
   :scope[variant="muted"],
   :scope[variant="neutral"] {
-    --alert-bg:      var(--a-bg-muted);
-    --alert-fg:      var(--a-fg);
-    --alert-border:  var(--a-border-subtle);
-    --alert-icon-fg: var(--a-fg-muted);
+    --alert-bg-default:      var(--a-bg-muted);
+    --alert-fg-default:      var(--a-fg);
+    --alert-border-default:  var(--a-border-subtle);
+    --alert-icon-fg-default: var(--a-fg-muted);
   }
 
   /* ── Slots ── */
   :scope [slot="leading"] {
     flex-shrink: 0;
-    color: var(--alert-icon-fg);
+    color: var(--alert-icon-fg, var(--alert-icon-fg-default));
     /* Box height = one line of body so the icon optical-centers on the
        first line under `align-items: start`. */
     display: inline-flex;
     align-items: center;
-    min-height: calc(var(--alert-font) * var(--alert-line-height));
+    min-height: calc(var(--alert-font, var(--alert-font-default)) * var(--alert-line-height, var(--alert-line-height-default)));
     /* `ensure()` appends the leading-slot icon to the host, which
        puts it after any consumer-provided content in DOM order.
        Force it to the visual lead via flex `order` so the icon
@@ -113,6 +113,6 @@
      sit on the same first-line baseline. */
   :scope [slot="close"] {
     flex-shrink: 0;
-    min-height: calc(var(--alert-font) * var(--alert-line-height));
+    min-height: calc(var(--alert-font, var(--alert-font-default)) * var(--alert-line-height, var(--alert-line-height-default)));
   }
 }

package/components/avatar/avatar.css

@@ -4,19 +4,19 @@
 
 @scope (avatar-ui) {
   :where(:scope) {
-    --avatar-size:        var(--a-size);
-    --avatar-bg:          var(--a-bg-muted);
-    --avatar-fg:          var(--a-fg-subtle);
-    --avatar-radius:      var(--a-radius-full);
-    --avatar-font-size:   var(--a-ui-sm);
-    --avatar-font-weight: var(--a-weight-medium);
+    --avatar-size-default:        var(--a-size);
+    --avatar-bg-default:          var(--a-bg-muted);
+    --avatar-fg-default:          var(--a-fg-subtle);
+    --avatar-radius-default:      var(--a-radius-full);
+    --avatar-font-size-default:   var(--a-ui-sm);
+    --avatar-font-weight-default: var(--a-weight-medium);
 
     /* Sizes */
-    --avatar-size-xs:     1.25rem;
-    --avatar-size-sm:     1.75rem;
-    --avatar-size-md:     2.5rem;
-    --avatar-size-lg:     3.5rem;
-    --avatar-size-xl:     4.5rem;
+    --avatar-size-xs-default:     1.25rem;
+    --avatar-size-sm-default:     1.75rem;
+    --avatar-size-md-default:     2.5rem;
+    --avatar-size-lg-default:     3.5rem;
+    --avatar-size-xl-default:     4.5rem;
   }
 
   :scope {
@@ -24,13 +24,13 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: var(--avatar-size);
-    height: var(--avatar-size);
-    background: var(--avatar-bg);
-    color: var(--avatar-fg);
-    border-radius: var(--avatar-radius);
-    font-size: var(--avatar-font-size);
-    font-weight: var(--avatar-font-weight);
+    width: var(--avatar-size, var(--avatar-size-default));
+    height: var(--avatar-size, var(--avatar-size-default));
+    background: var(--avatar-bg, var(--avatar-bg-default));
+    color: var(--avatar-fg, var(--avatar-fg-default));
+    border-radius: var(--avatar-radius, var(--avatar-radius-default));
+    font-size: var(--avatar-font-size, var(--avatar-font-size-default));
+    font-weight: var(--avatar-font-weight, var(--avatar-font-weight-default));
     overflow: hidden;
     flex-shrink: 0;
   }
@@ -51,23 +51,23 @@
 
   /* ── Icon (non-person avatar) ── */
   [slot="icon"] {
-    color: var(--avatar-fg);
-    --a-icon-size: calc(var(--avatar-size) * 0.55);
+    color: var(--avatar-fg, var(--avatar-fg-default));
+    --a-icon-size: calc(var(--avatar-size, var(--avatar-size-default)) * 0.55);
     display: inline-flex;
     align-items: center;
     justify-content: center;
   }
 
   /* ── Sizes ── */
-  :scope[size="xs"] { --avatar-size: var(--avatar-size-xs); --avatar-font-size: var(--a-ui-sm); }
-  :scope[size="sm"] { --avatar-size: var(--avatar-size-sm); --avatar-font-size: var(--a-ui-sm); }
-  :scope[size="md"] { --avatar-size: var(--avatar-size-md); --avatar-font-size: var(--a-ui-sm); }
-  :scope[size="lg"] { --avatar-size: var(--avatar-size-lg); --avatar-font-size: var(--a-ui-md); }
-  :scope[size="xl"] { --avatar-size: var(--avatar-size-xl); --avatar-font-size: var(--a-ui-lg); }
+  :scope[size="xs"] { --avatar-size-default: var(--avatar-size-xs, var(--avatar-size-xs-default)); --avatar-font-size-default: var(--a-ui-sm); }
+  :scope[size="sm"] { --avatar-size-default: var(--avatar-size-sm, var(--avatar-size-sm-default)); --avatar-font-size-default: var(--a-ui-sm); }
+  :scope[size="md"] { --avatar-size-default: var(--avatar-size-md, var(--avatar-size-md-default)); --avatar-font-size-default: var(--a-ui-sm); }
+  :scope[size="lg"] { --avatar-size-default: var(--avatar-size-lg, var(--avatar-size-lg-default)); --avatar-font-size-default: var(--a-ui-md); }
+  :scope[size="xl"] { --avatar-size-default: var(--avatar-size-xl, var(--avatar-size-xl-default)); --avatar-font-size-default: var(--a-ui-lg); }
 
   /* ── Shape ── */
-  :scope[shape="circle"] { --avatar-radius: var(--a-radius-full); }
-  :scope[shape="square"] { --avatar-radius: var(--a-radius-md); }
+  :scope[shape="circle"] { --avatar-radius-default: var(--a-radius-full); }
+  :scope[shape="square"] { --avatar-radius-default: var(--a-radius-md); }
 }
 
 /* ═══════════════════════════════════════════════════════════════

package/components/badge/badge.css

@@ -1,13 +1,13 @@
 @scope (badge-ui) {
   :where(:scope) {
     /* ── Tokens ── */
-    --badge-bg:        var(--a-bg-muted);
-    --badge-fg:        var(--a-fg);
-    --badge-radius:    var(--a-radius-md);
-    --badge-px:        var(--a-space-2);
-    --badge-py:        2px;
-    --badge-gap:       var(--a-space-1);
-    --badge-font-size: var(--a-ui-sm);
+    --badge-bg-default:        var(--a-bg-muted);
+    --badge-fg-default:        var(--a-fg);
+    --badge-radius-default:    var(--a-radius-md);
+    --badge-px-default:        var(--a-space-2);
+    --badge-py-default:        2px;
+    --badge-gap-default:       var(--a-space-1);
+    --badge-font-size-default: var(--a-ui-sm);
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
 }
 
@@ -17,16 +17,16 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: var(--badge-gap);
+    gap: var(--badge-gap, var(--badge-gap-default));
     width: fit-content;
-    padding: var(--badge-py) var(--badge-px);
-    background: var(--badge-bg);
-    color: var(--badge-fg);
+    padding: var(--badge-py, var(--badge-py-default)) var(--badge-px, var(--badge-px-default));
+    background: var(--badge-bg, var(--badge-bg-default));
+    color: var(--badge-fg, var(--badge-fg-default));
     font: inherit;
-    font-size: var(--badge-font-size);
+    font-size: var(--badge-font-size, var(--badge-font-size-default));
     font-weight: 500;
     line-height: 1;
-    border-radius: var(--badge-radius);
+    border-radius: var(--badge-radius, var(--badge-radius-default));
     white-space: nowrap;
     vertical-align: middle;
   }
@@ -56,28 +56,28 @@
      collapse contrast on muted: warning fails in dark, danger fails in light.
      Accent keeps the saturated-text-on-tint look (intentional brand emphasis). */
   :scope[variant="accent"] {
-    --badge-bg: var(--a-accent-muted);
-    --badge-fg: var(--a-accent-text);
+    --badge-bg-default: var(--a-accent-muted);
+    --badge-fg-default: var(--a-accent-text);
   }
 
   :scope[variant="info"] {
-    --badge-bg: var(--a-info-muted);
-    --badge-fg: var(--a-info-text);
+    --badge-bg-default: var(--a-info-muted);
+    --badge-fg-default: var(--a-info-text);
   }
 
   :scope[variant="success"] {
-    --badge-bg: var(--a-success-muted);
-    --badge-fg: var(--a-success-text);
+    --badge-bg-default: var(--a-success-muted);
+    --badge-fg-default: var(--a-success-text);
   }
 
   :scope[variant="warning"] {
-    --badge-bg: var(--a-warning-muted);
-    --badge-fg: var(--a-warning-text);
+    --badge-bg-default: var(--a-warning-muted);
+    --badge-fg-default: var(--a-warning-text);
   }
 
   :scope[variant="danger"] {
-    --badge-bg: var(--a-danger-muted);
-    --badge-fg: var(--a-danger-text);
+    --badge-bg-default: var(--a-danger-muted);
+    --badge-fg-default: var(--a-danger-text);
   }
 
   /* `primary` is the accent-filled variant — solid bg + on-accent text,
@@ -86,8 +86,8 @@
      matrix so it tracks the same accent-strong source as button-ui's
      primary variant. */
   :scope[variant="primary"] {
-    --badge-bg: var(--a-primary-bg);
-    --badge-fg: var(--a-primary-fg);
+    --badge-bg-default: var(--a-primary-bg);
+    --badge-fg-default: var(--a-primary-fg);
   }
 
   /* `muted` and `neutral` are semantic aliases of the base — same tokens
@@ -96,8 +96,8 @@
      "Not set" states) where the badge should read as quiet chrome. */
   :scope[variant="muted"],
   :scope[variant="neutral"] {
-    --badge-bg: var(--a-bg-muted);
-    --badge-fg: var(--a-fg);
+    --badge-bg-default: var(--a-bg-muted);
+    --badge-fg-default: var(--a-fg);
   }
 
   /* Size handled by universal [size] attribute system. */

package/components/block/block.css

@@ -1,29 +1,29 @@
 @scope (block-ui) {
   :where(:scope) {
-    --block-padding: var(--a-space-4);
-    --block-margin:  0;
+    --block-padding-default: var(--a-space-4);
+    --block-margin-default:  0;
   }
 
   :scope {
     box-sizing: border-box;
     display: block;
-    padding: var(--block-padding);
-    margin: var(--block-margin);
+    padding: var(--block-padding, var(--block-padding-default));
+    margin: var(--block-margin, var(--block-margin-default));
   }
 
   /* ── Padding variants ── */
-  :scope[padding="none"] { --block-padding: 0; }
-  :scope[padding="xs"]   { --block-padding: var(--a-space-1); }
-  :scope[padding="sm"]   { --block-padding: var(--a-space-2); }
-  :scope[padding="md"]   { --block-padding: var(--a-space-4); }
-  :scope[padding="lg"]   { --block-padding: var(--a-space-6); }
-  :scope[padding="xl"]   { --block-padding: var(--a-space-10); }
+  :scope[padding="none"] { --block-padding-default: 0; }
+  :scope[padding="xs"]   { --block-padding-default: var(--a-space-1); }
+  :scope[padding="sm"]   { --block-padding-default: var(--a-space-2); }
+  :scope[padding="md"]   { --block-padding-default: var(--a-space-4); }
+  :scope[padding="lg"]   { --block-padding-default: var(--a-space-6); }
+  :scope[padding="xl"]   { --block-padding-default: var(--a-space-10); }
 
   /* ── Margin variants ── */
-  :scope[margin="none"] { --block-margin: 0; }
-  :scope[margin="xs"]   { --block-margin: var(--a-space-1); }
-  :scope[margin="sm"]   { --block-margin: var(--a-space-2); }
-  :scope[margin="md"]   { --block-margin: var(--a-space-4); }
-  :scope[margin="lg"]   { --block-margin: var(--a-space-6); }
-  :scope[margin="xl"]   { --block-margin: var(--a-space-10); }
+  :scope[margin="none"] { --block-margin-default: 0; }
+  :scope[margin="xs"]   { --block-margin-default: var(--a-space-1); }
+  :scope[margin="sm"]   { --block-margin-default: var(--a-space-2); }
+  :scope[margin="md"]   { --block-margin-default: var(--a-space-4); }
+  :scope[margin="lg"]   { --block-margin-default: var(--a-space-6); }
+  :scope[margin="xl"]   { --block-margin-default: var(--a-space-10); }
 }

package/components/breadcrumb/breadcrumb.css

@@ -1,39 +1,39 @@
 @scope (breadcrumb-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --breadcrumb-gap:          var(--a-space-1);
-    --breadcrumb-max-width:    12rem;
+    --breadcrumb-gap-default:          var(--a-space-1);
+    --breadcrumb-max-width-default:    12rem;
 
     /* ── Typography ── */
-    --breadcrumb-font-size:    var(--a-ui-size);
-    --breadcrumb-current-weight: var(--a-weight-medium);
+    --breadcrumb-font-size-default:    var(--a-ui-size);
+    --breadcrumb-current-weight-default: var(--a-weight-medium);
 
     /* ── Colors ── */
-    --breadcrumb-fg:           var(--a-fg-subtle);
-    --breadcrumb-fg-hover:     var(--a-fg);
-    --breadcrumb-separator-fg: var(--a-fg-muted);
-    --breadcrumb-current-fg:   var(--a-fg-strong);
+    --breadcrumb-fg-default:           var(--a-fg-subtle);
+    --breadcrumb-fg-hover-default:     var(--a-fg);
+    --breadcrumb-separator-fg-default: var(--a-fg-muted);
+    --breadcrumb-current-fg-default:   var(--a-fg-strong);
 
     /* ── Transition ── */
-    --breadcrumb-duration:     var(--a-duration-fast);
-    --breadcrumb-easing:       var(--a-easing);
+    --breadcrumb-duration-default:     var(--a-duration-fast);
+    --breadcrumb-easing-default:       var(--a-easing);
 
     /* ── Link ── */
-    --breadcrumb-link-radius:  var(--a-radius-sm);
-    --breadcrumb-link-focus-ring: var(--a-focus-ring);
+    --breadcrumb-link-radius-default:  var(--a-radius-sm);
+    --breadcrumb-link-focus-ring-default: var(--a-focus-ring);
   }
 
   :scope {
     box-sizing: border-box;
     display: inline-flex;
     align-items: center;
-    gap: var(--breadcrumb-gap);
-    font-size: var(--breadcrumb-font-size);
+    gap: var(--breadcrumb-gap, var(--breadcrumb-gap-default));
+    font-size: var(--breadcrumb-font-size, var(--breadcrumb-font-size-default));
   }
 
   /* Separator — standalone span, never inside <a> */
   [data-sep] {
-    color: var(--breadcrumb-separator-fg);
+    color: var(--breadcrumb-separator-fg, var(--breadcrumb-separator-fg-default));
     flex-shrink: 0;
     pointer-events: none;
     user-select: none;
@@ -46,32 +46,32 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    max-width: var(--breadcrumb-max-width);
-    color: var(--breadcrumb-fg);
+    max-width: var(--breadcrumb-max-width, var(--breadcrumb-max-width-default));
+    color: var(--breadcrumb-fg, var(--breadcrumb-fg-default));
   }
 
   /* Links */
   a[data-item] {
     text-decoration: none;
-    border-radius: var(--breadcrumb-link-radius);
-    transition: color var(--breadcrumb-duration) var(--breadcrumb-easing);
+    border-radius: var(--breadcrumb-link-radius, var(--breadcrumb-link-radius-default));
+    transition: color var(--breadcrumb-duration, var(--breadcrumb-duration-default)) var(--breadcrumb-easing, var(--breadcrumb-easing-default));
   }
 
   a[data-item]:hover {
-    color: var(--breadcrumb-fg-hover);
+    color: var(--breadcrumb-fg-hover, var(--breadcrumb-fg-hover-default));
     text-decoration: underline;
     text-underline-offset: 2px;
   }
 
   a[data-item]:focus-visible {
     outline: none;
-    box-shadow: var(--breadcrumb-link-focus-ring);
+    box-shadow: var(--breadcrumb-link-focus-ring, var(--breadcrumb-link-focus-ring-default));
   }
 
   /* Current (last item) */
   [data-item][aria-current] {
-    color: var(--breadcrumb-current-fg);
-    font-weight: var(--breadcrumb-current-weight);
+    color: var(--breadcrumb-current-fg, var(--breadcrumb-current-fg-default));
+    font-weight: var(--breadcrumb-current-weight, var(--breadcrumb-current-weight-default));
     pointer-events: none;
     text-decoration: none;
   }