bearnie

Menu submenus, overlay animations, and nested modals

Dropdown and context menus gain submenus and checkbox/radio items, every overlay animates open and closed, modals nest correctly, and tabs can sync to the URL.

registry 0.9.0
All releases

Added

  • Dropdown menu submenus + checkbox/radio items. New DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, and DropdownMenuRadioItem. Submenus open on hover, click, or ArrowRight and close with ArrowLeft/Escape; checkbox and radio items keep the menu open and dispatch dropdown-checkbox-change / dropdown-radio-change CustomEvents.
  • Context menu submenus + checkbox/radio items. The same six sub-components for ContextMenu, with context-menu-checkbox-change / context-menu-radio-change events.
  • Enter/exit animation system. Popover, dropdown menu, context menu, tooltip, hover card, dialog, alert dialog, sheet, and the command dialog now animate open and closed, driven by data-state and keyframes in bearnie.css. Exit animations complete before the element is hidden, sheets slide from their edge, backdrops fade, and everything is disabled under prefers-reduced-motion. Override or remove the animations by targeting the [data-*-content][data-state] selectors in your own CSS.
  • Nested modal support. Body scroll lock is now reference-counted across dialogs, alert dialogs, sheets, and the command dialog — closing a nested modal no longer unlocks scrolling while the outer one is open — and Escape closes only the topmost open modal instead of all of them.
  • Tabs URL sync. New syncKey prop: selecting a tab updates a ?<syncKey>= URL param via history.replaceState, and links with the param activate that tab on load.

Changed

  • The active-tab pill now slides between tab triggers: the tabs runtime renders a single indicator element instead of each trigger painting its own background, and repositions it on activation and layout changes. Motion is disabled under reduced motion.
  • Submenu panels use w-max so long labels don’t wrap, and button-based menu items set text-left so wrapped text can’t center.
  • DropdownMenuContent and ContextMenuContent no longer set overflow-hidden (submenus must overflow the panel); ContextMenuContent also dropped inert animation classes that referenced undefined utilities.
  • The position utility’s cleanup no longer clears inline coordinates, so closing overlays hold their place while the exit animation plays.