@wordpress/components 29.4.0 → 29.5.0

package/build-types/gradient-picker/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/gradient-picker/index.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EACX,4BAA4B,EAI5B,MAAM,SAAS,CAAC;AAoJjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,wBAAgB,cAAc,CAAE,EAC/B,SAAS,EACT,SAAc,EACd,QAAQ,EACR,KAAK,EACL,SAAgB,EAChB,WAAkB,EAClB,sBAA8B,EAC9B,iCAAiC,EACjC,YAAgB,EAChB,GAAG,eAAe,EAClB,EAAE,4BAA4B,+BA2C9B;AAED,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/gradient-picker/index.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EACX,4BAA4B,EAI5B,MAAM,SAAS,CAAC;AAgIjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,wBAAgB,cAAc,CAAE,EAC/B,SAAS,EACT,SAAc,EACd,QAAQ,EACR,KAAK,EACL,SAAgB,EAChB,WAAkB,EAClB,sBAA8B,EAC9B,iCAAiC,EACjC,YAAgB,EAChB,GAAG,eAAe,EAClB,EAAE,4BAA4B,+BA2C9B;AAED,eAAe,cAAc,CAAC"}

package/build-types/input-control/styles/input-control-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input-control-styles.d.ts","sourceRoot":"","sources":["../../../src/input-control/styles/input-control-styles.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGvD,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD;;GAEG;AACH,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAI7D,OAAO,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AAE9E,KAAK,cAAc,GAAG;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oBAAoB,CAAC,EAAE,aAAa,CAAE,OAAO,CAAE,CAAC;IAChD,aAAa,CAAC,EAAE,aAAa,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,MAAM;;SATuC,MAAO,WAAW;2GAY3E,CAAC;AAEF,eAAO,MAAM,MAAM;;SAduC,MAAO,WAAW;2GAmB3E,CAAC;AAEF,KAAK,aAAa,GAAG;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAiBF,eAAO,MAAM,UAAU;;SAzCmC,MAAO,WAAW;yHA2D3E,CAAC;AAEF,eAAO,MAAM,IAAI;;;;UAgBhB,CAAC;AA+BF,eAAO,MAAM,SAAS;;SA5GoC,MAAO,WAAW;0HAsH3E,CAAC;AAEF,KAAK,UAAU,GAAG;IACjB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,aAAa,CAAE,QAAQ,CAAE,CAAC;IACvC,kBAAkB,CAAC,EAAE,aAAa,CAAE,oBAAoB,CAAE,CAAC;IAC3D,gBAAgB,CAAC,EAAE,aAAa,CAAE,kBAAkB,CAAE,CAAC;CACvD,CAAC;AAYF,eAAO,MAAM,cAAc,wBAA0B,UAAU,0BAsB9D,CAAC;AAEF,eAAO,MAAM,aAAa,gDAGvB,UAAU;;;;;;;;;;;;;;;;;;;;;;;;CAsCZ,CAAC;AA+CF,eAAO,MAAM,KAAK;;SA5PwC,MAAO,WAAW;+HAyR3E,CAAC;AAmBF,eAAO,MAAM,KAAK,UACV,uBAAuB,CAC7B;IAAE,aAAa,CAAC,EAAE,aAAa,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,EACtD,OAAO,EACP,KAAK,CACL,gCACwC,CAAC;AAE3C,eAAO,MAAM,YAAY;;;;UAExB,CAAC;AA8BF,eAAO,MAAM,mBAAmB;;SApV0B,MAAO,WAAW;;eA6TjC,OAAO;yGAyBjD,CAAC"}
+{"version":3,"file":"input-control-styles.d.ts","sourceRoot":"","sources":["../../../src/input-control/styles/input-control-styles.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGvD,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD;;GAEG;AACH,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAI7D,OAAO,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AAE9E,KAAK,cAAc,GAAG;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oBAAoB,CAAC,EAAE,aAAa,CAAE,OAAO,CAAE,CAAC;IAChD,aAAa,CAAC,EAAE,aAAa,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,MAAM;;SATuC,MAAO,WAAW;2GAY3E,CAAC;AAEF,eAAO,MAAM,MAAM;;SAduC,MAAO,WAAW;2GAmB3E,CAAC;AAEF,KAAK,aAAa,GAAG;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAiBF,eAAO,MAAM,UAAU;;SAzCmC,MAAO,WAAW;yHA2D3E,CAAC;AAEF,eAAO,MAAM,IAAI;;;;UAgBhB,CAAC;AA+BF,eAAO,MAAM,SAAS;;SA5GoC,MAAO,WAAW;0HAsH3E,CAAC;AAEF,KAAK,UAAU,GAAG;IACjB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,aAAa,CAAE,QAAQ,CAAE,CAAC;IACvC,kBAAkB,CAAC,EAAE,aAAa,CAAE,oBAAoB,CAAE,CAAC;IAC3D,gBAAgB,CAAC,EAAE,aAAa,CAAE,kBAAkB,CAAE,CAAC;CACvD,CAAC;AAYF,eAAO,MAAM,cAAc,wBAA0B,UAAU,0BAsB9D,CAAC;AAEF,eAAO,MAAM,aAAa,gDAGvB,UAAU;;;;;;;;;;;;;;;;;;;;;;;;CAsCZ,CAAC;AA+CF,eAAO,MAAM,KAAK;;SA5PwC,MAAO,WAAW;+HAiS3E,CAAC;AAmBF,eAAO,MAAM,KAAK,UACV,uBAAuB,CAC7B;IAAE,aAAa,CAAC,EAAE,aAAa,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,EACtD,OAAO,EACP,KAAK,CACL,gCACwC,CAAC;AAE3C,eAAO,MAAM,YAAY;;;;UAExB,CAAC;AA8BF,eAAO,MAAM,mBAAmB;;SA5V0B,MAAO,WAAW;;eAqUjC,OAAO;yGAyBjD,CAAC"}

package/build-types/textarea-control/styles/textarea-control-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textarea-control-styles.d.ts","sourceRoot":"","sources":["../../../src/textarea-control/styles/textarea-control-styles.ts"],"names":[],"mappings":"AAkCA,eAAO,MAAM,cAAc;;SAfI,MAAQ,WAC/B;2HAkEP,CAAC"}
+{"version":3,"file":"textarea-control-styles.d.ts","sourceRoot":"","sources":["../../../src/textarea-control/styles/textarea-control-styles.ts"],"names":[],"mappings":"AAkCA,eAAO,MAAM,cAAc;;SAfI,MAAQ,WAC/B;2HAgEP,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "29.4.0",
+	"version": "29.5.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.18.0",
-		"@wordpress/compose": "^7.18.0",
-		"@wordpress/date": "^5.18.0",
-		"@wordpress/deprecated": "^4.18.0",
-		"@wordpress/dom": "^4.18.0",
-		"@wordpress/element": "^6.18.0",
-		"@wordpress/escape-html": "^3.18.0",
-		"@wordpress/hooks": "^4.18.0",
-		"@wordpress/html-entities": "^4.18.0",
-		"@wordpress/i18n": "^5.18.0",
-		"@wordpress/icons": "^10.18.0",
-		"@wordpress/is-shallow-equal": "^5.18.0",
-		"@wordpress/keycodes": "^4.18.0",
-		"@wordpress/primitives": "^4.18.0",
-		"@wordpress/private-apis": "^1.18.0",
-		"@wordpress/rich-text": "^7.18.0",
-		"@wordpress/warning": "^3.18.0",
+		"@wordpress/a11y": "^4.19.0",
+		"@wordpress/compose": "^7.19.0",
+		"@wordpress/date": "^5.19.0",
+		"@wordpress/deprecated": "^4.19.0",
+		"@wordpress/dom": "^4.19.0",
+		"@wordpress/element": "^6.19.0",
+		"@wordpress/escape-html": "^3.19.0",
+		"@wordpress/hooks": "^4.19.0",
+		"@wordpress/html-entities": "^4.19.0",
+		"@wordpress/i18n": "^5.19.0",
+		"@wordpress/icons": "^10.19.0",
+		"@wordpress/is-shallow-equal": "^5.19.0",
+		"@wordpress/keycodes": "^4.19.0",
+		"@wordpress/primitives": "^4.19.0",
+		"@wordpress/private-apis": "^1.19.0",
+		"@wordpress/rich-text": "^7.19.0",
+		"@wordpress/warning": "^3.19.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -85,5 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "afe4fb333177642180ac020f1030c5685eab7183"
+	"gitHead": "d6b0b20fa927b110140dc7fdd906a7e0bf662004"
 }

package/src/border-box-control/test/index.tsx

@@ -202,7 +202,7 @@ describe( 'BorderBoxControl', () => {
 			await waitFor( () =>
 				expect(
 					screen.getByRole( 'button', {
-						name: 'Custom color picker.',
+						name: 'Custom color picker',
 					} )
 				).toBeVisible()
 			);

package/src/border-control/border-control-dropdown/component.tsx

@@ -157,7 +157,7 @@ const BorderControlDropdown = (
 		onStyleChange,
 		popoverContentClassName,
 		popoverControlsClassName,
-		resetButtonClassName,
+		resetButtonWrapperClassName,
 		size,
 		__unstablePopoverProps,
 		...otherProps
@@ -173,7 +173,7 @@ const BorderControlDropdown = (
 		enableStyle
 	);
 
-	const showResetButton = color || ( style && style !== 'none' );
+	const enableResetButton = color || ( style && style !== 'none' );
 	const dropdownPosition = __experimentalIsRenderedInSidebar
 		? 'bottom left'
 		: undefined;
@@ -199,9 +199,7 @@ const BorderControlDropdown = (
 		</Button>
 	);
 
-	const renderContent: DropdownComponentProps[ 'renderContent' ] = ( {
-		onClose,
-	} ) => (
+	const renderContent: DropdownComponentProps[ 'renderContent' ] = () => (
 		<>
 			<DropdownContentWrapper paddingSize="medium">
 				<VStack className={ popoverControlsClassName } spacing={ 6 }>
@@ -224,22 +222,20 @@ const BorderControlDropdown = (
 						/>
 					) }
 				</VStack>
-			</DropdownContentWrapper>
-			{ showResetButton && (
-				<DropdownContentWrapper paddingSize="none">
+				<div className={ resetButtonWrapperClassName }>
 					<Button
-						className={ resetButtonClassName }
 						variant="tertiary"
 						onClick={ () => {
 							onReset();
-							onClose();
 						} }
+						disabled={ ! enableResetButton }
+						accessibleWhenDisabled
 						__next40pxDefaultSize
 					>
 						{ __( 'Reset' ) }
 					</Button>
-				</DropdownContentWrapper>
-			) }
+				</div>
+			</DropdownContentWrapper>
 		</>
 	);
 

package/src/border-control/border-control-dropdown/hook.ts

@@ -76,8 +76,8 @@ export function useBorderControlDropdown(
 		return cx( styles.borderControlPopoverContent );
 	}, [ cx ] );
 
-	const resetButtonClassName = useMemo( () => {
-		return cx( styles.resetButton );
+	const resetButtonWrapperClassName = useMemo( () => {
+		return cx( styles.resetButtonWrapper );
 	}, [ cx ] );
 
 	return {
@@ -94,7 +94,7 @@ export function useBorderControlDropdown(
 		onReset,
 		popoverContentClassName,
 		popoverControlsClassName,
-		resetButtonClassName,
+		resetButtonWrapperClassName,
 		size,
 		__experimentalIsRenderedInSidebar,
 	};

package/src/border-control/styles.ts

@@ -147,16 +147,10 @@ export const borderControlPopoverControls = css`
 export const borderControlPopoverContent = css``;
 export const borderColorIndicator = css``;
 
-export const resetButton = css`
-	justify-content: center;
-	width: 100%;
-
-	/* Override button component styling */
-	&& {
-		border-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 400 ] };
-		border-top-left-radius: 0;
-		border-top-right-radius: 0;
-	}
+export const resetButtonWrapper = css`
+	display: flex;
+	justify-content: flex-end;
+	margin-top: 12px;
 `;
 
 export const borderSlider = () => css`

package/src/border-control/test/index.js

@@ -138,7 +138,7 @@ describe( 'BorderControl', () => {
 
 			const customColorPicker = getButton( /Custom color picker/ );
 			const circularOptionPicker = screen.getByRole( 'listbox', {
-				name: 'Custom color picker.',
+				name: 'Custom color picker',
 			} );
 			const colorSwatchButtons =
 				within( circularOptionPicker ).getAllByRole( 'option' );

package/src/circular-option-picker/README.md

@@ -93,6 +93,19 @@ Prevents keyboard interaction from wrapping around. Only used when `asButtons` i
 - Required: No
 - Default: `true`
 
+### `aria-labelledby`: `string`
+
+The ID reference list of one or more elements that label the wrapper element.
+
+- Required: No
+
+### `aria-label`: `string`
+
+The label for the wrapper element. Not used if an 'aria-labelledby' is provided.
+
+- Required: No
+- Default: `Custom color picker`
+
 ## Subcomponents
 
 ### `CircularOptionPicker.ButtonAction`

package/src/circular-option-picker/circular-option-picker.tsx

@@ -132,7 +132,7 @@ function ButtonsCircularOptionPicker(
 	);
 
 	return (
-		<div { ...additionalProps } id={ baseId }>
+		<div { ...additionalProps } role="group" id={ baseId }>
 			<CircularOptionPickerContext.Provider value={ contextValue }>
 				{ options }
 				{ children }

package/src/circular-option-picker/index.tsx

@@ -9,5 +9,6 @@ export {
 	ButtonAction,
 	DropdownLinkAction,
 } from './circular-option-picker-actions';
+export { getComputeCircularOptionPickerCommonProps } from './utils';
 
 export default CircularOptionPicker;

package/src/circular-option-picker/stories/index.story.tsx

@@ -131,7 +131,7 @@ WithLoopingDisabled.parameters = {
 	docs: {
 		source: {
 			code: `<CircularOptionPicker
-  aria-label="${ WithLoopingDisabled.args[ 'aria-label' ] }"
+  'aria-label': 'Circular Option Picker',
   loop={false}
   options={<DefaultOptions />}
 />`,

package/src/circular-option-picker/test/index.tsx

@@ -57,6 +57,7 @@ describe( 'CircularOptionPicker', () => {
 
 			expect( screen.queryByRole( 'listbox' ) ).not.toBeInTheDocument();
 			expect( screen.queryByRole( 'option' ) ).not.toBeInTheDocument();
+			expect( screen.getByRole( 'group' ) ).toBeInTheDocument();
 			expect( screen.getByRole( 'button' ) ).toBeInTheDocument();
 		} );
 	} );

package/src/circular-option-picker/types.ts

@@ -40,6 +40,16 @@ type CommonCircularOptionPickerProps = {
 	 * The child elements.
 	 */
 	children?: ReactNode;
+	/**
+	 * The ID reference list of one or more elements that label the wrapper
+	 * element.
+	 */
+	'aria-labelledby'?: string;
+	/**
+	 * The label for the wrapper element. Defaults to 'Custom color picker'. Not
+	 * used if an 'aria-labelledby' is provided.
+	 */
+	'aria-label'?: string;
 };
 
 type WithBaseId = {
@@ -59,16 +69,7 @@ type FullListboxCircularOptionPickerProps = CommonCircularOptionPickerProps & {
 	 * @default true
 	 */
 	loop?: boolean;
-} & (
-		| {
-				'aria-label': string;
-				'aria-labelledby'?: never;
-		  }
-		| {
-				'aria-label'?: never;
-				'aria-labelledby': string;
-		  }
-	);
+};
 
 export type ListboxCircularOptionPickerProps = WithBaseId &
 	Omit< FullListboxCircularOptionPickerProps, 'asButtons' >;

package/src/circular-option-picker/utils.tsx

@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Computes the common props for the CircularOptionPicker.
+ */
+export function getComputeCircularOptionPickerCommonProps(
+	asButtons?: boolean,
+	loop?: boolean,
+	ariaLabel?: string,
+	ariaLabelledby?: string
+) {
+	const metaProps = asButtons
+		? { asButtons: true }
+		: { asButtons: false, loop };
+
+	const labelProps = {
+		'aria-labelledby': ariaLabelledby,
+		'aria-label': ariaLabelledby
+			? undefined
+			: ariaLabel || __( 'Custom color picker' ),
+	};
+
+	return { metaProps, labelProps };
+}

package/src/color-palette/index.tsx

@@ -19,7 +19,9 @@ import { useCallback, useMemo, useState, forwardRef } from '@wordpress/element';
  */
 import Dropdown from '../dropdown';
 import { ColorPicker } from '../color-picker';
-import CircularOptionPicker from '../circular-option-picker';
+import CircularOptionPicker, {
+	getComputeCircularOptionPickerCommonProps,
+} from '../circular-option-picker';
 import { VStack } from '../v-stack';
 import { Truncate } from '../truncate';
 import { ColorHeading } from './styles';
@@ -233,7 +235,7 @@ function UnforwardedColorPalette(
 				buttonLabelName,
 				displayValue
 		  )
-		: __( 'Custom color picker.' );
+		: __( 'Custom color picker' );
 
 	const paletteCommonProps = {
 		clearColor,
@@ -251,33 +253,12 @@ function UnforwardedColorPalette(
 		</CircularOptionPicker.ButtonAction>
 	);
 
-	let metaProps:
-		| { asButtons: false; loop?: boolean; 'aria-label': string }
-		| { asButtons: false; loop?: boolean; 'aria-labelledby': string }
-		| { asButtons: true };
-
-	if ( asButtons ) {
-		metaProps = { asButtons: true };
-	} else {
-		const _metaProps: { asButtons: false; loop?: boolean } = {
-			asButtons: false,
-			loop,
-		};
-
-		if ( ariaLabel ) {
-			metaProps = { ..._metaProps, 'aria-label': ariaLabel };
-		} else if ( ariaLabelledby ) {
-			metaProps = {
-				..._metaProps,
-				'aria-labelledby': ariaLabelledby,
-			};
-		} else {
-			metaProps = {
-				..._metaProps,
-				'aria-label': __( 'Custom color picker.' ),
-			};
-		}
-	}
+	const { metaProps, labelProps } = getComputeCircularOptionPickerCommonProps(
+		asButtons,
+		loop,
+		ariaLabel,
+		ariaLabelledby
+	);
 
 	return (
 		<VStack spacing={ 3 } ref={ forwardedRef } { ...additionalProps }>
@@ -335,6 +316,7 @@ function UnforwardedColorPalette(
 			{ ( colors.length > 0 || actions ) && (
 				<CircularOptionPicker
 					{ ...metaProps }
+					{ ...labelProps }
 					actions={ actions }
 					options={
 						hasMultipleColorOrigins ? (

package/src/color-palette/test/index.tsx

@@ -258,7 +258,7 @@ describe( 'ColorPalette', () => {
 		expect( screen.queryByText( colorCode ) ).not.toBeInTheDocument();
 		expect(
 			screen.getByRole( 'button', {
-				name: /^Custom color picker.$/,
+				name: /^Custom color picker$/,
 			} )
 		).toBeInTheDocument();
 	} );

package/src/duotone-picker/duotone-picker.tsx

@@ -13,7 +13,9 @@ import { __, sprintf } from '@wordpress/i18n';
  * Internal dependencies
  */
 import ColorListPicker from './color-list-picker';
-import CircularOptionPicker from '../circular-option-picker';
+import CircularOptionPicker, {
+	getComputeCircularOptionPickerCommonProps,
+} from '../circular-option-picker';
 import { VStack } from '../v-stack';
 
 import CustomDuotoneBar from './custom-duotone-bar';
@@ -127,33 +129,12 @@ function DuotonePicker( {
 		);
 	} );
 
-	let metaProps:
-		| { asButtons: false; loop?: boolean; 'aria-label': string }
-		| { asButtons: false; loop?: boolean; 'aria-labelledby': string }
-		| { asButtons: true };
-
-	if ( asButtons ) {
-		metaProps = { asButtons: true };
-	} else {
-		const _metaProps: { asButtons: false; loop?: boolean } = {
-			asButtons: false,
-			loop,
-		};
-
-		if ( ariaLabel ) {
-			metaProps = { ..._metaProps, 'aria-label': ariaLabel };
-		} else if ( ariaLabelledby ) {
-			metaProps = {
-				..._metaProps,
-				'aria-labelledby': ariaLabelledby,
-			};
-		} else {
-			metaProps = {
-				..._metaProps,
-				'aria-label': __( 'Custom color picker.' ),
-			};
-		}
-	}
+	const { metaProps, labelProps } = getComputeCircularOptionPickerCommonProps(
+		asButtons,
+		loop,
+		ariaLabel,
+		ariaLabelledby
+	);
 
 	const options = unsetable
 		? [ unsetOption, ...duotoneOptions ]
@@ -163,6 +144,7 @@ function DuotonePicker( {
 		<CircularOptionPicker
 			{ ...otherProps }
 			{ ...metaProps }
+			{ ...labelProps }
 			options={ options }
 			actions={
 				!! clearable && (

package/src/font-size-picker/README.md

@@ -99,6 +99,8 @@ Available units for custom font size selection.
 
 The current font size value.
 
+**Note**: For the `units` property to work, the current font size value must be specified as strings with units (e.g., `'12px'` instead of `12`). When the font size is provided as a number, the component operates in "unitless mode" where the `units` property has no effect.
+
 -   Required: No
 
 ### `withReset`: `boolean`

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

@@ -18,6 +18,10 @@ const meta: Meta< typeof FontSizePicker > = {
 	component: FontSizePicker,
 	argTypes: {
 		value: { control: false },
+		units: {
+			control: 'inline-check',
+			options: [ 'px', 'em', 'rem', 'vw', 'vh' ],
+		},
 	},
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },

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

@@ -34,6 +34,10 @@ export type FontSizePickerProps = {
 	units?: string[];
 	/**
 	 * The current font size value.
+	 *
+	 * Note: For the `units` property to work, the current font size value must be specified
+	 * as strings with units (e.g., '12px' instead of 12). When the font size is provided
+	 * as a number, the component operates in "unitless mode" where the `units` property has no effect.
 	 */
 	value?: number | string;
 	/**

package/src/gradient-picker/index.tsx

@@ -8,7 +8,9 @@ import { useCallback, useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import CircularOptionPicker from '../circular-option-picker';
+import CircularOptionPicker, {
+	getComputeCircularOptionPickerCommonProps,
+} from '../circular-option-picker';
 import CustomGradientPicker from '../custom-gradient-picker';
 import { VStack } from '../v-stack';
 import { ColorHeading } from '../color-palette/styles';
@@ -128,37 +130,17 @@ function Component( props: PickerProps< any > ) {
 		<SingleOrigin { ...additionalProps } />
 	);
 
-	let metaProps:
-		| { asButtons: false; loop?: boolean; 'aria-label': string }
-		| { asButtons: false; loop?: boolean; 'aria-labelledby': string }
-		| { asButtons: true };
-
-	if ( asButtons ) {
-		metaProps = { asButtons: true };
-	} else {
-		const _metaProps: { asButtons: false; loop?: boolean } = {
-			asButtons: false,
-			loop,
-		};
-
-		if ( ariaLabel ) {
-			metaProps = { ..._metaProps, 'aria-label': ariaLabel };
-		} else if ( ariaLabelledby ) {
-			metaProps = {
-				..._metaProps,
-				'aria-labelledby': ariaLabelledby,
-			};
-		} else {
-			metaProps = {
-				..._metaProps,
-				'aria-label': __( 'Custom color picker.' ),
-			};
-		}
-	}
+	const { metaProps, labelProps } = getComputeCircularOptionPickerCommonProps(
+		asButtons,
+		loop,
+		ariaLabel,
+		ariaLabelledby
+	);
 
 	return (
 		<CircularOptionPicker
 			{ ...metaProps }
+			{ ...labelProps }
 			actions={ actions }
 			options={ options }
 		/>

package/src/input-control/styles/input-control-styles.tsx

@@ -285,7 +285,15 @@ export const Input = styled.input< InputProps >`
 		${ customPaddings }
 
 		&::-webkit-input-placeholder {
-			line-height: normal;
+			color: ${ COLORS.ui.darkGrayPlaceholder };
+		}
+
+		&::-moz-placeholder {
+			color: ${ COLORS.ui.darkGrayPlaceholder };
+		}
+
+		&:-ms-input-placeholder {
+			color: ${ COLORS.ui.darkGrayPlaceholder };
 		}
 
 		&[type='email'],

package/src/mobile/bottom-sheet/switch-cell.native.js

@@ -57,7 +57,7 @@ export default function BottomSheetSwitchCell( props ) {
 			accessibilityRole="none"
 			accessibilityHint={
 				/* translators: accessibility text (hint for switches) */
-				__( 'Double tap to toggle setting' )
+				__( 'Double tap to change setting' )
 			}
 			onPress={ onPress }
 			editable={ false }

package/src/notice/README.md

@@ -19,7 +19,7 @@ Notices are color-coded to indicate the type of message being communicated:
 - **Informational** notices are **blue** by default.
 - If there is a parent `Theme` component with an `accent` color prop, informational notices will take on that color instead.
 - **Success** notices are **green.**
-- **Warning** notices are **yellow\*\***.\*\*
+- **Warning** notices are **yellow.**
 - **Error** notices are **red.**
 
 If an icon is included in the Notice, it should be color-coded to match the Notice state.

package/src/notice/style.scss

@@ -6,6 +6,7 @@
 	border-left: 4px solid $components-color-accent;
 	padding: 8px 12px;
 	align-items: center;
+	color: $gray-900;
 
 	&.is-dismissible {
 		position: relative;

package/src/number-control/README.md

@@ -4,7 +4,7 @@
 This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
 </div>
 
-NumberControl is an enhanced HTML [`input[type="number]`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number) element.
+NumberControl is an enhanced HTML [`input[type="number"]`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number) element.
 
 ## Usage
 

package/src/number-control/index.tsx

@@ -229,8 +229,8 @@ function UnforwardedNumberControl(
 			hideHTMLArrows={ spinControls !== 'native' }
 			isDragEnabled={ isDragEnabled }
 			label={ label }
-			max={ max }
-			min={ min }
+			max={ max === Infinity ? undefined : max }
+			min={ min === -Infinity ? undefined : min }
 			ref={ mergedRef }
 			required={ required }
 			step={ step }

package/src/text-control/style.scss

@@ -28,3 +28,9 @@
 		padding-right: $grid-unit-15;
 	}
 }
+
+.components-text-control__input[type="email"],
+.components-text-control__input[type="url"] {
+	/* rtl:ignore */
+	direction: ltr;
+}

package/src/textarea-control/styles/textarea-control-styles.ts

@@ -62,7 +62,6 @@ export const StyledTextarea = styled.textarea`
 	}
 
 	&::-moz-placeholder {
-		opacity: 1; // Necessary because Firefox reduces this from 1.
 		color: ${ COLORS.ui.darkGrayPlaceholder };
 	}
 
@@ -76,7 +75,6 @@ export const StyledTextarea = styled.textarea`
 		}
 
 		&::-moz-placeholder {
-			opacity: 1; // Necessary because Firefox reduces this from 1.
 			color: ${ COLORS.ui.lightGrayPlaceholder };
 		}