@automattic/charts 2.0.1 → 3.0.0

package/dist/index.cjs

@@ -64,6 +64,14 @@ const useChartInstanceContext = () => {
 };
 const useSingleChartContext = useChartInstanceContext;
 //#endregion
+//#region src/styles/chart-scope-class.ts
+/**
+* Stable class that carries the `--a8c-charts-*` catalog. Applied to the `GlobalChartsProvider` wrapper, to portal-rendered surfaces (which sit outside the provider tree), and to standalone components when no provider is above them.
+*
+* Deliberately unhashed: consumers are documented as being able to target it to override a token on the provider element.
+*/
+const CHART_SCOPE_CLASS = "a8c-charts-scope";
+//#endregion
 //#region src/utils/create-composition.ts
 /**
 * Utility function to create chart components with composition API.
@@ -620,6 +628,14 @@ const resolveFontSize = (val) => {
 	}
 };
 //#endregion
+//#region src/providers/chart-scope/chart-scope-context.ts
+/**
+* The nearest chart element, published so JS token resolution reads the same CSS cascade that paints the chart's own colours.
+*
+* All JS token resolution reads this element rather than `document.documentElement`, so a `getComputedStyle` call sees the same `--a8c-charts-*` values — including any override set inside the provider tree — that a CSS-painted sibling element does.
+*/
+const ChartScopeContext = (0, react.createContext)(null);
+//#endregion
 //#region src/providers/chart-context/private/get-chart-color.ts
 /**
 * Golden ratio for mathematically pleasing color distribution
@@ -749,12 +765,75 @@ const getChartColor = (index, colorCache) => {
 	return (0, _visx_vendor_d3_color.hsl)(Math.round(fallbackHue), fallbackSaturation / 100, fallbackLightness / 100).formatHex();
 };
 //#endregion
+//#region src/providers/chart-context/private/theme-override-vars.ts
+const ROLE_FOR_FIELD = [
+	["--a8c-charts-color-background", (theme) => theme.backgroundColor],
+	["--a8c-charts-color-grid", (theme) => theme.gridStyles?.stroke],
+	["--a8c-charts-color-axis", (theme) => theme.xAxisLineStyles?.stroke],
+	["--a8c-charts-color-tick", (theme) => theme.xTickLineStyles?.stroke],
+	["--a8c-charts-color-label-axis", (theme) => theme.svgLabelSmall?.fill]
+];
+/**
+* The variable a `theme` prop override is published as, one layer outside the role itself.
+*
+* `chart-scope.scss` declares each of these roles as `var(<role>-theme, <catalog default>)`, so an override that is invalid at computed-value time — a fallback-less `var()` naming a token the host never set — only invalidates this variable, and the role still resolves its mapped `--wpds-*` token. Published as the role directly, such a value took the role and every bare `var(<role>)` read site down with it.
+*
+* @param role - The catalog role being overridden.
+* @return The custom property carrying the consumer's value.
+*/
+const themeLayerVar = (role) => `${role}-theme`;
+ROLE_FOR_FIELD.map(([role]) => role);
+/**
+* Whether a value reads the role it is being published for, which would make the catalog entry depend on itself.
+*
+* The dependency runs `<role>: var(<role>-theme, …)`, so a value naming `<role>` closes a cycle through the catalog entry. CSS marks every custom property in a cycle invalid at computed-value time — the role's own fallback is *not* used, so the token resolves to nothing and every chart loses that colour. Verified in Chrome: `--role-theme: var(--role, blue); --role: var(--role-theme, green)` leaves `--role` empty, not `green`.
+*
+* Three things this has to get right, none of which a plain substring test gets:
+*
+* `var()` permits whitespace after the opening paren, so testing for `var(<role>` misses `var( --a8c-charts-color-grid, … )`.
+*
+* Several roles are prefixes of others (`--a8c-charts-color-label` of `--a8c-charts-color-label-secondary`), and every role is a prefix of its own theme layer. A prefix match would read a legitimate cross-role pointer as a self-reference and silently drop the override, so the role must be followed by something that cannot continue an identifier — `-` included. A value naming `<role>-theme` is therefore not treated as a self-reference: that cycle is confined to the theme layer, which leaves the role free to fall back to the catalog default.
+*
+* `resolveCssVariable` also accepts a bare custom-property name with no `var()` wrapper (`--a8c-charts-color-grid`), so that is legal `theme` input too. It forms no cycle — custom properties accept arbitrary token streams — so it survives as a literal string and drops silently at the use site instead of falling back to the catalog default.
+*
+* @param value - The consumer's value for the field.
+* @param role  - The catalog role this value would override.
+* @return True when the value reads `role`, so it must not be published.
+*/
+const readsOwnRole = (value, role) => value.trim() === role || new RegExp(`var\\(\\s*${role.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}(?![\\w-])`).test(value);
+/**
+* Maps a sparse consumer theme onto the theme-layer variables its overridden catalog roles read, so CSS-painted and JS-resolved colours read one source.
+*
+* A value that reads the role it would override is left unpublished — that is the default theme's own pointer surviving `mergeThemes`, and publishing it would invalidate the role. The role is still reported in `roles`: `withCatalogPointers` restores its theme field to the catalog pointer either way, so CSS and visx agree on the catalog default rather than visx painting a literal CSS never sees.
+*
+* @param theme - The consumer's `theme` prop, before merging with the default theme.
+* @return The wrapper's custom properties, and the roles the consumer overrode.
+*/
+const themeOverrideVars = (theme) => {
+	if (!theme) return {
+		vars: {},
+		roles: []
+	};
+	const vars = {};
+	const roles = [];
+	for (const [role, read] of ROLE_FOR_FIELD) {
+		const value = read(theme);
+		if (typeof value !== "string" || value === "") continue;
+		roles.push(role);
+		if (!readsOwnRole(value, role)) vars[themeLayerVar(role)] = value;
+	}
+	return {
+		vars,
+		roles
+	};
+};
+//#endregion
 //#region src/providers/chart-context/themes.ts
 /**
 * Default theme configuration
 */
 const defaultTheme = {
-	backgroundColor: "var(--a8c-charts-color-background, var(--wpds-color-background-surface-neutral-strong, #fff))",
+	backgroundColor: "var(--a8c-charts-color-background, #fff)",
 	labelBackgroundColor: "transparent",
 	labelTextColor: "var(--a8c-charts-color-label-on-fill, #FFFFFF)",
 	colors: [
@@ -765,59 +844,59 @@ const defaultTheme = {
 		"#FF8C8F"
 	],
 	gridStyles: {
-		stroke: "var(--a8c-charts-color-grid, var(--wpds-color-stroke-surface-neutral, #dbdbdb))",
+		stroke: "var(--a8c-charts-color-grid, #dbdbdb)",
 		strokeWidth: 1
 	},
 	tickLength: 4,
 	gridColor: "",
 	gridColorDark: "",
 	xTickLineStyles: {
-		stroke: "var(--a8c-charts-color-tick, var(--wpds-color-stroke-surface-neutral, #dbdbdb))",
+		stroke: "var(--a8c-charts-color-tick, #dbdbdb)",
 		strokeWidth: 1
 	},
 	xAxisLineStyles: {
-		stroke: "var(--a8c-charts-color-axis, var(--wpds-color-stroke-surface-neutral, #dbdbdb))",
+		stroke: "var(--a8c-charts-color-axis, #dbdbdb)",
 		strokeWidth: 1
 	},
 	legend: {
-		labelStyles: { color: "var(--a8c-charts-color-label, var(--wpds-color-foreground-content-neutral, #1e1e1e))" },
+		labelStyles: { color: "var(--a8c-charts-color-label, #1e1e1e)" },
 		containerStyles: {},
 		shapeStyles: []
 	},
 	seriesLineStyles: [],
 	glyphs: [],
 	svgLabelSmall: {
-		fill: "var(--a8c-charts-color-label, var(--wpds-color-foreground-content-neutral, #1e1e1e))",
+		fill: "var(--a8c-charts-color-label-axis, #1e1e1e)",
 		fontFamily: "inherit"
 	},
 	svgLabelBig: { fontFamily: "inherit" },
 	annotationStyles: {
 		label: {
-			anchorLineStroke: "var(--a8c-charts-color-annotation, var(--wpds-color-foreground-content-neutral, #1e1e1e))",
-			backgroundFill: "var(--a8c-charts-color-background, var(--wpds-color-background-surface-neutral-strong, #fff))"
+			anchorLineStroke: "var(--a8c-charts-color-annotation, #1e1e1e)",
+			backgroundFill: "var(--a8c-charts-color-surface, #fff)"
 		},
-		connector: { stroke: "var(--a8c-charts-color-annotation, var(--wpds-color-foreground-content-neutral, #1e1e1e))" },
+		connector: { stroke: "var(--a8c-charts-color-annotation, #1e1e1e)" },
 		circleSubject: {
 			stroke: "transparent",
-			fill: "var(--a8c-charts-color-annotation, var(--wpds-color-foreground-content-neutral, #1e1e1e))",
+			fill: "var(--a8c-charts-color-annotation, #1e1e1e)",
 			radius: 5
 		}
 	},
-	geoChart: { featureFillColor: "var(--a8c-charts-color-surface-secondary, var(--wpds-color-background-surface-neutral-weak, #f4f4f4))" },
+	geoChart: { featureFillColor: "var(--a8c-charts-color-surface-secondary, #f4f4f4)" },
 	leaderboardChart: {
 		rowGap: 12,
 		columnGap: 4,
 		labelSpacing: "xs",
 		deltaColors: [
-			"var(--a8c-charts-color-trend-down, var(--wpds-color-foreground-content-error-weak, #cc1818))",
-			"var(--a8c-charts-color-trend-neutral, var(--wpds-color-foreground-content-neutral-weak, #707070))",
-			"var(--a8c-charts-color-trend-up, var(--wpds-color-foreground-content-success-weak, #008030))"
+			"var(--a8c-charts-color-trend-down, #cc1818)",
+			"var(--a8c-charts-color-trend-neutral, #707070)",
+			"var(--a8c-charts-color-trend-up, #008030)"
 		]
 	},
 	conversionFunnelChart: {
-		backgroundColor: "var(--a8c-charts-color-surface-secondary, var(--wpds-color-background-surface-neutral-weak, #f4f4f4))",
-		positiveChangeColor: "var(--a8c-charts-color-trend-up, var(--wpds-color-foreground-content-success-weak, #008030))",
-		negativeChangeColor: "var(--a8c-charts-color-trend-down, var(--wpds-color-foreground-content-error-weak, #cc1818))"
+		backgroundColor: "var(--a8c-charts-color-surface-secondary, #f4f4f4)",
+		positiveChangeColor: "var(--a8c-charts-color-trend-up, #008030)",
+		negativeChangeColor: "var(--a8c-charts-color-trend-down, #cc1818)"
 	},
 	lineChart: { lineStyles: { comparison: {
 		strokeDasharray: "4 4",
@@ -842,15 +921,65 @@ const defaultTheme = {
 	}
 };
 //#endregion
+//#region src/providers/chart-context/private/with-catalog-pointers.ts
+const CATALOG_RESTORE_FOR_ROLE = {
+	"--a8c-charts-color-background": () => ({ backgroundColor: defaultTheme.backgroundColor }),
+	"--a8c-charts-color-grid": (theme) => ({ gridStyles: {
+		...theme.gridStyles,
+		stroke: defaultTheme.gridStyles.stroke
+	} }),
+	"--a8c-charts-color-axis": (theme) => ({ xAxisLineStyles: {
+		...theme.xAxisLineStyles,
+		stroke: defaultTheme.xAxisLineStyles.stroke
+	} }),
+	"--a8c-charts-color-tick": (theme) => ({ xTickLineStyles: {
+		...theme.xTickLineStyles,
+		stroke: defaultTheme.xTickLineStyles.stroke
+	} }),
+	"--a8c-charts-color-label-axis": (theme) => ({ svgLabelSmall: {
+		...theme.svgLabelSmall,
+		fill: defaultTheme.svgLabelSmall.fill
+	} })
+};
+/**
+* Restores the mapped theme fields of `overriddenRoles` to their catalog pointer, so the theme-layer variable `themeOverrideVars` writes on the provider wrapper is the only carrier for an overridden role — CSS and the JS bridge (`useXYChartTheme`) then resolve it through the same cascade instead of visx reading a baked literal that can disagree with a closer CSS override.
+*
+* This covers roles `themeOverrideVars` deliberately left unpublished as well as the ones it published. A value that reads its own role is not publishable, but leaving visx the consumer's literal is what the whole mechanism exists to prevent: `theme={ { gridStyles: { stroke: 'var(--brand, var(--a8c-charts-color-grid, red))' } } }` would have CSS paint the catalog default while visx painted `--brand`.
+*
+* Every field outside the five mapped roles is left exactly as `merged` provided it: those aren't published as theme-layer vars, so rewriting them would erase a consumer's override with no replacement carrier.
+*
+* @param merged          - The consumer theme merged onto `defaultTheme` (`mergeThemes` output).
+* @param overriddenRoles - The catalog roles the consumer overrode, from `themeOverrideVars`.
+* @return A new theme object; `merged` is not mutated.
+*/
+const withCatalogPointers = (merged, overriddenRoles) => {
+	let result = merged;
+	for (const role of overriddenRoles) {
+		const restore = CATALOG_RESTORE_FOR_ROLE[role];
+		if (restore) result = {
+			...result,
+			...restore(result)
+		};
+	}
+	return result;
+};
+//#endregion
 //#region src/providers/chart-context/global-charts-provider.tsx
 const GlobalChartsContext = (0, react.createContext)(null);
 const GlobalChartsProvider = ({ children, theme }) => {
 	const [charts, setCharts] = (0, react.useState)(() => /* @__PURE__ */ new Map());
 	const [hiddenSeries, setHiddenSeries] = (0, react.useState)(() => /* @__PURE__ */ new Map());
 	const wrapperRef = (0, react.useRef)(null);
+	const [scopeNode, setScopeNode] = (0, react.useState)(null);
+	const setWrapperNode = (0, react.useCallback)((node) => {
+		wrapperRef.current = node;
+		setScopeNode(node);
+	}, []);
+	const { vars: overrideVars, roles: overriddenRoles } = (0, react.useMemo)(() => themeOverrideVars(theme), [theme]);
 	const providerTheme = (0, react.useMemo)(() => {
-		return theme ? mergeThemes(defaultTheme, theme) : defaultTheme;
-	}, [theme]);
+		if (!theme) return defaultTheme;
+		return withCatalogPointers(mergeThemes(defaultTheme, theme), overriddenRoles);
+	}, [theme, overriddenRoles]);
 	const [colorCache, setColorCache] = (0, react.useState)(() => ({
 		colors: [],
 		hues: [],
@@ -927,7 +1056,6 @@ const GlobalChartsProvider = ({ children, theme }) => {
 		}
 		return getChartColor(index, colorCache);
 	}, [colorCache, groupToColorMap]);
-	const resolveThemeColor = (0, react.useCallback)((value) => value ? normalizeColorToHex(value, wrapperRef.current, resolveCssVariable) : "", []);
 	const getElementStyles = (0, react.useCallback)(({ data, index, overrideColor, legendShape }) => {
 		const isSeriesData = data && typeof data === "object" && "data" in data && "options" in data;
 		const isPointPercentageData = data && typeof data === "object" && "value" in data && typeof data.value === "number" && !("data" in data);
@@ -970,7 +1098,6 @@ const GlobalChartsProvider = ({ children, theme }) => {
 		getChartData,
 		theme: providerTheme,
 		getElementStyles,
-		resolveThemeColor,
 		toggleSeriesVisibility,
 		isSeriesVisible,
 		getHiddenSeries,
@@ -982,7 +1109,6 @@ const GlobalChartsProvider = ({ children, theme }) => {
 		getChartData,
 		providerTheme,
 		getElementStyles,
-		resolveThemeColor,
 		toggleSeriesVisibility,
 		isSeriesVisible,
 		getHiddenSeries,
@@ -991,9 +1117,16 @@ const GlobalChartsProvider = ({ children, theme }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GlobalChartsContext.Provider, {
 		value,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			ref: wrapperRef,
-			style: { display: "contents" },
-			children
+			ref: setWrapperNode,
+			className: CHART_SCOPE_CLASS,
+			style: {
+				display: "contents",
+				...overrideVars
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartScopeContext.Provider, {
+				value: scopeNode,
+				children
+			})
 		})
 	});
 };
@@ -1053,12 +1186,31 @@ const useDeepMemo = (value) => {
 	return ref.current;
 };
 //#endregion
+//#region src/providers/chart-scope/use-chart-scope-element.ts
+/**
+* Returns the nearest chart scope element, or `null` when rendered outside any scope (and during SSR, before the ref is attached).
+*
+* @return {HTMLElement | null} The nearest chart scope element, or `null`.
+*/
+const useChartScopeElement = () => (0, react.useContext)(ChartScopeContext);
+//#endregion
+//#region src/providers/chart-scope/use-standalone-scope-class.ts
+/**
+* Returns the catalog class when there is no `GlobalChartsProvider` above this component, and `undefined` when there is.
+*
+* Standalone components need the catalog to resolve at all, but inside a provider the tokens already inherit — re-declaring them there would shadow a consumer override set anywhere in the tree.
+*
+* @return The scope class name, or undefined when a provider is present.
+*/
+const useStandaloneScopeClass = () => (0, react.useContext)(GlobalChartsContext) ? void 0 : CHART_SCOPE_CLASS;
+//#endregion
 //#region src/hooks/use-xychart-theme.ts
 const useXYChartTheme = (data) => {
 	const theme = useGlobalChartsTheme();
+	const scopeElement = useChartScopeElement();
 	const seriesColorKey = JSON.stringify((data ?? []).map((series) => series.options?.stroke).filter((color) => Boolean(color)));
 	return (0, react.useMemo)(() => {
-		const resolve = createCssVariableResolver();
+		const resolve = createCssVariableResolver(scopeElement);
 		const resolveColor = (value) => value ? resolve(value) ?? value : value;
 		const seriesColors = JSON.parse(seriesColorKey);
 		return (0, _visx_xychart.buildChartTheme)({
@@ -1082,7 +1234,11 @@ const useXYChartTheme = (data) => {
 				fill: resolveColor(theme.svgLabelSmall.fill)
 			}
 		});
-	}, [theme, seriesColorKey]);
+	}, [
+		theme,
+		seriesColorKey,
+		scopeElement
+	]);
 };
 //#endregion
 //#region src/hooks/use-chart-data-transform.ts
@@ -1558,6 +1714,7 @@ const BaseLegend = (0, react.forwardRef)(({ items, className, orientation = "hor
 	const { width: shapeWidth = 16, height: shapeHeight = 16, margin: shapeMargin = "2px 4px 2px 0" } = shapeStyles ?? {};
 	const theme = useGlobalChartsTheme();
 	const context = (0, react.useContext)(GlobalChartsContext);
+	const standaloneScopeClass = useStandaloneScopeClass();
 	const legendScale = (0, _visx_scale.scaleOrdinal)({
 		domain: items.map((item) => item.label),
 		range: items.map((item) => item.color)
@@ -1610,7 +1767,7 @@ const BaseLegend = (0, react.forwardRef)(({ items, className, orientation = "hor
 			justify: orientation === "horizontal" ? flexAlignment : void 0,
 			wrap: orientation === "horizontal" ? "wrap" : void 0,
 			role: "list",
-			className: (0, clsx.default)(base_legend_module_default.legend, className),
+			className: (0, clsx.default)(standaloneScopeClass, base_legend_module_default.legend, className),
 			style: theme.legend?.containerStyles,
 			children: labels.map((label, i) => {
 				const matchedItem = items[i];
@@ -1897,9 +2054,10 @@ const BaseTooltip = ({ data, top, left, component: Component = DefaultTooltipCon
 		data,
 		className
 	});
+	const standaloneScopeClass = useStandaloneScopeClass();
 	if (!renderContainer) return content;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: base_tooltip_module_default.tooltip,
+		className: (0, clsx.default)(standaloneScopeClass, base_tooltip_module_default.tooltip),
 		style: {
 			top,
 			left,
@@ -1968,10 +2126,11 @@ const AccessibleTooltip = ({ renderTooltip, selectedIndex, tooltipRef, keyboardF
 				tabIndex: -1,
 				role: "tooltip",
 				"aria-atomic": "true",
-				className: keyboardFocusedClassName,
+				className: (0, clsx.default)(CHART_SCOPE_CLASS, keyboardFocusedClassName),
 				children: tooltipContent
 			}, `chart-tooltip-${selectedIndex}`);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: CHART_SCOPE_CLASS,
 				role: "tooltip",
 				"aria-live": "polite",
 				children: tooltipContent
@@ -2424,9 +2583,11 @@ function withResponsive(WrappedComponent) {
 			enableDebounceLeadingCall: true
 		});
 		const hasAspectRatio = aspectRatio !== void 0 && aspectRatio > 0;
+		const [scopeNode, setScopeNode] = (0, react.useState)(null);
 		const wrapperRef = (0, react.useRef)(null);
 		const setWrapperRef = (0, react.useCallback)((node) => {
 			wrapperRef.current = node;
+			setScopeNode(node);
 			if (typeof parentRef === "function") parentRef(node);
 			else if (parentRef) parentRef.current = node;
 		}, [parentRef]);
@@ -2472,14 +2633,17 @@ function withResponsive(WrappedComponent) {
 				...width !== void 0 ? { width } : null,
 				...height !== void 0 ? { height } : null
 			},
-			children: hasAspectRatio ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: with_responsive_module_default.content,
-				style: {
-					width: boxWidth,
-					height: boxHeight
-				},
-				children: wrappedComponent
-			}) : wrappedComponent
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartScopeContext.Provider, {
+				value: scopeNode,
+				children: hasAspectRatio ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: with_responsive_module_default.content,
+					style: {
+						width: boxWidth,
+						height: boxHeight
+					},
+					children: wrappedComponent
+				}) : wrappedComponent
+			})
 		});
 	};
 }
@@ -2914,11 +3078,12 @@ const getVerticalAnchor = (subjectType, isFlippedVertically, y, yMax, height) =>
 };
 const LineChartAnnotation = ({ datum, title, subtitle, subjectType = "circle", styles: datumStyles, testId, renderLabel, renderLabelPopover }) => {
 	const providerTheme = useGlobalChartsTheme();
+	const scopeElement = useChartScopeElement();
 	const { xScale, yScale } = (0, react.useContext)(_visx_xychart.DataContext) || {};
 	const labelRef = (0, react.useRef)(null);
 	const [height, setHeight] = (0, react.useState)(null);
 	const styles = (0, deepmerge.default)(providerTheme.annotationStyles ?? {}, datumStyles ?? {});
-	const resolveColor = (value) => value ? resolveCssVariable(value) ?? value : value;
+	const resolveColor = (value) => value ? resolveCssVariable(value, scopeElement) ?? value : value;
 	(0, react.useEffect)(() => {
 		if (labelRef.current?.getBBox) {
 			const bbox = labelRef.current.getBBox();
@@ -5069,12 +5234,22 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 	const { getElementStyles, isColorPaletteResolved } = useGlobalChartsContext();
 	const chartRef = (0, react.useRef)(null);
 	const selectedBarRef = (0, react.useRef)(null);
+	const [scopeNode, setScopeNode] = (0, react.useState)(null);
 	const { tooltipData, tooltipLeft, tooltipTop, tooltipOpen, showTooltip, hideTooltip } = (0, _visx_tooltip.useTooltip)();
 	const { handleBarClick, handleBarKeyDown, clearSelection, getStepState } = useFunnelSelection(hideTooltip);
 	const { containerRef: portalContainerRef, TooltipInPortal, containerBounds } = (0, _visx_tooltip.useTooltipInPortal)({
 		detectBounds: true,
 		scroll: true
 	});
+	const portalContainerRefRef = (0, react.useRef)(portalContainerRef);
+	(0, react.useEffect)(() => {
+		portalContainerRefRef.current = portalContainerRef;
+	}, [portalContainerRef]);
+	const setChartRef = (0, react.useCallback)((node) => {
+		portalContainerRefRef.current(node);
+		chartRef.current = node;
+		setScopeNode(node);
+	}, []);
 	const clearSelectionAndRef = (0, react.useCallback)(() => {
 		clearSelection();
 		selectedBarRef.current = null;
@@ -5220,6 +5395,7 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 		direction: "column",
 		align: "center",
 		justify: "center",
+		ref: setScopeNode,
 		className: (0, clsx.default)(conversion_funnel_chart_module_default["conversion-funnel-chart"], loading && conversion_funnel_chart_module_default["conversion-funnel-chart--loading"], className),
 		style: {
 			...style,
@@ -5231,80 +5407,80 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 		})
 	});
 	const maxRate = Math.max(...steps.map((step) => step.rate));
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_wordpress_ui.Stack, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_wordpress_ui.Stack, {
 		direction: "column",
 		gap: "xl",
-		ref: (node) => {
-			portalContainerRef(node);
-			chartRef.current = node;
-		},
+		ref: setChartRef,
 		className: (0, clsx.default)(conversion_funnel_chart_module_default["conversion-funnel-chart"], loading && conversion_funnel_chart_module_default["conversion-funnel-chart--loading"], className),
 		style: {
 			...style,
 			height: resolvedHeight
 		},
-		children: [renderMainMetric ? renderMainMetric({
-			mainRate,
-			changeIndicator,
-			className: conversion_funnel_chart_module_default["main-metric"],
-			changeColor
-		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_wordpress_ui.Stack, {
-			direction: "row",
-			align: "baseline",
-			gap: "sm",
-			className: conversion_funnel_chart_module_default["main-metric"],
-			children: renderDefaultMainMetric()
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_wordpress_ui.Stack, {
-			direction: "row",
-			align: "flex-end",
-			gap: "lg",
-			className: conversion_funnel_chart_module_default["funnel-container"],
-			children: steps.map((step, index) => {
-				const barHeight = step.rate / maxRate * 100;
-				const { isBlurred } = getStepState(step.id);
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_wordpress_ui.Stack, {
-					direction: "column",
-					className: (0, clsx.default)(conversion_funnel_chart_module_default["funnel-step"], isColorPaletteResolved && conversion_funnel_chart_module_default["funnel-step--animated"], isBlurred && conversion_funnel_chart_module_default["funnel-step--blurred"]),
-					gap: "xl",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_wordpress_ui.Stack, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ChartScopeContext.Provider, {
+			value: scopeNode,
+			children: [renderMainMetric ? renderMainMetric({
+				mainRate,
+				changeIndicator,
+				className: conversion_funnel_chart_module_default["main-metric"],
+				changeColor
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_wordpress_ui.Stack, {
+				direction: "row",
+				align: "baseline",
+				gap: "sm",
+				className: conversion_funnel_chart_module_default["main-metric"],
+				children: renderDefaultMainMetric()
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_wordpress_ui.Stack, {
+				direction: "row",
+				align: "flex-end",
+				gap: "lg",
+				className: conversion_funnel_chart_module_default["funnel-container"],
+				children: steps.map((step, index) => {
+					const barHeight = step.rate / maxRate * 100;
+					const { isBlurred } = getStepState(step.id);
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_wordpress_ui.Stack, {
 						direction: "column",
-						gap: "xs",
-						children: [renderStepLabel ? renderStepLabel({
-							step,
-							index,
-							className: conversion_funnel_chart_module_default["step-label"]
-						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: conversion_funnel_chart_module_default["step-label"],
-							children: step.label
-						}), renderStepRate ? renderStepRate({
-							step,
-							index,
-							className: conversion_funnel_chart_module_default["step-rate"]
-						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: conversion_funnel_chart_module_default["step-rate"],
-							children: formatPercentage(step.rate)
+						className: (0, clsx.default)(conversion_funnel_chart_module_default["funnel-step"], isColorPaletteResolved && conversion_funnel_chart_module_default["funnel-step--animated"], isBlurred && conversion_funnel_chart_module_default["funnel-step--blurred"]),
+						gap: "xl",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_wordpress_ui.Stack, {
+							direction: "column",
+							gap: "xs",
+							children: [renderStepLabel ? renderStepLabel({
+								step,
+								index,
+								className: conversion_funnel_chart_module_default["step-label"]
+							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: conversion_funnel_chart_module_default["step-label"],
+								children: step.label
+							}), renderStepRate ? renderStepRate({
+								step,
+								index,
+								className: conversion_funnel_chart_module_default["step-rate"]
+							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: conversion_funnel_chart_module_default["step-rate"],
+								children: formatPercentage(step.rate)
+							})]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_wordpress_ui.Stack, {
+							direction: "column",
+							justify: "flex-end",
+							className: conversion_funnel_chart_module_default["bar-container"],
+							onClick: stepHandlers.get(step.id)?.onClick,
+							onKeyDown: stepHandlers.get(step.id)?.onKeyDown,
+							role: "button",
+							tabIndex: isBlurred ? -1 : 0,
+							"aria-label": step.label,
+							style: { backgroundColor: barBackgroundColor },
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: (0, clsx.default)(conversion_funnel_chart_module_default["funnel-bar"], { [conversion_funnel_chart_module_default["funnel-bar--animated"]]: animation && !loading && !prefersReducedMotion }),
+								style: {
+									height: `${barHeight}%`,
+									backgroundColor: barColor
+								}
+							})
 						})]
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_wordpress_ui.Stack, {
-						direction: "column",
-						justify: "flex-end",
-						className: conversion_funnel_chart_module_default["bar-container"],
-						onClick: stepHandlers.get(step.id)?.onClick,
-						onKeyDown: stepHandlers.get(step.id)?.onKeyDown,
-						role: "button",
-						tabIndex: isBlurred ? -1 : 0,
-						"aria-label": step.label,
-						style: { backgroundColor: barBackgroundColor },
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: (0, clsx.default)(conversion_funnel_chart_module_default["funnel-bar"], { [conversion_funnel_chart_module_default["funnel-bar--animated"]]: animation && !loading && !prefersReducedMotion }),
-							style: {
-								height: `${barHeight}%`,
-								backgroundColor: barColor
-							}
-						})
-					})]
-				}, step.id);
-			})
-		})]
+					}, step.id);
+				})
+			})]
+		})
 	}), tooltipOpen && tooltipData && (() => {
 		const tooltipContent = renderTooltip ? renderTooltip({
 			step: tooltipData,
@@ -5317,7 +5493,7 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipInPortal, {
 			top: tooltipTop,
 			left: tooltipLeft,
-			className: conversion_funnel_chart_module_default["tooltip-wrapper"],
+			className: (0, clsx.default)("a8c-charts-scope", conversion_funnel_chart_module_default["tooltip-wrapper"]),
 			children: tooltipContent
 		}, Math.random());
 	})()] });
@@ -5467,6 +5643,7 @@ function normalizeGeoChartError(eventArgs) {
 */
 const GeoChartInternal = ({ className, data, width, height, region = "world", resolution = "countries", onError, renderPlaceholder }) => {
 	const { getElementStyles, theme: { geoChart: { featureFillColor }, backgroundColor } } = useGlobalChartsContext();
+	const scopeElement = useChartScopeElement();
 	const containerRef = (0, react.useRef)(null);
 	const reportedErrorIdsRef = (0, react.useRef)(/* @__PURE__ */ new Set());
 	(0, react.useEffect)(() => {
@@ -5499,8 +5676,8 @@ const GeoChartInternal = ({ className, data, width, height, region = "world", re
 	});
 	const fullColorHex = getElementStyles({ index: 0 }).color;
 	const lightColorHex = lightenHexColor(fullColorHex, .8);
-	const backgroundColorHex = normalizeColorToHex(backgroundColor, null, resolveCssVariable) || DEFAULT_BACKGROUND_COLOR;
-	const defaultFillColorHex = normalizeColorToHex(featureFillColor, null, resolveCssVariable) || DEFAULT_FEATURE_FILL_COLOR;
+	const backgroundColorHex = normalizeColorToHex(backgroundColor, scopeElement, resolveCssVariable) || DEFAULT_BACKGROUND_COLOR;
+	const defaultFillColorHex = normalizeColorToHex(featureFillColor, scopeElement, resolveCssVariable) || DEFAULT_FEATURE_FILL_COLOR;
 	const sanitizedData = (0, react.useMemo)(() => {
 		if (data.length === 0) return {
 			data,
@@ -5760,7 +5937,8 @@ const HeatmapLegend = ({ steps = 5, lessLabel, moreLabel }) => {
 const CELL_MIX_FLOOR = .15;
 const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, height = 0, className, compact = false, showValues, maxCellWidth, maxCellHeight, minCellWidth, minCellHeight, rowLabels = [], primaryColor, gap = "md", withTooltips = false, renderTooltip, children }) => {
 	const chartId = useChartId(providedChartId);
-	const { getElementStyles, resolveThemeColor, theme } = useGlobalChartsContext();
+	const { getElementStyles, theme } = useGlobalChartsContext();
+	const scopeElement = useChartScopeElement();
 	const { heatmapChart: heatmapChartSettings } = theme;
 	const { nonLegendChildren } = useChartChildren(children, "HeatmapChart");
 	const [selectedIndex, setSelectedIndex] = (0, react.useState)();
@@ -5775,7 +5953,7 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 		index: 0,
 		overrideColor: primaryColor || heatmapChartSettings.primaryColor
 	});
-	const chartBackgroundHex = resolveThemeColor(theme.backgroundColor);
+	const chartBackgroundHex = normalizeColorToHex(theme.backgroundColor, scopeElement, resolveCssVariable);
 	const primaryHex = normalizeColorToHex(primaryColorHex);
 	const cellHasLightText = (intensity) => isValidHexColor(primaryHex) && isValidHexColor(chartBackgroundHex) && prefersLightText(mixHexColors(primaryHex, chartBackgroundHex, 1 - (CELL_MIX_FLOOR + (1 - CELL_MIX_FLOOR) * intensity)));
 	const extent = (0, react.useMemo)(() => getValueExtent(data), [data]);
@@ -6002,6 +6180,7 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 					top: tooltipTop,
 					left: tooltipLeft,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "a8c-charts-scope",
 						role: "tooltip",
 						tabIndex: -1,
 						children: (renderTooltip ?? defaultRenderTooltip)(tooltipData)
@@ -9337,6 +9516,7 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
 					top: tooltipTop || 0,
 					left: tooltipLeft || 0,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "a8c-charts-scope",
 						role: "tooltip",
 						children: renderTooltip({ tooltipData })
 					})
@@ -9635,6 +9815,7 @@ const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width: pro
 					top: tooltipTop || 0,
 					left: tooltipLeft || 0,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "a8c-charts-scope",
 						role: "tooltip",
 						children: renderTooltip({ tooltipData })
 					})
@@ -9922,7 +10103,7 @@ const Icon = ({ direction }) => {
 function TrendIndicator({ direction, value, className, style, showIcon = true }) {
 	const ariaLabel = `${DIRECTION_LABELS[direction]}: ${value}`;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-		className: (0, clsx.default)(trend_indicator_module_default["trend-indicator"], trend_indicator_module_default[`trend-indicator--${direction}`], className),
+		className: (0, clsx.default)(useStandaloneScopeClass(), trend_indicator_module_default["trend-indicator"], trend_indicator_module_default[`trend-indicator--${direction}`], className),
 		style,
 		"aria-label": ariaLabel,
 		children: [showIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { direction }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -9976,7 +10157,10 @@ exports.parseHslString = parseHslString;
 exports.parseRgbString = parseRgbString;
 exports.prefersLightText = prefersLightText;
 exports.relativeLuminance = relativeLuminance;
+exports.resolveCssVariable = resolveCssVariable;
 exports.useChartLegendItems = useChartLegendItems;
+exports.useChartRegistration = useChartRegistration;
+exports.useChartScopeElement = useChartScopeElement;
 exports.useGlobalChartsContext = useGlobalChartsContext;
 exports.useGlobalChartsTheme = useGlobalChartsTheme;
 exports.useLeaderboardLegendItems = useLeaderboardLegendItems;