gridsmith-ui 0.17.2 → 0.18.0

package/dist/charts.js

@@ -1,9 +1,10 @@
 import { Skeleton } from './chunk-Z63OSN64.js';
 import { mergeRefs } from './chunk-7Q46JXSK.js';
 import { cn, GLASS_SURFACE } from './chunk-4KVFH5KC.js';
-import { createContext, forwardRef, useRef, useId, useContext, useMemo, useState, useEffect, useSyncExternalStore, useLayoutEffect } from 'react';
-import { ResponsiveContainer, BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Tooltip, Legend, Bar, LineChart as LineChart$1, Line, AreaChart as AreaChart$1, Area, PieChart as PieChart$1, Pie, Cell, ComposedChart, ScatterChart as ScatterChart$1, ZAxis, Scatter, RadarChart as RadarChart$1, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar, RadialBarChart as RadialBarChart$1, RadialBar, FunnelChart as FunnelChart$1, Funnel, LabelList, Treemap, Sankey, Text, Rectangle } from 'recharts';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createContext, forwardRef, useContext, useRef, useState, useMemo, useLayoutEffect, useEffect, useId, useSyncExternalStore, Children, isValidElement } from 'react';
+import { ResponsiveContainer, BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Tooltip, Bar, LineChart as LineChart$1, Line, AreaChart as AreaChart$1, Area, PieChart as PieChart$1, Pie, Cell, ComposedChart, ScatterChart as ScatterChart$1, ZAxis, Scatter, RadarChart as RadarChart$1, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar, RadialBarChart as RadialBarChart$1, RadialBar, FunnelChart as FunnelChart$1, Funnel, LabelList, Treemap, Sankey, Text, Legend, Rectangle } from 'recharts';
+import { createPortal } from 'react-dom';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 var CHART_TOKENS = [
   "--ds-chart-1",
@@ -129,14 +130,415 @@ var useChartAnimation = (animated) => {
   const reduced = useReducedMotion();
   return animated !== false && !reduced;
 };
+
+// ../../showcase/src/lib/chart-categories.ts
+var ENGLISH_MONTHS = [
+  "january",
+  "february",
+  "march",
+  "april",
+  "may",
+  "june",
+  "july",
+  "august",
+  "september",
+  "october",
+  "november",
+  "december",
+  "jan",
+  "feb",
+  "mar",
+  "apr",
+  "jun",
+  "jul",
+  "aug",
+  "sep",
+  "sept",
+  "oct",
+  "nov",
+  "dec"
+];
+var ENGLISH_WEEKDAYS = [
+  "monday",
+  "tuesday",
+  "wednesday",
+  "thursday",
+  "friday",
+  "saturday",
+  "sunday",
+  "mon",
+  "tue",
+  "tues",
+  "wed",
+  "thu",
+  "thur",
+  "thurs",
+  "fri",
+  "sat",
+  "sun"
+];
+var escape = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+var clean = (s) => s.trim().toLowerCase().replace(/\.$/, "");
+function intlNames(locale, kind) {
+  const out = [];
+  try {
+    for (const width of ["short", "long"]) {
+      const fmt = new Intl.DateTimeFormat(locale, kind === "month" ? { month: width, timeZone: "UTC" } : { weekday: width, timeZone: "UTC" });
+      const count = kind === "month" ? 12 : 7;
+      for (let i = 0; i < count; i++) {
+        const date = kind === "month" ? new Date(Date.UTC(2026, i, 15)) : new Date(Date.UTC(2026, 0, 5 + i));
+        out.push(clean(fmt.format(date)));
+      }
+    }
+  } catch {
+  }
+  return out;
+}
+function locales() {
+  const out = /* @__PURE__ */ new Set(["en"]);
+  try {
+    out.add(new Intl.DateTimeFormat().resolvedOptions().locale);
+  } catch {
+  }
+  if (typeof navigator !== "undefined" && navigator.language) out.add(navigator.language);
+  if (typeof document !== "undefined" && document.documentElement?.lang) out.add(document.documentElement.lang);
+  return [...out];
+}
+var cached = null;
+function patterns() {
+  const tags = locales();
+  const key = tags.join("|");
+  if (cached?.key === key) return cached;
+  const months = new Set(ENGLISH_MONTHS);
+  const weekdays = new Set(ENGLISH_WEEKDAYS);
+  for (const tag of tags) {
+    for (const m of intlNames(tag, "month")) if (m) months.add(m);
+    for (const d of intlNames(tag, "weekday")) if (d) weekdays.add(d);
+  }
+  const alt = (set) => [...set].sort((a, b) => b.length - a.length).map(escape).join("|");
+  const M = `(?:${alt(months)})\\.?`;
+  const D = `(?:${alt(weekdays)})\\.?`;
+  const day = String.raw`\d{1,2}(?:st|nd|rd|th|\.)?`;
+  const year = String.raw`'?\d{2,4}`;
+  const list = [
+    // dates in digits: 2026-09-21, 21/09, 09/21/2026, 21.09.2026, an ISO date-time
+    /^\d{4}[-/.]\d{1,2}(?:[-/.]\d{1,2})?$/,
+    /^\d{1,2}[-/.]\d{1,2}(?:[-/.]\d{2,4})?$/,
+    /^\d{4}-\d{2}-\d{2}[T ]\d{1,2}:\d{2}(?::\d{2}(?:\.\d+)?)?(?:Z|[+-]\d{2}:?\d{2})?$/,
+    // a day and a month in either order, and a month alone or with its year: 16 Sep, 21. Sept., Sept 21, March 2026
+    new RegExp(`^${day}\\s*${M}(?:,?\\s+${year})?$`, "iu"),
+    new RegExp(`^${M}\\s*${day}(?:,?\\s+${year})?$`, "iu"),
+    new RegExp(`^${M}(?:\\s*${year})?$`, "iu"),
+    // CJK dates: 9月21日, 2026年9月, 9월 21일
+    /^(?:\d{4}年)?\d{1,2}月(?:\d{1,2}日)?$/u,
+    /^\d{4}年(?:\d{1,2}月)?$/u,
+    /^(?:\d{4}년\s?)?\d{1,2}월(?:\s?\d{1,2}일)?$/u,
+    // a quarter or a half: Q3, Q3 2026, Q3 FY26, 2026 Q3, 3Q26, H1 2026
+    /^Q[1-4](?:\s*[-/']?\s*(?:FY\s?)?'?\d{2,4})?$/i,
+    /^[1-4]Q\s*'?\d{0,4}$/i,
+    /^(?:FY\s?)?'?\d{2,4}\s*[-/]?\s*Q[1-4]$/i,
+    /^H[12](?:\s*'?\d{2,4})?$/i,
+    // a year or a fiscal year: 2026, FY26, FY 2025/26, 2025/26, 2025-2026
+    /^(?:19|20)\d{2}$/,
+    /^FY\s?'?\d{2,4}(?:\s?[-/]\s?'?\d{2,4})?$/i,
+    /^(?:19|20)\d{2}\s?[-/–]\s?(?:(?:19|20)?\d{2})$/,
+    // a week: W12, Wk 3, Week 12, Week 12 2026, 2026-W12
+    /^(?:W|Wk|Week)\.?\s?\d{1,2}(?:\s*[,/-]?\s*\d{4})?$/i,
+    /^\d{4}-?W\d{1,2}(?:-?\d)?$/i,
+    // a weekday: Mon, Tuesday, and the runtime and page locales' own
+    new RegExp(`^${D}$`, "iu"),
+    // a time: 09:00, 9:30 pm, 9am, 14h
+    /^\d{1,2}:\d{2}(?::\d{2})?\s?(?:[ap]\.?m\.?)?$/i,
+    /^\d{1,2}\s?[ap]\.?m\.?$/i,
+    /^\d{1,2}h(?:\d{2})?$/i,
+    // a number, a percentage or an amount: 12, -3.5, 1,200, 12%, $5k, €1.2m, 5 €, a bin (10–20, <10, 50+)
+    /^[<>≤≥~]?\s?[+\-−]?\s?[$€£¥₹]?\s?\d[\d,. \u00a0\u202f]*(?:\s?(?:k|m|mn|bn|b|t))?\s?(?:%|[$€£¥₹])?\+?$/iu,
+    /^[$€£¥₹]?\d[\d,.]*\s?[-–]\s?[$€£¥₹]?\d[\d,.]*\s?(?:k|m|bn|%)?$/iu
+  ];
+  cached = { key, list };
+  return cached;
+}
+function categoryKind(labels) {
+  const { list } = patterns();
+  for (const raw of labels) {
+    if (raw == null) continue;
+    if (typeof raw === "number") {
+      if (Number.isFinite(raw)) continue;
+      return "names";
+    }
+    if (raw instanceof Date) continue;
+    const text = String(raw).trim();
+    if (!text) continue;
+    if (!list.some((re) => re.test(text))) return "names";
+  }
+  return "scale";
+}
+function resolvedAxisFont(el) {
+  const doc = el.ownerDocument;
+  const view = doc.defaultView;
+  let probe = el.querySelector("[data-chart-probe]");
+  let temporary = false;
+  if (!probe) {
+    probe = doc.createElement("span");
+    probe.setAttribute("aria-hidden", "true");
+    probe.style.cssText = "position:absolute;visibility:hidden;pointer-events:none;white-space:nowrap;font-size:var(--ds-font-size-xs);font-family:var(--ds-font-sans)";
+    el.appendChild(probe);
+    temporary = true;
+  }
+  const cs = view?.getComputedStyle(probe);
+  const px = parseFloat(cs?.fontSize ?? "") || 12;
+  const family = (cs?.fontFamily ?? "").trim() || "sans-serif";
+  const style = cs?.fontStyle && cs.fontStyle !== "normal" ? `${cs.fontStyle} ` : "";
+  const weight = cs?.fontWeight && cs.fontWeight !== "400" && cs.fontWeight !== "normal" ? `${cs.fontWeight} ` : "";
+  if (temporary) probe.remove();
+  return { font: `${style}${weight}${px}px ${family}`, px };
+}
+var shared = null;
+function canvasContext() {
+  if (typeof document === "undefined") return null;
+  const getContext = globalThis.HTMLCanvasElement?.prototype.getContext;
+  if (shared && shared.getContext === getContext) return shared.ctx;
+  let ctx = null;
+  try {
+    ctx = document.createElement("canvas").getContext?.("2d") ?? null;
+  } catch {
+    ctx = null;
+  }
+  shared = { getContext, ctx };
+  return ctx;
+}
+function createAxisMeasurer(el) {
+  const ctx = canvasContext();
+  if (!ctx) return null;
+  const { font, px } = resolvedAxisFont(el);
+  ctx.font = font;
+  const widths = /* @__PURE__ */ new Map();
+  const measure = (text) => {
+    let w = widths.get(text);
+    if (w === void 0) {
+      ctx.font = font;
+      w = ctx.measureText(text).width;
+      widths.set(text, w);
+    }
+    return w;
+  };
+  return { measure, px, font };
+}
+var ELLIPSIS = "\u2026";
+var letters = (s) => s.replace(/\s+/g, "").replace(/…/g, "").length;
+function prefixThatFits(text, width, measure, suffix = "") {
+  let lo = 1;
+  let hi = text.length;
+  let best = 0;
+  while (lo <= hi) {
+    const mid = lo + hi >> 1;
+    if (measure(text.slice(0, mid).trimEnd() + suffix) <= width) {
+      best = mid;
+      lo = mid + 1;
+    } else hi = mid - 1;
+  }
+  return best;
+}
+function fitLabel(name, width, measure) {
+  const text = name.replace(/\s+/g, " ").trim();
+  if (!measure || !text || width <= 0 || measure(text) <= width) return { lines: [text], cut: false, shown: letters(text) };
+  const words = text.split(" ");
+  let first = "";
+  let firstShown = "";
+  let rest = "";
+  for (let i = words.length - 1; i >= 1; i--) {
+    const candidate = words.slice(0, i).join(" ");
+    if (measure(candidate) <= width) {
+      first = firstShown = candidate;
+      rest = words.slice(i).join(" ");
+      break;
+    }
+  }
+  if (!first) {
+    const k2 = Math.max(1, prefixThatFits(text, width, measure, "-"));
+    firstShown = text.slice(0, k2).trimEnd();
+    rest = text.slice(k2).trimStart();
+    first = rest && !text.slice(k2 - 1, k2 + 1).includes(" ") ? `${firstShown}-` : firstShown;
+  }
+  if (!rest) return { lines: [first], cut: false, shown: letters(firstShown) };
+  if (measure(rest) <= width) return { lines: [first, rest], cut: false, shown: letters(firstShown) + letters(rest) };
+  const k = prefixThatFits(rest, width, measure, ELLIPSIS);
+  const kept = k > 0 ? rest.slice(0, k).trimEnd() : "";
+  return { lines: [first, kept + ELLIPSIS], cut: true, shown: letters(firstShown) + letters(kept) };
+}
+var MIN_NAME_CHARS = 6;
+function namesCutShort(names, width, measure) {
+  return names.some((n) => {
+    const fit = fitLabel(n, width, measure);
+    return fit.cut && fit.shown < MIN_NAME_CHARS;
+  });
+}
+var CHART_HEIGHTS = {
+  sm: "var(--ds-chart-height-sm)",
+  md: "var(--ds-chart-height-md)",
+  lg: "var(--ds-chart-height-lg)"
+};
+var CHART_ROW = "var(--ds-chart-row, 2rem)";
+function fixedChartHeight(height) {
+  if (typeof height === "number") return `${height}px`;
+  if (height === "sm" || height === "md" || height === "lg") return CHART_HEIGHTS[height];
+  return void 0;
+}
+var SM = CHART_HEIGHTS.sm;
+var LG = CHART_HEIGHTS.lg;
+function plotBoxStyle(size, fixed) {
+  if (size.model === "square") {
+    return { height: fixed ?? `clamp(${SM}, 100cqi, ${LG})`, flex: "0 0 auto" };
+  }
+  if (size.model === "rows") {
+    const lines = size.lines ? ` + ${size.lines} * 1.25 * var(--ds-font-size-xs)` : "";
+    const height = fixed ?? `max(${SM}, calc(${size.units} * ${CHART_ROW}${lines} + ${size.axis ?? CHART_ROW}))`;
+    return { height, maxHeight: `calc(2 * ${height})`, flex: "1 0 auto" };
+  }
+  return { height: fixed ?? `clamp(${SM}, 50cqi, ${LG})`, maxHeight: `max(${fixed ?? LG}, 100cqi)`, flex: "1 0 auto" };
+}
+var CHART_MARK = /* @__PURE__ */ Symbol.for("gridsmith.Chart");
+function markChart(component) {
+  Object.assign(component, { [CHART_MARK]: true });
+  return component;
+}
+function isLibraryChart(children) {
+  const kids = Children.toArray(children);
+  if (kids.length !== 1) return false;
+  const only = kids[0];
+  if (!isValidElement(only)) return false;
+  const type = only.type;
+  return !!type && typeof type !== "string" && type[CHART_MARK] === true;
+}
+var ChartContainerContext = createContext(null);
+function useInsideChartContainer() {
+  return useContext(ChartContainerContext) !== null;
+}
+var ChartFrameContext = createContext({ legend: null, live: null });
+var REMAPPED = /* @__PURE__ */ new WeakSet();
+function remapRowKeys(e) {
+  if (REMAPPED.has(e.nativeEvent)) return;
+  const next = e.key === "ArrowDown" || e.key === "ArrowRight";
+  const previous = e.key === "ArrowUp" || e.key === "ArrowLeft";
+  if (!next && !previous) return;
+  const target = e.target;
+  if (!target.closest?.(".recharts-wrapper")) return;
+  e.preventDefault();
+  e.stopPropagation();
+  const View = target.ownerDocument.defaultView ?? window;
+  const event = new View.KeyboardEvent("keydown", { key: next ? "ArrowLeft" : "ArrowRight", bubbles: true, cancelable: true });
+  REMAPPED.add(event);
+  target.dispatchEvent(event);
+}
+var ChartWrapper = forwardRef(function ChartWrapper2({
+  height = "auto",
+  size,
+  chart,
+  categoryKind: categoryKind2,
+  categories,
+  categoryAxis,
+  sideways = false,
+  axisTitle,
+  className,
+  children,
+  "aria-label": ariaLabel
+}, ref) {
+  const container = useContext(ChartContainerContext);
+  const rootRef = useRef(null);
+  const plotRef = useRef(null);
+  const [legend, setLegend] = useState(null);
+  const [live, setLive] = useState(null);
+  const frame = useMemo(() => ({ legend, live }), [legend, live]);
+  const [drawn, setDrawn] = useState(null);
+  useLayoutEffect(() => {
+    const plot = plotRef.current;
+    if (!plot || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver((entries) => {
+      const box = entries[entries.length - 1]?.contentRect;
+      if (!box || box.width <= 0 || box.height <= 0) return;
+      setDrawn((prev) => prev && Math.abs(prev.width - box.width) < 0.5 && Math.abs(prev.height - box.height) < 0.5 ? prev : { width: box.width, height: box.height });
+    });
+    observer.observe(plot);
+    return () => observer.disconnect();
+  }, []);
+  const fill = container?.fillArea === true;
+  const fixed = container?.height ?? fixedChartHeight(height);
+  const plotStyle = fill ? { flex: "1 1 0%", minHeight: 0 } : plotBoxStyle(size, fixed);
+  const named = ariaLabel ? { role: "img", "aria-label": ariaLabel } : container?.titleId ? { role: "img", "aria-labelledby": container.titleId } : {};
+  useEffect(() => {
+    const root = rootRef.current;
+    const plot = plotRef.current;
+    if (!root || !plot || !categoryAxis || typeof MutationObserver === "undefined") return;
+    const selector = `.recharts-${categoryAxis}Axis-tick-labels .recharts-cartesian-axis-tick-value`;
+    const count = () => {
+      const labels = Array.from(plot.querySelectorAll(selector)).filter((el) => (el.textContent ?? "").trim() !== "");
+      const shown = String(labels.length);
+      const cut = String(labels.filter((el) => el.hasAttribute("data-cut")).length);
+      if (root.getAttribute("data-labels-shown") !== shown) root.setAttribute("data-labels-shown", shown);
+      if (root.getAttribute("data-labels-cut") !== cut) root.setAttribute("data-labels-cut", cut);
+    };
+    count();
+    const observer = new MutationObserver(count);
+    observer.observe(plot, { subtree: true, childList: true, characterData: true, attributes: true, attributeFilter: ["data-cut"] });
+    return () => observer.disconnect();
+  }, [categoryAxis]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: mergeRefs(ref, rootRef),
+      "data-gs-chart": chart,
+      "data-category-kind": categoryKind2,
+      "data-categories": categories,
+      className: cn("relative flex w-full flex-col", fill && "h-full", className),
+      style: { containerType: "inline-size", minInlineSize: "min(100%, 16rem)", ...fill ? {} : { flex: "1 0 auto" } },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: plotRef,
+            "data-chart-plot": "",
+            className: "relative w-full",
+            style: plotStyle,
+            onKeyDownCapture: sideways ? remapRowKeys : void 0,
+            ...named,
+            children: [
+              axisTitle && /* @__PURE__ */ jsx("span", { "data-chart-axis-title": "", className: "absolute left-0 top-0 whitespace-nowrap text-xs text-[var(--ds-text-muted)] font-[family-name:var(--ds-font-sans)] leading-normal", children: axisTitle }),
+              /* @__PURE__ */ jsx("div", { className: "absolute inset-0", style: drawn ? { minWidth: drawn.width, minHeight: drawn.height } : void 0, children: /* @__PURE__ */ jsx(ChartFrameContext.Provider, { value: frame, children }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { ref: setLegend, "data-chart-legend": "" }),
+        /* @__PURE__ */ jsx("div", { ref: setLive, role: "status", "aria-live": "polite", className: "sr-only" }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-chart-probe": "",
+            "aria-hidden": "true",
+            className: "pointer-events-none invisible absolute left-0 top-0",
+            style: { fontSize: "var(--ds-font-size-xs)", fontFamily: "var(--ds-font-sans)", height: CHART_ROW, width: 0 }
+          }
+        )
+      ]
+    }
+  );
+});
+var hasLabel = (label) => label != null && label !== "" && typeof label !== "number";
+var entryName = (entry, label) => !hasLabel(label) && typeof entry.payload?.name === "string" && entry.payload.name || entry.name;
+var entryValue = (entry) => typeof entry.value === "number" ? entry.value.toLocaleString() : entry.value;
+function tooltipAnnouncement(label, payload) {
+  if (!payload?.length) return "";
+  const values = payload.map((entry) => `${entryName(entry, label)} ${entryValue(entry)}`).join(", ");
+  return hasLabel(label) ? `${String(label)}: ${values}` : values;
+}
 function ChartTooltipContent({ active, payload, label }) {
   const bgSurface = useResolvedToken("--ds-bg-surface");
   const borderSubtle = useResolvedToken("--ds-border-subtle");
   const textPrimary = useResolvedToken("--ds-text-primary");
   const textSecondary = useResolvedToken("--ds-text-secondary");
-  if (!active || !payload?.length) return null;
-  const showLabel = label != null && label !== "" && typeof label !== "number";
-  return /* @__PURE__ */ jsxs(
+  const { live } = useContext(ChartFrameContext);
+  const on = !!active && !!payload?.length;
+  const showLabel = hasLabel(label);
+  const box = on ? /* @__PURE__ */ jsxs(
     "div",
     {
       className: "rounded-[var(--ds-radius-md)] shadow-[var(--ds-shadow-popover)] font-[family-name:var(--ds-font-sans)] text-sm",
@@ -149,7 +551,6 @@ function ChartTooltipContent({ active, payload, label }) {
         showLabel && /* @__PURE__ */ jsx("p", { className: "font-medium mb-ds-1", style: { color: textPrimary }, children: label }),
         payload.map((entry, i) => {
           const dotColor = entry.payload?.fill || entry.color || textSecondary;
-          const displayName = typeof entry.payload?.name === "string" && entry.payload.name || entry.name;
           return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2", style: { marginTop: i > 0 ? 2 : 0 }, children: [
             /* @__PURE__ */ jsx(
               "span",
@@ -159,15 +560,22 @@ function ChartTooltipContent({ active, payload, label }) {
               }
             ),
             /* @__PURE__ */ jsxs("span", { style: { color: textSecondary }, children: [
-              displayName,
+              entryName(entry, label),
               ":"
             ] }),
-            /* @__PURE__ */ jsx("span", { className: "tabular-nums", style: { color: textPrimary }, children: typeof entry.value === "number" ? entry.value.toLocaleString() : entry.value })
+            /* @__PURE__ */ jsx("span", { className: "tabular-nums", style: { color: textPrimary }, children: entryValue(entry) })
           ] }, i);
         })
       ]
     }
-  );
+  ) : null;
+  if (live) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      box,
+      createPortal(on ? tooltipAnnouncement(label, payload) : "", live)
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", children: box });
 }
 function swatchEdge(entry) {
   const stroke = entry.payload?.stroke;
@@ -187,6 +595,20 @@ function ChartLegendContent({ payload }) {
     /* @__PURE__ */ jsx("span", { style: { color: textSecondary }, children: entry.value })
   ] }, i)) });
 }
+function seriesSorter(order, by = "dataKey") {
+  return (item) => {
+    const key = by === "dataKey" ? item.dataKey : item.value;
+    const i = order.indexOf(String(key));
+    return i < 0 ? order.length : i;
+  };
+}
+function ChartLegend({ order, by = "dataKey" }) {
+  const { legend } = useContext(ChartFrameContext);
+  const orderKey = order.join("
");
+  const sorter = useMemo(() => seriesSorter(order, by), [orderKey, by]);
+  if (!legend) return null;
+  return /* @__PURE__ */ jsx(Legend, { portal: legend, content: /* @__PURE__ */ jsx(ChartLegendContent, {}), itemSorter: sorter, wrapperStyle: { paddingTop: "var(--ds-space-3)" } });
+}
 function useGridStroke() {
   return useResolvedToken("--ds-border-subtle");
 }
@@ -196,7 +618,11 @@ function useAxisStyle() {
     tick: {
       fontSize: "var(--ds-font-size-xs)",
       fontFamily: "var(--ds-font-sans)",
-      fill: textMuted
+      fill: textMuted,
+      // Sprint 25.9: Recharts paints a default tick's text with the axis stroke (#666 unless set), not with fill, so the
+      // value axes drew their numbers at about 2.6:1 on dark cards (WCAG 1.4.3 asks 4.5:1). Every axis that spreads this
+      // hides its axis and tick lines, so the stroke only colours the text.
+      stroke: textMuted
     }
   };
 }
@@ -209,41 +635,113 @@ function xAxisTick(props) {
   const { x, y, payload, width: _width, visibleTicksCount: _count, ...rest } = props;
   return /* @__PURE__ */ jsx(Text, { ...rest, x, y, textAnchor: "middle", verticalAnchor: "start", children: payload.value });
 }
-function yAxisTick(props) {
-  const { x, y, payload, ...rest } = props;
-  return /* @__PURE__ */ jsx(Text, { ...rest, x, y, textAnchor: "end", verticalAnchor: "middle", width: 200, maxLines: 2, children: payload.value });
+var LINE_EM = 1.2;
+var NAME_GAP = 8;
+var NAME_COLUMN_INSET = 12;
+function namesTick(measure, orientation, column) {
+  return function NamesTick(props) {
+    const { x, y, payload, width, visibleTicksCount, className, fill, fontSize, fontFamily } = props;
+    const name = String(payload?.value ?? "");
+    const room = orientation === "x" ? (Number(width) || 0) / Math.max(1, Number(visibleTicksCount) || 1) - NAME_GAP : (column ?? (Number(width) || 0)) - NAME_COLUMN_INSET;
+    const fit = fitLabel(name, room, measure);
+    const text = { fill, fontSize, fontFamily, stroke: "none" };
+    const firstDy = orientation === "x" ? 0.71 : 0.355 - (fit.lines.length - 1) * LINE_EM / 2;
+    return /* @__PURE__ */ jsxs("g", { className, "data-cut": fit.cut ? "" : void 0, "data-lines": fit.lines.length, children: [
+      /* @__PURE__ */ jsx("title", { children: name }),
+      fit.lines.map((line, i) => /* @__PURE__ */ jsx("text", { x, y, dy: `${firstDy + i * LINE_EM}em`, textAnchor: orientation === "x" ? "middle" : "end", ...text, children: line }, i))
+    ] });
+  };
+}
+function useAxisMeasure(ref, enabled = true) {
+  const [state, setState] = useState({ measure: null, px: 12, rowPx: 32, width: 0 });
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!enabled || !el) return;
+    let live = true;
+    let font = "";
+    const update = (fresh = false) => {
+      if (!live) return;
+      const measured = el.clientWidth;
+      const probe = el.querySelector("[data-chart-probe]");
+      const row = probe?.getBoundingClientRect().height ?? 0;
+      const next = createAxisMeasurer(el);
+      setState((prev) => {
+        const width = measured > 0 ? measured : prev.width;
+        const rowPx = row > 0 ? row : prev.rowPx;
+        if (!next) return prev.width === width ? prev : { ...prev, width };
+        if (!fresh && next.font === font && prev.measure && prev.width === width && prev.rowPx === rowPx) return prev;
+        const keep = !fresh && next.font === font && prev.measure;
+        font = next.font;
+        return { measure: keep ? prev.measure : next.measure, px: next.px, rowPx, width };
+      });
+    };
+    update(true);
+    const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => update()) : null;
+    ro?.observe(el);
+    const fonts = typeof document !== "undefined" ? document.fonts : void 0;
+    const landed = () => update(true);
+    fonts?.ready.then(landed, () => {
+    });
+    fonts?.addEventListener?.("loadingdone", landed);
+    return () => {
+      live = false;
+      ro?.disconnect();
+      fonts?.removeEventListener?.("loadingdone", landed);
+    };
+  }, [ref, enabled]);
+  return state;
+}
+function valueAxisWidth(values, measure) {
+  const finite = values.filter(Number.isFinite);
+  const max = finite.length ? Math.max(...finite.map(Math.abs)) : 0;
+  const magnitude = max > 0 ? 10 ** Math.floor(Math.log10(max)) : 1;
+  const top = Math.ceil(max / magnitude) * magnitude;
+  const negative = finite.some((v) => v < 0) ? "-" : "";
+  return Math.ceil(measure(`${negative}${top}`)) + 8;
+}
+var SWITCH_HYSTERESIS = 32;
+function useSidewaysSwitch(enabled, names, m, axisWidth, sideMargins) {
+  const [turned, setTurned] = useState(false);
+  const key = names.join("
");
+  const cut = useMemo(() => {
+    if (!enabled || !m.measure || m.width <= 0 || names.length === 0) return { here: false, narrower: false };
+    const cutAt = (width) => namesCutShort(names, (width - sideMargins - axisWidth) / names.length - NAME_GAP, m.measure);
+    return { here: cutAt(m.width), narrower: cutAt(m.width - SWITCH_HYSTERESIS) };
+  }, [enabled, key, m.measure, m.width, axisWidth, sideMargins]);
+  const decision = turned ? cut.here || cut.narrower : cut.here;
+  if (decision !== turned) setTurned(decision);
+  return decision;
+}
+function nameColumn(names, m) {
+  if (!m.measure || m.width <= 0) return void 0;
+  const widest = names.reduce((w, n) => Math.max(w, m.measure(n.replace(/\s+/g, " ").trim())), 0);
+  return Math.max(24, Math.min(Math.ceil(widest) + NAME_COLUMN_INSET, Math.floor(m.width / 3)));
 }
-function lengthPx(value, el) {
-  const v = value.trim();
-  if (v.endsWith("rem")) return parseFloat(v) * (parseFloat(getComputedStyle(el.ownerDocument.documentElement).fontSize) || 16);
-  if (v.endsWith("px")) return parseFloat(v);
-  const n = parseFloat(v);
-  return Number.isFinite(n) ? n : NaN;
+function twoLineNames(names, column, m) {
+  if (!m.measure || column === void 0) return 0;
+  return names.filter((n) => fitLabel(n, column - NAME_COLUMN_INSET, m.measure).lines.length > 1).length;
 }
 function widestLabel(el, labels) {
-  if (typeof document === "undefined") return null;
-  const ctx = document.createElement("canvas").getContext?.("2d");
-  if (!ctx) return null;
-  const cs = getComputedStyle(el);
-  const size = lengthPx(cs.getPropertyValue("--ds-font-size-xs"), el) || 12;
-  const family = cs.getPropertyValue("--ds-font-sans").trim() || cs.fontFamily || "sans-serif";
-  ctx.font = `${size}px ${family}`;
-  return labels.reduce((w, l) => Math.max(w, ctx.measureText(l).width), 0);
+  const measurer = createAxisMeasurer(el);
+  if (!measurer) return null;
+  return labels.reduce((w, l) => Math.max(w, measurer.measure(l)), 0);
 }
 var TICK_GAP = 12;
 var AXIS_RESERVE = 48;
-function useCategoryTicks(data, xAxisKey, ref, override) {
+function useCategoryTicks(data, xAxisKey, ref, override, kind = "scale") {
   const labels = useMemo(() => (data ?? []).map((d) => String(d[xAxisKey] ?? "")), [data, xAxisKey]);
   const labelsKey = labels.join("
");
   const [ticks, setTicks] = useState(void 0);
   const [endMargin, setEndMargin] = useState(4);
   const numeric = typeof override === "number" ? override : void 0;
+  const names = kind === "names";
   useEffect(() => {
     const el = ref.current;
-    if (numeric !== void 0 || !el || labels.length === 0) return;
+    if (names || numeric !== void 0 || !el || labels.length === 0) return;
     let live = true;
     const compute = () => {
       if (!live) return;
+      if (el.clientWidth <= 0) return;
       const widest = widestLabel(el, labels);
       const plot = el.clientWidth - AXIS_RESERVE;
       if (widest == null || plot <= 0) {
@@ -265,33 +763,20 @@ function useCategoryTicks(data, xAxisKey, ref, override) {
       live = false;
       ro.disconnect();
     };
-  }, [labelsKey, numeric, ref]);
+  }, [labelsKey, numeric, names, ref]);
+  if (names) return { interval: 0, endMargin: 4 };
   if (numeric !== void 0) return { interval: numeric, endMargin: 4 };
   return ticks ? { ticks, interval: 0, endMargin } : { interval: "preserveStartEnd", endMargin: 4 };
 }
-var ChartContainerContext = createContext(false);
-function useInsideChartContainer() {
-  return useContext(ChartContainerContext);
-}
-var HEIGHT_MAP = {
-  sm: "var(--ds-chart-height-sm)",
-  md: "var(--ds-chart-height-md)",
-  lg: "var(--ds-chart-height-lg)"
-};
-var ChartWrapper = forwardRef(function ChartWrapper2({ height = "md", className, children, "aria-label": ariaLabel }, ref) {
-  const insideContainer = useInsideChartContainer();
-  if (insideContainer) {
-    return /* @__PURE__ */ jsx("div", { ref, className: cn("h-full w-full", className), ...ariaLabel ? { role: "img", "aria-label": ariaLabel } : {}, children });
-  }
-  const heightValue = typeof height === "number" ? `${height}px` : HEIGHT_MAP[height];
-  return /* @__PURE__ */ jsx("div", { ref, className: cn("w-full", className), style: { height: heightValue }, ...ariaLabel ? { role: "img", "aria-label": ariaLabel } : {}, children });
-});
 function barStackOf(bar, stacked) {
   return bar.stackId ?? (stacked ? "stack" : void 0);
 }
 function anyStack(bars, stacked) {
   return bars.some((bar) => barStackOf(bar, stacked) != null);
 }
+function barGroups(bars, stacked) {
+  return Math.max(1, new Set(bars.map((bar, i) => barStackOf(bar, stacked) ?? `\0${i}`)).size);
+}
 function barShape(bars, index, stacked, radius, horizontal = false) {
   const round = horizontal ? [0, radius, radius, 0] : [radius, radius, 0, 0];
   const square = [0, 0, 0, 0];
@@ -309,14 +794,31 @@ function barShape(bars, index, stacked, radius, horizontal = false) {
   };
   return Shape;
 }
-var BarChart = forwardRef(function BarChart2({
+function valueExtent(data, bars, stacked) {
+  return data.flatMap((row) => {
+    const own = [];
+    const stacks = /* @__PURE__ */ new Map();
+    for (const bar of bars) {
+      const v = Number(row[bar.dataKey]);
+      if (!Number.isFinite(v)) continue;
+      const stack = barStackOf(bar, stacked);
+      if (stack == null) own.push(v);
+      else stacks.set(stack, (stacks.get(stack) ?? 0) + v);
+    }
+    return [...own, ...stacks.values()];
+  });
+}
+var titleLine = (px) => Math.ceil(px * 1.5) + 4;
+var TITLE_LINE_CSS = "calc(1.5 * var(--ds-font-size-xs) + 4px)";
+var BarChart = markChart(forwardRef(function BarChart2({
   data,
   bars,
   xAxisKey,
   xAxisInterval,
-  height = "md",
+  height = "auto",
   stacked = false,
-  horizontal = false,
+  horizontal,
+  categoryKind: categoryKind2,
   showGrid = true,
   showTooltip = true,
   showLegend,
@@ -327,7 +829,20 @@ var BarChart = forwardRef(function BarChart2({
   className
 }, ref) {
   const wrapperRef = useRef(null);
-  const xTicks = useCategoryTicks(data, xAxisKey, wrapperRef, horizontal ? xAxisInterval ?? "preserveStartEnd" : xAxisInterval);
+  const labels = useMemo(() => (data ?? []).map((d) => String(d[xAxisKey] ?? "")), [data, xAxisKey]);
+  const kind = categoryKind2 ?? categoryKind((data ?? []).map((d) => d[xAxisKey]));
+  const names = kind === "names";
+  const measured = useAxisMeasure(wrapperRef, (data?.length ?? 0) > 0);
+  const axisWidth = useMemo(
+    () => measured.measure ? valueAxisWidth(valueExtent(data ?? [], bars, stacked), measured.measure) : 0,
+    [measured.measure, data, bars, stacked]
+  );
+  const turned = useSidewaysSwitch(horizontal === void 0 && names, labels, measured, axisWidth, 8);
+  const sideways = horizontal ?? turned;
+  const xTicks = useCategoryTicks(data, xAxisKey, wrapperRef, xAxisInterval, sideways || names ? "names" : "scale");
+  const column = sideways ? nameColumn(labels, measured) : void 0;
+  const upright = useMemo(() => namesTick(measured.measure, "x"), [measured.measure]);
+  const rows = useMemo(() => namesTick(measured.measure, "y", column), [measured.measure, column]);
   const solidColors = useChartColors(bars.length, false);
   const softColors = useChartColors(bars.length, true);
   const gridStroke = useGridStroke();
@@ -335,94 +850,108 @@ var BarChart = forwardRef(function BarChart2({
   const isAnimated = useChartAnimation(animated);
   const radius = useRadius();
   const legendVisible = showLegend ?? bars.length >= 2;
-  const layout = horizontal ? "vertical" : "horizontal";
+  const valueTitle = horizontal === true ? xAxisLabel : yAxisLabel;
+  const categoryTitle = horizontal === true ? yAxisLabel : xAxisLabel;
+  const topTitle = sideways ? categoryTitle : valueTitle;
+  const bottomTitle = sideways ? valueTitle : categoryTitle;
   const axisLabelStyle = { fontSize: "var(--ds-font-size-xs)", fontFamily: "var(--ds-font-sans)", fill: axisStyle.tick.fill };
+  const bottomLabel = bottomTitle ? { value: bottomTitle, position: "insideBottom", offset: -2, style: axisLabelStyle } : void 0;
+  const groups = barGroups(bars, stacked);
+  const perCategory = 1 + 0.5 * (groups - 1);
+  const titles = [topTitle, bottomTitle].filter(Boolean).length;
+  const size = sideways ? {
+    model: "rows",
+    units: labels.length * perCategory,
+    lines: twoLineNames(labels, column, measured),
+    axis: titles ? `calc(${CHART_ROW} + ${titles} * ${TITLE_LINE_CSS})` : CHART_ROW
+  } : { model: "ratio" };
+  const maxBarSize = sideways ? Math.max(4, Math.round(measured.rowPx * perCategory * 0.7 / groups)) : void 0;
   if (!data?.length) return null;
-  return /* @__PURE__ */ jsx(ChartWrapper, { ref: mergeRefs(ref, wrapperRef), height, className, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
-    BarChart$1,
+  return /* @__PURE__ */ jsx(
+    ChartWrapper,
     {
-      data,
-      layout,
-      stackOffset: anyStack(bars, stacked) ? "sign" : void 0,
-      margin: { top: 4, right: xTicks.endMargin, bottom: 4, left: 4 },
-      accessibilityLayer: true,
-      children: [
-        showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: gridStroke, vertical: !horizontal, horizontal: true }),
-        horizontal ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            XAxis,
-            {
-              type: "number",
-              ...axisStyle.tick,
-              axisLine: false,
-              tickLine: false,
-              label: xAxisLabel ? { value: xAxisLabel, position: "insideBottom", offset: -2, style: axisLabelStyle } : void 0
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            YAxis,
-            {
-              dataKey: xAxisKey,
-              type: "category",
-              width: "auto",
-              ...axisStyle.tick,
-              axisLine: false,
-              tickLine: false,
-              tick: yAxisTick
-            }
-          )
-        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            XAxis,
-            {
-              dataKey: xAxisKey,
-              ...axisStyle.tick,
-              axisLine: false,
-              tickLine: false,
-              tick: xAxisTick,
-              interval: xTicks.interval,
-              ticks: xTicks.ticks,
-              height: "auto",
-              label: xAxisLabel ? { value: xAxisLabel, position: "insideBottom", offset: -2, style: axisLabelStyle } : void 0
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            YAxis,
-            {
-              width: "auto",
-              ...axisStyle.tick,
-              axisLine: false,
-              tickLine: false,
-              label: yAxisLabel ? { value: yAxisLabel, angle: -90, position: "insideLeft", style: axisLabelStyle } : void 0
-            }
-          )
-        ] }),
-        showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}), cursor: { fill: "var(--ds-bg-muted)", opacity: 0.5 } }),
-        legendVisible && /* @__PURE__ */ jsx(Legend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}), wrapperStyle: { paddingTop: "var(--ds-space-3)" } }),
-        bars.map((bar, i) => /* @__PURE__ */ jsx(
-          Bar,
-          {
-            dataKey: bar.dataKey,
-            name: bar.label ?? bar.dataKey,
-            fill: bar.soft ? softColors[i] : solidColors[i],
-            stroke: bar.soft ? solidColors[i] : void 0,
-            strokeWidth: bar.soft ? 1 : void 0,
-            shape: barShape(bars, i, stacked, radius, horizontal),
-            stackId: barStackOf(bar, stacked),
-            isAnimationActive: isAnimated
-          },
-          bar.dataKey
-        ))
-      ]
+      ref: mergeRefs(ref, wrapperRef),
+      height,
+      size,
+      chart: "bar",
+      categoryKind: kind,
+      categories: data.length,
+      categoryAxis: sideways ? "y" : "x",
+      sideways,
+      axisTitle: topTitle,
+      className,
+      "aria-label": ariaLabel,
+      children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+        BarChart$1,
+        {
+          data,
+          layout: sideways ? "vertical" : "horizontal",
+          stackOffset: anyStack(bars, stacked) ? "sign" : void 0,
+          margin: { top: 4 + (topTitle ? titleLine(measured.px) : 0), right: sideways || names ? 4 : xTicks.endMargin, bottom: 4, left: 4 },
+          accessibilityLayer: true,
+          children: [
+            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 }),
+              /* @__PURE__ */ jsx(
+                YAxis,
+                {
+                  dataKey: xAxisKey,
+                  type: "category",
+                  width: column ?? "auto",
+                  ...axisStyle.tick,
+                  axisLine: false,
+                  tickLine: false,
+                  interval: 0,
+                  tick: rows
+                }
+              )
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                XAxis,
+                {
+                  dataKey: xAxisKey,
+                  ...axisStyle.tick,
+                  axisLine: false,
+                  tickLine: false,
+                  tick: names ? upright : xAxisTick,
+                  interval: xTicks.interval,
+                  ticks: xTicks.ticks,
+                  height: "auto",
+                  label: bottomLabel
+                }
+              ),
+              /* @__PURE__ */ jsx(YAxis, { width: "auto", ...axisStyle.tick, axisLine: false, tickLine: false })
+            ] }),
+            showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}), cursor: { fill: "var(--ds-bg-muted)", opacity: 0.5 } }),
+            legendVisible && /* @__PURE__ */ jsx(ChartLegend, { order: bars.map((b) => b.dataKey) }),
+            bars.map((bar, i) => /* @__PURE__ */ jsx(
+              Bar,
+              {
+                dataKey: bar.dataKey,
+                name: bar.label ?? bar.dataKey,
+                fill: bar.soft ? softColors[i] : solidColors[i],
+                stroke: bar.soft ? solidColors[i] : void 0,
+                strokeWidth: bar.soft ? 1 : void 0,
+                shape: barShape(bars, i, stacked, radius, sideways),
+                stackId: barStackOf(bar, stacked),
+                maxBarSize,
+                isAnimationActive: isAnimated
+              },
+              bar.dataKey
+            ))
+          ]
+        }
+      ) })
     }
-  ) }) });
-});
-var LineChart = forwardRef(function LineChart2({
+  );
+}));
+var LineChart = markChart(forwardRef(function LineChart2({
   data,
   lines,
   xAxisKey,
   xAxisInterval,
-  height = "md",
+  height = "auto",
   curved = true,
   showDots = false,
   showGrid = true,
@@ -435,65 +964,73 @@ var LineChart = forwardRef(function LineChart2({
   className
 }, ref) {
   const wrapperRef = useRef(null);
-  const xTicks = useCategoryTicks(data, xAxisKey, wrapperRef, xAxisInterval);
+  const xTicks = useCategoryTicks(data, xAxisKey, wrapperRef, xAxisInterval, "scale");
+  const measured = useAxisMeasure(wrapperRef, !!yAxisLabel && (data?.length ?? 0) > 0);
   const colors = useChartColors(lines.length, false);
   const gridStroke = useGridStroke();
   const axisStyle = useAxisStyle();
   const isAnimated = useChartAnimation(animated);
   const legendVisible = showLegend ?? lines.length >= 2;
   const axisLabelStyle = { fontSize: "var(--ds-font-size-xs)", fontFamily: "var(--ds-font-sans)", fill: axisStyle.tick.fill };
+  const top = 4 + (yAxisLabel ? Math.ceil(measured.px * 1.5) + 4 : 0);
   if (!data?.length) return null;
-  return /* @__PURE__ */ jsx(ChartWrapper, { ref: mergeRefs(ref, wrapperRef), height, className, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(LineChart$1, { data, margin: { top: 4, right: xTicks.endMargin, bottom: 4, left: 4 }, accessibilityLayer: true, children: [
-    showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: gridStroke }),
-    /* @__PURE__ */ jsx(
-      XAxis,
-      {
-        dataKey: xAxisKey,
-        ...axisStyle.tick,
-        axisLine: false,
-        tickLine: false,
-        tick: xAxisTick,
-        interval: xTicks.interval,
-        ticks: xTicks.ticks,
-        height: "auto",
-        label: xAxisLabel ? { value: xAxisLabel, position: "insideBottom", offset: -2, style: axisLabelStyle } : void 0
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      YAxis,
-      {
-        width: "auto",
-        ...axisStyle.tick,
-        axisLine: false,
-        tickLine: false,
-        label: yAxisLabel ? { value: yAxisLabel, angle: -90, position: "insideLeft", style: axisLabelStyle } : void 0
-      }
-    ),
-    showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) }),
-    legendVisible && /* @__PURE__ */ jsx(Legend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}), wrapperStyle: { paddingTop: "var(--ds-space-3)" } }),
-    lines.map((line, i) => /* @__PURE__ */ jsx(
-      Line,
-      {
-        type: curved ? "monotone" : "linear",
-        dataKey: line.dataKey,
-        name: line.label ?? line.dataKey,
-        stroke: colors[i],
-        strokeWidth: 2,
-        strokeDasharray: line.dashed ? "5 5" : void 0,
-        dot: showDots,
-        activeDot: { r: 5, strokeWidth: 2 },
-        isAnimationActive: isAnimated
-      },
-      line.dataKey
-    ))
-  ] }) }) });
-});
-var AreaChart = forwardRef(function AreaChart2({
+  return /* @__PURE__ */ jsx(
+    ChartWrapper,
+    {
+      ref: mergeRefs(ref, wrapperRef),
+      height,
+      size: { model: "ratio" },
+      chart: "line",
+      categoryKind: "scale",
+      categories: data.length,
+      categoryAxis: "x",
+      axisTitle: yAxisLabel,
+      className,
+      "aria-label": ariaLabel,
+      children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(LineChart$1, { data, margin: { top, right: xTicks.endMargin, bottom: 4, left: 4 }, accessibilityLayer: true, children: [
+        showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: gridStroke }),
+        /* @__PURE__ */ jsx(
+          XAxis,
+          {
+            dataKey: xAxisKey,
+            ...axisStyle.tick,
+            axisLine: false,
+            tickLine: false,
+            tick: xAxisTick,
+            interval: xTicks.interval,
+            ticks: xTicks.ticks,
+            height: "auto",
+            label: xAxisLabel ? { value: xAxisLabel, position: "insideBottom", offset: -2, style: axisLabelStyle } : void 0
+          }
+        ),
+        /* @__PURE__ */ jsx(YAxis, { width: "auto", ...axisStyle.tick, axisLine: false, tickLine: false }),
+        showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) }),
+        legendVisible && /* @__PURE__ */ jsx(ChartLegend, { order: lines.map((l) => l.dataKey) }),
+        lines.map((line, i) => /* @__PURE__ */ jsx(
+          Line,
+          {
+            type: curved ? "monotone" : "linear",
+            dataKey: line.dataKey,
+            name: line.label ?? line.dataKey,
+            stroke: colors[i],
+            strokeWidth: 2,
+            strokeDasharray: line.dashed ? "5 5" : void 0,
+            dot: showDots,
+            activeDot: { r: 5, strokeWidth: 2 },
+            isAnimationActive: isAnimated
+          },
+          line.dataKey
+        ))
+      ] }) })
+    }
+  );
+}));
+var AreaChart = markChart(forwardRef(function AreaChart2({
   data,
   areas,
   xAxisKey,
   xAxisInterval,
-  height = "md",
+  height = "auto",
   stacked = false,
   curved = true,
   showGrid = true,
@@ -507,7 +1044,8 @@ var AreaChart = forwardRef(function AreaChart2({
   className
 }, ref) {
   const wrapperRef = useRef(null);
-  const xTicks = useCategoryTicks(data, xAxisKey, wrapperRef, xAxisInterval);
+  const xTicks = useCategoryTicks(data, xAxisKey, wrapperRef, xAxisInterval, "scale");
+  const measured = useAxisMeasure(wrapperRef, !!yAxisLabel && (data?.length ?? 0) > 0);
   const instanceId = useId();
   const solidColors = useChartColors(areas.length, false);
   const softColors = useChartColors(areas.length, true);
@@ -516,58 +1054,65 @@ var AreaChart = forwardRef(function AreaChart2({
   const isAnimated = useChartAnimation(animated);
   const legendVisible = showLegend ?? areas.length >= 2;
   const axisLabelStyle = { fontSize: "var(--ds-font-size-xs)", fontFamily: "var(--ds-font-sans)", fill: axisStyle.tick.fill };
+  const top = 4 + (yAxisLabel ? Math.ceil(measured.px * 1.5) + 4 : 0);
   if (!data?.length) return null;
-  return /* @__PURE__ */ jsx(ChartWrapper, { ref: mergeRefs(ref, wrapperRef), height, className, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(AreaChart$1, { data, margin: { top: 4, right: xTicks.endMargin, bottom: 4, left: 4 }, accessibilityLayer: true, children: [
-    /* @__PURE__ */ jsx("defs", { children: areas.map((area, i) => /* @__PURE__ */ jsxs("linearGradient", { id: `gradient-${instanceId}-${area.dataKey}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-      /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: softColors[i], stopOpacity: 1 }),
-      /* @__PURE__ */ jsx("stop", { offset: "95%", stopColor: softColors[i], stopOpacity: 0.1 })
-    ] }, area.dataKey)) }),
-    showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: gridStroke }),
-    /* @__PURE__ */ jsx(
-      XAxis,
-      {
-        dataKey: xAxisKey,
-        ...axisStyle.tick,
-        axisLine: false,
-        tickLine: false,
-        tick: xAxisTick,
-        interval: xTicks.interval,
-        ticks: xTicks.ticks,
-        height: "auto",
-        label: xAxisLabel ? { value: xAxisLabel, position: "insideBottom", offset: -2, style: axisLabelStyle } : void 0
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      YAxis,
-      {
-        width: "auto",
-        ...axisStyle.tick,
-        axisLine: false,
-        tickLine: false,
-        label: yAxisLabel ? { value: yAxisLabel, angle: -90, position: "insideLeft", style: axisLabelStyle } : void 0
-      }
-    ),
-    showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) }),
-    legendVisible && /* @__PURE__ */ jsx(Legend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}), wrapperStyle: { paddingTop: "var(--ds-space-3)" } }),
-    areas.map((area, i) => /* @__PURE__ */ jsx(
-      Area,
-      {
-        type: curved ? "monotone" : "linear",
-        dataKey: area.dataKey,
-        name: area.label ?? area.dataKey,
-        stroke: solidColors[i],
-        strokeWidth: 2,
-        fill: gradient ? `url(#gradient-${instanceId}-${area.dataKey})` : softColors[i],
-        stackId: stacked ? "stack" : void 0,
-        isAnimationActive: isAnimated
-      },
-      area.dataKey
-    ))
-  ] }) }) });
-});
-var PieChart = forwardRef(function PieChart2({
+  return /* @__PURE__ */ jsx(
+    ChartWrapper,
+    {
+      ref: mergeRefs(ref, wrapperRef),
+      height,
+      size: { model: "ratio" },
+      chart: "area",
+      categoryKind: "scale",
+      categories: data.length,
+      categoryAxis: "x",
+      axisTitle: yAxisLabel,
+      className,
+      "aria-label": ariaLabel,
+      children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(AreaChart$1, { data, margin: { top, right: xTicks.endMargin, bottom: 4, left: 4 }, accessibilityLayer: true, children: [
+        /* @__PURE__ */ jsx("defs", { children: areas.map((area, i) => /* @__PURE__ */ jsxs("linearGradient", { id: `gradient-${instanceId}-${area.dataKey}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: softColors[i], stopOpacity: 1 }),
+          /* @__PURE__ */ jsx("stop", { offset: "95%", stopColor: softColors[i], stopOpacity: 0.1 })
+        ] }, area.dataKey)) }),
+        showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: gridStroke }),
+        /* @__PURE__ */ jsx(
+          XAxis,
+          {
+            dataKey: xAxisKey,
+            ...axisStyle.tick,
+            axisLine: false,
+            tickLine: false,
+            tick: xAxisTick,
+            interval: xTicks.interval,
+            ticks: xTicks.ticks,
+            height: "auto",
+            label: xAxisLabel ? { value: xAxisLabel, position: "insideBottom", offset: -2, style: axisLabelStyle } : void 0
+          }
+        ),
+        /* @__PURE__ */ jsx(YAxis, { width: "auto", ...axisStyle.tick, axisLine: false, tickLine: false }),
+        showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) }),
+        legendVisible && /* @__PURE__ */ jsx(ChartLegend, { order: areas.map((a) => a.dataKey) }),
+        areas.map((area, i) => /* @__PURE__ */ jsx(
+          Area,
+          {
+            type: curved ? "monotone" : "linear",
+            dataKey: area.dataKey,
+            name: area.label ?? area.dataKey,
+            stroke: solidColors[i],
+            strokeWidth: 2,
+            fill: gradient ? `url(#gradient-${instanceId}-${area.dataKey})` : softColors[i],
+            stackId: stacked ? "stack" : void 0,
+            isAnimationActive: isAnimated
+          },
+          area.dataKey
+        ))
+      ] }) })
+    }
+  );
+}));
+var PieChart = markChart(forwardRef(function PieChart2({
   data,
-  height = "md",
+  height = "auto",
   donut = false,
   showTooltip = true,
   showLegend = true,
@@ -580,7 +1125,7 @@ var PieChart = forwardRef(function PieChart2({
   const isAnimated = useChartAnimation(animated);
   const renderLabel = showLabels ? ({ percent }) => `${((percent ?? 0) * 100).toFixed(0)}%` : false;
   if (!data?.length) return null;
-  return /* @__PURE__ */ jsx(ChartWrapper, { ref, height, className, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(PieChart$1, { accessibilityLayer: true, children: [
+  return /* @__PURE__ */ jsx(ChartWrapper, { ref, height, size: { model: "square" }, chart: "pie", className, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(PieChart$1, { accessibilityLayer: true, children: [
     /* @__PURE__ */ jsx(
       Pie,
       {
@@ -600,18 +1145,20 @@ var PieChart = forwardRef(function PieChart2({
       }
     ),
     showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) }),
-    showLegend && /* @__PURE__ */ jsx(Legend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}), wrapperStyle: { paddingTop: "var(--ds-space-3)" } })
+    showLegend && /* @__PURE__ */ jsx(ChartLegend, { order: data.map((d) => d.name), by: "value" })
   ] }) }) });
-});
-var CompositeChart = forwardRef(function CompositeChart2({
+}));
+var CompositeChart = markChart(forwardRef(function CompositeChart2({
   data,
   bars,
   lines,
   xAxisKey,
   xAxisInterval,
-  height = "md",
+  height = "auto",
   stacked = false,
   dualAxis = !anyStack(bars, stacked),
+  categoryKind: categoryKind2,
+  horizontal,
   showGrid = true,
   showTooltip = true,
   showLegend = true,
@@ -622,7 +1169,33 @@ var CompositeChart = forwardRef(function CompositeChart2({
   className
 }, ref) {
   const wrapperRef = useRef(null);
-  const xTicks = useCategoryTicks(data, xAxisKey, wrapperRef, xAxisInterval);
+  const labels = useMemo(() => (data ?? []).map((d) => String(d[xAxisKey] ?? "")), [data, xAxisKey]);
+  const kind = categoryKind2 ?? categoryKind((data ?? []).map((d) => d[xAxisKey]));
+  const names = kind === "names";
+  const measured = useAxisMeasure(wrapperRef, (data?.length ?? 0) > 0);
+  const axisWidth = useMemo(() => {
+    if (!measured.measure) return 0;
+    const values = (data ?? []).flatMap((row) => {
+      const stacks = /* @__PURE__ */ new Map();
+      const own = [];
+      for (const bar of bars) {
+        const v = Number(row[bar.dataKey]);
+        if (!Number.isFinite(v)) continue;
+        const stack = barStackOf(bar, stacked);
+        if (stack == null) own.push(v);
+        else stacks.set(stack, (stacks.get(stack) ?? 0) + v);
+      }
+      return [...own, ...stacks.values(), ...dualAxis ? [] : lines.map((l) => Number(row[l.dataKey]))];
+    });
+    const lineValues = (data ?? []).flatMap((row) => lines.map((l) => Number(row[l.dataKey])));
+    return valueAxisWidth(values, measured.measure) + (dualAxis ? valueAxisWidth(lineValues, measured.measure) : 0);
+  }, [measured.measure, data, bars, lines, stacked, dualAxis]);
+  const turned = useSidewaysSwitch(horizontal === void 0 && names, labels, measured, axisWidth, 8);
+  const sideways = horizontal ?? turned;
+  const xTicks = useCategoryTicks(data, xAxisKey, wrapperRef, xAxisInterval, sideways ? "names" : kind);
+  const column = sideways ? nameColumn(labels, measured) : void 0;
+  const tick = useMemo(() => names ? namesTick(measured.measure, "x") : xAxisTick, [names, measured.measure]);
+  const rows = useMemo(() => namesTick(measured.measure, "y", column), [measured.measure, column]);
   const barSoftColors = useChartColors(bars.length, true);
   const barSolidColors = useChartColors(bars.length, false);
   const lineColors = useChartColors(lines.length, false);
@@ -631,74 +1204,125 @@ var CompositeChart = forwardRef(function CompositeChart2({
   const isAnimated = useChartAnimation(animated);
   const radius = useRadius();
   const axisLabelStyle = { fontSize: "var(--ds-font-size-xs)", fontFamily: "var(--ds-font-sans)", fill: axisStyle.tick.fill };
+  const topTitle = sideways ? xAxisLabel : yAxisLabel;
+  const bottomTitle = sideways ? yAxisLabel : xAxisLabel;
+  const bottomLabel = bottomTitle ? { value: bottomTitle, position: "insideBottom", offset: -2, style: axisLabelStyle } : void 0;
+  const top = 4 + (topTitle ? Math.ceil(measured.px * 1.5) + 4 : 0);
+  const groups = barGroups(bars, stacked);
+  const perCategory = 1 + 0.5 * (groups - 1);
+  const titles = [topTitle, bottomTitle].filter(Boolean).length + (sideways && dualAxis ? 1 : 0);
+  const size = sideways ? {
+    model: "rows",
+    units: labels.length * perCategory,
+    lines: twoLineNames(labels, column, measured),
+    axis: titles ? `calc(${CHART_ROW} + ${titles} * calc(1.5 * var(--ds-font-size-xs) + 4px))` : CHART_ROW
+  } : { model: "ratio" };
+  const maxBarSize = sideways ? Math.max(4, Math.round(measured.rowPx * perCategory * 0.7 / groups)) : void 0;
+  const barAxis = sideways ? { xAxisId: "left" } : { yAxisId: "left" };
+  const lineAxis = sideways ? { xAxisId: dualAxis ? "right" : "left" } : { yAxisId: dualAxis ? "right" : "left" };
   if (!data?.length) return null;
-  return /* @__PURE__ */ jsx(ChartWrapper, { ref: mergeRefs(ref, wrapperRef), height, className, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(ComposedChart, { data, stackOffset: anyStack(bars, stacked) ? "sign" : void 0, margin: { top: 4, right: xTicks.endMargin, bottom: 4, left: 4 }, accessibilityLayer: true, children: [
-    showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: gridStroke }),
-    /* @__PURE__ */ jsx(
-      XAxis,
-      {
-        dataKey: xAxisKey,
-        ...axisStyle.tick,
-        axisLine: false,
-        tickLine: false,
-        tick: xAxisTick,
-        interval: xTicks.interval,
-        ticks: xTicks.ticks,
-        height: "auto",
-        label: xAxisLabel ? { value: xAxisLabel, position: "insideBottom", offset: -2, style: axisLabelStyle } : void 0
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      YAxis,
-      {
-        yAxisId: "left",
-        width: "auto",
-        ...axisStyle.tick,
-        axisLine: false,
-        tickLine: false,
-        label: yAxisLabel ? { value: yAxisLabel, angle: -90, position: "insideLeft", style: axisLabelStyle } : void 0
-      }
-    ),
-    dualAxis && /* @__PURE__ */ jsx(YAxis, { yAxisId: "right", orientation: "right", width: "auto", ...axisStyle.tick, axisLine: false, tickLine: false }),
-    showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) }),
-    showLegend && /* @__PURE__ */ jsx(Legend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}), wrapperStyle: { paddingTop: "var(--ds-space-3)" } }),
-    bars.map((bar, i) => /* @__PURE__ */ jsx(
-      Bar,
-      {
-        dataKey: bar.dataKey,
-        name: bar.label ?? bar.dataKey,
-        fill: barSoftColors[i],
-        stroke: barSolidColors[i],
-        strokeWidth: 1,
-        shape: barShape(bars, i, stacked, radius),
-        stackId: barStackOf(bar, stacked),
-        yAxisId: "left",
-        isAnimationActive: isAnimated
-      },
-      bar.dataKey
-    )),
-    lines.map((line, i) => /* @__PURE__ */ jsx(
-      Line,
-      {
-        type: "monotone",
-        dataKey: line.dataKey,
-        name: line.label ?? line.dataKey,
-        stroke: lineColors[i],
-        strokeWidth: 2,
-        strokeDasharray: line.dashed ? "5 5" : void 0,
-        dot: false,
-        yAxisId: dualAxis ? "right" : "left",
-        isAnimationActive: isAnimated
-      },
-      line.dataKey
-    ))
-  ] }) }) });
-});
-var ScatterChart = forwardRef(function ScatterChart2({
+  return /* @__PURE__ */ jsx(
+    ChartWrapper,
+    {
+      ref: mergeRefs(ref, wrapperRef),
+      height,
+      size,
+      chart: "composite",
+      categoryKind: kind,
+      categories: data.length,
+      categoryAxis: sideways ? "y" : "x",
+      sideways,
+      axisTitle: topTitle,
+      className,
+      "aria-label": ariaLabel,
+      children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+        ComposedChart,
+        {
+          data,
+          layout: sideways ? "vertical" : "horizontal",
+          stackOffset: anyStack(bars, stacked) ? "sign" : void 0,
+          margin: { top, right: sideways || names ? 4 : xTicks.endMargin, bottom: 4, left: 4 },
+          accessibilityLayer: true,
+          children: [
+            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 }),
+              dualAxis && /* @__PURE__ */ jsx(XAxis, { xAxisId: "right", type: "number", orientation: "top", ...axisStyle.tick, axisLine: false, tickLine: false, height: "auto" }),
+              /* @__PURE__ */ jsx(
+                YAxis,
+                {
+                  dataKey: xAxisKey,
+                  type: "category",
+                  width: column ?? "auto",
+                  ...axisStyle.tick,
+                  axisLine: false,
+                  tickLine: false,
+                  interval: 0,
+                  tick: rows
+                }
+              )
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                XAxis,
+                {
+                  dataKey: xAxisKey,
+                  ...axisStyle.tick,
+                  axisLine: false,
+                  tickLine: false,
+                  tick,
+                  interval: xTicks.interval,
+                  ticks: xTicks.ticks,
+                  height: "auto",
+                  label: bottomLabel
+                }
+              ),
+              /* @__PURE__ */ jsx(YAxis, { yAxisId: "left", width: "auto", ...axisStyle.tick, axisLine: false, tickLine: false }),
+              dualAxis && /* @__PURE__ */ jsx(YAxis, { yAxisId: "right", orientation: "right", width: "auto", ...axisStyle.tick, axisLine: false, tickLine: false })
+            ] }),
+            showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) }),
+            showLegend && /* @__PURE__ */ jsx(ChartLegend, { order: [...bars.map((b) => b.dataKey), ...lines.map((l) => l.dataKey)] }),
+            bars.map((bar, i) => /* @__PURE__ */ jsx(
+              Bar,
+              {
+                dataKey: bar.dataKey,
+                name: bar.label ?? bar.dataKey,
+                fill: barSoftColors[i],
+                stroke: barSolidColors[i],
+                strokeWidth: 1,
+                shape: barShape(bars, i, stacked, radius, sideways),
+                stackId: barStackOf(bar, stacked),
+                maxBarSize,
+                ...barAxis,
+                isAnimationActive: isAnimated
+              },
+              bar.dataKey
+            )),
+            lines.map((line, i) => /* @__PURE__ */ jsx(
+              Line,
+              {
+                type: "monotone",
+                dataKey: line.dataKey,
+                name: line.label ?? line.dataKey,
+                stroke: lineColors[i],
+                strokeWidth: 2,
+                strokeDasharray: line.dashed ? "5 5" : void 0,
+                dot: false,
+                ...lineAxis,
+                isAnimationActive: isAnimated
+              },
+              line.dataKey
+            ))
+          ]
+        }
+      ) })
+    }
+  );
+}));
+var ScatterChart = markChart(forwardRef(function ScatterChart2({
   data,
   xLabel,
   yLabel,
-  height = "md",
+  height = "auto",
   showGrid = true,
   showTooltip = true,
   showLegend,
@@ -706,6 +1330,8 @@ var ScatterChart = forwardRef(function ScatterChart2({
   "aria-label": ariaLabel,
   className
 }, ref) {
+  const wrapperRef = useRef(null);
+  const measured = useAxisMeasure(wrapperRef, !!yLabel && (data?.length ?? 0) > 0);
   const colors = useChartColors(data.length, false);
   const gridStroke = useGridStroke();
   const axisStyle = useAxisStyle();
@@ -713,60 +1339,71 @@ var ScatterChart = forwardRef(function ScatterChart2({
   const legendVisible = showLegend ?? data.length >= 2;
   const axisLabelStyle = { fontSize: "var(--ds-font-size-xs)", fontFamily: "var(--ds-font-sans)", fill: axisStyle.tick.fill };
   if (!data?.length) return null;
-  return /* @__PURE__ */ jsx(ChartWrapper, { ref, height, className, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
-    ScatterChart$1,
+  return /* @__PURE__ */ jsx(
+    ChartWrapper,
     {
-      margin: { top: 8, right: 8, bottom: xLabel ? 20 : 4, left: yLabel ? 20 : 4 },
-      accessibilityLayer: true,
-      children: [
-        showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: gridStroke }),
-        /* @__PURE__ */ jsx(
-          XAxis,
-          {
-            type: "number",
-            dataKey: "x",
-            name: xLabel ?? "x",
-            ...axisStyle.tick,
-            axisLine: false,
-            tickLine: false,
-            label: xLabel ? { value: xLabel, position: "bottom", offset: 0, style: { ...axisLabelStyle, textAnchor: "middle" } } : void 0
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          YAxis,
-          {
-            type: "number",
-            dataKey: "y",
-            name: yLabel ?? "y",
-            width: "auto",
-            ...axisStyle.tick,
-            axisLine: false,
-            tickLine: false,
-            label: yLabel ? { value: yLabel, angle: -90, position: "left", offset: 0, style: { ...axisLabelStyle, textAnchor: "middle" } } : void 0
-          }
-        ),
-        /* @__PURE__ */ jsx(ZAxis, { type: "number", dataKey: "z", range: [40, 400] }),
-        showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) }),
-        legendVisible && /* @__PURE__ */ jsx(Legend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}), wrapperStyle: { paddingTop: "var(--ds-space-3)" } }),
-        data.map((series, i) => /* @__PURE__ */ jsx(
-          Scatter,
-          {
-            name: series.name,
-            data: series.points,
-            fill: colors[i],
-            isAnimationActive: isAnimated
-          },
-          series.name
-        ))
-      ]
+      ref: mergeRefs(ref, wrapperRef),
+      height,
+      size: { model: "ratio" },
+      chart: "scatter",
+      axisTitle: yLabel,
+      className,
+      "aria-label": ariaLabel,
+      children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+        ScatterChart$1,
+        {
+          margin: { top: 8 + (yLabel ? Math.ceil(measured.px * 1.5) + 4 : 0), right: 8, bottom: xLabel ? 20 : 4, left: 4 },
+          accessibilityLayer: true,
+          children: [
+            showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: gridStroke }),
+            /* @__PURE__ */ jsx(
+              XAxis,
+              {
+                type: "number",
+                dataKey: "x",
+                name: xLabel ?? "x",
+                ...axisStyle.tick,
+                axisLine: false,
+                tickLine: false,
+                label: xLabel ? { value: xLabel, position: "bottom", offset: 0, style: { ...axisLabelStyle, textAnchor: "middle" } } : void 0
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              YAxis,
+              {
+                type: "number",
+                dataKey: "y",
+                name: yLabel ?? "y",
+                width: "auto",
+                ...axisStyle.tick,
+                axisLine: false,
+                tickLine: false
+              }
+            ),
+            /* @__PURE__ */ jsx(ZAxis, { type: "number", dataKey: "z", range: [40, 400] }),
+            showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) }),
+            legendVisible && /* @__PURE__ */ jsx(ChartLegend, { order: data.map((s) => s.name), by: "value" }),
+            data.map((series, i) => /* @__PURE__ */ jsx(
+              Scatter,
+              {
+                name: series.name,
+                data: series.points,
+                fill: colors[i],
+                isAnimationActive: isAnimated
+              },
+              series.name
+            ))
+          ]
+        }
+      ) })
     }
-  ) }) });
-});
-var RadarChart = forwardRef(function RadarChart2({
+  );
+}));
+var RadarChart = markChart(forwardRef(function RadarChart2({
   data,
   dataKeys,
   axisKey,
-  height = "md",
+  height = "auto",
   filled = true,
   showDots = true,
   showTooltip = true,
@@ -780,7 +1417,7 @@ var RadarChart = forwardRef(function RadarChart2({
   const isAnimated = useChartAnimation(animated);
   const legendVisible = showLegend ?? dataKeys.length >= 2;
   if (!data?.length) return null;
-  return /* @__PURE__ */ jsx(ChartWrapper, { ref, height, className, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(RadarChart$1, { data, cx: "50%", cy: "50%", outerRadius: "75%", accessibilityLayer: true, children: [
+  return /* @__PURE__ */ jsx(ChartWrapper, { ref, height, size: { model: "square" }, chart: "radar", className, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(RadarChart$1, { data, cx: "50%", cy: "50%", outerRadius: "75%", accessibilityLayer: true, children: [
     /* @__PURE__ */ jsx(PolarGrid, { stroke: "var(--ds-border-subtle)" }),
     /* @__PURE__ */ jsx(
       PolarAngleAxis,
@@ -797,7 +1434,7 @@ var RadarChart = forwardRef(function RadarChart2({
       }
     ),
     showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) }),
-    legendVisible && /* @__PURE__ */ jsx(Legend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}), wrapperStyle: { paddingTop: "var(--ds-space-3)" } }),
+    legendVisible && /* @__PURE__ */ jsx(ChartLegend, { order: dataKeys.map((dk) => dk.key) }),
     dataKeys.map((dk, i) => /* @__PURE__ */ jsx(
       Radar,
       {
@@ -812,10 +1449,10 @@ var RadarChart = forwardRef(function RadarChart2({
       dk.key
     ))
   ] }) }) });
-});
-var RadialBarChart = forwardRef(function RadialBarChart2({
+}));
+var RadialBarChart = markChart(forwardRef(function RadialBarChart2({
   data,
-  height = "md",
+  height = "auto",
   showTooltip = true,
   showLegend = true,
   showLabels = false,
@@ -832,7 +1469,7 @@ var RadialBarChart = forwardRef(function RadialBarChart2({
     fill: colors[i % colors.length]
   }));
   if (!data?.length) return null;
-  return /* @__PURE__ */ jsx(ChartWrapper, { ref, height, className, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(ChartWrapper, { ref, height, size: { model: "square" }, chart: "radial-bar", className, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
     RadialBarChart$1,
     {
       data: chartData,
@@ -854,16 +1491,16 @@ var RadialBarChart = forwardRef(function RadialBarChart2({
           }
         ),
         showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) }),
-        showLegend && /* @__PURE__ */ jsx(Legend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}), wrapperStyle: { paddingTop: "var(--ds-space-3)" } })
+        showLegend && /* @__PURE__ */ jsx(ChartLegend, { order: data.map((d) => d.name), by: "value" })
       ]
     }
   ) }) });
-});
-var FunnelChart = forwardRef(function FunnelChart2({
+}));
+var STAGE_ROWS = 1.5;
+var FunnelChart = markChart(forwardRef(function FunnelChart2({
   data,
-  height = "md",
+  height = "auto",
   showTooltip = true,
-  showLegend = true,
   showLabels = true,
   animated,
   "aria-label": ariaLabel,
@@ -876,7 +1513,7 @@ var FunnelChart = forwardRef(function FunnelChart2({
     fill: colors[i % colors.length]
   }));
   if (!data?.length) return null;
-  return /* @__PURE__ */ jsx(ChartWrapper, { ref, height, className, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(FunnelChart$1, { accessibilityLayer: true, children: [
+  return /* @__PURE__ */ jsx(ChartWrapper, { ref, height, size: { model: "rows", units: data.length * STAGE_ROWS, axis: "16px" }, chart: "funnel", className, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(FunnelChart$1, { accessibilityLayer: true, children: [
     /* @__PURE__ */ jsx(Funnel, { dataKey: "value", data: chartData, isAnimationActive: isAnimated, children: showLabels && /* @__PURE__ */ jsx(
       LabelList,
       {
@@ -887,10 +1524,9 @@ var FunnelChart = forwardRef(function FunnelChart2({
         fontFamily: "var(--ds-font-sans)"
       }
     ) }),
-    showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) }),
-    showLegend && /* @__PURE__ */ jsx(Legend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}), wrapperStyle: { paddingTop: "var(--ds-space-3)" } })
+    showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) })
   ] }) }) });
-});
+}));
 function contrastColor(hex) {
   const c = hex.replace("#", "");
   if (c.length < 6) return "#ffffff";
@@ -946,9 +1582,9 @@ function addFillToNodes(nodes, colors, counter = { i: 0 }) {
     return { ...node, fill };
   });
 }
-var TreemapChart = forwardRef(function TreemapChart2({
+var TreemapChart = markChart(forwardRef(function TreemapChart2({
   data,
-  height = "md",
+  height = "auto",
   showTooltip = true,
   animated,
   "aria-label": ariaLabel,
@@ -959,7 +1595,7 @@ var TreemapChart = forwardRef(function TreemapChart2({
   const radius = useRadius();
   const chartData = addFillToNodes(data, colors);
   if (!data?.length) return null;
-  return /* @__PURE__ */ jsx(ChartWrapper, { ref, height, className, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(ChartWrapper, { ref, height, size: { model: "ratio" }, chart: "treemap", className, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsx(
     Treemap,
     {
       data: chartData,
@@ -972,10 +1608,10 @@ var TreemapChart = forwardRef(function TreemapChart2({
       children: showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) })
     }
   ) }) });
-});
-var SankeyChart = forwardRef(function SankeyChart2({
+}));
+var SankeyChart = markChart(forwardRef(function SankeyChart2({
   data,
-  height = "md",
+  height = "auto",
   showTooltip = true,
   "aria-label": ariaLabel,
   className
@@ -991,7 +1627,7 @@ var SankeyChart = forwardRef(function SankeyChart2({
     links: data.links
   };
   if (!data?.nodes?.length) return null;
-  return /* @__PURE__ */ jsx(ChartWrapper, { ref, height, className, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(ChartWrapper, { ref, height, size: { model: "ratio" }, chart: "sankey", className, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsx(
     Sankey,
     {
       data: sankeyData,
@@ -1002,7 +1638,7 @@ var SankeyChart = forwardRef(function SankeyChart2({
       children: showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) })
     }
   ) }) });
-});
+}));
 var Sparkline = forwardRef(function Sparkline2({
   data,
   variant = "line",
@@ -1084,13 +1720,9 @@ var Sparkline = forwardRef(function Sparkline2({
     )
   ] }) }) });
 });
-var HEIGHT_MAP2 = {
-  sm: "var(--ds-chart-height-sm)",
-  md: "var(--ds-chart-height-md)",
-  lg: "var(--ds-chart-height-lg)"
-};
+var CHART_TITLE_CLASSES = "font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]";
 function ChartContainer({
-  height = "md",
+  height = "auto",
   title,
   loading = false,
   emptyState,
@@ -1098,39 +1730,52 @@ function ChartContainer({
   children,
   className
 }) {
-  const fill = height === "fill";
+  const titleId = useId();
+  const fixed = fixedChartHeight(height);
+  const sizesItself = !loading && !!children && isLibraryChart(children);
+  const area = fixed ?? CHART_HEIGHTS.md;
+  const context = useMemo(
+    () => ({ height: fixed, titleId: title ? titleId : void 0, fillArea: !sizesItself }),
+    [fixed, title, titleId, sizesItself]
+  );
+  let body = null;
+  if (loading) {
+    body = /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex flex-col justify-end gap-ds-2 px-ds-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex items-end h-full gap-ds-1", children: [65, 40, 80, 55, 72, 45, 60].map((h, i) => /* @__PURE__ */ jsx(Skeleton, { variant: "custom", className: "flex-1", height: `${h}%` }, i)) }),
+      /* @__PURE__ */ jsx(Skeleton, { variant: "text", lines: 1, className: "w-full" })
+    ] });
+  } else if (children) {
+    body = /* @__PURE__ */ jsx(ChartContainerContext.Provider, { value: context, children: sizesItself ? 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",
     {
       "data-card": "",
+      "data-gs": "chart",
       className: cn(
-        fill && "h-full flex flex-col",
+        "flex flex-col",
         variant === "ghost" ? "bg-transparent" : cn(
-          "rounded-[var(--ds-radius-md)] p-ds-4",
+          // CardHeader's inset, so titles inside frames line up in a row (A1)
+          "rounded-[var(--ds-radius-md)] px-ds-5 py-ds-4",
           "bg-[var(--ds-bg-surface)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
           GLASS_SURFACE
         ),
         className
       ),
       children: [
-        title && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--ds-text-primary)] mb-ds-4", children: title }),
+        title && /* @__PURE__ */ jsx("h3", { id: titleId, className: cn(CHART_TITLE_CLASSES, "mb-ds-4"), children: title }),
         /* @__PURE__ */ jsx(
           "div",
           {
-            style: fill ? { minHeight: HEIGHT_MAP2.sm } : { height: HEIGHT_MAP2[height] },
-            className: cn("relative", fill && "flex-1"),
-            children: /* @__PURE__ */ jsx("div", { className: fill ? "absolute inset-0" : "h-full", children: loading ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-end h-full gap-ds-2 px-ds-2", children: [
-              /* @__PURE__ */ jsx("div", { className: "flex items-end h-full gap-ds-1", children: [65, 40, 80, 55, 72, 45, 60].map((h, i) => /* @__PURE__ */ jsx(
-                Skeleton,
-                {
-                  variant: "custom",
-                  className: "flex-1",
-                  height: `${h}%`
-                },
-                i
-              )) }),
-              /* @__PURE__ */ jsx(Skeleton, { variant: "text", lines: 1, className: "w-full" })
-            ] }) : children ? /* @__PURE__ */ jsx(ChartContainerContext.Provider, { value: true, children: /* @__PURE__ */ jsx("div", { className: "h-full w-full", children }) }) : emptyState ? /* @__PURE__ */ jsx("div", { className: "h-full w-full flex items-center justify-center", children: emptyState }) : null })
+            "data-chart-body": "",
+            className: "relative flex min-w-0 flex-col",
+            style: { flex: "1 1 0%", minHeight: sizesItself ? void 0 : area },
+            children: body
           }
         )
       ]
@@ -1138,6 +1783,6 @@ function ChartContainer({
   );
 }
 
-export { AreaChart, BarChart, ChartContainer, CompositeChart, FunnelChart, LineChart, PieChart, RadarChart, RadialBarChart, SankeyChart, ScatterChart, Sparkline, TreemapChart, useChartColors };
+export { AreaChart, BarChart, ChartContainer, CompositeChart, FunnelChart, LineChart, PieChart, RadarChart, RadialBarChart, SankeyChart, ScatterChart, Sparkline, TreemapChart, categoryKind, useChartColors };
 //# sourceMappingURL=charts.js.map
 //# sourceMappingURL=charts.js.map