ultimate_turbo_modal 3.2.1 → 3.4.0

data/lib/generators/ultimate_turbo_modal/templates/flavors/tailwind.rb

@@ -8,7 +8,7 @@
 # `data-entered` state (which would prevent the modal from animating out).
 module UltimateTurboModal::Flavors
   class Tailwind < UltimateTurboModal::Base
-    STYLES = "html:has(dialog#modal-container[open]), html:has(dialog#modal-container-stacked[open]) { overflow: hidden; }"
+    STYLES = "html:has(dialog.utmr[open]) { overflow: hidden; }"
 
     # Modal constants
 
@@ -25,9 +25,11 @@ module UltimateTurboModal::Flavors
       "data-[closing]:backdrop:duration-200 data-[closing]:backdrop:ease-in"
     ].join(" ")
 
-    MODAL_INNER_CLASSES = [
-      "flex min-h-full items-start justify-center pt-[10vh] sm:items-center sm:pt-0 sm:p-4 sm:pb-[10vh]",
-      # Transition
+    # The enter/leave animation, shared by the modal and the confirm dialog.
+    # Tailwind resolves conflicts by CSS source order rather than by the order
+    # classes appear in the string, so the two cannot share a layout line -- but
+    # they must not drift apart on the animation.
+    MODAL_TRANSITION_CLASSES = [
       "transition duration-300 ease-out",
       "group-data-[closing]/utmr-modal:duration-200 group-data-[closing]/utmr-modal:ease-in",
       # Default state (closed): faded + shifted
@@ -36,6 +38,11 @@ module UltimateTurboModal::Flavors
       "group-data-[entered]/utmr-modal:opacity-100 group-data-[entered]/utmr-modal:translate-y-0 group-data-[entered]/utmr-modal:scale-100"
     ].join(" ")
 
+    MODAL_INNER_CLASSES = [
+      "flex min-h-full items-start justify-center pt-[10vh] sm:items-center sm:pt-0 sm:p-4 sm:pb-[10vh]",
+      MODAL_TRANSITION_CLASSES
+    ].join(" ")
+
     MODAL_CONTENT_CLASSES = "relative transform max-h-screen overflow-hidden rounded-lg bg-white text-left shadow-lg transition-all sm:max-w-3xl dark:bg-gray-800 dark:text-white"
     MODAL_MAIN_CLASSES = "group-data-[padding=true]/utmr-modal:p-4 group-data-[padding=true]/utmr-modal:pt-2 overflow-y-auto max-h-[75vh]"
     MODAL_HEADER_CLASSES = "flex justify-between items-center w-full py-4 rounded-t dark:border-gray-600 group-data-[header-divider=true]/utmr-modal:border-b group-data-[header=false]/utmr-modal:absolute"
@@ -47,6 +54,73 @@ module UltimateTurboModal::Flavors
     MODAL_CLOSE_BUTTON_CLASSES = "text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
     MODAL_CLOSE_ICON_CLASSES = "w-5 h-5"
 
+    # Confirm dialog constants
+    #
+    # The confirm dialog renders through the modal's markup, so it inherits the
+    # dialog, backdrop and transition classes above. These constants only
+    # narrow the card and retune the spacing for what is a short prompt rather
+    # than a page of content. Any slot left undefined falls back to MODAL_*.
+
+    # Same transition as a modal, with a real gutter so the full-width card
+    # never touches the screen edge on mobile.
+    CONFIRM_INNER_CLASSES = [
+      "flex min-h-full items-start justify-center p-4 pt-[10vh] sm:items-center sm:pt-4 sm:pb-[10vh]",
+      MODAL_TRANSITION_CLASSES
+    ].join(" ")
+
+    # Sized rather than shrink-to-fit, so a one-word prompt and a three-line one
+    # come out the same. The floor is written as `min(20rem, 100%)` so it can
+    # never push the card wider than the space it has on a narrow screen.
+    CONFIRM_CONTENT_CLASSES = [
+      "relative w-full transform overflow-hidden rounded-lg text-left shadow-xl transition-all",
+      "min-w-[min(20rem,100%)] sm:max-w-md",
+      "bg-white dark:bg-gray-800 dark:text-white"
+    ].join(" ")
+
+    CONFIRM_HEADER_CLASSES = [
+      "flex items-start justify-between gap-4 w-full px-6 pt-6",
+      "dark:border-gray-600",
+      "group-data-[header-divider=true]/utmr-modal:border-b group-data-[header-divider=true]/utmr-modal:pb-4",
+      "group-data-[header=false]/utmr-modal:hidden"
+    ].join(" ")
+
+    CONFIRM_TITLE_CLASSES = "min-w-0"
+    CONFIRM_TITLE_H_CLASSES = "group-data-[title=false]/utmr-modal:hidden text-base font-semibold text-gray-900 dark:text-white"
+
+    CONFIRM_MAIN_CLASSES = "group-data-[padding=true]/utmr-modal:px-6 group-data-[padding=true]/utmr-modal:pt-2"
+    CONFIRM_BODY_CLASSES = "text-sm/6 text-gray-500 dark:text-gray-400"
+
+    CONFIRM_FOOTER_CLASSES = [
+      "px-6 pt-6 pb-6",
+      "dark:border-gray-600 group-data-[footer-divider=true]/utmr-modal:border-t"
+    ].join(" ")
+
+    # Stacked and full-width on mobile (thumb-friendly), inline and right
+    # aligned from `sm` up. Reversed so the primary action sits on top.
+    CONFIRM_ACTIONS_CLASSES = "flex w-full flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:gap-3"
+
+    CONFIRM_BUTTON_CLASSES = [
+      "inline-flex w-full sm:w-auto justify-center items-center rounded-md",
+      "px-4 py-2.5 sm:py-2 text-sm font-semibold transition-colors",
+      "focus-visible:outline-2 focus-visible:outline-offset-2"
+    ].join(" ")
+
+    CONFIRM_CANCEL_CLASSES = [
+      CONFIRM_BUTTON_CLASSES,
+      "bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50",
+      "dark:bg-gray-700 dark:text-gray-100 dark:ring-gray-600 dark:hover:bg-gray-600",
+      "focus-visible:outline-gray-400"
+    ].join(" ")
+
+    CONFIRM_ACCEPT_CLASSES = [
+      CONFIRM_BUTTON_CLASSES,
+      "text-white shadow-sm bg-indigo-600 hover:bg-indigo-500 focus-visible:outline-indigo-600",
+      # Destructive variant, set from `variant: :danger`
+      "group-data-[utmr-confirm-variant=danger]/utmr-modal:bg-red-600",
+      "group-data-[utmr-confirm-variant=danger]/utmr-modal:hover:bg-red-500",
+      "group-data-[utmr-confirm-variant=danger]/utmr-modal:focus-visible:outline-red-600"
+    ].join(" ")
+
     # Drawer constants
 
     DRAWER_DIALOG_CLASSES = [

data/lib/generators/ultimate_turbo_modal/templates/flavors/vanilla.rb

@@ -5,7 +5,7 @@
 # Set STYLES to a CSS string if you need additional inline styles.
 module UltimateTurboModal::Flavors
   class Vanilla < UltimateTurboModal::Base
-    STYLES = "html:has(dialog#modal-container[open]), html:has(dialog#modal-container-stacked[open]) { overflow: hidden; }"
+    STYLES = "html:has(dialog.utmr[open]) { overflow: hidden; }"
 
     MODAL_DIALOG_CLASSES = "modal-container"
     MODAL_INNER_CLASSES = "modal-inner"
@@ -20,6 +20,19 @@ module UltimateTurboModal::Flavors
     MODAL_CLOSE_SR_CLASSES = "sr-only"
     MODAL_CLOSE_ICON_CLASSES = "modal-close-icon"
 
+    # Confirm dialog constants
+    # Slots without a CONFIRM_* constant (dialog, inner) fall back to MODAL_*.
+    CONFIRM_CONTENT_CLASSES = "confirm-content"
+    CONFIRM_HEADER_CLASSES = "confirm-header"
+    CONFIRM_TITLE_CLASSES = "confirm-title"
+    CONFIRM_TITLE_H_CLASSES = "confirm-title-h"
+    CONFIRM_MAIN_CLASSES = "confirm-main"
+    CONFIRM_BODY_CLASSES = "confirm-body"
+    CONFIRM_FOOTER_CLASSES = "confirm-footer"
+    CONFIRM_ACTIONS_CLASSES = "confirm-actions"
+    CONFIRM_CANCEL_CLASSES = "confirm-cancel"
+    CONFIRM_ACCEPT_CLASSES = "confirm-accept"
+
     # Drawer constants
     DRAWER_DIALOG_CLASSES = "drawer-container"
     DRAWER_WRAPPER_CLASSES = "drawer-wrapper"

data/lib/generators/ultimate_turbo_modal/templates/ultimate_turbo_modal.rb

@@ -7,6 +7,7 @@ UltimateTurboModal.configure do |config|
   # config.modal do |m|
   #   m.advance = false
   #   m.close_button = true
+  #   m.close_on_submit = true
   #   m.header = true
   #   m.header_divider = true
   #   m.footer_divider = true
@@ -16,7 +17,9 @@ UltimateTurboModal.configure do |config|
 
   # config.drawer do |d|
   #   d.position = :right
+  #   d.advance = false
   #   d.close_button = true
+  #   d.close_on_submit = true
   #   d.header = true
   #   d.header_divider = false
   #   d.footer_divider = true
@@ -24,4 +27,19 @@ UltimateTurboModal.configure do |config|
   #   d.overlay = true
   #   d.size = :md
   # end
+
+  # Turbo Confirm support. Enable it by adding `<%= modal_confirm_template %>`
+  # to your layout; these are the dialog's defaults.
+  # config.confirm do |c|
+  #   c.enabled = true
+  #   c.title = "Are you sure?"
+  #   c.accept_label = "OK"
+  #   c.cancel_label = "Cancel"
+  #   c.close_button = false
+  #   c.header = true
+  #   c.header_divider = false
+  #   c.footer_divider = false
+  #   c.padding = true
+  #   c.overlay = true
+  # end
 end

data/lib/generators/ultimate_turbo_modal/update_generator.rb

@@ -76,6 +76,8 @@ module UltimateTurboModal
           return
         end
 
+        add_vanilla_stylesheet if flavor == "vanilla"
+
         template_rel = "flavors/#{flavor}.rb"
         template_abs = File.join(self.class.source_root, template_rel)
 

data/lib/ultimate_turbo_modal/base.rb

@@ -4,14 +4,17 @@ class UltimateTurboModal::Base < Phlex::HTML
   prepend Phlex::DeferredRenderWithMainContent
 
   attr_accessor :request, :allowed_click_outside_selector, :content_div_data
+  CONFIRM_TEMPLATE_ID = "utmr-confirm-template"
   VALID_DRAWER_SIZES = %i[xs sm md lg xl 2xl full].freeze
   VALID_DRAWER_POSITIONS = %i[right left].freeze
 
-  # @param advance [Boolean, String] Whether to update the browser history when opening and closing the modal (modal-only, ignored for drawers)
+  # @param advance [Boolean, String] Whether to update the browser history when opening and closing the modal or drawer
   # @param allowed_click_outside_selector [String] CSS selectors for elements that are allowed to be clicked outside of the modal without dismissing the modal
   # @param close_button [Boolean] Whether to show a close button
   # @param close_button_data_action [String] `data-action` attribute for the close button
   # @param close_button_sr_label [String] Close button label for screen readers
+  # @param close_on_submit [Boolean] Whether to dismiss on a successful, non-redirecting form submission
+  # @param confirm [Boolean] Internal: render the Turbo Confirm dialog template. Use the `modal_confirm_template` view helper instead.
   # @param drawer_position [Symbol, false] Internal: drawer position (:right, :left) or false for standard modal. Use the `drawer()` view helper instead.
   # @param footer_divider [Boolean] Whether to show a divider between the main content and the footer
   # @param header [Boolean] Whether to show a modal header
@@ -28,6 +31,8 @@ class UltimateTurboModal::Base < Phlex::HTML
     close_button: nil,
     close_button_data_action: "modal#hideModal",
     close_button_sr_label: "Close modal",
+    close_on_submit: nil,
+    confirm: false,
     drawer_position: false,
     footer_divider: nil,
     header: nil,
@@ -36,27 +41,34 @@ class UltimateTurboModal::Base < Phlex::HTML
     padding: nil,
     size: nil,
     content_div_data: nil,
+    accept_label: nil,
+    cancel_label: nil,
     request: nil, title: nil
   )
     @drawer = drawer_position
+    @confirm = confirm
     @request = request
 
     raise ArgumentError, "Cannot render a drawer into the drawer-modal frame (drawers cannot be opened from inside another drawer or modal)" if drawer? && stacked?
 
-    if drawer?
+    if confirm?
+      cfg = UltimateTurboModal.configuration.confirm_config
+      @drawer_size = nil
+      @accept_label = accept_label || cfg.accept_label
+      @cancel_label = cancel_label || cfg.cancel_label
+      title ||= cfg.title
+    elsif drawer?
       cfg = UltimateTurboModal.configuration.drawer_config
-      @advance = false
-      @advance_url = nil
-      @close_button = close_button.nil? ? cfg.close_button : close_button
       @drawer_size = self.class.validate_drawer_size!(size || cfg.size)
     else
       cfg = UltimateTurboModal.configuration.modal_config
-      adv = advance.nil? ? cfg.advance : advance
-      @advance = !!adv
-      @advance_url = (adv.present? && adv.is_a?(String)) ? adv : nil
-      @close_button = close_button.nil? ? cfg.close_button : close_button
       @drawer_size = nil
     end
+    adv = advance.nil? ? cfg.advance : advance
+    @advance = !!adv
+    @advance_url = (adv.present? && adv.is_a?(String)) ? adv : nil
+    @close_button = close_button.nil? ? cfg.close_button : close_button
+    @close_on_submit = close_on_submit.nil? ? cfg.close_on_submit : close_on_submit
     @footer_divider = footer_divider.nil? ? cfg.footer_divider : footer_divider
     @header = header.nil? ? cfg.header : header
     @header_divider = header_divider.nil? ? cfg.header_divider : header_divider
@@ -90,7 +102,11 @@ class UltimateTurboModal::Base < Phlex::HTML
   end
 
   def view_template(&block)
-    if turbo_frame?
+    if confirm?
+      # Inert until the JS clones it, so it can live in the layout on every
+      # page without a dialog (or its <style> tag) ever being active.
+      template(id: CONFIRM_TEMPLATE_ID) { render_confirm }
+    elsif turbo_frame?
       turbo_frame_tag(turbo_frame_name) do
         drawer? ? render_drawer(&block) : render_modal(&block)
       end
@@ -103,12 +119,16 @@ class UltimateTurboModal::Base < Phlex::HTML
     stacked? ? "drawer-modal" : "modal"
   end
 
+  # Both return nil so `<%= m.title do %>` writes nothing to the ERB buffer.
+  # The assignment's own value is a Proc, and ERB would print it.
   def title(&block)
     @title_block = block
+    nil
   end
 
   def footer(&block)
     @footer = block
+    nil
   end
 
   class << self
@@ -134,13 +154,18 @@ class UltimateTurboModal::Base < Phlex::HTML
 
   def close_button? = !!@close_button
 
+  def close_on_submit? = !!@close_on_submit
+
+  def confirm? = !!@confirm
+
   def title_block? = !!@title_block
 
   def title? = !!@title
 
   def header? = !!@header
 
-  def footer? = @footer.present?
+  # A confirm's footer holds its own buttons rather than a user block.
+  def footer? = @footer.present? || confirm?
 
   def header_divider? = !!@header_divider && (@title_block.present? || title?)
 
@@ -166,13 +191,22 @@ class UltimateTurboModal::Base < Phlex::HTML
     frame == "drawer-modal" || frame == "modal-inner-stacked"
   end
 
-  def dialog_id = stacked? ? "modal-container-stacked" : "modal-container"
+  def dialog_id = scoped_id("modal-container")
 
-  def inner_id = stacked? ? "modal-inner-stacked" : "modal-inner"
+  def inner_id = scoped_id("modal-inner")
 
   # Suffix inner ids so they don't collide with the drawer's ids when the
-  # stacked modal is rendered inside the drawer's DOM.
-  def scoped_id(name) = stacked? ? "#{name}-stacked" : name
+  # stacked modal is rendered inside the drawer's DOM, or with an open
+  # modal's ids when the confirm dialog is layered over it.
+  def scoped_id(name) = "#{name}#{id_suffix}"
+
+  def id_suffix
+    return "-confirm" if confirm?
+    # A layout renders for Turbo Frame requests too, so this has to be checked
+    # after confirm? -- otherwise a confirm template rendered during a stacked
+    # request would claim the stacked modal's ids.
+    stacked? ? "-stacked" : ""
+  end
 
   def drawer_position = @drawer || :right
 
@@ -250,11 +284,42 @@ class UltimateTurboModal::Base < Phlex::HTML
     raw(safe(str))
   end
 
+  # Confirm dialogs render through the modal's markup, so every slot falls back
+  # to its MODAL_* class unless the flavor defines a CONFIRM_* override.
   def classes_for(suffix)
+    if confirm?
+      override = confirm_classes_for(suffix)
+      return override unless override.nil?
+    end
+
     prefix = drawer? ? "DRAWER" : "MODAL"
     self.class.const_get("#{prefix}_#{suffix}")
   end
 
+  # CONFIRM_* constants are optional. A flavor file written before confirm
+  # support returns nil here, which means shared slots fall back to MODAL_* and
+  # the confirm-only slots (body, actions, buttons) render unstyled rather than
+  # raising. `warn_missing_confirm_classes` is what tells the developer why.
+  def confirm_classes_for(suffix)
+    const = :"CONFIRM_#{suffix}"
+    self.class.const_defined?(const) ? self.class.const_get(const) : nil
+  end
+
+  # An unstyled confirm dialog looks like a bug in the gem rather than a stale
+  # flavor file, so say which it is. Once per flavor class, in development only.
+  def warn_missing_confirm_classes
+    return unless defined?(Rails) && Rails.env.local?
+    return if self.class.const_defined?(:CONFIRM_ACTIONS_CLASSES)
+    return if self.class.instance_variable_get(:@utmr_confirm_classes_warned)
+
+    self.class.instance_variable_set(:@utmr_confirm_classes_warned, true)
+    Rails.logger&.warn(
+      "[UltimateTurboModal] #{self.class.name} defines no CONFIRM_* classes, so the " \
+      "confirm dialog will render unstyled. Run `rails g ultimate_turbo_modal:update` " \
+      "to refresh your flavor file."
+    )
+  end
+
   def custom_drawer_size?
     @drawer_size.present? && !VALID_DRAWER_SIZES.include?(@drawer_size.to_s.to_sym)
   end
@@ -263,22 +328,35 @@ class UltimateTurboModal::Base < Phlex::HTML
     data_attributes = {
       controller: "modal",
       modal_target: "container",
-      modal_advance_url_value: advance_url,
-      modal_allowed_click_outside_selector_value: allowed_click_outside_selector,
-      action: "turbo:submit-end->modal#submitEnd cancel->modal#cancelEvent mousedown->modal#dialogMousedown click->modal#dialogClicked",
+      action: dialog_actions,
       padding: padding?.to_s,
       title: title?.to_s,
       header: header?.to_s,
       close_button: close_button?.to_s,
       header_divider: header_divider?.to_s,
-      footer_divider: footer_divider?.to_s
+      footer_divider: footer_divider?.to_s,
+      overlay: overlay?.to_s
     }
 
+    role = nil
+    aria_attributes = {labelledby: scoped_id("modal-title-h")}
+
+    if confirm?
+      # Everything the controller reads from those three values is driven by an
+      # action a confirm doesn't bind, so they would only ever mislead a reader.
+      data_attributes[:utmr_confirm] = ""
+      role = "alertdialog"
+      aria_attributes[:describedby] = scoped_id("modal-body")
+    else
+      data_attributes[:modal_advance_url_value] = advance_url
+      data_attributes[:modal_allowed_click_outside_selector_value] = allowed_click_outside_selector
+      data_attributes[:modal_close_on_submit_value] = close_on_submit?.to_s
+    end
+
     if drawer?
       data_attributes[:drawer] = drawer_position.to_s
       data_attributes[:drawer_size] = (@drawer_size.presence || "md").to_s
     end
-    data_attributes[:overlay] = overlay?.to_s
 
     if defined?(Rails) && Rails.env.local?
       data_attributes[:utmr_version] = UltimateTurboModal::VERSION
@@ -294,17 +372,29 @@ class UltimateTurboModal::Base < Phlex::HTML
     dialog(id: dialog_id,
       class: dialog_classes,
       style: inline_style,
-      aria: {
-        labelledby: scoped_id("modal-title-h")
-      },
+      role: role,
+      aria: aria_attributes,
       data: data_attributes, &block)
   end
 
+  # A confirm is a decision, so a stray click on the backdrop must not answer it
+  # for the user. Leaving the outside-click actions off is the whole of it --
+  # Escape and the Cancel button still dismiss.
+  def dialog_actions
+    return "cancel->modal#cancelEvent" if confirm?
+
+    ["turbo:submit-end->modal#submitEnd",
+      "cancel->modal#cancelEvent",
+      "mousedown->modal#dialogMousedown",
+      "click->modal#dialogClicked"].join(" ")
+  end
+
   ## Modal-specific elements
 
   def modal_inner(&block)
     maybe_turbo_frame(inner_id) do
-      div(id: inner_id, class: self.class::MODAL_INNER_CLASSES, &block)
+      div(id: inner_id, class: self.class::MODAL_INNER_CLASSES,
+        data: {modal_target: "transition"}, &block)
     end
   end
 
@@ -333,7 +423,8 @@ class UltimateTurboModal::Base < Phlex::HTML
   end
 
   def drawer_panel(&block)
-    div(id: "drawer-panel", class: self.class::DRAWER_PANEL_CLASSES, data: {modal_target: "content"}, &block)
+    div(id: "drawer-panel", class: self.class::DRAWER_PANEL_CLASSES,
+      data: {modal_target: "content transition"}, &block)
   end
 
   def drawer_content(&block)
@@ -351,6 +442,51 @@ class UltimateTurboModal::Base < Phlex::HTML
     end
   end
 
+  ## Confirm-specific elements
+
+  def render_confirm
+    warn_missing_confirm_classes
+    # Unlike the modal and drawer templates, the styles go *inside* the dialog:
+    # the JS clones this one node out of the <template>, and the scroll-lock
+    # rule has to come along with it and leave with it.
+    dialog_element do
+      styles
+      confirm_inner do
+        confirm_content do
+          render_header
+          confirm_main
+          confirm_footer
+        end
+      end
+    end
+  end
+
+  def confirm_inner(&block)
+    div(id: inner_id, class: classes_for("INNER_CLASSES"), data: {modal_target: "transition"}, &block)
+  end
+
+  def confirm_content(&block)
+    div(id: scoped_id("modal-content"), class: classes_for("CONTENT_CLASSES"), data: {modal_target: "content"}, &block)
+  end
+
+  # Left empty: the JavaScript fills it from `data-turbo-confirm`.
+  def confirm_main
+    render_main do
+      div(id: scoped_id("modal-body"), class: confirm_classes_for("BODY_CLASSES"))
+    end
+  end
+
+  def confirm_footer
+    div(id: scoped_id("modal-footer"), class: classes_for("FOOTER_CLASSES")) do
+      div(class: confirm_classes_for("ACTIONS_CLASSES")) do
+        button(type: "button", class: confirm_classes_for("CANCEL_CLASSES"),
+          data: {utmr_confirm_action: "cancel"}) { @cancel_label }
+        button(type: "button", class: confirm_classes_for("ACCEPT_CLASSES"),
+          data: {utmr_confirm_action: "accept"}) { @accept_label }
+      end
+    end
+  end
+
   ## Shared rendering
 
   def render_main(&block)
@@ -360,10 +496,20 @@ class UltimateTurboModal::Base < Phlex::HTML
   def render_header
     div(id: scoped_id("modal-header"), class: classes_for("HEADER_CLASSES")) do
       render_title
-      drawer? ? drawer_close : modal_close
+      render_header_close
     end
   end
 
+  # Modals and drawers always render the close button and let the flavor hide it
+  # through `data-close-button`. A confirm leaves it out of the markup entirely
+  # instead, which keeps it out of the tab order and the accessibility tree --
+  # it has its own Cancel button, so it is off by default.
+  def render_header_close
+    return if confirm? && !close_button?
+
+    drawer? ? drawer_close : modal_close
+  end
+
   def render_title
     div(id: scoped_id("modal-title"), class: classes_for("TITLE_CLASSES")) do
       if @title_block.present?

data/lib/ultimate_turbo_modal/configuration.rb

@@ -14,7 +14,7 @@ module UltimateTurboModal
     :allowed_click_outside_selector, :allowed_click_outside_selector=, to: :configuration
 
   class Configuration
-    attr_reader :flavor, :modal_config, :drawer_config
+    attr_reader :flavor, :modal_config, :drawer_config, :confirm_config
     attr_accessor :allowed_click_outside_selector
 
     def initialize
@@ -22,6 +22,7 @@ module UltimateTurboModal
       @allowed_click_outside_selector = []
       @modal_config = ModalConfig.new
       @drawer_config = DrawerConfig.new
+      @confirm_config = ConfirmConfig.new
     end
 
     def modal
@@ -34,6 +35,11 @@ module UltimateTurboModal
       @drawer_config
     end
 
+    def confirm
+      yield(@confirm_config) if block_given?
+      @confirm_config
+    end
+
     def flavor=(flavor)
       raise ArgumentError, "Value must be a symbol." unless flavor.is_a?(Symbol) || flavor.is_a?(String)
       @flavor = flavor.to_sym
@@ -41,7 +47,7 @@ module UltimateTurboModal
 
     # Shared base for modal and drawer configuration
     class BaseConfig
-      attr_reader :close_button, :header, :header_divider, :footer_divider, :padding, :overlay
+      attr_reader :advance, :close_button, :close_on_submit, :header, :header_divider, :footer_divider, :padding, :overlay
 
       def self.boolean_option(name)
         define_method(:"#{name}=") do |value|
@@ -51,11 +57,20 @@ module UltimateTurboModal
       end
 
       boolean_option :close_button
+      boolean_option :close_on_submit
       boolean_option :header
       boolean_option :header_divider
       boolean_option :footer_divider
       boolean_option :overlay
 
+      def advance=(value)
+        if [true, false].include?(value) || value.is_a?(String)
+          @advance = value
+        else
+          raise ArgumentError, "Value must be a boolean or a String."
+        end
+      end
+
       def padding=(padding)
         if [true, false].include?(padding) || padding.is_a?(String)
           @padding = padding
@@ -66,26 +81,51 @@ module UltimateTurboModal
     end
 
     class ModalConfig < BaseConfig
-      attr_reader :advance
-
       def initialize
         @advance = false
         @close_button = true
+        @close_on_submit = true
         @header = true
         @header_divider = true
         @footer_divider = true
         @padding = true
         @overlay = true
       end
+    end
 
-      boolean_option :advance
+    # Defaults for the Turbo Confirm dialog. Every value here is a fallback:
+    # anything supplied per-element through `data-turbo-confirm` wins.
+    class ConfirmConfig < BaseConfig
+      attr_accessor :title, :accept_label, :cancel_label
+      attr_reader :enabled
+
+      boolean_option :enabled
+
+      # `advance` and `close_on_submit` are left unset: a confirm never pushes a
+      # URL and holds no form, and the dialog binds neither behavior.
+      def initialize
+        @enabled = true
+        # A confirm has its own Cancel button, and dividers chop up what is
+        # only ever a line or two of text.
+        @close_button = false
+        @header = true
+        @header_divider = false
+        @footer_divider = false
+        @padding = true
+        @overlay = true
+        @title = "Are you sure?"
+        @accept_label = "OK"
+        @cancel_label = "Cancel"
+      end
     end
 
     class DrawerConfig < BaseConfig
       attr_reader :size, :position
 
       def initialize
+        @advance = false
         @close_button = true
+        @close_on_submit = true
         @header = true
         @header_divider = false
         @footer_divider = true

data/lib/ultimate_turbo_modal/helpers/view_helper.rb

@@ -12,5 +12,36 @@ module UltimateTurboModal::Helpers
       size = UltimateTurboModal::Base.validate_drawer_size!(size || cfg.size)
       modal(drawer_position: position, size: size, **options, &block)
     end
+
+    # Renders the inert <template> the Turbo Confirm dialog is cloned from.
+    # Place it once in your layout: its presence is what enables the feature.
+    # Renders nothing when `config.confirm.enabled` is false, which turns the
+    # feature off without touching the layout.
+    def modal_confirm_template(**options)
+      return unless UltimateTurboModal.configuration.confirm_config.enabled
+
+      render(UltimateTurboModal.confirm(request:, **options))
+    end
+
+    # Builds the `data` attributes for an element that should prompt before
+    # acting. The options are JSON-encoded into `data-turbo-confirm` because
+    # Turbo rewrites a link with `data-turbo-method` into a synthetic form and
+    # copies only a fixed set of attributes across -- sibling
+    # `data-turbo-confirm-*` attributes on a link would be dropped.
+    #
+    #   link_to "Delete", post_path(post), data: modal_confirm(
+    #     "This can't be undone.", title: "Delete post?", accept: "Delete",
+    #     variant: :danger, turbo_method: :delete)
+    #
+    # `native: true` opts this one confirmation back out to `window.confirm`.
+    # On a link that is the only way to say it, since Turbo drops sibling
+    # `data-turbo-confirm-native` along with everything else.
+    def modal_confirm(body = nil, title: nil, accept: nil, cancel: nil, variant: nil, native: nil, **data)
+      payload = {title: title, body: body, accept: accept, cancel: cancel,
+                 variant: variant, native: native&.to_s}.compact
+      raise ArgumentError, "modal_confirm requires a body or at least one option" if payload.empty?
+
+      {turbo_confirm: payload.to_json}.merge(data)
+    end
   end
 end