what's in the box
-
layers - automatic ordering of nested layers
-
backdrop - hide / block background or keep a layer as part of the flow
-
focus
-
Tab between layers
- trap focus above backdrop
- re-focus when blocking layer close
- focusChange notification when focus outside / inside logical layer
-
click outside - notification for click outside of logical layer
-
mouse interaction - notification for mouse enter / leave of logical layer
-
escape catching - notification for escape press
-
server rendering - single pass nested rendering of layers in the server
-
component primitives - Tooltip, Popover, Modal
-
typed - built with TypeScript
-
tested - tested in a browser
-
components - published for multiple libraries / frameworks (React, Svelte & more to come...)
how to start
caveats
The main issue with displacing DOM is that there is no way to tell the browser that the content inside a layer is meant to be nested inside the origin of the layer.
This is notable in 2 areas:
future road map
-
ARIA support - build in accessibility support
-
style support - control overlay, tooltip/popover arrow
-
ordering logic - application level re-ordering of layers