@wordpress/components 32.4.1-next.v.202603102151.0 → 32.5.0

package/build-types/validated-form-controls/test/number-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/test/number-control.tsx"],"names":[],"mappings":""}

package/build-types/validated-form-controls/test/radio-control.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=radio-control.d.ts.map

package/build-types/validated-form-controls/test/radio-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/test/radio-control.tsx"],"names":[],"mappings":""}

package/build-types/validated-form-controls/test/range-control.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=range-control.d.ts.map

package/build-types/validated-form-controls/test/range-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"range-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/test/range-control.tsx"],"names":[],"mappings":""}

package/build-types/validated-form-controls/test/select-control.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=select-control.d.ts.map

package/build-types/validated-form-controls/test/select-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/test/select-control.tsx"],"names":[],"mappings":""}

package/build-types/validated-form-controls/test/text-control.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=text-control.d.ts.map

package/build-types/validated-form-controls/test/text-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/test/text-control.tsx"],"names":[],"mappings":""}

package/build-types/validated-form-controls/test/textarea-control.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=textarea-control.d.ts.map

package/build-types/validated-form-controls/test/textarea-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/test/textarea-control.tsx"],"names":[],"mappings":""}

package/build-types/validated-form-controls/test/toggle-control.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=toggle-control.d.ts.map

package/build-types/validated-form-controls/test/toggle-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/test/toggle-control.tsx"],"names":[],"mappings":""}

package/build-types/validated-form-controls/test/toggle-group-control.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=toggle-group-control.d.ts.map

package/build-types/validated-form-controls/test/toggle-group-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-group-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/test/toggle-group-control.tsx"],"names":[],"mappings":""}

package/build-types/validated-form-controls/validity-indicator.d.ts

@@ -1,4 +1,5 @@
-export declare function ValidityIndicator({ type, message, }: {
+export declare function ValidityIndicator({ id, type, message, }: {
+    id?: string;
     type: 'validating' | 'valid' | 'invalid';
     message?: string;
 }): import("react").JSX.Element;

package/build-types/validated-form-controls/validity-indicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"validity-indicator.d.ts","sourceRoot":"","sources":["../../src/validated-form-controls/validity-indicator.tsx"],"names":[],"mappings":"AAgBA,wBAAgB,iBAAiB,CAAE,EAClC,IAAI,EACJ,OAAO,GACP,EAAE;IACF,IAAI,EAAE,YAAY,GAAG,OAAO,GAAG,SAAS,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,+BAyBA"}
+{"version":3,"file":"validity-indicator.d.ts","sourceRoot":"","sources":["../../src/validated-form-controls/validity-indicator.tsx"],"names":[],"mappings":"AAgBA,wBAAgB,iBAAiB,CAAE,EAClC,EAAE,EACF,IAAI,EACJ,OAAO,GACP,EAAE;IACF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,YAAY,GAAG,OAAO,GAAG,SAAS,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,+BA0BA"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "32.4.1-next.v.202603102151.0+59e17f9ec",
+	"version": "32.5.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -64,24 +64,24 @@
 		"@types/highlight-words-core": "1.2.1",
 		"@types/react": "^18.3.27",
 		"@use-gesture/react": "^10.3.1",
-		"@wordpress/a11y": "^4.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/base-styles": "^6.17.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/compose": "^7.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/date": "^5.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/deprecated": "^4.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/dom": "^4.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/element": "^6.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/escape-html": "^3.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/hooks": "^4.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/html-entities": "^4.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/i18n": "^6.14.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/icons": "^12.0.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/is-shallow-equal": "^5.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/keycodes": "^4.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/primitives": "^4.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/private-apis": "^1.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/rich-text": "^7.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/warning": "^3.41.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/a11y": "^4.43.0",
+		"@wordpress/base-styles": "^6.19.0",
+		"@wordpress/compose": "^7.43.0",
+		"@wordpress/date": "^5.43.0",
+		"@wordpress/deprecated": "^4.43.0",
+		"@wordpress/dom": "^4.43.0",
+		"@wordpress/element": "^6.43.0",
+		"@wordpress/escape-html": "^3.43.0",
+		"@wordpress/hooks": "^4.43.0",
+		"@wordpress/html-entities": "^4.43.0",
+		"@wordpress/i18n": "^6.16.0",
+		"@wordpress/icons": "^12.1.0",
+		"@wordpress/is-shallow-equal": "^5.43.0",
+		"@wordpress/keycodes": "^4.43.0",
+		"@wordpress/primitives": "^4.43.0",
+		"@wordpress/private-apis": "^1.43.0",
+		"@wordpress/rich-text": "^7.43.0",
+		"@wordpress/warning": "^3.43.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -103,13 +103,13 @@
 	},
 	"devDependencies": {
 		"@ariakit/test": "^0.4.13",
-		"@storybook/addon-docs": "^10.1.11",
-		"@storybook/react-vite": "^10.1.11",
+		"@storybook/addon-docs": "^10.2.8",
+		"@storybook/react-vite": "^10.2.8",
 		"@testing-library/jest-dom": "^6.9.1",
 		"@types/jest": "^29.5.14",
-		"@wordpress/jest-console": "^8.41.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/jest-console": "^8.43.0",
 		"snapshot-diff": "^0.10.0",
-		"storybook": "^10.1.11",
+		"storybook": "^10.2.8",
 		"timezone-mock": "^1.3.6"
 	},
 	"peerDependencies": {
@@ -119,5 +119,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "86db21e727d89e8f0dbba9300d2f97fd22b08693"
+	"gitHead": "2cea90674d11aa521ec3f71652fb3a6a4c383969"
 }

package/src/button/style.scss

@@ -48,11 +48,6 @@
 		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 	}
 
-	// Windows High Contrast mode will show this outline, but not the box-shadow.
-	&:focus {
-		outline: 3px solid transparent;
-	}
-
 	/**
 	 * Primary button style.
 	 */
@@ -276,6 +271,14 @@
 		}
 	}
 
+	// Windows High Contrast mode will show this outline, but not the box-shadow.
+	// This rule is placed after variant outline declarations (e.g. is-primary,
+	// is-secondary, is-tertiary) to ensure it wins by source order at the same
+	// specificity, while not using `:not(:active)` to avoid outline flicker.
+	&:focus {
+		outline: 3px solid transparent;
+	}
+
 	&:not(:disabled, [aria-disabled="true"]):active {
 		color: $components-color-foreground;
 	}
@@ -388,6 +391,14 @@
 		}
 	}
 
+	// Hide focus outline on :active to provide click feedback in forced-colors
+	// mode, where box-shadow is not visible. Higher specificity (0,3,0)
+	// ensures this wins over variant outline declarations. Placed after
+	// .is-pressed to also win by source order at equal specificity (0,3,0).
+	&:focus:active {
+		outline: none;
+	}
+
 	svg {
 		fill: currentColor;
 		outline: none;

package/src/button-group/stories/index.story.tsx

@@ -16,7 +16,7 @@ import Button from '../../button';
  * This component is deprecated. Use `ToggleGroupControl` instead.
  */
 const meta: Meta< typeof ButtonGroup > = {
-	title: 'Components (Deprecated)/ButtonGroup',
+	title: 'Components/Deprecated/ButtonGroup',
 	id: 'components-buttongroup',
 	component: ButtonGroup,
 	argTypes: {

package/src/combobox-control/index.tsx

@@ -358,6 +358,12 @@ function ComboboxControl( props: ComboboxControlProps ) {
 									matchingSuggestions
 								) }
 								onChange={ onInputChange }
+								aria-describedby={
+									help
+										? // TODO: Refactor `TokenInput` to not use hardcoded IDs.
+										  `components-form-token-input-${ instanceId }__help`
+										: undefined
+								}
 							/>
 						</FlexBlock>
 						{ isLoading && <Spinner /> }

package/src/combobox-control/stories/index.story.tsx

@@ -88,8 +88,9 @@ const Template: StoryFn< typeof ComboboxControl > = ( {
 export const Default = Template.bind( {} );
 Default.args = {
 	__next40pxDefaultSize: true,
-	label: 'Select a country',
+	label: 'Country',
 	options: countryOptions,
+	help: 'Help text to describe the control.',
 };
 
 /**
@@ -100,7 +101,7 @@ Default.args = {
 export const WithCustomRenderItem = Template.bind( {} );
 WithCustomRenderItem.args = {
 	...Default.args,
-	label: 'Select an author',
+	label: 'Author',
 	options: [
 		{
 			value: 'parsley',

package/src/combobox-control/test/index.tsx

@@ -92,8 +92,8 @@ describe.each( [
 		render(
 			<Component options={ timezones } label={ defaultLabelText } />
 		);
-		const label = getLabel( defaultLabelText );
-		expect( label ).toBeVisible();
+		expect( getLabel( defaultLabelText ) ).toBeVisible();
+		expect( getInput( defaultLabelText ) ).toBeVisible();
 	} );
 
 	it( 'should render with hidden label', () => {
@@ -104,13 +104,7 @@ describe.each( [
 				hideLabelFromVision
 			/>
 		);
-		const label = getLabel( defaultLabelText );
-
-		expect( label ).toBeInTheDocument();
-		expect( label ).toHaveAttribute(
-			'data-wp-component',
-			'VisuallyHidden'
-		);
+		expect( getInput( defaultLabelText ) ).toBeVisible();
 	} );
 
 	it( 'should render with the correct options', async () => {
@@ -451,6 +445,19 @@ describe.each( [
 		expect( input ).toHaveFocus();
 	} );
 
+	it( 'should associate the `help` text with the combobox accessibly', () => {
+		render(
+			<Component
+				options={ timezones }
+				label={ defaultLabelText }
+				help="Help text"
+			/>
+		);
+		expect( getInput( defaultLabelText ) ).toHaveAccessibleDescription(
+			'Help text'
+		);
+	} );
+
 	it( 'should reset input when pressing the Reset button with the Spacebar key', async () => {
 		const user = await userEvent.setup();
 		const targetOption = timezones[ 13 ];

package/src/composite/legacy/stories/index.story.tsx

@@ -15,7 +15,7 @@ import {
 import { UseCompositeStatePlaceholder, transform } from './utils';
 
 const meta: Meta< typeof UseCompositeStatePlaceholder > = {
-	title: 'Components (Deprecated)/Composite (Unstable)',
+	title: 'Components/Deprecated/Composite (Unstable)',
 	id: 'components-composite-unstable',
 	component: UseCompositeStatePlaceholder,
 	subcomponents: {

package/src/custom-gradient-picker/index.tsx

@@ -7,6 +7,7 @@ import { type LinearGradientNode } from 'gradient-parser';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -25,8 +26,8 @@ import {
 import { serializeGradient } from './serializer';
 import {
 	DEFAULT_LINEAR_GRADIENT_ANGLE,
-	HORIZONTAL_GRADIENT_ORIENTATION,
 	GRADIENT_OPTIONS,
+	HORIZONTAL_GRADIENT_ORIENTATION,
 } from './constants';
 import {
 	AccessoryWrapper,
@@ -70,14 +71,24 @@ const GradientTypePicker = ( {
 	onChange,
 }: GradientTypePickerProps ) => {
 	const { type } = gradientAST;
+	const lastLinearOrientationAngle = useRef(
+		Number( HORIZONTAL_GRADIENT_ORIENTATION.value )
+	);
+
+	if ( type === 'linear-gradient' && gradientAST.orientation ) {
+		lastLinearOrientationAngle.current = Number(
+			gradientAST.orientation.value
+		);
+	}
 
 	const onSetLinearGradient = () => {
 		onChange(
 			serializeGradient( {
 				...gradientAST,
-				orientation: gradientAST.orientation
-					? undefined
-					: HORIZONTAL_GRADIENT_ORIENTATION,
+				orientation: {
+					type: 'angular' as const,
+					value: `${ lastLinearOrientationAngle.current }`,
+				},
 				type: 'linear-gradient',
 			} satisfies LinearGradientNode )
 		);

package/src/custom-gradient-picker/test/index.tsx

@@ -0,0 +1,81 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * Internal dependencies
+ */
+import CustomGradientPicker from '../';
+
+describe( 'CustomGradientPicker', () => {
+	describe( 'GradientTypePicker angle persistence', () => {
+		it( 'should restore the previous linear angle when switching from radial back to linear', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+
+			render(
+				<CustomGradientPicker
+					value="linear-gradient(125deg,rgb(0,0,0) 0%,rgb(255,255,255) 100%)"
+					onChange={ onChange }
+				/>
+			);
+
+			const typeSelect = screen.getByRole( 'combobox', {
+				name: /type/i,
+			} );
+			await user.selectOptions( typeSelect, 'radial-gradient' );
+			await user.selectOptions( typeSelect, 'linear-gradient' );
+
+			// Verify the angle from before the radial switch is restored, not the default
+			const lastCall =
+				onChange.mock.calls[ onChange.mock.calls.length - 1 ][ 0 ];
+			expect( lastCall ).toContain( '125deg' );
+		} );
+
+		it( 'should use HORIZONTAL_GRADIENT_ORIENTATION when no prior linear angle exists', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+
+			// Start with a radial gradient so there is no previous linear angle in the ref
+			render(
+				<CustomGradientPicker
+					value="radial-gradient(rgb(0,0,0) 0%, rgb(255,255,255) 100%)"
+					onChange={ onChange }
+				/>
+			);
+
+			const typeSelect = screen.getByRole( 'combobox', {
+				name: /type/i,
+			} );
+			await user.selectOptions( typeSelect, 'linear-gradient' );
+
+			const lastCall =
+				onChange.mock.calls[ onChange.mock.calls.length - 1 ][ 0 ];
+			expect( lastCall ).toContain( '90deg' );
+		} );
+
+		it( 'should not restore angle when switching to radial', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+
+			render(
+				<CustomGradientPicker
+					value="linear-gradient(45deg, rgb(0,0,0) 0%, rgb(255,255,255) 100%)"
+					onChange={ onChange }
+				/>
+			);
+
+			const typeSelect = screen.getByRole( 'combobox', {
+				name: /type/i,
+			} );
+			await user.selectOptions( typeSelect, 'radial-gradient' );
+
+			// Radial gradients have no orientation, so deg should not appear in the output
+			const lastCall =
+				onChange.mock.calls[ onChange.mock.calls.length - 1 ][ 0 ];
+			expect( lastCall ).not.toContain( 'deg' );
+		} );
+	} );
+} );

package/src/date-time/test/utils.test.ts

@@ -1,17 +1,14 @@
-/**
- * External dependencies
- */
 import timezoneMock from 'timezone-mock';
-
-/**
- * WordPress dependencies
- */
 import { getSettings, setSettings, type DateSettings } from '@wordpress/date';
+import { inputToDate, getDaysInMonth } from '../utils';
 
-/**
- * Internal dependencies
- */
-import { inputToDate } from '../utils';
+describe( 'getDaysInMonth', () => {
+	it( 'should return the number of days in the month', () => {
+		expect( getDaysInMonth( 2026, 0 ) ).toBe( 31 );
+		expect( getDaysInMonth( 2026, 1 ) ).toBe( 28 );
+		expect( getDaysInMonth( 2028, 1 ) ).toBe( 29 );
+	} );
+} );
 
 describe( 'inputToDate', () => {
 	let originalSettings: DateSettings;

package/src/date-time/time/index.tsx

@@ -1,18 +1,7 @@
-/**
- * External dependencies
- */
 import { startOfMinute } from 'date-fns';
-
-/**
- * WordPress dependencies
- */
 import { useState, useMemo, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { date as formatDate } from '@wordpress/date';
-
-/**
- * Internal dependencies
- */
 import BaseControl from '../../base-control';
 import { VisuallyHidden } from '../../visually-hidden';
 import SelectControl from '../../select-control';
@@ -33,6 +22,7 @@ import {
 	buildPadInputStateReducer,
 	validateInputElementTarget,
 	setInConfiguredTimezone,
+	getDaysInMonth,
 } from '../utils';
 import { TIMEZONELESS_FORMAT } from '../constants';
 import { TimeInput } from './time-input';
@@ -150,7 +140,7 @@ export function TimePicker( {
 			value={ day }
 			step={ 1 }
 			min={ 1 }
-			max={ 31 }
+			max={ getDaysInMonth( Number( year ), Number( month ) - 1 ) }
 			required
 			spinControls="none"
 			isPressEnterToChange

package/src/date-time/time/test/index.tsx

@@ -158,6 +158,75 @@ describe( 'TimePicker', () => {
 		expect( onChangeSpy ).toHaveBeenCalledWith( '1986-10-18T11:59:00' );
 	} );
 
+	it( 'should call onChange with a bounded day if out of bounds', async () => {
+		const user = userEvent.setup();
+
+		const onChangeSpy = jest.fn();
+
+		render(
+			<TimePicker
+				currentTime="2026-02-05T00:00:00"
+				onChange={ onChangeSpy }
+				is12Hour
+			/>
+		);
+
+		const dayInput = screen.getByLabelText( 'Day' );
+
+		await user.clear( dayInput );
+		await user.type( dayInput, '30' );
+		await user.keyboard( '{Tab}' );
+
+		expect( onChangeSpy ).toHaveBeenCalledWith( '2026-02-28T00:00:00' );
+		expect( dayInput ).toHaveValue( 28 );
+	} );
+
+	it( 'should clamp day when switching months', async () => {
+		const user = userEvent.setup();
+
+		const onChangeSpy = jest.fn();
+
+		render(
+			<TimePicker
+				currentTime="2026-03-31T00:00:00"
+				onChange={ onChangeSpy }
+				is12Hour
+			/>
+		);
+
+		const monthSelect = screen.getByLabelText( 'Month' );
+		const dayInput = screen.getByLabelText( 'Day' );
+
+		await user.selectOptions( monthSelect, '02' );
+
+		expect( onChangeSpy ).toHaveBeenCalledWith( '2026-02-28T00:00:00' );
+		expect( dayInput ).toHaveValue( 28 );
+	} );
+
+	it( 'should clamp day when switching year from leap to non-leap', async () => {
+		const user = userEvent.setup();
+
+		const onChangeSpy = jest.fn();
+
+		render(
+			<TimePicker
+				currentTime="2028-02-29T00:00:00"
+				onChange={ onChangeSpy }
+				is12Hour
+			/>
+		);
+
+		const dayInput = screen.getByLabelText( 'Day' );
+		const yearInput = screen.getByLabelText( 'Year' );
+
+		await user.clear( yearInput );
+		await user.type( yearInput, '2026' );
+		await user.keyboard( '{Tab}' );
+
+		expect( onChangeSpy ).toHaveBeenCalledWith( '2026-02-28T00:00:00' );
+		expect( dayInput ).toHaveValue( 28 );
+	} );
+
 	it( 'should switch to PM correctly', async () => {
 		const user = userEvent.setup();
 

package/src/date-time/utils.ts

@@ -110,6 +110,19 @@ export function buildPadInputStateReducer( pad: number ) {
 	};
 }
 
+/**
+ * Returns the number of days in a month.
+ *
+ * @param year  The year
+ * @param month The month, zero-indexed (0-11)
+ *
+ * @return The number of days in the month
+ */
+export const getDaysInMonth = ( year: number, month: number ) =>
+	// Take advantage of JavaScript's built-in date wrapping logic, where day 0
+	// of the next month is interpreted as the last day of the preceding month.
+	new Date( year, month + 1, 0 ).getDate();
+
 /**
  * Updates specific date fields in the configured timezone and returns a new
  * UTC date.
@@ -139,6 +152,11 @@ export function setInConfiguredTimezone(
 		...updates,
 	};
 
+	// Clamp the day to the last valid day of the month, to avoid producing
+	// invalid date strings (e.g. "2026-02-31").
+	const daysInMonth = getDaysInMonth( values.year, values.month );
+	values.date = Math.min( values.date, daysInMonth );
+
 	const year = String( values.year ).padStart( 4, '0' );
 	const month = String( values.month + 1 ).padStart( 2, '0' );
 	const day = String( values.date ).padStart( 2, '0' );

package/src/form-token-field/token-input.tsx

@@ -28,6 +28,7 @@ export function UnForwardedTokenInput(
 		onChange,
 		onFocus,
 		onBlur,
+		'aria-describedby': ariaDescribedBy,
 		...restProps
 	} = props;
 
@@ -86,7 +87,12 @@ export function UnForwardedTokenInput(
 					? `components-form-token-suggestions-${ instanceId }-${ selectedSuggestionIndex }`
 					: undefined
 			}
-			aria-describedby={ `components-form-token-suggestions-howto-${ instanceId }` }
+			aria-describedby={ [
+				`components-form-token-suggestions-howto-${ instanceId }`,
+				ariaDescribedBy,
+			]
+				.filter( Boolean )
+				.join( ' ' ) }
 		/>
 	);
 }

package/src/guide/style.scss

@@ -6,9 +6,11 @@
 
 .components-guide {
 	$image-height: 300px;
+	// TODO: Replace with a --wpds-dimension-surface-width-* token.
 	$image-width: 320px;
 
 	@include break-small() {
+		// TODO: Replace with a --wpds-dimension-surface-width-* token.
 		width: 600px;
 	}
 
@@ -86,6 +88,7 @@
 
 .components-modal__frame.components-guide {
 	border: none;
+	// TODO: Replace with a --wpds-dimension-surface-width-* token.
 	min-width: 312px;
 	max-height: 575px;
 

package/src/modal/style.scss

@@ -65,7 +65,7 @@
 		border-radius: $radius-large;
 		margin: auto;
 		width: auto;
-		min-width: $modal-min-width;
+		min-width: var(--wpds-dimension-surface-width-sm);
 		max-width: calc(100% - #{$grid-unit-20 * 2});
 		max-height: calc(100% - #{$header-height * 2});
 
@@ -88,17 +88,14 @@
 			width: 100%;
 		}
 
-		// The following widths were selected to align with existing baselines
-		// found elsewhere in the editor.
-		// See https://github.com/WordPress/gutenberg/pull/54471#issuecomment-1723818809
 		&.has-size-small {
-			max-width: $modal-width-small;
+			max-width: var(--wpds-dimension-surface-width-md);
 		}
 		&.has-size-medium {
-			max-width: $modal-width-medium;
+			max-width: var(--wpds-dimension-surface-width-lg);
 		}
 		&.has-size-large {
-			max-width: $modal-width-large;
+			max-width: var(--wpds-dimension-surface-width-2xl);
 		}
 
 	}