Expandable Header Glass

1/**
2 * ExpandableHeaderGlass Component
3 *
4 * Collapsible section header with animated chevron for accordion-style interfaces.
5 * Provides accessible expand/collapse controls with theme-aware styling.
6 *
7 * ## Features
8 * - **Chevron Animation:** Smooth rotation between ChevronUp/ChevronDown icons
9 * - **Optional Leading Icon:** Customizable icon with configurable color
10 * - **Controlled State:** Requires `expanded` prop for external state management
11 * - **Hover Effect:** Subtle background highlight on hover (`bg-white/5`)
12 * - **Theme-Aware:** Uses CSS variables for text and icon colors
13 * - **ARIA Compliance:** `aria-expanded` attribute for screen readers
14 * - **Keyboard Accessible:** Native button element with focus states
15 * - **Flexible Layout:** Full-width button with space-between alignment
16 * - **Atomic Component:** Extracted from FlagsSectionGlass for reusability
17 *
18 * ## CSS Variables
19 * Uses inline theme CSS variables (no component-specific variables):
20 * - `--text-primary` - Header title text color
21 * - `--text-muted` - Chevron icon color
22 * - `--text-accent` - Leading icon color (default, customizable via `iconColor`)
23 *
24 * @example Basic usage
25 * ```tsx
26 * import { ExpandableHeaderGlass } from 'shadcn-glass-ui'
27 * import { Flag } from 'lucide-react'
28 *
29 * function CollapsibleSection() {
30 *   const [expanded, setExpanded] = useState(false)
31 *
32 *   return (
33 *     <>
34 *       <ExpandableHeaderGlass
35 *         title="Flags"
36 *         icon={Flag}
37 *         expanded={expanded}
38 *         onToggle={() => setExpanded(!expanded)}
39 *       />
40 *       {expanded && <div>Section content...</div>}
41 *     </>
42 *   )
43 * }
44 * ```
45 *
46 * @example Without icon
47 * ```tsx
48 * <ExpandableHeaderGlass
49 *   title="Additional Information"
50 *   expanded={isExpanded}
51 *   onToggle={handleToggle}
52 * />
53 * ```
54 *
55 * @example With custom icon color
56 * ```tsx
57 * import { AlertTriangle } from 'lucide-react'
58 *
59 * <ExpandableHeaderGlass
60 *   title="Warnings"
61 *   icon={AlertTriangle}
62 *   iconColor="oklch(65% 0.19 29)" // Orange warning color
63 *   expanded={warningsExpanded}
64 *   onToggle={() => setWarningsExpanded(!warningsExpanded)}
65 * />
66 * ```
67 *
68 * @example With custom styling
69 * ```tsx
70 * <ExpandableHeaderGlass
71 *   title="Advanced Settings"
72 *   expanded={settingsExpanded}
73 *   onToggle={toggleSettings}
74 *   className="bg-white/10 border border-white/20"
75 * />
76 * ```
77 *
78 * @accessibility
79 * - Uses semantic `<button>` element for proper keyboard support
80// … truncated