Ahover + focus
Signal tooltip
One custom element wires pointer intent, keyboard focus, dismissal, and descriptive ARIA.
Positioned by autoUpdate
<floating-reference> + <floating-content>01 / observeThe DOM is
The DOM is
the API.
Every card composes Lit-powered custom elements inside Astro-rendered HTML. No Floating UI directive is exposed to consumers.
ROUTE MAP/web-components/:primitive
Bnamed slots
Anchored popover
The trigger and panel are composed declaratively through named slots.
REFERENCE / 42.8°Portal, still connected.
ARIA and outside-press behavior are owned by the component.
<floating-portal> + <floating-content>Croving focus
Command menu
Arrow keys, looping, and typeahead share one list registry. Try typing “signal”.
plugins = [click(), listNavigation(), typeahead()]T2 coordinated roots
Nested command tree
Open “Move to project” with click or ArrowRight. Escape returns focus to its parent item.
<floating-tree> + <floating-node>Dvirtual reference
Cursor signal
Move across the field. A virtual reference follows the pointer instead of the whole element.
Awaiting pointer
Pointer is the reference
<floating-root> + clientPoint()Fframework-neutral search
Multilingual combobox
Search by city, country, local script, alias, or forgiving typo.
Destination suggestions closed
SearchController + <floating-root> + listNavigation()P12 typed directions
Placement constants
Choose every side and alignment without repeating string literals.
<floating-root placement="bottom-start">02 / containA modal should
A modal should
make space.
Open this one to feel the shared focus trap, inert neighbors, Escape dismissal, and focus restoration.
You are inside
the focus trap.
Nested surfaces keep their own dismissal step. Escape closes the topmost surface before this room.
This tooltip stays inside the dialog.
Escape and outside press dismiss only this panel first.
One more
focus boundary.
Close this layer to resume the parent dialog.
ESC closes the top layer