[Bug Fix] Dialog: play the exit animation before closing the native <dialog>

[tvq]

Closing a Dialog cut the panel and its backdrop off in the same frame: dialog.close() drops open (and with it display) immediately, and Escape went through the native path untouched. Every other overlay animates out since #506; Dialog now does too.

• DialogContent keys its animations on data-state (set by the controller) instead of the open: variant, so the closed state can still render the exit. open:flex stays — a closed dialog remains hidden.
• The backdrop gets backdrop:duration-200 so it fades in step with the panel (--tw-duration is registered inherits: false, so ::backdrop does not pick the panel's duration up). The controller does not depend on the two matching.
• Controller: dismiss() sets data-state="closed", waits for the panel's and the backdrop's exit animations (getAnimations({subtree: true}) on the <dialog> filtered to its own effect.target, their finished promises, a token per run so a superseded run cannot settle a later one), then calls close(). This differs from the animationend block in the other overlays because the ::backdrop's events land on the <dialog> under the same keyframe names. cancel (Escape, requestClose()) is routed through dismiss(); a second one mid-exit is left to the browser (non-cancelable in Chrome anyway). A close the controller did not start settles the pending run. Backdrop click, focus restore and body scroll lock are unchanged. closedby="any" is not used: it would double-fire with the click handler and Safari support is recent.
• Teardown and scroll lock follow [Bug Fix] AlertDialog: render a native <dialog> and play the exit animation #518/[Bug Fix] Sheet: render a native <dialog> and close on Escape #520: disconnect() guards hasDialogTarget (a <dialog> removed before its wrapper no longer throws and the lock still lifts), and the body class is released only when no dialog:modal is left in the document, so a Dialog closed or removed on top of another modal keeps the page locked for the one underneath.
• Tests for the class contract; MCP registry rebuilt. Markup and usage unchanged.

AlertDialog and Combobox get the same treatment in separate PRs.

Test: /docs/dialog, each example — close via ×, Cancel, Escape and a backdrop click: panel and backdrop fade out (~200 ms) before the dialog disappears, focus returns to the trigger, page scroll is restored. Click inside stays open; reopen mid-exit comes back; open/close quickly still plays the full exit; Escape twice closes on the second press and the next cycle animates normally; a duration-* override on DialogContent closes after the longer of panel and backdrop. Open a second Dialog on top of the first and close or remove it: the page stays locked until the first one closes.

🤖 Generated with Claude Code

---

Summary by cubic

Fixes Dialog closing so the panel and backdrop animate out before the native <dialog> closes, and adds a show_close_button option to DialogContent.

Bug Fixes

• Animations key on data-state instead of the open: variant, so the closed state can render the exit; open:flex still keeps a closed dialog hidden.
• The backdrop shares the panel's duration via backdrop:duration-200.
• dismiss() sets data-state="closed", waits for the panel and backdrop exit animations to finish, then calls close(); Escape and requestClose() route through this path.
• Reopening mid-exit cancels the pending run, and a second Escape mid-exit closes natively where the browser allows it.
• Teardown and scroll-lock release are guarded: removing a dialog no longer throws, and the lock stays while another modal dialog (nested Dialog, Sheet) is still open.

New Features

• DialogContent accepts show_close_button: false to hide the corner close button.
• Added a "No close button" docs example; docs triggers now use Button(variant: :outline) to match the Sheet and Drawer docs.

^{Written for commit a9c48ea. Summary will update on new commits.}

[cubic-dev-ai]

3 issues found across 4 files

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="gem/lib/ruby_ui/dialog/dialog_controller.js">

<violation number="1" location="gem/lib/ruby_ui/dialog/dialog_controller.js:60">
P2: When a second Escape arrives during an existing exit, this unconditional `preventDefault()` blocks browsers that expose that `cancel` event as cancelable. Return before preventing the event when `data-state` is already `closed`.</violation>

<violation number="2" location="gem/lib/ruby_ui/dialog/dialog_controller.js:75">
P2: `getAnimations()` does not include `::backdrop` animations by default, so this controller never tracks the backdrop exit. The native dialog closes on the panel's event, cutting off the backdrop whenever their timing differs. Track the `::backdrop` animation explicitly and settle only after the required exits complete.</violation>

<violation number="3" location="gem/lib/ruby_ui/dialog/dialog_controller.js:84">
P1: When a dialog is reopened and dismissed again before the prior animation event is delivered, the stale `exit` event matches this name-only map and closes the new run immediately. Track a dismissal generation or the specific animation run so events from older exits cannot settle the current one.</violation>
</file>

<sub>Reply with feedback, questions, or to request a fix.

Re-trigger cubic</sub>

[cubic-dev-ai]

1 issue found across 2 files (changes from recent commits).

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="mcp/data/registry.json">

<violation number="1" location="mcp/data/registry.json:1336">
P2: When a Dialog closes while a Command palette, CommandDialog, or AlertDialog is still open, releaseScrollLock() finds no `dialog:modal` and removes the shared `overflow-hidden` body class, unlocking the page under the still-open overlay. The guard only accounts for dialogs even though the same body lock is set by the Command and AlertDialog controllers (and Sheet doesn't use the body lock at all), so the comment "a Sheet may still be open underneath; the page stays locked for it" doesn't hold. Coordinate the lock with the other overlays (e.g. a shared reference-counted helper) instead of keying release on `dialog:modal` alone.</violation>
</file>

<sub>Tip: Review your code locally with the cubic CLI to iterate faster.

Re-trigger cubic</sub>

[cubic-dev-ai]

P2: When a Dialog closes while a Command palette, CommandDialog, or AlertDialog is still open, releaseScrollLock() finds no dialog:modal and removes the shared overflow-hidden body class, unlocking the page under the still-open overlay. The guard only accounts for dialogs even though the same body lock is set by the Command and AlertDialog controllers (and Sheet doesn't use the body lock at all), so the comment "a Sheet may still be open underneath; the page stays locked for it" doesn't hold. Coordinate the lock with the other overlays (e.g. a shared reference-counted helper) instead of keying release on dialog:modal alone.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At mcp/data/registry.json, line 1336:

<comment>When a Dialog closes while a Command palette, CommandDialog, or AlertDialog is still open, releaseScrollLock() finds no `dialog:modal` and removes the shared `overflow-hidden` body class, unlocking the page under the still-open overlay. The guard only accounts for dialogs even though the same body lock is set by the Command and AlertDialog controllers (and Sheet doesn't use the body lock at all), so the comment "a Sheet may still be open underneath; the page stays locked for it" doesn't hold. Coordinate the lock with the other overlays (e.g. a shared reference-counted helper) instead of keying release on `dialog:modal` alone.</comment>

<file context>
@@ -1333,7 +1333,7 @@
         {
           "path": "dialog_controller.js",
-          "content": "import { Controller } from \"@hotwired/stimulus\";\n\n// Connects to data-controller=\"ruby-ui--dialog\"\nexport default class extends Controller {\n  static targets = [\"dialog\"];\n  static values = {\n    open: {\n      type: Boolean,\n      default: false,\n    },\n  };\n\n  connect() {\n    this.dialogTarget.addEventListener(\"close\", this.handleClose);\n    this.dialogTarget.addEventListener(\"cancel\", this.handleCancel);\n    if (this.openValue) {\n      this.open();\n    }\n  }\n\n  disconnect() {\n    this.dialogTarget.removeEventListener(\"close\", this.handleClose);\n    this.dialogTarget.removeEventListener(\"cancel\", this.handleCancel);\n    // Nothing is left to wait for the exit animation, so apply the pending close now.\n    this.settleExit(this.dialogTarget);\n    document.body.classList.remove(\"overflow-hidden\");\n  }\n\n  open(e) {\n    e?.preventDefault();\n    this.dialogTarget.dataset.state = \"open\";\n    // Reopened mid-exit the dialog is still open; showModal() on an open dialog throws in older browsers.\n    if (!this.dialogTarget.open) this.dialogTarget.showModal();\n    document.body.classList.add(\"overflow-hidden\");\n  }\n\n  dismiss() {\n    if (this.dialogTarget.dataset.state === \"closed\") return;\n\n    this.dialogTarget.dataset.state = \"closed\";\n    this.hideAfterExitAnimation(this.dialogTarget);\n  }\n\n  afterExit() {\n    this.dialogTarget.close();\n  }\n\n  backdropClick(e) {\n    if (e.target === this.dialogTarget) {\n      this.dismiss();\n    }\n  }\n\n  // Escape (and requestClose()) fire cancel; route it through the exit animation.\n  handleCancel = (e) => {\n    // A cancelled file picker inside the dialog bubbles its own cancel event.\n    if (e.target !== this.dialogTarget) return;\n    // Already on its way out: let a second Escape close natively where the browser allows it.\n    if (this.dialogTarget.dataset.state === \"closed\") return;\n\n    e.preventDefault();\n    this.dismiss();\n  };\n\n  handleClose = () => {\n    document.body.classList.remove(\"overflow-hidden\");\n    // A close this controller did not start (a second Escape mid-exit) must not leave a pending exit behind.\n    this.settleExit(this.dialogTarget);\n  };\n\n  // Overlay exit — unlike the other overlays this waits on the Animation objects: the ::backdrop animates too,\n  // and its events land on the <dialog> under the same keyframe names as the panel's.\n  hideAfterExitAnimation(animated) {\n    const run = (this.exitRun = {});\n    // subtree: true is what lists the ::backdrop's animation; descendants are filtered back out.\n    const exitAnimations = animated\n      .getAnimations({ subtree: true })\n      .filter((animation) => animation instanceof CSSAnimation && animation.effect?.target === animated);\n\n    // No exit animation, or no box to run it in: nothing would ever finish.\n    if (exitAnimations.length === 0) {\n      this.settleExit(animated);\n      return;\n    }\n\n    // A cancelled exit (reopened mid-exit) counts as finished too.\n    Promise.allSettled(exitAnimations.map((animation) => animation.finished)).then(() => {\n      // A later dismiss or close owns the dialog now; this run is stale.\n      if (this.exitRun !== run) return;\n\n      this.settleExit(animated);\n    });\n  }\n\n  settleExit(animated) {\n    this.exitRun = null;\n    // Reopened mid-exit: it is on its way back in, leave it visible.\n    if (animated.dataset.state !== \"closed\") return;\n\n    this.afterExit(animated);\n  }\n}\n"
+          "content": "import { Controller } from \"@hotwired/stimulus\";\n\n// Connects to data-controller=\"ruby-ui--dialog\"\nexport default class extends Controller {\n  static targets = [\"dialog\"];\n  static values = {\n    open: {\n      type: Boolean,\n      default: false,\n    },\n  };\n\n  connect() {\n    this.dialogTarget.addEventListener(\"close\", this.handleClose);\n    this.dialogTarget.addEventListener(\"cancel\", this.handleCancel);\n    if (this.openValue) {\n      this.open();\n    }\n  }\n\n  disconnect() {\n    // The <dialog> may already be gone; the scroll lock must be lifted either way.\n    if (this.hasDialogTarget) {\n      this.dialogTarget.removeEventListener(\"close\", this.handleClose);\n      this.dialogTarget.removeEventListener(\"cancel\", this.handleCancel);\n      // Nothing is left to wait for the exit animation, so apply the pending close now.\n      this.settleExit(this.dialogTarget);\n    }\n    // Removed while open, the dialog fires no close event; the lock must not outlive it.\n    this.releaseScrollLock();\n  }\n\n  open(e) {\n    e?.preventDefault();\n    this.dialogTarget.dataset.state = \"open\";\n    // Reopened mid-exit the dialog is still open; showModal() on an open dialog throws in older browsers.\n    if (!this.dialogTarget.open) this.dialogTarget.showModal();\n    document.body.classList.add(\"overflow-hidden\");\n  }\n\n  dismiss() {\n    if (this.dialogTarget.dataset.state === \"closed\") return;\n\n    this.dialogTarget.dataset.state = \"closed\";\n    this.hideAfterExitAnimation(this.dialogTarget);\n  }\n\n  afterExit() {\n    this.dialogTarget.close();\n  }\n\n  backdropClick(e) {\n    if (e.target === this.dialogTarget) {\n      this.dismiss();\n    }\n  }\n\n  // Escape (and requestClose()) fire cancel; route it through the exit animation.\n  handleCancel = (e) => {\n    // A cancelled file picker inside the dialog bubbles its own cancel event.\n    if (e.target !== this.dialogTarget) return;\n    // Already on its way out: let a second Escape close natively where the browser allows it.\n    if (this.dialogTarget.dataset.state === \"closed\") return;\n\n    e.preventDefault();\n    this.dismiss();\n  };\n\n  handleClose = () => {\n    this.releaseScrollLock();\n    // A close this controller did not start (a second Escape mid-exit) must not leave a pending exit behind.\n    this.settleExit(this.dialogTarget);\n  };\n\n  // A nested Dialog or a Sheet may still be open underneath; the page stays locked for it.\n  releaseScrollLock() {\n    if (document.querySelector(\"dialog:modal\")) return;\n\n    document.body.classList.remove(\"overflow-hidden\");\n  }\n\n  // Overlay exit — unlike the other overlays this waits on the Animation objects: the ::backdrop animates too,\n  // and its events land on the <dialog> under the same keyframe names as the panel's.\n  hideAfterExitAnimation(animated) {\n    const run = (this.exitRun = {});\n    // subtree: true is what lists the ::backdrop's animation; descendants are filtered back out.\n    const exitAnimations = animated\n      .getAnimations({ subtree: true })\n      .filter((animation) => animation instanceof CSSAnimation && animation.effect?.target === animated);\n\n    // No exit animation, or no box to run it in: nothing would ever finish.\n    if (exitAnimations.length === 0) {\n      this.settleExit(animated);\n      return;\n    }\n\n    // A cancelled exit (reopened mid-exit) counts as finished too.\n    Promise.allSettled(exitAnimations.map((animation) => animation.finished)).then(() => {\n      // A later dismiss or close owns the dialog now; this run is stale.\n      if (this.exitRun !== run) return;\n\n      this.settleExit(animated);\n    });\n  }\n\n  settleExit(animated) {\n    this.exitRun = null;\n    // Reopened mid-exit: it is on its way back in, leave it visible.\n    if (animated.dataset.state !== \"closed\") return;\n\n    this.afterExit(animated);\n  }\n}\n"
         },
         {
</file context>