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

<Popover
    bind:open
    onclose={() => { open = false; }}
    palette="tone"
    rounded
    elevation="subtle"
    direction="bottom"
    align="start"
>
    {#snippet trigger()}
        <Button onclick={() => { open = !open; }}>
            Open popover
        </Button>
    {/snippet}

    {#snippet children()}
        <p>Popover content here</p>
    {/snippet}
</Popover>