@wordpress/components 29.6.0 → 29.7.0

package/build-types/range-control/index.d.ts

@@ -6,17 +6,18 @@
  * import { useState } from '@wordpress/element';
  *
  * const MyRangeControl = () => {
- *   const [ isChecked, setChecked ] = useState( true );
+ *   const [ value, setValue ] = useState();
  *   return (
  *     <RangeControl
  *       __nextHasNoMarginBottom
  *       __next40pxDefaultSize
  *       help="Please select how transparent you would like this."
- *       initialPosition={50}
+ *       initialPosition={ 50 }
  *       label="Opacity"
- *       max={100}
- *       min={0}
- *       onChange={() => {}}
+ *       max={ 100 }
+ *       min={ 0 }
+ *       value={ value }
+ *       onChange={ setValue }
  *     />
  *   );
  * };

package/build-types/range-control/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/range-control/index.tsx"],"names":[],"mappings":"AAiYA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,YAAY;;;;aAjXuB,CAAC;;;;;;;;;;;;;;qBAiHmB,CAAC;;;;;iCAwBzC,CAAA;;;;;;;;;;8uBAwOqC,CAAC;AAElE,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/range-control/index.tsx"],"names":[],"mappings":"AAiYA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,YAAY;;;;aAlXuB,CAAC;;;;;;;;;;;;;;qBAiHmB,CAAC;;;;;iCAwBzC,CAAA;;;;;;;;;;8uBAyOqC,CAAC;AAElE,eAAe,YAAY,CAAC"}

package/build-types/toolbar/toolbar-dropdown-menu/index.d.ts

@@ -1,4 +1,4 @@
 import type { DropdownMenuProps } from '../../dropdown-menu/types';
-declare const _default: import("react").ForwardRefExoticComponent<DropdownMenuProps & import("react").RefAttributes<any>>;
-export default _default;
+export declare const ToolbarDropdownMenu: import("react").ForwardRefExoticComponent<DropdownMenuProps & import("react").RefAttributes<any>>;
+export default ToolbarDropdownMenu;
 //# sourceMappingURL=index.d.ts.map

package/build-types/toolbar/toolbar-dropdown-menu/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/toolbar/toolbar-dropdown-menu/index.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;;AA8BnE,wBAAiD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/toolbar/toolbar-dropdown-menu/index.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AA8BnE,eAAO,MAAM,mBAAmB,mGAA+C,CAAC;AAChF,eAAe,mBAAmB,CAAC"}

package/build-types/toolbar/toolbar-item/index.d.ts

@@ -1,6 +1,6 @@
-declare const _default: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<any>, "children"> & {
+export declare const ToolbarItem: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<any>, "children"> & {
     as?: import("react").ElementType;
     children?: import("react").ReactNode | ((props: import("react").HTMLAttributes<any> & import("react").RefAttributes<any>) => import("react").ReactElement | null);
 } & import("react").RefAttributes<any>>;
-export default _default;
+export default ToolbarItem;
 //# sourceMappingURL=index.d.ts.map

package/build-types/toolbar/toolbar-item/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/toolbar/toolbar-item/index.tsx"],"names":[],"mappings":";;;;AA2DA,wBAAyC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/toolbar/toolbar-item/index.tsx"],"names":[],"mappings":"AA2DA,eAAO,MAAM,WAAW;;;uCAAuC,CAAC;AAChE,eAAe,WAAW,CAAC"}

package/build-types/utils/get-node-text.d.ts

@@ -0,0 +1,3 @@
+declare const getNodeText: (node: React.ReactNode) => string;
+export default getNodeText;
+//# sourceMappingURL=get-node-text.d.ts.map

package/build-types/utils/get-node-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-node-text.d.ts","sourceRoot":"","sources":["../../src/utils/get-node-text.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,WAAW,SAAW,KAAK,CAAC,SAAS,KAAI,MAqB9C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/build-types/utils/math.d.ts

@@ -25,22 +25,21 @@ export function subtract(...args: Array<number | string>): number;
 /**
  * Clamps a value based on a min/max range.
  *
- * @param {number} value The value.
- * @param {number} min   The minimum range.
- * @param {number} max   The maximum range.
+ * @param {number|string} value The value.
+ * @param {number}        min   The minimum range.
+ * @param {number}        max   The maximum range.
  *
  * @return {number} The clamped value.
  */
-export function clamp(value: number, min: number, max: number): number;
+export function clamp(value: number | string, min: number, max: number): number;
 /**
- * Clamps a value based on a min/max range with rounding
+ * Rounds a value to the nearest step offset by a minimum.
  *
- * @param {number | string} value The value.
- * @param {number}          min   The minimum range.
- * @param {number}          max   The maximum range.
- * @param {number}          step  A multiplier for the value.
+ * @param {number|string} value The value.
+ * @param {number}        min   The minimum range.
+ * @param {number}        step  The increment for the value.
  *
- * @return {number} The rounded and clamped value.
+ * @return {number} The value as a valid step.
  */
-export function roundClamp(value?: number | string, min?: number, max?: number, step?: number): number;
+export function ensureValidStep(value: number | string, min: number, step: number): number;
 //# sourceMappingURL=math.d.ts.map

package/build-types/utils/math.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"math.d.ts","sourceRoot":"","sources":["../../src/utils/math.js"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,iCAJW,OAAO,GAEN,MAAM,CAMjB;AAED;;;;;;GAMG;AACH,6BAJW,KAAK,CAAC,MAAM,GAAC,MAAM,CAAC,GAEnB,MAAM,CAQjB;AAED;;;;;;GAMG;AACH,kCAJW,KAAK,CAAC,MAAM,GAAC,MAAM,CAAC,GAEnB,MAAM,CAWjB;AAcD;;;;;;;;GAQG;AACH,6BANW,MAAM,OACN,MAAM,OACN,MAAM,GAEL,MAAM,CAKjB;AAED;;;;;;;;;GASG;AACH,mCAPW,MAAM,GAAG,MAAM,QACf,MAAM,QACN,MAAM,SACN,MAAM,GAEL,MAAM,CAiBjB"}
+{"version":3,"file":"math.d.ts","sourceRoot":"","sources":["../../src/utils/math.js"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,iCAJW,OAAO,GAEN,MAAM,CAMjB;AAED;;;;;;GAMG;AACH,6BAJW,KAAK,CAAC,MAAM,GAAC,MAAM,CAAC,GAEnB,MAAM,CAQjB;AAED;;;;;;GAMG;AACH,kCAJW,KAAK,CAAC,MAAM,GAAC,MAAM,CAAC,GAEnB,MAAM,CAWjB;AAcD;;;;;;;;GAQG;AACH,6BANW,MAAM,GAAC,MAAM,OACb,MAAM,OACN,MAAM,GAEL,MAAM,CAKjB;AAED;;;;;;;;GAQG;AACH,uCANW,MAAM,GAAC,MAAM,OACb,MAAM,QACN,MAAM,GAEL,MAAM,CAajB"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "29.6.0",
+	"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.20.0",
-		"@wordpress/compose": "^7.20.0",
-		"@wordpress/date": "^5.20.0",
-		"@wordpress/deprecated": "^4.20.0",
-		"@wordpress/dom": "^4.20.0",
-		"@wordpress/element": "^6.20.0",
-		"@wordpress/escape-html": "^3.20.0",
-		"@wordpress/hooks": "^4.20.0",
-		"@wordpress/html-entities": "^4.20.0",
-		"@wordpress/i18n": "^5.20.0",
-		"@wordpress/icons": "^10.20.0",
-		"@wordpress/is-shallow-equal": "^5.20.0",
-		"@wordpress/keycodes": "^4.20.0",
-		"@wordpress/primitives": "^4.20.0",
-		"@wordpress/private-apis": "^1.20.0",
-		"@wordpress/rich-text": "^7.20.0",
-		"@wordpress/warning": "^3.20.0",
+		"@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": "72476970386146d450c375e5c71a96dda7c9aaa8"
+	"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/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/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 );

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

@@ -40,8 +40,21 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should render custom className', () => {
-			render( <NumberControl className="hello" /> );
-			expect( screen.getByRole( 'spinbutton' ) ).toBeVisible();
+			const { container: withoutClassName } = render( <NumberControl /> );
+
+			const { container: withClassName } = render(
+				<NumberControl className="hello" />
+			);
+
+			expect(
+				// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+				withoutClassName.querySelector( '.components-number-control' )
+			).not.toHaveClass( 'hello' );
+
+			expect(
+				// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+				withClassName.querySelector( '.components-number-control' )
+			).toHaveClass( 'hello' );
 		} );
 	} );
 

package/src/range-control/index.tsx

@@ -391,17 +391,18 @@ function UnforwardedRangeControl(
  * import { useState } from '@wordpress/element';
  *
  * const MyRangeControl = () => {
- *   const [ isChecked, setChecked ] = useState( true );
+ *   const [ value, setValue ] = useState();
  *   return (
  *     <RangeControl
  *       __nextHasNoMarginBottom
  *       __next40pxDefaultSize
  *       help="Please select how transparent you would like this."
- *       initialPosition={50}
+ *       initialPosition={ 50 }
  *       label="Opacity"
- *       max={100}
- *       min={0}
- *       onChange={() => {}}
+ *       max={ 100 }
+ *       min={ 0 }
+ *       value={ value }
+ *       onChange={ setValue }
  *     />
  *   );
  * };

package/src/toolbar/toolbar-dropdown-menu/index.tsx

@@ -16,7 +16,7 @@ import ToolbarContext from '../toolbar-context';
 import DropdownMenu from '../../dropdown-menu';
 import type { DropdownMenuProps } from '../../dropdown-menu/types';
 
-function ToolbarDropdownMenu(
+function UnforwardedToolbarDropdownMenu(
 	props: DropdownMenuProps,
 	ref: ForwardedRef< any >
 ) {
@@ -44,4 +44,5 @@ function ToolbarDropdownMenu(
 	);
 }
 
-export default forwardRef( ToolbarDropdownMenu );
+export const ToolbarDropdownMenu = forwardRef( UnforwardedToolbarDropdownMenu );
+export default ToolbarDropdownMenu;

package/src/toolbar/toolbar-item/index.tsx

@@ -16,7 +16,7 @@ import warning from '@wordpress/warning';
 import ToolbarContext from '../toolbar-context';
 import type { ToolbarItemProps } from './types';
 
-function ToolbarItem(
+function UnforwardedToolbarItem(
 	{ children, as: Component, ...props }: ToolbarItemProps,
 	ref: ForwardedRef< any >
 ) {
@@ -57,4 +57,5 @@ function ToolbarItem(
 	);
 }
 
-export default forwardRef( ToolbarItem );
+export const ToolbarItem = forwardRef( UnforwardedToolbarItem );
+export default ToolbarItem;

package/src/utils/get-node-text.ts

@@ -0,0 +1,24 @@
+const getNodeText = ( node: React.ReactNode ): string => {
+	if ( node === null ) {
+		return '';
+	}
+
+	switch ( typeof node ) {
+		case 'string':
+		case 'number':
+			return node.toString();
+		case 'object': {
+			if ( node instanceof Array ) {
+				return node.map( getNodeText ).join( '' );
+			}
+			if ( 'props' in node ) {
+				return getNodeText( node.props.children );
+			}
+			return '';
+		}
+		default:
+			return '';
+	}
+};
+
+export default getNodeText;

package/src/utils/math.js

@@ -59,9 +59,9 @@ function getPrecision( value ) {
 /**
  * Clamps a value based on a min/max range.
  *
- * @param {number} value The value.
- * @param {number} min   The minimum range.
- * @param {number} max   The maximum range.
+ * @param {number|string} value The value.
+ * @param {number}        min   The minimum range.
+ * @param {number}        max   The maximum range.
  *
  * @return {number} The clamped value.
  */
@@ -71,28 +71,23 @@ export function clamp( value, min, max ) {
 }
 
 /**
- * Clamps a value based on a min/max range with rounding
+ * Rounds a value to the nearest step offset by a minimum.
  *
- * @param {number | string} value The value.
- * @param {number}          min   The minimum range.
- * @param {number}          max   The maximum range.
- * @param {number}          step  A multiplier for the value.
+ * @param {number|string} value The value.
+ * @param {number}        min   The minimum range.
+ * @param {number}        step  The increment for the value.
  *
- * @return {number} The rounded and clamped value.
+ * @return {number} The value as a valid step.
  */
-export function roundClamp(
-	value = 0,
-	min = Infinity,
-	max = Infinity,
-	step = 1
-) {
+export function ensureValidStep( value, min, step ) {
 	const baseValue = getNumber( value );
 	const stepValue = getNumber( step );
-	const precision = getPrecision( step );
-	const rounded = Math.round( baseValue / stepValue ) * stepValue;
-	const clampedValue = clamp( rounded, min, max );
-
-	return precision
-		? getNumber( clampedValue.toFixed( precision ) )
-		: clampedValue;
+	const precision = Math.max( getPrecision( step ), getPrecision( min ) );
+	const realMin = Math.abs( min ) === Infinity ? 0 : min;
+	// If the step is not a factor of the minimum then the step must be
+	// offset by the minimum.
+	const tare = realMin % stepValue ? realMin : 0;
+	const rounded = Math.round( ( baseValue - tare ) / stepValue ) * stepValue;
+	const fromMin = rounded + tare;
+	return precision ? getNumber( fromMin.toFixed( precision ) ) : fromMin;
 }

package/src/utils/test/get-node-text.js

@@ -0,0 +1,37 @@
+/**
+ * Internal dependencies
+ */
+import getNodeText from '../get-node-text';
+
+describe( 'getNodeText', () => {
+	it( 'should return an empty string for null', () => {
+		expect( getNodeText( null ) ).toBe( '' );
+	} );
+
+	it( 'should return the string representation of a string node', () => {
+		expect( getNodeText( 'Hello' ) ).toBe( 'Hello' );
+	} );
+
+	it( 'should return the string representation of a number node', () => {
+		expect( getNodeText( 123 ) ).toBe( '123' );
+	} );
+
+	it( 'should return an empty string for a boolean node', () => {
+		expect( getNodeText( true ) ).toBe( '' );
+	} );
+
+	it( 'should concatenate text from an array of nodes', () => {
+		expect( getNodeText( [ 'Hello', ' ', 'World' ] ) ).toBe(
+			'Hello World'
+		);
+	} );
+
+	it( 'should return text from a React element with children', () => {
+		const element = (
+			<div>
+				Hello <span>World</span>
+			</div>
+		);
+		expect( getNodeText( element ) ).toBe( 'Hello World' );
+	} );
+} );

package/src/utils/test/math.js

@@ -1,7 +1,8 @@
 /**
  * Internal dependencies
  */
-import { add, clamp, subtract, roundClamp } from '../math';
+
+import { add, subtract, clamp, ensureValidStep } from '../math';
 
 describe( 'add', () => {
 	it( 'should add string and number values', () => {
@@ -58,44 +59,39 @@ describe( 'clamp', () => {
 	} );
 } );
 
-describe( 'roundClamp', () => {
-	it( 'should clamp a value between min and max', () => {
-		expect( roundClamp( 10, 1, 10 ) ).toBe( 10 );
-		expect( roundClamp( 1, 1, 10 ) ).toBe( 1 );
-		expect( roundClamp( 0, 1, 10 ) ).toBe( 1 );
+describe( 'ensureValidStep', () => {
+	it( 'should work with number or string values', () => {
+		expect( ensureValidStep( '49', 0, 10 ) ).toBe( 50 );
+		expect( ensureValidStep( 49, '0', 10 ) ).toBe( 50 );
+		expect( ensureValidStep( 49, 0, '10' ) ).toBe( 50 );
+	} );
 
-		expect( roundClamp( 50, 1, 10 ) ).toBe( 10 );
-		expect( roundClamp( 50, -10, 10 ) ).toBe( 10 );
-		expect( roundClamp( -50, -10, 10 ) ).toBe( -10 );
+	it( 'should round to step', () => {
+		expect( ensureValidStep( 40, 0, 10 ) ).toBe( 40 );
+		expect( ensureValidStep( 42, 0, 10 ) ).toBe( 40 );
+		expect( ensureValidStep( 45, 0, 10 ) ).toBe( 50 );
+		expect( ensureValidStep( 49, 0, 10 ) ).toBe( 50 );
 
-		expect( roundClamp( '50', 1, 10 ) ).toBe( 10 );
-		expect( roundClamp( '50', -10, 10 ) ).toBe( 10 );
-		expect( roundClamp( -50, -10, '10' ) ).toBe( -10 );
+		expect( ensureValidStep( 50, 0, 15 ) ).toBe( 45 );
+		expect( ensureValidStep( 50, 0, 11 ) ).toBe( 55 );
 	} );
 
-	it( 'should clamp number or string values', () => {
-		expect( roundClamp( '50', 1, 10 ) ).toBe( 10 );
-		expect( roundClamp( '50', -10, 10 ) ).toBe( 10 );
-		expect( roundClamp( -50, -10, '10' ) ).toBe( -10 );
+	it( 'should round with float in step', () => {
+		expect( ensureValidStep( 40.5, 1, 0.1 ) ).toBe( 40.5 );
+		expect( ensureValidStep( 40.05, 1, 0.01 ) ).toBe( 40.05 );
+		expect( ensureValidStep( 40.06, 1, 0.1 ) ).toBe( 40.1 );
+		expect( ensureValidStep( 40.123005, 1, 0.001 ) ).toBe( 40.123 );
 	} );
 
-	it( 'should clamp with step', () => {
-		expect( roundClamp( 40, 1, 100, 10 ) ).toBe( 40 );
-		expect( roundClamp( 42, 1, 100, 10 ) ).toBe( 40 );
-		expect( roundClamp( 45, 1, 100, 10 ) ).toBe( 50 );
-		expect( roundClamp( 49, 1, 100, 10 ) ).toBe( 50 );
-		expect( roundClamp( 50, 1, 100, 10 ) ).toBe( 50 );
-
-		expect( roundClamp( 50, 1, 100, 15 ) ).toBe( 45 );
-		expect( roundClamp( 50, 1, 100, '15' ) ).toBe( 45 );
-		expect( roundClamp( 50, 1, 100, 11 ) ).toBe( 55 );
+	it( 'should round to steps starting from min', () => {
+		expect( ensureValidStep( 10, 0.25, 1 ) ).toBe( 10.25 );
+		expect( ensureValidStep( 10, -20.25, 1 ) ).toBe( 9.75 );
+		expect( ensureValidStep( 10.5, 0.05, 0.1 ) ).toBe( 10.45 );
+		expect( ensureValidStep( 10.51, 0.05, 0.1 ) ).toBe( 10.55 );
 	} );
 
-	it( 'should clamp with float in step', () => {
-		expect( roundClamp( 40, 1, 100, 1 ) ).toBe( 40 );
-		expect( roundClamp( 40.5, 1, 100, 0.1 ) ).toBe( 40.5 );
-		expect( roundClamp( 40.05, 1, 100, 0.01 ) ).toBe( 40.05 );
-		expect( roundClamp( 40.06, 1, 100, 0.1 ) ).toBe( 40.1 );
-		expect( roundClamp( 40.123005, 1, 100, 0.001 ) ).toBe( 40.123 );
+	it( 'should round with a precision that’s the greater of min and step', () => {
+		expect( ensureValidStep( 10.061, 0.01, 0.1 ) ).toBe( 10.11 );
+		expect( ensureValidStep( 10.105, 0.1, 0.01 ) ).toBe( 10.11 );
 	} );
 } );

package/src/utils/theme-variables.scss

@@ -4,10 +4,6 @@
 // `--wp-admin-theme-color`. If the `--wp-admin-theme-color` variable is not
 // defined, fallback to the default theme color (WP blueberry).
 $components-color-accent: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-
-// Define accent color transparent variants.
-$components-color-accent-transparent-40: rgba(var(--wp-components-color-accent--rgb, var(--wp-admin-theme-color--rgb)), 0.04);
-
 $components-color-accent-darker-10: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
 $components-color-accent-darker-20: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));