@wordpress/components 25.0.0 → 25.1.0

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

@@ -23,6 +23,7 @@ import type React from 'react';
  */
 export declare const ToolbarButton: React.ForwardRefExoticComponent<ToolbarButtonProps & Omit<Pick<{
     __next40pxDefaultSize?: boolean | undefined;
+    __next32pxSmallSize?: boolean | undefined;
     children?: React.ReactNode;
     describedBy?: string | undefined;
     focus?: boolean | undefined;
@@ -47,6 +48,7 @@ export declare const ToolbarButton: React.ForwardRefExoticComponent<ToolbarButto
     disabled?: boolean | undefined;
 } & Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, "disabled" | "as" | keyof {
     __next40pxDefaultSize?: boolean | undefined;
+    __next32pxSmallSize?: boolean | undefined;
     children?: React.ReactNode;
     describedBy?: string | undefined;
     focus?: boolean | undefined;
@@ -69,6 +71,7 @@ export declare const ToolbarButton: React.ForwardRefExoticComponent<ToolbarButto
     __experimentalIsFocusable?: boolean | undefined;
 }> & React.RefAttributes<any>, "defaultValue" | "onChange" | "value" | "name" | "color" | "translate" | "hidden" | "style" | "disabled" | "key" | "form" | "slot" | "title" | "type" | "id" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | keyof {
     __next40pxDefaultSize?: boolean | undefined;
+    __next32pxSmallSize?: boolean | undefined;
     children?: React.ReactNode;
     describedBy?: string | undefined;
     focus?: boolean | undefined;
@@ -91,6 +94,7 @@ export declare const ToolbarButton: React.ForwardRefExoticComponent<ToolbarButto
     __experimentalIsFocusable?: boolean | undefined;
 }> | Pick<{
     __next40pxDefaultSize?: boolean | undefined;
+    __next32pxSmallSize?: boolean | undefined;
     children?: React.ReactNode;
     describedBy?: string | undefined;
     focus?: boolean | undefined;
@@ -117,6 +121,7 @@ export declare const ToolbarButton: React.ForwardRefExoticComponent<ToolbarButto
     target?: string | undefined;
 } & Omit<Pick<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | keyof React.AnchorHTMLAttributes<HTMLAnchorElement>>, "as" | keyof {
     __next40pxDefaultSize?: boolean | undefined;
+    __next32pxSmallSize?: boolean | undefined;
     children?: React.ReactNode;
     describedBy?: string | undefined;
     focus?: boolean | undefined;
@@ -143,6 +148,7 @@ export declare const ToolbarButton: React.ForwardRefExoticComponent<ToolbarButto
     target?: string | undefined;
 }> & React.RefAttributes<any>, "defaultValue" | "onChange" | "color" | "translate" | "hidden" | "style" | "key" | "slot" | "title" | "type" | "download" | "id" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "media" | keyof {
     __next40pxDefaultSize?: boolean | undefined;
+    __next32pxSmallSize?: boolean | undefined;
     children?: React.ReactNode;
     describedBy?: string | undefined;
     focus?: boolean | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/toolbar/toolbar-button/index.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA8E/B;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gEAAyC,CAAC;AACpE,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/toolbar/toolbar-button/index.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA8E/B;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gEAAyC,CAAC;AACpE,eAAe,aAAa,CAAC"}

package/build-types/ui/context/index.d.ts

@@ -1,5 +1,5 @@
 export { ContextSystemProvider, useComponentsContext, } from './context-system-provider';
-export { contextConnect, hasConnectNamespace, getConnectNamespace, } from './context-connect';
+export { contextConnect, contextConnectWithoutRef, hasConnectNamespace, getConnectNamespace, } from './context-connect';
 export { useContextSystem } from './use-context-system';
 export * from './wordpress-component';
 //# sourceMappingURL=index.d.ts.map

package/build-types/ui/context/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/context/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,qBAAqB,EACrB,oBAAoB,GACpB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACN,cAAc,EACd,mBAAmB,EACnB,mBAAmB,GACnB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/context/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,qBAAqB,EACrB,oBAAoB,GACpB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACN,cAAc,EACd,wBAAwB,EACxB,mBAAmB,EACnB,mBAAmB,GACnB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,cAAc,uBAAuB,CAAC"}

package/build-types/utils/config-values.d.ts

@@ -51,6 +51,7 @@ declare const _default: {
     cardPaddingSmall: string;
     cardPaddingMedium: string;
     cardPaddingLarge: string;
+    popoverShadow: string;
     surfaceBackgroundColor: "#fff";
     surfaceBackgroundSubtleColor: string;
     surfaceBackgroundTintColor: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "25.0.0",
+	"version": "25.1.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -40,23 +40,23 @@
 		"@floating-ui/react-dom": "1.0.0",
 		"@radix-ui/react-dropdown-menu": "^2.0.4",
 		"@use-gesture/react": "^10.2.24",
-		"@wordpress/a11y": "^3.34.0",
-		"@wordpress/compose": "^6.11.0",
-		"@wordpress/date": "^4.34.0",
-		"@wordpress/deprecated": "^3.34.0",
-		"@wordpress/dom": "^3.34.0",
-		"@wordpress/element": "^5.11.0",
-		"@wordpress/escape-html": "^2.34.0",
-		"@wordpress/hooks": "^3.34.0",
-		"@wordpress/html-entities": "^3.34.0",
-		"@wordpress/i18n": "^4.34.0",
-		"@wordpress/icons": "^9.25.0",
-		"@wordpress/is-shallow-equal": "^4.34.0",
-		"@wordpress/keycodes": "^3.34.0",
-		"@wordpress/primitives": "^3.32.0",
-		"@wordpress/private-apis": "^0.16.0",
-		"@wordpress/rich-text": "^6.11.0",
-		"@wordpress/warning": "^2.34.0",
+		"@wordpress/a11y": "^3.35.0",
+		"@wordpress/compose": "^6.12.0",
+		"@wordpress/date": "^4.35.0",
+		"@wordpress/deprecated": "^3.35.0",
+		"@wordpress/dom": "^3.35.0",
+		"@wordpress/element": "^5.12.0",
+		"@wordpress/escape-html": "^2.35.0",
+		"@wordpress/hooks": "^3.35.0",
+		"@wordpress/html-entities": "^3.35.0",
+		"@wordpress/i18n": "^4.35.0",
+		"@wordpress/icons": "^9.26.0",
+		"@wordpress/is-shallow-equal": "^4.35.0",
+		"@wordpress/keycodes": "^3.35.0",
+		"@wordpress/primitives": "^3.33.0",
+		"@wordpress/private-apis": "^0.17.0",
+		"@wordpress/rich-text": "^6.12.0",
+		"@wordpress/warning": "^2.35.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -86,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c7c79cb11b677adcbf06cf5f8cfb6c5ec1699f19"
+	"gitHead": "a92f606309b1541b834ff9b0a76ed2a466fc45ed"
 }

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

@@ -29,6 +29,15 @@ import { isMultiplePaletteArray } from '../../color-palette/utils';
 import type { DropdownProps as DropdownComponentProps } from '../../dropdown/types';
 import type { ColorProps, DropdownProps } from '../types';
 
+const getAriaLabelColorValue = ( colorValue: string ) => {
+	const isHex = colorValue.startsWith( '#' );
+
+	// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.
+	const displayValue = colorValue.replace( /^var\((.+)\)$/, '$1' );
+
+	return isHex ? displayValue.split( '' ).join( '-' ) : displayValue;
+};
+
 const getColorObject = (
 	colorValue: CSSProperties[ 'borderColor' ],
 	colors: ColorProps[ 'colors' ] | undefined
@@ -67,34 +76,36 @@ const getToggleAriaLabel = (
 ) => {
 	if ( isStyleEnabled ) {
 		if ( colorObject ) {
+			const ariaLabelValue = getAriaLabelColorValue( colorObject.color );
 			return style
 				? sprintf(
-						// translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:". %3$s: The current border style selection e.g. "solid".
+						// translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code, with added hyphens e.g: "#-f-0-0". %3$s: The current border style selection e.g. "solid".
 						'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s". The currently selected style is "%3$s".',
 						colorObject.name,
-						colorObject.color,
+						ariaLabelValue,
 						style
 				  )
 				: sprintf(
-						// translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:".
+						// translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code, with added hyphens e.g: "#-f-0-0".
 						'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s".',
 						colorObject.name,
-						colorObject.color
+						ariaLabelValue
 				  );
 		}
 
 		if ( colorValue ) {
+			const ariaLabelValue = getAriaLabelColorValue( colorValue );
 			return style
 				? sprintf(
-						// translators: %1$s: The color's hex code e.g.: "#f00:". %2$s: The current border style selection e.g. "solid".
+						// translators: %1$s: The color's hex code, with added hyphens e.g: "#-f-0-0". %2$s: The current border style selection e.g. "solid".
 						'Border color and style picker. The currently selected color has a value of "%1$s". The currently selected style is "%2$s".',
-						colorValue,
+						ariaLabelValue,
 						style
 				  )
 				: sprintf(
-						// translators: %1$s: The color's hex code e.g.: "#f00:".
+						// translators: %1$s: The color's hex code, with added hyphens e.g: "#-f-0-0".
 						'Border color and style picker. The currently selected color has a value of "%1$s".',
-						colorValue
+						ariaLabelValue
 				  );
 		}
 
@@ -103,18 +114,18 @@ const getToggleAriaLabel = (
 
 	if ( colorObject ) {
 		return sprintf(
-			// translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:".
+			// translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code, with added hyphens e.g: "#-f-0-0".
 			'Border color picker. The currently selected color is called "%1$s" and has a value of "%2$s".',
 			colorObject.name,
-			colorObject.color
+			getAriaLabelColorValue( colorObject.color )
 		);
 	}
 
 	if ( colorValue ) {
 		return sprintf(
-			// translators: %1$s: The color's hex code e.g.: "#f00:".
+			// translators: %1$s: The color's hex code, with added hyphens e.g: "#-f-0-0".
 			'Border color picker. The currently selected color has a value of "%1$s".',
-			colorValue
+			getAriaLabelColorValue( colorValue )
 		);
 	}
 

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

@@ -215,7 +215,7 @@ describe( 'BorderControl', () => {
 
 				expect(
 					screen.getByLabelText(
-						'Border color and style picker. The currently selected color is called "Blue" and has a value of "#72aee6".'
+						'Border color and style picker. The currently selected color is called "Blue" and has a value of "#-7-2-a-e-e-6".'
 					)
 				).toBeInTheDocument();
 			} );
@@ -226,7 +226,7 @@ describe( 'BorderControl', () => {
 
 				expect(
 					screen.getByLabelText(
-						'Border color and style picker. The currently selected color has a value of "#4b1d80".'
+						'Border color and style picker. The currently selected color has a value of "#-4-b-1-d-8-0".'
 					)
 				).toBeInTheDocument();
 			} );
@@ -239,7 +239,7 @@ describe( 'BorderControl', () => {
 
 				expect(
 					screen.getByLabelText(
-						'Border color and style picker. The currently selected color is called "Blue" and has a value of "#72aee6". The currently selected style is "dotted".'
+						'Border color and style picker. The currently selected color is called "Blue" and has a value of "#-7-2-a-e-e-6". The currently selected style is "dotted".'
 					)
 				).toBeInTheDocument();
 			} );
@@ -252,7 +252,7 @@ describe( 'BorderControl', () => {
 
 				expect(
 					screen.getByLabelText(
-						'Border color and style picker. The currently selected color has a value of "#4b1d80". The currently selected style is "dashed".'
+						'Border color and style picker. The currently selected color has a value of "#-4-b-1-d-8-0". The currently selected style is "dashed".'
 					)
 				).toBeInTheDocument();
 			} );
@@ -280,7 +280,7 @@ describe( 'BorderControl', () => {
 
 				expect(
 					screen.getByLabelText(
-						'Border color picker. The currently selected color is called "Blue" and has a value of "#72aee6".'
+						'Border color picker. The currently selected color is called "Blue" and has a value of "#-7-2-a-e-e-6".'
 					)
 				).toBeInTheDocument();
 			} );
@@ -294,7 +294,7 @@ describe( 'BorderControl', () => {
 
 				expect(
 					screen.getByLabelText(
-						'Border color picker. The currently selected color has a value of "#4b1d80".'
+						'Border color picker. The currently selected color has a value of "#-4-b-1-d-8-0".'
 					)
 				).toBeInTheDocument();
 			} );

package/src/button/index.tsx

@@ -76,6 +76,7 @@ export function UnforwardedButton(
 ) {
 	const {
 		__next40pxDefaultSize,
+		__next32pxSmallSize,
 		isSmall,
 		isPressed,
 		isBusy,
@@ -117,6 +118,7 @@ export function UnforwardedButton(
 
 	const classes = classnames( 'components-button', className, {
 		'is-next-40px-default-size': __next40pxDefaultSize,
+		'is-next-32px-small-size': __next32pxSmallSize,
 		'is-secondary': variant === 'secondary',
 		'is-primary': variant === 'primary',
 		'is-small': isSmall,

package/src/button/stories/e2e/index.tsx

@@ -0,0 +1,58 @@
+/**
+ * External dependencies
+ */
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { wordpress } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { Button } from '../..';
+import type { ButtonAsButtonProps } from '../../types';
+
+const meta: ComponentMeta< typeof Button > = {
+	component: Button,
+	title: 'Components/Button',
+};
+export default meta;
+
+export const VariantStates: ComponentStory< typeof Button > = (
+	props: ButtonAsButtonProps
+) => {
+	const variants: ( typeof props.variant )[] = [
+		undefined,
+		'primary',
+		'secondary',
+		'tertiary',
+		'link',
+	];
+
+	return (
+		<div style={ { display: 'flex', flexDirection: 'column', gap: 24 } }>
+			{ variants.map( ( variant ) => (
+				<div
+					style={ { display: 'flex', gap: 8 } }
+					key={ variant ?? 'undefined' }
+				>
+					<Button { ...props } variant={ variant } />
+					<Button { ...props } variant={ variant } disabled />
+					<Button { ...props } variant={ variant } isBusy />
+					<Button { ...props } variant={ variant } isDestructive />
+					<Button { ...props } variant={ variant } isPressed />
+				</div>
+			) ) }
+		</div>
+	);
+};
+VariantStates.args = {
+	children: 'Code is poetry',
+};
+
+export const Icon = VariantStates.bind( {} );
+Icon.args = {
+	icon: wordpress,
+};

package/src/button/style.scss

@@ -263,15 +263,24 @@
 	}
 
 	&.is-small {
-		height: $icon-size;
+		height: $button-size-small-next-default-32px;
 		line-height: 22px;
 		padding: 0 8px;
 		font-size: 11px;
 
 		&.has-icon:not(.has-text) {
 			padding: 0;
-			width: $icon-size;
-			min-width: $icon-size;
+			width: $button-size-small-next-default-32px;
+			min-width: $button-size-small-next-default-32px;
+		}
+
+		&:not(.is-next-32px-small-size) {
+			height: $button-size-small;
+
+			&.has-icon:not(.has-text) {
+				width: $button-size-small;
+				min-width: $button-size-small;
+			}
 		}
 	}
 

package/src/button/types.ts

@@ -25,6 +25,15 @@ type BaseButtonProps = {
 	 * @default false
 	 */
 	__next40pxDefaultSize?: boolean;
+	/**
+	 * Start opting into the larger `isSmall` button size that will become the
+	 * default small size in a future version.
+	 *
+	 * Only takes effect when the `isSmall` prop is `true`.
+	 *
+	 * @default false
+	 */
+	__next32pxSmallSize?: boolean;
 	/**
 	 * The button's children.
 	 */

package/src/color-palette/index.tsx

@@ -5,6 +5,7 @@ import type { ForwardedRef } from 'react';
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 import a11yPlugin from 'colord/plugins/a11y';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
@@ -19,7 +20,6 @@ import Dropdown from '../dropdown';
 import { ColorPicker } from '../color-picker';
 import CircularOptionPicker from '../circular-option-picker';
 import { VStack } from '../v-stack';
-import { Flex, FlexItem } from '../flex';
 import { Truncate } from '../truncate';
 import { ColorHeading } from './styles';
 import DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';
@@ -37,7 +37,6 @@ import {
 	extractColorNameFromCurrentValue,
 	isMultiplePaletteArray,
 	normalizeColorValue,
-	showTransparentBackground,
 } from './utils';
 
 extend( [ namesPlugin, a11yPlugin ] );
@@ -219,21 +218,18 @@ function UnforwardedColorPalette(
 			/>
 		</DropdownContentWrapper>
 	);
+	const isHex = value?.startsWith( '#' );
 
-	const colordColor = colord( normalizedColorValue ?? '' );
-
-	const valueWithoutLeadingHash = value?.startsWith( '#' )
-		? value.substring( 1 )
-		: value ?? '';
-
-	const customColorAccessibleLabel = !! valueWithoutLeadingHash
+	// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.
+	const displayValue = value?.replace( /^var\((.+)\)$/, '$1' );
+	const customColorAccessibleLabel = !! displayValue
 		? sprintf(
-				// translators: %1$s: The name of the color e.g: "vivid red". %2$s: The color's hex code e.g: "#f00".
+				// translators: %1$s: The name of the color e.g: "vivid red". %2$s: The color's hex code, with added hyphens e.g: "#-f-0-0".
 				__(
 					'Custom color picker. The currently selected color is called "%1$s" and has a value of "%2$s".'
 				),
 				buttonLabelName,
-				valueWithoutLeadingHash
+				isHex ? displayValue.split( '' ).join( '-' ) : displayValue
 		  )
 		: __( 'Custom color picker.' );
 
@@ -257,43 +253,48 @@ function UnforwardedColorPalette(
 					isRenderedInSidebar={ __experimentalIsRenderedInSidebar }
 					renderContent={ renderCustomColorPicker }
 					renderToggle={ ( { isOpen, onToggle } ) => (
-						<Flex
-							as={ 'button' }
-							ref={ customColorPaletteCallbackRef }
-							justify="space-between"
-							align="flex-start"
-							className="components-color-palette__custom-color"
-							aria-expanded={ isOpen }
-							aria-haspopup="true"
-							onClick={ onToggle }
-							aria-label={ customColorAccessibleLabel }
-							style={
-								showTransparentBackground( value )
-									? { color: '#000' }
-									: {
-											background: value,
-											color:
-												colordColor.contrast() >
-												colordColor.contrast( '#000' )
-													? '#fff'
-													: '#000',
-									  }
-							}
+						<VStack
+							className="components-color-palette__custom-color-wrapper"
+							spacing={ 0 }
 						>
-							<FlexItem
-								isBlock
-								as={ Truncate }
-								className="components-color-palette__custom-color-name"
-							>
-								{ buttonLabelName }
-							</FlexItem>
-							<FlexItem
-								as="span"
-								className="components-color-palette__custom-color-value"
+							<button
+								ref={ customColorPaletteCallbackRef }
+								className="components-color-palette__custom-color-button"
+								aria-expanded={ isOpen }
+								aria-haspopup="true"
+								onClick={ onToggle }
+								aria-label={ customColorAccessibleLabel }
+								style={ {
+									background: value,
+								} }
+							/>
+							<VStack
+								className="components-color-palette__custom-color-text-wrapper"
+								spacing={ 0.5 }
 							>
-								{ valueWithoutLeadingHash }
-							</FlexItem>
-						</Flex>
+								<Truncate className="components-color-palette__custom-color-name">
+									{ value
+										? buttonLabelName
+										: 'No color selected' }
+								</Truncate>
+								{ /*
+								This `Truncate` is always rendered, even if
+								there is no `displayValue`, to ensure the layout
+								does not shift
+								*/ }
+								<Truncate
+									className={ classnames(
+										'components-color-palette__custom-color-value',
+										{
+											'components-color-palette__custom-color-value--is-hex':
+												isHex,
+										}
+									) }
+								>
+									{ displayValue }
+								</Truncate>
+							</VStack>
+						</VStack>
 					) }
 				/>
 			) }

package/src/color-palette/style.scss

@@ -1,41 +1,79 @@
-.components-color-palette__custom-color {
+$border-as-box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
+
+.components-color-palette__custom-color-wrapper {
+	position: relative;
+	z-index: 0;
+}
+.components-color-palette__custom-color-button {
 	position: relative;
 	border: none;
 	background: none;
-	border-radius: $radius-block-ui;
 	height: $grid-unit-80;
-	padding: $grid-unit-15;
-	font-family: inherit;
 	width: 100%;
-	// The background image creates a checkerboard pattern. Ignore rtlcss to
-	// make it work both in LTR and RTL.
-	// See https://github.com/WordPress/gutenberg/pull/42510
-	/*rtl:begin:ignore*/
-	background-image:
-		repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200),
-		repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200);
-	background-position: 0 0, 24px 24px;
-	/*rtl:end:ignore*/
-	background-size: calc(2 * 24px) calc(2 * 24px);
 	box-sizing: border-box;
-	color: $white;
 	cursor: pointer;
-	box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
 	// Show a thin outline in Windows high contrast mode.
 	outline: 1px solid transparent;
+	border-radius: $radius-block-ui $radius-block-ui 0 0;
+	box-shadow: $border-as-box-shadow;
 
 	&:focus {
 		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 		// Show a outline in Windows high contrast mode.
 		outline-width: 2px;
 	}
+
+	&::after {
+		content: "";
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		z-index: -1;
+		// The background image creates a checkerboard pattern. Ignore rtlcss to
+		// make it work both in LTR and RTL.
+		// See https://github.com/WordPress/gutenberg/pull/42510
+		/*rtl:begin:ignore*/
+		background-image:
+			repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200),
+			repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200);
+		background-position: 0 0, 24px 24px;
+		/*rtl:end:ignore*/
+		background-size: calc(2 * 24px) calc(2 * 24px);
+	}
+}
+
+.components-color-palette__custom-color-text-wrapper {
+	padding: $grid-unit-15 $grid-unit-20;
+	border-radius: 0 0 $radius-block-ui $radius-block-ui;
+	position: relative;
+	font-size: $default-font-size;
+
+	// Add a border with the same technique as the button above,
+	// but only for left, bottom, and right sides.
+	box-shadow:
+		inset 0 -1 * $border-width 0 0 rgba(0, 0, 0, 0.2),
+		inset $border-width 0 0 0 rgba(0, 0, 0, 0.2),
+		inset -1 * $border-width 0 0 0 rgba(0, 0, 0, 0.2);
 }
 
 .components-color-palette__custom-color-name {
-	text-align: left;
+	color: $components-color-foreground;
+	margin: 0 $border-width;
 }
 
 .components-color-palette__custom-color-value {
-	margin-left: $grid-unit-20;
-	text-transform: uppercase;
+	color: $gray-700;
+
+	&--is-hex {
+		text-transform: uppercase;
+	}
+
+	// Add a zero-width space when this element is empty to preserve
+	// a minimum height of 1 line of text, and avoid layout jumps.
+	&:empty::after {
+		content: "\200B";
+		visibility: hidden;
+	}
 }