component.html.erb

<dialog
  data-controller="<%= stimulus_id %>"
  <%= tag.attributes(
    "aria-label": @title,
    class: "relative z-10",
    **@attributes
  ) %>
>
  <a href="<%= @close_path %>" aria-hidden="true" class="cursor-default fixed inset-0 bg-full-black/50 overflow-y-auto"></a>
  <div class="fixed inset-0 z-10 pointer-events-none flex min-h-full justify-center p-4 text-center items-center">
    <div class="min-w-[40rem] pointer-events-auto cursor-auto relative transform overflow-auto rounded-lg bg-white text-left shadow-xl max-w-lg divide-y divide-gray-100">

      <header class="flex items-center justify-between p-4">
        <h3 class="text-xl font-semibold text-gray-900">
          <%= @title %>
        </h3>
        <%= render component('ui/button').new(
          tag: :a,
          href: @close_path,
          icon: 'close-line',
          scheme: :ghost,
          title: t('.close'),
        ) %>
      </header>

      <div class="p-4 overflow-auto">
        <%= content %>
      </div>

      <% if actions? %>
        <footer class="p-4 flex gap-2 justify-end">
          <%= actions %>
        </footer>
      <% end %>
    </div>
  </div>
</dialog>