From 15a1d9f17d8598bd73a3c8eed25b23a06828d007 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Djalma=20Ara=C3=BAjo?= <djalma@nossomos.cc>
Date: Mon, 22 Jun 2026 17:07:44 -0300
Subject: [PATCH 1/2] [Feature] Dialog: use native <dialog> element (#343)

Replace the template-clone pattern with a native <dialog> element.
DialogContent now renders as <dialog> opened via showModal() and closed
via close(), gaining free top-layer rendering, native backdrop, built-in
focus trapping, and Esc-to-close. Body scroll-lock is preserved. All
existing public component API and Stimulus controller actions are
backward-compatible.
---
 gem/lib/ruby_ui/dialog/dialog_content.rb    | 26 ++----
 gem/lib/ruby_ui/dialog/dialog_controller.js | 31 +++++---
 gem/test/ruby_ui/dialog_test.rb             | 88 +++++++++++++++++++++
 3 files changed, 116 insertions(+), 29 deletions(-)

diff --git a/gem/lib/ruby_ui/dialog/dialog_content.rb b/gem/lib/ruby_ui/dialog/dialog_content.rb
index d6df40b06..5ed38a0e5 100644
--- a/gem/lib/ruby_ui/dialog/dialog_content.rb
+++ b/gem/lib/ruby_ui/dialog/dialog_content.rb
@@ -17,14 +17,9 @@ def initialize(size: :md, **attrs)
     end
 
     def view_template
-      template(data: {ruby_ui__dialog_target: "content"}) do
-        div(data_controller: "ruby-ui--dialog") do
-          backdrop
-          div(**attrs) do
-            yield
-            close_button
-          end
-        end
+      dialog(**attrs) do
+        yield
+        close_button
       end
     end
 
@@ -32,9 +27,10 @@ def view_template
 
     def default_attrs
       {
-        data_state: "open",
+        data_ruby_ui__dialog_target: "dialog",
+        data_action: "click->ruby-ui--dialog#backdropClick",
         class: [
-          "fixed flex flex-col pointer-events-auto left-[50%] top-[50%] z-50 w-full 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",
+          "fixed flex flex-col pointer-events-auto left-[50%] top-[50%] z-50 w-full max-h-screen overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 backdrop:bg-background/80 backdrop:backdrop-blur-sm open:animate-in open:fade-in-0 open:zoom-in-95 sm:rounded-lg md:w-full",
           SIZES[@size]
         ]
       }
@@ -43,7 +39,7 @@ def default_attrs
     def close_button
       button(
         type: "button",
-        class: "absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
+        class: "absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
         data_action: "click->ruby-ui--dialog#dismiss"
       ) do
         svg(
@@ -65,13 +61,5 @@ def close_button
         span(class: "sr-only") { "Close" }
       end
     end
-
-    def backdrop
-      div(
-        data_state: "open",
-        data_action: "click->ruby-ui--dialog#dismiss esc->ruby-ui--dialog#dismiss",
-        class: "fixed pointer-events-auto inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=open]:fade-in-0"
-      )
-    end
   end
 end
diff --git a/gem/lib/ruby_ui/dialog/dialog_controller.js b/gem/lib/ruby_ui/dialog/dialog_controller.js
index 26bf1fa00..57986e779 100644
--- a/gem/lib/ruby_ui/dialog/dialog_controller.js
+++ b/gem/lib/ruby_ui/dialog/dialog_controller.js
@@ -1,8 +1,8 @@
 import { Controller } from "@hotwired/stimulus"
 
-// Connects to data-controller="dialog"
+// Connects to data-controller="ruby-ui--dialog"
 export default class extends Controller {
-  static targets = ["content"]
+  static targets = ["dialog"]
   static values = {
     open: {
       type: Boolean,
@@ -11,22 +11,33 @@ export default class extends Controller {
   }
 
   connect() {
+    this.dialogTarget.addEventListener("close", this.handleClose)
     if (this.openValue) {
       this.open()
     }
   }
 
+  disconnect() {
+    this.dialogTarget.removeEventListener("close", this.handleClose)
+  }
+
   open(e) {
-    e?.preventDefault();
-    document.body.insertAdjacentHTML('beforeend', this.contentTarget.innerHTML)
-    // prevent scroll on body
-    document.body.classList.add('overflow-hidden')
+    e?.preventDefault()
+    this.dialogTarget.showModal()
+    document.body.classList.add("overflow-hidden")
   }
 
   dismiss() {
-    // allow scroll on body
-    document.body.classList.remove('overflow-hidden')
-    // remove the element
-    this.element.remove()
+    this.dialogTarget.close()
+  }
+
+  backdropClick(e) {
+    if (e.target === this.dialogTarget) {
+      this.dismiss()
+    }
+  }
+
+  handleClose = () => {
+    document.body.classList.remove("overflow-hidden")
   }
 }
diff --git a/gem/test/ruby_ui/dialog_test.rb b/gem/test/ruby_ui/dialog_test.rb
index b6814feb4..19307ba06 100644
--- a/gem/test/ruby_ui/dialog_test.rb
+++ b/gem/test/ruby_ui/dialog_test.rb
@@ -33,4 +33,92 @@ def test_render_with_all_items
 
     assert_match(/Open Dialog/, output)
   end
+
+  # Regression test for #343: Dialog content must use native <dialog> element, not <div>
+  def test_dialog_content_renders_native_dialog_element
+    output = phlex do
+      RubyUI.Dialog do
+        RubyUI.DialogContent { "Content" }
+      end
+    end
+
+    assert_match(/<dialog[\s>]/, output, "DialogContent must render a native <dialog> element")
+    refute_match(/<template[\s>]/, output, "DialogContent must not use a <template> element")
+  end
+
+  def test_dialog_wrapper_renders_as_div_with_stimulus_controller
+    output = phlex do
+      RubyUI.Dialog do
+        RubyUI.DialogContent { "Content" }
+      end
+    end
+
+    assert_match(/data-controller="ruby-ui--dialog"/, output)
+    assert_match(/<div[^>]*data-controller="ruby-ui--dialog"/, output, "Dialog wrapper must be a <div>")
+  end
+
+  def test_dialog_content_has_stimulus_target
+    output = phlex do
+      RubyUI.Dialog do
+        RubyUI.DialogContent { "Content" }
+      end
+    end
+
+    assert_match(/data-ruby-ui--dialog-target="dialog"/, output)
+  end
+
+  def test_dialog_content_has_backdrop_click_action
+    output = phlex do
+      RubyUI.Dialog do
+        RubyUI.DialogContent { "Content" }
+      end
+    end
+
+    assert_match(/data-action="click->ruby-ui--dialog#backdropClick"/, output)
+  end
+
+  def test_dialog_content_sizes
+    {xs: "max-w-sm", sm: "max-w-md", md: "max-w-lg", lg: "max-w-2xl", xl: "max-w-4xl", full: "max-w-full"}.each do |size, expected_class|
+      output = phlex do
+        RubyUI.Dialog do
+          RubyUI.DialogContent(size: size) { "Content" }
+        end
+      end
+
+      assert_match(/#{Regexp.escape(expected_class)}/, output, "Size #{size} should apply class #{expected_class}")
+    end
+  end
+
+  def test_dialog_open_value_is_set_on_wrapper
+    output = phlex do
+      RubyUI.Dialog(open: true) do
+        RubyUI.DialogContent { "Content" }
+      end
+    end
+
+    assert_match(/data-ruby-ui--dialog-open-value/, output)
+  end
+
+  def test_close_button_has_dismiss_action
+    output = phlex do
+      RubyUI.Dialog do
+        RubyUI.DialogContent { "Content" }
+      end
+    end
+
+    assert_match(/data-action="click->ruby-ui--dialog#dismiss"/, output)
+  end
+
+  def test_trigger_has_open_action
+    output = phlex do
+      RubyUI.Dialog do
+        RubyUI.DialogTrigger do
+          RubyUI.Button { "Open" }
+        end
+        RubyUI.DialogContent { "Content" }
+      end
+    end
+
+    assert_match(/data-action="click->ruby-ui--dialog#open"/, output)
+  end
 end

From 9290140aa93069bded04df63b558eca07373da79 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Djalma=20Ara=C3=BAjo?= <djalma@nossomos.cc>
Date: Mon, 22 Jun 2026 17:40:10 -0300
Subject: [PATCH 2/2] [Bug Fix] Dialog: clear body scroll lock on disconnect
 and rebuild MCP registry (#435)

Clear overflow-hidden from body in disconnect() so Turbo navigation while
a dialog is open does not leave a permanent scroll lock. Also rebuilt the
MCP registry to include the native-dialog changes from this PR.
---
 gem/lib/ruby_ui/dialog/dialog_controller.js | 1 +
 mcp/data/registry.json                      | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/gem/lib/ruby_ui/dialog/dialog_controller.js b/gem/lib/ruby_ui/dialog/dialog_controller.js
index 57986e779..7b7e368cc 100644
--- a/gem/lib/ruby_ui/dialog/dialog_controller.js
+++ b/gem/lib/ruby_ui/dialog/dialog_controller.js
@@ -19,6 +19,7 @@ export default class extends Controller {
 
   disconnect() {
     this.dialogTarget.removeEventListener("close", this.handleClose)
+    document.body.classList.remove("overflow-hidden")
   }
 
   open(e) {
diff --git a/mcp/data/registry.json b/mcp/data/registry.json
index 8fa00b3f8..7918bbcc2 100644
--- a/mcp/data/registry.json
+++ b/mcp/data/registry.json
@@ -1253,11 +1253,11 @@
         },
         {
           "path": "dialog_content.rb",
-          "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class DialogContent < Base\n    SIZES = {\n      xs: \"max-w-sm\",\n      sm: \"max-w-md\",\n      md: \"max-w-lg\",\n      lg: \"max-w-2xl\",\n      xl: \"max-w-4xl\",\n      full: \"max-w-full\"\n    }\n\n    def initialize(size: :md, **attrs)\n      @size = size\n      super(**attrs)\n    end\n\n    def view_template\n      template(data: {ruby_ui__dialog_target: \"content\"}) do\n        div(data_controller: \"ruby-ui--dialog\") do\n          backdrop\n          div(**attrs) do\n            yield\n            close_button\n          end\n        end\n      end\n    end\n\n    private\n\n    def default_attrs\n      {\n        data_state: \"open\",\n        class: [\n          \"fixed flex flex-col pointer-events-auto left-[50%] top-[50%] z-50 w-full 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          SIZES[@size]\n        ]\n      }\n    end\n\n    def close_button\n      button(\n        type: \"button\",\n        class: \"absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground\",\n        data_action: \"click->ruby-ui--dialog#dismiss\"\n      ) do\n        svg(\n          width: \"15\",\n          height: \"15\",\n          viewbox: \"0 0 15 15\",\n          fill: \"none\",\n          xmlns: \"http://www.w3.org/2000/svg\",\n          class: \"h-4 w-4\"\n        ) do |s|\n          s.path(\n            d:\n                  \"M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z\",\n            fill: \"currentColor\",\n            fill_rule: \"evenodd\",\n            clip_rule: \"evenodd\"\n          )\n        end\n        span(class: \"sr-only\") { \"Close\" }\n      end\n    end\n\n    def backdrop\n      div(\n        data_state: \"open\",\n        data_action: \"click->ruby-ui--dialog#dismiss esc->ruby-ui--dialog#dismiss\",\n        class: \"fixed pointer-events-auto inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=open]:fade-in-0\"\n      )\n    end\n  end\nend\n"
+          "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class DialogContent < Base\n    SIZES = {\n      xs: \"max-w-sm\",\n      sm: \"max-w-md\",\n      md: \"max-w-lg\",\n      lg: \"max-w-2xl\",\n      xl: \"max-w-4xl\",\n      full: \"max-w-full\"\n    }\n\n    def initialize(size: :md, **attrs)\n      @size = size\n      super(**attrs)\n    end\n\n    def view_template\n      dialog(**attrs) do\n        yield\n        close_button\n      end\n    end\n\n    private\n\n    def default_attrs\n      {\n        data_ruby_ui__dialog_target: \"dialog\",\n        data_action: \"click->ruby-ui--dialog#backdropClick\",\n        class: [\n          \"fixed flex flex-col pointer-events-auto left-[50%] top-[50%] z-50 w-full max-h-screen overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 backdrop:bg-background/80 backdrop:backdrop-blur-sm open:animate-in open:fade-in-0 open:zoom-in-95 sm:rounded-lg md:w-full\",\n          SIZES[@size]\n        ]\n      }\n    end\n\n    def close_button\n      button(\n        type: \"button\",\n        class: \"absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none\",\n        data_action: \"click->ruby-ui--dialog#dismiss\"\n      ) do\n        svg(\n          width: \"15\",\n          height: \"15\",\n          viewbox: \"0 0 15 15\",\n          fill: \"none\",\n          xmlns: \"http://www.w3.org/2000/svg\",\n          class: \"h-4 w-4\"\n        ) do |s|\n          s.path(\n            d:\n                  \"M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z\",\n            fill: \"currentColor\",\n            fill_rule: \"evenodd\",\n            clip_rule: \"evenodd\"\n          )\n        end\n        span(class: \"sr-only\") { \"Close\" }\n      end\n    end\n  end\nend\n"
         },
         {
           "path": "dialog_controller.js",
-          "content": "import { Controller } from \"@hotwired/stimulus\"\n\n// Connects to data-controller=\"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(e) {\n    e?.preventDefault();\n    document.body.insertAdjacentHTML('beforeend', this.contentTarget.innerHTML)\n    // prevent scroll on body\n    document.body.classList.add('overflow-hidden')\n  }\n\n  dismiss() {\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--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    if (this.openValue) {\n      this.open()\n    }\n  }\n\n  disconnect() {\n    this.dialogTarget.removeEventListener(\"close\", this.handleClose)\n    document.body.classList.remove(\"overflow-hidden\")\n  }\n\n  open(e) {\n    e?.preventDefault()\n    this.dialogTarget.showModal()\n    document.body.classList.add(\"overflow-hidden\")\n  }\n\n  dismiss() {\n    this.dialogTarget.close()\n  }\n\n  backdropClick(e) {\n    if (e.target === this.dialogTarget) {\n      this.dismiss()\n    }\n  }\n\n  handleClose = () => {\n    document.body.classList.remove(\"overflow-hidden\")\n  }\n}\n"
         },
         {
           "path": "dialog_description.rb",