Durations
| Token | Use |
|---|---|
--hui-duration-fast | Small state changes and control feedback. |
--hui-duration-normal | Standard component transitions. |
--hui-duration-slow | Larger surfaces such as dialogs or panels. |
Transition tokens
--hui-transition-fast--hui-transition-normal--hui-transition-slow
Use a complete transition token on transition; do not combine raw durations in component CSS. Honor prefers-reduced-motion: reduce by shortening or removing non-essential motion while preserving state changes and focus visibility. Motion must never be required to understand or operate a component.
Presence lifecycle
Overlay content changes its data-state and accessibility state immediately. When motion is allowed, a closing menu, popover, select, combobox, tooltip, or dialog surface remains mounted until its tokenized transition or animation completes; only then is hidden applied and portal, positioning, and native surface cleanup performed. Closed-but-exiting content is aria-hidden, inert, and non-interactive.
Reduced-motion and no-transition environments complete the lifecycle immediately. Server-rendered closed content keeps its hidden="hidden" output, and native dialog/popover APIs remain the platform semantics rather than being replaced by CSS state.