q2-tecton-elements 1.45.3 → 1.46.1

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

@@ -8,9 +8,17 @@ const Q2CarouselPane = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.clickCarouselPane = createEvent(this, "clickCarouselPane", 7);
+        this.disabledElements = [];
         this.generatePaneClass = (currentIndex) => {
             return `q2-carousel-pane swiper-slide q2-carousel-pane-${currentIndex}`;
         };
+        this.onMutationObserved = () => {
+            this.removePointerMoveListeners();
+            this.addPointerMoveListeners();
+        };
+        this.pointerMoveHandler = (event) => {
+            event.stopPropagation();
+        };
         this.paneClicked = event => {
             if (this.isActivePane)
                 return;
@@ -31,10 +39,35 @@ const Q2CarouselPane = class {
     }
     componentDidLoad() {
         this.determineDisabledContent();
+        this.addPointerMoveListeners();
+        if (typeof MutationObserver !== 'undefined') {
+            const observer = new MutationObserver(this.onMutationObserved);
+            observer.observe(this.hostElement, { childList: true, subtree: true });
+            this.mutationObserver = observer;
+        }
+    }
+    disconnectedCallback() {
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+            this.mutationObserver = null;
+        }
+        this.removePointerMoveListeners();
+    }
+    addPointerMoveListeners() {
+        const elementsToDisable = ['q2-dropdown', 'q2-dropdown-item'];
+        this.disabledElements = Array.from(this.hostElement.querySelectorAll(elementsToDisable.join(',')));
+        this.disabledElements.forEach(element => {
+            element.addEventListener('pointermove', this.pointerMoveHandler);
+        });
+    }
+    removePointerMoveListeners() {
+        this.disabledElements.forEach(element => {
+            element.removeEventListener('pointermove', this.pointerMoveHandler);
+        });
     }
     determineDisabledContent() {
         const { isActivePane } = this;
-        const focusableElements = this.hostElement.querySelectorAll('q2-btn, q2-dropdown, a[href], button, [tabindex]:not([tabindex="-1"])');
+        const focusableElements = this.hostElement.querySelectorAll('q2-btn, q2-dropdown, q2-item, q2-chart-donut, a[href], button, [tabindex]:not([tabindex="-1"])');
         focusableElements.forEach(element => {
             const hasValidTabIndex = element.hasAttribute('tabindex') && parseInt(element.getAttribute('tabindex')) >= 0;
             if (hasValidTabIndex) {
@@ -45,9 +78,6 @@ const Q2CarouselPane = class {
                     element.tabIndex = parseInt(element.getAttribute('data-q2-tabindex'));
                     element.removeAttribute('data-q2-tabindex');
                 }
-                else if (element.tagName.startsWith('Q2-')) {
-                    element.tabIndex = undefined;
-                }
                 else {
                     element.removeAttribute('tabindex');
                 }
@@ -59,12 +89,12 @@ const Q2CarouselPane = class {
     }
     render() {
         const { label } = this;
-        return (h(Host, { key: '3408598713aeea60c644c3ea0750f0dce2d40ca9', 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 (h(Host, { key: '44c83fb865d762361b67e040e5ac3e26f275ce64', class: this.generatePaneClass(this.currentPaneIndex), tabIndex: this.isActivePane ? 0 : -1, role: "group", "aria-roledescription": "slide", "aria-hidden": this.isActivePane ? undefined : 'true', "aria-label": label
                 ? loc(label)
                 : loc('tecton.element.carousel.itemDescription', [
                     (this.currentPaneIndex + 1).toString(),
                     (this.siblingCount || 0).toString(),
-                ]), onClick: this.paneClicked }, h("article", { key: 'a03a7125b958195b21d731f9cbeebdb1c8f9a0b3', class: "q2-carousel-pane-main-content" }, h("slot", { key: 'c07f1d5fc75a902a6f9741e746279bad8c094a13' }))));
+                ]), onClick: this.paneClicked }, h("article", { key: '899089ed499de1df8506227389c9b54cfb742dfa', class: "q2-carousel-pane-main-content" }, h("slot", { key: '44e6c7e89b31bb55cf981f7867a4bb33806f4891' }))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

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

@@ -1 +1 @@
-{"file":"q2-carousel-pane.entry.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,qgFAAqgF,CAAC;AAChiF,6BAAe,iBAAiB;;MCGnB,cAAc;;;;QAyCvB,sBAAiB,GAAG,CAAC,YAAoB;YACrC,OAAO,kDAAkD,YAAY,EAAE,CAAC;SAC3E,CAAC;QAOF,gBAAW,GAAG,KAAK;YACf,IAAI,IAAI,CAAC,YAAY;gBAAE,OAAO;YAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;gBACxB,SAAS,EAAE,IAAI,CAAC,KAAK;gBACrB,IAAI,EAAE,IAAI,CAAC,WAAW;aACzB,CAAC,CAAC;SACN,CAAC;;;;;;;IAxBF,IAAI,gBAAgB;QAChB,OAAO,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,QAAQ,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;KAClG;IAED,gBAAgB;QACZ,IAAI,CAAC,wBAAwB,EAAE,CAAC;KACnC;IAqBD,wBAAwB;QACpB,MAAM,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;QAC9B,MAAM,iBAAiB,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CACvD,uEAAuE,CAC1E,CAAC;QAEF,iBAAiB,CAAC,OAAO,CAAC,OAAO;YAC7B,MAAM,gBAAgB,GAClB,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC;YAExF,IAAI,gBAAgB,EAAE;gBAClB,OAAO,CAAC,YAAY,CAAC,kBAAkB,EAAE,GAAG,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC;aACnE;YAED,IAAI,YAAY,EAAE;gBACd,IAAI,OAAO,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAAE;oBAC1C,OAAO,CAAC,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC,CAAC;oBACtE,OAAO,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;iBAC/C;qBAAM,IAAI,OAAO,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE;oBAC1C,OAAO,CAAC,QAAQ,GAAG,SAAS,CAAC;iBAChC;qBAAM;oBACH,OAAO,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;iBACvC;aACJ;iBAAM;gBACH,OAAO,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;aACzB;SACJ,CAAC,CAAC;KACN;IAED,MAAM;QACF,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAEvB,QACI,EAAC,IAAI,qDACD,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,gBAAgB,CAAC,EACpD,QAAQ,EAAE,IAAI,CAAC,YAAY,GAAG,CAAC,GAAG,CAAC,CAAC,EACpC,IAAI,EAAC,OAAO,0BACS,OAAO,iBACf,IAAI,CAAC,YAAY,GAAG,SAAS,GAAG,MAAM,gBAE/C,KAAK;kBACC,GAAG,CAAC,KAAK,CAAC;kBACV,GAAG,CAAC,yCAAyC,EAAE;oBAC3C,CAAC,IAAI,CAAC,gBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAE;oBACtC,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,EAAE,QAAQ,EAAE;iBACtC,CAAC,EAEZ,OAAO,EAAE,IAAI,CAAC,WAAW,IAEzB,gEAAS,KAAK,EAAC,+BAA+B,IAC1C,8DAAa,CACP,CACP,EACT;KACL;;;;;;;;;;","names":[],"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 2px 8px 0px var(--t-top-a1, rgba(0, 0, 0, 0.25))'))};\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    /**\n     * Used by q2-carousel to determine the pane's index.\n     * @private\n     */\n    @Prop({ reflect: false }) index: number;\n\n    /**\n     * Used by q2-carousel to indicate how many panes are in the carousel.\n     * @private\n     */\n    @Prop({ reflect: false }) siblingCount: number;\n\n    /**\n     * Used by `q2-carousel` to indicate which pane is currently active.\n     * @private\n     */\n    @Prop({ reflect: true }) isActivePane: boolean;\n\n    /**\n     * Text used only as an `aria-label` for accessibility purposes.\n     * @localizable\n     */\n    @Prop({ reflect: true }) label: string;\n\n    /**\n     * Used by `q2-carousel` to indicate the pane should be frameless\n     * @private\n     */\n    @Prop({ reflect: true }) slotFrameless: boolean;\n\n    @Element() hostElement: HTMLElement;\n\n    get currentPaneIndex() {\n        return Array.prototype.indexOf.call(this.hostElement.parentElement.children, this.hostElement);\n    }\n\n    componentDidLoad(): void {\n        this.determineDisabledContent();\n    }\n\n    generatePaneClass = (currentIndex: number) => {\n        return `q2-carousel-pane swiper-slide q2-carousel-pane-${currentIndex}`;\n    };\n\n    /**\n     * Emitted when the pane is clicked.\n     */\n    @Event() clickCarouselPane: EventEmitter<{ paneIndex: number; pane: HTMLElement }>;\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    @Watch('isActivePane')\n    determineDisabledContent() {\n        const { isActivePane } = this;\n        const focusableElements = this.hostElement.querySelectorAll<HTMLElement>(\n            'q2-btn, q2-dropdown, 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 if (element.tagName.startsWith('Q2-')) {\n                    element.tabIndex = undefined;\n                } else {\n                    element.removeAttribute('tabindex');\n                }\n            } else {\n                element.tabIndex = -1;\n            }\n        });\n    }\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"],"version":3}
+{"file":"q2-carousel-pane.entry.js","mappings":"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","names":[],"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 2px 8px 0px var(--t-top-a1, rgba(0, 0, 0, 0.25))'))};\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    /**\n     * Used by q2-carousel to determine the pane's index.\n     * @private\n     */\n    @Prop({ reflect: false }) index: number;\n\n    /**\n     * Used by q2-carousel to indicate how many panes are in the carousel.\n     * @private\n     */\n    @Prop({ reflect: false }) siblingCount: number;\n\n    /**\n     * Used by `q2-carousel` to indicate which pane is currently active.\n     * @private\n     */\n    @Prop({ reflect: true }) isActivePane: boolean;\n\n    /**\n     * Text used only as an `aria-label` for accessibility purposes.\n     * @localizable\n     */\n    @Prop({ reflect: true }) label: string;\n\n    /**\n     * Used by `q2-carousel` to indicate the pane should be frameless\n     * @private\n     */\n    @Prop({ reflect: true }) slotFrameless: boolean;\n\n    @Element() hostElement: HTMLElement;\n\n    disabledElements?: HTMLElement[] = [];\n    mutationObserver?: MutationObserver;\n\n    get currentPaneIndex() {\n        return Array.prototype.indexOf.call(this.hostElement.parentElement.children, this.hostElement);\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    disconnectedCallback() {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n        this.removePointerMoveListeners();\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    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    removePointerMoveListeners() {\n        this.disabledElements.forEach(element => {\n            element.removeEventListener('pointermove', this.pointerMoveHandler);\n        });\n    }\n\n    pointerMoveHandler = (event: PointerEvent) => {\n        event.stopPropagation();\n    };\n\n    /**\n     * Emitted when the pane is clicked.\n     */\n    @Event() clickCarouselPane: EventEmitter<{ paneIndex: number; pane: HTMLElement }>;\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    @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    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"],"version":3}

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

@@ -5042,6 +5042,19 @@ const Q2Carousel = class {
         // COMPUTED //
         this.guid = createGuid();
         // METHODS //
+        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();
+            }
+            else {
+                carouselPaneWrapperElement.style.left = null;
+                carouselPaneWrapperElement.style.transform = `translate3d(${swiper === null || swiper === void 0 ? void 0 : swiper.translate}px, 0, 0)`;
+                swiper.enable();
+            }
+        };
         this.onMutationObserved = () => {
             this.organizePanes();
             this.configureCarousel(this.carouselWrapper, this.activeCarouselOptions);
@@ -5060,7 +5073,7 @@ const Q2Carousel = class {
                 this.tearDownCarousel();
             }
             this.autoPlayInProgress = this.autoPlay;
-            this.swiper = new Swiper(carouselWrapper, carouselOptions);
+            new Swiper(carouselWrapper, carouselOptions);
             (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.slideTo(this.realIndex);
             if (this.autoPlayInProgress)
                 this.swiper.autoplay.start();
@@ -5204,7 +5217,7 @@ const Q2Carousel = class {
         this.ariaLabel = undefined;
         this.universalCarouselOptions = {
             centeredSlides: true,
-            focusableElements: 'q2-btn, q2-dropdown, a, input, select, textarea, button, video, label, option',
+            focusableElements: 'q2-btn, q2-dropdown, q2-item, q2-list, a, input, select, textarea, button, video, label, option',
             autoplay: this.autoPlay,
             modules: [Autoplay],
             on: {
@@ -5227,6 +5240,19 @@ const Q2Carousel = class {
                             preventScroll: true,
                         });
                 },
+                afterInit: swiper => {
+                    var _a;
+                    this.swiper = swiper;
+                    (_a = this.activePane) === null || _a === void 0 ? void 0 : _a.addEventListener('popoverStateChanged', this.handlePopovers);
+                },
+                slideChangeTransitionEnd: () => {
+                    var _a;
+                    (_a = this.activePane) === null || _a === void 0 ? void 0 : _a.addEventListener('popoverStateChanged', this.handlePopovers);
+                },
+                slideChangeTransitionStart: () => {
+                    var _a;
+                    (_a = this.activePane) === null || _a === void 0 ? void 0 : _a.removeEventListener('popoverStateChanged', this.handlePopovers);
+                },
             },
         };
         this.fullWidthDisplayOptions = Object.assign({ slidesPerView: 1, spaceBetween: 100 }, this.universalCarouselOptions);
@@ -5271,6 +5297,11 @@ const Q2Carousel = class {
             ? this.fullWidthDisplayOptions
             : 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;
+        return activeSlide instanceof HTMLElement ? activeSlide : null;
+    }
     get dynamicPaginationDots() {
         return this.paneCount && this.paneCount > 5;
     }
@@ -5351,7 +5382,7 @@ const Q2Carousel = class {
         let paginationWrapperClasses = ['q2-carousel-pagination-navigation-wrapper'];
         if (this.showNavigationArrows)
             paginationWrapperClasses = [...paginationWrapperClasses, 'evenly-space'];
-        return (h(Host, { key: '0c3b0f78014d3b4e345436df243b6bcfd208d892', 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: 'faf2f781bd5dc57c3ca8e5d608c6ea9a4e9a136e', 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)))))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {