@automattic/charts 4.11.0 → 4.12.0

package/dist/index.cjs

@@ -1298,10 +1298,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,
@@ -1459,6 +1456,7 @@ const GlobalChartsProvider = ({ children, theme, locale, timeZone }) => {
 		theme: providerTheme,
 		formatting,
 		getElementStyles,
+		backgroundColor: colorCache.background,
 		toggleSeriesVisibility,
 		setSeriesVisibility,
 		setChartHiddenSeries,
@@ -1475,6 +1473,7 @@ const GlobalChartsProvider = ({ children, theme, locale, timeZone }) => {
 		providerTheme,
 		formatting,
 		getElementStyles,
+		colorCache.background,
 		toggleSeriesVisibility,
 		setSeriesVisibility,
 		setChartHiddenSeries,
@@ -2299,6 +2298,21 @@ const Legend = (0, react.forwardRef)(({ chartId, items, shape, ...props }, ref)
 //#endregion
 //#region 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
 * @param showValues         - Whether to show values or return empty string
@@ -2510,21 +2524,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 (0, react.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 : (0, _wordpress_i18n.__)("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,
@@ -2532,6 +2547,7 @@ function useChartLegendItems(data, options = {}, legendShape) {
 		collapseGroups,
 		comparisonItem,
 		comparisonSeriesItems,
+		seriesColors,
 		renderGlyph,
 		legendShape
 	]);
@@ -3057,17 +3073,19 @@ 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];
-				tooltipContext?.showTooltip({
-					datum,
-					key: s.label,
-					index
-				});
-			}
-		});
-		else if (mode === "individual") {
+		if (mode === "group") {
+			closeTooltipNow();
+			series.forEach((s, index) => {
+				if (selectedIndex < s.data.length) {
+					const datum = s.data[selectedIndex];
+					tooltipContext?.showTooltip({
+						datum,
+						key: s.label,
+						index
+					});
+				}
+			});
+		} else if (mode === "individual") {
 			if (selectedIndex < tooltipData.length) {
 				const tooltipItem = tooltipData[selectedIndex];
 				tooltipContext?.showTooltip({
@@ -4814,6 +4832,8 @@ const LineChartInternal = (0, react.forwardRef)(({ data, ariaLabel, chartId: pro
 			isVisible: !hiddenSeries.has(series.label)
 		}));
 	}, [dataSorted, hiddenSeries]);
+	const visibleSeries = (0, react.useMemo)(() => dataSorted.filter((series) => isSeriesVisible(series.label)), [dataSorted, isSeriesVisible]);
+	const visibleSeriesKey = (0, react.useMemo)(() => JSON.stringify(visibleSeries.map((series) => series.label)), [visibleSeries]);
 	const allSeriesHidden = (0, react.useMemo)(() => {
 		return seriesWithVisibility.every(({ isVisible }) => !isVisible);
 	}, [seriesWithVisibility]);
@@ -4844,21 +4864,21 @@ const LineChartInternal = (0, react.forwardRef)(({ data, ariaLabel, chartId: pro
 		options?.yScale
 	]);
 	const activateSelectedPoint = (0, react.useCallback)((index) => {
-		const series = dataSorted[0];
-		const datum = series?.data[index];
-		if (series && datum) onDatumActivate?.({
-			datum,
+		const series = visibleSeries.find((candidate) => candidate.data[index]);
+		if (series) onDatumActivate?.({
+			datum: series.data[index],
 			index,
 			key: series.label
 		});
-	}, [dataSorted, onDatumActivate]);
+	}, [visibleSeries, onDatumActivate]);
 	const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation({
 		selectedIndex,
 		setSelectedIndex,
 		isNavigating,
 		setIsNavigating,
 		chartRef,
-		totalPoints: dataSorted[0]?.data.length || 0,
+		totalPoints: Math.max(0, ...visibleSeries.map((series) => series.data.length)),
+		visibleSeriesKey,
 		onActivate: activateSelectedPoint,
 		preventTooltipScroll: tooltipPlacement === "below-axis"
 	});
@@ -4877,7 +4897,7 @@ const LineChartInternal = (0, react.forwardRef)(({ data, ariaLabel, chartId: pro
 		}
 		return min <= max ? [min, max] : void 0;
 	}, [dataSorted, isSeriesVisible]);
-	const hasWholeNumberValues = (0, react.useMemo)(() => hasOnlyWholeNumbers(dataSorted.filter((series) => isSeriesVisible(series.label))), [dataSorted, isSeriesVisible]);
+	const hasWholeNumberValues = (0, react.useMemo)(() => hasOnlyWholeNumbers(visibleSeries), [visibleSeries]);
 	const chartOptions = (0, react.useMemo)(() => {
 		const fallbackYDomain = getFallbackYDomain(visibleReadingExtent, options?.yScale?.type === "log");
 		return {
@@ -4923,11 +4943,7 @@ const LineChartInternal = (0, react.forwardRef)(({ data, ariaLabel, chartId: pro
 		formatting,
 		isSeriesVisible
 	]);
-	const bucketInfo = (0, react.useMemo)(() => getBucketInfo(dataSorted.filter((series) => isSeriesVisible(series.label)), options?.axis?.x?.tickResolution), [
-		dataSorted,
-		isSeriesVisible,
-		options?.axis?.x?.tickResolution
-	]);
+	const bucketInfo = (0, react.useMemo)(() => getBucketInfo(visibleSeries, options?.axis?.x?.tickResolution), [visibleSeries, options?.axis?.x?.tickResolution]);
 	const tooltipRenderGlyph = (0, react.useMemo)(() => {
 		return (props) => {
 			const seriesIndex = dataSorted.findIndex((series) => series.label === props.key || series.data.includes(props.datum));
@@ -5157,7 +5173,7 @@ const LineChartInternal = (0, react.forwardRef)(({ data, ariaLabel, chartId: pro
 									selectedIndex,
 									tooltipRef,
 									keyboardFocusedClassName: line_chart_module_default["line-chart__tooltip--keyboard-focused"],
-									series: dataSorted
+									series: visibleSeries
 								}),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LineChartScalesRef, {
 									chartRef: internalChartRef,
@@ -5817,13 +5833,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
@@ -6085,8 +6094,7 @@ const createGroupScale = (keys, bandwidth, padding) => (0, _visx_scale.scaleBand
 //#endregion
 //#region 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.
@@ -6100,36 +6108,33 @@ 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
 	};
 }
@@ -6178,6 +6183,518 @@ const ClassifiedBarSeries = ({ barClassName, primaryKeys, groupPadding, ...props
 		renderGlyph
 	});
 };
+//#endregion
+//#region src/charts/bar-chart/private/slotted-bar-series.tsx
+const SlottedBarSeries = ({ barClassName, slotKeys, slotKey, thickness, groupPadding, ...props }) => {
+	const { xScale, yScale, horizontal } = (0, react.useContext)(_visx_xychart.DataContext);
+	const bandScale = horizontal ? yScale : xScale;
+	const valueScale = horizontal ? xScale : yScale;
+	const groupScale = (0, react.useMemo)(() => createGroupScale(slotKeys, bandScale?.bandwidth?.() ?? 0, groupPadding), [
+		slotKeys,
+		bandScale,
+		groupPadding
+	]);
+	const renderGlyph = (0, react.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__ */ (0, react_jsx_runtime.jsx)("rect", {
+			...rect,
+			className: (0, clsx.default)("visx-bar", barClassName?.(datum)),
+			fill: color
+		});
+	}, [
+		bandScale,
+		valueScale,
+		horizontal,
+		groupScale,
+		slotKey,
+		thickness,
+		props.xAccessor,
+		props.yAccessor,
+		barClassName
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.GlyphSeries, {
+		...props,
+		enableEvents: false,
+		renderGlyph
+	});
+};
+//#endregion
+//#region 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"
+};
+//#endregion
+//#region 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__ */ (0, react_jsx_runtime.jsxs)("g", {
+		pointerEvents: "none",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("clipPath", {
+				id: clipId,
+				children: side === "inside" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+					d: `${EVERYWHERE} ${d}`,
+					clipRule: "evenodd"
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				d,
+				clipPath,
+				className: (0, clsx.default)(selected_ring_module_default["selected-ring__far"], selected_ring_module_default[`selected-ring__${far}`])
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				d,
+				clipPath,
+				className: (0, clsx.default)(selected_ring_module_default["selected-ring__edge"], selected_ring_module_default[`selected-ring__${edge}`])
+			})
+		]
+	});
+};
+//#endregion
+//#region 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 = (0, react.useContext)(_visx_xychart.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__ */ (0, react_jsx_runtime.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"
+	});
+};
+//#endregion
+//#region 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__ */ (0, react_jsx_runtime.jsx)("g", {
+		className: "visx-bar-group",
+		children: overlapSlots.entries.map(({ series, index }) => /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("g", {
+		className: "visx-bar-group",
+		children: primaryEntries.map(({ series, index }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClassifiedBarSeries, {
+			dataKey: series.label,
+			data: series.data,
+			xAccessor,
+			yAccessor,
+			colorAccessor: getBarBackground(index),
+			barClassName,
+			primaryKeys,
+			groupPadding
+		}, series.label))
+	});
+	else bars = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.BarGroup, {
+		padding: groupPadding,
+		children: primaryEntries.map(({ series, index }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.BarSeries, {
+			dataKey: series.label,
+			data: series.data,
+			xAccessor,
+			yAccessor,
+			colorAccessor: getBarBackground(index)
+		}, series.label))
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [bars, selectedBar && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectedBarRing, {
+		chartId,
+		selected: selectedBar,
+		slotKeys: overlapSlots?.slotKeys ?? primaryKeys,
+		groupPadding,
+		horizontal,
+		xAccessor,
+		yAccessor
+	})] });
+};
+//#endregion
+//#region 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.
+* @param props.index   - The selected data point.
+* @return No visual content.
+*/
+function SlotTooltipMembers({ members, index }) {
+	const { showTooltip, updateTooltip } = (0, react.useContext)(_visx_xychart.TooltipContext) ?? {};
+	(0, react.useEffect)(() => {
+		updateTooltip?.((state) => ({
+			...state,
+			tooltipData: void 0
+		}));
+		members.forEach(({ key, datum }) => showTooltip?.({
+			key,
+			datum,
+			index
+		}));
+	}, [members, index]);
+	return null;
+}
+//#endregion
+//#region 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;
+}
+//#endregion
+//#region 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 != null ? 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 (0, react.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 != null ? `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] : [];
+	}));
+}
+/**
+* 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, dataPointIndex } = position;
+	const members = slots.entries.flatMap(({ series }) => {
+		const datum = series.data.find((point) => isSameCategory(point, category));
+		return datum ? [{
+			key: series.label,
+			datum
+		}] : [];
+	});
+	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))),
+		index: dataPointIndex,
+		members: [...members.filter(({ key }) => key !== stopKey), ...members.filter(({ key }) => key === stopKey)]
+	};
+}
+//#endregion
+//#region 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 = (0, react.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,
+		series,
+		key: (0, react.useMemo)(() => JSON.stringify(overlapSlots?.keys ?? series.map((item) => item.label)), [overlapSlots, series]),
+		barAt: (0, react.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: (0, react.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.
@@ -6213,9 +6730,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))));
@@ -6223,13 +6738,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__ */ (0, react_jsx_runtime.jsx)("rect", {
@@ -6238,8 +6752,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}`));
 		});
 	});
@@ -6338,7 +6852,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.
@@ -6346,12 +6861,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 } = (0, react.useContext)(_visx_xychart.DataContext);
-	const { showTooltip } = (0, react.useContext)(_visx_xychart.TooltipContext);
+	const { showTooltip, hideTooltip, updateTooltip } = (0, react.useContext)(_visx_xychart.TooltipContext);
 	const scale = horizontal ? yScale : xScale;
 	const bandwidth = scale?.bandwidth?.() ?? 0;
-	const groupScale = (0, react.useMemo)(() => createGroupScale(keys, bandwidth, groupPadding), [
+	const groupScale = (0, react.useMemo)(() => createGroupScale(slots?.keys ?? keys, bandwidth, groupPadding), [
+		slots,
 		keys,
 		bandwidth,
 		groupPadding
@@ -6359,18 +6875,21 @@ function BandTooltip({ keys, groupPadding, withTooltips, onPointerDown, onPointe
 	const getSelections = (0, react.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,
@@ -6381,12 +6900,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 = (0, react.useCallback)((params) => {
@@ -6396,24 +6919,162 @@ 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
 	]);
 	(0, _visx_xychart.useEventEmitter)("pointermove", withTooltips ? handlePointer : void 0);
+	(0, _visx_xychart.useEventEmitter)("pointerout", withTooltips && slots ? hideTooltip : void 0);
 	(0, _visx_xychart.useEventEmitter)("pointerdown", handlePointer);
 	(0, _visx_xychart.useEventEmitter)("pointerup", onPointerUp ? handlePointer : void 0);
 	return null;
 }
 //#endregion
+//#region 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;
+}
+//#endregion
+//#region 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 (0, react.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
+	]);
+}
+//#endregion
+//#region 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 = (0, react.useMemo)(() => layout ? getBarColors(data, { layout }) : void 0, [
+		data,
+		layout,
+		getBarColors
+	]);
+	const items = useChartLegendItems(data, (0, react.useMemo)(() => ({
+		...options,
+		seriesColors
+	}), [options, seriesColors]), legendShape);
+	return (0, react.useMemo)(() => layout && seriesColors ? forBarLayout(data, items, layout, seriesColors) : items, [
+		data,
+		items,
+		layout,
+		seriesColors
+	]);
+}
+//#endregion
 //#region src/charts/bar-chart/bar-chart.tsx
 const validateData$2 = (data) => {
 	if (!data?.length) return (0, _wordpress_i18n.__)("No data available", "jetpack-charts");
@@ -6425,13 +7086,14 @@ const renderTooltipRow = (label, value) => /* @__PURE__ */ (0, react_jsx_runtime
 	className: bar_chart_module_default["bar-chart__tooltip-row"],
 	children: (0, _wordpress_i18n.sprintf)((0, _wordpress_i18n.__)("%1$s: %2$s", "jetpack-charts"), label, value)
 });
-const BarChartInternal = ({ data, 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 = (0, react.useCallback)((seriesLabel) => !hiddenSeries.has(seriesLabel), [hiddenSeries]);
@@ -6441,16 +7103,25 @@ const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, he
 		enabled: showZeroValues,
 		valueAxisLength: horizontal ? width : height
 	});
-	const legendItems = useChartLegendItems(dataSorted, (0, react.useMemo)(() => ({
+	const legendItems = useBarLegendItems(dataSorted, (0, react.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 = (0, react.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 = (0, react.useCallback)((series) => isSeriesVisible(series.label), [isSeriesVisible]);
 	const hasWholeNumberValues = (0, react.useMemo)(() => hasOnlyWholeNumbers(dataSorted.filter(isSeriesRendered)), [dataSorted, isSeriesRendered]);
 	const chartOptions = useBarChartOptions(dataWithVisibleZeros, horizontal, options, isSeriesRendered);
@@ -6479,37 +7150,30 @@ const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, he
 		return seriesWithVisibility.every(({ isVisible }) => !isVisible);
 	}, [seriesWithVisibility]);
 	const primaryEntries = (0, react.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 = (0, react.useMemo)(() => primaryEntries.map(({ series }) => series.label), [primaryEntries]);
-	const primarySeries = (0, react.useMemo)(() => primaryEntries.map(({ series }) => series), [primaryEntries]);
-	const activateSelectedBar = (0, react.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 = (0, react.useMemo)(() => JSON.stringify(primaryKeys), [primaryKeys]);
+	const stops = useBarStops(overlapSlots, primaryEntries);
+	const { barAt, stopOf } = stops;
+	const activateSelectedBar = (0, react.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 = (0, react.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 = (0, react.useMemo)(() => {
+		if (isOverlap) return [];
 		const primaryByGroup = new Map(primaryEntries.map(({ series, index }) => [series.group, {
 			label: series.label,
 			index
@@ -6525,12 +7189,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
@@ -6570,23 +7234,32 @@ const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, he
 		chartOptions.yScale,
 		horizontal
 	]);
-	const getBarBackground = (0, react.useCallback)((index) => (datum) => withPatterns ? `url(#${getPatternId(chartId, index)})` : datum.color ?? getElementStyles({
-		data: dataSorted[index],
-		index
-	}).color, [
+	const getBarBackground = (0, react.useCallback)((index) => (datum) => withPatterns ? `url(#${getPatternId(chartId, index)})` : datum.color ?? barColors[index] ?? "", [
 		withPatterns,
-		getElementStyles,
-		dataSorted,
+		barColors,
 		chartId
 	]);
-	const resolveComparisonFill = (0, react.useCallback)((entry) => withPatterns ? `url(#${getPatternId(chartId, entry.primaryIndex)})` : getElementStyles({
-		data: entry.series,
-		index: entry.index
-	}).color, [
+	const resolveComparisonFill = (0, react.useCallback)((entry, datum) => withPatterns ? `url(#${getPatternId(chartId, entry.index)})` : datum.color ?? barColors[entry.index] ?? "", [
 		withPatterns,
 		chartId,
-		getElementStyles
+		barColors
 	]);
+	const renderOverlapTooltip = (0, react.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: bar_chart_module_default["bar-chart__tooltip"],
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: bar_chart_module_default["bar-chart__tooltip-header"],
+				children: categoryLabel
+			}), dataSorted.flatMap(({ label }) => {
+				const datum = datumByKey[label]?.datum;
+				return datum ? [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: renderTooltipRow(label, formatReading(datum.value)) }, label)] : [];
+			})]
+		});
+	}, [chartOptions.tooltip, dataSorted]);
 	const renderDefaultTooltip = (0, react.useCallback)(({ tooltipData }) => {
 		const nearestDatum = tooltipData?.nearestDatum?.datum;
 		if (!nearestDatum) return null;
@@ -6661,26 +7334,24 @@ const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, he
 				}
 			`;
 	}, [chartId]);
-	const createKeyboardHighlightStyle = (0, react.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 = (0, react.useMemo)(() => overlapSlots && {
+		keys: overlapSlots.slotKeys,
+		slotOf: overlapSlots.slotOf
+	}, [overlapSlots]);
+	const selectedSlot = (0, react.useMemo)(() => getSelectedSlot(overlapSlots, selectedIndex), [overlapSlots, selectedIndex]);
+	const selectedBar = (0, react.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,
-		primaryEntries,
-		chartId
+		barAt
 	]);
 	const error = validateData$2(dataSorted);
 	const isDataValid = !error;
@@ -6701,7 +7372,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__ */ (0, react_jsx_runtime.jsx)(Legend, {
 		orientation: legend.orientation ?? "horizontal",
@@ -6781,14 +7451,7 @@ const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, he
 										tickValues: (horizontal ? void 0 : valueTicks) ?? chartOptions.axis.y.tickValues
 									})] })
 								}),
-								withPatterns && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("defs", { children: dataSorted.map((seriesData, index) => renderPattern(index, getElementStyles({
-									data: seriesData,
-									index
-								}).color)) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: dataSorted.map((seriesData, index) => createPatternBorderStyle(index, getElementStyles({
-									data: seriesData,
-									index
-								}).color)) })] }),
-								highlightedBarStyle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: highlightedBarStyle }),
+								withPatterns && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("defs", { children: barColors.map((color, index) => renderPattern(index, color)) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: barColors.map((color, index) => createPatternBorderStyle(index, color)) })] }),
 								allSeriesHidden ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SvgEmptyState, {
 									x: width / 2,
 									y: chartHeight / 2,
@@ -6806,30 +7469,22 @@ const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, he
 									getElementStyles,
 									resolveFill: resolveComparisonFill
 								}),
-								barClassName ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("g", {
-									className: "visx-bar-group",
-									children: primaryEntries.map(({ series: seriesData, index }) => /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.BarGroup, {
-									padding: groupPadding,
-									children: primaryEntries.map(({ series: seriesData, index }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.BarSeries, {
-										dataKey: seriesData?.label,
-										data: seriesData.data,
-										yAccessor: chartOptions.accessors.yAccessor,
-										xAccessor: chartOptions.accessors.xAccessor,
-										colorAccessor: getBarBackground(index)
-									}, seriesData?.label))
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(BarLayer, {
+									chartId,
+									overlapSlots,
+									selectedBar,
+									primaryEntries,
+									primaryKeys,
+									getBarBackground,
+									barClassName,
+									groupPadding,
+									horizontal,
+									xAccessor: chartOptions.accessors.xAccessor,
+									yAccessor: chartOptions.accessors.yAccessor
 								}),
 								(withTooltips || onPointerDown || onPointerUp) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BandTooltip, {
-									keys: primaryKeys,
+									keys: overlapSlots?.keys ?? primaryKeys,
+									slots: overlapBandSlots,
 									groupPadding,
 									withTooltips,
 									onPointerDown,
@@ -6846,6 +7501,10 @@ const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, he
 										...!horizontal && valueTicks ? { tickValues: valueTicks } : {}
 									})] })
 								}),
+								withTooltips && selectedSlot && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SlotTooltipMembers, {
+									members: selectedSlot.members,
+									index: selectedSlot.index
+								}),
 								withTooltips && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(XYChartTooltip, {
 									tooltipPlacement,
 									tooltipAnchorTop,
@@ -6853,11 +7512,11 @@ 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,
+									series: stops.series,
 									mode: "individual"
 								})
 							]
@@ -9517,7 +10176,7 @@ function warning(message) {
 	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
+//#region ../../../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 = (0, react.useRef)(false);
 	(0, react.useEffect)(() => {
@@ -10612,7 +11271,7 @@ 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-d59e098f.esm.js
+//#region ../../../node_modules/.pnpm/@emotion+react@11.14.0_@types+react@19.3.0_react@19.3.0/node_modules/@emotion/react/dist/emotion-element-d59e098f.esm.js
 var isBrowser = typeof document !== "undefined";
 var EmotionCacheContext = /* #__PURE__ */ react.createContext(typeof HTMLElement !== "undefined" ? /* #__PURE__ */ createCache({ key: "css" }) : null);
 EmotionCacheContext.Provider;
@@ -10721,7 +11380,7 @@ _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
+//#region ../../../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();
@@ -10828,7 +11487,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
+//#region ../../../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;
@@ -10896,19 +11555,19 @@ var BaseContextSystemProvider = ({ children, value }) => {
 };
 (0, react.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
+//#region ../../../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
+//#region ../../../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
 var import_dist = require_dist();
 function getStyledClassName(namespace) {
 	return `components-${(0, import_dist.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
+//#region ../../../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 });
 }
@@ -10925,7 +11584,7 @@ function _contextConnect(Component, namespace, options) {
 	});
 }
 //#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
+//#region ../../../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 };
 }
@@ -10933,7 +11592,7 @@ 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
+//#region ../../../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");
@@ -10955,7 +11614,7 @@ function useContextSystem(props, namespace) {
 	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
+//#region ../../../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)",
@@ -10971,7 +11630,7 @@ var visuallyHidden = {
 	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
+//#region ../../../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
@@ -11061,7 +11720,7 @@ function UnforwardedPolymorphicElement({ as, ...props }, ref) {
 }
 var PolymorphicElement = (0, react.forwardRef)(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
+//#region ../../../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__ */ (0, react_jsx_runtime.jsx)(PolymorphicElement, {
 		ref,
@@ -11070,7 +11729,7 @@ function UnforwardedView({ css, ...restProps }, ref) {
 }
 var component_default$2 = Object.assign((0, react.forwardRef)(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
+//#region ../../../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__ */ (0, react_jsx_runtime.jsx)(component_default$2, {
@@ -11085,7 +11744,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
+//#region ../../../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",
@@ -11124,7 +11783,7 @@ function useResponsiveValue(values, options = {}) {
 	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
+//#region ../../../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",
@@ -11172,7 +11831,7 @@ 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
+//#region ../../../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;
@@ -11317,7 +11976,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
+//#region ../../../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__ */ (0, react_jsx_runtime.jsx)(component_default$2, {
@@ -11924,51 +12583,6 @@ 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__ */ (0, react_jsx_runtime.jsxs)("g", {
-		pointerEvents: "none",
-		"aria-hidden": "true",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("clipPath", {
-				id: clipId,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d })
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-				d,
-				clipPath,
-				className: pie_keyboard_navigation_module_default["selected-ring__contrast"]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-				d,
-				clipPath,
-				className: pie_keyboard_navigation_module_default["selected-ring__focus"]
-			})
-		]
-	});
-};
-//#endregion
 //#region src/charts/private/pie-keyboard-navigation/use-pie-keyboard-navigation.ts
 const usePieKeyboardNavigation = ({ navigationArcs, withTooltips, tooltipOffsetX, tooltipOffsetY }) => {
 	const chartRef = (0, react.useRef)(null);
@@ -12344,9 +12958,11 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
 							selectedArc && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_group.Group, {
 								top: centerY,
 								left: centerX,
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectedSegmentRing, {
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectedRing, {
 									chartId,
-									d: path(selectedArc) || ""
+									d: path(selectedArc) || "",
+									side: "inside",
+									testId: "pie-selected-ring"
 								})
 							}),
 							!allSegmentsHidden && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_visx_group.Group, {
@@ -12583,9 +13199,11 @@ const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width: pro
 							selectedArc && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_group.Group, {
 								top: height,
 								left: width / 2,
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectedSegmentRing, {
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectedRing, {
 									chartId,
-									d: path(selectedArc) || ""
+									d: path(selectedArc) || "",
+									side: "inside",
+									testId: "pie-selected-ring"
 								})
 							}),
 							!allSegmentsHidden && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_visx_group.Group, {
@@ -12885,6 +13503,8 @@ exports.parseHslString = parseHslString;
 exports.prefersLightText = prefersLightText;
 exports.relativeLuminance = relativeLuminance;
 exports.resolveCssVariable = resolveCssVariable;
+exports.useBarColors = useBarColors;
+exports.useBarLegendItems = useBarLegendItems;
 exports.useCalendarHeatmapData = useCalendarHeatmapData;
 exports.useChartFormatting = useChartFormatting;
 exports.useChartLegendItems = useChartLegendItems;