@adia-ai/web-components 0.6.33 → 0.6.34

package/components/agent-reasoning/agent-reasoning.css

@@ -1,47 +1,47 @@
 @scope (agent-reasoning-ui) {
   :where(:scope) {
     /* Grid — same columns as timeline-ui so they align via subgrid */
-    --agent-reasoning-marker-w:        1rem;
-    --agent-reasoning-gap-col:         var(--a-space-2);
-    --agent-reasoning-gap-row:         var(--a-space-2);
+    --agent-reasoning-marker-w-default:        1rem;
+    --agent-reasoning-gap-col-default:         var(--a-space-2);
+    --agent-reasoning-gap-row-default:         var(--a-space-2);
 
     /* Typography */
-    --agent-reasoning-font:            var(--a-ui-sm);
-    --agent-reasoning-weight-heading:  var(--a-weight-medium);
+    --agent-reasoning-font-default:            var(--a-ui-sm);
+    --agent-reasoning-weight-heading-default:  var(--a-weight-medium);
 
     /* Colors */
-    --agent-reasoning-fg:              var(--a-fg);
-    --agent-reasoning-fg-muted:        var(--a-fg-muted);
-    --agent-reasoning-fg-subtle:       var(--a-fg-subtle);
-    --agent-reasoning-border:          var(--a-border-subtle);
-    --agent-reasoning-spinner-track:   var(--a-border-subtle);
-    --agent-reasoning-spinner-head:    var(--a-accent-bg);
-    --agent-reasoning-iter-bg:         var(--a-bg-subtle);
-    --agent-reasoning-iter-bg-active:  var(--a-bg-muted);
-    --agent-reasoning-iter-border:     var(--a-border-subtle);
+    --agent-reasoning-fg-default:              var(--a-fg);
+    --agent-reasoning-fg-muted-default:        var(--a-fg-muted);
+    --agent-reasoning-fg-subtle-default:       var(--a-fg-subtle);
+    --agent-reasoning-border-default:          var(--a-border-subtle);
+    --agent-reasoning-spinner-track-default:   var(--a-border-subtle);
+    --agent-reasoning-spinner-head-default:    var(--a-accent-bg);
+    --agent-reasoning-iter-bg-default:         var(--a-bg-subtle);
+    --agent-reasoning-iter-bg-active-default:  var(--a-bg-muted);
+    --agent-reasoning-iter-border-default:     var(--a-border-subtle);
 
     /* Sizes */
-    --agent-reasoning-marker-size:     var(--a-icon-size);
-    --agent-reasoning-radius:          var(--a-radius);
-    --agent-reasoning-iter-padding:    var(--a-space-3);
+    --agent-reasoning-marker-size-default:     var(--a-icon-size);
+    --agent-reasoning-radius-default:          var(--a-radius);
+    --agent-reasoning-iter-padding-default:    var(--a-space-3);
 
     /* Motion */
-    --agent-reasoning-duration:        var(--a-duration-fast);
-    --agent-reasoning-easing:          var(--a-easing-out);
-    --agent-reasoning-spin-duration:   0.8s;
+    --agent-reasoning-duration-default:        var(--a-duration-fast);
+    --agent-reasoning-easing-default:          var(--a-easing-out);
+    --agent-reasoning-spin-duration-default:   0.8s;
   }
 
   :scope {
     display: grid;
     grid-template-columns:
-      [marker] var(--agent-reasoning-marker-w)
+      [marker] var(--agent-reasoning-marker-w, var(--agent-reasoning-marker-w-default))
       [content] 1fr
       [aside] auto;
-    column-gap: var(--agent-reasoning-gap-col);
-    row-gap: var(--agent-reasoning-gap-row);
+    column-gap: var(--agent-reasoning-gap-col, var(--agent-reasoning-gap-col-default));
+    row-gap: var(--agent-reasoning-gap-row, var(--agent-reasoning-gap-row-default));
     min-width: 0;
-    font-size: var(--agent-reasoning-font);
-    color: var(--agent-reasoning-fg);
+    font-size: var(--agent-reasoning-font, var(--agent-reasoning-font-default));
+    color: var(--agent-reasoning-fg, var(--agent-reasoning-fg-default));
   }
 
   /* ═══════ Summary row ═══════ */
@@ -54,13 +54,13 @@
     cursor: pointer;
     user-select: none;
     padding-bottom: var(--a-space-1);
-    color: var(--agent-reasoning-fg-muted);
+    color: var(--agent-reasoning-fg-muted, var(--agent-reasoning-fg-muted-default));
     border-radius: var(--a-radius-sm);
-    transition: color var(--agent-reasoning-duration) var(--agent-reasoning-easing);
+    transition: color var(--agent-reasoning-duration, var(--agent-reasoning-duration-default)) var(--agent-reasoning-easing, var(--agent-reasoning-easing-default));
   }
 
   [data-reasoning-summary]:hover {
-    color: var(--agent-reasoning-fg);
+    color: var(--agent-reasoning-fg, var(--agent-reasoning-fg-default));
   }
 
   [data-reasoning-summary]:focus-visible {
@@ -78,22 +78,22 @@
   }
 
   [data-reasoning-spinner] {
-    width: var(--agent-reasoning-marker-size);
-    height: var(--agent-reasoning-marker-size);
-    border: 1.5px solid var(--agent-reasoning-spinner-track);
-    border-top-color: var(--agent-reasoning-spinner-head);
+    width: var(--agent-reasoning-marker-size, var(--agent-reasoning-marker-size-default));
+    height: var(--agent-reasoning-marker-size, var(--agent-reasoning-marker-size-default));
+    border: 1.5px solid var(--agent-reasoning-spinner-track, var(--agent-reasoning-spinner-track-default));
+    border-top-color: var(--agent-reasoning-spinner-head, var(--agent-reasoning-spinner-head-default));
     border-radius: 50%;
-    animation: _ar-spin var(--agent-reasoning-spin-duration) linear infinite;
+    animation: _ar-spin var(--agent-reasoning-spin-duration, var(--agent-reasoning-spin-duration-default)) linear infinite;
     box-sizing: border-box;
   }
 
   [data-reasoning-spinner][data-small] {
-    width: calc(var(--agent-reasoning-marker-size) * 0.75);
-    height: calc(var(--agent-reasoning-marker-size) * 0.75);
+    width: calc(var(--agent-reasoning-marker-size, var(--agent-reasoning-marker-size-default)) * 0.75);
+    height: calc(var(--agent-reasoning-marker-size, var(--agent-reasoning-marker-size-default)) * 0.75);
   }
 
   [data-reasoning-check] {
-    --a-icon-size: var(--agent-reasoning-marker-size);
+    --a-icon-size: var(--agent-reasoning-marker-size, var(--agent-reasoning-marker-size-default));
   }
 
   [data-reasoning-summary] > [data-reasoning-label] {
@@ -110,7 +110,7 @@
     grid-row: 1;
     display: inline-flex;
     align-items: center;
-    gap: var(--agent-reasoning-gap-col);
+    gap: var(--agent-reasoning-gap-col, var(--agent-reasoning-gap-col-default));
     white-space: nowrap;
     font-variant-numeric: tabular-nums;
   }
@@ -121,7 +121,7 @@
     display: grid;
     grid-template-columns: subgrid;
     grid-column: 1 / -1;
-    row-gap: var(--agent-reasoning-gap-row);
+    row-gap: var(--agent-reasoning-gap-row, var(--agent-reasoning-gap-row-default));
   }
 
   [data-reasoning-body][hidden] { display: none; }
@@ -138,15 +138,15 @@
     grid-template-columns: subgrid;
     align-items: center;
     line-height: 1.5;
-    color: var(--agent-reasoning-fg);
-    animation: _ar-fade var(--agent-reasoning-duration) var(--agent-reasoning-easing);
+    color: var(--agent-reasoning-fg, var(--agent-reasoning-fg-default));
+    animation: _ar-fade var(--agent-reasoning-duration, var(--agent-reasoning-duration-default)) var(--agent-reasoning-easing, var(--agent-reasoning-easing-default));
   }
 
   [data-reasoning-thought]::before {
     content: '';
     grid-column: marker;
     height: 1px;
-    background: var(--agent-reasoning-border);
+    background: var(--agent-reasoning-border, var(--agent-reasoning-border-default));
     align-self: center;
     width: 100%;
   }
@@ -165,24 +165,24 @@
     flex-direction: column;
     gap: var(--a-space-1);
     padding: var(--a-space-2) var(--a-space-3);
-    border: 1px solid var(--agent-reasoning-border);
-    border-radius: var(--agent-reasoning-radius);
-    background: var(--agent-reasoning-iter-bg);
+    border: 1px solid var(--agent-reasoning-border, var(--agent-reasoning-border-default));
+    border-radius: var(--agent-reasoning-radius, var(--agent-reasoning-radius-default));
+    background: var(--agent-reasoning-iter-bg, var(--agent-reasoning-iter-bg-default));
   }
 
   [data-reasoning-plan-label] {
-    font-size: var(--agent-reasoning-font);
-    color: var(--agent-reasoning-fg-subtle);
+    font-size: var(--agent-reasoning-font, var(--agent-reasoning-font-default));
+    color: var(--agent-reasoning-fg-subtle, var(--agent-reasoning-fg-subtle-default));
     text-transform: uppercase;
     letter-spacing: 0.04em;
-    font-weight: var(--agent-reasoning-weight-heading);
+    font-weight: var(--agent-reasoning-weight-heading, var(--agent-reasoning-weight-heading-default));
   }
 
   [data-reasoning-plan-list] {
     margin: 0;
     padding-inline-start: var(--a-space-5);
-    font-size: var(--agent-reasoning-font);
-    color: var(--agent-reasoning-fg);
+    font-size: var(--agent-reasoning-font, var(--agent-reasoning-font-default));
+    color: var(--agent-reasoning-fg, var(--agent-reasoning-fg-default));
   }
 
   [data-reasoning-plan-list] > li {
@@ -194,19 +194,19 @@
   [data-reasoning-iteration] {
     display: grid;
     grid-template-columns:
-      [marker] var(--agent-reasoning-marker-w)
+      [marker] var(--agent-reasoning-marker-w, var(--agent-reasoning-marker-w-default))
       [content] 1fr
       [aside] auto;
-    column-gap: var(--agent-reasoning-gap-col);
+    column-gap: var(--agent-reasoning-gap-col, var(--agent-reasoning-gap-col-default));
     row-gap: var(--a-space-2);
-    padding: var(--agent-reasoning-iter-padding);
-    border: 1px solid var(--agent-reasoning-iter-border);
-    border-radius: var(--agent-reasoning-radius);
-    background: var(--agent-reasoning-iter-bg);
+    padding: var(--agent-reasoning-iter-padding, var(--agent-reasoning-iter-padding-default));
+    border: 1px solid var(--agent-reasoning-iter-border, var(--agent-reasoning-iter-border-default));
+    border-radius: var(--agent-reasoning-radius, var(--agent-reasoning-radius-default));
+    background: var(--agent-reasoning-iter-bg, var(--agent-reasoning-iter-bg-default));
   }
 
   [data-reasoning-iteration][data-active] {
-    background: var(--agent-reasoning-iter-bg-active);
+    background: var(--agent-reasoning-iter-bg-active, var(--agent-reasoning-iter-bg-active-default));
   }
 
   [data-reasoning-iter-header] {
@@ -214,7 +214,7 @@
     grid-template-columns: subgrid;
     grid-column: 1 / -1;
     align-items: center;
-    color: var(--agent-reasoning-fg-muted);
+    color: var(--agent-reasoning-fg-muted, var(--agent-reasoning-fg-muted-default));
   }
 
   [data-reasoning-iter-header] > [data-reasoning-spinner],
@@ -227,8 +227,8 @@
   [data-reasoning-iter-n] {
     grid-column: content;
     font-variant-numeric: tabular-nums;
-    color: var(--agent-reasoning-fg-subtle);
-    font-weight: var(--agent-reasoning-weight-heading);
+    color: var(--agent-reasoning-fg-subtle, var(--agent-reasoning-fg-subtle-default));
+    font-weight: var(--agent-reasoning-weight-heading, var(--agent-reasoning-weight-heading-default));
     white-space: nowrap;
   }
 
@@ -236,7 +236,7 @@
     grid-column: content;
     justify-self: start;
     margin-inline-start: var(--a-space-2);
-    color: var(--agent-reasoning-fg);
+    color: var(--agent-reasoning-fg, var(--agent-reasoning-fg-default));
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -261,10 +261,10 @@
   }
 
   [data-reasoning-iter-summary] {
-    color: var(--agent-reasoning-fg-muted);
+    color: var(--agent-reasoning-fg-muted, var(--agent-reasoning-fg-muted-default));
     font-variant-numeric: tabular-nums;
     white-space: nowrap;
-    font-size: var(--agent-reasoning-font);
+    font-size: var(--agent-reasoning-font, var(--agent-reasoning-font-default));
   }
 
   /* ═══════ Animations ═══════ */

package/components/agent-suggestions/agent-suggestions.css

@@ -1,14 +1,14 @@
 @scope (agent-suggestions-ui) {
   :where(:scope) {
-    --agent-suggestions-gap:     var(--a-space-2);
-    --agent-suggestions-padding: var(--a-space-2);
+    --agent-suggestions-gap-default:     var(--a-space-2);
+    --agent-suggestions-padding-default: var(--a-space-2);
   }
 
   :scope {
     display: flex;
     flex-wrap: wrap;
-    gap: var(--agent-suggestions-gap);
-    padding-block: var(--agent-suggestions-padding);
+    gap: var(--agent-suggestions-gap, var(--agent-suggestions-gap-default));
+    padding-block: var(--agent-suggestions-padding, var(--agent-suggestions-padding-default));
   }
 
   :scope[disabled] {

package/components/agent-trace/agent-trace.css

@@ -1,56 +1,56 @@
 @scope (agent-trace-ui) {
   :where(:scope) {
     /* ── Typography ── */
-    --agent-trace-font:          var(--a-ui-sm);
-    --agent-trace-label-font:    var(--a-ui-sm);
+    --agent-trace-font-default:          var(--a-ui-sm);
+    --agent-trace-label-font-default:    var(--a-ui-sm);
 
     /* ── Colors ── */
-    --agent-trace-fg:            var(--a-fg);
-    --agent-trace-fg-muted:      var(--a-fg-muted);
-    --agent-trace-fg-subtle:     var(--a-fg-subtle);
-    --agent-trace-sep:           var(--a-fg-subtle);
-    --agent-trace-border:        var(--a-border-subtle);
+    --agent-trace-fg-default:            var(--a-fg);
+    --agent-trace-fg-muted-default:      var(--a-fg-muted);
+    --agent-trace-fg-subtle-default:     var(--a-fg-subtle);
+    --agent-trace-sep-default:           var(--a-fg-subtle);
+    --agent-trace-border-default:        var(--a-border-subtle);
 
     /* ── Layout ── */
-    --agent-trace-pill-gap:      var(--a-space-1);
-    --agent-trace-inline-gap:    var(--a-space-2);
-    --agent-trace-block-gap:     var(--a-space-3);
-    --agent-trace-padding-y:     var(--a-space-2);
+    --agent-trace-pill-gap-default:      var(--a-space-1);
+    --agent-trace-inline-gap-default:    var(--a-space-2);
+    --agent-trace-block-gap-default:     var(--a-space-3);
+    --agent-trace-padding-y-default:     var(--a-space-2);
     /* Component-intrinsic measurement; no --a-space-* equivalent */
-    --agent-trace-dot-size:      6px;
+    --agent-trace-dot-size-default:      6px;
     /* STAGE column width — `max-content` lets the longest label set the
        track so multi-word labels ("Rows returned", "Query duration",
        "Drift vs. SFDC") stay on one line; the `7rem` floor stops the
        column from collapsing when only short labels are present. */
-    --agent-trace-row-label-col: minmax(7rem, max-content);
+    --agent-trace-row-label-col-default: minmax(7rem, max-content);
     /* Shared across every detail DL so values tabulate at the same x. */
-    --agent-trace-detail-label-col: 9rem;
+    --agent-trace-detail-label-col-default: 9rem;
 
     /* ── Motion ── */
-    --agent-trace-chevron-dur:   var(--a-duration-fast);
+    --agent-trace-chevron-dur-default:   var(--a-duration-fast);
   }
 
   :scope {
     display: block;
-    font-size: var(--agent-trace-font);
-    color: var(--agent-trace-fg-muted);
+    font-size: var(--agent-trace-font, var(--agent-trace-font-default));
+    color: var(--agent-trace-fg-muted, var(--agent-trace-fg-muted-default));
   }
 
   [data-trace-root] {
-    padding-block: var(--agent-trace-padding-y);
+    padding-block: var(--agent-trace-padding-y, var(--agent-trace-padding-y-default));
   }
 
   [data-trace-root] > summary {
     list-style: none;
     display: flex;
     align-items: center;
-    gap: var(--agent-trace-inline-gap);
+    gap: var(--agent-trace-inline-gap, var(--agent-trace-inline-gap-default));
     cursor: pointer;
     white-space: nowrap;
     border-radius: var(--a-radius-sm);
     padding: var(--a-space-0-5) var(--a-space-1);
     margin: calc(var(--a-space-0-5) * -1) calc(var(--a-space-1) * -1);
-    transition: background var(--agent-trace-chevron-dur);
+    transition: background var(--agent-trace-chevron-dur, var(--agent-trace-chevron-dur-default));
   }
 
   [data-trace-root] > summary:hover {
@@ -70,7 +70,7 @@
     min-width: 0;
     display: flex;
     align-items: center;
-    gap: var(--agent-trace-inline-gap);
+    gap: var(--agent-trace-inline-gap, var(--agent-trace-inline-gap-default));
     overflow: hidden;
     text-overflow: ellipsis;
     font-variant-numeric: tabular-nums;
@@ -79,24 +79,24 @@
   [data-trace-pill] {
     display: inline-flex;
     align-items: center;
-    gap: var(--agent-trace-pill-gap);
+    gap: var(--agent-trace-pill-gap, var(--agent-trace-pill-gap-default));
     white-space: nowrap;
   }
 
   [data-trace-dot] {
-    --a-icon-size: var(--agent-trace-dot-size);
+    --a-icon-size: var(--agent-trace-dot-size, var(--agent-trace-dot-size-default));
     flex-shrink: 0;
     line-height: 0;
   }
 
   [data-trace-sep] {
-    color: var(--agent-trace-sep);
+    color: var(--agent-trace-sep, var(--agent-trace-sep-default));
     margin-inline: 2px;
   }
 
   [data-trace-chevron] {
     flex-shrink: 0;
-    transition: transform var(--agent-trace-chevron-dur);
+    transition: transform var(--agent-trace-chevron-dur, var(--agent-trace-chevron-dur-default));
   }
 
   [data-trace-root][open] [data-trace-chevron] {
@@ -106,8 +106,8 @@
   [data-trace-body] {
     display: flex;
     flex-direction: column;
-    gap: var(--agent-trace-block-gap);
-    margin-block-start: var(--agent-trace-block-gap);
+    gap: var(--agent-trace-block-gap, var(--agent-trace-block-gap-default));
+    margin-block-start: var(--agent-trace-block-gap, var(--agent-trace-block-gap-default));
   }
 
   /* Rows container — one grid, every row participates via subgrid.
@@ -128,14 +128,14 @@
        previously-empty right edge becomes the alignment edge for detail
        text. The whitespace between SCORE and DETAIL reads as breathing
        room between key-value and qualifier rather than dead air. */
-    --trace-row-cols: var(--agent-trace-row-label-col) max-content 1fr;
+    --trace-row-cols: var(--agent-trace-row-label-col, var(--agent-trace-row-label-col-default)) max-content 1fr;
     display: grid;
     grid-template-columns: var(--trace-row-cols);
-    column-gap: var(--agent-trace-block-gap);
+    column-gap: var(--agent-trace-block-gap, var(--agent-trace-block-gap-default));
   }
 
   [data-trace-rows][data-has-details] {
-    --trace-row-cols: var(--agent-trace-row-label-col) max-content 1fr auto;
+    --trace-row-cols: var(--agent-trace-row-label-col, var(--agent-trace-row-label-col-default)) max-content 1fr auto;
   }
 
   /* Each row + the headers row + each <details>'s <summary> all use
@@ -148,7 +148,7 @@
     display: grid;
     grid-template-columns: subgrid;
     grid-column: 1 / -1;
-    column-gap: var(--agent-trace-block-gap);
+    column-gap: var(--agent-trace-block-gap, var(--agent-trace-block-gap-default));
     align-items: baseline;
     min-width: 0;
   }
@@ -160,16 +160,16 @@
   /* Column headers — small caps with subtle underline */
   [data-trace-headers] {
     padding-block-end: var(--a-space-1);
-    border-block-end: 1px solid var(--agent-trace-border);
+    border-block-end: 1px solid var(--agent-trace-border, var(--agent-trace-border-default));
     margin-block-end: var(--a-space-1);
   }
 
   [data-trace-header] {
-    font-size: calc(var(--agent-trace-font) * 0.85);
+    font-size: calc(var(--agent-trace-font, var(--agent-trace-font-default)) * 0.85);
     text-transform: uppercase;
     letter-spacing: 0.06em;
     font-weight: var(--a-weight-medium);
-    color: var(--agent-trace-fg-subtle);
+    color: var(--agent-trace-fg-subtle, var(--agent-trace-fg-subtle-default));
   }
 
   [data-trace-header]:nth-of-type(2),
@@ -204,13 +204,13 @@
   }
 
   [data-trace-label] {
-    color: var(--agent-trace-fg-subtle);
+    color: var(--agent-trace-fg-subtle, var(--agent-trace-fg-subtle-default));
   }
 
   [data-trace-value] {
     font-variant-numeric: tabular-nums;
     text-align: right;
-    color: var(--agent-trace-fg);
+    color: var(--agent-trace-fg, var(--agent-trace-fg-default));
   }
 
   [data-trace-aux] {
@@ -218,7 +218,7 @@
        of the row. Without this, the 1fr detail column left-aligns its
        content (typically a 1-3 word qualifier like "warehouse" or
        "reconciled") and the rest of the column reads as dead width. */
-    color: var(--agent-trace-fg-muted);
+    color: var(--agent-trace-fg-muted, var(--agent-trace-fg-muted-default));
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -231,7 +231,7 @@
     justify-self: end;
     align-self: center;
     transition: transform var(--a-duration-fast) var(--agent-trace-chevron-dur, var(--a-duration-fast));
-    color: var(--agent-trace-fg-muted);
+    color: var(--agent-trace-fg-muted, var(--agent-trace-fg-muted-default));
   }
 
   details[data-trace-row][open] > summary > [data-trace-row-chevron] {
@@ -250,27 +250,27 @@
   [data-trace-row-body] {
     margin-block: var(--a-space-1) var(--a-space-2);
     margin-inline-start: var(--a-space-2);
-    padding-inline-start: var(--agent-trace-block-gap);
-    border-inline-start: 1px solid var(--agent-trace-border);
+    padding-inline-start: var(--agent-trace-block-gap, var(--agent-trace-block-gap-default));
+    border-inline-start: 1px solid var(--agent-trace-border, var(--agent-trace-border-default));
   }
 
   [data-trace-dl] {
     display: grid;
-    grid-template-columns: var(--agent-trace-detail-label-col) 1fr;
-    column-gap: var(--agent-trace-block-gap);
+    grid-template-columns: var(--agent-trace-detail-label-col, var(--agent-trace-detail-label-col-default)) 1fr;
+    column-gap: var(--agent-trace-block-gap, var(--agent-trace-block-gap-default));
     row-gap: var(--a-space-0-5);
     margin: 0;
     align-items: baseline;
   }
 
   [data-trace-dl] > dt {
-    color: var(--agent-trace-fg-subtle);
-    font-size: calc(var(--agent-trace-font) * 0.95);
+    color: var(--agent-trace-fg-subtle, var(--agent-trace-fg-subtle-default));
+    font-size: calc(var(--agent-trace-font, var(--agent-trace-font-default)) * 0.95);
   }
 
   [data-trace-dl] > dd {
     margin: 0;
-    color: var(--agent-trace-fg);
+    color: var(--agent-trace-fg, var(--agent-trace-fg-default));
     font-variant-numeric: tabular-nums;
     min-width: 0;
     overflow-wrap: break-word;
@@ -280,13 +280,13 @@
     display: flex;
     flex-direction: column;
     gap: var(--a-space-1);
-    padding-block-start: var(--agent-trace-inline-gap);
-    border-block-start: 1px solid var(--agent-trace-border);
+    padding-block-start: var(--agent-trace-inline-gap, var(--agent-trace-inline-gap-default));
+    border-block-start: 1px solid var(--agent-trace-border, var(--agent-trace-border-default));
   }
 
   [data-trace-feedback-label] {
-    color: var(--agent-trace-fg-subtle);
-    font-size: calc(var(--agent-trace-label-font) * 0.85);
+    color: var(--agent-trace-fg-subtle, var(--agent-trace-fg-subtle-default));
+    font-size: calc(var(--agent-trace-label-font, var(--agent-trace-label-font-default)) * 0.85);
     font-weight: var(--a-weight-medium);
     text-transform: uppercase;
     letter-spacing: 0.06em;
@@ -299,11 +299,11 @@
   [data-trace-feedback] [data-trace-line] {
     display: grid;
     grid-template-columns: 1em 1fr;
-    column-gap: var(--agent-trace-inline-gap);
+    column-gap: var(--agent-trace-inline-gap, var(--agent-trace-inline-gap-default));
     align-items: baseline;
     line-height: 1.5;
-    font-size: var(--agent-trace-font);
-    color: var(--agent-trace-fg);
+    font-size: var(--agent-trace-font, var(--agent-trace-font-default));
+    color: var(--agent-trace-fg, var(--agent-trace-fg-default));
   }
 
   [data-trace-feedback] [data-trace-line] > icon-ui {
@@ -315,6 +315,6 @@
   [data-trace-feedback] [data-trace-line] > span {
     min-width: 0;
     overflow-wrap: break-word;
-    color: var(--agent-trace-fg-muted);
+    color: var(--agent-trace-fg-muted, var(--agent-trace-fg-muted-default));
   }
 }