Popover

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

<Popover>
  <button type="button" class="btn" slot="trigger" data-popover-trigger>Open popover</button>
  <p>Popover content here.</p>
</Popover>

<!-- Rizzo CSS + popover script from package/vanilla docs. data-popover-trigger on trigger; content in popover__content. Click outside or Escape to close. -->

<script>
  import { Popover } from '$lib/rizzo';
</script>

<Popover>
  <button type="button" class="btn" data-popover-trigger>Open popover</button>
  <p>Popover content here.</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>