Add breaks between radios in Radio Group examples

[lindsaym-fa]

Fixes some unsightliness in the Radio Group docs by adding breaks between <wa-radio>s in the examples.

Before:

After:

As a more substantial improvement, I'd love to offer some layout options for <wa-radio-group> to arrange the controls within either vertically or horizontally with reasonable default gaps that can be overridden, but that might be best considered following #504.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
webawesome	✅ Ready (Inspect)	Visit Preview	Jan 24, 2025 7:04pm

[claviska]

@lindsaym-fa break do you think we should wrap the default slot with a flex container, add a gap, and add an orientation attribute that sets flex-direction? Or did you have another idea?

This is fine to merge in the meantime :)

[LeaVerou]

As a more substantial improvement, I'd love to offer some layout options for <wa-radio-group> to arrange the controls within either vertically or horizontally with reasonable default gaps that can be overridden, but that might be best considered following #504.

Ha, I just suggested orientation for radio-group in #504 without having seen this! And yes, it should probably default to vertical.

[lindsaym-fa]

do you think we should wrap the default slot with a flex container, add a gap, and add an orientation attribute that sets flex-direction? Or did you have another idea?

@claviska That's exactly what I was thinking. How we allow folks to override the gap was the only thing stalling me, but now that I've stepped away from it, I realize that targeting ::part(form-control-input) would probably work just fine.

[LeaVerou]

Why not just setting gap on radio-group? That seems to be the most straightforward option.