gridsmith-ui 0.30.1 → 0.31.0

package/dist/charts.js

@@ -1,14 +1,20 @@
 "use client";
-import { TITLE_TEXT, Skeleton } from './chunk-6C2IUMY7.js';
+import { SegmentedControl, TITLE_TEXT, Skeleton } from './chunk-U7WBI4AV.js';
+import { useKeyboardScroll } from './chunk-GP2COVJC.js';
 import { useFormatLocale, useHydrated } from './chunk-LJYSVZMI.js';
+import './chunk-BKYWKMUN.js';
 import { formatLocale } from './chunk-7QLXYRPD.js';
-import { elementType } from './chunk-NKUCS67T.js';
-import { mergeRefs } from './chunk-7Q46JXSK.js';
-import { cn, GLASS_SURFACE } from './chunk-YL5KD5RC.js';
-import { createContext, forwardRef, useContext, useRef, useState, useMemo, useLayoutEffect, useEffect, useId, useSyncExternalStore, Children, isValidElement } from 'react';
-import { ResponsiveContainer, BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Tooltip, Bar, LineChart as LineChart$1, Line, AreaChart as AreaChart$1, Area, PieChart as PieChart$1, Pie, Cell, ComposedChart, ScatterChart as ScatterChart$1, ZAxis, Scatter, Symbols, RadarChart as RadarChart$1, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar, RadialBarChart as RadialBarChart$1, RadialBar, FunnelChart as FunnelChart$1, Funnel, LabelList, Treemap, Sankey, Text, Legend, getNiceTickValues, Rectangle } from 'recharts';
+import './chunk-7RKC5C7G.js';
+import { FormChangeCtx } from './chunk-72SDAX54.js';
+import { elementType } from './chunk-2Q4HOGEI.js';
+import './chunk-HUNEJIKV.js';
+import { mergeRefs } from './chunk-XSQD3UGY.js';
+import { warnOnce } from './chunk-53F7GVBQ.js';
+import { cn, FOCUS_INSET, GLASS_SURFACE } from './chunk-OWQ7M6R7.js';
+import { createContext, forwardRef, useContext, useRef, useState, useId, useMemo, useLayoutEffect, useEffect, useCallback, useSyncExternalStore, Children, isValidElement } from 'react';
+import { ResponsiveContainer, BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Tooltip, Bar, LineChart as LineChart$1, Line, AreaChart as AreaChart$1, Area, PieChart as PieChart$1, Pie, Cell, ComposedChart, ScatterChart as ScatterChart$1, ZAxis, Scatter, Symbols, RadarChart as RadarChart$1, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar, RadialBarChart as RadialBarChart$1, RadialBar, FunnelChart as FunnelChart$1, Funnel, LabelList, Treemap, Sankey, Text, Legend, ReferenceArea, ReferenceLine, getNiceTickValues, Rectangle, usePlotArea, ZIndexLayer, DefaultZIndexes } from 'recharts';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 var CHART_TOKENS = [
   "--ds-chart-1",
@@ -18,6 +24,7 @@ var CHART_TOKENS = [
   "--ds-chart-5",
   "--ds-chart-6"
 ];
+var CHART_COLOR_COUNT = CHART_TOKENS.length;
 var CHART_TOKENS_SOFT = [
   "--ds-chart-1-soft",
   "--ds-chart-2-soft",
@@ -40,6 +47,7 @@ var FALLBACK_COLORS = {
   "--ds-chart-5-soft": "rgba(8, 145, 178, 0.3)",
   "--ds-chart-6-soft": "rgba(124, 58, 237, 0.3)",
   "--ds-bg-surface": "#ffffff",
+  "--ds-bg-canvas": "#ffffff",
   "--ds-border-subtle": "#e5e7eb",
   "--ds-text-primary": "#111827",
   "--ds-text-secondary": "#6b7280",
@@ -275,30 +283,30 @@ function categoryKind(labels, locale) {
       return "names";
     }
     if (raw instanceof Date) continue;
-    const text = String(raw).trim();
-    if (!text) continue;
-    if (!list.some((re) => re.test(text))) return "names";
+    const text2 = String(raw).trim();
+    if (!text2) continue;
+    if (!list.some((re) => re.test(text2))) return "names";
   }
   return "scale";
 }
 function resolvedAxisFont(el) {
   const doc = el.ownerDocument;
   const view = doc.defaultView;
-  let probe = el.querySelector("[data-chart-probe]");
+  let probe2 = el.querySelector("[data-chart-probe]");
   let temporary = false;
-  if (!probe) {
-    probe = doc.createElement("span");
-    probe.setAttribute("aria-hidden", "true");
-    probe.style.cssText = "position:absolute;visibility:hidden;pointer-events:none;white-space:nowrap;font-size:var(--ds-font-size-xs);font-family:var(--ds-font-sans)";
-    el.appendChild(probe);
+  if (!probe2) {
+    probe2 = doc.createElement("span");
+    probe2.setAttribute("aria-hidden", "true");
+    probe2.style.cssText = "position:absolute;visibility:hidden;pointer-events:none;white-space:nowrap;font-size:var(--ds-font-size-xs);font-family:var(--ds-font-sans)";
+    el.appendChild(probe2);
     temporary = true;
   }
-  const cs = view?.getComputedStyle(probe);
+  const cs = view?.getComputedStyle(probe2);
   const px = parseFloat(cs?.fontSize ?? "") || 12;
   const family = (cs?.fontFamily ?? "").trim() || "sans-serif";
   const style = cs?.fontStyle && cs.fontStyle !== "normal" ? `${cs.fontStyle} ` : "";
   const weight = cs?.fontWeight && cs.fontWeight !== "400" && cs.fontWeight !== "normal" ? `${cs.fontWeight} ` : "";
-  if (temporary) probe.remove();
+  if (temporary) probe2.remove();
   return { font: `${style}${weight}${px}px ${family}`, px };
 }
 var shared = null;
@@ -321,66 +329,659 @@ function createAxisMeasurer(el) {
   const { font, px } = resolvedAxisFont(el);
   ctx.font = font;
   const widths = /* @__PURE__ */ new Map();
-  const measure = (text) => {
-    let w = widths.get(text);
+  const measure2 = (text2) => {
+    let w = widths.get(text2);
     if (w === void 0) {
       ctx.font = font;
-      w = ctx.measureText(text).width;
-      widths.set(text, w);
+      w = ctx.measureText(text2).width;
+      widths.set(text2, w);
     }
     return w;
   };
-  return { measure, px, font };
+  return { measure: measure2, px, font };
 }
 var ELLIPSIS = "\u2026";
 var letters = (s) => s.replace(/\s+/g, "").replace(/…/g, "").length;
-function prefixThatFits(text, width, measure, suffix = "") {
+function prefixThatFits(text2, width, measure2, suffix = "") {
   let lo = 1;
-  let hi = text.length;
+  let hi = text2.length;
   let best = 0;
   while (lo <= hi) {
     const mid = lo + hi >> 1;
-    if (measure(text.slice(0, mid).trimEnd() + suffix) <= width) {
+    if (measure2(text2.slice(0, mid).trimEnd() + suffix) <= width) {
       best = mid;
       lo = mid + 1;
     } else hi = mid - 1;
   }
   return best;
 }
-function fitLabel(name, width, measure) {
-  const text = name.replace(/\s+/g, " ").trim();
-  if (!measure || !text || width <= 0 || measure(text) <= width) return { lines: [text], cut: false, shown: letters(text) };
-  const words = text.split(" ");
+function fitLabel(name, width, measure2) {
+  const text2 = name.replace(/\s+/g, " ").trim();
+  if (!measure2 || !text2 || width <= 0 || measure2(text2) <= width) return { lines: [text2], cut: false, shown: letters(text2) };
+  const words = text2.split(" ");
   let first = "";
   let firstShown = "";
   let rest = "";
   for (let i = words.length - 1; i >= 1; i--) {
     const candidate = words.slice(0, i).join(" ");
-    if (measure(candidate) <= width) {
+    if (measure2(candidate) <= width) {
       first = firstShown = candidate;
       rest = words.slice(i).join(" ");
       break;
     }
   }
   if (!first) {
-    const k2 = Math.max(1, prefixThatFits(text, width, measure, "-"));
-    firstShown = text.slice(0, k2).trimEnd();
-    rest = text.slice(k2).trimStart();
-    first = rest && !text.slice(k2 - 1, k2 + 1).includes(" ") ? `${firstShown}-` : firstShown;
+    const k2 = Math.max(1, prefixThatFits(text2, width, measure2, "-"));
+    firstShown = text2.slice(0, k2).trimEnd();
+    rest = text2.slice(k2).trimStart();
+    first = rest && !text2.slice(k2 - 1, k2 + 1).includes(" ") ? `${firstShown}-` : firstShown;
   }
   if (!rest) return { lines: [first], cut: false, shown: letters(firstShown) };
-  if (measure(rest) <= width) return { lines: [first, rest], cut: false, shown: letters(firstShown) + letters(rest) };
-  const k = prefixThatFits(rest, width, measure, ELLIPSIS);
+  if (measure2(rest) <= width) return { lines: [first, rest], cut: false, shown: letters(firstShown) + letters(rest) };
+  const k = prefixThatFits(rest, width, measure2, ELLIPSIS);
   const kept = k > 0 ? rest.slice(0, k).trimEnd() : "";
   return { lines: [first, kept + ELLIPSIS], cut: true, shown: letters(firstShown) + letters(kept) };
 }
 var MIN_NAME_CHARS = 6;
-function namesCutShort(names, width, measure) {
+function namesCutShort(names, width, measure2) {
   return names.some((n) => {
-    const fit = fitLabel(n, width, measure);
+    const fit = fitLabel(n, width, measure2);
     return fit.cut && fit.shown < MIN_NAME_CHARS;
   });
 }
+var TICK_COUNT = 5;
+var TIME_UNITS = [["hour", 36e5], ["minute", 6e4], ["second", 1e3], ["millisecond", 1]];
+var BYTE_UNITS = [["petabyte", 1e15], ["terabyte", 1e12], ["gigabyte", 1e9], ["megabyte", 1e6], ["kilobyte", 1e3], ["byte", 1]];
+var MAX_FRACTION = 10;
+function exact(format, maxDigits = MAX_FRACTION) {
+  for (let digits = 0; digits < maxDigits; digits++) {
+    const label = format(digits);
+    if (label === format(digits + 6)) return label;
+  }
+  return format(maxDigits);
+}
+var unitFormat = (unit, value, locale) => (digits) => new Intl.NumberFormat(locale, { style: "unit", unit, unitDisplay: "short", maximumFractionDigits: digits }).format(value);
+var unitsOf = (format) => format === "bytes" ? BYTE_UNITS : TIME_UNITS;
+function unitReached(units, value) {
+  return units.find(([, size]) => Math.abs(value) >= size) ?? units[units.length - 1];
+}
+function axisUnit(units, ticks) {
+  const largest = Math.max(0, ...ticks.map(Math.abs));
+  const exactIn = (size) => ticks.every((t) => Math.abs(t / size * 100 - Math.round(t / size * 100)) < 1e-6);
+  return units.find(([, size]) => largest / size >= 1 && exactIn(size)) ?? units[units.length - 1];
+}
+function valueAxisTicks(values) {
+  const finite = values.filter(Number.isFinite);
+  if (!finite.length) return [];
+  const lo = Math.min(0, ...finite);
+  const hi = Math.max(0, ...finite);
+  if (lo === hi) return [lo];
+  return getNiceTickValues([lo, hi], TICK_COUNT, true).map(Number);
+}
+function axisTickFormatter(values, format, locale) {
+  if (typeof format === "function") return format;
+  if (format === "percent") return (value) => exact((d) => new Intl.NumberFormat(locale, { style: "percent", maximumFractionDigits: d }).format(value / 100));
+  if (format === "milliseconds" || format === "bytes") {
+    const [unit, size] = axisUnit(unitsOf(format), valueAxisTicks(values));
+    return (value) => exact(unitFormat(unit, value / size, locale));
+  }
+  const compact = (value) => exact((d) => new Intl.NumberFormat(locale, { notation: "compact", maximumFractionDigits: d }).format(value));
+  const plain = (value) => exact((d) => new Intl.NumberFormat(locale, { maximumFractionDigits: d }).format(value));
+  const largest = Math.max(0, ...values.filter(Number.isFinite).map(Math.abs));
+  return largest >= COMPACT_FROM ? compact : plain;
+}
+var COMPACT_FROM = 1e4;
+function fullValueFormatter(format, locale) {
+  if (typeof format === "function") return format;
+  if (format === void 0 || format === "number") return (value) => value.toLocaleString(locale);
+  if (format === "percent") return (value) => exact((d) => new Intl.NumberFormat(locale, { style: "percent", maximumFractionDigits: d }).format(value / 100), 4);
+  return (value) => {
+    const [unit, size] = unitReached(unitsOf(format), value);
+    return exact(unitFormat(unit, value / size, locale), 4);
+  };
+}
+function numberOf(raw) {
+  const v = typeof raw === "number" ? raw : typeof raw === "string" && raw.trim() !== "" ? Number(raw) : NaN;
+  return Number.isFinite(v) ? v : null;
+}
+function axisExtent(data, series) {
+  return data.flatMap((row) => {
+    const own = [];
+    const up = /* @__PURE__ */ new Map();
+    const down = /* @__PURE__ */ new Map();
+    for (const s of series) {
+      const v = numberOf(row[s.dataKey]);
+      if (v === null) continue;
+      if (s.stack == null) own.push(v);
+      else if (v >= 0) up.set(s.stack, (up.get(s.stack) ?? 0) + v);
+      else down.set(s.stack, (down.get(s.stack) ?? 0) + v);
+    }
+    return [...own, ...up.values(), ...down.values()];
+  });
+}
+function seriesValues(data, keys, stacked = false) {
+  return axisExtent(data, keys.map((dataKey) => ({ dataKey, stack: stacked ? "stack" : null })));
+}
+
+// ../../showcase/src/components/charts/chart-access.ts
+var isNumber = (v) => typeof v === "number" && Number.isFinite(v);
+var text = (v) => v == null ? "" : String(v);
+function listOf(items) {
+  if (items.length <= 1) return items[0] ?? "";
+  return `${items.slice(0, -1).join(", ")} and ${items[items.length - 1]}`;
+}
+function percent(part, whole) {
+  if (!(whole > 0)) return "0%";
+  const p = part / whole * 100;
+  if (p > 0 && p < 1) return "under 1%";
+  if (p > 99 && p < 100) return "over 99%";
+  return `${Math.round(p)}%`;
+}
+function referenceNote(r, format) {
+  return isNumber(r.to) ? `${r.label}: ${format(r.value)} to ${format(r.to)}` : `${r.label}: ${format(r.value)}`;
+}
+var SUMMED = 3;
+function seriesSentence(label, points, over, f) {
+  if (!points.length) return null;
+  if (points.length === 1) return `${label}: ${f(points[0].value)} (${points[0].cat}).`;
+  const high = points.reduce((a, b) => b.value > a.value ? b : a);
+  const low = points.reduce((a, b) => b.value < a.value ? b : a);
+  if (high.value === low.value) return over === "scale" ? `${label}: ${f(high.value)} throughout.` : `${label}: ${f(high.value)} for all ${points.length}.`;
+  const extremes = `highest ${f(high.value)} (${high.cat}), lowest ${f(low.value)} (${low.cat})`;
+  if (over === "names") return `${label}: ${extremes}.`;
+  const first = points[0], end = points[points.length - 1];
+  const steps = points.slice(1).map((p, i) => p.value - points[i].value);
+  const up = steps.every((d) => d >= 0), down = steps.every((d) => d <= 0);
+  const course = `${up ? "up from" : down ? "down from" : "from"} ${f(first.value)} (${first.cat}) to ${f(end.value)} (${end.cat})`;
+  return up || down ? `${label}: ${course}.` : `${label}: ${course}, ${extremes}.`;
+}
+function cartesianAccess(o) {
+  const { data, categoryKey, series, format } = o;
+  const cats = data.map((row) => text(row[categoryKey]));
+  const last = data.length - 1;
+  const forecastFrom = o.forecast && o.forecast.from >= 0 && o.forecast.from < data.length ? o.forecast.from : -1;
+  const rows = data.map((row, i) => [
+    forecastFrom >= 0 && i >= forecastFrom ? `${cats[i]} (${o.forecast.label})` : cats[i],
+    ...series.map((s) => {
+      const v = numberOf(row[s.dataKey]);
+      return v === null ? "\u2013" : format(v, s.dataKey);
+    })
+  ]);
+  const runs = forecastFrom < last ? `${cats[forecastFrom]} to ${cats[last]}` : cats[forecastFrom];
+  const forecastNote = forecastFrom >= 0 ? `${o.forecast.label}: ${forecastFrom === 0 ? `every value (${runs})` : runs}` : null;
+  const notes = [
+    ...(o.references ?? []).map((r) => referenceNote(r, (v) => format(v))),
+    ...forecastNote ? [forecastNote] : []
+  ];
+  const names = series.map((s) => s.label);
+  const span = o.over === "scale" && cats.length > 1 ? ` from ${cats[0]} to ${cats[last]}` : cats.length === 1 ? ` for ${cats[0]}` : ` across ${cats.length} categories`;
+  const sentences = [`${o.kind}: ${listOf(names)}${span}.`];
+  const measured = forecastFrom > 0 ? forecastFrom : data.length;
+  for (const s of series.slice(0, SUMMED)) {
+    const points = data.slice(0, measured).map((row, i) => ({ cat: cats[i], value: numberOf(row[s.dataKey]) })).filter((p) => p.value !== null);
+    const said = seriesSentence(s.label, points, o.over, (v) => format(v, s.dataKey));
+    if (said) sentences.push(said);
+  }
+  if (series.length > SUMMED) sentences.push(`And ${series.length - SUMMED} more series.`);
+  for (const note of notes) sentences.push(`${note}.`);
+  return {
+    table: { columns: [o.categoryHeading || "Category", ...names], numeric: [false, ...series.map(() => true)], rows, notes },
+    description: sentences.join(" ")
+  };
+}
+function partsAccess(o) {
+  const items = o.items.map((p) => ({ ...p, value: numberOf(p.value), max: numberOf(p.max) })).filter((p) => p.value !== null);
+  const f = (v) => o.format(v);
+  const total = items.reduce((sum, p) => sum + Math.max(0, p.value), 0);
+  const largest = items.reduce((a, b) => !a || b.value > a.value ? b : a, null);
+  const smallest = items.reduce((a, b) => !a || b.value < a.value ? b : a, null);
+  const grouped = o.kind === "treemap" && items.some((p) => p.group);
+  const withMax = o.kind === "radial" && items.some((p) => p.max !== null);
+  if (o.kind === "funnel") {
+    const first = items[0], last = items[items.length - 1];
+    return {
+      table: {
+        columns: ["Stage", "Value", "Of the first stage"],
+        numeric: [false, true, true],
+        rows: items.map((p) => [p.name, f(p.value), first && first.value > 0 ? percent(p.value, first.value) : "\u2013"]),
+        notes: []
+      },
+      // a first stage of nothing has no share to carry through
+      description: first && last && items.length > 1 ? `Funnel of ${items.length} stages, from ${first.name} (${f(first.value)}) to ${last.name} (${f(last.value)})${first.value > 0 ? `: ${percent(last.value, first.value)} of the first stage reach the last` : ""}.` : `Funnel of ${items.length} ${items.length === 1 ? "stage" : "stages"}.`
+    };
+  }
+  const columns = [...grouped ? ["Group"] : [], "Name", "Value", ...withMax ? ["Of its maximum"] : o.kind === "radial" ? [] : ["Share"]];
+  const rows = items.map((p) => [
+    ...grouped ? [p.group ?? ""] : [],
+    p.name,
+    f(p.value),
+    ...withMax ? [p.max !== null ? percent(p.value, p.max) : "\u2013"] : o.kind === "radial" ? [] : [percent(p.value, total)]
+  ]);
+  const what = o.kind === "pie" ? "Pie chart" : o.kind === "radial" ? "Radial bar chart" : "Treemap";
+  const unit = o.kind === "pie" ? "parts" : o.kind === "radial" ? "bars" : "items";
+  let description = `${what} of ${items.length} ${items.length === 1 ? unit.replace(/s$/, "") : unit}`;
+  const groups = new Set(items.map((p) => p.group)).size;
+  if (grouped) description += ` in ${groups} ${groups === 1 ? "group" : "groups"}`;
+  if (largest && smallest && items.length > 1) {
+    description += o.kind === "radial" ? `: ${largest.name} the highest (${f(largest.value)}), ${smallest.name} the lowest (${f(smallest.value)}).` : `: ${largest.name} the largest (${f(largest.value)}, ${percent(largest.value, total)}), ${smallest.name} the smallest (${f(smallest.value)}, ${percent(smallest.value, total)}).`;
+  } else {
+    description += ".";
+  }
+  return {
+    table: { columns, numeric: columns.map((c) => c !== "Group" && c !== "Name"), rows, notes: [], rowHeader: grouped ? 1 : 0 },
+    description
+  };
+}
+function pointsAccess(o) {
+  const withZ = !!o.zHeading && o.series.some((s) => s.points.some((p) => numberOf(p.z) !== null));
+  const rows = [];
+  const xs = [];
+  const ys = [];
+  for (const s of o.series) {
+    for (const p of s.points) {
+      const x = numberOf(p.x), y = numberOf(p.y), z = numberOf(p.z);
+      if (x === null || y === null) continue;
+      xs.push(x);
+      ys.push(y);
+      rows.push([s.name, o.formatX(x), o.formatY(y), ...withZ ? [z !== null ? String(z) : "\u2013"] : []]);
+    }
+  }
+  const range = (vs, fmt) => vs.length ? `from ${fmt(Math.min(...vs))} to ${fmt(Math.max(...vs))}` : "";
+  return {
+    table: {
+      columns: ["Series", o.xHeading, o.yHeading, ...withZ ? [o.zHeading] : []],
+      numeric: [false, true, true, ...withZ ? [true] : []],
+      rows,
+      notes: []
+    },
+    description: `Scatter chart of ${rows.length} ${rows.length === 1 ? "point" : "points"} in ${o.series.length} ${o.series.length === 1 ? "series" : "series"}${xs.length ? `: ${o.xHeading} ${range(xs, o.formatX)}, ${o.yHeading} ${range(ys, o.formatY)}` : ""}.`
+  };
+}
+function flowAccess(o) {
+  const name = (i) => o.nodes[i]?.name ?? String(i);
+  const undrawn = new Set(o.undrawn ?? []);
+  const links = o.links.map((l) => ({ ...l, value: numberOf(l.value), drawn: !undrawn.has(l) })).filter((l) => l.value !== null);
+  const largest = links.filter((l) => l.drawn).reduce((a, b) => !a || b.value > a.value ? b : a, null);
+  const back = links.filter((l) => !l.drawn);
+  const backSaid = back.length === 1 ? ` The flow from ${name(back[0].source)} to ${name(back[0].target)} runs back, so it isn't drawn.` : back.length > 1 ? ` ${back.length} flows that run back aren't drawn.` : "";
+  return {
+    table: {
+      columns: ["From", "To", "Value"],
+      numeric: [false, false, true],
+      rows: links.map((l) => [name(l.source), name(l.target), o.format(l.value)]),
+      notes: back.map((l) => `Not drawn, as it runs back: ${name(l.source)} to ${name(l.target)} (${o.format(l.value)})`)
+    },
+    description: `Flow chart of ${links.length} ${links.length === 1 ? "flow" : "flows"} between ${o.nodes.length} ${o.nodes.length === 1 ? "point" : "points"}${largest ? `: the largest from ${name(largest.source)} to ${name(largest.target)} (${o.format(largest.value)})` : ""}.${backSaid}`
+  };
+}
+var GAP = 2;
+var overlaps = (a, b) => a.x < b.x + b.width && b.x < a.x + a.width && a.y < b.y + b.height && b.y < a.y + a.height;
+function placeNames(names) {
+  const placed = [];
+  const moves = /* @__PURE__ */ new Map();
+  for (const [id, box] of [...names].sort((a, b) => a[1].order - b[1].order)) {
+    const clear = (away) => {
+      let dy2 = 0;
+      for (let tries = 0; tries <= placed.length; tries++) {
+        const hit = placed.find((p) => overlaps({ ...box, y: box.y + dy2 }, p));
+        if (!hit) break;
+        dy2 = away > 0 ? hit.y + hit.height + GAP - box.y : hit.y - GAP - box.height - box.y;
+      }
+      return dy2;
+    };
+    const inside = (dy2) => !box.bounds || box.y + dy2 >= box.bounds.top - 0.5 && box.y + dy2 + box.height <= box.bounds.bottom + 0.5;
+    let dy = clear(box.away);
+    if (!inside(dy)) {
+      const other = clear(box.away > 0 ? -1 : 1);
+      if (inside(other)) dy = other;
+    }
+    moves.set(id, dy);
+    placed.push({ ...box, y: box.y + dy });
+  }
+  return moves;
+}
+var PlotNamesContext = createContext(null);
+function PlotNames({ children }) {
+  const boxes = useRef(/* @__PURE__ */ new Map());
+  const [moves, setMoves] = useState(() => /* @__PURE__ */ new Map());
+  const place = useCallback((id, box) => {
+    if (box) boxes.current.set(id, box);
+    else boxes.current.delete(id);
+    const next = placeNames([...boxes.current]);
+    setMoves((prev) => prev.size === next.size && [...next].every(([k, v]) => prev.get(k) === v) ? prev : next);
+  }, []);
+  const value = useMemo(() => ({ place, moves }), [place, moves]);
+  return /* @__PURE__ */ jsx(PlotNamesContext.Provider, { value, children });
+}
+function markOf(index, marks) {
+  return (index + Math.floor(index / CHART_COLOR_COUNT)) % marks;
+}
+var DASHES = [void 0, "6 3", "2 3", "8 3 2 3", "12 3 3 3", "1 4"];
+function seriesDash(index, count) {
+  return count >= 2 ? DASHES[markOf(index, DASHES.length)] : void 0;
+}
+function lineDashes(lines) {
+  const marks = lines.map((line, i) => lines.length >= 2 ? markOf(i, DASHES.length) : line.dashed ? 1 : 0);
+  const colour = (i) => i % CHART_COLOR_COUNT;
+  const inColour = (i, k, ...but) => marks.some((m, j) => m === k && colour(j) === colour(i) && j !== i && !but.includes(j));
+  lines.forEach((line, i) => {
+    if (!line.dashed || marks[i] !== 0) return;
+    const free = DASHES.findIndex((_, k) => k > 0 && !marks.includes(k));
+    if (free > 0) {
+      marks[i] = free;
+      return;
+    }
+    const trade = lines.findIndex((other, j) => j !== i && !other.dashed && marks[j] !== 0 && !inColour(i, marks[j], j) && !inColour(j, 0, i));
+    if (trade >= 0) {
+      [marks[i], marks[trade]] = [marks[trade], 0];
+      return;
+    }
+    const own = DASHES.findIndex((_, k) => k > 0 && !inColour(i, k));
+    marks[i] = own > 0 ? own : 1;
+  });
+  return marks.map((k) => DASHES[k]);
+}
+var SYMBOLS = ["circle", "square", "triangle", "diamond", "cross", "star", "wye"];
+function seriesSymbol(index, count) {
+  return count >= 2 ? SYMBOLS[index % SYMBOLS.length] : "circle";
+}
+var PATTERNS = 5;
+function seriesPatternKind(index, count) {
+  const mark = markOf(index, PATTERNS + 1);
+  return count < 2 || mark === 0 ? void 0 : mark - 1;
+}
+function seriesPattern(chartId, index, count) {
+  if (seriesPatternKind(index, count) === void 0) return void 0;
+  return `${chartId.replace(/[^a-zA-Z0-9_-]/g, "")}-series-${index}`;
+}
+var aheadPattern = (id) => `${id}-ahead`;
+function parseRgba(colour) {
+  const c = colour.trim();
+  const hex = /^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.exec(c)?.[1];
+  if (hex) {
+    const full = hex.length <= 4 ? [...hex].map((h) => h + h).join("") : hex;
+    const n = (k) => parseInt(full.slice(k * 2, k * 2 + 2), 16);
+    return [n(0), n(1), n(2), full.length === 8 ? n(3) / 255 : 1];
+  }
+  const fn = /^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)(?:\s*[,/]\s*([\d.]+%?))?\s*\)$/i.exec(c);
+  if (!fn) return null;
+  const alpha = fn[4] === void 0 ? 1 : fn[4].endsWith("%") ? parseFloat(fn[4]) / 100 : parseFloat(fn[4]);
+  return [Number(fn[1]), Number(fn[2]), Number(fn[3]), alpha];
+}
+var probe;
+var drawnColours = /* @__PURE__ */ new Map();
+var UNREAD = "rgba(1, 2, 3, 0.5)";
+function drawn(colour, ground = [255, 255, 255]) {
+  const key = `${colour}|${ground.join(",")}`;
+  if (drawnColours.has(key)) return drawnColours.get(key);
+  let out = null;
+  const parsed = parseRgba(colour);
+  if (parsed) {
+    const [r, g, b, a] = parsed;
+    out = [r, g, b].map((v, i) => Math.round(v * a + ground[i] * (1 - a)));
+  } else {
+    if (probe === void 0) {
+      try {
+        probe = typeof document === "undefined" || /jsdom/i.test(navigator.userAgent) ? null : document.createElement("canvas").getContext("2d", { willReadFrequently: true });
+      } catch {
+        probe = null;
+      }
+    }
+    if (probe) {
+      probe.fillStyle = UNREAD;
+      const unread = probe.fillStyle;
+      probe.fillStyle = colour;
+      if (probe.fillStyle !== unread) {
+        probe.fillStyle = `rgb(${ground.join(",")})`;
+        probe.fillRect(0, 0, 1, 1);
+        probe.fillStyle = colour;
+        probe.fillRect(0, 0, 1, 1);
+        const d = probe.getImageData(0, 0, 1, 1).data;
+        out = [d[0], d[1], d[2]];
+      }
+    }
+  }
+  drawnColours.set(key, out);
+  return out;
+}
+var channel = (c) => c / 255 <= 0.04045 ? c / 255 / 12.92 : ((c / 255 + 0.055) / 1.055) ** 2.4;
+var luminance = ([r, g, b]) => 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
+function contrast(a, b) {
+  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+  return (hi + 0.05) / (lo + 0.05);
+}
+var css = (c) => `rgb(${c.join(" ")})`;
+function chartGround(surface, canvas) {
+  const page = drawn(canvas);
+  return page && drawn(surface, page);
+}
+function groundColour(surface, canvas) {
+  const ground = chartGround(surface, canvas);
+  return ground ? css(ground) : surface;
+}
+function markInk(fill, surface, ink, canvas) {
+  const ground = chartGround(surface, canvas);
+  const filled = ground && drawn(fill, ground);
+  const text2 = ground && drawn(ink, ground);
+  if (!ground || !filled || !text2) return surface;
+  const theme = contrast(filled, text2) >= contrast(filled, ground) ? text2 : ground;
+  if (contrast(filled, theme) >= 3) return css(theme);
+  return css(contrast(filled, [0, 0, 0]) >= contrast(filled, [255, 255, 255]) ? [0, 0, 0] : [255, 255, 255]);
+}
+var AHEAD_STRENGTH = 0.45;
+function aheadFill(colour, surface, canvas) {
+  const ground = chartGround(surface, canvas);
+  const own = ground && drawn(colour, ground);
+  if (!ground || !own) return null;
+  return css(own.map((v, i) => Math.round(v * AHEAD_STRENGTH + ground[i] * (1 - AHEAD_STRENGTH))));
+}
+function Pattern({ id, kind, fill, on }) {
+  const mark = { stroke: on, strokeWidth: 1.5 };
+  return /* @__PURE__ */ jsxs("pattern", { id, width: 6, height: 6, patternUnits: "userSpaceOnUse", children: [
+    /* @__PURE__ */ jsx("rect", { width: 6, height: 6, fill }),
+    kind === 0 && /* @__PURE__ */ jsx("path", { d: "M-1,1 l2,-2 M0,6 l6,-6 M5,7 l2,-2", ...mark }),
+    kind === 1 && /* @__PURE__ */ jsx("circle", { cx: 3, cy: 3, r: 1.3, fill: on }),
+    kind === 2 && /* @__PURE__ */ jsx("path", { d: "M-1,1 l2,-2 M0,6 l6,-6 M5,7 l2,-2 M-1,5 l2,2 M0,0 l6,6 M5,-1 l2,2", ...mark, strokeWidth: 1 }),
+    kind === 3 && /* @__PURE__ */ jsx("path", { d: "M0,3 h6", ...mark }),
+    kind === 4 && /* @__PURE__ */ jsx("path", { d: "M3,0 v6", ...mark })
+  ] });
+}
+function SeriesPatterns({ chartId, colors, surface, ahead = false }) {
+  const ink = useResolvedToken("--ds-text-primary");
+  const canvas = useResolvedToken("--ds-bg-canvas");
+  if (colors.length < 2) return null;
+  return /* @__PURE__ */ jsx("defs", { children: colors.map((color, i) => {
+    const id = seriesPattern(chartId, i, colors.length);
+    const kind = seriesPatternKind(i, colors.length);
+    if (!id || kind === void 0) return null;
+    const faint = ahead ? aheadFill(color, surface, canvas) : null;
+    return [
+      /* @__PURE__ */ jsx(Pattern, { id, kind, fill: color, on: markInk(color, surface, ink, canvas) }, id),
+      faint && /* @__PURE__ */ jsx(Pattern, { id: aheadPattern(id), kind, fill: faint, on: markInk(faint, surface, ink, canvas) }, aheadPattern(id))
+    ];
+  }) });
+}
+function SeriesSwatch({ mark, color }) {
+  if (mark?.kind === "line") {
+    return /* @__PURE__ */ jsx("svg", { width: 18, height: 10, "aria-hidden": "true", className: "shrink-0", children: /* @__PURE__ */ jsx("line", { x1: 1, y1: 5, x2: 17, y2: 5, stroke: mark.color, strokeWidth: 2.5, strokeDasharray: mark.dash, strokeLinecap: "butt" }) });
+  }
+  if (mark?.kind === "symbol") {
+    return /* @__PURE__ */ jsx("svg", { width: 12, height: 12, "aria-hidden": "true", className: "shrink-0", children: /* @__PURE__ */ jsx(Symbols, { cx: 6, cy: 6, size: 60, type: mark.symbol, fill: mark.color }) });
+  }
+  const fill = mark?.kind === "fill" && mark.pattern ? `url(#${mark.pattern})` : mark?.color ?? color;
+  return /* @__PURE__ */ jsx("svg", { width: 12, height: 12, "aria-hidden": "true", className: "shrink-0", children: /* @__PURE__ */ jsx("rect", { x: 0.75, y: 0.75, width: 10.5, height: 10.5, rx: 2.5, fill, stroke: mark?.kind === "fill" && mark.edge || mark?.color || color, strokeWidth: 1.5 }) });
+}
+var isNumber2 = (v) => typeof v === "number" && Number.isFinite(v);
+var OFFSET = 5;
+function PlotName({ x = 0, y = 0, viewBox, value, id, order, place, ink }) {
+  const names = useContext(PlotNamesContext);
+  const plot = usePlotArea();
+  const surface = useResolvedToken("--ds-bg-surface");
+  const canvas = useResolvedToken("--ds-bg-canvas");
+  const halo = useMemo(() => groundColour(surface, canvas), [surface, canvas]);
+  const text2 = useRef(null);
+  const words = String(value ?? "");
+  const [size, setSize] = useState(null);
+  useLayoutEffect(() => {
+    const drawn2 = text2.current && typeof text2.current.getBBox === "function" ? text2.current.getBBox() : null;
+    const next = drawn2 && drawn2.width > 0 ? { width: drawn2.width, height: drawn2.height } : { width: words.length * 7, height: 14 };
+    setSize((prev) => prev && prev.width === next.width && prev.height === next.height ? prev : next);
+  }, [words]);
+  const line = { across: viewBox?.height === 0 && (viewBox?.width ?? 0) > 0, up: viewBox?.width === 0 && (viewBox?.height ?? 0) > 0 };
+  const top = place !== "insideBottomRight";
+  const flip = !!size && !!plot && (line.across && top && y + size.height > plot.y + plot.height + 0.5 || line.up && x - size.width < plot.x - 0.5);
+  const placed = flip && line.across ? { x, y: (viewBox?.y ?? 0) - OFFSET, top: false, start: false } : flip && line.up ? { x: (viewBox?.x ?? 0) + OFFSET, y, top: false, start: true } : { x, y, top, start: place === "insideTopLeft" };
+  const inside = (from, length, edge, span) => from < edge ? edge - from : from + length > edge + span ? Math.max(edge - from, edge + span - (from + length)) : 0;
+  const at = size && plot ? {
+    ...placed,
+    x: placed.x + inside(placed.start ? placed.x : placed.x - size.width, size.width, plot.x, plot.width),
+    y: placed.y + inside(placed.top ? placed.y : placed.y - size.height, size.height, plot.y, plot.height)
+  } : placed;
+  const register = names?.place;
+  const bounds = plot ? { top: plot.y, bottom: plot.y + plot.height } : void 0;
+  useLayoutEffect(() => {
+    if (!register || !size) return;
+    register(id, { x: at.start ? at.x : at.x - size.width, y: at.top ? at.y : at.y - size.height, ...size, order, away: at.top ? 1 : -1, ...bounds ? { bounds } : {} });
+    return () => register(id, null);
+  }, [register, id, at.x, at.y, at.top, at.start, size, order, bounds?.top, bounds?.bottom]);
+  const move = names?.moves.get(id) ?? 0;
+  return /* @__PURE__ */ jsx(ZIndexLayer, { zIndex: DefaultZIndexes.label, children: /* @__PURE__ */ jsx("g", { transform: move ? `translate(0 ${move})` : void 0, children: /* @__PURE__ */ jsx(
+    "text",
+    {
+      ref: text2,
+      className: "recharts-label",
+      "data-plot-name": "",
+      x: at.x,
+      y: at.y,
+      dy: at.top ? "0.71em" : void 0,
+      textAnchor: at.start ? "start" : "end",
+      fill: ink,
+      stroke: halo,
+      strokeWidth: 3,
+      strokeLinejoin: "round",
+      paintOrder: "stroke",
+      style: { fontSize: "var(--ds-font-size-xs)", fontFamily: "var(--ds-font-sans)" },
+      children: words
+    }
+  ) }) });
+}
+var nameLabel = (value, position, id, order, ink) => ({
+  value,
+  position,
+  content: /* @__PURE__ */ jsx(PlotName, { id, order, place: position, ink })
+});
+var onAxis = (look) => look.axisId === void 0 ? {} : look.axis === "y" ? { yAxisId: look.axisId } : { xAxisId: look.axisId };
+function referenceElements(refs, look) {
+  return (refs ?? []).map((r, i) => {
+    const axisProps = onAxis(look);
+    if (isNumber2(r.to)) {
+      const span = look.axis === "y" ? { y1: Math.min(r.value, r.to), y2: Math.max(r.value, r.to) } : { x1: Math.min(r.value, r.to), x2: Math.max(r.value, r.to) };
+      return /* @__PURE__ */ jsx(
+        ReferenceArea,
+        {
+          ...span,
+          ...axisProps,
+          fill: look.ink,
+          fillOpacity: 0.1,
+          stroke: "none",
+          ifOverflow: "extendDomain",
+          label: nameLabel(r.label, look.axis === "y" ? "insideTopLeft" : "insideTopRight", `reference-${i}`, i, look.ink)
+        },
+        `reference-${i}`
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      ReferenceLine,
+      {
+        ...look.axis === "y" ? { y: r.value } : { x: r.value },
+        ...axisProps,
+        stroke: look.ink,
+        strokeDasharray: "4 3",
+        strokeWidth: 1.5,
+        ifOverflow: "extendDomain",
+        label: nameLabel(`${r.label}: ${look.format(r.value)}`, look.axis === "y" ? "insideTopRight" : "insideBottomRight", `reference-${i}`, i, look.ink)
+      },
+      `reference-${i}`
+    );
+  });
+}
+function referenceValues(refs) {
+  return (refs ?? []).flatMap((r) => isNumber2(r.to) ? [r.value, r.to] : [r.value]);
+}
+function forecastIndex(data, categoryKey, from) {
+  if (from === void 0 || from === null) return -1;
+  return data.findIndex((row) => row[categoryKey] === from || String(row[categoryKey]) === String(from));
+}
+var forecastHatchId = (chartId) => `${chartId.replace(/[^a-zA-Z0-9_-]/g, "")}-forecast`;
+function ForecastHatch({ id, ink }) {
+  return /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("pattern", { id, width: 6, height: 6, patternUnits: "userSpaceOnUse", patternTransform: "rotate(45)", children: /* @__PURE__ */ jsx("line", { x1: 0, y1: 0, x2: 0, y2: 6, stroke: ink, strokeWidth: 1.5, strokeOpacity: 0.25 }) }) });
+}
+function forecastElements(categories, from, label, look) {
+  if (from < 0 || from >= categories.length || look.scale === "point" && categories.length < 2) return [];
+  const start = look.scale === "point" ? Math.max(0, from - 1) : from;
+  const first = categories[start], last = categories[categories.length - 1];
+  const span = look.scale === "point" ? (categories.length - 1 - start) / Math.max(1, categories.length - 1) : (categories.length - start) / categories.length;
+  const wide = span >= 0.25;
+  const elements = [
+    /* @__PURE__ */ jsx(
+      ReferenceArea,
+      {
+        ...look.axis === "y" ? { x1: first, x2: last } : { y1: first, y2: last },
+        ...onAxis(look),
+        fill: `url(#${look.hatch})`,
+        stroke: "none",
+        label: nameLabel(label, look.axis === "y" ? wide ? "insideTopLeft" : "insideTopRight" : wide ? "insideTopRight" : "insideBottomRight", "forecast", Number.MAX_SAFE_INTEGER, look.ink)
+      },
+      "forecast"
+    )
+  ];
+  if (from > 0) {
+    elements.push(
+      /* @__PURE__ */ jsx(
+        ReferenceLine,
+        {
+          ...look.axis === "y" ? { x: first } : { y: first },
+          ...onAxis(look),
+          position: look.scale === "band" ? "start" : void 0,
+          stroke: look.ink,
+          strokeDasharray: "2 3"
+        },
+        "forecast-start"
+      )
+    );
+  }
+  return elements;
+}
+function ChartTable({ table, name, labelledBy }) {
+  const [frame, setFrame] = useState(null);
+  useKeyboardScroll(frame, name, true, false, "both");
+  return /* @__PURE__ */ jsxs("div", { "data-chart-table": "", className: "flex min-h-0 flex-1 flex-col gap-ds-2", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: setFrame,
+        className: cn(
+          "min-h-0 max-h-[var(--ds-chart-height-lg)] overflow-auto rounded-[var(--ds-radius-md)]",
+          "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
+          FOCUS_INSET
+        ),
+        children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-sm", "aria-labelledby": labelledBy, "aria-label": labelledBy ? void 0 : name, children: [
+          /* @__PURE__ */ jsx("thead", { className: "bg-[var(--ds-bg-muted)]", children: /* @__PURE__ */ jsx("tr", { children: table.columns.map((column, i) => /* @__PURE__ */ jsx(
+            "th",
+            {
+              scope: "col",
+              className: cn("px-ds-3 py-ds-2 text-xs font-semibold text-[var(--ds-text-secondary)] whitespace-nowrap", table.numeric[i] ? "text-right" : "text-left"),
+              children: column
+            },
+            i
+          )) }) }),
+          /* @__PURE__ */ jsx("tbody", { children: table.rows.map((row, r) => /* @__PURE__ */ jsx("tr", { className: "border-t-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]", children: row.map((cell, i) => i === (table.rowHeader ?? 0) ? /* @__PURE__ */ jsx("th", { scope: "row", className: "px-ds-3 py-ds-2 text-left font-normal text-[var(--ds-text-primary)]", children: cell }, i) : /* @__PURE__ */ jsx("td", { className: cn("px-ds-3 py-ds-2 text-[var(--ds-text-primary)]", table.numeric[i] && "text-right tabular-nums whitespace-nowrap"), children: cell }, i)) }, r)) })
+        ] })
+      }
+    ),
+    table.notes.length > 0 && /* @__PURE__ */ jsx("ul", { "data-chart-notes": "", className: "text-xs text-[var(--ds-text-secondary)]", children: table.notes.map((note, i) => /* @__PURE__ */ jsx("li", { children: note }, i)) })
+  ] });
+}
 var CHART_HEIGHTS = {
   sm: "var(--ds-chart-height-sm)",
   md: "var(--ds-chart-height-md)",
@@ -450,17 +1051,22 @@ var ChartWrapper = forwardRef(function ChartWrapper2({
   className,
   children,
   formatValue,
-  "aria-label": ariaLabel
+  "aria-label": ariaLabel,
+  access,
+  description,
+  marks
 }, ref) {
   const container = useContext(ChartContainerContext);
   const rootRef = useRef(null);
-  const plotRef = useRef(null);
+  const [plotEl, setPlotEl] = useState(null);
+  const [view, setView] = useState("chart");
+  const descriptionId = useId();
   const [legend, setLegend] = useState(null);
   const [live, setLive] = useState(null);
-  const frame = useMemo(() => ({ legend, live, formatValue }), [legend, live, formatValue]);
-  const [drawn, setDrawn] = useState(null);
+  const frame = useMemo(() => ({ legend, live, formatValue, marks }), [legend, live, formatValue, marks]);
+  const [drawn2, setDrawn] = useState(null);
   useLayoutEffect(() => {
-    const plot = plotRef.current;
+    const plot = plotEl;
     if (!plot || typeof ResizeObserver === "undefined") return;
     const observer = new ResizeObserver((entries) => {
       const box = entries[entries.length - 1]?.contentRect;
@@ -469,14 +1075,16 @@ var ChartWrapper = forwardRef(function ChartWrapper2({
     });
     observer.observe(plot);
     return () => observer.disconnect();
-  }, []);
+  }, [plotEl]);
   const fill = container?.fillArea === true;
   const fixed = container?.height ?? fixedChartHeight(height);
   const plotStyle = fill ? { flex: "1 1 0%", minHeight: 0 } : plotBoxStyle(size, fixed);
-  const named = ariaLabel ? { role: "img", "aria-label": ariaLabel } : container?.titleId ? { role: "img", "aria-labelledby": container.titleId } : {};
+  const sentence = description?.trim() ? description : access?.description;
+  const describedBy = sentence ? { "aria-describedby": descriptionId } : {};
+  const named = ariaLabel ? { role: "img", "aria-label": ariaLabel, ...describedBy } : container?.titleId ? { role: "img", "aria-labelledby": container.titleId, ...describedBy } : {};
   useEffect(() => {
     const root = rootRef.current;
-    const plot = plotRef.current;
+    const plot = plotEl;
     if (!root || !plot || !categoryAxis || typeof MutationObserver === "undefined") return;
     const selector = `.recharts-${categoryAxis}Axis-tick-labels .recharts-cartesian-axis-tick-value`;
     const count = () => {
@@ -490,7 +1098,22 @@ var ChartWrapper = forwardRef(function ChartWrapper2({
     const observer = new MutationObserver(count);
     observer.observe(plot, { subtree: true, childList: true, characterData: true, attributes: true, attributeFilter: ["data-cut"] });
     return () => observer.disconnect();
-  }, [categoryAxis]);
+  }, [categoryAxis, plotEl]);
+  const register = container?.register;
+  useLayoutEffect(() => register?.(), [register]);
+  const switcher = access ? /* @__PURE__ */ jsx(FormChangeCtx, { value: null, children: /* @__PURE__ */ jsx(
+    SegmentedControl,
+    {
+      size: "xs",
+      "aria-label": `Show ${ariaLabel || container?.title || "the chart"} as`,
+      value: view,
+      onChange: (v) => setView(v === "table" ? "table" : "chart"),
+      options: [{ value: "chart", label: "Chart" }, { value: "table", label: "Table" }]
+    }
+  ) }) : null;
+  const actions = container?.actions && container.charts === 1 ? container.actions : null;
+  const sentenceShown = !fill || view === "table";
+  const sentenceLine = sentence ? /* @__PURE__ */ jsx("p", { id: descriptionId, "data-chart-description": "", className: sentenceShown ? "min-w-0 text-sm text-[var(--ds-text-secondary)]" : "sr-only", children: sentence }) : null;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -501,10 +1124,16 @@ var ChartWrapper = forwardRef(function ChartWrapper2({
       className: cn("relative flex w-full flex-col", fill && "h-full", className),
       style: { containerType: "inline-size", minInlineSize: "min(100%, 16rem)", ...fill ? {} : { flex: "1 0 auto" } },
       children: [
-        /* @__PURE__ */ jsxs(
+        (sentenceLine && sentenceShown || switcher && !actions) && /* @__PURE__ */ jsxs("div", { "data-chart-head": "", className: "mb-ds-3 flex items-start justify-between gap-ds-3", children: [
+          sentenceShown && sentenceLine,
+          !actions && switcher && /* @__PURE__ */ jsx("div", { className: "ml-auto shrink-0", children: switcher })
+        ] }),
+        !sentenceShown && sentenceLine,
+        actions && switcher && createPortal(switcher, actions),
+        view === "chart" || !access ? /* @__PURE__ */ jsxs(
           "div",
           {
-            ref: plotRef,
+            ref: setPlotEl,
             "data-chart-plot": "",
             className: "relative w-full",
             style: plotStyle,
@@ -512,10 +1141,10 @@ var ChartWrapper = forwardRef(function ChartWrapper2({
             ...named,
             children: [
               axisTitle && /* @__PURE__ */ jsx("span", { "data-chart-axis-title": "", className: "absolute left-0 top-0 whitespace-nowrap text-xs text-[var(--ds-text-muted)] font-[family-name:var(--ds-font-sans)] leading-normal", children: axisTitle }),
-              /* @__PURE__ */ jsx("div", { className: "absolute inset-0", style: drawn ? { minWidth: drawn.width, minHeight: drawn.height } : void 0, children: /* @__PURE__ */ jsx(ChartFrameContext.Provider, { value: frame, children }) })
+              /* @__PURE__ */ jsx("div", { className: "absolute inset-0", style: drawn2 ? { minWidth: drawn2.width, minHeight: drawn2.height } : void 0, children: /* @__PURE__ */ jsx(ChartFrameContext.Provider, { value: frame, children: /* @__PURE__ */ jsx(PlotNames, { children }) }) })
             ]
           }
-        ),
+        ) : /* @__PURE__ */ jsx(ChartTable, { table: access.table, name: `${ariaLabel || container?.title || "The chart"}: values`, labelledBy: ariaLabel ? void 0 : container?.titleId }),
         /* @__PURE__ */ jsx("div", { ref: setLegend, "data-chart-legend": "" }),
         /* @__PURE__ */ jsx("div", { ref: setLive, role: "status", "aria-live": "polite", className: "sr-only" }),
         /* @__PURE__ */ jsx(
@@ -531,76 +1160,6 @@ var ChartWrapper = forwardRef(function ChartWrapper2({
     }
   );
 });
-var TICK_COUNT = 5;
-var TIME_UNITS = [["hour", 36e5], ["minute", 6e4], ["second", 1e3], ["millisecond", 1]];
-var BYTE_UNITS = [["petabyte", 1e15], ["terabyte", 1e12], ["gigabyte", 1e9], ["megabyte", 1e6], ["kilobyte", 1e3], ["byte", 1]];
-var MAX_FRACTION = 10;
-function exact(format, maxDigits = MAX_FRACTION) {
-  for (let digits = 0; digits < maxDigits; digits++) {
-    const label = format(digits);
-    if (label === format(digits + 6)) return label;
-  }
-  return format(maxDigits);
-}
-var unitFormat = (unit, value, locale) => (digits) => new Intl.NumberFormat(locale, { style: "unit", unit, unitDisplay: "short", maximumFractionDigits: digits }).format(value);
-var unitsOf = (format) => format === "bytes" ? BYTE_UNITS : TIME_UNITS;
-function unitReached(units, value) {
-  return units.find(([, size]) => Math.abs(value) >= size) ?? units[units.length - 1];
-}
-function axisUnit(units, ticks) {
-  const largest = Math.max(0, ...ticks.map(Math.abs));
-  const exactIn = (size) => ticks.every((t) => Math.abs(t / size * 100 - Math.round(t / size * 100)) < 1e-6);
-  return units.find(([, size]) => largest / size >= 1 && exactIn(size)) ?? units[units.length - 1];
-}
-function valueAxisTicks(values) {
-  const finite = values.filter(Number.isFinite);
-  if (!finite.length) return [];
-  const lo = Math.min(0, ...finite);
-  const hi = Math.max(0, ...finite);
-  if (lo === hi) return [lo];
-  return getNiceTickValues([lo, hi], TICK_COUNT, true).map(Number);
-}
-function axisTickFormatter(values, format, locale) {
-  if (typeof format === "function") return format;
-  if (format === "percent") return (value) => exact((d) => new Intl.NumberFormat(locale, { style: "percent", maximumFractionDigits: d }).format(value / 100));
-  if (format === "milliseconds" || format === "bytes") {
-    const [unit, size] = axisUnit(unitsOf(format), valueAxisTicks(values));
-    return (value) => exact(unitFormat(unit, value / size, locale));
-  }
-  const compact = (value) => exact((d) => new Intl.NumberFormat(locale, { notation: "compact", maximumFractionDigits: d }).format(value));
-  const plain = (value) => exact((d) => new Intl.NumberFormat(locale, { maximumFractionDigits: d }).format(value));
-  const largest = Math.max(0, ...values.filter(Number.isFinite).map(Math.abs));
-  return largest >= COMPACT_FROM ? compact : plain;
-}
-var COMPACT_FROM = 1e4;
-function fullValueFormatter(format, locale) {
-  if (typeof format === "function") return format;
-  if (format === void 0 || format === "number") return (value) => value.toLocaleString(locale);
-  if (format === "percent") return (value) => exact((d) => new Intl.NumberFormat(locale, { style: "percent", maximumFractionDigits: d }).format(value / 100), 4);
-  return (value) => {
-    const [unit, size] = unitReached(unitsOf(format), value);
-    return exact(unitFormat(unit, value / size, locale), 4);
-  };
-}
-function axisExtent(data, series) {
-  return data.flatMap((row) => {
-    const own = [];
-    const up = /* @__PURE__ */ new Map();
-    const down = /* @__PURE__ */ new Map();
-    for (const s of series) {
-      const raw = row[s.dataKey];
-      const v = typeof raw === "number" ? raw : typeof raw === "string" && raw.trim() !== "" ? Number(raw) : NaN;
-      if (!Number.isFinite(v)) continue;
-      if (s.stack == null) own.push(v);
-      else if (v >= 0) up.set(s.stack, (up.get(s.stack) ?? 0) + v);
-      else down.set(s.stack, (down.get(s.stack) ?? 0) + v);
-    }
-    return [...own, ...up.values(), ...down.values()];
-  });
-}
-function seriesValues(data, keys, stacked = false) {
-  return axisExtent(data, keys.map((dataKey) => ({ dataKey, stack: stacked ? "stack" : null })));
-}
 var hasLabel = (label) => label != null && label !== "" && typeof label !== "number";
 var entryName = (entry, label) => !hasLabel(label) && typeof entry.payload?.name === "string" && entry.payload.name || entry.name;
 var entryValue = (entry, format, locale) => typeof entry.value === "number" ? format ? format(entry.value, entry.dataKey) : entry.value.toLocaleString(locale) : entry.value;
@@ -617,12 +1176,15 @@ function tooltipAnnouncement(label, payload, format, locale = formatLocale()) {
   const values = payload.map((entry) => `${entryName(entry, label)} ${entryValue(entry, format, locale)}`).join(", ");
   return hasLabel(label) ? `${String(label)}: ${values}` : values;
 }
+function plainColour(value) {
+  return typeof value === "string" && value.trim() !== "" && !value.trim().startsWith("url(") ? value : void 0;
+}
 function ChartTooltipContent({ active, payload, label }) {
   const bgSurface = useResolvedToken("--ds-bg-surface");
   const borderSubtle = useResolvedToken("--ds-border-subtle");
   const textPrimary = useResolvedToken("--ds-text-primary");
   const textSecondary = useResolvedToken("--ds-text-secondary");
-  const { live, formatValue } = useContext(ChartFrameContext);
+  const { live, formatValue, marks } = useContext(ChartFrameContext);
   const locale = useFormatLocale();
   const on = !!active && !!payload?.length;
   const showLabel = hasLabel(label);
@@ -638,9 +1200,10 @@ function ChartTooltipContent({ active, payload, label }) {
       children: [
         showLabel && /* @__PURE__ */ jsx("p", { className: "font-medium mb-ds-1", style: { color: textPrimary }, children: label }),
         payload.map((entry, i) => {
-          const dotColor = entry.payload?.fill || entry.color || textSecondary;
+          const dotColor = plainColour(entry.payload?.fill) ?? plainColour(entry.color) ?? textSecondary;
+          const mark = (entry.graphicalItemId ? marks?.[entry.graphicalItemId] : void 0) ?? (entry.dataKey ? marks?.[entry.dataKey] : void 0) ?? marks?.[String(entry.name)] ?? marks?.[String(entry.payload?.name)];
           return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2", style: { marginTop: i > 0 ? 2 : 0 }, children: [
-            /* @__PURE__ */ jsx(
+            mark ? /* @__PURE__ */ jsx(SeriesSwatch, { mark, color: dotColor }) : /* @__PURE__ */ jsx(
               "span",
               {
                 className: "shrink-0 rounded-[var(--ds-radius-full)]",
@@ -671,17 +1234,22 @@ function swatchEdge(entry) {
 }
 function ChartLegendContent({ payload }) {
   const textSecondary = useResolvedToken("--ds-text-secondary");
-  if (!payload?.length) return null;
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap justify-center gap-y-ds-1 gap-x-ds-4 font-[family-name:var(--ds-font-sans)] text-sm", children: payload.map((entry, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-1.5", children: [
-    /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: "shrink-0 rounded-[var(--ds-radius-full)]",
-        style: { width: 10, height: 10, backgroundColor: entry.color, border: `1.5px solid ${swatchEdge(entry)}` }
-      }
-    ),
-    /* @__PURE__ */ jsx("span", { style: { color: textSecondary }, children: entry.value })
-  ] }, i)) });
+  const { marks } = useContext(ChartFrameContext);
+  const entries = payload?.filter((entry) => entry.type !== "none") ?? [];
+  if (!entries.length) return null;
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap justify-center gap-y-ds-1 gap-x-ds-4 font-[family-name:var(--ds-font-sans)] text-sm", children: entries.map((entry, i) => {
+    const mark = (entry.dataKey ? marks?.[entry.dataKey] : void 0) ?? marks?.[entry.value];
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-1.5", children: [
+      mark ? /* @__PURE__ */ jsx(SeriesSwatch, { mark, color: entry.color }) : /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "shrink-0 rounded-[var(--ds-radius-full)]",
+          style: { width: 10, height: 10, backgroundColor: entry.color, border: `1.5px solid ${swatchEdge(entry)}` }
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { "data-legend-label": "", style: { color: textSecondary }, children: entry.value })
+    ] }, i);
+  }) });
 }
 function seriesSorter(order, by = "dataKey") {
   return (item) => {
@@ -726,17 +1294,17 @@ function xAxisTick(props) {
 var LINE_EM = 1.2;
 var NAME_GAP = 8;
 var NAME_COLUMN_INSET = 12;
-function namesTick(measure, orientation, column) {
+function namesTick(measure2, orientation, column) {
   return function NamesTick(props) {
     const { x, y, payload, width, visibleTicksCount, className, fill, fontSize, fontFamily } = props;
     const name = String(payload?.value ?? "");
     const room = orientation === "x" ? (Number(width) || 0) / Math.max(1, Number(visibleTicksCount) || 1) - NAME_GAP : (column ?? (Number(width) || 0)) - NAME_COLUMN_INSET;
-    const fit = fitLabel(name, room, measure);
-    const text = { fill, fontSize, fontFamily, stroke: "none" };
+    const fit = fitLabel(name, room, measure2);
+    const text2 = { fill, fontSize, fontFamily, stroke: "none" };
     const firstDy = orientation === "x" ? 0.71 : 0.355 - (fit.lines.length - 1) * LINE_EM / 2;
     return /* @__PURE__ */ jsxs("g", { className, "data-cut": fit.cut ? "" : void 0, "data-lines": fit.lines.length, children: [
       /* @__PURE__ */ jsx("title", { children: name }),
-      fit.lines.map((line, i) => /* @__PURE__ */ jsx("text", { x, y, dy: `${firstDy + i * LINE_EM}em`, textAnchor: orientation === "x" ? "middle" : "end", ...text, children: line }, i))
+      fit.lines.map((line, i) => /* @__PURE__ */ jsx("text", { x, y, dy: `${firstDy + i * LINE_EM}em`, textAnchor: orientation === "x" ? "middle" : "end", ...text2, children: line }, i))
     ] });
   };
 }
@@ -750,8 +1318,8 @@ function useAxisMeasure(ref, enabled = true) {
     const update = (fresh = false) => {
       if (!live) return;
       const measured = el.clientWidth;
-      const probe = el.querySelector("[data-chart-probe]");
-      const row = probe?.getBoundingClientRect().height ?? 0;
+      const probe2 = el.querySelector("[data-chart-probe]");
+      const row = probe2?.getBoundingClientRect().height ?? 0;
       const next = createAxisMeasurer(el);
       setState((prev) => {
         const width = measured > 0 ? measured : prev.width;
@@ -779,10 +1347,10 @@ function useAxisMeasure(ref, enabled = true) {
   }, [ref, enabled]);
   return state;
 }
-function valueAxisWidth(values, measure, format = String) {
+function valueAxisWidth(values, measure2, format = String) {
   const ticks = valueAxisTicks(values);
-  if (!ticks.length) return Math.ceil(measure(format(0))) + 8;
-  return Math.ceil(Math.max(...ticks.map((t) => measure(format(t))))) + 8;
+  if (!ticks.length) return Math.ceil(measure2(format(0))) + 8;
+  return Math.ceil(Math.max(...ticks.map((t) => measure2(format(t))))) + 8;
 }
 var SWITCH_HYSTERESIS = 32;
 function useSidewaysSwitch(enabled, names, m, axisWidth, sideMargins) {
@@ -862,7 +1430,7 @@ function anyStack(bars, stacked) {
 function barGroups(bars, stacked) {
   return Math.max(1, new Set(bars.map((bar, i) => barStackOf(bar, stacked) ?? `\0${i}`)).size);
 }
-function barShape(bars, index, stacked, radius, horizontal = false) {
+function barShape(bars, index, stacked, radius, horizontal = false, forecast) {
   const round = horizontal ? [0, radius, radius, 0] : [radius, radius, 0, 0];
   const square = [0, 0, 0, 0];
   const stack = barStackOf(bars[index], stacked);
@@ -875,7 +1443,8 @@ function barShape(bars, index, stacked, radius, horizontal = false) {
       const value = Number(row[b.dataKey]);
       return !(down ? value < 0 : value > 0);
     });
-    return /* @__PURE__ */ jsx(Rectangle, { ...withoutRowFields(props), radius: onTop ? round : square });
+    const ahead = forecast && forecast.from >= 0 && (p.index ?? -1) >= forecast.from ? { ...forecast.fill ? { fill: forecast.fill } : { fillOpacity: AHEAD_STRENGTH }, stroke: forecast.edge, strokeWidth: 1.5, strokeDasharray: "3 2" } : {};
+    return /* @__PURE__ */ jsx(Rectangle, { ...withoutRowFields(props), ...ahead, radius: onTop ? round : square });
   };
   return Shape;
 }
@@ -901,16 +1470,21 @@ var BarChart = markChart(forwardRef(function BarChart2({
   valueFormat,
   animated,
   "aria-label": ariaLabel,
-  className
+  className,
+  description,
+  references,
+  forecastFrom,
+  forecastLabel = "Forecast"
 }, ref) {
   const wrapperRef = useRef(null);
+  const chartId = useId();
   const labels = useMemo(() => (data ?? []).map((d) => String(d[xAxisKey] ?? "")), [data, xAxisKey]);
   const locale = useFormatLocale();
   const hydrated = useHydrated();
   const kind = categoryKind2 ?? categoryKind((data ?? []).map((d) => d[xAxisKey]), hydrated ? void 0 : locale);
   const names = kind === "names";
   const measured = useAxisMeasure(wrapperRef, (data?.length ?? 0) > 0);
-  const values = useMemo(() => valueExtent(data ?? [], bars, stacked), [data, bars, stacked]);
+  const values = useMemo(() => [...valueExtent(data ?? [], bars, stacked), ...referenceValues(references)], [data, bars, stacked, references]);
   const tickFormat = useMemo(() => axisTickFormatter(values, valueFormat, locale), [values, valueFormat, locale]);
   const fullFormat = useMemo(() => fullValueFormatter(valueFormat, locale), [valueFormat, locale]);
   const axisWidth = useMemo(
@@ -946,6 +1520,31 @@ var BarChart = markChart(forwardRef(function BarChart2({
     axis: titles ? `calc(${CHART_ROW} + ${titles} * ${TITLE_LINE_CSS})` : CHART_ROW
   } : { model: "ratio" };
   const maxBarSize = sideways ? Math.max(4, Math.round(measured.rowPx * perCategory * 0.7 / groups)) : void 0;
+  const surface = useResolvedToken("--ds-bg-surface");
+  const canvas = useResolvedToken("--ds-bg-canvas");
+  const ink = useResolvedToken("--ds-text-secondary");
+  const fills = bars.map((bar, i) => bar.soft ? softColors[i] : solidColors[i]);
+  const patterns2 = bars.map((_, i) => seriesPattern(chartId, i, bars.length));
+  const aheadBarFill = (fill, pattern) => {
+    const faint = aheadFill(fill, surface, canvas);
+    return faint && pattern ? `url(#${aheadPattern(pattern)})` : faint;
+  };
+  const marks = useMemo(
+    () => Object.fromEntries(bars.map((bar, i) => [bar.dataKey, { kind: "fill", color: bar.soft ? softColors[i] : solidColors[i], edge: solidColors[i], pattern: seriesPattern(chartId, i, bars.length) }])),
+    [bars, softColors, solidColors, chartId]
+  );
+  const forecastAt = forecastIndex(data ?? [], xAxisKey, forecastFrom);
+  const access = useMemo(() => cartesianAccess({
+    kind: "Bar chart",
+    data: data ?? [],
+    categoryKey: xAxisKey,
+    categoryHeading: categoryTitle,
+    series: bars.map((b) => ({ dataKey: b.dataKey, label: b.label ?? b.dataKey })),
+    format: fullFormat,
+    over: names ? "names" : "scale",
+    references,
+    forecast: forecastAt >= 0 ? { from: forecastAt, label: forecastLabel } : void 0
+  }), [data, xAxisKey, categoryTitle, bars, fullFormat, names, references, forecastAt, forecastLabel]);
   if (!data?.length) return null;
   return /* @__PURE__ */ jsx(
     ChartWrapper,
@@ -962,6 +1561,9 @@ var BarChart = markChart(forwardRef(function BarChart2({
       formatValue: fullFormat,
       className,
       "aria-label": ariaLabel,
+      access,
+      description,
+      marks,
       children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
         BarChart$1,
         {
@@ -971,6 +1573,7 @@ var BarChart = markChart(forwardRef(function BarChart2({
           margin: { top: 4 + (topTitle ? titleLine(measured.px) : 0), right: sideways || names ? 4 : xTicks.endMargin, bottom: 4, left: 4 },
           accessibilityLayer: true,
           children: [
+            /* @__PURE__ */ jsx(SeriesPatterns, { chartId, colors: fills, surface, ahead: forecastAt >= 0 }),
             showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: gridStroke, vertical: !sideways, horizontal: true }),
             sideways ? /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx(XAxis, { type: "number", ...axisStyle.tick, axisLine: false, tickLine: false, height: "auto", label: bottomLabel, tickFormatter: tickFormat }),
@@ -1006,15 +1609,18 @@ var BarChart = markChart(forwardRef(function BarChart2({
             ] }),
             showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}), cursor: { fill: "var(--ds-bg-muted)", opacity: 0.5 } }),
             legendVisible && /* @__PURE__ */ jsx(ChartLegend, { order: bars.map((b) => b.dataKey) }),
+            referenceElements(references, { axis: sideways ? "x" : "y", ink, format: (v) => fullFormat(v) }),
+            forecastAt >= 0 && /* @__PURE__ */ jsx(ForecastHatch, { id: forecastHatchId(chartId), ink }),
+            forecastElements(data.map((row) => row[xAxisKey]), forecastAt, forecastLabel, { axis: sideways ? "x" : "y", ink, scale: "band", hatch: forecastHatchId(chartId) }),
             bars.map((bar, i) => /* @__PURE__ */ jsx(
               Bar,
               {
                 dataKey: bar.dataKey,
                 name: bar.label ?? bar.dataKey,
-                fill: bar.soft ? softColors[i] : solidColors[i],
+                fill: patterns2[i] ? `url(#${patterns2[i]})` : fills[i],
                 stroke: bar.soft ? solidColors[i] : void 0,
                 strokeWidth: bar.soft ? 1 : void 0,
-                shape: barShape(bars, i, stacked, radius, sideways),
+                shape: barShape(bars, i, stacked, radius, sideways, forecastAt >= 0 ? { from: forecastAt, edge: solidColors[i], fill: aheadBarFill(fills[i], patterns2[i]) } : void 0),
                 stackId: barStackOf(bar, stacked),
                 maxBarSize,
                 isAnimationActive: isAnimated
@@ -1043,10 +1649,14 @@ var LineChart = markChart(forwardRef(function LineChart2({
   valueFormat,
   animated,
   "aria-label": ariaLabel,
-  className
+  className,
+  description,
+  references,
+  forecastFrom,
+  forecastLabel = "Forecast"
 }, ref) {
   const wrapperRef = useRef(null);
-  const values = useMemo(() => seriesValues(data ?? [], lines.map((s) => s.dataKey), false), [data, lines]);
+  const values = useMemo(() => [...seriesValues(data ?? [], lines.map((s) => s.dataKey), false), ...referenceValues(references)], [data, lines, references]);
   const locale = useFormatLocale();
   const tickFormat = useMemo(() => axisTickFormatter(values, valueFormat, locale), [values, valueFormat, locale]);
   const fullFormat = useMemo(() => fullValueFormatter(valueFormat, locale), [valueFormat, locale]);
@@ -1059,6 +1669,25 @@ var LineChart = markChart(forwardRef(function LineChart2({
   const legendVisible = showLegend ?? lines.length >= 2;
   const axisLabelStyle = { fontSize: "var(--ds-font-size-xs)", fontFamily: "var(--ds-font-sans)", fill: axisStyle.tick.fill };
   const top = 4 + (yAxisLabel ? Math.ceil(measured.px * 1.5) + 4 : 0);
+  const ink = useResolvedToken("--ds-text-secondary");
+  const dashes = useMemo(() => lineDashes(lines), [lines]);
+  const marks = useMemo(
+    () => Object.fromEntries(lines.map((l, i) => [l.dataKey, { kind: "line", color: colors[i], dash: dashes[i] }])),
+    [lines, colors, dashes]
+  );
+  const forecastAt = forecastIndex(data ?? [], xAxisKey, forecastFrom);
+  const hatch = forecastHatchId(useId());
+  const access = useMemo(() => cartesianAccess({
+    kind: "Line chart",
+    data: data ?? [],
+    categoryKey: xAxisKey,
+    categoryHeading: xAxisLabel,
+    series: lines.map((l) => ({ dataKey: l.dataKey, label: l.label ?? l.dataKey })),
+    format: fullFormat,
+    over: "scale",
+    references,
+    forecast: forecastAt >= 0 ? { from: forecastAt, label: forecastLabel } : void 0
+  }), [data, xAxisKey, xAxisLabel, lines, fullFormat, references, forecastAt, forecastLabel]);
   if (!data?.length) return null;
   return /* @__PURE__ */ jsx(
     ChartWrapper,
@@ -1074,6 +1703,9 @@ var LineChart = markChart(forwardRef(function LineChart2({
       formatValue: fullFormat,
       className,
       "aria-label": ariaLabel,
+      access,
+      description,
+      marks,
       children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(LineChart$1, { data, margin: { top, right: xTicks.endMargin, bottom: 4, left: 4 }, accessibilityLayer: true, children: [
         showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: gridStroke }),
         /* @__PURE__ */ jsx(
@@ -1093,6 +1725,9 @@ var LineChart = markChart(forwardRef(function LineChart2({
         /* @__PURE__ */ jsx(YAxis, { width: "auto", ...axisStyle.tick, axisLine: false, tickLine: false, tickFormatter: tickFormat }),
         showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) }),
         legendVisible && /* @__PURE__ */ jsx(ChartLegend, { order: lines.map((l) => l.dataKey) }),
+        referenceElements(references, { axis: "y", ink, format: (v) => fullFormat(v) }),
+        forecastAt >= 0 && /* @__PURE__ */ jsx(ForecastHatch, { id: hatch, ink }),
+        forecastElements(data.map((row) => row[xAxisKey]), forecastAt, forecastLabel, { axis: "y", ink, scale: "point", hatch }),
         lines.map((line, i) => /* @__PURE__ */ jsx(
           Line,
           {
@@ -1101,7 +1736,7 @@ var LineChart = markChart(forwardRef(function LineChart2({
             name: line.label ?? line.dataKey,
             stroke: colors[i],
             strokeWidth: 2,
-            strokeDasharray: line.dashed ? "5 5" : void 0,
+            strokeDasharray: dashes[i],
             dot: showDots,
             activeDot: { r: 5, strokeWidth: 2 },
             isAnimationActive: isAnimated
@@ -1129,10 +1764,14 @@ var AreaChart = markChart(forwardRef(function AreaChart2({
   valueFormat,
   animated,
   "aria-label": ariaLabel,
-  className
+  className,
+  description,
+  references,
+  forecastFrom,
+  forecastLabel = "Forecast"
 }, ref) {
   const wrapperRef = useRef(null);
-  const values = useMemo(() => seriesValues(data ?? [], areas.map((s) => s.dataKey), stacked), [data, areas, stacked]);
+  const values = useMemo(() => [...seriesValues(data ?? [], areas.map((s) => s.dataKey), stacked), ...referenceValues(references)], [data, areas, stacked, references]);
   const locale = useFormatLocale();
   const tickFormat = useMemo(() => axisTickFormatter(values, valueFormat, locale), [values, valueFormat, locale]);
   const fullFormat = useMemo(() => fullValueFormatter(valueFormat, locale), [valueFormat, locale]);
@@ -1147,6 +1786,25 @@ var AreaChart = markChart(forwardRef(function AreaChart2({
   const legendVisible = showLegend ?? areas.length >= 2;
   const axisLabelStyle = { fontSize: "var(--ds-font-size-xs)", fontFamily: "var(--ds-font-sans)", fill: axisStyle.tick.fill };
   const top = 4 + (yAxisLabel ? Math.ceil(measured.px * 1.5) + 4 : 0);
+  const ink = useResolvedToken("--ds-text-secondary");
+  const dashes = areas.map((_, i) => seriesDash(i, areas.length));
+  const marks = useMemo(
+    () => Object.fromEntries(areas.map((a, i) => [a.dataKey, { kind: "line", color: solidColors[i], dash: seriesDash(i, areas.length) }])),
+    [areas, solidColors]
+  );
+  const forecastAt = forecastIndex(data ?? [], xAxisKey, forecastFrom);
+  const hatch = forecastHatchId(instanceId);
+  const access = useMemo(() => cartesianAccess({
+    kind: "Area chart",
+    data: data ?? [],
+    categoryKey: xAxisKey,
+    categoryHeading: xAxisLabel,
+    series: areas.map((a) => ({ dataKey: a.dataKey, label: a.label ?? a.dataKey })),
+    format: fullFormat,
+    over: "scale",
+    references,
+    forecast: forecastAt >= 0 ? { from: forecastAt, label: forecastLabel } : void 0
+  }), [data, xAxisKey, xAxisLabel, areas, fullFormat, references, forecastAt, forecastLabel]);
   if (!data?.length) return null;
   return /* @__PURE__ */ jsx(
     ChartWrapper,
@@ -1162,6 +1820,9 @@ var AreaChart = markChart(forwardRef(function AreaChart2({
       formatValue: fullFormat,
       className,
       "aria-label": ariaLabel,
+      access,
+      description,
+      marks,
       children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(AreaChart$1, { data, margin: { top, right: xTicks.endMargin, bottom: 4, left: 4 }, accessibilityLayer: true, children: [
         /* @__PURE__ */ jsx("defs", { children: areas.map((area, i) => /* @__PURE__ */ jsxs("linearGradient", { id: `gradient-${instanceId}-${area.dataKey}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
           /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: softColors[i], stopOpacity: 1 }),
@@ -1185,6 +1846,9 @@ var AreaChart = markChart(forwardRef(function AreaChart2({
         /* @__PURE__ */ jsx(YAxis, { width: "auto", ...axisStyle.tick, axisLine: false, tickLine: false, tickFormatter: tickFormat }),
         showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) }),
         legendVisible && /* @__PURE__ */ jsx(ChartLegend, { order: areas.map((a) => a.dataKey) }),
+        referenceElements(references, { axis: "y", ink, format: (v) => fullFormat(v) }),
+        forecastAt >= 0 && /* @__PURE__ */ jsx(ForecastHatch, { id: hatch, ink }),
+        forecastElements(data.map((row) => row[xAxisKey]), forecastAt, forecastLabel, { axis: "y", ink, scale: "point", hatch }),
         areas.map((area, i) => /* @__PURE__ */ jsx(
           Area,
           {
@@ -1193,6 +1857,7 @@ var AreaChart = markChart(forwardRef(function AreaChart2({
             name: area.label ?? area.dataKey,
             stroke: solidColors[i],
             strokeWidth: 2,
+            strokeDasharray: dashes[i],
             fill: gradient ? `url(#gradient-${instanceId}-${area.dataKey})` : softColors[i],
             stackId: stacked ? "stack" : void 0,
             isAnimationActive: isAnimated
@@ -1212,14 +1877,26 @@ var PieChart = markChart(forwardRef(function PieChart2({
   showLabels = false,
   animated,
   "aria-label": ariaLabel,
-  className
+  className,
+  description
 }, ref) {
   const colors = useChartColors(data.length, false);
+  const chartId = useId();
+  const surface = useResolvedToken("--ds-bg-surface");
+  const locale = useFormatLocale();
+  const format = useMemo(() => fullValueFormatter(void 0, locale), [locale]);
   const isAnimated = useChartAnimation(animated);
-  const renderLabel = showLabels ? ({ percent }) => `${((percent ?? 0) * 100).toFixed(0)}%` : false;
-  const chartData = data.map((d) => ({ name: d.name, value: d.value }));
+  const renderLabel = showLabels ? ({ percent: percent2 }) => `${((percent2 ?? 0) * 100).toFixed(0)}%` : false;
+  const chartData = data.map((d) => ({ name: d.name, value: numberOf(d.value) ?? 0 }));
+  const fills = data.map((_, i) => colors[i % colors.length]);
+  const marks = useMemo(
+    () => Object.fromEntries(data.map((d, i) => [d.name, { kind: "fill", color: colors[i % colors.length], pattern: seriesPattern(chartId, i, data.length) }])),
+    [data, colors, chartId]
+  );
+  const access = useMemo(() => partsAccess({ kind: "pie", items: data.map((d) => ({ name: d.name, value: d.value })), format }), [data, format]);
   if (!data?.length) return null;
-  return /* @__PURE__ */ jsx(ChartWrapper, { ref, height, size: { model: "square" }, chart: "pie", className, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(PieChart$1, { accessibilityLayer: true, children: [
+  return /* @__PURE__ */ jsx(ChartWrapper, { ref, height, size: { model: "square" }, chart: "pie", className, "aria-label": ariaLabel, access, description, marks, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(PieChart$1, { accessibilityLayer: true, children: [
+    /* @__PURE__ */ jsx(SeriesPatterns, { chartId, colors: fills, surface }),
     /* @__PURE__ */ jsx(
       Pie,
       {
@@ -1235,7 +1912,10 @@ var PieChart = markChart(forwardRef(function PieChart2({
         isAnimationActive: isAnimated,
         fontSize: "var(--ds-font-size-xs)",
         fontFamily: "var(--ds-font-sans)",
-        children: data.map((_, i) => /* @__PURE__ */ jsx(Cell, { fill: colors[i % colors.length] }, i))
+        children: data.map((_, i) => {
+          const pattern = seriesPattern(chartId, i, data.length);
+          return /* @__PURE__ */ jsx(Cell, { fill: pattern ? `url(#${pattern})` : fills[i] }, i);
+        })
       }
     ),
     showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) }),
@@ -1262,9 +1942,14 @@ var CompositeChart = markChart(forwardRef(function CompositeChart2({
   lineValueFormat = valueFormat,
   animated,
   "aria-label": ariaLabel,
-  className
+  className,
+  description,
+  references,
+  forecastFrom,
+  forecastLabel = "Forecast"
 }, ref) {
   const wrapperRef = useRef(null);
+  const chartId = useId();
   const labels = useMemo(() => (data ?? []).map((d) => String(d[xAxisKey] ?? "")), [data, xAxisKey]);
   const locale = useFormatLocale();
   const hydrated = useHydrated();
@@ -1277,8 +1962,9 @@ var CompositeChart = markChart(forwardRef(function CompositeChart2({
       ...dualAxis ? [] : lines.map((l) => ({ dataKey: l.dataKey, stack: null }))
     ]);
     const lineValues2 = (data ?? []).flatMap((row) => lines.map((l) => Number(row[l.dataKey])));
-    return [values2, lineValues2];
-  }, [data, bars, lines, stacked, dualAxis]);
+    const onLines = !bars.length && dualAxis;
+    return [[...values2, ...onLines ? [] : referenceValues(references)], [...lineValues2, ...onLines ? referenceValues(references) : []]];
+  }, [data, bars, lines, stacked, dualAxis, references]);
   const tickFormat = useMemo(() => axisTickFormatter(values, valueFormat, locale), [values, valueFormat, locale]);
   const lineTickFormat = useMemo(() => axisTickFormatter(lineValues, lineValueFormat, locale), [lineValues, lineValueFormat, locale]);
   const fullFormat = useMemo(() => {
@@ -1321,6 +2007,32 @@ var CompositeChart = markChart(forwardRef(function CompositeChart2({
   const maxBarSize = sideways ? Math.max(4, Math.round(measured.rowPx * perCategory * 0.7 / groups)) : void 0;
   const barAxis = sideways ? { xAxisId: "left" } : { yAxisId: "left" };
   const lineAxis = sideways ? { xAxisId: dualAxis ? "right" : "left" } : { yAxisId: dualAxis ? "right" : "left" };
+  const valueAxisId = bars.length || !dualAxis ? "left" : "right";
+  const surface = useResolvedToken("--ds-bg-surface");
+  const canvas = useResolvedToken("--ds-bg-canvas");
+  const ink = useResolvedToken("--ds-text-secondary");
+  const patterns2 = bars.map((_, i) => seriesPattern(chartId, i, bars.length));
+  const aheadBarFill = (fill, pattern) => {
+    const faint = aheadFill(fill, surface, canvas);
+    return faint && pattern ? `url(#${aheadPattern(pattern)})` : faint;
+  };
+  const dashes = useMemo(() => lineDashes(lines), [lines]);
+  const marks = useMemo(() => Object.fromEntries([
+    ...bars.map((bar, i) => [bar.dataKey, { kind: "fill", color: barSoftColors[i], edge: barSolidColors[i], pattern: seriesPattern(chartId, i, bars.length) }]),
+    ...lines.map((line, i) => [line.dataKey, { kind: "line", color: lineColors[i], dash: dashes[i] }])
+  ]), [bars, lines, barSoftColors, barSolidColors, lineColors, chartId, dashes]);
+  const forecastAt = forecastIndex(data ?? [], xAxisKey, forecastFrom);
+  const access = useMemo(() => cartesianAccess({
+    kind: "Bar and line chart",
+    data: data ?? [],
+    categoryKey: xAxisKey,
+    categoryHeading: xAxisLabel,
+    series: [...bars, ...lines].map((s) => ({ dataKey: s.dataKey, label: s.label ?? s.dataKey })),
+    format: fullFormat,
+    over: names ? "names" : "scale",
+    references,
+    forecast: forecastAt >= 0 ? { from: forecastAt, label: forecastLabel } : void 0
+  }), [data, xAxisKey, xAxisLabel, bars, lines, fullFormat, names, references, forecastAt, forecastLabel]);
   if (!data?.length) return null;
   return /* @__PURE__ */ jsx(
     ChartWrapper,
@@ -1337,6 +2049,9 @@ var CompositeChart = markChart(forwardRef(function CompositeChart2({
       formatValue: fullFormat,
       className,
       "aria-label": ariaLabel,
+      access,
+      description,
+      marks,
       children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
         ComposedChart,
         {
@@ -1346,6 +2061,7 @@ var CompositeChart = markChart(forwardRef(function CompositeChart2({
           margin: { top, right: sideways || names ? 4 : xTicks.endMargin, bottom: 4, left: 4 },
           accessibilityLayer: true,
           children: [
+            /* @__PURE__ */ jsx(SeriesPatterns, { chartId, colors: barSoftColors, surface, ahead: forecastAt >= 0 }),
             showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: gridStroke, vertical: !sideways, horizontal: true }),
             sideways ? /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx(XAxis, { xAxisId: "left", type: "number", ...axisStyle.tick, axisLine: false, tickLine: false, height: "auto", label: bottomLabel, tickFormatter: tickFormat }),
@@ -1383,15 +2099,18 @@ var CompositeChart = markChart(forwardRef(function CompositeChart2({
             ] }),
             showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) }),
             showLegend && /* @__PURE__ */ jsx(ChartLegend, { order: [...bars.map((b) => b.dataKey), ...lines.map((l) => l.dataKey)] }),
+            referenceElements(references, { axis: sideways ? "x" : "y", axisId: valueAxisId, ink, format: (v) => fullFormat(v, valueAxisId === "right" ? lines[0]?.dataKey : void 0) }),
+            forecastAt >= 0 && /* @__PURE__ */ jsx(ForecastHatch, { id: forecastHatchId(chartId), ink }),
+            forecastElements(data.map((row) => row[xAxisKey]), forecastAt, forecastLabel, { axis: sideways ? "x" : "y", axisId: valueAxisId, ink, scale: bars.length ? "band" : "point", hatch: forecastHatchId(chartId) }),
             bars.map((bar, i) => /* @__PURE__ */ jsx(
               Bar,
               {
                 dataKey: bar.dataKey,
                 name: bar.label ?? bar.dataKey,
-                fill: barSoftColors[i],
+                fill: patterns2[i] ? `url(#${patterns2[i]})` : barSoftColors[i],
                 stroke: barSolidColors[i],
                 strokeWidth: 1,
-                shape: barShape(bars, i, stacked, radius, sideways),
+                shape: barShape(bars, i, stacked, radius, sideways, forecastAt >= 0 ? { from: forecastAt, edge: barSolidColors[i], fill: aheadBarFill(barSoftColors[i], patterns2[i]) } : void 0),
                 stackId: barStackOf(bar, stacked),
                 maxBarSize,
                 ...barAxis,
@@ -1407,7 +2126,7 @@ var CompositeChart = markChart(forwardRef(function CompositeChart2({
                 name: line.label ?? line.dataKey,
                 stroke: lineColors[i],
                 strokeWidth: 2,
-                strokeDasharray: line.dashed ? "5 5" : void 0,
+                strokeDasharray: dashes[i],
                 dot: false,
                 ...lineAxis,
                 isAnimationActive: isAnimated
@@ -1432,7 +2151,8 @@ var ScatterChart = markChart(forwardRef(function ScatterChart2({
   xValueFormat,
   animated,
   "aria-label": ariaLabel,
-  className
+  className,
+  description
 }, ref) {
   const wrapperRef = useRef(null);
   const locale = useFormatLocale();
@@ -1453,6 +2173,23 @@ var ScatterChart = markChart(forwardRef(function ScatterChart2({
   const isAnimated = useChartAnimation(animated);
   const legendVisible = showLegend ?? data.length >= 2;
   const axisLabelStyle = { fontSize: "var(--ds-font-size-xs)", fontFamily: "var(--ds-font-sans)", fill: axisStyle.tick.fill };
+  const seriesId = useId();
+  const idOf = (i) => `${seriesId}-scatter-${i}`;
+  const marks = useMemo(
+    () => Object.fromEntries((data ?? []).flatMap((s, i) => {
+      const mark = { kind: "symbol", color: colors[i], symbol: seriesSymbol(i, data.length) };
+      return [[s.name, mark], [`${seriesId}-scatter-${i}`, mark]];
+    })),
+    [data, colors, seriesId]
+  );
+  const access = useMemo(() => pointsAccess({
+    series: data ?? [],
+    xHeading: xLabel ?? "x",
+    yHeading: yLabel ?? "y",
+    zHeading: "Size",
+    formatX: (v) => fullFormat(v, "x"),
+    formatY: (v) => fullFormat(v, "y")
+  }), [data, xLabel, yLabel, fullFormat]);
   if (!data?.length) return null;
   return /* @__PURE__ */ jsx(
     ChartWrapper,
@@ -1465,6 +2202,9 @@ var ScatterChart = markChart(forwardRef(function ScatterChart2({
       formatValue: fullFormat,
       className,
       "aria-label": ariaLabel,
+      access,
+      description,
+      marks,
       children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
         ScatterChart$1,
         {
@@ -1504,11 +2244,12 @@ var ScatterChart = markChart(forwardRef(function ScatterChart2({
             data.map((series, i) => /* @__PURE__ */ jsx(
               Scatter,
               {
+                id: idOf(i),
                 name: series.name,
                 data: series.points,
                 fill: colors[i],
                 isAnimationActive: isAnimated,
-                shape: (p) => /* @__PURE__ */ jsx(Symbols, { ...withoutRowFields(p), type: "circle" })
+                shape: (p) => /* @__PURE__ */ jsx(Symbols, { ...withoutRowFields(p), type: seriesSymbol(i, data.length) })
               },
               series.name
             ))
@@ -1530,7 +2271,8 @@ var RadarChart = markChart(forwardRef(function RadarChart2({
   animated,
   valueFormat = "number",
   "aria-label": ariaLabel,
-  className
+  className,
+  description
 }, ref) {
   const solidColors = useChartColors(dataKeys.length, false);
   const softColors = useChartColors(dataKeys.length, true);
@@ -1540,8 +2282,21 @@ var RadarChart = markChart(forwardRef(function RadarChart2({
   const locale = useFormatLocale();
   const tickFormat = useMemo(() => axisTickFormatter(values, valueFormat, locale), [values, valueFormat, locale]);
   const fullFormat = useMemo(() => fullValueFormatter(valueFormat, locale), [valueFormat, locale]);
+  const dashes = dataKeys.map((_, i) => seriesDash(i, dataKeys.length));
+  const marks = useMemo(
+    () => Object.fromEntries(dataKeys.map((dk, i) => [dk.key, { kind: "line", color: solidColors[i], dash: seriesDash(i, dataKeys.length) }])),
+    [dataKeys, solidColors]
+  );
+  const access = useMemo(() => cartesianAccess({
+    kind: "Radar chart",
+    data: data ?? [],
+    categoryKey: axisKey,
+    series: dataKeys.map((dk) => ({ dataKey: dk.key, label: dk.label ?? dk.key })),
+    format: fullFormat,
+    over: "names"
+  }), [data, axisKey, dataKeys, fullFormat]);
   if (!data?.length) return null;
-  return /* @__PURE__ */ jsx(ChartWrapper, { ref, height, size: { model: "square" }, chart: "radar", className, "aria-label": ariaLabel, formatValue: fullFormat, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(RadarChart$1, { data, cx: "50%", cy: "50%", outerRadius: "75%", accessibilityLayer: true, children: [
+  return /* @__PURE__ */ jsx(ChartWrapper, { ref, height, size: { model: "square" }, chart: "radar", className, "aria-label": ariaLabel, formatValue: fullFormat, access, description, marks, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(RadarChart$1, { data, cx: "50%", cy: "50%", outerRadius: "75%", accessibilityLayer: true, children: [
     /* @__PURE__ */ jsx(PolarGrid, { stroke: "var(--ds-border-subtle)" }),
     /* @__PURE__ */ jsx(
       PolarAngleAxis,
@@ -1568,6 +2323,7 @@ var RadarChart = markChart(forwardRef(function RadarChart2({
         stroke: solidColors[i],
         fill: filled ? softColors[i] : "transparent",
         strokeWidth: 2,
+        strokeDasharray: dashes[i],
         dot: showDots ? { r: 3, fill: solidColors[i] } : false,
         isAnimationActive: isAnimated
       },
@@ -1585,18 +2341,30 @@ var RadialBarChart = markChart(forwardRef(function RadialBarChart2({
   endAngle = -270,
   animated,
   "aria-label": ariaLabel,
-  className
+  className,
+  description
 }, ref) {
   const colors = useChartColors(data.length, false);
+  const chartId = useId();
+  const surface = useResolvedToken("--ds-bg-surface");
+  const locale = useFormatLocale();
+  const format = useMemo(() => fullValueFormatter(void 0, locale), [locale]);
   const isAnimated = useChartAnimation(animated);
   const chartData = data.map((d, i) => ({
     name: d.name,
-    value: d.value,
+    // a number written as text is drawn as the table and the sentence read it (Sprint 25.8.9)
+    value: numberOf(d.value) ?? 0,
     ...d.max !== void 0 ? { max: d.max } : {},
-    fill: colors[i % colors.length]
+    // Sprint 25.8.9 item 4: each bar after the first fills with a pattern over its colour, as the legend shows it
+    fill: seriesPattern(chartId, i, data.length) ? `url(#${seriesPattern(chartId, i, data.length)})` : colors[i % colors.length]
   }));
+  const marks = useMemo(
+    () => Object.fromEntries(data.map((d, i) => [d.name, { kind: "fill", color: colors[i % colors.length], pattern: seriesPattern(chartId, i, data.length) }])),
+    [data, colors, chartId]
+  );
+  const access = useMemo(() => partsAccess({ kind: "radial", items: data.map((d) => ({ name: d.name, value: d.value, ...d.max !== void 0 ? { max: d.max } : {} })), format }), [data, format]);
   if (!data?.length) return null;
-  return /* @__PURE__ */ jsx(ChartWrapper, { ref, height, size: { model: "square" }, chart: "radial-bar", className, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(ChartWrapper, { ref, height, size: { model: "square" }, chart: "radial-bar", className, "aria-label": ariaLabel, access, description, marks, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
     RadialBarChart$1,
     {
       data: chartData,
@@ -1608,6 +2376,7 @@ var RadialBarChart = markChart(forwardRef(function RadialBarChart2({
       endAngle,
       accessibilityLayer: true,
       children: [
+        /* @__PURE__ */ jsx(SeriesPatterns, { chartId, colors: data.map((_, i) => colors[i % colors.length]), surface }),
         /* @__PURE__ */ jsx(
           RadialBar,
           {
@@ -1631,17 +2400,21 @@ var FunnelChart = markChart(forwardRef(function FunnelChart2({
   showLabels = true,
   animated,
   "aria-label": ariaLabel,
-  className
+  className,
+  description
 }, ref) {
   const colors = useChartColors(data.length, false);
+  const locale = useFormatLocale();
+  const format = useMemo(() => fullValueFormatter(void 0, locale), [locale]);
+  const access = useMemo(() => partsAccess({ kind: "funnel", items: data.map((d) => ({ name: d.name, value: d.value })), format }), [data, format]);
   const isAnimated = useChartAnimation(animated);
   const chartData = data.map((d, i) => ({
     name: d.name,
-    value: d.value,
+    value: numberOf(d.value) ?? 0,
     fill: colors[i % colors.length]
   }));
   if (!data?.length) return null;
-  return /* @__PURE__ */ jsx(ChartWrapper, { ref, height, size: { model: "rows", units: data.length * STAGE_ROWS, axis: "16px" }, chart: "funnel", className, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(FunnelChart$1, { accessibilityLayer: true, children: [
+  return /* @__PURE__ */ jsx(ChartWrapper, { ref, height, size: { model: "rows", units: data.length * STAGE_ROWS, axis: "16px" }, chart: "funnel", className, "aria-label": ariaLabel, access, description, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(FunnelChart$1, { accessibilityLayer: true, children: [
     /* @__PURE__ */ jsx(Funnel, { dataKey: "value", data: chartData, isAnimationActive: isAnimated, children: showLabels && /* @__PURE__ */ jsx(
       LabelList,
       {
@@ -1727,9 +2500,9 @@ var TINT_L_MIN = 0.1;
 var TINT_L_STEP = 0.01;
 var WHITE_RANGE = [1, 1];
 var DARK_RANGE = luminanceRange(DARK_TEXT_CANDIDATE);
-function minContrast(text, fills) {
+function minContrast(text2, fills) {
   let min = Infinity;
-  for (const f of fills) min = Math.min(min, worstContrastOf(text, luminanceRange(f)));
+  for (const f of fills) min = Math.min(min, worstContrastOf(text2, luminanceRange(f)));
   return min;
 }
 function onFillDarkTint(fill, ...moreFills) {
@@ -1754,22 +2527,25 @@ function onFillTextValue(fill, ...moreFills) {
   if (tint) return oklchCss(tint);
   return minContrast(DARK_RANGE, fills) >= whiteMin ? ON_FILL_DARK : ON_FILL_WHITE;
 }
+function treemapLeaves(nodes, path = []) {
+  return nodes.flatMap((node) => node.children?.length ? treemapLeaves(node.children, [...path, node.name]) : [{ name: node.name, value: numberOf(node.value) ?? 0, ...path.length ? { group: path.join(" \u203A ") } : {} }]);
+}
 var LABEL_INSET = 4;
 function treemapLabelLines(width, height, metrics) {
   if (width - 2 * LABEL_INSET < metrics.fontSize * 3) return 0;
   return Math.max(0, Math.floor((height - 2 * LABEL_INSET) / metrics.lineHeight));
 }
 var computedColors = /* @__PURE__ */ new Map();
-function computedColor(css) {
-  if (typeof document === "undefined") return css;
-  let value = computedColors.get(css);
+function computedColor(css2) {
+  if (typeof document === "undefined") return css2;
+  let value = computedColors.get(css2);
   if (value === void 0) {
-    const probe = document.createElement("span");
-    probe.style.color = css;
-    document.body.appendChild(probe);
-    value = getComputedStyle(probe).color;
-    probe.remove();
-    computedColors.set(css, value);
+    const probe2 = document.createElement("span");
+    probe2.style.color = css2;
+    document.body.appendChild(probe2);
+    value = getComputedStyle(probe2).color;
+    probe2.remove();
+    computedColors.set(css2, value);
   }
   return value;
 }
@@ -1781,8 +2557,8 @@ function contrastColor(color) {
   const rgb = /^rgba?\(\s*(\d+)[\s,]+(\d+)[\s,]+(\d+)/.exec(color);
   const c = color.replace("#", "");
   const [r, g, b] = rgb ? [Number(rgb[1]), Number(rgb[2]), Number(rgb[3])] : c.length >= 6 ? [parseInt(c.substring(0, 2), 16), parseInt(c.substring(2, 4), 16), parseInt(c.substring(4, 6), 16)] : [0, 0, 0];
-  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
-  return luminance > 0.55 ? "#1f2937" : "#ffffff";
+  const luminance2 = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  return luminance2 > 0.55 ? "#1f2937" : "#ffffff";
 }
 function TreemapContent({ x = 0, y = 0, width = 0, height: h = 0, name, depth, colors, radius, index = 0, metrics }) {
   const fill = colors[index % colors.length];
@@ -1821,15 +2597,15 @@ function addFillToNodes(nodes, colors, counter = { i: 0 }) {
     }
     const fill = colors[counter.i % colors.length];
     counter.i++;
-    return { ...node, fill };
+    return { ...node, value: numberOf(node.value) ?? 0, fill };
   });
 }
 var LABEL_TEXT = "text-xs leading-tight font-[family-name:var(--ds-font-sans)]";
 function useLabelMetrics() {
-  const probe = useRef(null);
+  const probe2 = useRef(null);
   const [metrics, setMetrics] = useState(null);
   useLayoutEffect(() => {
-    const el = probe.current;
+    const el = probe2.current;
     if (!el) return;
     const cs = getComputedStyle(el);
     const fontSize = parseFloat(cs.fontSize);
@@ -1837,7 +2613,7 @@ function useLabelMetrics() {
     if (!(fontSize > 0) || !(lineHeight > 0)) return;
     if (!metrics || metrics.fontSize !== fontSize || metrics.lineHeight !== lineHeight) setMetrics({ fontSize, lineHeight });
   });
-  return [probe, metrics];
+  return [probe2, metrics];
 }
 var TreemapChart = markChart(forwardRef(function TreemapChart2({
   data,
@@ -1845,15 +2621,19 @@ var TreemapChart = markChart(forwardRef(function TreemapChart2({
   showTooltip = true,
   animated,
   "aria-label": ariaLabel,
-  className
+  className,
+  description
 }, ref) {
   const colors = useChartColors(6, false);
+  const locale = useFormatLocale();
+  const format = useMemo(() => fullValueFormatter(void 0, locale), [locale]);
+  const access = useMemo(() => partsAccess({ kind: "treemap", items: treemapLeaves(data ?? []), format }), [data, format]);
   const isAnimated = useChartAnimation(animated);
   const radius = useRadius();
-  const [probe, metrics] = useLabelMetrics();
+  const [probe2, metrics] = useLabelMetrics();
   const chartData = addFillToNodes(data, colors);
   if (!data?.length) return null;
-  return /* @__PURE__ */ jsxs(ChartWrapper, { ref, height, size: { model: "ratio" }, chart: "treemap", className, "aria-label": ariaLabel, children: [
+  return /* @__PURE__ */ jsxs(ChartWrapper, { ref, height, size: { model: "ratio" }, chart: "treemap", className, "aria-label": ariaLabel, access, description, children: [
     /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsx(
       Treemap,
       {
@@ -1867,35 +2647,153 @@ var TreemapChart = markChart(forwardRef(function TreemapChart2({
         children: showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) })
       }
     ) }),
-    /* @__PURE__ */ jsx("span", { ref: probe, "aria-hidden": true, className: LABEL_TEXT, style: { position: "absolute", visibility: "hidden", pointerEvents: "none" }, children: "M" })
+    /* @__PURE__ */ jsx("span", { ref: probe2, "aria-hidden": true, className: LABEL_TEXT, style: { position: "absolute", visibility: "hidden", pointerEvents: "none" }, children: "M" })
   ] });
 }));
+function oneWayFlows(links) {
+  const next = /* @__PURE__ */ new Map();
+  const reaches = (from, to) => {
+    const seen = /* @__PURE__ */ new Set();
+    const stack = [from];
+    while (stack.length) {
+      const at = stack.pop();
+      if (at === to) return true;
+      if (seen.has(at)) continue;
+      seen.add(at);
+      stack.push(...next.get(at) ?? []);
+    }
+    return false;
+  };
+  const kept = /* @__PURE__ */ new Set();
+  const loops = [];
+  const largestFirst = links.map((link, i) => ({ link, i })).sort((a, b) => (numberOf(b.link.value) ?? 0) - (numberOf(a.link.value) ?? 0) || a.i - b.i);
+  for (const { link, i } of largestFirst) {
+    if (reaches(link.target, link.source)) {
+      loops.push(link);
+      continue;
+    }
+    kept.add(i);
+    next.set(link.source, [...next.get(link.source) ?? [], link.target]);
+  }
+  return { flows: links.filter((_, i) => kept.has(i)), loops };
+}
+function stepsOf(count, flows) {
+  const depth = new Array(count).fill(0);
+  const valid = flows.filter((f) => f.source >= 0 && f.source < count && f.target >= 0 && f.target < count);
+  for (let pass = 0; pass < count; pass++) {
+    let moved = false;
+    for (const f of valid) if (depth[f.target] < depth[f.source] + 1) {
+      depth[f.target] = depth[f.source] + 1;
+      moved = true;
+    }
+    if (!moved) break;
+  }
+  return Math.max(0, ...depth);
+}
+var measure;
+function textWidth(text2, el) {
+  const style = getComputedStyle(el);
+  const size = parseFloat(style.fontSize) || 12;
+  if (measure === void 0) {
+    try {
+      measure = /jsdom/i.test(navigator.userAgent) ? null : document.createElement("canvas").getContext("2d");
+    } catch {
+      measure = null;
+    }
+  }
+  if (!measure) return text2.length * size * 0.6;
+  measure.font = `${style.fontWeight || "400"} ${size}px ${style.fontFamily || "sans-serif"}`;
+  return measure.measureText(text2).width;
+}
+var NAME_GAP2 = 6;
+var INSET = 8;
+function SankeyNode({ x, y, width, height, payload, ink, steps, inset, drawn: drawn2 }) {
+  const end = steps > 0 && !payload.targetLinks?.length;
+  const name = String(payload.name ?? "");
+  const text2 = useRef(null);
+  const [shown, setShown] = useState(name);
+  useLayoutEffect(() => {
+    const el = text2.current;
+    const drawing = drawn2 > 0 ? drawn2 : Number(el?.ownerSVGElement?.getAttribute("width")) || 0;
+    if (!el || drawing <= 0) {
+      setShown(name);
+      return;
+    }
+    const step = steps > 0 ? (drawing - 2 * inset - width) / steps : drawing - 2 * inset;
+    const gap = step - width;
+    const shared2 = end || (payload.depth ?? 0) === steps - 1;
+    const room = Math.max(0, (shared2 ? gap / 2 : gap) - 2 * NAME_GAP2);
+    if (textWidth(name, el) <= room) {
+      setShown(name);
+      return;
+    }
+    let fits = 0;
+    for (let lo = 1, hi = name.length - 1; lo <= hi; ) {
+      const mid = Math.floor((lo + hi) / 2);
+      if (textWidth(`${name.slice(0, mid).trimEnd()}\u2026`, el) <= room) {
+        fits = mid;
+        lo = mid + 1;
+      } else hi = mid - 1;
+    }
+    setShown(fits > 0 ? `${name.slice(0, fits).trimEnd()}\u2026` : "");
+  }, [name, steps, inset, width, end, payload.depth, drawn2]);
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx("rect", { x, y, width, height, fill: payload.fill }),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        ref: text2,
+        "data-sankey-name": "",
+        x: end ? x - NAME_GAP2 : x + width + NAME_GAP2,
+        y: y + height / 2,
+        textAnchor: end ? "end" : "start",
+        dominantBaseline: "middle",
+        fill: ink,
+        style: { fontSize: "var(--ds-font-size-xs)", fontFamily: "var(--ds-font-sans)" },
+        children: shown
+      }
+    )
+  ] });
+}
 var SankeyChart = markChart(forwardRef(function SankeyChart2({
   data,
   height = "auto",
   showTooltip = true,
   "aria-label": ariaLabel,
-  className
+  className,
+  description
 }, ref) {
   const colors = useChartColors(data.nodes.length, false);
+  const locale = useFormatLocale();
+  const format = useMemo(() => fullValueFormatter(void 0, locale), [locale]);
+  const { flows, loops } = useMemo(() => oneWayFlows(data?.links ?? []), [data]);
+  const [drawn2, setDrawn] = useState(0);
+  const steps = useMemo(() => stepsOf(data?.nodes?.length ?? 0, flows), [data, flows]);
+  const access = useMemo(() => flowAccess({ nodes: data?.nodes ?? [], links: data?.links ?? [], undrawn: loops, format }), [data, loops, format]);
   const linkStroke = useResolvedToken("--ds-border-subtle");
+  const nameInk = useResolvedToken("--ds-text-secondary");
   const nodesWithColor = data.nodes.map((node, i) => ({
     ...node,
     fill: colors[i % colors.length]
   }));
+  useEffect(() => {
+    const loop = loops[0];
+    if (loop) warnOnce("SankeyChart", `the flow from "${data.nodes[loop.source]?.name ?? loop.source}" to "${data.nodes[loop.target]?.name ?? loop.target}" closes a loop, so it isn't drawn: a Sankey chart's flows run one way. Its table still lists it.`);
+  }, [loops, data]);
   const sankeyData = {
     nodes: nodesWithColor,
-    links: data.links
+    links: flows.map((flow) => ({ ...flow, value: numberOf(flow.value) ?? 0 }))
   };
   if (!data?.nodes?.length) return null;
-  return /* @__PURE__ */ jsx(ChartWrapper, { ref, height, size: { model: "ratio" }, chart: "sankey", className, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(ChartWrapper, { ref, height, size: { model: "ratio" }, chart: "sankey", className, "aria-label": ariaLabel, access, description, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", onResize: (w) => setDrawn(w), children: /* @__PURE__ */ jsx(
     Sankey,
     {
       data: sankeyData,
       nodeWidth: 10,
       nodePadding: 24,
-      margin: { top: 8, right: 8, bottom: 8, left: 8 },
+      margin: { top: INSET, right: INSET, bottom: INSET, left: INSET },
       link: { stroke: linkStroke, strokeOpacity: 0.4 },
+      node: (n) => /* @__PURE__ */ jsx(SankeyNode, { x: n.x, y: n.y, width: n.width, height: n.height, payload: n.payload, ink: nameInk, steps, inset: INSET, drawn: drawn2 }),
       children: showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) })
     }
   ) }) });
@@ -1995,9 +2893,15 @@ function ChartContainer({
   const fixed = fixedChartHeight(height);
   const sizesItself = !loading && !!children && isLibraryChart(children);
   const area = fixed ?? CHART_HEIGHTS.md;
+  const [actions, setActions] = useState(null);
+  const [charts, setCharts] = useState(0);
+  const register = useCallback(() => {
+    setCharts((n) => n + 1);
+    return () => setCharts((n) => n - 1);
+  }, []);
   const context = useMemo(
-    () => ({ height: fixed, titleId: title ? titleId : void 0, fillArea: !sizesItself }),
-    [fixed, title, titleId, sizesItself]
+    () => ({ height: fixed, titleId: title ? titleId : void 0, title: title || void 0, fillArea: !sizesItself, actions, charts, register }),
+    [fixed, title, titleId, sizesItself, actions, charts, register]
   );
   let body = null;
   if (loading) {
@@ -2029,7 +2933,10 @@ function ChartContainer({
         className
       ),
       children: [
-        title && /* @__PURE__ */ jsx("h3", { id: titleId, className: cn(CHART_TITLE_CLASSES, "mb-ds-4"), children: title }),
+        title && /* @__PURE__ */ jsxs("div", { "data-chart-header": "", className: "mb-ds-4 flex items-start justify-between gap-ds-3", children: [
+          /* @__PURE__ */ jsx("h3", { id: titleId, className: cn(CHART_TITLE_CLASSES, "min-w-0 flex-1"), children: title }),
+          /* @__PURE__ */ jsx("div", { ref: setActions, "data-chart-actions": "", className: "shrink-0 empty:hidden" })
+        ] }),
         /* @__PURE__ */ jsx(
           "div",
           {