@wordpress/components 29.5.1 → 29.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "29.5.1",
+	"version": "29.7.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -44,23 +44,23 @@
 		"@types/gradient-parser": "0.1.3",
 		"@types/highlight-words-core": "1.2.1",
 		"@use-gesture/react": "^10.3.1",
-		"@wordpress/a11y": "^4.19.1",
-		"@wordpress/compose": "^7.19.1",
-		"@wordpress/date": "^5.19.1",
-		"@wordpress/deprecated": "^4.19.1",
-		"@wordpress/dom": "^4.19.1",
-		"@wordpress/element": "^6.19.1",
-		"@wordpress/escape-html": "^3.19.1",
-		"@wordpress/hooks": "^4.19.1",
-		"@wordpress/html-entities": "^4.19.1",
-		"@wordpress/i18n": "^5.19.1",
-		"@wordpress/icons": "^10.19.1",
-		"@wordpress/is-shallow-equal": "^5.19.1",
-		"@wordpress/keycodes": "^4.19.1",
-		"@wordpress/primitives": "^4.19.1",
-		"@wordpress/private-apis": "^1.19.1",
-		"@wordpress/rich-text": "^7.19.1",
-		"@wordpress/warning": "^3.19.1",
+		"@wordpress/a11y": "^4.21.0",
+		"@wordpress/compose": "^7.21.0",
+		"@wordpress/date": "^5.21.0",
+		"@wordpress/deprecated": "^4.21.0",
+		"@wordpress/dom": "^4.21.0",
+		"@wordpress/element": "^6.21.0",
+		"@wordpress/escape-html": "^3.21.0",
+		"@wordpress/hooks": "^4.21.0",
+		"@wordpress/html-entities": "^4.21.0",
+		"@wordpress/i18n": "^5.21.0",
+		"@wordpress/icons": "^10.21.0",
+		"@wordpress/is-shallow-equal": "^5.21.0",
+		"@wordpress/keycodes": "^4.21.0",
+		"@wordpress/primitives": "^4.21.0",
+		"@wordpress/private-apis": "^1.21.0",
+		"@wordpress/rich-text": "^7.21.0",
+		"@wordpress/warning": "^3.21.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -85,5 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "6f49fee89f840761f7fedf662713cbd4a71723e9"
+	"gitHead": "104af00f9abcd7a4d36b87e648f148c72cc4ea5f"
 }

package/src/angle-picker-control/README.md

@@ -19,7 +19,7 @@ function Example() {
     <AnglePickerControl
       value={ angle }
       onChange={ setAngle }
-    </>
+    />
   );
 }
 ```

package/src/angle-picker-control/index.tsx

@@ -97,7 +97,7 @@ function UnforwardedAnglePickerControl(
  *     <AnglePickerControl
  *       value={ angle }
  *       onChange={ setAngle }
- *     </>
+ *     />
  *   );
  * }
  * ```

package/src/autocomplete/index.tsx

@@ -40,35 +40,7 @@ import type {
 	UseAutocompleteProps,
 	WPCompleter,
 } from './types';
-
-const getNodeText = ( node: React.ReactNode ): string => {
-	if ( node === null ) {
-		return '';
-	}
-
-	switch ( typeof node ) {
-		case 'string':
-		case 'number':
-			return node.toString();
-			break;
-		case 'boolean':
-			return '';
-			break;
-		case 'object': {
-			if ( node instanceof Array ) {
-				return node.map( getNodeText ).join( '' );
-			}
-			if ( 'props' in node ) {
-				return getNodeText( node.props.children );
-			}
-			break;
-		}
-		default:
-			return '';
-	}
-
-	return '';
-};
+import getNodeText from '../utils/get-node-text';
 
 const EMPTY_FILTERED_OPTIONS: KeyedOption[] = [];
 
@@ -394,12 +366,13 @@ export function useAutocomplete( {
 		? `components-autocomplete-item-${ instanceId }-${ selectedKey }`
 		: null;
 	const hasSelection = record.start !== undefined;
+	const showPopover = !! textContent && hasSelection && !! AutocompleterUI;
 
 	return {
 		listBoxId,
 		activeId,
 		onKeyDown: withIgnoreIMEEvents( handleKeyDown ),
-		popover: hasSelection && AutocompleterUI && (
+		popover: showPopover && (
 			<AutocompleterUI
 				className={ className }
 				filterValue={ filterValue }

package/src/button/style.scss

@@ -302,7 +302,6 @@
 
 		&.has-icon:not(.has-text) {
 			padding: 0;
-			width: $button-size-compact;
 			min-width: $button-size-compact;
 		}
 	}
@@ -315,7 +314,6 @@
 
 		&.has-icon:not(.has-text) {
 			padding: 0;
-			width: $button-size-small;
 			min-width: $button-size-small;
 		}
 	}

package/src/custom-select-control-v2/styles.ts

@@ -213,6 +213,7 @@ export const SelectedItemCheck = styled( Ariakit.SelectItemCheck )`
 	display: flex;
 	align-items: center;
 	margin-inline-start: ${ space( 2 ) };
+	fill: currentColor;
 
 	// Keep the checkmark vertically aligned at the top. Since the item text has a
 	// 28px line height and the checkmark is 24px tall, a (28-24)/2 = 2px margin

package/src/font-size-picker/font-size-picker-select.tsx

@@ -7,12 +7,11 @@ import { __, sprintf } from '@wordpress/i18n';
  * Internal dependencies
  */
 import CustomSelectControl from '../custom-select-control';
-import { parseQuantityAndUnitFromRawValue } from '../unit-control';
 import type {
 	FontSizePickerSelectProps,
 	FontSizePickerSelectOption,
 } from './types';
-import { getCommonSizeUnit, isSimpleCssValue } from './utils';
+import { isSimpleCssValue } from './utils';
 
 const DEFAULT_OPTION: FontSizePickerSelectOption = {
 	key: 'default',
@@ -23,20 +22,11 @@ const DEFAULT_OPTION: FontSizePickerSelectOption = {
 const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
 	const { __next40pxDefaultSize, fontSizes, value, size, onChange } = props;
 
-	const areAllSizesSameUnit = !! getCommonSizeUnit( fontSizes );
-
 	const options: FontSizePickerSelectOption[] = [
 		DEFAULT_OPTION,
 		...fontSizes.map( ( fontSize ) => {
 			let hint;
-			if ( areAllSizesSameUnit ) {
-				const [ quantity ] = parseQuantityAndUnitFromRawValue(
-					fontSize.size
-				);
-				if ( quantity !== undefined ) {
-					hint = String( quantity );
-				}
-			} else if ( isSimpleCssValue( fontSize.size ) ) {
+			if ( isSimpleCssValue( fontSize.size ) ) {
 				hint = String( fontSize.size );
 			}
 			return {

package/src/font-size-picker/index.tsx

@@ -8,7 +8,8 @@ import type { ForwardedRef } from 'react';
  */
 import { __ } from '@wordpress/i18n';
 import { settings } from '@wordpress/icons';
-import { useState, useMemo, forwardRef } from '@wordpress/element';
+import { useState, forwardRef } from '@wordpress/element';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -21,20 +22,11 @@ import {
 	parseQuantityAndUnitFromRawValue,
 	useCustomUnits,
 } from '../unit-control';
-import { VisuallyHidden } from '../visually-hidden';
-import { getCommonSizeUnit } from './utils';
 import type { FontSizePickerProps } from './types';
-import {
-	Container,
-	Header,
-	HeaderHint,
-	HeaderLabel,
-	HeaderToggle,
-} from './styles';
+import { Container, Header, HeaderLabel, HeaderToggle } from './styles';
 import { Spacer } from '../spacer';
 import FontSizePickerSelect from './font-size-picker-select';
 import FontSizePickerToggleGroup from './font-size-picker-toggle-group';
-import { T_SHIRT_NAMES } from './constants';
 import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 const DEFAULT_UNITS = [ 'px', 'em', 'rem', 'vw', 'vh' ];
@@ -58,6 +50,11 @@ const UnforwardedFontSizePicker = (
 		withReset = true,
 	} = props;
 
+	const labelId = useInstanceId(
+		UnforwardedFontSizePicker,
+		'font-size-picker-label'
+	);
+
 	const units = useCustomUnits( {
 		availableUnits: unitsProp,
 	} );
@@ -83,29 +80,6 @@ const UnforwardedFontSizePicker = (
 				: ( 'togglegroup' as const );
 	}
 
-	const headerHint = useMemo( () => {
-		switch ( currentPickerType ) {
-			case 'custom':
-				return __( 'Custom' );
-			case 'togglegroup':
-				if ( selectedFontSize ) {
-					return (
-						selectedFontSize.name ||
-						T_SHIRT_NAMES[ fontSizes.indexOf( selectedFontSize ) ]
-					);
-				}
-				break;
-			case 'select':
-				const commonUnit = getCommonSizeUnit( fontSizes );
-				if ( commonUnit ) {
-					return `(${ commonUnit })`;
-				}
-				break;
-		}
-
-		return '';
-	}, [ currentPickerType, selectedFontSize, fontSizes ] );
-
 	if ( fontSizes.length === 0 && disableCustomFontSizes ) {
 		return null;
 	}
@@ -131,19 +105,16 @@ const UnforwardedFontSizePicker = (
 	} );
 
 	return (
-		<Container ref={ ref } className="components-font-size-picker">
-			<VisuallyHidden as="legend">{ __( 'Font size' ) }</VisuallyHidden>
+		<Container
+			ref={ ref }
+			className="components-font-size-picker"
+			// This Container component renders a fieldset element that needs to be labeled.
+			aria-labelledby={ labelId }
+		>
 			<Spacer>
 				<Header className="components-font-size-picker__header">
-					<HeaderLabel
-						aria-label={ `${ __( 'Size' ) } ${ headerHint || '' }` }
-					>
-						{ __( 'Size' ) }
-						{ headerHint && (
-							<HeaderHint className="components-font-size-picker__header__hint">
-								{ headerHint }
-							</HeaderHint>
-						) }
+					<HeaderLabel id={ labelId }>
+						{ __( 'Font size' ) }
 					</HeaderLabel>
 					{ ! disableCustomFontSizes && (
 						<HeaderToggle
@@ -213,7 +184,7 @@ const UnforwardedFontSizePicker = (
 							<UnitControl
 								__next40pxDefaultSize={ __next40pxDefaultSize }
 								__shouldNotWarnDeprecated36pxSize
-								label={ __( 'Custom' ) }
+								label={ __( 'Font size' ) }
 								labelPosition="top"
 								hideLabelFromVision
 								value={ value }
@@ -245,7 +216,7 @@ const UnforwardedFontSizePicker = (
 										}
 										__shouldNotWarnDeprecated36pxSize
 										className="components-font-size-picker__custom-input"
-										label={ __( 'Custom Size' ) }
+										label={ __( 'Font size' ) }
 										hideLabelFromVision
 										value={ valueQuantity }
 										initialPosition={ fallbackFontSize }

package/src/font-size-picker/styles.ts

@@ -10,7 +10,6 @@ import BaseControl from '../base-control';
 import Button from '../button';
 import { HStack } from '../h-stack';
 import { space } from '../utils/space';
-import { COLORS } from '../utils';
 
 export const Container = styled.fieldset`
 	border: 0;
@@ -33,7 +32,3 @@ export const HeaderLabel = styled( BaseControl.VisualLabel )`
 	justify-content: flex-start;
 	margin-bottom: 0;
 `;
-
-export const HeaderHint = styled.span`
-	color: ${ COLORS.gray[ 700 ] };
-`;

package/src/font-size-picker/test/index.tsx

@@ -52,7 +52,9 @@ describe( 'FontSizePicker', () => {
 			await render(
 				<FontSizePicker value={ value } onChange={ onChange } />
 			);
-			const input = screen.getByLabelText( 'Custom' );
+			const input = screen.getByRole( 'spinbutton', {
+				name: 'Font size',
+			} );
 			await user.clear( input );
 			await user.type( input, '80' );
 			expect( onChange ).toHaveBeenCalledTimes( 3 ); // Once for the clear, then once per keystroke.
@@ -79,7 +81,9 @@ describe( 'FontSizePicker', () => {
 			await user.click(
 				screen.getByRole( 'button', { name: 'Set custom size' } )
 			);
-			const input = screen.getByLabelText( 'Custom' );
+			const input = screen.getByRole( 'spinbutton', {
+				name: 'Font size',
+			} );
 			await user.type( input, '80' );
 			expect( onChange ).toHaveBeenCalledTimes( 2 ); // Once per keystroke.
 			expect( onChange ).toHaveBeenCalledWith( expectedValue );
@@ -129,28 +133,14 @@ describe( 'FontSizePicker', () => {
 			const options = screen.getAllByRole( 'option' );
 			expect( options ).toHaveLength( 7 );
 			expect( options[ 0 ] ).toHaveAccessibleName( 'Default' );
-			expect( options[ 1 ] ).toHaveAccessibleName( 'Tiny 8' );
-			expect( options[ 2 ] ).toHaveAccessibleName( 'Small 12' );
-			expect( options[ 3 ] ).toHaveAccessibleName( 'Medium 16' );
-			expect( options[ 4 ] ).toHaveAccessibleName( 'Large 20' );
-			expect( options[ 5 ] ).toHaveAccessibleName( 'Extra Large 30' );
-			expect( options[ 6 ] ).toHaveAccessibleName( 'xx-large 40' );
+			expect( options[ 1 ] ).toHaveAccessibleName( 'Tiny 8px' );
+			expect( options[ 2 ] ).toHaveAccessibleName( 'Small 12px' );
+			expect( options[ 3 ] ).toHaveAccessibleName( 'Medium 16px' );
+			expect( options[ 4 ] ).toHaveAccessibleName( 'Large 20px' );
+			expect( options[ 5 ] ).toHaveAccessibleName( 'Extra Large 30px' );
+			expect( options[ 6 ] ).toHaveAccessibleName( 'xx-large 40px' );
 		} );
 
-		test.each( [
-			{ value: undefined, expectedLabel: 'Size (px)' },
-			{ value: '8px', expectedLabel: 'Size (px)' },
-			{ value: '3px', expectedLabel: 'Size Custom' },
-		] )(
-			'displays $expectedLabel as label when value is $value',
-			async ( { value, expectedLabel } ) => {
-				await render(
-					<FontSizePicker fontSizes={ fontSizes } value={ value } />
-				);
-				expect( screen.getByLabelText( expectedLabel ) ).toBeVisible();
-			}
-		);
-
 		test.each( [
 			{
 				option: 'Default',
@@ -158,7 +148,7 @@ describe( 'FontSizePicker', () => {
 				expectedArguments: [ undefined ],
 			},
 			{
-				option: 'Tiny 8',
+				option: 'Tiny 8px',
 				value: undefined,
 				expectedArguments: [ '8px', fontSizes[ 0 ] ],
 			},
@@ -255,23 +245,6 @@ describe( 'FontSizePicker', () => {
 			}
 		);
 
-		test.each( [
-			{ value: undefined, expectedLabel: 'Size' },
-			{ value: '8px', expectedLabel: 'Size' },
-			{ value: '1em', expectedLabel: 'Size' },
-			{ value: '2rem', expectedLabel: 'Size' },
-			{ value: 'clamp(1.75rem, 3vw, 2.25rem)', expectedLabel: 'Size' },
-			{ value: '3px', expectedLabel: 'Size Custom' },
-		] )(
-			'displays $expectedLabel as label when value is $value',
-			async ( { value, expectedLabel } ) => {
-				await render(
-					<FontSizePicker fontSizes={ fontSizes } value={ value } />
-				);
-				expect( screen.getByLabelText( expectedLabel ) ).toBeVisible();
-			}
-		);
-
 		test.each( [
 			{
 				option: 'Default',
@@ -372,20 +345,6 @@ describe( 'FontSizePicker', () => {
 			expect( options[ 4 ] ).toHaveAccessibleName( 'Gigantosaurus' );
 		} );
 
-		test.each( [
-			{ value: undefined, expectedLabel: 'Size' },
-			{ value: '12px', expectedLabel: 'Size Small' },
-			{ value: '40px', expectedLabel: 'Size Gigantosaurus' },
-		] )(
-			'displays $expectedLabel as label when value is $value',
-			async ( { value, expectedLabel } ) => {
-				await render(
-					<FontSizePicker fontSizes={ fontSizes } value={ value } />
-				);
-				expect( screen.getByLabelText( expectedLabel ) ).toBeVisible();
-			}
-		);
-
 		it( 'calls onChange when a font size is selected', async () => {
 			const user = userEvent.setup();
 			const onChange = jest.fn();
@@ -439,25 +398,6 @@ describe( 'FontSizePicker', () => {
 			expect( options[ 3 ] ).toHaveAccessibleName( 'Extra Large' );
 		} );
 
-		test.each( [
-			{ value: undefined, expectedLabel: 'Size' },
-			{ value: '12px', expectedLabel: 'Size Small' },
-			{ value: '1em', expectedLabel: 'Size Medium' },
-			{ value: '2rem', expectedLabel: 'Size Large' },
-			{
-				value: 'clamp(1.75rem, 3vw, 2.25rem)',
-				expectedLabel: 'Size Extra Large',
-			},
-		] )(
-			'displays $expectedLabel as label when value is $value',
-			async ( { value, expectedLabel } ) => {
-				await render(
-					<FontSizePicker fontSizes={ fontSizes } value={ value } />
-				);
-				expect( screen.getByLabelText( expectedLabel ) ).toBeVisible();
-			}
-		);
-
 		test.each( [
 			{ radio: 'Small', expectedArguments: [ '12px', fontSizes[ 0 ] ] },
 			{ radio: 'Medium', expectedArguments: [ '1em', fontSizes[ 1 ] ] },
@@ -524,14 +464,18 @@ describe( 'FontSizePicker', () => {
 			await render(
 				<FontSizePicker fontSizes={ fontSizes } value="3px" />
 			);
-			expect( screen.getByLabelText( 'Custom' ) ).toBeVisible();
+			expect(
+				screen.getByRole( 'spinbutton', { name: 'Font size' } )
+			).toBeVisible();
 		} );
 
 		it( 'hides custom input when disableCustomFontSizes is set to `true` with a custom font size', async () => {
 			const { rerender } = await render(
 				<FontSizePicker fontSizes={ fontSizes } value="3px" />
 			);
-			expect( screen.getByLabelText( 'Custom' ) ).toBeVisible();
+			expect(
+				screen.getByRole( 'spinbutton', { name: 'Font size' } )
+			).toBeVisible();
 
 			rerender(
 				<FontSizePicker
@@ -549,7 +493,9 @@ describe( 'FontSizePicker', () => {
 			const { rerender } = await render(
 				<FontSizePicker fontSizes={ fontSizes } value="3px" />
 			);
-			expect( screen.getByLabelText( 'Custom' ) ).toBeVisible();
+			expect(
+				screen.getByRole( 'spinbutton', { name: 'Font size' } )
+			).toBeVisible();
 
 			rerender(
 				<FontSizePicker
@@ -557,7 +503,9 @@ describe( 'FontSizePicker', () => {
 					value={ fontSizes[ 0 ].size }
 				/>
 			);
-			expect( screen.getByLabelText( 'Custom' ) ).toBeVisible();
+			expect(
+				screen.getByRole( 'spinbutton', { name: 'Font size' } )
+			).toBeVisible();
 		} );
 
 		it( 'allows custom values by default', async () => {
@@ -569,7 +517,10 @@ describe( 'FontSizePicker', () => {
 			await user.click(
 				screen.getByRole( 'button', { name: 'Set custom size' } )
 			);
-			await user.type( screen.getByLabelText( 'Custom' ), '80' );
+			await user.type(
+				screen.getByRole( 'spinbutton', { name: 'Font size' } ),
+				'80'
+			);
 			expect( onChange ).toHaveBeenCalledTimes( 2 ); // Once per keystroke.
 			expect( onChange ).toHaveBeenCalledWith( '80px' );
 		} );
@@ -585,7 +536,10 @@ describe( 'FontSizePicker', () => {
 				screen.getByRole( 'button', { name: 'Set custom size' } )
 			);
 
-			await user.type( screen.getByLabelText( 'Custom' ), '80' );
+			await user.type(
+				screen.getByRole( 'spinbutton', { name: 'Font size' } ),
+				'80'
+			);
 
 			await user.click(
 				screen.getByRole( 'button', { name: 'Use size preset' } )
@@ -632,7 +586,9 @@ describe( 'FontSizePicker', () => {
 			await user.click(
 				screen.getByRole( 'button', { name: 'Set custom size' } )
 			);
-			const sliderInput = screen.getByLabelText( 'Custom Size' );
+			const sliderInput = screen.getByRole( 'slider', {
+				name: 'Font size',
+			} );
 			fireEvent.change( sliderInput, {
 				target: { value: 80 },
 			} );

package/src/font-size-picker/test/utils.ts

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { isSimpleCssValue, getCommonSizeUnit } from '../utils';
+import { isSimpleCssValue } from '../utils';
 
 describe( 'isSimpleCssValue', () => {
 	test.each( [
@@ -31,39 +31,3 @@ describe( 'isSimpleCssValue', () => {
 		expect( isSimpleCssValue( cssValue ) ).toBe( result );
 	} );
 } );
-
-describe( 'getCommonSizeUnit', () => {
-	it( 'returns null when fontSizes is empty', () => {
-		expect( getCommonSizeUnit( [] ) ).toBe( null );
-	} );
-
-	it( 'returns px when all sizes are px', () => {
-		expect(
-			getCommonSizeUnit( [
-				{ slug: 'small', size: '10px' },
-				{ slug: 'medium', size: '20px' },
-				{ slug: 'large', size: '30px' },
-			] )
-		).toBe( 'px' );
-	} );
-
-	it( 'returns em when all sizes are em', () => {
-		expect(
-			getCommonSizeUnit( [
-				{ slug: 'small', size: '1em' },
-				{ slug: 'medium', size: '2em' },
-				{ slug: 'large', size: '3em' },
-			] )
-		).toBe( 'em' );
-	} );
-
-	it( 'returns null when sizes are heterogeneous', () => {
-		expect(
-			getCommonSizeUnit( [
-				{ slug: 'small', size: '10px' },
-				{ slug: 'medium', size: '2em' },
-				{ slug: 'large', size: '3rem' },
-			] )
-		).toBe( null );
-	} );
-} );

package/src/font-size-picker/utils.ts

@@ -1,8 +1,7 @@
 /**
  * Internal dependencies
  */
-import type { FontSizePickerProps, FontSize } from './types';
-import { parseQuantityAndUnitFromRawValue } from '../unit-control';
+import type { FontSizePickerProps } from './types';
 
 /**
  * Some themes use css vars for their font sizes, so until we
@@ -18,25 +17,3 @@ export function isSimpleCssValue(
 		/^[\d\.]+(px|em|rem|vw|vh|%|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)?$/i;
 	return sizeRegex.test( String( value ) );
 }
-
-/**
- * If all of the given font sizes have the same unit (e.g. 'px'), return that
- * unit. Otherwise return null.
- *
- * @param fontSizes List of font sizes.
- * @return The common unit, or null.
- */
-export function getCommonSizeUnit( fontSizes: FontSize[] ) {
-	const [ firstFontSize, ...otherFontSizes ] = fontSizes;
-	if ( ! firstFontSize ) {
-		return null;
-	}
-	const [ , firstUnit ] = parseQuantityAndUnitFromRawValue(
-		firstFontSize.size
-	);
-	const areAllSizesSameUnit = otherFontSizes.every( ( fontSize ) => {
-		const [ , unit ] = parseQuantityAndUnitFromRawValue( fontSize.size );
-		return unit === firstUnit;
-	} );
-	return areAllSizesSameUnit ? firstUnit : null;
-}

package/src/form-token-field/style.scss

@@ -186,7 +186,7 @@
 		color: $gray-600;
 
 		&.is-selected {
-			background-color: $components-color-accent-transparent-40;
+			background: color-mix(in srgb, $components-color-accent 4%, transparent);
 		}
 	}
 

package/src/number-control/index.tsx

@@ -18,7 +18,7 @@ import deprecated from '@wordpress/deprecated';
  */
 import { Input, SpinButton, styles } from './styles/number-control-styles';
 import * as inputControlActionTypes from '../input-control/reducer/actions';
-import { add, subtract, roundClamp } from '../utils/math';
+import { add, subtract, clamp, ensureValidStep } from '../utils/math';
 import { ensureNumber, isValueEmpty } from '../utils/values';
 import type { WordPressComponentProps } from '../context/wordpress-component';
 import type { NumberControlProps } from './types';
@@ -78,17 +78,18 @@ function UnforwardedNumberControl(
 	const isStepAny = step === 'any';
 	const baseStep = isStepAny ? 1 : ensureNumber( step );
 	const baseSpin = ensureNumber( spinFactor ) * baseStep;
-	const baseValue = roundClamp( 0, min, max, baseStep );
 	const constrainValue = (
 		value: number | string,
 		stepOverride?: number
 	) => {
-		// When step is "any" clamp the value, otherwise round and clamp it.
-		// Use '' + to convert to string for use in input value attribute.
-		return isStepAny
-			? '' + Math.min( max, Math.max( min, ensureNumber( value ) ) )
-			: '' + roundClamp( value, min, max, stepOverride ?? baseStep );
+		// When step is not "any" the value must be a valid step.
+		if ( ! isStepAny ) {
+			value = ensureValidStep( value, min, stepOverride ?? baseStep );
+		}
+
+		return `${ clamp( value, min, max ) }`;
 	};
+	const baseValue = constrainValue( 0 );
 
 	const autoComplete = typeProp === 'number' ? 'off' : undefined;
 	const classes = clsx( 'components-number-control', className );