Swatches
Pick one color from a few: radios drawn as colored circles. Each radio's value is its color and is what the form submits; each one needs a name for screen readers (aria-label). Specification: docs/components/swatches.md
The group is a role="radiogroup" named by its label, in a Field. Arrow keys move between the colors, as in any radio group.
Size
data-size on the field or a container: the swatches are the icon size, the box the height of a text input.
Expanding
data-collapse: only the chosen color shows, with a chevron. The group opens when it gets focus or the chevron is clicked, and closes when focus leaves, on Escape, or after a color is clicked. Without JavaScript every color shows.
Values that aren't colors
When the value is a name (a theme token, an id), set the color to show with style="--canon-swatch: …". The form submits the value.
States
Hover and focus are shown on the swatch. disabled on one radio, or on all of them.
Edge cases
Many colors in a narrow space
The swatches wrap inside the box.