@adia-ai/web-components 0.7.3 → 0.7.4

package/components/rating/rating.css

@@ -2,26 +2,26 @@
    root. Plain selector outside the @scope works. See
    docs/BROWSER-COMPAT.md §3a. */
 rating-ui:hover [data-rating-symbol] {
-  color: var(--rating-fg-hover, var(--rating-fg-hover-default));
+  color: var(--rating-fg-hover);
 }
 
 @scope (rating-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --rating-gap-default:              var(--a-space-1);
-    --rating-symbol-size-default:      var(--a-space-5);
+    --rating-gap:              var(--a-space-1);
+    --rating-symbol-size:      var(--a-space-5);
 
     /* ── Colors ── */
-    --rating-fg-empty-default:         var(--a-fg-muted);
-    --rating-fg-filled-default:        var(--a-fg-strong);
-    --rating-fg-hover-default:         var(--a-fg-strong);
+    --rating-fg-empty:         var(--a-fg-muted);
+    --rating-fg-filled:        var(--a-fg-strong);
+    --rating-fg-hover:         var(--a-fg-strong);
 
     /* ── Interaction ── */
-    --rating-duration-default:         var(--a-duration-fast);
-    --rating-easing-default:           var(--a-easing);
-    --rating-focus-ring-default:       0 0 0 2px var(--a-focus-ring);
-    --rating-focus-offset-default:     var(--a-space-1);
-    --rating-focus-radius-default:     var(--a-radius-sm);
+    --rating-duration:         var(--a-duration-fast);
+    --rating-easing:           var(--a-easing);
+    --rating-focus-ring:       0 0 0 2px var(--a-focus-ring);
+    --rating-focus-offset:     var(--a-space-1);
+    --rating-focus-radius:     var(--a-radius-sm);
   }
 
   :scope {
@@ -29,7 +29,7 @@ rating-ui:hover [data-rating-symbol] {
     box-sizing: border-box;
     display: inline-flex;
     align-items: center;
-    gap: var(--rating-gap, var(--rating-gap-default));
+    gap: var(--rating-gap);
     cursor: pointer;
     user-select: none;
     line-height: 1;
@@ -46,30 +46,30 @@ rating-ui:hover [data-rating-symbol] {
 
   :scope:focus-visible {
     outline: none;
-    border-radius: var(--rating-focus-radius, var(--rating-focus-radius-default));
-    box-shadow: var(--rating-focus-ring, var(--rating-focus-ring-default));
-    outline-offset: var(--rating-focus-offset, var(--rating-focus-offset-default));
+    border-radius: var(--rating-focus-radius);
+    box-shadow: var(--rating-focus-ring);
+    outline-offset: var(--rating-focus-offset);
   }
 
   [data-rating-symbol] {
     position: relative;
     display: inline-block;
-    width:  var(--rating-symbol-size, var(--rating-symbol-size-default));
-    height: var(--rating-symbol-size, var(--rating-symbol-size-default));
-    color: var(--rating-fg-empty, var(--rating-fg-empty-default));
-    transition: color var(--rating-duration, var(--rating-duration-default)) var(--rating-easing, var(--rating-easing-default));
+    width:  var(--rating-symbol-size);
+    height: var(--rating-symbol-size);
+    color: var(--rating-fg-empty);
+    transition: color var(--rating-duration) var(--rating-easing);
   }
 
   [data-rating-symbol] icon-ui {
-    --a-icon-size: var(--rating-symbol-size, var(--rating-symbol-size-default));
+    --a-icon-size: var(--rating-symbol-size);
     position: absolute;
     inset: 0;
   }
 
   [data-rating-symbol-fg] {
-    color: var(--rating-fg-filled, var(--rating-fg-filled-default));
+    color: var(--rating-fg-filled);
     clip-path: inset(0 100% 0 0);
-    transition: clip-path var(--rating-duration, var(--rating-duration-default)) var(--rating-easing, var(--rating-easing-default));
+    transition: clip-path var(--rating-duration) var(--rating-easing);
   }
 
   [data-rating-symbol][data-fill="half"] [data-rating-symbol-fg] {
@@ -81,15 +81,15 @@ rating-ui:hover [data-rating-symbol] {
 
   /* ── Variants override TOKENS only ── */
   :scope[variant="accent"] {
-    --rating-fg-filled-default: var(--a-accent-bg);
-    --rating-fg-hover-default:  var(--a-accent-bg);
+    --rating-fg-filled: var(--a-accent-bg);
+    --rating-fg-hover:  var(--a-accent-bg);
   }
   :scope[variant="warning"] {
-    --rating-fg-filled-default: var(--a-warning-bg);
-    --rating-fg-hover-default:  var(--a-warning-bg);
+    --rating-fg-filled: var(--a-warning-bg);
+    --rating-fg-hover:  var(--a-warning-bg);
   }
 
   /* ── Size ── */
-  :scope[size="sm"] { --rating-symbol-size-default: var(--a-space-4); }
-  :scope[size="lg"] { --rating-symbol-size-default: var(--a-space-7); }
+  :scope[size="sm"] { --rating-symbol-size: var(--a-space-4); }
+  :scope[size="lg"] { --rating-symbol-size: var(--a-space-7); }
 }

package/components/relative-time/relative-time.css

@@ -4,9 +4,9 @@
 
 @scope (relative-time-ui) {
   :where(:scope) {
-    --relative-time-fg-default: var(--a-fg-muted);
-    --relative-time-font-default: inherit;
-    --relative-time-size-default: inherit;
+    --relative-time-fg: var(--a-fg-muted);
+    --relative-time-font: inherit;
+    --relative-time-size: inherit;
   }
 
   :scope {
@@ -14,9 +14,9 @@
        Overridable via the standard size-attr CSS or by setting display
        directly. */
     display: inline;
-    color: var(--relative-time-fg, var(--relative-time-fg-default));
-    font-family: var(--relative-time-font, var(--relative-time-font-default));
-    font-size: var(--relative-time-size, var(--relative-time-size-default));
+    color: var(--relative-time-fg);
+    font-family: var(--relative-time-font);
+    font-size: var(--relative-time-size);
     font-variant-numeric: tabular-nums;
   }
 }

package/components/richtext/richtext.css

@@ -6,76 +6,76 @@
   :where(:scope) {
     /* ── Layout ── */
     /* Optimal reading measure; not on spatial scale (45rem ≈ 720px at 1rem=16px). */
-    --richtext-max-width-default:      45rem;
-    --richtext-px-default:             var(--a-space-6);
-    --richtext-py-default:             var(--a-space-8);
+    --richtext-max-width:      45rem;
+    --richtext-px:             var(--a-space-6);
+    --richtext-py:             var(--a-space-8);
 
     /* ── Colors ── */
-    --richtext-bg-default:             var(--a-canvas-0);
-    --richtext-fg-default:             var(--a-fg);
-    --richtext-fg-muted-default:       var(--a-fg-muted);
-    --richtext-fg-subtle-default:      var(--a-fg-subtle);
-    --richtext-code-bg-default:        var(--a-canvas-2);
-    --richtext-border-default:         var(--a-border-subtle);
-    --richtext-link-default:           var(--a-accent-bg);
-    --richtext-link-hover-default:     var(--a-accent);
+    --richtext-bg:             var(--a-canvas-0);
+    --richtext-fg:             var(--a-fg);
+    --richtext-fg-muted:       var(--a-fg-muted);
+    --richtext-fg-subtle:      var(--a-fg-subtle);
+    --richtext-code-bg:        var(--a-canvas-2);
+    --richtext-border:         var(--a-border-subtle);
+    --richtext-link:           var(--a-accent-bg);
+    --richtext-link-hover:     var(--a-accent);
 
     /* ── Typography ── */
-    --richtext-font-default:           var(--a-font-family);
-    --richtext-font-code-default:      var(--a-font-family-code);
-    --richtext-body-size-default:      var(--a-body-size);
-    --richtext-body-leading-default:   var(--a-body-leading);
-    --richtext-code-size-default:      var(--a-ui-sm);
+    --richtext-font:           var(--a-font-family);
+    --richtext-font-code:      var(--a-font-family-code);
+    --richtext-body-size:      var(--a-body-size);
+    --richtext-body-leading:   var(--a-body-leading);
+    --richtext-code-size:      var(--a-ui-sm);
 
     /* ── Heading typography ── */
-    --richtext-h1-size-default:        var(--a-heading-size);
-    --richtext-h1-weight-default:      var(--a-weight-bold);
-    --richtext-h1-leading-default:     var(--a-heading-leading);
-    --richtext-h2-size-default:        var(--a-section-size);
-    --richtext-h2-weight-default:      var(--a-section-weight);
-    --richtext-h2-leading-default:     var(--a-section-leading);
-    --richtext-h3-size-default:        var(--a-subsection-size);
-    --richtext-h3-weight-default:      var(--a-subsection-weight);
-    --richtext-h4-weight-default:      var(--a-weight-semibold);
+    --richtext-h1-size:        var(--a-heading-size);
+    --richtext-h1-weight:      var(--a-weight-bold);
+    --richtext-h1-leading:     var(--a-heading-leading);
+    --richtext-h2-size:        var(--a-section-size);
+    --richtext-h2-weight:      var(--a-section-weight);
+    --richtext-h2-leading:     var(--a-section-leading);
+    --richtext-h3-size:        var(--a-subsection-size);
+    --richtext-h3-weight:      var(--a-subsection-weight);
+    --richtext-h4-weight:      var(--a-weight-semibold);
 
     /* ── Heading rhythm ── */
-    --richtext-h1-margin-bottom-default: var(--a-space-2);
-    --richtext-h2-margin-top-default:    var(--a-space-8);
-    --richtext-h2-margin-bottom-default: var(--a-space-3);
-    --richtext-h2-pad-bottom-default:    var(--a-space-2);
-    --richtext-h3-margin-top-default:    var(--a-space-6);
-    --richtext-h3-margin-bottom-default: var(--a-space-2);
-    --richtext-h4-margin-top-default:    var(--a-space-4);
-    --richtext-h4-margin-bottom-default: var(--a-space-1);
+    --richtext-h1-margin-bottom: var(--a-space-2);
+    --richtext-h2-margin-top:    var(--a-space-8);
+    --richtext-h2-margin-bottom: var(--a-space-3);
+    --richtext-h2-pad-bottom:    var(--a-space-2);
+    --richtext-h3-margin-top:    var(--a-space-6);
+    --richtext-h3-margin-bottom: var(--a-space-2);
+    --richtext-h4-margin-top:    var(--a-space-4);
+    --richtext-h4-margin-bottom: var(--a-space-1);
 
     /* ── Block rhythm ── */
-    --richtext-p-margin-bottom-default:  var(--a-space-3);
-    --richtext-block-my-default:         var(--a-space-3);
+    --richtext-p-margin-bottom:  var(--a-space-3);
+    --richtext-block-my:         var(--a-space-3);
 
     /* ── Inline code ── */
-    --richtext-code-radius-default:      var(--a-radius-sm);
+    --richtext-code-radius:      var(--a-radius-sm);
 
     /* ── Code block ── */
-    --richtext-pre-radius-default:       var(--a-radius-md);
-    --richtext-pre-inset-default:        var(--a-space-3);
-    --richtext-pre-my-default:           var(--a-space-3);
+    --richtext-pre-radius:       var(--a-radius-md);
+    --richtext-pre-inset:        var(--a-space-3);
+    --richtext-pre-my:           var(--a-space-3);
 
     /* ── Lists ── */
-    --richtext-list-my-default:          var(--a-space-2);
-    --richtext-list-indent-default:      var(--a-space-6);
-    --richtext-li-margin-bottom-default: var(--a-space-1);
+    --richtext-list-my:          var(--a-space-2);
+    --richtext-list-indent:      var(--a-space-6);
+    --richtext-li-margin-bottom: var(--a-space-1);
 
     /* ── Tables ── */
-    --richtext-table-my-default:         var(--a-space-3);
-    --richtext-th-py-default:            var(--a-space-2);
-    --richtext-th-px-default:            var(--a-space-3);
-    --richtext-th-weight-default:        var(--a-weight-semibold);
+    --richtext-table-my:         var(--a-space-3);
+    --richtext-th-py:            var(--a-space-2);
+    --richtext-th-px:            var(--a-space-3);
+    --richtext-th-weight:        var(--a-weight-semibold);
 
     /* ── HR ── */
-    --richtext-hr-my-default:            var(--a-space-6);
+    --richtext-hr-my:            var(--a-space-6);
 
     /* ── Strong ── */
-    --richtext-strong-weight-default:    var(--a-weight-semibold);
+    --richtext-strong-weight:    var(--a-weight-semibold);
   }
 
   :scope {
@@ -83,9 +83,9 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    background: var(--richtext-bg, var(--richtext-bg-default));
-    color: var(--richtext-fg, var(--richtext-fg-default));
-    font-family: var(--richtext-font, var(--richtext-font-default));
+    background: var(--richtext-bg);
+    color: var(--richtext-fg);
+    font-family: var(--richtext-font);
     overflow-y: auto;
   }
 
@@ -94,56 +94,56 @@
   [data-richtext-body] {
     box-sizing: border-box;
     width: 100%;
-    max-width: var(--richtext-max-width, var(--richtext-max-width-default));
-    padding: var(--richtext-py, var(--richtext-py-default)) var(--richtext-px, var(--richtext-px-default));
+    max-width: var(--richtext-max-width);
+    padding: var(--richtext-py) var(--richtext-px);
   }
 
   /* ── Headings ── */
 
   [data-richtext-body] h1 {
-    font-size: var(--richtext-h1-size, var(--richtext-h1-size-default));
-    font-weight: var(--richtext-h1-weight, var(--richtext-h1-weight-default));
-    line-height: var(--richtext-h1-leading, var(--richtext-h1-leading-default));
-    margin: 0 0 var(--richtext-h1-margin-bottom, var(--richtext-h1-margin-bottom-default));
+    font-size: var(--richtext-h1-size);
+    font-weight: var(--richtext-h1-weight);
+    line-height: var(--richtext-h1-leading);
+    margin: 0 0 var(--richtext-h1-margin-bottom);
   }
 
   [data-richtext-body] h2 {
-    font-size: var(--richtext-h2-size, var(--richtext-h2-size-default));
-    font-weight: var(--richtext-h2-weight, var(--richtext-h2-weight-default));
-    line-height: var(--richtext-h2-leading, var(--richtext-h2-leading-default));
-    margin: var(--richtext-h2-margin-top, var(--richtext-h2-margin-top-default)) 0 var(--richtext-h2-margin-bottom, var(--richtext-h2-margin-bottom-default));
-    padding-bottom: var(--richtext-h2-pad-bottom, var(--richtext-h2-pad-bottom-default));
-    border-bottom: 1px solid var(--richtext-border, var(--richtext-border-default));
+    font-size: var(--richtext-h2-size);
+    font-weight: var(--richtext-h2-weight);
+    line-height: var(--richtext-h2-leading);
+    margin: var(--richtext-h2-margin-top) 0 var(--richtext-h2-margin-bottom);
+    padding-bottom: var(--richtext-h2-pad-bottom);
+    border-bottom: 1px solid var(--richtext-border);
   }
 
   [data-richtext-body] h3 {
-    font-size: var(--richtext-h3-size, var(--richtext-h3-size-default));
-    font-weight: var(--richtext-h3-weight, var(--richtext-h3-weight-default));
-    margin: var(--richtext-h3-margin-top, var(--richtext-h3-margin-top-default)) 0 var(--richtext-h3-margin-bottom, var(--richtext-h3-margin-bottom-default));
+    font-size: var(--richtext-h3-size);
+    font-weight: var(--richtext-h3-weight);
+    margin: var(--richtext-h3-margin-top) 0 var(--richtext-h3-margin-bottom);
   }
 
   [data-richtext-body] h4 {
-    font-size: var(--richtext-body-size, var(--richtext-body-size-default));
-    font-weight: var(--richtext-h4-weight, var(--richtext-h4-weight-default));
-    margin: var(--richtext-h4-margin-top, var(--richtext-h4-margin-top-default)) 0 var(--richtext-h4-margin-bottom, var(--richtext-h4-margin-bottom-default));
+    font-size: var(--richtext-body-size);
+    font-weight: var(--richtext-h4-weight);
+    margin: var(--richtext-h4-margin-top) 0 var(--richtext-h4-margin-bottom);
   }
 
   [data-richtext-body] h5 {
-    font-size: var(--richtext-body-size, var(--richtext-body-size-default));
-    font-weight: var(--richtext-h4-weight, var(--richtext-h4-weight-default));
-    color: var(--richtext-fg-muted, var(--richtext-fg-muted-default));
+    font-size: var(--richtext-body-size);
+    font-weight: var(--richtext-h4-weight);
+    color: var(--richtext-fg-muted);
     text-transform: uppercase;
     letter-spacing: 0.04em;
-    margin: var(--richtext-h4-margin-top, var(--richtext-h4-margin-top-default)) 0 var(--richtext-h4-margin-bottom, var(--richtext-h4-margin-bottom-default));
+    margin: var(--richtext-h4-margin-top) 0 var(--richtext-h4-margin-bottom);
   }
 
   [data-richtext-body] h6 {
-    font-size: var(--richtext-code-size, var(--richtext-code-size-default));
-    font-weight: var(--richtext-h4-weight, var(--richtext-h4-weight-default));
-    color: var(--richtext-fg-muted, var(--richtext-fg-muted-default));
+    font-size: var(--richtext-code-size);
+    font-weight: var(--richtext-h4-weight);
+    color: var(--richtext-fg-muted);
     text-transform: uppercase;
     letter-spacing: 0.06em;
-    margin: var(--richtext-h4-margin-top, var(--richtext-h4-margin-top-default)) 0 var(--richtext-h4-margin-bottom, var(--richtext-h4-margin-bottom-default));
+    margin: var(--richtext-h4-margin-top) 0 var(--richtext-h4-margin-bottom);
   }
 
   /* First-element rhythm reset — first heading shouldn't push content
@@ -154,35 +154,35 @@
   /* ── Body text ── */
 
   [data-richtext-body] p {
-    font-size: var(--richtext-body-size, var(--richtext-body-size-default));
-    line-height: var(--richtext-body-leading, var(--richtext-body-leading-default));
-    margin: 0 0 var(--richtext-p-margin-bottom, var(--richtext-p-margin-bottom-default));
+    font-size: var(--richtext-body-size);
+    line-height: var(--richtext-body-leading);
+    margin: 0 0 var(--richtext-p-margin-bottom);
   }
 
   [data-richtext-body] h2 + p,
   [data-richtext-body] h3 + p {
-    color: var(--richtext-fg-subtle, var(--richtext-fg-subtle-default));
+    color: var(--richtext-fg-subtle);
   }
 
   /* ── Code ── */
 
   [data-richtext-body] code {
-    background: var(--richtext-code-bg, var(--richtext-code-bg-default));
+    background: var(--richtext-code-bg);
     padding: 0.1em 0.35em;
-    border-radius: var(--richtext-code-radius, var(--richtext-code-radius-default));
-    font-family: var(--richtext-font-code, var(--richtext-font-code-default));
+    border-radius: var(--richtext-code-radius);
+    font-family: var(--richtext-font-code);
     font-size: 0.875em;
   }
 
   [data-richtext-body] pre {
-    background: var(--richtext-code-bg, var(--richtext-code-bg-default));
-    border: 1px solid var(--richtext-border, var(--richtext-border-default));
-    border-radius: var(--richtext-pre-radius, var(--richtext-pre-radius-default));
-    padding: var(--richtext-pre-inset, var(--richtext-pre-inset-default));
+    background: var(--richtext-code-bg);
+    border: 1px solid var(--richtext-border);
+    border-radius: var(--richtext-pre-radius);
+    padding: var(--richtext-pre-inset);
     overflow-x: auto;
-    font-size: var(--richtext-code-size, var(--richtext-code-size-default));
+    font-size: var(--richtext-code-size);
     line-height: 1.5;
-    margin: var(--richtext-pre-my, var(--richtext-pre-my-default)) 0;
+    margin: var(--richtext-pre-my) 0;
   }
 
   [data-richtext-body] pre code {
@@ -195,12 +195,12 @@
 
   [data-richtext-body] ul,
   [data-richtext-body] ol {
-    margin: var(--richtext-list-my, var(--richtext-list-my-default)) 0;
-    padding-left: var(--richtext-list-indent, var(--richtext-list-indent-default));
+    margin: var(--richtext-list-my) 0;
+    padding-left: var(--richtext-list-indent);
   }
 
   [data-richtext-body] li {
-    margin-bottom: var(--richtext-li-margin-bottom, var(--richtext-li-margin-bottom-default));
+    margin-bottom: var(--richtext-li-margin-bottom);
   }
 
   /* Nested lists — collapse the vertical block margin so children
@@ -212,49 +212,49 @@
 
   /* ── Definition lists ── */
   [data-richtext-body] dl {
-    margin: var(--richtext-list-my, var(--richtext-list-my-default)) 0;
+    margin: var(--richtext-list-my) 0;
   }
   [data-richtext-body] dt {
-    font-weight: var(--richtext-strong-weight, var(--richtext-strong-weight-default));
-    color: var(--richtext-fg, var(--richtext-fg-default));
+    font-weight: var(--richtext-strong-weight);
+    color: var(--richtext-fg);
     margin-top: var(--a-space-2);
   }
   [data-richtext-body] dd {
-    margin: 0 0 var(--richtext-li-margin-bottom, var(--richtext-li-margin-bottom-default)) var(--richtext-list-indent, var(--richtext-list-indent-default));
-    color: var(--richtext-fg-muted, var(--richtext-fg-muted-default));
+    margin: 0 0 var(--richtext-li-margin-bottom) var(--richtext-list-indent);
+    color: var(--richtext-fg-muted);
   }
 
   /* ── Blockquote ── */
   [data-richtext-body] blockquote {
-    margin: var(--richtext-block-my, var(--richtext-block-my-default)) 0;
+    margin: var(--richtext-block-my) 0;
     padding: var(--a-space-1) var(--a-space-4);
-    border-inline-start: 3px solid var(--richtext-border, var(--richtext-border-default));
-    color: var(--richtext-fg-muted, var(--richtext-fg-muted-default));
+    border-inline-start: 3px solid var(--richtext-border);
+    color: var(--richtext-fg-muted);
     font-style: italic;
   }
   [data-richtext-body] blockquote > :last-child { margin-bottom: 0; }
 
   /* ── Inline emphasis & semantic glyphs ── */
   [data-richtext-body] mark {
-    background: var(--a-warning-muted, var(--richtext-code-bg, var(--richtext-code-bg-default)));
+    background: var(--a-warning-muted, var(--richtext-code-bg));
     color: inherit;
     padding: 0 0.2em;
-    border-radius: var(--richtext-code-radius, var(--richtext-code-radius-default));
+    border-radius: var(--richtext-code-radius);
   }
   [data-richtext-body] del,
   [data-richtext-body] s {
-    color: var(--richtext-fg-muted, var(--richtext-fg-muted-default));
+    color: var(--richtext-fg-muted);
     text-decoration: line-through;
   }
   [data-richtext-body] kbd {
-    font-family: var(--richtext-font-code, var(--richtext-font-code-default));
+    font-family: var(--richtext-font-code);
     font-size: 0.85em;
-    background: var(--richtext-code-bg, var(--richtext-code-bg-default));
-    border: 1px solid var(--richtext-border, var(--richtext-border-default));
+    background: var(--richtext-code-bg);
+    border: 1px solid var(--richtext-border);
     border-bottom-width: 2px;
-    border-radius: var(--richtext-code-radius, var(--richtext-code-radius-default));
+    border-radius: var(--richtext-code-radius);
     padding: 0.05em 0.4em;
-    box-shadow: inset 0 -1px 0 var(--richtext-border, var(--richtext-border-default));
+    box-shadow: inset 0 -1px 0 var(--richtext-border);
     white-space: nowrap;
   }
   [data-richtext-body] sup,
@@ -274,39 +274,39 @@
     max-width: 100%;
     height: auto;
     display: block;
-    margin: var(--richtext-block-my, var(--richtext-block-my-default)) auto;
-    border-radius: var(--richtext-pre-radius, var(--richtext-pre-radius-default));
+    margin: var(--richtext-block-my) auto;
+    border-radius: var(--richtext-pre-radius);
   }
   [data-richtext-body] figure {
-    margin: var(--richtext-block-my, var(--richtext-block-my-default)) 0;
+    margin: var(--richtext-block-my) 0;
   }
   [data-richtext-body] figcaption {
-    font-size: var(--richtext-code-size, var(--richtext-code-size-default));
-    color: var(--richtext-fg-muted, var(--richtext-fg-muted-default));
+    font-size: var(--richtext-code-size);
+    color: var(--richtext-fg-muted);
     text-align: center;
     margin-top: var(--a-space-1);
   }
 
   /* ── Disclosure ── */
   [data-richtext-body] details {
-    margin: var(--richtext-block-my, var(--richtext-block-my-default)) 0;
-    border: 1px solid var(--richtext-border, var(--richtext-border-default));
-    border-radius: var(--richtext-pre-radius, var(--richtext-pre-radius-default));
+    margin: var(--richtext-block-my) 0;
+    border: 1px solid var(--richtext-border);
+    border-radius: var(--richtext-pre-radius);
     padding: var(--a-space-3) var(--a-space-4);
   }
   [data-richtext-body] details[open] {
-    background: var(--richtext-code-bg, var(--richtext-code-bg-default));
+    background: var(--richtext-code-bg);
   }
   [data-richtext-body] summary {
     cursor: pointer;
-    font-weight: var(--richtext-strong-weight, var(--richtext-strong-weight-default));
+    font-weight: var(--richtext-strong-weight);
     margin: calc(-1 * var(--a-space-3)) calc(-1 * var(--a-space-4));
     padding: var(--a-space-3) var(--a-space-4);
     list-style-position: inside;
   }
   [data-richtext-body] details[open] summary {
     margin-bottom: var(--a-space-2);
-    border-bottom: 1px solid var(--richtext-border, var(--richtext-border-default));
+    border-bottom: 1px solid var(--richtext-border);
   }
 
   /* ── Tables ── */
@@ -314,43 +314,43 @@
   [data-richtext-body] table {
     width: 100%;
     border-collapse: collapse;
-    margin: var(--richtext-table-my, var(--richtext-table-my-default)) 0;
-    font-size: var(--richtext-body-size, var(--richtext-body-size-default));
+    margin: var(--richtext-table-my) 0;
+    font-size: var(--richtext-body-size);
   }
 
   [data-richtext-body] th,
   [data-richtext-body] td {
     text-align: left;
-    padding: var(--richtext-th-py, var(--richtext-th-py-default)) var(--richtext-th-px, var(--richtext-th-px-default));
-    border-bottom: 1px solid var(--richtext-border, var(--richtext-border-default));
+    padding: var(--richtext-th-py) var(--richtext-th-px);
+    border-bottom: 1px solid var(--richtext-border);
   }
 
   [data-richtext-body] th {
-    font-weight: var(--richtext-th-weight, var(--richtext-th-weight-default));
-    color: var(--richtext-fg-muted, var(--richtext-fg-muted-default));
-    font-size: var(--richtext-code-size, var(--richtext-code-size-default));
+    font-weight: var(--richtext-th-weight);
+    color: var(--richtext-fg-muted);
+    font-size: var(--richtext-code-size);
   }
 
   /* ── Misc ── */
 
   [data-richtext-body] hr {
     border: none;
-    border-top: 1px solid var(--richtext-border, var(--richtext-border-default));
-    margin: var(--richtext-hr-my, var(--richtext-hr-my-default)) 0;
+    border-top: 1px solid var(--richtext-border);
+    margin: var(--richtext-hr-my) 0;
   }
 
-  [data-richtext-body] strong { font-weight: var(--richtext-strong-weight, var(--richtext-strong-weight-default)); }
+  [data-richtext-body] strong { font-weight: var(--richtext-strong-weight); }
   [data-richtext-body] em { font-style: italic; }
 
   [data-richtext-body] a {
-    color: var(--richtext-link, var(--richtext-link-default));
+    color: var(--richtext-link);
     text-decoration: underline;
     text-underline-offset: 2px;
     transition: color var(--a-duration-fast) var(--a-easing);
   }
 
   [data-richtext-body] a:hover {
-    color: var(--richtext-link-hover, var(--richtext-link-hover-default));
+    color: var(--richtext-link-hover);
   }
 
   [data-richtext-body] a:focus-visible {
@@ -359,5 +359,5 @@
     border-radius: var(--a-radius-sm);
   }
 
-  [data-richtext-body] small { font-size: var(--richtext-code-size, var(--richtext-code-size-default)); color: var(--richtext-fg-muted, var(--richtext-fg-muted-default)); }
+  [data-richtext-body] small { font-size: var(--richtext-code-size); color: var(--richtext-fg-muted); }
 }

package/components/row/row.css

@@ -5,19 +5,19 @@
        ambient `--a-gap` (base `--a-gap-md`). Reading
        `var(--a-gap-self, var(--a-gap))` picks up `<row-ui gap="…">` on
        this element, else falls through to the inherited ambient. */
-    --row-gap-default:     var(--a-gap-self, var(--a-gap));
-    --row-justify-default: flex-start;
-    --row-align-default:   center;
-    --row-drag-bg-active-default: var(--a-accent-muted);
+    --row-gap:     var(--a-gap-self, var(--a-gap));
+    --row-justify: flex-start;
+    --row-align:   center;
+    --row-drag-bg-active: var(--a-accent-muted);
   }
 
   :scope {
     box-sizing: border-box;
     display: flex;
     flex-direction: row;
-    gap: var(--row-gap, var(--row-gap-default));
-    justify-content: var(--row-justify, var(--row-justify-default));
-    align-items: var(--row-align, var(--row-align-default));
+    gap: var(--row-gap);
+    justify-content: var(--row-justify);
+    align-items: var(--row-align);
     /* Universal [padding] / [margin] opt-in — see tokens.css for scale. */
     padding: var(--a-padding, 0);
     margin: var(--a-margin, 0);
@@ -33,23 +33,23 @@
   :scope[draggable]:active,
   :scope[draggable][data-draggable-dragging] {
     cursor: grabbing;
-    background: var(--row-drag-bg-active, var(--row-drag-bg-active-default));
+    background: var(--row-drag-bg-active);
   }
 
   /* Justify */
-  :scope[justify="start"]         { --row-justify-default: flex-start; }
-  :scope[justify="center"]        { --row-justify-default: center; }
-  :scope[justify="end"]           { --row-justify-default: flex-end; }
-  :scope[justify="between"]       { --row-justify-default: space-between; }
-  :scope[justify="space-between"] { --row-justify-default: space-between; }
-  :scope[justify="space-around"]  { --row-justify-default: space-around; }
+  :scope[justify="start"]         { --row-justify: flex-start; }
+  :scope[justify="center"]        { --row-justify: center; }
+  :scope[justify="end"]           { --row-justify: flex-end; }
+  :scope[justify="between"]       { --row-justify: space-between; }
+  :scope[justify="space-between"] { --row-justify: space-between; }
+  :scope[justify="space-around"]  { --row-justify: space-around; }
 
   /* Align */
-  :scope[align="start"]    { --row-align-default: flex-start; }
-  :scope[align="center"]   { --row-align-default: center; }
-  :scope[align="end"]      { --row-align-default: flex-end; }
-  :scope[align="stretch"]  { --row-align-default: stretch; }
-  :scope[align="baseline"] { --row-align-default: baseline; }
+  :scope[align="start"]    { --row-align: flex-start; }
+  :scope[align="center"]   { --row-align: center; }
+  :scope[align="end"]      { --row-align: flex-end; }
+  :scope[align="stretch"]  { --row-align: stretch; }
+  :scope[align="baseline"] { --row-align: baseline; }
 
   /* Wrap */
   :scope[wrap] { flex-wrap: wrap; }