q2-tecton-elements 1.38.1 → 1.39.0

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

@@ -1,12 +1,16 @@
 import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-ebc7f269.js';
-import { b as isTouchDevice, o as overrideFocus, i as isEventFromElement } from './index-84f1034e.js';
+import { b as isTouchDevice, o as overrideFocus, i as isEventFromElement } from './index-fbe28822.js';
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{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{position:relative;width:100%;text-align:start;height:100%;display:grid;gap:var(--tct-card-gap, var(--t-card-gap, var(--app-scale-3x, 15px)));margin:0;color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));--comp-avatar-size:var(--tct-card-avatar-size, var(--t-card-avatar-size, 44px));--comp-chevron-size:0;--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)))}.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)}:host([bar][is-static]) .container{padding-left:var(--comp-card-padding)}:host(:not([is-static])) .container{--comp-border-radius:var(--tct-card-border-radius, var(--t-card-border-radius, var(--app-border-radius-1, 3px)));--comp-border-width:var(--tct-card-border-width, var(--t-card-border-width, 0px));border:none;background:var(--tct-card-background, var(--t-card-background, var(--t-base, #ffffff)));padding:var(--comp-card-padding);text-decoration:none;border-width:var(--comp-border-width);border-color:var(--tct-card-border-color, var(--t-card-border-color, transparent));border-style:var(--tct-card-border-style, solid);border-radius:var(--comp-border-radius);transition:box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));box-shadow:var(--tct-card-box-shadow, var(--t-card-box-shadow, var(--app-shadow-2, 0 3px 6px rgba(0, 0, 0, 0.3))))}:host(:not([is-static])) .container.clickable{cursor:pointer}@media (hover: hover){:host(:not([is-static])) .container.clickable{--comp-card-hover-box-shadow:var(--tct-card-hover-box-shadow, var(--t-card-hover-box-shadow, var(--app-shadow-3, 0 4px 12px rgba(0, 0, 0, 0.3))))}:host(:not([is-static])) .container.clickable:hover,:host(:not([is-static])) .container.clickable:active,:host(:not([is-static])) .container.clickable:focus{color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));box-shadow:var(--const-double-focus-ring)}:host(:not([is-static])) .container.clickable:hover{box-shadow:var(--comp-card-hover-box-shadow)}:host(:not([is-static])) .container.clickable:focus:hover{box-shadow:var(--const-double-focus-ring), var(--comp-card-hover-box-shadow)}:host(:not([is-static])) .container.clickable:active{box-shadow:var(--tct-card-active-box-shadow, var(--t-card-active-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))))}}:host(:not([is-static])) .container.is-touch{--comp-chevron-size:var(--tct-card-chevron-size, var(--t-card-chevron-size, 26px));grid-template-columns:1fr var(--comp-chevron-size)}:host(:not([is-static])) .container.has-avatar.is-touch{grid-template-columns:var(--comp-avatar-size) 1fr var(--comp-chevron-size)}.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;white-space:nowrap}p{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.bar{--comp-bar-border-radius:calc(var(--comp-border-radius) - var(--comp-border-width));border-radius:var(--comp-bar-border-radius) 0 0 var(--comp-bar-border-radius);position:absolute;inset:0 auto auto 0;width:var(--comp-bar-width);background:var(--comp-bar-color);height:100%}.touch-indicator{align-self:center;--tct-icon-size:var(--comp-chevron-size)}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{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{position:relative;width:100%;text-align:start;height:100%;display:grid;gap:var(--tct-card-gap, var(--t-card-gap, var(--app-scale-3x, 15px)));margin:0;color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));--comp-avatar-size:var(--tct-card-avatar-size, var(--t-card-avatar-size, 44px));--comp-chevron-size:0;--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)))}.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)}:host([bar][is-static]) .container{padding-left:var(--comp-card-padding)}:host(:not([is-static])) .container{--comp-border-radius:var(--tct-card-border-radius, var(--t-card-border-radius, var(--app-border-radius-1, 3px)));--comp-border-width:var(--tct-card-border-width, var(--t-card-border-width, 0px));border:none;background:var(--tct-card-background, var(--t-card-background, var(--t-base, #ffffff)));padding:var(--comp-card-padding);text-decoration:none;border-width:var(--comp-border-width);border-color:var(--tct-card-border-color, var(--t-card-border-color, transparent));border-style:var(--tct-card-border-style, solid);border-radius:var(--comp-border-radius);transition:box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));box-shadow:var(--tct-card-box-shadow, var(--t-card-box-shadow, var(--app-shadow-2, 0 3px 6px rgba(0, 0, 0, 0.3))))}:host(:not([is-static])) .container.clickable{cursor:pointer}@media (hover: hover){:host(:not([is-static])) .container.clickable{--comp-card-hover-box-shadow:var(--tct-card-hover-box-shadow, var(--t-card-hover-box-shadow, var(--app-shadow-3, 0 4px 12px rgba(0, 0, 0, 0.3))))}:host(:not([is-static])) .container.clickable:hover,:host(:not([is-static])) .container.clickable:active,:host(:not([is-static])) .container.clickable:focus{color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));box-shadow:var(--const-double-focus-ring)}:host(:not([is-static])) .container.clickable:hover{box-shadow:var(--comp-card-hover-box-shadow)}:host(:not([is-static])) .container.clickable:focus:hover{box-shadow:var(--const-double-focus-ring), var(--comp-card-hover-box-shadow)}:host(:not([is-static])) .container.clickable:active{box-shadow:var(--tct-card-active-box-shadow, var(--t-card-active-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))))}}:host(:not([is-static])) .container.is-touch{--comp-chevron-size:var(--tct-card-chevron-size, var(--t-card-chevron-size, 26px));grid-template-columns:1fr var(--comp-chevron-size)}:host(:not([is-static])) .container.has-avatar.is-touch{grid-template-columns:var(--comp-avatar-size) 1fr var(--comp-chevron-size)}.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;white-space:nowrap}p{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.bar{--comp-bar-border-radius:calc(var(--comp-border-radius) - var(--comp-border-width));border-radius:var(--comp-bar-border-radius) 0 0 var(--comp-bar-border-radius);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))}.touch-indicator{align-self:center;--tct-icon-size:var(--comp-chevron-size)}";
 
-const SUPPORTED_THEME_COLORS = [
+const PREDEFINED_COLORS = [
   'primary',
   'secondary',
   'tertiary',
+  'info',
+  'success',
+  'warning',
+  'alert',
   'accent-1',
   'accent-2',
   'accent-3',
@@ -20,7 +24,6 @@ const SUPPORTED_THEME_COLORS = [
   'accent-11',
   'accent-12',
 ];
-const STOPLIGHT_COLORS = ['info', 'success', 'warning', 'alert'];
 const Q2Card = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -48,9 +51,6 @@ const Q2Card = class {
     this.isAutoTouch = false;
     this.isAutoSmall = false;
   }
-  componentWillLoad() {
-    this.checkBar();
-  }
   componentDidLoad() {
     const { hostElement, clickableElement } = this;
     hostElement.click = () => clickableElement.click();
@@ -66,19 +66,19 @@ const Q2Card = class {
       return;
     this.clickableElement.focus();
   }
-  checkBar() {
+  getBarClasses() {
     const { bar } = this;
-    if (!bar)
-      return;
-    if (SUPPORTED_THEME_COLORS.includes(bar)) {
-      this.barColor = `var(--t-${bar})`;
-    }
-    else if (STOPLIGHT_COLORS.includes(bar)) {
-      this.barColor = `var(--const-stoplight-${bar})`;
-    }
-    else {
-      this.barColor = bar;
-    }
+    return {
+      bar: true,
+      [`color-${bar}`]: this.isBarColorPredefined(),
+    };
+  }
+  getBarStyles() {
+    const { bar } = this;
+    return this.isBarColorPredefined() ? {} : { '--comp-bar-color': bar };
+  }
+  isBarColorPredefined() {
+    return PREDEFINED_COLORS.includes(this.bar);
   }
   determineAutoTouch() {
     if (this.hostElement.hasAttribute('is-touch'))
@@ -107,7 +107,7 @@ const Q2Card = class {
     }
   }
   generateContent() {
-    return (h(Fragment, null, this.bar && (h("div", { class: "bar", "test-id": "bar", style: { '--comp-bar-color': this.barColor } })), this.generateAvatar(), h("div", { class: "content", "test-id": "contentContainer", ref: e => (this.containerElement = e) }, this.title && h("h3", { "test-id": "title" }, this.title), this.description && h("p", { "test-id": "description" }, this.description), h("slot", null)), this.isTouch && !this.isStatic && (h("q2-icon", { "test-id": "touchIndicator", type: "chevron-right", class: "touch-indicator" }))));
+    return (h(Fragment, null, this.bar && (h("div", { class: this.getBarClasses(), "test-id": "bar", style: this.getBarStyles() })), this.generateAvatar(), h("div", { class: "content", "test-id": "contentContainer", ref: e => (this.containerElement = e) }, this.title && h("h3", { "test-id": "title" }, this.title), this.description && h("p", { "test-id": "description" }, this.description), h("slot", null)), this.isTouch && !this.isStatic && (h("q2-icon", { "test-id": "touchIndicator", type: "chevron-right", class: "touch-indicator" }))));
   }
   generateContainerClasses() {
     const { isSmall, isAutoSmall, avatarName, avatarInitials, avatarSrc, avatarIcon, isTouch, isAutoTouch, isStatic, type, } = this;
@@ -135,9 +135,6 @@ const Q2Card = class {
       return (h("button", { ref: e => (this.clickableElement = e), class: this.generateContainerClasses(), "test-id": "clickableElement", type: "button", onClick: this.handleClick }, this.generateContent()));
   }
   get hostElement() { return getElement(this); }
-  static get watchers() { return {
-    "bar": ["checkBar"]
-  }; }
 };
 Q2Card.style = stylesCss;
 

package/dist/esm/q2-card.entry.js.map

@@ -1 +1 @@
-{"file":"q2-card.entry.js","mappings":"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","names":[],"sources":["./src/components/q2-card/styles.scss?tag=q2-card&encapsulation=shadow","./src/components/q2-card/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n.container {\n    position: relative;\n    width: 100%;\n    text-align: start;\n    height: 100%;\n    display: grid;\n    gap: var-list(var-prefixer(card-gap), --app-scale-3x, 15px);\n    margin: 0;\n    color: var-list(var-prefixer(card-color), --t-text, #4d4d4d);\n\n    --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 44px)};\n    --comp-chevron-size: 0;\n    --comp-bar-width: #{var-list(var-prefixer(card-bar-width), --app-scale-2x, 10px)};\n    --comp-card-padding: #{var-list(var-prefixer(card-padding), --app-scale-4x, 20px)};\n\n    &.is-small {\n        --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 26px)};\n    }\n    &.has-avatar {\n        grid-template-columns: var(--comp-avatar-size) 1fr;\n        --tct-avatar-width: var(--comp-avatar-size);\n        --tct-avatar-height: var(--comp-avatar-size);\n        --tct-icon-size: var(--comp-avatar-size);\n    }\n\n    :host([bar][is-static]) & {\n        padding-left: var(--comp-card-padding);\n    }\n\n    :host(:not([is-static])) & {\n        --comp-border-radius: #{var-list(var-prefixer(card-border-radius), --app-border-radius-1, 3px)};\n        --comp-border-width: #{var-list(var-prefixer(card-border-width), 0px)};\n        border: none;\n        background: var-list(var-prefixer(card-background), --t-base, #ffffff);\n        padding: var(--comp-card-padding);\n        text-decoration: none;\n        border-width: var(--comp-border-width);\n        border-color: var-list(var-prefixer(card-border-color), transparent);\n        border-style: var-list(--tct-card-border-style, solid);\n        border-radius: var(--comp-border-radius);\n        transition: box-shadow var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n        box-shadow: var-list(var-prefixer(card-box-shadow), --app-shadow-2, unquote('0 3px 6px rgba(0, 0, 0, 0.3)'));\n\n        &.clickable {\n            cursor: pointer;\n            @media (hover: hover) {\n                --comp-card-hover-box-shadow: #{var-list(\n                        var-prefixer(card-hover-box-shadow),\n                        --app-shadow-3,\n                        unquote('0 4px 12px rgba(0, 0, 0, 0.3)')\n                    )};\n\n                &:hover,\n                &:active,\n                &:focus {\n                    color: var-list(var-prefixer(card-color), --t-text, #4d4d4d);\n                    box-shadow: var(--const-double-focus-ring);\n                }\n\n                &:hover {\n                    box-shadow: var(--comp-card-hover-box-shadow);\n                }\n\n                &:focus:hover {\n                    box-shadow: var(--const-double-focus-ring), var(--comp-card-hover-box-shadow);\n                }\n\n                &:active {\n                    box-shadow: var-list(\n                        var-prefixer(card-active-box-shadow),\n                        --app-shadow-1,\n                        unquote('0 2px 4px rgba(0, 0, 0, 0.3)')\n                    );\n                }\n            }\n        }\n\n        &.is-touch {\n            --comp-chevron-size: #{var-list(var-prefixer(card-chevron-size), 26px)};\n            grid-template-columns: 1fr var(--comp-chevron-size);\n        }\n\n        &.has-avatar.is-touch {\n            grid-template-columns: var(--comp-avatar-size) 1fr var(--comp-chevron-size);\n        }\n    }\n}\n\n.content {\n    overflow: hidden;\n    display: grid;\n    gap: var-list(var-prefixer(card-content-gap), --app-scale-1x, 5px);\n    align-content: start;\n}\n\nh3,\np {\n    margin: 0;\n    padding: 0;\n    line-height: var-list(var-prefixer(card-font-height), 20px);\n}\n\nh3 {\n    font-weight: var-list(var-prefixer(card-font-weight), 600);\n    font-size: var-list(var-prefixer(card-font-size), 17px);\n    @include line-clamp(1);\n}\n\np {\n    @include line-clamp(2);\n}\n\n.bar {\n    --comp-bar-border-radius: calc(var(--comp-border-radius) - var(--comp-border-width));\n    border-radius: var(--comp-bar-border-radius) 0 0 var(--comp-bar-border-radius);\n    position: absolute;\n    inset: 0 auto auto 0;\n    width: var(--comp-bar-width);\n    background: var(--comp-bar-color);\n    height: 100%;\n}\n\n.touch-indicator {\n    align-self: center;\n    --tct-icon-size: var(--comp-chevron-size);\n}\n","import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Event,\n    h,\n    Fragment,\n    Listen,\n    Element,\n    EventEmitter,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { isTouchDevice, overrideFocus, isEventFromElement } from 'src/utils';\nconst SUPPORTED_THEME_COLORS = [\n    'primary',\n    'secondary',\n    'tertiary',\n    'accent-1',\n    'accent-2',\n    'accent-3',\n    'accent-4',\n    'accent-5',\n    'accent-6',\n    'accent-7',\n    'accent-8',\n    'accent-9',\n    'accent-10',\n    'accent-11',\n    'accent-12',\n];\nconst STOPLIGHT_COLORS = ['info', 'success', 'warning', 'alert'];\n\n@Component({\n    tag: 'q2-card',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Card implements ComponentInterface {\n    @Prop({ reflect: true }) title: string;\n    @Prop({ reflect: true }) description: string;\n    @Prop({ reflect: true }) avatarName: string;\n    @Prop({ reflect: true }) avatarInitials: string;\n    @Prop({ reflect: true }) avatarIcon: string;\n    @Prop({ reflect: true }) avatarSrc: string;\n    @Prop({ reflect: true }) isSmall: boolean;\n    @Prop({ reflect: true }) bar: string;\n    @Prop({ reflect: true }) isStatic: boolean;\n    @Prop({ reflect: true }) isTouch: boolean = isTouchDevice();\n    @Prop({ reflect: true }) url: string;\n    @Prop({ reflect: true }) target: '_self' | '_blank' | '_parent' | '_top';\n    @Prop({ reflect: true }) type: 'clickable' | 'non-clickable' = 'clickable';\n\n    @State() isAutoTouch: boolean = false;\n    @State() isAutoSmall: boolean = false;\n    @Element() hostElement: HTMLElement;\n    @Event() click: EventEmitter;\n\n    clickableElement: HTMLElement;\n    containerElement: HTMLElement;\n    avatarElement: HTMLElement;\n    resizeObserver: ResizeObserver;\n    barColor: string;\n\n    componentWillLoad() {\n        this.checkBar();\n    }\n\n    componentDidLoad() {\n        const { hostElement, clickableElement } = this;\n        hostElement.click = () => clickableElement.click();\n        overrideFocus(this.hostElement);\n\n        this.resizeObserver = new ResizeObserver(() => this.determineAutoSmall());\n        this.resizeObserver.observe(this.hostElement);\n    }\n\n    disconnectedCallback() {\n        this.resizeObserver = null;\n    }\n\n    handleClick = (event: MouseEvent) => {\n        if (this.url) return true;\n        event.preventDefault();\n        event.stopPropagation();\n        this.click.emit();\n    };\n\n    @Listen('focus')\n    onHostElementFocus(event) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.clickableElement.focus();\n    }\n\n    @Watch('bar')\n    checkBar() {\n        const { bar } = this;\n        if (!bar) return;\n\n        if (SUPPORTED_THEME_COLORS.includes(bar)) {\n            this.barColor = `var(--t-${bar})`;\n        } else if (STOPLIGHT_COLORS.includes(bar)) {\n            this.barColor = `var(--const-stoplight-${bar})`;\n        } else {\n            this.barColor = bar;\n        }\n    }\n\n    determineAutoTouch() {\n        if (this.hostElement.hasAttribute('is-touch')) return;\n        this.isAutoTouch = isTouchDevice();\n    }\n\n    determineAutoSmall() {\n        if (this.isStatic) return;\n        if (this.hostElement.hasAttribute('is-small')) return;\n        const { containerElement, avatarElement } = this;\n        const avatarWidth = avatarElement?.offsetWidth ?? 0;\n        const containerWidth = containerElement?.offsetWidth ?? 0;\n        const totalWidth = avatarWidth + containerWidth;\n        this.isAutoSmall = totalWidth < 350;\n    }\n\n    generateAvatar() {\n        const { avatarName, avatarInitials, avatarSrc, avatarIcon } = this;\n\n        if (avatarIcon) {\n            return (\n                <q2-icon\n                    type={avatarIcon}\n                    ref={e => (this.avatarElement = e)}\n                    test-id=\"avatar\"\n                ></q2-icon>\n            );\n        } else if (avatarName || avatarInitials || avatarSrc) {\n            return (\n                <q2-avatar\n                    name={avatarName}\n                    initials={avatarInitials}\n                    src={avatarSrc}\n                    ref={e => (this.avatarElement = e)}\n                    test-id=\"avatar\"\n                ></q2-avatar>\n            );\n        }\n    }\n\n    generateContent() {\n        return (\n            <Fragment>\n                {this.bar && (\n                    <div\n                        class=\"bar\"\n                        test-id=\"bar\"\n                        style={{ '--comp-bar-color': this.barColor }}\n                    ></div>\n                )}\n                {this.generateAvatar()}\n                <div\n                    class=\"content\"\n                    test-id=\"contentContainer\"\n                    ref={e => (this.containerElement = e)}\n                >\n                    {this.title && <h3 test-id=\"title\">{this.title}</h3>}\n                    {this.description && <p test-id=\"description\">{this.description}</p>}\n                    <slot />\n                </div>\n                {this.isTouch && !this.isStatic && (\n                    <q2-icon\n                        test-id=\"touchIndicator\"\n                        type=\"chevron-right\"\n                        class=\"touch-indicator\"\n                    ></q2-icon>\n                )}\n            </Fragment>\n        );\n    }\n\n    generateContainerClasses() {\n        const {\n            isSmall,\n            isAutoSmall,\n            avatarName,\n            avatarInitials,\n            avatarSrc,\n            avatarIcon,\n            isTouch,\n            isAutoTouch,\n            isStatic,\n            type,\n        } = this;\n        const result = ['container', type];\n        const showSmall = isSmall || isAutoSmall;\n        const showTouch = isTouch || isAutoTouch;\n        const hasAvatar = avatarName || avatarInitials || avatarSrc || avatarIcon;\n        if (showSmall) result.push('is-small');\n        if (showTouch && !isStatic) result.push('is-touch');\n        if (hasAvatar) result.push('has-avatar');\n        if (isStatic) result.push('is-static');\n\n        return result.join(' ');\n    }\n\n    render() {\n        const { url, isStatic, type } = this;\n        if (isStatic || type === 'non-clickable')\n            return (\n                <div\n                    ref={e => (this.clickableElement = e)}\n                    class={this.generateContainerClasses()}\n                    test-id=\"clickableElement\"\n                >\n                    {this.generateContent()}\n                </div>\n            );\n        else if (!!url)\n            return (\n                <a\n                    ref={e => (this.clickableElement = e)}\n                    href={this.url}\n                    class={this.generateContainerClasses()}\n                    target={this.target}\n                    rel=\"noopener noreferrer\"\n                    test-id=\"clickableElement\"\n                    onClick={this.handleClick}\n                >\n                    {this.generateContent()}\n                </a>\n            );\n        else\n            return (\n                <button\n                    ref={e => (this.clickableElement = e)}\n                    class={this.generateContainerClasses()}\n                    test-id=\"clickableElement\"\n                    type=\"button\"\n                    onClick={this.handleClick}\n                >\n                    {this.generateContent()}\n                </button>\n            );\n    }\n}\n"],"version":3}
+{"file":"q2-card.entry.js","mappings":"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","names":[],"sources":["./src/components/q2-card/styles.scss?tag=q2-card&encapsulation=shadow","./src/components/q2-card/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n.container {\n    position: relative;\n    width: 100%;\n    text-align: start;\n    height: 100%;\n    display: grid;\n    gap: var-list(var-prefixer(card-gap), --app-scale-3x, 15px);\n    margin: 0;\n    color: var-list(var-prefixer(card-color), --t-text, #4d4d4d);\n\n    --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 44px)};\n    --comp-chevron-size: 0;\n    --comp-bar-width: #{var-list(var-prefixer(card-bar-width), --app-scale-2x, 10px)};\n    --comp-card-padding: #{var-list(var-prefixer(card-padding), --app-scale-4x, 20px)};\n\n    &.is-small {\n        --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 26px)};\n    }\n    &.has-avatar {\n        grid-template-columns: var(--comp-avatar-size) 1fr;\n        --tct-avatar-width: var(--comp-avatar-size);\n        --tct-avatar-height: var(--comp-avatar-size);\n        --tct-icon-size: var(--comp-avatar-size);\n    }\n\n    :host([bar][is-static]) & {\n        padding-left: var(--comp-card-padding);\n    }\n\n    :host(:not([is-static])) & {\n        --comp-border-radius: #{var-list(var-prefixer(card-border-radius), --app-border-radius-1, 3px)};\n        --comp-border-width: #{var-list(var-prefixer(card-border-width), 0px)};\n        border: none;\n        background: var-list(var-prefixer(card-background), --t-base, #ffffff);\n        padding: var(--comp-card-padding);\n        text-decoration: none;\n        border-width: var(--comp-border-width);\n        border-color: var-list(var-prefixer(card-border-color), transparent);\n        border-style: var-list(--tct-card-border-style, solid);\n        border-radius: var(--comp-border-radius);\n        transition: box-shadow var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n        box-shadow: var-list(var-prefixer(card-box-shadow), --app-shadow-2, unquote('0 3px 6px rgba(0, 0, 0, 0.3)'));\n\n        &.clickable {\n            cursor: pointer;\n            @media (hover: hover) {\n                --comp-card-hover-box-shadow: #{var-list(\n                        var-prefixer(card-hover-box-shadow),\n                        --app-shadow-3,\n                        unquote('0 4px 12px rgba(0, 0, 0, 0.3)')\n                    )};\n\n                &:hover,\n                &:active,\n                &:focus {\n                    color: var-list(var-prefixer(card-color), --t-text, #4d4d4d);\n                    box-shadow: var(--const-double-focus-ring);\n                }\n\n                &:hover {\n                    box-shadow: var(--comp-card-hover-box-shadow);\n                }\n\n                &:focus:hover {\n                    box-shadow: var(--const-double-focus-ring), var(--comp-card-hover-box-shadow);\n                }\n\n                &:active {\n                    box-shadow: var-list(\n                        var-prefixer(card-active-box-shadow),\n                        --app-shadow-1,\n                        unquote('0 2px 4px rgba(0, 0, 0, 0.3)')\n                    );\n                }\n            }\n        }\n\n        &.is-touch {\n            --comp-chevron-size: #{var-list(var-prefixer(card-chevron-size), 26px)};\n            grid-template-columns: 1fr var(--comp-chevron-size);\n        }\n\n        &.has-avatar.is-touch {\n            grid-template-columns: var(--comp-avatar-size) 1fr var(--comp-chevron-size);\n        }\n    }\n}\n\n.content {\n    overflow: hidden;\n    display: grid;\n    gap: var-list(var-prefixer(card-content-gap), --app-scale-1x, 5px);\n    align-content: start;\n}\n\nh3,\np {\n    margin: 0;\n    padding: 0;\n    line-height: var-list(var-prefixer(card-font-height), 20px);\n}\n\nh3 {\n    font-weight: var-list(var-prefixer(card-font-weight), 600);\n    font-size: var-list(var-prefixer(card-font-size), 17px);\n    @include line-clamp(1);\n}\n\np {\n    @include line-clamp(2);\n}\n\n.bar {\n    --comp-bar-border-radius: calc(var(--comp-border-radius) - var(--comp-border-width));\n    border-radius: var(--comp-bar-border-radius) 0 0 var(--comp-bar-border-radius);\n    position: absolute;\n    inset: 0 auto auto 0;\n    width: var(--comp-bar-width);\n    background: var(--comp-bar-color);\n    height: 100%;\n\n    &.color-primary {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-primary, --t-primary, #5446a4)};\n    }\n\n    &.color-secondary {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-secondary, --t-secondary, #b6b3cc)};\n    }\n\n    &.color-tertiary {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-tertiary, --t-tertiary, #ebe8fc)};\n    }\n\n    &.color-info {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-info, --const-stoplight-info, #0079c1)};\n    }\n\n    &.color-success {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-success, --const-stoplight-success, #0e8a00)};\n    }\n\n    &.color-warning {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-warning, --const-stoplight-warning, #c35500)};\n    }\n\n    &.color-alert {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-alert, --const-stoplight-alert, #c35500)};\n    }\n\n    &.color-accent-1 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-1, --t-accent-1, #e05252)};\n    }\n\n    &.color-accent-2 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-2, --t-accent-2, #e09952)};\n    }\n\n    &.color-accent-3 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-3, --t-accent-3, #e0e052)};\n    }\n\n    &.color-accent-4 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-4, --t-accent-4, #99e052)};\n    }\n\n    &.color-accent-5 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-5, --t-accent-5, #52e052)};\n    }\n\n    &.color-accent-6 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-6, --t-accent-6, #52e099)};\n    }\n\n    &.color-accent-7 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-7, --t-accent-7, #52e0e0)};\n    }\n\n    &.color-accent-8 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-8, --t-accent-8, #5299e0)};\n    }\n\n    &.color-accent-9 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-9, --t-accent-9, #5252e0)};\n    }\n\n    &.color-accent-10 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-10, --t-accent-10, #9952e0)};\n    }\n\n    &.color-accent-11 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-11, --t-accent-11, #e052e0)};\n    }\n\n    &.color-accent-12 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-12, --t-accent-12, #e05299)};\n    }\n}\n\n.touch-indicator {\n    align-self: center;\n    --tct-icon-size: var(--comp-chevron-size);\n}\n","import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Event,\n    h,\n    Fragment,\n    Listen,\n    Element,\n    EventEmitter,\n    State,\n} from '@stencil/core';\nimport { isTouchDevice, overrideFocus, isEventFromElement } from 'src/utils';\nconst PREDEFINED_COLORS = [\n    'primary',\n    'secondary',\n    'tertiary',\n    'info',\n    'success',\n    'warning',\n    'alert',\n    'accent-1',\n    'accent-2',\n    'accent-3',\n    'accent-4',\n    'accent-5',\n    'accent-6',\n    'accent-7',\n    'accent-8',\n    'accent-9',\n    'accent-10',\n    'accent-11',\n    'accent-12',\n];\n\n@Component({\n    tag: 'q2-card',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Card implements ComponentInterface {\n    @Prop({ reflect: true }) title: string;\n    @Prop({ reflect: true }) description: string;\n    @Prop({ reflect: true }) avatarName: string;\n    @Prop({ reflect: true }) avatarInitials: string;\n    @Prop({ reflect: true }) avatarIcon: string;\n    @Prop({ reflect: true }) avatarSrc: string;\n    @Prop({ reflect: true }) isSmall: boolean;\n    @Prop({ reflect: true }) bar: string;\n    @Prop({ reflect: true }) isStatic: boolean;\n    @Prop({ reflect: true }) isTouch: boolean = isTouchDevice();\n    @Prop({ reflect: true }) url: string;\n    @Prop({ reflect: true }) target: '_self' | '_blank' | '_parent' | '_top';\n    @Prop({ reflect: true }) type: 'clickable' | 'non-clickable' = 'clickable';\n\n    @State() isAutoTouch: boolean = false;\n    @State() isAutoSmall: boolean = false;\n    @Element() hostElement: HTMLElement;\n\n    /**\n     * Emitted when the card is clicked and the `url` property is not provided.\n     */\n    @Event() click: EventEmitter<undefined>;\n\n    clickableElement: HTMLElement;\n    containerElement: HTMLElement;\n    avatarElement: HTMLElement;\n    resizeObserver: ResizeObserver;\n\n    componentDidLoad() {\n        const { hostElement, clickableElement } = this;\n        hostElement.click = () => clickableElement.click();\n        overrideFocus(this.hostElement);\n\n        this.resizeObserver = new ResizeObserver(() => this.determineAutoSmall());\n        this.resizeObserver.observe(this.hostElement);\n    }\n\n    disconnectedCallback() {\n        this.resizeObserver = null;\n    }\n\n    handleClick = (event: MouseEvent) => {\n        if (this.url) return true;\n        event.preventDefault();\n        event.stopPropagation();\n        this.click.emit();\n    };\n\n    @Listen('focus')\n    onHostElementFocus(event) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.clickableElement.focus();\n    }\n\n    getBarClasses() {\n        const { bar } = this;\n\n        return {\n            bar: true,\n            [`color-${bar}`]: this.isBarColorPredefined(),\n        };\n    }\n\n    getBarStyles() {\n        const { bar } = this;\n\n        return this.isBarColorPredefined() ? {} : { '--comp-bar-color': bar };\n    }\n\n    isBarColorPredefined() {\n        return PREDEFINED_COLORS.includes(this.bar);\n    }\n\n    determineAutoTouch() {\n        if (this.hostElement.hasAttribute('is-touch')) return;\n        this.isAutoTouch = isTouchDevice();\n    }\n\n    determineAutoSmall() {\n        if (this.isStatic) return;\n        if (this.hostElement.hasAttribute('is-small')) return;\n        const { containerElement, avatarElement } = this;\n        const avatarWidth = avatarElement?.offsetWidth ?? 0;\n        const containerWidth = containerElement?.offsetWidth ?? 0;\n        const totalWidth = avatarWidth + containerWidth;\n        this.isAutoSmall = totalWidth < 350;\n    }\n\n    generateAvatar() {\n        const { avatarName, avatarInitials, avatarSrc, avatarIcon } = this;\n\n        if (avatarIcon) {\n            return (\n                <q2-icon\n                    type={avatarIcon}\n                    ref={e => (this.avatarElement = e)}\n                    test-id=\"avatar\"\n                ></q2-icon>\n            );\n        } else if (avatarName || avatarInitials || avatarSrc) {\n            return (\n                <q2-avatar\n                    name={avatarName}\n                    initials={avatarInitials}\n                    src={avatarSrc}\n                    ref={e => (this.avatarElement = e)}\n                    test-id=\"avatar\"\n                ></q2-avatar>\n            );\n        }\n    }\n\n    generateContent() {\n        return (\n            <Fragment>\n                {this.bar && (\n                    <div\n                        class={this.getBarClasses()}\n                        test-id=\"bar\"\n                        style={this.getBarStyles()}\n                    ></div>\n                )}\n                {this.generateAvatar()}\n                <div\n                    class=\"content\"\n                    test-id=\"contentContainer\"\n                    ref={e => (this.containerElement = e)}\n                >\n                    {this.title && <h3 test-id=\"title\">{this.title}</h3>}\n                    {this.description && <p test-id=\"description\">{this.description}</p>}\n                    <slot />\n                </div>\n                {this.isTouch && !this.isStatic && (\n                    <q2-icon\n                        test-id=\"touchIndicator\"\n                        type=\"chevron-right\"\n                        class=\"touch-indicator\"\n                    ></q2-icon>\n                )}\n            </Fragment>\n        );\n    }\n\n    generateContainerClasses() {\n        const {\n            isSmall,\n            isAutoSmall,\n            avatarName,\n            avatarInitials,\n            avatarSrc,\n            avatarIcon,\n            isTouch,\n            isAutoTouch,\n            isStatic,\n            type,\n        } = this;\n        const result = ['container', type];\n        const showSmall = isSmall || isAutoSmall;\n        const showTouch = isTouch || isAutoTouch;\n        const hasAvatar = avatarName || avatarInitials || avatarSrc || avatarIcon;\n        if (showSmall) result.push('is-small');\n        if (showTouch && !isStatic) result.push('is-touch');\n        if (hasAvatar) result.push('has-avatar');\n        if (isStatic) result.push('is-static');\n\n        return result.join(' ');\n    }\n\n    render() {\n        const { url, isStatic, type } = this;\n        if (isStatic || type === 'non-clickable')\n            return (\n                <div\n                    ref={e => (this.clickableElement = e)}\n                    class={this.generateContainerClasses()}\n                    test-id=\"clickableElement\"\n                >\n                    {this.generateContent()}\n                </div>\n            );\n        else if (!!url)\n            return (\n                <a\n                    ref={e => (this.clickableElement = e)}\n                    href={this.url}\n                    class={this.generateContainerClasses()}\n                    target={this.target}\n                    rel=\"noopener noreferrer\"\n                    test-id=\"clickableElement\"\n                    onClick={this.handleClick}\n                >\n                    {this.generateContent()}\n                </a>\n            );\n        else\n            return (\n                <button\n                    ref={e => (this.clickableElement = e)}\n                    class={this.generateContainerClasses()}\n                    test-id=\"clickableElement\"\n                    type=\"button\"\n                    onClick={this.handleClick}\n                >\n                    {this.generateContent()}\n                </button>\n            );\n    }\n}\n"],"version":3}

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-ebc7f269.js';
-import { l as loc } from './index-84f1034e.js';
+import { l as loc } from './index-fbe28822.js';
 
 const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{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-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 2px 8px 0px var(--t-top-a1, rgba(0, 0, 0, 0.25)));cursor:grab}q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) *{cursor:pointer}q2-carousel-pane.q2-carousel-pane:focus{box-shadow:none}q2-carousel-pane.q2-carousel-pane:focus .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(--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, 0.5rem 0.5rem 0.5rem 0.5rem));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)}";
 

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

@@ -1 +1 @@
-{"file":"q2-carousel-pane.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,63EAA63E;;MCQl4E,UAAU;;;;IA2BnB,sBAAiB,GAAG,CAAC,YAAoB;MACrC,OAAO,kDAAkD,YAAY,EAAE,CAAC;KAC3E,CAAC;IAIF,gBAAW,GAAG,KAAK;MACf,IAAI,IAAI,CAAC,YAAY;QAAE,OAAO;MAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;MACvB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;QACxB,SAAS,EAAE,IAAI,CAAC,KAAK;QACrB,IAAI,EAAE,IAAI,CAAC,WAAW;OACzB,CAAC,CAAC;KACN,CAAC;;;;;;EArBF,IAAI,gBAAgB;IAChB,OAAO,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,QAAQ,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;GAClG;EAED,gBAAgB;IACZ,IAAI,CAAC,wBAAwB,EAAE,CAAC;GACnC;EAkBD,wBAAwB;IACpB,MAAM,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;IAC9B,MAAM,iBAAiB,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CACvD,0DAA0D,CAC7D,CAAC;IAEF,iBAAiB,CAAC,OAAO,CAAC,OAAO;MAC7B,MAAM,gBAAgB,GAClB,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC;MAExF,IAAI,gBAAgB,EAAE;QAClB,OAAO,CAAC,OAAO,CAAC,UAAU,GAAG,GAAG,OAAO,CAAC,QAAQ,EAAE,CAAC;OACtD;MAED,IAAI,YAAY,EAAE;QACd,IAAI,OAAO,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAAE;UAC1C,OAAO,CAAC,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC,CAAC;UACtE,OAAO,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;SAC/C;aAAM,IAAI,OAAO,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE;UAC1C,OAAO,CAAC,QAAQ,GAAG,SAAS,CAAC;SAChC;aAAM;UACH,OAAO,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;SACvC;OACJ;WAAM;QACH,OAAO,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;OACzB;KACJ,CAAC,CAAC;GACN;EAED,MAAM;IACF,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAEvB,QACI,EAAC,IAAI,IACD,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,gBAAgB,CAAC,EACpD,QAAQ,EAAE,IAAI,CAAC,YAAY,GAAG,CAAC,GAAG,CAAC,CAAC,EACpC,IAAI,EAAC,OAAO,0BACS,OAAO,iBACf,IAAI,CAAC,YAAY,GAAG,SAAS,GAAG,MAAM,gBAE/C,KAAK;UACC,GAAG,CAAC,KAAK,CAAC;UACV,GAAG,CAAC,yCAAyC,EAAE;UAC3C,CAAC,IAAI,CAAC,gBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAE;UACtC,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,EAAE,QAAQ,EAAE;SACtC,CAAC,EAEZ,OAAO,EAAE,IAAI,CAAC,WAAW,IAEzB,eAAS,KAAK,EAAC,+BAA+B,IAC1C,eAAa,CACP,CACP,EACT;GACL;;;;;;;;;;","names":[],"sources":["./src/components/q2-carousel-pane/styles.scss?tag=q2-carousel-pane","./src/components/q2-carousel-pane/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\nq2-carousel .swiper-slide {\n    flex-shrink: 0;\n    width: 100%;\n    height: 100%;\n    position: relative;\n    transition-property: transform;\n    transition: all 0.2s;\n}\n\nq2-carousel-pane.q2-carousel-pane {\n    --comp-carousel-pane-tween: #{var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n    --comp-carousel-shadow: #{var-list(--app-shadow-2, unquote('0px 2px 8px 0px var(--t-top-a1, rgba(0, 0, 0, 0.25))'))};\n\n    cursor: grab;\n\n    &:not([is-active-pane]) * {\n        cursor: pointer;\n    }\n\n    &:focus {\n        box-shadow: none;\n        .q2-carousel-pane-main-content {\n            outline: none;\n            box-shadow: var(--const-double-focus-ring);\n        }\n    }\n\n    button {\n        border: 0;\n        background: transparent;\n        transition: all 0.2s;\n        opacity: 0.3;\n        cursor: pointer;\n\n        &:hover {\n            opacity: 0.7;\n        }\n    }\n\n    .q2-carousel-pane-main-content {\n        box-shadow: var(--comp-carousel-shadow);\n        transition: var(--comp-carousel-pane-tween);\n        background: var-list(\n            --tct-carousel-background,\n            var-prefixer(carousel-background-color),\n            --tct-white,\n            --app-white,\n            #ffffff\n        );\n        border: var-list(var-prefixer(carousel-pane-border-width), 0px) solid\n            var-list(\n                var-prefixer(carousel-pane-border-color),\n                var-prefixer(gray-11),\n                --tct-gray-l1,\n                --app-gray-l1,\n                #cccccc\n            );\n        border-radius: var-list(var-prefixer(carousel-pane-border-radius), 8px);\n        padding: var-list(var-prefixer(carousel-pane-padding), unquote('0.5rem 0.5rem 0.5rem 0.5rem'));\n        height: var-list(var-prefixer(carousel-pane-height), 10em);\n    }\n\n    .q2-carousel-pane-main-content:hover {\n        box-shadow: var(--const-double-focus-ring), var(--comp-carousel-shadow);\n    }\n}\n","import { Component, ComponentInterface, Event, Element, Host, Watch, Prop, h, EventEmitter } from '@stencil/core';\nimport { loc } from 'src/utils';\n\n@Component({\n    tag: 'q2-carousel-pane',\n    shadow: false,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Carousel implements ComponentInterface {\n    /**\n     * Used by q2-carousel to determine the pane's index\n     * @private\n     */\n    @Prop({ reflect: false }) index: number;\n    /**\n     * Used by q2-carousel to indicate how many panes are in the carousel\n     * @private\n     */\n    @Prop({ reflect: false }) siblingCount: number;\n    /**\n     * Used by q2-carousel to indicate which pane is currently active\n     * @private\n     */\n    @Prop({ reflect: true }) isActivePane: boolean;\n    @Prop({ reflect: true }) label: string;\n    @Element() hostElement: HTMLElement;\n\n    get currentPaneIndex() {\n        return Array.prototype.indexOf.call(this.hostElement.parentElement.children, this.hostElement);\n    }\n\n    componentDidLoad(): void {\n        this.determineDisabledContent();\n    }\n\n    generatePaneClass = (currentIndex: number) => {\n        return `q2-carousel-pane swiper-slide q2-carousel-pane-${currentIndex}`;\n    };\n\n    @Event() clickCarouselPane: EventEmitter;\n\n    paneClicked = event => {\n        if (this.isActivePane) return;\n        event.preventDefault();\n        this.clickCarouselPane.emit({\n            paneIndex: this.index,\n            pane: this.hostElement,\n        });\n    };\n\n    @Watch('isActivePane')\n    determineDisabledContent() {\n        const { isActivePane } = this;\n        const focusableElements = this.hostElement.querySelectorAll<HTMLElement>(\n            'q2-btn, 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.dataset.q2Tabindex = `${element.tabIndex}`;\n            }\n\n            if (isActivePane) {\n                if (element.hasAttribute('data-q2-tabindex')) {\n                    element.tabIndex = parseInt(element.getAttribute('data-q2-tabindex'));\n                    element.removeAttribute('data-q2-tabindex');\n                } else if (element.tagName.startsWith('Q2-')) {\n                    element.tabIndex = undefined;\n                } else {\n                    element.removeAttribute('tabindex');\n                }\n            } else {\n                element.tabIndex = -1;\n            }\n        });\n    }\n\n    render() {\n        const { label } = this;\n\n        return (\n            <Host\n                class={this.generatePaneClass(this.currentPaneIndex)}\n                tabIndex={this.isActivePane ? 0 : -1}\n                role=\"group\"\n                aria-roledescription=\"slide\"\n                aria-hidden={this.isActivePane ? undefined : 'true'}\n                aria-label={\n                    label\n                        ? loc(label)\n                        : loc('tecton.element.carousel.itemDescription', [\n                              (this.currentPaneIndex + 1).toString(),\n                              (this.siblingCount || 0).toString(),\n                          ])\n                }\n                onClick={this.paneClicked}\n            >\n                <article class=\"q2-carousel-pane-main-content\">\n                    <slot></slot>\n                </article>\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"q2-carousel-pane.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,63EAA63E;;MCQl4E,UAAU;;;;IA2BnB,sBAAiB,GAAG,CAAC,YAAoB;MACrC,OAAO,kDAAkD,YAAY,EAAE,CAAC;KAC3E,CAAC;IAOF,gBAAW,GAAG,KAAK;MACf,IAAI,IAAI,CAAC,YAAY;QAAE,OAAO;MAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;MACvB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;QACxB,SAAS,EAAE,IAAI,CAAC,KAAK;QACrB,IAAI,EAAE,IAAI,CAAC,WAAW;OACzB,CAAC,CAAC;KACN,CAAC;;;;;;EAxBF,IAAI,gBAAgB;IAChB,OAAO,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,QAAQ,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;GAClG;EAED,gBAAgB;IACZ,IAAI,CAAC,wBAAwB,EAAE,CAAC;GACnC;EAqBD,wBAAwB;IACpB,MAAM,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;IAC9B,MAAM,iBAAiB,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CACvD,0DAA0D,CAC7D,CAAC;IAEF,iBAAiB,CAAC,OAAO,CAAC,OAAO;MAC7B,MAAM,gBAAgB,GAClB,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC;MAExF,IAAI,gBAAgB,EAAE;QAClB,OAAO,CAAC,OAAO,CAAC,UAAU,GAAG,GAAG,OAAO,CAAC,QAAQ,EAAE,CAAC;OACtD;MAED,IAAI,YAAY,EAAE;QACd,IAAI,OAAO,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAAE;UAC1C,OAAO,CAAC,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC,CAAC;UACtE,OAAO,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;SAC/C;aAAM,IAAI,OAAO,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE;UAC1C,OAAO,CAAC,QAAQ,GAAG,SAAS,CAAC;SAChC;aAAM;UACH,OAAO,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;SACvC;OACJ;WAAM;QACH,OAAO,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;OACzB;KACJ,CAAC,CAAC;GACN;EAED,MAAM;IACF,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAEvB,QACI,EAAC,IAAI,IACD,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,gBAAgB,CAAC,EACpD,QAAQ,EAAE,IAAI,CAAC,YAAY,GAAG,CAAC,GAAG,CAAC,CAAC,EACpC,IAAI,EAAC,OAAO,0BACS,OAAO,iBACf,IAAI,CAAC,YAAY,GAAG,SAAS,GAAG,MAAM,gBAE/C,KAAK;UACC,GAAG,CAAC,KAAK,CAAC;UACV,GAAG,CAAC,yCAAyC,EAAE;UAC3C,CAAC,IAAI,CAAC,gBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAE;UACtC,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,EAAE,QAAQ,EAAE;SACtC,CAAC,EAEZ,OAAO,EAAE,IAAI,CAAC,WAAW,IAEzB,eAAS,KAAK,EAAC,+BAA+B,IAC1C,eAAa,CACP,CACP,EACT;GACL;;;;;;;;;;","names":[],"sources":["./src/components/q2-carousel-pane/styles.scss?tag=q2-carousel-pane","./src/components/q2-carousel-pane/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\nq2-carousel .swiper-slide {\n    flex-shrink: 0;\n    width: 100%;\n    height: 100%;\n    position: relative;\n    transition-property: transform;\n    transition: all 0.2s;\n}\n\nq2-carousel-pane.q2-carousel-pane {\n    --comp-carousel-pane-tween: #{var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n    --comp-carousel-shadow: #{var-list(--app-shadow-2, unquote('0px 2px 8px 0px var(--t-top-a1, rgba(0, 0, 0, 0.25))'))};\n\n    cursor: grab;\n\n    &:not([is-active-pane]) * {\n        cursor: pointer;\n    }\n\n    &:focus {\n        box-shadow: none;\n        .q2-carousel-pane-main-content {\n            outline: none;\n            box-shadow: var(--const-double-focus-ring);\n        }\n    }\n\n    button {\n        border: 0;\n        background: transparent;\n        transition: all 0.2s;\n        opacity: 0.3;\n        cursor: pointer;\n\n        &:hover {\n            opacity: 0.7;\n        }\n    }\n\n    .q2-carousel-pane-main-content {\n        box-shadow: var(--comp-carousel-shadow);\n        transition: var(--comp-carousel-pane-tween);\n        background: var-list(\n            --tct-carousel-background,\n            var-prefixer(carousel-background-color),\n            --tct-white,\n            --app-white,\n            #ffffff\n        );\n        border: var-list(var-prefixer(carousel-pane-border-width), 0px) solid\n            var-list(\n                var-prefixer(carousel-pane-border-color),\n                var-prefixer(gray-11),\n                --tct-gray-l1,\n                --app-gray-l1,\n                #cccccc\n            );\n        border-radius: var-list(var-prefixer(carousel-pane-border-radius), 8px);\n        padding: var-list(var-prefixer(carousel-pane-padding), unquote('0.5rem 0.5rem 0.5rem 0.5rem'));\n        height: var-list(var-prefixer(carousel-pane-height), 10em);\n    }\n\n    .q2-carousel-pane-main-content:hover {\n        box-shadow: var(--const-double-focus-ring), var(--comp-carousel-shadow);\n    }\n}\n","import { Component, ComponentInterface, Event, Element, Host, Watch, Prop, h, EventEmitter } from '@stencil/core';\nimport { loc } from 'src/utils';\n\n@Component({\n    tag: 'q2-carousel-pane',\n    shadow: false,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Carousel implements ComponentInterface {\n    /**\n     * Used by q2-carousel to determine the pane's index\n     * @private\n     */\n    @Prop({ reflect: false }) index: number;\n    /**\n     * Used by q2-carousel to indicate how many panes are in the carousel\n     * @private\n     */\n    @Prop({ reflect: false }) siblingCount: number;\n    /**\n     * Used by q2-carousel to indicate which pane is currently active\n     * @private\n     */\n    @Prop({ reflect: true }) isActivePane: boolean;\n    @Prop({ reflect: true }) label: string;\n    @Element() hostElement: HTMLElement;\n\n    get currentPaneIndex() {\n        return Array.prototype.indexOf.call(this.hostElement.parentElement.children, this.hostElement);\n    }\n\n    componentDidLoad(): void {\n        this.determineDisabledContent();\n    }\n\n    generatePaneClass = (currentIndex: number) => {\n        return `q2-carousel-pane swiper-slide q2-carousel-pane-${currentIndex}`;\n    };\n\n    /**\n     * Emitted when the pane is clicked.\n     */\n    @Event() clickCarouselPane: EventEmitter<{ paneIndex: number; pane: HTMLElement }>;\n\n    paneClicked = event => {\n        if (this.isActivePane) return;\n        event.preventDefault();\n        this.clickCarouselPane.emit({\n            paneIndex: this.index,\n            pane: this.hostElement,\n        });\n    };\n\n    @Watch('isActivePane')\n    determineDisabledContent() {\n        const { isActivePane } = this;\n        const focusableElements = this.hostElement.querySelectorAll<HTMLElement>(\n            'q2-btn, 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.dataset.q2Tabindex = `${element.tabIndex}`;\n            }\n\n            if (isActivePane) {\n                if (element.hasAttribute('data-q2-tabindex')) {\n                    element.tabIndex = parseInt(element.getAttribute('data-q2-tabindex'));\n                    element.removeAttribute('data-q2-tabindex');\n                } else if (element.tagName.startsWith('Q2-')) {\n                    element.tabIndex = undefined;\n                } else {\n                    element.removeAttribute('tabindex');\n                }\n            } else {\n                element.tabIndex = -1;\n            }\n        });\n    }\n\n    render() {\n        const { label } = this;\n\n        return (\n            <Host\n                class={this.generatePaneClass(this.currentPaneIndex)}\n                tabIndex={this.isActivePane ? 0 : -1}\n                role=\"group\"\n                aria-roledescription=\"slide\"\n                aria-hidden={this.isActivePane ? undefined : 'true'}\n                aria-label={\n                    label\n                        ? loc(label)\n                        : loc('tecton.element.carousel.itemDescription', [\n                              (this.currentPaneIndex + 1).toString(),\n                              (this.siblingCount || 0).toString(),\n                          ])\n                }\n                onClick={this.paneClicked}\n            >\n                <article class=\"q2-carousel-pane-main-content\">\n                    <slot></slot>\n                </article>\n            </Host>\n        );\n    }\n}\n"],"version":3}

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-ebc7f269.js';
-import { c as createGuid, l as loc, h as handleAriaLabel, i as isEventFromElement, o as overrideFocus } from './index-84f1034e.js';
+import { c as createGuid, l as loc, h as handleAriaLabel, i as isEventFromElement, o as overrideFocus } from './index-fbe28822.js';
 
 /**
  * SSR Window 4.0.2
@@ -5040,6 +5040,9 @@ const Q2Carousel = class {
     // COMPUTED //
     this.guid = createGuid();
     // METHODS //
+    this.onMutationObserved = () => {
+      this.organizePanes();
+    };
     this.setCarouselWrapperWidth = () => {
       if (this.insufficientPanes)
         return;
@@ -5056,6 +5059,8 @@ const Q2Carousel = class {
       this.autoPlayInProgress = this.autoPlay;
       this.swiper = new Swiper(carouselWrapper, carouselOptions);
       (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.slideTo(this.realIndex);
+      if (this.autoPlayInProgress)
+        this.swiper.autoplay.start();
     };
     this.tearDownCarousel = () => {
       this.swiper.destroy();
@@ -5067,6 +5072,7 @@ const Q2Carousel = class {
         pane.siblingCount = this.paneCollection.length;
         pane.isActivePane = index === this.activePaneIndex;
       });
+      this.currentPaneCount = this.paneCollection.length;
     };
     this.handleAutoPlayPause = () => {
       const { swiper: { autoplay }, } = this;
@@ -5202,8 +5208,10 @@ const Q2Carousel = class {
         activeIndexChange: swiper => {
           this.activePaneIndex = swiper.activeIndex;
           this.organizePanes();
-          const isPaginationFocused = document.activeElement.closest(`#q2-carousel-${this.guid} .q2-carousel-page-indicator`);
-          const isCarouselFocused = document.activeElement.closest(`#q2-carousel-${this.guid} q2-carousel-pane`);
+          const isPaginationFocused = !!document.activeElement.closest(`#q2-carousel-${this.guid} .q2-carousel-page-indicator`);
+          const isCarouselFocused = !!document.activeElement.closest(`#q2-carousel-${this.guid} q2-carousel-pane`);
+          const isFocused = isPaginationFocused || isCarouselFocused;
+          this.handleAriaLive(isFocused);
           if (isPaginationFocused) {
             this.paginationBtns[swiper.activeIndex].focus({ preventScroll: true });
           }
@@ -5221,6 +5229,8 @@ const Q2Carousel = class {
     this.autoPlayInProgress = false;
     this.compactMode = false;
     this.carouselWrapperWidth = 0;
+    this.ariaLiveValue = 'polite';
+    this.currentPaneCount = this.paneCount;
   }
   ariaLabelObserver() {
     handleAriaLabel(this);
@@ -5280,6 +5290,14 @@ const Q2Carousel = class {
       return;
     activePane.focus({ preventScroll: true });
   }
+  handleAriaLive(activeAndFocused) {
+    if (this.autoPlayInProgress && !activeAndFocused) {
+      this.ariaLiveValue = 'off';
+    }
+    else {
+      this.ariaLiveValue = 'polite';
+    }
+  }
   // LIFECYCLES //
   componentWillLoad() {
     handleAriaLabel(this);
@@ -5291,9 +5309,17 @@ const Q2Carousel = class {
     if (this.carouselWrapper && !!this.paneArray.length) {
       this.configureCarousel(this.carouselWrapper, this.activeCarouselOptions);
     }
+    const observer = new MutationObserver(this.onMutationObserved);
+    observer.observe(this.hostElement, { childList: true });
+    this.mutationObserver = observer;
+    this.onMutationObserved();
     overrideFocus(this.hostElement);
   }
   disconnectedCallback() {
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+      this.mutationObserver = null;
+    }
     if (!!this.swiper) {
       this.tearDownCarousel();
     }
@@ -5310,7 +5336,7 @@ const Q2Carousel = class {
     let paginationWrapperClasses = ['q2-carousel-pagination-navigation-wrapper'];
     if (this.showNavigationArrows)
       paginationWrapperClasses = [...paginationWrapperClasses, 'evenly-space'];
-    return (h(Host, { id: `q2-carousel-${this.guid}`, class: "q2-carousel-instance" }, this.insufficientPanes ? (this.insufficientPanesDisplay()) : (h(Fragment, null, this.paneCount > 1 && (h("div", { class: paginationWrapperClasses.join(' ') }, this.showNavigationArrows && this.prevNavBtn(), h("div", { class: "q2-carousel-control-center-tray" }, !this.hidePagination && this.paginationArea(), this.autoPlay && this.autoPlayBtn()), this.showNavigationArrows && this.nextNavBtn())), h("section", { class: carouselContainerClasses.join(' '), ref: el => (this.carouselWrapper = el), "aria-roledescription": "carousel", "aria-label": loc(this.label) }, h("div", { class: "q2-carousel-swiper-wrapper swiper-wrapper", ref: el => (this.carouselPaneWrapperElement = el), "aria-live": this.autoPlayInProgress ? 'off' : 'polite', onKeyDown: this.onWrapperKeyDown }, h("slot", null)))))));
+    return (h(Host, { id: `q2-carousel-${this.guid}`, class: "q2-carousel-instance" }, this.insufficientPanes ? (this.insufficientPanesDisplay()) : (h(Fragment, null, this.paneCount > 1 && (h("div", { class: paginationWrapperClasses.join(' ') }, this.showNavigationArrows && this.prevNavBtn(), h("div", { class: "q2-carousel-control-center-tray" }, !this.hidePagination && this.paginationArea(), this.autoPlay && this.autoPlayBtn()), this.showNavigationArrows && this.nextNavBtn())), h("section", { class: carouselContainerClasses.join(' '), ref: el => (this.carouselWrapper = el), "aria-roledescription": "carousel", "aria-label": loc(this.label) }, h("div", { class: "q2-carousel-swiper-wrapper swiper-wrapper", ref: el => (this.carouselPaneWrapperElement = el), "aria-live": this.ariaLiveValue, onKeyDown: this.onWrapperKeyDown }, h("slot", null)))))));
   }
   get hostElement() { return getElement(this); }
   static get watchers() { return {