hover-card

1---
2// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/hover-card/HoverCard.astro directly.
3/**
4 * @component HoverCard
5 * @title Hover Card
6 * @description For sighted users to preview content available behind a link.
7 *
8 * @preview
9 *
10 * <HoverCard delay={10} closeDelay={100}>
11 *   <HoverCardTrigger asChild>
12 *     <Button variant="link">@data-slot</Button>
13 *   </HoverCardTrigger>
14 *   <HoverCardContent class="flex w-64 flex-col gap-0.5">
15 *     <div class="font-semibold">@data-slot</div>
16 *     <div>Headless UI components for vanilla JavaScript.</div>
17 *     <div class="text-muted-foreground mt-1 text-xs">
18 *       Created by Bejamas in 2026
19 *     </div>
20 *   </HoverCardContent>
21 * </HoverCard>
22 *
23 * @usage
24 *
25 * ```astro nocollapse
26 * ---
27 * import {
28 *   HoverCard,
29 *   HoverCardContent,
30 *   HoverCardTrigger,
31 * } from '@bejamas/ui/components/hover-card';
32 * import { Button } from '@bejamas/ui/components/button';
33 * ---
34 *
35 * <HoverCard>
36 *   <HoverCardTrigger asChild>
37 *     <Button variant="link">Hover Here</Button>
38 *   </HoverCardTrigger>
39 *   <HoverCardContent>
40 *     <div class="font-semibold">@nextjs</div>
41 *     <div>The React Framework - created and maintained by @vercel.</div>
42 *   </HoverCardContent>
43 * </HoverCard>
44 * ```
45 *
46 * @api
47 *
48 * ### Events
49 *
50 * The hover card emits custom events that you can listen to:
51 *
52 * | Event | Detail | Description |
53 * |-------|--------|-------------|
54 * | `hover-card:change` | `{ open: boolean, reason: string, trigger: HTMLElement, content: HTMLElement }` | Fired when visibility changes |
55 *
56 * ```astro nocollapse console
57 * <HoverCard id="my-hover-card">
58 *   <HoverCardTrigger asChild>
59 *     <Button variant="outline">Hover me</Button>
60 *   </HoverCardTrigger>
61 *   <HoverCardContent>
62 *     Hover card content
63 *   </HoverCardContent>
64 * </HoverCard>
65 * ```
66 *
67 * ```js nocollapse
68 *   const hoverCard = document.getElementById('my-hover-card');
69 *
70 *   hoverCard.addEventListener('hover-card:change', (e) => {
71 *     console.log('Is open:', e.detail.open);
72 *     console.log('Reason:', e.detail.reason);
73 *   });
74 * ```
75 *
76 * ### Programmatic Control
77 *
78 * You can control the hover card programmatically by dispatching a `hover-card:set` event:
79 *
80 * ```js nocollapse
81 * const hoverCard = document.getElementById('my-hover-card');
82 *
83 * // Open the hover card
84 * hoverCard.dispatchEvent(new CustomEvent('hover-card:set', {
85 *   detail: { open: true }
86 * }));
87 *
88// … truncated