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.
Discrete display, visibility, and top-layer changes use transition-behavior: allow-discrete where supported. Popovers participate in @starting-style entry transitions. Presence includes the remaining duration of finite, running Web Animations on its transition target, accounting for playback rate; paused and infinite animations cannot extend teardown indefinitely. The existing --hui-swipe-x behavior hook has a typed <length> registration so native custom-property interpolation is available without registering or constraining the token set.