@automattic/charts 4.7.0 → 4.9.0

package/dist/index.cjs

@@ -29,12 +29,12 @@ let clsx = require("clsx");
 clsx = __toESM(clsx, 1);
 let react = require("react");
 react = __toESM(react);
-let _visx_vendor_d3_color = require("@visx/vendor/d3-color");
 let date_fns = require("date-fns");
 let _date_fns_tz = require("@date-fns/tz");
 let _visx_text = require("@visx/text");
 let deepmerge = require("deepmerge");
 deepmerge = __toESM(deepmerge, 1);
+let _visx_vendor_d3_color = require("@visx/vendor/d3-color");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _visx_tooltip = require("@visx/tooltip");
 let _visx_scale = require("@visx/scale");
@@ -836,6 +836,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
@@ -1065,6 +1066,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. */
@@ -1255,6 +1265,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 || (0, _visx_vendor_d3_color.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.
@@ -1303,12 +1321,6 @@ const defaultTheme = {
 };
 //#endregion
 //#region src/providers/chart-context/global-charts-provider.tsx
-const resolveOpaqueHex = (pointer, element) => {
-	const raw = resolveCssVariable(pointer, element);
-	if (!raw || (0, _visx_vendor_d3_color.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 = (0, react.createContext)(null);
 const GlobalChartsProvider = ({ children, theme, locale, timeZone }) => {
@@ -1336,8 +1348,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,
@@ -1673,10 +1686,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.
@@ -1756,18 +1769,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,
@@ -2479,11 +2492,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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+	data.label,
+	": ",
+	data.valueDisplay || (0, _automattic_number_formatters.formatNumber)(data.value)
+] });
 //#endregion
 //#region src/components/tooltip/private/tooltip-theme.tsx
 const DEFAULT_SURFACE = "#1e1e1e";
@@ -2509,28 +2523,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 = (0, react.forwardRef)(({ unstyled = false, role = "tooltip", className, children, ...rest }, ref) => {
+	const box = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref,
+		role,
+		className: (0, clsx.default)("visx-tooltip", !unstyled && ["a8c-charts-tooltip-scope", tooltip_box_module_default.surface], className),
+		...rest,
+		children
+	});
+	return unstyled ? box : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTheme, { children: box });
+});
+TooltipBox.displayName = "TooltipBox";
+//#endregion
 //#region src/components/tooltip/base-tooltip.tsx
-const DefaultTooltipContent = ({ data }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-	data?.label,
-	": ",
-	data?.valueDisplay || (0, _automattic_number_formatters.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__ */ (0, react_jsx_runtime.jsx)(Component, {
 		data,
 		className
 	});
 	if (!renderContainer) return content;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTheme, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, clsx.default)(CHART_SCOPE_CLASS, base_tooltip_module_default.tooltip),
+	return /* @__PURE__ */ (0, react_jsx_runtime.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
@@ -2610,7 +2659,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
@@ -2619,7 +2668,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.
@@ -2685,9 +2734,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__ */ (0, react_jsx_runtime.jsxs)(_visx_tooltip.Tooltip, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TooltipBox, {
 		ref: nodeRef,
-		className: (0, clsx.default)(!unstyled && ["a8c-charts-tooltip-scope", base_tooltip_module_default.surface], className),
+		role: "presentation",
+		unstyled,
+		className,
 		style: {
 			position: "absolute",
 			left: 0,
@@ -2710,10 +2761,9 @@ const BoundedTooltip = ({ left = 0, top = 0, offsetLeft = DEFAULT_OFFSET, offset
 			}
 		}), children]
 	});
-	return unstyled ? box : /* @__PURE__ */ (0, react_jsx_runtime.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",
@@ -2815,21 +2865,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 : _visx_tooltip.Tooltip;
 	const boxStyle = {
 		zIndex,
 		...style
 	};
-	const themesOwnBox = TooltipComponent === _visx_tooltip.Tooltip && !tooltipProps.unstyled;
-	const box = /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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: (0, clsx.default)(themesOwnBox && ["a8c-charts-scope", base_tooltip_module_default.surface], tooltipProps.className),
+		...boxProps,
 		...tooltipPlacement !== "auto" && { placement: tooltipPlacement },
 		children: tooltipContent
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipBox, {
+		role: "presentation",
+		unstyled,
+		className,
+		style: {
+			position: "absolute",
+			left: (tooltipLeft ?? 0) + offsetLeft,
+			top: (anchorTop ?? 0) + offsetTop,
+			...!unstyled && boxStyle
+		},
+		...boxProps,
+		children: tooltipContent
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
 		className: "visx-tooltip-overlay",
@@ -2857,7 +2921,7 @@ const XyChartTooltipContent = ({ tooltipContext, container, renderTooltip, rende
 			}),
 			glyphs
 		]
-	}), container && (0, react_dom.createPortal)(themesOwnBox ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTheme, { children: box }) : box, container)] });
+	}), container && (0, react_dom.createPortal)(box, container)] });
 };
 /**
 * In-tree replacement for `@visx/xychart`'s `Tooltip`.
@@ -2882,7 +2946,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 = (0, react.useContext)(_visx_xychart.TooltipContext);
 	const [container, setContainer] = (0, react.useState)(null);
 	const anchorRef = (0, react.useCallback)((node) => {
@@ -2895,8 +2959,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 = (0, react.useContext)(_visx_xychart.TooltipContext);
 	const scopeElement = useChartScopeElement();
 	const crosshairStroke = (0, react.useMemo)(() => {
@@ -3002,7 +3066,7 @@ const AccessibleTooltip = ({ renderTooltip, selectedIndex, tooltipRef, keyboardF
 		keyboardFocusedClassName,
 		standaloneScopeClass
 	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(XyChartTooltip, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(XyChartTooltipOverlay, {
 		...props,
 		verticalCrosshairStyle: {
 			...crosshairStroke,
@@ -3015,8 +3079,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 = (0, react.useCallback)(() => chartRef.current?.closest("[role=\"grid\"]") ?? chartRef.current, [chartRef]);
+	const getChartRoot = (0, react.useCallback)(() => chartRef.current?.closest("[role=\"application\"]") ?? chartRef.current, [chartRef]);
 	const focusWithoutScrollIfNeeded = (0, react.useCallback)((element) => {
 		if (preventTooltipScroll) element?.focus({ preventScroll: true });
 		else element?.focus();
@@ -3231,11 +3297,13 @@ function useChartChildren(children, chartType) {
 				}
 				const displayName = child.type?.displayName;
 				if (displayName === `${chartType}.SVG` || displayName === "Chart.SVG") {
-					if (child.props?.children) react.Children.forEach(child.props.children, (svgChild) => {
+					const { children: svgChildren } = child.props ?? {};
+					if (svgChildren) react.Children.forEach(svgChildren, (svgChild) => {
 						svg.push(svgChild);
 					});
 				} else if (displayName === `${chartType}.HTML` || displayName === "Chart.HTML") {
-					if (child.props?.children) react.Children.forEach(child.props.children, (htmlChild) => {
+					const { children: htmlChildren } = child.props ?? {};
+					if (htmlChildren) react.Children.forEach(htmlChildren, (htmlChild) => {
 						html.push(htmlChild);
 					});
 				} else if (child.type === _visx_group.Group) svg.push(child);
@@ -4057,6 +4125,7 @@ var line_chart_module_default = {
 	"line-chart--animated": "a8ccharts-inuQka-line-chart--animated",
 	"rise": "a8ccharts-inuQka-rise"
 };
+const isReact18 = react.version.startsWith("18.");
 const CloseIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 	width: "16",
 	height: "16",
@@ -4099,7 +4168,7 @@ const LineChartAnnotationLabelWithPopover = ({ title, subtitle, renderLabel, ren
 		className: line_chart_module_default["line-chart__annotation-label"],
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.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`,
@@ -4127,8 +4196,13 @@ const LineChartAnnotationLabelWithPopover = ({ title, subtitle, renderLabel, ren
 						subtitle
 					})
 				}), /* @__PURE__ */ (0, react_jsx_runtime.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": (0, _wordpress_i18n.__)("Close", "jetpack-charts"),
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CloseIcon, {})
@@ -4650,7 +4724,7 @@ const LineChartScalesRef = ({ chartRef, width, height, margin }) => {
 	]);
 	return null;
 };
-const LineChartInternal = (0, react.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 = (0, react.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;
@@ -4918,8 +4992,8 @@ const LineChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 				const chartHeight = contentHeight > 0 ? contentHeight : height;
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					ref: chartRef,
-					role: "grid",
-					"aria-label": (0, _wordpress_i18n.__)("Line chart", "jetpack-charts"),
+					role: "application",
+					"aria-label": ariaLabel ?? (0, _wordpress_i18n.__)("Line chart", "jetpack-charts"),
 					tabIndex: 0,
 					onKeyDown: onChartKeyDown,
 					onFocus: onChartFocus,
@@ -4927,6 +5001,7 @@ const LineChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 					children: chartHeight > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: xy_plot_module_default["xy-plot"],
 						children: [zoomable && zoom.domain && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZoomResetButton, { onClick: zoom.reset }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_visx_xychart.XYChart, {
+							accessibilityLabel: "",
 							theme,
 							width,
 							height: chartHeight,
@@ -5020,7 +5095,7 @@ const LineChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 										] }, seriesData?.label || index);
 									})
 								}),
-								withTooltips && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccessibleTooltip, {
+								withTooltips && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(XYChartTooltip, {
 									detectBounds: true,
 									snapTooltipToDatumX: true,
 									tooltipPlacement,
@@ -5167,7 +5242,7 @@ const HoverGlyphs = ({ visibleSeries, stacked, stackOffset, getElementStyles, st
 };
 //#endregion
 //#region src/charts/area-chart/area-chart.tsx
-const AreaChartInternal = (0, react.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 = (0, react.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";
@@ -5438,8 +5513,8 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 				const chartHeight = contentHeight > 0 ? contentHeight : height;
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					ref: chartRef,
-					role: "grid",
-					"aria-label": (0, _wordpress_i18n.__)("Area chart", "jetpack-charts"),
+					role: "application",
+					"aria-label": ariaLabel ?? (0, _wordpress_i18n.__)("Area chart", "jetpack-charts"),
 					tabIndex: 0,
 					onKeyDown: onChartKeyDown,
 					onFocus: onChartFocus,
@@ -5447,6 +5522,7 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 					children: chartHeight > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: xy_plot_module_default["xy-plot"],
 						children: [zoomable && zoom.domain && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZoomResetButton, { onClick: zoom.reset }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_visx_xychart.XYChart, {
+							accessibilityLabel: "",
 							theme,
 							width,
 							height: chartHeight,
@@ -5496,7 +5572,7 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 										children: seriesWithVisibility.map(renderSeries)
 									}), !allSeriesHidden && !stacked && seriesWithVisibility.map(renderSeries)]
 								}),
-								withTooltips && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccessibleTooltip, {
+								withTooltips && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(XYChartTooltip, {
 									detectBounds: true,
 									snapTooltipToDatumX: true,
 									snapTooltipToDatumY: !stacked,
@@ -6107,6 +6183,7 @@ const ComparisonBars = ({ comparisonEntries, primaryKeys, groupPadding, horizont
 				widthFactor
 			});
 			rects.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+				className: "bar-chart__comparison-bar",
 				x: rect.x,
 				y: rect.y,
 				width: rect.width,
@@ -6298,7 +6375,7 @@ const renderTooltipRow = (label, value) => /* @__PURE__ */ (0, react_jsx_runtime
 	className: bar_chart_module_default["bar-chart__tooltip-row"],
 	children: (0, _wordpress_i18n.sprintf)((0, _wordpress_i18n.__)("%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;
@@ -6522,7 +6599,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;
 				}
@@ -6606,9 +6683,9 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 			children: ({ contentHeight }) => {
 				const chartHeight = contentHeight > 0 ? contentHeight : height;
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					role: "grid",
+					role: "application",
 					ref: chartRef,
-					"aria-label": (0, _wordpress_i18n.__)("Bar chart", "jetpack-charts"),
+					"aria-label": ariaLabel ?? (0, _wordpress_i18n.__)("Bar chart", "jetpack-charts"),
 					tabIndex: 0,
 					onKeyDown: onChartKeyDown,
 					onFocus: onChartFocus,
@@ -6616,6 +6693,7 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 					children: chartHeight > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: xy_plot_module_default["xy-plot"],
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_visx_xychart.XYChart, {
+							accessibilityLabel: "",
 							theme,
 							width,
 							height: chartHeight,
@@ -6704,15 +6782,15 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 								}),
 								!allSeriesHidden && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WholeNumberTicks, {
 									...wholeNumberTicksProps,
-									children: (valueTicks) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Axis, {
+									children: (valueTicks) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [chartOptions.axis.x.display !== false && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Axis, {
 										...chartOptions.axis.x,
 										...horizontal && valueTicks ? { tickValues: valueTicks } : {}
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Axis, {
+									}), chartOptions.axis.y.display !== false && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Axis, {
 										...chartOptions.axis.y,
 										...!horizontal && valueTicks ? { tickValues: valueTicks } : {}
 									})] })
 								}),
-								withTooltips && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccessibleTooltip, {
+								withTooltips && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(XYChartTooltip, {
 									tooltipPlacement,
 									tooltipAnchorTop,
 									style: tooltipStyle,
@@ -7239,7 +7317,10 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 				left: tooltipLeft,
 				className: standaloneScopeClass,
 				style: tooltipStyle,
-				children: tooltipContent
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					role: "tooltip",
+					children: tooltipContent
+				})
 			});
 		})()]
 	});
@@ -7618,6 +7699,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"
@@ -7626,30 +7708,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
@@ -7657,9 +7753,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`. */
@@ -7670,8 +7797,9 @@ const HeatmapLegend = ({ steps = 5, variant = "swatches", lessLabel, moreLabel }
 	const context = (0, react.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__ */ (0, react_jsx_runtime.jsxs)(_wordpress_ui.Stack, {
 		direction: "row",
 		gap: "xs",
@@ -7683,21 +7811,21 @@ const HeatmapLegend = ({ steps = 5, variant = "swatches", lessLabel, moreLabel }
 				style: labelStyle,
 				children: lessLabel ?? (0, _wordpress_i18n.__)("Less", "jetpack-charts")
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_wordpress_ui.Stack, {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_wordpress_ui.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__ */ (0, react_jsx_runtime.jsx)("span", { className: (0, clsx.default)(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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(_wordpress_ui.Text, {
 				variant: "body-sm",
@@ -7723,9 +7851,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);
@@ -7741,11 +7871,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
 			});
@@ -7755,13 +7887,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
@@ -7897,7 +8115,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"],
@@ -7906,12 +8123,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,
@@ -7925,19 +8156,30 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 	const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, showTooltip, hideTooltip } = (0, _visx_tooltip.useTooltip)();
 	const standaloneScopeClass = useStandaloneScopeClass();
 	const containerRef = (0, react.useRef)(null);
+	const chartRef = (0, react.useRef)(null);
 	const [labelRoles, setLabelRoles] = (0, react.useState)(null);
-	const getTooltipOrigin = (0, react.useCallback)(() => containerRef.current?.closest(`[data-chart-id="heatmap-chart-${chartId}"]`)?.getBoundingClientRect() ?? null, [chartId]);
+	const getTooltipOrigin = (0, react.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 = (0, react.useMemo)(() => isValidHexColor(primaryHex) ? getHeatmapScale(primaryHex, chartBackgroundHex, emptyCellHex) : null, [
+		primaryHex,
+		chartBackgroundHex,
+		emptyCellHex
+	]);
+	const fillVars = (0, react.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));
@@ -7951,13 +8193,56 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 	const extent = (0, react.useMemo)(() => getValueExtent(data), [data]);
 	const heatmapContext = (0, react.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 = (0, react.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] = (0, react.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(() => (0, react_dom.flushSync)(measure));
+		observer.observe(chart);
+		return () => observer.disconnect();
+	}, [
+		fitting,
+		groupLayout,
+		rows,
+		hasColumnLabels,
+		hasGroups,
+		compactCellGap,
+		compactCellSize,
+		groupGap
+	]);
+	const wrapped = (0, react.useMemo)(() => fit ? wrapColumnGroups(groupLayout, fit.bands) : null, [fit, groupLayout]);
 	const buildTooltipData = (0, react.useCallback)((columnIndex, rowIndex) => {
 		const cell = data[columnIndex]?.data[rowIndex];
 		const group = groupLayout.columns[columnIndex]?.group;
@@ -8097,20 +8382,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 {};
@@ -8130,6 +8420,7 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 				legendChildren: [],
 				trailingContent: nonLegendChildren,
 				gap,
+				rootRef: chartRef,
 				className: (0, clsx.default)("heatmap-chart", heatmap_chart_module_default["heatmap-chart"], className, { [heatmap_chart_module_default["heatmap-chart--height-capped"]]: heightCapped }),
 				style: {
 					width: width || void 0,
@@ -8159,11 +8450,11 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 							className: heatmap_chart_module_default["heatmap-chart__row"],
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { style: {
 								gridColumn: 1,
-								gridRow: 1
+								gridRow: labelRowOf(0)
 							} }), data.map((column, columnIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 								style: {
 									gridColumn: columnLine(columnIndex),
-									gridRow: 1
+									gridRow: labelRowOf(bandOf(columnIndex))
 								},
 								className: (0, clsx.default)(heatmap_chart_module_default["heatmap-chart__col-label"], {
 									[heatmap_chart_module_default["heatmap-chart__col-label--summary"]]: column.summary,
@@ -8174,24 +8465,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__ */ (0, react_jsx_runtime.jsxs)("div", {
 								role: "row",
 								"aria-rowindex": rowIndex + 1,
 								className: heatmap_chart_module_default["heatmap-chart__row"],
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								children: [Array.from({ length: bands }).map((_band, band) => /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
 										"aria-hidden": "true",
@@ -8205,7 +8495,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 ? (0, _wordpress_i18n.__)("No data", "jetpack-charts") : (0, _automattic_number_formatters.formatNumber)(info.value)}`;
@@ -8241,11 +8531,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__ */ (0, react_jsx_runtime.jsx)("span", {
+							children: placed.groups.map((group, groupIndex) => /* @__PURE__ */ (0, react_jsx_runtime.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}`))
@@ -11480,6 +11770,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",
@@ -11488,6 +11779,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"
 };
@@ -11538,6 +11830,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__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: typeof label === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_wordpress_ui.Text, {
 	className: leaderboard_chart_module_default.label,
 	children: label
@@ -11770,6 +12072,26 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 								})
 							]
 						})] });
+						if (entry.onClick && entry.hasInteractiveLabel) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							"data-row-index": rowIndex,
+							style: rowStyle,
+							className: (0, clsx.default)(leaderboard_chart_module_default.row, leaderboard_chart_module_default.interactiveRow, leaderboard_chart_module_default.layeredRow),
+							onClick: forwardCellClickToRowButton,
+							children: [
+								rowCells,
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: leaderboard_chart_module_default.rowButton,
+									onClick: entry.onClick,
+									"aria-label": entry.ariaLabel
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_wordpress_icons.Icon, {
+									className: leaderboard_chart_module_default.chevron,
+									icon: _wordpress_icons.chevronRight,
+									size: 24
+								})
+							]
+						}, entry.id);
 						if (entry.onClick) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 							type: "button",
 							"data-row-index": rowIndex,
@@ -11803,6 +12125,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__ */ (0, react_jsx_runtime.jsx)(_wordpress_ui.VisuallyHidden, {
+	role: "status",
+	"aria-atomic": "true",
+	children: data && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(BoundedTooltip, {
+		top,
+		left,
+		children: selectedIndex === void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: standaloneScopeClass,
+			role: "tooltip",
+			children
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.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] = (0, react.useState)({
+		top: 0,
+		left: 0
+	});
+	const showKeyboardTooltip = withTooltips && selectedData && keyboardTooltipAnchor;
+	(0, react.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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PieSelectionAnnouncement, { data: withTooltips ? void 0 : selectedData }),
+		showKeyboardTooltip && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PieTooltip, {
+			top: svgOffset.top + keyboardTooltipAnchor.top,
+			left: svgOffset.left + keyboardTooltipAnchor.left,
+			selectedIndex,
+			tooltipRef,
+			children: renderTooltip({ tooltipData: selectedData })
+		}),
+		withTooltips && !selectedData && pointerTooltip?.data && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("g", {
+		pointerEvents: "none",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("clipPath", {
+				id: clipId,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				d,
+				clipPath,
+				className: pie_keyboard_navigation_module_default["selected-ring__contrast"]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.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 = (0, react.useRef)(null);
+	const svgRef = (0, react.useRef)(null);
+	const [selectedIndex, setSelectedIndex] = (0, react.useState)(void 0);
+	const [isNavigating, setIsNavigating] = (0, react.useState)(false);
+	const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } = (0, _visx_tooltip.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 = (0, react.useRef)(null);
+	const tooltipLostFocus = (0, react.useRef)(false);
+	const tooltipRef = (0, react.useCallback)((element) => {
+		if (element) {
+			keyboardTooltip.current = element;
+			focusTooltip(element);
+		} else if (keyboardTooltip.current?.ownerDocument.activeElement === keyboardTooltip.current) tooltipLostFocus.current = true;
+	}, [focusTooltip]);
+	(0, react.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: (0, react.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.
@@ -11855,18 +12381,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__ */ (0, react_jsx_runtime.jsx)(BaseTooltip, {
-		data: tooltipData,
-		top: 0,
-		left: 0,
-		renderContainer: false
-	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LabelValueContent, { data: tooltipData });
 };
 /**
 * Validates the pie chart data
@@ -11903,20 +12424,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 } = (0, _visx_tooltip.useTooltip)();
-	const standaloneScopeClass = useStandaloneScopeClass();
-	const containerRef = (0, react.useRef)(null);
 	const rootRef = (0, react.useRef)(null);
 	const [labelRoles, setLabelRoles] = (0, react.useState)(null);
-	const onMouseLeave = (0, react.useCallback)(() => {
-		if (!withTooltips) return;
-		hideTooltip();
-	}, [withTooltips, hideTooltip]);
 	const { getElementStyles, isSeriesVisible, isColorPaletteResolved } = useGlobalChartsContext();
 	const { isValid, message } = validateData$1(data);
 	(0, react.useLayoutEffect)(() => {
@@ -11960,13 +12474,7 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
 		metadata: chartMetadata
 	});
 	const prefersReducedMotion = usePrefersReducedMotion();
-	if (!isValid) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, clsx.default)("pie-chart", pie_chart_module_default["pie-chart"], className),
-		children: /* @__PURE__ */ (0, react_jsx_runtime.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);
@@ -11984,6 +12492,24 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
 			}).color;
 		}
 	};
+	const arcs = (0, _visx_shape.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__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, clsx.default)("pie-chart", pie_chart_module_default["pie-chart"], className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: pie_chart_module_default["error-message"],
+			children: message
+		})
+	});
 	const legendElement = showLegend && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Legend, {
 		orientation: legend.orientation ?? "horizontal",
 		position: legendPosition,
@@ -12022,102 +12548,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 = (0, _visx_shape.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 = (0, _visx_text.getStringWidth)(arcDatum.data.label, {
+						fontSize,
+						fontFamily: svgLabelSmall?.fontFamily,
+						fontWeight: svgLabelSmall?.fontWeight
+					}) + 12;
+					const backgroundHeight = fontSize + 12;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", { children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("text", {
+						className: (0, clsx.default)(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__ */ (0, react_jsx_runtime.jsxs)(Center, {
-					ref: containerRef,
+					ref: chartRef,
 					className: pie_chart_module_default["pie-chart__plot"],
+					...chartProps,
+					"aria-label": ariaLabel ?? (0, _wordpress_i18n.__)("Pie chart", "jetpack-charts"),
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+						ref: svgRef,
 						viewBox: `0 0 ${width} ${height}`,
 						preserveAspectRatio: "xMidYMid meet",
 						width,
 						height,
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RadialWipeAnimation, {
-							id: `radial-wipe-${chartId}`,
-							radius: outerRadius,
-							innerRadius
-						}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_visx_group.Group, {
-							top: centerY,
-							left: centerX,
-							mask: animation && !prefersReducedMotion ? `url(#radial-wipe-${chartId})` : null,
-							children: [allSegmentsHidden ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SvgEmptyState, {
-								x: 0,
-								y: 0,
-								width,
-								height,
-								children: getAllHiddenMessage(legendInteractive, "segments")
-							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_shape.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 = (0, _visx_text.getStringWidth)(arc.data.label, {
-											fontSize,
-											fontFamily: svgLabelSmall?.fontFamily,
-											fontWeight: svgLabelSmall?.fontWeight
-										}) + 12;
-										const backgroundHeight = fontSize + 12;
-										return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
-											...groupProps,
-											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { ...pathProps }), showLabels && hasSpaceForLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", { children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("text", {
-												className: (0, clsx.default)(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__ */ (0, react_jsx_runtime.jsx)(BoundedTooltip, {
-						top: tooltipTop || 0,
-						left: tooltipLeft || 0,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: standaloneScopeClass,
-							role: "tooltip",
-							children: renderTooltip({ tooltipData })
-						})
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RadialWipeAnimation, {
+								id: `radial-wipe-${chartId}`,
+								radius: outerRadius,
+								innerRadius
+							}) }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_group.Group, {
+								top: centerY,
+								left: centerX,
+								mask: wipeMask,
+								children: allSegmentsHidden ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SvgEmptyState, {
+									x: 0,
+									y: 0,
+									width,
+									height,
+									children: getAllHiddenMessage(legendInteractive, "segments")
+								}) : arcs.map((arcDatum, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("g", {
+									...getSegmentHandlers(arcDatum.data, navigationArcs.indexOf(arcDatum)),
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+										d: path(arcDatum) || "",
+										fill: accessors.fill(arcDatum.data)
+									})
+								}, `arc-${index}`))
+							}),
+							selectedArc && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_group.Group, {
+								top: centerY,
+								left: centerX,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectedSegmentRing, {
+									chartId,
+									d: path(selectedArc) || ""
+								})
+							}),
+							!allSegmentsHidden && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_visx_group.Group, {
+								top: centerY,
+								left: centerX,
+								mask: wipeMask,
+								children: [showLabels && arcs.map(renderLabel), svgChildren]
+							})
+						]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PieSelectionOutput, {
+						...selectionOutputProps,
+						keyboardTooltipAnchor: selectedArc && getKeyboardTooltipAnchor(centerX, centerY, path.centroid(selectedArc)),
+						renderTooltip
 					})]
 				});
 			}
@@ -12152,18 +12672,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__ */ (0, react_jsx_runtime.jsx)(BaseTooltip, {
-		data: tooltipData,
-		top: 0,
-		left: 0,
-		renderContainer: false
-	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LabelValueContent, { data: tooltipData });
 };
 const PAD_ANGLE = .03;
 const DEFAULT_WIDTH$1 = 400;
@@ -12190,32 +12705,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 } = (0, _visx_tooltip.useTooltip)();
-	const standaloneScopeClass = useStandaloneScopeClass();
-	const containerRef = (0, react.useRef)(null);
-	const handleMouseMove = (0, react.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 = (0, react.useCallback)(() => {
-		hideTooltip();
-	}, [hideTooltip]);
-	const handleArcMouseMove = (0, react.useCallback)((arc) => (event) => {
-		handleMouseMove(event, arc);
-	}, [handleMouseMove]);
 	const { isValid, message } = validateData(data);
 	const { getElementStyles, isSeriesVisible } = useGlobalChartsContext();
 	const dataWithPercentages = useDataWithPercentages(data);
@@ -12249,7 +12742,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 = (0, _visx_shape.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;
@@ -12268,15 +12785,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__ */ (0, react_jsx_runtime.jsx)(Legend, {
 		orientation: legend.orientation ?? "horizontal",
 		position: legendPosition,
@@ -12309,52 +12817,60 @@ const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width: pro
 				const height = width / 2;
 				const radius = height;
 				const innerRadius = radius * (1 - thickness);
+				const path = (0, _visx_shape.arc)({
+					innerRadius,
+					outerRadius: radius,
+					cornerRadius: 3
+				});
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Center, {
-					ref: containerRef,
+					ref: chartRef,
 					className: pie_semi_circle_chart_module_default["pie-semi-circle-chart__plot"],
+					...chartProps,
+					"aria-label": ariaLabel ?? (0, _wordpress_i18n.__)("Semi-circle chart", "jetpack-charts"),
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+						ref: svgRef,
 						width,
 						height,
 						viewBox: `0 0 ${width} ${height}`,
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RadialWipeAnimation, {
-							id: `radial-wipe-${chartId}`,
-							radius,
-							innerRadius,
-							startAngle: "-180deg",
-							wipePercentage: 50
-						}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_group.Group, {
-							top: height,
-							left: width / 2,
-							mask: animation && !prefersReducedMotion ? `url(#radial-wipe-${chartId})` : null,
-							children: allSegmentsHidden ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SvgEmptyState, {
-								x: 0,
-								y: -radius / 2,
-								width,
-								height,
-								children: getAllHiddenMessage(legendInteractive, "segments")
-							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_shape.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__ */ (0, react_jsx_runtime.jsx)("g", {
-											onMouseMove: withTooltips ? handleArcMouseMove(arc) : void 0,
-											onMouseLeave: withTooltips ? handleMouseLeave : void 0,
-											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-												d: pie.path(arc) || "",
-												fill: accessors.fill(arc.data)
-											})
-										}, arc.data.label));
-									}
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_visx_group.Group, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_text.Text, {
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RadialWipeAnimation, {
+								id: `radial-wipe-${chartId}`,
+								radius,
+								innerRadius,
+								startAngle: "-180deg",
+								wipePercentage: 50
+							}) }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_group.Group, {
+								top: height,
+								left: width / 2,
+								mask: wipeMask,
+								children: allSegmentsHidden ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SvgEmptyState, {
+									x: 0,
+									y: -radius / 2,
+									width,
+									height,
+									children: getAllHiddenMessage(legendInteractive, "segments")
+								}) : arcs.map((arcDatum) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("g", {
+									...getSegmentHandlers(arcDatum.data, navigationArcs.indexOf(arcDatum)),
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+										d: path(arcDatum) || "",
+										fill: accessors.fill(arcDatum.data)
+									})
+								}, arcDatum.data.label))
+							}),
+							selectedArc && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_group.Group, {
+								top: height,
+								left: width / 2,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectedSegmentRing, {
+									chartId,
+									d: path(selectedArc) || ""
+								})
+							}),
+							!allSegmentsHidden && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_visx_group.Group, {
+								top: height,
+								left: width / 2,
+								mask: wipeMask,
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_visx_group.Group, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_text.Text, {
 									textAnchor: "middle",
 									verticalAnchor: "start",
 									y: -40,
@@ -12366,18 +12882,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__ */ (0, react_jsx_runtime.jsx)(BoundedTooltip, {
-						top: tooltipTop || 0,
-						left: tooltipLeft || 0,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: standaloneScopeClass,
-							role: "tooltip",
-							children: renderTooltip({ tooltipData })
-						})
+								})] }), svgChildren]
+							})
+						]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PieSelectionOutput, {
+						...selectionOutputProps,
+						keyboardTooltipAnchor: selectedArc && getKeyboardTooltipAnchor(width / 2, height, path.centroid(selectedArc)),
+						renderTooltip
 					})]
 				});
 			}
@@ -12631,7 +13142,9 @@ exports.PieSemiCircleChartUnresponsive = PieSemiCircleChart;
 exports.Sparkline = Sparkline;
 exports.SparklineUnresponsive = SparklineUnresponsive;
 exports.ThemeProvider = GlobalChartsProvider;
+exports.TooltipBox = TooltipBox;
 exports.TrendIndicator = TrendIndicator;
+exports.XYChartTooltip = XYChartTooltip;
 exports.buildCalendarHeatmapData = buildCalendarHeatmapData;
 exports.buildMonthCalendarHeatmapData = buildMonthCalendarHeatmapData;
 exports.defaultTheme = defaultTheme;