@automattic/charts 4.6.0 → 4.8.0

package/dist/index.js

@@ -5,17 +5,18 @@ import { __, _x, sprintf } from "@wordpress/i18n";
 import clsx from "clsx";
 import * as React from "react";
 import { Children, Fragment, createContext, createContext as createContext$1, createElement, forwardRef, forwardRef as forwardRef$1, isValidElement, memo, useCallback, useCallback as useCallback$1, useContext, useContext as useContext$1, useEffect, useEffect as useEffect$1, useId, useImperativeHandle, useLayoutEffect, useMemo, useMemo as useMemo$1, useRef, useRef as useRef$1, useState, useState as useState$1 } from "react";
-import { color, hsl } from "@visx/vendor/d3-color";
 import { differenceInHours, differenceInYears, isValid, parse, parseISO } from "date-fns";
 import { tzOffset } from "@date-fns/tz";
 import { Text, getStringWidth } from "@visx/text";
 import deepmerge from "deepmerge";
+import { color, hsl } from "@visx/vendor/d3-color";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { Tooltip, defaultStyles, useTooltip } from "@visx/tooltip";
+import { useTooltip } from "@visx/tooltip";
 import { createScale, getTicks, scaleBand, scaleCanBeZeroed, scaleOrdinal, scaleTime } from "@visx/scale";
 import { Group } from "@visx/group";
 import { LegendItem, LegendLabel, LegendOrdinal, LegendShape } from "@visx/legend";
 import { IconButton, Stack, Text as Text$1 } from "@wordpress/ui";
+import { ThemeProvider } from "@wordpress/theme";
 import { createPortal } from "react-dom";
 import { LinearGradient } from "@visx/gradient";
 import { curveCatmullRom, curveLinear, curveMonotoneX } from "@visx/curve";
@@ -560,7 +561,8 @@ const relativeLuminance = (hex) => {
 * Whether light text reads better than dark text on the given background, using the W3C
 * luminance threshold (0.179) that maximizes contrast against black vs white.
 *
-* @param backgroundHex - Hex background color
+* @deprecated Assumes black and white text, so it ignores label role overrides and cannot guarantee AA; charts no longer use it, and it will be removed in a future major version.
+* @param      backgroundHex - Hex background color
 * @return true if light text should be used; false (dark text) for malformed colors
 */
 const prefersLightText = (backgroundHex) => {
@@ -832,6 +834,7 @@ const CATALOG_POINTERS = {
 	annotation: "var(--a8c-charts-color-annotation, #1e1e1e)",
 	surface: "var(--a8c-charts-color-surface, #fff)",
 	surfaceSecondary: "var(--a8c-charts-color-surface-secondary, #f4f4f4)",
+	track: "var(--a8c-charts-color-track, #f0f0f0)",
 	trendUp: "var(--a8c-charts-color-trend-up, #008030)",
 	trendDown: "var(--a8c-charts-color-trend-down, #cc1818)",
 	series: SERIES_PALETTE_POINTERS
@@ -879,14 +882,27 @@ const PROTANOPIA = [
 const DEGREES = Math.PI / 180;
 const toLinear = (channel) => channel <= .04045 ? channel / 12.92 : Math.pow((channel + .055) / 1.055, 2.4);
 const fromLinear = (channel) => channel <= .0031308 ? 12.92 * channel : 1.055 * Math.pow(channel, 1 / 2.4) - .055;
-const hexToLinear = (hex) => {
+/**
+* The sRGB channels of a hex color.
+*
+* @param  hex - A six-digit hex color.
+* @return Channels from 0 to 255.
+* @throws {Error} if the hex string is malformed
+*/
+const hexToRgb = (hex) => {
 	validateHexColor(hex);
-	return [
+	const [r, g, b] = [
 		1,
 		3,
 		5
-	].map((start) => toLinear(parseInt(hex.slice(start, start + 2), 16) / 255));
+	].map((start) => parseInt(hex.slice(start, start + 2), 16));
+	return [
+		r,
+		g,
+		b
+	];
 };
+const hexToLinear = (hex) => hexToRgb(hex).map((channel) => toLinear(channel / 255));
 const linearToHex = (linear) => "#" + linear.map((channel) => Math.round(Math.min(1, Math.max(0, fromLinear(channel))) * 255).toString(16).padStart(2, "0")).join("");
 const simulate = (matrix, [r, g, b]) => [
 	0,
@@ -1012,6 +1028,35 @@ const hexToOklch = (hex) => {
 	};
 };
 /**
+* `foreground` over `background` at `weight`, left unrounded as CSS `color-mix` and alpha compositing leave it.
+*
+* A mix rounded to hex can land on the other side of a contrast threshold from the fill the browser paints.
+*
+* @param foreground - The color weighted by `weight`.
+* @param background - The color it is mixed over.
+* @param weight     - Share of `foreground`, from 0 to 1.
+* @return The mixed channels.
+*/
+const blendRgb = (foreground, background, weight) => {
+	const share = Math.min(1, Math.max(0, weight));
+	const [r, g, b] = foreground.map((channel, i) => background[i] + (channel - background[i]) * share);
+	return [
+		r,
+		g,
+		b
+	];
+};
+/**
+* WCAG relative luminance of unrounded sRGB channels.
+*
+* @param rgb - Channels from 0 to 255.
+* @return Relative luminance from 0 to 1.
+*/
+const rgbLuminance = (rgb) => {
+	const [r, g, b] = rgb.map((channel) => toLinear(channel / 255));
+	return .2126 * r + .7152 * g + .0722 * b;
+};
+/**
 * WCAG contrast ratio between two relative luminances.
 *
 * @param first  - First relative luminance.
@@ -1218,6 +1263,14 @@ const buildPaletteGenerator = (normalizedSeeds, background, labelColors) => {
 	};
 };
 //#endregion
+//#region src/providers/chart-context/private/resolve-opaque-hex.ts
+const resolveOpaqueHex = (pointer, resolve) => {
+	const raw = resolve(pointer);
+	if (!raw || color(raw)?.opacity !== 1) return null;
+	const hex = normalizeColorToHex(raw);
+	return isValidHexColor(hex) ? hex : null;
+};
+//#endregion
 //#region src/providers/chart-context/themes.ts
 /**
 * Default theme configuration: the shape and spacing a consumer can override.
@@ -1266,12 +1319,6 @@ const defaultTheme = {
 };
 //#endregion
 //#region src/providers/chart-context/global-charts-provider.tsx
-const resolveOpaqueHex = (pointer, element) => {
-	const raw = resolveCssVariable(pointer, element);
-	if (!raw || color(raw)?.opacity !== 1) return null;
-	const hex = normalizeColorToHex(pointer, element, resolveCssVariable);
-	return isValidHexColor(hex) ? hex : null;
-};
 const PLACEHOLDER_LABEL_COLORS = [LABEL_FALLBACK, LABEL_INVERSE_FALLBACK];
 const GlobalChartsContext = createContext(null);
 const GlobalChartsProvider = ({ children, theme, locale, timeZone }) => {
@@ -1299,8 +1346,9 @@ const GlobalChartsProvider = ({ children, theme, locale, timeZone }) => {
 			const normalizedColor = normalizeColorToHex(color, wrapperRef.current, resolveCssVariable);
 			if (isValidHexColor(normalizedColor)) resolvedColors.push(normalizedColor);
 		}
-		const backgroundHex = resolveOpaqueHex(CATALOG_POINTERS.background, wrapperRef.current) ?? "#ffffff";
-		const labelColors = [CATALOG_POINTERS.label, CATALOG_POINTERS.labelInverse].map((pointer) => resolveOpaqueHex(pointer, wrapperRef.current)).filter((hex) => hex !== null);
+		const resolveAtWrapper = createCssVariableResolver(wrapperRef.current);
+		const backgroundHex = resolveOpaqueHex(CATALOG_POINTERS.background, resolveAtWrapper) ?? "#ffffff";
+		const labelColors = [CATALOG_POINTERS.label, CATALOG_POINTERS.labelInverse].map((pointer) => resolveOpaqueHex(pointer, resolveAtWrapper)).filter((hex) => hex !== null);
 		setColorCache({
 			colors: resolvedColors,
 			background: backgroundHex,
@@ -1532,15 +1580,13 @@ const useXYChartTheme = (data) => {
 		const resolve = createCssVariableResolver(scopeElement);
 		const resolveColor = (value) => value ? resolve(value) ?? value : value;
 		const paletteColors = [...JSON.parse(seriesColorKey), ...CATALOG_POINTERS.series].map((color) => resolveColor(color)).filter((color) => Boolean(color) && !color.includes("var("));
-		const resolvedLabelColor = resolveColor(CATALOG_POINTERS.labelAxis);
-		const htmlLabelColor = resolvedLabelColor ? normalizeColorToHex(resolvedLabelColor) || resolvedLabelColor : resolvedLabelColor;
 		return buildChartTheme({
 			...theme,
 			gridColor: "",
 			gridColorDark: "",
 			colors: paletteColors,
 			backgroundColor: resolveColor(CATALOG_POINTERS.background),
-			htmlLabel: htmlLabelColor ? { color: htmlLabelColor } : void 0,
+			htmlLabel: { color: CATALOG_POINTERS.labelAxis },
 			gridStyles: {
 				...theme.gridStyles,
 				stroke: CATALOG_POINTERS.grid
@@ -1638,10 +1684,10 @@ const DEFAULT_MARGIN_BOTTOM = 20;
 */
 const DEFAULT_MARGIN_LEFT = 20;
 /**
-* Bottom margin to use when the X-axis is rendered at the top.
+* Bottom margin when no X-axis sits below the chart, because it is on top or hidden.
 * We only need a small buffer below the chart in that case.
 */
-const DEFAULT_BOTTOM_FOR_TOP_AXIS = 10;
+const DEFAULT_BOTTOM_WITHOUT_X_AXIS = 10;
 /**
 * Fallback font size used when we cannot derive a font size
 * from the theme or axis styles for X-axis tick labels.
@@ -1721,18 +1767,18 @@ const useChartMargin = (height, options, data, theme, horizontal = false) => {
 			if (yAxisOrientation === "right") defaultMargin.right = yMarginValue;
 			else defaultMargin.left = yMarginValue;
 		}
-		const xOrientation = options.axis?.x?.orientation === "top" ? "top" : "bottom";
-		const { fontSize, tickLength, tickLabelStyle } = getXAxisLabelMetrics(theme, xOrientation);
-		const computedXMargin = fontSize + tickLength;
-		if (xOrientation === "top") {
-			defaultMargin.top = Math.max(defaultMargin.top, computedXMargin);
-			defaultMargin.bottom = DEFAULT_BOTTOM_FOR_TOP_AXIS;
-		} else defaultMargin.bottom = Math.max(defaultMargin.bottom, computedXMargin);
 		if (options.axis?.x?.display !== false) {
+			const xOrientation = options.axis?.x?.orientation === "top" ? "top" : "bottom";
+			const { fontSize, tickLength, tickLabelStyle } = getXAxisLabelMetrics(theme, xOrientation);
+			const computedXMargin = fontSize + tickLength;
+			if (xOrientation === "top") {
+				defaultMargin.top = Math.max(defaultMargin.top, computedXMargin);
+				defaultMargin.bottom = DEFAULT_BOTTOM_WITHOUT_X_AXIS;
+			} else defaultMargin.bottom = Math.max(defaultMargin.bottom, computedXMargin);
 			const { first, last } = getEdgeTickWidths(options.axis?.x?.tickValues ?? [], options.axis?.x?.tickFormat, tickLabelStyle);
 			defaultMargin.left = Math.max(defaultMargin.left, Math.ceil(first / 2));
 			defaultMargin.right = Math.max(defaultMargin.right, Math.ceil(last / 2));
-		}
+		} else defaultMargin.bottom = DEFAULT_BOTTOM_WITHOUT_X_AXIS;
 		return defaultMargin;
 	}, [
 		options,
@@ -1975,6 +2021,9 @@ function usePrefersReducedMotion() {
 	return prefersReducedMotion;
 }
 //#endregion
+//#region src/hooks/use-isomorphic-layout-effect.ts
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+//#endregion
 //#region src/providers/chart-context/hooks/use-chart-registration.ts
 const useChartRegistration = ({ chartId, legendItems, chartType, isDataValid, metadata }) => {
 	const { registerChart, unregisterChart } = useGlobalChartsContext();
@@ -2441,33 +2490,92 @@ function useChartLegendItems(data, options = {}, legendShape) {
 	]);
 }
 //#endregion
-//#region src/components/tooltip/base-tooltip.module.scss
-var base_tooltip_module_default = {
-	"surface": "a8ccharts--zY0xG-surface",
-	"tooltip": "a8ccharts--zY0xG-tooltip"
+//#region src/components/tooltip/private/label-value-content.tsx
+const LabelValueContent = ({ data }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+	data.label,
+	": ",
+	data.valueDisplay || formatNumber(data.value)
+] });
+//#endregion
+//#region src/components/tooltip/private/tooltip-theme.tsx
+const DEFAULT_SURFACE = "#1e1e1e";
+const TOOLTIP_SURFACE = `var(--a8c-charts-color-tooltip-surface, ${DEFAULT_SURFACE})`;
+const toSeed = (value) => {
+	const parsed = value ? color(value) : null;
+	return parsed && parsed.opacity === 1 ? parsed.formatHex() : DEFAULT_SURFACE;
+};
+/**
+* Themes the tooltip box for its dark surface, as `@wordpress/ui`'s Tooltip themes its popup. The box re-declares the catalog under this theme, so every role it reads is tuned for the surface, whatever theme the chart is in.
+*
+* @param props          - Component props.
+* @param props.children - The tooltip box.
+* @return The themed box.
+*/
+const TooltipTheme = ({ children }) => {
+	const scopeElement = useChartScopeElement();
+	const color = useMemo(() => ({ background: toSeed(resolveCssVariable(TOOLTIP_SURFACE, scopeElement)) }), [scopeElement]);
+	if (!ThemeProvider) return /* @__PURE__ */ jsx(Fragment$1, { children });
+	return /* @__PURE__ */ jsx(ThemeProvider, {
+		color,
+		children
+	});
 };
 //#endregion
+//#region src/components/tooltip/tooltip-box.module.scss
+var tooltip_box_module_default = { "surface": "a8ccharts-ddpU1W-surface" };
+//#endregion
+//#region src/components/tooltip/tooltip-box.tsx
+/**
+* The chart tooltip box: the dark surface every chart tooltip draws. It does not position itself; place it with `style` or a wrapper.
+*
+* @param props          - Div attributes, plus `unstyled`.
+* @param props.unstyled - Drop the surface, scope class and theme.
+* @param ref            - Forwarded to the box element.
+* @return The tooltip box.
+*/
+const TooltipBox = forwardRef(({ unstyled = false, role = "tooltip", className, children, ...rest }, ref) => {
+	const box = /* @__PURE__ */ jsx("div", {
+		ref,
+		role,
+		className: clsx("visx-tooltip", !unstyled && ["a8c-charts-tooltip-scope", tooltip_box_module_default.surface], className),
+		...rest,
+		children
+	});
+	return unstyled ? box : /* @__PURE__ */ jsx(TooltipTheme, { children: box });
+});
+TooltipBox.displayName = "TooltipBox";
+//#endregion
 //#region src/components/tooltip/base-tooltip.tsx
-const DefaultTooltipContent = ({ data }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
-	data?.label,
-	": ",
-	data?.valueDisplay || formatNumber(data?.value)
-] });
-const BaseTooltip = ({ data, top, left, component: Component = DefaultTooltipContent, children, className, style, renderContainer = true }) => {
+/**
+* A tooltip box with children or `label: value` content. Prefer `TooltipBox`.
+*
+* @param props                 - Tooltip props.
+* @param props.data            - Data for the default content.
+* @param props.top             - Deprecated vertical position.
+* @param props.left            - Deprecated horizontal position.
+* @param props.component       - Deprecated content component.
+* @param props.children        - Tooltip content.
+* @param props.className       - Class name passed to the content component.
+* @param props.style           - Styles for the box.
+* @param props.renderContainer - Deprecated; render the content alone when false.
+* @return The tooltip.
+*/
+const BaseTooltip = ({ data, top, left, component: Component = LabelValueContent, children, className, style, renderContainer = true }) => {
 	const content = children || data && /* @__PURE__ */ jsx(Component, {
 		data,
 		className
 	});
-	const standaloneScopeClass = useStandaloneScopeClass();
 	if (!renderContainer) return content;
-	return /* @__PURE__ */ jsx("div", {
-		className: clsx(standaloneScopeClass, base_tooltip_module_default.tooltip),
+	return /* @__PURE__ */ jsx(TooltipBox, {
 		style: {
-			top,
-			left,
+			...top === void 0 && left === void 0 ? void 0 : {
+				position: "absolute",
+				top,
+				left,
+				transform: "translate(-50%, -100%)"
+			},
 			...style
 		},
-		role: "tooltip",
 		children: content
 	});
 };
@@ -2484,6 +2592,11 @@ const isClipping = (element) => {
 		overflowY
 	].some((value) => value && value !== "visible");
 };
+const findLayoutParent = (node) => {
+	let element = node.parentElement;
+	while (element && getComputedStyle(element).display === "contents") element = element.parentElement;
+	return element;
+};
 const findClippingAncestor = (wrapper) => {
 	let element = wrapper.parentElement;
 	while (element && element !== document.body) {
@@ -2544,7 +2657,7 @@ const getBoundedPosition = ({ left, top, offsetLeft, offsetTop, box, wrapper, bo
 	};
 };
 /**
-* visx's `Tooltip`, positioned like its `TooltipWithBounds` but kept inside the
+* A `TooltipBox`, positioned like visx's `TooltipWithBounds` but kept inside the
 * nearest clipping ancestor — or the viewport when there is none — rather than
 * inside its own parent. Rendered in-tree, a tooltip's parent is the chart
 * wrapper, which is often narrower than the box; measuring against the parent
@@ -2553,24 +2666,25 @@ const getBoundedPosition = ({ left, top, offsetLeft, offsetTop, box, wrapper, bo
 * Re-measures on every render, so a box whose content changes width between
 * two hovers is placed for its current size.
 *
-* @param props            - visx `Tooltip` props.
+* @param props            - `TooltipBox` props plus placement.
 * @param props.left       - Anchor x, in wrapper coordinates.
 * @param props.top        - Anchor y, in wrapper coordinates.
 * @param props.offsetLeft - Gap between the anchor and the box, horizontally.
 * @param props.offsetTop  - Gap between the anchor and the box, vertically.
-* @param props.style      - Box styles; visx's defaults unless `unstyled`.
-* @param props.unstyled   - Skip `style` and leave the box bare.
+* @param props.style      - Inline overrides on the surface; ignored when `unstyled`.
+* @param props.unstyled   - Drop the surface and `style`, leaving the box bare.
+* @param props.className  - Extra classes beside the surface.
 * @param props.children   - Box content.
 * @param props.placement  - Below-axis, beside without vertical flipping, or automatic flipping.
 * @return The tooltip box.
 */
-const BoundedTooltip = ({ left = 0, top = 0, offsetLeft = DEFAULT_OFFSET, offsetTop = DEFAULT_OFFSET, style = defaultStyles, unstyled = false, children, placement = "auto", ...rest }) => {
+const BoundedTooltip = ({ left = 0, top = 0, offsetLeft = DEFAULT_OFFSET, offsetTop = DEFAULT_OFFSET, style, unstyled = false, className, children, placement = "auto", ...rest }) => {
 	const nodeRef = useRef(null);
 	const clipRef = useRef(null);
 	const [position, setPosition] = useState(null);
 	useLayoutEffect(() => {
 		const node = nodeRef.current;
-		const wrapper = node?.parentElement;
+		const wrapper = node && findLayoutParent(node);
 		if (!node || !wrapper) return;
 		if (clipRef.current?.wrapper !== wrapper) clipRef.current = {
 			wrapper,
@@ -2618,8 +2732,11 @@ const BoundedTooltip = ({ left = 0, top = 0, offsetLeft = DEFAULT_OFFSET, offset
 	]);
 	const x = position?.x ?? left + offsetLeft;
 	const y = position?.y ?? top + (placement === "below-axis" ? POINTER_HEIGHT : offsetTop);
-	return /* @__PURE__ */ jsxs(Tooltip, {
+	return /* @__PURE__ */ jsxs(TooltipBox, {
 		ref: nodeRef,
+		role: "presentation",
+		unstyled,
+		className,
 		style: {
 			position: "absolute",
 			left: 0,
@@ -2635,16 +2752,16 @@ const BoundedTooltip = ({ left = 0, top = 0, offsetLeft = DEFAULT_OFFSET, offset
 				left: left - x - POINTER_HEIGHT,
 				top: -6,
 				width: 12,
-				height: POINTER_HEIGHT,
+				height: 7,
 				background: "inherit",
-				clipPath: "polygon(50% 0, 100% 100%, 0 100%)",
+				clipPath: `polygon(50% 0, 100% ${POINTER_HEIGHT}px, 100% 100%, 0 100%, 0 ${POINTER_HEIGHT}px)`,
 				pointerEvents: "none"
 			}
 		}), children]
 	});
 };
 //#endregion
-//#region src/components/tooltip/xy-chart-tooltip.tsx
+//#region src/components/tooltip/private/xy-chart-tooltip-overlay.tsx
 const CROSSHAIR_STROKE_WIDTH = 1.5;
 const CROSSHAIR_PAINT_PROPERTIES = /* @__PURE__ */ new Set([
 	"stroke",
@@ -2746,15 +2863,36 @@ const XyChartTooltipContent = ({ tooltipContext, container, renderTooltip, rende
 	const crosshairStroke = theme?.gridStyles?.stroke ?? theme?.htmlLabel?.color ?? FALLBACK_COLOR;
 	const marginTop = margin?.top ?? 0;
 	const marginLeft = margin?.left ?? 0;
-	const TooltipComponent = detectBounds || tooltipPlacement !== "auto" ? BoundedTooltip : Tooltip;
 	const boxStyle = {
-		...defaultStyles,
 		zIndex,
-		backgroundColor: theme?.backgroundColor ?? "white",
-		boxShadow: `0 1px 2px ${isValidHexColor(theme?.htmlLabel?.color) ? `${theme.htmlLabel.color}55` : "#22222255"}`,
-		...theme?.htmlLabel,
 		...style
 	};
+	const { offsetLeft = 10, offsetTop = 10, unstyled, className, ...boxProps } = tooltipProps;
+	const anchorTop = tooltipPlacement === "below-axis" ? marginTop + innerHeight + (margin?.bottom ?? 0) : tooltipAnchorTop ?? tooltipTop;
+	const box = detectBounds || tooltipPlacement !== "auto" ? /* @__PURE__ */ jsx(BoundedTooltip, {
+		left: tooltipLeft,
+		top: anchorTop,
+		offsetLeft,
+		offsetTop,
+		unstyled,
+		className,
+		style: boxStyle,
+		...boxProps,
+		...tooltipPlacement !== "auto" && { placement: tooltipPlacement },
+		children: tooltipContent
+	}) : /* @__PURE__ */ jsx(TooltipBox, {
+		role: "presentation",
+		unstyled,
+		className,
+		style: {
+			position: "absolute",
+			left: (tooltipLeft ?? 0) + offsetLeft,
+			top: (anchorTop ?? 0) + offsetTop,
+			...!unstyled && boxStyle
+		},
+		...boxProps,
+		children: tooltipContent
+	});
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("g", {
 		className: "visx-tooltip-overlay",
 		pointerEvents: "none",
@@ -2781,15 +2919,7 @@ const XyChartTooltipContent = ({ tooltipContext, container, renderTooltip, rende
 			}),
 			glyphs
 		]
-	}), container && createPortal(/* @__PURE__ */ jsx(TooltipComponent, {
-		left: tooltipLeft,
-		top: tooltipPlacement === "below-axis" ? marginTop + innerHeight + (margin?.bottom ?? 0) : tooltipAnchorTop ?? tooltipTop,
-		style: boxStyle,
-		applyPositionStyle: true,
-		...tooltipProps,
-		...tooltipPlacement !== "auto" && { placement: tooltipPlacement },
-		children: tooltipContent
-	}), container)] });
+	}), container && createPortal(box, container)] });
 };
 /**
 * In-tree replacement for `@visx/xychart`'s `Tooltip`.
@@ -2814,7 +2944,7 @@ const XyChartTooltipContent = ({ tooltipContext, container, renderTooltip, rende
 * @param props - visx's `Tooltip` options. `scroll`, `debounce` and `resizeObserverPolyfill` are accepted and ignored.
 * @return An anchor in the SVG, plus the overlay and the tooltip box while the tooltip is open.
 */
-const XyChartTooltip = (props) => {
+const XyChartTooltipOverlay = (props) => {
 	const tooltipContext = useContext(TooltipContext);
 	const [container, setContainer] = useState(null);
 	const anchorRef = useCallback((node) => {
@@ -2827,8 +2957,8 @@ const XyChartTooltip = (props) => {
 	})] });
 };
 //#endregion
-//#region src/components/tooltip/accessible-tooltip.tsx
-const AccessibleTooltip = ({ renderTooltip, selectedIndex, tooltipRef, keyboardFocusedClassName, series = [], mode = "group", verticalCrosshairStyle, horizontalCrosshairStyle, ...props }) => {
+//#region src/components/tooltip/xy-chart-tooltip.tsx
+const XYChartTooltip = ({ renderTooltip, selectedIndex, tooltipRef, keyboardFocusedClassName, series = [], mode = "group", verticalCrosshairStyle, horizontalCrosshairStyle, ...props }) => {
 	const tooltipContext = useContext(TooltipContext);
 	const scopeElement = useChartScopeElement();
 	const crosshairStroke = useMemo(() => {
@@ -2934,7 +3064,7 @@ const AccessibleTooltip = ({ renderTooltip, selectedIndex, tooltipRef, keyboardF
 		keyboardFocusedClassName,
 		standaloneScopeClass
 	]);
-	return /* @__PURE__ */ jsx(XyChartTooltip, {
+	return /* @__PURE__ */ jsx(XyChartTooltipOverlay, {
 		...props,
 		verticalCrosshairStyle: {
 			...crosshairStroke,
@@ -2947,6 +3077,8 @@ const AccessibleTooltip = ({ renderTooltip, selectedIndex, tooltipRef, keyboardF
 		renderTooltip: focusableRenderTooltip
 	});
 };
+/** @deprecated Use `XYChartTooltip`. */
+const AccessibleTooltip = XYChartTooltip;
 const useKeyboardNavigation = ({ selectedIndex, setSelectedIndex, isNavigating, setIsNavigating, chartRef, totalPoints, onActivate, preventTooltipScroll = false, visibleSeriesKey }) => {
 	const getChartRoot = useCallback(() => chartRef.current?.closest("[role=\"grid\"]") ?? chartRef.current, [chartRef]);
 	const focusWithoutScrollIfNeeded = useCallback((element) => {
@@ -3056,7 +3188,6 @@ const useKeyboardNavigation = ({ selectedIndex, setSelectedIndex, isNavigating,
 };
 //#endregion
 //#region src/providers/chart-context/hooks/use-default-hidden-series.ts
-const useIsomorphicLayoutEffect$1 = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 /**
 * Seeds a chart's hidden series once per chart ID, the first time the provider
 * sees that ID.
@@ -3077,7 +3208,7 @@ const useDefaultHiddenSeries = (chartId, seriesLabels) => {
 	labelsRef.current = seriesLabels;
 	const hasSeriesLabels = seriesLabels !== void 0;
 	const shouldUseDefaults = hasSeriesLabels && !hasSeededChart(chartId);
-	useIsomorphicLayoutEffect$1(() => {
+	useIsomorphicLayoutEffect(() => {
 		if (labelsRef.current === void 0) return;
 		seedChartHiddenSeries(chartId, labelsRef.current);
 	}, [
@@ -3702,7 +3833,6 @@ var with_responsive_module_default = {
 };
 //#endregion
 //#region src/charts/private/with-responsive/with-responsive.tsx
-const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 /**
 * A higher-order component that provides responsive dimensions
 * to the wrapped chart component using useParentSize from `@visx/responsive`.
@@ -3986,10 +4116,8 @@ var line_chart_module_default = {
 	"line-chart__annotation-label-popover-content": "a8ccharts-inuQka-line-chart__annotation-label-popover-content",
 	"line-chart__annotation-label-trigger-button": "a8ccharts-inuQka-line-chart__annotation-label-trigger-button",
 	"line-chart__annotations-overlay": "a8ccharts-inuQka-line-chart__annotations-overlay",
-	"line-chart__tooltip": "a8ccharts-inuQka-line-chart__tooltip",
 	"line-chart__tooltip-date": "a8ccharts-inuQka-line-chart__tooltip-date",
 	"line-chart__tooltip-label": "a8ccharts-inuQka-line-chart__tooltip-label",
-	"line-chart__tooltip-row": "a8ccharts-inuQka-line-chart__tooltip-row",
 	"line-chart--animated": "a8ccharts-inuQka-line-chart--animated",
 	"rise": "a8ccharts-inuQka-rise"
 };
@@ -4516,11 +4644,10 @@ const TooltipDate = ({ date, displayResolution }) => {
 * one row per visible series (label + formatted value), sorted descending by
 * value. Reused by AreaChart, which has the same multi-series shape.
 *
-* @param params       - visx tooltip data and the chart's optional `bucketInfo`.
-* @param contentStyle - Explicit tooltip content color overrides.
+* @param params - visx tooltip data and the chart's optional `bucketInfo`.
 * @return Tooltip JSX, or `null` when no datum is hovered.
 */
-const renderDefaultTooltip = (params, contentStyle) => {
+const renderDefaultTooltip = (params) => {
 	const { tooltipData, bucketInfo } = params;
 	const nearestDatum = tooltipData?.nearestDatum?.datum;
 	if (!nearestDatum) return null;
@@ -4533,29 +4660,24 @@ const renderDefaultTooltip = (params, contentStyle) => {
 		if (b.value === null) return -1;
 		return b.value - a.value;
 	});
-	return /* @__PURE__ */ jsxs("div", {
-		className: line_chart_module_default["line-chart__tooltip"],
-		style: contentStyle,
-		children: [/* @__PURE__ */ jsx("div", {
-			className: line_chart_module_default["line-chart__tooltip-date"],
-			children: /* @__PURE__ */ jsx(TooltipDate, {
-				date: nearestDatum.date,
-				displayResolution: bucketInfo?.displayResolution ?? "day"
-			})
-		}), tooltipPoints.map((point) => /* @__PURE__ */ jsxs(Stack, {
-			direction: "row",
-			align: "center",
-			justify: "space-between",
-			className: line_chart_module_default["line-chart__tooltip-row"],
-			children: [/* @__PURE__ */ jsxs("span", {
-				className: line_chart_module_default["line-chart__tooltip-label"],
-				children: [point.key, ":"]
-			}), /* @__PURE__ */ jsx("span", {
-				className: line_chart_module_default["line-chart__tooltip-value"],
-				children: formatReading(point.value)
-			})]
-		}, point.key))]
-	});
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+		className: line_chart_module_default["line-chart__tooltip-date"],
+		children: /* @__PURE__ */ jsx(TooltipDate, {
+			date: nearestDatum.date,
+			displayResolution: bucketInfo?.displayResolution ?? "day"
+		})
+	}), tooltipPoints.map((point) => /* @__PURE__ */ jsxs(Stack, {
+		direction: "row",
+		align: "center",
+		justify: "space-between",
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: line_chart_module_default["line-chart__tooltip-label"],
+			children: [point.key, ":"]
+		}), /* @__PURE__ */ jsx("span", {
+			className: line_chart_module_default["line-chart__tooltip-value"],
+			children: formatReading(point.value)
+		})]
+	}, point.key))] });
 };
 const validateData$4 = (data) => {
 	if (!data?.length) return __("No data available", "jetpack-charts");
@@ -4815,29 +4937,10 @@ const LineChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 		xAccessor: (d) => d?.date,
 		yAccessor: (d) => d?.value
 	};
-	const resolvedTooltipStyle = useMemo(() => {
-		if (renderTooltip !== renderDefaultTooltip || !tooltipStyle) return tooltipStyle;
-		if (!tooltipStyle.color || tooltipStyle.background || tooltipStyle.backgroundColor) return tooltipStyle;
-		return {
-			backgroundColor: "var(--a8c-charts-color-tooltip-surface, rgb(0 0 0 / 85%))",
-			...tooltipStyle
-		};
-	}, [renderTooltip, tooltipStyle]);
-	const tooltipRenderer = useMemo(() => (params) => renderTooltip === renderDefaultTooltip ? renderDefaultTooltip({
-		...params,
-		bucketInfo
-	}, {
-		color: tooltipStyle?.color,
-		background: tooltipStyle?.background,
-		backgroundColor: tooltipStyle?.backgroundColor
-	}) : renderTooltip({
+	const tooltipRenderer = useMemo(() => (params) => renderTooltip({
 		...params,
 		bucketInfo
-	}), [
-		renderTooltip,
-		bucketInfo,
-		tooltipStyle
-	]);
+	}), [renderTooltip, bucketInfo]);
 	if (error) return /* @__PURE__ */ jsx("div", {
 		className: clsx("line-chart", line_chart_module_default["line-chart"]),
 		children: error
@@ -4981,11 +5084,11 @@ const LineChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 										] }, seriesData?.label || index);
 									})
 								}),
-								withTooltips && /* @__PURE__ */ jsx(AccessibleTooltip, {
+								withTooltips && /* @__PURE__ */ jsx(XYChartTooltip, {
 									detectBounds: true,
 									snapTooltipToDatumX: true,
 									tooltipPlacement,
-									style: resolvedTooltipStyle,
+									style: tooltipStyle,
 									snapTooltipToDatumY: true,
 									showSeriesGlyphs: true,
 									renderTooltip: tooltipRenderer,
@@ -5457,7 +5560,7 @@ const AreaChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 										children: seriesWithVisibility.map(renderSeries)
 									}), !allSeriesHidden && !stacked && seriesWithVisibility.map(renderSeries)]
 								}),
-								withTooltips && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(AccessibleTooltip, {
+								withTooltips && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(XYChartTooltip, {
 									detectBounds: true,
 									snapTooltipToDatumX: true,
 									snapTooltipToDatumY: !stacked,
@@ -6068,6 +6171,7 @@ const ComparisonBars = ({ comparisonEntries, primaryKeys, groupPadding, horizont
 				widthFactor
 			});
 			rects.push(/* @__PURE__ */ jsx("rect", {
+				className: "bar-chart__comparison-bar",
 				x: rect.x,
 				y: rect.y,
 				width: rect.width,
@@ -6483,7 +6587,7 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 		const patternId = getPatternId(chartId, index);
 		return `
 			.visx-bar[fill="url(#${patternId})"],
-			.bar-chart__comparison-bars rect[fill="url(#${patternId})"] {
+			.bar-chart__comparison-bar[fill="url(#${patternId})"] {
 				stroke: ${color};
 				stroke-width: 1;
 				}
@@ -6665,15 +6769,15 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 								}),
 								!allSeriesHidden && /* @__PURE__ */ jsx(WholeNumberTicks, {
 									...wholeNumberTicksProps,
-									children: (valueTicks) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Axis, {
+									children: (valueTicks) => /* @__PURE__ */ jsxs(Fragment$1, { children: [chartOptions.axis.x.display !== false && /* @__PURE__ */ jsx(Axis, {
 										...chartOptions.axis.x,
 										...horizontal && valueTicks ? { tickValues: valueTicks } : {}
-									}), /* @__PURE__ */ jsx(Axis, {
+									}), chartOptions.axis.y.display !== false && /* @__PURE__ */ jsx(Axis, {
 										...chartOptions.axis.y,
 										...!horizontal && valueTicks ? { tickValues: valueTicks } : {}
 									})] })
 								}),
-								withTooltips && /* @__PURE__ */ jsx(AccessibleTooltip, {
+								withTooltips && /* @__PURE__ */ jsx(XYChartTooltip, {
 									tooltipPlacement,
 									tooltipAnchorTop,
 									style: tooltipStyle,
@@ -6893,8 +6997,7 @@ var conversion_funnel_chart_module_default = {
 	"step-rate": "a8ccharts-mGEVca-step-rate",
 	"stretch": "a8ccharts-mGEVca-stretch",
 	"tooltip-content": "a8ccharts-mGEVca-tooltip-content",
-	"tooltip-title": "a8ccharts-mGEVca-tooltip-title",
-	"tooltip-wrapper": "a8ccharts-mGEVca-tooltip-wrapper"
+	"tooltip-title": "a8ccharts-mGEVca-tooltip-title"
 };
 //#endregion
 //#region src/charts/conversion-funnel-chart/private/use-funnel-selection.ts
@@ -6955,9 +7058,10 @@ const useFunnelSelection = (hideTooltip) => {
 * @param props.renderStepRate   - Custom render function for step rates
 * @param props.renderMainMetric - Custom render function for the entire main metric section
 * @param props.renderTooltip    - Custom render function for tooltip content
+* @param props.tooltipStyle     - Inline styles merged over the tooltip box defaults
 * @return JSX element representing the conversion funnel chart
 */
-const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loading = false, animation, className, chartId: providedChartId, height, style, renderStepLabel, renderStepRate, renderMainMetric, renderTooltip }) => {
+const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loading = false, animation, className, chartId: providedChartId, height, style, renderStepLabel, renderStepRate, renderMainMetric, renderTooltip, tooltipStyle }) => {
 	const chartId = useChartId(providedChartId);
 	const { getElementStyles, isColorPaletteResolved } = useGlobalChartsContext();
 	const chartRef = useRef(null);
@@ -7192,15 +7296,18 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 				step: tooltipData,
 				index: steps.findIndex((s) => s.id === tooltipData.id),
 				top: tooltipTop,
-				left: tooltipLeft,
-				className: conversion_funnel_chart_module_default["tooltip-wrapper"]
+				left: tooltipLeft
 			}) : renderDefaultTooltip(tooltipData);
 			if (!tooltipContent) return null;
 			return /* @__PURE__ */ jsx(BoundedTooltip, {
 				top: tooltipTop,
 				left: tooltipLeft,
-				className: clsx(standaloneScopeClass, conversion_funnel_chart_module_default["tooltip-wrapper"]),
-				children: tooltipContent
+				className: standaloneScopeClass,
+				style: tooltipStyle,
+				children: /* @__PURE__ */ jsx("div", {
+					role: "tooltip",
+					children: tooltipContent
+				})
 			});
 		})()]
 	});
@@ -7485,6 +7592,73 @@ let GoogleDataTableColumnRoleType = /* @__PURE__ */ function(GoogleDataTableColu
 	GoogleDataTableColumnRoleType["domain"] = "domain";
 	return GoogleDataTableColumnRoleType;
 }({});
+const resolveRole = (pointer, resolve) => {
+	const raw = resolve(pointer);
+	const parsed = raw ? color(raw) : null;
+	if (!parsed) return {
+		kind: "unreadable",
+		raw
+	};
+	const { r, g, b } = parsed.opacity > 0 ? parsed.rgb() : {
+		r: 0,
+		g: 0,
+		b: 0
+	};
+	return {
+		kind: "color",
+		rgb: [
+			r,
+			g,
+			b
+		],
+		alpha: parsed.opacity
+	};
+};
+/**
+* Reads both label roles at the element the label text inherits from, so JS and CSS agree on what paints.
+*
+* @param resolve - A CSS variable resolver bound to that element.
+* @return The resolved label roles.
+*/
+const resolveLabelRoles = (resolve) => ({
+	label: resolveRole(CATALOG_POINTERS.label, resolve),
+	labelInverse: resolveRole(CATALOG_POINTERS.labelInverse, resolve)
+});
+const roleContrast = (role, fill, fillLuminance) => {
+	if (role.kind === "unreadable") return 0;
+	return luminanceContrastRatio(fillLuminance, rgbLuminance(blendRgb(role.rgb, fill, role.alpha)));
+};
+/**
+* Picks the label color for text drawn on a fill: the role that contrasts more, or black/white when neither reaches AA.
+*
+* Both roles set to one color is a host's choice to keep that color, so it never falls back.
+*
+* @param fill        - The fill the text sits on, as unrounded sRGB channels.
+* @param roles       - The label roles resolved at the chart's element, or null before they are read.
+* @param defaultRole - The role the chart's stylesheet paints when nothing can be decided.
+* @return The color the label should paint with.
+*/
+const pickLabelTextColorForFill = (fill, roles, defaultRole) => {
+	if (!roles || (0, import_fast_deep_equal.default)(roles.label, roles.labelInverse)) return defaultRole;
+	const fillLuminance = rgbLuminance(fill);
+	const labelContrast = roleContrast(roles.label, fill, fillLuminance);
+	const inverseContrast = roleContrast(roles.labelInverse, fill, fillLuminance);
+	if (Math.max(labelContrast, inverseContrast) >= 4.55) return labelContrast > inverseContrast ? "label" : "label-inverse";
+	return luminanceContrastRatio(fillLuminance, 0) > luminanceContrastRatio(fillLuminance, 1) ? "black" : "white";
+};
+/**
+* `pickLabelTextColorForFill` for a fill given as a color.
+*
+* @param fill        - The fill, in any color syntax `normalizeColorToHex` reads.
+* @param roles       - The label roles resolved at the chart's element, or null before they are read.
+* @param defaultRole - The role the chart's stylesheet paints when nothing can be decided.
+* @return The color the label should paint with.
+*/
+const pickLabelTextColor = (fill, roles, defaultRole) => {
+	const fillHex = normalizeColorToHex(fill);
+	if (!isValidHexColor(fillHex)) return defaultRole;
+	return pickLabelTextColorForFill(hexToRgb(fillHex), roles, defaultRole);
+};
 //#endregion
 //#region src/charts/heatmap-chart/heatmap-chart.module.scss
 var heatmap_chart_module_default = {
@@ -7494,9 +7668,11 @@ var heatmap_chart_module_default = {
 	"heatmap-chart__cell--hidden": "a8ccharts-O3YMOW-heatmap-chart__cell--hidden",
 	"heatmap-chart__cell--placeholder": "a8ccharts-O3YMOW-heatmap-chart__cell--placeholder",
 	"heatmap-chart__cell--selected": "a8ccharts-O3YMOW-heatmap-chart__cell--selected",
-	"heatmap-chart__cell--strong": "a8ccharts-O3YMOW-heatmap-chart__cell--strong",
 	"heatmap-chart__cell--summary": "a8ccharts-O3YMOW-heatmap-chart__cell--summary",
 	"heatmap-chart__cell-value": "a8ccharts-O3YMOW-heatmap-chart__cell-value",
+	"heatmap-chart__cell-value--black": "a8ccharts-O3YMOW-heatmap-chart__cell-value--black",
+	"heatmap-chart__cell-value--inverse": "a8ccharts-O3YMOW-heatmap-chart__cell-value--inverse",
+	"heatmap-chart__cell-value--white": "a8ccharts-O3YMOW-heatmap-chart__cell-value--white",
 	"heatmap-chart__col-label": "a8ccharts-O3YMOW-heatmap-chart__col-label",
 	"heatmap-chart__col-label--summary": "a8ccharts-O3YMOW-heatmap-chart__col-label--summary",
 	"heatmap-chart__empty": "a8ccharts-O3YMOW-heatmap-chart__empty",
@@ -7518,30 +7694,44 @@ var heatmap_chart_module_default = {
 //#region src/charts/heatmap-chart/private/use-heatmap-colors.ts
 const isPresent = (value) => value !== null && value !== void 0 && !isNaN(value);
 /**
-* Get the min and max values from heatmap data, ignoring null/NaN. Summary
-* columns stay out: a roll-up on the scale would flatten every real cell.
+* Get the min and max values from heatmap data, ignoring null/NaN and the zeros
+* `isEmptyValue` paints as empty. Summary columns stay out: a roll-up on the
+* scale would flatten every real cell.
 * @param data - The heatmap columns
 * @return Tuple of [min, max] values
 */
 const getValueExtent = (data) => {
 	let min = Infinity;
 	let max = -Infinity;
+	let hasZero = false;
 	for (const column of data) {
 		if (column.summary) continue;
 		for (const cell of column.data) {
 			if (!isPresent(cell.value)) continue;
+			if (cell.value === 0) {
+				hasZero = true;
+				continue;
+			}
 			if (cell.value < min) min = cell.value;
 			if (cell.value > max) max = cell.value;
 		}
 	}
+	if (hasZero && min < 0) max = Math.max(max, 0);
 	if (min === Infinity) return [0, 0];
 	return [min, max];
 };
 /**
+* Whether a value paints as an empty cell: a zero in data with no negatives
+* counts nothing, so it must not look like the lowest step of activity.
+*
+* @param value  - The cell value
+* @param extent - The extent from `getValueExtent`
+* @return True when the cell takes the empty-cell color
+*/
+const isEmptyValue = (value, extent) => value === 0 && extent[0] >= 0;
+/**
 * Normalize a value to 0–1 within the extent. A flat extent (min === max)
-* maps to 1 — every cell is equally the "highest" — except an all-zero
-* extent, which maps to 0 so a no-activity grid renders at the scale's
-* bottom instead of full intensity.
+* maps to 1, since every cell is equally the "highest".
 *
 * @param value  - The value to normalize
 * @param extent - Tuple of [min, max] values for the normalization range
@@ -7549,9 +7739,40 @@ const getValueExtent = (data) => {
 */
 const getNormalizedValue = (value, extent) => {
 	const [min, max] = extent;
-	if (min === max) return max === 0 ? 0 : 1;
+	if (min === max) return 1;
 	return Math.min(1, Math.max(0, (value - min) / (max - min)));
 };
+const STEPS = 200;
+const firstMeeting = (from, to, meets) => {
+	for (let step = 0; step <= STEPS; step++) {
+		const color = mixHexColors(from, to, step / STEPS);
+		if (meets(color)) return color;
+	}
+	return null;
+};
+/**
+* The two ends of the heatmap fill scale: 3:1 against the background and the empty cell at the
+* low end, toward 9:1 against the background at the high end.
+*
+* @param primary    - The resolved primary color, as six-digit hex.
+* @param background - The resolved chart background, as six-digit hex.
+* @param emptyCell  - The resolved empty-cell color, as six-digit hex, when it is opaque.
+* @return The scale ends, as six-digit hex.
+*/
+const getHeatmapScale = (primary, background, emptyCell) => {
+	const primaryStandsOut = contrastRatio(primary, background) >= 3;
+	const extreme = (primaryStandsOut ? relativeLuminance(primary) > relativeLuminance(background) : contrastRatio("#ffffff", background) > contrastRatio("#000000", background)) ? "#ffffff" : "#000000";
+	const lowAgainst = (references) => {
+		const meets = (color) => references.every((reference) => contrastRatio(color, reference) >= 3);
+		return (primaryStandsOut ? firstMeeting(background, primary, meets) : null) ?? firstMeeting(primary, extreme, meets);
+	};
+	const high = firstMeeting(primary, extreme, (color) => contrastRatio(color, background) >= 9) ?? extreme;
+	const againstEmptyCell = emptyCell ? lowAgainst([background, emptyCell]) : null;
+	return {
+		low: (againstEmptyCell && contrastRatio(againstEmptyCell, background) <= contrastRatio(high, background) ? againstEmptyCell : lowAgainst([background])) ?? extreme,
+		high
+	};
+};
 //#endregion
 //#region src/charts/heatmap-chart/private/heatmap-context.ts
 /** Shared by the chart and legend without importing back from `heatmap-chart.tsx`. */
@@ -7562,7 +7783,7 @@ const HeatmapLegend = ({ steps = 5, variant = "swatches", lessLabel, moreLabel }
 	const context = useContext(HeatmapContext);
 	const { legend } = useGlobalChartsTheme();
 	if (!context) return null;
-	const { primaryColorHex } = context;
+	const { fillVars } = context;
 	const labelStyle = legend.labelStyles;
 	return /* @__PURE__ */ jsxs(Stack, {
 		direction: "row",
@@ -7585,7 +7806,7 @@ const HeatmapLegend = ({ steps = 5, variant = "swatches", lessLabel, moreLabel }
 					return /* @__PURE__ */ jsx("span", {
 						className: heatmap_chart_module_default["heatmap-chart__legend-swatch"],
 						style: {
-							"--a8c-charts-color-heatmap-primary": primaryColorHex,
+							...fillVars,
 							"--a8c-charts-heatmap-cell-intensity": intensity
 						}
 					}, index);
@@ -7789,26 +8010,25 @@ const stepCalendarCell = (grid, blocks, from, key) => {
 };
 //#endregion
 //#region src/charts/heatmap-chart/heatmap-chart.tsx
-const CELL_MIX_FLOOR = .15;
-const NO_ROW_LABELS = [];
-const TOOLTIP_BOX_STYLES = {
-	light: {
-		...defaultStyles,
-		zIndex: 3
-	},
-	dark: { zIndex: 3 }
+const CELL_VALUE_MODIFIER = {
+	label: void 0,
+	"label-inverse": heatmap_chart_module_default["heatmap-chart__cell-value--inverse"],
+	black: heatmap_chart_module_default["heatmap-chart__cell-value--black"],
+	white: heatmap_chart_module_default["heatmap-chart__cell-value--white"]
 };
+const NO_ROW_LABELS = [];
+const TOOLTIP_BOX_STYLE = { zIndex: 3 };
 const cellName = (info) => info.cellLabel || [
 	info.groupLabel,
 	info.columnLabel,
 	info.rowLabel
 ].filter(Boolean).join(" ");
-const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, height = 0, className, compact = false, showValues, maxCellWidth, maxCellHeight, minCellWidth, minCellHeight, rowLabels = NO_ROW_LABELS, columnGroups, keyboardNavigation = "grid", ariaLabel, primaryColor, gap = "md", withTooltips = false, renderTooltip, tooltipVariant = "light", tooltipStyle, children }) => {
+const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, height = 0, className, compact = false, showValues, maxCellWidth, maxCellHeight, minCellWidth, minCellHeight, rowLabels = NO_ROW_LABELS, columnGroups, keyboardNavigation = "grid", ariaLabel, primaryColor, gap = "md", withTooltips = false, renderTooltip, tooltipStyle, children }) => {
 	const chartId = useChartId(providedChartId);
 	const tooltipBoxStyle = tooltipStyle ? {
-		...TOOLTIP_BOX_STYLES[tooltipVariant],
+		...TOOLTIP_BOX_STYLE,
 		...tooltipStyle
-	} : TOOLTIP_BOX_STYLES[tooltipVariant];
+	} : TOOLTIP_BOX_STYLE;
 	const { getElementStyles, theme } = useGlobalChartsContext();
 	const scopeElement = useChartScopeElement();
 	const { heatmapChart: heatmapChartSettings } = theme;
@@ -7817,19 +8037,44 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 	const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, showTooltip, hideTooltip } = useTooltip();
 	const standaloneScopeClass = useStandaloneScopeClass();
 	const containerRef = useRef(null);
+	const [labelRoles, setLabelRoles] = useState(null);
 	const getTooltipOrigin = useCallback(() => containerRef.current?.closest(`[data-chart-id="heatmap-chart-${chartId}"]`)?.getBoundingClientRect() ?? null, [chartId]);
 	const { color: primaryColorHex } = getElementStyles({
 		index: 0,
 		overrideColor: primaryColor
 	});
-	const chartBackgroundHex = normalizeColorToHex(CATALOG_POINTERS.background, scopeElement, resolveCssVariable);
+	const resolveAtScope = createCssVariableResolver(scopeElement);
+	const chartBackgroundHex = resolveOpaqueHex(CATALOG_POINTERS.background, resolveAtScope) ?? "#ffffff";
+	const emptyCellHex = resolveOpaqueHex(CATALOG_POINTERS.track, resolveAtScope);
 	const primaryHex = normalizeColorToHex(primaryColorHex);
-	const cellHasLightText = (intensity) => isValidHexColor(primaryHex) && isValidHexColor(chartBackgroundHex) && prefersLightText(mixHexColors(primaryHex, chartBackgroundHex, 1 - (CELL_MIX_FLOOR + .85 * intensity)));
+	const scale = useMemo(() => isValidHexColor(primaryHex) ? getHeatmapScale(primaryHex, chartBackgroundHex, emptyCellHex) : null, [
+		primaryHex,
+		chartBackgroundHex,
+		emptyCellHex
+	]);
+	const fillVars = useMemo(() => ({
+		"--a8c-charts-color-heatmap-primary": primaryColorHex,
+		...scale && {
+			"--a8c-charts-color-heatmap-low": scale.low,
+			"--a8c-charts-color-heatmap-high": scale.high
+		}
+	}), [primaryColorHex, scale]);
+	const cellTextColor = (intensity) => scale ? pickLabelTextColorForFill(blendRgb(hexToRgb(scale.high), hexToRgb(scale.low), intensity), labelRoles, "label") : "label";
+	useIsomorphicLayoutEffect(() => {
+		if (!containerRef.current) return;
+		const next = resolveLabelRoles(createCssVariableResolver(containerRef.current));
+		setLabelRoles((previous) => (0, import_fast_deep_equal.default)(previous, next) ? previous : next);
+	}, [
+		data,
+		className,
+		primaryColorHex,
+		chartBackgroundHex
+	]);
 	const extent = useMemo(() => getValueExtent(data), [data]);
 	const heatmapContext = useMemo(() => ({
 		extent,
-		primaryColorHex
-	}), [extent, primaryColorHex]);
+		fillVars
+	}), [extent, fillVars]);
 	const columns = data.length;
 	const rows = Math.max(0, ...data.map((column) => column.data.length));
 	const groupLayout = useMemo(() => resolveColumnGroups(columnGroups, columns, 2), [columnGroups, columns]);
@@ -7980,9 +8225,10 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 	const firstDataRow = hasColumnLabels ? 2 : 1;
 	const dataTrack = (column) => column.summary ? "minmax(auto, max-content)" : columnTrack;
 	const gapTrack = compact ? `minmax(${groupGap}px, 1fr)` : `${groupGap}px`;
+	const columnTracks = data.map((column, columnIndex) => groupLayout.columns[columnIndex].gapBefore ? `${gapTrack} ${dataTrack(column)}` : dataTrack(column)).join(" ");
 	const gridStyle = {
-		"--a8c-charts-color-heatmap-primary": primaryColorHex,
-		gridTemplateColumns: `auto ${data.map((column, columnIndex) => groupLayout.columns[columnIndex].gapBefore ? `${gapTrack} ${dataTrack(column)}` : dataTrack(column)).join(" ")}`,
+		...fillVars,
+		gridTemplateColumns: `auto ${columnTracks}`,
 		gridTemplateRows: `${hasColumnLabels ? "auto " : ""}repeat(${rows}, ${rowTrack})${hasGroups ? " auto" : ""}`
 	};
 	if (compact) {
@@ -8082,7 +8328,7 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 									}, `cell-${columnIndex}-${rowIndex}`);
 									const value = cell?.value ?? null;
 									const present = isPresent(value);
-									const filled = present && !column.summary;
+									const filled = present && !column.summary && !isEmptyValue(value, extent);
 									const normalized = filled ? getNormalizedValue(value, extent) : 0;
 									const info = buildTooltipData(columnIndex, rowIndex);
 									const accessibleLabel = `${cellName(info)}: ${info.value === null ? __("No data", "jetpack-charts") : formatNumber(info.value)}`;
@@ -8096,7 +8342,6 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 										"data-row": rowIndex,
 										className: clsx(heatmap_chart_module_default["heatmap-chart__cell"], {
 											[heatmap_chart_module_default["heatmap-chart__cell--filled"]]: filled,
-											[heatmap_chart_module_default["heatmap-chart__cell--strong"]]: filled && cellHasLightText(normalized),
 											[heatmap_chart_module_default["heatmap-chart__cell--summary"]]: column.summary,
 											...summaryGaps(columnIndex),
 											[heatmap_chart_module_default["heatmap-chart__cell--selected"]]: selected?.column === columnIndex && selected?.row === rowIndex
@@ -8108,7 +8353,7 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 										onMouseMove: handleCellMouseMove,
 										onMouseLeave: handleCellMouseLeave,
 										children: (drawValues || column.summary) && present && /* @__PURE__ */ jsx("span", {
-											className: heatmap_chart_module_default["heatmap-chart__cell-value"],
+											className: clsx(heatmap_chart_module_default["heatmap-chart__cell-value"], filled && CELL_VALUE_MODIFIER[cellTextColor(normalized)]),
 											children: formatNumberCompact(value)
 										})
 									}, `cell-${columnIndex}-${rowIndex}`);
@@ -8132,7 +8377,6 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 				}), withTooltips && tooltipOpen && tooltipData && /* @__PURE__ */ jsx(BoundedTooltip, {
 					top: tooltipTop,
 					left: tooltipLeft,
-					className: tooltipVariant === "dark" ? base_tooltip_module_default.surface : void 0,
 					style: tooltipBoxStyle,
 					children: /* @__PURE__ */ jsx("div", {
 						className: standaloneScopeClass,
@@ -11359,7 +11603,9 @@ function RadialWipeAnimation({ id, radius, innerRadius = 0, durationMs = 1e3, wi
 var pie_chart_module_default = {
 	"pie-chart__label-plate": "a8ccharts-gnszbG-pie-chart__label-plate",
 	"pie-chart__label-text": "a8ccharts-gnszbG-pie-chart__label-text",
+	"pie-chart__label-text--black": "a8ccharts-gnszbG-pie-chart__label-text--black",
 	"pie-chart__label-text--on-light": "a8ccharts-gnszbG-pie-chart__label-text--on-light",
+	"pie-chart__label-text--white": "a8ccharts-gnszbG-pie-chart__label-text--white",
 	"pie-chart__plot": "a8ccharts-gnszbG-pie-chart__plot",
 	"pie-chart--responsive": "a8ccharts-gnszbG-pie-chart--responsive"
 };
@@ -11367,18 +11613,13 @@ var pie_chart_module_default = {
 //#region src/charts/pie-chart/pie-chart.tsx
 /**
 * Default tooltip renderer for pie charts.
-* Renders a BaseTooltip with the hovered segment's data.
+* Renders the default `label: value` tooltip content for the hovered segment.
 *
 * @param {PieChartRenderTooltipParams} params - The tooltip parameters containing the hovered data point
 * @return {ReactNode} The rendered tooltip content
 */
 const renderDefaultPieTooltip = ({ tooltipData }) => {
-	return /* @__PURE__ */ jsx(BaseTooltip, {
-		data: tooltipData,
-		top: 0,
-		left: 0,
-		renderContainer: false
-	});
+	return /* @__PURE__ */ jsx(LabelValueContent, { data: tooltipData });
 };
 /**
 * Validates the pie chart data
@@ -11403,24 +11644,11 @@ const validateData$1 = (data) => {
 		message: ""
 	};
 };
-/**
-* Whether a pie slice's label should use the dark `label` role instead of the default `label-inverse` role.
-*
-* A label plate always wins: the text sits on the plate, not the slice fill, so it never flips.
-* Otherwise the role that contrasts more with the resolved slice fill wins. `null` pointers (not
-* yet resolved, or labels off) keep the default inverse role.
-*
-* @param fill     - The slice's resolved fill color.
-* @param pointers - The label pointers, resolved at the chart's own root element.
-* @return Whether the label needs dark text.
-*/
-const labelNeedsDarkText = (fill, pointers) => {
-	if (!pointers || pointers.hasPlate) return false;
-	const fillHex = normalizeColorToHex(fill);
-	if (!isValidHexColor(fillHex) || !isValidHexColor(pointers.labelHex)) return false;
-	if (pointers.isInverseSeeThrough) return true;
-	if (!isValidHexColor(pointers.labelInverseHex)) return false;
-	return contrastRatio(fillHex, pointers.labelHex) > contrastRatio(fillHex, pointers.labelInverseHex);
+const LABEL_TEXT_MODIFIER = {
+	label: pie_chart_module_default["pie-chart__label-text--on-light"],
+	"label-inverse": void 0,
+	black: pie_chart_module_default["pie-chart__label-text--black"],
+	white: pie_chart_module_default["pie-chart__label-text--white"]
 };
 /**
 * Renders a pie or donut chart using the provided data.
@@ -11437,7 +11665,7 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
 	const standaloneScopeClass = useStandaloneScopeClass();
 	const containerRef = useRef(null);
 	const rootRef = useRef(null);
-	const [labelPointers, setLabelPointers] = useState(null);
+	const [labelRoles, setLabelRoles] = useState(null);
 	const onMouseLeave = useCallback(() => {
 		if (!withTooltips) return;
 		hideTooltip();
@@ -11448,18 +11676,9 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
 		if (!showLabels || !rootRef.current) return;
 		const resolve = createCssVariableResolver(rootRef.current);
 		const rawLabelBackground = resolve(CATALOG_POINTERS.labelBackground);
-		const rawLabel = resolve(CATALOG_POINTERS.label);
-		const isLabelOpaque = rawLabel ? color(rawLabel)?.opacity === 1 : false;
-		const rawLabelInverse = resolve(CATALOG_POINTERS.labelInverse);
-		const labelInverseColor = rawLabelInverse ? color(rawLabelInverse) : null;
 		const plateColor = rawLabelBackground ? color(rawLabelBackground) : null;
-		const next = {
-			hasPlate: rawLabelBackground ? !plateColor || plateColor.opacity > 0 : false,
-			labelHex: isLabelOpaque ? normalizeColorToHex(CATALOG_POINTERS.label, null, resolve) : "",
-			labelInverseHex: normalizeColorToHex(CATALOG_POINTERS.labelInverse, null, resolve),
-			isInverseSeeThrough: labelInverseColor ? labelInverseColor.opacity < 1 : false
-		};
-		setLabelPointers((previous) => previous && previous.hasPlate === next.hasPlate && previous.labelHex === next.labelHex && previous.labelInverseHex === next.labelInverseHex && previous.isInverseSeeThrough === next.isInverseSeeThrough ? previous : next);
+		const next = (rawLabelBackground ? !plateColor || plateColor.opacity > 0 : false) ? null : resolveLabelRoles(resolve);
+		setLabelRoles((previous) => (0, import_fast_deep_equal.default)(previous, next) ? previous : next);
 	}, [
 		showLabels,
 		className,
@@ -11630,7 +11849,7 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
 												ry: 4,
 												pointerEvents: "none"
 											}), /* @__PURE__ */ jsx("text", {
-												className: clsx(pie_chart_module_default["pie-chart__label-text"], { [pie_chart_module_default["pie-chart__label-text--on-light"]]: labelNeedsDarkText(fill, labelPointers) }),
+												className: clsx(pie_chart_module_default["pie-chart__label-text"], LABEL_TEXT_MODIFIER[pickLabelTextColor(fill, labelRoles, "label-inverse")]),
 												x: centroidX,
 												y: centroidY,
 												dy: ".33em",
@@ -11686,18 +11905,13 @@ var pie_semi_circle_chart_module_default = {
 //#region src/charts/pie-semi-circle-chart/pie-semi-circle-chart.tsx
 /**
 * Default tooltip renderer for semi-circle pie charts.
-* Renders a BaseTooltip with the hovered segment's data.
+* Renders the default `label: value` tooltip content for the hovered segment.
 *
 * @param {PieSemiCircleChartRenderTooltipParams} params - The tooltip parameters containing the hovered data point
 * @return {ReactNode} The rendered tooltip content
 */
 const renderDefaultPieSemiCircleTooltip = ({ tooltipData }) => {
-	return /* @__PURE__ */ jsx(BaseTooltip, {
-		data: tooltipData,
-		top: 0,
-		left: 0,
-		renderContainer: false
-	});
+	return /* @__PURE__ */ jsx(LabelValueContent, { data: tooltipData });
 };
 const PAD_ANGLE = .03;
 const DEFAULT_WIDTH$1 = 400;
@@ -12137,6 +12351,6 @@ function TrendIndicator({ direction, value, className, style, showIcon = true })
 	});
 }
 //#endregion
-export { AccessibleTooltip, AreaChartResponsive as AreaChart, AreaChart as AreaChartUnresponsive, BarChartResponsive as BarChart, BarChart as BarChartUnresponsive, BarListChartResponsive as BarListChart, BarListChart as BarListChartUnresponsive, BaseTooltip, ConversionFunnelChartWithProvider as ConversionFunnelChart, GeoChartResponsive as GeoChart, GeoChartWithProvider as GeoChartUnresponsive, GlobalChartsContext, GlobalChartsProvider, GlobalChartsProvider as ThemeProvider, GoogleDataTableColumnRoleType, HeatmapChartResponsive as HeatmapChart, HeatmapChart as HeatmapChartUnresponsive, LeaderboardChartResponsive as LeaderboardChart, LeaderboardChart as LeaderboardChartUnresponsive, Legend, LineChartResponsive as LineChart, LineChart as LineChartUnresponsive, PieChartResponsive as PieChart, PieChart as PieChartUnresponsive, PieSemiCircleChartResponsive as PieSemiCircleChart, PieSemiCircleChart as PieSemiCircleChartUnresponsive, Sparkline, SparklineUnresponsive, TrendIndicator, buildCalendarHeatmapData, buildMonthCalendarHeatmapData, defaultTheme, formatMetricValue, formatPercentage, getBucketInfo, getColorDistance, hexToRgba, isValidHexColor, lightenHexColor, mergeThemes, mixHexColors, normalizeColorToHex, parseAsLocalDate, parseHslString, prefersLightText, relativeLuminance, resolveCssVariable, useCalendarHeatmapData, useChartFormatting, useChartLegendItems, useChartRegistration, useChartScopeElement, useGlobalChartsContext, useGlobalChartsTheme, useLeaderboardLegendItems, useMonthCalendarHeatmapData, validateHexColor };
+export { AccessibleTooltip, AreaChartResponsive as AreaChart, AreaChart as AreaChartUnresponsive, BarChartResponsive as BarChart, BarChart as BarChartUnresponsive, BarListChartResponsive as BarListChart, BarListChart as BarListChartUnresponsive, BaseTooltip, ConversionFunnelChartWithProvider as ConversionFunnelChart, GeoChartResponsive as GeoChart, GeoChartWithProvider as GeoChartUnresponsive, GlobalChartsContext, GlobalChartsProvider, GlobalChartsProvider as ThemeProvider, GoogleDataTableColumnRoleType, HeatmapChartResponsive as HeatmapChart, HeatmapChart as HeatmapChartUnresponsive, LeaderboardChartResponsive as LeaderboardChart, LeaderboardChart as LeaderboardChartUnresponsive, Legend, LineChartResponsive as LineChart, LineChart as LineChartUnresponsive, PieChartResponsive as PieChart, PieChart as PieChartUnresponsive, PieSemiCircleChartResponsive as PieSemiCircleChart, PieSemiCircleChart as PieSemiCircleChartUnresponsive, Sparkline, SparklineUnresponsive, TooltipBox, TrendIndicator, XYChartTooltip, buildCalendarHeatmapData, buildMonthCalendarHeatmapData, defaultTheme, formatMetricValue, formatPercentage, getBucketInfo, getColorDistance, hexToRgba, isValidHexColor, lightenHexColor, mergeThemes, mixHexColors, normalizeColorToHex, parseAsLocalDate, parseHslString, prefersLightText, relativeLuminance, resolveCssVariable, useCalendarHeatmapData, useChartFormatting, useChartLegendItems, useChartRegistration, useChartScopeElement, useGlobalChartsContext, useGlobalChartsTheme, useLeaderboardLegendItems, useMonthCalendarHeatmapData, validateHexColor };
 
 //# sourceMappingURL=index.js.map