<!-- Confirmation dialog — tone palette -->
<Modal palette="tone" open={open} onclose={() => open = false}>
    {#snippet leading()}
        <span class="modal-title">Delete file</span>
    {/snippet}
    {#snippet children()}
        <p>Are you sure you want to delete «tokens.css»? This action is permanent and cannot be undone.</p>
    {/snippet}
    {#snippet trailing()}
        <Button palette="error" rounded onclick={() => open = false}>
            Delete
        </Button>
        <Button palette="tone" rounded onclick={() => open = false}>
            Cancel
        </Button>
    {/snippet}
</Modal>