@eocrm/design-system 0.6.23 → 0.6.24

package/AI-PRIMER.md

@@ -89,6 +89,7 @@ Each `<Name>` below is documented in `docs/components/<Name>.md`.
 - `StatTile` — one KPI tile (label, value, trend, footnote, icon, sparkline, quota `progress`) inside a StatGroup (`filled` or `card` surface)
 - `Sparkline` — compact static line / area / bar trend for KPI cards (StatTile slot, kpi DashboardWidget child); no axes, summary in the accessible name
 - `Chart` — line / bar / stacked bar / area time-series chart for a chart DashboardWidget (smoothed lines, static markers, legend, tooltip, keyboard, data table, empty state)
+- `FunnelChart` — stage funnel for pipeline / campaign conversion: height = drop-off, pill = step conversion, one-hue ramp with a hero first stage; optional stage click drill-through, vertical slices plus a table when narrow
 - `TreeView` — lazily loaded hierarchy (WAI-ARIA tree) as a file-explorer list or a top-down org chart, with loading / error-retry / load-more rows
 - `LiquidEditor` — Liquid template editor
 - `RichTextEditor` — controlled rich-text editor (contentEditable)

package/docs/components/Chart.md

@@ -102,6 +102,7 @@ import { Chart, DashboardWidget, ErrorState } from '@eocrm/design-system';
 - ❌ One headline number → `DashboardWidget variant="kpi"` or `StatGroup`.
 - ❌ More than 8 groups at once → fold the tail into an "Other" series in the app (the DS can't know whether your metric is additive).
 - ❌ Two measures with different units → two charts. There is no dual axis.
+- ❌ Stage conversion (pipeline / campaign) → `FunnelChart`.
 - ❌ Non-time categorical comparisons that need sorting, pies, scatter or zoom — not supported.
 
 #### Anti-patterns

package/docs/components/FunnelChart.md

@@ -0,0 +1,96 @@
+# `<FunnelChart>` — stage funnel for pipeline and campaign conversion
+
+Ordered stages (e.g. Leads → Qualified → Proposal → Won) drawn as one connected silhouette in a one-hue ramp: the height of each stage shows how much of the funnel is left, a pill in each later stage shows the step conversion, and the first stage carries its value and label inside its band. Fills a `DashboardWidget variant="chart"` body or sits inline on a page, and ships its own tooltip, keyboard inspection, data table and empty state. The app owns data, formatting, loading and errors.
+
+```tsx
+import { useState } from 'react';
+import {
+  FunnelChart,
+  DashboardWidget,
+  ErrorState,
+  Stack,
+  type FunnelStage,
+} from '@eocrm/design-system';
+
+const stages = [
+  { key: 'leads', label: 'Leads', value: 1200 },
+  { key: 'qualified', label: 'Qualified', value: 640 },
+  { key: 'proposal', label: 'Proposal', value: 210 },
+  { key: 'won', label: 'Won', value: 64 },
+]; // keep the array and `formatValue` referentially stable (module level or useMemo / useCallback)
+
+<DashboardWidget variant="chart" title="Sales pipeline" loading={isLoading}>
+  {error ? (
+    <ErrorState title="Could not load" headingLevel={4} />
+  ) : (
+    <FunnelChart label="Sales pipeline" stages={stages} formatValue={formatCount} />
+  )}
+</DashboardWidget>;
+
+// Inline on a page: a definite-height parent is filled; an auto-height one gets the default height
+<div style={{ height: 280 }}>
+  <FunnelChart label="Campaign funnel" stages={stages} formatValue={formatCount} shape="sharp" />
+</div>;
+
+// Drill-through plus an external headline that follows the hovered / focused stage
+const [active, setActive] = useState<FunnelStage | null>(null);
+
+<Stack gap="sm">
+  <strong>{active ? `${active.label}: ${formatCount(active.value)}` : 'Hover a stage'}</strong>
+  <FunnelChart
+    label="Sales pipeline"
+    stages={stages}
+    formatValue={formatCount}
+    onStageClick={(stage) => navigate(`/deals?stage=${stage.key}`)}
+    onActiveStageChange={setActive}
+    footnote="Closed deals only"
+  />
+</Stack>;
+```
+
+<!-- props:start -->
+
+## Props
+
+<!-- prettier-ignore -->
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `label` | `string` | yes | Accessible name of the figure and caption of its data table, e.g. "Sales pipeline". Required. |
+| `stages` | `FunnelStage[]` | yes | Stages, top of the funnel first. Heights are relative to the largest value. Colour is a one-hue ramp from `--chart-series-1` (first stage) toward the surface (paler toward the foreground in dark); a stage's `color` slot overrides it. |
+| `formatValue` | `(n: number) => string` | yes | Formats a stage value for the footer, tooltip and data table (the app owns i18n and currency). Required. |
+| `shape` | `'taper' \| 'sharp'` | no | Silhouette between stages, in both layouts (vertical slices follow the same geometry turned on its side). Default `'taper'`. - `'taper'` — each stage holds its height for most of its column, then a short straight diagonal leads into the next one's height. - `'sharp'` — full-column trapezoids from one stage's height to the next. |
+| `onStageClick` | `((stage: FunnelStage, index: number) => void)` | no | Makes every stage a button that calls this with the consumer's original stage object and its index, e.g. to drill through to the deals in that stage. Omit for a read-only funnel. |
+| `onActiveStageChange` | `((stage: FunnelStage \| null) => void)` | no | Called with the hovered or focused stage (the consumer's original object), or `null` when none is active, e.g. so a surrounding headline can follow along. |
+| `emptyMessage` | `ReactNode` | no | EmptyState title when there are no stages or every value is 0. Default: translated "No data for this period". |
+| `footnote` | `ReactNode` | no | Short note under the funnel, e.g. "Closed deals only". Takes its own row (wraps, never truncates); also describes the plot for screen readers. Shown in the empty state too. |
+| …native | | | plus native HTML attributes |
+
+<!-- props:end -->
+
+- **Percent semantics.** The pill between two stages is the _step conversion_ (next value ÷ this value). The tooltip and data table add the _share of the first stage_. Both are computed by the component; pass raw counts.
+- **Heights** are relative to the largest value; stages are drawn top of funnel first, in the order given.
+- **Colour** is a one-hue ramp, because stages are ordered: the first stage is `--chart-series-1` at full strength, each later stage a lighter tint mixed toward `--funnel-chart-ramp-target` (the surface in light, 48% max; `--color-fg` in dark, 65% max, so later stages get paler and stay crisp on the dark surface; also `--funnel-chart-ramp-color`, `--funnel-chart-ramp-max-mix`). The lightest stage stays clearly visible against the surface in both themes. With 5+ stages adjacent tints get close; the labels, table and tooltip carry identity. To highlight a stage (e.g. Won in green), give it `color` (a palette slot 1–8); it then uses `--chart-series-N` at full strength. There is no stage limit.
+- **Hero first stage** (horizontal): the first stage's value (large) and label sit inside its band, and its footer cell stays empty. When the band is too short or narrow for that text, or the first stage has a `color` slot, the first stage falls back to the normal footer, so nothing is hidden. The hero text is `--funnel-chart-hero-fg` (the surface colour) set as WCAG large text, since it clears 3:1 but not 4.5:1 on `--chart-series-1`; recheck it if you override `--funnel-chart-ramp-color`. Later stages show the conversion pill in the band and value + label underneath, with dashed rules between footer columns.
+- **Shape** (both layouts): `'taper'` (default) holds each stage's size for most of its column, then a short straight diagonal leads into the next; `'sharp'` draws full-column trapezoids. The last stage has no neck.
+- **Layout.** Horizontal while every stage gets at least 96px of width. Narrower, it switches to vertical: one funnel slice per row (the same `shape`, turned on its side, thin gaps between slices) beside a table-like grid with a header (Stage, Value, vs previous) and per row a colour swatch, the label (wrapping, never truncated), the value and the step pill (the first row shows "—"). The visible header is hidden from screen readers; the hidden data table is their source. As a last resort the rows scroll inside the plot. Unmeasured (first paint, SSR) it assumes horizontal.
+- **Clickable stages.** `onStageClick(stage, index)` makes every stage cell a button (Tab, Enter / Space) and receives your original stage object. Omit it for a read-only funnel. Escape dismisses the active stage.
+- **`onActiveStageChange(stage | null)`** fires with the hovered or focused stage (your original object) and `null` when none is active. Use it for a headline outside the chart; do not put that headline in the widget body next to the chart.
+- **Tooltip** follows hover, focus and tap, and tracks scroll and resize. **Screen readers** get a visually hidden data table (caption = `label`) with the exact values, conversion and share.
+- **Empty** (no stages, or every value 0) renders `EmptyState` with `emptyMessage` (default "No data for this period"). `footnote` stays visible there.
+- **Footnote** is a short muted note in its own row under the funnel (wraps, never truncates) and is the plot's accessible description.
+- **Sizing.** Fills its parent (`width/height: 100%`). A definite-height parent (a `DashboardWidget` chart body, a `height` style) is filled; in an auto-height parent the shapes take an intrinsic default height (`--funnel-chart-min-height`).
+
+#### When NOT to use
+
+- ❌ Values over time → `Chart`.
+- ❌ A single conversion ratio → `StatGroup` / `DashboardWidget variant="kpi"`.
+- ❌ Unordered categories, or stages that don't narrow → `Chart type="bar"`.
+- ❌ Many stages (beyond about 8) → fold the tail into an "Other" stage in the app; the ramp steps become hard to tell apart.
+
+#### Anti-patterns
+
+- ❌ Passing an inline `stages` array or `formatValue` on every render of a busy parent; geometry is recomputed when their identity changes.
+- ❌ Wrapping `FunnelChart` in a fixed-height or scrolling div inside the widget body. The cell is the size.
+- ❌ Rendering a note next to the chart in the widget body (it steals height). Use `footnote`.
+- ❌ Passing `loading` / error UI into `FunnelChart`. Use `DashboardWidget loading` and an `ErrorState` child.
+- ❌ Pre-computing percentages into `value`. Pass counts; the component derives conversion and share.

package/docs/components/index.json

@@ -244,6 +244,11 @@
     "summary": "titled group of fields",
     "cluster": "Forms"
   },
+  {
+    "name": "FunnelChart",
+    "summary": "stage funnel for pipeline and campaign conversion",
+    "cluster": "Display"
+  },
   {
     "name": "Grid",
     "summary": "2D layout primitive",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eocrm/design-system",
-  "version": "0.6.23",
+  "version": "0.6.24",
   "description": "Design system for the EOCRM product — React 19 + SCSS modules + CSS custom properties.",
   "license": "Apache-2.0",
   "type": "module",
@@ -50,7 +50,7 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@eocrm/design-tokens": "0.6.23",
+    "@eocrm/design-tokens": "0.6.24",
     "@floating-ui/react-dom": "^2.1.8",
     "@types/d3-scale": "^4.0.9",
     "@types/d3-shape": "^3.2.0",

package/src/_meta/manifest.ts

@@ -127,6 +127,7 @@ const CLUSTERS: Record<string, string> = {
   DashboardWidget: 'Display',
   StatGroup: 'Display',
   Chart: 'Display',
+  FunnelChart: 'Display',
   Sparkline: 'Display',
   TreeView: 'Display',
   DataTable: 'Display',

package/src/components/Chart/Chart.tsx

@@ -2,7 +2,6 @@ import {
   forwardRef,
   useEffect,
   useId,
-  useLayoutEffect,
   useMemo,
   useState,
   type CSSProperties,
@@ -16,6 +15,7 @@ import { EmptyState } from '../EmptyState';
 import { useTranslation } from '../../i18n/useTranslation';
 import { useControllableState } from '../_internal/useControllableState';
 import { mergeRefs } from '../_internal/refs';
+import { useSize } from '../_internal/useSize';
 import { ChartLegend } from './ChartLegend';
 import { ChartTable } from './ChartTable';
 import { ChartTooltip } from './ChartTooltip';
@@ -131,27 +131,6 @@ function useDevWarnings(dropped: string[], overflowCount: number, droppedMarkers
   }, [overflowCount]);
 }
 
-function useSize<T extends HTMLElement>() {
-  const [el, setEl] = useState<T | null>(null);
-  const [size, setSize] = useState({ width: 0, height: 0 });
-  useLayoutEffect(() => {
-    if (!el || typeof ResizeObserver === 'undefined') return;
-    const measure = () => {
-      const { width, height } = el.getBoundingClientRect();
-      setSize((prev) =>
-        prev.width === Math.floor(width) && prev.height === Math.floor(height)
-          ? prev
-          : { width: Math.floor(width), height: Math.floor(height) },
-      );
-    };
-    measure();
-    const ro = new ResizeObserver(measure);
-    ro.observe(el);
-    return () => ro.disconnect();
-  }, [el]);
-  return [setEl, size, el] as const;
-}
-
 /**
  * Time-series chart (line, bar, stacked bar, area) that fills a `DashboardWidget variant="chart"` body.
  * @see docs/components/Chart.md

package/src/components/Chart/ChartTooltip.tsx

@@ -9,12 +9,14 @@ export interface ChartTooltipRow {
   slot: number;
   comparison: boolean;
   value: string;
+  /** CSS colour for the swatch; overrides `slot` (FunnelChart's ramp colours). */
+  color?: string;
 }
 
-const swatchStyle = (slot: number) =>
+const swatchStyle = (slot: number, color?: string) =>
   ({
     '--chart-series-color':
-      slot === 0 ? 'var(--chart-total-comparison)' : `var(--chart-series-${slot})`,
+      color ?? (slot === 0 ? 'var(--chart-total-comparison)' : `var(--chart-series-${slot})`),
   }) as CSSProperties;
 
 /**
@@ -72,7 +74,7 @@ export function ChartTooltip({
         <div key={r.key} className={styles.tooltipRow} data-nested={r.comparison || undefined}>
           <span
             className={styles.swatch}
-            style={swatchStyle(r.slot)}
+            style={swatchStyle(r.slot, r.color)}
             data-comparison={r.comparison || undefined}
           />
           <span className={styles.tooltipLabel}>{r.label}</span>

package/src/components/FunnelChart/FunnelChart.module.scss

@@ -0,0 +1,265 @@
+@use './FunnelChart.tokens';
+@use '../../styles/mixins' as *;
+
+.root {
+  display: grid;
+  grid-template-rows: minmax(0, 1fr);
+  gap: var(--funnel-chart-gap);
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
+.root[data-empty] {
+  place-items: center;
+}
+
+// The footnote takes its own row; the plot (or EmptyState) fills the rest.
+.root[data-footnote] {
+  grid-template-rows: minmax(0, 1fr) auto;
+}
+
+.footnote {
+  color: var(--chart-footnote-fg);
+  font-size: var(--chart-footnote-size);
+  line-height: var(--chart-footnote-line-height);
+}
+
+.plot {
+  display: grid;
+  grid-template-rows: minmax(var(--funnel-chart-min-height), 1fr) auto;
+  gap: var(--funnel-chart-gap);
+  min-height: 0;
+  border-radius: var(--chart-plot-radius);
+  outline: none;
+  touch-action: pan-y;
+
+  &:focus-visible {
+    @include focus-ring(var(--funnel-chart-ring));
+  }
+}
+
+.shapes {
+  min-height: 0;
+  overflow: hidden;
+
+  // The SVG's explicit height must not feed back into the row size, or the strip only ever grows
+  // in an auto-height parent. Size containment makes the row fall back to min-height / parent height.
+  contain: size;
+}
+
+.plot[data-clickable] .shapes {
+  cursor: pointer;
+}
+
+.svg {
+  display: block;
+}
+
+.stage {
+  transition: opacity var(--funnel-chart-transition);
+
+  &[data-dimmed] {
+    opacity: var(--funnel-chart-dim-opacity);
+  }
+}
+
+.shape {
+  fill: var(--chart-series-color, currentColor);
+
+  // ponytail: CSS `d` transitions don't animate in Safari (it snaps). Use a JS tween only if Safari users notice.
+  transition: d var(--funnel-chart-transition);
+}
+
+.pill {
+  fill: var(--funnel-chart-pill-bg);
+}
+
+.heroValue,
+.heroLabel {
+  fill: var(--funnel-chart-hero-fg);
+}
+
+.heroValue {
+  font-size: var(--funnel-chart-hero-value-size);
+  font-weight: var(--font-weight-semibold);
+  font-variant-numeric: tabular-nums;
+}
+
+.heroLabel {
+  font-size: var(--funnel-chart-hero-label-size);
+  font-weight: var(--funnel-chart-hero-label-weight);
+}
+
+.pillText {
+  fill: var(--funnel-chart-pill-fg);
+  font-size: var(--funnel-chart-pill-size);
+  font-weight: var(--font-weight-semibold);
+  font-variant-numeric: tabular-nums;
+}
+
+// One column per stage, aligned with the shapes above; dashed rules between columns.
+.footer {
+  display: grid;
+  grid-auto-columns: minmax(0, 1fr);
+  grid-auto-flow: column;
+}
+
+.footer > .cell + .cell {
+  border-inline-start: var(--border-width) dashed var(--funnel-chart-separator);
+}
+
+.cell {
+  display: grid;
+  align-content: start;
+  justify-items: center;
+  padding-inline: var(--space-1);
+  text-align: center;
+  overflow-wrap: anywhere;
+  transition: opacity var(--funnel-chart-transition);
+
+  &[data-dimmed] {
+    opacity: var(--funnel-chart-dim-opacity);
+  }
+
+  // A focused stage hovered away from keeps its focus ring readable (WCAG 2.4.7).
+  &[data-dimmed]:focus-visible {
+    opacity: initial;
+  }
+
+  // Hero shown: the first cell keeps its value and label, invisible, so it is a normal footer-height
+  // box (and a full-size focus ring when it is a button) under the band that shows them.
+  &[data-hero-cell] > * {
+    visibility: hidden;
+  }
+
+  // Clickable stages render the cell as a <button> (reset.scss strips its chrome).
+  &:is(button) {
+    border-radius: var(--chart-plot-radius);
+    cursor: pointer;
+    outline: none;
+  }
+
+  &:is(button):focus-visible {
+    @include focus-ring(var(--funnel-chart-ring));
+  }
+}
+
+.value {
+  // Only labels break anywhere; numbers stay whole.
+  overflow-wrap: normal;
+  font-size: var(--funnel-chart-value-size);
+  font-weight: var(--funnel-chart-value-weight);
+  font-variant-numeric: tabular-nums;
+}
+
+.label {
+  color: var(--funnel-chart-label-fg);
+  font-size: var(--funnel-chart-label-size);
+}
+
+// Vertical layout: a slice of the funnel per row (same `shape`, turned on its side, thin gaps
+// between slices) beside a table-like grid; the rows scroll as a last resort.
+.root[data-orientation='vertical'] .plot {
+  grid-template-rows: none;
+  grid-auto-rows: min-content;
+
+  // One column template shared by the header and every row (subgrid): band track (flexible share, so
+  // band widths stay proportional), swatch, label (wraps when tight), value, step pill.
+  grid-template-columns:
+    minmax(var(--funnel-chart-row-track-min), 1fr) auto minmax(0, max-content)
+    max-content max-content;
+  align-content: start;
+  gap: var(--funnel-chart-slice-gap) var(--funnel-chart-gap);
+  overflow-y: auto;
+
+  // Room for the stage buttons' focus rings, which the scroll container would clip.
+  padding: calc(var(--ring-width) + var(--ring-offset));
+}
+
+// Header and rows span the plot's columns and inherit them (subgrid).
+.header,
+.root[data-orientation='vertical'] .cell {
+  // stylelint-disable-next-line property-disallowed-list -- internal row spanning the plot's own columns (subgrid), not consumer layout
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: subgrid;
+}
+
+.header {
+  padding-block-end: var(--space-1);
+  color: var(--funnel-chart-header-fg);
+  font-size: var(--funnel-chart-header-size);
+}
+
+.headerValue {
+  text-align: end;
+}
+
+// Items stretch to the row (the band needs the full height); text items centre themselves.
+.root[data-orientation='vertical'] .cell {
+  align-content: stretch;
+  align-items: stretch;
+  justify-items: stretch;
+  min-block-size: var(--funnel-chart-row-min-height);
+  padding-inline: 0;
+  text-align: start;
+
+  .label,
+  .value,
+  .swatch,
+  .step {
+    display: grid;
+    align-content: center;
+  }
+
+  .value {
+    font-size: var(--funnel-chart-label-size);
+    text-align: end;
+  }
+}
+
+// The slice stretches to the row; size containment keeps the SVG's aspect ratio out of the row
+// height, which comes from the text (or the min height).
+.bandTrack {
+  display: block;
+  contain: size;
+
+  .svg {
+    inline-size: 100%;
+    block-size: 100%;
+  }
+}
+
+.swatch::before {
+  content: '';
+  inline-size: var(--chart-swatch);
+  block-size: var(--chart-swatch);
+  border-radius: var(--radius-sm);
+  background: var(--chart-series-color, currentColor);
+}
+
+.step {
+  justify-items: start;
+  color: var(--funnel-chart-label-fg);
+  font-size: var(--funnel-chart-pill-size);
+}
+
+.rowPill {
+  padding-inline: var(--space-2);
+  border-radius: var(--radius-full);
+  background: var(--funnel-chart-row-pill-bg);
+  color: var(--funnel-chart-pill-fg);
+  font-size: var(--funnel-chart-pill-size);
+  font-weight: var(--font-weight-semibold);
+  font-variant-numeric: tabular-nums;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .stage,
+  .shape,
+  .cell {
+    transition: none;
+  }
+}

package/src/components/FunnelChart/FunnelChart.tokens.scss

@@ -0,0 +1,72 @@
+// FunnelChart.tokens.scss — component tokens for <FunnelChart>. Stages are a one-hue ramp from
+// --chart-series-1 toward the surface (a stage's `color` slot uses --chart-series-N instead);
+// everything else defaults to primitives or chart tokens.
+@use '../Chart/Chart.tokens';
+
+:root {
+  --funnel-chart-gap: var(--space-2);
+
+  // Ramp: stage i of n is ramp-color mixed (oklab) toward ramp-target by max-mix * i / (n - 1). Light:
+  // target is the surface, 48% keeps the lightest step >= 2:1 against it. Dark (below): target is
+  // --color-fg so later stages get paler, not muddier; 65% passes validate_palette.js --ordinal
+  // --mode dark for 3-4 stages (6 stages: ΔL ~0.04), palest 4-stage step #a6c5eb is still clearly blue.
+  // ponytail: from 5 stages on, adjacent steps fall under the 0.06 OKLCH ΔL ideal (~0.03 at 8); labels,
+  // the vertical table and the tooltip carry identity. A wider ramp needs a darker first stage than series-1.
+  --funnel-chart-ramp-color: var(--chart-series-1);
+  --funnel-chart-surface: var(--color-bg);
+  --funnel-chart-ramp-target: var(--funnel-chart-surface);
+  --funnel-chart-ramp-max-mix: 48%;
+
+  // Hero: the first stage's value and label inside its band (horizontal). Paired with the band
+  // (--funnel-chart-ramp-color, i.e. --chart-series-1), not the accent: the surface colour knocked out
+  // of the band, the same pair the chart series are gated on (3:1). It misses 4.5:1 (only near-black,
+  // no neutral token, clears that in light), so both lines are WCAG large text (24px; 20px bold), 3:1:
+  // @contrast --color-bg on --color-chart-series-1 = 4.42:1 light
+  // @contrast --color-bg on --color-chart-series-1 = 4.45:1 dark
+  // Override --funnel-chart-ramp-color and this pair is yours to recheck; a stage-0 `color` slot hides the hero.
+  --funnel-chart-hero-fg: var(--color-bg);
+  --funnel-chart-hero-value-size: var(--font-size-2xl);
+  --funnel-chart-hero-label-size: var(--font-size-xl);
+  --funnel-chart-hero-label-weight: var(--font-weight-bold);
+
+  // Dashed rule between horizontal footer columns, from stage 2 on.
+  --funnel-chart-separator: var(--color-border);
+
+  // Intrinsic height of the shapes strip when the parent gives no height.
+  --funnel-chart-min-height: calc(var(--space-16) * 2);
+  --funnel-chart-pill-bg: var(--color-bg);
+  --funnel-chart-pill-fg: var(--color-fg);
+  --funnel-chart-pill-size: var(--font-size-xs);
+  --funnel-chart-value-size: var(--font-size-lg);
+  --funnel-chart-value-weight: var(--font-weight-semibold);
+  --funnel-chart-label-fg: var(--color-fg-muted);
+  --funnel-chart-label-size: var(--font-size-sm);
+  --funnel-chart-dim-opacity: var(--chart-dim-opacity);
+  --funnel-chart-ring: var(--chart-ring);
+  --funnel-chart-transition: var(--transition-slow);
+
+  // Vertical layout (narrow containers): rows of a funnel slice beside a table-like grid (swatch,
+  // stage, value, step pill). The min height keeps a short row's taper readable; the slice gap
+  // separates the slices with a thin line of surface.
+  --funnel-chart-row-min-height: var(--space-10);
+  --funnel-chart-slice-gap: var(--space-05);
+  --funnel-chart-header-fg: var(--color-fg-muted);
+  --funnel-chart-header-size: var(--font-size-xs);
+
+  // Narrowest the band track gets beside the table, so the band never vanishes.
+  --funnel-chart-row-track-min: var(--space-16);
+  --funnel-chart-row-pill-bg: var(--color-bg-muted);
+}
+
+// Dark ramp: same scopes as the generated dark.scss (forced dark, and OS dark unless forced light).
+:root[data-theme='dark'] {
+  --funnel-chart-ramp-target: var(--color-fg);
+  --funnel-chart-ramp-max-mix: 65%;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) {
+    --funnel-chart-ramp-target: var(--color-fg);
+    --funnel-chart-ramp-max-mix: 65%;
+  }
+}