Drawer

The .pl-c-drawer is an off-canvas panel that slides in from a viewport edge. It uses the native Popover API for top-layer rendering and light-dismiss, combined with @starting-style for a smooth enter/exit animation.

Semantic HTML

<button popovertarget="my-drawer">Open</button>

<div popover class="pl-c-drawer" id="my-drawer" data-side="end">
  <div class="pl-c-drawer__header">
    <h2 class="pl-c-drawer__title">Title</h2>
    <button popovertarget="my-drawer" aria-label="Close">x</button>
  </div>
  <div class="pl-c-drawer__body">Content</div>
  <div class="pl-c-drawer__footer">
    <button class="pl-c-button" data-variant="ghost">Cancel</button>
    <button class="pl-c-button" data-variant="primary">Save</button>
  </div>
</div>

Side variants

Class contract