@agala-labs/ui

Drawer

Presents a focused task from an edge of the viewport.

Examples

Default

<AgalaDrawer :open="open" title="Inventory filters" @close="open = false">…</AgalaDrawer>

Import

import { AgalaDrawer } from '@agala-labs/ui'

API

Prop	Type	Default	Description
open	boolean	—	Required controlled visibility.
title	string	—	Visible and accessible drawer heading.
placement	'left' | 'right' | 'top' | 'bottom'	'right'	Viewport edge and enter/leave direction.
size	string	—	CSS size value, clamped to the viewport.
dismissible	boolean	true	Allows backdrop dismissal and shows the close button.
escapeCloses	boolean	true	Allows Escape dismissal independently.
class	string	—	Consumer override class.

Events

• close

Slots

• header
• default
• footer — receives { close }

Accessibility

Traps focus while present, keeps background scrolling locked through the leave transition, then restores the opener. Entry and exit follow the configured edge and reduced motion removes meaningful travel.