@automattic/charts 4.1.1 → 4.3.0

package/dist/index.js

@@ -1,6 +1,6 @@
 import { getStringWidth as getStringWidth$1 } from "./visx/text/index.js";
 import { formatNumber, formatNumberCompact } from "@automattic/number-formatters";
-import { AnimatedAreaSeries, AnimatedAreaStack, AreaSeries, Axis, BarGroup, BarSeries, DataContext, Grid, TooltipContext, XYChart, buildChartTheme } from "@visx/xychart";
+import { AnimatedAreaSeries, AnimatedAreaStack, AreaSeries, Axis, BarGroup, BarSeries, DataContext, Grid, TooltipContext, XYChart, buildChartTheme, useEventEmitter } from "@visx/xychart";
 import { __, _x, sprintf } from "@wordpress/i18n";
 import clsx from "clsx";
 import * as React from "react";
@@ -12,7 +12,7 @@ import { Text, getStringWidth } from "@visx/text";
 import deepmerge from "deepmerge";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Tooltip, defaultStyles, useTooltip } from "@visx/tooltip";
-import { createScale, getTicks, scaleBand, scaleOrdinal, scaleTime } from "@visx/scale";
+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";
@@ -21,6 +21,7 @@ import { LinearGradient } from "@visx/gradient";
 import { curveCatmullRom, curveLinear, curveMonotoneX } from "@visx/curve";
 import { useParentSize } from "@visx/responsive";
 import { Annotation, CircleSubject, Connector, HtmlLabel, Label, LineSubject } from "@visx/annotation";
+import { bisector } from "@visx/vendor/d3-array";
 import { PatternCircles, PatternHexagons, PatternLines, PatternWaves } from "@visx/pattern";
 import { Chart } from "react-google-charts";
 import DOMPurify from "dompurify";
@@ -981,7 +982,8 @@ const defaultTheme = {
 	},
 	heatmapChart: {
 		compactCellGap: 2,
-		compactCellSize: 11
+		compactCellSize: 11,
+		groupGap: 24
 	}
 };
 //#endregion
@@ -1073,7 +1075,7 @@ const GlobalChartsProvider = ({ children, theme, locale, timeZone }) => {
 		return getChartColor(index, colorCache);
 	}, [colorCache, groupToColorMap]);
 	const getElementStyles = useCallback(({ data, index, overrideColor, legendShape }) => {
-		const isSeriesData = data && typeof data === "object" && "data" in data && "options" in data;
+		const isSeriesData = data && typeof data === "object" && "data" in data;
 		const isPointPercentageData = data && typeof data === "object" && "value" in data && typeof data.value === "number" && !("data" in data);
 		return {
 			color: resolveColor({
@@ -1454,8 +1456,9 @@ const useChartMargin = (height, options, data, theme, horizontal = false) => {
 		const allDataPoints = data.flatMap((series) => series.data);
 		if (horizontal) return allDataPoints.map((d) => d.label || d.date?.getTime());
 		if (options.axis?.y?.tickValues?.length) return options.axis.y.tickValues;
-		const minY = Math.min(...allDataPoints.map((d) => d.value));
-		const maxY = Math.max(...allDataPoints.map((d) => d.value));
+		const values = allDataPoints.map((d) => d.value).filter((value) => typeof value === "number" && Number.isFinite(value));
+		const minY = values.length ? Math.min(...values) : 0;
+		const maxY = values.length ? Math.max(...values) : 1;
 		const yScale = createScale({
 			...options.yScale,
 			domain: options.yScale?.domain ?? [minY, maxY],
@@ -1790,23 +1793,6 @@ function valueOrIdentityString(_) {
 	return String(valueOrIdentity(_));
 }
 //#endregion
-//#region src/components/legend/utils/label-transform-factory.ts
-/**
-* Returns a function which takes a Datum and index as input, and returns a formatted label object.
-* @param {object}                            root0             - The object to return the value of.
-* @param {AnyD3Scale}                        root0.scale       - The scale to use.
-* @param {LabelFormatter<ScaleInput<Scale>>} root0.labelFormat - The label format to use.
-* @return {ItemTransformer<ScaleInput<Scale>, ReturnType<Scale>>} The label transform factory.
-*/
-function labelTransformFactory({ scale, labelFormat }) {
-	return (d, i) => ({
-		datum: d,
-		index: i,
-		text: `${labelFormat(d, i)}`,
-		value: scale(d)
-	});
-}
-//#endregion
 //#region src/components/legend/private/base-legend.module.scss
 var base_legend_module_default = {
 	"legend": "a8ccharts-04TogW-legend",
@@ -1848,7 +1834,7 @@ const getLegendItemAriaLabel = (text, value, visible, interactive) => {
 	if (visible) return;
 	return sprintf(_x("%s: hidden", "hidden non-interactive legend item", "jetpack-charts"), accessibleText);
 };
-const BaseLegend = forwardRef(({ items, className, orientation = "horizontal", alignment = "center", shape = "rect", fill = valueOrIdentityString, size = valueOrIdentityString, labelFormat = valueOrIdentity, labelTransform = labelTransformFactory, itemStyles, itemClassName, labelStyles, labelClassName, shapeStyles, render, interactive = false, chartId }, ref) => {
+const BaseLegend = forwardRef(({ items, className, orientation = "horizontal", alignment = "center", shape = "rect", fill = valueOrIdentityString, size = valueOrIdentityString, labelFormat = valueOrIdentity, labelTransform, itemStyles, itemClassName, labelStyles, labelClassName, shapeStyles, render, interactive = false, chartId }, ref) => {
 	const { margin: itemMargin = "0", flexDirection: itemDirection = "row" } = itemStyles ?? {};
 	const { justifyContent: labelJustifyContent = "flex-start", flex: labelFlex = "0 0 auto", margin: labelMargin = "0 4px", maxWidth, textOverflow = "wrap" } = labelStyles ?? {};
 	const { width: shapeWidth = 16, height: shapeHeight = 16, margin: shapeMargin = "2px 4px 2px 0" } = shapeStyles ?? {};
@@ -1856,11 +1842,17 @@ const BaseLegend = forwardRef(({ items, className, orientation = "horizontal", a
 	const context = useContext(GlobalChartsContext);
 	const chartInstanceContext = useContext(ChartInstanceContext);
 	const standaloneScopeClass = useStandaloneScopeClass();
+	const domain = items.map((item) => item.label);
 	const legendScale = scaleOrdinal({
-		domain: items.map((item) => item.label),
+		domain,
 		range: items.map((item) => item.color)
 	});
-	const domain = legendScale.domain();
+	const defaultLabelTransform = useCallback(({ labelFormat: format }) => (datum, index) => ({
+		datum,
+		index,
+		text: String(format(datum, index)),
+		value: items[index].color
+	}), [items]);
 	const getShapeStyle = useCallback(({ index }) => items[index]?.shapeStyle, [items]);
 	const handleLegendClick = useCallback((seriesLabels) => {
 		if (interactive && chartId && context) {
@@ -1881,24 +1873,26 @@ const BaseLegend = forwardRef(({ items, className, orientation = "horizontal", a
 		chartInstanceContext,
 		context
 	]);
-	const createClickHandler = useCallback((seriesLabels) => {
-		if (!interactive) return;
+	const createClickHandler = useCallback((seriesLabels, itemInteractive) => {
+		if (!itemInteractive) return;
 		return () => handleLegendClick(seriesLabels);
-	}, [interactive, handleLegendClick]);
-	const createKeyDownHandler = useCallback((seriesLabels) => {
-		if (!interactive) return;
+	}, [handleLegendClick]);
+	const createKeyDownHandler = useCallback((seriesLabels, itemInteractive) => {
+		if (!itemInteractive) return;
 		return (event) => {
 			if (event.key === "Enter" || event.key === " ") {
 				event.preventDefault();
 				handleLegendClick(seriesLabels);
 			}
 		};
-	}, [interactive, handleLegendClick]);
+	}, [handleLegendClick]);
 	const flexAlignment = ALIGNMENT_TO_FLEX[alignment] ?? "center";
+	const staticItemRole = interactive ? void 0 : "listitem";
 	return render ? render(items) : /* @__PURE__ */ jsx(LegendOrdinal, {
 		scale: legendScale,
+		domain,
 		labelFormat,
-		labelTransform,
+		labelTransform: labelTransform ?? defaultLabelTransform,
 		children: (labels) => /* @__PURE__ */ jsx(Stack, {
 			ref,
 			direction: orientation === "vertical" ? "column" : "row",
@@ -1912,19 +1906,20 @@ const BaseLegend = forwardRef(({ items, className, orientation = "horizontal", a
 			children: labels.map((label, i) => {
 				const matchedItem = items[i];
 				const seriesLabels = matchedItem?.seriesLabels?.length ? matchedItem.seriesLabels : [label.text];
-				const visible = isSeriesVisible(seriesLabels[0]);
-				const handleClick = createClickHandler(seriesLabels);
-				const handleKeyDown = createKeyDownHandler(seriesLabels);
+				const visible = matchedItem?.interactive === false || isSeriesVisible(seriesLabels[0]);
+				const itemInteractive = interactive && matchedItem?.interactive !== false;
+				const handleClick = createClickHandler(seriesLabels, itemInteractive);
+				const handleKeyDown = createKeyDownHandler(seriesLabels, itemInteractive);
 				return /* @__PURE__ */ jsxs(LegendItem, {
-					className: clsx("visx-legend-item", base_legend_module_default["legend-item"], interactive && base_legend_module_default["legend-item--interactive"], !visible && base_legend_module_default["legend-item--inactive"], itemClassName),
+					className: clsx("visx-legend-item", base_legend_module_default["legend-item"], itemInteractive && base_legend_module_default["legend-item--interactive"], !visible && base_legend_module_default["legend-item--inactive"], itemClassName),
 					margin: itemMargin,
 					flexDirection: orientation === "vertical" && alignment === "end" ? "row-reverse" : itemDirection,
 					onClick: handleClick,
 					onKeyDown: handleKeyDown,
-					role: interactive ? "button" : "listitem",
-					tabIndex: interactive ? 0 : void 0,
-					"aria-pressed": interactive ? visible : void 0,
-					"aria-label": getLegendItemAriaLabel(label.text, matchedItem?.value, visible, interactive),
+					role: itemInteractive ? "button" : staticItemRole,
+					tabIndex: itemInteractive ? 0 : void 0,
+					"aria-pressed": itemInteractive ? visible : void 0,
+					"aria-label": getLegendItemAriaLabel(label.text, matchedItem?.value, visible, itemInteractive),
 					children: [items[i]?.renderGlyph ? /* @__PURE__ */ jsx("svg", {
 						width: items[i]?.glyphSize * 2,
 						height: items[i]?.glyphSize * 2,
@@ -2126,6 +2121,32 @@ function processSeriesData(seriesData, getElementStyles, showValues, withGlyph,
 	});
 }
 /**
+* Builds the static item that names the comparison overlay, styled like its first series.
+* Skipped when a comparison series already has an item of its own, so nothing is listed twice.
+* @param seriesData       - The series data to search for a comparison series
+* @param items            - The legend items already built from the series
+* @param label            - The item label
+* @param getElementStyles - Function to get element styles
+* @param legendShape      - The shape type for legend items (string literal or React component)
+* @return The legend item, or null when it would add nothing
+*/
+function buildComparisonLegendItem(seriesData, items, label, getElementStyles, legendShape) {
+	const itemLabels = new Set(items.map((item) => item.label));
+	const index = seriesData.findIndex((series) => series.options?.type === "comparison" && !itemLabels.has(series.label));
+	if (index === -1) return null;
+	const { color, shapeStyles } = getElementStyles({
+		data: seriesData[index],
+		index,
+		legendShape
+	});
+	return {
+		label,
+		color,
+		shapeStyle: shapeStyles,
+		interactive: false
+	};
+}
+/**
 * Processes point data into legend items
 * @param pointData          - The point data to process
 * @param getElementStyles   - Function to get element styles
@@ -2161,11 +2182,16 @@ function processPointData(pointData, getElementStyles, showValues, legendValueDi
 * @return Array of legend items ready for display
 */
 function useChartLegendItems(data, options = {}, legendShape) {
-	const { showValues = false, legendValueDisplay = "percentage", withGlyph = false, glyphSize = 8, collapseGroups = false, renderGlyph } = options;
+	const { showValues = false, legendValueDisplay = "percentage", withGlyph = false, glyphSize = 8, collapseGroups = false, comparisonItem = false, renderGlyph } = options;
 	const { getElementStyles } = useGlobalChartsContext();
 	return useMemo(() => {
 		if (!data || !Array.isArray(data) || data.length === 0) return [];
-		if ("data" in data[0]) return processSeriesData(data, getElementStyles, showValues, withGlyph, glyphSize, collapseGroups, renderGlyph, legendShape);
+		if ("data" in data[0]) {
+			const seriesData = data;
+			const items = processSeriesData(seriesData, getElementStyles, showValues, withGlyph, glyphSize, collapseGroups, renderGlyph, legendShape);
+			const comparison = comparisonItem ? buildComparisonLegendItem(seriesData, items, typeof comparisonItem === "string" ? comparisonItem : __("Comparison period", "jetpack-charts"), getElementStyles, legendShape) : null;
+			return comparison ? [...items, comparison] : items;
+		}
 		return processPointData(data, getElementStyles, showValues, legendValueDisplay, withGlyph, glyphSize, renderGlyph, legendShape);
 	}, [
 		data,
@@ -2175,13 +2201,17 @@ function useChartLegendItems(data, options = {}, legendShape) {
 		withGlyph,
 		glyphSize,
 		collapseGroups,
+		comparisonItem,
 		renderGlyph,
 		legendShape
 	]);
 }
 //#endregion
 //#region src/components/tooltip/base-tooltip.module.scss
-var base_tooltip_module_default = { "tooltip": "a8ccharts--zY0xG-tooltip" };
+var base_tooltip_module_default = {
+	"surface": "a8ccharts--zY0xG-surface",
+	"tooltip": "a8ccharts--zY0xG-tooltip"
+};
 //#endregion
 //#region src/components/tooltip/base-tooltip.tsx
 const DefaultTooltipContent = ({ data }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
@@ -2231,7 +2261,8 @@ const findClippingAncestor = (wrapper) => {
 /**
 * Where the box goes, in wrapper coordinates. Automatic placement flips to
 * the side that clips less, then clamps inside `bounds`; below-axis placement
-* is centered on the anchor and clamped horizontally.
+* is centered on the anchor and clamped horizontally; beside placement preserves
+* the anchor's y and only flips horizontally before bounds clamping.
 *
 * The flip measures against the visible part of the wrapper, its intersection
 * with `bounds`. Only the clamp is bound by the page: a box that fits inside the
@@ -2245,7 +2276,7 @@ const findClippingAncestor = (wrapper) => {
 * @param params.offsetTop  - Gap between the anchor and the box, vertically.
 * @param params.box        - Rendered size of the box.
 * @param params.wrapper    - The wrapper's own edges, in wrapper coordinates.
-* @param params.placement  - Fixed below-axis placement or automatic flipping.
+* @param params.placement  - Below-axis, beside without vertical flipping, or automatic flipping.
 * @param params.bounds     - Edges the box must keep inside, in wrapper coordinates.
 * @return The box's top-left corner; fixed placement preserves the axis's subpixel y.
 */
@@ -2269,7 +2300,8 @@ const getBoundedPosition = ({ left, top, offsetLeft, offsetTop, box, wrapper, bo
 	const upY = top - offsetTop - box.height;
 	const downOverflow = downY + box.height - fit.bottom;
 	const upOverflow = fit.top - upY;
-	let y = downOverflow > 0 && downOverflow > upOverflow ? upY : downY;
+	let y = top;
+	if (placement !== "beside") y = downOverflow > 0 && downOverflow > upOverflow ? upY : downY;
 	x = clamp(x, bounds.left, bounds.right, box.width);
 	y = clamp(y, bounds.top, bounds.bottom, box.height);
 	return {
@@ -2285,8 +2317,7 @@ const getBoundedPosition = ({ left, top, offsetLeft, offsetTop, box, wrapper, bo
 * alone would let the box spill into an `overflow: hidden` card and be cut off.
 *
 * Re-measures on every render, so a box whose content changes width between
-* two hovers is placed for its current size. See `getBoundedPosition` for the
-* below-axis exception.
+* two hovers is placed for its current size.
 *
 * @param props            - visx `Tooltip` props.
 * @param props.left       - Anchor x, in wrapper coordinates.
@@ -2296,7 +2327,7 @@ const getBoundedPosition = ({ left, top, offsetLeft, offsetTop, box, wrapper, bo
 * @param props.style      - Box styles; visx's defaults unless `unstyled`.
 * @param props.unstyled   - Skip `style` and leave the box bare.
 * @param props.children   - Box content.
-* @param props.placement  - Fixed below-axis placement or automatic flipping.
+* @param props.placement  - Below-axis, beside without vertical flipping, or automatic flipping.
 * @return The tooltip box.
 */
 const BoundedTooltip = ({ left = 0, top = 0, offsetLeft = DEFAULT_OFFSET, offsetTop = DEFAULT_OFFSET, style = defaultStyles, unstyled = false, children, placement = "auto", ...rest }) => {
@@ -2399,7 +2430,6 @@ const crosshairPaintProps = (props = {}) => {
 };
 const DEFAULT_GLYPH_RADIUS = 4;
 const FALLBACK_COLOR = "#222";
-const DEFAULT_TOOLTIP_Z_INDEX = 3;
 const PORTAL_OPTIONS = /* @__PURE__ */ new Set([
 	"scroll",
 	"debounce",
@@ -2427,7 +2457,7 @@ const defaultRenderGlyph$1 = ({ key, ...props }) => /* @__PURE__ */ jsx(DefaultG
 	seriesKey: key,
 	...props
 }, key);
-const XyChartTooltipContent = ({ tooltipContext, container, renderTooltip, renderGlyph = defaultRenderGlyph$1, glyphStyle, snapTooltipToDatumX = false, snapTooltipToDatumY = false, showVerticalCrosshair = false, showHorizontalCrosshair = false, showDatumGlyph = false, showSeriesGlyphs = false, verticalCrosshairStyle, horizontalCrosshairStyle, detectBounds = true, tooltipPlacement = "auto", zIndex = DEFAULT_TOOLTIP_Z_INDEX, style, ...rest }) => {
+const XyChartTooltipContent = ({ tooltipContext, container, renderTooltip, renderGlyph = defaultRenderGlyph$1, glyphStyle, snapTooltipToDatumX = false, snapTooltipToDatumY = false, showVerticalCrosshair = false, showHorizontalCrosshair = false, showDatumGlyph = false, showSeriesGlyphs = false, verticalCrosshairStyle, horizontalCrosshairStyle, detectBounds = true, tooltipPlacement = "auto", tooltipAnchorTop, zIndex = 3, style, ...rest }) => {
 	const tooltipProps = Object.fromEntries(Object.entries(rest).filter(([key]) => !PORTAL_OPTIONS.has(key)));
 	const { colorScale, theme, innerHeight = 0, innerWidth = 0, margin, xScale, yScale, dataRegistry } = useContext(DataContext) || {};
 	const tooltipContent = renderTooltip ? renderTooltip({
@@ -2482,7 +2512,7 @@ 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 === "below-axis" ? BoundedTooltip : Tooltip;
+	const TooltipComponent = detectBounds || tooltipPlacement !== "auto" ? BoundedTooltip : Tooltip;
 	const boxStyle = {
 		...defaultStyles,
 		zIndex,
@@ -2519,11 +2549,11 @@ const XyChartTooltipContent = ({ tooltipContext, container, renderTooltip, rende
 		]
 	}), container && createPortal(/* @__PURE__ */ jsx(TooltipComponent, {
 		left: tooltipLeft,
-		top: tooltipPlacement === "below-axis" ? marginTop + innerHeight + (margin?.bottom ?? 0) : tooltipTop,
+		top: tooltipPlacement === "below-axis" ? marginTop + innerHeight + (margin?.bottom ?? 0) : tooltipAnchorTop ?? tooltipTop,
 		style: boxStyle,
 		applyPositionStyle: true,
 		...tooltipProps,
-		...tooltipPlacement === "below-axis" && { placement: tooltipPlacement },
+		...tooltipPlacement !== "auto" && { placement: tooltipPlacement },
 		children: tooltipContent
 	}), container)] });
 };
@@ -2589,11 +2619,32 @@ const AccessibleTooltip = ({ renderTooltip, selectedIndex, tooltipRef, keyboardF
 		return flattened;
 	}, [series, mode]);
 	const hasKeyboardSelection = useRef(false);
+	const closeTooltipNow = useCallback(() => {
+		tooltipContext?.updateTooltip({
+			tooltipOpen: false,
+			tooltipLeft: void 0,
+			tooltipTop: void 0,
+			tooltipData: void 0
+		});
+	}, []);
+	const chartId = useContext(ChartInstanceContext)?.chartId;
+	const { getHiddenSeries } = useGlobalChartsContext();
+	const hiddenSeriesKey = chartId ? JSON.stringify([...getHiddenSeries(chartId)].sort()) : void 0;
+	const lastHiddenSeriesKey = useRef(hiddenSeriesKey);
+	useEffect(() => {
+		const changed = lastHiddenSeriesKey.current !== hiddenSeriesKey;
+		lastHiddenSeriesKey.current = hiddenSeriesKey;
+		if (changed && selectedIndex === void 0) closeTooltipNow();
+	}, [
+		hiddenSeriesKey,
+		selectedIndex,
+		closeTooltipNow
+	]);
 	useEffect(() => {
 		if (selectedIndex === void 0) {
 			if (hasKeyboardSelection.current) {
 				hasKeyboardSelection.current = false;
-				tooltipContext?.hideTooltip();
+				closeTooltipNow();
 			}
 			return;
 		}
@@ -2614,7 +2665,7 @@ const AccessibleTooltip = ({ renderTooltip, selectedIndex, tooltipRef, keyboardF
 				tooltipContext?.showTooltip({
 					datum: tooltipItem.datum,
 					key: tooltipItem.seriesLabel,
-					index: tooltipItem.seriesIndex
+					index: tooltipItem.dataPointIndex
 				});
 			}
 		}
@@ -2662,14 +2713,43 @@ const AccessibleTooltip = ({ renderTooltip, selectedIndex, tooltipRef, keyboardF
 		renderTooltip: focusableRenderTooltip
 	});
 };
-const useKeyboardNavigation = ({ selectedIndex, setSelectedIndex, isNavigating, setIsNavigating, chartRef, totalPoints, onActivate, preventTooltipScroll = false }) => {
+const useKeyboardNavigation = ({ selectedIndex, setSelectedIndex, isNavigating, setIsNavigating, chartRef, totalPoints, onActivate, preventTooltipScroll = false, visibleSeriesKey }) => {
+	const getChartRoot = useCallback(() => chartRef.current?.closest("[role=\"grid\"]") ?? chartRef.current, [chartRef]);
+	const focusWithoutScrollIfNeeded = useCallback((element) => {
+		if (preventTooltipScroll) element?.focus({ preventScroll: true });
+		else element?.focus();
+	}, [preventTooltipScroll]);
+	const tooltipRef = useCallback((element) => {
+		if (element && selectedIndex !== void 0) focusWithoutScrollIfNeeded(element);
+	}, [focusWithoutScrollIfNeeded, selectedIndex]);
+	const previousTotalPoints = useRef(totalPoints);
+	const previousVisibleSeriesKey = useRef(visibleSeriesKey);
+	useEffect(() => {
+		const countChanged = previousTotalPoints.current !== totalPoints;
+		const seriesChanged = previousVisibleSeriesKey.current !== visibleSeriesKey;
+		previousTotalPoints.current = totalPoints;
+		previousVisibleSeriesKey.current = visibleSeriesKey;
+		if (!countChanged && !seriesChanged || selectedIndex === void 0) return;
+		const { activeElement } = document;
+		const focusIsInChart = activeElement !== null && !!getChartRoot()?.contains(activeElement);
+		if (totalPoints === 0 || !focusIsInChart || !countChanged) {
+			setSelectedIndex(void 0);
+			setIsNavigating(false);
+			if (focusIsInChart) focusWithoutScrollIfNeeded(getChartRoot());
+			return;
+		}
+		setSelectedIndex(Math.min(selectedIndex, totalPoints - 1));
+	}, [
+		selectedIndex,
+		totalPoints,
+		visibleSeriesKey,
+		setSelectedIndex,
+		setIsNavigating,
+		getChartRoot,
+		focusWithoutScrollIfNeeded
+	]);
 	return {
-		tooltipRef: useCallback((element) => {
-			if (element && selectedIndex !== void 0) {
-				if (preventTooltipScroll) element.focus({ preventScroll: true });
-				else element.focus();
-			}
-		}, [preventTooltipScroll, selectedIndex]),
+		tooltipRef,
 		onChartFocus: useCallback((event) => {
 			if (event.currentTarget.contains(event.relatedTarget)) return;
 			if (!isNavigating && selectedIndex !== void 0) setSelectedIndex(0);
@@ -2682,44 +2762,35 @@ const useKeyboardNavigation = ({ selectedIndex, setSelectedIndex, isNavigating,
 			setIsNavigating(false);
 		}, [setIsNavigating]),
 		onChartKeyDown: useCallback((event) => {
-			if (totalPoints === 0) return;
-			const focusChart = () => {
-				if (preventTooltipScroll) chartRef.current?.focus({ preventScroll: true });
-				else chartRef.current?.focus();
-			};
-			if (event.key === "Tab") {
-				focusChart();
+			if (event.key === "Tab" || event.key === "Escape") {
+				if (event.key === "Escape" && selectedIndex !== void 0) event.preventDefault();
+				focusWithoutScrollIfNeeded(getChartRoot());
 				setSelectedIndex(void 0);
 				setIsNavigating(false);
 				return;
 			}
+			if (totalPoints === 0) return;
 			const currentSelectedIndex = selectedIndex === void 0 ? -1 : selectedIndex;
-			if (currentSelectedIndex + 1 >= totalPoints && ["ArrowRight"].includes(event.key)) {
-				focusChart();
-				setSelectedIndex(void 0);
-				setIsNavigating(false);
-				return;
-			}
-			event.preventDefault();
-			if (["ArrowRight"].includes(event.key)) {
+			if (event.key === "ArrowRight") {
+				event.preventDefault();
 				setIsNavigating(true);
-				setSelectedIndex((currentSelectedIndex + 1) % totalPoints);
-			} else if (["ArrowLeft"].includes(event.key)) {
+				setSelectedIndex(Math.min(currentSelectedIndex + 1, totalPoints - 1));
+			} else if (event.key === "ArrowLeft") {
+				event.preventDefault();
 				setIsNavigating(true);
-				setSelectedIndex((currentSelectedIndex - 1 + totalPoints) % totalPoints);
-			} else if (event.key === "Escape") {
-				setSelectedIndex(void 0);
-				setIsNavigating(false);
-				focusChart();
-			} else if ((event.key === "Enter" || event.key === " ") && selectedIndex !== void 0) onActivate?.(selectedIndex);
+				setSelectedIndex(Math.max(currentSelectedIndex - 1, 0));
+			} else if ((event.key === "Enter" || event.key === " ") && selectedIndex !== void 0) {
+				event.preventDefault();
+				onActivate?.(selectedIndex);
+			}
 		}, [
 			totalPoints,
 			selectedIndex,
 			setSelectedIndex,
 			setIsNavigating,
-			chartRef,
-			onActivate,
-			preventTooltipScroll
+			getChartRoot,
+			focusWithoutScrollIfNeeded,
+			onActivate
 		])
 	};
 };
@@ -2917,6 +2988,31 @@ const DefaultGlyph = (props) => {
 	});
 };
 //#endregion
+//#region src/charts/private/readings.ts
+/**
+* Whether a value is a reading a scale can place.
+*
+* @param value - The point's value.
+* @return True for a finite number.
+*/
+const isReading = (value) => typeof value === "number" && Number.isFinite(value);
+/**
+* Whether a data point's value cannot be drawn.
+*
+* @param value                - The point's value.
+* @param options              - Validation options.
+* @param options.allowMissing - Whether `null` is a bucket with no reading rather than a fault.
+* @return True when the value is invalid.
+*/
+const isInvalidReading = (value, { allowMissing }) => value === null ? !allowMissing : value === void 0 || isNaN(value);
+/**
+* Formats a reading for a tooltip.
+*
+* @param value - The reading, or null when the bucket has none.
+* @return The formatted value.
+*/
+const formatReading = (value) => value == null ? __("No data", "jetpack-charts") : formatNumber(value);
+//#endregion
 //#region src/charts/private/center/center.module.scss
 var center_module_default = { "center": "a8ccharts-w3qxlG-center" };
 //#endregion
@@ -3289,6 +3385,54 @@ const buildTimeAxisOptions = ({ dataSorted, width, axisOptions, scaleDomain, zoo
 	};
 };
 //#endregion
+//#region src/charts/private/whole-number-ticks.tsx
+/**
+* Whether every reading in the series is a whole number.
+*
+* @param series - The series visx renders.
+* @return True when at least one reading exists and none has a fraction.
+*/
+const hasOnlyWholeNumbers = (series) => {
+	let sawReading = false;
+	for (const { data } of series) for (const point of data) {
+		const value = point?.value;
+		if (!isReading(value)) continue;
+		if (!Number.isInteger(value)) return false;
+		sawReading = true;
+	}
+	return sawReading;
+};
+/**
+* The scale's ticks with the fractional ones dropped.
+*
+* d3 steps by 1, 2 or 5 times a power of ten, so every whole number inside the domain is one of its ticks.
+*
+* @param scale - The value scale visx built.
+* @param count - Ticks to ask the scale for; undefined uses the scale's own default, as visx does.
+* @return Whole-number ticks, or undefined when visx's own ticks need no change.
+*/
+const getWholeNumberTickValues = (scale, count) => {
+	const ticks = scale?.ticks?.(count);
+	if (!ticks?.every((tick) => typeof tick === "number")) return;
+	const whole = ticks.filter((tick) => Number.isInteger(tick));
+	return whole.length > 1 && whole.length < ticks.length ? whole : void 0;
+};
+/**
+* Hands its children the whole-number ticks of the chart's value scale.
+*
+* @param props          - Component props.
+* @param props.axis     - Which scale carries the values.
+* @param props.numTicks - Ticks to ask the scale for.
+* @param props.enabled  - Whether the plotted values are all whole numbers and the caller pinned neither the ticks nor the value domain.
+* @param props.children - Renders the axis and grid with the tick values.
+* @return The rendered children.
+*/
+const WholeNumberTicks = ({ axis, numTicks, enabled, children }) => {
+	const { xScale, yScale } = useContext(DataContext);
+	const tickValues = enabled ? getWholeNumberTickValues(axis === "x" ? xScale : yScale, numTicks) : void 0;
+	return /* @__PURE__ */ jsx(Fragment$1, { children: children(tickValues) });
+};
+//#endregion
 //#region src/charts/private/with-responsive/with-responsive.module.scss
 var with_responsive_module_default = {
 	"container": "a8ccharts-sP1gHa-container",
@@ -3955,11 +4099,15 @@ const toNumber$1 = (val) => {
 const LineChartGlyph = ({ data, index, color, glyphStyle, renderGlyph, accessors, position }) => {
 	const { xScale, yScale } = useContext(DataContext) || {};
 	if (!xScale || !yScale) return null;
-	if (data.data.length === 0) return null;
-	const point = position === "start" ? data.data[0] : data.data[data.data.length - 1];
+	const hasFiniteY = (datum) => {
+		const scaledY = yScale(accessors.yAccessor(datum));
+		return typeof scaledY === "number" && Number.isFinite(scaledY);
+	};
+	const point = position === "start" ? data.data.find(hasFiniteY) : data.data.findLast(hasFiniteY);
+	if (!point) return null;
 	const x = xScale(accessors.xAccessor(point));
 	const y = yScale(accessors.yAccessor(point));
-	if (typeof x !== "number" || typeof y !== "number") return null;
+	if (typeof x !== "number" || typeof y !== "number" || !Number.isFinite(x) || !Number.isFinite(y)) return null;
 	const size = Math.max(0, toNumber$1(glyphStyle?.radius) ?? 4);
 	return renderGlyph({
 		key: `${position}-glyph-${data.label}`,
@@ -3974,6 +4122,106 @@ const LineChartGlyph = ({ data, index, color, glyphStyle, renderGlyph, accessors
 	});
 };
 //#endregion
+//#region src/charts/line-chart/private/nearest-pointer-events.tsx
+/**
+* Find the datum nearest a pointer along x, in one series sorted by x.
+*
+* @param data      - The series' registered data, in ascending x order.
+* @param xAccessor - Reads a datum's x value.
+* @param xScale    - The chart's x scale.
+* @param x         - Pointer x in SVG coordinates.
+* @return Index of the nearest datum and its distance, or index -1 when none has a position.
+*/
+function nearestByX(data, xAccessor, xScale, x) {
+	return (typeof xScale.invert === "function" ? [bisector(xAccessor).left(data, xScale.invert(x))].flatMap((index) => [index - 1, index]) : data.map((_datum, index) => index)).filter((index) => index >= 0 && index < data.length).reduce((best, index) => {
+		const distance = Math.abs(Number(xScale(xAccessor(data[index]))) - x);
+		return distance < best.distance ? {
+			index,
+			distance
+		} : best;
+	}, {
+		index: -1,
+		distance: Infinity
+	});
+}
+/**
+* Pick the candidate to report: the closest placed reading, else the closest bucket with no reading along x.
+*
+* @param candidates - One candidate per series.
+* @return The chosen candidate's params, or undefined when there are none.
+*/
+function pickNearest(candidates) {
+	const placed = candidates.map(({ params }) => params).filter((params) => Number.isFinite(params.distanceY));
+	const missing = candidates.filter(({ isMissing }) => isMissing).map(({ params }) => params);
+	const distance = (params) => placed.length ? Math.hypot(params.distanceX ?? 0, params.distanceY ?? 0) : params.distanceX ?? 0;
+	return (placed.length ? placed : missing).reduce((best, params) => !best || distance(params) < distance(best) ? params : best, void 0);
+}
+/**
+* Report pointer events at the nearest datum, including a bucket with no reading.
+*
+* visx's own nearest search measures y distance too, which is NaN for a null value, so a pointer
+* over a bucket where no series has a reading fires no event at all.
+*
+* @param props               - Handlers to call.
+* @param props.onPointerDown - Receives the nearest datum on pointer down.
+* @param props.onPointerMove - Receives the nearest datum on pointer move.
+* @param props.onPointerUp   - Receives the nearest datum on pointer up.
+* @return No visual content.
+*/
+function NearestPointerEvents({ onPointerDown, onPointerMove, onPointerUp }) {
+	const { xScale, yScale, dataRegistry } = useContext(DataContext);
+	const findNearest = useCallback((params) => {
+		const point = params?.svgPoint;
+		if (!point || !xScale || !yScale || !dataRegistry) return;
+		const candidates = [];
+		for (const key of dataRegistry.keys()) {
+			const entry = dataRegistry.get(key);
+			if (!entry) continue;
+			const { index, distance } = nearestByX(entry.data, entry.xAccessor, xScale, point.x);
+			if (index < 0) continue;
+			const datum = entry.data[index];
+			const value = entry.yAccessor(datum);
+			candidates.push({
+				params: {
+					event: params.event,
+					svgPoint: point,
+					key,
+					datum,
+					index,
+					distanceX: distance,
+					distanceY: Math.abs(Number(yScale(value)) - point.y)
+				},
+				isMissing: value == null
+			});
+		}
+		return pickNearest(candidates);
+	}, [
+		xScale,
+		yScale,
+		dataRegistry
+	]);
+	const handlers = useMemo(() => {
+		const report = (handler) => handler && ((params) => {
+			const nearest = findNearest(params);
+			if (nearest) handler(nearest);
+		});
+		return {
+			pointerdown: report(onPointerDown),
+			pointermove: report(onPointerMove),
+			pointerup: report(onPointerUp)
+		};
+	}, [
+		findNearest,
+		onPointerDown,
+		onPointerMove,
+		onPointerUp
+	]);
+	useEventEmitter("pointerdown", handlers.pointerdown);
+	useEventEmitter("pointermove", handlers.pointermove);
+	useEventEmitter("pointerup", handlers.pointerup);
+	return null;
+}
+//#endregion
 //#region src/charts/line-chart/line-chart.tsx
 const defaultRenderGlyph = (props) => {
 	return /* @__PURE__ */ createElement(DefaultGlyph, {
@@ -4017,8 +4265,13 @@ const renderDefaultTooltip = (params, contentStyle) => {
 	if (!nearestDatum) return null;
 	const tooltipPoints = Object.entries(tooltipData?.datumByKey || {}).map(([key, { datum }]) => ({
 		key,
-		value: datum.value
-	})).sort((a, b) => b.value - a.value);
+		value: datum.value ?? null
+	})).sort((a, b) => {
+		if (a.value === null && b.value === null) return 0;
+		if (a.value === null) return 1;
+		if (b.value === null) return -1;
+		return b.value - a.value;
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: line_chart_module_default["line-chart__tooltip"],
 		style: contentStyle,
@@ -4038,16 +4291,23 @@ const renderDefaultTooltip = (params, contentStyle) => {
 				children: [point.key, ":"]
 			}), /* @__PURE__ */ jsx("span", {
 				className: line_chart_module_default["line-chart__tooltip-value"],
-				children: formatNumber(point.value)
+				children: formatReading(point.value)
 			})]
 		}, point.key))]
 	});
 };
 const validateData$4 = (data) => {
-	if (!data?.length) return "No data available";
-	if (data.some((series) => series.data.some((point) => isNaN(point.value) || point.value === null || point.value === void 0 || "date" in point && point.date && isNaN(point.date.getTime())))) return "Invalid data";
+	if (!data?.length) return __("No data available", "jetpack-charts");
+	if (data.some((series) => series.data.some((point) => isInvalidReading(point.value, { allowMissing: true }) || "date" in point && point.date && isNaN(point.date.getTime())))) return __("Invalid data", "jetpack-charts");
 	return null;
 };
+const getFallbackYDomain = (readingExtent, isLogScale) => {
+	const emptyDomain = isLogScale ? [1, 10] : [0, 1];
+	if (!readingExtent) return emptyDomain;
+	const [min, max] = readingExtent;
+	if (min !== max || isLogScale) return;
+	return min === 0 ? emptyDomain : [Math.min(0, min), Math.max(0, max)];
+};
 const LineChartScalesRef = ({ chartRef, width, height, margin }) => {
 	const context = useContext(DataContext);
 	useImperativeHandle(chartRef, () => ({
@@ -4074,6 +4334,7 @@ const LineChartScalesRef = ({ chartRef, width, height, margin }) => {
 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 legendInteractive = legend.interactive ?? false;
 	const legendCollapseGroups = legend.collapseGroups ?? false;
+	const legendComparisonItem = legend.comparisonItem ?? false;
 	const legendShape = legend.shape ?? "line";
 	const legendPosition = legend.position ?? "bottom";
 	const formatting = useChartFormatting();
@@ -4120,19 +4381,32 @@ const LineChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 	const allSeriesHidden = useMemo(() => {
 		return seriesWithVisibility.every(({ isVisible }) => !isVisible);
 	}, [seriesWithVisibility]);
-	const stableYDomain = useMemo(() => {
-		if (rescaleYOnVisibilityChange) return;
+	const yDomain = useMemo(() => {
+		const includeZero = options?.yScale?.zero === true && scaleCanBeZeroed({ type: options.yScale.type ?? "linear" });
+		if (rescaleYOnVisibilityChange && !includeZero) return;
 		let min = Infinity;
 		let max = -Infinity;
-		for (const series of dataSorted) for (const point of series.data ?? []) {
-			const value = point?.value;
-			if (typeof value === "number" && Number.isFinite(value)) {
-				min = Math.min(min, value);
-				max = Math.max(max, value);
+		for (const series of dataSorted) {
+			if (rescaleYOnVisibilityChange && !isSeriesVisible(series.label)) continue;
+			for (const point of series.data ?? []) {
+				const value = point?.value;
+				if (isReading(value)) {
+					min = Math.min(min, value);
+					max = Math.max(max, value);
+				}
 			}
 		}
+		if (includeZero) {
+			if (min === Infinity) return;
+			return max === 0 && min === 0 ? [0, 1] : [Math.min(0, min), Math.max(0, max)];
+		}
 		return min < max ? [min, max] : void 0;
-	}, [rescaleYOnVisibilityChange, dataSorted]);
+	}, [
+		rescaleYOnVisibilityChange,
+		dataSorted,
+		isSeriesVisible,
+		options?.yScale
+	]);
 	const activateSelectedPoint = useCallback((index) => {
 		const series = dataSorted[0];
 		const datum = series?.data[index];
@@ -4152,7 +4426,24 @@ const LineChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 		onActivate: activateSelectedPoint,
 		preventTooltipScroll: tooltipPlacement === "below-axis"
 	});
+	const visibleReadingExtent = useMemo(() => {
+		let min = Infinity;
+		let max = -Infinity;
+		for (const series of dataSorted) {
+			if (!isSeriesVisible(series.label)) continue;
+			for (const point of series.data) {
+				const value = point?.value;
+				if (isReading(value)) {
+					min = Math.min(min, value);
+					max = Math.max(max, value);
+				}
+			}
+		}
+		return min <= max ? [min, max] : void 0;
+	}, [dataSorted, isSeriesVisible]);
+	const hasWholeNumberValues = useMemo(() => hasOnlyWholeNumbers(dataSorted.filter((series) => isSeriesVisible(series.label))), [dataSorted, isSeriesVisible]);
 	const chartOptions = useMemo(() => {
+		const fallbackYDomain = getFallbackYDomain(visibleReadingExtent, options?.yScale?.type === "log");
 		return {
 			axis: {
 				x: buildTimeAxisOptions({
@@ -4181,7 +4472,8 @@ const LineChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 				type: "linear",
 				nice: true,
 				zero: false,
-				...stableYDomain ? { domain: stableYDomain } : {},
+				...fallbackYDomain ? { domain: fallbackYDomain } : {},
+				...yDomain ? { domain: yDomain } : {},
 				...options?.yScale
 			}
 		};
@@ -4190,7 +4482,8 @@ const LineChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 		dataSorted,
 		width,
 		zoom.domain,
-		stableYDomain,
+		yDomain,
+		visibleReadingExtent,
 		formatting,
 		isSeriesVisible
 	]);
@@ -4225,11 +4518,13 @@ const LineChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 		withGlyph: withLegendGlyph,
 		glyphSize: Math.max(0, toNumber(glyphStyle?.radius) ?? 4),
 		collapseGroups: legendCollapseGroups,
+		comparisonItem: legendComparisonItem,
 		renderGlyph
 	}), [
 		withLegendGlyph,
 		glyphStyle?.radius,
 		legendCollapseGroups,
+		legendComparisonItem,
 		renderGlyph
 	]), legendShape);
 	const chartMetadata = useMemo(() => ({
@@ -4341,18 +4636,26 @@ const LineChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 							},
 							xScale: chartOptions.xScale,
 							yScale: chartOptions.yScale,
-							onPointerDown: zoom.handlers.onPointerDown,
-							onPointerUp: zoom.handlers.onPointerUp,
-							onPointerMove: zoom.handlers.onPointerMove,
 							onPointerOut,
-							pointerEventsDataKey: "nearest",
 							children: [
-								!allSeriesHidden && gridVisibility !== "none" && /* @__PURE__ */ jsx(Grid, {
-									columns: false,
-									numTicks: 4
+								/* @__PURE__ */ jsx(NearestPointerEvents, { ...zoom.handlers }),
+								/* @__PURE__ */ jsx(WholeNumberTicks, {
+									axis: "y",
+									numTicks: chartOptions.axis.y.numTicks,
+									enabled: hasWholeNumberValues && !chartOptions.axis.y.tickValues && !options?.yScale?.domain,
+									children: (tickValues) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+										!allSeriesHidden && gridVisibility !== "none" && /* @__PURE__ */ jsx(Grid, {
+											columns: false,
+											numTicks: chartOptions.axis.y.numTicks,
+											tickValues: tickValues ?? chartOptions.axis.y.tickValues
+										}),
+										!allSeriesHidden && chartOptions.axis.x.display && /* @__PURE__ */ jsx(Axis, { ...chartOptions.axis.x }),
+										!allSeriesHidden && chartOptions.axis.y.display && /* @__PURE__ */ jsx(Axis, {
+											...chartOptions.axis.y,
+											...tickValues ? { tickValues } : {}
+										})
+									] })
 								}),
-								!allSeriesHidden && chartOptions.axis.x.display && /* @__PURE__ */ jsx(Axis, { ...chartOptions.axis.x }),
-								!allSeriesHidden && chartOptions.axis.y.display && /* @__PURE__ */ jsx(Axis, { ...chartOptions.axis.y }),
 								allSeriesHidden ? /* @__PURE__ */ jsx(SvgEmptyState, {
 									x: width / 2,
 									y: chartHeight / 2,
@@ -4493,7 +4796,7 @@ var area_chart_module_default = {
 const validateData$3 = (data) => {
 	if (!data?.length) return __("No data available", "jetpack-charts");
 	if (data.some((series) => !series.data?.length)) return __("No data available", "jetpack-charts");
-	if (data.some((series) => series.data.some((point) => isNaN(point.value) || point.value === null || point.value === void 0 || "date" in point && point.date && isNaN(point.date.getTime())))) return __("Invalid data", "jetpack-charts");
+	if (data.some((series) => series.data.some((point) => isInvalidReading(point.value, { allowMissing: false }) || "date" in point && point.date && isNaN(point.date.getTime())))) return __("Invalid data", "jetpack-charts");
 	return null;
 };
 //#endregion
@@ -4609,6 +4912,12 @@ const AreaChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 		}));
 	}, [dataSorted, hiddenSeries]);
 	const allSeriesHidden = useMemo(() => seriesWithVisibility.every(({ isVisible }) => !isVisible), [seriesWithVisibility]);
+	const hasWholeNumberValues = useMemo(() => (!stacked || stackOffset === "none") && hasOnlyWholeNumbers(dataSorted.filter((series) => isSeriesVisible(series.label))), [
+		dataSorted,
+		isSeriesVisible,
+		stacked,
+		stackOffset
+	]);
 	const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation({
 		selectedIndex,
 		setSelectedIndex,
@@ -4701,8 +5010,9 @@ const AreaChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 	const legendItems = useChartLegendItems(dataSorted, useMemo(() => ({
 		withGlyph: false,
 		glyphSize: 0,
-		collapseGroups: legend.collapseGroups ?? false
-	}), [legend.collapseGroups]), legendShape);
+		collapseGroups: legend.collapseGroups ?? false,
+		comparisonItem: legend.comparisonItem ?? false
+	}), [legend.collapseGroups, legend.comparisonItem]), legendShape);
 	const chartMetadata = useMemo(() => ({
 		stacked,
 		stackOffset,
@@ -4852,12 +5162,23 @@ const AreaChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 							onPointerOut,
 							pointerEventsDataKey: "nearest",
 							children: [
-								!allSeriesHidden && gridVisibility !== "none" && /* @__PURE__ */ jsx(Grid, {
-									columns: false,
-									numTicks: 4
+								/* @__PURE__ */ jsx(WholeNumberTicks, {
+									axis: "y",
+									numTicks: chartOptions.axis.y.numTicks,
+									enabled: hasWholeNumberValues && !chartOptions.axis.y.tickValues && !options?.yScale?.domain,
+									children: (tickValues) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+										!allSeriesHidden && gridVisibility !== "none" && /* @__PURE__ */ jsx(Grid, {
+											columns: false,
+											numTicks: chartOptions.axis.y.numTicks,
+											tickValues: tickValues ?? chartOptions.axis.y.tickValues
+										}),
+										!allSeriesHidden && chartOptions.axis.x.display && /* @__PURE__ */ jsx(Axis, { ...chartOptions.axis.x }),
+										!allSeriesHidden && chartOptions.axis.y.display && /* @__PURE__ */ jsx(Axis, {
+											...chartOptions.axis.y,
+											...tickValues ? { tickValues } : {}
+										})
+									] })
 								}),
-								!allSeriesHidden && chartOptions.axis.x.display && /* @__PURE__ */ jsx(Axis, { ...chartOptions.axis.x }),
-								!allSeriesHidden && chartOptions.axis.y.display && /* @__PURE__ */ jsx(Axis, { ...chartOptions.axis.y }),
 								allSeriesHidden ? /* @__PURE__ */ jsx(SvgEmptyState, {
 									x: width / 2,
 									y: chartHeight / 2,
@@ -5046,6 +5367,65 @@ const createTruncatedTickComponent = (axis) => (props) => {
 const TruncatedXTickComponent = createTruncatedTickComponent("x");
 const TruncatedYTickComponent = createTruncatedTickComponent("y");
 //#endregion
+//#region src/charts/bar-chart/private/value-domain.ts
+/** Domain for a value axis that has nothing to scale, so its ticks still read 0 to 1. */
+const EMPTY_DOMAIN = [0, 1];
+/**
+* The value a bar is drawn at, preferring `visualValue` so a zero still shows a sliver.
+*
+* A missing reading is NaN, not null: `ComparisonBars` coerces the value with `Number()`,
+* which turns null into 0 and would draw a comparison shadow at the baseline.
+*
+* @param point - A data point handed to visx.
+* @return The bar value, or NaN when the bucket has no reading.
+*/
+const getBarValue = (point) => {
+	const enhanced = point;
+	return (enhanced?.visualValue !== void 0 ? enhanced.visualValue : point?.value) ?? NaN;
+};
+/**
+* Whether visx renders a bar for a point.
+*
+* @param point - A data point handed to visx.
+* @return True when the point has a finite bar value.
+*/
+const isBarRendered = (point) => Number.isFinite(getBarValue(point));
+/**
+* How many bars visx renders for a list of points.
+*
+* @param points - Data points handed to visx.
+* @return The number of points that get a bar.
+*/
+const countRenderedBars = (points) => points.filter(isBarRendered).length;
+/**
+* An explicit domain for the value scale, or null to let visx fit one to the data.
+*
+* Zero goes into the domain here rather than through the scale's `zero` flag: visx applies
+* `nice` before `zero`, which would leave the axis topping out at a raw maximum.
+*
+* @param data             - Every series handed to the chart.
+* @param includeZero      - Whether the domain must span zero.
+* @param isSeriesRendered - Whether visx mounts a series, i.e. the legend shows it.
+* @return Value domain, or null when visx should fit its own.
+*/
+const getValueScaleDomain = (data, includeZero, isSeriesRendered) => {
+	let min = Infinity;
+	let max = -Infinity;
+	for (const series of data) {
+		if (!isSeriesRendered(series)) continue;
+		for (const point of series.data) {
+			const value = getBarValue(point);
+			if (!Number.isFinite(value)) continue;
+			min = Math.min(min, value);
+			max = Math.max(max, value);
+		}
+	}
+	if (min === Infinity) return [...EMPTY_DOMAIN];
+	if (min === max) return min === 0 ? [...EMPTY_DOMAIN] : [Math.min(0, min), Math.max(0, max)];
+	if (includeZero) return [Math.min(0, min), Math.max(0, max)];
+	return null;
+};
+//#endregion
 //#region src/charts/bar-chart/private/use-bar-chart-options.ts
 /** Outer padding of the category band scale (space at the chart edges). */
 const BASE_BAND_PADDING = .2;
@@ -5170,10 +5550,6 @@ function useBarChartOptions(data, horizontal, options = {}, isSeriesRendered = A
 		const tooltipDatumFormatter = hasLabels ? labelFormatter : byBucket(getTooltipFormatter(data, tickResolution, formatting));
 		const valueFormatter = formatNumberCompact;
 		const bandDomain = timeTickFormatter ? getBandDomain(data, isSeriesRendered) : null;
-		const valueAccessor = (d) => {
-			const enhancedPoint = d;
-			return enhancedPoint?.visualValue !== void 0 ? enhancedPoint.visualValue : d?.value;
-		};
 		return {
 			timeAxis: bandDomain && timeTickFormatter && {
 				domain: bandDomain,
@@ -5184,7 +5560,7 @@ function useBarChartOptions(data, horizontal, options = {}, isSeriesRendered = A
 				yTickFormat: valueFormatter,
 				tooltipLabelFormatter: tooltipDatumFormatter,
 				xAccessor: bucketAccessor,
-				yAccessor: valueAccessor,
+				yAccessor: getBarValue,
 				gridVisibility: "x",
 				xScale: bandScale,
 				yScale: linearScale
@@ -5193,7 +5569,7 @@ function useBarChartOptions(data, horizontal, options = {}, isSeriesRendered = A
 				xTickFormat: valueFormatter,
 				yTickFormat: labelFormatter,
 				tooltipLabelFormatter: tooltipDatumFormatter,
-				xAccessor: valueAccessor,
+				xAccessor: getBarValue,
 				yAccessor: bucketAccessor,
 				gridVisibility: "y",
 				xScale: linearScale,
@@ -5208,20 +5584,10 @@ function useBarChartOptions(data, horizontal, options = {}, isSeriesRendered = A
 	]);
 	return useMemo(() => {
 		const { xTickFormat: defaultXTickFormat, yTickFormat: defaultYTickFormat, tooltipLabelFormatter: defaultTooltipLabelFormatter, xAccessor, yAccessor, gridVisibility, xScale: baseXScale, yScale: baseYScale } = defaultOptions[horizontal ? "horizontal" : "vertical"];
-		let valueScaleDomainOverride = {};
-		if (data.some((s) => s.options?.type === "comparison")) {
-			if (!(!horizontal ? stableOptions.yScale?.domain : stableOptions.xScale?.domain)) {
-				const allValues = [];
-				data.forEach((series) => {
-					series.data.forEach((d) => {
-						const enhanced = d;
-						const v = enhanced.visualValue !== void 0 ? enhanced.visualValue : d.value;
-						if (typeof v === "number" && Number.isFinite(v)) allValues.push(v);
-					});
-				});
-				if (allValues.length > 0) valueScaleDomainOverride = { domain: [Math.min(0, ...allValues), Math.max(0, ...allValues)] };
-			}
-		}
+		const valueScaleOptions = horizontal ? stableOptions.xScale : stableOptions.yScale;
+		const includeZero = data.some((s) => s.options?.type === "comparison") || valueScaleOptions?.zero !== false;
+		const domain = valueScaleOptions?.domain ? null : getValueScaleDomain(data, includeZero, isSeriesRendered);
+		const valueScaleDomainOverride = domain ? { domain } : {};
 		const xScale = {
 			...baseXScale,
 			...stableOptions.xScale || {},
@@ -5272,10 +5638,25 @@ function useBarChartOptions(data, horizontal, options = {}, isSeriesRendered = A
 		axisConfig,
 		stableOptions,
 		horizontal,
-		data
+		data,
+		isSeriesRendered
 	]);
 }
 //#endregion
+//#region src/charts/bar-chart/private/band-scale.ts
+/**
+* Match the inner slot scale used by visx BarGroup.
+* @param keys      - Visible primary series keys.
+* @param bandwidth - Category band width.
+* @param padding   - Padding between slots.
+* @return The grouped bar scale.
+*/
+const createGroupScale = (keys, bandwidth, padding) => scaleBand({
+	domain: keys,
+	range: [0, bandwidth],
+	padding
+});
+//#endregion
 //#region src/charts/bar-chart/private/comparison-bars-geometry.ts
 /**
 * Output position of a value scale's baseline: zero if in-domain, else the
@@ -5348,11 +5729,7 @@ const ComparisonBars = ({ comparisonEntries, primaryKeys, groupPadding, horizont
 	const valueScale = horizontal ? xScale : yScale;
 	const bandwidth = bandScale.bandwidth ? bandScale.bandwidth() : 0;
 	if (!bandwidth) return null;
-	const groupScale = scaleBand({
-		domain: primaryKeys,
-		range: [0, bandwidth],
-		padding: groupPadding
-	});
+	const groupScale = createGroupScale(primaryKeys, bandwidth, groupPadding);
 	const slotThickness = groupScale.bandwidth();
 	const baseline = getValueScaleBaseline(valueScale);
 	const bandAccessor = horizontal ? yAccessor : xAccessor;
@@ -5404,10 +5781,169 @@ const ComparisonBars = ({ comparisonEntries, primaryKeys, groupPadding, horizont
 	});
 };
 //#endregion
+//#region src/charts/bar-chart/private/band-highlight.tsx
+/**
+* Render and report the active band using the chart’s registered scales.
+* @param root0            - Highlight options.
+* @param root0.visible    - Whether to paint the band.
+* @param root0.horizontal - Whether categories run vertically.
+* @param root0.onChange   - Receives selected band geometry.
+* @return The optional band highlight.
+*/
+function BandHighlight({ visible, horizontal, onChange }) {
+	const { xScale, yScale, dataRegistry, margin, innerWidth, innerHeight } = useContext(DataContext);
+	const { tooltipOpen, tooltipData } = useContext(TooltipContext);
+	const nearest = tooltipData?.nearestDatum;
+	const selection = useMemo(() => {
+		if (!tooltipOpen || !nearest) return null;
+		const scale = horizontal ? yScale : xScale;
+		const entry = dataRegistry?.get(nearest.key);
+		const accessor = horizontal ? entry?.yAccessor : entry?.xAccessor;
+		if (!scale?.bandwidth || !accessor) return null;
+		const position = scale(accessor(nearest.datum));
+		if (position === void 0 || !Number.isFinite(position)) return null;
+		return {
+			datum: nearest.datum,
+			key: nearest.key,
+			index: nearest.index,
+			x: horizontal ? margin?.left ?? 0 : position,
+			y: horizontal ? position : margin?.top ?? 0,
+			width: horizontal ? innerWidth : scale.bandwidth(),
+			height: horizontal ? scale.bandwidth() : innerHeight
+		};
+	}, [
+		tooltipOpen,
+		nearest,
+		horizontal,
+		xScale,
+		yScale,
+		dataRegistry,
+		margin,
+		innerWidth,
+		innerHeight
+	]);
+	const stableSelection = useDeepMemo(selection);
+	const onChangeRef = useRef(onChange);
+	onChangeRef.current = onChange;
+	useEffect(() => {
+		onChangeRef.current?.(stableSelection);
+	}, [stableSelection]);
+	useEffect(() => () => onChangeRef.current?.(null), []);
+	if (!visible || !selection) return null;
+	const { x, y, width, height } = selection;
+	return /* @__PURE__ */ jsx("rect", {
+		x,
+		y,
+		width,
+		height,
+		pointerEvents: "none",
+		fill: CATALOG_POINTERS.surfaceSecondary
+	});
+}
+//#endregion
+//#region src/charts/bar-chart/private/band-tooltip.tsx
+/**
+* Find a category by its painted center, including outer padding and reversed ranges.
+* @param data     - Registered series points.
+* @param accessor - Category accessor.
+* @param scale    - Rendered category band scale.
+* @param position - Pointer coordinate on the category axis.
+* @return Index of the nearest category, or -1 when none is registered.
+*/
+function nearestBandIndex(data, accessor, scale, position) {
+	let nearest = -1;
+	let distance = Infinity;
+	data.forEach((datum, index) => {
+		const start = scale(accessor(datum));
+		if (start === void 0) return;
+		const candidate = Math.abs(start + scale.bandwidth() / 2 - position);
+		if (candidate < distance) {
+			distance = candidate;
+			nearest = index;
+		}
+	});
+	return nearest;
+}
+/**
+* Correct visx's range-based band inversion, which omits outer padding.
+* @param root0               - Registered series selection.
+* @param root0.keys          - Visible series keys.
+* @param root0.groupPadding  - Padding between grouped bars.
+* @param root0.withTooltips  - Whether pointer events update the tooltip.
+* @param root0.onPointerDown - Receives the corrected pointer-down datum.
+* @param root0.onPointerUp   - Receives the corrected pointer-up datum.
+* @return No visual content.
+*/
+function BandTooltip({ keys, groupPadding, withTooltips, onPointerDown, onPointerUp }) {
+	const { xScale, yScale, dataRegistry, horizontal } = useContext(DataContext);
+	const { showTooltip } = useContext(TooltipContext);
+	const scale = horizontal ? yScale : xScale;
+	const bandwidth = scale?.bandwidth?.() ?? 0;
+	const groupScale = useMemo(() => createGroupScale(keys, bandwidth, groupPadding), [
+		keys,
+		bandwidth,
+		groupPadding
+	]);
+	const getSelections = useCallback((params) => {
+		const point = params?.svgPoint;
+		if (!point || !scale?.bandwidth) return [];
+		const selections = [];
+		for (const key of keys) {
+			const entry = dataRegistry?.get(key);
+			if (!entry) continue;
+			const accessor = horizontal ? entry.yAccessor : entry.xAccessor;
+			const index = nearestBandIndex(entry.data, accessor, scale, horizontal ? point.y : point.x);
+			if (index < 0) continue;
+			const datum = entry.data[index];
+			const start = Number(scale(accessor(datum))) + Number(groupScale(key));
+			const end = start + groupScale.step();
+			const position = horizontal ? point.y : point.x;
+			const distance = position >= start && position <= end ? 0 : Math.abs(position - (start + end) / 2);
+			selections.push({
+				event: params.event,
+				key,
+				datum,
+				index,
+				svgPoint: point,
+				distanceX: horizontal ? 0 : distance,
+				distanceY: horizontal ? distance : 0
+			});
+		}
+		return selections;
+	}, [
+		scale,
+		dataRegistry,
+		horizontal,
+		keys,
+		groupScale
+	]);
+	const handlePointer = useCallback((params) => {
+		const selections = getSelections(params);
+		if (withTooltips && params?.event.type !== "pointerup") selections.forEach(showTooltip);
+		const callback = params?.event.type === "pointerdown" ? onPointerDown : onPointerUp;
+		if (params?.event.type === "pointermove" || !callback) return;
+		const nearest = selections.reduce((best, selection) => {
+			const distance = (value) => Math.hypot(value.distanceX, value.distanceY);
+			return !best || distance(selection) <= distance(best) ? selection : best;
+		}, void 0);
+		if (nearest) callback(nearest);
+	}, [
+		getSelections,
+		withTooltips,
+		showTooltip,
+		onPointerDown,
+		onPointerUp
+	]);
+	useEventEmitter("pointermove", withTooltips ? handlePointer : void 0);
+	useEventEmitter("pointerdown", handlePointer);
+	useEventEmitter("pointerup", onPointerUp ? handlePointer : void 0);
+	return null;
+}
+//#endregion
 //#region src/charts/bar-chart/bar-chart.tsx
 const validateData$2 = (data) => {
-	if (!data?.length) return "No data available";
-	if (data.some((series) => series.data.some((point) => isNaN(point.value) || point.value === null || point.value === void 0 || !point.label && (!("date" in point && point.date) || isNaN(point.date.getTime()))))) return "Invalid data";
+	if (!data?.length) return __("No data available", "jetpack-charts");
+	if (data.some((series) => series.data.some((point) => isInvalidReading(point.value, { allowMissing: true }) || !point.label && (!("date" in point && point.date) || isNaN(point.date.getTime()))))) return __("Invalid data", "jetpack-charts");
 	return null;
 };
 const getPatternId = (chartId, index) => `bar-pattern-${chartId}-${index}`;
@@ -5415,9 +5951,11 @@ 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, options = {}, orientation = "vertical", withPatterns = false, showZeroValues = false, defaultHiddenSeries, animation, children, gap = "md", onPointerDown, onPointerUp, onDatumActivate }) => {
+const BarChartInternal = ({ data, chartId: providedChartId, width, height, className, margin, withTooltips = false, showLegend = false, legend = {}, gridVisibility: gridVisibilityProp, renderTooltip, tooltipPlacement, tooltipAnchorTop, 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;
+	const legendComparisonItem = legend.comparisonItem ?? false;
 	const horizontal = orientation === "horizontal";
 	const chartId = useChartId(providedChartId);
 	const hiddenSeries = useDefaultHiddenSeries(chartId, defaultHiddenSeries);
@@ -5428,10 +5966,21 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 		enabled: showZeroValues,
 		valueAxisLength: horizontal ? width : height
 	});
-	const legendItems = useChartLegendItems(dataSorted, useMemo(() => ({ collapseGroups: legendCollapseGroups }), [legendCollapseGroups]));
+	const legendItems = useChartLegendItems(dataSorted, useMemo(() => ({
+		collapseGroups: legendCollapseGroups,
+		comparisonItem: legendComparisonItem
+	}), [legendCollapseGroups, legendComparisonItem]));
 	const { getElementStyles } = useGlobalChartsContext();
 	const isSeriesRendered = useCallback((series) => isSeriesVisible(series.label), [isSeriesVisible]);
+	const hasWholeNumberValues = useMemo(() => hasOnlyWholeNumbers(dataSorted.filter(isSeriesRendered)), [dataSorted, isSeriesRendered]);
 	const chartOptions = useBarChartOptions(dataWithVisibleZeros, horizontal, options, isSeriesRendered);
+	const valueAxis = horizontal ? chartOptions.axis.x : chartOptions.axis.y;
+	const callerValueDomain = horizontal ? options.xScale?.domain : options.yScale?.domain;
+	const wholeNumberTicksProps = {
+		axis: horizontal ? "x" : "y",
+		numTicks: valueAxis.numTicks,
+		enabled: hasWholeNumberValues && !valueAxis.tickValues && !callerValueDomain
+	};
 	const defaultMargin = useChartMargin(height, chartOptions, dataSorted, theme, horizontal);
 	const chartRef = useRef(null);
 	const { legendChildren, nonLegendChildren } = useChartChildren(children, "BarChart");
@@ -5441,8 +5990,6 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 	}, [height]);
 	const [selectedIndex, setSelectedIndex] = useState(void 0);
 	const [isNavigating, setIsNavigating] = useState(false);
-	const primarySeriesForNav = dataWithVisibleZeros.filter((s) => s.options?.type !== "comparison");
-	const totalPoints = Math.max(0, ...primarySeriesForNav.map((s) => s.data?.length || 0)) * primarySeriesForNav.length;
 	const seriesWithVisibility = useMemo(() => dataWithVisibleZeros.map((series, index) => ({
 		series,
 		index,
@@ -5452,6 +5999,7 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 		return seriesWithVisibility.every(({ isVisible }) => !isVisible);
 	}, [seriesWithVisibility]);
 	const primaryEntries = useMemo(() => seriesWithVisibility.filter(({ isVisible, series }) => isVisible && series.options?.type !== "comparison"), [seriesWithVisibility]);
+	const totalPoints = Math.max(0, ...primaryEntries.map((e) => e.series.data.length)) * primaryEntries.length;
 	const primaryKeys = useMemo(() => primaryEntries.map(({ series }) => series.label), [primaryEntries]);
 	const primarySeries = useMemo(() => primaryEntries.map(({ series }) => series), [primaryEntries]);
 	const activateSelectedBar = useCallback((index) => {
@@ -5466,6 +6014,7 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 			key: series.label
 		});
 	}, [primaryEntries, onDatumActivate]);
+	const visibleSeriesKey = useMemo(() => JSON.stringify(primaryKeys), [primaryKeys]);
 	const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation({
 		selectedIndex,
 		setSelectedIndex,
@@ -5473,7 +6022,8 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 		setIsNavigating,
 		chartRef,
 		totalPoints,
-		onActivate: activateSelectedBar
+		onActivate: activateSelectedBar,
+		visibleSeriesKey
 	});
 	const comparisonEntries = useMemo(() => {
 		const primaryByGroup = new Map(primaryEntries.map(({ series, index }) => [series.group, {
@@ -5536,7 +6086,7 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 		chartOptions.yScale,
 		horizontal
 	]);
-	const getBarBackground = useCallback((index) => () => withPatterns ? `url(#${getPatternId(chartId, index)})` : getElementStyles({
+	const getBarBackground = useCallback((index) => (datum) => withPatterns ? `url(#${getPatternId(chartId, index)})` : datum.color ?? getElementStyles({
 		data: dataSorted[index],
 		index
 	}).color, [
@@ -5563,15 +6113,15 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 			const p = point;
 			return nearestDatum.label != null ? p.label === nearestDatum.label : !!nearestDatum.date && !!p.date && p.date.getTime() === nearestDatum.date.getTime();
 		});
-		if (comparisonEntry && comparisonDatum && comparisonDatum.value != null) return /* @__PURE__ */ jsxs("div", {
+		if (comparisonEntry && comparisonDatum) return /* @__PURE__ */ jsxs("div", {
 			className: bar_chart_module_default["bar-chart__tooltip"],
 			children: [
 				/* @__PURE__ */ jsx("div", {
 					className: bar_chart_module_default["bar-chart__tooltip-header"],
 					children: categoryLabel
 				}),
-				renderTooltipRow(primaryKey, formatNumber(nearestDatum.value)),
-				renderTooltipRow(comparisonEntry.series.label, formatNumber(comparisonDatum.value))
+				renderTooltipRow(primaryKey, formatReading(nearestDatum.value)),
+				renderTooltipRow(comparisonEntry.series.label, formatReading(comparisonDatum.value))
 			]
 		});
 		return /* @__PURE__ */ jsxs("div", {
@@ -5579,7 +6129,7 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 			children: [/* @__PURE__ */ jsx("div", {
 				className: bar_chart_module_default["bar-chart__tooltip-header"],
 				children: primaryKey
-			}), renderTooltipRow(categoryLabel, formatNumber(nearestDatum.value))]
+			}), renderTooltipRow(categoryLabel, formatReading(nearestDatum.value))]
 		});
 	}, [chartOptions.tooltip, comparisonEntries]);
 	const renderPattern = useCallback((index, color) => {
@@ -5630,15 +6180,15 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 	const createKeyboardHighlightStyle = useCallback(() => {
 		if (selectedIndex === void 0) return "";
 		const primaryCount = primaryEntries.length;
-		const maxDataPoints = Math.max(...primaryEntries.map((e) => e.series.data.length));
+		if (!primaryCount) return "";
 		const dataPointIndex = Math.floor(selectedIndex / primaryCount);
 		const seriesIndex = selectedIndex % primaryCount;
-		if (dataPointIndex >= maxDataPoints || seriesIndex >= primaryCount) return "";
 		const seriesData = primaryEntries[seriesIndex]?.series;
-		if (!seriesData || dataPointIndex >= seriesData.data.length) return "";
-		const actualBarIndex = seriesIndex * maxDataPoints + dataPointIndex;
+		const datum = seriesData?.data[dataPointIndex];
+		if (!seriesData || !datum || !isBarRendered(datum)) return "";
+		const domBarIndex = primaryEntries.slice(0, seriesIndex).reduce((count, { series }) => count + countRenderedBars(series.data), 0) + countRenderedBars(seriesData.data.slice(0, dataPointIndex));
 		return `
-			.bar-chart[data-chart-id="bar-chart-${chartId}"] .visx-bar-group .visx-bar:nth-child(${actualBarIndex + 1}) {
+			.bar-chart[data-chart-id="bar-chart-${chartId}"] .visx-bar-group .visx-bar:nth-child(${domBarIndex + 1}) {
 				stroke: #005fcc;
 				stroke-width: 2px;
 			}
@@ -5706,13 +6256,13 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 				const chartHeight = contentHeight > 0 ? contentHeight : height;
 				return /* @__PURE__ */ jsx("div", {
 					role: "grid",
+					ref: chartRef,
 					"aria-label": __("Bar chart", "jetpack-charts"),
 					tabIndex: 0,
 					onKeyDown: onChartKeyDown,
 					onFocus: onChartFocus,
 					onBlur: onChartBlur,
 					children: chartHeight > 0 && /* @__PURE__ */ jsx("div", {
-						ref: chartRef,
 						className: xy_plot_module_default["xy-plot"],
 						children: /* @__PURE__ */ jsxs(XYChart, {
 							theme,
@@ -5725,14 +6275,26 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 							xScale,
 							yScale,
 							horizontal,
-							onPointerDown,
-							onPointerUp,
 							pointerEventsDataKey: "nearest",
 							children: [
-								!allSeriesHidden && /* @__PURE__ */ jsx(Grid, {
-									columns: gridVisibility.includes("y"),
-									rows: gridVisibility.includes("x"),
-									numTicks: 4
+								withTooltips && (withBandHighlight || onBandHighlightChange) && /* @__PURE__ */ jsx(BandHighlight, {
+									visible: withBandHighlight,
+									horizontal,
+									onChange: onBandHighlightChange
+								}),
+								!allSeriesHidden && /* @__PURE__ */ jsx(WholeNumberTicks, {
+									...wholeNumberTicksProps,
+									children: (valueTicks) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Grid, {
+										columns: gridVisibility.includes("y"),
+										rows: false,
+										numTicks: chartOptions.axis.x.numTicks,
+										tickValues: (horizontal ? valueTicks : void 0) ?? chartOptions.axis.x.tickValues
+									}), /* @__PURE__ */ jsx(Grid, {
+										columns: false,
+										rows: gridVisibility.includes("x"),
+										numTicks: chartOptions.axis.y.numTicks,
+										tickValues: (horizontal ? void 0 : valueTicks) ?? chartOptions.axis.y.tickValues
+									})] })
 								}),
 								withPatterns && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("defs", { children: dataSorted.map((seriesData, index) => renderPattern(index, getElementStyles({
 									data: seriesData,
@@ -5769,8 +6331,26 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 										colorAccessor: getBarBackground(index)
 									}, seriesData?.label))
 								}),
-								!allSeriesHidden && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Axis, { ...chartOptions.axis.x }), /* @__PURE__ */ jsx(Axis, { ...chartOptions.axis.y })] }),
+								(withTooltips || onPointerDown || onPointerUp) && /* @__PURE__ */ jsx(BandTooltip, {
+									keys: primaryKeys,
+									groupPadding,
+									withTooltips,
+									onPointerDown,
+									onPointerUp
+								}),
+								!allSeriesHidden && /* @__PURE__ */ jsx(WholeNumberTicks, {
+									...wholeNumberTicksProps,
+									children: (valueTicks) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Axis, {
+										...chartOptions.axis.x,
+										...horizontal && valueTicks ? { tickValues: valueTicks } : {}
+									}), /* @__PURE__ */ jsx(Axis, {
+										...chartOptions.axis.y,
+										...!horizontal && valueTicks ? { tickValues: valueTicks } : {}
+									})] })
+								}),
 								withTooltips && /* @__PURE__ */ jsx(AccessibleTooltip, {
+									tooltipPlacement,
+									tooltipAnchorTop,
 									detectBounds: true,
 									snapTooltipToDatumX: true,
 									snapTooltipToDatumY: true,
@@ -6592,8 +7172,11 @@ var heatmap_chart_module_default = {
 	"heatmap-chart__gap-start": "a8ccharts-O3YMOW-heatmap-chart__gap-start",
 	"heatmap-chart__grid": "a8ccharts-O3YMOW-heatmap-chart__grid",
 	"heatmap-chart__grid--compact": "a8ccharts-O3YMOW-heatmap-chart__grid--compact",
+	"heatmap-chart__grid--flex-gaps": "a8ccharts-O3YMOW-heatmap-chart__grid--flex-gaps",
 	"heatmap-chart__grid--height-capped": "a8ccharts-O3YMOW-heatmap-chart__grid--height-capped",
+	"heatmap-chart__group-label": "a8ccharts-O3YMOW-heatmap-chart__group-label",
 	"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__row": "a8ccharts-O3YMOW-heatmap-chart__row",
 	"heatmap-chart__row-label": "a8ccharts-O3YMOW-heatmap-chart__row-label",
@@ -6643,7 +7226,7 @@ const getNormalizedValue = (value, extent) => {
 const HeatmapContext = createContext(null);
 //#endregion
 //#region src/charts/heatmap-chart/private/heatmap-legend.tsx
-const HeatmapLegend = ({ steps = 5, lessLabel, moreLabel }) => {
+const HeatmapLegend = ({ steps = 5, variant = "swatches", lessLabel, moreLabel }) => {
 	const context = useContext(HeatmapContext);
 	const { legend } = useGlobalChartsTheme();
 	if (!context) return null;
@@ -6662,11 +7245,12 @@ const HeatmapLegend = ({ steps = 5, lessLabel, moreLabel }) => {
 			}),
 			/* @__PURE__ */ jsx(Stack, {
 				direction: "row",
-				gap: "xs",
+				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) => {
 					const intensity = steps <= 1 ? 1 : index / (steps - 1);
 					return /* @__PURE__ */ jsx("span", {
-						"aria-hidden": "true",
 						className: heatmap_chart_module_default["heatmap-chart__legend-swatch"],
 						style: {
 							"--a8c-charts-color-heatmap-primary": primaryColorHex,
@@ -6685,16 +7269,219 @@ const HeatmapLegend = ({ steps = 5, lessLabel, moreLabel }) => {
 	});
 };
 //#endregion
+//#region src/charts/heatmap-chart/private/column-groups.ts
+const isSpan = (span) => Number.isInteger(span) && span > 0;
+/**
+* Validates column groups and lays them over the columns.
+*
+* @param groups      - Groups as passed to the chart.
+* @param columnCount - Number of data columns.
+* @param firstLine   - Grid column line of the first data column.
+* @return Grid column lines for every column and group; no groups when the input was unusable.
+*/
+const resolveColumnGroups = (groups, columnCount, firstLine) => {
+	const ungrouped = () => ({
+		columns: Array.from({ length: columnCount }, (_, index) => ({
+			line: firstLine + index,
+			gapBefore: false
+		})),
+		groups: []
+	});
+	if (!groups || groups.length === 0 || columnCount === 0) return ungrouped();
+	const spans = groups.map((group) => group.span);
+	const total = spans.reduce((sum, span) => sum + span, 0);
+	if (!spans.every(isSpan) || total > columnCount) {
+		warnOnce(`heatmap:columnGroups:${JSON.stringify(spans)}:${columnCount}`, `columnGroups spans ${JSON.stringify(spans)} must be positive integers that fit the ${columnCount} columns, so no groups are drawn.`);
+		return ungrouped();
+	}
+	const columns = [];
+	const laidOut = [];
+	let line = firstLine;
+	groups.forEach((group, groupIndex) => {
+		if (groupIndex > 0) line += 1;
+		laidOut.push({
+			...group,
+			line
+		});
+		for (let offset = 0; offset < group.span; offset++) {
+			columns.push({
+				line,
+				gapBefore: groupIndex > 0 && offset === 0,
+				group: groupIndex
+			});
+			line += 1;
+		}
+	});
+	while (columns.length < columnCount) {
+		columns.push({
+			line,
+			gapBefore: false
+		});
+		line += 1;
+	}
+	return {
+		columns,
+		groups: laidOut
+	};
+};
+//#endregion
+//#region src/charts/heatmap-chart/private/keyboard-navigation.ts
+const ARROW_KEYS = [
+	"ArrowLeft",
+	"ArrowRight",
+	"ArrowUp",
+	"ArrowDown"
+];
+const PAGE_KEYS = ["PageUp", "PageDown"];
+const isNavigationKey = (key, mode) => ARROW_KEYS.includes(key) || mode === "calendar" && PAGE_KEYS.includes(key);
+const inGrid = (grid, { column, row }) => column >= 0 && column < grid.columns && row >= 0 && row < grid.rows;
+const firstSelectable = (grid, cells) => cells.find((cell) => inGrid(grid, cell) && !grid.isInert(cell.column, cell.row));
+/**
+* Column-major scan for the first selectable cell.
+*
+* @param grid - The grid.
+* @return The cell, or undefined when every slot is inert.
+*/
+const firstGridCell = (grid) => {
+	for (let column = 0; column < grid.columns; column++) for (let row = 0; row < grid.rows; row++) if (!grid.isInert(column, row)) return {
+		column,
+		row
+	};
+};
+/**
+* Steps across the grid in the key's direction, past inert slots, staying put at the edge.
+*
+* @param grid - The grid.
+* @param from - The selected cell.
+* @param key  - The arrow key.
+* @return The next cell, or undefined to keep the selection.
+*/
+const stepGridCell = (grid, from, key) => {
+	const step = {
+		ArrowRight: [1, 0],
+		ArrowLeft: [-1, 0],
+		ArrowDown: [0, 1],
+		ArrowUp: [0, -1]
+	}[key];
+	if (!step) return;
+	const [stepColumn, stepRow] = step;
+	let cell = from;
+	do
+		cell = {
+			column: cell.column + stepColumn,
+			row: cell.row + stepRow
+		};
+	while (inGrid(grid, cell) && grid.isInert(cell.column, cell.row));
+	return inGrid(grid, cell) ? cell : void 0;
+};
+/**
+* Every slot of the blocks in reading order: block by block, each a row at a time.
+*
+* @param grid   - The grid.
+* @param blocks - The blocks, left to right.
+* @return The slots in order.
+*/
+const readingOrder = (grid, blocks) => blocks.flatMap((block) => Array.from({ length: grid.rows }, (_row, row) => Array.from({ length: block.end - block.start }, (_offset, offset) => ({
+	column: block.start + offset,
+	row
+}))).flat());
+const blockOf = (blocks, column) => blocks.findIndex((block) => column >= block.start && column < block.end);
+/**
+* The slots after a cell down its column (or before it, going up), continuing at the
+* same column offset of each following block.
+*
+* @param grid      - The grid.
+* @param blocks    - The blocks, left to right.
+* @param from      - The selected cell.
+* @param direction - 1 downwards, -1 upwards.
+* @return The slots in order.
+*/
+const columnOrderFrom = (grid, blocks, from, direction) => {
+	const blockIndex = blockOf(blocks, from.column);
+	if (blockIndex < 0) return [];
+	const offset = from.column - blocks[blockIndex].start;
+	const cells = [];
+	const pushRows = (column, startRow) => {
+		for (let row = startRow; row >= 0 && row < grid.rows; row += direction) cells.push({
+			column,
+			row
+		});
+	};
+	pushRows(from.column, from.row + direction);
+	for (let index = blockIndex + direction; index >= 0 && index < blocks.length; index += direction) {
+		const column = blocks[index].start + offset;
+		if (column < blocks[index].end) pushRows(column, direction === 1 ? 0 : grid.rows - 1);
+	}
+	return cells;
+};
+/**
+* The first selectable cell in calendar reading order.
+*
+* @param grid   - The grid.
+* @param blocks - The blocks, left to right.
+* @return The cell, or undefined when every slot is inert.
+*/
+const firstCalendarCell = (grid, blocks) => firstSelectable(grid, readingOrder(grid, blocks));
+/**
+* Steps through the blocks as pages of a calendar: Left/Right by one slot in reading
+* order, Up/Down by one row (into the neighboring block past the edge), Page Up/Down
+* to the same slot of the neighboring block or its nearest selectable cell.
+*
+* @param grid   - The grid.
+* @param blocks - The blocks, left to right.
+* @param from   - The selected cell.
+* @param key    - The navigation key.
+* @return The next cell, or undefined to keep the selection.
+*/
+const stepCalendarCell = (grid, blocks, from, key) => {
+	if (key === "ArrowRight" || key === "ArrowLeft") {
+		const order = readingOrder(grid, blocks);
+		const index = order.findIndex((cell) => cell.column === from.column && cell.row === from.row);
+		if (index < 0) return;
+		const ahead = key === "ArrowRight" ? order.slice(index + 1) : order.slice(0, index).reverse();
+		return firstSelectable(grid, ahead);
+	}
+	if (key === "ArrowDown" || key === "ArrowUp") return firstSelectable(grid, columnOrderFrom(grid, blocks, from, key === "ArrowDown" ? 1 : -1));
+	const blockIndex = blockOf(blocks, from.column);
+	const target = blocks[blockIndex + (key === "PageDown" ? 1 : -1)];
+	if (blockIndex < 0 || !target) return;
+	const same = {
+		column: target.start + (from.column - blocks[blockIndex].start),
+		row: from.row
+	};
+	const page = readingOrder(grid, [target]);
+	const at = page.findIndex((cell) => cell.row > same.row || cell.row === same.row && cell.column >= same.column);
+	const after = at === -1 ? [] : page.slice(at);
+	const before = page.slice(0, at === -1 ? page.length : at).reverse();
+	return firstSelectable(grid, after) ?? firstSelectable(grid, before);
+};
+//#endregion
 //#region src/charts/heatmap-chart/heatmap-chart.tsx
 const CELL_MIX_FLOOR = .15;
 const NO_ROW_LABELS = [];
-const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, height = 0, className, compact = false, showValues, maxCellWidth, maxCellHeight, minCellWidth, minCellHeight, rowLabels = NO_ROW_LABELS, primaryColor, gap = "md", withTooltips = false, renderTooltip, children }) => {
+const TOOLTIP_BOX_STYLES = {
+	light: {
+		...defaultStyles,
+		zIndex: 3
+	},
+	dark: { zIndex: 3 }
+};
+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, tooltipVariant = "light", tooltipStyle, children }) => {
 	const chartId = useChartId(providedChartId);
+	const tooltipBoxStyle = tooltipStyle ? {
+		...TOOLTIP_BOX_STYLES[tooltipVariant],
+		...tooltipStyle
+	} : TOOLTIP_BOX_STYLES[tooltipVariant];
 	const { getElementStyles, theme } = useGlobalChartsContext();
 	const scopeElement = useChartScopeElement();
 	const { heatmapChart: heatmapChartSettings } = theme;
 	const { nonLegendChildren } = useChartChildren(children, "HeatmapChart");
-	const [selectedIndex, setSelectedIndex] = useState();
+	const [selected, setSelected] = useState();
 	const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, showTooltip, hideTooltip } = useTooltip();
 	const standaloneScopeClass = useStandaloneScopeClass();
 	const containerRef = useRef(null);
@@ -6713,69 +7500,75 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 	}), [extent, primaryColorHex]);
 	const columns = data.length;
 	const rows = Math.max(0, ...data.map((column) => column.data.length));
-	const { compactCellGap, compactCellSize } = heatmapChartSettings;
+	const groupLayout = useMemo(() => resolveColumnGroups(columnGroups, columns, 2), [columnGroups, columns]);
+	const { compactCellGap, compactCellSize, groupGap } = heatmapChartSettings;
 	const drawValues = showValues ?? !compact;
 	const buildTooltipData = useCallback((columnIndex, rowIndex) => {
 		const cell = data[columnIndex]?.data[rowIndex];
+		const group = groupLayout.columns[columnIndex]?.group;
 		return {
 			value: cell?.value ?? null,
 			rowLabel: rowLabels[rowIndex],
 			columnLabel: data[columnIndex]?.label,
+			groupLabel: group === void 0 ? void 0 : groupLayout.groups[group]?.label,
 			cellLabel: cell?.label,
 			row: rowIndex,
 			column: columnIndex
 		};
-	}, [data, rowLabels]);
+	}, [
+		data,
+		rowLabels,
+		groupLayout
+	]);
 	const onChartBlur = useCallback(() => {
-		setSelectedIndex(void 0);
+		setSelected(void 0);
 		hideTooltip();
 	}, [hideTooltip]);
 	const isCellInert = useCallback((col, row) => {
 		const cell = data[col]?.data[row];
 		return cell?.hidden === true || cell?.placeholder === true;
 	}, [data]);
+	const blocks = useMemo(() => {
+		const grouped = groupLayout.groups.map((group, index) => {
+			const start = groupLayout.columns.findIndex((column) => column.group === index);
+			return {
+				start,
+				end: start + group.span
+			};
+		});
+		const groupedEnd = grouped.length ? grouped[grouped.length - 1].end : 0;
+		return groupedEnd < columns ? [...grouped, {
+			start: groupedEnd,
+			end: columns
+		}] : grouped;
+	}, [groupLayout, columns]);
 	const onChartKeyDown = useCallback((event) => {
-		if (![
-			"ArrowLeft",
-			"ArrowRight",
-			"ArrowUp",
-			"ArrowDown",
-			"Escape",
-			"Tab"
-		].includes(event.key)) return;
 		if (event.key === "Tab" || event.key === "Escape") {
-			setSelectedIndex(void 0);
+			setSelected(void 0);
 			hideTooltip();
 			return;
 		}
+		if (!isNavigationKey(event.key, keyboardNavigation)) return;
 		event.preventDefault();
-		if (selectedIndex === void 0) {
-			for (let index = 0; index < columns * rows; index++) if (!isCellInert(Math.floor(index / rows), index % rows)) {
-				setSelectedIndex(index);
-				return;
-			}
+		const grid = {
+			columns,
+			rows,
+			isInert: isCellInert
+		};
+		if (selected === void 0) {
+			setSelected(keyboardNavigation === "calendar" ? firstCalendarCell(grid, blocks) : firstGridCell(grid));
 			return;
 		}
-		let stepCol = 0;
-		let stepRow = 0;
-		if (event.key === "ArrowRight") stepCol = 1;
-		else if (event.key === "ArrowLeft") stepCol = -1;
-		else if (event.key === "ArrowDown") stepRow = 1;
-		else if (event.key === "ArrowUp") stepRow = -1;
-		let col = Math.floor(selectedIndex / rows);
-		let row = selectedIndex % rows;
-		do {
-			col += stepCol;
-			row += stepRow;
-		} while (col >= 0 && col < columns && row >= 0 && row < rows && isCellInert(col, row));
-		if (col < 0 || col >= columns || row < 0 || row >= rows) return;
-		setSelectedIndex(col * rows + row);
+		const next = keyboardNavigation === "calendar" ? stepCalendarCell(grid, blocks, selected, event.key) : stepGridCell(grid, selected, event.key);
+		if (next) setSelected(next);
 	}, [
 		rows,
 		columns,
-		selectedIndex,
+		selected,
 		hideTooltip,
-		isCellInert
+		isCellInert,
+		keyboardNavigation,
+		blocks
 	]);
 	const handleCellMouseMove = useCallback((event) => {
 		if (!withTooltips) return;
@@ -6795,35 +7588,47 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 		buildTooltipData,
 		getTooltipOrigin
 	]);
+	const getCellElement = useCallback((col, row) => typeof document !== "undefined" ? document.getElementById(`${chartId}-cell-${col}-${row}`) : null, [chartId]);
 	const handleCellMouseLeave = useCallback(() => {
-		if (withTooltips && selectedIndex === void 0) hideTooltip();
+		if (withTooltips && selected === void 0) hideTooltip();
 	}, [
 		withTooltips,
-		selectedIndex,
+		selected,
 		hideTooltip
 	]);
 	useEffect(() => {
-		if (!withTooltips || selectedIndex === void 0) return;
+		if (selected && (selected.column >= columns || selected.row >= rows)) setSelected(void 0);
+	}, [
+		selected,
+		columns,
+		rows
+	]);
+	useEffect(() => {
+		if (selected === void 0) return;
+		getCellElement(selected.column, selected.row)?.scrollIntoView?.({
+			block: "nearest",
+			inline: "nearest"
+		});
+	}, [selected, getCellElement]);
+	useEffect(() => {
+		if (!withTooltips || selected === void 0) return;
 		const origin = getTooltipOrigin();
 		if (!origin) return;
-		const col = Math.floor(selectedIndex / rows);
-		const row = selectedIndex % rows;
-		const rect = (typeof document !== "undefined" ? document.getElementById(`${chartId}-cell-${col}-${row}`) : null)?.getBoundingClientRect();
+		const rect = getCellElement(selected.column, selected.row)?.getBoundingClientRect();
 		showTooltip({
 			tooltipLeft: rect ? rect.left + rect.width / 2 - origin.left : 0,
 			tooltipTop: rect ? rect.top + rect.height / 2 - origin.top : 0,
-			tooltipData: buildTooltipData(col, row)
+			tooltipData: buildTooltipData(selected.column, selected.row)
 		});
 	}, [
-		selectedIndex,
+		selected,
 		withTooltips,
-		rows,
-		chartId,
+		getCellElement,
 		buildTooltipData,
 		showTooltip,
 		getTooltipOrigin
 	]);
-	const defaultRenderTooltip = useCallback((info) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("strong", { children: info.cellLabel || `${info.columnLabel ?? ""} ${info.rowLabel ?? ""}`.trim() }), /* @__PURE__ */ jsx("div", { children: info.value === null ? __("No data", "jetpack-charts") : formatNumber(info.value) })] }), []);
+	const defaultRenderTooltip = useCallback((info) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("strong", { children: cellName(info) }), /* @__PURE__ */ jsx("div", { children: info.value === null ? __("No data", "jetpack-charts") : formatNumber(info.value) })] }), []);
 	if (!columns || !rows) return /* @__PURE__ */ jsx(Center, {
 		className: clsx("heatmap-chart", heatmap_chart_module_default["heatmap-chart"], className),
 		style: {
@@ -6837,10 +7642,16 @@ 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 dataTrack = (column) => column.summary ? "minmax(auto, max-content)" : columnTrack;
+	const gapTrack = compact ? `minmax(${groupGap}px, 1fr)` : `${groupGap}px`;
 	const gridStyle = {
 		"--a8c-charts-color-heatmap-primary": primaryColorHex,
-		gridTemplateColumns: `auto ${data.some((column) => column.summary) ? data.map((column) => column.summary ? "minmax(auto, max-content)" : columnTrack).join(" ") : `repeat(${columns}, ${columnTrack})`}`,
-		gridTemplateRows: `auto repeat(${rows}, ${rowTrack})`
+		gridTemplateColumns: `auto ${data.map((column, columnIndex) => groupLayout.columns[columnIndex].gapBefore ? `${gapTrack} ${dataTrack(column)}` : dataTrack(column)).join(" ")}`,
+		gridTemplateRows: `${hasColumnLabels ? "auto " : ""}repeat(${rows}, ${rowTrack})${hasGroups ? " auto" : ""}`
 	};
 	if (compact) {
 		gridStyle["--a8c-charts-dimension-heatmap-cell-gap"] = `${compactCellGap}px`;
@@ -6853,7 +7664,7 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 			[heatmap_chart_module_default["heatmap-chart__gap-end"]]: columnIndex < columns - 1 && !data[columnIndex + 1]?.summary
 		};
 	};
-	const activeDescendant = selectedIndex !== void 0 ? `${chartId}-cell-${Math.floor(selectedIndex / rows)}-${selectedIndex % rows}` : void 0;
+	const activeDescendant = selected ? `${chartId}-cell-${selected.column}-${selected.row}` : void 0;
 	const heightCapped = !compact && Boolean(maxCellHeight);
 	return /* @__PURE__ */ jsx(HeatmapContext.Provider, {
 		value: heatmapContext,
@@ -6873,7 +7684,7 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 				children: [/* @__PURE__ */ jsxs("div", {
 					ref: containerRef,
 					role: "grid",
-					"aria-label": __("Heatmap chart", "jetpack-charts"),
+					"aria-label": ariaLabel ?? __("Heatmap chart", "jetpack-charts"),
 					"aria-rowcount": rows,
 					"aria-colcount": columns,
 					"aria-activedescendant": activeDescendant,
@@ -6882,76 +7693,115 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 					onKeyDown: onChartKeyDown,
 					className: clsx(heatmap_chart_module_default["heatmap-chart__grid"], {
 						[heatmap_chart_module_default["heatmap-chart__grid--compact"]]: compact,
+						[heatmap_chart_module_default["heatmap-chart__grid--flex-gaps"]]: compact && hasGroups,
 						[heatmap_chart_module_default["heatmap-chart__grid--height-capped"]]: heightCapped
 					}),
 					style: gridStyle,
-					children: [/* @__PURE__ */ jsxs("div", {
-						role: "row",
-						"aria-hidden": "true",
-						className: heatmap_chart_module_default["heatmap-chart__row"],
-						children: [/* @__PURE__ */ jsx("span", {}), data.map((column, columnIndex) => /* @__PURE__ */ jsx("span", {
-							className: clsx(heatmap_chart_module_default["heatmap-chart__col-label"], {
-								[heatmap_chart_module_default["heatmap-chart__col-label--summary"]]: column.summary,
-								...summaryGaps(columnIndex)
-							}),
-							children: column.label
-						}, `col-${columnIndex}`))]
-					}), Array.from({ length: rows }).map((_row, rowIndex) => {
-						const labelVisible = !compact || rowIndex % 2 === 0;
-						return /* @__PURE__ */ jsxs("div", {
+					children: [
+						hasColumnLabels && /* @__PURE__ */ jsxs("div", {
 							role: "row",
-							"aria-rowindex": rowIndex + 1,
+							"aria-hidden": "true",
 							className: heatmap_chart_module_default["heatmap-chart__row"],
-							children: [/* @__PURE__ */ jsx("span", {
-								"aria-hidden": "true",
-								className: heatmap_chart_module_default["heatmap-chart__row-label"],
-								children: labelVisible ? rowLabels[rowIndex] ?? "" : ""
-							}), data.map((column, columnIndex) => {
-								const cell = column.data[rowIndex];
-								if (cell?.hidden) return /* @__PURE__ */ jsx("div", {
-									"aria-hidden": "true",
-									className: clsx(heatmap_chart_module_default["heatmap-chart__cell"], heatmap_chart_module_default["heatmap-chart__cell--hidden"])
-								}, `cell-${columnIndex}-${rowIndex}`);
-								if (cell?.placeholder) return /* @__PURE__ */ jsx("div", {
+							children: [/* @__PURE__ */ jsx("span", { style: {
+								gridColumn: 1,
+								gridRow: 1
+							} }), data.map((column, columnIndex) => /* @__PURE__ */ jsx("span", {
+								style: {
+									gridColumn: columnLine(columnIndex),
+									gridRow: 1
+								},
+								className: clsx(heatmap_chart_module_default["heatmap-chart__col-label"], {
+									[heatmap_chart_module_default["heatmap-chart__col-label--summary"]]: column.summary,
+									...summaryGaps(columnIndex)
+								}),
+								children: column.label
+							}, `col-${columnIndex}`))]
+						}),
+						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", {
 									"aria-hidden": "true",
-									className: clsx(heatmap_chart_module_default["heatmap-chart__cell"], heatmap_chart_module_default["heatmap-chart__cell--placeholder"])
-								}, `cell-${columnIndex}-${rowIndex}`);
-								const value = cell?.value ?? null;
-								const present = isPresent(value);
-								const filled = present && !column.summary;
-								const normalized = filled ? getNormalizedValue(value, extent) : 0;
-								const flatIndex = columnIndex * rows + rowIndex;
-								const info = buildTooltipData(columnIndex, rowIndex);
-								const accessibleLabel = `${info.cellLabel || `${info.columnLabel ?? ""} ${info.rowLabel ?? ""}`.trim()}: ${info.value === null ? __("No data", "jetpack-charts") : formatNumber(info.value)}`;
-								return /* @__PURE__ */ jsx("div", {
-									id: `${chartId}-cell-${columnIndex}-${rowIndex}`,
-									role: "gridcell",
-									tabIndex: -1,
-									"aria-colindex": columnIndex + 1,
-									"aria-label": accessibleLabel,
-									"data-column": columnIndex,
-									"data-row": rowIndex,
-									className: clsx(heatmap_chart_module_default["heatmap-chart__cell"], {
-										[heatmap_chart_module_default["heatmap-chart__cell--filled"]]: filled,
-										[heatmap_chart_module_default["heatmap-chart__cell--strong"]]: filled && cellHasLightText(normalized),
-										[heatmap_chart_module_default["heatmap-chart__cell--summary"]]: column.summary,
-										...summaryGaps(columnIndex),
-										[heatmap_chart_module_default["heatmap-chart__cell--selected"]]: selectedIndex === flatIndex
-									}),
-									style: filled ? { "--a8c-charts-heatmap-cell-intensity": normalized } : void 0,
-									onMouseMove: handleCellMouseMove,
-									onMouseLeave: handleCellMouseLeave,
-									children: (drawValues || column.summary) && present && /* @__PURE__ */ jsx("span", {
-										className: heatmap_chart_module_default["heatmap-chart__cell-value"],
-										children: formatNumberCompact(value)
-									})
-								}, `cell-${columnIndex}-${rowIndex}`);
-							})]
-						}, `row-${rowIndex}`);
-					})]
+									className: heatmap_chart_module_default["heatmap-chart__row-label"],
+									style: {
+										gridColumn: 1,
+										gridRow
+									},
+									children: labelVisible ? rowLabels[rowIndex] ?? "" : ""
+								}), data.map((column, columnIndex) => {
+									const cell = column.data[rowIndex];
+									const placement = {
+										gridColumn: columnLine(columnIndex),
+										gridRow
+									};
+									if (cell?.hidden) return /* @__PURE__ */ jsx("div", {
+										"aria-hidden": "true",
+										style: placement,
+										className: clsx(heatmap_chart_module_default["heatmap-chart__cell"], heatmap_chart_module_default["heatmap-chart__cell--hidden"])
+									}, `cell-${columnIndex}-${rowIndex}`);
+									if (cell?.placeholder) return /* @__PURE__ */ jsx("div", {
+										"aria-hidden": "true",
+										style: placement,
+										className: clsx(heatmap_chart_module_default["heatmap-chart__cell"], heatmap_chart_module_default["heatmap-chart__cell--placeholder"])
+									}, `cell-${columnIndex}-${rowIndex}`);
+									const value = cell?.value ?? null;
+									const present = isPresent(value);
+									const filled = present && !column.summary;
+									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)}`;
+									return /* @__PURE__ */ jsx("div", {
+										id: `${chartId}-cell-${columnIndex}-${rowIndex}`,
+										role: "gridcell",
+										tabIndex: -1,
+										"aria-colindex": columnIndex + 1,
+										"aria-label": accessibleLabel,
+										"data-column": columnIndex,
+										"data-row": rowIndex,
+										className: clsx(heatmap_chart_module_default["heatmap-chart__cell"], {
+											[heatmap_chart_module_default["heatmap-chart__cell--filled"]]: filled,
+											[heatmap_chart_module_default["heatmap-chart__cell--strong"]]: filled && cellHasLightText(normalized),
+											[heatmap_chart_module_default["heatmap-chart__cell--summary"]]: column.summary,
+											...summaryGaps(columnIndex),
+											[heatmap_chart_module_default["heatmap-chart__cell--selected"]]: selected?.column === columnIndex && selected?.row === rowIndex
+										}),
+										style: {
+											...placement,
+											...filled ? { "--a8c-charts-heatmap-cell-intensity": normalized } : {}
+										},
+										onMouseMove: handleCellMouseMove,
+										onMouseLeave: handleCellMouseLeave,
+										children: (drawValues || column.summary) && present && /* @__PURE__ */ jsx("span", {
+											className: heatmap_chart_module_default["heatmap-chart__cell-value"],
+											children: formatNumberCompact(value)
+										})
+									}, `cell-${columnIndex}-${rowIndex}`);
+								})]
+							}, `row-${rowIndex}`);
+						}),
+						hasGroups && /* @__PURE__ */ jsx("div", {
+							role: "row",
+							"aria-hidden": "true",
+							className: heatmap_chart_module_default["heatmap-chart__row"],
+							children: groupLayout.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
+								},
+								children: group.label
+							}, `group-${groupIndex}`))
+						})
+					]
 				}), withTooltips && tooltipOpen && tooltipData && /* @__PURE__ */ jsx(BoundedTooltip, {
 					top: tooltipTop,
 					left: tooltipLeft,
+					className: tooltipVariant === "dark" ? base_tooltip_module_default.surface : void 0,
+					style: tooltipBoxStyle,
 					children: /* @__PURE__ */ jsx("div", {
 						className: standaloneScopeClass,
 						role: "tooltip",
@@ -6987,6 +7837,43 @@ const KEY_OPTIONS = {
 	day: "2-digit"
 };
 const DATE_PREFIX = /^(\d{4})-(\d{2})-(\d{2})/;
+/**
+* Label formatters for UTC proxies, so both calendar layouts name a day alike.
+*
+* `gregory` keeps a locale whose default calendar is not Gregorian (fa-IR) from
+* splitting one grid month across two names.
+*
+* @param locale - BCP 47 locale.
+* @return Weekday, month and full-day formatters.
+*/
+const civilLabelFormatters = (locale) => {
+	const formatting = {
+		locale,
+		timeZone: "UTC"
+	};
+	return {
+		formatWeekday: createDateFormatter({
+			weekday: "short",
+			calendar: "gregory"
+		}, formatting),
+		formatMonth: createDateFormatter({
+			month: "short",
+			calendar: "gregory"
+		}, formatting),
+		formatMonthYear: createDateFormatter({
+			month: "short",
+			year: "numeric",
+			calendar: "gregory"
+		}, formatting),
+		formatDay: createDateFormatter({
+			weekday: "short",
+			month: "short",
+			day: "numeric",
+			year: "numeric",
+			calendar: "gregory"
+		}, formatting)
+	};
+};
 const pad = (value, length) => String(value).padStart(length, "0");
 /**
 * The day a UTC proxy stands for.
@@ -7152,18 +8039,7 @@ const buildCalendarHeatmapData = (series, options = {}) => {
 	const gridMaxDayKey = widenTo(options.gridSpan?.end, maxDayKey, "later");
 	const requestedMinDate = civilDate(requestedMinDayKey);
 	const gridMaxDate = civilDate(gridMaxDayKey);
-	const labelFormatting = {
-		locale,
-		timeZone: "UTC"
-	};
-	const formatWeekday = createDateFormatter({ weekday: "short" }, labelFormatting);
-	const formatMonth = createDateFormatter({ month: "short" }, labelFormatting);
-	const formatDay = createDateFormatter({
-		weekday: "short",
-		month: "short",
-		day: "numeric",
-		year: "numeric"
-	}, labelFormatting);
+	const { formatWeekday, formatMonth, formatDay } = civilLabelFormatters(locale);
 	const gridStart = startOfCivilWeek(requestedMinDate, weekStartsOn);
 	const gridMinDayKey = requestedMinDayKey < minDayKey ? civilKey(gridStart) : requestedMinDayKey;
 	const weekCount = civilWeekSpan(gridStart, gridMaxDate, weekStartsOn);
@@ -7204,6 +8080,89 @@ const buildCalendarHeatmapData = (series, options = {}) => {
 	};
 };
 //#endregion
+//#region src/charts/heatmap-chart/build-month-calendar-data.ts
+/** Week rows per month, fixed so every month block is the same height. */
+const MONTH_ROWS = 6;
+const DAYS_PER_WEEK = 7;
+const startOfCivilMonth = (date) => {
+	const first = new Date(date.getTime());
+	first.setUTCDate(1);
+	return first;
+};
+const startOfNextCivilMonth = (date) => {
+	const next = startOfCivilMonth(date);
+	next.setUTCMonth(next.getUTCMonth() + 1);
+	return next;
+};
+/**
+* Lay a day-keyed map out as one month calendar per month, weekdays across and
+* weeks down, for `HeatmapChart` with `columnGroups`.
+*
+* @param valueByDay - Value per `yyyy-MM-dd`. A missing day is `null`.
+* @param range      - The measured days; every month from `start`'s through `end`'s is drawn.
+* @param options    - Week start and label locale.
+* @return Columns and one group per month; empty for an invalid or reversed range.
+*/
+const buildMonthCalendarHeatmapData = (valueByDay, range, options = {}) => {
+	const start = civilDate(range.start);
+	const end = civilDate(range.end);
+	if (!start || !end || start.getTime() > end.getTime()) {
+		warnOnce(`heatmap:monthRange:${range.start}:${range.end}`, `range ${JSON.stringify(range)} must be two \`yyyy-MM-dd\` days with start on or before end, so the calendar is empty.`);
+		return {
+			data: [],
+			columnGroups: []
+		};
+	}
+	const startKey = civilKey(start);
+	const endKey = civilKey(end);
+	const weekStartsOn = options.weekStartsOn ?? 1;
+	const { locale } = sanitizeFormatting({ locale: options.locale });
+	for (const key of Object.keys(valueByDay)) if (!civilDate(key)) warnOnce(`heatmap:monthKey:${key}`, `${JSON.stringify(key)} is not a \`yyyy-MM-dd\` day, so its value is left out of the calendar.`);
+	const readValue = (key) => {
+		const value = valueByDay[key];
+		return isPresent(value) ? value : null;
+	};
+	const { formatMonth, formatMonthYear, formatDay } = civilLabelFormatters(locale);
+	const data = [];
+	const columnGroups = [];
+	const lastMonthStart = startOfCivilMonth(end);
+	const formatGroup = (lastMonthStart.getUTCFullYear() - start.getUTCFullYear()) * 12 + lastMonthStart.getUTCMonth() - start.getUTCMonth() + 1 > 12 ? formatMonthYear : formatMonth;
+	for (let monthStart = startOfCivilMonth(start); monthStart.getTime() <= lastMonthStart.getTime(); monthStart = startOfNextCivilMonth(monthStart)) {
+		const monthStartKey = civilKey(monthStart);
+		const monthEndKey = civilKey(addCivilDays(startOfNextCivilMonth(monthStart), -1));
+		const gridStart = startOfCivilWeek(monthStart, weekStartsOn);
+		for (let weekday = 0; weekday < DAYS_PER_WEEK; weekday++) {
+			const cells = [];
+			for (let week = 0; week < MONTH_ROWS; week++) {
+				const day = addCivilDays(gridStart, week * DAYS_PER_WEEK + weekday);
+				const key = civilKey(day);
+				if (key < monthStartKey || key > monthEndKey) cells.push({
+					value: null,
+					hidden: true
+				});
+				else if (key < startKey || key > endKey) cells.push({
+					label: formatDay(day),
+					value: null,
+					placeholder: true
+				});
+				else cells.push({
+					label: formatDay(day),
+					value: readValue(key)
+				});
+			}
+			data.push({ data: cells });
+		}
+		columnGroups.push({
+			label: formatGroup(monthStart),
+			span: DAYS_PER_WEEK
+		});
+	}
+	return {
+		data,
+		columnGroups
+	};
+};
+//#endregion
 //#region src/charts/heatmap-chart/use-calendar-heatmap-data.ts
 /**
 * `buildCalendarHeatmapData` with the locale and zone taken from
@@ -7240,6 +8199,36 @@ const useCalendarHeatmapData = (series, options = {}) => {
 	]);
 };
 //#endregion
+//#region src/charts/heatmap-chart/use-month-calendar-heatmap-data.ts
+/**
+* `buildMonthCalendarHeatmapData` with the locale taken from `GlobalChartsProvider`
+* where the caller names none.
+*
+* @param valueByDay - Value per `yyyy-MM-dd`. Held by reference, so a caller that rebuilds it each render defeats the memo.
+* @param range      - As for `buildMonthCalendarHeatmapData`.
+* @param options    - As for `buildMonthCalendarHeatmapData`; `locale` wins over the provider.
+* @return Columns and groups for `HeatmapChart`.
+*/
+const useMonthCalendarHeatmapData = (valueByDay, range, options = {}) => {
+	const formatting = useChartFormatting();
+	const locale = options.locale ?? formatting.locale;
+	const { weekStartsOn } = options;
+	const { start, end } = range;
+	return useMemo(() => buildMonthCalendarHeatmapData(valueByDay, {
+		start,
+		end
+	}, {
+		locale,
+		weekStartsOn
+	}), [
+		valueByDay,
+		start,
+		end,
+		locale,
+		weekStartsOn
+	]);
+};
+//#endregion
 //#region ../../../node_modules/.pnpm/is-plain-object@5.1.0/node_modules/is-plain-object/dist/is-plain-object.mjs
 /*!
 * is-plain-object <https://github.com/jonschlinkert/is-plain-object>
@@ -7307,7 +8296,24 @@ function paramCase(input, options) {
 	return dotCase(input, __assign({ delimiter: "-" }, options));
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@date-fns+tz@1.4.1_@types+react-dom@18.3.7_@types+react@18_4546240ebdf94d561ebf2fde285113fe/node_modules/@wordpress/components/build-module/utils/hooks/use-update-effect.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+warning@3.55.0/node_modules/@wordpress/warning/build-module/utils.mjs
+var logged = /* @__PURE__ */ new Set();
+//#endregion
+//#region ../../../node_modules/.pnpm/@wordpress+warning@3.55.0/node_modules/@wordpress/warning/build-module/index.mjs
+function isDev() {
+	return globalThis.SCRIPT_DEBUG === true;
+}
+function warning(message) {
+	if (!isDev()) return;
+	if (logged.has(message)) return;
+	console.warn(message);
+	try {
+		throw Error(message);
+	} catch {}
+	logged.add(message);
+}
+//#endregion
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/utils/hooks/use-update-effect.mjs
 function useUpdateEffect(effect, deps) {
 	const mountedRef = useRef$1(false);
 	useEffect$1(() => {
@@ -8877,7 +9883,7 @@ _createEmotion.css;
 _createEmotion.sheet;
 _createEmotion.cache;
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@date-fns+tz@1.4.1_@types+react-dom@18.3.7_@types+react@18_4546240ebdf94d561ebf2fde285113fe/node_modules/@wordpress/components/build-module/utils/hooks/use-cx.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/utils/hooks/use-cx.mjs
 var isSerializedStyles = (o) => typeof o !== "undefined" && o !== null && ["name", "styles"].every((p) => typeof o[p] !== "undefined");
 var useCx = () => {
 	const cache = __unsafe_useEmotionCache();
@@ -8984,7 +9990,7 @@ function memize(fn, options) {
 	return memoized;
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@date-fns+tz@1.4.1_@types+react-dom@18.3.7_@types+react@18_4546240ebdf94d561ebf2fde285113fe/node_modules/@wordpress/components/build-module/utils/colors-values.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/utils/colors-values.mjs
 var white = "#fff";
 var GRAY = {
 	900: "#1e1e1e",
@@ -9034,8 +10040,8 @@ var UI = {
 	border: THEME.gray[600],
 	borderHover: THEME.gray[700],
 	borderFocus: THEME.accent,
-	borderDisabled: THEME.gray[400],
-	textDisabled: THEME.gray[600],
+	borderDisabled: `var(--wpds-color-stroke-interactive-neutral-disabled, #dbdbdb)`,
+	textDisabled: `var(--wpds-color-foreground-interactive-neutral-disabled, #8d8d8d)`,
 	darkGrayPlaceholder: `color-mix(in srgb, ${THEME.foreground}, transparent 38%)`,
 	lightGrayPlaceholder: `color-mix(in srgb, ${THEME.background}, transparent 35%)`
 };
@@ -9063,7 +10069,7 @@ var COLORS = Object.freeze({
 	ui: UI
 });
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@date-fns+tz@1.4.1_@types+react-dom@18.3.7_@types+react@18_4546240ebdf94d561ebf2fde285113fe/node_modules/@wordpress/components/build-module/utils/config-values.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/utils/config-values.mjs
 var CONTROL_HEIGHT = "36px";
 var CONTROL_PROPS = {
 	controlPaddingX: 12,
@@ -9117,8 +10123,8 @@ var config_values_default = Object.assign({}, CONTROL_PROPS, {
 	transitionTimingFunctionControl: "cubic-bezier(0.12, 0.8, 0.32, 1)"
 });
 //#endregion
-//#region ../../../node_modules/.pnpm/fast-deep-equal@3.1.3/node_modules/fast-deep-equal/es6/index.js
-var require_es6 = /* @__PURE__ */ __commonJSMin(((exports, module) => {
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/context/context-system-provider.mjs
+var import_es6 = /* @__PURE__ */ __toESM((/* @__PURE__ */ __commonJSMin(((exports, module) => {
 	module.exports = function equal(a, b) {
 		if (a === b) return true;
 		if (a && b && typeof a == "object" && typeof b == "object") {
@@ -9162,31 +10168,8 @@ var require_es6 = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 		}
 		return a !== a && b !== b;
 	};
-}));
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+warning@3.54.0/node_modules/@wordpress/warning/build-module/utils.mjs
-var logged = /* @__PURE__ */ new Set();
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+warning@3.54.0/node_modules/@wordpress/warning/build-module/index.mjs
-function isDev() {
-	return globalThis.SCRIPT_DEBUG === true;
-}
-function warning(message) {
-	if (!isDev()) return;
-	if (logged.has(message)) return;
-	console.warn(message);
-	try {
-		throw Error(message);
-	} catch {}
-	logged.add(message);
-}
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@date-fns+tz@1.4.1_@types+react-dom@18.3.7_@types+react@18_4546240ebdf94d561ebf2fde285113fe/node_modules/@wordpress/components/build-module/context/context-system-provider.mjs
-var import_es6 = /* @__PURE__ */ __toESM(require_es6(), 1);
-var ComponentsContext = createContext$1(
-	/** @type {Record<string, any>} */
-	{}
-);
+})))(), 1);
+var ComponentsContext = createContext$1({});
 ComponentsContext.displayName = "ComponentsContext";
 var useComponentsContext = () => useContext$1(ComponentsContext);
 function useContextSystemBridge({ value }) {
@@ -9208,18 +10191,18 @@ var BaseContextSystemProvider = ({ children, value }) => {
 };
 memo(BaseContextSystemProvider);
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@date-fns+tz@1.4.1_@types+react-dom@18.3.7_@types+react@18_4546240ebdf94d561ebf2fde285113fe/node_modules/@wordpress/components/build-module/context/constants.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/context/constants.mjs
 var COMPONENT_NAMESPACE = "data-wp-component";
 var CONNECTED_NAMESPACE = "data-wp-c16t";
 var CONNECT_STATIC_NAMESPACE = "__contextSystemKey__";
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@date-fns+tz@1.4.1_@types+react-dom@18.3.7_@types+react@18_4546240ebdf94d561ebf2fde285113fe/node_modules/@wordpress/components/build-module/context/get-styled-class-name-from-key.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/context/get-styled-class-name-from-key.mjs
 function getStyledClassName(namespace) {
 	return `components-${paramCase(namespace)}`;
 }
 var getStyledClassNameFromKey = memize(getStyledClassName);
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@date-fns+tz@1.4.1_@types+react-dom@18.3.7_@types+react@18_4546240ebdf94d561ebf2fde285113fe/node_modules/@wordpress/components/build-module/context/context-connect.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/context/context-connect.mjs
 function contextConnect(Component, namespace) {
 	return _contextConnect(Component, namespace, { forwardsRef: true });
 }
@@ -9236,7 +10219,7 @@ function _contextConnect(Component, namespace, options) {
 	});
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@date-fns+tz@1.4.1_@types+react-dom@18.3.7_@types+react@18_4546240ebdf94d561ebf2fde285113fe/node_modules/@wordpress/components/build-module/context/utils.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/context/utils.mjs
 function getNamespace(componentName) {
 	return { [COMPONENT_NAMESPACE]: componentName };
 }
@@ -9244,7 +10227,7 @@ function getConnectedNamespace() {
 	return { [CONNECTED_NAMESPACE]: true };
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@date-fns+tz@1.4.1_@types+react-dom@18.3.7_@types+react@18_4546240ebdf94d561ebf2fde285113fe/node_modules/@wordpress/components/build-module/context/use-context-system.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/context/use-context-system.mjs
 function useContextSystem(props, namespace) {
 	const contextSystemProps = useComponentsContext();
 	if (typeof namespace === "undefined") globalThis.SCRIPT_DEBUG === true && warning("useContextSystem: Please provide a namespace");
@@ -9253,10 +10236,12 @@ function useContextSystem(props, namespace) {
 		...getConnectedNamespace(),
 		...getNamespace(namespace)
 	};
-	const { _overrides: overrideProps, ...otherContextProps } = contextProps;
+	const { _overrides, ...otherContextProps } = contextProps;
+	const overrideProps = _overrides;
 	const initialMergedProps = Object.entries(otherContextProps).length ? Object.assign({}, otherContextProps, props) : props;
+	const propsWithChildren = initialMergedProps;
 	const classes = useCx()(getStyledClassNameFromKey(namespace), props.className);
-	const rendered = typeof initialMergedProps.renderChildren === "function" ? initialMergedProps.renderChildren(initialMergedProps) : initialMergedProps.children;
+	const rendered = typeof propsWithChildren.renderChildren === "function" ? propsWithChildren.renderChildren(initialMergedProps) : propsWithChildren.children;
 	for (const key in initialMergedProps) finalComponentProps[key] = initialMergedProps[key];
 	for (const key in overrideProps) finalComponentProps[key] = overrideProps[key];
 	if (rendered !== void 0) finalComponentProps.children = rendered;
@@ -9264,7 +10249,7 @@ function useContextSystem(props, namespace) {
 	return finalComponentProps;
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@date-fns+tz@1.4.1_@types+react-dom@18.3.7_@types+react@18_4546240ebdf94d561ebf2fde285113fe/node_modules/@wordpress/components/build-module/visually-hidden/styles.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/visually-hidden/styles.mjs
 var visuallyHidden = {
 	border: 0,
 	clip: "rect(1px, 1px, 1px, 1px)",
@@ -9280,7 +10265,7 @@ var visuallyHidden = {
 	wordBreak: "normal"
 };
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@date-fns+tz@1.4.1_@types+react-dom@18.3.7_@types+react@18_4546240ebdf94d561ebf2fde285113fe/node_modules/@wordpress/components/build-module/utils/polymorphic-element.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/utils/polymorphic-element.mjs
 var customAttributeRegExp = /^(data|aria|x)-/i;
 var eventHandlerRegExp = /^on[A-Z]/;
 var svgElementNames = new Set(`animate animateMotion animateTransform circle clipPath defs desc ellipse
@@ -9370,7 +10355,7 @@ function UnforwardedPolymorphicElement({ as, ...props }, ref) {
 }
 var PolymorphicElement = forwardRef$1(UnforwardedPolymorphicElement);
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@date-fns+tz@1.4.1_@types+react-dom@18.3.7_@types+react@18_4546240ebdf94d561ebf2fde285113fe/node_modules/@wordpress/components/build-module/view/component.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/view/component.mjs
 function UnforwardedView({ css, ...restProps }, ref) {
 	return /* @__PURE__ */ jsx(PolymorphicElement, {
 		ref,
@@ -9379,7 +10364,7 @@ function UnforwardedView({ css, ...restProps }, ref) {
 }
 var component_default$2 = Object.assign(forwardRef$1(UnforwardedView), { selector: ".components-view" });
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@date-fns+tz@1.4.1_@types+react-dom@18.3.7_@types+react@18_4546240ebdf94d561ebf2fde285113fe/node_modules/@wordpress/components/build-module/visually-hidden/component.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/visually-hidden/component.mjs
 function UnconnectedVisuallyHidden(props, forwardedRef) {
 	const { style: styleProp, ...contextProps } = useContextSystem(props, "VisuallyHidden");
 	return /* @__PURE__ */ jsx(component_default$2, {
@@ -9394,7 +10379,7 @@ function UnconnectedVisuallyHidden(props, forwardedRef) {
 }
 var component_default$1 = contextConnect(UnconnectedVisuallyHidden, "VisuallyHidden");
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@date-fns+tz@1.4.1_@types+react-dom@18.3.7_@types+react@18_4546240ebdf94d561ebf2fde285113fe/node_modules/@wordpress/components/build-module/utils/use-responsive-value.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/utils/use-responsive-value.mjs
 var breakpoints = [
 	"40em",
 	"52em",
@@ -9428,7 +10413,7 @@ function useResponsiveValue(values, options = {}) {
 	return array[index >= array.length ? array.length - 1 : index];
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@date-fns+tz@1.4.1_@types+react-dom@18.3.7_@types+react@18_4546240ebdf94d561ebf2fde285113fe/node_modules/@wordpress/components/build-module/grid/utils.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/grid/utils.mjs
 var ALIGNMENTS = {
 	bottom: {
 		alignItems: "flex-end",
@@ -9476,7 +10461,7 @@ function getAlignmentProps(alignment) {
 	return alignment ? ALIGNMENTS[alignment] : {};
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@date-fns+tz@1.4.1_@types+react-dom@18.3.7_@types+react@18_4546240ebdf94d561ebf2fde285113fe/node_modules/@wordpress/components/build-module/grid/hook.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/grid/hook.mjs
 function useGrid(props) {
 	const { align, alignment, className, columnGap, columns = 2, gap = 3, isInline = false, justify, rowGap, rows, templateColumns, templateRows, ...otherProps } = useContextSystem(props, "Grid");
 	const column = useResponsiveValue(Array.isArray(columns) ? columns : [columns]);
@@ -9518,7 +10503,7 @@ function useGrid(props) {
 	};
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@date-fns+tz@1.4.1_@types+react-dom@18.3.7_@types+react@18_4546240ebdf94d561ebf2fde285113fe/node_modules/@wordpress/components/build-module/grid/component.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/grid/component.mjs
 function UnconnectedGrid(props, forwardedRef) {
 	const gridProps = useGrid(props);
 	return /* @__PURE__ */ jsx(component_default$2, {
@@ -10774,6 +11759,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, defaultTheme, formatMetricValue, formatPercentage, getBucketInfo, getColorDistance, hexToRgba, isValidHexColor, lightenHexColor, mergeThemes, mixHexColors, normalizeColorToHex, parseAsLocalDate, parseHslString, prefersLightText, relativeLuminance, resolveCssVariable, useCalendarHeatmapData, useChartFormatting, useChartLegendItems, useChartRegistration, useChartScopeElement, useGlobalChartsContext, useGlobalChartsTheme, useLeaderboardLegendItems, 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, 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 };
 
 //# sourceMappingURL=index.js.map