fixup dialog component

app/components/ruby_ui/dialog/dialog_content.rb

@@ -17,13 +17,11 @@ 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
+      dialog(data: {ruby_ui__dialog_target: "modal"}, class: "backdrop:bg-transparent") do
+        backdrop
+        div(**attrs) do
+          yield
+          close_button
         end
       end
     end
@@ -33,8 +31,9 @@ def view_template
     def default_attrs
       {
         data_state: "open",
+        data_ruby_ui__dialog_target: "content",
         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=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 left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closing]:animate-out data-[state=closing]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closing]:zoom-out-95 data-[state=open]:zoom-in-95  sm:rounded-lg",
           SIZES[@size]
         ]
       }
@@ -69,9 +68,10 @@ def close_button
     def backdrop
       div(
         data_state: "open",
+        data_ruby_ui__dialog_target: "backdrop",
         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=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+              "fixed pointer-events-auto inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closing]:animate-out data-[state=closing]:fade-out-0 duration-200 data-[state=open]:fade-in-0"
       )
     end
   end

app/javascript/controllers/ruby_ui/dialog_controller.js

@@ -2,7 +2,7 @@ import { Controller } from "@hotwired/stimulus"
 
 // Connects to data-controller="dialog"
 export default class extends Controller {
-  static targets = ["content"]
+  static targets = ["modal", "content", "backdrop"]
   static values = {
     open: {
       type: Boolean,
@@ -11,22 +11,42 @@ export default class extends Controller {
   }
 
   connect() {
-    if (this.openValue) {
-      this.open()
-    }
+    if (this.openValue) this.open()
   }
 
   open(e) {
-    e.preventDefault()
-    document.body.insertAdjacentHTML('beforeend', this.contentTarget.innerHTML)
-    // prevent scroll on body
-    document.body.classList.add('overflow-hidden')
+    // if (e) e.preventDefault()
+    this.modalTarget.showModal()
+
+    this.backdropTarget.setAttribute('data-state', 'open')
+    this.contentTarget.setAttribute('data-state', 'open')
   }
 
   dismiss() {
     // allow scroll on body
+    const content = this.contentTarget.querySelector('div[data-state]')
+    const backdrop = this.contentTarget.querySelector('div[data-action*="dismiss"]')
+    if (content) content.setAttribute('data-state', 'closing')
+    this.backdropTarget.setAttribute('data-state', 'closing')
+    this.contentTarget.setAttribute('data-state', 'closing')
+
+
+    Promise.all(
+      this.contentTarget.getAnimations().map((animation) => animation.finished),
+      this.backdropTarget.getAnimations().map((animation) => animation.finished),
+    ).then(() => {
+      this.contentTarget.removeAttribute("closing")
+      this.backdropTarget.removeAttribute("closing")
+      this.modalTarget.close()
+    })
+
     document.body.classList.remove('overflow-hidden')
-    // remove the element
-    this.element.remove()
+
+    // Hide after animation completes (150ms)
+    // setTimeout(() => {
+    //   this.contentTarget.removeAttribute("closing")
+    //   this.backdropTarget.removeAttribute("closing")
+    //   this.modalTarget.close()
+    // }, 600)
   }
 }

app/views/docs/dialog.rb

@@ -15,7 +15,8 @@ def view_template
             DialogTrigger do
               Button { "Open Dialog" }
             end
-            DialogContent do
+            # class: "backdrop:bg-black/80 border-red-500 border-2"
+            DialogContent() do
               DialogHeader do
                 DialogTitle { "RubyUI to the rescue" }
                 DialogDescription { "RubyUI helps you build accessible standard compliant web apps with ease" }