@wordpress/components 35.0.1 → 36.0.0

package/src/navigable-container/test/tababble-container.tsx

@@ -35,23 +35,7 @@ const getTabbableContainerTabbables = () => [
 	screen.getByRole( 'link', { name: 'Item 4' } ),
 ];
 
-const originalGetClientRects = window.HTMLElement.prototype.getClientRects;
-
 describe( 'TabbableContainer', () => {
-	beforeAll( () => {
-		// Mocking `getClientRects()` is necessary to pass a check performed by
-		// the `focus.tabbable.find()` and by the `focus.focusable.find()` functions
-		// from the `@wordpress/dom` package.
-		// @ts-expect-error We're not trying to comply to the DOM spec, only mocking
-		window.HTMLElement.prototype.getClientRects = function () {
-			return [ 'trick-jsdom-into-having-size-for-element-rect' ];
-		};
-	} );
-
-	afterAll( () => {
-		window.HTMLElement.prototype.getClientRects = originalGetClientRects;
-	} );
-
 	it( 'moves focus on its tabbable children by using the tab key', async () => {
 		const user = userEvent.setup();
 

package/src/navigator/test/index.tsx

@@ -469,30 +469,6 @@ const getNavigationButton = ( buttonKey: keyof typeof BUTTON_TEXT ) =>
 	screen.getByRole( 'button', { name: BUTTON_TEXT[ buttonKey ] } );
 
 describe( 'Navigator', () => {
-	const originalGetClientRects = window.Element.prototype.getClientRects;
-
-	// `getClientRects` needs to be mocked so that `isVisible` from the `@wordpress/dom`
-	// `focusable` module can pass, in a JSDOM env where the DOM elements have no width/height.
-	const mockedGetClientRects = jest.fn( () => [
-		{
-			x: 0,
-			y: 0,
-			width: 100,
-			height: 100,
-		},
-	] );
-
-	beforeAll( () => {
-		// @ts-expect-error There's no need for an exact mock, this is just needed
-		// for the tests to pass (see `mockedGetClientRects` inline comments).
-		window.Element.prototype.getClientRects =
-			jest.fn( mockedGetClientRects );
-	} );
-
-	afterAll( () => {
-		window.Element.prototype.getClientRects = originalGetClientRects;
-	} );
-
 	it( 'should render', () => {
 		render( <MyNavigation /> );
 

package/src/notice/style.scss

@@ -1,9 +1,9 @@
 @use "@wordpress/base-styles/variables" as *;
 
 .components-notice {
-	--wp-components-notice-background-color: var(--wpds-color-bg-surface-info-weak);
+	--wp-components-notice-background-color: var(--wpds-color-background-surface-info-weak);
 	--wp-components-notice-border-color: var(--wpds-color-stroke-surface-info);
-	--wp-components-notice-text-color: var(--wpds-color-fg-content-info);
+	--wp-components-notice-text-color: var(--wpds-color-foreground-content-info);
 
 	box-sizing: border-box;
 	display: grid;
@@ -19,21 +19,21 @@
 	line-height: var(--wpds-typography-line-height-sm);
 
 	&.is-success {
-		--wp-components-notice-background-color: var(--wpds-color-bg-surface-success-weak);
+		--wp-components-notice-background-color: var(--wpds-color-background-surface-success-weak);
 		--wp-components-notice-border-color: var(--wpds-color-stroke-surface-success);
-		--wp-components-notice-text-color: var(--wpds-color-fg-content-success);
+		--wp-components-notice-text-color: var(--wpds-color-foreground-content-success);
 	}
 
 	&.is-warning {
-		--wp-components-notice-background-color: var(--wpds-color-bg-surface-warning-weak);
+		--wp-components-notice-background-color: var(--wpds-color-background-surface-warning-weak);
 		--wp-components-notice-border-color: var(--wpds-color-stroke-surface-warning);
-		--wp-components-notice-text-color: var(--wpds-color-fg-content-warning);
+		--wp-components-notice-text-color: var(--wpds-color-foreground-content-warning);
 	}
 
 	&.is-error {
-		--wp-components-notice-background-color: var(--wpds-color-bg-surface-error-weak);
+		--wp-components-notice-background-color: var(--wpds-color-background-surface-error-weak);
 		--wp-components-notice-border-color: var(--wpds-color-stroke-surface-error);
-		--wp-components-notice-text-color: var(--wpds-color-fg-content-error);
+		--wp-components-notice-text-color: var(--wpds-color-foreground-content-error);
 	}
 }
 
@@ -46,9 +46,7 @@
 	// consistent across variants, matching `@wordpress/ui` Notice (`.title` /
 	// `.description` always use `--text-vertical-padding` whether or not `CloseIcon`
 	// is rendered).
-	// TODO: Replace `$button-size-small` with a WPDS size token once size tokens
-	// land in `@wordpress/theme`.
-	padding-block: calc((#{$button-size-small} - 1lh) / 2);
+	padding-block: calc((var(--wpds-dimension-size-sm) - 1lh) / 2);
 }
 
 .components-notice__actions {
@@ -65,13 +63,13 @@
 .components-notice__dismiss {
 	grid-column: 2;
 	grid-row: 1;
-	color: var(--wpds-color-fg-interactive-neutral);
+	color: var(--wpds-color-foreground-interactive-neutral);
 	margin-inline-start: var(--wpds-dimension-gap-xs);
 
 	&:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):hover,
 	&:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):active,
 	&:not(:disabled):not([aria-disabled="true"]):focus {
-		color: var(--wpds-color-fg-interactive-neutral-active);
+		color: var(--wpds-color-foreground-interactive-neutral-active);
 		background-color: transparent;
 	}
 

package/src/notice/test/__snapshots__/index.tsx.snap

@@ -48,6 +48,7 @@ exports[`Notice should match snapshot 1`] = `
     >
       <svg
         aria-hidden="true"
+        fill="currentColor"
         focusable="false"
         height="24"
         viewBox="0 0 24 24"

package/src/panel/README.md

@@ -2,6 +2,8 @@
 
 Panels expand and collapse multiple sections of content.
 
+The `Panel` family is intended for the block inspector sidebar. For collapsible sections elsewhere, use the [`CollapsibleCard`](https://wordpress.github.io/gutenberg/?path=/docs/design-system-components-collapsiblecard--docs) component instead.
+
 ![](https://make.wordpress.org/design/files/2019/03/panel.png)
 
 ## Design guidelines

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

@@ -17,7 +17,6 @@ import PanelBody from '../body';
 import InputControl from '../../input-control';
 
 const meta: Meta< typeof Panel > = {
-	tags: [ 'manifest' ],
 	title: 'Components/Containers/Panel',
 	id: 'components-panel',
 	component: Panel,
@@ -30,7 +29,8 @@ const meta: Meta< typeof Panel > = {
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
 			status: 'recommended',
-			whereUsed: 'global',
+			whereUsed: 'editor',
+			notes: 'Intended for the block inspector sidebar. For collapsible sections elsewhere, use `CollapsibleCard` from `@wordpress/ui` instead.',
 		},
 	},
 };

package/src/panel/style.scss

@@ -40,7 +40,7 @@
 	justify-content: space-between;
 	align-items: center;
 	padding: 0 $grid-unit-20;
-	border-bottom: $border-width solid $gray-300;
+	border-bottom: $border-width solid var(--wpds-color-stroke-surface-neutral);
 
 	// This helps ensure the correct panel height, including the border, avoiding subpixel rounding issues.
 	box-sizing: content-box;

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

@@ -48,7 +48,6 @@ const Template: StoryFn< typeof Placeholder > = ( args ) => {
 		<Placeholder { ...args }>
 			<div>
 				<TextControl
-					__next40pxDefaultSize
 					label="Sample Field"
 					placeholder="Enter something here"
 					value={ value }

package/src/radio-control/style.scss

@@ -56,7 +56,7 @@
 
 	&:disabled {
 		background: $components-color-gray-100;
-		border: 1px solid $components-color-gray-300;
+		border: 1px solid var(--wpds-color-stroke-interactive-neutral-disabled);
 		opacity: 1; // Override style from wp-admin forms.css.
 
 		&:checked::before {

package/src/resizable-box/index.tsx

@@ -9,7 +9,7 @@ import { forwardRef } from '@wordpress/element';
 import clsx from 'clsx';
 import { Resizable } from 're-resizable';
 import type { ResizableProps } from 're-resizable';
-import type { ReactNode, ForwardedRef } from 'react';
+import type { ForwardedRef } from 'react';
 
 /**
  * Internal dependencies
@@ -88,7 +88,6 @@ const HANDLE_STYLES = {
 };
 
 type ResizableBoxProps = ResizableProps & {
-	children: ReactNode;
 	showHandle?: boolean;
 	__experimentalShowTooltip?: boolean;
 	__experimentalTooltipProps?: Parameters< typeof ResizeTooltip >[ 0 ];

package/src/sandbox/index.tsx

@@ -17,6 +17,23 @@ import type { SandBoxProps } from './types';
 
 type SandBoxContentProps = Omit< SandBoxProps, 'allowSameOrigin' >;
 
+/**
+ * Matches CSS viewport-relative length values such as `100vh`, `50.5vw`,
+ * and `.5dvh`. Used to strip viewport units from user-supplied HTML inside
+ * the sandbox iframe, because those units are relative to the iframe's
+ * own size and would create a measurement feedback loop with the
+ * resize observer.
+ *
+ * Exported for tests. NOTE: an identical regex literal is duplicated
+ * inside `observeAndResizeJS` below because that function is serialized
+ * via `.toString()` and embedded into the iframe's `srcdoc` — it has no
+ * access to this module's scope at runtime. If you change one, change
+ * the other; the "is embedded in the sandbox iframe srcdoc" test
+ * guards against drift.
+ */
+export const VIEWPORT_UNIT_VALUE_REGEX =
+	/^\d*\.?\d+(?:vw|vh|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)$/;
+
 const observeAndResizeJS = function () {
 	const { MutationObserver } = window;
 
@@ -58,7 +75,7 @@ const observeAndResizeJS = function () {
 				[ 'width', 'height', 'minHeight', 'maxHeight' ] as const
 			 ).forEach( function ( style ) {
 				if (
-					/^\\d+(vw|vh|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)$/.test(
+					/^\d*\.?\d+(?:vw|vh|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)$/.test(
 						ruleOrNode.style[ style ]
 					)
 				) {

package/src/sandbox/test/index.tsx

@@ -11,7 +11,7 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import SandBox from '..';
+import SandBox, { VIEWPORT_UNIT_VALUE_REGEX } from '..';
 
 describe( 'SandBox', () => {
 	const TestWrapper = () => {
@@ -109,4 +109,47 @@ describe( 'SandBox', () => {
 			expect.stringContaining( 'https://another.super.embed' )
 		);
 	} );
+
+	describe( 'VIEWPORT_UNIT_VALUE_REGEX', () => {
+		it.each( [
+			'100vh',
+			'50vw',
+			'0vh',
+			'50.5vh',
+			'.5vh',
+			'100dvh',
+			'50svw',
+			'1lvi',
+			'100vmin',
+			'100vmax',
+		] )( 'matches viewport unit value %s', ( value ) => {
+			expect( VIEWPORT_UNIT_VALUE_REGEX.test( value ) ).toBe( true );
+		} );
+
+		it.each( [
+			'100px',
+			'50%',
+			'100',
+			'vh',
+			'.vh',
+			'calc(100vh - 10px)',
+			'100 vh',
+			'',
+		] )( 'does not match %s', ( value ) => {
+			expect( VIEWPORT_UNIT_VALUE_REGEX.test( value ) ).toBe( false );
+		} );
+
+		it( 'is embedded in the sandbox iframe srcdoc', () => {
+			// Guards against drift between the exported constant and
+			// the copy inlined into `observeAndResizeJS`, which is
+			// serialized via `.toString()` into the iframe srcdoc and
+			// cannot reference module-scope values at runtime.
+			render( <SandBox html="<p>x</p>" title="Regex Sync Test" /> );
+			const iframe =
+				screen.getByTitle< HTMLIFrameElement >( 'Regex Sync Test' );
+			const srcDoc = iframe.getAttribute( 'srcdoc' ) ?? '';
+
+			expect( srcDoc ).toContain( VIEWPORT_UNIT_VALUE_REGEX.source );
+		} );
+	} );
 } );

package/src/spinner/styles.ts

@@ -35,6 +35,7 @@ const commonPathProps = css`
 	stroke-width: 1.5px;
 `;
 
+// TODO: should use the `stroke-surface-neutral` WPDS token when refactored to SCSS modules
 export const SpinnerTrack = styled.circle`
 	${ commonPathProps };
 	stroke: ${ COLORS.gray[ 300 ] };

package/src/tab-panel/style.scss

@@ -21,15 +21,15 @@
 	padding: 3px var(--wpds-dimension-padding-lg); // Use padding to offset the is-active border, this benefits Windows High Contrast mode
 	margin-left: 0;
 	font-weight: var(--wpds-typography-font-weight-regular);
-	color: var(--wpds-color-fg-interactive-neutral);
+	color: var(--wpds-color-foreground-interactive-neutral);
 
 	&:disabled,
 	&[aria-disabled="true"] {
-		color: var(--wpds-color-fg-interactive-neutral-disabled);
+		color: var(--wpds-color-foreground-interactive-neutral-disabled);
 	}
 
 	&:not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) {
-		color: var(--wpds-color-fg-interactive-neutral-active);
+		color: var(--wpds-color-foreground-interactive-neutral-active);
 	}
 
 	&:focus:not(:disabled) {
@@ -87,7 +87,7 @@
 	&:focus-visible::before {
 		box-shadow:
 			0 0 0 var(--wpds-border-width-focus)
-			var(--wpds-color-stroke-focus-brand);
+			var(--wpds-color-stroke-focus);
 
 		// Windows high contrast mode.
 		outline: 2px solid transparent;
@@ -101,7 +101,7 @@
 		}
 
 		&.is-active {
-			background: var(--wpds-color-bg-interactive-neutral-weak-active);
+			background: var(--wpds-color-background-interactive-neutral-weak-active);
 		}
 	}
 }
@@ -115,7 +115,7 @@
 	&:focus-visible {
 		box-shadow:
 			0 0 0 var(--wpds-border-width-focus)
-			var(--wpds-color-stroke-focus-brand);
+			var(--wpds-color-stroke-focus);
 
 		// Windows high contrast mode.
 		outline: 2px solid transparent;

package/src/tab-panel/test/index.tsx

@@ -35,8 +35,6 @@ const TABS = [
 const getSelectedTab = async () =>
 	await screen.findByRole( 'tab', { selected: true } );
 
-let originalGetClientRects: () => DOMRectList;
-
 describe.each( [
 	[ 'uncontrolled', TabPanel ],
 	// The controlled component tests will be added once we certify the
@@ -45,21 +43,6 @@ describe.each( [
 ] )( 'TabPanel %s', ( ...modeAndComponent ) => {
 	const [ , Component ] = modeAndComponent;
 
-	beforeAll( () => {
-		originalGetClientRects = window.HTMLElement.prototype.getClientRects;
-		// Mocking `getClientRects()` is necessary to pass a check performed by
-		// the `focus.tabbable.find()` and by the `focus.focusable.find()` functions
-		// from the `@wordpress/dom` package.
-		// @ts-expect-error We're not trying to comply to the DOM spec, only mocking
-		window.HTMLElement.prototype.getClientRects = function () {
-			return [ 'trick-jsdom-into-having-size-for-element-rect' ];
-		};
-	} );
-
-	afterAll( () => {
-		window.HTMLElement.prototype.getClientRects = originalGetClientRects;
-	} );
-
 	describe( 'Accessibility and semantics', () => {
 		it( 'should use the correct aria attributes', async () => {
 			const panelRenderFunction = jest.fn();

package/src/tabs/index.tsx

@@ -7,7 +7,7 @@ import * as Ariakit from '@ariakit/react';
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { useEffect, useMemo } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 import { isRTL } from '@wordpress/i18n';
 
 /**
@@ -84,31 +84,6 @@ export const Tabs = Object.assign(
 			rtl: isRTL(),
 		} );
 
-		const { items, activeId } = Ariakit.useStoreState( store );
-		const { setActiveId } = store;
-
-		useEffect( () => {
-			requestAnimationFrame( () => {
-				const focusedElement =
-					items?.[ 0 ]?.element?.ownerDocument.activeElement;
-
-				if (
-					! focusedElement ||
-					! items.some( ( item ) => focusedElement === item.element )
-				) {
-					return; // Return early if no tabs are focused.
-				}
-
-				// If, after ariakit re-computes the active tab, that tab doesn't match
-				// the currently focused tab, then we force an update to ariakit to avoid
-				// any mismatches, especially when navigating to previous/next tab with
-				// arrow keys.
-				if ( activeId !== focusedElement.id ) {
-					setActiveId( focusedElement.id );
-				}
-			} );
-		}, [ activeId, items, setActiveId ] );
-
 		const contextValue = useMemo(
 			() => ( {
 				store,

package/src/tabs/tablist.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import * as Ariakit from '@ariakit/react';
+import { useStoreState } from '@ariakit/react';
 import clsx from 'clsx';
 
 /**
@@ -73,15 +73,14 @@ export const TabList = forwardRef<
 >( function TabList( { children, ...otherProps }, ref ) {
 	const { store } = useTabsContext() ?? {};
 
-	const selectedId = Ariakit.useStoreState( store, 'selectedId' );
-	const activeId = Ariakit.useStoreState( store, 'activeId' );
-	const selectOnMove = Ariakit.useStoreState( store, 'selectOnMove' );
-	const items = Ariakit.useStoreState( store, 'items' );
+	const selectedId = useStoreState( store, 'selectedId' );
+	const selectOnMove = useStoreState( store, 'selectOnMove' );
+	const items = useStoreState( store, 'items' );
 	const [ parent, setParent ] = useState< HTMLElement >();
 	const refs = useMergeRefs( [ ref, setParent ] );
 
 	const selectedItem = store?.item( selectedId );
-	const renderedItems = Ariakit.useStoreState( store, 'renderedItems' );
+	const renderedItems = useStoreState( store, 'renderedItems' );
 
 	const selectedItemIndex =
 		renderedItems && selectedItem
@@ -110,20 +109,6 @@ export const TabList = forwardRef<
 	// Make sure selected tab is scrolled into view.
 	useScrollRectIntoView( parent, selectedRect );
 
-	const onBlur = () => {
-		if ( ! selectOnMove ) {
-			return;
-		}
-
-		// When automatic tab selection is on, make sure that the active tab is up
-		// to date with the selected tab when leaving the tablist. This makes sure
-		// that the selected tab will receive keyboard focus when tabbing back into
-		// the tablist.
-		if ( selectedId !== activeId ) {
-			store?.setActiveId( selectedId );
-		}
-	};
-
 	if ( ! store ) {
 		warning( '`Tabs.TabList` must be wrapped in a `Tabs` component.' );
 		return null;
@@ -141,7 +126,6 @@ export const TabList = forwardRef<
 					tabIndex={ props.tabIndex ?? -1 }
 				/>
 			) }
-			onBlur={ onBlur }
 			data-select-on-move={ selectOnMove ? 'true' : 'false' }
 			{ ...otherProps }
 			className={ clsx(

package/src/tabs/test/index.tsx

@@ -176,8 +176,6 @@ const ControlledTabs = ( {
 	);
 };
 
-let originalGetClientRects: () => DOMRectList;
-
 async function waitForComponentToBeInitializedWithSelectedTab(
 	selectedTabName: string | undefined
 ) {
@@ -218,21 +216,6 @@ async function waitForComponentToBeInitializedWithSelectedTab(
 }
 
 describe( 'Tabs', () => {
-	beforeAll( () => {
-		originalGetClientRects = window.HTMLElement.prototype.getClientRects;
-		// Mocking `getClientRects()` is necessary to pass a check performed by
-		// the `focus.tabbable.find()` and by the `focus.focusable.find()` functions
-		// from the `@wordpress/dom` package.
-		// @ts-expect-error We're not trying to comply to the DOM spec, only mocking
-		window.HTMLElement.prototype.getClientRects = function () {
-			return [ 'trick-jsdom-into-having-size-for-element-rect' ];
-		};
-	} );
-
-	afterAll( () => {
-		window.HTMLElement.prototype.getClientRects = originalGetClientRects;
-	} );
-
 	describe( 'Adherence to spec and basic behavior', () => {
 		it( 'should apply the correct roles, semantics and attributes', async () => {
 			await render( <UncontrolledTabs tabs={ TABS } /> );
@@ -1465,28 +1448,24 @@ describe( 'Tabs', () => {
 							/>
 						);
 
-						// When the selected tab is changed, focus should not be changed.
+						// When the selected tab is changed by the controlling
+						// component while the tablist holds focus, focus moves to
+						// the newly selected tab (Gamma).
 						expect(
 							screen.getByRole( 'tab', {
 								selected: true,
 								name: 'Gamma',
 							} )
-						).toBeVisible();
-						expect(
-							screen.getByRole( 'tab', {
-								selected: false,
-								name: 'Beta',
-							} )
 						).toHaveFocus();
 
-						// Arrow left should move focus to the previous tab (alpha).
-						// The alpha tab should be always focused, and should be selected
+						// Arrow left should move focus to the previous tab (Beta).
+						// Beta should always be focused, and should be selected
 						// when the `selectOnMove` prop is set to `true`.
 						await press.ArrowLeft();
 						expect(
 							screen.getByRole( 'tab', {
 								selected: selectOnMove,
-								name: 'Alpha',
+								name: 'Beta',
 							} )
 						).toHaveFocus();
 					} );
@@ -1530,18 +1509,15 @@ describe( 'Tabs', () => {
 							</>
 						);
 
-						// When the selected tab is changed, it should not automatically receive focus.
+						// When the selected tab is changed by the controlling
+						// component while the tablist holds focus, focus moves to
+						// the newly selected tab (Gamma), which also becomes the
+						// active tab.
 						expect(
 							screen.getByRole( 'tab', {
 								selected: true,
 								name: 'Gamma',
 							} )
-						).toBeVisible();
-						expect(
-							screen.getByRole( 'tab', {
-								selected: false,
-								name: 'Beta',
-							} )
 						).toHaveFocus();
 
 						// Press shift+tab, move focus to the button before Tabs
@@ -1550,18 +1526,14 @@ describe( 'Tabs', () => {
 							screen.getByRole( 'button', { name: 'Focus me' } )
 						).toHaveFocus();
 
-						// Press tab, move focus back to the tablist
+						// Press tab, move focus back to the tablist. Because the
+						// newly selected tab became the active tab, focus returns
+						// to Gamma regardless of `selectOnMove`.
 						await press.Tab();
-
-						const betaTab = screen.getByRole( 'tab', {
-							name: 'Beta',
-						} );
-						const gammaTab = screen.getByRole( 'tab', {
-							name: 'Gamma',
-						} );
-
 						expect(
-							selectOnMove ? gammaTab : betaTab
+							screen.getByRole( 'tab', {
+								name: 'Gamma',
+							} )
 						).toHaveFocus();
 					} );
 				}

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

@@ -6,7 +6,7 @@ Snapshot Diff:
 + Base styles
 
 @@ -3,8 +3,9 @@
-      "color": "var(--wp-components-color-foreground, #1e1e1e)",
+      "color": "var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e))",
       "font-size": "calc((13 / 13) * 13px)",
       "font-weight": "normal",
       "line-height": "1.4",
@@ -19,7 +19,7 @@ Snapshot Diff:
 
 exports[`Text should render highlighted words with highlightCaseSensitive 1`] = `
 .emotion-0 {
-  color: var(--wp-components-color-foreground, #1e1e1e);
+  color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
   line-height: 1.4;
   margin: 0;
   text-wrap: pretty;
@@ -51,7 +51,7 @@ exports[`Text should render highlighted words with highlightCaseSensitive 1`] =
 
 exports[`Text snapshot tests should render correctly 1`] = `
 .emotion-0 {
-  color: var(--wp-components-color-foreground, #1e1e1e);
+  color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
   line-height: 1.4;
   margin: 0;
   text-wrap: pretty;

package/src/text-control/README.md

@@ -62,7 +62,6 @@ const MyTextControl = () => {
 
 	return (
 		<TextControl
-			__next40pxDefaultSize
 			label="Additional CSS Class"
 			value={ className }
 			onChange={ ( value ) => setClassName( value ) }
@@ -127,14 +126,6 @@ A function that receives the value of the input.
 -   Type: `function`
 -   Required: Yes
 
-#### __next40pxDefaultSize
-
-Start opting into the larger default height that will become the default size in a future version.
-
--   Type: `Boolean`
--   Required: No
--   Default: `false`
-
 ## Related components
 
 -   To offer users more constrained options for input, use SelectControl, RadioControl, CheckboxControl, or RangeControl.