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

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

# Drawer

## `<ry-drawer>`

| Attribute | Values | Description |
|-----------|--------|-------------|
| `id` | string | Identifier (match button's `drawer` attr) |
| `side` | left \| right \| bottom | Slide direction |

Events: `ry:open`, `ry:close`
API: `.open()`, `.close()`, `.state`

```html
<ry-button drawer="nav">Menu</ry-button>

<ry-drawer id="nav" side="left">
  <h3>Navigation</h3>
  <ry-stack>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </ry-stack>
</ry-drawer>
```

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

drawer.addEventListener('ry:open', () => console.log('opened'));
drawer.addEventListener('ry:close', () => console.log('closed'));

// Programmatic
drawer.open();
drawer.close();
drawer.state; // "open" or "closed"
```