q2-tecton-elements 1.70.2 → 1.71.0

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

@@ -4632,7 +4632,7 @@ function Autoplay({
   });
 }
 
-const q2CarouselCss = () => `*{box-sizing:border-box}*:active{outline:none}*:focus-visible{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{display:grid;grid-template-rows:repeat(2, auto);gap:var(--tct-carousel-gap, var(--app-scale-2x, 10px))}.swiper{--comp-container-padding:var(--app-scale-1x, 5px) 0 var(--app-scale-2x, 10px);display:block;width:100%;margin-left:auto;margin-right:auto;position:relative;overflow:hidden;padding:var(--tct-carousel-container-padding, var(--t-carousel-container-padding, var(--comp-container-padding, 5px 0 10px)))}.insufficient-pane-feedback{text-align:center;box-shadow:var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14));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, 1px)) 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))}.insufficient-pane-feedback.content-peek-display{max-width:395px;margin:0 auto}.insufficient-pane-feedback .insufficient-panes-header,.insufficient-pane-feedback .insufficient-panes-body{text-align:center}.insufficient-pane-feedback .insufficient-panes-header strong{font-weight:600}.insufficient-pane-feedback .insufficient-panes-body{margin:0 auto 2rem auto;max-width:75%}.insufficient-pane-feedback .insufficient-panes-icon-wrapper{display:flex;justify-content:center;margin:1rem 0 2rem 0}.insufficient-pane-feedback .insufficient-panes-icon-wrapper q2-icon{width:38px}.q2-carousel-pagination-navigation-wrapper{grid-row:2;display:flex;justify-content:center;align-items:center;min-height:44px}.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-carousel-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{overflow:visible}.q2-carousel-swiper-wrapper.compact q2-btn{margin-top:4px}.q2-carousel-pagination{height:var(--tct-carousel-pagination-height, 12px);display:flex;align-content:center;justify-content:center;gap:0.5rem;--comp-carousel-page-transition-duration:var(--tct-carousel-page-transition-duration, 0.3s)}.q2-carousel-pagination .q2-carousel-page-indicator{display:inline-block;height:var(--tct-carousel-indicator-size, 8px);width:var(--tct-carousel-indicator-size, 8px);border-radius:var(--tct-carousel-active-page-border-radius, 4px);background-color:var(--tct-carousel-page-indicator-inactive-color, var(--t-gray11, #cccccc));padding:0;border:0;transition:width 0.3s ease, background-color 0.3s ease 0.3s;transition-duration:var(--comp-carousel-page-transition-duration)}.q2-carousel-pagination .q2-carousel-page-indicator:hover{background-color:var(--tct-carousel-indicator-active, var(--t-primary, #6a4a9e));transition:background-color 0.3s ease;transition-duration:var(--comp-carousel-page-transition-duration)}.q2-carousel-pagination .q2-carousel-page-indicator.active-page{width:var(--tct-carousel-indicator-active-width, 24px);border-radius:var(--tct-carousel-active-page-border-radius, 4px);background-color:var(--tct-carousel-indicator-active, var(--t-primary, #6A4A9E))}.q2-carousel-pagination .q2-carousel-page-indicator.active-page:focus-visible{box-shadow:var(--tct-carousel-indicator-active-focus-visible-box-shadow, var(--const-double-focus-ring))}.q2-carousel-pagination.dynamic .q2-carousel-page-indicator{display:none}.q2-carousel-pagination.dynamic .q2-carousel-page-indicator.active-page,.q2-carousel-pagination.dynamic .q2-carousel-page-indicator.active-adjacent{display:inline-block;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:width 0.3s ease;transition-duration:var(--comp-carousel-page-transition-duration)}.q2-carousel-pagination.autoplay .q2-carousel-page-indicator.active-page{width:var(--tct-carousel-indicator-active-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-section-wrapper{position:relative;grid-row:1;overflow:hidden}.q2-carousel-edge-fade{position:absolute;top:0;bottom:0;width:var(--tct-carousel-edge-fade-width, 64px);z-index:10;pointer-events:none}.q2-carousel-edge-fade-left{left:0;background:linear-gradient(to right, var(--tct-carousel-edge-fade-color, #ffffff), transparent)}.q2-carousel-edge-fade-right{right:0;background:linear-gradient(to left, var(--tct-carousel-edge-fade-color, #ffffff), transparent)}.q2-carousel-swiper-container{}.q2-carousel-swiper-container .swiper-wrapper{position:relative;width:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.q2-carousel-swiper-container.content-peek-display .q2-carousel-pane:not(.swiper-slide-active){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))}.q2-carousel-swiper-container.full-width-display{--comp-container-padding:var(--app-scale-1x, 5px) var(--app-scale-2x, 10px) var(--app-scale-2x, 10px);padding:var(--tct-carousel-full-width-container-padding, var(--t-carousel-full-width-container-padding, var(--comp-container-padding, 5px 10px 10px)))}.q2-carousel-navigation-button{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-arrow-background, 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-arrow-hover-background, var(--t-primary-d1, #5f438e))}.q2-carousel-navigation-button:focus-visible{outline:none;box-shadow: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-arrow-font-color, var(--t-base, #ffffff));--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))}`;
+const q2CarouselCss = () => `*{box-sizing:border-box}*:active{outline:none}*:focus-visible{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}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}q2-carousel{display:grid;grid-template-rows:repeat(2, auto);gap:var(--tct-carousel-gap, var(--app-scale-2x, 10px))}.swiper{--comp-container-padding:var(--app-scale-1x, 5px) 0 var(--app-scale-2x, 10px);display:block;width:100%;margin-left:auto;margin-right:auto;position:relative;overflow:hidden;padding:var(--tct-carousel-container-padding, var(--t-carousel-container-padding, var(--comp-container-padding, 5px 0 10px)))}.insufficient-pane-feedback{text-align:center;box-shadow:var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14));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, 1px)) 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))}.insufficient-pane-feedback.content-peek-display{max-width:395px;margin:0 auto}.insufficient-pane-feedback .insufficient-panes-header,.insufficient-pane-feedback .insufficient-panes-body{text-align:center}.insufficient-pane-feedback .insufficient-panes-header strong{font-weight:600}.insufficient-pane-feedback .insufficient-panes-body{margin:0 auto 2rem auto;max-width:75%}.insufficient-pane-feedback .insufficient-panes-icon-wrapper{display:flex;justify-content:center;margin:1rem 0 2rem 0}.insufficient-pane-feedback .insufficient-panes-icon-wrapper q2-icon{width:38px}.q2-carousel-pagination-navigation-wrapper{grid-row:2;display:flex;justify-content:center;align-items:center;min-height:44px}.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-carousel-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{overflow:visible}.q2-carousel-swiper-wrapper.compact q2-btn{margin-top:4px}.q2-carousel-pagination{height:var(--tct-carousel-pagination-height, 12px);display:flex;align-content:center;justify-content:center;gap:0.5rem;--comp-carousel-page-transition-duration:var(--tct-carousel-page-transition-duration, 0.3s)}.q2-carousel-pagination .q2-carousel-page-indicator{display:inline-block;height:var(--tct-carousel-indicator-size, 8px);width:var(--tct-carousel-indicator-size, 8px);border-radius:var(--tct-carousel-active-page-border-radius, 4px);background-color:var(--tct-carousel-page-indicator-inactive-color, var(--t-gray11, #cccccc));padding:0;border:0;transition:width 0.3s ease, background-color 0.3s ease 0.3s;transition-duration:var(--comp-carousel-page-transition-duration)}.q2-carousel-pagination .q2-carousel-page-indicator:hover{background-color:var(--tct-carousel-indicator-active, var(--t-primary, #6a4a9e));transition:background-color 0.3s ease;transition-duration:var(--comp-carousel-page-transition-duration)}.q2-carousel-pagination .q2-carousel-page-indicator.active-page{width:var(--tct-carousel-indicator-active-width, 24px);border-radius:var(--tct-carousel-active-page-border-radius, 4px);background-color:var(--tct-carousel-indicator-active, var(--t-primary, #6A4A9E))}.q2-carousel-pagination .q2-carousel-page-indicator.active-page:focus-visible{box-shadow:var(--tct-carousel-indicator-active-focus-visible-box-shadow, var(--const-double-focus-ring))}.q2-carousel-pagination.dynamic .q2-carousel-page-indicator{display:none}.q2-carousel-pagination.dynamic .q2-carousel-page-indicator.active-page,.q2-carousel-pagination.dynamic .q2-carousel-page-indicator.active-adjacent{display:inline-block;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:width 0.3s ease;transition-duration:var(--comp-carousel-page-transition-duration)}.q2-carousel-pagination.autoplay .q2-carousel-page-indicator.active-page{width:var(--tct-carousel-indicator-active-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-section-wrapper{position:relative;grid-row:1;overflow:hidden}.q2-carousel-edge-fade{position:absolute;top:0;bottom:0;width:var(--tct-carousel-edge-fade-width, 64px);z-index:10;pointer-events:none}.q2-carousel-edge-fade-left{left:0;background:linear-gradient(to right, var(--tct-carousel-edge-fade-color, #ffffff), transparent)}.q2-carousel-edge-fade-right{right:0;background:linear-gradient(to left, var(--tct-carousel-edge-fade-color, #ffffff), transparent)}.q2-carousel-swiper-container{}.q2-carousel-swiper-container .swiper-wrapper{position:relative;width:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.q2-carousel-swiper-container.content-peek-display .q2-carousel-pane:not(.swiper-slide-active){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))}.q2-carousel-swiper-container.full-width-display{--comp-container-padding:var(--app-scale-1x, 5px) var(--app-scale-2x, 10px) var(--app-scale-2x, 10px);padding:var(--tct-carousel-full-width-container-padding, var(--t-carousel-full-width-container-padding, var(--comp-container-padding, 5px 10px 10px)))}.q2-carousel-navigation-button{--tct-btn-icon-width:32px;--tct-btn-icon-height:32px;--tct-btn-icon-border-radius:50%;--tct-btn-icon-padding:0;--tct-icon-size:16px;--tct-btn-primary-background:var(--tct-carousel-arrow-background, var(--tct-carousel-indicator-active, var(--t-primary, #6a4a9e)));--tct-btn-primary-hover-background:var(--tct-carousel-arrow-hover-background, var(--t-primary-d1, #5f438e));opacity:var(--tct-carousel-navigation-arrow-opacity, 1)}.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))}`;
 
 const carouselDesktopBreakpoint = 1024; /* viewport width where we show 3 full panes */
 const Q2Carousel = class {
@@ -4677,8 +4677,61 @@ const Q2Carousel = class {
         this.label = 'tecton.element.carousel.ariaLabel';
         /** Display navigation arrow buttons as another way to navigate the carousel. */
         this.showNavigationArrows = false;
+        /**
+         * Rebuilt whenever a prop that feeds Swiper's static config (e.g. `loop`) changes,
+         * since Swiper reads its options only at construction time.
+         */
+        this.buildCarouselOptions = () => {
+            this.universalCarouselOptions = {
+                centeredSlides: true,
+                loop: this.loop !== false,
+                focusableElements: 'q2-btn, q2-dropdown, q2-item, q2-list, a, input, select, textarea, button, video, label, option',
+                autoplay: this.autoPlay,
+                modules: [Autoplay],
+                on: {
+                    realIndexChange: swiper => {
+                        // When peek mode pads the DOM with duplicates (3- or 4-pane carousels),
+                        // `swiper.realIndex` can point at a duplicate; map it back to the 0..paneCount-1
+                        // range so `this.index`, pagination dots, and emitted events stay logical.
+                        const logicalIndex = this.paneCount > 0 ? swiper.realIndex % this.paneCount : swiper.realIndex;
+                        this.index = logicalIndex + 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);
+                        mirrorEmit(this, ['change', 'tctChange'], { index: logicalIndex + 1 });
+                        if (isPaginationFocused) {
+                            this.paginationBtns[logicalIndex].focus({ preventScroll: true });
+                        }
+                        else if (isCarouselFocused)
+                            swiper.slides[swiper.activeIndex].focus({
+                                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 = {
+                slidesPerView: 1,
+                spaceBetween: 100,
+                ...this.universalCarouselOptions,
+            };
+        };
         this.configureCarousel = (carouselWrapper, carouselOptions) => {
-            var _a, _b, _c, _d;
+            var _a, _b, _c;
             // 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) {
@@ -4693,11 +4746,11 @@ const Q2Carousel = class {
             // fires during construction and may overwrite this.index
             const targetIndex = this.realIndex;
             new Swiper(carouselWrapper, carouselOptions);
-            (_b = this.swiper) === null || _b === void 0 ? void 0 : _b.slideToLoop(targetIndex, 0);
+            this.slideToPane(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);
+            (_b = this.activePane) === null || _b === void 0 ? void 0 : _b.addEventListener('popoverStateChanged', this.handlePopovers);
             if (this.autoPlayInProgress)
-                (_d = this.swiper) === null || _d === void 0 ? void 0 : _d.autoplay.start();
+                (_c = this.swiper) === null || _c === void 0 ? void 0 : _c.autoplay.start();
             this.managePaneHeightObserver();
             // Re-observe after Swiper's DOM changes have settled
             requestAnimationFrame(() => {
@@ -4705,6 +4758,15 @@ const Q2Carousel = class {
                 (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.hostElement, { childList: true, subtree: true });
             });
         };
+        this.getPaginationLabel = (index) => {
+            const pane = this.paneArray.find(pane => pane.index === index);
+            const paneLabel = (pane === null || pane === void 0 ? void 0 : pane.label) || (pane === null || pane === void 0 ? void 0 : pane.getAttribute('label'));
+            const itemDescription = loc('tecton.element.carousel.itemDescription', [
+                (index + 1).toString(),
+                this.paneCount.toString(),
+            ]);
+            return paneLabel ? `${loc(paneLabel)}, ${itemDescription}` : itemDescription;
+        };
         this.handleAutoPlayPause = (action) => {
             var _a;
             if (!this.autoPlay)
@@ -4735,7 +4797,7 @@ const Q2Carousel = class {
             }
         };
         this.keydownHandler = (event) => {
-            var _a, _b, _c, _d;
+            var _a, _b;
             switch (event.key) {
                 case 'ArrowRight':
                     event.preventDefault();
@@ -4747,11 +4809,11 @@ const Q2Carousel = class {
                     break;
                 case 'Home':
                     event.preventDefault();
-                    (_c = this.swiper) === null || _c === void 0 ? void 0 : _c.slideToLoop(0);
+                    this.slideToPane(0);
                     break;
                 case 'End':
                     event.preventDefault();
-                    (_d = this.swiper) === null || _d === void 0 ? void 0 : _d.slideToLoop(this.paneCount - 1);
+                    this.slideToPane(this.paneCount - 1);
                     break;
             }
         };
@@ -4805,6 +4867,17 @@ const Q2Carousel = class {
                 return;
             this.carouselWrapperWidth = this.carouselWrapper.clientWidth;
         };
+        /**
+         * Swiper's `slideToLoop` snaps by real (logical) index but only exists when loop mode is on.
+         * For non-looped carousels, `slideTo` targets the same logical index directly since the DOM
+         * has no duplicates.
+         */
+        this.slideToPane = (index, speed) => {
+            if (!this.swiper)
+                return;
+            const fn = this.loop !== false ? this.swiper.slideToLoop : this.swiper.slideTo;
+            speed === undefined ? fn.call(this.swiper, index) : fn.call(this.swiper, index, speed);
+        };
         /**
          * Swiper's loop mode needs enough DOM slides on both sides of a centered active slide. For
          * two-pane full-width carousels and 3 to 5 pane peek carousels, we double the pane set in the
@@ -4813,11 +4886,15 @@ const Q2Carousel = class {
          * logical index changes are mapped back to the real-pane range via `modulo paneCount`.
          */
         this.syncPaneDuplicates = () => {
+            const existingDuplicates = Array.from(this.hostElement.querySelectorAll('q2-carousel-pane[data-q2-pane-duplicate]'));
+            existingDuplicates.forEach(node => node.remove());
+            // Duplicates only exist to satisfy Swiper's loop-mode minimum slide count.
+            // Non-looped carousels navigate their real panes directly.
+            if (this.loop === false)
+                return;
             const realPanes = this.paneArray;
             const realCount = realPanes.length;
             const needsDuplicates = realCount === 2 || (!this.useFullWidthPanes && realCount >= 3 && realCount <= 5);
-            const existingDuplicates = Array.from(this.hostElement.querySelectorAll('q2-carousel-pane[data-q2-pane-duplicate]'));
-            existingDuplicates.forEach(node => node.remove());
             if (!needsDuplicates || realCount === 0)
                 return;
             const parent = realPanes[0].parentElement;
@@ -4899,7 +4976,8 @@ const Q2Carousel = class {
             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 = () => {
-            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" }))));
+            const disabled = this.loop === false && this.realIndex >= this.paneCount - 1;
+            return (h("div", { class: "next-btn" }, h("q2-btn", { class: "q2-carousel-navigation-button q2-carousel-navigation-button-next", intent: "workflow-primary", label: loc('tecton.element.carousel.nextItemLabel'), hideLabel: true, disabled: disabled || undefined, onTctClick: () => { 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 } = this;
@@ -4918,14 +4996,12 @@ const Q2Carousel = class {
                 const isWithinTwoOfActive = Math.abs(index - realIndex) <= 2 && !isActive;
                 if (isWithinTwoOfActive)
                     btnClasses = [...btnClasses, 'active-adjacent'];
-                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(),
-                    ]) }));
+                return (h("button", { type: "button", role: "tab", tabIndex: isActive ? undefined : -1, "aria-selected": `${isActive}`, class: btnClasses.join(' '), onClick: () => this.slideToPane(index), onKeyDown: this.keydownHandler, "aria-label": this.getPaginationLabel(index) }));
             })));
         };
         this.renderPrevNavBtn = () => {
-            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" }))));
+            const disabled = this.loop === false && this.realIndex <= 0;
+            return (h("div", { class: "prev-btn" }, h("q2-btn", { class: "q2-carousel-navigation-button q2-carousel-navigation-button-prev", intent: "workflow-primary", label: loc('tecton.element.carousel.previousItemLabel'), hideLabel: true, disabled: disabled || undefined, onTctClick: () => { var _a; return (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.slidePrev(); } }, h("q2-icon", { type: "arrow-left" }))));
         };
     }
     // #endregion
@@ -4952,53 +5028,7 @@ const Q2Carousel = class {
         if (!hasValidChildren(this.hostElement, 'q2-carousel-pane')) {
             filterChildren(this.hostElement, 'q2-carousel-pane');
         }
-        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],
-            on: {
-                realIndexChange: swiper => {
-                    // When peek mode pads the DOM with duplicates (3- or 4-pane carousels),
-                    // `swiper.realIndex` can point at a duplicate; map it back to the 0..paneCount-1
-                    // range so `this.index`, pagination dots, and emitted events stay logical.
-                    const logicalIndex = this.paneCount > 0 ? swiper.realIndex % this.paneCount : swiper.realIndex;
-                    this.index = logicalIndex + 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);
-                    mirrorEmit(this, ['change', 'tctChange'], { index: logicalIndex + 1 });
-                    if (isPaginationFocused) {
-                        this.paginationBtns[logicalIndex].focus({ preventScroll: true });
-                    }
-                    else if (isCarouselFocused)
-                        swiper.slides[swiper.activeIndex].focus({
-                            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 = {
-            slidesPerView: 1,
-            spaceBetween: 100,
-            ...this.universalCarouselOptions,
-        };
+        this.buildCarouselOptions();
     }
     componentDidLoad() {
         this.setCarouselWrapperWidth();
@@ -5013,8 +5043,7 @@ const Q2Carousel = class {
     // #endregion
     // #region Listeners
     carouselPaneClicked(event) {
-        var _a;
-        (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.slideToLoop(event.detail.paneIndex);
+        this.slideToPane(event.detail.paneIndex);
     }
     delegateFocus(event) {
         var _a, _b;
@@ -5030,12 +5059,12 @@ const Q2Carousel = class {
      * @testOnly
      */
     async selectCarouselPane(index) {
-        var _a, _b, _c;
+        var _a, _b;
         if (index > this.paneCount)
             return;
         const actualIndex = index > 0 ? index - 1 : 0;
-        (_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];
+        this.slideToPane(actualIndex);
+        const activeSlide = (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.slides[(_b = this.swiper) === null || _b === void 0 ? void 0 : _b.activeIndex];
         activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.focus({ preventScroll: true });
     }
     /**
@@ -5069,6 +5098,8 @@ const Q2Carousel = class {
         this.revampCarousel();
     }
     revampCarousel() {
+        this.buildCarouselOptions();
+        this.syncPaneDuplicates();
         this.configureCarousel(this.carouselWrapper, this.activeCarouselOptions);
     }
     indexChanged(newIndex) {
@@ -5080,7 +5111,7 @@ const Q2Carousel = class {
         // to programmatically slide — otherwise the watcher fights our own realIndexChange mapping.
         const swiperLogicalIndex = this.paneCount > 0 ? this.swiper.realIndex % this.paneCount : this.swiper.realIndex;
         if (newIndex !== swiperLogicalIndex + 1) {
-            this.swiper.slideToLoop(this.realIndex);
+            this.slideToPane(this.realIndex);
         }
     }
     // #endregion
@@ -5158,7 +5189,7 @@ const Q2Carousel = class {
             paginationWrapperClasses.push('evenly-space');
         if (showNavigationArrows && arrowPosition === 'hug')
             paginationWrapperClasses.push('center-space');
-        return (h(Host, { key: 'e99de21a2de9706b1ff5fcd8dd2349c99920198b', id: `q2-carousel-${this.guid}`, class: "q2-carousel-instance" }, insufficientPanes ? (this.renderInsufficientPanesDisplay()) : (h(Fragment, null, paneCount > 1 && (h("div", { class: paginationWrapperClasses.join(' ') }, showNavigationArrows &&
+        return (h(Host, { key: '2c623516b2b0ce7800440110cde323bdf065abc1', 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) &&
@@ -5189,6 +5220,9 @@ const Q2Carousel = class {
         "autoPlay": [{
                 "revampCarousel": 0
             }],
+        "loop": [{
+                "revampCarousel": 0
+            }],
         "index": [{
                 "indexChanged": 0
             }]

package/dist/esm/q2-chart-area.entry.js

@@ -3982,7 +3982,7 @@ function installUniversalTransition(registers) {
   });
 }
 
-const q2ChartAreaCss = () => `*{box-sizing:border-box}*:active{outline:none}*:focus-visible{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}:host{width:var(--tct-area-chart-width, 100%);height:var(--tct-area-chart-height, 100%);display:block}.container{width:100%;height:100%}.chart-container{width:100%;height:100%}`;
+const q2ChartAreaCss = () => `*{box-sizing:border-box}*:active{outline:none}*:focus-visible{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}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host{width:var(--tct-area-chart-width, 100%);height:var(--tct-area-chart-height, 100%);display:block}.container{width:100%;height:100%}.chart-container{width:100%;height:100%}`;
 
 use([install$1, install, install$2, installUniversalTransition, install$3, install$4]);
 const Q2ChartArea = class {

package/dist/esm/q2-chart-bar.entry.js

@@ -1253,7 +1253,7 @@ function install(registers) {
   });
 }
 
-const q2ChartBarCss = () => `*{box-sizing:border-box}*:active{outline:none}*:focus-visible{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}:host{width:var(--tct-bar-chart-width, 100%);height:var(--tct-bar-chart-height, 100%);display:block}.container{width:100%;height:100%}.chart-container{width:100%;height:100%}`;
+const q2ChartBarCss = () => `*{box-sizing:border-box}*:active{outline:none}*:focus-visible{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}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host{width:var(--tct-bar-chart-width, 100%);height:var(--tct-bar-chart-height, 100%);display:block}.container{width:100%;height:100%}.chart-container{width:100%;height:100%}`;
 
 use([install$1, install, install$2, installLabelLayout, install$3, install$4]);
 const Q2ChartBar = class {

package/dist/esm/q2-chart-donut.entry.js

@@ -4035,7 +4035,7 @@ function install(registers) {
   registers.registerProcessor(negativeDataFilter('pie'));
 }
 
-const q2ChartDonutCss = () => `*{box-sizing:border-box}*:active{outline:none}*:focus-visible{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}:host{position:relative;width:100%;display:block}.container{aspect-ratio:1/1;width:100%;display:flex;justify-content:center;align-items:center;position:relative}.chart-container{width:100%;height:100%;--comp-color-1:var(--tct-chart-donut-color-1, var(--t-chart-donut-color-1, var(--t-accent-1, #e05252)));--comp-color-2:var(--tct-chart-donut-color-2, var(--t-chart-donut-color-2, var(--t-accent-2, #e09952)));--comp-color-3:var(--tct-chart-donut-color-3, var(--t-chart-donut-color-3, var(--t-accent-3, #e0e052)));--comp-color-4:var(--tct-chart-donut-color-4, var(--t-chart-donut-color-4, var(--t-accent-4, #99e052)));--comp-color-5:var(--tct-chart-donut-color-5, var(--t-chart-donut-color-5, var(--t-accent-5, #52e052)));--comp-color-6:var(--tct-chart-donut-color-6, var(--t-chart-donut-color-6, var(--t-accent-6, #52e099)));--comp-color-7:var(--tct-chart-donut-color-7, var(--t-chart-donut-color-7, var(--t-accent-7, #52e0e0)));--comp-color-8:var(--tct-chart-donut-color-8, var(--t-chart-donut-color-8, var(--t-accent-8, #5299e0)));--comp-color-9:var(--tct-chart-donut-color-9, var(--t-chart-donut-color-9, var(--t-accent-9, #5252e0)));--comp-color-10:var(--tct-chart-donut-color-10, var(--t-chart-donut-color-10, var(--t-accent-10, #9952e0)));--comp-color-11:var(--tct-chart-donut-color-11, var(--t-chart-donut-color-11, var(--t-accent-11, #e052e0)));--comp-color-12:var(--tct-chart-donut-color-12, var(--t-chart-donut-color-12, var(--t-accent-12, #e05299)))}.chart-container:focus-visible{box-shadow:var(--tct-chart-donut-focus-visible-box-shadow, var(--const-double-focus-ring))}button{--comp-button-padding:var(--tct-chart-donut-button-padding, var(--tct-chart-donut-button-vertical-padding, var(--t-chart-donut-button-vertical-padding, var(--app-scale-1x, 5px))) 0);transition:box-shadow var(--tct-chart-donut-button-tween, var(--t-chart-donut-button-tween, var(--app-tween-1, 0.2s ease)));padding:var(--comp-button-padding)}button:active{box-shadow:var(--const-double-focus-ring), var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}button:hover{box-shadow:var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}button:focus-visible{box-shadow:var(--const-double-focus-ring), var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}.center-card-container{position:absolute;top:50%;transform:translateY(-50%);padding:var(--tct-chart-donut-button-container-padding, var(--t-chart-donut-button-container-padding, var(--app-scale-1x, 5px)));border-radius:50%}.center-card{height:100%;width:100%;text-align:center;color:var(--tct-chart-donut-text-color, var(--t-chart-donut-text-color, inherit));margin-inline:auto;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:50%}.center-card:is(button){cursor:pointer;background:var(--tct-chart-donut-button-background, transparent);border:0}.center-card:is(button):hover{background:var(--tct-chart-donut-button-hover-background, transparent)}.center-card:is(button):active{background:var(--tct-chart-donut-button-active-background, transparent)}.center-card:is(button):focus-visible{background:var(--tct-chart-donut-button-focus-background, transparent)}q2-icon{--tct-icon-size:var(--tct-chart-donut-icon-size, var(--t-chart-donut-icon-size, 26px));--comp-icon-margin:var(--tct-chart-donut-icon-margin, 0 0 var(--tct-chart-donut-icon-margin-bottom, var(--t-chart-donut-icon-margin-bottom, var(--app-scale-1x, 5px))));margin:var(--comp-icon-margin)}.name{font-size:var(--tct-chart-donut-name-font-size, var(--t-chart-donut-name-font-size, 14px))}.value{font-size:var(--tct-chart-donut-value-font-size, var(--t-chart-donut-value-font-size, 21px))}figure{margin:0}.legend{margin-top:var(--tct-chart-donut-legend-margin-top, var(--app-scale-0x, 0))}`;
+const q2ChartDonutCss = () => `*{box-sizing:border-box}*:active{outline:none}*:focus-visible{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}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host{position:relative;width:100%;display:block}.container{aspect-ratio:1/1;width:100%;display:flex;justify-content:center;align-items:center;position:relative}.chart-container{width:100%;height:100%;--comp-color-1:var(--tct-chart-donut-color-1, var(--t-chart-donut-color-1, var(--t-accent-1, #e05252)));--comp-color-2:var(--tct-chart-donut-color-2, var(--t-chart-donut-color-2, var(--t-accent-2, #e09952)));--comp-color-3:var(--tct-chart-donut-color-3, var(--t-chart-donut-color-3, var(--t-accent-3, #e0e052)));--comp-color-4:var(--tct-chart-donut-color-4, var(--t-chart-donut-color-4, var(--t-accent-4, #99e052)));--comp-color-5:var(--tct-chart-donut-color-5, var(--t-chart-donut-color-5, var(--t-accent-5, #52e052)));--comp-color-6:var(--tct-chart-donut-color-6, var(--t-chart-donut-color-6, var(--t-accent-6, #52e099)));--comp-color-7:var(--tct-chart-donut-color-7, var(--t-chart-donut-color-7, var(--t-accent-7, #52e0e0)));--comp-color-8:var(--tct-chart-donut-color-8, var(--t-chart-donut-color-8, var(--t-accent-8, #5299e0)));--comp-color-9:var(--tct-chart-donut-color-9, var(--t-chart-donut-color-9, var(--t-accent-9, #5252e0)));--comp-color-10:var(--tct-chart-donut-color-10, var(--t-chart-donut-color-10, var(--t-accent-10, #9952e0)));--comp-color-11:var(--tct-chart-donut-color-11, var(--t-chart-donut-color-11, var(--t-accent-11, #e052e0)));--comp-color-12:var(--tct-chart-donut-color-12, var(--t-chart-donut-color-12, var(--t-accent-12, #e05299)))}.chart-container:focus-visible{box-shadow:var(--tct-chart-donut-focus-visible-box-shadow, var(--const-double-focus-ring))}button{--comp-button-padding:var(--tct-chart-donut-button-padding, var(--tct-chart-donut-button-vertical-padding, var(--t-chart-donut-button-vertical-padding, var(--app-scale-1x, 5px))) 0);transition:box-shadow var(--tct-chart-donut-button-tween, var(--t-chart-donut-button-tween, var(--app-tween-1, 0.2s ease)));padding:var(--comp-button-padding)}button:active{box-shadow:var(--const-double-focus-ring), var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}button:hover{box-shadow:var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}button:focus-visible{box-shadow:var(--const-double-focus-ring), var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}.center-card-container{position:absolute;top:50%;transform:translateY(-50%);padding:var(--tct-chart-donut-button-container-padding, var(--t-chart-donut-button-container-padding, var(--app-scale-1x, 5px)));border-radius:50%}.center-card{height:100%;width:100%;text-align:center;color:var(--tct-chart-donut-text-color, var(--t-chart-donut-text-color, inherit));margin-inline:auto;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:50%}.center-card:is(button){cursor:pointer;background:var(--tct-chart-donut-button-background, transparent);border:0}.center-card:is(button):hover{background:var(--tct-chart-donut-button-hover-background, transparent)}.center-card:is(button):active{background:var(--tct-chart-donut-button-active-background, transparent)}.center-card:is(button):focus-visible{background:var(--tct-chart-donut-button-focus-background, transparent)}q2-icon{--tct-icon-size:var(--tct-chart-donut-icon-size, var(--t-chart-donut-icon-size, 26px));--comp-icon-margin:var(--tct-chart-donut-icon-margin, 0 0 var(--tct-chart-donut-icon-margin-bottom, var(--t-chart-donut-icon-margin-bottom, var(--app-scale-1x, 5px))));margin:var(--comp-icon-margin)}.name{font-size:var(--tct-chart-donut-name-font-size, var(--t-chart-donut-name-font-size, var(--const-px-14, 14px)))}.value{font-size:var(--tct-chart-donut-value-font-size, var(--t-chart-donut-value-font-size, var(--const-px-21, 21px)))}figure{margin:0}.legend{margin-top:var(--tct-chart-donut-legend-margin-top, var(--app-scale-0x, 0))}`;
 
 use([install$4, install$1, install, install$6, install$7, installLabelLayout]);
 const Q2ChartDonut = class {

package/dist/esm/q2-checkbox-group.entry.js

@@ -3,7 +3,7 @@ import { c as createGuid, r as renderLabel } from './index-Cps4jSQM.js';
 import { m as mirrorEmit } from './mirror-emit-DUjY_ucm.js';
 import { h as hasValidChildren } from './component-DaQM9u3s.js';
 
-const q2CheckboxGroupCss = () => `*{box-sizing:border-box}*:active{outline:none}*:focus-visible{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}:host{--comp-default-checkbox-group-margin:var(--tct-checkbox-group-margin-top, var(--t-checkbox-group-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-checkbox-group-margin-bottom, var(--t-checkbox-group-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-checkbox-group-margin, var(--comp-default-checkbox-group-margin))}fieldset{padding:var(--tct-checkbox-group-fieldset-padding, 0);margin:0;border:0;position:relative}.label-row{display:grid;grid-template-columns:1fr 24px;grid-template-areas:"label icon";column-gap:var(--tct-checkbox-group-label-column-gap, var(--app-scale-2x, 10px));color:var(--tct-checkbox-group-label-font-color, inherit);font-size:var(--tct-checkbox-group-label-font-size, inherit);font-weight:var(--tct-checkbox-group-label-font-weight, 600);text-transform:var(--tct-checkbox-group-label-text-transform, none);letter-spacing:var(--tct-checkbox-group-label-letter-spacing, inherit)}.label-row q2-icon{grid-area:icon;margin-top:-2px;margin-bottom:-2px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.slot-container{--comp-default-container-margin:var(--app-scale-1x, 5px) 0;margin:var(--tct-checkbox-group-container-margin, var(--comp-default-container-margin));padding:var(--tct-checkbox-group-container-padding, var(--app-scale-1x, 5px));border-width:var(--tct-checkbox-group-border-width, 1px);border-color:transparent;border-style:solid;border-radius:var(--tct-checkbox-group-border-radius, var(--app-border-radius-1, 4px))}:host([has-error]) .slot-container{border-color:var(--tct-checkbox-group-error-border-color, var(--const-stoplight-alert, #d20a0a))}:host([has-error=false]) .slot-container{border-color:transparent}.optional-tag{margin-left:var(--tct-checkbox-group-label-optional-margin-left, var(--app-scale-1x, 5px));color:var(--tct-checkbox-group-label-optional-color, var(--t-checkbox-group-label-optional-color, var(--tct-a11y-color, var(--t-a11y-color, var(--tct-a11y-gray-color, var(--t-a11y-gray-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--t-gray-d1, var(--app-gray-d1, rgba(77, 77, 77, 0.77))))))))))));font-size:var(--tct-checkbox-group-label-optional-font-size, 12px);font-weight:var(--tct-checkbox-group-label-optional-font-weight, 400)}.flexed{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.flexed.left{justify-content:left}`;
+const q2CheckboxGroupCss = () => `*{box-sizing:border-box}*:active{outline:none}*:focus-visible{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}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host{--comp-default-checkbox-group-margin:var(--tct-checkbox-group-margin-top, var(--t-checkbox-group-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-checkbox-group-margin-bottom, var(--t-checkbox-group-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-checkbox-group-margin, var(--comp-default-checkbox-group-margin))}fieldset{padding:var(--tct-checkbox-group-fieldset-padding, 0);margin:0;border:0;position:relative}.label-row{display:grid;grid-template-columns:1fr 24px;grid-template-areas:"label icon";column-gap:var(--tct-checkbox-group-label-column-gap, var(--app-scale-2x, 10px));color:var(--tct-checkbox-group-label-font-color, inherit);font-size:var(--tct-checkbox-group-label-font-size, inherit);font-weight:var(--tct-checkbox-group-label-font-weight, 600);text-transform:var(--tct-checkbox-group-label-text-transform, none);letter-spacing:var(--tct-checkbox-group-label-letter-spacing, inherit)}.label-row q2-icon{grid-area:icon;margin-top:-2px;margin-bottom:-2px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.slot-container{--comp-default-container-margin:var(--app-scale-1x, 5px) 0;margin:var(--tct-checkbox-group-container-margin, var(--comp-default-container-margin));padding:var(--tct-checkbox-group-container-padding, var(--app-scale-1x, 5px));border-width:var(--tct-checkbox-group-border-width, 1px);border-color:transparent;border-style:solid;border-radius:var(--tct-checkbox-group-border-radius, var(--app-border-radius-1, 4px))}:host([has-error]) .slot-container{border-color:var(--tct-checkbox-group-error-border-color, var(--const-stoplight-alert, #d20a0a))}:host([has-error=false]) .slot-container{border-color:transparent}.optional-tag{margin-left:var(--tct-checkbox-group-label-optional-margin-left, var(--app-scale-1x, 5px));color:var(--tct-checkbox-group-label-optional-color, var(--t-checkbox-group-label-optional-color, var(--tct-a11y-color, var(--t-a11y-color, var(--tct-a11y-gray-color, var(--t-a11y-gray-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--t-gray-d1, var(--app-gray-d1, rgba(77, 77, 77, 0.77))))))))))));font-size:var(--tct-checkbox-group-label-optional-font-size, var(--const-px-12, 12px));font-weight:var(--tct-checkbox-group-label-optional-font-weight, 400)}.flexed{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.flexed.left{justify-content:left}`;
 
 const Q2CheckboxGroup = class {
     constructor(hostRef) {