q2-tecton-elements 1.70.2 → 1.71.0

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

@@ -1,6 +1,6 @@
-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 { proxyCustomElement as t, HTMLElement as e, createEvent as a, h as r, Fragment as i, transformTag as n } from "@stencil/core/internal/client";
 
-import { c as n, o as c, i as o, l } from "./index2.js";
+import { c as s, o, i as c, l } from "./index2.js";
 
 import { m as p } from "./mirror-emit.js";
 
@@ -31,7 +31,7 @@ const v =  t(class extends e {
       }));
     }, this.extractDetails = t => {
       const {status: e, disabled: a} = t;
-      return t.id || (t.id = "step-" + n()), {
+      return t.id || (t.id = "step-" + s()), {
         id: t.id,
         label: this.getPaneSlotOrProperty(t, "label"),
         description: this.getPaneSlotOrProperty(t, "description"),
@@ -89,7 +89,7 @@ const v =  t(class extends e {
     })), this.mutationObserver = t;
   }
   componentDidLoad() {
-    c(this.hostElement), setTimeout((() => this.showStep(this.currentStepId)), 0);
+    o(this.hostElement), setTimeout((() => this.showStep(this.currentStepId)), 0);
   }
   componentWillUpdate() {
     this.expandedStepChildrenList = null;
@@ -107,7 +107,7 @@ const v =  t(class extends e {
     this.buildPaneList();
   }
   delegateFocus(t) {
-    o(t, this.hostElement) && this.focusStepBtn(this.currentStepId, !0);
+    c(t, this.hostElement) && this.focusStepBtn(this.currentStepId, !0);
   }
   statusChangeHandler() {
     this.buildPaneList();
@@ -145,6 +145,10 @@ const v =  t(class extends e {
     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;
   }
+  getStatusLabel(t) {
+    const e = "tecton.element.stepper.status." + t, a = l(e);
+    return a === e ? t : a;
+  }
   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;
@@ -186,7 +190,7 @@ const v =  t(class extends e {
   setDefaultPane() {
     if (this.currentStepId) return;
     const t = this.hostElement.querySelector("q2-stepper-pane");
-    t && (t.id || (t.id = "step-" + n()), this.currentStepId = t.id);
+    t && (t.id || (t.id = "step-" + s()), this.currentStepId = t.id);
   }
   showStep(t) {
     this.scheduledAfterRender.push(this.resizeIframe), this.showStepPane(t), this.focusStepBtn(t);
@@ -198,94 +202,114 @@ const v =  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, 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", {
+  renderChildStepBtn(t, e, a) {
+    const {currentStepId: n} = this, {id: s, label: o, status: c, disabled: p} = t, b = o && "label-" + s, v = s === n, h = "locked" === c, u = "position-" + s, f = "status-" + s, m = "complete" === c || "error" === c ? c : "pending", g = l("tecton.element.stepper.number", {
+      step: "" + (e + 1),
+      total: "" + a
+    }), w = this.getStatusLabel(m), y = o ? `${u} ${b} ${f}` : void 0, x = o ? void 0 : `${g}, ${w}`;
+    let z;
+    "error" === c && (z = "warning-filled");
+    const k = [ "step-child-btn" ];
+    return c && k.push("status-" + c), p && k.push("pane-disabled"), r("li", {
       role: "presentation"
     }, r("button", {
-      class: g.join(" "),
+      class: k.join(" "),
       type: "button",
-      "aria-labelledby": b,
-      "aria-label": u,
+      "aria-labelledby": y,
+      "aria-label": x,
       "aria-selected": "" + v,
-      id: n,
+      id: s,
       "aria-disabled": h ? "true" : null,
       role: "tab",
       tabIndex: v ? 0 : -1,
-      onKeyDown: t => !h && this.onStepKeyDown(t, n),
-      onClick: t => !p && !h && this.onStepClick(t, n)
-    }, f && r("div", {
+      onKeyDown: t => !h && this.onStepKeyDown(t, s),
+      onClick: t => !p && !h && this.onStepClick(t, s)
+    }, o && r(i, null, r("span", {
+      class: "sr-only",
+      id: u
+    }, g), r("span", {
+      class: "sr-only",
+      id: f
+    }, w)), z && r("div", {
       class: "step-child-icon"
     }, r("q2-icon", {
-      type: f
-    })), c && r("div", {
+      "aria-hidden": "true",
+      type: z
+    })), o && r("div", {
       class: "step-child-label",
       id: b,
-      innerHTML: d(c)
+      innerHTML: d(o)
     })));
   }
-  renderSpacer(t, e, a, i) {
-    const s = i && !!t.children.length || !i, n = [ "spacer" ];
-    return i || n.push("has-sibling"), s && r("div", {
+  renderSpacer(t, e, a) {
+    const i = a && !!t.children.length || !a, n = [ "spacer" ];
+    return a || n.push("has-sibling"), i && r("div", {
       class: n.join(" ")
     }, !!t.children.length && r("ul", {
-      ref: t => a && (this.expandedStepChildrenList = t),
-      "aria-hidden": "" + !a
-    }, t.children.map(((t, a, r) => this.renderChildStepBtn(t, a, r.length, e)))));
+      ref: t => e && (this.expandedStepChildrenList = t),
+      "aria-hidden": "" + !e
+    }, t.children.map(((t, e, a) => this.renderChildStepBtn(t, e, a.length)))));
   }
   renderStepBtn(t, e) {
-    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), b && x.push("pane-disabled");
-    const z = t.children.map((t => t.id)), k = h || z.includes(a);
+    const {currentStepId: a, structuredPanes: n} = this, s = e === n.length - 1, {id: o, label: c, description: p, status: b, disabled: v} = t, h = e + 1, u = o === a, f = c && "label-" + o, m = "locked" === b, g = c, w = c && p && "description-" + o, y = "position-" + o, x = "status-" + o, z = "complete" === b || "error" === b ? b : "pending", k = l("tecton.element.stepper.number", {
+      step: "" + h,
+      total: "" + n.length
+    }), S = this.getStatusLabel(z), C = c ? `${y} ${f} ${x}` : void 0, q = c ? void 0 : `${k}, ${S}`;
+    let A;
+    "complete" === b ? A = "success-filled" : "error" === b && (A = "warning-filled");
+    const I = [ "step-btn" ];
+    b && I.push("status-" + b), v && I.push("pane-disabled");
+    const P = t.children.map((t => t.id)), $ = u || P.includes(a);
     return r("li", {
       role: "presentation"
     }, r("button", {
-      class: x.join(" "),
+      class: I.join(" "),
       type: "button",
-      "aria-labelledby": u,
-      "aria-describedBy": m,
-      "aria-label": w,
-      "aria-selected": "" + h,
-      "aria-expanded": t.children.length ? "" + k : null,
-      id: n,
-      "aria-disabled": f ? "true" : null,
+      "aria-labelledby": C,
+      "aria-describedBy": w,
+      "aria-label": q,
+      "aria-selected": "" + u,
+      "aria-expanded": t.children.length ? "" + $ : null,
+      id: o,
+      "aria-disabled": m ? "true" : null,
       role: "tab",
-      tabIndex: h ? 0 : -1,
-      onKeyDown: t => !f && this.onStepKeyDown(t, n),
-      onClick: t => !b && !f && this.onStepClick(t, n)
-    }, y ? r("div", {
+      tabIndex: u ? 0 : -1,
+      onKeyDown: t => !m && this.onStepKeyDown(t, o),
+      onClick: t => !v && !m && this.onStepClick(t, o)
+    }, c && r(i, null, r("span", {
+      class: "sr-only",
+      id: y
+    }, k), r("span", {
+      class: "sr-only",
+      id: x
+    }, S)), A ? r("div", {
       class: "step-icon"
     }, r("q2-icon", {
-      type: y
+      "aria-hidden": "true",
+      type: A
     })) : r("div", {
       class: "step-bubble"
-    }, v), c && r("div", null, r("div", {
+    }, h), c && r("div", null, r("div", {
       class: "step-label",
-      id: u,
+      id: f,
       innerHTML: d(g)
-    }), o && r("div", {
+    }), p && r("div", {
       class: "step-description",
-      id: m,
-      innerHTML: d(o)
-    }))), this.renderSpacer(t, g, k, s));
+      id: w,
+      innerHTML: d(p)
+    }))), this.renderSpacer(t, $, s));
   }
   render() {
     return r(i, {
-      key: "2771f649f3e5e8a37657d43678d83c67204ec466"
+      key: "eab8d8816aebfb5aa104a17b75dc0e8b4ed4ce68"
     }, r("ul", {
-      key: "f0909b76f95f6c3684a2cffa069d530be3d951ce",
+      key: "f155624641313e8375e6ee448fed150ae0c62cf1",
       role: "tablist"
     }, this.structuredPanes.map(((t, e) => this.renderStepBtn(t, e)))), r("div", {
-      key: "747eedecf0c9774439eb6ccf60528a521eb78685",
+      key: "1ff078e00dcb1e4c861bc691ccc31ec5c1436fac",
       role: "list"
     }, r("slot", {
-      key: "db02fc51b4811f510761365667516ce985c212d8"
+      key: "adf07ae0725ccc7c1ce149052f2325e6bfc01677"
     })));
   }
   get hostElement() {
@@ -299,7 +323,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: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}';
+    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}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}: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)))}.sr-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.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, var(--const-px-12, 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, var(--const-px-16, 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, var(--const-px-12, 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, var(--const-px-16, 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, var(--const-px-12, 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" ],
@@ -316,11 +340,11 @@ const h = v, defineCustomElement = function() {
   [ "q2-stepper-vertical", "q2-icon" ].forEach((t => {
     switch (t) {
      case "q2-stepper-vertical":
-      customElements.get(s(t)) || customElements.define(s(t), v);
+      customElements.get(n(t)) || customElements.define(n(t), v);
       break;
 
      case "q2-icon":
-      customElements.get(s(t)) || b();
+      customElements.get(n(t)) || b();
     }
   }));
 };

package/dist/components/q2-stepper.js

@@ -1,12 +1,12 @@
-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 { proxyCustomElement as t, HTMLElement as e, createEvent as r, h as o, Fragment as a, transformTag as i } from "@stencil/core/internal/client";
 
-import { c as s, o as l, i as n, l as c } from "./index2.js";
+import { c as s, o as n, i as l, l as c } from "./index2.js";
 
 import { m as p } from "./mirror-emit.js";
 
-import { s as b } from "./sanitize-html-string.js";
+import { s as d } from "./sanitize-html-string.js";
 
-import { d } from "./q2-btn2.js";
+import { d as b } from "./q2-btn2.js";
 
 import { d as h } from "./q2-icon2.js";
 
@@ -38,33 +38,33 @@ const u =  t(class extends e {
       this.checkForPanes(), this.checkScrollState();
     }, this.onStepClick = (t, e) => {
       t.stopPropagation();
-      const {currentStep: r, stepCount: o, lastEnabledStep: i} = this;
-      e > i || e === r || p(this, [ "change", "tctChange" ], {
+      const {currentStep: r, stepCount: o, lastEnabledStep: a} = this;
+      e > a || e === r || p(this, [ "change", "tctChange" ], {
         selectedStep: e,
-        lastEnabledStep: i,
+        lastEnabledStep: a,
         currentStep: r,
         stepCount: o
       });
     }, this.onStepKeyDown = (t, e) => {
-      const {lastEnabledStep: r, stepCount: o} = this, {key: i} = t;
-      let a;
-      switch (i) {
+      const {lastEnabledStep: r, stepCount: o} = this, {key: a} = t;
+      let i;
+      switch (a) {
        case "ArrowLeft":
-        t.preventDefault(), a = Math.max(e - 1, 0);
+        t.preventDefault(), i = Math.max(e - 1, 0);
         break;
 
        case "ArrowRight":
-        t.preventDefault(), a = Math.min(e + 1, o);
+        t.preventDefault(), i = Math.min(e + 1, o);
         break;
 
        case "Home":
-        t.preventDefault(), a = 1;
+        t.preventDefault(), i = 1;
         break;
 
        case "End":
-        t.preventDefault(), a = r;
+        t.preventDefault(), i = r;
       }
-      a && this.focusStep(a, !0);
+      i && this.focusStep(i, !0);
     };
   }
   // #endregion
@@ -80,7 +80,7 @@ const u =  t(class extends e {
   componentDidLoad() {
     var t;
     null === (t = this.resizeObserver) || void 0 === t || t.observe(this.listElement), 
-    this.checkScrollState(), l(this.hostElement), setTimeout((() => this.showStep(this.currentStep || 1)), 0);
+    this.checkScrollState(), n(this.hostElement), setTimeout((() => this.showStep(this.currentStep || 1)), 0);
   }
   componentDidRender() {
     this.scheduledAfterRender.forEach((t => t())), this.scheduledAfterRender = [];
@@ -95,7 +95,7 @@ const u =  t(class extends e {
     this.contentChangeTriggerCount += 1;
   }
   delegateFocus(t) {
-    n(t, this.hostElement) && this.focusStep(this.currentStep, !0, !0);
+    l(t, this.hostElement) && this.focusStep(this.currentStep, !0, !0);
   }
   statusChangeHandler(t) {
     const e = Array.from(this.allPanes).findIndex((e => t.detail.id === e.id));
@@ -122,11 +122,11 @@ const u =  t(class extends e {
       break;
 
      case "string":
-      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;
+      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;
       null === (r = o.firstElementChild) || void 0 === r || r.click();
     }
   }
@@ -145,12 +145,12 @@ const u =  t(class extends e {
   }
   focusStep(t, e, r) {
     var o;
-    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()), 
+    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()), 
     e)) {
-      const t = a.offsetLeft - this.listElement.clientWidth / 2;
+      const t = i.offsetLeft - this.listElement.clientWidth / 2;
       this.listElement.scrollTo({
         left: t,
         behavior: "smooth"
@@ -162,6 +162,10 @@ const u =  t(class extends e {
     const o = Array.from(t.children).find((t => t.getAttribute("slot") === e));
     return null !== (r = null == o ? void 0 : o.outerHTML) && void 0 !== r ? r : c(t[e]);
   }
+  getStatusLabel(t) {
+    const e = "tecton.element.stepper.status." + t, r = c(e);
+    return r === e ? t : r;
+  }
   handleUndefinedStepProperties() {
     const {currentStep: t, lastEnabledStep: e} = this;
     t && e || (!t && e ? this.currentStep = e : t && !e ? this.lastEnabledStep = t : t || e || (this.currentStep = 1, 
@@ -192,93 +196,103 @@ const u =  t(class extends e {
   // #region Render Methods
   renderStepBtn(t) {
     var e;
-    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;
+    const {allPanes: r, stepCount: i, lastEnabledStep: s, currentStep: n} = this, l = null !== (e = null == r ? void 0 : r[t]) && void 0 !== e ? e : null, {id: p, status: b} = l, h = this.getPaneSlotOrProperty(l, "label"), v = this.getPaneSlotOrProperty(l, "description"), u = t + 1, f = u === n, m = !!h && "label-" + p, g = !!h && !!v && "description-" + p, w = "position-" + p, x = "status-" + p, y = "complete" === b || "error" === b ? b : "pending", k = c("tecton.element.stepper.number", {
+      step: "" + u,
+      total: "" + i
+    }), z = this.getStatusLabel(y), S = h ? `${w} ${m} ${x}` : void 0, C = h ? void 0 : `${k}, ${z}`;
+    let E;
+    "complete" === b ? E = "success-filled" : "error" === b && (E = "warning-filled");
+    const q = [ "step-btn" ];
+    b && q.push("status-" + b);
+    const L = "locked" === b, j = l.disabled;
+    j && q.push("pane-disabled");
+    const H = L || u > s;
     return o("li", {
       role: "presentation"
     }, o("button", {
-      class: k.join(" "),
+      class: q.join(" "),
       type: "button",
-      "aria-labelledby": m,
+      "aria-labelledby": S,
       "aria-describedBy": g,
-      "aria-label": w,
+      "aria-label": C,
       "aria-selected": "" + f,
-      "aria-disabled": S ? "true" : void 0,
+      "aria-disabled": H ? "true" : void 0,
       role: "tab",
       tabIndex: f ? 0 : -1,
       onKeyDown: t => this.onStepKeyDown(t, u),
-      onClick: t => !z && !S && this.onStepClick(t, u)
-    }, o(i, null, x ? o("div", {
+      onClick: t => !j && !H && this.onStepClick(t, u)
+    }, o(a, null, h && o(a, null, o("span", {
+      class: "sr-only",
+      id: w
+    }, k), o("span", {
+      class: "sr-only",
+      id: x
+    }, z)), E ? o("div", {
       class: "step-icon"
     }, o("q2-icon", {
-      type: x
+      "aria-hidden": "true",
+      type: E
     })) : o("div", {
       class: "step-bubble"
     }, u), m && o("div", {
       class: "step-label",
       id: m,
-      innerHTML: b(h)
+      innerHTML: d(h)
     }), m && g && o("div", {
       class: "step-description",
       id: g,
-      innerHTML: b(v)
+      innerHTML: d(v)
     }))), t ? o("div", {
       class: "step-divider"
     }) : "");
   }
   render() {
-    const {stepCount: t, scrollEnabled: e, showScrollLeft: r, showScrollRight: a} = this, s = [ "step-container" ];
-    return e && s.push("has-scroll"), o(i, {
-      key: "c1e21a36e0b2f684f4520b0f75f78affd73359bd"
+    const {stepCount: t, scrollEnabled: e, showScrollLeft: r, showScrollRight: i} = this, s = [ "step-container" ];
+    return e && s.push("has-scroll"), o(a, {
+      key: "cd7a09546e4b74cf98f5e27dbcf0efce71e02781"
     }, o("div", {
-      key: "3791e857d27aa3fea928f663268f21270d499023",
+      key: "aaa383584217da20fdd01174f4b136dfef0128b7",
       class: s.join(" ")
-    }, e && o(i, {
-      key: "19b689b2b56f52099f22f859264e33e16fd918bf"
+    }, e && o(a, {
+      key: "6f7f38d768b274409606132cc62d36d48812f50c"
     }, o("div", {
-      key: "5b1b1e00034fa009c555924c2067fed6369740cb",
+      key: "98e26550803496a0edd0e7415b4ec9e16b501722",
       class: "gradient-left",
       hidden: !r
     }), o("div", {
-      key: "b5de1b413f6c8ce006207926f26ae845594228eb",
+      key: "58102ecd26dd3f6b36d530f36ecc109b287b4faa",
       class: "gradient-right",
-      hidden: !a
+      hidden: !i
     }), o("q2-btn", {
-      key: "832a97c5619cadb1167f6e1e7ecd94ab4f5f3cb1",
+      key: "a475ba4a846ea5cf93a5ca46422a5473e0d266bd",
       class: "btn-left",
       hideLabel: !0,
       hidden: !this.showScrollLeft,
       label: c("tecton.element.stepper.scrollLeft"),
       onTctClick: () => this.onScrollBtnClick("left")
     }, o("q2-icon", {
-      key: "3e53b2b2f19bbba59a37016b9cdf1a302b030b63",
+      key: "b040f724a926e5c07a81438e3586e0eb7a3c063b",
       type: "chevron-left"
     })), o("q2-btn", {
-      key: "ffacbb0d2f9c15a503221a2dbc4662ba6f3c3272",
+      key: "119dbcd49ce282cbccd58be097f8833e22df4fb4",
       class: "btn-right",
       hideLabel: !0,
       hidden: !this.showScrollRight,
       label: c("tecton.element.stepper.scrollRight"),
       onTctClick: () => this.onScrollBtnClick("right")
     }, o("q2-icon", {
-      key: "2c60dc5392c9c9eec99dd24b229bbd1fa5e9587f",
+      key: "c656a9493134eb6a4ea0a008ee94829fc708ecfe",
       type: "chevron-right"
     }))), o("ul", {
-      key: "25806a72f9f0cda2e032a81dbaac9f808be385c9",
+      key: "09e1472989c7c2e6c40504072bca2790865e013a",
       onScroll: this.checkScrollState,
       ref: t => this.listElement = t,
       role: "tablist"
     }, t > 0 && [ ...Array(t).keys() ].map((t => this.renderStepBtn(t))))), o("div", {
-      key: "622b3ed56e3f66adc33bf197b7874a7b9bf8667f",
+      key: "0b25c172d585892aa9e286dac6080ce2bbb80e1a",
       role: "list"
     }, o("slot", {
-      key: "73c4321743596227054e317c271bcc044179363b",
+      key: "507375368c8e89a94f8af0a44bf4951fd14d7466",
       onSlotchange: () => this.onSlotChange()
     })));
   }
@@ -298,7 +312,7 @@ const u =  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, 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}';
+    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}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host{display:block;position:relative}.sr-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}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, var(--const-px-16, 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, var(--const-px-16, 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, var(--const-px-12, 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, var(--const-px-12, 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" ],
@@ -325,19 +339,19 @@ const f = u, defineCustomElement = function() {
   [ "q2-stepper", "q2-btn", "q2-icon", "q2-loading" ].forEach((t => {
     switch (t) {
      case "q2-stepper":
-      customElements.get(a(t)) || customElements.define(a(t), u);
+      customElements.get(i(t)) || customElements.define(i(t), u);
       break;
 
      case "q2-btn":
-      customElements.get(a(t)) || d();
+      customElements.get(i(t)) || b();
       break;
 
      case "q2-icon":
-      customElements.get(a(t)) || h();
+      customElements.get(i(t)) || h();
       break;
 
      case "q2-loading":
-      customElements.get(a(t)) || v();
+      customElements.get(i(t)) || v();
     }
   }));
 };