improvement: enrich selection controls guidelines (Checkbox, Toggle, Radio, Select)

[Cuervino]

Summary

Adds and rewrites Storybook guidelines for the four main selection controls, with a new shared page to help choose the right control.

• Guidelines/Selection Controls — new decision guide comparing all four controls: interactive overview story showing all controls side by side, decision table, and label conventions per control
• Checkbox guideline — rewritten intro and usage patterns (enable/disable, multi-select in tables), full states section with AllStates and DisabledWithReason stories, cross-reference to Selection Controls. Playground removed from guideline.
• Toggle guideline — updated label convention (verb phrase vs feature name depending on layout), feedback guidance (when toggle state change is sufficient, when to use a toast, how to handle failures), simplified static state labels section with a minimal story instead of a full-page form
• Radio guideline — new page covering usage, layout flexibility (no strict rule on horizontal vs vertical), label convention (noun only), and state explanations including disabled checked as a locked value
• Select guideline — improved intro, label and placeholder conventions (contextual placeholders acceptable, generic ones to avoid), icons usage, disabled vs hidden options guidance, dropdown clipping fixed across all stories via a meta-level decorator
• `preview.js` — `['Guideline', '*']` sort order added for all four Inputs components so the Guideline tab always appears first

[bert-e]

Hello cuervino,

My role is to assist you with the merge of this
pull request. Please type @bert-e help to get information
on this process, or consult the user documentation.

Available options

name	description	privileged	authored
/after_pull_request	Wait for the given pull request id to be merged before continuing with the current one.
/bypass_author_approval	Bypass the pull request author's approval	⭐
/bypass_build_status	Bypass the build and test status	⭐
/bypass_commit_size	Bypass the check on the size of the changeset TBA	⭐
/bypass_incompatible_branch	Bypass the check on the source branch prefix	⭐
/bypass_jira_check	Bypass the Jira issue check	⭐
/bypass_peer_approval	Bypass the pull request peers' approval	⭐
/bypass_leader_approval	Bypass the pull request leaders' approval	⭐
/approve	Instruct Bert-E that the author has approved the pull request.		✍️
/create_pull_requests	Allow the creation of integration pull requests.
/create_integration_branches	Allow the creation of integration branches.
/no_octopus	Prevent Wall-E from doing any octopus merge and use multiple consecutive merge instead
/unanimity	Change review acceptance criteria from one reviewer at least to all reviewers
/wait	Instruct Bert-E not to run until further notice.

Available commands

name	description	privileged
/help	Print Bert-E's manual in the pull request.
/status	Print Bert-E's current status in the pull request TBA
/clear	Remove all comments from Bert-E from the history TBA
/retry	Re-start a fresh build TBA
/build	Re-start a fresh build TBA
/force_reset	Delete integration branches & pull requests, and restart merge process from the beginning.
/reset	Try to remove integration branches unless there are commits on them which do not appear on the source branch.

Status report is not available.

[bert-e]

Waiting for approval

The following approvals are needed before I can proceed with the merge:

• the author

• one peer

Peer approvals must include at least 1 approval from the following list:

• @hervedombya

• @ChengYanJin

• @JBWatenbergScality

• @ZiyangLinScality

• @damiengillesscality

• @MonPote

• @JeanMarcMilletScality

In general, to fix this kind of problem you should avoid ad‑hoc string replacement for escaping and instead either (1) use a standard encoder such as encodeURIComponent on the interpolated value, or (2) if you must use replace, use a global regular expression so that all occurrences are handled (/pattern/g), and ensure you also escape backslashes and any other relevant meta‑characters for the target context.

For this specific case, the safest and simplest fix without changing visible functionality is to ensure that every # in color is percent‑encoded before inserting it into the SVG data URL. The minimal change is to replace color.replace('#', '%23') with color.replace(/#/g, '%23'), which will encode all # characters while preserving the overall behavior for standard hex colors. An even more robust alternative would be const encodedColor = encodeURIComponent(color);, but that would also encode characters like (, ), and ,, which might alter behavior if the function is (now or in the future) passed CSS color formats that include those characters; so the least‑intrusive, targeted fix is to just make the existing replacement global.

All changes are confined to src/lib/components/radio/Radio.component.tsx, within the getDotSvgUrl helper. No new imports or additional helper methods are required.