q2-tecton-elements 1.49.2 → 1.50.1

package/dist/cjs/q2-carousel-pane.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-14c3693c.js');
-const index$1 = require('./index-a93362ed.js');
+const index$1 = require('./index-64d8b839.js');
 
 const q2CarouselPaneCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}q2-carousel .swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;transition:all 0.2s}q2-carousel-pane.q2-carousel-pane{--comp-carousel-pane-tween:var(--tct-tween-1, var(--app-tween-1, 0.2s ease));--comp-carousel-shadow:var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14));cursor:grab}q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) *{cursor:pointer}q2-carousel-pane.q2-carousel-pane:focus{box-shadow:none}q2-carousel-pane.q2-carousel-pane:focus .q2-carousel-pane-main-content{outline:none;box-shadow:var(--const-double-focus-ring)}q2-carousel-pane.q2-carousel-pane button{border:0;background:transparent;transition:all 0.2s;opacity:0.3;cursor:pointer}q2-carousel-pane.q2-carousel-pane button:hover{opacity:0.7}q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content{box-shadow:var(--comp-carousel-shadow);transition:var(--comp-carousel-pane-tween);background:var(--tct-carousel-background, var(--tct-carousel-background-color, var(--t-carousel-background-color, var(--tct-white, var(--app-white, #ffffff)))));border:var(--tct-carousel-pane-border-width, var(--t-carousel-pane-border-width, 0px)) solid var(--tct-carousel-pane-border-color, var(--t-carousel-pane-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));border-radius:var(--tct-carousel-pane-border-radius, var(--t-carousel-pane-border-radius, 8px));padding:var(--tct-carousel-pane-padding, var(--t-carousel-pane-padding, 7px));height:var(--tct-carousel-pane-height, var(--t-carousel-pane-height, 10em))}q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content:hover{box-shadow:var(--const-double-focus-ring), var(--comp-carousel-shadow)}q2-carousel-pane.q2-carousel-pane[slot-frameless]:not([slot-frameless=false]) .q2-carousel-pane-main-content{box-shadow:none;border:0;border-radius:0;padding:0}";
 const Q2CarouselPaneStyle0 = q2CarouselPaneCss;
@@ -102,12 +102,12 @@ const Q2CarouselPane = class {
     // #region Render Methods
     render() {
         const { label } = this;
-        return (index.h(index.Host, { key: 'd587f0f4127a837dcef8245d71438dc89b9dc71e', class: this.generatePaneClass(this.currentPaneIndex), tabIndex: this.isActivePane ? 0 : -1, role: "group", "aria-roledescription": "slide", "aria-hidden": this.isActivePane ? undefined : 'true', "aria-label": label
+        return (index.h(index.Host, { key: '329730e3bc9a85b711e75cba936f7e5c8eafc125', class: this.generatePaneClass(this.currentPaneIndex), tabIndex: this.isActivePane ? 0 : -1, role: "group", "aria-roledescription": "slide", "aria-hidden": this.isActivePane ? undefined : 'true', "aria-label": label
                 ? index$1.loc(label)
                 : index$1.loc('tecton.element.carousel.itemDescription', [
                     (this.currentPaneIndex + 1).toString(),
                     (this.siblingCount || 0).toString(),
-                ]), onClick: this.paneClicked }, index.h("article", { key: '3bb56cc5bbc0a949a5f3655a872eb27451d0c681', class: "q2-carousel-pane-main-content" }, index.h("slot", { key: 'db4f69c055792283def6216fe06f5e22ed4a0d65' }))));
+                ]), onClick: this.paneClicked }, index.h("article", { key: 'bf86f515d661156d9d5c31ccf5f11bb1dd9f83e9', class: "q2-carousel-pane-main-content" }, index.h("slot", { key: '9b5bbada350a80f9a75dee3d1b3a98476f43e416' }))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/q2-carousel-pane.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"q2-carousel-pane.entry.cjs.js","mappings":"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","names":["h","Host","loc"],"sources":["src/components/q2-carousel-pane/q2-carousel-pane.scss?tag=q2-carousel-pane","src/components/q2-carousel-pane/q2-carousel-pane.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\nq2-carousel .swiper-slide {\n    flex-shrink: 0;\n    width: 100%;\n    height: 100%;\n    position: relative;\n    transition-property: transform;\n    transition: all 0.2s;\n}\n\nq2-carousel-pane.q2-carousel-pane {\n    --comp-carousel-pane-tween: #{var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n    --comp-carousel-shadow: #{var-list(--app-shadow-2, unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)\"))};\n\n    cursor: grab;\n\n    &:not([is-active-pane]) * {\n        cursor: pointer;\n    }\n\n    &:focus {\n        box-shadow: none;\n        .q2-carousel-pane-main-content {\n            outline: none;\n            box-shadow: var(--const-double-focus-ring);\n        }\n    }\n\n    button {\n        border: 0;\n        background: transparent;\n        transition: all 0.2s;\n        opacity: 0.3;\n        cursor: pointer;\n\n        &:hover {\n            opacity: 0.7;\n        }\n    }\n\n    .q2-carousel-pane-main-content {\n        box-shadow: var(--comp-carousel-shadow);\n        transition: var(--comp-carousel-pane-tween);\n        background: var-list(\n            --tct-carousel-background,\n            var-prefixer(carousel-background-color),\n            --tct-white,\n            --app-white,\n            #ffffff\n        );\n        border: var-list(var-prefixer(carousel-pane-border-width), 0px) solid\n            var-list(\n                var-prefixer(carousel-pane-border-color),\n                var-prefixer(gray-11),\n                --tct-gray-l1,\n                --app-gray-l1,\n                #cccccc\n            );\n        border-radius: var-list(var-prefixer(carousel-pane-border-radius), 8px);\n        padding: var-list(var-prefixer(carousel-pane-padding), 7px);\n        height: var-list(var-prefixer(carousel-pane-height), 10em);\n    }\n\n    .q2-carousel-pane-main-content:hover {\n        box-shadow: var(--const-double-focus-ring), var(--comp-carousel-shadow);\n    }\n    &[slot-frameless]:not([slot-frameless='false']) {\n        .q2-carousel-pane-main-content {\n            box-shadow: none;\n            border: 0;\n            border-radius: 0;\n            padding: 0;\n        }\n    }\n}\n","import { Component, ComponentInterface, Event, Element, Host, Watch, Prop, h, EventEmitter } from '@stencil/core';\nimport { loc } from 'src/utils';\n\n@Component({ tag: 'q2-carousel-pane', shadow: false, styleUrl: 'q2-carousel-pane.scss' })\nexport class Q2CarouselPane implements ComponentInterface {\n    // #region Own Properties\n\n    disabledElements?: HTMLElement[] = [];\n    mutationObserver?: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Used by q2-carousel to determine the pane's index.\n     * @private\n     */\n    @Prop({ reflect: false })\n    index: number;\n\n    /**\n     * Used by `q2-carousel` to indicate which pane is currently active.\n     * @private\n     */\n    @Prop({ reflect: true })\n    isActivePane: boolean;\n\n    /**\n     * Text used only as an `aria-label` for accessibility purposes.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * Used by q2-carousel to indicate how many panes are in the carousel.\n     * @private\n     */\n    @Prop({ reflect: false })\n    siblingCount: number;\n\n    /**\n     * Used by `q2-carousel` to indicate the pane should be frameless\n     * @private\n     */\n    @Prop({ reflect: true })\n    slotFrameless: boolean;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the pane is clicked.\n     */\n    @Event()\n    clickCarouselPane: EventEmitter<{ paneIndex: number; pane: HTMLElement }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n        this.removePointerMoveListeners();\n    }\n\n    componentDidLoad(): void {\n        this.determineDisabledContent();\n        this.addPointerMoveListeners();\n\n        if (typeof MutationObserver !== 'undefined') {\n            const observer = new MutationObserver(this.onMutationObserved);\n            observer.observe(this.hostElement, { childList: true, subtree: true });\n            this.mutationObserver = observer;\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('isActivePane')\n    determineDisabledContent() {\n        const { isActivePane } = this;\n        const focusableElements = this.hostElement.querySelectorAll<HTMLElement>(\n            'q2-btn, q2-dropdown, q2-item, q2-chart-donut, a[href], button, [tabindex]:not([tabindex=\"-1\"])'\n        );\n\n        focusableElements.forEach(element => {\n            const hasValidTabIndex =\n                element.hasAttribute('tabindex') && parseInt(element.getAttribute('tabindex')) >= 0;\n\n            if (hasValidTabIndex) {\n                element.setAttribute('data-q2-tabindex', `${element.tabIndex}`);\n            }\n\n            if (isActivePane) {\n                if (element.hasAttribute('data-q2-tabindex')) {\n                    element.tabIndex = parseInt(element.getAttribute('data-q2-tabindex'));\n                    element.removeAttribute('data-q2-tabindex');\n                } else {\n                    element.removeAttribute('tabindex');\n                }\n            } else {\n                element.tabIndex = -1;\n            }\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get currentPaneIndex() {\n        return Array.prototype.indexOf.call(this.hostElement.parentElement.children, this.hostElement);\n    }\n\n    addPointerMoveListeners() {\n        const elementsToDisable = ['q2-dropdown', 'q2-dropdown-item'];\n        this.disabledElements = Array.from(this.hostElement.querySelectorAll<HTMLElement>(elementsToDisable.join(',')));\n        this.disabledElements.forEach(element => {\n            element.addEventListener('pointermove', this.pointerMoveHandler);\n        });\n    }\n\n    generatePaneClass = (currentIndex: number) => {\n        return `q2-carousel-pane swiper-slide q2-carousel-pane-${currentIndex}`;\n    };\n\n    onMutationObserved = () => {\n        this.removePointerMoveListeners();\n        this.addPointerMoveListeners();\n    };\n\n    paneClicked = event => {\n        if (this.isActivePane) return;\n        event.preventDefault();\n        this.clickCarouselPane.emit({\n            paneIndex: this.index,\n            pane: this.hostElement,\n        });\n    };\n\n    pointerMoveHandler = (event: PointerEvent) => {\n        event.stopPropagation();\n    };\n\n    removePointerMoveListeners() {\n        this.disabledElements.forEach(element => {\n            element.removeEventListener('pointermove', this.pointerMoveHandler);\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { label } = this;\n\n        return (\n            <Host\n                class={this.generatePaneClass(this.currentPaneIndex)}\n                tabIndex={this.isActivePane ? 0 : -1}\n                role=\"group\"\n                aria-roledescription=\"slide\"\n                aria-hidden={this.isActivePane ? undefined : 'true'}\n                aria-label={\n                    label\n                        ? loc(label)\n                        : loc('tecton.element.carousel.itemDescription', [\n                              (this.currentPaneIndex + 1).toString(),\n                              (this.siblingCount || 0).toString(),\n                          ])\n                }\n                onClick={this.paneClicked}\n            >\n                <article class=\"q2-carousel-pane-main-content\">\n                    <slot></slot>\n                </article>\n            </Host>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}
+{"file":"q2-carousel-pane.entry.cjs.js","mappings":"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","names":["h","Host","loc"],"sources":["src/components/q2-carousel-pane/q2-carousel-pane.scss?tag=q2-carousel-pane","src/components/q2-carousel-pane/q2-carousel-pane.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\nq2-carousel .swiper-slide {\n    flex-shrink: 0;\n    width: 100%;\n    height: 100%;\n    position: relative;\n    transition-property: transform;\n    transition: all 0.2s;\n}\n\nq2-carousel-pane.q2-carousel-pane {\n    --comp-carousel-pane-tween: #{var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n    --comp-carousel-shadow: #{var-list(--app-shadow-2, unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)\"))};\n\n    cursor: grab;\n\n    &:not([is-active-pane]) * {\n        cursor: pointer;\n    }\n\n    &:focus {\n        box-shadow: none;\n        .q2-carousel-pane-main-content {\n            outline: none;\n            box-shadow: var(--const-double-focus-ring);\n        }\n    }\n\n    button {\n        border: 0;\n        background: transparent;\n        transition: all 0.2s;\n        opacity: 0.3;\n        cursor: pointer;\n\n        &:hover {\n            opacity: 0.7;\n        }\n    }\n\n    .q2-carousel-pane-main-content {\n        box-shadow: var(--comp-carousel-shadow);\n        transition: var(--comp-carousel-pane-tween);\n        background: var-list(\n            --tct-carousel-background,\n            var-prefixer(carousel-background-color),\n            --tct-white,\n            --app-white,\n            #ffffff\n        );\n        border: var-list(var-prefixer(carousel-pane-border-width), 0px) solid\n            var-list(\n                var-prefixer(carousel-pane-border-color),\n                var-prefixer(gray-11),\n                --tct-gray-l1,\n                --app-gray-l1,\n                #cccccc\n            );\n        border-radius: var-list(var-prefixer(carousel-pane-border-radius), 8px);\n        padding: var-list(var-prefixer(carousel-pane-padding), 7px);\n        height: var-list(var-prefixer(carousel-pane-height), 10em);\n    }\n\n    .q2-carousel-pane-main-content:hover {\n        box-shadow: var(--const-double-focus-ring), var(--comp-carousel-shadow);\n    }\n    &[slot-frameless]:not([slot-frameless='false']) {\n        .q2-carousel-pane-main-content {\n            box-shadow: none;\n            border: 0;\n            border-radius: 0;\n            padding: 0;\n        }\n    }\n}\n","import { Component, ComponentInterface, Event, Element, Host, Watch, Prop, h, EventEmitter } from '@stencil/core';\nimport { loc } from 'src/utils';\n\n@Component({ tag: 'q2-carousel-pane', shadow: false, styleUrl: 'q2-carousel-pane.scss' })\nexport class Q2CarouselPane implements ComponentInterface {\n    // #region Own Properties\n\n    disabledElements?: HTMLElement[] = [];\n    mutationObserver?: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Used by `q2-carousel` to determine the pane's index.\n     * @private\n     */\n    @Prop({ reflect: false })\n    index: number;\n\n    /**\n     * Used by `q2-carousel` to indicate which pane is currently active.\n     * @private\n     */\n    @Prop({ reflect: true })\n    isActivePane: boolean;\n\n    /**\n     * Text used only as an `aria-label` for accessibility purposes.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * Used by `q2-carousel` to indicate how many panes are in the carousel.\n     * @private\n     */\n    @Prop({ reflect: false })\n    siblingCount: number;\n\n    /**\n     * Used by `q2-carousel` to indicate the pane should be frameless.\n     * @private\n     */\n    @Prop({ reflect: true })\n    slotFrameless: boolean;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the pane is clicked.\n     */\n    @Event()\n    clickCarouselPane: EventEmitter<{ paneIndex: number; pane: HTMLElement }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n        this.removePointerMoveListeners();\n    }\n\n    componentDidLoad(): void {\n        this.determineDisabledContent();\n        this.addPointerMoveListeners();\n\n        if (typeof MutationObserver !== 'undefined') {\n            const observer = new MutationObserver(this.onMutationObserved);\n            observer.observe(this.hostElement, { childList: true, subtree: true });\n            this.mutationObserver = observer;\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('isActivePane')\n    determineDisabledContent() {\n        const { isActivePane } = this;\n        const focusableElements = this.hostElement.querySelectorAll<HTMLElement>(\n            'q2-btn, q2-dropdown, q2-item, q2-chart-donut, a[href], button, [tabindex]:not([tabindex=\"-1\"])'\n        );\n\n        focusableElements.forEach(element => {\n            const hasValidTabIndex =\n                element.hasAttribute('tabindex') && parseInt(element.getAttribute('tabindex')) >= 0;\n\n            if (hasValidTabIndex) {\n                element.setAttribute('data-q2-tabindex', `${element.tabIndex}`);\n            }\n\n            if (isActivePane) {\n                if (element.hasAttribute('data-q2-tabindex')) {\n                    element.tabIndex = parseInt(element.getAttribute('data-q2-tabindex'));\n                    element.removeAttribute('data-q2-tabindex');\n                } else {\n                    element.removeAttribute('tabindex');\n                }\n            } else {\n                element.tabIndex = -1;\n            }\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get currentPaneIndex() {\n        return Array.prototype.indexOf.call(this.hostElement.parentElement.children, this.hostElement);\n    }\n\n    addPointerMoveListeners() {\n        const elementsToDisable = ['q2-dropdown', 'q2-dropdown-item'];\n        this.disabledElements = Array.from(this.hostElement.querySelectorAll<HTMLElement>(elementsToDisable.join(',')));\n        this.disabledElements.forEach(element => {\n            element.addEventListener('pointermove', this.pointerMoveHandler);\n        });\n    }\n\n    generatePaneClass = (currentIndex: number) => {\n        return `q2-carousel-pane swiper-slide q2-carousel-pane-${currentIndex}`;\n    };\n\n    onMutationObserved = () => {\n        this.removePointerMoveListeners();\n        this.addPointerMoveListeners();\n    };\n\n    paneClicked = event => {\n        if (this.isActivePane) return;\n        event.preventDefault();\n        this.clickCarouselPane.emit({\n            paneIndex: this.index,\n            pane: this.hostElement,\n        });\n    };\n\n    pointerMoveHandler = (event: PointerEvent) => {\n        event.stopPropagation();\n    };\n\n    removePointerMoveListeners() {\n        this.disabledElements.forEach(element => {\n            element.removeEventListener('pointermove', this.pointerMoveHandler);\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { label } = this;\n\n        return (\n            <Host\n                class={this.generatePaneClass(this.currentPaneIndex)}\n                tabIndex={this.isActivePane ? 0 : -1}\n                role=\"group\"\n                aria-roledescription=\"slide\"\n                aria-hidden={this.isActivePane ? undefined : 'true'}\n                aria-label={\n                    label\n                        ? loc(label)\n                        : loc('tecton.element.carousel.itemDescription', [\n                              (this.currentPaneIndex + 1).toString(),\n                              (this.siblingCount || 0).toString(),\n                          ])\n                }\n                onClick={this.paneClicked}\n            >\n                <article class=\"q2-carousel-pane-main-content\">\n                    <slot></slot>\n                </article>\n            </Host>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}

package/dist/cjs/q2-carousel.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-14c3693c.js');
-const index$2 = require('./index-a93362ed.js');
+const index$2 = require('./index-64d8b839.js');
 
 /**
  * SSR Window 4.0.2
@@ -5043,13 +5043,8 @@ const Q2Carousel = class {
         this.change = index$1.createEvent(this, "change", 7);
         this.guid = index$2.createGuid();
         this.swiper = null;
-        this.autoPlayBtn = () => {
-            return (index$1.h("q2-btn", { type: "button", "hide-label": true, label: index$2.loc(this.autoPlayInProgress
-                    ? 'tecton.element.carousel.pausePlayLabel'
-                    : 'tecton.element.carousel.resumePlayLabel'), class: "q2-carousel-autoplay-control", onClick: this.handleAutoPlayPause }, index$1.h("q2-icon", { type: this.autoPlayInProgress ? 'pause' : 'play' })));
-        };
         this.configureCarousel = (carouselWrapper, carouselOptions) => {
-            var _a;
+            var _a, _b;
             if (!!this.swiper) {
                 this.tearDownCarousel();
             }
@@ -5057,167 +5052,134 @@ const Q2Carousel = class {
             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 (index$1.h("div", { class: insufficientPanesContainerClasses.join(' ') }, index$1.h("div", { class: "insufficient-panes-icon-wrapper" }, index$1.h("q2-icon", { type: "warning" })), index$1.h("p", { class: "insufficient-panes-header" }, index$1.h("strong", null, index$2.loc('tecton.element.carousel.insufficientPanesMessageHeader'))), index$1.h("p", { class: "insufficient-panes-body" }, index$2.loc('tecton.element.carousel.insufficientPanesMessageBody'))));
-        };
-        this.nextNavBtn = () => {
-            const nextPaneAvailable = this.activePaneIndex < this.paneCount - 1;
-            return (index$1.h("div", null, index$1.h("q2-btn", { type: "button", disabled: nextPaneAvailable ? undefined : true, class: "q2-carousel-navigation-button q2-carousel-navigation-button-next", "hide-label": true, label: index$2.loc('tecton.element.carousel.nextItemLabel'), onClick: () => this.handleCarouselNavigationSelection(this.activePaneIndex + 1, true) }, index$1.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.setCarouselWrapperWidth = () => {
+            if (this.insufficientPanes)
+                return;
+            this.carouselWrapperWidth = this.carouselWrapper.clientWidth;
+        };
+        this.tearDownCarousel = () => {
+            this.swiper.destroy();
+            this.swiper = null;
         };
-        this.organizePanes = () => {
-            const { framelessPanes, paneCollection } = this;
-            const siblingCount = paneCollection.length;
-            this.paneCollection.forEach((pane, index) => {
+        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 (index$1.h("q2-btn", { type: "button", "hide-label": true, label: index$2.loc(autoPlayInProgress
+                    ? 'tecton.element.carousel.pausePlayLabel'
+                    : 'tecton.element.carousel.resumePlayLabel'), class: "q2-carousel-autoplay-control", onClick: () => this.handleAutoPlayPause(autoPlayInProgress ? 'pause' : 'play') }, index$1.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 (index$1.h("div", { class: insufficientPanesContainerClasses.join(' ') }, index$1.h("div", { class: "insufficient-panes-icon-wrapper" }, index$1.h("q2-icon", { type: "warning" })), index$1.h("p", { class: "insufficient-panes-header" }, index$1.h("strong", null, index$2.loc('tecton.element.carousel.insufficientPanesMessageHeader'))), index$1.h("p", { class: "insufficient-panes-body" }, index$2.loc('tecton.element.carousel.insufficientPanesMessageBody'))));
+        };
+        this.renderNextNavBtn = () => {
+            const nextPaneAvailable = this.realIndex < this.paneCount - 1;
+            return (index$1.h("div", null, index$1.h("q2-btn", { type: "button", disabled: nextPaneAvailable ? undefined : true, class: "q2-carousel-navigation-button q2-carousel-navigation-button-next", "hide-label": true, label: index$2.loc('tecton.element.carousel.nextItemLabel'), onClick: () => { var _a; return (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.slideNext(); } }, index$1.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 (index$1.h("div", { class: paginationContainerClasses.join(' '), role: "tablist", "aria-label": index$2.loc('tecton.element.carousel.tabWrapperLabel') }, this.paneArray.map(pane => {
+            return (index$1.h("div", { class: paginationContainerClasses.join(' '), role: "tablist", "aria-label": index$2.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 (index$1.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": index$2.loc('tecton.element.carousel.itemDescription', [
+                return (index$1.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": index$2.loc('tecton.element.carousel.itemDescription', [
                         (pane.index + 1).toString(),
-                        this.paneCount.toString(),
+                        paneCount.toString(),
                     ]) }));
             })));
         };
-        this.prevNavBtn = () => {
-            const prevPaneAvailable = this.activePaneIndex > 0;
-            return (index$1.h("div", null, index$1.h("q2-btn", { type: "button", disabled: prevPaneAvailable ? undefined : true, class: "q2-carousel-navigation-button q2-carousel-navigation-button-prev", "hide-label": true, label: index$2.loc('tecton.element.carousel.previousItemLabel'), onClick: () => this.handleCarouselNavigationSelection(this.activePaneIndex - 1, true) }, index$1.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 (index$1.h("div", null, index$1.h("q2-btn", { type: "button", disabled: prevPaneAvailable ? undefined : true, class: "q2-carousel-navigation-button q2-carousel-navigation-button-prev", "hide-label": true, label: index$2.loc('tecton.element.carousel.previousItemLabel'), onClick: () => { var _a; return (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.slidePrev(); } }, index$1.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;
@@ -5241,7 +5203,7 @@ const Q2Carousel = class {
     }
     componentWillLoad() {
         index$2.handleAriaLabel(this);
-        this.organizePanes();
+        this.updateCarouselPaneProps();
         window.addEventListener('resize', this.setCarouselWrapperWidth);
         this.universalCarouselOptions = {
             centeredSlides: true,
@@ -5249,22 +5211,19 @@ const Q2Carousel = class {
             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,
                         });
                 },
@@ -5297,23 +5256,48 @@ const Q2Carousel = class {
     }
     // #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 (!index$2.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() {
         index$2.handleAriaLabel(this);
@@ -5322,15 +5306,18 @@ const Q2Carousel = class {
         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
@@ -5340,13 +5327,10 @@ const Q2Carousel = class {
             : 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;
     }
@@ -5354,13 +5338,10 @@ const Q2Carousel = class {
         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);
@@ -5369,6 +5350,9 @@ const Q2Carousel = class {
         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';
@@ -5377,10 +5361,8 @@ const Q2Carousel = class {
             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'];
@@ -5388,12 +5370,12 @@ const Q2Carousel = class {
             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 (index$1.h(index$1.Host, { key: 'a359f77ab7b3c38f9bb175dcc2e8d3c7c2c687c9', id: `q2-carousel-${this.guid}`, class: "q2-carousel-instance" }, this.insufficientPanes ? (this.insufficientPanesDisplay()) : (index$1.h(index$1.Fragment, null, this.paneCount > 1 && (index$1.h("div", { class: paginationWrapperClasses.join(' ') }, this.showNavigationArrows && this.prevNavBtn(), index$1.h("div", { class: "q2-carousel-control-center-tray" }, !this.hidePagination && this.paginationArea(), this.autoPlay && this.autoPlayBtn()), this.showNavigationArrows && this.nextNavBtn())), index$1.h("section", { class: carouselContainerClasses.join(' '), ref: el => (this.carouselWrapper = el), "aria-roledescription": "carousel", "aria-label": index$2.loc(this.label) }, index$1.h("div", { class: "q2-carousel-swiper-wrapper swiper-wrapper", ref: el => (this.carouselPaneWrapperElement = el), "aria-live": this.ariaLiveValue, onKeyDown: this.onWrapperKeyDown }, index$1.h("slot", null)))))));
+        return (index$1.h(index$1.Host, { key: '67d25d2920d5a952d2940cfdd6afa21e66c68abe', id: `q2-carousel-${this.guid}`, class: "q2-carousel-instance" }, insufficientPanes ? (this.renderInsufficientPanesDisplay()) : (index$1.h(index$1.Fragment, null, paneCount > 1 && (index$1.h("div", { class: paginationWrapperClasses.join(' ') }, showNavigationArrows && this.renderPrevNavBtn(), index$1.h("div", { class: "q2-carousel-control-center-tray" }, !hidePagination && this.renderPaginationArea(), autoPlay && this.renderAutoPlayBtn()), showNavigationArrows && this.renderNextNavBtn())), index$1.h("section", { class: carouselContainerClasses.join(' '), ref: el => (this.carouselWrapper = el), "aria-roledescription": "carousel", "aria-label": index$2.loc(label) }, index$1.h("div", { class: "q2-carousel-swiper-wrapper swiper-wrapper", ref: el => (this.carouselPaneWrapperElement = el), "aria-live": ariaLiveValue, onKeyDown: this.keydownHandler }, index$1.h("slot", null)))))));
     }
     get hostElement() { return index$1.getElement(this); }
     static get watchers() { return {