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

package/build-types/utils/rtl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rtl.d.ts","sourceRoot":"","sources":["../../src/utils/rtl.js"],"names":[],"mappings":"AAkEA;;;;;;;GAOG;AACH,gCALW,OAAO,OAAO,EAAE,aAAa,cAC7B,OAAO,OAAO,EAAE,aAAa,GAE5B,MAAM,OAAO,gBAAgB,EAAE,gBAAgB,CAY1D;;IAED;;;;;;;;;;;OAWG;IACH,0BAAyB;;AAzClB,4CAJI,OAAO,OAAO,EAAE,aAAa,GAE5B,OAAO,OAAO,EAAE,aAAa,CASxC"}
+{"version":3,"file":"rtl.d.ts","sourceRoot":"","sources":["../../src/utils/rtl.js"],"names":[],"mappings":"AAkEA;;;;;;;GAOG;AACH,gCALW,KAAK,CAAC,aAAa,cACnB,KAAK,CAAC,aAAa,GAElB,MAAM,OAAO,gBAAgB,EAAE,gBAAgB,CAY1D;;IAED;;;;;;;;;;;OAWG;IACH,0BAAyB;;AAzClB,4CAJI,KAAK,CAAC,aAAa,GAElB,KAAK,CAAC,aAAa,CAS9B"}

package/build-types/utils/use-responsive-value.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-responsive-value.d.ts","sourceRoot":"","sources":["../../src/utils/use-responsive-value.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,kBAAkB,GAC9B,UAAS;IAAE,YAAY,CAAC,EAAE,MAAM,CAAA;CAAO,WA6CvC,CAAC;AAEF,wBAAgB,kBAAkB,CAAE,CAAC,EACpC,MAAM,EAAE,CAAE,CAAC,GAAG,SAAS,CAAE,EAAE,EAC3B,OAAO,GAAE,UAAU,CAAE,OAAO,kBAAkB,CAAE,CAAE,CAAC,CAAO,GACxD,CAAC,GAAG,SAAS,CAef"}
+{"version":3,"file":"use-responsive-value.d.ts","sourceRoot":"","sources":["../../src/utils/use-responsive-value.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,kBAAkB,GAC9B,UAAS;IAAE,YAAY,CAAC,EAAE,MAAM,CAAA;CAAO,WA6CvC,CAAC;AAEF,wBAAgB,kBAAkB,CAAE,CAAC,EACpC,MAAM,EAAE,CAAE,CAAC,GAAG,SAAS,CAAE,EAAE,EAC3B,OAAO,GAAE,UAAU,CAAE,OAAO,kBAAkB,CAAE,CAAE,CAAC,CAAO,GACxD,CAAC,GAAG,SAAS,CAWf"}

package/build-types/v-stack/hook.d.ts

@@ -16,7 +16,7 @@ export declare function useVStack(props: WordPressComponentProps<VStackProps, 'd
     hidden?: boolean | undefined | undefined;
     key?: import("react").Key | null | undefined;
     children: import("react").ReactNode;
-    as?: keyof JSX.IntrinsicElements | undefined;
+    as?: keyof import("react").JSX.IntrinsicElements | undefined;
     suppressHydrationWarning?: boolean | undefined | undefined;
     id?: string | undefined | undefined;
     lang?: string | undefined | undefined;

package/build-types/v-stack/stories/index.story.d.ts

@@ -9,6 +9,6 @@ export declare const Default: import("storybook/internal/csf").AnnotatedStoryFn<
     alignment?: import("../../h-stack/types").HStackAlignment | import("react").CSSProperties["alignItems"];
     spacing?: import("react").CSSProperties["width"];
 } & import("react").RefAttributes<any> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "direction" | "wrap" | "expanded" | "justify" | "children" | "as" | "spacing" | keyof import("react").RefAttributes<any> | "isReversed" | "alignment"> & {
-    as?: keyof JSX.IntrinsicElements | undefined;
+    as?: keyof import("react").JSX.IntrinsicElements | undefined;
 }>;
 //# sourceMappingURL=index.story.d.ts.map

package/build-types/v-stack/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/v-stack/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,uBAAuB,CAAC;AAM3D,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC;AAgB5B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,MAAM,CAoB9B,CAAC;AACF,eAAe,IAAI,CAAC;AAiBpB,eAAO,MAAM,OAAO;;;;;EAAsB,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/v-stack/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,uBAAuB,CAAC;AAM3D,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC;AAgB5B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,MAAM,CAyB9B,CAAC;AACF,eAAe,IAAI,CAAC;AAiBpB,eAAO,MAAM,OAAO;;;;;EAAsB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"range-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/range-control.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAmCrD,eAAO,MAAM,qBAAqB;;;;aAAjB,CAAC;;;;;;;;;;;;;;qBAIiyF,CAAC;;;;;iCAAmuB,CAAC;;;;;;;;;;42BAFvhH,CAAC"}
+{"version":3,"file":"range-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/range-control.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAmCrD,eAAO,MAAM,qBAAqB;;;;aAAxB,CAAC;;;;;;;;;;;;;;qBAIiyF,CAAC;;;;;iCAAmuB,CAAC;;;;;;;;;;42BAFhhH,CAAC"}

package/build-types/validated-form-controls/components/stories/overview.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overview.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/overview.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAU5D;;GAEG;AACH,OAAO,EAAE,qBAAqB,EAAE,MAAM,IAAI,CAAC;AAE3C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAOjE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,gBAAgB,CAMxC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,gBAAgB,CAAE,CAAC;AAEjD;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAyClC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,EAAE,KA2CrC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,EAAE,QAAQ,CAAE,OAAO,qBAAqB,CA6DnE,CAAC;AAiFF;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,EAAE,QAAQ,CAAE,OAAO,qBAAqB,CA4BxE,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,6BAA6B,EAAE,QAAQ,CACnD,OAAO,qBAAqB,CAsC5B,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,EAAE,QAAQ,CAAE,OAAO,qBAAqB,CAwEnE,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,EAAE,QAAQ,CAAE,OAAO,qBAAqB,CAkEzE,CAAC"}
+{"version":3,"file":"overview.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/overview.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAU5D;;GAEG;AACH,OAAO,EAAE,qBAAqB,EAAE,MAAM,IAAI,CAAC;AAE3C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAOjE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,gBAAgB,CAMxC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,gBAAgB,CAAE,CAAC;AAEjD;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAyClC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,EAAE,KA2CrC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,EAAE,QAAQ,CAAE,OAAO,qBAAqB,CA8DnE,CAAC;AAiFF;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,EAAE,QAAQ,CAAE,OAAO,qBAAqB,CA4BxE,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,6BAA6B,EAAE,QAAQ,CACnD,OAAO,qBAAqB,CAsC5B,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,EAAE,QAAQ,CAAE,OAAO,qBAAqB,CAwEnE,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,EAAE,QAAQ,CAAE,OAAO,qBAAqB,CAkEzE,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"toggle-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/toggle-control.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAqCrD,eAAO,MAAM,sBAAsB;;;;4XAElC,CAAC"}
+{"version":3,"file":"toggle-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/toggle-control.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAiCrD,eAAO,MAAM,sBAAsB;;;;4XAElC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/view/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAE3D;;GAEG;AACH,OAAO,EAAE,IAAI,EAAE,MAAM,IAAI,CAAC;AAE1B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,IAAI,CAY5B,CAAC;AACF,eAAe,IAAI,CAAC;AAMpB,eAAO,MAAM,OAAO,EAAE,OAAO,CAAE,OAAO,IAAI,CAAwB,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/view/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAE3D;;GAEG;AACH,OAAO,EAAE,IAAI,EAAE,MAAM,IAAI,CAAC;AAE1B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,IAAI,CAiB5B,CAAC;AACF,eAAe,IAAI,CAAC;AAMpB,eAAO,MAAM,OAAO,EAAE,OAAO,CAAE,OAAO,IAAI,CAAwB,CAAC"}

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,uBAAuB,CAAC;AAE3D;;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"}
+{"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,uBAAuB,CAAC;AAE3D;;GAEG;AACH,OAAO,EAAE,cAAc,EAAE,MAAM,IAAI,CAAC;AAEpC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,cAAc,CAkBtC,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/build-types/z-stack/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/z-stack/stories/index.story.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAO3D,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC;AAE5B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,MAAM,CAc9B,CAAC;AACF,eAAe,IAAI,CAAC;AAsCpB,eAAO,MAAM,OAAO,EAAE,OAAO,CAAE,OAAO,MAAM,CAAwB,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/z-stack/stories/index.story.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAO3D,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC;AAE5B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,MAAM,CAmB9B,CAAC;AACF,eAAe,IAAI,CAAC;AAsCpB,eAAO,MAAM,OAAO,EAAE,OAAO,CAAE,OAAO,MAAM,CAAwB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "32.1.1-next.v.0+5aba098fc",
+	"version": "32.2.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -51,37 +51,37 @@
 		"src/**/*.scss"
 	],
 	"dependencies": {
-		"@ariakit/react": "^0.4.15",
+		"@ariakit/react": "^0.4.21",
 		"@date-fns/utc": "^2.1.1",
-		"@emotion/cache": "^11.7.1",
-		"@emotion/css": "^11.7.1",
-		"@emotion/react": "^11.7.1",
-		"@emotion/serialize": "^1.0.2",
-		"@emotion/styled": "^11.6.0",
-		"@emotion/utils": "^1.0.0",
+		"@emotion/cache": "^11.14.0",
+		"@emotion/css": "^11.13.5",
+		"@emotion/react": "^11.14.0",
+		"@emotion/serialize": "^1.3.3",
+		"@emotion/styled": "^11.14.1",
+		"@emotion/utils": "^1.4.2",
 		"@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.39.1-next.v.0+5aba098fc",
-		"@wordpress/base-styles": "^6.15.1-next.v.0+5aba098fc",
-		"@wordpress/compose": "^7.39.1-next.v.0+5aba098fc",
-		"@wordpress/date": "^5.39.1-next.v.0+5aba098fc",
-		"@wordpress/deprecated": "^4.39.1-next.v.0+5aba098fc",
-		"@wordpress/dom": "^4.39.1-next.v.0+5aba098fc",
-		"@wordpress/element": "^6.39.1-next.v.0+5aba098fc",
-		"@wordpress/escape-html": "^3.39.1-next.v.0+5aba098fc",
-		"@wordpress/hooks": "^4.39.1-next.v.0+5aba098fc",
-		"@wordpress/html-entities": "^4.39.1-next.v.0+5aba098fc",
-		"@wordpress/i18n": "^6.12.1-next.v.0+5aba098fc",
-		"@wordpress/icons": "^11.6.1-next.v.0+5aba098fc",
-		"@wordpress/is-shallow-equal": "^5.39.1-next.v.0+5aba098fc",
-		"@wordpress/keycodes": "^4.39.1-next.v.0+5aba098fc",
-		"@wordpress/primitives": "^4.39.1-next.v.0+5aba098fc",
-		"@wordpress/private-apis": "^1.39.1-next.v.0+5aba098fc",
-		"@wordpress/rich-text": "^7.39.1-next.v.0+5aba098fc",
-		"@wordpress/warning": "^3.39.1-next.v.0+5aba098fc",
+		"@wordpress/a11y": "^4.40.0",
+		"@wordpress/base-styles": "^6.16.0",
+		"@wordpress/compose": "^7.40.0",
+		"@wordpress/date": "^5.40.0",
+		"@wordpress/deprecated": "^4.40.0",
+		"@wordpress/dom": "^4.40.0",
+		"@wordpress/element": "^6.40.0",
+		"@wordpress/escape-html": "^3.40.0",
+		"@wordpress/hooks": "^4.40.0",
+		"@wordpress/html-entities": "^4.40.0",
+		"@wordpress/i18n": "^6.13.0",
+		"@wordpress/icons": "^11.7.0",
+		"@wordpress/is-shallow-equal": "^5.40.0",
+		"@wordpress/keycodes": "^4.40.0",
+		"@wordpress/primitives": "^4.40.0",
+		"@wordpress/private-apis": "^1.40.0",
+		"@wordpress/rich-text": "^7.40.0",
+		"@wordpress/warning": "^3.40.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -102,12 +102,12 @@
 		"uuid": "^9.0.1"
 	},
 	"devDependencies": {
-		"@ariakit/test": "^0.4.7",
+		"@ariakit/test": "^0.4.13",
 		"@storybook/addon-docs": "^10.1.11",
 		"@storybook/react-vite": "^10.1.11",
-		"@testing-library/jest-dom": "^6.6.3",
+		"@testing-library/jest-dom": "^6.9.1",
 		"@types/jest": "^29.5.14",
-		"@wordpress/jest-console": "^8.39.1-next.v.0+5aba098fc",
+		"@wordpress/jest-console": "^8.40.0",
 		"snapshot-diff": "^0.10.0",
 		"storybook": "^10.1.11",
 		"timezone-mock": "^1.3.6"
@@ -119,5 +119,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d730f9e00f5462d1b9d2660632850f5f43ccff44"
+	"gitHead": "376124aa10dbc2cc0c81c964ec00b99fcfee5382"
 }

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

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

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

@@ -18,7 +18,7 @@ const getCell = ( name: string ) => {
 };
 
 const renderAndInitCompositeStore = async (
-	jsx: JSX.Element,
+	jsx: React.JSX.Element,
 	focusedCell = 'center center'
 ) => {
 	const view = render( jsx );

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

@@ -29,11 +29,12 @@ function AngleCircle( {
 	className,
 	...props
 }: WordPressComponentProps< AngleCircleProps, 'div' > ) {
-	const angleCircleRef = useRef< HTMLDivElement | null >( null );
-	const angleCircleCenterRef = useRef<
-		{ x: number; y: number } | undefined
-	>();
-	const previousCursorValueRef = useRef< CSSStyleDeclaration[ 'cursor' ] >();
+	const angleCircleRef = useRef< HTMLDivElement >( null );
+	const angleCircleCenterRef = useRef< { x: number; y: number } >(
+		undefined
+	);
+	const previousCursorValueRef =
+		useRef< CSSStyleDeclaration[ 'cursor' ] >( undefined );
 
 	const setAngleCircleCenter = () => {
 		if ( angleCircleRef.current === null ) {

package/src/angle-picker-control/stories/index.story.tsx

@@ -29,6 +29,10 @@ const meta: Meta< typeof AnglePickerControl > = {
 			expanded: true,
 		},
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'editor',
+		},
 	},
 };
 

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

@@ -16,6 +16,11 @@ const meta: Meta< typeof Animate > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'not-recommended',
+			whereUsed: 'global',
+			notes: 'Planned for deprecation.',
+		},
 	},
 };
 export default meta;

package/src/animate/types.ts

@@ -28,5 +28,5 @@ type DistributiveTypeAndOptions< T extends { type?: any } > = T extends any
 	: never;
 
 export type AnimateProps = DistributiveTypeAndOptions< GetAnimateOptions > & {
-	children: ( props: { className?: string } ) => JSX.Element;
+	children: ( props: { className?: string } ) => React.JSX.Element;
 };

package/src/autocomplete/autocompleter-ui.tsx

@@ -216,7 +216,7 @@ export function getAutoCompleterUI( autocompleter: WPCompleter ) {
 }
 
 function useOnClickOutside(
-	ref: React.RefObject< HTMLElement >,
+	ref: React.RefObject< HTMLElement | null >,
 	handler: AutocompleterUIProps[ 'reset' ]
 ) {
 	useEffect( () => {

package/src/autocomplete/index.tsx

@@ -66,7 +66,7 @@ export function useAutocomplete( {
 		null
 	);
 	const [ AutocompleterUI, setAutocompleterUI ] = useState<
-		( ( props: AutocompleterUIProps ) => JSX.Element | null ) | null
+		( ( props: AutocompleterUIProps ) => React.JSX.Element | null ) | null
 	>( null );
 
 	const backspacingRef = useRef( false );
@@ -408,7 +408,8 @@ function useLastDifferentValue( value: UseAutocompleteProps[ 'record' ] ) {
 
 export function useAutocompleteProps( options: UseAutocompleteProps ) {
 	const ref = useRef< HTMLElement >( null );
-	const onKeyDownRef = useRef< ( event: KeyboardEvent ) => void >();
+	const onKeyDownRef =
+		useRef< ( event: KeyboardEvent ) => void >( undefined );
 	const { record } = options;
 	const previousRecord = useLastDifferentValue( record );
 	const { popover, listBoxId, activeId, onKeyDown } = useAutocomplete( {

package/src/autocomplete/types.ts

@@ -106,7 +106,7 @@ export type WPCompleter< TCompleterOption = any > = {
 	className?: string;
 };
 
-type ContentRef = React.RefObject< HTMLElement >;
+type ContentRef = React.RefObject< HTMLElement | null >;
 
 export type AutocompleterUIProps = {
 	/**

package/src/avatar/component.tsx

@@ -0,0 +1,82 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * Internal dependencies
+ */
+import Icon from '../icon';
+import Tooltip from '../tooltip';
+import type { AvatarProps } from './types';
+import type { WordPressComponentProps } from '../context';
+
+function Avatar( {
+	className,
+	src,
+	name,
+	label,
+	badge = false,
+	size = 'default',
+	borderColor,
+	status,
+	statusIndicator,
+	style,
+	...props
+}: WordPressComponentProps< AvatarProps, 'div', false > ) {
+	const showBadge = badge && !! name;
+	const initials = name
+		? name
+				.split( /\s+/ )
+				.slice( 0, 2 )
+				.map( ( word ) => word[ 0 ] )
+				.join( '' )
+				.toUpperCase()
+		: undefined;
+	const customProperties = {
+		...style,
+		...( src ? { '--components-avatar-url': `url(${ src })` } : {} ),
+		...( borderColor
+			? { '--components-avatar-outline-color': borderColor }
+			: {} ),
+	} as React.CSSProperties;
+
+	const avatar = (
+		<div
+			className={ clsx( 'components-avatar', className, {
+				'has-avatar-border-color': !! borderColor,
+				'has-src': !! src,
+				'has-badge': showBadge,
+				'is-small': size === 'small',
+				'has-status': !! status,
+				[ `is-${ status }` ]: !! status,
+			} ) }
+			style={ customProperties }
+			role="img"
+			aria-label={ name }
+			{ ...props }
+		>
+			<span className="components-avatar__image">
+				{ ! src && initials }
+				{ !! status && !! statusIndicator && (
+					<span className="components-avatar__status-indicator">
+						<Icon icon={ statusIndicator } />
+					</span>
+				) }
+			</span>
+			{ showBadge && (
+				<span className="components-avatar__name">
+					{ label || name }
+				</span>
+			) }
+		</div>
+	);
+
+	if ( name && ( ! showBadge || label ) ) {
+		return <Tooltip text={ name }>{ avatar }</Tooltip>;
+	}
+
+	return avatar;
+}
+
+export default Avatar;

package/src/avatar/index.ts

@@ -0,0 +1,2 @@
+export { default } from './component';
+export type { AvatarProps } from './types';

package/src/avatar/styles.scss

@@ -0,0 +1,152 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+@use "../utils/theme-variables" as *;
+
+.components-avatar {
+	display: inline-flex;
+	align-items: center;
+	border-radius: $radius-full;
+	overflow: clip;
+	flex-shrink: 0;
+	background-color: $components-color-accent;
+	box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $white, $elevation-x-small;
+}
+
+.components-avatar__image {
+	box-sizing: border-box;
+	position: relative;
+	width: $button-size-compact;
+	height: $button-size-compact;
+	border-radius: $radius-full;
+	border: 0;
+	background-color: $components-color-accent;
+	overflow: clip;
+	flex-shrink: 0;
+	font-size: 0;
+	color: $white;
+
+	.is-small > & {
+		width: $button-size-small;
+		height: $button-size-small;
+	}
+
+	.has-src > & {
+		background-image: var(--components-avatar-url);
+		background-size: cover;
+		background-position: center;
+	}
+
+	.has-avatar-border-color > & {
+		border: var(--wp-admin-border-width-focus) solid var(--components-avatar-outline-color);
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $white;
+		background-clip: padding-box;
+	}
+}
+
+// Initials fallback: show name characters when no image.
+.components-avatar:not(.has-src) > .components-avatar__image {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: $font-size-x-small;
+	font-weight: $font-weight-medium;
+	border: 0;
+	box-shadow: none;
+	background-clip: border-box;
+}
+
+.components-avatar:not(.has-src).has-avatar-border-color > .components-avatar__image {
+	background-color: var(--components-avatar-outline-color);
+}
+
+.components-avatar__name {
+	font-size: $font-size-medium;
+	line-height: $font-line-height-small;
+	color: $white;
+	min-width: 0;
+	padding-bottom: calc($grid-unit-05 / 2);
+	overflow: hidden;
+	opacity: 0;
+	white-space: nowrap;
+	transition: opacity 0.15s cubic-bezier(0.15, 0, 0.15, 1);
+}
+
+// Badge mode: use grid so the name column animates from 0 to natural width.
+// Spacing is on the container (column-gap + padding-inline-end) so it
+// transitions alongside grid-template-columns instead of causing a bump.
+.components-avatar.has-badge {
+	display: inline-grid;
+	grid-template-columns: min-content 0fr;
+	column-gap: 0;
+	padding-inline-end: 0;
+	transition:
+		grid-template-columns 0.3s cubic-bezier(0.15, 0, 0.15, 1),
+		column-gap 0.3s cubic-bezier(0.15, 0, 0.15, 1),
+		padding-inline-end 0.3s cubic-bezier(0.15, 0, 0.15, 1);
+
+	&:hover {
+		grid-template-columns: min-content 1fr;
+		column-gap: $grid-unit-05;
+		padding-inline-end: $grid-unit-10;
+		transition-timing-function: cubic-bezier(0.85, 0, 0.85, 1);
+	}
+
+	&:hover .components-avatar__name {
+		opacity: 1;
+		transition-timing-function: cubic-bezier(0.85, 0, 0.85, 1);
+	}
+}
+
+.components-avatar.has-badge.has-avatar-border-color {
+	background-color: var(--components-avatar-outline-color);
+}
+
+// Status: dim and desaturate content so the background color shows through.
+// Images: move to ::before with luminosity blend over the solid bg color.
+// Initials: reduce text opacity.
+.components-avatar.has-status.has-src > .components-avatar__image {
+	background-image: none;
+
+	&::before {
+		content: "";
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		background-image: var(--components-avatar-url);
+		background-size: cover;
+		background-position: center;
+		mix-blend-mode: luminosity;
+		opacity: 0.3;
+	}
+}
+
+.components-avatar.has-status:not(.has-src) > .components-avatar__image {
+	color: rgba($white, 0.3);
+}
+
+.components-avatar.has-status.has-avatar-border-color > .components-avatar__image {
+	background-color: var(--components-avatar-outline-color);
+}
+
+.components-avatar__status-indicator {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 1;
+	color: $white;
+	fill: $white;
+
+	svg {
+		width: 75%;
+		height: 75%;
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.components-avatar.has-badge,
+	.components-avatar__name {
+		transition: none;
+	}
+}

package/src/avatar/types.ts

@@ -0,0 +1,59 @@
+import type { IconType } from '../icon';
+
+export type AvatarProps = {
+	/**
+	 * URL of the avatar image.
+	 *
+	 * When not provided, initials derived from `name` are shown.
+	 */
+	src?: string;
+	/**
+	 * Name of the user. Used as an accessible label and to generate
+	 * initials when no image is provided.
+	 */
+	name?: string;
+	/**
+	 * Visible text shown in the hover badge. When not provided, `name`
+	 * is used instead. Use this to provide contextual labels like "You"
+	 * without affecting the accessible name or initials.
+	 */
+	label?: string;
+	/**
+	 * Whether to show the hover-expand badge that reveals the user's
+	 * name (or `label`) on hover. Requires `name` to be set.
+	 *
+	 * @default false
+	 */
+	badge?: boolean;
+	/**
+	 * Size of the avatar.
+	 *
+	 * - `'default'`: 32px
+	 * - `'small'`: 24px
+	 *
+	 * @default 'default'
+	 */
+	size?: 'default' | 'small';
+	/**
+	 * CSS color value for an accent border ring around the avatar.
+	 *
+	 * When not provided, no border is rendered and the hover badge
+	 * and avatar status uses the admin theme color as its background.
+	 */
+	borderColor?: string;
+	/**
+	 * A status string applied to the avatar. When set, the image is
+	 * dimmed to indicate a non-default state. A corresponding
+	 * `is-{status}` class is added for custom styling.
+	 */
+	status?: string;
+	/**
+	 * An icon or custom component rendered as a centered overlay on the
+	 * avatar image. Only visible when `status` is set.
+	 *
+	 * Accepts any value supported by the `Icon` component: an icon from
+	 * `@wordpress/icons`, a Dashicon name string, a component, or a
+	 * JSX element.
+	 */
+	statusIndicator?: IconType | null;
+};

package/src/avatar-group/component.tsx

@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { Children } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { AvatarGroupProps } from './types';
+import type { WordPressComponentProps } from '../context';
+
+function AvatarGroup( {
+	className,
+	max = 3,
+	children,
+	...props
+}: WordPressComponentProps< AvatarGroupProps, 'div', false > ) {
+	const childArray = Children.toArray( children );
+	const visible = childArray.slice( 0, max );
+	const overflowCount = childArray.length - max;
+
+	return (
+		<div
+			role="group"
+			className={ clsx( 'components-avatar-group', className ) }
+			{ ...props }
+		>
+			{ visible }
+			{ overflowCount > 0 && (
+				<span
+					className="components-avatar-group__overflow"
+					aria-label={ `${ overflowCount } more` }
+				>
+					{ `+${ overflowCount }` }
+				</span>
+			) }
+		</div>
+	);
+}
+
+export default AvatarGroup;

package/src/avatar-group/index.ts

@@ -0,0 +1,2 @@
+export { default } from './component';
+export type { AvatarGroupProps } from './types';