@automattic/charts 4.6.0 → 4.8.0

package/dist/index.cjs

@@ -29,18 +29,19 @@ let clsx = require("clsx");
 clsx = __toESM(clsx, 1);
 let react = require("react");
 react = __toESM(react);
-let _visx_vendor_d3_color = require("@visx/vendor/d3-color");
 let date_fns = require("date-fns");
 let _date_fns_tz = require("@date-fns/tz");
 let _visx_text = require("@visx/text");
 let deepmerge = require("deepmerge");
 deepmerge = __toESM(deepmerge, 1);
+let _visx_vendor_d3_color = require("@visx/vendor/d3-color");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _visx_tooltip = require("@visx/tooltip");
 let _visx_scale = require("@visx/scale");
 let _visx_group = require("@visx/group");
 let _visx_legend = require("@visx/legend");
 let _wordpress_ui = require("@wordpress/ui");
+let _wordpress_theme = require("@wordpress/theme");
 let react_dom = require("react-dom");
 let _visx_gradient = require("@visx/gradient");
 let _visx_curve = require("@visx/curve");
@@ -562,7 +563,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) => {
@@ -834,6 +836,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
@@ -881,14 +884,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,
@@ -1014,6 +1030,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.
@@ -1220,6 +1265,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 || (0, _visx_vendor_d3_color.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.
@@ -1268,12 +1321,6 @@ const defaultTheme = {
 };
 //#endregion
 //#region src/providers/chart-context/global-charts-provider.tsx
-const resolveOpaqueHex = (pointer, element) => {
-	const raw = resolveCssVariable(pointer, element);
-	if (!raw || (0, _visx_vendor_d3_color.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 = (0, react.createContext)(null);
 const GlobalChartsProvider = ({ children, theme, locale, timeZone }) => {
@@ -1301,8 +1348,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,
@@ -1534,15 +1582,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 (0, _visx_xychart.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
@@ -1640,10 +1686,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.
@@ -1723,18 +1769,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,
@@ -1977,6 +2023,9 @@ function usePrefersReducedMotion() {
 	return prefersReducedMotion;
 }
 //#endregion
+//#region src/hooks/use-isomorphic-layout-effect.ts
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
+//#endregion
 //#region src/providers/chart-context/hooks/use-chart-registration.ts
 const useChartRegistration = ({ chartId, legendItems, chartType, isDataValid, metadata }) => {
 	const { registerChart, unregisterChart } = useGlobalChartsContext();
@@ -2443,33 +2492,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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+	data.label,
+	": ",
+	data.valueDisplay || (0, _automattic_number_formatters.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 ? (0, _visx_vendor_d3_color.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 = (0, react.useMemo)(() => ({ background: toSeed(resolveCssVariable(TOOLTIP_SURFACE, scopeElement)) }), [scopeElement]);
+	if (!_wordpress_theme.ThemeProvider) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_wordpress_theme.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 = (0, react.forwardRef)(({ unstyled = false, role = "tooltip", className, children, ...rest }, ref) => {
+	const box = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref,
+		role,
+		className: (0, clsx.default)("visx-tooltip", !unstyled && ["a8c-charts-tooltip-scope", tooltip_box_module_default.surface], className),
+		...rest,
+		children
+	});
+	return unstyled ? box : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTheme, { children: box });
+});
+TooltipBox.displayName = "TooltipBox";
+//#endregion
 //#region src/components/tooltip/base-tooltip.tsx
-const DefaultTooltipContent = ({ data }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-	data?.label,
-	": ",
-	data?.valueDisplay || (0, _automattic_number_formatters.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__ */ (0, react_jsx_runtime.jsx)(Component, {
 		data,
 		className
 	});
-	const standaloneScopeClass = useStandaloneScopeClass();
 	if (!renderContainer) return content;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, clsx.default)(standaloneScopeClass, base_tooltip_module_default.tooltip),
+	return /* @__PURE__ */ (0, react_jsx_runtime.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
 	});
 };
@@ -2486,6 +2594,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) {
@@ -2546,7 +2659,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
@@ -2555,24 +2668,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 = _visx_tooltip.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 = (0, react.useRef)(null);
 	const clipRef = (0, react.useRef)(null);
 	const [position, setPosition] = (0, react.useState)(null);
 	(0, react.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,
@@ -2620,8 +2734,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__ */ (0, react_jsx_runtime.jsxs)(_visx_tooltip.Tooltip, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TooltipBox, {
 		ref: nodeRef,
+		role: "presentation",
+		unstyled,
+		className,
 		style: {
 			position: "absolute",
 			left: 0,
@@ -2637,16 +2754,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",
@@ -2748,15 +2865,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 : _visx_tooltip.Tooltip;
 	const boxStyle = {
-		..._visx_tooltip.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__ */ (0, react_jsx_runtime.jsx)(BoundedTooltip, {
+		left: tooltipLeft,
+		top: anchorTop,
+		offsetLeft,
+		offsetTop,
+		unstyled,
+		className,
+		style: boxStyle,
+		...boxProps,
+		...tooltipPlacement !== "auto" && { placement: tooltipPlacement },
+		children: tooltipContent
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipBox, {
+		role: "presentation",
+		unstyled,
+		className,
+		style: {
+			position: "absolute",
+			left: (tooltipLeft ?? 0) + offsetLeft,
+			top: (anchorTop ?? 0) + offsetTop,
+			...!unstyled && boxStyle
+		},
+		...boxProps,
+		children: tooltipContent
+	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
 		className: "visx-tooltip-overlay",
 		pointerEvents: "none",
@@ -2783,15 +2921,7 @@ const XyChartTooltipContent = ({ tooltipContext, container, renderTooltip, rende
 			}),
 			glyphs
 		]
-	}), container && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.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 && (0, react_dom.createPortal)(box, container)] });
 };
 /**
 * In-tree replacement for `@visx/xychart`'s `Tooltip`.
@@ -2816,7 +2946,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 = (0, react.useContext)(_visx_xychart.TooltipContext);
 	const [container, setContainer] = (0, react.useState)(null);
 	const anchorRef = (0, react.useCallback)((node) => {
@@ -2829,8 +2959,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 = (0, react.useContext)(_visx_xychart.TooltipContext);
 	const scopeElement = useChartScopeElement();
 	const crosshairStroke = (0, react.useMemo)(() => {
@@ -2936,7 +3066,7 @@ const AccessibleTooltip = ({ renderTooltip, selectedIndex, tooltipRef, keyboardF
 		keyboardFocusedClassName,
 		standaloneScopeClass
 	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(XyChartTooltip, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(XyChartTooltipOverlay, {
 		...props,
 		verticalCrosshairStyle: {
 			...crosshairStroke,
@@ -2949,6 +3079,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 = (0, react.useCallback)(() => chartRef.current?.closest("[role=\"grid\"]") ?? chartRef.current, [chartRef]);
 	const focusWithoutScrollIfNeeded = (0, react.useCallback)((element) => {
@@ -3058,7 +3190,6 @@ const useKeyboardNavigation = ({ selectedIndex, setSelectedIndex, isNavigating,
 };
 //#endregion
 //#region src/providers/chart-context/hooks/use-default-hidden-series.ts
-const useIsomorphicLayoutEffect$1 = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
 /**
 * Seeds a chart's hidden series once per chart ID, the first time the provider
 * sees that ID.
@@ -3079,7 +3210,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);
 	}, [
@@ -3704,7 +3835,6 @@ var with_responsive_module_default = {
 };
 //#endregion
 //#region src/charts/private/with-responsive/with-responsive.tsx
-const useIsomorphicLayoutEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
 /**
 * A higher-order component that provides responsive dimensions
 * to the wrapped chart component using useParentSize from `@visx/responsive`.
@@ -3988,10 +4118,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"
 };
@@ -4518,11 +4646,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;
@@ -4535,29 +4662,24 @@ const renderDefaultTooltip = (params, contentStyle) => {
 		if (b.value === null) return -1;
 		return b.value - a.value;
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: line_chart_module_default["line-chart__tooltip"],
-		style: contentStyle,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: line_chart_module_default["line-chart__tooltip-date"],
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipDate, {
-				date: nearestDatum.date,
-				displayResolution: bucketInfo?.displayResolution ?? "day"
-			})
-		}), tooltipPoints.map((point) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_wordpress_ui.Stack, {
-			direction: "row",
-			align: "center",
-			justify: "space-between",
-			className: line_chart_module_default["line-chart__tooltip-row"],
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-				className: line_chart_module_default["line-chart__tooltip-label"],
-				children: [point.key, ":"]
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: line_chart_module_default["line-chart__tooltip-value"],
-				children: formatReading(point.value)
-			})]
-		}, point.key))]
-	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: line_chart_module_default["line-chart__tooltip-date"],
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipDate, {
+			date: nearestDatum.date,
+			displayResolution: bucketInfo?.displayResolution ?? "day"
+		})
+	}), tooltipPoints.map((point) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_wordpress_ui.Stack, {
+		direction: "row",
+		align: "center",
+		justify: "space-between",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: line_chart_module_default["line-chart__tooltip-label"],
+			children: [point.key, ":"]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.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 (0, _wordpress_i18n.__)("No data available", "jetpack-charts");
@@ -4817,29 +4939,10 @@ const LineChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 		xAccessor: (d) => d?.date,
 		yAccessor: (d) => d?.value
 	};
-	const resolvedTooltipStyle = (0, react.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 = (0, react.useMemo)(() => (params) => renderTooltip === renderDefaultTooltip ? renderDefaultTooltip({
-		...params,
-		bucketInfo
-	}, {
-		color: tooltipStyle?.color,
-		background: tooltipStyle?.background,
-		backgroundColor: tooltipStyle?.backgroundColor
-	}) : renderTooltip({
+	const tooltipRenderer = (0, react.useMemo)(() => (params) => renderTooltip({
 		...params,
 		bucketInfo
-	}), [
-		renderTooltip,
-		bucketInfo,
-		tooltipStyle
-	]);
+	}), [renderTooltip, bucketInfo]);
 	if (error) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: (0, clsx.default)("line-chart", line_chart_module_default["line-chart"]),
 		children: error
@@ -4983,11 +5086,11 @@ const LineChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 										] }, seriesData?.label || index);
 									})
 								}),
-								withTooltips && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccessibleTooltip, {
+								withTooltips && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(XYChartTooltip, {
 									detectBounds: true,
 									snapTooltipToDatumX: true,
 									tooltipPlacement,
-									style: resolvedTooltipStyle,
+									style: tooltipStyle,
 									snapTooltipToDatumY: true,
 									showSeriesGlyphs: true,
 									renderTooltip: tooltipRenderer,
@@ -5459,7 +5562,7 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 										children: seriesWithVisibility.map(renderSeries)
 									}), !allSeriesHidden && !stacked && seriesWithVisibility.map(renderSeries)]
 								}),
-								withTooltips && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccessibleTooltip, {
+								withTooltips && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(XYChartTooltip, {
 									detectBounds: true,
 									snapTooltipToDatumX: true,
 									snapTooltipToDatumY: !stacked,
@@ -6070,6 +6173,7 @@ const ComparisonBars = ({ comparisonEntries, primaryKeys, groupPadding, horizont
 				widthFactor
 			});
 			rects.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+				className: "bar-chart__comparison-bar",
 				x: rect.x,
 				y: rect.y,
 				width: rect.width,
@@ -6485,7 +6589,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;
 				}
@@ -6667,15 +6771,15 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 								}),
 								!allSeriesHidden && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WholeNumberTicks, {
 									...wholeNumberTicksProps,
-									children: (valueTicks) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Axis, {
+									children: (valueTicks) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [chartOptions.axis.x.display !== false && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Axis, {
 										...chartOptions.axis.x,
 										...horizontal && valueTicks ? { tickValues: valueTicks } : {}
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Axis, {
+									}), chartOptions.axis.y.display !== false && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Axis, {
 										...chartOptions.axis.y,
 										...!horizontal && valueTicks ? { tickValues: valueTicks } : {}
 									})] })
 								}),
-								withTooltips && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccessibleTooltip, {
+								withTooltips && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(XYChartTooltip, {
 									tooltipPlacement,
 									tooltipAnchorTop,
 									style: tooltipStyle,
@@ -6895,8 +6999,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
@@ -6957,9 +7060,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 = (0, react.useRef)(null);
@@ -7194,15 +7298,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__ */ (0, react_jsx_runtime.jsx)(BoundedTooltip, {
 				top: tooltipTop,
 				left: tooltipLeft,
-				className: (0, clsx.default)(standaloneScopeClass, conversion_funnel_chart_module_default["tooltip-wrapper"]),
-				children: tooltipContent
+				className: standaloneScopeClass,
+				style: tooltipStyle,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					role: "tooltip",
+					children: tooltipContent
+				})
 			});
 		})()]
 	});
@@ -7487,6 +7594,73 @@ let GoogleDataTableColumnRoleType = /* @__PURE__ */ function(GoogleDataTableColu
 	GoogleDataTableColumnRoleType["domain"] = "domain";
 	return GoogleDataTableColumnRoleType;
 }({});
+const resolveRole = (pointer, resolve) => {
+	const raw = resolve(pointer);
+	const parsed = raw ? (0, _visx_vendor_d3_color.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 = {
@@ -7496,9 +7670,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",
@@ -7520,30 +7696,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
@@ -7551,9 +7741,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`. */
@@ -7564,7 +7785,7 @@ const HeatmapLegend = ({ steps = 5, variant = "swatches", lessLabel, moreLabel }
 	const context = (0, react.useContext)(HeatmapContext);
 	const { legend } = useGlobalChartsTheme();
 	if (!context) return null;
-	const { primaryColorHex } = context;
+	const { fillVars } = context;
 	const labelStyle = legend.labelStyles;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_wordpress_ui.Stack, {
 		direction: "row",
@@ -7587,7 +7808,7 @@ const HeatmapLegend = ({ steps = 5, variant = "swatches", lessLabel, moreLabel }
 					return /* @__PURE__ */ (0, react_jsx_runtime.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);
@@ -7791,26 +8012,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: {
-		..._visx_tooltip.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;
@@ -7819,19 +8039,44 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 	const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, showTooltip, hideTooltip } = (0, _visx_tooltip.useTooltip)();
 	const standaloneScopeClass = useStandaloneScopeClass();
 	const containerRef = (0, react.useRef)(null);
+	const [labelRoles, setLabelRoles] = (0, react.useState)(null);
 	const getTooltipOrigin = (0, react.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 = (0, react.useMemo)(() => isValidHexColor(primaryHex) ? getHeatmapScale(primaryHex, chartBackgroundHex, emptyCellHex) : null, [
+		primaryHex,
+		chartBackgroundHex,
+		emptyCellHex
+	]);
+	const fillVars = (0, react.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 = (0, react.useMemo)(() => getValueExtent(data), [data]);
 	const heatmapContext = (0, react.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 = (0, react.useMemo)(() => resolveColumnGroups(columnGroups, columns, 2), [columnGroups, columns]);
@@ -7982,9 +8227,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) {
@@ -8084,7 +8330,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 ? (0, _wordpress_i18n.__)("No data", "jetpack-charts") : (0, _automattic_number_formatters.formatNumber)(info.value)}`;
@@ -8098,7 +8344,6 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 										"data-row": rowIndex,
 										className: (0, clsx.default)(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
@@ -8110,7 +8355,7 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 										onMouseMove: handleCellMouseMove,
 										onMouseLeave: handleCellMouseLeave,
 										children: (drawValues || column.summary) && present && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-											className: heatmap_chart_module_default["heatmap-chart__cell-value"],
+											className: (0, clsx.default)(heatmap_chart_module_default["heatmap-chart__cell-value"], filled && CELL_VALUE_MODIFIER[cellTextColor(normalized)]),
 											children: (0, _automattic_number_formatters.formatNumberCompact)(value)
 										})
 									}, `cell-${columnIndex}-${rowIndex}`);
@@ -8134,7 +8379,6 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 				}), withTooltips && tooltipOpen && tooltipData && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BoundedTooltip, {
 					top: tooltipTop,
 					left: tooltipLeft,
-					className: tooltipVariant === "dark" ? base_tooltip_module_default.surface : void 0,
 					style: tooltipBoxStyle,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: standaloneScopeClass,
@@ -11726,7 +11970,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"
 };
@@ -11734,18 +11980,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__ */ (0, react_jsx_runtime.jsx)(BaseTooltip, {
-		data: tooltipData,
-		top: 0,
-		left: 0,
-		renderContainer: false
-	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LabelValueContent, { data: tooltipData });
 };
 /**
 * Validates the pie chart data
@@ -11770,24 +12011,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.
@@ -11804,7 +12032,7 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
 	const standaloneScopeClass = useStandaloneScopeClass();
 	const containerRef = (0, react.useRef)(null);
 	const rootRef = (0, react.useRef)(null);
-	const [labelPointers, setLabelPointers] = (0, react.useState)(null);
+	const [labelRoles, setLabelRoles] = (0, react.useState)(null);
 	const onMouseLeave = (0, react.useCallback)(() => {
 		if (!withTooltips) return;
 		hideTooltip();
@@ -11815,18 +12043,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 ? (0, _visx_vendor_d3_color.color)(rawLabel)?.opacity === 1 : false;
-		const rawLabelInverse = resolve(CATALOG_POINTERS.labelInverse);
-		const labelInverseColor = rawLabelInverse ? (0, _visx_vendor_d3_color.color)(rawLabelInverse) : null;
 		const plateColor = rawLabelBackground ? (0, _visx_vendor_d3_color.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,
@@ -11997,7 +12216,7 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
 												ry: 4,
 												pointerEvents: "none"
 											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
-												className: (0, clsx.default)(pie_chart_module_default["pie-chart__label-text"], { [pie_chart_module_default["pie-chart__label-text--on-light"]]: labelNeedsDarkText(fill, labelPointers) }),
+												className: (0, clsx.default)(pie_chart_module_default["pie-chart__label-text"], LABEL_TEXT_MODIFIER[pickLabelTextColor(fill, labelRoles, "label-inverse")]),
 												x: centroidX,
 												y: centroidY,
 												dy: ".33em",
@@ -12053,18 +12272,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__ */ (0, react_jsx_runtime.jsx)(BaseTooltip, {
-		data: tooltipData,
-		top: 0,
-		left: 0,
-		renderContainer: false
-	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LabelValueContent, { data: tooltipData });
 };
 const PAD_ANGLE = .03;
 const DEFAULT_WIDTH$1 = 400;
@@ -12532,7 +12746,9 @@ exports.PieSemiCircleChartUnresponsive = PieSemiCircleChart;
 exports.Sparkline = Sparkline;
 exports.SparklineUnresponsive = SparklineUnresponsive;
 exports.ThemeProvider = GlobalChartsProvider;
+exports.TooltipBox = TooltipBox;
 exports.TrendIndicator = TrendIndicator;
+exports.XYChartTooltip = XYChartTooltip;
 exports.buildCalendarHeatmapData = buildCalendarHeatmapData;
 exports.buildMonthCalendarHeatmapData = buildMonthCalendarHeatmapData;
 exports.defaultTheme = defaultTheme;