@adia-ai/web-components 0.7.3 → 0.7.4

package/components/pane/pane.css

@@ -1,45 +1,45 @@
 @scope (pane-ui) {
   /* Tokens — :where() for zero specificity so consumers can override */
   :where(:scope) {
-    --pane-bg-default:              var(--a-bg);
-    --pane-border-default:          var(--a-border-subtle);
-    --pane-radius-default:          var(--a-radius-lg);
+    --pane-bg:              var(--a-bg);
+    --pane-border:          var(--a-border-subtle);
+    --pane-radius:          var(--a-radius-lg);
     /* Component-intrinsic measurement; no --a-space-* equivalent */
-    --pane-bar-height-default:      var(--a-chrome-pane-header-height);
-    --pane-header-px-default:       var(--a-space-3);
-    --pane-header-py-default:       var(--a-space-2);
-    --pane-header-fg-default:       var(--a-fg);
-    --pane-header-size-default:     var(--a-ui-size);
-    --pane-header-weight-default:   var(--a-weight-medium);
-    --pane-section-px-default:      var(--a-space-3);
-    --pane-section-py-default:      var(--a-space-2);
-    --pane-section-header-fg-default: var(--a-fg-muted);
-    --pane-section-header-size-default: var(--a-ui-tiny);
-    --pane-footer-px-default:       var(--a-space-3);
-    --pane-footer-py-default:       var(--a-space-2);
-    --pane-col-gap-default:         var(--a-space-3);
+    --pane-bar-height:      var(--a-chrome-pane-header-height);
+    --pane-header-px:       var(--a-space-3);
+    --pane-header-py:       var(--a-space-2);
+    --pane-header-fg:       var(--a-fg);
+    --pane-header-size:     var(--a-ui-size);
+    --pane-header-weight:   var(--a-weight-medium);
+    --pane-section-px:      var(--a-space-3);
+    --pane-section-py:      var(--a-space-2);
+    --pane-section-header-fg: var(--a-fg-muted);
+    --pane-section-header-size: var(--a-ui-tiny);
+    --pane-footer-px:       var(--a-space-3);
+    --pane-footer-py:       var(--a-space-2);
+    --pane-col-gap:         var(--a-space-3);
     /* Component-intrinsic measurement; no --a-space-* equivalent */
-    --pane-resize-width-default:    4px;
-    --pane-resize-fg-default:       var(--a-border);
-    --pane-resize-fg-hover-default: var(--a-fg-muted);
+    --pane-resize-width:    4px;
+    --pane-resize-fg:       var(--a-border);
+    --pane-resize-fg-hover: var(--a-fg-muted);
 
     /* ── Spacing ── */
-    --pane-gap-sm-default:          var(--a-space-2);
-    --pane-gap-xs-default:          var(--a-space-1);
+    --pane-gap-sm:          var(--a-space-2);
+    --pane-gap-xs:          var(--a-space-1);
 
     /* ── Header interaction ── */
-    --pane-header-bg-hover-default: var(--a-bg-subtle);
-    --pane-caret-fg-default:        var(--a-fg-muted);
+    --pane-header-bg-hover: var(--a-bg-subtle);
+    --pane-caret-fg:        var(--a-fg-muted);
 
     /* ── Section header ── */
-    --pane-section-header-weight-default: var(--a-weight-medium);
+    --pane-section-header-weight: var(--a-weight-medium);
 
     /* ── Resize active ── */
-    --pane-resize-fg-active-default: var(--a-fg-subtle);
+    --pane-resize-fg-active: var(--a-fg-subtle);
 
     /* ── Transitions ── */
-    --pane-duration-default:        var(--a-duration-fast);
-    --pane-easing-default:          var(--a-easing);
+    --pane-duration:        var(--a-duration-fast);
+    --pane-easing:          var(--a-easing);
   }
 
   :scope {
@@ -48,9 +48,9 @@
     display: flex;
     flex-direction: column;
     position: relative;
-    background: var(--pane-bg, var(--pane-bg-default));
-    border: 1px solid var(--pane-border, var(--pane-border-default));
-    /*border-radius: var(--pane-radius, var(--pane-radius-default));*/
+    background: var(--pane-bg);
+    border: 1px solid var(--pane-border);
+    /*border-radius: var(--pane-radius);*/
     overflow: hidden;
   }
 
@@ -74,10 +74,10 @@
     border: none;
   }
   :scope[side="leading"] {
-    border-inline-end: 1px solid var(--pane-border, var(--pane-border-default));
+    border-inline-end: 1px solid var(--pane-border);
   }
   :scope[side="trailing"] {
-    border-inline-start: 1px solid var(--pane-border, var(--pane-border-default));
+    border-inline-start: 1px solid var(--pane-border);
   }
 
   /* ── Pane header ── */
@@ -86,20 +86,20 @@
     display: flex;
     align-items: center;
     justify-content: flex-start;
-    gap: var(--pane-gap-sm, var(--pane-gap-sm-default));
-    height: var(--pane-bar-height, var(--pane-bar-height-default));
-    padding: 0 var(--pane-header-px, var(--pane-header-px-default));
-    font-size: var(--pane-header-size, var(--pane-header-size-default));
-    font-weight: var(--pane-header-weight, var(--pane-header-weight-default));
-    color: var(--pane-header-fg, var(--pane-header-fg-default));
+    gap: var(--pane-gap-sm);
+    height: var(--pane-bar-height);
+    padding: 0 var(--pane-header-px);
+    font-size: var(--pane-header-size);
+    font-weight: var(--pane-header-weight);
+    color: var(--pane-header-fg);
     cursor: pointer;
     user-select: none;
-    box-shadow: inset 0 -1px 0 var(--pane-border, var(--pane-border-default));
-    transition: background var(--pane-duration, var(--pane-duration-default)) var(--pane-easing, var(--pane-easing-default));
+    box-shadow: inset 0 -1px 0 var(--pane-border);
+    transition: background var(--pane-duration) var(--pane-easing);
   }
 
   & > header:hover {
-    background: var(--pane-header-bg-hover, var(--pane-header-bg-hover-default));
+    background: var(--pane-header-bg-hover);
   }
 
   & > header:focus-visible {
@@ -112,8 +112,8 @@
     --a-icon-size: var(--a-caret-size);
     flex-shrink: 0;
     margin-inline-start: auto;
-    color: var(--pane-caret-fg, var(--pane-caret-fg-default));
-    transition: transform var(--pane-duration, var(--pane-duration-default)) var(--pane-easing, var(--pane-easing-default));
+    color: var(--pane-caret-fg);
+    transition: transform var(--pane-duration) var(--pane-easing);
     transform: rotate(90deg);
   }
 
@@ -127,7 +127,7 @@
     min-height: 0;
     overflow-y: auto;
     scrollbar-width: none;
-    padding: var(--pane-section-py, var(--pane-section-py-default)) var(--pane-section-px, var(--pane-section-px-default));
+    padding: var(--pane-section-py) var(--pane-section-px);
   }
 
   & > section::-webkit-scrollbar {
@@ -137,12 +137,12 @@
   /* Section header — section's padding is the single source of horizontal inset;
      content inside the section must not add its own padding. */
   & > section > header {
-    font-size: var(--pane-section-header-size, var(--pane-section-header-size-default));
-    color: var(--pane-section-header-fg, var(--pane-section-header-fg-default));
-    padding-bottom: var(--pane-col-gap, var(--pane-col-gap-default));
+    font-size: var(--pane-section-header-size);
+    color: var(--pane-section-header-fg);
+    padding-bottom: var(--pane-col-gap);
     text-transform: uppercase;
     letter-spacing: 0.06em;
-    font-weight: var(--pane-section-header-weight, var(--pane-section-header-weight-default));
+    font-weight: var(--pane-section-header-weight);
   }
 
   /* Defensive: a data-col directly under a section inherits the section's inset;
@@ -153,7 +153,7 @@
 
   /* Section divider between sections */
   & > section + section {
-    border-top: 1px solid var(--pane-border, var(--pane-border-default));
+    border-top: 1px solid var(--pane-border);
   }
 
   /* Column layout */
@@ -161,16 +161,16 @@
     display: flex;
     flex-direction: column;
     align-items: stretch;
-    gap: var(--pane-col-gap, var(--pane-col-gap-default));
+    gap: var(--pane-col-gap);
   }
 
   /* ── Footer ── */
   & > footer {
-    min-height: var(--pane-bar-height, var(--pane-bar-height-default));
+    min-height: var(--pane-bar-height);
     display: flex;
     align-items: center;
-    padding: var(--pane-footer-py, var(--pane-footer-py-default)) var(--pane-footer-px, var(--pane-footer-px-default));
-    border-top: 1px solid var(--pane-border, var(--pane-border-default));
+    padding: var(--pane-footer-py) var(--pane-footer-px);
+    border-top: 1px solid var(--pane-border);
   }
 
   /* ── Collapsed state ── */
@@ -194,10 +194,10 @@
     top: 0;
     inset-inline-end: 0;
     bottom: 0;
-    width: var(--pane-resize-width, var(--pane-resize-width-default));
+    width: var(--pane-resize-width);
     cursor: col-resize;
     background: transparent;
-    transition: background var(--pane-duration, var(--pane-duration-default)) var(--pane-easing, var(--pane-easing-default));
+    transition: background var(--pane-duration) var(--pane-easing);
     touch-action: none;
     z-index: 1;
   }
@@ -208,10 +208,10 @@
   }
 
   [slot="resize"]:hover {
-    background: var(--pane-resize-fg-hover, var(--pane-resize-fg-hover-default));
+    background: var(--pane-resize-fg-hover);
   }
 
   :scope[data-resizing] [slot="resize"] {
-    background: var(--pane-resize-fg-active, var(--pane-resize-fg-active-default));
+    background: var(--pane-resize-fg-active);
   }
 }

package/components/password-strength/password-strength.css

@@ -5,29 +5,29 @@
 @scope (password-strength-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --password-strength-gap-default:            var(--a-space-1);
-    --password-strength-segment-height-default: 4px;
-    --password-strength-radius-default:         var(--a-radius-full);
-    --password-strength-stack-gap-default:      var(--a-space-1);
+    --password-strength-gap:            var(--a-space-1);
+    --password-strength-segment-height: 4px;
+    --password-strength-radius:         var(--a-radius-full);
+    --password-strength-stack-gap:      var(--a-space-1);
 
     /* ── Colors ── */
-    --password-strength-segment-bg-default:     var(--a-canvas-1-scrim);
-    --password-strength-color-weak-default:     var(--a-danger-bg);
-    --password-strength-color-fair-default:     var(--a-warning-bg);
-    --password-strength-color-good-default:     var(--a-info-bg);
-    --password-strength-color-strong-default:   var(--a-success-bg);
+    --password-strength-segment-bg:     var(--a-canvas-1-scrim);
+    --password-strength-color-weak:     var(--a-danger-bg);
+    --password-strength-color-fair:     var(--a-warning-bg);
+    --password-strength-color-good:     var(--a-info-bg);
+    --password-strength-color-strong:   var(--a-success-bg);
 
     /* ── Typography ── */
-    --password-strength-label-fg-default:       var(--a-fg-muted);
-    --password-strength-label-size-default:     var(--a-ui-sm);
-    --password-strength-label-weight-default:   var(--a-weight-medium);
+    --password-strength-label-fg:       var(--a-fg-muted);
+    --password-strength-label-size:     var(--a-ui-sm);
+    --password-strength-label-weight:   var(--a-weight-medium);
 
     /* ── Per-score label color (mirrors the lit-segment color so the
        label visually links to the bar fill state). ── */
-    --password-strength-label-fg-weak-default:   var(--password-strength-color-weak, var(--password-strength-color-weak-default));
-    --password-strength-label-fg-fair-default:   var(--password-strength-color-fair, var(--password-strength-color-fair-default));
-    --password-strength-label-fg-good-default:   var(--password-strength-color-good, var(--password-strength-color-good-default));
-    --password-strength-label-fg-strong-default: var(--password-strength-color-strong, var(--password-strength-color-strong-default));
+    --password-strength-label-fg-weak:   var(--password-strength-color-weak);
+    --password-strength-label-fg-fair:   var(--password-strength-color-fair);
+    --password-strength-label-fg-good:   var(--password-strength-color-good);
+    --password-strength-label-fg-strong: var(--password-strength-color-strong);
   }
 
   /* ── Host ── */
@@ -35,7 +35,7 @@
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    gap: var(--password-strength-stack-gap, var(--password-strength-stack-gap-default));
+    gap: var(--password-strength-stack-gap);
     width: 100%;
   }
 
@@ -43,34 +43,34 @@
   [slot="bar"] {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
-    gap: var(--password-strength-gap, var(--password-strength-gap-default));
+    gap: var(--password-strength-gap);
   }
 
   [slot="segment"] {
-    height: var(--password-strength-segment-height, var(--password-strength-segment-height-default));
-    background: var(--password-strength-segment-bg, var(--password-strength-segment-bg-default));
-    border-radius: var(--password-strength-radius, var(--password-strength-radius-default));
+    height: var(--password-strength-segment-height);
+    background: var(--password-strength-segment-bg);
+    border-radius: var(--password-strength-radius);
     transition: background var(--a-duration-fast) var(--a-easing);
   }
 
   /* ── Lit segments — color depends on host [data-score] ── */
-  :scope[data-score="0"] [slot="segment"][data-lit] { background: var(--password-strength-color-weak,   var(--password-strength-color-weak-default)); }
-  :scope[data-score="1"] [slot="segment"][data-lit] { background: var(--password-strength-color-fair,   var(--password-strength-color-fair-default)); }
-  :scope[data-score="2"] [slot="segment"][data-lit] { background: var(--password-strength-color-good,   var(--password-strength-color-good-default)); }
-  :scope[data-score="3"] [slot="segment"][data-lit] { background: var(--password-strength-color-strong, var(--password-strength-color-strong-default)); }
+  :scope[data-score="0"] [slot="segment"][data-lit] { background: var(--password-strength-color-weak); }
+  :scope[data-score="1"] [slot="segment"][data-lit] { background: var(--password-strength-color-fair); }
+  :scope[data-score="2"] [slot="segment"][data-lit] { background: var(--password-strength-color-good); }
+  :scope[data-score="3"] [slot="segment"][data-lit] { background: var(--password-strength-color-strong); }
 
   /* ── Label ── */
   [slot="label"] {
-    font-size: var(--password-strength-label-size, var(--password-strength-label-size-default));
-    font-weight: var(--password-strength-label-weight, var(--password-strength-label-weight-default));
-    color: var(--password-strength-label-fg, var(--password-strength-label-fg-default));
+    font-size: var(--password-strength-label-size);
+    font-weight: var(--password-strength-label-weight);
+    color: var(--password-strength-label-fg);
     min-height: 1lh;  /* prevent layout jump when label appears */
   }
 
-  :scope[data-score="0"] [slot="label"] { color: var(--password-strength-label-fg-weak,   var(--password-strength-label-fg-weak-default)); }
-  :scope[data-score="1"] [slot="label"] { color: var(--password-strength-label-fg-fair,   var(--password-strength-label-fg-fair-default)); }
-  :scope[data-score="2"] [slot="label"] { color: var(--password-strength-label-fg-good,   var(--password-strength-label-fg-good-default)); }
-  :scope[data-score="3"] [slot="label"] { color: var(--password-strength-label-fg-strong, var(--password-strength-label-fg-strong-default)); }
+  :scope[data-score="0"] [slot="label"] { color: var(--password-strength-label-fg-weak); }
+  :scope[data-score="1"] [slot="label"] { color: var(--password-strength-label-fg-fair); }
+  :scope[data-score="2"] [slot="label"] { color: var(--password-strength-label-fg-good); }
+  :scope[data-score="3"] [slot="label"] { color: var(--password-strength-label-fg-strong); }
 
   /* ── Hide label when [show-label] is false-y. The class.js clears
      the textContent in that case; this provides belt-and-suspenders. ── */

package/components/pipeline-status/pipeline-status.css

@@ -5,51 +5,51 @@
      ───────────────────────────────────────────── */
   :where(:scope) {
     /* Layout */
-    --pipeline-status-gap-default:             var(--a-space-1);
-    --pipeline-status-column-gap-default:      var(--a-space-1);
-    --pipeline-status-py-default:              var(--a-space-2);
-    --pipeline-status-px-default:              var(--a-space-2);
-    --pipeline-status-current-min-h-default:   1.5em;
-    --pipeline-status-history-pt-default:      var(--a-space-1);
-    --pipeline-status-history-pad-y-default:   var(--a-space-0);
-    --pipeline-status-log-pt-default:          var(--a-space-1);
-    --pipeline-status-log-gap-default:         var(--a-space-0);
+    --pipeline-status-gap:             var(--a-space-1);
+    --pipeline-status-column-gap:      var(--a-space-1);
+    --pipeline-status-py:              var(--a-space-2);
+    --pipeline-status-px:              var(--a-space-2);
+    --pipeline-status-current-min-h:   1.5em;
+    --pipeline-status-history-pt:      var(--a-space-1);
+    --pipeline-status-history-pad-y:   var(--a-space-0);
+    --pipeline-status-log-pt:          var(--a-space-1);
+    --pipeline-status-log-gap:         var(--a-space-0);
 
     /* Dot sizing (aliased to spacing tokens to avoid raw px ≥ 3) */
-    --pipeline-status-dot-size-default:        var(--a-space-2);    /*  8px at d=1 */
-    --pipeline-status-log-dot-size-default:    var(--a-space-1-5);  /*  6px at d=1 */
+    --pipeline-status-dot-size:        var(--a-space-2);    /*  8px at d=1 */
+    --pipeline-status-log-dot-size:    var(--a-space-1-5);  /*  6px at d=1 */
 
     /* Typography */
-    --pipeline-status-font-family-default:     var(--a-font-family);
-    --pipeline-status-font-size-default:       var(--a-ui-sm);
-    --pipeline-status-history-size-default:    var(--a-ui-tiny);
-    --pipeline-status-log-size-default:        var(--a-ui-tiny);
-    --pipeline-status-label-weight-default:    var(--a-weight-medium);
+    --pipeline-status-font-family:     var(--a-font-family);
+    --pipeline-status-font-size:       var(--a-ui-sm);
+    --pipeline-status-history-size:    var(--a-ui-tiny);
+    --pipeline-status-log-size:        var(--a-ui-tiny);
+    --pipeline-status-label-weight:    var(--a-weight-medium);
 
     /* Colors — keep aliases referenced via semantic tokens */
-    --pipeline-status-fg-default:              var(--a-fg-subtle);
-    --pipeline-status-label-fg-default:        var(--a-fg);
-    --pipeline-status-msg-fg-default:          var(--a-fg-subtle);
-    --pipeline-status-history-fg-default:      var(--a-fg-subtle);
-    --pipeline-status-log-fg-default:          var(--a-fg-subtle);
+    --pipeline-status-fg:              var(--a-fg-subtle);
+    --pipeline-status-label-fg:        var(--a-fg);
+    --pipeline-status-msg-fg:          var(--a-fg-subtle);
+    --pipeline-status-history-fg:      var(--a-fg-subtle);
+    --pipeline-status-log-fg:          var(--a-fg-subtle);
 
-    --pipeline-status-dot-bg-default:          var(--a-border);
-    --pipeline-status-dot-bg-active-default:   var(--a-accent);
-    --pipeline-status-dot-bg-complete-default: var(--a-success-strong);
+    --pipeline-status-dot-bg:          var(--a-border);
+    --pipeline-status-dot-bg-active:   var(--a-accent);
+    --pipeline-status-dot-bg-complete: var(--a-success-strong);
 
-    --pipeline-status-history-border-default:  var(--a-border-subtle);
-    --pipeline-status-border-thin-default:     1px;
+    --pipeline-status-history-border:  var(--a-border-subtle);
+    --pipeline-status-border-thin:     1px;
 
     /* Motion */
-    --pipeline-status-duration-default:        var(--a-duration);
-    --pipeline-status-easing-default:          var(--a-easing);
+    --pipeline-status-duration:        var(--a-duration);
+    --pipeline-status-easing:          var(--a-easing);
     /* Infinite-pulse durations don't map to motion scale */
-    --pipeline-status-pulse-duration-default:  1.2s;
-    --pipeline-status-pulse-easing-default:    ease-in-out;
+    --pipeline-status-pulse-duration:  1.2s;
+    --pipeline-status-pulse-easing:    ease-in-out;
 
     /* Variant targets */
-    --pipeline-status-complete-fg-default:     var(--a-success-strong);
-    --pipeline-status-complete-border-default: var(--a-success-strong);
+    --pipeline-status-complete-fg:     var(--a-success-strong);
+    --pipeline-status-complete-border: var(--a-success-strong);
   }
 
   /* ─────────────────────────────────────────────
@@ -57,43 +57,43 @@
      ───────────────────────────────────────────── */
   :scope {
     display:             block;
-    font-family:         var(--pipeline-status-font-family, var(--pipeline-status-font-family-default));
-    font-size:           var(--pipeline-status-font-size, var(--pipeline-status-font-size-default));
-    color:               var(--pipeline-status-fg, var(--pipeline-status-fg-default));
+    font-family:         var(--pipeline-status-font-family);
+    font-size:           var(--pipeline-status-font-size);
+    color:               var(--pipeline-status-fg);
   }
 
   [data-pipeline-status] {
     display:             flex;
     flex-direction:      column;
-    gap:                 var(--pipeline-status-gap, var(--pipeline-status-gap-default));
-    padding:             var(--pipeline-status-py, var(--pipeline-status-py-default)) var(--pipeline-status-px, var(--pipeline-status-px-default));
+    gap:                 var(--pipeline-status-gap);
+    padding:             var(--pipeline-status-py) var(--pipeline-status-px);
   }
 
   /* Current stage */
   [data-pipeline-current] {
     display:             flex;
     align-items:         center;
-    gap:                 var(--pipeline-status-column-gap, var(--pipeline-status-column-gap-default));
-    min-height:          var(--pipeline-status-current-min-h, var(--pipeline-status-current-min-h-default));
+    gap:                 var(--pipeline-status-column-gap);
+    min-height:          var(--pipeline-status-current-min-h);
   }
 
   [data-pipeline-label] {
-    font-weight:         var(--pipeline-status-label-weight, var(--pipeline-status-label-weight-default));
-    color:               var(--pipeline-status-label-fg, var(--pipeline-status-label-fg-default));
+    font-weight:         var(--pipeline-status-label-weight);
+    color:               var(--pipeline-status-label-fg);
   }
 
   [data-pipeline-msg] {
-    color:               var(--pipeline-status-msg-fg, var(--pipeline-status-msg-fg-default));
+    color:               var(--pipeline-status-msg-fg);
   }
 
   /* Dot indicator */
   [data-pipeline-dot] {
     flex-shrink:         0;
-    width:               var(--pipeline-status-dot-size, var(--pipeline-status-dot-size-default));
-    height:              var(--pipeline-status-dot-size, var(--pipeline-status-dot-size-default));
+    width:               var(--pipeline-status-dot-size);
+    height:              var(--pipeline-status-dot-size);
     border-radius:       50%;
-    background:          var(--pipeline-status-dot-bg, var(--pipeline-status-dot-bg-default));
-    transition:          background var(--pipeline-status-duration, var(--pipeline-status-duration-default)) var(--pipeline-status-easing, var(--pipeline-status-easing-default));
+    background:          var(--pipeline-status-dot-bg);
+    transition:          background var(--pipeline-status-duration) var(--pipeline-status-easing);
   }
 
   /* State colors: the -active (accent) / -complete (success) dot-bg tokens were
@@ -101,12 +101,12 @@
      stayed the default gray (--a-border). Now active dots read accent + pulse,
      complete dots read success. (bug-40 — "use color more") */
   [data-pipeline-dot="active"] {
-    background:           var(--pipeline-status-dot-bg-active, var(--pipeline-status-dot-bg-active-default));
-    animation:           pipeline-pulse var(--pipeline-status-pulse-duration, var(--pipeline-status-pulse-duration-default)) var(--pipeline-status-pulse-easing, var(--pipeline-status-pulse-easing-default)) infinite;
+    background:           var(--pipeline-status-dot-bg-active);
+    animation:           pipeline-pulse var(--pipeline-status-pulse-duration) var(--pipeline-status-pulse-easing) infinite;
   }
 
   [data-pipeline-dot="complete"] {
-    background:           var(--pipeline-status-dot-bg-complete, var(--pipeline-status-dot-bg-complete-default));
+    background:           var(--pipeline-status-dot-bg-complete);
     animation:           none;
   }
 
@@ -117,14 +117,14 @@
 
   /* Complete state — override tokens only */
   :scope[status="completed"] {
-    --pipeline-status-label-fg-default:       var(--pipeline-status-complete-fg, var(--pipeline-status-complete-fg-default));
-    --pipeline-status-history-border-default: var(--pipeline-status-complete-border, var(--pipeline-status-complete-border-default));
+    --pipeline-status-label-fg:       var(--pipeline-status-complete-fg);
+    --pipeline-status-history-border: var(--pipeline-status-complete-border);
   }
 
   /* History (expandable) */
   [data-pipeline-history] {
-    border-top:          var(--pipeline-status-border-thin, var(--pipeline-status-border-thin-default)) solid var(--pipeline-status-history-border, var(--pipeline-status-history-border-default));
-    padding-top:         var(--pipeline-status-history-pt, var(--pipeline-status-history-pt-default));
+    border-top:          var(--pipeline-status-border-thin) solid var(--pipeline-status-history-border);
+    padding-top:         var(--pipeline-status-history-pt);
   }
 
   [data-pipeline-history][hidden] {
@@ -133,19 +133,19 @@
 
   [data-pipeline-history] summary {
     cursor:              pointer;
-    font-size:           var(--pipeline-status-history-size, var(--pipeline-status-history-size-default));
-    color:               var(--pipeline-status-history-fg, var(--pipeline-status-history-fg-default));
+    font-size:           var(--pipeline-status-history-size);
+    color:               var(--pipeline-status-history-fg);
     user-select:         none;
-    padding:             var(--pipeline-status-history-pad-y, var(--pipeline-status-history-pad-y-default)) var(--a-space-1);
+    padding:             var(--pipeline-status-history-pad-y) var(--a-space-1);
     margin-inline:       calc(var(--a-space-1) * -1);
     border-radius:       var(--a-radius-sm);
-    transition:          background var(--pipeline-status-duration, var(--pipeline-status-duration-default)) var(--pipeline-status-easing, var(--pipeline-status-easing-default)),
-                         color      var(--pipeline-status-duration, var(--pipeline-status-duration-default)) var(--pipeline-status-easing, var(--pipeline-status-easing-default));
+    transition:          background var(--pipeline-status-duration) var(--pipeline-status-easing),
+                         color      var(--pipeline-status-duration) var(--pipeline-status-easing);
   }
 
   [data-pipeline-history] summary:hover {
     background:          var(--a-bg-subtle);
-    color:               var(--pipeline-status-label-fg, var(--pipeline-status-label-fg-default));
+    color:               var(--pipeline-status-label-fg);
   }
 
   [data-pipeline-history] summary:focus-visible {
@@ -154,29 +154,29 @@
   }
 
   [data-pipeline-history] summary::marker {
-    color:               var(--pipeline-status-history-fg, var(--pipeline-status-history-fg-default));
+    color:               var(--pipeline-status-history-fg);
   }
 
   /* Log list */
   [data-pipeline-log] {
     list-style:          none;
     margin:              0;
-    padding:             var(--pipeline-status-log-pt, var(--pipeline-status-log-pt-default)) 0 0 0;
+    padding:             var(--pipeline-status-log-pt) 0 0 0;
     display:             flex;
     flex-direction:      column;
-    gap:                 var(--pipeline-status-log-gap, var(--pipeline-status-log-gap-default));
+    gap:                 var(--pipeline-status-log-gap);
   }
 
   [data-pipeline-log] li {
     display:             flex;
     align-items:         center;
-    gap:                 var(--pipeline-status-column-gap, var(--pipeline-status-column-gap-default));
-    font-size:           var(--pipeline-status-log-size, var(--pipeline-status-log-size-default));
-    color:               var(--pipeline-status-log-fg, var(--pipeline-status-log-fg-default));
+    gap:                 var(--pipeline-status-column-gap);
+    font-size:           var(--pipeline-status-log-size);
+    color:               var(--pipeline-status-log-fg);
   }
 
   [data-pipeline-log] [data-pipeline-dot] {
-    width:               var(--pipeline-status-log-dot-size, var(--pipeline-status-log-dot-size-default));
-    height:              var(--pipeline-status-log-dot-size, var(--pipeline-status-log-dot-size-default));
+    width:               var(--pipeline-status-log-dot-size);
+    height:              var(--pipeline-status-log-dot-size);
   }
 }

package/components/popover/popover.css

@@ -1,15 +1,15 @@
 @scope (popover-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --popover-px-default:      var(--a-space-3);
-    --popover-py-default:      var(--a-space-2);
-    --popover-radius-default:  var(--a-radius-lg);
+    --popover-px:      var(--a-space-3);
+    --popover-py:      var(--a-space-2);
+    --popover-radius:  var(--a-radius-lg);
 
     /* ── Colors (default panel chrome — opt out per `:has(>card-ui)` rule
        below or by setting tokens to transparent / 0) ── */
-    --popover-bg-default:      var(--a-bg-subtle);
-    --popover-border-default:  var(--a-border-subtle);
-    --popover-shadow-default:  var(--a-shadow-lg);
+    --popover-bg:      var(--a-bg-subtle);
+    --popover-border:  var(--a-border-subtle);
+    --popover-shadow:  var(--a-shadow-lg);
   }
 
   :scope {
@@ -77,11 +77,11 @@
      shapes appear in consumer code; both should let the inner surface
      own padding + bg + border + radius + shadow. */
   [slot="content"]:not(card-ui):not(drawer-ui):not(menu-ui):not(:has(> card-ui:only-child)):not(:has(> drawer-ui:only-child)):not(:has(> menu-ui:only-child)) {
-    padding: var(--popover-py, var(--popover-py-default)) var(--popover-px, var(--popover-px-default));
-    background: var(--popover-bg, var(--popover-bg-default));
-    border: 1px solid var(--popover-border, var(--popover-border-default));
-    border-radius: var(--popover-radius, var(--popover-radius-default));
-    box-shadow: var(--popover-shadow, var(--popover-shadow-default));
+    padding: var(--popover-py) var(--popover-px);
+    background: var(--popover-bg);
+    border: 1px solid var(--popover-border);
+    border-radius: var(--popover-radius);
+    box-shadow: var(--popover-shadow);
   }
 
   /* Prose margin reset on the content's edge children — a slotted <p> / <h*>