@wordpress/components 28.10.0 → 28.12.0

package/build-types/utils/hooks/use-animated-offset-rect.d.ts

@@ -32,7 +32,7 @@ container: HTMLElement | undefined,
 /**
  * The rect of the tracked element.
  */
-rect: ElementOffsetRect, { prefix, dataAttribute, transitionEndFilter, }?: {
+rect: ElementOffsetRect, { prefix, dataAttribute, transitionEndFilter, roundRect, }?: {
     /**
      * The prefix used for the CSS variables, e.g. if `prefix` is `selected`, the
      * CSS variables will be `--selected-top`, `--selected-left`, etc.
@@ -58,5 +58,12 @@ rect: ElementOffsetRect, { prefix, dataAttribute, transitionEndFilter, }?: {
      * @default () => true
      */
     transitionEndFilter?: (event: TransitionEvent) => boolean;
+    /**
+     * Whether the `rect` measurements should be rounded down when applied
+     * to the CSS variables. This can be useful to avoid blurry animations or
+     * to avoid subpixel rendering issues.
+     * @default false
+     */
+    roundRect?: boolean;
 }): void;
 //# sourceMappingURL=use-animated-offset-rect.d.ts.map

package/build-types/utils/hooks/use-animated-offset-rect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-animated-offset-rect.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/use-animated-offset-rect.ts"],"names":[],"mappings":"AAOA;;GAEG;AACH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAGzD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,qBAAqB;AACpC;;GAEG;AACH,SAAS,EAAE,WAAW,GAAG,SAAS;AAClC;;GAEG;AACH,IAAI,EAAE,iBAAiB,EACvB,EACC,MAAqB,EACrB,aAAsC,EACtC,mBAAgC,GAChC,GAAE;IACF;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;;;;;OAQG;IACH,mBAAmB,CAAC,EAAE,CAAE,KAAK,EAAE,eAAe,KAAM,OAAO,CAAC;CACvD,QA+BN"}
+{"version":3,"file":"use-animated-offset-rect.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/use-animated-offset-rect.ts"],"names":[],"mappings":"AAOA;;GAEG;AACH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAGzD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,qBAAqB;AACpC;;GAEG;AACH,SAAS,EAAE,WAAW,GAAG,SAAS;AAClC;;GAEG;AACH,IAAI,EAAE,iBAAiB,EACvB,EACC,MAAqB,EACrB,aAAsC,EACtC,mBAAgC,EAChC,SAAiB,GACjB,GAAE;IACF;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;;;;;OAQG;IACH,mBAAmB,CAAC,EAAE,CAAE,KAAK,EAAE,eAAe,KAAM,OAAO,CAAC;IAC5D;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACf,QAmCN"}

package/build-types/utils/hooks/use-update-effect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-update-effect.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/use-update-effect.js"],"names":[],"mappings":";AAKA;;;;;;;GAOG;AACH,yCAHW,OAAO,OAAO,EAAE,cAAc,QAC9B,OAAO,OAAO,EAAE,cAAc,QAuBxC"}
+{"version":3,"file":"use-update-effect.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/use-update-effect.js"],"names":[],"mappings":";AAKA;;;;;;;GAOG;AACH,yCAHW,OAAO,OAAO,EAAE,cAAc,QAC9B,OAAO,OAAO,EAAE,cAAc,QAqBxC"}

package/build-types/visually-hidden/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/visually-hidden/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAEtD;;GAEG;AACH,OAAO,EAAE,cAAc,EAAE,MAAM,IAAI,CAAC;AAEpC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,cAAc,CAatC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,OAAO,CAAE,OAAO,cAAc,CAanD,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,OAAO,CAAE,OAAO,cAAc,CAW9D,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,OAAO,CAAE,OAAO,cAAc,CAWpE,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/visually-hidden/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAEtD;;GAEG;AACH,OAAO,EAAE,cAAc,EAAE,MAAM,IAAI,CAAC;AAEpC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,cAAc,CActC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,OAAO,CAAE,OAAO,cAAc,CAanD,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,OAAO,CAAE,OAAO,cAAc,CAW9D,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,OAAO,CAAE,OAAO,cAAc,CAWpE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "28.10.0",
+	"version": "28.12.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -25,11 +25,12 @@
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
+	"types": "build-types",
 	"sideEffects": [
 		"build-style/**",
 		"src/**/*.scss"
 	],
-	"types": "build-types",
 	"dependencies": {
 		"@ariakit/react": "^0.4.10",
 		"@babel/runtime": "7.25.7",
@@ -43,23 +44,23 @@
 		"@types/gradient-parser": "0.1.3",
 		"@types/highlight-words-core": "1.2.1",
 		"@use-gesture/react": "^10.3.1",
-		"@wordpress/a11y": "^4.10.0",
-		"@wordpress/compose": "^7.10.0",
-		"@wordpress/date": "^5.10.0",
-		"@wordpress/deprecated": "^4.10.0",
-		"@wordpress/dom": "^4.10.0",
-		"@wordpress/element": "^6.10.0",
-		"@wordpress/escape-html": "^3.10.0",
-		"@wordpress/hooks": "^4.10.0",
-		"@wordpress/html-entities": "^4.10.0",
-		"@wordpress/i18n": "^5.10.0",
-		"@wordpress/icons": "^10.10.0",
-		"@wordpress/is-shallow-equal": "^5.10.0",
-		"@wordpress/keycodes": "^4.10.0",
-		"@wordpress/primitives": "^4.10.0",
-		"@wordpress/private-apis": "^1.10.0",
-		"@wordpress/rich-text": "^7.10.0",
-		"@wordpress/warning": "^3.10.0",
+		"@wordpress/a11y": "*",
+		"@wordpress/compose": "*",
+		"@wordpress/date": "*",
+		"@wordpress/deprecated": "*",
+		"@wordpress/dom": "*",
+		"@wordpress/element": "*",
+		"@wordpress/escape-html": "*",
+		"@wordpress/hooks": "*",
+		"@wordpress/html-entities": "*",
+		"@wordpress/i18n": "*",
+		"@wordpress/icons": "*",
+		"@wordpress/is-shallow-equal": "*",
+		"@wordpress/keycodes": "*",
+		"@wordpress/primitives": "*",
+		"@wordpress/private-apis": "*",
+		"@wordpress/rich-text": "*",
+		"@wordpress/warning": "*",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -84,5 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ab34a7ac935fd1478eac63b596242d83270897ee"
+	"gitHead": "510540d99f3d222a96f08d3d7b66c9e7a726f705"
 }

package/src/alignment-matrix-control/README.md

@@ -1,7 +1,6 @@
-<!-- This file is generated automatically and cannot be edited directly. -->
-
 # AlignmentMatrixControl
 
+<!-- This file is generated automatically and cannot be edited directly. Make edits via TypeScript types and TSDocs. -->
 
 <p class="callout callout-info">See the <a href="https://wordpress.github.io/gutenberg/?path=/docs/components-alignmentmatrixcontrol--docs">WordPress Storybook</a> for more detailed, interactive documentation.</p>
 

package/src/angle-picker-control/README.md

@@ -1,7 +1,6 @@
-<!-- This file is generated automatically and cannot be edited directly. -->
-
 # AnglePickerControl
 
+<!-- This file is generated automatically and cannot be edited directly. Make edits via TypeScript types and TSDocs. -->
 
 <p class="callout callout-info">See the <a href="https://wordpress.github.io/gutenberg/?path=/docs/components-anglepickercontrol--docs">WordPress Storybook</a> for more detailed, interactive documentation.</p>
 

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

@@ -10,7 +10,8 @@ import { Animate } from '..';
 import Notice from '../../notice';
 
 const meta: Meta< typeof Animate > = {
-	title: 'Components/Animate',
+	title: 'Components/Utilities/Animate',
+	id: 'components-animate',
 	component: Animate,
 	parameters: {
 		controls: { expanded: true },

package/src/autocomplete/autocompleter-ui.native.js

@@ -69,9 +69,8 @@ export function getAutoCompleterUI( autocompleter ) {
 			} else if ( isVisible && text.length === 0 ) {
 				startAnimation( false );
 			}
-			// Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.
+			// We want to avoid introducing unexpected side effects.
 			// See https://github.com/WordPress/gutenberg/pull/41820
-			// eslint-disable-next-line react-hooks/exhaustive-deps
 		}, [ items, isVisible, text ] );
 
 		const activeItemStyles = usePreferredColorSchemeStyle(
@@ -112,9 +111,8 @@ export function getAutoCompleterUI( autocompleter ) {
 					}
 				} );
 			},
-			// Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.
+			// We want to avoid introducing unexpected side effects.
 			// See https://github.com/WordPress/gutenberg/pull/41820
-			// eslint-disable-next-line react-hooks/exhaustive-deps
 			[ isVisible ]
 		);
 

package/src/autocomplete/autocompleter-ui.tsx

@@ -165,9 +165,8 @@ export function getAutoCompleterUI( autocompleter: WPCompleter ) {
 		useLayoutEffect( () => {
 			onChangeOptions( items );
 			announce( items );
-			// Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.
+			// We want to avoid introducing unexpected side effects.
 			// See https://github.com/WordPress/gutenberg/pull/41820
-			// eslint-disable-next-line react-hooks/exhaustive-deps
 		}, [ items ] );
 
 		if ( items.length === 0 ) {
@@ -235,8 +234,5 @@ function useOnClickOutside(
 			document.removeEventListener( 'mousedown', listener );
 			document.removeEventListener( 'touchstart', listener );
 		};
-		// Disable reason: `ref` is a ref object and should not be included in a
-		// hook's dependency list.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ handler ] );
+	}, [ handler, ref ] );
 }

package/src/autocomplete/index.tsx

@@ -97,7 +97,7 @@ export function useAutocomplete( {
 		( ( props: AutocompleterUIProps ) => JSX.Element | null ) | null
 	>( null );
 
-	const backspacing = useRef( false );
+	const backspacingRef = useRef( false );
 
 	function insertCompletion( replacement: React.ReactNode ) {
 		if ( autocompleter === null ) {
@@ -177,7 +177,7 @@ export function useAutocomplete( {
 	}
 
 	function handleKeyDown( event: KeyboardEvent ) {
-		backspacing.current = event.key === 'Backspace';
+		backspacingRef.current = event.key === 'Backspace';
 
 		if ( ! autocompleter ) {
 			return;
@@ -323,7 +323,7 @@ export function useAutocomplete( {
 		// Ex: "Some text @marcelo sekkkk" <--- "kkkk" caused a mismatch, but
 		// if the user presses backspace here, it will show the completion popup again.
 		const matchingWhileBackspacing =
-			backspacing.current && wordsFromTrigger.length <= 3;
+			backspacingRef.current && wordsFromTrigger.length <= 3;
 
 		if ( mismatch && ! ( matchingWhileBackspacing || hasOneTriggerWord ) ) {
 			if ( autocompleter ) {
@@ -380,9 +380,8 @@ export function useAutocomplete( {
 				: AutocompleterUI
 		);
 		setFilterValue( query === null ? '' : query );
-		// Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.
+		// We want to avoid introducing unexpected side effects.
 		// See https://github.com/WordPress/gutenberg/pull/41820
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ textContent ] );
 
 	const { key: selectedKey = '' } = filteredOptions[ selectedIndex ] || {};

package/src/base-control/README.md

@@ -1,8 +1,10 @@
 # BaseControl
 
-`BaseControl` is a component used to generate labels and help text for components handling user inputs.
+<!-- This file is generated automatically and cannot be edited directly. Make edits via TypeScript types and TSDocs. -->
+
+<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>
 
-## Usage
+`BaseControl` is a component used to generate labels and help text for components handling user inputs.
 
 ```jsx
 import { BaseControl, useBaseControlProps } from '@wordpress/components';
@@ -23,70 +25,80 @@ const MyCustomTextareaControl = ({ children, ...baseProps }) => (
 	);
 );
 ```
-
 ## Props
 
-The component accepts the following props:
+### `__nextHasNoMarginBottom`
 
-### id
+Start opting into the new margin-free styles that will become the default in a future version.
 
-The HTML `id` of the control element (passed in as a child to `BaseControl`) to which labels and help text are being generated. This is necessary to accessibly associate the label with that element.
+ - Type: `boolean`
+ - Required: No
+ - Default: `false`
 
-The recommended way is to use the `useBaseControlProps` hook, which takes care of generating a unique `id` for you. Otherwise, if you choose to pass an explicit `id` to this prop, you are responsible for ensuring the uniqueness of the `id`.
+### `as`
 
--   Type: `String`
--   Required: No
+The HTML element or React component to render the component as.
 
-### label
+ - Type: `"symbol" | "object" | "label" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | ... 516 more ... | ("view" & FunctionComponent<...>)`
+ - Required: No
 
-If this property is added, a label will be generated using label property as the content.
+### `className`
 
--   Type: `String`
--   Required: No
 
-### hideLabelFromVision
+ - Type: `string`
+ - Required: No
 
-If true, the label will only be visible to screen readers.
+### `children`
+
+The content to be displayed within the `BaseControl`.
 
--   Type: `Boolean`
--   Required: No
+ - Type: `ReactNode`
+ - Required: Yes
 
-### help
+### `help`
 
-Additional description for the control. Only use for meaningful description or instructions for the control. An element containing the description will be programmatically associated to the BaseControl by the means of an `aria-describedby` attribute.
+Additional description for the control.
 
--   Type: `ReactNode`
--   Required: No
+Only use for meaningful description or instructions for the control. An element containing the description will be programmatically associated to the BaseControl by the means of an `aria-describedby` attribute.
 
-### className
+ - Type: `ReactNode`
+ - Required: No
 
-Any other classes to add to the wrapper div.
+### `hideLabelFromVision`
 
--   Type: `String`
--   Required: No
+If true, the label will only be visible to screen readers.
 
-### children
+ - Type: `boolean`
+ - Required: No
+ - Default: `false`
 
-The content to be displayed within the BaseControl.
+### `id`
 
--   Type: `Element`
--   Required: Yes
+The HTML `id` of the control element (passed in as a child to `BaseControl`) to which labels and help text are being generated.
+This is necessary to accessibly associate the label with that element.
 
-### __nextHasNoMarginBottom
+The recommended way is to use the `useBaseControlProps` hook, which takes care of generating a unique `id` for you.
+Otherwise, if you choose to pass an explicit `id` to this prop, you are responsible for ensuring the uniqueness of the `id`.
 
-Start opting into the new margin-free styles that will become the default in a future version.
+ - Type: `string`
+ - Required: No
 
--   Type: `Boolean`
--   Required: No
--   Default: `false`
+### `label`
 
-## BaseControl.VisualLabel
+If this property is added, a label will be generated using label property as the content.
 
-`BaseControl.VisualLabel` is used to render a purely visual label inside a `BaseControl` component.
+ - Type: `ReactNode`
+ - Required: No
 
-It should only be used in cases where the children being rendered inside BaseControl are already accessibly labeled, e.g., a button, but we want an additional visual label for that section equivalent to the labels `BaseControl` would otherwise use if the `label` prop was passed.
+## Subcomponents
 
-## Usage
+### BaseControl.VisualLabel
+
+`BaseControl.VisualLabel` is used to render a purely visual label inside a `BaseControl` component.
+
+It should only be used in cases where the children being rendered inside `BaseControl` are already accessibly labeled,
+e.g., a button, but we want an additional visual label for that section equivalent to the labels `BaseControl` would
+otherwise use if the `label` prop was passed.
 
 ```jsx
 import { BaseControl } from '@wordpress/components';
@@ -101,19 +113,18 @@ const MyBaseControl = () => (
 	</BaseControl>
 );
 ```
+#### Props
 
-### Props
-
-#### className
+##### `as`
 
-Any other classes to add to the wrapper div.
+The HTML element or React component to render the component as.
 
--   Type: `String`
--   Required: No
+ - Type: `"symbol" | "object" | "label" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | ...`
+ - Required: No
 
-#### children
+##### `children`
 
 The content to be displayed within the `BaseControl.VisualLabel`.
 
--   Type: `Element`
--   Required: Yes
+ - Type: `ReactNode`
+ - Required: Yes

package/src/base-control/docs-manifest.json

@@ -0,0 +1,12 @@
+{
+	"$schema": "../../schemas/docs-manifest.json",
+	"displayName": "BaseControl",
+	"filePath": "./index.tsx",
+	"subcomponents": [
+		{
+			"displayName": "VisualLabel",
+			"preferredDisplayName": "BaseControl.VisualLabel",
+			"filePath": "./index.tsx"
+		}
+	]
+}

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

@@ -12,6 +12,10 @@ import Button from '../../button';
 const meta: Meta< typeof BaseControl > = {
 	title: 'Components/BaseControl',
 	component: BaseControl,
+	subcomponents: {
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		'BaseControl.VisualLabel': BaseControl.VisualLabel,
+	},
 	argTypes: {
 		children: { control: { type: null } },
 		help: { control: { type: 'text' } },

package/src/base-control/types.ts

@@ -49,5 +49,8 @@ export type BaseControlProps = {
 };
 
 export type BaseControlVisualLabelProps = {
+	/**
+	 * The content to be displayed within the `BaseControl.VisualLabel`.
+	 */
 	children: ReactNode;
 };

package/src/border-box-control/border-box-control/README.md

@@ -47,6 +47,7 @@ const MyBorderBoxControl = () => {
 
 	return (
 		<BorderBoxControl
+			__next40pxDefaultSize
 			colors={ colors }
 			label={ __( 'Borders' ) }
 			onChange={ onChange }

package/src/border-box-control/border-box-control/component.tsx

@@ -175,6 +175,7 @@ const UnconnectedBorderBoxControl = (
  *
  * 	return (
  * 		<BorderBoxControl
+ * 			__next40pxDefaultSize
  * 			colors={ colors }
  * 			label={ __( 'Borders' ) }
  * 			onChange={ onChange }

package/src/border-box-control/border-box-control/hook.ts

@@ -19,6 +19,7 @@ import {
 import type { WordPressComponentProps } from '../../context';
 import { useContextSystem } from '../../context';
 import { useCx } from '../../utils/hooks/use-cx';
+import { maybeWarnDeprecated36pxSize } from '../../utils/deprecated-36px-size';
 
 import type { Border } from '../../border-control/types';
 import type { Borders, BorderSide, BorderBoxControlProps } from '../types';
@@ -39,6 +40,12 @@ export function useBorderBoxControl(
 		...otherProps
 	} = useContextSystem( props, 'BorderBoxControl' );
 
+	maybeWarnDeprecated36pxSize( {
+		componentName: 'BorderBoxControl',
+		__next40pxDefaultSize,
+		size,
+	} );
+
 	const computedSize =
 		size === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;
 

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

@@ -84,4 +84,5 @@ Default.args = {
 	colors,
 	label: 'Borders',
 	enableStyle: true,
+	__next40pxDefaultSize: true,
 };

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

@@ -44,6 +44,7 @@ const props = {
 		props.value = newValue;
 	} ),
 	value: undefined,
+	__next40pxDefaultSize: true,
 };
 
 const toggleLabelRegex = /Border color( and style)* picker/;

package/src/border-control/border-control/README.md

@@ -30,6 +30,7 @@ const MyBorderControl = () => {
 
 	return (
 		<BorderControl
+			__next40pxDefaultSize
 			colors={ colors }
 			label={ __( 'Border' ) }
 			onChange={ setBorder }

package/src/border-control/border-control/component.tsx

@@ -154,6 +154,7 @@ const UnconnectedBorderControl = (
  *
  * 	return (
  * 		<BorderControl
+ * 			__next40pxDefaultSize
  * 			colors={ colors }
  * 			label={ __( 'Border' ) }
  * 			onChange={ onChange }

package/src/border-control/border-control/hook.ts

@@ -11,8 +11,8 @@ import { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';
 import type { WordPressComponentProps } from '../../context';
 import { useContextSystem } from '../../context';
 import { useCx } from '../../utils/hooks/use-cx';
-
 import type { Border, BorderControlProps } from '../types';
+import { maybeWarnDeprecated36pxSize } from '../../utils/deprecated-36px-size';
 
 // If either width or color are defined, the border is considered valid
 // and a border style can be set as well.
@@ -41,6 +41,12 @@ export function useBorderControl(
 		...otherProps
 	} = useContextSystem( props, 'BorderControl' );
 
+	maybeWarnDeprecated36pxSize( {
+		componentName: 'BorderControl',
+		__next40pxDefaultSize,
+		size,
+	} );
+
 	const computedSize =
 		size === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;
 

package/src/border-control/border-control-dropdown/component.tsx

@@ -73,15 +73,19 @@ const getToggleAriaLabel = (
 			const ariaLabelValue = getAriaLabelColorValue( colorObject.color );
 			return style
 				? sprintf(
-						// translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:". %3$s: The current border style selection e.g. "solid".
-						'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s". The currently selected style is "%3$s".',
+						// translators: 1: The name of the color e.g. "vivid red". 2: The color's hex code e.g.: "#f00:". 3: The current border style selection e.g. "solid".
+						__(
+							'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s". The currently selected style is "%3$s".'
+						),
 						colorObject.name,
 						ariaLabelValue,
 						style
 				  )
 				: sprintf(
-						// translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:".
-						'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s".',
+						// translators: 1: The name of the color e.g. "vivid red". 2: The color's hex code e.g.: "#f00:".
+						__(
+							'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s".'
+						),
 						colorObject.name,
 						ariaLabelValue
 				  );
@@ -91,14 +95,18 @@ const getToggleAriaLabel = (
 			const ariaLabelValue = getAriaLabelColorValue( colorValue );
 			return style
 				? sprintf(
-						// translators: %1$s: The color's hex code e.g.: "#f00:". %2$s: The current border style selection e.g. "solid".
-						'Border color and style picker. The currently selected color has a value of "%1$s". The currently selected style is "%2$s".',
+						// translators: 1: The color's hex code e.g.: "#f00:". 2: The current border style selection e.g. "solid".
+						__(
+							'Border color and style picker. The currently selected color has a value of "%1$s". The currently selected style is "%2$s".'
+						),
 						ariaLabelValue,
 						style
 				  )
 				: sprintf(
-						// translators: %1$s: The color's hex code e.g: "#f00".
-						'Border color and style picker. The currently selected color has a value of "%1$s".',
+						// translators: %s: The color's hex code e.g: "#f00".
+						__(
+							'Border color and style picker. The currently selected color has a value of "%s".'
+						),
 						ariaLabelValue
 				  );
 		}
@@ -108,8 +116,10 @@ const getToggleAriaLabel = (
 
 	if ( colorObject ) {
 		return sprintf(
-			// translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g: "#f00".
-			'Border color picker. The currently selected color is called "%1$s" and has a value of "%2$s".',
+			// translators: 1: The name of the color e.g. "vivid red". 2: The color's hex code e.g: "#f00".
+			__(
+				'Border color picker. The currently selected color is called "%1$s" and has a value of "%2$s".'
+			),
 			colorObject.name,
 			getAriaLabelColorValue( colorObject.color )
 		);
@@ -117,8 +127,10 @@ const getToggleAriaLabel = (
 
 	if ( colorValue ) {
 		return sprintf(
-			// translators: %1$s: The color's hex code e.g: "#f00".
-			'Border color picker. The currently selected color has a value of "%1$s".',
+			// translators: %s: The color's hex code e.g: "#f00".
+			__(
+				'Border color picker. The currently selected color has a value of "%s".'
+			),
 			getAriaLabelColorValue( colorValue )
 		);
 	}
@@ -176,7 +188,7 @@ const BorderControlDropdown = (
 			tooltipPosition={ dropdownPosition }
 			label={ __( 'Border color and style picker' ) }
 			showTooltip
-			__next40pxDefaultSize={ size === '__unstable-large' ? true : false }
+			__next40pxDefaultSize={ size === '__unstable-large' }
 		>
 			<span className={ indicatorWrapperClassName }>
 				<ColorIndicator

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

@@ -93,6 +93,7 @@ export const Default = Template.bind( {} );
 Default.args = {
 	colors,
 	label: 'Border',
+	__next40pxDefaultSize: true,
 	enableAlpha: true,
 	enableStyle: true,
 	shouldSanitizeBorder: true,

package/src/border-control/test/index.js

@@ -31,6 +31,7 @@ function createProps( customProps ) {
 			props.value = newValue;
 		} ),
 		value: defaultBorder,
+		__next40pxDefaultSize: true,
 		...customProps,
 	};
 	return props;

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

@@ -22,7 +22,8 @@ import './style.css';
 import Button from '..';
 
 const meta: Meta< typeof Button > = {
-	title: 'Components/Button',
+	title: 'Components/Actions/Button',
+	id: 'components-button',
 	component: Button,
 	argTypes: {
 		// Overrides a limitation of the docgen interpreting our TS types for this as required.

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

@@ -22,7 +22,8 @@ const meta: Meta< typeof Card > = {
 	component: Card,
 	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 	subcomponents: { CardHeader, CardBody, CardDivider, CardMedia, CardFooter },
-	title: 'Components/Card',
+	title: 'Components/Containers/Card',
+	id: 'components-card',
 	argTypes: {
 		as: {
 			control: { type: null },