semantic-palette

Preview a palette in use as VB semantic roles — button, link, badge, alert — each with its own WCAG contrast chip. Editing happens upstream in or .

Overview

The <semantic-palette> component is a live preview. Give it a palette — either as a child <color-palette>, a child <palette-generator>, or a colors attribute — and it renders one preview card per semantic role (primary, secondary, accent, and optional status roles). Each card shows the color in use (button, link, badge for brand roles; alert, solid badge, inline for status roles) with a per-pairing WCAG chip next to each sample.

There are no hex inputs, no OKLCh inputs, and no drag-to-reassign inside this component — editing happens upstream. To let users change a color, pair it with <color-palette editable>.

Attributes

Attribute	Type	Default	Description
`colors`	string	—	Comma-separated hex palette (fallback when no child `<color-palette>` or `<palette-generator>`).
`roles`	string	`primary,secondary,accent`	Comma-separated roles in assignment order (positional — `colors[0]` is assigned to `roles[0]`). Valid: `primary`, `secondary`, `accent`, `success`, `warning`, `error`, `info`.
`show-export`	boolean	—	Show Copy Theme CSS / Copy JSON toolbar.
`label`	string	—	Optional heading label above the previews.

Context over abstract numbers

A contrast ratio only means something when you know which pair it measures. Each card shows three real samples and labels the ratio for each:

Brand roles (primary, secondary, accent): Button (role as background) · Link on surface (role as foreground) · Subtle badge (tinted pair).
Status roles (success, warning, error, info): Alert (role text on role subtle) · Solid badge (auto-picked foreground on role) · Inline status (role as text on surface).

If a combination fails WCAG, you see the failure where the user would actually encounter it — not as an abstract number in a column.

All seven roles

Pass all seven roles to produce a complete theme preview.

Wire to palette-generator

Nest a <palette-generator> inside to source colors algorithmically. The preview updates whenever the generator emits palette-generator:generate.

Export Format

The Copy Theme CSS button emits a :root block ready to paste into a VB theme file. Brand roles write hue/lightness/chroma seeds (so all derived tokens like -hover, -active, -subtle follow); status roles write explicit oklch() values.

The Copy JSON button emits a role → hex object, handy for design tokens pipelines.

Events

Event	Detail	Description
`semantic-palette:change`	`{ mapping, tokens, source }`	Fires on initial render and whenever the upstream palette emits a change. `source` is one of `init`, `palette`, `attribute`.

Accessibility

Each card is an <article> with an aria-label naming the role.
Sample buttons use tabindex="-1" — they're decorative previews, not interactive.
Contrast chips include text labels (AAA/AA/Fail) alongside color — never color-only communication.
Editing the palette is a responsibility of the upstream <color-palette editable> or <palette-generator>, which handle their own accessibility.