Dialog

<div data-controller="confirm-dialog">
  <button type="button" class="<%= button_class(variant: :secondary) %>" data-action="confirm-dialog#open">Open confirm dialog</button>
  <dialog data-controller="sheet" data-sheet-detents-value="fit" class="<%= dialog_class %>" aria-labelledby="example-0-title" data-confirm-dialog-target="dialog">
    <div class="flex flex-col gap-4 p-5">
  <h2 id="example-0-title" class="text-lg font-semibold">Delete this project?</h2>
  <p class="text-ink-2">This project and its files will be permanently deleted.</p>
  <div class="<%= form_actions_class %>">
    <button type="button" class="<%= button_class(variant: :ghost) %>" data-action="confirm-dialog#close">Cancel</button>
    <button type="button" class="<%= button_class(variant: :danger) %>" data-action="confirm-dialog#close">Delete</button>
  </div>
</div>

  </dialog>
</div>

<div data-controller="modal">
  <button type="button" class="<%= button_class(variant: :secondary) %>" data-action="modal#open">Open dialog</button>
  <dialog data-controller="sheet" data-sheet-detents-value="fit" class="<%= dialog_class(extra: "sm:w-[min(94vw,40rem)]") %>" aria-labelledby="example-1-title" data-modal-target="dialog">
    <div class="flex flex-col gap-4 p-5">
  <h2 id="example-1-title" class="text-lg font-semibold">Leave this workspace?</h2>
  <p class="text-ink-2">You can rejoin with a new invitation.</p>
  <div class="<%= form_actions_class %>">
    <button type="button" class="<%= button_class(variant: :ghost) %>" data-action="modal#close">Cancel</button>
    <button type="button" class="<%= button_class(variant: :danger) %>" data-action="modal#close">Leave</button>
  </div>
</div>

  </dialog>
</div>

<div class="relative" data-controller="row-menu confirm-dialog">
  <button type="button" class="<%= icon_button_class(shape: :circle) %>" aria-haspopup="menu" aria-expanded="false" aria-label="Actions"
    data-row-menu-target="trigger" data-action="row-menu#toggle"><%= heroicon "ellipsis-horizontal", options: { "aria-hidden": "true" } %></button>
  <div class="<%= menu_popover_class %>" role="menu" data-row-menu-target="popover">
    <button type="button" class="<%= menu_option_class(tone: :danger) %>" role="menuitem" data-action="confirm-dialog#open row-menu#close"><%= heroicon "trash", options: { class: "size-5", "aria-hidden": "true" } %><span>Delete…</span></button>
  </div>
  <dialog data-controller="sheet" data-sheet-detents-value="fit" class="<%= dialog_class(:context) %>" aria-labelledby="example-2-title" data-confirm-dialog-target="dialog">
    <div class="flex flex-col gap-4 p-5">
  <h2 id="example-2-title" class="text-lg font-semibold">Delete this project?</h2>
  <p class="text-ink-2">Anchored to the menu that opened it.</p>
  <div class="<%= form_actions_class %>">
    <button type="button" class="<%= button_class(variant: :ghost) %>" data-action="confirm-dialog#close">Cancel</button>
    <button type="button" class="<%= button_class(variant: :danger) %>" data-action="confirm-dialog#close">Delete</button>
  </div>
</div>

  </dialog>
</div>

<div class="<%= dialog_surface_class(extra: "p-5") %>">
  <p class="font-semibold">Dialog surface</p>
  <p class="text-sm text-ink-3">The dialog's chrome on a plain element.</p>
</div>