Drawer

An edge-anchored overlay panel (a "sheet") that slides in from a screen edge — for filters, detail views, mobile nav, side forms. Shares Dialog's modal mechanics (portal, scroll-lock, focus trap, backdrop, role="dialog") but pins to a side. A pure shell — put a Card (or anything) inside.

Sides

Slides in from left / right / top / bottom.

<script>
  let open = $state(false);
  let side = $state('right');
</script>

<Drawer bind:open {side} />

With content (a Card)

<script>
  import { Drawer, Button } from '@spaethtech/svelte-ui';
  let open = $state(false);
</script>

<Button text="Open drawer" onclick={() => (open = true)} />

<Drawer bind:open side="right" size="22rem" ariaLabel="Settings">
  <!-- any content — often a Card -->
</Drawer>