[Bug Fix] Dialog: match shadcn Base UI + vega

audit/component_map.yml

@@ -17,8 +17,8 @@ dialog:
     DialogMiddle: null
   props:
     Dialog: {open: open}
-    DialogContent: {showCloseButton: null}
-    DialogFooter: {showCloseButton: null}
+    DialogContent: {showCloseButton: show_close_button}
+    DialogFooter: {showCloseButton: show_close_button}
   rubyui_only:
     DialogContent: [size]
 

audit/divergences.yml

@@ -6,3 +6,9 @@
   shadcn: "<div role=\"dialog\">"
   reason: "Native modal dialog: the browser provides inert, Esc and focus handling."
   since: "2026-10-26"
+- component: dialog
+  dimension: HTML
+  rubyui: "DialogTrigger <div> wrapping its child; ARIA set on the first interactive descendant"
+  shadcn: "trigger is the <button> itself (render prop)"
+  reason: "Phlex has no render prop and callers pass non-button children; the wrapper only carries the Stimulus action."
+  since: "2026-10-29"

docs/app/views/docs/dialog.rb

@@ -38,7 +38,7 @@ def view_template
         RUBY
       end
 
-      render Docs::VisualCodeExample.new(title: "Size", description: "Applicable for wider screens", context: self) do
+      render Docs::VisualCodeExample.new(title: "Size", description: "Without a size, the dialog fills the viewport width up to 28rem (max-w-md) on wider screens. The sizes below apply on wider screens.", context: self) do
         <<~RUBY
           div(class: 'flex flex-wrap justify-center gap-2') do
             Dialog do
@@ -94,6 +94,25 @@ def view_template
         RUBY
       end
 
+      render Docs::VisualCodeExample.new(title: "Close button", description: "DialogContent shows a close button in the corner by default. Pass show_close_button: false to hide it, and show_close_button: true on DialogFooter to add a Close button to the footer.", context: self) do
+        <<~RUBY
+          Dialog do
+            DialogTrigger do
+              Button { "Open Dialog" }
+            end
+            DialogContent(show_close_button: false) do
+              DialogHeader do
+                DialogTitle { "RubyUI to the rescue" }
+                DialogDescription { "RubyUI helps you build accessible standard compliant web apps with ease" }
+              end
+              DialogFooter(show_close_button: true) do
+                Button { "Save" }
+              end
+            end
+          end
+        RUBY
+      end
+
       render Components::ComponentSetup::Tabs.new(component_name: component)
 
       render Docs::ComponentsTable.new(component_files(component))

gem/lib/generators/ruby_ui/dependencies.yml

@@ -58,6 +58,10 @@ data_table:
     - "Pagination"
     - "Table"
 
+dialog:
+  components:
+    - "Button"
+
 dropdown_menu:
   js_packages:
     - "@floating-ui/dom"

gem/lib/generators/ruby_ui/install/templates/tailwind.css.erb

@@ -134,6 +134,9 @@
   --color-warning-foreground: var(--warning-foreground);
   --color-success: var(--success);
   --color-success-foreground: var(--success-foreground);
+
+  /* Fonts */
+  --font-heading: var(--font-sans);
 }
 
 /* Container settings */

gem/lib/ruby_ui/dialog/dialog_content.rb

@@ -11,15 +11,18 @@ class DialogContent < Base
       full: "max-w-full"
     }
 
-    def initialize(size: :md, **attrs)
+    DEFAULT_WIDTH = "max-w-[calc(100%-2rem)] sm:max-w-md"
+
+    def initialize(size: nil, show_close_button: true, **attrs)
       @size = size
+      @show_close_button = show_close_button
       super(**attrs)
     end
 
     def view_template
       dialog(**attrs) do
         yield
-        close_button
+        close_button if @show_close_button
       end
     end
 
@@ -30,33 +33,31 @@ def default_attrs
         data_ruby_ui__dialog_target: "dialog",
         data_action: "pointerdown->ruby-ui--dialog#backdropPointerdown click->ruby-ui--dialog#backdropClick",
         class: [
-          "fixed open: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]
+          "fixed open:grid top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50 w-full gap-6 rounded-xl bg-popover p-6 text-sm text-popover-foreground outline-none ring-1 ring-foreground/10 backdrop:bg-black/10 supports-backdrop-filter:backdrop:backdrop-blur-xs",
+          "duration-100 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 motion-reduce:animate-none!",
+          "backdrop:duration-100 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 motion-reduce:backdrop:animate-none!",
+          SIZES.fetch(@size, DEFAULT_WIDTH)
         ]
       }
     end
 
     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",
+        class: "absolute top-4 end-4 size-8 shrink-0 rounded-[min(var(--radius-md),10px)] inline-flex items-center justify-center border border-transparent bg-clip-padding whitespace-nowrap outline-none select-none transition-all hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4",
         data_action: "click->ruby-ui--dialog#dismiss"
       ) do
         svg(
-          width: "15",
-          height: "15",
-          viewbox: "0 0 15 15",
-          fill: "none",
           xmlns: "http://www.w3.org/2000/svg",
-          class: "h-4 w-4"
+          viewbox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          stroke_width: "2",
+          stroke_linecap: "round",
+          stroke_linejoin: "round"
         ) do |s|
-          s.path(
-            d:
-                  "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",
-            fill: "currentColor",
-            fill_rule: "evenodd",
-            clip_rule: "evenodd"
-          )
+          s.path(d: "M18 6 6 18")
+          s.path(d: "m6 6 12 12")
         end
         span(class: "sr-only") { "Close" }
       end

gem/lib/ruby_ui/dialog/dialog_controller.js

@@ -1,8 +1,11 @@
 import { Controller } from "@hotwired/stimulus"
 
+// Prefix for generated ids, unique per page (ruby-ui-dialog-1-title, …).
+let dialogCount = 0
+
 // Connects to data-controller="ruby-ui--dialog"
 export default class extends Controller {
-  static targets = ["dialog"]
+  static targets = ["dialog", "title", "description", "trigger"]
   static values = {
     open: {
       type: Boolean,
@@ -11,25 +14,51 @@ export default class extends Controller {
   }
 
   connect() {
+    this.closing = false
     this.dialogTarget.addEventListener("close", this.handleClose)
+    this.dialogTarget.addEventListener("cancel", this.handleCancel)
+    this.wireAria()
     if (this.openValue) {
       this.open()
     }
   }
 
   disconnect() {
+    this.closing = false
     this.dialogTarget.removeEventListener("close", this.handleClose)
+    this.dialogTarget.removeEventListener("cancel", this.handleCancel)
     document.body.classList.remove("overflow-hidden")
   }
 
   open(e) {
     e?.preventDefault()
+    // Reopening during the exit animation must not be closed by the stale animation promise.
+    this.closing = false
+    this.dialogTarget.dataset.state = "open"
     this.dialogTarget.showModal()
     document.body.classList.add("overflow-hidden")
+    this.setTriggersExpanded(true)
   }
 
   dismiss() {
-    this.dialogTarget.close()
+    this.animateClose()
+  }
+
+  // Plays the exit animation on the panel and its ::backdrop, then closes.
+  async animateClose() {
+    if (this.closing || !this.dialogTarget.open) return
+
+    this.closing = true
+    this.dialogTarget.dataset.state = "closed"
+    await Promise.allSettled(this.ownAnimations().map((animation) => animation.finished))
+    // handleClose/disconnect reset `closing`: the dialog already closed (e.g. a forced
+    // second Esc) and may have been reopened since, so don't close it again.
+    if (this.closing) this.dialogTarget.close()
+  }
+
+  // Only the dialog's own animations (panel + ::backdrop), never its descendants'.
+  ownAnimations() {
+    return document.getAnimations().filter((animation) => animation.effect?.target === this.dialogTarget)
   }
 
   // The panel's own padding also reports the <dialog> as target, so only a press
@@ -53,7 +82,73 @@ export default class extends Controller {
     return e.clientX < rect.left || e.clientX > rect.right || e.clientY < rect.top || e.clientY > rect.bottom
   }
 
+  // Esc fires `cancel`; hold the native close so the exit animation can play.
+  // A dismissed <input type="file"> picker also fires a bubbling `cancel`; ignore it.
+  handleCancel = (e) => {
+    if (e.target !== this.dialogTarget) return
+    e.preventDefault()
+    this.animateClose()
+  }
+
   handleClose = () => {
+    this.closing = false
+    delete this.dialogTarget.dataset.state
     document.body.classList.remove("overflow-hidden")
+    this.setTriggersExpanded(false)
+  }
+
+  // Names the dialog after its title/description and ties each trigger to it.
+  // Never overwrites ids or ARIA the author already set.
+  wireAria() {
+    const dialog = this.dialogTarget
+    const prefix = `ruby-ui-dialog-${++dialogCount}`
+    const dialogId = this.ensureId(dialog, `${prefix}-content`)
+
+    const title = this.ownTarget(this.titleTargets)
+    if (title) {
+      const titleId = this.ensureId(title, `${prefix}-title`)
+      if (!dialog.hasAttribute("aria-labelledby") && !dialog.hasAttribute("aria-label")) {
+        dialog.setAttribute("aria-labelledby", titleId)
+      }
+    }
+
+    const description = this.ownTarget(this.descriptionTargets)
+    if (description) {
+      const descriptionId = this.ensureId(description, `${prefix}-description`)
+      if (!dialog.hasAttribute("aria-describedby")) {
+        dialog.setAttribute("aria-describedby", descriptionId)
+      }
+    }
+
+    this.triggerControls().forEach((control) => {
+      if (!control.hasAttribute("aria-haspopup")) control.setAttribute("aria-haspopup", "dialog")
+      if (!control.hasAttribute("aria-controls")) control.setAttribute("aria-controls", dialogId)
+      control.setAttribute("aria-expanded", String(dialog.open))
+    })
+  }
+
+  // First target that lives inside this controller's own <dialog>.
+  ownTarget(targets) {
+    return targets.find((target) => this.dialogTarget.contains(target))
+  }
+
+  ensureId(element, id) {
+    if (!element.id) element.id = id
+    return element.id
+  }
+
+  // The element that carries the trigger's role: a button/link inside the
+  // trigger wrapper, or the menuitem/button that wraps it. A role-less wrapper
+  // gets no ARIA. The `closest` lookup intentionally climbs above the Dialog root
+  // for the dropdown pattern (DropdownMenuItem wraps the Dialog, see
+  // docs/app/views/docs/dropdown_menu.rb).
+  triggerControls() {
+    return this.triggerTargets
+      .map((trigger) => trigger.querySelector("button, a[href], [role=button]") || trigger.closest("[role=menuitem], [role=button]"))
+      .filter(Boolean)
+  }
+
+  setTriggersExpanded(expanded) {
+    this.triggerControls().forEach((control) => control.setAttribute("aria-expanded", String(expanded)))
   }
 }

gem/lib/ruby_ui/dialog/dialog_description.rb

@@ -10,7 +10,8 @@ def view_template(&)
 
     def default_attrs
       {
-        class: "text-sm text-muted-foreground"
+        class: "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        data_ruby_ui__dialog_target: "description"
       }
     end
   end

gem/lib/ruby_ui/dialog/dialog_docs.rb

@@ -38,7 +38,7 @@ def view_template
         RUBY
       end
 
-      render Docs::VisualCodeExample.new(title: "Size", description: "Applicable for wider screens", context: self) do
+      render Docs::VisualCodeExample.new(title: "Size", description: "Without a size, the dialog fills the viewport width up to 28rem (max-w-md) on wider screens. The sizes below apply on wider screens.", context: self) do
         <<~RUBY
           div(class: 'flex flex-wrap justify-center gap-2') do
             Dialog do
@@ -94,6 +94,25 @@ def view_template
         RUBY
       end
 
+      render Docs::VisualCodeExample.new(title: "Close button", description: "DialogContent shows a close button in the corner by default. Pass show_close_button: false to hide it, and show_close_button: true on DialogFooter to add a Close button to the footer.", context: self) do
+        <<~RUBY
+          Dialog do
+            DialogTrigger do
+              Button { "Open Dialog" }
+            end
+            DialogContent(show_close_button: false) do
+              DialogHeader do
+                DialogTitle { "RubyUI to the rescue" }
+                DialogDescription { "RubyUI helps you build accessible standard compliant web apps with ease" }
+              end
+              DialogFooter(show_close_button: true) do
+                Button { "Save" }
+              end
+            end
+          end
+        RUBY
+      end
+
       render Components::ComponentSetup::Tabs.new(component_name: component)
 
       render Docs::ComponentsTable.new(component_files(component))

gem/lib/ruby_ui/dialog/dialog_footer.rb

@@ -2,16 +2,28 @@
 
 module RubyUI
   class DialogFooter < Base
-    def view_template(&)
-      div(**attrs, &)
+    def initialize(show_close_button: false, **attrs)
+      @show_close_button = show_close_button
+      super(**attrs)
+    end
+
+    def view_template
+      div(**attrs) do
+        yield if block_given?
+        close_button if @show_close_button
+      end
     end
 
     private
 
     def default_attrs
       {
-        class: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 gap-y-2 sm:gap-y-0 rtl:space-x-reverse"
+        class: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"
       }
     end
+
+    def close_button
+      Button(variant: :outline, data: {action: "click->ruby-ui--dialog#dismiss"}) { "Close" }
+    end
   end
 end

gem/lib/ruby_ui/dialog/dialog_header.rb

@@ -10,7 +10,7 @@ def view_template(&)
 
     def default_attrs
       {
-        class: "flex flex-col space-y-1.5 text-center sm:text-left rtl:sm:text-right"
+        class: "flex flex-col gap-2"
       }
     end
   end

gem/lib/ruby_ui/dialog/dialog_title.rb

@@ -3,14 +3,15 @@
 module RubyUI
   class DialogTitle < Base
     def view_template(&)
-      h3(**attrs, &)
+      h2(**attrs, &)
     end
 
     private
 
     def default_attrs
       {
-        class: "text-lg font-semibold leading-none tracking-tight"
+        class: "font-heading leading-none font-medium",
+        data_ruby_ui__dialog_target: "title"
       }
     end
   end

gem/lib/ruby_ui/dialog/dialog_trigger.rb

@@ -11,6 +11,7 @@ def view_template(&)
     def default_attrs
       {
         data: {
+          ruby_ui__dialog_target: "trigger",
           action: "click->ruby-ui--dialog#open"
         },
         class: "inline-block"