Actions & Overlays

Drawer

An off-canvas panel built on the native <dialog>.

stableEnhancer: enhanceDrawerBuilt on <dialog>hydrateless/drawer.css

An off-canvas panel built on the native <dialog> element, sliding in from the start or end edge. data-hl-side is logical, so end is the right edge in left-to-right pages and the left edge in right-to-left pages. It mirrors the modal, opening with command="show-modal" and closing with command="close", and its slide animation respects prefers-reduced-motion.

Playground

Click the backdrop or press Esc to close. With JS off, backdrop dismissal requires native closedby support.

Live

Settings

A drawer slides in from the chosen edge. Press Escape or choose Close to dismiss it.

Sideendstart

JavaScript

This component ships an optional enhancer. With auto-init it loads automatically; to wire it yourself, import it directly:

import { enhanceDrawer } from '@hydrateless/enhancers/drawer';

const handle = enhanceDrawer(document);
// handle.api  -> imperative controls
// handle.destroy()  -> tear everything down

Props

The framework bindings expose these props (and forward the rest to the root element).

Prop	Type	Default	Description
open	boolean	Not set	Controlled visibility; pair with `onOpenChange` (Vue: `v-model:open`, Svelte: `bind:open`).
defaultOpen	boolean	false	Uncontrolled initial visibility.
onOpenChange	(open: boolean) => void	Not set	Called after the drawer opens or closes, including native `Esc` and backdrop dismissal.
side	'start' | 'end'	'end'	Logical edge the panel anchors to; mirrors automatically under `dir="rtl"`.
closeOnBackdrop	boolean	true	Sets `closedby="any"` so clicking the backdrop dismisses the drawer.

Events and callbacks

Event / Callback	Payload	Description
hl:open-change	{ open: boolean }	Fires whenever the drawer opens or closes.

CSS variables

Override these on any ancestor to theme the component. See the theme studio to preview changes live.

CSS variable	Used for
--hl-surface	Panel background.
--hl-scrim	Backdrop color.
--hl-overlay-inline-size	Panel width.
--hl-overlay-shadow	Panel elevation.

Accessibility

• Built on <dialog>, so focus trapping, inert background, and Esc to close are native, and focus returns to the invoker on close.
• The slide animation collapses to an instant switch under prefers-reduced-motion.

Related

ModalA dialog overlay built on the native <dialog> element.PopoverFloating content anchored to a trigger.