@wordpress/components 33.1.1-next.v.202605131032.0 → 35.0.0

package/build-types/tab-panel/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/tab-panel/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,uBAAuB,CAAC;AAQ3D;;GAEG;AACH,OAAO,QAAQ,MAAM,IAAI,CAAC;AAE1B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,QAAQ,CAgBhC,CAAC;eACa,IAAI;AAMnB,eAAO,MAAM,OAAO,0UAAsB,CAAC;AAe3C,eAAO,MAAM,WAAW,0UAAsB,CAAC;AAwB/C,eAAO,MAAM,uBAAuB,0UAA8B,CAAC;AAsBnE,eAAO,MAAM,gBAAgB,0UAAsB,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/tab-panel/stories/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,uBAAuB,CAAC;AAG3D,OAAO,QAAQ,MAAM,IAAI,CAAC;AAE1B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,QAAQ,CAgBhC,CAAC;eACa,IAAI;AAMnB,eAAO,MAAM,OAAO,0UAAsB,CAAC;AAe3C,eAAO,MAAM,WAAW,0UAAsB,CAAC;AAwB/C,eAAO,MAAM,uBAAuB,0UAA8B,CAAC;AAsBnE,eAAO,MAAM,gBAAgB,0UAAsB,CAAC"}

package/build-types/tabs/stories/index.story.d.ts

@@ -1,10 +1,4 @@
-/**
- * External dependencies
- */
 import type { Meta, StoryFn } from '@storybook/react-vite';
-/**
- * Internal dependencies
- */
 import { Tabs } from '..';
 declare const meta: Meta<typeof Tabs>;
 export default meta;

package/build-types/tabs/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/tabs/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAS3D;;GAEG;AACH,OAAO,EAAE,IAAI,EAAE,MAAM,IAAI,CAAC;AAM1B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,IAAI,CAyB5B,CAAC;eACa,IAAI;AAiCnB,eAAO,MAAM,OAAO,2HAAsB,CAAC;AAE3C,eAAO,MAAM,yBAAyB,EAAE,OAAO,CAAE,OAAO,IAAI,CAsG3D,CAAC;AAiBF,eAAO,MAAM,QAAQ,2HAA8B,CAAC;AAwBpD,eAAO,MAAM,WAAW,2HAAiC,CAAC;AA0C1D,eAAO,MAAM,uBAAuB,2HAEnC,CAAC;AAEF,eAAO,MAAM,gBAAgB,2HAAsB,CAAC;AA0CpD,eAAO,MAAM,aAAa,2HAAmC,CAAC;AA+D9D,eAAO,MAAM,oBAAoB,2HAAiC,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/tabs/stories/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAI3D,OAAO,EAAE,IAAI,EAAE,MAAM,IAAI,CAAC;AAM1B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,IAAI,CAyB5B,CAAC;eACa,IAAI;AAiCnB,eAAO,MAAM,OAAO,2HAAsB,CAAC;AAE3C,eAAO,MAAM,yBAAyB,EAAE,OAAO,CAAE,OAAO,IAAI,CAsG3D,CAAC;AAiBF,eAAO,MAAM,QAAQ,2HAA8B,CAAC;AAwBpD,eAAO,MAAM,WAAW,2HAAiC,CAAC;AA0C1D,eAAO,MAAM,uBAAuB,2HAEnC,CAAC;AAEF,eAAO,MAAM,gBAAgB,2HAAsB,CAAC;AA0CpD,eAAO,MAAM,aAAa,2HAAmC,CAAC;AA+D9D,eAAO,MAAM,oBAAoB,2HAAiC,CAAC"}

package/build-types/tabs/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/tabs/styles.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,OAAO,MAAM,gBAAgB,CAAC;AAS1C,eAAO,MAAM,aAAa;;;;;;UAuIzB,CAAC;AAEF,eAAO,MAAM,GAAG;;;;;;UAkFf,CAAC;AAEF,eAAO,MAAM,WAAW;;;2GAYvB,CAAC;AAEF,eAAO,MAAM,UAAU;;UAuBtB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;UAapB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/tabs/styles.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,OAAO,MAAM,gBAAgB,CAAC;AAS1C,eAAO,MAAM,aAAa;;;;;;UAmIzB,CAAC;AAEF,eAAO,MAAM,GAAG;;;;;;UAiFf,CAAC;AAEF,eAAO,MAAM,WAAW;;;2GAYvB,CAAC;AAEF,eAAO,MAAM,UAAU;;UAuBtB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;UAapB,CAAC"}

package/build-types/validated-form-controls/components/range-control.d.ts

@@ -12,7 +12,6 @@ export declare const ValidatedRangeControl: import("react").ForwardRefExoticComp
     beforeIcon?: import("../..").IconType;
     color?: import("react").CSSProperties['color'];
     currentInput?: number;
-    icon?: string;
     initialPosition?: number;
     isShiftStepEnabled?: boolean;
     label?: string;
@@ -32,5 +31,5 @@ export declare const ValidatedRangeControl: import("react").ForwardRefExoticComp
     type?: 'stepper';
     withInputField?: boolean;
     __shouldNotWarnDeprecated36pxSize?: boolean;
-} & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "__next40pxDefaultSize" | "__nextHasNoMarginBottom" | "__shouldNotWarnDeprecated36pxSize" | "afterIcon" | "allowReset" | "as" | "beforeIcon" | "children" | "color" | "currentInput" | "disabled" | "help" | "hideLabelFromVision" | "icon" | "initialPosition" | "isShiftStepEnabled" | "label" | "marks" | "onBlur" | "onChange" | "onFocus" | "onMouseLeave" | "onMouseMove" | "railColor" | "renderTooltipContent" | "resetFallbackValue" | "separatorType" | "shiftStep" | "showTooltip" | "step" | "trackColor" | "type" | "withInputField" | keyof import("../../range-control/types").NumericProps> & import("react").RefAttributes<HTMLInputElement>, "__next40pxDefaultSize"> & ValidatedControlProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "__next40pxDefaultSize" | "__nextHasNoMarginBottom" | "__shouldNotWarnDeprecated36pxSize" | "afterIcon" | "allowReset" | "as" | "beforeIcon" | "children" | "color" | "currentInput" | "disabled" | "help" | "hideLabelFromVision" | "initialPosition" | "isShiftStepEnabled" | "label" | "marks" | "onBlur" | "onChange" | "onFocus" | "onMouseLeave" | "onMouseMove" | "railColor" | "renderTooltipContent" | "resetFallbackValue" | "separatorType" | "shiftStep" | "showTooltip" | "step" | "trackColor" | "type" | "withInputField" | keyof import("../../range-control/types").NumericProps> & import("react").RefAttributes<HTMLInputElement>, "__next40pxDefaultSize"> & ValidatedControlProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=range-control.d.ts.map

package/build-types/validated-form-controls/components/range-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"range-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/range-control.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAmCrD,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;42BAEjC,CAAC"}
+{"version":3,"file":"range-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/range-control.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAmCrD,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;m2BAEjC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "33.1.1-next.v.202605131032.0+f6d6e7149",
+	"version": "35.0.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -55,6 +55,7 @@
 		"@date-fns/utc": "^2.1.1",
 		"@emotion/cache": "^11.14.0",
 		"@emotion/css": "^11.13.5",
+		"@emotion/native": "^11.11.0",
 		"@emotion/react": "^11.14.0",
 		"@emotion/serialize": "^1.3.3",
 		"@emotion/styled": "^11.14.1",
@@ -64,25 +65,26 @@
 		"@types/highlight-words-core": "1.2.1",
 		"@types/react": "^18.3.27",
 		"@use-gesture/react": "^10.3.1",
-		"@wordpress/a11y": "^4.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/base-styles": "^8.0.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/compose": "^7.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/date": "^5.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/deprecated": "^4.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/dom": "^4.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/element": "^6.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/escape-html": "^3.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/hooks": "^4.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/html-entities": "^4.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/i18n": "^6.18.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/icons": "^13.0.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/is-shallow-equal": "^5.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/keycodes": "^4.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/primitives": "^4.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/private-apis": "^1.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/rich-text": "^7.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/style-runtime": "^0.1.2-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/warning": "^3.45.1-next.v.202605131032.0+f6d6e7149",
+		"@wordpress/a11y": "^4.48.0",
+		"@wordpress/base-styles": "^9.1.0",
+		"@wordpress/compose": "^8.1.0",
+		"@wordpress/date": "^5.48.0",
+		"@wordpress/deprecated": "^4.48.0",
+		"@wordpress/dom": "^4.48.0",
+		"@wordpress/element": "^8.0.0",
+		"@wordpress/escape-html": "^3.48.0",
+		"@wordpress/hooks": "^4.48.0",
+		"@wordpress/html-entities": "^4.48.0",
+		"@wordpress/i18n": "^6.21.0",
+		"@wordpress/icons": "^13.3.0",
+		"@wordpress/is-shallow-equal": "^5.48.0",
+		"@wordpress/keycodes": "^4.48.0",
+		"@wordpress/primitives": "^4.48.0",
+		"@wordpress/private-apis": "^1.48.0",
+		"@wordpress/rich-text": "^7.48.0",
+		"@wordpress/style-runtime": "^0.4.0",
+		"@wordpress/ui": "^0.15.0",
+		"@wordpress/warning": "^3.48.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -108,7 +110,7 @@
 		"@storybook/react-vite": "^10.2.8",
 		"@testing-library/jest-dom": "^6.9.1",
 		"@types/jest": "^29.5.14",
-		"@wordpress/jest-console": "^8.45.1-next.v.202605131032.0+f6d6e7149",
+		"@wordpress/jest-console": "^8.48.0",
 		"snapshot-diff": "^0.10.0",
 		"storybook": "^10.2.8",
 		"timezone-mock": "^1.3.6"
@@ -120,5 +122,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "0e198c7ac7ca634e73ded9220ce048c0302174dd"
+	"gitHead": "e7856693aeb4e2522d13608cd32c994e4a97cb9c"
 }

package/src/autocomplete/index.tsx

@@ -8,7 +8,12 @@ import {
 	useReducer,
 	useRef,
 } from '@wordpress/element';
-import { useInstanceId, useMergeRefs, useRefEffect } from '@wordpress/compose';
+import {
+	useInstanceId,
+	useMergeRefs,
+	useRefEffect,
+	privateApis as composePrivateApis,
+} from '@wordpress/compose';
 import {
 	create,
 	slice,
@@ -36,6 +41,9 @@ import type {
 	UseAutocompleteProps,
 } from './types';
 import getNodeText from '../utils/get-node-text';
+import { unlock } from '../lock-unlock';
+
+const { subscribeDelegatedListener } = unlock( composePrivateApis );
 
 const EMPTY_FILTERED_OPTIONS: KeyedOption[] = [];
 
@@ -390,13 +398,23 @@ export function useAutocompleteProps( options: UseAutocompleteProps ) {
 	const mergedRefs = useMergeRefs( [
 		ref,
 		useRefEffect( ( element: HTMLElement ) => {
-			function _onKeyDown( event: KeyboardEvent ) {
-				onKeyDownRef.current?.( event );
+			function _onKeyDown( event: Event ) {
+				onKeyDownRef.current?.( event as KeyboardEvent );
 			}
-			element.addEventListener( 'keydown', _onKeyDown );
-			return () => {
-				element.removeEventListener( 'keydown', _onKeyDown );
-			};
+			// Capture phase. When the autocomplete popover is open,
+			// Up/Down/Enter/Escape must navigate the completion list —
+			// they shouldn't be consumed by ancestor handlers (e.g.
+			// block-editor's writing-flow) for block navigation, block
+			// splitting, or "move out of parent" actions. Those handlers
+			// fire at bubble phase and gate on `event.defaultPrevented`,
+			// so firing in capture lets us preventDefault first when the
+			// popover is active.
+			return subscribeDelegatedListener(
+				element,
+				'keydown',
+				_onKeyDown,
+				true
+			);
 		}, [] ),
 	] );
 

package/src/badge/stories/e2e/index.story.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import Badge from '../..';
+
+const meta: Meta< typeof Badge > = {
+	component: Badge,
+	title: 'Components/Badge',
+};
+export default meta;
+
+type Story = StoryObj< typeof Badge >;
+
+export const TextOverflow: Story = {
+	args: {
+		children:
+			'This is an extremely long label thatshoulddemonstratetextoverflow behavior',
+	},
+	parameters: {
+		textOverflowContainers: true,
+	},
+};

package/src/box-control/index.tsx

@@ -221,5 +221,4 @@ function BoxControl( {
 	);
 }
 
-export { applyValueToSides } from './utils';
 export default BoxControl;

package/src/box-control/utils.ts

@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -188,48 +187,6 @@ export function normalizeSides( sides: BoxControlProps[ 'sides' ] ) {
 	return filteredSides;
 }
 
-/**
- * Applies a value to an object representing top, right, bottom and left sides
- * while taking into account any custom side configuration.
- *
- * @deprecated
- *
- * @param currentValues The current values for each side.
- * @param newValue      The value to apply to the sides object.
- * @param sides         Array defining valid sides.
- *
- * @return Object containing the updated values for each side.
- */
-export function applyValueToSides(
-	currentValues: BoxControlValue,
-	newValue?: string,
-	sides?: BoxControlProps[ 'sides' ]
-): BoxControlValue {
-	deprecated( 'applyValueToSides', {
-		since: '6.8',
-		version: '7.0',
-	} );
-	const newValues = { ...currentValues };
-
-	if ( sides?.length ) {
-		sides.forEach( ( side ) => {
-			if ( side === 'vertical' ) {
-				newValues.top = newValue;
-				newValues.bottom = newValue;
-			} else if ( side === 'horizontal' ) {
-				newValues.left = newValue;
-				newValues.right = newValue;
-			} else {
-				newValues[ side ] = newValue;
-			}
-		} );
-	} else {
-		ALL_SIDES.forEach( ( side ) => ( newValues[ side ] = newValue ) );
-	}
-
-	return newValues;
-}
-
 /**
  * Return the allowed sides based on the sides configuration.
  *

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

@@ -147,6 +147,17 @@ Icon.args = {
 	icon: wordpress,
 };
 
+export const TextOverflow: StoryFn< typeof Button > = ( props ) => {
+	return <Button __next40pxDefaultSize { ...props } />;
+};
+TextOverflow.args = {
+	children:
+		'This is an extremely long label thatshoulddemonstratetextoverflow behavior',
+};
+TextOverflow.parameters = {
+	textOverflowContainers: true,
+};
+
 export const Dashicons: StoryFn< typeof Button > = ( props ) => {
 	return (
 		<div style={ { display: 'flex', gap: 8 } }>

package/src/custom-gradient-picker/gradient-bar/index.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import clsx from 'clsx';
+import type { MouseEventHandler } from 'react';
 
 /**
  * WordPress dependencies
@@ -20,7 +21,6 @@ import type {
 	CustomGradientBarReducerAction,
 	CustomGradientBarIdleState,
 } from '../types';
-import type { MouseEventHandler } from 'react';
 
 const customGradientBarReducer = (
 	state: CustomGradientBarReducerState,

package/src/draggable/index.tsx

@@ -8,16 +8,28 @@ import type { DragEvent } from 'react';
  */
 import { throttle } from '@wordpress/compose';
 import { useEffect, useRef } from '@wordpress/element';
+import { getWpCompatOverlaySlot } from '@wordpress/ui';
 
 /**
  * Internal dependencies
  */
 import type { DraggableProps } from './types';
-
-const dragImageClass = 'components-draggable__invisible-drag-image';
-const cloneWrapperClass = 'components-draggable__clone';
-const clonePadding = 0;
+import styles from './style.module.scss';
+
+// Legacy class names preserved alongside the CSS-module hashed ones for
+// backwards compatibility. `filter(Boolean)` strips `undefined` from Jest's
+// CSS-module mock.
+const dragImageClasses = [
+	styles[ 'invisible-drag-image' ],
+	'components-draggable__invisible-drag-image',
+].filter( Boolean );
+const cloneWrapperClasses = [
+	styles.clone,
+	'components-draggable__clone',
+].filter( Boolean );
+// Global class — shared with external code (e.g. block-editor keyboard drag).
 const bodyClass = 'is-dragging-components-draggable';
+const clonePadding = 0;
 
 /**
  * `Draggable` is a Component that provides a way to set up a cross-browser
@@ -99,6 +111,10 @@ export function Draggable( {
 	 */
 	function start( event: DragEvent ) {
 		const { ownerDocument } = event.target as HTMLElement;
+		// Only use the slot when it lives in the same document as the
+		// dragged element, so coordinate resolution stays in one space.
+		const slot = getWpCompatOverlaySlot();
+		const compatSlot = slot?.ownerDocument === ownerDocument ? slot : null;
 
 		event.dataTransfer.setData(
 			transferDataType,
@@ -116,12 +132,18 @@ export function Draggable( {
 		// right after. event.dataTransfer.setDragImage is not supported yet in
 		// IE, we need to check for its existence first.
 		if ( 'function' === typeof event.dataTransfer.setDragImage ) {
-			dragImage.classList.add( dragImageClass );
+			dragImage.classList.add( ...dragImageClasses );
+			// Invisible — stays at the document body, no slot needed.
 			ownerDocument.body.appendChild( dragImage );
 			event.dataTransfer.setDragImage( dragImage, 0, 0 );
 		}
 
-		cloneWrapper.classList.add( cloneWrapperClass );
+		cloneWrapper.classList.add( ...cloneWrapperClasses );
+
+		const inSlotClass = styles[ 'is-in-compat-slot' ];
+		if ( compatSlot && inSlotClass ) {
+			cloneWrapper.classList.add( inSlotClass );
+		}
 
 		if ( cloneClassname ) {
 			cloneWrapper.classList.add( cloneClassname );
@@ -141,8 +163,7 @@ export function Draggable( {
 			clonedDragComponent.innerHTML = dragComponentRef.current.innerHTML;
 			cloneWrapper.appendChild( clonedDragComponent );
 
-			// Inject the cloneWrapper into the DOM.
-			ownerDocument.body.appendChild( cloneWrapper );
+			( compatSlot ?? ownerDocument.body ).appendChild( cloneWrapper );
 		} else {
 			const element = ownerDocument.getElementById(
 				elementId
@@ -173,8 +194,9 @@ export function Draggable( {
 
 			cloneWrapper.appendChild( clone );
 
-			// Inject the cloneWrapper into the DOM.
-			if ( appendToOwnerDocument ) {
+			if ( compatSlot ) {
+				compatSlot.appendChild( cloneWrapper );
+			} else if ( appendToOwnerDocument ) {
 				ownerDocument.body.appendChild( cloneWrapper );
 			} else {
 				elementWrapper?.appendChild( cloneWrapper );

package/src/draggable/stories/index.story.tsx

@@ -32,7 +32,13 @@ const meta: Meta< typeof Draggable > = {
 	},
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { code: '' } },
+		docs: {
+			source: { code: '' },
+			// Render in its own iframe — Storybook's docs-page wrappers
+			// create transform-based containing blocks that break the
+			// clone's `position: fixed` resolution.
+			story: { inline: false, height: '250px' },
+		},
 		componentStatus: {
 			status: 'use-with-caution',
 			whereUsed: 'global',
@@ -115,11 +121,10 @@ export const Default: StoryFn< typeof Draggable > = DefaultTemplate.bind( {} );
 Default.args = {};
 
 /**
- * `appendToOwnerDocument` is used to append the element being dragged to the body of the owner document.
- *
- * This is useful when the element being dragged should not receive styles from its parent.
- * For example, when the element's parent sets a `z-index` value that would cause the dragged
- * element to be rendered behind other elements.
+ * `appendToOwnerDocument` appends the dragged element's clone to the owner
+ * document's body instead of the element's parent, which is useful when an
+ * ancestor's stacking context (e.g. its `z-index`) would otherwise place the
+ * clone behind other content.
  */
 export const AppendElementToOwnerDocument: StoryFn< typeof Draggable > =
 	DefaultTemplate.bind( {} );

package/src/draggable/style.module.scss

@@ -0,0 +1,29 @@
+@use "@wordpress/base-styles/z-index" as *;
+
+.invisible-drag-image {
+	position: fixed;
+	/* stylelint-disable-next-line plugin/use-logical-properties-and-values -- Offscreen drag-image stand-in; flipping with writing direction has no benefit. */
+	left: -1000px;
+	height: 50px;
+	width: 50px;
+}
+
+.clone {
+	position: fixed;
+	padding: 0; // Matches the `clonePadding` JS constant.
+	background: transparent;
+	pointer-events: none;
+}
+
+// Fallback for clones placed outside the compat overlay slot — the
+// slot's stacking context handles ordering inside it.
+.clone:not(.is-in-compat-slot) {
+	z-index: z-index(".components-draggable__clone");
+}
+
+// Global selector — external code (e.g. block-editor keyboard drag)
+// toggles the same body class.
+:global(body.is-dragging-components-draggable) {
+	cursor: move; /* Fallback for IE/Edge < 14 */
+	cursor: grabbing !important;
+}

package/src/draggable/types.ts

@@ -21,6 +21,10 @@ export type DraggableProps = {
 	 * Whether to append the cloned element to the `ownerDocument` body.
 	 * By default, elements sourced by id are appended to the element's wrapper.
 	 *
+	 * Has no effect when the `@wordpress/ui` compat overlay slot is in use in
+	 * the same document — the clone goes into the slot instead. Cross-document
+	 * drags fall back to this prop's regular semantics.
+	 *
 	 * @default false
 	 */
 	appendToOwnerDocument?: boolean;

package/src/form-token-field/index.tsx

@@ -253,7 +253,9 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 				break;
 			case 'Space':
 				if ( tokenizeOnSpace ) {
-					preventDefault = addCurrentToken();
+					preventDefault = addCurrentToken( {
+						preventDefaultOnFailedValidation: false,
+					} );
 				}
 				break;
 			case 'Escape':
@@ -320,7 +322,65 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		const tokenValue = items[ items.length - 1 ] || '';
 
 		if ( items.length > 1 ) {
-			addNewTokens( items.slice( 0, -1 ) );
+			const tokensToProcess = items.slice( 0, -1 );
+
+			// Pre-check: would any segment be rejected by
+			// `__experimentalValidateInput`? Empties and duplicates of the
+			// current selection are intentional skips, not failures.
+			const willFailValidation = ( segment: string ) => {
+				const transformed = saveTransform( segment );
+				return (
+					!! transformed &&
+					! valueContainsToken( transformed ) &&
+					! __experimentalValidateInput( transformed )
+				);
+			};
+			const hasFailures = tokensToProcess.some( willFailValidation );
+
+			// When there are failures, also commit the trailing in-progress
+			// segment so the user is left with only the items that need
+			// fixing, instead of mixing the trailing segment with the failed
+			// ones (which would block tokenization on Enter or comma).
+			const addedTokens = addNewTokens(
+				hasFailures ? items : tokensToProcess
+			);
+
+			if ( hasFailures ) {
+				// Derive rejected segments from `addedTokens` so this stays
+				// in sync with `addNewTokens`'s filter chain.
+				const rejected = items.filter( ( token ) => {
+					const transformed = saveTransform( token );
+					if ( ! transformed ) {
+						return false;
+					}
+					if ( addedTokens.has( transformed ) ) {
+						return false;
+					}
+					if ( valueContainsToken( transformed ) ) {
+						return false;
+					}
+					return ! __experimentalValidateInput( transformed );
+				} );
+
+				// Reuse the separator the user actually used (the last one
+				// in `text`) so we don't rewrite their input: comma-separated
+				// paste under `tokenizeOnSpace` stays comma-separated, and
+				// typed space under `tokenizeOnSpace` stays a space. Falls
+				// back to the mode-appropriate separator only when no
+				// separator characters are present in `text`.
+				const usedSeparators = text.match( /[ ,\t]/g );
+				const separatorChar =
+					usedSeparators?.[ usedSeparators.length - 1 ] ??
+					( tokenizeOnSpace ? ' ' : ',' );
+				// Preserve a trailing separator when the input ended with
+				// one, so the user can keep typing past a failed-validation
+				// space without their separator disappearing.
+				const trailing = tokenValue === '' ? separatorChar : '';
+				const remaining = rejected.join( separatorChar ) + trailing;
+				setIncompleteTokenValue( remaining );
+				onInputChange( remaining );
+				return;
+			}
 		}
 		setIncompleteTokenValue( tokenValue );
 		onInputChange( tokenValue );
@@ -417,7 +477,9 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 			addNewToken( incompleteTokenValue );
 		}
 
-		return true; // PreventDefault.
+		// Comma is always a separator (typed in onKeyPress, never as input).
+		// Pasted commas go through onInputChangeHandler, which validates.
+		return true;
 	}
 
 	function moveInputToIndex( index: number ) {
@@ -454,7 +516,9 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		}
 	}
 
-	function addCurrentToken() {
+	function addCurrentToken( {
+		preventDefaultOnFailedValidation = true,
+	} = {} ) {
 		let preventDefault = false;
 		const selectedSuggestion = getSelectedSuggestion();
 
@@ -462,20 +526,22 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 			addNewToken( selectedSuggestion );
 			preventDefault = true;
 		} else if ( inputHasValidValue() ) {
-			addNewToken( incompleteTokenValue );
-			preventDefault = true;
+			const passedValidation = addNewToken( incompleteTokenValue );
+			preventDefault =
+				passedValidation || preventDefaultOnFailedValidation;
 		}
 
 		return preventDefault;
 	}
 
-	function addNewTokens( tokens: string[] ) {
+	function addNewTokens( tokens: string[] ): Set< string > {
 		const tokensToAdd = [
 			...new Set(
 				tokens
 					.map( saveTransform )
 					.filter( Boolean )
 					.filter( ( token ) => ! valueContainsToken( token ) )
+					.filter( ( token ) => __experimentalValidateInput( token ) )
 			),
 		];
 
@@ -484,12 +550,20 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 			newValue.splice( getIndexOfInput(), 0, ...tokensToAdd );
 			onChange( newValue );
 		}
+
+		return new Set( tokensToAdd );
 	}
 
+	/**
+	 * Validates and adds `token`. Returns `true` if validation passed,
+	 * `false` if it was rejected by `__experimentalValidateInput`. A `true`
+	 * return does not guarantee the token was added: `addNewTokens` may
+	 * still drop it as a duplicate or after `saveTransform` returns empty.
+	 */
 	function addNewToken( token: string ) {
 		if ( ! __experimentalValidateInput( token ) ) {
 			speak( messages.__experimentalInvalid, 'assertive' );
-			return;
+			return false;
 		}
 		addNewTokens( [ token ] );
 		speak( messages.added, 'assertive' );
@@ -502,6 +576,8 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		if ( isActive && ! tokenizeOnBlur ) {
 			focus();
 		}
+
+		return true;
 	}
 
 	function deleteToken( token: string | TokenItem ) {