stimeo-ui 0.2.0 → 0.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 10b597acf4a7ae2ea8c06755f65219ebcd6cf8620dada3700e196d75991c5544
-  data.tar.gz: d0cabdded21420aa90c4eb4eb439588ab7a0bfeff3d4f9fe83b179197de9acb2
+  metadata.gz: a4f40e999f04533e49b382f7a5165c17b2338e8d520c702c34523843c12eff4c
+  data.tar.gz: 2bd4c18004fd4f92998513dd6a0d51975c7f9fcbe452fcef89477eb3f87edd7b
 SHA512:
-  metadata.gz: 66afe27aa72dcbd893b2e2f76525bfddc6bd55788b15ee531cbad6357342ec0bf4d3c2ada2e3cd3dad7dfa37ff9306356b866c1a6e7bdde2445cb103ef944119
-  data.tar.gz: 616de9b15f081a503d907cb468a3c6ad77a74a6773e9677f3e1b9fb28baad505d5bfff6d588c66b48ed965a5acd275f5d8cc1209d69bac2aa7a89153e143be54
+  metadata.gz: 06ed197e53937fa086971d86c22d66efa4aed0f2accf14000046711be6aa73c3f486671c3912264a4ce5ca7c6da97a9836d7fe79c1d3ce106e1b368e5013f0d1
+  data.tar.gz: e49c3e2ccbc075def36be9d4e926d167fa4714cb66710389ad983ad7725f86e91d525fddfbb809090b4af09bc0cdaed44541466cb57391db53566119613f8863

data/CHANGELOG.md

@@ -7,6 +7,65 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 While the version is `0.x`, the public API (the `stimeo--*` data attributes) may
 change between releases.
 
+## [0.2.1] - 2026-07-26
+
+Patch release from a review of the disclosure and layout components, plus a
+packaging fix. No breaking changes, but `stimeo check` now reports two markup
+requirements that existing pages may need to satisfy.
+
+### Added
+
+- sidebar: `beforeCache` action for Turbo page caching — wire
+  `data-action="turbo:before-cache@document->stimeo--sidebar#beforeCache"` to close
+  an open overlay and release its modal side effects before the snapshot is taken.
+- sidebar, stepper: the `breakpoint` and `index` values now take effect when
+  changed at runtime. An invalid `breakpoint` falls back to 768px.
+- Inspector: `stimeo check` verifies that the tabs `role="tablist"` element has an
+  accessible name.
+
+### Changed
+
+- tabs: the tablist container is now a required `list` target. Add
+  `data-stimeo--tabs-target="list"` to it, or `stimeo check` reports an error.
+  Runtime behavior is unchanged.
+- Inspector: `stimeo check` reports an error when `stimeo--sidebar` markup has no
+  `panel` target.
+
+### Fixed
+
+- package exports: 26 controllers — including sidebar, drawer, collapsible,
+  read-more, alert-dialog, carousel and tree-view — had no build output behind the
+  `./controllers/*` subpath their `package.json` `exports` declares, so
+  `import … from "stimeo-ui/controllers/<name>_controller"` failed to resolve in
+  0.2.0. Every controller in the catalog now ships one.
+- transition, flash, toast, sidebar, drawer, collapsible: animations now wait for
+  every declared transition property and its `transition-delay`, not just the
+  first duration. Multi-property and delayed animations are no longer cut short, a
+  cancelled transition settles immediately, and pseudo-element transitions no
+  longer end the wait early — so `hidden`, events, focus restore and scroll unlock
+  land at the right moment.
+- sidebar, drawer, collapsible: an interrupted close animation no longer leaves the
+  panel stuck open with the focus trap, background `inert` or scroll lock in place.
+- sidebar, drawer, collapsible, read-more, sticky-observer, overflow-indicator:
+  targets swapped in or added after connect (Turbo morph, lazily loaded Frames,
+  Streams) are now reconciled with the current state instead of keeping the value
+  they were rendered with.
+- overflow-indicator, scroll-area: horizontal position is read logically, so the
+  overflow attributes, the `scrollByPage` action, `data-scroll` and
+  `--stimeo-scroll-progress` behave correctly inside `dir="rtl"` containers.
+- overflow-indicator: reaching an edge while a page button has focus no longer
+  drops focus to the page body — the button stays focused and inert via
+  `aria-disabled`, becoming natively `disabled` only once blurred.
+- read-more: the toggle is no longer hidden while it holds keyboard focus when the
+  text starts to fit; overflow is re-checked on blur, on content changes, and when
+  media inside it finishes loading.
+- sticky-observer: `data-stuck="true"` is set only once the sentinel has actually
+  scrolled past the top edge — one that is merely out of view, or inside a hidden
+  container, no longer marks the element as stuck. Negative `offset` values are now
+  accepted.
+- intersection: an element with no layout box (hidden ancestor, collapsed
+  `<details>`) is no longer reported as scrolled past.
+
 ## [0.2.0] - 2026-07-22
 
 First release off the beta channel: `npm install stimeo-ui` now resolves

data/dist/controllers/alert_dialog_controller.js

@@ -0,0 +1,318 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/alert_dialog_controller.ts
+
+// src/utils/escape_layer.ts
+var EscapeLayer = class _EscapeLayer {
+  static #registries = /* @__PURE__ */ new WeakMap();
+  #ownerDocument = null;
+  /** Dismissal callback while active; `null` when inactive. */
+  #onDismiss = null;
+  /** Live predicate deciding whether the layer claims a press; `null` = always. */
+  #claims = null;
+  /**
+   * Activates this layer at the top of its document's Escape stack, installing
+   * the document's shared resolver listener if this is its first layer.
+   * Re-activating an already-active layer moves it to the top.
+   */
+  activate(ownerDocument = document, options) {
+    this.deactivate();
+    let registry = _EscapeLayer.#registries.get(ownerDocument);
+    if (!registry) {
+      registry = _EscapeLayer.#createRegistry();
+      _EscapeLayer.#registries.set(ownerDocument, registry);
+      ownerDocument.addEventListener("keydown", registry.onKeydown);
+    }
+    registry.stack.push(this);
+    this.#ownerDocument = ownerDocument;
+    this.#onDismiss = options.onDismiss;
+    this.#claims = options.claims ?? null;
+  }
+  /**
+   * Removes this layer from its document's Escape stack, uninstalling the
+   * shared listener when the stack empties. Safe to call when inactive.
+   */
+  deactivate() {
+    const ownerDocument = this.#ownerDocument;
+    if (!ownerDocument) return;
+    const registry = _EscapeLayer.#registries.get(ownerDocument);
+    if (registry) {
+      const index = registry.stack.lastIndexOf(this);
+      if (index >= 0) registry.stack.splice(index, 1);
+      if (registry.stack.length === 0) {
+        ownerDocument.removeEventListener("keydown", registry.onKeydown);
+        _EscapeLayer.#registries.delete(ownerDocument);
+      }
+    }
+    this.#ownerDocument = null;
+    this.#onDismiss = null;
+    this.#claims = null;
+  }
+  /**
+   * Whether this active layer would own a press right now: it is the topmost
+   * layer whose {@link EscapeLayerOptions.claims} passes. Exposed for tests
+   * and diagnostics — production dismissal goes through the shared listener.
+   */
+  get ownsEscape() {
+    const ownerDocument = this.#ownerDocument;
+    if (!ownerDocument) return false;
+    const registry = _EscapeLayer.#registries.get(ownerDocument);
+    if (!registry) return false;
+    return _EscapeLayer.#resolveOwner(registry.stack) === this;
+  }
+  /** Builds a document's registry with its shared resolver listener. */
+  static #createRegistry() {
+    const registry = {
+      stack: [],
+      onKeydown: (event) => {
+        if (event.key !== "Escape" || event.defaultPrevented || event.isComposing) return;
+        const owner = _EscapeLayer.#resolveOwner(registry.stack);
+        if (!owner) return;
+        event.preventDefault();
+        owner.#onDismiss?.();
+      }
+    };
+    return registry;
+  }
+  /** The topmost stack layer whose claims predicate passes, or `null`. */
+  static #resolveOwner(stack) {
+    for (let index = stack.length - 1; index >= 0; index--) {
+      const layer = stack[index];
+      if (!layer) continue;
+      if (layer.#claims && !layer.#claims()) continue;
+      return layer;
+    }
+    return null;
+  }
+};
+
+// src/utils/focus_trap.ts
+var FOCUSABLE = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+var FocusTrap = class {
+  /** The element focused before activation, restored on deactivation. */
+  #previouslyFocused = null;
+  /** The body's inline `overflow` before locking, restored on deactivation. */
+  #previousBodyOverflow = "";
+  /** Whether scroll was locked this activation (so it is only restored if applied). */
+  #scrollLocked = false;
+  /** Background siblings made `inert` while active, restored on deactivation. */
+  #inertedSiblings = [];
+  /** Whether the modal side effects are currently applied. */
+  #activeState = false;
+  /** Registers the trap on the shared Escape stack while active (see {@link EscapeLayer}). */
+  #escapeLayer = new EscapeLayer();
+  /** Returns the trapped element; called on every operation for the live target. */
+  #getContainer;
+  /** Closing/focus hooks; see {@link FocusTrapOptions}. */
+  #options;
+  /**
+   * @param getContainer - Returns the trapped element. Called on every operation
+   *   so the live target is always used.
+   * @param options - Closing/focus hooks; see {@link FocusTrapOptions}.
+   */
+  constructor(getContainer, options = {}) {
+    this.#getContainer = getContainer;
+    this.#options = options;
+  }
+  /** Whether the trap is currently active. */
+  get active() {
+    return this.#activeState;
+  }
+  /**
+   * Applies the trap: records the current focus, optionally locks background scroll
+   * and makes background siblings `inert`, listens for `Tab`/`Escape`, and (unless
+   * `autoFocus` is off) moves focus inside. No-ops if already active.
+   */
+  activate() {
+    if (this.#activeState) return;
+    this.#activeState = true;
+    const active = document.activeElement;
+    this.#previouslyFocused = active instanceof HTMLElement && active !== document.body ? active : null;
+    if (this.#flag(this.#options.lockScroll, true)) {
+      this.#previousBodyOverflow = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+      this.#scrollLocked = true;
+    }
+    if (this.#flag(this.#options.isolate, true)) this.#isolateBackground();
+    document.addEventListener("keydown", this.#onKeydown);
+    document.addEventListener("turbo:before-cache", this.#onBeforeCache);
+    const onEscape = this.#options.onEscape;
+    if (onEscape) this.#escapeLayer.activate(document, { onDismiss: () => onEscape() });
+    if (this.#flag(this.#options.autoFocus, true)) this.#focusInitial();
+  }
+  /**
+   * Reverts every side effect applied by {@link activate}. No-ops if inactive, so
+   * a controller can call it defensively from both `close()` and `disconnect()`.
+   *
+   * @param restoreFocus - Move focus back to the opener (default `true`). Pass
+   *   `false` on teardown (`disconnect`), where yanking focus is undesirable.
+   */
+  deactivate({ restoreFocus = true } = {}) {
+    if (!this.#activeState) return;
+    this.#activeState = false;
+    this.#escapeLayer.deactivate();
+    document.removeEventListener("keydown", this.#onKeydown);
+    document.removeEventListener("turbo:before-cache", this.#onBeforeCache);
+    if (this.#scrollLocked) {
+      document.body.style.overflow = this.#previousBodyOverflow;
+      this.#scrollLocked = false;
+    }
+    this.#releaseBackground();
+    if (restoreFocus) {
+      const target = this.#previouslyFocused ?? this.#options.fallbackFocus?.() ?? null;
+      target?.focus();
+    }
+  }
+  /** Resolves a boolean-or-getter option, defaulting when it was not provided. */
+  #flag(option, fallback) {
+    if (option === void 0) return fallback;
+    return typeof option === "function" ? option() : option;
+  }
+  /**
+   * Reverts the side effects just before Turbo caches the page snapshot, so an
+   * overlay left open does not bake the scroll lock into `body[style]` — a
+   * restored page would feed that locked value back into {@link activate} as the
+   * baseline, and closing would then never unlock the page. Markup state stays
+   * untouched (restore-open designs reopen against a clean baseline), and focus
+   * is left alone mid-navigation. The listener lives only while active.
+   */
+  #onBeforeCache = () => {
+    this.deactivate({ restoreFocus: false });
+  };
+  /**
+   * Handles `Tab` (focus trap) while active. `Escape` dismissal is owned by the
+   * shared {@link EscapeLayer} resolver, so Tab trapping stays independent of
+   * which layer currently owns Escape.
+   */
+  #onKeydown = (event) => {
+    if (event.key === "Tab") this.#trapTab(event);
+  };
+  /** Keeps `Tab` focus cycling within the container's focusable elements. */
+  #trapTab(event) {
+    const focusable = this.#focusableElements();
+    if (focusable.length === 0) {
+      event.preventDefault();
+      return;
+    }
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    const active = document.activeElement;
+    if (!(active instanceof Node) || !this.#getContainer().contains(active)) {
+      event.preventDefault();
+      first?.focus();
+      return;
+    }
+    if (event.shiftKey && active === first) {
+      event.preventDefault();
+      last?.focus();
+    } else if (!event.shiftKey && active === last) {
+      event.preventDefault();
+      first?.focus();
+    }
+  }
+  /**
+   * Marks every element outside the container's subtree as `inert` so background
+   * content cannot be focused or reached by assistive technology, honoring the
+   * `aria-modal="true"` contract. An element that was *already* `inert` is left
+   * untracked so `#releaseBackground` does not wrongly clear it.
+   */
+  #isolateBackground() {
+    const container = this.#getContainer();
+    this.#inertedSiblings = [];
+    for (const sibling of Array.from(document.body.children)) {
+      if (!(sibling instanceof HTMLElement)) continue;
+      if (sibling.contains(container) || sibling.inert) continue;
+      sibling.inert = true;
+      this.#inertedSiblings.push(sibling);
+    }
+  }
+  /** Reverts the `inert` flags applied by `#isolateBackground`. */
+  #releaseBackground() {
+    for (const sibling of this.#inertedSiblings) {
+      sibling.inert = false;
+    }
+    this.#inertedSiblings = [];
+  }
+  /** Moves focus to the initial target, the first focusable, or the container. */
+  #focusInitial() {
+    const preferred = this.#options.initialFocus?.();
+    if (preferred) {
+      preferred.focus();
+      return;
+    }
+    const focusable = this.#focusableElements();
+    if (focusable[0]) {
+      focusable[0].focus();
+      return;
+    }
+    const container = this.#getContainer();
+    container.tabIndex = -1;
+    container.focus();
+  }
+  /** Collects the container's currently focusable descendants in DOM order. */
+  #focusableElements() {
+    return Array.from(this.#getContainer().querySelectorAll(FOCUSABLE)).filter(
+      (el) => !el.hidden
+    );
+  }
+};
+
+// src/controllers/alert_dialog_controller.ts
+var AlertDialogController = class extends Controller {
+  static targets = ["trigger", "dialog", "initialFocus"];
+  static actions = ["cancel", "confirm", "open"];
+  static events = ["cancel", "confirm"];
+  /**
+   * Owns the modal side effects. Escape is routed through {@link cancel} so it
+   * emits the same event as the cancel button (tagged `"escape"`); focus falls
+   * back to the trigger when nothing was focused before opening.
+   */
+  #trap = new FocusTrap(() => this.dialogTarget, {
+    onEscape: () => this.#requestCancel("escape"),
+    initialFocus: () => this.hasInitialFocusTarget ? this.initialFocusTarget : null,
+    fallbackFocus: () => this.hasTriggerTarget ? this.triggerTarget : null
+  });
+  /** Starts closed (idempotently reflects the closed state on the markup). */
+  connect() {
+    if (this.hasDialogTarget) this.dialogTarget.hidden = true;
+  }
+  /** Reverts the modal side effects if torn down while open (Turbo navigation). */
+  disconnect() {
+    this.#trap.deactivate({ restoreFocus: false });
+  }
+  /** Opens the dialog, traps focus, and locks background scroll. */
+  open() {
+    if (!this.hasDialogTarget || this.#isOpen) return;
+    this.dialogTarget.hidden = false;
+    this.#trap.activate();
+  }
+  /** Confirms: closes and dispatches `confirm`. Bound via `data-action`. */
+  confirm() {
+    if (!this.#isOpen) return;
+    this.dispatch("confirm");
+    this.#closeDialog();
+  }
+  /** Cancels (user action): closes and dispatches `cancel` with `reason: "user"`. */
+  cancel() {
+    this.#requestCancel("user");
+  }
+  /** Shared cancel path used by both the cancel action and the Escape key. */
+  #requestCancel(reason) {
+    if (!this.#isOpen) return;
+    this.dispatch("cancel", { detail: { reason } });
+    this.#closeDialog();
+  }
+  /** Hides the dialog and reverts the modal side effects (restoring focus). */
+  #closeDialog() {
+    this.dialogTarget.hidden = true;
+    this.#trap.deactivate();
+  }
+  /** Whether the dialog is currently visible. */
+  get #isOpen() {
+    return this.hasDialogTarget && !this.dialogTarget.hidden;
+  }
+};
+
+export { AlertDialogController };
+//# sourceMappingURL=alert_dialog_controller.js.map
+//# sourceMappingURL=alert_dialog_controller.js.map

data/dist/controllers/carousel_controller.js

@@ -0,0 +1,272 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/carousel_controller.ts
+
+// 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.
+   */
+  setActive(index, { focus = false } = {}) {
+    const items = this.#getItems();
+    items.forEach((item, i) => {
+      item.tabIndex = i === index ? 0 : -1;
+    });
+    if (focus) items[index]?.focus();
+  }
+};
+function rovingMove(current, length, delta, wrap) {
+  if (length === 0) return -1;
+  const next = current + delta;
+  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);
+    return id;
+  }
+  schedule(callback, delay) {
+    return window.setInterval(callback, delay);
+  }
+  cancel(id) {
+    window.clearInterval(id);
+  }
+};
+
+// src/controllers/carousel_controller.ts
+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 },
+    loop: { type: Boolean, default: true }
+  };
+  static actions = [
+    "goto",
+    "next",
+    "onPickerKeydown",
+    "pause",
+    "prev",
+    "resume",
+    "togglePlay"
+  ];
+  static events = ["change", "pause", "play"];
+  #roving = new RovingTabindex(() => this.pickerTargets);
+  #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. */
+  #pointerPaused = false;
+  /** Id of the live autoplay interval, or null when stopped. */
+  #timerId = null;
+  /** Renders the initial slide and starts autoplay when requested. */
+  connect() {
+    const preselected = this.pickerTargets.findIndex(
+      (picker) => picker.getAttribute("aria-selected") === "true"
+    );
+    this.#index = preselected === -1 ? 0 : preselected;
+    this.#playing = this.#initialPlaying();
+    this.#render({ focus: false });
+    this.#syncTimer();
+  }
+  /**
+   * 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;
+  }
+  /** Clears the autoplay interval so it never fires after teardown. */
+  disconnect() {
+    this.#intervals.clearAll();
+    this.#timerId = null;
+  }
+  /** Advances to the next slide. Bound via `data-action`. */
+  next() {
+    this.#select(this.#step(1), { focus: false });
+  }
+  /** Returns to the previous slide. Bound via `data-action`. */
+  prev() {
+    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 (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();
+  }
+  /**
+   * 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).
+   */
+  pause(event) {
+    if (event?.type.startsWith("focus")) {
+      this.#playing = false;
+    } 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.
+   */
+  resume(event) {
+    if (event?.type.startsWith("focus")) return;
+    this.#pointerPaused = false;
+    this.#syncTimer();
+  }
+  /** Picker roving: arrows move focus only; Home/End activate first/last slide. */
+  onPickerKeydown(event) {
+    const current = this.pickerTargets.indexOf(event.currentTarget);
+    if (current === -1) return;
+    const length = this.pickerTargets.length;
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        event.preventDefault();
+        this.#roving.setActive(rovingMove(current, length, 1), { focus: true });
+        return;
+      case "ArrowLeft":
+      case "ArrowUp":
+        event.preventDefault();
+        this.#roving.setActive(rovingMove(current, length, -1), { focus: true });
+        return;
+      case "Home":
+        event.preventDefault();
+        this.#select(0, { focus: true });
+        return;
+      case "End":
+        event.preventDefault();
+        this.#select(length - 1, { focus: true });
+        return;
+    }
+  }
+  /** Resolves the index one step away from the current one, honoring `loop`. */
+  #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));
+  }
+  /**
+   * 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
+   * (matching the "emit on real change" policy of flash/masonry/bulk-select).
+   */
+  #select(index, { focus }) {
+    const changed = index !== this.#index;
+    this.#index = index;
+    this.#render({ focus });
+    this.#syncTimer();
+    if (changed) this.dispatch("change", { detail: { index, total: this.slideTargets.length } });
+  }
+  /** Reflects `this.#index` onto slides and pickers (state hooks + roving). */
+  #render({ focus }) {
+    this.slideTargets.forEach((slide, i) => {
+      const active = i === this.#index;
+      slide.setAttribute("data-state", active ? "active" : "inactive");
+      slide.hidden = !active;
+    });
+    this.pickerTargets.forEach((picker, i) => {
+      picker.setAttribute("aria-selected", i === this.#index ? "true" : "false");
+    });
+    this.#roving.setActive(this.#index, { focus });
+  }
+  /**
+   * 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.
+   */
+  #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) {
+      this.#intervals.clear(this.#timerId);
+      this.#timerId = null;
+      this.dispatch("pause");
+    }
+    if (this.hasPlayToggleTarget) {
+      this.playToggleTarget.setAttribute("aria-pressed", this.#playing ? "true" : "false");
+    }
+  }
+};
+
+export { CarouselController };
+//# sourceMappingURL=carousel_controller.js.map
+//# sourceMappingURL=carousel_controller.js.map