@adia-ai/web-components 0.0.1

package/components/chart/chart.css

@@ -0,0 +1,512 @@
+@scope (chart-ui) {
+  :where(:scope) {
+    /* ── Tokens ── */
+    --chart-font:           var(--a-font-family);
+    --chart-font-size:      var(--a-ui-sm);
+    --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;
+
+    /* 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;
+
+    /* Legend */
+    --chart-legend-size:    var(--a-ui-tiny);
+    --chart-legend-dot-size: 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;
+
+    /* Heading */
+    --chart-heading-size:     var(--a-ui-size);
+    --chart-heading-weight:   var(--a-weight-medium);
+
+    /* Transitions */
+    --chart-duration:       var(--a-duration-fast);
+    --chart-easing:         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);
+  }
+
+  /* ── Base ── */
+
+  :scope {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-height: var(--chart-max-height);
+    min-height: 0;
+    font-family: var(--chart-font);
+    position: relative;
+    container-type: inline-size;
+    container-name: chart;
+  }
+
+  /* Title + legend are fixed-height siblings; SVG gets the remaining
+     vertical budget. min-height:0 lets the SVG wrapper shrink to fit
+     inside the max-height envelope instead of pushing the legend out. */
+  [data-chart-heading] { flex: 0 0 auto; }
+  [data-legend]      { flex: 0 0 auto; }
+  :scope > div:not([data-chart-heading]):not([data-legend]) {
+    flex: 1 1 auto;
+    min-height: 0;
+  }
+
+  /* Aspect ratio — height is computed in JS from width, CSS is just a hint.
+     NOTE: size="sm|md|lg" used to cap max-width (25/50/100%) which was a bug:
+     a chart in a 160px grid cell would be clamped to 40px wide. Size now
+     only tunes typography/padding/density inside #dims(); layout is the
+     responsibility of the consumer. */
+
+  /* Debug resize handle */
+  :scope[resize] {
+    resize: both;
+    overflow: hidden;
+    border: 1px dashed var(--chart-border);
+    padding: var(--chart-space-md);
+  }
+
+  /* ── SVG ── */
+
+  svg {
+    display: block;
+    width: 100%;
+    height: auto;
+    max-height: 100%;
+    overflow: visible;
+  }
+
+  /* ── 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);
+  }
+
+  /* ── Grid lines ── */
+
+  [data-grid] {
+    stroke: var(--chart-grid);
+    stroke-width: 1;
+    fill: none;
+  }
+
+  /* ── Y-axis labels ── */
+
+  [data-y-label] {
+    font-size: var(--chart-font-size);
+    fill: var(--chart-axis);
+    font-family: var(--chart-font);
+  }
+
+  /* ── X-axis labels ── */
+
+  [data-x-label] {
+    font-size: var(--chart-font-size);
+    fill: var(--chart-label);
+    font-family: var(--chart-font);
+  }
+
+  /* ── Value labels ── */
+
+  [data-value] {
+    font-size: var(--chart-font-size);
+    font-weight: 600;
+    fill: var(--chart-value);
+    font-family: var(--chart-font);
+  }
+
+  /* ── Bar ── */
+
+  [data-bar] {
+    fill: var(--chart-bar);
+    transition: opacity var(--chart-duration) var(--chart-easing);
+  }
+
+  [data-bar]:hover {
+    opacity: 0.92;
+  }
+
+  /* ── Line ── */
+
+  [data-line] {
+    stroke: var(--chart-line);
+    stroke-width: var(--chart-line-width);
+    fill: none;
+    stroke-linejoin: round;
+    stroke-linecap: round;
+  }
+
+  /* ── Area fill ──
+     Enabled by default for line / multi-line charts. Fades from the top
+     (most visible, tinted by --chart-area-opacity) to transparent at the
+     bottom. The mask controls the gradient shape; the opacity token
+     controls the top stop's strength. */
+
+  [data-area] {
+    fill: var(--chart-line);
+    stroke: none;
+    opacity: var(--chart-area-opacity);
+    mask-image: linear-gradient(to bottom, black, transparent);
+    -webkit-mask-image: linear-gradient(to bottom, black, transparent);
+  }
+
+  /* ── Dots ── */
+
+  [data-dot] {
+    fill: var(--chart-dot);
+    stroke: var(--chart-dot-stroke);
+    stroke-width: 2;
+    r: 3;
+    transition: r var(--chart-duration) var(--chart-easing);
+  }
+
+  [data-dot]:hover {
+    r: 5;
+  }
+
+  /* ── Average line ── */
+
+  [data-avg] {
+    stroke: var(--chart-avg);
+    stroke-dasharray: 6 3;
+    stroke-width: 1.5;
+  }
+
+  [data-avg-label] {
+    fill: var(--chart-avg);
+    font-family: var(--chart-font);
+    font-weight: 600;
+  }
+
+  /* ── Radar ── */
+
+  [data-radar-fill] {
+    fill: var(--chart-line);
+    opacity: var(--chart-area-opacity);
+    stroke: none;
+  }
+
+  [data-radar-line] {
+    stroke: var(--chart-line);
+    stroke-width: var(--chart-line-width);
+    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); }
+
+  path[data-slice],
+  circle[data-slice] {
+    stroke: none;
+    transition: opacity var(--chart-duration) var(--chart-easing);
+  }
+
+  path[data-slice]:hover,
+  circle[data-slice]:hover {
+    opacity: 0.92;
+  }
+
+  /* Slice-colored bars (stacked/grouped) */
+  rect[data-slice] {
+    transition: opacity var(--chart-duration) var(--chart-easing);
+  }
+
+  rect[data-slice]:hover {
+    opacity: 0.92;
+  }
+
+  /* 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] {
+    fill: none;
+    stroke-width: var(--chart-line-width);
+    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] {
+    opacity: var(--chart-area-opacity);
+    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-dot][data-slice] {
+    stroke: var(--chart-dot-stroke);
+    stroke-width: 2;
+  }
+
+  /* Pie / donut slice gaps — stroke in bg color reads as negative space
+     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-linejoin: round;
+  }
+
+  /* Hit-target overlays must never be filled by the slice palette —
+     they're meant to be invisible pointer-event surfaces. */
+  circle[data-hit] {
+    fill: transparent !important;
+    stroke: none;
+  }
+
+  /* ── Donut center text ── */
+
+  [data-donut-total] {
+    font-weight: 700;
+    fill: var(--chart-fg);
+    font-family: var(--chart-font);
+    /* font-size set by JS on the element — scales with donut radius */
+  }
+
+  [data-donut-label] {
+    fill: var(--chart-axis);
+    font-family: var(--chart-font);
+    /* font-size set by JS on the element — scales with donut radius */
+  }
+
+  /* ── Legend ── */
+
+  [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);
+  }
+
+  [data-legend-item] {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--chart-space-sm);
+  }
+
+  [data-legend-dot] {
+    width: var(--chart-legend-dot-size);
+    height: var(--chart-legend-dot-size);
+    border-radius: var(--chart-radius);
+    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); }
+
+  /* ── Sparkline container ──
+     When host has explicit height, fill it; otherwise give a sensible
+     default of 2rem so the sparkline still has room to breathe. */
+  :scope[type="sparkline"] {
+    min-height: 2rem;
+  }
+
+  /* ── Segments chart ──
+     Single horizontal stacked bar — render at a fixed compact height
+     unless the host explicitly sizes it. */
+  :scope[type="segments"] svg {
+    height: 1.5rem;
+  }
+  [data-sparkline] {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+  [data-sparkline] svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  /* ═══════ Color variants ═══════ */
+
+  :scope[color="success"] {
+    --chart-bar:      var(--a-success);
+    --chart-bar-hover: var(--a-success-bg-hover);
+    --chart-line:     var(--a-success);
+    --chart-dot:      var(--a-success);
+  }
+
+  :scope[color="warning"] {
+    --chart-bar:      var(--a-warning);
+    --chart-bar-hover: var(--a-warning-bg-hover);
+    --chart-line:     var(--a-warning);
+    --chart-dot:      var(--a-warning);
+  }
+
+  :scope[color="danger"] {
+    --chart-bar:      var(--a-danger);
+    --chart-bar-hover: var(--a-danger-bg-hover);
+    --chart-line:     var(--a-danger);
+    --chart-dot:      var(--a-danger);
+  }
+
+  :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);
+  }
+
+  :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);
+  }
+
+  /* ── Tooltip hit-target cursor ──
+     Invisible circles in line/sparkline/multi-line/radar renderers carry
+     data-hit; give them a pointer cursor so the affordance is discoverable. */
+  [data-hit] { cursor: default; }
+}
+
+/* ─────────────────────────────────────────────────────────────────
+   Chart tooltip (top-layer, outside @scope)
+
+   Rendered via the Popover API, so inherits from :root, not <chart-ui>.
+   Content is assembled from data-tip-* attrs by chart.js at pointer
+   events. Structure:
+     <span data-tip-role="series">Series name</span>   (optional)
+     <span data-tip-role="label">X-axis label</span>
+     <span data-tip-role="value">45 (33.3%)</span>
+   ───────────────────────────────────────────────────────────────── */
+
+.chart-tooltip-popup {
+  --chart-tooltip-bg:       var(--a-neutral-2-shade);
+  --chart-tooltip-fg:       var(--a-neutral-2-tint);
+  --chart-tooltip-px:       var(--a-space-2-5);
+  --chart-tooltip-py:       var(--a-space-1-5);
+  --chart-tooltip-radius:   var(--a-radius-sm);
+  --chart-tooltip-shadow:   var(--a-shadow-md);
+  --chart-tooltip-gap:      var(--a-space-0-5);
+
+  box-sizing: border-box;
+  margin: 0;
+  padding: var(--chart-tooltip-py) var(--chart-tooltip-px);
+  background: var(--chart-tooltip-bg);
+  color: var(--chart-tooltip-fg);
+  font-family: var(--a-font-family);
+  font-size: var(--a-ui-sm);
+  line-height: 1.35;
+  border: none;
+  border-radius: var(--chart-tooltip-radius);
+  box-shadow: var(--chart-tooltip-shadow);
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--chart-tooltip-gap);
+  min-width: 0;
+  max-width: 20rem;
+  position: fixed;
+  inset: unset;
+}
+
+.chart-tooltip-popup:popover-open {
+  display: flex;
+}
+
+.chart-tooltip-popup [data-tip-role="series"] {
+  font-size: var(--a-ui-tiny);
+  opacity: 0.75;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.chart-tooltip-popup [data-tip-role="label"] {
+  font-weight: 500;
+}
+
+.chart-tooltip-popup [data-tip-role="value"] {
+  font-variant-numeric: tabular-nums;
+  opacity: 0.9;
+}
+
+.chart-tooltip-popup [data-tip-role="pct"] {
+  opacity: 0.6;
+}