Components: Align legacy form control focus rings with WPDS

[ciampo]

Part of #80412.

What?

Aligns the shared focus ring used by legacy InputBase controls with @wordpress/ui for Phase 0 of #80412. It also prevents the DataViews filter operator SelectControl from clipping the new outset ring.

Why?

Legacy form controls need to look as close as possible to their @wordpress/ui replacements before consumer migrations begin. Their current adjacent border and box-shadow treatment differs from the UI outset ring.

Why the old style used box-shadow

Gutenberg's older focus convention combined a 1px border with a 0.5px shadow to produce the specified 1.5px stroke (#54394, #54398), when rounded outlines were not yet reliable across supported browsers. It was a consistency technique, not an InputControl requirement. Because box-shadows are not visible in Windows High Contrast Mode, the legacy style also needed a transparent outline fallback (#50772). The WPDS outline now provides the intended outset shape and forced-colors behavior directly.

How?

• Moves the shared InputBase focus treatment from Emotion to package Sass and applies outset-ring__focus(), using the same --wpds-border-width-focus and --wpds-color-stroke-focus tokens and generated fallbacks as @wordpress/ui.
• Preserves suppression of the input ring while an interactive prefix or suffix has focus.
• Audits Gutenberg overrides: existing sizing, padding, typography, background, border, and validation styles remain compatible. The only clipping case was DataViews; replacing overflow: hidden with min-width: 0 preserves its flex sizing while allowing the ring to paint outside.
• Documents the user-facing alignment in the Components changelog.

Testing Instructions

Run:

npm run lint:css
npm run lint:js -- packages/components/src/input-control/styles/input-control-styles.tsx
npm run test:unit -- packages/components/src/input-control packages/components/src/select-control packages/components/src/custom-select-control
npm run build

In Storybook and relevant editor surfaces, focus these controls and compare their outset rings with their @wordpress/ui equivalents:

Group	Affected controls
Shared primitives	InputControl, SelectControl, CustomSelectControl (legacy wrapper and v2 implementation)
Direct composites	NumberControl, SearchControl, UnitControl, RangeControl (including its input field), AnglePickerControl, TreeSelect
Compound consumers	ColorPicker, ColorPalette, CustomGradientPicker, GradientPicker, TimePicker, DateTimePicker, PaletteEdit, FontSizePicker, BorderControl, QueryControls
Validated variants	ValidatedInputControl, ValidatedNumberControl, ValidatedSelectControl, ValidatedCustomSelectControl, ValidatedRangeControl

Check the behavior-sensitive cases:

• An interactive prefix or suffix, including the UnitControl unit selector, suppresses the surrounding input ring.
• The joined TimePicker hour/minute fields and customized PaletteEdit name field have the correct ring shape without clipping.
• An invalid validated control keeps its error border while focus uses the WPDS focus color.
• A DataViews filter with multiple operators does not clip the focused operator selector.
• The ring remains visible with forced-colors emulation enabled.

Testing Instructions for Keyboard

1. Use Tab to focus each affected form-control type and confirm a clearly visible outset ring appears.
2. For controls with interactive prefix or suffix content, move focus to that control and confirm the input ring is suppressed without removing the auxiliary control's own focus indicator.

Screenshots or screencast

Here are a few examlpes of the change that is being applied

Before	After

Use of AI Tools

Codex was used to inspect existing focus-ring patterns and history, audit affected consumers, implement the shared Sass change and clipping fix, run verification, and draft this pull request. The resulting diff and generated CSS were reviewed manually.

[github-actions]

Size Change: +131 B (0%)

Total Size: 7.73 MB

📦 View Changed

Filename	Size	Change
build/scripts/components/index.min.js	272 kB	-74 B (-0.03%)
build/styles/components/style-rtl.css	18.1 kB	+49 B (+0.27%)
build/styles/components/style-rtl.min.css	15 kB	+59 B (+0.39%)
build/styles/components/style.css	18.2 kB	+49 B (+0.27%)
build/styles/components/style.min.css	15 kB	+59 B (+0.39%)
build/styles/edit-site/style-rtl.css	21.4 kB	-2 B (-0.01%)
build/styles/edit-site/style-rtl.min.css	17.5 kB	-1 B (-0.01%)
build/styles/edit-site/style.css	21.4 kB	-2 B (-0.01%)
build/styles/edit-site/style.min.css	17.5 kB	-1 B (-0.01%)
build/styles/editor/style-rtl.css	31.3 kB	-3 B (-0.01%)
build/styles/editor/style.css	31.3 kB	-2 B (-0.01%)

_{compressed-size-action}

[ciampo]

Trying out a different approach that doesn't cut off the focus ring, but still lets SelectControl shrink inside the flex row despite white-space: nowrap

[github-actions]

Flaky tests detected in 1b83fe9.
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/29617798981
📝 Reported issues:

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

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

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