@galaxy-io/dls 1.3.0 → 1.3.2

package/dist/charts/BarChart.d.ts

@@ -1,6 +1,6 @@
 import { BarChartNormalization } from "./types";
 import type { BarChartGroupDatum, BaseCartesianChartProps, ChartSeriesStyles, ChartSize } from "./types";
-export type BarChartProps<TMetric extends string, TPivot extends string = string, TComponentKey extends string = string> = BaseCartesianChartProps & ChartSize & {
+export type BarChartProps<TMetric extends string, TComponentKey extends string = string> = BaseCartesianChartProps & ChartSize & {
     /**
      * Presentation for every metric, keyed by metric.
      *
@@ -10,7 +10,7 @@ export type BarChartProps<TMetric extends string, TPivot extends string = string
      */
     series: ChartSeriesStyles<TMetric>;
     /** Categories along the x-axis, left to right. */
-    groups: BarChartGroupDatum<NoInfer<TMetric>, NoInfer<TPivot>, NoInfer<TComponentKey>>[];
+    groups: BarChartGroupDatum<NoInfer<TMetric>, NoInfer<TComponentKey>>[];
     /** @default BarChartNormalization.NONE */
     normalization?: BarChartNormalization;
     /**
@@ -27,5 +27,5 @@ export type BarChartProps<TMetric extends string, TPivot extends string = string
  * `bars` in a group render side by side, several `components` in a bar stack,
  * and a chart doing both at once needs no extra configuration.
  */
-declare const BarChart: <TMetric extends string, TPivot extends string = string, TComponentKey extends string = string>({ series, groups, width, height, fillWidth, fillHeight, aspectRatio, margin, normalization, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid, showLegend, noTooltip, tooltipRenderer, isLoading, contentWhenEmpty, ariaLabel, ariaDescription, onPinnedChange, }: BarChartProps<TMetric, TPivot, TComponentKey>) => import("react").JSX.Element;
+declare const BarChart: <TMetric extends string, TComponentKey extends string = string>({ series, groups, width, height, fillWidth, fillHeight, aspectRatio, margin, normalization, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid, showLegend, noTooltip, tooltipRenderer, isLoading, contentWhenEmpty, ariaLabel, ariaDescription, onPinnedChange, }: BarChartProps<TMetric, TComponentKey>) => import("react").JSX.Element;
 export default BarChart;

package/dist/charts/BarChart.js

@@ -1,12 +1,10 @@
-import { useGalaxyTheme } from "../theme/GalaxyTheme.js";
-import { BarChartNormalization, ChartMarkState } from "./types.js";
-import { addAxisTitleSpace, getValueTicks } from "./chartScales.js";
+import { BarChartNormalization, ChartKind, ChartTargetShape } from "./types.js";
+import { useSeriesColorResolver } from "./useSeriesColorResolver.js";
 import { useChartInteraction } from "./useChartInteraction.js";
-import { useChartFormatters } from "./useChartFormatters.js";
-import { useChartDimensions } from "./useChartDimensions.js";
-import { resolveChartPaletteColor, resolveSeriesColor } from "./chartTheme.js";
-import { buildBarChartGeometry, roundedRectPath } from "./barChartGeometry.js";
-import { ChartBarPath, ChartHitTarget } from "./ChartPrimitives.js";
+import { useCartesianChartLayout } from "./useCartesianChartLayout.js";
+import { getBarLegendItems } from "./barChartLegend.js";
+import { buildBarChartGeometry, getBarValueDomain, roundedRectPath } from "./barChartGeometry.js";
+import { ChartBarPath } from "./ChartPrimitives.js";
 import ChartFrame from "./ChartFrame.js";
 import { ChartCategoryAxis, ChartValueAxis } from "./ChartAxis.js";
 import { useCallback, useMemo, useRef } from "react";
@@ -20,44 +18,48 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 * and a chart doing both at once needs no extra configuration.
 */
 var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRatio, margin, normalization = BarChartNormalization.NONE, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid = true, showLegend = true, noTooltip = false, tooltipRenderer, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription, onPinnedChange }) => {
-	const { theme } = useGalaxyTheme();
 	const containerRef = useRef(null);
-	const dimensions = useChartDimensions({
-		containerRef,
-		width,
-		height,
-		fillWidth,
-		fillHeight,
-		aspectRatio,
-		margin: addAxisTitleSpace(margin, {
-			hasValueTitle: Boolean(valueAxisTitle),
-			hasCategoryTitle: Boolean(categoryAxisTitle)
-		})
-	});
-	const { plotWidth, plotHeight } = dimensions;
-	const { formatValue, formatLabel } = useChartFormatters({
-		valueFormatter,
-		valueUnit,
-		labelFormatter
-	});
+	const colors = useSeriesColorResolver(series);
 	/**
-	* Axis and tooltip formatting for a percent-normalized chart.
+	* Axis-only formatting for a percent-normalized chart.
 	*
-	* Normalization rescales values into 0–1, so the caller's formatter — which
-	* describes their real units — would label the axis `0.2`, `0.4`. Unless they
+	* Normalization rescales the *axis* into 0–1, so the caller's formatter —
+	* which describes their real units — would label it `0.2`, `0.4`. Unless they
 	* asked for something specific, show shares as percentages.
+	*
+	* Deliberately not used for the tooltip. `stackComponents` normalizes each
+	* segment's extent but leaves its `value` raw, so a tooltip row still carries
+	* the real number: the axis reports the share, the tooltip reports what the
+	* share is made of. Running a row through this would multiply a raw 200 into
+	* `20000%`.
 	*/
-	const formatAxisValue = useMemo(() => {
+	const deriveAxisFormatter = useCallback((formatValue) => {
 		if (normalization !== BarChartNormalization.PERCENT) return formatValue;
 		if (valueFormatter || valueUnit) return formatValue;
 		return (value) => `${Math.round(value * 100)}%`;
 	}, [
 		normalization,
 		valueFormatter,
-		valueUnit,
-		formatValue
+		valueUnit
 	]);
-	const metricKeys = useMemo(() => Object.keys(series), [series]);
+	const { dimensions, domain, valueTicks, formatValue, formatLabel, formatAxisValue } = useCartesianChartLayout({
+		containerRef,
+		rawDomain: useMemo(() => getBarValueDomain(groups, normalization), [groups, normalization]),
+		valueDomain,
+		width,
+		height,
+		fillWidth,
+		fillHeight,
+		aspectRatio,
+		margin,
+		valueUnit,
+		valueFormatter,
+		labelFormatter,
+		deriveAxisFormatter,
+		valueAxisTitle,
+		categoryAxisTitle
+	});
+	const { plotWidth, plotHeight } = dimensions;
 	/**
 	* True when any bar carries more than one component.
 	*
@@ -68,22 +70,14 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 	* paint every segment identically.
 	*/
 	const isStacked = useMemo(() => groups.some((group) => group.bars.some((bar) => bar.components.length > 1)), [groups]);
-	const resolveColor = useCallback(({ metric, componentIndex, isStacked: barIsStacked, explicit }) => {
-		if (explicit) return resolveChartPaletteColor(theme, explicit);
-		if (barIsStacked) return resolveSeriesColor(theme, componentIndex);
-		return resolveSeriesColor(theme, metricKeys.indexOf(metric), series[metric]?.color);
-	}, [
-		theme,
-		metricKeys,
-		series
-	]);
+	const resolveColor = useCallback(({ metric, componentIndex, isStacked: barIsStacked, explicit }) => barIsStacked ? colors.resolveByIndex(componentIndex, explicit) : colors.resolve(metric, explicit), [colors]);
 	const geometry = useMemo(() => buildBarChartGeometry({
 		groups,
 		plotWidth,
 		plotHeight,
 		normalization,
 		isStacked,
-		valueDomain,
+		domain,
 		resolveColor
 	}), [
 		groups,
@@ -91,65 +85,36 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 		plotHeight,
 		normalization,
 		isStacked,
-		valueDomain,
+		domain,
 		resolveColor
 	]);
-	const valueTicks = useMemo(() => getValueTicks(geometry.valueScale, valueDomain), [geometry.valueScale, valueDomain]);
 	const isEmpty = groups.length === 0;
-	const legendItems = useMemo(() => {
-		if (!isStacked) return metricKeys.map((metric) => ({
-			key: metric,
-			label: series[metric].label,
-			color: resolveColor({
-				metric,
-				barIndex: 0,
-				componentIndex: 0,
-				isStacked: false,
-				explicit: series[metric].color
-			})
-		}));
-		const seen = /* @__PURE__ */ new Map();
-		for (const group of groups) for (const bar of group.bars) bar.components.forEach((component, componentIndex) => {
-			if (!seen.has(component.key)) seen.set(component.key, {
-				label: component.label,
-				index: componentIndex,
-				explicit: component.color
-			});
-		});
-		return [...seen.entries()].map(([key, { label, index, explicit }]) => ({
-			key,
-			label,
-			color: resolveColor({
-				metric: metricKeys[0],
-				barIndex: 0,
-				componentIndex: index,
-				isStacked: true,
-				explicit
-			})
-		}));
-	}, [
+	const legendItems = useMemo(() => getBarLegendItems({
 		isStacked,
-		metricKeys,
 		series,
 		groups,
-		resolveColor
+		colors
+	}), [
+		isStacked,
+		series,
+		groups,
+		colors
 	]);
 	const legendKeys = useMemo(() => legendItems.map((item) => item.key), [legendItems]);
 	const interaction = useChartInteraction({
 		categoryCount: geometry.bands.length,
 		seriesKeys: legendKeys,
 		disabled: noTooltip || isLoading || isEmpty,
+		isLoading,
 		onPinnedChange
 	});
-	const tooltipModel = useMemo(() => {
-		if (noTooltip || interaction.activeIndex === null) return null;
-		const band = geometry.bands[interaction.activeIndex];
-		const group = groups[interaction.activeIndex];
+	const buildCategoryTooltip = useCallback((index) => {
+		const band = geometry.bands[index];
+		const group = groups[index];
 		if (!band || !group) return null;
-		const rows = geometry.rects.filter((rect) => rect.groupIndex === interaction.activeIndex).map((rect) => ({
+		const rows = geometry.rects.filter((rect) => rect.groupIndex === index).map((rect) => ({
 			key: rect.id,
 			label: rect.label,
-			group: series[rect.metric]?.label,
 			value: rect.value,
 			formattedValue: formatValue(rect.value),
 			color: rect.color
@@ -161,23 +126,30 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 			anchorY: band.anchorY
 		};
 	}, [
-		noTooltip,
-		interaction.activeIndex,
 		geometry,
 		groups,
-		series,
 		formatValue,
 		formatLabel
 	]);
 	const categoryPositions = useMemo(() => geometry.bands.map((band) => band.x), [geometry.bands]);
 	const categoryStep = geometry.bands[0]?.width ?? 0;
-	return /* @__PURE__ */ jsxs(ChartFrame, {
+	const categoryTargets = useMemo(() => geometry.bands.map((band) => ({
+		key: String(band.groupIndex),
+		shape: ChartTargetShape.RECT,
+		x: band.x,
+		y: band.y,
+		width: band.width,
+		height: band.height
+	})), [geometry.bands]);
+	return /* @__PURE__ */ jsx(ChartFrame, {
 		containerRef,
 		dimensions,
 		fillWidth,
 		fillHeight,
 		interaction,
-		ariaLabel: ariaLabel ?? `Bar chart with ${groups.length} categories and ${metricKeys.length} series`,
+		kind: ChartKind.BAR,
+		categoryCount: groups.length,
+		ariaLabel,
 		ariaDescription,
 		axes: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ChartValueAxis, {
 			ticks: valueTicks,
@@ -199,31 +171,23 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 			title: categoryAxisTitle
 		})] }),
 		noTooltip,
-		tooltipModel,
+		buildCategoryTooltip,
 		tooltipRenderer,
+		categoryTargets,
 		anchorHalfWidth: categoryStep / 2,
 		isEmpty,
 		isLoading,
 		contentWhenEmpty,
 		showLegend,
 		legendItems,
-		children: [geometry.rects.map((rect) => /* @__PURE__ */ jsx(ChartBarPath, {
+		children: geometry.rects.map((rect) => /* @__PURE__ */ jsx(ChartBarPath, {
 			d: roundedRectPath(rect.x, rect.y, rect.width, rect.height, rect.radius, rect.corners),
 			fill: rect.color,
-			"data-state": isLoading ? ChartMarkState.MUTED : interaction.getMarkState({
+			"data-state": interaction.getMarkState({
 				categoryIndex: rect.groupIndex,
 				seriesKey: isStacked ? rect.componentKey : rect.metric
 			})
-		}, rect.id)), !noTooltip && !isLoading && geometry.bands.map((band) => /* @__PURE__ */ jsx(ChartHitTarget, {
-			x: band.x,
-			y: band.y,
-			width: band.width,
-			height: band.height,
-			"data-interactive": "true",
-			onMouseEnter: () => interaction.onCategoryEnter(band.groupIndex),
-			onMouseLeave: interaction.onCategoryLeave,
-			onClick: () => interaction.onCategoryClick(band.groupIndex)
-		}, band.groupIndex))]
+		}, rect.id))
 	});
 };
 //#endregion

package/dist/charts/ChartCategoryTargets.d.ts

@@ -0,0 +1,27 @@
+import type { ChartCategoryTarget } from "./types";
+import type { ChartInteraction } from "./useChartInteraction";
+/**
+ * The interactive layer: one focusable target per category, above the marks.
+ *
+ * Shared by all three charts so pointer and keyboard behave identically. Before
+ * this existed each chart spelled hit testing its own way — two rendered targets
+ * conditionally, the pie attached handlers permanently and computed
+ * `data-interactive` instead — and none of them was reachable by keyboard at
+ * all.
+ *
+ * **Focus rides the existing hover channel.** `onFocus` calls
+ * `onCategoryEnter` and `onBlur` calls `onCategoryLeave`, so the tooltip, the
+ * cursor line, the legend dimming and every `getMarkState` light up for a
+ * keyboard reader exactly as they do for a pointer — without
+ * `useChartInteraction` growing a third state axis to keep in sync.
+ */
+interface ChartCategoryTargetsProps {
+    targets: ChartCategoryTarget[];
+    interaction: ChartInteraction;
+    /** Accessible name for one category. Derived from the tooltip, so they agree. */
+    getAriaLabel: (index: number) => string;
+    /** Arrow keys wrap at the ends. True for radial charts — a circle has no ends. */
+    wrap?: boolean;
+}
+declare const ChartCategoryTargets: ({ targets, interaction, getAriaLabel, wrap, }: ChartCategoryTargetsProps) => import("react").JSX.Element;
+export default ChartCategoryTargets;

package/dist/charts/ChartCategoryTargets.js

@@ -0,0 +1,75 @@
+import { ChartTargetShape } from "./types.js";
+import { clamp } from "./chartScales.js";
+import { ChartCategoryTargetLayer, ChartHitTarget, ChartHitTargetPath } from "./ChartPrimitives.js";
+import { match } from "ts-pattern";
+import { useCallback, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/charts/ChartCategoryTargets.tsx
+var ChartCategoryTargets = ({ targets, interaction, getAriaLabel, wrap = false }) => {
+	const [focusIndex, setFocusIndex] = useState(0);
+	const nodeRefs = useRef([]);
+	/**
+	* Roving tabindex, preferring whatever is pinned.
+	*
+	* Tabbing away and back returns to the category the reader was holding rather
+	* than to the start, which is the difference between the pin being a place
+	* you are and a thing that merely happened.
+	*/
+	const rovingIndex = clamp(interaction.pinnedIndex ?? focusIndex, 0, targets.length - 1);
+	const moveTo = useCallback((next) => {
+		const last = targets.length - 1;
+		const bounded = wrap ? (next % targets.length + targets.length) % targets.length : clamp(next, 0, last);
+		setFocusIndex(bounded);
+		nodeRefs.current[bounded]?.focus();
+	}, [targets.length, wrap]);
+	const onKeyDown = useCallback((event, index) => {
+		if (match(event.key).with("ArrowRight", "ArrowDown", () => moveTo(index + 1)).with("ArrowLeft", "ArrowUp", () => moveTo(index - 1)).with("Home", () => moveTo(0)).with("End", () => moveTo(targets.length - 1)).with("Enter", " ", () => interaction.onCategoryClick(index)).with("Escape", () => interaction.onBackdropClick()).otherwise(() => void 0) !== void 0 || [
+			"ArrowRight",
+			"ArrowDown",
+			"ArrowLeft",
+			"ArrowUp",
+			"Home",
+			"End",
+			"Enter",
+			" ",
+			"Escape"
+		].includes(event.key)) event.preventDefault();
+	}, [
+		moveTo,
+		interaction,
+		targets.length
+	]);
+	return /* @__PURE__ */ jsx(ChartCategoryTargetLayer, { children: targets.map((target, index) => {
+		const shared = {
+			tabIndex: index === rovingIndex ? 0 : -1,
+			role: "button",
+			"aria-label": getAriaLabel(index),
+			"aria-pressed": interaction.pinnedIndex === index,
+			"data-interactive": "true",
+			onFocus: () => interaction.onCategoryEnter(index),
+			onBlur: () => interaction.onCategoryLeave(),
+			onMouseEnter: () => interaction.onCategoryEnter(index),
+			onMouseLeave: () => interaction.onCategoryLeave(),
+			onClick: () => interaction.onCategoryClick(index),
+			onKeyDown: (event) => onKeyDown(event, index)
+		};
+		return match(target).with({ shape: ChartTargetShape.RECT }, (rect) => /* @__PURE__ */ jsx(ChartHitTarget, {
+			ref: (node) => {
+				nodeRefs.current[index] = node;
+			},
+			x: rect.x,
+			y: rect.y,
+			width: rect.width,
+			height: rect.height,
+			...shared
+		}, rect.key)).with({ shape: ChartTargetShape.PATH }, (path) => /* @__PURE__ */ jsx(ChartHitTargetPath, {
+			ref: (node) => {
+				nodeRefs.current[index] = node;
+			},
+			d: path.d,
+			...shared
+		}, path.key)).exhaustive();
+	}) });
+};
+//#endregion
+export { ChartCategoryTargets as default };

package/dist/charts/ChartFrame.d.ts

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
-import type { ChartLegendItem, ChartPlotTooltipModel, ChartTooltipRenderer } from "./types";
+import { ChartKind } from "./types";
+import type { ChartCategoryTarget, ChartLegendItem, ChartPlotTooltipModel, ChartTooltipRenderer } from "./types";
 import type { ChartDimensions } from "./useChartDimensions";
 import type { ChartInteraction } from "./useChartInteraction";
 import type { ChartTooltipVerticalAlign } from "./useChartTooltipPosition";
@@ -40,8 +41,13 @@ export interface ChartFrameProps {
     fillWidth?: boolean;
     fillHeight?: boolean;
     interaction: ChartInteraction;
-    /** Already resolved — pass `ariaLabel ?? <chart-specific default>`. */
-    ariaLabel: string;
+    /** Which chart this is. Only used to phrase the default accessible name. */
+    kind: ChartKind;
+    /** Categories on the axis, or slices for a pie. Names the plot, so it counts
+     * what is *rendered* rather than what was supplied. */
+    categoryCount: number;
+    /** Overrides the name derived from {@link kind} and the counts. */
+    ariaLabel?: string;
     /** Long description, associated with the SVG via `aria-describedby`. */
     ariaDescription?: string;
     /**
@@ -61,9 +67,31 @@ export interface ChartFrameProps {
     /** HTML painted over the plot and under the tooltip — the donut centre. */
     plotOverlay?: ReactNode;
     noTooltip?: boolean;
-    /** Anchor in plot coordinates; the frame applies the margin translate. */
-    tooltipModel: ChartPlotTooltipModel | null;
+    /**
+     * Builds one category's tooltip, in plot coordinates.
+     *
+     * Taken as a function rather than a finished model because the frame needs it
+     * twice: once for the category under the pointer, and once per category to
+     * name it for a screen reader. Deriving both from the same builder is what
+     * makes the accessible name incapable of disagreeing with the tooltip.
+     *
+     * Must be stable; memoize it at the call site.
+     */
+    buildCategoryTooltip: (index: number) => ChartPlotTooltipModel | null;
     tooltipRenderer?: ChartTooltipRenderer;
+    /**
+     * One target per category, in plot coordinates and in category order.
+     *
+     * Empty disables interaction entirely, which is what a chart with nothing to
+     * plot passes.
+     */
+    categoryTargets?: ChartCategoryTarget[];
+    /** Applied to the target layer. Radial charts pass their centre translate. */
+    categoryTargetsTransform?: string;
+    /** Arrow keys wrap at the ends. True for radial charts. */
+    wrapCategoryNavigation?: boolean;
+    /** Overrides the accessible name of a category, which defaults to its tooltip. */
+    describeCategory?: (index: number) => string;
     /** Half a category's width, so the tooltip sits beside the marks. */
     anchorHalfWidth?: number;
     /** Radial charts pass their centre, in plot coordinates. */
@@ -78,5 +106,5 @@ export interface ChartFrameProps {
     /** Defaults to the left margin, aligning the legend with the plot, not the gutter. */
     legendInset?: number;
 }
-declare const ChartFrame: ({ containerRef, dimensions, fillWidth, fillHeight, interaction, ariaLabel, ariaDescription, axes, children, plotOverlay, noTooltip, tooltipModel, tooltipRenderer, anchorHalfWidth, placeAwayFromX, verticalAlign, isEmpty, isLoading, contentWhenEmpty, showLegend, legendItems, legendInset, }: ChartFrameProps) => import("react").JSX.Element;
+declare const ChartFrame: ({ containerRef, dimensions, fillWidth, fillHeight, interaction, kind, categoryCount, ariaLabel, ariaDescription, axes, children, plotOverlay, noTooltip, buildCategoryTooltip, tooltipRenderer, categoryTargets, categoryTargetsTransform, wrapCategoryNavigation, describeCategory, anchorHalfWidth, placeAwayFromX, verticalAlign, isEmpty, isLoading, contentWhenEmpty, showLegend, legendItems, legendInset, }: ChartFrameProps) => import("react").JSX.Element;
 export default ChartFrame;

package/dist/charts/ChartFrame.js

@@ -1,15 +1,34 @@
+import { ChartKind } from "./types.js";
+import { describeTooltipModel } from "./chartFormat.js";
 import { ChartBackdrop, ChartPlotBox, ChartPlotGroup, ChartRoot, ChartSvg } from "./ChartPrimitives.js";
+import ChartCategoryTargets from "./ChartCategoryTargets.js";
 import ChartEmptyState from "./ChartEmptyState.js";
 import ChartLegend from "./ChartLegend.js";
-import ChartHoverTooltip from "./ChartTooltip.js";
-import { useId, useMemo } from "react";
+import ChartTooltip from "./ChartTooltip.js";
+import { match } from "ts-pattern";
+import { useCallback, useId, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/charts/ChartFrame.tsx
-var ChartFrame = ({ containerRef, dimensions, fillWidth, fillHeight, interaction, ariaLabel, ariaDescription, axes, children, plotOverlay, noTooltip = false, tooltipModel, tooltipRenderer, anchorHalfWidth, placeAwayFromX, verticalAlign, isEmpty, isLoading = false, contentWhenEmpty, showLegend = false, legendItems, legendInset }) => {
+var ChartFrame = ({ containerRef, dimensions, fillWidth, fillHeight, interaction, kind, categoryCount, ariaLabel, ariaDescription, axes, children, plotOverlay, noTooltip = false, buildCategoryTooltip, tooltipRenderer, categoryTargets, categoryTargetsTransform, wrapCategoryNavigation, describeCategory, anchorHalfWidth, placeAwayFromX, verticalAlign, isEmpty, isLoading = false, contentWhenEmpty, showLegend = false, legendItems, legendInset }) => {
 	const { width, height, plotWidth, plotHeight, margin, isMeasured, reservedHeight, reservedAspectRatio } = dimensions;
 	const generatedId = useId();
 	const descriptionId = ariaDescription ? `${generatedId}-desc` : void 0;
 	/**
+	* Default accessible name, phrased here so the three charts cannot drift.
+	*
+	* Both counts describe what is *on screen*: `legendItems` rather than the
+	* `series` record, because a stacked bar's legend names its components, not
+	* its metrics — counting the record would announce "1 series" for a chart
+	* showing three. The two charts previously counted different things for the
+	* same situation, which is the drift this removes.
+	*/
+	const resolvedAriaLabel = ariaLabel ?? match(kind).with(ChartKind.PIE, () => `Pie chart with ${categoryCount} slices`).with(ChartKind.BAR, () => `Bar chart with ${categoryCount} categories and ${legendItems.length} series`).with(ChartKind.LINE, () => `Line chart with ${categoryCount} categories and ${legendItems.length} series`).exhaustive();
+	const tooltipModel = useMemo(() => noTooltip || interaction.activeIndex === null ? null : buildCategoryTooltip(interaction.activeIndex), [
+		noTooltip,
+		buildCategoryTooltip,
+		interaction.activeIndex
+	]);
+	/**
 	* Plot space → container space, applied once, here.
 	*
 	* Memoized for correctness, not arithmetic cost. `ChartTooltip` retains the
@@ -28,6 +47,29 @@ var ChartFrame = ({ containerRef, dimensions, fillWidth, fillHeight, interaction
 		margin.left,
 		margin.top
 	]);
+	/**
+	* Name each category from its own tooltip, unless the chart says otherwise.
+	*
+	* Same builder as the visible tooltip, so the two cannot describe the chart
+	* differently.
+	*/
+	const nameCategory = useCallback((index) => {
+		if (describeCategory) return describeCategory(index);
+		const model = buildCategoryTooltip(index);
+		return model ? describeTooltipModel(model) : "";
+	}, [describeCategory, buildCategoryTooltip]);
+	/**
+	* Whether the marks are reachable at all.
+	*
+	* Drives the SVG's role, which is the real cost of keyboard access:
+	* `role="img"` prunes the whole subtree from the accessibility tree, so
+	* nothing inside it can ever be focused *and* announced. A chart with live
+	* targets therefore has to be a `group` — and everything that is not a target
+	* has to be explicitly hidden, since under `group` it would otherwise become
+	* traversable. When there is nothing to reach, `img` stays: it announces one
+	* summary rather than an empty group.
+	*/
+	const hasFocusableTargets = isMeasured && !noTooltip && !isLoading && !isEmpty && (categoryTargets?.length ?? 0) > 0;
 	return /* @__PURE__ */ jsxs(ChartRoot, {
 		$fillWidth: fillWidth,
 		$fillHeight: fillHeight,
@@ -40,27 +82,42 @@ var ChartFrame = ({ containerRef, dimensions, fillWidth, fillHeight, interaction
 				isMeasured && /* @__PURE__ */ jsxs(ChartSvg, {
 					width,
 					height,
-					role: "img",
-					"aria-label": ariaLabel,
+					role: hasFocusableTargets ? "group" : "img",
+					"aria-label": resolvedAriaLabel,
 					"aria-describedby": descriptionId,
 					children: [ariaDescription && /* @__PURE__ */ jsx("desc", {
 						id: descriptionId,
 						children: ariaDescription
 					}), /* @__PURE__ */ jsxs("g", {
 						transform: `translate(${margin.left}, ${margin.top})`,
-						children: [axes, /* @__PURE__ */ jsxs(ChartPlotGroup, {
-							"data-active": interaction.isEngaged ? "true" : "false",
-							children: [/* @__PURE__ */ jsx(ChartBackdrop, {
-								width: plotWidth,
-								height: plotHeight,
-								"data-interactive": interaction.pinnedIndex !== null ? "true" : "false",
-								onClick: interaction.onBackdropClick
-							}), children]
-						})]
+						children: [
+							axes,
+							/* @__PURE__ */ jsx("g", {
+								"aria-hidden": "true",
+								children: /* @__PURE__ */ jsxs(ChartPlotGroup, {
+									"data-active": interaction.isEngaged ? "true" : "false",
+									children: [/* @__PURE__ */ jsx(ChartBackdrop, {
+										width: plotWidth,
+										height: plotHeight,
+										"data-interactive": interaction.pinnedIndex !== null ? "true" : "false",
+										onClick: interaction.onBackdropClick
+									}), children]
+								})
+							}),
+							hasFocusableTargets && categoryTargets && /* @__PURE__ */ jsx("g", {
+								transform: categoryTargetsTransform,
+								children: /* @__PURE__ */ jsx(ChartCategoryTargets, {
+									targets: categoryTargets,
+									interaction,
+									getAriaLabel: nameCategory,
+									wrap: wrapCategoryNavigation
+								})
+							})
+						]
 					})]
 				}),
 				isMeasured && plotOverlay,
-				isMeasured && !noTooltip && /* @__PURE__ */ jsx(ChartHoverTooltip, {
+				isMeasured && !noTooltip && /* @__PURE__ */ jsx(ChartTooltip, {
 					model: positionedTooltip,
 					containerWidth: width,
 					containerHeight: height,

package/dist/charts/ChartPrimitives.d.ts

@@ -45,6 +45,32 @@ export declare const ChartLinePath: import("@linaria/react").StyledComponent<imp
 export declare const ChartAreaPath: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGPathElement> & Record<never, unknown>>;
 export declare const ChartPointCircle: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGCircleElement> & Record<never, unknown>>;
 export declare const ChartArcPath: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGPathElement> & Record<never, unknown>>;
+/**
+ * Wrapper for the category target layer.
+ *
+ * Exists to carry the focus-ring colour: the targets themselves are plain
+ * `styled.x` because they receive refs (see the module note above), so they
+ * cannot read the theme directly. Setting `color` here lets them use
+ * `currentColor` and still take the token rather than inheriting whatever the
+ * consumer's page happens to set.
+ */
+export declare const ChartCategoryTargetLayer: import("react").ComponentType<Pick<import("react").SVGProps<SVGGElement> & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}, "as" | keyof import("react").SVGProps<SVGGElement>> & {
+    theme?: import("@callstack/react-theme-provider").$DeepPartial<import("../theme").Theme> | undefined;
+}> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<import("react").ComponentType<import("react").SVGProps<SVGGElement> & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}> & {
+    __wyw_meta: unknown;
+} & import("react").FunctionComponent<import("react").SVGProps<SVGGElement> & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}>, {}>;
 /**
  * Per-category hit target, rendered above the marks.
  *
@@ -54,6 +80,15 @@ export declare const ChartArcPath: import("@linaria/react").StyledComponent<impo
  * still instead of chasing each segment.
  */
 export declare const ChartHitTarget: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGRectElement> & Record<never, unknown>>;
+/**
+ * The radial equivalent, reusing the arc's own `d`.
+ *
+ * A pie has no category axis to band, so its targets are the arc shapes
+ * themselves — drawn again, transparent, above the marks. That keeps hit
+ * testing and focus identical across all three charts instead of the pie
+ * hit-testing its visible arcs directly.
+ */
+export declare const ChartHitTargetPath: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGPathElement> & Record<never, unknown>>;
 /** Full-plot backdrop; clicking it clears a pinned category. */
 export declare const ChartBackdrop: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGRectElement> & Record<never, unknown>>;
 /**