@adia-ai/web-components 0.6.32 → 0.6.34

package/components/table/table.yaml

@@ -55,7 +55,19 @@ props:
     type: number
     default: 0
   raw:
-    description: Raw mode
+    description: >-
+      Visual-only passthrough — applies `<table-ui>`'s chrome reset
+      (background / border / border-radius all transparent) AND
+      short-circuits the data lifecycle entirely. The consumer
+      owns the body shape: no header injection, no row reconciliation
+      from `.data`, no empty-state / loading overlays, no aggregation
+      or pagination footers. Use raw when embedding `<table-ui>` inside
+      surfaces that supply their own chrome (e.g. `<card-ui><section
+      bleed>`), or when wrapping a consumer-authored native `<table>`
+      for design-token styling without the framework's data semantics.
+      Pre-v0.6.33 (FB-53 §2) `raw` was visual-only and the data lifecycle
+      still ran — wrapping a `.data`-unset native table produced a
+      phantom "No data" overlay. v0.6.33+ matches the documented contract.
     type: boolean
     default: false
     reflect: true

package/components/table-toolbar/table-toolbar.css

@@ -1,26 +1,26 @@
 @scope (table-toolbar-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --table-toolbar-gap:           var(--a-space-3);
-    --table-toolbar-py:            var(--a-space-2);
-    --table-toolbar-px:            0;
-    --table-toolbar-cluster-gap:   var(--a-space-2);
+    --table-toolbar-gap-default:           var(--a-space-3);
+    --table-toolbar-py-default:            var(--a-space-2);
+    --table-toolbar-px-default:            0;
+    --table-toolbar-cluster-gap-default:   var(--a-space-2);
 
     /* ── Surface ── */
-    --table-toolbar-bg:            transparent;
-    --table-toolbar-border:        transparent;
-    --table-toolbar-border-width:  0;
-    --table-toolbar-radius:        var(--a-radius-lg);
+    --table-toolbar-bg-default:            transparent;
+    --table-toolbar-border-default:        transparent;
+    --table-toolbar-border-width-default:  0;
+    --table-toolbar-radius-default:        var(--a-radius-lg);
 
     /* ── Title ── */
-    --table-toolbar-title-fg:      var(--a-fg-strong);
-    --table-toolbar-title-size:    var(--a-ui-lg);
-    --table-toolbar-title-weight:  var(--a-weight-medium);
-    --table-toolbar-title-gap:     var(--a-space-2);
+    --table-toolbar-title-fg-default:      var(--a-fg-strong);
+    --table-toolbar-title-size-default:    var(--a-ui-lg);
+    --table-toolbar-title-weight-default:  var(--a-weight-medium);
+    --table-toolbar-title-gap-default:     var(--a-space-2);
 
     /* ── Search ── */
-    --table-toolbar-search-min:    14rem;
-    --table-toolbar-search-max:    22rem;
+    --table-toolbar-search-min-default:    14rem;
+    --table-toolbar-search-max-default:    22rem;
 
     /* Popover tokens removed — popover escapes to top layer and
        cannot inherit @scope tokens. Raw --a-* tokens are used
@@ -40,11 +40,11 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: var(--table-toolbar-gap);
-    padding: var(--table-toolbar-py) var(--table-toolbar-px);
-    background: var(--table-toolbar-bg);
-    border: var(--table-toolbar-border-width) solid var(--table-toolbar-border);
-    border-radius: var(--table-toolbar-radius);
+    gap: var(--table-toolbar-gap, var(--table-toolbar-gap-default));
+    padding: var(--table-toolbar-py, var(--table-toolbar-py-default)) var(--table-toolbar-px, var(--table-toolbar-px-default));
+    background: var(--table-toolbar-bg, var(--table-toolbar-bg-default));
+    border: var(--table-toolbar-border-width, var(--table-toolbar-border-width-default)) solid var(--table-toolbar-border, var(--table-toolbar-border-default));
+    border-radius: var(--table-toolbar-radius, var(--table-toolbar-radius-default));
     min-width: 0;
   }
 
@@ -54,11 +54,11 @@
      base styles". */
 
   :scope[variant="card"] {
-    --table-toolbar-bg:           var(--a-bg);
-    --table-toolbar-border:       var(--a-border-subtle);
-    --table-toolbar-border-width: 1px;
-    --table-toolbar-py:           var(--a-space-3);
-    --table-toolbar-px:           var(--a-space-4);
+    --table-toolbar-bg-default:           var(--a-bg);
+    --table-toolbar-border-default:       var(--a-border-subtle);
+    --table-toolbar-border-width-default: 1px;
+    --table-toolbar-py-default:           var(--a-space-3);
+    --table-toolbar-px-default:           var(--a-space-4);
   }
 
   /* ═══════ Title cluster ═══════ */
@@ -66,15 +66,15 @@
   [data-title] {
     display: inline-flex;
     align-items: center;
-    gap: var(--table-toolbar-title-gap);
+    gap: var(--table-toolbar-title-gap, var(--table-toolbar-title-gap-default));
     flex: 0 0 auto;
     min-width: 0;
   }
 
   [data-heading] {
-    font-size: var(--table-toolbar-title-size);
-    font-weight: var(--table-toolbar-title-weight);
-    color: var(--table-toolbar-title-fg);
+    font-size: var(--table-toolbar-title-size, var(--table-toolbar-title-size-default));
+    font-weight: var(--table-toolbar-title-weight, var(--table-toolbar-title-weight-default));
+    color: var(--table-toolbar-title-fg, var(--table-toolbar-title-fg-default));
     line-height: 1.2;
   }
 
@@ -85,7 +85,7 @@
   [data-controls] {
     display: inline-flex;
     align-items: center;
-    gap: var(--table-toolbar-cluster-gap);
+    gap: var(--table-toolbar-cluster-gap, var(--table-toolbar-cluster-gap-default));
     flex: 0 0 auto;
   }
 
@@ -94,9 +94,9 @@
   /* ═══════ Search ═══════ */
 
   [data-search] {
-    flex: 1 1 var(--table-toolbar-search-min);
+    flex: 1 1 var(--table-toolbar-search-min, var(--table-toolbar-search-min-default));
     min-width: 0;
-    max-width: var(--table-toolbar-search-max);
+    max-width: var(--table-toolbar-search-max, var(--table-toolbar-search-max-default));
     margin-inline-start: auto;
   }
 
@@ -107,7 +107,7 @@
   [data-actions] {
     display: inline-flex;
     align-items: center;
-    gap: var(--table-toolbar-cluster-gap);
+    gap: var(--table-toolbar-cluster-gap, var(--table-toolbar-cluster-gap-default));
     flex: 0 0 auto;
   }
 

package/components/tabs/tabs.css

@@ -1,38 +1,38 @@
 @scope (tabs-ui) {
   :where(:scope) {
     /* ── Tokens ── */
-    --tabs-border:          transparent;
-    --tabs-bg:              transparent;
-    --tabs-radius:          var(--a-radius-md);
-    --tabs-button-height:   2.25rem;
-    --tabs-button-px:       var(--a-space-2);
-    --tabs-font-size:       var(--a-ui-md);
-    --tabs-gap:             var(--a-space-1);
-    --tabs-indicator-color: var(--a-primary);
-    --tabs-indicator-height: 2px;
-    --tabs-fg:              var(--a-fg-subtle);
-    --tabs-fg-hover:        var(--a-fg);
-    --tabs-fg-active:       var(--a-fg-selected);
-    --tabs-fg-disabled:     var(--a-ui-text-disabled);
+    --tabs-border-default:          transparent;
+    --tabs-bg-default:              transparent;
+    --tabs-radius-default:          var(--a-radius-md);
+    --tabs-button-height-default:   var(--a-size);
+    --tabs-button-px-default:       var(--a-space-2);
+    --tabs-font-size-default:       var(--a-ui-md);
+    --tabs-gap-default:             var(--a-space-1);
+    --tabs-indicator-color-default: var(--a-primary);
+    --tabs-indicator-height-default: 2px;
+    --tabs-fg-default:              var(--a-fg-subtle);
+    --tabs-fg-hover-default:        var(--a-fg);
+    --tabs-fg-active-default:       var(--a-fg-selected);
+    --tabs-fg-disabled-default:     var(--a-ui-text-disabled);
 
     /* ── Spacing ── */
-    --tabs-vertical-gap:    var(--a-space-4);
-    --tabs-button-gap:      var(--a-space-1);
+    --tabs-vertical-gap-default:    var(--a-space-4);
+    --tabs-button-gap-default:      var(--a-space-1);
 
     /* ── Transitions ── */
-    --tabs-duration:        var(--a-duration);
-    --tabs-duration-fast:   var(--a-duration-fast);
-    --tabs-easing:          var(--a-easing);
-    --tabs-easing-out:      var(--a-easing-out);
+    --tabs-duration-default:        var(--a-duration);
+    --tabs-duration-fast-default:   var(--a-duration-fast);
+    --tabs-easing-default:          var(--a-easing);
+    --tabs-easing-out-default:      var(--a-easing-out);
 
     /* ── Focus ── */
-    --tabs-focus-ring:      var(--a-focus-ring);
-    --tabs-focus-radius:    var(--a-radius-sm);
+    --tabs-focus-ring-default:      var(--a-focus-ring);
+    --tabs-focus-radius-default:    var(--a-radius-sm);
 
     /* ── Vertical strip min-width ── */
     /* Component-intrinsic visual constant; no --a-space-* equivalent
        (8.75rem ≈ 140px at 1rem=16px). */
-    --tabs-vertical-strip-min-width: 8.75rem;
+    --tabs-vertical-strip-min-width-default: 8.75rem;
   }
 
   :scope {
@@ -40,29 +40,29 @@
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    background: var(--tabs-bg);
-    border-radius: var(--tabs-radius);
+    background: var(--tabs-bg, var(--tabs-bg-default));
+    border-radius: var(--tabs-radius, var(--tabs-radius-default));
   }
 
   /* Bordered variant — baseline border under the tab strip.
      The active indicator sits on top of the border for a clean join. */
-  :scope[variant="bordered"] { --tabs-border: var(--a-border-subtle); }
-  :scope[divider]            { --tabs-border: var(--a-border-subtle); }
+  :scope[variant="bordered"] { --tabs-border-default: var(--a-border-subtle); }
+  :scope[divider]            { --tabs-border-default: var(--a-border-subtle); }
 
   /* Vertical orientation: strip on the left, panels on the right */
   :scope[orientation="vertical"] {
     flex-direction: row;
     align-items: flex-start;
-    gap: var(--tabs-vertical-gap);
+    gap: var(--tabs-vertical-gap, var(--tabs-vertical-gap-default));
   }
 
   /* ── Button strip ── */
   [slot="strip"] {
     box-sizing: border-box;
     display: flex;
-    gap: var(--tabs-gap);
-    height: var(--tabs-button-height);
-    box-shadow: inset 0 -1px 0 var(--tabs-border);
+    gap: var(--tabs-gap, var(--tabs-gap-default));
+    height: var(--tabs-button-height, var(--tabs-button-height-default));
+    box-shadow: inset 0 -1px 0 var(--tabs-border, var(--tabs-border-default));
     position: relative;
   }
 
@@ -70,9 +70,9 @@
     flex-direction: column;
     align-items: stretch;
     height: auto;
-    box-shadow: inset 1px 0 0 var(--tabs-border);
+    box-shadow: inset 1px 0 0 var(--tabs-border, var(--tabs-border-default));
     flex-shrink: 0;
-    min-width: var(--tabs-vertical-strip-min-width);
+    min-width: var(--tabs-vertical-strip-min-width, var(--tabs-vertical-strip-min-width-default));
   }
 
   /* ── Sliding indicator ── */
@@ -80,24 +80,24 @@
     position: absolute;
     bottom: 0;
     left: 0;
-    height: var(--tabs-indicator-height);
-    background: var(--tabs-indicator-color);
-    border-radius: var(--tabs-indicator-height);
+    height: var(--tabs-indicator-height, var(--tabs-indicator-height-default));
+    background: var(--tabs-indicator-color, var(--tabs-indicator-color-default));
+    border-radius: var(--tabs-indicator-height, var(--tabs-indicator-height-default));
     pointer-events: none;
     transition:
-      transform var(--tabs-duration) var(--tabs-easing-out),
-      width var(--tabs-duration) var(--tabs-easing-out);
+      transform var(--tabs-duration, var(--tabs-duration-default)) var(--tabs-easing-out, var(--tabs-easing-out-default)),
+      width var(--tabs-duration, var(--tabs-duration-default)) var(--tabs-easing-out, var(--tabs-easing-out-default));
   }
 
   :scope[orientation="vertical"] [slot="indicator"] {
     bottom: auto;
     left: -1px;
     top: 0;
-    width: var(--tabs-indicator-height);
+    width: var(--tabs-indicator-height, var(--tabs-indicator-height-default));
     height: auto;
     transition:
-      transform var(--tabs-duration) var(--tabs-easing-out),
-      height var(--tabs-duration) var(--tabs-easing-out);
+      transform var(--tabs-duration, var(--tabs-duration-default)) var(--tabs-easing-out, var(--tabs-easing-out-default)),
+      height var(--tabs-duration, var(--tabs-duration-default)) var(--tabs-easing-out, var(--tabs-easing-out-default));
   }
 
   /* Vertical panel area takes remaining space */
@@ -111,19 +111,19 @@
     box-sizing: border-box;
     display: inline-flex;
     align-items: center;
-    gap: var(--tabs-button-gap);
-    height: var(--tabs-button-height);
-    padding-inline: var(--tabs-button-px);
+    gap: var(--tabs-button-gap, var(--tabs-button-gap-default));
+    height: var(--tabs-button-height, var(--tabs-button-height-default));
+    padding-inline: var(--tabs-button-px, var(--tabs-button-px-default));
     border: none;
     background: none;
-    color: var(--tabs-fg);
+    color: var(--tabs-fg, var(--tabs-fg-default));
     font: inherit;
-    font-size: var(--tabs-font-size);
+    font-size: var(--tabs-font-size, var(--tabs-font-size-default));
     line-height: 1;
     cursor: pointer;
     user-select: none;
     white-space: nowrap;
-    transition: color var(--tabs-duration-fast) var(--tabs-easing);
+    transition: color var(--tabs-duration-fast, var(--tabs-duration-fast-default)) var(--tabs-easing, var(--tabs-easing-default));
   }
 
   :scope[orientation="vertical"] [slot="tab-button"] {
@@ -133,23 +133,23 @@
   }
 
   [slot="tab-button"]:not([disabled]):hover {
-    color: var(--tabs-fg-hover);
+    color: var(--tabs-fg-hover, var(--tabs-fg-hover-default));
   }
 
   [slot="tab-button"][data-active] {
-    color: var(--tabs-fg-active);
+    color: var(--tabs-fg-active, var(--tabs-fg-active-default));
   }
 
   [slot="tab-button"][disabled] {
-    color: var(--tabs-fg-disabled);
+    color: var(--tabs-fg-disabled, var(--tabs-fg-disabled-default));
     cursor: not-allowed;
     pointer-events: none;
   }
 
   [slot="tab-button"]:focus-visible {
     outline: none;
-    box-shadow: var(--tabs-focus-ring);
-    border-radius: var(--tabs-focus-radius);
+    box-shadow: var(--tabs-focus-ring, var(--tabs-focus-ring-default));
+    border-radius: var(--tabs-focus-radius, var(--tabs-focus-radius-default));
   }
 
   /* ── Tab panels ── */

package/components/tag/tag.css

@@ -1,37 +1,37 @@
 /* Safari 17.x bug: `:scope[attr]:hover` inside `@scope` doesn't match the
    scope root. Plain selector outside works. See docs/BROWSER-COMPAT.md §3a. */
 tag-ui[removable]:not([disabled]):hover {
-  --tag-bg: var(--tag-bg-hover);
+  --tag-bg-default: var(--tag-bg-hover, var(--tag-bg-hover-default));
 }
 
 @scope (tag-ui) {
   :where(:scope) {
     /* ── Tokens ── */
-    --tag-bg:           var(--a-bg-muted);
-    --tag-fg:           var(--a-fg);
-    --tag-border:       transparent;
-    --tag-radius:       var(--a-radius-full);
-    --tag-px:           var(--a-space-2);
-    --tag-py:           0.125rem;
-    --tag-gap:          var(--a-space-1);
-    --tag-font:         var(--a-ui-sm);
-    --tag-dismiss-size: 1rem;
-    --tag-bg-hover:     var(--a-bg-hover);
-    --tag-bg-disabled:  var(--a-ui-bg-disabled);
-    --tag-fg-disabled:  var(--a-ui-text-disabled);
+    --tag-bg-default:           var(--a-bg-muted);
+    --tag-fg-default:           var(--a-fg);
+    --tag-border-default:       transparent;
+    --tag-radius-default:       var(--a-radius-full);
+    --tag-px-default:           var(--a-space-2);
+    --tag-py-default:           0.125rem;
+    --tag-gap-default:          var(--a-space-1);
+    --tag-font-default:         var(--a-ui-sm);
+    --tag-dismiss-size-default: 1rem;
+    --tag-bg-hover-default:     var(--a-bg-hover);
+    --tag-bg-disabled-default:  var(--a-ui-bg-disabled);
+    --tag-fg-disabled-default:  var(--a-ui-text-disabled);
 
     /* ── Focus ── */
-    --tag-focus-ring:   var(--a-focus-ring);
+    --tag-focus-ring-default:   var(--a-focus-ring);
 
     /* ── Motion ── */
-    --tag-duration:     var(--a-duration-fast);
-    --tag-easing:       var(--a-easing);
+    --tag-duration-default:     var(--a-duration-fast);
+    --tag-easing-default:       var(--a-easing);
 
     /* ── Dismiss ── */
-    --tag-dismiss-radius: var(--a-radius-full);
-    --tag-dismiss-fg:   var(--a-fg-muted);
-    --tag-dismiss-fg-hover: var(--a-fg);
-    --tag-dismiss-bg-hover: var(--a-bg-muted);
+    --tag-dismiss-radius-default: var(--a-radius-full);
+    --tag-dismiss-fg-default:   var(--a-fg-muted);
+    --tag-dismiss-fg-hover-default: var(--a-fg);
+    --tag-dismiss-bg-hover-default: var(--a-bg-muted);
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
 }
 
@@ -40,19 +40,19 @@ tag-ui[removable]:not([disabled]):hover {
     box-sizing: border-box;
     display: inline-flex;
     align-items: center;
-    gap: var(--tag-gap);
-    padding: var(--tag-py) var(--tag-px);
-    border-radius: var(--tag-radius);
-    border: 1px solid var(--tag-border);
+    gap: var(--tag-gap, var(--tag-gap-default));
+    padding: var(--tag-py, var(--tag-py-default)) var(--tag-px, var(--tag-px-default));
+    border-radius: var(--tag-radius, var(--tag-radius-default));
+    border: 1px solid var(--tag-border, var(--tag-border-default));
     font: inherit;
-    font-size: var(--tag-font);
+    font-size: var(--tag-font, var(--tag-font-default));
     font-weight: 500;
     line-height: 1;
-    color: var(--tag-fg);
-    background: var(--tag-bg);
+    color: var(--tag-fg, var(--tag-fg-default));
+    background: var(--tag-bg, var(--tag-bg-default));
     white-space: nowrap;
     user-select: none;
-    transition: background var(--tag-duration) var(--tag-easing), color var(--tag-duration) var(--tag-easing);
+    transition: background var(--tag-duration, var(--tag-duration-default)) var(--tag-easing, var(--tag-easing-default)), color var(--tag-duration, var(--tag-duration-default)) var(--tag-easing, var(--tag-easing-default));
   }
 
   /* `[text]` attribute selector gates the ::after so consumers using
@@ -66,23 +66,23 @@ tag-ui[removable]:not([disabled]):hover {
 
   /* ── Variants ── */
   :scope[variant="info"] {
-    --tag-bg: var(--a-info-muted);
-    --tag-fg: var(--a-info-bg);
+    --tag-bg-default: var(--a-info-muted);
+    --tag-fg-default: var(--a-info-bg);
   }
 
   :scope[variant="success"] {
-    --tag-bg: var(--a-success-muted);
-    --tag-fg: var(--a-success-bg);
+    --tag-bg-default: var(--a-success-muted);
+    --tag-fg-default: var(--a-success-bg);
   }
 
   :scope[variant="warning"] {
-    --tag-bg: var(--a-warning-muted);
-    --tag-fg: var(--a-warning-bg);
+    --tag-bg-default: var(--a-warning-muted);
+    --tag-fg-default: var(--a-warning-bg);
   }
 
   :scope[variant="danger"] {
-    --tag-bg: var(--a-danger-muted);
-    --tag-fg: var(--a-danger-bg);
+    --tag-bg-default: var(--a-danger-muted);
+    --tag-fg-default: var(--a-danger-bg);
   }
 
   /* `default` is a semantic alias of the base — same tokens as the
@@ -91,8 +91,8 @@ tag-ui[removable]:not([disabled]):hover {
      base; the explicit selector lets `<tag-ui variant="default">`
      render identically without falling through to base. */
   :scope[variant="default"] {
-    --tag-bg: var(--a-bg-muted);
-    --tag-fg: var(--a-fg);
+    --tag-bg-default: var(--a-bg-muted);
+    --tag-fg-default: var(--a-fg);
   }
 
   /* Size handled by universal [size] attribute system. */
@@ -102,7 +102,7 @@ tag-ui[removable]:not([disabled]):hover {
   /* ── Focus ── */
   :scope:focus-visible {
     outline: none;
-    box-shadow: var(--tag-focus-ring);
+    box-shadow: var(--tag-focus-ring, var(--tag-focus-ring-default));
   }
 
   /* ── Dismiss button ── */
@@ -110,28 +110,28 @@ tag-ui[removable]:not([disabled]):hover {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: var(--tag-dismiss-size);
-    height: var(--tag-dismiss-size);
+    width: var(--tag-dismiss-size, var(--tag-dismiss-size-default));
+    height: var(--tag-dismiss-size, var(--tag-dismiss-size-default));
     padding: 0;
     border: none;
     background: none;
     cursor: pointer;
-    border-radius: var(--tag-dismiss-radius);
-    color: var(--tag-dismiss-fg);
+    border-radius: var(--tag-dismiss-radius, var(--tag-dismiss-radius-default));
+    color: var(--tag-dismiss-fg, var(--tag-dismiss-fg-default));
     --a-icon-size: 0.875rem;
     order: 1; /* push dismiss to end so layout reads [text] [×] */
-    transition: color var(--tag-duration) var(--tag-easing), background var(--tag-duration) var(--tag-easing);
+    transition: color var(--tag-duration, var(--tag-duration-default)) var(--tag-easing, var(--tag-easing-default)), background var(--tag-duration, var(--tag-duration-default)) var(--tag-easing, var(--tag-easing-default));
   }
 
   [slot="dismiss"]:hover {
-    color: var(--tag-dismiss-fg-hover);
-    background: var(--tag-dismiss-bg-hover);
+    color: var(--tag-dismiss-fg-hover, var(--tag-dismiss-fg-hover-default));
+    background: var(--tag-dismiss-bg-hover, var(--tag-dismiss-bg-hover-default));
   }
 
   /* ── Disabled ── */
   :scope[disabled] {
-    --tag-bg: var(--tag-bg-disabled);
-    --tag-fg: var(--tag-fg-disabled);
+    --tag-bg-default: var(--tag-bg-disabled, var(--tag-bg-disabled-default));
+    --tag-fg-default: var(--tag-fg-disabled, var(--tag-fg-disabled-default));
     pointer-events: none;
   }
 }

package/components/text/text.css

@@ -1,27 +1,27 @@
 @scope (text-ui) {
   :where(:scope) {
     /* ── Tokens (body defaults) ── */
-    --text-family:    var(--a-body-family);
-    --text-weight:    var(--a-weight);
-    --text-weight-strong:    var(--a-weight-semibold);
-    --text-size:      var(--a-body-size);
-    --text-leading:   var(--a-body-leading);
-    --text-tracking:  var(--a-body-tracking);
-    --text-case:      var(--a-body-case);
-    --text-color:     var(--a-fg);
-    --text-color-strong:     var(--a-fg-strong);
+    --text-family-default:    var(--a-body-family);
+    --text-weight-default:    var(--a-weight);
+    --text-weight-strong-default:    var(--a-weight-semibold);
+    --text-size-default:      var(--a-body-size);
+    --text-leading-default:   var(--a-body-leading);
+    --text-tracking-default:  var(--a-body-tracking);
+    --text-case-default:      var(--a-body-case);
+    --text-color-default:     var(--a-fg);
+    --text-color-strong-default:     var(--a-fg-strong);
   }
 
   :scope {
     box-sizing: border-box;
     display: inline;
-    font-family: var(--text-family);
-    font-weight: var(--text-weight);
-    font-size: var(--text-size);
-    line-height: var(--text-leading);
-    letter-spacing: var(--text-tracking);
-    text-transform: var(--text-case);
-    color: var(--text-color);
+    font-family: var(--text-family, var(--text-family-default));
+    font-weight: var(--text-weight, var(--text-weight-default));
+    font-size: var(--text-size, var(--text-size-default));
+    line-height: var(--text-leading, var(--text-leading-default));
+    letter-spacing: var(--text-tracking, var(--text-tracking-default));
+    text-transform: var(--text-case, var(--text-case-default));
+    color: var(--text-color, var(--text-color-default));
   }
 
   /* Reset native heading styles inside text-ui so the variant controls the look */
@@ -33,20 +33,20 @@
   }
 
   :scope[strong], :is(strong) {
-    --text-weight: var(--text-weight-strong);
-    --text-color: var(--text-color-strong);
+    --text-weight-default: var(--text-weight-strong, var(--text-weight-strong-default));
+    --text-color-default: var(--text-color-strong, var(--text-color-strong-default));
   }
 
   /* ── Variants ── */
-  :scope[variant="body"]       { --text-family: var(--a-body-family);    --text-weight: var(--a-body-weight);    --text-size: var(--a-body-size);    --text-leading: var(--a-body-leading);    --text-tracking: var(--a-body-tracking);    --text-case: var(--a-body-case);    --text-color: var(--a-fg); }
-  :scope[variant="display"]    { --text-family: var(--a-display-family); --text-weight: var(--a-display-weight); --text-size: var(--a-display-size); --text-leading: var(--a-display-leading); --text-tracking: var(--a-display-tracking); --text-case: var(--a-display-case); --text-color: var(--a-display-color); }
-  :scope[variant="title"]      { --text-family: var(--a-title-family);   --text-weight: var(--a-title-weight);   --text-size: var(--a-title-size);   --text-leading: var(--a-title-leading);   --text-tracking: var(--a-title-tracking);   --text-case: var(--a-title-case);   --text-color: var(--a-title-color); }
-  :scope[variant="heading"]    { --text-family: var(--a-heading-family); --text-weight: var(--a-heading-weight); --text-size: var(--a-heading-size); --text-leading: var(--a-heading-leading); --text-tracking: var(--a-heading-tracking); --text-case: var(--a-heading-case); --text-color: var(--a-heading-color); }
-  :scope[variant="section"]    { --text-family: var(--a-section-family); --text-weight: var(--a-section-weight); --text-size: var(--a-section-size); --text-leading: var(--a-section-leading); --text-tracking: var(--a-section-tracking); --text-case: var(--a-section-case); --text-color: var(--a-section-color); }
-  :scope[variant="caption"]    { --text-family: var(--a-caption-family); --text-weight: var(--a-caption-weight); --text-size: var(--a-caption-size); --text-leading: var(--a-caption-leading); --text-tracking: var(--a-caption-tracking); --text-case: var(--a-caption-case); --text-color: var(--a-caption-color); }
-  :scope[variant="label"]      { --text-family: var(--a-label-family);   --text-weight: var(--a-label-weight);   --text-size: var(--a-label-size);   --text-leading: var(--a-label-leading);   --text-tracking: var(--a-label-tracking);   --text-case: var(--a-label-case);   --text-color: var(--a-label-color); }
-  :scope[variant="kicker"]     { --text-family: var(--a-kicker-family);  --text-weight: var(--a-kicker-weight);  --text-size: var(--a-kicker-size);  --text-leading: var(--a-kicker-leading);  --text-tracking: var(--a-kicker-tracking);  --text-case: uppercase;             --text-color: var(--a-kicker-color); }
-  :scope[variant="code"]       { --text-family: var(--a-code-family);    --text-weight: var(--a-code-weight);    --text-size: var(--a-code-size);    --text-leading: var(--a-code-leading);    --text-tracking: var(--a-code-tracking);    --text-case: var(--a-code-case);    --text-color: var(--a-code-color); }
+  :scope[variant="body"]       { --text-family-default: var(--a-body-family);    --text-weight-default: var(--a-body-weight);    --text-size-default: var(--a-body-size);    --text-leading-default: var(--a-body-leading);    --text-tracking-default: var(--a-body-tracking);    --text-case-default: var(--a-body-case);    --text-color-default: var(--a-fg); }
+  :scope[variant="display"]    { --text-family-default: var(--a-display-family); --text-weight-default: var(--a-display-weight); --text-size-default: var(--a-display-size); --text-leading-default: var(--a-display-leading); --text-tracking-default: var(--a-display-tracking); --text-case-default: var(--a-display-case); --text-color-default: var(--a-display-color); }
+  :scope[variant="title"]      { --text-family-default: var(--a-title-family);   --text-weight-default: var(--a-title-weight);   --text-size-default: var(--a-title-size);   --text-leading-default: var(--a-title-leading);   --text-tracking-default: var(--a-title-tracking);   --text-case-default: var(--a-title-case);   --text-color-default: var(--a-title-color); }
+  :scope[variant="heading"]    { --text-family-default: var(--a-heading-family); --text-weight-default: var(--a-heading-weight); --text-size-default: var(--a-heading-size); --text-leading-default: var(--a-heading-leading); --text-tracking-default: var(--a-heading-tracking); --text-case-default: var(--a-heading-case); --text-color-default: var(--a-heading-color); }
+  :scope[variant="section"]    { --text-family-default: var(--a-section-family); --text-weight-default: var(--a-section-weight); --text-size-default: var(--a-section-size); --text-leading-default: var(--a-section-leading); --text-tracking-default: var(--a-section-tracking); --text-case-default: var(--a-section-case); --text-color-default: var(--a-section-color); }
+  :scope[variant="caption"]    { --text-family-default: var(--a-caption-family); --text-weight-default: var(--a-caption-weight); --text-size-default: var(--a-caption-size); --text-leading-default: var(--a-caption-leading); --text-tracking-default: var(--a-caption-tracking); --text-case-default: var(--a-caption-case); --text-color-default: var(--a-caption-color); }
+  :scope[variant="label"]      { --text-family-default: var(--a-label-family);   --text-weight-default: var(--a-label-weight);   --text-size-default: var(--a-label-size);   --text-leading-default: var(--a-label-leading);   --text-tracking-default: var(--a-label-tracking);   --text-case-default: var(--a-label-case);   --text-color-default: var(--a-label-color); }
+  :scope[variant="kicker"]     { --text-family-default: var(--a-kicker-family);  --text-weight-default: var(--a-kicker-weight);  --text-size-default: var(--a-kicker-size);  --text-leading-default: var(--a-kicker-leading);  --text-tracking-default: var(--a-kicker-tracking);  --text-case-default: uppercase;             --text-color-default: var(--a-kicker-color); }
+  :scope[variant="code"]       { --text-family-default: var(--a-code-family);    --text-weight-default: var(--a-code-weight);    --text-size-default: var(--a-code-size);    --text-leading-default: var(--a-code-leading);    --text-tracking-default: var(--a-code-tracking);    --text-case-default: var(--a-code-case);    --text-color-default: var(--a-code-color); }
 
   /* §210 (v0.5.7, FEEDBACK-17 §1): three token-backed variants whose
      `--a-<role>-{family,weight,leading,tracking,case,color,size}` tokens
@@ -57,9 +57,9 @@
      this batch: their tokens don't ship anywhere (verified in this same
      arc), so the enum entries are retired from text.yaml / text.d.ts /
      text.a2ui.json. */
-  :scope[variant="subsection"] { --text-family: var(--a-subsection-family); --text-weight: var(--a-subsection-weight); --text-size: var(--a-subsection-size); --text-leading: var(--a-subsection-leading); --text-tracking: var(--a-subsection-tracking); --text-case: var(--a-subsection-case); --text-color: var(--a-subsection-color); }
-  :scope[variant="deck"]       { --text-family: var(--a-deck-family);       --text-weight: var(--a-deck-weight);       --text-size: var(--a-deck-size);       --text-leading: var(--a-deck-leading);       --text-tracking: var(--a-deck-tracking);       --text-case: var(--a-deck-case);       --text-color: var(--a-deck-color); }
-  :scope[variant="metric"]     { --text-family: var(--a-metric-family);     --text-weight: var(--a-metric-weight);     --text-size: var(--a-metric-size);     --text-leading: var(--a-metric-leading);     --text-tracking: var(--a-metric-tracking);     --text-case: var(--a-metric-case);     --text-color: var(--a-metric-color); }
+  :scope[variant="subsection"] { --text-family-default: var(--a-subsection-family); --text-weight-default: var(--a-subsection-weight); --text-size-default: var(--a-subsection-size); --text-leading-default: var(--a-subsection-leading); --text-tracking-default: var(--a-subsection-tracking); --text-case-default: var(--a-subsection-case); --text-color-default: var(--a-subsection-color); }
+  :scope[variant="deck"]       { --text-family-default: var(--a-deck-family);       --text-weight-default: var(--a-deck-weight);       --text-size-default: var(--a-deck-size);       --text-leading-default: var(--a-deck-leading);       --text-tracking-default: var(--a-deck-tracking);       --text-case-default: var(--a-deck-case);       --text-color-default: var(--a-deck-color); }
+  :scope[variant="metric"]     { --text-family-default: var(--a-metric-family);     --text-weight-default: var(--a-metric-weight);     --text-size-default: var(--a-metric-size);     --text-leading-default: var(--a-metric-leading);     --text-tracking-default: var(--a-metric-tracking);     --text-case-default: var(--a-metric-case);     --text-color-default: var(--a-metric-color); }
 
   /* ── v0.6.18 (FB-10) — finer-control overrides on top of `variant` ──
      The skill always documented an overlay API (color="subtle",
@@ -72,25 +72,25 @@
      with an unknown color = no-op (variant color wins). */
 
   /* size — sm | md | lg (md is the body default ~15-16px) */
-  :scope[size="sm"]  { --text-size: var(--a-body-sm); }
-  :scope[size="md"]  { --text-size: var(--a-body-md); }
-  :scope[size="lg"]  { --text-size: var(--a-body-lg); }
+  :scope[size="sm"]  { --text-size-default: var(--a-body-sm); }
+  :scope[size="md"]  { --text-size-default: var(--a-body-md); }
+  :scope[size="lg"]  { --text-size-default: var(--a-body-lg); }
 
   /* color — default | subtle | strong | accent | danger | success | warning
      (no value = variant default; "default" is an explicit reset). */
-  :scope[color="default"] { --text-color: var(--a-fg); }
-  :scope[color="subtle"]  { --text-color: var(--a-fg-muted); }
-  :scope[color="strong"]  { --text-color: var(--a-fg-strong); }
-  :scope[color="accent"]  { --text-color: var(--a-accent); }
-  :scope[color="danger"]  { --text-color: var(--a-danger-bg); }
-  :scope[color="success"] { --text-color: var(--a-success-bg); }
-  :scope[color="warning"] { --text-color: var(--a-warning-bg); }
+  :scope[color="default"] { --text-color-default: var(--a-fg); }
+  :scope[color="subtle"]  { --text-color-default: var(--a-fg-muted); }
+  :scope[color="strong"]  { --text-color-default: var(--a-fg-strong); }
+  :scope[color="accent"]  { --text-color-default: var(--a-accent); }
+  :scope[color="danger"]  { --text-color-default: var(--a-danger-bg); }
+  :scope[color="success"] { --text-color-default: var(--a-success-bg); }
+  :scope[color="warning"] { --text-color-default: var(--a-warning-bg); }
 
   /* weight — regular | medium | semibold | bold */
-  :scope[weight="regular"]  { --text-weight: var(--a-weight); }
-  :scope[weight="medium"]   { --text-weight: var(--a-weight-medium); }
-  :scope[weight="semibold"] { --text-weight: var(--a-weight-semibold); }
-  :scope[weight="bold"]     { --text-weight: var(--a-weight-bold); }
+  :scope[weight="regular"]  { --text-weight-default: var(--a-weight); }
+  :scope[weight="medium"]   { --text-weight-default: var(--a-weight-medium); }
+  :scope[weight="semibold"] { --text-weight-default: var(--a-weight-semibold); }
+  :scope[weight="bold"]     { --text-weight-default: var(--a-weight-bold); }
 
   /* text-align — start | center | end | justify */
   :scope[text-align="start"]   { text-align: start; }