From 094accf16247406bf7f9b1ddda9399120d783ddb Mon Sep 17 00:00:00 2001
From: Tomek <tomek@humhubs.com>
Date: Fri, 28 Aug 2026 21:27:57 +0200
Subject: [PATCH 1/3] [Bug Fix] AlertDialog: render a native <dialog> and play
 the exit animation

AlertDialogContent rendered a <template> that the controller cloned to the
end of <body> on open and removed on dismiss: closing was a hard cut, there
was no Escape handling, no focus trap, no focus restore and the page behind
stayed interactive.

Render a native <dialog role="alertdialog"> in place and open it with
showModal(): top layer, inert background, focus trap and focus return come
from the platform. Behaviour matches shadcn/Radix AlertDialog: Escape closes
(cancel is intercepted so the exit animates), clicking the backdrop does not,
focus lands on Cancel (autofocus), Action dismisses too.

Enter and exit animate on the panel and on ::backdrop via data-state and
tw-animate-css, settled with the same "Overlay exit" block as #506 (copied
unchanged; afterExit() calls dialog.close()). ::backdrop animation events are
dispatched on the <dialog> under the same keyframe name, so the backdrop gets
backdrop:duration-200 to end together with the panel; with the default 150 ms
it settled the close early and cut the panel's exit short.

A second Escape during the exit is non-cancelable in Chrome (close watcher)
and closes hard; the close listener drops the exit listeners and the body
scroll lock so the next open starts clean.

The backdrop now uses bg-background/80 like Dialog, Sheet and CommandDialog
instead of bg-black/80. Public API and the docs example are unchanged.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../alert_dialog/alert_dialog_action.rb       |   5 +-
 .../alert_dialog/alert_dialog_cancel.rb       |   1 +
 .../alert_dialog/alert_dialog_content.rb      |  39 ++----
 .../alert_dialog/alert_dialog_controller.js   |  78 ++++++++++-
 gem/test/ruby_ui/alert_dialog_test.rb         | 121 ++++++++++++++++++
 5 files changed, 207 insertions(+), 37 deletions(-)
diff --git a/gem/lib/ruby_ui/alert_dialog/alert_dialog_action.rb b/gem/lib/ruby_ui/alert_dialog/alert_dialog_action.rb
index 75a34d2ef..17293ecd8 100644
--- a/gem/lib/ruby_ui/alert_dialog/alert_dialog_action.rb
+++ b/gem/lib/ruby_ui/alert_dialog/alert_dialog_action.rb
@@ -10,7 +10,10 @@ def view_template(&)
 
     def default_attrs
       {
-        variant: :primary
+        variant: :primary,
+        data: {
+          action: "click->ruby-ui--alert-dialog#dismiss"
+        }
       }
     end
   end
diff --git a/gem/lib/ruby_ui/alert_dialog/alert_dialog_cancel.rb b/gem/lib/ruby_ui/alert_dialog/alert_dialog_cancel.rb
index 986dc8d8e..5af2d1aa8 100644
--- a/gem/lib/ruby_ui/alert_dialog/alert_dialog_cancel.rb
+++ b/gem/lib/ruby_ui/alert_dialog/alert_dialog_cancel.rb
@@ -11,6 +11,7 @@ def view_template(&)
     def default_attrs
       {
         variant: :outline,
+        autofocus: true,
         data: {
           action: "click->ruby-ui--alert-dialog#dismiss"
         },
diff --git a/gem/lib/ruby_ui/alert_dialog/alert_dialog_content.rb b/gem/lib/ruby_ui/alert_dialog/alert_dialog_content.rb
index adc81fd4b..9da69fd25 100644
--- a/gem/lib/ruby_ui/alert_dialog/alert_dialog_content.rb
+++ b/gem/lib/ruby_ui/alert_dialog/alert_dialog_content.rb
@@ -2,42 +2,23 @@
 
 module RubyUI
   class AlertDialogContent < Base
-    def view_template(&block)
-      template(**attrs) do
-        div(data: {controller: "ruby-ui--alert-dialog"}) do
-          background
-          container(&block)
-        end
-      end
-    end
-
-    def background
-      div(
-        data_state: "open",
-        class: "fixed inset-0 z-50 bg-black/80 backdrop-blur-sm data-[state=open]:animate-in",
-        style: "pointer-events:auto",
-        data_aria_hidden: "true",
-        aria_hidden: "true"
-      )
-    end
-
-    def container(&)
-      div(
-        role: "alertdialog",
-        data_state: "open",
-        class: "flex flex-col fixed left-[50%] top-[50%] z-50 w-full max-w-lg max-h-screen overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:rounded-lg md:w-full",
-        style: "pointer-events:auto",
-        &
-      )
+    def view_template(&)
+      dialog(**attrs, &)
     end
 
     private
 
     def default_attrs
       {
+        role: "alertdialog",
         data: {
-          ruby_ui__alert_dialog_target: "content"
-        }
+          ruby_ui__alert_dialog_target: "dialog"
+        },
+        class: [
+          "fixed open:flex flex-col left-[50%] top-[50%] z-50 w-full max-w-lg max-h-screen overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg md:w-full",
+          "duration-200 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:fill-mode-forwards",
+          "backdrop:bg-background/80 backdrop:backdrop-blur-sm backdrop:duration-200 data-[state=open]:backdrop:animate-in data-[state=open]:backdrop:fade-in-0 data-[state=closed]:backdrop:animate-out data-[state=closed]:backdrop:fade-out-0 data-[state=closed]:backdrop:fill-mode-forwards"
+        ]
       }
     end
   end
diff --git a/gem/lib/ruby_ui/alert_dialog/alert_dialog_controller.js b/gem/lib/ruby_ui/alert_dialog/alert_dialog_controller.js
index 98952e955..54fc486f0 100644
--- a/gem/lib/ruby_ui/alert_dialog/alert_dialog_controller.js
+++ b/gem/lib/ruby_ui/alert_dialog/alert_dialog_controller.js
@@ -2,7 +2,7 @@ import { Controller } from "@hotwired/stimulus";
 
 // Connects to data-controller="ruby-ui--alert-dialog"
 export default class extends Controller {
-  static targets = ["content"];
+  static targets = ["dialog"];
   static values = {
     open: {
       type: Boolean,
@@ -11,21 +11,85 @@ export default class extends Controller {
   };
 
   connect() {
+    this.dialogTarget.addEventListener("cancel", this.handleCancel);
+    this.dialogTarget.addEventListener("close", this.handleClose);
     if (this.openValue) {
       this.open();
     }
   }
 
+  disconnect() {
+    this.dialogTarget.removeEventListener("cancel", this.handleCancel);
+    this.dialogTarget.removeEventListener("close", this.handleClose);
+    // Nothing is left to wait for the exit animation, so apply the pending close now.
+    this.settleExit(this.dialogTarget);
+    document.body.classList.remove("overflow-hidden");
+  }
+
   open() {
-    document.body.insertAdjacentHTML("beforeend", this.contentTarget.innerHTML);
-    // prevent scroll on body
+    this.dialogTarget.dataset.state = "open";
+    if (!this.dialogTarget.open) this.dialogTarget.showModal();
     document.body.classList.add("overflow-hidden");
   }
 
-  dismiss(e) {
-    // allow scroll on body
+  dismiss() {
+    if (this.dialogTarget.dataset.state === "closed") return;
+
+    this.dialogTarget.dataset.state = "closed";
+    // The backdrop's animationend lands on this element under the same name, so both exits run for the same 200 ms.
+    this.hideAfterExitAnimation(this.dialogTarget);
+  }
+
+  afterExit() {
+    this.dialogTarget.close();
+  }
+
+  // Escape (and requestClose) must play the exit animation instead of closing at once.
+  handleCancel = (event) => {
+    event.preventDefault();
+    this.dismiss();
+  };
+
+  // A close this controller did not start must not leave the exit listeners behind.
+  handleClose = () => {
     document.body.classList.remove("overflow-hidden");
-    // remove the element
-    this.element.remove();
+    this.settleExit(this.dialogTarget);
+  };
+
+  // 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);
   }
 }
diff --git a/gem/test/ruby_ui/alert_dialog_test.rb b/gem/test/ruby_ui/alert_dialog_test.rb
index 9c27fb710..ae36f240d 100644
--- a/gem/test/ruby_ui/alert_dialog_test.rb
+++ b/gem/test/ruby_ui/alert_dialog_test.rb
@@ -24,4 +24,125 @@ def test_render_with_all_items
 
     assert_match(/Show dialog/, output)
   end
+
+  # Regression test: content must be a native <dialog>, not a <template> cloned onto <body>
+  def test_content_renders_native_dialog_with_alertdialog_role
+    output = render_alert_dialog
+
+    assert_match(/<dialog[^>]*\srole="alertdialog"/, output, "AlertDialogContent must render a native <dialog role=\"alertdialog\">")
+    refute_match(/<template[\s>]/, output, "AlertDialogContent must not use a <template> element")
+  end
+
+  def test_content_does_not_nest_a_second_controller
+    output = render_alert_dialog
+
+    assert_equal 1, output.scan('data-controller="ruby-ui--alert-dialog"').size, "Only the wrapper carries the controller"
+    assert_match(/<div[^>]*data-controller="ruby-ui--alert-dialog"/, output, "AlertDialog wrapper must be a <div>")
+  end
+
+  def test_content_has_stimulus_target
+    assert_match(/<dialog[^>]*data-ruby-ui--alert-dialog-target="dialog"/, render_alert_dialog)
+  end
+
+  # Radix parity: Escape closes, clicking the backdrop does not
+  def test_content_has_no_backdrop_click_action
+    refute_match(/backdropClick/, render_alert_dialog)
+  end
+
+  # Regression test: a closed native <dialog> must stay hidden. Bare `flex`
+  # overrides the UA `dialog:not([open]) { display: none }`.
+  def test_content_does_not_force_display_when_closed
+    classes = dialog_classes(render_alert_dialog)
+
+    refute_includes classes, "flex", "Bare `flex` forces a closed <dialog> to display; use `open:flex`"
+    assert_includes classes, "open:flex", "AlertDialog must apply flex only when open (open:flex)"
+  end
+
+  # The controller owns data-state; the closed markup must not start in one
+  def test_content_renders_without_data_state
+    refute_match(/<dialog[^>]*\sdata-state=/, render_alert_dialog)
+  end
+
+  def test_content_has_enter_and_exit_animations
+    assert_dialog_classes(
+      "duration-200",
+      "data-[state=open]:animate-in",
+      "data-[state=open]:fade-in-0",
+      "data-[state=open]:zoom-in-95",
+      "data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0",
+      "data-[state=closed]:zoom-out-95",
+      "data-[state=closed]:fill-mode-forwards"
+    )
+  end
+
+  # The backdrop's animationend is dispatched on the <dialog> under the same keyframe name,
+  # so its exit must be as long as the panel's or the panel is cut short.
+  def test_content_animates_and_styles_backdrop
+    assert_dialog_classes(
+      "backdrop:bg-background/80",
+      "backdrop:backdrop-blur-sm",
+      "backdrop:duration-200",
+      "data-[state=open]:backdrop:animate-in",
+      "data-[state=open]:backdrop:fade-in-0",
+      "data-[state=closed]:backdrop:animate-out",
+      "data-[state=closed]:backdrop:fade-out-0",
+      "data-[state=closed]:backdrop:fill-mode-forwards"
+    )
+  end
+
+  def test_cancel_autofocuses_and_dismisses
+    output = phlex { RubyUI.AlertDialogCancel { "Cancel" } }
+
+    assert_match(/<button[^>]*\sautofocus[\s>]/, output, "Cancel must receive focus when the dialog opens")
+    assert_match(/data-action="click->ruby-ui--alert-dialog#dismiss"/, output)
+  end
+
+  def test_action_dismisses
+    output = phlex { RubyUI.AlertDialogAction { "Continue" } }
+
+    assert_match(/data-action="click->ruby-ui--alert-dialog#dismiss"/, output)
+  end
+
+  def test_action_keeps_user_supplied_actions
+    output = phlex { RubyUI.AlertDialogAction(data: {action: "click->account#destroy"}) { "Continue" } }
+
+    assert_match(/data-action="click->ruby-ui--alert-dialog#dismiss click->account#destroy"/, output)
+  end
+
+  def test_trigger_has_open_action
+    assert_match(/data-action="click->ruby-ui--alert-dialog#open"/, render_alert_dialog)
+  end
+
+  def test_open_value_is_set_on_wrapper
+    output = phlex do
+      RubyUI.AlertDialog(open: true) do
+        RubyUI.AlertDialogContent { "Content" }
+      end
+    end
+
+    assert_match(/data-ruby-ui--alert-dialog-open-value="true"/, output)
+  end
+
+  private
+
+  def render_alert_dialog
+    phlex do
+      RubyUI.AlertDialog do
+        RubyUI.AlertDialogTrigger do
+          RubyUI.Button { "Open" }
+        end
+        RubyUI.AlertDialogContent { "Content" }
+      end
+    end
+  end
+
+  def dialog_classes(output)
+    output[/<dialog\b.*?\sclass="([^"]*)"/m, 1].to_s.split
+  end
+
+  def assert_dialog_classes(*expected)
+    classes = dialog_classes(render_alert_dialog)
+    expected.each { |class_name| assert_includes classes, class_name }
+  end
 end

From 13d7f44c586e6e0dbd9948209ea4317810265402 Mon Sep 17 00:00:00 2001
From: Tomek <tomek@humhubs.com>
Date: Fri, 28 Aug 2026 21:27:57 +0200
Subject: [PATCH 2/3] chore(mcp): rebuild registry for the AlertDialog rewrite

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 mcp/data/registry.json | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/mcp/data/registry.json b/mcp/data/registry.json
index ed4cd153a..8283658e6 100644
--- a/mcp/data/registry.json
+++ b/mcp/data/registry.json
@@ -117,19 +117,19 @@
         },
         {
           "path": "alert_dialog_action.rb",
-          "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class AlertDialogAction < Base\n    def view_template(&)\n      render RubyUI::Button.new(**attrs, &)\n    end\n\n    private\n\n    def default_attrs\n      {\n        variant: :primary\n      }\n    end\n  end\nend\n"
+          "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class AlertDialogAction < Base\n    def view_template(&)\n      render RubyUI::Button.new(**attrs, &)\n    end\n\n    private\n\n    def default_attrs\n      {\n        variant: :primary,\n        data: {\n          action: \"click->ruby-ui--alert-dialog#dismiss\"\n        }\n      }\n    end\n  end\nend\n"
         },
         {
           "path": "alert_dialog_cancel.rb",
-          "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class AlertDialogCancel < Base\n    def view_template(&)\n      render RubyUI::Button.new(**attrs, &)\n    end\n\n    private\n\n    def default_attrs\n      {\n        variant: :outline,\n        data: {\n          action: \"click->ruby-ui--alert-dialog#dismiss\"\n        },\n        class: \"mt-2 sm:mt-0\"\n      }\n    end\n  end\nend\n"
+          "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class AlertDialogCancel < Base\n    def view_template(&)\n      render RubyUI::Button.new(**attrs, &)\n    end\n\n    private\n\n    def default_attrs\n      {\n        variant: :outline,\n        autofocus: true,\n        data: {\n          action: \"click->ruby-ui--alert-dialog#dismiss\"\n        },\n        class: \"mt-2 sm:mt-0\"\n      }\n    end\n  end\nend\n"
         },
         {
           "path": "alert_dialog_content.rb",
-          "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class AlertDialogContent < Base\n    def view_template(&block)\n      template(**attrs) do\n        div(data: {controller: \"ruby-ui--alert-dialog\"}) do\n          background\n          container(&block)\n        end\n      end\n    end\n\n    def background\n      div(\n        data_state: \"open\",\n        class: \"fixed inset-0 z-50 bg-black/80 backdrop-blur-sm data-[state=open]:animate-in\",\n        style: \"pointer-events:auto\",\n        data_aria_hidden: \"true\",\n        aria_hidden: \"true\"\n      )\n    end\n\n    def container(&)\n      div(\n        role: \"alertdialog\",\n        data_state: \"open\",\n        class: \"flex flex-col fixed left-[50%] top-[50%] z-50 w-full max-w-lg max-h-screen overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:rounded-lg md:w-full\",\n        style: \"pointer-events:auto\",\n        &\n      )\n    end\n\n    private\n\n    def default_attrs\n      {\n        data: {\n          ruby_ui__alert_dialog_target: \"content\"\n        }\n      }\n    end\n  end\nend\n"
+          "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class AlertDialogContent < Base\n    def view_template(&)\n      dialog(**attrs, &)\n    end\n\n    private\n\n    def default_attrs\n      {\n        role: \"alertdialog\",\n        data: {\n          ruby_ui__alert_dialog_target: \"dialog\"\n        },\n        class: [\n          \"fixed open:flex flex-col left-[50%] top-[50%] z-50 w-full max-w-lg max-h-screen overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg md:w-full\",\n          \"duration-200 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:fill-mode-forwards\",\n          \"backdrop:bg-background/80 backdrop:backdrop-blur-sm backdrop:duration-200 data-[state=open]:backdrop:animate-in data-[state=open]:backdrop:fade-in-0 data-[state=closed]:backdrop:animate-out data-[state=closed]:backdrop:fade-out-0 data-[state=closed]:backdrop:fill-mode-forwards\"\n        ]\n      }\n    end\n  end\nend\n"
         },
         {
           "path": "alert_dialog_controller.js",
-          "content": "import { Controller } from \"@hotwired/stimulus\";\n\n// Connects to data-controller=\"ruby-ui--alert-dialog\"\nexport default class extends Controller {\n  static targets = [\"content\"];\n  static values = {\n    open: {\n      type: Boolean,\n      default: false,\n    },\n  };\n\n  connect() {\n    if (this.openValue) {\n      this.open();\n    }\n  }\n\n  open() {\n    document.body.insertAdjacentHTML(\"beforeend\", this.contentTarget.innerHTML);\n    // prevent scroll on body\n    document.body.classList.add(\"overflow-hidden\");\n  }\n\n  dismiss(e) {\n    // allow scroll on body\n    document.body.classList.remove(\"overflow-hidden\");\n    // remove the element\n    this.element.remove();\n  }\n}\n"
+          "content": "import { Controller } from \"@hotwired/stimulus\";\n\n// Connects to data-controller=\"ruby-ui--alert-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(\"cancel\", this.handleCancel);\n    this.dialogTarget.addEventListener(\"close\", this.handleClose);\n    if (this.openValue) {\n      this.open();\n    }\n  }\n\n  disconnect() {\n    this.dialogTarget.removeEventListener(\"cancel\", this.handleCancel);\n    this.dialogTarget.removeEventListener(\"close\", this.handleClose);\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() {\n    this.dialogTarget.dataset.state = \"open\";\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    // The backdrop's animationend lands on this element under the same name, so both exits run for the same 200 ms.\n    this.hideAfterExitAnimation(this.dialogTarget);\n  }\n\n  afterExit() {\n    this.dialogTarget.close();\n  }\n\n  // Escape (and requestClose) must play the exit animation instead of closing at once.\n  handleCancel = (event) => {\n    event.preventDefault();\n    this.dismiss();\n  };\n\n  // A close this controller did not start must not leave the exit listeners behind.\n  handleClose = () => {\n    document.body.classList.remove(\"overflow-hidden\");\n    this.settleExit(this.dialogTarget);\n  };\n\n  // Overlay exit — the same block in every overlay controller, so keep them in sync.\n  exitAnimationNames = new WeakMap();\n\n  hideAfterExitAnimation(animated) {\n    const exitAnimations = animated\n      .getAnimations()\n      .filter((animation) => animation instanceof CSSAnimation);\n\n    // No exit animation, or no box to run it in: animationend would never fire.\n    if (exitAnimations.length === 0) {\n      this.settleExit(animated);\n      return;\n    }\n\n    this.exitAnimationNames.set(animated, exitAnimations.map((animation) => animation.animationName));\n    animated.addEventListener(\"animationend\", this.handleExitAnimationEnd);\n    animated.addEventListener(\"animationcancel\", this.handleExitAnimationEnd);\n  }\n\n  handleExitAnimationEnd = (event) => {\n    // animationend bubbles — an animated child must not hide its container.\n    if (event.target !== event.currentTarget) return;\n    // Closing mid-open cancels the enter animation; only the exit run settles this.\n    if (!this.exitAnimationNames.get(event.currentTarget)?.includes(event.animationName)) return;\n\n    this.settleExit(event.currentTarget);\n  };\n\n  settleExit(animated) {\n    animated.removeEventListener(\"animationend\", this.handleExitAnimationEnd);\n    animated.removeEventListener(\"animationcancel\", this.handleExitAnimationEnd);\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"
         },
         {
           "path": "alert_dialog_description.rb",

From 99d863ef22b8efce2d4d56d685e080e707b61a33 Mon Sep 17 00:00:00 2001
From: Tomek <tomek@humhubs.com>
Date: Fri, 28 Aug 2026 22:59:43 +0200
Subject: [PATCH 3/3] [Documentation] AlertDialog: outline trigger button,
 matching shadcn
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

shadcn's alert-dialog demo opens from <Button variant="outline">; the
primary button is reserved for the confirming action (Continue), with
Cancel as outline. Sheet and Drawer docs already follow that convention —
this brings AlertDialog in line so triggers read the same across overlays.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/views/docs/alert_dialog.rb               | 2 +-
 gem/lib/ruby_ui/alert_dialog/alert_dialog_docs.rb | 2 +-
 mcp/data/registry.json                            | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/app/views/docs/alert_dialog.rb b/docs/app/views/docs/alert_dialog.rb
index 43f176549..162d6c073 100644
--- a/docs/app/views/docs/alert_dialog.rb
+++ b/docs/app/views/docs/alert_dialog.rb
@@ -11,7 +11,7 @@ def view_template
         <<~RUBY
           AlertDialog do
             AlertDialogTrigger do
-              Button { "Show dialog" }
+              Button(variant: :outline) { "Show dialog" }
             end
             AlertDialogContent do
               AlertDialogHeader do
diff --git a/gem/lib/ruby_ui/alert_dialog/alert_dialog_docs.rb b/gem/lib/ruby_ui/alert_dialog/alert_dialog_docs.rb
index 43f176549..162d6c073 100644
--- a/gem/lib/ruby_ui/alert_dialog/alert_dialog_docs.rb
+++ b/gem/lib/ruby_ui/alert_dialog/alert_dialog_docs.rb
@@ -11,7 +11,7 @@ def view_template
         <<~RUBY
           AlertDialog do
             AlertDialogTrigger do
-              Button { "Show dialog" }
+              Button(variant: :outline) { "Show dialog" }
             end
             AlertDialogContent do
               AlertDialogHeader do
diff --git a/mcp/data/registry.json b/mcp/data/registry.json
index 8283658e6..9c7215e45 100644
--- a/mcp/data/registry.json
+++ b/mcp/data/registry.json
@@ -160,11 +160,11 @@
         "gems": []
       },
       "install_command": "rails g ruby_ui:component AlertDialog",
-      "docs_markdown": "# Alert Dialog\n\nA modal dialog that interrupts the user with important content and expects a response.\n\n## Usage\n\n### Example\n\n```ruby\nAlertDialog do\n  AlertDialogTrigger do\n    Button { \"Show dialog\" }\n  end\n  AlertDialogContent do\n    AlertDialogHeader do\n      AlertDialogTitle { \"Are you absolutely sure?\" }\n      AlertDialogDescription { \"This action cannot be undone. This will permanently delete your account and remove your data from our servers.\" }\n    end\n    AlertDialogFooter do\n      AlertDialogCancel { \"Cancel\" }\n      AlertDialogAction { \"Continue\" } # Will probably be a link to a controller action (e.g. delete account)\n    end\n  end\nend\n```",
+      "docs_markdown": "# Alert Dialog\n\nA modal dialog that interrupts the user with important content and expects a response.\n\n## Usage\n\n### Example\n\n```ruby\nAlertDialog do\n  AlertDialogTrigger do\n    Button(variant: :outline) { \"Show dialog\" }\n  end\n  AlertDialogContent do\n    AlertDialogHeader do\n      AlertDialogTitle { \"Are you absolutely sure?\" }\n      AlertDialogDescription { \"This action cannot be undone. This will permanently delete your account and remove your data from our servers.\" }\n    end\n    AlertDialogFooter do\n      AlertDialogCancel { \"Cancel\" }\n      AlertDialogAction { \"Continue\" } # Will probably be a link to a controller action (e.g. delete account)\n    end\n  end\nend\n```",
       "examples": [
         {
           "title": "Example",
-          "code": "AlertDialog do\n  AlertDialogTrigger do\n    Button { \"Show dialog\" }\n  end\n  AlertDialogContent do\n    AlertDialogHeader do\n      AlertDialogTitle { \"Are you absolutely sure?\" }\n      AlertDialogDescription { \"This action cannot be undone. This will permanently delete your account and remove your data from our servers.\" }\n    end\n    AlertDialogFooter do\n      AlertDialogCancel { \"Cancel\" }\n      AlertDialogAction { \"Continue\" } # Will probably be a link to a controller action (e.g. delete account)\n    end\n  end\nend\n",
+          "code": "AlertDialog do\n  AlertDialogTrigger do\n    Button(variant: :outline) { \"Show dialog\" }\n  end\n  AlertDialogContent do\n    AlertDialogHeader do\n      AlertDialogTitle { \"Are you absolutely sure?\" }\n      AlertDialogDescription { \"This action cannot be undone. This will permanently delete your account and remove your data from our servers.\" }\n    end\n    AlertDialogFooter do\n      AlertDialogCancel { \"Cancel\" }\n      AlertDialogAction { \"Continue\" } # Will probably be a link to a controller action (e.g. delete account)\n    end\n  end\nend\n",
           "language": "ruby"
         }
       ]
