@asante-org/atlascopco-vt-litesitegenerator 3.8.14 → 3.8.15

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React, { useId, useState, useRef, useEffect, useCallback, useMemo, forwardRef, useImperativeHandle } from 'react';
+import React, { useId, useState, useRef, useMemo, useEffect, useCallback, forwardRef, useImperativeHandle } from 'react';
 
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -2260,8 +2260,247 @@ function EmblaCarousel(root, userOptions, userPlugins) {
 }
 EmblaCarousel.globalOptions = undefined;
 
+function clampNumber(number, min, max) {
+  return Math.min(Math.max(number, min), max);
+}
+function isNumber(value) {
+  return typeof value === 'number' && !isNaN(value);
+}
+function Fade(userOptions = {}) {
+  const fullOpacity = 1;
+  const noOpacity = 0;
+  const fadeFriction = 0.68;
+  let emblaApi;
+  let opacities = [];
+  let fadeToNextDistance;
+  let distanceFromPointerDown = 0;
+  let fadeVelocity = 0;
+  let progress = 0;
+  let shouldFadePair = false;
+  let defaultSettledBehaviour;
+  let defaultProgressBehaviour;
+  function init(emblaApiInstance) {
+    emblaApi = emblaApiInstance;
+    const selectedSnap = emblaApi.selectedScrollSnap();
+    const {
+      scrollBody,
+      containerRect,
+      axis
+    } = emblaApi.internalEngine();
+    const containerSize = axis.measureSize(containerRect);
+    fadeToNextDistance = clampNumber(containerSize * 0.75, 200, 500);
+    shouldFadePair = false;
+    opacities = emblaApi.scrollSnapList().map((_, index) => index === selectedSnap ? fullOpacity : noOpacity);
+    defaultSettledBehaviour = scrollBody.settled;
+    defaultProgressBehaviour = emblaApi.scrollProgress;
+    scrollBody.settled = settled;
+    emblaApi.scrollProgress = scrollProgress;
+    emblaApi.on('select', select).on('slideFocus', fadeToSelectedSnapInstantly).on('pointerDown', pointerDown).on('pointerUp', pointerUp);
+    disableScroll();
+    fadeToSelectedSnapInstantly();
+  }
+  function destroy() {
+    const {
+      scrollBody
+    } = emblaApi.internalEngine();
+    scrollBody.settled = defaultSettledBehaviour;
+    emblaApi.scrollProgress = defaultProgressBehaviour;
+    emblaApi.off('select', select).off('slideFocus', fadeToSelectedSnapInstantly).off('pointerDown', pointerDown).off('pointerUp', pointerUp);
+    emblaApi.slideNodes().forEach(slideNode => {
+      const slideStyle = slideNode.style;
+      slideStyle.opacity = '';
+      slideStyle.transform = '';
+      slideStyle.pointerEvents = '';
+      if (!slideNode.getAttribute('style')) slideNode.removeAttribute('style');
+    });
+  }
+  function fadeToSelectedSnapInstantly() {
+    const selectedSnap = emblaApi.selectedScrollSnap();
+    setOpacities(selectedSnap, fullOpacity);
+  }
+  function pointerUp() {
+    shouldFadePair = false;
+  }
+  function pointerDown() {
+    shouldFadePair = false;
+    distanceFromPointerDown = 0;
+    fadeVelocity = 0;
+  }
+  function select() {
+    const duration = emblaApi.internalEngine().scrollBody.duration();
+    fadeVelocity = duration ? 0 : fullOpacity;
+    shouldFadePair = true;
+    if (!duration) fadeToSelectedSnapInstantly();
+  }
+  function getSlideTransform(position) {
+    const {
+      axis
+    } = emblaApi.internalEngine();
+    const translateAxis = axis.scroll.toUpperCase();
+    return `translate${translateAxis}(${axis.direction(position)}px)`;
+  }
+  function disableScroll() {
+    const {
+      translate,
+      slideLooper
+    } = emblaApi.internalEngine();
+    translate.clear();
+    translate.toggleActive(false);
+    slideLooper.loopPoints.forEach(({
+      translate
+    }) => {
+      translate.clear();
+      translate.toggleActive(false);
+    });
+  }
+  function lockExcessiveScroll(fadeIndex) {
+    const {
+      scrollSnaps,
+      location,
+      target
+    } = emblaApi.internalEngine();
+    if (!isNumber(fadeIndex) || opacities[fadeIndex] < 0.5) return;
+    location.set(scrollSnaps[fadeIndex]);
+    target.set(location);
+  }
+  function setOpacities(fadeIndex, velocity) {
+    const scrollSnaps = emblaApi.scrollSnapList();
+    scrollSnaps.forEach((_, indexA) => {
+      const absVelocity = Math.abs(velocity);
+      const currentOpacity = opacities[indexA];
+      const isFadeIndex = indexA === fadeIndex;
+      const nextOpacity = isFadeIndex ? currentOpacity + absVelocity : currentOpacity - absVelocity;
+      const clampedOpacity = clampNumber(nextOpacity, noOpacity, fullOpacity);
+      opacities[indexA] = clampedOpacity;
+      const fadePair = isFadeIndex && shouldFadePair;
+      const indexB = emblaApi.previousScrollSnap();
+      if (fadePair) opacities[indexB] = 1 - clampedOpacity;
+      if (isFadeIndex) setProgress(fadeIndex, clampedOpacity);
+      setOpacity(indexA);
+    });
+  }
+  function setOpacity(index) {
+    const slidesInSnap = emblaApi.internalEngine().slideRegistry[index];
+    const {
+      scrollSnaps,
+      containerRect
+    } = emblaApi.internalEngine();
+    const opacity = opacities[index];
+    slidesInSnap.forEach(slideIndex => {
+      const slideStyle = emblaApi.slideNodes()[slideIndex].style;
+      const roundedOpacity = parseFloat(opacity.toFixed(2));
+      const hasOpacity = roundedOpacity > noOpacity;
+      const position = hasOpacity ? scrollSnaps[index] : containerRect.width + 2;
+      const transform = getSlideTransform(position);
+      if (hasOpacity) slideStyle.transform = transform;
+      slideStyle.opacity = roundedOpacity.toString();
+      slideStyle.pointerEvents = opacity > 0.5 ? 'auto' : 'none';
+      if (!hasOpacity) slideStyle.transform = transform;
+    });
+  }
+  function setProgress(fadeIndex, opacity) {
+    const {
+      index,
+      dragHandler,
+      scrollSnaps
+    } = emblaApi.internalEngine();
+    const pointerDown = dragHandler.pointerDown();
+    const snapFraction = 1 / (scrollSnaps.length - 1);
+    let indexA = fadeIndex;
+    let indexB = pointerDown ? emblaApi.selectedScrollSnap() : emblaApi.previousScrollSnap();
+    if (pointerDown && indexA === indexB) {
+      const reverseSign = Math.sign(distanceFromPointerDown) * -1;
+      indexA = indexB;
+      indexB = index.clone().set(indexB).add(reverseSign).get();
+    }
+    const currentPosition = indexB * snapFraction;
+    const diffPosition = (indexA - indexB) * snapFraction;
+    progress = currentPosition + diffPosition * opacity;
+  }
+  function getFadeIndex() {
+    const {
+      dragHandler,
+      index,
+      scrollBody
+    } = emblaApi.internalEngine();
+    const selectedSnap = emblaApi.selectedScrollSnap();
+    if (!dragHandler.pointerDown()) return selectedSnap;
+    const directionSign = Math.sign(scrollBody.velocity());
+    const distanceSign = Math.sign(distanceFromPointerDown);
+    const nextSnap = index.clone().set(selectedSnap).add(directionSign * -1).get();
+    if (!directionSign || !distanceSign) return null;
+    return distanceSign === directionSign ? nextSnap : selectedSnap;
+  }
+  function fade(emblaApi) {
+    const {
+      dragHandler,
+      scrollBody
+    } = emblaApi.internalEngine();
+    const pointerDown = dragHandler.pointerDown();
+    const velocity = scrollBody.velocity();
+    const duration = scrollBody.duration();
+    const fadeIndex = getFadeIndex();
+    const noFadeIndex = !isNumber(fadeIndex);
+    if (pointerDown) {
+      if (!velocity) return;
+      distanceFromPointerDown += velocity;
+      fadeVelocity = Math.abs(velocity / fadeToNextDistance);
+      lockExcessiveScroll(fadeIndex);
+    }
+    if (!pointerDown) {
+      if (!duration || noFadeIndex) return;
+      fadeVelocity += (fullOpacity - opacities[fadeIndex]) / duration;
+      fadeVelocity *= fadeFriction;
+    }
+    if (noFadeIndex) return;
+    setOpacities(fadeIndex, fadeVelocity);
+  }
+  function settled() {
+    const {
+      target,
+      location
+    } = emblaApi.internalEngine();
+    const diffToTarget = target.get() - location.get();
+    const notReachedTarget = Math.abs(diffToTarget) >= 1;
+    const fadeIndex = getFadeIndex();
+    const noFadeIndex = !isNumber(fadeIndex);
+    fade(emblaApi);
+    if (noFadeIndex || notReachedTarget) return false;
+    return opacities[fadeIndex] > 0.999;
+  }
+  function scrollProgress() {
+    return progress;
+  }
+  const self = {
+    name: 'fade',
+    options: userOptions,
+    init,
+    destroy
+  };
+  return self;
+}
+Fade.globalOptions = undefined;
+
+var alignForLayout = function (layout) {
+  return layout === "full-width" ? "center" : "start";
+};
+var MOBILE_MEDIA_QUERY$1 = "(max-width: 767px)";
+/** Slide state classes. CSS uses them to size the full-width focus mode. */
+var SLIDE_ACTIVE = "lsg-carousel__slide--active";
+var SLIDE_PREV = "lsg-carousel__slide--prev";
+var SLIDE_NEXT = "lsg-carousel__slide--next";
+/** Media track slides. Also the dot/aria-label source of truth. */
+var MEDIA_ITEM_SELECTOR = "[data-lsg-carousel-item]";
+/** Text track slides, one per media slide. */
+var CONTENT_ITEM_SELECTOR = "[data-lsg-carousel-content-item]";
+var directChildren = function (container, selector) {
+  return container ? Array.from(container.children).filter(function (el) {
+    return el instanceof HTMLElement && el.matches(selector);
+  }) : [];
+};
 var LsgCarouselController = /** @class */function () {
   function LsgCarouselController(viewport, elements, options) {
+    var _a;
     if (elements === void 0) {
       elements = {};
     }
@@ -2269,8 +2508,10 @@ var LsgCarouselController = /** @class */function () {
       options = {};
     }
     var _this = this;
-    var _a, _b, _c, _d;
-    this.embla = null;
+    var _b, _c, _d, _e, _f, _g, _h, _j;
+    this.media = null;
+    this.content = null;
+    this.syncing = false;
     /**
      * Embla automatically falls back to non-looping mode when there is not enough
      * slide content to create a safe loop (most noticeable with two-up layouts and
@@ -2278,82 +2519,271 @@ var LsgCarouselController = /** @class */function () {
      * when there is no native previous snap, jump to the final authored snap.
      */
     this.scrollPrev = function () {
-      if (!_this.embla) return;
-      if (_this.embla.canScrollPrev()) {
-        _this.embla.scrollPrev();
+      if (!_this.media) return;
+      if (_this.media.canScrollPrev()) {
+        _this.media.scrollPrev();
         return;
       }
-      var lastSnap = _this.embla.scrollSnapList().length - 1;
-      if (lastSnap >= 0) _this.embla.scrollTo(lastSnap);
+      var lastSnap = _this.media.scrollSnapList().length - 1;
+      if (lastSnap >= 0) _this.media.scrollTo(lastSnap);
     };
     /** See `scrollPrev` for why the explicit wrap fallback is required. */
     this.scrollNext = function () {
-      if (!_this.embla) return;
-      if (_this.embla.canScrollNext()) {
-        _this.embla.scrollNext();
+      if (!_this.media) return;
+      if (_this.media.canScrollNext()) {
+        _this.media.scrollNext();
         return;
       }
-      if (_this.embla.scrollSnapList().length > 0) _this.embla.scrollTo(0);
+      if (_this.media.scrollSnapList().length > 0) _this.media.scrollTo(0);
     };
+    /**
+     * The text track never initiates navigation, but it owns its own resize and
+     * mutation observers. If one instance re-measures without the other, this pulls
+     * the media track back onto the text track's index rather than letting them drift.
+     */
+    this.handleContentSelect = function () {
+      if (!_this.media || !_this.content || _this.syncing) return;
+      var target = _this.content.selectedScrollSnap();
+      if (_this.media.selectedScrollSnap() === target) return;
+      _this.syncing = true;
+      try {
+        _this.media.scrollTo(target, true);
+      } finally {
+        _this.syncing = false;
+      }
+    };
+    /** Reader-initiated navigation: repaint state, then crossfade the text. */
+    this.handleMediaSelect = function () {
+      _this.syncSelectedState();
+      _this.pushToContent();
+    };
+    /**
+     * Re-measure events (breakpoint flip, resize, authored items added/removed).
+     * The text is realigned with a hard cut because nothing moved for the reader.
+     */
+    this.handleResync = function () {
+      _this.syncSelectedState();
+      _this.pushToContent(true);
+    };
+    /** Repaints dot/arrow/a11y state from the media index. Never navigates. */
     this.syncSelectedState = function () {
-      var _a, _b;
-      var selected = (_b = (_a = _this.embla) === null || _a === void 0 ? void 0 : _a.selectedScrollSnap()) !== null && _b !== void 0 ? _b : 0;
+      var _a, _b, _c, _d, _e, _f, _g, _h;
+      var selected = (_b = (_a = _this.media) === null || _a === void 0 ? void 0 : _a.selectedScrollSnap()) !== null && _b !== void 0 ? _b : 0;
+      var snapCount = (_d = (_c = _this.media) === null || _c === void 0 ? void 0 : _c.scrollSnapList().length) !== null && _d !== void 0 ? _d : 0;
       _this.paginationBtns.forEach(function (button, index) {
         var active = index === selected;
         button.classList.toggle("lsg-carousel__dot--active", active);
         button.setAttribute("aria-current", active ? "true" : "false");
       });
+      // Cosmetic only. Looping plus the cyclic wrap above mean both arrows always
+      // act, so `disabled`/`aria-disabled` would misreport them to assistive tech.
+      // Themes use these classes to mute the leading/trailing half of the pill.
+      (_e = _this.els.prevBtn) === null || _e === void 0 ? void 0 : _e.classList.toggle("lsg-carousel__arrow--at-start", selected === 0);
+      (_f = _this.els.nextBtn) === null || _f === void 0 ? void 0 : _f.classList.toggle("lsg-carousel__arrow--at-end", snapCount > 0 && selected === snapCount - 1);
+      // Which slide is in focus, and which neighbour sits on each side of it. The
+      // neighbours only wrap when Embla is really looping: with too few slides it
+      // falls back to a plain track (see scrollPrev), where slide 0 has nothing
+      // to its left. `options` is the effective set, after that fallback.
+      var count = _this.mediaSlides.length;
+      var looping = (_h = (_g = _this.media) === null || _g === void 0 ? void 0 : _g.internalEngine().options.loop) !== null && _h !== void 0 ? _h : false;
+      var prev = looping ? (selected - 1 + count) % count : selected - 1;
+      var next = looping ? (selected + 1) % count : selected + 1;
+      _this.mediaSlides.forEach(function (slide, index) {
+        slide.classList.toggle(SLIDE_ACTIVE, index === selected);
+        slide.classList.toggle(SLIDE_PREV, index === prev);
+        slide.classList.toggle(SLIDE_NEXT, index === next);
+      });
+      // The fade plugin only sets opacity and pointer-events, so without this every
+      // faded-out text block keeps its heading in the accessibility tree and its CTA
+      // in the tab order - N copies of the same landmark for a sighted-equivalent
+      // view of one.
+      _this.contentSlides.forEach(function (slide, index) {
+        var active = index === selected;
+        slide.toggleAttribute("inert", !active);
+        if (active) slide.removeAttribute("aria-hidden");else slide.setAttribute("aria-hidden", "true");
+      });
     };
     this.els = elements;
+    this.mediaViewport = viewport;
     this.paginationBtns = elements.paginationBtns ? Array.from(elements.paginationBtns) : [];
-    this.embla = EmblaCarousel(viewport, {
-      align: "start",
+    var mediaTrack = viewport.firstElementChild;
+    var mediaSlides = directChildren(mediaTrack, MEDIA_ITEM_SELECTOR);
+    this.mediaSlides = mediaSlides;
+    var align = (_b = options.align) !== null && _b !== void 0 ? _b : "start";
+    // Embla resolves `container` as `root.children[0]` and `slides` as its
+    // element children. Passing both explicitly instead makes the instance
+    // immune to AEM injecting its own nodes (e.g. the edit-mode
+    // `div.new.section.aem-Grid-newComponent` drop target) into the track.
+    this.media = EmblaCarousel(viewport, {
+      // `center` loops natively from three items as long as a slide is at least
+      // half the viewport wide: Embla's canLoop() needs the OTHER slides to
+      // cover the viewport. LsgCarousel.scss sizes the full-width slides to
+      // --lsg-carousel-center-basis (50%) for exactly this reason.
+      align: align,
       // Every authored media item owns a pagination dot. `trimSnaps` can remove
       // the final snap when two-up/peek layouts do not have enough overflow,
       // leaving the last authored item only partially reachable. Keep all snaps
       // so dot/item indexes stay 1:1 for 2, 3, 4, ... media items.
+      //
+      // This is ALSO load-bearing for the text/media sync: `containSnaps` is
+      // `!loop && !!containScroll`, so with this `false` the snap list is
+      // always `snapsAligned` - one snap per slide, whatever the slide's
+      // flex-basis. That is the only reason a 380px peek track and a 100%-wide
+      // crossfade track can share one index. Reverting this to `trimSnaps`
+      // drops trailing snaps on the media track alone and desyncs the tail.
       containScroll: false,
-      direction: (_a = options.direction) !== null && _a !== void 0 ? _a : "ltr",
-      loop: (_b = options.loop) !== null && _b !== void 0 ? _b : true,
+      direction: (_c = options.direction) !== null && _c !== void 0 ? _c : "ltr",
+      loop: (_d = options.loop) !== null && _d !== void 0 ? _d : true,
       skipSnaps: false,
-      slidesToScroll: 1
+      slidesToScroll: 1,
+      container: mediaTrack !== null && mediaTrack !== void 0 ? mediaTrack : undefined,
+      slides: mediaSlides.length ? mediaSlides : undefined,
+      // All layouts collapse to the same mobile stack, which is never
+      // mirrored and never centred. Embla restores the selected index when a
+      // breakpoint re-activates, so the flip is not visible to the reader.
+      breakpoints: (_a = {}, _a[MOBILE_MEDIA_QUERY$1] = {
+        direction: "ltr",
+        align: "start"
+      }, _a)
     });
+    var contentViewport = (_e = elements.contentViewport) !== null && _e !== void 0 ? _e : null;
+    var contentTrack = contentViewport === null || contentViewport === void 0 ? void 0 : contentViewport.firstElementChild;
+    this.contentSlides = directChildren(contentTrack, CONTENT_ITEM_SELECTOR);
+    // Unequal counts are the one remaining way the two tracks can desync, and a
+    // text block silently paired with the wrong image is worse than no text
+    // animation at all. Degrade to media-only rather than risk it.
+    var countsMatch = mediaSlides.length > 0 && this.contentSlides.length === mediaSlides.length;
+    if (contentViewport && contentTrack && countsMatch) {
+      this.content = EmblaCarousel(contentViewport, {
+        align: "start",
+        // Must match the media track's snap arithmetic - see above.
+        containScroll: false,
+        // The text crossfades in place, so there is nothing to mirror.
+        direction: "ltr",
+        // Inert on a fade instance: the plugin calls `disableScroll()`, which
+        // deactivates the translate and every loop point. Set for config
+        // symmetry with the media track, not for behaviour.
+        loop: (_f = options.loop) !== null && _f !== void 0 ? _f : true,
+        skipSnaps: false,
+        slidesToScroll: 1,
+        // The reader drags the media, never the text. Without this the text
+        // track would fight the media track for the same pointer.
+        watchDrag: false,
+        container: contentTrack,
+        slides: this.contentSlides
+      }, [Fade()]);
+    }
     this.paginationHandlers = this.paginationBtns.map(function (_, index) {
       return function () {
         var _a;
-        (_a = _this.embla) === null || _a === void 0 ? void 0 : _a.scrollTo(index);
+        (_a = _this.media) === null || _a === void 0 ? void 0 : _a.scrollTo(index);
       };
     });
-    (_c = this.els.prevBtn) === null || _c === void 0 ? void 0 : _c.addEventListener("click", this.scrollPrev);
-    (_d = this.els.nextBtn) === null || _d === void 0 ? void 0 : _d.addEventListener("click", this.scrollNext);
+    // Focus mode: clicking a peeking neighbour centres it instead of reaching the
+    // media inside, so a half-hidden video cannot start playing off-centre.
+    // Capture phase, and Embla's own capture listener on the viewport runs first
+    // and swallows the click that ends a drag, so only real clicks get here.
+    this.slideClickHandlers = align === "center" ? mediaSlides.map(function (_, index) {
+      return function (event) {
+        if (!_this.media || _this.media.selectedScrollSnap() === index) return;
+        event.preventDefault();
+        event.stopPropagation();
+        _this.media.scrollTo(index);
+      };
+    }) : [];
+    (_g = this.els.prevBtn) === null || _g === void 0 ? void 0 : _g.addEventListener("click", this.scrollPrev);
+    (_h = this.els.nextBtn) === null || _h === void 0 ? void 0 : _h.addEventListener("click", this.scrollNext);
     this.paginationBtns.forEach(function (button, index) {
       button.addEventListener("click", _this.paginationHandlers[index]);
     });
-    this.embla.on("select", this.syncSelectedState);
-    this.embla.on("reInit", this.syncSelectedState);
-    this.syncSelectedState();
+    this.slideClickHandlers.forEach(function (handler, index) {
+      mediaSlides[index].addEventListener("click", handler, true);
+    });
+    this.media.on("select", this.handleMediaSelect);
+    this.media.on("reInit", this.handleResync);
+    this.media.on("slidesChanged", this.handleResync);
+    (_j = this.content) === null || _j === void 0 ? void 0 : _j.on("select", this.handleContentSelect);
+    // Initial alignment is a hard cut - there is nothing to crossfade from.
+    this.handleResync();
   }
+  /**
+   * Drive the text track from the media index.
+   *
+   * `jump` skips the crossfade (Embla sets duration 0, and the fade plugin then
+   * snaps opacity instantly). Use it only for re-measure events, never for
+   * reader-initiated navigation, or the text hard-cuts instead of fading.
+   */
+  LsgCarouselController.prototype.pushToContent = function (jump) {
+    if (jump === void 0) {
+      jump = false;
+    }
+    if (!this.media || !this.content || this.syncing) return;
+    var target = this.media.selectedScrollSnap();
+    if (this.content.selectedScrollSnap() === target) return;
+    this.syncing = true;
+    try {
+      this.content.scrollTo(target, jump);
+    } finally {
+      this.syncing = false;
+    }
+  };
   Object.defineProperty(LsgCarouselController.prototype, "emblaApi", {
     get: function () {
-      return this.embla;
+      return this.media;
+    },
+    enumerable: false,
+    configurable: true
+  });
+  Object.defineProperty(LsgCarouselController.prototype, "contentApi", {
+    /** Text track handle. Exposed for the index-parity checks in the test plan. */
+    get: function () {
+      return this.content;
     },
     enumerable: false,
     configurable: true
   });
   LsgCarouselController.prototype.destroy = function () {
     var _this = this;
-    var _a, _b;
+    var _a, _b, _c, _d;
     (_a = this.els.prevBtn) === null || _a === void 0 ? void 0 : _a.removeEventListener("click", this.scrollPrev);
     (_b = this.els.nextBtn) === null || _b === void 0 ? void 0 : _b.removeEventListener("click", this.scrollNext);
     this.paginationBtns.forEach(function (button, index) {
       button.removeEventListener("click", _this.paginationHandlers[index]);
     });
-    if (this.embla) {
-      this.embla.off("select", this.syncSelectedState);
-      this.embla.off("reInit", this.syncSelectedState);
-      this.embla.destroy();
-      this.embla = null;
+    this.slideClickHandlers.forEach(function (handler, index) {
+      _this.mediaSlides[index].removeEventListener("click", handler, true);
+    });
+    // Content first: its plugin restores the inline opacity/transform it wrote,
+    // and it reads `internalEngine()` while doing so.
+    if (this.content) {
+      this.content.off("select", this.handleContentSelect);
+      this.content.destroy();
+      this.content = null;
+    }
+    if (this.media) {
+      this.media.off("select", this.handleMediaSelect);
+      this.media.off("reInit", this.handleResync);
+      this.media.off("slidesChanged", this.handleResync);
+      this.media.destroy();
+      this.media = null;
     }
+    // Embla restores what Embla wrote. Everything below is ours, and leaving it
+    // behind would make server-rendered markup re-initialise into a stale state.
+    this.paginationBtns.forEach(function (button) {
+      button.classList.remove("lsg-carousel__dot--active");
+      button.removeAttribute("aria-current");
+    });
+    (_c = this.els.prevBtn) === null || _c === void 0 ? void 0 : _c.classList.remove("lsg-carousel__arrow--at-start");
+    (_d = this.els.nextBtn) === null || _d === void 0 ? void 0 : _d.classList.remove("lsg-carousel__arrow--at-end");
+    // SLIDE_ACTIVE stays off too: the server/React markup puts it on slide 0,
+    // so re-initialising adds it back there.
+    this.mediaSlides.forEach(function (slide) {
+      slide.classList.remove(SLIDE_ACTIVE, SLIDE_PREV, SLIDE_NEXT);
+    });
+    this.contentSlides.forEach(function (slide) {
+      slide.removeAttribute("inert");
+      slide.removeAttribute("aria-hidden");
+    });
   };
   return LsgCarouselController;
 }();
@@ -2365,24 +2795,28 @@ var mediaTypeFor = function (item) {
 var directionForLayout = function (layout) {
   return layout === "media-left" ? "rtl" : "ltr";
 };
+var hasText = function (item) {
+  return Boolean(item.preTitle || item.heading || item.body || item.cta);
+};
 var LsgCarousel = function (_a) {
-  var _b;
-  var heading = _a.heading,
+  var _b = _a.items,
+    items = _b === void 0 ? [] : _b,
+    _c = _a.layout,
+    layout = _c === void 0 ? "media-right" : _c,
+    background = _a.background,
+    accent = _a.accent,
+    _d = _a.headingTag,
+    headingTag = _d === void 0 ? "h2" : _d,
+    _e = _a.ariaLabel,
+    ariaLabel = _e === void 0 ? "Media carousel" : _e,
+    _f = _a.className,
+    className = _f === void 0 ? "" : _f,
+    heading = _a.heading,
     preTitle = _a.preTitle,
     body = _a.body,
-    cta = _a.cta,
-    _c = _a.items,
-    items = _c === void 0 ? [] : _c,
-    _d = _a.layout,
-    layout = _d === void 0 ? "media-right" : _d,
-    _e = _a.headingTag,
-    headingTag = _e === void 0 ? "h2" : _e,
-    _f = _a.ariaLabel,
-    ariaLabel = _f === void 0 ? "Media carousel" : _f,
-    _g = _a.className,
-    className = _g === void 0 ? "" : _g;
-  var rootRef = useRef(null);
+    cta = _a.cta;
   var viewportRef = useRef(null);
+  var contentViewportRef = useRef(null);
   var prevBtnRef = useRef(null);
   var nextBtnRef = useRef(null);
   var dotsRef = useRef(null);
@@ -2390,71 +2824,109 @@ var LsgCarousel = function (_a) {
   var HeadingTag = headingTag;
   var isCarousel = items.length > 1;
   var carouselDirection = directionForLayout(layout);
+  var carouselAlign = alignForLayout(layout);
+  // Legacy single-content-block callers passed the text alongside `items`. Fold
+  // it onto the first item so their carousel still renders its copy.
+  var resolvedItems = useMemo(function () {
+    var legacy = {
+      preTitle: preTitle,
+      heading: heading,
+      body: body,
+      cta: cta
+    };
+    var hasLegacy = Boolean(legacy.preTitle || legacy.heading || legacy.body || legacy.cta);
+    if (!hasLegacy || !items.length || hasText(items[0])) return items;
+    return items.map(function (item, index) {
+      return index === 0 ? __assign(__assign({}, legacy), item) : item;
+    });
+  }, [items, preTitle, heading, body, cta]);
   useEffect(function () {
     var _a, _b;
     if (!viewportRef.current || !isCarousel) return;
     controllerRef.current = new LsgCarouselController(viewportRef.current, {
       prevBtn: prevBtnRef.current,
       nextBtn: nextBtnRef.current,
-      paginationBtns: (_b = (_a = dotsRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll("[data-lsg-carousel-dot]")) !== null && _b !== void 0 ? _b : []
+      paginationBtns: (_b = (_a = dotsRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll("[data-lsg-carousel-dot]")) !== null && _b !== void 0 ? _b : [],
+      contentViewport: contentViewportRef.current
     }, {
       loop: true,
-      direction: carouselDirection
+      direction: carouselDirection,
+      align: carouselAlign
     });
     return function () {
       var _a;
       (_a = controllerRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
       controllerRef.current = null;
     };
-  }, [carouselDirection, isCarousel, items.length]);
-  var rootClasses = ["lsg-carousel", "lsg-carousel--".concat(layout), className].filter(Boolean).join(" ");
+  }, [carouselAlign, carouselDirection, isCarousel, resolvedItems.length]);
+  var rootClasses = ["lsg-carousel", "lsg-carousel--".concat(layout),
+  // In AEM this class arrives on the decoration div instead; the SCSS only
+  // sets inherited custom properties, so either position works.
+  background ? "lsg-carousel--bg-".concat(background) : "", accent ? "lsg-carousel--accent-".concat(accent) : "", className].filter(Boolean).join(" ");
+  var keyFor = function (item, index) {
+    var _a, _b, _c;
+    return (_a = item.id) !== null && _a !== void 0 ? _a : "".concat(mediaTypeFor(item), "-").concat((_c = (_b = item.imageUrl) !== null && _b !== void 0 ? _b : item.videoUrl) !== null && _c !== void 0 ? _c : index, "-").concat(index);
+  };
   return /*#__PURE__*/React.createElement("section", {
-    ref: rootRef,
     className: rootClasses,
     "data-lsg-is": "carousel",
     "data-lsg-carousel-layout": layout,
     "data-lsg-carousel-direction": carouselDirection,
-    "data-lsg-carousel-count": items.length,
+    "data-lsg-carousel-count": resolvedItems.length,
     "aria-label": ariaLabel
   }, /*#__PURE__*/React.createElement("div", {
     className: "lsg-carousel__shell"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "lsg-carousel__content"
-  }, preTitle && /*#__PURE__*/React.createElement("div", {
-    className: "lsg-carousel__pre-title"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "lsg-carousel__pre-title-marker",
-    "aria-hidden": "true"
-  }), /*#__PURE__*/React.createElement("span", null, preTitle)), /*#__PURE__*/React.createElement(HeadingTag, {
-    className: "lsg-carousel__heading"
-  }, heading), body && /*#__PURE__*/React.createElement("p", {
-    className: "lsg-carousel__body"
-  }, body), cta && /*#__PURE__*/React.createElement("div", {
-    className: "lsg-carousel__actions"
-  }, /*#__PURE__*/React.createElement(LsgButton, {
-    className: "lsg-carousel__cta",
-    href: cta.href,
-    external: cta.external,
-    variant: (_b = cta.variant) !== null && _b !== void 0 ? _b : "primary",
-    onClick: cta.onClick
-  }, cta.label))), /*#__PURE__*/React.createElement("div", {
+    className: "lsg-carousel__content",
+    ref: contentViewportRef,
+    "data-lsg-carousel-content-viewport": true
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "lsg-carousel__content-track"
+  }, resolvedItems.map(function (item, index) {
+    var _a;
+    return /*#__PURE__*/React.createElement("div", {
+      key: keyFor(item, index),
+      className: "lsg-carousel__content-slide",
+      "data-lsg-carousel-content-item": true
+    }, item.preTitle && /*#__PURE__*/React.createElement("div", {
+      className: "lsg-carousel__pre-title"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "lsg-carousel__pre-title-marker",
+      "aria-hidden": "true"
+    }), /*#__PURE__*/React.createElement("span", null, item.preTitle)), item.heading && /*#__PURE__*/React.createElement(HeadingTag, {
+      className: "lsg-carousel__heading"
+    }, item.heading), item.body && /*#__PURE__*/React.createElement("p", {
+      className: "lsg-carousel__body"
+    }, item.body), item.cta && /*#__PURE__*/React.createElement("div", {
+      className: "lsg-carousel__actions"
+    }, /*#__PURE__*/React.createElement(LsgButton, {
+      className: "lsg-carousel__cta",
+      href: item.cta.href,
+      external: item.cta.external,
+      variant: (_a = item.cta.variant) !== null && _a !== void 0 ? _a : "primary",
+      onClick: item.cta.onClick
+    }, item.cta.label)));
+  }))), /*#__PURE__*/React.createElement("div", {
     className: "lsg-carousel__media-column"
   }, /*#__PURE__*/React.createElement("div", {
     className: "lsg-carousel__viewport",
     ref: viewportRef,
-    dir: carouselDirection
+    dir: carouselDirection,
+    "data-lsg-carousel-media-viewport": true
   }, /*#__PURE__*/React.createElement("div", {
     className: "lsg-carousel__track",
     role: "list"
-  }, items.map(function (item, index) {
-    var _a, _b, _c, _d, _e, _f, _g;
+  }, resolvedItems.map(function (item, index) {
+    var _a, _b, _c, _d;
     var type = mediaTypeFor(item);
-    var key = (_a = item.id) !== null && _a !== void 0 ? _a : "".concat(type, "-").concat((_c = (_b = item.imageUrl) !== null && _b !== void 0 ? _b : item.videoUrl) !== null && _c !== void 0 ? _c : index, "-").concat(index);
     return /*#__PURE__*/React.createElement("article", {
-      key: key,
-      className: "lsg-carousel__slide",
+      key: keyFor(item, index)
+      // Slide 0 starts active, as the first dot does, so the
+      // full-width focus mode is not all-shrunk before JS runs.
+      ,
+      className: "lsg-carousel__slide".concat(index === 0 ? " lsg-carousel__slide--active" : ""),
       role: "listitem",
-      "aria-label": "Slide ".concat(index + 1, " of ").concat(items.length),
+      "aria-label": "Slide ".concat(index + 1, " of ").concat(resolvedItems.length),
       "data-lsg-carousel-item": true
     }, /*#__PURE__*/React.createElement("div", {
       className: "lsg-carousel__media"
@@ -2462,10 +2934,10 @@ var LsgCarousel = function (_a) {
       videoUrl: item.videoUrl,
       imageUrl: item.videoPoster,
       imageAlt: item.imageAlt,
-      controls: (_d = item.videoControls) !== null && _d !== void 0 ? _d : true,
-      autoplay: (_e = item.videoAutoPlay) !== null && _e !== void 0 ? _e : false,
-      muted: (_f = item.videoMuted) !== null && _f !== void 0 ? _f : true,
-      loop: (_g = item.videoLoop) !== null && _g !== void 0 ? _g : false,
+      controls: (_a = item.videoControls) !== null && _a !== void 0 ? _a : true,
+      autoplay: (_b = item.videoAutoPlay) !== null && _b !== void 0 ? _b : false,
+      muted: (_c = item.videoMuted) !== null && _c !== void 0 ? _c : true,
+      loop: (_d = item.videoLoop) !== null && _d !== void 0 ? _d : false,
       displayMode: "content",
       showTags: false,
       className: "lsg-carousel__video-component"
@@ -2480,8 +2952,10 @@ var LsgCarousel = function (_a) {
       className: "lsg-carousel__media-label"
     }, item.label)));
   }))), isCarousel && /*#__PURE__*/React.createElement("div", {
-    className: "lsg-carousel__navigation",
+    className: "lsg-carousel__controls",
     "aria-label": "Carousel navigation"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "lsg-carousel__nav"
   }, /*#__PURE__*/React.createElement("button", {
     ref: prevBtnRef,
     className: "lsg-carousel__arrow lsg-carousel__arrow--prev",
@@ -2491,10 +2965,19 @@ var LsgCarousel = function (_a) {
   }, /*#__PURE__*/React.createElement("span", {
     className: "lsg-carousel__arrow-icon",
     "aria-hidden": "true"
-  })), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("button", {
+    ref: nextBtnRef,
+    className: "lsg-carousel__arrow lsg-carousel__arrow--next",
+    type: "button",
+    "aria-label": "Next slide",
+    "data-lsg-carousel-next": true
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "lsg-carousel__arrow-icon",
+    "aria-hidden": "true"
+  }))), /*#__PURE__*/React.createElement("div", {
     className: "lsg-carousel__pagination",
     ref: dotsRef
-  }, items.map(function (item, index) {
+  }, resolvedItems.map(function (item, index) {
     var _a;
     return /*#__PURE__*/React.createElement("button", {
       key: (_a = item.id) !== null && _a !== void 0 ? _a : "dot-".concat(index),
@@ -2504,15 +2987,6 @@ var LsgCarousel = function (_a) {
       "aria-current": index === 0 ? "true" : "false",
       "data-lsg-carousel-dot": true
     });
-  })), /*#__PURE__*/React.createElement("button", {
-    ref: nextBtnRef,
-    className: "lsg-carousel__arrow lsg-carousel__arrow--next",
-    type: "button",
-    "aria-label": "Next slide",
-    "data-lsg-carousel-next": true
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "lsg-carousel__arrow-icon",
-    "aria-hidden": "true"
   }))))));
 };
 
@@ -4225,227 +4699,6 @@ var LsgFooter = function (_a) {
   }))))), bottomTopBar, bottomBar);
 };
 
-function clampNumber(number, min, max) {
-  return Math.min(Math.max(number, min), max);
-}
-function isNumber(value) {
-  return typeof value === 'number' && !isNaN(value);
-}
-function Fade(userOptions = {}) {
-  const fullOpacity = 1;
-  const noOpacity = 0;
-  const fadeFriction = 0.68;
-  let emblaApi;
-  let opacities = [];
-  let fadeToNextDistance;
-  let distanceFromPointerDown = 0;
-  let fadeVelocity = 0;
-  let progress = 0;
-  let shouldFadePair = false;
-  let defaultSettledBehaviour;
-  let defaultProgressBehaviour;
-  function init(emblaApiInstance) {
-    emblaApi = emblaApiInstance;
-    const selectedSnap = emblaApi.selectedScrollSnap();
-    const {
-      scrollBody,
-      containerRect,
-      axis
-    } = emblaApi.internalEngine();
-    const containerSize = axis.measureSize(containerRect);
-    fadeToNextDistance = clampNumber(containerSize * 0.75, 200, 500);
-    shouldFadePair = false;
-    opacities = emblaApi.scrollSnapList().map((_, index) => index === selectedSnap ? fullOpacity : noOpacity);
-    defaultSettledBehaviour = scrollBody.settled;
-    defaultProgressBehaviour = emblaApi.scrollProgress;
-    scrollBody.settled = settled;
-    emblaApi.scrollProgress = scrollProgress;
-    emblaApi.on('select', select).on('slideFocus', fadeToSelectedSnapInstantly).on('pointerDown', pointerDown).on('pointerUp', pointerUp);
-    disableScroll();
-    fadeToSelectedSnapInstantly();
-  }
-  function destroy() {
-    const {
-      scrollBody
-    } = emblaApi.internalEngine();
-    scrollBody.settled = defaultSettledBehaviour;
-    emblaApi.scrollProgress = defaultProgressBehaviour;
-    emblaApi.off('select', select).off('slideFocus', fadeToSelectedSnapInstantly).off('pointerDown', pointerDown).off('pointerUp', pointerUp);
-    emblaApi.slideNodes().forEach(slideNode => {
-      const slideStyle = slideNode.style;
-      slideStyle.opacity = '';
-      slideStyle.transform = '';
-      slideStyle.pointerEvents = '';
-      if (!slideNode.getAttribute('style')) slideNode.removeAttribute('style');
-    });
-  }
-  function fadeToSelectedSnapInstantly() {
-    const selectedSnap = emblaApi.selectedScrollSnap();
-    setOpacities(selectedSnap, fullOpacity);
-  }
-  function pointerUp() {
-    shouldFadePair = false;
-  }
-  function pointerDown() {
-    shouldFadePair = false;
-    distanceFromPointerDown = 0;
-    fadeVelocity = 0;
-  }
-  function select() {
-    const duration = emblaApi.internalEngine().scrollBody.duration();
-    fadeVelocity = duration ? 0 : fullOpacity;
-    shouldFadePair = true;
-    if (!duration) fadeToSelectedSnapInstantly();
-  }
-  function getSlideTransform(position) {
-    const {
-      axis
-    } = emblaApi.internalEngine();
-    const translateAxis = axis.scroll.toUpperCase();
-    return `translate${translateAxis}(${axis.direction(position)}px)`;
-  }
-  function disableScroll() {
-    const {
-      translate,
-      slideLooper
-    } = emblaApi.internalEngine();
-    translate.clear();
-    translate.toggleActive(false);
-    slideLooper.loopPoints.forEach(({
-      translate
-    }) => {
-      translate.clear();
-      translate.toggleActive(false);
-    });
-  }
-  function lockExcessiveScroll(fadeIndex) {
-    const {
-      scrollSnaps,
-      location,
-      target
-    } = emblaApi.internalEngine();
-    if (!isNumber(fadeIndex) || opacities[fadeIndex] < 0.5) return;
-    location.set(scrollSnaps[fadeIndex]);
-    target.set(location);
-  }
-  function setOpacities(fadeIndex, velocity) {
-    const scrollSnaps = emblaApi.scrollSnapList();
-    scrollSnaps.forEach((_, indexA) => {
-      const absVelocity = Math.abs(velocity);
-      const currentOpacity = opacities[indexA];
-      const isFadeIndex = indexA === fadeIndex;
-      const nextOpacity = isFadeIndex ? currentOpacity + absVelocity : currentOpacity - absVelocity;
-      const clampedOpacity = clampNumber(nextOpacity, noOpacity, fullOpacity);
-      opacities[indexA] = clampedOpacity;
-      const fadePair = isFadeIndex && shouldFadePair;
-      const indexB = emblaApi.previousScrollSnap();
-      if (fadePair) opacities[indexB] = 1 - clampedOpacity;
-      if (isFadeIndex) setProgress(fadeIndex, clampedOpacity);
-      setOpacity(indexA);
-    });
-  }
-  function setOpacity(index) {
-    const slidesInSnap = emblaApi.internalEngine().slideRegistry[index];
-    const {
-      scrollSnaps,
-      containerRect
-    } = emblaApi.internalEngine();
-    const opacity = opacities[index];
-    slidesInSnap.forEach(slideIndex => {
-      const slideStyle = emblaApi.slideNodes()[slideIndex].style;
-      const roundedOpacity = parseFloat(opacity.toFixed(2));
-      const hasOpacity = roundedOpacity > noOpacity;
-      const position = hasOpacity ? scrollSnaps[index] : containerRect.width + 2;
-      const transform = getSlideTransform(position);
-      if (hasOpacity) slideStyle.transform = transform;
-      slideStyle.opacity = roundedOpacity.toString();
-      slideStyle.pointerEvents = opacity > 0.5 ? 'auto' : 'none';
-      if (!hasOpacity) slideStyle.transform = transform;
-    });
-  }
-  function setProgress(fadeIndex, opacity) {
-    const {
-      index,
-      dragHandler,
-      scrollSnaps
-    } = emblaApi.internalEngine();
-    const pointerDown = dragHandler.pointerDown();
-    const snapFraction = 1 / (scrollSnaps.length - 1);
-    let indexA = fadeIndex;
-    let indexB = pointerDown ? emblaApi.selectedScrollSnap() : emblaApi.previousScrollSnap();
-    if (pointerDown && indexA === indexB) {
-      const reverseSign = Math.sign(distanceFromPointerDown) * -1;
-      indexA = indexB;
-      indexB = index.clone().set(indexB).add(reverseSign).get();
-    }
-    const currentPosition = indexB * snapFraction;
-    const diffPosition = (indexA - indexB) * snapFraction;
-    progress = currentPosition + diffPosition * opacity;
-  }
-  function getFadeIndex() {
-    const {
-      dragHandler,
-      index,
-      scrollBody
-    } = emblaApi.internalEngine();
-    const selectedSnap = emblaApi.selectedScrollSnap();
-    if (!dragHandler.pointerDown()) return selectedSnap;
-    const directionSign = Math.sign(scrollBody.velocity());
-    const distanceSign = Math.sign(distanceFromPointerDown);
-    const nextSnap = index.clone().set(selectedSnap).add(directionSign * -1).get();
-    if (!directionSign || !distanceSign) return null;
-    return distanceSign === directionSign ? nextSnap : selectedSnap;
-  }
-  function fade(emblaApi) {
-    const {
-      dragHandler,
-      scrollBody
-    } = emblaApi.internalEngine();
-    const pointerDown = dragHandler.pointerDown();
-    const velocity = scrollBody.velocity();
-    const duration = scrollBody.duration();
-    const fadeIndex = getFadeIndex();
-    const noFadeIndex = !isNumber(fadeIndex);
-    if (pointerDown) {
-      if (!velocity) return;
-      distanceFromPointerDown += velocity;
-      fadeVelocity = Math.abs(velocity / fadeToNextDistance);
-      lockExcessiveScroll(fadeIndex);
-    }
-    if (!pointerDown) {
-      if (!duration || noFadeIndex) return;
-      fadeVelocity += (fullOpacity - opacities[fadeIndex]) / duration;
-      fadeVelocity *= fadeFriction;
-    }
-    if (noFadeIndex) return;
-    setOpacities(fadeIndex, fadeVelocity);
-  }
-  function settled() {
-    const {
-      target,
-      location
-    } = emblaApi.internalEngine();
-    const diffToTarget = target.get() - location.get();
-    const notReachedTarget = Math.abs(diffToTarget) >= 1;
-    const fadeIndex = getFadeIndex();
-    const noFadeIndex = !isNumber(fadeIndex);
-    fade(emblaApi);
-    if (noFadeIndex || notReachedTarget) return false;
-    return opacities[fadeIndex] > 0.999;
-  }
-  function scrollProgress() {
-    return progress;
-  }
-  const self = {
-    name: 'fade',
-    options: userOptions,
-    init,
-    destroy
-  };
-  return self;
-}
-Fade.globalOptions = undefined;
-
 var LsgHeroController = /** @class */function () {
   function LsgHeroController(viewport, elements, options) {
     if (elements === void 0) {