Correct width of checkboxes with drop down select

[balibirchlee]

What is the context of this PR?

Fixes: #3181

Details of changes:

• Standardises widths of checkboxes & radios with revealed selects.

Reasoning for decisions:

• Moves CSS from Radio to Checkboxes as this is where radio extends its CSS from.
• Uses min-width rather than width to prevent it restricting the size of the feedback patterns which are wider than 25rem.
• Uses :has(select) to identify when a radio/checkbox has a hidden select component, then uses :first-child to ensure it's only set on one parent element of that select, rather than all of them (which creates visual errors).

Relevant issues/discussions:

• I will add a note to the tech session agenda to say that the mutually exclusive component needs reconsidering (personally I think it's a pattern - and one that needs a refactor probably).

How to review this PR

Visual inspection: Components/Patterns to Check

• Checkboxes & Radios examples with 'revealed-select'
• Feedback: Form & Form-Errors

Actions

• Make sure to click the select!

Desired Behaviour

• Width should stay stable for all options including on click (no jumping in size, no size differences between different options).

Relevant tests:

• VR test!

Special attention:

• Double check the changes to the vr snapshots.

Checklist

This needs to be completed by the person raising the PR.

• [x] I have selected the correct Assignee
• [x] I have linked the correct Issue

[netlify[bot]]

✅ Deploy Preview for ons-design-system-preview ready!

Name	Link
🔨 Latest commit	82ceedbd74330893f0d5cde44f2c73c5355b18f4
🔍 Latest deploy log	https://app.netlify.com/sites/ons-design-system-preview/deploys/665dbb6f0611c20008881d3d
😎 Deploy Preview	https://deploy-preview-3212--ons-design-system-preview.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.