q2-tecton-elements 1.49.2 → 1.50.1

package/dist/collection/components/q2-carousel/q2-carousel.js

@@ -6,13 +6,8 @@ export class Q2Carousel {
     constructor() {
         this.guid = createGuid();
         this.swiper = null;
-        this.autoPlayBtn = () => {
-            return (h("q2-btn", { type: "button", "hide-label": true, label: loc(this.autoPlayInProgress
-                    ? 'tecton.element.carousel.pausePlayLabel'
-                    : 'tecton.element.carousel.resumePlayLabel'), class: "q2-carousel-autoplay-control", onClick: this.handleAutoPlayPause }, h("q2-icon", { type: this.autoPlayInProgress ? 'pause' : 'play' })));
-        };
         this.configureCarousel = (carouselWrapper, carouselOptions) => {
-            var _a;
+            var _a, _b;
             if (!!this.swiper) {
                 this.tearDownCarousel();
             }
@@ -20,167 +15,134 @@ export class Q2Carousel {
             new Swiper(carouselWrapper, carouselOptions);
             (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.slideTo(this.realIndex);
             if (this.autoPlayInProgress)
-                this.swiper.autoplay.start();
+                (_b = this.swiper) === null || _b === void 0 ? void 0 : _b.autoplay.start();
         };
-        this.handleAutoPlayPause = () => {
-            const { swiper: { autoplay }, } = this;
-            if (!autoplay)
+        this.handleAutoPlayPause = (action) => {
+            var _a;
+            if (!this.autoPlay)
                 return;
-            if (autoplay === null || autoplay === void 0 ? void 0 : autoplay.running)
-                autoplay.stop();
-            else
-                autoplay.start();
-            this.autoPlayInProgress = autoplay.running;
-        };
-        this.handleCarouselNavigationSelection = (newIndex, applyFocus) => {
-            if (applyFocus) {
-                this.applyFocus = true;
+            const autoplay = (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.autoplay;
+            switch (action) {
+                case 'play':
+                    autoplay.start();
+                    this.autoPlayInProgress = true;
+                    break;
+                case 'pause':
+                    autoplay.stop();
+                    this.autoPlayInProgress = false;
+                    break;
             }
-            this.handleSlideChange(newIndex);
         };
         this.handlePopovers = (event) => {
             const { swiper, carouselPaneWrapperElement } = this;
             if (event.detail.open) {
                 carouselPaneWrapperElement.style.left = `${swiper === null || swiper === void 0 ? void 0 : swiper.translate}px`;
                 carouselPaneWrapperElement.style.transform = null;
-                swiper.disable();
+                swiper === null || swiper === void 0 ? void 0 : swiper.disable();
             }
             else {
                 carouselPaneWrapperElement.style.left = null;
                 carouselPaneWrapperElement.style.transform = `translate3d(${swiper === null || swiper === void 0 ? void 0 : swiper.translate}px, 0, 0)`;
-                swiper.enable();
+                swiper === null || swiper === void 0 ? void 0 : swiper.enable();
             }
         };
-        this.handleSlideChange = (newIndex) => {
-            this.change.emit({ index: newIndex + 1 });
-        };
-        this.insufficientPanesDisplay = () => {
-            let insufficientPanesContainerClasses = [
-                'insufficient-pane-feedback',
-                this.fullWidthPanes ? 'full-width-display' : 'content-peek-display',
-            ];
-            if (this.compactMode)
-                insufficientPanesContainerClasses = [...insufficientPanesContainerClasses, 'compact'];
-            return (h("div", { class: insufficientPanesContainerClasses.join(' ') }, h("div", { class: "insufficient-panes-icon-wrapper" }, h("q2-icon", { type: "warning" })), h("p", { class: "insufficient-panes-header" }, h("strong", null, loc('tecton.element.carousel.insufficientPanesMessageHeader'))), h("p", { class: "insufficient-panes-body" }, loc('tecton.element.carousel.insufficientPanesMessageBody'))));
-        };
-        this.nextNavBtn = () => {
-            const nextPaneAvailable = this.activePaneIndex < this.paneCount - 1;
-            return (h("div", null, h("q2-btn", { type: "button", disabled: nextPaneAvailable ? undefined : true, class: "q2-carousel-navigation-button q2-carousel-navigation-button-next", "hide-label": true, label: loc('tecton.element.carousel.nextItemLabel'), onClick: () => this.handleCarouselNavigationSelection(this.activePaneIndex + 1, true) }, h("q2-icon", { type: "chevron-right" }))));
-        };
-        this.onMutationObserved = () => {
-            this.organizePanes();
-            this.configureCarousel(this.carouselWrapper, this.activeCarouselOptions);
-        };
-        this.onPaginationKeyDown = (event) => {
-            var _a, _b;
+        this.keydownHandler = (event) => {
+            var _a, _b, _c, _d;
             switch (event.key) {
                 case 'ArrowRight':
                     event.preventDefault();
-                    this.applyFocus = false;
-                    this.applyPaginationFocus = true;
-                    this.swiper.slideNext();
+                    (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.slideNext();
                     break;
                 case 'ArrowLeft':
                     event.preventDefault();
-                    this.applyFocus = false;
-                    this.applyPaginationFocus = true;
-                    this.swiper.slidePrev();
+                    (_b = this.swiper) === null || _b === void 0 ? void 0 : _b.slidePrev();
                     break;
                 case 'Home':
                     event.preventDefault();
-                    this.applyFocus = false;
-                    this.applyPaginationFocus = true;
-                    (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.slideTo(0);
+                    (_c = this.swiper) === null || _c === void 0 ? void 0 : _c.slideTo(0);
                     break;
                 case 'End':
                     event.preventDefault();
-                    this.applyFocus = false;
-                    this.applyPaginationFocus = true;
-                    (_b = this.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(this.swiper.slides.length - 1);
+                    (_d = this.swiper) === null || _d === void 0 ? void 0 : _d.slideTo(this.paneCount - 1);
                     break;
             }
         };
-        this.onWrapperKeyDown = (event) => {
-            var _a, _b;
-            switch (event.key) {
-                case 'ArrowRight':
-                    event.preventDefault();
-                    this.applyFocus = true;
-                    this.swiper.slideNext();
-                    break;
-                case 'ArrowLeft':
-                    event.preventDefault();
-                    this.applyFocus = true;
-                    this.swiper.slidePrev();
-                    break;
-                case 'Home':
-                    event.preventDefault();
-                    this.applyFocus = true;
-                    (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.slideTo(0);
-                    break;
-                case 'End':
-                    event.preventDefault();
-                    this.applyFocus = true;
-                    (_b = this.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(this.swiper.slides.length - 1);
-                    break;
-            }
+        this.onMutationObserved = () => {
+            this.updateCarouselPaneProps();
+            this.configureCarousel(this.carouselWrapper, this.activeCarouselOptions);
         };
-        this.organizePanes = () => {
-            const { framelessPanes, paneCollection } = this;
-            const siblingCount = paneCollection.length;
-            this.paneCollection.forEach((pane, index) => {
+        this.setCarouselWrapperWidth = () => {
+            if (this.insufficientPanes)
+                return;
+            this.carouselWrapperWidth = this.carouselWrapper.clientWidth;
+        };
+        this.tearDownCarousel = () => {
+            this.swiper.destroy();
+            this.swiper = null;
+        };
+        this.updateCarouselPaneProps = () => {
+            const { framelessPanes, paneCount, paneArray } = this;
+            paneArray.forEach((pane, index) => {
                 pane.index = index;
-                pane.siblingCount = siblingCount;
-                pane.isActivePane = index === this.activePaneIndex;
+                pane.siblingCount = paneCount;
+                pane.isActivePane = index === this.realIndex;
                 pane.slotFrameless = framelessPanes || undefined;
             });
-            this.currentPaneCount = this.paneCollection.length;
+            this.currentPaneCount = paneCount;
         };
-        this.paginationArea = () => {
+        // #endregion
+        // #region Render Methods
+        this.renderAutoPlayBtn = () => {
+            const { autoPlayInProgress } = this;
+            return (h("q2-btn", { type: "button", "hide-label": true, label: loc(autoPlayInProgress
+                    ? 'tecton.element.carousel.pausePlayLabel'
+                    : 'tecton.element.carousel.resumePlayLabel'), class: "q2-carousel-autoplay-control", onClick: () => this.handleAutoPlayPause(autoPlayInProgress ? 'pause' : 'play') }, h("q2-icon", { type: autoPlayInProgress ? 'pause' : 'play' })));
+        };
+        this.renderInsufficientPanesDisplay = () => {
+            let insufficientPanesContainerClasses = [
+                'insufficient-pane-feedback',
+                this.fullWidthPanes ? 'full-width-display' : 'content-peek-display',
+            ];
+            if (this.compactMode)
+                insufficientPanesContainerClasses = [...insufficientPanesContainerClasses, 'compact'];
+            return (h("div", { class: insufficientPanesContainerClasses.join(' ') }, h("div", { class: "insufficient-panes-icon-wrapper" }, h("q2-icon", { type: "warning" })), h("p", { class: "insufficient-panes-header" }, h("strong", null, loc('tecton.element.carousel.insufficientPanesMessageHeader'))), h("p", { class: "insufficient-panes-body" }, loc('tecton.element.carousel.insufficientPanesMessageBody'))));
+        };
+        this.renderNextNavBtn = () => {
+            const nextPaneAvailable = this.realIndex < this.paneCount - 1;
+            return (h("div", null, h("q2-btn", { type: "button", disabled: nextPaneAvailable ? undefined : true, class: "q2-carousel-navigation-button q2-carousel-navigation-button-next", "hide-label": true, label: loc('tecton.element.carousel.nextItemLabel'), onClick: () => { var _a; return (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.slideNext(); } }, h("q2-icon", { type: "chevron-right" }))));
+        };
+        this.renderPaginationArea = () => {
+            const { useDynamicPaginationDots, realIndex, paneCount, paneArray } = this;
             let paginationContainerClasses = ['q2-carousel-pagination'];
-            if (this.dynamicPaginationDots)
+            if (useDynamicPaginationDots)
                 paginationContainerClasses = [...paginationContainerClasses, 'dynamic'];
-            return (h("div", { class: paginationContainerClasses.join(' '), role: "tablist", "aria-label": loc('tecton.element.carousel.tabWrapperLabel') }, this.paneArray.map(pane => {
+            return (h("div", { class: paginationContainerClasses.join(' '), role: "tablist", "aria-label": loc('tecton.element.carousel.tabWrapperLabel') }, paneArray.map(pane => {
                 let btnClasses = ['q2-carousel-page-indicator', `q2-carousel-page-indicator-${pane.index}`];
                 if (pane.isActivePane)
                     btnClasses = [...btnClasses, 'active-page'];
-                if (this.dynamicPaginationDots)
+                if (useDynamicPaginationDots)
                     btnClasses = [...btnClasses, 'dynamic'];
-                const withinOneOfActive = pane.index === this.activePaneIndex + 1 || pane.index === this.activePaneIndex - 1;
+                const withinOneOfActive = pane.index === realIndex + 1 || pane.index === realIndex - 1;
                 if (withinOneOfActive)
                     btnClasses = [...btnClasses, 'active-adjacent'];
-                const withinTwoOfActive = pane.index === this.activePaneIndex + 2 || pane.index === this.activePaneIndex - 2;
+                const withinTwoOfActive = pane.index === realIndex + 2 || pane.index === realIndex - 2;
                 if (withinTwoOfActive)
                     btnClasses = [...btnClasses, 'active-adjacent-adjacent'];
-                return (h("button", { type: "button", role: "tab", tabIndex: pane.isActivePane ? undefined : -1, "aria-selected": pane.isActivePane ? 'true' : 'false', class: btnClasses.join(' '), onClick: () => this.handleCarouselNavigationSelection(pane.index, true), onKeyDown: event => this.onPaginationKeyDown(event), "aria-label": loc('tecton.element.carousel.itemDescription', [
+                return (h("button", { type: "button", role: "tab", tabIndex: pane.isActivePane ? undefined : -1, "aria-selected": pane.isActivePane ? 'true' : 'false', class: btnClasses.join(' '), onClick: () => { var _a; return (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.slideTo(pane.index); }, onKeyDown: this.keydownHandler, "aria-label": loc('tecton.element.carousel.itemDescription', [
                         (pane.index + 1).toString(),
-                        this.paneCount.toString(),
+                        paneCount.toString(),
                     ]) }));
             })));
         };
-        this.prevNavBtn = () => {
-            const prevPaneAvailable = this.activePaneIndex > 0;
-            return (h("div", null, h("q2-btn", { type: "button", disabled: prevPaneAvailable ? undefined : true, class: "q2-carousel-navigation-button q2-carousel-navigation-button-prev", "hide-label": true, label: loc('tecton.element.carousel.previousItemLabel'), onClick: () => this.handleCarouselNavigationSelection(this.activePaneIndex - 1, true) }, h("q2-icon", { type: "chevron-left" }))));
-        };
-        this.setCarouselWrapperWidth = () => {
-            if (this.insufficientPanes)
-                return;
-            this.carouselWrapperWidth = this.carouselWrapper.clientWidth;
-        };
-        this.tearDownCarousel = () => {
-            this.swiper.destroy();
-            this.swiper = null;
+        this.renderPrevNavBtn = () => {
+            const prevPaneAvailable = this.realIndex > 0;
+            return (h("div", null, h("q2-btn", { type: "button", disabled: prevPaneAvailable ? undefined : true, class: "q2-carousel-navigation-button q2-carousel-navigation-button-prev", "hide-label": true, label: loc('tecton.element.carousel.previousItemLabel'), onClick: () => { var _a; return (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.slidePrev(); } }, h("q2-icon", { type: "chevron-left" }))));
         };
-        this.activePaneIndex = this.realIndex;
-        this.applyFocus = false;
-        this.applyPaginationFocus = false;
         this.ariaLiveValue = 'polite';
         this.autoPlayInProgress = false;
         this.carouselWrapperWidth = 0;
         this.compactMode = false;
         this.currentPaneCount = this.paneCount;
-        this.fullWidthDisplayOptions = undefined;
-        this.universalCarouselOptions = undefined;
         this.ariaLabel = undefined;
         this.autoPlay = false;
         this.framelessPanes = false;
@@ -204,7 +166,7 @@ export class Q2Carousel {
     }
     componentWillLoad() {
         handleAriaLabel(this);
-        this.organizePanes();
+        this.updateCarouselPaneProps();
         window.addEventListener('resize', this.setCarouselWrapperWidth);
         this.universalCarouselOptions = {
             centeredSlides: true,
@@ -212,22 +174,19 @@ export class Q2Carousel {
             autoplay: this.autoPlay,
             modules: [Autoplay],
             on: {
-                slideChange: () => {
-                    var _a, _b;
-                    this.handleSlideChange((_b = (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.activeIndex) !== null && _b !== void 0 ? _b : 0); // lazy-load causing this.swiper is null only on ios safari
-                },
-                activeIndexChange: swiper => {
-                    this.activePaneIndex = swiper.activeIndex;
-                    this.organizePanes();
+                realIndexChange: swiper => {
+                    this.index = swiper.realIndex + 1;
+                    this.updateCarouselPaneProps();
                     const isPaginationFocused = !!document.activeElement.closest(`#q2-carousel-${this.guid} .q2-carousel-page-indicator`);
                     const isCarouselFocused = !!document.activeElement.closest(`#q2-carousel-${this.guid} q2-carousel-pane`);
                     const isFocused = isPaginationFocused || isCarouselFocused;
                     this.handleAriaLive(isFocused);
+                    this.change.emit({ index: swiper.realIndex + 1 });
                     if (isPaginationFocused) {
-                        this.paginationBtns[swiper.activeIndex].focus({ preventScroll: true });
+                        this.paginationBtns[swiper.realIndex].focus({ preventScroll: true });
                     }
                     else if (isCarouselFocused)
-                        swiper.slides[swiper.activeIndex].focus({
+                        swiper.slides[swiper.realIndex].focus({
                             preventScroll: true,
                         });
                 },
@@ -260,23 +219,48 @@ export class Q2Carousel {
     }
     // #endregion
     // #region Listeners
-    onHostElementChange(event) {
-        if (event.target === this.hostElement && !this.hostElement.onchange) {
-            this.index = event.detail.index;
-        }
-    }
     carouselPaneClicked(event) {
         var _a, _b;
         (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.slideTo(event.detail.paneIndex);
         ((_b = this.swiper) === null || _b === void 0 ? void 0 : _b.slides[event.detail.paneIndex]).focus({ preventScroll: true });
     }
     delegateFocus(event) {
-        const activePane = this.swiper.slides[this.swiper.activeIndex];
+        var _a, _b;
+        const activePane = (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.slides[(_b = this.swiper) === null || _b === void 0 ? void 0 : _b.realIndex];
         if (!isEventFromElement(event, this.hostElement) || !activePane)
             return;
         activePane.focus({ preventScroll: true });
     }
     // #endregion
+    // #region Public Methods API
+    /**
+     * Clicks and Focuses the `q2-carousel-pane` matching the specified index.
+     * @testOnly
+     */
+    async selectCarouselPane(index) {
+        if (index > this.paneCount)
+            return;
+        const actualIndex = index > 0 ? index - 1 : 0;
+        const pane = this.paneArray[actualIndex];
+        pane === null || pane === void 0 ? void 0 : pane.click();
+        pane === null || pane === void 0 ? void 0 : pane.focus({ preventScroll: true });
+    }
+    /**
+     * Clicks and Focuses the `<button>` that controls playing or pausing the auto-play feature of the carousel.
+     *
+     * @warning
+     * If the `autoPlay` property is not enabled, this method does nothing.
+     *
+     * @testOnly
+     */
+    async togglePlayPause() {
+        if (!this.autoPlay)
+            return;
+        const playPauseBtn = this.hostElement.querySelector('.q2-carousel-autoplay-control');
+        playPauseBtn === null || playPauseBtn === void 0 ? void 0 : playPauseBtn.click();
+        playPauseBtn === null || playPauseBtn === void 0 ? void 0 : playPauseBtn.focus();
+    }
+    // #endregion
     // #region Watchers
     ariaLabelObserver() {
         handleAriaLabel(this);
@@ -285,15 +269,18 @@ export class Q2Carousel {
         this.compactMode = this.carouselWrapperWidth < carouselBreakpoint;
     }
     framelessPanesChanged() {
-        this.organizePanes();
+        this.updateCarouselPaneProps();
         this.revampCarousel();
     }
     revampCarousel() {
         this.configureCarousel(this.carouselWrapper, this.activeCarouselOptions);
     }
-    indexChanged() {
-        var _a;
-        (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.slideTo(this.realIndex);
+    indexChanged(newIndex) {
+        var _a, _b;
+        // this allows the carousel to be swiped programmatically via the index prop
+        if (newIndex !== ((_a = this.swiper) === null || _a === void 0 ? void 0 : _a.realIndex) + 1) {
+            (_b = this.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(this.realIndex);
+        }
     }
     // #endregion
     // #region Local Methods
@@ -303,13 +290,10 @@ export class Q2Carousel {
             : this.peekContentDisplayOptions;
     }
     get activePane() {
-        var _a, _b;
-        const activeSlide = (_b = (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.slides[this.swiper.activeIndex]) !== null && _b !== void 0 ? _b : 0;
+        var _a, _b, _c;
+        const activeSlide = (_c = (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.slides[(_b = this.swiper) === null || _b === void 0 ? void 0 : _b.realIndex]) !== null && _c !== void 0 ? _c : 0;
         return activeSlide instanceof HTMLElement ? activeSlide : null;
     }
-    get dynamicPaginationDots() {
-        return this.paneCount && this.paneCount > 5;
-    }
     get insufficientPanes() {
         return this.paneCount < 1;
     }
@@ -317,13 +301,10 @@ export class Q2Carousel {
         return this.hostElement.querySelectorAll('.q2-carousel-page-indicator');
     }
     get paneArray() {
-        return Array.from(this.paneCollection);
-    }
-    get paneCollection() {
-        return this.hostElement.querySelectorAll('q2-carousel-pane');
+        return Array.from(this.hostElement.querySelectorAll('q2-carousel-pane'));
     }
     get paneCount() {
-        return this.paneArray && this.paneArray.length > 0 ? this.paneArray.length : 0;
+        return this.paneArray.length;
     }
     get peekContentDisplayOptions() {
         return Object.assign({ slidesPerView: 2, spaceBetween: this.compactMode ? 0 : -10, centerInsufficientSlides: false }, this.universalCarouselOptions);
@@ -332,6 +313,9 @@ export class Q2Carousel {
         const indexNum = Number(this.index);
         return indexNum > 0 ? indexNum - 1 : 0;
     }
+    get useDynamicPaginationDots() {
+        return this.paneCount && this.paneCount > 5;
+    }
     handleAriaLive(activeAndFocused) {
         if (this.autoPlayInProgress && !activeAndFocused) {
             this.ariaLiveValue = 'off';
@@ -340,10 +324,8 @@ export class Q2Carousel {
             this.ariaLiveValue = 'polite';
         }
     }
-    // #endregion
-    // #region Render Methods
     render() {
-        const { fullWidthPanes, framelessPanes } = this;
+        const { paneCount, fullWidthPanes, framelessPanes, compactMode, showNavigationArrows, insufficientPanes, autoPlay, hidePagination, ariaLiveValue, label, } = this;
         let carouselContainerClasses = ['q2-carousel-swiper-container', 'swiper-container'];
         if (fullWidthPanes)
             carouselContainerClasses = [...carouselContainerClasses, 'full-width-display'];
@@ -351,12 +333,12 @@ export class Q2Carousel {
             carouselContainerClasses = [...carouselContainerClasses, 'frameless-display'];
         if (!fullWidthPanes && !framelessPanes)
             carouselContainerClasses = [...carouselContainerClasses, 'content-peek-display'];
-        if (this.compactMode)
+        if (compactMode)
             carouselContainerClasses = [...carouselContainerClasses, 'compact'];
         let paginationWrapperClasses = ['q2-carousel-pagination-navigation-wrapper'];
-        if (this.showNavigationArrows)
+        if (showNavigationArrows)
             paginationWrapperClasses = [...paginationWrapperClasses, 'evenly-space'];
-        return (h(Host, { key: 'a359f77ab7b3c38f9bb175dcc2e8d3c7c2c687c9', id: `q2-carousel-${this.guid}`, class: "q2-carousel-instance" }, this.insufficientPanes ? (this.insufficientPanesDisplay()) : (h(Fragment, null, this.paneCount > 1 && (h("div", { class: paginationWrapperClasses.join(' ') }, this.showNavigationArrows && this.prevNavBtn(), h("div", { class: "q2-carousel-control-center-tray" }, !this.hidePagination && this.paginationArea(), this.autoPlay && this.autoPlayBtn()), this.showNavigationArrows && this.nextNavBtn())), h("section", { class: carouselContainerClasses.join(' '), ref: el => (this.carouselWrapper = el), "aria-roledescription": "carousel", "aria-label": loc(this.label) }, h("div", { class: "q2-carousel-swiper-wrapper swiper-wrapper", ref: el => (this.carouselPaneWrapperElement = el), "aria-live": this.ariaLiveValue, onKeyDown: this.onWrapperKeyDown }, h("slot", null)))))));
+        return (h(Host, { key: '67d25d2920d5a952d2940cfdd6afa21e66c68abe', id: `q2-carousel-${this.guid}`, class: "q2-carousel-instance" }, insufficientPanes ? (this.renderInsufficientPanesDisplay()) : (h(Fragment, null, paneCount > 1 && (h("div", { class: paginationWrapperClasses.join(' ') }, showNavigationArrows && this.renderPrevNavBtn(), h("div", { class: "q2-carousel-control-center-tray" }, !hidePagination && this.renderPaginationArea(), autoPlay && this.renderAutoPlayBtn()), showNavigationArrows && this.renderNextNavBtn())), h("section", { class: carouselContainerClasses.join(' '), ref: el => (this.carouselWrapper = el), "aria-roledescription": "carousel", "aria-label": loc(label) }, h("div", { class: "q2-carousel-swiper-wrapper swiper-wrapper", ref: el => (this.carouselPaneWrapperElement = el), "aria-live": ariaLiveValue, onKeyDown: this.keydownHandler }, h("slot", null)))))));
     }
     static get is() { return "q2-carousel"; }
     static get originalStyleUrls() {
@@ -403,7 +385,7 @@ export class Q2Carousel {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Start the carousel without user input."
+                    "text": "Enables the auto-play feature and starts the carousel without user input."
                 },
                 "attribute": "auto-play",
                 "reflect": true,
@@ -421,7 +403,7 @@ export class Q2Carousel {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Display the carousel a frameless with no container or shadow *"
+                    "text": "Display the carousel panes as frameless with no container or shadow."
                 },
                 "attribute": "frameless-panes",
                 "reflect": true,
@@ -475,7 +457,7 @@ export class Q2Carousel {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The carousel pane you want the carousel to start from."
+                    "text": "The currently displayed carousel pane."
                 },
                 "attribute": "index",
                 "reflect": true,
@@ -524,16 +506,11 @@ export class Q2Carousel {
     }
     static get states() {
         return {
-            "activePaneIndex": {},
-            "applyFocus": {},
-            "applyPaginationFocus": {},
             "ariaLiveValue": {},
             "autoPlayInProgress": {},
             "carouselWrapperWidth": {},
             "compactMode": {},
-            "currentPaneCount": {},
-            "fullWidthDisplayOptions": {},
-            "universalCarouselOptions": {}
+            "currentPaneCount": {}
         };
     }
     static get events() {
@@ -545,7 +522,7 @@ export class Q2Carousel {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when the carousel pane changes."
+                    "text": "Emitted when the displayed carousel pane changes."
                 },
                 "complexType": {
                     "original": "{ index: number }",
@@ -554,6 +531,61 @@ export class Q2Carousel {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "selectCarouselPane": {
+                "complexType": {
+                    "signature": "(index: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "index",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clicks and Focuses the `q2-carousel-pane` matching the specified index.",
+                    "tags": [{
+                            "name": "testOnly",
+                            "text": undefined
+                        }]
+                }
+            },
+            "togglePlayPause": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLQ2BtnElement": {
+                            "location": "global",
+                            "id": "global::HTMLQ2BtnElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clicks and Focuses the `<button>` that controls playing or pausing the auto-play feature of the carousel.",
+                    "tags": [{
+                            "name": "warning",
+                            "text": "If the `autoPlay` property is not enabled, this method does nothing."
+                        }, {
+                            "name": "testOnly",
+                            "text": undefined
+                        }]
+                }
+            }
+        };
+    }
     static get elementRef() { return "hostElement"; }
     static get watchers() {
         return [{
@@ -584,12 +616,6 @@ export class Q2Carousel {
     }
     static get listeners() {
         return [{
-                "name": "change",
-                "method": "onHostElementChange",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
                 "name": "clickCarouselPane",
                 "method": "carouselPaneClicked",
                 "target": undefined,