[Bug Fix] Overlays: play the exit animation before hiding (#506)

* [Bug Fix] Popover, HoverCard, ContextMenu: play the exit animation before hiding

All three set data-state="closed" and add `hidden` (display: none) in the
same frame, so data-[state=closed]:animate-out never gets one. Defer
`hidden` to animationend/animationcancel, and add fill-mode-forwards so
the last frame holds until it lands.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

* Only settle on the exit animation, and settle on disconnect

Closing while the opening animation runs cancels `enter`, and that
animationcancel reached the handler as if the exit had finished. Capture
the exit animation-name when arming and ignore events from any other run.

disconnect() left the handlers attached, unlike every other listener in
these controllers; ContextMenu's disconnect armed them on an element it
was about to drop. It now applies the pending hide instead.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

* Match the exit run against every computed animation name

animation-name is comma-separated when the content carries more than one
animation, while each event names a single run, so the equality check
rejected them all and the element never hid.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

* Settle the exit on getAnimations(), and keep disconnect from failing

getComputedStyle reports an element's own `display` and still resolves
`animation-name: exit` under a display:none ancestor, so the guard armed
a listener for an animation with no box to run in, and `hidden` never
landed. getAnimations() returns nothing for that element — as it does
for `animation: none` and for an element already hidden — so all of
those settle synchronously.

HoverCard's disconnect() started with removeEventListeners(), which
resolves both targets unguarded; once one is gone, Stimulus swallows the
throw and the settle at the end never runs. Release what is held outside
the element first, guard each target on its own, and apply the same
order to hide(), which runs from a timer. ContextMenu's hide() touched
the content target before releasing its document listeners, and
disconnect() goes through it — same reorder.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* Play the exit animation in every overlay with animate-out

DropdownMenu, ClipboardPopover, Select, Sheet and CommandDialog all
carried data-[state=closed]:animate-out and cut it the same way: `hidden`
or element.remove() in the frame the state changed. DropdownMenu,
Clipboard and Select never set data-state at all, and Select keyed its
exit on the root's open value instead.

The settle block now takes the animated element and hands the outcome to
a per-controller afterExit(): `hidden` on the wrapper for the floating
overlays, element.remove() for Sheet and CommandDialog. The animated
element is an explicit `panel` target (plus `backdrop` where there is
one), and the captured exit names live in a WeakMap per element because
Clipboard can run two exits at once. The block itself is byte-identical
in all eight controllers.

DropdownMenu#toggle reads openValue, since `hidden` now lands after the
exit and no longer tells the states apart; its z-index is released on
settle so the menu fades above its siblings. CommandDialog reopened while
dismissing brings the same instance back through show() rather than
stacking a second one. Clipboard's empty-source branch called a method
that did not exist (showErrorPopover) — fixed while restructuring it.

Every affected content component gets data-[state=closed]:fill-mode-forwards
so the last frame holds until the hide lands, with a rendering test each.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* chore(mcp): rebuild registry.json for the overlay exit-animation changes

---------

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
Co-authored-by: Djalma Araújo <djalma@nossomos.cc>

Author: 3 people

gem/lib/ruby_ui/clipboard/clipboard_controller.js

@@ -3,18 +3,24 @@ import { computePosition, flip, shift } from "@floating-ui/dom";
 
 // Connects to data-controller="accordion"
 export default class extends Controller {
-  static targets = ['trigger', 'source', 'successPopover', 'errorPopover']
+  static targets = ['trigger', 'source', 'successPopover', 'successPanel', 'errorPopover', 'errorPanel']
   static values = {
     options: {
       type: Object,
       default: {},
     },
   }
 
+  disconnect() {
+    // Nothing is left to wait for the exit animation, so apply the pending hide now.
+    if (this.hasSuccessPanelTarget) this.settleExit(this.successPanelTarget);
+    if (this.hasErrorPanelTarget) this.settleExit(this.errorPanelTarget);
+  }
+
   copy() {
     let sourceElement = this.sourceTarget.children[0];
     if (!sourceElement) {
-      this.showErrorPopover();
+      this.#showErrorPopover();
       return;
     }
     let textToCopy = sourceElement.tagName === 'INPUT' ? sourceElement.value : sourceElement.innerText;
@@ -26,8 +32,8 @@ export default class extends Controller {
   }
 
   onClickOutside() {
-    if (!this.successPopoverTarget.classList.contains("hidden")) this.successPopoverTarget.classList.add("hidden");
-    if (!this.errorPopoverTarget.classList.contains("hidden")) this.errorPopoverTarget.classList.add("hidden");
+    this.#hidePopover(this.successPopoverTarget, this.successPanelTarget);
+    this.#hidePopover(this.errorPopoverTarget, this.errorPanelTarget);
   }
 
   #computeTooltip(popoverElement) {
@@ -43,12 +49,65 @@ export default class extends Controller {
   }
 
   #showSuccessPopover() {
-    this.#computeTooltip(this.successPopoverTarget);
-    this.successPopoverTarget.classList.remove("hidden");
+    this.#showPopover(this.successPopoverTarget, this.successPanelTarget);
   }
 
   #showErrorPopover() {
-    this.#computeTooltip(this.errorPopoverTarget);
-    this.errorPopoverTarget.classList.remove("hidden");
+    this.#showPopover(this.errorPopoverTarget, this.errorPanelTarget);
+  }
+
+  #showPopover(popover, panel) {
+    this.#computeTooltip(popover);
+    popover.classList.remove("hidden");
+    panel.dataset.state = "open";
+  }
+
+  #hidePopover(popover, panel) {
+    if (popover.classList.contains("hidden")) return;
+
+    panel.dataset.state = "closed";
+    this.hideAfterExitAnimation(panel);
+  }
+
+  afterExit(panel) {
+    const popover = panel === this.successPanelTarget ? this.successPopoverTarget : this.errorPopoverTarget;
+    popover.classList.add("hidden");
+  }
+
+  // Overlay exit — the same block in every overlay controller, so keep them in sync.
+  exitAnimationNames = new WeakMap();
+
+  hideAfterExitAnimation(animated) {
+    const exitAnimations = animated
+      .getAnimations()
+      .filter((animation) => animation instanceof CSSAnimation);
+
+    // No exit animation, or no box to run it in: animationend would never fire.
+    if (exitAnimations.length === 0) {
+      this.settleExit(animated);
+      return;
+    }
+
+    this.exitAnimationNames.set(animated, exitAnimations.map((animation) => animation.animationName));
+    animated.addEventListener("animationend", this.handleExitAnimationEnd);
+    animated.addEventListener("animationcancel", this.handleExitAnimationEnd);
+  }
+
+  handleExitAnimationEnd = (event) => {
+    // animationend bubbles — an animated child must not hide its container.
+    if (event.target !== event.currentTarget) return;
+    // Closing mid-open cancels the enter animation; only the exit run settles this.
+    if (!this.exitAnimationNames.get(event.currentTarget)?.includes(event.animationName)) return;
+
+    this.settleExit(event.currentTarget);
+  };
+
+  settleExit(animated) {
+    animated.removeEventListener("animationend", this.handleExitAnimationEnd);
+    animated.removeEventListener("animationcancel", this.handleExitAnimationEnd);
+    // Reopened mid-exit: it is on its way back in, leave it visible.
+    if (animated.dataset.state !== "closed") return;
+
+    this.afterExit(animated);
   }
 }

gem/lib/ruby_ui/clipboard/clipboard_popover.rb

@@ -28,12 +28,22 @@ def clipboard_target
       end
     end
 
+    def panel_target
+      case @type
+      when :success
+        "successPanel"
+      when :error
+        "errorPanel"
+      end
+    end
+
     def default_attrs
       {
         data: {
-          state: :open
+          state: :open,
+          ruby_ui__clipboard_target: panel_target
         },
-        class: "z-50 rounded-md text-sm border bg-background px-2 py-0.5 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+        class: "z-50 rounded-md text-sm border bg-background px-2 py-0.5 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:fill-mode-forwards data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
       }
     end
   end

gem/lib/ruby_ui/command/command_controller.js

@@ -3,7 +3,7 @@ import Fuse from "fuse.js";
 
 // Connects to data-controller="ruby-ui--command"
 export default class extends Controller {
-  static targets = ["input", "group", "item", "empty"];
+  static targets = ["input", "group", "item", "empty", "backdrop", "panel"];
 
   connect() {
     this.selectedIndex = -1;
@@ -17,13 +17,67 @@ export default class extends Controller {
     this.toggleVisibility(this.emptyTargets, false);
   }
 
+  disconnect() {
+    // Nothing is left to wait for the exit animation, so apply the pending removal now.
+    if (this.hasPanelTarget) this.settleExit(this.panelTarget);
+  }
+
   dismiss() {
-    // allow scroll on body
+    this.backdropTarget.dataset.state = "closed";
+    this.panelTarget.dataset.state = "closed";
+    this.hideAfterExitAnimation(this.panelTarget);
+  }
+
+  // Opened again while dismissing: bring this instance back instead of stacking a new one.
+  show() {
+    this.backdropTarget.dataset.state = "open";
+    this.panelTarget.dataset.state = "open";
+    document.body.classList.add("overflow-hidden");
+    this.focusInput();
+  }
+
+  afterExit() {
     document.body.classList.remove("overflow-hidden");
-    // remove the element
     this.element.remove();
   }
 
+  // Overlay exit — the same block in every overlay controller, so keep them in sync.
+  exitAnimationNames = new WeakMap();
+
+  hideAfterExitAnimation(animated) {
+    const exitAnimations = animated
+      .getAnimations()
+      .filter((animation) => animation instanceof CSSAnimation);
+
+    // No exit animation, or no box to run it in: animationend would never fire.
+    if (exitAnimations.length === 0) {
+      this.settleExit(animated);
+      return;
+    }
+
+    this.exitAnimationNames.set(animated, exitAnimations.map((animation) => animation.animationName));
+    animated.addEventListener("animationend", this.handleExitAnimationEnd);
+    animated.addEventListener("animationcancel", this.handleExitAnimationEnd);
+  }
+
+  handleExitAnimationEnd = (event) => {
+    // animationend bubbles — an animated child must not hide its container.
+    if (event.target !== event.currentTarget) return;
+    // Closing mid-open cancels the enter animation; only the exit run settles this.
+    if (!this.exitAnimationNames.get(event.currentTarget)?.includes(event.animationName)) return;
+
+    this.settleExit(event.currentTarget);
+  };
+
+  settleExit(animated) {
+    animated.removeEventListener("animationend", this.handleExitAnimationEnd);
+    animated.removeEventListener("animationcancel", this.handleExitAnimationEnd);
+    // Reopened mid-exit: it is on its way back in, leave it visible.
+    if (animated.dataset.state !== "closed") return;
+
+    this.afterExit(animated);
+  }
+
   focusInput() {
     this.inputTarget?.focus();
   }

gem/lib/ruby_ui/command/command_dialog_content.rb

@@ -30,8 +30,9 @@ def view_template(&block)
     def default_attrs
       {
         data_state: "open",
+        data_ruby_ui__command_target: "panel",
         class: [
-          "fixed pointer-events-auto left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
+          "fixed pointer-events-auto left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:fill-mode-forwards data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
           SIZES[@size]
         ]
       }
@@ -41,7 +42,8 @@ def backdrop
       div(
         data_state: "open",
         data_action: "click->ruby-ui--command#dismiss esc->ruby-ui--command#dismiss",
-        class: "fixed pointer-events-auto inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+        data_ruby_ui__command_target: "backdrop",
+        class: "fixed pointer-events-auto inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:fill-mode-forwards"
       )
     end
   end

gem/lib/ruby_ui/command/command_dialog_controller.js

@@ -23,7 +23,7 @@ export default class extends Controller {
     }
 
     if (this.openOutlet) {
-      this.openOutlet.focusInput();
+      this.openOutlet.show();
       return;
     }
 

gem/lib/ruby_ui/context_menu/context_menu_content.rb

@@ -15,7 +15,7 @@ def default_attrs
         data_state: "closed",
         data: {ruby_ui__context_menu_target: "content"},
         class:
-              "hidden absolute z-50 min-w-[8rem] outline-none pointer-events-auto overflow-hidden rounded-md border bg-background p-1 text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+              "hidden absolute z-50 min-w-[8rem] outline-none pointer-events-auto overflow-hidden rounded-md border bg-background p-1 text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:fill-mode-forwards data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         tabindex: "-1",
         data_orientation: "vertical"
       }

gem/lib/ruby_ui/context_menu/context_menu_controller.js

@@ -24,6 +24,8 @@ export default class extends Controller {
 
   disconnect() {
     this.hide();
+    // Nothing is left to wait for the exit animation, so apply the pending hide now.
+    if (this.hasContentTarget) this.settleExit(this.contentTarget);
   }
 
   handleContextMenu(event) {
@@ -49,14 +51,58 @@ export default class extends Controller {
   hide() {
     if (!this.openValue) return;
     this.openValue = false;
-    this.contentTarget.classList.add("hidden");
-    this.contentTarget.dataset.state = "closed";
     this.removeEventListeners();
     this.deselectAll();
     if (this.cleanup) {
       this.cleanup();
       this.cleanup = null;
     }
+
+    if (!this.hasContentTarget) return;
+
+    this.contentTarget.dataset.state = "closed";
+    this.hideAfterExitAnimation(this.contentTarget);
+  }
+
+  afterExit(content) {
+    content.classList.add("hidden");
+  }
+
+  // Overlay exit — the same block in every overlay controller, so keep them in sync.
+  exitAnimationNames = new WeakMap();
+
+  hideAfterExitAnimation(animated) {
+    const exitAnimations = animated
+      .getAnimations()
+      .filter((animation) => animation instanceof CSSAnimation);
+
+    // No exit animation, or no box to run it in: animationend would never fire.
+    if (exitAnimations.length === 0) {
+      this.settleExit(animated);
+      return;
+    }
+
+    this.exitAnimationNames.set(animated, exitAnimations.map((animation) => animation.animationName));
+    animated.addEventListener("animationend", this.handleExitAnimationEnd);
+    animated.addEventListener("animationcancel", this.handleExitAnimationEnd);
+  }
+
+  handleExitAnimationEnd = (event) => {
+    // animationend bubbles — an animated child must not hide its container.
+    if (event.target !== event.currentTarget) return;
+    // Closing mid-open cancels the enter animation; only the exit run settles this.
+    if (!this.exitAnimationNames.get(event.currentTarget)?.includes(event.animationName)) return;
+
+    this.settleExit(event.currentTarget);
+  };
+
+  settleExit(animated) {
+    animated.removeEventListener("animationend", this.handleExitAnimationEnd);
+    animated.removeEventListener("animationcancel", this.handleExitAnimationEnd);
+    // Reopened mid-exit: it is on its way back in, leave it visible.
+    if (animated.dataset.state !== "closed") return;
+
+    this.afterExit(animated);
   }
 
   updatePosition() {

gem/lib/ruby_ui/dropdown_menu/dropdown_menu_content.rb

@@ -13,9 +13,10 @@ def view_template(&block)
     def default_attrs
       {
         data: {
-          state: :open
+          state: :open,
+          ruby_ui__dropdown_menu_target: "panel"
         },
-        class: "z-50 min-w-[8rem] rounded-md border bg-background p-1 text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 w-56"
+        class: "z-50 min-w-[8rem] rounded-md border bg-background p-1 text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:fill-mode-forwards data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 w-56"
       }
     end