@wordpress/components 27.4.0 → 27.5.0

package/build-types/view/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/view/component.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C;;GAEG;AACH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,IAAI,EAAE,kBAAkB,CACpC,KAAK,EACL,SAAS,GAAG,aAAa,CAAE,GAAG,CAAE,EAChC,IAAI,CACW,CAAC;AAKjB,eAAe,IAAI,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/view/component.tsx"],"names":[],"mappings":";;AAwBA;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEd,CAAC;AAEJ,eAAe,IAAI,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "27.4.0",
+	"version": "27.5.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -42,23 +42,23 @@
 		"@types/gradient-parser": "0.1.3",
 		"@types/highlight-words-core": "1.2.1",
 		"@use-gesture/react": "^10.2.24",
-		"@wordpress/a11y": "^3.56.0",
-		"@wordpress/compose": "^6.33.0",
-		"@wordpress/date": "^4.56.0",
-		"@wordpress/deprecated": "^3.56.0",
-		"@wordpress/dom": "^3.56.0",
-		"@wordpress/element": "^5.33.0",
-		"@wordpress/escape-html": "^2.56.0",
-		"@wordpress/hooks": "^3.56.0",
-		"@wordpress/html-entities": "^3.56.0",
-		"@wordpress/i18n": "^4.56.0",
-		"@wordpress/icons": "^9.47.0",
-		"@wordpress/is-shallow-equal": "^4.56.0",
-		"@wordpress/keycodes": "^3.56.0",
-		"@wordpress/primitives": "^3.54.0",
-		"@wordpress/private-apis": "^0.38.0",
-		"@wordpress/rich-text": "^6.33.0",
-		"@wordpress/warning": "^2.56.0",
+		"@wordpress/a11y": "^3.57.0",
+		"@wordpress/compose": "^6.34.0",
+		"@wordpress/date": "^4.57.0",
+		"@wordpress/deprecated": "^3.57.0",
+		"@wordpress/dom": "^3.57.0",
+		"@wordpress/element": "^5.34.0",
+		"@wordpress/escape-html": "^2.57.0",
+		"@wordpress/hooks": "^3.57.0",
+		"@wordpress/html-entities": "^3.57.0",
+		"@wordpress/i18n": "^4.57.0",
+		"@wordpress/icons": "^9.48.0",
+		"@wordpress/is-shallow-equal": "^4.57.0",
+		"@wordpress/keycodes": "^3.57.0",
+		"@wordpress/primitives": "^3.55.0",
+		"@wordpress/private-apis": "^0.39.0",
+		"@wordpress/rich-text": "^6.34.0",
+		"@wordpress/warning": "^2.57.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -85,5 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "280403b4c1cf6cc2c55a6c4d56f9ef91145e4191"
+	"gitHead": "581d8a5580dba8f600b7268d51eb554771ae482c"
 }

package/src/alignment-matrix-control/index.tsx

@@ -61,7 +61,9 @@ export function AlignmentMatrixControl( {
 		activeId: getItemId( baseId, value ),
 		setActiveId: ( nextActiveId ) => {
 			const nextValue = getItemValue( baseId, nextActiveId );
-			if ( nextValue ) onChange?.( nextValue );
+			if ( nextValue ) {
+				onChange?.( nextValue );
+			}
 		},
 		rtl: isRTL(),
 	} );

package/src/alignment-matrix-control/styles/alignment-matrix-control-styles.ts

@@ -7,7 +7,7 @@ import { css } from '@emotion/react';
 /**
  * Internal dependencies
  */
-import { COLORS, reduceMotion } from '../../utils';
+import { COLORS } from '../../utils';
 import type {
 	AlignmentMatrixControlProps,
 	AlignmentMatrixControlCellProps,
@@ -74,9 +74,10 @@ export const pointBase = (
 		box-sizing: border-box;
 		display: grid;
 		margin: auto;
-		transition: all 120ms linear;
+		@media not ( prefers-reduced-motion ) {
+			transition: all 120ms linear;
+		}
 
-		${ reduceMotion( 'transition' ) }
 		${ pointActive( props ) }
 	`;
 };

package/src/alignment-matrix-control/utils.tsx

@@ -65,7 +65,9 @@ export function getItemId(
 	value?: AlignmentMatrixControlValue
 ) {
 	const normalized = normalize( value );
-	if ( ! normalized ) return;
+	if ( ! normalized ) {
+		return;
+	}
 
 	const id = normalized.replace( ' ', '-' );
 	return `${ prefixId }-${ id }`;
@@ -94,7 +96,9 @@ export function getAlignmentIndex(
 	alignment: AlignmentMatrixControlValue = 'center'
 ) {
 	const normalized = normalize( alignment );
-	if ( ! normalized ) return undefined;
+	if ( ! normalized ) {
+		return undefined;
+	}
 
 	const index = ALIGNMENTS.indexOf( normalized );
 	return index > -1 ? index : undefined;

package/src/autocomplete/autocompleter-ui.tsx

@@ -55,7 +55,9 @@ export function getAutoCompleterUI( autocompleter: WPCompleter ) {
 			popoverRef,
 			useRefEffect(
 				( node ) => {
-					if ( ! contentRef.current ) return;
+					if ( ! contentRef.current ) {
+						return;
+					}
 
 					// If the popover is rendered in a different document than
 					// the content, we need to duplicate the options list in the

package/src/autocomplete/index.tsx

@@ -253,7 +253,9 @@ export function useAutocomplete( {
 
 	useEffect( () => {
 		if ( ! textContent ) {
-			if ( autocompleter ) reset();
+			if ( autocompleter ) {
+				reset();
+			}
 			return;
 		}
 
@@ -277,7 +279,9 @@ export function useAutocomplete( {
 		);
 
 		if ( ! completer ) {
-			if ( autocompleter ) reset();
+			if ( autocompleter ) {
+				reset();
+			}
 			return;
 		}
 
@@ -293,7 +297,9 @@ export function useAutocomplete( {
 		// significantly. This could happen, for example, if `matchingWhileBackspacing`
 		// is true and one of the "words" end up being too long. If that's the case,
 		// it will be caught by this guard.
-		if ( tooDistantFromTrigger ) return;
+		if ( tooDistantFromTrigger ) {
+			return;
+		}
 
 		const mismatch = filteredOptions.length === 0;
 		const wordsFromTrigger = textWithoutTrigger.split( /\s/ );
@@ -318,7 +324,9 @@ export function useAutocomplete( {
 			backspacing.current && wordsFromTrigger.length <= 3;
 
 		if ( mismatch && ! ( matchingWhileBackspacing || hasOneTriggerWord ) ) {
-			if ( autocompleter ) reset();
+			if ( autocompleter ) {
+				reset();
+			}
 			return;
 		}
 
@@ -333,7 +341,9 @@ export function useAutocomplete( {
 				textAfterSelection
 			)
 		) {
-			if ( autocompleter ) reset();
+			if ( autocompleter ) {
+				reset();
+			}
 			return;
 		}
 
@@ -341,12 +351,16 @@ export function useAutocomplete( {
 			/^\s/.test( textWithoutTrigger ) ||
 			/\s\s+$/.test( textWithoutTrigger )
 		) {
-			if ( autocompleter ) reset();
+			if ( autocompleter ) {
+				reset();
+			}
 			return;
 		}
 
 		if ( ! /[\u0000-\uFFFF]*$/.test( textWithoutTrigger ) ) {
-			if ( autocompleter ) reset();
+			if ( autocompleter ) {
+				reset();
+			}
 			return;
 		}
 

package/src/autocomplete/style.scss

@@ -1,6 +1,6 @@
 .components-autocomplete__popover .components-popover__content {
-	padding: $grid-unit-20;
-	min-width: 220px;
+	padding: $grid-unit-10;
+	min-width: 200px;
 }
 
 .components-autocomplete__result.components-button {
@@ -10,7 +10,13 @@
 	text-align: left;
 	width: 100%;
 
-	&.is-selected {
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
+	&:focus:not(:disabled) {
+		@include block-toolbar-button-style__focus();
+	}
+
+	&.is-selected,
+	&:not(:disabled,[aria-disabled="true"]):active {
+		background: $components-color-accent;
+		color: $white;
 	}
 }

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

@@ -80,6 +80,28 @@ describe( 'BoxControl', () => {
 			expect( input ).toHaveValue( '50' );
 			expect( screen.getByRole( 'slider' ) ).toHaveValue( '50' );
 		} );
+
+		it( 'should render the number input with a default min value of 0', () => {
+			render( <BoxControl onChange={ () => {} } /> );
+
+			const input = screen.getByRole( 'textbox', { name: 'All sides' } );
+
+			expect( input ).toHaveAttribute( 'min', '0' );
+		} );
+
+		it( 'should pass down `inputProps` to the underlying number input', () => {
+			render(
+				<BoxControl
+					onChange={ () => {} }
+					inputProps={ { min: 10, max: 50 } }
+				/>
+			);
+
+			const input = screen.getByRole( 'textbox', { name: 'All sides' } );
+
+			expect( input ).toHaveAttribute( 'min', '10' );
+			expect( input ).toHaveAttribute( 'max', '50' );
+		} );
 	} );
 
 	describe( 'Reset', () => {

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-1nwhnu3-View-Body-borderRadius-medium e19lxcc00"
-+     class="components-scrollable components-card__body components-card-body css-1w878rm-View-Scrollable-scrollableScrollbar-scrollY-Body-borderRadius-medium e19lxcc00"
+-     class="components-card__body components-card-body css-d0qyo2-PolymorphicDiv-Body-borderRadius-medium e19lxcc00"
++     class="components-scrollable components-card__body components-card-body css-vpf7zs-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-1nwhnu3-View-Body-borderRadius-medium e19lxcc00"
-+     class="components-card__body components-card-body css-2oh82v-View-Body-borderRadius-medium-shady e19lxcc00"
+-     class="components-card__body components-card-body css-d0qyo2-PolymorphicDiv-Body-borderRadius-medium e19lxcc00"
++     class="components-card__body components-card-body css-4zm8r0-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-120suhd-View-Flex-base-ItemsRow-Footer-borderRadius-borderColor-medium e19lxcc00"
-+     class="components-flex components-card__footer components-card-footer css-opd7jt-View-Flex-base-ItemsRow-Footer-borderRadius-borderColor-medium-shady e19lxcc00"
+-     class="components-flex components-card__footer components-card-footer css-1l4bmbt-PolymorphicDiv-Flex-base-ItemsRow-Footer-borderRadius-borderColor-medium e19lxcc00"
++     class="components-flex components-card__footer components-card-footer css-8pv7rj-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-120suhd-View-Flex-base-ItemsRow-Footer-borderRadius-borderColor-medium e19lxcc00"
-+     class="components-flex components-card__footer components-card-footer css-ys33kb-View-Flex-base-ItemsRow-Footer-borderRadius-borderColor-medium e19lxcc00"
+-     class="components-flex components-card__footer components-card-footer css-1l4bmbt-PolymorphicDiv-Flex-base-ItemsRow-Footer-borderRadius-borderColor-medium e19lxcc00"
++     class="components-flex components-card__footer components-card-footer css-1hguscv-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-3fkkv8-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-medium e19lxcc00"
-+     class="components-flex components-card__header components-card-header css-tedm3i-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-medium-shady e19lxcc00"
+-     class="components-flex components-card__header components-card-header css-1tfuk0d-PolymorphicDiv-Flex-base-ItemsRow-Header-borderRadius-borderColor-medium e19lxcc00"
++     class="components-flex components-card__header components-card-header css-10qs2ur-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-mgwsf4-View-Content e19lxcc00"
+        class="css-76dw7d-PolymorphicDiv-Content e19lxcc00"
       >
         <div
--         class="components-flex components-card__header components-card-header css-3fkkv8-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-medium e19lxcc00"
-+         class="components-flex components-card__header components-card-header css-2feznw-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-large e19lxcc00"
+-         class="components-flex components-card__header components-card-header css-1tfuk0d-PolymorphicDiv-Flex-base-ItemsRow-Header-borderRadius-borderColor-medium e19lxcc00"
++         class="components-flex components-card__header components-card-header css-d1c2bv-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-1nwhnu3-View-Body-borderRadius-medium e19lxcc00"
-+         class="components-card__body components-card-body css-1nonx1n-View-Body-borderRadius-large e19lxcc00"
+-         class="components-card__body components-card-body css-d0qyo2-PolymorphicDiv-Body-borderRadius-medium e19lxcc00"
++         class="components-card__body components-card-body css-kub9fa-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-mgwsf4-View-Content e19lxcc00"
+        class="css-76dw7d-PolymorphicDiv-Content e19lxcc00"
       >
         <div
--         class="components-flex components-card__header components-card-header css-ed5e1x-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-large-borderless e19lxcc00"
-+         class="components-flex components-card__header components-card-header css-1f9ii60-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-small e19lxcc00"
+-         class="components-flex components-card__header components-card-header css-1xfrxuu-PolymorphicDiv-Flex-base-ItemsRow-Header-borderRadius-borderColor-large-borderless e19lxcc00"
++         class="components-flex components-card__header components-card-header css-1mitrbv-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-1nonx1n-View-Body-borderRadius-large e19lxcc00"
-+         class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium e19lxcc00"
+-         class="components-card__body components-card-body css-kub9fa-PolymorphicDiv-Body-borderRadius-large e19lxcc00"
++         class="components-card__body components-card-body css-d0qyo2-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-ide17g-View-Flex-base-ItemsRow-Footer-borderRadius-borderColor-large-borderless e19lxcc00"
-+         class="components-flex components-card__footer components-card-footer css-jsws2e-View-Flex-base-ItemsRow-Footer-borderRadius-borderColor-xSmallCardPadding e19lxcc00"
+-         class="components-flex components-card__footer components-card-footer css-8o7z5w-PolymorphicDiv-Flex-base-ItemsRow-Footer-borderRadius-borderColor-large-borderless e19lxcc00"
++         class="components-flex components-card__footer components-card-footer css-1umuqb4-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-hkvggq-View-Surface-getBorders-primary-Card-boxShadowless-rounded e19lxcc00"
-+     class="components-surface components-card css-nsno0f-View-Surface-getBorders-primary-Card-rounded e19lxcc00"
+-     class="components-surface components-card css-5ubhkm-PolymorphicDiv-Surface-getBorders-primary-Card-boxShadowless-rounded e19lxcc00"
++     class="components-surface components-card css-1lc0qq8-PolymorphicDiv-Surface-getBorders-primary-Card-rounded e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="Card"
     >
       <div
-        class="css-mgwsf4-View-Content e19lxcc00"
+        class="css-76dw7d-PolymorphicDiv-Content e19lxcc00"
       >
         <div
--         class="components-flex components-card__header components-card-header css-ed5e1x-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-large-borderless e19lxcc00"
-+         class="components-flex components-card__header components-card-header css-1f9ii60-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-small e19lxcc00"
+-         class="components-flex components-card__header components-card-header css-1xfrxuu-PolymorphicDiv-Flex-base-ItemsRow-Header-borderRadius-borderColor-large-borderless e19lxcc00"
++         class="components-flex components-card__header components-card-header css-1mitrbv-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-1nonx1n-View-Body-borderRadius-large e19lxcc00"
-+         class="components-card__body components-card-body css-5spj1a-View-Body-borderRadius-small e19lxcc00"
+-         class="components-card__body components-card-body css-kub9fa-PolymorphicDiv-Body-borderRadius-large e19lxcc00"
++         class="components-card__body components-card-body css-1djcdvu-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-ide17g-View-Flex-base-ItemsRow-Footer-borderRadius-borderColor-large-borderless e19lxcc00"
-+         class="components-flex components-card__footer components-card-footer css-1ih54yp-View-Flex-base-ItemsRow-Footer-borderRadius-borderColor-small e19lxcc00"
+-         class="components-flex components-card__footer components-card-footer css-8o7z5w-PolymorphicDiv-Flex-base-ItemsRow-Footer-borderRadius-borderColor-large-borderless e19lxcc00"
++         class="components-flex components-card__footer components-card-footer css-1awxp6o-PolymorphicDiv-Flex-base-ItemsRow-Footer-borderRadius-borderColor-small e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="CardFooter"
         >
@@ -370,14 +370,13 @@ exports[`Card Card component should render correctly 1`] = `
   left: 0;
   right: 0;
   top: 0;
-  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
-  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
   border-radius: 2px;
 }
 
-@media ( prefers-reduced-motion: reduce ) {
+@media not ( prefers-reduced-motion ) {
   .emotion-18 {
-    transition-duration: 0ms;
+    -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+    transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
   }
 }
 
@@ -470,15 +469,15 @@ Snapshot Diff:
       </div>
       <div
         aria-hidden="true"
--       class="components-elevation css-1lsfy80-View-Elevation-sx-Base-elevationClassName e19lxcc00"
-+       class="components-elevation css-15t1t3g-View-Elevation-sx-Base-elevationClassName e19lxcc00"
+-       class="components-elevation css-1dd80bh-PolymorphicDiv-Elevation-sx-Base-sx-Base-elevationClassName e19lxcc00"
++       class="components-elevation css-1jg41yu-PolymorphicDiv-Elevation-sx-Base-sx-Base-elevationClassName e19lxcc00"
         data-wp-c16t="true"
         data-wp-component="Elevation"
       />
       <div
         aria-hidden="true"
--       class="components-elevation css-18cl04p-View-Elevation-sx-Base-elevationClassName e19lxcc00"
-+       class="components-elevation css-15t1t3g-View-Elevation-sx-Base-elevationClassName e19lxcc00"
+-       class="components-elevation css-iuptql-PolymorphicDiv-Elevation-sx-Base-sx-Base-elevationClassName e19lxcc00"
++       class="components-elevation css-1jg41yu-PolymorphicDiv-Elevation-sx-Base-sx-Base-elevationClassName e19lxcc00"
         data-wp-c16t="true"
         data-wp-component="Elevation"
       />
@@ -519,14 +518,13 @@ exports[`Card Card component should warn when the isElevated prop is passed 1`]
   left: 0;
   right: 0;
   top: 0;
-  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
-  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
   border-radius: 2px;
 }
 
-@media ( prefers-reduced-motion: reduce ) {
+@media not ( prefers-reduced-motion ) {
   .emotion-4 {
-    transition-duration: 0ms;
+    -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+    transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
   }
 }
 
@@ -544,14 +542,13 @@ exports[`Card Card component should warn when the isElevated prop is passed 1`]
   left: 0;
   right: 0;
   top: 0;
-  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
-  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
   border-radius: 2px;
 }
 
-@media ( prefers-reduced-motion: reduce ) {
+@media not ( prefers-reduced-motion ) {
   .emotion-6 {
-    transition-duration: 0ms;
+    -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+    transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
   }
 }
 

package/src/checkbox-control/index.tsx

@@ -16,6 +16,7 @@ import { Icon, check, reset } from '@wordpress/icons';
  * Internal dependencies
  */
 import BaseControl from '../base-control';
+import { HStack } from '../h-stack';
 import type { CheckboxControlProps } from './types';
 import type { WordPressComponentProps } from '../context';
 
@@ -95,44 +96,52 @@ export function CheckboxControl(
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 			label={ heading }
 			id={ id }
-			help={ help }
+			help={
+				help && (
+					<span className="components-checkbox-control__help">
+						{ help }
+					</span>
+				)
+			}
 			className={ classnames( 'components-checkbox-control', className ) }
 		>
-			<span className="components-checkbox-control__input-container">
-				<input
-					ref={ ref }
-					id={ id }
-					className="components-checkbox-control__input"
-					type="checkbox"
-					value="1"
-					onChange={ onChangeValue }
-					checked={ checked }
-					aria-describedby={ !! help ? id + '__help' : undefined }
-					{ ...additionalProps }
-				/>
-				{ showIndeterminateIcon ? (
-					<Icon
-						icon={ reset }
-						className="components-checkbox-control__indeterminate"
-						role="presentation"
-					/>
-				) : null }
-				{ showCheckedIcon ? (
-					<Icon
-						icon={ check }
-						className="components-checkbox-control__checked"
-						role="presentation"
+			<HStack spacing={ 0 } justify="start" alignment="top">
+				<span className="components-checkbox-control__input-container">
+					<input
+						ref={ ref }
+						id={ id }
+						className="components-checkbox-control__input"
+						type="checkbox"
+						value="1"
+						onChange={ onChangeValue }
+						checked={ checked }
+						aria-describedby={ !! help ? id + '__help' : undefined }
+						{ ...additionalProps }
 					/>
-				) : null }
-			</span>
-			{ label && (
-				<label
-					className="components-checkbox-control__label"
-					htmlFor={ id }
-				>
-					{ label }
-				</label>
-			) }
+					{ showIndeterminateIcon ? (
+						<Icon
+							icon={ reset }
+							className="components-checkbox-control__indeterminate"
+							role="presentation"
+						/>
+					) : null }
+					{ showCheckedIcon ? (
+						<Icon
+							icon={ check }
+							className="components-checkbox-control__checked"
+							role="presentation"
+						/>
+					) : null }
+				</span>
+				{ label && (
+					<label
+						className="components-checkbox-control__label"
+						htmlFor={ id }
+					>
+						{ label }
+					</label>
+				) }
+			</HStack>
 		</BaseControl>
 	);
 }

package/src/checkbox-control/style.scss

@@ -7,6 +7,11 @@
 	}
 }
 
+.components-checkbox-control__label {
+	// Ensure label is aligned with checkbox along X axis
+	line-height: var(--checkbox-input-size);
+}
+
 .components-checkbox-control__input[type="checkbox"] {
 	@include checkbox-control;
 	background: $white;
@@ -50,10 +55,11 @@
 .components-checkbox-control__input-container {
 	position: relative;
 	display: inline-block;
-	margin-right: 12px;
+	margin-right: $grid-unit-15;
 	vertical-align: middle;
 	width: var(--checkbox-input-size);
 	aspect-ratio: 1;
+	flex-shrink: 0;
 }
 
 svg.components-checkbox-control__checked,
@@ -75,3 +81,8 @@ svg.components-checkbox-control__indeterminate {
 		--checkmark-size: calc(var(--checkbox-input-size) + 4px);
 	}
 }
+
+.components-checkbox-control__help {
+	display: inline-block;
+	margin-inline-start: calc(var(--checkbox-input-size) + #{$grid-unit-15});
+}