@adia-ai/web-components 0.6.33 → 0.6.34

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:      45rem;
-    --richtext-px:             var(--a-space-6);
-    --richtext-py:             var(--a-space-8);
+    --richtext-max-width-default:      45rem;
+    --richtext-px-default:             var(--a-space-6);
+    --richtext-py-default:             var(--a-space-8);
 
     /* ── Colors ── */
-    --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);
+    --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);
 
     /* ── Typography ── */
-    --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);
+    --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);
 
     /* ── Heading typography ── */
-    --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);
+    --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);
 
     /* ── Heading rhythm ── */
-    --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);
+    --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);
 
     /* ── Block rhythm ── */
-    --richtext-p-margin-bottom:  var(--a-space-3);
-    --richtext-block-my:         var(--a-space-3);
+    --richtext-p-margin-bottom-default:  var(--a-space-3);
+    --richtext-block-my-default:         var(--a-space-3);
 
     /* ── Inline code ── */
-    --richtext-code-radius:      var(--a-radius-sm);
+    --richtext-code-radius-default:      var(--a-radius-sm);
 
     /* ── Code block ── */
-    --richtext-pre-radius:       var(--a-radius-md);
-    --richtext-pre-inset:        var(--a-space-3);
-    --richtext-pre-my:           var(--a-space-3);
+    --richtext-pre-radius-default:       var(--a-radius-md);
+    --richtext-pre-inset-default:        var(--a-space-3);
+    --richtext-pre-my-default:           var(--a-space-3);
 
     /* ── Lists ── */
-    --richtext-list-my:          var(--a-space-2);
-    --richtext-list-indent:      var(--a-space-6);
-    --richtext-li-margin-bottom: var(--a-space-1);
+    --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);
 
     /* ── Tables ── */
-    --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);
+    --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);
 
     /* ── HR ── */
-    --richtext-hr-my:            var(--a-space-6);
+    --richtext-hr-my-default:            var(--a-space-6);
 
     /* ── Strong ── */
-    --richtext-strong-weight:    var(--a-weight-semibold);
+    --richtext-strong-weight-default:    var(--a-weight-semibold);
   }
 
   :scope {
@@ -83,9 +83,9 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    background: var(--richtext-bg);
-    color: var(--richtext-fg);
-    font-family: var(--richtext-font);
+    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));
     overflow-y: auto;
   }
 
@@ -94,56 +94,56 @@
   [data-richtext-body] {
     box-sizing: border-box;
     width: 100%;
-    max-width: var(--richtext-max-width);
-    padding: var(--richtext-py) var(--richtext-px);
+    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));
   }
 
   /* ── Headings ── */
 
   [data-richtext-body] h1 {
-    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);
+    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));
   }
 
   [data-richtext-body] h2 {
-    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);
+    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));
   }
 
   [data-richtext-body] h3 {
-    font-size: var(--richtext-h3-size);
-    font-weight: var(--richtext-h3-weight);
-    margin: var(--richtext-h3-margin-top) 0 var(--richtext-h3-margin-bottom);
+    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));
   }
 
   [data-richtext-body] h4 {
-    font-size: var(--richtext-body-size);
-    font-weight: var(--richtext-h4-weight);
-    margin: var(--richtext-h4-margin-top) 0 var(--richtext-h4-margin-bottom);
+    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));
   }
 
   [data-richtext-body] h5 {
-    font-size: var(--richtext-body-size);
-    font-weight: var(--richtext-h4-weight);
-    color: var(--richtext-fg-muted);
+    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));
     text-transform: uppercase;
     letter-spacing: 0.04em;
-    margin: var(--richtext-h4-margin-top) 0 var(--richtext-h4-margin-bottom);
+    margin: var(--richtext-h4-margin-top, var(--richtext-h4-margin-top-default)) 0 var(--richtext-h4-margin-bottom, var(--richtext-h4-margin-bottom-default));
   }
 
   [data-richtext-body] h6 {
-    font-size: var(--richtext-code-size);
-    font-weight: var(--richtext-h4-weight);
-    color: var(--richtext-fg-muted);
+    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));
     text-transform: uppercase;
     letter-spacing: 0.06em;
-    margin: var(--richtext-h4-margin-top) 0 var(--richtext-h4-margin-bottom);
+    margin: var(--richtext-h4-margin-top, var(--richtext-h4-margin-top-default)) 0 var(--richtext-h4-margin-bottom, var(--richtext-h4-margin-bottom-default));
   }
 
   /* 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);
-    line-height: var(--richtext-body-leading);
-    margin: 0 0 var(--richtext-p-margin-bottom);
+    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));
   }
 
   [data-richtext-body] h2 + p,
   [data-richtext-body] h3 + p {
-    color: var(--richtext-fg-subtle);
+    color: var(--richtext-fg-subtle, var(--richtext-fg-subtle-default));
   }
 
   /* ── Code ── */
 
   [data-richtext-body] code {
-    background: var(--richtext-code-bg);
+    background: var(--richtext-code-bg, var(--richtext-code-bg-default));
     padding: 0.1em 0.35em;
-    border-radius: var(--richtext-code-radius);
-    font-family: var(--richtext-font-code);
+    border-radius: var(--richtext-code-radius, var(--richtext-code-radius-default));
+    font-family: var(--richtext-font-code, var(--richtext-font-code-default));
     font-size: 0.875em;
   }
 
   [data-richtext-body] pre {
-    background: var(--richtext-code-bg);
-    border: 1px solid var(--richtext-border);
-    border-radius: var(--richtext-pre-radius);
-    padding: var(--richtext-pre-inset);
+    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));
     overflow-x: auto;
-    font-size: var(--richtext-code-size);
+    font-size: var(--richtext-code-size, var(--richtext-code-size-default));
     line-height: 1.5;
-    margin: var(--richtext-pre-my) 0;
+    margin: var(--richtext-pre-my, var(--richtext-pre-my-default)) 0;
   }
 
   [data-richtext-body] pre code {
@@ -195,12 +195,12 @@
 
   [data-richtext-body] ul,
   [data-richtext-body] ol {
-    margin: var(--richtext-list-my) 0;
-    padding-left: var(--richtext-list-indent);
+    margin: var(--richtext-list-my, var(--richtext-list-my-default)) 0;
+    padding-left: var(--richtext-list-indent, var(--richtext-list-indent-default));
   }
 
   [data-richtext-body] li {
-    margin-bottom: var(--richtext-li-margin-bottom);
+    margin-bottom: var(--richtext-li-margin-bottom, var(--richtext-li-margin-bottom-default));
   }
 
   /* Nested lists — collapse the vertical block margin so children
@@ -212,49 +212,49 @@
 
   /* ── Definition lists ── */
   [data-richtext-body] dl {
-    margin: var(--richtext-list-my) 0;
+    margin: var(--richtext-list-my, var(--richtext-list-my-default)) 0;
   }
   [data-richtext-body] dt {
-    font-weight: var(--richtext-strong-weight);
-    color: var(--richtext-fg);
+    font-weight: var(--richtext-strong-weight, var(--richtext-strong-weight-default));
+    color: var(--richtext-fg, var(--richtext-fg-default));
     margin-top: var(--a-space-2);
   }
   [data-richtext-body] dd {
-    margin: 0 0 var(--richtext-li-margin-bottom) var(--richtext-list-indent);
-    color: var(--richtext-fg-muted);
+    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));
   }
 
   /* ── Blockquote ── */
   [data-richtext-body] blockquote {
-    margin: var(--richtext-block-my) 0;
+    margin: var(--richtext-block-my, var(--richtext-block-my-default)) 0;
     padding: var(--a-space-1) var(--a-space-4);
-    border-inline-start: 3px solid var(--richtext-border);
-    color: var(--richtext-fg-muted);
+    border-inline-start: 3px solid var(--richtext-border, var(--richtext-border-default));
+    color: var(--richtext-fg-muted, var(--richtext-fg-muted-default));
     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));
+    background: var(--a-warning-muted, var(--richtext-code-bg, var(--richtext-code-bg-default)));
     color: inherit;
     padding: 0 0.2em;
-    border-radius: var(--richtext-code-radius);
+    border-radius: var(--richtext-code-radius, var(--richtext-code-radius-default));
   }
   [data-richtext-body] del,
   [data-richtext-body] s {
-    color: var(--richtext-fg-muted);
+    color: var(--richtext-fg-muted, var(--richtext-fg-muted-default));
     text-decoration: line-through;
   }
   [data-richtext-body] kbd {
-    font-family: var(--richtext-font-code);
+    font-family: var(--richtext-font-code, var(--richtext-font-code-default));
     font-size: 0.85em;
-    background: var(--richtext-code-bg);
-    border: 1px solid var(--richtext-border);
+    background: var(--richtext-code-bg, var(--richtext-code-bg-default));
+    border: 1px solid var(--richtext-border, var(--richtext-border-default));
     border-bottom-width: 2px;
-    border-radius: var(--richtext-code-radius);
+    border-radius: var(--richtext-code-radius, var(--richtext-code-radius-default));
     padding: 0.05em 0.4em;
-    box-shadow: inset 0 -1px 0 var(--richtext-border);
+    box-shadow: inset 0 -1px 0 var(--richtext-border, var(--richtext-border-default));
     white-space: nowrap;
   }
   [data-richtext-body] sup,
@@ -274,39 +274,39 @@
     max-width: 100%;
     height: auto;
     display: block;
-    margin: var(--richtext-block-my) auto;
-    border-radius: var(--richtext-pre-radius);
+    margin: var(--richtext-block-my, var(--richtext-block-my-default)) auto;
+    border-radius: var(--richtext-pre-radius, var(--richtext-pre-radius-default));
   }
   [data-richtext-body] figure {
-    margin: var(--richtext-block-my) 0;
+    margin: var(--richtext-block-my, var(--richtext-block-my-default)) 0;
   }
   [data-richtext-body] figcaption {
-    font-size: var(--richtext-code-size);
-    color: var(--richtext-fg-muted);
+    font-size: var(--richtext-code-size, var(--richtext-code-size-default));
+    color: var(--richtext-fg-muted, var(--richtext-fg-muted-default));
     text-align: center;
     margin-top: var(--a-space-1);
   }
 
   /* ── Disclosure ── */
   [data-richtext-body] details {
-    margin: var(--richtext-block-my) 0;
-    border: 1px solid var(--richtext-border);
-    border-radius: var(--richtext-pre-radius);
+    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));
     padding: var(--a-space-3) var(--a-space-4);
   }
   [data-richtext-body] details[open] {
-    background: var(--richtext-code-bg);
+    background: var(--richtext-code-bg, var(--richtext-code-bg-default));
   }
   [data-richtext-body] summary {
     cursor: pointer;
-    font-weight: var(--richtext-strong-weight);
+    font-weight: var(--richtext-strong-weight, var(--richtext-strong-weight-default));
     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);
+    border-bottom: 1px solid var(--richtext-border, var(--richtext-border-default));
   }
 
   /* ── Tables ── */
@@ -314,43 +314,43 @@
   [data-richtext-body] table {
     width: 100%;
     border-collapse: collapse;
-    margin: var(--richtext-table-my) 0;
-    font-size: var(--richtext-body-size);
+    margin: var(--richtext-table-my, var(--richtext-table-my-default)) 0;
+    font-size: var(--richtext-body-size, var(--richtext-body-size-default));
   }
 
   [data-richtext-body] th,
   [data-richtext-body] td {
     text-align: left;
-    padding: var(--richtext-th-py) var(--richtext-th-px);
-    border-bottom: 1px solid var(--richtext-border);
+    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));
   }
 
   [data-richtext-body] th {
-    font-weight: var(--richtext-th-weight);
-    color: var(--richtext-fg-muted);
-    font-size: var(--richtext-code-size);
+    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));
   }
 
   /* ── Misc ── */
 
   [data-richtext-body] hr {
     border: none;
-    border-top: 1px solid var(--richtext-border);
-    margin: var(--richtext-hr-my) 0;
+    border-top: 1px solid var(--richtext-border, var(--richtext-border-default));
+    margin: var(--richtext-hr-my, var(--richtext-hr-my-default)) 0;
   }
 
-  [data-richtext-body] strong { font-weight: var(--richtext-strong-weight); }
+  [data-richtext-body] strong { font-weight: var(--richtext-strong-weight, var(--richtext-strong-weight-default)); }
   [data-richtext-body] em { font-style: italic; }
 
   [data-richtext-body] a {
-    color: var(--richtext-link);
+    color: var(--richtext-link, var(--richtext-link-default));
     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);
+    color: var(--richtext-link-hover, var(--richtext-link-hover-default));
   }
 
   [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); color: var(--richtext-fg-muted); }
+  [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)); }
 }

package/components/row/row.css

@@ -3,19 +3,19 @@
     /* `--a-gap` defaults to `--a-gap-md` at :root in tokens.css; the
        universal `[gap="N"]` rules override it on the element, so reading
        `--a-gap` here picks up `<row-ui gap="…">` automatically. */
-    --row-gap:     var(--a-gap);
-    --row-justify: flex-start;
-    --row-align:   center;
-    --row-drag-bg-active: var(--a-accent-muted);
+    --row-gap-default:     var(--a-gap);
+    --row-justify-default: flex-start;
+    --row-align-default:   center;
+    --row-drag-bg-active-default: var(--a-accent-muted);
   }
 
   :scope {
     box-sizing: border-box;
     display: flex;
     flex-direction: row;
-    gap: var(--row-gap);
-    justify-content: var(--row-justify);
-    align-items: var(--row-align);
+    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));
     /* Universal [padding] / [margin] opt-in — see tokens.css for scale. */
     padding: var(--a-padding, 0);
     margin: var(--a-margin, 0);
@@ -31,23 +31,23 @@
   :scope[draggable]:active,
   :scope[draggable][data-draggable-dragging] {
     cursor: grabbing;
-    background: var(--row-drag-bg-active);
+    background: var(--row-drag-bg-active, var(--row-drag-bg-active-default));
   }
 
   /* Justify */
-  :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; }
+  :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; }
 
   /* Align */
-  :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; }
+  :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; }
 
   /* Wrap */
   :scope[wrap] { flex-wrap: wrap; }

package/components/search/search.css

@@ -1,9 +1,9 @@
 @scope (search-ui) {
   :where(:scope) {
     /* ── Tokens ── */
-    --search-radius:      var(--a-radius);
-    --search-duration:    var(--a-duration-fast);
-    --search-easing:      var(--a-easing);
+    --search-radius-default:      var(--a-radius);
+    --search-duration-default:    var(--a-duration-fast);
+    --search-easing-default:      var(--a-easing);
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
 }
 
@@ -19,11 +19,11 @@
   }
 
   [slot="suffix"] {
-    transition: opacity var(--search-duration) var(--search-easing);
+    transition: opacity var(--search-duration, var(--search-duration-default)) var(--search-easing, var(--search-easing-default));
   }
 
   /* Override input-ui radius to pill for search */
   input-ui {
-    --input-radius: var(--search-radius);
+    --input-radius: var(--search-radius, var(--search-radius-default));
   }
 }

package/components/segment/segment.css

@@ -2,35 +2,35 @@
    (Flavor B — attribute-removal restyle) both fail inside `@scope`.
    Selectors moved out. See docs/BROWSER-COMPAT.md §3a. */
 segment-ui:not([disabled]):not([selected]):hover {
-  color: var(--segment-fg-hover);
+  color: var(--segment-fg-hover, var(--segment-fg-hover-default));
 }
 segment-ui[selected] {
-  color: var(--segment-fg-selected);
+  color: var(--segment-fg-selected, var(--segment-fg-selected-default));
 }
 
 @scope (segment-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --segment-px:              var(--a-ui-px);
-    --segment-gap:             var(--a-space-1);
-    --segment-radius:          calc(var(--a-radius) - 2px);
+    --segment-px-default:              var(--a-ui-px);
+    --segment-gap-default:             var(--a-space-1);
+    --segment-radius-default:          calc(var(--a-radius) - 2px);
 
     /* ── Typography ── */
-    --segment-font-size:       var(--a-ui-size);
-    --segment-font-weight:     var(--a-ui-weight);
+    --segment-font-size-default:       var(--a-ui-size);
+    --segment-font-weight-default:     var(--a-ui-weight);
 
     /* ── Colors ── */
-    --segment-fg:              var(--a-ui-text-subtle);
-    --segment-fg-hover:        var(--a-ui-text-hover);
-    --segment-fg-selected:     var(--a-chrome-dark);
-    --segment-fg-disabled:     var(--a-ui-text-disabled);
+    --segment-fg-default:              var(--a-ui-text-subtle);
+    --segment-fg-hover-default:        var(--a-ui-text-hover);
+    --segment-fg-selected-default:     var(--a-chrome-dark);
+    --segment-fg-disabled-default:     var(--a-ui-text-disabled);
 
     /* ── Transition ── */
-    --segment-duration:        var(--a-duration-fast);
-    --segment-easing:          var(--a-easing);
+    --segment-duration-default:        var(--a-duration-fast);
+    --segment-easing-default:          var(--a-easing);
 
     /* ── Focus ── */
-    --segment-focus-ring:      var(--a-focus-ring);
+    --segment-focus-ring-default:      var(--a-focus-ring);
   }
 
   :scope {
@@ -41,15 +41,15 @@ segment-ui[selected] {
     justify-content: center;
     align-self: stretch;
     min-width: 0;
-    gap: var(--segment-gap);
+    gap: var(--segment-gap, var(--segment-gap-default));
 
-    padding-inline: var(--segment-px);
+    padding-inline: var(--segment-px, var(--segment-px-default));
 
     font: inherit;
-    font-size: var(--segment-font-size);
-    font-weight: var(--segment-font-weight);
+    font-size: var(--segment-font-size, var(--segment-font-size-default));
+    font-weight: var(--segment-font-weight, var(--segment-font-weight-default));
     line-height: 1;
-    color: var(--segment-fg);
+    color: var(--segment-fg, var(--segment-fg-default));
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -59,12 +59,12 @@ segment-ui[selected] {
     z-index: 1;
     cursor: pointer;
     user-select: none;
-    border-radius: var(--segment-radius);
+    border-radius: var(--segment-radius, var(--segment-radius-default));
     background: transparent;
 
     transition:
-      color var(--segment-duration) var(--segment-easing),
-      background var(--segment-duration) var(--segment-easing);
+      color var(--segment-duration, var(--segment-duration-default)) var(--segment-easing, var(--segment-easing-default)),
+      background var(--segment-duration, var(--segment-duration-default)) var(--segment-easing, var(--segment-easing-default));
   }
 
   /* Text rendered via ::after so consumers can drive label via [text].
@@ -93,11 +93,11 @@ segment-ui[selected] {
 
   :scope:focus-visible {
     outline: none;
-    box-shadow: var(--segment-focus-ring);
+    box-shadow: var(--segment-focus-ring, var(--segment-focus-ring-default));
   }
 
   :scope[disabled] {
-    color: var(--segment-fg-disabled);
+    color: var(--segment-fg-disabled, var(--segment-fg-disabled-default));
     cursor: not-allowed;
     pointer-events: none;
   }