@wordpress/components 39.0.0 → 40.1.0

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

@@ -1,8 +1,12 @@
+import { describe, expect, it, vi } from 'vitest';
 import { fireEvent, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { useState } from '@wordpress/element';
 import BoxControl from '..';
 import type { BoxControlProps, BoxControlValue } from '../types';
+import styles from '../style.module.scss';
+
+globalThis.wpVitest.mockMatchMedia();
 
 // Since `BoxControlProps` is a the result of type unions, we need to use
 // a distributive version of the standard `Omit` utility.
@@ -164,9 +168,40 @@ describe( 'BoxControl', () => {
 			expect( input ).toHaveValue( '' );
 		} );
 
+		it( 'should expose the reset button as aria-disabled when there are no changes', async () => {
+			render( <UncontrolledBoxControl /> );
+
+			const resetButton = screen.getByRole( 'button', { name: 'Reset' } );
+
+			expect( resetButton ).toHaveAttribute( 'aria-disabled', 'true' );
+			resetButton.focus();
+			expect( resetButton ).toHaveFocus();
+		} );
+
+		it( 'should keep focus on the reset button after it disables itself', async () => {
+			const user = userEvent.setup();
+
+			render( <UncontrolledBoxControl /> );
+
+			await user.type(
+				screen.getByRole( 'textbox', { name: 'All sides' } ),
+				'100'
+			);
+			await user.keyboard( '{Enter}' );
+
+			const resetButton = screen.getByRole( 'button', { name: 'Reset' } );
+
+			expect( resetButton ).not.toHaveAttribute( 'aria-disabled' );
+
+			await user.click( resetButton );
+
+			expect( resetButton ).toHaveAttribute( 'aria-disabled', 'true' );
+			expect( resetButton ).toHaveFocus();
+		} );
+
 		it( 'should persist cleared value when focus changes', async () => {
 			const user = userEvent.setup();
-			const spyChange = jest.fn();
+			const spyChange = vi.fn();
 
 			render(
 				<UncontrolledBoxControl onChange={ ( v ) => spyChange( v ) } />
@@ -225,6 +260,33 @@ describe( 'BoxControl', () => {
 			).not.toHaveValue();
 		} );
 
+		it.each( [
+			[ 'Top side', 'Bottom side' ],
+			[ 'Bottom side', 'Top side' ],
+			[ 'Left side', 'Right side' ],
+			[ 'Right side', 'Left side' ],
+		] )(
+			'should update %s together with %s when ALT is held',
+			async ( side, pairedSide ) => {
+				const user = userEvent.setup();
+
+				render( <ControlledBoxControl /> );
+
+				await user.click(
+					screen.getByRole( 'button', { name: 'Unlink sides' } )
+				);
+
+				const input = screen.getByRole( 'textbox', { name: side } );
+				await user.type( input, '10' );
+				await user.keyboard( '{Alt>}{ArrowUp}{/Alt}' );
+
+				expect( input ).toHaveValue( '11' );
+				expect(
+					screen.getByRole( 'textbox', { name: pairedSide } )
+				).toHaveValue( '11' );
+			}
+		);
+
 		it( 'should update a single side value when using slider unlinked', async () => {
 			const user = userEvent.setup();
 
@@ -414,7 +476,7 @@ describe( 'BoxControl', () => {
 	describe( 'onChange updates', () => {
 		it( 'should call onChange when values contain more than just CSS units', async () => {
 			const user = userEvent.setup();
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			render( <UncontrolledBoxControl onChange={ onChangeSpy } /> );
 
@@ -443,7 +505,7 @@ describe( 'BoxControl', () => {
 
 		it( 'should not pass invalid CSS unit only values to onChange', async () => {
 			const user = userEvent.setup();
-			const setState = jest.fn();
+			const setState = vi.fn();
 
 			render( <UncontrolledBoxControl onChange={ setState } /> );
 
@@ -476,4 +538,106 @@ describe( 'BoxControl', () => {
 			).toHaveAttribute( 'placeholder', 'Inherited' );
 		} );
 	} );
+
+	describe( 'Styles', () => {
+		const presets = [
+			{ name: 'Small', slug: 'small', value: '4px' },
+			{ name: 'Medium', slug: 'medium', value: '8px' },
+		];
+
+		it( 'should apply module classes and retained public class names in custom mode', () => {
+			const { container } = render( <UncontrolledBoxControl /> );
+
+			const grid = screen.getByRole( 'group', { name: 'Box Control' } );
+			const allSidesInput = screen.getByRole( 'textbox', {
+				name: 'All sides',
+			} );
+			const innerInputWrapper =
+				// eslint-disable-next-line testing-library/no-node-access
+				allSidesInput.closest( `.${ styles[ 'input-wrapper' ] }` );
+			const linkedRow =
+				// eslint-disable-next-line testing-library/no-node-access
+				Array.from( grid.children ).find( ( child ) =>
+					child.classList.contains( styles[ 'input-wrapper' ] )
+				);
+			const unlinkButton = screen.getByRole( 'button', {
+				name: 'Unlink sides',
+			} );
+			const linkedButtonWrapper =
+				// eslint-disable-next-line testing-library/no-node-access
+				unlinkButton.closest(
+					`.${ styles[ 'linked-button-wrapper' ] }`
+				);
+
+			expect( innerInputWrapper ).toHaveClass(
+				styles[ 'input-wrapper' ]
+			);
+			expect( linkedRow ).toHaveClass( styles[ 'input-wrapper' ] );
+			expect( linkedRow ).not.toBe( innerInputWrapper );
+			expect( linkedButtonWrapper ).toHaveClass(
+				styles[ 'linked-button-wrapper' ]
+			);
+			expect(
+				// eslint-disable-next-line testing-library/no-node-access
+				innerInputWrapper?.querySelector( `.${ styles.icon }` )
+			).toHaveClass( styles.icon );
+			expect(
+				// Class names live on wrappers around the labeled controls.
+				// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+				container.querySelector(
+					'.component-box-control__unit-control'
+				)
+			).toHaveClass( styles[ 'unit-control' ] );
+			expect(
+				screen.getByRole( 'button', { name: 'Reset' } )
+			).toHaveClass(
+				styles[ 'reset-button' ],
+				'component-box-control__reset-button'
+			);
+			expect(
+				// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+				container.querySelector( '.components-range-control' )
+			).toHaveClass( styles[ 'range-control' ] );
+		} );
+
+		it( 'should apply the module input-wrapper class to each side after unlinking', async () => {
+			const user = userEvent.setup();
+
+			render( <UncontrolledBoxControl /> );
+
+			await user.click(
+				screen.getByRole( 'button', { name: 'Unlink sides' } )
+			);
+
+			for ( const name of [
+				'Top side',
+				'Right side',
+				'Bottom side',
+				'Left side',
+			] ) {
+				const sideInput = screen.getByRole( 'textbox', { name } );
+				expect(
+					// eslint-disable-next-line testing-library/no-node-access
+					sideInput.closest( `.${ styles[ 'input-wrapper' ] }` )
+				).toHaveClass( styles[ 'input-wrapper' ] );
+			}
+		} );
+
+		it( 'should compose the module range class with the public preset class', () => {
+			const { container } = render(
+				<UncontrolledBoxControl
+					presets={ presets }
+					presetKey="padding"
+				/>
+			);
+
+			expect(
+				// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+				container.querySelector( '.components-range-control' )
+			).toHaveClass(
+				styles[ 'range-control' ],
+				'spacing-sizes-control__range-control'
+			);
+		} );
+	} );
 } );

package/src/button/index.tsx

@@ -5,9 +5,15 @@ import type {
 	HTMLAttributes,
 	MouseEvent,
 	ReactElement,
+	ReactNode,
 } from 'react';
 import deprecated from '@wordpress/deprecated';
-import { forwardRef } from '@wordpress/element';
+import {
+	Children,
+	Fragment,
+	forwardRef,
+	isValidElement,
+} from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
 import Tooltip from '../tooltip';
 import Icon from '../icon';
@@ -17,6 +23,30 @@ import { positionToPlacement } from '../popover/utils';
 
 const disabledEventsOnDisabledButton = [ 'onMouseDown', 'onClick' ] as const;
 
+/**
+ * Whether `children` will render any content, to differentiate an icon-only
+ * button or an icon-with-text button.
+ *
+ * `Children.toArray` discards the children that render nothing (`null`,
+ * `undefined`, and booleans), which is what conditionally rendered content
+ * evaluates to when its condition is unmet.
+ *
+ * @param children The children passed to the button.
+ */
+const hasRenderableChildren = ( children: ReactNode ): boolean =>
+	Children.toArray( children ).some( ( child ) => {
+		if ( ! isValidElement( child ) ) {
+			return child !== '';
+		}
+
+		if ( child.type === Fragment ) {
+			return hasRenderableChildren( child.props.children );
+		}
+
+		// A tooltip should not be considered as a child.
+		return child.props.className !== 'components-tooltip';
+	} );
+
 function useDeprecatedProps( {
 	__experimentalIsFocusable,
 	isDefault,
@@ -135,14 +165,6 @@ export const Button = forwardRef( function UnforwardedButton(
 		'components-button__description'
 	);
 
-	const hasChildren =
-		( 'string' === typeof children && !! children ) ||
-		( Array.isArray( children ) &&
-			children?.[ 0 ] &&
-			children[ 0 ] !== null &&
-			// Tooltip should not considered as a child
-			children?.[ 0 ]?.props?.className !== 'components-tooltip' );
-
 	const truthyAriaPressedValues: ( typeof ariaPressed )[] = [
 		true,
 		'true',
@@ -163,7 +185,7 @@ export const Button = forwardRef( function UnforwardedButton(
 		'is-busy': isBusy,
 		'is-link': variant === 'link',
 		'is-destructive': isDestructive,
-		'has-text': !! icon && ( hasChildren || text ),
+		'has-text': !! icon && ( text || hasRenderableChildren( children ) ),
 		'has-icon': !! icon,
 		'has-icon-right': iconPosition === 'right',
 	} );

package/src/button/style.scss

@@ -368,12 +368,6 @@
 		fill: currentColor;
 		outline: none;
 		flex-shrink: 0;
-
-		// Optimize for high contrast modes.
-		// See also https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/.
-		@media (forced-colors: active) {
-			fill: CanvasText;
-		}
 	}
 }
 

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

@@ -1,3 +1,4 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { press } from '@ariakit/test';
 import { createRef, forwardRef } from '@wordpress/element';
@@ -6,7 +7,10 @@ import _Button from '..';
 import Tooltip from '../../tooltip';
 import cleanupTooltip from '../../tooltip/test/utils';
 
-jest.mock( '../../icon', () => () => <div data-testid="test-icon" /> );
+vi.mock( import( '../../icon' ), async ( importOriginal ) => ( {
+	...( await importOriginal() ),
+	default: () => <div data-testid="test-icon" />,
+} ) );
 
 const Button = forwardRef(
 	(
@@ -95,6 +99,57 @@ describe( 'Button', () => {
 			);
 		} );
 
+		it( 'should render a button element with has-text when the text is not the first child', () => {
+			const isBusy = false;
+
+			render(
+				<Button icon={ plusCircle } isBusy={ isBusy }>
+					{ isBusy && 'Saving…' }
+					{ ! isBusy && 'Save' }
+				</Button>
+			);
+
+			expect( screen.getByRole( 'button' ) ).toHaveClass( 'has-text' );
+		} );
+
+		it( 'should render a button element with has-text when children are wrapped in an element', () => {
+			render(
+				<Button icon={ plusCircle }>
+					<span>Children</span>
+				</Button>
+			);
+
+			expect( screen.getByRole( 'button' ) ).toHaveClass( 'has-text' );
+		} );
+
+		it( 'should render a button element with has-text when children are wrapped in a fragment', () => {
+			render(
+				<Button icon={ plusCircle }>
+					<>Children</>
+				</Button>
+			);
+
+			expect( screen.getByRole( 'button' ) ).toHaveClass( 'has-text' );
+		} );
+
+		it( 'should render a button element without has-text when every child is falsy', () => {
+			const isBusy: boolean = false;
+
+			render(
+				<Button icon={ plusCircle }>
+					{ isBusy && 'Generating…' }
+					{ null }
+					{ /* See: https://github.com/jsx-eslint/eslint-plugin-react/issues/3995 */ }
+					{ /* eslint-disable-next-line react/jsx-curly-brace-presence */ }
+					{ '' }
+				</Button>
+			);
+
+			expect( screen.getByRole( 'button' ) ).not.toHaveClass(
+				'has-text'
+			);
+		} );
+
 		it( 'should render a button element without has-text when a button wrapped in Tooltip', () => {
 			render(
 				<Tooltip text="Help text">
@@ -613,7 +668,7 @@ describe( 'Button', () => {
 		} );
 	} );
 
-	describe( 'static typing', () => {
+	it( 'supports the expected static types', () => {
 		<>
 			<Button href="foo" />
 			{ /* @ts-expect-error - `target` requires `href` */ }

package/src/card/card-body/hook.ts

@@ -22,7 +22,7 @@ export function useCardBody(
 	const classes = useMemo(
 		() =>
 			cx(
-				styles.Body,
+				styles.getCardBodyStyles( { isScrollable } ),
 				styles.borderRadius,
 				getPaddingBySize( size ),
 				isShady && styles.shady,
@@ -30,7 +30,7 @@ export function useCardBody(
 				'components-card__body',
 				className
 			),
-		[ className, cx, isShady, size ]
+		[ className, cx, isScrollable, isShady, size ]
 	);
 
 	return {

package/src/card/styles.ts

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import { COLORS, CONFIG } from '../utils';
 import { getPaddingBySize } from './get-padding-by-size';
-import type { FooterProps, HeaderProps, Props } from './types';
+import type { BodyProps, FooterProps, HeaderProps, Props } from './types';
 
 // Since the border for `Card` is rendered via the `box-shadow` property
 // (as opposed to the `border` property), the value of the border radius needs
@@ -42,6 +42,16 @@ export const Body = css`
 	max-height: 100%;
 `;
 
+const ScrollableBody = css`
+	height: 100%;
+`;
+
+export function getCardBodyStyles( {
+	isScrollable,
+}: Pick< BodyProps, 'isScrollable' > ) {
+	return isScrollable ? css( Body, ScrollableBody ) : Body;
+}
+
 export const Media = css`
 	box-sizing: border-box;
 	overflow: hidden;

package/src/card/test/__snapshots__/{index.tsx.snap → index.jsdom.test.tsx.snap}

@@ -8,8 +8,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="css-1klm29z-Body css-3bn5lk-borderRadius css-15c2zrr-medium components-card__body components-card-body"
-+     class="css-drdujb-Scrollable css-1kynhwg-scrollableScrollbar css-flie1-scrollY components-scrollable css-1klm29z-Body css-3bn5lk-borderRadius css-15c2zrr-medium components-card__body components-card-body"
+-     class="css-1klm29z-Body css-15bowhl-borderRadius css-15c2zrr-medium components-card__body components-card-body"
++     class="style-scrollable style-scroll-y components-scrollable css-1focwqf-Body-ScrollableBody-getCardBodyStyles css-15bowhl-borderRadius css-15c2zrr-medium components-card__body components-card-body"
       data-wp-c16t="true"
       data-wp-component="CardBody"
     >
@@ -25,8 +25,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="css-1klm29z-Body css-3bn5lk-borderRadius css-15c2zrr-medium components-card__body components-card-body"
-+     class="css-1klm29z-Body css-3bn5lk-borderRadius css-15c2zrr-medium css-jr3vj2-shady components-card__body components-card-body"
+-     class="css-1klm29z-Body css-15bowhl-borderRadius css-15c2zrr-medium components-card__body components-card-body"
++     class="css-1klm29z-Body css-15bowhl-borderRadius css-15c2zrr-medium css-j3ztmn-shady components-card__body components-card-body"
       data-wp-c16t="true"
       data-wp-component="CardBody"
     >
@@ -42,8 +42,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="style-flex style-items-row style-expanded-row components-flex css-2thgtp-Footer-borderRadius-borderColor-medium-footerStyles components-card__footer components-card-footer"
-+     class="style-flex style-items-row style-expanded-row components-flex css-154en52-Footer-borderRadius-borderColor-medium-shady-footerStyles components-card__footer components-card-footer"
+-     class="style-flex style-items-row style-expanded-row components-flex css-5u84fb-Footer-borderRadius-borderColor-medium-footerStyles components-card__footer components-card-footer"
++     class="style-flex style-items-row style-expanded-row components-flex css-wdbpae-Footer-borderRadius-borderColor-medium-shady-footerStyles components-card__footer components-card-footer"
       data-wp-c16t="true"
       data-wp-component="CardFooter"
       style="--wp-components-flex-align: center; --wp-components-flex-direction: row; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: calc(4px * 2); --wp-components-flex-justify: space-between;"
@@ -58,7 +58,7 @@ Snapshot Diff:
 
   <div>
     <div
-      class="style-flex style-items-row style-expanded-row components-flex css-2thgtp-Footer-borderRadius-borderColor-medium-footerStyles components-card__footer components-card-footer"
+      class="style-flex style-items-row style-expanded-row components-flex css-5u84fb-Footer-borderRadius-borderColor-medium-footerStyles components-card__footer components-card-footer"
       data-wp-c16t="true"
       data-wp-component="CardFooter"
 -     style="--wp-components-flex-align: center; --wp-components-flex-direction: row; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: calc(4px * 2); --wp-components-flex-justify: space-between;"
@@ -77,8 +77,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="style-flex style-items-row style-expanded-row components-flex css-ktwnuw-Header-borderRadius-borderColor-medium-headerStyles components-card__header components-card-header"
-+     class="style-flex style-items-row style-expanded-row components-flex css-wnar0y-Header-borderRadius-borderColor-medium-shady-headerStyles components-card__header components-card-header"
+-     class="style-flex style-items-row style-expanded-row components-flex css-yp7rat-Header-borderRadius-borderColor-medium-headerStyles components-card__header components-card-header"
++     class="style-flex style-items-row style-expanded-row components-flex css-6osy6f-Header-borderRadius-borderColor-medium-shady-headerStyles components-card__header components-card-header"
       data-wp-c16t="true"
       data-wp-component="CardHeader"
       style="--wp-components-flex-align: center; --wp-components-flex-direction: row; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: calc(4px * 2); --wp-components-flex-justify: space-between;"
@@ -97,8 +97,8 @@ Snapshot Diff:
         class="css-1ruapvy-Content"
       >
         <div
--         class="style-flex style-items-row style-expanded-row components-flex css-ktwnuw-Header-borderRadius-borderColor-medium-headerStyles components-card__header components-card-header"
-+         class="style-flex style-items-row style-expanded-row components-flex css-11nwurb-Header-borderRadius-borderColor-large-headerStyles components-card__header components-card-header"
+-         class="style-flex style-items-row style-expanded-row components-flex css-yp7rat-Header-borderRadius-borderColor-medium-headerStyles components-card__header components-card-header"
++         class="style-flex style-items-row style-expanded-row components-flex css-w6it5-Header-borderRadius-borderColor-large-headerStyles components-card__header components-card-header"
           data-wp-c16t="true"
           data-wp-component="CardHeader"
           style="--wp-components-flex-align: center; --wp-components-flex-direction: row; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: calc(4px * 2); --wp-components-flex-justify: space-between;"
@@ -106,8 +106,8 @@ Snapshot Diff:
           Header
         </div>
         <div
--         class="css-1klm29z-Body css-3bn5lk-borderRadius css-15c2zrr-medium components-card__body components-card-body"
-+         class="css-1klm29z-Body css-3bn5lk-borderRadius css-13uacf-large components-card__body components-card-body"
+-         class="css-1klm29z-Body css-15bowhl-borderRadius css-15c2zrr-medium components-card__body components-card-body"
++         class="css-1klm29z-Body css-15bowhl-borderRadius css-13uacf-large components-card__body components-card-body"
           data-wp-c16t="true"
           data-wp-component="CardBody"
         >
@@ -140,8 +140,8 @@ Snapshot Diff:
         class="css-1ruapvy-Content"
       >
         <div
--         class="style-flex style-items-row style-expanded-row components-flex css-vicxgd-Header-borderRadius-borderColor-large-borderless-headerStyles components-card__header components-card-header"
-+         class="style-flex style-items-row style-expanded-row components-flex css-15e9715-Header-borderRadius-borderColor-small-headerStyles components-card__header components-card-header"
+-         class="style-flex style-items-row style-expanded-row components-flex css-1vwbg0l-Header-borderRadius-borderColor-large-borderless-headerStyles components-card__header components-card-header"
++         class="style-flex style-items-row style-expanded-row components-flex css-cvlx89-Header-borderRadius-borderColor-small-headerStyles components-card__header components-card-header"
           data-wp-c16t="true"
           data-wp-component="CardHeader"
           style="--wp-components-flex-align: center; --wp-components-flex-direction: row; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: calc(4px * 2); --wp-components-flex-justify: space-between;"
@@ -149,16 +149,16 @@ Snapshot Diff:
           Header
         </div>
         <div
--         class="css-1klm29z-Body css-3bn5lk-borderRadius css-13uacf-large components-card__body components-card-body"
-+         class="css-1klm29z-Body css-3bn5lk-borderRadius css-15c2zrr-medium components-card__body components-card-body"
+-         class="css-1klm29z-Body css-15bowhl-borderRadius css-13uacf-large components-card__body components-card-body"
++         class="css-1klm29z-Body css-15bowhl-borderRadius css-15c2zrr-medium components-card__body components-card-body"
           data-wp-c16t="true"
           data-wp-component="CardBody"
         >
           Body
         </div>
         <div
--         class="style-flex style-items-row style-expanded-row components-flex css-1yqqqb5-Footer-borderRadius-borderColor-large-borderless-footerStyles components-card__footer components-card-footer"
-+         class="style-flex style-items-row style-expanded-row components-flex css-d48r1q-Footer-borderRadius-borderColor-xSmallCardPadding-footerStyles components-card__footer components-card-footer"
+-         class="style-flex style-items-row style-expanded-row components-flex css-1pvsads-Footer-borderRadius-borderColor-large-borderless-footerStyles components-card__footer components-card-footer"
++         class="style-flex style-items-row style-expanded-row components-flex css-155de53-Footer-borderRadius-borderColor-xSmallCardPadding-footerStyles components-card__footer components-card-footer"
           data-wp-c16t="true"
           data-wp-component="CardFooter"
           style="--wp-components-flex-align: center; --wp-components-flex-direction: row; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: calc(4px * 2); --wp-components-flex-justify: space-between;"
@@ -174,8 +174,8 @@ Snapshot Diff:
 @@ -1,31 +1,31 @@
   <div>
     <div
--     class="style-surface components-surface css-r8qwc0-Card-boxShadowless-rounded-cardStyles components-card"
-+     class="style-surface components-surface css-1ghyua5-Card-rounded-cardStyles components-card"
+-     class="style-surface components-surface css-2ndqpy-Card-boxShadowless-rounded-cardStyles components-card"
++     class="style-surface components-surface css-l49oe9-Card-rounded-cardStyles components-card"
       data-wp-c16t="true"
       data-wp-component="Card"
     >
@@ -183,8 +183,8 @@ Snapshot Diff:
         class="css-1ruapvy-Content"
       >
         <div
--         class="style-flex style-items-row style-expanded-row components-flex css-vicxgd-Header-borderRadius-borderColor-large-borderless-headerStyles components-card__header components-card-header"
-+         class="style-flex style-items-row style-expanded-row components-flex css-15e9715-Header-borderRadius-borderColor-small-headerStyles components-card__header components-card-header"
+-         class="style-flex style-items-row style-expanded-row components-flex css-1vwbg0l-Header-borderRadius-borderColor-large-borderless-headerStyles components-card__header components-card-header"
++         class="style-flex style-items-row style-expanded-row components-flex css-cvlx89-Header-borderRadius-borderColor-small-headerStyles components-card__header components-card-header"
           data-wp-c16t="true"
           data-wp-component="CardHeader"
           style="--wp-components-flex-align: center; --wp-components-flex-direction: row; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: calc(4px * 2); --wp-components-flex-justify: space-between;"
@@ -192,16 +192,16 @@ Snapshot Diff:
           Header
         </div>
         <div
--         class="css-1klm29z-Body css-3bn5lk-borderRadius css-13uacf-large components-card__body components-card-body"
-+         class="css-1klm29z-Body css-3bn5lk-borderRadius css-1a3bp49-small components-card__body components-card-body"
+-         class="css-1klm29z-Body css-15bowhl-borderRadius css-13uacf-large components-card__body components-card-body"
++         class="css-1klm29z-Body css-15bowhl-borderRadius css-1a3bp49-small components-card__body components-card-body"
           data-wp-c16t="true"
           data-wp-component="CardBody"
         >
           Body
         </div>
         <div
--         class="style-flex style-items-row style-expanded-row components-flex css-1yqqqb5-Footer-borderRadius-borderColor-large-borderless-footerStyles components-card__footer components-card-footer"
-+         class="style-flex style-items-row style-expanded-row components-flex css-1txkneh-Footer-borderRadius-borderColor-small-footerStyles components-card__footer components-card-footer"
+-         class="style-flex style-items-row style-expanded-row components-flex css-1pvsads-Footer-borderRadius-borderColor-large-borderless-footerStyles components-card__footer components-card-footer"
++         class="style-flex style-items-row style-expanded-row components-flex css-15rgdo1-Footer-borderRadius-borderColor-small-footerStyles components-card__footer components-card-footer"
           data-wp-c16t="true"
           data-wp-component="CardFooter"
           style="--wp-components-flex-align: center; --wp-components-flex-direction: row; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: calc(4px * 2); --wp-components-flex-justify: space-between;"

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

@@ -29,7 +29,7 @@ const meta: Meta< typeof CheckboxControl > = {
 		componentStatus: {
 			status: 'recommended',
 			whereUsed: 'global',
-			notes: 'Will be superseded by [`CheckboxControl`](?path=/docs/design-system-components-form-primitives-checkbox--docs) in `@wordpress/ui`, but continue using for now.',
+			notes: 'Will be superseded by [`CheckboxControl`](?path=/docs/design-system-components-form-checkboxcontrol--docs) in `@wordpress/ui`, but continue using for now.',
 		},
 	},
 };

package/src/checkbox-control/style.scss

@@ -77,7 +77,7 @@ svg.components-checkbox-control__checked,
 svg.components-checkbox-control__indeterminate {
 	--checkmark-size: var(--checkbox-input-size);
 
-	fill: $white;
+	color: $white;
 	cursor: var(--wpds-cursor-control);
 	position: absolute;
 	left: 50%;
@@ -96,7 +96,7 @@ svg.components-checkbox-control__indeterminate {
 .components-checkbox-control:has(:disabled) {
 	svg.components-checkbox-control__checked,
 	svg.components-checkbox-control__indeterminate {
-		fill: $components-color-gray-400;
+		color: $components-color-gray-400;
 	}
 }
 

package/src/checkbox-control/test/__snapshots__/{index.tsx.snap → index.jsdom.test.tsx.snap}

@@ -1,11 +1,11 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`CheckboxControl Basic rendering should render the indeterminate icon when in the indeterminate state 1`] = `
+exports[`CheckboxControl > Basic rendering > should render the indeterminate icon when in the indeterminate state 1`] = `
 Snapshot Diff:
 - First value
 + Second value
 
-@@ -14,14 +14,29 @@
+@@ -14,14 +14,32 @@
           <span
             class="components-checkbox-control__input-container"
           >
@@ -15,21 +15,24 @@ Snapshot Diff:
 +             id="inspector-checkbox-control-7"
               type="checkbox"
               value="1"
-            />
++           />
 +           <svg
 +             aria-hidden="true"
 +             class="components-checkbox-control__indeterminate"
-+             fill="currentColor"
 +             focusable="false"
 +             height="24"
 +             role="presentation"
++             stroke="currentColor"
++             stroke-width="1.5"
++             style="fill: none;"
 +             viewBox="0 0 24 24"
 +             width="24"
 +             xmlns="http://www.w3.org/2000/svg"
 +           >
 +             <path
-+               d="M7 11.5h10V13H7z"
-+             />
++               d="M7 12H17"
++               vector-effect="non-scaling-stroke"
+              />
 +           </svg>
           </span>
         </div>

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

@@ -1,9 +1,12 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { useState } from '@wordpress/element';
 import BaseCheckboxControl from '..';
 import type { CheckboxControlProps } from '../types';
 
+globalThis.wpVitest.mockMatchMedia();
+
 const noop = () => {};
 
 const getInput = () => screen.getByRole( 'checkbox' ) as HTMLInputElement;
@@ -87,7 +90,7 @@ describe( 'CheckboxControl', () => {
 			const user = userEvent.setup();
 
 			let state = false;
-			const setState = jest.fn(
+			const setState = vi.fn(
 				( nextState: boolean ) => ( state = nextState )
 			);