@adia-ai/web-components 0.6.33 → 0.6.35

package/components/chart/chart.css

@@ -1,68 +1,68 @@
 @scope (chart-ui) {
   :where(:scope) {
     /* ── Tokens ── */
-    --chart-font:           var(--a-font-family);
-    --chart-font-size:      var(--a-ui-sm);
+    --chart-font-default:           var(--a-font-family);
+    --chart-font-size-default:      var(--a-ui-sm);
     /* NOTE — `--chart-currency-prefix` is intentionally NOT declared here.
        Declaring a default at `:where(:scope)` would shadow ancestor values
        via the cascade (the child's explicit declaration wins over an
        inherited ancestor value, regardless of specificity). Instead,
        chart.js's `#fmtValue()` falls back to `'$'` when the computed
-       value is empty — so ancestors can set `--chart-currency-prefix: "€"`
+       value is empty — so ancestors can set `--chart-currency-prefix-default: "€"`
        and the chart inherits that value naturally. To register the
        default formally (and enable transitions), add an `@property` rule
        at `:root` in a global stylesheet. */
-    --chart-fg:             var(--a-fg);
-    --chart-bar:            var(--a-accent);
-    --chart-bar-hover:      var(--a-accent-bg-hover);
-    --chart-line:           var(--a-accent);
-    --chart-dot:            var(--a-accent);
-    --chart-grid:           var(--a-border-subtle);
-    --chart-axis:           var(--a-fg-muted);
-    --chart-label:          var(--a-fg-subtle);
-    --chart-value:          var(--a-fg);
-    --chart-avg:            var(--a-warning);
-    --chart-area-opacity:   0.15;
-    --chart-line-width:     2;
-    --chart-radius:         4;
+    --chart-fg-default:             var(--a-fg);
+    --chart-bar-default:            var(--a-accent);
+    --chart-bar-hover-default:      var(--a-accent-bg-hover);
+    --chart-line-default:           var(--a-accent);
+    --chart-dot-default:            var(--a-accent);
+    --chart-grid-default:           var(--a-border-subtle);
+    --chart-axis-default:           var(--a-fg-muted);
+    --chart-label-default:          var(--a-fg-subtle);
+    --chart-value-default:          var(--a-fg);
+    --chart-avg-default:            var(--a-warning);
+    --chart-area-opacity-default:   0.15;
+    --chart-line-width-default:     2;
+    --chart-radius-default:         4;
 
     /* Layout */
-    --chart-border:         var(--a-border-subtle);
-    --chart-space-sm:       var(--a-space-1);
-    --chart-space-md:       var(--a-space-2);
-    --chart-space-lg:       var(--a-space-3);
-    --chart-dot-stroke:     var(--a-bg);
-    --chart-max-height:     28rem;
+    --chart-border-default:         var(--a-border-subtle);
+    --chart-space-sm-default:       var(--a-space-1);
+    --chart-space-md-default:       var(--a-space-2);
+    --chart-space-lg-default:       var(--a-space-3);
+    --chart-dot-stroke-default:     var(--a-bg);
+    --chart-max-height-default:     28rem;
 
     /* Legend */
-    --chart-legend-size:    var(--a-ui-tiny);
-    --chart-legend-dot-size: var(--a-space-2-5);
+    --chart-legend-size-default:    var(--a-ui-tiny);
+    --chart-legend-dot-size-default: var(--a-space-2-5);
 
     /* Gap between slices. Read from JS at render time (getComputedStyle) — intentional cross-layer parameter. */
-    --chart-segments-gap:   2px;
-    --chart-pie-gap:        1.25px;
+    --chart-segments-gap-default:   2px;
+    --chart-pie-gap-default:        1.25px;
 
     /* Heading */
-    --chart-heading-size:     var(--a-ui-size);
-    --chart-heading-weight:   var(--a-weight-medium);
+    --chart-heading-size-default:     var(--a-ui-size);
+    --chart-heading-weight-default:   var(--a-weight-medium);
 
     /* Transitions */
-    --chart-duration:       var(--a-duration-fast);
-    --chart-easing:         var(--a-easing);
+    --chart-duration-default:       var(--a-duration-fast);
+    --chart-easing-default:         var(--a-easing);
 
     /* ── Categorical palette (10 slots) ──
        All 10 slots alias the shared data palette in tokens.css. See
        `--a-data-*` for the rationale behind theme-stable data colors. */
-    --chart-0:  var(--a-data-0);
-    --chart-1:  var(--a-data-1);
-    --chart-2:  var(--a-data-2);
-    --chart-3:  var(--a-data-3);
-    --chart-4:  var(--a-data-4);
-    --chart-5:  var(--a-data-5);
-    --chart-6:  var(--a-data-6);
-    --chart-7:  var(--a-data-7);
-    --chart-8:  var(--a-data-8);
-    --chart-9:  var(--a-data-9);
+    --chart-0-default:  var(--a-data-0);
+    --chart-1-default:  var(--a-data-1);
+    --chart-2-default:  var(--a-data-2);
+    --chart-3-default:  var(--a-data-3);
+    --chart-4-default:  var(--a-data-4);
+    --chart-5-default:  var(--a-data-5);
+    --chart-6-default:  var(--a-data-6);
+    --chart-7-default:  var(--a-data-7);
+    --chart-8-default:  var(--a-data-8);
+    --chart-9-default:  var(--a-data-9);
   }
 
   /* ── Base ── */
@@ -72,9 +72,9 @@
     display: flex;
     flex-direction: column;
     width: 100%;
-    max-height: var(--chart-max-height);
+    max-height: var(--chart-max-height, var(--chart-max-height-default));
     min-height: 0;
-    font-family: var(--chart-font);
+    font-family: var(--chart-font, var(--chart-font-default));
     position: relative;
     container-type: inline-size;
     container-name: chart;
@@ -136,8 +136,8 @@
   :scope[resize] {
     resize: both;
     overflow: hidden;
-    border: 1px dashed var(--chart-border);
-    padding: var(--chart-space-md);
+    border: 1px dashed var(--chart-border, var(--chart-border-default));
+    padding: var(--chart-space-md, var(--chart-space-md-default));
   }
 
   /* ── SVG ── */
@@ -153,16 +153,16 @@
   /* ── Heading ── */
 
   [data-chart-heading] {
-    font-size: var(--chart-heading-size);
-    font-weight: var(--chart-heading-weight);
-    color: var(--chart-fg);
-    margin-bottom: var(--chart-space-md);
+    font-size: var(--chart-heading-size, var(--chart-heading-size-default));
+    font-weight: var(--chart-heading-weight, var(--chart-heading-weight-default));
+    color: var(--chart-fg, var(--chart-fg-default));
+    margin-bottom: var(--chart-space-md, var(--chart-space-md-default));
   }
 
   /* ── Grid lines ── */
 
   [data-grid] {
-    stroke: var(--chart-grid);
+    stroke: var(--chart-grid, var(--chart-grid-default));
     stroke-width: 1;
     fill: none;
   }
@@ -170,33 +170,33 @@
   /* ── Y-axis labels ── */
 
   [data-y-label] {
-    font-size: var(--chart-font-size);
-    fill: var(--chart-axis);
-    font-family: var(--chart-font);
+    font-size: var(--chart-font-size, var(--chart-font-size-default));
+    fill: var(--chart-axis, var(--chart-axis-default));
+    font-family: var(--chart-font, var(--chart-font-default));
   }
 
   /* ── X-axis labels ── */
 
   [data-x-label] {
-    font-size: var(--chart-font-size);
-    fill: var(--chart-label);
-    font-family: var(--chart-font);
+    font-size: var(--chart-font-size, var(--chart-font-size-default));
+    fill: var(--chart-label, var(--chart-label-default));
+    font-family: var(--chart-font, var(--chart-font-default));
   }
 
   /* ── Value labels ── */
 
   [data-value] {
-    font-size: var(--chart-font-size);
+    font-size: var(--chart-font-size, var(--chart-font-size-default));
     font-weight: 600;
-    fill: var(--chart-value);
-    font-family: var(--chart-font);
+    fill: var(--chart-value, var(--chart-value-default));
+    font-family: var(--chart-font, var(--chart-font-default));
   }
 
   /* ── Bar ── */
 
   [data-bar] {
-    fill: var(--chart-bar);
-    transition: opacity var(--chart-duration) var(--chart-easing);
+    fill: var(--chart-bar, var(--chart-bar-default));
+    transition: opacity var(--chart-duration, var(--chart-duration-default)) var(--chart-easing, var(--chart-easing-default));
   }
 
   [data-bar]:hover {
@@ -206,8 +206,8 @@
   /* ── Line ── */
 
   [data-line] {
-    stroke: var(--chart-line);
-    stroke-width: var(--chart-line-width);
+    stroke: var(--chart-line, var(--chart-line-default));
+    stroke-width: var(--chart-line-width, var(--chart-line-width-default));
     fill: none;
     stroke-linejoin: round;
     stroke-linecap: round;
@@ -220,9 +220,9 @@
      controls the top stop's strength. */
 
   [data-area] {
-    fill: var(--chart-line);
+    fill: var(--chart-line, var(--chart-line-default));
     stroke: none;
-    opacity: var(--chart-area-opacity);
+    opacity: var(--chart-area-opacity, var(--chart-area-opacity-default));
     mask-image: linear-gradient(to bottom, black, transparent);
     -webkit-mask-image: linear-gradient(to bottom, black, transparent);
   }
@@ -230,11 +230,11 @@
   /* ── Dots ── */
 
   [data-dot] {
-    fill: var(--chart-dot);
-    stroke: var(--chart-dot-stroke);
+    fill: var(--chart-dot, var(--chart-dot-default));
+    stroke: var(--chart-dot-stroke, var(--chart-dot-stroke-default));
     stroke-width: 2;
     r: 3;
-    transition: r var(--chart-duration) var(--chart-easing);
+    transition: r var(--chart-duration, var(--chart-duration-default)) var(--chart-easing, var(--chart-easing-default));
   }
 
   [data-dot]:hover {
@@ -244,49 +244,49 @@
   /* ── Average line ── */
 
   [data-avg] {
-    stroke: var(--chart-avg);
+    stroke: var(--chart-avg, var(--chart-avg-default));
     stroke-dasharray: 6 3;
     stroke-width: 1.5;
   }
 
   [data-avg-label] {
-    fill: var(--chart-avg);
-    font-family: var(--chart-font);
+    fill: var(--chart-avg, var(--chart-avg-default));
+    font-family: var(--chart-font, var(--chart-font-default));
     font-weight: 600;
   }
 
   /* ── Radar ── */
 
   [data-radar-fill] {
-    fill: var(--chart-line);
-    opacity: var(--chart-area-opacity);
+    fill: var(--chart-line, var(--chart-line-default));
+    opacity: var(--chart-area-opacity, var(--chart-area-opacity-default));
     stroke: none;
   }
 
   [data-radar-line] {
-    stroke: var(--chart-line);
-    stroke-width: var(--chart-line-width);
+    stroke: var(--chart-line, var(--chart-line-default));
+    stroke-width: var(--chart-line-width, var(--chart-line-width-default));
     fill: none;
     stroke-linejoin: round;
   }
 
   /* ═══════ Pie / Donut slices ═══════ */
 
-  [data-slice="0"] { fill: var(--chart-0); }
-  [data-slice="1"] { fill: var(--chart-1); }
-  [data-slice="2"] { fill: var(--chart-2); }
-  [data-slice="3"] { fill: var(--chart-3); }
-  [data-slice="4"] { fill: var(--chart-4); }
-  [data-slice="5"] { fill: var(--chart-5); }
-  [data-slice="6"] { fill: var(--chart-6); }
-  [data-slice="7"] { fill: var(--chart-7); }
-  [data-slice="8"] { fill: var(--chart-8); }
-  [data-slice="9"] { fill: var(--chart-9); }
+  [data-slice="0"] { fill: var(--chart-0, var(--chart-0-default)); }
+  [data-slice="1"] { fill: var(--chart-1, var(--chart-1-default)); }
+  [data-slice="2"] { fill: var(--chart-2, var(--chart-2-default)); }
+  [data-slice="3"] { fill: var(--chart-3, var(--chart-3-default)); }
+  [data-slice="4"] { fill: var(--chart-4, var(--chart-4-default)); }
+  [data-slice="5"] { fill: var(--chart-5, var(--chart-5-default)); }
+  [data-slice="6"] { fill: var(--chart-6, var(--chart-6-default)); }
+  [data-slice="7"] { fill: var(--chart-7, var(--chart-7-default)); }
+  [data-slice="8"] { fill: var(--chart-8, var(--chart-8-default)); }
+  [data-slice="9"] { fill: var(--chart-9, var(--chart-9-default)); }
 
   path[data-slice],
   circle[data-slice] {
     stroke: none;
-    transition: opacity var(--chart-duration) var(--chart-easing);
+    transition: opacity var(--chart-duration, var(--chart-duration-default)) var(--chart-easing, var(--chart-easing-default));
   }
 
   path[data-slice]:hover,
@@ -296,7 +296,7 @@
 
   /* Slice-colored bars (stacked/grouped) */
   rect[data-slice] {
-    transition: opacity var(--chart-duration) var(--chart-easing);
+    transition: opacity var(--chart-duration, var(--chart-duration-default)) var(--chart-easing, var(--chart-easing-default));
   }
 
   rect[data-slice]:hover {
@@ -304,55 +304,55 @@
   }
 
   /* Slice-colored lines (multi-line) */
-  [data-line][data-slice="0"] { stroke: var(--chart-0); }
-  [data-line][data-slice="1"] { stroke: var(--chart-1); }
-  [data-line][data-slice="2"] { stroke: var(--chart-2); }
-  [data-line][data-slice="3"] { stroke: var(--chart-3); }
-  [data-line][data-slice="4"] { stroke: var(--chart-4); }
-  [data-line][data-slice="5"] { stroke: var(--chart-5); }
-  [data-line][data-slice="6"] { stroke: var(--chart-6); }
-  [data-line][data-slice="7"] { stroke: var(--chart-7); }
-  [data-line][data-slice="8"] { stroke: var(--chart-8); }
-  [data-line][data-slice="9"] { stroke: var(--chart-9); }
+  [data-line][data-slice="0"] { stroke: var(--chart-0, var(--chart-0-default)); }
+  [data-line][data-slice="1"] { stroke: var(--chart-1, var(--chart-1-default)); }
+  [data-line][data-slice="2"] { stroke: var(--chart-2, var(--chart-2-default)); }
+  [data-line][data-slice="3"] { stroke: var(--chart-3, var(--chart-3-default)); }
+  [data-line][data-slice="4"] { stroke: var(--chart-4, var(--chart-4-default)); }
+  [data-line][data-slice="5"] { stroke: var(--chart-5, var(--chart-5-default)); }
+  [data-line][data-slice="6"] { stroke: var(--chart-6, var(--chart-6-default)); }
+  [data-line][data-slice="7"] { stroke: var(--chart-7, var(--chart-7-default)); }
+  [data-line][data-slice="8"] { stroke: var(--chart-8, var(--chart-8-default)); }
+  [data-line][data-slice="9"] { stroke: var(--chart-9, var(--chart-9-default)); }
 
   [data-line][data-slice] {
     fill: none;
-    stroke-width: var(--chart-line-width);
+    stroke-width: var(--chart-line-width, var(--chart-line-width-default));
     stroke-linejoin: round;
     stroke-linecap: round;
   }
 
   /* Slice-colored areas (multi-line) */
-  [data-area][data-slice="0"] { fill: var(--chart-0); }
-  [data-area][data-slice="1"] { fill: var(--chart-1); }
-  [data-area][data-slice="2"] { fill: var(--chart-2); }
-  [data-area][data-slice="3"] { fill: var(--chart-3); }
-  [data-area][data-slice="4"] { fill: var(--chart-4); }
-  [data-area][data-slice="5"] { fill: var(--chart-5); }
-  [data-area][data-slice="6"] { fill: var(--chart-6); }
-  [data-area][data-slice="7"] { fill: var(--chart-7); }
-  [data-area][data-slice="8"] { fill: var(--chart-8); }
-  [data-area][data-slice="9"] { fill: var(--chart-9); }
+  [data-area][data-slice="0"] { fill: var(--chart-0, var(--chart-0-default)); }
+  [data-area][data-slice="1"] { fill: var(--chart-1, var(--chart-1-default)); }
+  [data-area][data-slice="2"] { fill: var(--chart-2, var(--chart-2-default)); }
+  [data-area][data-slice="3"] { fill: var(--chart-3, var(--chart-3-default)); }
+  [data-area][data-slice="4"] { fill: var(--chart-4, var(--chart-4-default)); }
+  [data-area][data-slice="5"] { fill: var(--chart-5, var(--chart-5-default)); }
+  [data-area][data-slice="6"] { fill: var(--chart-6, var(--chart-6-default)); }
+  [data-area][data-slice="7"] { fill: var(--chart-7, var(--chart-7-default)); }
+  [data-area][data-slice="8"] { fill: var(--chart-8, var(--chart-8-default)); }
+  [data-area][data-slice="9"] { fill: var(--chart-9, var(--chart-9-default)); }
 
   [data-area][data-slice] {
-    opacity: var(--chart-area-opacity);
+    opacity: var(--chart-area-opacity, var(--chart-area-opacity-default));
     stroke: none;
   }
 
   /* Slice-colored dots (multi-line) */
-  circle[data-slice="0"] { fill: var(--chart-0); }
-  circle[data-slice="1"] { fill: var(--chart-1); }
-  circle[data-slice="2"] { fill: var(--chart-2); }
-  circle[data-slice="3"] { fill: var(--chart-3); }
-  circle[data-slice="4"] { fill: var(--chart-4); }
-  circle[data-slice="5"] { fill: var(--chart-5); }
-  circle[data-slice="6"] { fill: var(--chart-6); }
-  circle[data-slice="7"] { fill: var(--chart-7); }
-  circle[data-slice="8"] { fill: var(--chart-8); }
-  circle[data-slice="9"] { fill: var(--chart-9); }
+  circle[data-slice="0"] { fill: var(--chart-0, var(--chart-0-default)); }
+  circle[data-slice="1"] { fill: var(--chart-1, var(--chart-1-default)); }
+  circle[data-slice="2"] { fill: var(--chart-2, var(--chart-2-default)); }
+  circle[data-slice="3"] { fill: var(--chart-3, var(--chart-3-default)); }
+  circle[data-slice="4"] { fill: var(--chart-4, var(--chart-4-default)); }
+  circle[data-slice="5"] { fill: var(--chart-5, var(--chart-5-default)); }
+  circle[data-slice="6"] { fill: var(--chart-6, var(--chart-6-default)); }
+  circle[data-slice="7"] { fill: var(--chart-7, var(--chart-7-default)); }
+  circle[data-slice="8"] { fill: var(--chart-8, var(--chart-8-default)); }
+  circle[data-slice="9"] { fill: var(--chart-9, var(--chart-9-default)); }
 
   circle[data-dot][data-slice] {
-    stroke: var(--chart-dot-stroke);
+    stroke: var(--chart-dot-stroke, var(--chart-dot-stroke-default));
     stroke-width: 2;
   }
 
@@ -360,8 +360,8 @@
      between slices. Same knob shape as --chart-segments-gap. */
   :scope[type="pie"]   [data-slice]:not([data-dot]):not([data-hit]),
   :scope[type="donut"] [data-slice]:not([data-dot]):not([data-hit]) {
-    stroke: var(--chart-dot-stroke);
-    stroke-width: var(--chart-pie-gap);
+    stroke: var(--chart-dot-stroke, var(--chart-dot-stroke-default));
+    stroke-width: var(--chart-pie-gap, var(--chart-pie-gap-default));
     stroke-linejoin: round;
   }
 
@@ -376,14 +376,14 @@
 
   [data-donut-total] {
     font-weight: 700;
-    fill: var(--chart-fg);
-    font-family: var(--chart-font);
+    fill: var(--chart-fg, var(--chart-fg-default));
+    font-family: var(--chart-font, var(--chart-font-default));
     /* font-size set by JS on the element — scales with donut radius */
   }
 
   [data-donut-label] {
-    fill: var(--chart-axis);
-    font-family: var(--chart-font);
+    fill: var(--chart-axis, var(--chart-axis-default));
+    font-family: var(--chart-font, var(--chart-font-default));
     /* font-size set by JS on the element — scales with donut radius */
   }
 
@@ -392,11 +392,11 @@
   [data-legend] {
     display: flex;
     flex-flow: row wrap;
-    gap: var(--chart-space-md) var(--chart-space-lg);
-    font-size: var(--chart-legend-size);
-    color: var(--chart-fg);
-    margin-top: var(--chart-space-md);
-    font-family: var(--chart-font);
+    gap: var(--chart-space-md, var(--chart-space-md-default)) var(--chart-space-lg, var(--chart-space-lg-default));
+    font-size: var(--chart-legend-size, var(--chart-legend-size-default));
+    color: var(--chart-fg, var(--chart-fg-default));
+    margin-top: var(--chart-space-md, var(--chart-space-md-default));
+    font-family: var(--chart-font, var(--chart-font-default));
   }
 
   /* Container query — the chart element provides `container-type: inline-size`
@@ -412,26 +412,26 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: var(--chart-space-sm);
+    gap: var(--chart-space-sm, var(--chart-space-sm-default));
   }
 
   [data-legend-dot] {
-    width: var(--chart-legend-dot-size);
-    height: var(--chart-legend-dot-size);
-    border-radius: var(--chart-radius);
+    width: var(--chart-legend-dot-size, var(--chart-legend-dot-size-default));
+    height: var(--chart-legend-dot-size, var(--chart-legend-dot-size-default));
+    border-radius: var(--chart-radius, var(--chart-radius-default));
     flex-shrink: 0;
   }
 
-  [data-legend-dot][data-slice="0"] { background: var(--chart-0); }
-  [data-legend-dot][data-slice="1"] { background: var(--chart-1); }
-  [data-legend-dot][data-slice="2"] { background: var(--chart-2); }
-  [data-legend-dot][data-slice="3"] { background: var(--chart-3); }
-  [data-legend-dot][data-slice="4"] { background: var(--chart-4); }
-  [data-legend-dot][data-slice="5"] { background: var(--chart-5); }
-  [data-legend-dot][data-slice="6"] { background: var(--chart-6); }
-  [data-legend-dot][data-slice="7"] { background: var(--chart-7); }
-  [data-legend-dot][data-slice="8"] { background: var(--chart-8); }
-  [data-legend-dot][data-slice="9"] { background: var(--chart-9); }
+  [data-legend-dot][data-slice="0"] { background: var(--chart-0, var(--chart-0-default)); }
+  [data-legend-dot][data-slice="1"] { background: var(--chart-1, var(--chart-1-default)); }
+  [data-legend-dot][data-slice="2"] { background: var(--chart-2, var(--chart-2-default)); }
+  [data-legend-dot][data-slice="3"] { background: var(--chart-3, var(--chart-3-default)); }
+  [data-legend-dot][data-slice="4"] { background: var(--chart-4, var(--chart-4-default)); }
+  [data-legend-dot][data-slice="5"] { background: var(--chart-5, var(--chart-5-default)); }
+  [data-legend-dot][data-slice="6"] { background: var(--chart-6, var(--chart-6-default)); }
+  [data-legend-dot][data-slice="7"] { background: var(--chart-7, var(--chart-7-default)); }
+  [data-legend-dot][data-slice="8"] { background: var(--chart-8, var(--chart-8-default)); }
+  [data-legend-dot][data-slice="9"] { background: var(--chart-9, var(--chart-9-default)); }
 
   /* ── Area chart ──
      Reuses #renderLine() but emphasizes the filled region. Overrides the
@@ -443,20 +443,20 @@
     --chart-area-fill-opacity: 0.35;
   }
   :scope[type="area"] [data-area] {
-    fill: var(--chart-line);
+    fill: var(--chart-line, var(--chart-line-default));
     opacity: var(--chart-area-fill-opacity);
     stroke: none;
   }
   :scope[type="area"] [data-line] {
-    stroke-width: var(--chart-line-width);
+    stroke-width: var(--chart-line-width, var(--chart-line-width-default));
   }
 
   /* ── Scatter ──
      Only dots emitted (no line/area paths). Dots are slightly larger than
      line-chart dots by default for readability. */
   :scope[type="scatter"] [data-dot][data-scatter] {
-    fill: var(--chart-dot);
-    stroke: var(--chart-dot-stroke);
+    fill: var(--chart-dot, var(--chart-dot-default));
+    stroke: var(--chart-dot-stroke, var(--chart-dot-stroke-default));
     stroke-width: 1.5;
   }
 
@@ -475,19 +475,19 @@
     fill: none;
   }
   circle[data-radial-bar] {
-    stroke: var(--chart-bar);
+    stroke: var(--chart-bar, var(--chart-bar-default));
     fill: none;
   }
-  circle[data-radial-bar][data-slice="0"] { stroke: var(--chart-0); }
-  circle[data-radial-bar][data-slice="1"] { stroke: var(--chart-1); }
-  circle[data-radial-bar][data-slice="2"] { stroke: var(--chart-2); }
-  circle[data-radial-bar][data-slice="3"] { stroke: var(--chart-3); }
-  circle[data-radial-bar][data-slice="4"] { stroke: var(--chart-4); }
-  circle[data-radial-bar][data-slice="5"] { stroke: var(--chart-5); }
-  circle[data-radial-bar][data-slice="6"] { stroke: var(--chart-6); }
-  circle[data-radial-bar][data-slice="7"] { stroke: var(--chart-7); }
-  circle[data-radial-bar][data-slice="8"] { stroke: var(--chart-8); }
-  circle[data-radial-bar][data-slice="9"] { stroke: var(--chart-9); }
+  circle[data-radial-bar][data-slice="0"] { stroke: var(--chart-0, var(--chart-0-default)); }
+  circle[data-radial-bar][data-slice="1"] { stroke: var(--chart-1, var(--chart-1-default)); }
+  circle[data-radial-bar][data-slice="2"] { stroke: var(--chart-2, var(--chart-2-default)); }
+  circle[data-radial-bar][data-slice="3"] { stroke: var(--chart-3, var(--chart-3-default)); }
+  circle[data-radial-bar][data-slice="4"] { stroke: var(--chart-4, var(--chart-4-default)); }
+  circle[data-radial-bar][data-slice="5"] { stroke: var(--chart-5, var(--chart-5-default)); }
+  circle[data-radial-bar][data-slice="6"] { stroke: var(--chart-6, var(--chart-6-default)); }
+  circle[data-radial-bar][data-slice="7"] { stroke: var(--chart-7, var(--chart-7-default)); }
+  circle[data-radial-bar][data-slice="8"] { stroke: var(--chart-8, var(--chart-8-default)); }
+  circle[data-radial-bar][data-slice="9"] { stroke: var(--chart-9, var(--chart-9-default)); }
 
   /* ── Gauge ──
      Half-donut — track is faint backing, fill reads as primary accent. */
@@ -496,16 +496,16 @@
     stroke: none;
   }
   :scope[type="gauge"] [data-gauge-fill] {
-    fill: var(--chart-bar);
+    fill: var(--chart-bar, var(--chart-bar-default));
     stroke: none;
   }
   [data-gauge-value] {
     font-weight: var(--a-weight-semibold);
-    fill: var(--chart-fg);
+    fill: var(--chart-fg, var(--chart-fg-default));
   }
   [data-gauge-max] {
-    fill: var(--chart-label);
-    font-family: var(--chart-font);
+    fill: var(--chart-label, var(--chart-label-default));
+    font-family: var(--chart-font, var(--chart-font-default));
   }
 
   /* ── Funnel ──
@@ -513,29 +513,29 @@
      the data palette colors each stage. Labels live outside the
      funnel body — left (stage name) and right (value + drop %). */
   [data-funnel-stage] {
-    fill: var(--chart-bar);
-  }
-  [data-funnel-stage][data-slice="0"] { fill: var(--chart-0); }
-  [data-funnel-stage][data-slice="1"] { fill: var(--chart-1); }
-  [data-funnel-stage][data-slice="2"] { fill: var(--chart-2); }
-  [data-funnel-stage][data-slice="3"] { fill: var(--chart-3); }
-  [data-funnel-stage][data-slice="4"] { fill: var(--chart-4); }
-  [data-funnel-stage][data-slice="5"] { fill: var(--chart-5); }
-  [data-funnel-stage][data-slice="6"] { fill: var(--chart-6); }
-  [data-funnel-stage][data-slice="7"] { fill: var(--chart-7); }
-  [data-funnel-stage][data-slice="8"] { fill: var(--chart-8); }
-  [data-funnel-stage][data-slice="9"] { fill: var(--chart-9); }
+    fill: var(--chart-bar, var(--chart-bar-default));
+  }
+  [data-funnel-stage][data-slice="0"] { fill: var(--chart-0, var(--chart-0-default)); }
+  [data-funnel-stage][data-slice="1"] { fill: var(--chart-1, var(--chart-1-default)); }
+  [data-funnel-stage][data-slice="2"] { fill: var(--chart-2, var(--chart-2-default)); }
+  [data-funnel-stage][data-slice="3"] { fill: var(--chart-3, var(--chart-3-default)); }
+  [data-funnel-stage][data-slice="4"] { fill: var(--chart-4, var(--chart-4-default)); }
+  [data-funnel-stage][data-slice="5"] { fill: var(--chart-5, var(--chart-5-default)); }
+  [data-funnel-stage][data-slice="6"] { fill: var(--chart-6, var(--chart-6-default)); }
+  [data-funnel-stage][data-slice="7"] { fill: var(--chart-7, var(--chart-7-default)); }
+  [data-funnel-stage][data-slice="8"] { fill: var(--chart-8, var(--chart-8-default)); }
+  [data-funnel-stage][data-slice="9"] { fill: var(--chart-9, var(--chart-9-default)); }
 
   [data-funnel-label] {
-    fill: var(--chart-fg);
+    fill: var(--chart-fg, var(--chart-fg-default));
     font-weight: var(--a-weight-medium);
   }
   [data-funnel-value] {
-    fill: var(--chart-fg);
+    fill: var(--chart-fg, var(--chart-fg-default));
     font-weight: var(--a-weight-semibold);
   }
   [data-funnel-drop] {
-    fill: var(--chart-label);
+    fill: var(--chart-label, var(--chart-label-default));
   }
 
   /* ── Treemap ──
@@ -544,19 +544,19 @@
      check done in JS). Rounded corners pick up the standard
      --a-radius via #resolveRadius(). */
   [data-treemap-tile] {
-    stroke: var(--chart-dot-stroke);
+    stroke: var(--chart-dot-stroke, var(--chart-dot-stroke-default));
     stroke-width: 0;
   }
-  [data-treemap-tile][data-slice="0"] { fill: var(--chart-0); }
-  [data-treemap-tile][data-slice="1"] { fill: var(--chart-1); }
-  [data-treemap-tile][data-slice="2"] { fill: var(--chart-2); }
-  [data-treemap-tile][data-slice="3"] { fill: var(--chart-3); }
-  [data-treemap-tile][data-slice="4"] { fill: var(--chart-4); }
-  [data-treemap-tile][data-slice="5"] { fill: var(--chart-5); }
-  [data-treemap-tile][data-slice="6"] { fill: var(--chart-6); }
-  [data-treemap-tile][data-slice="7"] { fill: var(--chart-7); }
-  [data-treemap-tile][data-slice="8"] { fill: var(--chart-8); }
-  [data-treemap-tile][data-slice="9"] { fill: var(--chart-9); }
+  [data-treemap-tile][data-slice="0"] { fill: var(--chart-0, var(--chart-0-default)); }
+  [data-treemap-tile][data-slice="1"] { fill: var(--chart-1, var(--chart-1-default)); }
+  [data-treemap-tile][data-slice="2"] { fill: var(--chart-2, var(--chart-2-default)); }
+  [data-treemap-tile][data-slice="3"] { fill: var(--chart-3, var(--chart-3-default)); }
+  [data-treemap-tile][data-slice="4"] { fill: var(--chart-4, var(--chart-4-default)); }
+  [data-treemap-tile][data-slice="5"] { fill: var(--chart-5, var(--chart-5-default)); }
+  [data-treemap-tile][data-slice="6"] { fill: var(--chart-6, var(--chart-6-default)); }
+  [data-treemap-tile][data-slice="7"] { fill: var(--chart-7, var(--chart-7-default)); }
+  [data-treemap-tile][data-slice="8"] { fill: var(--chart-8, var(--chart-8-default)); }
+  [data-treemap-tile][data-slice="9"] { fill: var(--chart-9, var(--chart-9-default)); }
 
   [data-treemap-label] {
     fill: var(--a-canvas-0);
@@ -572,18 +572,18 @@
      bands render semi-transparent so overlapping routes remain
      distinguishable. Nodes adopt the data palette. */
   [data-sankey-node] {
-    fill: var(--chart-bar);
-  }
-  [data-sankey-node][data-slice="0"] { fill: var(--chart-0); }
-  [data-sankey-node][data-slice="1"] { fill: var(--chart-1); }
-  [data-sankey-node][data-slice="2"] { fill: var(--chart-2); }
-  [data-sankey-node][data-slice="3"] { fill: var(--chart-3); }
-  [data-sankey-node][data-slice="4"] { fill: var(--chart-4); }
-  [data-sankey-node][data-slice="5"] { fill: var(--chart-5); }
-  [data-sankey-node][data-slice="6"] { fill: var(--chart-6); }
-  [data-sankey-node][data-slice="7"] { fill: var(--chart-7); }
-  [data-sankey-node][data-slice="8"] { fill: var(--chart-8); }
-  [data-sankey-node][data-slice="9"] { fill: var(--chart-9); }
+    fill: var(--chart-bar, var(--chart-bar-default));
+  }
+  [data-sankey-node][data-slice="0"] { fill: var(--chart-0, var(--chart-0-default)); }
+  [data-sankey-node][data-slice="1"] { fill: var(--chart-1, var(--chart-1-default)); }
+  [data-sankey-node][data-slice="2"] { fill: var(--chart-2, var(--chart-2-default)); }
+  [data-sankey-node][data-slice="3"] { fill: var(--chart-3, var(--chart-3-default)); }
+  [data-sankey-node][data-slice="4"] { fill: var(--chart-4, var(--chart-4-default)); }
+  [data-sankey-node][data-slice="5"] { fill: var(--chart-5, var(--chart-5-default)); }
+  [data-sankey-node][data-slice="6"] { fill: var(--chart-6, var(--chart-6-default)); }
+  [data-sankey-node][data-slice="7"] { fill: var(--chart-7, var(--chart-7-default)); }
+  [data-sankey-node][data-slice="8"] { fill: var(--chart-8, var(--chart-8-default)); }
+  [data-sankey-node][data-slice="9"] { fill: var(--chart-9, var(--chart-9-default)); }
 
   [data-sankey-link] {
     fill: var(--a-fg-subtle);
@@ -593,7 +593,7 @@
     opacity: 0.6;
   }
   [data-sankey-label] {
-    fill: var(--chart-fg);
+    fill: var(--chart-fg, var(--chart-fg-default));
     font-weight: var(--a-weight-medium);
   }
 
@@ -603,10 +603,10 @@
      the line reads over the bar visually — the line's data-line
      element already picks up existing [data-line] styling. */
   :scope[type="composed"] [data-line] {
-    stroke-width: calc(var(--chart-line-width) + 1);
+    stroke-width: calc(var(--chart-line-width, var(--chart-line-width-default)) + 1);
   }
   :scope[type="composed"] [data-dot] {
-    stroke: var(--chart-dot-stroke);
+    stroke: var(--chart-dot-stroke, var(--chart-dot-stroke-default));
     stroke-width: 2;
   }
 
@@ -639,38 +639,38 @@
   /* ═══════ Color variants ═══════ */
 
   :scope[color="success"] {
-    --chart-bar:      var(--a-success-strong);
-    --chart-bar-hover: var(--a-success-bg-hover);
-    --chart-line:     var(--a-success-strong);
-    --chart-dot:      var(--a-success-strong);
+    --chart-bar-default:      var(--a-success-strong);
+    --chart-bar-hover-default: var(--a-success-bg-hover);
+    --chart-line-default:     var(--a-success-strong);
+    --chart-dot-default:      var(--a-success-strong);
   }
 
   :scope[color="warning"] {
-    --chart-bar:      var(--a-warning-strong);
-    --chart-bar-hover: var(--a-warning-bg-hover);
-    --chart-line:     var(--a-warning-strong);
-    --chart-dot:      var(--a-warning-strong);
+    --chart-bar-default:      var(--a-warning-strong);
+    --chart-bar-hover-default: var(--a-warning-bg-hover);
+    --chart-line-default:     var(--a-warning-strong);
+    --chart-dot-default:      var(--a-warning-strong);
   }
 
   :scope[color="danger"] {
-    --chart-bar:      var(--a-danger-strong);
-    --chart-bar-hover: var(--a-danger-bg-hover);
-    --chart-line:     var(--a-danger-strong);
-    --chart-dot:      var(--a-danger-strong);
+    --chart-bar-default:      var(--a-danger-strong);
+    --chart-bar-hover-default: var(--a-danger-bg-hover);
+    --chart-line-default:     var(--a-danger-strong);
+    --chart-dot-default:      var(--a-danger-strong);
   }
 
   :scope[color="info"] {
-    --chart-bar:      var(--a-info);
-    --chart-bar-hover: var(--a-info-bg-hover);
-    --chart-line:     var(--a-info);
-    --chart-dot:      var(--a-info);
+    --chart-bar-default:      var(--a-info);
+    --chart-bar-hover-default: var(--a-info-bg-hover);
+    --chart-line-default:     var(--a-info);
+    --chart-dot-default:      var(--a-info);
   }
 
   :scope[color="accent"] {
-    --chart-bar:      var(--a-accent);
-    --chart-bar-hover: var(--a-accent-bg-hover);
-    --chart-line:     var(--a-accent);
-    --chart-dot:      var(--a-accent);
+    --chart-bar-default:      var(--a-accent);
+    --chart-bar-hover-default: var(--a-accent-bg-hover);
+    --chart-line-default:     var(--a-accent);
+    --chart-dot-default:      var(--a-accent);
   }
 
   /* ── Tooltip hit-target cursor ──