A `ColorSwatch` is one colour shown as a square. It is a preview rather than a control: it has no
press, focus or selected state, and it is the shape a palette picker, a role row or a theme card builds
on.

```tsx demo="data-display/color-swatch-preview"
```

## Usage

```tsx
import { ColorSwatch } from "asheeui";

<ColorSwatch color="#2563eb" label="Primary" />;
```

The colour is **data**, so it is painted with a style value rather than a class name. That is what
lets a runtime theme put a reader's hex value here without generating a Tailwind class per colour. The
component expects a portable value (`#rgb`, `#rrggbb`, `rgb()`); an invalid value paints nothing.

`size` and `radius` are the framework's shared token names, so a swatch follows the product's density
and corner language:

```tsx
<ColorSwatch color="#0ea5e9" size="lg" radius="full" label="Ocean" />
```

## Labelled or decorative

`label` decides how the swatch appears to assistive technology.

- **With a label**, the swatch is one image whose accessible name is the label. Use it when the colour
  is the information, a palette role, a saved theme's primary colour, a selected colour.
- **Without a label**, the swatch is decoration and is hidden from assistive technology. Use it when
  the surrounding text already names the colour, a role row whose next cell says `Primary`, for example.

A label is not a tooltip: it is never drawn on screen and does not replace visible text. If a reader
needs to know which role a colour belongs to, put that in the surrounding layout as well.

## Props

```props ColorSwatch
```

`color` is required and is the only data prop. `size` is `sm`, `md` or `lg` (default `md`); `radius`
accepts the shared radius names and defaults to `sm`. `className` reaches the rendered element on both
platforms.

## Accessibility

- A labelled swatch exposes `role="img"` with the label as its accessible name on the web, and
  `accessibilityRole="image"` plus `accessibilityLabel` on a device.
- An unlabelled swatch is hidden: `aria-hidden` on the web and not accessible on native. It never
  adds a nameless image to the accessibility tree.
- The colour itself is not announced, so the label has to carry the meaning. `Primary` is useful;
  `#2563eb` is not.
- There is no interaction state. If the swatch is part of a choice, wrap it in a `Chip`, `Button` or
  another control and let that control carry the press and selected semantics.

## Related

```related chip, badge, avatar
```