Drawer

Example

<button
	type="button"
	data-slean="button"
	data-variant="outline"
	commandfor="drawer-filters"
	command="show-modal"
>
	Filters
</button>

<dialog
	id="drawer-filters"
	data-slean="drawer"
	data-slean-side="right"
	closedby="any"
	aria-labelledby="drawer-filters-title"
>
	<header data-slean-part="header">
		<h2 id="drawer-filters-title" data-slean-part="title">Filters</h2>
		<p data-slean-part="description">Narrow the list of people.</p>
	</header>
	<div data-slean-part="body">
		<fieldset>
			<legend>Team</legend>
			<label><input type="checkbox" name="team" value="engineering" data-slean="checkbox" /> Engineering</label>
			<label><input type="checkbox" name="team" value="design" data-slean="checkbox" /> Design</label>
			<label><input type="checkbox" name="team" value="operations" data-slean="checkbox" /> Operations</label>
			<label><input type="checkbox" name="team" value="growth" data-slean="checkbox" /> Growth</label>
		</fieldset>
	</div>
	<footer data-slean-part="footer">
		<button
			type="button"
			data-slean="button"
			data-variant="outline"
			commandfor="drawer-filters"
			command="close"
		>
			Close
		</button>
	</footer>
	<button
		type="button"
		data-slean-part="close"
		commandfor="drawer-filters"
		command="close"
		aria-label="Close"
	></button>
</dialog>

<script lang="ts">
	// Nothing to import: the browser owns the dialog. The stylesheets are optional.
	import '@svelte-lean/styles/button.css';
	import '@svelte-lean/styles/checkbox.css';
	import '@svelte-lean/styles/drawer.css';
</script>

<button
	type="button"
	data-slean="button"
	data-variant="outline"
	commandfor="drawer-filters"
	command="show-modal"
>
	Filters
</button>

<dialog
	id="drawer-filters"
	data-slean="drawer"
	data-slean-side="right"
	closedby="any"
	aria-labelledby="drawer-filters-title"
>
	<header data-slean-part="header">
		<h2 id="drawer-filters-title" data-slean-part="title">Filters</h2>
		<p data-slean-part="description">Narrow the list of people.</p>
	</header>
	<div data-slean-part="body">
		<fieldset>
			<legend>Team</legend>
			<label><input type="checkbox" name="team" value="engineering" data-slean="checkbox" /> Engineering</label>
			<label><input type="checkbox" name="team" value="design" data-slean="checkbox" /> Design</label>
			<label><input type="checkbox" name="team" value="operations" data-slean="checkbox" /> Operations</label>
			<label><input type="checkbox" name="team" value="growth" data-slean="checkbox" /> Growth</label>
		</fieldset>
	</div>
	<footer data-slean-part="footer">
		<button
			type="button"
			data-slean="button"
			data-variant="outline"
			commandfor="drawer-filters"
			command="close"
		>
			Close
		</button>
	</footer>
	<button
		type="button"
		data-slean-part="close"
		commandfor="drawer-filters"
		command="close"
		aria-label="Close"
	></button>
</dialog>

Why this implementation exists

A drawer is a modal dialog with a different geometry. Built in script it takes a portal, a focus trap, a scroll lock, an outside-click listener and an animation. <dialog> opened with showModal() already has the top layer, the inert page, Escape and focus return, and closedby="any" adds the outside click.

Svelte Lean adds the geometry in CSS: the edge from data-slean-side, the full height of a side panel or the full width of a sheet, a slide on translate that starts from @starting-style, and padding for the screen’s safe areas.

Usage

The markup needs no package. Install @svelte-lean/styles for the stylesheet; @svelte-lean/primitives adds the typed contract and nothing at runtime.

npm install @svelte-lean/styles

pnpm add @svelte-lean/styles

yarn add @svelte-lean/styles

bun add @svelte-lean/styles

import '@svelte-lean/styles/drawer.css';

Open with command="show-modal" and close with command="close". closedby="any" closes the drawer on a backdrop click where it is implemented; keep a visible close action for the browsers without it and for touch screens.

data-slean-side is right (the default), left, top or bottom. The side is physical: in a right-to-left page, choose the edge you want.

Put the scrolling content in the body part; the header and the footer stay in place.

Anatomy

Runtime profile

Tier 0: the drawer has no behavior module, and the Vite plugin maps drawer to no module. Opening, closing, light dismiss and focus are the browser’s; the slide is a CSS transition.

Accessibility contract

• An accessible name from aria-labelledby on the title.
• Focus moves to the first focusable element, or to the one with autofocus, and returns to the invoker when the drawer closes.
• The rest of the page is inert while the drawer is open; Tab and Shift+Tab stay inside it.
• Escape closes the drawer in every browser; the visible close action covers touch screens and browsers without light dismiss.
• Under reduced motion the duration tokens are zero, so the drawer appears and leaves without sliding.

Keyboard

Platform features

Without JavaScript

With invoker commands supported, the drawer opens and closes with no script at all. Without invoker commands and without script it stays closed, so content that must be reachable does not belong only in a drawer.

Server rendering

Static HTML. A modal drawer opens on the client only; the server renders it closed.

Before hydration

Nothing is attached. Where invoker commands are supported, the drawer opens before hydration as it does after.

Styling

drawer.css fixes the drawer to its edge, sizes it (a side panel at most 24rem wide, a sheet as tall as its content up to 32rem), slides it on translate with @starting-style and allow-discrete transitions of display and overlay, fades the backdrop and pads the screen edges with env(safe-area-inset-*). The tokens it reads:

State selectors the stylesheet targets, all from the platform or ARIA: ::backdrop, :hover, [open].

Variant attributes: data-slean-side (left, top, bottom).

Compatibility notes

Invoker commands shipped in Chrome 135, Safari 26 and Firefox 144 during 2025. closedby is implemented in Chrome 134 and Firefox 141 and not in Safari 27, where a backdrop click does nothing and Escape and the close action still close the drawer. Safari 27 has no overlay either: there the backdrop disappears at once and the exit slide is drawn in the page’s stacking order.

Examples

Sides

data-slean-side picks the edge. A side panel takes the full height; a top or bottom sheet takes the full width and the height of its content. The side is physical and does not flip in a right-to-left page.

<!-- data-slean-side: right (default), left, top or bottom. The side is physical. -->
<dialog id="drawer-menu" data-slean="drawer" data-slean-side="left" closedby="any"
	aria-labelledby="drawer-menu-title">…</dialog>

<dialog id="drawer-notice" data-slean="drawer" data-slean-side="top" closedby="any"
	aria-labelledby="drawer-notice-title">…</dialog>

<dialog id="drawer-share" data-slean="drawer" data-slean-side="bottom" closedby="any"
	aria-labelledby="drawer-share-title">…</dialog>

Testing

• apps/playground/tests/primitives/inputs-overlays.spec.ts Playwright, with page JavaScript enabled and disabled, and axe
• packages/styles/tests static checks of the stylesheet (layers, tokens, specificity, dark parity)

Source

• packages/primitives/src/drawer/contract.md the contract in prose: semantics, keyboard, focus, ARIA, SSR, JS-disabled behavior
• packages/primitives/src/drawer/contract.ts typed constants: name, tier, base, parts, options, events
• packages/styles/css/drawer.css the optional stylesheet