@wordpress/components 40.0.0 → 40.1.0

package/src/border-box-control/style.module.scss

@@ -1,3 +1,5 @@
+@use "@wordpress/base-styles/variables" as *;
+
 .linked-border-control {
 	/* Preserve the original `&&` specificity so this beats BorderControl's margin reset. */
 	&#{&} {
@@ -6,14 +8,43 @@
 	}
 }
 
+/* No inline-end gutter is needed when the toggle sits in the header row. */
+.linked-border-control-full-width {
+	&#{&} {
+		margin-inline-end: 0;
+	}
+}
+
+/* The label row the linked/unlinked toggle joins when a visible label is
+   rendered. Laid out as a content-driven grid like `BoxControl`'s label row, so
+   a label that wraps grows the row rather than overflowing a fixed height. */
+.header {
+	/* The row is as tall as the toggle (24px, `Button` `size="small"`), so 4px
+	   here leaves the same 28px between label and inputs as the sibling
+	   controls, which instead pair a fixed 16px row with a 12px margin. */
+	margin-bottom: $grid-unit-05;
+
+	/* The label (a `BaseControl.VisualLabel`, so a `span`) supplies its own
+	   bottom margin as the gap to the input below. In the header row that gap
+	   comes from the row itself, and the margin would both pull the vertically
+	   centred label off centre and pad the row out once the label wraps. */
+	> span {
+		margin-bottom: 0;
+	}
+}
+
 .wrapper {
 	position: relative;
+
+	/* Without a header row the toggle is positioned against the input instead. */
+	.linked-button {
+		position: absolute;
+		top: 8px;
+		inset-inline-end: 0;
+	}
 }
 
 .linked-button {
-	position: absolute;
-	top: 8px;
-	inset-inline-end: 0;
 	line-height: 0;
 }
 

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

@@ -1,8 +1,12 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import type { ComponentProps } from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { useId } from '@wordpress/element';
 import { BorderBoxControl } from '..';
 
+globalThis.wpVitest.mockMatchMedia();
+
 const colors = [
 	{ name: 'Gray', color: '#f6f7f7' },
 	{ name: 'Blue', color: '#72aee6' },
@@ -34,7 +38,7 @@ const mixedBorders = {
 const props = {
 	colors,
 	label: 'Border Box',
-	onChange: jest.fn().mockImplementation( ( newValue ) => {
+	onChange: vi.fn().mockImplementation( ( newValue ) => {
 		props.value = newValue;
 	} ),
 	value: undefined,
@@ -50,6 +54,102 @@ function TestBorderBoxControl(
 }
 
 describe( 'BorderBoxControl', () => {
+	describe( 'Labelling', () => {
+		it( 'should give the group of controls an accessible name from the label', () => {
+			render( <TestBorderBoxControl { ...props } /> );
+
+			expect(
+				screen.getByRole( 'group', { name: props.label } )
+			).toBeInTheDocument();
+		} );
+
+		it( 'should name the group of controls even when the label is hidden', () => {
+			render( <TestBorderBoxControl { ...props } hideLabelFromVision /> );
+
+			expect(
+				screen.getByRole( 'group', { name: props.label } )
+			).toBeInTheDocument();
+		} );
+
+		it( 'should let a consumer-provided `aria-label` take precedence over the label', () => {
+			render(
+				<TestBorderBoxControl { ...props } aria-label="Outer borders" />
+			);
+
+			expect(
+				screen.getByRole( 'group', { name: 'Outer borders' } )
+			).toBeInTheDocument();
+		} );
+
+		it( 'should let a consumer-provided `aria-labelledby` take precedence over the label', () => {
+			const ExternallyLabelledControl = () => {
+				const id = useId();
+				return (
+					<>
+						<span id={ id }>Outer borders</span>
+						<TestBorderBoxControl
+							{ ...props }
+							aria-labelledby={ id }
+						/>
+					</>
+				);
+			};
+
+			render( <ExternallyLabelledControl /> );
+
+			expect(
+				screen.getByRole( 'group', { name: 'Outer borders' } )
+			).toBeInTheDocument();
+
+			// With an external name in play, the internal label is no longer
+			// referenced, so it shouldn't carry a generated ID either.
+			expect( screen.getByText( props.label ) ).not.toHaveAttribute(
+				'id'
+			);
+		} );
+
+		it( 'should form a group when named only by `aria-label`', () => {
+			render(
+				<TestBorderBoxControl
+					{ ...props }
+					label={ undefined }
+					aria-label="Outer borders"
+				/>
+			);
+
+			expect(
+				screen.getByRole( 'group', { name: 'Outer borders' } )
+			).toBeInTheDocument();
+		} );
+
+		it( 'should fall back to the label when an ARIA naming prop is empty', () => {
+			// An empty `aria-label` is skipped by the accessible name
+			// computation, so it shouldn't suppress the label association and
+			// leave the group unnamed.
+			render( <TestBorderBoxControl { ...props } aria-label="" /> );
+
+			expect(
+				screen.getByRole( 'group', { name: props.label } )
+			).toBeInTheDocument();
+		} );
+
+		it( 'should give each instance its own label association', () => {
+			render(
+				<>
+					<TestBorderBoxControl { ...props } label="First" />
+					<TestBorderBoxControl { ...props } label="Second" />
+				</>
+			);
+
+			expect(
+				screen.getByRole( 'group', { name: 'First' } )
+			).toBeInTheDocument();
+			expect(
+				screen.getByRole( 'group', { name: 'Second' } )
+			).toBeInTheDocument();
+		} );
+	} );
+
 	describe( 'Linked view rendering', () => {
 		it( 'should render correctly when no value provided', () => {
 			render( <TestBorderBoxControl { ...props } /> );
@@ -76,6 +176,42 @@ describe( 'BorderBoxControl', () => {
 			expect( linkedButton ).toBeInTheDocument();
 		} );
 
+		// `getAllByRole` returns document order, so the sign of this offset is
+		// which side of the border inputs the linked button sits on. The color
+		// button is the first of those inputs.
+		const getLinkedButtonOffsetFromColorButton = () => {
+			const buttons = screen.getAllByRole( 'button' );
+			const linkedButtonIndex = buttons.indexOf(
+				screen.getByLabelText( 'Unlink sides' )
+			);
+			const colorButtonIndex = buttons.indexOf(
+				screen.getByLabelText( toggleLabelRegex )
+			);
+
+			// Both queries throw when absent, and `indexOf` gives -1 for a
+			// button outside the list, which would read as "earlier than".
+			expect( linkedButtonIndex ).toBeGreaterThanOrEqual( 0 );
+			expect( colorButtonIndex ).toBeGreaterThanOrEqual( 0 );
+
+			return linkedButtonIndex - colorButtonIndex;
+		};
+
+		it( 'should place the linked button before the border inputs when the label is visible', () => {
+			render( <TestBorderBoxControl { ...props } /> );
+
+			// Sharing the label's row is what lines it up with the equivalent
+			// button on sibling controls such as border radius.
+			expect( getLinkedButtonOffsetFromColorButton() ).toBeLessThan( 0 );
+		} );
+
+		it( 'should place the linked button after the border inputs when the label is hidden', () => {
+			render( <TestBorderBoxControl { ...props } hideLabelFromVision /> );
+
+			expect( getLinkedButtonOffsetFromColorButton() ).toBeGreaterThan(
+				0
+			);
+		} );
+
 		it( 'should hide label', () => {
 			render( <TestBorderBoxControl { ...props } hideLabelFromVision /> );
 
@@ -318,7 +454,7 @@ describe( 'BorderBoxControl', () => {
 
 	describe( 'onChange handling', () => {
 		beforeEach( () => {
-			jest.clearAllMocks();
+			vi.clearAllMocks();
 			props.value = undefined;
 		} );
 

package/src/border-box-control/test/utils.ts

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import {
 	getBorderDiff,
 	getCommonBorder,
@@ -44,12 +45,14 @@ describe( 'BorderBoxControl Utils', () => {
 	describe( 'isEmptyBorder', () => {
 		it( 'should determine a undefined, null, and {} to be empty', () => {
 			expect( isEmptyBorder( undefined ) ).toBe( true );
+			// Checking for extra resilience, even if not a valid type.
 			// @ts-expect-error `null` is outside the declared `Border | undefined` input; resilience is tested.
 			expect( isEmptyBorder( null ) ).toBe( true );
 			expect( isEmptyBorder( {} ) ).toBe( true );
 		} );
 
 		it( 'should determine object missing all border props to be empty', () => {
+			// Checking for extra resilience, even if not a valid type.
 			// @ts-expect-error `nonBorder` has no properties in common with `Border`; resilience is tested.
 			expect( isEmptyBorder( nonBorder ) ).toBe( true );
 		} );
@@ -109,12 +112,14 @@ describe( 'BorderBoxControl Utils', () => {
 	describe( 'isCompleteBorder', () => {
 		it( 'should determine a undefined, null, and {} to be incomplete', () => {
 			expect( isCompleteBorder( undefined ) ).toBe( false );
+			// Checking for extra resilience, even if not a valid type.
 			// @ts-expect-error `null` is outside the declared `Border | undefined` input; resilience is tested.
 			expect( isCompleteBorder( null ) ).toBe( false );
 			expect( isCompleteBorder( {} ) ).toBe( false );
 		} );
 
 		it( 'should determine objects missing border props to be incomplete', () => {
+			// Checking for extra resilience, even if not a valid type.
 			// @ts-expect-error `nonBorder` has no properties in common with `Border`; resilience is tested.
 			expect( isCompleteBorder( nonBorder ) ).toBe( false );
 			expect( isCompleteBorder( partialBorder ) ).toBe( false );
@@ -150,6 +155,7 @@ describe( 'BorderBoxControl Utils', () => {
 		it( 'should determine undefined, non-border or empty object as not being mixed', () => {
 			expect( hasMixedBorders( undefined ) ).toBe( false );
 			expect( hasMixedBorders( {} ) ).toBe( false );
+			// Checking for extra resilience, even if not a valid type.
 			// @ts-expect-error `nonBorder` is not assignable to `AnyBorder`; resilience is tested.
 			expect( hasMixedBorders( nonBorder ) ).toBe( false );
 		} );
@@ -170,12 +176,14 @@ describe( 'BorderBoxControl Utils', () => {
 	describe( 'getSplitBorders', () => {
 		it( 'should return undefined when no border provided', () => {
 			expect( getSplitBorders( undefined ) ).toEqual( undefined );
+			// Checking for extra resilience, even if not a valid type.
 			// @ts-expect-error `null` is outside the declared `Border | undefined` input; resilience is tested.
 			expect( getSplitBorders( null ) ).toEqual( undefined );
 		} );
 
 		it( 'should return undefined when supplied border is empty', () => {
 			expect( getSplitBorders( {} ) ).toEqual( undefined );
+			// Checking for extra resilience, even if not a valid type.
 			// @ts-expect-error `nonBorder` has no properties in common with `Border`; resilience is tested.
 			expect( getSplitBorders( nonBorder ) ).toEqual( undefined );
 		} );
@@ -197,6 +205,7 @@ describe( 'BorderBoxControl Utils', () => {
 		} );
 
 		it( 'should only return differences for border related properties', () => {
+			// Checking for extra resilience, even if not a valid type.
 			// @ts-expect-error `nonBorder` has no properties in common with `Border`; resilience is tested.
 			const diff = getBorderDiff( nonBorder, { caffeine: 'coffee' } );
 			expect( diff ).toEqual( {} );
@@ -206,6 +215,7 @@ describe( 'BorderBoxControl Utils', () => {
 			const diff = getBorderDiff( completeBorder, {
 				...completeBorder,
 				color: '#21759b',
+				// Checking for extra resilience, even if not a valid type.
 				// @ts-expect-error `caffeine` is not a declared `Border` property; the test checks it is ignored.
 				caffeine: 'cola',
 			} );
@@ -304,6 +314,7 @@ describe( 'BorderBoxControl Utils', () => {
 		it( 'should return undefined when no border provided', () => {
 			expect( getShorthandBorderStyle( undefined ) ).toEqual( undefined );
 			expect( getShorthandBorderStyle( {} ) ).toEqual( undefined );
+			// Checking for extra resilience, even if not a valid type.
 			// @ts-expect-error `nonBorder` has no properties in common with `Border`; resilience is tested.
 			expect( getShorthandBorderStyle( nonBorder ) ).toEqual( undefined );
 		} );

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

@@ -34,7 +34,9 @@ export type BorderBoxControlProps = ColorProps &
 		 */
 		popoverPlacement?: PopoverProps[ 'placement' ];
 		/**
-		 * 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.
 		 */
 		popoverOffset?: PopoverProps[ 'offset' ];
 		/**
@@ -83,7 +85,9 @@ export type SplitControlsProps = ColorProps &
 		 */
 		popoverPlacement?: PopoverProps[ 'placement' ];
 		/**
-		 * 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.
 		 */
 		popoverOffset?: PopoverProps[ 'offset' ];
 		/**

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

@@ -1,3 +1,4 @@
+import { describe, expect, it, vi } from 'vitest';
 import {
 	fireEvent,
 	render,
@@ -7,8 +8,13 @@ import {
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { BorderControl } from '../';
+import type { Border, BorderControlProps } from '../types';
 import { COLORS } from '../../utils';
 
+globalThis.wpVitest.mockMatchMedia();
+
+globalThis.wpVitest.mockResizeObserver();
+
 const colors = [
 	{ name: 'Gray', color: '#f6f7f7' },
 	{ name: 'Blue', color: '#72aee6' },
@@ -23,11 +29,13 @@ const defaultBorder = {
 	width: '1px',
 };
 
-function createProps( customProps ) {
-	const props = {
+function createProps(
+	customProps: Partial< BorderControlProps > = {}
+): BorderControlProps {
+	const props: BorderControlProps = {
 		colors,
 		label: 'Border',
-		onChange: jest.fn().mockImplementation( ( newValue ) => {
+		onChange: vi.fn().mockImplementation( ( newValue?: Border ) => {
 			props.value = newValue;
 		} ),
 		value: defaultBorder,
@@ -38,7 +46,7 @@ function createProps( customProps ) {
 
 const toggleLabelRegex = /Border color( and style)* picker/;
 
-const openPopover = async ( user ) => {
+const openPopover = async ( user: ReturnType< typeof userEvent.setup > ) => {
 	const toggleButton = screen.getByLabelText( toggleLabelRegex );
 	await user.click( toggleButton );
 
@@ -50,27 +58,31 @@ const openPopover = async ( user ) => {
 	await waitFor( () => expect( pickerButton ).toBePositionedPopover() );
 };
 
-const getButton = ( name ) => {
+const getButton = ( name: string | RegExp ) => {
 	return screen.getByRole( 'button', { name } );
 };
 
-const getColorOption = ( color ) => {
+const getColorOption = ( color: string ) => {
 	return screen.getByRole( 'option', { name: `${ color }` } );
 };
 
-const queryButton = ( name ) => {
+const queryButton = ( name: string | RegExp ) => {
 	return screen.queryByRole( 'button', { name } );
 };
 
 const getSliderInput = () => {
-	return screen.getByRole( 'slider', { name: 'Border width' } );
+	return screen.getByRole< HTMLInputElement >( 'slider', {
+		name: 'Border width',
+	} );
 };
 
 const getWidthInput = () => {
-	return screen.getByRole( 'spinbutton', { name: 'Border width' } );
+	return screen.getByRole< HTMLInputElement >( 'spinbutton', {
+		name: 'Border width',
+	} );
 };
 
-function TestBorderControl( restProps ) {
+function TestBorderControl( restProps: BorderControlProps ) {
 	return <BorderControl { ...restProps } />;
 }
 
@@ -80,7 +92,7 @@ describe( 'BorderControl', () => {
 			const props = createProps();
 			render( <TestBorderControl { ...props } /> );
 
-			const label = screen.getByText( props.label );
+			const label = screen.getByText( props.label! );
 			const colorButton = screen.getByLabelText( toggleLabelRegex );
 			const widthInput = getWidthInput();
 			const unitSelect = screen.getByRole( 'combobox', {
@@ -100,7 +112,7 @@ describe( 'BorderControl', () => {
 		it( 'should hide label', () => {
 			const props = createProps( { hideLabelFromVision: true } );
 			render( <TestBorderControl { ...props } /> );
-			const label = screen.getByText( props.label );
+			const label = screen.getByText( props.label! );
 
 			// As visually hidden labels are still included in the document
 			// and do not have `display: none` styling, we can't rely on
@@ -128,7 +140,7 @@ describe( 'BorderControl', () => {
 		} );
 
 		describe( 'color indicator inline styles', () => {
-			const getIndicatorWrapper = ( border ) => {
+			const getIndicatorWrapper = ( border: Border ) => {
 				render(
 					<TestBorderControl
 						{ ...createProps( { value: border } ) }
@@ -142,16 +154,21 @@ describe( 'BorderControl', () => {
 				return toggleButton.firstElementChild;
 			};
 
+			/* eslint-disable jest-dom/prefer-to-have-style -- These jsdom tests check normalized inline style values without browser layout. */
 			it( 'should fall back to gray-300 when a style is set without a color', () => {
 				const indicatorWrapper = getIndicatorWrapper( {
 					style: 'solid',
 					color: '',
 				} );
+				const expectedStyle = document.createElement( 'div' ).style;
+				expectedStyle.borderColor = COLORS.gray[ 300 ];
 
-				expect( indicatorWrapper ).toHaveStyle( {
-					borderStyle: 'solid',
-					borderColor: COLORS.gray[ 300 ],
-				} );
+				expect(
+					( indicatorWrapper as HTMLElement ).style.borderStyle
+				).toBe( 'solid' );
+				expect(
+					( indicatorWrapper as HTMLElement ).style.borderColor
+				).toBe( expectedStyle.borderColor );
 			} );
 
 			it( 'should pass CSS-wide values through to border-style and border-color', () => {
@@ -160,10 +177,12 @@ describe( 'BorderControl', () => {
 					color: 'inherit',
 				} );
 
-				expect( indicatorWrapper ).toHaveStyle( {
-					borderStyle: 'inherit',
-					borderColor: 'inherit',
-				} );
+				expect(
+					( indicatorWrapper as HTMLElement ).style.borderStyle
+				).toBe( 'inherit' );
+				expect(
+					( indicatorWrapper as HTMLElement ).style.borderColor
+				).toBe( 'inherit' );
 			} );
 
 			it( 'should preview a `none` style as solid without applying a color', () => {
@@ -171,14 +190,15 @@ describe( 'BorderControl', () => {
 					style: 'none',
 				} );
 
-				expect( indicatorWrapper ).toHaveStyle( {
-					borderStyle: 'solid',
-				} );
+				expect(
+					( indicatorWrapper as HTMLElement ).style.borderStyle
+				).toBe( 'solid' );
 				expect( indicatorWrapper ).not.toHaveAttribute(
 					'style',
 					expect.stringContaining( 'border-color' )
 				);
 			} );
+			/* eslint-enable jest-dom/prefer-to-have-style */
 
 			it( 'should not apply inline styles when no style is set', () => {
 				const indicatorWrapper = getIndicatorWrapper( {

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

@@ -1,3 +1,4 @@
+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';
@@ -5,6 +6,8 @@ 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.
 // See https://stackoverflow.com/a/57103940
@@ -198,7 +201,7 @@ describe( 'BoxControl', () => {
 
 		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 ) } />
@@ -473,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 } /> );
 
@@ -502,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 } /> );
 

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(
 	(
@@ -664,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/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 )
 			);
 

package/src/circular-option-picker/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { beforeEach, describe, expect, it } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { press } from '@ariakit/test';
 import { logged } from '@wordpress/deprecated';