Work in progress - do not use in production. This component is still being built: it is not flagged Ready for Dev, so its markup, attributes, events and styles can all still change without notice, it is not covered by the accessibility gate, and it is not published to npm. It is on this site so the work can be seen and reviewed - nothing more.

Drawer

An off-canvas panel built on the native <dialog>, rendered as <dialog is="root-drawer">.

Usage

<dialog is="root-drawer" side="end" label="Filters" open>
  <h2>Filters</h2>
  <p>Drawer content goes here.</p>
</dialog>

Open it modally (focus-trapped, with a backdrop) from script:

document.querySelector('[is="root-drawer"]').show();

Attributes

Attribute	Type	Default	Description
`side`	`'start' \| 'end' \| 'left' \| 'right' \| 'top' \| 'bottom'`	`'end'`	Edge the panel pins to (start/end are direction-aware)
`label`	`string`	-	Accessible name (mirrored to `aria-label`)
`open`	boolean	-	Native (non-modal) open state; use `show()` for a modal drawer

Events

Event	Detail	Description
`root-drawer.open`	-	Fired when opened modally via `show()`
`root-drawer.close`	-	Fired when closed (button, `Escape` or backdrop)

Accessibility

The backdrop click closes the drawer, except when it carries role="alertdialog" (a destructive confirmation) - that should only be dismissed by a deliberate button choice, not an accidental outside click. Page scroll is locked for as long as any modal <dialog> is open (foundations/_reset.css).

Extends

HTMLDialogElement - use with <dialog is="root-drawer">. Modal opening reuses the platform's focus trap, Escape handling, backdrop and top layer.