plutonium 0.51.0 → 0.53.0

data/lib/plutonium/ui/grid/card.rb

@@ -75,20 +75,21 @@ module Plutonium
 
         def render_image_slot(size:)
           value = field_value(slots[:image])
-          return unless value
-          src = image_src_for(value)
-          return unless src
 
           if size == :cover
+            # Cover is a full-width banner, not an avatar: only render when an
+            # actual image resolves (no deterministic fallback).
+            src = Plutonium::UI::Avatar.resolve_image_src(value, helpers)
+            return unless src
+
             div(class: "w-full aspect-video bg-[var(--pu-surface-alt)] overflow-hidden") do
               img(src: src, alt: header_text.to_s, class: "w-full h-full object-cover")
             end
           else
-            img(
-              src: src,
-              alt: header_text.to_s,
-              class: "w-12 h-12 rounded-full object-cover bg-[var(--pu-surface-alt)] shrink-0"
-            )
+            # Small avatar slot: render the resolved image, or Avatar's generic
+            # icon fallback. No subject is passed, so image-less cards fall back
+            # to the local icon rather than a per-card request to Navii.
+            Avatar(src: value, size: :lg, alt: header_text.to_s)
           end
         end
 
@@ -163,7 +164,7 @@ module Plutonium
           url = route_options_to_url(show.route_options, record)
           a(
             href: url,
-            data: {row_click_target: "show", turbo_frame: show.turbo_frame},
+            data: {row_click_target: "show", turbo_frame: show.turbo_frame(resource_definition)},
             class: "sr-only",
             tabindex: "-1",
             "aria-label": "Open #{header_text}"
@@ -192,23 +193,6 @@ module Plutonium
           record.public_send(name)
         end
 
-        # Resolves a slot value to an image URL. Supports:
-        # - ActiveStorage attachments (`record.avatar` -> Attached::One/Many)
-        # - Shrine uploaders (`record.avatar` -> UploadedFile, responds to :url)
-        # - Plain URL strings ("https://..." or "/uploads/...")
-        def image_src_for(value)
-          return nil if value.nil?
-          if value.respond_to?(:attached?)
-            value.attached? ? helpers.url_for(value) : nil
-          elsif value.respond_to?(:url)
-            value.url
-          elsif value.is_a?(String) && value.start_with?("http", "/")
-            value
-          end
-        rescue ArgumentError, URI::InvalidURIError
-          nil
-        end
-
         def row_actions
           @row_actions ||= resource_definition.defined_actions.values.select { |a|
             a.collection_record_action? && a.permitted_by?(record_policy)

data/lib/plutonium/ui/modal/base.rb

@@ -9,9 +9,26 @@ module Plutonium
         slot :close
         slot :footer
 
-        def initialize(title: nil, description: nil)
+        # Sizes that all modal subclasses must implement entries for in
+        # their SIZE_CLASSES table. `:auto` is content-driven (`w-fit`
+        # with a viewport cap and a sensible floor) and is the only way
+        # to avoid clipping forms whose natural width exceeds the
+        # default. Sizes intentionally mirror Tailwind's max-w-* scale
+        # so a definition that says `size: :xl` reads predictably.
+        VALID_SIZES = [:sm, :md, :lg, :xl, :auto, :full].freeze
+
+        # Resolves the concrete modal class for a definition's `modal_mode`
+        # symbol. Unknown / `false` modes fall back to `Slideover` so call
+        # sites can stay branchless.
+        def self.class_for_mode(mode)
+          (mode == :centered) ? Plutonium::UI::Modal::Centered : Plutonium::UI::Modal::Slideover
+        end
+
+        def initialize(title: nil, description: nil, size: :md)
           @title = title
           @description = description
+          @size = size
+          validate_size!
         end
 
         def view_template(&block)
@@ -54,9 +71,27 @@ module Plutonium
         end
 
         def dialog_classes
+          "#{base_dialog_classes} #{size_classes}"
+        end
+
+        # Positioning, backdrop, transitions — everything that does
+        # not vary with `size`. Width/height tokens live in
+        # `size_classes` so size keys can fully replace them
+        # (notably `:auto`, which needs `w-fit` instead of `w-full`).
+        def base_dialog_classes
           raise NotImplementedError
         end
 
+        def size_classes
+          self.class::SIZE_CLASSES.fetch(@size)
+        end
+
+        def validate_size!
+          return if VALID_SIZES.include?(@size)
+          raise ArgumentError,
+            "modal size must be one of #{VALID_SIZES.inspect}, got #{@size.inspect}"
+        end
+
         def inner_classes
           "flex flex-col h-full max-h-[inherit] min-h-0"
         end

data/lib/plutonium/ui/modal/centered.rb

@@ -4,16 +4,34 @@ module Plutonium
   module UI
     module Modal
       class Centered < Plutonium::UI::Modal::Base
+        # Width tokens for each VALID_SIZES key. `:md` reproduces the
+        # historical default (`w-full max-w-xl`); `:auto` drops `w-full`
+        # so the dialog hugs its content, with a floor that keeps tiny
+        # confirm dialogs from collapsing and a cap to stay on-screen.
+        SIZE_CLASSES = {
+          sm: "w-full max-w-md",
+          md: "w-full max-w-xl",
+          lg: "w-full max-w-2xl",
+          xl: "w-full max-w-4xl",
+          auto: "w-fit max-w-[90vw] min-w-[400px]",
+          full: "w-full max-w-[95vw]"
+        }.freeze
+
         protected
 
-        def dialog_classes
-          "rounded-[var(--pu-radius-lg)] w-full max-w-xl " \
-            "bg-[var(--pu-surface)] border border-[var(--pu-border)] " \
-            "backdrop:bg-black/60 backdrop:backdrop-blur-sm " \
+        # Surface (bg, border, radius, backdrop) lives in `.pu-dialog` so
+        # the centered modal, dirty-form-guard prompt, and Turbo confirm
+        # can't drift on design tokens. The remaining utilities are
+        # positioning, sizing, and the open/close transform animation —
+        # driven by [data-open] (set on the frame after showModal() by
+        # remote_modal_controller); avoids the @starting-style spec dance.
+        def base_dialog_classes
+          "pu-dialog " \
             "top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2 " \
             "max-h-[80vh] " \
-            "hidden open:flex flex-col p-0 " \
-            "opacity-0 open:opacity-100 transition-opacity duration-200 ease-in-out"
+            "open:flex flex-col p-0 " \
+            "opacity-0 scale-95 data-[open]:opacity-100 data-[open]:scale-100 " \
+            "transition-[opacity,transform] duration-200 ease-out"
         end
       end
     end

data/lib/plutonium/ui/modal/slideover.rb

@@ -4,21 +4,36 @@ module Plutonium
   module UI
     module Modal
       class Slideover < Plutonium::UI::Modal::Base
+        # Width tokens for each VALID_SIZES key. Mobile always takes
+        # full width (the slideover is pinned to the right edge, so
+        # anything narrower than the viewport looks awkward on phones);
+        # the `sm:` token controls the desktop width. `:md` reproduces
+        # the historical default. `:auto` switches to `sm:w-auto` with
+        # a viewport cap so the panel grows to fit the form.
+        SIZE_CLASSES = {
+          sm: "w-full sm:w-[400px]",
+          md: "w-full sm:w-[480px]",
+          lg: "w-full sm:w-[640px]",
+          xl: "w-full sm:w-[800px]",
+          auto: "w-full sm:w-auto sm:max-w-[90vw] sm:min-w-[480px]",
+          full: "w-full sm:w-[95vw]"
+        }.freeze
+
         protected
 
-        def dialog_classes
-          "fixed top-0 right-0 bottom-0 left-auto m-0 h-screen w-full sm:w-[480px] max-w-full max-h-screen " \
+        # Animation is driven by `data-open`, toggled by the remote-modal
+        # controller on the frame after showModal(). Mirrors the filter
+        # slideover's pattern — see Centered for the same rationale.
+        def base_dialog_classes
+          "fixed top-0 right-0 bottom-0 left-auto m-0 h-screen max-w-full max-h-screen " \
             "bg-[var(--pu-surface)] border-l border-[var(--pu-border)] " \
-            "backdrop:bg-black/60 backdrop:backdrop-blur-sm " \
+            "backdrop:bg-transparent data-[open]:backdrop:bg-black/60 " \
+            "data-[open]:backdrop:backdrop-blur-sm " \
+            "backdrop:transition-[background-color] backdrop:duration-300 backdrop:ease-out " \
             "rounded-none p-0 " \
-            "hidden open:flex flex-col " \
-            "translate-x-full open:translate-x-0 " \
-            "transition-[transform,display,overlay] duration-300 ease-out " \
-            "[transition-behavior:allow-discrete] " \
-            "starting:open:translate-x-full " \
-            "backdrop:transition-[display,overlay,background-color] backdrop:duration-300 " \
-            "backdrop:[transition-behavior:allow-discrete] " \
-            "starting:open:backdrop:bg-transparent"
+            "open:flex flex-col " \
+            "translate-x-full data-[open]:translate-x-0 " \
+            "transition-transform duration-300 ease-out"
         end
       end
     end

data/lib/plutonium/ui/nav_user.rb

@@ -52,10 +52,11 @@ module Plutonium
 
       slot :section, Section, collection: true
 
-      def initialize(email:, name: nil, avatar_url: nil)
+      def initialize(email:, name: nil, avatar_url: nil, record: nil)
         @email = email
         @name = name
         @avatar_url = avatar_url
+        @record = record
       end
 
       def view_template
@@ -68,14 +69,6 @@ module Plutonium
       private
 
       def render_trigger_button
-        if @avatar_url.present?
-          render_avatar_button
-        else
-          render_default_button
-        end
-      end
-
-      def render_avatar_button
         button(
           type: "button",
           class: "flex mx-3 text-sm rounded-full md:mr-0 focus:ring-2 focus:ring-[var(--pu-border)] focus:ring-offset-2 transition-shadow",
@@ -84,20 +77,7 @@ module Plutonium
           data: {resource_drop_down_target: "trigger"}
         ) do
           span(class: "sr-only") { "Open user menu" }
-          img(class: "w-8 h-8 rounded-full ring-2 ring-[var(--pu-border)]", src: @avatar_url, alt: "avatar")
-        end
-      end
-
-      def render_default_button
-        button(
-          type: "button",
-          class: "flex mx-3 p-1 text-sm border border-[var(--pu-border)] text-[var(--pu-text-muted)] hover:text-[var(--pu-text)] hover:bg-[var(--pu-surface-alt)] rounded-full md:mr-0 focus:ring-2 focus:ring-[var(--pu-border)] focus:ring-offset-2 transition-colors",
-          aria: {expanded: "false"},
-          id: "user-nav-dropdown-toggle",
-          data: {resource_drop_down_target: "trigger"}
-        ) do
-          span(class: "sr-only") { "Open user menu" }
-          render Phlex::TablerIcons::User.new(class: "w-6 h-6")
+          Avatar(@record, src: @avatar_url, size: :sm, alt: "avatar", class: "ring-2 ring-[var(--pu-border)]")
         end
       end
 

data/lib/plutonium/ui/page/edit.rb

@@ -7,7 +7,7 @@ module Plutonium
         private
 
         def page_title
-          current_definition.edit_page_title || super || "Edit"
+          current_definition.edit_page_title || super || "Edit #{resource_name(resource_class, 1)}"
         end
 
         def page_description
@@ -23,9 +23,12 @@ module Plutonium
         end
 
         def render_modal_form
-          modal_class = (current_definition.modal == :centered) ?
-            Plutonium::UI::Modal::Centered : Plutonium::UI::Modal::Slideover
-          render modal_class.new(title: page_title, description: page_description) do
+          modal_class = Plutonium::UI::Modal::Base.class_for_mode(current_definition.modal_mode)
+          render modal_class.new(
+            title: page_title,
+            description: page_description,
+            size: current_definition.modal_size
+          ) do
             render partial("resource_form")
           end
         end

data/lib/plutonium/ui/page/interactive_action.rb

@@ -18,12 +18,14 @@ module Plutonium
 
         def render_default_content
           if in_modal?
-            modal_class = (current_interactive_action.modal == :slideover) ?
-              Plutonium::UI::Modal::Slideover : Plutonium::UI::Modal::Centered
+            modal_class = Plutonium::UI::Modal::Base.class_for_mode(
+              current_interactive_action.modal_mode(current_definition)
+            )
 
             render modal_class.new(
               title: page_title,
-              description: page_description
+              description: page_description,
+              size: current_interactive_action.modal_size(current_definition)
             ) do
               render partial("interactive_action_form")
             end

data/lib/plutonium/ui/page/new.rb

@@ -7,7 +7,7 @@ module Plutonium
         private
 
         def page_title
-          current_definition.new_page_title || super || "New"
+          current_definition.new_page_title || super || "New #{resource_name(resource_class, 1)}"
         end
 
         def page_description
@@ -23,9 +23,12 @@ module Plutonium
         end
 
         def render_modal_form
-          modal_class = (current_definition.modal == :centered) ?
-            Plutonium::UI::Modal::Centered : Plutonium::UI::Modal::Slideover
-          render modal_class.new(title: page_title, description: page_description) do
+          modal_class = Plutonium::UI::Modal::Base.class_for_mode(current_definition.modal_mode)
+          render modal_class.new(
+            title: page_title,
+            description: page_description,
+            size: current_definition.modal_size
+          ) do
             render partial("resource_form")
           end
         end

data/lib/plutonium/ui/table/components/bulk_actions_toolbar.rb

@@ -68,7 +68,7 @@ module Plutonium
                 bulk_actions_target: "actionButton",
                 bulk_action_name: action.name,
                 bulk_action_url: url,
-                turbo_frame: action.turbo_frame
+                turbo_frame: action.turbo_frame(current_definition)
               }
             ) do
               if action.icon

data/lib/plutonium/ui/table/components/filter_form.rb

@@ -14,10 +14,7 @@ module Plutonium
           def initialize(*, query_object:, search_url:, search_param: :q, search_value: nil, attributes: {}, **opts, &)
             opts[:as] = :q
             opts[:method] = :get
-            attributes = attributes.deep_merge(
-              id: "filter-form",
-              data: {turbo_frame: nil}
-            )
+            attributes = attributes.deep_merge(data: {turbo_frame: nil})
             super(*, attributes:, **opts, &)
             @query_object = query_object
             @search_url = search_url
@@ -25,6 +22,17 @@ module Plutonium
             @search_value = search_value
           end
 
+          # The Filters slideover renders on every index page (off-screen
+          # until opened) — same DOM as any CRUD modal that might appear.
+          # Base defaults the form id to "resource-form"; without this
+          # override, document-level `turbo_stream.replace("resource-form", …)`
+          # from a CRUD submit would clobber the wrong form. Pick a distinct
+          # id so the two never collide.
+          def initialize_attributes
+            super
+            attributes[:id] = "filter-form"
+          end
+
           def form_class
             "flex-1 flex flex-col min-h-0"
           end

data/lib/plutonium/version.rb

@@ -1,5 +1,5 @@
 module Plutonium
-  VERSION = "0.51.0"
+  VERSION = "0.53.0"
   NEXT_MAJOR_VERSION = VERSION.split(".").tap { |v|
     v[1] = v[1].to_i + 1
     v[2] = 0

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@radioactive-labs/plutonium",
-  "version": "0.51.0",
+  "version": "0.53.0",
   "description": "Build production-ready Rails apps in minutes, not days. Convention-driven, fully customizable, AI-ready.",
   "type": "module",
   "main": "src/js/core.js",
@@ -30,15 +30,18 @@
     "marked": "^15.0.3"
   },
   "devDependencies": {
+    "@tabler/icons-vue": "^3.44.0",
     "@tailwindcss/forms": "^0.5.10",
     "@tailwindcss/postcss": "^4.3.0",
     "@tailwindcss/typography": "^0.5.16",
+    "asciinema-player": "^3.15.1",
     "chokidar-cli": "^3.0.0",
     "concurrently": "^8.2.2",
     "cssnano": "^7.0.2",
     "esbuild": "^0.28.0",
     "esbuild-plugin-manifest": "^1.0.3",
     "flowbite-typography": "^1.0.5",
+    "medium-zoom": "^1.1.0",
     "mermaid": "^11.15.0",
     "postcss": "^8.5.14",
     "postcss-cli": "^11.0.1",

data/src/css/components.css

@@ -428,13 +428,21 @@
    =================== */
 
 .pu-checkbox {
-  @apply size-5 rounded-md bg-white border-2 border-slate-300 accent-primary-600 focus:ring-2 focus:ring-primary-500/30 focus:ring-offset-0 cursor-pointer transition-all duration-150 checked:bg-primary-600 checked:border-primary-600 indeterminate:bg-primary-600 indeterminate:border-primary-600 hover:border-primary-400;
+  @apply size-5 rounded-md bg-white border-2 border-slate-300 text-primary-600 accent-primary-600 focus:ring-2 focus:ring-primary-500/30 focus:ring-offset-0 cursor-pointer transition-all duration-150 checked:bg-primary-600 checked:border-primary-600 indeterminate:bg-primary-600 indeterminate:border-primary-600 hover:border-primary-400;
 }
 
 .dark .pu-checkbox {
   @apply bg-slate-700 border-slate-500 hover:border-primary-400;
 }
 
+.pu-radio {
+  @apply size-5 rounded-full bg-white border-2 border-slate-300 text-primary-600 accent-primary-600 focus:ring-2 focus:ring-primary-500/30 focus:ring-offset-0 cursor-pointer transition-all duration-150 checked:bg-primary-600 checked:border-primary-600 hover:border-primary-400;
+}
+
+.dark .pu-radio {
+  @apply bg-slate-700 border-slate-500 hover:border-primary-400;
+}
+
 /* ===================
    EMPTY STATE
    =================== */
@@ -486,6 +494,35 @@
   @apply w-14 px-6 py-4;
 }
 
+/* ===================
+   DIALOG — shared centered <dialog> surface
+   ===================
+   Visual tokens reused by Modal::Centered, the dirty-form-guard
+   confirm dialog, and Turbo's themed confirm. Keeps bg/border/radius
+   and backdrop styling in one place so a design-token change can't
+   silently drift across the three. Animation is driven by toggling
+   the [data-open] attribute one frame after showModal() — see
+   remote_modal_controller for the rationale (the @starting-style /
+   allow-discrete spec dance is unreliable across browsers).
+   Positioning, size, and the dialog's own opacity/scale transition
+   stay on the call site; they vary per dialog. Slideover has its
+   own pinned-right surface and intentionally does not opt in. */
+.pu-dialog {
+  background-color: var(--pu-surface);
+  border: 1px solid var(--pu-border);
+  border-radius: var(--pu-radius-lg);
+}
+
+.pu-dialog::backdrop {
+  background-color: transparent;
+  transition: background-color 200ms ease-out;
+}
+
+.pu-dialog[data-open]::backdrop {
+  background-color: rgb(0 0 0 / 0.6);
+  backdrop-filter: blur(4px);
+}
+
 /* ===================
    ICON RAIL — modern shell
    =================== */

data/src/css/slim_select.css

@@ -34,9 +34,10 @@
   @apply !hidden;
 }
 
-/* Main container - Updated to match form input theme */
+/* Sized to match `.pu-input` so selects line up with text/date/email
+   inputs in the same row. */
 .ss-main {
-  @apply flex flex-row items-center relative select-none w-full px-4 py-3 cursor-pointer border font-medium text-base leading-normal outline-none transition-colors duration-200 overflow-hidden focus:ring-2;
+  @apply flex flex-row items-center relative select-none w-full px-3 h-9 cursor-pointer border text-sm outline-none transition-colors duration-200 overflow-hidden focus:ring-2;
   background-color: var(--pu-input-bg);
   border-color: var(--pu-input-border);
   border-radius: var(--pu-radius-md);

data/src/js/controllers/dirty_form_guard_controller.js

@@ -0,0 +1,165 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="dirty-form-guard"
+// Prompts before dismissing a modal form whose contents have changed.
+// Self-disables when not inside a <dialog>, so it's safe to attach to
+// every form unconditionally.
+//
+// Esc is intercepted at the document's capture phase: relying on the
+// dialog's `cancel` event alone proved flaky under rapid/held Esc when
+// the parent dialog uses `closedby="any"`. The cancel listener stays
+// as defense in depth.
+export default class extends Controller {
+  static targets = ["confirmDialog"];
+
+  // Set by controllers, not the user — comparing them would flag
+  // every form as dirty on connect (return_to) or on submit (pre_submit).
+  static IGNORED_KEYS = new Set(["authenticity_token", "return_to", "pre_submit"]);
+
+  connect() {
+    this.dialog = this.element.closest("dialog");
+    if (!this.dialog) return;
+
+    this.snapshot = this.#serialize();
+    this.forceClose = false;
+    this.submitting = false;
+
+    this.onCancel = this.#onCancel.bind(this);
+    this.onSubmit = this.#onSubmit.bind(this);
+    this.onCloseButtonClick = this.#onCloseButtonClick.bind(this);
+    this.onConfirmCancel = this.#onConfirmCancel.bind(this);
+    this.onKeydown = this.#onKeydown.bind(this);
+
+    document.addEventListener("keydown", this.onKeydown, true);
+    // Capture phase so this runs before remote-modal's cancel handler
+    // — that way `defaultPrevented` is visible there if we intervene.
+    this.dialog.addEventListener("cancel", this.onCancel, true);
+
+    this.element.addEventListener("submit", this.onSubmit);
+    this.#closeButtons().forEach((btn) =>
+      btn.addEventListener("click", this.onCloseButtonClick, true),
+    );
+
+    if (this.hasConfirmDialogTarget) {
+      this.confirmDialogTarget.addEventListener("cancel", this.onConfirmCancel);
+    }
+  }
+
+  disconnect() {
+    if (!this.dialog) return;
+    document.removeEventListener("keydown", this.onKeydown, true);
+    this.dialog.removeEventListener("cancel", this.onCancel, true);
+    this.element.removeEventListener("submit", this.onSubmit);
+    this.#closeButtons().forEach((btn) =>
+      btn.removeEventListener("click", this.onCloseButtonClick, true),
+    );
+    if (this.hasConfirmDialogTarget) {
+      this.confirmDialogTarget.removeEventListener("cancel", this.onConfirmCancel);
+    }
+  }
+
+  async discard() {
+    this.forceClose = true;
+    await this.#closeConfirm();
+    // Hand off to remote-modal so the parent modal animates out
+    // instead of snapping shut.
+    this.dialog.dispatchEvent(new CustomEvent("modal:request-close"));
+  }
+
+  keepEditing() {
+    this.#closeConfirm();
+  }
+
+  #closeButtons() {
+    if (!this.dialog) return [];
+    return this.dialog.querySelectorAll('[data-action~="remote-modal#close"]');
+  }
+
+  #serialize() {
+    const data = new FormData(this.element);
+    const enc = encodeURIComponent;
+    return [...data.entries()]
+      .filter(([key]) => !this.constructor.IGNORED_KEYS.has(key))
+      .map(([key, value]) => {
+        const v = value instanceof File ? value.name : value;
+        return `${enc(key)}=${enc(v)}`;
+      })
+      .sort()
+      .join("&");
+  }
+
+  #isDirty() {
+    return this.#serialize() !== this.snapshot;
+  }
+
+  #onSubmit() {
+    this.submitting = true;
+  }
+
+  #confirmIsOpen() {
+    return this.hasConfirmDialogTarget && this.confirmDialogTarget.open;
+  }
+
+  #onKeydown(event) {
+    if (event.key !== "Escape") return;
+    if (!this.dialog.open) return;
+
+    // Once the confirm is open, only its buttons may close it.
+    if (this.#confirmIsOpen()) {
+      event.preventDefault();
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+      return;
+    }
+
+    if (this.forceClose || this.submitting) return;
+    if (!this.#isDirty()) return;
+
+    event.preventDefault();
+    event.stopPropagation();
+    event.stopImmediatePropagation();
+    this.#promptDiscard();
+  }
+
+  #onCancel(event) {
+    if (this.forceClose || this.submitting) return;
+    if (!this.#isDirty()) return;
+    event.preventDefault();
+    this.#promptDiscard();
+  }
+
+  #onCloseButtonClick(event) {
+    if (this.forceClose || this.submitting) return;
+    if (!this.#isDirty()) return;
+    event.preventDefault();
+    event.stopPropagation();
+    this.#promptDiscard();
+  }
+
+  #onConfirmCancel(event) {
+    event.preventDefault();
+  }
+
+  #promptDiscard() {
+    if (this.hasConfirmDialogTarget) {
+      const d = this.confirmDialogTarget;
+      d.showModal();
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => d.setAttribute("data-open", ""));
+      });
+    } else if (window.confirm("Discard your changes?")) {
+      this.forceClose = true;
+      this.dialog.dispatchEvent(new CustomEvent("modal:request-close"));
+    }
+  }
+
+  async #closeConfirm() {
+    if (!this.hasConfirmDialogTarget) return;
+    const d = this.confirmDialogTarget;
+    if (!d.open) return;
+    d.removeAttribute("data-open");
+    const animations = d.getAnimations({ subtree: true });
+    await Promise.allSettled(animations.map((a) => a.finished));
+    d.close();
+  }
+}

data/src/js/controllers/form_controller.js

@@ -6,19 +6,20 @@ export default class extends Controller {
   }
  
   preSubmit() {
-    // Create a hidden input field
+    // Some widgets (e.g. slim-select) dispatch their own change event on top
+    // of the native one, so this can fire twice per user action. Remove any
+    // prior hidden field before appending a fresh one to avoid duplicates.
+    this.element.querySelectorAll('input[name="pre_submit"]').forEach(n => n.remove());
+
     const hiddenField = document.createElement('input');
     hiddenField.type = 'hidden';
     hiddenField.name = 'pre_submit';
     hiddenField.value = 'true';
- 
-    // Append it to the form
     this.element.appendChild(hiddenField);
 
     // Skip validation by setting novalidate attribute
     this.element.setAttribute('novalidate', '');
 
-    // Submit the form
     this.submit();
   }