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

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

# Modal

## `<ry-modal>`

| Attribute | Values | Description |
|-----------|--------|-------------|
| `id` | string | Identifier (match button's `modal` attr) |
| `title` | string | Header title |

Put `close` attribute on any button inside to dismiss. Uses focus trapping.

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

```html
<ry-button modal="demo">Open</ry-button>

<ry-modal id="demo" title="Confirm">
  <p>Are you sure?</p>
  <footer>
    <ry-button variant="ghost" close>Cancel</ry-button>
    <ry-button>OK</ry-button>
  </footer>
</ry-modal>
```

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

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

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