```astro
---
---
```
## API Reference
### Events
The dialog emits custom events that you can listen to:
| Event | Detail | Description |
|-------|--------|-------------|
| `dialog:change` | `{ open: boolean }` | Fired when the open state changes |
```astro nocollapse
```
```js nocollapse
const dialog = document.getElementById('my-dialog');
dialog.addEventListener('dialog:change', (e) => {
console.log('Is open:', e.detail.open);
});
```
### Programmatic Control
You can control the dialog programmatically by dispatching a `dialog:set` event:
```js nocollapse
const dialog = document.getElementById('my-dialog');
// Open the dialog
dialog.dispatchEvent(new CustomEvent('dialog:set', {
detail: { open: true }
}));
// Close the dialog
dialog.dispatchEvent(new CustomEvent('dialog:set', {
detail: { open: false }
}));
```
### Data Attributes
The dialog sets these data attributes that you can use for styling or querying state:
| Attribute | Element | Description |
|-----------|---------|-------------|
| `data-state` | dialog | Current state (`open` or `closed`) |