toggle-group

1---
2// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/toggle-group/ToggleGroup.astro directly.
3/**
4 * @component ToggleGroup
5 * @title Toggle Group
6 * @description A set of two-state buttons that can be toggled on or off. Supports single or multiple selection.
7 *
8 * @preview
9 *
10 * <ToggleGroup defaultValue="center" variant="outline">
11 *   <ToggleGroupItem value="left" aria-label="Align left">
12 *     <AlignLeftIcon />
13 *   </ToggleGroupItem>
14 *   <ToggleGroupItem value="center" aria-label="Align center">
15 *     <AlignCenterIcon />
16 *   </ToggleGroupItem>
17 *   <ToggleGroupItem value="right" aria-label="Align right">
18 *     <AlignRightIcon />
19 *   </ToggleGroupItem>
20 * </ToggleGroup>
21 *
22 * @usage
23 *
24 * ```astro nocollapse
25 * ---
26 * import { ToggleGroup, ToggleGroupItem } from '@bejamas/ui/components/toggle-group';
27 * import { BoldIcon, ItalicIcon, UnderlineIcon } from '@lucide/astro';
28 * ---
29 *
30 * <ToggleGroup defaultValue="bold" variant="outline">
31 *   <ToggleGroupItem value="bold" aria-label="Toggle bold">
32 *     <BoldIcon />
33 *   </ToggleGroupItem>
34 *   <ToggleGroupItem value="italic" aria-label="Toggle italic">
35 *     <ItalicIcon />
36 *   </ToggleGroupItem>
37 *   <ToggleGroupItem value="underline" aria-label="Toggle underline">
38 *     <UnderlineIcon />
39 *   </ToggleGroupItem>
40 * </ToggleGroup>
41 * ```
42 *
43 * @api
44 *
45 * ### Events
46 *
47 * | Event | Detail | Description |
48 * |-------|--------|-------------|
49 * | `toggle-group:change` | `{ value: string[] }` | Fired when the selection changes |
50 *
51 * ### Programmatic Control
52 *
53 * ```js nocollapse
54 * // Set selected values programmatically
55 * element.dispatchEvent(new CustomEvent('toggle-group:set', {
56 *   detail: { value: ['bold', 'italic'] }
57 * }));
58 * ```
59 *
60 * ### Data Attributes
61 *
62 * | Attribute | Element | Description |
63 * |-----------|---------|-------------|
64 * | `data-state` | toggle-group-item | Current state: `on` or `off` |
65 * | `data-disabled` | toggle-group | Present when group is disabled |
66 * | `data-orientation` | toggle-group | Orientation: `horizontal` or `vertical` |
67 * | `data-spacing` | toggle-group | Gap value used by style packs |
68 * | `data-variant` | toggle-group | Visual variant: `default` or `outline` |
69 * | `data-size` | toggle-group | Size: `sm`, `default`, or `lg` |
70 *
71 * @examples
72 *
73 * ### Multiple Selection
74 *
75 * <ToggleGroup multiple defaultValue={["bold", "italic"]} variant="outline">
76// … truncated