@automattic/charts 1.12.0 → 2.0.1

package/src/charts/private/time-axis.ts

@@ -2,6 +2,7 @@ import { curveCatmullRom, curveLinear, curveMonotoneX } from '@visx/curve';
 import { scaleTime } from '@visx/scale';
 import { differenceInHours, differenceInYears } from 'date-fns';
 import type { useChartDataTransform } from '../../hooks';
+import type { TickResolution } from '../../types';
 import type { CurveType } from '../line-chart/types';
 
 // Approximate min pixel width for an x-axis tick label.
@@ -32,38 +33,302 @@ export const getCurveType = ( type?: CurveType, smoothing?: boolean ): typeof cu
 	}
 };
 
-const formatYearTick = ( timestamp: number ) => {
-	const date = new Date( timestamp );
-	return date.toLocaleDateString( undefined, { year: 'numeric' } );
+// Built once and reused: these run per bucket over the whole band domain when
+// the axis picks its tick values, and `toLocaleDateString` rebuilds its
+// formatter on every call once an options object is passed.
+const dateTimeFormat = ( options: Intl.DateTimeFormatOptions ) => {
+	let formatter: Intl.DateTimeFormat;
+	return ( timestamp: number ) => {
+		// `Intl.DateTimeFormat` throws on an invalid date where the `Date`
+		// methods it replaces return "Invalid Date", and charts are expected to
+		// render past a bad point rather than fail.
+		// visx hands its tick formatter a `Date`, so coerce before the check.
+		if ( ! Number.isFinite( Number( timestamp ) ) ) {
+			return new Date( timestamp ).toLocaleDateString();
+		}
+		formatter = formatter ?? new Intl.DateTimeFormat( undefined, options );
+		return formatter.format( timestamp );
+	};
 };
 
-const formatDateTick = ( timestamp: number ) => {
-	const date = new Date( timestamp );
-	return date.toLocaleDateString( undefined, { month: 'short', day: 'numeric' } );
+const formatYearTick = dateTimeFormat( { year: 'numeric' } );
+
+const formatDateTick = dateTimeFormat( { month: 'short', day: 'numeric' } );
+
+const formatHourTick = dateTimeFormat( { hour: 'numeric', hour12: true } );
+
+const formatMonthTick = dateTimeFormat( { month: 'short' } );
+
+/**
+ * A tick format, carrying the boundary test that decides its coarser label.
+ *
+ * A band scale samples by index, so `getBandTickValues` has to steer ticks onto
+ * the boundaries a format prints the date or the year at. Hanging the test off
+ * the format that branches on it keeps the two from drifting apart.
+ */
+export type TickFormat = ( ( timestamp: number ) => string ) & {
+	isAnchor?: ( date: Date ) => boolean;
+};
+
+const boundaryFormat = (
+	isAnchor: ( date: Date ) => boolean,
+	atBoundary: ( timestamp: number ) => string,
+	between: ( timestamp: number ) => string
+): TickFormat => {
+	const format: TickFormat = ( timestamp: number ) =>
+		isAnchor( new Date( timestamp ) ) ? atBoundary( timestamp ) : between( timestamp );
+	format.isAnchor = isAnchor;
+	return format;
+};
+
+// Hour ticks with the date at midnight boundaries, so multi-day spans of
+// sub-daily data keep their days identifiable.
+const formatDateOrHourTick = boundaryFormat(
+	date => date.getHours() === 0 && date.getMinutes() === 0,
+	formatDateTick,
+	formatHourTick
+);
+
+// Month ticks with the year at January boundaries, for month-or-coarser
+// buckets where a full "Sep 1" date would misread as a daily point.
+const formatMonthOrYearTick = boundaryFormat(
+	date => date.getMonth() === 0,
+	formatYearTick,
+	formatMonthTick
+);
+
+// Overall time span of the data. Series with no dated points are dropped rather
+// than folded in: an empty comparison series is legitimate, and one undefined
+// bound would turn the whole span into NaN. Null when nothing is dated.
+const getSpan = ( sortedData: ReturnType< typeof useChartDataTransform > ) => {
+	const bounds = sortedData
+		.map( datom => [ datom.data.at( 0 )?.date, datom.data.at( -1 )?.date ] )
+		.filter( ( [ first, last ] ) => first !== undefined && last !== undefined );
+
+	if ( ! bounds.length ) {
+		return null;
+	}
+
+	return {
+		minX: Math.min( ...bounds.map( ( [ first ] ) => Number( first ) ) ),
+		maxX: Math.max( ...bounds.map( ( [ , last ] ) => Number( last ) ) ),
+	};
 };
 
-const formatHourTick = ( timestamp: number ) => {
-	const date = new Date( timestamp );
-	return date.toLocaleTimeString( undefined, { hour: 'numeric', hour12: true } );
+// Smallest interval between consecutive points across all series, in hours.
+// Infinity when no series has two points.
+const getPointSpacingInHours = ( sortedData: ReturnType< typeof useChartDataTransform > ) => {
+	return sortedData.reduce(
+		( spacing, datom ) =>
+			datom.data.reduce( ( seriesSpacing, point, index ) => {
+				const previous = datom.data[ index - 1 ];
+				if ( previous?.date === undefined || point?.date === undefined ) {
+					return seriesSpacing;
+				}
+				return Math.min(
+					seriesSpacing,
+					Math.abs( differenceInHours( point.date, previous.date ) )
+				);
+			}, spacing ),
+		Number.POSITIVE_INFINITY
+	);
 };
 
-// Pick the most informative tick formatter for the data's time span: hours
-// within a day, calendar dates within a year, otherwise just years.
-export const getFormatter = ( sortedData: ReturnType< typeof useChartDataTransform > ) => {
-	const minX = Math.min( ...sortedData.map( datom => datom.data.at( 0 )?.date ) );
-	const maxX = Math.max( ...sortedData.map( datom => datom.data.at( -1 )?.date ) );
+// 23, not 24: a daily gap shrinks to 23 wall-clock hours across a
+// spring-forward DST transition.
+const SUB_DAILY_SPACING_HOURS = 23;
+
+// The shortest month, so monthly buckets clear it but weekly ones don't.
+const MONTHLY_SPACING_HOURS = 28 * 24;
+
+// The bucket size behind the data, as the resolution label the tick formats are
+// keyed on. Exported so consumers that label a single point — bar chart
+// tooltips — read the same classification the axis does instead of inferring
+// the resolution a second way. Weeks report as 'day': both are calendar-date
+// buckets as far as labelling goes.
+export const getBucketResolution = (
+	sortedData: ReturnType< typeof useChartDataTransform >,
+	tickResolution?: TickResolution
+): Exclude< TickResolution, 'week' > => {
+	if ( tickResolution ) {
+		return tickResolution === 'week' ? 'day' : tickResolution;
+	}
 
-	const diffInHours = Math.abs( differenceInHours( maxX, minX ) );
-	if ( diffInHours <= 24 ) {
-		return formatHourTick;
+	const spacingInHours = getPointSpacingInHours( sortedData );
+	if ( spacingInHours < SUB_DAILY_SPACING_HOURS ) {
+		return 'hour';
 	}
+	// Fewer than two points leaves the spacing unknowable, so fall back to
+	// calendar dates rather than reading Infinity as a very coarse bucket.
+	if ( ! Number.isFinite( spacingInHours ) || spacingInHours < MONTHLY_SPACING_HOURS ) {
+		return 'day';
+	}
+	// Twelve shortest months: above any monthly gap (31 days at most) and below
+	// any yearly one (365 days at least).
+	return spacingInHours < 12 * MONTHLY_SPACING_HOURS ? 'month' : 'year';
+};
+
+// Pick the most informative tick formatter for the data's bucket resolution and
+// time span. Month-or-coarser buckets are formatted from the resolution alone —
+// they carry no day to print at any span — while finer buckets narrow with the
+// span: hours within a day, hours with day boundaries for sub-daily data
+// spanning up to a week, calendar dates within a year, otherwise years.
+export const getFormatter = (
+	sortedData: ReturnType< typeof useChartDataTransform >,
+	tickResolution?: TickResolution
+): TickFormat => {
+	const resolution = getBucketResolution( sortedData, tickResolution );
 
-	const diffInYears = Math.abs( differenceInYears( maxX, minX ) );
-	if ( diffInYears <= 1 ) {
+	// The month regime only prints the year at January boundaries, so yearly
+	// buckets starting mid-year would render as bare month names.
+	if ( resolution === 'year' ) {
+		return formatYearTick;
+	}
+
+	if ( resolution === 'month' ) {
+		return formatMonthOrYearTick;
+	}
+
+	const span = getSpan( sortedData );
+	if ( ! span ) {
 		return formatDateTick;
 	}
 
-	return formatYearTick;
+	const diffInHours = Math.abs( differenceInHours( span.maxX, span.minX ) );
+	if ( resolution === 'hour' ) {
+		if ( diffInHours <= 24 ) {
+			return formatHourTick;
+		}
+		if ( diffInHours <= 24 * 7 ) {
+			return formatDateOrHourTick;
+		}
+	}
+
+	// Beyond a year, dates repeat often enough under tick sampling that the year
+	// is the only part worth printing.
+	return Math.abs( differenceInYears( span.maxX, span.minX ) ) <= 1
+		? formatDateTick
+		: formatYearTick;
+};
+
+// Indices of the buckets whose label carries the coarser unit.
+const getAnchorIndices = ( domain: Date[], isAnchor: ( date: Date ) => boolean ) =>
+	domain.reduce< number[] >( ( indices, date, index ) => {
+		if ( isAnchor( date ) ) {
+			indices.push( index );
+		}
+		return indices;
+	}, [] );
+
+// Index strides worth sampling the domain at. Both roundings of each tick count
+// are needed: flooring alone skips the stride that fits a mid-series anchor on
+// short domains. Anchors add the strides that can land on more than one of them
+// — those dividing their spacing, and the smallest whole multiple that still
+// fits, which carries spans too long for any divisor to reach.
+const getCandidateSteps = ( length: number, maxTicks: number, anchorSpacing: number | null ) => {
+	const steps = new Set< number >();
+	for ( let count = maxTicks; count > 1; count-- ) {
+		steps.add( Math.max( 1, Math.floor( ( length - 1 ) / ( count - 1 ) ) ) );
+		steps.add( Math.max( 1, Math.ceil( ( length - 1 ) / ( count - 1 ) ) ) );
+	}
+
+	if ( anchorSpacing ) {
+		for ( let divisor = 1; divisor <= anchorSpacing; divisor++ ) {
+			if ( anchorSpacing % divisor === 0 ) {
+				steps.add( anchorSpacing / divisor );
+			}
+		}
+		const minStep = Math.floor( ( length - 1 ) / Math.max( 1, maxTicks ) ) + 1;
+		steps.add( Math.ceil( minStep / anchorSpacing ) * anchorSpacing );
+	}
+
+	return steps;
+};
+
+/**
+ * Tick values for a band time axis.
+ *
+ * visx samples a band domain by index from offset zero, blind to which labels
+ * carry a boundary and without collapsing repeats — so the tick that prints the
+ * year or the date often isn't sampled at all, and a long series can show the
+ * same label twice. Choose the values instead: sweep the evenly spaced
+ * candidates, including those that step from anchor to anchor, and keep the one
+ * that reaches the most anchors without thinning the axis or putting two
+ * identical labels side by side.
+ *
+ * @param domain        - Band domain, in axis order.
+ * @param tickFormatter - Formatter the axis will render these values with.
+ * @param maxTicks      - Most ticks the axis should carry.
+ * @return Values to hand the axis as `tickValues`.
+ */
+export const getBandTickValues = (
+	domain: Date[],
+	tickFormatter: TickFormat,
+	maxTicks: number
+): Date[] => {
+	if ( ! domain.length ) {
+		return [];
+	}
+
+	const { isAnchor } = tickFormatter;
+	const anchorIndices = isAnchor ? getAnchorIndices( domain, isAnchor ) : [];
+
+	// Once per bucket rather than once per bucket per candidate: the sweep reads
+	// the same labels back for every step and offset.
+	const domainLabels = domain.map( date => tickFormatter( date.getTime() ) );
+
+	const candidates: number[][] = [];
+	const consider = ( indices: number[] ) => {
+		if ( ! indices.length || indices.length > maxTicks ) {
+			return;
+		}
+		const repeats = indices.some(
+			( index, position ) =>
+				position > 0 && domainLabels[ index ] === domainLabels[ indices[ position - 1 ] ]
+		);
+		if ( ! repeats ) {
+			candidates.push( indices );
+		}
+	};
+
+	const anchorSpacing = anchorIndices.length > 1 ? anchorIndices[ 1 ] - anchorIndices[ 0 ] : null;
+	for ( const step of getCandidateSteps( domain.length, maxTicks, anchorSpacing ) ) {
+		for ( let offset = 0; offset < step; offset++ ) {
+			const indices: number[] = [];
+			for ( let index = offset; index < domain.length; index += step ) {
+				indices.push( index );
+			}
+			consider( indices );
+		}
+	}
+
+	// Stepping the anchors themselves rather than the domain, so that anchors an
+	// uneven number of buckets apart are still all reachable — a wall-clock day
+	// is 23 buckets of hourly data across a spring-forward DST transition, and a
+	// fixed stride drifts off midnight for the rest of the span.
+	for ( let stride = 1; stride <= anchorIndices.length; stride++ ) {
+		consider( anchorIndices.filter( ( _, position ) => position % stride === 0 ) );
+	}
+
+	if ( ! candidates.length ) {
+		return [ domain[ 0 ] ];
+	}
+
+	// An anchor is worth at most one tick. Ranking anchors above density outright
+	// collapsed ordinary monthly axes to two ticks — worse than sampling by index,
+	// which at least stayed dense — while ignoring anchors leaves the year unnamed.
+	const densest = candidates.reduce( ( most, indices ) => Math.max( most, indices.length ), 0 );
+	const anchorsIn = ( indices: number[] ) =>
+		isAnchor ? indices.filter( index => isAnchor( domain[ index ] ) ).length : 0;
+
+	const best = candidates
+		.filter( indices => indices.length >= densest - 1 )
+		.reduce( ( chosen, indices ) => {
+			const gain = anchorsIn( indices ) - anchorsIn( chosen );
+			return gain > 0 || ( gain === 0 && indices.length > chosen.length ) ? indices : chosen;
+		} );
+
+	return best.map( index => domain[ index ] );
 };
 
 // Estimate the largest number of x-axis ticks that fit without producing
@@ -74,9 +339,12 @@ export const guessOptimalNumTicks = (
 	chartWidth: number,
 	tickFormatter: ( timestamp: number, index?: number, values?: unknown ) => string
 ) => {
-	const minX = Math.min( ...data.map( datom => datom.data.at( 0 )?.date ) );
-	const maxX = Math.max( ...data.map( datom => datom.data.at( -1 )?.date ) );
-	const xScale = scaleTime( { domain: [ minX, maxX ] } );
+	const span = getSpan( data );
+	if ( ! span ) {
+		return 1;
+	}
+
+	const xScale = scaleTime( { domain: [ span.minX, span.maxX ] } );
 
 	const upperBound = Math.min(
 		data[ 0 ]?.data.length || 3,

package/src/charts/private/x-zoom/test/x-zoom.test.tsx

@@ -1,6 +1,6 @@
-import { act, render, renderHook, screen } from '@testing-library/react';
+import { act, render, renderHook, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { useRef } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { useXZoom, ZoomResetButton } from '../index';
 import type { SingleChartRef } from '../../single-chart-context';
 import type { EventHandlerParams } from '@visx/xychart';
@@ -147,17 +147,35 @@ const preventDefaultKeydown = ( event: ReactKeyboardEvent< HTMLDivElement > ) =>
 	event.preventDefault();
 
 describe( 'ZoomResetButton', () => {
-	test( 'renders a labelled button with a hover tooltip', () => {
+	test( 'renders a labelled button without a native title tooltip', () => {
 		const noop = jest.fn();
 		render( <ZoomResetButton onClick={ noop } /> );
 		const button = screen.getByTestId( 'chart-zoom-reset' );
 		expect( button.tagName ).toBe( 'BUTTON' );
 		expect( button ).toHaveClass( 'x-zoom__reset' );
 		expect( button ).toHaveAccessibleName( 'Reset zoom' );
-		// WPDS `IconButton` would supply a tooltip of its own, but it pulls in a
-		// CommonJS dependency that breaks Script Module consumers (see
-		// ZoomResetButton). `title` restores the hover hint on plain `Button`.
-		expect( button ).toHaveAttribute( 'title', 'Reset zoom' );
+		// IconButton renders a real tooltip, so the `title` fallback is gone —
+		// `title` is invisible to keyboard users and cannot be dismissed.
+		expect( button ).not.toHaveAttribute( 'title' );
+	} );
+
+	test( 'shows a tooltip on keyboard focus', async () => {
+		const noop = jest.fn();
+		render( <ZoomResetButton onClick={ noop } /> );
+		await userEvent.tab();
+		expect( screen.getByTestId( 'chart-zoom-reset' ) ).toHaveFocus();
+		// The button's only text is the tooltip's — its own label is an
+		// `aria-label` attribute, so this cannot match the trigger.
+		await expect( screen.findByText( 'Reset zoom' ) ).resolves.toBeVisible();
+	} );
+
+	test( 'dismisses the tooltip on Escape', async () => {
+		const noop = jest.fn();
+		render( <ZoomResetButton onClick={ noop } /> );
+		await userEvent.tab();
+		await expect( screen.findByText( 'Reset zoom' ) ).resolves.toBeVisible();
+		await userEvent.keyboard( '{Escape}' );
+		await waitFor( () => expect( screen.queryByText( 'Reset zoom' ) ).not.toBeInTheDocument() );
 	} );
 
 	test( 'fires onClick when activated', async () => {
@@ -167,6 +185,33 @@ describe( 'ZoomResetButton', () => {
 		expect( onClick ).toHaveBeenCalledTimes( 1 );
 	} );
 
+	test( 'leaves no orphaned tooltip when activation unmounts the button', async () => {
+		// Resetting the zoom unmounts this control while its tooltip is open.
+		// The tooltip renders in a portal outside the container, so a missed
+		// cleanup would strand it on the page rather than remove it with the
+		// button.
+		/**
+		 * Mirrors the host charts: the reset control exists only while zoomed.
+		 *
+		 * @return JSX element or null.
+		 */
+		function Host() {
+			const [ zoomed, setZoomed ] = useState( true );
+			const unzoom = useCallback( () => setZoomed( false ), [] );
+			return zoomed ? <ZoomResetButton onClick={ unzoom } /> : null;
+		}
+		render( <Host /> );
+		await userEvent.tab();
+		await expect( screen.findByText( 'Reset zoom' ) ).resolves.toBeVisible();
+
+		await userEvent.keyboard( '{Enter}' );
+
+		await waitFor( () =>
+			expect( screen.queryByTestId( 'chart-zoom-reset' ) ).not.toBeInTheDocument()
+		);
+		expect( document.body ).not.toHaveTextContent( 'Reset zoom' );
+	} );
+
 	test( 'keyboard activation survives the chart wrapper keydown handler', async () => {
 		const onClick = jest.fn();
 		// Mirrors the chart's grid wrapper, whose keyboard-navigation handler

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

@@ -11,26 +11,18 @@
 		pointer-events: none;
 	}
 
-	// Overlay placement and icon-only geometry — the visual treatment (border,
-	// hover/focus, sizing) comes from the WPDS Button. The elevation shadow is
-	// deliberately kept for separation from chart content (CHARTS-237
-	// design call, carrying over CHARTS-200's tokenization).
+	// The elevation shadow is deliberately kept for separation
+	// from chart content (CHARTS-237 design call, carrying
+	// over CHARTS-200's tokenization). `@wordpress/theme` 1.0.0
+	// dropped the `--wpds-elevation-*` group, so this role carries
+	// the former token's spec value directly rather than nesting
+	// a `--wpds-*` var.
 	&__reset {
 		position: absolute;
 		top: var(--wpds-dimension-gap-sm, 8px);
 		right: var(--wpds-dimension-gap-sm, 8px);
 		z-index: 2;
-		box-shadow: var(--wpds-elevation-xs, 0 1px 1px 0 #00000008, 0 1px 2px 0 #00000005, 0 3px 3px 0 #00000005, 0 4px 4px 0 #00000003);
-
-		// `Button` is sized for a text label. These are the same three custom
-		// properties @wordpress/ui's own IconButton composition sets to make a
-		// square icon-only control; we set them directly because IconButton
-		// itself cannot be used here — it renders a Base UI tooltip, whose
-		// CommonJS `use-sync-external-store` dependency makes Rolldown emit a
-		// dynamic `require()` that throws in Script Module consumers.
-		--wp-ui-button-aspect-ratio: 1;
-		--wp-ui-button-padding-inline: 0;
-		--wp-ui-button-min-width: unset;
+		box-shadow: var(--a8c-charts-elevation-xs, 0 1px 1px 0 #00000008, 0 1px 2px 0 #00000005, 0 3px 3px 0 #00000005, 0 4px 4px 0 #00000003);
 
 		// WPDS outline-neutral is transparent-bodied at rest; give this
 		// floating control an opaque body so chart content doesn't show

package/src/charts/private/x-zoom/x-zoom.tsx

@@ -1,6 +1,6 @@
 import { DataContext } from '@visx/xychart';
 import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/ui';
+import { IconButton } from '@wordpress/ui';
 import { useCallback, useContext, useMemo, useState } from 'react';
 import styles from './x-zoom.module.scss';
 import type { SingleChartRef } from '../single-chart-context';
@@ -172,14 +172,8 @@ export function ZoomClip( {
 
 /**
  * Visible icon-only reset control rendered as an HTML overlay on top of the
- * chart container, using the WPDS `Button`. The host should wrap its SVG in a
- * `position: relative` container so the button anchors correctly.
- *
- * `IconButton` would be the natural fit, but it renders a Base UI tooltip whose
- * CommonJS `use-sync-external-store` dependency makes Rolldown emit a dynamic
- * `require()` into `dist`, which throws on evaluation in WordPress Script
- * Module consumers. `Button` gives the same treatment without that dependency;
- * the tooltip is replaced by `aria-label` + `title`.
+ * chart container, using the WPDS `IconButton`. The host should wrap its SVG in
+ * a `position: relative` container so the button anchors correctly.
  *
  * @param props         - Props.
  * @param props.onClick - Click handler. Typically the `reset` from `useXZoom`.
@@ -194,44 +188,39 @@ export function ZoomResetButton( { onClick }: { onClick: () => void } ) {
 			event.stopPropagation();
 		}
 	}, [] );
-	const label = __( 'Reset zoom', 'jetpack-charts' );
 	return (
-		<Button
+		<IconButton
 			className={ styles[ 'x-zoom__reset' ] }
 			onKeyDown={ stopActivationKeys }
-			aria-label={ label }
-			title={ label }
+			label={ __( 'Reset zoom', 'jetpack-charts' ) }
 			variant="outline"
 			tone="neutral"
 			size="small"
 			onClick={ onClick }
 			data-testid="chart-zoom-reset"
-		>
-			<Button.Icon
-				icon={
-					<svg
-						viewBox="0 0 24 24"
-						fill="none"
-						stroke="currentColor"
-						strokeWidth="2"
-						strokeLinecap="round"
-						strokeLinejoin="round"
-						aria-hidden="true"
-						focusable="false"
-					>
-						{ /*
-							Icons render edge-to-edge at 24px, so inset the glyph the
-							way @wordpress/icons glyphs do (drawn within roughly 4-20
-							of the viewBox, ~1.5px effective stroke).
-						*/ }
-						<g transform="translate(2.4 2.4) scale(0.8)">
-							<circle cx="10" cy="10" r="6" />
-							<line x1="15" y1="15" x2="20" y2="20" />
-							<line x1="7" y1="10" x2="13" y2="10" />
-						</g>
-					</svg>
-				}
-			/>
-		</Button>
+			icon={
+				<svg
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					strokeWidth="2"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+					aria-hidden="true"
+					focusable="false"
+				>
+					{ /*
+						Icons render edge-to-edge at 24px, so inset the glyph the
+						way @wordpress/icons glyphs do (drawn within roughly 4-20
+						of the viewBox, ~1.5px effective stroke).
+					*/ }
+					<g transform="translate(2.4 2.4) scale(0.8)">
+						<circle cx="10" cy="10" r="6" />
+						<line x1="15" y1="15" x2="20" y2="20" />
+						<line x1="7" y1="10" x2="13" y2="10" />
+					</g>
+				</svg>
+			}
+		/>
 	);
 }

package/src/components/legend/private/base-legend.module.scss

@@ -54,6 +54,6 @@
 }
 
 .legend-item-value {
-	font-weight: var(--wpds-typography-font-weight-medium, 499);
+	font-weight: var(--wpds-typography-font-weight-emphasis, 499);
 	flex-shrink: 0; // Prevent value from shrinking when text is ellipsized
 }

package/src/components/legend/test/legend.test.tsx

@@ -188,7 +188,8 @@ describe( 'BaseLegend', () => {
 			);
 			const labels = screen.getAllByText( /Long Label/ );
 			labels.forEach( label => {
-				expect( label ).toHaveStyle( { maxWidth: '10rem' } );
+				// Note getComputedStyle converts lengths to px.
+				expect( label ).toHaveStyle( { maxWidth: '160px' } );
 			} );
 		} );
 

package/src/components/tooltip/base-tooltip.module.scss

@@ -8,7 +8,7 @@
 	color: #fff;
 	border-radius: var(--wpds-border-radius-md, 4px);
 	font-size: var(--wpds-typography-font-size-md, 13px);
-	box-shadow: var(--wpds-elevation-sm, 0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005);
+	box-shadow: var(--a8c-charts-elevation-sm, 0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005);
 	position: absolute;
 	pointer-events: none;
 	transform: translate(-50%, -100%);

package/src/components/trend-indicator/test/trend-indicator.test.tsx

@@ -74,8 +74,9 @@ describe( 'TrendIndicator', () => {
 			<TrendIndicator direction="up" value="+10%" style={ { fontSize: '2rem' } } />
 		);
 
+		// Note getComputedStyle converts lengths to px.
 		// eslint-disable-next-line testing-library/no-node-access
-		expect( container.firstChild ).toHaveStyle( { fontSize: '2rem' } );
+		expect( container.firstChild ).toHaveStyle( { fontSize: '32px' } );
 	} );
 
 	describe( 'accessibility', () => {

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

@@ -3,7 +3,7 @@
 	align-items: center;
 	gap: 0.125em;
 	font-size: var(--wpds-typography-font-size-md, 13px);
-	font-weight: var(--wpds-typography-font-weight-medium, 499);
+	font-weight: var(--wpds-typography-font-weight-emphasis, 499);
 	line-height: 1;
 
 	// Trend colours use the --a8c-charts-color-trend-* catalog roles, falling back