@expressivecss/expressive 0.9.0 → 0.10.0

package/dist/js/chunks/chunk-AOGFNMXS.mjs

@@ -0,0 +1,691 @@
+import {
+  Utils
+} from "./chunk-MISGHDUU.mjs";
+import {
+  Component
+} from "./chunk-QSQ24FYT.mjs";
+
+// src/ts/components/carousel.ts
+var _defaults = {
+  duration: 200,
+  fullWidth: false,
+  indicators: false,
+  noWrap: false,
+  interval: 0,
+  height: null,
+  onCycleTo: null,
+  i18n: {
+    carousel: "Carousel",
+    item: "Item",
+    of: "of",
+    indicators: "Slides",
+    slide: "Slide"
+  }
+};
+var _Carousel = class _Carousel extends Component {
+  constructor(el, options) {
+    super(el, options, _Carousel);
+    this.center = 0;
+    this._ownIndicators = false;
+    this._trackEl = null;
+    this._ignoreScroll = false;
+    this._alignAfterResize = false;
+    this._trackRaf = null;
+    this._started = false;
+    this._vertical = false;
+    this._resizeObserver = null;
+    this._resizeTimeout = null;
+    this._usesWindowResize = false;
+    this._dragPointerId = null;
+    this._dragStartX = 0;
+    this._dragStartY = 0;
+    this._dragStartScroll = 0;
+    this._suppressClick = false;
+    this._suppressClickTimeout = null;
+    this._generatedContainerRole = false;
+    this._generatedContainerLabel = false;
+    this._generatedContainerDescription = false;
+    this._generatedWideLayout = false;
+    this._generatedFixedHeight = false;
+    this._authoredInlineHeight = null;
+    this._autoAdvanceTimer = null;
+    this._autoAdvances = false;
+    this._autoPaused = false;
+    this._hovered = false;
+    this._focused = false;
+    this._motion = window.matchMedia("(prefers-reduced-motion: reduce)");
+    this._generatedItemTabIndexes = /* @__PURE__ */ new Set();
+    this._generatedItemLabels = /* @__PURE__ */ new Set();
+    this._generatedItemDescriptions = /* @__PURE__ */ new Set();
+    this._generatedItemSizes = /* @__PURE__ */ new Set();
+    this._authoredItemSizes = /* @__PURE__ */ new Set();
+    this._itemA11yOriginal = /* @__PURE__ */ new Map();
+    this._handleThrottledResize = () => {
+      if (!this._started || this._resizeTimeout !== null) return;
+      this._handleResize();
+      this._resizeTimeout = setTimeout(() => {
+        this._resizeTimeout = null;
+        this._handleResize();
+      }, 200);
+    };
+    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 === "focusout") this._focused = this.el.contains(e.relatedTarget);
+      this._syncAutoAdvance();
+    };
+    this._handleMotionChange = () => {
+      this._syncAutoAdvance();
+      if (this._motion.matches) this._scrollToIndex(this.center, false);
+      this._updateParallax();
+    };
+    this._tick = () => {
+      this._autoAdvanceTimer = null;
+      this._advance();
+      this._syncAutoAdvance();
+    };
+    this._advance = () => {
+      const next = this.center + 1;
+      if (next < this.count) {
+        this.set(next);
+        return;
+      }
+      if (this.options.noWrap) {
+        this._autoAdvances = false;
+        this._syncAutoAdvance();
+        return;
+      }
+      this.set(0);
+    };
+    this._handleNativeScroll = () => {
+      this._alignAfterResize = false;
+      this._finishScroll();
+    };
+    this._handleTrackPointerDown = (e) => {
+      this._handleNativeScroll();
+      if (e.pointerType !== "mouse" || e.button !== 0) return;
+      this.pressed = true;
+      this.dragged = false;
+      this._suppressClick = false;
+      this._dragPointerId = e.pointerId;
+      this._dragStartX = e.clientX;
+      this._dragStartY = e.clientY;
+      this._dragStartScroll = this._vertical ? this._scroller.scrollTop : this._scroller.scrollLeft;
+      try {
+        this._scroller.setPointerCapture(e.pointerId);
+      } catch {
+      }
+    };
+    this._handleTrackPointerMove = (e) => {
+      if (!this.pressed || e.pointerId !== this._dragPointerId) return;
+      const deltaX = e.clientX - this._dragStartX;
+      const deltaY = e.clientY - this._dragStartY;
+      const primaryDelta = this._vertical ? deltaY : deltaX;
+      const crossDelta = this._vertical ? deltaX : deltaY;
+      if (!this.dragged) {
+        if (Math.abs(primaryDelta) < 6 || Math.abs(primaryDelta) <= Math.abs(crossDelta)) return;
+        this.dragged = true;
+        this.el.classList.add("dragging");
+      }
+      if (this._vertical) this._scroller.scrollTop = this._dragStartScroll - deltaY;
+      else this._scroller.scrollLeft = this._dragStartScroll - deltaX;
+      e.preventDefault();
+    };
+    this._handleTrackPointerUp = (e) => {
+      if (!this.pressed || e.pointerId !== this._dragPointerId) return;
+      this.pressed = false;
+      this._dragPointerId = null;
+      this.el.classList.remove("dragging");
+      try {
+        this._scroller.releasePointerCapture(e.pointerId);
+      } catch {
+      }
+      if (!this.dragged) return;
+      this._suppressClick = true;
+      window.clearTimeout(this._suppressClickTimeout);
+      this._suppressClickTimeout = setTimeout(() => {
+        this._suppressClick = false;
+      }, 0);
+      this._syncActive(this._nearestIndex(), true);
+    };
+    this._handleTrackClick = (e) => {
+      if (!this._suppressClick) return;
+      this._suppressClick = false;
+      e.preventDefault();
+      e.stopImmediatePropagation();
+    };
+    this._handleTrackDragStart = (e) => {
+      if (e.target.closest("img, picture, video")) e.preventDefault();
+    };
+    this._handleItemResize = (e) => {
+      if (this._alignAfterResize && !this.pressed && e.propertyName === "flex-basis" && this.images.includes(e.target)) {
+        this._scrollToIndex(this.center, false);
+      }
+    };
+    this._handleIndicatorClick = (e) => {
+      e.stopPropagation();
+      const indicator = e.target.closest(".indicator-item");
+      if (!indicator || !this._indicators.contains(indicator)) return;
+      const index = [...this._indicators.children].indexOf(indicator);
+      if (index < 0) return;
+      this._cycleTo(index);
+    };
+    this._handleKeydown = (e) => {
+      const target = e.target;
+      if (target.isContentEditable || target.closest("input, textarea, select")) 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);
+      if (e.key === "Home") {
+        e.preventDefault();
+        this.set(0);
+        this._focusItem(0);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        this.set(this.count - 1);
+        this._focusItem(this.count - 1);
+      } else if (forward) {
+        e.preventDefault();
+        this.next();
+        this._focusItem(this.center);
+      } else if (backward) {
+        e.preventDefault();
+        this.prev();
+        this._focusItem(this.center);
+      }
+    };
+    this._handleTrackScroll = () => {
+      if (!this.el.classList.contains("scrolling")) this.el.classList.add("scrolling");
+      window.clearTimeout(this.scrollingTimeout);
+      this.scrollingTimeout = setTimeout(() => this.el.classList.remove("scrolling"), 120);
+      if (this._trackRaf !== null) return;
+      this._trackRaf = requestAnimationFrame(() => {
+        this._trackRaf = null;
+        this._updateParallax();
+        if (this._ignoreScroll) return;
+        const index = this._nearestIndex();
+        if (index !== this.center) this._syncActive(index, this.dragged);
+      });
+    };
+    this._handleResize = () => {
+      if (!this._started || !this.images.length) return;
+      this._syncAdaptiveMode();
+      this._syncLayoutRoles(this.center);
+      this._scrollToIndex(this.center, false);
+      this._updateParallax();
+    };
+    this._finishScroll = () => {
+      this._ignoreScroll = false;
+      clearTimeout(this._scrollEndTimeout);
+      this._scroller.removeEventListener("scrollend", this._handleScrollEnd);
+    };
+    this._handleScrollEnd = () => {
+      if (!this.images.some((item) => item.getAnimations().some((animation) => animation.playState === "running"))) {
+        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;
+    this.images = this._collectItems();
+    if (!this.images.length) {
+      console.error("Carousel: no .carousel-item elements to show");
+      return;
+    }
+    this.images.forEach((item) => {
+      this._itemA11yOriginal.set(item, {
+        ariaHidden: item.getAttribute("aria-hidden"),
+        tabIndex: item.getAttribute("tabindex")
+      });
+      if (item.hasAttribute("data-carousel-size")) this._authoredItemSizes.add(item);
+    });
+    this.hasMultipleSlides = this.images.length > 1;
+    this.showIndicators = this.options.indicators && this.hasMultipleSlides;
+    this.count = this.images.length;
+    this._autoAdvances = this.options.interval > 0 && this.hasMultipleSlides;
+    this.images.forEach((item) => item.classList.add("carousel-item"));
+    if (this.options.height !== null) {
+      this._generatedFixedHeight = !this.el.classList.contains("fixed-height");
+      this._authoredInlineHeight = this.el.style.getPropertyValue("--carousel-height") || null;
+      this.el.classList.add("fixed-height");
+      this.el.style.setProperty("--carousel-height", `${this.options.height}px`);
+    }
+    this._wrapTrack();
+    this._syncAdaptiveMode();
+    if (this.showIndicators) this._setupIndicators();
+    this._setupAccessibility();
+    this._setupEventHandlers();
+    this._started = true;
+    const start = Math.max(
+      0,
+      this.images.findIndex((el2) => el2.classList.contains("active"))
+    );
+    this.center = start;
+    this._syncActive(start, false);
+    this._updateParallax();
+    this._scrollToIndex(start, false);
+    this._syncAutoAdvance();
+  }
+  get _scroller() {
+    return this._trackEl ?? this.el;
+  }
+  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;
+  }
+  _collectItems() {
+    const explicit = Array.from(this.el.children).filter(
+      (el) => el instanceof HTMLElement && el.classList.contains("carousel-item")
+    );
+    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")) {
+        return false;
+      }
+      return el.tagName !== "NAV";
+    });
+  }
+  _setupAccessibility() {
+    if (!this.el.hasAttribute("role")) {
+      this.el.setAttribute("role", "region");
+      this._generatedContainerRole = true;
+    }
+    if (!this.el.hasAttribute("aria-label") && !this.el.hasAttribute("aria-labelledby")) {
+      this.el.setAttribute("aria-label", this.options.i18n.carousel);
+      this._generatedContainerLabel = true;
+    }
+    if (!this.el.hasAttribute("aria-roledescription")) {
+      this.el.setAttribute("aria-roledescription", "carousel");
+      this._generatedContainerDescription = true;
+    }
+    const naturallyFocusable = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+    this.images.forEach((item, index) => {
+      if (!item.hasAttribute("aria-roledescription")) {
+        item.setAttribute("aria-roledescription", "slide");
+        this._generatedItemDescriptions.add(item);
+      }
+      if (!item.hasAttribute("aria-label") && !item.hasAttribute("aria-labelledby")) {
+        const mediaName = item.querySelector("img[alt]")?.getAttribute("alt")?.trim();
+        const textName = item.textContent?.replace(/\s+/g, " ").trim();
+        const name = mediaName || textName;
+        const position = `${this.options.i18n.item} ${index + 1} ${this.options.i18n.of} ${this.count}`;
+        item.setAttribute("aria-label", name ? `${name}, ${position}` : position);
+        this._generatedItemLabels.add(item);
+      }
+      if (!item.matches(naturallyFocusable) && !item.querySelector(naturallyFocusable)) {
+        item.tabIndex = 0;
+        this._generatedItemTabIndexes.add(item);
+      }
+    });
+  }
+  _setupIndicators() {
+    const existing = Array.from(this.el.children).find(
+      (el) => el instanceof HTMLElement && el.classList.contains("indicators")
+    );
+    this._indicators = existing ?? document.createElement("nav");
+    this._ownIndicators = !existing;
+    this._indicators.classList.add("indicators");
+    this._indicators.setAttribute("aria-label", this.options.i18n.indicators);
+    this._indicators.replaceChildren();
+    this.images.forEach((_, i) => {
+      const button = document.createElement("button");
+      button.type = "button";
+      button.classList.add("indicator-item");
+      if (i === 0) {
+        button.classList.add("active");
+        button.setAttribute("aria-current", "true");
+      }
+      button.setAttribute("aria-label", `${this.options.i18n.slide} ${i + 1}`);
+      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);
+    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);
+    }
+    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("pointermove", this._handleTrackPointerMove);
+    this._scroller.addEventListener("pointerup", this._handleTrackPointerUp);
+    this._scroller.addEventListener("pointercancel", this._handleTrackPointerUp);
+    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._scroller.removeEventListener("scroll", this._handleTrackScroll);
+    this._scroller.removeEventListener("pointerdown", this._handleTrackPointerDown);
+    this._scroller.removeEventListener("wheel", this._handleNativeScroll);
+    this._scroller.removeEventListener("pointermove", this._handleTrackPointerMove);
+    this._scroller.removeEventListener("pointerup", this._handleTrackPointerUp);
+    this._scroller.removeEventListener("pointercancel", this._handleTrackPointerUp);
+    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;
+      }
+    }
+  }
+  _teardown() {
+    this._started = false;
+    this._removeEventHandlers();
+    this._finishScroll();
+    this._autoAdvances = false;
+    this._syncAutoAdvance();
+    if (this._trackRaf !== null) cancelAnimationFrame(this._trackRaf);
+    window.clearTimeout(this.scrollingTimeout);
+    window.clearTimeout(this._suppressClickTimeout);
+    clearTimeout(this._resizeTimeout);
+    if (this._ownIndicators) this._indicators?.remove();
+    this._unwrapTrack();
+    this.images.forEach((el) => {
+      el.style.removeProperty("--md-comp-carousel-item-parallax");
+      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);
+    });
+    if (this._generatedContainerRole) this.el.removeAttribute("role");
+    if (this._generatedContainerLabel) this.el.removeAttribute("aria-label");
+    if (this._generatedContainerDescription) this.el.removeAttribute("aria-roledescription");
+    if (this._generatedFixedHeight) this.el.classList.remove("fixed-height");
+    if (this.options.height !== null) {
+      if (this._authoredInlineHeight === null) this.el.style.removeProperty("--carousel-height");
+      else this.el.style.setProperty("--carousel-height", this._authoredInlineHeight);
+    }
+    if (this._generatedWideLayout) {
+      this.el.classList.remove(
+        "multi-wide",
+        "multi-large",
+        "multi-extra-large",
+        "full-screen-horizontal"
+      );
+    }
+  }
+  /** 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;
+    if (run && this._autoAdvanceTimer === null) {
+      this._autoAdvanceTimer = setTimeout(
+        this._tick,
+        this.options.duration + this.options.interval
+      );
+    } else if (!run && this._autoAdvanceTimer !== null) {
+      clearTimeout(this._autoAdvanceTimer);
+      this._autoAdvanceTimer = null;
+    }
+  }
+  _paintIndicators(center) {
+    if (!this.showIndicators || !this._indicators) return;
+    const pos = (center % this.count + this.count) % this.count;
+    this._indicators.querySelectorAll(".indicator-item").forEach((el, i) => {
+      const on = i === pos;
+      el.classList.toggle("active", on);
+      if (on) el.setAttribute("aria-current", "true");
+      else el.removeAttribute("aria-current");
+    });
+  }
+  _syncActive(index, dragged) {
+    const prev = this.center;
+    this.center = index;
+    this.images.forEach((el, i) => el.classList.toggle("active", i === index));
+    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);
+    }
+    if (typeof this.oneTimeCallback === "function") {
+      this.oneTimeCallback.call(this, curr, dragged);
+      this.oneTimeCallback = null;
+    }
+  }
+  _syncLayoutRoles(index) {
+    const setSize = (item, size) => {
+      if (this._authoredItemSizes.has(item)) return;
+      item.setAttribute("data-carousel-size", size);
+      this._generatedItemSizes.add(item);
+    };
+    this.images.forEach((item) => setSize(item, "large"));
+    if (this.el.classList.contains("flat") || this.el.classList.contains("uncontained") || this.el.classList.contains("full-screen") && this._vertical) {
+      return;
+    }
+    if (this.el.classList.contains("hero") || this.el.classList.contains("full-screen-horizontal")) {
+      const next = this.images[index + 1];
+      if (next) setSize(next, "small");
+      if (this.el.classList.contains("center-aligned")) {
+        const previous = this.images[index - 1];
+        if (previous) setSize(previous, "small");
+      }
+      return;
+    }
+    const width = this.el.clientWidth;
+    const desiredLargeCount = width >= 1600 ? 4 : width >= 1200 ? 3 : width >= 600 ? 2 : 1;
+    const largeCount = Math.min(desiredLargeCount, Math.max(1, this.count - 2));
+    this.el.classList.remove("multi-wide", "multi-large", "multi-extra-large");
+    if (largeCount === 2) this.el.classList.add("multi-wide");
+    else if (largeCount === 3) this.el.classList.add("multi-large");
+    else if (largeCount >= 4) this.el.classList.add("multi-extra-large");
+    this._generatedWideLayout = this._generatedWideLayout || largeCount > 1;
+    for (let offset = 1; offset < largeCount; offset += 1) {
+      const item = this.images[index + offset];
+      if (item) setSize(item, "large");
+    }
+    const medium = this.images[index + largeCount];
+    const small = this.images[index + largeCount + 1];
+    if (medium) setSize(medium, "medium");
+    if (small) setSize(small, "small");
+  }
+  _syncAdaptiveMode() {
+    if (!this.el.classList.contains("full-screen")) return;
+    const landscape = window.matchMedia("(orientation: landscape)").matches;
+    const horizontal = this.el.clientWidth >= 840 || landscape;
+    const wasVertical = this._vertical;
+    this._vertical = !horizontal;
+    this.el.classList.toggle("full-screen-horizontal", horizontal);
+    this._generatedWideLayout = this._generatedWideLayout || horizontal;
+    if (this._started && wasVertical !== this._vertical) {
+      this._scroller.scrollTo({ left: 0, top: 0, behavior: "auto" });
+    }
+  }
+  _focusItem(index) {
+    const item = this.images[index];
+    if (!item) return;
+    const focusable = item.matches(
+      'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+    ) ? item : item.querySelector(
+      'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+    );
+    (focusable ?? item).focus({ preventScroll: true });
+  }
+  _updateParallax() {
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      this.images.forEach(
+        (item) => item.style.setProperty("--md-comp-carousel-item-parallax", "0px")
+      );
+      return;
+    }
+    const scrollerRect = this._scroller.getBoundingClientRect();
+    const viewportCenter = this._vertical ? scrollerRect.top + scrollerRect.height / 2 : scrollerRect.left + scrollerRect.width / 2;
+    const viewportSize = Math.max(1, this._vertical ? scrollerRect.height : scrollerRect.width);
+    this.images.forEach((item) => {
+      const rect = item.getBoundingClientRect();
+      const itemCenter = this._vertical ? rect.top + rect.height / 2 : rect.left + rect.width / 2;
+      const progress = Math.max(-1, Math.min(1, (itemCenter - viewportCenter) / viewportSize));
+      item.style.setProperty("--md-comp-carousel-item-parallax", `${progress * -24}px`);
+    });
+  }
+  _wrapTrack() {
+    const track = document.createElement("div");
+    track.className = "carousel-track";
+    this.images[0].before(track);
+    this.images.forEach((el) => track.appendChild(el));
+    this._trackEl = track;
+  }
+  _unwrapTrack() {
+    if (!this._trackEl) return;
+    this.images.forEach((el) => this.el.insertBefore(el, this._trackEl));
+    this._trackEl.remove();
+    this._trackEl = null;
+  }
+  _nearestIndex() {
+    const centered = this.el.classList.contains("center-aligned");
+    const style = getComputedStyle(this._scroller);
+    const rtl = !this._vertical && style.direction === "rtl";
+    const position = this._vertical ? this._scroller.scrollTop : this._scroller.scrollLeft;
+    const viewport = this._vertical ? this._scroller.clientHeight : this._scroller.clientWidth;
+    const extent = (this._vertical ? this._scroller.scrollHeight : this._scroller.scrollWidth) - viewport;
+    const padding = parseFloat(this._vertical ? style.paddingBlockStart : style.paddingInlineStart) || 0;
+    let best = this.center;
+    let bestDist = 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) {
+        bestDist = dist;
+        best = i;
+      }
+    });
+    return best;
+  }
+  _scrollToIndex(n, smooth = true) {
+    const el = this.images[n];
+    if (!el) return;
+    this._finishScroll();
+    const centered = this.el.classList.contains("center-aligned");
+    const style = getComputedStyle(this._scroller);
+    const inlinePadding = Number.parseFloat(style.paddingInlineStart) || 0;
+    const blockPadding = Number.parseFloat(style.paddingBlockStart) || 0;
+    const left = centered ? el.offsetLeft - (this._scroller.clientWidth - el.offsetWidth) / 2 : style.direction === "rtl" ? el.offsetLeft + el.offsetWidth - this._scroller.clientWidth + inlinePadding : el.offsetLeft - inlinePadding;
+    const top = el.offsetTop - blockPadding;
+    this._ignoreScroll = true;
+    this._scroller.scrollTo({
+      left: this._vertical ? 0 : left,
+      top: this._vertical ? top : 0,
+      behavior: smooth && !this._motion.matches ? "smooth" : "instant"
+    });
+    this._scroller.addEventListener("scrollend", this._handleScrollEnd);
+    this._scrollEndTimeout = setTimeout(this._finishScroll, this.options.duration + 350);
+  }
+  _cycleTo(n, callback = null) {
+    this._alignAfterResize = true;
+    if (typeof callback === "function") this.oneTimeCallback = callback;
+    this._syncActive(n, false);
+    this._scrollToIndex(n);
+  }
+  /**
+   * Stop auto-advance until start() is called. Without an `interval` there is
+   * nothing to stop and this does nothing.
+   */
+  pause() {
+    this._autoPaused = true;
+    this._syncAutoAdvance();
+  }
+  /** Resume auto-advance after pause(). */
+  start() {
+    this._autoPaused = false;
+    this._syncAutoAdvance();
+  }
+  next(n = 1) {
+    if (n === void 0 || isNaN(n)) n = 1;
+    const index = this.center + n;
+    if (index >= this.count || index < 0) return;
+    this._cycleTo(index);
+  }
+  prev(n = 1) {
+    if (n === void 0 || isNaN(n)) n = 1;
+    const index = this.center - n;
+    if (index >= this.count || index < 0) return;
+    this._cycleTo(index);
+  }
+  set(n, callback) {
+    if (n === void 0 || isNaN(n)) n = 0;
+    if (n >= this.count || n < 0) return;
+    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;
+
+export {
+  Carousel
+};
+//# sourceMappingURL=chunk-AOGFNMXS.mjs.map