@automattic/charts 1.9.0 → 1.10.1

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

@@ -2,15 +2,7 @@ import { formatNumber, formatNumberCompact } from '@automattic/number-formatters
 import { useTooltip, useTooltipInPortal } from '@visx/tooltip';
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
-import {
-	createContext,
-	useCallback,
-	useContext,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-} from 'react';
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import {
 	GlobalChartsProvider,
 	useChartId,
@@ -20,7 +12,7 @@ import {
 import { attachSubComponents } from '../../utils';
 import {
 	isValidHexColor,
-	lightenHexColor,
+	mixHexColors,
 	normalizeColorToHex,
 	prefersLightText,
 } from '../../utils/color-utils';
@@ -30,19 +22,18 @@ import { ChartLayout } from '../private/chart-layout';
 import { SingleChartContext } from '../private/single-chart-context';
 import { withResponsive } from '../private/with-responsive';
 import styles from './heatmap-chart.module.scss';
-import { getValueExtent, getNormalizedValue, HeatmapLegend, isPresent } from './private';
+import {
+	getValueExtent,
+	getNormalizedValue,
+	HeatmapContext,
+	HeatmapLegend,
+	isPresent,
+} from './private';
+import type { HeatmapContextValue } from './private';
 import type { HeatmapChartProps, HeatmapTooltipData } from './types';
 import type { ResponsiveConfig } from '../private/with-responsive';
 import type { CSSProperties, FC } from 'react';
 
-export type HeatmapContextValue = {
-	extent: [ number, number ];
-	/** The resolved primary color (full intensity); the legend mixes toward it in CSS. */
-	primaryColorHex: string;
-};
-
-export const HeatmapContext = createContext< HeatmapContextValue | null >( null );
-
 // Mirrors the color-mix floor in heatmap-chart.module.scss (.heatmap-chart__cell--filled):
 // the rendered fill is the primary mixed over the chart background at 0.15 + 0.85 * intensity.
 const CELL_MIX_FLOOR = 0.15;
@@ -63,7 +54,7 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 	children,
 } ) => {
 	const chartId = useChartId( providedChartId );
-	const { getElementStyles, theme } = useGlobalChartsContext();
+	const { getElementStyles, resolveThemeColor, theme } = useGlobalChartsContext();
 	const { heatmapChart: heatmapChartSettings } = theme;
 	const { nonLegendChildren } = useChartChildren( children, 'HeatmapChart' );
 
@@ -84,14 +75,22 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 		overrideColor: primaryColor || heatmapChartSettings.primaryColor,
 	} );
 
-	// Pick the in-cell text color from the cell's actual blended fill luminance (not the data
-	// value), so light text is only used where it out-contrasts dark text. Falls back to dark
-	// text when the primary isn't a resolvable hex (e.g. a bare CSS token).
+	// Resolve the background in the provider's theme scope so the blended-fill text
+	// color tracks a themed (e.g. dark) background.
+	const chartBackgroundHex = resolveThemeColor( theme.backgroundColor );
+
+	// Choose text color from the blended fill, not the raw value.
+	// If either color cannot resolve to hex, keep dark text.
 	const primaryHex = normalizeColorToHex( primaryColorHex );
 	const cellHasLightText = ( intensity: number ): boolean =>
 		isValidHexColor( primaryHex ) &&
+		isValidHexColor( chartBackgroundHex ) &&
 		prefersLightText(
-			lightenHexColor( primaryHex, 1 - ( CELL_MIX_FLOOR + ( 1 - CELL_MIX_FLOOR ) * intensity ) )
+			mixHexColors(
+				primaryHex,
+				chartBackgroundHex,
+				1 - ( CELL_MIX_FLOOR + ( 1 - CELL_MIX_FLOOR ) * intensity )
+			)
 		);
 
 	const extent = useMemo( () => getValueExtent( data ), [ data ] );
@@ -247,6 +246,7 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 	const trackSize = compact ? 'var(--heatmap-cell-size)' : 'minmax(0, 1fr)';
 	const gridStyle: Record< string, string | number > = {
 		'--heatmap-primary': primaryColorHex,
+		'--heatmap-bg': theme.backgroundColor,
 		gridTemplateColumns: `auto repeat(${ columns }, ${ trackSize })`,
 		gridTemplateRows: `auto repeat(${ rows }, ${ trackSize })`,
 	};
@@ -292,17 +292,18 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 						} ) }
 						style={ gridStyle as CSSProperties }
 					>
-						{ /* Corner gutter + column labels; aria-hidden, since each cell's label carries the text. */ }
-						<span aria-hidden="true" />
-						{ data.map( ( column, columnIndex ) => (
-							<span
-								key={ `col-${ columnIndex }` }
-								aria-hidden="true"
-								className={ styles[ 'heatmap-chart__col-label' ] }
-							>
-								{ column.label }
-							</span>
-						) ) }
+						{ /* Header row preserves the grid structure; cell aria-labels include this text. */ }
+						<div role="row" aria-hidden="true" className={ styles[ 'heatmap-chart__row' ] }>
+							<span />
+							{ data.map( ( column, columnIndex ) => (
+								<span
+									key={ `col-${ columnIndex }` }
+									className={ styles[ 'heatmap-chart__col-label' ] }
+								>
+									{ column.label }
+								</span>
+							) ) }
+						</div>
 
 						{ Array.from( { length: rows } ).map( ( _row, rowIndex ) => {
 							const labelVisible = ! compact || rowIndex % 2 === 0;
@@ -360,7 +361,7 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 											>
 												{ drawValues && present && (
 													<span className={ styles[ 'heatmap-chart__cell-value' ] }>
-														{ /* Compact so large values fit the cell; tooltip + aria-label keep full precision. */ }
+														{ /* Compact display; tooltip and aria-label keep full precision. */ }
 														{ formatNumberCompact( value ) }
 													</span>
 												) }

package/src/charts/heatmap-chart/private/build-calendar-data.ts

@@ -57,12 +57,28 @@ export const buildCalendarHeatmapData = (
 		LABELLED_ROWS.includes( row ) ? format( addDays( gridStart, row ), 'EEE' ) : ''
 	);
 
+	// Hide short partial first-month labels when a later month follows; compact
+	// cells make adjacent labels collide. Keep the label for single-month ranges.
+	const MIN_FIRST_MONTH_WEEKS = 2;
+	const firstMonth = gridStart.getMonth();
+	let firstMonthWeeks = 0;
+	while (
+		firstMonthWeeks < weekCount &&
+		addDays( gridStart, firstMonthWeeks * 7 ).getMonth() === firstMonth
+	) {
+		firstMonthWeeks++;
+	}
+	const spansLaterMonth = firstMonthWeeks < weekCount;
+	const showFirstMonthLabel = ! spansLaterMonth || firstMonthWeeks >= MIN_FIRST_MONTH_WEEKS;
+
 	const data: HeatmapColumn[] = [];
 	let previousMonth = -1;
 	for ( let week = 0; week < weekCount; week++ ) {
 		const columnStart = addDays( gridStart, week * 7 );
 		const month = columnStart.getMonth();
-		const label = month !== previousMonth ? format( columnStart, 'MMM' ) : '';
+		const isNewMonth = month !== previousMonth;
+		const label =
+			isNewMonth && ( week !== 0 || showFirstMonthLabel ) ? format( columnStart, 'MMM' ) : '';
 		previousMonth = month;
 
 		const cells: HeatmapCell[] = [];

package/src/charts/heatmap-chart/private/heatmap-context.ts

@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+
+export type HeatmapContextValue = {
+	extent: [ number, number ];
+	/** The resolved primary color (full intensity); the legend mixes toward it in CSS. */
+	primaryColorHex: string;
+};
+
+/** Shared by the chart and legend without importing back from `heatmap-chart.tsx`. */
+export const HeatmapContext = createContext< HeatmapContextValue | null >( null );

package/src/charts/heatmap-chart/private/heatmap-legend.tsx

@@ -2,8 +2,8 @@ import { __ } from '@wordpress/i18n';
 import { Stack, Text } from '@wordpress/ui';
 import { useContext } from 'react';
 import { useGlobalChartsTheme } from '../../../providers';
-import { HeatmapContext } from '../heatmap-chart';
 import styles from '../heatmap-chart.module.scss';
+import { HeatmapContext } from './heatmap-context';
 import type { CSSProperties, FC } from 'react';
 
 export interface HeatmapLegendProps {
@@ -15,7 +15,7 @@ export interface HeatmapLegendProps {
 
 export const HeatmapLegend: FC< HeatmapLegendProps > = ( { steps = 5, lessLabel, moreLabel } ) => {
 	const context = useContext( HeatmapContext );
-	const { legend } = useGlobalChartsTheme();
+	const { legend, backgroundColor } = useGlobalChartsTheme();
 	if ( ! context ) {
 		return null;
 	}
@@ -38,6 +38,7 @@ export const HeatmapLegend: FC< HeatmapLegendProps > = ( { steps = 5, lessLabel,
 							style={
 								{
 									'--heatmap-primary': primaryColorHex,
+									'--heatmap-bg': backgroundColor,
 									'--intensity': intensity,
 								} as CSSProperties
 							}

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

@@ -1,5 +1,7 @@
 export { getValueExtent, getNormalizedValue, isPresent } from './use-heatmap-colors';
 export { buildCalendarHeatmapData } from './build-calendar-data';
 export { HeatmapLegend } from './heatmap-legend';
+export { HeatmapContext } from './heatmap-context';
 export type { CalendarHeatmapResult } from './build-calendar-data';
 export type { HeatmapLegendProps } from './heatmap-legend';
+export type { HeatmapContextValue } from './heatmap-context';

package/src/charts/heatmap-chart/test/build-calendar-data.test.ts

@@ -35,7 +35,7 @@ describe( 'buildCalendarHeatmapData', () => {
 
 	test( 'labels only the first column of each month', () => {
 		const multiMonth: DataPointDate[] = [
-			{ dateString: '2024-01-29', value: 1 },
+			{ dateString: '2024-01-01', value: 1 },
 			{ dateString: '2024-02-05', value: 1 },
 		];
 		const { data } = buildCalendarHeatmapData( multiMonth );
@@ -44,6 +44,28 @@ describe( 'buildCalendarHeatmapData', () => {
 		expect( labels ).toContain( 'Feb' );
 	} );
 
+	test( 'suppresses a partial first month label so it cannot collide with the next', () => {
+		// Jan 29 is the only January column; February should be the first visible label.
+		const partialFirstMonth: DataPointDate[] = [
+			{ dateString: '2024-01-29', value: 1 },
+			{ dateString: '2024-02-05', value: 1 },
+		];
+		const { data } = buildCalendarHeatmapData( partialFirstMonth, { weekStartsOn: 1 } );
+		expect( data[ 0 ].label ).toBe( '' );
+		expect( data.map( c => c.label ).filter( Boolean )[ 0 ] ).toBe( 'Feb' );
+	} );
+
+	test( 'keeps the first month label when the range never reaches a second month', () => {
+		// Single-month ranges keep their lone month label.
+		const singleMonth: DataPointDate[] = [
+			{ dateString: '2024-01-01', value: 1 },
+			{ dateString: '2024-01-03', value: 2 },
+		];
+		const { data } = buildCalendarHeatmapData( singleMonth, { weekStartsOn: 1 } );
+		expect( data ).toHaveLength( 1 );
+		expect( data[ 0 ].label ).toBe( 'Jan' );
+	} );
+
 	test( 'filters out entries with unparseable or missing dates', () => {
 		const mixed: DataPointDate[] = [
 			{ dateString: '2024-01-01', value: 3 },

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

@@ -222,12 +222,19 @@ describe( 'HeatmapChart', () => {
 		} );
 	} );
 
-	test( 'leaves cell gap and radius to WPDS tokens (no inline overrides)', () => {
+	test( 'keeps a strict grid → row structure (column labels live in a row, not directly under the grid)', () => {
+		renderChart();
+		// The header row is aria-hidden, so include hidden elements when querying for it.
+		const rows = screen.getAllByRole( 'row', { hidden: true } );
+		const headerRow = rows.find( row => within( row ).queryByText( 'W1' ) );
+		expect( headerRow ).toBeDefined();
+	} );
+
+	test( 'leaves the cell gap to WPDS tokens in non-compact mode (no inline override)', () => {
 		renderChart();
 		const grid = screen.getByRole( 'grid', { name: /heatmap/i } );
-		// Non-compact sets no inline gap/radius — the SCSS falls back to the WPDS tokens.
+		// Non-compact sets no inline gap — the SCSS falls back to the WPDS token.
 		expect( grid.style.getPropertyValue( '--heatmap-cell-gap' ) ).toBe( '' );
-		expect( grid.style.getPropertyValue( '--heatmap-cell-radius' ) ).toBe( '' );
 	} );
 
 	test( 'applies the compact gap inline from the theme compactCellGap', () => {

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

@@ -73,9 +73,21 @@
 }
 
 .valueContainer {
+	align-items: center;
 	justify-content: flex-end;
 }
 
+.deltaValue {
+	display: inline-block;
+	font-variant-numeric: tabular-nums;
+	min-width: 3ch;
+	text-align: end;
+}
+
+.deltaPlaceholder {
+	text-align: center;
+}
+
 .overlayLabel {
 	align-items: center;
 }
@@ -83,7 +95,7 @@
 .emptyState {
 	padding: var(--wpds-dimension-padding-3xl, 32px) var(--wpds-dimension-padding-lg, 16px);
 	text-align: center;
-	color: var(--wpds-color-fg-content-neutral-weak, #707070);
+	color: var(--wpds-color-foreground-content-neutral-weak, #707070);
 	font-size: var(--wpds-typography-font-size-md, 13px);
 	font-style: italic;
 }
@@ -165,7 +177,7 @@
 		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));
+			var(--wpds-color-stroke-focus, 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
@@ -181,7 +193,7 @@
 	bottom: 0;
 	margin-block: auto;
 	opacity: 0;
-	color: var(--wpds-color-fg-content-neutral-weak, #707070);
+	color: var(--wpds-color-foreground-content-neutral-weak, #707070);
 	transition:
 		opacity var(--wpds-motion-duration-sm, 100ms)
 		var(--wpds-motion-easing-subtle, cubic-bezier(0.15, 0, 0.15, 1));

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

@@ -1,5 +1,5 @@
 /* eslint-disable @wordpress/no-unsafe-wp-apis */
-import { __experimentalGrid as Grid } from '@wordpress/components';
+import { __experimentalGrid as Grid, VisuallyHidden } from '@wordpress/components';
 import { Fragment } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Icon, chevronRight } from '@wordpress/icons';
@@ -65,6 +65,14 @@ const defaultDeltaFormatter = ( value: number ): string => {
 const getBarWidth = ( share: number ): string =>
 	`calc(${ share }% - var(--a8c--charts--leaderboard--bar--hover-inset, 0px) * ${ share } / 100)`;
 
+const hasComparisonValue = (
+	entry: LeaderboardEntry
+): entry is LeaderboardEntry & {
+	previousValue: number;
+	previousShare: number;
+	delta: number;
+} => entry.previousValue != null && entry.previousShare != null && entry.delta != null;
+
 const BarLabel = ( { label }: { label: LeaderboardEntry[ 'label' ] } ) => (
 	<>{ typeof label === 'string' ? <Text className={ styles.label }>{ label }</Text> : label }</>
 );
@@ -87,39 +95,43 @@ const BarWithLabel = ( {
 	isPrimaryVisible?: boolean;
 	isComparisonVisible?: boolean;
 	animation?: boolean;
-} ) => (
-	<div
-		className={ clsx( styles.barWithLabelContainer, {
-			[ styles[ 'is-overlay' ] ]: withOverlayLabel,
-		} ) }
-	>
-		<BarLabel label={ entry.label } />
-
-		{ isPrimaryVisible && (
-			<div
-				className={ clsx( styles.bar, {
-					[ styles[ 'bar--animated' ] ]: animation,
-				} ) }
-				style={ {
-					width: getBarWidth( entry.currentShare ),
-					backgroundColor: primaryColor,
-				} }
-			></div>
-		) }
-
-		{ withComparison && ! withOverlayLabel && isComparisonVisible && (
-			<div
-				className={ clsx( styles.bar, {
-					[ styles[ 'bar--animated' ] ]: animation,
-				} ) }
-				style={ {
-					width: getBarWidth( entry.previousShare ),
-					backgroundColor: secondaryColor,
-				} }
-			></div>
-		) }
-	</div>
-);
+} ) => {
+	const showComparisonBar = withComparison && ! withOverlayLabel && isComparisonVisible;
+
+	return (
+		<div
+			className={ clsx( styles.barWithLabelContainer, {
+				[ styles[ 'is-overlay' ] ]: withOverlayLabel,
+			} ) }
+		>
+			<BarLabel label={ entry.label } />
+
+			{ isPrimaryVisible && (
+				<div
+					className={ clsx( styles.bar, {
+						[ styles[ 'bar--animated' ] ]: animation,
+					} ) }
+					style={ {
+						width: getBarWidth( entry.currentShare ),
+						backgroundColor: primaryColor,
+					} }
+				></div>
+			) }
+
+			{ showComparisonBar && hasComparisonValue( entry ) && (
+				<div
+					className={ clsx( styles.bar, {
+						[ styles[ 'bar--animated' ] ]: animation,
+					} ) }
+					style={ {
+						width: getBarWidth( entry.previousShare ),
+						backgroundColor: secondaryColor,
+					} }
+				></div>
+			) }
+		</div>
+	);
+};
 
 /**
  * LeaderboardChart component displays a ranked list of data with progress bars
@@ -335,7 +347,11 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 					) : (
 						<Grid templateColumns="minmax(0, 1fr) auto" rowGap={ rowGap } columnGap={ columnGap }>
 							{ data.map( entry => {
-								const colorIndex = Math.sign( entry.delta ) + 1;
+								const showComparisonColumn = withComparison && isComparisonVisible;
+								const hasDeltaValue = hasComparisonValue( entry );
+								const showComparisonValue = showComparisonColumn && hasDeltaValue;
+								const showComparisonPlaceholder = showComparisonColumn && ! hasDeltaValue;
+								const colorIndex = showComparisonValue ? Math.sign( entry.delta ) + 1 : 1;
 								const deltaColor = deltaColors[ colorIndex ];
 
 								const rowCells = (
@@ -362,11 +378,23 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 										>
 											{ isPrimaryVisible && <Text>{ valueFormatter( entry.currentValue ) }</Text> }
 
-											{ withComparison && isComparisonVisible && (
-												<Text style={ { color: deltaColor } }>
+											{ showComparisonValue && (
+												<Text className={ styles.deltaValue } style={ { color: deltaColor } }>
 													{ deltaFormatter( entry.delta ) }
 												</Text>
 											) }
+
+											{ showComparisonPlaceholder && (
+												<Text
+													className={ clsx( styles.deltaValue, styles.deltaPlaceholder ) }
+													style={ { color: deltaColor } }
+												>
+													<span aria-hidden="true">-</span>
+													<VisuallyHidden as="span">
+														{ __( 'No comparison data', 'jetpack-charts' ) }
+													</VisuallyHidden>
+												</Text>
+											) }
 										</Stack>
 									</>
 								);

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

@@ -78,6 +78,30 @@ describe( 'LeaderboardChart', () => {
 		expect( screen.getByText( '-8%' ) ).toBeInTheDocument();
 	} );
 
+	it( 'shows a placeholder when a row has no previous value', () => {
+		render(
+			<LeaderboardChart
+				data={ [
+					...mockData,
+					{
+						id: 'new',
+						label: 'New Source',
+						currentValue: 100,
+						currentShare: 1,
+					},
+				] }
+				withComparison={ true }
+			/>
+		);
+
+		expect( screen.getByText( '+25%' ) ).toBeInTheDocument();
+		expect( screen.getByText( '-8%' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'New Source' ) ).toBeInTheDocument();
+		expect( screen.getByText( '-' ) ).toHaveAttribute( 'aria-hidden', 'true' );
+		expect( screen.getByText( 'No comparison data' ) ).toBeInTheDocument();
+		expect( screen.queryByText( '+100%' ) ).not.toBeInTheDocument();
+	} );
+
 	it( 'shows custom label when provided', () => {
 		render(
 			<LeaderboardChart
@@ -403,6 +427,28 @@ describe( 'LeaderboardChart', () => {
 			expect( screen.getByRole( 'button' ) ).toHaveAccessibleName( /Direct.*12\.5K/ );
 		} );
 
+		it( 'does not include the missing comparison dash in interactive row names', () => {
+			render(
+				<LeaderboardChart
+					data={ [
+						{
+							id: 'new',
+							label: 'New Source',
+							currentValue: 100,
+							currentShare: 1,
+							onClick: jest.fn(),
+						},
+					] }
+					withComparison={ true }
+				/>
+			);
+
+			expect( screen.getByRole( 'button' ) ).toHaveAccessibleName(
+				/New Source.*100.*No comparison data/
+			);
+			expect( screen.getByRole( 'button' ) ).not.toHaveAccessibleName( /-/ );
+		} );
+
 		it( 'derives the accessible name from an image label via its alt text', () => {
 			render(
 				<LeaderboardChart

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

@@ -18,8 +18,8 @@
 
 	&__tooltip,
 	&__annotation-label-popover {
-		background: var(--wpds-color-bg-surface-neutral-strong, #fff);
-		color: var(--wpds-color-fg-content-neutral, #1e1e1e);
+		background: var(--wpds-color-background-surface-neutral-strong, #fff);
+		color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
 		padding: var(--wpds-dimension-padding-sm, 8px);
 	}
 

package/src/charts/private/svg-empty-state/svg-empty-state.module.scss

@@ -1,5 +1,5 @@
 .svg-empty-state {
 	text-align: center;
 	font-size: var(--wpds-typography-font-size-md, 13px);
-	color: var(--wpds-color-fg-content-neutral-weak, #707070);
+	color: var(--wpds-color-foreground-content-neutral-weak, #707070);
 }

package/src/charts/private/x-zoom.module.scss

@@ -22,7 +22,7 @@
 		height: 28px;
 		padding: 0;
 		background: var(--charts-zoom-reset-bg, rgba(255, 255, 255, 0.92));
-		color: var(--charts-zoom-reset-fg, var(--wpds-color-fg-content-neutral, #1e1e1e));
+		color: var(--charts-zoom-reset-fg, var(--wpds-color-foreground-content-neutral, #1e1e1e));
 		border:
 			var(--wpds-border-width-xs, 1px) solid
 			var(--charts-zoom-reset-border, rgba(0, 0, 0, 0.16));
@@ -35,7 +35,7 @@
 		}
 
 		&:focus-visible {
-			outline: 2px solid var(--charts-zoom-reset-focus, var(--wpds-color-stroke-focus-brand, #3858e9));
+			outline: 2px solid var(--charts-zoom-reset-focus, var(--wpds-color-stroke-focus, #3858e9));
 			outline-offset: 1px;
 		}
 	}

package/src/components/trend-indicator/trend-indicator.module.scss

@@ -9,15 +9,15 @@
 	// Trend colors use the documented --charts-trend-* override API, falling
 	// back to the accessible WPDS semantic tokens.
 	&--up {
-		color: var(--charts-trend-up-color, var(--wpds-color-fg-content-success-weak, #008030));
+		color: var(--charts-trend-up-color, var(--wpds-color-foreground-content-success-weak, #008030));
 	}
 
 	&--down {
-		color: var(--charts-trend-down-color, var(--wpds-color-fg-content-error-weak, #cc1818));
+		color: var(--charts-trend-down-color, var(--wpds-color-foreground-content-error-weak, #cc1818));
 	}
 
 	&--neutral {
-		color: var(--charts-trend-neutral-color, var(--wpds-color-fg-content-neutral-weak, #707070));
+		color: var(--charts-trend-neutral-color, var(--wpds-color-foreground-content-neutral-weak, #707070));
 	}
 
 	&__icon {

package/src/hooks/test/use-chart-margin.test.tsx

@@ -13,8 +13,8 @@ describe( 'useChartMargin', () => {
 	const baseTheme = {
 		axisStyles: {
 			y: {
-				left: { axisLabel: { fontSize: 11 }, tickLength: 8 },
-				right: { axisLabel: { fontSize: 11 }, tickLength: 8 },
+				left: { axisLabel: { fontSize: 12 }, tickLabel: { fontSize: 11 }, tickLength: 8 },
+				right: { axisLabel: { fontSize: 12 }, tickLabel: { fontSize: 11 }, tickLength: 8 },
 			},
 		},
 	} as XYChartTheme;
@@ -64,7 +64,8 @@ describe( 'useChartMargin', () => {
 			options.axis.y.tickFormat,
 			theme.axisStyles.y.left.axisLabel
 		);
-		expect( result.current.left ).toBe( 48 ); // 40 + 8
+		// 40 label width + 8 tick length + ceil(11 * 0.25) label dx offset
+		expect( result.current.left ).toBe( 51 );
 	} );
 
 	it( 'calculates right margin for right y axis', () => {
@@ -86,7 +87,8 @@ describe( 'useChartMargin', () => {
 			options.axis.y.tickFormat,
 			theme.axisStyles.y.right.axisLabel
 		);
-		expect( result.current.right ).toBe( 48 ); // 40 + 8
+		// 40 label width + 8 tick length + ceil(11 * 0.25) label dx offset
+		expect( result.current.right ).toBe( 51 );
 	} );
 
 	it( 'uses explicit y tickValues when provided', () => {
@@ -133,7 +135,8 @@ describe( 'useChartMargin', () => {
 		const height = 300;
 		const theme = baseTheme;
 		const { result } = renderHook( () => useChartMargin( height, options, data, theme ) );
-		expect( result.current.left ).toBe( 48 );
+		// 40 label width + 8 tick length + ceil(11 * 0.25) label dx offset
+		expect( result.current.left ).toBe( 51 );
 		expect( result.current.top ).toBe( 10 );
 		// 12px font + 8 tick length = 20
 		expect( result.current.bottom ).toBe( 20 );

package/src/hooks/use-chart-margin.tsx

@@ -114,7 +114,17 @@ export const useChartMargin = (
 			options.axis?.y?.tickFormat,
 			yAxisStyles.axisLabel
 		);
-		const yMarginValue = ( yTickWidth ?? DEFAULT_Y_TICK_WIDTH ) + ( yAxisStyles?.tickLength ?? 0 );
+		// visx's default axis theme pushes y-axis tick labels a further 0.25em
+		// away from the axis (dx of -0.25em on the left, 0.25em on the right), so
+		// reserve that on top of the measured label width — without it the widest
+		// label clips at the SVG edge. The em resolves against the tick label's own
+		// font size (theme tickLabel), not the axis-title font size (axisLabel).
+		const yTickLabelFontSize =
+			resolveFontSize( yAxisStyles?.tickLabel?.fontSize ) || DEFAULT_FONT_SIZE;
+		const yMarginValue =
+			( yTickWidth ?? DEFAULT_Y_TICK_WIDTH ) +
+			( yAxisStyles?.tickLength ?? 0 ) +
+			Math.ceil( yTickLabelFontSize * 0.25 );
 
 		if ( yAxisOrientation === 'right' ) {
 			defaultMargin.right = yMarginValue;

package/src/index.ts

@@ -72,7 +72,7 @@ export type {
 	PieSemiCircleChartProps,
 	PieSemiCircleChartRenderTooltipParams,
 } from './charts/pie-semi-circle-chart';
-export type { GeoChartProps, GeoRegion, GeoResolution } from './charts/geo-chart';
+export type { GeoChartProps, GeoRegion, GeoResolution, GeoChartError } from './charts/geo-chart';
 export type { LegendValueDisplay, BaseLegendItem } from './components/legend';
 export type { TrendIndicatorProps, TrendDirection } from './components/trend-indicator';
 export type { LineStyles, GridStyles, EventHandlerParams } from '@visx/xychart';