Behaviors
Headless Svelte 5 actions and a floating-ui factory, exported at @human-synthesis/norns-ui/behaviors.
import {
portal, clickOutside, escape, focusTrap,
scrollLock, useFloating, rovingTabindex
} from '@human-synthesis/norns-ui/behaviors'| Export | Use as | Does |
|---|---|---|
portal |
use:portal |
moves the element to document.body (or a target) |
clickOutside |
use:clickOutside={handler} |
calls the handler on pointer-down outside the element |
escape |
use:escape={handler} |
calls the handler on the Escape key |
focusTrap |
use:focusTrap |
keeps Tab focus inside the element while mounted |
scrollLock |
use:scrollLock |
locks body scroll while mounted |
rovingTabindex |
use:rovingTabindex |
arrow-key navigation across the element's focusable children |
useFloating |
useFloating(options) |
a small factory over @floating-ui/dom returning position state for a reference / floating pair |
Each behavior is also importable on its own from @human-synthesis/norns-ui/behaviors/<name>.svelte.js.
These are what every overlay in the library is built on, so building your own popover-like thing from them gives you the same keyboard and dismissal semantics for free.
.menu(use:portal use:clickOutside!="{close}" use:escape!="{close}")
...