@automattic/charts 3.1.1 → 4.0.0

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);
 	}
 }

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

@@ -1,11 +1,12 @@
 import { Group } from '@visx/group';
 import { Pie } from '@visx/shape';
 import { Text } from '@visx/text';
-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 {
 	useGlobalChartsContext,
 	GlobalChartsContext,
 } from '../../providers';
-import { CHART_SCOPE_CLASS } from '../../styles/chart-scope-class';
+import { useStandaloneScopeClass } from '../../providers/chart-scope';
 import { attachSubComponents } from '../../utils';
 import { Center } from '../private/center';
 import { ChartSVG, ChartHTML, useChartChildren } from '../private/chart-composition';
@@ -189,42 +190,25 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 	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 handleMouseMove = useCallback(
 		( event: MouseEvent< SVGElement >, arc: ArcData ) => {
-			// 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,
 			} );
 		},
-		[
-			containerBounds.width,
-			containerBounds.height,
-			containerBounds.left,
-			containerBounds.top,
-			showTooltip,
-			tooltipOffsetX,
-			tooltipOffsetY,
-		]
+		[ showTooltip, tooltipOffsetX, tooltipOffsetY ]
 	);
 
 	const handleMouseLeave = useCallback( () => {
@@ -311,7 +295,9 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 		const errorHeight = errorWidth / 2;
 
 		return (
-			<div className={ styles[ 'pie-semi-circle-chart' ] }>
+			<div
+				className={ clsx( 'pie-semi-circle-chart', styles[ 'pie-semi-circle-chart' ], className ) }
+			>
 				<svg width={ errorWidth } height={ errorHeight } data-testid="pie-chart-svg">
 					<text x="50%" y="50%" textAnchor="middle" className={ styles.error }>
 						{ message }
@@ -372,13 +358,6 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 				data-testid="pie-chart-container"
 				trailingContent={
 					<>
-						{ withTooltips && tooltipOpen && tooltipData && (
-							<TooltipInPortal top={ tooltipTop || 0 } left={ tooltipLeft || 0 }>
-								<div className={ CHART_SCOPE_CLASS } role="tooltip">
-									{ renderTooltip( { tooltipData } ) }
-								</div>
-							</TooltipInPortal>
-						) }
 						{ htmlChildren }
 						{ otherChildren }
 					</>
@@ -398,7 +377,7 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 					const innerRadius = radius * ( 1 - thickness );
 
 					return (
-						<Center ref={ containerRef }>
+						<Center ref={ containerRef } className={ styles[ 'pie-semi-circle-chart__plot' ] }>
 							<svg
 								width={ width }
 								height={ height }
@@ -484,6 +463,13 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 									) }
 								</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-semi-circle-chart/test/pie-semi-circle-chart.test.tsx

@@ -362,3 +362,53 @@ describe( 'PieSemiCircleChart', () => {
 		} );
 	} );
 } );
+
+// 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( 'PieSemiCircleChart tooltip position', () => {
+	afterEach( () => {
+		jest.restoreAllMocks();
+	} );
+
+	it( 'places the box relative to the chart container, at the pointer plus the offsets', async () => {
+		mockRects();
+		const user = userEvent.setup();
+		renderPieChart( {
+			data: [
+				{ label: 'A', value: 60, valueDisplay: '60' },
+				{ label: 'B', value: 40, valueDisplay: '40' },
+			],
+			withTooltips: true,
+			width: 400,
+		} );
+
+		await user.pointer( {
+			target: screen.getAllByTestId( 'pie-segment' )[ 0 ],
+			coords: { clientX: 150, clientY: 120 },
+		} );
+
+		// (150, 120) is (50, 70) inside the container; the default -15px vertical
+		// offset makes that (50, 55), and the box adds 10px each way.
+		expect( screen.getByTestId( 'bounded-tooltip' ) ).toHaveStyle( {
+			transform: 'translate(60px, 65px)',
+		} );
+	} );
+} );

package/src/charts/private/chart-layout/chart-layout.module.scss

@@ -8,8 +8,9 @@
 	// The svg displaying inline includes a few px for descenders, which
 	// confuses some browser environments (e.g. headless Chrome) into
 	// constantly growing the container. Setting it to display as block avoids
-	// that.
-	svg {
+	// that. The tooltip renders in here too, and an inline icon in its rows
+	// must stay inline.
+	svg:not(:global(.visx-tooltip) svg) {
 		display: block;
 	}
 }

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);
+	font-size: var(--wpds-typography-font-size-md);
 	color: var(--a8c-charts-color-label-secondary);
 }