@wordpress/ui 0.10.0 → 0.11.0

package/src/alert-dialog/trigger.tsx

@@ -1,6 +1,6 @@
+import { AlertDialog as _AlertDialog } from '@base-ui/react/alert-dialog';
 import { forwardRef } from '@wordpress/element';
 
-import * as Dialog from '../dialog';
 import type { TriggerProps } from './types';
 
 /**
@@ -8,7 +8,7 @@ import type { TriggerProps } from './types';
  */
 const Trigger = forwardRef< HTMLButtonElement, TriggerProps >(
 	function AlertDialogTrigger( props, ref ) {
-		return <Dialog.Trigger ref={ ref } { ...props } />;
+		return <_AlertDialog.Trigger ref={ ref } { ...props } />;
 	}
 );
 

package/src/alert-dialog/types.ts

@@ -1,7 +1,18 @@
 import type { AlertDialog as _AlertDialog } from '@base-ui/react/alert-dialog';
 import type { ReactNode } from 'react';
 
-import type { TriggerProps as DialogTriggerProps } from '../dialog/types';
+import type { ComponentProps } from '../utils/types';
+
+/**
+ * The return type of `onConfirm`. Return `void` (or nothing) to auto-close
+ * the dialog after the confirm handler completes. Return `{ close: false }`
+ * to keep the dialog open (e.g. for validation errors).
+ *
+ * Return `{ error: '...' }` to display a built-in error message below the
+ * action buttons. When `error` is provided, the dialog stays open
+ * regardless of the `close` value.
+ */
+export type ConfirmResult = void | { close?: boolean; error?: string };
 
 export interface RootProps
 	extends Pick<
@@ -14,6 +25,48 @@ export interface RootProps
 	 */
 	children: ReactNode;
 
+	/**
+	 * Callback fired when the user confirms the action.
+	 *
+	 * - Synchronous handlers: the dialog closes immediately after the
+	 *   handler returns.
+	 * - Async handlers: the dialog enters a "pending" state (buttons
+	 *   disabled, spinner shown on the confirm button) until the promise
+	 *   settles.
+	 *
+	 * Return `{ close: false }` to keep the dialog open after the handler
+	 * completes (e.g. for server-side validation). Return `void` or
+	 * `{ close: true }` to close the dialog (the default).
+	 *
+	 * Return `{ error: '...' }` to show a built-in error message below
+	 * the action buttons. The dialog stays open regardless of the `close`
+	 * value. The error is announced to screen readers and is automatically
+	 * cleared on the next confirm attempt or when the dialog reopens.
+	 *
+	 * If the promise rejects (or the handler throws) without returning an
+	 * `error`, the dialog stays open and returns to idle without showing
+	 * a visible error message. The error is logged to the console.
+	 * To show a user-facing message on failure, catch the error and
+	 * return `{ close: false, error: '...' }`.
+	 */
+	onConfirm?: () => ConfirmResult | Promise< ConfirmResult >;
+}
+
+export interface TriggerProps extends ComponentProps< 'button' > {
+	/**
+	 * The content to be rendered inside the component.
+	 */
+	children?: ReactNode;
+}
+
+export interface PopupProps
+	extends ComponentProps< 'div' >,
+		Pick< _AlertDialog.Popup.Props, 'initialFocus' | 'finalFocus' > {
+	/**
+	 * A parent element to render the portal into.
+	 */
+	container?: _AlertDialog.Portal.Props[ 'container' ];
+
 	/**
 	 * The semantic intent of the dialog, which determines its styling.
 	 *
@@ -28,26 +81,27 @@ export interface RootProps
 	 * @default 'default'
 	 */
 	intent?: 'default' | 'irreversible';
-}
-
-export type TriggerProps = DialogTriggerProps;
 
-export interface PopupProps {
 	/**
 	 * The title displayed in the dialog header. This serves as both the
-	 * visible heading and the accessible label for the dialog.
+	 * visible heading and the accessible label (`aria-labelledby`) for the
+	 * dialog. Must be a plain string to ensure a predictable accessible name.
 	 */
 	title: string;
 
 	/**
-	 * The message content displayed in the dialog body.
+	 * An optional description displayed below the title. Rendered using
+	 * Base UI's `AlertDialog.Description` for proper `aria-describedby`
+	 * association with the dialog. Must be a plain string to ensure a
+	 * predictable accessible description.
 	 */
-	children: ReactNode;
+	description?: string;
 
 	/**
-	 * Callback fired when the user confirms the action.
+	 * Optional body content displayed between the description and the
+	 * action buttons. Use for supplementary details or form fields.
 	 */
-	onConfirm: () => void;
+	children?: ReactNode;
 
 	/**
 	 * Custom text for the confirm button.
@@ -62,22 +116,4 @@ export interface PopupProps {
 	 * @default 'Cancel'
 	 */
 	cancelButtonText?: string;
-
-	/**
-	 * Whether the confirm action is in a loading state (e.g. an async
-	 * operation is in progress). When `true`, the confirm button shows a
-	 * spinner and the cancel button is disabled.
-	 *
-	 * **Important:** Passing this prop — even as `false` — opts into
-	 * manual-close mode: the confirm button will no longer auto-close the
-	 * dialog. The consumer is responsible for setting `open={false}` when
-	 * the operation completes. Omit the prop entirely for the default
-	 * auto-close-on-confirm behavior.
-	 *
-	 * To implement an async confirm flow, use controlled mode
-	 * (`open` / `onOpenChange`) and manage the loading state externally:
-	 * prevent closing in `onOpenChange` while loading, and set
-	 * `open={false}` once the operation completes.
-	 */
-	loading?: boolean;
 }

package/src/badge/badge.tsx

@@ -1,29 +1,26 @@
-import { useRender, mergeProps } from '@base-ui/react';
 import clsx from 'clsx';
 import { forwardRef } from '@wordpress/element';
 import { type BadgeProps } from './types';
 import styles from './style.module.css';
+import { Text } from '../text';
 
 /**
  * A badge component for displaying labels with semantic intent.
  */
 export const Badge = forwardRef< HTMLSpanElement, BadgeProps >( function Badge(
-	{ children, intent = 'none', render, className, ...props },
+	{ intent = 'none', className, ...props },
 	ref
 ) {
-	const element = useRender( {
-		render,
-		defaultTagName: 'span',
-		ref,
-		props: mergeProps< 'span' >( props, {
-			className: clsx(
+	return (
+		<Text
+			ref={ ref }
+			className={ clsx(
 				styles.badge,
 				styles[ `is-${ intent }-intent` ],
 				className
-			),
-			children,
-		} ),
-	} );
-
-	return element;
+			) }
+			{ ...props }
+			variant="body-sm"
+		/>
+	);
 } );

package/src/badge/style.module.css

@@ -5,10 +5,6 @@
 		padding-inline: var(--wpds-dimension-padding-sm);
 		padding-block: var(--wpds-dimension-padding-xs);
 		border-radius: var(--wpds-border-radius-lg);
-		font-family: var(--wpds-font-family-body);
-		font-size: var(--wpds-font-size-sm);
-		font-weight: var(--wpds-font-weight-regular);
-		line-height: var(--wpds-font-line-height-xs);
 	}
 
 	.is-high-intent {

package/src/button/button.tsx

@@ -7,6 +7,7 @@ import { type ButtonProps } from './types';
 import styles from './style.module.css';
 import resetStyles from '../utils/css/resets.module.css';
 import focusStyles from '../utils/css/focus.module.css';
+import defenseStyles from '../utils/css/global-css-defense.module.css';
 
 export const Button = forwardRef< HTMLButtonElement, ButtonProps >(
 	function Button(
@@ -25,6 +26,7 @@ export const Button = forwardRef< HTMLButtonElement, ButtonProps >(
 		ref
 	) {
 		const mergedClassName = clsx(
+			defenseStyles.button,
 			resetStyles[ 'box-sizing' ],
 			focusStyles[ 'outset-ring--focus-except-active' ],
 			variant !== 'unstyled' && styles.button,

package/src/button/style.module.css

@@ -20,7 +20,7 @@
 		--wp-ui-button-padding-inline: var(--wpds-dimension-padding-md);
 		--wp-ui-button-height: 40px;
 		--wp-ui-button-aspect-ratio: auto; /* Useful for overrides such as icon buttons */
-		--wp-ui-button-font-size: var(--wpds-font-size-md);
+		--wp-ui-button-font-size: var(--wpds-typography-font-size-md);
 		--wp-ui-button-min-width: calc(4ch + 2 * var(--wp-ui-button-padding-inline));
 
 		/* by default, borders have the same color as the background */
@@ -28,6 +28,10 @@
 		--wp-ui-button-border-color-active: var(--wp-ui-button-background-color-active);
 		--wp-ui-button-border-color-disabled: var(--wp-ui-button-background-color-disabled);
 
+		--_gcd-button-font-family: var(--wpds-typography-font-family-body);
+		--_gcd-button-font-size: var(--wp-ui-button-font-size);
+		--_gcd-button-font-weight: var(--wp-ui-button-font-weight);
+
 		/* Styles */
 		position: relative;
 		display: inline-flex;
@@ -44,10 +48,10 @@
 		border-radius: var(--wpds-border-radius-sm);
 		background-color: var(--wp-ui-button-background-color);
 		background-clip: padding-box;
-		font-family: var(--wpds-font-family-body);
+		font-family: var(--wpds-typography-font-family-body);
 		font-size: var(--wp-ui-button-font-size);
 		font-weight: var(--wp-ui-button-font-weight);
-		line-height: var(--wpds-font-line-height-sm);
+		line-height: var(--wpds-typography-line-height-sm);
 		text-decoration: none;
 		color: var(--wp-ui-button-foreground-color);
 		cursor: var(--wpds-cursor-control);

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

@@ -10,10 +10,10 @@ function Text( { children }: { children: React.ReactNode } ) {
 		<p
 			style={ {
 				margin: 0,
-				fontFamily: 'var(--wpds-font-family-body)',
-				fontSize: 'var(--wpds-font-size-md)',
-				fontWeight: 'var(--wpds-font-weight-regular)',
-				lineHeight: 'var(--wpds-font-line-height-sm)',
+				fontFamily: 'var(--wpds-typography-font-family-body)',
+				fontSize: 'var(--wpds-typography-font-size-md)',
+				fontWeight: 'var(--wpds-typography-font-weight-regular)',
+				lineHeight: 'var(--wpds-typography-line-height-sm)',
 				textWrap: 'pretty',
 				color: 'var(--wpds-color-fg-content-neutral-weak)',
 			} }
@@ -116,7 +116,6 @@ export const CustomSemantics: Story = {
 		children: (
 			<>
 				<Card.Header>
-					{ /* eslint-disable-next-line jsx-a11y/heading-has-content -- content provided via render prop */ }
 					<Card.Title render={ <h2 /> }>Section heading</Card.Title>
 				</Card.Header>
 				<Card.Content>

package/src/card/style.module.css

@@ -12,6 +12,7 @@
 		border-radius: var(--wpds-border-radius-lg);
 		overflow: clip;
 		background-color: var(--wpds-color-bg-surface-neutral-strong);
+		color: var(--wpds-color-fg-content-neutral);
 	}
 
 	/* Padding is applied to the individual header/content elements to enable
@@ -37,9 +38,4 @@
 		margin-inline: calc(-1 * var(--wp-ui-card-padding));
 		width: calc(100% + 2 * var(--wp-ui-card-padding));
 	}
-
-	.title {
-		margin: 0;
-		color: var(--wpds-color-fg-content-neutral);
-	}
 }

package/src/card/test/index.test.tsx

@@ -82,7 +82,6 @@ describe( 'Card', () => {
 			render(
 				<Card.Root>
 					<Card.Header>
-						{ /* eslint-disable-next-line jsx-a11y/heading-has-content -- content provided via render prop */ }
 						<Card.Title render={ <h2 /> }>Heading</Card.Title>
 					</Card.Header>
 				</Card.Root>
@@ -92,5 +91,22 @@ describe( 'Card', () => {
 				screen.getByRole( 'heading', { level: 2, name: 'Heading' } )
 			).toBeVisible();
 		} );
+
+		it( 'forwards ref to custom Title render element', () => {
+			const titleRef = createRef< HTMLHeadingElement >();
+
+			render(
+				<Card.Root>
+					<Card.Header>
+						<Card.Title ref={ titleRef } render={ <h3 /> }>
+							Heading
+						</Card.Title>
+					</Card.Header>
+				</Card.Root>
+			);
+
+			expect( titleRef.current ).toBeInstanceOf( HTMLHeadingElement );
+			expect( titleRef.current?.tagName ).toBe( 'H3' );
+		} );
 	} );
 } );

package/src/card/title.tsx

@@ -1,20 +1,21 @@
 import { forwardRef } from '@wordpress/element';
-import clsx from 'clsx';
 import { Text } from '../text';
-import styles from './style.module.css';
 import type { TitleProps } from './types';
 
+const DEFAULT_TAG = <div />;
+
 /**
  * The title for a card. Renders as a `<div>` by default — use the `render`
  * prop to swap in a semantic heading element when appropriate.
  */
 export const Title = forwardRef< HTMLDivElement, TitleProps >(
-	function CardTitle( { className, render, children, ...props }, ref ) {
+	function CardTitle( { render = DEFAULT_TAG, children, ...props }, ref ) {
 		return (
 			<Text
+				ref={ ref }
 				variant="heading-lg"
-				render={ render ?? <div ref={ ref } { ...props } /> }
-				className={ clsx( styles.title, className ) }
+				render={ render }
+				{ ...props }
 			>
 				{ children }
 			</Text>

package/src/collapsible-card/stories/index.story.tsx

@@ -12,10 +12,10 @@ function Text( { children }: { children: React.ReactNode } ) {
 		<p
 			style={ {
 				margin: 0,
-				fontFamily: 'var(--wpds-font-family-body)',
-				fontSize: 'var(--wpds-font-size-md)',
-				fontWeight: 'var(--wpds-font-weight-regular)',
-				lineHeight: 'var(--wpds-font-line-height-sm)',
+				fontFamily: 'var(--wpds-typography-font-family-body)',
+				fontSize: 'var(--wpds-typography-font-size-md)',
+				fontWeight: 'var(--wpds-typography-font-weight-regular)',
+				lineHeight: 'var(--wpds-typography-line-height-sm)',
 				textWrap: 'pretty',
 				color: 'var(--wpds-color-fg-content-neutral-weak)',
 			} }
@@ -183,7 +183,7 @@ export const WithHeaderDescription: Story = {
 					<CollapsibleCard.HeaderDescription>
 						<span
 							style={ {
-								fontSize: 'var(--wpds-font-size-sm)',
+								fontSize: 'var(--wpds-typography-font-size-sm)',
 								color: 'var(--wpds-color-fg-content-neutral-weak)',
 							} }
 						>

package/src/dialog/popup.tsx

@@ -24,6 +24,7 @@ const CLOSE_ICON_ATTR = 'data-wp-ui-dialog-close-icon';
 const Popup = forwardRef< HTMLDivElement, PopupProps >( function DialogPopup(
 	{
 		className,
+		container,
 		size = 'medium',
 		initialFocus,
 		finalFocus,
@@ -39,7 +40,7 @@ const Popup = forwardRef< HTMLDivElement, PopupProps >( function DialogPopup(
 	const mergedRef = useMergeRefs( [ ref, popupRef ] );
 
 	return (
-		<_Dialog.Portal>
+		<_Dialog.Portal container={ container }>
 			<_Dialog.Backdrop className={ styles.backdrop } />
 			<ThemeProvider>
 				<_Dialog.Popup

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useId, useState } from '@wordpress/element';
 import type { ComponentProps } from 'react';
+import { VisuallyHidden } from '../../visually-hidden';
 import * as Dialog from '../index';
 
 const meta: Meta< typeof Dialog.Root > = {
@@ -161,3 +162,35 @@ export const WithCustomZIndex: Story = {
 	..._Default,
 	name: 'With Custom z-index',
 };
+
+/**
+ * A dialog with a visually hidden title. The title is still present in the
+ * DOM for `aria-labelledby`, but is not visible to sighted users.
+ *
+ * Use `<VisuallyHidden render={ <Dialog.Title /> }>` so that `Dialog.Title`
+ * keeps its `<h2>` element while being visually hidden.
+ */
+export const WithVisuallyHiddenTitle: Story = {
+	args: {
+		children: (
+			<>
+				<Dialog.Trigger>Open Dialog</Dialog.Trigger>
+				<Dialog.Popup>
+					<Dialog.Header>
+						<VisuallyHidden render={ <Dialog.Title /> }>
+							Accessible dialog heading
+						</VisuallyHidden>
+						<Dialog.CloseIcon />
+					</Dialog.Header>
+					<p>
+						This dialog has a visually hidden title. Inspect the DOM
+						or use a screen reader to verify the heading is present.
+					</p>
+					<Dialog.Footer>
+						<Dialog.Action>Got it</Dialog.Action>
+					</Dialog.Footer>
+				</Dialog.Popup>
+			</>
+		),
+	},
+};

package/src/dialog/style.module.css

@@ -37,9 +37,9 @@
 		border-radius: var(--wpds-border-radius-lg);
 		box-shadow: var(--wpds-elevation-lg);
 		overflow: auto;
-		font-family: var(--wpds-font-family-body);
-		font-size: var(--wpds-font-size-md);
-		line-height: var(--wpds-font-line-height-md);
+		font-family: var(--wpds-typography-font-family-body);
+		font-size: var(--wpds-typography-font-size-md);
+		line-height: var(--wpds-typography-line-height-md);
 		color: var(--wpds-color-fg-content-neutral);
 
 		&[data-starting-style],
@@ -92,17 +92,21 @@
 
 	.header {
 		display: flex;
-		justify-content: space-between;
 		align-items: center;
+		gap: var(--wpds-dimension-gap-sm);
 		margin-bottom: var(--wpds-dimension-gap-lg);
 	}
 
 	.title {
-		margin: 0;
-		font-size: var(--wpds-font-size-xl);
-		font-weight: var(--wpds-font-weight-medium);
-		line-height: var(--wpds-font-line-height-xl);
-		color: var(--wpds-color-fg-content-neutral);
+		margin-inline-end: auto;
+
+		/* Workaround: the GCD shorthand `margin` overrides the longhand above.
+		 * Keep both so the layout survives GCD removal. */
+		--_gcd-heading-margin: 0 auto 0 0;
+
+		&:dir(rtl) {
+			--_gcd-heading-margin: 0 0 0 auto;
+		}
 	}
 
 	.footer {

package/src/dialog/test/index.test.tsx

@@ -203,10 +203,8 @@ describe( 'Dialog', () => {
 						<Dialog.Trigger>Open Dialog</Dialog.Trigger>
 						<Dialog.Popup>
 							<Dialog.Header>
-								{ /* @ts-expect-error this is just for test purposes */ }
-								<Dialog.Title>
-									{ /* Empty title */ }
-								</Dialog.Title>
+								{ /* Empty title */ }
+								<Dialog.Title />
 							</Dialog.Header>
 							<p>Content with empty title</p>
 							<Dialog.Footer>
@@ -423,4 +421,65 @@ describe( 'Dialog', () => {
 			expect( customFocus ).toHaveBeenCalled();
 		} );
 	} );
+
+	describe( 'container', () => {
+		it( 'should render inside the container when provided', async () => {
+			const user = userEvent.setup();
+			const containerRef = createRef< HTMLDivElement >();
+
+			render(
+				<div data-testid="wrapper">
+					<Dialog.Root>
+						<Dialog.Trigger>Open</Dialog.Trigger>
+						<div
+							ref={ containerRef }
+							data-testid="custom-container"
+						/>
+						<Dialog.Popup container={ containerRef }>
+							<Dialog.Header>
+								<Dialog.Title>Title</Dialog.Title>
+							</Dialog.Header>
+							Dialog content
+						</Dialog.Popup>
+					</Dialog.Root>
+				</div>
+			);
+
+			await user.click( screen.getByRole( 'button', { name: 'Open' } ) );
+
+			const content = await screen.findByText( 'Dialog 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(
+				<div data-testid="wrapper">
+					<Dialog.Root>
+						<Dialog.Trigger>Open</Dialog.Trigger>
+						<Dialog.Popup>
+							<Dialog.Header>
+								<Dialog.Title>Title</Dialog.Title>
+							</Dialog.Header>
+							Portal content
+						</Dialog.Popup>
+					</Dialog.Root>
+				</div>
+			);
+
+			await user.click( screen.getByRole( 'button', { name: 'Open' } ) );
+
+			const content = await screen.findByText( 'Portal content' );
+			expect( content ).toBeVisible();
+
+			expect( screen.getByTestId( 'wrapper' ) ).not.toContainElement(
+				content
+			);
+		} );
+	} );
 } );

package/src/dialog/title.tsx

@@ -1,7 +1,7 @@
 import { Dialog as _Dialog } from '@base-ui/react/dialog';
-import clsx from 'clsx';
 import { useMergeRefs } from '@wordpress/compose';
 import { forwardRef, useLayoutEffect, useRef } from '@wordpress/element';
+import { Text } from '../text';
 import { useDialogValidationContext } from './context';
 import styles from './style.module.css';
 import type { TitleProps } from './types';
@@ -11,11 +11,21 @@ import type { TitleProps } from './types';
  * and serves as both the visible heading and the accessible label for
  * the dialog.
  *
- * Base UI's Dialog.Title renders an `<h2>` by default. Use the `render` prop
- * to customize the element if needed.
+ * **Required** — every dialog must include a `Dialog.Title`, even if
+ * visually hidden. The rendered element is linked to the popup via
+ * `aria-labelledby`. Renders an `<h2>` by default.
+ *
+ * To visually hide the title while keeping it accessible, wrap it with
+ * `VisuallyHidden` using the `render` prop:
+ *
+ * ```jsx
+ * <VisuallyHidden render={ <Dialog.Title /> }>
+ *   Accessible title text
+ * </VisuallyHidden>
+ * ```
  */
 const Title = forwardRef< HTMLHeadingElement, TitleProps >(
-	function DialogTitle( { className, render, ...props }, forwardedRef ) {
+	function DialogTitle( { children, ...props }, forwardedRef ) {
 		const validationContext = useDialogValidationContext();
 		const internalRef = useRef< HTMLHeadingElement >( null );
 		const mergedRef = useMergeRefs( [ internalRef, forwardedRef ] );
@@ -26,12 +36,14 @@ const Title = forwardRef< HTMLHeadingElement, TitleProps >(
 		}, [ validationContext ] );
 
 		return (
-			<_Dialog.Title
+			<Text
 				ref={ mergedRef }
-				className={ clsx( styles.title, className ) }
-				render={ render }
-				{ ...props }
-			/>
+				variant="heading-xl"
+				render={ <_Dialog.Title { ...props } /> }
+				className={ styles.title }
+			>
+				{ children }
+			</Text>
 		);
 	}
 );

package/src/dialog/types.ts

@@ -34,6 +34,11 @@ export interface PopupProps
 	 */
 	children?: ReactNode;
 
+	/**
+	 * A parent element to render the portal into.
+	 */
+	container?: _Dialog.Portal.Props[ 'container' ];
+
 	/**
 	 * Renders the dialog at a preset width (excluding additional padding from
 	 * the viewport edges).
@@ -74,8 +79,11 @@ export interface TitleProps extends ComponentProps< 'h2' > {
 	/**
 	 * The title content to be rendered. This serves as both the visible
 	 * heading and the accessible label for the dialog.
+	 *
+	 * When `Dialog.Title` is passed as a render element (e.g. to
+	 * `VisuallyHidden`), children can be provided by the wrapper instead.
 	 */
-	children: ReactNode;
+	children?: ReactNode;
 }
 
 export interface CloseIconProps

package/src/empty-state/description.tsx

@@ -4,6 +4,8 @@ import { Text } from '../text';
 import type { EmptyStateDescriptionProps } from './types';
 import styles from './style.module.css';
 
+const DEFAULT_TAG = <p />;
+
 /**
  * The description text for an empty state, providing additional context and
  * guidance on what the user should do next.
@@ -12,14 +14,16 @@ export const Description = forwardRef<
 	HTMLParagraphElement,
 	EmptyStateDescriptionProps
 >( function EmptyStateDescription(
-	{ render, className, children, ...props },
+	{ render = DEFAULT_TAG, className, children, ...props },
 	ref
 ) {
 	return (
 		<Text
+			ref={ ref }
 			variant="body-md"
-			render={ render ?? <p ref={ ref } { ...props } /> }
+			render={ render }
 			className={ clsx( styles.description, className ) }
+			{ ...props }
 		>
 			{ children }
 		</Text>

package/src/empty-state/style.module.css

@@ -8,7 +8,7 @@
 		text-align: center;
 		max-width: var(--wpds-dimension-surface-width-sm);
 		gap: var(--wpds-dimension-gap-xs);
-		font-family: var(--wpds-font-family-body);
+		font-family: var(--wpds-typography-font-family-body);
 		color: var(--wpds-color-fg-content-neutral);
 		text-wrap: balance;
 	}