q2-tecton-elements 1.66.2 → 1.67.0

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

@@ -124,10 +124,31 @@ q2-carousel {
 .q2-carousel-pagination-navigation-wrapper.evenly-space {
   justify-content: space-between;
 }
+.q2-carousel-pagination-navigation-wrapper.center-space {
+  justify-content: center;
+}
+.q2-carousel-pagination-navigation-wrapper.center-space .q2-carousel-control-center-tray {
+  margin: var(--tct-carouse-pagination-center-tray-margin, 0 24px);
+}
+
+.q2-carousel-floating-arrow-wrapper {
+  --comp-pagination-arrow-height: var(--tct-carousel-floating-nav-arrow-height, 44px);
+  width: auto;
+  z-index: 2;
+  display: flex;
+  position: absolute;
+  left: 10px;
+  right: 10px;
+  top: calc(50% - var(--comp-pagination-arrow-height) / 2);
+  height: var(--comp-pagination-arrow-height);
+  justify-content: space-between;
+  align-items: center;
+}
 
 .q2-carousel-control-center-tray {
   display: flex;
   align-items: center;
+  gap: var(--tct-carousel-control-gap, 16px);
 }
 
 .q2-carousel-swiper-wrapper.compact {
@@ -138,7 +159,7 @@ q2-carousel {
 }
 
 .q2-carousel-pagination {
-  height: 12px;
+  height: var(--tct-carousel-pagination-height, 12px);
   display: flex;
   align-content: center;
   justify-content: center;
@@ -146,20 +167,17 @@ q2-carousel {
 }
 .q2-carousel-pagination .q2-carousel-page-indicator {
   display: inline-block;
-  height: 12px;
-  width: 12px;
+  height: var(--tct-carousel-page-indicator-size, 8px);
+  width: var(--tct-carousel-page-indicator-size, 8px);
   border-radius: 50%;
-  background-color: var(--tct-carousel-pagination-inactive-color, var(--t-carousel-pagination-inactive-color, var(--t-a11y--gray-color-AA, #949494)));
+  background-color: var(--tct-carousel-page-indicator-inactive-color, var(--t-gray11, #CCCCCC));
   padding: 0;
   border: 0;
-  transition: all 0.5s;
+  transition: var(--tct-carouse-pagination-transition, all 0.5s);
 }
-.q2-carousel-pagination .q2-carousel-page-indicator:hover {
-  background-color: var(--tct-carousel-pagination-active-color, var(--t-carousel-pagination-active-color, var(--tct-primary, var(--t-primary, #006eb2))));
-}
-.q2-carousel-pagination .q2-carousel-page-indicator.active-page {
+.q2-carousel-pagination .q2-carousel-page-indicator:hover, .q2-carousel-pagination .q2-carousel-page-indicator.active-page {
   display: inline-block;
-  background-color: var(--tct-carousel-pagination-active-color, var(--t-carousel-pagination-active-color, var(--tct-primary, var(--t-primary, #006eb2))));
+  background-color: var(--tct-carousel-indicator-active, var(--t-primary, #6A4A9E));
 }
 .q2-carousel-pagination.dynamic .q2-carousel-page-indicator {
   display: none;
@@ -174,7 +192,46 @@ q2-carousel {
   height: 8px;
   width: 8px;
 }
+.q2-carousel-pagination.autoplay {
+  align-items: center;
+  gap: var(--tct-carousel-pagination-gap, var(--app-scale-2x, 8px));
+}
+.q2-carousel-pagination.autoplay.autoplay-on {
+  --comp-carousel-indicator-grow-animation: autoplay-progress 3s linear forwards;
+}
+.q2-carousel-pagination.autoplay .q2-carousel-page-indicator {
+  height: var(--tct-carousel-page-indicator-height, 8px);
+  width: var(--tct-carousel-page-indicator-width, 8px);
+  transition: none;
+}
+.q2-carousel-pagination.autoplay .q2-carousel-page-indicator.active-page {
+  width: var(--tct-carousel-active-page-indicator-width, 24px);
+  border-radius: var(--tct-carousel-active-page-border-radius, 4px);
+  background-color: var(--tct-carousel-indicator-inactive, var(--t-gray11, #CCCCCC));
+  position: relative;
+  overflow: hidden;
+}
+.q2-carousel-pagination.autoplay .q2-carousel-page-indicator.active-page::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  border-radius: var(--tct-carousel-active-page-border-radius-pseudo, 4px);
+  background-color: var(--tct-carousel-indicator-active, var(--t-primary, #6A4A9E));
+  transform-origin: left;
+  animation: var(--comp-carousel-indicator-grow-animation, none);
+}
 
+@keyframes autoplay-progress {
+  from {
+    transform: scaleX(0);
+  }
+  to {
+    transform: scaleX(1);
+  }
+}
 .q2-carousel-swiper-container {
   grid-row: 1;
   /** CONTENT PEEKING **/
@@ -188,7 +245,7 @@ q2-carousel {
   box-sizing: content-box;
 }
 .q2-carousel-swiper-container.content-peek-display .q2-carousel-pane:not(.swiper-slide-active) {
-  transform: scale(0.9);
+  transform: scale(var(--tct-carousel-neighbor-pane-scale, 1));
 }
 .q2-carousel-swiper-container.frameless-display {
   padding: var(--tct-carousel-frameless-container-padding, var(--t-carousel-frameless-container-padding, 0));
@@ -199,7 +256,80 @@ q2-carousel {
 }
 
 .q2-carousel-navigation-button {
-  --tct-btn-icon-hover-background: var(--tct-carousel-btn-hover-background, var(--app-gray-l3, #f2f2f2));
-  --tct-icon-stroke-primary: var(--tct-carousel-btn-icon-stroke-primary, var(--app-gray, #747474));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  opacity: var(--tct-carousel-navigation-arrow-opacity, 1);
+  -webkit-tap-highlight-color: transparent;
+}
+.q2-carousel-navigation-button::before {
+  content: "";
+  position: absolute;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background-color: var(--tct-carousel-navigation-arrow-background-color, var(--t-primary, #6A4A9E));
+  transition: background-color var(--t-tween-time-in-2, 200ms) var(--t-tween-ease-inout, cubic-bezier(0.4, 0, 0.2, 1));
+}
+.q2-carousel-navigation-button:hover::before, .q2-carousel-navigation-button:focus-visible::before {
+  background-color: var(--tct-carousel-btn-hover-background, var(--t-primary-d1, #5F438E));
+}
+.q2-carousel-navigation-button:focus-visible {
+  outline: none;
+}
+.q2-carousel-navigation-button:focus-visible::before {
+  outline: 2px solid var(--const-focus-color, #1a73e8);
+  outline-offset: 2px;
+}
+.q2-carousel-navigation-button q2-icon {
+  position: relative;
+  --tct-icon-size: 16px;
+  --tct-icon-stroke-primary: var(--tct-carousel-btn-icon-stroke-primary, var(--t-base));
   --tct-icon-stroke-secondary: var(--tct-carousel-btn-icon-stroke-secondary, var(--app-gray, #747474));
+}
+
+.q2-carousel-autoplay-control {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+.q2-carousel-autoplay-control::before {
+  content: "";
+  position: absolute;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: transparent;
+  transition: background-color var(--t-tween-time-in-2, 200ms) var(--t-tween-ease-inout, cubic-bezier(0.4, 0, 0.2, 1));
+}
+.q2-carousel-autoplay-control:hover::before, .q2-carousel-autoplay-control:focus-visible::before {
+  background-color: var(--tct-carousel-autoplay-hover-background, var(--t-gray13, #E6E6E6));
+}
+.q2-carousel-autoplay-control:focus-visible {
+  outline: none;
+}
+.q2-carousel-autoplay-control:focus-visible::before {
+  outline: 2px solid var(--const-focus-color, #1a73e8);
+  outline-offset: 2px;
+}
+.q2-carousel-autoplay-control .autoplay-icon {
+  position: relative;
+  width: var(--tct-carousel-autoplay-icon-width, 16px);
+  height: var(--tct-carousel-autoplay-icon-height, 16px);
+  color: var(--tct-carousel-autoplay-icon-color, var(--t-gray6, #4D4D4D));
 }

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

@@ -45,15 +45,27 @@ export class Q2Carousel {
         /** Display navigation arrow buttons as another way to navigate the carousel. */
         this.showNavigationArrows = false;
         this.configureCarousel = (carouselWrapper, carouselOptions) => {
-            var _a, _b;
+            var _a, _b, _c, _d;
+            // Disconnect observer to prevent infinite loop from Swiper's internal DOM changes (e.g. loop mode)
+            (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
             if (!!this.swiper) {
                 this.tearDownCarousel();
             }
             this.autoPlayInProgress = this.autoPlay;
+            // Save the target index before Swiper init — the realIndexChange callback
+            // fires during construction and may overwrite this.index
+            const targetIndex = this.realIndex;
             new Swiper(carouselWrapper, carouselOptions);
-            (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.slideTo(this.realIndex);
+            (_b = this.swiper) === null || _b === void 0 ? void 0 : _b.slideToLoop(targetIndex, 0);
+            // Ensure popover listener is on the active pane after initial positioning
+            (_c = this.activePane) === null || _c === void 0 ? void 0 : _c.addEventListener('popoverStateChanged', this.handlePopovers);
             if (this.autoPlayInProgress)
-                (_b = this.swiper) === null || _b === void 0 ? void 0 : _b.autoplay.start();
+                (_d = this.swiper) === null || _d === void 0 ? void 0 : _d.autoplay.start();
+            // Re-observe after Swiper's DOM changes have settled
+            requestAnimationFrame(() => {
+                var _a;
+                (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.hostElement, { childList: true, subtree: true });
+            });
         };
         this.handleAutoPlayPause = (action) => {
             var _a;
@@ -97,17 +109,19 @@ export class Q2Carousel {
                     break;
                 case 'Home':
                     event.preventDefault();
-                    (_c = this.swiper) === null || _c === void 0 ? void 0 : _c.slideTo(0);
+                    (_c = this.swiper) === null || _c === void 0 ? void 0 : _c.slideToLoop(0);
                     break;
                 case 'End':
                     event.preventDefault();
-                    (_d = this.swiper) === null || _d === void 0 ? void 0 : _d.slideTo(this.paneCount - 1);
+                    (_d = this.swiper) === null || _d === void 0 ? void 0 : _d.slideToLoop(this.paneCount - 1);
                     break;
             }
         };
         this.onMutationObserved = () => {
-            this.updateCarouselPaneProps();
-            this.configureCarousel(this.carouselWrapper, this.activeCarouselOptions);
+            if (this.paneCount !== this.currentPaneCount) {
+                this.updateCarouselPaneProps();
+                this.configureCarousel(this.carouselWrapper, this.activeCarouselOptions);
+            }
         };
         this.setCarouselWrapperWidth = () => {
             if (this.insufficientPanes)
@@ -120,7 +134,9 @@ export class Q2Carousel {
         };
         this.updateCarouselPaneProps = () => {
             const { framelessPanes, paneCount, paneArray } = this;
-            paneArray.forEach((pane, index) => {
+            paneArray.forEach((pane, domIndex) => {
+                const swiperIndex = pane.getAttribute('data-swiper-slide-index');
+                const index = swiperIndex !== null ? parseInt(swiperIndex, 10) : domIndex;
                 pane.index = index;
                 pane.siblingCount = paneCount;
                 pane.isActivePane = index === this.realIndex;
@@ -132,9 +148,9 @@ export class Q2Carousel {
         // #region Render Methods
         this.renderAutoPlayBtn = () => {
             const { autoPlayInProgress } = this;
-            return (h("q2-btn", { type: "button", "hide-label": true, label: loc(autoPlayInProgress
+            return (h("button", { type: "button", class: "q2-carousel-autoplay-control", "aria-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' })));
+                    : 'tecton.element.carousel.resumePlayLabel'), onClick: () => this.handleAutoPlayPause(autoPlayInProgress ? 'pause' : 'play') }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", class: "autoplay-icon", "aria-hidden": "true" }, autoPlayInProgress ? (h("path", { d: "M7.667 3.667h-2c-.737 0-1.334.597-1.334 1.333v14c0 .736.597 1.333 1.334 1.333h2C8.403 20.333 9 19.736 9 19V5c0-.736-.597-1.333-1.333-1.333Zm10.666 0h-2C15.597 3.667 15 4.264 15 5v14c0 .736.597 1.333 1.333 1.333h2c.737 0 1.334-.597 1.334-1.333V5c0-.736-.597-1.333-1.334-1.333Z" })) : (h("path", { d: "m6.868 3.837 12.656 7.008a1.316 1.316 0 0 1 0 2.31L6.868 20.163c-.892.494-1.993-.144-1.993-1.155V4.992c0-1.01 1.1-1.65 1.993-1.155Z" })))));
         };
         this.renderInsufficientPanesDisplay = () => {
             let insufficientPanesContainerClasses = [
@@ -146,35 +162,36 @@ export class Q2Carousel {
             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" }))));
+            return (h("div", { class: "next-btn" }, h("button", { type: "button", class: "q2-carousel-navigation-button q2-carousel-navigation-button-next", "aria-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: "arrow-right" }))));
         };
         this.renderPaginationArea = () => {
-            const { useDynamicPaginationDots, realIndex, paneCount, paneArray } = this;
-            let paginationContainerClasses = ['q2-carousel-pagination'];
+            const { useDynamicPaginationDots, realIndex, paneCount } = this;
+            const paginationContainerClasses = ['q2-carousel-pagination', 'autoplay'];
             if (useDynamicPaginationDots)
-                paginationContainerClasses = [...paginationContainerClasses, 'dynamic'];
-            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)
+                paginationContainerClasses.push('dynamic');
+            if (this.autoPlayInProgress)
+                paginationContainerClasses.push('autoplay-on');
+            return (h("div", { class: paginationContainerClasses.join(' '), role: "tablist", "aria-label": loc('tecton.element.carousel.tabWrapperLabel') }, Array.from({ length: paneCount }, (_, i) => i).map(index => {
+                const isActive = index === realIndex;
+                let btnClasses = ['q2-carousel-page-indicator', `q2-carousel-page-indicator-${index}`];
+                if (isActive)
                     btnClasses = [...btnClasses, 'active-page'];
                 if (useDynamicPaginationDots)
                     btnClasses = [...btnClasses, 'dynamic'];
-                const withinOneOfActive = pane.index === realIndex + 1 || pane.index === realIndex - 1;
+                const withinOneOfActive = index === realIndex + 1 || index === realIndex - 1;
                 if (withinOneOfActive)
                     btnClasses = [...btnClasses, 'active-adjacent'];
-                const withinTwoOfActive = pane.index === realIndex + 2 || pane.index === realIndex - 2;
+                const withinTwoOfActive = index === realIndex + 2 || 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}`, 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(),
+                return (h("button", { type: "button", role: "tab", tabIndex: isActive ? undefined : -1, "aria-selected": `${isActive}`, class: btnClasses.join(' '), onClick: () => { var _a; return (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.slideToLoop(index); }, onKeyDown: this.keydownHandler, "aria-label": loc('tecton.element.carousel.itemDescription', [
+                        (index + 1).toString(),
                         paneCount.toString(),
                     ]) }));
             })));
         };
         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" }))));
+            return (h("div", { class: "prev-btn" }, h("button", { type: "button", class: "q2-carousel-navigation-button q2-carousel-navigation-button-prev", "aria-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: "arrow-left" }))));
         };
     }
     // #endregion
@@ -198,6 +215,7 @@ export class Q2Carousel {
         }
         this.universalCarouselOptions = {
             centeredSlides: true,
+            loop: true,
             focusableElements: 'q2-btn, q2-dropdown, q2-item, q2-list, a, input, select, textarea, button, video, label, option',
             autoplay: this.autoPlay,
             modules: [Autoplay],
@@ -214,7 +232,7 @@ export class Q2Carousel {
                         this.paginationBtns[swiper.realIndex].focus({ preventScroll: true });
                     }
                     else if (isCarouselFocused)
-                        swiper.slides[swiper.realIndex].focus({
+                        swiper.slides[swiper.activeIndex].focus({
                             preventScroll: true,
                         });
                 },
@@ -252,9 +270,8 @@ export class Q2Carousel {
     // #endregion
     // #region Listeners
     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 });
+        var _a;
+        (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.slideToLoop(event.detail.paneIndex);
     }
     delegateFocus(event) {
         var _a, _b;
@@ -270,12 +287,13 @@ export class Q2Carousel {
      * @testOnly
      */
     async selectCarouselPane(index) {
+        var _a, _b, _c;
         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 });
+        (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.slideToLoop(actualIndex);
+        const activeSlide = (_b = this.swiper) === null || _b === void 0 ? void 0 : _b.slides[(_c = this.swiper) === null || _c === void 0 ? void 0 : _c.activeIndex];
+        activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.focus({ preventScroll: true });
     }
     /**
      * Clicks and Focuses the `<button>` that controls playing or pausing the auto-play feature of the carousel.
@@ -311,7 +329,8 @@ export class Q2Carousel {
         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);
+            (_b = this.swiper) === null || _b === void 0 ? void 0 : _b.slideToLoop(this.realIndex);
+            // this.swiper?.slideTo(this.realIndex);
         }
     }
     // #endregion
@@ -323,7 +342,7 @@ export class Q2Carousel {
     }
     get activePane() {
         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;
+        const activeSlide = (_c = (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.slides[(_b = this.swiper) === null || _b === void 0 ? void 0 : _b.activeIndex]) !== null && _c !== void 0 ? _c : 0;
         return activeSlide instanceof HTMLElement ? activeSlide : null;
     }
     get insufficientPanes() {
@@ -341,11 +360,11 @@ export class Q2Carousel {
     get peekContentDisplayOptions() {
         return {
             slidesPerView: 2,
-            spaceBetween: this.compactMode ? 0 : -10,
+            spaceBetween: this.compactMode ? 0 : 10,
             centerInsufficientSlides: false,
             breakpoints: {
                 [carouselDesktopBreakpoint]: {
-                    slidesPerView: 3,
+                    slidesPerView: 2,
                 },
             },
             ...this.universalCarouselOptions,
@@ -367,7 +386,7 @@ export class Q2Carousel {
         }
     }
     render() {
-        const { paneCount, fullWidthPanes, framelessPanes, compactMode, showNavigationArrows, insufficientPanes, autoPlay, hidePagination, ariaLiveValue, label, } = this;
+        const { paneCount, fullWidthPanes, framelessPanes, compactMode, showNavigationArrows, arrowPosition = 'bottom', insufficientPanes, autoPlay, hidePagination, ariaLiveValue, label, } = this;
         let carouselContainerClasses = ['q2-carousel-swiper-container', 'swiper'];
         if (fullWidthPanes)
             carouselContainerClasses = [...carouselContainerClasses, 'full-width-display'];
@@ -377,10 +396,16 @@ export class Q2Carousel {
             carouselContainerClasses = [...carouselContainerClasses, 'content-peek-display'];
         if (compactMode)
             carouselContainerClasses = [...carouselContainerClasses, 'compact'];
-        let paginationWrapperClasses = ['q2-carousel-pagination-navigation-wrapper'];
-        if (showNavigationArrows)
-            paginationWrapperClasses = [...paginationWrapperClasses, 'evenly-space'];
-        return (h(Host, { key: '5f48c7aab4485b79ffc625f050e2ce386ccadbf4', 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)))))));
+        const paginationWrapperClasses = ['q2-carousel-pagination-navigation-wrapper'];
+        if (showNavigationArrows && arrowPosition === 'bottom')
+            paginationWrapperClasses.push('evenly-space');
+        if (showNavigationArrows && arrowPosition === 'hug')
+            paginationWrapperClasses.push('center-space');
+        return (h(Host, { key: '56ecddd3c2bbad43dba7fdb949d539a937b3e5f0', id: `q2-carousel-${this.guid}`, class: "q2-carousel-instance" }, insufficientPanes ? (this.renderInsufficientPanesDisplay()) : (h(Fragment, null, paneCount > 1 && (h("div", { class: paginationWrapperClasses.join(' ') }, showNavigationArrows &&
+            ['bottom', 'hug'].includes(arrowPosition) &&
+            this.renderPrevNavBtn(), h("div", { class: "q2-carousel-control-center-tray" }, !hidePagination && this.renderPaginationArea(), autoPlay && this.renderAutoPlayBtn()), showNavigationArrows &&
+            ['bottom', 'hug'].includes(arrowPosition) &&
+            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)), showNavigationArrows && arrowPosition === 'float' && (h("div", { class: "q2-carousel-floating-arrow-wrapper" }, this.renderPrevNavBtn(), this.renderNextNavBtn())))))));
     }
     static get is() { return "q2-carousel"; }
     static get originalStyleUrls() {
@@ -417,6 +442,25 @@ export class Q2Carousel {
                 "setter": false,
                 "reflect": true
             },
+            "arrowPosition": {
+                "type": "string",
+                "attribute": "arrow-position",
+                "mutable": false,
+                "complexType": {
+                    "original": "'bottom' | 'hug' | 'float' | undefined",
+                    "resolved": "\"bottom\" | \"float\" | \"hug\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Position to show the navigation arrows\n`float`: vertically centered and float over the carousel pane.\n`bottom`: bottom area around pagination indicator, the arrows at far left/right edges.\n`hug`: bottom area around pagination indicator and wraps the pagination indicator."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
             "autoPlay": {
                 "type": "boolean",
                 "attribute": "auto-play",
@@ -621,6 +665,10 @@ export class Q2Carousel {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
                         }
                     },
                     "return": "Promise<void>"
@@ -642,9 +690,9 @@ export class Q2Carousel {
                             "location": "global",
                             "id": "global::Promise"
                         },
-                        "HTMLQ2BtnElement": {
+                        "HTMLButtonElement": {
                             "location": "global",
-                            "id": "global::HTMLQ2BtnElement"
+                            "id": "global::HTMLButtonElement"
                         }
                     },
                     "return": "Promise<void>"