stimeo-ui 0.16.0 → 0.17.0

data/dist/controllers/scroll_area_controller.js

@@ -1,78 +1,152 @@
 import { Controller } from '@hotwired/stimulus';
 
-// src/controllers/scroll_area_controller.ts
+function sharedRegistry(key, create) {
+  const symbol = Symbol.for(key);
+  const scope = globalThis;
+  const existing = scope[symbol];
+  if (existing !== void 0) return existing;
+  const registry = create();
+  Object.defineProperty(globalThis, symbol, { value: registry });
+  return registry;
+}
 
-// src/utils/attribute_lease.ts
-var AttributeLease = class {
+function isAttributeValue(value) {
+  return value === null || typeof value === "string";
+}
+function readLeaseRecord(element, record) {
+  try {
+    const parsed = JSON.parse(element.getAttribute(record) ?? "null");
+    if (!Array.isArray(parsed)) return void 0;
+    const [original, written, ...rest] = parsed;
+    const linked = rest[0] !== false;
+    const beneath = linked ? rest : rest.slice(1);
+    if (!beneath.every((under) => typeof under === "string")) return void 0;
+    return isAttributeValue(original) && isAttributeValue(written) ? { original, written, linked, beneath } : void 0;
+  } catch {
+    return void 0;
+  }
+}
+var AttributeLease = class _AttributeLease {
+  static #registry = sharedRegistry(
+    "stimeo-ui.attribute-lease.registry.v1",
+    () => ({ stacks: /* @__PURE__ */ new WeakMap(), names: /* @__PURE__ */ new Map() })
+  );
   #attribute;
-  #records = /* @__PURE__ */ new Map();
-  /** @param attribute - The attribute whose temporary values this lease owns. */
-  constructor(attribute) {
+  #record;
+  #base;
+  #held = /* @__PURE__ */ new Set();
+  constructor(attribute, owner, options = {}) {
     this.#attribute = attribute;
+    this.#record = `data-${owner}-${attribute}-lease`;
+    this.#base = options.base === true;
+    const names = _AttributeLease.#registry.names;
+    names.set(attribute, (names.get(attribute) ?? /* @__PURE__ */ new Set()).add(this.#record));
   }
-  /** Writes or removes the leased attribute while preserving its authored value. */
   write(element, value) {
-    const existing = this.#records.get(element);
-    if (existing) {
-      existing.written = value;
-    } else {
-      this.#records.set(element, {
-        original: element.getAttribute(this.#attribute),
-        written: value
-      });
-    }
-    this.#reflect(element, value);
+    const stack = this.#stack(element);
+    const hold = this.#take(stack) ?? this.#acquire(element, stack);
+    this.#held.add(element);
+    const shows = !this.#covered(element, stack, hold);
+    hold.written = value;
+    this.#mark(element, stack);
+    if (shows) this.#reflect(element, value);
   }
-  /** Returns one lease without overwriting a value subsequently authored by a consumer. */
   return(element) {
-    const record = this.#records.get(element);
-    if (!record) return;
-    this.#records.delete(element);
-    const stillOwned = element.getAttribute(this.#attribute) === record.written;
-    if (stillOwned) this.#reflect(element, record.original);
+    const held = this.#held.delete(element);
+    const known = _AttributeLease.#registry.stacks.get(element)?.has(this.#attribute);
+    const stack = held || known || element.hasAttribute(this.#record) ? this.#stack(element) : [];
+    const hold = this.#take(stack);
+    if (!hold) return false;
+    const carries = element.getAttribute(this.#attribute) === hold.written;
+    const owns = carries && !this.#covered(element, stack, hold);
+    const index = stack.indexOf(hold);
+    stack.splice(index, 1);
+    const above = stack[index];
+    if (above) above.linked &&= hold.linked;
+    this.#mark(element, stack);
+    if (!owns) return true;
+    const below = hold.linked ? stack[index - 1] : void 0;
+    this.#reflect(element, below ? below.written : hold.original);
+    return true;
+  }
+  returnAll() {
+    for (const element of Array.from(this.#held)) this.return(element);
+  }
+  #stack(element) {
+    const stacks = _AttributeLease.#registry.stacks;
+    const byAttribute = stacks.get(element) ?? /* @__PURE__ */ new Map();
+    stacks.set(element, byAttribute);
+    const stack = byAttribute.get(this.#attribute) ?? this.#seed(element);
+    byAttribute.set(this.#attribute, stack);
+    return stack;
+  }
+  #seed(element) {
+    const found = [];
+    for (const record of _AttributeLease.#registry.names.get(this.#attribute) ?? []) {
+      const read = readLeaseRecord(element, record);
+      if (read) found.push({ ...read, record });
+    }
+    const depth = ({ beneath }) => beneath.filter((name) => found.some((other) => other.record === name)).length;
+    return found.sort((one, other) => depth(one) - depth(other)).map(({ record, written, original, linked }, index) => ({
+      lease: null,
+      record,
+      written,
+      original,
+      linked: linked && index > 0
+    }));
+  }
+  #take(stack) {
+    const hold = stack.find((held) => held.lease === this) ?? stack.find((held) => held.lease === null && held.record === this.#record);
+    if (hold) hold.lease = this;
+    return hold;
+  }
+  #acquire(element, stack) {
+    const current = element.getAttribute(this.#attribute);
+    const top = stack.at(-1);
+    const bottom = stack[0];
+    const over = top?.written === current ? top : void 0;
+    const from = this.#base ? bottom : over;
+    const hold = {
+      lease: this,
+      record: this.#record,
+      written: current,
+      original: from ? from.original : current,
+      linked: !this.#base && over !== void 0
+    };
+    if (this.#base && bottom) {
+      bottom.linked = true;
+      stack.unshift(hold);
+    } else stack.push(hold);
+    return hold;
+  }
+  #covered(element, stack, hold) {
+    const current = element.getAttribute(this.#attribute);
+    return stack.slice(stack.indexOf(hold) + 1).some((above) => above.written === current);
+  }
+  #mark(element, stack) {
+    const records = /* @__PURE__ */ new Map([[this.#record, null]]);
+    stack.forEach((hold, index) => {
+      const names = stack.slice(0, index).map((under) => under.record);
+      const beneath = [...new Set(names.reverse())].filter((name) => name !== hold.record);
+      const marker = hold.linked || beneath.length === 0 ? [] : [false];
+      records.set(
+        hold.record,
+        hold.written === hold.original && beneath.length === 0 && index === stack.length - 1 ? null : JSON.stringify([hold.original, hold.written, ...marker, ...beneath])
+      );
+    });
+    for (const [name, recorded] of records) {
+      if (element.getAttribute(name) === recorded) continue;
+      if (recorded === null) element.removeAttribute(name);
+      else element.setAttribute(name, recorded);
+    }
   }
-  /** Reflects only a real value transition, avoiding self-triggered mutation work. */
   #reflect(element, value) {
     if (element.getAttribute(this.#attribute) === value) return;
     if (value === null) element.removeAttribute(this.#attribute);
     else element.setAttribute(this.#attribute, value);
   }
-  /** Returns every outstanding lease using the same ownership check as {@link return}. */
-  returnAll() {
-    for (const element of Array.from(this.#records.keys())) this.return(element);
-  }
 };
 
-// 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/focus_candidate.ts
 function inheritsFieldsetDisabled(control) {
   let fieldset = control.closest("fieldset[disabled]");
   while (fieldset) {
@@ -82,8 +156,19 @@ function inheritsFieldsetDisabled(control) {
   }
   return false;
 }
+function unslotted(element) {
+  return element.assignedSlot === null && element.parentElement?.shadowRoot != null;
+}
+function flatTreeParent(element) {
+  if (unslotted(element)) return null;
+  const parent = element.assignedSlot ?? element.parentNode;
+  if (parent instanceof ShadowRoot) return parent.host;
+  return parent instanceof Element ? parent : null;
+}
 function canTakeFocus(element) {
-  if (element.closest("[hidden], [inert]")) return false;
+  for (let node = element; node; node = flatTreeParent(node)) {
+    if (unslotted(node) || node.matches("[hidden], [inert]")) return false;
+  }
   if (element instanceof HTMLInputElement && element.type === "hidden") return false;
   if (!("disabled" in element)) return true;
   if (element.disabled) return false;
@@ -150,14 +235,8 @@ function hasTabStop(root) {
   return firstTabStop(root) !== null;
 }
 
-// src/utils/frame_coalescer.ts
 var FrameCoalescer = class {
   #frame = null;
-  /**
-   * Runs `run` on the next frame, unless a frame is already pending — the first
-   * request of a burst wins and the rest are dropped. The pending frame is
-   * released before `run`, so `run` may request the next one.
-   */
   schedule(run) {
     if (this.#frame !== null) return;
     this.#frame = requestAnimationFrame(() => {
@@ -165,14 +244,6 @@ var FrameCoalescer = class {
       run();
     });
   }
-  /**
-   * Drops the pending frame, and reaches the platform only when there is one.
-   *
-   * There is no handle value that stands for "nothing pending":
-   * `cancelAnimationFrame` takes an `unsigned long`, so a negative placeholder
-   * arrives as a large positive number that the same allocator can hand out, and
-   * an idle cancel would then drop a frame belonging to someone else.
-   */
   cancel() {
     if (this.#frame === null) return;
     cancelAnimationFrame(this.#frame);
@@ -180,18 +251,15 @@ var FrameCoalescer = class {
   }
 };
 
-// src/utils/layout_observer.ts
 var LayoutObserver = class {
   #callback;
   #resizeObserverFactory;
   #resizeObserver = null;
   #observingViewport = false;
   #loadContainer = null;
-  /** Stable bound handler so add/removeEventListener target the same reference. */
   #handleViewportResize = () => {
     this.#callback();
   };
-  /** Stable bound handler for the capture-phase `load`; see {@link observeDescendantLoads}. */
   #handleDescendantLoad = () => {
     this.#callback();
   };
@@ -199,11 +267,6 @@ var LayoutObserver = class {
     this.#callback = callback;
     this.#resizeObserverFactory = options.resizeObserverFactory ?? (typeof ResizeObserver === "undefined" ? null : (cb) => new ResizeObserver(cb));
   }
-  /**
-   * Starts observing an element's size. Repeated calls observe additional
-   * elements through the same shared observer. No-ops when no
-   * `ResizeObserver` implementation is available.
-   */
   observe(element) {
     if (!this.#resizeObserverFactory) return;
     if (!this.#resizeObserver) {
@@ -213,47 +276,28 @@ var LayoutObserver = class {
     }
     this.#resizeObserver.observe(element);
   }
-  /** Stops observing a single element while leaving any others in place. */
   unobserve(element) {
     this.#resizeObserver?.unobserve(element);
   }
-  /** Starts observing viewport resizes. Idempotent: the listener is added once. */
   observeViewport() {
     if (this.#observingViewport) return;
     this.#observingViewport = true;
     window.addEventListener("resize", this.#handleViewportResize);
   }
-  /** Stops observing viewport resizes without affecting element observation. */
   unobserveViewport() {
     if (!this.#observingViewport) return;
     this.#observingViewport = false;
     window.removeEventListener("resize", this.#handleViewportResize);
   }
-  /**
-   * Starts reporting a `load` from anywhere inside `container` — an image or a
-   * frame settling changes the box it sits in, and it measures as zero high until
-   * then. `load` does not bubble, so the subscription is a capture-phase listener
-   * on the container itself and nothing the caller spells.
-   *
-   * **One container at a time.** A further call moves the observation, so a widget
-   * whose content element is swapped at runtime releases the element it let go by
-   * naming the new one — there is no second place for the release to drift from.
-   */
   observeDescendantLoads(container) {
     this.unobserveDescendantLoads();
     this.#loadContainer = container;
     container.addEventListener("load", this.#handleDescendantLoad, true);
   }
-  /** Stops reporting descendant loads without affecting element or viewport observation. */
   unobserveDescendantLoads() {
     this.#loadContainer?.removeEventListener("load", this.#handleDescendantLoad, true);
     this.#loadContainer = null;
   }
-  /**
-   * Releases every observation: disconnects the {@link ResizeObserver} and removes
-   * the viewport and descendant-load listeners. Safe to call multiple times. Call
-   * this from a controller's `disconnect()`.
-   */
   disconnect() {
     this.#resizeObserver?.disconnect();
     this.#resizeObserver = null;
@@ -262,7 +306,6 @@ var LayoutObserver = class {
   }
 };
 
-// src/utils/logical_scroll.ts
 function isRtl(element) {
   return window.getComputedStyle(element).direction === "rtl";
 }
@@ -276,27 +319,33 @@ function logicalScrollMetrics(element, horizontal) {
   return { position: Math.min(max, Math.max(0, position)), max };
 }
 
-// src/utils/microtask_coalescer.ts
+var ListenerSet = class {
+  #abort = new AbortController();
+  add(target, type, handler, options) {
+    target.addEventListener(type, handler, { ...options, signal: this.#abort.signal });
+  }
+  dispose() {
+    this.#abort.abort();
+    this.#abort = new AbortController();
+  }
+};
+
 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;
@@ -309,90 +358,284 @@ var MicrotaskCoalescer = class {
   }
 };
 
-// src/utils/style_property_lease.ts
-var StylePropertyLease = class {
+var MorphRenderWatcher = class {
+  #listeners = new ListenerSet();
+  #pass;
+  #element = null;
+  #onMorph = () => this.#pass.schedule();
+  constructor(run) {
+    this.#pass = new MicrotaskCoalescer(run);
+  }
+  observe(element) {
+    if (this.#element === element) return;
+    this.disconnect();
+    this.#element = element;
+    this.#pass.activate();
+    this.#listeners.add(element, "turbo:morph-element", this.#onMorph);
+  }
+  schedule() {
+    this.#pass.schedule();
+  }
+  disconnect() {
+    this.#listeners.dispose();
+    this.#pass.cancel();
+    this.#element = null;
+  }
+};
+
+var StylePropertyLease = class _StylePropertyLease {
+  static #registry = sharedRegistry(
+    "stimeo-ui.style-property-lease.registry.v1",
+    () => ({ stacks: /* @__PURE__ */ new WeakMap(), names: /* @__PURE__ */ new Map() })
+  );
   #property;
-  #records = /* @__PURE__ */ new Map();
-  /** @param property - The CSS property whose temporary values this lease owns. */
-  constructor(property) {
+  #record;
+  #held = /* @__PURE__ */ new Set();
+  constructor(property, owner) {
     this.#property = property;
+    this.#record = `data-${owner}-style-${property}-lease`;
+    const names = _StylePropertyLease.#registry.names;
+    names.set(property, (names.get(property) ?? /* @__PURE__ */ new Set()).add(this.#record));
   }
-  /** Writes or removes the leased declaration while preserving its authored value. */
   write(element, value, priority = "") {
-    const existing = this.#records.get(element);
-    if (existing) {
-      existing.writtenValue = value;
-      existing.writtenPriority = value === null ? "" : priority;
-    } else {
-      this.#records.set(element, {
-        originalValue: element.style.getPropertyValue(this.#property),
-        originalPriority: element.style.getPropertyPriority(this.#property),
-        writtenValue: value,
-        writtenPriority: value === null ? "" : priority
-      });
-    }
-    this.#reflect(element, value, priority);
+    const stack = this.#stack(element);
+    const hold = this.#take(stack) ?? this.#acquire(element, stack);
+    this.#held.add(element);
+    const shows = !this.#covered(element, stack, hold);
+    hold.writtenValue = value;
+    hold.writtenPriority = value === null ? "" : priority;
+    this.#mark(element, stack);
+    if (shows) this.#show(element, value, hold.writtenPriority);
   }
-  /** Returns one lease without overwriting a later consumer declaration. */
   return(element) {
-    const record = this.#records.get(element);
-    if (!record) return;
-    this.#records.delete(element);
-    const style = element.style;
-    const stillOwned = style.getPropertyValue(this.#property) === (record.writtenValue ?? "") && style.getPropertyPriority(this.#property) === record.writtenPriority;
-    if (stillOwned) {
-      this.#reflect(element, record.originalValue, record.originalPriority);
-    }
+    const held = this.#held.delete(element);
+    const known = _StylePropertyLease.#registry.stacks.get(element)?.has(this.#property);
+    const stack = held || known || element.hasAttribute(this.#record) ? this.#stack(element) : [];
+    const hold = this.#take(stack);
+    if (!hold) return;
+    const owns = this.#carries(element, hold) && !this.#covered(element, stack, hold);
+    const index = stack.indexOf(hold);
+    stack.splice(index, 1);
+    const above = stack[index];
+    if (above) above.linked &&= hold.linked;
+    this.#mark(element, stack);
+    if (!owns) return;
+    const below = hold.linked ? stack[index - 1] : void 0;
+    if (below) this.#show(element, below.writtenValue, below.writtenPriority);
+    else this.#show(element, hold.originalValue, hold.originalPriority);
   }
-  /** Returns every outstanding declaration lease. */
   returnAll() {
-    for (const element of Array.from(this.#records.keys())) this.return(element);
+    for (const element of Array.from(this.#held)) this.return(element);
+  }
+  #recorded(element, name) {
+    try {
+      const parsed = JSON.parse(element.getAttribute(name) ?? "null");
+      if (!Array.isArray(parsed)) return null;
+      const [originalValue, originalPriority, writtenValue, writtenPriority, ...rest] = parsed;
+      if (typeof originalValue !== "string" || typeof originalPriority !== "string") return null;
+      if (typeof writtenValue !== "string" && writtenValue !== null) return null;
+      if (typeof writtenPriority !== "string") return null;
+      const linked = rest[0] !== false;
+      const beneath = linked ? rest : rest.slice(1);
+      if (!beneath.every((under) => typeof under === "string")) return null;
+      return { originalValue, originalPriority, writtenValue, writtenPriority, linked, beneath };
+    } catch {
+      return null;
+    }
   }
-  /** Reflects only a real declaration transition. */
-  #reflect(element, value, priority) {
+  #stack(element) {
+    const stacks = _StylePropertyLease.#registry.stacks;
+    const byProperty = stacks.get(element) ?? /* @__PURE__ */ new Map();
+    stacks.set(element, byProperty);
+    const stack = byProperty.get(this.#property) ?? this.#seed(element);
+    byProperty.set(this.#property, stack);
+    return stack;
+  }
+  #seed(element) {
+    const found = [];
+    for (const record of _StylePropertyLease.#registry.names.get(this.#property) ?? []) {
+      const read = this.#recorded(element, record);
+      if (read) found.push({ ...read, record });
+    }
+    const depth = ({ beneath }) => beneath.filter((name) => found.some((other) => other.record === name)).length;
+    return found.sort((one, other) => depth(one) - depth(other)).map((entry, index) => ({
+      lease: null,
+      record: entry.record,
+      writtenValue: entry.writtenValue,
+      writtenPriority: entry.writtenPriority,
+      originalValue: entry.originalValue,
+      originalPriority: entry.originalPriority,
+      linked: entry.linked && index > 0
+    }));
+  }
+  #take(stack) {
+    const hold = stack.find((held) => held.lease === this) ?? stack.find((held) => held.lease === null && held.record === this.#record);
+    if (hold) hold.lease = this;
+    return hold;
+  }
+  #acquire(element, stack) {
+    const top = stack.at(-1);
+    const over = top && this.#carries(element, top) ? top : void 0;
     const style = element.style;
-    const nextValue = value ?? "";
-    const nextPriority = value === null ? "" : priority;
-    if (style.getPropertyValue(this.#property) === nextValue && style.getPropertyPriority(this.#property) === nextPriority) {
-      return;
+    const hold = {
+      lease: this,
+      record: this.#record,
+      writtenValue: null,
+      writtenPriority: "",
+      originalValue: over ? over.originalValue : style.getPropertyValue(this.#property),
+      originalPriority: over ? over.originalPriority : style.getPropertyPriority(this.#property),
+      linked: over !== void 0
+    };
+    stack.push(hold);
+    return hold;
+  }
+  #covered(element, stack, hold) {
+    return stack.slice(stack.indexOf(hold) + 1).some((above) => this.#carries(element, above));
+  }
+  #mark(element, stack) {
+    const records = /* @__PURE__ */ new Map([[this.#record, null]]);
+    stack.forEach((hold, index) => {
+      const names = stack.slice(0, index).map((under) => under.record);
+      const beneath = [...new Set(names.reverse())].filter((name) => name !== hold.record);
+      const marker = hold.linked || beneath.length === 0 ? [] : [false];
+      const { originalValue, originalPriority, writtenValue, writtenPriority } = hold;
+      records.set(
+        hold.record,
+        (writtenValue ?? "") === originalValue && writtenPriority === originalPriority && beneath.length === 0 && index === stack.length - 1 ? null : JSON.stringify([
+          originalValue,
+          originalPriority,
+          writtenValue,
+          writtenPriority,
+          ...marker,
+          ...beneath
+        ])
+      );
+    });
+    for (const [name, recorded] of records) {
+      if (element.getAttribute(name) === recorded) continue;
+      if (recorded === null) element.removeAttribute(name);
+      else element.setAttribute(name, recorded);
     }
-    if (value === null) style.removeProperty(this.#property);
-    else style.setProperty(this.#property, value, priority);
+  }
+  #carries(element, hold) {
+    return this.#holds(element, hold.writtenValue ?? "", hold.writtenPriority);
+  }
+  #holds(element, value, priority) {
+    const style = element.style;
+    return style.getPropertyValue(this.#property) === value && style.getPropertyPriority(this.#property) === priority;
+  }
+  #show(element, value, priority) {
+    if (this.#holds(element, value ?? "", priority)) return;
+    if (value === null) element.style.removeProperty(this.#property);
+    else element.style.setProperty(this.#property, value, priority);
   }
 };
 
-// src/utils/tabindex_loan.ts
-var TabindexLoan = class {
+function queryOpenDescendants(root, selector) {
+  const matches = [];
+  const roots = [root];
+  for (const scope of roots) {
+    matches.push(...scope.querySelectorAll(selector));
+    if (scope.nodeType === Node.ELEMENT_NODE) {
+      const shadow = scope.shadowRoot;
+      if (shadow) roots.push(shadow);
+    }
+    for (const element of scope.querySelectorAll("*")) {
+      if (element.shadowRoot) roots.push(element.shadowRoot);
+    }
+  }
+  return matches;
+}
+
+var TabindexLoan = class _TabindexLoan {
+  static #registry = sharedRegistry(
+    "stimeo-ui.tabindex-loan.registry.v1",
+    () => ({ stacks: /* @__PURE__ */ new WeakMap(), names: /* @__PURE__ */ new Set() })
+  );
   #value;
+  #record;
   #lent = /* @__PURE__ */ new Set();
-  /** Returns live loans before Turbo can copy them into its page snapshot. */
-  #beforeCache = new BeforeCacheReset(() => this.returnAll());
-  /**
-   * @param value - the `tabindex` to lend. `"-1"` (the default) is
-   *   programmatically focusable but not a Tab stop; `"0"` is a real Tab stop,
-   *   which a scroll region with no focusable content of its own needs.
-   */
-  constructor(value = "-1") {
+  constructor(value, owner) {
     this.#value = value;
+    this.#record = `data-${owner}-tabindex-loan`;
+    _TabindexLoan.#registry.names.add(this.#record);
   }
-  /** Lends `element` the value; no-ops when it already carries a `tabindex`. */
   lend(element) {
-    if (element.hasAttribute("tabindex")) return;
-    element.setAttribute("tabindex", this.#value);
+    const stack = this.#stack(element);
+    const current = element.getAttribute("tabindex");
+    const held = stack.find((hold) => hold.loan === this) ?? stack.find(
+      (hold) => hold.loan === null && hold.record === this.#record && hold.value === this.#value
+    );
+    const linked = stack.at(-1)?.value === current;
+    if (!held && current !== null && !linked) return;
     this.#lent.add(element);
-    this.#beforeCache.activate();
+    if (held) held.loan = this;
+    else stack.push({ loan: this, record: this.#record, value: this.#value, linked });
+    this.#mark(element, stack);
+    if (current === null || !held && current !== this.#value) {
+      element.setAttribute("tabindex", this.#value);
+    }
   }
-  /** Takes back every loan whose value is still the one that was lent. */
   returnAll() {
     for (const element of this.#lent) {
-      if (element.getAttribute("tabindex") === this.#value) element.removeAttribute("tabindex");
+      const stack = this.#stack(element);
+      const hold = stack.find((held) => held.loan === this);
+      if (hold) this.#release(element, stack, hold);
     }
     this.#lent.clear();
-    this.#beforeCache.deactivate();
+  }
+  reclaim(element) {
+    if (element.getAttribute(this.#record) !== this.#value) return;
+    const stack = this.#stack(element);
+    const hold = stack.find((held) => held.loan === null && held.record === this.#record);
+    if (hold && !element.matches(":focus")) this.#release(element, stack, hold);
+  }
+  reclaimWithin(root) {
+    for (const element of queryOpenDescendants(root, `[${this.#record}]`)) {
+      this.reclaim(element);
+    }
+  }
+  #stack(element) {
+    const stacks = _TabindexLoan.#registry.stacks;
+    const stack = stacks.get(element) ?? this.#seed(element);
+    stacks.set(element, stack);
+    return stack;
+  }
+  #seed(element) {
+    const current = element.getAttribute("tabindex");
+    const holds = [];
+    for (const record of _TabindexLoan.#registry.names) {
+      const value = element.getAttribute(record);
+      if (value !== null) holds.push({ loan: null, record, value, linked: true });
+    }
+    holds.sort((one, other) => Number(one.value === current) - Number(other.value === current));
+    for (const [index, hold] of holds.entries()) hold.linked = index > 0;
+    return holds;
+  }
+  #release(element, stack, hold) {
+    const current = element.getAttribute("tabindex");
+    const index = stack.indexOf(hold);
+    const owns = current === hold.value && !stack.slice(index + 1).some((above2) => above2.value === current);
+    stack.splice(index, 1);
+    const above = stack[index];
+    if (above) above.linked &&= hold.linked;
+    this.#mark(element, stack);
+    if (!owns) return;
+    const below = hold.linked ? stack[index - 1] : void 0;
+    if (!below) element.removeAttribute("tabindex");
+    else if (below.value !== current) element.setAttribute("tabindex", below.value);
+  }
+  #mark(element, stack) {
+    const records = /* @__PURE__ */ new Map([[this.#record, null]]);
+    for (const hold of stack) records.set(hold.record, hold.value);
+    for (const [name, recorded] of records) {
+      if (element.getAttribute(name) === recorded) continue;
+      if (recorded === null) element.removeAttribute(name);
+      else element.setAttribute(name, recorded);
+    }
   }
 };
 
-// src/controllers/scroll_area_controller.ts
 var EDGE_EPSILON = 1;
 var ScrollAreaController = class extends Controller {
   static targets = ["viewport"];
@@ -401,13 +644,15 @@ var ScrollAreaController = class extends Controller {
   };
   static events = ["reach"];
   #layout = new LayoutObserver(() => this.#refresh());
-  #rebind = new MicrotaskCoalescer(() => this.#syncViewport());
-  #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
-  #tabindex = new TabindexLoan("0");
-  #role = new AttributeLease("role");
-  #overflowState = new AttributeLease("data-overflow");
-  #scrollState = new AttributeLease("data-scroll");
-  #progress = new StylePropertyLease("--stimeo--scroll-progress");
+  #rebind = new MorphRenderWatcher(() => this.#syncViewport());
+  #tabindex = new TabindexLoan("0", this.identifier);
+  #role = new AttributeLease("role", this.identifier);
+  #overflowState = new AttributeLease("data-overflow", this.identifier);
+  #scrollState = new AttributeLease("data-scroll", this.identifier);
+  #progress = new StylePropertyLease(
+    "--stimeo--scroll-progress",
+    this.identifier
+  );
   #viewport = null;
   #content = null;
   #nameSources = null;
@@ -415,7 +660,6 @@ var ScrollAreaController = class extends Controller {
   #observedNameIds = /* @__PURE__ */ new Set();
   #observedNameSources = [];
   #fonts = null;
-  /** Coalesces scroll bursts into one position sync per frame. */
   #frames = new FrameCoalescer();
   #overflowing = false;
   #lastEdge = null;
@@ -428,39 +672,31 @@ var ScrollAreaController = class extends Controller {
     this.#refresh();
   };
   connect() {
-    this.#beforeCache.activate();
-    this.#rebind.activate();
+    this.#rebind.observe(this.element);
     this.#layout.observeViewport();
     this.#bindFonts();
     this.#syncViewport();
   }
   disconnect() {
-    this.#beforeCache.deactivate();
-    this.#rebind.cancel();
-    this.#frames.cancel();
+    this.#rebind.disconnect();
     if (this.#viewport) this.#unbindViewport(this.#viewport);
     this.#layout.disconnect();
     this.#unbindFonts();
     this.#clearHostState();
   }
-  /** Re-measures when a retained viewport's orientation Value is morphed. */
   orientationValueChanged() {
     this.#refresh();
   }
-  /** Schedules a complete resource rebind for a runtime viewport target. */
   viewportTargetConnected() {
     this.#rebind.schedule();
   }
-  /** Schedules cleanup or replacement binding after a viewport leaves. */
   viewportTargetDisconnected() {
     this.#rebind.schedule();
   }
-  /** Rebinds every viewport-owned resource against the final target in the mutation batch. */
   #syncViewport() {
     const next = this.hasViewportTarget ? this.viewportTarget : null;
     if (next === this.#viewport) {
       if (next) this.#refresh();
-      else this.#clearHostState();
       return;
     }
     if (this.#viewport) this.#unbindViewport(this.#viewport);
@@ -475,7 +711,6 @@ var ScrollAreaController = class extends Controller {
     this.#bindContentObserver(next);
     this.#refresh();
   }
-  /** Observes structural and attribute changes that can alter overflow or Tab stops. */
   #bindContentObserver(viewport) {
     this.#content = new MutationObserver((records) => {
       if (this.#viewport !== viewport || !this.#hasRelevantContentMutation(records)) return;
@@ -488,7 +723,6 @@ var ScrollAreaController = class extends Controller {
       characterData: true
     });
   }
-  /** Ignores only state-hook mutations whose exact value this controller just wrote. */
   #hasRelevantContentMutation(records) {
     let relevant = false;
     const consumed = /* @__PURE__ */ new Set();
@@ -503,7 +737,6 @@ var ScrollAreaController = class extends Controller {
     for (const attribute of consumed) this.#ownedHostMutations.delete(attribute);
     return relevant;
   }
-  /** Releases every resource and borrowed attribute owned by one former viewport. */
   #unbindViewport(viewport) {
     this.#frames.cancel();
     viewport.removeEventListener("scroll", this.#onScroll);
@@ -518,11 +751,6 @@ var ScrollAreaController = class extends Controller {
     this.#overflowing = false;
     this.#lastEdge = null;
   }
-  /**
-   * Runs the full structural and positional measurement pass.
-   *
-   * @stimeoRenderRoot
-   */
   #refresh() {
     const viewport = this.#viewport;
     if (!viewport) return;
@@ -532,13 +760,11 @@ var ScrollAreaController = class extends Controller {
     this.#syncKeyboardReach(viewport, this.#overflowing);
     this.#syncPosition(viewport, this.#overflowing);
   }
-  /** Measures overflow and reflects the state hook without identical DOM writes. */
   #syncOverflow(viewport) {
     const overflowing = this.#measureOverflow(viewport);
     this.#writeHostAttribute(this.#overflowState, "data-overflow", overflowing ? "true" : "false");
     return overflowing;
   }
-  /** Measures the primary-axis position and dispatches a newly established edge. */
   #syncPosition(viewport, overflowing) {
     const { position, progress } = this.#measurePosition(viewport);
     this.#writeHostAttribute(this.#scrollState, "data-scroll", position);
@@ -548,41 +774,40 @@ var ScrollAreaController = class extends Controller {
     this.#lastEdge = edge;
     if (edge) this.dispatch("reach", { detail: { edge } });
   }
-  /** Writes one leased host attribute and records self-generated observer input. */
   #writeHostAttribute(lease, attribute, value) {
+    const record = `data-${this.identifier}-${attribute}-lease`;
     const before = this.element.getAttribute(attribute);
+    const recordBefore = this.element.getAttribute(record);
     lease.write(this.element, value);
     this.#recordOwnedHostMutation(attribute, before);
+    this.#recordOwnedHostMutation(record, recordBefore);
   }
-  /** Writes the leased progress property and records its serialized style mutation. */
   #writeHostProgress(value) {
+    const record = `data-${this.identifier}-style---stimeo--scroll-progress-lease`;
     const before = this.element.getAttribute("style");
+    const recordBefore = this.element.getAttribute(record);
     this.#progress.write(this.element, value);
     this.#recordOwnedHostMutation("style", before);
+    this.#recordOwnedHostMutation(record, recordBefore);
   }
-  /** Records an exact host mutation only when the host is also the observed viewport. */
   #recordOwnedHostMutation(attribute, before) {
     if (this.#viewport !== this.element) return;
     const after = this.element.getAttribute(attribute);
     if (after !== before) this.#ownedHostMutations.set(attribute, after);
   }
-  /** Returns host hooks to authored values and clears edge bookkeeping. */
   #clearHostState() {
     this.#overflowState.returnAll();
     this.#scrollState.returnAll();
     this.#progress.returnAll();
-    this.#ownedHostMutations.clear();
     this.#overflowing = false;
     this.#lastEdge = null;
   }
-  /** Whether the configured axis currently has a scroll range. */
   #measureOverflow(viewport) {
     const orientation = this.orientationValue;
     const vertical = orientation !== "horizontal" && viewport.scrollHeight > viewport.clientHeight + EDGE_EPSILON;
     const horizontal = orientation !== "vertical" && viewport.scrollWidth > viewport.clientWidth + EDGE_EPSILON;
     return vertical || horizontal;
   }
-  /** Reports the primary-axis position bucket and normalized 0–1 progress. */
   #measurePosition(viewport) {
     const horizontalPrimary = this.orientationValue === "horizontal" || this.orientationValue === "both" && viewport.scrollHeight <= viewport.clientHeight + EDGE_EPSILON;
     const { position: scrollPosition, max: maxScroll } = logicalScrollMetrics(
@@ -595,7 +820,6 @@ var ScrollAreaController = class extends Controller {
     if (scrollPosition >= maxScroll - EDGE_EPSILON) return { position: "end", progress };
     return { position: "middle", progress };
   }
-  /** Borrows keyboard reach only when no usable descendant already owns a Tab stop. */
   #syncKeyboardReach(viewport, overflowing) {
     const wantsTabindex = overflowing && !hasTabStop(viewport);
     if (!wantsTabindex) {
@@ -606,15 +830,17 @@ var ScrollAreaController = class extends Controller {
     if (this.#hasAccessibleName(viewport)) {
       if (!viewport.hasAttribute("role")) this.#role.write(viewport, "region");
     } else {
-      this.#role.return(viewport);
+      this.#returnRole(viewport);
     }
   }
-  /** Returns only the viewport attributes borrowed by this controller. */
   #clearViewportAttributes(viewport) {
     this.#tabindex.returnAll();
+    this.#tabindex.reclaim(viewport);
+    this.#returnRole(viewport);
+  }
+  #returnRole(viewport) {
     this.#role.return(viewport);
   }
-  /** Whether the viewport already has a non-empty accessible name. */
   #hasAccessibleName(viewport) {
     const sources = this.#resolveNameSources(viewport);
     if (sources.length > 0) {
@@ -625,21 +851,15 @@ var ScrollAreaController = class extends Controller {
     }
     return Boolean(viewport.getAttribute("aria-label")?.trim());
   }
-  /** Resolves unique, live `aria-labelledby` references in authored order. */
   #resolveNameSources(viewport) {
     const ids = this.#nameReferenceIds(viewport);
     const sources = [];
-    const seen = /* @__PURE__ */ new Set();
     for (const id of ids) {
       const source = viewport.ownerDocument.getElementById(id);
-      if (source && !seen.has(source)) {
-        seen.add(source);
-        sources.push(source);
-      }
+      if (source) sources.push(source);
     }
     return sources;
   }
-  /** Observes external name sources so a retained region never becomes unnamed. */
   #syncNameSources(viewport) {
     const ids = this.#nameReferenceIds(viewport);
     const sources = this.#resolveNameSources(viewport).filter(
@@ -681,12 +901,10 @@ var ScrollAreaController = class extends Controller {
       });
     }
   }
-  /** Returns normalized unique label-reference ids in authored order. */
   #nameReferenceIds(viewport) {
     const tokens = viewport.getAttribute("aria-labelledby")?.trim().split(/\s+/).filter(Boolean);
     return Array.from(new Set(tokens));
   }
-  /** Whether document-graph changes can resolve or invalidate a referenced id. */
   #hasRelevantNameGraphMutation(records) {
     for (const record of records) {
       if (record.type === "attributes") {
@@ -702,7 +920,6 @@ var ScrollAreaController = class extends Controller {
     }
     return false;
   }
-  /** Whether a changed subtree contains one of the current label-reference ids. */
   #nodeContainsObservedNameId(node) {
     if (!(node instanceof Element)) return false;
     if (this.#observedNameIds.has(node.id)) return true;
@@ -710,7 +927,6 @@ var ScrollAreaController = class extends Controller {
       (element) => this.#observedNameIds.has(element.id)
     );
   }
-  /** Stops observing accessible-name sources. */
   #disconnectNameSources() {
     this.#nameSources?.disconnect();
     this.#nameSources = null;
@@ -719,32 +935,19 @@ var ScrollAreaController = class extends Controller {
     this.#observedNameIds.clear();
     this.#observedNameSources = [];
   }
-  /** Subscribes to font completion when the current engine exposes `document.fonts`. */
   #bindFonts() {
     const fonts = this.element.ownerDocument.fonts;
     if (!fonts || this.#fonts === fonts) return;
-    this.#unbindFonts();
     this.#fonts = fonts;
     fonts.addEventListener("loadingdone", this.#onFontsSettled);
     fonts.addEventListener("loadingerror", this.#onFontsSettled);
   }
-  /** Removes the font completion subscriptions. */
   #unbindFonts() {
     this.#fonts?.removeEventListener("loadingdone", this.#onFontsSettled);
     this.#fonts?.removeEventListener("loadingerror", this.#onFontsSettled);
     this.#fonts = null;
   }
-  /** Suspends live resources and returns all derived state before snapshotting. */
-  #rewindForCache() {
-    this.#rebind.cancel();
-    this.#frames.cancel();
-    if (this.#viewport) this.#unbindViewport(this.#viewport);
-    this.#layout.disconnect();
-    this.#unbindFonts();
-    this.#clearHostState();
-  }
 };
 
 export { ScrollAreaController };
-//# sourceMappingURL=scroll_area_controller.js.map
 //# sourceMappingURL=scroll_area_controller.js.map