@automattic/charts 4.7.0 → 4.9.0

package/dist/index.js

@@ -4,20 +4,20 @@ import { AnimatedAreaSeries, AnimatedAreaStack, AreaSeries, Axis, BarGroup, BarS
 import { __, _x, sprintf } from "@wordpress/i18n";
 import clsx from "clsx";
 import * as React from "react";
-import { Children, Fragment, createContext, createContext as createContext$1, createElement, forwardRef, forwardRef as forwardRef$1, isValidElement, memo, useCallback, useCallback as useCallback$1, useContext, useContext as useContext$1, useEffect, useEffect as useEffect$1, useId, useImperativeHandle, useLayoutEffect, useMemo, useMemo as useMemo$1, useRef, useRef as useRef$1, useState, useState as useState$1 } from "react";
-import { color, hsl } from "@visx/vendor/d3-color";
+import { Children, Fragment, createContext, createContext as createContext$1, createElement, forwardRef, forwardRef as forwardRef$1, isValidElement, memo, useCallback, useCallback as useCallback$1, useContext, useContext as useContext$1, useEffect, useEffect as useEffect$1, useId, useImperativeHandle, useLayoutEffect, useMemo, useMemo as useMemo$1, useRef, useRef as useRef$1, useState, useState as useState$1, version } from "react";
 import { differenceInHours, differenceInYears, isValid, parse, parseISO } from "date-fns";
 import { tzOffset } from "@date-fns/tz";
 import { Text, getStringWidth } from "@visx/text";
 import deepmerge from "deepmerge";
+import { color, hsl } from "@visx/vendor/d3-color";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { Tooltip, useTooltip } from "@visx/tooltip";
+import { useTooltip } from "@visx/tooltip";
 import { createScale, getTicks, scaleBand, scaleCanBeZeroed, scaleOrdinal, scaleTime } from "@visx/scale";
 import { Group } from "@visx/group";
 import { LegendItem, LegendLabel, LegendOrdinal, LegendShape } from "@visx/legend";
-import { IconButton, Stack, Text as Text$1 } from "@wordpress/ui";
+import { IconButton, Stack, Text as Text$1, VisuallyHidden } from "@wordpress/ui";
 import { ThemeProvider } from "@wordpress/theme";
-import { createPortal } from "react-dom";
+import { createPortal, flushSync } from "react-dom";
 import { LinearGradient } from "@visx/gradient";
 import { curveCatmullRom, curveLinear, curveMonotoneX } from "@visx/curve";
 import { useParentSize } from "@visx/responsive";
@@ -30,7 +30,7 @@ import { __assign } from "tslib";
 import "@babel/runtime/helpers/esm/extends";
 import "@babel/runtime/helpers/extends";
 import { Icon, chevronRight } from "@wordpress/icons";
-import { Pie } from "@visx/shape";
+import { arc, pie } from "@visx/shape";
 //#region \0rolldown/runtime.js
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -834,6 +834,7 @@ const CATALOG_POINTERS = {
 	annotation: "var(--a8c-charts-color-annotation, #1e1e1e)",
 	surface: "var(--a8c-charts-color-surface, #fff)",
 	surfaceSecondary: "var(--a8c-charts-color-surface-secondary, #f4f4f4)",
+	track: "var(--a8c-charts-color-track, #f0f0f0)",
 	trendUp: "var(--a8c-charts-color-trend-up, #008030)",
 	trendDown: "var(--a8c-charts-color-trend-down, #cc1818)",
 	series: SERIES_PALETTE_POINTERS
@@ -1063,6 +1064,15 @@ const rgbLuminance = (rgb) => {
 * @return Ratio from 1 to 21.
 */
 const luminanceContrastRatio = (first, second) => (Math.max(first, second) + .05) / (Math.min(first, second) + .05);
+/**
+* WCAG contrast ratio between two hex colors.
+*
+* @param  first  - First hex color.
+* @param  second - Second hex color.
+* @return Ratio from 1 to 21.
+* @throws {Error} if either hex string is malformed
+*/
+const contrastRatio = (first, second) => luminanceContrastRatio(relativeLuminance(first), relativeLuminance(second));
 /** WCAG 1.4.3 text contrast, which a label drawn on a fill needs from at least one label color. */
 const MIN_LABEL_CONTRAST = 4.5;
 /** Degrees of hue one unit of OKLCH chroma is worth when ranking candidates by hue. */
@@ -1253,6 +1263,14 @@ const buildPaletteGenerator = (normalizedSeeds, background, labelColors) => {
 	};
 };
 //#endregion
+//#region src/providers/chart-context/private/resolve-opaque-hex.ts
+const resolveOpaqueHex = (pointer, resolve) => {
+	const raw = resolve(pointer);
+	if (!raw || color(raw)?.opacity !== 1) return null;
+	const hex = normalizeColorToHex(raw);
+	return isValidHexColor(hex) ? hex : null;
+};
+//#endregion
 //#region src/providers/chart-context/themes.ts
 /**
 * Default theme configuration: the shape and spacing a consumer can override.
@@ -1301,12 +1319,6 @@ const defaultTheme = {
 };
 //#endregion
 //#region src/providers/chart-context/global-charts-provider.tsx
-const resolveOpaqueHex = (pointer, element) => {
-	const raw = resolveCssVariable(pointer, element);
-	if (!raw || color(raw)?.opacity !== 1) return null;
-	const hex = normalizeColorToHex(pointer, element, resolveCssVariable);
-	return isValidHexColor(hex) ? hex : null;
-};
 const PLACEHOLDER_LABEL_COLORS = [LABEL_FALLBACK, LABEL_INVERSE_FALLBACK];
 const GlobalChartsContext = createContext(null);
 const GlobalChartsProvider = ({ children, theme, locale, timeZone }) => {
@@ -1334,8 +1346,9 @@ const GlobalChartsProvider = ({ children, theme, locale, timeZone }) => {
 			const normalizedColor = normalizeColorToHex(color, wrapperRef.current, resolveCssVariable);
 			if (isValidHexColor(normalizedColor)) resolvedColors.push(normalizedColor);
 		}
-		const backgroundHex = resolveOpaqueHex(CATALOG_POINTERS.background, wrapperRef.current) ?? "#ffffff";
-		const labelColors = [CATALOG_POINTERS.label, CATALOG_POINTERS.labelInverse].map((pointer) => resolveOpaqueHex(pointer, wrapperRef.current)).filter((hex) => hex !== null);
+		const resolveAtWrapper = createCssVariableResolver(wrapperRef.current);
+		const backgroundHex = resolveOpaqueHex(CATALOG_POINTERS.background, resolveAtWrapper) ?? "#ffffff";
+		const labelColors = [CATALOG_POINTERS.label, CATALOG_POINTERS.labelInverse].map((pointer) => resolveOpaqueHex(pointer, resolveAtWrapper)).filter((hex) => hex !== null);
 		setColorCache({
 			colors: resolvedColors,
 			background: backgroundHex,
@@ -1671,10 +1684,10 @@ const DEFAULT_MARGIN_BOTTOM = 20;
 */
 const DEFAULT_MARGIN_LEFT = 20;
 /**
-* Bottom margin to use when the X-axis is rendered at the top.
+* Bottom margin when no X-axis sits below the chart, because it is on top or hidden.
 * We only need a small buffer below the chart in that case.
 */
-const DEFAULT_BOTTOM_FOR_TOP_AXIS = 10;
+const DEFAULT_BOTTOM_WITHOUT_X_AXIS = 10;
 /**
 * Fallback font size used when we cannot derive a font size
 * from the theme or axis styles for X-axis tick labels.
@@ -1754,18 +1767,18 @@ const useChartMargin = (height, options, data, theme, horizontal = false) => {
 			if (yAxisOrientation === "right") defaultMargin.right = yMarginValue;
 			else defaultMargin.left = yMarginValue;
 		}
-		const xOrientation = options.axis?.x?.orientation === "top" ? "top" : "bottom";
-		const { fontSize, tickLength, tickLabelStyle } = getXAxisLabelMetrics(theme, xOrientation);
-		const computedXMargin = fontSize + tickLength;
-		if (xOrientation === "top") {
-			defaultMargin.top = Math.max(defaultMargin.top, computedXMargin);
-			defaultMargin.bottom = DEFAULT_BOTTOM_FOR_TOP_AXIS;
-		} else defaultMargin.bottom = Math.max(defaultMargin.bottom, computedXMargin);
 		if (options.axis?.x?.display !== false) {
+			const xOrientation = options.axis?.x?.orientation === "top" ? "top" : "bottom";
+			const { fontSize, tickLength, tickLabelStyle } = getXAxisLabelMetrics(theme, xOrientation);
+			const computedXMargin = fontSize + tickLength;
+			if (xOrientation === "top") {
+				defaultMargin.top = Math.max(defaultMargin.top, computedXMargin);
+				defaultMargin.bottom = DEFAULT_BOTTOM_WITHOUT_X_AXIS;
+			} else defaultMargin.bottom = Math.max(defaultMargin.bottom, computedXMargin);
 			const { first, last } = getEdgeTickWidths(options.axis?.x?.tickValues ?? [], options.axis?.x?.tickFormat, tickLabelStyle);
 			defaultMargin.left = Math.max(defaultMargin.left, Math.ceil(first / 2));
 			defaultMargin.right = Math.max(defaultMargin.right, Math.ceil(last / 2));
-		}
+		} else defaultMargin.bottom = DEFAULT_BOTTOM_WITHOUT_X_AXIS;
 		return defaultMargin;
 	}, [
 		options,
@@ -2477,11 +2490,12 @@ function useChartLegendItems(data, options = {}, legendShape) {
 	]);
 }
 //#endregion
-//#region src/components/tooltip/base-tooltip.module.scss
-var base_tooltip_module_default = {
-	"surface": "a8ccharts--zY0xG-surface",
-	"tooltip": "a8ccharts--zY0xG-tooltip"
-};
+//#region src/components/tooltip/private/label-value-content.tsx
+const LabelValueContent = ({ data }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+	data.label,
+	": ",
+	data.valueDisplay || formatNumber(data.value)
+] });
 //#endregion
 //#region src/components/tooltip/private/tooltip-theme.tsx
 const DEFAULT_SURFACE = "#1e1e1e";
@@ -2507,28 +2521,63 @@ const TooltipTheme = ({ children }) => {
 	});
 };
 //#endregion
+//#region src/components/tooltip/tooltip-box.module.scss
+var tooltip_box_module_default = { "surface": "a8ccharts-ddpU1W-surface" };
+//#endregion
+//#region src/components/tooltip/tooltip-box.tsx
+/**
+* The chart tooltip box: the dark surface every chart tooltip draws. It does not position itself; place it with `style` or a wrapper.
+*
+* @param props          - Div attributes, plus `unstyled`.
+* @param props.unstyled - Drop the surface, scope class and theme.
+* @param ref            - Forwarded to the box element.
+* @return The tooltip box.
+*/
+const TooltipBox = forwardRef(({ unstyled = false, role = "tooltip", className, children, ...rest }, ref) => {
+	const box = /* @__PURE__ */ jsx("div", {
+		ref,
+		role,
+		className: clsx("visx-tooltip", !unstyled && ["a8c-charts-tooltip-scope", tooltip_box_module_default.surface], className),
+		...rest,
+		children
+	});
+	return unstyled ? box : /* @__PURE__ */ jsx(TooltipTheme, { children: box });
+});
+TooltipBox.displayName = "TooltipBox";
+//#endregion
 //#region src/components/tooltip/base-tooltip.tsx
-const DefaultTooltipContent = ({ data }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
-	data?.label,
-	": ",
-	data?.valueDisplay || formatNumber(data?.value)
-] });
-const BaseTooltip = ({ data, top, left, component: Component = DefaultTooltipContent, children, className, style, renderContainer = true }) => {
+/**
+* A tooltip box with children or `label: value` content. Prefer `TooltipBox`.
+*
+* @param props                 - Tooltip props.
+* @param props.data            - Data for the default content.
+* @param props.top             - Deprecated vertical position.
+* @param props.left            - Deprecated horizontal position.
+* @param props.component       - Deprecated content component.
+* @param props.children        - Tooltip content.
+* @param props.className       - Class name passed to the content component.
+* @param props.style           - Styles for the box.
+* @param props.renderContainer - Deprecated; render the content alone when false.
+* @return The tooltip.
+*/
+const BaseTooltip = ({ data, top, left, component: Component = LabelValueContent, children, className, style, renderContainer = true }) => {
 	const content = children || data && /* @__PURE__ */ jsx(Component, {
 		data,
 		className
 	});
 	if (!renderContainer) return content;
-	return /* @__PURE__ */ jsx(TooltipTheme, { children: /* @__PURE__ */ jsx("div", {
-		className: clsx(CHART_SCOPE_CLASS, base_tooltip_module_default.tooltip),
+	return /* @__PURE__ */ jsx(TooltipBox, {
 		style: {
-			top,
-			left,
+			...top === void 0 && left === void 0 ? void 0 : {
+				position: "absolute",
+				top,
+				left,
+				transform: "translate(-50%, -100%)"
+			},
 			...style
 		},
-		role: "tooltip",
 		children: content
-	}) });
+	});
 };
 //#endregion
 //#region src/components/tooltip/private/bounded-tooltip.tsx
@@ -2608,7 +2657,7 @@ const getBoundedPosition = ({ left, top, offsetLeft, offsetTop, box, wrapper, bo
 	};
 };
 /**
-* visx's `Tooltip`, positioned like its `TooltipWithBounds` but kept inside the
+* A `TooltipBox`, positioned like visx's `TooltipWithBounds` but kept inside the
 * nearest clipping ancestor — or the viewport when there is none — rather than
 * inside its own parent. Rendered in-tree, a tooltip's parent is the chart
 * wrapper, which is often narrower than the box; measuring against the parent
@@ -2617,7 +2666,7 @@ const getBoundedPosition = ({ left, top, offsetLeft, offsetTop, box, wrapper, bo
 * Re-measures on every render, so a box whose content changes width between
 * two hovers is placed for its current size.
 *
-* @param props            - visx `Tooltip` props.
+* @param props            - `TooltipBox` props plus placement.
 * @param props.left       - Anchor x, in wrapper coordinates.
 * @param props.top        - Anchor y, in wrapper coordinates.
 * @param props.offsetLeft - Gap between the anchor and the box, horizontally.
@@ -2683,9 +2732,11 @@ const BoundedTooltip = ({ left = 0, top = 0, offsetLeft = DEFAULT_OFFSET, offset
 	]);
 	const x = position?.x ?? left + offsetLeft;
 	const y = position?.y ?? top + (placement === "below-axis" ? POINTER_HEIGHT : offsetTop);
-	const box = /* @__PURE__ */ jsxs(Tooltip, {
+	return /* @__PURE__ */ jsxs(TooltipBox, {
 		ref: nodeRef,
-		className: clsx(!unstyled && ["a8c-charts-tooltip-scope", base_tooltip_module_default.surface], className),
+		role: "presentation",
+		unstyled,
+		className,
 		style: {
 			position: "absolute",
 			left: 0,
@@ -2708,10 +2759,9 @@ const BoundedTooltip = ({ left = 0, top = 0, offsetLeft = DEFAULT_OFFSET, offset
 			}
 		}), children]
 	});
-	return unstyled ? box : /* @__PURE__ */ jsx(TooltipTheme, { children: box });
 };
 //#endregion
-//#region src/components/tooltip/xy-chart-tooltip.tsx
+//#region src/components/tooltip/private/xy-chart-tooltip-overlay.tsx
 const CROSSHAIR_STROKE_WIDTH = 1.5;
 const CROSSHAIR_PAINT_PROPERTIES = /* @__PURE__ */ new Set([
 	"stroke",
@@ -2813,21 +2863,35 @@ const XyChartTooltipContent = ({ tooltipContext, container, renderTooltip, rende
 	const crosshairStroke = theme?.gridStyles?.stroke ?? theme?.htmlLabel?.color ?? FALLBACK_COLOR;
 	const marginTop = margin?.top ?? 0;
 	const marginLeft = margin?.left ?? 0;
-	const TooltipComponent = detectBounds || tooltipPlacement !== "auto" ? BoundedTooltip : Tooltip;
 	const boxStyle = {
 		zIndex,
 		...style
 	};
-	const themesOwnBox = TooltipComponent === Tooltip && !tooltipProps.unstyled;
-	const box = /* @__PURE__ */ jsx(TooltipComponent, {
+	const { offsetLeft = 10, offsetTop = 10, unstyled, className, ...boxProps } = tooltipProps;
+	const anchorTop = tooltipPlacement === "below-axis" ? marginTop + innerHeight + (margin?.bottom ?? 0) : tooltipAnchorTop ?? tooltipTop;
+	const box = detectBounds || tooltipPlacement !== "auto" ? /* @__PURE__ */ jsx(BoundedTooltip, {
 		left: tooltipLeft,
-		top: tooltipPlacement === "below-axis" ? marginTop + innerHeight + (margin?.bottom ?? 0) : tooltipAnchorTop ?? tooltipTop,
+		top: anchorTop,
+		offsetLeft,
+		offsetTop,
+		unstyled,
+		className,
 		style: boxStyle,
-		applyPositionStyle: true,
-		...tooltipProps,
-		className: clsx(themesOwnBox && ["a8c-charts-scope", base_tooltip_module_default.surface], tooltipProps.className),
+		...boxProps,
 		...tooltipPlacement !== "auto" && { placement: tooltipPlacement },
 		children: tooltipContent
+	}) : /* @__PURE__ */ jsx(TooltipBox, {
+		role: "presentation",
+		unstyled,
+		className,
+		style: {
+			position: "absolute",
+			left: (tooltipLeft ?? 0) + offsetLeft,
+			top: (anchorTop ?? 0) + offsetTop,
+			...!unstyled && boxStyle
+		},
+		...boxProps,
+		children: tooltipContent
 	});
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("g", {
 		className: "visx-tooltip-overlay",
@@ -2855,7 +2919,7 @@ const XyChartTooltipContent = ({ tooltipContext, container, renderTooltip, rende
 			}),
 			glyphs
 		]
-	}), container && createPortal(themesOwnBox ? /* @__PURE__ */ jsx(TooltipTheme, { children: box }) : box, container)] });
+	}), container && createPortal(box, container)] });
 };
 /**
 * In-tree replacement for `@visx/xychart`'s `Tooltip`.
@@ -2880,7 +2944,7 @@ const XyChartTooltipContent = ({ tooltipContext, container, renderTooltip, rende
 * @param props - visx's `Tooltip` options. `scroll`, `debounce` and `resizeObserverPolyfill` are accepted and ignored.
 * @return An anchor in the SVG, plus the overlay and the tooltip box while the tooltip is open.
 */
-const XyChartTooltip = (props) => {
+const XyChartTooltipOverlay = (props) => {
 	const tooltipContext = useContext(TooltipContext);
 	const [container, setContainer] = useState(null);
 	const anchorRef = useCallback((node) => {
@@ -2893,8 +2957,8 @@ const XyChartTooltip = (props) => {
 	})] });
 };
 //#endregion
-//#region src/components/tooltip/accessible-tooltip.tsx
-const AccessibleTooltip = ({ renderTooltip, selectedIndex, tooltipRef, keyboardFocusedClassName, series = [], mode = "group", verticalCrosshairStyle, horizontalCrosshairStyle, ...props }) => {
+//#region src/components/tooltip/xy-chart-tooltip.tsx
+const XYChartTooltip = ({ renderTooltip, selectedIndex, tooltipRef, keyboardFocusedClassName, series = [], mode = "group", verticalCrosshairStyle, horizontalCrosshairStyle, ...props }) => {
 	const tooltipContext = useContext(TooltipContext);
 	const scopeElement = useChartScopeElement();
 	const crosshairStroke = useMemo(() => {
@@ -3000,7 +3064,7 @@ const AccessibleTooltip = ({ renderTooltip, selectedIndex, tooltipRef, keyboardF
 		keyboardFocusedClassName,
 		standaloneScopeClass
 	]);
-	return /* @__PURE__ */ jsx(XyChartTooltip, {
+	return /* @__PURE__ */ jsx(XyChartTooltipOverlay, {
 		...props,
 		verticalCrosshairStyle: {
 			...crosshairStroke,
@@ -3013,8 +3077,10 @@ const AccessibleTooltip = ({ renderTooltip, selectedIndex, tooltipRef, keyboardF
 		renderTooltip: focusableRenderTooltip
 	});
 };
+/** @deprecated Use `XYChartTooltip`. */
+const AccessibleTooltip = XYChartTooltip;
 const useKeyboardNavigation = ({ selectedIndex, setSelectedIndex, isNavigating, setIsNavigating, chartRef, totalPoints, onActivate, preventTooltipScroll = false, visibleSeriesKey }) => {
-	const getChartRoot = useCallback(() => chartRef.current?.closest("[role=\"grid\"]") ?? chartRef.current, [chartRef]);
+	const getChartRoot = useCallback(() => chartRef.current?.closest("[role=\"application\"]") ?? chartRef.current, [chartRef]);
 	const focusWithoutScrollIfNeeded = useCallback((element) => {
 		if (preventTooltipScroll) element?.focus({ preventScroll: true });
 		else element?.focus();
@@ -3229,11 +3295,13 @@ function useChartChildren(children, chartType) {
 				}
 				const displayName = child.type?.displayName;
 				if (displayName === `${chartType}.SVG` || displayName === "Chart.SVG") {
-					if (child.props?.children) Children.forEach(child.props.children, (svgChild) => {
+					const { children: svgChildren } = child.props ?? {};
+					if (svgChildren) Children.forEach(svgChildren, (svgChild) => {
 						svg.push(svgChild);
 					});
 				} else if (displayName === `${chartType}.HTML` || displayName === "Chart.HTML") {
-					if (child.props?.children) Children.forEach(child.props.children, (htmlChild) => {
+					const { children: htmlChildren } = child.props ?? {};
+					if (htmlChildren) Children.forEach(htmlChildren, (htmlChild) => {
 						html.push(htmlChild);
 					});
 				} else if (child.type === Group) svg.push(child);
@@ -4055,6 +4123,7 @@ var line_chart_module_default = {
 	"line-chart--animated": "a8ccharts-inuQka-line-chart--animated",
 	"rise": "a8ccharts-inuQka-rise"
 };
+const isReact18 = version.startsWith("18.");
 const CloseIcon = () => /* @__PURE__ */ jsx("svg", {
 	width: "16",
 	height: "16",
@@ -4097,7 +4166,7 @@ const LineChartAnnotationLabelWithPopover = ({ title, subtitle, renderLabel, ren
 		className: line_chart_module_default["line-chart__annotation-label"],
 		children: [/* @__PURE__ */ jsx("button", {
 			ref: buttonRef,
-			popovertarget: popoverId,
+			...isReact18 ? { popovertarget: popoverId } : { popoverTarget: popoverId },
 			className: line_chart_module_default["line-chart__annotation-label-trigger-button"],
 			style: {
 				width: `44px`,
@@ -4125,8 +4194,13 @@ const LineChartAnnotationLabelWithPopover = ({ title, subtitle, renderLabel, ren
 						subtitle
 					})
 				}), /* @__PURE__ */ jsx("button", {
-					popovertarget: popoverId,
-					popovertargetaction: "hide",
+					...isReact18 ? {
+						popovertarget: popoverId,
+						popovertargetaction: "hide"
+					} : {
+						popoverTarget: popoverId,
+						popoverTargetAction: "hide"
+					},
 					className: line_chart_module_default["line-chart__annotation-label-popover-close-button"],
 					"aria-label": __("Close", "jetpack-charts"),
 					children: /* @__PURE__ */ jsx(CloseIcon, {})
@@ -4648,7 +4722,7 @@ const LineChartScalesRef = ({ chartRef, width, height, margin }) => {
 	]);
 	return null;
 };
-const LineChartInternal = forwardRef(({ data, chartId: providedChartId, width, height, className, margin, withTooltips = true, withTooltipCrosshairs, showLegend = false, legend = {}, renderGlyph = defaultRenderGlyph, glyphStyle = {}, withLegendGlyph = false, withGradientFill = false, smoothing = true, curveType, renderTooltip = renderDefaultTooltip, tooltipPlacement, tooltipStyle, withStartGlyphs = false, withEndGlyphs = false, animation, options = {}, onPointerDown = void 0, onPointerUp = void 0, onPointerMove = void 0, onPointerOut = void 0, onDatumActivate = void 0, zoomable = false, rescaleYOnVisibilityChange = true, defaultHiddenSeries, children, gridVisibility, gap = "md" }, ref) => {
+const LineChartInternal = forwardRef(({ data, ariaLabel, chartId: providedChartId, width, height, className, margin, withTooltips = true, withTooltipCrosshairs, showLegend = false, legend = {}, renderGlyph = defaultRenderGlyph, glyphStyle = {}, withLegendGlyph = false, withGradientFill = false, smoothing = true, curveType, renderTooltip = renderDefaultTooltip, tooltipPlacement, tooltipStyle, withStartGlyphs = false, withEndGlyphs = false, animation, options = {}, onPointerDown = void 0, onPointerUp = void 0, onPointerMove = void 0, onPointerOut = void 0, onDatumActivate = void 0, zoomable = false, rescaleYOnVisibilityChange = true, defaultHiddenSeries, children, gridVisibility, gap = "md" }, ref) => {
 	const legendInteractive = legend.interactive ?? false;
 	const legendCollapseGroups = legend.collapseGroups ?? false;
 	const legendComparisonItem = legend.comparisonItem ?? false;
@@ -4916,8 +4990,8 @@ const LineChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 				const chartHeight = contentHeight > 0 ? contentHeight : height;
 				return /* @__PURE__ */ jsx("div", {
 					ref: chartRef,
-					role: "grid",
-					"aria-label": __("Line chart", "jetpack-charts"),
+					role: "application",
+					"aria-label": ariaLabel ?? __("Line chart", "jetpack-charts"),
 					tabIndex: 0,
 					onKeyDown: onChartKeyDown,
 					onFocus: onChartFocus,
@@ -4925,6 +4999,7 @@ const LineChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 					children: chartHeight > 0 && /* @__PURE__ */ jsxs("div", {
 						className: xy_plot_module_default["xy-plot"],
 						children: [zoomable && zoom.domain && /* @__PURE__ */ jsx(ZoomResetButton, { onClick: zoom.reset }), /* @__PURE__ */ jsxs(XYChart, {
+							accessibilityLabel: "",
 							theme,
 							width,
 							height: chartHeight,
@@ -5018,7 +5093,7 @@ const LineChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 										] }, seriesData?.label || index);
 									})
 								}),
-								withTooltips && /* @__PURE__ */ jsx(AccessibleTooltip, {
+								withTooltips && /* @__PURE__ */ jsx(XYChartTooltip, {
 									detectBounds: true,
 									snapTooltipToDatumX: true,
 									tooltipPlacement,
@@ -5165,7 +5240,7 @@ const HoverGlyphs = ({ visibleSeries, stacked, stackOffset, getElementStyles, st
 };
 //#endregion
 //#region src/charts/area-chart/area-chart.tsx
-const AreaChartInternal = forwardRef(({ data, chartId: providedChartId, width, height, className, margin, withTooltips = true, withTooltipCrosshairs, showLegend = false, legend = {}, stacked = true, stackOffset = "none", smoothing = true, curveType, fillOpacity, withStroke, renderTooltip = renderDefaultTooltip, animation, options = {}, onPointerDown, onPointerUp, onPointerMove, onPointerOut, zoomable = false, rescaleYOnVisibilityChange = true, defaultHiddenSeries, children, gridVisibility, gap = "md" }, ref) => {
+const AreaChartInternal = forwardRef(({ data, ariaLabel, chartId: providedChartId, width, height, className, margin, withTooltips = true, withTooltipCrosshairs, showLegend = false, legend = {}, stacked = true, stackOffset = "none", smoothing = true, curveType, fillOpacity, withStroke, renderTooltip = renderDefaultTooltip, animation, options = {}, onPointerDown, onPointerUp, onPointerMove, onPointerOut, zoomable = false, rescaleYOnVisibilityChange = true, defaultHiddenSeries, children, gridVisibility, gap = "md" }, ref) => {
 	const legendInteractive = legend.interactive ?? false;
 	const legendShape = legend.shape ?? "rect";
 	const legendPosition = legend.position ?? "bottom";
@@ -5436,8 +5511,8 @@ const AreaChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 				const chartHeight = contentHeight > 0 ? contentHeight : height;
 				return /* @__PURE__ */ jsx("div", {
 					ref: chartRef,
-					role: "grid",
-					"aria-label": __("Area chart", "jetpack-charts"),
+					role: "application",
+					"aria-label": ariaLabel ?? __("Area chart", "jetpack-charts"),
 					tabIndex: 0,
 					onKeyDown: onChartKeyDown,
 					onFocus: onChartFocus,
@@ -5445,6 +5520,7 @@ const AreaChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 					children: chartHeight > 0 && /* @__PURE__ */ jsxs("div", {
 						className: xy_plot_module_default["xy-plot"],
 						children: [zoomable && zoom.domain && /* @__PURE__ */ jsx(ZoomResetButton, { onClick: zoom.reset }), /* @__PURE__ */ jsxs(XYChart, {
+							accessibilityLabel: "",
 							theme,
 							width,
 							height: chartHeight,
@@ -5494,7 +5570,7 @@ const AreaChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 										children: seriesWithVisibility.map(renderSeries)
 									}), !allSeriesHidden && !stacked && seriesWithVisibility.map(renderSeries)]
 								}),
-								withTooltips && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(AccessibleTooltip, {
+								withTooltips && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(XYChartTooltip, {
 									detectBounds: true,
 									snapTooltipToDatumX: true,
 									snapTooltipToDatumY: !stacked,
@@ -6105,6 +6181,7 @@ const ComparisonBars = ({ comparisonEntries, primaryKeys, groupPadding, horizont
 				widthFactor
 			});
 			rects.push(/* @__PURE__ */ jsx("rect", {
+				className: "bar-chart__comparison-bar",
 				x: rect.x,
 				y: rect.y,
 				width: rect.width,
@@ -6296,7 +6373,7 @@ const renderTooltipRow = (label, value) => /* @__PURE__ */ jsx("div", {
 	className: bar_chart_module_default["bar-chart__tooltip-row"],
 	children: sprintf(__("%1$s: %2$s", "jetpack-charts"), label, value)
 });
-const BarChartInternal = ({ data, chartId: providedChartId, width, height, className, margin, withTooltips = false, showLegend = false, legend = {}, gridVisibility: gridVisibilityProp, renderTooltip, tooltipPlacement, tooltipAnchorTop, tooltipStyle, barClassName, options = {}, orientation = "vertical", withPatterns = false, showZeroValues = false, withBandHighlight = false, onBandHighlightChange, defaultHiddenSeries, animation, children, gap = "md", onPointerDown, onPointerUp, onDatumActivate }) => {
+const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, height, className, margin, withTooltips = false, showLegend = false, legend = {}, gridVisibility: gridVisibilityProp, renderTooltip, tooltipPlacement, tooltipAnchorTop, tooltipStyle, barClassName, options = {}, orientation = "vertical", withPatterns = false, showZeroValues = false, withBandHighlight = false, onBandHighlightChange, defaultHiddenSeries, animation, children, gap = "md", onPointerDown, onPointerUp, onDatumActivate }) => {
 	if (!withTooltips && (withBandHighlight || onBandHighlightChange)) warnOnce("bar-chart-band-highlight-without-tooltips", "BarChart: withBandHighlight and onBandHighlightChange require withTooltips.");
 	const legendInteractive = legend.interactive ?? false;
 	const legendCollapseGroups = legend.collapseGroups ?? false;
@@ -6520,7 +6597,7 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 		const patternId = getPatternId(chartId, index);
 		return `
 			.visx-bar[fill="url(#${patternId})"],
-			.bar-chart__comparison-bars rect[fill="url(#${patternId})"] {
+			.bar-chart__comparison-bar[fill="url(#${patternId})"] {
 				stroke: ${color};
 				stroke-width: 1;
 				}
@@ -6604,9 +6681,9 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 			children: ({ contentHeight }) => {
 				const chartHeight = contentHeight > 0 ? contentHeight : height;
 				return /* @__PURE__ */ jsx("div", {
-					role: "grid",
+					role: "application",
 					ref: chartRef,
-					"aria-label": __("Bar chart", "jetpack-charts"),
+					"aria-label": ariaLabel ?? __("Bar chart", "jetpack-charts"),
 					tabIndex: 0,
 					onKeyDown: onChartKeyDown,
 					onFocus: onChartFocus,
@@ -6614,6 +6691,7 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 					children: chartHeight > 0 && /* @__PURE__ */ jsx("div", {
 						className: xy_plot_module_default["xy-plot"],
 						children: /* @__PURE__ */ jsxs(XYChart, {
+							accessibilityLabel: "",
 							theme,
 							width,
 							height: chartHeight,
@@ -6702,15 +6780,15 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 								}),
 								!allSeriesHidden && /* @__PURE__ */ jsx(WholeNumberTicks, {
 									...wholeNumberTicksProps,
-									children: (valueTicks) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Axis, {
+									children: (valueTicks) => /* @__PURE__ */ jsxs(Fragment$1, { children: [chartOptions.axis.x.display !== false && /* @__PURE__ */ jsx(Axis, {
 										...chartOptions.axis.x,
 										...horizontal && valueTicks ? { tickValues: valueTicks } : {}
-									}), /* @__PURE__ */ jsx(Axis, {
+									}), chartOptions.axis.y.display !== false && /* @__PURE__ */ jsx(Axis, {
 										...chartOptions.axis.y,
 										...!horizontal && valueTicks ? { tickValues: valueTicks } : {}
 									})] })
 								}),
-								withTooltips && /* @__PURE__ */ jsx(AccessibleTooltip, {
+								withTooltips && /* @__PURE__ */ jsx(XYChartTooltip, {
 									tooltipPlacement,
 									tooltipAnchorTop,
 									style: tooltipStyle,
@@ -7237,7 +7315,10 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 				left: tooltipLeft,
 				className: standaloneScopeClass,
 				style: tooltipStyle,
-				children: tooltipContent
+				children: /* @__PURE__ */ jsx("div", {
+					role: "tooltip",
+					children: tooltipContent
+				})
 			});
 		})()]
 	});
@@ -7616,6 +7697,7 @@ var heatmap_chart_module_default = {
 	"heatmap-chart__legend-label": "a8ccharts-O3YMOW-heatmap-chart__legend-label",
 	"heatmap-chart__legend-scale--bar": "a8ccharts-O3YMOW-heatmap-chart__legend-scale--bar",
 	"heatmap-chart__legend-swatch": "a8ccharts-O3YMOW-heatmap-chart__legend-swatch",
+	"heatmap-chart__legend-swatch--empty": "a8ccharts-O3YMOW-heatmap-chart__legend-swatch--empty",
 	"heatmap-chart__row": "a8ccharts-O3YMOW-heatmap-chart__row",
 	"heatmap-chart__row-label": "a8ccharts-O3YMOW-heatmap-chart__row-label",
 	"heatmap-chart--height-capped": "a8ccharts-O3YMOW-heatmap-chart--height-capped"
@@ -7624,30 +7706,44 @@ var heatmap_chart_module_default = {
 //#region src/charts/heatmap-chart/private/use-heatmap-colors.ts
 const isPresent = (value) => value !== null && value !== void 0 && !isNaN(value);
 /**
-* Get the min and max values from heatmap data, ignoring null/NaN. Summary
-* columns stay out: a roll-up on the scale would flatten every real cell.
+* Get the min and max values from heatmap data, ignoring null/NaN and the zeros
+* `isEmptyValue` paints as empty. Summary columns stay out: a roll-up on the
+* scale would flatten every real cell.
 * @param data - The heatmap columns
 * @return Tuple of [min, max] values
 */
 const getValueExtent = (data) => {
 	let min = Infinity;
 	let max = -Infinity;
+	let hasZero = false;
 	for (const column of data) {
 		if (column.summary) continue;
 		for (const cell of column.data) {
 			if (!isPresent(cell.value)) continue;
+			if (cell.value === 0) {
+				hasZero = true;
+				continue;
+			}
 			if (cell.value < min) min = cell.value;
 			if (cell.value > max) max = cell.value;
 		}
 	}
+	if (hasZero && min < 0) max = Math.max(max, 0);
 	if (min === Infinity) return [0, 0];
 	return [min, max];
 };
 /**
+* Whether a value paints as an empty cell: a zero in data with no negatives
+* counts nothing, so it must not look like the lowest step of activity.
+*
+* @param value  - The cell value
+* @param extent - The extent from `getValueExtent`
+* @return True when the cell takes the empty-cell color
+*/
+const isEmptyValue = (value, extent) => value === 0 && extent[0] >= 0;
+/**
 * Normalize a value to 0–1 within the extent. A flat extent (min === max)
-* maps to 1 — every cell is equally the "highest" — except an all-zero
-* extent, which maps to 0 so a no-activity grid renders at the scale's
-* bottom instead of full intensity.
+* maps to 1, since every cell is equally the "highest".
 *
 * @param value  - The value to normalize
 * @param extent - Tuple of [min, max] values for the normalization range
@@ -7655,9 +7751,40 @@ const getValueExtent = (data) => {
 */
 const getNormalizedValue = (value, extent) => {
 	const [min, max] = extent;
-	if (min === max) return max === 0 ? 0 : 1;
+	if (min === max) return 1;
 	return Math.min(1, Math.max(0, (value - min) / (max - min)));
 };
+const STEPS = 200;
+const firstMeeting = (from, to, meets) => {
+	for (let step = 0; step <= STEPS; step++) {
+		const color = mixHexColors(from, to, step / STEPS);
+		if (meets(color)) return color;
+	}
+	return null;
+};
+/**
+* The two ends of the heatmap fill scale: 3:1 against the background and the empty cell at the
+* low end, toward 9:1 against the background at the high end.
+*
+* @param primary    - The resolved primary color, as six-digit hex.
+* @param background - The resolved chart background, as six-digit hex.
+* @param emptyCell  - The resolved empty-cell color, as six-digit hex, when it is opaque.
+* @return The scale ends, as six-digit hex.
+*/
+const getHeatmapScale = (primary, background, emptyCell) => {
+	const primaryStandsOut = contrastRatio(primary, background) >= 3;
+	const extreme = (primaryStandsOut ? relativeLuminance(primary) > relativeLuminance(background) : contrastRatio("#ffffff", background) > contrastRatio("#000000", background)) ? "#ffffff" : "#000000";
+	const lowAgainst = (references) => {
+		const meets = (color) => references.every((reference) => contrastRatio(color, reference) >= 3);
+		return (primaryStandsOut ? firstMeeting(background, primary, meets) : null) ?? firstMeeting(primary, extreme, meets);
+	};
+	const high = firstMeeting(primary, extreme, (color) => contrastRatio(color, background) >= 9) ?? extreme;
+	const againstEmptyCell = emptyCell ? lowAgainst([background, emptyCell]) : null;
+	return {
+		low: (againstEmptyCell && contrastRatio(againstEmptyCell, background) <= contrastRatio(high, background) ? againstEmptyCell : lowAgainst([background])) ?? extreme,
+		high
+	};
+};
 //#endregion
 //#region src/charts/heatmap-chart/private/heatmap-context.ts
 /** Shared by the chart and legend without importing back from `heatmap-chart.tsx`. */
@@ -7668,8 +7795,9 @@ const HeatmapLegend = ({ steps = 5, variant = "swatches", lessLabel, moreLabel }
 	const context = useContext(HeatmapContext);
 	const { legend } = useGlobalChartsTheme();
 	if (!context) return null;
-	const { primaryColorHex } = context;
+	const { extent, fillVars } = context;
 	const labelStyle = legend.labelStyles;
+	const showsEmptyCell = isEmptyValue(0, extent);
 	return /* @__PURE__ */ jsxs(Stack, {
 		direction: "row",
 		gap: "xs",
@@ -7681,21 +7809,21 @@ const HeatmapLegend = ({ steps = 5, variant = "swatches", lessLabel, moreLabel }
 				style: labelStyle,
 				children: lessLabel ?? __("Less", "jetpack-charts")
 			}),
-			/* @__PURE__ */ jsx(Stack, {
+			/* @__PURE__ */ jsxs(Stack, {
 				direction: "row",
 				gap: variant === "bar" ? void 0 : "xs",
 				"aria-hidden": "true",
 				className: variant === "bar" ? heatmap_chart_module_default["heatmap-chart__legend-scale--bar"] : void 0,
-				children: Array.from({ length: steps }, (_, index) => {
+				children: [showsEmptyCell && /* @__PURE__ */ jsx("span", { className: clsx(heatmap_chart_module_default["heatmap-chart__legend-swatch"], heatmap_chart_module_default["heatmap-chart__legend-swatch--empty"]) }), Array.from({ length: steps }, (_, index) => {
 					const intensity = steps <= 1 ? 1 : index / (steps - 1);
 					return /* @__PURE__ */ jsx("span", {
 						className: heatmap_chart_module_default["heatmap-chart__legend-swatch"],
 						style: {
-							"--a8c-charts-color-heatmap-primary": primaryColorHex,
+							...fillVars,
 							"--a8c-charts-heatmap-cell-intensity": intensity
 						}
 					}, index);
-				})
+				})]
 			}),
 			/* @__PURE__ */ jsx(Text$1, {
 				variant: "body-sm",
@@ -7721,9 +7849,11 @@ const resolveColumnGroups = (groups, columnCount, firstLine) => {
 	const ungrouped = () => ({
 		columns: Array.from({ length: columnCount }, (_, index) => ({
 			line: firstLine + index,
+			band: 0,
 			gapBefore: false
 		})),
-		groups: []
+		groups: [],
+		bands: 1
 	});
 	if (!groups || groups.length === 0 || columnCount === 0) return ungrouped();
 	const spans = groups.map((group) => group.span);
@@ -7739,11 +7869,13 @@ const resolveColumnGroups = (groups, columnCount, firstLine) => {
 		if (groupIndex > 0) line += 1;
 		laidOut.push({
 			...group,
-			line
+			line,
+			band: 0
 		});
 		for (let offset = 0; offset < group.span; offset++) {
 			columns.push({
 				line,
+				band: 0,
 				gapBefore: groupIndex > 0 && offset === 0,
 				group: groupIndex
 			});
@@ -7753,13 +7885,99 @@ const resolveColumnGroups = (groups, columnCount, firstLine) => {
 	while (columns.length < columnCount) {
 		columns.push({
 			line,
+			band: 0,
 			gapBefore: false
 		});
 		line += 1;
 	}
 	return {
 		columns,
-		groups: laidOut
+		groups: laidOut,
+		bands: 1
+	};
+};
+/**
+* Wraps the groups onto bands of equal group count, each band starting back at
+* the first data line so the groups line up in slots down the bands.
+*
+* @param layout - The unwrapped layout from `resolveColumnGroups`.
+* @param bands  - Bands to aim for; the groups split as evenly as whole bands allow.
+* @return The wrapped layout, or null when there is nothing to wrap: one band, one group, or a column outside every group.
+*/
+const wrapColumnGroups = (layout, bands) => {
+	const { columns, groups } = layout;
+	if (bands < 2 || groups.length < 2 || columns.some((column) => column.group === void 0)) return null;
+	const perBand = Math.ceil(groups.length / bands);
+	const slotSpans = Array(perBand).fill(0);
+	groups.forEach((group, index) => {
+		const slot = index % perBand;
+		slotSpans[slot] = Math.max(slotSpans[slot], group.span);
+	});
+	const slotLines = [];
+	let line = columns[0].line;
+	slotSpans.forEach((span, slot) => {
+		if (slot > 0) line += 1;
+		slotLines.push(line);
+		line += span;
+	});
+	const wrappedGroups = groups.map((group, index) => ({
+		...group,
+		line: slotLines[index % perBand],
+		band: Math.floor(index / perBand)
+	}));
+	return {
+		columns: columns.map((column) => {
+			const group = column.group;
+			const offset = column.line - groups[group].line;
+			return {
+				...column,
+				line: wrappedGroups[group].line + offset,
+				band: wrappedGroups[group].band,
+				gapBefore: offset === 0 && group % perBand > 0
+			};
+		}),
+		groups: wrappedGroups,
+		bands: Math.ceil(groups.length / perBand),
+		slotSpans
+	};
+};
+//#endregion
+//#region src/charts/heatmap-chart/private/fit-compact-cells.ts
+/**
+* Largest whole-pixel square cell, and the band count giving it, for a compact grid in a box.
+*
+* @param input - The box, the grid's layout, and its fixed gaps and label sizes.
+* @return The fit; one band at `minCellSize` when no band count reaches it.
+*/
+const fitCompactCells = (input) => {
+	const { width, height, layout, rows, cellGap, groupGap, minCellSize } = input;
+	const columns = layout.columns.length;
+	if (columns === 0 || rows === 0) return {
+		bands: 1,
+		cellSize: minCellSize
+	};
+	const maxBands = Math.max(1, layout.groups.length);
+	const labelHeights = (input.columnLabelHeight ?? 0) + (input.groupLabelHeight ?? 0);
+	const bandTracks = (input.columnLabelHeight === null ? 0 : 1) + rows + (input.groupLabelHeight === null ? 0 : 1);
+	let best = null;
+	for (let target = 1; target <= maxBands; target++) {
+		const wrapped = target > 1 ? wrapColumnGroups(layout, target) : null;
+		const { bands } = wrapped ?? layout;
+		const cellColumns = wrapped ? wrapped.slotSpans.reduce((sum, span) => sum + span, 0) : columns;
+		const gapTracks = wrapped ? wrapped.slotSpans.length - 1 : layout.columns.filter((column) => column.gapBefore).length;
+		const columnTracks = 1 + cellColumns + gapTracks;
+		const byWidth = (width - input.rowLabelWidth - gapTracks * groupGap - (columnTracks - 1) * cellGap) / cellColumns;
+		const rowTracks = bands * bandTracks + (bands - 1);
+		const byHeight = (height - (bands * labelHeights + (bands - 1) * groupGap + (rowTracks - 1) * cellGap)) / (bands * rows);
+		const cellSize = Math.floor(Math.min(byWidth, byHeight));
+		if (cellSize >= minCellSize && (!best || cellSize > best.cellSize)) best = {
+			bands,
+			cellSize
+		};
+	}
+	return best ?? {
+		bands: 1,
+		cellSize: minCellSize
 	};
 };
 //#endregion
@@ -7895,7 +8113,6 @@ const stepCalendarCell = (grid, blocks, from, key) => {
 };
 //#endregion
 //#region src/charts/heatmap-chart/heatmap-chart.tsx
-const CELL_MIX_FLOOR = .15;
 const CELL_VALUE_MODIFIER = {
 	label: void 0,
 	"label-inverse": heatmap_chart_module_default["heatmap-chart__cell-value--inverse"],
@@ -7904,12 +8121,26 @@ const CELL_VALUE_MODIFIER = {
 };
 const NO_ROW_LABELS = [];
 const TOOLTIP_BOX_STYLE = { zIndex: 3 };
+const largest = (root, selector, size) => Math.max(0, ...Array.from(root.querySelectorAll(selector), (el) => el[size]));
+const gridBox = (chart, grid) => {
+	let height = chart.clientHeight;
+	const rowGap = parseFloat(getComputedStyle(chart).rowGap) || 0;
+	Array.from(chart.children).forEach((child) => {
+		const { display, position } = getComputedStyle(child);
+		if (child === grid || display === "none" || position === "absolute" || position === "fixed") return;
+		height -= child.offsetHeight + rowGap;
+	});
+	return {
+		width: chart.clientWidth,
+		height
+	};
+};
 const cellName = (info) => info.cellLabel || [
 	info.groupLabel,
 	info.columnLabel,
 	info.rowLabel
 ].filter(Boolean).join(" ");
-const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, height = 0, className, compact = false, showValues, maxCellWidth, maxCellHeight, minCellWidth, minCellHeight, rowLabels = NO_ROW_LABELS, columnGroups, keyboardNavigation = "grid", ariaLabel, primaryColor, gap = "md", withTooltips = false, renderTooltip, tooltipStyle, children }) => {
+const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, height = 0, className, compact = false, fitCells = false, showValues, maxCellWidth, maxCellHeight, minCellWidth, minCellHeight, rowLabels = NO_ROW_LABELS, columnGroups, keyboardNavigation = "grid", ariaLabel, primaryColor, gap = "md", withTooltips = false, renderTooltip, tooltipStyle, children }) => {
 	const chartId = useChartId(providedChartId);
 	const tooltipBoxStyle = tooltipStyle ? {
 		...TOOLTIP_BOX_STYLE,
@@ -7923,19 +8154,30 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 	const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, showTooltip, hideTooltip } = useTooltip();
 	const standaloneScopeClass = useStandaloneScopeClass();
 	const containerRef = useRef(null);
+	const chartRef = useRef(null);
 	const [labelRoles, setLabelRoles] = useState(null);
-	const getTooltipOrigin = useCallback(() => containerRef.current?.closest(`[data-chart-id="heatmap-chart-${chartId}"]`)?.getBoundingClientRect() ?? null, [chartId]);
+	const getTooltipOrigin = useCallback(() => chartRef.current?.getBoundingClientRect() ?? null, []);
 	const { color: primaryColorHex } = getElementStyles({
 		index: 0,
 		overrideColor: primaryColor
 	});
-	const chartBackgroundHex = normalizeColorToHex(CATALOG_POINTERS.background, scopeElement, resolveCssVariable);
+	const resolveAtScope = createCssVariableResolver(scopeElement);
+	const chartBackgroundHex = resolveOpaqueHex(CATALOG_POINTERS.background, resolveAtScope) ?? "#ffffff";
+	const emptyCellHex = resolveOpaqueHex(CATALOG_POINTERS.track, resolveAtScope);
 	const primaryHex = normalizeColorToHex(primaryColorHex);
-	const cellMix = isValidHexColor(primaryHex) && isValidHexColor(chartBackgroundHex) ? {
-		primary: hexToRgb(primaryHex),
-		background: hexToRgb(chartBackgroundHex)
-	} : null;
-	const cellTextColor = (intensity) => cellMix ? pickLabelTextColorForFill(blendRgb(cellMix.primary, cellMix.background, CELL_MIX_FLOOR + .85 * intensity), labelRoles, "label") : "label";
+	const scale = useMemo(() => isValidHexColor(primaryHex) ? getHeatmapScale(primaryHex, chartBackgroundHex, emptyCellHex) : null, [
+		primaryHex,
+		chartBackgroundHex,
+		emptyCellHex
+	]);
+	const fillVars = useMemo(() => ({
+		"--a8c-charts-color-heatmap-primary": primaryColorHex,
+		...scale && {
+			"--a8c-charts-color-heatmap-low": scale.low,
+			"--a8c-charts-color-heatmap-high": scale.high
+		}
+	}), [primaryColorHex, scale]);
+	const cellTextColor = (intensity) => scale ? pickLabelTextColorForFill(blendRgb(hexToRgb(scale.high), hexToRgb(scale.low), intensity), labelRoles, "label") : "label";
 	useIsomorphicLayoutEffect(() => {
 		if (!containerRef.current) return;
 		const next = resolveLabelRoles(createCssVariableResolver(containerRef.current));
@@ -7949,13 +8191,56 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 	const extent = useMemo(() => getValueExtent(data), [data]);
 	const heatmapContext = useMemo(() => ({
 		extent,
-		primaryColorHex
-	}), [extent, primaryColorHex]);
+		fillVars
+	}), [extent, fillVars]);
 	const columns = data.length;
 	const rows = Math.max(0, ...data.map((column) => column.data.length));
 	const groupLayout = useMemo(() => resolveColumnGroups(columnGroups, columns, 2), [columnGroups, columns]);
 	const { compactCellGap, compactCellSize, groupGap } = heatmapChartSettings;
 	const drawValues = showValues ?? !compact;
+	const hasColumnLabels = data.some((column) => Boolean(column.label));
+	const hasGroups = groupLayout.groups.length > 0;
+	const [fit, setFit] = useState(null);
+	const hasSummary = data.some((column) => column.summary);
+	const fitting = compact && fitCells && !hasSummary;
+	if (fitCells && !fitting) warnOnce("heatmap:fitCells", "fitCells applies only in compact mode without summary columns, so the cells keep their size.");
+	useIsomorphicLayoutEffect(() => {
+		const chart = chartRef.current;
+		const grid = containerRef.current;
+		if (!fitting || !chart || !grid) {
+			setFit(null);
+			return;
+		}
+		const measure = () => {
+			const next = fitCompactCells({
+				...gridBox(chart, grid),
+				layout: groupLayout,
+				rows,
+				cellGap: compactCellGap,
+				groupGap,
+				rowLabelWidth: largest(grid, `.${heatmap_chart_module_default["heatmap-chart__row-label"]}`, "offsetWidth"),
+				columnLabelHeight: hasColumnLabels ? largest(grid, `.${heatmap_chart_module_default["heatmap-chart__col-label"]}`, "offsetHeight") : null,
+				groupLabelHeight: hasGroups ? largest(grid, `.${heatmap_chart_module_default["heatmap-chart__group-label"]}`, "offsetHeight") : null,
+				minCellSize: compactCellSize
+			});
+			setFit((previous) => (0, import_fast_deep_equal.default)(previous, next) ? previous : next);
+		};
+		measure();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => flushSync(measure));
+		observer.observe(chart);
+		return () => observer.disconnect();
+	}, [
+		fitting,
+		groupLayout,
+		rows,
+		hasColumnLabels,
+		hasGroups,
+		compactCellGap,
+		compactCellSize,
+		groupGap
+	]);
+	const wrapped = useMemo(() => fit ? wrapColumnGroups(groupLayout, fit.bands) : null, [fit, groupLayout]);
 	const buildTooltipData = useCallback((columnIndex, rowIndex) => {
 		const cell = data[columnIndex]?.data[rowIndex];
 		const group = groupLayout.columns[columnIndex]?.group;
@@ -8095,20 +8380,25 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 	});
 	const columnTrack = compact ? "var(--a8c-charts-dimension-heatmap-cell-size)" : `minmax(${minCellWidth ?? 0}px, ${maxCellWidth ? `${maxCellWidth}px` : "1fr"})`;
 	const rowTrack = compact ? "var(--a8c-charts-dimension-heatmap-cell-size)" : `minmax(${minCellHeight ?? 0}px, ${maxCellHeight ? `${maxCellHeight}px` : "1fr"})`;
-	const hasColumnLabels = data.some((column) => Boolean(column.label));
-	const hasGroups = groupLayout.groups.length > 0;
-	const columnLine = (columnIndex) => groupLayout.columns[columnIndex].line;
-	const firstDataRow = hasColumnLabels ? 2 : 1;
+	const placed = wrapped ?? groupLayout;
+	const columnLine = (columnIndex) => placed.columns[columnIndex].line;
+	const bandOf = (columnIndex) => placed.columns[columnIndex].band;
+	const { bands } = placed;
+	const bandRowCount = (hasColumnLabels ? 1 : 0) + rows + (hasGroups ? 1 : 0) + 1;
+	const labelRowOf = (band) => 1 + band * bandRowCount;
+	const dataRowOf = (band, rowIndex) => labelRowOf(band) + (hasColumnLabels ? 1 : 0) + rowIndex;
 	const dataTrack = (column) => column.summary ? "minmax(auto, max-content)" : columnTrack;
 	const gapTrack = compact ? `minmax(${groupGap}px, 1fr)` : `${groupGap}px`;
+	const columnTracks = wrapped ? wrapped.slotSpans.map((span, slot) => [...slot > 0 ? [gapTrack] : [], ...Array(span).fill(columnTrack)].join(" ")).join(" ") : data.map((column, columnIndex) => groupLayout.columns[columnIndex].gapBefore ? `${gapTrack} ${dataTrack(column)}` : dataTrack(column)).join(" ");
+	const bandTracks = `${hasColumnLabels ? "auto " : ""}repeat(${rows}, ${rowTrack})${hasGroups ? " auto" : ""}`;
 	const gridStyle = {
-		"--a8c-charts-color-heatmap-primary": primaryColorHex,
-		gridTemplateColumns: `auto ${data.map((column, columnIndex) => groupLayout.columns[columnIndex].gapBefore ? `${gapTrack} ${dataTrack(column)}` : dataTrack(column)).join(" ")}`,
-		gridTemplateRows: `${hasColumnLabels ? "auto " : ""}repeat(${rows}, ${rowTrack})${hasGroups ? " auto" : ""}`
+		...fillVars,
+		gridTemplateColumns: `auto ${columnTracks}`,
+		gridTemplateRows: Array(bands).fill(bandTracks).join(` ${groupGap}px `)
 	};
 	if (compact) {
 		gridStyle["--a8c-charts-dimension-heatmap-cell-gap"] = `${compactCellGap}px`;
-		gridStyle["--a8c-charts-dimension-heatmap-cell-size"] = `${compactCellSize}px`;
+		gridStyle["--a8c-charts-dimension-heatmap-cell-size"] = `${fit?.cellSize ?? compactCellSize}px`;
 	}
 	const summaryGaps = (columnIndex) => {
 		if (!data[columnIndex]?.summary) return {};
@@ -8128,6 +8418,7 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 				legendChildren: [],
 				trailingContent: nonLegendChildren,
 				gap,
+				rootRef: chartRef,
 				className: clsx("heatmap-chart", heatmap_chart_module_default["heatmap-chart"], className, { [heatmap_chart_module_default["heatmap-chart--height-capped"]]: heightCapped }),
 				style: {
 					width: width || void 0,
@@ -8157,11 +8448,11 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 							className: heatmap_chart_module_default["heatmap-chart__row"],
 							children: [/* @__PURE__ */ jsx("span", { style: {
 								gridColumn: 1,
-								gridRow: 1
+								gridRow: labelRowOf(0)
 							} }), data.map((column, columnIndex) => /* @__PURE__ */ jsx("span", {
 								style: {
 									gridColumn: columnLine(columnIndex),
-									gridRow: 1
+									gridRow: labelRowOf(bandOf(columnIndex))
 								},
 								className: clsx(heatmap_chart_module_default["heatmap-chart__col-label"], {
 									[heatmap_chart_module_default["heatmap-chart__col-label--summary"]]: column.summary,
@@ -8172,24 +8463,23 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 						}),
 						Array.from({ length: rows }).map((_row, rowIndex) => {
 							const labelVisible = !compact || rowIndex % 2 === 0;
-							const gridRow = firstDataRow + rowIndex;
 							return /* @__PURE__ */ jsxs("div", {
 								role: "row",
 								"aria-rowindex": rowIndex + 1,
 								className: heatmap_chart_module_default["heatmap-chart__row"],
-								children: [/* @__PURE__ */ jsx("span", {
+								children: [Array.from({ length: bands }).map((_band, band) => /* @__PURE__ */ jsx("span", {
 									"aria-hidden": "true",
 									className: heatmap_chart_module_default["heatmap-chart__row-label"],
 									style: {
 										gridColumn: 1,
-										gridRow
+										gridRow: dataRowOf(band, rowIndex)
 									},
 									children: labelVisible ? rowLabels[rowIndex] ?? "" : ""
-								}), data.map((column, columnIndex) => {
+								}, `row-label-${band}`)), data.map((column, columnIndex) => {
 									const cell = column.data[rowIndex];
 									const placement = {
 										gridColumn: columnLine(columnIndex),
-										gridRow
+										gridRow: dataRowOf(bandOf(columnIndex), rowIndex)
 									};
 									if (cell?.hidden) return /* @__PURE__ */ jsx("div", {
 										"aria-hidden": "true",
@@ -8203,7 +8493,7 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 									}, `cell-${columnIndex}-${rowIndex}`);
 									const value = cell?.value ?? null;
 									const present = isPresent(value);
-									const filled = present && !column.summary;
+									const filled = present && !column.summary && !isEmptyValue(value, extent);
 									const normalized = filled ? getNormalizedValue(value, extent) : 0;
 									const info = buildTooltipData(columnIndex, rowIndex);
 									const accessibleLabel = `${cellName(info)}: ${info.value === null ? __("No data", "jetpack-charts") : formatNumber(info.value)}`;
@@ -8239,11 +8529,11 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 							role: "row",
 							"aria-hidden": "true",
 							className: heatmap_chart_module_default["heatmap-chart__row"],
-							children: groupLayout.groups.map((group, groupIndex) => /* @__PURE__ */ jsx("span", {
+							children: placed.groups.map((group, groupIndex) => /* @__PURE__ */ jsx("span", {
 								className: heatmap_chart_module_default["heatmap-chart__group-label"],
 								style: {
 									gridColumn: `${group.line} / span ${group.span}`,
-									gridRow: firstDataRow + rows
+									gridRow: dataRowOf(group.band, rows)
 								},
 								children: group.label
 							}, `group-${groupIndex}`))
@@ -11113,6 +11403,7 @@ var leaderboard_chart_module_default = {
 	"interactiveRow": "a8ccharts-GovfoW-interactiveRow",
 	"is-overlay": "a8ccharts-GovfoW-is-overlay",
 	"label": "a8ccharts-GovfoW-label",
+	"layeredRow": "a8ccharts-GovfoW-layeredRow",
 	"leaderboardChart": "a8ccharts-GovfoW-leaderboardChart",
 	"leaderboardChart__content": "a8ccharts-GovfoW-leaderboardChart__content",
 	"leaderboardChart__content--fit": "a8ccharts-GovfoW-leaderboardChart__content--fit",
@@ -11121,6 +11412,7 @@ var leaderboard_chart_module_default = {
 	"overlap": "a8ccharts-GovfoW-overlap",
 	"overlayLabel": "a8ccharts-GovfoW-overlayLabel",
 	"row": "a8ccharts-GovfoW-row",
+	"rowButton": "a8ccharts-GovfoW-rowButton",
 	"stretch": "a8ccharts-GovfoW-stretch",
 	"valueContainer": "a8ccharts-GovfoW-valueContainer"
 };
@@ -11171,6 +11463,16 @@ const defaultDeltaFormatter = (value) => {
 const getBarWidth = (share) => `calc(${share}% - var(--a8c-charts-dimension-leaderboard-bar-hover-inset, 0px) * ${share} / 100)`;
 const hasPreviousValue = (entry) => entry.previousValue != null && entry.previousShare != null;
 const hasDeltaValue = (entry) => hasPreviousValue(entry) && entry.delta != null;
+/**
+* A layered row's cell that takes pointer events of its own (a value tooltip)
+* sits above the row button; pass its clicks on so they still drill down.
+*
+* @param event - The click on the row.
+*/
+function forwardCellClickToRowButton(event) {
+	if (event.target.closest("a, button")) return;
+	event.currentTarget.querySelector(":scope > button")?.click();
+}
 const BarLabel = ({ label }) => /* @__PURE__ */ jsx(Fragment$1, { children: typeof label === "string" ? /* @__PURE__ */ jsx(Text$1, {
 	className: leaderboard_chart_module_default.label,
 	children: label
@@ -11403,6 +11705,26 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 								})
 							]
 						})] });
+						if (entry.onClick && entry.hasInteractiveLabel) return /* @__PURE__ */ jsxs("div", {
+							"data-row-index": rowIndex,
+							style: rowStyle,
+							className: clsx(leaderboard_chart_module_default.row, leaderboard_chart_module_default.interactiveRow, leaderboard_chart_module_default.layeredRow),
+							onClick: forwardCellClickToRowButton,
+							children: [
+								rowCells,
+								/* @__PURE__ */ jsx("button", {
+									type: "button",
+									className: leaderboard_chart_module_default.rowButton,
+									onClick: entry.onClick,
+									"aria-label": entry.ariaLabel
+								}),
+								/* @__PURE__ */ jsx(Icon, {
+									className: leaderboard_chart_module_default.chevron,
+									icon: chevronRight,
+									size: 24
+								})
+							]
+						}, entry.id);
 						if (entry.onClick) return /* @__PURE__ */ jsxs("button", {
 							type: "button",
 							"data-row-index": rowIndex,
@@ -11436,6 +11758,210 @@ LeaderboardChartWithProvider.displayName = "LeaderboardChart";
 const LeaderboardChart = attachSubComponents(LeaderboardChartWithProvider, { Legend });
 const LeaderboardChartResponsive = attachSubComponents(withResponsive(LeaderboardChartWithProvider), { Legend });
 //#endregion
+//#region src/charts/private/pie-keyboard-navigation/order-arcs-for-navigation.ts
+/**
+* Orders arcs the way they appear: clockwise from 12 o'clock, which for a semi-circle is left to right.
+*
+* @param arcs - Arcs from visx's `pie` factory, in data order.
+* @return A copy of `arcs` sorted by angular midpoint.
+*/
+const orderArcsForNavigation = (arcs) => [...arcs].sort((a, b) => a.startAngle + a.endAngle - (b.startAngle + b.endAngle));
+//#endregion
+//#region src/charts/private/pie-keyboard-navigation/pie-selection-announcement.tsx
+const PieSelectionAnnouncement = ({ data }) => /* @__PURE__ */ jsx(VisuallyHidden, {
+	role: "status",
+	"aria-atomic": "true",
+	children: data && /* @__PURE__ */ jsx(LabelValueContent, { data })
+});
+//#endregion
+//#region src/charts/private/pie-keyboard-navigation/pie-tooltip.tsx
+const PieTooltip = ({ top, left, selectedIndex, tooltipRef, children }) => {
+	const standaloneScopeClass = useStandaloneScopeClass();
+	return /* @__PURE__ */ jsx(BoundedTooltip, {
+		top,
+		left,
+		children: selectedIndex === void 0 ? /* @__PURE__ */ jsx("div", {
+			className: standaloneScopeClass,
+			role: "tooltip",
+			children
+		}) : /* @__PURE__ */ jsx("div", {
+			ref: tooltipRef,
+			tabIndex: -1,
+			role: "tooltip",
+			"aria-atomic": "true",
+			className: standaloneScopeClass,
+			children
+		}, `chart-tooltip-${selectedIndex}`)
+	});
+};
+//#endregion
+//#region src/charts/private/pie-keyboard-navigation/pie-selection-output.tsx
+/**
+* Reports the selected segment: a focused tooltip for a keyboard selection, a pointer tooltip on hover, or a screen reader announcement without tooltips.
+*
+* @param {PieSelectionOutputProps} props - Component props
+* @return {JSX.Element} The announcement region and the tooltip, if any
+*/
+const PieSelectionOutput = ({ withTooltips, selectedIndex, selectedData, keyboardTooltipAnchor, pointerTooltip, chartRef, svgRef, tooltipRef, renderTooltip }) => {
+	const [svgOffset, setSvgOffset] = useState({
+		top: 0,
+		left: 0
+	});
+	const showKeyboardTooltip = withTooltips && selectedData && keyboardTooltipAnchor;
+	useLayoutEffect(() => {
+		const chartBounds = chartRef.current?.getBoundingClientRect();
+		const svgBounds = svgRef.current?.getBoundingClientRect();
+		if (!showKeyboardTooltip || !chartBounds || !svgBounds) return;
+		const top = svgBounds.top - chartBounds.top;
+		const left = svgBounds.left - chartBounds.left;
+		setSvgOffset((current) => current.top === top && current.left === left ? current : {
+			top,
+			left
+		});
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(PieSelectionAnnouncement, { data: withTooltips ? void 0 : selectedData }),
+		showKeyboardTooltip && /* @__PURE__ */ jsx(PieTooltip, {
+			top: svgOffset.top + keyboardTooltipAnchor.top,
+			left: svgOffset.left + keyboardTooltipAnchor.left,
+			selectedIndex,
+			tooltipRef,
+			children: renderTooltip({ tooltipData: selectedData })
+		}),
+		withTooltips && !selectedData && pointerTooltip?.data && /* @__PURE__ */ jsx(PieTooltip, {
+			top: pointerTooltip.top,
+			left: pointerTooltip.left,
+			children: renderTooltip({ tooltipData: pointerTooltip.data })
+		})
+	] });
+};
+//#endregion
+//#region src/charts/private/pie-keyboard-navigation/pie-keyboard-navigation.module.scss
+var pie_keyboard_navigation_module_default = {
+	"selected-ring__contrast": "a8ccharts-V2HDKq-selected-ring__contrast",
+	"selected-ring__focus": "a8ccharts-V2HDKq-selected-ring__focus"
+};
+//#endregion
+//#region src/charts/private/pie-keyboard-navigation/selected-segment-ring.tsx
+/**
+* Encodes `value` for an SVG id, losslessly so distinct chart ids never share a clip path.
+*
+* @param value - Any string.
+* @return `value` with each character outside `[A-Za-z0-9-]` written as `_<hex code point>_`.
+*/
+const toSvgId = (value) => Array.from(value, (character) => /[A-Za-z0-9-]/.test(character) ? character : `_${character.codePointAt(0)?.toString(16)}_`).join("");
+/**
+* Marks the selected segment with a two-tone ring drawn inside its edge, so the SVG edge cannot cut it off.
+*
+* @param {SelectedSegmentRingProps} props - Component props
+* @return {JSX.Element} The ring
+*/
+const SelectedSegmentRing = ({ chartId, d }) => {
+	const clipId = `pie-selected-ring-clip-${toSvgId(chartId)}`;
+	const clipPath = `url(#${clipId})`;
+	return /* @__PURE__ */ jsxs("g", {
+		pointerEvents: "none",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ jsx("clipPath", {
+				id: clipId,
+				children: /* @__PURE__ */ jsx("path", { d })
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d,
+				clipPath,
+				className: pie_keyboard_navigation_module_default["selected-ring__contrast"]
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d,
+				clipPath,
+				className: pie_keyboard_navigation_module_default["selected-ring__focus"]
+			})
+		]
+	});
+};
+//#endregion
+//#region src/charts/private/pie-keyboard-navigation/use-pie-keyboard-navigation.ts
+const usePieKeyboardNavigation = ({ navigationArcs, withTooltips, tooltipOffsetX, tooltipOffsetY }) => {
+	const chartRef = useRef(null);
+	const svgRef = useRef(null);
+	const [selectedIndex, setSelectedIndex] = useState(void 0);
+	const [isNavigating, setIsNavigating] = useState(false);
+	const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } = useTooltip();
+	const { tooltipRef: focusTooltip, onChartFocus, onChartBlur, onChartKeyDown, onChartPointerMove } = useKeyboardNavigation({
+		selectedIndex,
+		setSelectedIndex,
+		isNavigating,
+		setIsNavigating,
+		chartRef,
+		totalPoints: navigationArcs.length,
+		visibleSeriesKey: JSON.stringify(navigationArcs.map((arcDatum) => arcDatum.data.label))
+	});
+	const selectedArc = selectedIndex === void 0 ? void 0 : navigationArcs[selectedIndex];
+	const keyboardTooltip = useRef(null);
+	const tooltipLostFocus = useRef(false);
+	const tooltipRef = useCallback((element) => {
+		if (element) {
+			keyboardTooltip.current = element;
+			focusTooltip(element);
+		} else if (keyboardTooltip.current?.ownerDocument.activeElement === keyboardTooltip.current) tooltipLostFocus.current = true;
+	}, [focusTooltip]);
+	useLayoutEffect(() => {
+		if (!tooltipLostFocus.current) return;
+		tooltipLostFocus.current = false;
+		const { activeElement, body } = chartRef.current?.ownerDocument ?? document;
+		if (activeElement === null || activeElement === body) chartRef.current?.focus();
+	});
+	const getSegmentHandlers = (data, navigationIndex) => ({
+		onMouseMove: (event) => {
+			onChartPointerMove(navigationIndex);
+			if (!withTooltips) return;
+			const bounds = chartRef.current?.getBoundingClientRect();
+			if (!bounds) return;
+			showTooltip({
+				tooltipData: data,
+				tooltipLeft: event.clientX - bounds.left + tooltipOffsetX,
+				tooltipTop: event.clientY - bounds.top + tooltipOffsetY
+			});
+		},
+		onMouseLeave: withTooltips ? hideTooltip : void 0
+	});
+	return {
+		chartRef,
+		svgRef,
+		selectedArc,
+		getSegmentHandlers,
+		getKeyboardTooltipAnchor: useCallback((originX, originY, [x, y]) => withTooltips ? {
+			left: originX + x + tooltipOffsetX,
+			top: originY + y + tooltipOffsetY
+		} : void 0, [
+			withTooltips,
+			tooltipOffsetX,
+			tooltipOffsetY
+		]),
+		selectionOutputProps: {
+			withTooltips,
+			selectedIndex,
+			selectedData: selectedArc?.data,
+			chartRef,
+			svgRef,
+			tooltipRef,
+			pointerTooltip: tooltipOpen ? {
+				data: tooltipData,
+				left: tooltipLeft || 0,
+				top: tooltipTop || 0
+			} : void 0
+		},
+		chartProps: {
+			role: "application",
+			tabIndex: 0,
+			onKeyDown: onChartKeyDown,
+			onFocus: onChartFocus,
+			onBlur: onChartBlur
+		}
+	};
+};
+//#endregion
 //#region src/charts/private/radial-wipe-animation/radial-wipe-animation.tsx
 /**
 * Renders a SVG mask that creates a radial wipe animation effect.
@@ -11488,18 +12014,13 @@ var pie_chart_module_default = {
 //#region src/charts/pie-chart/pie-chart.tsx
 /**
 * Default tooltip renderer for pie charts.
-* Renders a BaseTooltip with the hovered segment's data.
+* Renders the default `label: value` tooltip content for the hovered segment.
 *
 * @param {PieChartRenderTooltipParams} params - The tooltip parameters containing the hovered data point
 * @return {ReactNode} The rendered tooltip content
 */
 const renderDefaultPieTooltip = ({ tooltipData }) => {
-	return /* @__PURE__ */ jsx(BaseTooltip, {
-		data: tooltipData,
-		top: 0,
-		left: 0,
-		renderContainer: false
-	});
+	return /* @__PURE__ */ jsx(LabelValueContent, { data: tooltipData });
 };
 /**
 * Validates the pie chart data
@@ -11536,20 +12057,13 @@ const LABEL_TEXT_MODIFIER = {
 * @param {PieChartProps} props - Component props
 * @return {JSX.Element} The rendered chart component
 */
-const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false, className, showLegend = false, legend = {}, width: propWidth, height: propHeight, size, animation, thickness = 1, padding = 0, gapScale = 0, cornerScale = 0, showLabels = true, legendValueDisplay = "percentage", children = null, tooltipOffsetX = 0, tooltipOffsetY = -15, renderTooltip = renderDefaultPieTooltip, gap = "md" }) => {
+const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false, className, showLegend = false, legend = {}, width: propWidth, height: propHeight, size, animation, thickness = 1, padding = 0, gapScale = 0, cornerScale = 0, showLabels = true, legendValueDisplay = "percentage", children = null, tooltipOffsetX = 0, tooltipOffsetY = -15, renderTooltip = renderDefaultPieTooltip, ariaLabel, gap = "md" }) => {
 	const legendInteractive = legend.interactive ?? false;
 	const legendPosition = legend.position ?? "bottom";
 	const providerTheme = useGlobalChartsTheme();
 	const chartId = useChartId(providedChartId);
-	const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } = useTooltip();
-	const standaloneScopeClass = useStandaloneScopeClass();
-	const containerRef = useRef(null);
 	const rootRef = useRef(null);
 	const [labelRoles, setLabelRoles] = useState(null);
-	const onMouseLeave = useCallback(() => {
-		if (!withTooltips) return;
-		hideTooltip();
-	}, [withTooltips, hideTooltip]);
 	const { getElementStyles, isSeriesVisible, isColorPaletteResolved } = useGlobalChartsContext();
 	const { isValid, message } = validateData$1(data);
 	useLayoutEffect(() => {
@@ -11593,13 +12107,7 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
 		metadata: chartMetadata
 	});
 	const prefersReducedMotion = usePrefersReducedMotion();
-	if (!isValid) return /* @__PURE__ */ jsx("div", {
-		className: clsx("pie-chart", pie_chart_module_default["pie-chart"], className),
-		children: /* @__PURE__ */ jsx("div", {
-			className: pie_chart_module_default["error-message"],
-			children: message
-		})
-	});
+	const wipeMask = animation && !prefersReducedMotion ? `url(#radial-wipe-${chartId})` : null;
 	const padAngle = gapScale * (2 * Math.PI / data.length);
 	const dataWithIndex = visibleData.map((d) => {
 		const originalIndex = data.findIndex((item) => item.label === d.label);
@@ -11617,6 +12125,24 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
 			}).color;
 		}
 	};
+	const arcs = pie({
+		value: accessors.value,
+		padAngle
+	})(dataWithIndex);
+	const navigationArcs = orderArcsForNavigation(arcs);
+	const { chartRef, svgRef, selectedArc, getSegmentHandlers, getKeyboardTooltipAnchor, selectionOutputProps, chartProps } = usePieKeyboardNavigation({
+		navigationArcs,
+		withTooltips,
+		tooltipOffsetX,
+		tooltipOffsetY
+	});
+	if (!isValid) return /* @__PURE__ */ jsx("div", {
+		className: clsx("pie-chart", pie_chart_module_default["pie-chart"], className),
+		children: /* @__PURE__ */ jsx("div", {
+			className: pie_chart_module_default["error-message"],
+			children: message
+		})
+	});
 	const legendElement = showLegend && /* @__PURE__ */ jsx(Legend, {
 		orientation: legend.orientation ?? "horizontal",
 		position: legendPosition,
@@ -11655,102 +12181,96 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
 				const innerRadius = thickness === 0 ? 0 : outerRadius * (1 - thickness);
 				const maxCornerRadius = (outerRadius - innerRadius) / 2;
 				const cornerRadius = cornerScale ? Math.min(cornerScale * outerRadius, maxCornerRadius) : 0;
+				const path = arc({
+					innerRadius,
+					outerRadius,
+					cornerRadius
+				});
+				const svgLabelSmall = providerTheme.svgLabelSmall;
+				const fontSize = resolveFontSize(svgLabelSmall?.fontSize) ?? 12;
+				const renderLabel = (arcDatum, index) => {
+					if (arcDatum.endAngle - arcDatum.startAngle < .25) return null;
+					const [centroidX, centroidY] = path.centroid(arcDatum);
+					const backgroundWidth = getStringWidth$1(arcDatum.data.label, {
+						fontSize,
+						fontFamily: svgLabelSmall?.fontFamily,
+						fontWeight: svgLabelSmall?.fontWeight
+					}) + 12;
+					const backgroundHeight = fontSize + 12;
+					return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("rect", {
+						className: pie_chart_module_default["pie-chart__label-plate"],
+						x: centroidX - backgroundWidth / 2,
+						y: centroidY - backgroundHeight / 2,
+						width: backgroundWidth,
+						height: backgroundHeight,
+						rx: 4,
+						ry: 4,
+						pointerEvents: "none"
+					}), /* @__PURE__ */ jsx("text", {
+						className: clsx(pie_chart_module_default["pie-chart__label-text"], LABEL_TEXT_MODIFIER[pickLabelTextColor(accessors.fill(arcDatum.data), labelRoles, "label-inverse")]),
+						x: centroidX,
+						y: centroidY,
+						dy: ".33em",
+						fontSize,
+						textAnchor: "middle",
+						pointerEvents: "none",
+						children: arcDatum.data.label
+					})] }, `label-${index}`);
+				};
 				return /* @__PURE__ */ jsxs(Center, {
-					ref: containerRef,
+					ref: chartRef,
 					className: pie_chart_module_default["pie-chart__plot"],
+					...chartProps,
+					"aria-label": ariaLabel ?? __("Pie chart", "jetpack-charts"),
 					children: [/* @__PURE__ */ jsxs("svg", {
+						ref: svgRef,
 						viewBox: `0 0 ${width} ${height}`,
 						preserveAspectRatio: "xMidYMid meet",
 						width,
 						height,
-						children: [/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(RadialWipeAnimation, {
-							id: `radial-wipe-${chartId}`,
-							radius: outerRadius,
-							innerRadius
-						}) }), /* @__PURE__ */ jsxs(Group, {
-							top: centerY,
-							left: centerX,
-							mask: animation && !prefersReducedMotion ? `url(#radial-wipe-${chartId})` : null,
-							children: [allSegmentsHidden ? /* @__PURE__ */ jsx(SvgEmptyState, {
-								x: 0,
-								y: 0,
-								width,
-								height,
-								children: getAllHiddenMessage(legendInteractive, "segments")
-							}) : /* @__PURE__ */ jsx(Pie, {
-								data: dataWithIndex,
-								pieValue: accessors.value,
-								outerRadius,
-								innerRadius,
-								padAngle,
-								cornerRadius,
-								children: (pie) => {
-									return pie.arcs.map((arc, index) => {
-										const [centroidX, centroidY] = pie.path.centroid(arc);
-										const hasSpaceForLabel = arc.endAngle - arc.startAngle >= .25;
-										const handleMouseMove = (event) => {
-											if (!withTooltips) return;
-											const bounds = containerRef.current?.getBoundingClientRect();
-											if (!bounds) return;
-											showTooltip({
-												tooltipData: arc.data,
-												tooltipLeft: event.clientX - bounds.left + tooltipOffsetX,
-												tooltipTop: event.clientY - bounds.top + tooltipOffsetY
-											});
-										};
-										const fill = accessors.fill(arc.data);
-										const pathProps = {
-											d: pie.path(arc) || "",
-											fill,
-											"data-testid": "pie-segment"
-										};
-										const groupProps = {};
-										if (withTooltips) {
-											groupProps.onMouseMove = handleMouseMove;
-											groupProps.onMouseLeave = onMouseLeave;
-										}
-										const svgLabelSmall = providerTheme.svgLabelSmall;
-										const fontSize = resolveFontSize(svgLabelSmall?.fontSize) ?? 12;
-										const backgroundWidth = getStringWidth$1(arc.data.label, {
-											fontSize,
-											fontFamily: svgLabelSmall?.fontFamily,
-											fontWeight: svgLabelSmall?.fontWeight
-										}) + 12;
-										const backgroundHeight = fontSize + 12;
-										return /* @__PURE__ */ jsxs("g", {
-											...groupProps,
-											children: [/* @__PURE__ */ jsx("path", { ...pathProps }), showLabels && hasSpaceForLabel && /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("rect", {
-												className: pie_chart_module_default["pie-chart__label-plate"],
-												x: centroidX - backgroundWidth / 2,
-												y: centroidY - backgroundHeight / 2,
-												width: backgroundWidth,
-												height: backgroundHeight,
-												rx: 4,
-												ry: 4,
-												pointerEvents: "none"
-											}), /* @__PURE__ */ jsx("text", {
-												className: clsx(pie_chart_module_default["pie-chart__label-text"], LABEL_TEXT_MODIFIER[pickLabelTextColor(fill, labelRoles, "label-inverse")]),
-												x: centroidX,
-												y: centroidY,
-												dy: ".33em",
-												fontSize,
-												textAnchor: "middle",
-												pointerEvents: "none",
-												children: arc.data.label
-											})] })]
-										}, `arc-${index}`);
-									});
-								}
-							}), !allSegmentsHidden && svgChildren]
-						})]
-					}), withTooltips && tooltipOpen && tooltipData && /* @__PURE__ */ jsx(BoundedTooltip, {
-						top: tooltipTop || 0,
-						left: tooltipLeft || 0,
-						children: /* @__PURE__ */ jsx("div", {
-							className: standaloneScopeClass,
-							role: "tooltip",
-							children: renderTooltip({ tooltipData })
-						})
+						children: [
+							/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(RadialWipeAnimation, {
+								id: `radial-wipe-${chartId}`,
+								radius: outerRadius,
+								innerRadius
+							}) }),
+							/* @__PURE__ */ jsx(Group, {
+								top: centerY,
+								left: centerX,
+								mask: wipeMask,
+								children: allSegmentsHidden ? /* @__PURE__ */ jsx(SvgEmptyState, {
+									x: 0,
+									y: 0,
+									width,
+									height,
+									children: getAllHiddenMessage(legendInteractive, "segments")
+								}) : arcs.map((arcDatum, index) => /* @__PURE__ */ jsx("g", {
+									...getSegmentHandlers(arcDatum.data, navigationArcs.indexOf(arcDatum)),
+									children: /* @__PURE__ */ jsx("path", {
+										d: path(arcDatum) || "",
+										fill: accessors.fill(arcDatum.data)
+									})
+								}, `arc-${index}`))
+							}),
+							selectedArc && /* @__PURE__ */ jsx(Group, {
+								top: centerY,
+								left: centerX,
+								children: /* @__PURE__ */ jsx(SelectedSegmentRing, {
+									chartId,
+									d: path(selectedArc) || ""
+								})
+							}),
+							!allSegmentsHidden && /* @__PURE__ */ jsxs(Group, {
+								top: centerY,
+								left: centerX,
+								mask: wipeMask,
+								children: [showLabels && arcs.map(renderLabel), svgChildren]
+							})
+						]
+					}), /* @__PURE__ */ jsx(PieSelectionOutput, {
+						...selectionOutputProps,
+						keyboardTooltipAnchor: selectedArc && getKeyboardTooltipAnchor(centerX, centerY, path.centroid(selectedArc)),
+						renderTooltip
 					})]
 				});
 			}
@@ -11785,18 +12305,13 @@ var pie_semi_circle_chart_module_default = {
 //#region src/charts/pie-semi-circle-chart/pie-semi-circle-chart.tsx
 /**
 * Default tooltip renderer for semi-circle pie charts.
-* Renders a BaseTooltip with the hovered segment's data.
+* Renders the default `label: value` tooltip content for the hovered segment.
 *
 * @param {PieSemiCircleChartRenderTooltipParams} params - The tooltip parameters containing the hovered data point
 * @return {ReactNode} The rendered tooltip content
 */
 const renderDefaultPieSemiCircleTooltip = ({ tooltipData }) => {
-	return /* @__PURE__ */ jsx(BaseTooltip, {
-		data: tooltipData,
-		top: 0,
-		left: 0,
-		renderContainer: false
-	});
+	return /* @__PURE__ */ jsx(LabelValueContent, { data: tooltipData });
 };
 const PAD_ANGLE = .03;
 const DEFAULT_WIDTH$1 = 400;
@@ -11823,32 +12338,10 @@ const validateData = (data) => {
 		message: ""
 	};
 };
-const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width: propWidth, height: propHeight, thickness = .4, clockwise = true, withTooltips = false, showLegend = false, legend = {}, legendValueDisplay = "percentage", label, animation, note, className, children, tooltipOffsetX = 0, tooltipOffsetY = -15, renderTooltip = renderDefaultPieSemiCircleTooltip, gap = "md" }) => {
+const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width: propWidth, height: propHeight, thickness = .4, clockwise = true, withTooltips = false, showLegend = false, legend = {}, legendValueDisplay = "percentage", label, animation, note, className, children, tooltipOffsetX = 0, tooltipOffsetY = -15, renderTooltip = renderDefaultPieSemiCircleTooltip, ariaLabel, gap = "md" }) => {
 	const legendInteractive = legend.interactive ?? false;
 	const legendPosition = legend.position ?? "bottom";
 	const chartId = useChartId(providedChartId);
-	const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } = useTooltip();
-	const standaloneScopeClass = useStandaloneScopeClass();
-	const containerRef = useRef(null);
-	const handleMouseMove = useCallback((event, arc) => {
-		const bounds = containerRef.current?.getBoundingClientRect();
-		if (!bounds) return;
-		showTooltip({
-			tooltipData: arc.data,
-			tooltipLeft: event.clientX - bounds.left + tooltipOffsetX,
-			tooltipTop: event.clientY - bounds.top + tooltipOffsetY
-		});
-	}, [
-		showTooltip,
-		tooltipOffsetX,
-		tooltipOffsetY
-	]);
-	const handleMouseLeave = useCallback(() => {
-		hideTooltip();
-	}, [hideTooltip]);
-	const handleArcMouseMove = useCallback((arc) => (event) => {
-		handleMouseMove(event, arc);
-	}, [handleMouseMove]);
 	const { isValid, message } = validateData(data);
 	const { getElementStyles, isSeriesVisible } = useGlobalChartsContext();
 	const dataWithPercentages = useDataWithPercentages(data);
@@ -11882,7 +12375,31 @@ const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width: pro
 		metadata: chartMetadata
 	});
 	const prefersReducedMotion = usePrefersReducedMotion();
+	const wipeMask = animation && !prefersReducedMotion ? `url(#radial-wipe-${chartId})` : null;
 	const effectiveWidth = propWidth || DEFAULT_WIDTH$1;
+	const dataWithIndex = visibleData.map((d) => {
+		const originalIndex = data.findIndex((item) => item.label === d.label);
+		return {
+			...d,
+			index: originalIndex >= 0 ? originalIndex : 0
+		};
+	});
+	const startAngle = clockwise ? -Math.PI / 2 : Math.PI / 2;
+	const endAngle = clockwise ? Math.PI / 2 : -Math.PI / 2;
+	const arcs = pie({
+		value: accessors.value,
+		sort: accessors.sort,
+		padAngle: PAD_ANGLE,
+		startAngle,
+		endAngle
+	})(dataWithIndex);
+	const navigationArcs = orderArcsForNavigation(arcs);
+	const { chartRef, svgRef, selectedArc, getSegmentHandlers, getKeyboardTooltipAnchor, selectionOutputProps, chartProps } = usePieKeyboardNavigation({
+		navigationArcs,
+		withTooltips,
+		tooltipOffsetX,
+		tooltipOffsetY
+	});
 	if (!isValid) {
 		const errorWidth = propHeight ? Math.min(propWidth || propHeight * 2, propHeight * 2) : effectiveWidth;
 		const errorHeight = errorWidth / 2;
@@ -11901,15 +12418,6 @@ const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width: pro
 			})
 		});
 	}
-	const dataWithIndex = visibleData.map((d) => {
-		const originalIndex = data.findIndex((item) => item.label === d.label);
-		return {
-			...d,
-			index: originalIndex >= 0 ? originalIndex : 0
-		};
-	});
-	const startAngle = clockwise ? -Math.PI / 2 : Math.PI / 2;
-	const endAngle = clockwise ? Math.PI / 2 : -Math.PI / 2;
 	const legendElement = showLegend && /* @__PURE__ */ jsx(Legend, {
 		orientation: legend.orientation ?? "horizontal",
 		position: legendPosition,
@@ -11942,52 +12450,60 @@ const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width: pro
 				const height = width / 2;
 				const radius = height;
 				const innerRadius = radius * (1 - thickness);
+				const path = arc({
+					innerRadius,
+					outerRadius: radius,
+					cornerRadius: 3
+				});
 				return /* @__PURE__ */ jsxs(Center, {
-					ref: containerRef,
+					ref: chartRef,
 					className: pie_semi_circle_chart_module_default["pie-semi-circle-chart__plot"],
+					...chartProps,
+					"aria-label": ariaLabel ?? __("Semi-circle chart", "jetpack-charts"),
 					children: [/* @__PURE__ */ jsxs("svg", {
+						ref: svgRef,
 						width,
 						height,
 						viewBox: `0 0 ${width} ${height}`,
-						children: [/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(RadialWipeAnimation, {
-							id: `radial-wipe-${chartId}`,
-							radius,
-							innerRadius,
-							startAngle: "-180deg",
-							wipePercentage: 50
-						}) }), /* @__PURE__ */ jsx(Group, {
-							top: height,
-							left: width / 2,
-							mask: animation && !prefersReducedMotion ? `url(#radial-wipe-${chartId})` : null,
-							children: allSegmentsHidden ? /* @__PURE__ */ jsx(SvgEmptyState, {
-								x: 0,
-								y: -radius / 2,
-								width,
-								height,
-								children: getAllHiddenMessage(legendInteractive, "segments")
-							}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
-								/* @__PURE__ */ jsx(Pie, {
-									data: dataWithIndex,
-									pieValue: accessors.value,
-									outerRadius: radius,
-									innerRadius,
-									cornerRadius: 3,
-									padAngle: PAD_ANGLE,
-									startAngle,
-									endAngle,
-									pieSort: accessors.sort,
-									children: (pie) => {
-										return pie.arcs.map((arc) => /* @__PURE__ */ jsx("g", {
-											onMouseMove: withTooltips ? handleArcMouseMove(arc) : void 0,
-											onMouseLeave: withTooltips ? handleMouseLeave : void 0,
-											children: /* @__PURE__ */ jsx("path", {
-												d: pie.path(arc) || "",
-												fill: accessors.fill(arc.data)
-											})
-										}, arc.data.label));
-									}
-								}),
-								/* @__PURE__ */ jsxs(Group, { children: [/* @__PURE__ */ jsx(Text, {
+						children: [
+							/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(RadialWipeAnimation, {
+								id: `radial-wipe-${chartId}`,
+								radius,
+								innerRadius,
+								startAngle: "-180deg",
+								wipePercentage: 50
+							}) }),
+							/* @__PURE__ */ jsx(Group, {
+								top: height,
+								left: width / 2,
+								mask: wipeMask,
+								children: allSegmentsHidden ? /* @__PURE__ */ jsx(SvgEmptyState, {
+									x: 0,
+									y: -radius / 2,
+									width,
+									height,
+									children: getAllHiddenMessage(legendInteractive, "segments")
+								}) : arcs.map((arcDatum) => /* @__PURE__ */ jsx("g", {
+									...getSegmentHandlers(arcDatum.data, navigationArcs.indexOf(arcDatum)),
+									children: /* @__PURE__ */ jsx("path", {
+										d: path(arcDatum) || "",
+										fill: accessors.fill(arcDatum.data)
+									})
+								}, arcDatum.data.label))
+							}),
+							selectedArc && /* @__PURE__ */ jsx(Group, {
+								top: height,
+								left: width / 2,
+								children: /* @__PURE__ */ jsx(SelectedSegmentRing, {
+									chartId,
+									d: path(selectedArc) || ""
+								})
+							}),
+							!allSegmentsHidden && /* @__PURE__ */ jsxs(Group, {
+								top: height,
+								left: width / 2,
+								mask: wipeMask,
+								children: [/* @__PURE__ */ jsxs(Group, { children: [/* @__PURE__ */ jsx(Text, {
 									textAnchor: "middle",
 									verticalAnchor: "start",
 									y: -40,
@@ -11999,18 +12515,13 @@ const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width: pro
 									y: -20,
 									className: pie_semi_circle_chart_module_default.note,
 									children: note
-								})] }),
-								!allSegmentsHidden && svgChildren
-							] })
-						})]
-					}), withTooltips && tooltipOpen && tooltipData && /* @__PURE__ */ jsx(BoundedTooltip, {
-						top: tooltipTop || 0,
-						left: tooltipLeft || 0,
-						children: /* @__PURE__ */ jsx("div", {
-							className: standaloneScopeClass,
-							role: "tooltip",
-							children: renderTooltip({ tooltipData })
-						})
+								})] }), svgChildren]
+							})
+						]
+					}), /* @__PURE__ */ jsx(PieSelectionOutput, {
+						...selectionOutputProps,
+						keyboardTooltipAnchor: selectedArc && getKeyboardTooltipAnchor(width / 2, height, path.centroid(selectedArc)),
+						renderTooltip
 					})]
 				});
 			}
@@ -12236,6 +12747,6 @@ function TrendIndicator({ direction, value, className, style, showIcon = true })
 	});
 }
 //#endregion
-export { AccessibleTooltip, AreaChartResponsive as AreaChart, AreaChart as AreaChartUnresponsive, BarChartResponsive as BarChart, BarChart as BarChartUnresponsive, BarListChartResponsive as BarListChart, BarListChart as BarListChartUnresponsive, BaseTooltip, ConversionFunnelChartWithProvider as ConversionFunnelChart, GeoChartResponsive as GeoChart, GeoChartWithProvider as GeoChartUnresponsive, GlobalChartsContext, GlobalChartsProvider, GlobalChartsProvider as ThemeProvider, GoogleDataTableColumnRoleType, HeatmapChartResponsive as HeatmapChart, HeatmapChart as HeatmapChartUnresponsive, LeaderboardChartResponsive as LeaderboardChart, LeaderboardChart as LeaderboardChartUnresponsive, Legend, LineChartResponsive as LineChart, LineChart as LineChartUnresponsive, PieChartResponsive as PieChart, PieChart as PieChartUnresponsive, PieSemiCircleChartResponsive as PieSemiCircleChart, PieSemiCircleChart as PieSemiCircleChartUnresponsive, Sparkline, SparklineUnresponsive, TrendIndicator, buildCalendarHeatmapData, buildMonthCalendarHeatmapData, defaultTheme, formatMetricValue, formatPercentage, getBucketInfo, getColorDistance, hexToRgba, isValidHexColor, lightenHexColor, mergeThemes, mixHexColors, normalizeColorToHex, parseAsLocalDate, parseHslString, prefersLightText, relativeLuminance, resolveCssVariable, useCalendarHeatmapData, useChartFormatting, useChartLegendItems, useChartRegistration, useChartScopeElement, useGlobalChartsContext, useGlobalChartsTheme, useLeaderboardLegendItems, useMonthCalendarHeatmapData, validateHexColor };
+export { AccessibleTooltip, AreaChartResponsive as AreaChart, AreaChart as AreaChartUnresponsive, BarChartResponsive as BarChart, BarChart as BarChartUnresponsive, BarListChartResponsive as BarListChart, BarListChart as BarListChartUnresponsive, BaseTooltip, ConversionFunnelChartWithProvider as ConversionFunnelChart, GeoChartResponsive as GeoChart, GeoChartWithProvider as GeoChartUnresponsive, GlobalChartsContext, GlobalChartsProvider, GlobalChartsProvider as ThemeProvider, GoogleDataTableColumnRoleType, HeatmapChartResponsive as HeatmapChart, HeatmapChart as HeatmapChartUnresponsive, LeaderboardChartResponsive as LeaderboardChart, LeaderboardChart as LeaderboardChartUnresponsive, Legend, LineChartResponsive as LineChart, LineChart as LineChartUnresponsive, PieChartResponsive as PieChart, PieChart as PieChartUnresponsive, PieSemiCircleChartResponsive as PieSemiCircleChart, PieSemiCircleChart as PieSemiCircleChartUnresponsive, Sparkline, SparklineUnresponsive, TooltipBox, TrendIndicator, XYChartTooltip, buildCalendarHeatmapData, buildMonthCalendarHeatmapData, defaultTheme, formatMetricValue, formatPercentage, getBucketInfo, getColorDistance, hexToRgba, isValidHexColor, lightenHexColor, mergeThemes, mixHexColors, normalizeColorToHex, parseAsLocalDate, parseHslString, prefersLightText, relativeLuminance, resolveCssVariable, useCalendarHeatmapData, useChartFormatting, useChartLegendItems, useChartRegistration, useChartScopeElement, useGlobalChartsContext, useGlobalChartsTheme, useLeaderboardLegendItems, useMonthCalendarHeatmapData, validateHexColor };
 
 //# sourceMappingURL=index.js.map