q2-tecton-elements 1.69.1 → 1.70.0

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

@@ -1,12 +1,14 @@
 import { proxyCustomElement as t, HTMLElement as e, createEvent as a, h as r, Fragment as i, transformTag as s } from "@stencil/core/internal/client";
 
-import { o as n, i as c, c as o, l } from "./index2.js";
+import { c as n, o as c, i as o, l } from "./index2.js";
 
 import { m as p } from "./mirror-emit.js";
 
-import { d } from "./q2-icon2.js";
+import { s as d } from "./sanitize-html-string.js";
 
-const b =  t(class extends e {
+import { d as b } from "./q2-icon2.js";
+
+const v =  t(class extends e {
   constructor(t) {
     super(), !1 !== t && this.__registerHost(), this.__attachShadow(), this.change = a(this, "change", 7), 
     this.tctChange = a(this, "tctChange", 7), this.scheduledAfterRender = [], 
@@ -27,6 +29,15 @@ const b =  t(class extends e {
         var e, a;
         "childList" === t.type && (t.addedNodes.length || t.removedNodes.length) && ((null === (e = t.addedNodes[0]) || void 0 === e ? void 0 : e.nodeType) !== Node.ELEMENT_NODE && (null === (a = t.removedNodes[0]) || void 0 === a ? void 0 : a.nodeType) !== Node.ELEMENT_NODE || this.buildPaneList());
       }));
+    }, this.extractDetails = t => {
+      const {status: e, disabled: a} = t;
+      return t.id || (t.id = "step-" + n()), {
+        id: t.id,
+        label: this.getPaneSlotOrProperty(t, "label"),
+        description: this.getPaneSlotOrProperty(t, "description"),
+        status: e,
+        disabled: a
+      };
     }, this.onStepClick = (t, e) => {
       t.stopPropagation();
       const {currentStepId: a} = this;
@@ -78,7 +89,7 @@ const b =  t(class extends e {
     })), this.mutationObserver = t;
   }
   componentDidLoad() {
-    n(this.hostElement), setTimeout((() => this.showStep(this.currentStepId)), 0);
+    c(this.hostElement), setTimeout((() => this.showStep(this.currentStepId)), 0);
   }
   componentWillUpdate() {
     this.expandedStepChildrenList = null;
@@ -96,7 +107,7 @@ const b =  t(class extends e {
     this.buildPaneList();
   }
   delegateFocus(t) {
-    c(t, this.hostElement) && this.focusStepBtn(this.currentStepId, !0);
+    o(t, this.hostElement) && this.focusStepBtn(this.currentStepId, !0);
   }
   statusChangeHandler() {
     this.buildPaneList();
@@ -125,20 +136,15 @@ const b =  t(class extends e {
   get allRootPanes() {
     return Array.from(this.hostElement.querySelectorAll(":scope > q2-stepper-pane"));
   }
-  extractDetails(t) {
-    const {label: e, description: a, status: r, disabled: i} = t;
-    return t.id || (t.id = "step-" + o()), {
-      id: t.id,
-      label: e,
-      description: a,
-      status: r,
-      disabled: i
-    };
-  }
   focusStepBtn(t, e) {
     const a = this.hostElement.shadowRoot.querySelector(`button[id="${t}"]`), r = document.activeElement === this.hostElement;
     a && (r || e) && a.focus();
   }
+  getPaneSlotOrProperty(t, e) {
+    var a;
+    const r = Array.from(t.children).find((t => t.getAttribute("slot") === e));
+    return null !== (a = null == r ? void 0 : r.outerHTML) && void 0 !== a ? a : t[e] ? l(t[e]) : void 0;
+  }
   getStepId(t, e) {
     const a = Array.from(this.hostElement.shadowRoot.querySelectorAll('ul:not([aria-hidden="true"]) > li > button:not([aria-disabled="true"])')), r = a.findIndex((e => e.getAttribute("id") === t));
     let i;
@@ -180,7 +186,7 @@ const b =  t(class extends e {
   setDefaultPane() {
     if (this.currentStepId) return;
     const t = this.hostElement.querySelector("q2-stepper-pane");
-    t && (t.id || (t.id = "step-" + o()), this.currentStepId = t.id);
+    t && (t.id || (t.id = "step-" + n()), this.currentStepId = t.id);
   }
   showStep(t) {
     this.scheduledAfterRender.push(this.resizeIframe), this.showStepPane(t), this.focusStepBtn(t);
@@ -193,32 +199,33 @@ const b =  t(class extends e {
   // #endregion
   // #region Render Methods
   renderChildStepBtn(t, e, a, i) {
-    const {currentStepId: s} = this, {id: n, label: c, status: o, disabled: p} = t, d = c && "label-" + n, b = n === s, v = "locked" === o, h = !c && l("tecton.element.advancedStepper.childNumber", [ "" + (e + 1), "" + a, i ]);
-    let u;
-    "error" === o && (u = "warning-filled");
-    const f = [ "step-child-btn" ];
-    return o && f.push("status-" + o), p && f.push("pane-disabled"), r("li", {
+    const {currentStepId: s} = this, {id: n, label: c, status: o, disabled: p} = t, b = c && "label-" + n, v = n === s, h = "locked" === o, u = !c && l("tecton.element.advancedStepper.childNumber", [ "" + (e + 1), "" + a, i ]);
+    let f;
+    "error" === o && (f = "warning-filled");
+    const g = [ "step-child-btn" ];
+    return o && g.push("status-" + o), p && g.push("pane-disabled"), r("li", {
       role: "presentation"
     }, r("button", {
-      class: f.join(" "),
+      class: g.join(" "),
       type: "button",
-      "aria-labelledby": d,
-      "aria-label": h,
-      "aria-selected": "" + b,
+      "aria-labelledby": b,
+      "aria-label": u,
+      "aria-selected": "" + v,
       id: n,
-      "aria-disabled": v ? "true" : null,
+      "aria-disabled": h ? "true" : null,
       role: "tab",
-      tabIndex: b ? 0 : -1,
-      onKeyDown: t => !v && this.onStepKeyDown(t, n),
-      onClick: t => !p && !v && this.onStepClick(t, n)
-    }, u && r("div", {
+      tabIndex: v ? 0 : -1,
+      onKeyDown: t => !h && this.onStepKeyDown(t, n),
+      onClick: t => !p && !h && this.onStepClick(t, n)
+    }, f && r("div", {
       class: "step-child-icon"
     }, r("q2-icon", {
-      type: u
+      type: f
     })), c && r("div", {
       class: "step-child-label",
-      id: d
-    }, l(c))));
+      id: b,
+      innerHTML: d(c)
+    })));
   }
   renderSpacer(t, e, a, i) {
     const s = i && !!t.children.length || !i, n = [ "spacer" ];
@@ -230,53 +237,55 @@ const b =  t(class extends e {
     }, t.children.map(((t, a, r) => this.renderChildStepBtn(t, a, r.length, e)))));
   }
   renderStepBtn(t, e) {
-    const {currentStepId: a, structuredPanes: i} = this, s = e === i.length - 1, {id: n, label: c, description: o, status: p, disabled: d} = t, b = e + 1, v = n === a, h = c && "label-" + n, u = "locked" === p, f = c && l(c), g = c && o && "description-" + n, m = !c && l("tecton.element.advancedStepper.number", [ "" + b, "" + i.length ]);
-    let w;
-    "complete" === p ? w = "success-filled" : "error" === p && (w = "warning-filled");
+    const {currentStepId: a, structuredPanes: i} = this, s = e === i.length - 1, {id: n, label: c, description: o, status: p, disabled: b} = t, v = e + 1, h = n === a, u = c && "label-" + n, f = "locked" === p, g = c, m = c && o && "description-" + n, w = !c && l("tecton.element.advancedStepper.number", [ "" + v, "" + i.length ]);
+    let y;
+    "complete" === p ? y = "success-filled" : "error" === p && (y = "warning-filled");
     const x = [ "step-btn" ];
-    p && x.push("status-" + p), d && x.push("pane-disabled");
-    const y = t.children.map((t => t.id)), z = v || y.includes(a);
+    p && x.push("status-" + p), b && x.push("pane-disabled");
+    const z = t.children.map((t => t.id)), k = h || z.includes(a);
     return r("li", {
       role: "presentation"
     }, r("button", {
       class: x.join(" "),
       type: "button",
-      "aria-labelledby": h,
-      "aria-describedBy": g,
-      "aria-label": m,
-      "aria-selected": "" + v,
-      "aria-expanded": t.children.length ? "" + z : null,
+      "aria-labelledby": u,
+      "aria-describedBy": m,
+      "aria-label": w,
+      "aria-selected": "" + h,
+      "aria-expanded": t.children.length ? "" + k : null,
       id: n,
-      "aria-disabled": u ? "true" : null,
+      "aria-disabled": f ? "true" : null,
       role: "tab",
-      tabIndex: v ? 0 : -1,
-      onKeyDown: t => !u && this.onStepKeyDown(t, n),
-      onClick: t => !d && !u && this.onStepClick(t, n)
-    }, w ? r("div", {
+      tabIndex: h ? 0 : -1,
+      onKeyDown: t => !f && this.onStepKeyDown(t, n),
+      onClick: t => !b && !f && this.onStepClick(t, n)
+    }, y ? r("div", {
       class: "step-icon"
     }, r("q2-icon", {
-      type: w
+      type: y
     })) : r("div", {
       class: "step-bubble"
-    }, b), c && r("div", null, r("div", {
+    }, v), c && r("div", null, r("div", {
       class: "step-label",
-      id: h
-    }, f), o && r("div", {
+      id: u,
+      innerHTML: d(g)
+    }), o && r("div", {
       class: "step-description",
-      id: g
-    }, l(o)))), this.renderSpacer(t, f, z, s));
+      id: m,
+      innerHTML: d(o)
+    }))), this.renderSpacer(t, g, k, s));
   }
   render() {
     return r(i, {
-      key: "f0e7532121d04664984f5a8c20c1dbd777e8df32"
+      key: "2771f649f3e5e8a37657d43678d83c67204ec466"
     }, r("ul", {
-      key: "3b30070fb196c16f3194199903799d4c1ee7e042",
+      key: "f0909b76f95f6c3684a2cffa069d530be3d951ce",
       role: "tablist"
     }, this.structuredPanes.map(((t, e) => this.renderStepBtn(t, e)))), r("div", {
-      key: "453722ec203014925b5bf3a879e72947e114b5fb",
+      key: "747eedecf0c9774439eb6ccf60528a521eb78685",
       role: "list"
     }, r("slot", {
-      key: "6f1ae5614bcddacf4ecb6819370ac8c417e99228"
+      key: "db02fc51b4811f510761365667516ce985c212d8"
     })));
   }
   get hostElement() {
@@ -290,7 +299,7 @@ const b =  t(class extends e {
     };
   }
   static get style() {
-    return '*{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}';
+    return '*{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}';
   }
 }, [ 257, "q2-stepper-vertical", {
   currentStepId: [ 1537, "current-step-id" ],
@@ -302,18 +311,18 @@ const b =  t(class extends e {
   } ]
 } ]);
 
-const v = b, defineCustomElement = function() {
+const h = v, defineCustomElement = function() {
   if ("undefined" == typeof customElements) return;
   [ "q2-stepper-vertical", "q2-icon" ].forEach((t => {
     switch (t) {
      case "q2-stepper-vertical":
-      customElements.get(s(t)) || customElements.define(s(t), b);
+      customElements.get(s(t)) || customElements.define(s(t), v);
       break;
 
      case "q2-icon":
-      customElements.get(s(t)) || d();
+      customElements.get(s(t)) || b();
     }
   }));
 };
 
-export { v as Q2StepperVertical, defineCustomElement }
+export { h as Q2StepperVertical, defineCustomElement }

package/dist/components/q2-stepper.js

@@ -1,16 +1,18 @@
-import { proxyCustomElement as t, HTMLElement as e, createEvent as r, h as o, Fragment as a, transformTag as i } from "@stencil/core/internal/client";
+import { proxyCustomElement as t, HTMLElement as e, createEvent as r, h as o, Fragment as i, transformTag as a } from "@stencil/core/internal/client";
 
 import { c as s, o as l, i as n, l as c } from "./index2.js";
 
 import { m as p } from "./mirror-emit.js";
 
+import { s as b } from "./sanitize-html-string.js";
+
 import { d } from "./q2-btn2.js";
 
-import { d as b } from "./q2-icon2.js";
+import { d as h } from "./q2-icon2.js";
 
-import { d as h } from "./q2-loading2.js";
+import { d as v } from "./q2-loading2.js";
 
-const v =  t(class extends e {
+const u =  t(class extends e {
   constructor(t) {
     super(), !1 !== t && this.__registerHost(), this.__attachShadow(), this.change = r(this, "change", 7), 
     this.tctChange = r(this, "tctChange", 7), this.scheduledAfterRender = [], 
@@ -36,33 +38,33 @@ const v =  t(class extends e {
       this.checkForPanes(), this.checkScrollState();
     }, this.onStepClick = (t, e) => {
       t.stopPropagation();
-      const {currentStep: r, stepCount: o, lastEnabledStep: a} = this;
-      e > a || e === r || p(this, [ "change", "tctChange" ], {
+      const {currentStep: r, stepCount: o, lastEnabledStep: i} = this;
+      e > i || e === r || p(this, [ "change", "tctChange" ], {
         selectedStep: e,
-        lastEnabledStep: a,
+        lastEnabledStep: i,
         currentStep: r,
         stepCount: o
       });
     }, this.onStepKeyDown = (t, e) => {
-      const {lastEnabledStep: r, stepCount: o} = this, {key: a} = t;
-      let i;
-      switch (a) {
+      const {lastEnabledStep: r, stepCount: o} = this, {key: i} = t;
+      let a;
+      switch (i) {
        case "ArrowLeft":
-        t.preventDefault(), i = Math.max(e - 1, 0);
+        t.preventDefault(), a = Math.max(e - 1, 0);
         break;
 
        case "ArrowRight":
-        t.preventDefault(), i = Math.min(e + 1, o);
+        t.preventDefault(), a = Math.min(e + 1, o);
         break;
 
        case "Home":
-        t.preventDefault(), i = 1;
+        t.preventDefault(), a = 1;
         break;
 
        case "End":
-        t.preventDefault(), i = r;
+        t.preventDefault(), a = r;
       }
-      i && this.focusStep(i, !0);
+      a && this.focusStep(a, !0);
     };
   }
   // #endregion
@@ -120,11 +122,11 @@ const v =  t(class extends e {
       break;
 
      case "string":
-      const a = this.hostElement.querySelector("#" + t);
-      if (!a) break;
-      const i = this.allPanes.indexOf(a);
-      if (i + 1 > this.lastEnabledStep || i < 0) break;
-      if (o = this.listElement.children[i], !o) break;
+      const i = this.hostElement.querySelector("#" + t);
+      if (!i) break;
+      const a = this.allPanes.indexOf(i);
+      if (a + 1 > this.lastEnabledStep || a < 0) break;
+      if (o = this.listElement.children[a], !o) break;
       null === (r = o.firstElementChild) || void 0 === r || r.click();
     }
   }
@@ -143,12 +145,12 @@ const v =  t(class extends e {
   }
   focusStep(t, e, r) {
     var o;
-    const {listElement: a} = this;
-    if (!a) return;
-    const i = a.children[t - 1], s = document.activeElement === this.hostElement;
-    if (i && ((s || r) && (null === (o = i.firstElementChild) || void 0 === o || o.focus()), 
+    const {listElement: i} = this;
+    if (!i) return;
+    const a = i.children[t - 1], s = document.activeElement === this.hostElement;
+    if (a && ((s || r) && (null === (o = a.firstElementChild) || void 0 === o || o.focus()), 
     e)) {
-      const t = i.offsetLeft - this.listElement.clientWidth / 2;
+      const t = a.offsetLeft - this.listElement.clientWidth / 2;
       this.listElement.scrollTo({
         left: t,
         behavior: "smooth"
@@ -190,93 +192,93 @@ const v =  t(class extends e {
   // #region Render Methods
   renderStepBtn(t) {
     var e;
-    const {allPanes: r, stepCount: i, lastEnabledStep: s, currentStep: l} = this, n = null !== (e = null == r ? void 0 : r[t]) && void 0 !== e ? e : null, {id: p, status: d} = n, b = this.getPaneSlotOrProperty(n, "label"), h = this.getPaneSlotOrProperty(n, "description"), v = t + 1, u = v === l, f = !!b && "label-" + p, g = !!b && !!h && "description-" + p, m = !b && c("tecton.element.stepper.number", [ "" + v, "" + i ]);
-    let w;
-    "complete" === d ? w = "success-filled" : "error" === d && (w = "warning-filled");
-    const x = [ "step-btn" ];
-    d && x.push("status-" + d);
-    const k = "locked" === d, y = n.disabled;
-    y && x.push("pane-disabled");
-    const z = k || v > s;
+    const {allPanes: r, stepCount: a, lastEnabledStep: s, currentStep: l} = this, n = null !== (e = null == r ? void 0 : r[t]) && void 0 !== e ? e : null, {id: p, status: d} = n, h = this.getPaneSlotOrProperty(n, "label"), v = this.getPaneSlotOrProperty(n, "description"), u = t + 1, f = u === l, m = !!h && "label-" + p, g = !!h && !!v && "description-" + p, w = !h && c("tecton.element.stepper.number", [ "" + u, "" + a ]);
+    let x;
+    "complete" === d ? x = "success-filled" : "error" === d && (x = "warning-filled");
+    const k = [ "step-btn" ];
+    d && k.push("status-" + d);
+    const y = "locked" === d, z = n.disabled;
+    z && k.push("pane-disabled");
+    const S = y || u > s;
     return o("li", {
       role: "presentation"
     }, o("button", {
-      class: x.join(" "),
+      class: k.join(" "),
       type: "button",
-      "aria-labelledby": f,
+      "aria-labelledby": m,
       "aria-describedBy": g,
-      "aria-label": m,
-      "aria-selected": "" + u,
-      "aria-disabled": z ? "true" : void 0,
+      "aria-label": w,
+      "aria-selected": "" + f,
+      "aria-disabled": S ? "true" : void 0,
       role: "tab",
-      tabIndex: u ? 0 : -1,
-      onKeyDown: t => this.onStepKeyDown(t, v),
-      onClick: t => !y && !z && this.onStepClick(t, v)
-    }, o(a, null, w ? o("div", {
+      tabIndex: f ? 0 : -1,
+      onKeyDown: t => this.onStepKeyDown(t, u),
+      onClick: t => !z && !S && this.onStepClick(t, u)
+    }, o(i, null, x ? o("div", {
       class: "step-icon"
     }, o("q2-icon", {
-      type: w
+      type: x
     })) : o("div", {
       class: "step-bubble"
-    }, v), f && o("div", {
+    }, u), m && o("div", {
       class: "step-label",
-      id: f,
-      innerHTML: b
-    }), f && g && o("div", {
+      id: m,
+      innerHTML: b(h)
+    }), m && g && o("div", {
       class: "step-description",
       id: g,
-      innerHTML: h
+      innerHTML: b(v)
     }))), t ? o("div", {
       class: "step-divider"
     }) : "");
   }
   render() {
-    const {stepCount: t, scrollEnabled: e, showScrollLeft: r, showScrollRight: i} = this, s = [ "step-container" ];
-    return e && s.push("has-scroll"), o(a, {
-      key: "dd38d7922ef9b468399b57f4e1d656b2213d6b32"
+    const {stepCount: t, scrollEnabled: e, showScrollLeft: r, showScrollRight: a} = this, s = [ "step-container" ];
+    return e && s.push("has-scroll"), o(i, {
+      key: "c1e21a36e0b2f684f4520b0f75f78affd73359bd"
     }, o("div", {
-      key: "92dc67bc25e5a5275241b91ec6cb968202e91af8",
+      key: "3791e857d27aa3fea928f663268f21270d499023",
       class: s.join(" ")
-    }, e && o(a, {
-      key: "ef83e893c3dfe020cb1c561c1b0619f364c7f08f"
+    }, e && o(i, {
+      key: "19b689b2b56f52099f22f859264e33e16fd918bf"
     }, o("div", {
-      key: "9cf06f95042064daa7564a9927cf3f1ff9a227be",
+      key: "5b1b1e00034fa009c555924c2067fed6369740cb",
       class: "gradient-left",
       hidden: !r
     }), o("div", {
-      key: "d9c58f971a8b2fd545c09e698d57baf356c3947b",
+      key: "b5de1b413f6c8ce006207926f26ae845594228eb",
       class: "gradient-right",
-      hidden: !i
+      hidden: !a
     }), o("q2-btn", {
-      key: "38c601f9fe74886e912e983b9b52e7c1e1a0694e",
+      key: "832a97c5619cadb1167f6e1e7ecd94ab4f5f3cb1",
       class: "btn-left",
       hideLabel: !0,
       hidden: !this.showScrollLeft,
       label: c("tecton.element.stepper.scrollLeft"),
       onTctClick: () => this.onScrollBtnClick("left")
     }, o("q2-icon", {
-      key: "a53ac3dc6ebd84e3d221136868df0861bc6acf4f",
+      key: "3e53b2b2f19bbba59a37016b9cdf1a302b030b63",
       type: "chevron-left"
     })), o("q2-btn", {
-      key: "38363d0a8a2d9fa96a919bf08d243ddb42d65552",
+      key: "ffacbb0d2f9c15a503221a2dbc4662ba6f3c3272",
       class: "btn-right",
       hideLabel: !0,
       hidden: !this.showScrollRight,
       label: c("tecton.element.stepper.scrollRight"),
       onTctClick: () => this.onScrollBtnClick("right")
     }, o("q2-icon", {
-      key: "6da3f9a38d4b1bb375b25257634058c869f9478f",
+      key: "2c60dc5392c9c9eec99dd24b229bbd1fa5e9587f",
       type: "chevron-right"
     }))), o("ul", {
-      key: "2c5e3d0e0aebd5fa05ecce735232dd42d1aec470",
+      key: "25806a72f9f0cda2e032a81dbaac9f808be385c9",
       onScroll: this.checkScrollState,
       ref: t => this.listElement = t,
       role: "tablist"
     }, t > 0 && [ ...Array(t).keys() ].map((t => this.renderStepBtn(t))))), o("div", {
-      key: "21e4f4c96ebcef94c73a29f468c820c9d4c22a57",
+      key: "622b3ed56e3f66adc33bf197b7874a7b9bf8667f",
       role: "list"
     }, o("slot", {
-      key: "84d871317ccc4471f1d954d469047bc6f97399cf",
+      key: "73c4321743596227054e317c271bcc044179363b",
       onSlotchange: () => this.onSlotChange()
     })));
   }
@@ -296,7 +298,7 @@ const v =  t(class extends e {
     };
   }
   static get style() {
-    return '*{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}';
+    return '*{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}';
   }
 }, [ 257, "q2-stepper", {
   currentStep: [ 1538, "current-step" ],
@@ -318,26 +320,26 @@ const v =  t(class extends e {
   } ]
 } ]);
 
-const u = v, defineCustomElement = function() {
+const f = u, defineCustomElement = function() {
   if ("undefined" == typeof customElements) return;
   [ "q2-stepper", "q2-btn", "q2-icon", "q2-loading" ].forEach((t => {
     switch (t) {
      case "q2-stepper":
-      customElements.get(i(t)) || customElements.define(i(t), v);
+      customElements.get(a(t)) || customElements.define(a(t), u);
       break;
 
      case "q2-btn":
-      customElements.get(i(t)) || d();
+      customElements.get(a(t)) || d();
       break;
 
      case "q2-icon":
-      customElements.get(i(t)) || b();
+      customElements.get(a(t)) || h();
       break;
 
      case "q2-loading":
-      customElements.get(i(t)) || h();
+      customElements.get(a(t)) || v();
     }
   }));
 };
 
-export { u as Q2Stepper, defineCustomElement }
+export { f as Q2Stepper, defineCustomElement }

package/dist/components/q2-surface.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface Q2Surface extends Components.Q2Surface, HTMLElement {}
+export const Q2Surface: {
+    prototype: Q2Surface;
+    new (): Q2Surface;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;