@wordpress/components 23.9.0 → 25.0.0

package/src/dropdown-menu-v2/types.ts

@@ -0,0 +1,250 @@
+/**
+ * External dependencies
+ */
+import type * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+
+export type DropdownMenuProps = {
+	/**
+	 * The open state of the dropdown menu when it is initially rendered. Use when
+	 * you do not need to control its open state.
+	 *
+	 */
+	defaultOpen?: DropdownMenuPrimitive.DropdownMenuProps[ 'defaultOpen' ];
+	/**
+	 * The controlled open state of the dropdown menu. Must be used in conjunction
+	 * with `onOpenChange`.
+	 */
+	open?: DropdownMenuPrimitive.DropdownMenuProps[ 'open' ];
+	/**
+	 * Event handler called when the open state of the dropdown menu changes.
+	 */
+	onOpenChange?: DropdownMenuPrimitive.DropdownMenuProps[ 'onOpenChange' ];
+	/**
+	 * The modality of the dropdown menu. When set to true, interaction with
+	 * outside elements will be disabled and only menu content will be visible to
+	 * screen readers.
+	 *
+	 * @default true
+	 */
+	modal?: DropdownMenuPrimitive.DropdownMenuProps[ 'modal' ];
+	/**
+	 * The preferred side of the trigger to render against when open.
+	 * Will be reversed when collisions occur and avoidCollisions is enabled.
+	 *
+	 * @default 'bottom'
+	 */
+	side?: DropdownMenuPrimitive.DropdownMenuContentProps[ 'side' ];
+	/**
+	 * The distance in pixels from the trigger.
+	 *
+	 * @default 0
+	 */
+	sideOffset?: DropdownMenuPrimitive.DropdownMenuContentProps[ 'sideOffset' ];
+	/**
+	 * The preferred alignment against the trigger.
+	 * May change when collisions occur.
+	 *
+	 * @default 'center'
+	 */
+	align?: DropdownMenuPrimitive.DropdownMenuContentProps[ 'align' ];
+	/**
+	 * An offset in pixels from the "start" or "end" alignment options.
+	 *
+	 * @default 0
+	 */
+	alignOffset?: DropdownMenuPrimitive.DropdownMenuContentProps[ 'alignOffset' ];
+	/**
+	 * The trigger button.
+	 */
+	trigger: React.ReactNode;
+	/**
+	 * The contents of the dropdown
+	 */
+	children: React.ReactNode;
+};
+
+export type DropdownSubMenuTriggerProps = {
+	/**
+	 * The contents of the item.
+	 */
+	children: React.ReactNode;
+	/**
+	 * The contents of the item's prefix.
+	 */
+	prefix?: React.ReactNode;
+	/**
+	 * The contents of the item's suffix.
+	 *
+	 * @default The standard chevron icon for a submenu trigger.
+	 */
+	suffix?: React.ReactNode;
+};
+
+export type DropdownSubMenuProps = {
+	/**
+	 * The open state of the submenu when it is initially rendered. Use when you
+	 * do not need to control its open state.
+	 */
+	defaultOpen?: DropdownMenuPrimitive.DropdownMenuSubProps[ 'defaultOpen' ];
+	/**
+	 * The controlled open state of the submenu. Must be used in conjunction with
+	 * `onOpenChange`.
+	 */
+	open?: DropdownMenuPrimitive.DropdownMenuSubProps[ 'open' ];
+	/**
+	 * Event handler called when the open state of the submenu changes.
+	 */
+	onOpenChange?: DropdownMenuPrimitive.DropdownMenuSubProps[ 'onOpenChange' ];
+	/**
+	 * When `true`, prevents the user from interacting with the item.
+	 */
+	disabled?: DropdownMenuPrimitive.DropdownMenuSubTriggerProps[ 'disabled' ];
+	/**
+	 * Optional text used for typeahead purposes for the trigger. By default the typeahead
+	 * behavior will use the `.textContent` of the trigger. Use this when the content
+	 * is complex, or you have non-textual content inside.
+	 */
+	textValue?: DropdownMenuPrimitive.DropdownMenuSubTriggerProps[ 'textValue' ];
+	/**
+	 * The contents rendered inside the trigger. The trigger should be
+	 * an instance of the `DropdownSubMenuTriggerProps` component.
+	 */
+	trigger: React.ReactNode;
+	/**
+	 * The contents of the dropdown sub menu
+	 */
+	children: React.ReactNode;
+};
+
+export type DropdownMenuItemProps = {
+	/**
+	 * When true, prevents the user from interacting with the item.
+	 *
+	 * @default false
+	 */
+	disabled?: DropdownMenuPrimitive.DropdownMenuItemProps[ 'disabled' ];
+	/**
+	 * Event handler called when the user selects an item (via mouse or keyboard).
+	 * Calling `event.preventDefault` in this handler will prevent the dropdown
+	 * menu from closing when selecting that item.
+	 */
+	onSelect?: DropdownMenuPrimitive.DropdownMenuItemProps[ 'onSelect' ];
+	/**
+	 * Optional text used for typeahead purposes. By default the typeahead
+	 * behavior will use the `.textContent` of the item. Use this when the content
+	 * is complex, or you have non-textual content inside.
+	 */
+	textValue?: DropdownMenuPrimitive.DropdownMenuItemProps[ 'textValue' ];
+	/**
+	 * The contents of the item
+	 */
+	children: React.ReactNode;
+	/**
+	 * The contents of the item's prefix
+	 */
+	prefix?: React.ReactNode;
+	/**
+	 * The contents of the item's suffix
+	 */
+	suffix?: React.ReactNode;
+};
+
+export type DropdownMenuCheckboxItemProps = {
+	/**
+	 * The controlled checked state of the item.
+	 * Must be used in conjunction with `onCheckedChange`.
+	 *
+	 * @default false
+	 */
+	checked?: DropdownMenuPrimitive.DropdownMenuCheckboxItemProps[ 'checked' ];
+	/**
+	 * Event handler called when the checked state changes.
+	 */
+	onCheckedChange?: DropdownMenuPrimitive.DropdownMenuCheckboxItemProps[ 'onCheckedChange' ];
+	/**
+	 * When `true`, prevents the user from interacting with the item.
+	 */
+	disabled?: DropdownMenuPrimitive.DropdownMenuCheckboxItemProps[ 'disabled' ];
+	/**
+	 * Event handler called when the user selects an item (via mouse or keyboard).
+	 * Calling `event.preventDefault` in this handler will prevent the dropdown
+	 * 	menu from closing when selecting that item.
+	 */
+	onSelect?: DropdownMenuPrimitive.DropdownMenuCheckboxItemProps[ 'onSelect' ];
+	/**
+	 * Optional text used for typeahead purposes. By default the typeahead
+	 * behavior will use the `.textContent` of the item. Use this when the content
+	 * is complex, or you have non-textual content inside.
+	 */
+	textValue?: DropdownMenuPrimitive.DropdownMenuCheckboxItemProps[ 'textValue' ];
+	/**
+	 * The contents of the checkbox item
+	 */
+	children: React.ReactNode;
+	/**
+	 * The contents of the checkbox item's suffix
+	 */
+	suffix?: React.ReactNode;
+};
+
+export type DropdownMenuRadioGroupProps = {
+	/**
+	 * The value of the selected item in the group.
+	 */
+	value?: DropdownMenuPrimitive.DropdownMenuRadioGroupProps[ 'value' ];
+	/**
+	 * Event handler called when the value changes.
+	 */
+	onValueChange?: DropdownMenuPrimitive.DropdownMenuRadioGroupProps[ 'onValueChange' ];
+	/**
+	 * The contents of the radio group
+	 */
+	children: React.ReactNode;
+};
+
+export type DropdownMenuRadioItemProps = {
+	/**
+	 * The unique value of the item.
+	 */
+	value: DropdownMenuPrimitive.DropdownMenuRadioItemProps[ 'value' ];
+	/**
+	 * When `true`, prevents the user from interacting with the item.
+	 */
+	disabled?: DropdownMenuPrimitive.DropdownMenuRadioItemProps[ 'disabled' ];
+	/**
+	 * Event handler called when the user selects an item (via mouse or keyboard).
+	 * Calling `event.preventDefault` in this handler will prevent the dropdown
+	 * menu from closing when selecting that item.
+	 */
+	onSelect?: DropdownMenuPrimitive.DropdownMenuRadioItemProps[ 'onSelect' ];
+	/**
+	 * Optional text used for typeahead purposes. By default the typeahead
+	 * behavior will use the `.textContent` of the item. Use this when the content
+	 * is complex, or you have non-textual content inside.
+	 */
+	textValue?: DropdownMenuPrimitive.DropdownMenuRadioItemProps[ 'textValue' ];
+	/**
+	 * The contents of the radio item
+	 */
+	children: React.ReactNode;
+	/**
+	 * The contents of the radio item's suffix
+	 */
+	suffix?: React.ReactNode;
+};
+
+export type DropdownMenuLabelProps = {
+	/**
+	 * The contents of the label
+	 */
+	children: React.ReactNode;
+};
+
+export type DropdownMenuGroupProps = {
+	/**
+	 * The contents of the group
+	 */
+	children: React.ReactNode;
+};
+
+export type DropdownMenuSeparatorProps = {};

package/src/form-toggle/style.scss

@@ -44,11 +44,7 @@ $toggle-border-width: 1px;
 	}
 
 	.components-form-toggle__input:focus + .components-form-toggle__track {
-		box-shadow: 0 0 0 2px $white, 0 0 0 (2px + $border-width-focus) $components-color-accent;
-
-		// Windows High Contrast mode will show this outline, but not the box-shadow.
-		outline: 2px solid transparent;
-		outline-offset: 2px;
+		@include button-style-outset__focus($components-color-accent);
 	}
 
 	&.is-checked {

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

@@ -27,6 +27,7 @@ import {
 	StyledLabel,
 } from '../base-control/styles/base-control-styles';
 import { Spacer } from '../spacer';
+import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
 
 const identity = ( value: string ) => value;
 
@@ -69,10 +70,13 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		__experimentalExpandOnFocus = false,
 		__experimentalValidateInput = () => true,
 		__experimentalShowHowTo = true,
-		__next36pxDefaultSize = false,
+		__next40pxDefaultSize = false,
 		__experimentalAutoSelectFirstMatch = false,
 		__nextHasNoMarginBottom = false,
-	} = props;
+	} = useDeprecated36pxDefaultSizeProp< FormTokenFieldProps >(
+		props,
+		'wp.components.FormTokenField'
+	);
 
 	const instanceId = useInstanceId( FormTokenField );
 
@@ -702,7 +706,7 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 					align="center"
 					gap={ 1 }
 					wrap={ true }
-					__next36pxDefaultSize={ __next36pxDefaultSize }
+					__next40pxDefaultSize={ __next40pxDefaultSize }
 					hasTokens={ !! value.length }
 				>
 					{ renderTokensAndInput() }

package/src/form-token-field/styles.ts

@@ -11,22 +11,22 @@ import { Flex } from '../flex';
 import { space } from '../ui/utils/space';
 
 type TokensAndInputWrapperProps = {
-	__next36pxDefaultSize: boolean;
+	__next40pxDefaultSize: boolean;
 	hasTokens: boolean;
 };
 
 const deprecatedPaddings = ( {
-	__next36pxDefaultSize,
+	__next40pxDefaultSize,
 	hasTokens,
 }: TokensAndInputWrapperProps ) =>
-	! __next36pxDefaultSize &&
+	! __next40pxDefaultSize &&
 	css`
 		padding-top: ${ space( hasTokens ? 1 : 0.5 ) };
 		padding-bottom: ${ space( hasTokens ? 1 : 0.5 ) };
 	`;
 
 export const TokensAndInputWrapperFlex = styled( Flex )`
-	padding: 5px ${ space( 1 ) };
+	padding: 7px;
 
 	${ deprecatedPaddings }
 `;

package/src/form-token-field/types.ts

@@ -151,13 +151,20 @@ export interface FormTokenFieldProps
 	 * @default true
 	 */
 	__experimentalShowHowTo?: boolean;
+	/**
+	 * Deprecated. Use `__next40pxDefaultSize` instead.
+	 *
+	 * @default false
+	 * @deprecated
+	 */
+	__next36pxDefaultSize?: boolean;
 	/**
 	 * Start opting into the larger default height that will become the
 	 * default size in a future version.
 	 *
 	 * @default false
 	 */
-	__next36pxDefaultSize?: boolean;
+	__next40pxDefaultSize?: boolean;
 	/**
 	 * If true, the select the first matching suggestion when the user presses
 	 * the Enter key (or space when tokenizeOnSpace is true).

package/src/index.native.js

@@ -94,7 +94,6 @@ export { default as HTMLTextInput } from './mobile/html-text-input';
 export { default as KeyboardAvoidingView } from './mobile/keyboard-avoiding-view';
 export { default as KeyboardAwareFlatList } from './mobile/keyboard-aware-flat-list';
 export { default as Picker } from './mobile/picker';
-export { default as ReadableContentView } from './mobile/readable-content-view';
 export { default as CycleSelectControl } from './mobile/cycle-select-control';
 export { default as Gradient } from './mobile/gradient';
 export { default as ColorSettings } from './mobile/color-settings';

package/src/input-control/styles/input-control-styles.tsx

@@ -270,9 +270,14 @@ const backdropFocusedStyles = ( {
 	let borderColor = isFocused ? COLORS.ui.borderFocus : COLORS.ui.border;
 
 	let boxShadow;
+	let outline;
+	let outlineOffset;
 
 	if ( isFocused ) {
 		boxShadow = `0 0 0 1px ${ COLORS.ui.borderFocus } inset`;
+		// Windows High Contrast mode will show this outline, but not the box-shadow.
+		outline = `2px solid transparent`;
+		outlineOffset = `-2px`;
 	}
 
 	if ( disabled ) {
@@ -284,6 +289,8 @@ const backdropFocusedStyles = ( {
 		borderColor,
 		borderStyle: 'solid',
 		borderWidth: 1,
+		outline,
+		outlineOffset,
 	} );
 };
 

package/src/mobile/bottom-sheet/cell.native.js

@@ -92,6 +92,7 @@ class BottomSheetCell extends Component {
 			accessibilityHint,
 			accessibilityRole,
 			disabled = false,
+			disabledStyle = styles.cellDisabled,
 			activeOpacity,
 			onPress,
 			onLongPress,
@@ -223,11 +224,22 @@ class BottomSheetCell extends Component {
 				styles.cellValue,
 				styles.cellTextDark
 			);
-			const finalStyle = {
+			const textInputStyle = {
 				...cellValueStyle,
 				...valueStyle,
 				...styleRTL,
 			};
+			const placeholderTextColor = disabled
+				? this.props.getStylesFromColorScheme(
+						styles.placeholderColorDisabled,
+						styles.placeholderColorDisabledDark
+				  ).color
+				: styles.placeholderColor.color;
+			const textStyle = {
+				...( disabled && styles.cellDisabled ),
+				...cellValueStyle,
+				...valueStyle,
+			};
 
 			// To be able to show the `middle` ellipsizeMode on editable cells
 			// we show the TextInput just when the user wants to edit the value,
@@ -238,10 +250,10 @@ class BottomSheetCell extends Component {
 				<TextInput
 					ref={ ( c ) => ( this._valueTextInput = c ) }
 					numberOfLines={ 1 }
-					style={ finalStyle }
+					style={ textInputStyle }
 					value={ value }
 					placeholder={ valuePlaceholder }
-					placeholderTextColor={ '#87a6bc' }
+					placeholderTextColor={ placeholderTextColor }
 					onChangeText={ onChangeValue }
 					editable={ isValueEditable }
 					pointerEvents={
@@ -251,11 +263,12 @@ class BottomSheetCell extends Component {
 					onBlur={ finishEditing }
 					onSubmitEditing={ onSubmit }
 					keyboardType={ this.typeToKeyboardType( type, step ) }
+					disabled={ disabled }
 					{ ...valueProps }
 				/>
 			) : (
 				<Text
-					style={ { ...cellValueStyle, ...valueStyle } }
+					style={ textStyle }
 					numberOfLines={ 1 }
 					ellipsizeMode={ 'middle' }
 				>
@@ -418,7 +431,15 @@ class BottomSheetCell extends Component {
 						/>
 					) }
 					{ showValue && getValueComponent() }
-					{ children }
+					<View
+						style={ [
+							disabled && disabledStyle,
+							styles.cellRowContainer,
+						] }
+						pointerEvents={ disabled ? 'none' : 'auto' }
+					>
+						{ children }
+					</View>
 				</View>
 				{ help && (
 					<Text style={ [ cellHelpStyle, styles.placeholderColor ] }>

package/src/mobile/bottom-sheet/range-cell.native.js

@@ -218,6 +218,7 @@ class BottomSheetRangeCell extends Component {
 						activeOpacity={ 1 }
 						accessible={ false }
 						valueStyle={ styles.valueStyle }
+						disabled={ disabled }
 					>
 						<View style={ containerStyle }>
 							{ preview }
@@ -225,7 +226,7 @@ class BottomSheetRangeCell extends Component {
 								testID={ `Slider ${ cellProps.label }` }
 								value={ sliderValue }
 								defaultValue={ defaultValue }
-								disabled={ disabled }
+								disabled={ disabled && ! isIOS }
 								step={ step }
 								minimumValue={ minimumValue }
 								maximumValue={ maximumValue }

package/src/mobile/bottom-sheet/stepper-cell/index.native.js

@@ -144,6 +144,7 @@ class BottomSheetStepperCell extends Component {
 			openUnitPicker,
 			decimalNum,
 			cellContainerStyle,
+			disabled,
 		} = this.props;
 		const { inputValue } = this.state;
 		const isMinValue = value === min;
@@ -215,6 +216,7 @@ class BottomSheetStepperCell extends Component {
 						labelStyle={ labelStyle }
 						leftAlign={ true }
 						separatorType={ separatorType }
+						disabled={ disabled }
 					>
 						<View style={ preview && containerStyle }>
 							{ preview }

package/src/mobile/bottom-sheet/styles.native.scss

@@ -284,7 +284,15 @@
 
 // used in both light and dark modes
 .placeholderColor {
-	color: #87a6bc;
+	color: $gray;
+}
+
+.placeholderColorDisabled {
+	color: lighten($gray, 20%);
+}
+
+.placeholderColorDisabledDark {
+	color: lighten($gray-dark, 10%);
 }
 
 .applyButton {
@@ -317,3 +325,7 @@
 .cellSubLabelTextDark {
 	color: $sub-heading-dark;
 }
+
+.cellDisabled {
+	opacity: 0.3;
+}

package/src/mobile/bottom-sheet/switch-cell.native.js

@@ -12,8 +12,10 @@ import { __, _x, sprintf } from '@wordpress/i18n';
  */
 import Cell from './cell';
 
+const EMPTY_STYLE = {};
+
 export default function BottomSheetSwitchCell( props ) {
-	const { value, onValueChange, ...cellProps } = props;
+	const { value, onValueChange, disabled, ...cellProps } = props;
 
 	const onPress = () => {
 		onValueChange( ! value );
@@ -60,8 +62,14 @@ export default function BottomSheetSwitchCell( props ) {
 			onPress={ onPress }
 			editable={ false }
 			value={ '' }
+			disabled={ disabled }
+			disabledStyle={ EMPTY_STYLE }
 		>
-			<Switch value={ value } onValueChange={ onValueChange } />
+			<Switch
+				value={ value }
+				onValueChange={ onValueChange }
+				disabled={ disabled }
+			/>
 		</Cell>
 	);
 }

package/src/mobile/bottom-sheet-select-control/index.native.js

@@ -22,6 +22,7 @@ const BottomSheetSelectControl = ( {
 	options: items,
 	onChange,
 	value: selectedValue,
+	disabled,
 } ) => {
 	const [ showSubSheet, setShowSubSheet ] = useState( false );
 	const navigation = useNavigation();
@@ -68,6 +69,7 @@ const BottomSheetSelectControl = ( {
 						__( 'Navigates to select %s' ),
 						label
 					) }
+					disabled={ disabled }
 				>
 					<Icon icon={ chevronRight }></Icon>
 				</BottomSheet.Cell>

package/src/mobile/bottom-sheet-text-control/index.native.js

@@ -29,6 +29,7 @@ const BottomSheetTextControl = ( {
 	icon,
 	footerNote,
 	cellPlaceholder,
+	disabled,
 } ) => {
 	const [ showSubSheet, setShowSubSheet ] = useState( false );
 	const navigation = useNavigation();
@@ -62,6 +63,7 @@ const BottomSheetTextControl = ( {
 					onPress={ openSubSheet }
 					value={ initialValue || '' }
 					placeholder={ cellPlaceholder || placeholder || '' }
+					disabled={ disabled }
 				>
 					<Icon icon={ chevronRight }></Icon>
 				</BottomSheet.Cell>

package/src/mobile/global-styles-context/index.native.js

@@ -26,9 +26,20 @@ export const getMergedGlobalStyles = (
 	blockName,
 	fontSizes
 ) => {
+	// Current support for general styles and blocks.
 	const baseGlobalColors = {
-		baseColors: baseGlobalStyles || {},
+		baseColors: {
+			color: baseGlobalStyles?.color,
+			typography: baseGlobalStyles?.typography,
+			elements: {
+				link: baseGlobalStyles?.elements?.link,
+			},
+			blocks: {
+				'core/button': baseGlobalStyles?.blocks?.[ 'core/button' ],
+			},
+		},
 	};
+
 	const blockStyleAttributes = Object.fromEntries(
 		Object.entries( blockAttributes ?? {} ).filter( ( [ key ] ) =>
 			BLOCK_STYLE_ATTRIBUTES.includes( key )

package/src/mobile/link-picker/link-picker-results.native.js

@@ -74,6 +74,9 @@ export default function LinkPickerResults( {
 		return {
 			fetchMoreSuggestions: debounce( fetchMore, REQUEST_DEBOUNCE_DELAY ),
 		};
+		// Disable eslint rule for now, to avoid introducing a regression
+		// (see https://github.com/WordPress/gutenberg/pull/23922#discussion_r1170634879).
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
 	// Prevent setting state when unmounted.

package/src/modal/style.scss

@@ -135,7 +135,7 @@
 
 	&.hide-header {
 		margin-top: 0;
-		padding-top: $grid-unit-30;
+		padding-top: $grid-unit-40;
 	}
 
 	&.is-scrollable:focus-visible {

package/src/navigable-container/README.md

@@ -2,38 +2,49 @@
 
 `NavigableContainer` is a React component to render a container navigable using the keyboard. Only things that are focusable can be navigated to. It will currently always be a `div`.
 
-`NavigableContainer` is exported as two classes: `NavigableMenu` and `TabbableContainer`. `NavigableContainer` itself is **not** exported. `NavigableMenu` and `TabbableContainer` have the props listed below. Any other props will be passed through to the `div`.
+`NavigableContainer` is exported as two components: `NavigableMenu` and `TabbableContainer`. `NavigableContainer` itself is **not** exported. `NavigableMenu` and `TabbableContainer` have the props listed below. Any other props will be passed through to the `div`.
 
 ---
 
 ## Props
 
-These are the props that `NavigableMenu` and `TabbableContainer`. Any props which are specific to one class are labelled appropriately.
+These are the props that `NavigableMenu` and `TabbableContainer`. Any props which are specific to one component are labelled appropriately.
 
-### onNavigate
+### `cycle`: `boolean`
 
-A callback invoked when the menu navigates to one of its children passing the index and child as an argument
+A boolean which tells the component whether or not to cycle from the end back to the beginning and vice versa.
 
--   Type: `Function`
 -   Required: No
+-   default: `true`
 
-### cycle
+### `eventToOffset`: `( event: KeyboardEvent ) => -1 | 0 | 1 | undefined`
 
-A boolean which tells the component whether or not to cycle from the end back to the beginning and vice versa.
+(TabbableContainer only)
+Gets an offset, given an event.
+
+-   Required: No
+
+### `onKeydown`: `( event: KeyboardEvent ) => void`
+
+A callback invoked on the keydown event.
+
+-   Required: No
+
+### `onNavigate`: `( index: number, focusable: HTMLElement ) => void`
+
+A callback invoked when the menu navigates to one of its children passing the index and child as an argument
 
--   Type: `Boolean`
 -   Required: No
--   default: true
 
-### orientation (NavigableMenu only)
+### `orientation`: `'vertical' | 'horizontal' | 'both'`
 
-The orientation of the menu. It could be "vertical", "horizontal" or "both"
+(NavigableMenu only)
+The orientation of the menu. It could be "vertical", "horizontal", or "both".
 
--   Type: `String`
 -   Required: No
 -   Default: `"vertical"`
 
-## Classes
+## Components
 
 ### NavigableMenu