@automattic/charts 4.4.0 → 4.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "4.4.0",
+	"version": "4.6.0",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {
@@ -63,7 +63,7 @@
 		"typecheck": "tsgo --noEmit"
 	},
 	"dependencies": {
-		"@automattic/number-formatters": "^1.2.9",
+		"@automattic/number-formatters": "^1.2.10",
 		"@babel/runtime": "7.29.7",
 		"@date-fns/tz": "1.5.0",
 		"@react-spring/web": "10.1.1",

package/src/charts/bar-chart/bar-chart.tsx

@@ -272,16 +272,27 @@ const BarChartInternal: FC< BarChartProps > = ( {
 
 	const visibleSeriesKey = useMemo( () => JSON.stringify( primaryKeys ), [ primaryKeys ] );
 
-	const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation( {
-		selectedIndex,
-		setSelectedIndex,
-		isNavigating,
-		setIsNavigating,
-		chartRef,
-		totalPoints,
-		onActivate: activateSelectedBar,
-		visibleSeriesKey,
-	} );
+	const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown, onChartPointerMove } =
+		useKeyboardNavigation( {
+			selectedIndex,
+			setSelectedIndex,
+			isNavigating,
+			setIsNavigating,
+			chartRef,
+			totalPoints,
+			onActivate: activateSelectedBar,
+			visibleSeriesKey,
+		} );
+
+	const handlePointerMove = useCallback(
+		( { key, index }: { key: string; index: number } ) => {
+			const seriesIndex = primaryKeys.indexOf( key );
+			if ( seriesIndex >= 0 ) {
+				onChartPointerMove( index * primaryKeys.length + seriesIndex );
+			}
+		},
+		[ primaryKeys, onChartPointerMove ]
+	);
 
 	const comparisonEntries = useMemo( () => {
 		const primaryByGroup = new Map< string | undefined, { label: string; index: number } >(
@@ -745,6 +756,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
 												withTooltips={ withTooltips }
 												onPointerDown={ onPointerDown }
 												onPointerUp={ onPointerUp }
+												onPointerMove={ handlePointerMove }
 											/>
 										) }
 

package/src/charts/bar-chart/private/band-tooltip.tsx

@@ -45,6 +45,7 @@ export function nearestBandIndex< Datum >(
  * @param root0.withTooltips  - Whether pointer events update the tooltip.
  * @param root0.onPointerDown - Receives the corrected pointer-down datum.
  * @param root0.onPointerUp   - Receives the corrected pointer-up datum.
+ * @param root0.onPointerMove - Receives the corrected datum under a moving pointer.
  * @return No visual content.
  */
 export function BandTooltip( {
@@ -53,10 +54,12 @@ export function BandTooltip( {
 	withTooltips,
 	onPointerDown,
 	onPointerUp,
-}: { keys: string[]; groupPadding: number } & Pick<
-	BarChartProps,
-	'withTooltips' | 'onPointerDown' | 'onPointerUp'
-> ) {
+	onPointerMove,
+}: {
+	keys: string[];
+	groupPadding: number;
+	onPointerMove?: ( selection: PointerSelection ) => void;
+} & Pick< BarChartProps, 'withTooltips' | 'onPointerDown' | 'onPointerUp' > ) {
 	const { xScale, yScale, dataRegistry, horizontal } = useContext( DataContext );
 	const { showTooltip } = useContext( TooltipContext );
 	const scale = ( horizontal ? yScale : xScale ) as BandScale | undefined;
@@ -110,13 +113,6 @@ export function BandTooltip( {
 	const handlePointer = useCallback< PointerHandler >(
 		params => {
 			const selections = getSelections( params );
-			if ( withTooltips && params?.event.type !== 'pointerup' ) {
-				selections.forEach( showTooltip );
-			}
-			const callback = params?.event.type === 'pointerdown' ? onPointerDown : onPointerUp;
-			if ( params?.event.type === 'pointermove' || ! callback ) {
-				return;
-			}
 			const nearest = selections.reduce(
 				( best, selection ) => {
 					const distance = ( value: typeof selection ) =>
@@ -125,11 +121,21 @@ export function BandTooltip( {
 				},
 				undefined as ( typeof selections )[ number ] | undefined
 			);
+			if ( params?.event.type === 'pointermove' && nearest ) {
+				onPointerMove?.( nearest );
+			}
+			if ( withTooltips && params?.event.type !== 'pointerup' ) {
+				selections.forEach( showTooltip );
+			}
+			const callback = params?.event.type === 'pointerdown' ? onPointerDown : onPointerUp;
+			if ( params?.event.type === 'pointermove' || ! callback ) {
+				return;
+			}
 			if ( nearest ) {
 				callback( nearest );
 			}
 		},
-		[ getSelections, withTooltips, showTooltip, onPointerDown, onPointerUp ]
+		[ getSelections, withTooltips, showTooltip, onPointerDown, onPointerUp, onPointerMove ]
 	);
 	useEventEmitter( 'pointermove', withTooltips ? handlePointer : undefined );
 	useEventEmitter( 'pointerdown', handlePointer );

package/src/charts/geo-chart/geo-chart.tsx

@@ -130,6 +130,8 @@ function normalizeGeoChartError( eventArgs: unknown ): GeoChartError {
  * @param props.height            - Height of the chart in pixels
  * @param props.region            - Region to display ('world', 'US', or ISO 3166-1 alpha-2 code)
  * @param props.resolution        - Resolution level ('countries', 'provinces', or 'metros')
+ * @param props.displayMode       - Plot rows as shaded areas ('regions') or markers ('markers')
+ * @param props.domain            - Country code whose viewpoint sets the disputed borders
  * @param props.onError           - Optional callback for Google Charts errors
  * @param props.className         - Additional CSS class name for the chart container
  * @param props.renderPlaceholder - Optional render function for the loading placeholder
@@ -142,6 +144,8 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 	height,
 	region = 'world',
 	resolution = 'countries',
+	displayMode = 'regions',
+	domain,
 	onError,
 	renderPlaceholder,
 } ) => {
@@ -262,6 +266,8 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 		() => ( {
 			...( region !== 'world' && { region } ),
 			...( resolution !== 'countries' && { resolution } ),
+			...( displayMode !== 'regions' && { displayMode } ),
+			...( domain && { domain } ),
 			colorAxis: { colors: [ lightColorHex, fullColorHex ] },
 			backgroundColor: backgroundColorHex,
 			datalessRegionColor: defaultFillColorHex,
@@ -273,6 +279,8 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 		[
 			region,
 			resolution,
+			displayMode,
+			domain,
 			lightColorHex,
 			fullColorHex,
 			backgroundColorHex,

package/src/charts/geo-chart/index.ts

@@ -1,2 +1,8 @@
 export { default as GeoChart, GeoChartUnresponsive } from './geo-chart';
-export type { GeoChartProps, GeoRegion, GeoResolution, GeoChartError } from './types';
+export type {
+	GeoChartProps,
+	GeoRegion,
+	GeoResolution,
+	GeoDisplayMode,
+	GeoChartError,
+} from './types';

package/src/charts/geo-chart/test/geo-chart.test.tsx

@@ -216,6 +216,22 @@ describe( 'GeoChart', () => {
 			expect( options.region ).toBeUndefined();
 		} );
 
+		test( 'passes the domain so disputed borders follow that country', () => {
+			renderWithTheme( { domain: 'IN' } );
+
+			const options = JSON.parse( screen.getByTestId( 'chart-options' ).textContent || '{}' );
+
+			expect( options.domain ).toBe( 'IN' );
+		} );
+
+		test( 'passes the markers display mode so rows draw as points, not shaded areas', () => {
+			renderWithTheme( { displayMode: 'markers' } );
+
+			const options = JSON.parse( screen.getByTestId( 'chart-options' ).textContent || '{}' );
+
+			expect( options.displayMode ).toBe( 'markers' );
+		} );
+
 		test( 'does not include resolution in options when set to countries (default)', () => {
 			renderWithTheme();
 

package/src/charts/geo-chart/types.ts

@@ -15,6 +15,13 @@ export type GeoRegion = 'world' | ( string & {} );
  */
 export type GeoResolution = 'countries' | 'provinces' | 'metros';
 
+/**
+ * How the map plots its rows.
+ * - 'regions': Shades each area the rows name
+ * - 'markers': Draws a sized, colored circle per row; a row can name a place or give `[ latitude, longitude ]` as its first two columns
+ */
+export type GeoDisplayMode = 'regions' | 'markers';
+
 export interface GeoChartError {
 	id?: string;
 	message?: string;
@@ -48,6 +55,16 @@ export interface GeoChartProps extends Pick<
 	 * @default 'countries'
 	 */
 	resolution?: GeoResolution;
+	/**
+	 * How the map plots its rows: shaded areas, or one marker per row.
+	 * @default 'regions'
+	 */
+	displayMode?: GeoDisplayMode;
+	/**
+	 * ISO 3166-1 alpha-2 code of the country whose viewpoint sets the disputed borders
+	 * (e.g., 'IN' draws Kashmir as India shows it). Google's default borders apply when omitted.
+	 */
+	domain?: string;
 	/**
 	 * Callback fired when Google Charts emits a chart error.
 	 */

package/src/charts/heatmap-chart/test/heatmap-chart.test.tsx

@@ -494,7 +494,7 @@ describe( 'HeatmapChart keyboard tooltip', () => {
 } );
 
 describe( 'HeatmapChart tooltip position', () => {
-	// Restore only this spy: `restoreAllMocks` would also unspy jest-console, and
+	// Restore only this spy: `restoreAllMocks` would also unspy the console guard, and
 	// every later `toHaveWarned` in the file would find no spy.
 	let rects: jest.SpyInstance;
 	afterEach( () => {

package/src/charts/pie-chart/pie-chart.module.scss

@@ -18,5 +18,9 @@
 
 	&__label-text {
 		fill: var(--a8c-charts-color-label-inverse, #f0f0f0);
+
+		&--on-light {
+			fill: var(--a8c-charts-color-label, #1e1e1e);
+		}
 	}
 }

package/src/charts/pie-chart/pie-chart.tsx

@@ -1,8 +1,9 @@
 import { Group } from '@visx/group';
 import { Pie } from '@visx/shape';
 import { useTooltip } from '@visx/tooltip';
+import { color as d3Color } from '@visx/vendor/d3-color';
 import clsx from 'clsx';
-import { useCallback, useContext, useMemo, useRef } from 'react';
+import { useCallback, useContext, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { Legend, useChartLegendItems } from '../../components/legend';
 import { BaseTooltip } from '../../components/tooltip';
 import { BoundedTooltip } from '../../components/tooltip/private/bounded-tooltip';
@@ -19,8 +20,16 @@ import {
 	useGlobalChartsTheme,
 	GlobalChartsContext,
 } from '../../providers';
+import { CATALOG_POINTERS } from '../../providers/chart-context/private/catalog-pointers';
+import { contrastRatio } from '../../providers/chart-context/private/perceptual-color';
 import { useStandaloneScopeClass } from '../../providers/chart-scope';
-import { attachSubComponents, resolveFontSize } from '../../utils';
+import {
+	attachSubComponents,
+	createCssVariableResolver,
+	isValidHexColor,
+	normalizeColorToHex,
+	resolveFontSize,
+} from '../../utils';
 import { getStringWidth } from '../../visx/text';
 import { Center } from '../private/center';
 import { ChartSVG, ChartHTML, useChartChildren } from '../private/chart-composition';
@@ -161,6 +170,50 @@ const validateData = ( data: DataPointPercentage[] ) => {
 	return { isValid: true, message: '' };
 };
 
+/**
+ * The label pointers, resolved at the pie chart's own root element so JS and CSS agree on what paints.
+ */
+interface ResolvedLabelPointers {
+	/** True while a label plate is set; the label text then always uses the inverse role. */
+	hasPlate: boolean;
+	labelHex: string;
+	labelInverseHex: string;
+	/** True when the inverse role is see-through, so only the `label` role can be seen on a fill. */
+	isInverseSeeThrough: boolean;
+}
+
+/**
+ * Whether a pie slice's label should use the dark `label` role instead of the default `label-inverse` role.
+ *
+ * A label plate always wins: the text sits on the plate, not the slice fill, so it never flips.
+ * Otherwise the role that contrasts more with the resolved slice fill wins. `null` pointers (not
+ * yet resolved, or labels off) keep the default inverse role.
+ *
+ * @param fill     - The slice's resolved fill color.
+ * @param pointers - The label pointers, resolved at the chart's own root element.
+ * @return Whether the label needs dark text.
+ */
+const labelNeedsDarkText = ( fill: string, pointers: ResolvedLabelPointers | null ): boolean => {
+	if ( ! pointers || pointers.hasPlate ) {
+		return false;
+	}
+
+	const fillHex = normalizeColorToHex( fill );
+	if ( ! isValidHexColor( fillHex ) || ! isValidHexColor( pointers.labelHex ) ) {
+		return false;
+	}
+	if ( pointers.isInverseSeeThrough ) {
+		return true;
+	}
+	if ( ! isValidHexColor( pointers.labelInverseHex ) ) {
+		return false;
+	}
+
+	return (
+		contrastRatio( fillHex, pointers.labelHex ) > contrastRatio( fillHex, pointers.labelInverseHex )
+	);
+};
+
 /**
  * Renders a pie or donut chart using the provided data.
  *
@@ -202,6 +255,11 @@ const PieChartInternal = ( {
 	// The tooltip renders inside this element, so pointer coordinates are taken relative to it.
 	const containerRef = useRef< HTMLDivElement >( null );
 
+	// The element the chart's own `className` lands on, so an override set there reaches this
+	// decision the same way it reaches CSS.
+	const rootRef = useRef< HTMLDivElement >( null );
+	const [ labelPointers, setLabelPointers ] = useState< ResolvedLabelPointers | null >( null );
+
 	const onMouseLeave = useCallback( () => {
 		if ( ! withTooltips ) {
 			return;
@@ -209,7 +267,41 @@ const PieChartInternal = ( {
 		hideTooltip();
 	}, [ withTooltips, hideTooltip ] );
 
-	const { getElementStyles, isSeriesVisible } = useGlobalChartsContext();
+	const { getElementStyles, isSeriesVisible, isColorPaletteResolved } = useGlobalChartsContext();
+	const { isValid, message } = validateData( data );
+
+	// Skipped when labels are off, or before the chart's own root element mounts (the invalid-data
+	// branch renders a plain div, so `rootRef` is not yet attached).
+	useLayoutEffect( () => {
+		if ( ! showLabels || ! rootRef.current ) {
+			return;
+		}
+
+		const resolve = createCssVariableResolver( rootRef.current );
+		const rawLabelBackground = resolve( CATALOG_POINTERS.labelBackground );
+		// Hex drops alpha, so a see-through label role would win the comparison and paint nothing.
+		const rawLabel = resolve( CATALOG_POINTERS.label );
+		const isLabelOpaque = rawLabel ? d3Color( rawLabel )?.opacity === 1 : false;
+		const rawLabelInverse = resolve( CATALOG_POINTERS.labelInverse );
+		const labelInverseColor = rawLabelInverse ? d3Color( rawLabelInverse ) : null;
+		// A plate value d3 cannot parse (CSS Color 4 syntax, say) is still one CSS paints, so it counts.
+		const plateColor = rawLabelBackground ? d3Color( rawLabelBackground ) : null;
+		const next: ResolvedLabelPointers = {
+			hasPlate: rawLabelBackground ? ! plateColor || plateColor.opacity > 0 : false,
+			labelHex: isLabelOpaque ? normalizeColorToHex( CATALOG_POINTERS.label, null, resolve ) : '',
+			labelInverseHex: normalizeColorToHex( CATALOG_POINTERS.labelInverse, null, resolve ),
+			isInverseSeeThrough: labelInverseColor ? labelInverseColor.opacity < 1 : false,
+		};
+		setLabelPointers( previous =>
+			previous &&
+			previous.hasPlate === next.hasPlate &&
+			previous.labelHex === next.labelHex &&
+			previous.labelInverseHex === next.labelInverseHex &&
+			previous.isInverseSeeThrough === next.isInverseSeeThrough
+				? previous
+				: next
+		);
+	}, [ showLabels, className, isColorPaletteResolved, isValid ] );
 
 	// Calculate percentages from values (single source of truth)
 	const dataWithPercentages = useDataWithPercentages( data );
@@ -230,8 +322,6 @@ const PieChartInternal = ( {
 	// Create legend items using legendData (has recalculated percentages for visible items)
 	const legendItems = useChartLegendItems( legendData, legendOptions );
 
-	const { isValid, message } = validateData( data );
-
 	// Process children to extract compound components
 	const { svgChildren, htmlChildren, legendChildren, otherChildren } = useChartChildren(
 		children,
@@ -309,6 +399,7 @@ const PieChartInternal = ( {
 				legendElement={ legendElement }
 				legendChildren={ legendChildren }
 				gap={ gap }
+				rootRef={ rootRef }
 				className={ clsx(
 					'pie-chart',
 					styles[ 'pie-chart' ],
@@ -405,11 +496,12 @@ const PieChartInternal = ( {
 														} );
 													};
 
+													const fill = accessors.fill( arc.data );
 													const pathProps: SVGProps< SVGPathElement > & {
 														'data-testid'?: string;
 													} = {
 														d: pie.path( arc ) || '',
-														fill: accessors.fill( arc.data ),
+														fill,
 														'data-testid': 'pie-segment',
 													};
 
@@ -446,7 +538,11 @@ const PieChartInternal = ( {
 																		pointerEvents="none"
 																	/>
 																	<text
-																		className={ styles[ 'pie-chart__label-text' ] }
+																		className={ clsx( styles[ 'pie-chart__label-text' ], {
+																			[ styles[ 'pie-chart__label-text--on-light' ] ]:
+																				labelNeedsDarkText( fill, labelPointers ),
+																		} ) }
+																		data-testid="pie-label"
 																		x={ centroidX }
 																		y={ centroidY }
 																		dy=".33em"

package/src/charts/pie-chart/test/pie-chart.test.tsx

@@ -149,6 +149,155 @@ describe( 'PieChart', () => {
 		} );
 	} );
 
+	describe( 'Label Text Contrast', () => {
+		const contrastData = [
+			{ label: 'Light', value: 60, color: '#f5d76e' },
+			{ label: 'Dark', value: 40, color: '#1e3a8a' },
+		];
+
+		let injectedStyle: HTMLStyleElement | null = null;
+
+		afterEach( () => {
+			if ( injectedStyle ) {
+				document.head.removeChild( injectedStyle );
+				injectedStyle = null;
+			}
+		} );
+
+		test( 'uses dark label text on a light slice', () => {
+			renderWithTheme( { data: contrastData } );
+
+			const [ light, dark ] = screen.getAllByTestId( 'pie-label' );
+			expect( light ).toHaveClass( 'pie-chart__label-text--on-light' );
+			expect( dark ).not.toHaveClass( 'pie-chart__label-text--on-light' );
+		} );
+
+		test( "keeps the inverse label color when a label plate is set on the chart's own class", () => {
+			injectedStyle = document.createElement( 'style' );
+			injectedStyle.textContent =
+				'.plated-pie { --a8c-charts-color-label-background: rgba(0, 0, 0, 0.75); }';
+			document.head.appendChild( injectedStyle );
+
+			renderWithTheme( { data: contrastData, className: 'plated-pie' } );
+
+			screen
+				.getAllByTestId( 'pie-label' )
+				.forEach( label => expect( label ).not.toHaveClass( 'pie-chart__label-text--on-light' ) );
+		} );
+
+		test( "compares against a label-inverse override set on the chart's own class", () => {
+			injectedStyle = document.createElement( 'style' );
+			// Matches the slice fill exactly, so the inverse role loses to the default dark label role.
+			injectedStyle.textContent = '.overridden-pie { --a8c-charts-color-label-inverse: #1e3a8a; }';
+			document.head.appendChild( injectedStyle );
+
+			renderWithTheme( {
+				data: [ { label: 'Dark', value: 100, color: '#1e3a8a' } ],
+				className: 'overridden-pie',
+			} );
+
+			const [ label ] = screen.getAllByTestId( 'pie-label' );
+			expect( label ).toHaveClass( 'pie-chart__label-text--on-light' );
+		} );
+
+		test( 'keeps the inverse label color when the plate uses color syntax d3 cannot parse', () => {
+			injectedStyle = document.createElement( 'style' );
+			injectedStyle.textContent =
+				'.modern-plate-pie { --a8c-charts-color-label-background: rgb(0 0 0 / 50%); }';
+			document.head.appendChild( injectedStyle );
+
+			renderWithTheme( { data: contrastData, className: 'modern-plate-pie' } );
+
+			screen
+				.getAllByTestId( 'pie-label' )
+				.forEach( label => expect( label ).not.toHaveClass( 'pie-chart__label-text--on-light' ) );
+		} );
+
+		test( 'keeps the inverse label color when the label role is see-through', () => {
+			injectedStyle = document.createElement( 'style' );
+			injectedStyle.textContent =
+				'.clear-label-pie { --a8c-charts-color-label: rgba(0, 0, 0, 0); }';
+			document.head.appendChild( injectedStyle );
+
+			renderWithTheme( { data: contrastData, className: 'clear-label-pie' } );
+
+			screen
+				.getAllByTestId( 'pie-label' )
+				.forEach( label => expect( label ).not.toHaveClass( 'pie-chart__label-text--on-light' ) );
+		} );
+
+		test( 'keeps one label color on every slice when both label roles are the same', () => {
+			injectedStyle = document.createElement( 'style' );
+			injectedStyle.textContent =
+				'.single-label-pie { --a8c-charts-color-label: #ffffff; --a8c-charts-color-label-inverse: #ffffff; }';
+			document.head.appendChild( injectedStyle );
+
+			renderWithTheme( { data: contrastData, className: 'single-label-pie' } );
+
+			screen
+				.getAllByTestId( 'pie-label' )
+				.forEach( label => expect( label ).not.toHaveClass( 'pie-chart__label-text--on-light' ) );
+		} );
+
+		test( 'uses the label role on every slice when the inverse role is see-through', () => {
+			injectedStyle = document.createElement( 'style' );
+			injectedStyle.textContent =
+				'.clear-inverse-pie { --a8c-charts-color-label-inverse: rgba(255, 255, 255, 0); }';
+			document.head.appendChild( injectedStyle );
+
+			renderWithTheme( { data: contrastData, className: 'clear-inverse-pie' } );
+
+			screen
+				.getAllByTestId( 'pie-label' )
+				.forEach( label => expect( label ).toHaveClass( 'pie-chart__label-text--on-light' ) );
+		} );
+
+		test( 'keeps the inverse label color when the fill cannot be resolved', () => {
+			renderWithTheme( {
+				data: [ { label: 'Unresolved', value: 100, color: 'var(--not-set)' } ],
+			} );
+
+			screen
+				.getAllByTestId( 'pie-label' )
+				.forEach( label => expect( label ).not.toHaveClass( 'pie-chart__label-text--on-light' ) );
+		} );
+
+		describe( 'after an invalid-to-valid data transition', () => {
+			test( "keeps the inverse label color when a plate is set on the chart's own class", () => {
+				injectedStyle = document.createElement( 'style' );
+				injectedStyle.textContent =
+					'.plated-late-pie { --a8c-charts-color-label-background: rgba(0, 0, 0, 0.75); }';
+				document.head.appendChild( injectedStyle );
+
+				const { rerender } = renderWithTheme( { data: [], className: 'plated-late-pie' } );
+
+				rerender(
+					<GlobalChartsProvider>
+						<PieChart { ...defaultProps } data={ contrastData } className="plated-late-pie" />
+					</GlobalChartsProvider>
+				);
+
+				screen
+					.getAllByTestId( 'pie-label' )
+					.forEach( label => expect( label ).not.toHaveClass( 'pie-chart__label-text--on-light' ) );
+			} );
+
+			test( 'resolves the label pointers once the chart mounts its own root element', () => {
+				const { rerender } = renderWithTheme( { data: [] } );
+
+				rerender(
+					<GlobalChartsProvider>
+						<PieChart { ...defaultProps } data={ contrastData } />
+					</GlobalChartsProvider>
+				);
+
+				const [ light, dark ] = screen.getAllByTestId( 'pie-label' );
+				expect( light ).toHaveClass( 'pie-chart__label-text--on-light' );
+				expect( dark ).not.toHaveClass( 'pie-chart__label-text--on-light' );
+			} );
+		} );
+	} );
+
 	describe( 'Legend Value Display', () => {
 		// Values that give clean percentages: 60/100=60%, 23/100=23%, 17/100=17%
 		const testData = [

package/src/charts/private/chart-layout/chart-layout.tsx

@@ -5,7 +5,7 @@ import { renderLegendSlot } from '../chart-composition';
 import styles from './chart-layout.module.scss';
 import type { GapSize, LegendPosition } from '../../../types';
 import type { LegendChild } from '../chart-composition/use-chart-children';
-import type { CSSProperties, ReactNode } from 'react';
+import type { CSSProperties, ReactNode, Ref } from 'react';
 
 /**
  * Measurements provided to the render prop when ChartLayout handles resize listening.
@@ -36,6 +36,8 @@ export interface ChartLayoutProps {
 	gap?: GapSize;
 	/** Additional class names */
 	className?: string;
+	/** Ref to the root element, the one `className` lands on */
+	rootRef?: Ref< HTMLDivElement >;
 	/** Inline styles (width, height, etc.) */
 	style?: CSSProperties;
 	/** Test ID for the container */
@@ -53,6 +55,7 @@ export const ChartLayout = ( {
 	onContentHeightChange,
 	gap,
 	className,
+	rootRef,
 	style,
 	'data-testid': dataTestId,
 	'data-chart-id': dataChartId,
@@ -78,6 +81,7 @@ export const ChartLayout = ( {
 
 	return (
 		<Stack
+			ref={ rootRef }
 			direction="column"
 			gap={ gap }
 			className={ className }