@automattic/charts 2.0.1 → 3.1.0

package/dist/index.cjs

@@ -52,17 +52,23 @@ require("@babel/runtime/helpers/esm/extends");
 require("@babel/runtime/helpers/extends");
 let _wordpress_icons = require("@wordpress/icons");
 let _visx_shape = require("@visx/shape");
-//#region src/charts/private/single-chart-context/single-chart-context.tsx
+//#region src/charts/private/chart-instance-context/chart-instance-context.ts
 const ChartInstanceContext = (0, react.createContext)(null);
-const SingleChartContext = ChartInstanceContext;
 //#endregion
-//#region src/charts/private/single-chart-context/use-single-chart-context.ts
+//#region src/charts/private/chart-instance-context/use-chart-instance-context.ts
 const useChartInstanceContext = () => {
 	const context = (0, react.useContext)(ChartInstanceContext);
 	if (!context) throw new Error("useChartInstanceContext must be used within a Chart component");
 	return context;
 };
-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
 /**
@@ -620,6 +626,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 +763,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 +842,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 +919,66 @@ 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 seededCharts = (0, react.useRef)(/* @__PURE__ */ new Set());
 	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 +1055,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);
@@ -943,18 +1070,41 @@ const GlobalChartsProvider = ({ children, theme }) => {
 			shapeStyles: isSeriesData ? getItemShapeStyles(data, index, providerTheme, legendShape) : {}
 		};
 	}, [providerTheme, resolveColor]);
-	const toggleSeriesVisibility = (0, react.useCallback)((chartId, seriesLabel) => {
+	const updateHiddenSeries = (0, react.useCallback)((chartId, update) => {
 		setHiddenSeries((prev) => {
+			const current = prev.get(chartId);
+			const next = update(new Set(current ?? []));
+			if (!current && next.size === 0) return prev;
+			if (current && current.size === next.size && [...next].every((label) => current.has(label))) return prev;
 			const newMap = new Map(prev);
-			const chartHidden = newMap.get(chartId) || /* @__PURE__ */ new Set();
-			const newSet = new Set(chartHidden);
-			if (newSet.has(seriesLabel)) newSet.delete(seriesLabel);
-			else newSet.add(seriesLabel);
-			if (newSet.size === 0) newMap.delete(chartId);
-			else newMap.set(chartId, newSet);
+			if (next.size === 0) newMap.delete(chartId);
+			else newMap.set(chartId, next);
 			return newMap;
 		});
 	}, []);
+	const toggleSeriesVisibility = (0, react.useCallback)((chartId, seriesLabel) => {
+		updateHiddenSeries(chartId, (current) => {
+			if (current.has(seriesLabel)) current.delete(seriesLabel);
+			else current.add(seriesLabel);
+			return current;
+		});
+	}, [updateHiddenSeries]);
+	const setSeriesVisibility = (0, react.useCallback)((chartId, seriesLabel, visible) => {
+		updateHiddenSeries(chartId, (current) => {
+			if (visible) current.delete(seriesLabel);
+			else current.add(seriesLabel);
+			return current;
+		});
+	}, [updateHiddenSeries]);
+	const setChartHiddenSeries = (0, react.useCallback)((chartId, seriesLabels) => {
+		updateHiddenSeries(chartId, () => new Set(seriesLabels));
+	}, [updateHiddenSeries]);
+	const hasSeededChart = (0, react.useCallback)((chartId) => seededCharts.current.has(chartId), []);
+	const seedChartHiddenSeries = (0, react.useCallback)((chartId, seriesLabels) => {
+		if (seededCharts.current.has(chartId)) return;
+		seededCharts.current.add(chartId);
+		setChartHiddenSeries(chartId, seriesLabels);
+	}, [setChartHiddenSeries]);
 	const isSeriesVisible = (0, react.useCallback)((chartId, seriesLabel) => {
 		const chartHidden = hiddenSeries.get(chartId);
 		return !chartHidden || !chartHidden.has(seriesLabel);
@@ -970,8 +1120,11 @@ const GlobalChartsProvider = ({ children, theme }) => {
 		getChartData,
 		theme: providerTheme,
 		getElementStyles,
-		resolveThemeColor,
 		toggleSeriesVisibility,
+		setSeriesVisibility,
+		setChartHiddenSeries,
+		seedChartHiddenSeries,
+		hasSeededChart,
 		isSeriesVisible,
 		getHiddenSeries,
 		isColorPaletteResolved
@@ -982,8 +1135,11 @@ const GlobalChartsProvider = ({ children, theme }) => {
 		getChartData,
 		providerTheme,
 		getElementStyles,
-		resolveThemeColor,
 		toggleSeriesVisibility,
+		setSeriesVisibility,
+		setChartHiddenSeries,
+		seedChartHiddenSeries,
+		hasSeededChart,
 		isSeriesVisible,
 		getHiddenSeries,
 		isColorPaletteResolved
@@ -991,9 +1147,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 +1216,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 +1264,11 @@ const useXYChartTheme = (data) => {
 				fill: resolveColor(theme.svgLabelSmall.fill)
 			}
 		});
-	}, [theme, seriesColorKey]);
+	}, [
+		theme,
+		seriesColorKey,
+		scopeElement
+	]);
 };
 //#endregion
 //#region src/hooks/use-chart-data-transform.ts
@@ -1352,12 +1538,12 @@ const useDataWithPercentages = (data) => {
 	}, [data]);
 };
 //#endregion
-//#region src/hooks/use-interactive-legend-data.ts
+//#region src/hooks/use-legend-visibility-data.ts
 /**
-* Custom hook to filter and recalculate chart data for interactive legends.
+* Custom hook to filter and recalculate chart data based on series visibility.
 *
-* When interactive legends are enabled, this hook:
-* 1. Filters data to show only visible series based on legend selection
+* Regardless of whether the legend is interactive (clickable), this hook:
+* 1. Filters data to show only visible series (visibility can also be set programmatically)
 * 2. Recalculates percentages so visible segments total 100%
 * 3. Tracks whether all segments are hidden to show empty state
 *
@@ -1366,10 +1552,9 @@ const useDataWithPercentages = (data) => {
 *
 * @example
 * ```tsx
-* const { visibleData, allSegmentsHidden, legendData } = useInteractiveLegendData({
+* const { visibleData, allSegmentsHidden, legendData } = useLegendVisibilityData({
 *   data: chartData,
 *   chartId: 'my-pie-chart',
-*   legendInteractive: true,
 *   isSeriesVisible: (id, label) => context.isSeriesVisible(id, label),
 * });
 *
@@ -1384,16 +1569,15 @@ const useDataWithPercentages = (data) => {
 * return <PieChart data={visibleData} />;
 * ```
 *
-* @param params                   - Configuration object for the hook
-* @param params.data              - The chart data to filter
-* @param params.chartId           - Unique identifier for the chart (required for interactive mode)
-* @param params.legendInteractive - Whether to enable interactive filtering
-* @param params.isSeriesVisible   - Function to check series visibility
+* @param params                 - Configuration object for the hook
+* @param params.data            - The chart data to filter
+* @param params.chartId         - Unique identifier for the chart (required for filtering)
+* @param params.isSeriesVisible - Function to check series visibility
 * @return Object containing visibleData, allSegmentsHidden flag, and legendData with recalculated percentages
 */
-const useInteractiveLegendData = ({ data, chartId, legendInteractive, isSeriesVisible }) => {
+const useLegendVisibilityData = ({ data, chartId, isSeriesVisible }) => {
 	const visibleData = (0, react.useMemo)(() => {
-		if (!chartId || !legendInteractive) return data;
+		if (!chartId) return data;
 		const filtered = data.filter((segment) => isSeriesVisible(chartId, segment.label));
 		if (filtered.length === 0) return [];
 		const totalValue = filtered.reduce((sum, segment) => sum + segment.value, 0);
@@ -1404,16 +1588,15 @@ const useInteractiveLegendData = ({ data, chartId, legendInteractive, isSeriesVi
 	}, [
 		data,
 		chartId,
-		isSeriesVisible,
-		legendInteractive
+		isSeriesVisible
 	]);
 	return {
 		visibleData,
 		allSegmentsHidden: (0, react.useMemo)(() => {
-			return legendInteractive && visibleData.length === 0;
-		}, [legendInteractive, visibleData]),
+			return visibleData.length === 0 && data.length > 0;
+		}, [visibleData, data]),
 		legendData: (0, react.useMemo)(() => {
-			if (!legendInteractive || !chartId) return data;
+			if (!chartId) return data;
 			const visibleDataMap = new Map(visibleData.map((d) => [d.label, d]));
 			return data.map((segment) => {
 				if (!isSeriesVisible(chartId, segment.label)) return segment;
@@ -1422,7 +1605,6 @@ const useInteractiveLegendData = ({ data, chartId, legendInteractive, isSeriesVi
 		}, [
 			data,
 			visibleData,
-			legendInteractive,
 			chartId,
 			isSeriesVisible
 		])
@@ -1552,12 +1734,23 @@ const LegendText = ({ text, textOverflow, maxWidth }) => {
 		children: text
 	});
 };
+const getLegendItemAriaLabel = (text, value, visible, interactive) => {
+	const accessibleText = value != null && value !== "" ? (0, _wordpress_i18n.sprintf)((0, _wordpress_i18n._x)("%1$s, %2$s", "legend item label and value", "jetpack-charts"), text, String(value)) : text;
+	if (interactive) {
+		if (visible) return (0, _wordpress_i18n.sprintf)((0, _wordpress_i18n._x)("%s: visible. Toggle visibility.", "visible interactive legend item", "jetpack-charts"), accessibleText);
+		return (0, _wordpress_i18n.sprintf)((0, _wordpress_i18n._x)("%s: hidden. Toggle visibility.", "hidden interactive legend item", "jetpack-charts"), accessibleText);
+	}
+	if (visible) return;
+	return (0, _wordpress_i18n.sprintf)((0, _wordpress_i18n._x)("%s: hidden", "hidden non-interactive legend item", "jetpack-charts"), accessibleText);
+};
 const BaseLegend = (0, react.forwardRef)(({ items, className, orientation = "horizontal", alignment = "center", shape = "rect", fill = valueOrIdentityString, size = valueOrIdentityString, labelFormat = valueOrIdentity, labelTransform = labelTransformFactory, itemStyles, itemClassName, labelStyles, labelClassName, shapeStyles, render, interactive = false, chartId }, ref) => {
 	const { margin: itemMargin = "0", flexDirection: itemDirection = "row" } = itemStyles ?? {};
 	const { justifyContent: labelJustifyContent = "flex-start", flex: labelFlex = "0 0 auto", margin: labelMargin = "0 4px", maxWidth, textOverflow = "wrap" } = labelStyles ?? {};
 	const { width: shapeWidth = 16, height: shapeHeight = 16, margin: shapeMargin = "2px 4px 2px 0" } = shapeStyles ?? {};
 	const theme = useGlobalChartsTheme();
 	const context = (0, react.useContext)(GlobalChartsContext);
+	const chartInstanceContext = (0, react.useContext)(ChartInstanceContext);
+	const standaloneScopeClass = useStandaloneScopeClass();
 	const legendScale = (0, _visx_scale.scaleOrdinal)({
 		domain: items.map((item) => item.label),
 		range: items.map((item) => item.color)
@@ -1567,9 +1760,7 @@ const BaseLegend = (0, react.forwardRef)(({ items, className, orientation = "hor
 	const handleLegendClick = (0, react.useCallback)((seriesLabels) => {
 		if (interactive && chartId && context) {
 			const representativeVisible = context.isSeriesVisible(chartId, seriesLabels[0]);
-			seriesLabels.forEach((label) => {
-				if (context.isSeriesVisible(chartId, label) === representativeVisible) context.toggleSeriesVisibility(chartId, label);
-			});
+			seriesLabels.forEach((label) => context.setSeriesVisibility(chartId, label, !representativeVisible));
 		}
 	}, [
 		interactive,
@@ -1577,11 +1768,12 @@ const BaseLegend = (0, react.forwardRef)(({ items, className, orientation = "hor
 		context
 	]);
 	const isSeriesVisible = (0, react.useCallback)((seriesLabel) => {
-		if (!interactive || !chartId || !context) return true;
+		if (chartInstanceContext?.isSeriesVisible) return chartInstanceContext.isSeriesVisible(seriesLabel);
+		if (!chartId || !context) return true;
 		return context.isSeriesVisible(chartId, seriesLabel);
 	}, [
-		interactive,
 		chartId,
+		chartInstanceContext,
 		context
 	]);
 	const createClickHandler = (0, react.useCallback)((seriesLabels) => {
@@ -1609,8 +1801,8 @@ const BaseLegend = (0, react.forwardRef)(({ items, className, orientation = "hor
 			align: orientation === "vertical" ? flexAlignment : void 0,
 			justify: orientation === "horizontal" ? flexAlignment : void 0,
 			wrap: orientation === "horizontal" ? "wrap" : void 0,
-			role: "list",
-			className: (0, clsx.default)(base_legend_module_default.legend, className),
+			role: interactive ? void 0 : "list",
+			className: (0, clsx.default)(standaloneScopeClass, base_legend_module_default.legend, className),
 			style: theme.legend?.containerStyles,
 			children: labels.map((label, i) => {
 				const matchedItem = items[i];
@@ -1624,10 +1816,10 @@ const BaseLegend = (0, react.forwardRef)(({ items, className, orientation = "hor
 					flexDirection: orientation === "vertical" && alignment === "end" ? "row-reverse" : itemDirection,
 					onClick: handleClick,
 					onKeyDown: handleKeyDown,
-					role: interactive ? "button" : void 0,
+					role: interactive ? "button" : "listitem",
 					tabIndex: interactive ? 0 : void 0,
 					"aria-pressed": interactive ? visible : void 0,
-					"aria-label": interactive ? `${label.text}: ${visible ? "visible" : "hidden"}. Toggle visibility.` : void 0,
+					"aria-label": getLegendItemAriaLabel(label.text, matchedItem?.value, visible, interactive),
 					children: [items[i]?.renderGlyph ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 						width: items[i]?.glyphSize * 2,
 						height: items[i]?.glyphSize * 2,
@@ -1689,8 +1881,8 @@ const defaultShapeByChartType = {
 };
 const Legend = (0, react.forwardRef)(({ chartId, items, shape, ...props }, ref) => {
 	const context = (0, react.useContext)(GlobalChartsContext);
-	const singleChartContext = (0, react.useContext)(SingleChartContext);
-	const contextChartId = chartId ?? singleChartContext?.chartId;
+	const chartInstanceContext = (0, react.useContext)(ChartInstanceContext);
+	const contextChartId = chartId ?? chartInstanceContext?.chartId;
 	const chartData = (0, react.useMemo)(() => contextChartId && context ? context.getChartData(contextChartId) : void 0, [contextChartId, context]);
 	const contextItems = chartData?.legendItems;
 	const resolvedShape = shape ?? (chartData?.chartType ? defaultShapeByChartType[chartData.chartType] : void 0);
@@ -1897,9 +2089,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,
@@ -1929,11 +2122,16 @@ const AccessibleTooltip = ({ renderTooltip, selectedIndex, tooltipRef, keyboardF
 		}
 		return flattened;
 	}, [series, mode]);
+	const hasKeyboardSelection = (0, react.useRef)(false);
 	(0, react.useEffect)(() => {
 		if (selectedIndex === void 0) {
-			tooltipContext?.hideTooltip();
+			if (hasKeyboardSelection.current) {
+				hasKeyboardSelection.current = false;
+				tooltipContext?.hideTooltip();
+			}
 			return;
 		}
+		hasKeyboardSelection.current = true;
 		if (mode === "group") series.forEach((s, index) => {
 			if (selectedIndex < s.data.length) {
 				const datum = s.data[selectedIndex];
@@ -1968,10 +2166,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
@@ -2040,6 +2239,43 @@ 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.
+*
+* The provider owns the record of what has been seeded, not this hook: a
+* mount-scoped one would re-apply the defaults on every remount, and a chart
+* remounts for reasons the reader never thinks of as a new chart — switching
+* between line and bar, tabbing away and back, a resize flipping tabs into a
+* dropdown. Each of those would throw away the series they had just revealed.
+*
+* @param chartId      - The chart ID passed to the provider's visibility methods.
+* @param seriesLabels - Labels to hide when this chart ID is first seen. Later values are ignored.
+* @return The resolved hidden-series set.
+*/
+const useDefaultHiddenSeries = (chartId, seriesLabels) => {
+	const { getHiddenSeries, seedChartHiddenSeries, hasSeededChart } = useGlobalChartsContext();
+	const labelsRef = (0, react.useRef)(seriesLabels);
+	labelsRef.current = seriesLabels;
+	const hasSeriesLabels = seriesLabels !== void 0;
+	const shouldUseDefaults = hasSeriesLabels && !hasSeededChart(chartId);
+	useIsomorphicLayoutEffect$1(() => {
+		if (labelsRef.current === void 0) return;
+		seedChartHiddenSeries(chartId, labelsRef.current);
+	}, [
+		chartId,
+		hasSeriesLabels,
+		seedChartHiddenSeries
+	]);
+	return (0, react.useMemo)(() => shouldUseDefaults ? new Set(labelsRef.current) : getHiddenSeries(chartId), [
+		shouldUseDefaults,
+		getHiddenSeries,
+		chartId
+	]);
+};
+//#endregion
 //#region src/charts/private/chart-composition/chart-svg.tsx
 /**
 * Compound component for SVG children in charts.
@@ -2253,6 +2489,27 @@ const SvgEmptyState = ({ x, y, width, height, children }) => {
 	});
 };
 //#endregion
+//#region src/charts/private/svg-empty-state/get-all-hidden-message.ts
+/**
+* Return the empty-state message for a chart whose items are all hidden.
+*
+* Each translation call has a distinct gettext context. This prevents Terser
+* from folding conditional calls into one call with a conditional msgid, which
+* would make the strings unavailable to static translation extraction.
+*
+* @param interactive - Whether the legend can be used to show hidden items.
+* @param itemType    - The chart-specific name for its data items.
+* @return The translated empty-state message.
+*/
+const getAllHiddenMessage = (interactive, itemType) => {
+	if (itemType === "segments") {
+		if (interactive) return (0, _wordpress_i18n._x)("All segments are hidden. Click legend items to show data.", "chart empty state: interactive segments", "jetpack-charts");
+		return (0, _wordpress_i18n._x)("All segments are hidden.", "chart empty state: segments", "jetpack-charts");
+	}
+	if (interactive) return (0, _wordpress_i18n._x)("All series are hidden. Click legend items to show data.", "chart empty state: interactive series", "jetpack-charts");
+	return (0, _wordpress_i18n._x)("All series are hidden.", "chart empty state: series", "jetpack-charts");
+};
+//#endregion
 //#region src/charts/private/time-axis.ts
 const X_TICK_WIDTH = 60;
 const getCurveType = (type, smoothing) => {
@@ -2424,9 +2681,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 +2731,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
+			})
 		});
 	};
 }
@@ -2775,7 +3037,7 @@ const LineChartAnnotationLabelWithPopover = ({ title, subtitle, renderLabel, ren
 //#endregion
 //#region src/charts/line-chart/private/line-chart-annotations-overlay.tsx
 const LineChartAnnotationsOverlay = ({ children }) => {
-	const { chartRef, chartWidth, chartHeight } = useSingleChartContext();
+	const { chartRef, chartWidth, chartHeight } = useChartInstanceContext();
 	const [scales, setScales] = (0, react.useState)(null);
 	const [scalesStable, setScalesStable] = (0, react.useState)(false);
 	const createScaleSignature = (0, react.useCallback)((scaleData) => {
@@ -2914,11 +3176,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();
@@ -3159,7 +3422,7 @@ const LineChartScalesRef = ({ chartRef, width, height, margin }) => {
 	]);
 	return null;
 };
-const LineChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartId, width, height, className, margin, withTooltips = true, withTooltipCrosshairs, showLegend = false, legend = {}, renderGlyph = defaultRenderGlyph, glyphStyle = {}, withLegendGlyph = false, withGradientFill = false, smoothing = true, curveType, renderTooltip = renderDefaultTooltip, withStartGlyphs = false, withEndGlyphs = false, animation, options = {}, onPointerDown = void 0, onPointerUp = void 0, onPointerMove = void 0, onPointerOut = void 0, zoomable = false, rescaleYOnVisibilityChange = true, children, gridVisibility, gap = "md" }, ref) => {
+const LineChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartId, width, height, className, margin, withTooltips = true, withTooltipCrosshairs, showLegend = false, legend = {}, renderGlyph = defaultRenderGlyph, glyphStyle = {}, withLegendGlyph = false, withGradientFill = false, smoothing = true, curveType, renderTooltip = renderDefaultTooltip, withStartGlyphs = false, withEndGlyphs = false, animation, options = {}, onPointerDown = void 0, onPointerUp = void 0, onPointerMove = void 0, onPointerOut = void 0, zoomable = false, rescaleYOnVisibilityChange = true, defaultHiddenSeries, children, gridVisibility, gap = "md" }, ref) => {
 	const legendInteractive = legend.interactive ?? false;
 	const legendCollapseGroups = legend.collapseGroups ?? false;
 	const legendShape = legend.shape ?? "line";
@@ -3168,6 +3431,8 @@ const LineChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 	const theme = useXYChartTheme(data);
 	const resolvedBackgroundColor = theme.backgroundColor ?? providerTheme.backgroundColor;
 	const chartId = useChartId(providedChartId);
+	const hiddenSeries = useDefaultHiddenSeries(chartId, defaultHiddenSeries);
+	const isSeriesVisible = (0, react.useCallback)((seriesLabel) => !hiddenSeries.has(seriesLabel), [hiddenSeries]);
 	const chartRef = (0, react.useRef)(null);
 	const [selectedIndex, setSelectedIndex] = (0, react.useState)(void 0);
 	const [isNavigating, setIsNavigating] = (0, react.useState)(false);
@@ -3195,29 +3460,19 @@ const LineChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 		}
 	}), [internalChartRef]);
 	const dataSorted = useChartDataTransform(data);
-	const { getElementStyles, isSeriesVisible } = useGlobalChartsContext();
+	const { getElementStyles } = useGlobalChartsContext();
 	const seriesWithVisibility = (0, react.useMemo)(() => {
-		if (!chartId || !legendInteractive) return dataSorted.map((series, index) => ({
-			series,
-			index,
-			isVisible: true
-		}));
 		return dataSorted.map((series, index) => ({
 			series,
 			index,
-			isVisible: isSeriesVisible(chartId, series.label)
+			isVisible: !hiddenSeries.has(series.label)
 		}));
-	}, [
-		dataSorted,
-		chartId,
-		isSeriesVisible,
-		legendInteractive
-	]);
+	}, [dataSorted, hiddenSeries]);
 	const allSeriesHidden = (0, react.useMemo)(() => {
 		return seriesWithVisibility.every(({ isVisible }) => !isVisible);
 	}, [seriesWithVisibility]);
 	const stableYDomain = (0, react.useMemo)(() => {
-		if (!legendInteractive || rescaleYOnVisibilityChange) return;
+		if (rescaleYOnVisibilityChange) return;
 		let min = Infinity;
 		let max = -Infinity;
 		for (const series of dataSorted) for (const point of series.data ?? []) {
@@ -3228,11 +3483,7 @@ const LineChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 			}
 		}
 		return min < max ? [min, max] : void 0;
-	}, [
-		legendInteractive,
-		rescaleYOnVisibilityChange,
-		dataSorted
-	]);
+	}, [rescaleYOnVisibilityChange, dataSorted]);
 	const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation({
 		selectedIndex,
 		setSelectedIndex,
@@ -3356,10 +3607,11 @@ const LineChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 		chartId,
 		interactive: legendInteractive
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SingleChartContext.Provider, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartInstanceContext.Provider, {
 		value: {
 			chartId,
 			chartRef: internalChartRef,
+			isSeriesVisible,
 			chartWidth: width,
 			chartHeight: measuredChartHeight || 0
 		},
@@ -3414,7 +3666,7 @@ const LineChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 									y: chartHeight / 2,
 									width,
 									height: chartHeight,
-									children: (0, _wordpress_i18n.__)("All series are hidden. Click legend items to show data.", "jetpack-charts")
+									children: getAllHiddenMessage(legendInteractive, "series")
 								}) : null,
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZoomClip, {
 									active: zoomable && !!zoom.domain,
@@ -3616,7 +3868,7 @@ const HoverGlyphs = ({ visibleSeries, stacked, stackOffset, getElementStyles, st
 };
 //#endregion
 //#region src/charts/area-chart/area-chart.tsx
-const AreaChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartId, width, height, className, margin, withTooltips = true, withTooltipCrosshairs, showLegend = false, legend = {}, stacked = true, stackOffset = "none", smoothing = true, curveType, fillOpacity, withStroke, renderTooltip = renderDefaultTooltip, animation, options = {}, onPointerDown, onPointerUp, onPointerMove, onPointerOut, zoomable = false, rescaleYOnVisibilityChange, rescaleYOnLegendToggle, children, gridVisibility, gap = "md" }, ref) => {
+const AreaChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartId, width, height, className, margin, withTooltips = true, withTooltipCrosshairs, showLegend = false, legend = {}, stacked = true, stackOffset = "none", smoothing = true, curveType, fillOpacity, withStroke, renderTooltip = renderDefaultTooltip, animation, options = {}, onPointerDown, onPointerUp, onPointerMove, onPointerOut, zoomable = false, rescaleYOnVisibilityChange, rescaleYOnLegendToggle, defaultHiddenSeries, children, gridVisibility, gap = "md" }, ref) => {
 	const legendInteractive = legend.interactive ?? false;
 	const legendShape = legend.shape ?? "rect";
 	const legendPosition = legend.position ?? "bottom";
@@ -3624,6 +3876,8 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 	const providerTheme = useGlobalChartsTheme();
 	const theme = useXYChartTheme(data);
 	const chartId = useChartId(providedChartId);
+	const hiddenSeries = useDefaultHiddenSeries(chartId, defaultHiddenSeries);
+	const isSeriesVisible = (0, react.useCallback)((seriesLabel) => !hiddenSeries.has(seriesLabel), [hiddenSeries]);
 	const chartRef = (0, react.useRef)(null);
 	const [selectedIndex, setSelectedIndex] = (0, react.useState)(void 0);
 	const [isNavigating, setIsNavigating] = (0, react.useState)(false);
@@ -3651,24 +3905,14 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 		}
 	}), [internalChartRef]);
 	const dataSorted = useChartDataTransform(data);
-	const { getElementStyles, isSeriesVisible } = useGlobalChartsContext();
+	const { getElementStyles } = useGlobalChartsContext();
 	const seriesWithVisibility = (0, react.useMemo)(() => {
-		if (!chartId || !legendInteractive) return dataSorted.map((series, index) => ({
-			series,
-			index,
-			isVisible: true
-		}));
 		return dataSorted.map((series, index) => ({
 			series,
 			index,
-			isVisible: isSeriesVisible(chartId, series.label)
+			isVisible: !hiddenSeries.has(series.label)
 		}));
-	}, [
-		dataSorted,
-		chartId,
-		isSeriesVisible,
-		legendInteractive
-	]);
+	}, [dataSorted, hiddenSeries]);
 	const allSeriesHidden = (0, react.useMemo)(() => seriesWithVisibility.every(({ isVisible }) => !isVisible), [seriesWithVisibility]);
 	const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation({
 		selectedIndex,
@@ -3679,7 +3923,7 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 		totalPoints: dataSorted[0]?.data.length || 0
 	});
 	const fixedYDomain = (0, react.useMemo)(() => {
-		if (rescaleYOnVisibility || !legendInteractive || !dataSorted.length || !dataSorted[0].data.length || stacked && stackOffset !== "none") return;
+		if (rescaleYOnVisibility || !dataSorted.length || !dataSorted[0].data.length || stacked && stackOffset !== "none") return;
 		if (stacked) {
 			const numPoints = Math.max(...dataSorted.map((s) => s.data.length));
 			let posMax = 0;
@@ -3713,7 +3957,6 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 		dataSorted,
 		stacked,
 		stackOffset,
-		legendInteractive,
 		rescaleYOnVisibility
 	]);
 	const chartOptions = (0, react.useMemo)(() => {
@@ -3790,7 +4033,6 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 	const zeroYAccessor = (0, react.useCallback)(() => 0, []);
 	const visibleLabels = (0, react.useMemo)(() => new Set(seriesWithVisibility.filter((s) => s.isVisible).map((s) => s.series.label)), [seriesWithVisibility]);
 	const filteredRenderTooltip = (0, react.useCallback)((params) => {
-		if (!legendInteractive) return renderTooltip(params);
 		const datumByKey = params?.tooltipData?.datumByKey;
 		if (!datumByKey) return renderTooltip(params);
 		const filtered = Object.fromEntries(Object.entries(datumByKey).filter(([key]) => visibleLabels.has(key)));
@@ -3808,11 +4050,7 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 				nearestDatum: nextNearest
 			}
 		});
-	}, [
-		renderTooltip,
-		legendInteractive,
-		visibleLabels
-	]);
+	}, [renderTooltip, visibleLabels]);
 	const resolvedFillOpacity = fillOpacity ?? (stacked ? .85 : .4);
 	const resolvedWithStroke = withStroke ?? !stacked;
 	if (error) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -3843,7 +4081,7 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 			dataKey: seriesData?.label,
 			data: seriesData.data,
 			xAccessor: accessors.xAccessor,
-			yAccessor: isVisible || !legendInteractive ? accessors.yAccessor : zeroYAccessor,
+			yAccessor: isVisible ? accessors.yAccessor : zeroYAccessor,
 			fill: color,
 			fillOpacity: resolvedFillOpacity,
 			...stacked ? {} : {
@@ -3856,10 +4094,11 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 			}
 		}, seriesData?.label || index);
 	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SingleChartContext.Provider, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartInstanceContext.Provider, {
 		value: {
 			chartId,
 			chartRef: internalChartRef,
+			isSeriesVisible,
 			chartWidth: width,
 			chartHeight: measuredChartHeight || 0
 		},
@@ -3914,7 +4153,7 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 									y: chartHeight / 2,
 									width,
 									height: chartHeight,
-									children: (0, _wordpress_i18n.__)("All series are hidden. Click legend items to show data.", "jetpack-charts")
+									children: getAllHiddenMessage(legendInteractive, "series")
 								}) : null,
 								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ZoomClip, {
 									active: zoomable,
@@ -4468,11 +4707,13 @@ const renderTooltipRow = (label, value) => /* @__PURE__ */ (0, react_jsx_runtime
 	className: bar_chart_module_default["bar-chart__tooltip-row"],
 	children: (0, _wordpress_i18n.sprintf)((0, _wordpress_i18n.__)("%1$s: %2$s", "jetpack-charts"), label, value)
 });
-const BarChartInternal = ({ data, chartId: providedChartId, width, height, className, margin, withTooltips = false, showLegend = false, legend = {}, gridVisibility: gridVisibilityProp, renderTooltip, options = {}, orientation = "vertical", withPatterns = false, showZeroValues = false, animation, children, gap = "md" }) => {
+const BarChartInternal = ({ data, chartId: providedChartId, width, height, className, margin, withTooltips = false, showLegend = false, legend = {}, gridVisibility: gridVisibilityProp, renderTooltip, options = {}, orientation = "vertical", withPatterns = false, showZeroValues = false, defaultHiddenSeries, animation, children, gap = "md" }) => {
 	const legendInteractive = legend.interactive ?? false;
 	const legendCollapseGroups = legend.collapseGroups ?? false;
 	const horizontal = orientation === "horizontal";
 	const chartId = useChartId(providedChartId);
+	const hiddenSeries = useDefaultHiddenSeries(chartId, defaultHiddenSeries);
+	const isSeriesVisible = (0, react.useCallback)((seriesLabel) => !hiddenSeries.has(seriesLabel), [hiddenSeries]);
 	const theme = useXYChartTheme(data);
 	const dataSorted = useChartDataTransform(data);
 	const dataWithVisibleZeros = useZeroValueDisplay(dataSorted, {
@@ -4480,12 +4721,8 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 		valueAxisLength: horizontal ? width : height
 	});
 	const legendItems = useChartLegendItems(dataSorted, (0, react.useMemo)(() => ({ collapseGroups: legendCollapseGroups }), [legendCollapseGroups]));
-	const { getElementStyles, isSeriesVisible } = useGlobalChartsContext();
-	const isSeriesRendered = (0, react.useCallback)((series) => !chartId || !legendInteractive || isSeriesVisible(chartId, series.label), [
-		chartId,
-		legendInteractive,
-		isSeriesVisible
-	]);
+	const { getElementStyles } = useGlobalChartsContext();
+	const isSeriesRendered = (0, react.useCallback)((series) => isSeriesVisible(series.label), [isSeriesVisible]);
 	const chartOptions = useBarChartOptions(dataWithVisibleZeros, horizontal, options, isSeriesRendered);
 	const defaultMargin = useChartMargin(height, chartOptions, dataSorted, theme, horizontal);
 	const chartRef = (0, react.useRef)(null);
@@ -4721,9 +4958,10 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 		chartId,
 		interactive: legendInteractive
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SingleChartContext.Provider, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartInstanceContext.Provider, {
 		value: {
 			chartId,
+			isSeriesVisible,
 			chartWidth: width,
 			chartHeight: measuredChartHeight || 0
 		},
@@ -4782,7 +5020,7 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 									y: chartHeight / 2,
 									width,
 									height: chartHeight,
-									children: (0, _wordpress_i18n.__)("All series are hidden. Click legend items to show data.", "jetpack-charts")
+									children: getAllHiddenMessage(legendInteractive, "series")
 								}) : null,
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComparisonBars, {
 									comparisonEntries,
@@ -5069,12 +5307,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 +5468,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 +5480,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 +5566,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 +5716,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 +5749,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,
@@ -5583,12 +5833,27 @@ const GeoChartWithProvider = (props) => {
 GeoChartWithProvider.displayName = "GeoChart";
 const GeoChartResponsive = withResponsive(GeoChartWithProvider);
 //#endregion
+//#region src/types.ts
+let GoogleDataTableColumnRoleType = /* @__PURE__ */ function(GoogleDataTableColumnRoleType) {
+	GoogleDataTableColumnRoleType["annotation"] = "annotation";
+	GoogleDataTableColumnRoleType["annotationText"] = "annotationText";
+	GoogleDataTableColumnRoleType["certainty"] = "certainty";
+	GoogleDataTableColumnRoleType["emphasis"] = "emphasis";
+	GoogleDataTableColumnRoleType["interval"] = "interval";
+	GoogleDataTableColumnRoleType["scope"] = "scope";
+	GoogleDataTableColumnRoleType["style"] = "style";
+	GoogleDataTableColumnRoleType["tooltip"] = "tooltip";
+	GoogleDataTableColumnRoleType["domain"] = "domain";
+	return GoogleDataTableColumnRoleType;
+}({});
+//#endregion
 //#region src/charts/heatmap-chart/heatmap-chart.module.scss
 var heatmap_chart_module_default = {
 	"heatmap-chart": "a8ccharts-O3YMOW-heatmap-chart",
 	"heatmap-chart__cell": "a8ccharts-O3YMOW-heatmap-chart__cell",
 	"heatmap-chart__cell--filled": "a8ccharts-O3YMOW-heatmap-chart__cell--filled",
 	"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-value": "a8ccharts-O3YMOW-heatmap-chart__cell-value",
@@ -5644,6 +5909,22 @@ const LABELLED_ROWS = [
 	2,
 	4
 ];
+/**
+* Resolve one grid bound: an unparseable or narrowing value falls back to the
+* series' own bound, so the grid can only ever be widened.
+*
+* @param bound     - Requested bound as `yyyy-MM-dd`, if any.
+* @param fallback  - The series' own bound on this side.
+* @param direction - Which way the bound is allowed to move.
+* @return The bound to draw to.
+*/
+const widenTo = (bound, fallback, direction) => {
+	if (!bound) return fallback;
+	const parsed = (0, date_fns.parseISO)(bound);
+	if (isNaN(parsed.getTime())) return fallback;
+	if (direction === "earlier") return parsed < fallback ? parsed : fallback;
+	return parsed > fallback ? parsed : fallback;
+};
 const toDate = (point) => {
 	if (point.date instanceof Date && !isNaN(point.date.getTime())) return point.date;
 	if (point.dateString) {
@@ -5671,10 +5952,14 @@ const buildCalendarHeatmapData = (series, options = {}) => {
 		if (date < minDate) minDate = date;
 		if (date > maxDate) maxDate = date;
 	}
-	const gridStart = (0, date_fns.startOfWeek)(minDate, { weekStartsOn });
-	const weekCount = (0, date_fns.differenceInCalendarWeeks)(maxDate, gridStart, { weekStartsOn }) + 1;
 	const minDayKey = (0, date_fns.format)(minDate, "yyyy-MM-dd");
 	const maxDayKey = (0, date_fns.format)(maxDate, "yyyy-MM-dd");
+	const gridMinDate = widenTo(options.gridSpan?.start, minDate, "earlier");
+	const gridMaxDate = widenTo(options.gridSpan?.end, maxDate, "later");
+	const gridMaxDayKey = (0, date_fns.format)(gridMaxDate, "yyyy-MM-dd");
+	const gridStart = (0, date_fns.startOfWeek)(gridMinDate, { weekStartsOn });
+	const gridMinDayKey = (0, date_fns.format)(gridMinDate < minDate ? gridStart : gridMinDate, "yyyy-MM-dd");
+	const weekCount = (0, date_fns.differenceInCalendarWeeks)(gridMaxDate, gridStart, { weekStartsOn }) + 1;
 	const rowLabels = Array.from({ length: 7 }, (_, row) => LABELLED_ROWS.includes(row) ? (0, date_fns.format)((0, date_fns.addDays)(gridStart, row), "EEE") : "");
 	const MIN_FIRST_MONTH_WEEKS = 2;
 	const firstMonth = gridStart.getMonth();
@@ -5696,7 +5981,9 @@ const buildCalendarHeatmapData = (series, options = {}) => {
 				label: (0, date_fns.format)(day, "EEE, MMM d, yyyy"),
 				value: valueByDay.has(key) ? valueByDay.get(key) : null
 			};
-			if (hideOutOfRangeDays && (key < minDayKey || key > maxDayKey)) cell.hidden = true;
+			if (key < gridMinDayKey || key > gridMaxDayKey) {
+				if (hideOutOfRangeDays) cell.hidden = true;
+			} else if (key < minDayKey || key > maxDayKey) cell.placeholder = true;
 			cells.push(cell);
 		}
 		data.push({
@@ -5760,7 +6047,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 +6063,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]);
@@ -5802,7 +6090,10 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 		setSelectedIndex(void 0);
 		hideTooltip();
 	}, [hideTooltip]);
-	const isCellHidden = (0, react.useCallback)((col, row) => data[col]?.data[row]?.hidden === true, [data]);
+	const isCellInert = (0, react.useCallback)((col, row) => {
+		const cell = data[col]?.data[row];
+		return cell?.hidden === true || cell?.placeholder === true;
+	}, [data]);
 	const onChartKeyDown = (0, react.useCallback)((event) => {
 		if (![
 			"ArrowLeft",
@@ -5819,7 +6110,7 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 		}
 		event.preventDefault();
 		if (selectedIndex === void 0) {
-			for (let index = 0; index < columns * rows; index++) if (!isCellHidden(Math.floor(index / rows), index % rows)) {
+			for (let index = 0; index < columns * rows; index++) if (!isCellInert(Math.floor(index / rows), index % rows)) {
 				setSelectedIndex(index);
 				return;
 			}
@@ -5836,7 +6127,7 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 		do {
 			col += stepCol;
 			row += stepRow;
-		} while (col >= 0 && col < columns && row >= 0 && row < rows && isCellHidden(col, row));
+		} while (col >= 0 && col < columns && row >= 0 && row < rows && isCellInert(col, row));
 		if (col < 0 || col >= columns || row < 0 || row >= rows) return;
 		setSelectedIndex(col * rows + row);
 	}, [
@@ -5844,7 +6135,7 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 		columns,
 		selectedIndex,
 		hideTooltip,
-		isCellHidden
+		isCellInert
 	]);
 	const handleCellMouseMove = (0, react.useCallback)((event) => {
 		if (!withTooltips) return;
@@ -5916,7 +6207,7 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 	const heightCapped = !compact && Boolean(maxCellHeight);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HeatmapContext.Provider, {
 		value: heatmapContext,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SingleChartContext.Provider, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartInstanceContext.Provider, {
 			value: { chartId },
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ChartLayout, {
 				legendPosition: "bottom",
@@ -5968,6 +6259,10 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 									"aria-hidden": "true",
 									className: (0, clsx.default)(heatmap_chart_module_default["heatmap-chart__cell"], heatmap_chart_module_default["heatmap-chart__cell--hidden"])
 								}, `cell-${columnIndex}-${rowIndex}`);
+								if (cell?.placeholder) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									"aria-hidden": "true",
+									className: (0, clsx.default)(heatmap_chart_module_default["heatmap-chart__cell"], heatmap_chart_module_default["heatmap-chart__cell--placeholder"])
+								}, `cell-${columnIndex}-${rowIndex}`);
 								const value = cell?.value ?? null;
 								const present = isPresent(value);
 								const normalized = present ? getNormalizedValue(value, extent) : 0;
@@ -6002,6 +6297,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)
@@ -8965,29 +9261,25 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 		legendLabels
 	});
 	const isPrimaryVisible = (0, react.useMemo)(() => {
-		if (!chartId || !legendInteractive || legendItems.length === 0) return true;
+		if (legendItems.length === 0) return true;
 		return isSeriesVisible(chartId, legendItems[0].label);
 	}, [
 		chartId,
-		legendInteractive,
 		legendItems,
 		isSeriesVisible
 	]);
 	const isComparisonVisible = (0, react.useMemo)(() => {
-		if (!chartId || !legendInteractive || legendItems.length < 2) return true;
+		if (legendItems.length < 2) return true;
 		return isSeriesVisible(chartId, legendItems[1].label);
 	}, [
 		chartId,
-		legendInteractive,
 		legendItems,
 		isSeriesVisible
 	]);
 	const allSeriesHidden = (0, react.useMemo)(() => {
-		if (!legendInteractive) return false;
 		if (withComparison && !withOverlayLabel) return !isPrimaryVisible && !isComparisonVisible;
 		return !isPrimaryVisible;
 	}, [
-		legendInteractive,
 		isPrimaryVisible,
 		isComparisonVisible,
 		withComparison,
@@ -9006,7 +9298,7 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 	const prefersReducedMotion = usePrefersReducedMotion();
 	const { contentRef, fittedCount, isMeasurable } = useFittedRowCount(fitRows && !allSeriesHidden, data?.length ?? 0, data);
 	const shouldFitRows = fitRows && isMeasurable;
-	if (!data || data.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SingleChartContext.Provider, {
+	if (!data || data.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartInstanceContext.Provider, {
 		value: { chartId },
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartLayout, {
 			legendPosition,
@@ -9041,7 +9333,7 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 		chartId,
 		interactive: legendInteractive
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SingleChartContext.Provider, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartInstanceContext.Provider, {
 		value: { chartId },
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartLayout, {
 			legendPosition,
@@ -9066,7 +9358,7 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 					children: (0, _wordpress_i18n.__)("Not enough space to display data", "jetpack-charts")
 				}), allSeriesHidden ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: leaderboard_chart_module_default.emptyState,
-					children: (0, _wordpress_i18n.__)("All series are hidden. Click legend items to show data.", "jetpack-charts")
+					children: getAllHiddenMessage(legendInteractive, "series")
 				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(component_default, {
 					templateColumns: "minmax(0, 1fr) auto",
 					rowGap,
@@ -9256,10 +9548,9 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
 		hideTooltip();
 	}, [withTooltips, hideTooltip]);
 	const { getElementStyles, isSeriesVisible } = useGlobalChartsContext();
-	const { visibleData, allSegmentsHidden, legendData } = useInteractiveLegendData({
+	const { visibleData, allSegmentsHidden, legendData } = useLegendVisibilityData({
 		data: useDataWithPercentages(data),
 		chartId,
-		legendInteractive,
 		isSeriesVisible
 	});
 	const legendItems = useChartLegendItems(legendData, (0, react.useMemo)(() => ({
@@ -9320,7 +9611,7 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
 		chartId,
 		interactive: legendInteractive
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SingleChartContext.Provider, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartInstanceContext.Provider, {
 		value: { chartId },
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartLayout, {
 			legendPosition,
@@ -9337,6 +9628,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 })
 					})
@@ -9376,7 +9668,7 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
 								y: 0,
 								width,
 								height,
-								children: (0, _wordpress_i18n.__)("All segments are hidden. Click legend items to show data.", "jetpack-charts")
+								children: getAllHiddenMessage(legendInteractive, "segments")
 							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_shape.Pie, {
 								data: dataWithIndex,
 								pieValue: accessors.value,
@@ -9548,10 +9840,9 @@ const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width: pro
 	}, [handleMouseMove]);
 	const { isValid, message } = validateData(data);
 	const { getElementStyles, isSeriesVisible } = useGlobalChartsContext();
-	const { visibleData, allSegmentsHidden, legendData } = useInteractiveLegendData({
+	const { visibleData, allSegmentsHidden, legendData } = useLegendVisibilityData({
 		data: useDataWithPercentages(data),
 		chartId,
-		legendInteractive,
 		isSeriesVisible
 	});
 	const accessors = (0, react.useMemo)(() => ({
@@ -9618,7 +9909,7 @@ const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width: pro
 		chartId,
 		interactive: legendInteractive
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SingleChartContext.Provider, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartInstanceContext.Provider, {
 		value: { chartId },
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartLayout, {
 			legendPosition,
@@ -9635,6 +9926,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 })
 					})
@@ -9670,7 +9962,7 @@ const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width: pro
 								y: -radius / 2,
 								width,
 								height,
-								children: (0, _wordpress_i18n.__)("All segments are hidden. Click legend items to show data.", "jetpack-charts")
+								children: getAllHiddenMessage(legendInteractive, "segments")
 							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_shape.Pie, {
 									data: dataWithIndex,
@@ -9922,7 +10214,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", {
@@ -9945,6 +10237,7 @@ exports.GeoChart = GeoChartResponsive;
 exports.GeoChartUnresponsive = GeoChartWithProvider;
 exports.GlobalChartsContext = GlobalChartsContext;
 exports.GlobalChartsProvider = GlobalChartsProvider;
+exports.GoogleDataTableColumnRoleType = GoogleDataTableColumnRoleType;
 exports.HeatmapChart = HeatmapChartResponsive;
 exports.HeatmapChartUnresponsive = HeatmapChart;
 exports.LeaderboardChart = LeaderboardChartResponsive;
@@ -9976,7 +10269,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;