gridsmith-ui 0.31.1 → 0.33.0

package/dist/charts.js

@@ -1,16 +1,18 @@
 "use client";
-import { SegmentedControl, TITLE_TEXT, Skeleton } from './chunk-BHTAVJIG.js';
-import { useKeyboardScroll } from './chunk-KSJTMSYA.js';
-import { useFormatLocale, useHydrated } from './chunk-LJYSVZMI.js';
-import './chunk-IZW5XHKA.js';
+import { SegmentedControl, CELL_FRAME, TITLE_TEXT, TITLE_FLOOR, CELL_ROOM_INNER, CELL_HIDE_CHART_ACTIONS, Skeleton } from './chunk-6XCWKLJZ.js';
+import { useFormatLocale } from './chunk-R7FG4ZQ5.js';
+import './chunk-OWGF362U.js';
 import { formatLocale } from './chunk-7QLXYRPD.js';
+import './chunk-R2IAK3J3.js';
+import { DashboardCellContext } from './chunk-P3NUUIL6.js';
+import { useHydrated } from './chunk-GIA4BMGI.js';
 import { FormChangeCtx } from './chunk-72SDAX54.js';
-import { elementType } from './chunk-HQFTP7Y5.js';
+import { elementType } from './chunk-FF57N3P7.js';
 import './chunk-7RKC5C7G.js';
-import './chunk-W3GY5ROH.js';
-import { mergeRefs } from './chunk-DR6WEI3A.js';
+import { useKeyboardScroll } from './chunk-F2XMZOUP.js';
+import { mergeRefs } from './chunk-HCEHTJ5E.js';
 import { warnOnce } from './chunk-53F7GVBQ.js';
-import { cn, FOCUS_INSET, GLASS_SURFACE } from './chunk-EZ3ZGFGA.js';
+import { cn, FOCUS_INSET, GLASS_SURFACE } from './chunk-2724SJO2.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';
@@ -480,20 +482,26 @@ function percent(part, whole) {
 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) {
+var NAMED = 3;
+var namesOrCount = (names, unit) => names.length <= NAMED ? listOf(names) : `${names.length} ${unit}`;
+function leadSaid(points, over, f) {
   if (!points.length) return null;
-  if (points.length === 1) return `${label}: ${f(points[0].value)} (${points[0].cat}).`;
+  if (points.length === 1) return `${f(points[0].value)} (${points[0].cat})`;
+  const same = (a, b) => f(a) === f(b);
   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}.`;
+  if (same(high.value, low.value)) return over === "scale" ? `${f(high.value)} throughout` : `${f(high.value)} for each`;
+  const at = (v) => namesOrCount(points.filter((p) => same(p.value, v)).map((p) => p.cat), "categories");
+  if (over === "names") return `highest ${f(high.value)} (${at(high.value)}), lowest ${f(low.value)} (${at(low.value)})`;
   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}.`;
+  const top = Math.max(first.value, end.value), bottom = Math.min(first.value, end.value);
+  const above = same(high.value, top) ? 0 : high.value - top;
+  const below = same(low.value, bottom) ? 0 : bottom - low.value;
+  if (up || down || above <= 0 && below <= 0) return course;
+  return above >= below ? `${course}, highest ${f(high.value)} (${at(high.value)})` : `${course}, lowest ${f(low.value)} (${at(low.value)})`;
 }
 function cartesianAccess(o) {
   const { data, categoryKey, series, format } = o;
@@ -514,15 +522,26 @@ function cartesianAccess(o) {
     ...forecastNote ? [forecastNote] : []
   ];
   const names = series.map((s) => s.label);
+  const heading = o.valueHeading?.trim() ?? "";
+  const measure2 = series.length <= NAMED ? listOf(names) : (heading.match(/\p{L}/gu)?.length ?? 0) >= 3 ? heading : `${series.length} series`;
   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.`);
+  const rowsMeasured = data.slice(0, measured);
+  const stack = o.totals === true ? series : o.totals ? series.filter((s) => o.totals.series.includes(s.dataKey)) : [];
+  const oneSign = rowsMeasured.every((row) => {
+    const values = stack.map((s) => numberOf(row[s.dataKey])).filter((v) => v !== null && v !== 0);
+    return values.every((v) => v > 0) || values.every((v) => v < 0);
+  });
+  const totals = stack.length > 1 && oneSign;
+  const lead = series.find((s) => rowsMeasured.some((row) => numberOf(row[s.dataKey]) !== null)) ?? series[0];
+  const points = !lead ? [] : rowsMeasured.map((row, i) => {
+    const values = (totals ? stack : [lead]).map((s) => numberOf(row[s.dataKey]));
+    return { cat: cats[i], value: values.every((v) => v === null) ? null : values.reduce((sum, v) => sum + (v ?? 0), 0) };
+  }).filter((p) => p.value !== null);
+  const said = lead ? leadSaid(points, o.over, (v) => format(v, totals ? void 0 : lead.dataKey)) : null;
+  const totalName = o.totals && o.totals !== true ? o.totals.name : "the total";
+  const leadName = series.length > 1 ? `${totals ? totalName : lead.label} ` : "";
+  const sentences = [`${o.kind} of ${measure2}${span}${said ? `: ${leadName}${said}` : ""}.`];
   for (const note of notes) sentences.push(`${note}.`);
   return {
     table: { columns: [o.categoryHeading || "Category", ...names], numeric: [false, ...series.map(() => true)], rows, notes },
@@ -563,7 +582,10 @@ function partsAccess(o) {
   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)}).`;
+    const alike = (v) => namesOrCount(items.filter((p) => f(p.value) === f(v)).map((p) => p.name), unit);
+    const ties = items.filter((p) => f(p.value) === f(largest.value)).length;
+    const share = (v) => o.kind === "radial" ? "" : ` (${percent(v, total)})`;
+    description += f(largest.value) === f(smallest.value) ? `: each ${f(largest.value)}${share(largest.value)}.` : o.kind === "radial" ? `: ${alike(largest.value)} the highest (${f(largest.value)}), ${alike(smallest.value)} the lowest (${f(smallest.value)}).` : ties > 1 ? `: ${alike(largest.value)} the largest, each ${f(largest.value)}${share(largest.value)}.` : `: ${largest.name} the largest (${f(largest.value)}, ${percent(largest.value, total)}).`;
   } else {
     description += ".";
   }
@@ -575,18 +597,14 @@ function partsAccess(o) {
 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))}` : "";
+  const inSeries = o.series.length > 1 ? ` in ${o.series.length} series` : "";
   return {
     table: {
       columns: ["Series", o.xHeading, o.yHeading, ...withZ ? [o.zHeading] : []],
@@ -594,7 +612,7 @@ function pointsAccess(o) {
       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)}` : ""}.`
+    description: `Scatter chart of ${o.yHeading} against ${o.xHeading}: ${rows.length} ${rows.length === 1 ? "point" : "points"}${inSeries}.`
   };
 }
 function flowAccess(o) {
@@ -653,15 +671,24 @@ function PlotNames({ children }) {
   const value = useMemo(() => ({ place, moves }), [place, moves]);
   return /* @__PURE__ */ jsx(PlotNamesContext.Provider, { value, children });
 }
+var SEGMENT_GAP = 2;
 function markOf(index, marks) {
   return (index + Math.floor(index / CHART_COLOR_COUNT)) % marks;
 }
+function repeatMark(index, marks) {
+  const round = Math.floor(index / CHART_COLOR_COUNT);
+  return round === 0 ? 0 : 1 + (round - 1) % (marks - 1);
+}
+function markFor(index, count, marks, patterns2) {
+  if (count < 2) return 0;
+  return patterns2 ? markOf(index, marks) : repeatMark(index, 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 seriesDash(index, count, patterns2 = false) {
+  return DASHES[markFor(index, count, DASHES.length, patterns2)];
 }
-function lineDashes(lines) {
-  const marks = lines.map((line, i) => lines.length >= 2 ? markOf(i, DASHES.length) : line.dashed ? 1 : 0);
+function lineDashes(lines, patterns2 = false) {
+  const marks = lines.map((line, i) => lines.length >= 2 ? markFor(i, lines.length, DASHES.length, patterns2) : 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) => {
@@ -686,12 +713,12 @@ 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 seriesPatternKind(index, count, patterns2 = false) {
+  const mark = markFor(index, count, PATTERNS + 1, patterns2);
+  return mark === 0 ? void 0 : mark - 1;
 }
-function seriesPattern(chartId, index, count) {
-  if (seriesPatternKind(index, count) === void 0) return void 0;
+function seriesPattern(chartId, index, count, patterns2 = false) {
+  if (seriesPatternKind(index, count, patterns2) === void 0) return void 0;
   return `${chartId.replace(/[^a-zA-Z0-9_-]/g, "")}-series-${index}`;
 }
 var aheadPattern = (id) => `${id}-ahead`;
@@ -786,13 +813,13 @@ function Pattern({ id, kind, fill, on }) {
     kind === 4 && /* @__PURE__ */ jsx("path", { d: "M3,0 v6", ...mark })
   ] });
 }
-function SeriesPatterns({ chartId, colors, surface, ahead = false }) {
+function SeriesPatterns({ chartId, colors, surface, ahead = false, patterns: patterns2 = false }) {
   const ink = useResolvedToken("--ds-text-primary");
   const canvas = useResolvedToken("--ds-bg-canvas");
-  if (colors.length < 2) return null;
+  if (!colors.some((_, i) => seriesPattern(chartId, i, colors.length, patterns2))) return null;
   return /* @__PURE__ */ jsx("defs", { children: colors.map((color, i) => {
-    const id = seriesPattern(chartId, i, colors.length);
-    const kind = seriesPatternKind(i, colors.length);
+    const id = seriesPattern(chartId, i, colors.length, patterns2);
+    const kind = seriesPatternKind(i, colors.length, patterns2);
     if (!id || kind === void 0) return null;
     const faint = ahead ? aheadFill(color, surface, canvas) : null;
     return [
@@ -830,7 +857,9 @@ function PlotName({ x = 0, y = 0, viewBox, value, id, order, place, ink }) {
   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 band = (viewBox?.width ?? 0) > 0 && (viewBox?.height ?? 0) > 0;
+  const beside = band && !!size && (place === "insideTopRight" ? size.width + 2 * OFFSET > (viewBox?.width ?? 0) : place === "insideBottomRight" ? size.height + 2 * OFFSET > (viewBox?.height ?? 0) : false);
+  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 } : beside && place === "insideTopRight" ? { x: (viewBox?.x ?? 0) - OFFSET, y, top, start: false } : beside ? { x, y: (viewBox?.y ?? 0) - OFFSET, top: false, start: false } : { 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,
@@ -952,35 +981,45 @@ function forecastElements(categories, from, label, look) {
   }
   return elements;
 }
-function ChartTable({ table, name, labelledBy }) {
+function ChartTable({ table, name, labelledBy, cell = false }) {
   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
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-chart-table": "",
+      className: cell ? "flex flex-[1_1_0px] flex-col gap-ds-2" : "flex min-h-0 flex-1 flex-col gap-ds-2",
+      style: cell ? { minHeight: "var(--ds-chart-height-sm)" } : void 0,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: setFrame,
+            className: cn(
+              "min-h-0",
+              !cell && "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((cell2, 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: cell2 }, 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: cell2 }, i)) }, r)) })
+            ] })
+          }
         ),
-        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)) })
-  ] });
+        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)",
@@ -1006,6 +1045,9 @@ function plotBoxStyle(size, fixed) {
   }
   return { height: fixed ?? `clamp(${SM}, 50cqi, ${LG})`, maxHeight: `max(${fixed ?? LG}, 100cqi)`, flex: "1 0 auto" };
 }
+function cellPlotStyle(size) {
+  return size.model === "rows" ? plotBoxStyle(size, void 0) : { flex: "1 1 0px", minHeight: SM };
+}
 var CHART_MARK = /* @__PURE__ */ Symbol.for("gridsmith.Chart");
 function markChart(component) {
   Object.assign(component, { [CHART_MARK]: true });
@@ -1038,6 +1080,8 @@ function remapRowKeys(e) {
   const event = new View.KeyboardEvent("keydown", { key: next ? "ArrowLeft" : "ArrowRight", bubbles: true, cancelable: true });
   REMAPPED.add(event);
   target.dispatchEvent(event);
+  const plot = e.currentTarget;
+  View.requestAnimationFrame(() => plot.querySelector(".recharts-tooltip-cursor")?.scrollIntoView?.({ block: "nearest", inline: "nearest" }));
 }
 var ChartWrapper = forwardRef(function ChartWrapper2({
   height = "auto",
@@ -1060,7 +1104,8 @@ var ChartWrapper = forwardRef(function ChartWrapper2({
   const rootRef = useRef(null);
   const [plotEl, setPlotEl] = useState(null);
   const [view, setView] = useState("chart");
-  const descriptionId = useId();
+  const subtitleId = useId();
+  const summaryId = useId();
   const [legend, setLegend] = useState(null);
   const [live, setLive] = useState(null);
   const frame = useMemo(() => ({ legend, live, formatValue, marks }), [legend, live, formatValue, marks]);
@@ -1076,11 +1121,14 @@ var ChartWrapper = forwardRef(function ChartWrapper2({
     observer.observe(plot);
     return () => observer.disconnect();
   }, [plotEl]);
-  const fill = container?.fillArea === true;
+  const cell = container?.cell === true;
+  const fill = !cell && container?.fillArea === true;
   const fixed = container?.height ?? fixedChartHeight(height);
-  const plotStyle = fill ? { flex: "1 1 0%", minHeight: 0 } : plotBoxStyle(size, fixed);
-  const sentence = description?.trim() ? description : access?.description;
-  const describedBy = sentence ? { "aria-describedby": descriptionId } : {};
+  const plotStyle = cell ? cellPlotStyle(size) : fill ? { flex: "1 1 0%", minHeight: 0 } : plotBoxStyle(size, fixed);
+  const subtitle = description?.trim() || void 0;
+  const summary = access?.description;
+  const describers = [subtitle && subtitleId, summary && summaryId].filter(Boolean).join(" ");
+  const describedBy = describers ? { "aria-describedby": describers } : {};
   const named = ariaLabel ? { role: "img", "aria-label": ariaLabel, ...describedBy } : container?.titleId ? { role: "img", "aria-labelledby": container.titleId, ...describedBy } : {};
   useEffect(() => {
     const root = rootRef.current;
@@ -1101,6 +1149,26 @@ var ChartWrapper = forwardRef(function ChartWrapper2({
   }, [categoryAxis, plotEl]);
   const register = container?.register;
   useLayoutEffect(() => register?.(), [register]);
+  const drawing = container?.drawing;
+  useLayoutEffect(() => {
+    if (!drawing || !plotEl || typeof MutationObserver === "undefined") return;
+    let counted;
+    const read = () => {
+      const surface = !!plotEl.querySelector('svg[tabindex="0"]');
+      if (surface && !counted) counted = drawing();
+      else if (!surface && counted) {
+        counted();
+        counted = void 0;
+      }
+    };
+    read();
+    const observer = new MutationObserver(read);
+    observer.observe(plotEl, { childList: true, subtree: true, attributes: true, attributeFilter: ["tabindex"] });
+    return () => {
+      observer.disconnect();
+      counted?.();
+    };
+  }, [drawing, plotEl]);
   const switcher = access ? /* @__PURE__ */ jsx(FormChangeCtx, { value: null, children: /* @__PURE__ */ jsx(
     SegmentedControl,
     {
@@ -1112,8 +1180,10 @@ var ChartWrapper = forwardRef(function ChartWrapper2({
     }
   ) }) : 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;
+  const sentenceShown = view === "table";
+  const subtitleLine = subtitle ? /* @__PURE__ */ jsx("p", { id: subtitleId, "data-chart-subtitle": "", className: "min-w-0 text-sm text-[var(--ds-text-secondary)]", children: subtitle }) : null;
+  const summaryLine = summary ? /* @__PURE__ */ jsx("p", { id: summaryId, "data-chart-description": "", className: sentenceShown ? "min-w-0 text-sm text-[var(--ds-text-secondary)]" : "sr-only", children: summary }) : null;
+  const headText = subtitleLine || sentenceShown && summaryLine;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -1121,14 +1191,17 @@ var ChartWrapper = forwardRef(function ChartWrapper2({
       "data-gs-chart": chart,
       "data-category-kind": categoryKind2,
       "data-categories": categories,
-      className: cn("relative flex w-full flex-col", fill && "h-full", className),
+      className: cn("relative flex w-full flex-col", fill && "h-full", cell && "min-h-full", className),
       style: { containerType: "inline-size", minInlineSize: "min(100%, 16rem)", ...fill ? {} : { flex: "1 0 auto" } },
       children: [
-        (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,
+        (headText || switcher && !actions) && /* @__PURE__ */ jsxs("div", { "data-chart-head": "", className: "mb-ds-3 flex items-start justify-between gap-ds-3", children: [
+          headText && /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-ds-1", children: [
+            subtitleLine,
+            sentenceShown && summaryLine
+          ] }),
           !actions && switcher && /* @__PURE__ */ jsx("div", { className: "ml-auto shrink-0", children: switcher })
         ] }),
-        !sentenceShown && sentenceLine,
+        !sentenceShown && summaryLine,
         actions && switcher && createPortal(switcher, actions),
         view === "chart" || !access ? /* @__PURE__ */ jsxs(
           "div",
@@ -1144,7 +1217,7 @@ var ChartWrapper = forwardRef(function ChartWrapper2({
               /* @__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(ChartTable, { table: access.table, name: `${ariaLabel || container?.title || "The chart"}: values`, labelledBy: ariaLabel ? void 0 : container?.titleId, cell }),
         /* @__PURE__ */ jsx("div", { ref: setLegend, "data-chart-legend": "" }),
         /* @__PURE__ */ jsx("div", { ref: setLive, role: "status", "aria-live": "polite", className: "sr-only" }),
         /* @__PURE__ */ jsx(
@@ -1430,21 +1503,36 @@ 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 insetEnd(box, sideways, gap) {
+  const size = Number(sideways ? box.width : box.height) || 0;
+  const by = Math.sign(size) * Math.min(gap, Math.max(0, Math.abs(size) - 1));
+  return sideways ? { width: size - by } : { y: (Number(box.y) || 0) + by, height: size - by };
+}
+function insetStart(box, sideways, gap) {
+  const size = Number(sideways ? box.width : box.height) || 0;
+  const by = Math.sign(size) * Math.min(gap, Math.max(0, Math.abs(size) - 1));
+  return sideways ? { x: (Number(box.x) || 0) + by, width: size - by } : { height: size - by };
+}
+var edgeWidth = (stroke, width) => typeof stroke === "string" && stroke !== "" && stroke !== "none" ? Number(width) || 1 : 0;
 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);
   const above = stack == null ? [] : bars.filter((b, j) => j > index && barStackOf(b, stacked) === stack);
+  const below = stack == null ? [] : bars.filter((b, j) => j < index && barStackOf(b, stacked) === stack);
   const Shape = (props) => {
     const p = props;
     const row = p.payload ?? {};
-    const down = Number(row[bars[index].dataKey]) < 0;
-    const onTop = above.every((b) => {
-      const value = Number(row[b.dataKey]);
-      return !(down ? value < 0 : value > 0);
-    });
-    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 });
+    const valueOf = (b) => Number(row[b.dataKey]);
+    const down = valueOf(bars[index]) < 0;
+    const onTop = above.every((b) => !(down ? valueOf(b) < 0 : valueOf(b) > 0));
+    const meetsZero = down && below.every((b) => !(valueOf(b) < 0)) && [...below, ...above].some((b) => valueOf(b) > 0);
+    const at = p.originalDataIndex ?? p.index ?? -1;
+    const ahead = forecast && forecast.from >= 0 && at >= forecast.from ? { ...forecast.fill ? { fill: forecast.fill } : { fillOpacity: AHEAD_STRENGTH }, stroke: forecast.edge, strokeWidth: 1.5, strokeDasharray: "3 2" } : void 0;
+    const gap = SEGMENT_GAP + (ahead ? ahead.strokeWidth : edgeWidth(p.stroke, p.strokeWidth));
+    const far = onTop ? { ...p } : { ...p, ...insetEnd(p, horizontal, gap) };
+    const inset = { ...onTop ? {} : insetEnd(p, horizontal, gap), ...meetsZero ? insetStart(far, horizontal, gap) : {} };
+    return /* @__PURE__ */ jsx(Rectangle, { ...withoutRowFields(props), ...ahead, ...inset, radius: onTop ? round : square });
   };
   return Shape;
 }
@@ -1474,7 +1562,8 @@ var BarChart = markChart(forwardRef(function BarChart2({
   description,
   references,
   forecastFrom,
-  forecastLabel = "Forecast"
+  forecastLabel = "Forecast",
+  patterns: patterns2 = false
 }, ref) {
   const wrapperRef = useRef(null);
   const chartId = useId();
@@ -1524,14 +1613,14 @@ var BarChart = markChart(forwardRef(function BarChart2({
   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 fillPatterns = bars.map((_, i) => seriesPattern(chartId, i, bars.length, patterns2));
   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]
+    () => 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, patterns2) }])),
+    [bars, softColors, solidColors, chartId, patterns2]
   );
   const forecastAt = forecastIndex(data ?? [], xAxisKey, forecastFrom);
   const access = useMemo(() => cartesianAccess({
@@ -1539,12 +1628,14 @@ var BarChart = markChart(forwardRef(function BarChart2({
     data: data ?? [],
     categoryKey: xAxisKey,
     categoryHeading: categoryTitle,
+    valueHeading: valueTitle,
     series: bars.map((b) => ({ dataKey: b.dataKey, label: b.label ?? b.dataKey })),
     format: fullFormat,
     over: names ? "names" : "scale",
+    totals: anyStack(bars, stacked) && barGroups(bars, stacked) === 1,
     references,
     forecast: forecastAt >= 0 ? { from: forecastAt, label: forecastLabel } : void 0
-  }), [data, xAxisKey, categoryTitle, bars, fullFormat, names, references, forecastAt, forecastLabel]);
+  }), [data, xAxisKey, categoryTitle, valueTitle, bars, stacked, fullFormat, names, references, forecastAt, forecastLabel]);
   if (!data?.length) return null;
   return /* @__PURE__ */ jsx(
     ChartWrapper,
@@ -1573,7 +1664,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 }),
+            /* @__PURE__ */ jsx(SeriesPatterns, { chartId, colors: fills, surface, ahead: forecastAt >= 0, patterns: patterns2 }),
             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 }),
@@ -1617,10 +1708,10 @@ var BarChart = markChart(forwardRef(function BarChart2({
               {
                 dataKey: bar.dataKey,
                 name: bar.label ?? bar.dataKey,
-                fill: patterns2[i] ? `url(#${patterns2[i]})` : fills[i],
+                fill: fillPatterns[i] ? `url(#${fillPatterns[i]})` : fills[i],
                 stroke: bar.soft ? solidColors[i] : void 0,
                 strokeWidth: bar.soft ? 1 : void 0,
-                shape: barShape(bars, i, stacked, radius, sideways, forecastAt >= 0 ? { from: forecastAt, edge: solidColors[i], fill: aheadBarFill(fills[i], patterns2[i]) } : void 0),
+                shape: barShape(bars, i, stacked, radius, sideways, forecastAt >= 0 ? { from: forecastAt, edge: solidColors[i], fill: aheadBarFill(fills[i], fillPatterns[i]) } : void 0),
                 stackId: barStackOf(bar, stacked),
                 maxBarSize,
                 isAnimationActive: isAnimated
@@ -1653,7 +1744,8 @@ var LineChart = markChart(forwardRef(function LineChart2({
   description,
   references,
   forecastFrom,
-  forecastLabel = "Forecast"
+  forecastLabel = "Forecast",
+  patterns: patterns2 = false
 }, ref) {
   const wrapperRef = useRef(null);
   const values = useMemo(() => [...seriesValues(data ?? [], lines.map((s) => s.dataKey), false), ...referenceValues(references)], [data, lines, references]);
@@ -1670,7 +1762,7 @@ var LineChart = markChart(forwardRef(function LineChart2({
   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 dashes = useMemo(() => lineDashes(lines, patterns2), [lines, patterns2]);
   const marks = useMemo(
     () => Object.fromEntries(lines.map((l, i) => [l.dataKey, { kind: "line", color: colors[i], dash: dashes[i] }])),
     [lines, colors, dashes]
@@ -1682,12 +1774,13 @@ var LineChart = markChart(forwardRef(function LineChart2({
     data: data ?? [],
     categoryKey: xAxisKey,
     categoryHeading: xAxisLabel,
+    valueHeading: yAxisLabel,
     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]);
+  }), [data, xAxisKey, xAxisLabel, yAxisLabel, lines, fullFormat, references, forecastAt, forecastLabel]);
   if (!data?.length) return null;
   return /* @__PURE__ */ jsx(
     ChartWrapper,
@@ -1768,7 +1861,8 @@ var AreaChart = markChart(forwardRef(function AreaChart2({
   description,
   references,
   forecastFrom,
-  forecastLabel = "Forecast"
+  forecastLabel = "Forecast",
+  patterns: patterns2 = false
 }, ref) {
   const wrapperRef = useRef(null);
   const values = useMemo(() => [...seriesValues(data ?? [], areas.map((s) => s.dataKey), stacked), ...referenceValues(references)], [data, areas, stacked, references]);
@@ -1787,10 +1881,10 @@ var AreaChart = markChart(forwardRef(function AreaChart2({
   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 dashes = areas.map((_, i) => seriesDash(i, areas.length, patterns2));
   const marks = useMemo(
-    () => Object.fromEntries(areas.map((a, i) => [a.dataKey, { kind: "line", color: solidColors[i], dash: seriesDash(i, areas.length) }])),
-    [areas, solidColors]
+    () => Object.fromEntries(areas.map((a, i) => [a.dataKey, { kind: "line", color: solidColors[i], dash: seriesDash(i, areas.length, patterns2) }])),
+    [areas, solidColors, patterns2]
   );
   const forecastAt = forecastIndex(data ?? [], xAxisKey, forecastFrom);
   const hatch = forecastHatchId(instanceId);
@@ -1799,12 +1893,14 @@ var AreaChart = markChart(forwardRef(function AreaChart2({
     data: data ?? [],
     categoryKey: xAxisKey,
     categoryHeading: xAxisLabel,
+    valueHeading: yAxisLabel,
     series: areas.map((a) => ({ dataKey: a.dataKey, label: a.label ?? a.dataKey })),
     format: fullFormat,
     over: "scale",
+    totals: stacked,
     references,
     forecast: forecastAt >= 0 ? { from: forecastAt, label: forecastLabel } : void 0
-  }), [data, xAxisKey, xAxisLabel, areas, fullFormat, references, forecastAt, forecastLabel]);
+  }), [data, xAxisKey, xAxisLabel, yAxisLabel, areas, stacked, fullFormat, references, forecastAt, forecastLabel]);
   if (!data?.length) return null;
   return /* @__PURE__ */ jsx(
     ChartWrapper,
@@ -1878,25 +1974,29 @@ var PieChart = markChart(forwardRef(function PieChart2({
   animated,
   "aria-label": ariaLabel,
   className,
-  description
+  description,
+  patterns: patterns2 = false
 }, ref) {
   const colors = useChartColors(data.length, false);
   const chartId = useId();
   const surface = useResolvedToken("--ds-bg-surface");
+  const canvas = useResolvedToken("--ds-bg-canvas");
+  const ground = useMemo(() => groundColour(surface, canvas), [surface, canvas]);
   const locale = useFormatLocale();
   const format = useMemo(() => fullValueFormatter(void 0, locale), [locale]);
   const isAnimated = useChartAnimation(animated);
   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 single = chartData.filter((d) => d.value > 0).length <= 1;
   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]
+    () => Object.fromEntries(data.map((d, i) => [d.name, { kind: "fill", color: colors[i % colors.length], pattern: seriesPattern(chartId, i, data.length, patterns2) }])),
+    [data, colors, chartId, patterns2]
   );
   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, 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(SeriesPatterns, { chartId, colors: fills, surface, patterns: patterns2 }),
     /* @__PURE__ */ jsx(
       Pie,
       {
@@ -1908,12 +2008,14 @@ var PieChart = markChart(forwardRef(function PieChart2({
         outerRadius: "75%",
         innerRadius: donut ? "55%" : 0,
         label: renderLabel,
-        labelLine: showLabels,
+        labelLine: showLabels ? { strokeWidth: 1 } : false,
         isAnimationActive: isAnimated,
+        stroke: single ? "none" : ground,
+        strokeWidth: single ? 0 : SEGMENT_GAP,
         fontSize: "var(--ds-font-size-xs)",
         fontFamily: "var(--ds-font-sans)",
         children: data.map((_, i) => {
-          const pattern = seriesPattern(chartId, i, data.length);
+          const pattern = seriesPattern(chartId, i, data.length, patterns2);
           return /* @__PURE__ */ jsx(Cell, { fill: pattern ? `url(#${pattern})` : fills[i] }, i);
         })
       }
@@ -1946,7 +2048,8 @@ var CompositeChart = markChart(forwardRef(function CompositeChart2({
   description,
   references,
   forecastFrom,
-  forecastLabel = "Forecast"
+  forecastLabel = "Forecast",
+  patterns: patterns2 = false
 }, ref) {
   const wrapperRef = useRef(null);
   const chartId = useId();
@@ -2011,28 +2114,31 @@ var CompositeChart = markChart(forwardRef(function CompositeChart2({
   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 fillPatterns = bars.map((_, i) => seriesPattern(chartId, i, bars.length, patterns2));
   const aheadBarFill = (fill, pattern) => {
     const faint = aheadFill(fill, surface, canvas);
     return faint && pattern ? `url(#${aheadPattern(pattern)})` : faint;
   };
-  const dashes = useMemo(() => lineDashes(lines), [lines]);
+  const dashes = useMemo(() => lineDashes(lines, patterns2), [lines, patterns2]);
   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) }]),
+    ...bars.map((bar, i) => [bar.dataKey, { kind: "fill", color: barSoftColors[i], edge: barSolidColors[i], pattern: seriesPattern(chartId, i, bars.length, patterns2) }]),
     ...lines.map((line, i) => [line.dataKey, { kind: "line", color: lineColors[i], dash: dashes[i] }])
-  ]), [bars, lines, barSoftColors, barSolidColors, lineColors, chartId, dashes]);
+  ]), [bars, lines, barSoftColors, barSolidColors, lineColors, chartId, dashes, patterns2]);
   const forecastAt = forecastIndex(data ?? [], xAxisKey, forecastFrom);
   const access = useMemo(() => cartesianAccess({
     kind: "Bar and line chart",
     data: data ?? [],
     categoryKey: xAxisKey,
     categoryHeading: xAxisLabel,
+    valueHeading: yAxisLabel,
     series: [...bars, ...lines].map((s) => ({ dataKey: s.dataKey, label: s.label ?? s.dataKey })),
     format: fullFormat,
     over: names ? "names" : "scale",
+    // bars that all stack into one column are summed up by their total, the lines left out of it (the fix pass of 25.33)
+    totals: anyStack(bars, stacked) && barGroups(bars, stacked) === 1 ? { series: bars.map((bar) => bar.dataKey), name: "the bars' total" } : void 0,
     references,
     forecast: forecastAt >= 0 ? { from: forecastAt, label: forecastLabel } : void 0
-  }), [data, xAxisKey, xAxisLabel, bars, lines, fullFormat, names, references, forecastAt, forecastLabel]);
+  }), [data, xAxisKey, xAxisLabel, yAxisLabel, bars, lines, stacked, fullFormat, names, references, forecastAt, forecastLabel]);
   if (!data?.length) return null;
   return /* @__PURE__ */ jsx(
     ChartWrapper,
@@ -2061,7 +2167,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 }),
+            /* @__PURE__ */ jsx(SeriesPatterns, { chartId, colors: barSoftColors, surface, ahead: forecastAt >= 0, patterns: patterns2 }),
             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 }),
@@ -2107,10 +2213,10 @@ var CompositeChart = markChart(forwardRef(function CompositeChart2({
               {
                 dataKey: bar.dataKey,
                 name: bar.label ?? bar.dataKey,
-                fill: patterns2[i] ? `url(#${patterns2[i]})` : barSoftColors[i],
+                fill: fillPatterns[i] ? `url(#${fillPatterns[i]})` : barSoftColors[i],
                 stroke: barSolidColors[i],
                 strokeWidth: 1,
-                shape: barShape(bars, i, stacked, radius, sideways, forecastAt >= 0 ? { from: forecastAt, edge: barSolidColors[i], fill: aheadBarFill(barSoftColors[i], patterns2[i]) } : void 0),
+                shape: barShape(bars, i, stacked, radius, sideways, forecastAt >= 0 ? { from: forecastAt, edge: barSolidColors[i], fill: aheadBarFill(barSoftColors[i], fillPatterns[i]) } : void 0),
                 stackId: barStackOf(bar, stacked),
                 maxBarSize,
                 ...barAxis,
@@ -2272,7 +2378,8 @@ var RadarChart = markChart(forwardRef(function RadarChart2({
   valueFormat = "number",
   "aria-label": ariaLabel,
   className,
-  description
+  description,
+  patterns: patterns2 = false
 }, ref) {
   const solidColors = useChartColors(dataKeys.length, false);
   const softColors = useChartColors(dataKeys.length, true);
@@ -2282,10 +2389,10 @@ 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 dashes = dataKeys.map((_, i) => seriesDash(i, dataKeys.length, patterns2));
   const marks = useMemo(
-    () => Object.fromEntries(dataKeys.map((dk, i) => [dk.key, { kind: "line", color: solidColors[i], dash: seriesDash(i, dataKeys.length) }])),
-    [dataKeys, solidColors]
+    () => Object.fromEntries(dataKeys.map((dk, i) => [dk.key, { kind: "line", color: solidColors[i], dash: seriesDash(i, dataKeys.length, patterns2) }])),
+    [dataKeys, solidColors, patterns2]
   );
   const access = useMemo(() => cartesianAccess({
     kind: "Radar chart",
@@ -2342,7 +2449,8 @@ var RadialBarChart = markChart(forwardRef(function RadialBarChart2({
   animated,
   "aria-label": ariaLabel,
   className,
-  description
+  description,
+  patterns: patterns2 = false
 }, ref) {
   const colors = useChartColors(data.length, false);
   const chartId = useId();
@@ -2350,17 +2458,19 @@ var RadialBarChart = markChart(forwardRef(function RadialBarChart2({
   const locale = useFormatLocale();
   const format = useMemo(() => fullValueFormatter(void 0, locale), [locale]);
   const isAnimated = useChartAnimation(animated);
-  const chartData = data.map((d, i) => ({
-    name: d.name,
-    // 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 } : {},
-    // 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 chartData = data.map((d, i) => {
+    const pattern = seriesPattern(chartId, i, data.length, patterns2);
+    return {
+      name: d.name,
+      // 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: pattern ? `url(#${pattern})` : 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]
+    () => Object.fromEntries(data.map((d, i) => [d.name, { kind: "fill", color: colors[i % colors.length], pattern: seriesPattern(chartId, i, data.length, patterns2) }])),
+    [data, colors, chartId, patterns2]
   );
   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;
@@ -2376,7 +2486,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(SeriesPatterns, { chartId, colors: data.map((_, i) => colors[i % colors.length]), surface, patterns: patterns2 }),
         /* @__PURE__ */ jsx(
           RadialBar,
           {
@@ -2404,6 +2514,9 @@ var FunnelChart = markChart(forwardRef(function FunnelChart2({
   description
 }, ref) {
   const colors = useChartColors(data.length, false);
+  const surface = useResolvedToken("--ds-bg-surface");
+  const canvas = useResolvedToken("--ds-bg-canvas");
+  const ground = useMemo(() => groundColour(surface, canvas), [surface, canvas]);
   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]);
@@ -2415,7 +2528,7 @@ var FunnelChart = markChart(forwardRef(function FunnelChart2({
   }));
   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, 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(
+    /* @__PURE__ */ jsx(Funnel, { dataKey: "value", data: chartData, isAnimationActive: isAnimated, stroke: ground, strokeWidth: SEGMENT_GAP, children: showLabels && /* @__PURE__ */ jsx(
       LabelList,
       {
         dataKey: "name",
@@ -2647,7 +2760,7 @@ var TreemapChart = markChart(forwardRef(function TreemapChart2({
         children: showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) })
       }
     ) }),
-    /* @__PURE__ */ jsx("span", { ref: probe2, "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", top: 0, left: 0, visibility: "hidden", pointerEvents: "none" }, children: "M" })
   ] });
 }));
 function oneWayFlows(links) {
@@ -2818,10 +2931,11 @@ var Sparkline = forwardRef(function Sparkline2({
   const chartColor = useResolvedToken(tokenName);
   const softColor = useResolvedToken(softTokenName);
   const chartData = data.map((value, i) => ({ value, index: i }));
+  const picture = ariaLabel ? { role: "img", "aria-label": ariaLabel } : { "aria-hidden": true };
   const containerStyle = insideContainer ? { width: "100%", height: "100%" } : { width: typeof width === "number" ? `${width}px` : width, height: `${height}px` };
   if (!data?.length) return null;
   if (variant === "bar") {
-    return /* @__PURE__ */ jsx("div", { ref, style: containerStyle, className, ...ariaLabel ? { role: "img", "aria-label": ariaLabel } : {}, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(BarChart$1, { data: chartData, margin: { top: 0, right: 0, bottom: 0, left: 0 }, children: [
+    return /* @__PURE__ */ jsx("div", { ref, style: containerStyle, className, ...picture, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(BarChart$1, { data: chartData, margin: { top: 0, right: 0, bottom: 0, left: 0 }, accessibilityLayer: false, children: [
       /* @__PURE__ */ jsx(XAxis, { dataKey: "index", hide: true }),
       /* @__PURE__ */ jsx(YAxis, { hide: true }),
       showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}), cursor: false }),
@@ -2838,7 +2952,7 @@ var Sparkline = forwardRef(function Sparkline2({
   }
   if (variant === "area") {
     const gradientId = `sparkline-gradient-${instanceId}-${color}`;
-    return /* @__PURE__ */ jsx("div", { ref, style: containerStyle, className, ...ariaLabel ? { role: "img", "aria-label": ariaLabel } : {}, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(AreaChart$1, { data: chartData, margin: { top: 2, right: 2, bottom: 2, left: 2 }, children: [
+    return /* @__PURE__ */ jsx("div", { ref, style: containerStyle, className, ...picture, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(AreaChart$1, { data: chartData, margin: { top: 2, right: 2, bottom: 2, left: 2 }, accessibilityLayer: false, children: [
       /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
         /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: softColor, stopOpacity: 1 }),
         /* @__PURE__ */ jsx("stop", { offset: "95%", stopColor: softColor, stopOpacity: 0.1 })
@@ -2861,7 +2975,7 @@ var Sparkline = forwardRef(function Sparkline2({
       )
     ] }) }) });
   }
-  return /* @__PURE__ */ jsx("div", { ref, style: containerStyle, className, ...ariaLabel ? { role: "img", "aria-label": ariaLabel } : {}, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(LineChart$1, { data: chartData, margin: { top: 2, right: 2, bottom: 2, left: 2 }, children: [
+  return /* @__PURE__ */ jsx("div", { ref, style: containerStyle, className, ...picture, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(LineChart$1, { data: chartData, margin: { top: 2, right: 2, bottom: 2, left: 2 }, accessibilityLayer: false, children: [
     /* @__PURE__ */ jsx(XAxis, { dataKey: "index", hide: true }),
     /* @__PURE__ */ jsx(YAxis, { hide: true, domain: ["dataMin - 1", "dataMax + 1"] }),
     showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}), cursor: false }),
@@ -2879,10 +2993,12 @@ var Sparkline = forwardRef(function Sparkline2({
     )
   ] }) }) });
 });
+var CELL_BODY = "min-h-0 overflow-y-auto -m-[4px] p-[4px] scroll-p-[4px]";
 var CHART_TITLE_CLASSES = TITLE_TEXT;
 function ChartContainer({
   height = "auto",
   title,
+  actions: pageActions,
   loading = false,
   emptyState,
   variant = "default",
@@ -2890,9 +3006,27 @@ function ChartContainer({
   className
 }) {
   const titleId = useId();
+  const hint = useContext(DashboardCellContext) !== null;
+  const rootRef = useRef(null);
+  const [nested, setNested] = useState(false);
+  useLayoutEffect(() => {
+    if (hint) setNested(!rootRef.current?.matches(CELL_FRAME));
+  }, [hint]);
+  const cell = hint && !nested;
   const fixed = fixedChartHeight(height);
   const sizesItself = !loading && !!children && isLibraryChart(children);
   const area = fixed ?? CHART_HEIGHTS.md;
+  const [bodyEl, setBodyEl] = useState(null);
+  const [drawings, setDrawings] = useState(0);
+  const drawing = useCallback(() => {
+    setDrawings((n) => n + 1);
+    return () => setDrawings((n) => n - 1);
+  }, []);
+  useKeyboardScroll(bodyEl, title || "Chart", cell && drawings === 0);
+  const strayActions = !title && !!pageActions;
+  useEffect(() => {
+    if (strayActions) warnOnce("ChartContainer", "actions are drawn in the chart's header, beside its title, and this chart has no title: give it a title (what the chart is), or the actions don't show.");
+  }, [strayActions]);
   const [actions, setActions] = useState(null);
   const [charts, setCharts] = useState(0);
   const register = useCallback(() => {
@@ -2900,8 +3034,8 @@ function ChartContainer({
     return () => setCharts((n) => n - 1);
   }, []);
   const context = useMemo(
-    () => ({ height: fixed, titleId: title ? titleId : void 0, title: title || void 0, fillArea: !sizesItself, actions, charts, register }),
-    [fixed, title, titleId, sizesItself, actions, charts, register]
+    () => ({ height: fixed, titleId: title ? titleId : void 0, title: title || void 0, fillArea: !sizesItself, cell, actions, charts, register, drawing: cell ? drawing : void 0 }),
+    [fixed, title, titleId, sizesItself, cell, actions, charts, register, drawing]
   );
   let body = null;
   if (loading) {
@@ -2910,16 +3044,17 @@ function ChartContainer({
       /* @__PURE__ */ jsx(Skeleton, { variant: "text", lines: 1, className: "w-full" })
     ] });
   } else if (children) {
-    body = /* @__PURE__ */ jsx(ChartContainerContext.Provider, { value: context, children: sizesItself ? children : (
+    body = /* @__PURE__ */ jsx(ChartContainerContext.Provider, { value: context, children: /* @__PURE__ */ jsx(DashboardCellContext, { value: null, children: sizesItself || cell ? children : (
       // the area is absolute, so a child that fills 100% has a definite height to fill
       /* @__PURE__ */ jsx("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx("div", { className: "h-full w-full", children }) })
-    ) });
+    ) }) });
   } else if (emptyState) {
     body = /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center", children: emptyState });
   }
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: rootRef,
       "data-card": "",
       "data-gs": "chart",
       className: cn(
@@ -2933,16 +3068,21 @@ function ChartContainer({
         className
       ),
       children: [
-        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 }),
+        title && // Sprint 32 (F2): CardHeader's rule for the title's room. Its basis is its floor (TITLE_FLOOR) and it takes what's
+        // left, so the page's actions and the switch's slot, items of their own, wrap under it, at the end, only when the
+        // title would go under its floor; a title that fits draws as before, and a word wider than the frame breaks there
+        /* @__PURE__ */ jsxs("div", { "data-chart-header": "", className: cn("mb-ds-4 flex flex-wrap items-start justify-end gap-x-ds-3 gap-y-ds-2", CELL_ROOM_INNER, CELL_HIDE_CHART_ACTIONS), children: [
+          /* @__PURE__ */ jsx("h3", { id: titleId, className: cn(CHART_TITLE_CLASSES, "min-w-0 grow me-auto", TITLE_FLOOR), children: title }),
+          pageActions ? /* @__PURE__ */ jsx("div", { "data-chart-page-actions": "", className: "flex shrink-0 items-center gap-ds-2", children: pageActions }) : null,
           /* @__PURE__ */ jsx("div", { ref: setActions, "data-chart-actions": "", className: "shrink-0 empty:hidden" })
         ] }),
         /* @__PURE__ */ jsx(
           "div",
           {
+            ref: setBodyEl,
             "data-chart-body": "",
-            className: "relative flex min-w-0 flex-col",
-            style: { flex: "1 1 0%", minHeight: sizesItself ? void 0 : area },
+            className: cn("relative flex min-w-0 flex-col", cell && [CELL_BODY, FOCUS_INSET]),
+            style: { flex: "1 1 0%", minHeight: sizesItself || cell ? void 0 : area },
             children: body
           }
         )