@wordpress/components 29.7.0 → 29.8.0

package/build-style/style.css

@@ -396,7 +396,7 @@
   color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   background: transparent;
 }
-.components-button.is-tertiary:hover:not(:disabled, [aria-disabled=true]) {
+.components-button.is-tertiary:hover:not(:disabled, [aria-disabled=true], .is-pressed) {
   background: color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 4%, transparent);
   color: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
 }
@@ -894,6 +894,8 @@ input.components-combobox-control__input[type=text] {
   margin: 0;
   line-height: inherit;
   min-height: auto;
+  background: var(--wp-components-color-background, #fff);
+  color: var(--wp-components-color-foreground, #1e1e1e);
 }
 @media (min-width: 600px) {
   input.components-combobox-control__input[type=text] {
@@ -934,8 +936,8 @@ input.components-combobox-control__input[type=text]:focus {
   }
 }
 .components-combobox-control__suggestions-container:focus {
-  border-color: var(--wp-admin-theme-color);
-  box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
+  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: 2px solid transparent;
 }
 .components-combobox-control__suggestions-container::-webkit-input-placeholder {
@@ -948,8 +950,8 @@ input.components-combobox-control__input[type=text]:focus {
   color: rgba(30, 30, 30, 0.62);
 }
 .components-combobox-control__suggestions-container:focus-within {
-  border-color: var(--wp-admin-theme-color);
-  box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
+  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: 2px solid transparent;
 }
 .components-combobox-control__suggestions-container .components-spinner {
@@ -1455,8 +1457,8 @@ body.is-dragging-components-draggable {
   }
 }
 .components-form-token-field__input-container:focus {
-  border-color: var(--wp-admin-theme-color);
-  box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
+  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: 2px solid transparent;
 }
 .components-form-token-field__input-container::-webkit-input-placeholder {
@@ -1473,8 +1475,8 @@ body.is-dragging-components-draggable {
   border-color: #ddd;
 }
 .components-form-token-field__input-container.is-active {
-  border-color: var(--wp-admin-theme-color);
-  box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
+  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: 2px solid transparent;
 }
 .components-form-token-field__input-container input[type=text].components-form-token-field__input {
@@ -1490,7 +1492,7 @@ body.is-dragging-components-draggable {
   min-width: 50px;
   background: inherit;
   border: 0;
-  color: #1e1e1e;
+  color: var(--wp-components-color-foreground, #1e1e1e);
   box-shadow: none;
 }
 @media (min-width: 600px) {
@@ -1602,7 +1604,7 @@ body.is-dragging-components-draggable {
 }
 
 .components-form-token-field__suggestion {
-  color: #1e1e1e;
+  color: var(--wp-components-color-foreground, #1e1e1e);
   display: block;
   font-size: 13px;
   padding: 8px 12px;
@@ -1612,7 +1614,7 @@ body.is-dragging-components-draggable {
 }
 .components-form-token-field__suggestion.is-selected {
   background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  color: #fff;
+  color: var(--wp-components-color-foreground-inverted, #fff);
 }
 .components-form-token-field__suggestion[aria-disabled=true] {
   pointer-events: none;

package/build-types/popover/index.d.ts

@@ -1,11 +1,12 @@
 import type { WordPressComponentProps } from '../context';
-import type { PopoverProps } from './types';
+import type { PopoverProps, PopoverSlotProps } from './types';
 /**
  * Name of slot in which popover should fill.
  *
  * @type {string}
  */
 export declare const SLOT_NAME = "Popover";
+export declare const PopoverSlot: import("react").ForwardRefExoticComponent<PopoverSlotProps & import("react").RefAttributes<HTMLDivElement>>;
 /**
  * `Popover` renders its content in a floating modal. If no explicit anchor is passed via props, it anchors to its parent element by default.
  *
@@ -29,6 +30,21 @@ export declare const SLOT_NAME = "Popover";
  * ```
  *
  */
-export declare const Popover: import("../context").WordPressComponent<import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | null, Omit<WordPressComponentProps<PopoverProps, "div", false>, "inherit" | "initial" | "layout" | "drag" | "transition" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "viewport" | "exit" | "whileHover" | "whileTap" | "whileDrag" | "whileFocus" | "whileInView" | "transformTemplate" | "data-framer-appear-id" | "variants" | "onBeforeLayoutMeasure" | "onLayoutMeasure" | "onUpdate" | "onAnimationComplete" | "onPan" | "onPanStart" | "onPanSessionStart" | "onPanEnd" | "onTap" | "onTapStart" | "onTapCancel" | "globalTapTarget" | "onHoverStart" | "onHoverEnd" | "onViewportEnter" | "onViewportLeave" | "dragDirectionLock" | "dragPropagation" | "dragConstraints" | "dragElastic" | "dragMomentum" | "dragTransition" | "dragControls" | "dragSnapToOrigin" | "dragListener" | "onMeasureDragConstraints" | "_dragX" | "_dragY" | "onDirectionLock" | "onDragTransitionEnd" | "layoutId" | "onLayoutAnimationStart" | "onLayoutAnimationComplete" | "layoutDependency" | "layoutScroll" | "layoutRoot" | "custom" | "ignoreStrict"> & import("react").RefAttributes<any>, boolean>;
+export declare const Popover: import("../context").WordPressComponent<import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | null, Omit<WordPressComponentProps<PopoverProps, "div", false>, "inherit" | "initial" | "layout" | "drag" | "transition" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "viewport" | "exit" | "whileHover" | "whileTap" | "whileDrag" | "whileFocus" | "whileInView" | "transformTemplate" | "data-framer-appear-id" | "variants" | "onBeforeLayoutMeasure" | "onLayoutMeasure" | "onUpdate" | "onAnimationComplete" | "onPan" | "onPanStart" | "onPanSessionStart" | "onPanEnd" | "onTap" | "onTapStart" | "onTapCancel" | "globalTapTarget" | "onHoverStart" | "onHoverEnd" | "onViewportEnter" | "onViewportLeave" | "dragDirectionLock" | "dragPropagation" | "dragConstraints" | "dragElastic" | "dragMomentum" | "dragTransition" | "dragControls" | "dragSnapToOrigin" | "dragListener" | "onMeasureDragConstraints" | "_dragX" | "_dragY" | "onDirectionLock" | "onDragTransitionEnd" | "layoutId" | "onLayoutAnimationStart" | "onLayoutAnimationComplete" | "layoutDependency" | "layoutScroll" | "layoutRoot" | "custom" | "ignoreStrict"> & import("react").RefAttributes<any>, boolean> & {
+    /**
+     * Renders a slot that is used internally by Popover for rendering content.
+     */
+    Slot: import("react").ForwardRefExoticComponent<PopoverSlotProps & import("react").RefAttributes<HTMLDivElement>> & {
+        displayName: string;
+    };
+    /**
+     * Provides a context to manage popover slot names.
+     *
+     * This is marked as unstable and should not be used directly.
+     */
+    __unstableSlotNameProvider: import("react").Provider<string | undefined> & {
+        displayName: string;
+    };
+};
 export default Popover;
 //# sourceMappingURL=index.d.ts.map

package/build-types/popover/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/popover/index.tsx"],"names":[],"mappings":"AAwDA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,KAAK,EACX,YAAY,EAGZ,MAAM,SAAS,CAAC;AAIjB;;;;GAIG;AACH,eAAO,MAAM,SAAS,YAAY,CAAC;AA0ZnC;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,OAAO,+qCAAkD,CAAC;AAqBvE,eAAe,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/popover/index.tsx"],"names":[],"mappings":"AAwDA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,KAAK,EACX,YAAY,EAGZ,gBAAgB,EAChB,MAAM,SAAS,CAAC;AAIjB;;;;GAIG;AACH,eAAO,MAAM,SAAS,YAAY,CAAC;AA2ZnC,eAAO,MAAM,WAAW,6GAWvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,OAAO;IAGlB;;OAEG;;;;IAIH;;;;OAIG;;;;CAKJ,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/build-types/popover/stories/e2e/index.story.d.ts

@@ -1,6 +1,13 @@
 declare const _default: {
     title: string;
-    component: import("../../../context").WordPressComponent<import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | null, Omit<import("../../../context").WordPressComponentProps<import("../../types").PopoverProps, "div", false>, "inherit" | "initial" | "layout" | "drag" | "transition" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "viewport" | "exit" | "whileHover" | "whileTap" | "whileDrag" | "whileFocus" | "whileInView" | "transformTemplate" | "data-framer-appear-id" | "variants" | "onBeforeLayoutMeasure" | "onLayoutMeasure" | "onUpdate" | "onAnimationComplete" | "onPan" | "onPanStart" | "onPanSessionStart" | "onPanEnd" | "onTap" | "onTapStart" | "onTapCancel" | "globalTapTarget" | "onHoverStart" | "onHoverEnd" | "onViewportEnter" | "onViewportLeave" | "dragDirectionLock" | "dragPropagation" | "dragConstraints" | "dragElastic" | "dragMomentum" | "dragTransition" | "dragControls" | "dragSnapToOrigin" | "dragListener" | "onMeasureDragConstraints" | "_dragX" | "_dragY" | "onDirectionLock" | "onDragTransitionEnd" | "layoutId" | "onLayoutAnimationStart" | "onLayoutAnimationComplete" | "layoutDependency" | "layoutScroll" | "layoutRoot" | "custom" | "ignoreStrict"> & import("react").RefAttributes<any>, boolean>;
+    component: import("../../../context").WordPressComponent<import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | null, Omit<import("../../../context").WordPressComponentProps<import("../../types").PopoverProps, "div", false>, "inherit" | "initial" | "layout" | "drag" | "transition" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "viewport" | "exit" | "whileHover" | "whileTap" | "whileDrag" | "whileFocus" | "whileInView" | "transformTemplate" | "data-framer-appear-id" | "variants" | "onBeforeLayoutMeasure" | "onLayoutMeasure" | "onUpdate" | "onAnimationComplete" | "onPan" | "onPanStart" | "onPanSessionStart" | "onPanEnd" | "onTap" | "onTapStart" | "onTapCancel" | "globalTapTarget" | "onHoverStart" | "onHoverEnd" | "onViewportEnter" | "onViewportLeave" | "dragDirectionLock" | "dragPropagation" | "dragConstraints" | "dragElastic" | "dragMomentum" | "dragTransition" | "dragControls" | "dragSnapToOrigin" | "dragListener" | "onMeasureDragConstraints" | "_dragX" | "_dragY" | "onDirectionLock" | "onDragTransitionEnd" | "layoutId" | "onLayoutAnimationStart" | "onLayoutAnimationComplete" | "layoutDependency" | "layoutScroll" | "layoutRoot" | "custom" | "ignoreStrict"> & import("react").RefAttributes<any>, boolean> & {
+        Slot: import("react").ForwardRefExoticComponent<import("../../types").PopoverSlotProps & import("react").RefAttributes<HTMLDivElement>> & {
+            displayName: string;
+        };
+        __unstableSlotNameProvider: import("react").Provider<string | undefined> & {
+            displayName: string;
+        };
+    };
 };
 export default _default;
 export declare const Default: () => import("react").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../../src/popover/stories/e2e/index.story.tsx"],"names":[],"mappings":";;;;AAUA,wBAGE;AAEF,eAAO,MAAM,OAAO,mCASnB,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../../src/popover/stories/e2e/index.story.tsx"],"names":[],"mappings":";;;;;;;;;;;AAUA,wBAGE;AAEF,eAAO,MAAM,OAAO,mCASnB,CAAC"}

package/build-types/popover/stories/index.story.d.ts

@@ -10,4 +10,5 @@ export declare const Unstyled: StoryObj<typeof Popover>;
 export declare const AllPlacements: StoryObj<typeof Popover>;
 export declare const DynamicHeight: StoryObj<typeof Popover>;
 export declare const WithSlotOutsideIframe: StoryObj<typeof Popover>;
+export declare const WithCloseHandlers: StoryObj<typeof Popover>;
 //# sourceMappingURL=index.story.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/popover/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAWvD,OAAO,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC;AAoB7B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,OAAO,CAqB/B,CAAC;AAEF,eAAe,IAAI,CAAC;AA2BpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,OAAO,CA+C7C,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAE,OAAO,OAAO,CAO9C,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,QAAQ,CAAE,OAAO,OAAO,CAkDnD,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,QAAQ,CAAE,OAAO,OAAO,CAqDnD,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,QAAQ,CAAE,OAAO,OAAO,CAO3D,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/popover/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAWvD,OAAO,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC;AAoB7B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,OAAO,CAyB/B,CAAC;AAEF,eAAe,IAAI,CAAC;AA2BpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,OAAO,CAkD7C,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAE,OAAO,OAAO,CAO9C,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,QAAQ,CAAE,OAAO,OAAO,CAkDnD,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,QAAQ,CAAE,OAAO,OAAO,CAqDnD,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,QAAQ,CAAE,OAAO,OAAO,CAO3D,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,QAAQ,CAAE,OAAO,OAAO,CAwEvD,CAAC"}

package/build-types/popover/test/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/popover/test/utils/index.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,OAAO,MAAM,OAAO,CAAC;AA8B5B,eAAO,MAAM,yCAAyC,UAC9C,KAAK,CAAC,cAAc,CAAE,OAAO,OAAO,CAAE,gCA+C7C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/popover/test/utils/index.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,OAAO,MAAM,OAAO,CAAC;AA8B5B,eAAO,MAAM,yCAAyC,UAC9C,KAAK,CAAC,cAAc,CAAE,OAAO,OAAO,CAAE,gCA8C7C,CAAC"}

package/build-types/popover/types.d.ts

@@ -191,5 +191,14 @@ export type PopoverProps = {
      */
     isAlternate?: boolean;
 };
+export type PopoverSlotProps = {
+    /**
+     * The name of the Slot in which the popover should be rendered. It should
+     * be also passed to the corresponding `PopoverSlot` component.
+     *
+     * @default 'Popover'
+     */
+    name?: string;
+};
 export {};
 //# sourceMappingURL=types.d.ts.map

package/build-types/popover/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/popover/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/popover/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "29.7.0",
+	"version": "29.8.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -44,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.21.0",
-		"@wordpress/compose": "^7.21.0",
-		"@wordpress/date": "^5.21.0",
-		"@wordpress/deprecated": "^4.21.0",
-		"@wordpress/dom": "^4.21.0",
-		"@wordpress/element": "^6.21.0",
-		"@wordpress/escape-html": "^3.21.0",
-		"@wordpress/hooks": "^4.21.0",
-		"@wordpress/html-entities": "^4.21.0",
-		"@wordpress/i18n": "^5.21.0",
-		"@wordpress/icons": "^10.21.0",
-		"@wordpress/is-shallow-equal": "^5.21.0",
-		"@wordpress/keycodes": "^4.21.0",
-		"@wordpress/primitives": "^4.21.0",
-		"@wordpress/private-apis": "^1.21.0",
-		"@wordpress/rich-text": "^7.21.0",
-		"@wordpress/warning": "^3.21.0",
+		"@wordpress/a11y": "^4.22.0",
+		"@wordpress/compose": "^7.22.0",
+		"@wordpress/date": "^5.22.0",
+		"@wordpress/deprecated": "^4.22.0",
+		"@wordpress/dom": "^4.22.0",
+		"@wordpress/element": "^6.22.0",
+		"@wordpress/escape-html": "^3.22.0",
+		"@wordpress/hooks": "^4.22.0",
+		"@wordpress/html-entities": "^4.22.0",
+		"@wordpress/i18n": "^5.22.0",
+		"@wordpress/icons": "^10.22.0",
+		"@wordpress/is-shallow-equal": "^5.22.0",
+		"@wordpress/keycodes": "^4.22.0",
+		"@wordpress/primitives": "^4.22.0",
+		"@wordpress/private-apis": "^1.22.0",
+		"@wordpress/rich-text": "^7.22.0",
+		"@wordpress/warning": "^3.22.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -68,7 +68,7 @@
 		"deepmerge": "^4.3.0",
 		"fast-deep-equal": "^3.1.3",
 		"framer-motion": "^11.1.9",
-		"gradient-parser": "^0.1.5",
+		"gradient-parser": "1.0.2",
 		"highlight-words-core": "^1.2.2",
 		"is-plain-object": "^5.0.0",
 		"memize": "^2.1.0",
@@ -85,5 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "104af00f9abcd7a4d36b87e648f148c72cc4ea5f"
+	"gitHead": "01a314d7e46a50101e328fdb11959c441e49372d"
 }

package/src/button/style.scss

@@ -167,7 +167,7 @@
 		color: $components-color-accent;
 		background: transparent;
 
-		&:hover:not(:disabled, [aria-disabled="true"]) {
+		&:hover:not(:disabled, [aria-disabled="true"], .is-pressed) {
 			background: color-mix(in srgb, $components-color-accent 4%, transparent);
 			color: $components-color-accent-darker-20;
 		}

package/src/combobox-control/style.scss

@@ -12,6 +12,8 @@ input.components-combobox-control__input[type="text"] {
 	margin: 0;
 	line-height: inherit;
 	min-height: auto;
+	background: $components-color-background;
+	color: $components-color-foreground;
 
 	// Resolves Zooming on iOS devices
 	// https://github.com/WordPress/gutenberg/issues/27405
@@ -26,7 +28,7 @@ input.components-combobox-control__input[type="text"] {
 }
 
 .components-combobox-control__suggestions-container {
-	@include input-control;
+	@include input-control($components-color-accent);
 	display: flex;
 	flex-wrap: wrap;
 	align-items: flex-start;
@@ -34,7 +36,7 @@ input.components-combobox-control__input[type="text"] {
 	padding: 0;
 
 	&:focus-within {
-		@include input-style__focus();
+		@include input-style__focus($components-color-accent);
 	}
 
 	.components-spinner {

package/src/form-token-field/style.scss

@@ -1,5 +1,5 @@
 .components-form-token-field__input-container {
-	@include input-control();
+	@include input-control($components-color-accent);
 	width: 100%;
 	padding: 0;
 	cursor: text;
@@ -10,7 +10,7 @@
 	}
 
 	&.is-active {
-		@include input-style__focus();
+		@include input-style__focus($components-color-accent);
 	}
 
 	// Token input
@@ -27,7 +27,7 @@
 		min-width: 50px;
 		background: inherit;
 		border: 0;
-		color: $gray-900;
+		color: $components-color-foreground;
 		box-shadow: none;
 
 		// Resolves Zooming on iOS devices
@@ -168,7 +168,7 @@
 }
 
 .components-form-token-field__suggestion {
-	color: $gray-900;
+	color: $components-color-foreground;
 	display: block;
 	font-size: $default-font-size;
 	padding: $grid-unit-10 $grid-unit-15;
@@ -178,7 +178,7 @@
 
 	&.is-selected {
 		background: $components-color-accent;
-		color: $white;
+		color: $components-color-foreground-inverted;
 	}
 
 	&[aria-disabled="true"] {

package/src/popover/index.tsx

@@ -59,6 +59,7 @@ import type {
 	PopoverProps,
 	PopoverAnchorRefReference,
 	PopoverAnchorRefTopBottom,
+	PopoverSlotProps,
 } from './types';
 import { overlayMiddlewares } from './overlay-middlewares';
 import { StyleProvider } from '../style-provider';
@@ -478,6 +479,20 @@ const UnforwardedPopover = (
 	);
 };
 
+// Export the PopoverSlot individually to allow typescript to pick the types up.
+export const PopoverSlot = forwardRef< HTMLDivElement, PopoverSlotProps >(
+	( { name = SLOT_NAME }, ref ) => {
+		return (
+			<Slot
+				bubblesVirtually
+				name={ name }
+				className="popover-slot"
+				ref={ ref }
+			/>
+		);
+	}
+);
+
 /**
  * `Popover` renders its content in a floating modal. If no explicit anchor is passed via props, it anchors to its parent element by default.
  *
@@ -501,25 +516,24 @@ const UnforwardedPopover = (
  * ```
  *
  */
-export const Popover = contextConnect( UnforwardedPopover, 'Popover' );
-
-function PopoverSlot(
-	{ name = SLOT_NAME }: { name?: string },
-	ref: ForwardedRef< any >
-) {
-	return (
-		<Slot
-			bubblesVirtually
-			name={ name }
-			className="popover-slot"
-			ref={ ref }
-		/>
-	);
-}
-
-// @ts-expect-error For Legacy Reasons
-Popover.Slot = forwardRef( PopoverSlot );
-// @ts-expect-error For Legacy Reasons
-Popover.__unstableSlotNameProvider = slotNameContext.Provider;
+export const Popover = Object.assign(
+	contextConnect( UnforwardedPopover, 'Popover' ),
+	{
+		/**
+		 * Renders a slot that is used internally by Popover for rendering content.
+		 */
+		Slot: Object.assign( PopoverSlot, {
+			displayName: 'Popover.Slot',
+		} ),
+		/**
+		 * Provides a context to manage popover slot names.
+		 *
+		 * This is marked as unstable and should not be used directly.
+		 */
+		__unstableSlotNameProvider: Object.assign( slotNameContext.Provider, {
+			displayName: 'Popover.__unstableSlotNameProvider',
+		} ),
+	}
+);
 
 export default Popover;

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

@@ -36,6 +36,10 @@ const meta: Meta< typeof Popover > = {
 	title: 'Components/Overlays/Popover',
 	id: 'components-popover',
 	component: Popover,
+	subcomponents: {
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		'Popover.Slot': Popover.Slot,
+	},
 	argTypes: {
 		anchor: { control: false },
 		anchorRef: { control: false },
@@ -86,10 +90,13 @@ export const Default: StoryObj< typeof Popover > = {
 	decorators: [
 		( Story ) => {
 			const [ isVisible, setIsVisible ] = useState( false );
-			const toggleVisible = () => {
+			const buttonRef = useRef< HTMLButtonElement | undefined >();
+			const toggleVisible = ( event: React.MouseEvent ) => {
+				if ( buttonRef.current && event.target !== buttonRef.current ) {
+					return;
+				}
 				setIsVisible( ( state ) => ! state );
 			};
-			const buttonRef = useRef< HTMLButtonElement | undefined >();
 			useEffect( () => {
 				buttonRef.current?.scrollIntoView?.( {
 					block: 'center',
@@ -255,3 +262,77 @@ export const WithSlotOutsideIframe: StoryObj< typeof Popover > = {
 		...Default.args,
 	},
 };
+
+export const WithCloseHandlers: StoryObj< typeof Popover > = {
+	render: function WithCloseHandlersStory( args ) {
+		const [ isVisible, setIsVisible ] = useState( false );
+		const buttonRef = useRef< HTMLButtonElement >( null );
+
+		const toggleVisible = ( event: React.MouseEvent ) => {
+			if ( buttonRef.current && event.target !== buttonRef.current ) {
+				return;
+			}
+			setIsVisible( ( prev ) => ! prev );
+		};
+
+		const handleClose = () => {
+			args.onClose?.();
+			setIsVisible( false );
+		};
+
+		const handleFocusOutside = ( e: React.SyntheticEvent ) => {
+			args.onFocusOutside?.( e );
+			setIsVisible( false );
+		};
+
+		useEffect( () => {
+			buttonRef.current?.scrollIntoView( {
+				block: 'center',
+				inline: 'center',
+			} );
+		}, [] );
+
+		return (
+			<div
+				style={ {
+					width: '300vw',
+					height: '300vh',
+					display: 'flex',
+					alignItems: 'center',
+					justifyContent: 'center',
+				} }
+			>
+				<Button
+					variant="secondary"
+					onClick={ toggleVisible }
+					ref={ buttonRef }
+				>
+					Toggle Popover
+					{ isVisible && (
+						<Popover
+							{ ...args }
+							onClose={ handleClose }
+							onFocusOutside={ handleFocusOutside }
+						>
+							{ args.children }
+						</Popover>
+					) }
+				</Button>
+			</div>
+		);
+	},
+	args: {
+		...Default.args,
+		focusOnMount: true,
+		children: (
+			<div style={ { width: '280px', whiteSpace: 'normal' } }>
+				<p>
+					Clicking outside triggers the onFocusOutside callback prop.
+				</p>
+				<p>
+					Pressing the Escape key triggers the onClose callback prop.
+				</p>
+			</div>
+		),
+	},
+};

package/src/popover/test/utils/index.tsx

@@ -46,7 +46,6 @@ export const PopoverInsideIframeRenderedInExternalSlot = (
 
 	return (
 		<SlotFillProvider>
-			{ /* @ts-expect-error Slot is not currently typed on Popover */ }
 			<Popover.Slot name={ SLOT_NAME } />
 			<GenericIframe
 				style={ {

package/src/popover/types.ts

@@ -206,3 +206,13 @@ export type PopoverProps = {
 	 */
 	isAlternate?: boolean;
 };
+
+export type PopoverSlotProps = {
+	/**
+	 * The name of the Slot in which the popover should be rendered. It should
+	 * be also passed to the corresponding `PopoverSlot` component.
+	 *
+	 * @default 'Popover'
+	 */
+	name?: string;
+};