@aurodesignsystem-dev/auro-slideshow 0.0.0-pr21.0 → 0.0.0-pr22.0

package/demo/auro-slideshow.min.js

@@ -2724,7 +2724,6 @@ let AuroElement$1 = class AuroElement extends i$2 {
        * @private
        */
       wrapper: {
-        type: HTMLElement,
         attribute: false,
         reflect: false
       }
@@ -3200,13 +3199,23 @@ class AuroButton extends AuroElement$1 {
       },
 
       /**
-       * Populates `tabIndex` to define the focusable sequence in keyboard navigation.
+       * Populates `tabindex` to define the focusable sequence in keyboard navigation.
        */
       tIndex: {
         type: String,
         reflect: true
       },
 
+      /**
+       * Populates `tabindex` to define the focusable sequence in keyboard navigation.
+       * Must be used with "." to ensure the host element does not retain a reference to the `tabindex` attribute.
+       * Example: `<auro-button .tabindex="${this.disabled ? '-1' : '0'}"></auro-button>`
+       */
+      tabindex: {
+        type: String,
+        reflect: false
+      },
+
       /**
        * Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element.
        */
@@ -3358,7 +3367,7 @@ class AuroButton extends AuroElement$1 {
         part="${part}"
         aria-label="${o(this.loading ? this.loadingText : this.currentAriaLabel || undefined)}"
         aria-labelledby="${o(this.loading ? undefined : this.currentAriaLabelledBy || undefined)}"
-        tabIndex="${o(this.tIndex)}"
+        tabindex="${o(this.tIndex || this.tabindex)}"
         ?autofocus="${this.autofocus}"
         class=${e(classes)}
         ?disabled="${this.disabled || this.loading}"
@@ -3394,7 +3403,7 @@ class AuroButton extends AuroElement$1 {
   }
 }
 
-var buttonVersion = "9.3.3";
+var buttonVersion = "11.2.1";
 
 var chevronLeft = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"chevron-left__desc\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"chevron-left__desc\">Directional indicator; left.</desc><path d=\"m14.395 6.345.084.073a.75.75 0 0 1 .072.977l-.072.084-4.47 4.47 4.47 4.47a.75.75 0 0 1 .072.976l-.072.084a.75.75 0 0 1-.977.072l-.084-.072-4.823-4.823a1 1 0 0 1 0-1.415l4.823-4.823a.75.75 0 0 1 .977-.073\"/></svg>"};
 
@@ -3799,15 +3808,24 @@ class AuroIcon extends BaseIcon {
   }
 }
 
-var iconVersion = "8.0.2";
+var iconVersion = "8.0.4";
 
-var styleCss = i$5`:host{--border-size: 6px;--border-radius: 24px}.container{display:flex;width:100%;flex-direction:column;align-items:flex-start}.slideshow-wrapper{position:relative;width:100%;display:flex;justify-content:start;align-items:center;overflow:hidden;padding:var(--border-size)}.embla{max-width:100%;margin:0;--slide-size: 100%}.embla__container{display:flex}.embla__slide{transform:translateZ(0);flex:0 0 var(--slide-size);min-width:0;border-radius:var(--border-radius);margin-right:1rem;box-sizing:border-box;overflow:hidden}.embla__slide:focus-visible{outline:unset;box-shadow:0 0 0 2px var(--ds-basic-color-border-inverse, #ffffff),0 0 0 var(--border-size) var(--ds-advanced-color-state-focused, #01426a)}.embla__slide:not(.active):not(.in-view){filter:brightness(30%)}.scroll-prev,.scroll-next{position:absolute;display:none;top:50%;transform:translateY(-50%);z-index:10;--ds-auro-button-container-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-container-image: var(--ds-advanced-color-state-focused, #01426a);color:var(--ds-advanced-color-shared-background, #ffffff)}.scroll-prev:hover,.scroll-next:hover{--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-inverse-hover, #ebf3f9)}.scroll-prev{left:8px}.scroll-next{right:8px}.slideshow-wrapper:hover .scroll-prev,.slideshow-wrapper:hover .scroll-next{display:block}.pagination-container{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;width:100%;margin-top:40px;gap:14px}.embla__dots{display:flex;gap:16px}.embla__dot{width:12px;height:12px;border-radius:50%;border:none;background-color:var(--ds-advanced-color-button-primary-background-inactive, #cfe0ef);position:relative;cursor:pointer;transition:all .3s ease-in-out}.embla__dot:hover:not(.embla__dot--selected){background-color:var(--ds-advanced-color-button-primary-background-inactive-hover, #89b2d4)}.embla__dot:before{content:"";position:absolute;width:24px;height:24px;cursor:pointer;top:50%;left:50%;transform:translate(-50%,-50%)}.embla__dot--selected{width:52px;height:12px;border-radius:1.8rem;background-color:var(--ds-advanced-color-button-primary-background, #01426a)}.embla__dot--selected:before{width:64px}.embla__progress{border-radius:1.8rem;border:none;background-color:var(--ds-advanced-color-button-primary-background-inactive, #cfe0ef);position:relative;align-self:center;height:12px;width:56px;max-width:90%;overflow:hidden;cursor:pointer;justify-self:center;transition:all .3s ease-in-out}.embla__progress:hover{background-color:var(--ds-advanced-color-button-primary-background-inactive-hover, #89b2d4)}.embla__progress__bar{border-radius:inherit;background-color:var(--ds-advanced-color-button-primary-background, #01426a);position:absolute;width:100%;top:0;bottom:0;left:-100%;animation-name:autoplay-progress;animation-timing-function:linear;animation-iteration-count:1;animation-play-state:running}.embla__progress--paused .embla__progress__bar{animation-play-state:paused}@keyframes autoplay-progress{0%{transform:translateZ(0)}to{transform:translate3d(100%,0,0)}}
+var styleCss = i$5`:host{--border-size: 6px;--border-radius: 24px}.container{display:flex;width:100%;flex-direction:column;align-items:flex-start}.slideshow-wrapper{position:relative;display:flex;width:100%;overflow:hidden;align-items:center;justify-content:start;padding:var(--border-size)}.embla{max-width:100%;margin:0;--slide-size: 100%}.embla__container{display:flex}.embla__slide{transform:translateZ(0);min-width:0;flex:0 0 var(--slide-size);border-radius:var(--border-radius);box-sizing:border-box;margin-right:1rem;overflow:hidden}.embla__slide:focus-visible{outline:unset;box-shadow:0 0 0 2px var(--ds-basic-color-border-inverse, #ffffff),0 0 0 var(--border-size) var(--ds-advanced-color-state-focused, #01426a)}.embla__slide:not(.active):not(.in-view){filter:brightness(30%)}.scroll-prev,.scroll-next{position:absolute;display:none;top:50%;transform:translateY(-50%);z-index:10;--ds-auro-button-container-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-container-image: var(--ds-advanced-color-state-focused, #01426a);color:var(--ds-advanced-color-shared-background, #ffffff)}.scroll-prev:hover,.scroll-next:hover{--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-inverse-hover, #ebf3f9)}.scroll-prev{left:8px}.scroll-next{right:8px}.slideshow-wrapper:hover .scroll-prev,.slideshow-wrapper:hover .scroll-next{display:block}.pagination-container{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;width:100%;margin-top:40px;gap:14px}.embla__dots{display:flex;gap:16px}.embla__dot{width:12px;height:12px;border-radius:50%;border:none;background-color:var(--ds-advanced-color-button-primary-background-inactive, #cfe0ef);position:relative;cursor:pointer;transition:all .3s ease-in-out}.embla__dot:hover:not(.embla__dot--selected){background-color:var(--ds-advanced-color-button-primary-background-inactive-hover, #89b2d4)}.embla__dot:before{content:"";width:24px;height:24px;position:absolute;cursor:pointer;top:50%;left:50%;transform:translate(-50%,-50%)}.embla__dot--selected{width:52px;height:12px;border-radius:1.8rem;background-color:var(--ds-advanced-color-button-primary-background, #01426a)}.embla__dot--selected:before{width:64px}.embla__progress{width:52px;height:12px;border-radius:1.8rem;border:none;background-color:var(--ds-advanced-color-button-primary-background-inactive, #cfe0ef);position:relative;overflow:hidden;cursor:pointer;align-self:center;justify-self:center;transition:all .3s ease-in-out}.embla__progress:hover:not(.stopped){background-color:var(--ds-advanced-color-button-primary-background-inactive-hover, #89b2d4)}.embla__progress__bar{border-radius:inherit;background-color:var(--ds-advanced-color-button-primary-background, #01426a);position:absolute;width:100%;top:0;bottom:0;left:-100%;animation-name:autoplay-progress;animation-timing-function:linear;animation-iteration-count:1;animation-play-state:running}.embla__progress--paused .embla__progress__bar{animation-play-state:paused}.stopped{background-color:var(--ds-advanced-color-button-primary-background, #01426a)}@keyframes autoplay-progress{0%{transform:translateZ(0)}to{transform:translate3d(100%,0,0)}}
 `;
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
 
+/**
+ * The auro-slideshow component is a customizable slideshow that displays a series of slides
+ * with several options such as autoplay, navigation controls, and pagination dots.
+ *
+ * @slot - Default slot for the slides. Each child element will be treated as a slide.
+ * @csspart prev-button - Use to style the previous button control.
+ * @csspart next-button - Use to style the next button control.
+ * @csspart play-pause-button - Use to style the play/pause button control.
+ */
 class AuroSlideshow extends i$2 {
   constructor() {
     super();
@@ -3964,6 +3982,14 @@ class AuroSlideshow extends i$2 {
     return this.shadowRoot.querySelector(".play-pause");
   }
 
+  get _prevBtn() {
+    return this.shadowRoot.querySelector(".scroll-prev");
+  }
+
+  get _nextBtn() {
+    return this.shadowRoot.querySelector(".scroll-next");
+  }
+
   get _dotsNode() {
     return this.shadowRoot.querySelector(".embla__dots");
   }
@@ -3972,7 +3998,54 @@ class AuroSlideshow extends i$2 {
     return this.shadowRoot.querySelector(".embla__progress");
   }
 
-  /** @private */
+  // ========== PUBLIC METHODS =================
+
+  /**
+   * Starts the slideshow playback.
+   * @returns {void}
+   */
+  play() {
+    if (this.autoplay) {
+      this.embla?.plugins()?.autoplay.play();
+    } else if (this.autoScroll) {
+      this.embla?.plugins()?.autoScroll.play();
+    }
+  }
+
+  /**
+   * Stops the slideshow playback.
+   * @returns {void}
+   */
+  stop() {
+    if (this.autoplay) {
+      this.embla?.plugins()?.autoplay.stop();
+    } else if (this.autoScroll) {
+      this.embla?.plugins()?.autoScroll.stop();
+    }
+  }
+
+  /**
+   * Scrolls to the previous slide.
+   * @returns {void}
+   */
+  scrollPrev() {
+    this.embla.scrollPrev();
+  }
+
+  /**
+   * Scrolls to the next slide.
+   * @returns {void}
+   */
+  scrollNext() {
+    this.embla.scrollNext();
+  }
+
+  // ========== PRIVATE METHODS =================
+
+  /**
+   * @private
+   * Initializes the Embla carousel with the provided options and plugins.
+   */
   initializeEmbla() {
     const emblaNode = this.shadowRoot.querySelector(".embla");
     const options = { loop: this.loop, align: "start" };
@@ -3989,6 +4062,7 @@ class AuroSlideshow extends i$2 {
       playOnInit: this.playOnInit,
       delay: this.delay,
       stopOnMouseEnter: true,
+      stopOnLastSnap: !this.loop,
     };
 
     const autoscrollOptions = {
@@ -4000,17 +4074,17 @@ class AuroSlideshow extends i$2 {
 
     const plugins = [ClassNames(classNamesOptions)];
 
-    // Autoplay and AutoScroll cannot be used together.
+    // Prevent both autoplay and autoScroll from being used simultaneously.
     if (this.autoplay && this.autoScroll) {
       console.warn(
-        "Autoplay and AutoScroll are not meant to be used together. Please select one.",
+        "Autoplay and AutoScroll are not meant to be used together. AutoScroll has been disabled.",
       );
       this.autoScroll = false;
     }
     if (this.autoplay) {
       plugins.push(Autoplay(autoplayOptions));
     }
-    if (this.autoScroll) {
+    if (this.autoScroll && !this.isTouchDevice()) {
       plugins.push(AutoScroll(autoscrollOptions));
     }
 
@@ -4021,43 +4095,57 @@ class AuroSlideshow extends i$2 {
       this.addDotBtnsAndClickHandlers(
         this.embla,
         this._dotsNode,
-        this.onNavButtonClick,
+        this.stopAutoplayOnInteraction,
       );
     }
 
+    if (this.navigation && !this.isTouchDevice()) {
+      this.embla
+        .on("select", this.toggleNavBtnsState)
+        .on("init", this.toggleNavBtnsState)
+        .on("reInit", this.toggleNavBtnsState);
+    }
+
     if (this.autoplay) {
-      this.addAutoPlayBtnListener(this.embla, this._playBtn);
       this.embla
-        .on("autoplay:stop", () => {
-          this.isPlaying = false;
-        })
-        .on("autoplay:play", () => {
-          this.isPlaying = true;
-        });
+        .on("autoplay:stop", this.togglePlayButtonOnStop)
+        .on("autoplay:play", this.togglePlayButtonOnPlay);
     }
 
-    if (this.autoScroll) {
-      this.addAutoScrollBtnListener(this.embla, this._playBtn);
+    if (this.autoScroll && !this.isTouchDevice()) {
       this.embla
-        .on("autoScroll:stop", () => {
-          this.isPlaying = false;
-        })
-        .on("autoScroll:play", () => {
-          this.isPlaying = true;
-        });
+        .on("autoScroll:stop", this.togglePlayButtonOnStop)
+        .on("autoScroll:play", this.togglePlayButtonOnPlay);
     }
   }
 
-  firstUpdated() {
-    this.updateSlides();
-    this.initializeEmbla();
-
-    // add event listener to embla instance to toggle tabindex on active slide whenever slide is changed
-    this.embla.on("select", this.toggleTabIndex);
+  /**
+   * @private
+   * Gets slides from the slot, adds necessary classes and event listeners,
+   * and updates the Embla instance with the new slides.
+   */
+  updateSlides() {
+    if (this._slot) {
+      this.slides = Array.from(this._slot.assignedElements());
+
+      this.slides.forEach((element, index) => {
+        element.classList.add("embla__slide");
+        element.addEventListener("keydown", this.handleKeydown);
+        if (index === 0) {
+          element.setAttribute("tabindex", "0");
+        } else {
+          element.setAttribute("tabindex", "-1");
+        }
+      });
 
-    this.isPlaying = this.playOnInit;
+      // Attach slides to the Embla instance
+      const emblaContainer = this.shadowRoot.querySelector(".embla__container");
+      emblaContainer.replaceChildren(...this.slides);
+    }
   }
 
+  // ========== PRIVATE HELPER METHODS =================
+
   /**
    * @private
    * Toggles the tabindex attribute on the active slide to allow keyboard navigation.
@@ -4072,130 +4160,137 @@ class AuroSlideshow extends i$2 {
 
   /**
    * @private
-   * Handles the slot change event to update slides and reinitialize Embla.
+   * Toggles the icon and aria-label of the play button to stopped state.
    */
-  handleSlotChange() {
-    this.updateSlides();
-
-    // Reinitialize Embla with new slides
-    if (this.embla) {
-      this.embla.reInit();
-    }
-  }
+  togglePlayButtonOnStop = () => {
+    this.isPlaying = false;
+    this.playBtnLabel = this.playLabel;
+  };
 
   /**
    * @private
-   * @param {KeyboardEvent} event - The keydown event triggered by the user.
-   * @returns {void}
+   * Toggles the icon and aria-label of the play button to playing state.
    */
-  handleKeydown = (event) => {
-    const focusActiveSlide = () => {
-      setTimeout(() => {
-        const activeSlide = this.slides[this.embla.selectedScrollSnap()];
-        activeSlide.focus();
-      }, 200);
-    };
-    if (event.key === "ArrowLeft") {
-      event.preventDefault();
-      this.embla.scrollPrev();
-      focusActiveSlide();
-    } else if (event.key === "ArrowRight") {
-      event.preventDefault();
-      this.embla.scrollNext();
-      focusActiveSlide();
-    }
+  togglePlayButtonOnPlay = () => {
+    this.isPlaying = true;
+    this.playBtnLabel = this.pauseLabel;
   };
 
-  /** @private */
-  updateSlides() {
-    if (!this._slot) {
-      return;
+  /**
+   * @private
+   * Adds and removes disabled attribute if at the beginning or end of the slideshow and loop is off.
+   */
+  toggleNavBtnsState = () => {
+    if (this.embla.canScrollPrev()) {
+      this._prevBtn.removeAttribute("disabled");
+    } else {
+      this._prevBtn.setAttribute("disabled", "");
     }
 
-    this.slides = Array.from(this._slot.assignedElements());
-
-    this.slides.forEach((element, index) => {
-      element.classList.add("embla__slide");
-      element.addEventListener("keydown", this.handleKeydown);
-      if (index === 0) {
-        element.setAttribute("tabindex", "0");
-      } else {
-        element.setAttribute("tabindex", "-1");
-      }
-    });
-
-    // Attach slides to the Embla instance
-    const emblaContainer = this.shadowRoot.querySelector(".embla__container");
-    emblaContainer.replaceChildren(...this.slides);
-  }
+    if (this.embla.canScrollNext()) {
+      this._nextBtn.removeAttribute("disabled");
+    } else {
+      this._nextBtn.setAttribute("disabled", "");
+    }
+  };
 
   /**
    * @private
-   * Stops autoplay when the user interacts with the navigation buttons.
+   * Stops autoplay when the user interacts with the navigation controls or pagination dots.
    */
-  onNavButtonClick = (emblaApi) => {
+  stopAutoplayOnInteraction = (emblaApi) => {
     const autoplay = emblaApi?.plugins()?.autoplay;
     if (!autoplay) return;
 
-    const resetOrStop =
-      autoplay.options.stopOnInteraction === false
-        ? autoplay.reset
-        : autoplay.stop;
-
-    resetOrStop();
+    autoplay.stop();
   };
 
   /**
    * @private
-   * Creates event listeners for controlling autoplay or auto scroll.
+   * Checks to see if the user is on a touch device.
+   * @returns {boolean} True if touch device, false otherwise.
    */
-  createPlayButtonListeners = (type) => (emblaApi, playBtn) => {
-    const plugin = type === "autoplay" ? "autoplay" : "autoScroll";
+  isTouchDevice() {
+    return window.matchMedia("(pointer: coarse)").matches;
+  }
 
-    const togglePlayBtnState = () => {
-      const control = emblaApi?.plugins()?.[plugin];
-      if (!control) return;
+  // ========== EVENT HANDLERS =================
 
-      this.playBtnLabel = control.isPlaying()
-        ? this.playLabel
-        : this.pauseLabel; // these are reversed
-    };
+  /**
+   * @private
+   * Handles the slot change event to update slides and initialize or reinitialize Embla.
+   * If the slot is empty, it will not initialize Embla.
+   */
+  handleSlotChange() {
+    this.updateSlides();
 
-    const onPlayBtnClick = () => {
-      const control = emblaApi?.plugins()?.[plugin];
-      if (!control) return;
+    if (this.embla) {
+      this.embla.reInit();
+    } else {
+      this.initializeEmbla();
+    }
 
-      const playOrStop = control.isPlaying() ? control.stop : control.play;
-      playOrStop();
-      this.isPlaying = control.isPlaying();
-    };
+    // add event listener to embla instance to toggle tabindex on active slide whenever slide is changed
+    this.embla.on("select", this.toggleTabIndex);
 
-    playBtn?.addEventListener("click", onPlayBtnClick);
-    emblaApi
-      .on(`${plugin}:play`, togglePlayBtnState)
-      .on(`${plugin}:stop`, togglePlayBtnState)
-      .on("reInit", togglePlayBtnState);
+    // Set isPlaying to true if play is triggered on init
+    this.isPlaying = this.playOnInit;
+  }
 
-    return () => {
-      playBtn?.removeEventListener("click", onPlayBtnClick);
-      emblaApi
-        .off(`${plugin}:play`, togglePlayBtnState)
-        .off(`${plugin}:stop`, togglePlayBtnState)
-        .off("reInit", togglePlayBtnState);
-    };
-  };
+  /**
+   * @private
+   * @param {string} direction - The direction of the navigation ("prev" or "next").
+   * Handles click events on the previous and next buttons.
+   */
+  handleNavClick(direction) {
+    if (direction === "prev") {
+      this.scrollPrev();
+    }
+    if (direction === "next") {
+      this.scrollNext();
+    }
+    this.stopAutoplayOnInteraction(this.embla);
+  }
 
   /**
    * @private
-   * Adds event listeners to the play button to control autoplay.
+   * @param {KeyboardEvent} event - The keydown event triggered by the user.
+   * Allows users to navigate through the slideshow using left/right arrow keys.
    */
-  addAutoPlayBtnListener = this.createPlayButtonListeners("autoplay");
+  handleKeydown = (event) => {
+    const focusActiveSlide = () => {
+      // Timeout added for UX optimization
+      setTimeout(() => {
+        const activeSlide = this.slides[this.embla.selectedScrollSnap()];
+        activeSlide.focus();
+      }, 200);
+    };
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      this.scrollPrev();
+      focusActiveSlide();
+    } else if (event.key === "ArrowRight") {
+      event.preventDefault();
+      this.scrollNext();
+      focusActiveSlide();
+    }
+  };
 
   /**
    * @private
-   * Adds event listeners to the play button to control auto scroll.
+   * Handles click events on the play button to toggle autoplay or autoScroll.
    */
-  addAutoScrollBtnListener = this.createPlayButtonListeners("autoScroll");
+  handlePlayClick() {
+    if (this.isPlaying) {
+      this.stop();
+      this.togglePlayButtonOnStop();
+    } else {
+      this.play();
+      this.togglePlayButtonOnPlay();
+    }
+  }
+
+  // ========== DOTS AND PROGRESS BAR METHODS =================
 
   /**
    * @private
@@ -4205,12 +4300,12 @@ class AuroSlideshow extends i$2 {
     let dotNodes = [];
 
     const addDotBtnsWithClickHandlers = () => {
-      // Create new dot buttons using Lit's render
       const dots = emblaApi.scrollSnapList().map((_, index) => {
         const button = document.createElement("button");
         button.className = "embla__dot";
         button.type = "button";
         button.tabIndex = -1;
+        button.setAttribute("aria-label", `Go to slide ${index + 1}`); // TODO: localization
         button.addEventListener(
           "click",
           () => {
@@ -4222,11 +4317,18 @@ class AuroSlideshow extends i$2 {
         return button;
       });
 
-      // Use a single DOM operation to update dots
       dotsNode.replaceChildren(...dots);
       dotNodes = dots;
     };
 
+    // 'stopped' class adds fill color to progress dot when not playing
+    const toggleProgressStopped = () => {
+      const selected = emblaApi.selectedScrollSnap();
+      if (dotNodes[selected]) {
+        dotNodes[selected].classList.toggle("stopped", !this.isPlaying);
+      }
+    };
+
     const toggleDotBtnsActive = () => {
       const previous = emblaApi.previousScrollSnap();
       const selected = emblaApi.selectedScrollSnap();
@@ -4243,9 +4345,16 @@ class AuroSlideshow extends i$2 {
         if (dotNodes[selected]) {
           dotNodes[selected].className = "embla__progress";
           dotNodes[selected].replaceChildren(progressBar);
+          if (!this.isPlaying) {
+            dotNodes[selected].classList.add("stopped");
+          }
         }
 
         this.addAutoplayProgressListeners(this.embla, this._progressNode);
+
+        emblaApi
+          .on("autoplay:play", toggleProgressStopped) // Removes fill color when autoplay starts
+          .on("autoplay:stop", toggleProgressStopped); // Adds fill color when autoplay stops (temp solution until paused state is implemented)
       } else {
         if (dotNodes[previous]) {
           dotNodes[previous].classList.remove("embla__dot--selected");
@@ -4270,6 +4379,8 @@ class AuroSlideshow extends i$2 {
 
   /**
    * @private
+   * Adds autoplay progress listeners to the progress bar.
+   * This function updates the progress bar animation based on the autoplay timer.
    */
   addAutoplayProgressListeners = (emblaApi, progressNode) => {
     const progressBarNode = progressNode.querySelector(".embla__progress__bar");
@@ -4318,13 +4429,34 @@ class AuroSlideshow extends i$2 {
     };
   };
 
+  // ========== LIFECYCLE METHODS =================
+
   disconnectedCallback() {
     super.disconnectedCallback();
 
-    this.embla.off("select", this.toggleTabIndex);
-
     // Clean up event listeners and Embla instance
     if (this.embla) {
+      this.embla.off("select", this.toggleTabIndex);
+
+      if (this.navigation && !this.isTouchDevice()) {
+        this.embla
+          .off("select", this.toggleNavBtnsState)
+          .off("init", this.toggleNavBtnsState)
+          .off("reInit", this.toggleNavBtnsState);
+      }
+
+      if (this.autoplay) {
+        this.embla
+          .off("autoplay:stop", this.togglePlayButtonOnStop)
+          .off("autoplay:play", this.togglePlayButtonOnPlay);
+      }
+
+      if (this.autoScroll && !this.isTouchDevice()) {
+        this.embla
+          .off("autoScroll:stop", this.togglePlayButtonOnStop)
+          .off("autoScroll:play", this.togglePlayButtonOnPlay);
+      }
+
       this.embla.destroy();
       this.embla = null;
     }
@@ -4336,6 +4468,8 @@ class AuroSlideshow extends i$2 {
     this.slides = [];
   }
 
+  // ========== RENDER METHODS =================
+
   /**
    * Internal function to generate the HTML for the icon to use.
    * @private
@@ -4364,7 +4498,8 @@ class AuroSlideshow extends i$2 {
         shape="circle"
         onDark
         size="lg"
-        @click=${() => this.embla?.scrollPrev()}>
+        @click=${() => this.handleNavClick("prev")}
+        part="prev-button">
         ${this.generateIconHtml(chevronLeft.svg)}
       </${this.buttonTag}>
       <${this.buttonTag} 
@@ -4373,7 +4508,8 @@ class AuroSlideshow extends i$2 {
         shape="circle"
         onDark
         size="lg"
-        @click=${() => this.embla?.scrollNext()}>
+        @click=${() => this.handleNavClick("next")}
+        part="next-button">
         ${this.generateIconHtml(chevronRight.svg)}
       </${this.buttonTag}>`;
   }
@@ -4385,6 +4521,8 @@ class AuroSlideshow extends i$2 {
       aria-label="${this.playBtnLabel}"
       class="play-pause"
       shape="circle"
+      @click=${() => this.handlePlayClick()}
+      part="play-pause-button"
       >
         ${this.generateIconHtml(play.svg, this.isPlaying)}
         ${this.generateIconHtml(pause.svg, !this.isPlaying)}
@@ -4401,7 +4539,7 @@ class AuroSlideshow extends i$2 {
   renderPaginationContainer() {
     return u`
       <div class="pagination-container">
-        ${this.autoplay || this.autoScroll ? this.renderPlayButton() : E}
+        ${this.autoplay || (this.autoScroll && !this.isTouchDevice()) ? this.renderPlayButton() : E}
         ${this.pagination ? u`<div class="embla__dots"></div>` : E}
       </div>
     `;
@@ -4411,14 +4549,20 @@ class AuroSlideshow extends i$2 {
     return u`
       <div class="container">
         <div class="slideshow-wrapper">
-          ${this.navigation ? this.renderNavigationControls() : E}
+          ${this.navigation && !this.isTouchDevice() ? this.renderNavigationControls() : E}
           <div class="embla">
             <div class="embla__container">
               <slot @slotchange=${this.handleSlotChange}></slot>
             </div>
           </div>
         </div>
-        ${this.pagination || this.autoplay || this.autoScroll ? this.renderPaginationContainer() : E}
+        ${
+          this.pagination ||
+          this.autoplay ||
+          (this.autoScroll && !this.isTouchDevice())
+            ? this.renderPaginationContainer()
+            : E
+        }
       </div>
     `;
   }