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

package/src/text/style.module.css

@@ -1,67 +1,93 @@
 @layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
 
 @layer wp-ui-components {
+	.text {
+		margin: 0;
+	}
+
 	.heading-2xl {
-		font-family: var(--wpds-font-family-heading);
-		font-size: var(--wpds-font-size-2xl);
-		line-height: var(--wpds-font-line-height-2xl);
-		font-weight: var(--wpds-font-weight-medium);
+		--_gcd-heading-font-size: var(--wpds-typography-font-size-2xl);
+
+		font-family: var(--wpds-typography-font-family-heading);
+		font-size: var(--wpds-typography-font-size-2xl);
+		line-height: var(--wpds-typography-line-height-2xl);
+		font-weight: var(--wpds-typography-font-weight-medium);
 	}
 
 	.heading-xl {
-		font-family: var(--wpds-font-family-heading);
-		font-size: var(--wpds-font-size-xl);
-		line-height: var(--wpds-font-line-height-md);
-		font-weight: var(--wpds-font-weight-medium);
+		--_gcd-heading-font-size: var(--wpds-typography-font-size-xl);
+
+		font-family: var(--wpds-typography-font-family-heading);
+		font-size: var(--wpds-typography-font-size-xl);
+		line-height: var(--wpds-typography-line-height-md);
+		font-weight: var(--wpds-typography-font-weight-medium);
 	}
 
 	.heading-lg {
-		font-family: var(--wpds-font-family-heading);
-		font-size: var(--wpds-font-size-lg);
-		line-height: var(--wpds-font-line-height-sm);
-		font-weight: var(--wpds-font-weight-medium);
+		--_gcd-heading-font-size: var(--wpds-typography-font-size-lg);
+
+		font-family: var(--wpds-typography-font-family-heading);
+		font-size: var(--wpds-typography-font-size-lg);
+		line-height: var(--wpds-typography-line-height-sm);
+		font-weight: var(--wpds-typography-font-weight-medium);
 	}
 
 	.heading-md {
-		font-family: var(--wpds-font-family-heading);
-		font-size: var(--wpds-font-size-md);
-		line-height: var(--wpds-font-line-height-sm);
-		font-weight: var(--wpds-font-weight-medium);
+		--_gcd-heading-font-size: var(--wpds-typography-font-size-md);
+
+		font-family: var(--wpds-typography-font-family-heading);
+		font-size: var(--wpds-typography-font-size-md);
+		line-height: var(--wpds-typography-line-height-sm);
+		font-weight: var(--wpds-typography-font-weight-medium);
 	}
 
 	.heading-sm {
-		font-family: var(--wpds-font-family-heading);
-		font-size: var(--wpds-font-size-xs);
-		line-height: var(--wpds-font-line-height-xs);
-		font-weight: var(--wpds-font-weight-medium);
+		--_gcd-heading-font-size: var(--wpds-typography-font-size-xs);
+
+		font-family: var(--wpds-typography-font-family-heading);
+		font-size: var(--wpds-typography-font-size-xs);
+		line-height: var(--wpds-typography-line-height-xs);
+		font-weight: var(--wpds-typography-font-weight-medium);
 		text-transform: uppercase;
 	}
 
 	.body-xl {
-		font-family: var(--wpds-font-family-body);
-		font-size: var(--wpds-font-size-xl);
-		line-height: var(--wpds-font-line-height-xl);
-		font-weight: var(--wpds-font-weight-regular);
+		--_gcd-p-font-size: var(--wpds-typography-font-size-xl);
+		--_gcd-p-line-height: var(--wpds-typography-line-height-xl);
+
+		font-family: var(--wpds-typography-font-family-body);
+		font-size: var(--wpds-typography-font-size-xl);
+		line-height: var(--wpds-typography-line-height-xl);
+		font-weight: var(--wpds-typography-font-weight-regular);
 	}
 
 	.body-lg {
-		font-family: var(--wpds-font-family-body);
-		font-size: var(--wpds-font-size-lg);
-		line-height: var(--wpds-font-line-height-md);
-		font-weight: var(--wpds-font-weight-regular);
+		--_gcd-p-font-size: var(--wpds-typography-font-size-lg);
+		--_gcd-p-line-height: var(--wpds-typography-line-height-md);
+
+		font-family: var(--wpds-typography-font-family-body);
+		font-size: var(--wpds-typography-font-size-lg);
+		line-height: var(--wpds-typography-line-height-md);
+		font-weight: var(--wpds-typography-font-weight-regular);
 	}
 
 	.body-md {
-		font-family: var(--wpds-font-family-body);
-		font-size: var(--wpds-font-size-md);
-		line-height: var(--wpds-font-line-height-sm);
-		font-weight: var(--wpds-font-weight-regular);
+		--_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-body);
+		font-size: var(--wpds-typography-font-size-md);
+		line-height: var(--wpds-typography-line-height-sm);
+		font-weight: var(--wpds-typography-font-weight-regular);
 	}
 
 	.body-sm {
-		font-family: var(--wpds-font-family-body);
-		font-size: var(--wpds-font-size-sm);
-		line-height: var(--wpds-font-line-height-xs);
-		font-weight: var(--wpds-font-weight-regular);
+		--_gcd-p-font-size: var(--wpds-typography-font-size-sm);
+		--_gcd-p-line-height: var(--wpds-typography-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);
+		font-weight: var(--wpds-typography-font-weight-regular);
 	}
 }

package/src/text/test/index.test.tsx

@@ -34,10 +34,7 @@ describe( 'Text', () => {
 	} );
 
 	it( 'supports the render prop', () => {
-		render(
-			// eslint-disable-next-line jsx-a11y/heading-has-content
-			<Text render={ <h2 /> }>Section title</Text>
-		);
+		render( <Text render={ <h2 /> }>Section title</Text> );
 
 		expect(
 			screen.getByRole( 'heading', { level: 2, name: 'Section title' } )

package/src/text/text.tsx

@@ -3,6 +3,7 @@ import clsx from 'clsx';
 import { forwardRef } from '@wordpress/element';
 import { type TextProps } from './types';
 import styles from './style.module.css';
+import defenseStyles from '../utils/css/global-css-defense.module.css';
 
 /**
  * A text component for rendering content with predefined typographic variants.
@@ -17,7 +18,13 @@ export const Text = forwardRef< HTMLSpanElement, TextProps >( function Text(
 		defaultTagName: 'span',
 		ref,
 		props: mergeProps< 'span' >( props, {
-			className: clsx( styles[ variant ], className ),
+			className: clsx(
+				styles.text,
+				variant.startsWith( 'heading-' ) && defenseStyles.heading,
+				variant.startsWith( 'body-' ) && defenseStyles.p,
+				styles[ variant ],
+				className
+			),
 		} ),
 	} );
 

package/src/tooltip/popup.tsx

@@ -16,6 +16,7 @@ const ThemeProvider: typeof ThemeProviderType =
 const Popup = forwardRef< HTMLDivElement, PopupProps >( function TooltipPopup(
 	{
 		align = 'center',
+		container,
 		side = 'top',
 		sideOffset = 4,
 		children,
@@ -26,7 +27,7 @@ const Popup = forwardRef< HTMLDivElement, PopupProps >( function TooltipPopup(
 	ref
 ) {
 	return (
-		<Tooltip.Portal>
+		<Tooltip.Portal container={ container }>
 			<Tooltip.Positioner
 				align={ align }
 				side={ side }

package/src/tooltip/root.tsx

@@ -1,6 +1,19 @@
 import { Tooltip } from '@base-ui/react/tooltip';
 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 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.
+ *
+ * @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}
+ */
 function Root( props: RootProps ) {
 	return <Tooltip.Root { ...props } />;
 }

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

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Tooltip } from '../..';
+import { formatBold, formatItalic } from '@wordpress/icons';
+import { Icon, Tooltip } from '../..';
 
 const meta: Meta< typeof Tooltip.Root > = {
 	title: 'Design System/Components/Tooltip',
@@ -16,8 +17,8 @@ export const Default: StoryObj< typeof Tooltip.Root > = {
 	args: {
 		children: (
 			<>
-				<Tooltip.Trigger>Hover me</Tooltip.Trigger>
-				<Tooltip.Popup>Tooltip text</Tooltip.Popup>
+				<Tooltip.Trigger aria-label="Save">💾</Tooltip.Trigger>
+				<Tooltip.Popup>Save</Tooltip.Popup>
 			</>
 		),
 	},
@@ -51,23 +52,23 @@ export const Positioning: StoryObj< typeof Tooltip.Root > = {
 			} }
 		>
 			<Tooltip.Root>
-				<Tooltip.Trigger>Top</Tooltip.Trigger>
-				<Tooltip.Popup side="top">Tooltip on top</Tooltip.Popup>
+				<Tooltip.Trigger aria-label="Up">⬆️</Tooltip.Trigger>
+				<Tooltip.Popup side="top">Up</Tooltip.Popup>
 			</Tooltip.Root>
 
 			<Tooltip.Root>
-				<Tooltip.Trigger>Right</Tooltip.Trigger>
-				<Tooltip.Popup side="right">Tooltip on right</Tooltip.Popup>
+				<Tooltip.Trigger aria-label="Forward">➡️</Tooltip.Trigger>
+				<Tooltip.Popup side="right">Forward</Tooltip.Popup>
 			</Tooltip.Root>
 
 			<Tooltip.Root>
-				<Tooltip.Trigger>Bottom</Tooltip.Trigger>
-				<Tooltip.Popup side="bottom">Tooltip on bottom</Tooltip.Popup>
+				<Tooltip.Trigger aria-label="Down">⬇️</Tooltip.Trigger>
+				<Tooltip.Popup side="bottom">Down</Tooltip.Popup>
 			</Tooltip.Root>
 
 			<Tooltip.Root>
-				<Tooltip.Trigger>Left</Tooltip.Trigger>
-				<Tooltip.Popup side="left">Tooltip on left</Tooltip.Popup>
+				<Tooltip.Trigger aria-label="Back">⬅️</Tooltip.Trigger>
+				<Tooltip.Popup side="left">Back</Tooltip.Popup>
 			</Tooltip.Root>
 		</div>
 	),
@@ -83,13 +84,17 @@ export const WithProvider: StoryObj< typeof Tooltip.Root > = {
 		<Tooltip.Provider delay={ 0 }>
 			<div style={ { display: 'flex', gap: '1rem' } }>
 				<Tooltip.Root>
-					<Tooltip.Trigger>First</Tooltip.Trigger>
-					<Tooltip.Popup>First tooltip</Tooltip.Popup>
+					<Tooltip.Trigger aria-label="Bold">
+						<Icon icon={ formatBold } />
+					</Tooltip.Trigger>
+					<Tooltip.Popup>Bold</Tooltip.Popup>
 				</Tooltip.Root>
 
 				<Tooltip.Root>
-					<Tooltip.Trigger>Second</Tooltip.Trigger>
-					<Tooltip.Popup>Second tooltip</Tooltip.Popup>
+					<Tooltip.Trigger aria-label="Italic">
+						<Icon icon={ formatItalic } />
+					</Tooltip.Trigger>
+					<Tooltip.Popup>Italic</Tooltip.Popup>
 				</Tooltip.Root>
 			</div>
 		</Tooltip.Provider>

package/src/tooltip/stories/usage-guidelines.mdx

@@ -0,0 +1,91 @@
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
+import * as UsageGuidelinesStories from './usage-guidelines.story';
+
+<Meta of={ UsageGuidelinesStories } />
+
+# Tooltip usage guidelines
+
+## Usage guidelines
+
+-   **Use tooltips as visual labels only.** Tooltips should act as
+    supplementary visual labels for sighted mouse and keyboard users.
+    Tooltip popups are not exposed to assistive technologies — the
+    trigger's accessible name (e.g. `aria-label`) is what provides the
+    label for screen reader users.
+    See [_Alternatives to tooltips_](#alternatives-to-tooltips) below for
+    more details.
+-   **Provide an accessible name for the trigger.** Tooltips are visual-only
+    elements and are not a replacement for labeling the trigger. The
+    tooltip's trigger must have an `aria-label` that matches or is a concise
+    equivalent of the tooltip's content to ensure consistency for screen
+    reader users. If the tooltip also displays a keyboard shortcut, use
+    `aria-keyshortcuts` on the trigger.
+
+<Canvas of={ UsageGuidelinesStories.RecommendedUsage } />
+
+`IconButton` has built-in tooltip support via the `label` prop, making it
+the easiest way to provide a tooltip for icon-only actions.
+
+<Canvas of={ UsageGuidelinesStories.IconButtonWithTooltip } />
+
+## Alternatives to tooltips
+
+Tooltips should be supplementary popups that provide non-essential clarity in
+high-density UIs. A user should not miss critical information if they never
+see a tooltip.
+
+Tooltips don't work well with touch input. Unlike mouse pointers with hover
+capability, there's no easily discoverable way to reveal a tooltip before
+tapping its trigger on a touch device.
+
+iOS doesn't provide a system-standard, touch-friendly tooltip affordance,
+while Android may show a tooltip on long press. However, on the web,
+long press is often used to trigger contextual menus in the browser, which
+can lead to potential conflicts. For this reason, tooltips are disabled on
+touch devices.
+
+### Infotips
+
+Popups that open when hovering an info icon should use
+[Popover](?path=/docs/design-system-components-popover--docs) 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.
+
+<Canvas of={ UsageGuidelinesStories.InfotipWithPopover } />
+
+See also the [Popover Infotip story](?path=/story/design-system-components-popover--infotip).
+
+Infotips opened on hover can be dismissed by pressing `Escape`.
+
+### Description text
+
+Tooltips are designed for sighted mouse and keyboard users and are not a reliable way to deliver
+important information to touch users or assistive technologies. If the
+description is important to understanding the element, don't hide it behind a
+tooltip — use inline text or
+[Popover](?path=/docs/design-system-components-popover--docs) if space is
+limited, so the information is accessible to everyone.
+
+Since tooltips serve sighted mouse and keyboard users, iconography should
+clearly communicate the purpose of icon-only triggers, especially on mobile
+where the text label may not be visible.
+
+If the description is not critical, a tooltip can still be used to provide
+extra clarity for sighted mouse or keyboard users.
+
+### Contextual feedback messages
+
+For contextual feedback after an action (e.g. "Copied!"), prefer a pattern
+that ensures the message is announced to screen readers and supports complex
+content, such as a
+[Notice](?path=/docs/design-system-components-notice--docs).
+
+## References
+
+-   [WCAG 1.4.13: Content on Hover or Focus](https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html) — tooltips must be dismissible (Escape), hoverable, and persistent.
+-   [WAI-ARIA APG: Tooltip pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/) — note that this component intentionally diverges from the traditional `role="tooltip"` + `aria-describedby` pattern. The trigger's `aria-label` is the source of truth for assistive technologies, and the tooltip popup is a visual-only supplement.

package/src/tooltip/stories/usage-guidelines.story.tsx

@@ -0,0 +1,119 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import {
+	formatBold,
+	formatItalic,
+	formatUnderline,
+	info,
+} from '@wordpress/icons';
+import { Icon, IconButton, Popover, Tooltip, VisuallyHidden } from '../..';
+
+const meta: Meta = {
+	title: 'Design System/Components/Tooltip/Usage Guidelines',
+	parameters: {
+		controls: { disable: true },
+	},
+	tags: [ '!dev' ],
+};
+export default meta;
+
+type Story = StoryObj;
+
+/**
+ * Tooltips work best as visual labels for icon-only controls. Each trigger
+ * must have its own accessible name via `aria-label`.
+ */
+export const RecommendedUsage: Story = {
+	render: () => (
+		<Tooltip.Provider delay={ 0 }>
+			<div style={ { display: 'flex', gap: '0.25rem' } }>
+				<Tooltip.Root>
+					<Tooltip.Trigger aria-label="Bold">
+						<Icon icon={ formatBold } />
+					</Tooltip.Trigger>
+					<Tooltip.Popup>Bold</Tooltip.Popup>
+				</Tooltip.Root>
+
+				<Tooltip.Root>
+					<Tooltip.Trigger aria-label="Italic">
+						<Icon icon={ formatItalic } />
+					</Tooltip.Trigger>
+					<Tooltip.Popup>Italic</Tooltip.Popup>
+				</Tooltip.Root>
+
+				<Tooltip.Root>
+					<Tooltip.Trigger aria-label="Underline">
+						<Icon icon={ formatUnderline } />
+					</Tooltip.Trigger>
+					<Tooltip.Popup>Underline</Tooltip.Popup>
+				</Tooltip.Root>
+			</div>
+		</Tooltip.Provider>
+	),
+};
+
+/**
+ * Popups that open when hovering an info icon should use `Popover` with
+ * `openOnHover` instead of a Tooltip. This ensures the content is accessible
+ * to touch and screen reader users.
+ */
+export const InfotipWithPopover: Story = {
+	render: () => (
+		<div
+			style={ {
+				display: 'flex',
+				alignItems: 'center',
+				gap: 'var(--wpds-dimension-gap-xs)',
+			} }
+		>
+			<span>Label</span>
+			<Popover.Root>
+				<Popover.Trigger
+					openOnHover
+					delay={ 200 }
+					closeDelay={ 200 }
+					aria-label="More information"
+					style={ {
+						background: 'none',
+						border: 'none',
+						padding: 0,
+						cursor: 'var(--wpds-cursor-control)',
+						display: 'inline-flex',
+						alignItems: 'center',
+						borderRadius: 'var(--wpds-border-radius-sm)',
+					} }
+				>
+					<Icon icon={ info } size={ 20 } />
+				</Popover.Trigger>
+				<Popover.Popup>
+					<Popover.Arrow />
+					<VisuallyHidden render={ <Popover.Title /> }>
+						More information
+					</VisuallyHidden>
+					<Popover.Description>
+						This is additional context about the label. Unlike
+						tooltips, this content is accessible to touch and screen
+						reader users.
+					</Popover.Description>
+				</Popover.Popup>
+			</Popover.Root>
+		</div>
+	),
+};
+
+/**
+ * `IconButton` has built-in tooltip support via the `label` prop,
+ * making it the easiest way to provide a tooltip for icon-only actions.
+ */
+export const IconButtonWithTooltip: Story = {
+	render: () => (
+		<div style={ { display: 'flex', gap: '0.25rem' } }>
+			<IconButton icon={ formatBold } label="Bold" size="compact" />
+			<IconButton icon={ formatItalic } label="Italic" size="compact" />
+			<IconButton
+				icon={ formatUnderline }
+				label="Underline"
+				size="compact"
+			/>
+		</div>
+	),
+};

package/src/tooltip/style.module.css

@@ -11,8 +11,8 @@
 			var(--wpds-dimension-padding-xs)
 			var(--wpds-dimension-padding-sm);
 		border-radius: var(--wpds-border-radius-sm);
-		font-family: var(--wpds-font-family-body);
-		font-size: var(--wpds-font-size-sm);
+		font-family: var(--wpds-typography-font-family-body);
+		font-size: var(--wpds-typography-font-size-sm);
 		line-height: 1.4; /* TODO: use DS token for line height */
 		color: var(--wpds-color-fg-content-neutral);
 		box-shadow: var(--wpds-elevation-sm);

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

@@ -84,4 +84,65 @@ describe( 'Tooltip', () => {
 			screen.queryByText( 'Tooltip content' )
 		).not.toBeInTheDocument();
 	} );
+
+	describe( 'container', () => {
+		it( 'should render inside the container when 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 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/types.ts

@@ -23,4 +23,9 @@ export interface PopupProps
 	 * The content to be rendered inside the component.
 	 */
 	children?: ReactNode;
+
+	/**
+	 * A parent element to render the portal into.
+	 */
+	container?: Tooltip.Portal.Props[ 'container' ];
 }

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

@@ -2,26 +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 {
-		margin: 0;
-		font-family: var(--wpds-font-family-body);
-		font-size: var(--wpds-font-size-sm);
-		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-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/focus.module.css

@@ -9,14 +9,14 @@
 	.outset-ring--focus-within-visible,
 	.outset-ring--focus-parent-visible {
 		@media not ( prefers-reduced-motion ) {
+			--_gcd-a-transition: outline 0.1s ease-out;
+
 			transition: outline 0.1s ease-out;
 		}
 
 		/* Outline width must be kept at 0 even with a transparent color,
 		or else the outline will be visible in forced-colors mode. */
-		outline-width: 0;
-		outline-style: solid;
-		outline-color: transparent;
+		outline: 0 solid transparent;
 		outline-offset: 1px;
 	}
 
@@ -27,7 +27,9 @@
 	.outset-ring--focus-within-except-active:focus-within:not(:has(:active)),
 	.outset-ring--focus-within-visible:focus-within:has(:focus-visible),
 	:focus-visible .outset-ring--focus-parent-visible {
-		outline-width: var(--wpds-border-width-focus);
-		outline-color: var(--wpds-color-stroke-focus-brand);
+		--_gcd-a-outline: var(--wpds-border-width-focus) solid var(--wpds-color-stroke-focus-brand);
+		--_gcd-div-outline: var(--wpds-border-width-focus) solid var(--wpds-color-stroke-focus-brand);
+
+		outline: var(--wpds-border-width-focus) solid var(--wpds-color-stroke-focus-brand);
 	}
 }