VhyxUI 0.4.11: overlays that actually move
Dialogs, drawers, toasts, popovers, selects and tooltips now animate in and out. The cause was a one-line CSS Modules detail — here is what happened.
VhyxUI 0.4.11 is out. If you use overlays, update — they finally animate the way they were designed to.
What was wrong
Our component styles are CSS Modules. CSS Modules renames every animation to a scoped name, and only renames keyframes declared in the same file to match. Our components referenced shared keyframes from the design tokens package instead — so the shipped CSS pointed at names with no keyframes behind them. Fifteen of nineteen component animations silently never ran: dialogs, drawers, toasts, popovers, selects and tooltips simply appeared and vanished.
What changed
- Every component declares its own keyframes, and a new test fails if a component ever animates a keyframe it doesn't declare.
- Exit animations. Overlays now stay mounted while they animate out, instead of disappearing instantly.
- Dialog scales and lifts in, and on close the panel fades just ahead of the backdrop, so it never lingers over an undimmed page.
- Drawer slides in and back out, with the backdrop following the panel exactly.
- Toasts animate their own row height, so the rest of the stack slides into place instead of jumping.
- Tooltip placed on the top or left side no longer overlaps its trigger.
Everything still respects reduced motion: with it turned on, overlays appear and disappear instantly, as before.
pnpm add @vhyxui/react@0.4.11