Drawer
Slide-in panel anchored to any edge of the screen, sharing zyra-modal's focus trap and dismiss behavior.
API
All inputs and configuration options for zyra-drawer.
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Two-way bound visibility state via [(open)] |
side | 'left' | 'right' | 'top' | 'bottom' | 'right' | Edge of the viewport the panel slides in from |
size | 'sm' | 'md' | 'lg' | 'md' | Maximum width for left/right panels |
title | string | '' | Panel heading displayed in the header |
dismissible | boolean | true | Shows a close × button and allows ESC / backdrop click to close |
closed (output) | void | - | Emits after the drawer finishes closing |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Renders with role="dialog" and aria-modal="true"
- Focus is trapped inside the panel while open; ESC closes it
- Panel width is capped with max-width and falls back to 100% on narrow viewports