@automattic/charts 3.2.0 → 4.0.0

package/src/charts/line-chart/test/default-tooltip-formatting.test.tsx

@@ -0,0 +1,74 @@
+/**
+ * @jest-environment <rootDir>/tests/environment-los-angeles.mjs
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { GlobalChartsProvider } from '../../../providers';
+import LineChart, { renderDefaultTooltip } from '../line-chart';
+import type { DataPointDate } from '../../../types';
+import type { RenderTooltipParams } from '../../../visx/types';
+
+const mockRefCallback = jest.fn();
+jest.mock( '../../../hooks/use-element-size', () => ( {
+	useElementSize: () => [ mockRefCallback, 500, 300 ],
+} ) );
+
+// The instant below is Aug 2 in Los Angeles and Aug 3 in Tokyo, so a tooltip
+// that reads the runtime zone prints a different day from the axis.
+
+const date = new Date( '2026-08-02T15:30:00Z' );
+
+const params = {
+	tooltipData: {
+		nearestDatum: { key: 'Series A', datum: { date, value: 10 }, index: 0, distance: 0 },
+		datumByKey: { 'Series A': { key: 'Series A', datum: { date, value: 10 }, index: 0 } },
+	},
+} as unknown as RenderTooltipParams< DataPointDate >;
+
+describe( 'renderDefaultTooltip date heading', () => {
+	it( 'uses the locale and time zone from the provider', () => {
+		render(
+			<GlobalChartsProvider locale="de-DE" timeZone="Asia/Tokyo">
+				{ renderDefaultTooltip( params ) }
+			</GlobalChartsProvider>
+		);
+
+		expect( screen.getByText( '3.8.2026' ) ).toBeInTheDocument();
+	} );
+
+	it( 'falls back to the runtime locale and zone when the provider supplies none', () => {
+		render( <GlobalChartsProvider>{ renderDefaultTooltip( params ) }</GlobalChartsProvider> );
+
+		expect( screen.getByText( '8/2/2026' ) ).toBeInTheDocument();
+	} );
+
+	// The tooltip renders through a portal, so this is the only check that the
+	// provider's context actually reaches it inside a real chart.
+	it( 'reaches the tooltip a mounted chart opens', async () => {
+		const user = userEvent.setup();
+		render(
+			<GlobalChartsProvider locale="de-DE" timeZone="Asia/Tokyo">
+				<LineChart
+					width={ 500 }
+					height={ 300 }
+					withGradientFill={ false }
+					data={ [
+						{
+							label: 'Series A',
+							data: [
+								{ date, value: 10 },
+								{ date: new Date( date.getTime() + 24 * 60 * 60 * 1000 ), value: 20 },
+							],
+							options: {},
+						},
+					] }
+				/>
+			</GlobalChartsProvider>
+		);
+
+		screen.getByRole( 'grid', { name: /line chart/i } ).focus();
+		await user.keyboard( '{ArrowRight}' );
+
+		expect( screen.getByTestId( 'chart-tooltip-0' ) ).toHaveTextContent( '3.8.2026' );
+	} );
+} );

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

@@ -445,10 +445,11 @@ describe( 'LineChart', () => {
 				data: [
 					{
 						label: 'Series A',
-						// A day apart: spacing inference would read this as daily buckets.
+						// 23h apart (not 24, and not both midnight): spacing inference would
+						// read this as daily buckets, and the two hours format distinctly.
 						data: [
 							{ date: new Date( '2024-01-01T00:00:00' ), value: 10 },
-							{ date: new Date( '2024-01-02T00:00:00' ), value: 20 },
+							{ date: new Date( '2024-01-01T23:00:00' ), value: 20 },
 						],
 					},
 				],
@@ -458,6 +459,27 @@ describe( 'LineChart', () => {
 			expect( ticks.length ).toBeGreaterThan( 1 );
 		} );
 
+		// Exactly 24 hours apart: bare hours would print "12 AM" twice and leave the
+		// second day unnamed, so the span reads as multi-day and dates its ticks.
+		test( 'names both days when two sub-daily points sit a full day apart', () => {
+			renderWithTheme( {
+				width: 800,
+				options: { axis: { x: { tickResolution: 'hour' } } },
+				data: [
+					{
+						label: 'Series A',
+						data: [
+							{ date: new Date( '2024-01-01T00:00:00' ), value: 10 },
+							{ date: new Date( '2024-01-02T00:00:00' ), value: 20 },
+						],
+					},
+				],
+			} );
+
+			expect( screen.getByText( 'Jan 1' ) ).toBeInTheDocument();
+			expect( screen.getByText( 'Jan 2' ) ).toBeInTheDocument();
+		} );
+
 		test( 'renders ticks in short date format.', () => {
 			renderWithTheme( {
 				width: 800,
@@ -599,6 +621,8 @@ describe( 'LineChart', () => {
 			expect( ticks.length ).toBeLessThan( 6 ); // Not much space
 		} );
 
+		// One repeated instant carries no spacing, so the axis falls back to
+		// calendar dates rather than reading a zero gap as hourly buckets.
 		test( 'renders only one tick when all ticks are the same', () => {
 			renderWithTheme( {
 				width: 800,
@@ -614,7 +638,7 @@ describe( 'LineChart', () => {
 				],
 			} );
 
-			const ticks = screen.getAllByText( /\d+ [AP]M/ );
+			const ticks = screen.getAllByText( /^[A-Z][a-z]{2} \d{1,2}$/ );
 			expect( ticks ).toHaveLength( 1 );
 		} );
 	} );

package/src/charts/line-chart/test/tick-placement.test.tsx

@@ -0,0 +1,84 @@
+/**
+ * @jest-environment <rootDir>/tests/environment-los-angeles.mjs
+ */
+import { render, screen } from '@testing-library/react';
+import { GlobalChartsProvider } from '../../../providers';
+import LineChart from '../line-chart';
+
+const mockRefCallback = jest.fn();
+jest.mock( '../../../hooks/use-element-size', () => ( {
+	useElementSize: () => [ mockRefCallback, 500, 300 ],
+} ) );
+
+// Each instant below is one day in Los Angeles and the next in Tokyo.
+const data = [
+	{
+		label: 'Series A',
+		data: Array.from( { length: 8 }, ( _, index ) => ( {
+			date: new Date( new Date( '2026-08-02T15:30:00Z' ).getTime() + index * 86400000 ),
+			value: index,
+		} ) ),
+		options: {},
+	},
+];
+
+// A long series and a short one, so hiding the long one leaves visx a much
+// narrower domain than the whole dataset would give.
+const monthly = ( label: string, count: number ) => ( {
+	label,
+	data: Array.from( { length: count }, ( _, index ) => ( {
+		date: new Date( Date.UTC( 2026, index, 1, 12 ) ),
+		value: index,
+	} ) ),
+	options: {},
+} );
+
+describe( 'line chart tick placement', () => {
+	it( 'places one tick per host zone calendar day, with no gap', () => {
+		render(
+			<GlobalChartsProvider locale="en-US" timeZone="Asia/Tokyo">
+				<LineChart width={ 500 } height={ 300 } withGradientFill={ false } data={ data } />
+			</GlobalChartsProvider>
+		);
+
+		const ticks = screen.getAllByText( /^[A-Z][a-z]{2} \d{1,2}$/ );
+		expect( ticks.map( tick => tick.textContent ) ).toEqual( [
+			'Aug 3',
+			'Aug 4',
+			'Aug 5',
+			'Aug 6',
+			'Aug 7',
+			'Aug 8',
+			'Aug 9',
+			'Aug 10',
+		] );
+	} );
+
+	it( 'keeps every tick inside the axis when a series is hidden', () => {
+		const { container } = render(
+			<GlobalChartsProvider locale="en-US" timeZone="Asia/Tokyo">
+				<LineChart
+					width={ 500 }
+					height={ 300 }
+					withGradientFill={ false }
+					data={ [ monthly( 'Long', 12 ), monthly( 'Short', 3 ) ] }
+					defaultHiddenSeries={ [ 'Long' ] }
+				/>
+			</GlobalChartsProvider>
+		);
+
+		// The x axis renders before the y axis, and neither carries an orientation class.
+		/* eslint-disable testing-library/no-container, testing-library/no-node-access -- A tick's position is an SVG attribute no query reaches. */
+		const xAxis = container.querySelectorAll( '.visx-axis' )[ 0 ];
+		const offsets = Array.from( xAxis.querySelectorAll( '.visx-axis-tick text' ) ).map( tick =>
+			Number( tick.getAttribute( 'x' ) )
+		);
+		/* eslint-enable testing-library/no-container, testing-library/no-node-access */
+
+		expect( offsets.length ).toBeGreaterThan( 1 );
+		for ( const offset of offsets ) {
+			expect( offset ).toBeGreaterThanOrEqual( 0 );
+			expect( offset ).toBeLessThanOrEqual( 500 );
+		}
+	} );
+} );

package/src/charts/line-chart/test/tooltip-resolution.test.tsx

@@ -0,0 +1,140 @@
+/**
+ * @jest-environment <rootDir>/tests/environment-los-angeles.mjs
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { GlobalChartsProvider } from '../../../providers';
+import LineChart, { renderDefaultTooltip } from '../line-chart';
+import type { BucketInfo, DataPointDate } from '../../../types';
+import type { RenderTooltipParams } from '../../../visx/types';
+
+const mockRefCallback = jest.fn();
+jest.mock( '../../../hooks/use-element-size', () => ( {
+	useElementSize: () => [ mockRefCallback, 500, 300 ],
+} ) );
+
+const paramsFor = ( date: Date ) =>
+	( {
+		tooltipData: {
+			nearestDatum: { key: 'Series A', datum: { date, value: 10 }, index: 0, distance: 0 },
+			datumByKey: { 'Series A': { key: 'Series A', datum: { date, value: 10 }, index: 0 } },
+		},
+	} ) as unknown as RenderTooltipParams< DataPointDate >;
+
+const HOURLY: BucketInfo = { bucket: 'hour', displayResolution: 'hour' };
+const DAILY: BucketInfo = { bucket: 'day', displayResolution: 'day' };
+const MONTHLY: BucketInfo = { bucket: 'month', displayResolution: 'month' };
+const YEARLY: BucketInfo = { bucket: 'year', displayResolution: 'year' };
+
+// 09:30 and 13:30 on the same Tokyo calendar day.
+const morning = new Date( '2026-08-02T00:30:00Z' );
+const afternoon = new Date( '2026-08-02T04:30:00Z' );
+
+const headingFor = ( date: Date, bucketInfo?: BucketInfo, locale = 'en-US' ) => {
+	const { container, unmount } = render(
+		<GlobalChartsProvider locale={ locale } timeZone="Asia/Tokyo">
+			{ renderDefaultTooltip( { ...paramsFor( date ), bucketInfo } ) }
+		</GlobalChartsProvider>
+	);
+	const text = container.textContent ?? '';
+	unmount();
+	return text;
+};
+
+describe( 'default tooltip at hourly resolution', () => {
+	it( 'distinguishes two hours of the same day', () => {
+		expect( headingFor( morning, HOURLY ) ).not.toBe( headingFor( afternoon, HOURLY ) );
+	} );
+
+	it( 'names the hour in the host time zone', () => {
+		// Full de-DE/Asia/Tokyo heading: pins the date style and the hour together.
+		expect( headingFor( morning, HOURLY, 'de-DE' ) ).toContain( '2.8.2026, 09 Uhr' );
+	} );
+
+	it( 'keeps the day in the heading at month and year resolution', () => {
+		expect( headingFor( morning, MONTHLY, 'de-DE' ) ).toContain( '2.8.2026' );
+		expect( headingFor( morning, YEARLY, 'de-DE' ) ).toContain( '2.8.2026' );
+	} );
+
+	it( 'names no hour at daily resolution', () => {
+		expect( headingFor( morning, DAILY ) ).not.toContain( 'AM' );
+	} );
+
+	it( 'renders as a date when no bucketInfo is supplied', () => {
+		render(
+			<GlobalChartsProvider locale="de-DE" timeZone="Asia/Tokyo">
+				{ renderDefaultTooltip( paramsFor( new Date( '2026-08-02T15:30:00Z' ) ) ) }
+			</GlobalChartsProvider>
+		);
+
+		expect( screen.getByText( '3.8.2026' ) ).toBeInTheDocument();
+	} );
+
+	it( 'reaches the tooltip an hourly chart opens', async () => {
+		const user = userEvent.setup();
+		render(
+			<GlobalChartsProvider locale="de-DE" timeZone="Asia/Tokyo">
+				<LineChart
+					width={ 500 }
+					height={ 300 }
+					withGradientFill={ false }
+					options={ { axis: { x: { tickResolution: 'hour' } } } }
+					data={ [
+						{
+							label: 'Series A',
+							data: [
+								{ date: morning, value: 10 },
+								{ date: afternoon, value: 20 },
+							],
+							options: {},
+						},
+					] }
+				/>
+			</GlobalChartsProvider>
+		);
+
+		screen.getByRole( 'grid', { name: /line chart/i } ).focus();
+		await user.keyboard( '{ArrowRight}' );
+
+		expect( screen.getByTestId( 'chart-tooltip-0' ) ).toHaveTextContent( '2.8.2026, 09 Uhr' );
+	} );
+
+	it( 'drops the hour once the hourly series is hidden, as the axis does', async () => {
+		const user = userEvent.setup();
+		render(
+			<GlobalChartsProvider locale="de-DE" timeZone="Asia/Tokyo">
+				<LineChart
+					width={ 500 }
+					height={ 300 }
+					withGradientFill={ false }
+					defaultHiddenSeries={ [ 'Hourly' ] }
+					data={ [
+						{
+							label: 'Hourly',
+							data: [
+								{ date: morning, value: 10 },
+								{ date: afternoon, value: 20 },
+							],
+							options: {},
+						},
+						{
+							label: 'Daily',
+							data: [
+								{ date: morning, value: 5 },
+								{ date: new Date( '2026-08-03T00:30:00Z' ), value: 6 },
+							],
+							options: {},
+						},
+					] }
+				/>
+			</GlobalChartsProvider>
+		);
+
+		screen.getByRole( 'grid', { name: /line chart/i } ).focus();
+		await user.keyboard( '{ArrowRight}' );
+
+		const tooltip = screen.getByTestId( 'chart-tooltip-0' );
+		expect( tooltip ).toHaveTextContent( '2.8.2026' );
+		expect( tooltip ).not.toHaveTextContent( 'Uhr' );
+	} );
+} );

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

@@ -1,5 +1,6 @@
 import type {
 	BaseChartProps,
+	BucketInfo,
 	DataPointDate,
 	SeriesData,
 	SeriesChartLegendConfig,
@@ -37,7 +38,9 @@ export interface LineChartProps extends BaseChartProps< SeriesData[] >, SeriesVi
 	withGradientFill: boolean;
 	smoothing?: boolean;
 	curveType?: CurveType;
-	renderTooltip?: ( params: RenderTooltipParams< DataPointDate > ) => ReactNode;
+	renderTooltip?: (
+		params: RenderTooltipParams< DataPointDate > & { bucketInfo?: BucketInfo }
+	) => ReactNode;
 	withStartGlyphs?: boolean;
 	withEndGlyphs?: boolean;
 	renderGlyph?: < Datum extends object >( props: GlyphProps< Datum > ) => ReactNode;

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

@@ -1,5 +1,8 @@
 .pie-chart {
-	overflow: hidden;
+	// Anchors the tooltip, which renders next to the SVG in here.
+	&__plot {
+		position: relative;
+	}
 
 	// Fill parent when no explicit width/height provided
 	&--responsive {
@@ -7,4 +10,13 @@
 		width: 100%;
 	}
 
+	// Both literals are load-bearing: an undeclared role makes the
+	// `fill` invalid, and `fill` starts at black.
+	&__label-plate {
+		fill: var(--a8c-charts-color-label-background, transparent);
+	}
+
+	&__label-text {
+		fill: var(--a8c-charts-color-label-inverse, #f0f0f0);
+	}
 }

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

@@ -1,10 +1,11 @@
 import { Group } from '@visx/group';
 import { Pie } from '@visx/shape';
-import { useTooltip, useTooltipInPortal } from '@visx/tooltip';
+import { useTooltip } from '@visx/tooltip';
 import clsx from 'clsx';
-import { useCallback, useContext, useMemo } from 'react';
+import { useCallback, useContext, useMemo, useRef } from 'react';
 import { Legend, useChartLegendItems } from '../../components/legend';
 import { BaseTooltip } from '../../components/tooltip';
+import { BoundedTooltip } from '../../components/tooltip/private/bounded-tooltip';
 import {
 	useDataWithPercentages,
 	useLegendVisibilityData,
@@ -18,7 +19,7 @@ import {
 	useGlobalChartsTheme,
 	GlobalChartsContext,
 } from '../../providers';
-import { CHART_SCOPE_CLASS } from '../../styles/chart-scope-class';
+import { useStandaloneScopeClass } from '../../providers/chart-scope';
 import { attachSubComponents, resolveFontSize } from '../../utils';
 import { getStringWidth } from '../../visx/text';
 import { Center } from '../private/center';
@@ -196,14 +197,10 @@ const PieChartInternal = ( {
 	const chartId = useChartId( providedChartId );
 	const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } =
 		useTooltip< DataPointPercentageCalculated >();
+	const standaloneScopeClass = useStandaloneScopeClass();
 
-	// Set up portal tooltip for better z-index handling
-	// We get containerBounds to cancel out stale offsets in the position calculation
-	const { containerRef, TooltipInPortal, containerBounds } = useTooltipInPortal( {
-		detectBounds: true,
-		scroll: true,
-		debounce: 0,
-	} );
+	// The tooltip renders inside this element, so pointer coordinates are taken relative to it.
+	const containerRef = useRef< HTMLDivElement >( null );
 
 	const onMouseLeave = useCallback( () => {
 		if ( ! withTooltips ) {
@@ -325,13 +322,6 @@ const PieChartInternal = ( {
 				} }
 				trailingContent={
 					<>
-						{ withTooltips && tooltipOpen && tooltipData && (
-							<TooltipInPortal top={ tooltipTop || 0 } left={ tooltipLeft || 0 }>
-								<div className={ CHART_SCOPE_CLASS } role="tooltip">
-									{ renderTooltip( { tooltipData } ) }
-								</div>
-							</TooltipInPortal>
-						) }
 						{ htmlChildren }
 						{ otherChildren }
 					</>
@@ -359,7 +349,7 @@ const PieChartInternal = ( {
 						: 0;
 
 					return (
-						<Center ref={ containerRef }>
+						<Center ref={ containerRef } className={ styles[ 'pie-chart__plot' ] }>
 							<svg
 								viewBox={ `0 0 ${ width } ${ height }` }
 								preserveAspectRatio="xMidYMid meet"
@@ -403,20 +393,15 @@ const PieChartInternal = ( {
 															return;
 														}
 
-														// Don't show tooltip until container bounds are measured
-														if ( containerBounds.width === 0 || containerBounds.height === 0 ) {
+														const bounds = containerRef.current?.getBoundingClientRect();
+														if ( ! bounds ) {
 															return;
 														}
 
-														// Use clientX/Y and subtract containerBounds to cancel out any stale offset.
-														// TooltipInPortal calculates: tooltipLeft + containerBounds.left + scrollX
-														// By passing (clientX - containerBounds.left), we get:
-														// (clientX - containerBounds.left) + containerBounds.left + scrollX = clientX + scrollX
-														// This gives correct page coordinates regardless of stale bounds.
 														showTooltip( {
 															tooltipData: arc.data,
-															tooltipLeft: event.clientX - containerBounds.left + tooltipOffsetX,
-															tooltipTop: event.clientY - containerBounds.top + tooltipOffsetY,
+															tooltipLeft: event.clientX - bounds.left + tooltipOffsetX,
+															tooltipTop: event.clientY - bounds.top + tooltipOffsetY,
 														} );
 													};
 
@@ -450,23 +435,21 @@ const PieChartInternal = ( {
 															<path { ...pathProps } />
 															{ showLabels && hasSpaceForLabel && (
 																<g>
-																	{ providerTheme.labelBackgroundColor && (
-																		<rect
-																			x={ centroidX - backgroundWidth / 2 }
-																			y={ centroidY - backgroundHeight / 2 }
-																			width={ backgroundWidth }
-																			height={ backgroundHeight }
-																			fill={ providerTheme.labelBackgroundColor }
-																			rx={ 4 }
-																			ry={ 4 }
-																			pointerEvents="none"
-																		/>
-																	) }
+																	<rect
+																		className={ styles[ 'pie-chart__label-plate' ] }
+																		x={ centroidX - backgroundWidth / 2 }
+																		y={ centroidY - backgroundHeight / 2 }
+																		width={ backgroundWidth }
+																		height={ backgroundHeight }
+																		rx={ 4 }
+																		ry={ 4 }
+																		pointerEvents="none"
+																	/>
 																	<text
+																		className={ styles[ 'pie-chart__label-text' ] }
 																		x={ centroidX }
 																		y={ centroidY }
 																		dy=".33em"
-																		fill={ providerTheme.labelTextColor || '#333' }
 																		fontSize={ fontSize }
 																		textAnchor="middle"
 																		pointerEvents="none"
@@ -486,6 +469,13 @@ const PieChartInternal = ( {
 									{ ! allSegmentsHidden && svgChildren }
 								</Group>
 							</svg>
+							{ withTooltips && tooltipOpen && tooltipData && (
+								<BoundedTooltip top={ tooltipTop || 0 } left={ tooltipLeft || 0 }>
+									<div className={ standaloneScopeClass } role="tooltip">
+										{ renderTooltip( { tooltipData } ) }
+									</div>
+								</BoundedTooltip>
+							) }
 						</Center>
 					);
 				} }

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

@@ -621,3 +621,59 @@ describe( 'PieChart', () => {
 		} );
 	} );
 } );
+
+// Chart container at (100, 50); the tooltip box measures 120x40. Everything
+// else the charts measure (wrapper, clipping lookups) reports the container.
+const mockRects = () =>
+	jest.spyOn( Element.prototype, 'getBoundingClientRect' ).mockImplementation( function (
+		this: Element
+	) {
+		const box = this.classList.contains( 'visx-tooltip' );
+		return {
+			left: box ? 0 : 100,
+			top: box ? 0 : 50,
+			width: box ? 120 : 400,
+			height: box ? 40 : 300,
+			right: box ? 120 : 500,
+			bottom: box ? 40 : 350,
+			x: box ? 0 : 100,
+			y: box ? 0 : 50,
+			toJSON: () => ( {} ),
+		} as DOMRect;
+	} );
+
+describe( 'PieChart tooltip position', () => {
+	afterEach( () => {
+		jest.restoreAllMocks();
+	} );
+
+	test( 'places the box relative to the chart container, at the pointer plus the offsets', async () => {
+		mockRects();
+		const user = userEvent.setup();
+		render(
+			<GlobalChartsProvider>
+				<PieChart
+					data={ [
+						{ label: 'A', value: 60, valueDisplay: '60' },
+						{ label: 'B', value: 40, valueDisplay: '40' },
+					] }
+					width={ 400 }
+					height={ 300 }
+					withTooltips
+				/>
+			</GlobalChartsProvider>
+		);
+
+		await user.pointer( {
+			target: screen.getAllByTestId( 'pie-segment' )[ 0 ],
+			coords: { clientX: 150, clientY: 120 },
+		} );
+
+		// Pointer at (150, 120) is (50, 70) inside the container; the default
+		// -15px vertical offset makes that (50, 55), and the box adds 10px each way.
+		await expect( screen.findByRole( 'tooltip' ) ).resolves.toBeInTheDocument();
+		expect( screen.getByTestId( 'bounded-tooltip' ) ).toHaveStyle( {
+			transform: 'translate(60px, 65px)',
+		} );
+	} );
+} );

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

@@ -1,4 +1,9 @@
 .pie-semi-circle-chart {
+	// Anchors the tooltip, which renders next to the SVG in here.
+	&__plot {
+		position: relative;
+	}
+
 	// Fill parent when no explicit width/height provided
 	&--responsive {
 		height: 100%;
@@ -6,11 +11,11 @@
 	}
 
 	.label {
-		font-weight: var(--wpds-typography-font-weight-emphasis, 600);
-		font-size: var(--wpds-typography-font-size-lg, 15px);
+		font-weight: var(--wpds-typography-font-weight-emphasis);
+		font-size: var(--wpds-typography-font-size-lg);
 	}
 
 	.note {
-		font-size: var(--wpds-typography-font-size-md, 13px);
+		font-size: var(--wpds-typography-font-size-md);
 	}
 }