@x12i/charts 1.0.0 → 1.1.0

package/dist/styles.css

@@ -0,0 +1,821 @@
+/* =========================================================================
+ * @x12i/charts styles
+ *
+ * Tokens only. Every selector is wrapped in :where() so it has zero
+ * specificity and any app rule wins. Hooks are data-kit="chart-*" and data-*
+ * state attributes. Spacing and alignment use logical properties, so the
+ * HTML parts (legend, table, toolbar) follow the page direction. SVG geometry
+ * is physical by nature; the layout mirrors time and category axes itself.
+ *
+ * Color is never the only channel: series also differ by marker shape, dash
+ * pattern or hatch fill, and every mark has a text equivalent.
+ * ========================================================================= */
+
+/* ----------------------------------------------------------------- Root */
+
+:where([data-kit="chart"]) {
+  position: relative;
+  display: block;
+  box-sizing: border-box;
+  inline-size: 100%;
+  min-inline-size: 0;
+  color: var(--kit-color-text-primary);
+  font-family: var(--kit-font-family-sans);
+  font-size: var(--kit-font-size-12);
+}
+
+/* A sparkline sits inline with text and sizes itself from its svg. */
+:where([data-kit="chart"][data-mark="sparkline"]) {
+  display: inline-block;
+  inline-size: auto;
+  vertical-align: middle;
+}
+
+:where([data-kit="chart-stage"]) {
+  position: relative;
+}
+
+:where([data-kit="chart-svg"]) {
+  display: block;
+  box-sizing: border-box;
+  inline-size: 100%;
+  max-inline-size: 100%;
+  block-size: auto;
+  overflow: visible;
+  touch-action: pan-y pinch-zoom;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+:where([data-kit="chart-svg"][data-activatable="true"]) {
+  cursor: pointer;
+}
+
+/* The whole plot gets a ring while it has keyboard focus; the active mark gets its own. */
+:where([data-kit="chart-svg"][data-interactive="true"]:focus-visible) {
+  outline: var(--kit-border-width-focus) solid var(--kit-color-border-focus);
+  outline-offset: var(--kit-space-1);
+  border-radius: var(--kit-radius-control);
+}
+
+:where([data-kit="chart-canvas"]) {
+  display: block;
+  inline-size: 100%;
+}
+
+:where([data-kit="chart-note"]) {
+  margin-block: var(--kit-space-2);
+  margin-inline: 0;
+  color: var(--kit-color-text-secondary);
+  font-size: var(--kit-text-caption-size);
+  line-height: var(--kit-text-caption-line-height);
+}
+
+:where([data-kit="chart-warning"]) {
+  margin-block-end: var(--kit-space-2);
+}
+
+/* ---------------------------------------------------------------- Tones */
+
+:where([data-kit="chart-svg"] [data-tone], [data-kit="chart-glyph"][data-tone]) {
+  --_tone: var(--kit-color-text-secondary);
+}
+
+:where([data-kit="chart-svg"] [data-tone="accent"], [data-kit="chart-glyph"][data-tone="accent"]) {
+  --_tone: var(--kit-color-accent-default);
+}
+
+:where([data-kit="chart-svg"] [data-tone="muted"], [data-kit="chart-glyph"][data-tone="muted"]) {
+  --_tone: var(--kit-color-chart-muted);
+}
+
+:where([data-kit="chart-svg"] [data-tone="reference"], [data-kit="chart-glyph"][data-tone="reference"]) {
+  --_tone: var(--kit-color-chart-reference);
+}
+
+:where([data-kit="chart-svg"] [data-tone="good"], [data-kit="chart-glyph"][data-tone="good"]) {
+  --_tone: var(--kit-color-chart-good);
+}
+
+:where([data-kit="chart-svg"] [data-tone="warning"], [data-kit="chart-glyph"][data-tone="warning"]) {
+  --_tone: var(--kit-color-chart-warning);
+}
+
+:where([data-kit="chart-svg"] [data-tone="critical"], [data-kit="chart-glyph"][data-tone="critical"]) {
+  --_tone: var(--kit-color-chart-critical);
+}
+
+:where([data-kit="chart-svg"] [data-tone="categorical-1"], [data-kit="chart-glyph"][data-tone="categorical-1"]) {
+  --_tone: var(--kit-color-chart-categorical-1);
+}
+
+:where([data-kit="chart-svg"] [data-tone="categorical-2"], [data-kit="chart-glyph"][data-tone="categorical-2"]) {
+  --_tone: var(--kit-color-chart-categorical-2);
+}
+
+:where([data-kit="chart-svg"] [data-tone="categorical-3"], [data-kit="chart-glyph"][data-tone="categorical-3"]) {
+  --_tone: var(--kit-color-chart-categorical-3);
+}
+
+:where([data-kit="chart-svg"] [data-tone="categorical-4"], [data-kit="chart-glyph"][data-tone="categorical-4"]) {
+  --_tone: var(--kit-color-chart-categorical-4);
+}
+
+:where([data-kit="chart-svg"] [data-tone="categorical-5"], [data-kit="chart-glyph"][data-tone="categorical-5"]) {
+  --_tone: var(--kit-color-chart-categorical-5);
+}
+
+:where([data-kit="chart-svg"] [data-tone="categorical-6"], [data-kit="chart-glyph"][data-tone="categorical-6"]) {
+  --_tone: var(--kit-color-chart-categorical-6);
+}
+
+:where([data-kit="chart-svg"] [data-tone="categorical-7"], [data-kit="chart-glyph"][data-tone="categorical-7"]) {
+  --_tone: var(--kit-color-chart-categorical-7);
+}
+
+:where([data-kit="chart-svg"] [data-tone="categorical-8"], [data-kit="chart-glyph"][data-tone="categorical-8"]) {
+  --_tone: var(--kit-color-chart-categorical-8);
+}
+
+/* ---------------------------------------------------------------- Axes */
+
+:where([data-kit="chart-axis-line"], [data-kit="chart-tick-mark"]) {
+  fill: none;
+  stroke: var(--kit-color-chart-axis);
+  stroke-width: var(--kit-border-width-default);
+}
+
+:where([data-kit="chart-grid"]) {
+  fill: none;
+  stroke: var(--kit-color-chart-grid);
+  stroke-width: var(--kit-border-width-default);
+}
+
+/* The zero line is the baseline bars grow from, so it reads as an axis. */
+:where([data-kit="chart-grid"][data-zero="true"]) {
+  stroke: var(--kit-color-chart-axis);
+}
+
+:where([data-kit="chart-tick-label"]) {
+  fill: var(--kit-color-chart-axis);
+  font-size: var(--kit-font-size-12);
+  font-variant-numeric: tabular-nums;
+}
+
+:where([data-kit="chart-axis-title"]) {
+  fill: var(--kit-color-text-secondary);
+  font-size: var(--kit-font-size-12);
+  font-weight: var(--kit-font-weight-medium);
+}
+
+/* --------------------------------------------------------------- Marks */
+
+:where([data-kit="chart-bar"]) {
+  fill: var(--_tone);
+  stroke: var(--kit-color-bg-surface);
+  stroke-width: var(--kit-border-width-default);
+  rx: var(--kit-radius-2);
+}
+
+:where([data-kit="chart-area"]) {
+  fill: var(--_tone);
+  fill-opacity: 0.3;
+  stroke: none;
+}
+
+:where([data-kit="chart-line"]) {
+  fill: none;
+  stroke: var(--_tone);
+  stroke-width: var(--kit-border-width-2);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+:where([data-kit="chart-point"]) {
+  fill: var(--_tone);
+  stroke: var(--kit-color-bg-surface);
+  stroke-width: var(--kit-border-width-default);
+}
+
+:where([data-kit="chart-point"][data-open="true"]) {
+  fill: none;
+  stroke: var(--_tone);
+  stroke-width: var(--kit-border-width-2);
+  stroke-linecap: round;
+}
+
+:where([data-kit="chart-stem"]) {
+  stroke: var(--_tone);
+  stroke-width: var(--kit-border-width-2);
+}
+
+:where([data-kit="chart-connector"]) {
+  stroke: var(--kit-color-chart-reference);
+  stroke-width: var(--kit-border-width-default);
+  stroke-dasharray: var(--kit-space-1) var(--kit-space-1);
+}
+
+:where([data-kit="chart-cell"]) {
+  stroke: var(--kit-color-bg-surface);
+  stroke-width: var(--kit-border-width-default);
+  rx: var(--kit-radius-2);
+}
+
+:where([data-kit="chart-arc"]) {
+  fill: var(--_tone);
+  stroke: var(--kit-color-bg-surface);
+  stroke-width: var(--kit-border-width-2);
+  stroke-linejoin: round;
+}
+
+/* Gauge parts: a track behind, tinted bands, and the value arc on top. */
+:where([data-kit="chart-arc"][data-role="track"]) {
+  fill: var(--kit-color-border-subtle);
+  stroke: none;
+}
+
+:where([data-kit="chart-arc"][data-role="band"]) {
+  fill: var(--_tone);
+  fill-opacity: 0.35;
+  stroke: none;
+}
+
+:where([data-kit="chart-arc"][data-role="value"]) {
+  fill: var(--_tone);
+  stroke: none;
+}
+
+/* Hatch overlays carry the series without color. */
+:where([data-kit="chart-pattern"]) {
+  pointer-events: none;
+}
+
+:where([data-kit="chart-pattern-line"]) {
+  fill: none;
+  stroke: var(--kit-color-bg-surface);
+  stroke-width: var(--kit-border-width-default);
+}
+
+:where([data-kit="chart-pattern-dot"]) {
+  fill: var(--kit-color-bg-surface);
+}
+
+/* State: other marks fade when one is highlighted; the active mark gains an outline, not just a tint. */
+:where([data-kit="chart-svg"] [data-muted="true"]) {
+  opacity: 0.3;
+}
+
+:where([data-kit="chart-svg"] [data-active="true"]) {
+  stroke: var(--kit-color-text-primary);
+  stroke-width: var(--kit-border-width-emphasis);
+}
+
+:where([data-kit="chart-point"][data-active="true"][data-open="true"]) {
+  stroke: var(--_tone);
+}
+
+/* A breach is outlined as well as announced in the tooltip and description. */
+:where([data-kit="chart-svg"] [data-breach="true"]) {
+  stroke: var(--kit-color-chart-critical);
+  stroke-width: var(--kit-border-width-emphasis);
+}
+
+/* ---------------------------------------------------------- Annotations */
+
+:where([data-kit="chart-annotation-line"]) {
+  fill: none;
+  stroke: var(--_tone);
+  stroke-width: var(--kit-border-width-default);
+  stroke-dasharray: var(--kit-space-2) var(--kit-space-1);
+}
+
+:where([data-kit="chart-annotation-line"][data-threshold="true"], [data-threshold="true"] [data-kit="chart-annotation-line"]) {
+  stroke-width: var(--kit-border-width-2);
+}
+
+:where([data-kit="chart-annotation-band"]) {
+  fill: var(--_tone);
+  fill-opacity: 0.12;
+  stroke: none;
+}
+
+:where([data-kit="chart-annotation-band"][data-forecast="true"]) {
+  stroke: var(--kit-color-chart-reference);
+  stroke-width: var(--kit-border-width-default);
+  stroke-dasharray: var(--kit-space-1) var(--kit-space-1);
+}
+
+:where([data-kit="chart-annotation-point"]) {
+  fill: var(--kit-color-bg-surface);
+  stroke: var(--_tone);
+  stroke-width: var(--kit-border-width-2);
+}
+
+/* ---------------------------------------------------------------- Labels */
+
+:where([data-kit="chart-label"]) {
+  fill: var(--kit-color-text-primary);
+  stroke: var(--kit-color-bg-surface);
+  stroke-width: calc(var(--kit-border-width-2) * 1.5);
+  stroke-linejoin: round;
+  paint-order: stroke;
+  font-size: var(--kit-font-size-12);
+  font-variant-numeric: tabular-nums;
+  pointer-events: none;
+}
+
+:where([data-kit="chart-label"][data-label-kind="direct"], [data-kit="chart-label"][data-label-kind="annotation"]) {
+  font-weight: var(--kit-font-weight-semibold);
+}
+
+:where([data-kit="chart-label"][data-label-kind="center"]) {
+  font-size: var(--kit-font-size-24);
+  font-weight: var(--kit-font-weight-semibold);
+}
+
+:where([data-kit="chart-label"][data-label-kind="caption"]) {
+  fill: var(--kit-color-text-secondary);
+}
+
+/* ------------------------------------------------- Crosshair and focus */
+
+:where([data-kit="chart-crosshair"] line) {
+  stroke: var(--kit-color-chart-axis);
+  stroke-width: var(--kit-border-width-default);
+  stroke-dasharray: var(--kit-space-1) var(--kit-space-1);
+  pointer-events: none;
+}
+
+:where([data-kit="chart-focus"]) {
+  fill: none;
+  stroke: var(--kit-color-border-focus);
+  stroke-width: var(--kit-border-width-focus);
+  rx: var(--kit-radius-2);
+  pointer-events: none;
+}
+
+/* --------------------------------------------------------------- Reveal */
+
+@keyframes kit-chart-reveal {
+  from {
+    opacity: 0;
+  }
+}
+
+/* Opacity only, and it ends on each mark's own state (muted marks stay muted). */
+:where(
+    [data-kit="chart-svg"][data-animate="true"] [data-kit="chart-bar"],
+    [data-kit="chart-svg"][data-animate="true"] [data-kit="chart-area"],
+    [data-kit="chart-svg"][data-animate="true"] [data-kit="chart-line"],
+    [data-kit="chart-svg"][data-animate="true"] [data-kit="chart-arc"],
+    [data-kit="chart-svg"][data-animate="true"] [data-kit="chart-cell"],
+    [data-kit="chart-svg"][data-animate="true"] [data-kit="chart-point"]
+  ) {
+  animation: kit-chart-reveal var(--kit-duration-slow) var(--kit-easing-standard) backwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-kit="chart-svg"][data-animate="true"] *) {
+    animation: none;
+  }
+}
+
+@media print {
+  :where([data-kit="chart-svg"][data-animate="true"] *) {
+    animation: none;
+  }
+}
+
+/* --------------------------------------------------------------- Legend */
+
+:where([data-kit="chart-legend"]) {
+  margin-block: var(--kit-space-2);
+}
+
+:where([data-kit-slot="legend-list"]) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--kit-space-1) var(--kit-space-3);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+:where([data-kit="chart-legend-button"], [data-kit="chart-legend-key"]) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kit-space-2);
+  box-sizing: border-box;
+  min-block-size: var(--kit-size-target-min);
+  padding-block: var(--kit-space-1);
+  padding-inline: var(--kit-space-2);
+  border: var(--kit-border-width-default) solid transparent;
+  border-radius: var(--kit-radius-control);
+  background: none;
+  color: var(--kit-color-text-primary);
+  font: inherit;
+  font-size: var(--kit-text-caption-size);
+  line-height: var(--kit-text-caption-line-height);
+}
+
+:where([data-kit="chart-legend-button"]) {
+  cursor: pointer;
+}
+
+:where([data-kit="chart-legend-button"]:hover) {
+  background-color: var(--kit-color-accent-subtle);
+}
+
+:where([data-kit="chart-legend-button"]:focus-visible) {
+  outline: var(--kit-border-width-focus) solid var(--kit-color-border-focus);
+  outline-offset: var(--kit-border-width-default);
+}
+
+/* A hidden series is struck through, so the state does not rely on fading alone. */
+:where([data-kit="chart-legend-button"][data-hidden="true"]) {
+  color: var(--kit-color-text-tertiary);
+  text-decoration: line-through;
+}
+
+:where([data-kit="chart-legend-button"][data-hidden="true"] [data-kit="chart-glyph"]) {
+  opacity: 0.4;
+}
+
+/* Glyphs: a key swatch that mirrors the mark. */
+:where([data-kit="chart-glyph"]) {
+  display: inline-block;
+  flex: none;
+  vertical-align: middle;
+  overflow: visible;
+}
+
+:where([data-kit="chart-glyph-line"]) {
+  fill: none;
+  stroke: var(--_tone);
+  stroke-width: var(--kit-border-width-2);
+}
+
+:where([data-kit="chart-glyph-area"]) {
+  fill: var(--_tone);
+  fill-opacity: 0.3;
+}
+
+:where([data-kit="chart-glyph-fill"]) {
+  fill: var(--_tone);
+  rx: var(--kit-radius-2);
+}
+
+:where([data-kit="chart-glyph-marker"]) {
+  fill: var(--_tone);
+  stroke: var(--kit-color-bg-surface);
+  stroke-width: var(--kit-border-width-default);
+}
+
+:where([data-kit="chart-glyph-marker"][data-open="true"]) {
+  fill: none;
+  stroke: var(--_tone);
+  stroke-width: var(--kit-border-width-2);
+}
+
+/* ------------------------------------------------------- Color scale legend */
+
+:where([data-kit="chart-scale"]) {
+  display: flex;
+  align-items: center;
+  gap: var(--kit-space-2);
+  margin-block: var(--kit-space-2);
+  font-size: var(--kit-text-caption-size);
+  font-variant-numeric: tabular-nums;
+  color: var(--kit-color-text-secondary);
+}
+
+:where([data-kit-slot="scale-ramp"]) {
+  display: inline-block;
+  inline-size: calc(var(--kit-size-56) * 3);
+  block-size: var(--kit-space-3);
+  border: var(--kit-border-width-default) solid var(--kit-color-border-subtle);
+  border-radius: var(--kit-radius-2);
+}
+
+/* -------------------------------------------------------------- Tooltip */
+
+:where([data-kit="chart-tooltip"]) {
+  --_tx: -50%;
+  --_ty: calc(-100% - var(--kit-space-3));
+
+  position: absolute;
+  z-index: var(--kit-z-tooltip);
+  box-sizing: border-box;
+  inline-size: max-content;
+  max-inline-size: calc(var(--kit-space-24) * 3);
+  translate: var(--_tx) var(--_ty);
+  padding-block: var(--kit-space-2);
+  padding-inline: var(--kit-space-3);
+  border: var(--kit-border-width-default) solid var(--kit-color-border-default);
+  border-radius: var(--kit-radius-overlay);
+  background-color: var(--kit-color-bg-overlay);
+  box-shadow: var(--kit-shadow-overlay);
+  color: var(--kit-color-text-primary);
+  font-size: var(--kit-text-caption-size);
+  line-height: var(--kit-text-caption-line-height);
+}
+
+:where([data-kit="chart-tooltip"][data-align="start"]) {
+  --_tx: 0;
+}
+
+:where([data-kit="chart-tooltip"][data-align="end"]) {
+  --_tx: -100%;
+}
+
+:where([data-kit="chart-tooltip"][data-placement="below"]) {
+  --_ty: var(--kit-space-3);
+}
+
+:where([data-kit-slot="tooltip-title"]) {
+  margin-block-end: var(--kit-space-1);
+  font-weight: var(--kit-font-weight-semibold);
+}
+
+:where([data-kit-slot="tooltip-rows"]) {
+  display: grid;
+  gap: var(--kit-space-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+:where([data-kit-slot="tooltip-row"]) {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: var(--kit-space-2);
+}
+
+:where([data-kit-slot="tooltip-row"][data-active="true"]) {
+  font-weight: var(--kit-font-weight-semibold);
+}
+
+:where([data-kit-slot="tooltip-value"]) {
+  font-variant-numeric: tabular-nums;
+  font-weight: var(--kit-font-weight-semibold);
+  text-align: end;
+}
+
+:where([data-kit-slot="tooltip-note"]) {
+  grid-column: 2 / -1;
+  color: var(--kit-color-text-secondary);
+}
+
+/* --------------------------------------------------------------- States */
+
+:where([data-kit="chart-state"]) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--kit-space-3);
+  box-sizing: border-box;
+  padding: var(--kit-space-6);
+  border: var(--kit-border-width-default) dashed var(--kit-color-border-subtle);
+  border-radius: var(--kit-radius-panel);
+  color: var(--kit-color-text-secondary);
+  text-align: center;
+}
+
+:where([data-kit="chart-state"][data-overlay="true"]) {
+  position: absolute;
+  inset: 0;
+  background-color: var(--kit-color-bg-surface);
+}
+
+:where([data-kit="chart-state"][data-state="error"]) {
+  border-style: solid;
+  border-color: var(--kit-color-status-danger-border);
+  background-color: var(--kit-color-status-danger-background);
+  color: var(--kit-color-status-danger-foreground);
+}
+
+:where([data-kit-slot="state-message"]) {
+  margin: 0;
+  font-size: var(--kit-text-body-size);
+  line-height: var(--kit-text-body-line-height);
+}
+
+/* --------------------------------------------------------- Frame and card */
+
+:where([data-kit="chart-frame"]) {
+  display: grid;
+  gap: var(--kit-space-3);
+  box-sizing: border-box;
+  min-inline-size: 0;
+  margin: 0;
+  color: var(--kit-color-text-primary);
+  font-family: var(--kit-font-family-sans);
+}
+
+:where([data-kit="chart-frame"][data-variant="card"]) {
+  padding: var(--kit-space-4);
+  border: var(--kit-border-width-default) solid var(--kit-color-border-subtle);
+  border-radius: var(--kit-radius-panel);
+  background-color: var(--kit-color-bg-surface);
+}
+
+:where([data-kit-slot="frame-caption"]) {
+  display: grid;
+  gap: var(--kit-space-1);
+}
+
+:where([data-kit-slot="frame-title"]) {
+  margin: 0;
+  font-size: var(--kit-text-h4-size);
+  line-height: var(--kit-text-h4-line-height);
+  font-weight: var(--kit-text-h4-weight);
+}
+
+:where([data-kit-slot="frame-subtitle"], [data-kit-slot="frame-source"]) {
+  margin: 0;
+  color: var(--kit-color-text-secondary);
+  font-size: var(--kit-text-caption-size);
+  line-height: var(--kit-text-caption-line-height);
+}
+
+:where([data-kit-slot="frame-source"]) {
+  color: var(--kit-color-text-tertiary);
+}
+
+:where([data-kit-slot="frame-body"]) {
+  min-inline-size: 0;
+}
+
+:where([data-kit="chart-toolbar"]) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--kit-space-2);
+}
+
+:where([data-kit="chart-icon"]) {
+  flex: none;
+  inline-size: var(--kit-size-icon-sm);
+  block-size: var(--kit-size-icon-sm);
+  fill: none;
+  stroke: currentcolor;
+  stroke-width: var(--kit-border-width-2);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* ---------------------------------------------------------------- Table */
+
+:where([data-kit="chart-table"]) {
+  box-sizing: border-box;
+  max-block-size: calc(var(--kit-size-56) * 8);
+  overflow: auto;
+  border: var(--kit-border-width-default) solid var(--kit-color-border-subtle);
+  border-radius: var(--kit-radius-control);
+  background-color: var(--kit-color-bg-surface);
+}
+
+:where([data-kit="chart-table"]:focus-visible) {
+  outline: var(--kit-border-width-focus) solid var(--kit-color-border-focus);
+  outline-offset: var(--kit-border-width-default);
+}
+
+:where([data-kit="chart-table-element"]) {
+  inline-size: 100%;
+  border-collapse: collapse;
+  color: var(--kit-color-text-primary);
+  font-size: var(--kit-text-body-size);
+  line-height: var(--kit-text-body-line-height);
+  font-variant-numeric: tabular-nums;
+}
+
+:where([data-kit="chart-table-element"] caption) {
+  padding-block: var(--kit-space-2);
+  padding-inline: var(--kit-space-3);
+  color: var(--kit-color-text-secondary);
+  font-size: var(--kit-text-caption-size);
+  font-weight: var(--kit-font-weight-semibold);
+  text-align: start;
+}
+
+:where([data-kit="chart-table-element"] :is(th, td)) {
+  padding-block: var(--kit-space-2);
+  padding-inline: var(--kit-space-3);
+  border-block-end: var(--kit-border-width-default) solid var(--kit-color-border-subtle);
+  text-align: start;
+}
+
+:where([data-kit="chart-table-element"] thead th) {
+  position: sticky;
+  inset-block-start: 0;
+  background-color: var(--kit-color-bg-raised);
+  font-weight: var(--kit-font-weight-semibold);
+}
+
+:where([data-kit="chart-table-element"] tbody th) {
+  font-weight: var(--kit-font-weight-regular);
+}
+
+:where([data-kit="chart-table-element"] [data-numeric="true"]) {
+  text-align: end;
+}
+
+:where([data-kit-slot="table-note"]) {
+  margin: 0;
+  padding-block: var(--kit-space-2);
+  padding-inline: var(--kit-space-3);
+  color: var(--kit-color-text-secondary);
+  font-size: var(--kit-text-caption-size);
+}
+
+/* ----------------------------------------------------------------- Grid */
+
+:where([data-kit="chart-grid-layout"]) {
+  display: grid;
+  gap: var(--kit-space-4);
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--kit-space-24) * 4)), 1fr));
+}
+
+:where([data-kit="chart-grid-layout"][data-fixed="true"]) {
+  grid-template-columns: repeat(var(--_columns), minmax(0, 1fr));
+}
+
+/* -------------------------------------------------------- Forced colors */
+
+@media (forced-colors: active) {
+  :where([data-kit="chart-bar"], [data-kit="chart-arc"], [data-kit="chart-point"], [data-kit="chart-glyph-fill"], [data-kit="chart-glyph-marker"]) {
+    fill: CanvasText;
+    stroke: Canvas;
+  }
+
+  :where([data-kit="chart-point"][data-open="true"], [data-kit="chart-glyph-marker"][data-open="true"]) {
+    fill: none;
+    stroke: CanvasText;
+  }
+
+  :where([data-kit="chart-area"], [data-kit="chart-glyph-area"]) {
+    fill: CanvasText;
+    fill-opacity: 0.25;
+  }
+
+  :where([data-kit="chart-line"], [data-kit="chart-glyph-line"], [data-kit="chart-stem"]) {
+    stroke: CanvasText;
+  }
+
+  :where([data-kit="chart-cell"]) {
+    fill: Canvas;
+    stroke: CanvasText;
+  }
+
+  :where([data-kit="chart-arc"][data-role="track"]) {
+    fill: GrayText;
+  }
+
+  :where([data-kit="chart-pattern-line"]) {
+    stroke: Canvas;
+  }
+
+  :where([data-kit="chart-pattern-dot"]) {
+    fill: Canvas;
+  }
+
+  :where([data-kit="chart-axis-line"], [data-kit="chart-tick-mark"], [data-kit="chart-grid"], [data-kit="chart-connector"], [data-kit="chart-annotation-line"]) {
+    stroke: CanvasText;
+  }
+
+  :where([data-kit="chart-grid"]) {
+    stroke: GrayText;
+  }
+
+  :where([data-kit="chart-annotation-band"]) {
+    fill: GrayText;
+  }
+
+  :where([data-kit="chart-tick-label"], [data-kit="chart-axis-title"], [data-kit="chart-label"]) {
+    fill: CanvasText;
+  }
+
+  :where([data-kit="chart-label"]) {
+    stroke: Canvas;
+  }
+
+  :where([data-kit="chart-svg"] [data-active="true"], [data-kit="chart-svg"] [data-breach="true"]) {
+    stroke: Highlight;
+  }
+
+  :where([data-kit="chart-focus"]) {
+    stroke: Highlight;
+  }
+
+  :where([data-kit="chart-tooltip"]) {
+    border-color: CanvasText;
+    background-color: Canvas;
+    color: CanvasText;
+  }
+
+  :where([data-kit="chart-legend-button"][data-hidden="true"]) {
+    color: GrayText;
+  }
+}