@wordpress/components 29.0.1-next.a9f418477.0 → 29.1.0

package/src/menu/trigger-button.tsx

@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import * as Ariakit from '@ariakit/react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../context';
+import type { MenuTriggerButtonProps } from './types';
+import { MenuContext } from './context';
+
+export const MenuTriggerButton = forwardRef<
+	HTMLDivElement,
+	WordPressComponentProps< MenuTriggerButtonProps, 'button', false >
+>( function MenuTriggerButton( { children, disabled = false, ...props }, ref ) {
+	const menuContext = useContext( MenuContext );
+
+	if ( ! menuContext?.store ) {
+		throw new Error(
+			'Menu.TriggerButton can only be rendered inside a Menu component'
+		);
+	}
+
+	if ( menuContext.store.parent ) {
+		throw new Error(
+			'Menu.TriggerButton should not be rendered inside a nested Menu component. Use Menu.SubmenuTriggerItem instead.'
+		);
+	}
+
+	return (
+		<Ariakit.MenuButton
+			ref={ ref }
+			{ ...props }
+			disabled={ disabled }
+			store={ menuContext.store }
+		>
+			{ children }
+		</Ariakit.MenuButton>
+	);
+} );

package/src/menu/types.ts

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import type * as Ariakit from '@ariakit/react';
-import type { Placement } from '@floating-ui/react-dom';
 
 export interface MenuContext {
 	/**
@@ -17,170 +16,318 @@ export interface MenuContext {
 
 export interface MenuProps {
 	/**
-	 * The button triggering the menu popover.
+	 * The elements, which should include one instance of the `Menu.TriggerButton`
+	 * component and one instance of the `Menu.Popover` component.
 	 */
-	trigger: React.ReactElement;
+	children?: Ariakit.MenuProviderProps[ 'children' ];
 	/**
-	 * The contents of the menu (ie. one or more menu items).
+	 * Whether the menu popover and its contents should be visible by default.
+	 *
+	 * Note: this prop will be overridden by the `open` prop if it is
+	 * provided (meaning the component will be used in "controlled" mode).
+	 *
+	 * @default false
 	 */
-	children?: React.ReactNode;
+	defaultOpen?: Ariakit.MenuProviderProps[ 'defaultOpen' ];
 	/**
-	 * The open state of the menu popover when it is initially rendered. Use when
-	 * not wanting to control its open state.
+	 * Whether the menu popover and its contents should be visible.
+	 * Should be used in conjunction with `onOpenChange` in order to control
+	 * the open state of the menu popover.
 	 *
-	 * @default false
+	 * Note: this prop will set the component in "controlled" mode, and it will
+	 * override the `defaultOpen` prop.
 	 */
-	defaultOpen?: boolean;
+	open?: Ariakit.MenuProviderProps[ 'open' ];
 	/**
-	 * The controlled open state of the menu popover. Must be used in conjunction
-	 * with `onOpenChange`.
+	 * A callback that gets called when the `open` state changes.
 	 */
-	open?: boolean;
+	onOpenChange?: Ariakit.MenuProviderProps[ 'setOpen' ];
 	/**
-	 * Event handler called when the open state of the menu popover changes.
+	 * The placement of the menu popover.
+	 *
+	 * @default 'bottom-start' for root-level menus, 'right-start' for submenus
 	 */
-	onOpenChange?: ( open: boolean ) => void;
+	placement?: Ariakit.MenuProviderProps[ 'placement' ];
+}
+
+export interface MenuPopoverProps {
+	/**
+	 * The contents of the menu popover, which should include instances of the
+	 * `Menu.Item`, `Menu.CheckboxItem`, `Menu.RadioItem`, `Menu.Group`, and
+	 * `Menu.Separator` components.
+	 */
+	children?: Ariakit.MenuProps[ 'children' ];
 	/**
 	 * The modality of the menu popover. When set to true, interaction with
 	 * outside elements will be disabled and only menu content will be visible to
 	 * screen readers.
 	 *
-	 * @default true
-	 */
-	modal?: boolean;
-	/**
-	 * The placement of the menu popover.
+	 * Determines whether the menu popover is modal. Modal dialogs have distinct
+	 * states and behaviors:
+	 * - The `portal` and `preventBodyScroll` props are set to `true`. They can
+	 *   still be manually set to `false`.
+	 * - When the dialog is open, element tree outside it will be inert.
 	 *
-	 * @default 'bottom-start' for root-level menus, 'right-start' for nested menus
+	 * @default true
 	 */
-	placement?: Placement;
+	modal?: Ariakit.MenuProps[ 'modal' ];
 	/**
 	 * The distance between the popover and the anchor element.
 	 *
 	 * @default 8 for root-level menus, 16 for nested menus
 	 */
-	gutter?: number;
+	gutter?: Ariakit.MenuProps[ 'gutter' ];
 	/**
 	 * The skidding of the popover along the anchor element. Can be set to
 	 * negative values to make the popover shift to the opposite side.
 	 *
 	 * @default 0 for root-level menus, -8 for nested menus
 	 */
-	shift?: number;
+	shift?: Ariakit.MenuProps[ 'shift' ];
 	/**
-	 * Determines whether the menu popover will be hidden when the user presses
-	 * the Escape key.
+	 * Determines if the menu popover will hide when the user presses the
+	 * Escape key.
+	 *
+	 * This prop can be either a boolean or a function that accepts an event as an
+	 * argument and returns a boolean. The event object represents the keydown
+	 * event that initiated the hide action, which could be either a native
+	 * keyboard event or a React synthetic event.
 	 *
 	 * @default `( event ) => { event.preventDefault(); return true; }`
 	 */
-	hideOnEscape?:
-		| boolean
-		| ( (
-				event: KeyboardEvent | React.KeyboardEvent< Element >
-		  ) => boolean );
+	hideOnEscape?: Ariakit.MenuProps[ 'hideOnEscape' ];
+}
+
+export interface MenuTriggerButtonProps {
+	/**
+	 * The contents of the menu trigger button.
+	 */
+	children?: Ariakit.MenuButtonProps[ 'children' ];
+	/**
+	 * Allows the component to be rendered as a different HTML element or React
+	 * component. The value can be a React element or a function that takes in the
+	 * original component props and gives back a React element with the props
+	 * merged.
+	 */
+	render?: Ariakit.MenuButtonProps[ 'render' ];
+	/**
+	 * Determines if the element is disabled. This sets the `aria-disabled`
+	 * attribute accordingly, enabling support for all elements, including those
+	 * that don't support the native `disabled` attribute.
+	 *
+	 * This feature can be combined with the `accessibleWhenDisabled` prop to
+	 * make disabled elements still accessible via keyboard.
+	 *
+	 * @default false
+	 */
+	disabled?: Ariakit.MenuButtonProps[ 'disabled' ];
+	/**
+	 * Indicates whether the element should be focusable even when it is
+	 * `disabled`.
+	 *
+	 * This is important when discoverability is a concern. For example:
+	 *
+	 * > A toolbar in an editor contains a set of special smart paste functions
+	 * that are disabled when the clipboard is empty or when the function is not
+	 * applicable to the current content of the clipboard. It could be helpful to
+	 * keep the disabled buttons focusable if the ability to discover their
+	 * functionality is primarily via their presence on the toolbar.
+	 *
+	 * Learn more on [Focusability of disabled
+	 * controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols).
+	 */
+	accessibleWhenDisabled?: Ariakit.MenuButtonProps[ 'accessibleWhenDisabled' ];
 }
 
 export interface MenuGroupProps {
 	/**
-	 * The contents of the menu group (ie. an optional menu group label and one
-	 * or more menu items).
+	 * The contents of the menu group, which should include one instance of the
+	 * `Menu.GroupLabel` component and one or more instances of `Menu.Item`,
+	 * `Menu.CheckboxItem`, and `Menu.RadioItem`.
 	 */
-	children: React.ReactNode;
+	children: Ariakit.MenuGroupProps[ 'children' ];
 }
 
 export interface MenuGroupLabelProps {
 	/**
-	 * The contents of the menu group label.
+	 * The contents of the menu group label, which should provide an accessible
+	 * label for the menu group.
 	 */
-	children: React.ReactNode;
+	children: Ariakit.MenuGroupLabelProps[ 'children' ];
 }
 
 export interface MenuItemProps {
 	/**
-	 * The contents of the menu item.
+	 * The contents of the menu item, which could include one instance of the
+	 * `Menu.ItemLabel` component and/or one instance of the `Menu.ItemHelpText`
+	 * component.
 	 */
-	children: React.ReactNode;
+	children: Ariakit.MenuItemProps[ 'children' ];
 	/**
-	 * The contents of the menu item's prefix.
+	 * The contents of the menu item's prefix, such as an icon.
 	 */
 	prefix?: React.ReactNode;
 	/**
-	 * The contents of the menu item's suffix.
+	 * The contents of the menu item's suffix, such as a keyboard shortcut.
 	 */
 	suffix?: React.ReactNode;
 	/**
-	 * Whether to hide the menu popover when the menu item is clicked.
+	 * Determines if the menu should hide when this item is clicked.
+	 *
+	 * **Note**: This behavior isn't triggered if this menu item is rendered as a
+	 * link and modifier keys are used to either open the link in a new tab or
+	 * download it.
 	 *
 	 * @default true
 	 */
-	hideOnClick?: boolean;
+	hideOnClick?: Ariakit.MenuItemProps[ 'hideOnClick' ];
 	/**
-	 * Determines if the element is disabled.
+	 * Determines if the element is disabled. This sets the `aria-disabled`
+	 * attribute accordingly, enabling support for all elements, including those
+	 * that don't support the native `disabled` attribute.
+	 *
+	 * @default false
+	 */
+	disabled?: Ariakit.MenuItemProps[ 'disabled' ];
+	/**
+	 * Allows the component to be rendered as a different HTML element or React
+	 * component. The value can be a React element or a function that takes in the
+	 * original component props and gives back a React element with the props
+	 * merged.
+	 */
+	render?: Ariakit.MenuItemProps[ 'render' ];
+	/**
+	 * The ariakit menu store. This prop is only meant for internal use.
+	 * @ignore
 	 */
-	disabled?: boolean;
+	store?: Ariakit.MenuItemProps[ 'store' ];
 }
 
-export interface MenuCheckboxItemProps
-	extends Omit< MenuItemProps, 'prefix' | 'hideOnClick' > {
+export interface MenuCheckboxItemProps {
 	/**
-	 * Whether to hide the menu popover when the menu item is clicked.
+	 * The contents of the menu item, which could include one instance of the
+	 * `Menu.ItemLabel` component and/or one instance of the `Menu.ItemHelpText`
+	 * component.
+	 */
+	children: Ariakit.MenuItemCheckboxProps[ 'children' ];
+	/**
+	 * The contents of the menu item's suffix, such as a keyboard shortcut.
+	 */
+	suffix?: React.ReactNode;
+	/**
+	 * Determines if the menu should hide when this item is clicked.
+	 *
+	 * **Note**: This behavior isn't triggered if this menu item is rendered as a
+	 * link and modifier keys are used to either open the link in a new tab or
+	 * download it.
+	 *
+	 * @default false
+	 */
+	hideOnClick?: Ariakit.MenuItemCheckboxProps[ 'hideOnClick' ];
+	/**
+	 * Determines if the element is disabled. This sets the `aria-disabled`
+	 * attribute accordingly, enabling support for all elements, including those
+	 * that don't support the native `disabled` attribute.
 	 *
 	 * @default false
 	 */
-	hideOnClick?: boolean;
+	disabled?: Ariakit.MenuItemCheckboxProps[ 'disabled' ];
+	/**
+	 * Allows the component to be rendered as a different HTML element or React
+	 * component. The value can be a React element or a function that takes in the
+	 * original component props and gives back a React element with the props
+	 * merged.
+	 */
+	render?: Ariakit.MenuItemCheckboxProps[ 'render' ];
 	/**
 	 * The checkbox menu item's name.
 	 */
-	name: string;
+	name: Ariakit.MenuItemCheckboxProps[ 'name' ];
 	/**
 	 * The checkbox item's value, useful when using multiple checkbox menu items
 	 * associated to the same `name`.
 	 */
-	value?: string;
+	value?: Ariakit.MenuItemCheckboxProps[ 'value' ];
 	/**
 	 * The controlled checked state of the checkbox menu item.
+	 *
+	 * Note: this prop will override the `defaultChecked` prop.
 	 */
-	checked?: boolean;
+	checked?: Ariakit.MenuItemCheckboxProps[ 'checked' ];
 	/**
 	 * The checked state of the checkbox menu item when it is initially rendered.
 	 * Use when not wanting to control its checked state.
+	 *
+	 * Note: this prop will be overriden by the `checked` prop, if it is defined.
 	 */
-	defaultChecked?: boolean;
+	defaultChecked?: Ariakit.MenuItemCheckboxProps[ 'defaultChecked' ];
 	/**
-	 * Event handler called when the checked state of the checkbox menu item changes.
+	 * A function that is called when the checkbox's checked state changes.
 	 */
-	onChange?: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
+	onChange?: Ariakit.MenuItemCheckboxProps[ 'onChange' ];
 }
 
-export interface MenuRadioItemProps
-	extends Omit< MenuItemProps, 'prefix' | 'hideOnClick' > {
+export interface MenuRadioItemProps {
+	/**
+	 * The contents of the menu item, which could include one instance of the
+	 * `Menu.ItemLabel` component and/or one instance of the `Menu.ItemHelpText`
+	 * component.
+	 */
+	children: Ariakit.MenuItemRadioProps[ 'children' ];
+	/**
+	 * The contents of the menu item's suffix, such as a keyboard shortcut.
+	 */
+	suffix?: React.ReactNode;
+	/**
+	 * Determines if the menu should hide when this item is clicked.
+	 *
+	 * **Note**: This behavior isn't triggered if this menu item is rendered as a
+	 * link and modifier keys are used to either open the link in a new tab or
+	 * download it.
+	 *
+	 * @default false
+	 */
+	hideOnClick?: Ariakit.MenuItemRadioProps[ 'hideOnClick' ];
 	/**
-	 * Whether to hide the menu popover when the menu item is clicked.
+	 * Determines if the element is disabled. This sets the `aria-disabled`
+	 * attribute accordingly, enabling support for all elements, including those
+	 * that don't support the native `disabled` attribute.
 	 *
 	 * @default false
 	 */
-	hideOnClick?: boolean;
+	disabled?: Ariakit.MenuItemRadioProps[ 'disabled' ];
+	/**
+	 * Allows the component to be rendered as a different HTML element or React
+	 * component. The value can be a React element or a function that takes in the
+	 * original component props and gives back a React element with the props
+	 * merged.
+	 */
+	render?: Ariakit.MenuItemRadioProps[ 'render' ];
 	/**
 	 * The radio item's name.
 	 */
-	name: string;
+	name: Ariakit.MenuItemRadioProps[ 'name' ];
 	/**
 	 * The radio item's value.
 	 */
-	value: string | number;
+	value: Ariakit.MenuItemRadioProps[ 'value' ];
 	/**
 	 * The controlled checked state of the radio menu item.
+	 *
+	 * Note: this prop will override the `defaultChecked` prop.
 	 */
-	checked?: boolean;
+	checked?: Ariakit.MenuItemRadioProps[ 'checked' ];
 	/**
 	 * The checked state of the radio menu item when it is initially rendered.
 	 * Use when not wanting to control its checked state.
+	 *
+	 * Note: this prop will be overriden by the `checked` prop, if it is defined.
 	 */
-	defaultChecked?: boolean;
+	defaultChecked?: Ariakit.MenuItemRadioProps[ 'defaultChecked' ];
 	/**
-	 * Event handler called when the checked radio menu item changes.
+	 * A function that is called when the checkbox's checked state changes.
 	 */
-	onChange?: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
+	onChange?: Ariakit.MenuItemRadioProps[ 'onChange' ];
 }
 
 export interface MenuSeparatorProps {}

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

@@ -75,7 +75,10 @@ const Template: StoryFn< typeof Modal > = ( { onRequestClose, ...args } ) => {
 						anim id est laborum.
 					</p>
 
-					<InputControl style={ { marginBottom: '20px' } } />
+					<InputControl
+						__next40pxDefaultSize
+						style={ { marginBottom: '20px' } }
+					/>
 
 					<Button variant="secondary" onClick={ closeModal }>
 						Close Modal

package/src/navigation/back-button/index.tsx

@@ -49,6 +49,7 @@ function UnforwardedNavigationBackButton(
 	const icon = isRTL() ? chevronRight : chevronLeft;
 	return (
 		<MenuBackButtonUI
+			__next40pxDefaultSize
 			className={ classes }
 			href={ href }
 			variant="tertiary"

package/src/navigation/index.tsx

@@ -6,6 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
+import deprecated from '@wordpress/deprecated';
 import { useEffect, useRef, useState } from '@wordpress/element';
 import { isRTL } from '@wordpress/i18n';
 
@@ -79,6 +80,12 @@ export function Navigation( {
 	const navigationTree = useCreateNavigationTree();
 	const defaultSlideOrigin = isRTL() ? 'right' : 'left';
 
+	deprecated( 'wp.components.Navigation (and all subcomponents)', {
+		since: '6.8',
+		version: '7.1',
+		alternative: 'wp.components.Navigator',
+	} );
+
 	const setActiveMenu: NavigationContextType[ 'setActiveMenu' ] = (
 		menuId,
 		slideInOrigin = defaultSlideOrigin

package/src/navigation/item/index.tsx

@@ -79,6 +79,8 @@ export function NavigationItem( props: NavigationItemProps ) {
 		? restProps
 		: {
 				as: Button,
+				__next40pxDefaultSize:
+					'as' in restProps ? restProps.as === undefined : true,
 				href,
 				onClick: onItemClick,
 				'aria-current': isActive ? 'page' : undefined,

package/src/navigation/styles/navigation-styles.tsx

@@ -134,11 +134,12 @@ export const ItemBaseUI = styled.li`
 
 	&.is-active {
 		background-color: ${ COLORS.theme.accent };
-		color: ${ COLORS.white };
+		color: ${ COLORS.theme.accentInverted };
 
 		> button,
+		.components-button:hover,
 		> a {
-			color: ${ COLORS.white };
+			color: ${ COLORS.theme.accentInverted };
 			opacity: 1;
 		}
 	}

package/src/navigation/test/index.tsx

@@ -176,6 +176,10 @@ describe( 'Navigation', () => {
 
 		const menuItems = screen.getAllByRole( 'listitem' );
 
+		expect( console ).toHaveWarnedWith(
+			'wp.components.Navigation (and all subcomponents) is deprecated since version 6.8 and will be removed in version 7.1. Please use wp.components.Navigator instead.'
+		);
+
 		expect( menuItems ).toHaveLength( 4 );
 		expect( menuItems[ 0 ] ).toHaveTextContent( 'Item 1' );
 		expect( menuItems[ 1 ] ).toHaveTextContent( 'Item 2' );

package/src/navigator/test/index.tsx

@@ -75,6 +75,7 @@ function CustomNavigatorButton( {
 } ) {
 	return (
 		<Navigator.Button
+			__next40pxDefaultSize
 			onClick={ () => {
 				// Used to spy on the values passed to `navigator.goTo`.
 				onClick?.( { type: 'goTo', path } );
@@ -95,6 +96,7 @@ function CustomNavigatorGoToBackButton( {
 	const { goTo } = useNavigator();
 	return (
 		<Button
+			__next40pxDefaultSize
 			onClick={ () => {
 				goTo( path, { isBack: true } );
 				// Used to spy on the values passed to `navigator.goTo`.
@@ -115,6 +117,7 @@ function CustomNavigatorGoToSkipFocusButton( {
 	const { goTo } = useNavigator();
 	return (
 		<Button
+			__next40pxDefaultSize
 			onClick={ () => {
 				goTo( path, { skipFocus: true } );
 				// Used to spy on the values passed to `navigator.goTo`.
@@ -136,6 +139,7 @@ function CustomNavigatorBackButton( {
 } ) {
 	return (
 		<Navigator.BackButton
+			__next40pxDefaultSize
 			onClick={ () => {
 				// Used to spy on the values passed to `navigator.goBack`.
 				onClick?.( { type: 'goBack' } );

package/src/number-control/index.tsx

@@ -242,6 +242,7 @@ function UnforwardedNumberControl(
 				return stateReducerProp?.( baseState, action ) ?? baseState;
 			} }
 			size={ size }
+			__shouldNotWarnDeprecated36pxSize
 			suffix={
 				spinControls === 'custom' ? (
 					<>

package/src/palette-edit/index.tsx

@@ -60,6 +60,7 @@ const DEFAULT_COLOR = '#000';
 function NameInput( { value, onChange, label }: NameInputProps ) {
 	return (
 		<NameInputControl
+			size="compact"
 			label={ label }
 			hideLabelFromVision
 			value={ value }

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

@@ -74,12 +74,12 @@ _PanelRow.args = {
 	children: (
 		<PanelBody title="My Profile">
 			<PanelRow>
-				<InputControl label="First name" />
-				<InputControl label="Last name" />
+				<InputControl label="First name" __next40pxDefaultSize />
+				<InputControl label="Last name" __next40pxDefaultSize />
 			</PanelRow>
 			<PanelRow>
 				<div style={ { flex: 1 } }>
-					<InputControl label="Email" />
+					<InputControl label="Email" __next40pxDefaultSize />
 				</div>
 			</PanelRow>
 		</PanelBody>

package/src/private-apis.ts

@@ -8,6 +8,7 @@ import Theme from './theme';
 import { Tabs } from './tabs';
 import { kebabCase } from './utils/strings';
 import { lock } from './lock-unlock';
+import Badge from './badge';
 
 export const privateApis = {};
 lock( privateApis, {
@@ -17,4 +18,5 @@ lock( privateApis, {
 	Theme,
 	Menu,
 	kebabCase,
+	Badge,
 } );

package/src/radio-group/index.tsx

@@ -6,6 +6,7 @@ import * as Ariakit from '@ariakit/react';
 /**
  * WordPress dependencies
  */
+import deprecated from '@wordpress/deprecated';
 import { useMemo, forwardRef } from '@wordpress/element';
 import { isRTL } from '@wordpress/i18n';
 
@@ -46,11 +47,21 @@ function UnforwardedRadioGroup(
 		[ radioStore, disabled ]
 	);
 
+	deprecated( 'wp.components.__experimentalRadioGroup', {
+		alternative:
+			'wp.components.RadioControl or wp.components.__experimentalToggleGroupControl',
+		since: '6.8',
+	} );
+
 	return (
 		<RadioGroupContext.Provider value={ contextValue }>
 			<Ariakit.RadioGroup
 				store={ radioStore }
-				render={ <ButtonGroup>{ children }</ButtonGroup> }
+				render={
+					<ButtonGroup __shouldNotWarnDeprecated>
+						{ children }
+					</ButtonGroup>
+				}
 				aria-label={ label }
 				ref={ ref }
 				{ ...props }

package/src/radio-group/radio.tsx

@@ -7,7 +7,6 @@ import { forwardRef, useContext } from '@wordpress/element';
  * External dependencies
  */
 import * as Ariakit from '@ariakit/react';
-import { useStoreState } from '@ariakit/react';
 
 /**
  * Internal dependencies
@@ -28,7 +27,7 @@ function UnforwardedRadio(
 ) {
 	const { store, disabled } = useContext( RadioGroupContext );
 
-	const selectedValue = useStoreState( store, 'value' );
+	const selectedValue = Ariakit.useStoreState( store, 'value' );
 	const isChecked = selectedValue !== undefined && selectedValue === value;
 
 	maybeWarnDeprecated36pxSize( {

package/src/range-control/styles/range-control-styles.ts

@@ -130,8 +130,10 @@ export const Track = styled.span`
 	margin-top: ${ ( rangeHeightValue - railHeight ) / 2 }px;
 	top: 0;
 
-	@media not ( prefers-reduced-motion ) {
-		transition: width ease 0.1s;
+	.is-marked & {
+		@media not ( prefers-reduced-motion ) {
+			transition: width ease 0.1s;
+		}
 	}
 
 	${ trackBackgroundColor };
@@ -203,8 +205,10 @@ export const ThumbWrapper = styled.span`
 	border-radius: ${ CONFIG.radiusRound };
 	z-index: 3;
 
-	@media not ( prefers-reduced-motion ) {
-		transition: left ease 0.1s;
+	.is-marked & {
+		@media not ( prefers-reduced-motion ) {
+			transition: left ease 0.1s;
+		}
 	}
 
 	${ thumbColor };