Holo Drawer
The <holo-drawer> component is a <holo-dialog> variant that slides in from a viewport edge
(position), reusing the same native <dialog>-based showModal()/close() approach for focus
trapping, Esc, backdrop, and focus-return behavior.
Live Previews
Section titled “Live Previews”End-anchored drawer
Section titled “End-anchored drawer”Drawer content goes here.
<button id="trigger">Open drawer</button><holo-drawer id="drawer" heading="Settings" position="end"> <p>Drawer content goes here.</p> <button slot="footer">Done</button></holo-drawer>API Reference
Section titled “API Reference”Properties
Section titled “Properties”| Property | Attribute | Description | Type | Default |
| ------------- | ------------- | -------------------------------------------------------------------- | --------------------------------------- | ----------- |
| open | open | Whether the drawer is open. Calls showModal()/close() on change. | boolean | false |
| position | position | Which viewport edge the drawer slides in from. | 'start' \| 'end' \| 'top' \| 'bottom' | 'end' |
| heading | heading | Optional heading rendered in the drawer header. | string | undefined |
| dismissible | dismissible | If true, renders a close button in the header. | boolean | true |
Events
Section titled “Events”| Event | Description | Type |
| ----------- | -------------------------------------------------------------------------- | ------------------- |
| holoOpen | Emitted after the drawer has opened. | CustomEvent<void> |
| holoClose | Emitted after the drawer has closed and focus has returned to the trigger. | CustomEvent<void> |
| Slot | Description |
| --------- | -------------------------------------- |
| (default) | The drawer body content. |
| footer | Action buttons rendered in the footer. |