stimeo-ui 0.15.0 → 0.16.0

data/dist/controllers/overflow_menu_controller.js

@@ -225,15 +225,20 @@ var TabindexLoan = class {
 };
 
 // src/controllers/overflow_menu_controller.ts
-var BANKED = "data-stimeo--overflow-menu-banked";
-var INDEX = "data-stimeo--overflow-menu-index";
-var BOUNDARY = "data-stimeo--overflow-menu-boundary";
-var SAVED_ROLE = "data-stimeo--overflow-menu-role";
-var SAVED_TABINDEX = "data-stimeo--overflow-menu-tabindex";
-var SAVED_MENU_TARGET = "data-stimeo--overflow-menu-saved-menu";
+var BANKED = "banked";
+var INDEX = "index";
+var BOUNDARY = "boundary";
+var SAVED_ROLE = "role";
+var SAVED_TABINDEX = "tabindex";
+var SAVED_MENU_TARGET = "saved-menu";
 var MENU_TARGET = "data-stimeo--menu-target";
 var BOOKKEEPING = [BANKED, INDEX, SAVED_ROLE, SAVED_TABINDEX, SAVED_MENU_TARGET];
+var OWNED_LABEL = "owns-label";
 var OverflowMenuController = class extends Controller {
+  /** One bookkeeping attribute, in the namespace this controller is registered under. */
+  #attr(name) {
+    return `data-${this.identifier}-${name}`;
+  }
   static targets = ["items", "more"];
   static values = {
     moreLabel: { type: String, default: "More" },
@@ -252,29 +257,42 @@ var OverflowMenuController = class extends Controller {
   #lastHidden = null;
   /** The `tabindex` this instance lends the root for the focus fallback. */
   #tabindex = new TabindexLoan();
-  /** Hands Turbo a pristine snapshot of the bar, with every item back in place. */
+  /** Hands Turbo a snapshot of the bar with every item back in place. */
   #beforeCache = new BeforeCacheReset(() => this.#restoreAll());
+  /**
+   * Whether `connect()` has run for this connection. Stimulus delivers Value
+   * callbacks ahead of it, and the first pass writes the label anyway.
+   */
+  #connected = false;
   connect() {
+    this.#connected = true;
     if (!this.hasItemsTarget || !this.hasMoreTarget) return;
-    const trigger = this.#trigger();
-    if (trigger !== null && this.#isBareTrigger(trigger)) {
-      trigger.textContent = this.moreLabelValue;
-    }
     this.#beforeCache.activate();
     this.#layout.observe(this.element);
     this.#layout.observeViewport();
     this.update();
   }
   disconnect() {
+    this.#connected = false;
     this.#layout.disconnect();
     this.#timers.clearAll();
     this.#beforeCache.deactivate();
     this.#restoreAll();
     this.#lastHidden = null;
   }
+  /**
+   * Follows a More label swapped in place by a morph, on a trigger that still holds
+   * the label this controller wrote and nothing else. Render only: nothing is
+   * measured and `change` is not dispatched here; the next pass measures the bar.
+   */
+  moreLabelValueChanged() {
+    if (!this.#connected || !this.hasItemsTarget || !this.hasMoreTarget) return;
+    this.#syncLabel();
+  }
   /** Re-measures and rebalances items between the bar and the More menu. */
   update() {
     if (!this.hasItemsTarget || !this.hasMoreTarget) return;
+    this.#syncLabel();
     this.#syncItems();
     this.moreTarget.hidden = false;
     if (this.#items.some((item) => item.parentElement !== this.itemsTarget && !this.#widths.has(item))) {
@@ -328,8 +346,8 @@ var OverflowMenuController = class extends Controller {
     else if (active !== null && this.#lostFocus(active)) active.focus();
     const count = hidden.size;
     for (const item of this.#items) {
-      if (count > 0) item.setAttribute(INDEX, String(this.#indexOf(item)));
-      else item.removeAttribute(INDEX);
+      if (count > 0) item.setAttribute(this.#attr(INDEX), String(this.#indexOf(item)));
+      else item.removeAttribute(this.#attr(INDEX));
     }
     if (count > 0 && count === this.#items.length) this.#ensureBoundary();
     else this.#removeBoundary();
@@ -344,7 +362,7 @@ var OverflowMenuController = class extends Controller {
     this.element.setAttribute("data-overflow-count", String(count));
     if (this.#lastHidden !== count) {
       this.#lastHidden = count;
-      this.dispatch("change", { detail: { visible: this.#items.length - count, hidden: count } });
+      this.dispatch("change", { detail: { overflowCount: count, total: this.#items.length } });
     }
   }
   /** The flex `column-gap` on `el` in px (0 when none / unsupported). */
@@ -374,7 +392,7 @@ var OverflowMenuController = class extends Controller {
     const bar = [];
     let boundaryAt;
     for (const el of this.itemsTarget.children) {
-      if (el instanceof HTMLTemplateElement && el.hasAttribute(BOUNDARY)) {
+      if (el instanceof HTMLTemplateElement && el.hasAttribute(this.#attr(BOUNDARY))) {
         boundaryAt ??= bar.length;
         continue;
       }
@@ -382,14 +400,14 @@ var OverflowMenuController = class extends Controller {
     }
     const banked = [];
     for (const el of this.#menuList().children) {
-      if (el instanceof HTMLElement && el.hasAttribute(BANKED)) banked.push(el);
+      if (el instanceof HTMLElement && el.hasAttribute(this.#attr(BANKED))) banked.push(el);
     }
     banked.sort((a, b) => this.#bankedIndex(a) - this.#bankedIndex(b));
     const items = this.#merge(bar, banked, boundaryAt);
     for (const el of previous) {
       if (!items.includes(el)) {
         this.#unbank(el);
-        el.removeAttribute(INDEX);
+        el.removeAttribute(this.#attr(INDEX));
       }
     }
     this.#items = items;
@@ -462,7 +480,7 @@ var OverflowMenuController = class extends Controller {
   }
   /** A finite canonical index stored on either side of the overflow split. */
   #savedIndex(item) {
-    const raw = item.getAttribute(INDEX);
+    const raw = item.getAttribute(this.#attr(INDEX));
     if (raw === null) return void 0;
     const value = Number(raw);
     return Number.isFinite(value) ? value : void 0;
@@ -470,14 +488,14 @@ var OverflowMenuController = class extends Controller {
   /** The inert split point written only when every managed item lives in More. */
   #boundary() {
     for (const el of this.itemsTarget.children) {
-      if (el instanceof HTMLTemplateElement && el.hasAttribute(BOUNDARY)) return el;
+      if (el instanceof HTMLTemplateElement && el.hasAttribute(this.#attr(BOUNDARY))) return el;
     }
     return null;
   }
   #ensureBoundary() {
     if (this.#boundary() !== null) return;
     const boundary = document.createElement("template");
-    boundary.setAttribute(BOUNDARY, "");
+    boundary.setAttribute(this.#attr(BOUNDARY), "");
     this.itemsTarget.appendChild(boundary);
   }
   #removeBoundary() {
@@ -496,17 +514,68 @@ var OverflowMenuController = class extends Controller {
     return this.moreTarget.querySelector('[data-stimeo--menu-target="trigger"]');
   }
   /**
-   * Whether the More trigger is bare enough for the label to be safe to write.
-   * Assigning `textContent` replaces *every* child node, so a trigger holding an
-   * icon would silently lose it — and the loss is permanent, since the restore
-   * pass returns items but not authored trigger content. A trigger that already
-   * carries an accessible name is left alone too: injecting visible text under a
-   * different `aria-label` would make the label and the name disagree. A trigger
-   * with neither text, nor children, nor a name has nothing to lose and gets the
-   * fallback; one that is empty *and* unnamed is the only case the label rescues.
+   * Keeps the More trigger's text on `moreLabel` wherever that text is this
+   * controller's to write: a bare trigger, or one still holding the label this
+   * controller wrote and nothing else. An empty `moreLabel` hands such a trigger
+   * back bare. A pass that finds the label already in place writes nothing, and a
+   * trigger that is neither is not written at all.
+   *
+   * @stimeoRenderRoot
+   */
+  #syncLabel() {
+    const trigger = this.#trigger();
+    if (trigger === null) return;
+    const owned = this.#ownsLabel(trigger);
+    if (!owned && !this.#isBareTrigger(trigger)) return;
+    const label = this.moreLabelValue;
+    if (label === "") {
+      this.#releaseLabel(trigger);
+      return;
+    }
+    if (owned && trigger.textContent === label) return;
+    trigger.textContent = label;
+    trigger.setAttribute(this.#attr(OWNED_LABEL), label);
+  }
+  /**
+   * Whether the trigger holds the label this controller wrote there and nothing
+   * else: the text still matches the marker, and the trigger carries nothing but
+   * text. Ownership is read afresh on every call, so a trigger the consumer adds to
+   * is theirs for as long as the addition is there.
+   */
+  #ownsLabel(trigger) {
+    return trigger.getAttribute(this.#attr(OWNED_LABEL)) === trigger.textContent && this.#carriesOnlyText(trigger);
+  }
+  /**
+   * Takes the label this controller wrote back out of the trigger, leaving it bare.
+   * A trigger that is not this controller's is left exactly as it is, marker
+   * included: taking the marker off would itself write to it.
+   */
+  #releaseLabel(trigger) {
+    if (!this.#ownsLabel(trigger)) return;
+    trigger.textContent = "";
+    trigger.removeAttribute(this.#attr(OWNED_LABEL));
+  }
+  /**
+   * Whether the More trigger is bare, so the label is safe to write: no text, no
+   * element child, no `aria-label` and no `aria-labelledby`. A trigger with neither
+   * text, nor children, nor a name has nothing to lose and gets the fallback; one
+   * that is empty *and* unnamed is the only case the label rescues.
    */
   #isBareTrigger(trigger) {
-    return (trigger.textContent ?? "").trim() === "" && trigger.firstElementChild === null && !trigger.hasAttribute("aria-label") && !trigger.hasAttribute("aria-labelledby");
+    return (trigger.textContent ?? "").trim() === "" && this.#carriesOnlyText(trigger);
+  }
+  /**
+   * Whether the trigger carries nothing but text: no element child, no
+   * `aria-label` and no `aria-labelledby`. Assigning `textContent` replaces
+   * *every* child node, so a trigger holding an icon would silently lose it — and
+   * the loss is permanent, since only the label this controller wrote is ever
+   * taken back. A trigger that carries an accessible name is left alone too:
+   * visible text written under a different `aria-label` would make the label and
+   * the name disagree. Only a trigger that carries nothing but text is ever
+   * written or emptied.
+   */
+  #carriesOnlyText(trigger) {
+    return trigger.firstElementChild === null && !trigger.hasAttribute("aria-label") && !trigger.hasAttribute("aria-labelledby");
   }
   /**
    * Whether the More menu is expanded. Menu owns that state and reflects it on the
@@ -577,9 +646,11 @@ var OverflowMenuController = class extends Controller {
     this.#reorder(this.itemsTarget, this.#items);
     for (const item of this.#items) {
       this.#unbank(item);
-      item.removeAttribute(INDEX);
+      item.removeAttribute(this.#attr(INDEX));
     }
     this.#closeMenu();
+    const trigger = this.#trigger();
+    if (trigger !== null) this.#releaseLabel(trigger);
     this.moreTarget.hidden = true;
     this.element.removeAttribute("data-overflowing");
     this.element.removeAttribute("data-overflow-count");
@@ -619,24 +690,24 @@ var OverflowMenuController = class extends Controller {
    * saving every authored value it overwrites ("" means the attribute was absent).
    */
   #bank(item) {
-    if (!item.hasAttribute(BANKED)) {
-      item.setAttribute(BANKED, "true");
-      item.setAttribute(SAVED_ROLE, item.getAttribute("role") ?? "");
-      item.setAttribute(SAVED_TABINDEX, item.getAttribute("tabindex") ?? "");
-      item.setAttribute(SAVED_MENU_TARGET, item.getAttribute(MENU_TARGET) ?? "");
+    if (!item.hasAttribute(this.#attr(BANKED))) {
+      item.setAttribute(this.#attr(BANKED), "true");
+      item.setAttribute(this.#attr(SAVED_ROLE), item.getAttribute("role") ?? "");
+      item.setAttribute(this.#attr(SAVED_TABINDEX), item.getAttribute("tabindex") ?? "");
+      item.setAttribute(this.#attr(SAVED_MENU_TARGET), item.getAttribute(MENU_TARGET) ?? "");
       item.setAttribute("role", "menuitem");
       item.setAttribute("tabindex", "-1");
       item.setAttribute(MENU_TARGET, "item");
     }
-    item.setAttribute(INDEX, String(this.#indexOf(item)));
+    item.setAttribute(this.#attr(INDEX), String(this.#indexOf(item)));
   }
   /** Undoes the banking: restores every authored value and drops the bookkeeping. */
   #unbank(item) {
-    if (!item.hasAttribute(BANKED)) return;
-    this.#restoreAttr(item, "role", item.getAttribute(SAVED_ROLE));
-    this.#restoreAttr(item, "tabindex", item.getAttribute(SAVED_TABINDEX));
-    this.#restoreAttr(item, MENU_TARGET, item.getAttribute(SAVED_MENU_TARGET));
-    for (const name of BOOKKEEPING) item.removeAttribute(name);
+    if (!item.hasAttribute(this.#attr(BANKED))) return;
+    this.#restoreAttr(item, "role", item.getAttribute(this.#attr(SAVED_ROLE)));
+    this.#restoreAttr(item, "tabindex", item.getAttribute(this.#attr(SAVED_TABINDEX)));
+    this.#restoreAttr(item, MENU_TARGET, item.getAttribute(this.#attr(SAVED_MENU_TARGET)));
+    for (const name of BOOKKEEPING) item.removeAttribute(this.#attr(name));
   }
   /** Re-applies a saved attribute value, or removes the attribute when it was absent. */
   #restoreAttr(item, name, original) {

data/dist/controllers/pagination_controller.js

@@ -20,6 +20,39 @@ function canTakeFocus(element) {
   return !inheritsFieldsetDisabled(element);
 }
 
+// src/utils/microtask_coalescer.ts
+var MicrotaskCoalescer = class {
+  #run;
+  #queued = false;
+  #active = false;
+  #generation = 0;
+  /** @param run - the single reconciliation pass, invoked at most once per batch. */
+  constructor(run) {
+    this.#run = run;
+  }
+  /** Opens the window in which {@link schedule} is honoured; call from `connect()`. */
+  activate() {
+    this.#active = true;
+  }
+  /** Closes the window and drops any pending pass; call from `disconnect()`. */
+  cancel() {
+    this.#active = false;
+    this.#queued = false;
+    this.#generation += 1;
+  }
+  /** Requests one pass after the batch settles. Idempotent; inert outside the window. */
+  schedule() {
+    if (!this.#active || this.#queued) return;
+    this.#queued = true;
+    const generation = this.#generation;
+    queueMicrotask(() => {
+      if (generation !== this.#generation || !this.#queued || !this.#active) return;
+      this.#queued = false;
+      this.#run();
+    });
+  }
+};
+
 // src/utils/before_cache_reset.ts
 var BeforeCacheReset = class _BeforeCacheReset {
   /** Every subscribed instance, iterated by the one shared document listener. */
@@ -81,53 +114,57 @@ var TabindexLoan = class {
 };
 
 // src/controllers/pagination_controller.ts
-var PaginationController = class _PaginationController extends Controller {
+var PaginationController = class extends Controller {
   static targets = ["page", "prev", "next"];
   static values = {
     page: { type: Number, default: 1 },
     total: { type: Number, default: 1 }
   };
   static actions = ["next", "prev", "select"];
-  static events = ["change"];
-  /** Marks a `disabled` this controller applied at a boundary (ownership flag). */
-  static #BOUNDARY_ATTR = "data-stimeo--pagination-boundary-disabled";
-  #isConnected = false;
+  static events = ["change", "reconcile"];
+  /** Marks a `disabled` this controller applied at a boundary, in its own namespace. */
+  get #boundaryAttribute() {
+    return `data-${this.identifier}-boundary-disabled`;
+  }
   /** The `tabindex` this instance lends the root for the focus fallback. */
   #tabindex = new TabindexLoan();
-  /** Normalizes out-of-range initial values and renders the initial state. */
+  /**
+   * Collapses the Value and target callbacks of one mutation into one pass, and
+   * refuses the ones Stimulus delivers before `connect()`, which renders itself.
+   */
+  #repaint = new MicrotaskCoalescer(() => this.#reconcilePage());
+  /** The page shown last, which the next move of the current page is measured from. */
+  #shown = 1;
+  /** Renders the initial state from the clamped `page` and `total`. */
   connect() {
-    this.#isConnected = true;
-    this.#normalizeAndRender();
+    this.#repaint.activate();
+    this.#shown = this.#page;
+    this.#render();
   }
-  /** Reverts the one attribute the controller adds outside its state hooks. */
+  /** Drops a pending pass and reverts the one attribute added outside the state hooks. */
   disconnect() {
-    this.#isConnected = false;
+    this.#repaint.cancel();
     this.#tabindex.returnAll();
   }
   /** Re-renders when application code (or a Turbo morph) changes `page` at runtime. */
   pageValueChanged() {
-    if (!this.#isConnected) return;
-    this.#normalizeAndRender();
+    this.#repaint.schedule();
   }
   /** Re-renders when application code (or a Turbo morph) changes `total` at runtime. */
   totalValueChanged() {
-    if (!this.#isConnected) return;
-    this.#normalizeAndRender();
+    this.#repaint.schedule();
   }
   /** Syncs a page button appended/replaced at runtime (the consumer owns the list). */
   pageTargetConnected() {
-    if (!this.#isConnected) return;
-    this.#render();
+    this.#repaint.schedule();
   }
   /** Syncs a `prev` button appended/replaced at runtime. */
   prevTargetConnected() {
-    if (!this.#isConnected) return;
-    this.#render();
+    this.#repaint.schedule();
   }
   /** Syncs a `next` button appended/replaced at runtime. */
   nextTargetConnected() {
-    if (!this.#isConnected) return;
-    this.#render();
+    this.#repaint.schedule();
   }
   /** Makes the clicked page button (its `data-page`) current. */
   select(event) {
@@ -153,22 +190,31 @@ var PaginationController = class _PaginationController extends Controller {
     const target = this.#clamp(page);
     if (target === previous) return;
     this.pageValue = target;
+    this.#shown = target;
     this.#render();
     this.dispatch("change", {
       detail: { page: target, total: this.#total, previous }
     });
   }
-  /** Writes the normalized Values back (only when they differ) and renders. */
-  #normalizeAndRender() {
-    const total = this.#total;
-    if (!Object.is(total, this.totalValue)) this.totalValue = total;
+  /**
+   * Renders one settled batch of Value and target changes, and reports a current
+   * page that moved from the one shown before as `reconcile`.
+   */
+  #reconcilePage() {
+    const previous = this.#shown;
     const page = this.#page;
-    if (!Object.is(page, this.pageValue)) this.pageValue = page;
+    this.#shown = page;
     this.#render();
+    if (page !== previous) {
+      this.dispatch("reconcile", { detail: { page, total: this.#total, previous } });
+    }
   }
   /**
    * Syncs `aria-current` on the page buttons and the prev/next `disabled` state.
    *
+   * It reads `page` and `total` through their clamps and never writes either Value,
+   * so a declaration outside the range stays in the attributes as the page wrote it.
+   *
    * @stimeoRenderRoot
    */
   #render() {
@@ -201,7 +247,7 @@ var PaginationController = class _PaginationController extends Controller {
   #release(button, atBoundary) {
     if (!button || atBoundary || !this.#owns(button)) return;
     button.disabled = false;
-    button.removeAttribute(_PaginationController.#BOUNDARY_ATTR);
+    button.removeAttribute(this.#boundaryAttribute);
   }
   /**
    * Disables a boundary button, first moving focus off it when it is the active
@@ -212,7 +258,7 @@ var PaginationController = class _PaginationController extends Controller {
     if (button.disabled && !this.#owns(button)) return;
     if (button === document.activeElement) this.#moveFocusAwayFrom(opposite);
     button.disabled = true;
-    button.setAttribute(_PaginationController.#BOUNDARY_ATTR, "");
+    button.setAttribute(this.#boundaryAttribute, "");
   }
   /**
    * Moves focus to `opposite` (already resolved to `null` when it will stay
@@ -249,7 +295,7 @@ var PaginationController = class _PaginationController extends Controller {
   }
   /** Whether the button's current `disabled` was applied by boundary control. */
   #owns(button) {
-    return button.hasAttribute(_PaginationController.#BOUNDARY_ATTR);
+    return button.hasAttribute(this.#boundaryAttribute);
   }
 };
 

data/dist/controllers/password_reveal_controller.js

@@ -84,10 +84,51 @@ var SafeTimeout = class extends TimerRegistry {
   }
 };
 
+// src/utils/state_regions.ts
+var StateRegions = class {
+  #whenTrue;
+  #whenFalse;
+  #taken = /* @__PURE__ */ new WeakSet();
+  constructor(options) {
+    this.#whenTrue = options.whenTrue;
+    this.#whenFalse = options.whenFalse ?? null;
+  }
+  /** Shows the regions inside `host` that belong to `isTrue` and hides the others. */
+  reflect(host, isTrue) {
+    const shown = this.#inside(host, this.#whenTrue());
+    if (!this.#whenFalse) {
+      for (const region of shown) this.#write(region, !isTrue);
+      return;
+    }
+    const hiddenSide = this.#inside(host, this.#whenFalse());
+    if (shown.length === 0 || hiddenSide.length === 0) {
+      for (const region of shown) this.#give(region);
+      for (const region of hiddenSide) this.#give(region);
+      return;
+    }
+    for (const region of shown) this.#write(region, !isTrue);
+    for (const region of hiddenSide) this.#write(region, isTrue);
+  }
+  /** Writes `hidden` where it moves, noting which regions it takes out of view. */
+  #write(region, hidden) {
+    if (hidden) this.#taken.add(region);
+    else this.#taken.delete(region);
+    if (region.hidden !== hidden) region.hidden = hidden;
+  }
+  /** Returns a region this instance hid; one it never hid keeps what it carries. */
+  #give(region) {
+    if (this.#taken.delete(region)) region.hidden = false;
+  }
+  /** The declared regions that sit within `host`, which may be the host itself. */
+  #inside(host, regions) {
+    return regions.filter((region) => host.contains(region));
+  }
+};
+
 // src/controllers/password_reveal_controller.ts
 var MAX_DELAY = 2 ** 31 - 1;
 var PasswordRevealController = class extends Controller {
-  static targets = ["input", "toggle"];
+  static targets = ["input", "toggle", "onLabel", "offLabel"];
   static values = {
     autoHide: { type: Number, default: 0 }
   };
@@ -105,6 +146,11 @@ var PasswordRevealController = class extends Controller {
    * document does not answer this — unloading the controller leaves it there.
    */
   #connected = false;
+  /** Owns `hidden` on the label pair the toggle button carries. */
+  #labels = new StateRegions({
+    whenTrue: () => this.onLabelTargets,
+    whenFalse: () => this.offLabelTargets
+  });
   /** Masks the field before Turbo copies the page into its snapshot. */
   #beforeCache = new BeforeCacheReset(() => this.#rewindToMasked());
   connect() {
@@ -144,6 +190,14 @@ var PasswordRevealController = class extends Controller {
   toggleTargetConnected() {
     this.#reflect(this.#isVisible);
   }
+  /** Describes the state to a revealed-side label that arrives after connect. */
+  onLabelTargetConnected() {
+    this.#reflect(this.#isVisible);
+  }
+  /** Describes the state to a masked-side label that arrives after connect. */
+  offLabelTargetConnected() {
+    this.#reflect(this.#isVisible);
+  }
   /** Toggles the input between masked and revealed. Bound via `data-action`. */
   toggle() {
     this.#setVisible(!this.#isVisible);
@@ -187,6 +241,8 @@ var PasswordRevealController = class extends Controller {
    * the opposite of what the declaration asked for. A value that is no delay at
    * all stays out of the positive range {@link PasswordRevealController.#arm}
    * requires, so it schedules nothing.
+   *
+   * @stimeoRuntimeOnly `autoHide` is the delay of the one re-masking timer it arms.
    */
   get #autoHideDelay() {
     return Math.min(this.autoHideValue, MAX_DELAY);
@@ -202,10 +258,11 @@ var PasswordRevealController = class extends Controller {
     this.inputTarget.type = "password";
     this.#reflect(false);
   }
-  /** Reflects the visible state onto `aria-pressed` and `data-state`. */
+  /** Reflects the visible state onto `aria-pressed`, `data-state` and the labels. */
   #reflect(visible) {
     if (this.hasToggleTarget) {
       this.toggleTarget.setAttribute("aria-pressed", visible ? "true" : "false");
+      this.#labels.reflect(this.toggleTarget, visible);
     }
     this.element.setAttribute("data-state", visible ? "visible" : "hidden");
   }

data/dist/controllers/persist_controller.js

@@ -127,7 +127,20 @@ function parseStringList(raw, fallback = []) {
   return parsed.filter((entry) => typeof entry === "string");
 }
 
+// src/utils/transient_hooks.ts
+var TransientHooks = class {
+  #attributes;
+  constructor(options) {
+    this.#attributes = options.attributes;
+  }
+  /** Drops the declared hooks from `element`; what it carries besides stays. */
+  reset(element) {
+    for (const attribute of this.#attributes) element.removeAttribute(attribute);
+  }
+};
+
 // src/controllers/persist_controller.ts
+var TRANSIENT = new TransientHooks({ attributes: ["data-persist-restored"] });
 var NON_VALUE_TYPES = /* @__PURE__ */ new Set(["file", "submit", "reset", "button", "image"]);
 var SENSITIVE_TYPES = /* @__PURE__ */ new Set(["password"]);
 var DEFAULT_EXCLUDE = ["authenticity_token", "_method", "utf8"];
@@ -197,7 +210,6 @@ var PersistController = class extends Controller {
     this.#excluded = parseStringList(this.excludeValue, DEFAULT_EXCLUDE);
     this.#knownFields = /* @__PURE__ */ new WeakSet();
     this.#forcedRestore.clear();
-    this.element.removeAttribute("data-persist-restored");
     this.element.addEventListener("input", this.#onInput);
     this.element.addEventListener("change", this.#onInput);
     this.#syncClearOn();
@@ -207,7 +219,7 @@ var PersistController = class extends Controller {
       attributeFilter: [
         "checked",
         "data-controller",
-        "data-stimeo--persist-target",
+        `data-${this.identifier}-target`,
         "id",
         "multiple",
         "name",
@@ -230,7 +242,7 @@ var PersistController = class extends Controller {
     this.#restoreDynamic.cancel();
     this.#forcedRestore.clear();
     this.#timeouts.clearAll();
-    this.element.removeAttribute("data-persist-restored");
+    TRANSIENT.reset(this.element);
     this.#payload = null;
   }
   /** Drops the active draft after storage confirms the removal. */
@@ -329,7 +341,7 @@ var PersistController = class extends Controller {
   }
   /** Reads, validates, and restores the active namespace. */
   #loadActiveDraft() {
-    this.element.removeAttribute("data-persist-restored");
+    TRANSIENT.reset(this.element);
     this.#payload = null;
     this.#knownFields = /* @__PURE__ */ new WeakSet();
     this.#forcedRestore.clear();
@@ -481,7 +493,7 @@ var PersistController = class extends Controller {
   }
   /** Whether this instance, rather than a nested Persist host, owns a field. */
   #ownsField(field) {
-    return field.closest('[data-controller~="stimeo--persist"]') === this.element;
+    return field.closest(`[data-controller~="${this.identifier}"]`) === this.element;
   }
   /** Marks all currently eligible fields without applying a payload. */
   #markCurrentFieldsKnown() {
@@ -515,7 +527,12 @@ var PersistController = class extends Controller {
     const name = value.trim();
     return name.length > 0 && !/\s/.test(name) ? name : null;
   }
-  /** Collects dynamic controls and select-option changes into one restore pass. */
+  /**
+   * Collects dynamic controls and select-option changes into one restore pass.
+   *
+   * @stimeoRuntimeOnly `key` decides whether an id change moves the storage namespace; it decides
+   *   nothing shown.
+   */
   #onMutations(records) {
     let rootIdChanged = false;
     for (const record of records) {
@@ -563,7 +580,12 @@ var PersistController = class extends Controller {
       this.#forcedRestore.add(field);
     }
   }
-  /** Resolves the logical key from the Value, falling back to the host id. */
+  /**
+   * Resolves the logical key from the Value, falling back to the host id.
+   *
+   * @stimeoRuntimeOnly `key` names the storage namespace; the restored fields come from what is
+   *   stored there.
+   */
   #resolveLogicalKey() {
     const key = this.keyValue || this.element.id;
     return key.length > 0 ? key : null;
@@ -572,7 +594,7 @@ var PersistController = class extends Controller {
   #storageKey(logicalKey) {
     return `${STORAGE_PREFIX}${logicalKey}`;
   }
-  /** Normalizes invalid debounce Values to the documented default. */
+  /** Normalizes an invalid `debounce` Value to the `debounce` default. */
   get #debounceDelay() {
     const value = this.debounceValue;
     return Number.isFinite(value) && value >= 0 ? value : DEFAULT_DEBOUNCE;