HySwatchGroup

A width-adaptive, accessible grid of selectable [object Object] cells.

hy-swatch-group is content- and domain-agnostic — it knows nothing about color, ramps, or tokens. It lays out a reflowing grid of hy-swatch children, owns selection state and ARIA semantics, and reports the picked value(s) via a single change event. The same component backs color stop ramps and non-color ramps (spacing / radius / size rungs) alike.

Selection model (ARIA)

• selection-mode="single" → radio-group: container role="radiogroup", cells role="radio" + aria-checked. Arrow keys move and select.
• selection-mode="multiple" → listbox: container role="listbox"aria-multiselectable, cells role="option" + aria-selected. Arrow keys move; Space/Enter toggles.
• selection-mode="none" → display-only role="group"; cells inert.

Keyboard

Roving tabindex (the group is a single Tab stop). Arrow keys navigate the 2D grid (←/→ within a row, ↑/↓ across rows), Home/End jump to first/last, Space/Enter select. Disabled cells are skipped. Row math tracks the live column count, so navigation stays correct as the grid reflows in a resizable panel.

Width adaptiveness

The host is a CSS container. With columns="auto" (default) the grid reflows via auto-fit and never overflows; a numeric columns pins a fixed count.

Examples

Color ramp (single-select)

<hy-swatch-group label="Brand stops" value="500">
  <hy-swatch value="400" color="#7AB" label="400" aria-label="Brand 400"></hy-swatch>
  <hy-swatch value="500" color="#48A" label="500" aria-label="Brand 500"></hy-swatch>
</hy-swatch-group>

Events

• change - Fired when the selection changes. Detail: { selectedValues: string[], reason: StateChangeReason }

Slots

• default - The hy-swatch cells.

Methods

focus()

Focus the selected cell, or the first enabled cell.