@automattic/charts 4.11.1 → 4.13.0

package/dist/index.js

@@ -1,7 +1,7 @@
 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, GlyphSeries, Grid, TooltipContext, XYChart, buildChartTheme, useEventEmitter } from "@visx/xychart";
-import { __, _x, sprintf } from "@wordpress/i18n";
+import { __, _n, _x, sprintf } from "@wordpress/i18n";
 import clsx from "clsx";
 import * as React from "react";
 import { Children, Fragment, createContext, createContext as createContext$1, createElement, forwardRef, forwardRef as forwardRef$1, isValidElement, memo, useCallback, useCallback as useCallback$1, useContext, useContext as useContext$1, useEffect, useEffect as useEffect$1, useId, useImperativeHandle, useLayoutEffect, useMemo, useMemo as useMemo$1, useRef, useRef as useRef$1, useState, useState as useState$1, version } from "react";
@@ -30,7 +30,7 @@ import { __assign } from "tslib";
 import "@babel/runtime/helpers/esm/extends";
 import { Icon, chevronRight } from "@wordpress/icons";
 import { arc, pie } from "@visx/shape";
-//#region \0rolldown/runtime.js
+// \0rolldown/runtime.js
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -52,26 +52,22 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 	value: mod,
 	enumerable: true
 }) : target, mod));
-//#endregion
-//#region src/charts/private/chart-instance-context/chart-instance-context.ts
+// src/charts/private/chart-instance-context/chart-instance-context.ts
 const ChartInstanceContext = createContext(null);
-//#endregion
-//#region src/charts/private/chart-instance-context/use-chart-instance-context.ts
+// src/charts/private/chart-instance-context/use-chart-instance-context.ts
 const useChartInstanceContext = () => {
 	const context = useContext(ChartInstanceContext);
 	if (!context) throw new Error("useChartInstanceContext must be used within a Chart component");
 	return context;
 };
-//#endregion
-//#region src/styles/chart-scope-class.ts
+// src/styles/chart-scope-class.ts
 /**
 * Stable class that carries the `--a8c-charts-*` catalog. Applied to the `GlobalChartsProvider` wrapper, to portal-rendered surfaces (which sit outside the provider tree), and to standalone components when no provider is above them.
 *
 * Deliberately unhashed: consumers are documented as being able to target it to override a token on the provider element.
 */
 const CHART_SCOPE_CLASS = "a8c-charts-scope";
-//#endregion
-//#region src/utils/create-composition.ts
+// src/utils/create-composition.ts
 /**
 * Utility function to create chart components with composition API.
 *
@@ -85,8 +81,7 @@ const CHART_SCOPE_CLASS = "a8c-charts-scope";
 function attachSubComponents(Chart, subComponents) {
 	return Object.assign(Chart, subComponents);
 }
-//#endregion
-//#region src/utils/warn-once.ts
+// src/utils/warn-once.ts
 const warned = /* @__PURE__ */ new Set();
 /**
 * Warns about a host-supplied value once per process, and never in production.
@@ -99,8 +94,7 @@ const warnOnce = (key, message) => {
 	warned.add(key);
 	console.warn(`[Charts] ${message}`);
 };
-//#endregion
-//#region src/utils/date-parsing.ts
+// src/utils/date-parsing.ts
 /**
 * @file Date parsing: a naive string is dated in a supplied IANA zone, or the runtime's own
 *
@@ -195,8 +189,7 @@ const parseAsLocalDate = (dateString, timeZone) => {
 	}
 	return /* @__PURE__ */ new Date(NaN);
 };
-//#endregion
-//#region src/utils/bucket-info.ts
+// src/utils/bucket-info.ts
 const getInstant = (point) => {
 	if (!point) return;
 	if ("date" in point && point.date) return point.date.getTime();
@@ -228,8 +221,7 @@ const getBucketInfo = (data, tickResolution) => ({
 	bucket: tickResolution ?? getBucketResolution(data),
 	displayResolution: getBucketResolution(data, tickResolution)
 });
-//#endregion
-//#region src/utils/format-metric-value.ts
+// src/utils/format-metric-value.ts
 /**
 * Format a numeric metric value based on type, precision and scale.
 * Supports currency, number and percentage, using `@automattic/number-formatters`.
@@ -278,8 +270,7 @@ const formatMetricValue = (value, type = "number", { decimals, useMultipliers =
 		});
 	}
 };
-//#endregion
-//#region src/utils/format-percentage.ts
+// src/utils/format-percentage.ts
 /**
 * Format a percentage value with smart decimal handling.
 * Uses `@automattic/number-formatters` for consistent formatting.
@@ -295,8 +286,7 @@ const formatPercentage = (value) => {
 		maximumFractionDigits: 2
 	} });
 };
-//#endregion
-//#region src/utils/get-edge-tick-widths.ts
+// src/utils/get-edge-tick-widths.ts
 /**
 * Rendered widths of the first and last tick labels on an axis.
 *
@@ -320,8 +310,7 @@ const getEdgeTickWidths = (ticks, formatTick, labelStyle) => {
 		last: getStringWidth(label(ticks[lastIndex], lastIndex), labelStyle) ?? 0
 	};
 };
-//#endregion
-//#region src/utils/get-longest-tick-width.ts
+// src/utils/get-longest-tick-width.ts
 /**
 * Returns the width of the longest tick.
 *
@@ -335,8 +324,7 @@ const getLongestTickWidth = (ticks, formatTick, labelStyle) => {
 	const longestTick = formattedTicks.reduce((longest, current) => longest.length >= current.length ? longest : current, formattedTicks[0]);
 	return getStringWidth(longestTick, labelStyle);
 };
-//#endregion
-//#region src/utils/get-styles.ts
+// src/utils/get-styles.ts
 /**
 * Utility function to get consolidated line styles for a series
 * This consolidates the logic used by both LineChart and Legend components
@@ -389,19 +377,16 @@ function getItemShapeStyles(series, index, theme, legendShape) {
 		...barShapeStyles
 	};
 }
-//#endregion
-//#region src/utils/is-safari.ts
+// src/utils/is-safari.ts
 const isSafari = () => {
 	if (typeof navigator !== "undefined" && navigator.userAgent) return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 	return false;
 };
-//#endregion
-//#region src/utils/merge-themes.ts
+// src/utils/merge-themes.ts
 function mergeThemes(baseTheme, overrideTheme) {
 	return deepmerge(baseTheme, overrideTheme, { arrayMerge: (_destinationArray, sourceArray) => sourceArray });
 }
-//#endregion
-//#region src/utils/color-utils.ts
+// src/utils/color-utils.ts
 /**
 * Check if a value is a valid 6-digit hex color
 * @param hex - The value to check
@@ -568,8 +553,7 @@ const prefersLightText = (backgroundHex) => {
 	if (!isValidHexColor(backgroundHex)) return false;
 	return relativeLuminance(backgroundHex) <= .179;
 };
-//#endregion
-//#region src/utils/resolve-css-var.ts
+// src/utils/resolve-css-var.ts
 /**
 * Pattern for valid CSS custom property names (e.g., '--my-color', '--jp-gray-10')
 */
@@ -666,8 +650,7 @@ function readCustomProperty(varName, styles) {
 		return null;
 	}
 }
-//#endregion
-//#region src/utils/resolve-font-size.ts
+// src/utils/resolve-font-size.ts
 const toFontSize = (size) => Number.isFinite(size) && size >= 0 ? size : void 0;
 /**
 * Resolve a theme `fontSize` value into a plain number suitable for
@@ -694,8 +677,7 @@ const resolveFontSize = (val) => {
 		return match ? toFontSize(parseFloat(match[1])) : void 0;
 	}
 };
-//#endregion
-//#region src/utils/date-formatting.ts
+// src/utils/date-formatting.ts
 const formatters = /* @__PURE__ */ new Map();
 const getFormatter$1 = (options, { locale, timeZone }) => {
 	const key = `${locale ?? ""}|${timeZone ?? ""}|${JSON.stringify(options)}`;
@@ -794,8 +776,7 @@ const createZonedClock = (timeZone) => {
 		};
 	};
 };
-//#endregion
-//#region src/providers/chart-scope/chart-scope-context.ts
+// src/providers/chart-scope/chart-scope-context.ts
 /**
 * The nearest chart element, published so JS token resolution reads the same CSS cascade that paints the chart's own colours.
 *
@@ -812,8 +793,7 @@ const seriesRole = (slot) => `--a8c-charts-color-series-${slot}`;
 const SERIES_SLOT_1_FALLBACK = "#3858e9";
 /** The catalog pointer for every slot, in slot order. */
 const SERIES_PALETTE_POINTERS = Array.from({ length: 5 }, (_, index) => index === 0 ? `var(${seriesRole(1)}, ${SERIES_SLOT_1_FALLBACK})` : `var(${seriesRole(index + 1)})`);
-//#endregion
-//#region src/providers/chart-context/private/catalog-pointers.ts
+// src/providers/chart-context/private/catalog-pointers.ts
 /** Terminal literals the provider also generates from before its first read, so SSR and the first client render agree. */
 const BACKGROUND_FALLBACK = "#ffffff";
 const LABEL_FALLBACK = "#1e1e1e";
@@ -853,8 +833,7 @@ const ANNOTATION_POINTERS = {
 		radius: 5
 	}
 };
-//#endregion
-//#region src/providers/chart-context/private/perceptual-color.ts
+// src/providers/chart-context/private/perceptual-color.ts
 const DEUTERANOPIA = [
 	.367322,
 	.860646,
@@ -1260,16 +1239,14 @@ const buildPaletteGenerator = (normalizedSeeds, background, labelColors) => {
 		return palette[index].hex;
 	};
 };
-//#endregion
-//#region src/providers/chart-context/private/resolve-opaque-hex.ts
+// src/providers/chart-context/private/resolve-opaque-hex.ts
 const resolveOpaqueHex = (pointer, resolve) => {
 	const raw = resolve(pointer);
 	if (!raw || color(raw)?.opacity !== 1) return null;
 	const hex = normalizeColorToHex(raw);
 	return isValidHexColor(hex) ? hex : null;
 };
-//#endregion
-//#region src/providers/chart-context/themes.ts
+// src/providers/chart-context/themes.ts
 /**
 * Default theme configuration: the shape and spacing a consumer can override.
 *
@@ -1296,10 +1273,7 @@ const defaultTheme = {
 		strokeDasharray: "4 4",
 		strokeLinecap: "square"
 	} } },
-	barChart: { barStyles: { comparison: {
-		widthFactor: 1.5,
-		opacity: .5
-	} } },
+	barChart: { barStyles: { comparison: { widthFactor: 1.5 } } },
 	sparkline: {
 		margin: {
 			top: 2,
@@ -1315,8 +1289,7 @@ const defaultTheme = {
 		groupGap: 24
 	}
 };
-//#endregion
-//#region src/providers/chart-context/global-charts-provider.tsx
+// src/providers/chart-context/global-charts-provider.tsx
 const PLACEHOLDER_LABEL_COLORS = [LABEL_FALLBACK, LABEL_INVERSE_FALLBACK];
 const GlobalChartsContext = createContext(null);
 const GlobalChartsProvider = ({ children, theme, locale, timeZone }) => {
@@ -1457,6 +1430,7 @@ const GlobalChartsProvider = ({ children, theme, locale, timeZone }) => {
 		theme: providerTheme,
 		formatting,
 		getElementStyles,
+		backgroundColor: colorCache.background,
 		toggleSeriesVisibility,
 		setSeriesVisibility,
 		setChartHiddenSeries,
@@ -1473,6 +1447,7 @@ const GlobalChartsProvider = ({ children, theme, locale, timeZone }) => {
 		providerTheme,
 		formatting,
 		getElementStyles,
+		colorCache.background,
 		toggleSeriesVisibility,
 		setSeriesVisibility,
 		setChartHiddenSeries,
@@ -1495,21 +1470,18 @@ const GlobalChartsProvider = ({ children, theme, locale, timeZone }) => {
 		})
 	});
 };
-//#endregion
-//#region src/providers/chart-context/hooks/use-global-charts-context.ts
+// src/providers/chart-context/hooks/use-global-charts-context.ts
 const useGlobalChartsContext = () => {
 	const context = useContext(GlobalChartsContext);
 	if (!context) throw new Error("useGlobalChartsContext must be used within a GlobalChartsProvider");
 	return context;
 };
-//#endregion
-//#region src/providers/chart-context/hooks/use-chart-id.ts
+// src/providers/chart-context/hooks/use-chart-id.ts
 const useChartId = (providedId) => {
 	const generatedId = useId();
 	return providedId || generatedId;
 };
-//#endregion
-//#region src/hooks/use-deep-memo.ts
+// src/hooks/use-deep-memo.ts
 var import_fast_deep_equal = /* @__PURE__ */ __toESM((/* @__PURE__ */ __commonJSMin(((exports, module) => {
 	module.exports = function equal(a, b) {
 		if (a === b) return true;
@@ -1550,16 +1522,14 @@ const useDeepMemo = (value) => {
 	if (!(0, import_fast_deep_equal.default)(ref.current, value)) ref.current = value;
 	return ref.current;
 };
-//#endregion
-//#region src/providers/chart-scope/use-chart-scope-element.ts
+// src/providers/chart-scope/use-chart-scope-element.ts
 /**
 * Returns the nearest chart scope element, or `null` when rendered outside any scope (and during SSR, before the ref is attached).
 *
 * @return {HTMLElement | null} The nearest chart scope element, or `null`.
 */
 const useChartScopeElement = () => useContext(ChartScopeContext);
-//#endregion
-//#region src/providers/chart-scope/use-standalone-scope-class.ts
+// src/providers/chart-scope/use-standalone-scope-class.ts
 /**
 * Returns the catalog class when there is no `GlobalChartsProvider` above this component, and `undefined` when there is.
 *
@@ -1568,8 +1538,7 @@ const useChartScopeElement = () => useContext(ChartScopeContext);
 * @return The scope class name, or undefined when a provider is present.
 */
 const useStandaloneScopeClass = () => useContext(GlobalChartsContext) ? void 0 : CHART_SCOPE_CLASS;
-//#endregion
-//#region src/hooks/use-xychart-theme.ts
+// src/hooks/use-xychart-theme.ts
 const STARTS_LIKE_A_NUMBER = /^[+-]?[\d.]/;
 const NON_NEGATIVE_CSS_NUMBER = /^\+?(?:\d*\.)?\d+(?:e[+-]?\d+)?(?:[a-z]+|%)?$/i;
 const isRenderableFontSize = (fontSize) => {
@@ -1625,8 +1594,7 @@ const useXYChartTheme = (data) => {
 		scopeElement
 	]);
 };
-//#endregion
-//#region src/providers/chart-context/hooks/use-chart-formatting.ts
+// src/providers/chart-context/hooks/use-chart-formatting.ts
 const RUNTIME_FORMATTING = {};
 /**
 * The locale and time zone dates are rendered in, as set on `GlobalChartsProvider`.
@@ -1640,8 +1608,7 @@ const RUNTIME_FORMATTING = {};
 const useChartFormatting = () => {
 	return useContext(GlobalChartsContext)?.formatting ?? RUNTIME_FORMATTING;
 };
-//#endregion
-//#region src/hooks/use-chart-data-transform.ts
+// src/hooks/use-chart-data-transform.ts
 /**
 * Hook that transforms and sorts chart data, handling date parsing and sorting
 *
@@ -1676,8 +1643,7 @@ const useChartDataTransform = (data) => {
 		}));
 	}, [data, timeZone]);
 };
-//#endregion
-//#region src/hooks/use-chart-margin.tsx
+// src/hooks/use-chart-margin.tsx
 /**
 * Base top margin used when no dynamic adjustments are necessary.
 */
@@ -1799,8 +1765,7 @@ const useChartMargin = (height, options, data, theme, horizontal = false) => {
 		yTicks
 	]);
 };
-//#endregion
-//#region src/hooks/use-element-size.ts
+// src/hooks/use-element-size.ts
 /**
 * Hook to measure the width and height of a DOM element.
 * Returns a ref callback to attach to the element and the current dimensions in pixels.
@@ -1837,8 +1802,7 @@ function useElementSize({ initialWidth = 0, initialHeight = 0 } = {}) {
 		height
 	];
 }
-//#endregion
-//#region src/hooks/use-text-truncation.ts
+// src/hooks/use-text-truncation.ts
 /**
 * Hook to detect if text content is truncated within its container.
 * Uses ResizeObserver to dynamically track changes in element size.
@@ -1879,8 +1843,7 @@ function useTextTruncation(enabled = true) {
 		} else setIsTruncated(false);
 	}, [enabled]), isTruncated];
 }
-//#endregion
-//#region src/hooks/use-zero-value-display.ts
+// src/hooks/use-zero-value-display.ts
 /**
 * Minimum pixel size for near-zero bars (non-zero values that would render too small).
 * Using 3px to be visible but not misleading - larger values might look like actual data.
@@ -1920,8 +1883,7 @@ const useZeroValueDisplay = (data, options = { enabled: false }) => {
 		valueAxisLength
 	]);
 };
-//#endregion
-//#region src/hooks/use-data-with-percentages.ts
+// src/hooks/use-data-with-percentages.ts
 /**
 * Hook to calculate percentages from values for chart data.
 * Ensures percentages are always derived from values (single source of truth).
@@ -1938,8 +1900,7 @@ const useDataWithPercentages = (data) => {
 		}));
 	}, [data]);
 };
-//#endregion
-//#region src/hooks/use-legend-visibility-data.ts
+// src/hooks/use-legend-visibility-data.ts
 /**
 * Custom hook to filter and recalculate chart data based on series visibility.
 *
@@ -2011,8 +1972,7 @@ const useLegendVisibilityData = ({ data, chartId, isSeriesVisible }) => {
 		])
 	};
 };
-//#endregion
-//#region src/hooks/use-prefers-reduced-motion.ts
+// src/hooks/use-prefers-reduced-motion.ts
 const QUERY = "(prefers-reduced-motion: no-preference)";
 const getInitialState = () => !window.matchMedia(QUERY).matches;
 /**
@@ -2033,11 +1993,9 @@ function usePrefersReducedMotion() {
 	}, []);
 	return prefersReducedMotion;
 }
-//#endregion
-//#region src/hooks/use-isomorphic-layout-effect.ts
+// src/hooks/use-isomorphic-layout-effect.ts
 const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
-//#endregion
-//#region src/providers/chart-context/hooks/use-chart-registration.ts
+// src/providers/chart-context/hooks/use-chart-registration.ts
 const useChartRegistration = ({ chartId, legendItems, chartType, isDataValid, metadata }) => {
 	const { registerChart, unregisterChart } = useGlobalChartsContext();
 	const stableLegendItems = useDeepMemo(legendItems);
@@ -2059,8 +2017,7 @@ const useChartRegistration = ({ chartId, legendItems, chartType, isDataValid, me
 		isDataValid
 	]);
 };
-//#endregion
-//#region src/providers/chart-context/hooks/use-global-charts-theme.ts
+// src/providers/chart-context/hooks/use-global-charts-theme.ts
 /**
 * Hook to get the global chart theme from GlobalChartsProvider
 *
@@ -2069,8 +2026,7 @@ const useChartRegistration = ({ chartId, legendItems, chartType, isDataValid, me
 const useGlobalChartsTheme = () => {
 	return useContext(GlobalChartsContext)?.theme ?? defaultTheme;
 };
-//#endregion
-//#region src/components/legend/utils/value-or-identity.ts
+// src/components/legend/utils/value-or-identity.ts
 /**
 * Returns an object's value if defined, or the object.
 * @param _ - The object to return the value of.
@@ -2088,8 +2044,7 @@ function valueOrIdentity(_) {
 function valueOrIdentityString(_) {
 	return String(valueOrIdentity(_));
 }
-//#endregion
-//#region src/components/legend/private/base-legend.module.scss
+// src/components/legend/private/base-legend.module.scss
 var base_legend_module_default = {
 	"legend": "a8ccharts-04TogW-legend",
 	"legend--horizontal": "a8ccharts-04TogW-legend--horizontal",
@@ -2101,8 +2056,7 @@ var base_legend_module_default = {
 	"legend-item-text--wrap": "a8ccharts-04TogW-legend-item-text--wrap",
 	"legend-item-value": "a8ccharts-04TogW-legend-item-value"
 };
-//#endregion
-//#region src/components/legend/private/base-legend.tsx
+// src/components/legend/private/base-legend.tsx
 const ALIGNMENT_TO_FLEX = {
 	start: "flex-start",
 	center: "center",
@@ -2267,8 +2221,7 @@ const BaseLegend = forwardRef(({ items: allItems, className, orientation = "hori
 		})
 	});
 });
-//#endregion
-//#region src/components/legend/legend.tsx
+// src/components/legend/legend.tsx
 const defaultShapeByChartType = {
 	area: "rect",
 	line: "line",
@@ -2294,8 +2247,22 @@ const Legend = forwardRef(({ chartId, items, shape, ...props }, ref) => {
 		chartId: contextChartId
 	});
 });
-//#endregion
-//#region src/components/legend/hooks/use-chart-legend-items.ts
+// src/components/legend/hooks/use-chart-legend-items.ts
+/**
+* Wraps `getElementStyles` so a swatch takes the color given for its series.
+* @param getElementStyles - Function to get element styles
+* @param seriesColors     - Each series' swatch color, by index
+* @return Element styles with the given color
+*/
+function withSeriesColors(getElementStyles, seriesColors) {
+	return (params) => {
+		const styles = getElementStyles(params);
+		return {
+			...styles,
+			color: seriesColors[params.index] ?? styles.color
+		};
+	};
+}
 /**
 * Formats the value for a data point based on its type and display preference
 * @param point              - The data point to format
@@ -2508,21 +2475,22 @@ 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, comparisonItem = false, comparisonSeriesItems, renderGlyph } = options;
-	const { getElementStyles } = useGlobalChartsContext();
+	const { showValues = false, legendValueDisplay = "percentage", withGlyph = false, glyphSize = 8, collapseGroups = false, comparisonItem = false, comparisonSeriesItems, seriesColors, renderGlyph } = options;
+	const { getElementStyles: getSeriesStyles } = useGlobalChartsContext();
 	return useMemo(() => {
 		if (!data || !Array.isArray(data) || data.length === 0) return [];
 		if ("data" in data[0]) {
 			const seriesData = data;
+			const getElementStyles = seriesColors ? withSeriesColors(getSeriesStyles, seriesColors) : getSeriesStyles;
 			const items = processSeriesData(seriesData, getElementStyles, showValues, withGlyph, glyphSize, collapseGroups, renderGlyph, legendShape);
 			if (comparisonSeriesItems) return [...items, ...buildPerSeriesComparisonItems(seriesData, items, comparisonSeriesItems, getElementStyles, 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);
+		return processPointData(data, getSeriesStyles, showValues, legendValueDisplay, withGlyph, glyphSize, renderGlyph, legendShape);
 	}, [
 		data,
-		getElementStyles,
+		getSeriesStyles,
 		showValues,
 		legendValueDisplay,
 		withGlyph,
@@ -2530,19 +2498,18 @@ function useChartLegendItems(data, options = {}, legendShape) {
 		collapseGroups,
 		comparisonItem,
 		comparisonSeriesItems,
+		seriesColors,
 		renderGlyph,
 		legendShape
 	]);
 }
-//#endregion
-//#region src/components/tooltip/private/label-value-content.tsx
+// src/components/tooltip/private/label-value-content.tsx
 const LabelValueContent = ({ data }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
 	data.label,
 	": ",
 	data.valueDisplay || formatNumber(data.value)
 ] });
-//#endregion
-//#region src/components/tooltip/private/tooltip-theme.tsx
+// src/components/tooltip/private/tooltip-theme.tsx
 const DEFAULT_SURFACE = "#1e1e1e";
 const TOOLTIP_SURFACE = `var(--a8c-charts-color-tooltip-surface, ${DEFAULT_SURFACE})`;
 const toSeed = (value) => {
@@ -2565,11 +2532,9 @@ const TooltipTheme = ({ children }) => {
 		children
 	});
 };
-//#endregion
-//#region src/components/tooltip/tooltip-box.module.scss
+// src/components/tooltip/tooltip-box.module.scss
 var tooltip_box_module_default = { "surface": "a8ccharts-ddpU1W-surface" };
-//#endregion
-//#region src/components/tooltip/tooltip-box.tsx
+// src/components/tooltip/tooltip-box.tsx
 /**
 * The chart tooltip box: the dark surface every chart tooltip draws. It does not position itself; place it with `style` or a wrapper.
 *
@@ -2589,8 +2554,7 @@ const TooltipBox = forwardRef(({ unstyled = false, role = "tooltip", className,
 	return unstyled ? box : /* @__PURE__ */ jsx(TooltipTheme, { children: box });
 });
 TooltipBox.displayName = "TooltipBox";
-//#endregion
-//#region src/components/tooltip/base-tooltip.tsx
+// src/components/tooltip/base-tooltip.tsx
 /**
 * A tooltip box with children or `label: value` content. Prefer `TooltipBox`.
 *
@@ -2624,6 +2588,80 @@ const BaseTooltip = ({ data, top, left, component: Component = LabelValueContent
 		children: content
 	});
 };
+// src/components/tooltip/private/keyboard-stops.ts
+const timeOf$1 = (point) => point?.date?.getTime();
+const getXPositions = (series) => {
+	const positions = /* @__PURE__ */ new Set();
+	for (const { data } of series) for (const point of data) {
+		const time = timeOf$1(point);
+		if (time !== void 0) positions.add(time);
+	}
+	return [...positions].sort((a, b) => a - b);
+};
+/**
+* Keyboard stops over the series: the sorted union of their dates, or array indexes when no point has a date.
+*
+* Once any point has a date, a series of undated points has no stop.
+*
+* @param series - The series to step through.
+* @return The stop count, and each series' point at a stop.
+*/
+const getKeyboardStops = (series) => {
+	const positions = getXPositions(series);
+	if (positions.length === 0) return {
+		count: Math.max(0, ...series.map(({ data }) => data.length)),
+		membersAt: (stop) => series.flatMap((s) => stop < s.data.length ? [{
+			series: s,
+			datum: s.data[stop],
+			index: stop
+		}] : [])
+	};
+	return {
+		count: positions.length,
+		membersAt: (stop) => {
+			const time = positions[stop];
+			if (time === void 0) return [];
+			return series.flatMap((s) => {
+				const index = s.data.findIndex((point) => timeOf$1(point) === time);
+				return index === -1 ? [] : [{
+					series: s,
+					datum: s.data[index],
+					index
+				}];
+			});
+		}
+	};
+};
+// src/components/tooltip/private/at-nearest-date.ts
+const timeOf = (datum) => datum.date?.getTime();
+/**
+* Lists every registered series at the nearest datum's date, each with its own point there.
+*
+* The pointer hands each series its own nearest point, which for a series that skips that date, or that the pointer sits nearer another date of, is a neighbor's.
+*
+* @param tooltipData - The tooltip data visx collected.
+* @param registry    - The chart's data registry.
+* @return The tooltip data, unchanged when the nearest datum has no date.
+*/
+const atNearestDate = (tooltipData, registry) => {
+	const nearest = tooltipData?.nearestDatum?.datum;
+	const time = nearest ? timeOf(nearest) : void 0;
+	if (!tooltipData || time === void 0) return tooltipData;
+	const datumByKey = {};
+	for (const { key, data } of registry?.entries() ?? []) {
+		const index = data.findIndex((datum) => timeOf(datum) === time);
+		if (index !== -1) datumByKey[key] = {
+			key,
+			index,
+			datum: data[index]
+		};
+	}
+	for (const [key, entry] of Object.entries(tooltipData.datumByKey)) if (!datumByKey[key] && timeOf(entry.datum) === time) datumByKey[key] = entry;
+	return {
+		...tooltipData,
+		datumByKey
+	};
+};
 const POINTER_HEIGHT = 6;
 const clamp = (position, min, max, size) => Math.min(Math.max(position, min), Math.max(min, max - size));
 const isClipping = (element) => {
@@ -2802,8 +2840,7 @@ const BoundedTooltip = ({ left = 0, top = 0, offsetLeft = 10, offsetTop = 10, st
 		}), children]
 	});
 };
-//#endregion
-//#region src/components/tooltip/private/xy-chart-tooltip-overlay.tsx
+// src/components/tooltip/private/xy-chart-tooltip-overlay.tsx
 const CROSSHAIR_STROKE_WIDTH = 1.5;
 const CROSSHAIR_PAINT_PROPERTIES = /* @__PURE__ */ new Set([
 	"stroke",
@@ -2988,18 +3025,21 @@ const XyChartTooltipContent = ({ tooltipContext, container, renderTooltip, rende
 */
 const XyChartTooltipOverlay = (props) => {
 	const tooltipContext = useContext(TooltipContext);
+	const dataRegistry = useContext(DataContext)?.dataRegistry;
 	const [container, setContainer] = useState(null);
 	const anchorRef = useCallback((node) => {
 		setContainer(node?.ownerSVGElement?.parentElement ?? null);
 	}, []);
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("g", { ref: anchorRef }), tooltipContext?.tooltipOpen && /* @__PURE__ */ jsx(XyChartTooltipContent, {
 		...props,
-		tooltipContext,
+		tooltipContext: {
+			...tooltipContext,
+			tooltipData: atNearestDate(tooltipContext.tooltipData, dataRegistry)
+		},
 		container
 	})] });
 };
-//#endregion
-//#region src/components/tooltip/xy-chart-tooltip.tsx
+// src/components/tooltip/xy-chart-tooltip.tsx
 const XYChartTooltip = ({ renderTooltip, selectedIndex, tooltipRef, keyboardFocusedClassName, series = [], mode = "group", verticalCrosshairStyle, horizontalCrosshairStyle, ...props }) => {
 	const tooltipContext = useContext(TooltipContext);
 	const scopeElement = useChartScopeElement();
@@ -3024,6 +3064,7 @@ const XYChartTooltip = ({ renderTooltip, selectedIndex, tooltipRef, keyboardFocu
 		}
 		return flattened;
 	}, [series, mode]);
+	const stops = useMemo(() => getKeyboardStops(series), [series]);
 	const hasKeyboardSelection = useRef(false);
 	const closeTooltipNow = useCallback(() => {
 		tooltipContext?.updateTooltip({
@@ -3055,19 +3096,22 @@ const XYChartTooltip = ({ renderTooltip, selectedIndex, tooltipRef, keyboardFocu
 			return;
 		}
 		hasKeyboardSelection.current = true;
-		if (mode === "group") series.forEach((s, index) => {
-			if (selectedIndex < s.data.length) {
-				const datum = s.data[selectedIndex];
+		if (mode === "group") {
+			closeTooltipNow();
+			stops.membersAt(selectedIndex).forEach(({ series: member, datum, index }) => {
 				tooltipContext?.showTooltip({
 					datum,
-					key: s.label,
+					key: member.label,
 					index
 				});
-			}
-		});
-		else if (mode === "individual") {
+			});
+		} else if (mode === "individual") {
 			if (selectedIndex < tooltipData.length) {
 				const tooltipItem = tooltipData[selectedIndex];
+				tooltipContext?.updateTooltip((state) => ({
+					...state,
+					tooltipData: void 0
+				}));
 				tooltipContext?.showTooltip({
 					datum: tooltipItem.datum,
 					key: tooltipItem.seriesLabel,
@@ -3078,7 +3122,7 @@ const XYChartTooltip = ({ renderTooltip, selectedIndex, tooltipRef, keyboardFocu
 	}, [
 		selectedIndex,
 		tooltipData,
-		series
+		stops
 	]);
 	const focusableRenderTooltip = useMemo(() => {
 		if (!renderTooltip) return void 0;
@@ -3228,8 +3272,7 @@ const useKeyboardNavigation = ({ selectedIndex, setSelectedIndex, isNavigating,
 		onChartPointerMove
 	};
 };
-//#endregion
-//#region src/providers/chart-context/hooks/use-default-hidden-series.ts
+// src/providers/chart-context/hooks/use-default-hidden-series.ts
 /**
 * Seeds a chart's hidden series once per chart ID, the first time the provider
 * sees that ID.
@@ -3264,8 +3307,7 @@ const useDefaultHiddenSeries = (chartId, seriesLabels) => {
 		chartId
 	]);
 };
-//#endregion
-//#region src/charts/private/chart-composition/chart-svg.tsx
+// src/charts/private/chart-composition/chart-svg.tsx
 /**
 * Compound component for SVG children in charts.
 * This component serves as a marker for SVG content that should be rendered
@@ -3279,8 +3321,7 @@ const ChartSVG = ({ children }) => {
 	return /* @__PURE__ */ jsx(Fragment$1, { children });
 };
 ChartSVG.displayName = "Chart.SVG";
-//#endregion
-//#region src/charts/private/chart-composition/chart-html.tsx
+// src/charts/private/chart-composition/chart-html.tsx
 /**
 * Compound component for HTML children in charts.
 * This component serves as a marker for HTML content that should be rendered
@@ -3294,8 +3335,7 @@ const ChartHTML = ({ children }) => {
 	return /* @__PURE__ */ jsx(Fragment$1, { children });
 };
 ChartHTML.displayName = "Chart.HTML";
-//#endregion
-//#region src/charts/private/chart-composition/render-legend-slot.ts
+// src/charts/private/chart-composition/render-legend-slot.ts
 /**
 * Renders legend children filtered by position slot.
 *
@@ -3306,8 +3346,7 @@ ChartHTML.displayName = "Chart.HTML";
 function renderLegendSlot(legendChildren, position) {
 	return legendChildren.filter((l) => l.position === position).map((l, i) => createElement(Fragment, { key: `legend-${position}-${i}` }, l.element));
 }
-//#endregion
-//#region src/charts/private/chart-composition/use-chart-children.ts
+// src/charts/private/chart-composition/use-chart-children.ts
 /**
 * Custom hook to process and categorize chart children for composition API.
 * Extracts children from compound components (Chart.SVG, Chart.HTML) and
@@ -3360,11 +3399,9 @@ function useChartChildren(children, chartType) {
 		};
 	}, [children, chartType]);
 }
-//#endregion
-//#region src/charts/private/chart-layout/chart-layout.module.scss
+// src/charts/private/chart-layout/chart-layout.module.scss
 var chart_layout_module_default = { "chart-layout__content": "a8ccharts-fpNVAq-chart-layout__content" };
-//#endregion
-//#region src/charts/private/chart-layout/chart-layout.tsx
+// src/charts/private/chart-layout/chart-layout.tsx
 const ChartLayout = ({ legendPosition, legendElement, legendChildren, children, trailingContent, onContentHeightChange, gap, className, rootRef, style, "data-testid": dataTestId, "data-chart-id": dataChartId }) => {
 	const [contentRef, contentWidth, contentHeight] = useElementSize();
 	const isRenderProp = typeof children === "function";
@@ -3407,8 +3444,7 @@ const ChartLayout = ({ legendPosition, legendElement, legendChildren, children,
 		]
 	});
 };
-//#endregion
-//#region src/charts/private/default-glyph/default-glyph.tsx
+// src/charts/private/default-glyph/default-glyph.tsx
 const DefaultGlyph = (props) => {
 	const { theme } = useContext(DataContext) || {};
 	props.position;
@@ -3423,8 +3459,7 @@ const DefaultGlyph = (props) => {
 		...props.glyphStyle
 	});
 };
-//#endregion
-//#region src/charts/private/readings.ts
+// src/charts/private/readings.ts
 /**
 * Whether a value is a reading a scale can place.
 *
@@ -3448,11 +3483,9 @@ const isInvalidReading = (value, { allowMissing }) => value === null ? !allowMis
 * @return The formatted value.
 */
 const formatReading = (value) => value == null ? __("No data", "jetpack-charts") : formatNumber(value);
-//#endregion
-//#region src/charts/private/center/center.module.scss
+// src/charts/private/center/center.module.scss
 var center_module_default = { "center": "a8ccharts-w3qxlG-center" };
-//#endregion
-//#region src/charts/private/center/center.tsx
+// src/charts/private/center/center.tsx
 /**
 * Centers its children on both axes and fills its parent.
 *
@@ -3474,11 +3507,9 @@ const Center = forwardRef(({ align = "center", justify = "center", className, ..
 	...props
 }));
 Center.displayName = "Center";
-//#endregion
-//#region src/charts/private/svg-empty-state/svg-empty-state.module.scss
+// src/charts/private/svg-empty-state/svg-empty-state.module.scss
 var svg_empty_state_module_default = { "svg-empty-state": "a8ccharts-udGPVq-svg-empty-state" };
-//#endregion
-//#region src/charts/private/svg-empty-state/svg-empty-state.tsx
+// src/charts/private/svg-empty-state/svg-empty-state.tsx
 /**
 * Renders empty-state text inside an SVG using foreignObject so that the
 * message wraps onto multiple lines instead of being clipped.
@@ -3505,8 +3536,7 @@ const SvgEmptyState = ({ x, y, width, height, children }) => {
 		})
 	});
 };
-//#endregion
-//#region src/charts/private/svg-empty-state/get-all-hidden-message.ts
+// src/charts/private/svg-empty-state/get-all-hidden-message.ts
 /**
 * Return the empty-state message for a chart whose items are all hidden.
 *
@@ -3526,8 +3556,7 @@ const getAllHiddenMessage = (interactive, itemType) => {
 	if (interactive) return _x("All series are hidden. Click legend items to show data.", "chart empty state: interactive series", "jetpack-charts");
 	return _x("All series are hidden.", "chart empty state: series", "jetpack-charts");
 };
-//#endregion
-//#region src/charts/private/time-axis.ts
+// src/charts/private/time-axis.ts
 const X_TICK_WIDTH = 60;
 const getCurveType = (type, smoothing) => {
 	if (!type) return smoothing ? curveCatmullRom : curveLinear;
@@ -3784,8 +3813,7 @@ const guessOptimalNumTicks = (data, chartWidth, tickFormatter) => {
 	}
 	return Math.max(1, secondBestGuess);
 };
-//#endregion
-//#region src/charts/private/time-axis-options.ts
+// src/charts/private/time-axis-options.ts
 const toDateDomain = (domain) => domain ? [new Date(domain[0]), new Date(domain[1])] : void 0;
 /**
 * The x-axis options for a continuous time chart, shared by LineChart and AreaChart.
@@ -3820,8 +3848,7 @@ const buildTimeAxisOptions = ({ dataSorted, width, axisOptions, scaleDomain, zoo
 		...numTicks === void 0 ? {} : { numTicks }
 	};
 };
-//#endregion
-//#region src/charts/private/whole-number-ticks.tsx
+// src/charts/private/whole-number-ticks.tsx
 /**
 * Whether every reading in the series is a whole number.
 *
@@ -3868,15 +3895,13 @@ const WholeNumberTicks = ({ axis, numTicks, enabled, children }) => {
 	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
+// src/charts/private/with-responsive/with-responsive.module.scss
 var with_responsive_module_default = {
 	"container": "a8ccharts-sP1gHa-container",
 	"content": "a8ccharts-sP1gHa-content",
 	"isContained": "a8ccharts-sP1gHa-isContained"
 };
-//#endregion
-//#region src/charts/private/with-responsive/with-responsive.tsx
+// src/charts/private/with-responsive/with-responsive.tsx
 /**
 * A higher-order component that provides responsive dimensions
 * to the wrapped chart component using useParentSize from `@visx/responsive`.
@@ -3955,14 +3980,12 @@ function withResponsive(WrappedComponent) {
 		});
 	};
 }
-//#endregion
-//#region src/charts/private/x-zoom/x-zoom.module.scss
+// src/charts/private/x-zoom/x-zoom.module.scss
 var x_zoom_module_default = {
 	"x-zoom__reset": "a8ccharts-ur9dWW-x-zoom__reset",
 	"x-zoom__selection": "a8ccharts-ur9dWW-x-zoom__selection"
 };
-//#endregion
-//#region src/charts/private/x-zoom/x-zoom.tsx
+// src/charts/private/x-zoom/x-zoom.tsx
 const MIN_DRAG_PIXELS = 6;
 /**
 * Drag-to-zoom state + pointer handlers for an XY chart. Designed to be
@@ -4145,11 +4168,9 @@ function ZoomResetButton({ onClick }) {
 		})
 	});
 }
-//#endregion
-//#region src/charts/private/xy-plot/xy-plot.module.scss
+// src/charts/private/xy-plot/xy-plot.module.scss
 var xy_plot_module_default = { "xy-plot": "a8ccharts-bIyhgG-xy-plot" };
-//#endregion
-//#region src/charts/line-chart/line-chart.module.scss
+// src/charts/line-chart/line-chart.module.scss
 var line_chart_module_default = {
 	"line-chart": "a8ccharts-inuQka-line-chart",
 	"line-chart__annotation-label": "a8ccharts-inuQka-line-chart__annotation-label",
@@ -4251,8 +4272,7 @@ const LineChartAnnotationLabelWithPopover = ({ title, subtitle, renderLabel, ren
 		})]
 	});
 };
-//#endregion
-//#region src/charts/line-chart/private/line-chart-annotations-overlay.tsx
+// src/charts/line-chart/private/line-chart-annotations-overlay.tsx
 const LineChartAnnotationsOverlay = ({ children }) => {
 	const { chartRef, chartWidth, chartHeight } = useChartInstanceContext();
 	const [scales, setScales] = useState(null);
@@ -4335,8 +4355,7 @@ const LineChartAnnotationsOverlay = ({ children }) => {
 		})
 	});
 };
-//#endregion
-//#region src/charts/line-chart/private/line-chart-annotation.tsx
+// src/charts/line-chart/private/line-chart-annotation.tsx
 const ANNOTATION_MAX_WIDTH = 125;
 const ANNOTATION_INIT_HEIGHT = 100;
 const getLabelPosition = ({ subjectType, x, xMax, y, yMin, yMax, maxWidth, height }) => {
@@ -4529,8 +4548,7 @@ const LineChartAnnotation = ({ datum, title, subtitle, subjectType = "circle", s
 		]
 	}) });
 };
-//#endregion
-//#region src/charts/line-chart/private/line-chart-glyph.tsx
+// src/charts/line-chart/private/line-chart-glyph.tsx
 const toNumber$1 = (val) => {
 	const num = typeof val === "number" ? val : parseFloat(val);
 	return isNaN(num) ? void 0 : num;
@@ -4560,8 +4578,7 @@ const LineChartGlyph = ({ data, index, color, glyphStyle, renderGlyph, accessors
 		position
 	});
 };
-//#endregion
-//#region src/charts/line-chart/private/nearest-pointer-events.tsx
+// src/charts/line-chart/private/nearest-pointer-events.tsx
 /**
 * Find the datum nearest a pointer along x, in one series sorted by x.
 *
@@ -4660,8 +4677,7 @@ function NearestPointerEvents({ onPointerDown, onPointerMove, onPointerUp }) {
 	useEventEmitter("pointerup", handlers.pointerup);
 	return null;
 }
-//#endregion
-//#region src/charts/line-chart/line-chart.tsx
+// src/charts/line-chart/line-chart.tsx
 const defaultRenderGlyph = (props) => {
 	return /* @__PURE__ */ createElement(DefaultGlyph, {
 		...props,
@@ -4812,6 +4828,8 @@ const LineChartInternal = forwardRef(({ data, ariaLabel, chartId: providedChartI
 			isVisible: !hiddenSeries.has(series.label)
 		}));
 	}, [dataSorted, hiddenSeries]);
+	const visibleSeries = useMemo(() => dataSorted.filter((series) => isSeriesVisible(series.label)), [dataSorted, isSeriesVisible]);
+	const visibleSeriesKey = useMemo(() => JSON.stringify(visibleSeries.map((series) => series.label)), [visibleSeries]);
 	const allSeriesHidden = useMemo(() => {
 		return seriesWithVisibility.every(({ isVisible }) => !isVisible);
 	}, [seriesWithVisibility]);
@@ -4841,22 +4859,23 @@ const LineChartInternal = forwardRef(({ data, ariaLabel, chartId: providedChartI
 		isSeriesVisible,
 		options?.yScale
 	]);
-	const activateSelectedPoint = useCallback((index) => {
-		const series = dataSorted[0];
-		const datum = series?.data[index];
-		if (series && datum) onDatumActivate?.({
-			datum,
-			index,
-			key: series.label
+	const stops = useMemo(() => getKeyboardStops(visibleSeries), [visibleSeries]);
+	const activateSelectedPoint = useCallback((stop) => {
+		const match = stops.membersAt(stop)[0];
+		if (match) onDatumActivate?.({
+			datum: match.datum,
+			index: match.index,
+			key: match.series.label
 		});
-	}, [dataSorted, onDatumActivate]);
+	}, [stops, onDatumActivate]);
 	const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation({
 		selectedIndex,
 		setSelectedIndex,
 		isNavigating,
 		setIsNavigating,
 		chartRef,
-		totalPoints: dataSorted[0]?.data.length || 0,
+		totalPoints: stops.count,
+		visibleSeriesKey,
 		onActivate: activateSelectedPoint,
 		preventTooltipScroll: tooltipPlacement === "below-axis"
 	});
@@ -4875,7 +4894,7 @@ const LineChartInternal = forwardRef(({ data, ariaLabel, chartId: providedChartI
 		}
 		return min <= max ? [min, max] : void 0;
 	}, [dataSorted, isSeriesVisible]);
-	const hasWholeNumberValues = useMemo(() => hasOnlyWholeNumbers(dataSorted.filter((series) => isSeriesVisible(series.label))), [dataSorted, isSeriesVisible]);
+	const hasWholeNumberValues = useMemo(() => hasOnlyWholeNumbers(visibleSeries), [visibleSeries]);
 	const chartOptions = useMemo(() => {
 		const fallbackYDomain = getFallbackYDomain(visibleReadingExtent, options?.yScale?.type === "log");
 		return {
@@ -4921,11 +4940,7 @@ const LineChartInternal = forwardRef(({ data, ariaLabel, chartId: providedChartI
 		formatting,
 		isSeriesVisible
 	]);
-	const bucketInfo = useMemo(() => getBucketInfo(dataSorted.filter((series) => isSeriesVisible(series.label)), options?.axis?.x?.tickResolution), [
-		dataSorted,
-		isSeriesVisible,
-		options?.axis?.x?.tickResolution
-	]);
+	const bucketInfo = useMemo(() => getBucketInfo(visibleSeries, options?.axis?.x?.tickResolution), [visibleSeries, options?.axis?.x?.tickResolution]);
 	const tooltipRenderGlyph = useMemo(() => {
 		return (props) => {
 			const seriesIndex = dataSorted.findIndex((series) => series.label === props.key || series.data.includes(props.datum));
@@ -5155,7 +5170,7 @@ const LineChartInternal = forwardRef(({ data, ariaLabel, chartId: providedChartI
 									selectedIndex,
 									tooltipRef,
 									keyboardFocusedClassName: line_chart_module_default["line-chart__tooltip--keyboard-focused"],
-									series: dataSorted
+									series: visibleSeries
 								}),
 								/* @__PURE__ */ jsx(LineChartScalesRef, {
 									chartRef: internalChartRef,
@@ -5193,15 +5208,13 @@ const LineChartResponsive = attachSubComponents(withResponsive(LineChartWithProv
 	AnnotationsOverlay: LineChartAnnotationsOverlay,
 	Annotation: LineChartAnnotation
 });
-//#endregion
-//#region src/charts/area-chart/area-chart.module.scss
+// src/charts/area-chart/area-chart.module.scss
 var area_chart_module_default = {
 	"area-chart": "a8ccharts-jlynaq-area-chart",
 	"area-chart--animated": "a8ccharts-jlynaq-area-chart--animated",
 	"rise": "a8ccharts-jlynaq-rise"
 };
-//#endregion
-//#region src/charts/area-chart/private/validate-data.ts
+// src/charts/area-chart/private/validate-data.ts
 /**
 * Up-front data validation. Returns a localised error message when the chart
 * cannot safely render, otherwise `null`. Catches the cases that would
@@ -5217,8 +5230,7 @@ const validateData$3 = (data) => {
 	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
-//#region src/charts/area-chart/private/overlays.tsx
+// src/charts/area-chart/private/overlays.tsx
 const AreaChartScalesRef = ({ chartRef, width, height, margin }) => {
 	const context = useContext(DataContext);
 	useImperativeHandle(chartRef, () => ({
@@ -5283,8 +5295,7 @@ const HoverGlyphs = ({ visibleSeries, stacked, stackOffset, getElementStyles, st
 		children: circles
 	});
 };
-//#endregion
-//#region src/charts/area-chart/area-chart.tsx
+// src/charts/area-chart/area-chart.tsx
 const AreaChartInternal = forwardRef(({ data, ariaLabel, chartId: providedChartId, width, height, className, margin, withTooltips = true, withTooltipCrosshairs, showLegend = false, legend = {}, stacked = true, stackOffset = "none", smoothing = true, curveType, fillOpacity, withStroke, renderTooltip = renderDefaultTooltip, animation, options = {}, onPointerDown, onPointerUp, onPointerMove, onPointerOut, zoomable = false, rescaleYOnVisibilityChange = true, defaultHiddenSeries, children, gridVisibility, gap = "md" }, ref) => {
 	const legendInteractive = legend.interactive ?? false;
 	const legendShape = legend.shape ?? "rect";
@@ -5330,19 +5341,22 @@ const AreaChartInternal = forwardRef(({ data, ariaLabel, chartId: providedChartI
 		}));
 	}, [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,
+	const visibleDataSeries = useMemo(() => dataSorted.filter((series) => isSeriesVisible(series.label)), [dataSorted, isSeriesVisible]);
+	const hasWholeNumberValues = useMemo(() => (!stacked || stackOffset === "none") && hasOnlyWholeNumbers(visibleDataSeries), [
+		visibleDataSeries,
 		stacked,
 		stackOffset
 	]);
+	const visibleSeriesKey = useMemo(() => JSON.stringify(visibleDataSeries.map((series) => series.label)), [visibleDataSeries]);
+	const stops = useMemo(() => getKeyboardStops(visibleDataSeries), [visibleDataSeries]);
 	const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation({
 		selectedIndex,
 		setSelectedIndex,
 		isNavigating,
 		setIsNavigating,
 		chartRef,
-		totalPoints: dataSorted[0]?.data.length || 0
+		totalPoints: stops.count,
+		visibleSeriesKey
 	});
 	const fixedYDomain = useMemo(() => {
 		if (rescaleYOnVisibilityChange || !dataSorted.length || !dataSorted[0].data.length || stacked && stackOffset !== "none") return;
@@ -5630,7 +5644,7 @@ const AreaChartInternal = forwardRef(({ data, ariaLabel, chartId: providedChartI
 									selectedIndex,
 									tooltipRef,
 									keyboardFocusedClassName: area_chart_module_default["area-chart__tooltip--keyboard-focused"],
-									series: dataSorted
+									series: visibleDataSeries
 								}), /* @__PURE__ */ jsx(HoverGlyphs, {
 									visibleSeries,
 									stacked,
@@ -5666,8 +5680,7 @@ const AreaChartWithProvider = forwardRef((props, ref) => {
 AreaChartWithProvider.displayName = "AreaChart";
 const AreaChart = attachSubComponents(AreaChartWithProvider, { Legend });
 const AreaChartResponsive = attachSubComponents(withResponsive(AreaChartWithProvider), { Legend });
-//#endregion
-//#region src/charts/bar-chart/bar-chart.module.scss
+// src/charts/bar-chart/bar-chart.module.scss
 var bar_chart_module_default = {
 	"bar-chart": "a8ccharts-97yN9W-bar-chart",
 	"bar-chart--animated": "a8ccharts-97yN9W-bar-chart--animated",
@@ -5675,8 +5688,7 @@ var bar_chart_module_default = {
 	"rise": "a8ccharts-97yN9W-rise",
 	"stretch": "a8ccharts-97yN9W-stretch"
 };
-//#endregion
-//#region src/charts/bar-chart/private/truncated-tick-component.tsx
+// src/charts/bar-chart/private/truncated-tick-component.tsx
 /**
 * Get the bandwidth of a scale
 *
@@ -5790,8 +5802,7 @@ const createTruncatedTickComponent = (axis) => (props) => {
 */
 const TruncatedXTickComponent = createTruncatedTickComponent("x");
 const TruncatedYTickComponent = createTruncatedTickComponent("y");
-//#endregion
-//#region src/charts/bar-chart/private/value-domain.ts
+// 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];
 /**
@@ -5815,13 +5826,6 @@ const getBarValue = (point) => {
 */
 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
@@ -5849,8 +5853,7 @@ const getValueScaleDomain = (data, includeZero, isSeriesRendered) => {
 	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
+// 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;
 /** Inner padding of the category band scale (the base gap between ticks). */
@@ -6066,8 +6069,7 @@ function useBarChartOptions(data, horizontal, options = {}, isSeriesRendered = A
 		isSeriesRendered
 	]);
 }
-//#endregion
-//#region src/charts/bar-chart/private/band-scale.ts
+// src/charts/bar-chart/private/band-scale.ts
 /**
 * Match the inner slot scale used by visx BarGroup.
 * @param keys      - Visible primary series keys.
@@ -6080,11 +6082,9 @@ const createGroupScale = (keys, bandwidth, padding) => scaleBand({
 	range: [0, bandwidth],
 	padding
 });
-//#endregion
-//#region src/charts/bar-chart/private/comparison-bars-geometry.ts
+// src/charts/bar-chart/private/comparison-bars-geometry.ts
 /**
-* Mirrors visx's getScaleBaseline so comparison shadows and primary bars
-* share the same baseline, including out-of-domain zero values.
+* Mirrors visx's getScaleBaseline so bars drawn outside visx share the baseline of its bars, including out-of-domain zero values.
 *
 * @param {ValueScale} scale - The continuous value scale.
 * @return {number} The baseline output position in pixels.
@@ -6098,41 +6098,37 @@ function getValueScaleBaseline(scale) {
 	return Number.isFinite(maybeZero) ? Math.max(maybeZero, minOutput) : minOutput;
 }
 /**
-* Compute the rect for a comparison "shadow" bar, centered on the paired
-* primary bar slot and scaled by `widthFactor`.
-*
-* @param {object}  params               - Geometry inputs.
-* @param {boolean} params.horizontal    - True for a horizontal bar chart, false for vertical.
-* @param {number}  params.bandPosition  - bandScale(category): start px of the category band.
-* @param {number}  params.slotOffset    - groupScale(primaryKey): offset of the primary slot within the band.
-* @param {number}  params.slotThickness - groupScale.bandwidth(): primary bar thickness in px.
-* @param {number}  params.valuePosition - valueScale(value): output px for the bar's data value.
-* @param {number}  params.baseline      - getValueScaleBaseline(valueScale): zero-line output px.
-* @param {number}  params.widthFactor   - Shadow thickness multiplier, e.g. 1.5 for 150% width.
-* @return {ComparisonRect} The {x, y, width, height} of the shadow rect.
-*/
-function computeComparisonRect(params) {
-	const { horizontal, bandPosition, slotOffset, slotThickness, valuePosition, baseline, widthFactor } = params;
-	const slotStart = bandPosition + slotOffset;
-	const shadowThickness = slotThickness * widthFactor;
-	const shadowStart = slotStart + slotThickness / 2 - shadowThickness / 2;
-	const valueStart = Math.min(valuePosition, baseline);
-	const valueLength = Math.abs(baseline - valuePosition);
+* Compute the rect that spans `valuePositions` along the value axis, centered on a slot and scaled by `widthFactor` across it.
+*
+* @param {object}   params                - Geometry inputs.
+* @param {boolean}  params.horizontal     - True for a horizontal bar chart, false for vertical.
+* @param {number}   params.bandPosition   - bandScale(category): start px of the category band.
+* @param {number}   params.slotOffset     - groupScale(slotKey): offset of the slot within the band.
+* @param {number}   params.slotThickness  - groupScale.bandwidth(): slot thickness in px.
+* @param {number[]} params.valuePositions - Output px the rect must reach, such as the baseline and each bar's value.
+* @param {number}   params.widthFactor    - Thickness multiplier, e.g. 0.5 for half the slot.
+* @return {SlotRect} The {x, y, width, height} of the rect.
+*/
+function computeSlotRect(params) {
+	const { horizontal, bandPosition, slotOffset, slotThickness, valuePositions, widthFactor } = params;
+	const thickness = slotThickness * widthFactor;
+	const start = bandPosition + slotOffset + slotThickness / 2 - thickness / 2;
+	const valueStart = Math.min(...valuePositions);
+	const valueLength = Math.max(...valuePositions) - valueStart;
 	if (horizontal) return {
 		x: valueStart,
-		y: shadowStart,
+		y: start,
 		width: valueLength,
-		height: shadowThickness
+		height: thickness
 	};
 	return {
-		x: shadowStart,
+		x: start,
 		y: valueStart,
-		width: shadowThickness,
+		width: thickness,
 		height: valueLength
 	};
 }
-//#endregion
-//#region src/charts/bar-chart/private/classified-bar-series.tsx
+// src/charts/bar-chart/private/classified-bar-series.tsx
 const ClassifiedBarSeries = ({ barClassName, primaryKeys, groupPadding, ...props }) => {
 	const { xScale, yScale, horizontal } = useContext(DataContext);
 	const bandScale = horizontal ? yScale : xScale;
@@ -6176,6 +6172,515 @@ const ClassifiedBarSeries = ({ barClassName, primaryKeys, groupPadding, ...props
 		renderGlyph
 	});
 };
+// src/charts/bar-chart/private/slotted-bar-series.tsx
+const SlottedBarSeries = ({ barClassName, slotKeys, slotKey, thickness, groupPadding, ...props }) => {
+	const { xScale, yScale, horizontal } = useContext(DataContext);
+	const bandScale = horizontal ? yScale : xScale;
+	const valueScale = horizontal ? xScale : yScale;
+	const groupScale = useMemo(() => createGroupScale(slotKeys, bandScale?.bandwidth?.() ?? 0, groupPadding), [
+		slotKeys,
+		bandScale,
+		groupPadding
+	]);
+	const renderGlyph = useCallback(({ datum, x, y, color }) => {
+		if (!bandScale?.bandwidth || !valueScale) return null;
+		const baseline = getValueScaleBaseline(valueScale);
+		const rect = computeSlotRect({
+			horizontal: !!horizontal,
+			bandPosition: Number(bandScale((horizontal ? props.yAccessor : props.xAccessor)(datum))),
+			slotOffset: groupScale(slotKey) ?? 0,
+			slotThickness: groupScale.bandwidth(),
+			valuePositions: [baseline, horizontal ? x : y],
+			widthFactor: thickness
+		});
+		return /* @__PURE__ */ jsx("rect", {
+			...rect,
+			className: clsx("visx-bar", barClassName?.(datum)),
+			fill: color
+		});
+	}, [
+		bandScale,
+		valueScale,
+		horizontal,
+		groupScale,
+		slotKey,
+		thickness,
+		props.xAccessor,
+		props.yAccessor,
+		barClassName
+	]);
+	return /* @__PURE__ */ jsx(GlyphSeries, {
+		...props,
+		enableEvents: false,
+		renderGlyph
+	});
+};
+// src/charts/private/selected-ring/selected-ring.module.scss
+var selected_ring_module_default = {
+	"selected-ring__contrast": "a8ccharts-gx1_AW-selected-ring__contrast",
+	"selected-ring__edge": "a8ccharts-gx1_AW-selected-ring__edge",
+	"selected-ring__far": "a8ccharts-gx1_AW-selected-ring__far",
+	"selected-ring__focus": "a8ccharts-gx1_AW-selected-ring__focus"
+};
+// src/charts/private/selected-ring/selected-ring.tsx
+const TONES = {
+	inside: ["contrast", "focus"],
+	outside: ["focus", "contrast"]
+};
+const EVERYWHERE = "M-1e6 -1e6H1e6V1e6H-1e6Z";
+/**
+* Encodes `value` for an SVG id, losslessly so distinct chart ids never share a clip path.
+*
+* @param value - Any string.
+* @return `value` with each character outside `[A-Za-z0-9-]` written as `_<hex code point>_`.
+*/
+const toSvgId = (value) => Array.from(value, (character) => /[A-Za-z0-9-]/.test(character) ? character : `_${character.codePointAt(0)?.toString(16)}_`).join("");
+/**
+* Marks a selected shape with a focus-colored ring and a contrast ring, so it reads against any fill.
+*
+* @param {SelectedRingProps} props - Component props
+* @return {JSX.Element} The ring
+*/
+const SelectedRing = ({ chartId, d, side, testId }) => {
+	const clipId = `selected-ring-clip-${toSvgId(chartId)}`;
+	const clipPath = `url(#${clipId})`;
+	const [far, edge] = TONES[side];
+	return /* @__PURE__ */ jsxs("g", {
+		pointerEvents: "none",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ jsx("clipPath", {
+				id: clipId,
+				children: side === "inside" ? /* @__PURE__ */ jsx("path", { d }) : /* @__PURE__ */ jsx("path", {
+					d: `${EVERYWHERE} ${d}`,
+					clipRule: "evenodd"
+				})
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d,
+				clipPath,
+				className: clsx(selected_ring_module_default["selected-ring__far"], selected_ring_module_default[`selected-ring__${far}`])
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d,
+				clipPath,
+				className: clsx(selected_ring_module_default["selected-ring__edge"], selected_ring_module_default[`selected-ring__${edge}`])
+			})
+		]
+	});
+};
+// src/charts/bar-chart/private/selected-bar-ring.tsx
+/**
+* Marks the keyboard-selected slot with a two-tone ring outside its edge, so the ring reads against any bar color.
+*
+* @param props              - Component props.
+* @param props.chartId      - The chart's id, which keeps the clip path unique on a page with several charts.
+* @param props.selected     - The selected slot.
+* @param props.slotKeys     - The slots, in the order the band lays them out.
+* @param props.groupPadding - The padding between slots.
+* @param props.horizontal   - Whether the bars run horizontally.
+* @param props.xAccessor    - Reads a datum's x value.
+* @param props.yAccessor    - Reads a datum's y value.
+* @return The ring, or nothing when the slot has no position.
+*/
+const SelectedBarRing = ({ chartId, selected, slotKeys, groupPadding, horizontal, xAccessor, yAccessor }) => {
+	const context = useContext(DataContext);
+	const bandScale = horizontal ? context?.yScale : context?.xScale;
+	const valueScale = horizontal ? context?.xScale : context?.yScale;
+	const bandwidth = bandScale?.bandwidth?.() ?? 0;
+	const [category] = selected.data;
+	if (!bandScale || !valueScale || !bandwidth || !category) return null;
+	const groupScale = createGroupScale(slotKeys, bandwidth, groupPadding);
+	const slotOffset = groupScale(selected.slotKey);
+	const bandPosition = Number(bandScale((horizontal ? yAccessor : xAccessor)(category)));
+	if (slotOffset == null || !Number.isFinite(bandPosition)) return null;
+	const valuePositions = selected.data.map((datum) => Number(valueScale(Number((horizontal ? xAccessor : yAccessor)(datum)))));
+	const rect = computeSlotRect({
+		horizontal,
+		bandPosition,
+		slotOffset,
+		slotThickness: groupScale.bandwidth(),
+		valuePositions: [getValueScaleBaseline(valueScale), ...valuePositions],
+		widthFactor: selected.thickness
+	});
+	return /* @__PURE__ */ jsx(SelectedRing, {
+		chartId,
+		d: `M${rect.x} ${rect.y}h${rect.width}v${rect.height}h${-rect.width}Z`,
+		side: "outside",
+		testId: "bar-chart-selected-ring"
+	});
+};
+// src/charts/bar-chart/private/bar-layer.tsx
+/**
+* Draws the bars in front of any comparison shadows, slotted for an overlap layout and grouped by visx otherwise, then the selected bar's ring.
+*
+* @param props                  - Component props.
+* @param props.chartId          - The chart's id, which keeps the ring's clip path unique on a page with several charts.
+* @param props.overlapSlots     - The overlap layout, or undefined for a grouped one.
+* @param props.selectedBar      - The bar or slot the keyboard has selected.
+* @param props.primaryEntries   - The visible primary series, for a grouped layout.
+* @param props.primaryKeys      - Their labels, in group order.
+* @param props.getBarBackground - Reads a series' bar fill.
+* @param props.barClassName     - Adds classes to a bar.
+* @param props.groupPadding     - The padding between the bars of a category.
+* @param props.horizontal       - Whether the bars run horizontally.
+* @param props.xAccessor        - Reads a datum's x value.
+* @param props.yAccessor        - Reads a datum's y value.
+* @return The bars.
+*/
+const BarLayer = ({ chartId, overlapSlots, selectedBar, primaryEntries, primaryKeys, getBarBackground, barClassName, groupPadding, horizontal, xAccessor, yAccessor }) => {
+	let bars;
+	if (overlapSlots) bars = /* @__PURE__ */ jsx("g", {
+		className: "visx-bar-group",
+		children: overlapSlots.entries.map(({ series, index }) => /* @__PURE__ */ jsx(SlottedBarSeries, {
+			dataKey: series.label,
+			data: series.data,
+			xAccessor,
+			yAccessor,
+			colorAccessor: getBarBackground(index),
+			barClassName,
+			slotKeys: overlapSlots.slotKeys,
+			slotKey: overlapSlots.slotOf(series.label),
+			thickness: overlapSlots.thicknessOf(series.label),
+			groupPadding
+		}, series.label))
+	});
+	else if (barClassName) bars = /* @__PURE__ */ jsx("g", {
+		className: "visx-bar-group",
+		children: primaryEntries.map(({ series, index }) => /* @__PURE__ */ jsx(ClassifiedBarSeries, {
+			dataKey: series.label,
+			data: series.data,
+			xAccessor,
+			yAccessor,
+			colorAccessor: getBarBackground(index),
+			barClassName,
+			primaryKeys,
+			groupPadding
+		}, series.label))
+	});
+	else bars = /* @__PURE__ */ jsx(BarGroup, {
+		padding: groupPadding,
+		children: primaryEntries.map(({ series, index }) => /* @__PURE__ */ jsx(BarSeries, {
+			dataKey: series.label,
+			data: series.data,
+			xAccessor,
+			yAccessor,
+			colorAccessor: getBarBackground(index)
+		}, series.label))
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [bars, selectedBar && /* @__PURE__ */ jsx(SelectedBarRing, {
+		chartId,
+		selected: selectedBar,
+		slotKeys: overlapSlots?.slotKeys ?? primaryKeys,
+		groupPadding,
+		horizontal,
+		xAccessor,
+		yAccessor
+	})] });
+};
+// src/charts/bar-chart/private/slot-tooltip-members.tsx
+/**
+* Fills the tooltip with every bar of the keyboard-selected category, and only those.
+*
+* The last member shown becomes the tooltip's nearest datum, so the caller lists the keyboard stop last.
+*
+* @param props         - Component props.
+* @param props.members - The category's bars, the keyboard stop last.
+* @return No visual content.
+*/
+function SlotTooltipMembers({ members }) {
+	const { showTooltip, updateTooltip } = useContext(TooltipContext) ?? {};
+	useEffect(() => {
+		updateTooltip?.((state) => ({
+			...state,
+			tooltipData: void 0
+		}));
+		members.forEach((member) => showTooltip?.(member));
+	}, [members]);
+	return null;
+}
+// src/charts/bar-chart/private/overlap-bars.ts
+const PRIMARY_SLOT = "primary";
+const COMPARISON_SLOT = "comparison";
+const OVERLAP_SLOTS = [PRIMARY_SLOT, COMPARISON_SLOT];
+const SEARCH_STEPS = 16;
+/**
+* Places each series of an overlap layout: primaries in one slot and comparisons in the other, with each `group` a layer, back to front in order of first appearance.
+*
+* @param series - The series to place.
+* @return Each series' placement, by index.
+*/
+function getOverlapPlacements(series) {
+	const layerByGroup = /* @__PURE__ */ new Map();
+	series.forEach(({ group }) => {
+		if (!layerByGroup.has(group)) layerByGroup.set(group, layerByGroup.size);
+	});
+	const layerCount = layerByGroup.size;
+	return series.map((item) => {
+		const layer = layerByGroup.get(item.group) ?? 0;
+		return {
+			slot: item.options?.type === "comparison" ? COMPARISON_SLOT : PRIMARY_SLOT,
+			layer,
+			thickness: layerCount > 1 ? 1 - layer * .5 / (layerCount - 1) : 1
+		};
+	});
+}
+/**
+* Blends `from` toward `to` and returns the blend nearest the point where `passes` changes, on its passing side.
+*
+* @param from   - Where the blend starts.
+* @param to     - Where the blend ends.
+* @param passes - A test that changes at most once along the blend.
+* @return A hex color.
+*/
+function blendToEdge(from, to, passes) {
+	const passesAtStart = passes(from);
+	let low = 0;
+	let high = 1;
+	for (let step = 0; step < SEARCH_STEPS; step++) {
+		const middle = (low + high) / 2;
+		if (passes(mixHexColors(from, to, middle)) === passesAtStart) low = middle;
+		else high = middle;
+	}
+	return mixHexColors(from, to, passesAtStart ? low : high);
+}
+const awayFrom = (background) => contrastRatio(background, "#000000") >= contrastRatio(background, "#ffffff") ? "#000000" : "#ffffff";
+const opposite = (end) => end === "#000000" ? "#ffffff" : "#000000";
+/**
+* The tone of a color nearest the background that keeps 3:1 against it.
+*
+* @param color      - A hex color.
+* @param background - The hex chart background.
+* @return A hex color.
+*/
+function tintWithContrast(color, background) {
+	const passes = (tone) => contrastRatio(tone, background) >= 3;
+	return blendToEdge(color, passes(color) ? background : awayFrom(background), passes);
+}
+/**
+* The tone of a color nearest the original that keeps 3:1 against the bar it is drawn over, on the far side of that bar from the background when that side can reach 3:1.
+*
+* @param color      - A hex color.
+* @param under      - The hex color of the bar behind it.
+* @param background - The hex chart background.
+* @return A hex color.
+*/
+function shadeWithContrast(color, under, background) {
+	const passes = (tone) => contrastRatio(tone, under) >= 3;
+	const start = contrastRatio(color, background) > contrastRatio(under, background) ? color : under;
+	if (passes(start)) return start;
+	const away = awayFrom(background);
+	return blendToEdge(start, passes(away) ? away : opposite(away), passes);
+}
+/**
+* The colors an overlap layout fills its series with: per slot, the back layer tinted to 3:1 against the background and each layer in front shaded to 3:1 against the one behind. A slot whose front-most series has its own `stroke` keeps its colors as given.
+*
+* @param series     - Every series of the chart.
+* @param colors     - Each series' resolved color.
+* @param slotColors - The palette color of each slot, primaries first.
+* @param background - The hex chart background.
+* @return Each series' fill, by index.
+*/
+function getOverlapBarColors(series, colors, slotColors, background) {
+	const placements = getOverlapPlacements(series);
+	const barColors = [...colors];
+	OVERLAP_SLOTS.forEach((slot, slotIndex) => {
+		const members = placements.flatMap((placement, index) => placement.slot === slot ? [{
+			index,
+			layer: placement.layer
+		}] : []);
+		if (!members.length) return;
+		const layers = [...new Set(members.map(({ layer }) => layer))].sort((a, b) => a - b);
+		const back = members.find(({ layer }) => layer === layers[0]);
+		const base = back && series[back.index].options?.stroke ? colors[back.index] : slotColors[slotIndex];
+		if (members.some(({ index, layer }) => layer === layers[layers.length - 1] && !!series[index].options?.stroke) || !isValidHexColor(base) || !isValidHexColor(background)) return;
+		const toneByLayer = /* @__PURE__ */ new Map();
+		let under;
+		layers.forEach((layer) => {
+			const tone = under === void 0 ? tintWithContrast(base, background) : shadeWithContrast(base, under, background);
+			toneByLayer.set(layer, tone);
+			under = tone;
+		});
+		members.forEach(({ index, layer }) => {
+			barColors[index] = toneByLayer.get(layer) ?? colors[index];
+		});
+	});
+	return barColors;
+}
+// src/charts/bar-chart/private/use-overlap-slots.ts
+/**
+* Whether two data points sit at the same category: the same label, or the same date.
+*
+* @param point    - A data point.
+* @param category - The data point naming the category.
+* @return Whether `point` is at `category`.
+*/
+function isSameCategory(point, category) {
+	return category.label ? point.label === category.label : !!category.date && !!point.date && point.date.getTime() === category.date.getTime();
+}
+/**
+* Lays out the visible series of an overlap layout in slots and layers.
+*
+* @param enabled              - Whether the chart draws an overlap layout.
+* @param seriesWithVisibility - Every series, with its index and whether it is visible.
+* @return The layout, or undefined when the chart is not an overlap layout.
+*/
+function useOverlapSlots(enabled, seriesWithVisibility) {
+	return useMemo(() => {
+		if (!enabled) return;
+		const visible = seriesWithVisibility.filter(({ isVisible }) => isVisible);
+		const placements = getOverlapPlacements(visible.map(({ series }) => series));
+		const placed = visible.map(({ series, index }, position) => ({
+			entry: {
+				series,
+				index
+			},
+			placement: placements[position]
+		})).sort((a, b) => a.placement.layer - b.placement.layer);
+		const entries = placed.map(({ entry }) => entry);
+		const placementByKey = new Map(placed.map(({ entry, placement }) => [entry.series.label, placement]));
+		const slotOf = (key) => placementByKey.get(key)?.slot ?? "primary";
+		const thicknessOf = (key) => placementByKey.get(key)?.thickness ?? 1;
+		const hasPrimaries = seriesWithVisibility.some(({ series }) => series.options?.type !== "comparison");
+		const showsComparisons = entries.some(({ series }) => slotOf(series.label) === COMPARISON_SLOT);
+		const slotKeys = [...hasPrimaries ? [PRIMARY_SLOT] : [], ...showsComparisons ? [COMPARISON_SLOT] : []];
+		return {
+			entries,
+			keys: entries.map(({ series }) => series.label),
+			slotKeys,
+			slotOf,
+			thicknessOf,
+			positions: getStopPositions(entries, slotKeys, slotOf)
+		};
+	}, [enabled, seriesWithVisibility]);
+}
+/**
+* The category a data point sits at, as a key two points share when `isSameCategory` holds.
+*
+* @param point - A data point.
+* @return The category key.
+*/
+function categoryKey(point) {
+	return point.label ? `label:${point.label}` : `date:${point.date?.getTime()}`;
+}
+/**
+* Lists a stop for every slot at every category that slot draws a bar at, category by category.
+*
+* @param entries  - The visible series, back to front.
+* @param slotKeys - The slots, in band order.
+* @param slotOf   - The slot a series sits in.
+* @return The positions, in keyboard order.
+*/
+function getStopPositions(entries, slotKeys, slotOf) {
+	const categories = /* @__PURE__ */ new Map();
+	entries.forEach(({ series }) => {
+		series.data.forEach((datum, dataPointIndex) => {
+			const key = categoryKey(datum);
+			const slots = categories.get(key) ?? /* @__PURE__ */ new Map();
+			categories.set(key, slots);
+			if (!isBarRendered(datum)) return;
+			const slotKey = slotOf(series.label);
+			slots.set(slotKey, {
+				slotKey,
+				key: series.label,
+				datum,
+				dataPointIndex
+			});
+		});
+	});
+	const ordered = [...categories.values()].filter((slots) => slots.size > 0);
+	if (ordered.every((slots) => [...slots.values()].every(({ datum }) => datum.label == null && datum.date))) {
+		const time = (slots) => [...slots.values()][0].datum.date?.getTime() ?? 0;
+		ordered.sort((a, b) => time(a) - time(b));
+	}
+	return ordered.flatMap((slots) => slotKeys.flatMap((slotKey) => {
+		const position = slots.get(slotKey);
+		return position ? [position] : [];
+	}));
+}
+/**
+* Every bar at a category, each with its own data point index, the keyboard stop last.
+*
+* @param entries  - The visible series.
+* @param category - The data point naming the category.
+* @param stopKey  - The series the keyboard stop is on.
+* @return The category's bars; the last one shown becomes the tooltip's nearest datum.
+*/
+function membersAt(entries, category, stopKey) {
+	const members = entries.flatMap(({ series }) => {
+		const index = series.data.findIndex((point) => isSameCategory(point, category));
+		return index === -1 ? [] : [{
+			key: series.label,
+			datum: series.data[index],
+			index
+		}];
+	});
+	return [...members.filter(({ key }) => key !== stopKey), ...members.filter(({ key }) => key === stopKey)];
+}
+/**
+* The slot a keyboard index selects, and every bar at its category.
+*
+* @param slots         - The overlap layout.
+* @param selectedIndex - The keyboard index into `slots.positions`.
+* @return The selected slot, or undefined when nothing is selected or drawn there.
+*/
+function getSelectedSlot(slots, selectedIndex) {
+	const position = selectedIndex === void 0 ? void 0 : slots?.positions[selectedIndex];
+	if (!slots || !position) return;
+	const { slotKey, key: stopKey, datum: category } = position;
+	const members = membersAt(slots.entries, category, stopKey);
+	const slotBars = members.filter(({ key, datum }) => isBarRendered(datum) && slots.slotOf(key) === slotKey);
+	return {
+		data: slotBars.map(({ datum }) => datum),
+		slotKey,
+		thickness: Math.max(...slotBars.map(({ key }) => slots.thicknessOf(key))),
+		members
+	};
+}
+// src/charts/bar-chart/private/use-bar-stops.ts
+/**
+* Lays out the keyboard stops: one per slot and category in an overlap layout, else one per primary bar, series-major within each category.
+*
+* @param overlapSlots   - The overlap layout, or undefined for a grouped one.
+* @param primaryEntries - The visible primary series.
+* @return The stops.
+*/
+function useBarStops(overlapSlots, primaryEntries) {
+	const series = useMemo(() => overlapSlots ? [] : primaryEntries.map((entry) => entry.series), [overlapSlots, primaryEntries]);
+	return {
+		count: overlapSlots?.positions.length ?? Math.max(0, ...series.map((item) => item.data.length)) * series.length,
+		key: useMemo(() => JSON.stringify(overlapSlots?.keys ?? series.map((item) => item.label)), [overlapSlots, series]),
+		barAt: useCallback((stop) => {
+			if (overlapSlots) {
+				const position = overlapSlots.positions[stop];
+				return position && {
+					datum: position.datum,
+					index: position.dataPointIndex,
+					key: position.key
+				};
+			}
+			if (!series.length) return;
+			const index = Math.floor(stop / series.length);
+			const item = series[stop % series.length];
+			const datum = item?.data[index];
+			return item && datum ? {
+				datum,
+				index,
+				key: item.label
+			} : void 0;
+		}, [overlapSlots, series]),
+		stopOf: useCallback((seriesKey, dataPointIndex) => {
+			if (overlapSlots) {
+				const hovered = overlapSlots.entries.find((entry) => entry.series.label === seriesKey)?.series.data[dataPointIndex];
+				const slotKey = overlapSlots.slotOf(seriesKey);
+				const stop = hovered ? overlapSlots.positions.findIndex((position) => position.slotKey === slotKey && isSameCategory(position.datum, hovered)) : -1;
+				return stop >= 0 ? stop : void 0;
+			}
+			const seriesIndex = series.findIndex((item) => item.label === seriesKey);
+			return seriesIndex >= 0 ? dataPointIndex * series.length + seriesIndex : void 0;
+		}, [overlapSlots, series])
+	};
+}
 /**
 * Upper clamp on the computed group padding, so bars can never collapse to zero width
 * even at very large `widthFactor` values.
@@ -6186,8 +6691,7 @@ const MAX_GROUP_PADDING = .9;
 * gap between ticks. `0.75` = a 25% reduction of the tick-gap padding.
 */
 const COMPARISON_TICK_GAP_FACTOR = .75;
-//#endregion
-//#region src/charts/bar-chart/private/comparison-bars.tsx
+// src/charts/bar-chart/private/comparison-bars.tsx
 const ComparisonBars = ({ comparisonEntries, primaryKeys, groupPadding, horizontal, xAccessor, yAccessor, getElementStyles, resolveFill }) => {
 	const context = useContext(DataContext);
 	const xScale = context?.xScale;
@@ -6211,9 +6715,7 @@ const ComparisonBars = ({ comparisonEntries, primaryKeys, groupPadding, horizont
 			data: series,
 			index
 		});
-		const opacity = barStyles?.opacity ?? .5;
 		const widthFactor = barStyles?.widthFactor ?? 1.5;
-		const fill = resolveFill(entry);
 		series.data.forEach((datum, i) => {
 			const bandPosition = Number(bandScale(bandAccessor(datum)));
 			const valuePosition = Number(valueScale(Number(valueAccessor(datum))));
@@ -6221,13 +6723,12 @@ const ComparisonBars = ({ comparisonEntries, primaryKeys, groupPadding, horizont
 				if (process.env.NODE_ENV !== "production" && !Number.isFinite(bandPosition)) console.warn(`[Charts] ComparisonBars: datum key "${String(bandAccessor(datum))}" did not match any primary category. Shadow will not be rendered. Ensure comparison series data uses the same label/date keys as the primary series.`);
 				return;
 			}
-			const rect = computeComparisonRect({
+			const rect = computeSlotRect({
 				horizontal,
 				bandPosition,
 				slotOffset,
 				slotThickness,
-				valuePosition,
-				baseline,
+				valuePositions: [baseline, valuePosition],
 				widthFactor
 			});
 			rects.push(/* @__PURE__ */ jsx("rect", {
@@ -6236,8 +6737,8 @@ const ComparisonBars = ({ comparisonEntries, primaryKeys, groupPadding, horizont
 				y: rect.y,
 				width: rect.width,
 				height: rect.height,
-				fill,
-				opacity
+				fill: resolveFill(entry, datum),
+				opacity: barStyles?.opacity
 			}, `${index}-${i}`));
 		});
 	});
@@ -6249,8 +6750,7 @@ const ComparisonBars = ({ comparisonEntries, primaryKeys, groupPadding, horizont
 		children: rects
 	});
 };
-//#endregion
-//#region src/charts/bar-chart/private/band-highlight.tsx
+// src/charts/bar-chart/private/band-highlight.tsx
 /**
 * Render and report the active band using the chart’s registered scales.
 * @param root0            - Highlight options.
@@ -6309,8 +6809,7 @@ function BandHighlight({ visible, horizontal, onChange }) {
 		fill: CATALOG_POINTERS.surfaceSecondary
 	});
 }
-//#endregion
-//#region src/charts/bar-chart/private/band-tooltip.tsx
+// 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.
@@ -6336,7 +6835,8 @@ function nearestBandIndex(data, accessor, scale, position) {
 /**
 * Correct visx's range-based band inversion, which omits outer padding.
 * @param root0               - Registered series selection.
-* @param root0.keys          - Visible series keys.
+* @param root0.keys          - Visible series keys, back to front where bars overlap.
+* @param root0.slots         - Where series share slots: the slots of a category, in the order the band lays them out, and the slot each series sits in.
 * @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.
@@ -6344,12 +6844,13 @@ function nearestBandIndex(data, accessor, scale, position) {
 * @param root0.onPointerMove - Receives the corrected datum under a moving pointer.
 * @return No visual content.
 */
-function BandTooltip({ keys, groupPadding, withTooltips, onPointerDown, onPointerUp, onPointerMove }) {
+function BandTooltip({ keys, slots, groupPadding, withTooltips, onPointerDown, onPointerUp, onPointerMove }) {
 	const { xScale, yScale, dataRegistry, horizontal } = useContext(DataContext);
-	const { showTooltip } = useContext(TooltipContext);
+	const { showTooltip, hideTooltip, updateTooltip } = useContext(TooltipContext);
 	const scale = horizontal ? yScale : xScale;
 	const bandwidth = scale?.bandwidth?.() ?? 0;
-	const groupScale = useMemo(() => createGroupScale(keys, bandwidth, groupPadding), [
+	const groupScale = useMemo(() => createGroupScale(slots?.keys ?? keys, bandwidth, groupPadding), [
+		slots,
 		keys,
 		bandwidth,
 		groupPadding
@@ -6357,18 +6858,21 @@ function BandTooltip({ keys, groupPadding, withTooltips, onPointerDown, onPointe
 	const getSelections = useCallback((params) => {
 		const point = params?.svgPoint;
 		if (!point || !scale?.bandwidth) return [];
+		const position = horizontal ? point.y : point.x;
 		const selections = [];
+		const bands = [];
 		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);
+			const index = nearestBandIndex(entry.data, accessor, scale, position);
 			if (index < 0) continue;
 			const datum = entry.data[index];
-			const start = Number(scale(accessor(datum))) + Number(groupScale(key));
+			const band = Number(scale(accessor(datum)));
+			const start = band + Number(groupScale(slots ? slots.slotOf(key) : 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);
+			bands.push(band);
 			selections.push({
 				event: params.event,
 				key,
@@ -6379,12 +6883,16 @@ function BandTooltip({ keys, groupPadding, withTooltips, onPointerDown, onPointe
 				distanceY: horizontal ? distance : 0
 			});
 		}
-		return selections;
+		if (!slots) return selections;
+		const bandDistance = (band) => Math.abs(band + scale.bandwidth() / 2 - position);
+		const hoveredBand = bands.reduce((best, band) => best === void 0 || bandDistance(band) < bandDistance(best) ? band : best, void 0);
+		return selections.filter((_, index) => bands[index] === hoveredBand);
 	}, [
 		scale,
 		dataRegistry,
 		horizontal,
 		keys,
+		slots,
 		groupScale
 	]);
 	const handlePointer = useCallback((params) => {
@@ -6394,25 +6902,159 @@ function BandTooltip({ keys, groupPadding, withTooltips, onPointerDown, onPointe
 			return !best || distance(selection) <= distance(best) ? selection : best;
 		}, void 0);
 		if (params?.event.type === "pointermove" && nearest) onPointerMove?.(nearest);
-		if (withTooltips && params?.event.type !== "pointerup") selections.forEach(showTooltip);
+		if (withTooltips && params?.event.type !== "pointerup") {
+			if (slots) updateTooltip((state) => ({
+				...state,
+				tooltipData: void 0
+			}));
+			selections.forEach(showTooltip);
+		}
 		const callback = params?.event.type === "pointerdown" ? onPointerDown : onPointerUp;
 		if (params?.event.type === "pointermove" || !callback) return;
 		if (nearest) callback(nearest);
 	}, [
 		getSelections,
 		withTooltips,
+		slots,
 		showTooltip,
+		updateTooltip,
 		onPointerDown,
 		onPointerUp,
 		onPointerMove
 	]);
 	useEventEmitter("pointermove", withTooltips ? handlePointer : void 0);
+	useEventEmitter("pointerout", withTooltips && slots ? hideTooltip : void 0);
 	useEventEmitter("pointerdown", handlePointer);
 	useEventEmitter("pointerup", onPointerUp ? handlePointer : void 0);
 	return null;
 }
-//#endregion
-//#region src/charts/bar-chart/bar-chart.tsx
+// src/charts/bar-chart/private/grouped-bars.ts
+/**
+* Pairs each comparison series with the primary of its `group`, or with the only primary.
+*
+* @param series - The chart's series.
+* @return The index of each paired comparison's primary, keyed by the comparison's index.
+*/
+function getComparisonPrimaries(series) {
+	const primaries = series.flatMap((item, index) => item.options?.type === "comparison" ? [] : [{
+		group: item.group,
+		index
+	}]);
+	const primaryByGroup = new Map(primaries.map(({ group, index }) => [group, index]));
+	const onlyPrimary = primaries.length === 1 ? primaries[0].index : void 0;
+	const pairs = /* @__PURE__ */ new Map();
+	series.forEach((item, index) => {
+		const primary = item.options?.type === "comparison" ? primaryByGroup.get(item.group) ?? onlyPrimary : void 0;
+		if (primary !== void 0) pairs.set(index, primary);
+	});
+	return pairs;
+}
+/**
+* The colors a grouped bar chart fills its series with. A comparison takes the lightest tint of its primary's color that keeps 3:1 against the background, and the primary in front of it the shade that keeps 3:1 against that tint. A primary with its own `stroke` keeps it, and a comparison with its own, different `stroke` keeps the pair's colors as given.
+*
+* @param series     - The chart's series.
+* @param colors     - Each series' resolved color.
+* @param background - The hex chart background.
+* @return Each series' fill, by index.
+*/
+function getGroupedBarColors(series, colors, background) {
+	const barColors = [...colors];
+	getComparisonPrimaries(series).forEach((primary, comparison) => {
+		const base = colors[primary];
+		if (!!series[comparison].options?.stroke && colors[comparison].toLowerCase() !== base.toLowerCase() || !isValidHexColor(base) || !isValidHexColor(background)) return;
+		const tint = tintWithContrast(base, background);
+		barColors[comparison] = tint;
+		if (!series[primary].options?.stroke) barColors[primary] = shadeWithContrast(base, tint, background);
+	});
+	return barColors;
+}
+// src/charts/bar-chart/use-bar-colors.ts
+/**
+* Reads the colors `BarChart` fills series with, so a custom tooltip or legend can match the bars.
+*
+* @return A function from series and a layout to each series' bar color, by index.
+*/
+function useBarColors() {
+	const { getElementStyles, backgroundColor = BACKGROUND_FALLBACK, theme } = useGlobalChartsContext();
+	const comparisonOpacity = theme.barChart?.barStyles?.comparison?.opacity;
+	return useCallback((series, { layout = "grouped" } = {}) => {
+		const colors = series.map((data, index) => getElementStyles({
+			data,
+			index
+		}).color);
+		if (layout !== "overlap") return comparisonOpacity === void 0 ? getGroupedBarColors(series, colors, backgroundColor) : colors;
+		return getOverlapBarColors(series, colors, [getElementStyles({ index: 0 }).color, getElementStyles({ index: 1 }).color], backgroundColor);
+	}, [
+		getElementStyles,
+		backgroundColor,
+		comparisonOpacity
+	]);
+}
+// src/charts/bar-chart/use-bar-legend-items.ts
+const isComparison = (data, label) => data.some((series) => series.label === label && series.options?.type === "comparison");
+/**
+* Applies what a bar layout changes about a legend: overlap lists every primary before every comparison, as it draws their slots, with every swatch opaque like its bar; a collapsed grouped item takes its comparison's tint, the wider bar that frames the group.
+*
+* @param data         - The series the items were built from.
+* @param items        - The legend items.
+* @param layout       - The layout the bars are drawn in.
+* @param seriesColors - Each series' bar color, by index.
+* @return The legend items.
+*/
+function forBarLayout(data, items, layout, seriesColors) {
+	if (layout === "overlap") {
+		const opaque = items.map((item) => item.shapeStyle ? {
+			...item,
+			shapeStyle: {
+				...item.shapeStyle,
+				opacity: void 0
+			}
+		} : item);
+		const seriesItems = opaque.filter((item) => item.seriesLabels);
+		const firstLabel = (item) => item.seriesLabels?.[0];
+		return [
+			...seriesItems.filter((item) => !isComparison(data, firstLabel(item))),
+			...seriesItems.filter((item) => isComparison(data, firstLabel(item))),
+			...opaque.filter((item) => !item.seriesLabels)
+		];
+	}
+	return items.map((item) => {
+		if ((item.seriesLabels?.length ?? 0) < 2) return item;
+		const comparisonIndex = data.findIndex((series) => series.options?.type === "comparison" && item.seriesLabels?.includes(series.label));
+		return comparisonIndex === -1 ? item : {
+			...item,
+			color: seriesColors[comparisonIndex]
+		};
+	});
+}
+/**
+* Builds legend items that match `BarChart`'s bars in a layout, for a custom legend or a chart's own.
+*
+* @param data        - The series the chart draws.
+* @param options     - The legend options, and the layout the bars are drawn in.
+* @param legendShape - The shape of the legend swatches.
+* @return The legend items.
+*/
+function useBarLegendItems(data, options = {}, legendShape) {
+	const { layout } = options;
+	const getBarColors = useBarColors();
+	const seriesColors = useMemo(() => layout ? getBarColors(data, { layout }) : void 0, [
+		data,
+		layout,
+		getBarColors
+	]);
+	const items = useChartLegendItems(data, useMemo(() => ({
+		...options,
+		seriesColors
+	}), [options, seriesColors]), legendShape);
+	return useMemo(() => layout && seriesColors ? forBarLayout(data, items, layout, seriesColors) : items, [
+		data,
+		items,
+		layout,
+		seriesColors
+	]);
+}
+// src/charts/bar-chart/bar-chart.tsx
 const validateData$2 = (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");
@@ -6423,13 +7065,14 @@ 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, ariaLabel, chartId: providedChartId, width, height, className, margin, withTooltips = false, showLegend = false, legend = {}, gridVisibility: gridVisibilityProp, renderTooltip, tooltipPlacement, tooltipAnchorTop, tooltipStyle, barClassName, options = {}, orientation = "vertical", withPatterns = false, showZeroValues = false, withBandHighlight = false, onBandHighlightChange, defaultHiddenSeries, animation, children, gap = "md", onPointerDown, onPointerUp, onDatumActivate }) => {
+const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, height, className, margin, withTooltips = false, showLegend = false, legend = {}, gridVisibility: gridVisibilityProp, renderTooltip, tooltipPlacement, tooltipAnchorTop, tooltipStyle, barClassName, options = {}, orientation = "vertical", layout = "grouped", 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 legendComparisonSeriesItems = legend.comparisonSeriesItems;
 	const horizontal = orientation === "horizontal";
+	const isOverlap = layout === "overlap";
 	const chartId = useChartId(providedChartId);
 	const hiddenSeries = useDefaultHiddenSeries(chartId, defaultHiddenSeries);
 	const isSeriesVisible = useCallback((seriesLabel) => !hiddenSeries.has(seriesLabel), [hiddenSeries]);
@@ -6439,16 +7082,25 @@ const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, he
 		enabled: showZeroValues,
 		valueAxisLength: horizontal ? width : height
 	});
-	const legendItems = useChartLegendItems(dataSorted, useMemo(() => ({
+	const legendItems = useBarLegendItems(dataSorted, useMemo(() => ({
 		collapseGroups: legendCollapseGroups,
 		comparisonItem: legendComparisonItem,
-		comparisonSeriesItems: legendComparisonSeriesItems
+		comparisonSeriesItems: legendComparisonSeriesItems,
+		layout
 	}), [
 		legendCollapseGroups,
 		legendComparisonItem,
-		legendComparisonSeriesItems
+		legendComparisonSeriesItems,
+		layout
 	]));
-	const { getElementStyles } = useGlobalChartsContext();
+	const { getElementStyles, theme: providerTheme } = useGlobalChartsContext();
+	const getBarColors = useBarColors();
+	const barColors = useMemo(() => getBarColors(dataSorted, { layout }), [
+		layout,
+		getBarColors,
+		dataSorted
+	]);
+	if (providerTheme.barChart?.barStyles?.comparison?.opacity !== void 0) warnOnce("bar-chart-comparison-opacity", "BarChart: theme.barChart.barStyles.comparison.opacity is deprecated. Comparison bars are opaque; leave it unset.");
 	const isSeriesRendered = useCallback((series) => isSeriesVisible(series.label), [isSeriesVisible]);
 	const hasWholeNumberValues = useMemo(() => hasOnlyWholeNumbers(dataSorted.filter(isSeriesRendered)), [dataSorted, isSeriesRendered]);
 	const chartOptions = useBarChartOptions(dataWithVisibleZeros, horizontal, options, isSeriesRendered);
@@ -6477,37 +7129,30 @@ const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, he
 		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 overlapSlots = useOverlapSlots(isOverlap, seriesWithVisibility);
 	const primaryKeys = useMemo(() => primaryEntries.map(({ series }) => series.label), [primaryEntries]);
-	const primarySeries = useMemo(() => primaryEntries.map(({ series }) => series), [primaryEntries]);
-	const activateSelectedBar = useCallback((index) => {
-		const primaryCount = primaryEntries.length;
-		if (!primaryCount) return;
-		const dataPointIndex = Math.floor(index / primaryCount);
-		const series = primaryEntries[index % primaryCount]?.series;
-		const datum = series?.data[dataPointIndex];
-		if (series && datum) onDatumActivate?.({
-			datum,
-			index: dataPointIndex,
-			key: series.label
-		});
-	}, [primaryEntries, onDatumActivate]);
-	const visibleSeriesKey = useMemo(() => JSON.stringify(primaryKeys), [primaryKeys]);
+	const stops = useBarStops(overlapSlots, primaryEntries);
+	const { barAt, stopOf } = stops;
+	const activateSelectedBar = useCallback((stop) => {
+		const bar = barAt(stop);
+		if (bar) onDatumActivate?.(bar);
+	}, [barAt, onDatumActivate]);
 	const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown, onChartPointerMove } = useKeyboardNavigation({
 		selectedIndex,
 		setSelectedIndex,
 		isNavigating,
 		setIsNavigating,
 		chartRef,
-		totalPoints,
+		totalPoints: stops.count,
 		onActivate: activateSelectedBar,
-		visibleSeriesKey
+		visibleSeriesKey: stops.key
 	});
 	const handlePointerMove = useCallback(({ key, index }) => {
-		const seriesIndex = primaryKeys.indexOf(key);
-		if (seriesIndex >= 0) onChartPointerMove(index * primaryKeys.length + seriesIndex);
-	}, [primaryKeys, onChartPointerMove]);
+		const stop = stopOf(key, index);
+		if (stop !== void 0) onChartPointerMove(stop);
+	}, [stopOf, onChartPointerMove]);
 	const comparisonEntries = useMemo(() => {
+		if (isOverlap) return [];
 		const primaryByGroup = new Map(primaryEntries.map(({ series, index }) => [series.group, {
 			label: series.label,
 			index
@@ -6523,12 +7168,12 @@ const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, he
 			entries.push({
 				series,
 				index,
-				primaryKey: primary.label,
-				primaryIndex: primary.index
+				primaryKey: primary.label
 			});
 		});
 		return entries;
 	}, [
+		isOverlap,
 		seriesWithVisibility,
 		primaryEntries,
 		primaryKeys
@@ -6568,33 +7213,39 @@ const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, he
 		chartOptions.yScale,
 		horizontal
 	]);
-	const getBarBackground = useCallback((index) => (datum) => withPatterns ? `url(#${getPatternId(chartId, index)})` : datum.color ?? getElementStyles({
-		data: dataSorted[index],
-		index
-	}).color, [
+	const getBarBackground = useCallback((index) => (datum) => withPatterns ? `url(#${getPatternId(chartId, index)})` : datum.color ?? barColors[index] ?? "", [
 		withPatterns,
-		getElementStyles,
-		dataSorted,
+		barColors,
 		chartId
 	]);
-	const resolveComparisonFill = useCallback((entry) => withPatterns ? `url(#${getPatternId(chartId, entry.primaryIndex)})` : getElementStyles({
-		data: entry.series,
-		index: entry.index
-	}).color, [
+	const resolveComparisonFill = useCallback((entry, datum) => withPatterns ? `url(#${getPatternId(chartId, entry.index)})` : datum.color ?? barColors[entry.index] ?? "", [
 		withPatterns,
 		chartId,
-		getElementStyles
+		barColors
 	]);
+	const renderOverlapTooltip = useCallback(({ tooltipData }) => {
+		const nearestDatum = tooltipData?.nearestDatum?.datum;
+		if (!nearestDatum) return null;
+		const datumByKey = tooltipData?.datumByKey ?? {};
+		const categoryLabel = chartOptions.tooltip.labelFormatter(nearestDatum.label || (nearestDatum.date ? nearestDatum.date.getTime() : 0), 0, []);
+		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
+			}), dataSorted.flatMap(({ label }) => {
+				const datum = datumByKey[label]?.datum;
+				return datum ? [/* @__PURE__ */ jsx(Fragment, { children: renderTooltipRow(label, formatReading(datum.value)) }, label)] : [];
+			})]
+		});
+	}, [chartOptions.tooltip, dataSorted]);
 	const renderDefaultTooltip = useCallback(({ tooltipData }) => {
 		const nearestDatum = tooltipData?.nearestDatum?.datum;
 		if (!nearestDatum) return null;
 		const primaryKey = tooltipData?.nearestDatum?.key;
 		const categoryLabel = chartOptions.tooltip.labelFormatter(nearestDatum.label || (nearestDatum.date ? nearestDatum.date.getTime() : 0), 0, []);
 		const comparisonEntry = comparisonEntries.find((entry) => entry.primaryKey === primaryKey);
-		const comparisonDatum = comparisonEntry?.series.data.find((point) => {
-			const p = point;
-			return nearestDatum.label != null ? p.label === nearestDatum.label : !!nearestDatum.date && !!p.date && p.date.getTime() === nearestDatum.date.getTime();
-		});
+		const comparisonDatum = comparisonEntry?.series.data.find((point) => isSameCategory(point, nearestDatum));
 		if (comparisonEntry && comparisonDatum) return /* @__PURE__ */ jsxs("div", {
 			className: bar_chart_module_default["bar-chart__tooltip"],
 			children: [
@@ -6659,26 +7310,35 @@ const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, he
 				}
 			`;
 	}, [chartId]);
-	const createKeyboardHighlightStyle = useCallback(() => {
-		if (selectedIndex === void 0) return "";
-		const primaryCount = primaryEntries.length;
-		if (!primaryCount) return "";
-		const dataPointIndex = Math.floor(selectedIndex / primaryCount);
-		const seriesIndex = selectedIndex % primaryCount;
-		const seriesData = primaryEntries[seriesIndex]?.series;
-		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(${domBarIndex + 1}) {
-				stroke: #005fcc;
-				stroke-width: 2px;
-			}
-		`;
+	const overlapBandSlots = useMemo(() => overlapSlots && {
+		keys: overlapSlots.slotKeys,
+		slotOf: overlapSlots.slotOf
+	}, [overlapSlots]);
+	const selectedSlot = useMemo(() => getSelectedSlot(overlapSlots, selectedIndex), [overlapSlots, selectedIndex]);
+	const selectedGroup = useMemo(() => {
+		const stop = overlapSlots || selectedIndex === void 0 ? void 0 : barAt(selectedIndex);
+		if (!stop) return;
+		return membersAt(primaryEntries, stop.datum, stop.key);
 	}, [
+		overlapSlots,
 		selectedIndex,
-		primaryEntries,
-		chartId
+		barAt,
+		primaryEntries
+	]);
+	const selectedMembers = selectedSlot?.members ?? selectedGroup;
+	const selectedBar = useMemo(() => {
+		if (overlapSlots) return selectedSlot;
+		const bar = selectedIndex === void 0 ? void 0 : barAt(selectedIndex);
+		return bar && isBarRendered(bar.datum) ? {
+			data: [bar.datum],
+			slotKey: bar.key,
+			thickness: 1
+		} : void 0;
+	}, [
+		overlapSlots,
+		selectedSlot,
+		selectedIndex,
+		barAt
 	]);
 	const error = validateData$2(dataSorted);
 	const isDataValid = !error;
@@ -6699,7 +7359,6 @@ const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, he
 		children: error
 	});
 	const gridVisibility = gridVisibilityProp ?? chartOptions.gridVisibility;
-	const highlightedBarStyle = createKeyboardHighlightStyle();
 	const legendPosition = legend.position ?? "bottom";
 	const legendElement = showLegend && /* @__PURE__ */ jsx(Legend, {
 		orientation: legend.orientation ?? "horizontal",
@@ -6779,14 +7438,7 @@ const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, he
 										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,
-									index
-								}).color)) }), /* @__PURE__ */ jsx("style", { children: dataSorted.map((seriesData, index) => createPatternBorderStyle(index, getElementStyles({
-									data: seriesData,
-									index
-								}).color)) })] }),
-								highlightedBarStyle && /* @__PURE__ */ jsx("style", { children: highlightedBarStyle }),
+								withPatterns && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("defs", { children: barColors.map((color, index) => renderPattern(index, color)) }), /* @__PURE__ */ jsx("style", { children: barColors.map((color, index) => createPatternBorderStyle(index, color)) })] }),
 								allSeriesHidden ? /* @__PURE__ */ jsx(SvgEmptyState, {
 									x: width / 2,
 									y: chartHeight / 2,
@@ -6804,30 +7456,22 @@ const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, he
 									getElementStyles,
 									resolveFill: resolveComparisonFill
 								}),
-								barClassName ? /* @__PURE__ */ jsx("g", {
-									className: "visx-bar-group",
-									children: primaryEntries.map(({ series: seriesData, index }) => /* @__PURE__ */ jsx(ClassifiedBarSeries, {
-										dataKey: seriesData.label,
-										data: seriesData.data,
-										xAccessor: chartOptions.accessors.xAccessor,
-										yAccessor: chartOptions.accessors.yAccessor,
-										colorAccessor: getBarBackground(index),
-										barClassName,
-										primaryKeys,
-										groupPadding
-									}, seriesData.label))
-								}) : /* @__PURE__ */ jsx(BarGroup, {
-									padding: groupPadding,
-									children: primaryEntries.map(({ series: seriesData, index }) => /* @__PURE__ */ jsx(BarSeries, {
-										dataKey: seriesData?.label,
-										data: seriesData.data,
-										yAccessor: chartOptions.accessors.yAccessor,
-										xAccessor: chartOptions.accessors.xAccessor,
-										colorAccessor: getBarBackground(index)
-									}, seriesData?.label))
+								/* @__PURE__ */ jsx(BarLayer, {
+									chartId,
+									overlapSlots,
+									selectedBar,
+									primaryEntries,
+									primaryKeys,
+									getBarBackground,
+									barClassName,
+									groupPadding,
+									horizontal,
+									xAccessor: chartOptions.accessors.xAccessor,
+									yAccessor: chartOptions.accessors.yAccessor
 								}),
 								(withTooltips || onPointerDown || onPointerUp) && /* @__PURE__ */ jsx(BandTooltip, {
-									keys: primaryKeys,
+									keys: overlapSlots?.keys ?? primaryKeys,
+									slots: overlapBandSlots,
 									groupPadding,
 									withTooltips,
 									onPointerDown,
@@ -6844,6 +7488,7 @@ const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, he
 										...!horizontal && valueTicks ? { tickValues: valueTicks } : {}
 									})] })
 								}),
+								withTooltips && selectedMembers && /* @__PURE__ */ jsx(SlotTooltipMembers, { members: selectedMembers }),
 								withTooltips && /* @__PURE__ */ jsx(XYChartTooltip, {
 									tooltipPlacement,
 									tooltipAnchorTop,
@@ -6851,11 +7496,10 @@ const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, he
 									detectBounds: true,
 									snapTooltipToDatumX: true,
 									snapTooltipToDatumY: true,
-									renderTooltip: renderTooltip || renderDefaultTooltip,
+									renderTooltip: renderTooltip || (isOverlap ? renderOverlapTooltip : renderDefaultTooltip),
 									selectedIndex,
 									tooltipRef,
 									keyboardFocusedClassName: bar_chart_module_default["bar-chart__tooltip--keyboard-focused"],
-									series: primarySeries,
 									mode: "individual"
 								})
 							]
@@ -6873,8 +7517,7 @@ const BarChartWithProvider = (props) => {
 BarChartWithProvider.displayName = "BarChart";
 const BarChart = attachSubComponents(BarChartWithProvider, { Legend });
 const BarChartResponsive = attachSubComponents(withResponsive(BarChartWithProvider), { Legend });
-//#endregion
-//#region src/charts/bar-list-chart/bar-list-chart.tsx
+// src/charts/bar-list-chart/bar-list-chart.tsx
 /**
 * Get the bandwidth of a scale
 * @param scale - The scale to get the bandwidth of
@@ -7043,8 +7686,7 @@ const BarListChart = (props) => {
 };
 BarListChart.displayName = "BarListChart";
 const BarListChartResponsive = withResponsive(BarListChart);
-//#endregion
-//#region src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss
+// src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss
 var conversion_funnel_chart_module_default = {
 	"bar-container": "a8ccharts-mGEVca-bar-container",
 	"change-indicator": "a8ccharts-mGEVca-change-indicator",
@@ -7063,83 +7705,131 @@ var conversion_funnel_chart_module_default = {
 	"main-rate": "a8ccharts-mGEVca-main-rate",
 	"step-label": "a8ccharts-mGEVca-step-label",
 	"step-rate": "a8ccharts-mGEVca-step-rate",
+	"step-text": "a8ccharts-mGEVca-step-text",
 	"stretch": "a8ccharts-mGEVca-stretch",
-	"tooltip-content": "a8ccharts-mGEVca-tooltip-content",
-	"tooltip-title": "a8ccharts-mGEVca-tooltip-title"
+	"tooltip-label": "a8ccharts-mGEVca-tooltip-label",
+	"tooltip-title": "a8ccharts-mGEVca-tooltip-title",
+	"tooltip-value": "a8ccharts-mGEVca-tooltip-value"
 };
-//#endregion
-//#region src/charts/conversion-funnel-chart/private/use-funnel-selection.ts
+// src/charts/conversion-funnel-chart/private/use-funnel-selection.ts
 /**
-* Custom hook to manage funnel bar selection state and interactions
+* Custom hook to manage funnel step selection state
 * @param hideTooltip - Function to hide tooltip when selection is cleared
-* @return Object containing selection state and event handlers
+* @return Object containing selection state and its setters
 */
 const useFunnelSelection = (hideTooltip) => {
-	const [clickedStep, setClickedStep] = useState(null);
+	const [selectedStepId, setSelectedStepId] = useState(null);
 	return {
-		clickedStep,
-		handleBarClick: useCallback((stepId) => {
-			if (clickedStep === stepId) {
-				setClickedStep(null);
-				hideTooltip?.();
-			} else setClickedStep(stepId);
-		}, [clickedStep, hideTooltip]),
-		handleBarKeyDown: useCallback((stepId, event) => {
-			if (event.key === "Enter" || event.key === " ") {
-				event.preventDefault();
-				if (clickedStep === stepId) {
-					setClickedStep(null);
-					hideTooltip?.();
-				} else setClickedStep(stepId);
-			} else if (event.key === "Escape") {
-				event.preventDefault();
-				setClickedStep(null);
-				hideTooltip?.();
-			}
-		}, [clickedStep, hideTooltip]),
+		selectedStepId,
+		selectStep: setSelectedStepId,
 		clearSelection: useCallback(() => {
-			setClickedStep(null);
+			setSelectedStepId(null);
 			hideTooltip?.();
 		}, [hideTooltip]),
 		getStepState: useCallback((stepId) => ({
-			isClicked: clickedStep === stepId,
-			isBlurred: clickedStep !== null && clickedStep !== stepId
-		}), [clickedStep])
+			isSelected: selectedStepId === stepId,
+			isBlurred: selectedStepId !== null && selectedStepId !== stepId
+		}), [selectedStepId])
 	};
 };
-//#endregion
-//#region src/charts/conversion-funnel-chart/conversion-funnel-chart.tsx
+// src/charts/conversion-funnel-chart/private/use-roving-step-focus.ts
+const getTargetIndex = (key, index, count, isRtl) => {
+	const nextKey = isRtl ? "ArrowLeft" : "ArrowRight";
+	const previousKey = isRtl ? "ArrowRight" : "ArrowLeft";
+	switch (key) {
+		case nextKey: return Math.min(index + 1, count - 1);
+		case previousKey: return Math.max(index - 1, 0);
+		case "Home": return 0;
+		case "End": return count - 1;
+		default: return;
+	}
+};
+/**
+* Roving tabindex for the funnel steps: one Tab stop, and arrow keys, Home and End move focus between steps.
+*
+* @param stepIds        - Step ids in visual order.
+* @param selectedStepId - The selected step, which holds the Tab stop until any step has taken focus.
+* @return Tab index, element registration, focus and key handlers for each step.
+*/
+const useRovingStepFocus = (stepIds, selectedStepId) => {
+	const [focusedStepId, setFocusedStepId] = useState(null);
+	const stepElements = useRef(/* @__PURE__ */ new Map());
+	const tabStopId = [focusedStepId, selectedStepId].find((id) => id !== null && stepIds.includes(id)) ?? stepIds[0];
+	return {
+		getTabIndex: useCallback((stepId) => stepId === tabStopId ? 0 : -1, [tabStopId]),
+		setStepElement: useCallback((stepId, element) => {
+			if (element) stepElements.current.set(stepId, element);
+			else stepElements.current.delete(stepId);
+		}, []),
+		handleStepFocus: useCallback((stepId) => {
+			setFocusedStepId(stepId);
+		}, []),
+		handleNavigationKey: useCallback((stepId, event) => {
+			if (event.altKey || event.ctrlKey || event.metaKey) return false;
+			const isRtl = getComputedStyle(event.currentTarget).direction === "rtl";
+			const targetIndex = getTargetIndex(event.key, stepIds.indexOf(stepId), stepIds.length, isRtl);
+			if (targetIndex === void 0) return false;
+			event.preventDefault();
+			stepElements.current.get(stepIds[targetIndex])?.focus();
+			return true;
+		}, [stepIds])
+	};
+};
+// src/charts/conversion-funnel-chart/conversion-funnel-chart.tsx
 /** Chart height (px) below which the funnel tightens its gaps so the bars keep their room. */
 const SHORT_CHART_HEIGHT = 180;
+const formatStepCount = (count) => sprintf(_n("%s item", "%s items", count, "jetpack-charts"), formatMetricValue(count));
+const getDefaultTooltipContent = (step) => ({
+	value: step.count === void 0 ? void 0 : formatStepCount(step.count),
+	rows: [{
+		label: __("Conversion rate", "jetpack-charts"),
+		value: formatPercentage(step.rate)
+	}]
+});
+const getDefaultTooltipIds = (tooltipId, { rows = [] }) => ({
+	value: `${tooltipId}-value`,
+	rows: rows.map((_, index) => ({
+		label: `${tooltipId}-row-${index}-label`,
+		value: `${tooltipId}-row-${index}-value`
+	}))
+});
+const getDefaultTooltipDescriptionIds = (tooltipId, content) => {
+	const ids = getDefaultTooltipIds(tooltipId, content);
+	return [...content.value ? [ids.value] : [], ...ids.rows.flatMap((row) => [row.label, row.value])].join(" ");
+};
 /**
 * Internal ConversionFunnelChart component with chart registration
 *
-* @param props                  - Component props
-* @param props.chartId          - Optional unique identifier for the chart
-* @param props.mainRate         - Main conversion rate to highlight
-* @param props.changeIndicator  - Change indicator (e.g., +2%, -1.5%)
-* @param props.steps            - Array of funnel steps
-* @param props.loading          - Whether the chart is in loading state
-* @param props.animation        - Whether to show chart animation on initial render or not
-* @param props.className        - Additional CSS class name
-* @param props.ariaLabel        - Accessible name for the chart group
-* @param props.height           - Height of the chart container. Falls back to style.height if set, otherwise defaults to "100%".
-* @param props.style            - Custom styling
-* @param props.renderStepLabel  - Custom render function for step labels
-* @param props.renderStepRate   - Custom render function for step rates
-* @param props.renderMainMetric - Custom render function for the entire main metric section
-* @param props.renderTooltip    - Custom render function for tooltip content
-* @param props.tooltipStyle     - Inline styles merged over the tooltip box defaults
+* @param props                   - Component props
+* @param props.chartId           - Optional unique identifier for the chart
+* @param props.mainRate          - Main conversion rate to highlight
+* @param props.changeIndicator   - Change indicator (e.g., +2%, -1.5%)
+* @param props.steps             - Array of funnel steps
+* @param props.loading           - Whether the chart is in loading state
+* @param props.animation         - Whether to show chart animation on initial render or not
+* @param props.className         - Additional CSS class name
+* @param props.ariaLabel         - Accessible name for the chart group
+* @param props.height            - Height of the chart container. Falls back to style.height if set, otherwise defaults to "100%".
+* @param props.style             - Custom styling
+* @param props.renderStepLabel   - Custom render function for step labels
+* @param props.renderStepRate    - Custom render function for step rates
+* @param props.renderMainMetric  - Custom render function for the entire main metric section
+* @param props.renderTooltip     - Custom render function for tooltip content
+* @param props.tooltipStyle      - Inline styles merged over the tooltip box defaults
+* @param props.getTooltipContent - What each step's tooltip shows, which screen readers also read
 * @return JSX element representing the conversion funnel chart
 */
-const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loading = false, animation, className, ariaLabel, chartId: providedChartId, height, style, renderStepLabel, renderStepRate, renderMainMetric, renderTooltip, tooltipStyle }) => {
+const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loading = false, animation, className, ariaLabel, chartId: providedChartId, height, style, renderStepLabel, renderStepRate, renderMainMetric, renderTooltip, tooltipStyle, getTooltipContent = getDefaultTooltipContent }) => {
 	const chartId = useChartId(providedChartId);
 	const { getElementStyles, isColorPaletteResolved } = useGlobalChartsContext();
 	const chartRef = useRef(null);
-	const selectedBarRef = useRef(null);
+	const isPointerFocusRef = useRef(false);
 	const [scopeNode, setScopeNode] = useState(null);
+	const tooltipId = useId();
 	const { tooltipData, tooltipLeft, tooltipTop, tooltipOpen, showTooltip, hideTooltip } = useTooltip();
-	const { handleBarClick, handleBarKeyDown, clearSelection, getStepState } = useFunnelSelection(hideTooltip);
+	const { selectedStepId, selectStep, clearSelection, getStepState } = useFunnelSelection(hideTooltip);
+	const stepIds = useMemo(() => steps?.map((step) => step.id) ?? [], [steps]);
+	const { getTabIndex, setStepElement, handleStepFocus, handleNavigationKey } = useRovingStepFocus(stepIds, selectedStepId);
 	const standaloneScopeClass = useStandaloneScopeClass();
 	const [measureChartRef, , chartHeight] = useElementSize();
 	const gap = chartHeight > 0 && chartHeight < SHORT_CHART_HEIGHT ? "sm" : "xl";
@@ -7148,94 +7838,71 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 		setScopeNode(node);
 		measureChartRef(node);
 	}, [measureChartRef]);
-	const clearSelectionAndRef = useCallback(() => {
-		clearSelection();
-		selectedBarRef.current = null;
-		hideTooltip();
-	}, [clearSelection, hideTooltip]);
-	const showTooltipAt = useCallback((step, x, y) => {
-		showTooltip({
+	const selectStepAt = useCallback((step, x, y) => {
+		selectStep(step.id);
+		const bounds = chartRef.current?.getBoundingClientRect();
+		if (bounds) showTooltip({
 			tooltipData: step,
-			tooltipLeft: x,
-			tooltipTop: y - 10
+			tooltipLeft: x - bounds.left,
+			tooltipTop: y - bounds.top - 10
 		});
-	}, [showTooltip]);
-	const getMouseTooltipCoords = useCallback((event) => {
-		const bounds = chartRef.current?.getBoundingClientRect();
-		if (!bounds) return null;
-		return {
-			x: event.clientX - bounds.left,
-			y: event.clientY - bounds.top
-		};
-	}, []);
-	const getKeyboardTooltipCoords = useCallback((event) => {
-		const bounds = chartRef.current?.getBoundingClientRect();
-		if (!bounds) return null;
-		const rect = event.currentTarget.getBoundingClientRect();
-		return {
-			x: rect.left + rect.width / 2 - bounds.left,
-			y: rect.top - bounds.top
-		};
-	}, []);
-	const handleStepInteraction = useCallback((step, event, interactionType) => {
-		selectedBarRef.current = event.currentTarget;
-		const { isClicked } = getStepState(step.id);
-		if (isClicked) {
-			if (interactionType === "click") handleBarClick(step.id);
-			else handleBarKeyDown(step.id, event);
-			return;
-		}
-		if (interactionType === "click") {
-			handleBarClick(step.id);
-			const coords = getMouseTooltipCoords(event);
-			if (coords) showTooltipAt(step, coords.x, coords.y);
-		} else {
-			handleBarKeyDown(step.id, event);
-			const coords = getKeyboardTooltipCoords(event);
-			if (coords) showTooltipAt(step, coords.x, coords.y);
-		}
-	}, [
-		getStepState,
-		handleBarClick,
-		handleBarKeyDown,
-		showTooltipAt,
-		getMouseTooltipCoords,
-		getKeyboardTooltipCoords
-	]);
+	}, [selectStep, showTooltip]);
+	const selectStepAtElement = useCallback((step, element) => {
+		const rect = element.getBoundingClientRect();
+		selectStepAt(step, rect.left + rect.width / 2, rect.top);
+	}, [selectStepAt]);
 	const stepHandlers = useMemo(() => {
 		const handlers = /* @__PURE__ */ new Map();
 		steps.forEach((step) => {
+			const onPointerDown = () => {
+				isPointerFocusRef.current = true;
+			};
 			const onClick = (event) => {
-				event.stopPropagation();
-				handleStepInteraction(step, event, "click");
+				isPointerFocusRef.current = false;
+				selectStepAt(step, event.clientX, event.clientY);
+			};
+			const onFocus = (event) => {
+				handleStepFocus(step.id);
+				if (isPointerFocusRef.current) isPointerFocusRef.current = false;
+				else if (step.id !== selectedStepId) selectStepAtElement(step, event.currentTarget);
 			};
 			const onKeyDown = (event) => {
-				if (event.key === "Enter" || event.key === " ") handleStepInteraction(step, event, "keyboard");
-				else {
-					selectedBarRef.current = event.currentTarget;
-					handleBarKeyDown(step.id, event);
+				isPointerFocusRef.current = false;
+				if (handleNavigationKey(step.id, event)) return;
+				if (event.key === "Enter" || event.key === " ") {
+					event.preventDefault();
+					selectStepAtElement(step, event.currentTarget);
+				} else if (event.key === "Escape" && selectedStepId !== null) {
+					event.preventDefault();
+					clearSelection();
 				}
 			};
+			const ref = (element) => setStepElement(step.id, element);
 			handlers.set(step.id, {
+				onPointerDown,
 				onClick,
-				onKeyDown
+				onKeyDown,
+				onFocus,
+				ref
 			});
 		});
 		return handlers;
 	}, [
 		steps,
-		handleStepInteraction,
-		handleBarKeyDown
+		selectedStepId,
+		selectStepAt,
+		selectStepAtElement,
+		clearSelection,
+		handleNavigationKey,
+		handleStepFocus,
+		setStepElement
 	]);
-	useEffect(() => {
-		const handleDocumentClick = (event) => {
-			if (selectedBarRef.current && !selectedBarRef.current.contains(event.target)) clearSelectionAndRef();
-		};
-		document.addEventListener("mousedown", handleDocumentClick);
-		return () => {
-			document.removeEventListener("mousedown", handleDocumentClick);
-		};
-	}, [clearSelectionAndRef]);
+	const handleStepsBlur = useCallback((event) => {
+		if (!event.currentTarget.contains(event.relatedTarget) && document.hasFocus()) {
+			isPointerFocusRef.current = false;
+			clearSelection();
+		}
+	}, [clearSelection]);
 	const resolvedHeight = height ?? style?.height ?? "100%";
 	const { color: barColor } = getElementStyles ? getElementStyles({ index: 0 }) : { color: "#000000" };
 	const isPositiveChange = changeIndicator?.startsWith("+");
@@ -7247,18 +7914,41 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 		className: clsx(conversion_funnel_chart_module_default["change-indicator"], conversion_funnel_chart_module_default[isPositiveChange ? "change-indicator--positive" : "change-indicator--negative"]),
 		children: changeIndicator
 	})] });
-	const renderDefaultTooltip = (step) => /* @__PURE__ */ jsxs(Stack, {
-		direction: "column",
-		align: "flex-start",
-		gap: "xs",
-		children: [/* @__PURE__ */ jsx("div", {
-			className: conversion_funnel_chart_module_default["tooltip-title"],
-			children: step.label
-		}), /* @__PURE__ */ jsxs("div", {
-			className: conversion_funnel_chart_module_default["tooltip-content"],
-			children: [formatPercentage(step.rate), ` • ${step.count ?? "no"} items`]
-		})]
-	});
+	const renderDefaultTooltip = (step, content) => {
+		const ids = getDefaultTooltipIds(tooltipId, content);
+		return /* @__PURE__ */ jsxs(Stack, {
+			direction: "column",
+			gap: "xs",
+			children: [/* @__PURE__ */ jsxs(Stack, {
+				direction: "row",
+				justify: "space-between",
+				align: "baseline",
+				gap: "sm",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: conversion_funnel_chart_module_default["tooltip-title"],
+					children: step.label
+				}), content.value && /* @__PURE__ */ jsx("span", {
+					id: ids.value,
+					className: conversion_funnel_chart_module_default["tooltip-value"],
+					children: content.value
+				})]
+			}), content.rows?.map((row, index) => /* @__PURE__ */ jsxs(Stack, {
+				direction: "row",
+				justify: "space-between",
+				align: "baseline",
+				gap: "sm",
+				children: [/* @__PURE__ */ jsx("span", {
+					id: ids.rows[index].label,
+					className: conversion_funnel_chart_module_default["tooltip-label"],
+					children: row.label
+				}), /* @__PURE__ */ jsx("span", {
+					id: ids.rows[index].value,
+					className: conversion_funnel_chart_module_default["tooltip-value"],
+					children: row.value
+				})]
+			}, row.label))]
+		});
+	};
 	const isDataValid = Boolean(steps && steps.length > 0);
 	const chartMetadata = useMemo(() => ({
 		mainRate,
@@ -7293,6 +7983,26 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 		})
 	});
 	const maxRate = Math.max(...steps.map((step) => step.rate));
+	const tooltipStep = tooltipOpen ? tooltipData : void 0;
+	let tooltipContent = null;
+	let tooltipDescriptionIds = "";
+	if (tooltipStep) {
+		const index = steps.findIndex((s) => s.id === tooltipStep.id);
+		const content = getTooltipContent(tooltipStep, index);
+		if (renderTooltip) {
+			tooltipContent = renderTooltip({
+				step: tooltipStep,
+				index,
+				content,
+				top: tooltipTop,
+				left: tooltipLeft
+			});
+			tooltipDescriptionIds = tooltipId;
+		} else {
+			tooltipContent = renderDefaultTooltip(tooltipStep, content);
+			tooltipDescriptionIds = getDefaultTooltipDescriptionIds(tooltipId, content);
+		}
+	}
 	return /* @__PURE__ */ jsxs(Stack, {
 		direction: "column",
 		gap,
@@ -7321,10 +8031,16 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 				direction: "row",
 				align: "flex-end",
 				gap: "lg",
+				role: "listbox",
+				"aria-label": __("Funnel steps", "jetpack-charts"),
+				"aria-orientation": "horizontal",
+				onBlur: handleStepsBlur,
 				className: conversion_funnel_chart_module_default["funnel-container"],
 				children: steps.map((step, index) => {
 					const barHeight = step.rate / maxRate * 100;
-					const { isBlurred } = getStepState(step.id);
+					const { isSelected, isBlurred } = getStepState(step.id);
+					const handlers = stepHandlers.get(step.id);
+					const isDescribedByTooltip = Boolean(tooltipContent && tooltipDescriptionIds) && tooltipStep?.id === step.id;
 					return /* @__PURE__ */ jsxs(Stack, {
 						direction: "column",
 						className: clsx(conversion_funnel_chart_module_default["funnel-step"], isColorPaletteResolved && conversion_funnel_chart_module_default["funnel-step--animated"], isBlurred && conversion_funnel_chart_module_default["funnel-step--blurred"]),
@@ -7332,6 +8048,8 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 						children: [/* @__PURE__ */ jsxs(Stack, {
 							direction: "column",
 							gap: "xs",
+							className: conversion_funnel_chart_module_default["step-text"],
+							"aria-hidden": "true",
 							children: [renderStepLabel ? renderStepLabel({
 								step,
 								index,
@@ -7351,11 +8069,16 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 							direction: "column",
 							justify: "flex-end",
 							className: conversion_funnel_chart_module_default["bar-container"],
-							onClick: stepHandlers.get(step.id)?.onClick,
-							onKeyDown: stepHandlers.get(step.id)?.onKeyDown,
-							role: "button",
-							tabIndex: isBlurred ? -1 : 0,
-							"aria-label": step.label,
+							ref: handlers?.ref,
+							onPointerDown: handlers?.onPointerDown,
+							onClick: handlers?.onClick,
+							onKeyDown: handlers?.onKeyDown,
+							onFocus: handlers?.onFocus,
+							role: "option",
+							tabIndex: getTabIndex(step.id),
+							"aria-label": sprintf(__("%1$s, %2$s", "jetpack-charts"), step.label, formatPercentage(step.rate)),
+							"aria-selected": isSelected,
+							"aria-describedby": isDescribedByTooltip ? tooltipDescriptionIds : void 0,
 							children: /* @__PURE__ */ jsx("div", {
 								className: clsx(conversion_funnel_chart_module_default["funnel-bar"], { [conversion_funnel_chart_module_default["funnel-bar--animated"]]: animation && !loading && !prefersReducedMotion }),
 								style: {
@@ -7367,25 +8090,17 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 					}, step.id);
 				})
 			})]
-		}), tooltipOpen && tooltipData && (() => {
-			const tooltipContent = renderTooltip ? renderTooltip({
-				step: tooltipData,
-				index: steps.findIndex((s) => s.id === tooltipData.id),
-				top: tooltipTop,
-				left: tooltipLeft
-			}) : renderDefaultTooltip(tooltipData);
-			if (!tooltipContent) return null;
-			return /* @__PURE__ */ jsx(BoundedTooltip, {
-				top: tooltipTop,
-				left: tooltipLeft,
-				className: standaloneScopeClass,
-				style: tooltipStyle,
-				children: /* @__PURE__ */ jsx("div", {
-					role: "tooltip",
-					children: tooltipContent
-				})
-			});
-		})()]
+		}), tooltipContent && /* @__PURE__ */ jsx(BoundedTooltip, {
+			top: tooltipTop,
+			left: tooltipLeft,
+			className: standaloneScopeClass,
+			style: tooltipStyle,
+			children: /* @__PURE__ */ jsx("div", {
+				id: tooltipId,
+				"aria-hidden": "true",
+				children: tooltipContent
+			})
+		})]
 	});
 };
 /**
@@ -7399,8 +8114,7 @@ const ConversionFunnelChartWithProvider = (props) => {
 	return /* @__PURE__ */ jsx(GlobalChartsProvider, { children: /* @__PURE__ */ jsx(ConversionFunnelChartInternal, { ...props }) });
 };
 ConversionFunnelChartWithProvider.displayName = "ConversionFunnelChart";
-//#endregion
-//#region src/utils/sanitize-html.ts
+// src/utils/sanitize-html.ts
 /**
 * External dependencies
 */
@@ -7448,11 +8162,9 @@ function sanitizeHtml(html) {
 		]
 	});
 }
-//#endregion
-//#region src/charts/geo-chart/geo-chart.module.scss
+// src/charts/geo-chart/geo-chart.module.scss
 var geo_chart_module_default = { "container": "a8ccharts-8hS2IW-container" };
-//#endregion
-//#region src/charts/geo-chart/private/use-tooltip-position.ts
+// src/charts/geo-chart/private/use-tooltip-position.ts
 const TOOLTIP_CLASS = "google-visualization-tooltip";
 const isTooltip = (node) => node instanceof HTMLElement && node.classList.contains(TOOLTIP_CLASS);
 /**
@@ -7536,8 +8248,7 @@ function useTooltipPosition(containerRef) {
 		};
 	}, [containerRef]);
 }
-//#endregion
-//#region src/charts/geo-chart/geo-chart.tsx
+// src/charts/geo-chart/geo-chart.tsx
 /**
 * External dependencies
 */
@@ -7757,8 +8468,7 @@ const GeoChartWithProvider = (props) => {
 };
 GeoChartWithProvider.displayName = "GeoChart";
 const GeoChartResponsive = withResponsive(GeoChartWithProvider);
-//#endregion
-//#region src/types.ts
+// src/types.ts
 let GoogleDataTableColumnRoleType = /* @__PURE__ */ function(GoogleDataTableColumnRoleType) {
 	GoogleDataTableColumnRoleType["annotation"] = "annotation";
 	GoogleDataTableColumnRoleType["annotationText"] = "annotationText";
@@ -7838,8 +8548,7 @@ const pickLabelTextColor = (fill, roles, defaultRole) => {
 	if (!isValidHexColor(fillHex)) return defaultRole;
 	return pickLabelTextColorForFill(hexToRgb(fillHex), roles, defaultRole);
 };
-//#endregion
-//#region src/charts/heatmap-chart/heatmap-chart.module.scss
+// src/charts/heatmap-chart/heatmap-chart.module.scss
 var heatmap_chart_module_default = {
 	"heatmap-chart": "a8ccharts-O3YMOW-heatmap-chart",
 	"heatmap-chart__cell": "a8ccharts-O3YMOW-heatmap-chart__cell",
@@ -7870,8 +8579,7 @@ var heatmap_chart_module_default = {
 	"heatmap-chart__row-label": "a8ccharts-O3YMOW-heatmap-chart__row-label",
 	"heatmap-chart--height-capped": "a8ccharts-O3YMOW-heatmap-chart--height-capped"
 };
-//#endregion
-//#region src/charts/heatmap-chart/private/use-heatmap-colors.ts
+// src/charts/heatmap-chart/private/use-heatmap-colors.ts
 const isPresent = (value) => value !== null && value !== void 0 && !isNaN(value);
 /**
 * Get the min and max values from heatmap data, ignoring null/NaN and the zeros
@@ -7950,12 +8658,10 @@ const getHeatmapScale = (primary, background, emptyCell) => {
 		high
 	};
 };
-//#endregion
-//#region src/charts/heatmap-chart/private/heatmap-context.ts
+// src/charts/heatmap-chart/private/heatmap-context.ts
 /** Shared by the chart and legend without importing back from `heatmap-chart.tsx`. */
 const HeatmapContext = createContext(null);
-//#endregion
-//#region src/charts/heatmap-chart/private/heatmap-legend.tsx
+// src/charts/heatmap-chart/private/heatmap-legend.tsx
 const HeatmapLegend = ({ steps = 5, variant = "swatches", lessLabel, moreLabel }) => {
 	const context = useContext(HeatmapContext);
 	const { legend } = useGlobalChartsTheme();
@@ -7999,8 +8705,7 @@ const HeatmapLegend = ({ steps = 5, variant = "swatches", lessLabel, moreLabel }
 		]
 	});
 };
-//#endregion
-//#region src/charts/heatmap-chart/private/column-groups.ts
+// 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.
@@ -8106,8 +8811,7 @@ const wrapColumnGroups = (layout, bands) => {
 		slotSpans
 	};
 };
-//#endregion
-//#region src/charts/heatmap-chart/private/fit-compact-cells.ts
+// src/charts/heatmap-chart/private/fit-compact-cells.ts
 /**
 * Largest whole-pixel square cell, and the band count giving it, for a compact grid in a box.
 *
@@ -8145,8 +8849,7 @@ const fitCompactCells = (input) => {
 		cellSize: minCellSize
 	};
 };
-//#endregion
-//#region src/charts/heatmap-chart/private/keyboard-navigation.ts
+// src/charts/heatmap-chart/private/keyboard-navigation.ts
 const ARROW_KEYS = [
 	"ArrowLeft",
 	"ArrowRight",
@@ -8276,8 +8979,7 @@ const stepCalendarCell = (grid, blocks, from, key) => {
 	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
+// src/charts/heatmap-chart/heatmap-chart.tsx
 const CELL_VALUE_MODIFIER = {
 	label: void 0,
 	"label-inverse": heatmap_chart_module_default["heatmap-chart__cell-value--inverse"],
@@ -8732,8 +9434,7 @@ const HeatmapChartResponsiveInner = (props) => /* @__PURE__ */ jsx(HeatmapChartW
 });
 HeatmapChartResponsiveInner.displayName = "HeatmapChart";
 const HeatmapChartResponsive = attachSubComponents(withResponsive(HeatmapChartResponsiveInner), { Legend: HeatmapLegend });
-//#endregion
-//#region src/charts/heatmap-chart/private/civil-day.ts
+// src/charts/heatmap-chart/private/civil-day.ts
 const DAY_MS = 864e5;
 const KEY_OPTIONS = {
 	calendar: "gregory",
@@ -8882,8 +9583,7 @@ const startOfCivilWeek = (date, weekStartsOn) => {
 * @return Columns needed to cover the span, inclusive.
 */
 const civilWeekSpan = (from, to, weekStartsOn) => Math.floor((startOfCivilWeek(to, weekStartsOn).getTime() - startOfCivilWeek(from, weekStartsOn).getTime()) / (7 * DAY_MS)) + 1;
-//#endregion
-//#region src/charts/heatmap-chart/build-calendar-data.ts
+// src/charts/heatmap-chart/build-calendar-data.ts
 /** Rows that get a weekday label (Mon, Wed, Fri with a Monday week start). */
 const LABELLED_ROWS = [
 	0,
@@ -8985,8 +9685,7 @@ const buildCalendarHeatmapData = (series, options = {}) => {
 		rowLabels
 	};
 };
-//#endregion
-//#region src/charts/heatmap-chart/build-month-calendar-data.ts
+// 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;
@@ -9068,8 +9767,7 @@ const buildMonthCalendarHeatmapData = (valueByDay, range, options = {}) => {
 		columnGroups
 	};
 };
-//#endregion
-//#region src/charts/heatmap-chart/use-calendar-heatmap-data.ts
+// src/charts/heatmap-chart/use-calendar-heatmap-data.ts
 /**
 * `buildCalendarHeatmapData` with the locale and zone taken from
 * `GlobalChartsProvider` where the caller names neither.
@@ -9104,8 +9802,7 @@ const useCalendarHeatmapData = (series, options = {}) => {
 		gridEnd
 	]);
 };
-//#endregion
-//#region src/charts/heatmap-chart/use-month-calendar-heatmap-data.ts
+// src/charts/heatmap-chart/use-month-calendar-heatmap-data.ts
 /**
 * `buildMonthCalendarHeatmapData` with the locale taken from `GlobalChartsProvider`
 * where the caller names none.
@@ -9134,8 +9831,7 @@ const useMonthCalendarHeatmapData = (valueByDay, range, options = {}) => {
 		weekStartsOn
 	]);
 };
-//#endregion
-//#region ../../../node_modules/.pnpm/is-plain-object@5.1.0/node_modules/is-plain-object/dist/is-plain-object.mjs
+// ../../../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>
 *
@@ -9155,16 +9851,14 @@ function isPlainObject(o) {
 	if (prot.hasOwnProperty("isPrototypeOf") === false) return false;
 	return true;
 }
-//#endregion
-//#region ../../../node_modules/.pnpm/lower-case@2.0.2/node_modules/lower-case/dist.es2015/index.js
+// ../../../node_modules/.pnpm/lower-case@2.0.2/node_modules/lower-case/dist.es2015/index.js
 /**
 * Lower case as a function.
 */
 function lowerCase(str) {
 	return str.toLowerCase();
 }
-//#endregion
-//#region ../../../node_modules/.pnpm/no-case@3.0.4/node_modules/no-case/dist.es2015/index.js
+// ../../../node_modules/.pnpm/no-case@3.0.4/node_modules/no-case/dist.es2015/index.js
 var DEFAULT_SPLIT_REGEXP = [/([a-z0-9])([A-Z])/g, /([A-Z])([A-Z][a-z])/g];
 var DEFAULT_STRIP_REGEXP = /[^A-Z0-9]+/gi;
 /**
@@ -9189,23 +9883,19 @@ function replace$1(input, re, value) {
 		return input.replace(re, value);
 	}, input);
 }
-//#endregion
-//#region ../../../node_modules/.pnpm/dot-case@3.0.4/node_modules/dot-case/dist.es2015/index.js
+// ../../../node_modules/.pnpm/dot-case@3.0.4/node_modules/dot-case/dist.es2015/index.js
 function dotCase(input, options) {
 	if (options === void 0) options = {};
 	return noCase(input, __assign({ delimiter: "." }, options));
 }
-//#endregion
-//#region ../../../node_modules/.pnpm/param-case@3.0.4/node_modules/param-case/dist.es2015/index.js
+// ../../../node_modules/.pnpm/param-case@3.0.4/node_modules/param-case/dist.es2015/index.js
 function paramCase(input, options) {
 	if (options === void 0) options = {};
 	return dotCase(input, __assign({ delimiter: "-" }, options));
 }
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+warning@3.57.0/node_modules/@wordpress/warning/build-module/utils.mjs
+// ../../../node_modules/.pnpm/@wordpress+warning@3.57.0/node_modules/@wordpress/warning/build-module/utils.mjs
 var logged = /* @__PURE__ */ new Set();
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+warning@3.57.0/node_modules/@wordpress/warning/build-module/index.mjs
+// ../../../node_modules/.pnpm/@wordpress+warning@3.57.0/node_modules/@wordpress/warning/build-module/index.mjs
 function isDev() {
 	return globalThis.SCRIPT_DEBUG === true;
 }
@@ -9218,8 +9908,7 @@ function warning(message) {
 	} catch {}
 	logged.add(message);
 }
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_5beefdda355715e908adfea668830e1f/node_modules/@wordpress/components/build-module/utils/hooks/use-update-effect.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/node_modules/@wordpress/components/build-module/utils/hooks/use-update-effect.mjs
 function useUpdateEffect(effect, deps) {
 	const mountedRef = useRef$1(false);
 	useEffect$1(() => {
@@ -9231,8 +9920,7 @@ function useUpdateEffect(effect, deps) {
 	}, []);
 }
 var use_update_effect_default = useUpdateEffect;
-//#endregion
-//#region ../../../node_modules/.pnpm/@emotion+sheet@1.4.0/node_modules/@emotion/sheet/dist/emotion-sheet.esm.js
+// ../../../node_modules/.pnpm/@emotion+sheet@1.4.0/node_modules/@emotion/sheet/dist/emotion-sheet.esm.js
 function sheetForTag(tag) {
 	if (tag.sheet) return tag.sheet;
 	/* istanbul ignore next */
@@ -9294,8 +9982,7 @@ var StyleSheet = /*#__PURE__*/ function() {
 	};
 	return StyleSheet;
 }();
-//#endregion
-//#region ../../../node_modules/.pnpm/stylis@4.2.0/node_modules/stylis/src/Enum.js
+// ../../../node_modules/.pnpm/stylis@4.2.0/node_modules/stylis/src/Enum.js
 var MS = "-ms-";
 var MOZ = "-moz-";
 var WEBKIT = "-webkit-";
@@ -9305,8 +9992,7 @@ var DECLARATION = "decl";
 var IMPORT = "@import";
 var KEYFRAMES = "@keyframes";
 var LAYER = "@layer";
-//#endregion
-//#region ../../../node_modules/.pnpm/stylis@4.2.0/node_modules/stylis/src/Utility.js
+// ../../../node_modules/.pnpm/stylis@4.2.0/node_modules/stylis/src/Utility.js
 /**
 * @param {number}
 * @return {number}
@@ -9409,8 +10095,7 @@ function append(value, array) {
 function combine(array, callback) {
 	return array.map(callback).join("");
 }
-//#endregion
-//#region ../../../node_modules/.pnpm/stylis@4.2.0/node_modules/stylis/src/Tokenizer.js
+// ../../../node_modules/.pnpm/stylis@4.2.0/node_modules/stylis/src/Tokenizer.js
 var line = 1;
 var column = 1;
 var length = 0;
@@ -9596,8 +10281,7 @@ function identifier(index) {
 	while (!token(peek())) next();
 	return slice(index, position);
 }
-//#endregion
-//#region ../../../node_modules/.pnpm/stylis@4.2.0/node_modules/stylis/src/Parser.js
+// ../../../node_modules/.pnpm/stylis@4.2.0/node_modules/stylis/src/Parser.js
 /**
 * @param {string} value
 * @return {object[]}
@@ -9750,8 +10434,7 @@ function comment(value, root, parent) {
 function declaration(value, root, parent, length) {
 	return node(value, root, parent, DECLARATION, substr(value, 0, length), substr(value, length + 1, -1), length);
 }
-//#endregion
-//#region ../../../node_modules/.pnpm/stylis@4.2.0/node_modules/stylis/src/Serializer.js
+// ../../../node_modules/.pnpm/stylis@4.2.0/node_modules/stylis/src/Serializer.js
 /**
 * @param {object[]} children
 * @param {function} callback
@@ -9781,8 +10464,7 @@ function stringify(element, index, children, callback) {
 	}
 	return strlen(children = serialize(element.children, callback)) ? element.return = element.value + "{" + children + "}" : "";
 }
-//#endregion
-//#region ../../../node_modules/.pnpm/stylis@4.2.0/node_modules/stylis/src/Middleware.js
+// ../../../node_modules/.pnpm/stylis@4.2.0/node_modules/stylis/src/Middleware.js
 /**
 * @param {function[]} collection
 * @return {function}
@@ -9806,8 +10488,7 @@ function rulesheet(callback) {
 		}
 	};
 }
-//#endregion
-//#region ../../../node_modules/.pnpm/@emotion+memoize@0.9.0/node_modules/@emotion/memoize/dist/emotion-memoize.esm.js
+// ../../../node_modules/.pnpm/@emotion+memoize@0.9.0/node_modules/@emotion/memoize/dist/emotion-memoize.esm.js
 function memoize(fn) {
 	var cache = Object.create(null);
 	return function(arg) {
@@ -9815,8 +10496,7 @@ function memoize(fn) {
 		return cache[arg];
 	};
 }
-//#endregion
-//#region ../../../node_modules/.pnpm/@emotion+cache@11.14.0/node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js
+// ../../../node_modules/.pnpm/@emotion+cache@11.14.0/node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js
 var identifierWithPointTracking = function identifierWithPointTracking(begin, points, index) {
 	var previous = 0;
 	var character = 0;
@@ -10042,8 +10722,7 @@ var createCache = function createCache(options) {
 	cache.sheet.hydrate(nodesToHydrate);
 	return cache;
 };
-//#endregion
-//#region ../../../node_modules/.pnpm/@emotion+utils@1.4.2/node_modules/@emotion/utils/dist/emotion-utils.browser.esm.js
+// ../../../node_modules/.pnpm/@emotion+utils@1.4.2/node_modules/@emotion/utils/dist/emotion-utils.browser.esm.js
 function getRegisteredStyles$1(registered, registeredStyles, classNames) {
 	var rawClassName = "";
 	classNames.split(" ").forEach(function(className) {
@@ -10067,8 +10746,7 @@ var insertStyles = function insertStyles(cache, serialized, isStringTag) {
 		} while (current !== void 0);
 	}
 };
-//#endregion
-//#region ../../../node_modules/.pnpm/@emotion+hash@0.9.2/node_modules/@emotion/hash/dist/emotion-hash.esm.js
+// ../../../node_modules/.pnpm/@emotion+hash@0.9.2/node_modules/@emotion/hash/dist/emotion-hash.esm.js
 function murmur2(str) {
 	var h = 0;
 	var k, i = 0, len = str.length;
@@ -10089,8 +10767,7 @@ function murmur2(str) {
 	h = (h & 65535) * 1540483477 + ((h >>> 16) * 59797 << 16);
 	return ((h ^ h >>> 15) >>> 0).toString(36);
 }
-//#endregion
-//#region ../../../node_modules/.pnpm/@emotion+unitless@0.10.0/node_modules/@emotion/unitless/dist/emotion-unitless.esm.js
+// ../../../node_modules/.pnpm/@emotion+unitless@0.10.0/node_modules/@emotion/unitless/dist/emotion-unitless.esm.js
 var unitlessKeys = {
 	animationIterationCount: 1,
 	aspectRatio: 1,
@@ -10140,8 +10817,7 @@ var unitlessKeys = {
 	strokeOpacity: 1,
 	strokeWidth: 1
 };
-//#endregion
-//#region ../../../node_modules/.pnpm/@emotion+serialize@1.3.3/node_modules/@emotion/serialize/dist/emotion-serialize.esm.js
+// ../../../node_modules/.pnpm/@emotion+serialize@1.3.3/node_modules/@emotion/serialize/dist/emotion-serialize.esm.js
 var isDevelopment = false;
 var hyphenateRegex = /[A-Z]|^ms/g;
 var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
@@ -10266,16 +10942,14 @@ function serializeStyles(args, registered, mergedProps) {
 	};
 }
 React["useInsertionEffect"] && React["useInsertionEffect"] || React.useLayoutEffect;
-//#endregion
-//#region ../../../node_modules/.pnpm/@emotion+react@11.14.0_@types+react@18.3.31_react@18.3.1/node_modules/@emotion/react/dist/emotion-element-f0de968e.browser.esm.js
+// ../../../node_modules/.pnpm/@emotion+react@11.14.0_@types+react@19.3.0_react@19.3.0/node_modules/@emotion/react/dist/emotion-element-f0de968e.browser.esm.js
 var EmotionCacheContext = /* #__PURE__ */ React.createContext(typeof HTMLElement !== "undefined" ? /* #__PURE__ */ createCache({ key: "css" }) : null);
 EmotionCacheContext.Provider;
 var __unsafe_useEmotionCache = function useEmotionCache() {
 	return useContext(EmotionCacheContext);
 };
 ({}).hasOwnProperty;
-//#endregion
-//#region ../../../node_modules/.pnpm/@emotion+css@11.13.5/node_modules/@emotion/css/create-instance/dist/emotion-css-create-instance.esm.js
+// ../../../node_modules/.pnpm/@emotion+css@11.13.5/node_modules/@emotion/css/create-instance/dist/emotion-css-create-instance.esm.js
 function insertWithoutScoping(cache, serialized) {
 	if (cache.inserted[serialized.name] === void 0) return cache.insert("", serialized, cache.sheet, true);
 }
@@ -10360,8 +11034,7 @@ var classnames = function classnames(args) {
 	}
 	return cls;
 };
-//#endregion
-//#region ../../../node_modules/.pnpm/@emotion+css@11.13.5/node_modules/@emotion/css/dist/emotion-css.esm.js
+// ../../../node_modules/.pnpm/@emotion+css@11.13.5/node_modules/@emotion/css/dist/emotion-css.esm.js
 var _createEmotion = createEmotion({ key: "css" });
 _createEmotion.flush;
 _createEmotion.hydrate;
@@ -10373,8 +11046,7 @@ _createEmotion.keyframes;
 _createEmotion.css;
 _createEmotion.sheet;
 _createEmotion.cache;
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_5beefdda355715e908adfea668830e1f/node_modules/@wordpress/components/build-module/utils/hooks/use-cx.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/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();
@@ -10389,8 +11061,7 @@ var useCx = () => {
 		}));
 	}, [cache]);
 };
-//#endregion
-//#region ../../../node_modules/.pnpm/memize@2.1.1/node_modules/memize/dist/index.js
+// ../../../node_modules/.pnpm/memize@2.1.1/node_modules/memize/dist/index.js
 /**
 * Memize options object.
 *
@@ -10480,8 +11151,7 @@ function memize(fn, options) {
 	};
 	return memoized;
 }
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_5beefdda355715e908adfea668830e1f/node_modules/@wordpress/components/build-module/context/context-system-provider.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/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;
@@ -10548,19 +11218,16 @@ var BaseContextSystemProvider = ({ children, value }) => {
 	});
 };
 memo(BaseContextSystemProvider);
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_5beefdda355715e908adfea668830e1f/node_modules/@wordpress/components/build-module/context/constants.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/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@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_5beefdda355715e908adfea668830e1f/node_modules/@wordpress/components/build-module/context/get-styled-class-name-from-key.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/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@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_5beefdda355715e908adfea668830e1f/node_modules/@wordpress/components/build-module/context/context-connect.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/node_modules/@wordpress/components/build-module/context/context-connect.mjs
 function contextConnect(Component, namespace) {
 	return _contextConnect(Component, namespace, { forwardsRef: true });
 }
@@ -10576,16 +11243,14 @@ function _contextConnect(Component, namespace, options) {
 		selector: `.${getStyledClassNameFromKey(namespace)}`
 	});
 }
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_5beefdda355715e908adfea668830e1f/node_modules/@wordpress/components/build-module/context/utils.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/node_modules/@wordpress/components/build-module/context/utils.mjs
 function getNamespace(componentName) {
 	return { [COMPONENT_NAMESPACE]: componentName };
 }
 function getConnectedNamespace() {
 	return { [CONNECTED_NAMESPACE]: true };
 }
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_5beefdda355715e908adfea668830e1f/node_modules/@wordpress/components/build-module/context/use-context-system.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/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");
@@ -10606,8 +11271,7 @@ function useContextSystem(props, namespace) {
 	finalComponentProps.className = classes;
 	return finalComponentProps;
 }
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_5beefdda355715e908adfea668830e1f/node_modules/@wordpress/components/build-module/visually-hidden/styles.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/node_modules/@wordpress/components/build-module/visually-hidden/styles.mjs
 var visuallyHidden = {
 	border: 0,
 	clip: "rect(1px, 1px, 1px, 1px)",
@@ -10622,8 +11286,7 @@ var visuallyHidden = {
 	wordWrap: "normal",
 	wordBreak: "normal"
 };
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_5beefdda355715e908adfea668830e1f/node_modules/@wordpress/components/build-module/utils/polymorphic-element.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/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
@@ -10712,8 +11375,7 @@ function UnforwardedPolymorphicElement({ as, ...props }, ref) {
 	});
 }
 var PolymorphicElement = forwardRef$1(UnforwardedPolymorphicElement);
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_5beefdda355715e908adfea668830e1f/node_modules/@wordpress/components/build-module/view/component.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/node_modules/@wordpress/components/build-module/view/component.mjs
 function UnforwardedView({ css, ...restProps }, ref) {
 	return /* @__PURE__ */ jsx(PolymorphicElement, {
 		ref,
@@ -10721,8 +11383,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@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_5beefdda355715e908adfea668830e1f/node_modules/@wordpress/components/build-module/visually-hidden/component.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/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, {
@@ -10736,8 +11397,7 @@ function UnconnectedVisuallyHidden(props, forwardedRef) {
 	});
 }
 var component_default$1 = contextConnect(UnconnectedVisuallyHidden, "VisuallyHidden");
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_5beefdda355715e908adfea668830e1f/node_modules/@wordpress/components/build-module/utils/use-responsive-value.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/node_modules/@wordpress/components/build-module/utils/use-responsive-value.mjs
 var breakpoints = [
 	"40em",
 	"52em",
@@ -10775,8 +11435,7 @@ function useResponsiveValue(values, options = {}) {
 	const array = values || [];
 	return array[index >= array.length ? array.length - 1 : index];
 }
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_5beefdda355715e908adfea668830e1f/node_modules/@wordpress/components/build-module/grid/utils.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/node_modules/@wordpress/components/build-module/grid/utils.mjs
 var ALIGNMENTS = {
 	bottom: {
 		alignItems: "flex-end",
@@ -10823,8 +11482,7 @@ var ALIGNMENTS = {
 function getAlignmentProps(alignment) {
 	return alignment ? ALIGNMENTS[alignment] ?? {} : {};
 }
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_5beefdda355715e908adfea668830e1f/node_modules/@wordpress/components/build-module/grid/hook.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/node_modules/@wordpress/components/build-module/grid/hook.mjs
 var STYLE_HASH_ATTRIBUTE = "data-wp-hash";
 function getRuntime() {
 	const globalScope = globalThis;
@@ -10968,8 +11626,7 @@ function useGrid(props) {
 		}
 	};
 }
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_5beefdda355715e908adfea668830e1f/node_modules/@wordpress/components/build-module/grid/component.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/node_modules/@wordpress/components/build-module/grid/component.mjs
 function UnconnectedGrid(props, forwardedRef) {
 	const gridProps = useGrid(props);
 	return /* @__PURE__ */ jsx(component_default$2, {
@@ -10978,8 +11635,7 @@ function UnconnectedGrid(props, forwardedRef) {
 	});
 }
 var component_default = contextConnect(UnconnectedGrid, "Grid");
-//#endregion
-//#region src/charts/leaderboard-chart/hooks/use-fitted-row-count.ts
+// src/charts/leaderboard-chart/hooks/use-fitted-row-count.ts
 /**
 * Fractional layout rounding can put a row's bottom a hair past the container's
 * without any visible clipping. Allow that much slack before hiding a row.
@@ -11062,8 +11718,7 @@ function useFittedRowCount(enabled, rowCount, data) {
 		isMeasurable
 	};
 }
-//#endregion
-//#region src/charts/leaderboard-chart/hooks/use-leaderboard-legend-items.ts
+// src/charts/leaderboard-chart/hooks/use-leaderboard-legend-items.ts
 /**
 * Hook to create legend items from leaderboard data
 * @param root0                         - Configuration object
@@ -11111,11 +11766,12 @@ function useLeaderboardLegendItems({ data, primaryColor, secondaryColor, withCom
 		withOverlayLabel
 	]);
 }
-//#endregion
-//#region src/charts/leaderboard-chart/leaderboard-chart.module.scss
+// src/charts/leaderboard-chart/leaderboard-chart.module.scss
 var leaderboard_chart_module_default = {
 	"bar": "a8ccharts-GovfoW-bar",
 	"bar--animated": "a8ccharts-GovfoW-bar--animated",
+	"bar--negative": "a8ccharts-GovfoW-bar--negative",
+	"barTrack": "a8ccharts-GovfoW-barTrack",
 	"barWithLabelContainer": "a8ccharts-GovfoW-barWithLabelContainer",
 	"chevron": "a8ccharts-GovfoW-chevron",
 	"deltaPlaceholder": "a8ccharts-GovfoW-deltaPlaceholder",
@@ -11142,8 +11798,7 @@ var leaderboard_chart_module_default = {
 	"stretch": "a8ccharts-GovfoW-stretch",
 	"valueContainer": "a8ccharts-GovfoW-valueContainer"
 };
-//#endregion
-//#region src/charts/leaderboard-chart/leaderboard-chart.tsx
+// src/charts/leaderboard-chart/leaderboard-chart.tsx
 const ROW_GAP = "var(--a8c-charts-dimension-leaderboard-row-gap, 12px)";
 const COLUMN_GAP = "var(--a8c-charts-dimension-leaderboard-column-gap, 4px)";
 /** Indexed by `Math.sign( delta ) + 1`, so [negative, neutral, positive]. */
@@ -11203,27 +11858,43 @@ const BarLabel = ({ label }) => /* @__PURE__ */ jsx(Fragment$1, { children: type
 	className: leaderboard_chart_module_default.label,
 	children: label
 }) : label });
-const BarWithLabel = ({ entry, withComparison, withOverlayLabel, primaryColor, secondaryColor, animation, isPrimaryVisible = true, isComparisonVisible = true }) => {
+const Bar = ({ share, color, animation, divergingScale }) => {
+	const isNegative = share < 0;
+	const sideMax = divergingScale?.[isNegative ? "negative" : "positive"];
+	const width = sideMax ? Math.abs(share) / sideMax * 100 : Math.abs(share);
+	const bar = /* @__PURE__ */ jsx("div", {
+		className: clsx(leaderboard_chart_module_default.bar, {
+			[leaderboard_chart_module_default["bar--animated"]]: animation,
+			[leaderboard_chart_module_default["bar--negative"]]: divergingScale && isNegative
+		}),
+		style: {
+			width: getBarWidth(width),
+			backgroundColor: color
+		}
+	});
+	if (!divergingScale) return bar;
+	return /* @__PURE__ */ jsx("div", {
+		className: leaderboard_chart_module_default.barTrack,
+		style: { gridTemplateColumns: `${divergingScale.negative}fr ${divergingScale.positive}fr` },
+		children: bar
+	});
+};
+const BarWithLabel = ({ entry, withComparison, withOverlayLabel, primaryColor, secondaryColor, animation, divergingScale, isPrimaryVisible = true, isComparisonVisible = true }) => {
 	const showComparisonBar = withComparison && !withOverlayLabel && isComparisonVisible;
+	const bars = /* @__PURE__ */ jsxs(Fragment$1, { children: [isPrimaryVisible && /* @__PURE__ */ jsx(Bar, {
+		share: entry.currentShare,
+		color: primaryColor,
+		animation,
+		divergingScale
+	}), showComparisonBar && hasPreviousValue(entry) && /* @__PURE__ */ jsx(Bar, {
+		share: entry.previousShare,
+		color: secondaryColor,
+		animation,
+		divergingScale
+	})] });
 	return /* @__PURE__ */ jsxs("div", {
 		className: clsx(leaderboard_chart_module_default.barWithLabelContainer, { [leaderboard_chart_module_default["is-overlay"]]: withOverlayLabel }),
-		children: [
-			/* @__PURE__ */ jsx(BarLabel, { label: entry.label }),
-			isPrimaryVisible && /* @__PURE__ */ jsx("div", {
-				className: clsx(leaderboard_chart_module_default.bar, { [leaderboard_chart_module_default["bar--animated"]]: animation }),
-				style: {
-					width: getBarWidth(entry.currentShare),
-					backgroundColor: primaryColor
-				}
-			}),
-			showComparisonBar && hasPreviousValue(entry) && /* @__PURE__ */ jsx("div", {
-				className: clsx(leaderboard_chart_module_default.bar, { [leaderboard_chart_module_default["bar--animated"]]: animation }),
-				style: {
-					width: getBarWidth(entry.previousShare),
-					backgroundColor: secondaryColor
-				}
-			})
-		]
+		children: [/* @__PURE__ */ jsx(BarLabel, { label: entry.label }), bars]
 	});
 };
 /**
@@ -11308,6 +11979,26 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 		withComparison,
 		withOverlayLabel
 	]);
+	const divergingScale = useMemo(() => {
+		const withComparisonBars = withComparison && !withOverlayLabel;
+		const scale = {
+			negative: 0,
+			positive: 0
+		};
+		for (const entry of data ?? []) {
+			const shares = [entry.currentShare];
+			if (withComparisonBars && hasPreviousValue(entry)) shares.push(entry.previousShare);
+			for (const share of shares) {
+				const side = share < 0 ? "negative" : "positive";
+				scale[side] = Math.max(scale[side], Math.abs(share));
+			}
+		}
+		return scale.negative > 0 ? scale : void 0;
+	}, [
+		data,
+		withComparison,
+		withOverlayLabel
+	]);
 	const isDataValid = Boolean(data && data.length > 0);
 	const chartMetadata = useMemo(() => ({
 		withComparison,
@@ -11323,6 +12014,8 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 	const prefersReducedMotion = usePrefersReducedMotion();
 	const { contentRef, fittedCount, isMeasurable } = useFittedRowCount(fitRows && !allSeriesHidden, data?.length ?? 0, data);
 	const shouldFitRows = fitRows && isMeasurable;
+	const showComparisonColumn = withComparison && isComparisonVisible;
+	const templateColumns = showComparisonColumn && isPrimaryVisible ? "minmax(0, 1fr) auto auto" : "minmax(0, 1fr) auto";
 	if (!data || data.length === 0) return /* @__PURE__ */ jsx(ChartInstanceContext.Provider, {
 		value: { chartId },
 		children: /* @__PURE__ */ jsx(ChartLayout, {
@@ -11387,13 +12080,12 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 				}) : /* @__PURE__ */ jsx(component_default, {
 					role: "list",
 					"aria-label": ariaLabel ?? __("Leaderboard chart", "jetpack-charts"),
-					templateColumns: "minmax(0, 1fr) auto",
+					templateColumns,
 					rowGap: ROW_GAP,
 					columnGap: COLUMN_GAP,
 					"data-leaderboard-grid": true,
 					children: data.map((entry, rowIndex) => {
 						const rowStyle = shouldFitRows && rowIndex >= fittedCount ? { visibility: "hidden" } : void 0;
-						const showComparisonColumn = withComparison && isComparisonVisible;
 						const hasPreviousPeriodValue = hasPreviousValue(entry);
 						const hasDelta = hasDeltaValue(entry);
 						const showComparisonValue = showComparisonColumn && hasDelta;
@@ -11408,13 +12100,12 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 								withOverlayLabel,
 								primaryColor: resolvedPrimaryColor,
 								secondaryColor: resolvedSecondaryColor,
+								divergingScale,
 								isPrimaryVisible,
 								isComparisonVisible,
 								animation: animation && !loading && !prefersReducedMotion
 							})
-						}), /* @__PURE__ */ jsxs(Stack, {
-							direction: "row",
-							gap: "xs",
+						}), /* @__PURE__ */ jsxs("div", {
 							className: clsx(leaderboard_chart_module_default.valueContainer, { [leaderboard_chart_module_default.overlayLabel]: withOverlayLabel }),
 							children: [
 								isPrimaryVisible && /* @__PURE__ */ jsx(Text$1, { children: valueFormatter(entry.currentValue) }),
@@ -11495,8 +12186,7 @@ const LeaderboardChartWithProvider = (props) => {
 LeaderboardChartWithProvider.displayName = "LeaderboardChart";
 const LeaderboardChart = attachSubComponents(LeaderboardChartWithProvider, { Legend });
 const LeaderboardChartResponsive = attachSubComponents(withResponsive(LeaderboardChartWithProvider), { Legend });
-//#endregion
-//#region src/charts/private/pie-keyboard-navigation/order-arcs-for-navigation.ts
+// src/charts/private/pie-keyboard-navigation/order-arcs-for-navigation.ts
 /**
 * Orders arcs the way they appear: clockwise from 12 o'clock, which for a semi-circle is left to right.
 *
@@ -11504,15 +12194,13 @@ const LeaderboardChartResponsive = attachSubComponents(withResponsive(Leaderboar
 * @return A copy of `arcs` sorted by angular midpoint.
 */
 const orderArcsForNavigation = (arcs) => [...arcs].sort((a, b) => a.startAngle + a.endAngle - (b.startAngle + b.endAngle));
-//#endregion
-//#region src/charts/private/pie-keyboard-navigation/pie-selection-announcement.tsx
+// src/charts/private/pie-keyboard-navigation/pie-selection-announcement.tsx
 const PieSelectionAnnouncement = ({ data }) => /* @__PURE__ */ jsx(VisuallyHidden, {
 	role: "status",
 	"aria-atomic": "true",
 	children: data && /* @__PURE__ */ jsx(LabelValueContent, { data })
 });
-//#endregion
-//#region src/charts/private/pie-keyboard-navigation/pie-tooltip.tsx
+// src/charts/private/pie-keyboard-navigation/pie-tooltip.tsx
 const TOOLTIP_BOX_STYLE = { zIndex: 3 };
 const PieTooltip = ({ top, left, selectedIndex, tooltipRef, children }) => {
 	const standaloneScopeClass = useStandaloneScopeClass();
@@ -11534,8 +12222,7 @@ const PieTooltip = ({ top, left, selectedIndex, tooltipRef, children }) => {
 		}, `chart-tooltip-${selectedIndex}`)
 	});
 };
-//#endregion
-//#region src/charts/private/pie-keyboard-navigation/pie-selection-output.tsx
+// src/charts/private/pie-keyboard-navigation/pie-selection-output.tsx
 /**
 * Reports the selected segment: a focused tooltip for a keyboard selection, a pointer tooltip on hover, or a screen reader announcement without tooltips.
 *
@@ -11575,53 +12262,7 @@ const PieSelectionOutput = ({ withTooltips, selectedIndex, selectedData, keyboar
 		})
 	] });
 };
-//#endregion
-//#region src/charts/private/pie-keyboard-navigation/pie-keyboard-navigation.module.scss
-var pie_keyboard_navigation_module_default = {
-	"selected-ring__contrast": "a8ccharts-V2HDKq-selected-ring__contrast",
-	"selected-ring__focus": "a8ccharts-V2HDKq-selected-ring__focus"
-};
-//#endregion
-//#region src/charts/private/pie-keyboard-navigation/selected-segment-ring.tsx
-/**
-* Encodes `value` for an SVG id, losslessly so distinct chart ids never share a clip path.
-*
-* @param value - Any string.
-* @return `value` with each character outside `[A-Za-z0-9-]` written as `_<hex code point>_`.
-*/
-const toSvgId = (value) => Array.from(value, (character) => /[A-Za-z0-9-]/.test(character) ? character : `_${character.codePointAt(0)?.toString(16)}_`).join("");
-/**
-* Marks the selected segment with a two-tone ring drawn inside its edge, so the SVG edge cannot cut it off.
-*
-* @param {SelectedSegmentRingProps} props - Component props
-* @return {JSX.Element} The ring
-*/
-const SelectedSegmentRing = ({ chartId, d }) => {
-	const clipId = `pie-selected-ring-clip-${toSvgId(chartId)}`;
-	const clipPath = `url(#${clipId})`;
-	return /* @__PURE__ */ jsxs("g", {
-		pointerEvents: "none",
-		"aria-hidden": "true",
-		children: [
-			/* @__PURE__ */ jsx("clipPath", {
-				id: clipId,
-				children: /* @__PURE__ */ jsx("path", { d })
-			}),
-			/* @__PURE__ */ jsx("path", {
-				d,
-				clipPath,
-				className: pie_keyboard_navigation_module_default["selected-ring__contrast"]
-			}),
-			/* @__PURE__ */ jsx("path", {
-				d,
-				clipPath,
-				className: pie_keyboard_navigation_module_default["selected-ring__focus"]
-			})
-		]
-	});
-};
-//#endregion
-//#region src/charts/private/pie-keyboard-navigation/use-pie-keyboard-navigation.ts
+// src/charts/private/pie-keyboard-navigation/use-pie-keyboard-navigation.ts
 const usePieKeyboardNavigation = ({ navigationArcs, withTooltips, tooltipOffsetX, tooltipOffsetY }) => {
 	const chartRef = useRef(null);
 	const svgRef = useRef(null);
@@ -11701,8 +12342,7 @@ const usePieKeyboardNavigation = ({ navigationArcs, withTooltips, tooltipOffsetX
 		}
 	};
 };
-//#endregion
-//#region src/charts/private/radial-wipe-animation/radial-wipe-animation.tsx
+// src/charts/private/radial-wipe-animation/radial-wipe-animation.tsx
 /**
 * Renders a SVG mask that creates a radial wipe animation effect.
 *
@@ -11739,8 +12379,7 @@ function RadialWipeAnimation({ id, radius, innerRadius = 0, durationMs = 1e3, wi
 		})
 	});
 }
-//#endregion
-//#region src/charts/pie-chart/pie-chart.module.scss
+// src/charts/pie-chart/pie-chart.module.scss
 var pie_chart_module_default = {
 	"pie-chart": "a8ccharts-gnszbG-pie-chart",
 	"pie-chart__label-plate": "a8ccharts-gnszbG-pie-chart__label-plate",
@@ -11751,8 +12390,7 @@ var pie_chart_module_default = {
 	"pie-chart__plot": "a8ccharts-gnszbG-pie-chart__plot",
 	"pie-chart--responsive": "a8ccharts-gnszbG-pie-chart--responsive"
 };
-//#endregion
-//#region src/charts/pie-chart/pie-chart.tsx
+// src/charts/pie-chart/pie-chart.tsx
 /**
 * Default tooltip renderer for pie charts.
 * Renders the default `label: value` tooltip content for the hovered segment.
@@ -11996,9 +12634,11 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
 							selectedArc && /* @__PURE__ */ jsx(Group, {
 								top: centerY,
 								left: centerX,
-								children: /* @__PURE__ */ jsx(SelectedSegmentRing, {
+								children: /* @__PURE__ */ jsx(SelectedRing, {
 									chartId,
-									d: path(selectedArc) || ""
+									d: path(selectedArc) || "",
+									side: "inside",
+									testId: "pie-selected-ring"
 								})
 							}),
 							!allSegmentsHidden && /* @__PURE__ */ jsxs(Group, {
@@ -12033,8 +12673,7 @@ const PieChartResponsive = attachSubComponents(withResponsive(PieChartWithProvid
 	SVG: ChartSVG,
 	HTML: ChartHTML
 });
-//#endregion
-//#region src/charts/pie-semi-circle-chart/pie-semi-circle-chart.module.scss
+// src/charts/pie-semi-circle-chart/pie-semi-circle-chart.module.scss
 var pie_semi_circle_chart_module_default = {
 	"label": "a8ccharts-YtTOxW-label",
 	"note": "a8ccharts-YtTOxW-note",
@@ -12042,8 +12681,7 @@ var pie_semi_circle_chart_module_default = {
 	"pie-semi-circle-chart__plot": "a8ccharts-YtTOxW-pie-semi-circle-chart__plot",
 	"pie-semi-circle-chart--responsive": "a8ccharts-YtTOxW-pie-semi-circle-chart--responsive"
 };
-//#endregion
-//#region src/charts/pie-semi-circle-chart/pie-semi-circle-chart.tsx
+// src/charts/pie-semi-circle-chart/pie-semi-circle-chart.tsx
 /**
 * Default tooltip renderer for semi-circle pie charts.
 * Renders the default `label: value` tooltip content for the hovered segment.
@@ -12235,9 +12873,11 @@ const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width: pro
 							selectedArc && /* @__PURE__ */ jsx(Group, {
 								top: height,
 								left: width / 2,
-								children: /* @__PURE__ */ jsx(SelectedSegmentRing, {
+								children: /* @__PURE__ */ jsx(SelectedRing, {
 									chartId,
-									d: path(selectedArc) || ""
+									d: path(selectedArc) || "",
+									side: "inside",
+									testId: "pie-selected-ring"
 								})
 							}),
 							!allSegmentsHidden && /* @__PURE__ */ jsxs(Group, {
@@ -12284,14 +12924,12 @@ const PieSemiCircleChartResponsive = attachSubComponents(withResponsive(PieSemiC
 	SVG: ChartSVG,
 	HTML: ChartHTML
 });
-//#endregion
-//#region src/charts/sparkline/sparkline.module.scss
+// src/charts/sparkline/sparkline.module.scss
 var sparkline_module_default = {
 	"sparkline": "a8ccharts-GtgAVa-sparkline",
 	"sparkline--empty": "a8ccharts-GtgAVa-sparkline--empty"
 };
-//#endregion
-//#region src/charts/sparkline/sparkline.tsx
+// src/charts/sparkline/sparkline.tsx
 const DEFAULT_WIDTH = 100;
 const DEFAULT_HEIGHT = 40;
 /**
@@ -12433,8 +13071,7 @@ SparklineUnresponsive.displayName = "SparklineUnresponsive";
 * Responsive Sparkline chart component
 */
 const Sparkline = withResponsive(SparklineUnresponsive);
-//#endregion
-//#region src/components/trend-indicator/trend-indicator.module.scss
+// src/components/trend-indicator/trend-indicator.module.scss
 var trend_indicator_module_default = {
 	"trend-indicator": "a8ccharts-zR7F7G-trend-indicator",
 	"trend-indicator__icon": "a8ccharts-zR7F7G-trend-indicator__icon",
@@ -12443,8 +13080,7 @@ var trend_indicator_module_default = {
 	"trend-indicator--neutral": "a8ccharts-zR7F7G-trend-indicator--neutral",
 	"trend-indicator--up": "a8ccharts-zR7F7G-trend-indicator--up"
 };
-//#endregion
-//#region src/components/trend-indicator/trend-indicator.tsx
+// src/components/trend-indicator/trend-indicator.tsx
 const DIRECTION_LABELS = {
 	up: "Increase",
 	down: "Decrease",
@@ -12487,7 +13123,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, TooltipBox, TrendIndicator, XYChartTooltip, buildCalendarHeatmapData, buildMonthCalendarHeatmapData, defaultTheme, formatMetricValue, formatPercentage, getBucketInfo, getColorDistance, hexToRgba, isValidHexColor, lightenHexColor, mergeThemes, mixHexColors, normalizeColorToHex, parseAsLocalDate, parseHslString, prefersLightText, relativeLuminance, resolveCssVariable, useCalendarHeatmapData, useChartFormatting, useChartLegendItems, useChartRegistration, useChartScopeElement, useGlobalChartsContext, useGlobalChartsTheme, useLeaderboardLegendItems, useMonthCalendarHeatmapData, validateHexColor };
+export { AccessibleTooltip, AreaChartResponsive as AreaChart, AreaChart as AreaChartUnresponsive, BarChartResponsive as BarChart, BarChart as BarChartUnresponsive, BarListChartResponsive as BarListChart, BarListChart as BarListChartUnresponsive, BaseTooltip, ConversionFunnelChartWithProvider as ConversionFunnelChart, GeoChartResponsive as GeoChart, GeoChartWithProvider as GeoChartUnresponsive, GlobalChartsContext, GlobalChartsProvider, GlobalChartsProvider as ThemeProvider, GoogleDataTableColumnRoleType, HeatmapChartResponsive as HeatmapChart, HeatmapChart as HeatmapChartUnresponsive, LeaderboardChartResponsive as LeaderboardChart, LeaderboardChart as LeaderboardChartUnresponsive, Legend, LineChartResponsive as LineChart, LineChart as LineChartUnresponsive, PieChartResponsive as PieChart, PieChart as PieChartUnresponsive, PieSemiCircleChartResponsive as PieSemiCircleChart, PieSemiCircleChart as PieSemiCircleChartUnresponsive, Sparkline, SparklineUnresponsive, TooltipBox, TrendIndicator, XYChartTooltip, buildCalendarHeatmapData, buildMonthCalendarHeatmapData, defaultTheme, formatMetricValue, formatPercentage, getBucketInfo, getColorDistance, hexToRgba, isValidHexColor, lightenHexColor, mergeThemes, mixHexColors, normalizeColorToHex, parseAsLocalDate, parseHslString, prefersLightText, relativeLuminance, resolveCssVariable, useBarColors, useBarLegendItems, useCalendarHeatmapData, useChartFormatting, useChartLegendItems, useChartRegistration, useChartScopeElement, useGlobalChartsContext, useGlobalChartsTheme, useLeaderboardLegendItems, useMonthCalendarHeatmapData, validateHexColor };
 
 //# sourceMappingURL=index.js.map