bug(focus): apply per-component focus styles on focus classes

[dancormier]

This PR applies custom focus styles set on specific components to their relevant atomic focus class. This ensures that when an atomic focus class is added to one of these components (or their children when applicable), they gain the correct styles.

Example (Muted button)

Not the .focus-inset-bordered on the markup below. It should render the button as if it is focused. In the "before" example, you'll see that the button did not receive the background color and font color you'd expect to see with this class added and when this button is focused.

<button class="s-btn s-btn__dropdown s-btn__icon s-btn__muted focus-inset-bordered" role="presentation">
    <svg …> …</svg>
    Button
<button>

Before

After

[netlify[bot]]

✅ Deploy Preview for stacks ready!

Name	Link
🔨 Latest commit	a04017205f48aff91cdd2387a9d7d9bc662657eb
🔍 Latest deploy log	https://app.netlify.com/sites/stacks/deploys/65f49b143123f000070398b0
😎 Deploy Preview	https://deploy-preview-1680--stacks.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.