stimeo-ui 0.4.0 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d5c989b2c56e2578e6c05c5e01c29e31cdba141e9a49110701ba4a40dc91198e
-  data.tar.gz: 6b123f7cad0a54ef52b13c525bb53cf2eb43f0cc09748ab0d8cbf7d738e1fca9
+  metadata.gz: a78d7192424e66f85cd4fbc901f75f260178f890fbcf040724fd5e518314dda7
+  data.tar.gz: d14ba0559fd6659b4b1edc860c653815bb949439768f26e3540cb758dabee2f7
 SHA512:
-  metadata.gz: b95db793fc2a866c4c099f98ca1a689a36b5f15419d6b89b1c2f6423f694e03421c68d1bf930c0920c6d8feeb0c554a430e03523367fdabfa24578769a922c9b
-  data.tar.gz: 06ee52f5e9a6a56c9fea57f9e2f291e58336228e17a5bc5685238be3d98e00718a81837eb4196ddd08a230006492cd5e23d950537285f1e088c6bb2767b4fc12
+  metadata.gz: e02be89ae227eec783f0eb7f21c492a00ff75174c5285de3d8cf8418b3a826b6d9fb42d779b63a47845b77679d4b61adcade253746cf39ea83d7c924651f8a8e
+  data.tar.gz: 7661666a77da707d43ad07bf9e7bb4a8b0cb63caea75f2d0d8abf9f43fd6b43421bfe8d24203f814e70042a506177995df72e14487c4c11aa49016129bd44f02

data/CHANGELOG.md

@@ -7,6 +7,73 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 While the version is `0.x`, the public API (the `stimeo--*` data attributes) may
 change between releases.
 
+## [0.5.0] - 2026-08-13
+
+### Changed
+
+- **Breaking** — every CSS custom property the library writes now carries the
+  `--stimeo--` namespace (two hyphens). Rename them in your stylesheets: a name
+  you miss raises no error, it just falls back to `var()`'s default and the bar
+  or thumb stops moving.
+  - `--stimeo-range-start` / `--stimeo-range-end` →
+    `--stimeo--range-slider-start` / `--stimeo--range-slider-end`
+  - `--stimeo-<name>` → `--stimeo--<name>` for `aspect-ratio`,
+    `collapsible-content-height`, `color`, `context-menu-x`, `context-menu-y`,
+    `masonry-columns`, `meter-ratio`, `password-strength`, `progress-ratio`,
+    `scroll-progress`, `step-indicator-ratio`, `textarea-rows`,
+    `upload-progress`
+- **Breaking** — spinner's `indicator`, the network-status banners, and
+  countdown's `status` slot are no longer live regions. Drop `role="status"` /
+  `role="alert"` / `aria-live` from them and set `announceText` (and its
+  siblings) with a `stimeo--announcer` on the page; keeping the role reads the
+  change twice.
+- time-picker: committing a field change dispatches a native `change` from the
+  `field` target, and `stimeo--time-picker:change` reports the composed value
+  even when no `field` target is present.
+- tree-view: more native elements count as nested-interactive (`label`,
+  `summary`, `details`, `area[href]`, media with `controls`, `iframe`, `object`,
+  `embed`), so a click or key inside one is left alone instead of moving the
+  tree selection.
+
+### Added
+
+- Inspector: the manifest advances from schema v8 to **v11** — tools that read it
+  raw must accept the new `valueConstraints`, `hosts`, and `valueRelations`
+  fields. Two diagnostics are new, so **re-run `stimeo check` before deploying;
+  it can report errors on views that passed under 0.4.0**:
+  - `invalid-value` — slider, range-slider, and number-input need a finite,
+    positive `step`; range-slider needs finite `min`, `max`, `start`, and `end`
+    with `min` at or below `max`.
+  - `invalid-host` — switch, time-picker, and tree-view report an unsupported
+    host element before it reaches the browser.
+
+### Fixed
+
+- range-slider: two thumbs resting on the same value can be pulled apart with
+  the pointer again, and invalid or reversed bounds fall back to a finite
+  ordered range.
+- slider, range-slider, number-input: an endpoint that does not sit on the step
+  grid is reachable, and an invalid `step` falls back to `1`.
+- slider, range-slider: a Turbo morph that swaps a value repaints instead of
+  freezing, a replaced thumb or track picks up the current state, and a drag
+  stays with the pointer that started it.
+- switch: holding Space no longer scrolls a non-`<button>` host, and an ancestor
+  `fieldset[disabled]` or `aria-disabled` blocks activation.
+- flash: hover and focus pause the auto-dismiss independently, a flash paused
+  after its deadline dismisses instead of staying forever, a second dismiss on a
+  leaving flash is ignored, and a replaced `region` target is picked up.
+- frame-loading: `aria-busy`, the skeleton, and `inert` are rolled back when the
+  controller is detached, instead of burning in with nothing left to finish the
+  load.
+- empty-state: a replaced `list` or `empty` element and a runtime `itemSelector`
+  change are followed, so the placeholder no longer sticks beside a filled list.
+- highlight: a highlight that outlives a Turbo navigation is cleaned up on the
+  way back instead of staying marked.
+- idle: `data-idle` is cleared when a new measurement cycle connects, and
+  `disconnect()` removes the listeners it actually registered even when `events`
+  changed while connected.
+- skeleton: a skeleton moved within the page keeps its ready intent.
+
 ## [0.4.0] - 2026-08-11
 
 The feedback and status components announce through the shared
@@ -391,6 +458,7 @@ Initial public alpha: 101 behavior-only, accessible Stimulus controllers driven
 by `data-*` attributes, shipping no CSS. Published to npm (with provenance) and
 RubyGems.
 
+[0.5.0]: https://github.com/taiyaky/stimeo-ui/releases/tag/v0.5.0
 [0.4.0]: https://github.com/taiyaky/stimeo-ui/releases/tag/v0.4.0
 [0.3.0]: https://github.com/taiyaky/stimeo-ui/releases/tag/v0.3.0
 [0.2.1]: https://github.com/taiyaky/stimeo-ui/releases/tag/v0.2.1

data/dist/controllers/aspect_ratio_controller.js

@@ -8,7 +8,7 @@ var AspectRatioController = class extends Controller {
   };
   /** Applies the ratio on connect and whenever the value changes. */
   ratioValueChanged() {
-    this.element.style.setProperty("--stimeo-aspect-ratio", this.#normalizeRatio(this.ratioValue));
+    this.element.style.setProperty("--stimeo--aspect-ratio", this.#normalizeRatio(this.ratioValue));
   }
   /**
    * Normalizes a ratio string to a valid CSS `<ratio>`:

data/dist/controllers/breadcrumb_controller.js

@@ -287,7 +287,11 @@ var BreadcrumbController = class extends Controller {
     this.ellipsisTarget.hidden = true;
     return this.listTarget.scrollWidth > this.listTarget.clientWidth + OVERFLOW_EPSILON;
   }
-  /** Applies the collapsed/expanded state to the items, ellipsis, and trigger. */
+  /**
+   * Applies the collapsed/expanded state to the items, ellipsis, and trigger.
+   *
+   * @stimeoRenderRoot
+   */
   #render() {
     const collapsed = this.#overflowing && !this.#expanded;
     const showEllipsis = this.#overflowing && this.collapsibleTargets.length > 0;

data/dist/controllers/carousel_controller.js

@@ -271,7 +271,11 @@ var CarouselController = class extends Controller {
     this.#syncTimer();
     if (changed) this.dispatch("change", { detail: { index, total: this.slideTargets.length } });
   }
-  /** Reflects `this.#index` onto slides and pickers (state hooks + roving). */
+  /**
+   * Reflects `this.#index` onto slides and pickers (state hooks + roving).
+   *
+   * @stimeoRenderRoot
+   */
   #render({ focus }) {
     this.slideTargets.forEach((slide, i) => {
       const active = i === this.#index;

data/dist/controllers/clipboard_controller.js

@@ -2,6 +2,13 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/clipboard_controller.ts
 
+// src/utils/default_attribute.ts
+function setDefaultAttribute(element, name, value) {
+  if (element.hasAttribute(name)) return false;
+  element.setAttribute(name, value);
+  return true;
+}
+
 // src/utils/safe_timeout.ts
 var TimerRegistry = class {
   /** Live timer ids that have not yet been cleared (or, for timeouts, fired). */
@@ -75,9 +82,7 @@ var ClipboardController = class extends Controller {
    */
   #resetTimerId = null;
   connect() {
-    if (!this.element.hasAttribute("data-state")) {
-      this.element.setAttribute("data-state", "idle");
-    }
+    setDefaultAttribute(this.element, "data-state", "idle");
   }
   disconnect() {
     this.#timers.clearAll();

data/dist/controllers/collapsible_controller.js

@@ -297,7 +297,10 @@ var CollapsibleController = class extends Controller {
   #applyContent(content, open, waitForCloseTransition) {
     if (open) {
       content.hidden = false;
-      content.style.setProperty("--stimeo-collapsible-content-height", `${content.scrollHeight}px`);
+      content.style.setProperty(
+        "--stimeo--collapsible-content-height",
+        `${content.scrollHeight}px`
+      );
       content.setAttribute("data-state", "open");
       return;
     }

data/dist/controllers/color_picker_controller.js

@@ -59,7 +59,7 @@ var MicrotaskCoalescer = class {
 };
 
 // src/controllers/color_picker_controller.ts
-var COLOR_PROPERTY = "--stimeo-color";
+var COLOR_PROPERTY = "--stimeo--color";
 var CHANNEL_RANGE = {
   hue: [0, 360],
   saturation: [0, 100],
@@ -188,7 +188,11 @@ var ColorPickerController = class extends Controller {
     this.#color[channel] = Math.round(Math.min(max, Math.max(min, raw)));
     this.#render();
   }
-  /** Reflects the model onto sliders, the hex input, preview, and form field. */
+  /**
+   * Reflects the model onto sliders, the hex input, preview, and form field.
+   *
+   * @stimeoRenderRoot
+   */
   #render() {
     for (const slider of this.sliderTargets) {
       const channel = this.#channelOf(slider);

data/dist/controllers/context_menu_controller.js

@@ -237,8 +237,8 @@ var ContextMenuController = class extends Controller {
       onDismiss: () => this.#closeAndRestore(),
       claims: claimsWhileFocusWithin(this.element)
     });
-    this.menuTarget.style.setProperty("--stimeo-context-menu-x", `${x}px`);
-    this.menuTarget.style.setProperty("--stimeo-context-menu-y", `${y}px`);
+    this.menuTarget.style.setProperty("--stimeo--context-menu-x", `${x}px`);
+    this.menuTarget.style.setProperty("--stimeo--context-menu-y", `${y}px`);
     this.menuTarget.hidden = false;
     if (this.hasRegionTarget) this.regionTarget.setAttribute("data-state", "open");
     this.#navigableItems[0]?.focus();

data/dist/controllers/countdown_controller.js

@@ -268,7 +268,11 @@ var CountdownController = class extends Controller {
     const raw = this.#isDown ? this.#reference - now : now - this.#reference;
     return Math.max(0, raw);
   }
-  /** Writes the amount into the day/hour/minute/second slots. */
+  /**
+   * Writes the amount into the day/hour/minute/second slots.
+   *
+   * @stimeoRenderRoot
+   */
   #render(amount) {
     const totalSeconds = Math.floor(amount / SECOND_MS);
     this.#renderedAmount = totalSeconds * SECOND_MS;

data/dist/controllers/date_range_picker_controller.js

@@ -355,7 +355,11 @@ var DateRangePickerController = class extends Controller {
     this.#focusedDate = target;
     this.#render();
   }
-  /** Builds the six-week grid and binds range/roving/disabled state per cell. */
+  /**
+   * Builds the six-week grid and binds range/roving/disabled state per cell.
+   *
+   * @stimeoRenderRoot
+   */
   #render() {
     const info = parseISOMonthString(this.#viewMonth);
     if (!info) return;

data/dist/controllers/direct_upload_controller.js

@@ -110,7 +110,7 @@ var DirectUploadController = class extends Controller {
     const clamped = Math.max(0, Math.min(100, percent));
     row.setAttribute("aria-valuenow", String(clamped));
     row.setAttribute("aria-valuetext", `${clamped}%`);
-    row.style.setProperty("--stimeo-upload-progress", `${clamped}%`);
+    row.style.setProperty("--stimeo--upload-progress", `${clamped}%`);
     this.#setField(row, "percent", `${clamped}%`);
     this.#syncAggregate();
     this.dispatch("progress", { detail: { id, percent: clamped } });
@@ -148,7 +148,7 @@ var DirectUploadController = class extends Controller {
     }
     clone.setAttribute("aria-valuenow", "0");
     clone.setAttribute("data-upload-state", "uploading");
-    clone.style.setProperty("--stimeo-upload-progress", "0%");
+    clone.style.setProperty("--stimeo--upload-progress", "0%");
     this.listTarget.appendChild(clone);
     this.#rows.set(key, clone);
     return clone;
@@ -172,7 +172,7 @@ var DirectUploadController = class extends Controller {
     }
     const overall = Math.round(total / this.#rows.size);
     this.element.setAttribute("data-upload-progress", String(overall));
-    this.element.style.setProperty("--stimeo-upload-progress", `${overall}%`);
+    this.element.style.setProperty("--stimeo--upload-progress", `${overall}%`);
   }
   /** Writes a consumer label (with `%{name}` substituted) to the status region. */
   #announce(label, row) {

data/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() {

data/dist/controllers/flash_controller.js

@@ -2,6 +2,35 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/flash_controller.ts
 
+// src/utils/before_cache_reset.ts
+var BeforeCacheReset = class _BeforeCacheReset {
+  /** Every subscribed instance, iterated by the one shared document listener. */
+  static #subscribers = /* @__PURE__ */ new Set();
+  /** The shared listener; installed while at least one instance is subscribed. */
+  static #onBeforeCache = () => {
+    for (const subscriber of _BeforeCacheReset.#subscribers) subscriber.#rewind();
+  };
+  #rewind;
+  /** @param rewind - the pass that returns this controller's state to its initial form. */
+  constructor(rewind) {
+    this.#rewind = rewind;
+  }
+  /** Subscribes to `turbo:before-cache`; call from `connect()`. Idempotent. */
+  activate() {
+    const first = _BeforeCacheReset.#subscribers.size === 0;
+    _BeforeCacheReset.#subscribers.add(this);
+    if (first) {
+      document.addEventListener("turbo:before-cache", _BeforeCacheReset.#onBeforeCache);
+    }
+  }
+  /** Unsubscribes; call from `disconnect()`. Safe when never subscribed. */
+  deactivate() {
+    _BeforeCacheReset.#subscribers.delete(this);
+    if (_BeforeCacheReset.#subscribers.size > 0) return;
+    document.removeEventListener("turbo:before-cache", _BeforeCacheReset.#onBeforeCache);
+  }
+};
+
 // src/utils/safe_timeout.ts
 var TimerRegistry = class {
   /** Live timer ids that have not yet been cleared (or, for timeouts, fired). */
@@ -103,29 +132,119 @@ var FlashController = class extends Controller {
   static events = ["show", "dismiss"];
   #timers = new SafeTimeout();
   #observer = null;
+  /** Whether the controller is between `connect()` and `disconnect()`. */
+  #connected = false;
   /** Auto-dismiss timer state keyed by message element. */
   #state = /* @__PURE__ */ new Map();
   /** Messages already processed, in insertion order, to enforce `max` and avoid double work. */
   #order = [];
-  #onEnter = (event) => this.#pause(event.currentTarget);
-  #onLeave = (event) => this.#resume(event.currentTarget);
+  /**
+   * Messages between `leaving` and their removal. {@link FlashController.#beginDismiss}
+   * releases the bookkeeping above *before* the transition wait, so for that window the
+   * element is in the DOM but in neither collection — without this set a re-scan would
+   * read it as a brand-new flash and show it a second time.
+   */
+  #leaving = /* @__PURE__ */ new Set();
+  #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
+  #onEnter = (event) => this.#pause(event.currentTarget, event.type === "focusin" ? "focus" : "hover");
+  #onLeave = (event) => this.#resume(event.currentTarget, event.type === "focusout" ? "focus" : "hover");
   connect() {
-    if (!this.hasRegionTarget) return;
+    this.#connected = true;
     for (const message of this.messageTargets) {
-      this.#process(message, true);
-    }
-    if (typeof MutationObserver !== "undefined") {
-      this.#observer = new MutationObserver((mutations) => this.#onMutations(mutations));
-      this.#observer.observe(this.regionTarget, { childList: true, subtree: true });
+      if (this.#owns(message)) this.#process(message, true);
     }
+    this.#syncObservation();
+    this.#beforeCache.activate();
   }
   disconnect() {
-    this.#observer?.disconnect();
-    this.#observer = null;
+    this.#connected = false;
+    this.#beforeCache.deactivate();
+    this.#stopObserving();
     this.#timers.clearAll();
     for (const message of this.#order) this.#unbindPause(message);
     this.#state.clear();
     this.#order.length = 0;
+    this.#leaving.clear();
+  }
+  /**
+   * Takes the managed flashes out of the page just before Turbo freezes it, so a
+   * restored snapshot carries no notification the visitor has already received: the
+   * fresh `connect()` there reads a leftover flash as a brand-new one and announces it
+   * a second time. A message that never auto-dismisses (`duration: 0`) is one of these
+   * too — that value governs the timer, not what belongs in a cached page. Removal
+   * only: `dismiss` reports a dismissal, and freezing the page is not one.
+   */
+  #rewindForCache() {
+    for (const message of [...this.#order]) {
+      message.remove();
+      this.#forget(message);
+    }
+    for (const message of this.#leaving) message.remove();
+    this.#leaving.clear();
+  }
+  /** Follows a `region` element swapped in — or arriving — at runtime (Turbo Stream). */
+  regionTargetConnected() {
+    this.#resync();
+  }
+  /** Releases the observation when the `region` element leaves the target set. */
+  regionTargetDisconnected() {
+    this.#resync();
+  }
+  /**
+   * Whether this controller owns `message`. Ownership is the current `region`'s
+   * subtree: a message target anywhere else in the controller's scope is the
+   * consumer's, and so is one in a region that has gone away. The initial scan, a
+   * re-scan after a `region` swap, and a departure from the target set all resolve
+   * ownership through this one test; the observation gets it structurally, by watching
+   * that subtree and nothing else.
+   */
+  #owns(message) {
+    return this.hasRegionTarget && this.regionTarget.contains(message);
+  }
+  /**
+   * 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) {
+    if (!this.#connected) return;
+    const moved = this.#owns(message) && message.matches(MESSAGE_SELECTOR);
+    if (moved) return;
+    this.#forget(message);
+    this.#leaving.delete(message);
+  }
+  /**
+   * Re-points the observation after a `region` swap and picks up the messages the
+   * new element brought with it (dynamic inserts, so their own `role` announces
+   * them). The `#connected` guard is load-bearing: Stimulus runs target callbacks
+   * for the initial markup *before* `connect()` and again during teardown *after*
+   * `disconnect()`, and re-observing there would outlive the controller.
+   */
+  #resync() {
+    if (!this.#connected) return;
+    this.#syncObservation();
+    for (const message of this.messageTargets) {
+      if (this.#owns(message)) this.#process(message, false);
+    }
+  }
+  /**
+   * Points the mutation observation at the current `region` 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.
+   */
+  #syncObservation() {
+    this.#stopObserving();
+    if (!this.hasRegionTarget || typeof MutationObserver === "undefined") return;
+    this.#observer = new MutationObserver((mutations) => this.#onMutations(mutations));
+    this.#observer.observe(this.regionTarget, { childList: true, subtree: true });
+  }
+  #stopObserving() {
+    this.#observer?.disconnect();
+    this.#observer = null;
   }
   /**
    * Pause-on-hover/focus listeners, bound and unbound as a pair so the two sides
@@ -171,6 +290,7 @@ var FlashController = class extends Controller {
    */
   #process(message, bridge) {
     if (this.#state.has(message) || this.#order.includes(message)) return;
+    if (this.#leaving.has(message)) return;
     const type = message.getAttribute("data-flash-type") ?? "";
     const assertive = ASSERTIVE_TYPES.has(type);
     if (!message.hasAttribute("role")) {
@@ -203,33 +323,53 @@ var FlashController = class extends Controller {
     const existing = this.#state.get(message);
     if (existing?.id) this.#timers.clear(existing.id);
     const id = this.#timers.set(() => this.#beginDismiss(message, "timeout"), duration);
-    this.#state.set(message, { id, startedAt: Date.now(), remaining: duration });
+    this.#state.set(message, {
+      id,
+      startedAt: Date.now(),
+      remaining: duration,
+      paused: existing?.paused ?? /* @__PURE__ */ new Set()
+    });
   }
-  /** Pauses a message's auto-dismiss, banking the time left (hover/focus, WCAG 2.2.1). */
-  #pause(message) {
+  /**
+   * Pauses a message's auto-dismiss, banking the time left (hover/focus, WCAG 2.2.1).
+   * Hover and focus are independent reasons: the remaining time is banked on the
+   * first of them, and {@link FlashController.#resume} waits for the last one.
+   */
+  #pause(message, reason) {
     const timer = this.#state.get(message);
-    if (!timer || timer.id === 0) return;
+    if (!timer) return;
+    timer.paused.add(reason);
+    if (timer.id === 0) return;
     this.#timers.clear(timer.id);
-    const remaining = Math.max(0, timer.remaining - (Date.now() - timer.startedAt));
-    this.#state.set(message, { id: 0, startedAt: 0, remaining });
+    const remaining = Math.max(1, timer.remaining - (Date.now() - timer.startedAt));
+    this.#state.set(message, { id: 0, startedAt: 0, remaining, paused: timer.paused });
   }
   /** Resumes a paused message's auto-dismiss with the banked time. */
-  #resume(message) {
+  #resume(message, reason) {
     const timer = this.#state.get(message);
     if (!timer) return;
-    if (timer.id !== 0 || timer.remaining <= 0) return;
+    timer.paused.delete(reason);
+    if (timer.paused.size > 0) return;
+    if (timer.id !== 0) return;
     this.#startTimer(message, timer.remaining);
   }
-  /** Marks a message leaving, then removes it after its CSS transition and emits dismiss. */
-  #beginDismiss(message, reason) {
+  /** Releases every per-message resource: timer, stacking slot, pause listeners. */
+  #forget(message) {
     const timer = this.#state.get(message);
     if (timer?.id) this.#timers.clear(timer.id);
     this.#state.delete(message);
     const index = this.#order.indexOf(message);
     if (index !== -1) this.#order.splice(index, 1);
+    this.#unbindPause(message);
+  }
+  /** Marks a message leaving, then removes it after its CSS transition and emits dismiss. */
+  #beginDismiss(message, reason) {
+    if (!this.#state.has(message) && !this.#order.includes(message)) return;
+    this.#forget(message);
+    this.#leaving.add(message);
     message.setAttribute("data-flash-state", "leaving");
     const finalize = () => {
-      this.#unbindPause(message);
+      if (!this.#leaving.delete(message)) return;
       message.remove();
       this.dispatch("dismiss", { detail: { element: message, reason } });
     };