Drawer

<Button onclick={() => (footerOpen = true)}>Open with Footer</Button>
<Drawer bind:open={footerOpen} title="Confirm Changes">
  <p>Are you sure you want to apply these changes? This action cannot be undone.</p>
  {#snippet footer()}
    <Button variant="ghost" onclick={() => (footerOpen = false)}>Cancel</Button>
    <Button intent="primary" onclick={() => (footerOpen = false)}>Confirm</Button>
  {/snippet}
</Drawer>

<Button onclick={() => (settingsOpen = true)}>Open Settings</Button>
<Drawer bind:open={settingsOpen} title="Settings" placement="right" size="sm">
  <div class="space-y-4">
    <Input label="Display name" placeholder="Your name" />
    <Input label="Email" placeholder="name@example.com" type="email" />
    <Separator />
    <Toggle label="Email notifications" checked />
    <Toggle label="Dark mode" />
    <Toggle label="Analytics" checked />
  </div>
  {#snippet footer()}
    <Button variant="ghost" onclick={() => (settingsOpen = false)}>Cancel</Button>
    <Button intent="primary" onclick={() => (settingsOpen = false)}>Save</Button>
  {/snippet}
</Drawer>

<Button onclick={() => (navOpen = true)}>Open Menu</Button>
<Drawer bind:open={navOpen} title="Menu" placement="left" size="sm">
  <nav class="flex flex-col gap-1">
    {#each ['Dashboard', 'Projects', 'Team', 'Settings', 'Help'] as item (item)}
      <button
        class="text-text-primary hover:bg-surface-hover rounded-modify px-3 py-2.5 text-left text-sm transition-colors"
        onclick={() => (navOpen = false)}
      >
        {item}
      </button>
    {/each}
  </nav>
</Drawer>

<Drawer
  bind:open
  title="Filters"
  placement="right"
  size="sm"
  class="border-white/20 bg-white/10 text-white backdrop-blur-xl"
  slotClasses={{
    backdrop: 'bg-linear-to-br from-fuchsia-600/50 via-purple-600/50 to-indigo-700/50',
    header: 'border-white/15',
    title: 'text-white',
    closeButton: 'text-white/70 hover:bg-white/10',
    footer: 'border-white/15'
  }}
>
  …
</Drawer>