@ryanhelsing/ry-ui/docs/components/color.md

Framework-agnostic, Light DOM web components. CSS is the source of truth.

# Color Components

## `<ry-color-picker>`

Full color picker with saturation/hue panel.

| Attribute | Values | Description |
|-----------|--------|-------------|
| `value` | color string | Initial color (hex, rgb, hsl) |
| `format` | hex \| rgb \| hsl | Output format (default: hex) |
| `inline` | boolean | Always visible (no dropdown) |
| `opacity` | boolean | Enable alpha channel |
| `swatches` | string | Preset colors separated by `;` |
| `disabled` | boolean | Disable |

Events: `ry:input` (during drag), `ry:change` (on release)
API: `.value`, `.rgb`, `.hsl`, `.hsv`, `.setColor(str)`

```html
<ry-color-picker value="#3b82f6"></ry-color-picker>
<ry-color-picker value="#3b82f6" opacity inline swatches="#ef4444;#22c55e;#3b82f6"></ry-color-picker>
```

JS:
```js
const picker = document.querySelector('ry-color-picker');

picker.addEventListener('ry:input', (e) => {
  console.log(e.detail.value); // "#3b82f6"
  console.log(e.detail.rgb);   // { r: 59, g: 130, b: 246 }
  console.log(e.detail.hsv);   // { h: 217, s: 76, v: 96 }
});

picker.value = '#ff0000';
picker.setColor('hsl(200, 100%, 50%)');
picker.rgb;  // { r, g, b }
picker.hsl;  // { h, s, l }
```

## `<ry-color-input>`

Compact swatch + editable hex input.

| Attribute | Values | Description |
|-----------|--------|-------------|
| `value` | color string | Initial color |
| `format` | hex \| rgb \| hsl | Output format |
| `opacity` | boolean | Enable alpha |
| `disabled` | boolean | Disable |

Events: `ry:change` — `e.detail.value`

```html
<ry-color-input value="#3b82f6"></ry-color-input>
<ry-color-input value="rgba(139, 92, 246, 0.8)" opacity></ry-color-input>
```

## `<ry-gradient-picker>`

CSS gradient editor with draggable color stops.

| Attribute | Values | Description |
|-----------|--------|-------------|
| `value` | CSS gradient string | Initial gradient |
| `output` | boolean | Show CSS output |
| `disabled` | boolean | Disable |

Events: `ry:input`, `ry:change` — `e.detail.value`, `e.detail.stops`, `e.detail.type`, `e.detail.angle`
API: `.value`, `.type`, `.angle`, `.stops`, `.addStop(color, pos)`, `.removeStop(id)`

```html
<ry-gradient-picker value="linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%)"></ry-gradient-picker>
<ry-gradient-picker value="radial-gradient(circle, #fbbf24 0%, #dc2626 100%)"></ry-gradient-picker>
```

JS:
```js
const picker = document.querySelector('ry-gradient-picker');
picker.value; // "linear-gradient(90deg, ...)"
picker.type;  // "linear" | "radial"
picker.angle; // 0-360
picker.stops; // [{ id, color, position }, ...]
picker.addStop('#ff00ff', 50);
```