@wordpress/components 32.2.2-next.v.202602200903.0 → 32.3.0

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

@@ -1 +1 @@
-{"version":3,"file":"select-control-styles.d.ts","sourceRoot":"","sources":["../../../src/select-control/styles/select-control-styles.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAKnD,UAAU,WACT,SAAQ,IAAI,CACX,kBAAkB,EAClB,uBAAuB,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAC7D;IAGD,UAAU,CAAC,EAAE,kBAAkB,CAAE,MAAM,CAAE,CAAC;CAC1C;AAuBD,eAAO,MAAM,eAAe;;;;wBAM3B,CAAC;AAiDF,eAAO,MAAM,eAAe,KAAK,CAAC;AAmDlC,eAAO,MAAM,MAAM;;;mIAuBlB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;yGAO5B,CAAC;AAEF,eAAO,MAAM,yCAAyC;;;;UAOrD,CAAC"}
+{"version":3,"file":"select-control-styles.d.ts","sourceRoot":"","sources":["../../../src/select-control/styles/select-control-styles.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAKnD,UAAU,WACT,SAAQ,IAAI,CACX,kBAAkB,EAClB,uBAAuB,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAC7D;IAGD,UAAU,CAAC,EAAE,kBAAkB,CAAE,MAAM,CAAE,CAAC;CAC1C;AAuBD,eAAO,MAAM,eAAe;;;;wBAM3B,CAAC;AAiDF,eAAO,MAAM,eAAe,KAAK,CAAC;AAmDlC,eAAO,MAAM,MAAM;;;mIAwBlB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;yGAO5B,CAAC;AAEF,eAAO,MAAM,yCAAyC;;;;UAOrD,CAAC"}

package/build-types/toggle-group-control/toggle-group-control-option-base/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/toggle-group-control/toggle-group-control-option-base/styles.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EACX,uBAAuB,EACvB,iCAAiC,EACjC,MAAM,UAAU,CAAC;AAElB,eAAO,MAAM,SAAS;;;yGAKrB,CAAC;AAEF,eAAO,MAAM,UAAU,2CAEtB,CAAC;AAEF,eAAO,MAAM,UAAU,GAAK,8CAKzB,IAAI,CAAE,uBAAuB,EAAE,gBAAgB,GAAG,MAAM,CAAE,GAC5D,IAAI,CAAE,iCAAiC,EAAE,QAAQ,CAAE,GAAG;IACrD,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB,8CA2CD,CAAC;AAsBF,eAAO,MAAM,iBAAiB;;;yGAI7B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/toggle-group-control/toggle-group-control-option-base/styles.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EACX,uBAAuB,EACvB,iCAAiC,EACjC,MAAM,UAAU,CAAC;AAElB,eAAO,MAAM,SAAS;;;yGAKrB,CAAC;AAEF,eAAO,MAAM,UAAU,2CAEtB,CAAC;AAEF,eAAO,MAAM,UAAU,GAAK,8CAKzB,IAAI,CAAE,uBAAuB,EAAE,gBAAgB,GAAG,MAAM,CAAE,GAC5D,IAAI,CAAE,iCAAiC,EAAE,QAAQ,CAAE,GAAG;IACrD,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB,8CA4CD,CAAC;AAoBF,eAAO,MAAM,iBAAiB;;;yGAI7B,CAAC"}

package/build-types/tools-panel/tools-panel/hook.d.ts

@@ -23,7 +23,7 @@ export declare function useToolsPanel(props: WordPressComponentProps<ToolsPanelP
     toggleItem: (label: string) => void;
     className: string;
     children: import("react").ReactNode;
-    dropdownMenuProps?: React.ComponentProps<typeof import("../..").DropdownMenu>;
+    dropdownMenuProps?: Omit<React.ComponentProps<typeof import("../..").DropdownMenu>, "label">;
     label: string;
     defaultValue?: string | number | readonly string[] | undefined;
     onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;

package/build-types/tools-panel/types.d.ts

@@ -17,7 +17,7 @@ export type ToolsPanelProps = {
     /**
      * The dropdown menu props to configure the panel's `DropdownMenu`.
      */
-    dropdownMenuProps?: React.ComponentProps<typeof DropdownMenu>;
+    dropdownMenuProps?: Omit<React.ComponentProps<typeof DropdownMenu>, 'label'>;
     /**
      * Flags that the items in this ToolsPanel will be contained within an inner
      * wrapper element allowing the panel to lay them out accordingly.

package/build-types/tools-panel/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/tools-panel/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/tools-panel/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "32.2.2-next.v.202602200903.0+06edfb869",
+	"version": "32.3.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.40.1-next.v.202602200903.0+06edfb869",
-		"@wordpress/base-styles": "^6.16.1-next.v.202602200903.0+06edfb869",
-		"@wordpress/compose": "^7.40.1-next.v.202602200903.0+06edfb869",
-		"@wordpress/date": "^5.40.1-next.v.202602200903.0+06edfb869",
-		"@wordpress/deprecated": "^4.40.1-next.v.202602200903.0+06edfb869",
-		"@wordpress/dom": "^4.40.1-next.v.202602200903.0+06edfb869",
-		"@wordpress/element": "^6.40.1-next.v.202602200903.0+06edfb869",
-		"@wordpress/escape-html": "^3.40.1-next.v.202602200903.0+06edfb869",
-		"@wordpress/hooks": "^4.40.1-next.v.202602200903.0+06edfb869",
-		"@wordpress/html-entities": "^4.40.1-next.v.202602200903.0+06edfb869",
-		"@wordpress/i18n": "^6.13.1-next.v.202602200903.0+06edfb869",
-		"@wordpress/icons": "^11.7.1-next.v.202602200903.0+06edfb869",
-		"@wordpress/is-shallow-equal": "^5.40.1-next.v.202602200903.0+06edfb869",
-		"@wordpress/keycodes": "^4.40.1-next.v.202602200903.0+06edfb869",
-		"@wordpress/primitives": "^4.40.1-next.v.202602200903.0+06edfb869",
-		"@wordpress/private-apis": "^1.40.1-next.v.202602200903.0+06edfb869",
-		"@wordpress/rich-text": "^7.40.1-next.v.202602200903.0+06edfb869",
-		"@wordpress/warning": "^3.40.1-next.v.202602200903.0+06edfb869",
+		"@wordpress/a11y": "^4.41.0",
+		"@wordpress/base-styles": "^6.17.0",
+		"@wordpress/compose": "^7.41.0",
+		"@wordpress/date": "^5.41.0",
+		"@wordpress/deprecated": "^4.41.0",
+		"@wordpress/dom": "^4.41.0",
+		"@wordpress/element": "^6.41.0",
+		"@wordpress/escape-html": "^3.41.0",
+		"@wordpress/hooks": "^4.41.0",
+		"@wordpress/html-entities": "^4.41.0",
+		"@wordpress/i18n": "^6.14.0",
+		"@wordpress/icons": "^11.8.0",
+		"@wordpress/is-shallow-equal": "^5.41.0",
+		"@wordpress/keycodes": "^4.41.0",
+		"@wordpress/primitives": "^4.41.0",
+		"@wordpress/private-apis": "^1.41.0",
+		"@wordpress/rich-text": "^7.41.0",
+		"@wordpress/warning": "^3.41.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -107,7 +107,7 @@
 		"@storybook/react-vite": "^10.1.11",
 		"@testing-library/jest-dom": "^6.9.1",
 		"@types/jest": "^29.5.14",
-		"@wordpress/jest-console": "^8.40.1-next.v.202602200903.0+06edfb869",
+		"@wordpress/jest-console": "^8.41.0",
 		"snapshot-diff": "^0.10.0",
 		"storybook": "^10.1.11",
 		"timezone-mock": "^1.3.6"
@@ -119,5 +119,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "6e225a6505fdc8e407305851c7a68b781dee8118"
+	"gitHead": "8bfc179b9aed74c0a6dd6e8edf7a49e40e4f87cc"
 }

package/src/button/style.scss

@@ -13,6 +13,7 @@
 .components-button {
 	display: inline-flex;
 	text-decoration: none;
+	word-break: break-word;
 	font-family: inherit;
 	font-size: $default-font-size;
 	font-weight: $font-weight-medium;

package/src/color-picker/color-input.tsx

@@ -9,17 +9,36 @@ import type { ColorInputProps } from './types';
 export const ColorInput = ( {
 	colorType,
 	color,
+	hsla,
 	onChange,
+	onHSLChange,
 	enableAlpha,
 }: ColorInputProps ) => {
-	const props = { color, onChange, enableAlpha };
 	switch ( colorType ) {
 		case 'hsl':
-			return <HslInput { ...props } />;
+			return (
+				<HslInput
+					hsla={ hsla }
+					onChange={ onHSLChange }
+					enableAlpha={ enableAlpha }
+				/>
+			);
 		case 'rgb':
-			return <RgbInput { ...props } />;
+			return (
+				<RgbInput
+					color={ color }
+					onChange={ onChange }
+					enableAlpha={ enableAlpha }
+				/>
+			);
 		default:
 		case 'hex':
-			return <HexInput { ...props } />;
+			return (
+				<HexInput
+					color={ color }
+					onChange={ onChange }
+					enableAlpha={ enableAlpha }
+				/>
+			);
 	}
 };

package/src/color-picker/component.tsx

@@ -4,12 +4,19 @@
 import type { ClipboardEvent, ForwardedRef } from 'react';
 import type { Colord } from 'colord';
 import { colord, extend, getFormat } from 'colord';
+import type { HslaColor } from 'react-colorful';
 import namesPlugin from 'colord/plugins/names';
 
 /**
  * WordPress dependencies
  */
-import { useCallback, useState, useMemo } from '@wordpress/element';
+import {
+	useCallback,
+	useEffect,
+	useRef,
+	useState,
+	useMemo,
+} from '@wordpress/element';
 import { useDebounce } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 
@@ -33,6 +40,21 @@ import type { ColorPickerProps, ColorType } from './types';
 
 extend( [ namesPlugin ] );
 
+/**
+ * Merges incoming HSLA with previous state, preserving hue for achromatic
+ * colors and saturation only at lightness extremes (black/white) where
+ * it has no visual effect.
+ */
+function mergeHSLA( nextHSLA: HslaColor, prevHSLA: HslaColor ): HslaColor {
+	if ( nextHSLA.s === 0 ) {
+		if ( nextHSLA.l === 0 || nextHSLA.l === 100 ) {
+			return { ...nextHSLA, h: prevHSLA.h, s: prevHSLA.s };
+		}
+		return { ...nextHSLA, h: prevHSLA.h };
+	}
+	return nextHSLA;
+}
+
 const options = [
 	{ label: 'RGB', value: 'rgb' as const },
 	{ label: 'HSL', value: 'hsl' as const },
@@ -65,9 +87,69 @@ const UnconnectedColorPicker = (
 
 	const debouncedSetColor = useDebounce( setColor );
 
+	// Internal HSLA state preserves hue and saturation values that
+	// would otherwise be lost when converting to/from hex at achromatic
+	// colors (e.g. pure black or white where any H/S maps to the same hex).
+	const [ internalHSLA, setInternalHSLA ] = useState< HslaColor >( () => ( {
+		...safeColordColor.toHsl(),
+	} ) );
+
+	// Track the last hex we produced so the sync effect can
+	// distinguish our own updates from external prop changes.
+	const lastProducedHexRef = useRef( safeColordColor.toHex() );
+
+	// Sync internalHSLA when the color prop changes externally (e.g.
+	// parent passes a new color that wasn't produced by our onChange).
+	useEffect( () => {
+		const incomingHex = safeColordColor.toHex();
+
+		// If this hex matches what we last produced, it's our own
+		// update arriving back — skip the sync to avoid overwriting
+		// internalHSLA with lossy round-tripped values.
+		if ( incomingHex === lastProducedHexRef.current ) {
+			return;
+		}
+
+		// Genuinely external change — sync internalHSLA.
+		lastProducedHexRef.current = incomingHex;
+		const externalHSLA = safeColordColor.toHsl();
+		setInternalHSLA( ( prev ) => mergeHSLA( externalHSLA, prev ) );
+	}, [ safeColordColor ] );
+
+	// Handler for HSL-aware components (Picker, HSL inputs) that
+	// provide raw HSLA values without information loss.
+	// Uses direct setColor (not debounced) to prevent race conditions
+	// where a stale debounced hex would overwrite newer internalHSLA.
+	// This is safe performance-wise because react-colorful internally
+	// throttles its onChange callbacks using requestAnimationFrame.
+
+	const handleHSLAChange = useCallback(
+		( nextHSLA: HslaColor ) => {
+			// No mergeHSLA here — this handler receives the user's explicit
+			// choice from the picker or HSL inputs, with no lossy conversion.
+			setInternalHSLA( nextHSLA );
+			const previousHex = lastProducedHexRef.current;
+			const nextHex = colord( nextHSLA ).toHex();
+			// Only notify parent when the hex actually changes. This
+			// avoids firing onChange for H/S changes on achromatic
+			// colors (e.g. adjusting hue on pure white).
+			if ( nextHex !== previousHex ) {
+				lastProducedHexRef.current = nextHex;
+				setColor( nextHex );
+			}
+		},
+		[ setColor ]
+	);
+
+	// Handler for components that provide Colord values (RGB, Hex inputs).
+	// Uses debouncedSetColor since the hex input fires per keystroke.
 	const handleChange = useCallback(
 		( nextValue: Colord ) => {
-			debouncedSetColor( nextValue.toHex() );
+			const nextHSLA = nextValue.toHsl();
+			setInternalHSLA( ( prev ) => mergeHSLA( nextHSLA, prev ) );
+			const nextHex = nextValue.toHex();
+			lastProducedHexRef.current = nextHex;
+			debouncedSetColor( nextHex );
 		},
 		[ debouncedSetColor ]
 	);
@@ -128,8 +210,8 @@ const UnconnectedColorPicker = (
 			onPasteCapture={ maybeHandlePaste }
 		>
 			<Picker
-				onChange={ handleChange }
-				color={ safeColordColor }
+				onChange={ handleHSLAChange }
+				hsla={ internalHSLA }
 				enableAlpha={ enableAlpha }
 			/>
 			<AuxiliaryColorArtefactWrapper>
@@ -154,7 +236,9 @@ const UnconnectedColorPicker = (
 					<ColorInput
 						colorType={ colorType }
 						color={ safeColordColor }
+						hsla={ internalHSLA }
 						onChange={ handleChange }
+						onHSLChange={ handleHSLAChange }
 						enableAlpha={ enableAlpha }
 					/>
 				</ColorInputWrapper>

package/src/color-picker/hsl-input.tsx

@@ -1,12 +1,7 @@
 /**
  * External dependencies
  */
-import { colord } from 'colord';
-
-/**
- * WordPress dependencies
- */
-import { useState, useEffect, useMemo } from '@wordpress/element';
+import type { HslaColor } from 'react-colorful';
 
 /**
  * Internal dependencies
@@ -14,49 +9,12 @@ import { useState, useEffect, useMemo } from '@wordpress/element';
 import { InputWithSlider } from './input-with-slider';
 import type { HslInputProps } from './types';
 
-export const HslInput = ( { color, onChange, enableAlpha }: HslInputProps ) => {
-	const colorPropHSLA = useMemo( () => color.toHsl(), [ color ] );
-
-	const [ internalHSLA, setInternalHSLA ] = useState( { ...colorPropHSLA } );
-
-	const isInternalColorSameAsReceivedColor = color.isEqual(
-		colord( internalHSLA )
-	);
-
-	useEffect( () => {
-		if ( ! isInternalColorSameAsReceivedColor ) {
-			// Keep internal HSLA color up to date with the received color prop
-			setInternalHSLA( colorPropHSLA );
-		}
-	}, [ colorPropHSLA, isInternalColorSameAsReceivedColor ] );
-
-	// If the internal color is equal to the received color prop, we can use the
-	// HSLA values from the local state which, compared to the received color prop,
-	// retain more details about the actual H and S values that the user selected,
-	// and thus allow for better UX when interacting with the H and S sliders.
-	const colorValue = isInternalColorSameAsReceivedColor
-		? internalHSLA
-		: colorPropHSLA;
-
-	const updateHSLAValue = (
-		partialNewValue: Partial< typeof colorPropHSLA >
-	) => {
-		const nextOnChangeValue = colord( {
-			...colorValue,
+export const HslInput = ( { hsla, onChange, enableAlpha }: HslInputProps ) => {
+	const updateHSLAValue = ( partialNewValue: Partial< HslaColor > ) => {
+		onChange( {
+			...hsla,
 			...partialNewValue,
 		} );
-
-		// Fire `onChange` only if the resulting color is different from the
-		// current one.
-		// Otherwise, update the internal HSLA color to cause a re-render.
-		if ( ! color.isEqual( nextOnChangeValue ) ) {
-			onChange( nextOnChangeValue );
-		} else {
-			setInternalHSLA( ( prevHSLA ) => ( {
-				...prevHSLA,
-				...partialNewValue,
-			} ) );
-		}
 	};
 
 	return (
@@ -66,7 +24,7 @@ export const HslInput = ( { color, onChange, enableAlpha }: HslInputProps ) => {
 				max={ 359 }
 				label="Hue"
 				abbreviation="H"
-				value={ colorValue.h }
+				value={ hsla.h }
 				onChange={ ( nextH: number ) => {
 					updateHSLAValue( { h: nextH } );
 				} }
@@ -76,7 +34,7 @@ export const HslInput = ( { color, onChange, enableAlpha }: HslInputProps ) => {
 				max={ 100 }
 				label="Saturation"
 				abbreviation="S"
-				value={ colorValue.s }
+				value={ hsla.s }
 				onChange={ ( nextS: number ) => {
 					updateHSLAValue( { s: nextS } );
 				} }
@@ -86,7 +44,7 @@ export const HslInput = ( { color, onChange, enableAlpha }: HslInputProps ) => {
 				max={ 100 }
 				label="Lightness"
 				abbreviation="L"
-				value={ colorValue.l }
+				value={ hsla.l }
 				onChange={ ( nextL: number ) => {
 					updateHSLAValue( { l: nextL } );
 				} }
@@ -97,7 +55,7 @@ export const HslInput = ( { color, onChange, enableAlpha }: HslInputProps ) => {
 					max={ 100 }
 					label="Alpha"
 					abbreviation="A"
-					value={ Math.trunc( 100 * colorValue.a ) }
+					value={ Math.trunc( 100 * hsla.a ) }
 					onChange={ ( nextA: number ) => {
 						updateHSLAValue( { a: nextA / 100 } );
 					} }

package/src/color-picker/picker.tsx

@@ -1,40 +1,44 @@
 /**
  * External dependencies
  */
-import { RgbStringColorPicker, RgbaStringColorPicker } from 'react-colorful';
-import { colord } from 'colord';
+import { HslColorPicker, HslaColorPicker } from 'react-colorful';
 
-/**
- * WordPress dependencies
- */
-import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
 import type { PickerProps } from './types';
 
-export const Picker = ( { color, enableAlpha, onChange }: PickerProps ) => {
-	const Component = enableAlpha
-		? RgbaStringColorPicker
-		: RgbStringColorPicker;
-	const rgbColor = useMemo( () => color.toRgbString(), [ color ] );
+// Pointer capture fortifies drag gestures so that they continue to work
+// while dragging outside the component over objects like iframes. If a
+// newer version of react-colorful begins to employ pointer capture this
+// will be redundant and should be removed.
+const pointerCaptureProps = {
+	onPointerDown( { currentTarget, pointerId }: React.PointerEvent ) {
+		currentTarget.setPointerCapture( pointerId );
+	},
+	onPointerUp( { currentTarget, pointerId }: React.PointerEvent ) {
+		currentTarget.releasePointerCapture( pointerId );
+	},
+};
+
+export const Picker = ( { hsla, enableAlpha, onChange }: PickerProps ) => {
+	if ( enableAlpha ) {
+		return (
+			<HslaColorPicker
+				color={ hsla }
+				onChange={ onChange }
+				{ ...pointerCaptureProps }
+			/>
+		);
+	}
 
 	return (
-		<Component
-			color={ rgbColor }
+		<HslColorPicker
+			color={ hsla }
 			onChange={ ( nextColor ) => {
-				onChange( colord( nextColor ) );
-			} }
-			// Pointer capture fortifies drag gestures so that they continue to
-			// work while dragging outside the component over objects like
-			// iframes. If a newer version of react-colorful begins to employ
-			// pointer capture this will be redundant and should be removed.
-			onPointerDown={ ( { currentTarget, pointerId } ) => {
-				currentTarget.setPointerCapture( pointerId );
-			} }
-			onPointerUp={ ( { currentTarget, pointerId } ) => {
-				currentTarget.releasePointerCapture( pointerId );
+				onChange( { ...nextColor, a: hsla.a } );
 			} }
+			{ ...pointerCaptureProps }
 		/>
 	);
 };

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

@@ -248,18 +248,19 @@ describe( 'ColorPicker', () => {
 			expect( onChange ).toHaveBeenLastCalledWith( '#597326' );
 
 			// Interact with the Lightness slider, setting to 100 (ie. white).
-			// It should also cause the `onChange` callback to fire, and reset the
-			// hue and saturation inputs to `0`.
+			// It should also cause the `onChange` callback to fire. The hue and
+			// saturation should be preserved (not reset to 0) since the user
+			// explicitly set them earlier.
 			fireEvent.change( lightnessSlider, { target: { value: 100 } } );
 
 			await waitFor( () =>
 				expect( lightnessSlider ).toHaveValue( '100' )
 			);
 			expect( lightnessNumberInput ).toHaveValue( 100 );
-			expect( hueSlider ).toHaveValue( '0' );
-			expect( saturationSlider ).toHaveValue( '0' );
-			expect( hueNumberInput ).toHaveValue( 0 );
-			expect( saturationNumberInput ).toHaveValue( 0 );
+			expect( hueSlider ).toHaveValue( '80' );
+			expect( saturationSlider ).toHaveValue( '50' );
+			expect( hueNumberInput ).toHaveValue( 80 );
+			expect( saturationNumberInput ).toHaveValue( 50 );
 			expect( onChange ).toHaveBeenCalledTimes( 2 );
 			expect( onChange ).toHaveBeenLastCalledWith( '#ffffff' );
 
@@ -309,6 +310,138 @@ describe( 'ColorPicker', () => {
 			expect( lightnessNumberInput ).toHaveValue( 52 );
 		} );
 
+		it( 'should preserve hue and saturation when lightness is set to 0 (black)', async () => {
+			const onChange = jest.fn();
+
+			render(
+				<ControlledColorPicker
+					onChange={ onChange }
+					enableAlpha={ false }
+					initialColor="#2ad5d5" // hsl(180, 67%, 50%)
+				/>
+			);
+
+			const formatSelector = screen.getByRole( 'combobox' );
+			await userEvent.setup().selectOptions( formatSelector, 'hsl' );
+
+			const hueSliders = screen.getAllByRole( 'slider', { name: 'Hue' } );
+			const hueSlider = hueSliders.at( -1 )!;
+			const saturationSlider = screen.getByRole( 'slider', {
+				name: 'Saturation',
+			} );
+			const lightnessSlider = screen.getByRole( 'slider', {
+				name: 'Lightness',
+			} );
+			const hueNumberInput = screen.getByRole( 'spinbutton', {
+				name: 'Hue',
+			} );
+			const saturationNumberInput = screen.getByRole( 'spinbutton', {
+				name: 'Saturation',
+			} );
+
+			// Verify initial values
+			expect( hueSlider ).toHaveValue( '180' );
+			expect( saturationSlider ).toHaveValue( '67' );
+
+			// Set lightness to 0 (black)
+			fireEvent.change( lightnessSlider, { target: { value: 0 } } );
+
+			await waitFor( () => expect( lightnessSlider ).toHaveValue( '0' ) );
+
+			// Hue and saturation should be preserved
+			expect( hueSlider ).toHaveValue( '180' );
+			expect( saturationSlider ).toHaveValue( '67' );
+			expect( hueNumberInput ).toHaveValue( 180 );
+			expect( saturationNumberInput ).toHaveValue( 67 );
+			expect( onChange ).toHaveBeenLastCalledWith( '#000000' );
+		} );
+
+		it( 'should reset saturation to 0 when a mid-gray is entered via hex input', async () => {
+			const user = userEvent.setup();
+
+			render(
+				<ControlledColorPicker
+					enableAlpha={ false }
+					initialColor="#2ad5d5" // hsl(180, 67%, 50%)
+				/>
+			);
+
+			const formatSelector = screen.getByRole( 'combobox' );
+
+			// Start in hex mode and enter a mid-gray.
+			await user.selectOptions( formatSelector, 'hex' );
+			const hexInput = screen.getByRole( 'textbox' );
+			await user.clear( hexInput );
+			await user.type( hexInput, '808080' );
+
+			// Switch to HSL to inspect the values.
+			await user.selectOptions( formatSelector, 'hsl' );
+
+			const saturationSlider = screen.getByRole( 'slider', {
+				name: 'Saturation',
+			} );
+			const saturationNumberInput = screen.getByRole( 'spinbutton', {
+				name: 'Saturation',
+			} );
+
+			// #808080 is hsl(0, 0%, 50%) — a pure mid-gray.
+			// Saturation must be 0, not the stale value from the
+			// previous chromatic color.
+			await waitFor( () =>
+				expect( saturationSlider ).toHaveValue( '0' )
+			);
+			expect( saturationNumberInput ).toHaveValue( 0 );
+		} );
+
+		it( 'should preserve hue when saturation is set to 0', async () => {
+			const onChange = jest.fn();
+
+			render(
+				<ControlledColorPicker
+					onChange={ onChange }
+					enableAlpha={ false }
+					initialColor="#ff0000" // hsl(0, 100%, 50%) - pure red
+				/>
+			);
+
+			const formatSelector = screen.getByRole( 'combobox' );
+			await userEvent.setup().selectOptions( formatSelector, 'hsl' );
+
+			const hueSliders = screen.getAllByRole( 'slider', { name: 'Hue' } );
+			const hueSlider = hueSliders.at( -1 )!;
+			const saturationSlider = screen.getByRole( 'slider', {
+				name: 'Saturation',
+			} );
+			const hueNumberInput = screen.getByRole( 'spinbutton', {
+				name: 'Hue',
+			} );
+
+			// Set a specific hue first
+			fireEvent.change( hueSlider, { target: { value: 200 } } );
+
+			await waitFor( () => expect( hueSlider ).toHaveValue( '200' ) );
+
+			// Set saturation to 0 (grayscale)
+			fireEvent.change( saturationSlider, { target: { value: 0 } } );
+
+			await waitFor( () =>
+				expect( saturationSlider ).toHaveValue( '0' )
+			);
+
+			// Hue should be preserved even though color is now gray
+			expect( hueSlider ).toHaveValue( '200' );
+			expect( hueNumberInput ).toHaveValue( 200 );
+
+			// Increase saturation again - hue should still be 200
+			fireEvent.change( saturationSlider, { target: { value: 50 } } );
+
+			await waitFor( () =>
+				expect( saturationSlider ).toHaveValue( '50' )
+			);
+
+			expect( hueSlider ).toHaveValue( '200' );
+			expect( hueNumberInput ).toHaveValue( 200 );
+		} );
 		describe.each( [
 			[ 'hue', 'Hue', '#aad52a' ],
 			[ 'saturation', 'Saturation', '#20dfdf' ],

package/src/color-picker/types.ts

@@ -56,15 +56,17 @@ export type ColorPickerProps = WordPressComponentProps<
 >;
 
 export interface PickerProps {
-	color: Colord;
+	hsla: HslaColor;
 	enableAlpha: boolean;
-	onChange: ( nextColor: Colord ) => void;
+	onChange: ( nextHsla: HslaColor ) => void;
 }
 
 export interface ColorInputProps {
 	colorType: 'hsl' | 'hex' | 'rgb';
 	color: Colord;
+	hsla: HslaColor;
 	onChange: ( nextColor: Colord ) => void;
+	onHSLChange: ( nextHsla: HslaColor ) => void;
 	enableAlpha: boolean;
 }
 
@@ -84,8 +86,8 @@ export interface HexInputProps {
 }
 
 export interface HslInputProps {
-	color: Colord;
-	onChange: ( nextColor: Colord ) => void;
+	hsla: HslaColor;
+	onChange: ( nextHsla: HslaColor ) => void;
 	enableAlpha: boolean;
 }