Simple API to create multi layered UI

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

• read the docs
• pick your renderer:

Package	Published	Size
React
Svelte

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:

• Events propagation between layers (unless specifically handled by the renderer (e.g. React native event propagation within Portal).
• styling with CSS selectors across layers.

future road map

• ARIA support - build in accessibility support
• style support - control overlay, tooltip/popover arrow
• ordering logic - application level re-ordering of layers