stimeo-ui 0.4.0 → 0.6.0

package/dist/controllers/empty_state_controller.js

@@ -29,23 +29,120 @@ var EmptyStateController = class extends Controller {
   };
   static events = ["change"];
   #observer = null;
+  /** Whether the controller is between `connect()` and `disconnect()`. */
+  #connected = false;
   /** Last applied empty state; `null` until the first sync so connect emits nothing. */
   #empty = null;
   connect() {
-    if (!this.hasListTarget) return;
-    if (typeof MutationObserver !== "undefined") {
-      this.#observer = new MutationObserver(() => this.#apply());
-      this.#observer.observe(this.listTarget, { childList: true });
-    }
-    this.#apply();
+    this.#connected = true;
+    this.#syncObservation();
+    this.#update();
   }
   disconnect() {
+    this.#connected = false;
+    this.#stopObserving();
+  }
+  /** Follows a `list` element swapped in at runtime (Turbo Stream `replace` / morph). */
+  listTargetConnected() {
+    this.#resync();
+  }
+  /** Releases the observation when the `list` element leaves the target set. */
+  listTargetDisconnected() {
+    this.#resync();
+  }
+  /** Syncs an `empty` element that arrives — or is replaced — at runtime. */
+  emptyTargetConnected() {
+    this.#resync();
+  }
+  /**
+   * Syncs the `empty` element that remains when one leaves the target set. A
+   * single-target getter resolves to the first `empty` element in document order,
+   * so a swap that inserts the replacement *before* removing the original (Turbo
+   * Stream `after` / `before` / `append` followed by `remove`) leaves the
+   * replacement untouched until the original goes — this callback is that moment.
+   */
+  emptyTargetDisconnected() {
+    this.#resync();
+  }
+  /** Re-renders when application code (or a Turbo morph) changes `itemSelector` at runtime. */
+  itemSelectorValueChanged() {
+    this.#resync();
+  }
+  /**
+   * Re-points the observation and re-renders after a target or selector change.
+   * The `#connected` guard is load-bearing: Stimulus runs value and target
+   * callbacks for the initial markup *before* `connect()` and runs target
+   * callbacks during teardown *after* `disconnect()`, and re-observing there
+   * would outlive the controller.
+   */
+  #resync() {
+    if (!this.#connected) return;
+    this.#syncObservation();
+    this.#update();
+  }
+  /**
+   * Points the mutation observation at the current `list` target — re-resolved on
+   * every sync rather than captured at connect, so an element swapped in at
+   * runtime is observed instead of the detached original.
+   *
+   * The observation covers exactly what the count predicate reads. With no
+   * `itemSelector` the count is the child element count, which only `childList`
+   * can change. With one, the predicate reads the children themselves, so
+   * attribute and descendant mutations are watched too — and the controller's own
+   * writes are filtered back out, or toggling `hidden` would re-enter the render.
+   */
+  #syncObservation() {
+    this.#stopObserving();
+    if (!this.hasListTarget || typeof MutationObserver === "undefined") return;
+    const watchesItems = this.itemSelectorValue.length > 0;
+    this.#observer = new MutationObserver((records) => {
+      if (records.some((record) => this.#affectsCount(record))) this.#update();
+    });
+    this.#observer.observe(this.listTarget, {
+      childList: true,
+      subtree: watchesItems,
+      attributes: watchesItems
+    });
+  }
+  #stopObserving() {
     this.#observer?.disconnect();
     this.#observer = null;
   }
-  /** Recomputes the count and syncs visibility, hooks, and the change event. */
-  #apply() {
-    if (!this.hasListTarget) return;
+  /**
+   * Whether a mutation can change the item count. An attribute written on a
+   * target this controller owns is its own echo — `hidden` on `list` / `empty`,
+   * and the hooks on the controller element when the list *is* that element.
+   */
+  #affectsCount(record) {
+    if (record.type !== "attributes") return true;
+    const own = record.target === this.listTarget || this.hasEmptyTarget && record.target === this.emptyTarget;
+    return !own;
+  }
+  /**
+   * Renders the count, then reports a crossed boundary. The announcement copy is
+   * read here rather than while rendering: it is the wording of the report, not
+   * an input to what is displayed.
+   */
+  #update() {
+    const count = this.#render();
+    if (count === null) return;
+    const empty = count === 0;
+    const crossed = this.#empty !== null && empty !== this.#empty;
+    this.#empty = empty;
+    if (!crossed) return;
+    this.dispatch("change", { detail: { count, empty } });
+    announce(
+      fillTemplate(empty ? this.announceTextValue : this.announceFilledTextValue, { count })
+    );
+  }
+  /**
+   * Syncs visibility and the state hooks to the current item count, and returns
+   * it. `null` when there is no `list` target to count.
+   *
+   * @stimeoRenderRoot
+   */
+  #render() {
+    if (!this.hasListTarget) return null;
     const count = this.#count();
     const empty = count === 0;
     this.element.setAttribute("data-count", String(count));
@@ -56,13 +153,7 @@ var EmptyStateController = class extends Controller {
     }
     this.listTarget.hidden = empty;
     if (this.hasEmptyTarget) this.emptyTarget.hidden = !empty;
-    if (this.#empty !== null && empty !== this.#empty) {
-      this.dispatch("change", { detail: { count, empty } });
-      announce(
-        fillTemplate(empty ? this.announceTextValue : this.announceFilledTextValue, { count })
-      );
-    }
-    this.#empty = empty;
+    return count;
   }
   /** Item count: element children matching `itemSelector`, or all element children. */
   #count() {

package/dist/controllers/empty_state_controller.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/announce.ts","../../src/controllers/empty_state_controller.ts"],"names":[],"mappings":"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","file":"empty_state_controller.js","sourcesContent":["/**\n * Sends one message to the page's shared `stimeo--announcer`.\n *\n * A component that has to reach assistive tech does not carry a live region of its\n * own: a region only announces what changes *after* assistive tech already knows\n * about it, which a region that appears (or is un-hidden) with its message cannot\n * satisfy. The one region that can is the announcer sitting in the page from the\n * start, so state changes are handed to it as an event and it does the reading.\n *\n * The event goes to `window` because the announcer is usually a sibling high in the\n * document rather than an ancestor of the component dispatching it.\n *\n * Wording comes from the consumer — the library ships no English strings — so an\n * empty message is silently dropped and nothing is announced.\n *\n * @example\n * ```ts\n * announce(this.announceTextValue, { assertive: false });\n * ```\n */\nexport function announce(message: string, options: { assertive?: boolean } = {}): void {\n  const text = message.trim();\n  if (text.length === 0) return;\n  window.dispatchEvent(\n    new CustomEvent(\"stimeo--announcer:announce\", {\n      detail: { message: text, assertive: options.assertive === true },\n    }),\n  );\n}\n\n/**\n * Fills `{name}` placeholders in an announcement template from `values`.\n *\n * The same substitution the value-text templates use, so a consumer writes\n * `\"{percent}% complete\"` in one attribute and gets the same rules everywhere. A\n * placeholder with no matching entry is left as authored rather than blanked, which\n * keeps a typo visible instead of silently swallowing the word.\n */\nexport function fillTemplate(template: string, values: Record<string, string | number>): string {\n  return template.replace(/\\{([a-zA-Z][a-zA-Z0-9]*)\\}/g, (match, name: string) => {\n    const replacement = values[name];\n    return replacement === undefined ? match : String(replacement);\n  });\n}\n","import { Controller } from \"@hotwired/stimulus\";\nimport { announce, fillTemplate } from \"../utils/announce\";\n\n/**\n * Headless empty-state behavior: shows an \"empty\" placeholder when a list has no\n * items and hides it once one arrives (and vice-versa), watching the list with a\n * `MutationObserver` (no dedicated APG pattern; follows the WCAG \"status messages\"\n * practice when announcing).\n *\n * Markup contract (identifier: `stimeo--empty-state`):\n *   <div data-controller=\"stimeo--empty-state\">\n *     <ul data-stimeo--empty-state-target=\"list\"><!-- Turbo Stream rows --></ul>\n *     <p data-stimeo--empty-state-target=\"empty\" hidden>No items</p>\n *   </div>\n *\n * Counts `list`'s child items (all element children, or those matching\n * `itemSelector`) on connect and on every childList mutation, toggles `hidden` on\n * `list` / `empty` at the 0 ↔ 1+ boundary, and reflects `data-empty` / `data-count`\n * on the controller element. Crossing the boundary dispatches `change`.\n *\n * @remarks\n * Behavior only — the placeholder's look/copy is the consumer's. State is derived\n * from the DOM (no module-scope state), so `connect()` re-syncs after a Turbo\n * Stream insertion. The `MutationObserver` is severed on `disconnect()` (Turbo\n * navigation included). With `announce`, the `empty` target is made a polite live\n * region (only if the author hasn't already), so showing it is announced — SR\n * support for unhiding a live region varies; pair with Announcer for a guarantee.\n *\n * Ownership note: this controller deliberately owns `hidden` on the `list` / `empty`\n * targets as its single source of truth for which one is shown, rather than only\n * emitting `data-empty` and delegating visibility to consumer CSS. The toggle is\n * unconditional (set every sync), so there is nothing to save/restore and no\n * authored `hidden` to preserve — the displayed half is always a pure function of\n * the item count. Consumers wanting CSS-driven visibility should not also set\n * `hidden` on these targets themselves.\n */\nexport class EmptyStateController extends Controller<HTMLElement> {\n  static override targets = [\"list\", \"empty\"];\n  static override values = {\n    itemSelector: { type: String, default: \"\" },\n    announceText: { type: String, default: \"\" },\n    announceFilledText: { type: String, default: \"\" },\n  };\n  static events = [\"change\"] as const;\n\n  declare readonly listTarget: HTMLElement;\n  declare readonly emptyTarget: HTMLElement;\n  declare readonly hasListTarget: boolean;\n  declare readonly hasEmptyTarget: boolean;\n\n  declare itemSelectorValue: string;\n  declare announceTextValue: string;\n  declare announceFilledTextValue: string;\n\n  #observer: MutationObserver | null = null;\n  /** Last applied empty state; `null` until the first sync so connect emits nothing. */\n  #empty: boolean | null = null;\n\n  override connect(): void {\n    if (!this.hasListTarget) return;\n    if (typeof MutationObserver !== \"undefined\") {\n      this.#observer = new MutationObserver(() => this.#apply());\n      this.#observer.observe(this.listTarget, { childList: true });\n    }\n    this.#apply();\n  }\n\n  override disconnect(): void {\n    this.#observer?.disconnect();\n    this.#observer = null;\n  }\n\n  /** Recomputes the count and syncs visibility, hooks, and the change event. */\n  #apply(): void {\n    if (!this.hasListTarget) return;\n    const count = this.#count();\n    const empty = count === 0;\n\n    this.element.setAttribute(\"data-count\", String(count));\n    if (empty) {\n      this.element.setAttribute(\"data-empty\", \"true\");\n    } else {\n      this.element.removeAttribute(\"data-empty\");\n    }\n    this.listTarget.hidden = empty;\n    if (this.hasEmptyTarget) this.emptyTarget.hidden = !empty;\n\n    // Emit only when the 0 ↔ 1+ boundary is crossed (not on the initial sync, and\n    // not for count changes that stay non-empty, e.g. 2 → 3).\n    if (this.#empty !== null && empty !== this.#empty) {\n      this.dispatch(\"change\", { detail: { count, empty } });\n      // The crossing is the news, and the page's announcer reads it: a region that\n      // only becomes live when the empty state appears is not reliably announced.\n      announce(\n        fillTemplate(empty ? this.announceTextValue : this.announceFilledTextValue, { count }),\n      );\n    }\n    this.#empty = empty;\n  }\n\n  /** Item count: element children matching `itemSelector`, or all element children. */\n  #count(): number {\n    const selector = this.itemSelectorValue;\n    if (selector.length === 0) return this.listTarget.childElementCount;\n    try {\n      return Array.from(this.listTarget.children).filter((child) => child.matches(selector)).length;\n    } catch {\n      // An invalid selector (author typo) must not crash the controller — count all.\n      return this.listTarget.childElementCount;\n    }\n  }\n}\n"]}
+{"version":3,"sources":["../../src/utils/announce.ts","../../src/controllers/empty_state_controller.ts"],"names":[],"mappings":"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","file":"empty_state_controller.js","sourcesContent":["/**\n * Sends one message to the page's shared `stimeo--announcer`.\n *\n * A component that has to reach assistive tech does not carry a live region of its\n * own: a region only announces what changes *after* assistive tech already knows\n * about it, which a region that appears (or is un-hidden) with its message cannot\n * satisfy. The one region that can is the announcer sitting in the page from the\n * start, so state changes are handed to it as an event and it does the reading.\n *\n * The event goes to `window` because the announcer is usually a sibling high in the\n * document rather than an ancestor of the component dispatching it.\n *\n * Wording comes from the consumer — the library ships no English strings — so an\n * empty message is silently dropped and nothing is announced.\n *\n * @example\n * ```ts\n * announce(this.announceTextValue, { assertive: false });\n * ```\n */\nexport function announce(message: string, options: { assertive?: boolean } = {}): void {\n  const text = message.trim();\n  if (text.length === 0) return;\n  window.dispatchEvent(\n    new CustomEvent(\"stimeo--announcer:announce\", {\n      detail: { message: text, assertive: options.assertive === true },\n    }),\n  );\n}\n\n/**\n * Fills `{name}` placeholders in an announcement template from `values`.\n *\n * The same substitution the value-text templates use, so a consumer writes\n * `\"{percent}% complete\"` in one attribute and gets the same rules everywhere. A\n * placeholder with no matching entry is left as authored rather than blanked, which\n * keeps a typo visible instead of silently swallowing the word.\n */\nexport function fillTemplate(template: string, values: Record<string, string | number>): string {\n  return template.replace(/\\{([a-zA-Z][a-zA-Z0-9]*)\\}/g, (match, name: string) => {\n    const replacement = values[name];\n    return replacement === undefined ? match : String(replacement);\n  });\n}\n","import { Controller } from \"@hotwired/stimulus\";\nimport { announce, fillTemplate } from \"../utils/announce\";\n\n/**\n * Headless empty-state behavior: shows an \"empty\" placeholder when a list has no\n * items and hides it once one arrives (and vice-versa), watching the list with a\n * `MutationObserver` (no dedicated APG pattern; follows the WCAG \"status messages\"\n * practice when announcing).\n *\n * Markup contract (identifier: `stimeo--empty-state`):\n *   <div data-controller=\"stimeo--empty-state\">\n *     <ul data-stimeo--empty-state-target=\"list\"><!-- Turbo Stream rows --></ul>\n *     <p data-stimeo--empty-state-target=\"empty\" hidden>No items</p>\n *   </div>\n *\n * Counts `list`'s child items (all element children, or those matching\n * `itemSelector`) on connect and on every mutation that can change that count,\n * toggles `hidden` on `list` / `empty` at the 0 ↔ 1+ boundary, and reflects\n * `data-empty` / `data-count` on the controller element. Crossing the boundary\n * dispatches `change` after the display is updated, so a listener reads the\n * state the crossing produced.\n *\n * @remarks\n * Behavior only — the placeholder's look/copy is the consumer's. State is derived\n * from the DOM (no module-scope state), so `connect()` re-syncs after a Turbo\n * Stream insertion. Both targets are re-resolved at runtime: a `list` element\n * swapped in re-points the observation, and a swapped-in `empty` element is\n * re-synced — including when the replacement is inserted while the original is\n * still in the document. The `MutationObserver` is severed on `disconnect()`\n * (Turbo navigation included). `announceText` / `announceFilledText` are read at\n * the crossing and handed to the page's announcer.\n *\n * Ownership note: this controller deliberately owns `hidden` on the `list` / `empty`\n * targets as its single source of truth for which one is shown, rather than only\n * emitting `data-empty` and delegating visibility to consumer CSS. The toggle is\n * unconditional (set every sync), so there is nothing to save/restore and no\n * authored `hidden` to preserve — the displayed half is always a pure function of\n * the item count. Consumers wanting CSS-driven visibility should not also set\n * `hidden` on these targets themselves.\n */\nexport class EmptyStateController extends Controller<HTMLElement> {\n  static override targets = [\"list\", \"empty\"];\n  static override values = {\n    itemSelector: { type: String, default: \"\" },\n    announceText: { type: String, default: \"\" },\n    announceFilledText: { type: String, default: \"\" },\n  };\n  static events = [\"change\"] as const;\n\n  declare readonly listTarget: HTMLElement;\n  declare readonly emptyTarget: HTMLElement;\n  declare readonly hasListTarget: boolean;\n  declare readonly hasEmptyTarget: boolean;\n\n  declare itemSelectorValue: string;\n  declare announceTextValue: string;\n  declare announceFilledTextValue: string;\n\n  #observer: MutationObserver | null = null;\n  /** Whether the controller is between `connect()` and `disconnect()`. */\n  #connected = false;\n  /** Last applied empty state; `null` until the first sync so connect emits nothing. */\n  #empty: boolean | null = null;\n\n  override connect(): void {\n    this.#connected = true;\n    this.#syncObservation();\n    this.#update();\n  }\n\n  override disconnect(): void {\n    this.#connected = false;\n    this.#stopObserving();\n  }\n\n  /** Follows a `list` element swapped in at runtime (Turbo Stream `replace` / morph). */\n  listTargetConnected(): void {\n    this.#resync();\n  }\n\n  /** Releases the observation when the `list` element leaves the target set. */\n  listTargetDisconnected(): void {\n    this.#resync();\n  }\n\n  /** Syncs an `empty` element that arrives — or is replaced — at runtime. */\n  emptyTargetConnected(): void {\n    this.#resync();\n  }\n\n  /**\n   * Syncs the `empty` element that remains when one leaves the target set. A\n   * single-target getter resolves to the first `empty` element in document order,\n   * so a swap that inserts the replacement *before* removing the original (Turbo\n   * Stream `after` / `before` / `append` followed by `remove`) leaves the\n   * replacement untouched until the original goes — this callback is that moment.\n   */\n  emptyTargetDisconnected(): void {\n    this.#resync();\n  }\n\n  /** Re-renders when application code (or a Turbo morph) changes `itemSelector` at runtime. */\n  itemSelectorValueChanged(): void {\n    this.#resync();\n  }\n\n  /**\n   * Re-points the observation and re-renders after a target or selector change.\n   * The `#connected` guard is load-bearing: Stimulus runs value and target\n   * callbacks for the initial markup *before* `connect()` and runs target\n   * callbacks during teardown *after* `disconnect()`, and re-observing there\n   * would outlive the controller.\n   */\n  #resync(): void {\n    if (!this.#connected) return;\n    this.#syncObservation();\n    this.#update();\n  }\n\n  /**\n   * Points the mutation observation at the current `list` target — re-resolved on\n   * every sync rather than captured at connect, so an element swapped in at\n   * runtime is observed instead of the detached original.\n   *\n   * The observation covers exactly what the count predicate reads. With no\n   * `itemSelector` the count is the child element count, which only `childList`\n   * can change. With one, the predicate reads the children themselves, so\n   * attribute and descendant mutations are watched too — and the controller's own\n   * writes are filtered back out, or toggling `hidden` would re-enter the render.\n   */\n  #syncObservation(): void {\n    this.#stopObserving();\n    if (!this.hasListTarget || typeof MutationObserver === \"undefined\") return;\n    const watchesItems = this.itemSelectorValue.length > 0;\n    this.#observer = new MutationObserver((records) => {\n      if (records.some((record) => this.#affectsCount(record))) this.#update();\n    });\n    this.#observer.observe(this.listTarget, {\n      childList: true,\n      subtree: watchesItems,\n      attributes: watchesItems,\n    });\n  }\n\n  #stopObserving(): void {\n    this.#observer?.disconnect();\n    this.#observer = null;\n  }\n\n  /**\n   * Whether a mutation can change the item count. An attribute written on a\n   * target this controller owns is its own echo — `hidden` on `list` / `empty`,\n   * and the hooks on the controller element when the list *is* that element.\n   */\n  #affectsCount(record: MutationRecord): boolean {\n    if (record.type !== \"attributes\") return true;\n    const own =\n      record.target === this.listTarget ||\n      (this.hasEmptyTarget && record.target === this.emptyTarget);\n    return !own;\n  }\n\n  /**\n   * Renders the count, then reports a crossed boundary. The announcement copy is\n   * read here rather than while rendering: it is the wording of the report, not\n   * an input to what is displayed.\n   */\n  #update(): void {\n    const count = this.#render();\n    if (count === null) return;\n    const empty = count === 0;\n    // Report only when the 0 ↔ 1+ boundary is crossed (not on the initial sync,\n    // and not for count changes that stay non-empty, e.g. 2 → 3).\n    const crossed = this.#empty !== null && empty !== this.#empty;\n    this.#empty = empty;\n    if (!crossed) return;\n\n    this.dispatch(\"change\", { detail: { count, empty } });\n    // The crossing is the news, and the page's announcer reads it: a region that\n    // only becomes live when the empty state appears is not reliably announced.\n    announce(\n      fillTemplate(empty ? this.announceTextValue : this.announceFilledTextValue, { count }),\n    );\n  }\n\n  /**\n   * Syncs visibility and the state hooks to the current item count, and returns\n   * it. `null` when there is no `list` target to count.\n   *\n   * @stimeoRenderRoot\n   */\n  #render(): number | null {\n    if (!this.hasListTarget) return null;\n    const count = this.#count();\n    const empty = count === 0;\n\n    this.element.setAttribute(\"data-count\", String(count));\n    if (empty) {\n      this.element.setAttribute(\"data-empty\", \"true\");\n    } else {\n      this.element.removeAttribute(\"data-empty\");\n    }\n    this.listTarget.hidden = empty;\n    if (this.hasEmptyTarget) this.emptyTarget.hidden = !empty;\n    return count;\n  }\n\n  /** Item count: element children matching `itemSelector`, or all element children. */\n  #count(): number {\n    const selector = this.itemSelectorValue;\n    if (selector.length === 0) return this.listTarget.childElementCount;\n    try {\n      return Array.from(this.listTarget.children).filter((child) => child.matches(selector)).length;\n    } catch {\n      // An invalid selector (author typo) must not crash the controller — count all.\n      return this.listTarget.childElementCount;\n    }\n  }\n}\n"]}

package/dist/controllers/file_dropzone_controller.d.ts

@@ -38,7 +38,8 @@ import { Controller } from '@hotwired/stimulus';
  *   `stimeo--file-dropzone:change` with the current `File[]`.
  * - Removing a file revokes its `objectURL` and moves focus to the next (else
  *   previous) remove button, falling back to the trigger; `disconnect()` revokes
- *   every outstanding `objectURL`.
+ *   every outstanding `objectURL`. Replacing the `list` target rebinds delegated
+ *   removal and moves the client-only previews into the replacement.
  */
 declare class FileDropzoneController extends Controller<HTMLElement> {
     #private;
@@ -61,6 +62,7 @@ declare class FileDropzoneController extends Controller<HTMLElement> {
     static events: readonly ["change", "reject"];
     readonly inputTarget: HTMLInputElement;
     readonly listTarget: HTMLElement;
+    readonly listTargets: HTMLElement[];
     readonly triggerTarget: HTMLElement;
     readonly itemTemplateTarget: HTMLTemplateElement;
     readonly statusTarget: HTMLElement;
@@ -77,6 +79,10 @@ declare class FileDropzoneController extends Controller<HTMLElement> {
     connect(): void;
     /** Revokes any outstanding preview URLs so none leaks across navigations. */
     disconnect(): void;
+    /** Rebinds removal and restores client-only previews when Turbo replaces the list target. */
+    listTargetConnected(list: HTMLElement): void;
+    /** Releases only the list target that actually disconnected. */
+    listTargetDisconnected(list: HTMLElement): void;
     /** Opens the native file dialog. Bound via `data-action` (trigger click). */
     openDialog(): void;
     /** Adds the files chosen through the native dialog. */

package/dist/controllers/file_dropzone_controller.js

@@ -12,18 +12,38 @@ var FileDropzoneController = class extends Controller {
   static events = ["change", "reject"];
   /** Selected files paired with their rendered item and any preview objectURL. */
   #entries = [];
+  /** Prevents initial and teardown target callbacks from binding outside controller lifetime. */
+  #connected = false;
   /** Wires file removal as a delegated listener on the list container. */
   connect() {
-    if (this.hasListTarget) this.listTarget.addEventListener("click", this.#onItemClick);
+    this.#connected = true;
+    if (this.hasListTarget) this.#bindList(this.listTarget);
   }
   /** Revokes any outstanding preview URLs so none leaks across navigations. */
   disconnect() {
-    if (this.hasListTarget) this.listTarget.removeEventListener("click", this.#onItemClick);
+    this.#connected = false;
+    for (const list of this.listTargets) list.removeEventListener("click", this.#onItemClick);
     for (const entry of this.#entries) {
       if (entry.url) URL.revokeObjectURL(entry.url);
     }
     this.#entries.length = 0;
   }
+  /** Rebinds removal and restores client-only previews when Turbo replaces the list target. */
+  listTargetConnected(list) {
+    if (!this.#connected) return;
+    this.#bindList(list);
+  }
+  /** Releases only the list target that actually disconnected. */
+  listTargetDisconnected(list) {
+    list.removeEventListener("click", this.#onItemClick);
+  }
+  /** Binds delegated removal once and moves live preview items into the current list. */
+  #bindList(list) {
+    list.addEventListener("click", this.#onItemClick);
+    for (const entry of this.#entries) {
+      if (!list.contains(entry.item)) list.appendChild(entry.item);
+    }
+  }
   /** Opens the native file dialog. Bound via `data-action` (trigger click). */
   openDialog() {
     this.inputTarget.click();
@@ -55,8 +75,11 @@ var FileDropzoneController = class extends Controller {
    * an item is appended without waiting on Stimulus to wire a freshly created element.
    */
   #onItemClick = (event) => {
+    const list = event.currentTarget;
     const button = event.target.closest("button");
-    if (!button || !this.hasListTarget || !this.listTarget.contains(button)) return;
+    if (!this.#connected || !list || !button || !this.hasListTarget || list !== this.listTarget || !list.contains(button)) {
+      return;
+    }
     const index = this.#entries.findIndex((entry) => entry.item.contains(button));
     if (index !== -1) this.#removeAt(index);
   };

package/dist/controllers/file_dropzone_controller.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/controllers/file_dropzone_controller.ts"],"names":[],"mappings":"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","file":"file_dropzone_controller.js","sourcesContent":["import { Controller } from \"@hotwired/stimulus\";\n\n/**\n * Headless, accessible file drag-and-drop / upload field.\n *\n * Markup contract (identifier: `stimeo--file-dropzone`):\n *   <div data-controller=\"stimeo--file-dropzone\"\n *        data-stimeo--file-dropzone-max-size-value=\"5242880\">\n *     <div data-stimeo--file-dropzone-target=\"zone\"\n *          data-action=\"dragover->stimeo--file-dropzone#onDragOver\n *                       dragleave->stimeo--file-dropzone#onDragLeave\n *                       drop->stimeo--file-dropzone#onDrop\">\n *       <button type=\"button\" data-stimeo--file-dropzone-target=\"trigger\"\n *               data-action=\"click->stimeo--file-dropzone#openDialog\">Choose…</button>\n *       <input type=\"file\" accept=\"image/*\" multiple class=\"visually-hidden\"\n *              data-stimeo--file-dropzone-target=\"input\"\n *              data-action=\"change->stimeo--file-dropzone#onChange\" />\n *     </div>\n *     <ul data-stimeo--file-dropzone-target=\"list\" aria-label=\"Selected files\"></ul>\n *     <span role=\"status\" aria-live=\"polite\" class=\"visually-hidden\"\n *           data-stimeo--file-dropzone-target=\"status\"></span>\n *     <template data-stimeo--file-dropzone-target=\"itemTemplate\">…</template>\n *   </div>\n *\n * There is no single APG pattern; the native `<input type=\"file\">` stays the\n * primary, keyboard-operable path and the drop zone is an enhancement, mapping to\n * WCAG 2.1.1, 2.4.7, 4.1.2, 4.1.3, and 1.4.1 (drag state is conveyed in words,\n * not color alone).\n *\n * Behavior provided:\n * - Click / keyboard via the `trigger` opens the native file dialog; drag-and-drop\n *   over the `zone` adds files (with a `data-dragover` flag and a spoken hint).\n * - Each file is validated against `accept`, `maxSize`, and the file count\n *   (`maxFiles`, or 1 when the input is not `multiple`); rejects fire\n *   `stimeo--file-dropzone:reject` and set `data-…-invalid`.\n * - Accepted files render from `itemTemplate` with a `Remove {name}` button and an\n *   image thumbnail (`objectURL`); every change dispatches\n *   `stimeo--file-dropzone:change` with the current `File[]`.\n * - Removing a file revokes its `objectURL` and moves focus to the next (else\n *   previous) remove button, falling back to the trigger; `disconnect()` revokes\n *   every outstanding `objectURL`.\n */\nexport class FileDropzoneController extends Controller<HTMLElement> {\n  static override targets = [\"zone\", \"trigger\", \"input\", \"list\", \"item\", \"itemTemplate\", \"status\"];\n  static override values = {\n    maxSize: { type: Number, default: 0 },\n    maxFiles: { type: Number, default: 0 },\n    dragLabel: { type: String, default: \"Drop files to add them\" },\n  };\n  static actions = [\"onChange\", \"onDragLeave\", \"onDragOver\", \"onDrop\", \"openDialog\"] as const;\n  static events = [\"change\", \"reject\"] as const;\n\n  declare readonly inputTarget: HTMLInputElement;\n  declare readonly listTarget: HTMLElement;\n  declare readonly triggerTarget: HTMLElement;\n  declare readonly itemTemplateTarget: HTMLTemplateElement;\n  declare readonly statusTarget: HTMLElement;\n  declare readonly hasListTarget: boolean;\n  declare readonly hasTriggerTarget: boolean;\n  declare readonly hasItemTemplateTarget: boolean;\n  declare readonly hasStatusTarget: boolean;\n  declare readonly hasZoneTarget: boolean;\n  declare readonly zoneTarget: HTMLElement;\n\n  declare maxSizeValue: number;\n  declare maxFilesValue: number;\n  declare dragLabelValue: string;\n\n  /** Selected files paired with their rendered item and any preview objectURL. */\n  readonly #entries: Array<{ file: File; item: HTMLElement; url?: string }> = [];\n\n  /** Wires file removal as a delegated listener on the list container. */\n  override connect(): void {\n    if (this.hasListTarget) this.listTarget.addEventListener(\"click\", this.#onItemClick);\n  }\n\n  /** Revokes any outstanding preview URLs so none leaks across navigations. */\n  override disconnect(): void {\n    if (this.hasListTarget) this.listTarget.removeEventListener(\"click\", this.#onItemClick);\n    for (const entry of this.#entries) {\n      if (entry.url) URL.revokeObjectURL(entry.url);\n    }\n    this.#entries.length = 0;\n  }\n\n  /** Opens the native file dialog. Bound via `data-action` (trigger click). */\n  openDialog(): void {\n    this.inputTarget.click();\n  }\n\n  /** Adds the files chosen through the native dialog. */\n  onChange(): void {\n    if (this.inputTarget.files) this.#addFiles(this.inputTarget.files);\n    // Clear so re-selecting the same file still fires `change`.\n    this.inputTarget.value = \"\";\n  }\n\n  /** Marks the zone as a drop target and announces the affordance in words. */\n  onDragOver(event: DragEvent): void {\n    event.preventDefault();\n    if (this.hasZoneTarget) this.zoneTarget.setAttribute(\"data-dragover\", \"\");\n    this.#setStatus(this.dragLabelValue);\n  }\n\n  /** Clears the drag-over flag when the pointer leaves the zone. */\n  onDragLeave(): void {\n    if (this.hasZoneTarget) this.zoneTarget.removeAttribute(\"data-dragover\");\n  }\n\n  /** Accepts dropped files, clearing the drag-over state. */\n  onDrop(event: DragEvent): void {\n    event.preventDefault();\n    if (this.hasZoneTarget) this.zoneTarget.removeAttribute(\"data-dragover\");\n    if (event.dataTransfer?.files) this.#addFiles(event.dataTransfer.files);\n  }\n\n  /**\n   * Removes the file whose remove button was clicked. Delegated on the list\n   * container rather than bound per item via `data-action`, so it works the instant\n   * an item is appended without waiting on Stimulus to wire a freshly created element.\n   */\n  readonly #onItemClick = (event: MouseEvent): void => {\n    const button = (event.target as HTMLElement).closest(\"button\");\n    if (!button || !this.hasListTarget || !this.listTarget.contains(button)) return;\n    const index = this.#entries.findIndex((entry) => entry.item.contains(button));\n    if (index !== -1) this.#removeAt(index);\n  };\n\n  /** Validates each incoming file and renders the accepted ones. */\n  #addFiles(files: FileList): void {\n    let changed = false;\n    if (this.hasZoneTarget) this.zoneTarget.removeAttribute(\"data-stimeo--file-dropzone-invalid\");\n    for (const file of Array.from(files)) {\n      const reason = this.#validate(file);\n      if (reason) {\n        if (this.hasZoneTarget) {\n          this.zoneTarget.setAttribute(\"data-stimeo--file-dropzone-invalid\", \"\");\n        }\n        this.#setStatus(file.name);\n        this.dispatch(\"reject\", { detail: { file, reason } });\n        continue;\n      }\n      this.#appendFile(file);\n      this.#setStatus(file.name);\n      changed = true;\n    }\n    if (changed) this.dispatch(\"change\", { detail: { files: this.#files } });\n  }\n\n  /** Returns the rejection reason for `file`, or `null` when it is acceptable. */\n  #validate(file: File): \"type\" | \"size\" | \"count\" | null {\n    const limit = this.#effectiveMaxFiles;\n    if (limit > 0 && this.#entries.length >= limit) return \"count\";\n    if (!this.#matchesAccept(file)) return \"type\";\n    if (this.maxSizeValue > 0 && file.size > this.maxSizeValue) return \"size\";\n    return null;\n  }\n\n  /** Builds one preview item (name, optional thumbnail, remove button). */\n  #appendFile(file: File): void {\n    if (!this.hasItemTemplateTarget || !this.hasListTarget) return;\n    const fragment = this.itemTemplateTarget.content.cloneNode(true) as DocumentFragment;\n    const item = fragment.querySelector<HTMLElement>('[data-stimeo--file-dropzone-target=\"item\"]');\n    const name = fragment.querySelector<HTMLElement>('[data-file-dropzone-slot=\"name\"]');\n    const thumb = fragment.querySelector<HTMLImageElement>('[data-file-dropzone-slot=\"thumb\"]');\n    const button = fragment.querySelector<HTMLButtonElement>(\"button\");\n    if (!item) return;\n    if (name) name.textContent = file.name;\n    if (button) button.setAttribute(\"aria-label\", `Remove ${file.name}`);\n\n    let url: string | undefined;\n    if (thumb && file.type.startsWith(\"image/\")) {\n      url = URL.createObjectURL(file);\n      thumb.src = url;\n      thumb.alt = file.name;\n      thumb.hidden = false;\n    } else if (thumb) {\n      thumb.hidden = true;\n    }\n\n    this.listTarget.appendChild(fragment);\n    this.#entries.push({ file, item, url });\n  }\n\n  /** Removes entry `index`, revokes its preview, and re-homes focus. */\n  #removeAt(index: number): void {\n    const entry = this.#entries[index];\n    if (!entry) return;\n    if (entry.url) URL.revokeObjectURL(entry.url);\n    entry.item.remove();\n    this.#entries.splice(index, 1);\n    this.#setStatus(entry.file.name);\n    this.dispatch(\"change\", { detail: { files: this.#files } });\n\n    const buttons = this.#removeButtons;\n    if (buttons.length === 0) {\n      if (this.hasTriggerTarget) this.triggerTarget.focus();\n    } else {\n      (buttons[index] ?? buttons[buttons.length - 1])?.focus();\n    }\n  }\n\n  /** Whether `file` satisfies the input's `accept` list (empty accepts all). */\n  #matchesAccept(file: File): boolean {\n    const accept = this.inputTarget.accept.trim();\n    if (accept === \"\") return true;\n    const name = file.name.toLowerCase();\n    const type = file.type.toLowerCase();\n    return accept.split(\",\").some((raw) => {\n      const token = raw.trim().toLowerCase();\n      if (token === \"\") return false;\n      if (token.startsWith(\".\")) return name.endsWith(token);\n      if (token.endsWith(\"/*\")) return type.startsWith(token.slice(0, -1));\n      return type === token;\n    });\n  }\n\n  /** Updates the live region so assistive tech announces the change. */\n  #setStatus(text: string): void {\n    if (this.hasStatusTarget) this.statusTarget.textContent = text;\n  }\n\n  /** Effective file cap: `maxFiles`, or 1 when the input is single-select. */\n  get #effectiveMaxFiles(): number {\n    if (this.maxFilesValue > 0) return this.maxFilesValue;\n    return this.inputTarget.multiple ? 0 : 1;\n  }\n\n  /** The remove buttons currently in the list, in order. */\n  get #removeButtons(): HTMLButtonElement[] {\n    return Array.from(this.listTarget.querySelectorAll<HTMLButtonElement>(\"button\"));\n  }\n\n  /** The accepted files in selection order. */\n  get #files(): File[] {\n    return this.#entries.map((entry) => entry.file);\n  }\n}\n"]}
+{"version":3,"sources":["../../src/controllers/file_dropzone_controller.ts"],"names":[],"mappings":"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","file":"file_dropzone_controller.js","sourcesContent":["import { Controller } from \"@hotwired/stimulus\";\n\n/**\n * Headless, accessible file drag-and-drop / upload field.\n *\n * Markup contract (identifier: `stimeo--file-dropzone`):\n *   <div data-controller=\"stimeo--file-dropzone\"\n *        data-stimeo--file-dropzone-max-size-value=\"5242880\">\n *     <div data-stimeo--file-dropzone-target=\"zone\"\n *          data-action=\"dragover->stimeo--file-dropzone#onDragOver\n *                       dragleave->stimeo--file-dropzone#onDragLeave\n *                       drop->stimeo--file-dropzone#onDrop\">\n *       <button type=\"button\" data-stimeo--file-dropzone-target=\"trigger\"\n *               data-action=\"click->stimeo--file-dropzone#openDialog\">Choose…</button>\n *       <input type=\"file\" accept=\"image/*\" multiple class=\"visually-hidden\"\n *              data-stimeo--file-dropzone-target=\"input\"\n *              data-action=\"change->stimeo--file-dropzone#onChange\" />\n *     </div>\n *     <ul data-stimeo--file-dropzone-target=\"list\" aria-label=\"Selected files\"></ul>\n *     <span role=\"status\" aria-live=\"polite\" class=\"visually-hidden\"\n *           data-stimeo--file-dropzone-target=\"status\"></span>\n *     <template data-stimeo--file-dropzone-target=\"itemTemplate\">…</template>\n *   </div>\n *\n * There is no single APG pattern; the native `<input type=\"file\">` stays the\n * primary, keyboard-operable path and the drop zone is an enhancement, mapping to\n * WCAG 2.1.1, 2.4.7, 4.1.2, 4.1.3, and 1.4.1 (drag state is conveyed in words,\n * not color alone).\n *\n * Behavior provided:\n * - Click / keyboard via the `trigger` opens the native file dialog; drag-and-drop\n *   over the `zone` adds files (with a `data-dragover` flag and a spoken hint).\n * - Each file is validated against `accept`, `maxSize`, and the file count\n *   (`maxFiles`, or 1 when the input is not `multiple`); rejects fire\n *   `stimeo--file-dropzone:reject` and set `data-…-invalid`.\n * - Accepted files render from `itemTemplate` with a `Remove {name}` button and an\n *   image thumbnail (`objectURL`); every change dispatches\n *   `stimeo--file-dropzone:change` with the current `File[]`.\n * - Removing a file revokes its `objectURL` and moves focus to the next (else\n *   previous) remove button, falling back to the trigger; `disconnect()` revokes\n *   every outstanding `objectURL`. Replacing the `list` target rebinds delegated\n *   removal and moves the client-only previews into the replacement.\n */\nexport class FileDropzoneController extends Controller<HTMLElement> {\n  static override targets = [\"zone\", \"trigger\", \"input\", \"list\", \"item\", \"itemTemplate\", \"status\"];\n  static override values = {\n    maxSize: { type: Number, default: 0 },\n    maxFiles: { type: Number, default: 0 },\n    dragLabel: { type: String, default: \"Drop files to add them\" },\n  };\n  static actions = [\"onChange\", \"onDragLeave\", \"onDragOver\", \"onDrop\", \"openDialog\"] as const;\n  static events = [\"change\", \"reject\"] as const;\n\n  declare readonly inputTarget: HTMLInputElement;\n  declare readonly listTarget: HTMLElement;\n  declare readonly listTargets: HTMLElement[];\n  declare readonly triggerTarget: HTMLElement;\n  declare readonly itemTemplateTarget: HTMLTemplateElement;\n  declare readonly statusTarget: HTMLElement;\n  declare readonly hasListTarget: boolean;\n  declare readonly hasTriggerTarget: boolean;\n  declare readonly hasItemTemplateTarget: boolean;\n  declare readonly hasStatusTarget: boolean;\n  declare readonly hasZoneTarget: boolean;\n  declare readonly zoneTarget: HTMLElement;\n\n  declare maxSizeValue: number;\n  declare maxFilesValue: number;\n  declare dragLabelValue: string;\n\n  /** Selected files paired with their rendered item and any preview objectURL. */\n  readonly #entries: Array<{ file: File; item: HTMLElement; url?: string }> = [];\n  /** Prevents initial and teardown target callbacks from binding outside controller lifetime. */\n  #connected = false;\n\n  /** Wires file removal as a delegated listener on the list container. */\n  override connect(): void {\n    this.#connected = true;\n    if (this.hasListTarget) this.#bindList(this.listTarget);\n  }\n\n  /** Revokes any outstanding preview URLs so none leaks across navigations. */\n  override disconnect(): void {\n    this.#connected = false;\n    for (const list of this.listTargets) list.removeEventListener(\"click\", this.#onItemClick);\n    for (const entry of this.#entries) {\n      if (entry.url) URL.revokeObjectURL(entry.url);\n    }\n    this.#entries.length = 0;\n  }\n\n  /** Rebinds removal and restores client-only previews when Turbo replaces the list target. */\n  listTargetConnected(list: HTMLElement): void {\n    if (!this.#connected) return;\n    this.#bindList(list);\n  }\n\n  /** Releases only the list target that actually disconnected. */\n  listTargetDisconnected(list: HTMLElement): void {\n    list.removeEventListener(\"click\", this.#onItemClick);\n  }\n\n  /** Binds delegated removal once and moves live preview items into the current list. */\n  #bindList(list: HTMLElement): void {\n    list.addEventListener(\"click\", this.#onItemClick);\n    for (const entry of this.#entries) {\n      if (!list.contains(entry.item)) list.appendChild(entry.item);\n    }\n  }\n\n  /** Opens the native file dialog. Bound via `data-action` (trigger click). */\n  openDialog(): void {\n    this.inputTarget.click();\n  }\n\n  /** Adds the files chosen through the native dialog. */\n  onChange(): void {\n    if (this.inputTarget.files) this.#addFiles(this.inputTarget.files);\n    // Clear so re-selecting the same file still fires `change`.\n    this.inputTarget.value = \"\";\n  }\n\n  /** Marks the zone as a drop target and announces the affordance in words. */\n  onDragOver(event: DragEvent): void {\n    event.preventDefault();\n    if (this.hasZoneTarget) this.zoneTarget.setAttribute(\"data-dragover\", \"\");\n    this.#setStatus(this.dragLabelValue);\n  }\n\n  /** Clears the drag-over flag when the pointer leaves the zone. */\n  onDragLeave(): void {\n    if (this.hasZoneTarget) this.zoneTarget.removeAttribute(\"data-dragover\");\n  }\n\n  /** Accepts dropped files, clearing the drag-over state. */\n  onDrop(event: DragEvent): void {\n    event.preventDefault();\n    if (this.hasZoneTarget) this.zoneTarget.removeAttribute(\"data-dragover\");\n    if (event.dataTransfer?.files) this.#addFiles(event.dataTransfer.files);\n  }\n\n  /**\n   * Removes the file whose remove button was clicked. Delegated on the list\n   * container rather than bound per item via `data-action`, so it works the instant\n   * an item is appended without waiting on Stimulus to wire a freshly created element.\n   */\n  readonly #onItemClick = (event: MouseEvent): void => {\n    const list = event.currentTarget as HTMLElement | null;\n    const button = (event.target as HTMLElement).closest(\"button\");\n    if (\n      !this.#connected ||\n      !list ||\n      !button ||\n      !this.hasListTarget ||\n      list !== this.listTarget ||\n      !list.contains(button)\n    ) {\n      return;\n    }\n    const index = this.#entries.findIndex((entry) => entry.item.contains(button));\n    if (index !== -1) this.#removeAt(index);\n  };\n\n  /** Validates each incoming file and renders the accepted ones. */\n  #addFiles(files: FileList): void {\n    let changed = false;\n    if (this.hasZoneTarget) this.zoneTarget.removeAttribute(\"data-stimeo--file-dropzone-invalid\");\n    for (const file of Array.from(files)) {\n      const reason = this.#validate(file);\n      if (reason) {\n        if (this.hasZoneTarget) {\n          this.zoneTarget.setAttribute(\"data-stimeo--file-dropzone-invalid\", \"\");\n        }\n        this.#setStatus(file.name);\n        this.dispatch(\"reject\", { detail: { file, reason } });\n        continue;\n      }\n      this.#appendFile(file);\n      this.#setStatus(file.name);\n      changed = true;\n    }\n    if (changed) this.dispatch(\"change\", { detail: { files: this.#files } });\n  }\n\n  /** Returns the rejection reason for `file`, or `null` when it is acceptable. */\n  #validate(file: File): \"type\" | \"size\" | \"count\" | null {\n    const limit = this.#effectiveMaxFiles;\n    if (limit > 0 && this.#entries.length >= limit) return \"count\";\n    if (!this.#matchesAccept(file)) return \"type\";\n    if (this.maxSizeValue > 0 && file.size > this.maxSizeValue) return \"size\";\n    return null;\n  }\n\n  /** Builds one preview item (name, optional thumbnail, remove button). */\n  #appendFile(file: File): void {\n    if (!this.hasItemTemplateTarget || !this.hasListTarget) return;\n    const fragment = this.itemTemplateTarget.content.cloneNode(true) as DocumentFragment;\n    const item = fragment.querySelector<HTMLElement>('[data-stimeo--file-dropzone-target=\"item\"]');\n    const name = fragment.querySelector<HTMLElement>('[data-file-dropzone-slot=\"name\"]');\n    const thumb = fragment.querySelector<HTMLImageElement>('[data-file-dropzone-slot=\"thumb\"]');\n    const button = fragment.querySelector<HTMLButtonElement>(\"button\");\n    if (!item) return;\n    if (name) name.textContent = file.name;\n    if (button) button.setAttribute(\"aria-label\", `Remove ${file.name}`);\n\n    let url: string | undefined;\n    if (thumb && file.type.startsWith(\"image/\")) {\n      url = URL.createObjectURL(file);\n      thumb.src = url;\n      thumb.alt = file.name;\n      thumb.hidden = false;\n    } else if (thumb) {\n      thumb.hidden = true;\n    }\n\n    this.listTarget.appendChild(fragment);\n    this.#entries.push({ file, item, url });\n  }\n\n  /** Removes entry `index`, revokes its preview, and re-homes focus. */\n  #removeAt(index: number): void {\n    const entry = this.#entries[index];\n    if (!entry) return;\n    if (entry.url) URL.revokeObjectURL(entry.url);\n    entry.item.remove();\n    this.#entries.splice(index, 1);\n    this.#setStatus(entry.file.name);\n    this.dispatch(\"change\", { detail: { files: this.#files } });\n\n    const buttons = this.#removeButtons;\n    if (buttons.length === 0) {\n      if (this.hasTriggerTarget) this.triggerTarget.focus();\n    } else {\n      (buttons[index] ?? buttons[buttons.length - 1])?.focus();\n    }\n  }\n\n  /** Whether `file` satisfies the input's `accept` list (empty accepts all). */\n  #matchesAccept(file: File): boolean {\n    const accept = this.inputTarget.accept.trim();\n    if (accept === \"\") return true;\n    const name = file.name.toLowerCase();\n    const type = file.type.toLowerCase();\n    return accept.split(\",\").some((raw) => {\n      const token = raw.trim().toLowerCase();\n      if (token === \"\") return false;\n      if (token.startsWith(\".\")) return name.endsWith(token);\n      if (token.endsWith(\"/*\")) return type.startsWith(token.slice(0, -1));\n      return type === token;\n    });\n  }\n\n  /** Updates the live region so assistive tech announces the change. */\n  #setStatus(text: string): void {\n    if (this.hasStatusTarget) this.statusTarget.textContent = text;\n  }\n\n  /** Effective file cap: `maxFiles`, or 1 when the input is single-select. */\n  get #effectiveMaxFiles(): number {\n    if (this.maxFilesValue > 0) return this.maxFilesValue;\n    return this.inputTarget.multiple ? 0 : 1;\n  }\n\n  /** The remove buttons currently in the list, in order. */\n  get #removeButtons(): HTMLButtonElement[] {\n    return Array.from(this.listTarget.querySelectorAll<HTMLButtonElement>(\"button\"));\n  }\n\n  /** The accepted files in selection order. */\n  get #files(): File[] {\n    return this.#entries.map((entry) => entry.file);\n  }\n}\n"]}

package/dist/controllers/flash_controller.d.ts

@@ -15,9 +15,9 @@ import { Controller } from '@hotwired/stimulus';
  *
  * Each message is mapped by `data-flash-type` to `role="status"` (notice) or
  * `role="alert"` (alert/error), flagged `data-flash-state="visible"`, auto-dismissed
- * after `duration` (paused while hovered/focused when `pauseOnHover`), and capped at
- * `max` simultaneous messages. A close button wired to the `dismiss` action removes
- * one manually.
+ * after `duration` (paused while hovered *or* focused when `pauseOnHover`, and
+ * resumed only once both are released), and capped at `max` simultaneous messages.
+ * A close button wired to the `dismiss` action removes one manually.
  *
  * @remarks
  * Reading is **delegated to the shared Announcer** — but only for the *initial*,
@@ -26,8 +26,14 @@ import { Controller } from '@hotwired/stimulus';
  * event. Messages inserted *later* (Turbo Stream) are announced by their own freshly
  * inserted `role`, exactly like Toast, so they are not bridged again (no double
  * announcement). Behavior only — no styling; `data-flash-state="leaving"` lets CSS
- * animate removal. Focus is never moved (WCAG 2.2 4.1.3). The observer, timers, and
- * per-message listeners are torn down on `disconnect()` (Turbo navigation included).
+ * animate removal. Focus is never moved (WCAG 2.2 4.1.3): pausing never removes a
+ * message, so the control under the pointer or holding focus stays put. The
+ * observation follows a `region` element replaced at runtime; the managed set is the
+ * current region's subtree, and a message that leaves it gives up its stacking slot,
+ * its pending auto-dismiss, and any removal already scheduled. The observer, timers,
+ * and per-message listeners are torn down on `disconnect()` (Turbo navigation
+ * included), and the managed flashes leave the page before Turbo caches it so a
+ * restored snapshot does not replay a notification the visitor already received.
  */
 declare class FlashController extends Controller<HTMLElement> {
     #private;
@@ -56,6 +62,20 @@ declare class FlashController extends Controller<HTMLElement> {
     maxValue: number;
     connect(): void;
     disconnect(): void;
+    /** Follows a `region` element swapped in — or arriving — at runtime (Turbo Stream). */
+    regionTargetConnected(): void;
+    /** Releases the observation when the `region` element leaves the target set. */
+    regionTargetDisconnected(): void;
+    /**
+     * Releases a message that left the target set (a Turbo Stream `remove`, the consumer
+     * detaching the node, or a morph that rewrote the target attribute in place): it
+     * stops occupying a `max` slot, and both its pending auto-dismiss and an already
+     * scheduled removal are cancelled. A move *within* the region keeps all of them —
+     * which is why the element must still be a message to be treated as one: ownership
+     * alone reads an in-place attribute rewrite as a move, and a node outside the target
+     * set belongs to the consumer, so nothing here may dismiss it.
+     */
+    messageTargetDisconnected(message: HTMLElement): void;
     /** Dismisses the flash whose close control fired the event. */
     dismiss(event: Event): void;
 }