@wordpress/components 32.0.1-next.ba3aee3a2.0 → 32.0.1-next.v.0

package/build-types/toggle-control/stories/index.story.d.ts

@@ -8,12 +8,12 @@ import type { Meta } from '@storybook/react-webpack5';
 import ToggleControl from '..';
 declare const meta: Meta<typeof ToggleControl>;
 export default meta;
-export declare const Default: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react-webpack5").ReactRenderer, Pick<import("../../form-toggle/types").FormToggleProps, "disabled" | "checked"> & Pick<import("../../base-control/types").BaseControlProps, "className" | "__nextHasNoMarginBottom"> & {
+export declare const Default: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Pick<import("../../form-toggle/types").FormToggleProps, "disabled" | "checked"> & Pick<import("../../base-control/types").BaseControlProps, "className" | "__nextHasNoMarginBottom"> & {
     help?: import("react").ReactNode | ((checked: boolean) => import("react").ReactNode);
     label: import("react").ReactNode;
     onChange: (value: boolean) => void;
 } & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "onChange" | "label" | "help" | "disabled" | "children" | "as" | "className" | "checked" | "__nextHasNoMarginBottom"> & import("react").RefAttributes<HTMLInputElement>>;
-export declare const WithHelpText: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react-webpack5").ReactRenderer, Pick<import("../../form-toggle/types").FormToggleProps, "disabled" | "checked"> & Pick<import("../../base-control/types").BaseControlProps, "className" | "__nextHasNoMarginBottom"> & {
+export declare const WithHelpText: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Pick<import("../../form-toggle/types").FormToggleProps, "disabled" | "checked"> & Pick<import("../../base-control/types").BaseControlProps, "className" | "__nextHasNoMarginBottom"> & {
     help?: import("react").ReactNode | ((checked: boolean) => import("react").ReactNode);
     label: import("react").ReactNode;
     onChange: (value: boolean) => void;

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

@@ -8,11 +8,11 @@ import type { Meta } from '@storybook/react-webpack5';
 import { Toolbar } from '..';
 declare const meta: Meta<typeof Toolbar>;
 export default meta;
-export declare const Default: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react-webpack5").ReactRenderer, import("../toolbar/types").ToolbarProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "as" | keyof import("../toolbar/types").ToolbarProps> & import("react").RefAttributes<any>>;
-export declare const WithoutGroup: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react-webpack5").ReactRenderer, import("../toolbar/types").ToolbarProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "as" | keyof import("../toolbar/types").ToolbarProps> & import("react").RefAttributes<any>>;
+export declare const Default: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("../toolbar/types").ToolbarProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "as" | keyof import("../toolbar/types").ToolbarProps> & import("react").RefAttributes<any>>;
+export declare const WithoutGroup: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("../toolbar/types").ToolbarProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "as" | keyof import("../toolbar/types").ToolbarProps> & import("react").RefAttributes<any>>;
 /**
  * Set the variant to `unstyled` to remove default border styles.
  * Otherwise, leave it as `undefined` for default styles.
  */
-export declare const Unstyled: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react-webpack5").ReactRenderer, import("../toolbar/types").ToolbarProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "as" | keyof import("../toolbar/types").ToolbarProps> & import("react").RefAttributes<any>>;
+export declare const Unstyled: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("../toolbar/types").ToolbarProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "as" | keyof import("../toolbar/types").ToolbarProps> & import("react").RefAttributes<any>>;
 //# sourceMappingURL=index.story.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/toolbar/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,2BAA2B,CAAC;AAwB/D;;GAEG;AACH,OAAO,EACN,OAAO,EAKP,MAAM,IAAI,CAAC;AAGZ,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,OAAO,CAoB/B,CAAC;AAEF,eAAe,IAAI,CAAC;AAgBpB,eAAO,MAAM,OAAO,iWAAsB,CAAC;AA8F3C,eAAO,MAAM,YAAY,iWAAsB,CAAC;AAahD;;;GAGG;AAEH,eAAO,MAAM,QAAQ,iWAAsB,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/toolbar/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,2BAA2B,CAAC;AAwB/D;;GAEG;AACH,OAAO,EACN,OAAO,EAKP,MAAM,IAAI,CAAC;AAGZ,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,OAAO,CAoB/B,CAAC;AAEF,eAAe,IAAI,CAAC;AAgBpB,eAAO,MAAM,OAAO,wVAAsB,CAAC;AA8F3C,eAAO,MAAM,YAAY,wVAAsB,CAAC;AAahD;;;GAGG;AAEH,eAAO,MAAM,QAAQ,wVAAsB,CAAC"}

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

@@ -9,7 +9,7 @@ import Tooltip from '..';
 declare const meta: Meta<typeof Tooltip>;
 export default meta;
 export declare const Default: StoryFn<typeof Tooltip>;
-export declare const KeyboardShortcut: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react-webpack5").ReactRenderer, import("../types").TooltipProps & import("react").RefAttributes<any>>;
+export declare const KeyboardShortcut: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("../types").TooltipProps & import("react").RefAttributes<any>>;
 /**
  * In case one or more `Tooltip` components are rendered inside another
  * `Tooltip` component, only the tooltip associated to the outermost `Tooltip`

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

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/tooltip/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAO/D;;GAEG;AACH,OAAO,OAAO,MAAM,IAAI,CAAC;AAGzB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,OAAO,CAuB/B,CAAC;AACF,eAAe,IAAI,CAAC;AAMpB,eAAO,MAAM,OAAO,EAAE,OAAO,CAAE,OAAO,OAAO,CAAwB,CAAC;AAMtE,eAAO,MAAM,gBAAgB,4KAAsB,CAAC;AASpD;;;;;;GAMG;AACH,eAAO,MAAM,MAAM,EAAE,OAAO,CAAE,OAAO,OAAO,CAAwB,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/tooltip/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAO/D;;GAEG;AACH,OAAO,OAAO,MAAM,IAAI,CAAC;AAGzB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,OAAO,CAuB/B,CAAC;AACF,eAAe,IAAI,CAAC;AAMpB,eAAO,MAAM,OAAO,EAAE,OAAO,CAAE,OAAO,OAAO,CAAwB,CAAC;AAMtE,eAAO,MAAM,gBAAgB,mKAAsB,CAAC;AASpD;;;;;;GAMG;AACH,eAAO,MAAM,MAAM,EAAE,OAAO,CAAE,OAAO,OAAO,CAAwB,CAAC"}

package/build-types/tree-grid/stories/index.story.d.ts

@@ -8,5 +8,5 @@ import type { Meta } from '@storybook/react-webpack5';
 import TreeGrid from '..';
 declare const meta: Meta<typeof TreeGrid>;
 export default meta;
-export declare const Default: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react-webpack5").ReactRenderer, import("../types").TreeGridProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref">, "as" | keyof import("../types").TreeGridProps> & import("react").RefAttributes<HTMLTableElement>>;
+export declare const Default: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("../types").TreeGridProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref">, "as" | keyof import("../types").TreeGridProps> & import("react").RefAttributes<HTMLTableElement>>;
 //# sourceMappingURL=index.story.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/tree-grid/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,2BAA2B,CAAC;AAQ/D;;GAEG;AACH,OAAO,QAAuC,MAAM,IAAI,CAAC;AAIzD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,QAAQ,CAiBhC,CAAC;AACF,eAAe,IAAI,CAAC;AAiHpB,eAAO,MAAM,OAAO,yWAAsB,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/tree-grid/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,2BAA2B,CAAC;AAQ/D;;GAEG;AACH,OAAO,QAAuC,MAAM,IAAI,CAAC;AAIzD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,QAAQ,CAiBhC,CAAC;AACF,eAAe,IAAI,CAAC;AAiHpB,eAAO,MAAM,OAAO,gWAAsB,CAAC"}

package/build-types/tree-select/stories/index.story.d.ts

@@ -8,5 +8,5 @@ import type { Meta } from '@storybook/react-webpack5';
 import TreeSelect from '../';
 declare const meta: Meta<typeof TreeSelect>;
 export default meta;
-export declare const Default: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react-webpack5").ReactRenderer, import("../types").TreeSelectProps>;
+export declare const Default: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("../types").TreeSelectProps>;
 //# sourceMappingURL=index.story.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/tree-select/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,2BAA2B,CAAC;AAO/D;;GAEG;AACH,OAAO,UAAU,MAAM,KAAK,CAAC;AAE7B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,UAAU,CAiBlC,CAAC;AAEF,eAAe,IAAI,CAAC;AAepB,eAAO,MAAM,OAAO,0IAAiC,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/tree-select/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,2BAA2B,CAAC;AAO/D;;GAEG;AACH,OAAO,UAAU,MAAM,KAAK,CAAC;AAE7B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,UAAU,CAiBlC,CAAC;AAEF,eAAe,IAAI,CAAC;AAepB,eAAO,MAAM,OAAO,iIAAiC,CAAC"}

package/build-types/v-stack/stories/index.story.d.ts

@@ -5,7 +5,7 @@ import type { Meta } from '@storybook/react-webpack5';
 import { VStack } from '..';
 declare const meta: Meta<typeof VStack>;
 export default meta;
-export declare const Default: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react-webpack5").ReactRenderer, Omit<import("../../h-stack/types").Props, "spacing" | "alignment"> & {
+export declare const Default: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<import("../../h-stack/types").Props, "spacing" | "alignment"> & {
     alignment?: import("../../h-stack/types").HStackAlignment | import("react").CSSProperties["alignItems"];
     spacing?: import("react").CSSProperties["width"];
 } & import("react").RefAttributes<any> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "direction" | "wrap" | "expanded" | "justify" | "children" | "as" | "spacing" | keyof import("react").RefAttributes<any> | "isReversed" | "alignment"> & {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "32.0.1-next.ba3aee3a2.0",
+	"version": "32.0.1-next.v.0+500f87dd8",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -63,24 +63,24 @@
 		"@types/gradient-parser": "1.1.0",
 		"@types/highlight-words-core": "1.2.1",
 		"@use-gesture/react": "^10.3.1",
-		"@wordpress/a11y": "^4.37.1-next.ba3aee3a2.0",
-		"@wordpress/base-styles": "^6.13.2-next.ba3aee3a2.0",
-		"@wordpress/compose": "^7.37.1-next.ba3aee3a2.0",
-		"@wordpress/date": "^5.37.2-next.ba3aee3a2.0",
-		"@wordpress/deprecated": "^4.37.1-next.ba3aee3a2.0",
-		"@wordpress/dom": "^4.37.1-next.ba3aee3a2.0",
-		"@wordpress/element": "^6.37.1-next.ba3aee3a2.0",
-		"@wordpress/escape-html": "^3.37.1-next.ba3aee3a2.0",
-		"@wordpress/hooks": "^4.37.1-next.ba3aee3a2.0",
-		"@wordpress/html-entities": "^4.37.1-next.ba3aee3a2.0",
-		"@wordpress/i18n": "^6.10.1-next.ba3aee3a2.0",
-		"@wordpress/icons": "^11.4.1-next.ba3aee3a2.0",
-		"@wordpress/is-shallow-equal": "^5.37.1-next.ba3aee3a2.0",
-		"@wordpress/keycodes": "^4.38.1-next.ba3aee3a2.0",
-		"@wordpress/primitives": "^4.37.1-next.ba3aee3a2.0",
-		"@wordpress/private-apis": "^1.37.1-next.ba3aee3a2.0",
-		"@wordpress/rich-text": "^7.37.1-next.ba3aee3a2.0",
-		"@wordpress/warning": "^3.37.1-next.ba3aee3a2.0",
+		"@wordpress/a11y": "^4.37.1-next.v.0+500f87dd8",
+		"@wordpress/base-styles": "^6.13.2-next.v.0+500f87dd8",
+		"@wordpress/compose": "^7.37.1-next.v.0+500f87dd8",
+		"@wordpress/date": "^5.37.2-next.v.0+500f87dd8",
+		"@wordpress/deprecated": "^4.37.1-next.v.0+500f87dd8",
+		"@wordpress/dom": "^4.37.1-next.v.0+500f87dd8",
+		"@wordpress/element": "^6.37.1-next.v.0+500f87dd8",
+		"@wordpress/escape-html": "^3.37.1-next.v.0+500f87dd8",
+		"@wordpress/hooks": "^4.37.1-next.v.0+500f87dd8",
+		"@wordpress/html-entities": "^4.37.1-next.v.0+500f87dd8",
+		"@wordpress/i18n": "^6.10.1-next.v.0+500f87dd8",
+		"@wordpress/icons": "^11.4.1-next.v.0+500f87dd8",
+		"@wordpress/is-shallow-equal": "^5.37.1-next.v.0+500f87dd8",
+		"@wordpress/keycodes": "^4.38.1-next.v.0+500f87dd8",
+		"@wordpress/primitives": "^4.37.1-next.v.0+500f87dd8",
+		"@wordpress/private-apis": "^1.37.1-next.v.0+500f87dd8",
+		"@wordpress/rich-text": "^7.37.1-next.v.0+500f87dd8",
+		"@wordpress/warning": "^3.37.1-next.v.0+500f87dd8",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -94,7 +94,7 @@
 		"memize": "^2.1.0",
 		"path-to-regexp": "^6.2.1",
 		"re-resizable": "^6.4.0",
-		"react-colorful": "^5.3.1",
+		"react-colorful": "^5.6.1",
 		"react-day-picker": "^9.7.0",
 		"remove-accents": "^0.5.0",
 		"uuid": "^9.0.1"
@@ -104,7 +104,7 @@
 		"@storybook/addon-docs": "^9.1.17",
 		"@testing-library/jest-dom": "^6.6.3",
 		"@types/jest": "^29.5.14",
-		"@wordpress/jest-console": "^8.37.1-next.ba3aee3a2.0",
+		"@wordpress/jest-console": "^8.37.1-next.v.0+500f87dd8",
 		"csstype": "^3.2.3",
 		"snapshot-diff": "^0.10.0",
 		"storybook": "^9.1.17",
@@ -117,5 +117,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "67d2e486fcd40c753591cf911ca0659132f519ca"
+	"gitHead": "ca0db0ee8ac2116cd307650136027d26d0cdd9bd"
 }

package/src/context/context-system-provider.js

@@ -2,7 +2,8 @@
  * External dependencies
  */
 import deepmerge from 'deepmerge';
-import fastDeepEqual from 'fast-deep-equal/es6';
+import fastDeepEqual from 'fast-deep-equal/es6/index.js';
+// @ts-expect-error https://github.com/jonschlinkert/is-plain-object/pull/47
 import { isPlainObject } from 'is-plain-object';
 
 /**

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import fastDeepEqual from 'fast-deep-equal/es6';
+import fastDeepEqual from 'fast-deep-equal/es6/index.js';
 
 /**
  * WordPress dependencies

package/src/higher-order/with-fallback-styles/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import fastDeepEqual from 'fast-deep-equal/es6';
+import fastDeepEqual from 'fast-deep-equal/es6/index.js';
 
 /**
  * WordPress dependencies

package/src/index.ts

@@ -218,6 +218,12 @@ export {
 	useSlot as __experimentalUseSlot,
 	useSlotFills as __experimentalUseSlotFills,
 } from './slot-fill';
+export type {
+	SlotKey,
+	SlotComponentProps,
+	FillComponentProps,
+	DistributiveOmit,
+} from './slot-fill/types';
 export { default as __experimentalStyleProvider } from './style-provider';
 export { ZStack as __experimentalZStack } from './z-stack';
 

package/src/menu/popover.tsx

@@ -84,6 +84,7 @@ export const Popover = forwardRef<
 			shift={ shift ?? ( menuContext.store.parent ? -4 : 0 ) }
 			hideOnHoverOutside={ false }
 			data-side={ appliedPlacementSide }
+			data-submenu={ !! menuContext.store.parent || undefined }
 			wrapperProps={ wrapperProps }
 			hideOnEscape={ hideOnEscape }
 			unmountOnHide

package/src/menu/styles.ts

@@ -72,32 +72,42 @@ export const Menu = styled( Ariakit.Menu )< Pick< ContextProps, 'variant' > >`
 			${ DROPDOWN_MOTION_CSS.FADE_EASING };
 		will-change: transform, opacity;
 
-		/* Regardless of the side, fade in and out. */
-		opacity: 0;
-		&[data-enter] {
-			opacity: 1;
-		}
-
-		/* Slide in the direction the menu is opening. */
-		&[data-side='bottom'] {
-			transform: translateY( -${ DROPDOWN_MOTION_CSS.SLIDE_DISTANCE } );
-		}
-		&[data-side='top'] {
-			transform: translateY( ${ DROPDOWN_MOTION_CSS.SLIDE_DISTANCE } );
-		}
-		&[data-side='left'] {
-			transform: translateX( ${ DROPDOWN_MOTION_CSS.SLIDE_DISTANCE } );
-		}
-		&[data-side='right'] {
-			transform: translateX( -${ DROPDOWN_MOTION_CSS.SLIDE_DISTANCE } );
-		}
-		&[data-enter][data-side='bottom'],
-		&[data-enter][data-side='top'] {
-			transform: translateY( 0 );
-		}
-		&[data-enter][data-side='left'],
-		&[data-enter][data-side='right'] {
-			transform: translateX( 0 );
+		&:not( [data-submenu] ) {
+			/* Regardless of the side, fade in and out. */
+			opacity: 0;
+			&[data-enter] {
+				opacity: 1;
+			}
+
+			/* Slide in the direction the menu is opening. */
+			&[data-side='bottom'] {
+				transform: translateY(
+					-${ DROPDOWN_MOTION_CSS.SLIDE_DISTANCE }
+				);
+			}
+			&[data-side='top'] {
+				transform: translateY(
+					${ DROPDOWN_MOTION_CSS.SLIDE_DISTANCE }
+				);
+			}
+			&[data-side='left'] {
+				transform: translateX(
+					${ DROPDOWN_MOTION_CSS.SLIDE_DISTANCE }
+				);
+			}
+			&[data-side='right'] {
+				transform: translateX(
+					-${ DROPDOWN_MOTION_CSS.SLIDE_DISTANCE }
+				);
+			}
+			&[data-enter][data-side='bottom'],
+			&[data-enter][data-side='top'] {
+				transform: translateY( 0 );
+			}
+			&[data-enter][data-side='left'],
+			&[data-enter][data-side='right'] {
+				transform: translateX( 0 );
+			}
 		}
 	}
 `;