@wordpress/components 28.7.0 → 28.8.0

package/build-types/utils/element-rect.d.ts

@@ -1,79 +1,27 @@
-/**
- * `useTrackElementRectUpdates` options.
- */
-export type UseTrackElementRectUpdatesOptions = {
-    /**
-     * Whether to trigger the callback when an element's ResizeObserver is
-     * first set up, including when the target element changes.
-     *
-     * @default true
-     */
-    fireOnElementInit?: boolean;
-};
-/**
- * Tracks an element's "rect" (size and position) and fires `onRect` for all
- * of its discrete values. The element can be changed dynamically and **it
- * must not be stored in a ref**. Instead, it should be stored in a React
- * state or equivalent.
- *
- * By default, `onRect` is called initially for the target element (including
- * when the target element changes), not only on size or position updates.
- * This allows consumers of the hook to always be in sync with all rect values
- * of the target element throughout its lifetime. This behavior can be
- * disabled by setting the `fireOnElementInit` option to `false`.
- *
- * Under the hood, it sets up a `ResizeObserver` that tracks the element. The
- * target element can be changed dynamically, and the observer will be
- * updated accordingly.
- *
- * @example
- *
- * ```tsx
- * const [ targetElement, setTargetElement ] = useState< HTMLElement | null >();
- *
- * useTrackElementRectUpdates( targetElement, ( element ) => {
- *   console.log( 'Element resized:', element );
- * } );
- *
- * <div ref={ setTargetElement } />;
- * ```
- */
-export declare function useTrackElementRectUpdates(
-/**
- * The target element to observe. It can be changed dynamically.
- */
-targetElement: HTMLElement | undefined | null, 
-/**
- * Callback to fire when the element is resized. It will also be
- * called when the observer is set up, unless `fireOnElementInit` is
- * set to `false`.
- */
-onRect: (
-/**
- * The element being tracked at the time of this update.
- */
-element: HTMLElement, 
-/**
- * The list of
- * [`ResizeObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry)
- * objects passed to the `ResizeObserver.observe` callback. This list
- * won't be available when the observer is set up, and only on updates.
- */
-resizeObserverEntries?: ResizeObserverEntry[]) => void, { fireOnElementInit }?: UseTrackElementRectUpdatesOptions): void;
 /**
  * The position and dimensions of an element, relative to its offset parent.
  */
 export type ElementOffsetRect = {
     /**
-     * The distance from the left edge of the offset parent to the left edge of
+     * The distance from the top edge of the offset parent to the top edge of
      * the element.
      */
-    left: number;
+    top: number;
     /**
-     * The distance from the top edge of the offset parent to the top edge of
+     * The distance from the right edge of the offset parent to the right edge
+     * of the element.
+     */
+    right: number;
+    /**
+     * The distance from the bottom edge of the offset parent to the bottom edge
+     * of the element.
+     */
+    bottom: number;
+    /**
+     * The distance from the left edge of the offset parent to the left edge of
      * the element.
      */
-    top: number;
+    left: number;
     /**
      * The width of the element.
      */
@@ -87,25 +35,35 @@ export type ElementOffsetRect = {
  * An `ElementOffsetRect` object with all values set to zero.
  */
 export declare const NULL_ELEMENT_OFFSET_RECT: {
-    left: number;
     top: number;
+    right: number;
+    bottom: number;
+    left: number;
     width: number;
     height: number;
 };
 /**
  * Returns the position and dimensions of an element, relative to its offset
- * parent. This is useful in contexts where `getBoundingClientRect` is not
- * suitable, such as when the element is transformed.
+ * parent, with subpixel precision. Values reflect the real measures before any
+ * potential scaling distortions along the X and Y axes.
  *
- * **Note:** the `left` and `right` values are adjusted due to a limitation
- * in the way the browser calculates the offset position of the element,
- * which can cause unwanted scrollbars to appear. This adjustment makes the
- * values potentially inaccurate within a range of 1 pixel.
+ * Useful in contexts where plain `getBoundingClientRect` calls or `ResizeObserver`
+ * entries are not suitable, such as when the element is transformed, and when
+ * `element.offset<Top|Left|Width|Height>` methods are not precise enough.
+ *
+ * **Note:** in some contexts, like when the scale is 0, this method will fail
+ * because it's impossible to calculate a scaling ratio. When that happens, it
+ * will return `undefined`.
  */
-export declare function getElementOffsetRect(element: HTMLElement): ElementOffsetRect;
+export declare function getElementOffsetRect(element: HTMLElement): ElementOffsetRect | undefined;
 /**
  * Tracks the position and dimensions of an element, relative to its offset
  * parent. The element can be changed dynamically.
+ *
+ * **Note:** sometimes, the measurement will fail (see `getElementOffsetRect`'s
+ * documentation for more details). When that happens, this hook will attempt
+ * to measure again after a frame, and if that fails, it will poll every 100
+ * milliseconds until it succeeds.
  */
 export declare function useTrackElementOffsetRect(targetElement: HTMLElement | undefined | null): ElementOffsetRect;
 //# sourceMappingURL=element-rect.d.ts.map

package/build-types/utils/element-rect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"element-rect.d.ts","sourceRoot":"","sources":["../../src/utils/element-rect.ts"],"names":[],"mappings":"AAUA;;GAEG;AACH,MAAM,MAAM,iCAAiC,GAAG;IAC/C;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,0BAA0B;AACzC;;GAEG;AACH,aAAa,EAAE,WAAW,GAAG,SAAS,GAAG,IAAI;AAC7C;;;;GAIG;AACH,MAAM,EAAE;AACP;;GAEG;AACH,OAAO,EAAE,WAAW;AACpB;;;;;GAKG;AACH,qBAAqB,CAAC,EAAE,mBAAmB,EAAE,KACzC,IAAI,EACT,EAAE,iBAAwB,EAAE,GAAE,iCAAsC,QA0CpE;AAED;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC/B;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,wBAAwB;;;;;CAKR,CAAC;AAE9B;;;;;;;;;GASG;AACH,wBAAgB,oBAAoB,CACnC,OAAO,EAAE,WAAW,GAClB,iBAAiB,CAanB;AAED;;;GAGG;AACH,wBAAgB,yBAAyB,CACxC,aAAa,EAAE,WAAW,GAAG,SAAS,GAAG,IAAI,qBAU7C"}
+{"version":3,"file":"element-rect.d.ts","sourceRoot":"","sources":["../../src/utils/element-rect.ts"],"names":[],"mappings":"AAWA;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC/B;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,wBAAwB;;;;;;;CAOR,CAAC;AAE9B;;;;;;;;;;;;GAYG;AACH,wBAAgB,oBAAoB,CACnC,OAAO,EAAE,WAAW,GAClB,iBAAiB,GAAG,SAAS,CAmC/B;AAID;;;;;;;;GAQG;AACH,wBAAgB,yBAAyB,CACxC,aAAa,EAAE,WAAW,GAAG,SAAS,GAAG,IAAI,qBAoC7C"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "28.7.0",
+	"version": "28.8.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -43,23 +43,23 @@
 		"@types/gradient-parser": "0.1.3",
 		"@types/highlight-words-core": "1.2.1",
 		"@use-gesture/react": "^10.3.1",
-		"@wordpress/a11y": "^4.7.0",
-		"@wordpress/compose": "^7.7.0",
-		"@wordpress/date": "^5.7.0",
-		"@wordpress/deprecated": "^4.7.0",
-		"@wordpress/dom": "^4.7.0",
-		"@wordpress/element": "^6.7.0",
-		"@wordpress/escape-html": "^3.7.0",
-		"@wordpress/hooks": "^4.7.0",
-		"@wordpress/html-entities": "^4.7.0",
-		"@wordpress/i18n": "^5.7.0",
-		"@wordpress/icons": "^10.7.0",
-		"@wordpress/is-shallow-equal": "^5.7.0",
-		"@wordpress/keycodes": "^4.7.0",
-		"@wordpress/primitives": "^4.7.0",
-		"@wordpress/private-apis": "^1.7.0",
-		"@wordpress/rich-text": "^7.7.0",
-		"@wordpress/warning": "^3.7.0",
+		"@wordpress/a11y": "^4.8.0",
+		"@wordpress/compose": "^7.8.0",
+		"@wordpress/date": "^5.8.0",
+		"@wordpress/deprecated": "^4.8.0",
+		"@wordpress/dom": "^4.8.0",
+		"@wordpress/element": "^6.8.0",
+		"@wordpress/escape-html": "^3.8.0",
+		"@wordpress/hooks": "^4.8.0",
+		"@wordpress/html-entities": "^4.8.0",
+		"@wordpress/i18n": "^5.8.0",
+		"@wordpress/icons": "^10.8.0",
+		"@wordpress/is-shallow-equal": "^5.8.0",
+		"@wordpress/keycodes": "^4.8.0",
+		"@wordpress/primitives": "^4.8.0",
+		"@wordpress/private-apis": "^1.8.0",
+		"@wordpress/rich-text": "^7.8.0",
+		"@wordpress/warning": "^3.8.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -75,7 +75,6 @@
 		"re-resizable": "^6.4.0",
 		"react-colorful": "^5.3.1",
 		"remove-accents": "^0.5.0",
-		"use-lilius": "^2.0.5",
 		"uuid": "^9.0.1"
 	},
 	"peerDependencies": {
@@ -85,5 +84,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c90d920de07c53dff82c5914635b56fafa503b7f"
+	"gitHead": "cecf5e14d317aa67407f77a7e5c8b6a43016bd42"
 }

package/src/box-control/README.md

@@ -100,3 +100,10 @@ A handler for onMouseOver events.
 A handler for onMouseOut events.
 
 -   Required: No
+
+### `__next40pxDefaultSize`: `boolean`
+
+Start opting into the larger default size that will become the default size in a future version.
+
+-   Required: No
+-   Default: `false`

package/src/box-control/all-input-control.tsx

@@ -10,7 +10,6 @@ import {
 	FlexedRangeControl,
 	StyledUnitControl,
 } from './styles/box-control-styles';
-import { HStack } from '../h-stack';
 import type { BoxControlInputControlProps } from './types';
 import { parseQuantityAndUnitFromRawValue } from '../unit-control';
 import {
@@ -72,7 +71,7 @@ export default function AllInputControl( {
 	};
 
 	return (
-		<HStack>
+		<>
 			<StyledUnitControl
 				{ ...props }
 				__next40pxDefaultSize={ __next40pxDefaultSize }
@@ -104,6 +103,6 @@ export default function AllInputControl( {
 				value={ parsedQuantity ?? 0 }
 				withInputField={ false }
 			/>
-		</HStack>
+		</>
 	);
 }

package/src/box-control/utils.ts

@@ -179,7 +179,7 @@ export function isValuesMixed(
  */
 export function isValuesDefined( values?: BoxControlValue ) {
 	return (
-		values !== undefined &&
+		values &&
 		Object.values( values ).filter(
 			// Switching units when input is empty causes values only
 			// containing units. This gives false positive on mixed values

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -22,18 +22,13 @@ const meta: Meta< typeof ButtonGroup > = {
 };
 export default meta;
 
-const Template: StoryFn< typeof ButtonGroup > = ( args ) => {
-	const style = { margin: '0 4px' };
-	return (
-		<ButtonGroup { ...args }>
-			<Button variant="primary" style={ style }>
-				Button 1
-			</Button>
-			<Button variant="primary" style={ style }>
-				Button 2
-			</Button>
-		</ButtonGroup>
-	);
+export const Default: StoryObj< typeof ButtonGroup > = {
+	args: {
+		children: (
+			<>
+				<Button variant="primary">Button 1</Button>
+				<Button>Button 2</Button>
+			</>
+		),
+	},
 };
-
-export const Default: StoryFn< typeof ButtonGroup > = Template.bind( {} );

package/src/card/card/component.tsx

@@ -34,7 +34,7 @@ function UnconnectedCard(
 		size,
 		...otherProps
 	} = useCard( props );
-	const elevationBorderRadius = isRounded ? CONFIG.cardBorderRadius : 0;
+	const elevationBorderRadius = isRounded ? CONFIG.radiusLarge : 0;
 
 	const cx = useCx();
 

package/src/card/styles.ts

@@ -12,7 +12,7 @@ import { COLORS, CONFIG } from '../utils';
 // (as opposed to the `border` property), the value of the border radius needs
 // to be adjusted by removing 1px (this is because the `box-shadow` renders
 // as an "outer radius").
-const adjustedBorderRadius = `calc(${ CONFIG.cardBorderRadius } - 1px)`;
+const adjustedBorderRadius = `calc(${ CONFIG.radiusLarge } - 1px)`;
 
 export const Card = css`
 	box-shadow: 0 0 0 1px ${ CONFIG.surfaceBorderColor };

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-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"
+-     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"
       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-d0qyo2-PolymorphicDiv-Body-borderRadius-medium e19lxcc00"
-+     class="components-card__body components-card-body css-4zm8r0-PolymorphicDiv-Body-borderRadius-medium-shady e19lxcc00"
+-     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"
       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-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"
+-     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"
       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-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"
+-     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"
       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-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"
+-     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"
       data-wp-c16t="true"
       data-wp-component="CardHeader"
     >
@@ -96,16 +96,16 @@ Snapshot Diff:
         class="css-76dw7d-PolymorphicDiv-Content e19lxcc00"
       >
         <div
--         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"
+-         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"
           data-wp-c16t="true"
           data-wp-component="CardHeader"
         >
           Header
         </div>
         <div
--         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"
+-         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"
           data-wp-c16t="true"
           data-wp-component="CardBody"
         >
@@ -122,7 +122,7 @@ Snapshot Diff:
   Array [
     Object {
       "background-color": "#fff",
--     "border-radius": "calc(2px - 1px)",
+-     "border-radius": "calc(8px - 1px)",
       "box-shadow": "0 0 0 1px rgba(0, 0, 0, 0.1)",
       "color": "#1e1e1e",
       "outline": "none",
@@ -141,24 +141,24 @@ Snapshot Diff:
         class="css-76dw7d-PolymorphicDiv-Content e19lxcc00"
       >
         <div
--         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"
+-         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"
           data-wp-c16t="true"
           data-wp-component="CardHeader"
         >
           Header
         </div>
         <div
--         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"
+-         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"
           data-wp-c16t="true"
           data-wp-component="CardBody"
         >
           Body
         </div>
         <div
--         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"
+-         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"
           data-wp-c16t="true"
           data-wp-component="CardFooter"
         >
@@ -174,8 +174,8 @@ Snapshot Diff:
 @@ -1,30 +1,30 @@
   <div>
     <div
--     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"
+-     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"
       data-wp-c16t="true"
       data-wp-component="Card"
     >
@@ -183,24 +183,24 @@ Snapshot Diff:
         class="css-76dw7d-PolymorphicDiv-Content e19lxcc00"
       >
         <div
--         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"
+-         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"
           data-wp-c16t="true"
           data-wp-component="CardHeader"
         >
           Header
         </div>
         <div
--         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"
+-         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"
           data-wp-c16t="true"
           data-wp-component="CardBody"
         >
           Body
         </div>
         <div
--         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"
+-         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"
           data-wp-c16t="true"
           data-wp-component="CardFooter"
         >
@@ -215,7 +215,7 @@ exports[`Card Card component should render correctly 1`] = `
   position: relative;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
   outline: none;
-  border-radius: calc(2px - 1px);
+  border-radius: calc(8px - 1px);
 }
 
 .emotion-2 {
@@ -254,13 +254,13 @@ exports[`Card Card component should render correctly 1`] = `
 }
 
 .emotion-4:first-of-type {
-  border-top-left-radius: calc(2px - 1px);
-  border-top-right-radius: calc(2px - 1px);
+  border-top-left-radius: calc(8px - 1px);
+  border-top-right-radius: calc(8px - 1px);
 }
 
 .emotion-4:last-of-type {
-  border-bottom-left-radius: calc(2px - 1px);
-  border-bottom-right-radius: calc(2px - 1px);
+  border-bottom-left-radius: calc(8px - 1px);
+  border-bottom-right-radius: calc(8px - 1px);
 }
 
 .emotion-6 {
@@ -271,13 +271,13 @@ exports[`Card Card component should render correctly 1`] = `
 }
 
 .emotion-6:first-of-type {
-  border-top-left-radius: calc(2px - 1px);
-  border-top-right-radius: calc(2px - 1px);
+  border-top-left-radius: calc(8px - 1px);
+  border-top-right-radius: calc(8px - 1px);
 }
 
 .emotion-6:last-of-type {
-  border-bottom-left-radius: calc(2px - 1px);
-  border-bottom-right-radius: calc(2px - 1px);
+  border-bottom-left-radius: calc(8px - 1px);
+  border-bottom-right-radius: calc(8px - 1px);
 }
 
 .emotion-10 {
@@ -306,13 +306,13 @@ exports[`Card Card component should render correctly 1`] = `
 }
 
 .emotion-14:first-of-type {
-  border-top-left-radius: calc(2px - 1px);
-  border-top-right-radius: calc(2px - 1px);
+  border-top-left-radius: calc(8px - 1px);
+  border-top-right-radius: calc(8px - 1px);
 }
 
 .emotion-14:last-of-type {
-  border-bottom-left-radius: calc(2px - 1px);
-  border-bottom-right-radius: calc(2px - 1px);
+  border-bottom-left-radius: calc(8px - 1px);
+  border-bottom-right-radius: calc(8px - 1px);
 }
 
 .emotion-16 {
@@ -347,13 +347,13 @@ exports[`Card Card component should render correctly 1`] = `
 }
 
 .emotion-16:first-of-type {
-  border-top-left-radius: calc(2px - 1px);
-  border-top-right-radius: calc(2px - 1px);
+  border-top-left-radius: calc(8px - 1px);
+  border-top-right-radius: calc(8px - 1px);
 }
 
 .emotion-16:last-of-type {
-  border-bottom-left-radius: calc(2px - 1px);
-  border-bottom-right-radius: calc(2px - 1px);
+  border-bottom-left-radius: calc(8px - 1px);
+  border-bottom-right-radius: calc(8px - 1px);
 }
 
 .emotion-18 {
@@ -370,7 +370,7 @@ exports[`Card Card component should render correctly 1`] = `
   left: 0;
   right: 0;
   top: 0;
-  border-radius: 2px;
+  border-radius: 8px;
 }
 
 @media not ( prefers-reduced-motion ) {
@@ -469,15 +469,15 @@ Snapshot Diff:
       </div>
       <div
         aria-hidden="true"
--       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"
+-       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"
         data-wp-c16t="true"
         data-wp-component="Elevation"
       />
       <div
         aria-hidden="true"
--       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"
+-       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"
         data-wp-c16t="true"
         data-wp-component="Elevation"
       />
@@ -497,7 +497,7 @@ exports[`Card Card component should warn when the isElevated prop is passed 1`]
   position: relative;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
   outline: none;
-  border-radius: calc(2px - 1px);
+  border-radius: calc(8px - 1px);
 }
 
 .emotion-2 {
@@ -518,7 +518,7 @@ exports[`Card Card component should warn when the isElevated prop is passed 1`]
   left: 0;
   right: 0;
   top: 0;
-  border-radius: 2px;
+  border-radius: 8px;
 }
 
 @media not ( prefers-reduced-motion ) {
@@ -542,7 +542,7 @@ exports[`Card Card component should warn when the isElevated prop is passed 1`]
   left: 0;
   right: 0;
   top: 0;
-  border-radius: 2px;
+  border-radius: 8px;
 }
 
 @media not ( prefers-reduced-motion ) {

package/src/combobox-control/README.md

@@ -111,6 +111,13 @@ If the control is clicked, the dropdown will expand regardless of this prop.
 -   Required: No
 -   Default: `true`
 
+### placeholder
+
+If passed, the combobox input will show a placeholder string if no values are present.
+
+-   Type: `string`
+-   Required: No
+
 #### __experimentalRenderItem
 
 Custom renderer invoked for each option in the suggestion list. The render prop receives as its argument an object containing, under the `item` key, the single option's data (directly from the array of data passed to the `options` prop).

package/src/combobox-control/index.tsx

@@ -129,6 +129,7 @@ function ComboboxControl( props: ComboboxControlProps ) {
 		},
 		__experimentalRenderItem,
 		expandOnFocus = true,
+		placeholder,
 	} = useDeprecated36pxDefaultSizeProp( props );
 
 	const [ value, setValue ] = useControlledValue( {
@@ -340,6 +341,7 @@ function ComboboxControl( props: ComboboxControlProps ) {
 								className="components-combobox-control__input"
 								instanceId={ instanceId }
 								ref={ inputContainer }
+								placeholder={ placeholder }
 								value={ isExpanded ? inputValue : currentLabel }
 								onFocus={ onFocus }
 								onBlur={ onBlur }