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 |
Tokens
CSS custom properties zyra-drawer reads at runtime — override any of these in your own stylesheet after @use 'zyra-ng-ui'; to restyle it without touching the component itself.
| Token | Default points to | Description |
|---|---|---|
Backdrop--zyra-color-overlay-scrim | var(--zyra-color-overlay-bg) | Fill color of the scrim behind the panel. |
Panel background--zyra-color-drawer-bg | var(--zyra-color-surface) | Fill color of the slide-in panel. |
Panel text--zyra-color-drawer-text | var(--zyra-color-foreground) | Base text color inside the panel. |
Panel border--zyra-color-drawer-border | var(--zyra-color-border-color) | Border color of the panel edge, header divider, and footer divider. |
Panel shadow--zyra-drawer-shadow | var(--zyra-shadow-md) | Drop shadow behind the slide-in panel — its own token, not borrowed from Card. |
Close button--zyra-color-foreground-muted | var(--zyra-color-text-muted) | Color of the close × button in its resting state. |
Focus ring--zyra-ring | var(--zyra-focus-ring) | Outline color when the close button is keyboard-focused. |
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