gridsmith-ui 0.31.0 → 0.32.0

package/dist/charts.js

@@ -1,16 +1,16 @@
 "use client";
-import { SegmentedControl, TITLE_TEXT, Skeleton } from './chunk-U7WBI4AV.js';
-import { useKeyboardScroll } from './chunk-GP2COVJC.js';
+import { SegmentedControl, TITLE_TEXT, Skeleton } from './chunk-OVHM55JF.js';
+import { useKeyboardScroll } from './chunk-H732QL56.js';
 import { useFormatLocale, useHydrated } from './chunk-LJYSVZMI.js';
-import './chunk-BKYWKMUN.js';
+import './chunk-DO6DLTFK.js';
 import { formatLocale } from './chunk-7QLXYRPD.js';
-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 { elementType } from './chunk-XBVZIN26.js';
+import './chunk-7RKC5C7G.js';
+import './chunk-R2IAK3J3.js';
+import { mergeRefs } from './chunk-HCEHTJ5E.js';
 import { warnOnce } from './chunk-53F7GVBQ.js';
-import { cn, FOCUS_INSET, GLASS_SURFACE } from './chunk-OWQ7M6R7.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 +480,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 +520,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 +580,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 +595,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 +610,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 +669,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 +711,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 +811,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 +855,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,
@@ -1060,7 +1087,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]);
@@ -1079,8 +1107,10 @@ var ChartWrapper = forwardRef(function ChartWrapper2({
   const fill = 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 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;
@@ -1112,8 +1142,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",
     {
@@ -1124,11 +1156,14 @@ 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: [
-        (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",
@@ -1430,21 +1465,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 +1524,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 +1575,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 +1590,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 +1626,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 +1670,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 +1706,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 +1724,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 +1736,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 +1823,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 +1843,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 +1855,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 +1936,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 +1970,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 +2010,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 +2076,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 +2129,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 +2175,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 +2340,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 +2351,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 +2411,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 +2420,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 +2448,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 +2476,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 +2490,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",