@ryanhelsing/ry-ui/docs/components/number-select.md

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

# Number Select

## `<ry-number-select>`

Numeric stepper with increment/decrement buttons and optional drag-to-adjust.

| Attribute | Values | Description |
|-----------|--------|-------------|
| `min` | number | Minimum (default: 0) |
| `max` | number | Maximum (default: 100) |
| `step` | number | Step (default: 1) |
| `value` | number | Current value |
| `arrows` | both \| start \| end \| stacked \| stacked-end \| stacked-start \| none | Button placement |
| `icons` | plus-minus \| chevron \| arrow | Icon style |
| `drag` | x \| y \| none | Drag direction |
| `prefix` | string | Before value ("$") |
| `suffix` | string | After value ("°", "%") |
| `editable` | boolean | Allow typing directly |
| `wrap` | boolean | Wrap around min/max |
| `size` | xs \| sm \| lg | Size |
| `disabled` | boolean | Disable |

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

```html
<ry-number-select min="0" max="100" value="50"></ry-number-select>
<ry-number-select min="0" max="360" value="90" suffix="°" arrows="stacked" icons="chevron"></ry-number-select>
<ry-number-select min="0" max="1000" value="50" prefix="$" editable></ry-number-select>
<ry-number-select min="0" max="7" value="3" wrap></ry-number-select>
```

JS:
```js
const ns = document.querySelector('ry-number-select');

ns.addEventListener('ry:input', (e) => console.log(e.detail.value));
ns.addEventListener('ry:change', (e) => console.log(e.detail.value));

ns.value;      // 50
ns.value = 75;
ns.step = 5;
```