Prototype Library

Side Dialog

A slide-in drawer / side sheet. Full-height panel fixed to a side edge, with its own backdrop, focus trap, Esc-to-close, and focus restore — the modal mechanics of a dialog with edge-anchored layout.

Inherited wc import '@esa/ecology/esa-side-dialog';

Preview

Drawer body content goes here. It scrolls if it overflows, with the header and footer pinned.

Use it for filters, detail panes, and create/edit forms that don't warrant a full page.

 
<button id="open-sd">Open drawer</button>
<esa-side-dialog id="sd" heading="Filters" position="right">
  <p>Drawer body content…</p>
  <button slot="footer">Apply</button>
</esa-side-dialog>

Positions & sizes

Slides from left or right; width via size (sm 320 · md 400 · lg 520).

<esa-side-dialog position="left" size="sm" heading="Left, sm">…</esa-side-dialog>

API

PropTypeDefaultDescription
heading string — Title shown in the header.
position 'left' | 'right' 'right' Edge the drawer slides in from.
size 'sm' | 'md' | 'lg' 'md' Panel width — 320 / 400 / 520px.
show-close-button boolean true Render the header close (✕) button.

Methods

PropTypeDefaultDescription
show() method — Open the drawer.
close() method — Close it (restores focus, emits `close`).

Events

EventTypeDefaultDescription
close CustomEvent — Fired when the drawer closes (Esc, backdrop, or close button).

Accessibility

  • role="dialog" + aria-modal; labelled by the heading.
  • Focus is trapped within the panel; Tab/Shift+Tab cycle, Esc closes, and focus is restored to the trigger on close.
  • The backdrop click and the ✕ button both close.