HySwatch

A single selectable cell inside an hy-swatch-group.

hy-swatch is content-agnostic — it renders a sample (a color fill via the color attribute, or arbitrary default-slot content such as a gradient, image, or a dimension preview) plus a label. It has no knowledge of color math, ramps, or tokens; the parent group owns selection state, ARIA roles, roving tabindex, and keyboard interaction. Selection is shown by the cell's ring (border + background tint), not by color alone.

Label placement

• caption (default) — label sits below the sample. Serves dimension/size rungs.
• inset — label sits centered on the fill, with an auto-contrast treatment (mix-blend) so it stays legible on any color. Serves color ramps.

Used on its own, a swatch is presentational. Selection behaviour only exists inside hy-swatch-group.

Accessible naming

When a swatch carries only a color (no caption text), it MUST be given an accessible name — selection cannot rely on color alone (WCAG 1.4.1). Provide a label, a caption slot, or aria-label on the host (e.g. label="Brand 500" or aria-label="Sky blue, #4A90E2"). A dev-mode warning fires when a color-only swatch has no name.

Examples

Color cell (inset label)

<hy-swatch
  value="500"
  color="#4A90E2"
  label="500"
  label-placement="inset"
  aria-label="Brand 500"
></hy-swatch>

Non-color cell (dimension rung)

<hy-swatch value="spacing.sp3" label="12px">
  <div class="rung-preview"></div>
</hy-swatch>

Slots

• default - Custom sample content (gradient, image, dimension preview). Overrides the color fill.
• caption - Rich caption content below the sample. Overrides the label attribute.