@automattic/charts 1.8.0 → 1.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "1.8.0",
+	"version": "1.9.0",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {
@@ -63,7 +63,7 @@
 		"typecheck": "tsgo --noEmit"
 	},
 	"dependencies": {
-		"@automattic/number-formatters": "^1.2.4",
+		"@automattic/number-formatters": "^1.2.5",
 		"@babel/runtime": "7.29.7",
 		"@react-spring/web": "10.1.1",
 		"@visx/annotation": "^4.0.0",
@@ -97,8 +97,8 @@
 	"devDependencies": {
 		"@automattic/jetpack-webpack-config": "workspace:*",
 		"@babel/core": "^7.29.7",
-		"@storybook/addon-docs": "10.3.6",
-		"@storybook/react": "10.3.6",
+		"@storybook/addon-docs": "10.4.6",
+		"@storybook/react": "10.4.6",
 		"@testing-library/dom": "^10.0.0",
 		"@testing-library/jest-dom": "^6.0.0",
 		"@testing-library/react": "^16.0.0",
@@ -109,9 +109,9 @@
 		"@types/react-dom": "18.3.7",
 		"@typescript/native-preview": "7.0.0-dev.20260225.1",
 		"@visx/glyph": "4.0.0",
-		"@wordpress/components": "35.0.1",
-		"@wordpress/element": "8.0.1",
-		"@wordpress/private-apis": "1.48.1",
+		"@wordpress/components": "36.1.0",
+		"@wordpress/element": "8.2.0",
+		"@wordpress/private-apis": "1.50.0",
 		"babel-jest": "30.4.1",
 		"identity-obj-proxy": "^3.0.0",
 		"jest": "30.4.2",
@@ -120,7 +120,7 @@
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
 		"sass-embedded": "1.97.3",
-		"storybook": "10.3.6",
+		"storybook": "10.4.6",
 		"tsdown": "0.22.2",
 		"typescript": "5.9.3"
 	},

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

@@ -6,7 +6,9 @@
 		path {
 			transform-origin: 0 95%;
 			transform: scaleY(0);
-			animation: rise 1s ease-out forwards;
+			animation:
+				rise var(--wpds-motion-duration-xl, 400ms)
+				var(--wpds-motion-easing-expressive, cubic-bezier(0.25, 0, 0, 1)) forwards;
 		}
 	}
 

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

@@ -27,7 +27,7 @@ import {
 	useGlobalChartsContext,
 	useGlobalChartsTheme,
 } from '../../providers';
-import { attachSubComponents } from '../../utils';
+import { attachSubComponents, resolveCssVariable } from '../../utils';
 import { renderDefaultTooltip } from '../line-chart';
 import { useChartChildren } from '../private/chart-composition';
 import { ChartLayout } from '../private/chart-layout';
@@ -461,7 +461,10 @@ const AreaChartInternal = forwardRef< SingleChartRef, AreaChartProps >(
 														stacked={ stacked }
 														stackOffset={ stackOffset }
 														getElementStyles={ getElementStyles }
-														strokeColor={ providerTheme.backgroundColor }
+														strokeColor={
+															resolveCssVariable( providerTheme.backgroundColor ) ??
+															providerTheme.backgroundColor
+														}
 													/>
 												</>
 											) }

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

@@ -8,7 +8,9 @@
 		transform-origin: bottom;
 		transform-box: fill-box;
 		transform: scaleY(0);
-		animation: rise 1s ease-out forwards;
+		animation:
+			rise var(--wpds-motion-duration-xl, 400ms)
+			var(--wpds-motion-easing-expressive, cubic-bezier(0.25, 0, 0, 1)) forwards;
 	}
 
 	@keyframes rise {
@@ -22,7 +24,9 @@
 		transform-origin: left;
 		transform-box: fill-box;
 		transform: scaleX(0);
-		animation: stretch 1s ease-out forwards;
+		animation:
+			stretch var(--wpds-motion-duration-xl, 400ms)
+			var(--wpds-motion-easing-expressive, cubic-bezier(0.25, 0, 0, 1)) forwards;
 	}
 
 	@keyframes stretch {

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

@@ -1,7 +1,7 @@
 import { formatNumber } from '@automattic/number-formatters';
 import { PatternLines, PatternCircles, PatternWaves, PatternHexagons } from '@visx/pattern';
 import { Axis, BarSeries, BarGroup, Grid, XYChart } from '@visx/xychart';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { useCallback, useContext, useState, useRef, useMemo } from 'react';
 import { Legend, useChartLegendItems } from '../../components/legend';
@@ -83,6 +83,19 @@ const validateData = ( data: SeriesData[] ) => {
 
 const getPatternId = ( chartId: string, index: number ) => `bar-pattern-${ chartId }-${ index }`;
 
+// A "label: value" tooltip row. The join is a translated format string so the
+// separator (a colon + space here) can be adapted per locale.
+const renderTooltipRow = ( label: string | undefined, value: string ) => (
+	<div className={ styles[ 'bar-chart__tooltip-row' ] }>
+		{ sprintf(
+			/* translators: 1: data series, period, or category label. 2: its formatted value. */
+			__( '%1$s: %2$s', 'jetpack-charts' ),
+			label,
+			value
+		) }
+	</div>
+);
+
 const BarChartInternal: FC< BarChartProps > = ( {
 	data,
 	chartId: providedChartId,
@@ -191,6 +204,14 @@ const BarChartInternal: FC< BarChartProps > = ( {
 		[ primaryEntries ]
 	);
 
+	// The keyboard-navigation index space and the highlight CSS both stride over primary
+	// bars only; the accessible tooltip must use the same list, or its datum diverges from
+	// the highlighted bar once a comparison series shifts the indices.
+	const primarySeries = useMemo(
+		() => primaryEntries.map( ( { series } ) => series ),
+		[ primaryEntries ]
+	);
+
 	const comparisonEntries = useMemo( () => {
 		const primaryByGroup = new Map< string | undefined, { label: string; index: number } >(
 			primaryEntries.map( ( { series, index } ) => [
@@ -309,20 +330,11 @@ const BarChartInternal: FC< BarChartProps > = ( {
 				return (
 					<div className={ styles[ 'bar-chart__tooltip' ] }>
 						<div className={ styles[ 'bar-chart__tooltip-header' ] }>{ categoryLabel }</div>
-						<div className={ styles[ 'bar-chart__tooltip-row' ] }>
-							<span className={ styles[ 'bar-chart__tooltip-label' ] }>{ primaryKey }:</span>
-							<span className={ styles[ 'bar-chart__tooltip-value' ] }>
-								{ formatNumber( nearestDatum.value as number ) }
-							</span>
-						</div>
-						<div className={ styles[ 'bar-chart__tooltip-row' ] }>
-							<span className={ styles[ 'bar-chart__tooltip-label' ] }>
-								{ comparisonEntry.series.label }:
-							</span>
-							<span className={ styles[ 'bar-chart__tooltip-value' ] }>
-								{ formatNumber( comparisonDatum.value as number ) }
-							</span>
-						</div>
+						{ renderTooltipRow( primaryKey, formatNumber( nearestDatum.value as number ) ) }
+						{ renderTooltipRow(
+							comparisonEntry.series.label,
+							formatNumber( comparisonDatum.value as number )
+						) }
 					</div>
 				);
 			}
@@ -330,12 +342,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
 			return (
 				<div className={ styles[ 'bar-chart__tooltip' ] }>
 					<div className={ styles[ 'bar-chart__tooltip-header' ] }>{ primaryKey }</div>
-					<div className={ styles[ 'bar-chart__tooltip-row' ] }>
-						<span className={ styles[ 'bar-chart__tooltip-label' ] }>{ categoryLabel }:</span>
-						<span className={ styles[ 'bar-chart__tooltip-value' ] }>
-							{ formatNumber( nearestDatum.value as number ) }
-						</span>
-					</div>
+					{ renderTooltipRow( categoryLabel, formatNumber( nearestDatum.value as number ) ) }
 				</div>
 			);
 		},
@@ -622,7 +629,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
 												keyboardFocusedClassName={
 													styles[ 'bar-chart__tooltip--keyboard-focused' ]
 												}
-												series={ data }
+												series={ primarySeries }
 												mode="individual"
 											/>
 										) }

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

@@ -10,6 +10,12 @@ import type { ElementStyles, GetElementStylesParams } from '../../../providers';
 import type { DataPointDate, SeriesData } from '../../../types';
 import type { FC, ReactNode } from 'react';
 
+/*
+ * `process.env.NODE_ENV` is replaced by the bundler at build time. Declare a
+ * minimal `process` locally so this file type-checks as source under `jetpack:src`.
+ */
+declare const process: { env: Record< string, string | undefined > };
+
 export type ComparisonSeriesEntry = {
 	series: SeriesData;
 	index: number;
@@ -146,6 +152,7 @@ export const ComparisonBars: FC< {
 		<g
 			className="bar-chart__comparison-bars"
 			pointerEvents="none"
+			aria-hidden="true"
 			data-testid="bar-chart-comparison-bars"
 		>
 			{ rects }

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

@@ -123,8 +123,11 @@ export function useBarChartOptions(
 					} );
 				} );
 				if ( allValues.length > 0 ) {
+					// Keep zero in the domain so bar length stays proportional to value — a
+					// non-zero baseline would exaggerate differences between periods. Math.max
+					// keeps zero on the far side too, so charts with negative values still span 0.
 					valueScaleDomainOverride = {
-						domain: [ Math.min( ...allValues ), Math.max( ...allValues ) ],
+						domain: [ Math.min( 0, ...allValues ), Math.max( 0, ...allValues ) ],
 					};
 				}
 			}

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

@@ -322,6 +322,8 @@ describe( 'BarChart', () => {
 				await user.keyboard( '{ArrowRight}' );
 				expect( screen.getByTestId( 'chart-tooltip-0' ) ).toHaveFocus();
 				expect( screen.getByTestId( 'chart-tooltip-0' ) ).toHaveTextContent( 'Series A' );
+				// The category/value row joins with a space after the colon.
+				expect( screen.getByTestId( 'chart-tooltip-0' ) ).toHaveTextContent( 'Jan 1: 10' );
 				expect( screen.queryByTestId( 'chart-tooltip-1' ) ).not.toBeInTheDocument();
 
 				// Second tab should focus on the second tooltip.
@@ -409,11 +411,50 @@ describe( 'BarChart', () => {
 
 				await user.keyboard( '{ArrowRight}' );
 				const tooltip = screen.getByTestId( 'chart-tooltip-0' );
-				// Both the current and previous period values are shown.
+				// Both periods are shown, each as "label: value" with a space after the colon.
+				expect( tooltip ).toHaveTextContent( 'This period: 10' );
+				expect( tooltip ).toHaveTextContent( 'Previous period: 15' );
+			} );
+
+			test( 'keyboard navigation past the first slot stays on the primary bar, not the comparison series', async () => {
+				const user = userEvent.setup();
+				renderWithTheme( {
+					withTooltips: 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 chart = screen.getByRole( 'grid', { name: /bar chart/i } );
+				chart.focus();
+
+				// Slot 0 is the first primary bar (Mon); slot 1 must be the SECOND primary
+				// bar (Tue) — not the comparison series' first bar. The keyboard index space
+				// counts only primary bars, so the tooltip must too.
+				await user.keyboard( '{ArrowRight}' );
+				await user.keyboard( '{ArrowRight}' );
+				const tooltip = screen.getByTestId( 'chart-tooltip-1' );
+				expect( tooltip ).toHaveTextContent( 'Tue' );
 				expect( tooltip ).toHaveTextContent( 'This period' );
-				expect( tooltip ).toHaveTextContent( '10' );
+				expect( tooltip ).toHaveTextContent( '20' );
 				expect( tooltip ).toHaveTextContent( 'Previous period' );
-				expect( tooltip ).toHaveTextContent( '15' );
+				expect( tooltip ).toHaveTextContent( '25' );
 			} );
 		} );
 
@@ -860,6 +901,57 @@ describe( 'BarChart', () => {
 			expect( bars.length ).toBeGreaterThanOrEqual( 2 );
 		} );
 
+		it( 'hides the comparison shadow group from assistive technology', () => {
+			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: 80 } ],
+				},
+			];
+			render( <BarChart data={ data } width={ 400 } height={ 300 } /> );
+
+			// The shadow is decorative: no keyboard/hover target and its value is surfaced
+			// through the tooltip, so it must not be announced as a separate element.
+			expect( screen.getByTestId( 'bar-chart-comparison-bars' ) ).toHaveAttribute(
+				'aria-hidden',
+				'true'
+			);
+		} );
+
+		it( 'renders comparison shadows in horizontal orientation', () => {
+			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 } orientation="horizontal" width={ 400 } height={ 300 } /> );
+
+			const shadows = screen.getAllByTestId( /^bar-chart-comparison-\d+-\d+$/ );
+			expect( shadows ).toHaveLength( 2 );
+			expect( shadows[ 0 ] ).toHaveAttribute( 'opacity', '0.5' );
+		} );
+
 		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,
@@ -886,6 +978,52 @@ describe( 'BarChart', () => {
 			expect( ( yScale.domain as number[] )[ 1 ] ).toBeGreaterThanOrEqual( 150 );
 		} );
 
+		it( 'keeps the value-axis baseline at zero so comparison bars encode magnitude truthfully', () => {
+			// All values are well above zero; the domain must still start at 0 so a bar's
+			// length stays proportional to its value (a non-zero baseline exaggerates differences).
+			const data = [
+				{
+					label: 'This period',
+					group: 'views',
+					data: [ { label: 'Mon', value: 420 } ],
+				},
+				{
+					label: 'Previous period',
+					group: 'views',
+					options: { type: 'comparison' as const },
+					data: [ { label: 'Mon', value: 510 } ],
+				},
+			];
+
+			const { result } = renderHook( () => useBarChartOptions( data, false, {} ) );
+			const yScale = result.current.yScale as { domain?: number[] };
+			expect( yScale.domain ).toBeDefined();
+			expect( ( yScale.domain as number[] )[ 0 ] ).toBe( 0 );
+		} );
+
+		it( 'zero-bases the value-axis domain in horizontal comparison charts', () => {
+			const data = [
+				{
+					label: 'This period',
+					group: 'views',
+					data: [ { label: 'Mon', value: 420 } ],
+				},
+				{
+					label: 'Previous period',
+					group: 'views',
+					options: { type: 'comparison' as const },
+					data: [ { label: 'Mon', value: 510 } ],
+				},
+			];
+
+			// In horizontal charts the value axis is x.
+			const { result } = renderHook( () => useBarChartOptions( data, true, {} ) );
+			const xScale = result.current.xScale as { domain?: number[] };
+			expect( xScale.domain ).toBeDefined();
+			expect( ( xScale.domain as number[] )[ 0 ] ).toBe( 0 );
+			expect( ( xScale.domain as number[] )[ 1 ] ).toBeGreaterThanOrEqual( 510 );
+		} );
+
 		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.

package/src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss

@@ -12,7 +12,7 @@
 
 .main-rate {
 	overflow: hidden;
-	color: #1e1e1e;
+	color: var(--wpds-color-fg-content-neutral, #1e1e1e);
 	text-overflow: ellipsis;
 	font-size: var(--wpds-typography-font-size-xl, 18px);
 	font-style: normal;
@@ -33,7 +33,7 @@
 
 .funnel-container {
 	flex: 1;
-	min-height: 200px;
+	min-height: 0;
 	width: 100%;
 }
 
@@ -43,7 +43,9 @@
 	height: 100%;
 
 	&--animated {
-		transition: opacity 0.3s ease;
+		transition:
+			opacity var(--wpds-motion-duration-lg, 300ms)
+			var(--wpds-motion-easing-subtle, cubic-bezier(0.15, 0, 0.15, 1));
 	}
 
 	&--blurred {
@@ -52,7 +54,7 @@
 }
 
 .step-label {
-	color: #757575;
+	color: var(--wpds-color-fg-content-neutral-weak, #707070);
 	font-size: var(--wpds-typography-font-size-sm, 12px);
 	font-weight: var(--wpds-typography-font-weight-regular, 400);
 	line-height: var(--wpds-typography-line-height-xs, 16px);
@@ -62,7 +64,7 @@
 }
 
 .step-rate {
-	color: #1e1e1e;
+	color: var(--wpds-color-fg-content-neutral, #1e1e1e);
 	font-size: var(--wpds-typography-font-size-md, 13px);
 	font-weight: var(--wpds-typography-font-weight-medium, 499);
 	line-height: var(--wpds-typography-line-height-xs, 16px);
@@ -84,7 +86,9 @@
 		transform-origin: bottom;
 		transform-box: fill-box;
 		transform: scaleY(0);
-		animation: stretch 1s ease-out forwards;
+		animation:
+			stretch var(--wpds-motion-duration-xl, 400ms)
+			var(--wpds-motion-easing-expressive, cubic-bezier(0.25, 0, 0, 1)) forwards;
 	}
 
 	@keyframes stretch {
@@ -96,18 +100,17 @@
 }
 
 .tooltip-wrapper {
-	border-bottom: var(--wpds-border-width-xs, 1px) solid var(--Gray-Gray-5, #dcdcde);
-	background: var(--black-white-white, #fff);
+	background: var(--wpds-color-bg-surface-neutral-strong, #fff);
 
 	// Override .visx-tooltip inline styles.
 	border-radius: var(--wpds-border-radius-md, 4px) !important;
 	padding: var(--wpds-dimension-padding-md, 12px) !important;
-	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15), 0 3px 9px 0 rgba(0, 0, 0, 0.12) !important;
+	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) !important;
 
 }
 
 .tooltip-title {
-	color: #1e1e1e;
+	color: var(--wpds-color-fg-content-neutral, #1e1e1e);
 	font-size: var(--wpds-typography-font-size-sm, 12px);
 	font-style: normal;
 	font-weight: var(--wpds-typography-font-weight-regular, 400);
@@ -115,7 +118,7 @@
 }
 
 .tooltip-content {
-	color: #1e1e1e;
+	color: var(--wpds-color-fg-content-neutral, #1e1e1e);
 	font-size: var(--wpds-typography-font-size-md, 13px);
 	font-style: normal;
 	font-weight: var(--wpds-typography-font-weight-medium, 499);
@@ -124,6 +127,6 @@
 
 .empty-state {
 	text-align: center;
-	color: #6b7280;
+	color: var(--wpds-color-fg-content-neutral-weak, #707070);
 	font-size: var(--wpds-typography-font-size-lg, 16px);
 }

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

@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { FC, useContext, useMemo } from 'react';
-import { Chart } from 'react-google-charts';
+import { Chart, type GoogleChartPackages } from 'react-google-charts';
 /**
  * Internal dependencies
  */
@@ -19,6 +19,10 @@ import { GeoChartProps } from './types';
 
 const DEFAULT_FEATURE_FILL_COLOR = '#ffffff';
 const DEFAULT_BACKGROUND_COLOR = '#ffffff';
+// `chartPackages` replaces (not extends) react-google-charts' default `[ 'corechart', 'controls' ]`,
+// so we restate the defaults and add `geochart`. Without it the loader backfills the geochart package
+// late, which can clash with another Google Charts version already loaded on the page.
+const GEO_CHART_PACKAGES: GoogleChartPackages[] = [ 'corechart', 'controls', 'geochart' ];
 
 type GoogleChartOptions = Record< string, unknown >;
 
@@ -154,6 +158,7 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 		>
 			<Chart
 				chartType="GeoChart"
+				chartPackages={ GEO_CHART_PACKAGES }
 				width={ width }
 				height={ height }
 				data={ sanitizedData.data }

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

@@ -4,9 +4,10 @@ import GeoChart, { GeoChartUnresponsive } from '../geo-chart';
 
 // Mock react-google-charts
 jest.mock( 'react-google-charts', () => ( {
-	Chart: jest.fn( ( { data, options, width, height } ) => {
+	Chart: jest.fn( ( { chartPackages, data, options, width, height } ) => {
 		return (
 			<div data-testid="google-chart-mock" data-width={ width } data-height={ height }>
+				<div data-testid="chart-packages">{ JSON.stringify( chartPackages ) }</div>
 				<div data-testid="chart-data">{ JSON.stringify( data ) }</div>
 				<div data-testid="chart-options">{ JSON.stringify( options ) }</div>
 			</div>
@@ -64,6 +65,15 @@ describe( 'GeoChart', () => {
 			expect( chart ).toHaveAttribute( 'data-width', '1200' );
 			expect( chart ).toHaveAttribute( 'data-height', '600' );
 		} );
+
+		test( 'loads the GeoChart package explicitly', () => {
+			renderWithTheme();
+
+			const chartPackages = screen.getByTestId( 'chart-packages' );
+			const packages = JSON.parse( chartPackages.textContent || '[]' );
+
+			expect( packages ).toEqual( [ 'corechart', 'controls', 'geochart' ] );
+		} );
 	} );
 
 	describe( 'Data Handling', () => {

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

@@ -0,0 +1,103 @@
+.heatmap-chart {
+	width: 100%;
+	height: 100%;
+	min-height: 0;
+	font-size: var(--wpds-typography-font-size-sm, 12px);
+}
+
+.heatmap-chart__empty {
+	padding: var(--wpds-dimension-padding-lg, 16px);
+	color: var(--wpds-color-fg-content-neutral-weak, #707070);
+}
+
+// Track template is set inline because CSS `repeat()` won't take a `var()`
+// count. ARIA rows are `display: contents` so their cells join this grid.
+.heatmap-chart__grid {
+	display: grid;
+	gap: var(--heatmap-cell-gap, var(--wpds-dimension-gap-xs, 4px));
+	flex: 1 1 0;
+	width: 100%;
+	// Floor so the grid stays usable when the parent has no explicit height.
+	min-height: 200px;
+
+	&:focus-visible {
+		outline:
+			var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid
+			var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
+		outline-offset: 2px;
+		border-radius: var(--wpds-border-radius-sm, 2px);
+	}
+}
+
+.heatmap-chart__grid--compact {
+	flex: 0 0 auto;
+	width: max-content;
+	height: max-content;
+	min-height: 0;
+}
+
+.heatmap-chart__row {
+	display: contents;
+}
+
+.heatmap-chart__col-label,
+.heatmap-chart__row-label {
+	color: var(--wpds-color-fg-content-neutral-weak, #707070);
+	font-size: var(--wpds-typography-font-size-xs, 11px);
+	white-space: nowrap;
+	overflow: visible;
+}
+
+.heatmap-chart__col-label {
+	align-self: end;
+	text-align: left;
+}
+
+.heatmap-chart__row-label {
+	align-self: center;
+	justify-self: end;
+	text-align: right;
+	padding-inline-end: var(--wpds-dimension-padding-xs, 4px);
+}
+
+.heatmap-chart__cell {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-width: 0;
+	min-height: 0;
+	border-radius: var(--wpds-border-radius-sm, 2px);
+	// Empty (no-data) default; cells with a value override it below.
+	background: var(--wpds-color-bg-track-neutral-weak, #f0f0f0);
+}
+
+// Floor the mix at 15% so the lowest value stays visibly tinted, distinct from
+// an empty cell.
+.heatmap-chart__cell--filled {
+	background: color-mix(in sRGB, var(--heatmap-primary) calc((0.15 + 0.85 * var(--intensity)) * 100%), transparent);
+}
+
+.heatmap-chart__cell--selected {
+	outline:
+		var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid
+		var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
+	outline-offset: calc(-1 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
+}
+
+.heatmap-chart__cell-value {
+	color: var(--wpds-color-fg-content-neutral, #1e1e1e);
+	font-size: var(--wpds-typography-font-size-md, 13px);
+}
+
+// Light text on fills dark enough to out-contrast dark text (decided in JS from
+// the blended fill luminance).
+.heatmap-chart__cell--strong .heatmap-chart__cell-value {
+	color: var(--wpds-color-fg-interactive-neutral-strong, #f0f0f0);
+}
+
+.heatmap-chart__legend-swatch {
+	width: var(--wpds-dimension-size-3xs, 12px);
+	height: var(--wpds-dimension-size-3xs, 12px);
+	border-radius: var(--wpds-border-radius-sm, 2px);
+	background: color-mix(in sRGB, var(--heatmap-primary) calc((0.15 + 0.85 * var(--intensity)) * 100%), transparent);
+}