# Overlays
Use when you need a transient layer above content.
## Index
- [`command-palette`](#command-palette) — Cmd/Ctrl+K searchable, grouped command panel
- [`drawer`](#drawer) — Edge-anchored slide-in panel with focus trap
- [`dropdown`](#dropdown) — Button-triggered floating menu with keyboard navigation
- [`modal`](#modal) — Dialog with overlay, focus trap and scroll lock
- [`popover`](#popover) — Interactive floating panel — like an interactive tooltip
- [`tooltip`](#tooltip) — Hover/focus floating label, auto-positioned
---
## command-palette
> Deep dive: [`docs/llm/command-palette.md`](../../../docs/llm/command-palette.md)
Cmd/Ctrl+K search panel with filterable, grouped commands (combobox/listbox).
```html
```
```ts
import { CommandPalette } from '@42/core/command-palette';
const palette = new CommandPalette(root, { hotkey: 'k' });
palette.on('commandpalette:select', (e) => console.log(e.detail.value));
```
Keyboard: ⌘/Ctrl+K toggles; type to filter (label + `data-keywords`); ArrowUp/Down + Home/End move the highlight; Enter selects; Escape closes.
Options: `defaultOpen` (false), `hotkey` (`'k'`, `null` to disable), `closeOnOverlayClick` (true), `closeOnEscape` (true), `clearOnClose` (true), `filter(query, text)`
Methods: `openPalette()`, `close()`, `toggle()`, `isOpen`, `activeItem`
Events: `commandpalette:open`, `commandpalette:close`, `commandpalette:select` → `{ value, item }`, `commandpalette:filter` → `{ query, count }`
---
## drawer
Slide-in panel anchored to an edge. Focus trap, scroll lock, Esc/overlay dismissal.
```html
```
```ts
import { Drawer } from '@42/core/drawer';
const drawer = new Drawer(root, { side: 'right', closeOnEscape: true, closeOnOverlayClick: true });
drawer.open();
```
Options: `side` ('left'|'right'|'top'|'bottom'), `closeOnOverlayClick`, `closeOnEscape`, `lockScroll`, `defaultOpen`
Events: `drawer:open`, `drawer:close`
---
## dropdown
Floating menu triggered by a button. Keyboard nav with arrows, Esc to close.
```html
```
```ts
import { Dropdown } from '@42/core/dropdown';
new Dropdown(root, { placement: 'bottom-start', offset: 4, closeOnSelect: true });
```
Options: `placement` (Placement), `offset`, `closeOnSelect`
Events: `dropdown:open`, `dropdown:close`
---
## modal
Dialog with overlay, focus trap, scroll lock.
```html
```
```ts
import { Modal } from '@42/core/modal';
new Modal(root, { closeOnOverlayClick: true, closeOnEscape: true, lockScroll: true });
```
Options: `closeOnOverlayClick`, `closeOnEscape`, `lockScroll`, `defaultOpen`
Events: `modal:open`, `modal:close`
---
## popover
Interactive floating panel (links/forms/buttons inside). Toggles on click,
manages focus, closes on outside-click / Escape, positions with floating-ui.
Like a tooltip but interactive.
```html
```
```ts
import { Popover } from '@42/core/popover';
const p = new Popover(root, { placement: 'bottom', trapFocus: false });
p.toggle();
```
Options: `placement` (default 'bottom'), `offset` (default 8), `autoFocus` (default true), `trapFocus` (default false), `closeOnOutsideClick` (default true)
Methods: `openPopover()`, `close()`, `toggle()`, `isOpen`
Events: `popover:open`, `popover:close`
---
## tooltip
Floating tooltip on hover/focus. Auto-positioned via floating-ui.
```html
Tooltip text
```
```ts
import { Tooltip } from '@42/core/tooltip';
new Tooltip(root, { placement: 'top', offset: 6, openDelay: 200, closeDelay: 0 });
```
Options: `placement`, `offset`, `openDelay`, `closeDelay`
Events: `tooltip:open`, `tooltip:close`