<details data-variant="popover">
				<summary>Menu</summary>

				<nav role="navigation" aria-label="Menu options">
				<a href="#">Option 1</a>
				<a href="#">Option 2</a>
				<button type="button">Action</button>
				</nav>
				</details>

• `data-variant="popover"` - Marks details element as popover menu

• `role="navigation"` - Menu content is navigation region
• `aria-label` - Describes menu purpose to screen readers

• Native Details Element - Uses semantic HTML5 `
  ` and `

  `
• Positioned Menu - Navigation appears below trigger
• Link and Button Support - Mix of links, buttons, and separators
• Keyboard Navigation - Space/Enter to toggle, Tab through items
• Auto-close - Closes when clicking outside or selecting item
• Accessibility - Full ARIA and screen reader support
• Visual Feedback - Hover and focus states on all items

• Dropdown Menus - File menu, action menu, main navigation
• User Menu - Profile, settings, logout options
• Action Menus - Edit, delete, share, archive actions
• Contextual Panels - Help text, additional options, metadata
• Language/Theme Switcher - Multiple option selection
• Filters - Filter options for data lists

• Space / Enter - Toggle popover open/closed on summary
• Tab - Navigate through menu items
• Escape - Close popover (handled by axiom.js)
• Click Outside - Close popover (handled by axiom.js)

• Clear Triggers - Make summary text clearly indicate it's clickable
• Grouped Items - Use `

  ---

  ` to separate different action types
• Semantic Elements - Use `` for navigation, `` for actions
• Proper Labels - Use aria-label to describe menu purpose
• Keyboard Support - All items fully keyboard accessible
• Mobile Friendly - Works well with touch on mobile devices
• Focus Management - Proper focus indicators for keyboard users