fix(radio-button): allow standalone usage with checked prop

[metonym]

Fixes #1879

Currently, RadioButton cannot be used standalone outside a RadioButtonGroup. Previously, the checked prop was read-only due to an unconditional reactive statement that always synced it with the group's state, even when no group existed.

The fix enables RadioButton to work in two modes:

1. Within a RadioButtonGroup where the group manages selection state as before
2. Standalone where the checked prop is fully bindable and can be updated programmatically or via user interaction. This allows developers to use individual radio buttons with bind:checked for simple use cases without requiring the group component.

This is a non-breaking change. Existing RadioButtonGroup tests should work, and new test coverage validates standalone usage.

---

radio-button-standalone.mov

[brunnerh]

Did you see my PR associated with the same issue?

I had some additional logic to notify the other radio buttons, think that was necessary to not have things go out of sync.

Unfortunately the change event does only fire for the newly selected radio button, not for the ones that are automatically unselected; this is why I used document.getElementsByName to find the associated ones.

[metonym]

I haven't.

I had some additional logic to notify the other radio buttons, think that was necessary to not have things go out of sync.

Could you clarify this scenario? If used individually, why would the component itself be responsible for other instantiations?

[brunnerh]

There would not really be much of a point having radio buttons in the first place unless they form a group (regardless of whether they use the group component, which affects layout in ways one might not want).

So if one of the radio buttons is checked, the others will be unchecked and their state should follow. Whether the state actually matters depends on the usage, e.g. if it is form that does not require JS it won't, but otherwise it might. To avoid inconsistent state, my PR sent events to the other instances of the group.

[brunnerh]

Example would be something like this:

<RadioButton name="billing-address-type" value="same"
	labelText="Same address as shipping address" />

<RadioButton name="billing-address-type" value="separate"
	labelText="Separate billing address"
	bind:checked={showBillingAddressFields} />

{#if showBillingAddressFields}
	[Fields]
{/if}

If the second radio is selected, additional fields should be shown.
If then the first radio is selected, the fields should be hidden again.

[brunnerh]

(Looks like you are quite active right now - it would be nice if you could take a look at all the dust collecting PRs.)

[metonym]

Fixed in v0.89.8