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

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

# Knob

## `<ry-knob>`

Rotary dial control. Great for audio/settings UIs.

| Attribute | Values | Description |
|-----------|--------|-------------|
| `min` | number | Minimum (default: 0) |
| `max` | number | Maximum (default: 100) |
| `step` | number | Step (default: 0 = smooth) |
| `value` | number | Current value |
| `label` | string | Label below knob |
| `labels` | string | Comma-separated labels for discrete steps |
| `description` | string | Tooltip on hover |
| `color` | primary \| secondary \| success \| warning \| danger | Track color |
| `size` | sm \| lg | Size |
| `disabled` | boolean | Disable |

Events: `ry:input` (during drag), `ry:change` (on release)

```html
<ry-knob min="0" max="100" value="50" label="Volume"></ry-knob>
<ry-knob min="0" max="3" step="1" value="1" labels="Off,Low,Med,High" label="Mode"></ry-knob>
<ry-knob value="60" color="warning" label="Warning"></ry-knob>
<ry-knob size="sm" value="25" label="Small"></ry-knob>
```

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

knob.addEventListener('ry:input', (e) => {
  updateVolume(e.detail.value); // fires during drag
});
knob.addEventListener('ry:change', (e) => {
  saveSettings({ volume: e.detail.value }); // fires on release
});

knob.value;      // 50
knob.value = 75;
```