A Material-styled modal dialog (pp_dialog/1), in the spirit of MUI's Dialog — but built the same way Phoenix's own mix phx.new-generated core_components.ex builds its modal/1: always present in the DOM, shown/hidden via Phoenix.LiveView.JS commands and CSS transitions, not a server-tracked open assign that re-renders the whole tree. If you've used that generated modal before, this is the same mechanism with Material chrome (PhoenixPaper.Paper for the surface, elevation, rounded corners) and :title/:actions slots instead of one opaque body.

<.pp_button phx-click={PhoenixPaper.Dialog.show("confirm-delete")}>
  Delete
</.pp_button>

<.pp_dialog id="confirm-delete" on_cancel={JS.push("cancel_delete")}>
  <:title>Delete this item?</:title>
  This can't be undone.
  <:actions>
    <.pp_button variant="text" phx-click={PhoenixPaper.Dialog.hide("confirm-delete")}>
      Cancel
    </.pp_button>
    <.pp_button color="error" phx-click="confirm_delete">Delete</.pp_button>
  </:actions>
</.pp_dialog>

show/1,2 and hide/1,2 return Phoenix.LiveView.JS commands — wire them to whatever triggers open/close (a button elsewhere on the page, a form submit success, ...). on_cancel (default a no-op %JS{}) runs in addition to the built-in hide behavior when the backdrop is clicked or Escape is pressed — pass a JS.push(...) there if the server needs to know the dialog was dismissed this way (e.g. to reset form state), the same as the generated modal's own on_cancel.

Uses Phoenix.Component.focus_wrap/1 for tab-focus trapping — a built-in Phoenix accessibility helper (ships with phoenix_live_view.js's Phoenix.FocusWrap hook), not a custom hook this library adds.