q2-tecton-elements 1.66.2 → 1.67.0

package/dist/cjs/q2-card-image.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-BYXz4owL.js');
-var index$1 = require('./index-DyAq0y0v.js');
+var index$1 = require('./index-YvKoRT-t.js');
 
 const q2CardImageCss = "*{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{display:flex;flex-direction:column;max-width:100%;box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}:host{--tct-card-image-base-blur:0px;--tct-card-image-primary-color:var(--t-primary, #5446a4);--tct-card-image-secondary-color:var(--t-secondary, #2a7de1);--tct-card-image-tertiary-color:var(--t-tertiary, #6b7280);--tct-card-image-base-gradient-deg:110.95deg;--tct-card-image-base-gradient-left-color:var(--t-gray-2, #1a1a1a);--tct-card-image-base-gradient-left-stop:0.54%;--tct-card-image-base-gradient-middle-color:var(--t-gray-11, #cccccc);--tct-card-image-base-gradient-middle-stop:60.22%;--tct-card-image-base-gradient-right-color:var(--t-gray-2, #1a1a1a);--tct-card-image-base-gradient-right-stop:100%;--tct-card-image-overlay-opacity:1;--tct-card-image-overlay-mix-blend-mode:normal;--tct-card-image-dot-size:0.5px;--tct-card-image-dot-spacing:2px;--tct-card-image-dot-color:rgba(128, 128, 128, 0.5);--tct-card-image-font-color:var(--t-base, #fff);--tct-card-image-text-shadow:0px 0px 1px rgba(0, 0, 0, 0.85);--tct-card-image-status-box-shadow:var(\n      --app-shadow-3,\n      0px 0px 2px rgba(0, 0, 0, 0.12),\n      0px 8px 16px rgba(0, 0, 0, 0.14)\n  );--tct-card-image-status-background-digital:var(--tct-black, #000);--tct-card-image-status-color-digital:var(--tct-white, #fff);--tct-card-image-status-background-enabled:var(--tct-stoplight-info, #0079c1);--tct-card-image-status-color-enabled:var(--tct-white, #fff);--tct-card-image-status-background-disabled:var(--tct-stoplight-alert, #d20a0a);--tct-card-image-status-color-disabled:var(--tct-white, #fff);--tct-card-image-status-background-locked:var(--tct-stoplight-alert, #d20a0a);--tct-card-image-status-color-locked:var(--tct-white, #fff);--tct-card-image-status-background-damaged:var(--tct-stoplight-warning, #c35500);--tct-card-image-status-color-damaged:var(--tct-white, #fff);--tct-card-image-status-background-lost:var(--tct-stoplight-warning, #c35500);--tct-card-image-status-color-lost:var(--tct-white, #fff);--tct-card-image-status-background-stolen:var(--tct-stoplight-warning, #c35500);--tct-card-image-status-color-stolen:var(--tct-white, #fff);--tct-card-image-status-background-lost-or-stolen:var(--tct-stoplight-warning, #c35500);--tct-card-image-status-color-lost-or-stolen:var(--tct-white, #fff)}:host([inline]){display:inline-flex}:host(.horizontal){max-width:var(--tct-card-image-max-width, min(400px, 100%));min-width:var(--tct-card-image-min-width, 40px);width:var(--tct-card-image-width)}:host(.vertical){max-width:var(--tct-card-image-max-width, min(250px, 100%));min-width:var(--tct-card-image-min-width, 25px);width:var(--tct-card-image-width)}:host(.has-action){margin-top:22px;margin-right:22px}:host(.has-action.has-banner){margin-top:11px}:host(:hover) .card-image-container.clickable,:host(:focus-within) .card-image-container.clickable{transform:translateY(-8px) scale(1.03);box-shadow:var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14))}:host(:hover) .card-status-banner.clickable,:host(:focus-within) .card-status-banner.clickable{transform:translateY(-8px) scale(1.03)}:host([disabled]:not([disabled=false])) .card-image-container{opacity:var(--tct-card-image-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));cursor:not-allowed}:host([disabled]:not([disabled=false])) .card-status-banner{cursor:not-allowed}.card-wrapper>q2-btn{--const-double-focus-ring:none;width:100%;max-width:100%}.card-wrapper{position:relative;max-width:100%}.card-action{position:absolute;top:0;right:0;transform:translate(50%, -50%);z-index:5}.card-image-container{overflow:hidden;position:relative;border:1px solid transparent;background:linear-gradient(#fff, #fff) padding-box, linear-gradient(to right, rgb(200, 200, 200) 33%, rgb(150, 150, 150)) border-box;background-origin:border-box;background-clip:padding-box, border-box;box-shadow:var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14))}.card-image-container.inline{display:inline-block}.card-image-container.clickable{cursor:pointer;will-change:transform;transition:transform 0.3s ease, box-shadow 0.3s ease}.card-image-container.block{display:block}.card-image-container.horizontal{aspect-ratio:8/5;border-radius:3%/4.8%;width:var(--tct-card-image-width, 100%);max-width:var(--tct-card-image-max-width, 400px);min-width:var(--tct-card-image-min-width, 40px);flex-shrink:0}.card-image-container.vertical{aspect-ratio:5/8;border-radius:4.8%/3%;width:var(--tct-card-image-width, 100%);max-width:var(--tct-card-image-max-width, 250px);min-width:var(--tct-card-image-min-width, 25px);flex-shrink:0}.card-image,.card-image-overlay{position:absolute;inset:0;width:100%;height:100%}.card-image{z-index:1;filter:blur(var(--tct-card-image-base-blur))}.card-image-overlay{z-index:2;opacity:var(--tct-card-image-overlay-opacity)}.card-image.bg-primary{background-color:var(--tct-card-image-primary-color)}.card-image.bg-secondary{background-color:var(--tct-card-image-secondary-color)}.card-image.bg-tertiary{background-color:var(--tct-card-image-tertiary-color)}.card-image.bg-gradient{background:linear-gradient(var(--tct-card-image-base-gradient-deg), var(--tct-card-image-base-gradient-left-color) var(--tct-card-image-base-gradient-left-stop), var(--tct-card-image-base-gradient-middle-color) var(--tct-card-image-base-gradient-middle-stop), var(--tct-card-image-base-gradient-right-color) var(--tct-card-image-base-gradient-right-stop))}.card-image-overlay.bg-dot{background-image:radial-gradient(circle, var(--tct-card-image-dot-color) var(--tct-card-image-dot-size), transparent var(--tct-card-image-dot-size));background-size:var(--tct-card-image-dot-spacing) var(--tct-card-image-dot-spacing);mix-blend-mode:var(--tct-card-image-overlay-mix-blend-mode);opacity:var(--tct-card-image-overlay-opacity)}.card-image.bg-custom{background-image:var(--tct-card-image-base-url);background-size:cover;background-position:center}.card-image-overlay.bg-custom{background-image:var(--tct-card-image-overlay-url);background-size:cover;background-position:center}.card-status-banner{position:relative;z-index:4;width:fit-content;min-width:33.33%;max-width:72%;height:22px;margin:0 auto -11px;padding:0 12px;border:1px solid rgba(0, 0, 0, 0.2);border-radius:5px/5px;box-shadow:var(--tct-card-image-status-box-shadow);display:flex;align-items:center;justify-content:center}.card-status-banner.vertical{min-width:60%}.card-status-banner.clickable{cursor:pointer;transition:transform 0.3s ease}.card-status-text{font-size:14px;font-family:var(--uux-app-fontFamily, OpenSans, Helvetica Neue, Helvetica, Arial, sans-serif);text-transform:uppercase;white-space:nowrap}.card-status-banner.status-enabled{background-color:var(--tct-card-image-status-background-enabled);color:var(--tct-card-image-status-color-enabled)}.card-status-banner.status-disabled{background-color:var(--tct-card-image-status-background-disabled);color:var(--tct-card-image-status-color-disabled)}.card-status-banner.status-locked{background-color:var(--tct-card-image-status-background-locked);color:var(--tct-card-image-status-color-locked)}.card-status-banner.status-damaged{background-color:var(--tct-card-image-status-background-damaged);color:var(--tct-card-image-status-color-damaged)}.card-status-banner.status-lost{background-color:var(--tct-card-image-status-background-lost);color:var(--tct-card-image-status-color-lost)}.card-status-banner.status-stolen{background-color:var(--tct-card-image-status-background-stolen);color:var(--tct-card-image-status-color-stolen)}.card-status-banner.status-lost-or-stolen{background-color:var(--tct-card-image-status-background-lost-or-stolen);color:var(--tct-card-image-status-color-lost-or-stolen)}.card-status-banner.status-digital{background-color:var(--tct-card-image-status-background-digital);color:var(--tct-card-image-status-color-digital)}.card-details-wrapper{container-type:inline-size;position:relative;z-index:3;height:calc(100% + 2px);width:calc(100% + 2px);margin-left:-1px;margin-top:-1px}.card-text{color:var(--tct-card-image-font-color);font-family:\"Open Sans\", Arial, sans-serif;font-weight:600;line-height:1;letter-spacing:1.55px;text-shadow:var(--tct-card-image-text-shadow);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.card-details-horizontal{padding:2.5cqw;height:100%;width:100%;overflow:hidden}.horizontal-logo-wrapper{padding:0 1.25cqw;margin:1.25cqw 0 2.5cqw 0;width:70cqw;height:11.25cqw}.horizontal-logo{background-image:var(--tct-card-image-fi-logo, var(--uux-logoImageHighContrast, var(--uux-logoImage)));background-size:contain;background-repeat:no-repeat;background-position:left center;background-origin:content-box;padding:var(--tct-card-image-logo-padding, 2.5cqw 0);width:100%;height:100%}.horizontal-chip{width:15cqw;height:10cqw;margin-left:8.75cqw}.horizontal-chip img{display:block;width:100%;height:100%;object-fit:contain}.horizontal-card-number{padding-top:2.5cqw;text-align:left;font-size:5cqw;height:7.5cqw;width:85cqw;margin-left:5cqw}.horizontal-exp-date-card-type-row{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:flex-end;width:100%;height:10cqw;margin:1.25cqw 0}.horizontal-exp-date-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;width:25cqw;height:100%;margin-left:1.25cqw}.horizontal-exp-date-label{font-size:2.5cqw;margin-bottom:1cqw}.horizontal-exp-date-value{font-size:3.5cqw}.horizontal-card-type{font-size:var(--tct-card-image-type-font-size, 4cqw);color:var(--tct-card-image-type-color, var(--tct-card-image-font-color));margin-right:var(--tct-card-image-type-margin-right, 4.15cqw);margin-bottom:var(--tct-card-image-type-margin-bottom, -10.1cqw)}.horizontal-card-type.vendor-mastercard{font-size:var(--tct-card-image-type-font-size, 3cqw);margin-right:var(--tct-card-image-type-margin-right, 1.25cqw);margin-bottom:var(--tct-card-image-type-margin-bottom, 0cqw)}.horizontal-card-type.vendor-visa{font-size:var(--tct-card-image-type-font-size, 3cqw);margin-right:var(--tct-card-image-type-margin-right, 0.09cqw);margin-bottom:var(--tct-card-image-type-margin-bottom, -6.25cqw)}.horizontal-card-holder-vendor-row{display:flex;flex-direction:row;flex-wrap:nowrap;width:100%}.horizontal-card-holder-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;width:73.75cqw;height:10cqw;padding:0 1.25cqw;margin-right:1.25cqw;min-width:0}.horizontal-card-holder-label{font-size:2.5cqw;margin-bottom:1cqw}.horizontal-card-holder-value{font-size:4.5cqw}.horizontal-vendor{width:20cqw;height:12.5cqw;flex-shrink:0}.horizontal-vendor img{display:block;width:100%;height:100%;object-fit:contain}.card-details-vertical{position:relative;z-index:3;padding:4cqw;height:100%;width:100%;overflow:hidden}.vertical-chip{width:16cqw;height:24cqw;margin:12cqw 0 30cqw 46cqw}.vertical-chip img{display:block;width:100%;height:100%;object-fit:contain}.vertical-logo-wrapper{padding:0 2cqw;margin-bottom:4cqw;width:100%;height:18cqw}.vertical-logo{background-image:var(--tct-card-image-fi-logo, var(--uux-logoImageHighContrast, var(--uux-logoImage)));background-size:contain;background-repeat:no-repeat;background-position:center center;background-origin:content-box;padding:var(--tct-card-image-logo-padding, 4cqw 0);width:100%;height:100%}.vertical-card-number{text-align:left;font-size:8cqw;height:12cqw;width:100%;padding:0 2cqw}.vertical-card-holder-wrapper{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;width:100%;height:16cqw;padding:0 2cqw;min-width:0}.vertical-card-holder-label{font-size:4cqw;margin-bottom:1.6cqw}.vertical-card-holder-value{font-size:7.2cqw}.vertical-exp-date-card-type-row{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:flex-end;width:100%;height:16cqw}.vertical-exp-date-wrapper{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;width:40cqw;height:100%;margin-left:2cqw;padding-bottom:2cqw}.vertical-exp-date-label{font-size:4cqw;margin-bottom:1.6cqw}.vertical-exp-date-value{font-size:5.6cqw}.vertical-card-type{font-size:var(--tct-card-image-type-font-size, 6.4cqw);padding-bottom:2cqw;color:var(--tct-card-image-type-color, var(--tct-card-image-font-color));margin-right:var(--tct-card-image-type-margin-right, 3cqw);margin-bottom:var(--tct-card-image-type-margin-bottom, -19cqw)}.vertical-card-type.vendor-mastercard{font-size:var(--tct-card-image-type-font-size, 4.8cqw);margin-right:var(--tct-card-image-type-margin-right, 2cqw);margin-bottom:var(--tct-card-image-type-margin-bottom, 0cqw)}.vertical-card-type.vendor-visa{font-size:var(--tct-card-image-type-font-size, 4.8cqw);margin-right:var(--tct-card-image-type-margin-right, 0.05625cqw);margin-bottom:var(--tct-card-image-type-margin-bottom, -10cqw)}.vertical-vendor-row{display:flex;justify-content:end}.vertical-vendor{width:32cqw;height:20cqw;flex-shrink:0}.vertical-vendor img{display:block;width:100%;height:100%;object-fit:contain}";
 
@@ -363,11 +363,11 @@ const Q2CardImage = class {
     render() {
         const cardContent = this.clickable ? (index.h("q2-btn", { disabled: this.disabled, label: this.accessibilityLabel, hideLabel: true, onClick: this.handleCardClick }, this.renderCardContent())) : (this.renderCardContent());
         const showBanner = !!this.cardStatus && this.size === 'large';
-        return (index.h(index.Host, { key: '19424c69e664876eec4045ca5c798f5372800d26', class: {
+        return (index.h(index.Host, { key: 'd1592e6d7239707ec8608f9458bc0066bca5d407', class: {
                 [`${this.orientation}`]: true,
                 'has-action': this.hasActionSlotContent,
                 'has-banner': showBanner,
-            } }, this.renderStatusBanner(), index.h("div", { key: 'e59ce44f131c51a8ea0f824b89fc5ae51e2ba200', class: "card-wrapper" }, cardContent, this.renderAction())));
+            } }, this.renderStatusBanner(), index.h("div", { key: 'e45f8f705256b70e527d5e95d3a13b7c9e1938e2', class: "card-wrapper" }, cardContent, this.renderAction())));
     }
     static get assetsDirs() { return ["assets"]; }
     get hostElement() { return index.getElement(this); }

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-BYXz4owL.js');
-var index$1 = require('./index-DyAq0y0v.js');
+var index$1 = require('./index-YvKoRT-t.js');
 var mirrorEmit = require('./mirror-emit-kjeNv83f.js');
 
 const q2CardCss = "*{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{display:block}.container{--comp-avatar-size:var(--tct-card-avatar-size, var(--t-card-avatar-size, 44px));--comp-bar-width:var(--tct-card-bar-width, var(--t-card-bar-width, var(--app-scale-2x, 10px)));--comp-card-padding:var(--tct-card-padding, var(--t-card-padding, var(--app-scale-4x, 20px)));position:relative;width:100%;text-align:start;height:var(--tct-card-height, 100%);min-height:var(--tct-card-min-height, auto);display:grid;gap:var(--tct-card-gap, var(--t-card-gap, var(--app-scale-3x, 15px)));margin:0;color:var(--tct-card-font-color, var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d))));backdrop-filter:var(--tct-card-backdrop-filter);background:var(--tct-card-background, var(--t-card-background, var(--t-base, #ffffff)));border-width:var(--tct-card-border-width, var(--t-card-border-width, 0px));border-color:var(--tct-card-border-color, var(--t-card-border-color, transparent));border-style:var(--tct-card-border-style, solid);border-radius:var(--tct-card-border-radius, var(--t-card-border-radius, var(--app-border-radius-1, 4px)));backdrop-filter:var(--tct-card-backdrop-filter, none);padding:var(--comp-card-padding);text-decoration:none;transition:box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));overflow:var(--tct-card-overflow, auto);max-height:var(--tct-card-max-height, none);box-shadow:var(--comp-card-shadow), 0 0 0 rgba(0, 0, 0, 0)}.container.is-small{--comp-avatar-size:var(--tct-card-avatar-size, var(--t-card-avatar-size, 26px))}.container.has-avatar{grid-template-columns:var(--comp-avatar-size) 1fr;--tct-avatar-width:var(--comp-avatar-size);--tct-avatar-height:var(--comp-avatar-size);--tct-icon-size:var(--comp-avatar-size)}.container.elevation-1{--comp-card-shadow:var(--tct-card-elevation-1-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)))}.container.elevation-2{--comp-card-shadow:var(--tct-card-elevation-2-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)))}.container.elevation-3{--comp-card-shadow:var(--tct-card-elevation-3-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)))}.container.elevation-4{--comp-card-shadow:var(--tct-card-elevation-4-box-shadow, var(--app-shadow-4, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)))}.container.elevation-5{--comp-card-shadow:var(--tct-card-elevation-5-box-shadow, var(--app-shadow-5, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)))}.container.clickable{cursor:pointer}.container.clickable:hover.elevation-1{--comp-card-shadow:var(--tct-card-elevation-1-hover-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)))}.container.clickable:hover.elevation-2{--comp-card-shadow:var(--tct-card-elevation-2-hover-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)))}.container.clickable:hover.elevation-3{--comp-card-shadow:var(--tct-card-elevation-3-hover-box-shadow, var(--app-shadow-4, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)))}.container.clickable:hover.elevation-4{--comp-card-shadow:var(--tct-card-elevation-4-hover-box-shadow, var(--app-shadow-5, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)))}.container.clickable:hover.elevation-5{--comp-card-shadow:var(--tct-card-elevation-5-hover-box-shadow, var(--app-shadow-5, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)))}.container.clickable:active.elevation-1{--comp-card-shadow:var(--tct-card-elevation-1-active-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)))}.container.clickable:active.elevation-2{--comp-card-shadow:var(--tct-card-elevation-2-active-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)))}.container.clickable:active.elevation-3{--comp-card-shadow:var(--tct-card-elevation-3-active-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)))}.container.clickable:active.elevation-4{--comp-card-shadow:var(--tct-card-elevation-4-active-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)))}.container.clickable:active.elevation-5{--comp-card-shadow:var(--tct-card-elevation-5-active-box-shadow, var(--app-shadow-4, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)))}.container.clickable:focus-visible{--comp-focus-visible-shadow:var(--comp-card-shadow), var(--const-double-focus-ring);box-shadow:var(--tct-card-focus-visible-box-shadow, var(--comp-focus-visible-shadow))}.container.is-static{cursor:auto;background:var(--tct-card-static-background, var(--tct-card-background, none));color:var(--tct-card-static-font-color, var(--tct-card-color, var(--t-text, #4d4d4d)));backdrop-filter:none;border-radius:0;border:0;text-decoration:initial;padding:0}:host([bar]) .container.is-static{padding-left:var(--comp-card-padding)}.container.is-static,.container.is-static:hover,.container.is-static:active{box-shadow:none}.content{overflow:hidden;display:grid;gap:var(--tct-card-content-gap, var(--t-card-content-gap, var(--app-scale-1x, 5px)));align-content:start}h3,p{margin:0;padding:0;line-height:var(--tct-card-font-height, var(--t-card-font-height, 20px))}h3{font-weight:var(--tct-card-font-weight, var(--t-card-font-weight, 600));font-size:var(--tct-card-font-size, var(--t-card-font-size, 17px));text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-card-title-line-count, 1);-webkit-box-orient:vertical}p{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-card-description-line-count, 2);-webkit-box-orient:vertical;font-size:var(--tct-card-description-font-size, inherit)}.bar{position:absolute;inset:0 auto auto 0;width:var(--comp-bar-width);background:var(--comp-bar-color);height:100%}.bar.color-primary{--comp-bar-color:var(--tct-card-bar-color-primary, var(--t-primary, #5446a4))}.bar.color-secondary{--comp-bar-color:var(--tct-card-bar-color-secondary, var(--t-secondary, #b6b3cc))}.bar.color-tertiary{--comp-bar-color:var(--tct-card-bar-color-tertiary, var(--t-tertiary, #ebe8fc))}.bar.color-info{--comp-bar-color:var(--tct-card-bar-color-info, var(--const-stoplight-info, #0079c1))}.bar.color-success{--comp-bar-color:var(--tct-card-bar-color-success, var(--const-stoplight-success, #0e8a00))}.bar.color-warning{--comp-bar-color:var(--tct-card-bar-color-warning, var(--const-stoplight-warning, #c35500))}.bar.color-alert{--comp-bar-color:var(--tct-card-bar-color-alert, var(--const-stoplight-alert, #c35500))}.bar.color-accent-1{--comp-bar-color:var(--tct-card-bar-color-accent-1, var(--t-accent-1, #e05252))}.bar.color-accent-2{--comp-bar-color:var(--tct-card-bar-color-accent-2, var(--t-accent-2, #e09952))}.bar.color-accent-3{--comp-bar-color:var(--tct-card-bar-color-accent-3, var(--t-accent-3, #e0e052))}.bar.color-accent-4{--comp-bar-color:var(--tct-card-bar-color-accent-4, var(--t-accent-4, #99e052))}.bar.color-accent-5{--comp-bar-color:var(--tct-card-bar-color-accent-5, var(--t-accent-5, #52e052))}.bar.color-accent-6{--comp-bar-color:var(--tct-card-bar-color-accent-6, var(--t-accent-6, #52e099))}.bar.color-accent-7{--comp-bar-color:var(--tct-card-bar-color-accent-7, var(--t-accent-7, #52e0e0))}.bar.color-accent-8{--comp-bar-color:var(--tct-card-bar-color-accent-8, var(--t-accent-8, #5299e0))}.bar.color-accent-9{--comp-bar-color:var(--tct-card-bar-color-accent-9, var(--t-accent-9, #5252e0))}.bar.color-accent-10{--comp-bar-color:var(--tct-card-bar-color-accent-10, var(--t-accent-10, #9952e0))}.bar.color-accent-11{--comp-bar-color:var(--tct-card-bar-color-accent-11, var(--t-accent-11, #e052e0))}.bar.color-accent-12{--comp-bar-color:var(--tct-card-bar-color-accent-12, var(--t-accent-12, #e05299))}";

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

@@ -2,10 +2,10 @@
 
 var index = require('./index-BYXz4owL.js');
 var component = require('./component-DRAntnCA.js');
-var index$1 = require('./index-DyAq0y0v.js');
+var index$1 = require('./index-YvKoRT-t.js');
 var mirrorEmit = require('./mirror-emit-kjeNv83f.js');
 
-const q2CarouselPaneCss = "*{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 .swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;transition:all 0.2s}q2-carousel .q2-carousel-swiper-container.full-width-display q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) .q2-carousel-pane-main-content,q2-carousel .q2-carousel-swiper-container.frameless-display q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) .q2-carousel-pane-main-content{background:var(--tct-carousel-background, var(--app-base, #ffffff))}q2-carousel .q2-carousel-swiper-container.full-width-display q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) .q2-carousel-pane-main-content{box-shadow:var(--tct-carousel-pane-box-shadow, var(--comp-carousel-shadow))}q2-carousel-pane.q2-carousel-pane{--comp-carousel-pane-tween:var(--tct-tween-1, var(--app-tween-1, 0.2s ease));--comp-carousel-shadow:var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14));cursor:grab}q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) *{cursor:pointer}q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) .q2-carousel-pane-main-content{background:var(--tct-carousel-pane-inactive-background, var(--tct-carousel-background, var(--app-base, #ffffff)));box-shadow:var(--tct-carousel-pane-inactive-box-shadow, var(--tct-carousel-pane-box-shadow, var(--comp-carousel-shadow)))}q2-carousel-pane.q2-carousel-pane:focus-visible{box-shadow:none}q2-carousel-pane.q2-carousel-pane:focus-visible .q2-carousel-pane-main-content{outline:none;box-shadow:var(--const-double-focus-ring)}q2-carousel-pane.q2-carousel-pane button{border:0;background:transparent;transition:all 0.2s;opacity:0.3;cursor:pointer}q2-carousel-pane.q2-carousel-pane button:hover{opacity:0.7}q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content{box-shadow:var(--tct-carousel-pane-box-shadow, --comp-carousel-shadow);transition:var(--comp-carousel-pane-tween);background:var(--tct-carousel-background, var(--tct-carousel-background-color, var(--t-carousel-background-color, var(--tct-white, var(--app-white, #ffffff)))));border:var(--tct-carousel-pane-border-width, var(--t-carousel-pane-border-width, 0px)) solid var(--tct-carousel-pane-border-color, var(--t-carousel-pane-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));border-radius:var(--tct-carousel-pane-border-radius, var(--t-carousel-pane-border-radius, 8px));padding:var(--tct-carousel-pane-padding, var(--t-carousel-pane-padding, 7px));height:var(--tct-carousel-pane-height, var(--t-carousel-pane-height, 10em))}q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content:hover{box-shadow:var(--const-double-focus-ring), var(--comp-carousel-shadow)}q2-carousel-pane.q2-carousel-pane[slot-frameless]:not([slot-frameless=false]) .q2-carousel-pane-main-content{box-shadow:none;border:0;border-radius:0;padding:0}";
+const q2CarouselPaneCss = "*{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 .swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;transition:all 0.2s}q2-carousel .q2-carousel-swiper-container.full-width-display q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) .q2-carousel-pane-main-content,q2-carousel .q2-carousel-swiper-container.frameless-display q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) .q2-carousel-pane-main-content{background:var(--tct-carousel-background, var(--app-base, #ffffff))}q2-carousel .q2-carousel-swiper-container.full-width-display q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) .q2-carousel-pane-main-content{box-shadow:var(--tct-carousel-pane-box-shadow, var(--comp-carousel-shadow))}q2-carousel-pane.q2-carousel-pane{--comp-carousel-pane-tween:var(--tct-tween-1, var(--app-tween-1, 0.2s ease));--comp-carousel-shadow:var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14));cursor:grab}q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) .q2-carousel-pane-main-content{background:var(--tct-carousel-pane-inactive-background, var(--tct-carousel-background, var(--app-base, #ffffff)));box-shadow:var(--tct-carousel-pane-inactive-box-shadow, var(--tct-carousel-pane-box-shadow, var(--comp-carousel-shadow)))}q2-carousel-pane.q2-carousel-pane:focus-visible .q2-carousel-pane-main-content{outline:none;box-shadow:var(--tct-carousel-pane-focus-visible-box-shadow, --const-double-focus-ring)}q2-carousel-pane.q2-carousel-pane button{border:0;background:transparent;transition:all 0.2s;opacity:0.3;cursor:pointer}q2-carousel-pane.q2-carousel-pane button:hover{opacity:0.7}q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content{box-shadow:var(--tct-carousel-pane-box-shadow, var(--comp-carousel-shadow));transition:var(--comp-carousel-pane-tween);background:var(--tct-carousel-background, var(--tct-carousel-background-color, var(--t-carousel-background-color, var(--tct-white, var(--app-white, #ffffff)))));border:var(--tct-carousel-pane-border-width, var(--t-carousel-pane-border-width, 0px)) solid var(--tct-carousel-pane-border-color, var(--t-carousel-pane-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));border-radius:var(--tct-carousel-pane-border-radius, var(--t-carousel-pane-border-radius, 8px));padding:var(--tct-carousel-pane-padding, var(--t-carousel-pane-padding, 7px));height:var(--tct-carousel-pane-height, var(--t-carousel-pane-height, 10em))}q2-carousel-pane.q2-carousel-pane[slot-frameless]:not([slot-frameless=false]) .q2-carousel-pane-main-content{box-shadow:none;border:0;border-radius:0;padding:0}";
 
 const Q2CarouselPane = class {
     constructor(hostRef) {
@@ -100,12 +100,12 @@ const Q2CarouselPane = class {
     // #region Render Methods
     render() {
         const { label } = this;
-        return (index.h(index.Host, { key: 'c321264b11e25ec101280695fd2f869b92a18e26', class: this.generatePaneClass(this.currentPaneIndex), tabIndex: this.isActivePane ? 0 : -1, role: "group", "aria-roledescription": "slide", "aria-hidden": this.isActivePane ? undefined : 'true', "aria-label": label
+        return (index.h(index.Host, { key: '156420cbdaf48d8d1e6e14c05e745ff0df308a2a', class: this.generatePaneClass(this.currentPaneIndex), tabIndex: this.isActivePane ? 0 : -1, role: "group", "aria-roledescription": "slide", "aria-hidden": this.isActivePane ? undefined : 'true', "aria-label": label
                 ? index$1.loc(label)
                 : index$1.loc('tecton.element.carousel.itemDescription', [
                     (this.currentPaneIndex + 1).toString(),
                     (this.siblingCount || 0).toString(),
-                ]), onClick: this.paneClicked }, index.h("article", { key: 'c506d1bdbbd434483a9447cce1a898b540cac6f2', class: "q2-carousel-pane-main-content" }, index.h("slot", { key: '406d356278c375ff44431c9df2cad1acac933be2' }))));
+                ]), onClick: this.paneClicked }, index.h("article", { key: '2f61bdfa9d9e4413941d0ca2f1edc9fc2cd48e8e', class: "q2-carousel-pane-main-content" }, index.h("slot", { key: 'd498b8a73ba1a668bb768891d37b2303db976012' }))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

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

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

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

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

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-BYXz4owL.js');
-var index$1 = require('./index-DyAq0y0v.js');
+var index$1 = require('./index-YvKoRT-t.js');
 var mirrorEmit = require('./mirror-emit-kjeNv83f.js');
 var component = require('./component-DRAntnCA.js');
 
@@ -4634,7 +4634,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-control-center-tray{display:flex;align-items:center}.q2-carousel-swiper-wrapper.compact{overflow:visible}.q2-carousel-swiper-wrapper.compact q2-btn{margin-top:4px}.q2-carousel-pagination{height:12px;display:flex;align-content:center;justify-content:center;gap:0.5rem}.q2-carousel-pagination .q2-carousel-page-indicator{display:inline-block;height:12px;width:12px;border-radius:50%;background-color:var(--tct-carousel-pagination-inactive-color, var(--t-carousel-pagination-inactive-color, var(--t-a11y--gray-color-AA, #949494)));padding:0;border:0;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{display:inline-block;background-color:var(--tct-carousel-pagination-active-color, var(--t-carousel-pagination-active-color, var(--tct-primary, var(--t-primary, #006eb2))))}.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:10px;width:10px}.q2-carousel-pagination.dynamic .q2-carousel-page-indicator.active-adjacent-adjacent{display:inline-block;height:8px;width:8px}.q2-carousel-swiper-container{grid-row:1;}.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(0.9)}.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-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));--tct-icon-stroke-secondary:var(--tct-carousel-btn-icon-stroke-secondary, var(--app-gray, #747474))}";
+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-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{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}.q2-carousel-pagination .q2-carousel-page-indicator{display:inline-block;height:var(--tct-carousel-page-indicator-size, 8px);width:var(--tct-carousel-page-indicator-size, 8px);border-radius:50%;background-color:var(--tct-carousel-page-indicator-inactive-color, var(--t-gray11, #CCCCCC));padding:0;border:0;transition:var(--tct-carouse-pagination-transition, all 0.5s)}.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-indicator-active, var(--t-primary, #6A4A9E))}.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:10px;width:10px}.q2-carousel-pagination.dynamic .q2-carousel-page-indicator.active-adjacent-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: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;}.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-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))}";
 
 const carouselBreakpoint = 500; /* width in px of this host element where the layout starts to get unruly */
 const carouselDesktopBreakpoint = 1024; /* viewport width where we show 3 full panes */
@@ -4675,15 +4675,27 @@ const Q2Carousel = class {
         /** 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;
@@ -4727,17 +4739,19 @@ const Q2Carousel = class {
                     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)
@@ -4750,7 +4764,9 @@ const Q2Carousel = class {
         };
         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;
@@ -4762,9 +4778,9 @@ const Q2Carousel = class {
         // #region Render Methods
         this.renderAutoPlayBtn = () => {
             const { autoPlayInProgress } = this;
-            return (index.h("q2-btn", { type: "button", "hide-label": true, label: index$1.loc(autoPlayInProgress
+            return (index.h("button", { type: "button", class: "q2-carousel-autoplay-control", "aria-label": index$1.loc(autoPlayInProgress
                     ? 'tecton.element.carousel.pausePlayLabel'
-                    : 'tecton.element.carousel.resumePlayLabel'), class: "q2-carousel-autoplay-control", onClick: () => this.handleAutoPlayPause(autoPlayInProgress ? 'pause' : 'play') }, index.h("q2-icon", { type: autoPlayInProgress ? 'pause' : 'play' })));
+                    : 'tecton.element.carousel.resumePlayLabel'), onClick: () => this.handleAutoPlayPause(autoPlayInProgress ? 'pause' : 'play') }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", class: "autoplay-icon", "aria-hidden": "true" }, autoPlayInProgress ? (index.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" })) : (index.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 = [
@@ -4776,35 +4792,36 @@ const Q2Carousel = class {
             return (index.h("div", { class: insufficientPanesContainerClasses.join(' ') }, index.h("div", { class: "insufficient-panes-icon-wrapper" }, index.h("q2-icon", { type: "warning" })), index.h("p", { class: "insufficient-panes-header" }, index.h("strong", null, index$1.loc('tecton.element.carousel.insufficientPanesMessageHeader'))), index.h("p", { class: "insufficient-panes-body" }, index$1.loc('tecton.element.carousel.insufficientPanesMessageBody'))));
         };
         this.renderNextNavBtn = () => {
-            const nextPaneAvailable = this.realIndex < this.paneCount - 1;
-            return (index.h("div", null, index.h("q2-btn", { type: "button", disabled: nextPaneAvailable ? undefined : true, class: "q2-carousel-navigation-button q2-carousel-navigation-button-next", "hide-label": true, label: index$1.loc('tecton.element.carousel.nextItemLabel'), onClick: () => { var _a; return (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.slideNext(); } }, index.h("q2-icon", { type: "chevron-right" }))));
+            return (index.h("div", { class: "next-btn" }, index.h("button", { type: "button", class: "q2-carousel-navigation-button q2-carousel-navigation-button-next", "aria-label": index$1.loc('tecton.element.carousel.nextItemLabel'), onClick: () => { var _a; return (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.slideNext(); } }, index.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 (index.h("div", { class: paginationContainerClasses.join(' '), role: "tablist", "aria-label": index$1.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 (index.h("div", { class: paginationContainerClasses.join(' '), role: "tablist", "aria-label": index$1.loc('tecton.element.carousel.tabWrapperLabel') }, Array.from({ length: paneCount }, (_, i) => i).map(index$2 => {
+                const isActive = index$2 === realIndex;
+                let btnClasses = ['q2-carousel-page-indicator', `q2-carousel-page-indicator-${index$2}`];
+                if (isActive)
                     btnClasses = [...btnClasses, 'active-page'];
                 if (useDynamicPaginationDots)
                     btnClasses = [...btnClasses, 'dynamic'];
-                const withinOneOfActive = pane.index === realIndex + 1 || pane.index === realIndex - 1;
+                const withinOneOfActive = index$2 === realIndex + 1 || index$2 === realIndex - 1;
                 if (withinOneOfActive)
                     btnClasses = [...btnClasses, 'active-adjacent'];
-                const withinTwoOfActive = pane.index === realIndex + 2 || pane.index === realIndex - 2;
+                const withinTwoOfActive = index$2 === realIndex + 2 || index$2 === realIndex - 2;
                 if (withinTwoOfActive)
                     btnClasses = [...btnClasses, 'active-adjacent-adjacent'];
-                return (index.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": index$1.loc('tecton.element.carousel.itemDescription', [
-                        (pane.index + 1).toString(),
+                return (index.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$2); }, onKeyDown: this.keydownHandler, "aria-label": index$1.loc('tecton.element.carousel.itemDescription', [
+                        (index$2 + 1).toString(),
                         paneCount.toString(),
                     ]) }));
             })));
         };
         this.renderPrevNavBtn = () => {
-            const prevPaneAvailable = this.realIndex > 0;
-            return (index.h("div", null, index.h("q2-btn", { type: "button", disabled: prevPaneAvailable ? undefined : true, class: "q2-carousel-navigation-button q2-carousel-navigation-button-prev", "hide-label": true, label: index$1.loc('tecton.element.carousel.previousItemLabel'), onClick: () => { var _a; return (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.slidePrev(); } }, index.h("q2-icon", { type: "chevron-left" }))));
+            return (index.h("div", { class: "prev-btn" }, index.h("button", { type: "button", class: "q2-carousel-navigation-button q2-carousel-navigation-button-prev", "aria-label": index$1.loc('tecton.element.carousel.previousItemLabel'), onClick: () => { var _a; return (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.slidePrev(); } }, index.h("q2-icon", { type: "arrow-left" }))));
         };
     }
     // #endregion
@@ -4828,6 +4845,7 @@ const Q2Carousel = class {
         }
         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],
@@ -4844,7 +4862,7 @@ const Q2Carousel = class {
                         this.paginationBtns[swiper.realIndex].focus({ preventScroll: true });
                     }
                     else if (isCarouselFocused)
-                        swiper.slides[swiper.realIndex].focus({
+                        swiper.slides[swiper.activeIndex].focus({
                             preventScroll: true,
                         });
                 },
@@ -4882,9 +4900,8 @@ const Q2Carousel = class {
     // #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;
@@ -4900,12 +4917,13 @@ const Q2Carousel = class {
      * @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.
@@ -4941,7 +4959,8 @@ const Q2Carousel = class {
         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
@@ -4953,7 +4972,7 @@ const Q2Carousel = class {
     }
     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() {
@@ -4971,11 +4990,11 @@ const Q2Carousel = class {
     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,
@@ -4997,7 +5016,7 @@ const Q2Carousel = class {
         }
     }
     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'];
@@ -5007,10 +5026,16 @@ const Q2Carousel = class {
             carouselContainerClasses = [...carouselContainerClasses, 'content-peek-display'];
         if (compactMode)
             carouselContainerClasses = [...carouselContainerClasses, 'compact'];
-        let paginationWrapperClasses = ['q2-carousel-pagination-navigation-wrapper'];
-        if (showNavigationArrows)
-            paginationWrapperClasses = [...paginationWrapperClasses, 'evenly-space'];
-        return (index.h(index.Host, { key: '5f48c7aab4485b79ffc625f050e2ce386ccadbf4', id: `q2-carousel-${this.guid}`, class: "q2-carousel-instance" }, insufficientPanes ? (this.renderInsufficientPanesDisplay()) : (index.h(index.Fragment, null, paneCount > 1 && (index.h("div", { class: paginationWrapperClasses.join(' ') }, showNavigationArrows && this.renderPrevNavBtn(), index.h("div", { class: "q2-carousel-control-center-tray" }, !hidePagination && this.renderPaginationArea(), autoPlay && this.renderAutoPlayBtn()), showNavigationArrows && this.renderNextNavBtn())), index.h("section", { class: carouselContainerClasses.join(' '), ref: el => (this.carouselWrapper = el), "aria-roledescription": "carousel", "aria-label": index$1.loc(label) }, index.h("div", { class: "q2-carousel-swiper-wrapper swiper-wrapper", ref: el => (this.carouselPaneWrapperElement = el), "aria-live": ariaLiveValue, onKeyDown: this.keydownHandler }, index.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 (index.h(index.Host, { key: '56ecddd3c2bbad43dba7fdb949d539a937b3e5f0', id: `q2-carousel-${this.guid}`, class: "q2-carousel-instance" }, insufficientPanes ? (this.renderInsufficientPanesDisplay()) : (index.h(index.Fragment, null, paneCount > 1 && (index.h("div", { class: paginationWrapperClasses.join(' ') }, showNavigationArrows &&
+            ['bottom', 'hug'].includes(arrowPosition) &&
+            this.renderPrevNavBtn(), index.h("div", { class: "q2-carousel-control-center-tray" }, !hidePagination && this.renderPaginationArea(), autoPlay && this.renderAutoPlayBtn()), showNavigationArrows &&
+            ['bottom', 'hug'].includes(arrowPosition) &&
+            this.renderNextNavBtn())), index.h("section", { class: carouselContainerClasses.join(' '), ref: el => (this.carouselWrapper = el), "aria-roledescription": "carousel", "aria-label": index$1.loc(label) }, index.h("div", { class: "q2-carousel-swiper-wrapper swiper-wrapper", ref: el => (this.carouselPaneWrapperElement = el), "aria-live": ariaLiveValue, onKeyDown: this.keydownHandler }, index.h("slot", null)), showNavigationArrows && arrowPosition === 'float' && (index.h("div", { class: "q2-carousel-floating-arrow-wrapper" }, this.renderPrevNavBtn(), this.renderNextNavBtn())))))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {