Popover — Vue

---
import Popover from '../components/astro/Popover.astro';
---

<Popover triggerLabel="Open" client:load>
  <p>Popover content.</p>
</Popover>

<!-- Rizzo CSS + popover script. data-popover-trigger on trigger; content in popover__content. -->
<button data-popover-trigger="p1">Open</button>
<div id="p1" class="popover__content">...</div>

<script>
  import { Popover, Button } from '$lib/rizzo';
  let open = $state(false);
</script>

<Popover bind:open>
  {#snippet trigger()}
    <Button>Open</Button>
  {/snippet}
  <p>Popover content.</p>
</Popover>

<script setup>
import { ref } from 'vue';
import Popover from '@/components/rizzo/Popover.vue';
import Button from '@/components/rizzo/Button.vue';
</script>

<template>
  <Popover v-model:open="open">
    <template #trigger>
      <Button>Open</Button>
    </template>
    <p>Popover content.</p>
  </Popover>
</template>

import { useState } from 'react';
import { Popover, Button } from './components/react';

const [open, setOpen] = useState(false);
<Popover open={open} onOpenChange={setOpen} trigger={<Button>Open</Button>}>
  <p>Popover content.</p>
</Popover>