@wordpress/components 33.0.1-next.v.202604201441.0 → 33.1.0

package/src/menu/test/index.tsx

@@ -18,6 +18,14 @@ const delay = ( delayInMs: number ) => {
 	return new Promise( ( resolve ) => setTimeout( resolve, delayInMs ) );
 };
 
+const waitForFocusedMenu = () =>
+	waitFor( () => expect( screen.getByRole( 'menu' ) ).toHaveFocus() );
+
+const waitForFocusedMenuItem = ( name: string ) =>
+	waitFor( () =>
+		expect( screen.getByRole( 'menuitem', { name } ) ).toHaveFocus()
+	);
+
 // Open dropdown => open menu
 // Submenu trigger item => open submenu
 
@@ -114,7 +122,7 @@ describe( 'Menu', () => {
 			await click( toggleButton );
 
 			// Menu open, focus is on the menu wrapper
-			expect( screen.getByRole( 'menu' ) ).toHaveFocus();
+			await waitForFocusedMenu();
 		} );
 
 		it( 'should open and focus the first item when pressing the arrow down key on the trigger', async () => {
@@ -145,9 +153,7 @@ describe( 'Menu', () => {
 
 			// Menu open, focus is on the first focusable item
 			// (disabled items are still focusable and accessible)
-			expect(
-				screen.getByRole( 'menuitem', { name: 'First item' } )
-			).toHaveFocus();
+			await waitForFocusedMenuItem( 'First item' );
 		} );
 
 		it( 'should open and focus the first item when pressing the space key on the trigger', async () => {
@@ -155,7 +161,7 @@ describe( 'Menu', () => {
 				<Menu>
 					<Menu.TriggerButton>Open dropdown</Menu.TriggerButton>
 					<Menu.Popover>
-						<Menu.Item disabled>First item</Menu.Item>
+						<Menu.Item>First item</Menu.Item>
 						<Menu.Item>Second item</Menu.Item>
 						<Menu.Item>Third item</Menu.Item>
 					</Menu.Popover>
@@ -174,13 +180,12 @@ describe( 'Menu', () => {
 			// Menu closed
 			expect( screen.queryByRole( 'menuitem' ) ).not.toBeInTheDocument();
 
-			await press.Space();
+			// Keyboard-triggered clicks have `detail: 0`, which Ariakit uses to
+			// choose the initial item focus path instead of the pointer path.
+			await press.Space( toggleButton, { detail: 0 } );
 
 			// Menu open, focus is on the first focusable item
-			// (disabled items are still focusable and accessible
-			expect(
-				screen.getByRole( 'menuitem', { name: 'First item' } )
-			).toHaveFocus();
+			await waitForFocusedMenuItem( 'First item' );
 		} );
 
 		it( 'should close when pressing the escape key', async () => {
@@ -201,7 +206,7 @@ describe( 'Menu', () => {
 
 			// Focuses menu on mouse click, focuses first item on keyboard press
 			// Can be changed with a custom useEffect
-			expect( screen.getByRole( 'menu' ) ).toHaveFocus();
+			await waitForFocusedMenu();
 
 			// Pressing esc will close the menu and move focus to the toggle
 			await press.Escape();
@@ -349,9 +354,7 @@ describe( 'Menu', () => {
 			);
 
 			// The menu is focused automatically when `defaultOpen` is set.
-			await waitFor( () =>
-				expect( screen.getByRole( 'menu' ) ).toHaveFocus()
-			);
+			await waitForFocusedMenu();
 
 			// Arrow up/down selects menu items
 			// The selection wraps around from last to first and viceversa
@@ -391,18 +394,13 @@ describe( 'Menu', () => {
 			).toHaveFocus();
 
 			// Arrow right/left can be used to enter/leave submenus
+			// (focus crosses menu contexts, so wait for it to settle)
 			await press.ArrowRight();
-			expect(
-				screen.getByRole( 'menuitem', {
-					name: 'Submenu item 1',
-				} )
-			).toHaveFocus();
+			await waitForFocusedMenuItem( 'Submenu item 1' );
 
 			await press.ArrowDown();
 			expect(
-				screen.getByRole( 'menuitem', {
-					name: 'Submenu item 2',
-				} )
+				screen.getByRole( 'menuitem', { name: 'Submenu item 2' } )
 			).toHaveFocus();
 
 			await press.ArrowLeft();
@@ -414,11 +412,7 @@ describe( 'Menu', () => {
 
 			// Spacebar or enter key can also be used to enter a submenu
 			await press.Enter();
-			expect(
-				screen.getByRole( 'menuitem', {
-					name: 'Submenu item 1',
-				} )
-			).toHaveFocus();
+			await waitForFocusedMenuItem( 'Submenu item 1' );
 
 			await press.ArrowLeft();
 			expect(
@@ -428,11 +422,7 @@ describe( 'Menu', () => {
 			).toHaveFocus();
 
 			await press.Space();
-			expect(
-				screen.getByRole( 'menuitem', {
-					name: 'Submenu item 1',
-				} )
-			).toHaveFocus();
+			await waitForFocusedMenuItem( 'Submenu item 1' );
 
 			await press.ArrowLeft();
 			expect(
@@ -886,7 +876,7 @@ describe( 'Menu', () => {
 			);
 
 			// Menu open, focus is on the menu wrapper
-			expect( screen.getByRole( 'menu' ) ).toHaveFocus();
+			await waitForFocusedMenu();
 
 			expect(
 				screen.queryByRole( 'button', {
@@ -916,18 +906,19 @@ describe( 'Menu', () => {
 			);
 
 			// Menu open, focus is on the menu wrapper
-			expect( screen.getByRole( 'menu' ) ).toHaveFocus();
+			await waitForFocusedMenu();
 
 			// Menu is not modal, therefore the outer button is part of the
 			// accessibility tree and can be found.
 			const outerButton = screen.getByRole( 'button', {
 				name: 'Button outside of dropdown',
 			} );
+			expect( outerButton ).toBeVisible();
 
 			// The outer button can be focused by pressing tab. Doing so will cause
 			// the Menu to close.
 			await press.Tab();
-			expect( outerButton ).toBeInTheDocument();
+			expect( outerButton ).toBeVisible();
 			expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
 		} );
 	} );
@@ -1068,7 +1059,7 @@ describe( 'Menu', () => {
 					name: 'Open dropdown',
 				} )
 			);
-			expect( screen.getByRole( 'menu' ) ).toHaveFocus();
+			await waitForFocusedMenu();
 
 			// Type "tw", it should match and focus the item with content "Two"
 			await type( 'tw' );
@@ -1104,7 +1095,7 @@ describe( 'Menu', () => {
 					name: 'Open dropdown',
 				} )
 			);
-			expect( screen.getByRole( 'menu' ) ).toHaveFocus();
+			await waitForFocusedMenu();
 
 			// Type a string that doesn't match any items. Focus shouldn't move.
 			await type( 'abc' );

package/src/menu-group/stories/index.story.tsx

@@ -27,7 +27,7 @@ const meta: Meta< typeof MenuGroup > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 			notes: 'Subcomponent of `DropdownMenu`.',
 		},

package/src/menu-item/stories/index.story.tsx

@@ -38,7 +38,7 @@ const meta: Meta< typeof MenuItem > = {
 		},
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 			notes: 'Subcomponent of `DropdownMenu`.',
 		},

package/src/menu-items-choice/stories/index.story.tsx

@@ -30,7 +30,7 @@ const meta: Meta< typeof MenuItemsChoice > = {
 		},
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 			notes: 'Subcomponent of `DropdownMenu`.',
 		},

package/src/modal/index.tsx

@@ -121,7 +121,6 @@ function UnforwardedModal(
 	const onRequestCloseRef =
 		useRef< ModalProps[ 'onRequestClose' ] >( undefined );
 	useEffect( () => {
-		// eslint-disable-next-line react-compiler/react-compiler -- false positive, see https://github.com/facebook/react/issues/29196
 		onRequestCloseRef.current = onRequestClose;
 	}, [ onRequestClose ] );
 
@@ -169,8 +168,7 @@ function UnforwardedModal(
 		};
 	}, [ bodyOpenClassName ] );
 
-	const { closeModal, frameRef, frameStyle, overlayClassname } =
-		useModalExitAnimation();
+	const { closeModal, frameRef, overlayClassname } = useModalExitAnimation();
 
 	// Calls the isContentScrollable callback when the Modal children container resizes.
 	useLayoutEffect( () => {
@@ -260,10 +258,7 @@ function UnforwardedModal(
 						sizeClass,
 						className
 					) }
-					style={ {
-						...frameStyle,
-						...style,
-					} }
+					style={ style }
 					ref={ useMergeRefs( [
 						frameRef,
 						constrainedTabbingRef,

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

@@ -46,7 +46,7 @@ const meta: Meta< typeof Modal > = {
 	parameters: {
 		controls: { expanded: true },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 			notes: 'Will be superseded by `Dialog` in `@wordpress/ui`, but continue using for now.',
 		},

package/src/modal/style.scss

@@ -16,22 +16,27 @@
 	z-index: z-index(".components-modal__screen-overlay");
 	display: flex;
 	// This animates the appearance of the backdrop.
-	@include animation__fade-in();
+	@include animation__fade-in($speed: var(--wpds-motion-duration-sm), $easing: var(--wpds-motion-easing-subtle));
 
 	&.is-animating-out {
 		// Note: it's important that the fade-out animation doesn't end after the
 		// modal frame's disappear animation, because the component will be removed
 		// from the DOM when that animation ends.
-		@include animation__fade-out($delay: 80ms);
+		@include animation__fade-out($speed: var(--wpds-motion-duration-sm), $delay: var(--wpds-motion-duration-xs), $easing: var(--wpds-motion-easing-subtle));
 	}
 }
 
 // The modal window element.
 .components-modal__frame {
 	@include reset;
-	// Use the entire viewport on smaller screens.
-	margin: $grid-unit-50 0 0 0;
+	// On smaller screens, render as a bottom sheet: edge-to-edge, anchored
+	// to the bottom of the viewport. `align-self: flex-end` both anchors
+	// the modal to the bottom of the flex overlay and breaks the default
+	// `align-items: stretch`, so the modal hugs its content height.
+	align-self: flex-end;
+	margin: 0;
 	width: 100%;
+	max-height: calc(100% - #{$grid-unit-50});
 	background: $white;
 	box-shadow: $elevation-large;
 	border-radius: $radius-large $radius-large 0 0;
@@ -42,7 +47,7 @@
 	// Animate the modal frame/contents appearing on the page.
 	animation-name: components-modal__appear-animation;
 	animation-fill-mode: forwards;
-	animation-timing-function: cubic-bezier(0.29, 0, 0, 1);
+	animation-timing-function: var(--wpds-motion-easing-expressive);
 
 	// Ensure all headings use the proper editor text color, overriding wp-admin common.css
 	h1,
@@ -52,16 +57,17 @@
 	}
 
 	@media not (prefers-reduced-motion) {
-		animation-duration: var(--modal-frame-animation-duration);
+		animation-duration: var(--wpds-motion-duration-md);
 	}
 
 	.components-modal__screen-overlay.is-animating-out & {
 		animation-name: components-modal__disappear-animation;
-		animation-timing-function: cubic-bezier(1, 0, 0.2, 1);
+		animation-timing-function: var(--wpds-motion-easing-expressive);
 	}
 
 	// Show a centered modal on bigger screens.
 	@include break-small() {
+		align-self: auto;
 		border-radius: $radius-large;
 		margin: auto;
 		width: auto;
@@ -69,19 +75,6 @@
 		max-width: calc(100% - #{$grid-unit-20 * 2});
 		max-height: calc(100% - #{$header-height * 2});
 
-		&.is-full-screen {
-			@include break-small() {
-				width: calc(100% - #{ $grid-unit-20 * 2 });
-				height: calc(100% - #{ $grid-unit-20 * 2 });
-				max-height: none;
-			}
-			@include break-medium() {
-				width: calc(100% - #{ $grid-unit-50 * 2 });
-				height: calc(100% - #{ $grid-unit-50 * 2 });
-				max-width: none;
-			}
-		}
-
 		&.has-size-small,
 		&.has-size-medium,
 		&.has-size-large {
@@ -105,6 +98,14 @@
 	}
 
 	&.is-full-screen {
+		// Full-screen modals cover the entire viewport on mobile,
+		// overriding the bottom-sheet defaults.
+		margin: 0;
+		width: 100%;
+		height: 100%;
+		max-height: none;
+		border-radius: 0;
+
 		// When full screen, make sure the children container is full height.
 		:where(.components-modal__content) {
 			display: flex;
@@ -116,17 +117,33 @@
 				flex: 1;
 			}
 		}
+
+		@include break-small() {
+			// Reset the mobile bottom-sheet overrides so the desktop
+			// full-screen modal is centered with rounded corners.
+			margin: auto;
+			border-radius: $radius-large;
+			width: calc(100% - #{ $grid-unit-20 * 2 });
+			height: calc(100% - #{ $grid-unit-20 * 2 });
+		}
+
+		@include break-medium() {
+			width: calc(100% - #{ $grid-unit-50 * 2 });
+			height: calc(100% - #{ $grid-unit-50 * 2 });
+			max-width: none;
+		}
 	}
 }
 
+// On mobile, the modal slides up from the bottom of the viewport.
 @keyframes components-modal__appear-animation {
 	from {
 		opacity: 0;
-		transform: scale(0.9);
+		transform: translateY(100%);
 	}
 	to {
 		opacity: 1;
-		transform: scale(1);
+		transform: translateY(0);
 	}
 }
 
@@ -135,11 +152,38 @@
 @keyframes components-modal__disappear-animation {
 	from {
 		opacity: 1;
-		transform: scale(1);
+		transform: translateY(0);
 	}
 	to {
 		opacity: 0;
-		transform: scale(0.9);
+		transform: translateY(100%);
+	}
+}
+
+// On bigger screens, the modal scales in/out instead of sliding. The keyframe
+// names are intentionally reused so the JS animationend listener
+// (use-modal-exit-animation.ts) keeps working unchanged.
+@include break-small() {
+	@keyframes components-modal__appear-animation {
+		from {
+			opacity: 0;
+			transform: scale(0.9);
+		}
+		to {
+			opacity: 1;
+			transform: scale(1);
+		}
+	}
+
+	@keyframes components-modal__disappear-animation {
+		from {
+			opacity: 1;
+			transform: scale(1);
+		}
+		to {
+			opacity: 0;
+			transform: scale(0.9);
+		}
 	}
 }
 

package/src/modal/use-modal-exit-animation.ts

@@ -10,9 +10,15 @@ import warning from '@wordpress/warning';
  */
 import { CONFIG } from '../utils';
 
-// Animation duration (ms) extracted to JS in order to be used on a setTimeout.
-const FRAME_ANIMATION_DURATION = CONFIG.transitionDuration;
-const FRAME_ANIMATION_DURATION_NUMBER = Number.parseInt(
+/**
+ * Milliseconds used as a fallback when racing `animationend` against a timeout.
+ *
+ * Sourced from `CONFIG.transitionDuration`. This value is implicitly coupled to
+ * the modal frame’s CSS `animation-duration` in `style.scss`, which uses
+ * `var(--wpds-motion-duration-md)`. If either the token, the SCSS, or
+ * `CONFIG.transitionDuration` changes, keep them aligned so exit timing stays correct.
+ */
+const FRAME_ANIMATION_DURATION_MS = Number.parseInt(
 	CONFIG.transitionDuration
 );
 
@@ -68,7 +74,7 @@ export function useModalExitAnimation() {
 							// Allow an extra 20% of the animation duration for the
 							// animationend event to fire, in case the animation frame is
 							// slightly delayes by some other events in the event loop.
-							FRAME_ANIMATION_DURATION_NUMBER * 1.2
+							FRAME_ANIMATION_DURATION_MS * 1.2
 						);
 					} );
 
@@ -91,9 +97,6 @@ export function useModalExitAnimation() {
 	return {
 		overlayClassname: isAnimatingOut ? 'is-animating-out' : undefined,
 		frameRef,
-		frameStyle: {
-			'--modal-frame-animation-duration': `${ FRAME_ANIMATION_DURATION }`,
-		},
 		closeModal,
 	};
 }

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

@@ -30,7 +30,7 @@ const meta: Meta< typeof Navigator > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 		},
 	},

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

@@ -31,7 +31,7 @@ const meta: Meta< typeof Notice > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 			notes: 'Will be superseded by `Notice` in `@wordpress/ui`, but continue using for now.',
 		},

package/src/notice/test/__snapshots__/index.tsx.snap

@@ -7,6 +7,7 @@ exports[`Notice should match snapshot 1`] = `
   >
     <div
       class="components-visually-hidden css-1ragr82-PolymorphicDiv emotion-0"
+      data-visually-hidden=""
       data-wp-c16t="true"
       data-wp-component="VisuallyHidden"
       style="border: 0px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset( 50% ); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; word-wrap: normal; word-break: normal;"

package/src/number-control/stories/index.story.tsx

@@ -30,7 +30,7 @@ const meta: Meta< typeof NumberControl > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 			notes: 'Will be superseded by `InputControl` with `type="number"` in `@wordpress/ui`, but continue using for now.',
 		},

package/src/palette-edit/index.tsx

@@ -299,7 +299,6 @@ function PaletteEditListView< T extends PaletteElement >( {
 	// When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.
 	const elementsReferenceRef = useRef< T[] >( undefined );
 	useEffect( () => {
-		// eslint-disable-next-line react-compiler/react-compiler -- false positive, see https://github.com/facebook/react/issues/29196
 		elementsReferenceRef.current = elements;
 	}, [ elements ] );
 

package/src/palette-edit/stories/index.story.tsx

@@ -25,7 +25,7 @@ const meta: Meta< typeof PaletteEdit > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'editor',
 		},
 	},

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

@@ -29,7 +29,7 @@ const meta: Meta< typeof Panel > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 		},
 	},

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

@@ -34,7 +34,7 @@ const meta: Meta< typeof Placeholder > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'editor',
 		},
 	},

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

@@ -57,7 +57,7 @@ const meta: Meta< typeof Popover > = {
 	parameters: {
 		controls: { expanded: true },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 		},
 	},

package/src/popover/style.scss

@@ -73,10 +73,6 @@ $shadow-popover-border-top-only-alternate: 0 #{-$border-width} 0 $gray-900;
 	width: 100%;
 }
 
-.components-popover__close.components-button {
-	z-index: z-index(".components-popover__close");
-}
-
 .components-popover__arrow {
 	position: absolute;
 	width: $arrow-triangle-base-size;

package/src/progress-bar/stories/index.story.tsx

@@ -22,7 +22,7 @@ const meta: Meta< typeof ProgressBar > = {
 		},
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 		},
 	},

package/src/query-controls/stories/index.story.tsx

@@ -41,7 +41,7 @@ const meta: Meta< typeof QueryControls > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'editor',
 		},
 	},

package/src/radio-control/stories/index.story.tsx

@@ -38,7 +38,7 @@ const meta: Meta< typeof RadioControl > = {
 		},
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 			notes: 'Will be superseded by `RadioGroupControl` in `@wordpress/ui`, but continue using for now.',
 		},

package/src/range-control/stories/index.story.tsx

@@ -59,7 +59,7 @@ const meta: Meta< typeof RangeControl > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 			notes: 'Will be superseded by `SliderControl` in `@wordpress/ui`, but continue using for now.',
 		},

package/src/resizable-box/stories/index.story.tsx

@@ -27,7 +27,7 @@ const meta: Meta< typeof ResizableBox > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 		},
 	},

package/src/resizable-box/style.scss

@@ -1,7 +1,6 @@
 @use "sass:math";
 @use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/variables" as *;
-@use "@wordpress/base-styles/z-index" as *;
 @use "../utils/theme-variables" as *;
 
 $resize-handler-size: 15px;
@@ -15,7 +14,7 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
 	height: $resize-handler-container-size;
 
 	// Elevate the resize handle above the focus style.
-	z-index: z-index(".components-resizable-box__handle");
+	z-index: 2;
 
 	// Show the resize handle if set in props
 	.components-resizable-box__container.has-show-handle & {
@@ -26,7 +25,7 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
 		position: relative;
 		width: 100%;
 		height: 100%;
-		z-index: z-index(".components-resizable-box__handle");
+		z-index: 2;
 		outline: none;
 	}
 }
@@ -77,11 +76,11 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
 
 // Show corner handles on top of side handles so they can be used
 .components-resizable-box__side-handle {
-	z-index: z-index(".components-resizable-box__side-handle");
+	z-index: 2;
 }
 
 .components-resizable-box__corner-handle {
-	z-index: z-index(".components-resizable-box__corner-handle");
+	z-index: 2;
 }
 
 // Make horizontal side-handles full width

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

@@ -24,7 +24,7 @@ const meta: Meta< typeof SandBox > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 		},
 	},

package/src/scroll-lock/stories/index.story.tsx

@@ -24,7 +24,7 @@ const meta: Meta< typeof ScrollLock > = {
 		controls: { hideNoControlsWarning: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 		},
 	},