Demo walkthrough

The demo is an executable companion to the documentation. Each example has a dedicated guide with the behavior it demonstrates, the important API choices, and a direct link to the live route.

All routes accept framework=wc (Web Components, the default) or framework=vue. The previous framework=web-components value is still read as Web Components for bookmarked links, but new links use the shorter wc token. The combobox route also accepts source=fuzzy or source=server.

Interaction demos

• Tooltip: hover, focus, safe polygon, and arrow.
• Popover: root-owned template and native Popover.
• Menu: list navigation, typeahead, and looping.
• Nested menu: coordinated roots and focus restoration.
• Client point: cursor-following virtual reference.
• Combobox: fuzzy search: local typo-tolerant matching.
• Combobox: server search: cancellable cursor-based requests.
• Placement: all typed placement values.
• Middleware: eight positioning middleware comparisons.
• Modal: native dialog, nested surfaces, and focus traps.
• Sheet: four edge positions, backdrop dismissal, and exit animation.
• Toast: stacked notifications, opt-in hover/focus pause, a hit box sized to the current stack, readable paused row spacing, F6 navigation, and exit presence.
• Command: searchable grouped actions in a keyboard-operable dialog palette.

The Usage recipes page covers reusable compositions; these pages explain what each demo is doing differently.