stimeo-ui 0.16.0 → 0.18.0

package/dist/controllers/carousel_controller.js

@@ -1,13 +1,31 @@
 import { Controller } from '@hotwired/stimulus';
 
-// src/controllers/carousel_controller.ts
+var FOCUS_EVENTS = /* @__PURE__ */ new Set(["blur", "focus", "focusin", "focusout"]);
+var POINTER_EVENTS = /* @__PURE__ */ new Set(["mouseenter", "mouseleave", "pointerenter", "pointerleave"]);
+function stateReasonFor(event) {
+  if (!event) return "api";
+  if (FOCUS_EVENTS.has(event.type)) return "focus";
+  if (POINTER_EVENTS.has(event.type)) return "pointer";
+  return "user";
+}
+
+function actionSource(source) {
+  if (source instanceof HTMLElement) {
+    return { event: null, host: source, origin: source, reason: "api" };
+  }
+  const event = source ?? null;
+  return {
+    event,
+    host: event?.currentTarget instanceof Element ? event.currentTarget : null,
+    origin: event?.target instanceof Element ? event.target : null,
+    reason: stateReasonFor(event)
+  };
+}
 
-// src/utils/logical_scroll.ts
 function isRtl(element) {
   return window.getComputedStyle(element).direction === "rtl";
 }
 
-// src/utils/arrow_step.ts
 function logicalArrowStep(key, element) {
   if (key === "ArrowDown") return 1;
   if (key === "ArrowUp") return -1;
@@ -19,183 +37,277 @@ function isReservedArrowChord(event, allow = []) {
   if (!event.key.startsWith("Arrow")) return false;
   return event.altKey && !allow.includes("alt") || event.ctrlKey && !allow.includes("ctrl") || event.metaKey && !allow.includes("meta") || event.shiftKey && !allow.includes("shift");
 }
+function hasModifierChord(event) {
+  return event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
+}
+
+function setAttributeIfChanged(element, name, value, beforeWrite) {
+  if (element.getAttribute(name) === value) return false;
+  if (value === null) element.removeAttribute(name);
+  else element.setAttribute(name, value);
+  return true;
+}
 
-// src/utils/attribute_lease.ts
+function sharedRegistry(key, create) {
+  const symbol = Symbol.for(key);
+  const scope = globalThis;
+  const existing = scope[symbol];
+  if (existing !== void 0) return existing;
+  const registry2 = create();
+  Object.defineProperty(globalThis, symbol, { value: registry2 });
+  return registry2;
+}
+
+var registry = sharedRegistry(
+  "stimeo-ui.attribute-lease.registry.v1",
+  () => ({ stacks: /* @__PURE__ */ new WeakMap(), names: /* @__PURE__ */ new Map() })
+);
+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;
+  }
+}
+function attributeStack(element, attribute) {
+  const byAttribute = registry.stacks.get(element) ?? /* @__PURE__ */ new Map();
+  registry.stacks.set(element, byAttribute);
+  const known = byAttribute.get(attribute);
+  if (known) return known;
+  const found = [];
+  for (const record of registry.names.get(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;
+  const stack = found.sort((one, other) => depth(one) - depth(other)).map(({ record, written, original, linked }, index) => ({
+    lease: null,
+    record,
+    written,
+    original,
+    linked: linked && index > 0
+  }));
+  byAttribute.set(attribute, stack);
+  return stack;
+}
+function findHold(stack, lease, record) {
+  return stack.find((held) => held.lease === lease) ?? stack.find((held) => held.lease === null && held.record === record);
+}
 var AttributeLease = class {
   #attribute;
-  #records = /* @__PURE__ */ new Map();
-  /** @param attribute - The attribute whose temporary values this lease owns. */
-  constructor(attribute) {
+  #record;
+  #base;
+  #preserveAuthor;
+  #held = /* @__PURE__ */ new Set();
+  constructor(attribute, owner, options = {}) {
     this.#attribute = attribute;
+    this.#record = `data-${owner}-${attribute}-lease`;
+    this.#base = options.base === true;
+    this.#preserveAuthor = options.preserveAuthor === true;
+    const names = 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 = attributeStack(element, this.#attribute);
+    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 = registry.stacks.get(element)?.has(this.#attribute);
+    const stack = held || known || element.hasAttribute(this.#record) ? attributeStack(element, this.#attribute) : [];
+    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;
   }
-  /** 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);
+    for (const element of Array.from(this.#held)) this.return(element);
+  }
+  #take(stack) {
+    const hold = findHold(stack, this, 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 ? this.#preserveAuthor && !stack.some((held) => held.written === current) ? void 0 : 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) {
+      setAttributeIfChanged(element, name, recorded);
     }
   }
-  /** 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);
+  #reflect(element, value) {
+    setAttributeIfChanged(element, this.#attribute, value);
   }
 };
 
-// src/utils/detach_gate.ts
 var DetachGate = class _DetachGate {
-  /** Set while a probe is queued, waiting for a reconnect to cancel it. */
   #pending = false;
-  /**
-   * True while a probe is queued — the last disconnect was ambiguous and no
-   * reconnect has cancelled it yet. Read it from `connect()` to tell the
-   * reconnect half of an in-page move from a first connect: a controller whose
-   * initialisation restarts a measurement (a min-duration floor, an elapsed
-   * counter) must skip it for the move, where nothing actually restarted.
-   */
   get pending() {
     return this.#pending;
   }
-  /**
-   * True when the disconnect is definitely a real detach — the element left
-   * the document, or `data-controller` no longer lists the identifier. False
-   * means ambiguous (in-page move or observed-root exit), NOT "alive".
-   */
   static isDetached(host) {
-    if (!host.element.isConnected) return true;
-    const tokens = (host.element.getAttribute("data-controller") ?? "").split(/\s+/);
-    return !tokens.includes(host.identifier);
-  }
-  /**
-   * Call from `disconnect()`: runs `teardown` synchronously on a definite
-   * detach (fast path), otherwise defers it one microtask — a reconnect
-   * ({@link cancel} from `connect()`) keeps the state, no reconnect runs it.
-   * One microtask is the whole probe window: Stimulus reconnects a moved
-   * element within the same mutation batch, before the checkpoint drains.
-   */
+    return !host.element.isConnected || !_DetachGate.#listed(host);
+  }
   disconnected(host, teardown) {
-    if (_DetachGate.isDetached(host)) {
+    const carried = _DetachGate.#carried(host);
+    if (!carried && _DetachGate.isDetached(host)) {
       this.#pending = false;
       teardown();
       return;
     }
     this.#pending = true;
-    queueMicrotask(() => {
+    const probe = () => {
       if (!this.#pending) return;
       this.#pending = false;
       teardown();
-    });
+    };
+    if (carried) setTimeout(probe, 0);
+    else queueMicrotask(probe);
+  }
+  static #carried(host) {
+    const element = host.element;
+    return !element.isConnected && element.closest("[data-turbo-permanent]") !== null && _DetachGate.#listed(host);
+  }
+  static #listed(host) {
+    const tokens = (host.element.getAttribute("data-controller") ?? "").split(/\s+/);
+    return tokens.includes(host.identifier);
   }
-  /**
-   * Disarms a pending probe. Call from `connect()` (the reconnect that proves
-   * an in-page move) and from the head of any teardown path not routed through
-   * {@link disconnected} (disabled-toggle, Escape), so an orphaned probe can
-   * never run the teardown a second time.
-   */
   cancel() {
     this.#pending = false;
   }
 };
 
-// src/utils/event_owner.ts
 function ownerIndex(candidates, node) {
   if (!(node instanceof Node)) return -1;
   return candidates.findIndex((candidate) => candidate.contains(node));
 }
 
-// src/utils/listener_set.ts
 var ListenerSet = class {
-  /** The generation every `add` joins until the next `dispose()`. */
   #abort = new AbortController();
-  /**
-   * Attaches `handler` to the open generation, exactly as the caller spelled it.
-   *
-   * The set supplies the signal, so `options` carries everything else the DOM
-   * accepts — `capture` included, which has to match at release time and no
-   * longer has a second place to drift from.
-   */
   add(target, type, handler, options) {
     target.addEventListener(type, handler, { ...options, signal: this.#abort.signal });
   }
-  /**
-   * Releases every listener of the open generation, synchronously, and opens the
-   * next one. Idempotent, and safe before anything has been added.
-   */
   dispose() {
     this.#abort.abort();
     this.#abort = new AbortController();
   }
 };
 
-// src/utils/microtask_coalescer.ts
+var HoverRecheck = class {
+  #document;
+  #release;
+  #listeners = new ListenerSet();
+  #pending = /* @__PURE__ */ new Set();
+  #tickets = /* @__PURE__ */ new WeakMap();
+  constructor(document2, release) {
+    this.#document = document2;
+    this.#release = release;
+  }
+  wait(element) {
+    this.#pending.add(element);
+    this.#tickets.set(element, /* @__PURE__ */ Symbol());
+    this.#listeners.add(this.#document, "pointermove", this.#onPointerMove, {
+      capture: true,
+      passive: true
+    });
+  }
+  cancel(element) {
+    this.#tickets.delete(element);
+    this.#pending.delete(element);
+    if (this.#pending.size === 0) this.#listeners.dispose();
+  }
+  dispose() {
+    this.#listeners.dispose();
+    this.#pending.clear();
+    this.#tickets = /* @__PURE__ */ new WeakMap();
+  }
+  #onPointerMove = () => {
+    this.#listeners.dispose();
+    const waiting = [...this.#pending].map(
+      (element) => [element, this.#tickets.get(element)]
+    );
+    this.#pending.clear();
+    for (const [element, ticket] of waiting) {
+      if (this.#tickets.get(element) !== ticket) continue;
+      if (element.matches(":hover")) continue;
+      this.#release(element);
+    }
+  };
+};
+
 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. */
+  get pending() {
+    return this.#queued;
+  }
   schedule() {
     if (!this.#active || this.#queued) return;
     this.#queued = true;
@@ -208,36 +320,104 @@ var MicrotaskCoalescer = class {
   }
 };
 
-// src/utils/reduced_motion.ts
+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();
+  }
+  get pending() {
+    return this.#pass.pending;
+  }
+  disconnect() {
+    this.#listeners.dispose();
+    this.#pass.cancel();
+    this.#element = null;
+  }
+};
+
+var MoveCounter = class {
+  #sequence = 0;
+  record() {
+    this.#sequence += 1;
+    return this.#sequence;
+  }
+  isLatest(token) {
+    return token === this.#sequence;
+  }
+};
+
+var MAX_TIMER_DELAY_MS = 2147483647;
+
+var NUMBER_BOUNDS = {
+  positiveTimer: { finite: true, exclusiveMin: 0, max: MAX_TIMER_DELAY_MS }
+};
+function matchesNumberBounds(value, bounds) {
+  if (!Number.isFinite(value)) {
+    const direction = value === Infinity ? "positive" : value === -Infinity ? "negative" : null;
+    if (direction === null) return false;
+    if (bounds.allowInfinity !== "both" && bounds.allowInfinity !== direction) return false;
+  }
+  if (bounds.min !== void 0 && value < bounds.min) return false;
+  if (bounds.max !== void 0 && value > bounds.max) return false;
+  if (bounds.exclusiveMin !== void 0 && value <= bounds.exclusiveMin) return false;
+  if (bounds.integer && !Number.isInteger(value)) return false;
+  if (bounds.allowedValues !== void 0 && !bounds.allowedValues.includes(value)) return false;
+  return true;
+}
+
+function readNumber(raw, fallback, bounds) {
+  return matchesNumberBounds(raw, bounds) ? raw : fallback;
+}
+
+var NumberValueReader = class {
+  #lastRejected = /* @__PURE__ */ new Map();
+  read(owner, name, raw, fallback, bounds) {
+    const resolved = readNumber(raw, fallback, bounds);
+    if (matchesNumberBounds(raw, bounds)) {
+      this.#lastRejected.delete(name);
+      return resolved;
+    }
+    const attribute = `data-${owner.identifier}-${name.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)}-value`;
+    const literal = owner.element.getAttribute(attribute);
+    if (literal === null) {
+      this.#lastRejected.delete(name);
+      return resolved;
+    }
+    if (this.#lastRejected.get(name) !== literal) {
+      this.#lastRejected.set(name, literal);
+      console.warn(
+        `Stimeo UI: "${owner.identifier}" has an invalid number Value "${name}" declaration ${JSON.stringify(literal)}; using ${fallback}.`
+      );
+    }
+    return resolved;
+  }
+};
+
 function prefersReducedMotion() {
   return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
 
-// src/utils/roving_tabindex.ts
 var RovingTabindex = class {
-  /** Returns the current ordered item elements; called on every operation. */
   #getItems;
-  /**
-   * @param getItems - Returns the current ordered item elements. Called on every
-   *   operation so the live target list is always used.
-   */
   constructor(getItems) {
     this.#getItems = getItems;
   }
-  /** Index of the currently tabbable item (`tabindex="0"`), or `-1` if none. */
   get activeIndex() {
     return this.#getItems().findIndex((item) => item.tabIndex === 0);
   }
-  /**
-   * Makes exactly the item at `index` tabbable (`tabindex="0"`) and removes every
-   * other item from the Tab sequence (`tabindex="-1"`). An out-of-range `index`
-   * (e.g. `-1`) leaves all items at `-1`, which a controller can use to express
-   * "nothing is currently tabbable".
-   *
-   * @param index - Position of the item to make tabbable.
-   * @param options - Pass `{ focus: true }` to also move DOM focus to that item,
-   *   and `items` to reuse an event-scoped collection snapshot.
-   */
   setActive(index, options = {}) {
     const { focus = false } = options;
     const items = options.items ?? this.#getItems();
@@ -253,38 +433,24 @@ function rovingMove(current, length, delta, wrap) {
   return (next + length) % length;
 }
 
-// src/utils/safe_timeout.ts
 var TimerRegistry = class {
-  /** Live timer ids that have not yet been cleared (or, for timeouts, fired). */
   ids = /* @__PURE__ */ new Set();
-  /**
-   * Cancels a single tracked timer.
-   *
-   * No-ops if the id is unknown (already cleared, fired, or never owned by this
-   * registry), so callers can clear defensively without guarding.
-   */
   clear(id) {
     if (this.ids.delete(id)) {
       this.cancel(id);
     }
   }
-  /**
-   * Cancels every tracked timer. Call this from a controller's `disconnect()`
-   * to guarantee no timer outlives the element.
-   */
   clearAll() {
     for (const id of this.ids) {
       this.cancel(id);
     }
     this.ids.clear();
   }
-  /** Number of timers currently tracked (pending). */
   get size() {
     return this.ids.size;
   }
 };
 var SafeInterval = class extends TimerRegistry {
-  /** Schedules a repeating `callback` every `delay` ms and returns the timer id. */
   set(callback, delay) {
     const id = this.schedule(callback, delay);
     this.ids.add(id);
@@ -298,16 +464,20 @@ var SafeInterval = class extends TimerRegistry {
   }
 };
 
-// src/utils/state_regions.ts
-var StateRegions = class {
+var StateRegions = class _StateRegions {
+  static #registry = sharedRegistry(
+    "stimeo-ui.state-regions.registry.v1",
+    () => ({ stacks: /* @__PURE__ */ new WeakMap(), names: /* @__PURE__ */ new Set() })
+  );
   #whenTrue;
   #whenFalse;
-  #taken = /* @__PURE__ */ new WeakSet();
-  constructor(options) {
+  #record;
+  constructor(options, owner) {
     this.#whenTrue = options.whenTrue;
     this.#whenFalse = options.whenFalse ?? null;
+    this.#record = `data-${owner}-hidden-region`;
+    _StateRegions.#registry.names.add(this.#record);
   }
-  /** 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) {
@@ -323,32 +493,135 @@ var StateRegions = class {
     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. */
+  release(host) {
+    for (const region of [host, ...host.querySelectorAll("*")]) {
+      if (!(region instanceof HTMLElement)) continue;
+      const stack = this.#held(region);
+      const hold = stack && this.#take(stack);
+      if (!stack || !hold) continue;
+      const owns = region.hidden === hold.written && !this.#covered(region, stack, hold);
+      const index = stack.indexOf(hold);
+      stack.splice(index, 1);
+      const above = stack[index];
+      if (above) above.linked &&= hold.linked;
+      if (owns) {
+        const below = hold.linked ? stack[index - 1] : void 0;
+        if (below) {
+          if (region.hidden !== below.written) region.hidden = below.written;
+        } else {
+          setAttributeIfChanged(region, "hidden", hold.authored);
+        }
+      }
+      this.#mark(region, stack);
+    }
+  }
   #write(region, hidden) {
-    if (hidden) this.#taken.add(region);
-    else this.#taken.delete(region);
-    if (region.hidden !== hidden) region.hidden = hidden;
+    const stack = this.#stack(region);
+    const hold = this.#take(stack) ?? this.#acquire(region, stack);
+    const shows = !this.#covered(region, stack, hold);
+    hold.written = hidden;
+    if (shows && region.hidden !== hidden) region.hidden = hidden;
+    this.#mark(region, stack);
   }
-  /** Returns a region this instance hid; one it never hid keeps what it carries. */
   #give(region) {
-    if (this.#taken.delete(region)) region.hidden = false;
+    const stack = this.#held(region);
+    if (stack && this.#take(stack)?.written) this.#write(region, false);
+  }
+  #held(region) {
+    return _StateRegions.#registry.stacks.has(region) || region.hasAttribute(this.#record) ? this.#stack(region) : void 0;
+  }
+  #stack(region) {
+    const stacks = _StateRegions.#registry.stacks;
+    const stack = stacks.get(region) ?? this.#seed(region);
+    stacks.set(region, stack);
+    return stack;
+  }
+  #seed(region) {
+    const found = [];
+    for (const record of _StateRegions.#registry.names) {
+      const read = this.#recorded(region, 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, authored, written, linked }, index) => ({
+      instance: null,
+      record,
+      authored,
+      written,
+      linked: linked && index > 0
+    }));
+  }
+  #take(stack) {
+    const hold = stack.find((held) => held.instance === this) ?? stack.find((held) => held.instance === null && held.record === this.#record);
+    if (hold) hold.instance = this;
+    return hold;
+  }
+  #covered(region, stack, hold) {
+    return stack.slice(stack.indexOf(hold) + 1).some((above) => above.written === region.hidden);
+  }
+  #acquire(region, stack) {
+    const top = stack.at(-1);
+    const over = top && region.hidden === top.written ? top : void 0;
+    const hold = {
+      instance: this,
+      record: this.#record,
+      authored: over ? over.authored : region.getAttribute("hidden"),
+      written: false,
+      linked: over !== void 0
+    };
+    stack.push(hold);
+    return hold;
+  }
+  #mark(region, 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,
+        region.getAttribute("hidden") === hold.authored && beneath.length === 0 && index === stack.length - 1 ? null : JSON.stringify([hold.authored, hold.written, ...marker, ...beneath])
+      );
+    });
+    for (const [name, recorded] of records) {
+      setAttributeIfChanged(region, name, recorded);
+    }
+  }
+  #recorded(region, name) {
+    try {
+      const parsed = JSON.parse(region.getAttribute(name) ?? "null");
+      if (!Array.isArray(parsed)) return null;
+      const [authored, written, ...rest] = parsed;
+      if (authored !== null && typeof authored !== "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 typeof written === "boolean" ? { authored, written, linked, beneath } : null;
+    } catch {
+      return null;
+    }
   }
-  /** 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/carousel_controller.ts
+function targetSelector(identifier, name) {
+  return `[data-${identifier}-target~="${name}"]`;
+}
+
 var DEFAULT_INTERVAL = 5e3;
 var OBSERVED_ATTRIBUTES = ["aria-selected", "data-state", "hidden"];
-var CarouselController = class extends Controller {
+var CarouselController = class _CarouselController extends Controller {
+  #numbers = new NumberValueReader();
+  #moves = new MoveCounter();
   static targets = [
     "slide",
     "viewport",
     "prev",
     "next",
     "picker",
+    "pickerList",
     "playToggle",
     "onLabel",
     "offLabel"
@@ -358,6 +631,9 @@ var CarouselController = class extends Controller {
     interval: { type: Number, default: DEFAULT_INTERVAL },
     loop: { type: Boolean, default: true }
   };
+  static valueConstraints = {
+    interval: NUMBER_BOUNDS.positiveTimer
+  };
   static actions = [
     "goto",
     "next",
@@ -369,84 +645,46 @@ var CarouselController = class extends Controller {
   ];
   static events = ["change", "pause", "play", "reconcile"];
   #roving = new RovingTabindex(() => this.pickerTargets);
-  #reconcileTargets = new MicrotaskCoalescer(() => this.#reconcileTargetSet());
+  #reconcileTargets = new MorphRenderWatcher(() => this.#reconcileTargetSet());
   #intervals = new SafeInterval();
-  /** Unreachable step controls and the toggle of a carousel that cannot rotate. */
-  #ariaDisabled = new AttributeLease("aria-disabled");
-  /** The slide container's live-region politeness, which tracks the rotation. */
-  #ariaLive = new AttributeLease("aria-live");
-  /** Pairs with {@link CarouselController.#ariaLive}: only the changed slide is read. */
-  #ariaAtomic = new AttributeLease("aria-atomic");
-  /** The label pair a play toggle may carry, one half per rotation state. */
-  #labels = new StateRegions({
-    whenTrue: () => this.onLabelTargets,
-    whenFalse: () => this.offLabelTargets
-  });
-  #beforeCache = new BeforeCacheReset(() => this.#returnLeases());
-  /** Tells an in-page move, which keeps the rotation, from a real detach. */
+  #ariaDisabled = new AttributeLease("aria-disabled", this.identifier);
+  #ariaPressed = new AttributeLease("aria-pressed", this.identifier);
+  #ariaLive = new AttributeLease("aria-live", this.identifier);
+  #ariaAtomic = new AttributeLease("aria-atomic", this.identifier);
+  #labels = new StateRegions(
+    {
+      whenTrue: () => this.onLabelTargets,
+      whenFalse: () => this.offLabelTargets
+    },
+    this.identifier
+  );
   #gate = new DetachGate();
-  /** The next pointer movement, listened for while a pointer suspension waits on it. */
-  #pointer = new ListenerSet();
-  /**
-   * Events an authored action binding already took. The delegated listener runs
-   * later — it sits on the controller element, above every control — so it can
-   * consume the mark and stand down, letting the two wirings coexist without
-   * handling one interaction twice.
-   */
+  #pointer = new HoverRecheck(this.element.ownerDocument, () => {
+    this.#pointerPaused = false;
+    this.#syncTimer();
+  });
   #handledEvents = /* @__PURE__ */ new WeakSet();
-  /**
-   * Whether `connect()` has run. Scheduling is already inert outside that window
-   * (`MicrotaskCoalescer`), so this gates the Value callbacks Stimulus
-   * delivers ahead of `connect()`.
-   */
   #connected = false;
-  /** Index of the visible slide. */
   #index = 0;
-  /** The visible slide element, which identifies it across a changing target set. */
   #activeSlide = null;
-  /** Slide count at the last resolved state, so a changed total is reportable. */
   #total = 0;
-  /**
-   * Pointer rests on the carousel: a suspension that lifts on `mouseleave`, or on the
-   * pointer movement that confirms a suspension a move or a connect left unconfirmed.
-   */
   #pointerPaused = false;
-  /** Focus is inside the carousel: a suspension that lifts when it leaves. */
   #focusPaused = false;
-  /** The tab is in the background: a suspension that lifts when it returns. */
   #hiddenPaused = false;
-  /** Reduced motion holds back the intent declared at connect, until a press or a new one. */
   #motionHold = false;
-  /** Id of the live autoplay interval, or null when stopped. */
   #timerId = null;
-  /** Delay the live interval was armed with, so an `interval` change re-arms it. */
   #timerInterval = 0;
-  /** Follows state-attribute rewrites on retained slides and pickers. */
   #observer = null;
-  /** Keeps a hidden tab from advancing behind the user's back. */
   #onVisibilityChange = () => {
     this.#hiddenPaused = document.visibilityState === "hidden";
     this.#syncTimer();
   };
-  /**
-   * Renders the initial slide, wires the delegated listeners, and starts autoplay
-   * when requested.
-   *
-   * Focus, the tab's visibility and the reduced-motion hold are read afresh. The
-   * pointer is not something the document can answer yet: no `mouseleave` reaches a
-   * node that moved, and `:hover` can answer from before the move until the pointer
-   * moves again. So an in-page move — which Stimulus delivers to the *same* controller
-   * instance as `disconnect()` then `connect()` — keeps the pointer suspension it had,
-   * `:hover` reading true adds one, and either waits for the next pointer movement to
-   * be confirmed or lifted. A rotation the move carried is still running, so the edges
-   * are judged against it. The attribute observer starts after the first render so the
-   * controller's own opening writes are not fed back to it.
-   */
+  #listeners = new ListenerSet();
   connect() {
     const moved = this.#gate.pending;
     this.#gate.cancel();
     this.#pointerPaused = moved && this.#pointerPaused || this.element.matches(":hover");
-    if (this.#pointerPaused) this.#awaitPointer();
+    if (this.#pointerPaused) this.#pointer.wait(this.element);
     this.#focusPaused = this.element.contains(document.activeElement);
     this.#hiddenPaused = document.visibilityState === "hidden";
     this.#motionHold = prefersReducedMotion();
@@ -455,15 +693,14 @@ var CarouselController = class extends Controller {
     this.#total = this.slideTargets.length;
     this.#syncTimer();
     this.#connected = true;
-    this.#reconcileTargets.activate();
-    this.#beforeCache.activate();
-    this.element.addEventListener("click", this.#onClick);
-    this.element.addEventListener("keydown", this.#onKeydown);
-    this.element.addEventListener("focusin", this.#onFocusin);
-    this.element.addEventListener("focusout", this.#onFocusout);
-    this.element.addEventListener("mouseenter", this.#onMouseenter);
-    this.element.addEventListener("mouseleave", this.#onMouseleave);
-    document.addEventListener("visibilitychange", this.#onVisibilityChange);
+    this.#reconcileTargets.observe(this.element);
+    this.#listeners.add(this.element, "click", this.#onClick);
+    this.#listeners.add(this.element, "keydown", this.#onKeydown);
+    this.#listeners.add(this.element, "focusin", this.#onFocusin);
+    this.#listeners.add(this.element, "focusout", this.#onFocusout);
+    this.#listeners.add(this.element, "mouseenter", this.#onMouseenter);
+    this.#listeners.add(this.element, "mouseleave", this.#onMouseleave);
+    this.#listeners.add(document, "visibilitychange", this.#onVisibilityChange);
     this.#observer = new MutationObserver(this.#onAttributeMutations);
     this.#observer.observe(this.element, {
       subtree: true,
@@ -471,147 +708,105 @@ var CarouselController = class extends Controller {
       attributeFilter: OBSERVED_ATTRIBUTES
     });
   }
-  /**
-   * Releases every listener and observer, returns the leased ARIA, drops the focus
-   * and tab suspensions. The rotation goes through the detach gate: a reconnect in
-   * the same batch — an in-page move — keeps it, and the pointer suspension with it;
-   * anything else ends it.
-   */
   disconnect() {
     this.#connected = false;
     this.#pointer.dispose();
-    this.element.removeEventListener("click", this.#onClick);
-    this.element.removeEventListener("keydown", this.#onKeydown);
-    this.element.removeEventListener("focusin", this.#onFocusin);
-    this.element.removeEventListener("focusout", this.#onFocusout);
-    this.element.removeEventListener("mouseenter", this.#onMouseenter);
-    this.element.removeEventListener("mouseleave", this.#onMouseleave);
-    document.removeEventListener("visibilitychange", this.#onVisibilityChange);
+    this.#listeners.dispose();
     this.#observer?.disconnect();
     this.#observer = null;
-    this.#reconcileTargets.cancel();
+    this.#reconcileTargets.disconnect();
     this.#focusPaused = false;
     this.#hiddenPaused = false;
     this.#activeSlide = null;
     this.#returnLeases();
-    this.#beforeCache.deactivate();
     this.#gate.disconnected(this, () => this.#endRun());
   }
-  /**
-   * Re-establishes the single selected picker when one is added after connect.
-   *
-   * Without this an appended picker that arrives `aria-selected="true"` leaves two
-   * marked at once — the authored pre-selection is only read on connect, so
-   * nothing else ever resolves the conflict. The current slide is kept: the
-   * repaint re-derives every picker from `#index`, so a late arrival never steals
-   * the selection.
-   */
   pickerTargetConnected(picker) {
     picker.tabIndex = -1;
     this.#reconcileTargets.schedule();
   }
-  /** Repairs selection and roving after a picker leaves a retained carousel. */
   pickerTargetDisconnected() {
     this.#reconcileTargets.schedule();
   }
-  /** Reconciles a slide added in the same DOM batch as its picker. */
   slideTargetConnected() {
     this.#reconcileTargets.schedule();
   }
-  /** Re-clamps the active index after a slide is removed. */
   slideTargetDisconnected() {
     this.#reconcileTargets.schedule();
   }
-  /**
-   * Publishes the rotation state on a toggle that joins a connected carousel.
-   *
-   * A toggle the markup already carries connects ahead of `connect()`, where the
-   * suspensions and the reduced-motion hold are not settled yet; the opening pass
-   * covers it.
-   */
+  viewportTargetConnected() {
+    this.#reconcileTargets.schedule();
+  }
+  viewportTargetDisconnected(viewport) {
+    if (!this.viewportTargets.includes(viewport)) {
+      this.#ariaLive.return(viewport);
+      this.#ariaAtomic.return(viewport);
+    }
+    this.#reconcileTargets.schedule();
+  }
+  playToggleTargetDisconnected(toggle) {
+    if (this.playToggleTargets.includes(toggle)) return;
+    this.#labels.release(toggle);
+    this.#ariaDisabled.return(toggle);
+    this.#ariaPressed.return(toggle);
+  }
+  prevTargetDisconnected(button) {
+    if (!this.prevTargets.includes(button)) this.#ariaDisabled.return(button);
+  }
+  nextTargetDisconnected(button) {
+    if (!this.nextTargets.includes(button)) this.#ariaDisabled.return(button);
+  }
   playToggleTargetConnected() {
     if (this.#connected) this.#syncTimer();
   }
-  /**
-   * Publishes the rotation state on a label half that joins a connected toggle.
-   *
-   * A half arriving changes the toggle's subtree, not its attributes, so the
-   * attribute observer never sees it; where the arrival completes a pair that was
-   * standing alone, this is what makes that pair whole and reflectable.
-   */
   onLabelTargetConnected() {
     if (this.#connected) this.#syncTimer();
   }
-  /** Publishes the rotation state on a label half that joins a connected toggle. */
   offLabelTargetConnected() {
     if (this.#connected) this.#syncTimer();
   }
-  /** Follows a rotation intent the page changed at runtime, lifting the reduced-motion hold. */
   autoplayValueChanged() {
     if (!this.#connected) return;
     this.#motionHold = false;
     this.#syncTimer();
   }
-  /** Re-arms the live interval at the new delay without reporting a state change. */
   intervalValueChanged() {
     if (this.#connected) this.#syncTimer();
   }
-  /**
-   * Re-publishes the step controls and re-evaluates the non-looping end through the
-   * reconcile pass, which reports a move only when the position changed.
-   */
   loopValueChanged() {
     this.#reconcileTargets.schedule();
   }
-  /** Advances to the next slide. Delegated; `data-action` wiring is optional. */
   next(event) {
     if (event?.defaultPrevented) return;
     this.#markHandled(event);
-    this.#select(this.#step(1), { focus: false });
+    this.#select(this.#step(1), { focus: false }, stateReasonFor(event));
   }
-  /** Returns to the previous slide. Delegated; `data-action` wiring is optional. */
   prev(event) {
     if (event?.defaultPrevented) return;
     this.#markHandled(event);
-    this.#select(this.#step(-1), { focus: false });
+    this.#select(this.#step(-1), { focus: false }, stateReasonFor(event));
+  }
+  goto(source) {
+    const { event, host, origin, reason } = actionSource(source);
+    if (origin && origin.closest(`[data-controller~="${this.identifier}"]`) !== this.element)
+      return;
+    if (event?.defaultPrevented) return;
+    const picker = host?.closest(targetSelector(this.identifier, "picker"));
+    if (!picker || !this.pickerTargets.includes(picker)) return;
+    this.#markHandled(event ?? void 0);
+    this.#select(this.pickerTargets.indexOf(picker), { focus: false }, reason);
   }
-  /** Jumps to the slide whose picker was activated (click / Enter / Space). */
-  goto(event) {
-    if (event.defaultPrevented) return;
-    this.#markHandled(event);
-    const index = this.#pickerIndexFor(event.currentTarget);
-    if (index !== -1) this.#select(index, { focus: false });
-  }
-  /**
-   * Flips the rotation intent the toggle shows, on the user's explicit request.
-   *
-   * The result is written to the `autoplay` Value, which is where every other path
-   * reads it from. A carousel with nothing to advance to has no intent to flip: the
-   * toggle is marked `aria-disabled` and does nothing.
-   */
   togglePlay(event) {
     if (event?.defaultPrevented) return;
     this.#markHandled(event);
     this.#togglePlay();
   }
-  /**
-   * Suspends rotation. A `focus`-family event records that focus is inside the
-   * carousel; anything else — hover, or a bare programmatic call — records the
-   * pointer suspension. Both lift through the matching {@link resume}, and
-   * neither touches the rotation intent.
-   */
   pause(event) {
     this.#markHandled(event);
     if (isFocusEvent(event)) this.#focusPaused = true;
     else this.#setPointerPaused(true);
     this.#syncTimer();
   }
-  /**
-   * Lifts the matching suspension. A `focusout` whose `relatedTarget` is still
-   * inside the carousel is focus moving between its own controls, which leaves the
-   * focus suspension in place — releasing it there would stop and restart the
-   * interval on every Tab press.
-   */
   resume(event) {
     this.#markHandled(event);
     if (isFocusEvent(event)) {
@@ -622,14 +817,12 @@ var CarouselController = class extends Controller {
     }
     this.#syncTimer();
   }
-  /** Picker roving for authored bindings; the delegated path is `#onKeydown`. */
   onPickerKeydown(event) {
     const index = this.#pickerIndexFor(event.currentTarget);
     if (index === -1) return;
     this.#markHandled(event);
     this.#handlePickerKeydown(event, index);
   }
-  /** Delegated activation for pickers and step controls without authored actions. */
   #onClick = (event) => this.#delegate(event, () => {
     const index = this.#pickerIndexFor(event.target);
     if (index !== -1) {
@@ -642,91 +835,48 @@ var CarouselController = class extends Controller {
       this.#togglePlay();
     }
   });
-  /** Delegated picker roving for pickers without authored actions. */
   #onKeydown = (event) => this.#delegate(event, () => {
     const index = this.#pickerIndexFor(event.target);
     if (index !== -1) this.#handlePickerKeydown(event, index);
   });
-  /** Focus arriving anywhere inside suspends the rotation. */
   #onFocusin = (event) => this.#delegate(event, () => {
     this.#focusPaused = true;
     this.#syncTimer();
   });
-  /** Focus genuinely leaving lifts the suspension; moves between own controls do not. */
   #onFocusout = (event) => this.#delegate(event, () => {
     if (this.#focusStaysInside(event)) return;
     this.#focusPaused = false;
     this.#syncTimer();
   });
-  /** Pointer entry suspends the rotation. */
   #onMouseenter = (event) => this.#delegate(event, () => {
     this.#setPointerPaused(true);
     this.#syncTimer();
   });
-  /** Pointer exit lifts the suspension. */
   #onMouseleave = (event) => this.#delegate(event, () => {
     this.#setPointerPaused(false);
     this.#syncTimer();
   });
-  /**
-   * Reads `:hover` once the pointer has moved, when the answer is current, and lifts
-   * the pointer suspension if the pointer is not over the carousel. Listens once.
-   */
-  #onPointerMove = () => {
-    this.#pointer.dispose();
-    if (this.element.matches(":hover")) return;
-    this.#pointerPaused = false;
-    this.#syncTimer();
-  };
-  /** Leaves the pointer suspension to be confirmed or lifted on the next pointer movement. */
-  #awaitPointer() {
-    this.#pointer.add(document, "pointermove", this.#onPointerMove, {
-      capture: true,
-      passive: true
-    });
-  }
-  /** Records the pointer suspension; a newer answer ends any wait on the next movement. */
   #setPointerPaused(paused) {
     this.#pointer.dispose();
     this.#pointerPaused = paused;
   }
-  /**
-   * Schedules one reconciliation when a state attribute is rewritten in place —
-   * the only shape of change no target callback reports.
-   *
-   * The filter is the `attributeFilter` alone: those three attributes belong to
-   * the slides and pickers, and a coalesced pass over an unrelated one costs a
-   * repaint that writes nothing. Narrowing further here would add a branch no
-   * test could distinguish.
-   */
   #onAttributeMutations = () => {
     this.#reconcileTargets.schedule();
   };
-  /**
-   * Records that an action binding took this event.
-   *
-   * An authored binding sits on the control, so it runs while the event is still
-   * below the controller element and always precedes the delegated listener.
-   * Marking is the one signal that keeps the two wirings from both acting.
-   */
   #markHandled(event) {
     if (event) this.#handledEvents.add(event);
   }
-  /** Runs a delegated handler unless an action binding, or a descendant, took the event. */
   #delegate(event, run) {
     if (this.#handledEvents.delete(event) || event.defaultPrevented) return;
     run();
   }
-  /** Position of the picker that is or contains `node`, or `-1` when none does. */
   #pickerIndexFor(node) {
     return ownerIndex(this.pickerTargets, node);
   }
-  /** Whether a focus transition lands on another control of this same carousel. */
   #focusStaysInside(event) {
     const next = event.relatedTarget;
     return next instanceof Node && this.element.contains(next);
   }
-  /** Flips the rotation intent unless there is nothing to rotate to; lifts the motion hold. */
   #togglePlay() {
     if (!this.#canAutoplay()) return;
     const next = !this.#intent;
@@ -734,7 +884,6 @@ var CarouselController = class extends Controller {
     this.autoplayValue = next;
     this.#syncTimer();
   }
-  /** Applies the APG picker key map: arrows, Home, and End all move focus only. */
   #handlePickerKeydown(event, current) {
     if (event.defaultPrevented) return;
     if (isReservedArrowChord(event)) return;
@@ -745,72 +894,49 @@ var CarouselController = class extends Controller {
       case "ArrowLeft":
       case "ArrowUp": {
         event.preventDefault();
-        const step = logicalArrowStep(event.key, this.element);
+        const step = logicalArrowStep(
+          event.key,
+          this.hasPickerListTarget ? this.pickerListTarget : this.element
+        );
         this.#roving.setActive(rovingMove(current, length, step), { focus: true });
         return;
       }
-      // A chorded Home/End is a document-level shortcut (`Control+Home` scrolls
-      // the page) that belongs to the browser, exactly as a chorded arrow does.
       case "Home":
-        if (hasModifier(event)) return;
+        if (hasModifierChord(event)) return;
         event.preventDefault();
         this.#roving.setActive(0, { focus: true });
         return;
       case "End":
-        if (hasModifier(event)) return;
+        if (hasModifierChord(event)) return;
         event.preventDefault();
         this.#roving.setActive(length - 1, { focus: true });
         return;
     }
   }
-  /**
-   * Resolves the index one step away from the current one, honoring `loop`.
-   *
-   * Bounding is {@link CarouselController.#clampToSlides}'s job alone, so an
-   * empty set is allowed to fall out of the arithmetic here rather than being
-   * special-cased in two places that could disagree.
-   */
   #step(delta) {
     const total = this.slideTargets.length;
-    const next = this.#index + delta;
+    const next = this.#resolveIndex() + delta;
     if (this.loopValue) return (next + total) % total;
     return Math.min(total - 1, Math.max(0, next));
   }
-  /**
-   * Confines an index to the slide range, so no index can hide every slide.
-   *
-   * The single place an index is bounded: an empty set collapses to the first
-   * position, which is also where a non-numeric step from that empty set lands.
-   */
   #clampToSlides(index) {
     const last = this.slideTargets.length - 1;
     if (last < 0) return 0;
     return Math.min(last, Math.max(0, index));
   }
-  /**
-   * Changes the active slide, updates state hooks, and emits `change` — but only
-   * when the index actually changes, so a `next`/`prev` clamped at the end (or an
-   * autoplay tick at a non-looping boundary) re-renders without a spurious event.
-   */
-  #select(index, { focus }) {
+  #select(index, { focus }, reason = "user") {
     const target = this.#clampToSlides(index);
-    const changed = target !== this.#index;
+    const total = this.slideTargets.length;
+    const changed = target !== this.#index || total !== this.#total;
     this.#index = target;
+    this.#total = total;
+    const token = changed ? this.#moves.record() : null;
     this.#render({ focus });
     this.#syncTimer();
-    if (changed) {
-      this.dispatch("change", { detail: { index: target, total: this.slideTargets.length } });
+    if (token !== null && this.#moves.isLatest(token)) {
+      this.dispatch("change", { detail: { index: target, total, reason } });
     }
   }
-  /**
-   * Reflects `this.#index` onto the slides, the pickers, and the step controls.
-   *
-   * Every observed attribute is written only when its value actually changes: the
-   * same writes are watched by {@link CarouselController.#onAttributeMutations},
-   * and an unconditional rewrite would feed the controller its own output.
-   *
-   * @stimeoRenderRoot
-   */
   #render({ focus }) {
     this.#activeSlide = this.slideTargets[this.#index] ?? null;
     this.slideTargets.forEach((slide, i) => {
@@ -823,10 +949,9 @@ var CarouselController = class extends Controller {
     this.pickerTargets.forEach((picker, i) => {
       setAttributeIfChanged(picker, "aria-selected", i === pickerIndex ? "true" : "false");
     });
-    this.#roving.setActive(pickerIndex, { focus });
     this.#syncStepControls();
+    this.#roving.setActive(pickerIndex, { focus });
   }
-  /** Marks the step control a non-looping carousel has no slide left to reach. */
   #syncStepControls() {
     const last = this.slideTargets.length - 1;
     const atStart = !this.loopValue && this.#index <= 0;
@@ -838,16 +963,6 @@ var CarouselController = class extends Controller {
       this.#ariaDisabled.write(button, atEnd ? "true" : null);
     }
   }
-  /**
-   * Resolves which slide is current from the strongest evidence available.
-   *
-   * A single `data-state="active"` is unambiguous and wins, which is what restores
-   * the visible slide after a Turbo cache restore even with no pickers present.
-   * Competing claims — a slide inserted already marked active — are settled by the
-   * element the last render actually showed, so a newcomer never displaces what the
-   * reader is looking at. With no claim at all the authored picker selection
-   * decides, first in DOM order; failing that the previous position is kept.
-   */
   #resolveIndex() {
     const slides = this.slideTargets;
     const claims = [];
@@ -865,45 +980,30 @@ var CarouselController = class extends Controller {
     );
     return this.#clampToSlides(selected === -1 ? this.#index : selected);
   }
-  /** Re-resolves the active slide after the target set changed and reports the move. */
   #reconcileTargetSet() {
     const previousIndex = this.#index;
     const previousTotal = this.#total;
     this.#index = this.#resolveIndex();
-    this.#render({ focus: false });
     this.#total = this.slideTargets.length;
+    const changed = this.#index !== previousIndex || this.#total !== previousTotal;
+    const token = changed ? this.#moves.record() : null;
+    this.#render({ focus: false });
     this.#syncTimer();
-    if (this.#index !== previousIndex || this.#total !== previousTotal) {
+    if (token !== null && this.#moves.isLatest(token)) {
       this.dispatch("reconcile", { detail: { index: this.#index, total: this.#total } });
     }
   }
-  /** The rotation intent in effect: `autoplay`, unless reduced motion holds it back. */
   get #intent() {
     return this.autoplayValue && !this.#motionHold;
   }
-  /** Whether autoplay has anywhere left to advance to. */
   #canAutoplay() {
     const total = this.slideTargets.length;
     if (total <= 1) return false;
     return this.loopValue || this.#index < total - 1;
   }
-  /** The advance delay; a non-finite or non-positive declaration falls back. */
   get #interval() {
-    const declared = this.intervalValue;
-    return Number.isFinite(declared) && declared > 0 ? declared : DEFAULT_INTERVAL;
-  }
-  /**
-   * Drives the autoplay interval toward the desired state and publishes it.
-   *
-   * Rotation runs when the intent is on, nothing suspends it, and a slide is left
-   * to advance to. The toggle shows the intent only while a slide is left, so
-   * `aria-pressed` never claims a rotation that cannot happen. This body reads
-   * `autoplay` and never writes it, so the declared intent returns once a slide
-   * lies ahead again. Crossing the run/stop boundary emits `play`/`pause`;
-   * re-arming at a new `interval` is the same state and stays silent.
-   *
-   * @stimeoRenderRoot
-   */
+    return this.#safeInterval;
+  }
   #syncTimer() {
     const canAutoplay = this.#canAutoplay();
     const pressed = this.#intent && canAutoplay;
@@ -916,15 +1016,14 @@ var CarouselController = class extends Controller {
     }
     if (shouldRun && this.#timerId === null) {
       this.#timerInterval = interval;
-      this.#timerId = this.#intervals.set(() => this.next(), interval);
+      this.#timerId = this.#intervals.set(
+        () => this.#select(this.#step(1), { focus: false }, "timeout"),
+        interval
+      );
     }
     setAttributeIfChanged(this.element, "data-state", shouldRun ? "playing" : "paused");
-    if (shouldRun !== wasRunning) {
-      if (shouldRun) this.dispatch("play");
-      else this.dispatch("pause");
-    }
     for (const toggle of this.playToggleTargets) {
-      toggle.setAttribute("aria-pressed", pressed ? "true" : "false");
+      this.#ariaPressed.write(toggle, pressed ? "true" : "false");
       this.#ariaDisabled.write(toggle, canAutoplay ? null : "true");
       this.#labels.reflect(toggle, pressed);
     }
@@ -932,12 +1031,11 @@ var CarouselController = class extends Controller {
       this.#ariaLive.write(this.viewportTarget, shouldRun ? "off" : "polite");
       this.#ariaAtomic.write(this.viewportTarget, "false");
     }
+    if (shouldRun !== wasRunning) {
+      if (shouldRun) this.dispatch("play");
+      else this.dispatch("pause");
+    }
   }
-  /**
-   * Ends the rotation once the controller has really left. A carousel still in
-   * the document hears the end — `pause`, and `data-state="paused"` — so no `play`
-   * it reported is left without one; a detached tree keeps the markup it had.
-   */
   #endRun() {
     const wasRunning = this.#timerId !== null;
     this.#intervals.clearAll();
@@ -946,26 +1044,28 @@ var CarouselController = class extends Controller {
     setAttributeIfChanged(this.element, "data-state", "paused");
     this.dispatch("pause");
   }
-  /** Hands every leased attribute back to the value the consumer authored. */
   #returnLeases() {
     this.#ariaDisabled.returnAll();
+    this.#ariaPressed.returnAll();
     this.#ariaLive.returnAll();
     this.#ariaAtomic.returnAll();
   }
+  get #safeInterval() {
+    return this.#numbers.read(
+      this,
+      "interval",
+      this.intervalValue,
+      _CarouselController.values.interval.default,
+      _CarouselController.valueConstraints.interval
+    );
+  }
 };
 function isFocusEvent(event) {
   return event?.type.startsWith("focus") === true;
 }
-function hasModifier(event) {
-  return event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
-}
 function hits(elements, node) {
   return ownerIndex(elements, node) !== -1;
 }
-function setAttributeIfChanged(element, name, value) {
-  if (element.getAttribute(name) !== value) element.setAttribute(name, value);
-}
 
 export { CarouselController };
-//# sourceMappingURL=carousel_controller.js.map
 //# sourceMappingURL=carousel_controller.js.map