@adia-ai/web-components 0.7.3 → 0.7.4

package/components/alert/alert.css

@@ -1,26 +1,26 @@
 @scope (alert-ui) {
   :where(:scope) {
     /* ── Colors ── */
-    --alert-bg-default:       var(--a-bg-muted);
-    --alert-fg-default:       var(--a-fg);
-    --alert-border-default:   var(--a-border-subtle);
-    --alert-icon-fg-default:  var(--a-fg-muted);
+    --alert-bg:       var(--a-bg-muted);
+    --alert-fg:       var(--a-fg);
+    --alert-border:   var(--a-border-subtle);
+    --alert-icon-fg:  var(--a-fg-muted);
 
     /* ── Layout ── */
-    --alert-radius-default:   var(--a-radius-md);
-    --alert-px-default:       var(--a-space-3);
-    --alert-py-default:       var(--a-space-2);
-    --alert-gap-default:      var(--a-space-2);
+    --alert-radius:   var(--a-radius-md);
+    --alert-px:       var(--a-space-3);
+    --alert-py:       var(--a-space-2);
+    --alert-gap:      var(--a-space-2);
 
     /* ── Typography ── */
-    --alert-font-default:        var(--a-ui-size);
-    --alert-line-height-default: var(--a-ui-line-height, 1.5);
+    --alert-font:        var(--a-ui-size);
+    --alert-line-height: var(--a-ui-line-height, 1.5);
 
     /* ── SPEC-006 dunning pattern tokens ── */
-    --alert-amount-font-default: var(--a-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
-    --alert-meta-fg-default:     var(--a-fg-muted);
-    --alert-actions-gap-default: var(--a-space-2);
-    --alert-actions-mt-default:  var(--a-space-2);
+    --alert-amount-font: var(--a-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+    --alert-meta-fg:     var(--a-fg-muted);
+    --alert-actions-gap: var(--a-space-2);
+    --alert-actions-mt:  var(--a-space-2);
   }
 
   :scope {
@@ -32,43 +32,43 @@
        text on multi-line alerts. The leading slot's own height = body
        line-height (below) means the icon optically centers on line 1. */
     align-items: start;
-    gap: var(--alert-gap, var(--alert-gap-default));
-    padding: var(--alert-py, var(--alert-py-default)) var(--alert-px, var(--alert-px-default));
-    border: 1px solid var(--alert-border, var(--alert-border-default));
-    border-radius: var(--alert-radius, var(--alert-radius-default));
-    font-size: var(--alert-font, var(--alert-font-default));
-    line-height: var(--alert-line-height, var(--alert-line-height-default));
-    color: var(--alert-fg, var(--alert-fg-default));
-    background: var(--alert-bg, var(--alert-bg-default));
+    gap: var(--alert-gap);
+    padding: var(--alert-py) var(--alert-px);
+    border: 1px solid var(--alert-border);
+    border-radius: var(--alert-radius);
+    font-size: var(--alert-font);
+    line-height: var(--alert-line-height);
+    color: var(--alert-fg);
+    background: var(--alert-bg);
   }
 
   /* ── Variants ── */
   :scope[variant="info"] {
-    --alert-bg-default:      var(--a-info-muted);
-    --alert-fg-default:      var(--a-info-text);
-    --alert-border-default:  var(--a-info-border-subtle);
-    --alert-icon-fg-default: var(--a-info-strong);
+    --alert-bg:      var(--a-info-muted);
+    --alert-fg:      var(--a-info-text);
+    --alert-border:  var(--a-info-border-subtle);
+    --alert-icon-fg: var(--a-info-strong);
   }
 
   :scope[variant="success"] {
-    --alert-bg-default:      var(--a-success-muted);
-    --alert-fg-default:      var(--a-success-text);
-    --alert-border-default:  var(--a-success-border-subtle);
-    --alert-icon-fg-default: var(--a-success-strong);
+    --alert-bg:      var(--a-success-muted);
+    --alert-fg:      var(--a-success-text);
+    --alert-border:  var(--a-success-border-subtle);
+    --alert-icon-fg: var(--a-success-strong);
   }
 
   :scope[variant="warning"] {
-    --alert-bg-default:      var(--a-warning-muted);
-    --alert-fg-default:      var(--a-warning-text);
-    --alert-border-default:  var(--a-warning-border-subtle);
-    --alert-icon-fg-default: var(--a-warning-strong);
+    --alert-bg:      var(--a-warning-muted);
+    --alert-fg:      var(--a-warning-text);
+    --alert-border:  var(--a-warning-border-subtle);
+    --alert-icon-fg: var(--a-warning-strong);
   }
 
   :scope[variant="danger"] {
-    --alert-bg-default:      var(--a-danger-muted);
-    --alert-fg-default:      var(--a-danger-text);
-    --alert-border-default:  var(--a-danger-border-subtle);
-    --alert-icon-fg-default: var(--a-danger-strong);
+    --alert-bg:      var(--a-danger-muted);
+    --alert-fg:      var(--a-danger-text);
+    --alert-border:  var(--a-danger-border-subtle);
+    --alert-icon-fg: var(--a-danger-strong);
   }
 
   /* `muted` and `neutral` are semantic aliases of the base — same tokens
@@ -78,21 +78,21 @@
      than carrying tonal weight. */
   :scope[variant="muted"],
   :scope[variant="neutral"] {
-    --alert-bg-default:      var(--a-bg-muted);
-    --alert-fg-default:      var(--a-fg);
-    --alert-border-default:  var(--a-border-subtle);
-    --alert-icon-fg-default: var(--a-fg-muted);
+    --alert-bg:      var(--a-bg-muted);
+    --alert-fg:      var(--a-fg);
+    --alert-border:  var(--a-border-subtle);
+    --alert-icon-fg: var(--a-fg-muted);
   }
 
   /* ── Slots ── */
   :scope [slot="leading"] {
     flex-shrink: 0;
-    color: var(--alert-icon-fg, var(--alert-icon-fg-default));
+    color: var(--alert-icon-fg);
     /* Box height = one line of body so the icon optical-centers on the
        first line under `align-items: start`. */
     display: inline-flex;
     align-items: center;
-    min-height: calc(var(--alert-font, var(--alert-font-default)) * var(--alert-line-height, var(--alert-line-height-default)));
+    min-height: calc(var(--alert-font) * var(--alert-line-height));
     /* `ensure()` appends the leading-slot icon to the host, which
        puts it after any consumer-provided content in DOM order.
        Force it to the visual lead via flex `order` so the icon
@@ -135,9 +135,9 @@
        button is the right-most affordance. content's flex:1 pushes both
        action + close to the trailing edge. */
     order: 2;
-    min-height: calc(var(--alert-font, var(--alert-font-default)) * var(--alert-line-height, var(--alert-line-height-default)));
-    --button-fg-ghost: var(--alert-fg, var(--alert-fg-default));
-    --button-fg-ghost-hover: var(--alert-icon-fg, var(--alert-icon-fg-default));
+    min-height: calc(var(--alert-font) * var(--alert-line-height));
+    --button-fg-ghost: var(--alert-fg);
+    --button-fg-ghost-hover: var(--alert-icon-fg);
   }
 
   /* ──────────────────────────────────────────────────────────────
@@ -156,7 +156,7 @@
 
   :scope[pattern="dunning"] {
     flex-wrap: wrap;
-    row-gap: var(--alert-actions-mt, var(--alert-actions-mt-default));
+    row-gap: var(--alert-actions-mt);
     /* Use align-items: flex-start so the leading icon hugs the top
        of the message regardless of how tall the content + actions
        column grows. */
@@ -173,7 +173,7 @@
   :scope[pattern="dunning"] [slot="close"]     { order: 40; }
 
   :scope[pattern="dunning"] [data-dunning-amount] {
-    font-family: var(--alert-amount-font, var(--alert-amount-font-default));
+    font-family: var(--alert-amount-font);
     font-variant-numeric: tabular-nums;
     font-weight: 600;
     /* Inherit color from the variant; tabular-nums + monospace make
@@ -181,8 +181,8 @@
   }
 
   :scope[pattern="dunning"] [data-dunning-meta] {
-    color: var(--alert-meta-fg, var(--alert-meta-fg-default));
-    font-size: calc(var(--alert-font, var(--alert-font-default)) * 0.9375);
+    color: var(--alert-meta-fg);
+    font-size: calc(var(--alert-font) * 0.9375);
   }
 
   :scope[pattern="dunning"] [data-dunning-title] {
@@ -200,8 +200,8 @@
     flex-basis: 100%;
     display: flex;
     flex-wrap: wrap;
-    gap: var(--alert-actions-gap, var(--alert-actions-gap-default));
-    padding-inline-start: calc(var(--alert-font, var(--alert-font-default)) + var(--alert-gap, var(--alert-gap-default)));
+    gap: var(--alert-actions-gap);
+    padding-inline-start: calc(var(--alert-font) + var(--alert-gap));
   }
 
   /* Lenient — when a bare button-ui carries data-dunning-action but

package/components/avatar/avatar.css

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

package/components/badge/badge.css

@@ -1,13 +1,14 @@
 @scope (badge-ui) {
   :where(:scope) {
     /* ── Tokens ── */
-    --badge-bg-default:        var(--a-bg-muted);
-    --badge-fg-default:        var(--a-fg);
-    --badge-radius-default:    var(--a-radius-md);
-    --badge-px-default:        var(--a-space-2);
-    --badge-py-default:        2px;
-    --badge-gap-default:       var(--a-space-1);
-    --badge-font-size-default: var(--a-ui-sm);
+    --badge-bg:        var(--a-bg-muted);
+    --badge-fg:        var(--a-fg);
+    --badge-radius:    var(--a-radius-md);
+    --badge-px:        var(--a-space-2);
+    --badge-py:        2px;
+    --badge-gap:       var(--a-space-1);
+    --badge-font-size: var(--a-ui-sm);
+    --badge-font-family: var(--a-font-family-ui);
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
 }
 
@@ -17,16 +18,18 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: var(--badge-gap, var(--badge-gap-default));
+    gap: var(--badge-gap);
     width: fit-content;
-    padding: var(--badge-py, var(--badge-py-default)) var(--badge-px, var(--badge-px-default));
-    background: var(--badge-bg, var(--badge-bg-default));
-    color: var(--badge-fg, var(--badge-fg-default));
+    padding: var(--badge-py) var(--badge-px);
+    background: var(--badge-bg);
+    color: var(--badge-fg);
     font: inherit;
-    font-size: var(--badge-font-size, var(--badge-font-size-default));
+    /* font-family floor — see segment.css rationale. */
+    font-family: var(--badge-font-family);
+    font-size: var(--badge-font-size);
     font-weight: 500;
     line-height: 1;
-    border-radius: var(--badge-radius, var(--badge-radius-default));
+    border-radius: var(--badge-radius);
     white-space: nowrap;
     vertical-align: middle;
   }
@@ -56,28 +59,28 @@
      collapse contrast on muted: warning fails in dark, danger fails in light.
      Accent keeps the saturated-text-on-tint look (intentional brand emphasis). */
   :scope[variant="accent"] {
-    --badge-bg-default: var(--a-accent-muted);
-    --badge-fg-default: var(--a-accent-text);
+    --badge-bg: var(--a-accent-muted);
+    --badge-fg: var(--a-accent-text);
   }
 
   :scope[variant="info"] {
-    --badge-bg-default: var(--a-info-muted);
-    --badge-fg-default: var(--a-info-text);
+    --badge-bg: var(--a-info-muted);
+    --badge-fg: var(--a-info-text);
   }
 
   :scope[variant="success"] {
-    --badge-bg-default: var(--a-success-muted);
-    --badge-fg-default: var(--a-success-text);
+    --badge-bg: var(--a-success-muted);
+    --badge-fg: var(--a-success-text);
   }
 
   :scope[variant="warning"] {
-    --badge-bg-default: var(--a-warning-muted);
-    --badge-fg-default: var(--a-warning-text);
+    --badge-bg: var(--a-warning-muted);
+    --badge-fg: var(--a-warning-text);
   }
 
   :scope[variant="danger"] {
-    --badge-bg-default: var(--a-danger-muted);
-    --badge-fg-default: var(--a-danger-text);
+    --badge-bg: var(--a-danger-muted);
+    --badge-fg: var(--a-danger-text);
   }
 
   /* `primary` is the accent-filled variant — solid bg + on-accent text,
@@ -86,8 +89,8 @@
      matrix so it tracks the same accent-strong source as button-ui's
      primary variant. */
   :scope[variant="primary"] {
-    --badge-bg-default: var(--a-primary-bg);
-    --badge-fg-default: var(--a-primary-fg);
+    --badge-bg: var(--a-primary-bg);
+    --badge-fg: var(--a-primary-fg);
   }
 
   /* `muted` and `neutral` are semantic aliases of the base — same tokens
@@ -96,8 +99,8 @@
      "Not set" states) where the badge should read as quiet chrome. */
   :scope[variant="muted"],
   :scope[variant="neutral"] {
-    --badge-bg-default: var(--a-bg-muted);
-    --badge-fg-default: var(--a-fg);
+    --badge-bg: var(--a-bg-muted);
+    --badge-fg: var(--a-fg);
   }
 
   /* ── Tone modifier — orthogonal to [variant] ──
@@ -112,62 +115,62 @@
      to muddy brown-on-brown (-text-strong is dark, -bg is mid-tone).
      See <tag-ui>'s identical workaround. Token-system follow-up planned. */
   :scope[tone="solid"][variant="info"] {
-    --badge-bg-default: var(--a-info-bg);
-    --badge-fg-default: var(--a-info-fg);
+    --badge-bg: var(--a-info-bg);
+    --badge-fg: var(--a-info-fg);
   }
   :scope[tone="solid"][variant="success"] {
-    --badge-bg-default: var(--a-success-bg);
-    --badge-fg-default: var(--a-success-fg);
+    --badge-bg: var(--a-success-bg);
+    --badge-fg: var(--a-success-fg);
   }
   :scope[tone="solid"][variant="warning"] {
     /* --a-warning-bg is the bright-amber step (semantics.css L3 redirect
        to -20-tint) — see also <tag-ui>'s warning solid pair. */
-    --badge-bg-default: var(--a-warning-bg);
-    --badge-fg-default: var(--a-warning-fg);
+    --badge-bg: var(--a-warning-bg);
+    --badge-fg: var(--a-warning-fg);
   }
   :scope[tone="solid"][variant="danger"] {
-    --badge-bg-default: var(--a-danger-bg);
-    --badge-fg-default: var(--a-danger-fg);
+    --badge-bg: var(--a-danger-bg);
+    --badge-fg: var(--a-danger-fg);
   }
   :scope[tone="solid"][variant="accent"] {
-    --badge-bg-default: var(--a-accent-bg);
-    --badge-fg-default: var(--a-accent-fg);
+    --badge-bg: var(--a-accent-bg);
+    --badge-fg: var(--a-accent-fg);
   }
   /* Solid on neutral default → high-contrast inverse stamp. */
   :scope[tone="solid"]:not([variant="info"]):not([variant="success"]):not([variant="warning"]):not([variant="danger"]):not([variant="accent"]):not([variant="primary"]) {
-    --badge-bg-default: var(--a-fg);
-    --badge-fg-default: var(--a-bg);
+    --badge-bg: var(--a-fg);
+    --badge-fg: var(--a-bg);
   }
 
   /* ── `[tone="outline"]` — transparent bg + family-colored border + text ── */
   :scope[tone="outline"] {
-    --badge-bg-default: transparent;
-    border: 1px solid var(--badge-border, var(--badge-border-default, transparent));
+    --badge-bg: transparent;
+    border: 1px solid var(--badge-border, transparent);
   }
   :scope[tone="outline"][variant="info"] {
-    --badge-fg-default:     var(--a-info-text);
-    --badge-border-default: var(--a-info-border);
+    --badge-fg:     var(--a-info-text);
+    --badge-border: var(--a-info-border);
   }
   :scope[tone="outline"][variant="success"] {
-    --badge-fg-default:     var(--a-success-text);
-    --badge-border-default: var(--a-success-border);
+    --badge-fg:     var(--a-success-text);
+    --badge-border: var(--a-success-border);
   }
   :scope[tone="outline"][variant="warning"] {
-    --badge-fg-default:     var(--a-warning-text);
-    --badge-border-default: var(--a-warning-border);
+    --badge-fg:     var(--a-warning-text);
+    --badge-border: var(--a-warning-border);
   }
   :scope[tone="outline"][variant="danger"] {
-    --badge-fg-default:     var(--a-danger-text);
-    --badge-border-default: var(--a-danger-border);
+    --badge-fg:     var(--a-danger-text);
+    --badge-border: var(--a-danger-border);
   }
   :scope[tone="outline"][variant="accent"] {
-    --badge-fg-default:     var(--a-accent-text);
-    --badge-border-default: var(--a-accent-border);
+    --badge-fg:     var(--a-accent-text);
+    --badge-border: var(--a-accent-border);
   }
   /* Outline on neutral — fg-muted text + subtle ring. */
   :scope[tone="outline"]:not([variant="info"]):not([variant="success"]):not([variant="warning"]):not([variant="danger"]):not([variant="accent"]):not([variant="primary"]) {
-    --badge-fg-default:     var(--a-fg-muted);
-    --badge-border-default: var(--a-border);
+    --badge-fg:     var(--a-fg-muted);
+    --badge-border: var(--a-border);
   }
 
   /* Size handled by universal [size] attribute system. */

package/components/block/block.css

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

package/components/blockquote/blockquote.css

@@ -5,25 +5,25 @@
 @scope (blockquote-ui) {
   :where(:scope) {
     /* ── Tokens ── */
-    --blockquote-rule-color-default:  var(--a-border-strong);
-    --blockquote-rule-width-default:  2px;
-    --blockquote-pad-inline-default:  var(--a-space-3);
-    --blockquote-pad-block-default:   var(--a-space-2);
-    --blockquote-fg-default:          var(--a-fg-subtle);
-    --blockquote-cite-fg-default:     var(--a-fg-muted);
-    --blockquote-cite-size-default:   var(--a-ui-sm);
-    --blockquote-cite-mt-default:     var(--a-space-2);
+    --blockquote-rule-color:  var(--a-border-strong);
+    --blockquote-rule-width:  2px;
+    --blockquote-pad-inline:  var(--a-space-3);
+    --blockquote-pad-block:   var(--a-space-2);
+    --blockquote-fg:          var(--a-fg-subtle);
+    --blockquote-cite-fg:     var(--a-fg-muted);
+    --blockquote-cite-size:   var(--a-ui-sm);
+    --blockquote-cite-mt:     var(--a-space-2);
   }
 
   :scope {
     box-sizing: border-box;
     display: block;
-    padding-inline-start: var(--blockquote-pad-inline, var(--blockquote-pad-inline-default));
-    padding-block: var(--blockquote-pad-block, var(--blockquote-pad-block-default));
-    border-inline-start: var(--blockquote-rule-width, var(--blockquote-rule-width-default))
+    padding-inline-start: var(--blockquote-pad-inline);
+    padding-block: var(--blockquote-pad-block);
+    border-inline-start: var(--blockquote-rule-width)
                         solid
-                        var(--blockquote-rule-color, var(--blockquote-rule-color-default));
-    color: var(--blockquote-fg, var(--blockquote-fg-default));
+                        var(--blockquote-rule-color);
+    color: var(--blockquote-fg);
     font-style: italic;
     /* Reset native margin if a consumer wraps in a native <blockquote>
        (not recommended — see yaml a2ui rule #3) so nesting renders
@@ -34,10 +34,10 @@
   /* Cite line — em-dash prefix + small + muted + non-italic */
   [slot="cite"] {
     display: block;
-    margin-top: var(--blockquote-cite-mt, var(--blockquote-cite-mt-default));
+    margin-top: var(--blockquote-cite-mt);
     font-style: normal;
-    font-size: var(--blockquote-cite-size, var(--blockquote-cite-size-default));
-    color: var(--blockquote-cite-fg, var(--blockquote-cite-fg-default));
+    font-size: var(--blockquote-cite-size);
+    color: var(--blockquote-cite-fg);
   }
 
   [slot="cite"]::before {