q2-tecton-elements 1.10.6 → 1.10.9

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

@@ -1,6 +1,6 @@
-import { Component, Prop, Watch, State, Element, Host, h, Event, Listen } from '@stencil/core';
-import Swiper from 'swiper';
-import { createGuid, loc, handleAriaLabel } from 'src/utils';
+import { Component, Prop, Watch, State, Fragment, Element, Host, h, Event, Listen } from '@stencil/core';
+import Swiper, { Autoplay } from 'swiper';
+import { createGuid, loc, handleAriaLabel, overrideFocus, isEventFromElement } from 'src/utils';
 const carouselBreakpoint = 500; /* width in px of this host element where the layout starts to get unruly */
 export class Q2Carousel {
   constructor() {
@@ -9,110 +9,59 @@ export class Q2Carousel {
     this.fullWidthPanes = false;
     this.hidePagination = false;
     this.showNavigationArrows = false;
+    this.label = 'tecton.element.carousel.ariaLabel';
     this.index = 1;
     this.universalCarouselOptions = {
       centeredSlides: true,
+      focusableElements: 'q2-btn, a, input, select, textarea, button, video, label, option',
       autoplay: this.autoPlay,
-      keyboard: {
-        enabled: true,
-        onlyInViewport: true
-      },
+      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
         },
-        transitionEnd: () => {
-          if (this.applyFocus) {
-            this.setFocusOnAppropriatePane();
-            this.applyFocus = false;
+        activeIndexChange: swiper => {
+          this.activePaneIndex = swiper.activeIndex;
+          this.organizePanes();
+          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`);
+          if (isPaginationFocused) {
+            this.paginationBtns[swiper.activeIndex].focus({ preventScroll: true });
           }
+          else if (isCarouselFocused)
+            swiper.slides[swiper.activeIndex].focus({
+              preventScroll: true
+            });
         }
       }
     };
-    this.fullWidthDisplayOptions = Object.assign({ slidesPerView: '1', spaceBetween: 100 }, this.universalCarouselOptions);
-    this.activePaneIndex = null;
+    this.fullWidthDisplayOptions = Object.assign({ slidesPerView: 1, spaceBetween: 100 }, this.universalCarouselOptions);
+    this.activePaneIndex = this.realIndex;
     this.applyFocus = false;
-    this.compactMode = false;
+    this.applyPaginationFocus = false;
     this.autoPlayInProgress = false;
+    this.compactMode = false;
     this.carouselWrapperWidth = 0;
-    this.tabIndex = 0;
     // COMPUTED //
     this.guid = createGuid();
     // METHODS //
     this.setCarouselWrapperWidth = () => {
-      this.carouselWrapperWidth = this.carouselElement.clientWidth;
-    };
-    this.updateActivePaneByIndex = (index, applyFocus) => {
-      if (applyFocus) {
-        this.applyFocus = true;
-      }
-      this.activePaneIndex = index;
-      if (this.swiper) {
-        this.organizePanes();
-        this.swiper.slideTo(index);
-      }
+      if (this.insufficientPanes)
+        return;
+      this.carouselWrapperWidth = this.carouselWrapper.clientWidth;
     };
     this.handleSlideChange = (newIndex) => {
       this.change.emit({ index: newIndex + 1 });
     };
-    this.setFocusOnAppropriatePane = () => {
-      this.carouselActivePane.focus();
-    };
-    this.passFocusToAppropriateButton = () => {
-      if (this.hidePagination) {
-        this.carouselAvailableNavButton.focus();
-      }
-      else {
-        this.carouselPaginationActiveButton.focus();
-      }
-    };
-    this.generateCarouselContainerClass = (fullWidthPanes, compactMode, insufficientPanes) => {
-      let displayClass = insufficientPanes ? 'insufficient-panes' : '';
-      let displayTypeClass = fullWidthPanes ? 'full-width-display' : 'content-peek-display';
-      let sizeClass = compactMode ? 'compact' : '';
-      return `q2-carousel-swiper-container swiper-container ${displayClass} ${displayTypeClass} ${sizeClass}`;
-    };
-    this.generatePaginationWrapperClass = (spaceBetweenPagination) => {
-      let spaceBetweenClass = spaceBetweenPagination ? 'evenly-space' : '';
-      return `q2-carousel-pagination-navigation-wrapper ${spaceBetweenClass}`;
-    };
-    this.generatePaginationClass = dynamicPaginationDots => {
-      let dynamicDotsClass = dynamicPaginationDots ? 'dynamic' : '';
-      return `q2-carousel-pagination ${dynamicDotsClass}`;
-    };
-    this.generatePaginationIndicatorClass = (currentIndex, dynamicPaginationDots) => {
-      let currentIndexMatchesActiveIndex = currentIndex === this.activePaneIndex;
-      let activeClass = currentIndexMatchesActiveIndex ? 'active-page' : '';
-      let dynamicClass = dynamicPaginationDots ? 'dynamic' : '';
-      let withinOneOfActive = currentIndex === this.activePaneIndex + 1 || currentIndex === this.activePaneIndex - 1;
-      let withinOneClass = withinOneOfActive ? 'active-adjacent' : null;
-      let withinTwoOfActive = currentIndex === this.activePaneIndex + 2 || currentIndex === this.activePaneIndex - 2;
-      let withinTwoClass = withinTwoOfActive ? 'active-adjacent-adjacent' : null;
-      return `q2-carousel-page-indicator q2-carousel-page-indicator-${currentIndex} ${activeClass} ${dynamicClass} ${withinOneClass} ${withinTwoClass}`;
-    };
-    this.generatePrevButtonClass = () => {
-      let availableClass = this.prevPaneAvailable ? '' : 'hide-carousel-navigation-button';
-      return `q2-carousel-navigation-button q2-carousel-navigation-button-prev ${availableClass}`;
-    };
-    this.generateNextButtonClass = () => {
-      let availableClass = this.nextPaneAvailable ? '' : 'hide-carousel-navigation-button';
-      return `q2-carousel-navigation-button q2-carousel-navigation-button-next ${availableClass}`;
-    };
-    this.generateInsufficientPanesDisplayClass = (fullWidthPanes, compactMode) => {
-      let displayTypeClass = fullWidthPanes ? 'full-width-display' : 'content-peek-display';
-      let sizeClass = compactMode ? 'compact' : '';
-      return `insufficient-pane-feedback ${displayTypeClass} ${sizeClass}`;
-    };
-    this.configureCarousel = (carouselElement, carouselOptions) => {
+    this.configureCarousel = (carouselWrapper, carouselOptions) => {
+      var _a;
       if (!!this.swiper) {
         this.tearDownCarousel();
       }
-      this.swiper = new Swiper(carouselElement, carouselOptions);
-      this.updateActivePaneByIndex(this.realIndex, false);
-    };
-    this.revampCarousel = () => {
-      this.configureCarousel(this.carouselElement, this.activeCarouselOptions);
+      this.autoPlayInProgress = this.autoPlay;
+      this.swiper = new Swiper(carouselWrapper, carouselOptions);
+      (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.slideTo(this.realIndex);
     };
     this.tearDownCarousel = () => {
       this.swiper.destroy();
@@ -123,33 +72,17 @@ export class Q2Carousel {
         pane.index = index;
         pane.siblingCount = this.paneCollection.length;
         pane.isActivePane = index === this.activePaneIndex;
-        pane.hideFromScreenReader = !(index === this.activePaneIndex);
       });
     };
     this.handleAutoPlayPause = () => {
-      if (!!this.swiper && this.autoPlayIsRunning) {
-        this.autoPlayInProgress = false;
-        this.swiper.autoplay.stop();
-      }
-      else if (!!this.swiper && !this.autoPlayIsRunning) {
-        this.autoPlayInProgress = true;
-        this.swiper.autoplay.start();
-      }
-    };
-    this.handlePaneWrapperTab = event => {
-      if (event.shiftKey &&
-        event.which == 9 &&
-        event.target.className.includes('q2-carousel-pane')) {
-        this.carouselWrapper.focus();
-      }
-    };
-    this.handleCarouselFocus = event => {
-      if (event.which == 9 &&
-        !event.shiftKey &&
-        event.target.className.includes('q2-carousel-swiper-container')) {
-        event.preventDefault();
-        this.setFocusOnAppropriatePane();
-      }
+      const { swiper: { autoplay } } = this;
+      if (!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) {
@@ -157,58 +90,113 @@ export class Q2Carousel {
       }
       this.handleSlideChange(newIndex);
     };
-    this.handlePaginationShiftTab = event => {
-      if (event.shiftKey && event.which == 9) {
-        event.preventDefault();
-        this.carouselActivePane.focus();
+    this.onPaginationKeyDown = (event) => {
+      var _a, _b;
+      switch (event.key) {
+        case 'ArrowRight':
+          event.preventDefault();
+          this.applyFocus = false;
+          this.applyPaginationFocus = true;
+          this.swiper.slideNext();
+          break;
+        case 'ArrowLeft':
+          event.preventDefault();
+          this.applyFocus = false;
+          this.applyPaginationFocus = true;
+          this.swiper.slidePrev();
+          break;
+        case 'Home':
+          event.preventDefault();
+          this.applyFocus = false;
+          this.applyPaginationFocus = true;
+          (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.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);
+          break;
       }
     };
-    this.handlePaneWrapperFocus = event => {
-      const targetClasses = event.target.className;
-      const relatedClasses = [
-        'page-indicator',
-        'q2-carousel-navigation-button',
-        'q2-carousel-swiper-container'
-      ];
-      const relatedTarget = event.relatedTarget;
-      if (targetClasses.includes('carousel-pane') &&
-        !relatedClasses.some(className => relatedTarget && relatedTarget.className.includes(className)) &&
-        !event.target.contains(relatedTarget)) {
-        event.preventDefault();
-        this.passFocusToAppropriateButton();
-      }
-      if (targetClasses.includes('page-indicator')) {
-        event.preventDefault();
-        this.passFocusToAppropriateButton();
+    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.paginationArea = () => {
-      return (h("div", { class: this.generatePaginationClass(this.dynamicPaginationDots) }, this.paneArray.map(pane => (h("button", { type: "button", class: this.generatePaginationIndicatorClass(pane.index, this.dynamicPaginationDots), onClick: () => this.handleCarouselNavigationSelection(pane.index, true) },
-        h("span", { class: "sr-only item-count" },
-          loc('tecton.element.carousel.itemDescription', [
-            (pane.index + 1).toString()
-          ]),
-          loc('tecton.element.carousel.collectionDescription', [
+      let paginationContainerClasses = ['q2-carousel-pagination'];
+      if (this.dynamicPaginationDots)
+        paginationContainerClasses = [...paginationContainerClasses, 'dynamic'];
+      return (h("div", { class: paginationContainerClasses.join(' '), role: "tablist", "aria-label": loc('tecton.element.carousel.tabWrapperLabel') }, this.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)
+          btnClasses = [...btnClasses, 'dynamic'];
+        let withinOneOfActive = pane.index === this.activePaneIndex + 1 ||
+          pane.index === this.activePaneIndex - 1;
+        if (withinOneOfActive)
+          btnClasses = [...btnClasses, 'active-adjacent'];
+        let withinTwoOfActive = pane.index === this.activePaneIndex + 2 ||
+          pane.index === this.activePaneIndex - 2;
+        if (withinTwoOfActive)
+          btnClasses = [...btnClasses, 'active-adjacent-adjacent'];
+        return (h("button", { type: "button", role: "tab", tabIndex: pane.isActivePane ? undefined : -1, "aria-selected": pane.isActivePane ? 'true' : 'false', class: btnClasses.join(' '), onClick: () => this.handleCarouselNavigationSelection(pane.index, true), onKeyDown: event => this.onPaginationKeyDown(event), "aria-label": loc('tecton.element.carousel.itemDescription', [
+            (pane.index + 1).toString(),
             this.paneCount.toString()
-          ])),
-        pane.index === this.activePaneIndex ? (h("span", { class: "sr-only current-slide-announcement" }, loc('tecton.element.carousel.currentSlideAnnouncement'))) : null)))));
+          ]) }));
+      })));
     };
-    this.autoPlayButton = () => {
-      return (h("button", { type: "button", onClick: this.handleAutoPlayPause, "aria-label": this.autopPlayControlButtonText, class: "q2-carousel-autoplay-control" },
-        h("q2-icon", { type: this.autopPlayControlButtonIconType })));
+    this.autoPlayBtn = () => {
+      return (h("q2-btn", { type: "button", "hide-label": true, label: loc(this.autoPlayInProgress
+          ? 'tecton.element.carousel.pausePlayLabel'
+          : 'tecton.element.carousel.resumePlayLabel'), class: "q2-carousel-autoplay-control", onClick: this.handleAutoPlayPause },
+        h("q2-icon", { type: this.autoPlayInProgress ? 'pause' : 'play' })));
     };
-    this.prevNavButton = () => {
-      return (h("button", { type: "button", class: this.generatePrevButtonClass(), onClick: () => this.handleCarouselNavigationSelection(this.activePaneIndex - 1, true) },
-        h("span", { class: "sr-only" }, loc('tecton.element.carousel.previousItemLabel')),
-        h("q2-icon", { type: "chevron-left" })));
+    this.prevNavBtn = () => {
+      const prevPaneAvailable = this.activePaneIndex > 0;
+      return (h("div", null,
+        h("q2-btn", { type: "button", disabled: prevPaneAvailable ? undefined : true, class: "q2-carousel-navigation-button q2-carousel-navigation-button-prev", "hide-label": true, label: loc('tecton.element.carousel.previousItemLabel'), onClick: () => this.handleCarouselNavigationSelection(this.activePaneIndex - 1, true) },
+          h("q2-icon", { type: "chevron-left" }))));
     };
-    this.nextNavButton = () => {
-      return (h("button", { type: "button", class: this.generateNextButtonClass(), onClick: () => this.handleCarouselNavigationSelection(this.activePaneIndex + 1, true) },
-        h("span", { class: "sr-only" }, loc('tecton.element.carousel.nextItemLabel')),
-        h("q2-icon", { type: "chevron-right" })));
+    this.nextNavBtn = () => {
+      const nextPaneAvailable = this.activePaneIndex < this.paneCount - 1;
+      return (h("div", null,
+        h("q2-btn", { type: "button", disabled: nextPaneAvailable ? undefined : true, class: "q2-carousel-navigation-button q2-carousel-navigation-button-next", "hide-label": true, label: loc('tecton.element.carousel.nextItemLabel'), onClick: () => this.handleCarouselNavigationSelection(this.activePaneIndex + 1, true) },
+          h("q2-icon", { type: "chevron-right" }))));
     };
     this.insufficientPanesDisplay = () => {
-      return (h("div", { class: this.generateInsufficientPanesDisplayClass(this.fullWidthPanes, this.compactMode) },
+      let insufficientPanesContainerClasses = [
+        'insufficient-pane-feedback',
+        this.fullWidthPanes ? 'full-width-display' : 'content-peek-display'
+      ];
+      if (this.compactMode)
+        insufficientPanesContainerClasses = [...insufficientPanesContainerClasses, 'compact'];
+      return (h("div", { class: insufficientPanesContainerClasses.join(' ') },
         h("div", { class: "insufficient-panes-icon-wrapper" },
           h("q2-icon", { type: "warning" })),
         h("p", { class: "insufficient-panes-header" },
@@ -219,60 +207,25 @@ export class Q2Carousel {
   ariaLabelObserver() {
     handleAriaLabel(this);
   }
-  fullWidthPanesChanged() {
-    this.revampCarousel();
-  }
-  autoPlayChanged() {
-    this.revampCarousel();
-  }
   carouselWrapperWidthChanged() {
     this.compactMode = this.carouselWrapperWidth < carouselBreakpoint;
   }
-  compactModeChanged() {
-    this.revampCarousel();
-  }
   indexChanged() {
-    this.updateActivePaneByIndex(this.realIndex, false);
+    var _a;
+    (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.slideTo(this.realIndex);
   }
-  get peekContentDisplayOptions() {
-    return Object.assign({ slidesPerView: '2', spaceBetween: this.spaceBetweenPeekContentPanes, centerInsufficientSlides: false }, this.universalCarouselOptions);
+  revampCarousel() {
+    this.configureCarousel(this.carouselWrapper, this.activeCarouselOptions);
   }
-  get spaceBetweenPeekContentPanes() {
-    return this.compactMode ? 0 : -10;
+  get peekContentDisplayOptions() {
+    return Object.assign({ slidesPerView: 2, spaceBetween: this.compactMode ? 0 : -10, centerInsufficientSlides: false }, this.universalCarouselOptions);
   }
   get realIndex() {
     const indexNum = Number(this.index);
     return indexNum > 0 ? indexNum - 1 : 0;
   }
-  get carouselUniqueId() {
-    return `q2-carousel-${this.guid}`;
-  }
-  get carouselElement() {
-    return this.hostElement.querySelector(`.swiper-container`);
-  }
-  get carouselWrapper() {
-    return this.hostElement.querySelector(`.q2-carousel-swiper-container`);
-  }
-  get carouselPaneWrapperElement() {
-    return this.hostElement.querySelector(`.q2-carousel-swiper-wrapper`);
-  }
-  get carouselActivePane() {
-    return this.hostElement.querySelector(`.q2-carousel-pane-${this.activePaneIndex}`);
-  }
-  get carouselPaginationWrapperElement() {
-    return this.hostElement.querySelector(`.q2-carousel-pagination-navigation-wrapper`);
-  }
-  get carouselPaginationActiveButton() {
-    return this.hostElement.querySelector(`.q2-carousel-page-indicator-${this.activePaneIndex}`);
-  }
-  get carouselPaginationPrevButton() {
-    return this.hostElement.querySelector('.q2-carousel-navigation-button-prev');
-  }
-  get carouselFirstPaginationButton() {
-    return this.hostElement.querySelector('.q2-carousel-page-indicator');
-  }
-  get carouselAvailableNavButton() {
-    return this.hostElement.querySelector(`.q2-carousel-navigation-button`);
+  get paginationBtns() {
+    return this.hostElement.querySelectorAll('.q2-carousel-page-indicator');
   }
   get activeCarouselOptions() {
     return this.fullWidthPanes ? this.fullWidthDisplayOptions : this.peekContentDisplayOptions;
@@ -280,9 +233,6 @@ export class Q2Carousel {
   get dynamicPaginationDots() {
     return this.paneCount && this.paneCount > 5;
   }
-  get spaceBetweenPagination() {
-    return this.showNavigationArrows;
-  }
   get paneCollection() {
     return this.hostElement.querySelectorAll('q2-carousel-pane');
   }
@@ -295,92 +245,67 @@ export class Q2Carousel {
   get insufficientPanes() {
     return this.paneCount < 1;
   }
-  get prevPaneAvailable() {
-    return this.activePaneIndex > 0;
-  }
-  get showPagination() {
-    return !this.hidePagination;
-  }
-  get nextPaneAvailable() {
-    return this.activePaneIndex < this.paneCount - 1;
-  }
-  get dynamicAriaLabel() {
-    return this.label ? loc(this.label) : loc('tecton.element.carousel.ariaLabel');
-  }
-  get autoPlayIsRunning() {
-    return !!this.swiper && this.autoPlayInProgress;
-  }
-  get autopPlayControlButtonText() {
-    return this.autoPlayIsRunning ? 'Pause Play' : 'Resume Play';
-  }
-  get autopPlayControlButtonIconType() {
-    return this.autoPlayIsRunning ? 'skip' : 'play';
-  }
-  get insufficientPanesAndPaginationOn() {
-    return this.paneCount > 1 && !this.hidePagination;
-  }
   // HOST ELEMENT EVENTS //
   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];
+    if (!isEventFromElement(event, this.hostElement) || !activePane)
+      return;
+    activePane.focus({ preventScroll: true });
+  }
   // LIFECYCLES //
   componentWillLoad() {
     handleAriaLabel(this);
+    this.organizePanes();
     window.addEventListener('resize', this.setCarouselWrapperWidth);
-    this.updateActivePaneByIndex(this.realIndex, false);
-    if (this.autoPlay) {
-      this.autoPlayInProgress = true;
-    }
   }
   componentDidLoad() {
     this.setCarouselWrapperWidth();
-    this.carouselPaneWrapperElement.addEventListener('keydown', this.handlePaneWrapperTab, true);
-    this.carouselPaneWrapperElement.addEventListener('focus', this.handlePaneWrapperFocus, true);
-    this.carouselWrapper.addEventListener('keyup', this.handleCarouselFocus, true);
-    if (this.showNavigationArrows) {
-      this.carouselPaginationPrevButton.addEventListener('keydown', this.handlePaginationShiftTab, true);
-    }
-    else if (this.insufficientPanesAndPaginationOn) {
-      this.carouselFirstPaginationButton.addEventListener('keydown', this.handlePaginationShiftTab, true);
-    }
-    if (this.carouselElement && !!this.paneArray.length) {
-      this.configureCarousel(this.carouselElement, this.activeCarouselOptions);
+    if (this.carouselWrapper && !!this.paneArray.length) {
+      this.configureCarousel(this.carouselWrapper, this.activeCarouselOptions);
     }
+    overrideFocus(this.hostElement);
   }
   disconnectedCallback() {
     if (!!this.swiper) {
-      this.swiper.destroy();
-      this.swiper = null;
+      this.tearDownCarousel();
     }
     window.removeEventListener('resize', this.setCarouselWrapperWidth);
-    this.carouselPaneWrapperElement.removeEventListener('keydown', this.handlePaneWrapperTab, true);
-    this.carouselPaneWrapperElement.removeEventListener('focus', this.handlePaneWrapperFocus, true);
-    this.carouselWrapper.removeEventListener('keyup', this.handleCarouselFocus, true);
-    if (this.showNavigationArrows) {
-      this.carouselPaginationPrevButton.removeEventListener('keydown', this.handlePaginationShiftTab, true);
-    }
-    else if (this.insufficientPanesAndPaginationOn) {
-      this.carouselFirstPaginationButton.removeEventListener('keydown', this.handlePaginationShiftTab, true);
-    }
   }
   render() {
-    return (h(Host, { id: this.carouselUniqueId, class: "q2-carousel-instance" },
-      this.insufficientPanes ? this.insufficientPanesDisplay() : null,
-      h("div", { class: this.generateCarouselContainerClass(this.fullWidthPanes, this.compactMode, this.insufficientPanes), role: "region", tabIndex: this.tabIndex, "aria-live": "polite", "aria-label": this.dynamicAriaLabel },
-        h("div", { class: "q2-carousel-swiper-wrapper swiper-wrapper" },
-          h("slot", null)),
-        this.paneCount > 1 ? (h("div", { class: this.generatePaginationWrapperClass(this.spaceBetweenPagination) },
-          this.showNavigationArrows ? this.prevNavButton() : null,
-          h("div", { class: "q2-carousel-control-center-tray" },
-            this.showPagination ? this.paginationArea() : null,
-            this.autoPlay ? this.autoPlayButton() : null),
-          this.showNavigationArrows ? this.nextNavButton() : null)) : null)));
+    let carouselContainerClasses = [
+      'q2-carousel-swiper-container',
+      'swiper-container',
+      this.fullWidthPanes ? 'full-width-display' : 'content-peek-display'
+    ];
+    if (this.compactMode)
+      carouselContainerClasses = [...carouselContainerClasses, 'compact'];
+    let paginationWrapperClasses = ['q2-carousel-pagination-navigation-wrapper'];
+    if (this.showNavigationArrows)
+      paginationWrapperClasses = [...paginationWrapperClasses, 'evenly-space'];
+    return (h(Host, { 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.autoPlayInProgress ? 'off' : 'polite', onKeyDown: this.onWrapperKeyDown },
+          h("slot", null)))))));
   }
   static get is() { return "q2-carousel"; }
   static get originalStyleUrls() { return {
-    "$": ["styles.css"]
+    "$": ["styles.scss"]
   }; }
   static get styleUrls() { return {
     "$": ["styles.css"]
@@ -490,7 +415,8 @@ export class Q2Carousel {
         "text": ""
       },
       "attribute": "label",
-      "reflect": true
+      "reflect": true,
+      "defaultValue": "'tecton.element.carousel.ariaLabel'"
     },
     "index": {
       "type": "number",
@@ -516,10 +442,10 @@ export class Q2Carousel {
     "fullWidthDisplayOptions": {},
     "activePaneIndex": {},
     "applyFocus": {},
-    "compactMode": {},
+    "applyPaginationFocus": {},
     "autoPlayInProgress": {},
-    "carouselWrapperWidth": {},
-    "tabIndex": {}
+    "compactMode": {},
+    "carouselWrapperWidth": {}
   }; }
   static get events() { return [{
       "method": "change",
@@ -541,21 +467,21 @@ export class Q2Carousel {
   static get watchers() { return [{
       "propName": "ariaLabel",
       "methodName": "ariaLabelObserver"
-    }, {
-      "propName": "fullWidthPanes",
-      "methodName": "fullWidthPanesChanged"
-    }, {
-      "propName": "autoPlay",
-      "methodName": "autoPlayChanged"
     }, {
       "propName": "carouselWrapperWidth",
       "methodName": "carouselWrapperWidthChanged"
-    }, {
-      "propName": "compactMode",
-      "methodName": "compactModeChanged"
     }, {
       "propName": "index",
       "methodName": "indexChanged"
+    }, {
+      "propName": "fullWidthPanes",
+      "methodName": "revampCarousel"
+    }, {
+      "propName": "compactMode",
+      "methodName": "revampCarousel"
+    }, {
+      "propName": "autoPlay",
+      "methodName": "revampCarousel"
     }]; }
   static get listeners() { return [{
       "name": "change",
@@ -563,5 +489,17 @@ export class Q2Carousel {
       "target": undefined,
       "capture": false,
       "passive": false
+    }, {
+      "name": "clickCarouselPane",
+      "method": "carouselPaneClicked",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "focus",
+      "method": "delegateFocus",
+      "target": undefined,
+      "capture": false,
+      "passive": false
     }]; }
 }