@galaxy-io/dls 1.3.0 → 1.3.1

package/dist/charts/ChartPrimitives.js

@@ -123,6 +123,30 @@ var ChartArcPath = /*#__PURE__*/ styled("path")({
 	propsAsIs: true
 });
 /**
+* 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.
+*/
+var _exp11 = () => ({ theme }) => theme.color.border.selected;
+var ChartCategoryTargetLayer = withTheme(/*#__PURE__*/ styled("g")({
+	name: "ChartCategoryTargetLayer",
+	class: "c1wvzvu4",
+	propsAsIs: true,
+	vars: { "c1wvzvu4-0": [_exp11()] }
+}));
+/**
+* Shared by both target shapes.
+*
+* The ring is a `stroke`, not an `outline`: `outline` on SVG elements is a late
+* arrival in WebKit and `outline-offset` behaves inconsistently across engines,
+* while a stroke on a transparent shape is universally supported — and it
+* traces a pie arc, which a rectangular outline could not.
+*/
+/**
 * Per-category hit target, rendered above the marks.
 *
 * Hit testing the full column rather than the bars themselves means a two-pixel
@@ -132,13 +156,26 @@ var ChartArcPath = /*#__PURE__*/ styled("path")({
 */
 var ChartHitTarget = /*#__PURE__*/ styled("rect")({
 	name: "ChartHitTarget",
-	class: "c1wvzvu4",
+	class: "c17guewt",
+	propsAsIs: true
+});
+/**
+* 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.
+*/
+var ChartHitTargetPath = /*#__PURE__*/ styled("path")({
+	name: "ChartHitTargetPath",
+	class: "cblgiyf",
 	propsAsIs: true
 });
 /** Full-plot backdrop; clicking it clears a pinned category. */
 var ChartBackdrop = /*#__PURE__*/ styled("rect")({
 	name: "ChartBackdrop",
-	class: "c17guewt",
+	class: "c1lr03cc",
 	propsAsIs: true
 });
 /**
@@ -146,24 +183,24 @@ var ChartBackdrop = /*#__PURE__*/ styled("rect")({
 * zero — the line under the bars is what makes them read as resting on a
 * baseline.
 */
-var _exp11 = () => ({ theme }) => theme.color.border.primary;
+var _exp14 = () => ({ theme }) => theme.color.border.primary;
 var ChartGridLine = withTheme(/*#__PURE__*/ styled("line")({
 	name: "ChartGridLine",
-	class: "cblgiyf",
+	class: "cizy1s8",
 	propsAsIs: true,
-	vars: { "cblgiyf-0": [_exp11()] }
+	vars: { "cizy1s8-0": [_exp14()] }
 }));
 /** Vertical rule marking the hovered category on a line chart. */
-var _exp12 = () => ({ theme }) => theme.color.border.secondary;
+var _exp15 = () => ({ theme }) => theme.color.border.secondary;
 var ChartCursorLine = withTheme(/*#__PURE__*/ styled("line")({
 	name: "ChartCursorLine",
-	class: "c1lr03cc",
+	class: "c1ukq11d",
 	propsAsIs: true,
-	vars: { "c1lr03cc-0": [_exp12()] }
+	vars: { "c1ukq11d-0": [_exp15()] }
 }));
 var ChartAxisLabelBox = /*#__PURE__*/ styled("foreignObject")({
 	name: "ChartAxisLabelBox",
-	class: "cizy1s8",
+	class: "cwcko2m",
 	propsAsIs: true
 });
 /**
@@ -173,21 +210,21 @@ var ChartAxisLabelBox = /*#__PURE__*/ styled("foreignObject")({
 * than teleporting, and it stays mounted while hidden so the fade can actually
 * run — unmounting on hide is why a fade-out never appears.
 */
-var _exp13 = () => ({ $x }) => `${$x}px`;
-var _exp14 = () => ({ $y }) => `${$y}px`;
-var _exp17 = () => ({ theme }) => theme.color.border.primary;
-var _exp18 = () => ({ theme }) => theme.color.background.primary;
-var _exp19 = () => ({ $isVisible }) => $isVisible ? 1 : 0;
+var _exp16 = () => ({ $x }) => `${$x}px`;
+var _exp17 = () => ({ $y }) => `${$y}px`;
+var _exp20 = () => ({ theme }) => theme.color.border.primary;
+var _exp21 = () => ({ theme }) => theme.color.background.primary;
+var _exp22 = () => ({ $isVisible }) => $isVisible ? 1 : 0;
 var ChartTooltipPositioner = withTheme(/*#__PURE__*/ styled("div")({
 	name: "ChartTooltipPositioner",
-	class: "c1ukq11d",
+	class: "cqwhvyz",
 	propsAsIs: false,
 	vars: {
-		"c1ukq11d-0": [_exp13()],
-		"c1ukq11d-1": [_exp14()],
-		"c1ukq11d-2": [_exp17()],
-		"c1ukq11d-3": [_exp18()],
-		"c1ukq11d-4": [_exp19()]
+		"cqwhvyz-0": [_exp16()],
+		"cqwhvyz-1": [_exp17()],
+		"cqwhvyz-2": [_exp20()],
+		"cqwhvyz-3": [_exp21()],
+		"cqwhvyz-4": [_exp22()]
 	}
 }));
 /**
@@ -198,32 +235,32 @@ var ChartTooltipPositioner = withTheme(/*#__PURE__*/ styled("div")({
 * of the DLS. `pointer-events: none` keeps it from stealing hover from the arc
 * behind it.
 */
-var _exp23 = () => ({ $centerX }) => `${$centerX}px`;
-var _exp24 = () => ({ $centerY }) => `${$centerY}px`;
-var _exp26 = () => ({ $diameter }) => `${$diameter}px`;
+var _exp26 = () => ({ $centerX }) => `${$centerX}px`;
+var _exp27 = () => ({ $centerY }) => `${$centerY}px`;
+var _exp29 = () => ({ $diameter }) => `${$diameter}px`;
 var ChartCenterBox = /*#__PURE__*/ styled("div")({
 	name: "ChartCenterBox",
-	class: "cwcko2m",
+	class: "c1iaray",
 	propsAsIs: false,
 	vars: {
-		"cwcko2m-0": [_exp23()],
-		"cwcko2m-1": [_exp24()],
-		"cwcko2m-2": [_exp26()]
+		"c1iaray-0": [_exp26()],
+		"c1iaray-1": [_exp27()],
+		"c1iaray-2": [_exp29()]
 	}
 });
 /**
 * Sits slightly above centre, over where the bars would be, so the axes stay
 * legible underneath.
 */
-var _exp27 = () => ({ theme }) => theme.color.border.primary;
-var _exp28 = () => ({ theme }) => theme.color.background.tertiary;
+var _exp30 = () => ({ theme }) => theme.color.border.primary;
+var _exp31 = () => ({ theme }) => theme.color.background.tertiary;
 var ChartEmptyOverlay = withTheme(/*#__PURE__*/ styled("div")({
 	name: "ChartEmptyOverlay",
-	class: "cqwhvyz",
+	class: "cz6jod1",
 	propsAsIs: false,
 	vars: {
-		"cqwhvyz-0": [_exp27()],
-		"cqwhvyz-1": [_exp28()]
+		"cz6jod1-0": [_exp30()],
+		"cz6jod1-1": [_exp31()]
 	}
 }));
 /**
@@ -235,12 +272,12 @@ var ChartEmptyOverlay = withTheme(/*#__PURE__*/ styled("div")({
 * the marks dim instantly while their legend entries sit through the full
 * {@link CHART_RESTORE_DELAY_MS}, and the two visibly fall out of step.
 */
-var _exp29 = () => ({ $inset }) => `${$inset}px`;
+var _exp32 = () => ({ $inset }) => `${$inset}px`;
 var ChartLegendRow = /*#__PURE__*/ styled("div")({
 	name: "ChartLegendRow",
-	class: "c1iaray",
+	class: "c1de5mqk",
 	propsAsIs: false,
-	vars: { "c1iaray-0": [_exp29()] }
+	vars: { "c1de5mqk-0": [_exp32()] }
 });
 /**
 * One legend entry, when the legend is interactive.
@@ -255,14 +292,14 @@ var ChartLegendRow = /*#__PURE__*/ styled("div")({
 */
 var ChartLegendItemButton = /*#__PURE__*/ styled("button")({
 	name: "ChartLegendItemButton",
-	class: "cz6jod1",
+	class: "cjirv6a",
 	propsAsIs: false
 });
 /** The same row, when the legend is inert — no button semantics to announce. */
 var ChartLegendItemStatic = /*#__PURE__*/ styled("div")({
 	name: "ChartLegendItemStatic",
-	class: "c1de5mqk",
+	class: "c1armna5",
 	propsAsIs: false
 });
 //#endregion
-export { ChartArcPath, ChartAreaPath, ChartAxisLabelBox, ChartBackdrop, ChartBarPath, ChartCenterBox, ChartCursorLine, ChartEmptyOverlay, ChartGridLine, ChartHitTarget, ChartLegendItemButton, ChartLegendItemStatic, ChartLegendRow, ChartLinePath, ChartPlotBox, ChartPlotGroup, ChartPointCircle, ChartRoot, ChartSvg, ChartTooltipPositioner };
+export { ChartArcPath, ChartAreaPath, ChartAxisLabelBox, ChartBackdrop, ChartBarPath, ChartCategoryTargetLayer, ChartCenterBox, ChartCursorLine, ChartEmptyOverlay, ChartGridLine, ChartHitTarget, ChartHitTargetPath, ChartLegendItemButton, ChartLegendItemStatic, ChartLegendRow, ChartLinePath, ChartPlotBox, ChartPlotGroup, ChartPointCircle, ChartRoot, ChartSvg, ChartTooltipPositioner };

package/dist/charts/ChartTooltip.d.ts

@@ -7,7 +7,7 @@ import { ChartTooltipVerticalAlign } from "./useChartTooltipPosition";
  * still gets collision handling — in V1 the custom path received no positioning
  * at all and had to reimplement it.
  */
-interface ChartHoverTooltipProps {
+interface ChartTooltipProps {
     /**
      * The model to display, or `null` when nothing is active.
      *
@@ -24,5 +24,5 @@ interface ChartHoverTooltipProps {
     verticalAlign?: ChartTooltipVerticalAlign;
     renderer?: ChartTooltipRenderer;
 }
-declare const ChartHoverTooltip: ({ model, containerWidth, containerHeight, anchorHalfWidth, placeAwayFromX, verticalAlign, renderer, }: ChartHoverTooltipProps) => import("react").JSX.Element;
-export default ChartHoverTooltip;
+declare const ChartTooltip: ({ model, containerWidth, containerHeight, anchorHalfWidth, placeAwayFromX, verticalAlign, renderer, }: ChartTooltipProps) => import("react").JSX.Element;
+export default ChartTooltip;

package/dist/charts/ChartTooltip.js

@@ -7,7 +7,7 @@ import { ChartTooltipPositioner } from "./ChartPrimitives.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/charts/ChartTooltip.tsx
-var ChartHoverTooltip = ({ model, containerWidth, containerHeight, anchorHalfWidth, placeAwayFromX, verticalAlign, renderer }) => {
+var ChartTooltip = ({ model, containerWidth, containerHeight, anchorHalfWidth, placeAwayFromX, verticalAlign, renderer }) => {
 	const [retained, setRetained] = useState(model);
 	if (model !== null && model !== retained) setRetained(model);
 	const { tooltipRef, x, y, isMeasured } = useChartTooltipPosition({
@@ -69,4 +69,4 @@ var ChartHoverTooltip = ({ model, containerWidth, containerHeight, anchorHalfWid
 	});
 };
 //#endregion
-export { ChartHoverTooltip as default };
+export { ChartTooltip as default };

package/dist/charts/LineChart.js

@@ -1,13 +1,10 @@
-import { useGalaxyTheme } from "../theme/GalaxyTheme.js";
-import { ChartMarkState, LineChartCurve } from "./types.js";
+import { ChartKind, ChartTargetShape, LineChartCurve } from "./types.js";
 import { LINE_AREA_OPACITY, LINE_POINT_RADIUS } from "./constants.js";
-import { addAxisTitleSpace, getValueTicks } from "./chartScales.js";
+import { useSeriesColorResolver } from "./useSeriesColorResolver.js";
 import { useChartInteraction } from "./useChartInteraction.js";
-import { useChartFormatters } from "./useChartFormatters.js";
-import { useChartDimensions } from "./useChartDimensions.js";
-import { buildLineChartGeometry } from "./lineChartGeometry.js";
-import { resolveSeriesColor } from "./chartTheme.js";
-import { ChartAreaPath, ChartCursorLine, ChartHitTarget, ChartLinePath, ChartPointCircle } from "./ChartPrimitives.js";
+import { useCartesianChartLayout } from "./useCartesianChartLayout.js";
+import { buildLineChartGeometry, getLineValueDomain } from "./lineChartGeometry.js";
+import { ChartAreaPath, ChartCursorLine, ChartLinePath, ChartPointCircle } from "./ChartPrimitives.js";
 import ChartFrame from "./ChartFrame.js";
 import { ChartCategoryAxis, ChartValueAxis } from "./ChartAxis.js";
 import { useCallback, useMemo, useRef } from "react";
@@ -22,39 +19,33 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 * nearest-point-to-cursor model needs.
 */
 var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeight, aspectRatio, margin, curve = LineChartCurve.SMOOTH, strokeWidth, showCursor = true, 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({
+	const colors = useSeriesColorResolver(series);
+	const { dimensions, domain, valueTicks, formatValue, formatLabel } = useCartesianChartLayout({
 		containerRef,
+		rawDomain: useMemo(() => getLineValueDomain(lines), [lines]),
+		valueDomain,
 		width,
 		height,
 		fillWidth,
 		fillHeight,
 		aspectRatio,
-		margin: addAxisTitleSpace(margin, {
-			hasValueTitle: Boolean(valueAxisTitle),
-			hasCategoryTitle: Boolean(categoryAxisTitle)
-		})
-	});
-	const { plotWidth, plotHeight } = dimensions;
-	const { formatValue, formatLabel } = useChartFormatters({
-		valueFormatter,
+		margin,
 		valueUnit,
-		labelFormatter
+		valueFormatter,
+		labelFormatter,
+		valueAxisTitle,
+		categoryAxisTitle
 	});
-	const metricKeys = useMemo(() => Object.keys(series), [series]);
-	const resolveColor = useCallback(({ metric }) => resolveSeriesColor(theme, metricKeys.indexOf(metric), series[metric]?.color), [
-		theme,
-		metricKeys,
-		series
-	]);
+	const { plotWidth, plotHeight } = dimensions;
+	const resolveColor = useCallback(({ metric }) => colors.resolve(metric), [colors]);
 	const geometry = useMemo(() => buildLineChartGeometry({
 		lines,
 		categories,
 		plotWidth,
 		plotHeight,
 		curve,
-		valueDomain,
+		domain,
 		strokeWidth,
 		resolveColor
 	}), [
@@ -63,35 +54,29 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 		plotWidth,
 		plotHeight,
 		curve,
-		valueDomain,
+		domain,
 		strokeWidth,
 		resolveColor
 	]);
-	const valueTicks = useMemo(() => getValueTicks(geometry.valueScale, valueDomain), [geometry.valueScale, valueDomain]);
 	const isEmpty = geometry.categories.length === 0 || lines.length === 0;
-	const legendItems = useMemo(() => metricKeys.map((metric, lineIndex) => ({
+	const legendItems = useMemo(() => colors.keys.map((metric) => ({
 		key: metric,
 		label: series[metric].label,
-		color: resolveColor({
-			metric,
-			lineIndex
-		})
-	})), [
-		metricKeys,
-		series,
-		resolveColor
-	]);
+		color: colors.resolve(metric)
+	})), [colors, series]);
 	const legendKeys = useMemo(() => legendItems.map((item) => item.key), [legendItems]);
 	const interaction = useChartInteraction({
 		categoryCount: geometry.columns.length,
 		seriesKeys: legendKeys,
 		disabled: noTooltip || isLoading || isEmpty,
+		isLoading,
 		onPinnedChange
 	});
 	const activeColumn = interaction.activeIndex === null ? null : geometry.columns[interaction.activeIndex];
-	const tooltipModel = useMemo(() => {
-		if (noTooltip || !activeColumn) return null;
-		const rows = [...activeColumn.points].sort((a, b) => b.value - a.value).map((point) => ({
+	const buildCategoryTooltip = useCallback((index) => {
+		const column = geometry.columns[index];
+		if (!column) return null;
+		const rows = [...column.points].sort((a, b) => b.value - a.value).map((point) => ({
 			key: point.id,
 			label: series[point.metric]?.label ?? point.metric,
 			value: point.value,
@@ -99,26 +84,35 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 			color: point.color
 		}));
 		return {
-			label: formatLabel(activeColumn.label),
+			label: formatLabel(column.label),
 			rows,
-			anchorX: activeColumn.x,
-			anchorY: activeColumn.anchorY
+			anchorX: column.x,
+			anchorY: column.anchorY
 		};
 	}, [
-		noTooltip,
-		activeColumn,
+		geometry.columns,
 		series,
 		formatValue,
 		formatLabel
 	]);
 	const categoryPositions = useMemo(() => geometry.columns.map((column) => column.x - geometry.step / 2), [geometry.columns, geometry.step]);
+	const categoryTargets = useMemo(() => geometry.columns.map((column) => ({
+		key: String(column.categoryIndex),
+		shape: ChartTargetShape.RECT,
+		x: column.bandX,
+		y: 0,
+		width: column.bandWidth,
+		height: plotHeight
+	})), [geometry.columns, plotHeight]);
 	return /* @__PURE__ */ jsxs(ChartFrame, {
 		containerRef,
 		dimensions,
 		fillWidth,
 		fillHeight,
 		interaction,
-		ariaLabel: ariaLabel ?? `Line chart with ${geometry.categories.length} categories and ${lines.length} series`,
+		kind: ChartKind.LINE,
+		categoryCount: geometry.categories.length,
+		ariaLabel,
 		ariaDescription,
 		axes: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ChartValueAxis, {
 			ticks: valueTicks,
@@ -140,8 +134,9 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 			title: categoryAxisTitle
 		})] }),
 		noTooltip,
-		tooltipModel,
+		buildCategoryTooltip,
 		tooltipRenderer,
+		categoryTargets,
 		anchorHalfWidth: geometry.step / 2,
 		isEmpty,
 		isLoading,
@@ -153,7 +148,7 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 				d: linePath.areaPath,
 				fill: linePath.color,
 				fillOpacity: LINE_AREA_OPACITY,
-				"data-state": isLoading ? ChartMarkState.MUTED : interaction.getMarkState({ seriesKey: linePath.metric })
+				"data-state": interaction.getMarkState({ seriesKey: linePath.metric })
 			}, `${linePath.id}:area`) : null),
 			showCursor && activeColumn && /* @__PURE__ */ jsx(ChartCursorLine, {
 				x1: activeColumn.x,
@@ -166,14 +161,14 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 				stroke: linePath.color,
 				strokeWidth: linePath.strokeWidth,
 				strokeDasharray: linePath.dashArray,
-				"data-state": isLoading ? ChartMarkState.MUTED : interaction.getMarkState({ seriesKey: linePath.metric })
+				"data-state": interaction.getMarkState({ seriesKey: linePath.metric })
 			}, linePath.id)),
 			geometry.isolatedPoints.map((point) => /* @__PURE__ */ jsx(ChartPointCircle, {
 				cx: point.x,
 				cy: point.y,
 				r: LINE_POINT_RADIUS,
 				fill: point.color,
-				"data-state": isLoading ? ChartMarkState.MUTED : interaction.getMarkState({ seriesKey: point.metric })
+				"data-state": interaction.getMarkState({ seriesKey: point.metric })
 			}, `${point.id}:isolated`)),
 			activeColumn?.points.map((point) => /* @__PURE__ */ jsx(ChartPointCircle, {
 				cx: point.x,
@@ -181,17 +176,7 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 				r: LINE_POINT_RADIUS,
 				fill: point.color,
 				"data-state": interaction.getMarkState({ seriesKey: point.metric })
-			}, point.id)),
-			!noTooltip && !isLoading && geometry.columns.map((column) => /* @__PURE__ */ jsx(ChartHitTarget, {
-				x: column.bandX,
-				y: 0,
-				width: column.bandWidth,
-				height: plotHeight,
-				"data-interactive": "true",
-				onMouseEnter: () => interaction.onCategoryEnter(column.categoryIndex),
-				onMouseLeave: interaction.onCategoryLeave,
-				onClick: () => interaction.onCategoryClick(column.categoryIndex)
-			}, column.categoryIndex))
+			}, point.id))
 		]
 	});
 };

package/dist/charts/PieChart.js

@@ -1,13 +1,12 @@
-import { useGalaxyTheme } from "../theme/GalaxyTheme.js";
 import FlexWrapper, { AlignItems, FlexDirection, JustifyContent } from "../containers/FlexWrapper.js";
-import { ChartMarkState } from "./types.js";
+import { ChartKind, ChartTargetShape } from "./types.js";
 import { PIE_CHART_MARGIN, PIE_MIN_SLICE_SHARE } from "./constants.js";
+import { useSeriesColorResolver } from "./useSeriesColorResolver.js";
 import { ChartTooltipVerticalAlign } from "./useChartTooltipPosition.js";
 import { useChartInteraction } from "./useChartInteraction.js";
 import { useChartFormatters } from "./useChartFormatters.js";
 import { useChartDimensions } from "./useChartDimensions.js";
 import { buildPieChartGeometry } from "./pieChartGeometry.js";
-import { resolveChartPaletteColor, resolveSeriesColor } from "./chartTheme.js";
 import { ChartArcPath, ChartCenterBox } from "./ChartPrimitives.js";
 import ChartFrame from "./ChartFrame.js";
 import { useCallback, useMemo, useRef } from "react";
@@ -21,8 +20,8 @@ import { jsx } from "react/jsx-runtime";
 * default, which keeps every remaining arc large enough to actually hit.
 */
 var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRatio, margin, innerRadiusRatio, padAngle, cornerRadius, minSliceShare = PIE_MIN_SLICE_SHARE, aggregatedLabel, centerContent, valueUnit, valueFormatter, labelFormatter, showLegend = true, noTooltip = false, tooltipRenderer, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription, onPinnedChange }) => {
-	const { theme } = useGalaxyTheme();
 	const containerRef = useRef(null);
+	const colors = useSeriesColorResolver(series);
 	const dimensions = useChartDimensions({
 		containerRef,
 		width,
@@ -30,7 +29,8 @@ var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRa
 		fillWidth,
 		fillHeight,
 		aspectRatio,
-		margin: margin ?? PIE_CHART_MARGIN
+		margin,
+		defaultMargin: PIE_CHART_MARGIN
 	});
 	const { plotWidth, plotHeight } = dimensions;
 	const { formatValue, formatLabel } = useChartFormatters({
@@ -38,15 +38,9 @@ var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRa
 		valueUnit,
 		labelFormatter
 	});
-	const sliceKeys = useMemo(() => Object.keys(series), [series]);
 	const getSliceLabel = useCallback((sliceKey) => series[sliceKey]?.label ?? sliceKey, [series]);
 	const getSliceColor = useCallback((sliceKey) => series[sliceKey]?.color, [series]);
-	const resolveColor = useCallback(({ sliceKey, index, explicit }) => {
-		if (explicit) return resolveChartPaletteColor(theme, explicit);
-		if (sliceKey === null) return theme.color.text.tertiary;
-		const slotIndex = sliceKeys.indexOf(sliceKey);
-		return resolveSeriesColor(theme, slotIndex >= 0 ? slotIndex : index);
-	}, [theme, sliceKeys]);
+	const resolveColor = useCallback(({ sliceKey, explicit }) => sliceKey === null ? colors.neutral : colors.resolve(sliceKey, explicit), [colors]);
 	const geometry = useMemo(() => buildPieChartGeometry({
 		slices,
 		plotWidth,
@@ -83,11 +77,11 @@ var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRa
 		categoryCount: geometry.arcs.length,
 		seriesKeys: legendKeys,
 		disabled: noTooltip || isLoading || isEmpty,
+		isLoading,
 		onPinnedChange
 	});
-	const tooltipModel = useMemo(() => {
-		if (noTooltip || interaction.activeIndex === null) return null;
-		const chartArc = geometry.arcs[interaction.activeIndex];
+	const buildCategoryTooltip = useCallback((index) => {
+		const chartArc = geometry.arcs[index];
 		if (!chartArc) return null;
 		return {
 			label: formatLabel(chartArc.label),
@@ -102,12 +96,39 @@ var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRa
 			anchorY: chartArc.anchorY
 		};
 	}, [
-		noTooltip,
-		interaction.activeIndex,
 		geometry.arcs,
 		formatValue,
 		formatLabel
 	]);
+	/**
+	* A slice reads better than the generic "label: row, row" sentence.
+	*
+	* The frame's default would render "Enterprise: 42.1% of total 1,240", which
+	* puts the share where a reader expects the value.
+	*/
+	const describeCategory = useCallback((index) => {
+		const chartArc = geometry.arcs[index];
+		if (!chartArc) return "";
+		const share = `${Math.round(chartArc.share * 1e3) / 10}% of total`;
+		return `${formatLabel(chartArc.label)}, ${formatValue(chartArc.value)}, ${share}`;
+	}, [
+		geometry.arcs,
+		formatValue,
+		formatLabel
+	]);
+	/**
+	* Targets reuse each arc's own `d`, drawn again transparent above the marks.
+	*
+	* The arcs themselves stop being interactive: hit testing, focus and the
+	* focus ring then work identically on all three charts, instead of the pie
+	* attaching handlers permanently and toggling `data-interactive` while the
+	* cartesian charts rendered their targets away.
+	*/
+	const categoryTargets = useMemo(() => geometry.arcs.map((chartArc) => ({
+		key: chartArc.id,
+		shape: ChartTargetShape.PATH,
+		d: chartArc.path
+	})), [geometry.arcs]);
 	const showCenter = centerContent && (innerRadiusRatio ?? .62) > 0;
 	return /* @__PURE__ */ jsx(ChartFrame, {
 		containerRef,
@@ -115,11 +136,17 @@ var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRa
 		fillWidth,
 		fillHeight,
 		interaction,
-		ariaLabel: ariaLabel ?? `Pie chart with ${geometry.arcs.length} slices`,
+		kind: ChartKind.PIE,
+		categoryCount: geometry.arcs.length,
+		ariaLabel,
 		ariaDescription,
 		noTooltip,
-		tooltipModel,
+		buildCategoryTooltip,
 		tooltipRenderer,
+		categoryTargets,
+		categoryTargetsTransform: `translate(${geometry.centerX}, ${geometry.centerY})`,
+		wrapCategoryNavigation: true,
+		describeCategory,
 		placeAwayFromX: geometry.centerX,
 		verticalAlign: ChartTooltipVerticalAlign.CENTERED,
 		isEmpty,
@@ -139,15 +166,10 @@ var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRa
 			children: geometry.arcs.map((chartArc, index) => /* @__PURE__ */ jsx(ChartArcPath, {
 				d: chartArc.path,
 				fill: chartArc.color,
-				"data-state": isLoading ? ChartMarkState.MUTED : interaction.getMarkState({
+				"data-state": interaction.getMarkState({
 					categoryIndex: index,
 					seriesKey: chartArc.id
-				}),
-				"data-interactive": noTooltip || isLoading ? "false" : "true",
-				onMouseEnter: () => interaction.onCategoryEnter(index),
-				onMouseLeave: interaction.onCategoryLeave,
-				onClick: () => interaction.onCategoryClick(index),
-				"aria-label": `${chartArc.label}: ${formatValue(chartArc.value)}`
+				})
 			}, chartArc.id))
 		})
 	});