@automattic/charts 3.1.0 → 3.2.0

package/dist/index.cjs

@@ -17,7 +17,7 @@ var __copyProps = (to, from, except, desc) => {
 	}
 	return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule || !__hasOwnProp.call(mod, "default") ? __defProp(target, "default", {
 	value: mod,
 	enumerable: true
 }) : target, mod));
@@ -28,7 +28,7 @@ let _wordpress_i18n = require("@wordpress/i18n");
 let clsx = require("clsx");
 clsx = __toESM(clsx, 1);
 let react = require("react");
-react = __toESM(react, 1);
+react = __toESM(react);
 let _visx_vendor_d3_color = require("@visx/vendor/d3-color");
 let date_fns = require("date-fns");
 let _visx_text = require("@visx/text");
@@ -252,7 +252,8 @@ const formatPercentage = (value) => {
 */
 const getLongestTickWidth = (ticks, formatTick, labelStyle) => {
 	const formattedTicks = ticks.map((tick) => formatTick(tick, 0, []));
-	return (0, _visx_text.getStringWidth)(formattedTicks.reduce((longest, current) => longest.length >= current.length ? longest : current, formattedTicks[0]), labelStyle);
+	const longestTick = formattedTicks.reduce((longest, current) => longest.length >= current.length ? longest : current, formattedTicks[0]);
+	return (0, _visx_text.getStringWidth)(longestTick, labelStyle);
 };
 //#endregion
 //#region src/utils/get-styles.ts
@@ -762,6 +763,16 @@ const getChartColor = (index, colorCache) => {
 	const fallbackLightness = BASE_LIGHTNESS + index % LIGHTNESS_VARIATION_STEPS * LIGHTNESS_INCREMENT;
 	return (0, _visx_vendor_d3_color.hsl)(Math.round(fallbackHue), fallbackSaturation / 100, fallbackLightness / 100).formatHex();
 };
+/**
+* The catalog role holding one series-palette slot.
+*
+* @param slot - The one-based slot number.
+* @return The role name.
+*/
+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/theme-override-vars.ts
 const ROLE_FOR_FIELD = [
@@ -769,8 +780,22 @@ const ROLE_FOR_FIELD = [
 	["--a8c-charts-color-grid", (theme) => theme.gridStyles?.stroke],
 	["--a8c-charts-color-axis", (theme) => theme.xAxisLineStyles?.stroke],
 	["--a8c-charts-color-tick", (theme) => theme.xTickLineStyles?.stroke],
-	["--a8c-charts-color-label-axis", (theme) => theme.svgLabelSmall?.fill]
+	["--a8c-charts-color-label-axis", (theme) => theme.svgLabelSmall?.fill],
+	["--a8c-charts-color-label-background", (theme) => theme.labelBackgroundColor],
+	["--a8c-charts-color-label-on-fill", (theme) => theme.labelTextColor],
+	...Array.from({ length: 5 }, (_, index) => [seriesRole(index + 1), (theme) => theme.colors?.[index]])
 ];
+let warnedAboutExtraColors = false;
+/**
+* Warns once when a consumer passes more colors than there are slots to publish them into.
+*
+* @param count - How many entries `theme.colors` holds.
+*/
+function warnOnceAboutExtraColors(count) {
+	if (warnedAboutExtraColors || process.env.NODE_ENV === "production") return;
+	warnedAboutExtraColors = true;
+	console.warn(`[Charts] theme.colors holds ${count} colors and the palette has 5 slots, so entries past the 5th are ignored. Set a per-series color with \`options.stroke\` instead.`);
+}
 /**
 * The variable a `theme` prop override is published as, one layer outside the role itself.
 *
@@ -784,7 +809,7 @@ ROLE_FOR_FIELD.map(([role]) => role);
 /**
 * Whether a value reads the role it is being published for, which would make the catalog entry depend on itself.
 *
-* The dependency runs `<role>: var(<role>-theme, …)`, so a value naming `<role>` closes a cycle through the catalog entry. CSS marks every custom property in a cycle invalid at computed-value time — the role's own fallback is *not* used, so the token resolves to nothing and every chart loses that colour. Verified in Chrome: `--role-theme: var(--role, blue); --role: var(--role-theme, green)` leaves `--role` empty, not `green`.
+* The dependency runs `<role>: var(<role>-theme, …)`, so a value naming `<role>` closes a cycle through the catalog entry. CSS marks every custom property in a cycle invalid at computed-value time — the role's own fallback is *not* used, so the token resolves to nothing and every chart loses that color. Verified in Chrome: `--role-theme: var(--role, blue); --role: var(--role-theme, green)` leaves `--role` empty, not `green`.
 *
 * Three things this has to get right, none of which a plain substring test gets:
 *
@@ -800,10 +825,12 @@ ROLE_FOR_FIELD.map(([role]) => role);
 */
 const readsOwnRole = (value, role) => value.trim() === role || new RegExp(`var\\(\\s*${role.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}(?![\\w-])`).test(value);
 /**
-* Maps a sparse consumer theme onto the theme-layer variables its overridden catalog roles read, so CSS-painted and JS-resolved colours read one source.
+* Maps a sparse consumer theme onto the theme-layer variables its overridden catalog roles read, so CSS-painted and JS-resolved colors read one source.
 *
 * A value that reads the role it would override is left unpublished — that is the default theme's own pointer surviving `mergeThemes`, and publishing it would invalidate the role. The role is still reported in `roles`: `withCatalogPointers` restores its theme field to the catalog pointer either way, so CSS and visx agree on the catalog default rather than visx painting a literal CSS never sees.
 *
+* `theme.colors` publishes through the same mechanism, one slot per entry, so a CSS declaration of `--a8c-charts-color-series-N` still beats it and a short array leaves the later slots unset rather than blank.
+*
 * @param theme - The consumer's `theme` prop, before merging with the default theme.
 * @return The wrapper's custom properties, and the roles the consumer overrode.
 */
@@ -812,6 +839,7 @@ const themeOverrideVars = (theme) => {
 		vars: {},
 		roles: []
 	};
+	if (Array.isArray(theme.colors) && theme.colors.length > 5) warnOnceAboutExtraColors(theme.colors.length);
 	const vars = {};
 	const roles = [];
 	for (const [role, read] of ROLE_FOR_FIELD) {
@@ -832,15 +860,9 @@ const themeOverrideVars = (theme) => {
 */
 const defaultTheme = {
 	backgroundColor: "var(--a8c-charts-color-background, #fff)",
-	labelBackgroundColor: "transparent",
+	labelBackgroundColor: "var(--a8c-charts-color-label-background, transparent)",
 	labelTextColor: "var(--a8c-charts-color-label-on-fill, #FFFFFF)",
-	colors: [
-		"#98C8DF",
-		"#006DAB",
-		"#A6DC80",
-		"#1F9828",
-		"#FF8C8F"
-	],
+	colors: [...SERIES_PALETTE_POINTERS],
 	gridStyles: {
 		stroke: "var(--a8c-charts-color-grid, #dbdbdb)",
 		strokeWidth: 1
@@ -920,7 +942,23 @@ const defaultTheme = {
 };
 //#endregion
 //#region src/providers/chart-context/private/with-catalog-pointers.ts
+/**
+* The pointer one palette slot is restored to.
+*
+* Unlike the other roles, this keeps the consumer's own color as the pointer's terminal literal instead of the catalog's. The literal is only ever reached where `getComputedStyle` resolves nothing — SSR and jsdom — and there the palette is the one field where falling back to the catalog default would be visible: every series would paint the same seeded blue. In a browser the slot resolves first, so a CSS declaration of it still outranks the consumer's `theme.colors`.
+*
+* @param index - The slot's zero-based index in `colors`.
+* @param value - The merged theme's entry for it.
+* @return The catalog pointer for that slot.
+*/
+const seriesPointer = (index, value) => {
+	const role = seriesRole(index + 1);
+	if (typeof value === "string" && value.startsWith(`var(${role}`)) return value;
+	if (typeof value !== "string" || value === "") return SERIES_PALETTE_POINTERS[index];
+	return `var(${role}, ${value})`;
+};
 const CATALOG_RESTORE_FOR_ROLE = {
+	...Object.fromEntries(Array.from({ length: 5 }, (_, index) => [seriesRole(index + 1), (theme) => ({ colors: SERIES_PALETTE_POINTERS.map((_pointer, slot) => seriesPointer(slot, theme.colors?.[slot])) })])),
 	"--a8c-charts-color-background": () => ({ backgroundColor: defaultTheme.backgroundColor }),
 	"--a8c-charts-color-grid": (theme) => ({ gridStyles: {
 		...theme.gridStyles,
@@ -937,14 +975,16 @@ const CATALOG_RESTORE_FOR_ROLE = {
 	"--a8c-charts-color-label-axis": (theme) => ({ svgLabelSmall: {
 		...theme.svgLabelSmall,
 		fill: defaultTheme.svgLabelSmall.fill
-	} })
+	} }),
+	"--a8c-charts-color-label-background": () => ({ labelBackgroundColor: defaultTheme.labelBackgroundColor }),
+	"--a8c-charts-color-label-on-fill": () => ({ labelTextColor: defaultTheme.labelTextColor })
 };
 /**
 * Restores the mapped theme fields of `overriddenRoles` to their catalog pointer, so the theme-layer variable `themeOverrideVars` writes on the provider wrapper is the only carrier for an overridden role — CSS and the JS bridge (`useXYChartTheme`) then resolve it through the same cascade instead of visx reading a baked literal that can disagree with a closer CSS override.
 *
 * This covers roles `themeOverrideVars` deliberately left unpublished as well as the ones it published. A value that reads its own role is not publishable, but leaving visx the consumer's literal is what the whole mechanism exists to prevent: `theme={ { gridStyles: { stroke: 'var(--brand, var(--a8c-charts-color-grid, red))' } } }` would have CSS paint the catalog default while visx painted `--brand`.
 *
-* Every field outside the five mapped roles is left exactly as `merged` provided it: those aren't published as theme-layer vars, so rewriting them would erase a consumer's override with no replacement carrier.
+* Every field outside the mapped roles is left exactly as `merged` provided it: those aren't published as theme-layer vars, so rewriting them would erase a consumer's override with no replacement carrier.
 *
 * @param merged          - The consumer theme merged onto `defaultTheme` (`mergeThemes` output).
 * @param overriddenRoles - The catalog roles the consumer overrode, from `themeOverrideVars`.
@@ -989,29 +1029,26 @@ const GlobalChartsProvider = ({ children, theme }) => {
 	const [isColorPaletteResolved, setIsColorPaletteResolved] = (0, react.useState)(false);
 	(0, react.useLayoutEffect)(() => {
 		setIsColorPaletteResolved(false);
-		const { colors } = providerTheme;
 		const resolvedColors = [];
 		const hues = [];
 		const existingHslColors = [];
 		let minHue = 360;
 		let maxHue = 0;
-		if (Array.isArray(colors)) {
-			for (const color of colors) if (color && typeof color === "string") {
-				const normalizedColor = normalizeColorToHex(color, wrapperRef.current, resolveCssVariable);
-				if (normalizedColor.startsWith("#")) {
-					resolvedColors.push(normalizedColor);
-					const hslColor = (0, _visx_vendor_d3_color.hsl)(normalizedColor);
-					if (!isNaN(hslColor.h)) {
-						const hslTuple = [
-							hslColor.h,
-							hslColor.s * 100,
-							hslColor.l * 100
-						];
-						hues.push(hslTuple[0]);
-						existingHslColors.push(hslTuple);
-						minHue = Math.min(minHue, hslTuple[0]);
-						maxHue = Math.max(maxHue, hslTuple[0]);
-					}
+		for (const color of providerTheme.colors ?? SERIES_PALETTE_POINTERS) {
+			const normalizedColor = normalizeColorToHex(color, wrapperRef.current, resolveCssVariable);
+			if (normalizedColor.startsWith("#")) {
+				resolvedColors.push(normalizedColor);
+				const hslColor = (0, _visx_vendor_d3_color.hsl)(normalizedColor);
+				if (!isNaN(hslColor.h)) {
+					const hslTuple = [
+						hslColor.h,
+						hslColor.s * 100,
+						hslColor.l * 100
+					];
+					hues.push(hslTuple[0]);
+					existingHslColors.push(hslTuple);
+					minHue = Math.min(minHue, hslTuple[0]);
+					maxHue = Math.max(maxHue, hslTuple[0]);
 				}
 			}
 		}
@@ -1027,9 +1064,10 @@ const GlobalChartsProvider = ({ children, theme }) => {
 		if (colorCache.colors.length > 0) setIsColorPaletteResolved(true);
 	}, [colorCache]);
 	const [groupToColorMap, setGroupToColorMap] = (0, react.useState)(() => /* @__PURE__ */ new Map());
+	const paletteKey = colorCache.colors.join(",");
 	(0, react.useEffect)(() => {
 		setGroupToColorMap(/* @__PURE__ */ new Map());
-	}, [providerTheme.colors]);
+	}, [paletteKey]);
 	const registerChart = (0, react.useCallback)((id, data) => {
 		setCharts((prev) => new Map(prev).set(id, data));
 	}, []);
@@ -1242,27 +1280,13 @@ const useXYChartTheme = (data) => {
 	return (0, react.useMemo)(() => {
 		const resolve = createCssVariableResolver(scopeElement);
 		const resolveColor = (value) => value ? resolve(value) ?? value : value;
-		const seriesColors = JSON.parse(seriesColorKey);
+		const paletteColors = [...JSON.parse(seriesColorKey), ...theme.colors ?? []].map((color) => resolveColor(color)).filter((color) => Boolean(color) && !color.includes("var("));
+		const htmlLabelColor = resolveColor(theme.svgLabelSmall?.fill);
 		return (0, _visx_xychart.buildChartTheme)({
 			...theme,
-			colors: [...seriesColors, ...theme.colors ?? []],
+			colors: paletteColors,
 			backgroundColor: resolveColor(theme.backgroundColor),
-			gridStyles: theme.gridStyles && {
-				...theme.gridStyles,
-				stroke: resolveColor(theme.gridStyles.stroke)
-			},
-			xAxisLineStyles: theme.xAxisLineStyles && {
-				...theme.xAxisLineStyles,
-				stroke: resolveColor(theme.xAxisLineStyles.stroke)
-			},
-			xTickLineStyles: theme.xTickLineStyles && {
-				...theme.xTickLineStyles,
-				stroke: resolveColor(theme.xTickLineStyles.stroke)
-			},
-			svgLabelSmall: theme.svgLabelSmall && {
-				...theme.svgLabelSmall,
-				fill: resolveColor(theme.svgLabelSmall.fill)
-			}
+			htmlLabel: htmlLabelColor ? { color: htmlLabelColor } : void 0
 		});
 	}, [
 		theme,
@@ -1359,11 +1383,12 @@ const useChartMargin = (height, options, data, theme, horizontal = false) => {
 		if (options.axis?.y?.tickValues?.length) return options.axis.y.tickValues;
 		const minY = Math.min(...allDataPoints.map((d) => d.value));
 		const maxY = Math.max(...allDataPoints.map((d) => d.value));
-		return (0, _visx_scale.getTicks)((0, _visx_scale.createScale)({
+		const yScale = (0, _visx_scale.createScale)({
 			...options.yScale,
 			domain: [minY, maxY],
 			range: [height, 0]
-		}), options.axis?.y?.numTicks);
+		});
+		return (0, _visx_scale.getTicks)(yScale, options.axis?.y?.numTicks);
 	}, [
 		options,
 		data,
@@ -1488,7 +1513,7 @@ const MIN_PIXEL_SIZE = 3;
 /**
 * Pixel size for zero-value bars (1px less than near-zero to be visually distinguishable).
 */
-const ZERO_PIXEL_SIZE = MIN_PIXEL_SIZE - 1;
+const ZERO_PIXEL_SIZE = 2;
 const useZeroValueDisplay = (data, options = { enabled: false }) => {
 	const { enabled, valueAxisLength } = options;
 	return (0, react.useMemo)(() => {
@@ -2104,8 +2129,14 @@ const BaseTooltip = ({ data, top, left, component: Component = DefaultTooltipCon
 };
 //#endregion
 //#region src/components/tooltip/accessible-tooltip.tsx
-const AccessibleTooltip = ({ renderTooltip, selectedIndex, tooltipRef, keyboardFocusedClassName, series = [], mode = "group", ...props }) => {
+const AccessibleTooltip = ({ renderTooltip, selectedIndex, tooltipRef, keyboardFocusedClassName, series = [], mode = "group", verticalCrosshairStyle, horizontalCrosshairStyle, ...props }) => {
 	const tooltipContext = (0, react.useContext)(_visx_xychart.TooltipContext);
+	const scopeElement = useChartScopeElement();
+	const gridStroke = useGlobalChartsTheme().gridStyles?.stroke;
+	const crosshairStroke = (0, react.useMemo)(() => {
+		const stroke = gridStroke ? resolveCssVariable(gridStroke, scopeElement) : null;
+		return stroke ? { stroke } : void 0;
+	}, [gridStroke, scopeElement]);
 	const tooltipData = (0, react.useMemo)(() => {
 		if (mode !== "individual") return [];
 		if (series.length === 0) return [];
@@ -2184,10 +2215,18 @@ const AccessibleTooltip = ({ renderTooltip, selectedIndex, tooltipRef, keyboardF
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Tooltip, {
 		...props,
+		verticalCrosshairStyle: {
+			...crosshairStroke,
+			...verticalCrosshairStyle
+		},
+		horizontalCrosshairStyle: {
+			...crosshairStroke,
+			...horizontalCrosshairStyle
+		},
 		renderTooltip: focusableRenderTooltip
 	});
 };
-const useKeyboardNavigation = ({ selectedIndex, setSelectedIndex, isNavigating, setIsNavigating, chartRef, totalPoints }) => {
+const useKeyboardNavigation = ({ selectedIndex, setSelectedIndex, isNavigating, setIsNavigating, chartRef, totalPoints, onActivate }) => {
 	return {
 		tooltipRef: (0, react.useCallback)((element) => {
 			if (element && selectedIndex !== void 0) element.focus();
@@ -2228,13 +2267,14 @@ const useKeyboardNavigation = ({ selectedIndex, setSelectedIndex, isNavigating,
 				setSelectedIndex(void 0);
 				setIsNavigating(false);
 				chartRef.current?.focus();
-			}
+			} else if ((event.key === "Enter" || event.key === " ") && selectedIndex !== void 0) onActivate?.(selectedIndex);
 		}, [
 			totalPoints,
 			selectedIndex,
 			setSelectedIndex,
 			setIsNavigating,
-			chartRef
+			chartRef,
+			onActivate
 		])
 	};
 };
@@ -3001,7 +3041,7 @@ const LineChartAnnotationLabelWithPopover = ({ title, subtitle, renderLabel, ren
 			style: {
 				width: `44px`,
 				height: `44px`,
-				transform: `translate(${44 / 2}px, 0)`
+				transform: `translate(22px, 0)`
 			},
 			"aria-label": title || (0, _wordpress_i18n.__)("View details", "jetpack-charts"),
 			children: renderLabel({
@@ -3422,7 +3462,7 @@ const LineChartScalesRef = ({ chartRef, width, height, margin }) => {
 	]);
 	return null;
 };
-const LineChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartId, width, height, className, margin, withTooltips = true, withTooltipCrosshairs, showLegend = false, legend = {}, renderGlyph = defaultRenderGlyph, glyphStyle = {}, withLegendGlyph = false, withGradientFill = false, smoothing = true, curveType, renderTooltip = renderDefaultTooltip, withStartGlyphs = false, withEndGlyphs = false, animation, options = {}, onPointerDown = void 0, onPointerUp = void 0, onPointerMove = void 0, onPointerOut = void 0, zoomable = false, rescaleYOnVisibilityChange = true, defaultHiddenSeries, children, gridVisibility, gap = "md" }, ref) => {
+const LineChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartId, width, height, className, margin, withTooltips = true, withTooltipCrosshairs, showLegend = false, legend = {}, renderGlyph = defaultRenderGlyph, glyphStyle = {}, withLegendGlyph = false, withGradientFill = false, smoothing = true, curveType, renderTooltip = renderDefaultTooltip, withStartGlyphs = false, withEndGlyphs = false, animation, options = {}, onPointerDown = void 0, onPointerUp = void 0, onPointerMove = void 0, onPointerOut = void 0, onDatumActivate = void 0, zoomable = false, rescaleYOnVisibilityChange = true, defaultHiddenSeries, children, gridVisibility, gap = "md" }, ref) => {
 	const legendInteractive = legend.interactive ?? false;
 	const legendCollapseGroups = legend.collapseGroups ?? false;
 	const legendShape = legend.shape ?? "line";
@@ -3484,17 +3524,27 @@ const LineChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 		}
 		return min < max ? [min, max] : void 0;
 	}, [rescaleYOnVisibilityChange, dataSorted]);
+	const activateSelectedPoint = (0, react.useCallback)((index) => {
+		const series = dataSorted[0];
+		const datum = series?.data[index];
+		if (series && datum) onDatumActivate?.({
+			datum,
+			index,
+			key: series.label
+		});
+	}, [dataSorted, onDatumActivate]);
 	const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation({
 		selectedIndex,
 		setSelectedIndex,
 		isNavigating,
 		setIsNavigating,
 		chartRef,
-		totalPoints: dataSorted[0]?.data.length || 0
+		totalPoints: dataSorted[0]?.data.length || 0,
+		onActivate: activateSelectedPoint
 	});
 	const chartOptions = (0, react.useMemo)(() => {
-		const { tickResolution, ...xAxisOptions } = options?.axis?.x ?? {};
-		const formatter = xAxisOptions.tickFormat || getFormatter(dataSorted, tickResolution);
+		const { tickResolution, tickFormat, ...xAxisOptions } = options?.axis?.x ?? {};
+		const formatter = tickFormat || getFormatter(dataSorted, tickResolution);
 		return {
 			axis: {
 				x: {
@@ -3554,36 +3604,38 @@ const LineChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 	const defaultMargin = useChartMargin(height, chartOptions, dataSorted, theme);
 	const error = validateData$4(dataSorted);
 	const isDataValid = !error;
+	const legendItems = useChartLegendItems(dataSorted, (0, react.useMemo)(() => ({
+		withGlyph: withLegendGlyph,
+		glyphSize: Math.max(0, toNumber(glyphStyle?.radius) ?? 4),
+		collapseGroups: legendCollapseGroups,
+		renderGlyph
+	}), [
+		withLegendGlyph,
+		glyphStyle?.radius,
+		legendCollapseGroups,
+		renderGlyph
+	]), legendShape);
+	const chartMetadata = (0, react.useMemo)(() => ({
+		withGradientFill,
+		smoothing,
+		curveType,
+		withStartGlyphs,
+		withEndGlyphs,
+		withLegendGlyph
+	}), [
+		withGradientFill,
+		smoothing,
+		curveType,
+		withStartGlyphs,
+		withEndGlyphs,
+		withLegendGlyph
+	]);
 	useChartRegistration({
 		chartId,
-		legendItems: useChartLegendItems(dataSorted, (0, react.useMemo)(() => ({
-			withGlyph: withLegendGlyph,
-			glyphSize: Math.max(0, toNumber(glyphStyle?.radius) ?? 4),
-			collapseGroups: legendCollapseGroups,
-			renderGlyph
-		}), [
-			withLegendGlyph,
-			glyphStyle?.radius,
-			legendCollapseGroups,
-			renderGlyph
-		]), legendShape),
+		legendItems,
 		chartType: "line",
 		isDataValid,
-		metadata: (0, react.useMemo)(() => ({
-			withGradientFill,
-			smoothing,
-			curveType,
-			withStartGlyphs,
-			withEndGlyphs,
-			withLegendGlyph
-		}), [
-			withGradientFill,
-			smoothing,
-			curveType,
-			withStartGlyphs,
-			withEndGlyphs,
-			withLegendGlyph
-		])
+		metadata: chartMetadata
 	});
 	const prefersReducedMotion = usePrefersReducedMotion();
 	const accessors = {
@@ -3960,8 +4012,8 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 		rescaleYOnVisibility
 	]);
 	const chartOptions = (0, react.useMemo)(() => {
-		const { tickResolution, ...xAxisOptions } = options?.axis?.x ?? {};
-		const formatter = xAxisOptions.tickFormat || getFormatter(dataSorted, tickResolution);
+		const { tickResolution, tickFormat, ...xAxisOptions } = options?.axis?.x ?? {};
+		const formatter = tickFormat || getFormatter(dataSorted, tickResolution);
 		return {
 			axis: {
 				x: {
@@ -4003,26 +4055,28 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 	const defaultMargin = useChartMargin(height, chartOptions, dataSorted, theme);
 	const error = validateData$3(dataSorted);
 	const isDataValid = !error;
+	const legendItems = useChartLegendItems(dataSorted, (0, react.useMemo)(() => ({
+		withGlyph: false,
+		glyphSize: 0,
+		collapseGroups: legend.collapseGroups ?? false
+	}), [legend.collapseGroups]), legendShape);
+	const chartMetadata = (0, react.useMemo)(() => ({
+		stacked,
+		stackOffset,
+		smoothing,
+		curveType
+	}), [
+		stacked,
+		stackOffset,
+		smoothing,
+		curveType
+	]);
 	useChartRegistration({
 		chartId,
-		legendItems: useChartLegendItems(dataSorted, (0, react.useMemo)(() => ({
-			withGlyph: false,
-			glyphSize: 0,
-			collapseGroups: legend.collapseGroups ?? false
-		}), [legend.collapseGroups]), legendShape),
+		legendItems,
 		chartType: "area",
 		isDataValid,
-		metadata: (0, react.useMemo)(() => ({
-			stacked,
-			stackOffset,
-			smoothing,
-			curveType
-		}), [
-			stacked,
-			stackOffset,
-			smoothing,
-			curveType
-		])
+		metadata: chartMetadata
 	});
 	const prefersReducedMotion = usePrefersReducedMotion();
 	const animationEnabled = !!animation && !prefersReducedMotion;
@@ -4430,11 +4484,13 @@ const getGroupPadding = (scale) => {
 function useBarChartOptions(data, horizontal, options = {}, isSeriesRendered = ALL_RENDERED) {
 	const stableOptions = useDeepMemo(options);
 	const axisConfig = (0, react.useMemo)(() => {
-		const { labelOverflow: xLabelOverflow, tickResolution: xTickResolution, ...xAxisOptions } = stableOptions.axis?.x || {};
-		const { labelOverflow: yLabelOverflow, tickResolution: yTickResolution, ...yAxisOptions } = stableOptions.axis?.y || {};
+		const { labelOverflow: xLabelOverflow, tickResolution: xTickResolution, tickFormat: xTickFormat, ...xAxisOptions } = stableOptions.axis?.x || {};
+		const { labelOverflow: yLabelOverflow, tickResolution: yTickResolution, tickFormat: yTickFormat, ...yAxisOptions } = stableOptions.axis?.y || {};
 		return {
 			xLabelOverflow,
 			yLabelOverflow,
+			xTickFormat,
+			yTickFormat,
 			xAxisOptions,
 			yAxisOptions,
 			tickResolution: horizontal ? yTickResolution : xTickResolution
@@ -4494,7 +4550,7 @@ function useBarChartOptions(data, horizontal, options = {}, isSeriesRendered = A
 		isSeriesRendered
 	]);
 	return (0, react.useMemo)(() => {
-		const { xTickFormat, yTickFormat, tooltipLabelFormatter: defaultTooltipLabelFormatter, xAccessor, yAccessor, gridVisibility, xScale: baseXScale, yScale: baseYScale } = defaultOptions[horizontal ? "horizontal" : "vertical"];
+		const { xTickFormat: defaultXTickFormat, yTickFormat: defaultYTickFormat, tooltipLabelFormatter: defaultTooltipLabelFormatter, xAccessor, yAccessor, gridVisibility, xScale: baseXScale, yScale: baseYScale } = defaultOptions[horizontal ? "horizontal" : "vertical"];
 		let valueScaleDomainOverride = {};
 		if (data.some((s) => s.options?.type === "comparison")) {
 			if (!(!horizontal ? stableOptions.yScale?.domain : stableOptions.xScale?.domain)) {
@@ -4519,11 +4575,11 @@ function useBarChartOptions(data, horizontal, options = {}, isSeriesRendered = A
 			...stableOptions.yScale || {},
 			...!horizontal ? valueScaleDomainOverride : {}
 		};
-		const { xLabelOverflow, yLabelOverflow, xAxisOptions, yAxisOptions } = axisConfig;
-		const providedToolTipLabelFormatter = horizontal ? yAxisOptions.tickFormat : xAxisOptions.tickFormat;
+		const { xLabelOverflow, yLabelOverflow, xTickFormat, yTickFormat, xAxisOptions, yAxisOptions } = axisConfig;
+		const dateAxisTickFormat = horizontal ? yTickFormat : xTickFormat;
 		const { timeAxis } = defaultOptions;
 		const dateAxisOptions = horizontal ? yAxisOptions : xAxisOptions;
-		const bandTickValues = timeAxis && !dateAxisOptions.tickFormat ? getBandTickValues(timeAxis.domain, timeAxis.tickFormatter, dateAxisOptions.numTicks ?? DEFAULT_NUM_TICKS) : null;
+		const bandTickValues = timeAxis && !dateAxisTickFormat ? getBandTickValues(timeAxis.domain, timeAxis.tickFormatter, dateAxisOptions.numTicks ?? DEFAULT_NUM_TICKS) : null;
 		const dateAxisTickValues = bandTickValues ? { tickValues: bandTickValues } : {};
 		return {
 			gridVisibility,
@@ -4537,7 +4593,7 @@ function useBarChartOptions(data, horizontal, options = {}, isSeriesRendered = A
 				x: {
 					orientation: "bottom",
 					numTicks: DEFAULT_NUM_TICKS,
-					tickFormat: xTickFormat,
+					tickFormat: xTickFormat || defaultXTickFormat,
 					...horizontal ? {} : dateAxisTickValues,
 					...xLabelOverflow === "ellipsis" ? { tickComponent: TruncatedXTickComponent } : {},
 					...xAxisOptions
@@ -4545,14 +4601,14 @@ function useBarChartOptions(data, horizontal, options = {}, isSeriesRendered = A
 				y: {
 					orientation: "left",
 					numTicks: DEFAULT_NUM_TICKS,
-					tickFormat: yTickFormat,
+					tickFormat: yTickFormat || defaultYTickFormat,
 					...horizontal ? dateAxisTickValues : {},
 					...yLabelOverflow === "ellipsis" ? { tickComponent: TruncatedYTickComponent } : {},
 					...yAxisOptions
 				}
 			},
 			barGroup: { padding: getGroupPadding(horizontal ? yScale : xScale) },
-			tooltip: { labelFormatter: providedToolTipLabelFormatter || defaultTooltipLabelFormatter }
+			tooltip: { labelFormatter: dateAxisTickFormat || defaultTooltipLabelFormatter }
 		};
 	}, [
 		defaultOptions,
@@ -4615,11 +4671,6 @@ function computeComparisonRect(params) {
 	};
 }
 /**
-* Fraction of each per-series step left as a gap between bars within a single tick.
-* Larger = more space between adjacent series; the shadow spans `1 - COMPARISON_INNER_GAP` of the step.
-*/
-const COMPARISON_INNER_GAP = .1;
-/**
 * Upper clamp on the computed group padding, so bars can never collapse to zero width
 * even at very large `widthFactor` values.
 */
@@ -4707,7 +4758,7 @@ const renderTooltipRow = (label, value) => /* @__PURE__ */ (0, react_jsx_runtime
 	className: bar_chart_module_default["bar-chart__tooltip-row"],
 	children: (0, _wordpress_i18n.sprintf)((0, _wordpress_i18n.__)("%1$s: %2$s", "jetpack-charts"), label, value)
 });
-const BarChartInternal = ({ data, chartId: providedChartId, width, height, className, margin, withTooltips = false, showLegend = false, legend = {}, gridVisibility: gridVisibilityProp, renderTooltip, options = {}, orientation = "vertical", withPatterns = false, showZeroValues = false, defaultHiddenSeries, animation, children, gap = "md" }) => {
+const BarChartInternal = ({ data, chartId: providedChartId, width, height, className, margin, withTooltips = false, showLegend = false, legend = {}, gridVisibility: gridVisibilityProp, renderTooltip, options = {}, orientation = "vertical", withPatterns = false, showZeroValues = false, defaultHiddenSeries, animation, children, gap = "md", onPointerDown, onPointerUp, onDatumActivate }) => {
 	const legendInteractive = legend.interactive ?? false;
 	const legendCollapseGroups = legend.collapseGroups ?? false;
 	const horizontal = orientation === "horizontal";
@@ -4734,14 +4785,7 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 	const [selectedIndex, setSelectedIndex] = (0, react.useState)(void 0);
 	const [isNavigating, setIsNavigating] = (0, react.useState)(false);
 	const primarySeriesForNav = dataWithVisibleZeros.filter((s) => s.options?.type !== "comparison");
-	const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation({
-		selectedIndex,
-		setSelectedIndex,
-		isNavigating,
-		setIsNavigating,
-		chartRef,
-		totalPoints: Math.max(0, ...primarySeriesForNav.map((s) => s.data?.length || 0)) * primarySeriesForNav.length
-	});
+	const totalPoints = Math.max(0, ...primarySeriesForNav.map((s) => s.data?.length || 0)) * primarySeriesForNav.length;
 	const seriesWithVisibility = (0, react.useMemo)(() => dataWithVisibleZeros.map((series, index) => ({
 		series,
 		index,
@@ -4753,6 +4797,27 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 	const primaryEntries = (0, react.useMemo)(() => seriesWithVisibility.filter(({ isVisible, series }) => isVisible && series.options?.type !== "comparison"), [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 { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation({
+		selectedIndex,
+		setSelectedIndex,
+		isNavigating,
+		setIsNavigating,
+		chartRef,
+		totalPoints,
+		onActivate: activateSelectedBar
+	});
 	const comparisonEntries = (0, react.useMemo)(() => {
 		const primaryByGroup = new Map(primaryEntries.map(({ series, index }) => [series.group, {
 			label: series.label,
@@ -4789,7 +4854,7 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 	const groupPadding = (0, react.useMemo)(() => {
 		const basePadding = chartOptions.barGroup.padding;
 		if (!comparisonWidthFactor || comparisonWidthFactor <= 1) return basePadding;
-		const p = 1 - (1 - COMPARISON_INNER_GAP) / comparisonWidthFactor;
+		const p = 1 - .9 / comparisonWidthFactor;
 		return Math.min(Math.max(p, basePadding), MAX_GROUP_PADDING);
 	}, [chartOptions.barGroup.padding, comparisonWidthFactor]);
 	const { xScale, yScale } = (0, react.useMemo)(() => {
@@ -4927,15 +4992,17 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 		chartId
 	]);
 	const error = validateData$2(dataSorted);
+	const isDataValid = !error;
+	const chartMetadata = (0, react.useMemo)(() => ({
+		orientation,
+		withPatterns
+	}), [orientation, withPatterns]);
 	useChartRegistration({
 		chartId,
 		legendItems,
 		chartType: "bar",
-		isDataValid: !error,
-		metadata: (0, react.useMemo)(() => ({
-			orientation,
-			withPatterns
-		}), [orientation, withPatterns])
+		isDataValid,
+		metadata: chartMetadata
 	});
 	const prefersReducedMotion = usePrefersReducedMotion();
 	if (error) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -5000,6 +5067,8 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 							xScale,
 							yScale,
 							horizontal,
+							onPointerDown,
+							onPointerUp,
 							pointerEventsDataKey: "nearest",
 							children: [
 								!allSeriesHidden && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Grid, {
@@ -5155,6 +5224,25 @@ const BarListChartInternal = ({ data, width, height, options = {}, margin = {
 	bottom: 0,
 	top: 0
 }, ...rest }) => {
+	const { getElementStyles } = useGlobalChartsContext();
+	const tintedData = (0, react.useMemo)(() => {
+		if (data.length > 1) return data;
+		return data.map((series, index) => {
+			if (series.options?.stroke) return series;
+			const { color } = getElementStyles({
+				data: series,
+				index
+			});
+			if (!isValidHexColor(color)) return series;
+			return {
+				...series,
+				options: {
+					...series.options,
+					stroke: lightenHexColor(color, .6)
+				}
+			};
+		});
+	}, [data, getElementStyles]);
 	const chartOptions = (0, react.useMemo)(() => {
 		const isMultiSeries = data.length > 1;
 		const defaultYScale = {
@@ -5187,7 +5275,7 @@ const BarListChartInternal = ({ data, width, height, options = {}, margin = {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BarChart, {
 		orientation: "horizontal",
 		gridVisibility: "none",
-		data,
+		data: tintedData,
 		width,
 		height,
 		margin,
@@ -5448,20 +5536,21 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 		})]
 	});
 	const isDataValid = Boolean(steps && steps.length > 0);
+	const chartMetadata = (0, react.useMemo)(() => ({
+		mainRate,
+		changeIndicator,
+		stepsCount: steps?.length || 0
+	}), [
+		mainRate,
+		changeIndicator,
+		steps?.length
+	]);
 	useChartRegistration({
 		chartId,
 		legendItems: [],
 		chartType: "conversion-funnel",
 		isDataValid,
-		metadata: (0, react.useMemo)(() => ({
-			mainRate,
-			changeIndicator,
-			stepsCount: steps?.length || 0
-		}), [
-			mainRate,
-			changeIndicator,
-			steps?.length
-		])
+		metadata: chartMetadata
 	});
 	const prefersReducedMotion = usePrefersReducedMotion();
 	if (!isDataValid) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_wordpress_ui.Stack, {
@@ -6065,7 +6154,7 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 	});
 	const chartBackgroundHex = normalizeColorToHex(theme.backgroundColor, scopeElement, resolveCssVariable);
 	const primaryHex = normalizeColorToHex(primaryColorHex);
-	const cellHasLightText = (intensity) => isValidHexColor(primaryHex) && isValidHexColor(chartBackgroundHex) && prefersLightText(mixHexColors(primaryHex, chartBackgroundHex, 1 - (CELL_MIX_FLOOR + (1 - CELL_MIX_FLOOR) * intensity)));
+	const cellHasLightText = (intensity) => isValidHexColor(primaryHex) && isValidHexColor(chartBackgroundHex) && prefersLightText(mixHexColors(primaryHex, chartBackgroundHex, 1 - (CELL_MIX_FLOOR + .85 * intensity)));
 	const extent = (0, react.useMemo)(() => getValueExtent(data), [data]);
 	const heatmapContext = (0, react.useMemo)(() => ({
 		extent,
@@ -6684,7 +6773,7 @@ var require_dist = /* @__PURE__ */ __commonJSMin(((exports) => {
 	tslib_1.__exportStar(require_dist$1(), exports);
 }));
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/hooks/use-update-effect.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/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)(() => {
@@ -6716,10 +6805,11 @@ var StyleSheet = /*#__PURE__*/ function() {
 		var _this = this;
 		this._insertTag = function(tag) {
 			var before;
-			if (_this.tags.length === 0) if (_this.insertionPoint) before = _this.insertionPoint.nextSibling;
-			else if (_this.prepend) before = _this.container.firstChild;
-			else before = _this.before;
-			else before = _this.tags[_this.tags.length - 1].nextSibling;
+			if (_this.tags.length === 0) {
+				if (_this.insertionPoint) before = _this.insertionPoint.nextSibling;
+				else if (_this.prepend) before = _this.container.firstChild;
+				else before = _this.before;
+			} else before = _this.tags[_this.tags.length - 1].nextSibling;
 			_this.container.insertBefore(tag, before);
 			_this.tags.push(tag);
 		};
@@ -7038,9 +7128,7 @@ function delimiter(type) {
 		case 40:
 			if (type === 41) delimiter(type);
 			break;
-		case 92:
-			next();
-			break;
+		case 92: next();
 	}
 	return position;
 }
@@ -8063,14 +8151,12 @@ function handleInterpolation(mergedProps, registered, interpolation) {
 				return serializedStyles.styles + ";";
 			}
 			return createStringFromObject(mergedProps, registered, interpolation);
-		case "function":
-			if (mergedProps !== void 0) {
-				var previousCursor = cursor;
-				var result = interpolation(mergedProps);
-				cursor = previousCursor;
-				return handleInterpolation(mergedProps, registered, result);
-			}
-			break;
+		case "function": if (mergedProps !== void 0) {
+			var previousCursor = cursor;
+			var result = interpolation(mergedProps);
+			cursor = previousCursor;
+			return handleInterpolation(mergedProps, registered, result);
+		}
 	}
 	var asString = interpolation;
 	if (registered == null) return asString;
@@ -8325,7 +8411,7 @@ _createEmotion.css;
 _createEmotion.sheet;
 _createEmotion.cache;
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/hooks/use-cx.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/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();
@@ -8432,7 +8518,7 @@ function memize(fn, options) {
 	return memoized;
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/colors-values.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/node_modules/@wordpress/components/build-module/utils/colors-values.mjs
 var white = "#fff";
 var GRAY = {
 	900: "#1e1e1e",
@@ -8511,7 +8597,7 @@ var COLORS = Object.freeze({
 	ui: UI
 });
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/config-values.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/node_modules/@wordpress/components/build-module/utils/config-values.mjs
 var CONTROL_HEIGHT = "36px";
 var CONTROL_PROPS = {
 	controlPaddingX: 12,
@@ -8616,10 +8702,10 @@ var require_es6 = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	};
 }));
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+warning@3.52.0/node_modules/@wordpress/warning/build-module/utils.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+warning@3.53.0/node_modules/@wordpress/warning/build-module/utils.mjs
 var logged = /* @__PURE__ */ new Set();
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+warning@3.52.0/node_modules/@wordpress/warning/build-module/index.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+warning@3.53.0/node_modules/@wordpress/warning/build-module/index.mjs
 function isDev() {
 	return globalThis.SCRIPT_DEBUG === true;
 }
@@ -8633,7 +8719,7 @@ function warning(message) {
 	logged.add(message);
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/context/context-system-provider.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/node_modules/@wordpress/components/build-module/context/context-system-provider.mjs
 var import_es6 = /* @__PURE__ */ __toESM(require_es6(), 1);
 var ComponentsContext = (0, react.createContext)(
 	/** @type {Record<string, any>} */
@@ -8660,19 +8746,19 @@ var BaseContextSystemProvider = ({ children, value }) => {
 };
 (0, react.memo)(BaseContextSystemProvider);
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/context/constants.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/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@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/context/get-styled-class-name-from-key.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/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@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/context/context-connect.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/node_modules/@wordpress/components/build-module/context/context-connect.mjs
 function contextConnect(Component, namespace) {
 	return _contextConnect(Component, namespace, { forwardsRef: true });
 }
@@ -8689,7 +8775,7 @@ function _contextConnect(Component, namespace, options) {
 	});
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/context/utils.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/node_modules/@wordpress/components/build-module/context/utils.mjs
 function getNamespace(componentName) {
 	return { [COMPONENT_NAMESPACE]: componentName };
 }
@@ -8697,7 +8783,7 @@ function getConnectedNamespace() {
 	return { [CONNECTED_NAMESPACE]: true };
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/context/use-context-system.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/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");
@@ -8717,7 +8803,7 @@ function useContextSystem(props, namespace) {
 	return finalComponentProps;
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/visually-hidden/styles.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/node_modules/@wordpress/components/build-module/visually-hidden/styles.mjs
 var visuallyHidden = {
 	border: 0,
 	clip: "rect(1px, 1px, 1px, 1px)",
@@ -8733,7 +8819,7 @@ var visuallyHidden = {
 	wordBreak: "normal"
 };
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/polymorphic-element.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/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
@@ -8815,14 +8901,15 @@ function filterIntrinsicElementProps(props, element) {
 }
 function UnforwardedPolymorphicElement({ as, ...props }, ref) {
 	const Element = as || "div";
+	const forwardedProps = typeof Element === "string" ? filterIntrinsicElementProps(props, Element) : props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Element, {
 		ref,
-		...typeof Element === "string" ? filterIntrinsicElementProps(props, Element) : props
+		...forwardedProps
 	});
 }
 var PolymorphicElement = (0, react.forwardRef)(UnforwardedPolymorphicElement);
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/view/component.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/node_modules/@wordpress/components/build-module/view/component.mjs
 function UnforwardedView({ css, ...restProps }, ref) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PolymorphicElement, {
 		ref,
@@ -8831,7 +8918,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@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/visually-hidden/component.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/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, {
@@ -8846,7 +8933,7 @@ function UnconnectedVisuallyHidden(props, forwardedRef) {
 }
 var component_default$1 = contextConnect(UnconnectedVisuallyHidden, "VisuallyHidden");
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/use-responsive-value.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/node_modules/@wordpress/components/build-module/utils/use-responsive-value.mjs
 var breakpoints = [
 	"40em",
 	"52em",
@@ -8880,7 +8967,7 @@ function useResponsiveValue(values, options = {}) {
 	return array[index >= array.length ? array.length - 1 : index];
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/grid/utils.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/node_modules/@wordpress/components/build-module/grid/utils.mjs
 var ALIGNMENTS = {
 	bottom: {
 		alignItems: "flex-end",
@@ -8928,7 +9015,7 @@ function getAlignmentProps(alignment) {
 	return alignment ? ALIGNMENTS[alignment] : {};
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/grid/hook.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/node_modules/@wordpress/components/build-module/grid/hook.mjs
 function useGrid(props) {
 	const { align, alignment, className, columnGap, columns = 2, gap = 3, isInline = false, justify, rowGap, rows, templateColumns, templateRows, ...otherProps } = useContextSystem(props, "Grid");
 	const column = useResponsiveValue(Array.isArray(columns) ? columns : [columns]);
@@ -8970,10 +9057,11 @@ function useGrid(props) {
 	};
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/grid/component.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/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, {
-		...useGrid(props),
+		...gridProps,
 		ref: forwardedRef
 	});
 }
@@ -9285,15 +9373,17 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 		withComparison,
 		withOverlayLabel
 	]);
+	const isDataValid = Boolean(data && data.length > 0);
+	const chartMetadata = (0, react.useMemo)(() => ({
+		withComparison,
+		withOverlayLabel
+	}), [withComparison, withOverlayLabel]);
 	useChartRegistration({
 		chartId,
 		legendItems,
 		chartType: "leaderboard",
-		isDataValid: Boolean(data && data.length > 0),
-		metadata: (0, react.useMemo)(() => ({
-			withComparison,
-			withOverlayLabel
-		}), [withComparison, withOverlayLabel])
+		isDataValid,
+		metadata: chartMetadata
 	});
 	const prefersReducedMotion = usePrefersReducedMotion();
 	const { contentRef, fittedCount, isMeasurable } = useFittedRowCount(fitRows && !allSeriesHidden, data?.length ?? 0, data);
@@ -9548,8 +9638,9 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
 		hideTooltip();
 	}, [withTooltips, hideTooltip]);
 	const { getElementStyles, isSeriesVisible } = useGlobalChartsContext();
+	const dataWithPercentages = useDataWithPercentages(data);
 	const { visibleData, allSegmentsHidden, legendData } = useLegendVisibilityData({
-		data: useDataWithPercentages(data),
+		data: dataWithPercentages,
 		chartId,
 		isSeriesVisible
 	});
@@ -9559,20 +9650,21 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
 	}), [legendValueDisplay]));
 	const { isValid, message } = validateData$1(data);
 	const { svgChildren, htmlChildren, legendChildren, otherChildren } = useChartChildren(children, "PieChart");
+	const chartMetadata = (0, react.useMemo)(() => ({
+		thickness,
+		gapScale,
+		cornerScale
+	}), [
+		thickness,
+		gapScale,
+		cornerScale
+	]);
 	useChartRegistration({
 		chartId,
 		legendItems,
 		chartType: "pie",
 		isDataValid: isValid,
-		metadata: (0, react.useMemo)(() => ({
-			thickness,
-			gapScale,
-			cornerScale
-		}), [
-			thickness,
-			gapScale,
-			cornerScale
-		])
+		metadata: chartMetadata
 	});
 	const prefersReducedMotion = usePrefersReducedMotion();
 	if (!isValid) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -9701,14 +9793,12 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
 										}
 										const svgLabelSmall = providerTheme.svgLabelSmall;
 										const fontSize = resolveFontSize(svgLabelSmall?.fontSize) ?? 12;
-										const estimatedTextWidth = (0, _visx_text.getStringWidth)(arc.data.label, {
+										const backgroundWidth = (0, _visx_text.getStringWidth)(arc.data.label, {
 											fontSize,
 											fontFamily: svgLabelSmall?.fontFamily,
 											fontWeight: svgLabelSmall?.fontWeight
-										});
-										const labelPadding = 6;
-										const backgroundWidth = estimatedTextWidth + labelPadding * 2;
-										const backgroundHeight = fontSize + labelPadding * 2;
+										}) + 12;
+										const backgroundHeight = fontSize + 12;
 										return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
 											...groupProps,
 											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { ...pathProps }), showLabels && hasSpaceForLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", { children: [providerTheme.labelBackgroundColor && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
@@ -9840,8 +9930,9 @@ const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width: pro
 	}, [handleMouseMove]);
 	const { isValid, message } = validateData(data);
 	const { getElementStyles, isSeriesVisible } = useGlobalChartsContext();
+	const dataWithPercentages = useDataWithPercentages(data);
 	const { visibleData, allSegmentsHidden, legendData } = useLegendVisibilityData({
-		data: useDataWithPercentages(data),
+		data: dataWithPercentages,
 		chartId,
 		isSeriesVisible
 	});
@@ -9858,15 +9949,16 @@ const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width: pro
 		legendValueDisplay
 	}), [legendValueDisplay]));
 	const { svgChildren, htmlChildren, legendChildren, otherChildren } = useChartChildren(children, "PieSemiCircleChart");
+	const chartMetadata = (0, react.useMemo)(() => ({
+		thickness,
+		clockwise
+	}), [thickness, clockwise]);
 	useChartRegistration({
 		chartId,
 		legendItems,
 		chartType: "pie-semi-circle",
 		isDataValid: isValid,
-		metadata: (0, react.useMemo)(() => ({
-			thickness,
-			clockwise
-		}), [thickness, clockwise])
+		metadata: chartMetadata
 	});
 	const prefersReducedMotion = usePrefersReducedMotion();
 	const effectiveWidth = propWidth || DEFAULT_WIDTH$1;
@@ -10057,6 +10149,7 @@ const transformToSeriesData = (data, color, strokeWidth) => {
 };
 const SparklineComponent = (0, react.forwardRef)(({ data, width = DEFAULT_WIDTH, height = DEFAULT_HEIGHT, color, strokeWidth: strokeWidthProp, withGradientFill = true, gradient, className, chartId, margin: marginProp, animation }, ref) => {
 	const theme = useGlobalChartsTheme();
+	const chartsContext = (0, react.useContext)(GlobalChartsContext);
 	const themeStrokeWidth = theme.sparkline?.strokeWidth ?? 1.5;
 	const strokeWidth = strokeWidthProp ?? themeStrokeWidth;
 	const seriesData = (0, react.useMemo)(() => {
@@ -10110,7 +10203,7 @@ const SparklineComponent = (0, react.forwardRef)(({ data, width = DEFAULT_WIDTH,
 	if (data.length === 1) {
 		const cx = width / 2;
 		const cy = height / 2;
-		const resolvedColor = color || "#000000";
+		const resolvedColor = color || chartsContext?.getElementStyles({ index: 0 }).color || "#000000";
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			ref,
 			className: (0, clsx.default)("sparkline", sparkline_module_default.sparkline, sparkline_module_default["sparkline--single-point"], className),
@@ -10213,8 +10306,9 @@ const Icon = ({ direction }) => {
 */
 function TrendIndicator({ direction, value, className, style, showIcon = true }) {
 	const ariaLabel = `${DIRECTION_LABELS[direction]}: ${value}`;
+	const standaloneScopeClass = useStandaloneScopeClass();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-		className: (0, clsx.default)(useStandaloneScopeClass(), trend_indicator_module_default["trend-indicator"], trend_indicator_module_default[`trend-indicator--${direction}`], className),
+		className: (0, clsx.default)(standaloneScopeClass, trend_indicator_module_default["trend-indicator"], trend_indicator_module_default[`trend-indicator--${direction}`], className),
 		style,
 		"aria-label": ariaLabel,
 		children: [showIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { direction }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {