@wordpress/ui 0.11.1-next.v.202604091042.0 → 0.12.0

package/src/tooltip/test/index.test.tsx

@@ -84,4 +84,71 @@ describe( 'Tooltip', () => {
 			screen.queryByText( 'Tooltip content' )
 		).not.toBeInTheDocument();
 	} );
+
+	describe( 'portal', () => {
+		it( 'should render inside the portal container when a custom target is provided', async () => {
+			const user = userEvent.setup();
+			const containerRef = createRef< HTMLDivElement >();
+
+			render(
+				<TestProvider>
+					<div data-testid="wrapper">
+						<Tooltip.Root>
+							<Tooltip.Trigger>Hover me</Tooltip.Trigger>
+							<div
+								ref={ containerRef }
+								data-testid="custom-container"
+							/>
+							<Tooltip.Popup
+								portal={
+									<Tooltip.Portal
+										container={ containerRef }
+									/>
+								}
+							>
+								Tooltip content
+							</Tooltip.Popup>
+						</Tooltip.Root>
+					</div>
+				</TestProvider>
+			);
+
+			await user.hover(
+				screen.getByRole( 'button', { name: 'Hover me' } )
+			);
+
+			const content = await screen.findByText( 'Tooltip content' );
+			expect( content ).toBeVisible();
+
+			expect( screen.getByTestId( 'custom-container' ) ).toContainElement(
+				content
+			);
+		} );
+
+		it( 'should render with a portal by default', async () => {
+			const user = userEvent.setup();
+
+			render(
+				<TestProvider>
+					<div data-testid="wrapper">
+						<Tooltip.Root>
+							<Tooltip.Trigger>Hover me</Tooltip.Trigger>
+							<Tooltip.Popup>Tooltip content</Tooltip.Popup>
+						</Tooltip.Root>
+					</div>
+				</TestProvider>
+			);
+
+			await user.hover(
+				screen.getByRole( 'button', { name: 'Hover me' } )
+			);
+
+			const content = await screen.findByText( 'Tooltip content' );
+			expect( content ).toBeVisible();
+
+			expect( screen.getByTestId( 'wrapper' ) ).not.toContainElement(
+				content
+			);
+		} );
+	} );
 } );

package/src/tooltip/trigger.tsx

@@ -1,14 +1,10 @@
-import { Tooltip } from '@base-ui/react/tooltip';
+import { Tooltip as _Tooltip } from '@base-ui/react/tooltip';
 import { forwardRef } from '@wordpress/element';
 import type { TriggerProps } from './types';
 
 const Trigger = forwardRef< HTMLButtonElement, TriggerProps >(
-	function TooltipTrigger( { children, ...props }, ref ) {
-		return (
-			<Tooltip.Trigger ref={ ref } { ...props }>
-				{ children }
-			</Tooltip.Trigger>
-		);
+	function TooltipTrigger( props, ref ) {
+		return <_Tooltip.Trigger ref={ ref } { ...props } />;
 	}
 );
 

package/src/tooltip/types.ts

@@ -1,11 +1,14 @@
-import type { ReactNode } from 'react';
-import type { Tooltip } from '@base-ui/react/tooltip';
+import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react';
+import type { Tooltip as _Tooltip } from '@base-ui/react/tooltip';
+
 import type { ComponentProps } from '../utils/types';
 
-export type RootProps = Pick< Tooltip.Root.Props, 'disabled' | 'children' >;
+export type PortalProps = ComponentPropsWithoutRef< typeof _Tooltip.Portal >;
+
+export type RootProps = Pick< _Tooltip.Root.Props, 'disabled' | 'children' >;
 
 export type ProviderProps = Pick<
-	Tooltip.Provider.Props,
+	_Tooltip.Provider.Props,
 	'delay' | 'children'
 >;
 
@@ -18,9 +21,17 @@ export interface TriggerProps extends ComponentProps< 'button' > {
 
 export interface PopupProps
 	extends ComponentProps< 'div' >,
-		Pick< Tooltip.Positioner.Props, 'align' | 'side' | 'sideOffset' > {
+		Pick< _Tooltip.Positioner.Props, 'align' | 'side' | 'sideOffset' > {
 	/**
 	 * The content to be rendered inside the component.
 	 */
 	children?: ReactNode;
+
+	/**
+	 * Optional portal element, typically `<Tooltip.Portal />` with custom
+	 * `container`. When omitted, `Tooltip.Popup` uses `Tooltip.Portal` with
+	 * default props. Do not pass `children` on the portal element; they would
+	 * be ignored.
+	 */
+	portal?: ReactElement< Omit< PortalProps, 'children' > >;
 }

package/src/utils/create-overlay-modal-context.tsx

@@ -0,0 +1,34 @@
+import { createContext, useContext } from '@wordpress/element';
+
+type OverlayModalProviderProps< Modal > = {
+	modal: Modal;
+	children: React.ReactNode;
+};
+
+/**
+ * Creates a modal context pair (`Provider` + `useModal`) for overlay
+ * primitives like Dialog and Drawer.
+ */
+export function createOverlayModalContext< Modal >( initialValue: Modal ) {
+	const OverlayModalContext = createContext< Modal >( initialValue );
+
+	function OverlayModalProvider( {
+		modal,
+		children,
+	}: OverlayModalProviderProps< Modal > ) {
+		return (
+			<OverlayModalContext.Provider value={ modal }>
+				{ children }
+			</OverlayModalContext.Provider>
+		);
+	}
+
+	function useOverlayModal() {
+		return useContext( OverlayModalContext );
+	}
+
+	return {
+		Provider: OverlayModalProvider,
+		useModal: useOverlayModal,
+	};
+}

package/src/utils/create-overlay-title-validation.tsx

@@ -0,0 +1,116 @@
+import {
+	createContext,
+	useCallback,
+	useContext,
+	useEffect,
+	useMemo,
+	useRef,
+} from '@wordpress/element';
+import { useScheduleValidation } from './use-schedule-validation';
+
+/**
+ * Whether validation is enabled. This is a build-time constant that allows
+ * bundlers to tree-shake all validation code in production builds.
+ */
+const VALIDATION_ENABLED = process.env.NODE_ENV !== 'production';
+
+type OverlayValidationContextType = {
+	registerTitle: ( element: HTMLElement | null ) => () => void;
+};
+
+type OverlayValidationProviderProps = {
+	children: React.ReactNode;
+};
+
+/**
+ * Creates development-only title validation helpers for overlay primitives.
+ */
+export function createOverlayTitleValidation( componentName: string ) {
+	const componentNameLowerCase = componentName.toLowerCase();
+	const OverlayValidationContext = VALIDATION_ENABLED
+		? createContext< OverlayValidationContextType | null >( null )
+		: ( null as unknown as React.Context< OverlayValidationContextType | null > );
+
+	function useValidationContextDev() {
+		return useContext( OverlayValidationContext );
+	}
+
+	function useValidationContextProd() {
+		return null;
+	}
+
+	const useValidationContext = VALIDATION_ENABLED
+		? useValidationContextDev
+		: useValidationContextProd;
+
+	function ValidationProviderDev( {
+		children,
+	}: OverlayValidationProviderProps ) {
+		const titleElementRef = useRef< HTMLElement | null >( null );
+
+		const scheduleValidation = useScheduleValidation( () => {
+			const titleElement = titleElementRef.current;
+
+			if ( ! titleElement ) {
+				throw new Error(
+					`${ componentName }: Missing <${ componentName }.Title>. ` +
+						`For accessibility, every ${ componentNameLowerCase } requires a title. ` +
+						'If needed, the title can be visually hidden but must not be omitted.'
+				);
+			}
+
+			const textContent = titleElement.textContent?.trim();
+			if ( ! textContent ) {
+				throw new Error(
+					`${ componentName }: <${ componentName }.Title> cannot be empty. ` +
+						`Provide meaningful text content for the ${ componentNameLowerCase } title.`
+				);
+			}
+		} );
+
+		const registerTitle = useCallback(
+			( element: HTMLElement | null ) => {
+				titleElementRef.current = element;
+				scheduleValidation();
+
+				return () => {
+					titleElementRef.current = null;
+					scheduleValidation();
+				};
+			},
+			[ scheduleValidation ]
+		);
+
+		const contextValue = useMemo(
+			() => ( { registerTitle } ),
+			[ registerTitle ]
+		);
+
+		// Schedule an initial validation on mount to catch missing titles
+		// (when no Title component is rendered, registerTitle is never called).
+		useEffect( () => {
+			scheduleValidation();
+		}, [ scheduleValidation ] );
+
+		return (
+			<OverlayValidationContext.Provider value={ contextValue }>
+				{ children }
+			</OverlayValidationContext.Provider>
+		);
+	}
+
+	function ValidationProviderProd( {
+		children,
+	}: OverlayValidationProviderProps ) {
+		return <>{ children }</>;
+	}
+
+	const ValidationProvider = VALIDATION_ENABLED
+		? ValidationProviderDev
+		: ValidationProviderProd;
+
+	return {
+		ValidationProvider,
+		useValidationContext,
+	};
+}

package/src/utils/css/field.module.css

@@ -2,29 +2,29 @@
 
 @layer wp-ui-utilities {
 	.label {
-		--wp-ui-field-label-line-height: var(--wpds-font-line-height-xs);
+		--wp-ui-field-label-line-height: var(--wpds-typography-line-height-xs);
 
-		font-family: var(--wpds-font-family-body);
-		font-size: var(--wpds-font-size-xs);
+		font-family: var(--wpds-typography-font-family-body);
+		font-size: var(--wpds-typography-font-size-xs);
 		line-height: var(--wp-ui-field-label-line-height);
-		font-weight: var(--wpds-font-weight-medium);
+		font-weight: var(--wpds-typography-font-weight-medium);
 		text-transform: uppercase;
 		color: var(--wpds-color-fg-content-neutral);
 
 		&.is-plain {
-			font-size: var(--wpds-font-size-md);
+			font-size: var(--wpds-typography-font-size-md);
 			text-transform: none;
 		}
 	}
 
 	.description {
-		--_gcd-p-font-size: var(--wpds-font-size-sm);
-		--_gcd-p-line-height: var(--wpds-font-line-height-xs);
+		--_gcd-p-font-size: var(--wpds-typography-font-size-sm);
+		--_gcd-p-line-height: var(--wpds-typography-line-height-xs);
 		--_gcd-p-margin: 0;
 
-		font-family: var(--wpds-font-family-body);
-		font-size: var(--wpds-font-size-sm);
-		line-height: var(--wpds-font-line-height-xs);
+		font-family: var(--wpds-typography-font-family-body);
+		font-size: var(--wpds-typography-font-size-sm);
+		line-height: var(--wpds-typography-line-height-xs);
 		color: var(--wpds-color-fg-content-neutral-weak);
 	}
 }

package/src/utils/css/global-css-defense.module.css

@@ -103,7 +103,7 @@ p.p {
 :is(h1, h2, h3, h4, h5, h6).heading {
 	color: var(--_gcd-heading-color, var(--wpds-color-fg-content-neutral));
 	font-size: var(--_gcd-heading-font-size, inherit);
-	font-weight: var(--_gcd-heading-font-weight, var(--wpds-font-weight-medium));
+	font-weight: var(--_gcd-heading-font-weight, var(--wpds-typography-font-weight-medium));
 	margin: var(--_gcd-heading-margin, 0);
 }
 

package/src/utils/css/item-popup.module.css

@@ -13,11 +13,11 @@
 		min-width: var(--anchor-width);
 		max-width: var(--available-width);
 		border-radius: var(--wpds-border-radius-md);
-		border: 1px solid var(--wpds-color-stroke-surface-neutral);
+		border: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral);
 		box-shadow: var(--wpds-elevation-md);
 		background-color: var(--wpds-color-bg-surface-neutral-strong);
-		font-family: var(--wpds-font-family-body);
-		font-size: var(--wpds-font-size-md);
+		font-family: var(--wpds-typography-font-family-body);
+		font-size: var(--wpds-typography-font-size-md);
 		line-height: 1.4;
 		color: var(--wpds-color-fg-interactive-neutral);
 	}
@@ -45,7 +45,7 @@
 		padding-block: var(--wp-ui-popup-padding);
 
 		.list-scrollable-container:not(:empty) + & {
-			border-block-start: 1px solid var(--wpds-color-stroke-surface-neutral);
+			border-block-start: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral);
 		}
 	}
 
@@ -55,8 +55,7 @@
 		--wp-ui-popup-item-padding-inline: 12px;
 		--wp-ui-popup-item-padding-block: 4px;
 
-		display: grid;
-		grid-template-columns: 24px 1fr;
+		display: flex;
 		align-items: center;
 		justify-content: flex-start;
 		gap: var(--wpds-dimension-gap-xs);
@@ -106,23 +105,22 @@
 		}
 	}
 
-	.item-indicator {
-		justify-self: center;
+	.item-indicator-icon {
+		flex-shrink: 0;
 	}
 
-	.empty {
+	/* Only style when there is content, because otherwise the element would block clicks
+	on the .list beneath it (both share grid-area: main and overlap). */
+	.empty:not(:empty) {
 		--wp-ui-popup-empty-min-height: 40px;
 		--wp-ui-popup-empty-padding-inline: 12px;
 
 		grid-area: main;
 		display: flex;
 		align-items: center;
+		min-height: var(--wp-ui-popup-empty-min-height);
 		padding-inline: var(--wp-ui-popup-empty-padding-inline);
 		color: var(--wpds-color-fg-content-neutral-weak);
-
-		&:not(:empty) {
-			min-height: var(--wp-ui-popup-empty-min-height);
-		}
 	}
 
 }

package/src/utils/css/overlay-chrome.module.css

@@ -0,0 +1,222 @@
+@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
+
+@layer wp-ui-components {
+	/*
+	 * Shared chrome + scroll-container primitives for overlay popups
+	 * (Dialog, AlertDialog, Drawer).
+	 *
+	 * Layout model: the popup is a vertical flex column with three regions
+	 * — `.header`, `.content`, `.footer`. Only `.content` scrolls; the
+	 * chrome sits at the popup's block-axis edges as natural flex siblings.
+	 *
+	 * Sticky opt-out for `Dialog` / `Drawer` is expressed in the DOM by
+	 * placing `Dialog.Header` / `Dialog.Footer` (or the Drawer equivalents)
+	 * inside `Dialog.Content` / `Drawer.Content` so they scroll with the
+	 * body; AlertDialog exposes the same choice via `stickyHeader` /
+	 * `stickyFooter` props, since it owns its internal DOM.
+	 */
+
+	/*
+	 * Chrome: flex row, no background (the popup already paints it), no
+	 * sticky positioning. Block-axis padding is asymmetric: the outer
+	 * side (popup edge) uses `padding-2xl` to match the inset that used
+	 * to live on the popup; the inner side (toward `.content`) uses the
+	 * tokenized `gap-lg` in full.
+	 *
+	 * No separator border here — the base chrome has none. The pinned
+	 * case (where a separator is needed) adds a `border-block-*: 1px
+	 * solid transparent` on the inner side and subtracts 1px from that
+	 * same padding so the chrome's overall border-box height stays
+	 * identical to the non-pinned case. See the `:has(~ .content)` /
+	 * `.content ~` rules below.
+	 *
+	 * `min-height` on `.header` keeps the header footprint stable whether
+	 * or not a close icon is rendered (notably the AlertDialog case, which
+	 * has no close button).
+	 */
+	.header {
+		display: flex;
+		align-items: center;
+		gap: var(--wpds-dimension-gap-sm);
+		padding-block: var(--wpds-dimension-padding-2xl) var(--wpds-dimension-gap-lg);
+		padding-inline: var(--wpds-dimension-padding-2xl);
+		/* TODO: refactor to a DS element size token when available. */
+		min-height: 32px;
+	}
+
+	.footer {
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+		gap: var(--wpds-dimension-gap-sm);
+		padding-block: var(--wpds-dimension-gap-lg) var(--wpds-dimension-padding-2xl);
+		padding-inline: var(--wpds-dimension-padding-2xl);
+	}
+
+	/*
+	 * Overlay heading defaults: anchor the title to the inline start and
+	 * set the neutral text color explicitly. `--_gcd-heading-color` and
+	 * `--_gcd-heading-margin` defend against the heading-reset rules in
+	 * `global-css-defense.module.css`, which would otherwise take over a
+	 * `<h2>` rendered via `Text`.
+	 */
+	.title {
+		color: var(--wpds-color-fg-content-neutral);
+		--_gcd-heading-color: var(--wpds-color-fg-content-neutral);
+
+		margin-inline-end: auto;
+		--_gcd-heading-margin: 0 auto 0 0;
+
+		&:dir(rtl) {
+			--_gcd-heading-margin: 0 0 0 auto;
+		}
+	}
+
+	/*
+	 * Scroll container. `flex: 1 1 auto` + `min-block-size: 0` lets it
+	 * shrink below its content size so `overflow-block: auto` can actually
+	 * show a scrollbar when content exceeds the available space. Default
+	 * padding is `padding-2xl` on all sides; the yield rules below strip
+	 * block padding when chrome occupies that edge.
+	 *
+	 * Scrolling is intentionally block-axis-only. `overflow-inline: hidden`
+	 * clips wide content instead of introducing a horizontal scrollbar:
+	 * the sibling chrome doesn't scroll inline, the popup edge already
+	 * clips, and `useOverlayScrollStateAttributes` only tracks block-axis
+	 * overflow (tabindex + separator state). Overlay consumers should
+	 * constrain content width rather than rely on horizontal scroll.
+	 */
+	.content {
+		flex: 1 1 auto;
+		min-block-size: 0;
+		overflow-block: auto;
+		overflow-inline: hidden;
+		padding: var(--wpds-dimension-padding-2xl);
+
+		/*
+		 * The shared `outset-ring--focus-visible` utility (composed by
+		 * the Content components) uses an `outline-offset` of `+1px`,
+		 * which for this scroll container would put the ring outside
+		 * the popup's rounded corners and have it clipped by the
+		 * popup's `overflow: hidden`. Inset the ring by the focus
+		 * width instead, so it sits flush inside the content box.
+		 *
+		 * The shared utility's transition shorthand (`transition:
+		 * outline …`) only animates outline-color and outline-width,
+		 * not outline-offset, so the negative offset applied here is
+		 * static — visually, the ring still fades in/out via color
+		 * change while the offset stays put.
+		 */
+		&:focus-visible {
+			outline-offset: calc(var(--wpds-border-width-focus) * -1);
+		}
+	}
+
+	/*
+	 * Pinned chrome: reserve 1px on the inner side for the separator
+	 * border and subtract that same 1px from the adjacent padding. Net
+	 * effect on block-axis height is zero — the chrome's overall
+	 * border-box matches the non-pinned case — while the border provides
+	 * a fixed slot that the scroll-state rules below colorize.
+	 *
+	 * `.content` then drops its matching block-axis padding on that
+	 * edge, because the chrome already supplies the popup-edge
+	 * `padding-2xl` + inner `gap-lg`.
+	 *
+	 * Sibling relationships intentionally use the general-sibling
+	 * combinator (`~`) and `:has(~ …)` instead of the adjacent
+	 * combinator, so an extra element between header / content / footer
+	 * (custom wrappers, an a11y live region, etc.) doesn't silently
+	 * break the pinned layout. The expected DOM shape is still
+	 * header → content → footer; additional siblings in between are
+	 * tolerated.
+	 */
+	.header:has(~ .content) {
+		padding-block-end: calc(var(--wpds-dimension-gap-lg) - 1px);
+		border-block-end: 1px solid transparent;
+	}
+
+	.header ~ .content {
+		padding-block-start: 0;
+	}
+
+	.content ~ .footer {
+		padding-block-start: calc(var(--wpds-dimension-gap-lg) - 1px);
+		border-block-start: 1px solid transparent;
+	}
+
+	.content:has(~ .footer) {
+		padding-block-end: 0;
+	}
+
+	/*
+	 * Non-pinned case: when `.header` / `.footer` live inside `.content`
+	 * (scrolls with body). The scroll container already supplies the
+	 * inline popup-edge padding, so nested chrome always collapses its
+	 * own `padding-inline` regardless of its position inside `.content`
+	 * (no `:first-child` / `:last-child` guard). Block-axis padding is
+	 * only collapsed at the scroll edges — the `:first-child` /
+	 * `:last-child` rules keep the body's `gap-lg` visual separation
+	 * between the chrome and any preceding / following siblings inside
+	 * `.content`. No border — the separator is specific to the pinned
+	 * case.
+	 */
+	.content > .header {
+		padding-inline: 0;
+	}
+
+	.content > .header:first-child {
+		padding-block-start: 0;
+	}
+
+	.content > .footer {
+		padding-inline: 0;
+	}
+
+	.content > .footer:last-child {
+		padding-block-end: 0;
+	}
+
+	/*
+	 * Separator coloring. The transparent border on the pinned chrome is
+	 * colorized when the adjacent scroll container reports off-screen
+	 * content in that direction. Toggling the color (not the border's
+	 * existence) means no layout shift on scroll.
+	 *
+	 * `useOverlayScrollStateAttributes` owns the
+	 * `data-wp-ui-overlay-scrolled-from-*` toggles, so CSS handles the
+	 * visual state without React re-rendering on scroll.
+	 *
+	 * Forced-colors note: `border-color: transparent` is preserved as-is
+	 * in forced-colors mode per spec, so the default (non-scrolled)
+	 * state stays invisible. When the color toggles to a token value
+	 * below, the UA substitutes a system color (typically `CanvasText`),
+	 * so the separator remains visible in forced-colors mode without
+	 * any additional rules.
+	 */
+	.header:has(~ [data-wp-ui-overlay-scroll-container][data-wp-ui-overlay-scrolled-from-top]) {
+		border-block-end-color: var(--wpds-color-stroke-surface-neutral);
+	}
+
+	[data-wp-ui-overlay-scroll-container][data-wp-ui-overlay-scrolled-from-bottom] ~ .footer {
+		border-block-start-color: var(--wpds-color-stroke-surface-neutral);
+	}
+
+	/*
+	 * `overscroll-behavior: contain` stops scroll chaining from the overlay
+	 * to whatever sits behind it. We only want that when the overlay is
+	 * modal: a non-modal overlay lets the page underneath remain
+	 * interactive, and chaining scroll to the page there is the intuitive
+	 * behavior.
+	 *
+	 * `data-wp-ui-overlay-modal` is toggled on the popup by each component
+	 * (Dialog / Drawer mirror their `modal` prop; AlertDialog is always
+	 * modal). The scroll container always lives inside the popup —
+	 * `Dialog.Content` / `Drawer.Content` for the public API, or an
+	 * internal container for AlertDialog — so a single descendant
+	 * selector anchored at the modal popup covers all three.
+	 */
+	[data-wp-ui-overlay-modal] [data-wp-ui-overlay-scroll-container] {
+		overscroll-behavior: contain;
+	}
+}

package/src/utils/render-portal-with-children.ts

@@ -0,0 +1,27 @@
+import { cloneElement } from '@wordpress/element';
+import type { ReactElement, ReactNode } from 'react';
+
+/**
+ * Renders overlay markup (`children`) through an optional `portal` element from
+ * `portal={ <Component.Portal … /> }`, or through the package default portal.
+ *
+ * Shared by overlay `Popup` components so portal merge behavior stays consistent.
+ *
+ * @param portal        Optional element from the `portal` prop (should have no
+ *                      `children`; callers type this via `Omit<PortalProps,'children'>`).
+ *                      When omitted, `defaultPortal` is used. Injected `children`
+ *                      replace any subtree on the portal element.
+ * @param defaultPortal Unpopulated default portal element (e.g. `<Dialog.Portal />`).
+ * @param children      Popup subtree (backdrop, positioner, etc.) to inject as the portal’s children.
+ */
+export function renderPortalWithChildren(
+	portal: ReactElement | undefined,
+	defaultPortal: ReactElement,
+	children: ReactNode
+): ReactElement {
+	const rootPortal = portal ?? defaultPortal;
+
+	return cloneElement( rootPortal, {
+		children,
+	} );
+}

package/src/utils/test/use-deprioritized-initial-focus.test.tsx

@@ -17,7 +17,7 @@ function TestHarness( {
 } ) {
 	const result = useDeprioritizedInitialFocus( {
 		initialFocus,
-		deprioritizedAttribute: ATTR,
+		deprioritizedAttributes: [ ATTR ],
 	} );
 
 	useEffect( () => {
@@ -156,7 +156,7 @@ describe( 'useDeprioritizedInitialFocus', () => {
 			} ) {
 				const result = useDeprioritizedInitialFocus( {
 					initialFocus: undefined,
-					deprioritizedAttribute: ATTR,
+					deprioritizedAttributes: [ ATTR ],
 				} );
 
 				useEffect( () => {
@@ -200,7 +200,7 @@ describe( 'useDeprioritizedInitialFocus', () => {
 			} ) {
 				const result = useDeprioritizedInitialFocus( {
 					initialFocus: undefined,
-					deprioritizedAttribute: ATTR,
+					deprioritizedAttributes: [ ATTR ],
 				} );
 
 				useEffect( () => {

package/src/utils/types.ts

@@ -14,13 +14,18 @@ type ComponentRenderFn< Props > = (
 
 export type ComponentProps< E extends ElementType > = Omit<
 	ComponentPropsWithoutRef< E >,
-	'className' | 'children' | 'render'
+	'className' | 'children' | 'render' | 'style'
 > & {
 	/**
-	 * CSS class name to apply to the component.
+	 * CSS class name to apply to the element.
 	 */
 	className?: string;
 
+	/**
+	 * CSS style to apply to the element.
+	 */
+	style?: React.CSSProperties;
+
 	/**
 	 * Replaces the component's default HTML element using a given React
 	 * element, or a function that returns a React element.