@wordpress/ui 0.6.0 → 0.7.1-next.v.0

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

@@ -0,0 +1,15 @@
+/**
+ * Groups the tabs and the corresponding panels.
+ *
+ * `Tabs` is a collection of React components that combine to render
+ * an [ARIA-compliant tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).
+ */
+export declare const Root: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").TabsRootProps & import("react").RefAttributes<HTMLDivElement>, "ref">, "className" | "children" | "render"> & {
+    className?: string;
+    render?: ((props: import("react").HTMLAttributes<any> & {
+        ref?: import("react").Ref<any> | undefined;
+    }) => React.ReactElement<unknown>) | React.ReactElement<Record<string, unknown>>;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=root.d.ts.map

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

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

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

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Tabs } from '../..';
+declare const meta: Meta<typeof Tabs.Root>;
+export default meta;
+export declare const Default: StoryObj<typeof Tabs.Root>;
+export declare const Minimal: StoryObj<typeof Tabs.Root>;
+export declare const SizeAndOverflowPlayground: StoryObj<typeof Tabs.Root>;
+export declare const Vertical: StoryObj<typeof Tabs.Root>;
+export declare const WithDisabledTab: StoryObj<typeof Tabs.Root>;
+export declare const WithTabIconsAndTooltips: StoryObj<typeof Tabs.Root>;
+export declare const WithPanelsAlwaysMounted: StoryObj<typeof Tabs.Root>;
+export declare const WithNonFocusablePanels: StoryObj<typeof Tabs.Root>;
+//# sourceMappingURL=index.story.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/tabs/stories/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,EAAE,IAAI,EAAW,MAAM,OAAO,CAAC;AAEtC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,IAAI,CAAC,IAAI,CAQjC,CAAC;AACF,eAAe,IAAI,CAAC;AAUpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,IAAI,CAAC,IAAI,CAsB/C,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,IAAI,CAAC,IAAI,CAsB/C,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,QAAQ,CAAE,OAAO,IAAI,CAAC,IAAI,CAqHjE,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAE,OAAO,IAAI,CAAC,IAAI,CAWhD,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,QAAQ,CAAE,OAAO,IAAI,CAAC,IAAI,CAyBvD,CAAC;AAgCF,eAAO,MAAM,uBAAuB,EAAE,QAAQ,CAAE,OAAO,IAAI,CAAC,IAAI,CAsC/D,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,QAAQ,CAAE,OAAO,IAAI,CAAC,IAAI,CAsB/D,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,QAAQ,CAAE,OAAO,IAAI,CAAC,IAAI,CAqC9D,CAAC"}

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

@@ -0,0 +1,15 @@
+/**
+ * An individual interactive tab button that toggles the corresponding panel.
+ *
+ * `Tabs` is a collection of React components that combine to render
+ * an [ARIA-compliant tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).
+ */
+export declare const Tab: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").TabsTabProps & import("react").RefAttributes<Element>, "ref">, "className" | "children" | "render"> & {
+    className?: string;
+    render?: ((props: import("react").HTMLAttributes<any> & {
+        ref?: import("react").Ref<any> | undefined;
+    }) => React.ReactElement<unknown>) | React.ReactElement<Record<string, unknown>>;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=tab.d.ts.map

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

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

package/build-types/tabs/test/index.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.test.d.ts.map

package/build-types/tabs/test/index.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.test.d.ts","sourceRoot":"","sources":["../../../src/tabs/test/index.test.tsx"],"names":[],"mappings":""}

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

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+import type { Tabs as _Tabs } from '@base-ui/react/tabs';
+import type { ComponentProps } from '../utils/types';
+export type TabRootProps = ComponentProps<typeof _Tabs.Root> & {
+    /**
+     * The content to be rendered inside the component.
+     */
+    children?: ReactNode;
+};
+export type TabListProps = ComponentProps<typeof _Tabs.List> & {
+    /**
+     * The content to be rendered inside the component.
+     */
+    children?: ReactNode;
+    /**
+     * The visual variant of the tab list.
+     * @default "default"
+     */
+    variant?: 'minimal' | 'default';
+};
+export type TabProps = ComponentProps<typeof _Tabs.Tab> & {
+    /**
+     * The content to be rendered inside the component.
+     */
+    children?: ReactNode;
+};
+export type TabPanelProps = ComponentProps<typeof _Tabs.Panel> & {
+    /**
+     * The content to be rendered inside the component.
+     */
+    children?: ReactNode;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/tabs/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,IAAI,IAAI,KAAK,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,MAAM,MAAM,YAAY,GAAG,cAAc,CAAE,OAAO,KAAK,CAAC,IAAI,CAAE,GAAG;IAChE;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,cAAc,CAAE,OAAO,KAAK,CAAC,IAAI,CAAE,GAAG;IAChE;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,cAAc,CAAE,OAAO,KAAK,CAAC,GAAG,CAAE,GAAG;IAC3D;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,cAAc,CAAE,OAAO,KAAK,CAAC,KAAK,CAAE,GAAG;IAClE;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/ui",
-	"version": "0.6.0",
+	"version": "0.7.1-next.v.0+642962a6d",
 	"description": "Themeable React UI components for the WordPress Design System.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -44,13 +44,15 @@
 	"sideEffects": false,
 	"dependencies": {
 		"@base-ui/react": "^1.0.0",
-		"@wordpress/a11y": "^4.39.0",
-		"@wordpress/element": "^6.39.0",
-		"@wordpress/i18n": "^6.12.0",
-		"@wordpress/icons": "^11.6.0",
-		"@wordpress/primitives": "^4.39.0",
-		"@wordpress/private-apis": "^1.39.0",
-		"@wordpress/theme": "^0.6.0",
+		"@wordpress/a11y": "^4.39.1-next.v.0+642962a6d",
+		"@wordpress/compose": "^7.39.1-next.v.0+642962a6d",
+		"@wordpress/element": "^6.39.1-next.v.0+642962a6d",
+		"@wordpress/i18n": "^6.12.1-next.v.0+642962a6d",
+		"@wordpress/icons": "^11.6.1-next.v.0+642962a6d",
+		"@wordpress/keycodes": "^4.39.1-next.v.0+642962a6d",
+		"@wordpress/primitives": "^4.39.1-next.v.0+642962a6d",
+		"@wordpress/private-apis": "^1.39.1-next.v.0+642962a6d",
+		"@wordpress/theme": "^0.7.1-next.v.0+642962a6d",
 		"clsx": "^2.1.1"
 	},
 	"devDependencies": {
@@ -68,5 +70,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "eee1cfb1472f11183e40fb77465a5f13145df7ad"
+	"gitHead": "2de56f23b200b6dc4b1feda4408613ad088d160a"
 }

package/src/badge/badge.tsx

@@ -70,7 +70,7 @@ export const Badge = forwardRef< HTMLDivElement, BadgeProps >( function Badge(
 	return (
 		<Box
 			{ ...intentStyles }
-			padding={ { inline: 'xs', block: '2xs' } }
+			padding={ { inline: 'sm', block: 'xs' } }
 			borderRadius="lg"
 			render={ render }
 			style={ {

package/src/box/box.tsx

@@ -20,16 +20,11 @@ const capitalize = ( str: string ): string =>
  * fallback).
  *
  * @param property The CSS property name.
- * @param target   The design system token target.
  * @param value    The size token name.
  * @return A CSS value string with variable references.
  */
-const getSpacingValue = (
-	property: string,
-	target: string,
-	value: string
-): string =>
-	`var(--wpds-dimension-${ property }-${ target }-${ value }, var(--wpds-dimension-${ property }-surface-${ value }))`;
+const getSpacingValue = ( property: string, value: string ): string =>
+	`var(--wpds-dimension-${ property }-${ value }, var(--wpds-dimension-${ property }-${ value }))`;
 
 /**
  * Generates CSS styles for properties with optionally directional values,
@@ -37,23 +32,20 @@ const getSpacingValue = (
  * properties.
  *
  * @param property The CSS property name from BoxProps.
- * @param target   The design system token target.
  * @param value    The property value (single or object with directional keys).
  * @return A CSSProperties object with the computed styles.
  */
 const getDimensionVariantStyles = < T extends keyof BoxProps >(
 	property: T,
-	target: string,
 	value: NonNullable< BoxProps[ T ] >
 ): React.CSSProperties =>
 	typeof value !== 'object'
-		? { [ property ]: getSpacingValue( property, target, value ) }
+		? { [ property ]: getSpacingValue( property, value ) }
 		: Object.keys( value ).reduce(
 				( result, key ) => ( {
 					...result,
 					[ property + capitalize( key ) ]: getSpacingValue(
 						property,
-						target,
 						value[ key ]
 					),
 				} ),
@@ -89,10 +81,7 @@ export const Box = forwardRef< HTMLDivElement, BoxProps >( function Box(
 	}
 
 	if ( padding ) {
-		Object.assign(
-			style,
-			getDimensionVariantStyles( 'padding', target, padding )
-		);
+		Object.assign( style, getDimensionVariantStyles( 'padding', padding ) );
 	}
 
 	if ( borderRadius ) {

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

@@ -23,7 +23,15 @@ export const Default: Story = {
 	argTypes: {
 		padding: {
 			control: 'select',
-			options: [ '2xs', 'xs', 'sm', 'md', 'lg' ] satisfies PaddingSize[],
+			options: [
+				'xs',
+				'sm',
+				'md',
+				'lg',
+				'xl',
+				'2xl',
+				'3xl',
+			] satisfies PaddingSize[],
 		},
 	},
 };

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

@@ -1,4 +1,4 @@
-import { Fragment, useState } from '@wordpress/element';
+import { Fragment } from '@wordpress/element';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { cog } from '@wordpress/icons';
 import { Button } from '../index';
@@ -166,8 +166,7 @@ export const Loading: Story = {
 
 /**
  * The pressed state is only available for buttons with `tone="neutral"` and
- * `variant="minimal"`. This represents a toggle button that is currently in an
- * active/pressed state.
+ * `variant="minimal"` and can be toggled via the `aria-pressed` HTML attribute.
  */
 export const Pressed: Story = {
 	...Default,
@@ -175,18 +174,6 @@ export const Pressed: Story = {
 		...Default.args,
 		tone: 'neutral',
 		variant: 'minimal',
-	},
-	render: ( args ) => {
-		const [ isPressed, setIsPressed ] = useState( true );
-
-		return (
-			<Button
-				{ ...args }
-				aria-pressed={ isPressed }
-				onClick={ () => setIsPressed( ! isPressed ) }
-			>
-				Button
-			</Button>
-		);
+		'aria-pressed': true,
 	},
 };

package/src/button/style.module.css

@@ -17,10 +17,11 @@
 		--wp-ui-button-foreground-color: var(--wpds-color-fg-interactive-brand-strong);
 		--wp-ui-button-foreground-color-active: var(--wpds-color-fg-interactive-brand-strong-active);
 		--wp-ui-button-foreground-color-disabled: var(--wpds-color-fg-interactive-neutral-strong-disabled);
-		--wp-ui-button-padding-inline: calc(3 * var(--wpds-dimension-base)); /* TODO: Create new interactive padding tokens */
+		--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-min-width: calc(4ch + 2 * var(--wp-ui-button-padding-inline));
 
 		/* by default, borders have the same color as the background */
 		--wp-ui-button-border-color: var(--wp-ui-button-background-color);
@@ -32,8 +33,9 @@
 		display: inline-flex;
 		justify-content: center;
 		align-items: center;
-		gap: calc(2 * var(--wpds-dimension-base)); /* TODO: Consider new interactive/control gap tokens */
+		gap: var(--wpds-dimension-gap-sm);
 		aspect-ratio: var(--wp-ui-button-aspect-ratio);
+		min-width: var(--wp-ui-button-min-width);
 		height: var(--wp-ui-button-height);
 		padding-inline: var(--wp-ui-button-padding-inline);
 		border-style: solid;
@@ -119,7 +121,7 @@
 	}
 
 	.is-small {
-		--wp-ui-button-padding-inline: calc(2 * var(--wpds-dimension-base)); /* TODO: Create new interactive padding tokens */
+		--wp-ui-button-padding-inline: var(--wpds-dimension-padding-sm);
 		--wp-ui-button-height: 24px;
 	}
 
@@ -188,6 +190,7 @@
 	}
 
 	.is-unstyled {
+		min-width: unset;
 		border: none;
 		background: none;
 	}

package/src/form/primitives/field/stories/index.story.tsx

@@ -1,6 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useId } from '@wordpress/element';
-import '@wordpress/theme/design-tokens.css';
 import { Field } from '../../../..';
 
 const meta: Meta< typeof Field.Root > = {

package/src/form/primitives/fieldset/style.module.css

@@ -4,7 +4,7 @@
 	.root {
 		display: flex;
 		flex-direction: column;
-		gap: var(--wpds-dimension-gap-2xs);
+		gap: var(--wpds-dimension-gap-xs);
 		border: 0;
 		margin: 0;
 		padding: 0;

package/src/form/primitives/input-layout/style.module.css

@@ -2,8 +2,7 @@
 
 @layer wp-ui-components {
 	.input-layout {
-		/* TODO: Use padding tokens */
-		--wp-ui-input-layout-padding-inline: calc(var(--wpds-dimension-base) * 3);
+		--wp-ui-input-layout-padding-inline: var(--wpds-dimension-padding-md);
 
 		display: flex;
 		height: 40px;
@@ -22,14 +21,12 @@
 		}
 
 		&.is-size-compact {
-			/* TODO: Use padding tokens */
-			--wp-ui-input-layout-padding-inline: calc(var(--wpds-dimension-base) * 2);
+			--wp-ui-input-layout-padding-inline: var(--wpds-dimension-padding-sm);
 			height: 32px;
 		}
 
 		&.is-size-small {
-			/* TODO: Use padding tokens */
-			--wp-ui-input-layout-padding-inline: calc(var(--wpds-dimension-base) * 2);
+			--wp-ui-input-layout-padding-inline: var(--wpds-dimension-padding-sm);
 			height: 24px;
 		}
 
@@ -66,10 +63,10 @@
 		&.is-padding-minimal {
 			--wp-ui-input-layout-prefix-padding-start:
 				calc(var(--wp-ui-input-layout-padding-inline) -
-				var(--wpds-dimension-base));
+				var(--wpds-dimension-padding-xs));
 			--wp-ui-input-layout-suffix-padding-end:
 				calc(var(--wp-ui-input-layout-padding-inline) -
-				var(--wpds-dimension-base));
+				var(--wpds-dimension-padding-xs));
 		}
 
 		&.is-prefix {

package/src/form/primitives/select/stories/index.story.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import '@wordpress/theme/design-tokens.css';
 import { Select } from '../../../..';
 
 const meta: Meta< typeof Select.Root > = {

package/src/icon-button/icon-button.tsx

@@ -0,0 +1,64 @@
+import clsx from 'clsx';
+import { forwardRef } from '@wordpress/element';
+import { Button } from '../button';
+import { Icon } from '../icon';
+import * as Tooltip from '../tooltip';
+import styles from './style.module.css';
+import { type IconButtonProps } from './types';
+
+/**
+ * An icon-only button with automatic tooltip and optimized styling.
+ * Inherits all Button props while providing icon-specific enhancements.
+ */
+export const IconButton = forwardRef< HTMLButtonElement, IconButtonProps >(
+	function IconButton(
+		{
+			label,
+			className,
+			// Prevent accidental forwarding of `children`
+			children: _children,
+			icon,
+			size,
+			shortcut,
+			...restProps
+		}: IconButtonProps & { children?: unknown },
+		ref
+	) {
+		const classes = clsx( styles[ 'icon-button' ], className );
+
+		return (
+			<Tooltip.Provider delay={ 0 }>
+				<Tooltip.Root>
+					<Tooltip.Trigger
+						ref={ ref }
+						render={
+							<Button
+								{ ...restProps }
+								size={ size }
+								aria-label={ label }
+								aria-keyshortcuts={ shortcut?.ariaKeyShortcut }
+							/>
+						}
+						className={ classes }
+					>
+						<Icon
+							icon={ icon }
+							size={ size === 'small' ? 22 : 24 }
+						/>
+					</Tooltip.Trigger>
+					<Tooltip.Popup>
+						{ label }
+						{ shortcut && (
+							<>
+								{ ' ' }
+								<span aria-hidden="true">
+									{ shortcut.displayShortcut }
+								</span>
+							</>
+						) }
+					</Tooltip.Popup>
+				</Tooltip.Root>
+			</Tooltip.Provider>
+		);
+	}
+);

package/src/icon-button/index.ts

@@ -0,0 +1 @@
+export { IconButton } from './icon-button';

package/src/icon-button/stories/index.story.tsx

@@ -0,0 +1,128 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import {
+	cog,
+	copy,
+	download,
+	pencil,
+	plus,
+	trash,
+	upload,
+	wordpress,
+} from '@wordpress/icons';
+import { displayShortcut, ariaKeyShortcut } from '@wordpress/keycodes';
+import { IconButton } from '../index';
+
+const meta: Meta< typeof IconButton > = {
+	title: 'Design System/Components/IconButton',
+	component: IconButton,
+	argTypes: {
+		'aria-pressed': {
+			control: { type: 'boolean' },
+		},
+	},
+};
+export default meta;
+
+type Story = StoryObj< typeof IconButton >;
+
+export const Default: Story = {
+	args: {
+		icon: cog,
+		label: 'Settings',
+	},
+};
+
+export const Outline: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		variant: 'outline',
+	},
+};
+
+export const Minimal: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		variant: 'minimal',
+	},
+};
+
+export const Neutral: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		tone: 'neutral',
+		label: 'Settings',
+	},
+};
+
+export const NeutralOutline: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		tone: 'neutral',
+		variant: 'outline',
+		label: 'Settings',
+	},
+};
+
+export const Disabled: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		disabled: true,
+		label: 'Settings',
+	},
+};
+
+export const WithDifferentIcons: Story = {
+	...Default,
+	render: ( args ) => (
+		<div
+			style={ {
+				display: 'flex',
+				gap: '1rem',
+				alignItems: 'center',
+				flexWrap: 'wrap',
+			} }
+		>
+			<IconButton { ...args } icon={ wordpress } label="WordPress" />
+			<IconButton { ...args } icon={ plus } label="Add" />
+			<IconButton { ...args } icon={ pencil } label="Edit" />
+			<IconButton { ...args } icon={ trash } label="Delete" />
+			<IconButton { ...args } icon={ download } label="Download" />
+			<IconButton { ...args } icon={ upload } label="Upload" />
+		</div>
+	),
+};
+
+/**
+ * The pressed state is only available for buttons with `tone="neutral"` and
+ * `variant="minimal"` and can be toggled via the `aria-pressed` HTML attribute.
+ */
+export const Pressed: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		tone: 'neutral',
+		variant: 'minimal',
+		label: 'Toggle Settings',
+		'aria-pressed': true,
+	},
+};
+
+const EXAMPLE_SHORTCUT_OBJECT = {
+	displayShortcut: displayShortcut.primary( 'c' ),
+	ariaKeyShortcut: ariaKeyShortcut.primary( 'c' ),
+};
+
+export const WithShortcut: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		icon: copy,
+		label: 'Copy',
+		shortcut: EXAMPLE_SHORTCUT_OBJECT,
+	},
+};

package/src/icon-button/style.module.css

@@ -0,0 +1,9 @@
+@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
+
+@layer wp-ui-compositions {
+	.icon-button {
+		--wp-ui-button-aspect-ratio: 1;
+		--wp-ui-button-padding-inline: 0;
+		--wp-ui-button-min-width: unset;
+	}
+}

package/src/icon-button/test/index.test.tsx

@@ -0,0 +1,86 @@
+import { render, waitFor, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { createRef } from '@wordpress/element';
+import { IconButton } from '../index';
+
+describe( 'IconButton', () => {
+	it( 'forwards ref', () => {
+		const ref = createRef< HTMLButtonElement >();
+
+		render( <IconButton ref={ ref } label="Click me" icon={ <svg /> } /> );
+
+		expect( ref.current ).toBeInstanceOf( HTMLButtonElement );
+	} );
+
+	it( 'respects custom render prop as handled by Button', () => {
+		render(
+			<IconButton
+				label="Click me"
+				icon={ <svg /> }
+				variant="outline"
+				disabled
+				focusableWhenDisabled
+				render={ <button data-testid="button" /> }
+			/>
+		);
+
+		// Should render as a button from `render` prop...
+		const button = screen.getByRole( 'button', { name: 'Click me' } );
+		expect( button ).toHaveAttribute( 'data-testid', 'button' );
+
+		// ...and still inherit the behavior of Button
+		expect( button ).toBeEnabled();
+		expect( button ).toHaveAttribute( 'aria-disabled', 'true' );
+	} );
+
+	describe( 'shortcut', () => {
+		it( 'sets aria-keyshortcuts attribute on the button', () => {
+			const { rerender } = render(
+				<IconButton
+					label="Save"
+					icon={ <svg /> }
+					shortcut={ {
+						displayShortcut: '⌘S',
+						ariaKeyShortcut: 'Meta+S',
+					} }
+				/>
+			);
+
+			const button = screen.getByRole( 'button', { name: 'Save' } );
+			expect( button ).toHaveAttribute( 'aria-keyshortcuts', 'Meta+S' );
+
+			// The aria-keyshortcuts attribute is removed when there is no
+			// `shortcut` prop.
+			rerender( <IconButton label="Save" icon={ <svg /> } /> );
+			expect( button ).not.toHaveAttribute( 'aria-keyshortcuts' );
+		} );
+
+		it( 'displays the shortcut in the tooltip but hides it from assistive technology', async () => {
+			const user = userEvent.setup();
+
+			render(
+				<IconButton
+					label="Save"
+					icon={ <svg /> }
+					shortcut={ {
+						displayShortcut: '⌘S',
+						ariaKeyShortcut: 'Meta+S',
+					} }
+				/>
+			);
+
+			const button = screen.getByRole( 'button', { name: 'Save' } );
+			await user.hover( button );
+
+			await waitFor( () => {
+				const shortcutElement = screen.getByText( '⌘S' );
+				expect( shortcutElement ).toBeVisible();
+			} );
+
+			expect( screen.getByText( '⌘S' ) ).toHaveAttribute(
+				'aria-hidden',
+				'true'
+			);
+		} );
+	} );
+} );