@automattic/charts 1.6.0 → 1.8.0

package/src/charts/bar-chart/private/index.ts

@@ -1,2 +1,11 @@
 export { useBarChartOptions } from './use-bar-chart-options';
 export { TruncatedXTickComponent, TruncatedYTickComponent } from './truncated-tick-component';
+export { ComparisonBars } from './comparison-bars';
+export type { ComparisonSeriesEntry } from './comparison-bars';
+export {
+	DEFAULT_COMPARISON_WIDTH_FACTOR,
+	COMPARISON_INNER_GAP,
+	MAX_GROUP_PADDING,
+	COMPARISON_TICK_GAP_FACTOR,
+} from './comparison-constants';
+export { BASE_BAND_PADDING_INNER } from './use-bar-chart-options';

package/src/charts/bar-chart/private/test/comparison-bars-geometry.test.ts

@@ -0,0 +1,47 @@
+import { computeComparisonRect, getValueScaleBaseline } from '../comparison-bars-geometry';
+
+describe( 'getValueScaleBaseline', () => {
+	it( 'clamps to the bottom (range max) when 0 is below the domain (vertical, descending range)', () => {
+		// vertical linear scale: range [200, 0] (bottom -> top), domain [10, 100] (zero excluded)
+		const scale = ( ( v: number ) => 200 - ( ( v - 10 ) / 90 ) * 200 ) as never;
+		( scale as { range: () => number[] } ).range = () => [ 200, 0 ];
+		// scale(0) = 200 - (-10/90)*200 ≈ 222 -> clamped to 200
+		expect( getValueScaleBaseline( scale ) ).toBe( 200 );
+	} );
+
+	it( 'clamps to the end (range max) when 0 is outside an ascending range scale', () => {
+		// horizontal linear scale: range [0, 200], domain [-100, -10] (zero excluded)
+		const scale = ( ( v: number ) => ( ( v + 100 ) / 90 ) * 200 ) as never;
+		( scale as { range: () => number[] } ).range = () => [ 0, 200 ];
+		// scale(0) = (100/90)*200 ≈ 222 -> clamped to 200
+		expect( getValueScaleBaseline( scale ) ).toBe( 200 );
+	} );
+} );
+
+describe( 'computeComparisonRect', () => {
+	const base = {
+		bandPosition: 100,
+		slotOffset: 10,
+		slotThickness: 40,
+		valuePosition: 50,
+		baseline: 200,
+		widthFactor: 1.5,
+	};
+
+	it( 'centers a 150% wide shadow on the primary slot (vertical)', () => {
+		const r = computeComparisonRect( { ...base, horizontal: false } );
+		// slotStart=110, center=110+20=130, shadowThickness=60, shadowStart=130-30=100
+		expect( r ).toEqual( { x: 100, y: 50, width: 60, height: 150 } );
+	} );
+
+	it( 'centers a 150% tall shadow on the primary slot (horizontal)', () => {
+		const r = computeComparisonRect( {
+			...base,
+			horizontal: true,
+			valuePosition: 150,
+			baseline: 0,
+		} );
+		// slotStart=110, center=130, shadowThickness=60, shadowStart=100
+		expect( r ).toEqual( { x: 0, y: 100, width: 150, height: 60 } );
+	} );
+} );

package/src/charts/bar-chart/private/test/comparison-bars.test.tsx

@@ -0,0 +1,183 @@
+import { render, screen } from '@testing-library/react';
+import { scaleBand, scaleLinear } from '@visx/scale';
+import { DataContext } from '@visx/xychart';
+import { ComparisonBars } from '../comparison-bars';
+import type { DataPointDate, SeriesData } from '../../../../types';
+import type { ComparisonSeriesEntry } from '../comparison-bars';
+
+// Build the band scale over two categories (matches how BarGroup sets it up)
+const categories = [ 'Jan', 'Feb' ];
+const xScale = scaleBand( {
+	domain: categories,
+	range: [ 0, 200 ],
+	padding: 0.1,
+} );
+
+// Simple linear value scale: domain 0..100 -> range 200..0 (SVG coords, descending)
+const yScale = scaleLinear( { domain: [ 0, 100 ], range: [ 200, 0 ] } );
+
+// The primaryKeys in this test
+const primaryKeys = [ 'current' ];
+const groupPadding = 0.1;
+
+// Build the same groupScale so tests can compute expected width
+const groupScale = scaleBand( {
+	domain: primaryKeys,
+	range: [ 0, xScale.bandwidth() ],
+	padding: groupPadding,
+} );
+
+// Minimal DataContext value
+const dataContextValue = {
+	xScale: xScale as never,
+	yScale: yScale as never,
+	horizontal: false,
+	// Other DataContext fields the component doesn't use
+	width: 200,
+	height: 200,
+	margin: { top: 0, right: 0, bottom: 0, left: 0 },
+	dataRegistry: {} as never,
+	registerData: () => undefined,
+	unregisterData: () => undefined,
+	setDimensions: () => undefined,
+	innerWidth: 200,
+	innerHeight: 200,
+	theme: {} as never,
+	colorScale: {} as never,
+};
+
+const seriesData: SeriesData = {
+	label: 'Comparison',
+	data: [
+		{ label: 'Jan', value: 40 } as DataPointDate,
+		{ label: 'Feb', value: 70 } as DataPointDate,
+	] as DataPointDate[],
+	options: { type: 'comparison' },
+};
+
+const comparisonEntries: ComparisonSeriesEntry[] = [
+	{ series: seriesData, index: 0, primaryKey: 'current', primaryIndex: 0 },
+];
+
+const getElementStyles = () => ( {
+	color: '#f00',
+	barStyles: { widthFactor: 1.5, opacity: 0.5 },
+	lineStyles: {} as never,
+	glyph: undefined as never,
+	shapeStyles: {} as never,
+} );
+
+const resolveFill = () => '#f00';
+
+const xAccessor = ( d: DataPointDate ) => d.label;
+const yAccessor = ( d: DataPointDate ) => d.value ?? undefined;
+
+describe( 'ComparisonBars', () => {
+	it( 'renders two shadow rects for two data points', () => {
+		render(
+			<svg>
+				<DataContext.Provider value={ dataContextValue }>
+					<ComparisonBars
+						comparisonEntries={ comparisonEntries }
+						primaryKeys={ primaryKeys }
+						groupPadding={ groupPadding }
+						horizontal={ false }
+						xAccessor={ xAccessor }
+						yAccessor={ yAccessor }
+						getElementStyles={ getElementStyles }
+						resolveFill={ resolveFill }
+					/>
+				</DataContext.Provider>
+			</svg>
+		);
+
+		const rects = screen.getAllByTestId( /^bar-chart-comparison-0-/ );
+		expect( rects ).toHaveLength( 2 );
+		expect( rects[ 0 ] ).toHaveAttribute( 'fill', '#f00' );
+		expect( rects[ 0 ] ).toHaveAttribute( 'opacity', '0.5' );
+		// width == widthFactor (1.5) * groupScale.bandwidth()
+		expect( Number( rects[ 0 ].getAttribute( 'width' ) ) ).toBeCloseTo(
+			1.5 * groupScale.bandwidth()
+		);
+	} );
+
+	it( 'wraps rects in a g with correct class and pointerEvents', () => {
+		render(
+			<svg>
+				<DataContext.Provider value={ dataContextValue }>
+					<ComparisonBars
+						comparisonEntries={ comparisonEntries }
+						primaryKeys={ primaryKeys }
+						groupPadding={ groupPadding }
+						horizontal={ false }
+						xAccessor={ xAccessor }
+						yAccessor={ yAccessor }
+						getElementStyles={ getElementStyles }
+						resolveFill={ resolveFill }
+					/>
+				</DataContext.Provider>
+			</svg>
+		);
+
+		const g = screen.getByTestId( 'bar-chart-comparison-bars' );
+		expect( g ).toHaveClass( 'bar-chart__comparison-bars', { exact: true } );
+		expect( g ).toHaveAttribute( 'pointer-events', 'none' );
+	} );
+
+	it( 'shadow rect is horizontally centered on the primary bar slot at widthFactor × slot width', () => {
+		render(
+			<svg>
+				<DataContext.Provider value={ dataContextValue }>
+					<ComparisonBars
+						comparisonEntries={ comparisonEntries }
+						primaryKeys={ primaryKeys }
+						groupPadding={ groupPadding }
+						horizontal={ false }
+						xAccessor={ xAccessor }
+						yAccessor={ yAccessor }
+						getElementStyles={ getElementStyles }
+						resolveFill={ resolveFill }
+					/>
+				</DataContext.Provider>
+			</svg>
+		);
+
+		const rects = screen.getAllByTestId( /^bar-chart-comparison-0-/ );
+		const rect = rects[ 0 ]; // 'Jan' datum
+
+		const slotThickness = groupScale.bandwidth();
+		const expectedWidth = 1.5 * slotThickness; // shadow = widthFactor × slot width
+		// Shadow x = bandStart + slotOffset + slotThickness/2 - shadowWidth/2
+		const bandStart = Number( xScale( 'Jan' ) );
+		const slotOffset = Number( groupScale( 'current' ) );
+		const expectedX = bandStart + slotOffset + slotThickness / 2 - expectedWidth / 2;
+		const expectedCenterX = expectedX + expectedWidth / 2;
+		const primarySlotCenterX = bandStart + slotOffset + slotThickness / 2;
+
+		expect( Number( rect.getAttribute( 'width' ) ) ).toBeCloseTo( expectedWidth );
+		expect( Number( rect.getAttribute( 'x' ) ) ).toBeCloseTo( expectedX );
+		// Center of shadow matches center of primary slot
+		expect( expectedCenterX ).toBeCloseTo( primarySlotCenterX );
+	} );
+
+	it( 'renders nothing when primaryKeys is empty', () => {
+		render(
+			<svg>
+				<DataContext.Provider value={ dataContextValue }>
+					<ComparisonBars
+						comparisonEntries={ comparisonEntries }
+						primaryKeys={ [] }
+						groupPadding={ groupPadding }
+						horizontal={ false }
+						xAccessor={ xAccessor }
+						yAccessor={ yAccessor }
+						getElementStyles={ getElementStyles }
+						resolveFill={ resolveFill }
+					/>
+				</DataContext.Provider>
+			</svg>
+		);
+
+		expect( screen.queryByTestId( 'bar-chart-comparison-bars' ) ).not.toBeInTheDocument();
+	} );
+} );

package/src/charts/bar-chart/private/use-bar-chart-options.ts

@@ -5,6 +5,11 @@ import type { EnhancedDataPoint } from '../../../hooks/use-zero-value-display';
 import type { DataPointDate, BaseChartProps, SeriesData } from '../../../types';
 import type { TickFormatter } from '@visx/axis';
 
+/** Outer padding of the category band scale (space at the chart edges). */
+export const BASE_BAND_PADDING = 0.2;
+/** Inner padding of the category band scale (the base gap between ticks). */
+export const BASE_BAND_PADDING_INNER = 0.1;
+
 const formatDateTick = ( timestamp: number ) => {
 	const date = new Date( timestamp );
 	return date.toLocaleDateString( undefined, {
@@ -39,8 +44,8 @@ export function useBarChartOptions(
 	const defaultOptions = useMemo( () => {
 		const bandScale = {
 			type: 'band' as const,
-			padding: 0.2,
-			paddingInner: 0.1,
+			padding: BASE_BAND_PADDING,
+			paddingInner: BASE_BAND_PADDING_INNER,
 		};
 		const linearScale = {
 			type: 'linear' as const,
@@ -97,8 +102,44 @@ export function useBarChartOptions(
 			yScale: baseYScale,
 		} = defaultOptions[ orientationKey ];
 
-		const xScale = { ...baseXScale, ...( options.xScale || {} ) };
-		const yScale = { ...baseYScale, ...( options.yScale || {} ) };
+		// When comparison series are present, visx only sees primary BarSeries and computes
+		// a too-narrow domain. Compute an explicit domain spanning all series so comparison
+		// shadows aren't clipped. Skip when the user has already provided an explicit domain.
+		let valueScaleDomainOverride: { domain?: [ number, number ] } = {};
+		const hasComparisonSeries = data.some( s => s.options?.type === 'comparison' );
+		if ( hasComparisonSeries ) {
+			const valueAxisIsY = ! horizontal;
+			const userDomain = valueAxisIsY ? options.yScale?.domain : options.xScale?.domain;
+			if ( ! userDomain ) {
+				const allValues: number[] = [];
+				data.forEach( series => {
+					series.data.forEach( d => {
+						const enhanced = d as { visualValue?: number };
+						const v =
+							enhanced.visualValue !== undefined ? enhanced.visualValue : ( d.value as number );
+						if ( typeof v === 'number' && Number.isFinite( v ) ) {
+							allValues.push( v );
+						}
+					} );
+				} );
+				if ( allValues.length > 0 ) {
+					valueScaleDomainOverride = {
+						domain: [ Math.min( ...allValues ), Math.max( ...allValues ) ],
+					};
+				}
+			}
+		}
+
+		const xScale = {
+			...baseXScale,
+			...( options.xScale || {} ),
+			...( horizontal ? valueScaleDomainOverride : {} ),
+		};
+		const yScale = {
+			...baseYScale,
+			...( options.yScale || {} ),
+			...( ! horizontal ? valueScaleDomainOverride : {} ),
+		};
 		const providedToolTipLabelFormatter = horizontal
 			? options.axis?.y?.tickFormat
 			: options.axis?.x?.tickFormat;
@@ -137,5 +178,5 @@ export function useBarChartOptions(
 				labelFormatter: providedToolTipLabelFormatter || defaultTooltipLabelFormatter,
 			},
 		};
-	}, [ defaultOptions, options, horizontal ] );
+	}, [ defaultOptions, options, horizontal, data ] );
 }

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

@@ -1,7 +1,8 @@
-import { render, screen } from '@testing-library/react';
+import { render, renderHook, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { GlobalChartsProvider } from '../../../providers';
 import BarChart from '../bar-chart';
+import { useBarChartOptions } from '../private';
 
 // Mock useElementSize to return non-zero dimensions in jsdom so charts render
 const mockRefCallback = jest.fn();
@@ -233,6 +234,37 @@ describe( 'BarChart', () => {
 			// Check that no pattern definitions container is present
 			expect( screen.queryByTestId( 'bar-chart-patterns' ) ).not.toBeInTheDocument();
 		} );
+
+		test( 'comparison shadow reuses the primary bar pattern when patterns are enabled', () => {
+			renderWithTheme( {
+				withPatterns: true,
+				data: [
+					{
+						label: 'This period',
+						group: 'views',
+						data: [
+							{ label: 'Mon', value: 10 },
+							{ label: 'Tue', value: 20 },
+						],
+					},
+					{
+						label: 'Previous period',
+						group: 'views',
+						options: { type: 'comparison' as const },
+						data: [
+							{ label: 'Mon', value: 15 },
+							{ label: 'Tue', value: 25 },
+						],
+					},
+				],
+			} );
+
+			const shadow = screen.getAllByTestId( /^bar-chart-comparison-\d+-\d+$/ )[ 0 ];
+			const shadowFill = shadow.getAttribute( 'fill' );
+			// Shadow is filled with a pattern, not a solid color, and it references the PRIMARY
+			// series' pattern (index 0) rather than the comparison series' own index.
+			expect( shadowFill ).toMatch( /^url\(#bar-pattern-.+-0\)$/ );
+		} );
 	} );
 
 	describe( 'Keyboard Navigation Accessibility', () => {
@@ -346,6 +378,45 @@ describe( 'BarChart', () => {
 			} );
 		} );
 
+		describe( 'Comparison tooltip', () => {
+			test( 'tooltip shows both the primary and comparison values', async () => {
+				const user = userEvent.setup();
+				renderWithTheme( {
+					withTooltips: true,
+					data: [
+						{
+							label: 'This period',
+							group: 'views',
+							data: [
+								{ date: new Date( '2024-01-01' ), value: 10, label: 'Jan 1' },
+								{ date: new Date( '2024-01-02' ), value: 20, label: 'Jan 2' },
+							],
+						},
+						{
+							label: 'Previous period',
+							group: 'views',
+							options: { type: 'comparison' as const },
+							data: [
+								{ date: new Date( '2024-01-01' ), value: 15, label: 'Jan 1' },
+								{ date: new Date( '2024-01-02' ), value: 25, label: 'Jan 2' },
+							],
+						},
+					],
+				} );
+
+				const chart = screen.getByRole( 'grid', { name: /bar chart/i } );
+				chart.focus();
+
+				await user.keyboard( '{ArrowRight}' );
+				const tooltip = screen.getByTestId( 'chart-tooltip-0' );
+				// Both the current and previous period values are shown.
+				expect( tooltip ).toHaveTextContent( 'This period' );
+				expect( tooltip ).toHaveTextContent( '10' );
+				expect( tooltip ).toHaveTextContent( 'Previous period' );
+				expect( tooltip ).toHaveTextContent( '15' );
+			} );
+		} );
+
 		describe( 'Tab Key Navigation', () => {
 			test( 'tab key exits navigation when reaching end of data points', async () => {
 				const user = userEvent.setup();
@@ -754,6 +825,125 @@ describe( 'BarChart', () => {
 		} );
 	} );
 
+	describe( 'Comparison Series', () => {
+		it( 'renders a translucent shadow behind the primary bar for a comparison series', () => {
+			const data = [
+				{
+					label: 'This year',
+					group: 'views',
+					data: [
+						{ label: 'Jan', value: 100 },
+						{ label: 'Feb', value: 120 },
+					],
+				},
+				{
+					label: 'Last year',
+					group: 'views',
+					options: { type: 'comparison' as const },
+					data: [
+						{ label: 'Jan', value: 80 },
+						{ label: 'Feb', value: 140 },
+					],
+				},
+			];
+			render( <BarChart data={ data } width={ 400 } height={ 300 } /> );
+
+			// two comparison shadow rects (one per data point)
+			// Match individual rect testids like bar-chart-comparison-1-0 (not the group wrapper)
+			const shadows = screen.getAllByTestId( /^bar-chart-comparison-\d+-\d+$/ );
+			expect( shadows ).toHaveLength( 2 );
+			expect( shadows[ 0 ] ).toHaveAttribute( 'opacity', '0.5' );
+
+			// primary bars still render for the single primary series (visx .visx-bar)
+			// eslint-disable-next-line testing-library/no-node-access
+			const bars = document.querySelectorAll( '.visx-bar' );
+			expect( bars.length ).toBeGreaterThanOrEqual( 2 );
+		} );
+
+		it( 'expands value-axis domain to include comparison values exceeding the primary max', () => {
+			// Comparison value 150 exceeds primary max 100.
+			// Without domain expansion the value-axis scale config has no explicit domain,
+			// so visx derives it from primary BarSeries only (max=100).
+			// With the fix, an explicit domain [min,150] is set on the value-axis scale config.
+			const data = [
+				{
+					label: 'This year',
+					group: 'views',
+					data: [ { label: 'Jan', value: 100 } ],
+				},
+				{
+					label: 'Last year',
+					group: 'views',
+					options: { type: 'comparison' as const },
+					data: [ { label: 'Jan', value: 150 } ],
+				},
+			];
+
+			const { result } = renderHook( () => useBarChartOptions( data, false, {} ) );
+			const yScale = result.current.yScale as { domain?: number[] };
+			// domain must be set explicitly and its max must be >= 150
+			expect( yScale.domain ).toBeDefined();
+			expect( ( yScale.domain as number[] )[ 1 ] ).toBeGreaterThanOrEqual( 150 );
+		} );
+
+		it( 'counts only primary series for keyboard navigation when a comparison series is present', async () => {
+			const user = userEvent.setup();
+			// 2 primary + 1 comparison. totalPoints should be 2*2=4, not 3*2=6.
+			// If comparison is counted, the 5th ArrowRight would reference a phantom series
+			// and could throw or show an undefined tooltip key.
+			const data = [
+				{
+					label: 'Series A',
+					group: 'g',
+					data: [
+						{ label: 'Jan', value: 10 },
+						{ label: 'Feb', value: 20 },
+					],
+				},
+				{
+					label: 'Series B',
+					group: 'g2',
+					data: [
+						{ label: 'Jan', value: 15 },
+						{ label: 'Feb', value: 25 },
+					],
+				},
+				{
+					label: 'Last year',
+					group: 'g',
+					options: { type: 'comparison' as const },
+					data: [
+						{ label: 'Jan', value: 8 },
+						{ label: 'Feb', value: 18 },
+					],
+				},
+			];
+			render(
+				<GlobalChartsProvider>
+					<BarChart data={ data } width={ 400 } height={ 300 } withTooltips />
+				</GlobalChartsProvider>
+			);
+
+			const chart = screen.getByRole( 'grid', { name: /bar chart/i } );
+			chart.focus();
+
+			// Navigate through all 4 primary slots (2 series × 2 data points)
+			for ( let i = 0; i < 4; i++ ) {
+				await user.keyboard( '{ArrowRight}' );
+			}
+
+			// If totalPoints was 6 (counted comparison), tooltip 4 would still show.
+			// With correct totalPoints=4, navigation wraps and tooltip 0 is shown again,
+			// not phantom slot 4 (which would reference data[2], a comparison series).
+			// Either way, there must be no crash and navigation must stay in bounds.
+			const tooltips = screen.queryAllByTestId( /^chart-tooltip-/ );
+			expect( tooltips ).toHaveLength( 1 );
+			// The visible tooltip must belong to a primary series
+			const tooltipText = tooltips[ 0 ].textContent ?? '';
+			expect( [ 'Series A', 'Series B' ].some( k => tooltipText.includes( k ) ) ).toBe( true );
+		} );
+	} );
+
 	describe( 'Interactive Legend', () => {
 		it( 'filters series when interactive legend is enabled and series is toggled', async () => {
 			const user = userEvent.setup();

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

@@ -2,10 +2,9 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Stack } from '@wordpress/ui';
 import clsx from 'clsx';
 import { FC, useContext, useMemo } from 'react';
-import { Chart, type GoogleChartOptions } from 'react-google-charts';
+import { Chart } from 'react-google-charts';
 /**
  * Internal dependencies
  */
@@ -13,6 +12,7 @@ import { GlobalChartsContext, GlobalChartsProvider, useGlobalChartsContext } fro
 import { lightenHexColor, normalizeColorToHex } from '../../utils/color-utils';
 import { resolveCssVariable } from '../../utils/resolve-css-var';
 import { sanitizeHtml } from '../../utils/sanitize-html';
+import { Center } from '../private/center';
 import { withResponsive } from '../private/with-responsive';
 import styles from './geo-chart.module.scss';
 import { GeoChartProps } from './types';
@@ -20,6 +20,8 @@ import { GeoChartProps } from './types';
 const DEFAULT_FEATURE_FILL_COLOR = '#ffffff';
 const DEFAULT_BACKGROUND_COLOR = '#ffffff';
 
+type GoogleChartOptions = Record< string, unknown >;
+
 /**
  * Renders a geographical chart using Google Charts GeoChart to visualize data.
  *
@@ -58,15 +60,13 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 
 	// Render loading placeholder
 	const loadingPlaceholder = (
-		<Stack
-			align="center"
-			justify="center"
+		<Center
 			className={ clsx( 'geo-chart', styles.container, className ) }
 			data-testid="geo-chart-loading"
 			style={ { width, height } }
 		>
 			{ renderPlaceholder ? renderPlaceholder() : __( 'Loading map', 'jetpack-charts' ) }
-		</Stack>
+		</Center>
 	);
 
 	// Google charts doesn't accept CSS variables, so we need to convert them to hex colors
@@ -147,9 +147,7 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 	);
 
 	return (
-		<Stack
-			align="center"
-			justify="center"
+		<Center
 			className={ clsx( 'geo-chart', styles.container, className ) }
 			data-testid="geo-chart"
 			style={ { width, height, backgroundColor } }
@@ -162,7 +160,7 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 				options={ options }
 				loader={ loadingPlaceholder }
 			/>
-		</Stack>
+		</Center>
 	);
 };
 

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

@@ -31,7 +31,7 @@
 	&.is-overlay {
 		grid-template: "overlap" 1fr / 1fr;
 
-		/* contains a single cell callded 'overlap' */
+		/* contains a single cell called 'overlap' */
 
 		>* {
 			grid-area: overlap;
@@ -85,6 +85,8 @@
 }
 
 .interactiveRow {
+	--focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
+
 	display: grid;
 	grid-column: 1 / -1;
 	grid-template-columns: subgrid;
@@ -92,10 +94,13 @@
 	position: relative;
 
 	// Native button reset.
+	box-sizing: border-box;
 	appearance: none;
 	width: 100%;
 	margin: 0;
-	padding: 0;
+	// Reserve a ring's worth of space on every edge so the inset focus outline
+	// hugs the row without the bar painting over it (see :focus-visible below).
+	padding: var(--focus-ring-width);
 	border: 0;
 	background: none;
 	color: inherit;
@@ -103,14 +108,15 @@
 	text-align: inherit;
 	cursor: pointer;
 
-	// On hover/focus the bar dims and its inline-end edge pulls back by a fixed
-	// amount while the value/delta slides toward the inline start by the same
-	// amount, clearing room for the chevron revealed at the inline-end edge.
-	// Because both move by the same fixed pixels (not a percentage scale), the
-	// bar↔value gap stays identical at rest and on hover for every row. The bar
-	// width (set in leaderboard-chart.tsx) is a grid item aligned to the inline
-	// start, so its inset mirrors automatically in RTL; the value slide is given
-	// an RTL override below. No row background — the bar carries the state.
+	// On hover/focus the bar dims and its inline-end edge pulls back while the
+	// value/delta slides toward the inline start to clear room for the chevron
+	// revealed at the inline-end edge. The value always slides the full inset
+	// (it must clear the chevron), but the bar pulls back in proportion to its
+	// length (see getBarWidth in leaderboard-chart.tsx): the full-length bar —
+	// the one that reaches the value — pulls back the whole inset to keep its
+	// gap, while shorter bars move proportionally less, down to ~0. The bar is
+	// a grid item aligned to the inline start, so its inset mirrors in RTL; the
+	// value slide is given an RTL override below. No row background.
 	.bar {
 		transition: opacity 0.15s ease, width 0.15s ease;
 	}
@@ -122,8 +128,8 @@
 	&:hover,
 	&:focus-visible {
 
-		// Fixed reserve for the chevron — shared by the bar width inset
-		// (see leaderboard-chart.tsx) and the value slide so their gap is constant.
+		// Fixed reserve for the chevron — the value slides by it in full, and the
+		// bar width inset (see leaderboard-chart.tsx) scales it by the bar's share.
 		--a8c--charts--leaderboard--bar--hover-inset: var(--wpds-dimension-gap-2xl, 32px);
 
 		.bar {
@@ -146,8 +152,15 @@
 	}
 
 	&:focus-visible {
-		outline: 2px solid var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
-		outline-offset: -2px;
+		border-radius: var(--wpds-border-radius-sm, 2px);
+		outline:
+			var(--focus-ring-width) solid
+			var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
+		// Inset by its own width so the outer edge hugs the row boundary: the
+		// outline then sits in the row's padding (also a ring width), clear of the
+		// bar, and stays inside the overflow:auto container that would clip an
+		// outset ring.
+		outline-offset: calc(-1 * var(--focus-ring-width));
 	}
 }