q2-tecton-elements 1.69.1 → 1.70.0

package/dist/esm/q2-stepper-vertical.entry.js

@@ -1,8 +1,9 @@
 import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-Cqkz7Bnm.js';
-import { o as overrideFocus, i as isEventFromElement, c as createGuid, l as loc } from './index-Bx4m6N0g.js';
+import { c as createGuid, o as overrideFocus, i as isEventFromElement, l as loc } from './index-Cps4jSQM.js';
 import { m as mirrorEmit } from './mirror-emit-DUjY_ucm.js';
+import { s as sanitizeHTMLString } from './sanitize-html-string-DPHNpMWE.js';
 
-const q2StepperVerticalCss = () => `*{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:grid;grid-template-columns:var(--tct-stepper-vertical-list-width, var(--tct-advanced-stepper-list-width, var(--t-advanced-stepper-list-width, 180px))) 1fr;gap:var(--tct-stepper-vertical-layout-gap, var(--tct-advanced-stepper-layout-gap, var(--t-advanced-stepper-layout-gap, 120px)))}.step-label,.step-child-label{color:var(--comp-btn-label-color);font-size:var(--comp-btn-label-font-size);font-weight:var(--comp-label-font-weight, 400);min-height:1.5em}.step-label{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-label-line-count, var(--tct-advanced-stepper-label-line-count, var(--t-advanced-stepper-label-line-count, 2)));-webkit-box-orient:vertical}[aria-selected=true] .step-label{font-weight:var(--tct-stepper-vertical-btn-active-font-weight, var(--tct-advanced-stepper-btn-active-font-weight, var(--t-advanced-stepper-btn-active-font-weight, 600)))}[aria-describedby] .step-label{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-label-line-count, var(--tct-advanced-stepper-label-line-count, var(--t-advanced-stepper-label-line-count, 1)));-webkit-box-orient:vertical}.step-child-label{grid-area:content;color:var(--comp-btn-label-color)}.step-description{color:var(--tct-stepper-vertical-description-color, var(--tct-advanced-stepper-description-color, var(--t-advanced-stepper-description-color, var(--t-textA, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-stepper-vertical-description-font-size, var(--tct-advanced-stepper-description-font-size, var(--t-advanced-stepper-description-font-size, var(--app-font-size-small, 12px))));padding-bottom:0.2em}ul{--comp-top-btn-icon-size:var(--tct-stepper-vertical-btn-icon-size, var(--tct-advanced-stepper-btn-icon-size, var(--t-advanced-stepper-btn-icon-size, 24px)));--comp-btn-icon-size:var(--comp-top-btn-icon-size);--comp-btn-icon-visibility:var(--tct-stepper-vertical-btn-icon-visibility, visible);--comp-btn-content-gap:var(--tct-stepper-vertical-btn-gap, var(--tct-advanced-stepper-btn-gap, var(--t-advanced-stepper-btn-gap, var(--app-scale-3x, 15px))));--comp-btn-label-font-size:var(--tct-stepper-vertical-btn-label-font-size, var(--tct-advanced-stepper-btn-label-font-size, var(--t-advanced-stepper-btn-label-font-size, 16px)));--comp-btn-label-color:var(--tct-stepper-vertical-label-color, var(--tct-advanced-stepper-label-color, var(--t-advanced-stepper-label-color, var(--t-text, #4d4d4d))));--comp-tween:var(--tct-stepper-vertical-tween, var(--tct-advanced-stepper-tween, var(--t-advanced-stepper-tween, var(--app-tween-1, 0.2s ease))));--comp-bullet-bg:var(--tct-stepper-vertical-bullet-active-background, var(--tct-advanced-stepper-bullet-active-bg, var(--t-advanced-stepper-bullet-active-bg, var(--t-primary, #0079c1))));list-style:none;margin:0;padding:0}ul ul{--comp-btn-icon-size:var(--tct-stepper-vertical-child-btn-icon-size, var(--tct-advanced-stepper-child-btn-icon-size, var(--t-advanced-stepper-child-btn-icon-size, 12px)));--comp-btn-content-gap:var(--tct-stepper-vertical-btn-gap, var(--tct-advanced-stepper-btn-gap, var(--t-advanced-stepper-btn-gap, var(--app-scale-2x, 10px))));--comp-btn-label-font-size:var(--tct-stepper-vertical-child-btn-label-font-size, var(--tct-advanced-stepper-child-btn-label-font-size, var(--t-advanced-stepper-child-btn-label-font-size, var(--app-font-size-small, 12px))))}ul ul[aria-hidden=true]{display:none}.step-btn,.step-child-btn{display:grid;grid-template-columns:var(--comp-btn-icon-size) 1fr;gap:var(--comp-btn-content-gap);text-align:var(--tct-stepper-vertical-btn-text-align, var(--tct-advanced-stepper-btn-text-align, var(--t-advanced-stepper-btn-text-align, start)));grid-template-areas:"icon content";align-items:center;width:100%;position:relative;background:transparent;border:0;cursor:pointer;padding:0;transition-property:box-shadow;outline:none;border-radius:var(--tct-stepper-vertical-step-focus-visible-border-radius, 0)}.step-btn[aria-disabled]:not(.pane-disabled),.step-child-btn[aria-disabled]:not(.pane-disabled){cursor:default;--comp-label-font-weight:300;--comp-btn-label-color:var(--tct-stepper-vertical-btn-locked-color, var(--tct-advanced-stepper-btn-locked-color, var(--t-advanced-stepper-btn-locked-color, var(--t-textA, rgba(77, 77, 77, 0.77)))))}.step-btn.pane-disabled,.step-child-btn.pane-disabled{cursor:not-allowed}.step-btn[aria-selected=true],.step-child-btn[aria-selected=true]{--comp-label-font-weight:600}.step-btn:focus-visible,.step-child-btn:focus-visible{box-shadow:var(--tct-stepper-vertical-step-focus-visible-box-shadow, var(--const-double-focus-ring))}.step-btn{min-height:var(--tct-stepper-vertical-btn-height, var(--tct-advanced-stepper-btn-height, var(--t-advanced-stepper-btn-height, 40px)));font-size:var(--tct-stepper-vertical-btn-font-size, var(--tct-advanced-stepper-btn-font-size, var(--t-advanced-stepper-btn-font-size, 16px)));--comp-active-color:var(--comp-bullet-bg)}.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.status-locked{cursor:not-allowed}.step-child-btn{--comp-active-color:var(--comp-bullet-bg);min-height:var(--tct-stepper-vertical-child-btn-height, var(--tct-advanced-stepper-child-btn-height, var(--t-advanced-stepper-child-btn-height, 30px)));padding-left:var(--tct-stepper-vertical-child-btn-left-padding, var(--tct-advanced-stepper-child-btn-left-padding, var(--t-advanced-stepper-child-btn-left-padding, var(--app-scale-2x, 10px))));font-size:var(--tct-stepper-vertical-child-btn-font-size, var(--tct-advanced-stepper-child-btn-font-size, var(--t-advanced-stepper-child-btn-font-size, 12px)));border-left-width:var(--tct-stepper-vertical-child-btn-left-border-width, var(--tct-advanced-stepper-child-btn-left-border-width, var(--t-advanced-stepper-child-btn-left-border-width, 3px)));border-left-style:var(--tct-stepper-vertical-child-btn-left-border-style, var(--tct-advanced-stepper-child-btn-left-border-style, var(--t-advanced-stepper-child-btn-left-border-style, solid)));border-left-color:transparent}.step-child-btn[aria-selected=true]{--comp-btn-label-color:var(--comp-active-color);border-left-color:var(--comp-active-color)}.step-child-btn.status-error{--comp-btn-label-color:var(--const-stoplight-alert, #d20a0a);--comp-active-color:var(--const-stoplight-alert, #d20a0a)}.step-child-btn.status-locked{cursor:not-allowed}.step-content{grid-area:content}.step-icon,.step-bubble,.step-child-icon{visibility:var(--comp-btn-icon-visibility);grid-area:icon;width:var(--comp-btn-icon-size);height:var(--comp-btn-icon-size);line-height:0}.step-icon q2-icon,.step-bubble q2-icon,.step-child-icon q2-icon{width:var(--comp-btn-icon-size);height:var(--comp-btn-icon-size);--tct-stoplight-warning:var(--comp-active-color)}.step-icon,.step-bubble{background:var(--comp-active-color);color:var(--t-base, #ffffff);border-radius:50%}.status-complete .step-icon,.status-error .step-icon,.status-complete .step-bubble,.status-error .step-bubble{background:var(--comp-active-color)}.step-icon q2-icon:before,.step-bubble q2-icon:before{content:"";display:block;background:var(--t-base, #ffffff);position:absolute;width:80%;height:80%;left:11%;top:11%;border-radius:50%}.status-locked .step-icon,.status-locked .step-bubble{background:var(--t-gray-12, #d9d9d9);color:var(--t-text, #4d4d4d)}[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)}.step-bubble{display:flex;justify-content:center;align-items:center;line-height:0}.step-child-icon q2-icon{--tct-icon-stroke-primary:var(--comp-active-color);--tct-icon-stroke-secondary:var(--comp-active-color)}[aria-selected=true] .step-child-icon q2-icon{fill:var(--comp-active-color);--tct-icon-stroke-secondary:var(--t-base, #ffffff)}.spacer{height:0;border-left-width:var(--tct-stepper-vertical-child-border-width, var(--tct-advanced-stepaer-child-border-width, var(--t-advanced-stepaer-child-border-width, 1px)));border-left-style:var(--tct-stepper-vertical-child-border-style, var(--tct-advanced-stepper-child-border-style, var(--t-advanced-stepper-child-border-style, solid)));border-left-color:var(--tct-stepper-vertical-child-border-color, var(--tct-advanced-stepper-child-border-color, var(--t-advanced-stepper-child-border-color, var(--t-gray-12, #d9d9d9))));overflow:hidden;margin-left:calc(var(--comp-top-btn-icon-size) / 2);transition:height var(--comp-tween)}.spacer.has-sibling{height:var(--tct-stepper-vertical-spacer-height, var(--tct-advanced-stepper-spacer-height, var(--t-advanced-stepper-spacer-height, var(--app-scale-6x, 30px))))}.spacer ul{opacity:0;transition:opacity var(--comp-tween)}.spacer.is-opening ul,.spacer.is-open ul{display:block;opacity:1 !important}.spacer.is-open{overflow:visible}`;
+const q2StepperVerticalCss = () => `*{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:grid;grid-template-columns:var(--tct-stepper-vertical-list-width, var(--tct-advanced-stepper-list-width, var(--t-advanced-stepper-list-width, 180px))) 1fr;gap:var(--tct-stepper-vertical-layout-gap, var(--tct-advanced-stepper-layout-gap, var(--t-advanced-stepper-layout-gap, 120px)))}.step-label,.step-child-label{color:var(--comp-btn-label-color);font-size:var(--comp-btn-label-font-size);font-weight:var(--comp-label-font-weight, 400);min-height:1.5em}.step-label{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-label-line-count, var(--tct-advanced-stepper-label-line-count, var(--t-advanced-stepper-label-line-count, 2)));-webkit-box-orient:vertical}[aria-selected=true] .step-label{font-weight:var(--tct-stepper-vertical-btn-active-font-weight, var(--tct-advanced-stepper-btn-active-font-weight, var(--t-advanced-stepper-btn-active-font-weight, 600)))}[aria-describedby] .step-label{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-label-line-count, var(--tct-advanced-stepper-label-line-count, var(--t-advanced-stepper-label-line-count, 1)));-webkit-box-orient:vertical}.step-child-label{grid-area:content;color:var(--comp-btn-label-color)}.step-description{color:var(--tct-stepper-vertical-description-color, var(--tct-advanced-stepper-description-color, var(--t-advanced-stepper-description-color, inherit)));font-size:var(--tct-stepper-vertical-description-font-size, var(--tct-advanced-stepper-description-font-size, var(--t-advanced-stepper-description-font-size, var(--app-font-size-small, 12px))));padding-bottom:0.2em}ul{--comp-top-btn-icon-size:var(--tct-stepper-vertical-btn-icon-size, var(--tct-advanced-stepper-btn-icon-size, var(--t-advanced-stepper-btn-icon-size, 24px)));--comp-btn-icon-size:var(--comp-top-btn-icon-size);--comp-btn-icon-visibility:var(--tct-stepper-vertical-btn-icon-visibility, visible);--comp-btn-content-gap:var(--tct-stepper-vertical-btn-gap, var(--tct-advanced-stepper-btn-gap, var(--t-advanced-stepper-btn-gap, var(--app-scale-3x, 15px))));--comp-btn-label-font-size:var(--tct-stepper-vertical-btn-label-font-size, var(--tct-advanced-stepper-btn-label-font-size, var(--t-advanced-stepper-btn-label-font-size, 16px)));--comp-btn-label-color:var(--tct-stepper-vertical-label-color, var(--tct-advanced-stepper-label-color, var(--t-advanced-stepper-label-color, inherit)));--comp-tween:var(--tct-stepper-vertical-tween, var(--tct-advanced-stepper-tween, var(--t-advanced-stepper-tween, var(--app-tween-1, 0.2s ease))));--comp-bullet-bg:var(--tct-stepper-vertical-bullet-active-background, var(--tct-advanced-stepper-bullet-active-bg, var(--t-advanced-stepper-bullet-active-bg, var(--t-primary, #0079c1))));list-style:none;margin:0;padding:0}ul ul{--comp-btn-icon-size:var(--tct-stepper-vertical-child-btn-icon-size, var(--tct-advanced-stepper-child-btn-icon-size, var(--t-advanced-stepper-child-btn-icon-size, 12px)));--comp-btn-content-gap:var(--tct-stepper-vertical-btn-gap, var(--tct-advanced-stepper-btn-gap, var(--t-advanced-stepper-btn-gap, var(--app-scale-2x, 10px))));--comp-btn-label-font-size:var(--tct-stepper-vertical-child-btn-label-font-size, var(--tct-advanced-stepper-child-btn-label-font-size, var(--t-advanced-stepper-child-btn-label-font-size, var(--app-font-size-small, 12px))))}ul ul[aria-hidden=true]{display:none}.step-btn,.step-child-btn{display:grid;grid-template-columns:var(--comp-btn-icon-size) 1fr;gap:var(--comp-btn-content-gap);text-align:var(--tct-stepper-vertical-btn-text-align, var(--tct-advanced-stepper-btn-text-align, var(--t-advanced-stepper-btn-text-align, start)));grid-template-areas:"icon content";align-items:center;width:100%;position:relative;background:transparent;border:0;cursor:pointer;padding:0;transition-property:box-shadow;outline:none;border-radius:var(--tct-stepper-vertical-step-focus-visible-border-radius, 0)}.step-btn[aria-disabled]:not(.pane-disabled),.step-child-btn[aria-disabled]:not(.pane-disabled){cursor:default;--comp-label-font-weight:300;--comp-btn-label-color:var(--tct-stepper-vertical-btn-locked-color, var(--tct-advanced-stepper-btn-locked-color, var(--t-advanced-stepper-btn-locked-color, var(--t-textA, rgba(77, 77, 77, 0.77)))))}.step-btn.pane-disabled,.step-child-btn.pane-disabled{cursor:not-allowed}.step-btn[aria-selected=true],.step-child-btn[aria-selected=true]{--comp-label-font-weight:600}.step-btn:focus-visible,.step-child-btn:focus-visible{box-shadow:var(--tct-stepper-vertical-step-focus-visible-box-shadow, var(--const-double-focus-ring))}.step-btn{min-height:var(--tct-stepper-vertical-btn-height, var(--tct-advanced-stepper-btn-height, var(--t-advanced-stepper-btn-height, 40px)));font-size:var(--tct-stepper-vertical-btn-font-size, var(--tct-advanced-stepper-btn-font-size, var(--t-advanced-stepper-btn-font-size, 16px)));--comp-active-color:var(--comp-bullet-bg)}.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.status-locked{cursor:not-allowed}.step-child-btn{--comp-active-color:var(--comp-bullet-bg);min-height:var(--tct-stepper-vertical-child-btn-height, var(--tct-advanced-stepper-child-btn-height, var(--t-advanced-stepper-child-btn-height, 30px)));padding-left:var(--tct-stepper-vertical-child-btn-left-padding, var(--tct-advanced-stepper-child-btn-left-padding, var(--t-advanced-stepper-child-btn-left-padding, var(--app-scale-2x, 10px))));font-size:var(--tct-stepper-vertical-child-btn-font-size, var(--tct-advanced-stepper-child-btn-font-size, var(--t-advanced-stepper-child-btn-font-size, 12px)));border-left-width:var(--tct-stepper-vertical-child-btn-left-border-width, var(--tct-advanced-stepper-child-btn-left-border-width, var(--t-advanced-stepper-child-btn-left-border-width, 3px)));border-left-style:var(--tct-stepper-vertical-child-btn-left-border-style, var(--tct-advanced-stepper-child-btn-left-border-style, var(--t-advanced-stepper-child-btn-left-border-style, solid)));border-left-color:transparent}.step-child-btn[aria-selected=true]{--comp-btn-label-color:var(--comp-active-color);border-left-color:var(--comp-active-color)}.step-child-btn.status-error{--comp-btn-label-color:var(--const-stoplight-alert, #d20a0a);--comp-active-color:var(--const-stoplight-alert, #d20a0a)}.step-child-btn.status-locked{cursor:not-allowed}.step-content{grid-area:content}.step-icon,.step-bubble,.step-child-icon{visibility:var(--comp-btn-icon-visibility);grid-area:icon;width:var(--comp-btn-icon-size);height:var(--comp-btn-icon-size);line-height:0}.step-icon q2-icon,.step-bubble q2-icon,.step-child-icon q2-icon{width:var(--comp-btn-icon-size);height:var(--comp-btn-icon-size);--tct-stoplight-warning:var(--comp-active-color)}.step-icon,.step-bubble{background:var(--comp-active-color);color:var(--t-base, #ffffff);border-radius:50%}.status-complete .step-icon,.status-error .step-icon,.status-complete .step-bubble,.status-error .step-bubble{background:var(--comp-active-color)}.step-icon q2-icon:before,.step-bubble q2-icon:before{content:"";display:block;background:var(--t-base, #ffffff);position:absolute;width:80%;height:80%;left:11%;top:11%;border-radius:50%}.status-locked .step-icon,.status-locked .step-bubble{background:var(--t-gray-12, #d9d9d9);color:var(--t-text, #4d4d4d)}[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)}.step-bubble{display:flex;justify-content:center;align-items:center;line-height:0}.step-child-icon q2-icon{--tct-icon-stroke-primary:var(--comp-active-color);--tct-icon-stroke-secondary:var(--comp-active-color)}[aria-selected=true] .step-child-icon q2-icon{fill:var(--comp-active-color);--tct-icon-stroke-secondary:var(--t-base, #ffffff)}.spacer{height:0;border-left-width:var(--tct-stepper-vertical-child-border-width, var(--tct-advanced-stepaer-child-border-width, var(--t-advanced-stepaer-child-border-width, 1px)));border-left-style:var(--tct-stepper-vertical-child-border-style, var(--tct-advanced-stepper-child-border-style, var(--t-advanced-stepper-child-border-style, solid)));border-left-color:var(--tct-stepper-vertical-child-border-color, var(--tct-advanced-stepper-child-border-color, var(--t-advanced-stepper-child-border-color, var(--t-gray-12, #d9d9d9))));overflow:hidden;margin-left:calc(var(--comp-top-btn-icon-size) / 2);transition:height var(--comp-tween)}.spacer.has-sibling{height:var(--tct-stepper-vertical-spacer-height, var(--tct-advanced-stepper-spacer-height, var(--t-advanced-stepper-spacer-height, var(--app-scale-6x, 30px))))}.spacer ul{opacity:0;transition:opacity var(--comp-tween)}.spacer.is-opening ul,.spacer.is-open ul{display:block;opacity:1 !important}.spacer.is-open{overflow:visible}`;
 
 const Q2StepperVertical = class {
     constructor(hostRef) {
@@ -39,6 +40,18 @@ const Q2StepperVertical = class {
                 this.buildPaneList();
             });
         };
+        this.extractDetails = (pane) => {
+            const { status, disabled } = pane;
+            if (!pane.id)
+                pane.id = `step-${createGuid()}`;
+            return {
+                id: pane.id,
+                label: this.getPaneSlotOrProperty(pane, 'label'),
+                description: this.getPaneSlotOrProperty(pane, 'description'),
+                status,
+                disabled,
+            };
+        };
         this.onStepClick = (event, stepId) => {
             event.stopPropagation();
             const { currentStepId } = this;
@@ -156,18 +169,6 @@ const Q2StepperVertical = class {
     get allRootPanes() {
         return Array.from(this.hostElement.querySelectorAll(':scope > q2-stepper-pane'));
     }
-    extractDetails(pane) {
-        const { label, description, status, disabled } = pane;
-        if (!pane.id)
-            pane.id = `step-${createGuid()}`;
-        return {
-            id: pane.id,
-            label,
-            description,
-            status,
-            disabled,
-        };
-    }
     focusStepBtn(stepId, forceFocus) {
         const stepBtn = this.hostElement.shadowRoot.querySelector(`button[id="${stepId}"]`);
         const isComponentActive = document.activeElement === this.hostElement;
@@ -177,6 +178,11 @@ const Q2StepperVertical = class {
             stepBtn.focus();
         }
     }
+    getPaneSlotOrProperty(pane, slotName) {
+        var _a;
+        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 : (pane[slotName] ? loc(pane[slotName]) : undefined);
+    }
     getStepId(currentStepId, goTo) {
         const allEnabledStepBtns = Array.from(this.hostElement.shadowRoot.querySelectorAll('ul:not([aria-hidden="true"]) > li > button:not([aria-disabled="true"])'));
         const currentStepIndex = allEnabledStepBtns.findIndex(btn => btn.getAttribute('id') === currentStepId);
@@ -262,7 +268,7 @@ const Q2StepperVertical = class {
             stepClasses.push(`status-${status}`);
         if (isPaneDisabled)
             stepClasses.push('pane-disabled');
-        return (h("li", { role: "presentation" }, h("button", { class: stepClasses.join(' '), type: "button", "aria-labelledby": labelId, "aria-label": btnLabel, "aria-selected": `${isCurrentStep}`, id: id, "aria-disabled": isLocked ? 'true' : null, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => !isLocked && this.onStepKeyDown(ev, id), onClick: ev => !isPaneDisabled && !isLocked && this.onStepClick(ev, id) }, statusIcon && (h("div", { class: "step-child-icon" }, h("q2-icon", { type: statusIcon }))), label && (h("div", { class: "step-child-label", id: labelId }, loc(label))))));
+        return (h("li", { role: "presentation" }, h("button", { class: stepClasses.join(' '), type: "button", "aria-labelledby": labelId, "aria-label": btnLabel, "aria-selected": `${isCurrentStep}`, id: id, "aria-disabled": isLocked ? 'true' : null, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => !isLocked && this.onStepKeyDown(ev, id), onClick: ev => !isPaneDisabled && !isLocked && this.onStepClick(ev, id) }, statusIcon && (h("div", { class: "step-child-icon" }, h("q2-icon", { type: statusIcon }))), label && (h("div", { class: "step-child-label", id: labelId, innerHTML: sanitizeHTMLString(label) })))));
     }
     renderSpacer(pane, stepLabel, isExpanded, isLastStep) {
         const shouldRender = (isLastStep && !!pane.children.length) || !isLastStep;
@@ -279,7 +285,7 @@ const Q2StepperVertical = class {
         const isCurrentStep = id === currentStepId;
         const labelId = label && `label-${id}`;
         const isLocked = status === 'locked';
-        const stepLabel = label && loc(label);
+        const stepLabel = label;
         const descriptionId = label && description && `description-${id}`;
         const btnLabel = !label && loc('tecton.element.advancedStepper.number', [`${stepNumber}`, `${structuredPanes.length}`]);
         let statusIcon;
@@ -294,10 +300,10 @@ const Q2StepperVertical = class {
             stepClasses.push('pane-disabled');
         const childIds = pane.children.map(child => child.id);
         const isExpanded = isCurrentStep || childIds.includes(currentStepId);
-        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-expanded": !!pane.children.length ? `${isExpanded}` : null, id: id, "aria-disabled": isLocked ? 'true' : null, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => !isLocked && this.onStepKeyDown(ev, id), onClick: ev => !isPaneDisabled && !isLocked && this.onStepClick(ev, id) }, statusIcon ? (h("div", { class: "step-icon" }, h("q2-icon", { type: statusIcon }))) : (h("div", { class: "step-bubble" }, stepNumber)), label && (h("div", null, h("div", { class: "step-label", id: labelId }, stepLabel), description && (h("div", { class: "step-description", id: descriptionId }, loc(description)))))), this.renderSpacer(pane, stepLabel, isExpanded, isLastStep)));
+        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-expanded": !!pane.children.length ? `${isExpanded}` : null, id: id, "aria-disabled": isLocked ? 'true' : null, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => !isLocked && this.onStepKeyDown(ev, id), onClick: ev => !isPaneDisabled && !isLocked && this.onStepClick(ev, id) }, statusIcon ? (h("div", { class: "step-icon" }, h("q2-icon", { type: statusIcon }))) : (h("div", { class: "step-bubble" }, stepNumber)), label && (h("div", null, h("div", { class: "step-label", id: labelId, innerHTML: sanitizeHTMLString(stepLabel) }), description && (h("div", { class: "step-description", id: descriptionId, innerHTML: sanitizeHTMLString(description) }))))), this.renderSpacer(pane, stepLabel, isExpanded, isLastStep)));
     }
     render() {
-        return (h(Fragment, { key: 'f0e7532121d04664984f5a8c20c1dbd777e8df32' }, h("ul", { key: '3b30070fb196c16f3194199903799d4c1ee7e042', role: "tablist" }, this.structuredPanes.map((pane, index) => this.renderStepBtn(pane, index))), h("div", { key: '453722ec203014925b5bf3a879e72947e114b5fb', role: "list" }, h("slot", { key: '6f1ae5614bcddacf4ecb6819370ac8c417e99228' }))));
+        return (h(Fragment, { key: '2771f649f3e5e8a37657d43678d83c67204ec466' }, h("ul", { key: 'f0909b76f95f6c3684a2cffa069d530be3d951ce', role: "tablist" }, this.structuredPanes.map((pane, index) => this.renderStepBtn(pane, index))), h("div", { key: '747eedecf0c9774439eb6ccf60528a521eb78685', role: "list" }, h("slot", { key: 'db02fc51b4811f510761365667516ce985c212d8' }))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

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

@@ -1,8 +1,9 @@
 import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-Cqkz7Bnm.js';
-import { c as createGuid, o as overrideFocus, i as isEventFromElement, l as loc } from './index-Bx4m6N0g.js';
+import { c as createGuid, o as overrideFocus, i as isEventFromElement, l as loc } from './index-Cps4jSQM.js';
 import { m as mirrorEmit } from './mirror-emit-DUjY_ucm.js';
+import { s as sanitizeHTMLString } from './sanitize-html-string-DPHNpMWE.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-divider-color:var(--tct-stepper-bullet-active-divider-color, var(--comp-bullet-background));--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-btn-icon-visibility:var(--tct-stepper-btn-icon-visibility, visible);--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;border-radius:var(--tct-stepper-btn-border-radius, 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);--comp-default-box-shadow:0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);--comp-bullet-active-box-shadow:var(--tct-stepper-bullet-active-box-shadow, var(--comp-default-box-shadow))}.step-btn.status-complete{--comp-active-color:var(--const-stoplight-success, #0e8a00);--comp-default-box-shadow:0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);--comp-bullet-active-box-shadow:var(--tct-stepper-bullet-complete-box-shadow, var(--comp-default-box-shadow));--tct-stoplight-success:var(--comp-active-color)}.step-btn.status-error{--comp-active-color:var(--const-stoplight-alert, #d20a0a);--comp-default-box-shadow:0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);--comp-bullet-active-box-shadow:var(--tct-stepper-bullet-error-box-shadow, var(--comp-default-box-shadow));--tct-stoplight-warning:var(--comp-active-color)}.step-btn:focus-visible{box-shadow:var(--tct-stepper-btn-focus-visible-box-shadow, var(--const-double-focus-ring))}.step-btn.pane-disabled{cursor:not-allowed}.step-btn[aria-disabled=true],.step-btn.pane-disabled{cursor:not-allowed}.step-btn[aria-disabled=true]:not(.pane-disabled),.step-btn[aria-disabled=true]:not(.pane-disabled)+.step-divider,.step-btn.pane-disabled:not(.pane-disabled),.step-btn.pane-disabled:not(.pane-disabled)+.step-divider{--comp-bullet-font-color:var(--tct-stepper-bullet-disabled-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-disabled-background, var(--tct-stepper-bullet-inactive-background, var(--tct-stepper-bullet-inactive-bg, var(--t-stepper-bullet-inactive-bg, var(--t-gray-12, #d9d9d9)))));--comp-divider-color:var(--tct-stepper-bullet-disabled-divider-color, var(--comp-bullet-background));--comp-bullet-inactive-box-shadow:var(--tct-stepper-bullet-disabled-box-shadow, none)}.step-icon,.step-bubble{visibility:var(--comp-btn-icon-visibility);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;box-shadow:var(--comp-bullet-inactive-box-shadow)}.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:var(--comp-bullet-active-box-shadow);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-divider-color);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;font-weight:var(--tct-stepper-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-divider-color:var(--tct-stepper-bullet-active-divider-color, var(--comp-bullet-background));--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-btn-icon-visibility:var(--tct-stepper-btn-icon-visibility, visible);--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;border-radius:var(--tct-stepper-btn-border-radius, 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);--comp-default-box-shadow:0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);--comp-bullet-active-box-shadow:var(--tct-stepper-bullet-active-box-shadow, var(--comp-default-box-shadow))}.step-btn.status-complete{--comp-active-color:var(--const-stoplight-success, #0e8a00);--comp-default-box-shadow:0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);--comp-bullet-active-box-shadow:var(--tct-stepper-bullet-complete-box-shadow, var(--comp-default-box-shadow));--tct-stoplight-success:var(--comp-active-color)}.step-btn.status-error{--comp-active-color:var(--const-stoplight-alert, #d20a0a);--comp-default-box-shadow:0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);--comp-bullet-active-box-shadow:var(--tct-stepper-bullet-error-box-shadow, var(--comp-default-box-shadow));--tct-stoplight-warning:var(--comp-active-color)}.step-btn:focus-visible{box-shadow:var(--tct-stepper-btn-focus-visible-box-shadow, var(--const-double-focus-ring))}.step-btn.pane-disabled{cursor:not-allowed}.step-btn[aria-disabled=true],.step-btn.pane-disabled{cursor:not-allowed}.step-btn[aria-disabled=true]:not(.pane-disabled),.step-btn[aria-disabled=true]:not(.pane-disabled)+.step-divider,.step-btn.pane-disabled:not(.pane-disabled),.step-btn.pane-disabled:not(.pane-disabled)+.step-divider{--comp-bullet-font-color:var(--tct-stepper-bullet-disabled-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-disabled-background, var(--tct-stepper-bullet-inactive-background, var(--tct-stepper-bullet-inactive-bg, var(--t-stepper-bullet-inactive-bg, var(--t-gray-12, #d9d9d9)))));--comp-divider-color:var(--tct-stepper-bullet-disabled-divider-color, var(--comp-bullet-background));--comp-bullet-inactive-box-shadow:var(--tct-stepper-bullet-disabled-box-shadow, none)}.step-icon,.step-bubble{visibility:var(--comp-btn-icon-visibility);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;box-shadow:var(--comp-bullet-inactive-box-shadow)}.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:var(--comp-bullet-active-box-shadow);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-divider-color);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, inherit)));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;font-weight:var(--tct-stepper-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, inherit));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 = class {
     constructor(hostRef) {
@@ -272,14 +273,14 @@ const Q2Stepper = class {
         if (isPaneDisabled)
             stepClasses.push('pane-disabled');
         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' : undefined, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => this.onStepKeyDown(ev, stepNumber), onClick: ev => !isPaneDisabled && !disabled && 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 => !isPaneDisabled && !disabled && 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: sanitizeHTMLString(label) })), labelId && descriptionId && (h("div", { class: "step-description", id: descriptionId, innerHTML: sanitizeHTMLString(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: 'dd38d7922ef9b468399b57f4e1d656b2213d6b32' }, h("div", { key: '92dc67bc25e5a5275241b91ec6cb968202e91af8', class: containerClasses.join(' ') }, scrollEnabled && (h(Fragment, { key: 'ef83e893c3dfe020cb1c561c1b0619f364c7f08f' }, h("div", { key: '9cf06f95042064daa7564a9927cf3f1ff9a227be', class: "gradient-left", hidden: !showScrollLeft }), h("div", { key: 'd9c58f971a8b2fd545c09e698d57baf356c3947b', class: "gradient-right", hidden: !showScrollRight }), h("q2-btn", { key: '38c601f9fe74886e912e983b9b52e7c1e1a0694e', class: "btn-left", hideLabel: true, hidden: !this.showScrollLeft, label: loc('tecton.element.stepper.scrollLeft'), onTctClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: 'a53ac3dc6ebd84e3d221136868df0861bc6acf4f', type: "chevron-left" })), h("q2-btn", { key: '38363d0a8a2d9fa96a919bf08d243ddb42d65552', class: "btn-right", hideLabel: true, hidden: !this.showScrollRight, label: loc('tecton.element.stepper.scrollRight'), onTctClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: '6da3f9a38d4b1bb375b25257634058c869f9478f', type: "chevron-right" })))), h("ul", { key: '2c5e3d0e0aebd5fa05ecce735232dd42d1aec470', onScroll: this.checkScrollState, ref: el => (this.listElement = el), role: "tablist" }, stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex)))), h("div", { key: '21e4f4c96ebcef94c73a29f468c820c9d4c22a57', role: "list" }, h("slot", { key: '84d871317ccc4471f1d954d469047bc6f97399cf', onSlotchange: () => this.onSlotChange() }))));
+        return (h(Fragment, { key: 'c1e21a36e0b2f684f4520b0f75f78affd73359bd' }, h("div", { key: '3791e857d27aa3fea928f663268f21270d499023', class: containerClasses.join(' ') }, scrollEnabled && (h(Fragment, { key: '19b689b2b56f52099f22f859264e33e16fd918bf' }, h("div", { key: '5b1b1e00034fa009c555924c2067fed6369740cb', class: "gradient-left", hidden: !showScrollLeft }), h("div", { key: 'b5de1b413f6c8ce006207926f26ae845594228eb', class: "gradient-right", hidden: !showScrollRight }), h("q2-btn", { key: '832a97c5619cadb1167f6e1e7ecd94ab4f5f3cb1', class: "btn-left", hideLabel: true, hidden: !this.showScrollLeft, label: loc('tecton.element.stepper.scrollLeft'), onTctClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: '3e53b2b2f19bbba59a37016b9cdf1a302b030b63', type: "chevron-left" })), h("q2-btn", { key: 'ffacbb0d2f9c15a503221a2dbc4662ba6f3c3272', class: "btn-right", hideLabel: true, hidden: !this.showScrollRight, label: loc('tecton.element.stepper.scrollRight'), onTctClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: '2c60dc5392c9c9eec99dd24b229bbd1fa5e9587f', type: "chevron-right" })))), h("ul", { key: '25806a72f9f0cda2e032a81dbaac9f808be385c9', onScroll: this.checkScrollState, ref: el => (this.listElement = el), role: "tablist" }, stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex)))), h("div", { key: '622b3ed56e3f66adc33bf197b7874a7b9bf8667f', role: "list" }, h("slot", { key: '73c4321743596227054e317c271bcc044179363b', onSlotchange: () => this.onSlotChange() }))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

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

@@ -0,0 +1,93 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Cqkz7Bnm.js';
+
+const q2SurfaceCss = () => `:host{--comp-surface-bg:transparent;--comp-surface-hover-background:var(--tct-surface-hover-background, var(--t-base-hover, #f2f2f2));--comp-surface-border-color:var(--tct-surface-border-color, var(--t-gray-12, #d9d9d9));--comp-surface-animation-duration:var(--tct-surface-animation-duration, 1s);--comp-surface-gradient-direction:var(--tct-surface-background-gradient-direction, to right bottom);--comp-surface-radius:0px}*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none}::-moz-focus-inner{border:none}:host{display:block;transition:box-shadow var(--tct-surface-tween, var(--app-tween-1, 0.2s ease)), border-radius var(--tct-surface-tween, var(--app-tween-1, 0.2s ease)), background var(--tct-surface-tween, var(--app-tween-1, 0.2s ease)), padding var(--tct-surface-tween, var(--app-tween-1, 0.2s ease))}.container{display:block;background:transparent;border-radius:var(--comp-surface-radius);transition:background var(--tct-surface-tween, var(--app-tween-1, 0.2s ease)), border-radius var(--tct-surface-tween, var(--app-tween-1, 0.2s ease)), box-shadow var(--tct-surface-tween, var(--app-tween-1, 0.2s ease))}:host([elevation="1"]){box-shadow:var(--tct-surface-elevation-1-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)))}:host([elevation="2"]){box-shadow:var(--tct-surface-elevation-2-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)))}:host([elevation="3"]){box-shadow:var(--tct-surface-elevation-3-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)))}:host([elevation="4"]){box-shadow:var(--tct-surface-elevation-4-box-shadow, var(--app-shadow-4, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)))}:host([elevation="5"]){box-shadow:var(--tct-surface-elevation-5-box-shadow, var(--app-shadow-5, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)))}:host([radius="1"]){--comp-surface-radius:var(--tct-surface-border-radius-1, var(--app-border-radius-1, 4px));border-radius:var(--comp-surface-radius)}:host([radius="2"]){--comp-surface-radius:var(--tct-surface-border-radius-2, var(--app-border-radius-2, 8px));border-radius:var(--comp-surface-radius)}:host([radius="3"]){--comp-surface-radius:var(--tct-surface-border-radius-3, var(--app-border-radius-3, 12px));border-radius:var(--comp-surface-radius)}:host([radius="4"]){--comp-surface-radius:var(--tct-surface-border-radius-4, var(--app-border-radius-4, 16px));border-radius:var(--comp-surface-radius)}:host([radius="5"]){--comp-surface-radius:var(--tct-surface-border-radius-5, var(--app-border-radius-5, 24px));border-radius:var(--comp-surface-radius)}:host([background=default]){--comp-surface-bg:var(--tct-surface-background-default, var(--t-base, #ffffff));--comp-surface-hover-background:var(--tct-surface-hover-background, var(--t-base-hover, #f2f2f2))}:host([background=primary]){--comp-surface-bg:var(--tct-surface-background-primary, var(--t-primary, #6a4a9e));--comp-surface-hover-background:var(--tct-surface-primary-hover-background, var(--t-primary-l2, #7d5ab8));color:var(--tct-surface-primary-font-color, var(--t-primary-text, #ffffff))}:host([background=secondary]){--comp-surface-bg:var(--tct-surface-background-secondary, var(--t-secondary, #b3c2cc));--comp-surface-hover-background:var(--tct-surface-secondary-hover-background, var(--t-secondary-l2, #c2cfd8));color:var(--tct-surface-secondary-font-color, var(--t-secondary-text, #1a1a1a))}:host([background=tertiary]){--comp-surface-bg:var(--tct-surface-background-tertiary, var(--t-tertiary, #e8f5fc));--comp-surface-hover-background:var(--tct-surface-tertiary-hover-background, var(--t-tertiary-l2, #edf7fd));color:var(--tct-surface-tertiary-font-color, var(--t-tertiary-text, #1a1a1a))}:host([background]) .container{background:var(--comp-surface-bg)}:host([background-gradient]) .container{background:linear-gradient(in oklch var(--comp-surface-gradient-direction), color-mix(in oklab, var(--comp-surface-bg), white 40%), var(--comp-surface-bg))}:host([border]) .container{border:1px solid var(--comp-surface-border-color)}:host([border=primary]) .container{border-color:var(--tct-surface-primary-border-color, var(--t-primary, #6a4a9e))}:host([border=secondary]) .container{border-color:var(--tct-surface-secondary-border-color, var(--t-secondary, #b3c2cc))}:host([border=tertiary]) .container{border-color:var(--tct-surface-tertiary-border-color, var(--t-tertiary, #e8f5fc))}:host([border-gradient]){padding:2px}:host([border-gradient]) .container{border-radius:calc(var(--comp-surface-radius) - 2px)}:host([border-gradient])[border] .container{border:none}:host([border-gradient]:not([background])){--comp-surface-bg:var(--tct-surface-background-default, var(--t-base, #ffffff))}:host([border-gradient]:not([background])) .container{background:var(--comp-surface-bg)}:host([border-gradient]:not([border])),:host([border-gradient][border=default]){background:linear-gradient(in oklch var(--tct-surface-border-gradient-direction, var(--tct-surface-background-gradient-direction, to right bottom)), color-mix(in oklab, var(--tct-surface-border-color, var(--t-gray-12, #d9d9d9)), white 40%), var(--tct-surface-border-color, var(--t-gray-12, #d9d9d9)))}:host([border-gradient][border=primary]){background:linear-gradient(in oklch var(--tct-surface-border-gradient-direction, var(--tct-surface-background-gradient-direction, to right bottom)), color-mix(in oklab, var(--tct-surface-primary-border-color, var(--t-primary, #6a4a9e)), white 40%), var(--tct-surface-primary-border-color, var(--t-primary, #6a4a9e)))}:host([border-gradient][border=secondary]){background:linear-gradient(in oklch var(--tct-surface-border-gradient-direction, var(--tct-surface-background-gradient-direction, to right bottom)), color-mix(in oklab, var(--tct-surface-secondary-border-color, var(--t-secondary, #b3c2cc)), white 40%), var(--tct-surface-secondary-border-color, var(--t-secondary, #b3c2cc)))}:host([border-gradient][border=tertiary]){background:linear-gradient(in oklch var(--tct-surface-border-gradient-direction, var(--tct-surface-background-gradient-direction, to right bottom)), color-mix(in oklab, var(--tct-surface-tertiary-border-color, var(--t-tertiary, #e8f5fc)), white 40%), var(--tct-surface-tertiary-border-color, var(--t-tertiary, #e8f5fc)))}:host([inset=compact]) .container{padding:var(--tct-surface-inset-compact, var(--app-scale-1x, 5px))}:host([inset=normal]) .container{padding:var(--tct-surface-inset-normal, var(--app-scale-3x, 15px))}:host([inset=comfortable]) .container{padding:var(--tct-surface-inset-comfortable, var(--app-scale-5x, 25px))}:host([inset-x=none]) .container{padding-inline:0}:host([inset-x=compact]) .container{padding-inline:var(--tct-surface-inset-compact, var(--app-scale-1x, 5px))}:host([inset-x=normal]) .container{padding-inline:var(--tct-surface-inset-normal, var(--app-scale-3x, 15px))}:host([inset-x=comfortable]) .container{padding-inline:var(--tct-surface-inset-comfortable, var(--app-scale-5x, 25px))}:host([inset-y=none]) .container{padding-block:0}:host([inset-y=compact]) .container{padding-block:var(--tct-surface-inset-compact, var(--app-scale-1x, 5px))}:host([inset-y=normal]) .container{padding-block:var(--tct-surface-inset-normal, var(--app-scale-3x, 15px))}:host([inset-y=comfortable]) .container{padding-block:var(--tct-surface-inset-comfortable, var(--app-scale-5x, 25px))}:host([clickable]){cursor:pointer}:host([clickable]):hover .container{background:var(--comp-surface-hover-background)}:host([clickable])[elevation="0"]:hover .container,:host([clickable]):not([elevation]):hover .container{box-shadow:var(--tct-surface-elevation-hover-0-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)))}:host([clickable])[elevation="1"]:hover .container{box-shadow:var(--tct-surface-elevation-hover-1-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)))}:host([clickable])[elevation="2"]:hover .container{box-shadow:var(--tct-surface-elevation-hover-2-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)))}:host([clickable])[elevation="3"]:hover .container{box-shadow:var(--tct-surface-elevation-hover-3-box-shadow, var(--app-shadow-4, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)))}:host([clickable])[elevation="4"]:hover .container{box-shadow:var(--tct-surface-elevation-hover-4-box-shadow, var(--app-shadow-5, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)))}:host([clickable])[elevation="5"]:hover .container{box-shadow:var(--tct-surface-elevation-hover-5-box-shadow, var(--app-shadow-5, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)))}:host([clickable]) .container:focus-visible{outline:none;box-shadow:var(--tct-surface-focus-visible-box-shadow, var(--const-double-focus-ring, 0 0 0 2px var(--t-base), 0 0 0 4px var(--const-focus-color), 0 0 0 6px var(--t-base)))}@keyframes q2-surface-bounce{from,20%,53%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translate3d(0, 0, 0)}40%,43%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -30px, 0) scaleY(1.1)}70%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -15px, 0) scaleY(1.05)}80%{transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translate3d(0, 0, 0) scaleY(0.95)}90%{transform:translate3d(0, -4px, 0) scaleY(1.02)}}@keyframes q2-surface-flash{from,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes q2-surface-pulse{from{transform:scale3d(1, 1, 1)}50%{transform:scale3d(1.05, 1.05, 1.05)}to{transform:scale3d(1, 1, 1)}}@keyframes q2-surface-tada{from{transform:scale3d(1, 1, 1)}10%,20%{transform:scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -1deg)}30%,50%,70%,90%{transform:scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, 1deg)}40%,60%,80%{transform:scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -1deg)}to{transform:scale3d(1, 1, 1)}}:host(.q2-surface-animate-bounce){animation:q2-surface-bounce var(--comp-surface-animation-duration) both;transform-origin:center bottom}:host(.q2-surface-animate-flash){animation:q2-surface-flash var(--comp-surface-animation-duration) both}:host(.q2-surface-animate-pulse){animation:q2-surface-pulse var(--comp-surface-animation-duration) both}:host(.q2-surface-animate-tada){animation:q2-surface-tada var(--comp-surface-animation-duration) both}`;
+
+const Q2Surface = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.tctClick = createEvent(this, "tctClick", 7);
+        // #region Own Properties
+        this._cancelAnimation = null;
+        /** Applies a gradient fade across the background.
+         *
+         * @info Direction and colors are customizable via CSS custom properties. */
+        this.backgroundGradient = false;
+        /**
+         * Renders the border as a gradient using the color set by the `border` prop. Takes precedence over a solid `border` when both are set.
+         *
+         * @info Requires `border` to be set to produce a colored gradient. Without `border`, falls back to the default border color.
+         */
+        this.borderGradient = false;
+        /** Makes the surface interactive, responding to clicks.
+         *
+         * @info Emits `tctClick` when clicked. */
+        this.clickable = false;
+        /** Gives the component a drop shadow.
+         *
+         * @info 0 means no shadow; higher values appear more elevated. */
+        this.elevation = 0;
+        /** Adds internal padding applied uniformly on all sides.
+         *
+         * @info Individual axes can be overridden with `inset-x` and `inset-y`. */
+        this.inset = 'none';
+        /** Adds corner rounding on a scale from 0 (sharp) to 5 (most rounded). */
+        this.radius = 0;
+    }
+    // #endregion
+    // #region Component Lifecycle Events
+    disconnectedCallback() {
+        var _a;
+        (_a = this._cancelAnimation) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
+    // #endregion
+    // #region Listeners
+    onClick() {
+        if (!this.clickable)
+            return;
+        this.tctClick.emit();
+    }
+    onKeydown(event) {
+        if (!this.clickable)
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.tctClick.emit();
+        }
+    }
+    // #endregion
+    // #region Public Methods API
+    /**
+     * Triggers a named animation on the surface. If an animation is already running, cancels it before starting the new one.
+     * @param animation The animation to play. Defaults to `'pulse'`.
+     * @returns A Promise that resolves when the animation finishes or is cancelled.
+     */
+    async animate(animation = 'pulse') {
+        var _a;
+        (_a = this._cancelAnimation) === null || _a === void 0 ? void 0 : _a.call(this);
+        return new Promise(resolve => {
+            const className = `q2-surface-animate-${animation}`;
+            const onEnd = () => {
+                this.hostElement.classList.remove(className);
+                this._cancelAnimation = null;
+                resolve();
+            };
+            this._cancelAnimation = () => {
+                this.hostElement.classList.remove(className);
+                this.hostElement.removeEventListener('animationend', onEnd);
+                this._cancelAnimation = null;
+                resolve();
+            };
+            this.hostElement.classList.add(className);
+            this.hostElement.addEventListener('animationend', onEnd, { once: true });
+        });
+    }
+    // #endregion
+    // #region Render Methods
+    render() {
+        return (h(Host, { key: '235f94ccfb0eb7167079e8e25ee78d652999f8e8' }, h("div", { key: 'b01d6e71bb4b8f1f583c63910d4b1eca757572dd', class: "container", role: this.clickable ? 'button' : undefined, tabIndex: this.clickable ? 0 : undefined }, h("slot", { key: '591dc9fcb51d6f238a6186f047661020be9ea800' }))));
+    }
+    get hostElement() { return getElement(this); }
+};
+Q2Surface.style = q2SurfaceCss();
+
+export { Q2Surface as q2_surface };

package/dist/esm/q2-tab-container.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-Cqkz7Bnm.js';
-import { c as createGuid, l as loc, o as overrideFocus, i as isEventFromElement } from './index-Bx4m6N0g.js';
+import { c as createGuid, l as loc, o as overrideFocus, i as isEventFromElement } from './index-Cps4jSQM.js';
 import { m as mirrorEmit } from './mirror-emit-DUjY_ucm.js';
 import { h as hasValidChildren, f as filterChildren } from './component-DaQM9u3s.js';
 
@@ -268,7 +268,7 @@ const Q2TabContainer = class {
         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: '0a0a2058f1c949d0dd724439274115e64d2c7dd4' }, h("div", { key: '1f9fb82b2777198077a11470eb36fc8440377e24', class: "tab-container" }, this.scrollEnabled && (h(Fragment, { key: '570d2fc54ee847f0b59f237ea299aacd71ce6c30' }, h("div", { key: '660b94c04439955c8a074155dc58219be6078e8c', class: "gradient-left", hidden: !this.showScrollLeft }), h("div", { key: 'cf7234df25acc428a7484dfc7bb0332a67378c31', class: "gradient-right", hidden: !this.showScrollRight }), h("q2-btn", { key: '606062d6fd19dfcc4be88221c41958fbf03e11d1', class: "btn-left", hidden: !this.showScrollLeft, onTctClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: '83ea86a0ceb25a38006399c577b8e450d8b15154', type: "chevron-left", label: "scroll left" })), h("q2-btn", { key: '5c8e4cd5777ddafc2b3dafcf288d636df29a5bfb', class: "btn-right", hidden: !this.showScrollRight, onTctClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: 'a452c64a7293ee46d0a9ef8239082f965f50d42e', type: "chevron-right", label: "scroll right" })))), h("ul", { key: '885b13b8f0d2c87ae27bb4802fbb5209dbb1663a', 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: 'eedebff87dc19e82bf8e192906642265ca27e030', class: "tab-content" }, h("slot", { key: 'e8eff4ef323a8330bad4f14f2843d094d9ead6e2', onSlotchange: () => this.onSlotChange() }))));
+        return (h(Fragment, { key: 'cfaf872008ad8687316955a725e7475d326b5ec2' }, h("div", { key: '8a61a84ecd4d1869fe53829ca908e99ec80b11be', class: "tab-container" }, this.scrollEnabled && (h(Fragment, { key: 'a77950455f6f6f9138d1174fa4db38bcde498cb5' }, h("div", { key: 'b195f6a34a9ed2ecbdf1bacd2d51a76f0861574e', class: "gradient-left", hidden: !this.showScrollLeft }), h("div", { key: 'f625095c68ad1bedd07d34149d28c27f12b2954d', class: "gradient-right", hidden: !this.showScrollRight }), h("q2-btn", { key: '96c26c6447708d2fcf102e53e984f9a71bc2d9b1', class: "btn-left", hidden: !this.showScrollLeft, onTctClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: 'feec85bd6bbbfeb99c520b6118c90190130d8dca', type: "chevron-left", label: "scroll left" })), h("q2-btn", { key: '8dc406d9e144e0d025e14d8a2e30f6010febafd6', class: "btn-right", hidden: !this.showScrollRight, onTctClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: '3a35b2d74d9f62f3934b667b2ceacf0e31ffb6f4', type: "chevron-right", label: "scroll right" })))), h("ul", { key: '8ba591207287d3aa2d20e70ec72c03a755879ab0', 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: '83ab595967887ca3d2a584f85519f23e101d02ff', class: "tab-content" }, h("slot", { key: '6458a9e54b310f85129497478757111501fcb06f', onSlotchange: () => this.onSlotChange() }))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

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

@@ -21,7 +21,7 @@ const Q2TabPane = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'f8b0c0d0b8dba3f96c30b96e215a7224b577604a', 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: '2472e51b0a1e78652fc8a1fd99d001802297aa14' })));
+        return (h("div", { key: '19abb08e46c23ce0be03d7d07a1bbe4c22e99786', 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: '42a7a3ac8fe64661ba2027c0c967fcfe3b4d20e7' })));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {