@wordpress/ui 0.9.1-next.v.202603161435.0 → 0.11.0

package/build-types/form/primitives/select/types.d.ts

@@ -1,7 +1,8 @@
 import type { Select as _Select } from '@base-ui/react/select';
+import type { ComponentProps } from '../../../utils/types';
 import type { InputLayoutProps } from '../input-layout/types';
 export type SelectRootProps = Omit<_Select.Root.Props<string, false>, 'multiple'>;
-export type SelectTriggerProps = Omit<_Select.Trigger.Props, 'children'> & {
+export type SelectTriggerProps = ComponentProps<typeof _Select.Trigger> & {
     /**
      * The size of the trigger.
      *
@@ -20,8 +21,17 @@ export type SelectTriggerProps = Omit<_Select.Trigger.Props, 'children'> & {
      */
     children?: _Select.Value.Props['children'];
 };
-export type SelectPopupProps = _Select.Popup.Props;
-export type SelectItemProps = Omit<_Select.Item.Props, 'children' | 'value'> & {
+export type SelectPopupProps = ComponentProps<typeof _Select.Popup> & {
+    /**
+     * The content to be rendered inside the popup.
+     */
+    children?: React.ReactNode;
+    /**
+     * A parent element to render the portal into.
+     */
+    container?: _Select.Portal.Props['container'];
+};
+export type SelectItemProps = Omit<ComponentProps<typeof _Select.Item>, 'value'> & {
     /**
      * A unique value that identifies this select item.
      */

package/build-types/form/primitives/select/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/form/primitives/select/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,IAAI,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAG9D,MAAM,MAAM,eAAe,GAAG,IAAI,CACjC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAE,MAAM,EAAE,KAAK,CAAE,EACnC,UAAU,CACV,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAE,OAAO,CAAC,OAAO,CAAC,KAAK,EAAE,UAAU,CAAE,GAAG;IAC5E;;;;OAIG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAE,MAAM,CAAE,CAAC;IAClC;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,KAAK,CAAE,UAAU,CAAE,CAAC;CAC7C,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC;AAEnD,MAAM,MAAM,eAAe,GAAG,IAAI,CACjC,OAAO,CAAC,IAAI,CAAC,KAAK,EAClB,UAAU,GAAG,OAAO,CACpB,GAAG;IACH;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAE,MAAM,CAAE,CAAC;IAClC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAE,UAAU,CAAE,CAAC;CAC5C,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/form/primitives/select/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,IAAI,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAG9D,MAAM,MAAM,eAAe,GAAG,IAAI,CACjC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAE,MAAM,EAAE,KAAK,CAAE,EACnC,UAAU,CACV,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAE,OAAO,OAAO,CAAC,OAAO,CAAE,GAAG;IAC3E;;;;OAIG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAE,MAAM,CAAE,CAAC;IAClC;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,KAAK,CAAE,UAAU,CAAE,CAAC;CAC7C,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAE,OAAO,OAAO,CAAC,KAAK,CAAE,GAAG;IACvE;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK,CAAE,WAAW,CAAE,CAAC;CAChD,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,IAAI,CACjC,cAAc,CAAE,OAAO,OAAO,CAAC,IAAI,CAAE,EACrC,OAAO,CACP,GAAG;IACH;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAE,MAAM,CAAE,CAAC;IAClC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAE,UAAU,CAAE,CAAC;CAC5C,CAAC"}

package/build-types/form/primitives/textarea/textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../../src/form/primitives/textarea/textarea.tsx"],"names":[],"mappings":"AAoBA,eAAO,MAAM,QAAQ;;uDA8BpB,CAAC"}
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../../src/form/primitives/textarea/textarea.tsx"],"names":[],"mappings":"AAqBA,eAAO,MAAM,QAAQ;;uDAsCpB,CAAC"}

package/build-types/form/stories/shared.d.ts

@@ -0,0 +1,3 @@
+export declare const WITH_DETAILS_DESCRIPTION = "To add rich content (such as links) to the description, use the `details` prop.\n\nAlthough this content is not associated with the field using direct semantics,\nit is made discoverable to screen reader users via a visually hidden description,\nalerting them to the presence of additional information below.\n\n**Important:** If the content only includes plain text, use `description` instead,\nso the readout is not unnecessarily verbose for screen reader users.";
+export declare const DETAILS_EXAMPLE: import("react").JSX.Element;
+//# sourceMappingURL=shared.d.ts.map

package/build-types/form/stories/shared.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../../src/form/stories/shared.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,wBAAwB,qdAQgC,CAAC;AAEtE,eAAO,MAAM,eAAe,6BAQ3B,CAAC"}

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

@@ -0,0 +1,30 @@
+import type { Field } from './primitives';
+export type ControlProps = {
+    /**
+     * The accessible label. All controls must be labeled.
+     */
+    label: React.ComponentProps<typeof Field.Label>['children'];
+    /**
+     * The accessible description, associated using `aria-describedby`.
+     *
+     * For screen reader accessibility, this should only contain plain text,
+     * and no semantics such as links.
+     */
+    description?: React.ComponentProps<typeof Field.Description>['children'];
+    /**
+     * Additional information about the field, which unlike a normal description,
+     * can include links and other semantic elements.
+     *
+     * Do not use this prop when the content is only plain text;
+     * use `description` instead.
+     */
+    details?: React.ComponentProps<typeof Field.Details>['children'];
+    /**
+     * Whether to visually hide the label while keeping it accessible
+     * to screen readers.
+     *
+     * @default false
+     */
+    hideLabelFromVision?: React.ComponentProps<typeof Field.Label>['hideFromVision'];
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/form/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAE1C,MAAM,MAAM,YAAY,GAAG;IAC1B;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC,cAAc,CAAE,OAAO,KAAK,CAAC,KAAK,CAAE,CAAE,UAAU,CAAE,CAAC;IAChE;;;;;OAKG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,cAAc,CACjC,OAAO,KAAK,CAAC,WAAW,CACxB,CAAE,UAAU,CAAE,CAAC;IAChB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,cAAc,CAAE,OAAO,KAAK,CAAC,OAAO,CAAE,CAAE,UAAU,CAAE,CAAC;IACrE;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,KAAK,CAAC,cAAc,CACzC,OAAO,KAAK,CAAC,KAAK,CAClB,CAAE,gBAAgB,CAAE,CAAC;CACtB,CAAC"}

package/build-types/index.d.ts

@@ -3,12 +3,15 @@ export * from './button';
 export * as Card from './card';
 export * as Collapsible from './collapsible';
 export * as CollapsibleCard from './collapsible-card';
+export * as AlertDialog from './alert-dialog';
 export * as Dialog from './dialog';
-export * from './form/primitives';
+export * as EmptyState from './empty-state';
+export * from './form';
 export * from './icon';
 export * from './icon-button';
 export * from './link';
 export * as Notice from './notice';
+export * as Popover from './popover';
 export * from './stack';
 export * as Tabs from './tabs';
 export * from './text';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,OAAO,KAAK,IAAI,MAAM,QAAQ,CAAC;AAC/B,OAAO,KAAK,WAAW,MAAM,eAAe,CAAC;AAC7C,OAAO,KAAK,eAAe,MAAM,oBAAoB,CAAC;AACtD,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AACnC,cAAc,SAAS,CAAC;AACxB,OAAO,KAAK,IAAI,MAAM,QAAQ,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,OAAO,KAAK,OAAO,MAAM,WAAW,CAAC;AACrC,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,OAAO,KAAK,IAAI,MAAM,QAAQ,CAAC;AAC/B,OAAO,KAAK,WAAW,MAAM,eAAe,CAAC;AAC7C,OAAO,KAAK,eAAe,MAAM,oBAAoB,CAAC;AACtD,OAAO,KAAK,WAAW,MAAM,gBAAgB,CAAC;AAC9C,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AACnC,OAAO,KAAK,UAAU,MAAM,eAAe,CAAC;AAC5C,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AACnC,OAAO,KAAK,OAAO,MAAM,WAAW,CAAC;AACrC,cAAc,SAAS,CAAC;AACxB,OAAO,KAAK,IAAI,MAAM,QAAQ,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,OAAO,KAAK,OAAO,MAAM,WAAW,CAAC;AACrC,cAAc,mBAAmB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../src/link/link.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAKzC;;;GAGG;AACH,eAAO,MAAM,IAAI,yGA2Dd,CAAC"}
+{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../src/link/link.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAMzC;;;GAGG;AACH,eAAO,MAAM,IAAI,yGA4Dd,CAAC"}

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

@@ -6,5 +6,4 @@ import { CloseIcon } from './close-icon';
 import { ActionButton } from './action-button';
 import { ActionLink } from './action-link';
 export { Root, Title, Description, Actions, CloseIcon, ActionButton, ActionLink, };
-export type { NoticeIntent } from './types';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/notice/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,EACN,IAAI,EACJ,KAAK,EACL,WAAW,EACX,OAAO,EACP,SAAS,EACT,YAAY,EACZ,UAAU,GACV,CAAC;AAEF,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/notice/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,EACN,IAAI,EACJ,KAAK,EACL,WAAW,EACX,OAAO,EACP,SAAS,EACT,YAAY,EACZ,UAAU,GACV,CAAC"}

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

@@ -0,0 +1,10 @@
+import type { ArrowProps } from './types';
+/**
+ * Renders an optional arrow element that points toward the anchor.
+ *
+ * Must be placed inside `Popover.Popup`. The arrow automatically rotates
+ * to match the current placement side.
+ */
+declare const Arrow: import("react").ForwardRefExoticComponent<ArrowProps & import("react").RefAttributes<HTMLDivElement>>;
+export { Arrow };
+//# sourceMappingURL=arrow.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"arrow.d.ts","sourceRoot":"","sources":["../../src/popover/arrow.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAuB1C;;;;;GAKG;AACH,QAAA,MAAM,KAAK,uGAaR,CAAC;AAEJ,OAAO,EAAE,KAAK,EAAE,CAAC"}

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

@@ -0,0 +1,11 @@
+import type { CloseProps } from './types';
+/**
+ * Renders a button that closes the popover when clicked.
+ *
+ * When the popover opens, initial focus skips this button in favor of
+ * the first interactive element inside the popup (unless `initialFocus`
+ * on `Popover.Popup` overrides this behavior).
+ */
+declare const Close: import("react").ForwardRefExoticComponent<CloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+export { Close };
+//# sourceMappingURL=close.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"close.d.ts","sourceRoot":"","sources":["../../src/popover/close.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C;;;;;;GAMG;AACH,QAAA,MAAM,KAAK,0GAUV,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}

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

@@ -0,0 +1,22 @@
+type PopoverValidationContextType = {
+    registerTitle: (element: HTMLElement | null) => void;
+};
+declare function usePopoverValidationContextDev(): PopoverValidationContextType | null;
+/**
+ * Hook to access the popover validation context.
+ * Returns null in production or if not within a Popover.Popup.
+ */
+export declare const usePopoverValidationContext: typeof usePopoverValidationContextDev;
+/**
+ * Development-only provider that tracks whether Popover.Title is rendered.
+ */
+declare function PopoverValidationProviderDev({ children, }: {
+    children: React.ReactNode;
+}): import("react").JSX.Element;
+/**
+ * Provider component that validates Popover.Title presence in development mode.
+ * In production, this component is a no-op and just renders children.
+ */
+export declare const PopoverValidationProvider: typeof PopoverValidationProviderDev;
+export {};
+//# sourceMappingURL=context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/popover/context.tsx"],"names":[],"mappings":"AAeA,KAAK,4BAA4B,GAAG;IACnC,aAAa,EAAE,CAAE,OAAO,EAAE,WAAW,GAAG,IAAI,KAAM,IAAI,CAAC;CACvD,CAAC;AAMF,iBAAS,8BAA8B,wCAEtC;AAMD;;;GAGG;AACH,eAAO,MAAM,2BAA2B,uCAEN,CAAC;AAEnC;;GAEG;AACH,iBAAS,4BAA4B,CAAE,EACtC,QAAQ,GACR,EAAE;IACF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,+BAqCA;AAUD;;;GAGG;AACH,eAAO,MAAM,yBAAyB,qCAEN,CAAC"}

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

@@ -0,0 +1,10 @@
+import type { DescriptionProps } from './types';
+/**
+ * Renders an optional paragraph that describes the popover content.
+ *
+ * The rendered element is linked to the popup via `aria-describedby`.
+ * Uses the `body-md` text variant by default.
+ */
+declare const Description: import("react").ForwardRefExoticComponent<DescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
+export { Description };
+//# sourceMappingURL=description.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"description.d.ts","sourceRoot":"","sources":["../../src/popover/description.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD;;;;;GAKG;AACH,QAAA,MAAM,WAAW,mHAahB,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}

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

@@ -0,0 +1,9 @@
+import { Arrow } from './arrow';
+import { Close } from './close';
+import { Description } from './description';
+import { Popup } from './popup';
+import { Root } from './root';
+import { Title } from './title';
+import { Trigger } from './trigger';
+export { Arrow, Close, Description, Popup, Root, Title, Trigger };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/popover/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC"}

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

@@ -0,0 +1,11 @@
+import type { PopupProps } from './types';
+/**
+ * Renders the floating popup container for the popover content.
+ *
+ * Handles portal rendering, positioning relative to the anchor, collision
+ * avoidance, focus management, and optional backdrop. Supply a `container`
+ * element for cross-document scenarios such as iframes.
+ */
+declare const Popup: import("react").ForwardRefExoticComponent<PopupProps & import("react").RefAttributes<HTMLDivElement>>;
+export { Popup };
+//# sourceMappingURL=popup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popup.d.ts","sourceRoot":"","sources":["../../src/popover/popup.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAO1C;;;;;;GAMG;AACH,QAAA,MAAM,KAAK,uGA4ER,CAAC;AAEJ,OAAO,EAAE,KAAK,EAAE,CAAC"}

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

@@ -0,0 +1,37 @@
+import type { RootProps } from './types';
+/**
+ * An accessible popup anchored to a trigger element.
+ *
+ * Popover renders ARIA-compliant floating content that appears next to its
+ * trigger. It can contain interactive content such as form controls, menus,
+ * and rich descriptions.
+ *
+ * Compose the compound components to build a popover:
+ *
+ * - `Popover.Root` — provides open state and context to all sub-components.
+ * - `Popover.Trigger` — the button that toggles the popup.
+ * - `Popover.Popup` — the floating container (portal, positioning, collision
+ *   avoidance).
+ * - `Popover.Arrow` — an optional arrow pointing toward the anchor.
+ * - `Popover.Title` — **required** heading that labels the popover for
+ *   accessibility (can be visually hidden).
+ * - `Popover.Description` — optional paragraph linked via `aria-describedby`.
+ * - `Popover.Close` — a button that closes the popover when clicked.
+ *   **Required** when `modal` is `true` or `'trap-focus'` so that focus
+ *   can cycle correctly and the user can dismiss the popover.
+ *
+ * ```jsx
+ * <Popover.Root>
+ *   <Popover.Trigger>Open</Popover.Trigger>
+ *   <Popover.Popup>
+ *     <Popover.Arrow />
+ *     <Popover.Title>Popover title</Popover.Title>
+ *     <Popover.Description>Popover description</Popover.Description>
+ *     <Popover.Close>Close</Popover.Close>
+ *   </Popover.Popup>
+ * </Popover.Root>
+ * ```
+ */
+declare function Root(props: RootProps): import("react").JSX.Element;
+export { Root };
+//# sourceMappingURL=root.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../src/popover/root.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,iBAAS,IAAI,CAAE,KAAK,EAAE,SAAS,+BAE9B;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}

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

@@ -0,0 +1,211 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Popover } from '../..';
+declare const meta: Meta<typeof Popover.Root>;
+export default meta;
+type Story = StoryObj<typeof Popover.Root>;
+export declare const Default: Story;
+/**
+ * A popover without the arrow sub-component. Omit `Popover.Arrow`
+ * from the popup content when an arrow indicator is not desired.
+ */
+export declare const NoArrow: Story;
+/**
+ * All combinations of `side` and `align` props on `Popover.Popup`.
+ *
+ * Each row shows a side (`top`, `right`, `bottom`, `left`), and each column
+ * shows an alignment (`start`, `center`, `end`).
+ */
+export declare const Positioning: Story;
+/**
+ * A popover with a close icon button, title, and description. The
+ * `Popover.Close` component renders a button that closes the popover when
+ * clicked. Here it wraps an `IconButton` for a properly sized, accessible
+ * close action — matching the Dialog close-icon pattern.
+ */
+export declare const WithCloseButton: Story;
+/**
+ * Use the `open` and `onOpenChange` props on `Popover.Root` to control the
+ * popover's visibility programmatically.
+ *
+ * The checkbox drives the popover state externally. The popover's trigger
+ * and click-outside dismiss both sync back to the same state via
+ * `onOpenChange`, keeping everything in sync.
+ */
+export declare const Controlled: Story;
+/**
+ * Set `modal` to `true` to trap focus inside the popover when it is open.
+ * This is useful for complex popover content that requires user interaction,
+ * such as forms. Try tabbing through the fields — focus stays inside the
+ * popover until it is dismissed.
+ *
+ * **Note:** focus trapping requires a `Popover.Close` part inside the popup
+ * so that screen readers always have an escape route. It can be visually
+ * hidden if needed.
+ *
+ * Pass `backdrop` to `Popover.Popup` to display a semi-transparent overlay
+ * beneath the popover, signalling that the page is blocked.
+ */
+export declare const Modal: Story;
+/**
+ * The `variant="unstyled"` option strips all visual styling from the popup,
+ * making it a blank positioning container for fully custom content.
+ */
+export declare const Unstyled: Story;
+/**
+ * Overlay placement positions the popover centered on top of its trigger,
+ * effectively covering it. This is achieved by computing a negative
+ * `sideOffset` based on the measured sizes of the trigger and popup.
+ *
+ * This technique is useful when you want the popover to visually replace
+ * the trigger element in place.
+ */
+export declare const OverlayPlacement: Story;
+/**
+ * To render the popup inline (without a portal), create a local ref to a
+ * `<span>` with `display: contents` and pass it as the `container` prop.
+ * The popup will render inside the span rather than being portaled to
+ * `document.body`, while retaining all positioning behavior.
+ *
+ * **Note:** `backdrop` will not cover the full viewport in this mode.
+ */
+export declare const Inline: Story;
+/**
+ * Use the `collisionAvoidance` prop to control how the popover behaves when
+ * it collides with the edges of its collision boundary.
+ *
+ * Because the popup renders via a portal (outside the scrollable container),
+ * the container must be passed as `collisionBoundary` so Floating UI treats
+ * it as the clipping edge.
+ *
+ * - `side: 'flip'` flips to the opposite side (default).
+ * - `side: 'none'` disables collision handling.
+ *
+ * Scroll the container to see collision avoidance in action.
+ */
+export declare const CollisionAvoidance: Story;
+/**
+ * When the popover's trigger lives inside an iframe but the popover should
+ * render in the parent document, pass a parent-document element to the
+ * `container` prop on `Popover.Popup`.
+ *
+ * This technique is used in Gutenberg where the block editor canvas is an
+ * iframe but toolbars and menus must appear outside it.
+ *
+ * Scroll inside the iframe to verify that the popover tracks the trigger
+ * position across document boundaries.
+ */
+export declare const CrossIframe: Story;
+/**
+ * Same cross-iframe scenario, but using `SlotFillProvider` and `Slot` from
+ * `@wordpress/components` as the render target.
+ *
+ * The `Slot` renders a `div` in the parent document, and its forwarded ref
+ * is passed to `Popover.Popup`'s `container` prop so the popup portals into
+ * the slot element. This mirrors the legacy Popover's `WithSlotOutsideIframe`
+ * pattern.
+ */
+export declare const CrossIframeWithSlotFill: Story;
+/**
+ * Popovers in Gutenberg are managed with explicit z-index values, which can
+ * create situations where a popover renders below another popover, when you
+ * want it to be rendered above.
+ *
+ * The `--wp-ui-popover-z-index` CSS variable, available on the
+ * `Popover.Popup` component, is an escape hatch that can be used to override
+ * the z-index of a given popover on a case-by-case basis.
+ */
+export declare const WithCustomZIndex: Story;
+/**
+ * Use the `anchor` prop on `Popover.Popup` to position the popover against an
+ * arbitrary element instead of the built-in trigger. Base UI accepts four
+ * anchor types:
+ *
+ * 1. **Element** — a direct DOM element reference.
+ * 2. **VirtualElement** — an object with a `getBoundingClientRect()` method.
+ * 3. **RefObject** — a `React.RefObject` pointing to an element.
+ * 4. **Callback** — a function returning an Element or VirtualElement.
+ *
+ * This is the most-used pattern in Gutenberg: block popovers anchor to
+ * selected block elements, the link popover anchors to the text selection, and
+ * data views anchor to right-click positions.
+ */
+export declare const Anchor: Story;
+/**
+ * Use `variant="unstyled"` and custom inline styles to replicate a toolbar-like
+ * appearance: high-contrast border, no shadow, and a smaller border radius.
+ *
+ * A first-class `variant="toolbar"` may be added in the future if this pattern
+ * becomes widespread.
+ */
+export declare const ToolbarVariant: Story;
+/**
+ * Base UI's Positioner exposes `--available-height` and
+ * `--available-width` CSS variables representing the space
+ * between the anchor and the viewport edge. Apply them as `max-height` /
+ * `max-width` via the `style` prop (which targets the positioner) to
+ * constrain the popup size. Then add `overflow: auto` on an inner wrapper
+ * so scrolling happens inside the popup content area — this replaces the
+ * legacy Popover's `resize` prop.
+ *
+ * Open the popover and resize or scroll the container to see the popup shrink
+ * to fit.
+ */
+export declare const ViewportConstrainedSize: Story;
+/**
+ * The `onOpenChange` callback on `Popover.Root` receives an `eventDetails`
+ * object with a `reason` field that describes why the popover is
+ * opening/closing. This replaces the legacy Popover's separate `onClose` and
+ * `onFocusOutside` callbacks:
+ *
+ * - `reason === 'escape-key'` — user pressed Escape (was `onClose`)
+ * - `reason === 'outside-press'` — user clicked outside (was `onClose`)
+ * - `reason === 'focus-out'` — focus moved outside (was `onFocusOutside`)
+ *
+ * Open the popover, then dismiss it in different ways to see the logged reason.
+ */
+export declare const OnOpenChangeDetails: Story;
+/**
+ * Pass a ref to `initialFocus` on `Popover.Popup` to focus a specific element
+ * when the popover opens. This replaces the legacy Popover's `focusOnMount`
+ * prop.
+ *
+ * In this example, the Email field receives focus instead of the first
+ * focusable element (Name).
+ */
+export declare const InitialFocus: Story;
+/**
+ * Set `modal="trap-focus"` on `Popover.Root` to trap keyboard focus inside the
+ * popover without making it fully modal. Unlike `modal={true}`, this mode:
+ *
+ * - Traps Tab/Shift+Tab cycling within the popover
+ * - Does **not** lock page scroll
+ * - Does **not** block pointer interaction outside
+ *
+ * A `Popover.Close` part must be rendered inside the popup so that screen
+ * readers can escape. It can be visually hidden if not needed visually.
+ *
+ * This replaces the legacy Popover's `constrainTabbing` prop. Try tabbing
+ * through the fields — focus stays inside — then click the button outside
+ * to verify that pointer interaction still works.
+ */
+export declare const TrapFocus: Story;
+/**
+ * Set `openOnHover` on `Popover.Trigger` to open the popover when the trigger
+ * is hovered. The `delay` and `closeDelay` props control the timing (in ms).
+ *
+ * This is a capability the legacy Popover does not have natively — consumers
+ * would need to wire up `mouseenter`/`mouseleave` handlers manually.
+ */
+export declare const HoverTrigger: Story;
+/**
+ * Popups that open when hovering an info icon should use Popover with the
+ * `openOnHover` prop on the trigger instead of a tooltip. This way, touch
+ * users and screen reader users can access the content.
+ *
+ * To know when to reach for a popover instead of a tooltip, consider the
+ * purpose of the trigger element: If the trigger's purpose is to open the
+ * popup itself, it's a popover. If the trigger's purpose is unrelated to
+ * opening the popup, it's a tooltip.
+ */
+export declare const Infotip: Story;
+//# sourceMappingURL=index.story.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/popover/stories/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAI5D,OAAO,EAAE,OAAO,EAAkB,MAAM,OAAO,CAAC;AAKhD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,OAAO,CAAC,IAAI,CAcpC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,OAAO,CAAC,IAAI,CAAE,CAAC;AAE7C,eAAO,MAAM,OAAO,EAAE,KAwBrB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,WAAW,EAAE,KA4CzB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,eAAe,EAAE,KAoC7B,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU,EAAE,KA4ExB,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,KAAK,EAAE,KAkFnB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,KAqBtB,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,EAAE,KA+C9B,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,MAAM,EAAE,KA+BpB,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAwEhC,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,EAAE,KAyEzB,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,uBAAuB,EAAE,KA6ErC,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAuB9B,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,MAAM,EAAE,KA0HpB,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,EAAE,KA4B5B,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAkDrC,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAoDjC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,EAAE,KAiE1B,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,SAAS,EAAE,KAiDvB,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,EAAE,KAyB1B,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,OAAO,EAAE,KA6CrB,CAAC"}

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

@@ -0,0 +1,25 @@
+import type { RefCallback } from 'react';
+/**
+ * Tracks the dimensions of a DOM element via ResizeObserver.
+ * Returns a ref callback to attach to the element and its current size.
+ *
+ * The ref callback performs a synchronous `getBoundingClientRect` read so
+ * the first render already has accurate dimensions (avoids a 0×0 flash).
+ */
+export declare function useMeasure<TRef extends HTMLElement>(): readonly [RefCallback<TRef>, {
+    width: number;
+    height: number;
+}];
+/**
+ * Renders an iframe and portals its `children` into the iframe's body.
+ * Forwards a ref to the underlying `<iframe>` element.
+ *
+ * Waits for the iframe's `load` event before portaling to ensure
+ * compatibility with Firefox.
+ * See https://github.com/facebook/react/issues/22847#issuecomment-991394558
+ */
+export declare const GenericIframe: import("react").ForwardRefExoticComponent<Omit<GenericIframeProps, "ref"> & import("react").RefAttributes<HTMLIFrameElement>>;
+export type GenericIframeProps = React.ComponentProps<'iframe'> & {
+    children: React.ReactNode;
+};
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/popover/stories/utils.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEzC;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAE,IAAI,SAAS,WAAW;;;GAgCnD;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,+HA0BvB,CAAC;AAEJ,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAE,QAAQ,CAAE,GAAG;IACnE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,CAAC"}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.test.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.test.d.ts","sourceRoot":"","sources":["../../../src/popover/test/index.test.tsx"],"names":[],"mappings":""}

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

@@ -0,0 +1,20 @@
+import type { TitleProps } from './types';
+/**
+ * Renders a heading that labels the popover for accessibility.
+ *
+ * **Required** — every popover must include a `Popover.Title`, even if
+ * visually hidden. The rendered element is linked to the popup via
+ * `aria-labelledby`. Uses the `heading-xl` text variant, matching Dialog.
+ *
+ * To visually hide the title while keeping it accessible, wrap it with
+ * `VisuallyHidden` using the `render` prop:
+ *
+ * ```jsx
+ * <VisuallyHidden render={ <Popover.Title /> }>
+ *   Accessible title text
+ * </VisuallyHidden>
+ * ```
+ */
+declare const Title: import("react").ForwardRefExoticComponent<TitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
+export { Title };
+//# sourceMappingURL=title.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"title.d.ts","sourceRoot":"","sources":["../../src/popover/title.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,KAAK,2GAqBV,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}

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

@@ -0,0 +1,10 @@
+import type { TriggerProps } from './types';
+/**
+ * Renders a button that toggles the popover popup when clicked.
+ *
+ * Renders as a `<button>` by default. Also supports hover-triggered
+ * popovers via the `openOnHover`, `delay`, and `closeDelay` props.
+ */
+declare const Trigger: import("react").ForwardRefExoticComponent<TriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export { Trigger };
+//# sourceMappingURL=trigger.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"trigger.d.ts","sourceRoot":"","sources":["../../src/popover/trigger.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C;;;;;GAKG;AACH,QAAA,MAAM,OAAO,4GAIZ,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}