Holo Popover
The <holo-popover> component is an interactive floating panel (menus, forms) that uses the Popover
API (popover="auto") for native light-dismiss on Esc/outside-click. The trigger is provided via a
named trigger slot; clicking it toggles the popover open/closed, and the panel content goes in the
default slot.
Positioning note: CSS anchor positioning is not yet broadly supported across engines, so
positioning falls back to getBoundingClientRect()-based fixed positioning.
Live Previews
Section titled “Live Previews”Basic popover
Section titled “Basic popover”<holo-popover placement="bottom"> <button slot="trigger">Open menu</button> <div>Popover panel content</div></holo-popover>API Reference
Section titled “API Reference”Properties
Section titled “Properties”| Property | Attribute | Description | Type | Default |
| ----------- | ----------- | ------------------------------------------------------------------------------------ | --------------------------------------- | ---------- |
| open | open | Whether the popover panel is shown. Calls showPopover()/hidePopover() on change. | boolean | false |
| placement | placement | Which side of the trigger the popover is positioned on. | 'top' \| 'bottom' \| 'start' \| 'end' | 'bottom' |
Events
Section titled “Events”| Event | Description | Type |
| ----------- | ----------------------------------------------------------------------------------------------------------------- | ------------------- |
| holoOpen | Emitted after the popover panel has opened. | CustomEvent<void> |
| holoClose | Emitted after the popover panel has closed (Esc, outside click, or open = false); focus returns to the trigger. | CustomEvent<void> |
| Slot | Description |
| --------- | ------------------------------------- |
| trigger | The element that toggles the popover. |
| (default) | The popover panel content. |