@wordpress/ui 0.10.0 → 0.11.0

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"}

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

@@ -0,0 +1,83 @@
+import type { ReactNode } from 'react';
+import type { Popover as _Popover } from '@base-ui/react/popover';
+import type { ComponentProps } from '../utils/types';
+export interface RootProps extends Pick<_Popover.Root.Props, 'open' | 'onOpenChange' | 'defaultOpen' | 'modal'> {
+    /**
+     * The popover sub-components (`Popover.Trigger`, `Popover.Popup`, etc.).
+     */
+    children?: ReactNode;
+}
+export interface TriggerProps extends ComponentProps<'button'>, Pick<_Popover.Trigger.Props, 'openOnHover' | 'delay' | 'closeDelay'> {
+    /**
+     * The content to be rendered inside the component.
+     */
+    children?: ReactNode;
+}
+/**
+ * `Popover.Popup` maps to two Base UI elements internally: the
+ * **Positioner** (outer, handles fixed positioning and z-index) and the
+ * **Popup** (inner, holds content and visual styles).
+ *
+ * `style` and `className` are forwarded to the **Positioner** so that
+ * z-index overrides (`--wp-ui-popover-z-index`) and Base UI CSS variables
+ * (`--available-height`, `--available-width`) work correctly. All other
+ * HTML attributes are forwarded to the inner **Popup** element.
+ */
+export interface PopupProps extends ComponentProps<'div'>, Pick<_Popover.Positioner.Props, 'align' | 'alignOffset' | 'anchor' | 'arrowPadding' | 'collisionAvoidance' | 'collisionBoundary' | 'collisionPadding' | 'side' | 'sideOffset' | 'sticky'>, Pick<_Popover.Popup.Props, 'initialFocus' | 'finalFocus'> {
+    /**
+     * Whether to render a backdrop overlay behind the popover.
+     *
+     * Typically used with `modal` to signal that interaction with the rest
+     * of the page is blocked. The backdrop is a semi-transparent dark overlay.
+     *
+     * @default false
+     */
+    backdrop?: boolean;
+    /**
+     * The content to be rendered inside the component.
+     */
+    children?: ReactNode;
+    /**
+     * A parent element to render the portal into.
+     *
+     * Useful for cross-document rendering, such as rendering a popover
+     * in a parent document when the trigger is inside an iframe.
+     */
+    container?: _Popover.Portal.Props['container'];
+    /**
+     * The visual style variant of the popup.
+     *
+     * - `'default'` — standard surface styling with background, padding,
+     *    border radius, and shadow.
+     * - `'unstyled'` — no visual treatment; useful as a blank positioning
+     *    container for fully custom content.
+     *
+     * @default 'default'
+     */
+    variant?: 'default' | 'unstyled';
+}
+export interface ArrowProps extends ComponentProps<'div'> {
+    /**
+     * Custom arrow visuals to render inside the positioned container.
+     */
+    children?: ReactNode;
+}
+export interface TitleProps extends ComponentProps<'h2'> {
+    /**
+     * The title content to be rendered.
+     */
+    children?: ReactNode;
+}
+export interface DescriptionProps extends ComponentProps<'p'> {
+    /**
+     * The description content to be rendered.
+     */
+    children?: ReactNode;
+}
+export interface CloseProps extends ComponentProps<'button'> {
+    /**
+     * The content to be rendered inside the component.
+     */
+    children?: ReactNode;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/popover/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,MAAM,WAAW,SAChB,SAAQ,IAAI,CACX,QAAQ,CAAC,IAAI,CAAC,KAAK,EACnB,MAAM,GAAG,cAAc,GAAG,aAAa,GAAG,OAAO,CACjD;IACD;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,YAChB,SAAQ,cAAc,CAAE,QAAQ,CAAE,EACjC,IAAI,CAAE,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,GAAG,YAAY,CAAE;IACvE;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;GASG;AACH,MAAM,WAAW,UAChB,SAAQ,cAAc,CAAE,KAAK,CAAE,EAC9B,IAAI,CACH,QAAQ,CAAC,UAAU,CAAC,KAAK,EACvB,OAAO,GACP,aAAa,GACb,QAAQ,GACR,cAAc,GACd,oBAAoB,GACpB,mBAAmB,GACnB,kBAAkB,GAClB,MAAM,GACN,YAAY,GACZ,QAAQ,CACV,EACD,IAAI,CAAE,QAAQ,CAAC,KAAK,CAAC,KAAK,EAAE,cAAc,GAAG,YAAY,CAAE;IAC5D;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAE,WAAW,CAAE,CAAC;IAEjD;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;CACjC;AAED,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAE,KAAK,CAAE;IAC1D;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAE,IAAI,CAAE;IACzD;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAE,GAAG,CAAE;IAC9D;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAE,QAAQ,CAAE;IAC7D;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB"}

package/build-types/tabs/list.d.ts

@@ -4,8 +4,9 @@
  * `Tabs` is a collection of React components that combine to render
  * an [ARIA-compliant tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).
  */
-export declare const List: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react").TabsListProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref">, "className" | "children" | "render"> & {
+export declare const List: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react").TabsListProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref">, "style" | "className" | "children" | "render"> & {
     className?: string;
+    style?: React.CSSProperties;
     render?: ((props: import("react").HTMLAttributes<any> & {
         ref?: import("react").Ref<any> | undefined;
     }) => React.ReactElement<unknown>) | React.ReactElement<Record<string, unknown>>;

package/build-types/tabs/list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../src/tabs/list.tsx"],"names":[],"mappings":"AAUA;;;;;GAKG;AACH,eAAO,MAAM,IAAI;;;;;;;;kDAiHhB,CAAC"}
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../src/tabs/list.tsx"],"names":[],"mappings":"AAUA;;;;;GAKG;AACH,eAAO,MAAM,IAAI;;;;;;;;;kDAgHhB,CAAC"}

package/build-types/tabs/panel.d.ts

@@ -4,8 +4,9 @@
  * `Tabs` is a collection of React components that combine to render
  * an [ARIA-compliant tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).
  */
-export declare const Panel: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react").TabsPanelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref">, "className" | "children" | "render"> & {
+export declare const Panel: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react").TabsPanelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref">, "style" | "className" | "children" | "render"> & {
     className?: string;
+    style?: React.CSSProperties;
     render?: ((props: import("react").HTMLAttributes<any> & {
         ref?: import("react").Ref<any> | undefined;
     }) => React.ReactElement<unknown>) | React.ReactElement<Record<string, unknown>>;

package/build-types/tabs/panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../src/tabs/panel.tsx"],"names":[],"mappings":"AAOA;;;;;GAKG;AACH,eAAO,MAAM,KAAK;;;;;;;kDAYjB,CAAC"}
+{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../src/tabs/panel.tsx"],"names":[],"mappings":"AAOA;;;;;GAKG;AACH,eAAO,MAAM,KAAK;;;;;;;;kDAYjB,CAAC"}

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

@@ -4,8 +4,9 @@
  * `Tabs` is a collection of React components that combine to render
  * an [ARIA-compliant tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).
  */
-export declare const Root: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react").TabsRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref">, "className" | "children" | "render"> & {
+export declare const Root: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react").TabsRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref">, "style" | "className" | "children" | "render"> & {
     className?: string;
+    style?: React.CSSProperties;
     render?: ((props: import("react").HTMLAttributes<any> & {
         ref?: import("react").Ref<any> | undefined;
     }) => React.ReactElement<unknown>) | React.ReactElement<Record<string, unknown>>;

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

@@ -1 +1 @@
-{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../src/tabs/root.tsx"],"names":[],"mappings":"AAKA;;;;;GAKG;AACH,eAAO,MAAM,IAAI;;;;;;;kDAQhB,CAAC"}
+{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../src/tabs/root.tsx"],"names":[],"mappings":"AAKA;;;;;GAKG;AACH,eAAO,MAAM,IAAI;;;;;;;;kDAQhB,CAAC"}

package/build-types/tabs/tab.d.ts

@@ -4,8 +4,9 @@
  * `Tabs` is a collection of React components that combine to render
  * an [ARIA-compliant tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).
  */
-export declare const Tab: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react").TabsTabProps, "ref"> & import("react").RefAttributes<HTMLElement>, "ref">, "className" | "children" | "render"> & {
+export declare const Tab: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react").TabsTabProps, "ref"> & import("react").RefAttributes<HTMLElement>, "ref">, "style" | "className" | "children" | "render"> & {
     className?: string;
+    style?: React.CSSProperties;
     render?: ((props: import("react").HTMLAttributes<any> & {
         ref?: import("react").Ref<any> | undefined;
     }) => React.ReactElement<unknown>) | React.ReactElement<Record<string, unknown>>;

package/build-types/tabs/tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../src/tabs/tab.tsx"],"names":[],"mappings":"AASA;;;;;GAKG;AACH,eAAO,MAAM,GAAG;;;;;;;qDAgBb,CAAC"}
+{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../src/tabs/tab.tsx"],"names":[],"mappings":"AASA;;;;;GAKG;AACH,eAAO,MAAM,GAAG;;;;;;;;qDAgBb,CAAC"}

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

@@ -4,6 +4,10 @@ declare const meta: Meta<typeof Text>;
 export default meta;
 type Story = StoryObj<typeof Text>;
 export declare const Default: Story;
+/**
+ * Important: Setting the `variant` prop to a `heading` variant will not automatically render a heading element.
+ * Use the `render` prop to render a heading element with the appropriate level.
+ */
 export declare const AllVariants: Story;
 export declare const WithRenderProp: Story;
 //# sourceMappingURL=index.story.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/text/stories/index.story.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAGhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,IAAI,CAG5B,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,IAAI,CAAE,CAAC;AAErC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KA6BzB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAe5B,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/text/stories/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAGhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,IAAI,CAG5B,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,IAAI,CAAE,CAAC;AAErC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,KA6BzB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAe5B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../src/text/text.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAGzC;;;GAGG;AACH,eAAO,MAAM,IAAI,uGAcd,CAAC"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../src/text/text.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAIzC;;;GAGG;AACH,eAAO,MAAM,IAAI,uGAoBd,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"popup.d.ts","sourceRoot":"","sources":["../../src/tooltip/popup.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAQ1C,QAAA,MAAM,KAAK,uGA8CR,CAAC;AAEJ,OAAO,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"popup.d.ts","sourceRoot":"","sources":["../../src/tooltip/popup.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAQ1C,QAAA,MAAM,KAAK,uGA+CR,CAAC;AAEJ,OAAO,EAAE,KAAK,EAAE,CAAC"}

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

@@ -1,15 +1,16 @@
 import type { RootProps } from './types';
 /**
- * `Tooltip` is used to visually show the label of an icon button, or other such interactive controls
- * that don't have a visual text label.
+ * `Tooltip` is used to visually show the label of an icon button, or other such
+ * interactive controls that don't have a visual text label.
  *
- * Tooltips are not available on touch devices, and thus should not be used for infotips,
- * descriptions, or dynamic status messages.
+ * Tooltip popups are visual-only and not exposed to assistive technologies.
+ * The trigger's accessible name (e.g. `aria-label`) is the source of truth
+ * for screen reader users. Tooltips are not available on touch devices,
+ * and thus should not be used for infotips, descriptions, or dynamic status
+ * messages.
  *
- * The tooltip itself does not provide any accessible labeling, so when using the
- * `Tooltip` primitive you must ensure that the trigger is accessibly labeled (e.g. with an `aria-label`).
- *
- * See also: [IconButton](https://wordpress.github.io/gutenberg/?path=/docs/design-system-components-iconbutton--docs)
+ * @see {@link https://wordpress.github.io/gutenberg/?path=/docs/design-system-components-tooltip-usage-guidelines--docs Usage Guidelines}
+ * @see {@link https://wordpress.github.io/gutenberg/?path=/docs/design-system-components-iconbutton--docs IconButton}
  */
 declare function Root(props: RootProps): import("react").JSX.Element;
 export { Root };

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

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