@wordpress/components 30.1.0 → 30.2.1-next.0f6f9d12c.0

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

@@ -115,28 +115,36 @@ DropdownSelector.args = {
 };
 
 /**
- * The rendered output of each suggestion can be customized by passing a
- * render function to the `__experimentalRenderItem` prop. (This is still an experimental feature
- * and is subject to change.)
+ * The rendered content of each token can be customized by passing a
+ * render function to the `displayTransform` prop.
+ *
+ * Similarly, each suggestion can be customized by passing a
+ * render function to the `__experimentalRenderItem` prop. (This is still an
+ * experimental feature and is subject to change.)
  */
-export const WithCustomRenderItem: StoryFn< typeof FormTokenField > =
+export const WithCustomRenderedItems: StoryFn< typeof FormTokenField > =
 	DefaultTemplate.bind( {} );
-WithCustomRenderItem.args = {
+WithCustomRenderedItems.args = {
 	...Default.args,
+	displayTransform: ( token ) => `📍 ${ token }`,
 	__experimentalRenderItem: ( { item } ) => (
 		<div>{ `${ item } — a nice place to visit` }</div>
 	),
+	__experimentalExpandOnFocus: true,
 };
 
 /**
  * Only values for which the `__experimentalValidateInput` function returns
  * `true` will be tokenized. (This is still an experimental feature and is
  * subject to change.)
+ *
+ * In this example, the user can only add tokens that are already in the list.
  */
-export const WithValidatedInput: StoryFn< typeof FormTokenField > =
+export const ValidateNewTokens: StoryFn< typeof FormTokenField > =
 	DefaultTemplate.bind( {} );
-WithValidatedInput.args = {
+ValidateNewTokens.args = {
 	...Default.args,
 	__experimentalValidateInput: ( input: string ) =>
 		continents.includes( input ),
+	__experimentalExpandOnFocus: true,
 };

package/src/gradient-picker/stories/index.story.tsx

@@ -64,6 +64,18 @@ const GRADIENTS = [
 			'linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)',
 		slug: 'cool-to-warm-spectrum',
 	},
+	{
+		name: 'HSL blue to purple',
+		gradient:
+			'linear-gradient(135deg,hsl(200, 100%, 50%) 0%,hsl(280, 100%, 60%) 100%)',
+		slug: 'hsl-blue-to-purple',
+	},
+	{
+		name: 'HSLA green to red',
+		gradient:
+			'linear-gradient(135deg,hsla(120, 100%, 40%, 0.85) 0%,hsla(0, 100%, 50%, 0.85) 100%)',
+		slug: 'hsla-green-to-red',
+	},
 ];
 
 const Template: StoryFn< typeof GradientPicker > = ( {
@@ -103,3 +115,39 @@ MultipleOrigins.args = {
 		{ name: 'Origin 2', gradients: GRADIENTS },
 	],
 };
+
+export const CSSVariables: StoryFn< typeof GradientPicker > = ( args ) => {
+	return (
+		<div
+			style={ {
+				'--red': '#f00',
+				'--yellow': '#ff0',
+				'--blue': '#00f',
+			} }
+		>
+			<Template { ...args } />
+		</div>
+	);
+};
+CSSVariables.args = {
+	...Default.args,
+	gradients: [
+		{
+			name: 'Red to Yellow',
+			gradient:
+				'linear-gradient(135deg,var(--red) 0%,var(--yellow) 100%)',
+			slug: 'red-to-yellow',
+		},
+		{
+			name: 'Yellow to Blue',
+			gradient:
+				'linear-gradient(135deg,var(--yellow) 0%,var(--blue) 100%)',
+			slug: 'yellow-to-blue',
+		},
+		{
+			name: 'Blue to Red',
+			gradient: 'linear-gradient(135deg,var(--blue) 0%,var(--red) 100%)',
+			slug: 'blue-to-red',
+		},
+	],
+};

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

@@ -11,7 +11,7 @@ import { Grid } from '..';
 
 const meta: Meta< typeof Grid > = {
 	component: Grid,
-	title: 'Components (Experimental)/Grid',
+	title: 'Components/Grid',
 	argTypes: {
 		as: { control: { type: 'text' } },
 		align: { control: { type: 'text' } },
@@ -30,6 +30,7 @@ const meta: Meta< typeof Grid > = {
 		templateColumns: { control: { type: 'text' } },
 		templateRows: { control: { type: 'text' } },
 	},
+	tags: [ 'status-experimental' ],
 	parameters: {
 		controls: {
 			expanded: true,

package/src/h-stack/stories/e2e/index.story.tsx

@@ -11,7 +11,7 @@ import { HStack } from '../..';
 
 const meta: Meta< typeof HStack > = {
 	component: HStack,
-	title: 'Components (Experimental)/HStack',
+	title: 'Components/HStack',
 };
 export default meta;
 

package/src/h-stack/stories/index.story.tsx

@@ -42,8 +42,8 @@ const JUSTIFICATIONS = {
 
 const meta: Meta< typeof HStack > = {
 	component: HStack,
-	title: 'Components (Experimental)/Layout/HStack',
-	id: 'components-experimental-hstack',
+	title: 'Components/Layout/HStack',
+	id: 'components-hstack',
 	argTypes: {
 		as: {
 			control: false,
@@ -70,6 +70,7 @@ const meta: Meta< typeof HStack > = {
 			control: { type: 'text' },
 		},
 	},
+	tags: [ 'status-experimental' ],
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },

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

@@ -10,8 +10,8 @@ import { Heading } from '..';
 
 const meta: Meta< typeof Heading > = {
 	component: Heading,
-	title: 'Components (Experimental)/Typography/Heading',
-	id: 'components-experimental-heading',
+	title: 'Components/Typography/Heading',
+	id: 'components-heading',
 	argTypes: {
 		as: { control: { type: 'text' } },
 		color: { control: { type: 'color' } },
@@ -25,6 +25,7 @@ const meta: Meta< typeof Heading > = {
 		},
 		weight: { control: { type: 'text' } },
 	},
+	tags: [ 'status-experimental' ],
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },

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

@@ -16,8 +16,8 @@ import { InputControlSuffixWrapper } from '../input-suffix-wrapper';
 import Button from '../../button';
 
 const meta: Meta< typeof InputControl > = {
-	title: 'Components (Experimental)/Selection & Input/InputControl',
-	id: 'components-experimental-inputcontrol',
+	title: 'Components/Selection & Input/Common/InputControl',
+	id: 'components-inputcontrol',
 	component: InputControl,
 	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 	subcomponents: { InputControlPrefixWrapper, InputControlSuffixWrapper },
@@ -30,6 +30,7 @@ const meta: Meta< typeof InputControl > = {
 		type: { control: { type: 'text' } },
 		value: { control: { disable: true } },
 	},
+	tags: [ 'status-experimental' ],
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },

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

@@ -15,11 +15,12 @@ const meta: Meta< typeof ItemGroup > = {
 	component: ItemGroup,
 	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 	subcomponents: { Item },
-	title: 'Components (Experimental)/ItemGroup',
+	title: 'Components/ItemGroup',
 	argTypes: {
 		as: { control: false },
 		children: { control: false },
 	},
+	tags: [ 'status-experimental' ],
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },

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

@@ -24,7 +24,7 @@ import type { Props } from '../types';
 
 const meta: Meta< typeof Menu > = {
 	id: 'components-menu',
-	title: 'Components (Experimental)/Actions/Menu',
+	title: 'Components/Actions/Menu',
 	component: Menu,
 	subcomponents: {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170

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

@@ -14,8 +14,8 @@ import { useState } from '@wordpress/element';
 import NumberControl from '..';
 
 const meta: Meta< typeof NumberControl > = {
-	title: 'Components (Experimental)/Selection & Input/NumberControl',
-	id: 'components-experimental-numbercontrol',
+	title: 'Components/Selection & Input/Common/NumberControl',
+	id: 'components-numbercontrol',
 	component: NumberControl,
 	argTypes: {
 		onChange: { action: 'onChange' },
@@ -25,6 +25,7 @@ const meta: Meta< typeof NumberControl > = {
 		type: { control: { type: 'text' } },
 		value: { control: false },
 	},
+	tags: [ 'status-experimental' ],
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },

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

@@ -16,7 +16,7 @@ import { Scrollable } from '..';
 
 const meta: Meta< typeof Scrollable > = {
 	component: Scrollable,
-	title: 'Components (Experimental)/Scrollable',
+	title: 'Components/Scrollable',
 	argTypes: {
 		as: {
 			control: { type: 'text' },
@@ -25,6 +25,7 @@ const meta: Meta< typeof Scrollable > = {
 			control: false,
 		},
 	},
+	tags: [ 'status-experimental' ],
 	parameters: {
 		controls: {
 			expanded: true,

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

@@ -31,7 +31,7 @@ const controls = [
 
 const meta: Meta< typeof Spacer > = {
 	component: Spacer,
-	title: 'Components (Experimental)/Spacer',
+	title: 'Components/Spacer',
 	argTypes: {
 		as: { control: { type: 'text' } },
 		children: {
@@ -39,6 +39,7 @@ const meta: Meta< typeof Spacer > = {
 		},
 		...controls,
 	},
+	tags: [ 'status-experimental' ],
 	parameters: {
 		controls: {
 			expanded: true,

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

@@ -11,11 +11,12 @@ import { Text } from '../../text';
 
 const meta: Meta< typeof Surface > = {
 	component: Surface,
-	title: 'Components (Experimental)/Surface',
+	title: 'Components/Surface',
 	argTypes: {
 		children: { control: false },
 		as: { control: { type: 'text' } },
 	},
+	tags: [ 'status-experimental' ],
 	parameters: {
 		controls: {
 			expanded: true,

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

@@ -10,8 +10,8 @@ import { Text } from '../component';
 
 const meta: Meta< typeof Text > = {
 	component: Text,
-	title: 'Components (Experimental)/Typography/Text',
-	id: 'components-experimental-text',
+	title: 'Components/Typography/Text',
+	id: 'components-text',
 	argTypes: {
 		as: { control: { type: 'text' } },
 		color: { control: { type: 'color' } },
@@ -26,6 +26,7 @@ const meta: Meta< typeof Text > = {
 		},
 		weight: { control: { type: 'text' } },
 	},
+	tags: [ 'status-experimental' ],
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },

package/src/toggle-group-control/stories/index.story.tsx

@@ -27,13 +27,14 @@ const meta: Meta< typeof ToggleGroupControl > = {
 	component: ToggleGroupControl,
 	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 	subcomponents: { ToggleGroupControlOption, ToggleGroupControlOptionIcon },
-	title: 'Components (Experimental)/Selection & Input/ToggleGroupControl',
-	id: 'components-experimental-togglegroupcontrol',
+	title: 'Components/Selection & Input/Common/ToggleGroupControl',
+	id: 'components-togglegroupcontrol',
 	argTypes: {
 		help: { control: { type: 'text' } },
 		onChange: { action: 'onChange' },
 		value: { control: false },
 	},
+	tags: [ 'status-experimental' ],
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },

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

@@ -26,7 +26,7 @@ import UnitControl from '../../unit-control';
 import { createSlotFill, Provider as SlotFillProvider } from '../../slot-fill';
 
 const meta: Meta< typeof ToolsPanel > = {
-	title: 'Components (Experimental)/ToolsPanel',
+	title: 'Components/ToolsPanel',
 	component: ToolsPanel,
 	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 	subcomponents: { ToolsPanelItem },
@@ -36,6 +36,7 @@ const meta: Meta< typeof ToolsPanel > = {
 		panelId: { control: false },
 		resetAll: { action: 'resetAll' },
 	},
+	tags: [ 'status-experimental' ],
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
 		controls: {

package/src/tree-grid/stories/index.story.tsx

@@ -16,14 +16,15 @@ import { Button } from '../../button';
 import InputControl from '../../input-control';
 
 const meta: Meta< typeof TreeGrid > = {
-	title: 'Components (Experimental)/Navigation/TreeGrid',
-	id: 'components-experimental-treegrid',
+	title: 'Components/Navigation/TreeGrid',
+	id: 'components-treegrid',
 	component: TreeGrid,
 	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 	subcomponents: { TreeGridRow, TreeGridCell },
 	argTypes: {
 		children: { control: false },
 	},
+	tags: [ 'status-experimental' ],
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },

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

@@ -10,12 +10,13 @@ import { Truncate } from '..';
 
 const meta: Meta< typeof Truncate > = {
 	component: Truncate,
-	title: 'Components (Experimental)/Typography/Truncate',
-	id: 'components-experimental-truncate',
+	title: 'Components/Typography/Truncate',
+	id: 'components-truncate',
 	argTypes: {
 		children: { control: { type: 'text' } },
 		as: { control: { type: 'text' } },
 	},
+	tags: [ 'status-experimental' ],
 	parameters: {
 		controls: {
 			expanded: true,

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

@@ -16,8 +16,8 @@ import { CSS_UNITS } from '../utils';
 
 const meta: Meta< typeof UnitControl > = {
 	component: UnitControl,
-	title: 'Components (Experimental)/Selection & Input/UnitControl',
-	id: 'components-experimental-unitcontrol',
+	title: 'Components/Selection & Input/Common/UnitControl',
+	id: 'components-unitcontrol',
 	argTypes: {
 		__unstableInputWidth: { control: { type: 'text' } },
 		__unstableStateReducer: { control: false },
@@ -26,6 +26,7 @@ const meta: Meta< typeof UnitControl > = {
 		prefix: { control: { type: 'text' } },
 		value: { control: false },
 	},
+	tags: [ 'status-experimental' ],
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
 		controls: {

package/src/v-stack/stories/e2e/index.story.tsx

@@ -11,7 +11,7 @@ import { VStack } from '../..';
 
 const meta: Meta< typeof VStack > = {
 	component: VStack,
-	title: 'Components (Experimental)/VStack',
+	title: 'Components/VStack',
 };
 export default meta;
 

package/src/v-stack/stories/index.story.tsx

@@ -25,8 +25,8 @@ const ALIGNMENTS = {
 
 const meta: Meta< typeof VStack > = {
 	component: VStack,
-	title: 'Components (Experimental)/Layout/VStack',
-	id: 'components-experimental-vstack',
+	title: 'Components/Layout/VStack',
+	id: 'components-vstack',
 	argTypes: {
 		alignment: {
 			control: { type: 'select' },
@@ -38,6 +38,7 @@ const meta: Meta< typeof VStack > = {
 		justify: { control: { type: 'text' } },
 		spacing: { control: { type: 'text' } },
 	},
+	tags: [ 'status-experimental' ],
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },

package/src/validated-form-controls/components/stories/checkbox-control.story.tsx

@@ -15,7 +15,8 @@ import { ValidatedCheckboxControl } from '../checkbox-control';
 import { formDecorator } from './story-utils';
 
 const meta: Meta< typeof ValidatedCheckboxControl > = {
-	title: 'Components (Experimental)/Validated Form Controls/ValidatedCheckboxControl',
+	title: 'Components/Selection & Input/Validated Form Controls/ValidatedCheckboxControl',
+	id: 'components-validatedcheckboxcontrol',
 	component: ValidatedCheckboxControl,
 	tags: [ 'status-private' ],
 	decorators: formDecorator,

package/src/validated-form-controls/components/stories/combobox-control.story.tsx

@@ -15,7 +15,8 @@ import { ValidatedComboboxControl } from '../combobox-control';
 import { formDecorator } from './story-utils';
 
 const meta: Meta< typeof ValidatedComboboxControl > = {
-	title: 'Components (Experimental)/Validated Form Controls/ValidatedComboboxControl',
+	title: 'Components/Selection & Input/Validated Form Controls/ValidatedComboboxControl',
+	id: 'components-validatedcomboboxcontrol',
 	component: ValidatedComboboxControl,
 	tags: [ 'status-private' ],
 	decorators: formDecorator,

package/src/validated-form-controls/components/stories/custom-select-control.story.tsx

@@ -15,7 +15,8 @@ import { ValidatedCustomSelectControl } from '../custom-select-control';
 import { formDecorator } from './story-utils';
 
 const meta: Meta< typeof ValidatedCustomSelectControl > = {
-	title: 'Components (Experimental)/Validated Form Controls/ValidatedCustomSelectControl',
+	title: 'Components/Selection & Input/Validated Form Controls/ValidatedCustomSelectControl',
+	id: 'components-validatedcustomselectcontrol',
 	component: ValidatedCustomSelectControl,
 	tags: [ 'status-private' ],
 	decorators: formDecorator,

package/src/validated-form-controls/components/stories/input-control.story.tsx

@@ -22,7 +22,8 @@ import InputControlSuffixWrapper from '../../../input-control/input-suffix-wrapp
 import { Button } from '../../../button';
 
 const meta: Meta< typeof ValidatedInputControl > = {
-	title: 'Components (Experimental)/Validated Form Controls/ValidatedInputControl',
+	title: 'Components/Selection & Input/Validated Form Controls/ValidatedInputControl',
+	id: 'components-validatedinputcontrol',
 	component: ValidatedInputControl,
 	tags: [ 'status-private' ],
 	decorators: formDecorator,

package/src/validated-form-controls/components/stories/number-control.story.tsx

@@ -15,7 +15,8 @@ import { ValidatedNumberControl } from '../number-control';
 import { formDecorator } from './story-utils';
 
 const meta: Meta< typeof ValidatedNumberControl > = {
-	title: 'Components (Experimental)/Validated Form Controls/ValidatedNumberControl',
+	title: 'Components/Selection & Input/Validated Form Controls/ValidatedNumberControl',
+	id: 'components-validatednumbercontrol',
 	component: ValidatedNumberControl,
 	tags: [ 'status-private' ],
 	decorators: formDecorator,

package/src/validated-form-controls/components/stories/overview.mdx

@@ -2,7 +2,7 @@ import { ArgTypes, Meta, Stories } from '@storybook/blocks';
 import * as OverviewStories from './overview.story';
 import { ValidatedInputControl } from '..';
 
-<Meta of={ OverviewStories } title="Components (Private)/Validated Form Controls/Overview" />
+<Meta of={ OverviewStories } title="Components/Selection & Input/Validated Form Controls/Overview" />
 
 # Validated Form Controls
 

package/src/validated-form-controls/components/stories/overview.story.tsx

@@ -16,8 +16,8 @@ import { formDecorator } from './story-utils';
 import type { ControlWithError } from '../../control-with-error';
 
 const meta: Meta< typeof ControlWithError > = {
-	title: 'Components (Experimental)/Validated Form Controls/Overview',
-	tags: [ 'status-private' ],
+	title: 'Components/Selection & Input/Validated Form Controls/Overview',
+	id: 'components-validated-form-controls-overview',
 	decorators: formDecorator,
 };
 export default meta;

package/src/validated-form-controls/components/stories/radio-control.story.tsx

@@ -15,7 +15,8 @@ import { ValidatedRadioControl } from '../radio-control';
 import { formDecorator } from './story-utils';
 
 const meta: Meta< typeof ValidatedRadioControl > = {
-	title: 'Components (Experimental)/Validated Form Controls/ValidatedRadioControl',
+	title: 'Components/Selection & Input/Validated Form Controls/ValidatedRadioControl',
+	id: 'components-validatedradiocontrol',
 	component: ValidatedRadioControl,
 	tags: [ 'status-private' ],
 	decorators: formDecorator,

package/src/validated-form-controls/components/stories/range-control.story.tsx

@@ -15,7 +15,8 @@ import { formDecorator } from './story-utils';
 import { ValidatedRangeControl } from '../range-control';
 
 const meta: Meta< typeof ValidatedRangeControl > = {
-	title: 'Components (Experimental)/Validated Form Controls/ValidatedRangeControl',
+	title: 'Components/Selection & Input/Validated Form Controls/ValidatedRangeControl',
+	id: 'components-validatedrangecontrol',
 	component: ValidatedRangeControl,
 	tags: [ 'status-private' ],
 	decorators: formDecorator,

package/src/validated-form-controls/components/stories/select-control.story.tsx

@@ -15,7 +15,8 @@ import { ValidatedSelectControl } from '../select-control';
 import { formDecorator } from './story-utils';
 
 const meta: Meta< typeof ValidatedSelectControl > = {
-	title: 'Components (Experimental)/Validated Form Controls/ValidatedSelectControl',
+	title: 'Components/Selection & Input/Validated Form Controls/ValidatedSelectControl',
+	id: 'components-validatedselectcontrol',
 	component: ValidatedSelectControl,
 	tags: [ 'status-private' ],
 	decorators: formDecorator,

package/src/validated-form-controls/components/stories/text-control.story.tsx

@@ -15,7 +15,8 @@ import { formDecorator } from './story-utils';
 import { ValidatedTextControl } from '../text-control';
 
 const meta: Meta< typeof ValidatedTextControl > = {
-	title: 'Components (Experimental)/Validated Form Controls/ValidatedTextControl',
+	title: 'Components/Selection & Input/Validated Form Controls/ValidatedTextControl',
+	id: 'components-validatedtextcontrol',
 	component: ValidatedTextControl,
 	tags: [ 'status-private' ],
 	decorators: formDecorator,

package/src/validated-form-controls/components/stories/textarea-control.story.tsx

@@ -14,7 +14,8 @@ import { formDecorator } from './story-utils';
 import { ValidatedTextareaControl } from '../textarea-control';
 
 const meta: Meta< typeof ValidatedTextareaControl > = {
-	title: 'Components (Experimental)/Validated Form Controls/ValidatedTextareaControl',
+	title: 'Components/Selection & Input/Validated Form Controls/ValidatedTextareaControl',
+	id: 'components-validatedtextareacontrol',
 	component: ValidatedTextareaControl,
 	tags: [ 'status-private' ],
 	decorators: formDecorator,

package/src/validated-form-controls/components/stories/toggle-control.story.tsx

@@ -15,7 +15,8 @@ import { formDecorator } from './story-utils';
 import { ValidatedToggleControl } from '../toggle-control';
 
 const meta: Meta< typeof ValidatedToggleControl > = {
-	title: 'Components (Experimental)/Validated Form Controls/ValidatedToggleControl',
+	title: 'Components/Selection & Input/Validated Form Controls/ValidatedToggleControl',
+	id: 'components-validatedtogglecontrol',
 	component: ValidatedToggleControl,
 	tags: [ 'status-private' ],
 	decorators: formDecorator,

package/src/validated-form-controls/components/stories/toggle-group-control.story.tsx

@@ -16,7 +16,8 @@ import { ValidatedToggleGroupControl } from '../toggle-group-control';
 import { ToggleGroupControlOption } from '../../../toggle-group-control';
 
 const meta: Meta< typeof ValidatedToggleGroupControl > = {
-	title: 'Components (Experimental)/Validated Form Controls/ValidatedToggleGroupControl',
+	title: 'Components/Selection & Input/Validated Form Controls/ValidatedToggleGroupControl',
+	id: 'components-validatedtogglegroupcontrol',
 	component: ValidatedToggleGroupControl,
 	tags: [ 'status-private' ],
 	decorators: formDecorator,

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

@@ -10,11 +10,12 @@ import { View } from '..';
 
 const meta: Meta< typeof View > = {
 	component: View,
-	title: 'Components (Experimental)/View',
+	title: 'Components/View',
 	argTypes: {
 		as: { control: false },
 		children: { control: { type: 'text' } },
 	},
+	tags: [ 'status-experimental' ],
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },

package/src/z-stack/stories/index.story.tsx

@@ -13,11 +13,12 @@ import { ZStack } from '..';
 
 const meta: Meta< typeof ZStack > = {
 	component: ZStack,
-	title: 'Components (Experimental)/ZStack',
+	title: 'Components/ZStack',
 	argTypes: {
 		as: { control: { type: 'text' } },
 		children: { control: false },
 	},
+	tags: [ 'status-experimental' ],
 	parameters: {
 		controls: {
 			expanded: true,