q2-tecton-elements 1.57.0 → 1.58.0

package/dist/components/q2-stepper.js

@@ -4,7 +4,7 @@ import { d as defineCustomElement$4 } from './q2-btn2.js';
 import { d as defineCustomElement$3 } from './q2-icon2.js';
 import { d as defineCustomElement$2 } from './q2-loading2.js';
 
-const q2StepperCss = "*{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;position:relative}ul{--comp-bullet-background:var(--tct-stepper-bullet-active-background, var(--tct-stepper-bullet-active-bg, var(--t-stepper-bullet-active-bg, var(--t-primary, #0079c1))));--comp-bullet-font-color:var(--tct-stepper-bullet-active-font-color, var(--t-stepper-bullet-active-font-color, var(--t-primary-font-color, #ffffff)));--comp-bullet-size:var(--tct-stepper-btn-icon-size, var(--t-stepper-btn-icon-size, 24px));--comp-bullet-gap:var(--tct-stepper-btn-gap, var(--t-stepper-btn-gap, var(--app-scale-3x, 15px)));--comp-bullet-font-size:var(--tct-stepper-btn-label-font-size, var(--t-stepper-btn-label-font-size, 16px));--comp-step-width:var(--tct-stepper-step-width, var(--t-stepper-step-width, var(--t-stepper-step-width, 80px)));--comp-step-gap:var(--tct-stepper-step-gap, var(--t-stepper-step-gap, 5px));--comp-btn-icon-size:var(--tct-stepper-btn-icon-size, var(--t-stepper-btn-icon-size, 24px));--comp-btn-label-font-size:var(--tct-stepper-btn-label-font-size, var(--t-stepper-btn-label-font-size, 16px));--comp-tween:var(--tct-stepper-tween, var(--t-stepper-tween, var(--app-tween-1, 0.2s ease)));overflow-x:auto;display:flex;justify-content:center;list-style:none;padding:0;padding:var(--tct-stepper-list-padding, var(--t-stepper-list-padding, 2px));margin:0;gap:var(--comp-step-gap);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}ul::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}ul::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}ul::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.has-scroll ul{justify-content:unset}li{min-height:var(--tct-stepper-min-height, var(--t-stepper-min-height, 50px));flex:0 0 auto;position:relative;width:var(--comp-step-width);text-align:center;max-width:150px;min-width:80px}.step-btn{position:relative;background:transparent;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;height:calc(100% - 4px);width:100%;transition:var(--comp-tween);padding:0;transition-property:box-shadow;outline:none;margin-top:2px;--comp-active-color:var(--comp-bullet-background)}.step-btn.status-complete{--comp-active-color:var(--const-stoplight-success, #0e8a00);--tct-stoplight-success:var(--comp-active-color)}.step-btn.status-error{--comp-active-color:var(--const-stoplight-alert, #d20a0a);--tct-stoplight-warning:var(--comp-active-color)}.step-btn[aria-disabled]{cursor:not-allowed}.step-btn[aria-disabled],.step-btn[aria-disabled]+.step-divider{--comp-bullet-font-color:var(--tct-stepper-bullet-inactive-font-color, var(--t-stepper-bullet-inactive-font-color, var(--t-text, #4d4d4d)));--comp-bullet-background:var(--tct-stepper-bullet-inactive-background, var(--tct-stepper-bullet-inactive-bg, var(--t-stepper-bullet-inactive-bg, var(--t-gray-12, #d9d9d9))))}.step-icon,.step-bubble{display:flex;justify-content:center;align-items:center;line-height:0;margin:var(--comp-bullet-gap) auto;color:var(--comp-bullet-font-color);width:var(--comp-btn-icon-size);height:var(--comp-btn-icon-size);min-height:var(--comp-btn-icon-size);font-size:var(--comp-bullet-font-size);transition:var(--comp-tween);transition-property:background, color;border-radius:50%;position:relative}.step-icon q2-icon,.step-bubble q2-icon{--tct-icon-fill:var(--comp-active-color)}.step-icon q2-icon:before,.step-bubble q2-icon:before{content:\"\";display:block;background:var(--comp-bullet-font-color);position:absolute;width:80%;height:80%;left:11%;top:11%;border-radius:50%}.status-complete .step-icon,.status-error .step-icon,.status-complete .step-bubble,.status-error .step-bubble{background:var(--comp-active-color)}[aria-selected] .step-icon,[aria-selected] .step-bubble{box-shadow:0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);font-weight:var(--tct-stepper-bullet-active-font-weight, var(--t-stepper-bullet-active-font-weight, 600))}.step-bubble{background:var(--comp-bullet-background)}.step-divider{width:calc(var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size));top:calc(var(--comp-bullet-size) / 2 + var(--comp-bullet-gap));left:calc(var(--comp-step-width) * -0.5 + var(--comp-step-gap) + var(--comp-bullet-gap));border:0;border-top:1px solid var(--comp-bullet-background);height:0;position:absolute;margin:0;transition:border var(--comp-tween)}.step-container{position:relative}.step-label{color:var(--tct-stepper-label-color, var(--tct-stepper-title-color, var(--t-stepper-title-color, var(--t-text, #4d4d4d))));font-size:var(--tct-stepper-label-font-size, var(--tct-stepper-title-font-size, var(--t-stepper-title-font-size, var(--app-font-size-small, 12px))));line-height:var(--tct-stepper-label-line-height, 1.5em);text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-label-line-count, 2);-webkit-box-orient:vertical}[aria-selected] .step-label{font-weight:var(--tct-stepper-active-font-weight, var(--t-stepper-active-font-weight, 600))}[aria-describedby] .step-label{-webkit-line-clamp:var(--tct-stepper-label-line-count, 1)}.step-description{color:var(--tct-stepper-description-color, var(--t-stepper-description-color, var(--t-textA, rgba(77, 77, 77, 0.77))));font-size:var(--tct-stepper-description-font-size, var(--t-stepper-description-font-size, var(--app-font-size-small, 12px)));text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-description-line-count, 4);-webkit-box-orient:vertical;padding-bottom:0.2em}.step-description .ellipsize{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:var(--comp-step-width);display:block}.gradient-left,.gradient-right{z-index:1;position:absolute;top:0;height:100%;width:18px}.gradient-left{background-image:linear-gradient(to left, var(--t-base-a0, rgba(255, 255, 255, 0)), var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%, var(--t-base, #ffffff) 100%);left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0, rgba(255, 255, 255, 0)), var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%, var(--t-base, #ffffff) 100%);right:0}.btn-left,.btn-right{--tct-icon-size:18px;--tct-btn-icon-hover-background:transparent;--tct-btn-icon-width:22px;--tct-icon-stroke-primary:var(--tct-stepper-scroll-arrow-color, var(--t-stepper-scroll-arrow-color, var(--t-text, #4d4d4d)));position:absolute;top:calc(50% - 22px);z-index:2}.btn-left q2-icon,.btn-right q2-icon{--tct-icon-stroke-width:3}.btn-left{left:0}.btn-right{right:0}";
+const q2StepperCss = "*{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;position:relative}ul{--comp-bullet-background:var(--tct-stepper-bullet-active-background, var(--tct-stepper-bullet-active-bg, var(--t-stepper-bullet-active-bg, var(--t-primary, #0079c1))));--comp-bullet-font-color:var(--tct-stepper-bullet-active-font-color, var(--t-stepper-bullet-active-font-color, var(--t-primary-font-color, #ffffff)));--comp-bullet-size:var(--tct-stepper-btn-icon-size, var(--t-stepper-btn-icon-size, 24px));--comp-bullet-gap:var(--tct-stepper-btn-gap, var(--t-stepper-btn-gap, var(--app-scale-3x, 15px)));--comp-bullet-font-size:var(--tct-stepper-btn-label-font-size, var(--t-stepper-btn-label-font-size, 16px));--comp-step-width:var(--tct-stepper-step-width, var(--t-stepper-step-width, var(--t-stepper-step-width, 80px)));--comp-step-gap:var(--tct-stepper-step-gap, var(--t-stepper-step-gap, 5px));--comp-btn-icon-size:var(--tct-stepper-btn-icon-size, var(--t-stepper-btn-icon-size, 24px));--comp-btn-label-font-size:var(--tct-stepper-btn-label-font-size, var(--t-stepper-btn-label-font-size, 16px));--comp-tween:var(--tct-stepper-tween, var(--t-stepper-tween, var(--app-tween-1, 0.2s ease)));overflow-x:auto;display:flex;justify-content:center;list-style:none;padding:0;padding:var(--tct-stepper-list-padding, var(--t-stepper-list-padding, 2px));margin:0;gap:var(--comp-step-gap);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}ul::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}ul::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}ul::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.has-scroll ul{justify-content:unset}li{min-height:var(--tct-stepper-min-height, var(--t-stepper-min-height, 50px));flex:0 0 auto;position:relative;width:var(--comp-step-width);text-align:center;max-width:150px;min-width:80px}.step-btn{position:relative;background:transparent;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;height:calc(100% - 4px);width:100%;transition:var(--comp-tween);padding:0;transition-property:box-shadow;outline:none;margin-top:2px;--comp-active-color:var(--comp-bullet-background)}.step-btn.status-complete{--comp-active-color:var(--const-stoplight-success, #0e8a00);--tct-stoplight-success:var(--comp-active-color)}.step-btn.status-error{--comp-active-color:var(--const-stoplight-alert, #d20a0a);--tct-stoplight-warning:var(--comp-active-color)}.step-btn[aria-disabled=true]{cursor:not-allowed}.step-btn[aria-disabled=true],.step-btn[aria-disabled=true]+.step-divider{--comp-bullet-font-color:var(--tct-stepper-bullet-inactive-font-color, var(--t-stepper-bullet-inactive-font-color, var(--t-text, #4d4d4d)));--comp-bullet-background:var(--tct-stepper-bullet-inactive-background, var(--tct-stepper-bullet-inactive-bg, var(--t-stepper-bullet-inactive-bg, var(--t-gray-12, #d9d9d9))))}.step-icon,.step-bubble{display:flex;justify-content:center;align-items:center;line-height:0;margin:var(--comp-bullet-gap) auto;color:var(--comp-bullet-font-color);width:var(--comp-btn-icon-size);height:var(--comp-btn-icon-size);min-height:var(--comp-btn-icon-size);font-size:var(--comp-bullet-font-size);transition:var(--comp-tween);transition-property:background, color;border-radius:50%;position:relative}.step-icon q2-icon,.step-bubble q2-icon{--tct-icon-fill:var(--comp-active-color)}.step-icon q2-icon:before,.step-bubble q2-icon:before{content:\"\";display:block;background:var(--comp-bullet-font-color);position:absolute;width:80%;height:80%;left:11%;top:11%;border-radius:50%}.status-complete .step-icon,.status-error .step-icon,.status-complete .step-bubble,.status-error .step-bubble{background:var(--comp-active-color)}[aria-selected=true] .step-icon,[aria-selected=true] .step-bubble{box-shadow:0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);font-weight:var(--tct-stepper-bullet-active-font-weight, var(--t-stepper-bullet-active-font-weight, 600))}.step-bubble{background:var(--comp-bullet-background)}.step-divider{width:calc(var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size));top:calc(var(--comp-bullet-size) / 2 + var(--comp-bullet-gap));left:calc(var(--comp-step-width) * -0.5 + var(--comp-step-gap) + var(--comp-bullet-gap));border:0;border-top:1px solid var(--comp-bullet-background);height:0;position:absolute;margin:0;transition:border var(--comp-tween)}.step-container{position:relative}.step-label{color:var(--tct-stepper-label-color, var(--tct-stepper-title-color, var(--t-stepper-title-color, var(--t-text, #4d4d4d))));font-size:var(--tct-stepper-label-font-size, var(--tct-stepper-title-font-size, var(--t-stepper-title-font-size, var(--app-font-size-small, 12px))));line-height:var(--tct-stepper-label-line-height, 1.5em);text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-label-line-count, 2);-webkit-box-orient:vertical}[aria-selected] .step-label{font-weight:var(--tct-stepper-active-font-weight, var(--t-stepper-active-font-weight, 600))}[aria-describedby] .step-label{-webkit-line-clamp:var(--tct-stepper-label-line-count, 1)}.step-description{color:var(--tct-stepper-description-color, var(--t-stepper-description-color, var(--t-textA, rgba(77, 77, 77, 0.77))));font-size:var(--tct-stepper-description-font-size, var(--t-stepper-description-font-size, var(--app-font-size-small, 12px)));text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-description-line-count, 4);-webkit-box-orient:vertical;padding-bottom:0.2em}.step-description .ellipsize{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:var(--comp-step-width);display:block}.gradient-left,.gradient-right{z-index:1;position:absolute;top:0;height:100%;width:18px}.gradient-left{background-image:linear-gradient(to left, var(--t-base-a0, rgba(255, 255, 255, 0)), var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%, var(--t-base, #ffffff) 100%);left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0, rgba(255, 255, 255, 0)), var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%, var(--t-base, #ffffff) 100%);right:0}.btn-left,.btn-right{--tct-icon-size:18px;--tct-btn-icon-hover-background:transparent;--tct-btn-icon-width:22px;--tct-icon-stroke-primary:var(--tct-stepper-scroll-arrow-color, var(--t-stepper-scroll-arrow-color, var(--t-text, #4d4d4d)));position:absolute;top:calc(50% - 22px);z-index:2}.btn-left q2-icon,.btn-right q2-icon{--tct-icon-stroke-width:3}.btn-left{left:0}.btn-right{right:0}";
 
 const Q2Stepper$1 = /*@__PURE__*/ proxyCustomElement(class Q2Stepper extends HTMLElement {
     constructor() {
@@ -19,10 +19,6 @@ const Q2Stepper$1 = /*@__PURE__*/ proxyCustomElement(class Q2Stepper extends HTM
         this.scrollEnabled = false;
         this.showScrollLeft = false;
         this.showScrollRight = false;
-        // #endregion
-        // #region Public Property API
-        /** The currently selected step. */
-        this.currentStep = 1;
         this.checkForPanes = () => {
             const { allPanes } = this;
             if (!allPanes.length)
@@ -95,13 +91,15 @@ const Q2Stepper$1 = /*@__PURE__*/ proxyCustomElement(class Q2Stepper extends HTM
         this.resizeObserver = null;
     }
     componentWillLoad() {
-        if (!this.lastEnabledStep)
-            this.lastEnabledStep = this.currentStep || 1;
-        this.resizeObserver = new ResizeObserver(() => this.checkScrollState());
+        this.handleUndefinedStepProperties();
+        if ('ResizeObserver' in window) {
+            this.resizeObserver = new ResizeObserver(() => this.checkScrollState());
+        }
         this.checkForPanes();
     }
     componentDidLoad() {
-        this.resizeObserver.observe(this.listElement);
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.listElement);
         this.checkScrollState();
         overrideFocus(this.hostElement);
         setTimeout(() => this.showStep(this.currentStep || 1), 0);
@@ -171,6 +169,9 @@ const Q2Stepper$1 = /*@__PURE__*/ proxyCustomElement(class Q2Stepper extends HTM
     }
     // #endregion
     // #region Watchers
+    lastEnabledStepChanged() {
+        this.handleUndefinedStepProperties();
+    }
     currentStepChanged(stepNumber) {
         this.showStep(stepNumber);
     }
@@ -181,7 +182,10 @@ const Q2Stepper$1 = /*@__PURE__*/ proxyCustomElement(class Q2Stepper extends HTM
     }
     focusStep(stepNumber, scrollIntoView, forceFocus) {
         var _a;
-        const stepListItem = this.listElement.children[stepNumber - 1];
+        const { listElement } = this;
+        if (!listElement)
+            return;
+        const stepListItem = listElement.children[stepNumber - 1];
         const isActive = document.activeElement === this.hostElement;
         if (!stepListItem)
             return;
@@ -198,9 +202,24 @@ const Q2Stepper$1 = /*@__PURE__*/ proxyCustomElement(class Q2Stepper extends HTM
     }
     getPaneSlotOrProperty(pane, slotName) {
         var _a;
-        const slot = pane.querySelector(`:scope > [slot="${slotName}"]`);
+        const slot = Array.from(pane.children).find(child => child.getAttribute('slot') === slotName);
         return (_a = slot === null || slot === void 0 ? void 0 : slot.outerHTML) !== null && _a !== void 0 ? _a : loc(pane[slotName]);
     }
+    handleUndefinedStepProperties() {
+        const { currentStep, lastEnabledStep } = this;
+        if (currentStep && lastEnabledStep)
+            return;
+        if (!currentStep && lastEnabledStep) {
+            this.currentStep = lastEnabledStep;
+        }
+        else if (currentStep && !lastEnabledStep) {
+            this.lastEnabledStep = currentStep;
+        }
+        else if (!currentStep && !lastEnabledStep) {
+            this.currentStep = 1;
+            this.lastEnabledStep = 1;
+        }
+    }
     resizeIframe() {
         var _a, _b;
         return (_b = (_a = window === null || window === void 0 ? void 0 : window.TectonElements) === null || _a === void 0 ? void 0 : _a.resizeIframe) === null || _b === void 0 ? void 0 : _b.call(_a);
@@ -229,7 +248,7 @@ const Q2Stepper$1 = /*@__PURE__*/ proxyCustomElement(class Q2Stepper extends HTM
     // #region Render Methods
     renderStepBtn(stepIndex) {
         var _a;
-        const { allPanes, stepCount, currentStep, lastEnabledStep } = this;
+        const { allPanes, stepCount, lastEnabledStep, currentStep } = this;
         const pane = (_a = allPanes === null || allPanes === void 0 ? void 0 : allPanes[stepIndex]) !== null && _a !== void 0 ? _a : null;
         const { id, status } = pane;
         const label = this.getPaneSlotOrProperty(pane, 'label');
@@ -249,23 +268,24 @@ const Q2Stepper$1 = /*@__PURE__*/ proxyCustomElement(class Q2Stepper extends HTM
             stepClasses.push(`status-${status}`);
         const isLocked = status === 'locked';
         const disabled = isLocked || stepNumber > lastEnabledStep;
-        return (h("li", { role: "presentation" }, h("button", { class: stepClasses.join(' '), type: "button", "aria-labelledby": labelId, "aria-describedBy": descriptionId, "aria-label": btnLabel, "aria-selected": isCurrentStep, "aria-disabled": disabled ? 'true' : null, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => this.onStepKeyDown(ev, stepNumber), onClick: ev => !isLocked && this.onStepClick(ev, stepNumber) }, h(Fragment, null, statusIcon ? (h("div", { class: "step-icon" }, h("q2-icon", { type: statusIcon }))) : (h("div", { class: "step-bubble" }, stepNumber)), labelId && (h("div", { class: "step-label", id: labelId, innerHTML: label })), labelId && descriptionId && (h("div", { class: "step-description", id: descriptionId, innerHTML: description })))), stepIndex ? h("div", { class: "step-divider" }) : ''));
+        return (h("li", { role: "presentation" }, h("button", { class: stepClasses.join(' '), type: "button", "aria-labelledby": labelId, "aria-describedBy": descriptionId, "aria-label": btnLabel, "aria-selected": `${isCurrentStep}`, "aria-disabled": disabled ? 'true' : undefined, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => this.onStepKeyDown(ev, stepNumber), onClick: ev => !isLocked && this.onStepClick(ev, stepNumber) }, h(Fragment, null, statusIcon ? (h("div", { class: "step-icon" }, h("q2-icon", { type: statusIcon }))) : (h("div", { class: "step-bubble" }, stepNumber)), labelId && (h("div", { class: "step-label", id: labelId, innerHTML: label })), labelId && descriptionId && (h("div", { class: "step-description", id: descriptionId, innerHTML: description })))), stepIndex ? h("div", { class: "step-divider" }) : ''));
     }
     render() {
         const { stepCount, scrollEnabled, showScrollLeft, showScrollRight } = this;
         const containerClasses = ['step-container'];
         if (scrollEnabled)
             containerClasses.push('has-scroll');
-        return (h(Fragment, { key: '23e6e0e9e079c1e18ce39fa878430b2bf374405a' }, h("div", { key: 'b617d704664c3239fd7b7639921d1bd66f255680', class: containerClasses.join(' ') }, scrollEnabled && (h(Fragment, { key: '9e95ebf283fd2abc63bbb7923573664d5454324d' }, h("div", { key: 'cb7b36ce96458489a73e56ec798999f4b56d04e5', class: "gradient-left", hidden: !showScrollLeft }), h("div", { key: '7ce953d6871d7fe73c917cc8e7223309f85ae7c9', class: "gradient-right", hidden: !showScrollRight }), h("q2-btn", { key: 'd47851363600d09782929b352432eddf11927653', class: "btn-left", hideLabel: true, hidden: !this.showScrollLeft, label: loc('tecton.element.stepper.scrollLeft'), onClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: 'd5174da86d03a3160f217af5ffb459ac95740cc5', type: "chevron-left" })), h("q2-btn", { key: 'c6679bc830b492ecd30e90da208589760b17d108', class: "btn-right", hideLabel: true, hidden: !this.showScrollRight, label: loc('tecton.element.stepper.scrollRight'), onClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: '49342651b4b294c5e39f49d8658470c43cd48ced', type: "chevron-right" })))), h("ul", { key: 'c7747f9c5cc0ec2e9f2f72cb44d1c7dd95b0b780', onScroll: this.checkScrollState, ref: el => (this.listElement = el), role: "tablist" }, stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex)))), h("div", { key: 'a33649919a2b1071a8c47bd0fb494c21b9b40a5a', role: "list" }, h("slot", { key: 'bcdcff0df8c9b39aa4d69d740e5a3e158b298ae5', onSlotchange: () => this.onSlotChange() }))));
+        return (h(Fragment, { key: '5419df95b8f6501a52fae65fe7473513ca81bc84' }, h("div", { key: 'b6d1b59979dba27d84a9c5632f5203ff7c935ba9', class: containerClasses.join(' ') }, scrollEnabled && (h(Fragment, { key: 'daba3f6608fa3a71e872dd6b02b73abde53c0973' }, h("div", { key: '3521716d2d23b250ca5b5f2b97820a5d4ce289f1', class: "gradient-left", hidden: !showScrollLeft }), h("div", { key: 'beb574a341d72d9c70800d722680c27fef9ebad1', class: "gradient-right", hidden: !showScrollRight }), h("q2-btn", { key: '7841ab895a979cf9f41fe3e4b5ae399253ef2d08', class: "btn-left", hideLabel: true, hidden: !this.showScrollLeft, label: loc('tecton.element.stepper.scrollLeft'), onClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: 'f8aa5bdbf75089a8d296ddc286c0d58ad4081da0', type: "chevron-left" })), h("q2-btn", { key: '3145907a7dd4a2faaa834b1c9148df290a6bf5b3', class: "btn-right", hideLabel: true, hidden: !this.showScrollRight, label: loc('tecton.element.stepper.scrollRight'), onClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: '34c21546af1346207d5328c1b3e0574a4075936e', type: "chevron-right" })))), h("ul", { key: '159c1e3aad8449e5c6cae383a1314f4e2e44ecae', onScroll: this.checkScrollState, ref: el => (this.listElement = el), role: "tablist" }, stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex)))), h("div", { key: '1ac4aec1790a0145490d83defdb1b9466fefa689', role: "list" }, h("slot", { key: 'fec3540f019574052f87b2a96aed47dca5cae8fc', onSlotchange: () => this.onSlotChange() }))));
     }
     get hostElement() { return this; }
     static get watchers() { return {
-        "currentStep": ["currentStepChanged"]
+        "lastEnabledStep": ["lastEnabledStepChanged"],
+        "currentStep": ["lastEnabledStepChanged", "currentStepChanged"]
     }; }
     static get style() { return q2StepperCss; }
 }, [1, "q2-stepper", {
         "currentStep": [1538, "current-step"],
-        "lastEnabledStep": [1026, "last-enabled-step"],
+        "lastEnabledStep": [1538, "last-enabled-step"],
         "stepCount": [1026, "step-count"],
         "contentChangeTriggerCount": [32],
         "scrollEnabled": [32],
@@ -273,7 +293,8 @@ const Q2Stepper$1 = /*@__PURE__*/ proxyCustomElement(class Q2Stepper extends HTM
         "showScrollRight": [32],
         "selectStep": [64]
     }, [[0, "change", "defaultChangeHandler"], [0, "contentChange", "contentChangeHandler"], [0, "focus", "delegateFocus"], [0, "statusChange", "statusChangeHandler"]], {
-        "currentStep": ["currentStepChanged"]
+        "lastEnabledStep": ["lastEnabledStepChanged"],
+        "currentStep": ["lastEnabledStepChanged", "currentStepChanged"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/q2-stepper.js.map

@@ -1 +1 @@
-{"file":"q2-stepper.js","mappings":"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","names":["Q2Stepper","__stencil_proxyCustomElement"],"sources":["src/components/q2-stepper/q2-stepper.scss?tag=q2-stepper&encapsulation=shadow","src/components/q2-stepper/q2-stepper.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n    position: relative;\n}\n\nul {\n    --comp-bullet-background: #{var-list(\n            --tct-stepper-bullet-active-background,\n            var-prefixer(stepper-bullet-active-bg),\n            --t-primary,\n            #0079c1\n        )};\n    --comp-bullet-font-color: #{var-list(\n            var-prefixer(stepper-bullet-active-font-color),\n            --t-primary-font-color,\n            #ffffff\n        )};\n    --comp-bullet-size: #{var-list(var-prefixer(stepper-btn-icon-size), 24px)};\n    --comp-bullet-gap: #{var-list(var-prefixer(stepper-btn-gap), --app-scale-3x, 15px)};\n    --comp-bullet-font-size: #{var-list(var-prefixer(stepper-btn-label-font-size), 16px)};\n\n    --comp-step-width: #{var-list(var-prefixer(stepper-step-width), --t-stepper-step-width, 80px)};\n    --comp-step-gap: #{var-list(var-prefixer(stepper-step-gap), 5px)};\n    --comp-btn-icon-size: #{var-list(var-prefixer(stepper-btn-icon-size), 24px)};\n    --comp-btn-label-font-size: #{var-list(var-prefixer(stepper-btn-label-font-size), 16px)};\n    --comp-tween: #{var-list(var-prefixer(stepper-tween), --app-tween-1, unquote('0.2s ease'))};\n\n    overflow-x: auto;\n    display: flex;\n    justify-content: center;\n    list-style: none;\n    padding: 0;\n    padding: var-list(var-prefixer(stepper-list-padding), 2px);\n    margin: 0;\n    gap: var(--comp-step-gap);\n    @include tiny-scrollbar();\n\n    .has-scroll & {\n        justify-content: unset;\n    }\n}\n\nli {\n    min-height: var-list(var-prefixer(stepper-min-height), 50px);\n    flex: 0 0 auto;\n    position: relative;\n    width: var(--comp-step-width);\n    text-align: center;\n    max-width: 150px;\n    min-width: 80px;\n}\n\n.step-btn {\n    position: relative;\n    background: transparent;\n    border: 0;\n    cursor: pointer;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    height: calc(100% - 4px);\n    width: 100%;\n    transition: var(--comp-tween);\n    padding: 0;\n    transition-property: box-shadow;\n    outline: none;\n    margin-top: 2px;\n\n    --comp-active-color: var(--comp-bullet-background);\n    &.status-complete {\n        --comp-active-color: var(--const-stoplight-success, #0e8a00);\n        --tct-stoplight-success: var(--comp-active-color);\n    }\n    &.status-error {\n        --comp-active-color: var(--const-stoplight-alert, #d20a0a);\n        --tct-stoplight-warning: var(--comp-active-color);\n    }\n\n    &[aria-disabled] {\n        cursor: not-allowed;\n\n        &,\n        & + .step-divider {\n            --comp-bullet-font-color: #{var-list(var-prefixer(stepper-bullet-inactive-font-color), --t-text, #4d4d4d)};\n            --comp-bullet-background: #{var-list(\n                    --tct-stepper-bullet-inactive-background,\n                    var-prefixer(stepper-bullet-inactive-bg),\n                    --t-gray-12,\n                    #d9d9d9\n                )};\n        }\n    }\n}\n.step-icon,\n.step-bubble {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    line-height: 0;\n    margin: var(--comp-bullet-gap) auto;\n    color: var(--comp-bullet-font-color);\n    width: var(--comp-btn-icon-size);\n    height: var(--comp-btn-icon-size);\n    min-height: var(--comp-btn-icon-size);\n    font-size: var(--comp-bullet-font-size);\n    transition: var(--comp-tween);\n    transition-property: background, color;\n    border-radius: 50%;\n    position: relative;\n\n    q2-icon {\n        --tct-icon-fill: var(--comp-active-color);\n        &:before {\n            content: '';\n            display: block;\n            background: var(--comp-bullet-font-color);\n            position: absolute;\n            width: 80%;\n            height: 80%;\n            left: 11%;\n            top: 11%;\n            border-radius: 50%;\n        }\n    }\n    .status-complete &,\n    .status-error & {\n        background: var(--comp-active-color);\n    }\n    [aria-selected] & {\n        box-shadow:\n            0 0 0 2px var(--t-base, #ffffff),\n            0 0 0 4px var(--comp-active-color);\n        font-weight: var-list(var-prefixer(stepper-bullet-active-font-weight), 600);\n    }\n}\n\n.step-bubble {\n    background: var(--comp-bullet-background);\n}\n\n.step-divider {\n    width: calc(var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size));\n    top: calc(calc(var(--comp-bullet-size) / 2) + var(--comp-bullet-gap));\n    left: calc(calc(var(--comp-step-width) * -0.5) + var(--comp-step-gap) + var(--comp-bullet-gap));\n    border: 0;\n    border-top: 1px solid var(--comp-bullet-background);\n    height: 0;\n    position: absolute;\n    margin: 0;\n    transition: border var(--comp-tween);\n}\n\n.step-container {\n    position: relative;\n}\n\n.step-label {\n    color: var-list(--tct-stepper-label-color, var-prefixer(stepper-title-color), --t-text, #4d4d4d);\n    font-size: var-list(\n        --tct-stepper-label-font-size,\n        var-prefixer(stepper-title-font-size),\n        --app-font-size-small,\n        12px\n    );\n    line-height: var-list(--tct-stepper-label-line-height, 1.5em);\n    @include line-clamp(var(--tct-stepper-label-line-count, 2));\n\n    [aria-selected] & {\n        font-weight: var-list(var-prefixer(stepper-active-font-weight), 600);\n    }\n\n    [aria-describedby] & {\n        -webkit-line-clamp: var(--tct-stepper-label-line-count, 1);\n    }\n}\n\n.step-description {\n    color: var-list(var-prefixer(stepper-description-color), --t-textA, rgba(77, 77, 77, 0.77));\n    font-size: var-list(var-prefixer(stepper-description-font-size), --app-font-size-small, 12px);\n    @include line-clamp(var(--tct-stepper-description-line-count, 4));\n\n    // Add padding for descenders\n    padding-bottom: 0.2em;\n\n    // For description slot on q2-stepper-pane\n    .ellipsize {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        max-width: var(--comp-step-width);\n        display: block;\n    }\n}\n\n.gradient-left,\n.gradient-right {\n    z-index: 1;\n    position: absolute;\n    top: 0;\n    height: 100%;\n    width: 18px;\n}\n\n.gradient-left {\n    background-image: linear-gradient(\n        to left,\n        var(--t-base-a0, rgba(255, 255, 255, 0)),\n        var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%,\n        var(--t-base, #ffffff) 100%\n    );\n    left: 0;\n}\n\n.gradient-right {\n    background-image: linear-gradient(\n        to right,\n        var(--t-base-a0, rgba(255, 255, 255, 0)),\n        var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%,\n        var(--t-base, #ffffff) 100%\n    );\n    right: 0;\n}\n\n.btn-left,\n.btn-right {\n    --tct-icon-size: 18px;\n    --tct-btn-icon-hover-background: transparent;\n    --tct-btn-icon-width: 22px;\n    --tct-icon-stroke-primary: #{var-list(var-prefixer(stepper-scroll-arrow-color), --t-text, #4d4d4d)};\n\n    position: absolute;\n    top: calc(50% - 22px);\n    z-index: 2;\n    q2-icon {\n        --tct-icon-stroke-width: 3;\n    }\n}\n\n.btn-left {\n    left: 0;\n}\n\n.btn-right {\n    right: 0;\n}\n","import {\n    Component,\n    Prop,\n    h,\n    Element,\n    ComponentInterface,\n    State,\n    Watch,\n    Listen,\n    Method,\n    Event,\n    EventEmitter,\n    Fragment,\n} from '@stencil/core';\nimport { loc, overrideFocus, isEventFromElement } from 'src/utils';\n@Component({ tag: 'q2-stepper', shadow: true, styleUrl: 'q2-stepper.scss' })\nexport class Q2Stepper implements ComponentInterface {\n    // #region Own Properties\n\n    listElement: HTMLUListElement;\n    resizeObserver: ResizeObserver;\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    contentChangeTriggerCount: number = 0;\n\n    @State()\n    scrollEnabled: boolean = false;\n\n    @State()\n    showScrollLeft: boolean = false;\n\n    @State()\n    showScrollRight: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The currently selected step. */\n    @Prop({ reflect: true, mutable: true })\n    currentStep: number = 1;\n\n    /**\n     * The last step the user may navigate to.\n     * @info\n     * Will be managed automatically if not provided.\n     */\n    @Prop({ mutable: true })\n    lastEnabledStep: number;\n\n    /**\n     * Used to determine the number of steps in the stepper.\n     * @private\n     */\n    @Prop({ mutable: true })\n    stepCount: number;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the selected step changes.\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.resizeObserver?.disconnect();\n        this.resizeObserver = null;\n    }\n\n    componentWillLoad() {\n        if (!this.lastEnabledStep) this.lastEnabledStep = this.currentStep || 1;\n        this.resizeObserver = new ResizeObserver(() => this.checkScrollState());\n        this.checkForPanes();\n    }\n\n    componentDidLoad() {\n        this.resizeObserver.observe(this.listElement);\n        this.checkScrollState();\n        overrideFocus(this.hostElement);\n        setTimeout(() => this.showStep(this.currentStep || 1), 0);\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        const { hostElement } = this;\n        if (event.target === hostElement && !hostElement.getAttribute('onchange') && !!event.detail) {\n            this.currentStep = event.detail.selectedStep || this.currentStep;\n        }\n    }\n\n    @Listen('contentChange')\n    contentChangeHandler() {\n        this.contentChangeTriggerCount += 1;\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.focusStep(this.currentStep, true, true);\n    }\n\n    @Listen('statusChange')\n    statusChangeHandler(event: CustomEvent) {\n        const index = Array.from(this.allPanes).findIndex(el => event.detail.id === el.id);\n        if (index > -1) {\n            this.allPanes[index].status = event.detail.status;\n            this.renderStepBtn(index);\n        }\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking a step in the stepper and emitting the change event.\n     *\n     * You may provide either the step number or the stepper pane id.\n     *\n     * If the value is invalid or the step is locked, the method will do nothing.\n     * @testOnly\n     */\n    @Method()\n    async selectStep(value: number | string) {\n        let stepListItem;\n        switch (typeof value) {\n            case 'number':\n                if (value > this.lastEnabledStep || value < 1) break;\n                stepListItem = this.listElement.children[value - 1];\n                if (!stepListItem) return;\n                (stepListItem.firstElementChild as HTMLButtonElement)?.click();\n                break;\n            case 'string':\n                const pane = this.hostElement.querySelector<HTMLQ2StepperPaneElement>(`#${value}`);\n                if (!pane) break;\n                const stepIndex = this.allPanes.indexOf(pane);\n                if (stepIndex + 1 > this.lastEnabledStep || stepIndex < 0) break;\n                stepListItem = this.listElement.children[stepIndex];\n                if (!stepListItem) break;\n                (stepListItem.firstElementChild as HTMLButtonElement)?.click();\n                break;\n            default:\n                break;\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('currentStep')\n    currentStepChanged(stepNumber: number) {\n        this.showStep(stepNumber);\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get allPanes() {\n        return Array.from(this.hostElement.querySelectorAll<HTMLQ2StepperPaneElement>('q2-stepper-pane'));\n    }\n\n    checkForPanes = () => {\n        const { allPanes } = this;\n        if (!allPanes.length) return;\n\n        this.stepCount = allPanes.length;\n    };\n\n    checkScrollState = () => {\n        if (!this.listElement) return;\n        const { scrollLeft, scrollWidth, clientWidth } = this.listElement;\n        this.scrollEnabled = scrollWidth > clientWidth;\n        this.showScrollLeft = !!scrollLeft;\n        this.showScrollRight = scrollWidth !== scrollLeft + clientWidth;\n    };\n\n    focusStep(stepNumber: number, scrollIntoView?: boolean, forceFocus?: boolean) {\n        const stepListItem = this.listElement.children[stepNumber - 1] as HTMLLIElement;\n        const isActive = document.activeElement === this.hostElement;\n        if (!stepListItem) return;\n        if (isActive || forceFocus) {\n            (stepListItem.firstElementChild as HTMLButtonElement)?.focus();\n        }\n\n        if (scrollIntoView) {\n            const left = stepListItem.offsetLeft - this.listElement.clientWidth / 2;\n            this.listElement.scrollTo({\n                left,\n                behavior: 'smooth',\n            });\n        }\n    }\n\n    getPaneSlotOrProperty(pane: HTMLQ2StepperPaneElement, slotName: 'description' | 'label') {\n        const slot = pane.querySelector<HTMLElement>(`:scope > [slot=\"${slotName}\"]`);\n        return slot?.outerHTML ?? loc(pane[slotName]);\n    }\n\n    onScrollBtnClick = (direction: 'left' | 'right') => {\n        const scrollAmount = Math.floor(this.listElement.clientWidth / 2);\n\n        this.listElement.scrollBy({\n            left: direction === 'left' ? -scrollAmount : scrollAmount,\n            behavior: 'smooth',\n        });\n    };\n\n    onSlotChange = () => {\n        this.checkForPanes();\n        this.checkScrollState();\n    };\n\n    onStepClick = (event, selectedStep: number) => {\n        event.stopPropagation();\n        const { currentStep, stepCount, lastEnabledStep } = this;\n        if (selectedStep > lastEnabledStep || selectedStep === currentStep) return;\n\n        this.change.emit({\n            selectedStep,\n            lastEnabledStep,\n            currentStep,\n            stepCount,\n        });\n    };\n\n    onStepKeyDown = (event: KeyboardEvent, stepNumber: number) => {\n        const { lastEnabledStep, stepCount } = this;\n        const { key } = event;\n\n        let selectedStep;\n        switch (key) {\n            case 'ArrowLeft':\n                event.preventDefault();\n                selectedStep = Math.max(stepNumber - 1, 0);\n                break;\n\n            case 'ArrowRight':\n                event.preventDefault();\n                selectedStep = Math.min(stepNumber + 1, stepCount);\n                break;\n\n            case 'Home':\n                event.preventDefault();\n                selectedStep = 1;\n                break;\n\n            case 'End':\n                event.preventDefault();\n                selectedStep = lastEnabledStep;\n                break;\n        }\n\n        if (!selectedStep) return;\n        this.focusStep(selectedStep, true);\n    };\n\n    resizeIframe() {\n        return window?.TectonElements?.resizeIframe?.();\n    }\n\n    showStep(stepNumber: number) {\n        if (stepNumber > this.lastEnabledStep) {\n            const { currentStep, stepCount } = this;\n            this.lastEnabledStep = stepNumber;\n            this.change.emit({\n                selectedStep: null,\n                lastEnabledStep: stepNumber,\n                currentStep,\n                stepCount,\n            });\n        }\n\n        this.scheduledAfterRender.push(this.resizeIframe);\n        this.showStepPane(stepNumber);\n        this.focusStep(stepNumber, this.scrollEnabled);\n    }\n\n    showStepPane(stepNumber: number) {\n        this.allPanes.forEach((pane, index) => {\n            pane.isActive = stepNumber === index + 1;\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    renderStepBtn(stepIndex: number) {\n        const { allPanes, stepCount, currentStep, lastEnabledStep } = this;\n        const pane = allPanes?.[stepIndex] ?? null;\n        const { id, status } = pane;\n        const label = this.getPaneSlotOrProperty(pane, 'label');\n        const description = this.getPaneSlotOrProperty(pane, 'description');\n\n        const stepNumber = stepIndex + 1;\n        const isCurrentStep = stepNumber === currentStep;\n        const labelId = !!label && `label-${id}`;\n        const descriptionId = !!label && !!description && `description-${id}`;\n        const btnLabel = !label && loc('tecton.element.stepper.number', [`${stepNumber}`, `${stepCount}`]);\n\n        let statusIcon;\n        if (status === 'complete') statusIcon = 'success-filled';\n        else if (status === 'error') statusIcon = 'warning-filled';\n\n        const stepClasses = ['step-btn'];\n        if (status) stepClasses.push(`status-${status}`);\n        const isLocked = status === 'locked';\n        const disabled = isLocked || stepNumber > lastEnabledStep;\n\n        return (\n            <li role=\"presentation\">\n                <button\n                    class={stepClasses.join(' ')}\n                    type=\"button\"\n                    aria-labelledby={labelId}\n                    aria-describedBy={descriptionId}\n                    aria-label={btnLabel}\n                    aria-selected={isCurrentStep}\n                    aria-disabled={disabled ? 'true' : null}\n                    role=\"tab\"\n                    tabIndex={isCurrentStep ? 0 : -1}\n                    onKeyDown={ev => this.onStepKeyDown(ev, stepNumber)}\n                    onClick={ev => !isLocked && this.onStepClick(ev, stepNumber)}\n                >\n                    <Fragment>\n                        {statusIcon ? (\n                            <div class=\"step-icon\">\n                                <q2-icon type={statusIcon}></q2-icon>\n                            </div>\n                        ) : (\n                            <div class=\"step-bubble\">{stepNumber}</div>\n                        )}\n                        {labelId && (\n                            <div\n                                class=\"step-label\"\n                                id={labelId}\n                                innerHTML={label}\n                            ></div>\n                        )}\n                        {labelId && descriptionId && (\n                            <div\n                                class=\"step-description\"\n                                id={descriptionId}\n                                innerHTML={description}\n                            ></div>\n                        )}\n                    </Fragment>\n                </button>\n                {stepIndex ? <div class=\"step-divider\"></div> : ''}\n            </li>\n        );\n    }\n\n    render() {\n        const { stepCount, scrollEnabled, showScrollLeft, showScrollRight } = this;\n        const containerClasses = ['step-container'];\n        if (scrollEnabled) containerClasses.push('has-scroll');\n\n        return (\n            <Fragment>\n                <div class={containerClasses.join(' ')}>\n                    {scrollEnabled && (\n                        <Fragment>\n                            <div\n                                class=\"gradient-left\"\n                                hidden={!showScrollLeft}\n                            ></div>\n                            <div\n                                class=\"gradient-right\"\n                                hidden={!showScrollRight}\n                            ></div>\n\n                            <q2-btn\n                                class=\"btn-left\"\n                                hideLabel={true}\n                                hidden={!this.showScrollLeft}\n                                label={loc('tecton.element.stepper.scrollLeft')}\n                                onClick={() => this.onScrollBtnClick('left')}\n                            >\n                                <q2-icon type=\"chevron-left\"></q2-icon>\n                            </q2-btn>\n\n                            <q2-btn\n                                class=\"btn-right\"\n                                hideLabel={true}\n                                hidden={!this.showScrollRight}\n                                label={loc('tecton.element.stepper.scrollRight')}\n                                onClick={() => this.onScrollBtnClick('right')}\n                            >\n                                <q2-icon type=\"chevron-right\"></q2-icon>\n                            </q2-btn>\n                        </Fragment>\n                    )}\n\n                    <ul\n                        onScroll={this.checkScrollState}\n                        ref={el => (this.listElement = el)}\n                        role=\"tablist\"\n                    >\n                        {stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex))}\n                    </ul>\n                </div>\n                <div role=\"list\">\n                    <slot onSlotchange={() => this.onSlotChange()} />\n                </div>\n            </Fragment>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}
+{"file":"q2-stepper.js","mappings":"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","names":["Q2Stepper","__stencil_proxyCustomElement"],"sources":["src/components/q2-stepper/q2-stepper.scss?tag=q2-stepper&encapsulation=shadow","src/components/q2-stepper/q2-stepper.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n    position: relative;\n}\n\nul {\n    --comp-bullet-background: #{var-list(\n            --tct-stepper-bullet-active-background,\n            var-prefixer(stepper-bullet-active-bg),\n            --t-primary,\n            #0079c1\n        )};\n    --comp-bullet-font-color: #{var-list(\n            var-prefixer(stepper-bullet-active-font-color),\n            --t-primary-font-color,\n            #ffffff\n        )};\n    --comp-bullet-size: #{var-list(var-prefixer(stepper-btn-icon-size), 24px)};\n    --comp-bullet-gap: #{var-list(var-prefixer(stepper-btn-gap), --app-scale-3x, 15px)};\n    --comp-bullet-font-size: #{var-list(var-prefixer(stepper-btn-label-font-size), 16px)};\n\n    --comp-step-width: #{var-list(var-prefixer(stepper-step-width), --t-stepper-step-width, 80px)};\n    --comp-step-gap: #{var-list(var-prefixer(stepper-step-gap), 5px)};\n    --comp-btn-icon-size: #{var-list(var-prefixer(stepper-btn-icon-size), 24px)};\n    --comp-btn-label-font-size: #{var-list(var-prefixer(stepper-btn-label-font-size), 16px)};\n    --comp-tween: #{var-list(var-prefixer(stepper-tween), --app-tween-1, unquote('0.2s ease'))};\n\n    overflow-x: auto;\n    display: flex;\n    justify-content: center;\n    list-style: none;\n    padding: 0;\n    padding: var-list(var-prefixer(stepper-list-padding), 2px);\n    margin: 0;\n    gap: var(--comp-step-gap);\n    @include tiny-scrollbar();\n\n    .has-scroll & {\n        justify-content: unset;\n    }\n}\n\nli {\n    min-height: var-list(var-prefixer(stepper-min-height), 50px);\n    flex: 0 0 auto;\n    position: relative;\n    width: var(--comp-step-width);\n    text-align: center;\n    max-width: 150px;\n    min-width: 80px;\n}\n\n.step-btn {\n    position: relative;\n    background: transparent;\n    border: 0;\n    cursor: pointer;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    height: calc(100% - 4px);\n    width: 100%;\n    transition: var(--comp-tween);\n    padding: 0;\n    transition-property: box-shadow;\n    outline: none;\n    margin-top: 2px;\n\n    --comp-active-color: var(--comp-bullet-background);\n    &.status-complete {\n        --comp-active-color: var(--const-stoplight-success, #0e8a00);\n        --tct-stoplight-success: var(--comp-active-color);\n    }\n    &.status-error {\n        --comp-active-color: var(--const-stoplight-alert, #d20a0a);\n        --tct-stoplight-warning: var(--comp-active-color);\n    }\n\n    &[aria-disabled='true'] {\n        cursor: not-allowed;\n\n        &,\n        & + .step-divider {\n            --comp-bullet-font-color: #{var-list(var-prefixer(stepper-bullet-inactive-font-color), --t-text, #4d4d4d)};\n            --comp-bullet-background: #{var-list(\n                    --tct-stepper-bullet-inactive-background,\n                    var-prefixer(stepper-bullet-inactive-bg),\n                    --t-gray-12,\n                    #d9d9d9\n                )};\n        }\n    }\n}\n.step-icon,\n.step-bubble {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    line-height: 0;\n    margin: var(--comp-bullet-gap) auto;\n    color: var(--comp-bullet-font-color);\n    width: var(--comp-btn-icon-size);\n    height: var(--comp-btn-icon-size);\n    min-height: var(--comp-btn-icon-size);\n    font-size: var(--comp-bullet-font-size);\n    transition: var(--comp-tween);\n    transition-property: background, color;\n    border-radius: 50%;\n    position: relative;\n\n    q2-icon {\n        --tct-icon-fill: var(--comp-active-color);\n        &:before {\n            content: '';\n            display: block;\n            background: var(--comp-bullet-font-color);\n            position: absolute;\n            width: 80%;\n            height: 80%;\n            left: 11%;\n            top: 11%;\n            border-radius: 50%;\n        }\n    }\n    .status-complete &,\n    .status-error & {\n        background: var(--comp-active-color);\n    }\n    [aria-selected='true'] & {\n        box-shadow:\n            0 0 0 2px var(--t-base, #ffffff),\n            0 0 0 4px var(--comp-active-color);\n        font-weight: var-list(var-prefixer(stepper-bullet-active-font-weight), 600);\n    }\n}\n\n.step-bubble {\n    background: var(--comp-bullet-background);\n}\n\n.step-divider {\n    width: calc(var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size));\n    top: calc(calc(var(--comp-bullet-size) / 2) + var(--comp-bullet-gap));\n    left: calc(calc(var(--comp-step-width) * -0.5) + var(--comp-step-gap) + var(--comp-bullet-gap));\n    border: 0;\n    border-top: 1px solid var(--comp-bullet-background);\n    height: 0;\n    position: absolute;\n    margin: 0;\n    transition: border var(--comp-tween);\n}\n\n.step-container {\n    position: relative;\n}\n\n.step-label {\n    color: var-list(--tct-stepper-label-color, var-prefixer(stepper-title-color), --t-text, #4d4d4d);\n    font-size: var-list(\n        --tct-stepper-label-font-size,\n        var-prefixer(stepper-title-font-size),\n        --app-font-size-small,\n        12px\n    );\n    line-height: var-list(--tct-stepper-label-line-height, 1.5em);\n    @include line-clamp(var(--tct-stepper-label-line-count, 2));\n\n    [aria-selected] & {\n        font-weight: var-list(var-prefixer(stepper-active-font-weight), 600);\n    }\n\n    [aria-describedby] & {\n        -webkit-line-clamp: var(--tct-stepper-label-line-count, 1);\n    }\n}\n\n.step-description {\n    color: var-list(var-prefixer(stepper-description-color), --t-textA, rgba(77, 77, 77, 0.77));\n    font-size: var-list(var-prefixer(stepper-description-font-size), --app-font-size-small, 12px);\n    @include line-clamp(var(--tct-stepper-description-line-count, 4));\n\n    // Add padding for descenders\n    padding-bottom: 0.2em;\n\n    // For description slot on q2-stepper-pane\n    .ellipsize {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        max-width: var(--comp-step-width);\n        display: block;\n    }\n}\n\n.gradient-left,\n.gradient-right {\n    z-index: 1;\n    position: absolute;\n    top: 0;\n    height: 100%;\n    width: 18px;\n}\n\n.gradient-left {\n    background-image: linear-gradient(\n        to left,\n        var(--t-base-a0, rgba(255, 255, 255, 0)),\n        var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%,\n        var(--t-base, #ffffff) 100%\n    );\n    left: 0;\n}\n\n.gradient-right {\n    background-image: linear-gradient(\n        to right,\n        var(--t-base-a0, rgba(255, 255, 255, 0)),\n        var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%,\n        var(--t-base, #ffffff) 100%\n    );\n    right: 0;\n}\n\n.btn-left,\n.btn-right {\n    --tct-icon-size: 18px;\n    --tct-btn-icon-hover-background: transparent;\n    --tct-btn-icon-width: 22px;\n    --tct-icon-stroke-primary: #{var-list(var-prefixer(stepper-scroll-arrow-color), --t-text, #4d4d4d)};\n\n    position: absolute;\n    top: calc(50% - 22px);\n    z-index: 2;\n    q2-icon {\n        --tct-icon-stroke-width: 3;\n    }\n}\n\n.btn-left {\n    left: 0;\n}\n\n.btn-right {\n    right: 0;\n}\n","import {\n    Component,\n    Prop,\n    h,\n    Element,\n    ComponentInterface,\n    State,\n    Watch,\n    Listen,\n    Method,\n    Event,\n    EventEmitter,\n    Fragment,\n} from '@stencil/core';\nimport { loc, overrideFocus, isEventFromElement } from 'src/utils';\n@Component({ tag: 'q2-stepper', shadow: true, styleUrl: 'q2-stepper.scss' })\nexport class Q2Stepper implements ComponentInterface {\n    // #region Own Properties\n\n    listElement: HTMLUListElement;\n    resizeObserver: ResizeObserver;\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    contentChangeTriggerCount: number = 0;\n\n    @State()\n    scrollEnabled: boolean = false;\n\n    @State()\n    showScrollLeft: boolean = false;\n\n    @State()\n    showScrollRight: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The currently selected step. */\n    @Prop({ reflect: true, mutable: true })\n    currentStep: number;\n\n    /**\n     * The last step the user may navigate to.\n     * @info\n     * Will be managed automatically if not provided.\n     */\n    @Prop({ reflect: true, mutable: true })\n    lastEnabledStep: number;\n\n    /**\n     * Used to determine the number of steps in the stepper.\n     * @private\n     */\n    @Prop({ mutable: true })\n    stepCount: number;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the selected step changes.\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.resizeObserver?.disconnect();\n        this.resizeObserver = null;\n    }\n\n    componentWillLoad() {\n        this.handleUndefinedStepProperties();\n        if ('ResizeObserver' in window) {\n            this.resizeObserver = new ResizeObserver(() => this.checkScrollState());\n        }\n        this.checkForPanes();\n    }\n\n    componentDidLoad() {\n        this.resizeObserver?.observe(this.listElement);\n        this.checkScrollState();\n        overrideFocus(this.hostElement);\n        setTimeout(() => this.showStep(this.currentStep || 1), 0);\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        const { hostElement } = this;\n        if (event.target === hostElement && !hostElement.getAttribute('onchange') && !!event.detail) {\n            this.currentStep = event.detail.selectedStep || this.currentStep;\n        }\n    }\n\n    @Listen('contentChange')\n    contentChangeHandler() {\n        this.contentChangeTriggerCount += 1;\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.focusStep(this.currentStep, true, true);\n    }\n\n    @Listen('statusChange')\n    statusChangeHandler(event: CustomEvent) {\n        const index = Array.from(this.allPanes).findIndex(el => event.detail.id === el.id);\n        if (index > -1) {\n            this.allPanes[index].status = event.detail.status;\n            this.renderStepBtn(index);\n        }\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking a step in the stepper and emitting the change event.\n     *\n     * You may provide either the step number or the stepper pane id.\n     *\n     * If the value is invalid or the step is locked, the method will do nothing.\n     * @testOnly\n     */\n    @Method()\n    async selectStep(value: number | string) {\n        let stepListItem;\n        switch (typeof value) {\n            case 'number':\n                if (value > this.lastEnabledStep || value < 1) break;\n                stepListItem = this.listElement.children[value - 1];\n                if (!stepListItem) return;\n                (stepListItem.firstElementChild as HTMLButtonElement)?.click();\n                break;\n            case 'string':\n                const pane = this.hostElement.querySelector<HTMLQ2StepperPaneElement>(`#${value}`);\n                if (!pane) break;\n                const stepIndex = this.allPanes.indexOf(pane);\n                if (stepIndex + 1 > this.lastEnabledStep || stepIndex < 0) break;\n                stepListItem = this.listElement.children[stepIndex];\n                if (!stepListItem) break;\n                (stepListItem.firstElementChild as HTMLButtonElement)?.click();\n                break;\n            default:\n                break;\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('lastEnabledStep')\n    @Watch('currentStep')\n    lastEnabledStepChanged() {\n        this.handleUndefinedStepProperties();\n    }\n\n    @Watch('currentStep')\n    currentStepChanged(stepNumber: number) {\n        this.showStep(stepNumber);\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get allPanes() {\n        return Array.from(this.hostElement.querySelectorAll<HTMLQ2StepperPaneElement>('q2-stepper-pane'));\n    }\n\n    checkForPanes = () => {\n        const { allPanes } = this;\n        if (!allPanes.length) return;\n\n        this.stepCount = allPanes.length;\n    };\n\n    checkScrollState = () => {\n        if (!this.listElement) return;\n        const { scrollLeft, scrollWidth, clientWidth } = this.listElement;\n        this.scrollEnabled = scrollWidth > clientWidth;\n        this.showScrollLeft = !!scrollLeft;\n        this.showScrollRight = scrollWidth !== scrollLeft + clientWidth;\n    };\n\n    focusStep(stepNumber: number, scrollIntoView?: boolean, forceFocus?: boolean) {\n        const { listElement } = this;\n        if (!listElement) return;\n\n        const stepListItem = listElement.children[stepNumber - 1] as HTMLLIElement;\n        const isActive = document.activeElement === this.hostElement;\n        if (!stepListItem) return;\n        if (isActive || forceFocus) {\n            (stepListItem.firstElementChild as HTMLButtonElement)?.focus();\n        }\n\n        if (scrollIntoView) {\n            const left = stepListItem.offsetLeft - this.listElement.clientWidth / 2;\n            this.listElement.scrollTo({\n                left,\n                behavior: 'smooth',\n            });\n        }\n    }\n\n    getPaneSlotOrProperty(pane: HTMLQ2StepperPaneElement, slotName: 'description' | 'label') {\n        const slot = Array.from(pane.children).find(child => child.getAttribute('slot') === slotName);\n        return slot?.outerHTML ?? loc(pane[slotName]);\n    }\n\n    handleUndefinedStepProperties() {\n        const { currentStep, lastEnabledStep } = this;\n        if (currentStep && lastEnabledStep) return;\n        if (!currentStep && lastEnabledStep) {\n            this.currentStep = lastEnabledStep;\n        } else if (currentStep && !lastEnabledStep) {\n            this.lastEnabledStep = currentStep;\n        } else if (!currentStep && !lastEnabledStep) {\n            this.currentStep = 1;\n            this.lastEnabledStep = 1;\n        }\n    }\n\n    onScrollBtnClick = (direction: 'left' | 'right') => {\n        const scrollAmount = Math.floor(this.listElement.clientWidth / 2);\n\n        this.listElement.scrollBy({\n            left: direction === 'left' ? -scrollAmount : scrollAmount,\n            behavior: 'smooth',\n        });\n    };\n\n    onSlotChange = () => {\n        this.checkForPanes();\n        this.checkScrollState();\n    };\n\n    onStepClick = (event, selectedStep: number) => {\n        event.stopPropagation();\n        const { currentStep, stepCount, lastEnabledStep } = this;\n        if (selectedStep > lastEnabledStep || selectedStep === currentStep) return;\n\n        this.change.emit({\n            selectedStep,\n            lastEnabledStep,\n            currentStep,\n            stepCount,\n        });\n    };\n\n    onStepKeyDown = (event: KeyboardEvent, stepNumber: number) => {\n        const { lastEnabledStep, stepCount } = this;\n        const { key } = event;\n\n        let selectedStep;\n        switch (key) {\n            case 'ArrowLeft':\n                event.preventDefault();\n                selectedStep = Math.max(stepNumber - 1, 0);\n                break;\n\n            case 'ArrowRight':\n                event.preventDefault();\n                selectedStep = Math.min(stepNumber + 1, stepCount);\n                break;\n\n            case 'Home':\n                event.preventDefault();\n                selectedStep = 1;\n                break;\n\n            case 'End':\n                event.preventDefault();\n                selectedStep = lastEnabledStep;\n                break;\n        }\n\n        if (!selectedStep) return;\n        this.focusStep(selectedStep, true);\n    };\n\n    resizeIframe() {\n        return window?.TectonElements?.resizeIframe?.();\n    }\n\n    showStep(stepNumber: number) {\n        if (stepNumber > this.lastEnabledStep) {\n            const { currentStep, stepCount } = this;\n            this.lastEnabledStep = stepNumber;\n            this.change.emit({\n                selectedStep: null,\n                lastEnabledStep: stepNumber,\n                currentStep,\n                stepCount,\n            });\n        }\n\n        this.scheduledAfterRender.push(this.resizeIframe);\n        this.showStepPane(stepNumber);\n        this.focusStep(stepNumber, this.scrollEnabled);\n    }\n\n    showStepPane(stepNumber: number) {\n        this.allPanes.forEach((pane, index) => {\n            pane.isActive = stepNumber === index + 1;\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    renderStepBtn(stepIndex: number) {\n        const { allPanes, stepCount, lastEnabledStep, currentStep } = this;\n        const pane = allPanes?.[stepIndex] ?? null;\n        const { id, status } = pane;\n        const label = this.getPaneSlotOrProperty(pane, 'label');\n        const description = this.getPaneSlotOrProperty(pane, 'description');\n\n        const stepNumber = stepIndex + 1;\n        const isCurrentStep = stepNumber === currentStep;\n        const labelId = !!label && `label-${id}`;\n        const descriptionId = !!label && !!description && `description-${id}`;\n        const btnLabel = !label && loc('tecton.element.stepper.number', [`${stepNumber}`, `${stepCount}`]);\n\n        let statusIcon;\n        if (status === 'complete') statusIcon = 'success-filled';\n        else if (status === 'error') statusIcon = 'warning-filled';\n\n        const stepClasses = ['step-btn'];\n        if (status) stepClasses.push(`status-${status}`);\n        const isLocked = status === 'locked';\n        const disabled = isLocked || stepNumber > lastEnabledStep;\n\n        return (\n            <li role=\"presentation\">\n                <button\n                    class={stepClasses.join(' ')}\n                    type=\"button\"\n                    aria-labelledby={labelId}\n                    aria-describedBy={descriptionId}\n                    aria-label={btnLabel}\n                    aria-selected={`${isCurrentStep}`}\n                    aria-disabled={disabled ? 'true' : undefined}\n                    role=\"tab\"\n                    tabIndex={isCurrentStep ? 0 : -1}\n                    onKeyDown={ev => this.onStepKeyDown(ev, stepNumber)}\n                    onClick={ev => !isLocked && this.onStepClick(ev, stepNumber)}\n                >\n                    <Fragment>\n                        {statusIcon ? (\n                            <div class=\"step-icon\">\n                                <q2-icon type={statusIcon}></q2-icon>\n                            </div>\n                        ) : (\n                            <div class=\"step-bubble\">{stepNumber}</div>\n                        )}\n                        {labelId && (\n                            <div\n                                class=\"step-label\"\n                                id={labelId}\n                                innerHTML={label}\n                            ></div>\n                        )}\n                        {labelId && descriptionId && (\n                            <div\n                                class=\"step-description\"\n                                id={descriptionId}\n                                innerHTML={description}\n                            ></div>\n                        )}\n                    </Fragment>\n                </button>\n                {stepIndex ? <div class=\"step-divider\"></div> : ''}\n            </li>\n        );\n    }\n\n    render() {\n        const { stepCount, scrollEnabled, showScrollLeft, showScrollRight } = this;\n        const containerClasses = ['step-container'];\n        if (scrollEnabled) containerClasses.push('has-scroll');\n\n        return (\n            <Fragment>\n                <div class={containerClasses.join(' ')}>\n                    {scrollEnabled && (\n                        <Fragment>\n                            <div\n                                class=\"gradient-left\"\n                                hidden={!showScrollLeft}\n                            ></div>\n                            <div\n                                class=\"gradient-right\"\n                                hidden={!showScrollRight}\n                            ></div>\n\n                            <q2-btn\n                                class=\"btn-left\"\n                                hideLabel={true}\n                                hidden={!this.showScrollLeft}\n                                label={loc('tecton.element.stepper.scrollLeft')}\n                                onClick={() => this.onScrollBtnClick('left')}\n                            >\n                                <q2-icon type=\"chevron-left\"></q2-icon>\n                            </q2-btn>\n\n                            <q2-btn\n                                class=\"btn-right\"\n                                hideLabel={true}\n                                hidden={!this.showScrollRight}\n                                label={loc('tecton.element.stepper.scrollRight')}\n                                onClick={() => this.onScrollBtnClick('right')}\n                            >\n                                <q2-icon type=\"chevron-right\"></q2-icon>\n                            </q2-btn>\n                        </Fragment>\n                    )}\n\n                    <ul\n                        onScroll={this.checkScrollState}\n                        ref={el => (this.listElement = el)}\n                        role=\"tablist\"\n                    >\n                        {stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex))}\n                    </ul>\n                </div>\n                <div role=\"list\">\n                    <slot onSlotchange={() => this.onSlotChange()} />\n                </div>\n            </Fragment>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}

package/dist/components/q2-tab-container.js

@@ -244,7 +244,7 @@ const Q2TabContainer$1 = /*@__PURE__*/ proxyCustomElement(class Q2TabContainer e
     renderTab(tab, index) {
         const { label, value } = tab;
         const isSelected = this.selectedTabValue === value;
-        return (h("li", { role: "presentation" }, h("button", { id: `tab-${this.guid}-${index}`, "data-value": value, "test-id": "tabLink", tabIndex: isSelected ? 0 : -1, role: "tab", "aria-selected": isSelected ? 'true' : 'false', onClick: this.onTabClick, onKeyDown: this.onTabKeyDown }, tab.badgeCount === undefined ? label : this.renderTabWithBadge(tab, isSelected))));
+        return (h("li", { role: "presentation" }, h("button", { id: `tab-${this.guid}-${index}`, "data-value": value, "test-id": "tabLink", tabIndex: isSelected ? 0 : -1, role: "tab", "aria-selected": `${isSelected}`, onClick: this.onTabClick, onKeyDown: this.onTabKeyDown }, tab.badgeCount === undefined ? label : this.renderTabWithBadge(tab, isSelected))));
     }
     renderTabWithBadge(tab, isSelected) {
         let theme;
@@ -260,7 +260,7 @@ const Q2TabContainer$1 = /*@__PURE__*/ proxyCustomElement(class Q2TabContainer e
         return (h("div", { class: "tab-pane-badge", "aria-label": `${tab.label}, ${tab.badgeCount} ${description}` }, tab.label, h("q2-badge", { value: tab.badgeCount, theme: theme, status: tab.badgeStatus })));
     }
     render() {
-        return (h(Fragment, { key: '4c4d7330077da0732e93f18f46dc0efdc3a4984e' }, h("div", { key: 'd7f615a37f593c62b1d856d30713f42f3e294dad', class: "tab-container" }, this.scrollEnabled && (h(Fragment, { key: 'dd7ac48ee8306cb479f2dc9b6fcb19532e7cd447' }, h("div", { key: '3e93be5e13d50a7633d9698a41e49723c4e6f3ef', class: "gradient-left", hidden: !this.showScrollLeft }), h("div", { key: '80ddaeb43b2a5937c8ec28d437e6c312293f9430', class: "gradient-right", hidden: !this.showScrollRight }), h("q2-btn", { key: 'ff338cdd0cadfacfd690649fc2000da0082a1138', class: "btn-left", hidden: !this.showScrollLeft, onClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: 'c431c922dffc8e9d8fb6dce9a46407ecf6a6622b', type: "chevron-left", label: "scroll left" })), h("q2-btn", { key: '5272c49187966fbb5bf416670e7e0d7505def26d', class: "btn-right", hidden: !this.showScrollRight, onClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: '036c9cb8203fb82f65b926cff6d3698976b1d6e3', type: "chevron-right", label: "scroll right" })))), h("ul", { key: 'fc6ea07d9ef1688bf5da33bf84d6012741728c30', onScroll: this.checkScrollState, ref: el => (this.listElement = el), class: this.noPrint ? 'no-print' : null, role: "tablist" }, this.tabs.map((tab, index) => this.renderTab(tab, index)))), h("div", { key: '8d1021f7a1789ad41ac4b4b724bfebebd94cd068', class: "tab-content" }, h("slot", { key: 'fe84de62f160e58f979d6b8d0d240a84cf6cbdba', onSlotchange: () => this.onSlotChange() }))));
+        return (h(Fragment, { key: '83bfb22a931e1bf4e820102d1aad4f665006b1f3' }, h("div", { key: 'bea01ff143c51cb6a68ec8220bf5f05822faa8db', class: "tab-container" }, this.scrollEnabled && (h(Fragment, { key: 'be5996de51a16a93a2b396871ac3077f34aa5746' }, h("div", { key: '482f2a3417bdcc0c801b2c4838c1998f9bdfc500', class: "gradient-left", hidden: !this.showScrollLeft }), h("div", { key: 'c20e996a51bfc31ce72b9a8e2b2c2b3b45432b72', class: "gradient-right", hidden: !this.showScrollRight }), h("q2-btn", { key: '2fd28d94ae604f62d5b4df5d139db6e76d6f4e25', class: "btn-left", hidden: !this.showScrollLeft, onClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: '0f0b63a2b916bcd9d630173527e0e7f143dfb694', type: "chevron-left", label: "scroll left" })), h("q2-btn", { key: 'da80772ae293507f7701fad03c41e68a203da197', class: "btn-right", hidden: !this.showScrollRight, onClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: '03ae7d5c6d7b7834036f516f94219ed4e4534129', type: "chevron-right", label: "scroll right" })))), h("ul", { key: 'd7c1454e254cee94ccecc5f0cfe98706da446b4e', onScroll: this.checkScrollState, ref: el => (this.listElement = el), class: this.noPrint ? 'no-print' : null, role: "tablist" }, this.tabs.map((tab, index) => this.renderTab(tab, index)))), h("div", { key: 'a786002dfe31a74aa5fb8ae5474b2d2ee8b2a820', class: "tab-content" }, h("slot", { key: '0f733e6b1c90efbf090463c35b2de6d347b62e64', onSlotchange: () => this.onSlotChange() }))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-tab-container.js.map

@@ -1 +1 @@
-{"file":"q2-tab-container.js","mappings":"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","names":["Q2TabContainer","__stencil_proxyCustomElement"],"sources":["src/components/q2-tab-container/q2-tab-container.scss?tag=q2-tab-container&encapsulation=shadow","src/components/q2-tab-container/q2-tab-container.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n    position: relative;\n}\n\nbutton {\n    cursor: pointer;\n    margin: 0;\n}\n\n.tab-container {\n    position: relative;\n}\n\nul {\n    --comp-container-padding: #{var-list(--tct-scale-1, --app-scale-1x, 5px)\n        var-list(--tct-scale-1, --app-scale-1x, 5px) 0};\n    padding: var-list(var-prefixer(tab-container-padding), --comp-container-padding);\n    margin: var-list(var-prefixer(tab-container-margin), 0);\n    display: flex;\n    gap: var-list(var-prefixer(tab-gap), --tct-scale-1, --app-scale-1x, 5px);\n    list-style: none;\n    border-bottom: 1px solid\n        var-list(\n            var-prefixer(tab-container-border-color),\n            --tct-gray-11,\n            --t-gray-11,\n            --tct-gray-l1,\n            --app-gray-l1,\n            #cccccc\n        );\n    overflow-x: auto;\n    align-items: center;\n    @include hidden-scrollbar();\n\n    @media print {\n        &.no-print {\n            display: none;\n        }\n    }\n}\n\nli {\n    flex: 0 0 auto;\n\n    button {\n        background: var-list(--tct-tab-inactive-background, var-prefixer(tab-inactive-bg-color), transparent);\n        border-width: var-list(var-prefixer(tab-inactive-border-width), unquote('0 0 3px 0'));\n        border-color: var-list(var-prefixer(tab-inactive-border-color), transparent);\n        border-style: var-list(var-prefixer(tab-inactive-border-style), solid);\n        border-radius: var-list(var-prefixer(tab-border-radius), 0);\n        width: var-list(var-prefixer(tab-width), 100%);\n        text-align: var-list(var-prefixer(tab-text-align), center);\n        text-decoration: var-list(var-prefixer(tab-text-decoration), none);\n        padding: var-list(var-prefixer(tab-padding), --tct-scale-2, --app-scale-2x, 10px);\n        color: var-list(var-prefixer(tab-inactive-color), inherit);\n        font-size: var-list(var-prefixer(tab-font-size), 17px);\n        display: block;\n        transition:\n            color var-list(--tct-tween-2, --app-tween-2, unquote('0.4s ease')),\n            border-color var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n\n        :host([type='section']) & {\n            --comp-tab-section-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px)\n                var-list(--tct-scale-1, --app-scale-1x, 5px)};\n            font-size: var-list(--tct-tab-section-font-size, inherit);\n            padding: var-list(var-prefixer(tab-section-padding), --comp-tab-section-padding);\n        }\n\n        &:hover {\n            color: var-list(var-prefixer(tab-hover-color), var-prefixer(tab-active-color), #2e2e2e);\n            background: var-list(--tct-tab-hover-background, var-prefixer(tab-hover-bg-color), inherit);\n            width: var-list(var-prefixer(tab-hover-width), 100%);\n        }\n\n        &[aria-selected='true'] {\n            color: var-list(var-prefixer(tab-active-color), #2e2e2e);\n            border-color: var-list(var-prefixer(tab-active-border-color), currentcolor);\n            border-style: var-list(var-prefixer(tab-active-border-style), solid);\n            width: var-list(var-prefixer(tab-active-width), 100%);\n            background: var-list(--tct-tab-active-background, var-prefixer(tab-active-bg-color), inherit);\n        }\n\n        :host([color='alt']) & {\n            color: var-list(var-prefixer(tab-alt-inactive-color), inherit);\n\n            &:hover,\n            &[aria-selected='true'] {\n                color: var-list(var-prefixer(tab-alt-active-color), inherit);\n            }\n        }\n\n        @media screen and (max-width: 767px) {\n            --comp-tab-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px)\n                var-list(--tct-scale-1, --app-scale-1x, 5px)};\n            font-size: inherit;\n            padding: var-list(var-prefixer(tab-padding), --comp-tab-padding);\n        }\n    }\n}\n\n.tab-content {\n    --comp-tab-content-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px) 0};\n    padding: var-list(\n        --tct-tab-container-content-padding,\n        var-prefixer(tab-content-padding),\n        --comp-tab-content-padding\n    );\n    background: var-list(--tct-tab-container-content-backgrond, none);\n\n    &:focus {\n        outline: none;\n        box-shadow: none;\n    }\n}\n\n.gradient-left,\n.gradient-right {\n    z-index: 1;\n    position: absolute;\n    top: 0;\n    height: 100%;\n    width: 44px;\n}\n\n.gradient-left {\n    background-image: linear-gradient(to left, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);\n    left: 0;\n}\n\n.gradient-right {\n    background-image: linear-gradient(to right, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);\n    right: 0;\n}\n\n.btn-left,\n.btn-right {\n    --tct-icon-size: 18px;\n    --tct-btn-icon-hover-background: transparent;\n    --tct-btn-icon-width: 22px;\n    --tct-icon-stroke-primary: #{var-list(var-prefixer(stepper-scroll-arrow-color), --t-text, #4d4d4d)};\n\n    position: absolute;\n    top: calc(50% - 22px);\n    z-index: 2;\n    q2-icon {\n        --tct-icon-stroke-width: 3;\n    }\n}\n\n.btn-left {\n    left: 0;\n}\n\n.btn-right {\n    right: 0;\n}\n\n.tab-pane-badge {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    q2-badge {\n        margin-left: 5px;\n        margin-right: 5px;\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Element,\n    Event,\n    EventEmitter,\n    State,\n    Listen,\n    Watch,\n    h,\n    Fragment,\n    Method,\n} from '@stencil/core';\nimport { createGuid, loc, overrideFocus, isEventFromElement } from 'src/utils';\nimport { JSX } from '../../components';\nimport { Q2Badge } from '../q2-badge/q2-badge';\n\ntype TabPane = {\n    label: string;\n    value: string;\n    badgeCount: number;\n    badgeDescription: string;\n    badgeTheme: Q2Badge['theme'];\n    badgeStatus: Q2Badge['status'];\n};\n\n@Component({ tag: 'q2-tab-container', shadow: true, styleUrl: 'q2-tab-container.scss' })\nexport class Q2TabContainer implements ComponentInterface {\n    // #region Own Properties\n\n    guid: number = createGuid();\n    lastScrolled: number = new Date(null).getTime();\n    listElement: HTMLUListElement;\n    mutationObserver: MutationObserver;\n    resizeObserver: ResizeObserver;\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    hasLeft: boolean = false;\n\n    @State()\n    hasRight: boolean = false;\n\n    @State()\n    scrollEnabled: boolean = false;\n\n    @State()\n    showScrollLeft: boolean = false;\n\n    @State()\n    showScrollRight: boolean = false;\n\n    @State()\n    tabs: TabPane[];\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Controls which variables are used to color the tab controls.\n     *\n     * - `undefined` (default)\n     *   - Uses `--t-tab-active` and `--t-tab-inactive`.\n     * - `alt`\n     *   - Uses `--t-tab-alt-active` and `--t-tab-alt-inactive`.\n     *   - The default fallback for these variables is `inherit`.\n     */\n    @Prop({ reflect: true })\n    color: 'alt' | undefined;\n\n    /**\n     * Used to establish a relationship between `q2-tab-container` and its associated tab panes.\n     * @warning\n     * The element can fail if this property is not set. Nested tab containers without the `name` property will not render correctly.\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /** Controls visibility of tab list in a print view. Tab content will still be visible even if `noPrint` is true. */\n    @Prop({ reflect: true })\n    noPrint: boolean = false;\n\n    /** Determines the font size of the tab controls. */\n    @Prop({ reflect: true })\n    type: 'main' | 'section';\n\n    /** Corresponds to the value of the selected tab pane. */\n    @Prop({ reflect: true, mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the selected tab changes.\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ value: string }>;\n\n    /**\n     * Emitted when the component has finished rendering.\n     * @private\n     */\n    @Event()\n    settled: EventEmitter<undefined>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.resizeObserver?.disconnect();\n        this.resizeObserver = null;\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        const observer = new MutationObserver(this.updateTabData);\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n        this.resizeObserver = new ResizeObserver(() => this.checkScrollState());\n        this.updateTabData();\n    }\n\n    componentDidLoad() {\n        this.resizeObserver?.observe(this.listElement);\n        this.checkScrollState();\n        overrideFocus(this.hostElement);\n        const index = this.tabs.findIndex(el => el.value === this.value);\n        this.scheduledAfterRender.push(() => {\n            const hasTabs = this.tabs.length > 0;\n            if (!hasTabs) return;\n            const tab = this.moveToTab(Math.max(index, 0), false);\n            this.value = tab.dataset.value;\n        });\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n        this.settled.emit();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('badge')\n    onBadge() {\n        this.setTabs();\n    }\n\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange) {\n            this.value = event.detail.value;\n        }\n    }\n\n    @Listen('focus')\n    onFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        const index = this.tabs.findIndex(el => el.value === this.selectedTabValue);\n        this.moveToTab(index, true);\n    }\n\n    @Listen('resize', { target: 'window' })\n    onResize() {\n        this.checkScrollState();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * A method to select a tab pane corresponding with the value.\n     *\n     * @testOnly\n     */\n    @Method()\n    async selectTab(value: string) {\n        const paneButton = this.hostElement.shadowRoot.querySelector(`[test-id=\"tabLink\"][data-value=\"${value}\"]`);\n        (paneButton as HTMLButtonElement)?.click();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('name')\n    nameObserver() {\n        this.updateTabData();\n    }\n\n    @Watch('value')\n    valueObserver() {\n        this.updateTabData();\n        this.scheduledAfterRender.push(this.resizeIframe);\n        const index = this.tabs.findIndex(el => el.value === this.value);\n        if (index > -1) {\n            this.scheduledAfterRender.push(() => this.moveToTab(index, false));\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get selectedTabValue() {\n        return this.value || this.tabPanes[0].value || '';\n    }\n\n    get tabList() {\n        return this.hostElement.shadowRoot.querySelector('.tab-list');\n    }\n\n    get tabPanes() {\n        const tabPanes = this.hostElement.querySelectorAll<HTMLQ2TabPaneElement | HTMLTectonTabPaneElement>(\n            'q2-tab-pane, tecton-tab-pane'\n        );\n\n        if (tabPanes.length === 0) {\n            return [];\n        }\n\n        return Array.from(tabPanes).filter(pane => pane.name === this.name);\n    }\n\n    checkScrollState = () => {\n        if (!this.listElement) return;\n        const { scrollLeft, scrollWidth, clientWidth } = this.listElement;\n        this.scrollEnabled = scrollWidth > clientWidth;\n        this.showScrollLeft = scrollLeft > 0;\n        this.showScrollRight = scrollWidth > Math.ceil(scrollLeft) + clientWidth;\n    };\n\n    moveToAdjacentTab = (value: string, direction: 'next' | 'prev' | 'first' | 'last') => {\n        const index = this.tabs.map(({ value }) => value).indexOf(value);\n\n        let newIndex;\n        switch (direction) {\n            case 'next':\n                newIndex = Math.min(index + 1, this.tabs.length - 1);\n                break;\n\n            case 'prev':\n                newIndex = Math.max(index - 1, 0);\n                break;\n\n            case 'first':\n                newIndex = 0;\n                break;\n\n            case 'last':\n                newIndex = this.tabs.length - 1;\n                break;\n        }\n\n        if (index === newIndex) return;\n\n        this.moveToTab(newIndex, true);\n    };\n\n    moveToTab = (index: number, shouldFocus: boolean = true) => {\n        const focusedValue = this.tabs[index].value;\n        const focusedTab = this.listElement.querySelector<HTMLButtonElement>(`[data-value=\"${focusedValue}\"]`);\n        if (shouldFocus) {\n            focusedTab.focus({ preventScroll: true });\n        }\n\n        const left = focusedTab.offsetLeft - this.listElement.clientWidth / 2;\n        this.listElement.scrollTo({\n            left,\n            behavior: 'smooth',\n        });\n\n        return focusedTab;\n    };\n\n    onScrollBtnClick = (direction?: 'left' | 'right') => {\n        const { scrollLeft, scrollWidth, clientWidth } = this.listElement;\n        const halfWidth = Math.floor(clientWidth / 2);\n        let scrollAmount: number = 0;\n        if (direction === 'left') {\n            scrollAmount = -Math.min(halfWidth, Math.abs(scrollLeft));\n        } else {\n            scrollAmount = Math.min(halfWidth, Math.abs(scrollWidth - scrollLeft - clientWidth));\n        }\n        this.listElement.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n    };\n\n    onSlotChange = () => {\n        this.checkScrollState();\n    };\n\n    onTabClick = (event: MouseEvent) => {\n        const targetValue = ((event.target as HTMLButtonElement).closest('button[role=\"tab\"]') as HTMLButtonElement)\n            .dataset.value;\n        const isAlreadySelected = this.value === targetValue;\n        if (isAlreadySelected) return;\n\n        this.change.emit({\n            value: targetValue,\n        });\n    };\n\n    onTabKeyDown = (event: KeyboardEvent) => {\n        const value = (event.target as HTMLElement).dataset.value;\n        switch (event.key) {\n            case 'ArrowRight':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'next');\n                break;\n\n            case 'ArrowLeft':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'prev');\n                break;\n\n            case 'Home':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'first');\n                break;\n\n            case 'End':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'last');\n                break;\n\n            case 'Space':\n            case 'Enter':\n                event.preventDefault();\n                this.change.emit({ value });\n                break;\n        }\n    };\n\n    resizeIframe() {\n        return window.TectonElements?.resizeIframe?.();\n    }\n\n    setTabs = () => {\n        this.tabs = this.tabPanes.map(({ label, value, badgeCount, badgeDescription, badgeTheme, badgeStatus }) => ({\n            label: (label && loc(label)) || '',\n            value,\n            badgeCount,\n            badgeDescription,\n            badgeTheme,\n            badgeStatus,\n        }));\n    };\n\n    updateTabData = () => {\n        this.updateTabPaneProps();\n        this.setTabs();\n    };\n\n    updateTabPaneProps = () => {\n        this.tabPanes.forEach((tab, index) => {\n            tab.selected = tab.value === this.selectedTabValue;\n            tab.guid = this.guid;\n            tab.index = index;\n        });\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderTab(tab: TabPane, index: number): JSX.IntrinsicElements {\n        const { label, value } = tab;\n        const isSelected = this.selectedTabValue === value;\n        return (\n            <li role=\"presentation\">\n                <button\n                    id={`tab-${this.guid}-${index}`}\n                    data-value={value}\n                    test-id=\"tabLink\"\n                    tabIndex={isSelected ? 0 : -1}\n                    role=\"tab\"\n                    aria-selected={isSelected ? 'true' : 'false'}\n                    onClick={this.onTabClick}\n                    onKeyDown={this.onTabKeyDown}\n                >\n                    {tab.badgeCount === undefined ? label : this.renderTabWithBadge(tab, isSelected)}\n                </button>\n            </li>\n        );\n    }\n\n    renderTabWithBadge(tab: TabPane, isSelected: boolean): JSX.IntrinsicElements {\n        let theme;\n        if (!tab.badgeStatus && isSelected) theme = tab.badgeTheme || 'primary';\n        let description;\n        if (tab.badgeDescription) description = loc(tab.badgeDescription);\n        else if (tab.badgeStatus) description = loc(`tecton.element.tab.pane.${tab.badgeStatus}`, [tab.badgeCount]);\n        else description = loc('tecton.element.tab.pane.new');\n\n        return (\n            <div\n                class=\"tab-pane-badge\"\n                aria-label={`${tab.label}, ${tab.badgeCount} ${description}`}\n            >\n                {tab.label}\n                <q2-badge\n                    value={tab.badgeCount}\n                    theme={theme}\n                    status={tab.badgeStatus}\n                />\n            </div>\n        );\n    }\n\n    render() {\n        return (\n            <Fragment>\n                <div class=\"tab-container\">\n                    {this.scrollEnabled && (\n                        <Fragment>\n                            <div\n                                class=\"gradient-left\"\n                                hidden={!this.showScrollLeft}\n                            ></div>\n                            <div\n                                class=\"gradient-right\"\n                                hidden={!this.showScrollRight}\n                            ></div>\n\n                            <q2-btn\n                                class=\"btn-left\"\n                                hidden={!this.showScrollLeft}\n                                onClick={() => this.onScrollBtnClick('left')}\n                            >\n                                <q2-icon\n                                    type=\"chevron-left\"\n                                    label=\"scroll left\"\n                                ></q2-icon>\n                            </q2-btn>\n\n                            <q2-btn\n                                class=\"btn-right\"\n                                hidden={!this.showScrollRight}\n                                onClick={() => this.onScrollBtnClick('right')}\n                            >\n                                <q2-icon\n                                    type=\"chevron-right\"\n                                    label=\"scroll right\"\n                                ></q2-icon>\n                            </q2-btn>\n                        </Fragment>\n                    )}\n\n                    <ul\n                        onScroll={this.checkScrollState}\n                        ref={el => (this.listElement = el)}\n                        class={this.noPrint ? 'no-print' : null}\n                        role=\"tablist\"\n                    >\n                        {this.tabs.map((tab, index) => this.renderTab(tab, index))}\n                    </ul>\n                </div>\n                <div class=\"tab-content\">\n                    <slot onSlotchange={() => this.onSlotChange()} />\n                </div>\n            </Fragment>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}
+{"file":"q2-tab-container.js","mappings":"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","names":["Q2TabContainer","__stencil_proxyCustomElement"],"sources":["src/components/q2-tab-container/q2-tab-container.scss?tag=q2-tab-container&encapsulation=shadow","src/components/q2-tab-container/q2-tab-container.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n    position: relative;\n}\n\nbutton {\n    cursor: pointer;\n    margin: 0;\n}\n\n.tab-container {\n    position: relative;\n}\n\nul {\n    --comp-container-padding: #{var-list(--tct-scale-1, --app-scale-1x, 5px)\n        var-list(--tct-scale-1, --app-scale-1x, 5px) 0};\n    padding: var-list(var-prefixer(tab-container-padding), --comp-container-padding);\n    margin: var-list(var-prefixer(tab-container-margin), 0);\n    display: flex;\n    gap: var-list(var-prefixer(tab-gap), --tct-scale-1, --app-scale-1x, 5px);\n    list-style: none;\n    border-bottom: 1px solid\n        var-list(\n            var-prefixer(tab-container-border-color),\n            --tct-gray-11,\n            --t-gray-11,\n            --tct-gray-l1,\n            --app-gray-l1,\n            #cccccc\n        );\n    overflow-x: auto;\n    align-items: center;\n    @include hidden-scrollbar();\n\n    @media print {\n        &.no-print {\n            display: none;\n        }\n    }\n}\n\nli {\n    flex: 0 0 auto;\n\n    button {\n        background: var-list(--tct-tab-inactive-background, var-prefixer(tab-inactive-bg-color), transparent);\n        border-width: var-list(var-prefixer(tab-inactive-border-width), unquote('0 0 3px 0'));\n        border-color: var-list(var-prefixer(tab-inactive-border-color), transparent);\n        border-style: var-list(var-prefixer(tab-inactive-border-style), solid);\n        border-radius: var-list(var-prefixer(tab-border-radius), 0);\n        width: var-list(var-prefixer(tab-width), 100%);\n        text-align: var-list(var-prefixer(tab-text-align), center);\n        text-decoration: var-list(var-prefixer(tab-text-decoration), none);\n        padding: var-list(var-prefixer(tab-padding), --tct-scale-2, --app-scale-2x, 10px);\n        color: var-list(var-prefixer(tab-inactive-color), inherit);\n        font-size: var-list(var-prefixer(tab-font-size), 17px);\n        display: block;\n        transition:\n            color var-list(--tct-tween-2, --app-tween-2, unquote('0.4s ease')),\n            border-color var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n\n        :host([type='section']) & {\n            --comp-tab-section-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px)\n                var-list(--tct-scale-1, --app-scale-1x, 5px)};\n            font-size: var-list(--tct-tab-section-font-size, inherit);\n            padding: var-list(var-prefixer(tab-section-padding), --comp-tab-section-padding);\n        }\n\n        &:hover {\n            color: var-list(var-prefixer(tab-hover-color), var-prefixer(tab-active-color), #2e2e2e);\n            background: var-list(--tct-tab-hover-background, var-prefixer(tab-hover-bg-color), inherit);\n            width: var-list(var-prefixer(tab-hover-width), 100%);\n        }\n\n        &[aria-selected='true'] {\n            color: var-list(var-prefixer(tab-active-color), #2e2e2e);\n            border-color: var-list(var-prefixer(tab-active-border-color), currentcolor);\n            border-style: var-list(var-prefixer(tab-active-border-style), solid);\n            width: var-list(var-prefixer(tab-active-width), 100%);\n            background: var-list(--tct-tab-active-background, var-prefixer(tab-active-bg-color), inherit);\n        }\n\n        :host([color='alt']) & {\n            color: var-list(var-prefixer(tab-alt-inactive-color), inherit);\n\n            &:hover,\n            &[aria-selected='true'] {\n                color: var-list(var-prefixer(tab-alt-active-color), inherit);\n            }\n        }\n\n        @media screen and (max-width: 767px) {\n            --comp-tab-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px)\n                var-list(--tct-scale-1, --app-scale-1x, 5px)};\n            font-size: inherit;\n            padding: var-list(var-prefixer(tab-padding), --comp-tab-padding);\n        }\n    }\n}\n\n.tab-content {\n    --comp-tab-content-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px) 0};\n    padding: var-list(\n        --tct-tab-container-content-padding,\n        var-prefixer(tab-content-padding),\n        --comp-tab-content-padding\n    );\n    background: var-list(--tct-tab-container-content-backgrond, none);\n\n    &:focus {\n        outline: none;\n        box-shadow: none;\n    }\n}\n\n.gradient-left,\n.gradient-right {\n    z-index: 1;\n    position: absolute;\n    top: 0;\n    height: 100%;\n    width: 44px;\n}\n\n.gradient-left {\n    background-image: linear-gradient(to left, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);\n    left: 0;\n}\n\n.gradient-right {\n    background-image: linear-gradient(to right, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);\n    right: 0;\n}\n\n.btn-left,\n.btn-right {\n    --tct-icon-size: 18px;\n    --tct-btn-icon-hover-background: transparent;\n    --tct-btn-icon-width: 22px;\n    --tct-icon-stroke-primary: #{var-list(var-prefixer(stepper-scroll-arrow-color), --t-text, #4d4d4d)};\n\n    position: absolute;\n    top: calc(50% - 22px);\n    z-index: 2;\n    q2-icon {\n        --tct-icon-stroke-width: 3;\n    }\n}\n\n.btn-left {\n    left: 0;\n}\n\n.btn-right {\n    right: 0;\n}\n\n.tab-pane-badge {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    q2-badge {\n        margin-left: 5px;\n        margin-right: 5px;\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Element,\n    Event,\n    EventEmitter,\n    State,\n    Listen,\n    Watch,\n    h,\n    Fragment,\n    Method,\n} from '@stencil/core';\nimport { createGuid, loc, overrideFocus, isEventFromElement } from 'src/utils';\nimport { JSX } from '../../components';\nimport { Q2Badge } from '../q2-badge/q2-badge';\n\ntype TabPane = {\n    label: string;\n    value: string;\n    badgeCount: number;\n    badgeDescription: string;\n    badgeTheme: Q2Badge['theme'];\n    badgeStatus: Q2Badge['status'];\n};\n\n@Component({ tag: 'q2-tab-container', shadow: true, styleUrl: 'q2-tab-container.scss' })\nexport class Q2TabContainer implements ComponentInterface {\n    // #region Own Properties\n\n    guid: number = createGuid();\n    lastScrolled: number = new Date(null).getTime();\n    listElement: HTMLUListElement;\n    mutationObserver: MutationObserver;\n    resizeObserver: ResizeObserver;\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    hasLeft: boolean = false;\n\n    @State()\n    hasRight: boolean = false;\n\n    @State()\n    scrollEnabled: boolean = false;\n\n    @State()\n    showScrollLeft: boolean = false;\n\n    @State()\n    showScrollRight: boolean = false;\n\n    @State()\n    tabs: TabPane[];\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Controls which variables are used to color the tab controls.\n     *\n     * - `undefined` (default)\n     *   - Uses `--t-tab-active` and `--t-tab-inactive`.\n     * - `alt`\n     *   - Uses `--t-tab-alt-active` and `--t-tab-alt-inactive`.\n     *   - The default fallback for these variables is `inherit`.\n     */\n    @Prop({ reflect: true })\n    color: 'alt' | undefined;\n\n    /**\n     * Used to establish a relationship between `q2-tab-container` and its associated tab panes.\n     * @warning\n     * The element can fail if this property is not set. Nested tab containers without the `name` property will not render correctly.\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /** Controls visibility of tab list in a print view. Tab content will still be visible even if `noPrint` is true. */\n    @Prop({ reflect: true })\n    noPrint: boolean = false;\n\n    /** Determines the font size of the tab controls. */\n    @Prop({ reflect: true })\n    type: 'main' | 'section';\n\n    /** Corresponds to the value of the selected tab pane. */\n    @Prop({ reflect: true, mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the selected tab changes.\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ value: string }>;\n\n    /**\n     * Emitted when the component has finished rendering.\n     * @private\n     */\n    @Event()\n    settled: EventEmitter<undefined>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.resizeObserver?.disconnect();\n        this.resizeObserver = null;\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        const observer = new MutationObserver(this.updateTabData);\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n        this.resizeObserver = new ResizeObserver(() => this.checkScrollState());\n        this.updateTabData();\n    }\n\n    componentDidLoad() {\n        this.resizeObserver?.observe(this.listElement);\n        this.checkScrollState();\n        overrideFocus(this.hostElement);\n        const index = this.tabs.findIndex(el => el.value === this.value);\n        this.scheduledAfterRender.push(() => {\n            const hasTabs = this.tabs.length > 0;\n            if (!hasTabs) return;\n            const tab = this.moveToTab(Math.max(index, 0), false);\n            this.value = tab.dataset.value;\n        });\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n        this.settled.emit();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('badge')\n    onBadge() {\n        this.setTabs();\n    }\n\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange) {\n            this.value = event.detail.value;\n        }\n    }\n\n    @Listen('focus')\n    onFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        const index = this.tabs.findIndex(el => el.value === this.selectedTabValue);\n        this.moveToTab(index, true);\n    }\n\n    @Listen('resize', { target: 'window' })\n    onResize() {\n        this.checkScrollState();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * A method to select a tab pane corresponding with the value.\n     *\n     * @testOnly\n     */\n    @Method()\n    async selectTab(value: string) {\n        const paneButton = this.hostElement.shadowRoot.querySelector(`[test-id=\"tabLink\"][data-value=\"${value}\"]`);\n        (paneButton as HTMLButtonElement)?.click();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('name')\n    nameObserver() {\n        this.updateTabData();\n    }\n\n    @Watch('value')\n    valueObserver() {\n        this.updateTabData();\n        this.scheduledAfterRender.push(this.resizeIframe);\n        const index = this.tabs.findIndex(el => el.value === this.value);\n        if (index > -1) {\n            this.scheduledAfterRender.push(() => this.moveToTab(index, false));\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get selectedTabValue() {\n        return this.value || this.tabPanes[0].value || '';\n    }\n\n    get tabList() {\n        return this.hostElement.shadowRoot.querySelector('.tab-list');\n    }\n\n    get tabPanes() {\n        const tabPanes = this.hostElement.querySelectorAll<HTMLQ2TabPaneElement | HTMLTectonTabPaneElement>(\n            'q2-tab-pane, tecton-tab-pane'\n        );\n\n        if (tabPanes.length === 0) {\n            return [];\n        }\n\n        return Array.from(tabPanes).filter(pane => pane.name === this.name);\n    }\n\n    checkScrollState = () => {\n        if (!this.listElement) return;\n        const { scrollLeft, scrollWidth, clientWidth } = this.listElement;\n        this.scrollEnabled = scrollWidth > clientWidth;\n        this.showScrollLeft = scrollLeft > 0;\n        this.showScrollRight = scrollWidth > Math.ceil(scrollLeft) + clientWidth;\n    };\n\n    moveToAdjacentTab = (value: string, direction: 'next' | 'prev' | 'first' | 'last') => {\n        const index = this.tabs.map(({ value }) => value).indexOf(value);\n\n        let newIndex;\n        switch (direction) {\n            case 'next':\n                newIndex = Math.min(index + 1, this.tabs.length - 1);\n                break;\n\n            case 'prev':\n                newIndex = Math.max(index - 1, 0);\n                break;\n\n            case 'first':\n                newIndex = 0;\n                break;\n\n            case 'last':\n                newIndex = this.tabs.length - 1;\n                break;\n        }\n\n        if (index === newIndex) return;\n\n        this.moveToTab(newIndex, true);\n    };\n\n    moveToTab = (index: number, shouldFocus: boolean = true) => {\n        const focusedValue = this.tabs[index].value;\n        const focusedTab = this.listElement.querySelector<HTMLButtonElement>(`[data-value=\"${focusedValue}\"]`);\n        if (shouldFocus) {\n            focusedTab.focus({ preventScroll: true });\n        }\n\n        const left = focusedTab.offsetLeft - this.listElement.clientWidth / 2;\n        this.listElement.scrollTo({\n            left,\n            behavior: 'smooth',\n        });\n\n        return focusedTab;\n    };\n\n    onScrollBtnClick = (direction?: 'left' | 'right') => {\n        const { scrollLeft, scrollWidth, clientWidth } = this.listElement;\n        const halfWidth = Math.floor(clientWidth / 2);\n        let scrollAmount: number = 0;\n        if (direction === 'left') {\n            scrollAmount = -Math.min(halfWidth, Math.abs(scrollLeft));\n        } else {\n            scrollAmount = Math.min(halfWidth, Math.abs(scrollWidth - scrollLeft - clientWidth));\n        }\n        this.listElement.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n    };\n\n    onSlotChange = () => {\n        this.checkScrollState();\n    };\n\n    onTabClick = (event: MouseEvent) => {\n        const targetValue = ((event.target as HTMLButtonElement).closest('button[role=\"tab\"]') as HTMLButtonElement)\n            .dataset.value;\n        const isAlreadySelected = this.value === targetValue;\n        if (isAlreadySelected) return;\n\n        this.change.emit({\n            value: targetValue,\n        });\n    };\n\n    onTabKeyDown = (event: KeyboardEvent) => {\n        const value = (event.target as HTMLElement).dataset.value;\n        switch (event.key) {\n            case 'ArrowRight':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'next');\n                break;\n\n            case 'ArrowLeft':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'prev');\n                break;\n\n            case 'Home':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'first');\n                break;\n\n            case 'End':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'last');\n                break;\n\n            case 'Space':\n            case 'Enter':\n                event.preventDefault();\n                this.change.emit({ value });\n                break;\n        }\n    };\n\n    resizeIframe() {\n        return window.TectonElements?.resizeIframe?.();\n    }\n\n    setTabs = () => {\n        this.tabs = this.tabPanes.map(({ label, value, badgeCount, badgeDescription, badgeTheme, badgeStatus }) => ({\n            label: (label && loc(label)) || '',\n            value,\n            badgeCount,\n            badgeDescription,\n            badgeTheme,\n            badgeStatus,\n        }));\n    };\n\n    updateTabData = () => {\n        this.updateTabPaneProps();\n        this.setTabs();\n    };\n\n    updateTabPaneProps = () => {\n        this.tabPanes.forEach((tab, index) => {\n            tab.selected = tab.value === this.selectedTabValue;\n            tab.guid = this.guid;\n            tab.index = index;\n        });\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderTab(tab: TabPane, index: number): JSX.IntrinsicElements {\n        const { label, value } = tab;\n        const isSelected = this.selectedTabValue === value;\n        return (\n            <li role=\"presentation\">\n                <button\n                    id={`tab-${this.guid}-${index}`}\n                    data-value={value}\n                    test-id=\"tabLink\"\n                    tabIndex={isSelected ? 0 : -1}\n                    role=\"tab\"\n                    aria-selected={`${isSelected}`}\n                    onClick={this.onTabClick}\n                    onKeyDown={this.onTabKeyDown}\n                >\n                    {tab.badgeCount === undefined ? label : this.renderTabWithBadge(tab, isSelected)}\n                </button>\n            </li>\n        );\n    }\n\n    renderTabWithBadge(tab: TabPane, isSelected: boolean): JSX.IntrinsicElements {\n        let theme;\n        if (!tab.badgeStatus && isSelected) theme = tab.badgeTheme || 'primary';\n        let description;\n        if (tab.badgeDescription) description = loc(tab.badgeDescription);\n        else if (tab.badgeStatus) description = loc(`tecton.element.tab.pane.${tab.badgeStatus}`, [tab.badgeCount]);\n        else description = loc('tecton.element.tab.pane.new');\n\n        return (\n            <div\n                class=\"tab-pane-badge\"\n                aria-label={`${tab.label}, ${tab.badgeCount} ${description}`}\n            >\n                {tab.label}\n                <q2-badge\n                    value={tab.badgeCount}\n                    theme={theme}\n                    status={tab.badgeStatus}\n                />\n            </div>\n        );\n    }\n\n    render() {\n        return (\n            <Fragment>\n                <div class=\"tab-container\">\n                    {this.scrollEnabled && (\n                        <Fragment>\n                            <div\n                                class=\"gradient-left\"\n                                hidden={!this.showScrollLeft}\n                            ></div>\n                            <div\n                                class=\"gradient-right\"\n                                hidden={!this.showScrollRight}\n                            ></div>\n\n                            <q2-btn\n                                class=\"btn-left\"\n                                hidden={!this.showScrollLeft}\n                                onClick={() => this.onScrollBtnClick('left')}\n                            >\n                                <q2-icon\n                                    type=\"chevron-left\"\n                                    label=\"scroll left\"\n                                ></q2-icon>\n                            </q2-btn>\n\n                            <q2-btn\n                                class=\"btn-right\"\n                                hidden={!this.showScrollRight}\n                                onClick={() => this.onScrollBtnClick('right')}\n                            >\n                                <q2-icon\n                                    type=\"chevron-right\"\n                                    label=\"scroll right\"\n                                ></q2-icon>\n                            </q2-btn>\n                        </Fragment>\n                    )}\n\n                    <ul\n                        onScroll={this.checkScrollState}\n                        ref={el => (this.listElement = el)}\n                        class={this.noPrint ? 'no-print' : null}\n                        role=\"tablist\"\n                    >\n                        {this.tabs.map((tab, index) => this.renderTab(tab, index))}\n                    </ul>\n                </div>\n                <div class=\"tab-content\">\n                    <slot onSlotchange={() => this.onSlotChange()} />\n                </div>\n            </Fragment>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}

package/dist/components/q2-tab-pane.js

@@ -17,7 +17,7 @@ const Q2TabPane$1 = /*@__PURE__*/ proxyCustomElement(class Q2TabPane extends HTM
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '05985ac5ce92f907dd828886688517e97a6095d3', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, h("slot", { key: 'a4f5460e2822722178a05a5424f4dbdfae2615fe' })));
+        return (h("div", { key: '7c5d922ccb07c10578bcbedf65f72f1a2cf2df81', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, h("slot", { key: '36948abfd184cde3805c792ac8f2f975a49f50a4' })));
     }
     static get watchers() { return {
         "badgeCount": ["badgeObserver"],

package/dist/components/q2-tag.js

@@ -201,7 +201,7 @@ const Q2Tag$1 = /*@__PURE__*/ proxyCustomElement(class Q2Tag extends HTMLElement
         if (this.optionCount)
             wrapperClassNames.push('has-options');
         const shouldShowOptions = this.optionCount > 0;
-        return (h(Host, { key: 'ed90a49c070f962915ed378add016984189293b1', role: shouldShowOptions ? 'list' : undefined }, h("click-elsewhere", { key: 'c251c70d427dca4d9a9c6eef3d13aba0f34f08d8', onChange: this.onClickElsewhere }, shouldShowOptions ? (h(Fragment, null, h("div", { class: "btn-wrapper", onClick: this.handleWrapperClick }, h("button", { class: "tag-wrapper", ref: el => (this.dropdownBtn = el), "test-id": "btn-control", type: "button", role: "combobox", onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, "aria-controls": "option-list", "aria-expanded": open ? 'true' : 'false', "aria-describedby": "option-description" }, h("div", { class: wrapperClassNames.join(' ') }, loc(this.label)), h("q2-icon", { type: "options" }))), this.renderHiddenElement())) : (h("div", { class: "tag-wrapper", onClick: e => e.stopPropagation() }, h("div", { class: wrapperClassNames.join(' ') }, h("slot", { name: "decorator" }), loc(this.label)))), shouldShowOptions && (h("q2-popover", { key: 'a13655351da147a5ec0d848820dd20c835996601', ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, maxHeight: this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("q2-option-list", { key: 'f754d92a69cc3fd402189e078ccd3fc1df6f200d', id: "option-list", ref: el => (this.optionList = el), onChange: this.handleChange, type: "menu", align: "right", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", { key: 'd5be46ddbdf98a43ce1cbb2062e2e36ff750e1ca' })))))));
+        return (h(Host, { key: 'f493afbfd4156f8998a9a54323d605a66bacede4', role: shouldShowOptions ? 'list' : undefined }, h("click-elsewhere", { key: 'b71c3d5f05df3eb435ecd7e91a9bdf6885b0f9cc', onChange: this.onClickElsewhere }, shouldShowOptions ? (h(Fragment, null, h("div", { class: "btn-wrapper", onClick: this.handleWrapperClick }, h("button", { class: "tag-wrapper", ref: el => (this.dropdownBtn = el), "test-id": "btn-control", type: "button", role: "combobox", onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, "aria-controls": "option-list", "aria-expanded": open ? 'true' : 'false', "aria-describedby": "option-description" }, h("div", { class: wrapperClassNames.join(' ') }, loc(this.label)), h("q2-icon", { type: "options" }))), this.renderHiddenElement())) : (h("div", { class: "tag-wrapper", onClick: e => e.stopPropagation() }, h("div", { class: wrapperClassNames.join(' ') }, h("slot", { name: "decorator" }), loc(this.label)))), shouldShowOptions && (h("q2-popover", { key: '7004bdc0077435dca4075f82fc9e269ef233a05b', ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, maxHeight: this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("q2-option-list", { key: '6629d4ac91f64091bdaf04116cffdc1e00cefe43', id: "option-list", ref: el => (this.optionList = el), onChange: this.handleChange, type: "menu", align: "right", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", { key: '31581faded364d3f1fcee59288eea05b313baaad' })))))));
     }
     get hostElement() { return this; }
     static get style() { return q2TagCss; }

package/dist/components/q2-textarea.js

@@ -279,7 +279,7 @@ const Q2Textarea$1 = /*@__PURE__*/ proxyCustomElement(class Q2Textarea extends H
         ]))));
     }
     render() {
-        return (h("div", { key: '7af2950b0ba4847bb9155af579503c306eb3b157', class: this.wrapperClasses }, renderLabel(this), h("div", { key: 'b2f86325ea8f3955045b302395bf4bd7d8049fda', class: "content-container", ref: el => (this.contentContainer = el) }, this.renderInput(), this.maxlength ? this.renderMaxLength() : '', renderMessages(this))));
+        return (h("div", { key: '927b1e199637b14f438e9499cb7b3ac7bf28e7e7', class: this.wrapperClasses }, renderLabel(this), h("div", { key: 'f3315fc84e3e7bb6a48b52979be6d53aa80c51c2', class: "content-container", ref: el => (this.contentContainer = el) }, this.renderInput(), this.maxlength ? this.renderMaxLength() : '', renderMessages(this))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/tecton-tab-pane.js

@@ -53,9 +53,9 @@ const TectonTabPane$1 = /*@__PURE__*/ proxyCustomElement(class TectonTabPane ext
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '6e4abfcaba334db963522f7a29b6fb38805922cb', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, this.selected && this.provided !== undefined && !this.provided && (h("div", { key: 'cd325ecea5aa562f191ea7f76fe2aae07b43dfca' }, h("slot", { key: '4fb53b59bba334fb6ecdf72c4cf08d23d8ff8fba', name: "loading-wrapper" }), h("iframe", { key: 'a3e11dfdd7f3d1bd3df7b2dc0d64c79ed14bd272', hidden: true, name: this.moduleId, scrolling: "no", src: this.showForm && this.authPayload.length ? '' : this.url || '', "data-module-id": this.moduleId, style: this.minHeight ? { minHeight: this.minHeight } : null, onLoad: this.onIFrameLoad, title: this.iframeTitle, allow: "geolocation; camera" }), this._showForm && this.authPayload ? (h("form", { hidden: true, method: "post", action: this.url, target: this.moduleId, encType: "multipart/form-data" }, this.authPayload.map(element => {
+        return (h("div", { key: '73b4e71d64ac9bc1cbbbdeeef1aa240c335fcc30', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, this.selected && this.provided !== undefined && !this.provided && (h("div", { key: 'a7f0976298111a157a7e765e963f274217046451' }, h("slot", { key: 'a922e05be53e390d24e2d486ab3a0a5714cbd318', name: "loading-wrapper" }), h("iframe", { key: '64560f8c582c097145d9e94157c66a842accc4b3', hidden: true, name: this.moduleId, scrolling: "no", src: this.showForm && this.authPayload.length ? '' : this.url || '', "data-module-id": this.moduleId, style: this.minHeight ? { minHeight: this.minHeight } : null, onLoad: this.onIFrameLoad, title: this.iframeTitle, allow: "geolocation; camera" }), this._showForm && this.authPayload ? (h("form", { hidden: true, method: "post", action: this.url, target: this.moduleId, encType: "multipart/form-data" }, this.authPayload.map(element => {
             return (h("input", { type: "hidden", value: element.value, name: element.key }));
-        }))) : (''))), h("div", { key: 'd93d87fd07e6612a88e6f5773e738b225b84e1f2', class: "slot-wrapper", hidden: this.selected && this.provided !== undefined && !this.provided }, h("slot", { key: '818245dacf168e38c11942b7e3e7f843082af831' }))));
+        }))) : (''))), h("div", { key: 'f50f89a24f7236fbd17876898d88b9b9f90bcbba', class: "slot-wrapper", hidden: this.selected && this.provided !== undefined && !this.provided }, h("slot", { key: 'f9b03bf9d824dd3e9b558e340567a48052b87bb7' }))));
     }
     get hostElement() { return this; }
     static get watchers() { return {