dropdown-menu

1---
2// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/dropdown-menu/DropdownMenu.astro directly.
3/**
4 * @component DropdownMenu
5 * @title Dropdown Menu
6 * @description Action and selection menus with runtime-owned open, highlight, and committed selection state.
7 *
8 * @preview
9 * <DropdownMenu defaultValue="pro">
10 *   <DropdownMenuTrigger variant="outline">Open</DropdownMenuTrigger>
11 *   <DropdownMenuContent align="start">
12 *     <DropdownMenuLabel>Plans</DropdownMenuLabel>
13 *     <DropdownMenuGroup>
14 *       <DropdownMenuRadioItem value="starter">Starter</DropdownMenuRadioItem>
15 *       <DropdownMenuRadioItem value="pro">Pro</DropdownMenuRadioItem>
16 *     </DropdownMenuGroup>
17 *   </DropdownMenuContent>
18 * </DropdownMenu>
19 *
20 * @usage
21 *
22 * ```astro nocollapse
23 * ---
24 * import {
25 *   DropdownMenu,
26 *   DropdownMenuTrigger,
27 *   DropdownMenuContent,
28 *   DropdownMenuItem,
29 *   DropdownMenuRadioItem,
30 * } from '@bejamas/ui/components/dropdown-menu';
31 * ---
32 *
33 * <DropdownMenu>
34 *   <DropdownMenuTrigger variant="outline">Menu</DropdownMenuTrigger>
35 *   <DropdownMenuContent>
36 *     <DropdownMenuItem>Item 1</DropdownMenuItem>
37 *   </DropdownMenuContent>
38 * </DropdownMenu>
39 * ```
40 *
41 * @api
42 *
43 * ### Events
44 *
45 * The dropdown menu emits custom events that you can listen to:
46 *
47 * | Event | Detail | Description |
48 * |-------|--------|-------------|
49 * | `dropdown-menu:open-change` | `{ open, previousOpen, source, reason }` | Fired on real open-state changes |
50 * | `dropdown-menu:change` | same detail | Deprecated alias for `dropdown-menu:open-change` |
51 * | `dropdown-menu:highlight-change` | `{ value, previousValue, item, previousItem, source }` | Fired when highlight changes |
52 * | `dropdown-menu:select` | `{ value, item, itemType, source, checked? }` | Cancelable user activation event fired before commit |
53 * | `dropdown-menu:value-change` | `{ value, previousValue, item, previousItem, source }` | Fired when radio selection commits |
54 * | `dropdown-menu:values-change` | `{ values, previousValues, changedValue, checked, item, source }` | Fired when checkbox selection commits |
55 *
56 * ```astro nocollapse
57 * <DropdownMenu id="my-dropdown" defaultValue="edit">
58 *   <DropdownMenuTrigger>Menu</DropdownMenuTrigger>
59 *   <DropdownMenuContent>
60 *     <DropdownMenuRadioItem value="edit">Edit</DropdownMenuRadioItem>
61 *     <DropdownMenuRadioItem value="delete">Delete</DropdownMenuRadioItem>
62 *   </DropdownMenuContent>
63 * </DropdownMenu>
64// … truncated