@wordpress/components 35.0.1 → 35.1.1-next.v.202606191442.0

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/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/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/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

@@ -1465,28 +1465,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 +1526,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 +1543,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/toggle-group-control/test/__snapshots__/index.tsx.snap

@@ -28,7 +28,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
 }
 
 .emotion-6 {
-  background: var(--wp-components-color-background, #fff);
+  background: var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
   border: 1px solid transparent;
   border-radius: 2px;
   display: -webkit-inline-box;
@@ -62,8 +62,8 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   content: '';
   position: absolute;
   pointer-events: none;
-  background: var(--wp-components-color-gray-100, #f0f0f0);
-  border: 1px solid var(--wp-components-color-gray-700, #757575);
+  background: var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral, #fcfcfc));
+  border: 1px solid var(--wp-components-color-gray-700, var(--wpds-color-foreground-content-neutral-weak, #707070));
   outline: 2px solid transparent;
   outline-offset: -3px;
   border-radius: 2px;
@@ -106,7 +106,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   background: transparent;
   border: none;
   border-radius: 1px;
-  color: var(--wp-components-color-gray-700, #757575);
+  color: var(--wp-components-color-gray-700, var(--wpds-color-foreground-content-neutral-weak, #707070));
   fill: currentColor;
   cursor: pointer;
   display: -webkit-box;
@@ -134,7 +134,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   aspect-ratio: 1;
   padding-left: 0;
   padding-right: 0;
-  color: var(--wp-components-color-foreground, #1e1e1e);
+  color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
   font-weight: 499;
 }
 
@@ -156,7 +156,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
 }
 
 .emotion-10:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
-  color: var(--wp-components-color-foreground, #1e1e1e);
+  color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
 }
 
 .emotion-11 {
@@ -180,7 +180,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   background: transparent;
   border: none;
   border-radius: 1px;
-  color: var(--wp-components-color-gray-700, #757575);
+  color: var(--wp-components-color-gray-700, var(--wpds-color-foreground-content-neutral-weak, #707070));
   fill: currentColor;
   cursor: pointer;
   display: -webkit-box;
@@ -228,7 +228,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
 }
 
 .emotion-15:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
-  color: var(--wp-components-color-foreground, #1e1e1e);
+  color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
 }
 
 <div>
@@ -264,6 +264,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
             id="wp-components-base-control-19-40"
+            name=":r3e:"
             role="radio"
             type="button"
             value="uppercase"
@@ -297,6 +298,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
             id="wp-components-base-control-19-41"
+            name=":r3e:"
             role="radio"
             type="button"
             value="lowercase"
@@ -359,7 +361,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
 }
 
 .emotion-6 {
-  background: var(--wp-components-color-background, #fff);
+  background: var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
   border: 1px solid transparent;
   border-radius: 2px;
   display: -webkit-inline-box;
@@ -393,8 +395,8 @@ exports[`ToggleGroupControl controlled should render correctly with text options
   content: '';
   position: absolute;
   pointer-events: none;
-  background: var(--wp-components-color-gray-100, #f0f0f0);
-  border: 1px solid var(--wp-components-color-gray-700, #757575);
+  background: var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral, #fcfcfc));
+  border: 1px solid var(--wp-components-color-gray-700, var(--wpds-color-foreground-content-neutral-weak, #707070));
   outline: 2px solid transparent;
   outline-offset: -3px;
   border-radius: 2px;
@@ -437,7 +439,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
   background: transparent;
   border: none;
   border-radius: 1px;
-  color: var(--wp-components-color-gray-700, #757575);
+  color: var(--wp-components-color-gray-700, var(--wpds-color-foreground-content-neutral-weak, #707070));
   fill: currentColor;
   cursor: pointer;
   display: -webkit-box;
@@ -481,7 +483,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
 }
 
 .emotion-10:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
-  color: var(--wp-components-color-foreground, #1e1e1e);
+  color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
 }
 
 .emotion-11 {
@@ -525,6 +527,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
             id="wp-components-base-control-18-38"
+            name=":r37:"
             role="radio"
             type="button"
             value="rigas"
@@ -547,6 +550,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
             id="wp-components-base-control-18-39"
+            name=":r37:"
             role="radio"
             type="button"
             value="jack"
@@ -598,7 +602,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
 }
 
 .emotion-6 {
-  background: var(--wp-components-color-background, #fff);
+  background: var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
   border: 1px solid transparent;
   border-radius: 2px;
   display: -webkit-inline-box;
@@ -632,8 +636,8 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   content: '';
   position: absolute;
   pointer-events: none;
-  background: var(--wp-components-color-gray-100, #f0f0f0);
-  border: 1px solid var(--wp-components-color-gray-700, #757575);
+  background: var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral, #fcfcfc));
+  border: 1px solid var(--wp-components-color-gray-700, var(--wpds-color-foreground-content-neutral-weak, #707070));
   outline: 2px solid transparent;
   outline-offset: -3px;
   border-radius: 2px;
@@ -676,7 +680,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   background: transparent;
   border: none;
   border-radius: 1px;
-  color: var(--wp-components-color-gray-700, #757575);
+  color: var(--wp-components-color-gray-700, var(--wpds-color-foreground-content-neutral-weak, #707070));
   fill: currentColor;
   cursor: pointer;
   display: -webkit-box;
@@ -704,7 +708,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   aspect-ratio: 1;
   padding-left: 0;
   padding-right: 0;
-  color: var(--wp-components-color-foreground, #1e1e1e);
+  color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
   font-weight: 499;
 }
 
@@ -726,7 +730,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
 }
 
 .emotion-10:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
-  color: var(--wp-components-color-foreground, #1e1e1e);
+  color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
 }
 
 .emotion-11 {
@@ -750,7 +754,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   background: transparent;
   border: none;
   border-radius: 1px;
-  color: var(--wp-components-color-gray-700, #757575);
+  color: var(--wp-components-color-gray-700, var(--wpds-color-foreground-content-neutral-weak, #707070));
   fill: currentColor;
   cursor: pointer;
   display: -webkit-box;
@@ -798,7 +802,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
 }
 
 .emotion-15:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
-  color: var(--wp-components-color-foreground, #1e1e1e);
+  color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
 }
 
 <div>
@@ -834,6 +838,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
             id="wp-components-base-control-1-2"
+            name=":r7:"
             role="radio"
             type="button"
             value="uppercase"
@@ -867,6 +872,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
             id="wp-components-base-control-1-3"
+            name=":r7:"
             role="radio"
             type="button"
             value="lowercase"
@@ -923,7 +929,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
 }
 
 .emotion-6 {
-  background: var(--wp-components-color-background, #fff);
+  background: var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
   border: 1px solid transparent;
   border-radius: 2px;
   display: -webkit-inline-box;
@@ -957,8 +963,8 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
   content: '';
   position: absolute;
   pointer-events: none;
-  background: var(--wp-components-color-gray-100, #f0f0f0);
-  border: 1px solid var(--wp-components-color-gray-700, #757575);
+  background: var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral, #fcfcfc));
+  border: 1px solid var(--wp-components-color-gray-700, var(--wpds-color-foreground-content-neutral-weak, #707070));
   outline: 2px solid transparent;
   outline-offset: -3px;
   border-radius: 2px;
@@ -1001,7 +1007,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
   background: transparent;
   border: none;
   border-radius: 1px;
-  color: var(--wp-components-color-gray-700, #757575);
+  color: var(--wp-components-color-gray-700, var(--wpds-color-foreground-content-neutral-weak, #707070));
   fill: currentColor;
   cursor: pointer;
   display: -webkit-box;
@@ -1045,7 +1051,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
 }
 
 .emotion-10:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
-  color: var(--wp-components-color-foreground, #1e1e1e);
+  color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
 }
 
 .emotion-11 {
@@ -1089,6 +1095,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
             id="wp-components-base-control-0-0"
+            name=":r0:"
             role="radio"
             type="button"
             value="rigas"
@@ -1111,6 +1118,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
             id="wp-components-base-control-0-1"
+            name=":r0:"
             role="radio"
             type="button"
             value="jack"