@adia-ai/web-components 0.7.3 → 0.7.5

package/components/tag/tag.test.js

@@ -41,9 +41,9 @@ describe('tag-ui — content: attr(text) gating', () => {
     // [icon] + [dismiss] slot rendering and for proper :scope[text]
     // gap rendering when text IS set.
     expect(TAG_CSS).toMatch(/:scope\s*\{[^}]*display:\s*inline-flex/);
-    // Post OD-5 sweep: tokens read via `var(--prop, var(--prop-default))`
-    // chain so consumer-named overrides AND --a-* surface overrides both work.
-    expect(TAG_CSS).toMatch(/:scope\s*\{[^}]*gap:\s*var\(--tag-gap,\s*var\(--tag-gap-default\)\)/);
+    // Tokens are read directly via `var(--prop)`; consumers override the
+    // un-suffixed token on the element (or via @layer overrides).
+    expect(TAG_CSS).toMatch(/:scope\s*\{[^}]*gap:\s*var\(--tag-gap\)/);
   });
 });
 
@@ -65,8 +65,8 @@ describe('tag-ui — variant defaults to solid fill', () => {
   ])('[variant="%s"] base rule uses --a-{family}-bg + --a-{family}-fg', (family) => {
     const block = new RegExp(
       `:scope\\[variant="${family}"\\]\\s*\\{[^}]*` +
-      `--tag-bg-default:\\s*var\\(--a-${family}-bg\\)[^}]*` +
-      `--tag-fg-default:\\s*var\\(--a-${family}-fg\\)`,
+      `--tag-bg:\\s*var\\(--a-${family}-bg\\)[^}]*` +
+      `--tag-fg:\\s*var\\(--a-${family}-fg\\)`,
       's'
     );
     expect(TAG_CSS).toMatch(block);
@@ -78,7 +78,7 @@ describe('tag-ui — variant defaults to solid fill', () => {
     // can pair `-bg` + `-fg` cleanly without local overrides. The pair
     // resolves to bright-amber-bg + dark-brown-text in both schemes.
     expect(TAG_CSS).toMatch(
-      /:scope\[variant="warning"\]\s*\{[^}]*--tag-bg-default:\s*var\(--a-warning-bg\)[^}]*--tag-fg-default:\s*var\(--a-warning-fg\)/s
+      /:scope\[variant="warning"\]\s*\{[^}]*--tag-bg:\s*var\(--a-warning-bg\)[^}]*--tag-fg:\s*var\(--a-warning-fg\)/s
     );
   });
 });
@@ -92,8 +92,8 @@ describe('tag-ui — [tone="muted"] opts out to canonical muted pair', () => {
   ])('[tone="muted"][variant="%s"] uses --a-{family}-muted + --a-{family}-text', (family) => {
     const block = new RegExp(
       `:scope\\[tone="muted"\\]\\[variant="${family}"\\]\\s*\\{[^}]*` +
-      `--tag-bg-default:\\s*var\\(--a-${family}-muted\\)[^}]*` +
-      `--tag-fg-default:\\s*var\\(--a-${family}-text\\)`,
+      `--tag-bg:\\s*var\\(--a-${family}-muted\\)[^}]*` +
+      `--tag-fg:\\s*var\\(--a-${family}-text\\)`,
       's'
     );
     expect(TAG_CSS).toMatch(block);
@@ -103,13 +103,13 @@ describe('tag-ui — [tone="muted"] opts out to canonical muted pair', () => {
 describe('tag-ui — neutral default + explicit solid stamp', () => {
   it('[variant="default"] stays quiet chrome (--a-bg-muted + --a-fg)', () => {
     expect(TAG_CSS).toMatch(
-      /:scope\[variant="default"\]\s*\{[^}]*--tag-bg-default:\s*var\(--a-bg-muted\)[^}]*--tag-fg-default:\s*var\(--a-fg\)/s
+      /:scope\[variant="default"\]\s*\{[^}]*--tag-bg:\s*var\(--a-bg-muted\)[^}]*--tag-fg:\s*var\(--a-fg\)/s
     );
   });
 
   it('[tone="solid"] without a family inverts to fg/bg high-contrast stamp', () => {
     expect(TAG_CSS).toMatch(
-      /:scope\[tone="solid"\]:not\(\[variant="info"\]\)[\s\S]*?--tag-bg-default:\s*var\(--a-fg\)[\s\S]*?--tag-fg-default:\s*var\(--a-bg\)/
+      /:scope\[tone="solid"\]:not\(\[variant="info"\]\)[\s\S]*?--tag-bg:\s*var\(--a-fg\)[\s\S]*?--tag-fg:\s*var\(--a-bg\)/
     );
   });
 });
@@ -117,7 +117,7 @@ describe('tag-ui — neutral default + explicit solid stamp', () => {
 describe('tag-ui — [tone="outline"] strips fill + colors border', () => {
   it('[tone="outline"] base rule sets bg to transparent', () => {
     expect(TAG_CSS).toMatch(
-      /:scope\[tone="outline"\]\s*\{[^}]*--tag-bg-default:\s*transparent/s
+      /:scope\[tone="outline"\]\s*\{[^}]*--tag-bg:\s*transparent/s
     );
   });
 
@@ -129,8 +129,8 @@ describe('tag-ui — [tone="outline"] strips fill + colors border', () => {
   ])('[tone="outline"][variant="%s"] colors fg + border per family', (family) => {
     const block = new RegExp(
       `:scope\\[tone="outline"\\]\\[variant="${family}"\\]\\s*\\{[^}]*` +
-      `--tag-fg-default:\\s*var\\(--a-${family}-text\\)[^}]*` +
-      `--tag-border-default:\\s*var\\(--a-${family}-border\\)`,
+      `--tag-fg:\\s*var\\(--a-${family}-text\\)[^}]*` +
+      `--tag-border:\\s*var\\(--a-${family}-border\\)`,
       's'
     );
     expect(TAG_CSS).toMatch(block);
@@ -138,7 +138,7 @@ describe('tag-ui — [tone="outline"] strips fill + colors border', () => {
 
   it('[tone="outline"] on neutral uses --a-fg-muted text + --a-border ring', () => {
     expect(TAG_CSS).toMatch(
-      /:scope\[tone="outline"\]:not\(\[variant="info"\]\)[\s\S]*?--tag-fg-default:\s*var\(--a-fg-muted\)[\s\S]*?--tag-border-default:\s*var\(--a-border\)/
+      /:scope\[tone="outline"\]:not\(\[variant="info"\]\)[\s\S]*?--tag-fg:\s*var\(--a-fg-muted\)[\s\S]*?--tag-border:\s*var\(--a-border\)/
     );
   });
 });

package/components/tags-input/tags-input.css

@@ -1,39 +1,39 @@
 @scope (tags-input-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --tags-input-min-h-default:           var(--a-size);
-    --tags-input-px-default:              var(--a-ui-px);
-    --tags-input-py-default:              calc(var(--a-space-1) / 2);
-    --tags-input-gap-default:             var(--a-space-1);
-    --tags-input-radius-default:          var(--a-radius);
+    --tags-input-min-h:           var(--a-size);
+    --tags-input-px:              var(--a-ui-px);
+    --tags-input-py:              calc(var(--a-space-1) / 2);
+    --tags-input-gap:             var(--a-space-1);
+    --tags-input-radius:          var(--a-radius);
 
     /* ── Typography ── */
-    --tags-input-font-size-default:       var(--a-ui-size);
+    --tags-input-font-size:       var(--a-ui-size);
 
     /* ── Colors — host ── */
-    --tags-input-bg-default:              var(--a-ui-bg);
-    --tags-input-bg-hover-default:        var(--a-ui-bg-hover);
-    --tags-input-fg-default:              var(--a-ui-text);
-    --tags-input-placeholder-fg-default:  var(--a-ui-text-placeholder);
-    --tags-input-border-default:          var(--a-ui-border);
-    --tags-input-border-hover-default:    var(--a-ui-border-hover);
-    --tags-input-focus-ring-default:      var(--a-focus-ring);
-    --tags-input-focus-ring-invalid-default: var(--a-focus-ring-invalid);
+    --tags-input-bg:              var(--a-ui-bg);
+    --tags-input-bg-hover:        var(--a-ui-bg-hover);
+    --tags-input-fg:              var(--a-ui-text);
+    --tags-input-placeholder-fg:  var(--a-ui-text-placeholder);
+    --tags-input-border:          var(--a-ui-border);
+    --tags-input-border-hover:    var(--a-ui-border-hover);
+    --tags-input-focus-ring:      var(--a-focus-ring);
+    --tags-input-focus-ring-invalid: var(--a-focus-ring-invalid);
 
     /* ── Transition ── */
-    --tags-input-duration-default:        var(--a-duration-fast);
-    --tags-input-easing-default:          var(--a-easing);
+    --tags-input-duration:        var(--a-duration-fast);
+    --tags-input-easing:          var(--a-easing);
 
     /* ── Chip overrides — cascaded into nested <tag-ui> ── */
-    --tags-input-chip-bg-invalid-default: var(--a-danger-muted);
+    --tags-input-chip-bg-invalid: var(--a-danger-muted);
 
     /* ── Suggestions popover ── */
-    --tags-input-suggestions-bg-default:        var(--a-canvas-bright);
-    --tags-input-suggestions-border-default:    var(--a-ui-border);
-    --tags-input-suggestions-radius-default:    var(--a-radius);
-    --tags-input-suggestions-shadow-default:    var(--a-shadow-lg);
-    --tags-input-suggestion-bg-focus-default:   var(--a-ui-bg-hover);
-    --tags-input-suggestion-fg-focus-default:   var(--a-ui-text-hover);
+    --tags-input-suggestions-bg:        var(--a-canvas-bright);
+    --tags-input-suggestions-border:    var(--a-ui-border);
+    --tags-input-suggestions-radius:    var(--a-radius);
+    --tags-input-suggestions-shadow:    var(--a-shadow-lg);
+    --tags-input-suggestion-bg-focus:   var(--a-ui-bg-hover);
+    --tags-input-suggestion-fg-focus:   var(--a-ui-text-hover);
 
     text-align: start;  /* §text-align-reset — block ancestor centering */
   }
@@ -44,35 +44,37 @@
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-    gap: var(--tags-input-gap, var(--tags-input-gap-default));
-    min-height: var(--tags-input-min-h, var(--tags-input-min-h-default));
-    padding: var(--tags-input-py, var(--tags-input-py-default))
-             var(--tags-input-px, var(--tags-input-px-default));
-    border: 1px solid var(--tags-input-border, var(--tags-input-border-default));
-    border-radius: var(--tags-input-radius, var(--tags-input-radius-default));
-    background: var(--tags-input-bg, var(--tags-input-bg-default));
-    color: var(--tags-input-fg, var(--tags-input-fg-default));
-    font-size: var(--tags-input-font-size, var(--tags-input-font-size-default));
+    gap: var(--tags-input-gap);
+    min-height: var(--tags-input-min-h);
+    /* font-family floor on the host — the inner input + tags inherit it. */
+    font-family: var(--tags-input-font-family, var(--a-font-family-ui));
+    padding: var(--tags-input-py)
+             var(--tags-input-px);
+    border: 1px solid var(--tags-input-border);
+    border-radius: var(--tags-input-radius);
+    background: var(--tags-input-bg);
+    color: var(--tags-input-fg);
+    font-size: var(--tags-input-font-size);
     cursor: text;
     transition:
-      background  var(--tags-input-duration, var(--tags-input-duration-default)) var(--tags-input-easing, var(--tags-input-easing-default)),
-      border-color var(--tags-input-duration, var(--tags-input-duration-default)) var(--tags-input-easing, var(--tags-input-easing-default)),
-      box-shadow  var(--tags-input-duration, var(--tags-input-duration-default)) var(--tags-input-easing, var(--tags-input-easing-default));
+      background  var(--tags-input-duration) var(--tags-input-easing),
+      border-color var(--tags-input-duration) var(--tags-input-easing),
+      box-shadow  var(--tags-input-duration) var(--tags-input-easing);
   }
 
   :scope:not([disabled]):hover {
-    background: var(--tags-input-bg-hover, var(--tags-input-bg-hover-default));
-    border-color: var(--tags-input-border-hover, var(--tags-input-border-hover-default));
+    background: var(--tags-input-bg-hover);
+    border-color: var(--tags-input-border-hover);
   }
 
   :scope:focus-within {
-    box-shadow: var(--tags-input-focus-ring, var(--tags-input-focus-ring-default));
+    box-shadow: var(--tags-input-focus-ring);
     border-color: transparent;
   }
 
   :scope[aria-invalid="true"]:focus-within,
   :scope[error]:focus-within {
-    box-shadow: var(--tags-input-focus-ring-invalid, var(--tags-input-focus-ring-invalid-default));
+    box-shadow: var(--tags-input-focus-ring-invalid);
   }
 
   :scope[disabled] {
@@ -91,7 +93,7 @@
   }
 
   :scope tag-ui[data-invalid] {
-    --tag-bg-default: var(--tags-input-chip-bg-invalid, var(--tags-input-chip-bg-invalid-default));
+    --tag-bg: var(--tags-input-chip-bg-invalid);
   }
 
   /* ── Inline input ── */
@@ -103,9 +105,9 @@
     align-items: center;
     outline: none;
     background: transparent;
-    color: var(--tags-input-fg, var(--tags-input-fg-default));
+    color: var(--tags-input-fg);
     font: inherit;
-    font-size: var(--tags-input-font-size, var(--tags-input-font-size-default));
+    font-size: var(--tags-input-font-size);
     line-height: 1.4;
     white-space: pre-wrap;
     overflow-wrap: anywhere;
@@ -120,7 +122,7 @@
      pattern input-ui + textarea-ui + combobox-ui use. */
   [data-inline-input][data-empty]::before {
     content: attr(data-placeholder);
-    color: var(--tags-input-placeholder-fg, var(--tags-input-placeholder-fg-default));
+    color: var(--tags-input-placeholder-fg);
     pointer-events: none;
     position: absolute;
     inset: 0;
@@ -141,14 +143,14 @@
 
   /* ── Sizing — leverages universal [size] attribute ── */
   :scope[size="sm"] {
-    --tags-input-font-size-default: var(--a-ui-sm);
-    --tags-input-min-h-default:     var(--a-size-sm);
-    --tags-input-gap-default:       calc(var(--a-space-1) / 1.25);
+    --tags-input-font-size: var(--a-ui-sm);
+    --tags-input-min-h:     var(--a-size-sm);
+    --tags-input-gap:       calc(var(--a-space-1) / 1.25);
   }
   :scope[size="lg"] {
-    --tags-input-font-size-default: var(--a-ui-lg);
-    --tags-input-min-h-default:     var(--a-size-lg);
-    --tags-input-gap-default:       var(--a-space-2);
+    --tags-input-font-size: var(--a-ui-lg);
+    --tags-input-min-h:     var(--a-size-lg);
+    --tags-input-gap:       var(--a-space-2);
   }
 }
 

package/components/text/text.css

@@ -1,27 +1,27 @@
 @scope (text-ui) {
   :where(:scope) {
     /* ── Tokens (body defaults) ── */
-    --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);
+    --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);
   }
 
   :scope {
     box-sizing: border-box;
     display: inline;
-    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));
+    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);
   }
 
   /* Reset native heading styles inside text-ui so the variant controls the look */
@@ -33,20 +33,20 @@
   }
 
   :scope[strong], :is(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));
+    --text-weight: var(--text-weight-strong);
+    --text-color: var(--text-color-strong);
   }
 
   /* ── Variants ── */
-  :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); }
+  :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); }
 
   /* §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-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); }
+  :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); }
 
   /* ── 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-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); }
+  :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); }
 
   /* color — default | subtle | strong | accent | danger | success | warning
      (no value = variant default; "default" is an explicit reset). */
-  :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); }
+  :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); }
 
   /* weight — regular | medium | semibold | 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); }
+  :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); }
 
   /* text-align — start | center | end | justify */
   :scope[text-align="start"]   { text-align: start; }

package/components/textarea/textarea.css

@@ -2,40 +2,41 @@
    doesn't match the scope root. Plain selector outside works. See
    docs/BROWSER-COMPAT.md §3a. */
 textarea-ui:not([disabled]) [slot="text"]:hover {
-  background: var(--textarea-bg-hover, var(--textarea-bg-hover-default));
-  border-color: var(--textarea-border-hover, var(--textarea-border-hover-default));
-  color: var(--textarea-fg-hover, var(--textarea-fg-hover-default));
+  background: var(--textarea-bg-hover);
+  border-color: var(--textarea-border-hover);
+  color: var(--textarea-fg-hover);
 }
 
 @scope (textarea-ui) {
   :where(:scope) {
     /* ── Tokens (wired to --a-ui-*) ── */
-    --textarea-bg-default:              var(--a-ui-bg);
-    --textarea-fg-default:              var(--a-ui-text);
-    --textarea-border-default:          var(--a-ui-border);
-    --textarea-border-hover-default:    var(--a-ui-border-hover);
-    --textarea-focus-ring-default:      var(--a-focus-ring);
-    --textarea-focus-ring-invalid-default: var(--a-focus-ring-invalid);
-    --textarea-radius-default:          var(--a-radius);
-    --textarea-min-height-default:      calc(var(--a-size) * 2);
-    --textarea-px-default:              var(--a-ui-px);
-    --textarea-py-default:              var(--a-ui-px);
-    --textarea-font-size-default:       var(--a-ui-size);
-    --textarea-label-size-default:      var(--a-label-size);
-    --textarea-label-fg-default:        var(--a-label-color);
-    --textarea-placeholder-fg-default:  var(--a-ui-text-placeholder);
-    --textarea-gap-default:             var(--a-space-1);
+    --textarea-bg:              var(--a-ui-bg);
+    --textarea-fg:              var(--a-ui-text);
+    --textarea-border:          var(--a-ui-border);
+    --textarea-border-hover:    var(--a-ui-border-hover);
+    --textarea-focus-ring:      var(--a-focus-ring);
+    --textarea-focus-ring-invalid: var(--a-focus-ring-invalid);
+    --textarea-radius:          var(--a-radius);
+    --textarea-min-height:      calc(var(--a-size) * 2);
+    --textarea-px:              var(--a-ui-px);
+    --textarea-py:              var(--a-ui-px);
+    --textarea-font-size:       var(--a-ui-size);
+    --textarea-font-family:     var(--a-font-family-ui);
+    --textarea-label-size:      var(--a-label-size);
+    --textarea-label-fg:        var(--a-label-color);
+    --textarea-placeholder-fg:  var(--a-ui-text-placeholder);
+    --textarea-gap:             var(--a-space-1);
 
     /* ── Transition ── */
-    --textarea-duration-default:        var(--a-duration-fast);
-    --textarea-easing-default:          var(--a-easing);
+    --textarea-duration:        var(--a-duration-fast);
+    --textarea-easing:          var(--a-easing);
 
     /* ── State ── */
-    --textarea-bg-hover-default:        var(--a-ui-bg-hover);
-    --textarea-fg-hover-default:        var(--a-ui-text-hover);
-    --textarea-label-fg-focus-default:  var(--a-fg-subtle);
-    --textarea-bg-disabled-default:     var(--a-ui-bg-disabled);
-    --textarea-fg-disabled-default:     var(--a-ui-text-disabled);
+    --textarea-bg-hover:        var(--a-ui-bg-hover);
+    --textarea-fg-hover:        var(--a-ui-text-hover);
+    --textarea-label-fg-focus:  var(--a-fg-subtle);
+    --textarea-bg-disabled:     var(--a-ui-bg-disabled);
+    --textarea-fg-disabled:     var(--a-ui-text-disabled);
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
 }
 
@@ -44,7 +45,7 @@ textarea-ui:not([disabled]) [slot="text"]:hover {
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    gap: var(--textarea-gap, var(--textarea-gap-default));
+    gap: var(--textarea-gap);
   }
 
   :scope[data-direction="row"] {
@@ -54,8 +55,8 @@ textarea-ui:not([disabled]) [slot="text"]:hover {
   }
 
   [slot="label"] {
-    font-size: var(--textarea-label-size, var(--textarea-label-size-default));
-    color: var(--textarea-label-fg, var(--textarea-label-fg-default));
+    font-size: var(--textarea-label-size);
+    color: var(--textarea-label-fg);
   }
   [slot="label"][label]::after { content: attr(label); }
 
@@ -64,14 +65,16 @@ textarea-ui:not([disabled]) [slot="text"]:hover {
        which is absolutely positioned (out of inline flow) so the caret
        renders at content-start instead of after the placeholder text. */
     position: relative;
-    min-height: var(--textarea-min-height, var(--textarea-min-height-default));
-    padding: var(--textarea-py, var(--textarea-py-default)) var(--textarea-px, var(--textarea-px-default));
-    border: 1px solid var(--textarea-border, var(--textarea-border-default));
-    border-radius: var(--textarea-radius, var(--textarea-radius-default));
-    background: var(--textarea-bg, var(--textarea-bg-default));
-    color: var(--textarea-fg, var(--textarea-fg-default));
+    min-height: var(--textarea-min-height);
+    padding: var(--textarea-py) var(--textarea-px);
+    border: 1px solid var(--textarea-border);
+    border-radius: var(--textarea-radius);
+    background: var(--textarea-bg);
+    color: var(--textarea-fg);
     font: inherit;
-    font-size: var(--textarea-font-size, var(--textarea-font-size-default));
+    /* font-family floor — see segment.css rationale. */
+    font-family: var(--textarea-font-family);
+    font-size: var(--textarea-font-size);
     line-height: 1.5;
     white-space: pre-wrap;
     word-break: break-word;
@@ -79,10 +82,10 @@ textarea-ui:not([disabled]) [slot="text"]:hover {
     cursor: text;
     outline: none;
     transition:
-      background   var(--textarea-duration, var(--textarea-duration-default)) var(--textarea-easing, var(--textarea-easing-default)),
-      border-color var(--textarea-duration, var(--textarea-duration-default)) var(--textarea-easing, var(--textarea-easing-default)),
-      color        var(--textarea-duration, var(--textarea-duration-default)) var(--textarea-easing, var(--textarea-easing-default)),
-      box-shadow   var(--textarea-duration, var(--textarea-duration-default)) var(--textarea-easing, var(--textarea-easing-default));
+      background   var(--textarea-duration) var(--textarea-easing),
+      border-color var(--textarea-duration) var(--textarea-easing),
+      color        var(--textarea-duration) var(--textarea-easing),
+      box-shadow   var(--textarea-duration) var(--textarea-easing);
   }
   /* hover rule moved outside @scope — see Safari 17.x bug note at top. */
   :scope:not([disabled]) [slot="text"]:focus {
@@ -91,16 +94,16 @@ textarea-ui:not([disabled]) [slot="text"]:hover {
        in the contenteditable [slot="text"] span; :focus-visible on
        the host wouldn't match the actual input surface. */
     outline: none;
-    box-shadow: var(--textarea-focus-ring, var(--textarea-focus-ring-default));
-    color: var(--textarea-fg-hover, var(--textarea-fg-hover-default));
+    box-shadow: var(--textarea-focus-ring);
+    color: var(--textarea-fg-hover);
   }
   :scope[aria-invalid="true"]:not([disabled]) [slot="text"]:focus,
   :scope[error]:not([disabled]) [slot="text"]:focus {
-    box-shadow: var(--textarea-focus-ring-invalid, var(--textarea-focus-ring-invalid-default));
+    box-shadow: var(--textarea-focus-ring-invalid);
   }
   :scope:not([disabled]) [slot="text"]:focus + [slot="label"],
   :scope:not([disabled]):focus-within [slot="label"] {
-    color: var(--textarea-label-fg-focus, var(--textarea-label-fg-focus-default));
+    color: var(--textarea-label-fg-focus);
   }
 
   /* Placeholder — see input.css companion comment. Out-of-flow positioning
@@ -108,7 +111,7 @@ textarea-ui:not([disabled]) [slot="text"]:hover {
      right of the placeholder text after type-then-delete. */
   [slot="text"][data-empty]::before {
     content: attr(data-placeholder);
-    color: var(--textarea-placeholder-fg, var(--textarea-placeholder-fg-default));
+    color: var(--textarea-placeholder-fg);
     pointer-events: none;
     position: absolute;
     inset: 0;
@@ -117,8 +120,8 @@ textarea-ui:not([disabled]) [slot="text"]:hover {
 
   /* Disabled */
   :scope[disabled] [slot="text"] {
-    background: var(--textarea-bg-disabled, var(--textarea-bg-disabled-default));
-    color: var(--textarea-fg-disabled, var(--textarea-fg-disabled-default));
+    background: var(--textarea-bg-disabled);
+    color: var(--textarea-fg-disabled);
     cursor: not-allowed;
   }
 }