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.

When to use

Use it for:

Secondary content or tasks that slide in from an edge: filters, settings, a detail pane.
Mobile-style navigation panels that cover part of the page.

Don’t use it for:

A short confirmation or decision. Use Dialog.
Content anchored to a specific trigger. Use Popover or Menu.
Permanently visible side navigation. Put it in the page layout.

Live Previews

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>

Accessibility

The component renders a native <dialog> opened with showModal(), so it is modal in the same way as Dialog: the rest of the page is inert, focus is trapped, and it is shown in the top layer. It is named by its heading (an <h2> referenced with aria-labelledby), or by aria-label="Drawer" when no heading is set. position (start, end, top, bottom) is visual only.

Key	Action
`Tab`	Moves to the next focusable element inside the drawer, wrapping at the end
`Shift` + `Tab`	Moves to the previous focusable element, wrapping at the start
`Esc`	Closes the drawer when `dismissible`
`Enter`, `Space`	Activates the focused button (such as the close button)

When the drawer opens, the focused element is saved, following open shadow roots down to the element that really has focus (for example the inner <button> of a Button). Focus returns to it when the drawer closes.
With dismissible (the default) a close button named “Close drawer” is shown, and Esc and a backdrop click close the drawer.
With dismissible set to false there is no close button, and Esc and backdrop clicks are ignored. Close the drawer from your own content by setting open to false. Browsers may still close a modal dialog if Esc is pressed repeatedly without other interaction, so keep open in sync with holoClose.
The slide and fade only run when prefers-reduced-motion: no-preference.

You provide:

A heading. Without it the drawer is named only “Drawer”.
At least one focusable control inside the drawer, and a clear way to close it. With dismissible set to false, that control is the only way out.

API Reference

Importing

import '@philbob-sideprojects/hololink-ui/holo-drawer';

Properties

Property	Attribute	Type	Default	Description
`dismissible`	`dismissible`	`boolean`	`true`	If true, renders a close button in the header and lets Esc and backdrop clicks close the drawer. If false, close it from your own content by setting `open` to false.
`heading`	`heading`	`string`	—	Optional heading rendered in the drawer header.
`open`	`open`	`boolean`	`false`	Whether the drawer is open. Setting this to `true` calls the native `showModal()`; setting it to `false` calls `close()`.
`position`	`position`	`"bottom" \| "end" \| "start" \| "top"`	`'end'`	Which viewport edge the drawer slides in from.

Events

Event	Detail	Description
`holoClose`	`void`	Emitted after the drawer has closed (via Esc, backdrop click, the close button, or `open` being set to false; Esc and backdrop click only when `dismissible`). Focus then returns to the element that was focused when the drawer opened.
`holoOpen`	`void`	Emitted after the drawer opens in response to `open` becoming true.

Slots

Slot	Description
(default)	The drawer body content.
`footer`	Action buttons rendered in the drawer footer.

CSS custom properties

Property	Description
`--holo-drawer-backdrop-bg`	Background of the backdrop behind the drawer.
`--holo-drawer-bg`	Background color of the drawer panel.
`--holo-drawer-shadow`	Box shadow of the drawer panel.
`--holo-drawer-size`	Width (`start`/`end` positions) or height (`top`/`bottom` positions) of the drawer panel.
`--holo-drawer-text-color`	Text color of the drawer.