@automattic/charts 4.9.0 → 4.10.0

package/dist/index.js

@@ -669,16 +669,17 @@ function readCustomProperty(varName, styles) {
 }
 //#endregion
 //#region src/utils/resolve-font-size.ts
+const toFontSize = (size) => Number.isFinite(size) && size >= 0 ? size : void 0;
 /**
 * Resolve a theme `fontSize` value into a plain number suitable for
 * canvas-based measurement (e.g. `getStringWidth`).
 *
 * Accepts:
-* - A number — returned as-is
+* - A finite, non-negative number — returned as-is
 * - A pixel string like `"12px"` — parsed and returned as a number
 *
-* Returns `undefined` for any other input (missing value, NaN, or
-* relative units like `rem`/`em`/`%`/`vh`) so callers can fall back to
+* Returns `undefined` for any other input (missing value, a non-finite or
+* negative size, or relative units like `rem`/`em`/`%`/`vh`) so callers can fall back to
 * their own default. Relative units are intentionally rejected because
 * we cannot resolve them to absolute pixels here without a parent
 * computed style, and silently returning the unitless prefix
@@ -688,12 +689,10 @@ function readCustomProperty(varName, styles) {
 * @return Parsed numeric font size in pixels, or `undefined` when unresolvable
 */
 const resolveFontSize = (val) => {
-	if (typeof val === "number") return isNaN(val) ? void 0 : val;
+	if (typeof val === "number") return toFontSize(val);
 	if (typeof val === "string") {
-		const match = val.trim().match(/^(-?\d+\.?\d*|-?\.\d+)(px)?$/);
-		if (!match) return;
-		const parsed = parseFloat(match[1]);
-		return isNaN(parsed) ? void 0 : parsed;
+		const match = val.trim().match(/^\+?((?:\d*\.)?\d+)(px)?$/);
+		return match ? toFontSize(parseFloat(match[1])) : void 0;
 	}
 };
 //#endregion
@@ -1572,6 +1571,20 @@ const useChartScopeElement = () => useContext(ChartScopeContext);
 const useStandaloneScopeClass = () => useContext(GlobalChartsContext) ? void 0 : CHART_SCOPE_CLASS;
 //#endregion
 //#region src/hooks/use-xychart-theme.ts
+const STARTS_LIKE_A_NUMBER = /^[+-]?[\d.]/;
+const NON_NEGATIVE_CSS_NUMBER = /^\+?(?:\d*\.)?\d+(?:e[+-]?\d+)?(?:[a-z]+|%)?$/i;
+const isRenderableFontSize = (fontSize) => {
+	if (typeof fontSize === "number") return resolveFontSize(fontSize) !== void 0;
+	const value = fontSize.trim();
+	if (!STARTS_LIKE_A_NUMBER.test(value)) return true;
+	return NON_NEGATIVE_CSS_NUMBER.test(value) && Number.isFinite(parseFloat(value));
+};
+const withRenderableFontSize = (style) => {
+	if (style?.fontSize === void 0 || isRenderableFontSize(style.fontSize)) return style;
+	const rest = { ...style };
+	delete rest.fontSize;
+	return rest;
+};
 const useXYChartTheme = (data) => {
 	const theme = useGlobalChartsTheme();
 	const scopeElement = useChartScopeElement();
@@ -1602,9 +1615,10 @@ const useXYChartTheme = (data) => {
 			yAxisLineStyles: { stroke: CATALOG_POINTERS.axisY },
 			yTickLineStyles: { stroke: CATALOG_POINTERS.tickY },
 			svgLabelSmall: {
-				...theme.svgLabelSmall,
+				...withRenderableFontSize(theme.svgLabelSmall),
 				fill: CATALOG_POINTERS.labelAxis
-			}
+			},
+			svgLabelBig: withRenderableFontSize(theme.svgLabelBig)
 		});
 	}, [
 		theme,
@@ -2117,7 +2131,7 @@ const getLegendItemAriaLabel = (text, value, visible, interactive) => {
 	if (visible) return;
 	return sprintf(_x("%s: hidden", "hidden non-interactive legend item", "jetpack-charts"), accessibleText);
 };
-const BaseLegend = forwardRef(({ items, className, orientation = "horizontal", alignment = "center", shape = "rect", fill = valueOrIdentityString, size = valueOrIdentityString, labelFormat = valueOrIdentity, labelTransform, itemStyles, itemClassName, labelStyles, labelClassName, shapeStyles, render, interactive = false, chartId }, ref) => {
+const BaseLegend = forwardRef(({ items: allItems, className, orientation = "horizontal", alignment = "center", shape = "rect", fill = valueOrIdentityString, size = valueOrIdentityString, labelFormat = valueOrIdentity, labelTransform, 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 ?? {};
@@ -2125,6 +2139,16 @@ const BaseLegend = forwardRef(({ items, className, orientation = "horizontal", a
 	const context = useContext(GlobalChartsContext);
 	const chartInstanceContext = useContext(ChartInstanceContext);
 	const standaloneScopeClass = useStandaloneScopeClass();
+	const isSeriesVisible = useCallback((seriesLabel) => {
+		if (chartInstanceContext?.isSeriesVisible) return chartInstanceContext.isSeriesVisible(seriesLabel);
+		if (!chartId || !context) return true;
+		return context.isSeriesVisible(chartId, seriesLabel);
+	}, [
+		chartId,
+		chartInstanceContext,
+		context
+	]);
+	const items = useMemo(() => allItems.filter((item) => item.interactive !== false || !item.describesSeries || isSeriesVisible(item.describesSeries)), [allItems, isSeriesVisible]);
 	const domain = items.map((item) => item.label);
 	const legendScale = scaleOrdinal({
 		domain,
@@ -2147,15 +2171,6 @@ const BaseLegend = forwardRef(({ items, className, orientation = "horizontal", a
 		chartId,
 		context
 	]);
-	const isSeriesVisible = useCallback((seriesLabel) => {
-		if (chartInstanceContext?.isSeriesVisible) return chartInstanceContext.isSeriesVisible(seriesLabel);
-		if (!chartId || !context) return true;
-		return context.isSeriesVisible(chartId, seriesLabel);
-	}, [
-		chartId,
-		chartInstanceContext,
-		context
-	]);
 	const createClickHandler = useCallback((seriesLabels, itemInteractive) => {
 		if (!itemInteractive) return;
 		return () => handleLegendClick(seriesLabels);
@@ -2430,6 +2445,34 @@ function buildComparisonLegendItem(seriesData, items, label, getElementStyles, l
 	};
 }
 /**
+* Builds one static item per comparison series folded into another series' item, named after
+* that item and styled like the comparison series itself.
+* @param seriesData       - The series data to search for comparison series
+* @param items            - The legend items already built from the series
+* @param formatLabel      - Names an item after the label of the item it was folded into
+* @param getElementStyles - Function to get element styles
+* @param legendShape      - The shape type for legend items (string literal or React component)
+* @return The legend items, in series order
+*/
+function buildPerSeriesComparisonItems(seriesData, items, formatLabel, getElementStyles, legendShape) {
+	return seriesData.flatMap((series, index) => {
+		const owner = items.find((item) => item.seriesLabels?.includes(series.label));
+		if (series.options?.type !== "comparison" || !owner || owner.seriesLabels?.[0] === series.label) return [];
+		const { color, shapeStyles } = getElementStyles({
+			data: series,
+			index,
+			legendShape
+		});
+		return [{
+			label: formatLabel(owner.label),
+			color,
+			shapeStyle: shapeStyles,
+			interactive: false,
+			describesSeries: series.label
+		}];
+	});
+}
+/**
 * Processes point data into legend items
 * @param pointData          - The point data to process
 * @param getElementStyles   - Function to get element styles
@@ -2465,13 +2508,14 @@ function processPointData(pointData, getElementStyles, showValues, legendValueDi
 * @return Array of legend items ready for display
 */
 function useChartLegendItems(data, options = {}, legendShape) {
-	const { showValues = false, legendValueDisplay = "percentage", withGlyph = false, glyphSize = 8, collapseGroups = false, comparisonItem = false, renderGlyph } = options;
+	const { showValues = false, legendValueDisplay = "percentage", withGlyph = false, glyphSize = 8, collapseGroups = false, comparisonItem = false, comparisonSeriesItems, renderGlyph } = options;
 	const { getElementStyles } = useGlobalChartsContext();
 	return useMemo(() => {
 		if (!data || !Array.isArray(data) || data.length === 0) return [];
 		if ("data" in data[0]) {
 			const seriesData = data;
 			const items = processSeriesData(seriesData, getElementStyles, showValues, withGlyph, glyphSize, collapseGroups, renderGlyph, legendShape);
+			if (comparisonSeriesItems) return [...items, ...buildPerSeriesComparisonItems(seriesData, items, comparisonSeriesItems, getElementStyles, legendShape)];
 			const comparison = comparisonItem ? buildComparisonLegendItem(seriesData, items, typeof comparisonItem === "string" ? comparisonItem : __("Comparison period", "jetpack-charts"), getElementStyles, legendShape) : null;
 			return comparison ? [...items, comparison] : items;
 		}
@@ -2485,6 +2529,7 @@ function useChartLegendItems(data, options = {}, legendShape) {
 		glyphSize,
 		collapseGroups,
 		comparisonItem,
+		comparisonSeriesItems,
 		renderGlyph,
 		legendShape
 	]);
@@ -4726,6 +4771,7 @@ const LineChartInternal = forwardRef(({ data, ariaLabel, chartId: providedChartI
 	const legendInteractive = legend.interactive ?? false;
 	const legendCollapseGroups = legend.collapseGroups ?? false;
 	const legendComparisonItem = legend.comparisonItem ?? false;
+	const legendComparisonSeriesItems = legend.comparisonSeriesItems;
 	const legendShape = legend.shape ?? "line";
 	const legendPosition = legend.position ?? "bottom";
 	const formatting = useChartFormatting();
@@ -4910,12 +4956,14 @@ const LineChartInternal = forwardRef(({ data, ariaLabel, chartId: providedChartI
 		glyphSize: Math.max(0, toNumber(glyphStyle?.radius) ?? 4),
 		collapseGroups: legendCollapseGroups,
 		comparisonItem: legendComparisonItem,
+		comparisonSeriesItems: legendComparisonSeriesItems,
 		renderGlyph
 	}), [
 		withLegendGlyph,
 		glyphStyle?.radius,
 		legendCollapseGroups,
 		legendComparisonItem,
+		legendComparisonSeriesItems,
 		renderGlyph
 	]), legendShape);
 	const chartMetadata = useMemo(() => ({
@@ -5384,8 +5432,13 @@ const AreaChartInternal = forwardRef(({ data, ariaLabel, chartId: providedChartI
 		withGlyph: false,
 		glyphSize: 0,
 		collapseGroups: legend.collapseGroups ?? false,
-		comparisonItem: legend.comparisonItem ?? false
-	}), [legend.collapseGroups, legend.comparisonItem]), legendShape);
+		comparisonItem: legend.comparisonItem ?? false,
+		comparisonSeriesItems: legend.comparisonSeriesItems
+	}), [
+		legend.collapseGroups,
+		legend.comparisonItem,
+		legend.comparisonSeriesItems
+	]), legendShape);
 	const chartMetadata = useMemo(() => ({
 		stacked,
 		stackOffset,
@@ -6378,6 +6431,7 @@ const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, he
 	const legendInteractive = legend.interactive ?? false;
 	const legendCollapseGroups = legend.collapseGroups ?? false;
 	const legendComparisonItem = legend.comparisonItem ?? false;
+	const legendComparisonSeriesItems = legend.comparisonSeriesItems;
 	const horizontal = orientation === "horizontal";
 	const chartId = useChartId(providedChartId);
 	const hiddenSeries = useDefaultHiddenSeries(chartId, defaultHiddenSeries);
@@ -6390,8 +6444,13 @@ const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, he
 	});
 	const legendItems = useChartLegendItems(dataSorted, useMemo(() => ({
 		collapseGroups: legendCollapseGroups,
-		comparisonItem: legendComparisonItem
-	}), [legendCollapseGroups, legendComparisonItem]));
+		comparisonItem: legendComparisonItem,
+		comparisonSeriesItems: legendComparisonSeriesItems
+	}), [
+		legendCollapseGroups,
+		legendComparisonItem,
+		legendComparisonSeriesItems
+	]));
 	const { getElementStyles } = useGlobalChartsContext();
 	const isSeriesRendered = useCallback((series) => isSeriesVisible(series.label), [isSeriesVisible]);
 	const hasWholeNumberValues = useMemo(() => hasOnlyWholeNumbers(dataSorted.filter(isSeriesRendered)), [dataSorted, isSeriesRendered]);
@@ -6902,7 +6961,7 @@ const BarListChartInternal = ({ data, width, height, options = {}, margin = {
 	right: 20,
 	bottom: 0,
 	top: 0
-}, className, ...rest }) => {
+}, className, ariaLabel, ...rest }) => {
 	const { getElementStyles } = useGlobalChartsContext();
 	const tintedData = useMemo(() => {
 		if (data.length > 1) return data;
@@ -6977,6 +7036,7 @@ const BarListChartInternal = ({ data, width, height, options = {}, margin = {
 			xScale: chartOptions.xScale,
 			yScale: chartOptions.yScale
 		},
+		ariaLabel: ariaLabel ?? __("Bar list chart", "jetpack-charts"),
 		...rest
 	});
 };
@@ -7052,6 +7112,8 @@ const useFunnelSelection = (hideTooltip) => {
 };
 //#endregion
 //#region src/charts/conversion-funnel-chart/conversion-funnel-chart.tsx
+/** Chart height (px) below which the funnel tightens its gaps so the bars keep their room. */
+const SHORT_CHART_HEIGHT = 180;
 /**
 * Internal ConversionFunnelChart component with chart registration
 *
@@ -7063,6 +7125,7 @@ const useFunnelSelection = (hideTooltip) => {
 * @param props.loading          - Whether the chart is in loading state
 * @param props.animation        - Whether to show chart animation on initial render or not
 * @param props.className        - Additional CSS class name
+* @param props.ariaLabel        - Accessible name for the chart group
 * @param props.height           - Height of the chart container. Falls back to style.height if set, otherwise defaults to "100%".
 * @param props.style            - Custom styling
 * @param props.renderStepLabel  - Custom render function for step labels
@@ -7072,7 +7135,7 @@ const useFunnelSelection = (hideTooltip) => {
 * @param props.tooltipStyle     - Inline styles merged over the tooltip box defaults
 * @return JSX element representing the conversion funnel chart
 */
-const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loading = false, animation, className, chartId: providedChartId, height, style, renderStepLabel, renderStepRate, renderMainMetric, renderTooltip, tooltipStyle }) => {
+const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loading = false, animation, className, ariaLabel, chartId: providedChartId, height, style, renderStepLabel, renderStepRate, renderMainMetric, renderTooltip, tooltipStyle }) => {
 	const chartId = useChartId(providedChartId);
 	const { getElementStyles, isColorPaletteResolved } = useGlobalChartsContext();
 	const chartRef = useRef(null);
@@ -7081,10 +7144,13 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 	const { tooltipData, tooltipLeft, tooltipTop, tooltipOpen, showTooltip, hideTooltip } = useTooltip();
 	const { handleBarClick, handleBarKeyDown, clearSelection, getStepState } = useFunnelSelection(hideTooltip);
 	const standaloneScopeClass = useStandaloneScopeClass();
+	const [measureChartRef, , chartHeight] = useElementSize();
+	const gap = chartHeight > 0 && chartHeight < SHORT_CHART_HEIGHT ? "sm" : "xl";
 	const setChartRef = useCallback((node) => {
 		chartRef.current = node;
 		setScopeNode(node);
-	}, []);
+		measureChartRef(node);
+	}, [measureChartRef]);
 	const clearSelectionAndRef = useCallback(() => {
 		clearSelection();
 		selectedBarRef.current = null;
@@ -7232,7 +7298,9 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 	const maxRate = Math.max(...steps.map((step) => step.rate));
 	return /* @__PURE__ */ jsxs(Stack, {
 		direction: "column",
-		gap: "xl",
+		gap,
+		role: "group",
+		"aria-label": ariaLabel ?? __("Conversion funnel chart", "jetpack-charts"),
 		ref: setChartRef,
 		className: clsx("conversion-funnel-chart", conversion_funnel_chart_module_default["conversion-funnel-chart"], loading && conversion_funnel_chart_module_default["conversion-funnel-chart--loading"], className),
 		style: {
@@ -7263,7 +7331,7 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 					return /* @__PURE__ */ jsxs(Stack, {
 						direction: "column",
 						className: clsx(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",
+						gap,
 						children: [/* @__PURE__ */ jsxs(Stack, {
 							direction: "column",
 							gap: "xs",
@@ -7457,6 +7525,7 @@ function normalizeGeoChartError(eventArgs) {
 *
 * @param props                   - The props for the GeoChart component
 * @param props.data              - Data in Google Charts format (array of arrays with headers)
+* @param props.ariaLabel         - Accessible name of the chart
 * @param props.width             - Width of the chart in pixels
 * @param props.height            - Height of the chart in pixels
 * @param props.region            - Region to display ('world', 'US', or ISO 3166-1 alpha-2 code)
@@ -7468,7 +7537,7 @@ function normalizeGeoChartError(eventArgs) {
 * @param props.renderPlaceholder - Optional render function for the loading placeholder
 * @return A React component displaying an interactive map with data visualization
 */
-const GeoChartInternal = ({ className, data, width, height, region = "world", resolution = "countries", displayMode = "regions", domain, onError, renderPlaceholder }) => {
+const GeoChartInternal = ({ className, data, ariaLabel, width, height, region = "world", resolution = "countries", displayMode = "regions", domain, onError, renderPlaceholder }) => {
 	const { getElementStyles } = useGlobalChartsContext();
 	const scopeElement = useChartScopeElement();
 	const containerRef = useRef(null);
@@ -7556,8 +7625,14 @@ const GeoChartInternal = ({ className, data, width, height, region = "world", re
 		sanitizedData.hasHtmlTooltips
 	]);
 	const chartEvents = useMemo(() => {
-		if (!onError) return;
-		return [{
+		const readyEvent = {
+			eventName: "ready",
+			callback: () => {
+				containerRef.current?.querySelectorAll("svg").forEach((svg) => svg.setAttribute("aria-hidden", "true"));
+			}
+		};
+		if (!onError) return [readyEvent];
+		return [readyEvent, {
 			eventName: "error",
 			callback: ({ eventArgs }) => {
 				onError(normalizeGeoChartError(eventArgs));
@@ -7566,6 +7641,8 @@ const GeoChartInternal = ({ className, data, width, height, region = "world", re
 	}, [onError]);
 	return /* @__PURE__ */ jsx(Center, {
 		ref: containerRef,
+		role: "group",
+		"aria-label": ariaLabel ?? __("Geo chart", "jetpack-charts"),
 		className: clsx("geo-chart", geo_chart_module_default.container, className),
 		style: {
 			width,
@@ -8120,7 +8197,7 @@ const CELL_VALUE_MODIFIER = {
 	white: heatmap_chart_module_default["heatmap-chart__cell-value--white"]
 };
 const NO_ROW_LABELS = [];
-const TOOLTIP_BOX_STYLE = { zIndex: 3 };
+const TOOLTIP_BOX_STYLE$1 = { zIndex: 3 };
 const largest = (root, selector, size) => Math.max(0, ...Array.from(root.querySelectorAll(selector), (el) => el[size]));
 const gridBox = (chart, grid) => {
 	let height = chart.clientHeight;
@@ -8143,9 +8220,9 @@ const cellName = (info) => info.cellLabel || [
 const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, height = 0, className, compact = false, fitCells = false, showValues, maxCellWidth, maxCellHeight, minCellWidth, minCellHeight, rowLabels = NO_ROW_LABELS, columnGroups, keyboardNavigation = "grid", ariaLabel, primaryColor, gap = "md", withTooltips = false, renderTooltip, tooltipStyle, children }) => {
 	const chartId = useChartId(providedChartId);
 	const tooltipBoxStyle = tooltipStyle ? {
-		...TOOLTIP_BOX_STYLE,
+		...TOOLTIP_BOX_STYLE$1,
 		...tooltipStyle
-	} : TOOLTIP_BOX_STYLE;
+	} : TOOLTIP_BOX_STYLE$1;
 	const { getElementStyles, theme } = useGlobalChartsContext();
 	const scopeElement = useChartScopeElement();
 	const { heatmapChart: heatmapChartSettings } = theme;
@@ -11270,8 +11347,8 @@ const SUBPIXEL_TOLERANCE = .5;
 * depends on `--a8c-charts-dimension-leaderboard-row-gap`, label wrapping, and
 * whatever a caller renders as a label, so any restated number would drift.
 *
-* Every row is a direct grid child marked with `data-row-index`; interactive rows
-* use a button wrapper and non-interactive rows use a div wrapper.
+* Every row is a `listitem` div, a direct grid child marked with `data-row-index`;
+* interactive rows hold a button inside it.
 *
 * @param enabled  - Whether to measure at all. When false every row fits.
 * @param rowCount - Total number of rows rendered.
@@ -11413,6 +11490,7 @@ var leaderboard_chart_module_default = {
 	"overlayLabel": "a8ccharts-GovfoW-overlayLabel",
 	"row": "a8ccharts-GovfoW-row",
 	"rowButton": "a8ccharts-GovfoW-rowButton",
+	"rowItem": "a8ccharts-GovfoW-rowItem",
 	"stretch": "a8ccharts-GovfoW-stretch",
 	"valueContainer": "a8ccharts-GovfoW-valueContainer"
 };
@@ -11525,9 +11603,10 @@ const BarWithLabel = ({ entry, withComparison, withOverlayLabel, primaryColor, s
 * @param props.children         - Child components for composition API
 * @param props.className        - Additional CSS class name
 * @param props.style            - Custom styling for the chart container
+* @param props.ariaLabel        - Accessible name for the list, defaulting to "Leaderboard chart"
 * @return JSX element representing the leaderboard chart
 */
-const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propWidth, height: propHeight, withComparison = false, withOverlayLabel = false, primaryColor, secondaryColor, valueFormatter = defaultValueFormatter, deltaFormatter = defaultDeltaFormatter, animation, loading = false, fitRows = false, showLegend = false, legend = {}, legendLabels, gap = "md", className, style, children }) => {
+const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propWidth, height: propHeight, withComparison = false, withOverlayLabel = false, primaryColor, secondaryColor, valueFormatter = defaultValueFormatter, deltaFormatter = defaultDeltaFormatter, animation, loading = false, fitRows = false, showLegend = false, legend = {}, legendLabels, gap = "md", ariaLabel, className, style, children }) => {
 	const legendInteractive = legend.interactive ?? false;
 	const legendPosition = legend.position ?? "bottom";
 	const chartId = useChartId(providedChartId);
@@ -11658,6 +11737,8 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 					className: leaderboard_chart_module_default.emptyState,
 					children: getAllHiddenMessage(legendInteractive, "series")
 				}) : /* @__PURE__ */ jsx(component_default, {
+					role: "list",
+					"aria-label": ariaLabel ?? __("Leaderboard chart", "jetpack-charts"),
 					templateColumns: "minmax(0, 1fr) auto",
 					rowGap: ROW_GAP,
 					columnGap: COLUMN_GAP,
@@ -11705,40 +11786,49 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 								})
 							]
 						})] });
-						if (entry.onClick && entry.hasInteractiveLabel) return /* @__PURE__ */ jsxs("div", {
+						if (entry.onClick && entry.hasInteractiveLabel) return /* @__PURE__ */ jsx("div", {
+							role: "listitem",
 							"data-row-index": rowIndex,
 							style: rowStyle,
-							className: clsx(leaderboard_chart_module_default.row, leaderboard_chart_module_default.interactiveRow, leaderboard_chart_module_default.layeredRow),
-							onClick: forwardCellClickToRowButton,
-							children: [
-								rowCells,
-								/* @__PURE__ */ jsx("button", {
-									type: "button",
-									className: leaderboard_chart_module_default.rowButton,
-									onClick: entry.onClick,
-									"aria-label": entry.ariaLabel
-								}),
-								/* @__PURE__ */ jsx(Icon, {
-									className: leaderboard_chart_module_default.chevron,
-									icon: chevronRight,
-									size: 24
-								})
-							]
+							className: leaderboard_chart_module_default.rowItem,
+							children: /* @__PURE__ */ jsxs("div", {
+								className: clsx(leaderboard_chart_module_default.row, leaderboard_chart_module_default.interactiveRow, leaderboard_chart_module_default.layeredRow),
+								onClick: forwardCellClickToRowButton,
+								children: [
+									rowCells,
+									/* @__PURE__ */ jsx("button", {
+										type: "button",
+										className: leaderboard_chart_module_default.rowButton,
+										onClick: entry.onClick,
+										"aria-label": entry.ariaLabel
+									}),
+									/* @__PURE__ */ jsx(Icon, {
+										className: leaderboard_chart_module_default.chevron,
+										icon: chevronRight,
+										size: 24
+									})
+								]
+							})
 						}, entry.id);
-						if (entry.onClick) return /* @__PURE__ */ jsxs("button", {
-							type: "button",
+						if (entry.onClick) return /* @__PURE__ */ jsx("div", {
+							role: "listitem",
 							"data-row-index": rowIndex,
 							style: rowStyle,
-							className: clsx(leaderboard_chart_module_default.row, leaderboard_chart_module_default.interactiveRow),
-							onClick: entry.onClick,
-							"aria-label": entry.ariaLabel,
-							children: [rowCells, /* @__PURE__ */ jsx(Icon, {
-								className: leaderboard_chart_module_default.chevron,
-								icon: chevronRight,
-								size: 24
-							})]
+							className: leaderboard_chart_module_default.rowItem,
+							children: /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								className: clsx(leaderboard_chart_module_default.row, leaderboard_chart_module_default.interactiveRow),
+								onClick: entry.onClick,
+								"aria-label": entry.ariaLabel,
+								children: [rowCells, /* @__PURE__ */ jsx(Icon, {
+									className: leaderboard_chart_module_default.chevron,
+									icon: chevronRight,
+									size: 24
+								})]
+							})
 						}, entry.id);
 						return /* @__PURE__ */ jsx("div", {
+							role: "listitem",
 							"data-row-index": rowIndex,
 							style: rowStyle,
 							className: leaderboard_chart_module_default.row,
@@ -11775,11 +11865,13 @@ const PieSelectionAnnouncement = ({ data }) => /* @__PURE__ */ jsx(VisuallyHidde
 });
 //#endregion
 //#region src/charts/private/pie-keyboard-navigation/pie-tooltip.tsx
+const TOOLTIP_BOX_STYLE = { zIndex: 3 };
 const PieTooltip = ({ top, left, selectedIndex, tooltipRef, children }) => {
 	const standaloneScopeClass = useStandaloneScopeClass();
 	return /* @__PURE__ */ jsx(BoundedTooltip, {
 		top,
 		left,
+		style: TOOLTIP_BOX_STYLE,
 		children: selectedIndex === void 0 ? /* @__PURE__ */ jsx("div", {
 			className: standaloneScopeClass,
 			role: "tooltip",
@@ -12002,6 +12094,7 @@ function RadialWipeAnimation({ id, radius, innerRadius = 0, durationMs = 1e3, wi
 //#endregion
 //#region src/charts/pie-chart/pie-chart.module.scss
 var pie_chart_module_default = {
+	"pie-chart": "a8ccharts-gnszbG-pie-chart",
 	"pie-chart__label-plate": "a8ccharts-gnszbG-pie-chart__label-plate",
 	"pie-chart__label-text": "a8ccharts-gnszbG-pie-chart__label-text",
 	"pie-chart__label-text--black": "a8ccharts-gnszbG-pie-chart__label-text--black",