popover

1---
2// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/popover/Popover.astro directly.
3/**
4 * @component Popover
5 * @title Popover
6 * @description A floating panel that appears on trigger click, useful for displaying rich content like forms or additional information.
7 *
8 * @preview
9 * <Popover>
10 *   <PopoverTrigger variant="outline">Open popover</PopoverTrigger>
11 *   <PopoverContent>
12 *     <PopoverHeader>
13 *       <PopoverTitle>Dimensions</PopoverTitle>
14 *       <PopoverDescription>Set the dimensions for the layer.</PopoverDescription>
15 *     </PopoverHeader>
16 *     <div class="grid gap-2">
17 *       <div class="grid grid-cols-3 items-center gap-4">
18 *         <Label>Width</Label>
19 *         <Input class="col-span-2 h-8" value="100%" />
20 *       </div>
21 *       <div class="grid grid-cols-3 items-center gap-4">
22 *         <Label>Height</Label>
23 *         <Input class="col-span-2 h-8" value="25px" />
24 *       </div>
25 *     </div>
26 *   </PopoverContent>
27 * </Popover>
28 *
29 * @usage
30 *
31 * ```astro nocollapse
32 * ---
33 * import { Popover, PopoverTrigger, PopoverContent, PopoverHeader, PopoverTitle, PopoverDescription } from '@bejamas/ui/components/popover';
34 * ---
35 *
36 * <Popover>
37 *   <PopoverTrigger variant="outline">Open</PopoverTrigger>
38 *   <PopoverContent>
39 *     <PopoverHeader>
40 *       <PopoverTitle>Title</PopoverTitle>
41 *       <PopoverDescription>Description text.</PopoverDescription>
42 *     </PopoverHeader>
43 *     <p>Popover body content.</p>
44 *   </PopoverContent>
45 * </Popover>
46 * ```
47 *
48 * @api
49 *
50 * ### Events
51 *
52 * The popover emits custom events that you can listen to:
53 *
54 * | Event | Detail | Description |
55 * |-------|--------|-------------|
56 * | `popover:change` | `{ open: boolean }` | Fired when the popover opens or closes |
57 *
58 * ```astro nocollapse console
59 * <Popover id="my-popover">
60 *   <PopoverTrigger variant="outline">Open</PopoverTrigger>
61 *   <PopoverContent>
62 *     <p>Content</p>
63 *   </PopoverContent>
64 * </Popover>
65 * ```
66 *
67 * ```js nocollapse
68 *   const popover = document.getElementById('my-popover');
69 *
70 *   popover.addEventListener('popover:change', (e) => {
71 *     console.log('Is open:', e.detail.open);
72 *   });
73 * ```
74 *
75 * ### Programmatic Control
76 *
77 * You can control the popover programmatically by dispatching a `popover:set` event:
78 *
79 * ```js nocollapse
80 * const popover = document.getElementById('my-popover');
81 *
82 * // Open the popover
83// … truncated