Sprint 4

Overlays

Modal variants for layered UI.

Modal

Centered dialog with backdrop blur. Closes on backdrop click or Esc. Variants: small / default / large / start / end.

Side Variants

The same component can behave like a drawer using variant="start" or variant="end".

Usage

Modal

<script>
  import Modal from '$lib/components/ui/Modal.svelte';
  let open = $state(false);
</script>

<button class="btn color-group-primary" onclick={() => open = true}>Open</button>

<Modal bind:open title="Confirm action" variant="default">
  {#snippet children()}
    <p>Are you sure you want to do this?</p>
  {/snippet}
  {#snippet footer()}
    <button class="btn" onclick={() => open = false}>Cancel</button>
    <button class="btn color-group-primary">Confirm</button>
  {/snippet}
</Modal>

Modal Variants

<script>
  import Modal from '$lib/components/ui/Modal.svelte';
  let open = $state(false);
</script>

<button class="btn color-group-primary" onclick={() => open = true}>Open</button>

<Modal bind:open title="Settings" variant="end">
  {#snippet children()}
    <p>Side panel content here.</p>
  {/snippet}
</Modal>

Rules

• Use bind:open para controlar o estado externamente
• onclose callback é chamado após fechar
• Use variant="small", default ou large para dialog central
• Use variant="start" ou variant="end" para painéis laterais
• O componente nativo Esc já fecha o dialog automaticamente