@wordpress/components 32.1.1-next.v.0 → 32.2.0

package/src/avatar-group/styles.scss

@@ -0,0 +1,32 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+
+.components-avatar-group {
+	display: flex;
+	align-items: center;
+
+	// Overlap subsequent avatars.
+	> .components-avatar + .components-avatar {
+		margin-inline-start: -$grid-unit-10;
+	}
+
+	// Stack earlier avatars on top of later ones so the overlap
+	// is visually correct, and elevate on hover for badge expansion.
+	> .components-avatar {
+		position: relative;
+
+		@for $i from 1 through 10 {
+			&:nth-child(#{$i}) {
+				z-index: #{11 - $i};
+			}
+		}
+	}
+}
+
+.components-avatar-group__overflow {
+	margin-inline-start: $grid-unit-05;
+	font-size: $font-size-small;
+	line-height: $font-line-height-small;
+	color: $gray-900;
+	white-space: nowrap;
+}

package/src/avatar-group/types.ts

@@ -0,0 +1,13 @@
+export type AvatarGroupProps = {
+	/**
+	 * Maximum number of avatars to display before showing an
+	 * overflow indicator.
+	 *
+	 * @default 3
+	 */
+	max?: number;
+	/**
+	 * Avatar elements to display in the group.
+	 */
+	children: React.ReactNode;
+};

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

@@ -13,6 +13,13 @@ const meta: Meta< typeof Badge > = {
 	title: 'Components/Containers/Badge',
 	id: 'components-badge',
 	tags: [ 'status-private' ],
+	parameters: {
+		componentStatus: {
+			status: 'use-with-caution',
+			whereUsed: 'global',
+			notes: 'Will be superseded by `Badge` in `@wordpress/ui`, but continue using for now.',
+		},
+	},
 };
 
 export default meta;

package/src/base-control/README.md

@@ -4,7 +4,7 @@
 
 <p class="callout callout-info">See the <a href="https://wordpress.github.io/gutenberg/?path=/docs/components-basecontrol--docs">WordPress Storybook</a> for more detailed, interactive documentation.</p>
 
-`BaseControl` is a component used to generate labels and help text for components handling user inputs.
+`BaseControl` is a low-level component used to generate labels and help text for components handling user inputs.
 
 ```jsx
 import { BaseControl, useBaseControlProps } from '@wordpress/components';

package/src/base-control/index.tsx

@@ -96,7 +96,7 @@ const UnforwardedVisualLabel = (
 export const VisualLabel = forwardRef( UnforwardedVisualLabel );
 
 /**
- * `BaseControl` is a component used to generate labels and help text for components handling user inputs.
+ * `BaseControl` is a low-level component used to generate labels and help text for components handling user inputs.
  *
  * ```jsx
  * import { BaseControl, useBaseControlProps } from '@wordpress/components';

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

@@ -24,6 +24,11 @@ const meta: Meta< typeof BaseControl > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+			notes: 'Will be superseded by `Field` in `@wordpress/ui`, but continue using for now.',
+		},
 	},
 };
 export default meta;

package/src/border-box-control/stories/index.story.tsx

@@ -25,6 +25,10 @@ const meta: Meta< typeof BorderBoxControl > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'editor',
+		},
 	},
 };
 export default meta;

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

@@ -28,6 +28,10 @@ const meta: Meta< typeof BorderControl > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'editor',
+		},
 	},
 };
 export default meta;

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

@@ -26,6 +26,11 @@ const meta: Meta< typeof BoxControl > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'use-with-caution',
+			whereUsed: 'editor',
+			notes: 'This component is a fallback for themes that do not supply spacing presets. Most of the time `SpacingSizesControl` from `@wordpress/block-editor` is used instead.',
+		},
 	},
 };
 export default meta;

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

@@ -52,6 +52,11 @@ const meta: Meta< typeof Button > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+			notes: 'Will be superseded by `Button` in `@wordpress/ui`, but continue using for now.',
+		},
 	},
 };
 export default meta;

package/src/button/style.scss

@@ -46,8 +46,10 @@
 	// See https://github.com/WordPress/gutenberg/issues/13267 for more context on these selectors.
 	&:focus:not(:active) {
 		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
+	}
 
-		// Windows High Contrast mode will show this outline, but not the box-shadow.
+	// Windows High Contrast mode will show this outline, but not the box-shadow.
+	&:focus {
 		outline: 3px solid transparent;
 	}
 
@@ -378,8 +380,10 @@
 
 		&:focus:not(:active) {
 			box-shadow: inset 0 0 0 1px $components-color-background, 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
+		}
 
-			// Windows High Contrast mode will show this outline, but not the box-shadow.
+		// Windows High Contrast mode will show this outline, but not the box-shadow.
+		&:focus {
 			outline: 2px solid transparent;
 		}
 	}

package/src/calendar/style.scss

@@ -4,7 +4,8 @@
 
 /* Root of the component. */
 // Internal variables
-$wp-components-calendar-outline-focus: var(--wp-admin-border-width-focus) solid $components-color-accent;
+$wp-components-calendar-outline-focus: var(--wp-admin-border-width-focus)
+	solid $components-color-accent;
 $wp-components-calendar-button-height: $grid-unit-40;
 $wp-components-calendar-button-width: $grid-unit-40;
 $wp-components-calendar-nav-height: $grid-unit-40;
@@ -39,7 +40,8 @@ $wp-components-calendar-preview-border-color: color-mix(in srgb, $components-col
 	// date follows the same color as the button's text, since the button
 	// inherits its text color.
 	&:has(.components-calendar__day-button:disabled) {
-		color: $components-color-disabled;
+		// Use a lighter shade of gray for less visual prominence.
+		color: $components-color-gray-400;
 	}
 	&:has(.components-calendar__day-button:hover:not(:disabled)),
 	&:has(.components-calendar__day-button:focus-visible) {

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

@@ -36,6 +36,11 @@ const meta: Meta< typeof Card > = {
 			expanded: true,
 		},
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'use-with-caution',
+			whereUsed: 'global',
+			notes: 'Design is in flux, and may differ from the version used in `@wordpress/dataviews`.',
+		},
 	},
 };
 

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

@@ -8,8 +8,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-card__body components-card-body css-12jqy32-PolymorphicDiv-Body-borderRadius-medium e19lxcc00"
-+     class="components-scrollable components-card__body components-card-body css-26nv7r-PolymorphicDiv-Scrollable-scrollableScrollbar-scrollY-Body-borderRadius-medium e19lxcc00"
+-     class="components-card__body components-card-body css-1gg1viu-PolymorphicDiv-Body-borderRadius-medium e19lxcc00"
++     class="components-scrollable components-card__body components-card-body css-9p6d97-PolymorphicDiv-Scrollable-scrollableScrollbar-scrollY-Body-borderRadius-medium e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="CardBody"
     >
@@ -25,8 +25,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-card__body components-card-body css-12jqy32-PolymorphicDiv-Body-borderRadius-medium e19lxcc00"
-+     class="components-card__body components-card-body css-1j7lja1-PolymorphicDiv-Body-borderRadius-medium-shady e19lxcc00"
+-     class="components-card__body components-card-body css-1gg1viu-PolymorphicDiv-Body-borderRadius-medium e19lxcc00"
++     class="components-card__body components-card-body css-p7byxx-PolymorphicDiv-Body-borderRadius-medium-shady e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="CardBody"
     >
@@ -42,8 +42,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-flex components-card__footer components-card-footer css-19sc0cg-PolymorphicDiv-Flex-base-ItemsRow-Footer-borderRadius-borderColor-medium e19lxcc00"
-+     class="components-flex components-card__footer components-card-footer css-14budie-PolymorphicDiv-Flex-base-ItemsRow-Footer-borderRadius-borderColor-medium-shady e19lxcc00"
+-     class="components-flex components-card__footer components-card-footer css-1s5uzde-PolymorphicDiv-Flex-base-ItemsRow-Footer-borderRadius-borderColor-medium e19lxcc00"
++     class="components-flex components-card__footer components-card-footer css-12kx59h-PolymorphicDiv-Flex-base-ItemsRow-Footer-borderRadius-borderColor-medium-shady e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="CardFooter"
     >
@@ -59,8 +59,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-flex components-card__footer components-card-footer css-19sc0cg-PolymorphicDiv-Flex-base-ItemsRow-Footer-borderRadius-borderColor-medium e19lxcc00"
-+     class="components-flex components-card__footer components-card-footer css-2io175-PolymorphicDiv-Flex-base-ItemsRow-Footer-borderRadius-borderColor-medium e19lxcc00"
+-     class="components-flex components-card__footer components-card-footer css-1s5uzde-PolymorphicDiv-Flex-base-ItemsRow-Footer-borderRadius-borderColor-medium e19lxcc00"
++     class="components-flex components-card__footer components-card-footer css-11v2u4y-PolymorphicDiv-Flex-base-ItemsRow-Footer-borderRadius-borderColor-medium e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="CardFooter"
     >
@@ -76,8 +76,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-flex components-card__header components-card-header css-1qwshfy-PolymorphicDiv-Flex-base-ItemsRow-Header-borderRadius-borderColor-medium e19lxcc00"
-+     class="components-flex components-card__header components-card-header css-1bzc8bz-PolymorphicDiv-Flex-base-ItemsRow-Header-borderRadius-borderColor-medium-shady e19lxcc00"
+-     class="components-flex components-card__header components-card-header css-1hlwlpa-PolymorphicDiv-Flex-base-ItemsRow-Header-borderRadius-borderColor-medium e19lxcc00"
++     class="components-flex components-card__header components-card-header css-lljjlu-PolymorphicDiv-Flex-base-ItemsRow-Header-borderRadius-borderColor-medium-shady e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="CardHeader"
     >
@@ -93,19 +93,19 @@ Snapshot Diff:
 @@ -6,18 +6,18 @@
     >
       <div
-        class="css-76dw7d-PolymorphicDiv-Content e19lxcc00"
+        class="css-1yddrvs-PolymorphicDiv-Content e19lxcc00"
       >
         <div
--         class="components-flex components-card__header components-card-header css-1qwshfy-PolymorphicDiv-Flex-base-ItemsRow-Header-borderRadius-borderColor-medium e19lxcc00"
-+         class="components-flex components-card__header components-card-header css-1t2zg3y-PolymorphicDiv-Flex-base-ItemsRow-Header-borderRadius-borderColor-large e19lxcc00"
+-         class="components-flex components-card__header components-card-header css-1hlwlpa-PolymorphicDiv-Flex-base-ItemsRow-Header-borderRadius-borderColor-medium e19lxcc00"
++         class="components-flex components-card__header components-card-header css-dxbfrz-PolymorphicDiv-Flex-base-ItemsRow-Header-borderRadius-borderColor-large e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="CardHeader"
         >
           Header
         </div>
         <div
--         class="components-card__body components-card-body css-12jqy32-PolymorphicDiv-Body-borderRadius-medium e19lxcc00"
-+         class="components-card__body components-card-body css-e0vrqx-PolymorphicDiv-Body-borderRadius-large e19lxcc00"
+-         class="components-card__body components-card-body css-1gg1viu-PolymorphicDiv-Body-borderRadius-medium e19lxcc00"
++         class="components-card__body components-card-body css-16631vj-PolymorphicDiv-Body-borderRadius-large e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="CardBody"
         >
@@ -138,27 +138,27 @@ Snapshot Diff:
 @@ -6,25 +6,25 @@
     >
       <div
-        class="css-76dw7d-PolymorphicDiv-Content e19lxcc00"
+        class="css-1yddrvs-PolymorphicDiv-Content e19lxcc00"
       >
         <div
--         class="components-flex components-card__header components-card-header css-ubn8f6-PolymorphicDiv-Flex-base-ItemsRow-Header-borderRadius-borderColor-large-borderless e19lxcc00"
-+         class="components-flex components-card__header components-card-header css-1t1rswf-PolymorphicDiv-Flex-base-ItemsRow-Header-borderRadius-borderColor-small e19lxcc00"
+-         class="components-flex components-card__header components-card-header css-1qrvb07-PolymorphicDiv-Flex-base-ItemsRow-Header-borderRadius-borderColor-large-borderless e19lxcc00"
++         class="components-flex components-card__header components-card-header css-nhtehb-PolymorphicDiv-Flex-base-ItemsRow-Header-borderRadius-borderColor-small e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="CardHeader"
         >
           Header
         </div>
         <div
--         class="components-card__body components-card-body css-e0vrqx-PolymorphicDiv-Body-borderRadius-large e19lxcc00"
-+         class="components-card__body components-card-body css-12jqy32-PolymorphicDiv-Body-borderRadius-medium e19lxcc00"
+-         class="components-card__body components-card-body css-16631vj-PolymorphicDiv-Body-borderRadius-large e19lxcc00"
++         class="components-card__body components-card-body css-1gg1viu-PolymorphicDiv-Body-borderRadius-medium e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="CardBody"
         >
           Body
         </div>
         <div
--         class="components-flex components-card__footer components-card-footer css-167csgt-PolymorphicDiv-Flex-base-ItemsRow-Footer-borderRadius-borderColor-large-borderless e19lxcc00"
-+         class="components-flex components-card__footer components-card-footer css-1kcgqsk-PolymorphicDiv-Flex-base-ItemsRow-Footer-borderRadius-borderColor-xSmallCardPadding e19lxcc00"
+-         class="components-flex components-card__footer components-card-footer css-ny5e27-PolymorphicDiv-Flex-base-ItemsRow-Footer-borderRadius-borderColor-large-borderless e19lxcc00"
++         class="components-flex components-card__footer components-card-footer css-1isabr8-PolymorphicDiv-Flex-base-ItemsRow-Footer-borderRadius-borderColor-xSmallCardPadding e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="CardFooter"
         >
@@ -174,33 +174,33 @@ Snapshot Diff:
 @@ -1,30 +1,30 @@
   <div>
     <div
--     class="components-surface components-card css-1hs39fv-PolymorphicDiv-Surface-getBorders-primary-Card-boxShadowless-rounded e19lxcc00"
-+     class="components-surface components-card css-1c6nh8q-PolymorphicDiv-Surface-getBorders-primary-Card-rounded e19lxcc00"
+-     class="components-surface components-card css-y9at7f-PolymorphicDiv-Surface-getBorders-primary-Card-boxShadowless-rounded e19lxcc00"
++     class="components-surface components-card css-1dj5kxo-PolymorphicDiv-Surface-getBorders-primary-Card-rounded e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="Card"
     >
       <div
-        class="css-76dw7d-PolymorphicDiv-Content e19lxcc00"
+        class="css-1yddrvs-PolymorphicDiv-Content e19lxcc00"
       >
         <div
--         class="components-flex components-card__header components-card-header css-ubn8f6-PolymorphicDiv-Flex-base-ItemsRow-Header-borderRadius-borderColor-large-borderless e19lxcc00"
-+         class="components-flex components-card__header components-card-header css-1t1rswf-PolymorphicDiv-Flex-base-ItemsRow-Header-borderRadius-borderColor-small e19lxcc00"
+-         class="components-flex components-card__header components-card-header css-1qrvb07-PolymorphicDiv-Flex-base-ItemsRow-Header-borderRadius-borderColor-large-borderless e19lxcc00"
++         class="components-flex components-card__header components-card-header css-nhtehb-PolymorphicDiv-Flex-base-ItemsRow-Header-borderRadius-borderColor-small e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="CardHeader"
         >
           Header
         </div>
         <div
--         class="components-card__body components-card-body css-e0vrqx-PolymorphicDiv-Body-borderRadius-large e19lxcc00"
-+         class="components-card__body components-card-body css-hms9n9-PolymorphicDiv-Body-borderRadius-small e19lxcc00"
+-         class="components-card__body components-card-body css-16631vj-PolymorphicDiv-Body-borderRadius-large e19lxcc00"
++         class="components-card__body components-card-body css-be2ezs-PolymorphicDiv-Body-borderRadius-small e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="CardBody"
         >
           Body
         </div>
         <div
--         class="components-flex components-card__footer components-card-footer css-167csgt-PolymorphicDiv-Flex-base-ItemsRow-Footer-borderRadius-borderColor-large-borderless e19lxcc00"
-+         class="components-flex components-card__footer components-card-footer css-18yn3ff-PolymorphicDiv-Flex-base-ItemsRow-Footer-borderRadius-borderColor-small e19lxcc00"
+-         class="components-flex components-card__footer components-card-footer css-ny5e27-PolymorphicDiv-Flex-base-ItemsRow-Footer-borderRadius-borderColor-large-borderless e19lxcc00"
++         class="components-flex components-card__footer components-card-footer css-wpxcc4-PolymorphicDiv-Flex-base-ItemsRow-Footer-borderRadius-borderColor-small e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="CardFooter"
         >
@@ -469,15 +469,15 @@ Snapshot Diff:
       </div>
       <div
         aria-hidden="true"
--       class="components-elevation css-a91pvj-PolymorphicDiv-Elevation-sx-Base-sx-Base-elevationClassName e19lxcc00"
-+       class="components-elevation css-1q4cuxd-PolymorphicDiv-Elevation-sx-Base-sx-Base-elevationClassName e19lxcc00"
+-       class="components-elevation css-1gw374p-PolymorphicDiv-Elevation-sx-Base-sx-Base-elevationClassName e19lxcc00"
++       class="components-elevation css-12og79l-PolymorphicDiv-Elevation-sx-Base-sx-Base-elevationClassName e19lxcc00"
         data-wp-c16t="true"
         data-wp-component="Elevation"
       />
       <div
         aria-hidden="true"
--       class="components-elevation css-5u83fl-PolymorphicDiv-Elevation-sx-Base-sx-Base-elevationClassName e19lxcc00"
-+       class="components-elevation css-1q4cuxd-PolymorphicDiv-Elevation-sx-Base-sx-Base-elevationClassName e19lxcc00"
+-       class="components-elevation css-1570405-PolymorphicDiv-Elevation-sx-Base-sx-Base-elevationClassName e19lxcc00"
++       class="components-elevation css-12og79l-PolymorphicDiv-Elevation-sx-Base-sx-Base-elevationClassName e19lxcc00"
         data-wp-c16t="true"
         data-wp-component="Elevation"
       />

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

@@ -34,6 +34,11 @@ const meta: Meta< typeof CheckboxControl > = {
 			exclude: [ 'heading' ],
 		},
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+			notes: 'Will be superseded by `CheckboxControl` in `@wordpress/ui`, but continue using for now.',
+		},
 	},
 };
 export default meta;

package/src/circular-option-picker/stories/index.story.tsx

@@ -38,6 +38,11 @@ const meta: Meta< typeof CircularOptionPicker > = {
 			canvas: { sourceState: 'shown' },
 			source: { excludeDecorators: true },
 		},
+		componentStatus: {
+			status: 'use-with-caution',
+			whereUsed: 'global',
+			notes: 'Mostly intended for internal use.',
+		},
 	},
 	decorators: [
 		// Share current color state between main component, `actions` and `options`

package/src/clipboard-button/index.tsx

@@ -32,7 +32,7 @@ export default function ClipboardButton( {
 		alternative: 'wp.compose.useCopyToClipboard',
 	} );
 
-	const timeoutIdRef = useRef< NodeJS.Timeout >();
+	const timeoutIdRef = useRef< NodeJS.Timeout >( undefined );
 	const ref = useCopyToClipboard( text, () => {
 		onCopy();
 		if ( timeoutIdRef.current ) {

package/src/color-indicator/stories/index.story.tsx

@@ -22,6 +22,10 @@ const meta: Meta< typeof ColorIndicator > = {
 			expanded: true,
 		},
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+		},
 	},
 };
 export default meta;

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-vite';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 /**
  * WordPress dependencies
@@ -25,15 +25,21 @@ const meta: Meta< typeof ColorPalette > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+		},
 	},
 };
 export default meta;
 
-const Template: StoryFn< typeof ColorPalette > = ( {
+type ColorPaletteStory = StoryObj< typeof ColorPalette >;
+
+const Template = ( {
 	onChange,
 	value,
 	...args
-} ) => {
+}: React.ComponentProps< typeof ColorPalette > ) => {
 	const [ color, setColor ] = useState< string | undefined >( value );
 
 	return (
@@ -48,49 +54,55 @@ const Template: StoryFn< typeof ColorPalette > = ( {
 	);
 };
 
-export const Default = Template.bind( {} );
-Default.args = {
-	colors: [
-		{ name: 'Red', color: '#f00' },
-		{ name: 'White', color: '#fff' },
-		{ name: 'Blue', color: '#00f' },
-	],
+export const Default: ColorPaletteStory = {
+	render: Template,
+	args: {
+		colors: [
+			{ name: 'Red', color: '#f00' },
+			{ name: 'White', color: '#fff' },
+			{ name: 'Blue', color: '#00f' },
+		],
+	},
 };
 
-export const InitialValue = Template.bind( {} );
-InitialValue.args = {
-	colors: [
-		{ name: 'Red', color: '#f00' },
-		{ name: 'White', color: '#fff' },
-		{ name: 'Blue', color: '#00f' },
-	],
-	value: '#00f',
+export const InitialValue: ColorPaletteStory = {
+	render: Template,
+	args: {
+		colors: [
+			{ name: 'Red', color: '#f00' },
+			{ name: 'White', color: '#fff' },
+			{ name: 'Blue', color: '#00f' },
+		],
+		value: '#00f',
+	},
 };
 
-export const MultipleOrigins = Template.bind( {} );
-MultipleOrigins.args = {
-	colors: [
-		{
-			name: 'Primary colors',
-			colors: [
-				{ name: 'Red', color: '#f00' },
-				{ name: 'Yellow', color: '#ff0' },
-				{ name: 'Blue', color: '#00f' },
-			],
-		},
-		{
-			name: 'Secondary colors',
-			colors: [
-				{ name: 'Orange', color: '#f60' },
-				{ name: 'Green', color: '#0f0' },
-				{ name: 'Purple', color: '#60f' },
-			],
-		},
-	],
+export const MultipleOrigins: ColorPaletteStory = {
+	render: Template,
+	args: {
+		colors: [
+			{
+				name: 'Primary colors',
+				colors: [
+					{ name: 'Red', color: '#f00' },
+					{ name: 'Yellow', color: '#ff0' },
+					{ name: 'Blue', color: '#00f' },
+				],
+			},
+			{
+				name: 'Secondary colors',
+				colors: [
+					{ name: 'Orange', color: '#f60' },
+					{ name: 'Green', color: '#0f0' },
+					{ name: 'Purple', color: '#60f' },
+				],
+			},
+		],
+	},
 };
 
-export const CSSVariables: StoryFn< typeof ColorPalette > = ( args ) => {
-	return (
+export const CSSVariables: ColorPaletteStory = {
+	render: ( args ) => (
 		<div
 			style={ {
 				'--red': '#f00',
@@ -100,12 +112,12 @@ export const CSSVariables: StoryFn< typeof ColorPalette > = ( args ) => {
 		>
 			<Template { ...args } />
 		</div>
-	);
-};
-CSSVariables.args = {
-	colors: [
-		{ name: 'Red', color: 'var(--red)' },
-		{ name: 'Yellow', color: 'var(--yellow)' },
-		{ name: 'Blue', color: 'var(--blue)' },
-	],
+	),
+	args: {
+		colors: [
+			{ name: 'Red', color: 'var(--red)' },
+			{ name: 'Yellow', color: 'var(--yellow)' },
+			{ name: 'Blue', color: 'var(--blue)' },
+		],
+	},
 };

package/src/color-picker/color-copy-button.tsx

@@ -17,9 +17,7 @@ import type { ColorCopyButtonProps } from './types';
 export const ColorCopyButton = ( props: ColorCopyButtonProps ) => {
 	const { color, colorType } = props;
 	const [ copiedColor, setCopiedColor ] = useState< string | null >( null );
-	const copyTimerRef = useRef<
-		ReturnType< typeof setTimeout > | undefined
-	>();
+	const copyTimerRef = useRef< ReturnType< typeof setTimeout > >( undefined );
 	const copyRef = useCopyToClipboard< HTMLDivElement >(
 		() => {
 			switch ( colorType ) {

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

@@ -25,6 +25,10 @@ const meta: Meta< typeof ColorPicker > = {
 			expanded: true,
 		},
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+		},
 	},
 };
 export default meta;

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

@@ -48,6 +48,11 @@ const meta: Meta< typeof ComboboxControl > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+			notes: 'Will be superseded by `SearchableSelectControl` in `@wordpress/ui`, but continue using for now.',
+		},
 	},
 };
 export default meta;

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

@@ -47,6 +47,10 @@ const meta: Meta< typeof Composite > = {
 		docs: {
 			canvas: { sourceState: 'shown' },
 		},
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+		},
 	},
 	decorators: [
 		( Story ) => {
@@ -235,7 +239,7 @@ const Fill = ( { children }: { children: React.ReactNode } ) => {
 
 				// Render all context providers forwarded by the Slot via fillProps.
 				return forwardedContext.reduce(
-					( inner: JSX.Element, [ Provider, props ] ) => (
+					( inner: React.JSX.Element, [ Provider, props ] ) => (
 						<Provider { ...props }>{ inner }</Provider>
 					),
 					innerMarkup

package/src/confirm-dialog/component.tsx

@@ -35,8 +35,8 @@ const UnconnectedConfirmDialog = (
 
 	const cx = useCx();
 	const wrapperClassName = cx( styles.wrapper );
-	const cancelButtonRef = useRef();
-	const confirmButtonRef = useRef();
+	const cancelButtonRef = useRef< HTMLButtonElement >( null );
+	const confirmButtonRef = useRef< HTMLButtonElement >( null );
 
 	const [ isOpen, setIsOpen ] = useState< boolean >();
 	const [ shouldSelfClose, setShouldSelfClose ] = useState< boolean >();