@wordpress/components 39.0.0 → 40.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "39.0.0",
+	"version": "40.1.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -50,7 +50,7 @@
 		"src/**/*.scss"
 	],
 	"dependencies": {
-		"@ariakit/react": "^0.4.35",
+		"@ariakit/react": "^0.4.37",
 		"@date-fns/utc": "^2.1.1",
 		"@emotion/cache": "^11.14.0",
 		"@emotion/css": "^11.13.5",
@@ -62,27 +62,27 @@
 		"@types/gradient-parser": "^1.1.0",
 		"@types/highlight-words-core": "^1.2.1",
 		"@use-gesture/react": "^10.3.1",
-		"@wordpress/a11y": "^4.53.0",
-		"@wordpress/base-styles": "^12.1.0",
-		"@wordpress/compose": "^8.6.0",
-		"@wordpress/date": "^5.53.0",
-		"@wordpress/deprecated": "^4.53.0",
-		"@wordpress/dom": "^4.53.0",
-		"@wordpress/element": "^8.5.0",
-		"@wordpress/escape-html": "^3.53.0",
-		"@wordpress/hooks": "^4.53.0",
-		"@wordpress/html-entities": "^4.53.0",
-		"@wordpress/i18n": "^6.26.0",
-		"@wordpress/icons": "^15.4.0",
-		"@wordpress/is-shallow-equal": "^5.53.0",
-		"@wordpress/kebab-case": "^1.0.0",
-		"@wordpress/keycodes": "^4.53.0",
-		"@wordpress/primitives": "^4.53.0",
-		"@wordpress/private-apis": "^1.53.0",
-		"@wordpress/rich-text": "^7.53.0",
-		"@wordpress/style-runtime": "^0.9.0",
-		"@wordpress/ui": "^0.20.0",
-		"@wordpress/warning": "^3.53.0",
+		"@wordpress/a11y": "^4.55.0",
+		"@wordpress/base-styles": "^13.1.0",
+		"@wordpress/compose": "^8.8.0",
+		"@wordpress/date": "^5.55.0",
+		"@wordpress/deprecated": "^4.55.0",
+		"@wordpress/dom": "^4.55.0",
+		"@wordpress/element": "^8.7.0",
+		"@wordpress/escape-html": "^3.55.0",
+		"@wordpress/hooks": "^4.55.0",
+		"@wordpress/html-entities": "^4.55.0",
+		"@wordpress/i18n": "^6.28.0",
+		"@wordpress/icons": "^16.0.0",
+		"@wordpress/is-shallow-equal": "^5.55.0",
+		"@wordpress/kebab-case": "^1.2.0",
+		"@wordpress/keycodes": "^4.55.0",
+		"@wordpress/primitives": "^4.55.0",
+		"@wordpress/private-apis": "^1.55.0",
+		"@wordpress/rich-text": "^7.55.0",
+		"@wordpress/style-runtime": "^0.11.0",
+		"@wordpress/ui": "^0.22.0",
+		"@wordpress/warning": "^3.55.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.3",
@@ -93,7 +93,7 @@
 		"framer-motion": "^11.15.0",
 		"gradient-parser": "^1.1.1",
 		"highlight-words-core": "^1.2.2",
-		"is-plain-object": "^5.0.0",
+		"is-plain-object": "^5.1.0",
 		"memize": "^2.1.1",
 		"path-to-regexp": "^6.2.1",
 		"re-resizable": "^6.4.0",
@@ -102,20 +102,21 @@
 		"uuid": "^14.0.0"
 	},
 	"devDependencies": {
-		"@ariakit/test": "^0.7.2",
-		"@storybook/addon-docs": "^10.4.3",
-		"@storybook/react-vite": "^10.4.3",
+		"@ariakit/test": "^0.7.4",
+		"@storybook/addon-docs": "^10.5.3",
+		"@storybook/react-vite": "^10.5.3",
 		"@testing-library/dom": "^10.4.1",
-		"@testing-library/jest-dom": "^6.9.1",
-		"@testing-library/react": "^16.3.2",
+		"@testing-library/jest-dom": "^7.0.1",
+		"@testing-library/react": "^16.3.3",
 		"@testing-library/user-event": "^14.6.1",
 		"@types/jest": "^30.0.0",
 		"@types/react-dom": "^18.3.1",
-		"@wordpress/jest-console": "^9.1.0",
+		"@wordpress/jest-console": "^9.3.0",
 		"@wordpress/stylelint-tools": "file:../../tools/stylelint",
 		"snapshot-diff": "^0.10.0",
-		"storybook": "^10.4.3",
-		"timezone-mock": "^1.3.6"
+		"storybook": "^10.5.3",
+		"timezone-mock": "^1.3.6",
+		"vitest": "^5.0.0"
 	},
 	"peerDependencies": {
 		"@types/react": "^18 || ^19",
@@ -130,5 +131,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "989764d42ff93e33684aaf0b96a5b7f3d9bbff52"
+	"gitHead": "485f42ae8a1c58ceea18371a507fd4acfa86fbd8"
 }

package/src/alignment-matrix-control/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen, waitFor, within } from '@testing-library/react';
 import { press, click } from '@ariakit/test';
 import AlignmentMatrixControl from '..';
@@ -51,7 +52,7 @@ describe( 'AlignmentMatrixControl', () => {
 					'bottom center',
 					'bottom right',
 				] )( '%s', async ( alignment ) => {
-					const spy = jest.fn();
+					const spy = vi.fn();
 
 					await renderAndInitCompositeStore(
 						<AlignmentMatrixControl
@@ -69,7 +70,7 @@ describe( 'AlignmentMatrixControl', () => {
 				} );
 
 				it( 'unless already focused', async () => {
-					const spy = jest.fn();
+					const spy = vi.fn();
 
 					await renderAndInitCompositeStore(
 						<AlignmentMatrixControl
@@ -96,7 +97,7 @@ describe( 'AlignmentMatrixControl', () => {
 					[ 'ArrowDown', 'bottom center' ],
 					[ 'ArrowRight', 'center right' ],
 				] as const )( '%s', async ( keyRef, cellRef ) => {
-					const spy = jest.fn();
+					const spy = vi.fn();
 
 					await renderAndInitCompositeStore(
 						<AlignmentMatrixControl onChange={ spy } />
@@ -117,7 +118,7 @@ describe( 'AlignmentMatrixControl', () => {
 					[ 'ArrowDown', 'bottom right' ],
 					[ 'ArrowRight', 'bottom right' ],
 				] as const )( '%s', async ( keyRef, cellRef ) => {
-					const spy = jest.fn();
+					const spy = vi.fn();
 
 					await renderAndInitCompositeStore(
 						<AlignmentMatrixControl onChange={ spy } />

package/src/angle-picker-control/style.module.scss

@@ -31,7 +31,7 @@
 	border-radius: $radius-round;
 	box-sizing: border-box;
 	display: block;
-	/* stylelint-disable-next-line plugin/use-logical-properties-and-values -- Geometric centering */
+	/* stylelint-disable-next-line logical-css/require-logical-properties -- Geometric centering */
 	left: 50%;
 	top: 4px;
 	transform: translateX(-50%);

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

@@ -77,16 +77,6 @@ AppearBottomRight.args = {
 	),
 };
 
-export const Loading = Template.bind( {} );
-Loading.args = {
-	type: 'loading',
-	children: ( { className } ) => (
-		<Notice className={ className } status="success">
-			<p>Loading animation.</p>
-		</Notice>
-	),
-};
-
 export const SlideIn = Template.bind( {} );
 SlideIn.args = {
 	type: 'slide-in',

package/src/autocomplete/test/get-autocomplete-match.ts

@@ -1,3 +1,4 @@
+import { describe, expect, it, vi } from 'vitest';
 import { getAutocompleteMatch } from '../get-autocomplete-match';
 import type { WPCompleter } from '../types';
 
@@ -174,7 +175,7 @@ describe( 'getAutocompleteMatch', () => {
 	} );
 
 	it( 'should pass correct before/after text to allowContext', () => {
-		const allowContext = jest.fn().mockReturnValue( true );
+		const allowContext = vi.fn().mockReturnValue( true );
 		const completers = [
 			createCompleter( {
 				triggerPrefix: '@',

package/src/autocomplete/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen, renderHook } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { useRef } from '@wordpress/element';
@@ -119,7 +120,7 @@ describe( 'AutocompleterUI', () => {
 		it( 'should call reset function when a click on another element occurs', async () => {
 			const user = userEvent.setup();
 
-			const resetSpy = jest.fn();
+			const resetSpy = vi.fn();
 
 			const autocompleter = {
 				name: 'fruit',

package/src/badge/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import _Badge from '..';
 

package/src/base-control/stories/index.story.tsx

@@ -19,9 +19,9 @@ const meta: Meta< typeof BaseControl > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'recommended',
+			status: 'not-recommended',
 			whereUsed: 'global',
-			notes: 'Will be superseded by [`Field`](?path=/docs/design-system-components-form-primitives-field--docs) in `@wordpress/ui`, but continue using for now.',
+			notes: 'Use [`Field`](?path=/docs/design-system-components-form-primitives-field--docs) from `@wordpress/ui` instead. For a purely visual label outside `Field.Root`, use `Field.VisualLabel`. For a group legend, use [`Fieldset`](?path=/docs/design-system-components-form-primitives-fieldset--docs) and `Fieldset.Legend`.',
 		},
 	},
 };

package/src/base-control/styles/base-control-styles.tsx

@@ -0,0 +1,115 @@
+import clsx from 'clsx';
+import type {
+	ElementType,
+	ForwardedRef,
+	ReactElement,
+	ReactNode,
+	ComponentProps,
+} from 'react';
+import { forwardRef } from '@wordpress/element';
+import type { WordPressComponentProps } from '../../context';
+import { PolymorphicElement } from '../../utils/polymorphic-element';
+import styles from './style.module.scss';
+
+type StyledElementProps< T extends ElementType > = WordPressComponentProps<
+	{ children?: ReactNode },
+	T
+>;
+
+function UnforwardedWrapper< T extends ElementType = 'div' >(
+	{ className, ...props }: StyledElementProps< T >,
+	ref: ForwardedRef< any >
+) {
+	return (
+		<PolymorphicElement
+			ref={ ref }
+			{ ...props }
+			className={ clsx( styles.wrapper, className ) }
+		/>
+	);
+}
+
+function UnforwardedStyledField< T extends ElementType = 'div' >(
+	{ className, ...props }: StyledElementProps< T >,
+	ref: ForwardedRef< any >
+) {
+	return (
+		<PolymorphicElement
+			ref={ ref }
+			{ ...props }
+			className={ clsx( styles.field, className ) }
+		/>
+	);
+}
+
+function UnforwardedStyledLabel< T extends ElementType = 'label' >(
+	{ as, className, ...props }: StyledElementProps< T >,
+	ref: ForwardedRef< any >
+) {
+	return (
+		<PolymorphicElement< T >
+			as={ ( as ?? 'label' ) as T }
+			ref={ ref }
+			{ ...( props as ComponentProps< T > ) }
+			className={ clsx( styles.label, className ) }
+		/>
+	);
+}
+
+function UnforwardedStyledHelp< T extends ElementType = 'p' >(
+	{ as, className, ...props }: StyledElementProps< T >,
+	ref: ForwardedRef< any >
+) {
+	return (
+		<PolymorphicElement< T >
+			as={ ( as ?? 'p' ) as T }
+			ref={ ref }
+			{ ...( props as ComponentProps< T > ) }
+			className={ clsx( styles.help, className ) }
+		/>
+	);
+}
+
+function UnforwardedStyledVisualLabel< T extends ElementType = 'span' >(
+	{ as, className, ...props }: StyledElementProps< T >,
+	ref: ForwardedRef< any >
+) {
+	return (
+		<PolymorphicElement< T >
+			as={ ( as ?? 'span' ) as T }
+			ref={ ref }
+			{ ...( props as ComponentProps< T > ) }
+			className={ clsx( styles.label, className ) }
+		/>
+	);
+}
+
+export const Wrapper = forwardRef( UnforwardedWrapper ) as <
+	T extends ElementType = 'div',
+>(
+	props: StyledElementProps< T > & { ref?: ForwardedRef< any > }
+) => ReactElement | null;
+
+export const StyledField = forwardRef( UnforwardedStyledField ) as <
+	T extends ElementType = 'div',
+>(
+	props: StyledElementProps< T > & { ref?: ForwardedRef< any > }
+) => ReactElement | null;
+
+export const StyledLabel = forwardRef( UnforwardedStyledLabel ) as <
+	T extends ElementType = 'label',
+>(
+	props: StyledElementProps< T > & { ref?: ForwardedRef< any > }
+) => ReactElement | null;
+
+export const StyledHelp = forwardRef( UnforwardedStyledHelp ) as <
+	T extends ElementType = 'p',
+>(
+	props: StyledElementProps< T > & { ref?: ForwardedRef< any > }
+) => ReactElement | null;
+
+export const StyledVisualLabel = forwardRef( UnforwardedStyledVisualLabel ) as <
+	T extends ElementType = 'span',
+>(
+	props: StyledElementProps< T > & { ref?: ForwardedRef< any > }
+) => ReactElement | null;

package/src/base-control/styles/style.module.scss

@@ -0,0 +1,39 @@
+@use "@wordpress/base-styles/variables" as *;
+@use "../../utils/theme-variables" as *;
+
+.wrapper {
+	box-sizing: border-box;
+	font-family: $font-family-body;
+	font-size: 13px;
+
+	*,
+	*::before,
+	*::after {
+		box-sizing: inherit;
+	}
+}
+
+.field {
+	:global(.components-panel__row) & {
+		margin-bottom: inherit;
+	}
+}
+
+.label {
+	display: block;
+	margin-bottom: 8px;
+	padding: 0;
+	font-size: 11px;
+	font-weight: var(--wpds-typography-font-weight-emphasis);
+	line-height: 1.4;
+	text-transform: uppercase;
+}
+
+.help {
+	margin-top: 8px;
+	margin-bottom: 0;
+	font-size: 12px;
+	font-style: normal;
+	color: $components-color-gray-700;
+	text-wrap: pretty;
+}

package/src/base-control/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import BaseControl from '..';
 import { useBaseControlProps } from '../hooks';

package/src/border-box-control/border-box-control/README.md

@@ -103,7 +103,9 @@ Provides control over whether the label will only be visible to screen readers.
 
 ### `label`: `string`
 
-If provided, a label will be generated using this as the content.
+If provided, a label will be generated using this as the content. A visible
+label is rendered in a row alongside the linked/unlinked toggle; when there is
+no visible label the toggle is rendered beside the border inputs instead.
 
 _Whether it is visible only to screen readers is controlled via
 `hideLabelFromVision`._
@@ -130,9 +132,9 @@ The available base placements are 'top', 'right', 'bottom', 'left'. Each of thes
 
 -   Required: No
 
-### `popoverOffset`: `number`
+### `popoverOffset`: `number | { mainAxis?: number; crossAxis?: number }`
 
-The space between the popover and the control wrapper.
+The space between the popover and the control wrapper. A number displaces the popover along its main axis; pass an object to also displace it along its cross axis.
 
 -   Required: No
 

package/src/border-box-control/border-box-control/component.tsx

@@ -1,10 +1,11 @@
 import { __ } from '@wordpress/i18n';
 import { useMemo, useState } from '@wordpress/element';
-import { useMergeRefs } from '@wordpress/compose';
+import { useInstanceId, useMergeRefs } from '@wordpress/compose';
 import BorderBoxControlLinkedButton from '../border-box-control-linked-button';
 import BorderBoxControlSplitControls from '../border-box-control-split-controls';
 import { BorderControl } from '../../border-control';
-import { StyledLabel } from '../../base-control/styles/base-control-styles';
+import BaseControl from '../../base-control';
+import { Grid } from '../../grid';
 import { View } from '../../view';
 import { VisuallyHidden } from '../../visually-hidden';
 import type { WordPressComponentProps } from '../../context';
@@ -16,17 +17,22 @@ import type {
 	BorderControlProps,
 } from '../../border-control/types';
 
-const BorderLabel = ( props: LabelProps ) => {
-	const { label, hideLabelFromVision } = props;
+const BorderLabel = ( props: LabelProps & { id?: string } ) => {
+	const { id, label, hideLabelFromVision } = props;
 
 	if ( ! label ) {
 		return null;
 	}
 
+	// The visible label is rendered as `BaseControl.VisualLabel` so it carries
+	// the stable `.components-base-control__label` className consumers style
+	// against; `StyledLabel` is an emotion component with a generated one.
 	return hideLabelFromVision ? (
-		<VisuallyHidden as="label">{ label }</VisuallyHidden>
+		<VisuallyHidden as="span" id={ id }>
+			{ label }
+		</VisuallyHidden>
 	) : (
-		<StyledLabel>{ label }</StyledLabel>
+		<BaseControl.VisualLabel id={ id }>{ label }</BaseControl.VisualLabel>
 	);
 };
 
@@ -42,6 +48,8 @@ const UnconnectedBorderBoxControl = (
 		enableAlpha,
 		enableStyle,
 		hasMixedBorders,
+		hasVisibleLabel,
+		headerClassName,
 		hideLabelFromVision,
 		isLinked,
 		label,
@@ -55,9 +63,27 @@ const UnconnectedBorderBoxControl = (
 		toggleLinked,
 		wrapperClassName,
 		__experimentalIsRenderedInSidebar,
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledBy,
 		...otherProps
 	} = useBorderBoxControl( props );
 
+	// The label names the group of border controls rather than a single input,
+	// so it is associated via `aria-labelledby` instead of `htmlFor`.
+	const generatedLabelId = useInstanceId(
+		BorderBoxControl,
+		'border-box-control-label'
+	);
+
+	// A consumer-provided accessible name takes precedence, so the generated
+	// relationship is only used as a fallback. Where an external name wins,
+	// the unused ID is left off the internal label. Empty values are treated
+	// as absent, matching the accessible name computation, which skips an
+	// empty `aria-label` or `aria-labelledby` rather than resolving a name
+	// from it.
+	const labelId =
+		label && ! ariaLabel && ! ariaLabelledBy ? generatedLabelId : undefined;
+
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the popover's anchor updates.
 	const [ popoverAnchor, setPopoverAnchor ] = useState< Element | null >(
@@ -80,12 +106,46 @@ const UnconnectedBorderBoxControl = (
 		);
 
 	const mergedRef = useMergeRefs( [ setPopoverAnchor, forwardedRef ] );
+
 	return (
-		<View className={ className } { ...otherProps } ref={ mergedRef }>
-			<BorderLabel
-				label={ label }
-				hideLabelFromVision={ hideLabelFromVision }
-			/>
+		<View
+			className={ className }
+			// Whichever naming source wins, it describes the border controls
+			// as a whole, so the wrapper needs a role for that accessible
+			// name to attach to. Without a name there is no group to expose.
+			role={ label || ariaLabel || ariaLabelledBy ? 'group' : undefined }
+			aria-label={ ariaLabel }
+			aria-labelledby={ ariaLabelledBy ?? labelId }
+			{ ...otherProps }
+			ref={ mergedRef }
+		>
+			{ hasVisibleLabel ? (
+				// The toggle shares the label's row so that it lines up with
+				// the equivalent toggle on sibling controls, e.g. the border
+				// radius one.
+				<Grid
+					className={ headerClassName }
+					columns={ 2 }
+					templateColumns="1fr min-content"
+					alignment="center"
+				>
+					<BorderLabel
+						id={ labelId }
+						label={ label }
+						hideLabelFromVision={ hideLabelFromVision }
+					/>
+					<BorderBoxControlLinkedButton
+						onClick={ toggleLinked }
+						isLinked={ isLinked }
+					/>
+				</Grid>
+			) : (
+				<BorderLabel
+					id={ labelId }
+					label={ label }
+					hideLabelFromVision={ hideLabelFromVision }
+				/>
+			) }
 			<View className={ wrapperClassName }>
 				{ isLinked ? (
 					<BorderControl
@@ -123,10 +183,14 @@ const UnconnectedBorderBoxControl = (
 						}
 					/>
 				) }
-				<BorderBoxControlLinkedButton
-					onClick={ toggleLinked }
-					isLinked={ isLinked }
-				/>
+				{ /* With no label row to join, the toggle sits alongside the
+				     inputs instead. */ }
+				{ ! hasVisibleLabel && (
+					<BorderBoxControlLinkedButton
+						onClick={ toggleLinked }
+						isLinked={ isLinked }
+					/>
+				) }
 			</View>
 		</View>
 	);
@@ -136,6 +200,10 @@ const UnconnectedBorderBoxControl = (
  * An input control for the color, style, and width of the border of a box. The
  * border can be customized as a whole, or individually for each side of the box.
  *
+ * The controls are exposed as a group named by the `label` prop. Passing
+ * `aria-labelledby` or `aria-label` names the group instead, taking precedence
+ * over `label`; with none of the three, the wrapper is not exposed as a group.
+ *
  * ```jsx
  * import { BorderBoxControl } from '@wordpress/components';
  * import { __ } from '@wordpress/i18n';

package/src/border-box-control/border-box-control/hook.ts

@@ -1,5 +1,6 @@
-import { useMemo, useState } from '@wordpress/element';
-import * as styles from '../styles';
+import clsx from 'clsx';
+import { useState } from '@wordpress/element';
+import styles from '../style.module.scss';
 import {
 	getBorderDiff,
 	getCommonBorder,
@@ -11,7 +12,6 @@ import {
 } from '../utils';
 import type { WordPressComponentProps } from '../../context';
 import { useContextSystem } from '../../context';
-import { useCx } from '../../utils/hooks/use-cx';
 import type { Border } from '../../border-control/types';
 import type { Borders, BorderSide, BorderBoxControlProps } from '../types';
 
@@ -24,6 +24,8 @@ export function useBorderBoxControl(
 		onChange,
 		enableAlpha = false,
 		enableStyle = true,
+		hideLabelFromVision,
+		label,
 		value,
 		__experimentalIsRenderedInSidebar = false,
 		// Deprecated props, no longer used.
@@ -32,6 +34,11 @@ export function useBorderBoxControl(
 		...otherProps
 	} = useContextSystem( props, 'BorderBoxControl' );
 
+	// A visible label gives the control a header row to place the linked/
+	// unlinked toggle in, alongside that label. Without one the toggle stays
+	// inside the input wrapper, positioned absolutely.
+	const hasVisibleLabel = !! label && ! hideLabelFromVision;
+
 	const mixedBorders = hasMixedBorders( value );
 	const splitBorders = hasSplitBorders( value );
 
@@ -100,23 +107,23 @@ export function useBorderBoxControl(
 		}
 	};
 
-	const cx = useCx();
-	const classes = useMemo( () => {
-		return cx( styles.borderBoxControl, className );
-	}, [ cx, className ] );
-
-	const linkedControlClassName = useMemo( () => {
-		return cx( styles.linkedBorderControl() );
-	}, [ cx ] );
-
-	const wrapperClassName = useMemo( () => {
-		return cx( styles.wrapper );
-	}, [ cx ] );
+	// The linked control reserves an inline-end gutter for the absolutely
+	// positioned toggle. Once the toggle moves up into the header row that
+	// gutter only shortens the input, so drop it.
+	const linkedControlClassName = clsx( styles[ 'linked-border-control' ], {
+		[ styles[ 'linked-border-control-full-width' ] ]: hasVisibleLabel,
+	} );
+	const wrapperClassName = styles.wrapper;
+	const headerClassName = styles.header;
 
 	return {
 		...otherProps,
-		className: classes,
+		className,
 		colors,
+		hasVisibleLabel,
+		headerClassName,
+		hideLabelFromVision,
+		label,
 		disableUnits: mixedBorders && ! hasWidthValue,
 		enableAlpha,
 		enableStyle,

package/src/border-box-control/border-box-control-linked-button/hook.ts

@@ -1,8 +1,7 @@
-import { useMemo } from '@wordpress/element';
-import * as styles from '../styles';
+import clsx from 'clsx';
+import styles from '../style.module.scss';
 import type { WordPressComponentProps } from '../../context';
 import { useContextSystem } from '../../context';
-import { useCx } from '../../utils/hooks/use-cx';
 import type { LinkedButtonProps } from '../types';
 
 export function useBorderBoxControlLinkedButton(
@@ -13,11 +12,8 @@ export function useBorderBoxControlLinkedButton(
 		'BorderBoxControlLinkedButton'
 	);
 
-	// Generate class names.
-	const cx = useCx();
-	const classes = useMemo( () => {
-		return cx( styles.borderBoxControlLinkedButton, className );
-	}, [ className, cx ] );
-
-	return { ...otherProps, className: classes };
+	return {
+		...otherProps,
+		className: clsx( styles[ 'linked-button' ], className ),
+	};
 }