@adia-ai/web-components 0.6.33 → 0.6.34

package/components/empty-state/empty-state.css

@@ -1,21 +1,21 @@
 @scope (empty-state-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --empty-state-px:             var(--a-space-6);
-    --empty-state-py:             var(--a-space-8);
-    --empty-state-gap:            var(--a-space-2);
-    --empty-state-action-mt:      var(--a-space-2);
-    --empty-state-icon-size:      3rem;
+    --empty-state-px-default:             var(--a-space-6);
+    --empty-state-py-default:             var(--a-space-8);
+    --empty-state-gap-default:            var(--a-space-2);
+    --empty-state-action-mt-default:      var(--a-space-2);
+    --empty-state-icon-size-default:      3rem;
 
     /* ── Colors ── */
-    --empty-state-icon-fg:        var(--a-fg-muted);
-    --empty-state-heading-fg:     var(--a-fg);
-    --empty-state-desc-fg:        var(--a-fg-muted);
+    --empty-state-icon-fg-default:        var(--a-fg-muted);
+    --empty-state-heading-fg-default:     var(--a-fg);
+    --empty-state-desc-fg-default:        var(--a-fg-muted);
 
     /* ── Typography ── */
-    --empty-state-heading-size:   var(--a-ui-lg);
-    --empty-state-heading-weight: var(--a-weight-medium);
-    --empty-state-desc-size:      var(--a-ui-size);
+    --empty-state-heading-size-default:   var(--a-ui-lg);
+    --empty-state-heading-weight-default: var(--a-weight-medium);
+    --empty-state-desc-size-default:      var(--a-ui-size);
   }
 
   :scope {
@@ -25,49 +25,49 @@
     flex-direction: column;
     align-items: center;
     text-align: center;
-    padding: var(--empty-state-py) var(--empty-state-px);
-    gap: var(--empty-state-gap);
+    padding: var(--empty-state-py, var(--empty-state-py-default)) var(--empty-state-px, var(--empty-state-px-default));
+    gap: var(--empty-state-gap, var(--empty-state-gap-default));
   }
 
   /* ── Icon ── */
   [slot="icon"] {
-    font-size: var(--empty-state-icon-size);
-    color: var(--empty-state-icon-fg);
+    font-size: var(--empty-state-icon-size, var(--empty-state-icon-size-default));
+    color: var(--empty-state-icon-fg, var(--empty-state-icon-fg-default));
   }
 
   /* ── Heading ── */
   [slot="heading"] {
-    font-size: var(--empty-state-heading-size);
-    font-weight: var(--empty-state-heading-weight);
-    color: var(--empty-state-heading-fg);
+    font-size: var(--empty-state-heading-size, var(--empty-state-heading-size-default));
+    font-weight: var(--empty-state-heading-weight, var(--empty-state-heading-weight-default));
+    color: var(--empty-state-heading-fg, var(--empty-state-heading-fg-default));
     line-height: 1.3;
   }
 
   /* ── Description ── */
   [slot="description"] {
-    font-size: var(--empty-state-desc-size);
-    color: var(--empty-state-desc-fg);
+    font-size: var(--empty-state-desc-size, var(--empty-state-desc-size-default));
+    color: var(--empty-state-desc-fg, var(--empty-state-desc-fg-default));
     line-height: 1.5;
     max-width: 36ch;
   }
 
   /* ── Action slot ── */
   [slot="action"] {
-    margin-top: var(--empty-state-action-mt);
+    margin-top: var(--empty-state-action-mt, var(--empty-state-action-mt-default));
   }
 
   /* ── Semantic color variants ──
      Color the icon + text only; no background/border tint. */
   :scope[variant="danger"] {
-    --empty-state-icon-fg:    var(--a-danger-strong);
-    --empty-state-heading-fg: var(--a-danger-text);
-    --empty-state-desc-fg:    var(--a-danger-text);
+    --empty-state-icon-fg-default:    var(--a-danger-strong);
+    --empty-state-heading-fg-default: var(--a-danger-text);
+    --empty-state-desc-fg-default:    var(--a-danger-text);
   }
 
   :scope[variant="warning"] {
-    --empty-state-icon-fg:    var(--a-warning-strong);
-    --empty-state-heading-fg: var(--a-warning-text);
-    --empty-state-desc-fg:    var(--a-warning-text);
+    --empty-state-icon-fg-default:    var(--a-warning-strong);
+    --empty-state-heading-fg-default: var(--a-warning-text);
+    --empty-state-desc-fg-default:    var(--a-warning-text);
   }
 
   /* ── §223 (v0.5.9): [minimal] — single-line muted layout ──

package/components/feed/feed.css

@@ -22,10 +22,10 @@ feed-item-ui[data-closing] {
    Popover API for top-layer placement. */
 @scope (feed-ui) {
   :where(:scope) {
-    --feed-gap:        var(--a-space-2);
-    --feed-padding:    var(--a-space-3);
-    --feed-max-width:  22rem;
-    --feed-offset:     var(--a-space-4);
+    --feed-gap-default:        var(--a-space-2);
+    --feed-padding-default:    var(--a-space-3);
+    --feed-max-width-default:  22rem;
+    --feed-offset-default:     var(--a-space-4);
   }
 
   :scope {
@@ -33,13 +33,13 @@ feed-item-ui[data-closing] {
     z-index: 9999;
     display: flex;
     flex-direction: column;
-    gap: var(--feed-gap);
+    gap: var(--feed-gap, var(--feed-gap-default));
     padding: 0;
     background: transparent;
     border: 0;
     pointer-events: none; /* Items re-enable pointer-events. */
     width: max-content;
-    max-width: var(--feed-max-width);
+    max-width: var(--feed-max-width, var(--feed-max-width-default));
   }
   /* Reset native popover defaults. UA stylesheet sets `margin: auto;
      inset: 0; border: solid; padding: 0.25em` which would center the
@@ -57,26 +57,26 @@ feed-item-ui[data-closing] {
   /* Position variants. Default = bottom-right. */
   :scope,
   :scope[position="bottom-right"] {
-    bottom: var(--feed-offset); right: var(--feed-offset);
+    bottom: var(--feed-offset, var(--feed-offset-default)); right: var(--feed-offset, var(--feed-offset-default));
   }
   :scope[position="bottom-left"] {
-    bottom: var(--feed-offset); left: var(--feed-offset); right: auto;
+    bottom: var(--feed-offset, var(--feed-offset-default)); left: var(--feed-offset, var(--feed-offset-default)); right: auto;
   }
   :scope[position="bottom-center"] {
-    bottom: var(--feed-offset);
+    bottom: var(--feed-offset, var(--feed-offset-default));
     left: 50%; right: auto;
     transform: translateX(-50%);
   }
   :scope[position="top-right"] {
-    top: var(--feed-offset); right: var(--feed-offset); bottom: auto;
+    top: var(--feed-offset, var(--feed-offset-default)); right: var(--feed-offset, var(--feed-offset-default)); bottom: auto;
     flex-direction: column-reverse;
   }
   :scope[position="top-left"] {
-    top: var(--feed-offset); left: var(--feed-offset); right: auto; bottom: auto;
+    top: var(--feed-offset, var(--feed-offset-default)); left: var(--feed-offset, var(--feed-offset-default)); right: auto; bottom: auto;
     flex-direction: column-reverse;
   }
   :scope[position="top-center"] {
-    top: var(--feed-offset); bottom: auto;
+    top: var(--feed-offset, var(--feed-offset-default)); bottom: auto;
     left: 50%; right: auto;
     transform: translateX(-50%);
     flex-direction: column-reverse;

package/components/field/field.css

@@ -1,23 +1,23 @@
 @scope (field-ui) {
   :where(:scope) {
     /* ── Tokens ── */
-    --field-gap:             var(--a-space-2);
-    --field-label-color:     var(--a-fg);
-    --field-label-size:      var(--a-ui-sm);
-    --field-label-weight:    var(--a-weight-medium);
-    --field-required-color:  var(--a-danger-strong);
-    --field-trailing-color:  var(--a-fg-subtle);
-    --field-trailing-size:   var(--a-ui-sm);
-    --field-hint-color:      var(--a-fg-muted);
-    --field-hint-size:       var(--a-ui-sm);
-    --field-error-color:     var(--a-danger-strong);
-    --field-error-size:      var(--a-ui-sm);
+    --field-gap-default:             var(--a-space-2);
+    --field-label-color-default:     var(--a-fg);
+    --field-label-size-default:      var(--a-ui-sm);
+    --field-label-weight-default:    var(--a-weight-medium);
+    --field-required-color-default:  var(--a-danger-strong);
+    --field-trailing-color-default:  var(--a-fg-subtle);
+    --field-trailing-size-default:   var(--a-ui-sm);
+    --field-hint-color-default:      var(--a-fg-muted);
+    --field-hint-size-default:       var(--a-ui-sm);
+    --field-error-color-default:     var(--a-danger-strong);
+    --field-error-size-default:      var(--a-ui-sm);
 
     /* In inline mode, the label column auto-sizes by default (each
        field's label column is independent of its siblings). Consumers
        that want shared label-column alignment across stacked inline
        fields can raise this floor — e.g. 12rem in a multi-field form. */
-    --field-label-inline-min: 0;
+    --field-label-inline-min-default: 0;
   }
 
   /* ── Base — single grid; children placed by [slot] attribute via
@@ -32,7 +32,7 @@
       "label"
       "control"
       "message";
-    column-gap: var(--field-gap);
+    column-gap: var(--field-gap, var(--field-gap-default));
     align-items: center;
   }
 
@@ -43,7 +43,7 @@
      FB-54 (v0.6.32) — closes the trap for compact filter bars that
      mix field-ui with bare primitives. */
   :scope:has(> [slot="hint"], > [slot="error"]) {
-    row-gap: var(--field-gap);
+    row-gap: var(--field-gap, var(--field-gap-default));
   }
 
   /* Stacked + (trailing or action) → 2-col */
@@ -74,22 +74,22 @@
   /* ── Slot styling ── */
   :scope > [slot="label"] {
     grid-area: label;
-    color: var(--field-label-color);
-    font-size: var(--field-label-size);
-    font-weight: var(--field-label-weight);
+    color: var(--field-label-color, var(--field-label-color-default));
+    font-size: var(--field-label-size, var(--field-label-size-default));
+    font-weight: var(--field-label-weight, var(--field-label-weight-default));
     cursor: pointer;
     min-width: 0;
   }
   :scope > [slot="label"] > [data-field-required] {
-    color: var(--field-required-color);
+    color: var(--field-required-color, var(--field-required-color-default));
     margin-inline-start: 0.15em;
     font-weight: var(--a-weight-bold);
   }
   :scope > [slot="trailing"] {
     grid-area: trailing;
     justify-self: end;
-    color: var(--field-trailing-color);
-    font-size: var(--field-trailing-size);
+    color: var(--field-trailing-color, var(--field-trailing-color-default));
+    font-size: var(--field-trailing-size, var(--field-trailing-size-default));
   }
   :scope > :not([slot]) {
     grid-area: control;
@@ -105,12 +105,12 @@
     line-height: 1.3;
   }
   :scope > [slot="hint"] {
-    color: var(--field-hint-color);
-    font-size: var(--field-hint-size);
+    color: var(--field-hint-color, var(--field-hint-color-default));
+    font-size: var(--field-hint-size, var(--field-hint-size-default));
   }
   :scope > [slot="error"] {
-    color: var(--field-error-color);
-    font-size: var(--field-error-size);
+    color: var(--field-error-color, var(--field-error-color-default));
+    font-size: var(--field-error-size, var(--field-error-size-default));
     font-weight: var(--a-weight-medium);
   }
 
@@ -120,25 +120,25 @@
        optional slots are present so we don't carry zero-width
        tracks + their gaps. ── */
   :scope[inline] {
-    grid-template-columns: minmax(var(--field-label-inline-min), auto) minmax(0, 1fr);
+    grid-template-columns: minmax(var(--field-label-inline-min, var(--field-label-inline-min-default)), auto) minmax(0, 1fr);
     grid-template-areas:
       "label   control"
       ".       message";
   }
   :scope[inline]:has(> [slot="trailing"]):not(:has(> [slot="action"])) {
-    grid-template-columns: minmax(var(--field-label-inline-min), auto) auto minmax(0, 1fr);
+    grid-template-columns: minmax(var(--field-label-inline-min, var(--field-label-inline-min-default)), auto) auto minmax(0, 1fr);
     grid-template-areas:
       "label   trailing control"
       ".       .        message";
   }
   :scope[inline]:not(:has(> [slot="trailing"])):has(> [slot="action"]) {
-    grid-template-columns: minmax(var(--field-label-inline-min), auto) minmax(0, 1fr) auto;
+    grid-template-columns: minmax(var(--field-label-inline-min, var(--field-label-inline-min-default)), auto) minmax(0, 1fr) auto;
     grid-template-areas:
       "label   control action"
       ".       message message";
   }
   :scope[inline]:has(> [slot="trailing"]):has(> [slot="action"]) {
-    grid-template-columns: minmax(var(--field-label-inline-min), auto) auto minmax(0, 1fr) auto;
+    grid-template-columns: minmax(var(--field-label-inline-min, var(--field-label-inline-min-default)), auto) auto minmax(0, 1fr) auto;
     grid-template-areas:
       "label   trailing control action"
       ".       .        message message";

package/components/fields/fields.css

@@ -1,9 +1,9 @@
 @scope (fields-ui) {
   :where(:scope) {
     /* ── Tokens ── */
-    --fields-gap:        var(--a-space-3);
-    --fields-row-gap:    var(--fields-gap);
-    --fields-column-gap: var(--fields-gap);
+    --fields-gap-default:        var(--a-space-3);
+    --fields-row-gap-default:    var(--fields-gap, var(--fields-gap-default));
+    --fields-column-gap-default: var(--fields-gap, var(--fields-gap-default));
   }
 
   /* ── Base — 6-column grid ──
@@ -18,8 +18,8 @@
     box-sizing: border-box;
     display: grid;
     grid-template-columns: repeat(var(--fields-columns, 6), minmax(0, 1fr));
-    column-gap: var(--fields-column-gap);
-    row-gap: var(--fields-row-gap);
+    column-gap: var(--fields-column-gap, var(--fields-column-gap-default));
+    row-gap: var(--fields-row-gap, var(--fields-row-gap-default));
     align-items: start;
   }
 

package/components/grid/grid.css

@@ -2,9 +2,9 @@
   :where(:scope) {
     /* Read `--a-gap` so the universal `[gap="N"]` rules (tokens.css)
        reach the grid; defaults to `--a-gap-md` at :root. */
-    --grid-gap:        var(--a-gap);
-    --grid-column-gap: var(--grid-gap);
-    --grid-row-gap:    var(--grid-gap);
+    --grid-gap-default:        var(--a-gap);
+    --grid-column-gap-default: var(--grid-gap, var(--grid-gap-default));
+    --grid-row-gap-default:    var(--grid-gap, var(--grid-gap-default));
   }
 
   :scope {
@@ -13,8 +13,8 @@
     /* Default: auto 1fr columns — as many equal columns as children */
     grid-auto-flow: column;
     grid-auto-columns: 1fr;
-    column-gap: var(--grid-column-gap);
-    row-gap: var(--grid-row-gap);
+    column-gap: var(--grid-column-gap, var(--grid-column-gap-default));
+    row-gap: var(--grid-row-gap, var(--grid-row-gap-default));
     /* Universal [padding] / [margin] opt-in — see tokens.css for scale. */
     padding: var(--a-padding, 0);
     margin: var(--a-margin, 0);

package/components/heatmap/heatmap.css

@@ -1,40 +1,40 @@
 @scope (heatmap-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --heatmap-gap:              var(--a-space-1);
-    --heatmap-cell-radius:      var(--a-radius-xs);
-    --heatmap-inset:            var(--a-inset);
-    --heatmap-aspect:           auto;
-    --heatmap-cell-min-size:    0.75rem;
+    --heatmap-gap-default:              var(--a-space-1);
+    --heatmap-cell-radius-default:      var(--a-radius-xs);
+    --heatmap-inset-default:            var(--a-inset);
+    --heatmap-aspect-default:           auto;
+    --heatmap-cell-min-size-default:    0.75rem;
 
     /* ── Colors ── */
-    --heatmap-empty-bg:         var(--a-bg-muted);
-    --heatmap-border:           1px solid var(--a-border-subtle);
-    --heatmap-text:             var(--a-fg);
-    --heatmap-label:            var(--a-fg-subtle);
+    --heatmap-empty-bg-default:         var(--a-bg-muted);
+    --heatmap-border-default:           1px solid var(--a-border-subtle);
+    --heatmap-text-default:             var(--a-fg);
+    --heatmap-label-default:            var(--a-fg-subtle);
 
     /* ── Data ramp (5 buckets) ──
        Sequential tint scale, sourced from the L2 `--a-{family}-bucket-N`
        semantic aliases (see styles/colors/semantics.css §BUCKETS). The
        L2 layer handles light-dark() polarity so step 0 reads as
        low-intensity in either scheme without per-component math. */
-    --heatmap-bucket-0:         var(--a-accent-bucket-0);
-    --heatmap-bucket-1:         var(--a-accent-bucket-1);
-    --heatmap-bucket-2:         var(--a-accent-bucket-2);
-    --heatmap-bucket-3:         var(--a-accent-bucket-3);
-    --heatmap-bucket-4:         var(--a-accent-bucket-4);
+    --heatmap-bucket-0-default:         var(--a-accent-bucket-0);
+    --heatmap-bucket-1-default:         var(--a-accent-bucket-1);
+    --heatmap-bucket-2-default:         var(--a-accent-bucket-2);
+    --heatmap-bucket-3-default:         var(--a-accent-bucket-3);
+    --heatmap-bucket-4-default:         var(--a-accent-bucket-4);
 
     /* ── Legend ── */
-    --heatmap-legend-size:      var(--a-caption-size);
-    --heatmap-legend-gap:       var(--a-space-1);
+    --heatmap-legend-size-default:      var(--a-caption-size);
+    --heatmap-legend-gap-default:       var(--a-space-1);
   }
 
   :scope {
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    gap: var(--heatmap-gap);
-    color: var(--heatmap-text);
+    gap: var(--heatmap-gap, var(--heatmap-gap-default));
+    color: var(--heatmap-text, var(--heatmap-text-default));
     font-size: var(--a-body-size);
   }
 
@@ -47,9 +47,9 @@
   /* Month labels row (day-grid mode) */
   :scope > [data-months] {
     display: grid;
-    gap: var(--heatmap-gap);
-    font-size: var(--heatmap-legend-size);
-    color: var(--heatmap-label);
+    gap: var(--heatmap-gap, var(--heatmap-gap-default));
+    font-size: var(--heatmap-legend-size, var(--heatmap-legend-size-default));
+    color: var(--heatmap-label, var(--heatmap-label-default));
   }
 
   :scope [data-month-label] {
@@ -59,7 +59,7 @@
   /* Grid of cells */
   :scope > [data-grid] {
     display: grid;
-    gap: var(--heatmap-gap);
+    gap: var(--heatmap-gap, var(--heatmap-gap-default));
   }
 
   :scope[aspect="square"] > [data-grid] {
@@ -71,10 +71,10 @@
   }
 
   :scope [data-cell] {
-    border-radius: var(--heatmap-cell-radius);
-    background: var(--heatmap-empty-bg);
-    min-width: var(--heatmap-cell-min-size);
-    min-height: var(--heatmap-cell-min-size);
+    border-radius: var(--heatmap-cell-radius, var(--heatmap-cell-radius-default));
+    background: var(--heatmap-empty-bg, var(--heatmap-empty-bg-default));
+    min-width: var(--heatmap-cell-min-size, var(--heatmap-cell-min-size-default));
+    min-height: var(--heatmap-cell-min-size, var(--heatmap-cell-min-size-default));
     aspect-ratio: 1 / 1;
     cursor: default;
     transition: transform var(--a-duration-fast) var(--a-easing-out);
@@ -86,70 +86,70 @@
 
   :scope [data-cell][data-v]:hover {
     transform: scale(1.15);
-    outline: var(--heatmap-border);
+    outline: var(--heatmap-border, var(--heatmap-border-default));
   }
 
-  :scope [data-cell][data-bucket="0"] { background: var(--heatmap-bucket-0); }
-  :scope [data-cell][data-bucket="1"] { background: var(--heatmap-bucket-1); }
-  :scope [data-cell][data-bucket="2"] { background: var(--heatmap-bucket-2); }
-  :scope [data-cell][data-bucket="3"] { background: var(--heatmap-bucket-3); }
-  :scope [data-cell][data-bucket="4"] { background: var(--heatmap-bucket-4); }
+  :scope [data-cell][data-bucket="0"] { background: var(--heatmap-bucket-0, var(--heatmap-bucket-0-default)); }
+  :scope [data-cell][data-bucket="1"] { background: var(--heatmap-bucket-1, var(--heatmap-bucket-1-default)); }
+  :scope [data-cell][data-bucket="2"] { background: var(--heatmap-bucket-2, var(--heatmap-bucket-2-default)); }
+  :scope [data-cell][data-bucket="3"] { background: var(--heatmap-bucket-3, var(--heatmap-bucket-3-default)); }
+  :scope [data-cell][data-bucket="4"] { background: var(--heatmap-bucket-4, var(--heatmap-bucket-4-default)); }
 
   /* Legend strip */
   :scope > [data-legend] {
     display: flex;
     align-items: center;
-    gap: var(--heatmap-legend-gap);
-    font-size: var(--heatmap-legend-size);
-    color: var(--heatmap-label);
-    margin-top: var(--heatmap-gap);
+    gap: var(--heatmap-legend-gap, var(--heatmap-legend-gap-default));
+    font-size: var(--heatmap-legend-size, var(--heatmap-legend-size-default));
+    color: var(--heatmap-label, var(--heatmap-label-default));
+    margin-top: var(--heatmap-gap, var(--heatmap-gap-default));
   }
 
   :scope [data-legend-swatch] {
     width: 0.875rem;
     height: 0.875rem;
-    border-radius: var(--heatmap-cell-radius);
-    background: var(--heatmap-empty-bg);
+    border-radius: var(--heatmap-cell-radius, var(--heatmap-cell-radius-default));
+    background: var(--heatmap-empty-bg, var(--heatmap-empty-bg-default));
     display: inline-block;
   }
 
-  :scope [data-legend-swatch][data-bucket="0"] { background: var(--heatmap-bucket-0); }
-  :scope [data-legend-swatch][data-bucket="1"] { background: var(--heatmap-bucket-1); }
-  :scope [data-legend-swatch][data-bucket="2"] { background: var(--heatmap-bucket-2); }
-  :scope [data-legend-swatch][data-bucket="3"] { background: var(--heatmap-bucket-3); }
-  :scope [data-legend-swatch][data-bucket="4"] { background: var(--heatmap-bucket-4); }
+  :scope [data-legend-swatch][data-bucket="0"] { background: var(--heatmap-bucket-0, var(--heatmap-bucket-0-default)); }
+  :scope [data-legend-swatch][data-bucket="1"] { background: var(--heatmap-bucket-1, var(--heatmap-bucket-1-default)); }
+  :scope [data-legend-swatch][data-bucket="2"] { background: var(--heatmap-bucket-2, var(--heatmap-bucket-2-default)); }
+  :scope [data-legend-swatch][data-bucket="3"] { background: var(--heatmap-bucket-3, var(--heatmap-bucket-3-default)); }
+  :scope [data-legend-swatch][data-bucket="4"] { background: var(--heatmap-bucket-4, var(--heatmap-bucket-4-default)); }
 
   /* ── Color-scheme variants (token overrides only) ── */
 
   :scope[color-scheme="success"] {
-    --heatmap-bucket-0: var(--a-success-bucket-0);
-    --heatmap-bucket-1: var(--a-success-bucket-1);
-    --heatmap-bucket-2: var(--a-success-bucket-2);
-    --heatmap-bucket-3: var(--a-success-bucket-3);
-    --heatmap-bucket-4: var(--a-success-bucket-4);
+    --heatmap-bucket-0-default: var(--a-success-bucket-0);
+    --heatmap-bucket-1-default: var(--a-success-bucket-1);
+    --heatmap-bucket-2-default: var(--a-success-bucket-2);
+    --heatmap-bucket-3-default: var(--a-success-bucket-3);
+    --heatmap-bucket-4-default: var(--a-success-bucket-4);
   }
 
   :scope[color-scheme="warning"] {
-    --heatmap-bucket-0: var(--a-warning-bucket-0);
-    --heatmap-bucket-1: var(--a-warning-bucket-1);
-    --heatmap-bucket-2: var(--a-warning-bucket-2);
-    --heatmap-bucket-3: var(--a-warning-bucket-3);
-    --heatmap-bucket-4: var(--a-warning-bucket-4);
+    --heatmap-bucket-0-default: var(--a-warning-bucket-0);
+    --heatmap-bucket-1-default: var(--a-warning-bucket-1);
+    --heatmap-bucket-2-default: var(--a-warning-bucket-2);
+    --heatmap-bucket-3-default: var(--a-warning-bucket-3);
+    --heatmap-bucket-4-default: var(--a-warning-bucket-4);
   }
 
   :scope[color-scheme="danger"] {
-    --heatmap-bucket-0: var(--a-danger-bucket-0);
-    --heatmap-bucket-1: var(--a-danger-bucket-1);
-    --heatmap-bucket-2: var(--a-danger-bucket-2);
-    --heatmap-bucket-3: var(--a-danger-bucket-3);
-    --heatmap-bucket-4: var(--a-danger-bucket-4);
+    --heatmap-bucket-0-default: var(--a-danger-bucket-0);
+    --heatmap-bucket-1-default: var(--a-danger-bucket-1);
+    --heatmap-bucket-2-default: var(--a-danger-bucket-2);
+    --heatmap-bucket-3-default: var(--a-danger-bucket-3);
+    --heatmap-bucket-4-default: var(--a-danger-bucket-4);
   }
 
   :scope[color-scheme="info"] {
-    --heatmap-bucket-0: var(--a-info-bucket-0);
-    --heatmap-bucket-1: var(--a-info-bucket-1);
-    --heatmap-bucket-2: var(--a-info-bucket-2);
-    --heatmap-bucket-3: var(--a-info-bucket-3);
-    --heatmap-bucket-4: var(--a-info-bucket-4);
+    --heatmap-bucket-0-default: var(--a-info-bucket-0);
+    --heatmap-bucket-1-default: var(--a-info-bucket-1);
+    --heatmap-bucket-2-default: var(--a-info-bucket-2);
+    --heatmap-bucket-3-default: var(--a-info-bucket-3);
+    --heatmap-bucket-4-default: var(--a-info-bucket-4);
   }
 }

package/components/icon/icon.css

@@ -1,6 +1,6 @@
 @scope (icon-ui) {
   :where(:scope) {
-    --icon-size: var(--a-icon-size, calc(1em + 0.125rem));
+    --icon-size-default: var(--a-icon-size, calc(1em + 0.125rem));
   }
 
   :scope {
@@ -8,8 +8,8 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: var(--icon-size);
-    height: var(--icon-size);
+    width: var(--icon-size, var(--icon-size-default));
+    height: var(--icon-size, var(--icon-size-default));
     flex-shrink: 0;
     line-height: 0;
   }
@@ -24,13 +24,13 @@
      icon-ui set its own size locally. xs / xl / 2xl / 3xl / 4xl
      extend the scale beyond the universal range for hero placeholder
      contexts. `fill` matches the parent box. */
-  :scope[size="xs"]   { --icon-size: 0.75rem; }   /* 12px */
-  :scope[size="sm"]   { --icon-size: 0.875rem; }  /* 14px */
-  :scope[size="md"]   { --icon-size: 1rem; }      /* 16px */
-  :scope[size="lg"]   { --icon-size: 1.25rem; }   /* 20px */
-  :scope[size="xl"]   { --icon-size: 2rem; }      /* 32px */
-  :scope[size="2xl"]  { --icon-size: 3rem; }      /* 48px */
-  :scope[size="3xl"]  { --icon-size: 4rem; }      /* 64px */
-  :scope[size="4xl"]  { --icon-size: 6rem; }      /* 96px */
-  :scope[size="fill"] { --icon-size: 100%; }
+  :scope[size="xs"]   { --icon-size-default: 0.75rem; }   /* 12px */
+  :scope[size="sm"]   { --icon-size-default: 0.875rem; }  /* 14px */
+  :scope[size="md"]   { --icon-size-default: 1rem; }      /* 16px */
+  :scope[size="lg"]   { --icon-size-default: 1.25rem; }   /* 20px */
+  :scope[size="xl"]   { --icon-size-default: 2rem; }      /* 32px */
+  :scope[size="2xl"]  { --icon-size-default: 3rem; }      /* 48px */
+  :scope[size="3xl"]  { --icon-size-default: 4rem; }      /* 64px */
+  :scope[size="4xl"]  { --icon-size-default: 6rem; }      /* 96px */
+  :scope[size="fill"] { --icon-size-default: 100%; }
 }

package/components/image/image.css

@@ -1,14 +1,14 @@
 @scope (image-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --image-radius: 0;
+    --image-radius-default: 0;
 
     /* ── Colors ── */
-    --image-bg:       var(--a-bg-muted);
+    --image-bg-default:       var(--a-bg-muted);
 
     /* ── Transition ── */
-    --image-duration: var(--a-duration);
-    --image-easing:   var(--a-easing);
+    --image-duration-default: var(--a-duration);
+    --image-easing-default:   var(--a-easing);
   }
 
   :scope {
@@ -17,8 +17,8 @@
     display: inline-block;
     position: relative;
     overflow: hidden;
-    background: var(--image-bg);
-    border-radius: var(--image-radius);
+    background: var(--image-bg, var(--image-bg-default));
+    border-radius: var(--image-radius, var(--image-radius-default));
   }
 
   /* ── Image ── */
@@ -28,7 +28,7 @@
     height: 100%;
     object-fit: cover;
     opacity: 0;
-    transition: opacity var(--image-duration) var(--image-easing);
+    transition: opacity var(--image-duration, var(--image-duration-default)) var(--image-easing, var(--image-easing-default));
   }
 
   :scope[data-loaded] [slot="image"] {
@@ -45,7 +45,7 @@
   [slot="skeleton"] {
     position: absolute;
     inset: 0;
-    transition: opacity var(--image-duration) var(--image-easing);
+    transition: opacity var(--image-duration, var(--image-duration-default)) var(--image-easing, var(--image-easing-default));
   }
 
   :scope[data-loaded] [slot="skeleton"] {
@@ -54,10 +54,10 @@
   }
 
   /* ── Radius variants ── */
-  :scope[radius="sm"]   { --image-radius: var(--a-radius-sm); }
-  :scope[radius="md"]   { --image-radius: var(--a-radius-md); }
-  :scope[radius="lg"]   { --image-radius: var(--a-radius-lg); }
-  :scope[radius="full"] { --image-radius: var(--a-radius-full); }
+  :scope[radius="sm"]   { --image-radius-default: var(--a-radius-sm); }
+  :scope[radius="md"]   { --image-radius-default: var(--a-radius-md); }
+  :scope[radius="lg"]   { --image-radius-default: var(--a-radius-lg); }
+  :scope[radius="full"] { --image-radius-default: var(--a-radius-full); }
 
   /* ── Size mode — fills the container.
      Layout-changing attribute; sanctioned in component-token-contract.md. */
@@ -70,7 +70,7 @@
   /* ── Raw — strips chrome (background + radius) for edge-to-edge rendering.
      Comes after radius variants so it overrides them by source order. */
   :scope[raw] {
-    --image-bg: transparent;
-    --image-radius: 0;
+    --image-bg-default: transparent;
+    --image-radius-default: 0;
   }
 }