Interactive components

Overlays, navigation, inputs, and feedback patterns — each section is a working Web Component with keyboard support. For 1.0 runtime APIs (search, highlight, motion), see the Runtime lab.

Overlays Navigation Inputs Feedback

Modal & dialog

velin-modal for app flows; velin-dialog wraps native <dialog> with the same focus contract.

Live velin-modal — Escape, overlay click, focus trap.

Sheet & drawer

Sheet for filters/carts; drawer for mobile navigation patterns.

Side sheet

Slide-in surface for secondary tasks.

Note

Use <velin-tooltip> (canonical in 1.0.0; velin-tooltip-wc is deprecated).

Extra actions without a full modal.

Toast

Transient status messages — stack multiple types.

Live announcer

Politely or assertively updates screen readers via live regions.

All demos

Tabs

Roving tabindex on tablist; arrow keys move focus.

Summary panel with token-backed typography.

Stepper

Canonical tag <velin-stepper> (alias velin-stepper-wc still works).

Account step complete.

Workspace — active step.

Invite teammates.

Progress ring

Pair value with upload or onboarding state.

Persist & copy

velin-persist stores a field in localStorage; velin-copy copies snippets.

Sticky note

Carousel

Pause control and keyboard navigation for slide content.

Slide 1 — token-backed surface

Slide 2 — reduced-motion safe transitions

Slide 3 — swap for product shots

Click a thumbnail or use the button — arrow keys and Escape inside the overlay.