@wordpress/ui 0.12.1-next.v.202604201441.0 → 0.13.0

package/src/popover/portal.tsx

@@ -0,0 +1,17 @@
+import { Popover as _Popover } from '@base-ui/react/popover';
+import { forwardRef } from '@wordpress/element';
+import type { PortalProps } from './types';
+
+/**
+ * Root element that portals `Popover` floating content. Pass to
+ * `Popover.Popup`'s `portal` prop (for example `container` for
+ * cross-document rendering). When `portal` is omitted, `Popover.Popup` uses
+ * this component with default props.
+ */
+const Portal = forwardRef< HTMLDivElement, PortalProps >(
+	function PopoverPortal( props, ref ) {
+		return <_Popover.Portal ref={ ref } { ...props } />;
+	}
+);
+
+export { Portal };

package/src/popover/root.tsx

@@ -12,8 +12,8 @@ import type { RootProps } from './types';
  *
  * - `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.Popup` — the floating container (positioning, collision
+ *   avoidance); portals by default or via `portal={ <Popover.Portal /> }`.
  * - `Popover.Arrow` — an optional arrow pointing toward the anchor.
  * - `Popover.Title` — **required** heading that labels the popover for
  *   accessibility (can be visually hidden).

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

@@ -13,6 +13,7 @@ const meta: Meta< typeof Popover.Root > = {
 	component: Popover.Root,
 	subcomponents: {
 		'Popover.Trigger': Popover.Trigger,
+		'Popover.Portal': Popover.Portal,
 		'Popover.Popup': Popover.Popup,
 		'Popover.Arrow': Popover.Arrow,
 		'Popover.Title': Popover.Title,
@@ -22,6 +23,13 @@ const meta: Meta< typeof Popover.Root > = {
 	argTypes: {
 		children: { control: false },
 	},
+	parameters: {
+		componentStatus: {
+			status: 'use-with-caution',
+			whereUsed: 'global',
+			notes: 'Not yet recommended for use alongside components from `@wordpress/components`, pending review of overlays compatibility. See [WordPress/gutenberg#76135](https://github.com/WordPress/gutenberg/issues/76135).',
+		},
+	},
 };
 export default meta;
 
@@ -443,10 +451,11 @@ export 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.
+ * To keep the floating layer **in page flow** next to surrounding layout,
+ * create a local ref to a `<span>` with `display: contents` and pass
+ * `portal={ <Popover.Portal container={ ref } /> }`. The popup still uses a
+ * portal, but the portal **mounts** into that subtree instead of
+ * `document.body`, while retaining positioning behavior.
  *
  * **Note:** `backdrop` will not cover the full viewport in this mode.
  */
@@ -463,7 +472,11 @@ export const Inline: Story = {
 						ref={ inlineContainerRef }
 						style={ { display: 'contents' } }
 					/>
-					<Popover.Popup container={ inlineContainerRef }>
+					<Popover.Popup
+						portal={
+							<Popover.Portal container={ inlineContainerRef } />
+						}
+					>
 						<Popover.Arrow />
 						<Popover.Title
 							style={ {
@@ -473,8 +486,10 @@ export const Inline: Story = {
 							Inline Popover
 						</Popover.Title>
 						<Popover.Description>
-							This popup is rendered in place — no portal is used.
-							Inspect the DOM to see it lives inside its parent.
+							This example still uses `Popover.Portal`, but the
+							portal `container` is the in-tree span above, so the
+							portal node mounts inside the wrapper instead of
+							`document.body`.
 						</Popover.Description>
 					</Popover.Popup>
 				</Popover.Root>
@@ -572,8 +587,8 @@ export 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`.
+ * render in the parent document, pass a parent-document element through
+ * `portal={ <Popover.Portal container={ ... } /> }` 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.
@@ -624,8 +639,12 @@ export const CrossIframe: Story = {
 									Popover&apos;s anchor (inside iframe)
 								</Popover.Trigger>
 								<Popover.Popup
-									container={
-										portalContainerRef as React.RefObject< HTMLElement >
+									portal={
+										<Popover.Portal
+											container={
+												portalContainerRef as React.RefObject< HTMLElement >
+											}
+										/>
 									}
 									collisionBoundary={
 										iframeBoundary ?? undefined
@@ -661,9 +680,9 @@ export const CrossIframe: Story = {
  * `@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.
+ * is passed to `Popover.Portal`'s `container` prop (via `Popover.Popup`'s
+ * `portal` prop) so the popup portals into the slot element. This mirrors the
+ * legacy Popover's `WithSlotOutsideIframe` pattern.
  */
 export const CrossIframeWithSlotFill: Story = {
 	name: 'Cross-Iframe (SlotFill)',
@@ -713,8 +732,12 @@ export const CrossIframeWithSlotFill: Story = {
 									Popover&apos;s anchor (inside iframe)
 								</Popover.Trigger>
 								<Popover.Popup
-									container={
-										slotRef as React.RefObject< HTMLElement >
+									portal={
+										<Popover.Portal
+											container={
+												slotRef as React.RefObject< HTMLElement >
+											}
+										/>
 									}
 									collisionBoundary={
 										iframeBoundary ?? undefined
@@ -746,12 +769,19 @@ export 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.
+ * create situations where a popover renders below another popover when you
+ * want it above.
+ *
+ * The `--wp-ui-popover-z-index` CSS variable controls the z-index of the
+ * popover's positioner (and its optional backdrop). Override it either:
  *
- * 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.
+ * - **Globally**, by setting the variable on `:root` or `body` (raises every
+ *   popover in the page), or
+ * - **Per instance**, by passing a `Popover.Portal` with a `style` (or
+ *   `className`) to `Popover.Popup`'s `portal` prop. The variable cascades
+ *   from the portal wrapper to everything rendered inside it.
+ *
+ * This story demonstrates the per-instance approach.
  */
 export const WithCustomZIndex: Story = {
 	name: 'With Custom z-index',
@@ -759,7 +789,13 @@ export const WithCustomZIndex: Story = {
 		children: (
 			<>
 				<Popover.Trigger>Open Popover</Popover.Trigger>
-				<Popover.Popup style={ { '--wp-ui-popover-z-index': '9999' } }>
+				<Popover.Popup
+					portal={
+						<Popover.Portal
+							style={ { '--wp-ui-popover-z-index': '9999' } }
+						/>
+					}
+				>
 					<Popover.Arrow />
 					<Popover.Title
 						style={ {
@@ -769,8 +805,9 @@ export const WithCustomZIndex: Story = {
 						Custom z-index
 					</Popover.Title>
 					<Popover.Description>
-						This popover&apos;s positioner has z-index: 9999 via the
-						`--wp-ui-popover-z-index` CSS custom property.
+						This popover renders at `z-index: 9999` via the
+						`--wp-ui-popover-z-index` CSS custom property, set on
+						`Popover.Portal` through the `portal` prop.
 					</Popover.Description>
 				</Popover.Popup>
 			</>

package/src/popover/style.module.css

@@ -1,37 +1,15 @@
 @layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
 
-/*
- * Temporary workaround for a Base UI tabbability regression with
- * checkVisibility() and display: contents.
- * See: https://github.com/mui/base-ui/issues/4622
- *
- * This must stay outside the CSS layers to override ThemeProvider's
- * unlayered display: contents.
- */
-[data-wpds-theme-provider-id]:has(> .popup) {
-	display: block;
-}
-
 @layer wp-ui-components {
 	.positioner {
 		z-index: var(--wp-ui-popover-z-index, initial);
 	}
 
-	/*
-	 * Structural marker; no visual styles. Always applied to the popup so
-	 * the ThemeProvider display workaround above matches regardless of
-	 * `variant`. Visuals live in `.default`.
-	 */
-	/* stylelint-disable-next-line block-no-empty -- structural marker for the
-	 * ThemeProvider display workaround above; kept class-based (not a data
-	 * attribute) so it is defined alongside the other component classes. */
-	.popup {}
-
-	.default {
+	.popup {
 		background-color: var(--wpds-color-bg-surface-neutral-strong);
 		padding: var(--wpds-dimension-padding-lg);
 		border-radius: var(--wpds-border-radius-md);
-		border: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral-weak);
+		border: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral);
 		box-shadow: var(--wpds-elevation-md);
 		font-family: var(--wpds-typography-font-family-body);
 		font-size: var(--wpds-typography-font-size-md);
@@ -40,6 +18,34 @@
 		outline: 0;
 	}
 
+	/*
+	 * When a backdrop is rendered alongside the popup, hide the
+	 * regular-mode border. The backdrop already provides visual
+	 * containment, so the border becomes redundant noise.
+	 * `transparent` (not `none`) keeps popup geometry identical
+	 * regardless of the `backdrop` prop — `box-sizing: border-box`
+	 * absorbs the 1px into the existing box.
+	 */
+	.backdrop ~ * .popup {
+		border-color: transparent;
+	}
+
+	/*
+	 * Forced-colors mode strips `box-shadow` and substitutes
+	 * `background-color` with `Canvas` (the page background), so the
+	 * boundary depends entirely on the border. Set `CanvasText`
+	 * explicitly for both backdrop and non-backdrop popups:
+	 * `transparent` is not substituted by the UA, and being
+	 * explicit also removes any reliance on UA color-substitution
+	 * behavior for the non-backdrop case.
+	 */
+	@media (forced-colors: active) {
+		.popup,
+		.backdrop ~ * .popup {
+			border-color: CanvasText;
+		}
+	}
+
 	.arrow {
 		display: flex;
 
@@ -69,11 +75,12 @@
 	}
 
 	.arrow-stroke {
-		fill: var(--wpds-color-stroke-surface-neutral-weak);
+		fill: var(--wpds-color-stroke-surface-neutral);
 	}
 
-	.description {
-		color: var(--wpds-color-fg-content-neutral-weak);
+	.title {
+		color: var(--wpds-color-fg-content-neutral);
+		--_gcd-heading-color: var(--wpds-color-fg-content-neutral);
 	}
 
 	.backdrop {

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

@@ -1,4 +1,4 @@
-import { render, screen, waitFor } from '@testing-library/react';
+import { act, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { createRef, useState } from '@wordpress/element';
 import * as Popover from '../index';
@@ -389,6 +389,35 @@ describe( 'Popover', () => {
 				);
 			} );
 		} );
+
+		it( 'merges user `className` on Popover.Title with the internal one', async () => {
+			// Regression test for the shared `useRender` class-name merge
+			// that also covers Popover.Description and its Dialog/Drawer
+			// counterparts.
+			const user = userEvent.setup();
+
+			render(
+				<Popover.Root>
+					<Popover.Trigger>Open</Popover.Trigger>
+					<Popover.Popup>
+						<Popover.Title className="custom-title">
+							Title
+						</Popover.Title>
+					</Popover.Popup>
+				</Popover.Root>
+			);
+
+			await user.click( screen.getByRole( 'button', { name: 'Open' } ) );
+
+			const heading = await screen.findByRole( 'heading', {
+				name: 'Title',
+			} );
+			// The regression this guards against: `useRender` must still
+			// forward the user-supplied className to the underlying DOM node.
+			// CSS module classes are stubbed in the Jest environment, so we
+			// can only assert the user class end-to-end.
+			expect( heading ).toHaveClass( 'custom-title' );
+		} );
 	} );
 
 	describe( 'variant', () => {
@@ -434,7 +463,7 @@ describe( 'Popover', () => {
 		} );
 	} );
 
-	describe( 'inline (via container)', () => {
+	describe( 'inline via portal (custom container)', () => {
 		function InlinePopover() {
 			const containerRef = createRef< HTMLSpanElement >();
 			return (
@@ -445,7 +474,11 @@ describe( 'Popover', () => {
 							ref={ containerRef }
 							style={ { display: 'contents' } }
 						/>
-						<Popover.Popup container={ containerRef }>
+						<Popover.Popup
+							portal={
+								<Popover.Portal container={ containerRef } />
+							}
+						>
 							<Popover.Title>Title</Popover.Title>
 							Inline content
 						</Popover.Popup>
@@ -454,7 +487,7 @@ describe( 'Popover', () => {
 			);
 		}
 
-		it( 'should render inside the container when a local ref is used', async () => {
+		it( 'should render inside the portal container when a local ref is used', async () => {
 			const user = userEvent.setup();
 
 			render( <InlinePopover /> );
@@ -715,7 +748,9 @@ describe( 'Popover', () => {
 				expect( screen.getByText( 'Valid Title' ) ).toBeVisible();
 			} );
 
-			await new Promise( ( resolve ) => setTimeout( resolve, 50 ) );
+			await act(
+				() => new Promise( ( resolve ) => setTimeout( resolve, 50 ) )
+			);
 			expect( errors ).toHaveLength( 0 );
 
 			cleanup();
@@ -742,7 +777,9 @@ describe( 'Popover', () => {
 			} );
 
 			// Let initial validation settle — no errors expected.
-			await new Promise( ( resolve ) => setTimeout( resolve, 50 ) );
+			await act(
+				() => new Promise( ( resolve ) => setTimeout( resolve, 50 ) )
+			);
 			expect( errors ).toHaveLength( 0 );
 
 			// Remove the title via rerender.
@@ -792,7 +829,9 @@ describe( 'Popover', () => {
 			rerender( ui( true ) );
 
 			// Wait for deferred validation to settle.
-			await new Promise( ( resolve ) => setTimeout( resolve, 50 ) );
+			await act(
+				() => new Promise( ( resolve ) => setTimeout( resolve, 50 ) )
+			);
 
 			// No new errors should have been thrown.
 			expect( errors ).toHaveLength( errorCountAfterInitial );

package/src/popover/title.tsx

@@ -3,6 +3,7 @@ import { useMergeRefs } from '@wordpress/compose';
 import { forwardRef, useEffect, useRef } from '@wordpress/element';
 import { Text } from '../text';
 import { usePopoverValidationContext } from './context';
+import styles from './style.module.css';
 import type { TitleProps } from './types';
 
 /**
@@ -22,7 +23,7 @@ import type { TitleProps } from './types';
  * ```
  */
 const Title = forwardRef< HTMLHeadingElement, TitleProps >(
-	function PopoverTitle( { className, children, ...props }, forwardedRef ) {
+	function PopoverTitle( { children, ...props }, forwardedRef ) {
 		const validationContext = usePopoverValidationContext();
 		const internalRef = useRef< HTMLHeadingElement >( null );
 		const mergedRef = useMergeRefs( [ internalRef, forwardedRef ] );
@@ -39,7 +40,7 @@ const Title = forwardRef< HTMLHeadingElement, TitleProps >(
 				ref={ mergedRef }
 				variant="heading-xl"
 				render={ <_Popover.Title { ...props } /> }
-				className={ className }
+				className={ styles.title }
 			>
 				{ children }
 			</Text>

package/src/popover/types.ts

@@ -1,7 +1,10 @@
-import type { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react';
 import type { Popover as _Popover } from '@base-ui/react/popover';
+
 import type { ComponentProps } from '../utils/types';
 
+export type PortalProps = ComponentPropsWithoutRef< typeof _Popover.Portal >;
+
 export interface RootProps
 	extends Pick<
 		_Popover.Root.Props,
@@ -22,16 +25,6 @@ export interface TriggerProps
 	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<
@@ -64,12 +57,14 @@ export interface PopupProps
 	children?: ReactNode;
 
 	/**
-	 * A parent element to render the portal into.
+	 * Optional portal element, typically `<Popover.Portal />` with custom
+	 * `container` for cross-document rendering. Floating content is rendered
+	 * as this portal's children (do not pass `children` on the portal element;
+	 * they would be ignored).
 	 *
-	 * Useful for cross-document rendering, such as rendering a popover
-	 * in a parent document when the trigger is inside an iframe.
+	 * When omitted, `Popover.Popup` uses `Popover.Portal` with default props.
 	 */
-	container?: _Popover.Portal.Props[ 'container' ];
+	portal?: ReactElement< Omit< PortalProps, 'children' > >;
 
 	/**
 	 * The visual style variant of the popup.

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

@@ -5,6 +5,12 @@ const meta: Meta< typeof Stack > = {
 	tags: [ 'manifest' ],
 	title: 'Design System/Components/Stack',
 	component: Stack,
+	parameters: {
+		componentStatus: {
+			status: 'recommended',
+			whereUsed: 'global',
+		},
+	},
 };
 export default meta;
 

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

@@ -12,6 +12,13 @@ const meta: Meta< typeof Tabs.Root > = {
 		'Tabs.Tab': Tabs.Tab,
 		'Tabs.Panel': Tabs.Panel,
 	},
+	parameters: {
+		componentStatus: {
+			status: 'use-with-caution',
+			whereUsed: 'global',
+			notes: 'Not yet recommended for use alongside components from `@wordpress/components`, pending review of color consistency with `@wordpress/components`. See [WordPress/gutenberg#76135](https://github.com/WordPress/gutenberg/issues/76135).',
+		},
+	},
 };
 export default meta;
 
@@ -281,7 +288,14 @@ export const WithTabIconsAndTooltips: StoryObj< typeof Tabs.Root > = {
 										} }
 									/>
 								</Tooltip.Trigger>
-								<Tooltip.Popup align="center" side="top">
+								<Tooltip.Popup
+									positioner={
+										<Tooltip.Positioner
+											align="center"
+											side="top"
+										/>
+									}
+								>
 									{ label }
 								</Tooltip.Popup>
 							</Tooltip.Root>

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

@@ -6,6 +6,12 @@ const meta: Meta< typeof Text > = {
 	tags: [ 'manifest' ],
 	title: 'Design System/Components/Text',
 	component: Text,
+	parameters: {
+		componentStatus: {
+			status: 'recommended',
+			whereUsed: 'global',
+		},
+	},
 };
 export default meta;
 

package/src/text/style.module.css

@@ -5,8 +5,13 @@
 		margin: 0;
 	}
 
+	/* Text variants can render as either paragraphs or headings, so each variant
+	   provides values for both element-specific CSS defenses. */
 	.heading-2xl {
 		--_gcd-heading-font-size: var(--wpds-typography-font-size-2xl);
+		--_gcd-heading-font-weight: var(--wpds-typography-font-weight-medium);
+		--_gcd-p-font-size: var(--wpds-typography-font-size-2xl);
+		--_gcd-p-line-height: var(--wpds-typography-line-height-2xl);
 
 		font-family: var(--wpds-typography-font-family-heading);
 		font-size: var(--wpds-typography-font-size-2xl);
@@ -16,6 +21,9 @@
 
 	.heading-xl {
 		--_gcd-heading-font-size: var(--wpds-typography-font-size-xl);
+		--_gcd-heading-font-weight: var(--wpds-typography-font-weight-medium);
+		--_gcd-p-font-size: var(--wpds-typography-font-size-xl);
+		--_gcd-p-line-height: var(--wpds-typography-line-height-md);
 
 		font-family: var(--wpds-typography-font-family-heading);
 		font-size: var(--wpds-typography-font-size-xl);
@@ -25,6 +33,9 @@
 
 	.heading-lg {
 		--_gcd-heading-font-size: var(--wpds-typography-font-size-lg);
+		--_gcd-heading-font-weight: var(--wpds-typography-font-weight-medium);
+		--_gcd-p-font-size: var(--wpds-typography-font-size-lg);
+		--_gcd-p-line-height: var(--wpds-typography-line-height-sm);
 
 		font-family: var(--wpds-typography-font-family-heading);
 		font-size: var(--wpds-typography-font-size-lg);
@@ -34,6 +45,9 @@
 
 	.heading-md {
 		--_gcd-heading-font-size: var(--wpds-typography-font-size-md);
+		--_gcd-heading-font-weight: var(--wpds-typography-font-weight-medium);
+		--_gcd-p-font-size: var(--wpds-typography-font-size-md);
+		--_gcd-p-line-height: var(--wpds-typography-line-height-sm);
 
 		font-family: var(--wpds-typography-font-family-heading);
 		font-size: var(--wpds-typography-font-size-md);
@@ -43,6 +57,9 @@
 
 	.heading-sm {
 		--_gcd-heading-font-size: var(--wpds-typography-font-size-xs);
+		--_gcd-heading-font-weight: var(--wpds-typography-font-weight-medium);
+		--_gcd-p-font-size: var(--wpds-typography-font-size-xs);
+		--_gcd-p-line-height: var(--wpds-typography-line-height-xs);
 
 		font-family: var(--wpds-typography-font-family-heading);
 		font-size: var(--wpds-typography-font-size-xs);
@@ -52,6 +69,8 @@
 	}
 
 	.body-xl {
+		--_gcd-heading-font-size: var(--wpds-typography-font-size-xl);
+		--_gcd-heading-font-weight: var(--wpds-typography-font-weight-regular);
 		--_gcd-p-font-size: var(--wpds-typography-font-size-xl);
 		--_gcd-p-line-height: var(--wpds-typography-line-height-xl);
 
@@ -62,6 +81,8 @@
 	}
 
 	.body-lg {
+		--_gcd-heading-font-size: var(--wpds-typography-font-size-lg);
+		--_gcd-heading-font-weight: var(--wpds-typography-font-weight-regular);
 		--_gcd-p-font-size: var(--wpds-typography-font-size-lg);
 		--_gcd-p-line-height: var(--wpds-typography-line-height-md);
 
@@ -72,6 +93,8 @@
 	}
 
 	.body-md {
+		--_gcd-heading-font-size: var(--wpds-typography-font-size-md);
+		--_gcd-heading-font-weight: var(--wpds-typography-font-weight-regular);
 		--_gcd-p-font-size: var(--wpds-typography-font-size-md);
 		--_gcd-p-line-height: var(--wpds-typography-line-height-sm);
 
@@ -82,6 +105,8 @@
 	}
 
 	.body-sm {
+		--_gcd-heading-font-size: var(--wpds-typography-font-size-sm);
+		--_gcd-heading-font-weight: var(--wpds-typography-font-weight-regular);
 		--_gcd-p-font-size: var(--wpds-typography-font-size-sm);
 		--_gcd-p-line-height: var(--wpds-typography-line-height-xs);
 

package/src/text/text.tsx

@@ -20,8 +20,8 @@ export const Text = forwardRef< HTMLSpanElement, TextProps >( function Text(
 		props: mergeProps< 'span' >( props, {
 			className: clsx(
 				styles.text,
-				variant.startsWith( 'heading-' ) && defenseStyles.heading,
-				variant.startsWith( 'body-' ) && defenseStyles.p,
+				defenseStyles.heading,
+				defenseStyles.p,
 				styles[ variant ],
 				className
 			),

package/src/tooltip/index.ts

@@ -1,6 +1,8 @@
 import { Popup } from './popup';
+import { Portal } from './portal';
+import { Positioner } from './positioner';
 import { Trigger } from './trigger';
 import { Root } from './root';
 import { Provider } from './provider';
 
-export { Provider, Root, Trigger, Popup };
+export { Provider, Root, Trigger, Popup, Portal, Positioner };