@expressivecss/expressive 0.15.0 → 0.17.0

package/dist/js/chunks/chunk-3KF65KGL.mjs

@@ -0,0 +1,209 @@
+import {
+  Component
+} from "./chunk-EB2V4OKL.mjs";
+import {
+  Utils
+} from "./chunk-67UNY7RH.mjs";
+
+// src/ts/components/swipeActions.ts
+var _defaults = {
+  onToggle: null
+};
+var SLOP = 4;
+var FLICK_VELOCITY = 0.5;
+var FLICK_TIMEOUT = 100;
+var flick = (swipe) => Date.now() - swipe.lastT < FLICK_TIMEOUT ? swipe.velocity * swipe.sign : 0;
+var opensOnRelease = (swipe) => {
+  const velocity = flick(swipe);
+  if (Math.abs(velocity) > FLICK_VELOCITY) return velocity > 0;
+  return swipe.reveal > swipe.width / 2;
+};
+var SwipeActions = class extends Component {
+  constructor(el, options) {
+    super(el, options);
+    /** The open row, if any. */
+    this._open = null;
+    /** The touch in progress, while it may still become a swipe or is one. */
+    this._swipe = null;
+    this._onStart = (event) => {
+      if (event.touches.length !== 1) {
+        this._cancel();
+        return;
+      }
+      const row = this._rowFor(Utils.eventTarget(event));
+      if (!row) return;
+      const { clientX: x, clientY: y } = event.touches[0];
+      const width = this._width(row);
+      const base = row === this._open ? width : 0;
+      this._swipe = { row, x, y, sign: this._sign(row), width, base, reveal: base, swiping: false, last: x, lastT: Date.now(), velocity: 0 };
+    };
+    this._onMove = (event) => {
+      const swipe = this._swipe;
+      if (!swipe) return;
+      const { clientX, clientY } = event.touches[0];
+      if (swipe.swiping || this._decide(swipe, clientX - swipe.x, clientY - swipe.y)) this._drag(event, swipe, clientX);
+    };
+    this._onEnd = () => {
+      const swipe = this._swipe;
+      this._swipe = null;
+      if (!swipe?.swiping) return;
+      swipe.row.classList.remove("swiping");
+      this._settle(swipe.row, opensOnRelease(swipe));
+    };
+    this._onCancel = () => this._cancel();
+    this._onClick = (event) => {
+      const target = Utils.eventTarget(event);
+      if (target.closest(".swipe-actions button")) this._closeFrom(target.closest("li"));
+      else if (target.closest("[data-swipe-toggle]")) this._toggle(this._rowFor(target));
+    };
+    this._onKeydown = (event) => {
+      if (event.key !== "Escape") return;
+      this._closeFrom(this._rowFor(Utils.eventTarget(event)));
+    };
+    /** Focus on an action opens its row; focus anywhere outside the open row closes it. */
+    this._onFocusin = (event) => {
+      const target = Utils.eventTarget(event);
+      if (target?.closest(".swipe-actions")) this.open(this._rowFor(target));
+      else this._closeOutside(target);
+    };
+    /** A tap or click outside the open row closes it. */
+    this._onPointerdown = (event) => this._closeOutside(Utils.eventTarget(event));
+    this._rows().forEach((row) => this._toggleFor(row)?.setAttribute("aria-expanded", "false"));
+    const signal = this._events.signal;
+    const doc = el.ownerDocument;
+    el.addEventListener("click", this._onClick, { signal });
+    el.addEventListener("keydown", this._onKeydown, { signal });
+    el.addEventListener("touchstart", this._onStart, { passive: true, signal });
+    el.addEventListener("touchmove", this._onMove, { passive: false, signal });
+    el.addEventListener("touchcancel", this._onCancel, { signal });
+    el.addEventListener("touchend", this._onEnd, { signal });
+    doc.addEventListener("focusin", this._onFocusin, { signal });
+    doc.addEventListener("pointerdown", this._onPointerdown, { signal });
+  }
+  static get defaults() {
+    return _defaults;
+  }
+  /** Opens a row of this list, closing the one that was open. */
+  open(row) {
+    if (!this._isRow(row)) return;
+    this._place(row, this._width(row));
+    if (this._open === row) return;
+    this.close();
+    this._open = row;
+    row.classList.add("swipe-open");
+    this._toggleFor(row)?.setAttribute("aria-expanded", "true");
+    this._fire(row, true);
+  }
+  /** Closes the open row, if there is one. */
+  close() {
+    const row = this._open;
+    if (!row) return;
+    this._open = null;
+    this._shut(row);
+    this._fire(row, false);
+  }
+  destroy() {
+    const rows = [this._swipe?.row, this._open];
+    this._swipe = null;
+    this._open = null;
+    rows.forEach((row) => row && this._shut(row));
+    this._rows().forEach((row) => this._toggleFor(row)?.removeAttribute("aria-expanded"));
+    super.destroy();
+  }
+  _rows() {
+    return [...this.el.querySelectorAll(":scope > li:has(> .swipe-actions)")];
+  }
+  /** Whether `row` is a row of this list with actions. */
+  _isRow(row) {
+    return !!row && row.parentElement === this.el && !!row.querySelector(":scope > .swipe-actions");
+  }
+  _rowFor(target) {
+    const row = target?.closest("li") ?? null;
+    return this._isRow(row) ? row : null;
+  }
+  _toggleFor(row) {
+    return row.querySelector("[data-swipe-toggle]");
+  }
+  _width(row) {
+    return row.querySelector(":scope > .swipe-actions").offsetWidth;
+  }
+  /** -1 when rows open toward the left, 1 when they open toward the right. */
+  _sign(row) {
+    return getComputedStyle(row).direction === "rtl" ? 1 : -1;
+  }
+  /** Slides a row `reveal` pixels open. */
+  _place(row, reveal) {
+    row.style.setProperty("--swipe-offset", `${reveal * this._sign(row)}px`);
+  }
+  /** Puts a row back closed, without telling anyone. */
+  _shut(row) {
+    row.classList.remove("swipe-open", "swiping");
+    row.style.removeProperty("--swipe-offset");
+    this._toggleFor(row)?.setAttribute("aria-expanded", "false");
+  }
+  _fire(row, open) {
+    const detail = { row, open };
+    this._notify("swipetoggle", this.options.onToggle, { args: [detail], detail });
+  }
+  /**
+   * Swipes once the finger moves sideways, or leaves the touch to scrolling
+   * when it moves up or down first. Returns whether it is now a swipe.
+   */
+  _decide(swipe, dx, dy) {
+    if (Math.max(Math.abs(dx), Math.abs(dy)) <= SLOP) return false;
+    swipe.swiping = Math.abs(dx) > Math.abs(dy);
+    if (!swipe.swiping) this._swipe = null;
+    return swipe.swiping;
+  }
+  /** Slides the row with the finger, no farther than its actions reach. */
+  _drag(event, swipe, x) {
+    if (event.cancelable) event.preventDefault();
+    const now = Date.now();
+    if (x !== swipe.last) {
+      swipe.velocity = (x - swipe.last) / Math.max(1, now - swipe.lastT);
+      swipe.last = x;
+      swipe.lastT = now;
+    }
+    swipe.reveal = Math.min(Math.max(swipe.base + (x - swipe.x) * swipe.sign, 0), swipe.width);
+    swipe.row.classList.add("swiping");
+    this._place(swipe.row, swipe.reveal);
+  }
+  /** Leaves a released row open or closed, putting its offset where that state has it. */
+  _settle(row, open) {
+    if (open) this.open(row);
+    else if (row === this._open) this.close();
+    else this._shut(row);
+  }
+  /** Ends a swipe without deciding anything: the row goes back to how it was. */
+  _cancel() {
+    const swipe = this._swipe;
+    this._swipe = null;
+    if (!swipe?.swiping) return;
+    swipe.row.classList.remove("swiping");
+    this._settle(swipe.row, swipe.row === this._open);
+  }
+  /** open() ignores anything that is not a row of this list. */
+  _toggle(row) {
+    if (row === this._open) this.close();
+    else this.open(row);
+  }
+  /** Closes the open row from inside it, moving focus off an action so it does not stay on a hidden button. */
+  _closeFrom(row) {
+    if (!row || row !== this._open) return;
+    const focused = row.querySelector(":scope > .swipe-actions").contains(row.ownerDocument.activeElement);
+    this.close();
+    if (focused) this._focusToggle(row);
+  }
+  _focusToggle(row) {
+    this._toggleFor(row)?.focus();
+  }
+  _closeOutside(target) {
+    if (this._open && !this._open.contains(target)) this.close();
+  }
+};
+SwipeActions.key = "Expressive_SwipeActions";
+
+export {
+  SwipeActions
+};
+//# sourceMappingURL=chunk-3KF65KGL.mjs.map

package/dist/js/chunks/chunk-3KF65KGL.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/swipeActions.ts"],
+  "sourcesContent": ["import { Component, BaseOptions } from '../core/component';\nimport { Utils } from '../core/utils';\n\n/** What `expressive:swipetoggle` carries, and what `onToggle` receives. */\nexport interface SwipeActionsDetail {\n  /** The row that opened or closed. */\n  row: HTMLElement;\n  /** Whether it is now open. */\n  open: boolean;\n}\n\nexport interface SwipeActionsOptions extends BaseOptions {\n  /**\n   * Called when a row opens or closes, with the event's detail.\n   * @default null\n   */\n  onToggle: ((detail: SwipeActionsDetail) => void) | null;\n}\n\nconst _defaults: SwipeActionsOptions = {\n  onToggle: null\n};\n\n/** Past this the finger was moving, not resting. Hand jitter, in pixels. */\nconst SLOP = 4;\n/** Past this a flick opens or closes whatever the distance, in pixels per millisecond. The sheets use the same. */\nconst FLICK_VELOCITY = 0.5;\n/** Ignore a flick after the finger has rested for this many milliseconds. */\nconst FLICK_TIMEOUT = 100;\n\n/** One touch on a row, from the finger going down until it lifts. */\ninterface Swipe {\n  row: HTMLElement;\n  x: number;\n  y: number;\n  /** -1 when the row opens toward the left, 1 toward the right (right-to-left pages). */\n  sign: 1 | -1;\n  /** How far the actions reach, which is as far as the row slides. */\n  width: number;\n  /** How far open the row was when the finger went down, 0 to `width`. */\n  base: number;\n  /** How far open it is now. */\n  reveal: number;\n  /** Set once the finger moves sideways first; until then the touch may still scroll. */\n  swiping: boolean;\n  last: number;\n  lastT: number;\n  velocity: number;\n}\n\n/** The pointer's velocity toward opening at release, or 0 once it has rested past the flick window. */\nconst flick = (swipe: Swipe) => (Date.now() - swipe.lastT < FLICK_TIMEOUT ? swipe.velocity * swipe.sign : 0);\n\n/** Whether a released swipe leaves the row open: a flick decides, else whether it is past halfway. */\nconst opensOnRelease = (swipe: Swipe) => {\n  const velocity = flick(swipe);\n  if (Math.abs(velocity) > FLICK_VELOCITY) return velocity > 0;\n  return swipe.reveal > swipe.width / 2;\n};\n\n/**\n * Swipe actions. In a `.list.swipeable`, a touch swipe toward a row's inline\n * start slides the row and reveals its `.swipe-actions` group at the inline\n * end. A swipe only reveals; nothing runs until a person presses an action.\n * The row's `[data-swipe-toggle]` button opens and closes it without a\n * swipe, and focus on an action opens its row, so keyboard and single-pointer\n * users reach the same actions. One row in the list is open at a time.\n *\n * Touch events rather than pointer events, as in PullToRefresh: a pointer\n * drag the browser takes for a pan ends in `pointercancel`. A mouse never\n * fires touch events, so it never swipes.\n */\nexport class SwipeActions extends Component<SwipeActionsOptions> {\n  static key = 'Expressive_SwipeActions';\n  /** The open row, if any. */\n  private _open: HTMLElement | null = null;\n  /** The touch in progress, while it may still become a swipe or is one. */\n  private _swipe: Swipe | null = null;\n\n  constructor(el: HTMLElement, options: Partial<SwipeActionsOptions>) {\n    super(el, options);\n    this._rows().forEach((row) => this._toggleFor(row)?.setAttribute('aria-expanded', 'false'));\n    const signal = this._events.signal;\n    const doc = el.ownerDocument;\n    el.addEventListener('click', this._onClick, { signal });\n    el.addEventListener('keydown', this._onKeydown, { signal });\n    el.addEventListener('touchstart', this._onStart, { passive: true, signal });\n    // Not passive: a swipe cancels the move so nothing scrolls sideways under it.\n    el.addEventListener('touchmove', this._onMove, { passive: false, signal });\n    el.addEventListener('touchcancel', this._onCancel, { signal });\n    el.addEventListener('touchend', this._onEnd, { signal });\n    doc.addEventListener('focusin', this._onFocusin, { signal });\n    doc.addEventListener('pointerdown', this._onPointerdown, { signal });\n  }\n\n  static get defaults(): SwipeActionsOptions {\n    return _defaults;\n  }\n\n  /** Opens a row of this list, closing the one that was open. */\n  open(row: HTMLElement) {\n    if (!this._isRow(row)) return;\n    // Also puts back a row a swipe left part-way open.\n    this._place(row, this._width(row));\n    if (this._open === row) return;\n    this.close();\n    this._open = row;\n    row.classList.add('swipe-open');\n    this._toggleFor(row)?.setAttribute('aria-expanded', 'true');\n    this._fire(row, true);\n  }\n\n  /** Closes the open row, if there is one. */\n  close() {\n    const row = this._open;\n    if (!row) return;\n    this._open = null;\n    this._shut(row);\n    this._fire(row, false);\n  }\n\n  destroy() {\n    // A row part-way through a swipe goes back too, not only the open one.\n    const rows = [this._swipe?.row, this._open];\n    this._swipe = null;\n    this._open = null;\n    rows.forEach((row) => row && this._shut(row));\n    this._rows().forEach((row) => this._toggleFor(row)?.removeAttribute('aria-expanded'));\n    super.destroy();\n  }\n\n  private _rows() {\n    return [...this.el.querySelectorAll<HTMLElement>(':scope > li:has(> .swipe-actions)')];\n  }\n\n  /** Whether `row` is a row of this list with actions. */\n  private _isRow(row: Element | null): row is HTMLElement {\n    return !!row && row.parentElement === this.el && !!row.querySelector(':scope > .swipe-actions');\n  }\n\n  private _rowFor(target: Element | null) {\n    const row = target?.closest('li') ?? null;\n    return this._isRow(row) ? row : null;\n  }\n\n  private _toggleFor(row: HTMLElement) {\n    return row.querySelector<HTMLElement>('[data-swipe-toggle]');\n  }\n\n  private _width(row: HTMLElement) {\n    return row.querySelector<HTMLElement>(':scope > .swipe-actions')!.offsetWidth;\n  }\n\n  /** -1 when rows open toward the left, 1 when they open toward the right. */\n  private _sign(row: HTMLElement): 1 | -1 {\n    return getComputedStyle(row).direction === 'rtl' ? 1 : -1;\n  }\n\n  /** Slides a row `reveal` pixels open. */\n  private _place(row: HTMLElement, reveal: number) {\n    row.style.setProperty('--swipe-offset', `${reveal * this._sign(row)}px`);\n  }\n\n  /** Puts a row back closed, without telling anyone. */\n  private _shut(row: HTMLElement) {\n    row.classList.remove('swipe-open', 'swiping');\n    row.style.removeProperty('--swipe-offset');\n    this._toggleFor(row)?.setAttribute('aria-expanded', 'false');\n  }\n\n  private _fire(row: HTMLElement, open: boolean) {\n    const detail: SwipeActionsDetail = { row, open };\n    this._notify('swipetoggle', this.options.onToggle, { args: [detail], detail });\n  }\n\n  private _onStart = (event: TouchEvent) => {\n    // A second finger is a pinch or a mistake, not a swipe.\n    if (event.touches.length !== 1) {\n      this._cancel();\n      return;\n    }\n    const row = this._rowFor(Utils.eventTarget(event));\n    if (!row) return;\n    const { clientX: x, clientY: y } = event.touches[0];\n    const width = this._width(row);\n    const base = row === this._open ? width : 0;\n    this._swipe = { row, x, y, sign: this._sign(row), width, base, reveal: base, swiping: false, last: x, lastT: Date.now(), velocity: 0 };\n  };\n\n  private _onMove = (event: TouchEvent) => {\n    const swipe = this._swipe;\n    if (!swipe) return;\n    const { clientX, clientY } = event.touches[0];\n    if (swipe.swiping || this._decide(swipe, clientX - swipe.x, clientY - swipe.y)) this._drag(event, swipe, clientX);\n  };\n\n  /**\n   * Swipes once the finger moves sideways, or leaves the touch to scrolling\n   * when it moves up or down first. Returns whether it is now a swipe.\n   */\n  private _decide(swipe: Swipe, dx: number, dy: number) {\n    if (Math.max(Math.abs(dx), Math.abs(dy)) <= SLOP) return false;\n    swipe.swiping = Math.abs(dx) > Math.abs(dy);\n    if (!swipe.swiping) this._swipe = null;\n    return swipe.swiping;\n  }\n\n  /** Slides the row with the finger, no farther than its actions reach. */\n  private _drag(event: TouchEvent, swipe: Swipe, x: number) {\n    if (event.cancelable) event.preventDefault();\n    const now = Date.now();\n    if (x !== swipe.last) {\n      swipe.velocity = (x - swipe.last) / Math.max(1, now - swipe.lastT);\n      swipe.last = x;\n      swipe.lastT = now;\n    }\n    swipe.reveal = Math.min(Math.max(swipe.base + (x - swipe.x) * swipe.sign, 0), swipe.width);\n    swipe.row.classList.add('swiping');\n    this._place(swipe.row, swipe.reveal);\n  }\n\n  private _onEnd = () => {\n    const swipe = this._swipe;\n    this._swipe = null;\n    if (!swipe?.swiping) return;\n    swipe.row.classList.remove('swiping');\n    this._settle(swipe.row, opensOnRelease(swipe));\n  };\n\n  /** Leaves a released row open or closed, putting its offset where that state has it. */\n  private _settle(row: HTMLElement, open: boolean) {\n    if (open) this.open(row);\n    else if (row === this._open) this.close();\n    else this._shut(row);\n  }\n\n  private _onCancel = () => this._cancel();\n\n  /** Ends a swipe without deciding anything: the row goes back to how it was. */\n  private _cancel() {\n    const swipe = this._swipe;\n    this._swipe = null;\n    if (!swipe?.swiping) return;\n    swipe.row.classList.remove('swiping');\n    this._settle(swipe.row, swipe.row === this._open);\n  }\n\n  private _onClick = (event: MouseEvent) => {\n    const target = Utils.eventTarget(event)!;\n    // Not _rowFor(): an action may already have removed its row from the list.\n    if (target.closest('.swipe-actions button')) this._closeFrom(target.closest('li'));\n    else if (target.closest('[data-swipe-toggle]')) this._toggle(this._rowFor(target));\n  };\n\n  /** open() ignores anything that is not a row of this list. */\n  private _toggle(row: HTMLElement | null) {\n    if (row === this._open) this.close();\n    else this.open(row as HTMLElement);\n  }\n\n  /** Closes the open row from inside it, moving focus off an action so it does not stay on a hidden button. */\n  private _closeFrom(row: HTMLElement | null) {\n    if (!row || row !== this._open) return;\n    // A row an action removed holds no focus, so it is left alone.\n    const focused = row.querySelector(':scope > .swipe-actions')!.contains(row.ownerDocument.activeElement);\n    this.close();\n    if (focused) this._focusToggle(row);\n  }\n\n  private _focusToggle(row: HTMLElement) {\n    this._toggleFor(row)?.focus();\n  }\n\n  private _onKeydown = (event: KeyboardEvent) => {\n    if (event.key !== 'Escape') return;\n    this._closeFrom(this._rowFor(Utils.eventTarget(event)));\n  };\n\n  /** Focus on an action opens its row; focus anywhere outside the open row closes it. */\n  private _onFocusin = (event: FocusEvent) => {\n    const target = Utils.eventTarget(event);\n    // open() ignores anything that is not a row of this list.\n    if (target?.closest('.swipe-actions')) this.open(this._rowFor(target)!);\n    else this._closeOutside(target);\n  };\n\n  /** A tap or click outside the open row closes it. */\n  private _onPointerdown = (event: PointerEvent) => this._closeOutside(Utils.eventTarget(event));\n\n  private _closeOutside(target: Element | null) {\n    if (this._open && !this._open.contains(target)) this.close();\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/js/chunks/{chunk-KVJAVDBC.mjs → chunk-3KLZRQZI.mjs}

@@ -1,14 +1,14 @@
-import {
-  Utils
-} from "./chunk-M372EDXD.mjs";
 import {
   Component
-} from "./chunk-PD6HYHAE.mjs";
+} from "./chunk-EB2V4OKL.mjs";
+import {
+  Utils,
+  restoreAttribute
+} from "./chunk-67UNY7RH.mjs";
 
 // src/ts/components/carousel.ts
 var _defaults = {
   duration: 200,
-  fullWidth: false,
   indicators: false,
   noWrap: false,
   interval: 0,
@@ -23,9 +23,9 @@ var _defaults = {
   }
 };
 var naturallyFocusable = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
-var _Carousel = class _Carousel extends Component {
+var Carousel = class extends Component {
   constructor(el, options) {
-    super(el, options, _Carousel);
+    super(el, options);
     this.center = 0;
     this._ownIndicators = false;
     this._trackEl = null;
@@ -36,7 +36,6 @@ var _Carousel = class _Carousel extends Component {
     this._vertical = false;
     this._resizeObserver = null;
     this._resizeTimeout = null;
-    this._usesWindowResize = false;
     this._dragPointerId = null;
     this._dragStartX = 0;
     this._dragStartY = 0;
@@ -72,10 +71,16 @@ var _Carousel = class _Carousel extends Component {
     this._handleAutoAdvanceState = (e) => {
       if (e.type === "mouseenter") this._hovered = true;
       else if (e.type === "mouseleave") this._hovered = false;
-      else if (e.type === "focusin") this._focused = true;
+      else if (e.type === "focusin") this._focused = Utils.eventTarget(e).matches(":focus-visible");
       else if (e.type === "focusout") this._focused = this.el.contains(e.relatedTarget);
       this._syncAutoAdvance();
     };
+    // A key pressed in here means keyboard use, with no new focus event when the
+    // focus began with a mouse click or moves within a shadow root.
+    this._handleAutoAdvanceKey = () => {
+      this._focused = true;
+      this._syncAutoAdvance();
+    };
     this._handleMotionChange = () => {
       this._syncAutoAdvance();
       if (this._motion.matches) this._scrollToIndex(this.center, false);
@@ -151,6 +156,7 @@ var _Carousel = class _Carousel extends Component {
         this._suppressClick = false;
       }, 0);
       this._syncActive(this._nearestIndex(), true);
+      this.dragged = false;
     };
     this._handleTrackClick = (e) => {
       if (!this._suppressClick) return;
@@ -175,11 +181,10 @@ var _Carousel = class _Carousel extends Component {
       this._cycleTo(index);
     };
     this._handleKeydown = (e) => {
-      const target = e.target;
-      if (target.isContentEditable || target.closest("input, textarea, select")) return;
+      if (this._keyBelongsElsewhere(e)) return;
       const rtl = getComputedStyle(this._scroller).direction === "rtl";
-      const forward = this._vertical ? e.key === "ArrowDown" : e.key === (rtl ? Utils.keys.ARROW_LEFT : Utils.keys.ARROW_RIGHT);
-      const backward = this._vertical ? e.key === "ArrowUp" : e.key === (rtl ? Utils.keys.ARROW_RIGHT : Utils.keys.ARROW_LEFT);
+      const forward = this._vertical ? e.key === "ArrowDown" : e.key === (rtl ? "ArrowLeft" : "ArrowRight");
+      const backward = this._vertical ? e.key === "ArrowUp" : e.key === (rtl ? "ArrowRight" : "ArrowLeft");
       if (e.key === "Home") {
         e.preventDefault();
         this.set(0);
@@ -228,18 +233,6 @@ var _Carousel = class _Carousel extends Component {
         this._finishScroll();
       }
     };
-    this.el["Expressive_Carousel"] = this;
-    this.options = {
-      ..._Carousel.defaults,
-      ...options
-    };
-    if (options?.i18n) {
-      this.options.i18n = { ..._Carousel.defaults.i18n, ...options.i18n };
-    }
-    if (this.options.fullWidth || this.el.classList.contains("flat")) {
-      this.el.classList.add("flat");
-      this.options.fullWidth = true;
-    }
     this._vertical = this.el.classList.contains("full-screen");
     this.pressed = false;
     this.dragged = false;
@@ -251,7 +244,9 @@ var _Carousel = class _Carousel extends Component {
     this.images.forEach((item) => {
       this._itemA11yOriginal.set(item, {
         ariaHidden: item.getAttribute("aria-hidden"),
-        tabIndex: item.getAttribute("tabindex")
+        tabIndex: item.getAttribute("tabindex"),
+        active: item.classList.contains("active"),
+        itemClass: item.classList.contains("carousel-item")
       });
       if (item.hasAttribute("data-carousel-size")) this._authoredItemSizes.add(item);
     });
@@ -288,15 +283,9 @@ var _Carousel = class _Carousel extends Component {
   static get defaults() {
     return _defaults;
   }
-  static init(els, options = {}) {
-    return super.init(els, options, _Carousel);
-  }
-  static getInstance(el) {
-    return el["Expressive_Carousel"];
-  }
   destroy() {
     if (this._started) this._teardown();
-    this.el["Expressive_Carousel"] = void 0;
+    super.destroy();
   }
   _collectItems() {
     const explicit = Array.from(this.el.children).filter(
@@ -305,7 +294,7 @@ var _Carousel = class _Carousel extends Component {
     if (explicit.length) return explicit;
     return Array.from(this.el.children).filter((el) => {
       if (!(el instanceof HTMLElement)) return false;
-      if (el.classList.contains("indicators") || el.classList.contains("carousel-fixed-item")) {
+      if (el.classList.contains("indicators")) {
         return false;
       }
       return el.tagName !== "NAV";
@@ -360,75 +349,39 @@ var _Carousel = class _Carousel extends Component {
       this._indicators.appendChild(button);
     });
     if (this._ownIndicators) this.el.appendChild(this._indicators);
-    this.el.querySelector(".carousel-fixed-item")?.classList.add("with-indicators");
   }
   _setupEventHandlers() {
-    this.el.addEventListener("keydown", this._handleKeydown);
-    this._motion.addEventListener("change", this._handleMotionChange);
+    const { signal } = this._events;
+    this.el.addEventListener("keydown", this._handleKeydown, { signal });
+    this._motion.addEventListener("change", this._handleMotionChange, { signal });
     if (this._autoAdvances) {
-      this.el.addEventListener("mouseenter", this._handleAutoAdvanceState);
-      this.el.addEventListener("mouseleave", this._handleAutoAdvanceState);
-      this.el.addEventListener("focusin", this._handleAutoAdvanceState);
-      this.el.addEventListener("focusout", this._handleAutoAdvanceState);
-      document.addEventListener("visibilitychange", this._handleAutoAdvanceState);
+      this.el.addEventListener("mouseenter", this._handleAutoAdvanceState, { signal });
+      this.el.addEventListener("mouseleave", this._handleAutoAdvanceState, { signal });
+      this.el.addEventListener("focusin", this._handleAutoAdvanceState, { signal });
+      this.el.addEventListener("focusout", this._handleAutoAdvanceState, { signal });
+      this.el.addEventListener("keydown", this._handleAutoAdvanceKey, { signal });
+      document.addEventListener("visibilitychange", this._handleAutoAdvanceState, { signal });
     }
     if (this.showIndicators && this._indicators) {
-      this._indicators.addEventListener("click", this._handleIndicatorClick);
-    }
-    if (typeof ResizeObserver !== "undefined") {
-      this._resizeObserver = new ResizeObserver(() => this._handleThrottledResize());
-      this._resizeObserver.observe(this.el);
-    }
-    this._usesWindowResize = !this._resizeObserver || this.el.classList.contains("full-screen");
-    if (this._usesWindowResize) {
-      _Carousel._live.add(this);
-      if (!_Carousel._resizeListening) {
-        window.addEventListener("resize", _Carousel._onResize, {
-          passive: true
-        });
-        _Carousel._resizeListening = true;
-      }
-    }
-    this._scroller.addEventListener("scroll", this._handleTrackScroll, {
-      passive: true
-    });
-    this._scroller.addEventListener("pointerdown", this._handleTrackPointerDown);
-    this._scroller.addEventListener("wheel", this._handleNativeScroll, { passive: true });
-    this._scroller.addEventListener("click", this._handleTrackClick, true);
-    this._scroller.addEventListener("dragstart", this._handleTrackDragStart);
-    this._scroller.addEventListener("transitionend", this._handleItemResize);
-  }
-  _removeEventHandlers() {
-    this.el.removeEventListener("keydown", this._handleKeydown);
-    this._motion.removeEventListener("change", this._handleMotionChange);
-    this.el.removeEventListener("mouseenter", this._handleAutoAdvanceState);
-    this.el.removeEventListener("mouseleave", this._handleAutoAdvanceState);
-    this.el.removeEventListener("focusin", this._handleAutoAdvanceState);
-    this.el.removeEventListener("focusout", this._handleAutoAdvanceState);
-    document.removeEventListener("visibilitychange", this._handleAutoAdvanceState);
-    if (this._indicators) {
-      this._indicators.removeEventListener("click", this._handleIndicatorClick);
+      this._indicators.addEventListener("click", this._handleIndicatorClick, { signal });
     }
-    this._scroller.removeEventListener("scroll", this._handleTrackScroll);
-    this._scroller.removeEventListener("pointerdown", this._handleTrackPointerDown);
-    this._scroller.removeEventListener("wheel", this._handleNativeScroll);
-    this._setDragListeners(false);
-    this._scroller.removeEventListener("click", this._handleTrackClick, true);
-    this._scroller.removeEventListener("dragstart", this._handleTrackDragStart);
-    this._scroller.removeEventListener("transitionend", this._handleItemResize);
-    this._resizeObserver?.disconnect();
-    this._resizeObserver = null;
-    if (this._usesWindowResize) {
-      _Carousel._live.delete(this);
-      if (_Carousel._live.size === 0 && _Carousel._resizeListening) {
-        window.removeEventListener("resize", _Carousel._onResize);
-        _Carousel._resizeListening = false;
-      }
+    this._resizeObserver = new ResizeObserver(() => this._handleThrottledResize());
+    this._resizeObserver.observe(this.el);
+    if (this.el.classList.contains("full-screen")) {
+      window.addEventListener("resize", this._handleThrottledResize, { passive: true, signal });
     }
+    this._scroller.addEventListener("scroll", this._handleTrackScroll, { passive: true, signal });
+    this._scroller.addEventListener("pointerdown", this._handleTrackPointerDown, { signal });
+    this._scroller.addEventListener("wheel", this._handleNativeScroll, { passive: true, signal });
+    this._scroller.addEventListener("click", this._handleTrackClick, { capture: true, signal });
+    this._scroller.addEventListener("dragstart", this._handleTrackDragStart, { signal });
+    this._scroller.addEventListener("transitionend", this._handleItemResize, { signal });
   }
   _teardown() {
     this._started = false;
-    this._removeEventHandlers();
+    this._events.abort();
+    this._resizeObserver?.disconnect();
+    this._resizeObserver = null;
     this._finishScroll();
     this._autoAdvances = false;
     this._syncAutoAdvance();
@@ -443,12 +396,9 @@ var _Carousel = class _Carousel extends Component {
       if (this._generatedItemLabels.has(el)) el.removeAttribute("aria-label");
       if (this._generatedItemDescriptions.has(el)) el.removeAttribute("aria-roledescription");
       if (this._generatedItemSizes.has(el)) el.removeAttribute("data-carousel-size");
-      const original = this._itemA11yOriginal.get(el);
-      if (original?.ariaHidden === null) el.removeAttribute("aria-hidden");
-      else if (original) el.setAttribute("aria-hidden", original.ariaHidden);
-      if (original?.tabIndex === null) el.removeAttribute("tabindex");
-      else if (original) el.setAttribute("tabindex", original.tabIndex);
+      this._restoreItemState(el);
     });
+    this.el.classList.remove("dragging", "scrolling");
     if (this._generatedContainerRole) this.el.removeAttribute("role");
     if (this._generatedContainerLabel) this.el.removeAttribute("aria-label");
     if (this._generatedContainerDescription) this.el.removeAttribute("aria-roledescription");
@@ -466,6 +416,19 @@ var _Carousel = class _Carousel extends Component {
       );
     }
   }
+  /**
+   * Puts back an item's accessibility attributes, its authored `active`
+   * class and, for an item found without it, the `carousel-item` class. A
+   * carousel started again used to begin at the last shown item.
+   */
+  _restoreItemState(el) {
+    const original = this._itemA11yOriginal.get(el);
+    if (!original) return;
+    restoreAttribute(el, "aria-hidden", original.ariaHidden);
+    restoreAttribute(el, "tabindex", original.tabIndex);
+    el.classList.toggle("active", original.active);
+    if (!original.itemClass) el.classList.remove("carousel-item");
+  }
   /** Start or stop the timer to match the current pause state. */
   _syncAutoAdvance() {
     const run = this._autoAdvances && !this._autoPaused && !this._hovered && !this._focused && !this._motion.matches && !document.hidden;
@@ -482,9 +445,21 @@ var _Carousel = class _Carousel extends Component {
   /** The document only hears from a carousel while a mouse press is down on its track. */
   _setDragListeners(on) {
     const method = on ? "addEventListener" : "removeEventListener";
-    document[method]("pointermove", this._handleTrackPointerMove);
-    document[method]("pointerup", this._handleTrackPointerUp);
-    document[method]("pointercancel", this._handleTrackPointerUp);
+    const options = { signal: this._events.signal };
+    document[method]("pointermove", this._handleTrackPointerMove, options);
+    document[method]("pointerup", this._handleTrackPointerUp, options);
+    document[method]("pointercancel", this._handleTrackPointerUp, options);
+  }
+  /**
+   * Keys the carousel leaves alone. Modified keys are shortcuts (Alt+Left is
+   * Back), and a nested widget that reads arrows itself - a field, a slider,
+   * tabs, a menu, media controls - keeps them.
+   */
+  _keyBelongsElsewhere(e) {
+    const target = e.target;
+    return [e.defaultPrevented, e.altKey, e.ctrlKey, e.metaKey, e.shiftKey, target.isContentEditable].some(Boolean) || this.el.contains(target.closest(
+      'input, textarea, select, video[controls], audio[controls], [role="slider"], [role="tablist"], [role="menu"]'
+    ));
   }
   _paintIndicators(center) {
     if (!this.showIndicators || !this._indicators) return;
@@ -496,6 +471,7 @@ var _Carousel = class _Carousel extends Component {
       else el.removeAttribute("aria-current");
     });
   }
+  /** Whether `index` is still the active item once its change is reported. */
   _syncActive(index, dragged) {
     const prev = this.center;
     this.center = index;
@@ -503,20 +479,20 @@ var _Carousel = class _Carousel extends Component {
     this._paintIndicators(index);
     this._syncLayoutRoles(index);
     const curr = this.images[index];
-    if (prev !== index && typeof this.options.onCycleTo === "function") {
-      this.options.onCycleTo.call(this, curr, dragged);
-    }
+    const detail = { item: curr, dragged };
+    if (prev !== index && !this._notify("change", this.options.onCycleTo, { args: [curr, dragged], detail, current: () => this.center === index })) return false;
     if (typeof this.oneTimeCallback === "function") {
       this.oneTimeCallback.call(this, curr, dragged);
       this.oneTimeCallback = null;
     }
+    return true;
   }
   _syncLayoutRoles(index) {
     const sizes = this.images.map(() => "large");
     const setSize = (i, size) => {
       if (this.images[i]) sizes[i] = size;
     };
-    if (this.el.classList.contains("flat") || this.el.classList.contains("uncontained") || this.el.classList.contains("full-screen") && this._vertical) {
+    if (this.el.classList.contains("uncontained") || this.el.classList.contains("full-screen") && this._vertical) {
     } else if (this.el.classList.contains("hero") || this.el.classList.contains("full-screen-horizontal")) {
       setSize(index + 1, "small");
       if (this.el.classList.contains("center-aligned")) setSize(index - 1, "small");
@@ -597,18 +573,20 @@ var _Carousel = class _Carousel extends Component {
     const padding = parseFloat(this._vertical ? style.paddingBlockStart : style.paddingInlineStart) || 0;
     let best = this.center;
     let bestDist = Infinity;
+    let centerDist = Infinity;
     this.images.forEach((el, i) => {
       const start = this._vertical ? el.offsetTop : el.offsetLeft;
       const size = this._vertical ? el.offsetHeight : el.offsetWidth;
       const target = centered ? start - (viewport - size) / 2 : start + (rtl ? size - viewport + padding : -padding);
       const bounded = Math.max(rtl ? -extent : 0, Math.min(rtl ? 0 : extent, target));
       const dist = Math.abs(bounded - position);
-      if (dist < bestDist || dist === bestDist && i === this.center) {
+      if (i === this.center) centerDist = dist;
+      if (dist < bestDist) {
         bestDist = dist;
         best = i;
       }
     });
-    return best;
+    return centerDist - bestDist <= 1 ? this.center : best;
   }
   _scrollToIndex(n, smooth = true) {
     const el = this.images[n];
@@ -633,8 +611,7 @@ var _Carousel = class _Carousel extends Component {
   _cycleTo(n, callback = null) {
     this._alignAfterResize = true;
     if (typeof callback === "function") this.oneTimeCallback = callback;
-    this._syncActive(n, false);
-    this._scrollToIndex(n);
+    if (this._syncActive(n, false)) this._scrollToIndex(n);
   }
   /**
    * Stop auto-advance until start() is called. Without an `interval` there is
@@ -667,14 +644,9 @@ var _Carousel = class _Carousel extends Component {
     this._cycleTo(n, callback);
   }
 };
-_Carousel._live = /* @__PURE__ */ new Set();
-_Carousel._resizeListening = false;
-_Carousel._onResize = Utils.throttle(() => {
-  _Carousel._live.forEach((c) => c._handleResize());
-}, 200);
-var Carousel = _Carousel;
+Carousel.key = "Expressive_Carousel";
 
 export {
   Carousel
 };
-//# sourceMappingURL=chunk-KVJAVDBC.mjs.map
+//# sourceMappingURL=chunk-3KLZRQZI.mjs.map