From 021005c824aa29cf6434785069861986d8b72453 Mon Sep 17 00:00:00 2001
From: Tomek <tomek@humhubs.com>
Date: Sat, 29 Aug 2026 12:33:05 +0200
Subject: [PATCH 1/2] [Bug Fix] Sheet: render a native <dialog> and close on
 Escape

Sheet was the last overlay built on the old pattern: a <template> cloned
onto <body> with insertAdjacentHTML, wrapped in plain divs. That shape has
no Escape handling, no focus trap, no inert background and no focus
restore, and re-cloning the panel on every open threw away whatever the
user had typed into it.

In shadcn all four registry variants build Sheet out of the Dialog
primitive ("Extends the Dialog component"), which is where those
behaviours come from. SheetContent is now a native <dialog> opened with
showModal(), so the browser provides them. The cancel event is intercepted
so Escape plays the exit animation before the dialog actually closes,
matching Dialog (#517) and AlertDialog (#518) and reusing their exit block.

Since the component was rewritten anyway, the gaps against the shadcn API
are closed here too rather than in a follow-up: a SheetClose wrapper, a
show_close_button: option (which replaces the [&>button]:hidden hack in
MobileSidebar), the default w-3/4 sm:max-w-sm width for the left and right
sides, and data-side on the panel so a caller can target one side.

A modal <dialog> is pinned to every edge by inset: 0, so each side now
releases the opposite one and the box gets m-0/max-w-full/max-h-full.
not-open:hidden guards the UA display: none against a caller passing a
bare flex. The backdrop's exit lasts as long as the panel's because its
animationend is dispatched on the <dialog> under the same keyframe name.
Clicking the backdrop closes; clicking the panel's own padding, which
targets the same element, does not.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 docs/app/views/docs/sheet.rb                  |  57 ++++--
 gem/lib/ruby_ui/sheet/sheet_close.rb          |  17 ++
 gem/lib/ruby_ui/sheet/sheet_content.rb        |  52 +++---
 .../ruby_ui/sheet/sheet_content_controller.js |  48 ++++-
 gem/lib/ruby_ui/sheet/sheet_controller.js     |  22 ++-
 gem/lib/ruby_ui/sheet/sheet_docs.rb           |  57 ++++--
 gem/lib/ruby_ui/sidebar/mobile_sidebar.rb     |   3 +-
 gem/test/ruby_ui/sheet_test.rb                | 165 +++++++++++++++++-
 8 files changed, 335 insertions(+), 86 deletions(-)
 create mode 100644 gem/lib/ruby_ui/sheet/sheet_close.rb
diff --git a/docs/app/views/docs/sheet.rb b/docs/app/views/docs/sheet.rb
index 8865c0a2d..cb9fc9029 100644
--- a/docs/app/views/docs/sheet.rb
+++ b/docs/app/views/docs/sheet.rb
@@ -5,7 +5,7 @@ def view_template
     component = "Sheet"
 
     div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
-      render Docs::Header.new(title: "Sheet", description: "Extends the Sheet component to display content that complements the main content of the screen.")
+      render Docs::Header.new(title: "Sheet", description: "Extends the Dialog component to display content that complements the main content of the screen.")
 
       Heading(level: 2) { "Usage" }
 
@@ -15,7 +15,7 @@ def view_template
             SheetTrigger do
               Button(variant: :outline) { "Open Sheet" }
             end
-            SheetContent(class: 'sm:max-w-sm') do
+            SheetContent do
               SheetHeader do
                 SheetTitle { "Edit profile" }
                 SheetDescription { "Make changes to your profile here. Click save when you're done." }
@@ -28,7 +28,9 @@ def view_template
                 Input(placeholder: "joel@drapper.me")
               end
               SheetFooter do
-                Button(variant: :outline, data: { action: 'click->ruby-ui--sheet-content#close' }) { "Cancel" }
+                SheetClose do
+                  Button(variant: :outline) { "Cancel" }
+                end
                 Button(type: "submit") { "Save" }
               end
             end
@@ -38,27 +40,25 @@ def view_template
 
       render Docs::VisualCodeExample.new(title: "Side", description: "Use the side property to indicate the edge of the screen where the component will appear.", context: self) do
         <<~RUBY
-          div(class: 'grid grid-cols-2 gap-4') do
-            # -- TOP --
-            Sheet do
-              SheetTrigger do
-                Button(variant: :outline, class: 'w-full justify-center') { :top }
-              end
-              SheetContent(side: :top, class: ("sm:max-w-sm" if [:left, :right].include?(:top))) do
-                SheetHeader do
-                  SheetTitle { "Edit profile" }
-                  SheetDescription { "Make changes to your profile here. Click save when you're done." }
+          div(class: 'flex flex-wrap gap-2') do
+            [:top, :right, :bottom, :left].each do |side|
+              Sheet do
+                SheetTrigger do
+                  Button(variant: :outline, class: 'capitalize') { side.to_s }
                 end
-                Form do
+                SheetContent(side: side) do
+                  SheetHeader do
+                    SheetTitle { "Edit profile" }
+                    SheetDescription { "Make changes to your profile here. Click save when you're done." }
+                  end
                   SheetMiddle do
                     label { "Name" }
                     Input(placeholder: "Joel Drapper") { "Joel Drapper" }
-
-                    label { "Email" }
-                    Input(placeholder: "joel@drapper.me")
                   end
                   SheetFooter do
-                    Button(variant: :outline, data: { action: 'click->ruby-ui--sheet-content#close' }) { "Cancel" }
+                    SheetClose do
+                      Button(variant: :outline) { "Cancel" }
+                    end
                     Button(type: "submit") { "Save" }
                   end
                 end
@@ -68,6 +68,27 @@ def view_template
         RUBY
       end
 
+      render Docs::VisualCodeExample.new(title: "No close button", description: "Pass show_close_button: false to hide the close button in the corner. The sheet still closes on Escape or a click outside.", context: self) do
+        <<~RUBY
+          Sheet do
+            SheetTrigger do
+              Button(variant: :outline) { "Open Sheet" }
+            end
+            SheetContent(show_close_button: false) do
+              SheetHeader do
+                SheetTitle { "No close button" }
+                SheetDescription { "This sheet has no close button in the corner. Press Escape or click outside to close it." }
+              end
+              SheetFooter do
+                SheetClose do
+                  Button(variant: :outline) { "Close" }
+                end
+              end
+            end
+          end
+        RUBY
+      end
+
       render Components::ComponentSetup::Tabs.new(component_name: component)
 
       render Docs::ComponentsTable.new(component_files(component))
diff --git a/gem/lib/ruby_ui/sheet/sheet_close.rb b/gem/lib/ruby_ui/sheet/sheet_close.rb
new file mode 100644
index 000000000..dba1e8d3a
--- /dev/null
+++ b/gem/lib/ruby_ui/sheet/sheet_close.rb
@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SheetClose < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {action: "click->ruby-ui--sheet-content#close"}
+      }
+    end
+  end
+end
diff --git a/gem/lib/ruby_ui/sheet/sheet_content.rb b/gem/lib/ruby_ui/sheet/sheet_content.rb
index 596d29386..ab5661503 100644
--- a/gem/lib/ruby_ui/sheet/sheet_content.rb
+++ b/gem/lib/ruby_ui/sheet/sheet_content.rb
@@ -2,28 +2,25 @@
 
 module RubyUI
   class SheetContent < Base
+    # Per side: release the opposite edge (a modal <dialog> is pinned to all four by inset: 0),
+    # then the default size and the direction to slide in from.
     SIDE_CLASS = {
-      top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-      right: "inset-y-0 right-0 h-full border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
-      bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-      left: "inset-y-0 left-0 h-full border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left"
+      top: "inset-x-0 top-0 bottom-auto w-full h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+      right: "inset-y-0 right-0 left-auto h-full w-3/4 sm:max-w-sm border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
+      bottom: "inset-x-0 bottom-0 top-auto w-full h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+      left: "inset-y-0 left-0 right-auto h-full w-3/4 sm:max-w-sm border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left"
     }
 
-    def initialize(side: :right, **attrs)
+    def initialize(side: :right, show_close_button: true, **attrs)
       @side = side
-      @side_classes = SIDE_CLASS[side]
+      @show_close_button = show_close_button
       super(**attrs)
     end
 
     def view_template(&block)
-      template(data: {ruby_ui__sheet_target: "content"}) do
-        div(data: {controller: "ruby-ui--sheet-content"}) do
-          backdrop
-          div(**attrs) do
-            block&.call
-            close_button
-          end
-        end
+      dialog(**attrs) do
+        block&.call
+        close_button if @show_close_button
       end
     end
 
@@ -31,11 +28,20 @@ def view_template(&block)
 
     def default_attrs
       {
-        data_state: "open", # For animate in
-        data_ruby_ui__sheet_content_target: "panel",
+        data: {
+          controller: "ruby-ui--sheet-content",
+          ruby_ui__sheet_target: "dialog",
+          action: "click->ruby-ui--sheet-content#backdropClick",
+          side: @side
+        },
         class: [
-          "fixed pointer-events-auto z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards data-[state=closed]:duration-300 data-[state=open]:duration-500 overflow-scroll",
-          @side_classes
+          # UA <dialog> reset; not-open:hidden keeps a caller's bare `flex` from overriding the display: none of a closed dialog.
+          "m-0 max-w-full max-h-full not-open:hidden",
+          "fixed pointer-events-auto z-50 gap-4 bg-background text-foreground p-6 shadow-lg transition ease-in-out overflow-scroll",
+          "data-[state=open]:animate-in data-[state=open]:duration-500 data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=closed]:fill-mode-forwards",
+          # The ::backdrop's animationend lands on the dialog itself, so its exit must last as long as the panel's.
+          "backdrop:bg-background/80 backdrop:backdrop-blur-sm 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:duration-300 data-[state=closed]:backdrop:fill-mode-forwards",
+          SIDE_CLASS[@side]
         ]
       }
     end
@@ -65,15 +71,5 @@ def close_button
         span(class: "sr-only") { "Close" }
       end
     end
-
-    def backdrop
-      div(
-        data_state: "open",
-        data_action: "click->ruby-ui--sheet-content#close",
-        data_ruby_ui__sheet_content_target: "backdrop",
-        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 data-[state=closed]:fill-mode-forwards"
-      )
-    end
   end
 end
diff --git a/gem/lib/ruby_ui/sheet/sheet_content_controller.js b/gem/lib/ruby_ui/sheet/sheet_content_controller.js
index caef6910b..81ab3917b 100644
--- a/gem/lib/ruby_ui/sheet/sheet_content_controller.js
+++ b/gem/lib/ruby_ui/sheet/sheet_content_controller.js
@@ -1,24 +1,56 @@
 import { Controller } from "@hotwired/stimulus";
 
+// Connects to data-controller="ruby-ui--sheet-content" on the <dialog>; ruby-ui--sheet opens it.
 export default class extends Controller {
-  static targets = ["backdrop", "panel"];
+  connect() {
+    this.element.addEventListener("cancel", this.handleCancel);
+    this.element.addEventListener("close", this.handleClose);
+  }
 
   disconnect() {
-    // Nothing is left to wait for the exit animation, so apply the pending removal now.
-    if (this.hasPanelTarget) this.settleExit(this.panelTarget);
+    this.element.removeEventListener("cancel", this.handleCancel);
+    this.element.removeEventListener("close", this.handleClose);
+    // Nothing is left to wait for the exit animation, so apply the pending close now.
+    this.settleExit(this.element);
   }
 
   close() {
-    this.backdropTarget.dataset.state = "closed";
-    this.panelTarget.dataset.state = "closed";
-    // The panel carries the longer exit, so the backdrop has finished by the time it settles.
-    this.hideAfterExitAnimation(this.panelTarget);
+    if (this.element.dataset.state === "closed") return;
+
+    this.element.dataset.state = "closed";
+    // The ::backdrop's animationend lands on the dialog too; panel and backdrop share one exit duration so either settles it.
+    this.hideAfterExitAnimation(this.element);
   }
 
   afterExit() {
-    this.element.remove();
+    this.element.close();
+  }
+
+  // A click on the ::backdrop targets the dialog, but so does one on the panel's own padding: hit-test the box.
+  backdropClick(e) {
+    if (e.target === this.element && !this.coversPoint(e.clientX, e.clientY)) this.close();
+  }
+
+  coversPoint(x, y) {
+    const { top, right, bottom, left } = this.element.getBoundingClientRect();
+    return left <= x && x <= right && top <= y && y <= bottom;
   }
 
+  // Escape (and requestClose()) fire cancel; route it through the exit animation.
+  handleCancel = (e) => {
+    // A cancelled file picker inside the sheet bubbles its own cancel event.
+    if (e.target !== this.element) return;
+
+    e.preventDefault();
+    this.close();
+  };
+
+  handleClose = () => {
+    document.body.classList.remove("overflow-hidden");
+    // A close this controller did not start (a second Escape mid-exit) must not leave the exit listeners behind.
+    this.settleExit(this.element);
+  };
+
   // Overlay exit — the same block in every overlay controller, so keep them in sync.
   exitAnimationNames = new WeakMap();
 
diff --git a/gem/lib/ruby_ui/sheet/sheet_controller.js b/gem/lib/ruby_ui/sheet/sheet_controller.js
index 22ddf68d8..5a2ab6e6f 100644
--- a/gem/lib/ruby_ui/sheet/sheet_controller.js
+++ b/gem/lib/ruby_ui/sheet/sheet_controller.js
@@ -1,15 +1,23 @@
-import { Controller } from "@hotwired/stimulus"
+import { Controller } from "@hotwired/stimulus";
 
+// Connects to data-controller="ruby-ui--sheet"; opens the <dialog> that ruby-ui--sheet-content closes.
 export default class extends Controller {
-  static targets = ["content"]
-
-  static values = { open: false }
+  static targets = ["dialog"];
+  static values = { open: false };
 
   connect() {
-    if (this.openValue) this.open()
+    if (this.openValue) this.open();
+  }
+
+  disconnect() {
+    document.body.classList.remove("overflow-hidden");
   }
 
-  open() {
-    document.body.insertAdjacentHTML("beforeend", this.contentTarget.innerHTML)
+  open(e) {
+    e?.preventDefault();
+    this.dialogTarget.dataset.state = "open";
+    // Reopened mid-exit the dialog is still open; showModal() on an open dialog throws in older browsers.
+    if (!this.dialogTarget.open) this.dialogTarget.showModal();
+    document.body.classList.add("overflow-hidden");
   }
 }
diff --git a/gem/lib/ruby_ui/sheet/sheet_docs.rb b/gem/lib/ruby_ui/sheet/sheet_docs.rb
index 8865c0a2d..cb9fc9029 100644
--- a/gem/lib/ruby_ui/sheet/sheet_docs.rb
+++ b/gem/lib/ruby_ui/sheet/sheet_docs.rb
@@ -5,7 +5,7 @@ def view_template
     component = "Sheet"
 
     div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
-      render Docs::Header.new(title: "Sheet", description: "Extends the Sheet component to display content that complements the main content of the screen.")
+      render Docs::Header.new(title: "Sheet", description: "Extends the Dialog component to display content that complements the main content of the screen.")
 
       Heading(level: 2) { "Usage" }
 
@@ -15,7 +15,7 @@ def view_template
             SheetTrigger do
               Button(variant: :outline) { "Open Sheet" }
             end
-            SheetContent(class: 'sm:max-w-sm') do
+            SheetContent do
               SheetHeader do
                 SheetTitle { "Edit profile" }
                 SheetDescription { "Make changes to your profile here. Click save when you're done." }
@@ -28,7 +28,9 @@ def view_template
                 Input(placeholder: "joel@drapper.me")
               end
               SheetFooter do
-                Button(variant: :outline, data: { action: 'click->ruby-ui--sheet-content#close' }) { "Cancel" }
+                SheetClose do
+                  Button(variant: :outline) { "Cancel" }
+                end
                 Button(type: "submit") { "Save" }
               end
             end
@@ -38,27 +40,25 @@ def view_template
 
       render Docs::VisualCodeExample.new(title: "Side", description: "Use the side property to indicate the edge of the screen where the component will appear.", context: self) do
         <<~RUBY
-          div(class: 'grid grid-cols-2 gap-4') do
-            # -- TOP --
-            Sheet do
-              SheetTrigger do
-                Button(variant: :outline, class: 'w-full justify-center') { :top }
-              end
-              SheetContent(side: :top, class: ("sm:max-w-sm" if [:left, :right].include?(:top))) do
-                SheetHeader do
-                  SheetTitle { "Edit profile" }
-                  SheetDescription { "Make changes to your profile here. Click save when you're done." }
+          div(class: 'flex flex-wrap gap-2') do
+            [:top, :right, :bottom, :left].each do |side|
+              Sheet do
+                SheetTrigger do
+                  Button(variant: :outline, class: 'capitalize') { side.to_s }
                 end
-                Form do
+                SheetContent(side: side) do
+                  SheetHeader do
+                    SheetTitle { "Edit profile" }
+                    SheetDescription { "Make changes to your profile here. Click save when you're done." }
+                  end
                   SheetMiddle do
                     label { "Name" }
                     Input(placeholder: "Joel Drapper") { "Joel Drapper" }
-
-                    label { "Email" }
-                    Input(placeholder: "joel@drapper.me")
                   end
                   SheetFooter do
-                    Button(variant: :outline, data: { action: 'click->ruby-ui--sheet-content#close' }) { "Cancel" }
+                    SheetClose do
+                      Button(variant: :outline) { "Cancel" }
+                    end
                     Button(type: "submit") { "Save" }
                   end
                 end
@@ -68,6 +68,27 @@ def view_template
         RUBY
       end
 
+      render Docs::VisualCodeExample.new(title: "No close button", description: "Pass show_close_button: false to hide the close button in the corner. The sheet still closes on Escape or a click outside.", context: self) do
+        <<~RUBY
+          Sheet do
+            SheetTrigger do
+              Button(variant: :outline) { "Open Sheet" }
+            end
+            SheetContent(show_close_button: false) do
+              SheetHeader do
+                SheetTitle { "No close button" }
+                SheetDescription { "This sheet has no close button in the corner. Press Escape or click outside to close it." }
+              end
+              SheetFooter do
+                SheetClose do
+                  Button(variant: :outline) { "Close" }
+                end
+              end
+            end
+          end
+        RUBY
+      end
+
       render Components::ComponentSetup::Tabs.new(component_name: component)
 
       render Docs::ComponentsTable.new(component_files(component))
diff --git a/gem/lib/ruby_ui/sidebar/mobile_sidebar.rb b/gem/lib/ruby_ui/sidebar/mobile_sidebar.rb
index 3ecc69764..80cb6818f 100644
--- a/gem/lib/ruby_ui/sidebar/mobile_sidebar.rb
+++ b/gem/lib/ruby_ui/sidebar/mobile_sidebar.rb
@@ -13,7 +13,8 @@ def view_template(&)
       Sheet(**attrs) do
         SheetContent(
           side: @side,
-          class: "w-[var(--sidebar-width)] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",
+          show_close_button: false,
+          class: "w-[var(--sidebar-width)] bg-sidebar p-0 text-sidebar-foreground",
           style: {
             "--sidebar-width": SIDEBAR_WIDTH_MOBILE
           },
diff --git a/gem/test/ruby_ui/sheet_test.rb b/gem/test/ruby_ui/sheet_test.rb
index 57e206b59..749ae53fa 100644
--- a/gem/test/ruby_ui/sheet_test.rb
+++ b/gem/test/ruby_ui/sheet_test.rb
@@ -20,7 +20,7 @@ def test_render_with_all_items
             RubyUI.Input(placeholder: "joel@drapper.me")
 
             RubyUI.SheetFooter do
-              RubyUI.Button(variant: :outline, data: {action: "click->ruby-ui--sheet-content#close"}) { "Cancel" }
+              RubyUI.SheetClose { RubyUI.Button(variant: :outline) { "Cancel" } }
               RubyUI.Button(type: "submit") { "Save" }
             end
           end
@@ -43,12 +43,165 @@ def test_render_open_when_open_is_true
     assert_match(/data-ruby-ui--sheet-open-value="true"/, output)
   end
 
-  # Removal lands a frame after the animation ends; without a forwards fill mode that frame flashes.
-  def test_content_and_backdrop_hold_the_last_frame_of_the_exit_animation
-    output = phlex do
-      RubyUI.SheetContent { "sheet body" }
+  def test_trigger_has_open_action
+    assert_match(/data-action="click->ruby-ui--sheet#open"/, render_sheet)
+  end
+
+  # Regression test: content must be a native <dialog>, not a <template> cloned onto <body>
+  def test_content_renders_native_dialog
+    output = render_sheet
+
+    assert_match(/<dialog\b/, output, "SheetContent must render a native <dialog>")
+    refute_match(/<template[\s>]/, output, "SheetContent must not use a <template> element")
+  end
+
+  def test_content_is_the_sheet_target_and_carries_the_content_controller
+    tag = dialog_tag(render_sheet)
+
+    assert_match(/\sdata-controller="ruby-ui--sheet-content"/, tag)
+    assert_match(/\sdata-ruby-ui--sheet-target="dialog"/, tag)
+  end
+
+  def test_content_closes_on_backdrop_click
+    assert_match(/\sdata-action="click->ruby-ui--sheet-content#backdropClick"/, dialog_tag(render_sheet))
+  end
+
+  def test_content_keeps_user_supplied_actions
+    tag = dialog_tag(render_content(data: {action: "keydown->form#guard"}))
+
+    assert_match(/data-action="click->ruby-ui--sheet-content#backdropClick keydown->form#guard"/, tag)
+  end
+
+  def test_close_button_closes
+    assert_match(/<button[^>]*\sdata-action="click->ruby-ui--sheet-content#close"/, render_sheet)
+  end
+
+  # The controller owns data-state; the closed markup must not start in one
+  def test_content_renders_without_data_state
+    refute_match(/\sdata-state=/, dialog_tag(render_sheet))
+  end
+
+  # A caller's bare `flex` would override the UA `dialog:not([open]) { display: none }`.
+  def test_content_stays_hidden_when_closed
+    assert_dialog_classes("not-open:hidden", "flex", class: "flex flex-col")
+  end
+
+  def test_content_resets_the_ua_dialog_box
+    assert_dialog_classes("m-0", "max-w-full", "max-h-full", "text-foreground")
+  end
+
+  def test_content_has_enter_and_exit_animations
+    assert_dialog_classes(
+      "data-[state=open]:animate-in",
+      "data-[state=open]:duration-500",
+      "data-[state=closed]:animate-out",
+      "data-[state=closed]:duration-300",
+      "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",
+      "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:duration-300",
+      "data-[state=closed]:backdrop:fill-mode-forwards"
+    )
+  end
+
+  # The UA sheet pins a modal <dialog> to every edge (inset: 0); each side must release the opposite one.
+  def test_each_side_pins_one_edge
+    {
+      right: %w[inset-y-0 right-0 left-auto h-full w-3/4 data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right],
+      left: %w[inset-y-0 left-0 right-auto h-full w-3/4 data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left],
+      top: %w[inset-x-0 top-0 bottom-auto w-full h-auto data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top],
+      bottom: %w[inset-x-0 bottom-0 top-auto w-full h-auto data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom]
+    }.each { |side, expected| assert_dialog_classes(*expected, side: side) }
+  end
+
+  def test_close_wraps_its_content_with_the_close_action
+    output = phlex { RubyUI.SheetClose { RubyUI.Button { "Cancel" } } }
+
+    assert_match(/<div data-action="click->ruby-ui--sheet-content#close"><button/, output)
+  end
+
+  def test_close_keeps_user_supplied_actions
+    output = phlex { RubyUI.SheetClose(data: {action: "click->form#reset"}) { "Cancel" } }
+
+    assert_match(/data-action="click->ruby-ui--sheet-content#close click->form#reset"/, output)
+  end
+
+  def test_close_button_is_rendered_by_default
+    assert_match(/<button[^>]*\sdata-action="click->ruby-ui--sheet-content#close"/, render_sheet)
+  end
+
+  def test_close_button_can_be_hidden
+    output = render_content(show_close_button: false)
+
+    refute_match(/<button/, output, "show_close_button: false must not render the corner button")
+    assert_match(/Content/, output)
+  end
+
+  # Lets a caller target one side from the outside, e.g. class: "data-[side=bottom]:max-h-[50vh]"
+  def test_content_exposes_its_side
+    %i[top right bottom left].each do |side|
+      assert_match(/\sdata-side="#{side}"/, dialog_tag(render_content(side: side)))
     end
+  end
+
+  def test_left_and_right_have_a_default_width
+    %i[left right].each do |side|
+      classes = dialog_classes(side: side)
+
+      assert_includes classes, "w-3/4", "side: #{side}"
+      assert_includes classes, "sm:max-w-sm", "side: #{side}"
+    end
+  end
+
+  def test_a_caller_can_override_the_default_width
+    classes = dialog_classes(class: "w-[300px] sm:max-w-lg")
+
+    refute_includes classes, "w-3/4"
+    refute_includes classes, "sm:max-w-sm"
+    assert_includes classes, "w-[300px]"
+    assert_includes classes, "sm:max-w-lg"
+  end
+
+  private
+
+  def render_sheet
+    phlex do
+      RubyUI.Sheet do
+        RubyUI.SheetTrigger do
+          RubyUI.Button { "Open" }
+        end
+        RubyUI.SheetContent { "Content" }
+      end
+    end
+  end
+
+  # `->` inside a data-action value carries a ">", so the open tag cannot be scanned with [^>]*.
+  def dialog_tag(output)
+    output[/<dialog\b(?:->|[^>])*>/m].to_s
+  end
+
+  def render_content(**attrs)
+    phlex { RubyUI.SheetContent(**attrs) { "Content" } }
+  end
+
+  def dialog_classes(**attrs)
+    dialog_tag(render_content(**attrs))[/\sclass="([^"]*)"/, 1].to_s.split
+  end
+
+  def assert_dialog_classes(*expected, **attrs)
+    classes = dialog_classes(**attrs)
 
-    assert_equal 2, output.scan("data-[state=closed]:fill-mode-forwards").size
+    expected.each { |class_name| assert_includes classes, class_name, "SheetContent(#{attrs})" }
   end
 end

From 9ed43dbf3b9b6064acd9c40ca19b83715b7cea97 Mon Sep 17 00:00:00 2001
From: Tomek <tomek@humhubs.com>
Date: Sat, 29 Aug 2026 12:33:06 +0200
Subject: [PATCH 2/2] chore(mcp): rebuild registry after the Sheet change

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

diff --git a/mcp/data/registry.json b/mcp/data/registry.json
index ed4cd153a..6e7b17f45 100644
--- a/mcp/data/registry.json
+++ b/mcp/data/registry.json
@@ -2272,23 +2272,27 @@
     },
     "sheet": {
       "name": "Sheet",
-      "description": "Extends the Sheet component to display content that complements the main content of the screen.",
+      "description": "Extends the Dialog component to display content that complements the main content of the screen.",
       "files": [
         {
           "path": "sheet.rb",
           "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class Sheet < Base\n    def initialize(open: false, **attrs)\n      @open = open\n      super(**attrs)\n    end\n\n    def view_template(&)\n      div(**attrs, &)\n    end\n\n    private\n\n    def default_attrs\n      {\n        data: {\n          controller: \"ruby-ui--sheet\",\n          ruby_ui__sheet_open_value: @open.to_s\n        }\n      }\n    end\n  end\nend\n"
         },
+        {
+          "path": "sheet_close.rb",
+          "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class SheetClose < Base\n    def view_template(&)\n      div(**attrs, &)\n    end\n\n    private\n\n    def default_attrs\n      {\n        data: {action: \"click->ruby-ui--sheet-content#close\"}\n      }\n    end\n  end\nend\n"
+        },
         {
           "path": "sheet_content.rb",
-          "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class SheetContent < Base\n    SIDE_CLASS = {\n      top: \"inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n      right: \"inset-y-0 right-0 h-full border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right\",\n      bottom: \"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n      left: \"inset-y-0 left-0 h-full border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left\"\n    }\n\n    def initialize(side: :right, **attrs)\n      @side = side\n      @side_classes = SIDE_CLASS[side]\n      super(**attrs)\n    end\n\n    def view_template(&block)\n      template(data: {ruby_ui__sheet_target: \"content\"}) do\n        div(data: {controller: \"ruby-ui--sheet-content\"}) do\n          backdrop\n          div(**attrs) do\n            block&.call\n            close_button\n          end\n        end\n      end\n    end\n\n    private\n\n    def default_attrs\n      {\n        data_state: \"open\", # For animate in\n        data_ruby_ui__sheet_content_target: \"panel\",\n        class: [\n          \"fixed pointer-events-auto z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards data-[state=closed]:duration-300 data-[state=open]:duration-500 overflow-scroll\",\n          @side_classes\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--sheet-content#close\"\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--sheet-content#close\",\n        data_ruby_ui__sheet_content_target: \"backdrop\",\n        class:\n              \"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 data-[state=closed]:fill-mode-forwards\"\n      )\n    end\n  end\nend\n"
+          "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class SheetContent < Base\n    # Per side: release the opposite edge (a modal <dialog> is pinned to all four by inset: 0),\n    # then the default size and the direction to slide in from.\n    SIDE_CLASS = {\n      top: \"inset-x-0 top-0 bottom-auto w-full h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n      right: \"inset-y-0 right-0 left-auto h-full w-3/4 sm:max-w-sm border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right\",\n      bottom: \"inset-x-0 bottom-0 top-auto w-full h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n      left: \"inset-y-0 left-0 right-auto h-full w-3/4 sm:max-w-sm border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left\"\n    }\n\n    def initialize(side: :right, show_close_button: true, **attrs)\n      @side = side\n      @show_close_button = show_close_button\n      super(**attrs)\n    end\n\n    def view_template(&block)\n      dialog(**attrs) do\n        block&.call\n        close_button if @show_close_button\n      end\n    end\n\n    private\n\n    def default_attrs\n      {\n        data: {\n          controller: \"ruby-ui--sheet-content\",\n          ruby_ui__sheet_target: \"dialog\",\n          action: \"click->ruby-ui--sheet-content#backdropClick\",\n          side: @side\n        },\n        class: [\n          # UA <dialog> reset; not-open:hidden keeps a caller's bare `flex` from overriding the display: none of a closed dialog.\n          \"m-0 max-w-full max-h-full not-open:hidden\",\n          \"fixed pointer-events-auto z-50 gap-4 bg-background text-foreground p-6 shadow-lg transition ease-in-out overflow-scroll\",\n          \"data-[state=open]:animate-in data-[state=open]:duration-500 data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=closed]:fill-mode-forwards\",\n          # The ::backdrop's animationend lands on the dialog itself, so its exit must last as long as the panel's.\n          \"backdrop:bg-background/80 backdrop:backdrop-blur-sm 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:duration-300 data-[state=closed]:backdrop:fill-mode-forwards\",\n          SIDE_CLASS[@side]\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--sheet-content#close\"\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": "sheet_content_controller.js",
-          "content": "import { Controller } from \"@hotwired/stimulus\";\n\nexport default class extends Controller {\n  static targets = [\"backdrop\", \"panel\"];\n\n  disconnect() {\n    // Nothing is left to wait for the exit animation, so apply the pending removal now.\n    if (this.hasPanelTarget) this.settleExit(this.panelTarget);\n  }\n\n  close() {\n    this.backdropTarget.dataset.state = \"closed\";\n    this.panelTarget.dataset.state = \"closed\";\n    // The panel carries the longer exit, so the backdrop has finished by the time it settles.\n    this.hideAfterExitAnimation(this.panelTarget);\n  }\n\n  afterExit() {\n    this.element.remove();\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"
+          "content": "import { Controller } from \"@hotwired/stimulus\";\n\n// Connects to data-controller=\"ruby-ui--sheet-content\" on the <dialog>; ruby-ui--sheet opens it.\nexport default class extends Controller {\n  connect() {\n    this.element.addEventListener(\"cancel\", this.handleCancel);\n    this.element.addEventListener(\"close\", this.handleClose);\n  }\n\n  disconnect() {\n    this.element.removeEventListener(\"cancel\", this.handleCancel);\n    this.element.removeEventListener(\"close\", this.handleClose);\n    // Nothing is left to wait for the exit animation, so apply the pending close now.\n    this.settleExit(this.element);\n  }\n\n  close() {\n    if (this.element.dataset.state === \"closed\") return;\n\n    this.element.dataset.state = \"closed\";\n    // The ::backdrop's animationend lands on the dialog too; panel and backdrop share one exit duration so either settles it.\n    this.hideAfterExitAnimation(this.element);\n  }\n\n  afterExit() {\n    this.element.close();\n  }\n\n  // A click on the ::backdrop targets the dialog, but so does one on the panel's own padding: hit-test the box.\n  backdropClick(e) {\n    if (e.target === this.element && !this.coversPoint(e.clientX, e.clientY)) this.close();\n  }\n\n  coversPoint(x, y) {\n    const { top, right, bottom, left } = this.element.getBoundingClientRect();\n    return left <= x && x <= right && top <= y && y <= bottom;\n  }\n\n  // Escape (and requestClose()) fire cancel; route it through the exit animation.\n  handleCancel = (e) => {\n    // A cancelled file picker inside the sheet bubbles its own cancel event.\n    if (e.target !== this.element) return;\n\n    e.preventDefault();\n    this.close();\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 the exit listeners behind.\n    this.settleExit(this.element);\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": "sheet_controller.js",
-          "content": "import { Controller } from \"@hotwired/stimulus\"\n\nexport default class extends Controller {\n  static targets = [\"content\"]\n\n  static values = { open: false }\n\n  connect() {\n    if (this.openValue) this.open()\n  }\n\n  open() {\n    document.body.insertAdjacentHTML(\"beforeend\", this.contentTarget.innerHTML)\n  }\n}\n"
+          "content": "import { Controller } from \"@hotwired/stimulus\";\n\n// Connects to data-controller=\"ruby-ui--sheet\"; opens the <dialog> that ruby-ui--sheet-content closes.\nexport default class extends Controller {\n  static targets = [\"dialog\"];\n  static values = { open: false };\n\n  connect() {\n    if (this.openValue) this.open();\n  }\n\n  disconnect() {\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"
         },
         {
           "path": "sheet_description.rb",
@@ -2321,16 +2325,21 @@
         "gems": []
       },
       "install_command": "rails g ruby_ui:component Sheet",
-      "docs_markdown": "# Sheet\n\nExtends the Sheet component to display content that complements the main content of the screen.\n\n## Usage\n\n### Example\n\n```ruby\nSheet do\n  SheetTrigger do\n    Button(variant: :outline) { \"Open Sheet\" }\n  end\n  SheetContent(class: 'sm:max-w-sm') do\n    SheetHeader do\n      SheetTitle { \"Edit profile\" }\n      SheetDescription { \"Make changes to your profile here. Click save when you're done.\" }\n    end\n\n    SheetMiddle do\n      label { \"Name\" }\n      Input(placeholder: \"Joel Drapper\") { \"Joel Drapper\" }\n      label { \"Email\" }\n      Input(placeholder: \"joel@drapper.me\")\n    end\n    SheetFooter do\n      Button(variant: :outline, data: { action: 'click->ruby-ui--sheet-content#close' }) { \"Cancel\" }\n      Button(type: \"submit\") { \"Save\" }\n    end\n  end\nend\n```\n\n### Side\n\n```ruby\ndiv(class: 'grid grid-cols-2 gap-4') do\n  # -- TOP --\n  Sheet do\n    SheetTrigger do\n      Button(variant: :outline, class: 'w-full justify-center') { :top }\n    end\n    SheetContent(side: :top, class: (\"sm:max-w-sm\" if [:left, :right].include?(:top))) do\n      SheetHeader do\n        SheetTitle { \"Edit profile\" }\n        SheetDescription { \"Make changes to your profile here. Click save when you're done.\" }\n      end\n      Form do\n        SheetMiddle do\n          label { \"Name\" }\n          Input(placeholder: \"Joel Drapper\") { \"Joel Drapper\" }\n\n          label { \"Email\" }\n          Input(placeholder: \"joel@drapper.me\")\n        end\n        SheetFooter do\n          Button(variant: :outline, data: { action: 'click->ruby-ui--sheet-content#close' }) { \"Cancel\" }\n          Button(type: \"submit\") { \"Save\" }\n        end\n      end\n    end\n  end\nend\n```",
+      "docs_markdown": "# Sheet\n\nExtends the Dialog component to display content that complements the main content of the screen.\n\n## Usage\n\n### Example\n\n```ruby\nSheet do\n  SheetTrigger do\n    Button(variant: :outline) { \"Open Sheet\" }\n  end\n  SheetContent do\n    SheetHeader do\n      SheetTitle { \"Edit profile\" }\n      SheetDescription { \"Make changes to your profile here. Click save when you're done.\" }\n    end\n\n    SheetMiddle do\n      label { \"Name\" }\n      Input(placeholder: \"Joel Drapper\") { \"Joel Drapper\" }\n      label { \"Email\" }\n      Input(placeholder: \"joel@drapper.me\")\n    end\n    SheetFooter do\n      SheetClose do\n        Button(variant: :outline) { \"Cancel\" }\n      end\n      Button(type: \"submit\") { \"Save\" }\n    end\n  end\nend\n```\n\n### Side\n\n```ruby\ndiv(class: 'flex flex-wrap gap-2') do\n  [:top, :right, :bottom, :left].each do |side|\n    Sheet do\n      SheetTrigger do\n        Button(variant: :outline, class: 'capitalize') { side.to_s }\n      end\n      SheetContent(side: side) do\n        SheetHeader do\n          SheetTitle { \"Edit profile\" }\n          SheetDescription { \"Make changes to your profile here. Click save when you're done.\" }\n        end\n        SheetMiddle do\n          label { \"Name\" }\n          Input(placeholder: \"Joel Drapper\") { \"Joel Drapper\" }\n        end\n        SheetFooter do\n          SheetClose do\n            Button(variant: :outline) { \"Cancel\" }\n          end\n          Button(type: \"submit\") { \"Save\" }\n        end\n      end\n    end\n  end\nend\n```\n\n### No close button\n\n```ruby\nSheet do\n  SheetTrigger do\n    Button(variant: :outline) { \"Open Sheet\" }\n  end\n  SheetContent(show_close_button: false) do\n    SheetHeader do\n      SheetTitle { \"No close button\" }\n      SheetDescription { \"This sheet has no close button in the corner. Press Escape or click outside to close it.\" }\n    end\n    SheetFooter do\n      SheetClose do\n        Button(variant: :outline) { \"Close\" }\n      end\n    end\n  end\nend\n```",
       "examples": [
         {
           "title": "Example",
-          "code": "Sheet do\n  SheetTrigger do\n    Button(variant: :outline) { \"Open Sheet\" }\n  end\n  SheetContent(class: 'sm:max-w-sm') do\n    SheetHeader do\n      SheetTitle { \"Edit profile\" }\n      SheetDescription { \"Make changes to your profile here. Click save when you're done.\" }\n    end\n\n    SheetMiddle do\n      label { \"Name\" }\n      Input(placeholder: \"Joel Drapper\") { \"Joel Drapper\" }\n      label { \"Email\" }\n      Input(placeholder: \"joel@drapper.me\")\n    end\n    SheetFooter do\n      Button(variant: :outline, data: { action: 'click->ruby-ui--sheet-content#close' }) { \"Cancel\" }\n      Button(type: \"submit\") { \"Save\" }\n    end\n  end\nend\n",
+          "code": "Sheet do\n  SheetTrigger do\n    Button(variant: :outline) { \"Open Sheet\" }\n  end\n  SheetContent do\n    SheetHeader do\n      SheetTitle { \"Edit profile\" }\n      SheetDescription { \"Make changes to your profile here. Click save when you're done.\" }\n    end\n\n    SheetMiddle do\n      label { \"Name\" }\n      Input(placeholder: \"Joel Drapper\") { \"Joel Drapper\" }\n      label { \"Email\" }\n      Input(placeholder: \"joel@drapper.me\")\n    end\n    SheetFooter do\n      SheetClose do\n        Button(variant: :outline) { \"Cancel\" }\n      end\n      Button(type: \"submit\") { \"Save\" }\n    end\n  end\nend\n",
           "language": "ruby"
         },
         {
           "title": "Side",
-          "code": "div(class: 'grid grid-cols-2 gap-4') do\n  # -- TOP --\n  Sheet do\n    SheetTrigger do\n      Button(variant: :outline, class: 'w-full justify-center') { :top }\n    end\n    SheetContent(side: :top, class: (\"sm:max-w-sm\" if [:left, :right].include?(:top))) do\n      SheetHeader do\n        SheetTitle { \"Edit profile\" }\n        SheetDescription { \"Make changes to your profile here. Click save when you're done.\" }\n      end\n      Form do\n        SheetMiddle do\n          label { \"Name\" }\n          Input(placeholder: \"Joel Drapper\") { \"Joel Drapper\" }\n\n          label { \"Email\" }\n          Input(placeholder: \"joel@drapper.me\")\n        end\n        SheetFooter do\n          Button(variant: :outline, data: { action: 'click->ruby-ui--sheet-content#close' }) { \"Cancel\" }\n          Button(type: \"submit\") { \"Save\" }\n        end\n      end\n    end\n  end\nend\n",
+          "code": "div(class: 'flex flex-wrap gap-2') do\n  [:top, :right, :bottom, :left].each do |side|\n    Sheet do\n      SheetTrigger do\n        Button(variant: :outline, class: 'capitalize') { side.to_s }\n      end\n      SheetContent(side: side) do\n        SheetHeader do\n          SheetTitle { \"Edit profile\" }\n          SheetDescription { \"Make changes to your profile here. Click save when you're done.\" }\n        end\n        SheetMiddle do\n          label { \"Name\" }\n          Input(placeholder: \"Joel Drapper\") { \"Joel Drapper\" }\n        end\n        SheetFooter do\n          SheetClose do\n            Button(variant: :outline) { \"Cancel\" }\n          end\n          Button(type: \"submit\") { \"Save\" }\n        end\n      end\n    end\n  end\nend\n",
+          "language": "ruby"
+        },
+        {
+          "title": "No close button",
+          "code": "Sheet do\n  SheetTrigger do\n    Button(variant: :outline) { \"Open Sheet\" }\n  end\n  SheetContent(show_close_button: false) do\n    SheetHeader do\n      SheetTitle { \"No close button\" }\n      SheetDescription { \"This sheet has no close button in the corner. Press Escape or click outside to close it.\" }\n    end\n    SheetFooter do\n      SheetClose do\n        Button(variant: :outline) { \"Close\" }\n      end\n    end\n  end\nend\n",
           "language": "ruby"
         }
       ]
@@ -2369,7 +2378,7 @@
         },
         {
           "path": "mobile_sidebar.rb",
-          "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class MobileSidebar < Base\n    SIDEBAR_WIDTH_MOBILE = \"18rem\"\n\n    def initialize(side: :left, **attrs)\n      @side = side\n      super(**attrs)\n    end\n\n    def view_template(&)\n      Sheet(**attrs) do\n        SheetContent(\n          side: @side,\n          class: \"w-[var(--sidebar-width)] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\",\n          style: {\n            \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE\n          },\n          data: {\n            sidebar: \"sidebar\",\n            mobile: \"true\"\n          }\n        ) do\n          SheetHeader(class: \"sr-only\") do\n            SheetTitle { \"Sidebar\" }\n            SheetDescription { \"Displays the mobile sidebar.\" }\n          end\n          div(class: \"flex h-full w-full flex-col\", &)\n        end\n      end\n    end\n\n    private\n\n    def default_attrs\n      {\n        data: {\n          ruby_ui__sidebar_target: \"mobileSidebar\",\n          action: \"ruby--ui-sidebar:open->ruby-ui--sheet#open:self\"\n        }\n      }\n    end\n  end\nend\n"
+          "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class MobileSidebar < Base\n    SIDEBAR_WIDTH_MOBILE = \"18rem\"\n\n    def initialize(side: :left, **attrs)\n      @side = side\n      super(**attrs)\n    end\n\n    def view_template(&)\n      Sheet(**attrs) do\n        SheetContent(\n          side: @side,\n          show_close_button: false,\n          class: \"w-[var(--sidebar-width)] bg-sidebar p-0 text-sidebar-foreground\",\n          style: {\n            \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE\n          },\n          data: {\n            sidebar: \"sidebar\",\n            mobile: \"true\"\n          }\n        ) do\n          SheetHeader(class: \"sr-only\") do\n            SheetTitle { \"Sidebar\" }\n            SheetDescription { \"Displays the mobile sidebar.\" }\n          end\n          div(class: \"flex h-full w-full flex-col\", &)\n        end\n      end\n    end\n\n    private\n\n    def default_attrs\n      {\n        data: {\n          ruby_ui__sidebar_target: \"mobileSidebar\",\n          action: \"ruby--ui-sidebar:open->ruby-ui--sheet#open:self\"\n        }\n      }\n    end\n  end\nend\n"
         },
         {
           "path": "non_collapsible_sidebar.rb",
