@wordpress/components 35.0.1 → 36.0.0

package/build-types/utils/colors-values.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colors-values.d.ts","sourceRoot":"","sources":["../../src/utils/colors-values.js"],"names":[],"mappings":"AAsEA,eAAO,MAAM,MAAM;IAClB;;;;OAIG;;;;QAlEH,+CAA+C;;QAE/C,yDAAyD;;;QAGzD,6BAA6B;;QAE7B,wCAAwC;;QAExC,uCAAuC;;;IA2DvC;;OAEG;;;;;;;IAGH;;;;OAIG;;;;;QApDH,kDAAkD;;;;QAMlD,sDAAsD;;;YAIrD,yDAAyD;YACzD,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;;;IAoCJ;;OAEG;;;;;;;;;;;;EAED,CAAC;eAEW,MAAM"}
+{"version":3,"file":"colors-values.d.ts","sourceRoot":"","sources":["../../src/utils/colors-values.js"],"names":[],"mappings":"AA0FA,eAAO,MAAM,MAAM;IAClB;;;;OAIG;;;;QA1EH,+CAA+C;;QAE/C,yDAAyD;;;QAGzD,6BAA6B;;QAE7B,wCAAwC;;QAExC,uCAAuC;;;IAmEvC;;OAEG;;;;;;;IAGH;;;;OAIG;;;;;QAtDH,kDAAkD;;;;QAMlD,sDAAsD;;;YAIrD,yDAAyD;YACzD,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;;;IAsCJ;;OAEG;;;;;;;;;;;;EAED,CAAC;eAEW,MAAM"}

package/build-types/utils/dropdown-motion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-motion.d.ts","sourceRoot":"","sources":["../../src/utils/dropdown-motion.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,eAAe;;;;QAI1B,QAAQ;QACR,IAAI;;;;QAIJ,QAAQ;;EAEP,CAAC;AAeJ,eAAO,MAAM,mBAAmB;;;;;;EAM7B,CAAC"}
+{"version":3,"file":"dropdown-motion.d.ts","sourceRoot":"","sources":["../../src/utils/dropdown-motion.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,eAAe;;;;QAI1B,QAAQ;QACR,IAAI;;;;QAIJ,QAAQ;;EAEP,CAAC;AAiBJ,eAAO,MAAM,mBAAmB;;;;;;EAM7B,CAAC"}

package/build-types/validated-form-controls/components/combobox-control.d.ts

@@ -2,7 +2,7 @@ import type { ValidatedControlProps } from './types';
 export declare const ValidatedComboboxControl: import("react").ForwardRefExoticComponent<Omit<Pick<import("../../base-control/types").BaseControlProps, "__nextHasNoMarginBottom" | "className" | "help" | "hideLabelFromVision" | "label"> & {
     __experimentalRenderItem?: (args: {
         item: import("../../combobox-control/types").ComboboxControlOption;
-    }) => import("react").ReactNode;
+    }) => React.ReactNode;
     __next36pxDefaultSize?: boolean;
     __next40pxDefaultSize?: boolean;
     allowReset?: boolean;
@@ -10,7 +10,7 @@ export declare const ValidatedComboboxControl: import("react").ForwardRefExoticC
     messages?: {
         selected: string;
     };
-    onChange?: (value: string | null | undefined) => void;
+    onChange?: (value: import("../../combobox-control/types").ComboboxControlProps['value']) => void;
     onFilterValueChange?: (value: string) => void;
     options: import("../../combobox-control/types").ComboboxControlOption[];
     value?: string | null;

package/build-types/validated-form-controls/components/text-control.d.ts

@@ -1,8 +1,8 @@
 import type { ValidatedControlProps } from './types';
-export declare const ValidatedTextControl: import("react").ForwardRefExoticComponent<Omit<Omit<Pick<import("../../base-control/types").BaseControlProps, "__nextHasNoMarginBottom" | "className" | "help" | "hideLabelFromVision" | "label"> & {
+export declare const ValidatedTextControl: import("react").ForwardRefExoticComponent<Omit<Pick<import("../../base-control/types").BaseControlProps, "__nextHasNoMarginBottom" | "className" | "help" | "hideLabelFromVision" | "label"> & {
     onChange: (value: string) => void;
     value: string | number;
     type?: 'date' | 'datetime-local' | 'email' | 'number' | 'password' | 'tel' | 'text' | 'time' | 'search' | 'url';
     __next40pxDefaultSize?: boolean;
-} & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "__next40pxDefaultSize" | "__nextHasNoMarginBottom" | "as" | "children" | "className" | "help" | "hideLabelFromVision" | "label" | "onChange" | "type" | "value"> & import("react").RefAttributes<HTMLInputElement>, "__next40pxDefaultSize"> & ValidatedControlProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "__next40pxDefaultSize" | "__nextHasNoMarginBottom" | "as" | "children" | "className" | "help" | "hideLabelFromVision" | "label" | "onChange" | "type" | "value"> & import("react").RefAttributes<HTMLInputElement> & ValidatedControlProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=text-control.d.ts.map

package/build-types/validated-form-controls/components/text-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/text-control.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAmCrD,eAAO,MAAM,oBAAoB;;;;;kcAEhC,CAAC"}
+{"version":3,"file":"text-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/text-control.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AA2BrD,eAAO,MAAM,oBAAoB;;;;;waAEhC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "35.0.1",
+	"version": "36.0.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -50,7 +50,7 @@
 		"src/**/*.scss"
 	],
 	"dependencies": {
-		"@ariakit/react": "^0.4.21",
+		"@ariakit/react": "^0.4.29",
 		"@date-fns/utc": "^2.1.1",
 		"@emotion/cache": "^11.14.0",
 		"@emotion/css": "^11.13.5",
@@ -61,28 +61,27 @@
 		"@floating-ui/react-dom": "^2.0.8",
 		"@types/gradient-parser": "^1.1.0",
 		"@types/highlight-words-core": "^1.2.1",
-		"@types/react": "^18.3.27",
 		"@use-gesture/react": "^10.3.1",
-		"@wordpress/a11y": "^4.48.1",
-		"@wordpress/base-styles": "^10.0.1",
-		"@wordpress/compose": "^8.1.1",
-		"@wordpress/date": "^5.48.1",
-		"@wordpress/deprecated": "^4.48.1",
-		"@wordpress/dom": "^4.48.1",
-		"@wordpress/element": "^8.0.1",
-		"@wordpress/escape-html": "^3.48.1",
-		"@wordpress/hooks": "^4.48.1",
-		"@wordpress/html-entities": "^4.48.1",
-		"@wordpress/i18n": "^6.21.1",
-		"@wordpress/icons": "^14.0.1",
-		"@wordpress/is-shallow-equal": "^5.48.1",
-		"@wordpress/keycodes": "^4.48.1",
-		"@wordpress/primitives": "^4.48.1",
-		"@wordpress/private-apis": "^1.48.1",
-		"@wordpress/rich-text": "^7.48.1",
-		"@wordpress/style-runtime": "^0.4.1",
-		"@wordpress/ui": "^0.15.1",
-		"@wordpress/warning": "^3.48.1",
+		"@wordpress/a11y": "^4.49.0",
+		"@wordpress/base-styles": "^10.1.0",
+		"@wordpress/compose": "^8.2.0",
+		"@wordpress/date": "^5.49.0",
+		"@wordpress/deprecated": "^4.49.0",
+		"@wordpress/dom": "^4.49.0",
+		"@wordpress/element": "^8.1.0",
+		"@wordpress/escape-html": "^3.49.0",
+		"@wordpress/hooks": "^4.49.0",
+		"@wordpress/html-entities": "^4.49.0",
+		"@wordpress/i18n": "^6.22.0",
+		"@wordpress/icons": "^15.0.0",
+		"@wordpress/is-shallow-equal": "^5.49.0",
+		"@wordpress/keycodes": "^4.49.0",
+		"@wordpress/primitives": "^4.49.0",
+		"@wordpress/private-apis": "^1.49.0",
+		"@wordpress/rich-text": "^7.49.0",
+		"@wordpress/style-runtime": "^0.5.0",
+		"@wordpress/ui": "^0.16.0",
+		"@wordpress/warning": "^3.49.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.3",
@@ -104,25 +103,32 @@
 	},
 	"devDependencies": {
 		"@ariakit/test": "^0.4.13",
-		"@storybook/addon-docs": "^10.2.8",
-		"@storybook/react-vite": "^10.2.8",
+		"@storybook/addon-docs": "^10.4.3",
+		"@storybook/react-vite": "^10.4.3",
 		"@testing-library/dom": "^10.4.1",
 		"@testing-library/jest-dom": "^6.9.1",
 		"@testing-library/react": "^16.3.2",
 		"@testing-library/user-event": "^14.6.1",
 		"@types/jest": "^29.5.14",
 		"@types/react-dom": "^18.3.1",
-		"@wordpress/jest-console": "^8.48.1",
+		"@wordpress/jest-console": "^8.49.0",
+		"@wordpress/stylelint-tools": "file:../../tools/stylelint",
 		"snapshot-diff": "^0.10.0",
-		"storybook": "^10.2.8",
+		"storybook": "^10.4.3",
 		"timezone-mock": "^1.3.6"
 	},
 	"peerDependencies": {
+		"@types/react": "^18.3.27",
 		"react": "^18.0.0",
 		"react-dom": "^18.0.0"
 	},
+	"peerDependenciesMeta": {
+		"@types/react": {
+			"optional": true
+		}
+	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "99df7432c5c7cb83ba41146fd1f57f3c19004305"
+	"gitHead": "0e7112a4f4fde4ea15bd9060489b8f6fe11eb6ca"
 }

package/src/angle-picker-control/angle-circle.tsx

@@ -19,9 +19,9 @@ import type { AngleCircleProps } from './types';
 
 type UseDraggingArgumentType = Parameters< typeof useDragging >[ 0 ];
 type UseDraggingCallbackEvent =
-	| Parameters< UseDraggingArgumentType[ 'onDragStart' ] >[ 0 ]
-	| Parameters< UseDraggingArgumentType[ 'onDragMove' ] >[ 0 ]
-	| Parameters< UseDraggingArgumentType[ 'onDragEnd' ] >[ 0 ];
+	| Parameters< NonNullable< UseDraggingArgumentType[ 'onDragStart' ] > >[ 0 ]
+	| Parameters< NonNullable< UseDraggingArgumentType[ 'onDragMove' ] > >[ 0 ]
+	| Parameters< NonNullable< UseDraggingArgumentType[ 'onDragEnd' ] > >[ 0 ];
 
 function AngleCircle( {
 	value,

package/src/base-control/README.md

@@ -30,7 +30,7 @@ const MyCustomTextareaControl = ({ children, ...baseProps }) => (
 
 ### `as`
 
- - Type: `"symbol" | "object" | "label" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | ... 516 more ... | ("view" & FunctionComponent<...>)`
+ - Type: `"symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | ... 516 more ... | ("view" & FunctionComponent<...>)`
  - Required: No
 
 The HTML element or React component to render the component as.
@@ -107,7 +107,7 @@ const MyBaseControl = () => (
 
 ##### `as`
 
- - Type: `"symbol" | "object" | "label" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | ...`
+ - Type: `"symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | ...`
  - Required: No
 
 The HTML element or React component to render the component as.

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

@@ -45,6 +45,7 @@ export const StyledHelp = styled.p`
 	font-size: ${ font( 'helpText.fontSize' ) };
 	font-style: normal;
 	color: ${ COLORS.gray[ 700 ] };
+	text-wrap: pretty;
 `;
 
 export const StyledVisualLabel = styled.span`

package/src/border-control/styles.ts

@@ -84,6 +84,7 @@ export const colorIndicatorBorder = ( border?: Border ) => {
 	const { color, style } = border || {};
 
 	const fallbackColor =
+		// TODO: should use the `stroke-interactive-neutral` WPDS token when refactored to SCSS modules
 		!! style && style !== 'none' ? COLORS.gray[ 300 ] : undefined;
 
 	return css`

package/src/box-control/README.md

@@ -20,25 +20,13 @@ function Example() {
   } );
 
   return (
-    <BoxControl
-      __next40pxDefaultSize
-      values={ values }
-      onChange={ setValues }
-    />
+    <BoxControl values={ values } onChange={ setValues } />
   );
 };
 ```
 
 ## Props
 
-### `__next40pxDefaultSize`
-
- - Type: `boolean`
- - Required: No
- - Default: `false`
-
-Start opting into the larger default height that will become the default size in a future version.
-
 ### `allowReset`
 
  - Type: `boolean`

package/src/box-control/{input-control.tsx → box-input-control.tsx}

@@ -76,7 +76,6 @@ function getSidesToModify(
 }
 
 export default function BoxInputControl( {
-	__next40pxDefaultSize,
 	onChange = noop,
 	onFocus = noop,
 	values,
@@ -87,6 +86,7 @@ export default function BoxInputControl( {
 	min = 0,
 	presets,
 	presetKey,
+	placeholder: placeholderProp,
 	...props
 }: BoxControlInputControlProps ) {
 	const defaultValuesToModify = getSidesToModify( side, sides );
@@ -207,7 +207,7 @@ export default function BoxInputControl( {
 							{ ...props }
 							min={ min }
 							__shouldNotWarnDeprecated36pxSize
-							__next40pxDefaultSize={ __next40pxDefaultSize }
+							__next40pxDefaultSize
 							className="component-box-control__unit-control"
 							id={ inputId }
 							isPressEnterToChange
@@ -217,13 +217,13 @@ export default function BoxInputControl( {
 							onUnitChange={ handleOnUnitChange }
 							onFocus={ handleOnFocus }
 							label={ LABELS[ side ] }
-							placeholder={ mixedPlaceholder }
+							placeholder={ mixedPlaceholder ?? placeholderProp }
 							hideLabelFromVision
 						/>
 					</Tooltip>
 
 					<FlexedRangeControl
-						__next40pxDefaultSize={ __next40pxDefaultSize }
+						__next40pxDefaultSize
 						__shouldNotWarnDeprecated36pxSize
 						aria-controls={ inputId }
 						label={ LABELS[ side ] }

package/src/box-control/index.tsx

@@ -10,7 +10,7 @@ import warning from '@wordpress/warning';
  * Internal dependencies
  */
 import { BaseControl } from '../base-control';
-import InputControl from './input-control';
+import BoxInputControl from './box-input-control';
 import LinkedButton from './linked-button';
 import { Grid } from '../grid';
 import {
@@ -27,7 +27,6 @@ import {
 } from './utils';
 import { useControlledState } from '../utils/hooks';
 import type { BoxControlProps, BoxControlValue } from './types';
-import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 const defaultInputProps = {
 	min: 0,
@@ -58,17 +57,12 @@ function useUniqueId( idProp?: string ) {
  *   } );
  *
  *   return (
- *     <BoxControl
- *       __next40pxDefaultSize
- *       values={ values }
- *       onChange={ setValues }
- *     />
+ *     <BoxControl values={ values } onChange={ setValues } />
  *   );
  * };
  * ```
  */
 function BoxControl( {
-	__next40pxDefaultSize = false,
 	id: idProp,
 	inputProps = defaultInputProps,
 	onChange = noop,
@@ -137,16 +131,10 @@ function BoxControl( {
 		setSelectedUnits,
 		sides,
 		values: inputValues,
-		__next40pxDefaultSize,
 		presets,
 		presetKey,
 	};
 
-	maybeWarnDeprecated36pxSize( {
-		componentName: 'BoxControl',
-		__next40pxDefaultSize,
-		size: undefined,
-	} );
 	const sidesToRender = getAllowedSides( sides );
 
 	if ( ( presets && ! presetKey ) || ( ! presets && presetKey ) ) {
@@ -170,9 +158,7 @@ function BoxControl( {
 			</BaseControl.VisualLabel>
 			{ isLinked && (
 				<InputWrapper>
-					{ /* Disable reason: the parent component is handling the __next40pxDefaultSize prop */ }
-					{ /* eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop */ }
-					<InputControl side="all" { ...inputControlProps } />
+					<BoxInputControl side="all" { ...inputControlProps } />
 				</InputWrapper>
 			) }
 			{ ! hasOneSide && (
@@ -187,9 +173,7 @@ function BoxControl( {
 			{ ! isLinked &&
 				splitOnAxis &&
 				[ 'vertical', 'horizontal' ].map( ( axis ) => (
-					// Disable reason: the parent component is handling the __next40pxDefaultSize prop
-					// eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop
-					<InputControl
+					<BoxInputControl
 						key={ axis }
 						side={ axis as 'horizontal' | 'vertical' }
 						{ ...inputControlProps }
@@ -198,9 +182,7 @@ function BoxControl( {
 			{ ! isLinked &&
 				! splitOnAxis &&
 				Array.from( sidesToRender ).map( ( axis ) => (
-					// Disable reason: the parent component is handling the __next40pxDefaultSize prop
-					// eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop
-					<InputControl
+					<BoxInputControl
 						key={ axis }
 						side={ axis }
 						{ ...inputControlProps }

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

@@ -36,7 +36,7 @@ const meta: Meta< typeof BoxControl > = {
 export default meta;
 
 const TemplateUncontrolled: StoryFn< typeof BoxControl > = ( props ) => {
-	return <BoxControl __next40pxDefaultSize { ...props } />;
+	return <BoxControl { ...props } />;
 };
 
 const TemplateControlled: StoryFn< typeof BoxControl > = ( props ) => {
@@ -44,7 +44,6 @@ const TemplateControlled: StoryFn< typeof BoxControl > = ( props ) => {
 
 	return (
 		<BoxControl
-			__next40pxDefaultSize
 			values={ values }
 			{ ...props }
 			onChange={ ( nextValue ) => {
@@ -58,7 +57,6 @@ const TemplateControlled: StoryFn< typeof BoxControl > = ( props ) => {
 export const Default = TemplateUncontrolled.bind( {} );
 Default.args = {
 	label: 'Label',
-	__next40pxDefaultSize: true,
 };
 
 export const Controlled = TemplateControlled.bind( {} );

package/src/box-control/test/index.tsx

@@ -29,7 +29,6 @@ const ControlledBoxControl = (
 
 	return (
 		<BoxControl
-			__next40pxDefaultSize
 			values={ state }
 			onChange={ ( next ) => setState( next ) }
 			{ ...extraProps }
@@ -42,7 +41,7 @@ const UncontrolledBoxControl = ( {
 	...props
 }: DistributiveOmit< BoxControlProps, 'onChange' > & {
 	onChange?: BoxControlProps[ 'onChange' ];
-} ) => <BoxControl __next40pxDefaultSize onChange={ onChange } { ...props } />;
+} ) => <BoxControl onChange={ onChange } { ...props } />;
 
 describe( 'BoxControl', () => {
 	describe( 'Basic rendering', () => {
@@ -474,4 +473,18 @@ describe( 'BoxControl', () => {
 			} );
 		} );
 	} );
+
+	describe( 'Placeholder', () => {
+		it( 'applies a consumer-supplied placeholder passed via inputProps', () => {
+			render(
+				<UncontrolledBoxControl
+					inputProps={ { placeholder: 'Inherited' } }
+				/>
+			);
+
+			expect(
+				screen.getByRole( 'textbox', { name: 'All sides' } )
+			).toHaveAttribute( 'placeholder', 'Inherited' );
+		} );
+	} );
 } );

package/src/box-control/types.ts

@@ -27,6 +27,13 @@ type UnitControlPassthroughProps = Omit<
 >;
 
 type DeprecatedBoxControlProps = {
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
+	 * @ignore
+	 */
+	__next40pxDefaultSize?: boolean;
 	/**
 	 * @deprecated Pass to the `inputProps` prop instead.
 	 * @ignore
@@ -94,12 +101,6 @@ export type BoxControlProps = Pick< UnitControlProps, 'units' > &
 		 * The current values of the control, expressed as an object of `top`, `right`, `bottom`, and `left` values.
 		 */
 		values?: BoxControlValue;
-		/**
-		 * Start opting into the larger default height that will become the default size in a future version.
-		 *
-		 * @default false
-		 */
-		__next40pxDefaultSize?: boolean;
 	} & (
 		| {
 				/**

package/src/button/index.tsx

@@ -104,7 +104,7 @@ function useDeprecatedProps( {
  * );
  * ```
  */
-export function UnforwardedButton(
+export const Button = forwardRef( function UnforwardedButton(
 	props: ButtonProps & DeprecatedButtonProps,
 	ref: ForwardedRef< any >
 ) {
@@ -301,8 +301,6 @@ export function UnforwardedButton(
 			) }
 		</>
 	);
-}
+} );
 
-export const Button = forwardRef( UnforwardedButton );
-Button.displayName = 'Button';
 export default Button;

package/src/button/style.scss

@@ -153,7 +153,7 @@
 		&:disabled:not(:focus),
 		&[aria-disabled="true"]:not(:focus),
 		&[aria-disabled="true"]:hover:not(:focus) {
-			box-shadow: inset 0 0 0 $border-width $gray-300;
+			box-shadow: inset 0 0 0 $border-width var(--wpds-color-stroke-interactive-neutral-disabled);
 		}
 
 		&:focus:not(:active) {
@@ -321,14 +321,14 @@
 	}
 
 	&.is-small {
-		height: $button-size-small;
+		height: var(--wpds-dimension-size-sm);
 		line-height: 22px;
 		padding: 0 8px;
 		font-size: 11px;
 
 		&.has-icon:not(.has-text) {
 			padding: 0;
-			min-width: $button-size-small;
+			min-width: var(--wpds-dimension-size-sm);
 		}
 	}
 

package/src/card/card-divider/hook.ts

@@ -12,9 +12,13 @@ import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
 import type { DividerProps } from '../../divider';
 
+/*
+ * The explicit return type keeps the emitted declaration from inlining the inferred type,
+ * which references `WrapElement` from @ariakit/react-utils
+ */
 export function useCardDivider(
 	props: WordPressComponentProps< DividerProps, 'hr', false >
-) {
+): WordPressComponentProps< DividerProps, 'hr', false > {
 	const { className, ...otherProps } = useContextSystem(
 		props,
 		'CardDivider'

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

@@ -26,7 +26,7 @@ Snapshot Diff:
   <div>
     <div
 -     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"
++     class="components-card__body components-card-body css-1jxruy0-PolymorphicDiv-Body-borderRadius-medium-shady e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="CardBody"
     >
@@ -43,7 +43,7 @@ Snapshot Diff:
   <div>
     <div
 -     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"
++     class="components-flex components-card__footer components-card-footer css-1nz7z3h-PolymorphicDiv-Flex-base-ItemsRow-Footer-borderRadius-borderColor-medium-shady e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="CardFooter"
     >
@@ -77,7 +77,7 @@ Snapshot Diff:
   <div>
     <div
 -     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"
++     class="components-flex components-card__header components-card-header css-zom6gv-PolymorphicDiv-Flex-base-ItemsRow-Header-borderRadius-borderColor-medium-shady e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="CardHeader"
     >
@@ -281,14 +281,12 @@ exports[`Card Card component should render correctly 1`] = `
 }
 
 .emotion-10 {
-  border: 0;
-  margin: 0;
-  border-bottom: 1px solid currentColor;
-  height: 0;
-  width: auto;
   box-sizing: border-box;
   display: block;
   width: 100%;
+}
+
+.emotion-11 {
   border-color: rgba(0, 0, 0, 0.1);
 }
 
@@ -412,7 +410,7 @@ exports[`Card Card component should render correctly 1`] = `
       </div>
       <hr
         aria-orientation="horizontal"
-        class="components-divider components-card__divider components-card-divider emotion-10 emotion-11"
+        class="components-divider emotion-10 emotion-11 components-card__divider components-card-divider"
         data-wp-c16t="true"
         data-wp-component="CardDivider"
         role="separator"

package/src/checkbox-control/test/__snapshots__/index.tsx.snap

@@ -5,7 +5,7 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -13,14 +13,28 @@
+@@ -13,14 +13,29 @@
           <span
             class="components-checkbox-control__input-container"
           >
@@ -15,10 +15,11 @@ Snapshot Diff:
 +             id="inspector-checkbox-control-7"
               type="checkbox"
               value="1"
-+           />
+            />
 +           <svg
 +             aria-hidden="true"
 +             class="components-checkbox-control__indeterminate"
++             fill="currentColor"
 +             focusable="false"
 +             height="24"
 +             role="presentation"
@@ -28,7 +29,7 @@ Snapshot Diff:
 +           >
 +             <path
 +               d="M7 11.5h10V13H7z"
-              />
++             />
 +           </svg>
           </span>
         </div>

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

@@ -30,6 +30,11 @@ const meta: Meta< typeof Composite > = {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 		'Composite.Context': Composite.Context,
 	},
+	// Temporary: Due to an upstream bug, render the root explicitly so the
+	// components manifest extractor can resolve props from the JSX.
+	//
+	// See: https://github.com/storybookjs/storybook/issues/34877
+	render: ( args ) => <Composite { ...args } />,
 	argTypes: {
 		children: { control: false },
 		render: { control: false },

package/src/confirm-dialog/stories/index.story.tsx

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

package/src/custom-select-control/test/index.tsx

@@ -483,7 +483,7 @@ describe.each( [
 			const customSelect = screen.getByRole( 'listbox', {
 				name: props.label,
 			} );
-			expect( customSelect ).toHaveFocus();
+			await waitFor( () => expect( customSelect ).toHaveFocus() );
 			await press.Enter();
 
 			expect( onKeyDown ).toHaveBeenCalledTimes( 0 );

package/src/disabled/README.md

@@ -15,7 +15,6 @@ const MyDisabled = () => {
 
 	let input = (
 		<TextControl
-			__next40pxDefaultSize
 			label="Input"
 			onChange={ () => {} }
 		/>

package/src/disabled/index.tsx

@@ -25,7 +25,6 @@ const { Consumer, Provider } = Context;
  *
  *	let input = (
  *		<TextControl
- *			__next40pxDefaultSize
  *			label="Input"
  *			onChange={ () => {} }
  *		/>

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

@@ -46,7 +46,6 @@ const Form = () => {
 	return (
 		<VStack>
 			<TextControl
-				__next40pxDefaultSize
 				label="Text Control"
 				value={ textControlValue }
 				onChange={ setTextControlValue }