stimeo-ui 0.7.0 → 0.9.0

data/dist/controllers/carousel_controller.js

@@ -20,6 +20,76 @@ function isReservedArrowChord(event, allow = []) {
   return event.altKey && !allow.includes("alt") || event.ctrlKey && !allow.includes("ctrl") || event.metaKey && !allow.includes("meta") || event.shiftKey && !allow.includes("shift");
 }
 
+// src/utils/attribute_lease.ts
+var AttributeLease = class {
+  #attribute;
+  #records = /* @__PURE__ */ new Map();
+  /** @param attribute - The attribute whose temporary values this lease owns. */
+  constructor(attribute) {
+    this.#attribute = attribute;
+  }
+  /** 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);
+  }
+  /** 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);
+  }
+  /** 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/microtask_coalescer.ts
 var MicrotaskCoalescer = class {
   #run;
@@ -53,6 +123,11 @@ var MicrotaskCoalescer = class {
   }
 };
 
+// src/utils/reduced_motion.ts
+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. */
@@ -139,11 +214,13 @@ var SafeInterval = class extends TimerRegistry {
 };
 
 // src/controllers/carousel_controller.ts
+var DEFAULT_INTERVAL = 5e3;
+var OBSERVED_ATTRIBUTES = ["aria-selected", "data-state", "hidden"];
 var CarouselController = class extends Controller {
   static targets = ["slide", "viewport", "prev", "next", "picker", "playToggle"];
   static values = {
     autoplay: { type: Boolean, default: false },
-    interval: { type: Number, default: 5e3 },
+    interval: { type: Number, default: DEFAULT_INTERVAL },
     loop: { type: Boolean, default: true }
   };
   static actions = [
@@ -158,37 +235,107 @@ var CarouselController = class extends Controller {
   static events = ["change", "pause", "play", "reconcile"];
   #roving = new RovingTabindex(() => this.pickerTargets);
   #reconcileTargets = new MicrotaskCoalescer(() => 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");
+  #beforeCache = new BeforeCacheReset(() => this.#returnLeases());
+  /**
+   * 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.
+   */
+  #handledEvents = /* @__PURE__ */ new WeakSet();
   /**
    * Whether `connect()` has run. Scheduling is already inert outside that window
-   * ({@link MicrotaskCoalescer}), so this only gates the Tab stop a picker
-   * present at mount authored for itself.
+   * ({@link MicrotaskCoalescer}), so this gates the Value callbacks Stimulus
+   * delivers ahead of `connect()`.
    */
   #connected = false;
-  #intervals = new SafeInterval();
   /** Index of the visible slide. */
   #index = 0;
-  /** User intent to autoplay (toggled by the play button / focus hard-stop). */
-  #playing = false;
-  /** Pointer is hovering the carousel: a temporary, auto-resuming suspension. */
+  /** 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`. */
   #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;
   /** 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 and starts autoplay when requested.
+   * Renders the initial slide, wires the delegated listeners, and starts autoplay
+   * when requested.
    *
-   * `findIndex` makes the authored pre-selection first-wins when several pickers
-   * are marked; `#render` then writes an explicit value onto every picker.
+   * Every suspension is re-derived from the environment rather than carried, so an
+   * in-page move — which Stimulus delivers to the *same* controller instance as
+   * `disconnect()` then `connect()` — cannot strand the carousel in a suspension
+   * whose lifting event will never arrive. The attribute observer starts after the
+   * first render so the controller's own opening writes are not fed back to it.
    */
   connect() {
-    const preselected = this.pickerTargets.findIndex(
-      (picker) => picker.getAttribute("aria-selected") === "true"
-    );
-    this.#index = preselected === -1 ? 0 : preselected;
-    this.#playing = this.#initialPlaying();
+    this.#pointerPaused = this.element.matches(":hover");
+    this.#focusPaused = this.element.contains(document.activeElement);
+    this.#hiddenPaused = document.visibilityState === "hidden";
+    if (this.autoplayValue && prefersReducedMotion()) this.autoplayValue = false;
+    this.#index = this.#resolveIndex();
     this.#render({ focus: false });
+    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.#observer = new MutationObserver(this.#onAttributeMutations);
+    this.#observer.observe(this.element, {
+      subtree: true,
+      attributes: true,
+      attributeFilter: OBSERVED_ATTRIBUTES
+    });
+  }
+  /** Releases every listener and observer, returns the leased ARIA, drops the suspensions. */
+  disconnect() {
+    this.#connected = false;
+    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.#observer?.disconnect();
+    this.#observer = null;
+    this.#reconcileTargets.cancel();
+    this.#intervals.clearAll();
+    this.#timerId = null;
+    this.#pointerPaused = false;
+    this.#focusPaused = false;
+    this.#hiddenPaused = false;
+    this.#activeSlide = null;
+    this.#returnLeases();
+    this.#beforeCache.deactivate();
   }
   /**
    * Re-establishes the single selected picker when one is added after connect.
@@ -200,7 +347,6 @@ var CarouselController = class extends Controller {
    * the selection.
    */
   pickerTargetConnected(picker) {
-    if (!this.#connected) return;
     picker.tabIndex = -1;
     this.#reconcileTargets.schedule();
   }
@@ -216,74 +362,173 @@ var CarouselController = class extends Controller {
   slideTargetDisconnected() {
     this.#reconcileTargets.schedule();
   }
-  /**
-   * Resolves the starting autoplay intent. The play toggle's `aria-pressed` is the
-   * source of truth **when present**, so a Turbo Drive cache restore / morph that
-   * re-runs `connect()` against existing DOM does not silently resume autoplay the
-   * user had stopped (e.g. by focusing into the carousel). Only when no toggle
-   * carries `aria-pressed` does it fall back to the declarative `autoplay` value.
-   */
-  #initialPlaying() {
-    if (this.hasPlayToggleTarget && this.playToggleTarget.hasAttribute("aria-pressed")) {
-      return this.playToggleTarget.getAttribute("aria-pressed") === "true";
-    }
-    return this.autoplayValue;
+  /** Follows a rotation intent the page changed at runtime. */
+  autoplayValueChanged() {
+    if (this.#connected) this.#syncTimer();
   }
-  /** Clears the autoplay interval so it never fires after teardown. */
-  disconnect() {
-    this.#connected = false;
-    this.#reconcileTargets.cancel();
-    this.#intervals.clearAll();
-    this.#timerId = null;
+  /** Re-arms the live interval at the new delay without reporting a state change. */
+  intervalValueChanged() {
+    if (this.#connected) this.#syncTimer();
   }
-  /** Advances to the next slide. Bound via `data-action`. */
-  next() {
+  /** Re-publishes the step controls and re-evaluates the non-looping end. */
+  loopValueChanged() {
+    if (!this.#connected) return;
+    this.#render({ focus: false });
+    this.#syncTimer();
+  }
+  /** 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 });
   }
-  /** Returns to the previous slide. Bound via `data-action`. */
-  prev() {
+  /** 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 });
   }
   /** Jumps to the slide whose picker was activated (click / Enter / Space). */
   goto(event) {
-    const target = event.currentTarget;
-    const index = this.pickerTargets.indexOf(target);
+    if (event.defaultPrevented) return;
+    this.#markHandled(event);
+    const index = this.#pickerIndexFor(event.currentTarget);
     if (index !== -1) this.#select(index, { focus: false });
   }
-  /** Toggles autoplay on the user's explicit request and syncs the timer. */
-  togglePlay() {
-    this.#playing = !this.#playing;
-    this.#syncTimer();
+  /**
+   * Flips the rotation intent on the user's explicit request.
+   *
+   * The intent is written back 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 autoplay. Hover (`mouseenter`) is a temporary suspension that resumes
-   * on leave; keyboard focus (`focusin`) is a hard stop that turns autoplay off so
-   * it cannot resume without an explicit play (WCAG 2.2.2).
+   * 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) {
-    if (event?.type.startsWith("focus")) {
-      this.#playing = false;
-    } else {
-      this.#pointerPaused = true;
-    }
+    this.#markHandled(event);
+    if (isFocusEvent(event)) this.#focusPaused = true;
+    else this.#pointerPaused = true;
     this.#syncTimer();
   }
   /**
-   * Lifts a hover suspension (`mouseleave`) and resumes autoplay if it is still
-   * on. A `focusout` does nothing here: the focus pause was a hard stop, so the
-   * user must press play to restart.
+   * 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) {
-    if (event?.type.startsWith("focus")) return;
-    this.#pointerPaused = false;
+    this.#markHandled(event);
+    if (isFocusEvent(event)) {
+      if (this.#focusStaysInside(event)) return;
+      this.#focusPaused = false;
+    } else {
+      this.#pointerPaused = false;
+    }
     this.#syncTimer();
   }
-  /** Picker roving: arrows move focus only; Home/End activate first/last slide. */
+  /** 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) {
+      this.#select(index, { focus: false });
+    } else if (hits(this.nextTargets, event.target)) {
+      this.#select(this.#step(1), { focus: false });
+    } else if (hits(this.prevTargets, event.target)) {
+      this.#select(this.#step(-1), { focus: false });
+    } else if (hits(this.playToggleTargets, event.target)) {
+      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.#pointerPaused = true;
+    this.#syncTimer();
+  });
+  /** Pointer exit lifts the suspension. */
+  #onMouseleave = (event) => this.#delegate(event, () => {
+    this.#pointerPaused = false;
+    this.#syncTimer();
+  });
+  /**
+   * 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 this.pickerTargets.findIndex(
+      (picker) => node instanceof Node && (picker === node || picker.contains(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. */
+  #togglePlay() {
+    if (!this.#canAutoplay()) return;
+    this.autoplayValue = !this.autoplayValue;
+    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;
-    const current = this.pickerTargets.indexOf(event.currentTarget);
-    if (current === -1) return;
     const length = this.pickerTargets.length;
     switch (event.key) {
       case "ArrowRight":
@@ -295,24 +540,44 @@ var CarouselController = class extends Controller {
         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;
         event.preventDefault();
-        this.#select(0, { focus: true });
+        this.#roving.setActive(0, { focus: true });
         return;
       case "End":
+        if (hasModifier(event)) return;
         event.preventDefault();
-        this.#select(length - 1, { focus: true });
+        this.#roving.setActive(length - 1, { focus: true });
         return;
     }
   }
-  /** Resolves the index one step away from the current one, honoring `loop`. */
+  /**
+   * 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;
-    if (total === 0) return 0;
     const next = this.#index + 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
@@ -320,73 +585,159 @@ var CarouselController = class extends Controller {
    * (matching the "emit on real change" policy of flash/masonry/bulk-select).
    */
   #select(index, { focus }) {
-    const changed = index !== this.#index;
-    this.#index = index;
+    const target = this.#clampToSlides(index);
+    const changed = target !== this.#index;
+    this.#index = target;
     this.#render({ focus });
     this.#syncTimer();
-    if (changed) this.dispatch("change", { detail: { index, total: this.slideTargets.length } });
+    if (changed) {
+      this.dispatch("change", { detail: { index: target, total: this.slideTargets.length } });
+    }
   }
   /**
-   * Reflects `this.#index` onto slides and pickers (state hooks + roving).
+   * 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) => {
       const active = i === this.#index;
-      slide.setAttribute("data-state", active ? "active" : "inactive");
-      slide.hidden = !active;
+      setAttributeIfChanged(slide, "data-state", active ? "active" : "inactive");
+      if (slide.hidden !== !active) slide.hidden = !active;
+      slide.toggleAttribute("inert", !active);
     });
     const pickerIndex = Math.min(this.#index, this.pickerTargets.length - 1);
     this.pickerTargets.forEach((picker, i) => {
-      picker.setAttribute("aria-selected", i === pickerIndex ? "true" : "false");
+      setAttributeIfChanged(picker, "aria-selected", i === pickerIndex ? "true" : "false");
     });
     this.#roving.setActive(pickerIndex, { focus });
+    this.#syncStepControls();
+  }
+  /** 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;
+    const atEnd = !this.loopValue && this.#index >= last;
+    for (const button of this.prevTargets) {
+      this.#ariaDisabled.write(button, atStart ? "true" : null);
+    }
+    for (const button of this.nextTargets) {
+      this.#ariaDisabled.write(button, atEnd ? "true" : null);
+    }
   }
-  /** Keeps the live active slide when possible and otherwise selects the nearest survivor. */
-  #reconcileTargetSet() {
-    const activeSlide = this.slideTargets.findIndex(
-      (slide) => slide.getAttribute("data-state") === "active"
-    );
-    const selectedPicker = this.pickerTargets.findIndex(
+  /**
+   * 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 = [];
+    slides.forEach((slide, index) => {
+      if (slide.getAttribute("data-state") === "active") claims.push(index);
+    });
+    if (claims.length > 1 && this.#activeSlide !== null) {
+      const live = slides.indexOf(this.#activeSlide);
+      if (claims.includes(live)) return live;
+    }
+    const claimed = claims[0];
+    if (claimed !== void 0) return claimed;
+    const selected = this.pickerTargets.findIndex(
       (picker) => picker.getAttribute("aria-selected") === "true"
     );
-    const lastSlide = this.slideTargets.length - 1;
-    const candidate = activeSlide !== -1 ? activeSlide : selectedPicker !== -1 ? selectedPicker : this.#index;
-    const previous = this.#index;
-    this.#index = lastSlide < 0 ? 0 : Math.min(lastSlide, Math.max(0, candidate));
+    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;
     this.#syncTimer();
-    if (this.#index !== previous) {
-      this.dispatch("reconcile", {
-        detail: { index: this.#index, total: this.slideTargets.length }
-      });
+    if (this.#index !== previousIndex || this.#total !== previousTotal) {
+      this.dispatch("reconcile", { detail: { index: this.#index, total: this.#total } });
     }
   }
+  /** 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. Autoplay should run
-   * only when the user wants it (`playing`), the pointer is not hovering, and more
-   * than one slide exists. Transitions emit `play`/`pause` and keep the toggle's
-   * `aria-pressed` in sync.
+   * 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. A carousel that has run out normalizes the intent to `false`, so
+   * `aria-pressed` never claims a rotation that cannot happen. Crossing the
+   * run/stop boundary emits `play`/`pause`; re-arming at a new `interval` is the
+   * same state and stays silent.
    */
   #syncTimer() {
-    if (!this.loopValue && this.#index >= this.slideTargets.length - 1) {
-      this.#playing = false;
-    }
-    const shouldRun = this.#playing && !this.#pointerPaused && this.slideTargets.length > 1;
-    if (shouldRun && this.#timerId === null) {
-      this.#timerId = this.#intervals.set(() => this.next(), this.intervalValue);
-      this.dispatch("play");
-    } else if (!shouldRun && this.#timerId !== null) {
+    const canAutoplay = this.#canAutoplay();
+    if (this.autoplayValue && !canAutoplay) this.autoplayValue = false;
+    const shouldRun = this.autoplayValue && canAutoplay && !this.#pointerPaused && !this.#focusPaused && !this.#hiddenPaused;
+    const wasRunning = this.#timerId !== null;
+    const interval = this.#interval;
+    if (this.#timerId !== null && (!shouldRun || interval !== this.#timerInterval)) {
       this.#intervals.clear(this.#timerId);
       this.#timerId = null;
-      this.dispatch("pause");
     }
-    if (this.hasPlayToggleTarget) {
-      this.playToggleTarget.setAttribute("aria-pressed", this.#playing ? "true" : "false");
+    if (shouldRun && this.#timerId === null) {
+      this.#timerInterval = interval;
+      this.#timerId = this.#intervals.set(() => this.next(), 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", this.autoplayValue ? "true" : "false");
+      this.#ariaDisabled.write(toggle, canAutoplay ? null : "true");
     }
+    if (this.hasViewportTarget) {
+      this.#ariaLive.write(this.viewportTarget, shouldRun ? "off" : "polite");
+      this.#ariaAtomic.write(this.viewportTarget, "false");
+    }
+  }
+  /** Hands every leased attribute back to the value the consumer authored. */
+  #returnLeases() {
+    this.#ariaDisabled.returnAll();
+    this.#ariaLive.returnAll();
+    this.#ariaAtomic.returnAll();
   }
 };
+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 elements.some(
+    (element) => node instanceof Node && (element === node || element.contains(node))
+  );
+}
+function setAttributeIfChanged(element, name, value) {
+  if (element.getAttribute(name) !== value) element.setAttribute(name, value);
+}
 
 export { CarouselController };
 //# sourceMappingURL=carousel_controller.js.map