Components: Migrate ToggleGroupControl to SCSS Modules

[ciampo]

Follow up to #66806

What?

Migrates ToggleGroupControl and its option components from Emotion to SCSS Modules, and aligns their focus rings and enclosing borders with WPDS tokens.

Why?

This continues the components package migration away from runtime Emotion styles while preserving public compatibility and adopting the standard design-system focus treatment.

How?

• Replaces Emotion style fragments and styled wrappers with CSS Module classes composed through clsx.
• Preserves the existing selector specificity, source order, physical offsets and padding, legacy class names, and indicator data attribute.
• Uses the shared WPDS outset-focus-ring mixin while retaining legacy Theme and validated-control accent overrides.
• Maps the raw gray 300 and 400 borders through the existing component-theme compatibility variables to the WPDS surface and interactive stroke tokens.
• Regenerates the repository snapshots; only the four ToggleGroupControl snapshots changed, removing Emotion CSS and generated class names.
• Audits internal consumers for source-order-dependent Emotion composition. None require changes.

Testing Instructions

1. Run npm run test:unit -- packages/components/src/toggle-group-control/test/index.tsx --runInBand.
2. Run npm run test:unit:update and inspect the whole-repository snapshot diff.
3. Run npm run lint:css.
4. Run npm run lint:js.
5. Run npm run build.
6. Start Storybook and open Components / Selection & Input / Common / ToggleGroupControl.
7. Compare the Default, With Tooltip, With Icons, and Deselectable stories with trunk, including hover, focus, selected, disabled, block-width, and reduced-motion states.
8. Check places in the editor where the component is used, such as block inspector controls and global styles typography settings.

Testing Instructions for Keyboard

1. Tab to the ToggleGroupControl.
2. For the radio-group variant, use the arrow keys to move between enabled options and confirm the selected indicator follows focus.
3. For the deselectable variant, Tab between options and use Space or Enter to select and deselect.
4. Confirm focus indicators remain visible, invalid controls retain their error-colored focus ring, and disabled options are skipped.

Screenshots or screencast

Expected visual changes:

• Focus rings use the standard WPDS focus width, color, and offset.
• Block-group resting borders use the neutral surface stroke; non-deselectable hover borders use the neutral interactive stroke.

Other visual states are intended to remain unchanged.

Use of AI Tools

Codex was used to analyze prior migrations, implement the refactor, and run validation. The resulting changes were reviewed locally.

[github-actions]

Size Change: +607 B (+0.01%)

Total Size: 7.73 MB

📦 View Changed

Filename	Size	Change
build/scripts/components/index.min.js	272 kB	+607 B (+0.22%)

_{compressed-size-action}

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

Flaky tests detected in 50b158d.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/29569993449
📝 Reported issues:

• [Flaky Test] should update the HTML only for the latest navigation #78835 in /test/e2e/specs/interactivity/router-navigate.spec.ts

[mirka]

Tests well 👍

[mirka]

Suggested change

	// Preserve legacy Theme and validated-control accent overrides.
	outline-color: $components-color-focus;
	// Preserve validated-control accent overrides.
	outline-color: $components-color-focus;

We'll need to address the validated control accents separately, but I don't want to imply that we care about the legacy Theme anymore. We should ignore that concern IMO.

[mirka]

Do you think there's a point in preserving this? I think it's safe enough to change to 1 here. The stylelint disable makes it's look like it's meaningful.

[mirka]

Same here. Seems safe enough to change in this PR.

[ciampo]

I'm being extra careful in these migrations in order to maintain style parity, at least as a starting point. But both the line-height and the padding changes feel safe.

[mirka]

Suggested change

// Windows High Contrast mode will show this outline, but not the box-shadow.

Outdated?

[mirka]

Suggested change

	// Preserve legacy Theme and validated-control accent overrides.
	// Preserve validated-control accent overrides.

[mirka]

Nit: It reads very awkwardly right now, so if this going to grow into a list of components, we might as well start with a list format in this PR.