feat(radio): change focus ring to match round input

[lunarfusion]

Description

This uses a drop-shadow filter and clip path to create a round focus indicator on radio inputs.
Issue #278

Method

• A box-shadow can only apply square shadows to an element, resulting in a mismatched focus indicator. Screenshot of the original focus state:

• Instead of box-shadow, I used a drop-shadow filter. Drop-shadow filter does not yet support the spread variable that box-shadow has, so we cannot create the unblurred solid 2px shadow that box-shadow allows. Instead, I used 4 layered shadow filters which cover a wide enough area to build the focus indicator. Screenshot of the four layered shadow filters:

• The shadow is then limited to closely match the original 2 pixel solid box shadow spread by creating a circular clip path which slightly overshoots the edge of the component to allow approximately 2 pixels of shadow to show through:

How and where has this been tested?

• Chrome 106 for macOS
• Firefox 106 for macOS
• Safari 16 for macOS

Screenshots

Browser Compatibility

Although this is compatible with Safari, it is worth noting that an existing issue with the display of radio inputs in Safari results in cropping of the input. This was a pre-existing issue due to the width, height, and font size on the input. I recommend that this be resolved in a separate issue.

Safari screenshot:

Please let me know if any changes are needed and I would be glad to take care of it.

[changeset-bot]

🦋 Changeset detected

Latest commit: e6a5ad6

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
water.css	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR