q2-tecton-elements 1.72.0 → 1.73.0

package/dist/q2-tecton-elements/q2-radio.entry.js

@@ -1,6 +1,6 @@
 import { r, c as a, h as o, g as t } from "./index-Cqkz7Bnm.js";
 
-import { c as e, d as i, o as c, l as d } from "./index-DJw6Feh0.js";
+import { c as e, d as i, o as c, l as d } from "./index-CP8pXJ-l.js";
 
 import { m as l } from "./mirror-emit-DUjY_ucm.js";
 
@@ -71,10 +71,10 @@ const n = class {
   // #region Render Methods
   render() {
     return o("div", {
-      key: "8fbe0ad9c8b0712fd51dbac67baae6209ebf2532",
+      key: "1aafcfbdb7d6e2863618d6741bc12491a109ec80",
       class: this.groupTileLayout ? "radio-tile" : "radio-container"
     }, o("input", {
-      key: "a9322154f304963731fb3d6ee99632c06938f27f",
+      key: "1989707753be2d6b8bc8c69098a5c9bf27af99b7",
       ref: r => this.inputField = r,
       class: "sr",
       id: this._id,
@@ -87,19 +87,19 @@ const n = class {
       onChange: this.inputChange,
       "test-id": "q2RadioInnerRadioBox"
     }), o("label", {
-      key: "234f95d4c4656e4325a15853bacf888d7a4ae446",
+      key: "93a6f7f8d718c8070c4d4d88c3b48905f518e166",
       htmlFor: this._id,
       class: this.hideLabel ? "label-hidden" : void 0,
       "test-id": "radioButton"
     }, !this.groupTileLayout && o("span", {
-      key: "ac98c34734a5e54b347cc2a48dc23d3ea2eb31ce",
+      key: "f351a1aef39845bbb1bbd360037d36486de27cd9",
       class: "radio-mark",
       "aria-hidden": "true"
     }), !this.hideLabel && o("div", {
-      key: "41dd2c195bc03dd8af8d5722e4aa2323cbeaab76",
+      key: "c9cb25115cffc72dfbb52024b6343f16a0744fbc",
       class: "label-content"
     }, this.label && d(this.label) || "", o("slot", {
-      key: "595014c6a32c2e98f7612dc51f0bd89579770988"
+      key: "8d63e148c83fb247b60b719d3de8627c327efaa4"
     }))));
   }
   get hostElement() {

package/dist/q2-tecton-elements/q2-relative-time.entry.js

@@ -2,7 +2,7 @@ import { r as t, h as e, F as i, g as s } from "./index-Cqkz7Bnm.js";
 
 import { d as n } from "./index-O1A-ZSZs.js";
 
-import { l as a } from "./index-DJw6Feh0.js";
+import { l as a } from "./index-CP8pXJ-l.js";
 
 const o = class {
   constructor(e) {
@@ -63,14 +63,14 @@ const o = class {
   // #endregion
   // #region Watchers
   updateMessage() {
-    const {isValidDate: t, isBaseDateProvided: e, isValidBaseDate: i, dateObject: s, baseDateObject: o, locale: r, handleNumeric: d, messageFormat: h, isValidUnit: l, unit: c, trimSuffix: u} = this;
+    const {isValidDate: t, isBaseDateProvided: e, isValidBaseDate: i, dateObject: s, baseDateObject: o, locale: r, handleNumeric: d, messageFormat: l, isValidUnit: h, unit: c, trimSuffix: u} = this;
     if (!t || e && !i) return this.sync = !1, void (this.displayedMessage = a("tecton.element.relativeTime.invalidDate"));
     const m = n.intlFormatDistance(new Date(s), new Date(o), {
       locale: r || document.documentElement.lang || "en-US",
       localeMatcher: "best fit",
       numeric: d,
-      style: h,
-      unit: l ? c : null
+      style: l,
+      unit: h ? c : null
     });
     this.displayedMessage = u ? this.trimMessage(m) : m;
   }
@@ -118,7 +118,7 @@ const o = class {
   render() {
     const {shouldShow: t, displayedMessage: s} = this;
     return e(i, {
-      key: "7bcf2e8d9cb391ea43664b9cf01ec6d474a1743e"
+      key: "c6d24ac6d794284c3f0ea654f1999ff6e201f8b1"
     }, t ? e("time", {
       dateTime: s
     }, s) : null);

package/dist/q2-tecton-elements/q2-resize-observer.entry.js

@@ -1,8 +1,8 @@
-import { r as t, c as e, h as i, g as n } from "./index-Cqkz7Bnm.js";
+import { r as t, c as i, h as e, g as n } from "./index-Cqkz7Bnm.js";
 
 const o = class {
-  constructor(i) {
-    t(this, i), this.tctResize = e(this, "tctResize", 7), this.observedElements = [], 
+  constructor(e) {
+    t(this, e), this.tctResize = i(this, "tctResize", 7), this.observedElements = [], 
     // #endregion
     // #region Local Methods
     this.handleSlotChange = () => {
@@ -35,21 +35,21 @@ const o = class {
     t ? this.stopObserver() : this.startObserver();
   }
   startObserver() {
-    var t, e, i;
+    var t, i, e;
     const n = this.hostElement.shadowRoot.querySelector("slot");
     if (null === n) return;
-    const o = null !== (e = null === (t = n.assignedElements) || void 0 === t ? void 0 : t.call(n, {
+    const o = null !== (i = null === (t = n.assignedElements) || void 0 === t ? void 0 : t.call(n, {
       flatten: !0
-    })) && void 0 !== e ? e : [];
+    })) && void 0 !== i ? i : [];
     // Unwatch previous elements
-        null === (i = this.observedElements) || void 0 === i || i.forEach((t => {
-      var e;
-      return null === (e = this.resizeObserver) || void 0 === e ? void 0 : e.unobserve(t);
+        null === (e = this.observedElements) || void 0 === e || e.forEach((t => {
+      var i;
+      return null === (i = this.resizeObserver) || void 0 === i ? void 0 : i.unobserve(t);
     })), this.observedElements = [], 
     // Watch new elements
     o.forEach((t => {
-      var e;
-      null === (e = this.resizeObserver) || void 0 === e || e.observe(t), this.observedElements.push(t);
+      var i;
+      null === (i = this.resizeObserver) || void 0 === i || i.observe(t), this.observedElements.push(t);
     }));
   }
   stopObserver() {
@@ -59,8 +59,8 @@ const o = class {
   // #endregion
   // #region Render Methods
   render() {
-    return i("slot", {
-      key: "f5cc2cee6e979f047d3854d243ec3560ae5cb35d",
+    return e("slot", {
+      key: "cd3c22934ee46501f6ab1dc317ab702ba97150f3",
       onSlotchange: this.handleSlotChange
     });
   }

package/dist/q2-tecton-elements/q2-search.entry.js

@@ -1,6 +1,6 @@
 import { r as t, c as i, h as e, F as s, g as o } from "./index-Cqkz7Bnm.js";
 
-import { o as n, i as r, w as l, l as a } from "./index-DJw6Feh0.js";
+import { o as n, i as r, w as l, l as a } from "./index-CP8pXJ-l.js";
 
 const h = class {
   constructor(e) {
@@ -30,7 +30,7 @@ const h = class {
     /**
          * Hides the field's `<label>` element from view.
          * @warning
-         * Only use when a visible label is impractical.
+         * Hides the label visually. `label` text is still required for screenreader compliance.
          */
     this.hideLabel = !1, 
     /**
@@ -601,20 +601,20 @@ const h = class {
   }
   render() {
     return e(s, {
-      key: "78ce7b735d59271600debb18ab2f0f5cf315e465"
+      key: "282a0d7a6fc3199a2ae52a9a6f1c3ace8b58c00d"
     }, e("div", {
-      key: "d3e9a713581842cc62969a0df9556733edf6e378",
+      key: "b45c3a05cfb004bf7dfbf266af0e983c9740f7e6",
       "aria-live": "polite",
       "aria-atomic": "true",
       role: "status",
       class: "sr"
     }, this.statusMessage), e("click-elsewhere", {
-      key: "6912af1d8f31af8de7c7ffb28786756819c57afc",
+      key: "603d6b423bd6e2a6f3b90b85f13e744d157c7c61",
       class: this.wrapperClasses,
       role: "presentation",
       onChange: this.onClickElsewhere
     }, e("q2-input", {
-      key: "95a5397765aab6d3279b3d81cc31215f235aefc2",
+      key: "267c12c340e038bb5d10133d59955b4067699fbf",
       ref: t => this.inputField = t,
       class: "q2-search-input",
       label: this.label && a(this.label) || "",

package/dist/q2-tecton-elements/q2-section.entry.js

@@ -1,6 +1,6 @@
-import { r as t, c as e, h as i, g as a } from "./index-Cqkz7Bnm.js";
+import { r as t, c as e, h as i, g as n } from "./index-Cqkz7Bnm.js";
 
-import { a as n, h as r, o as s, i as o, n as c, l as d } from "./index-DJw6Feh0.js";
+import { a, h as r, o as s, i as o, n as c, l as d } from "./index-CP8pXJ-l.js";
 
 import { m as h } from "./mirror-emit-DUjY_ucm.js";
 
@@ -9,8 +9,8 @@ const p = class {
     t(this, i), this.change = e(this, "change", 7), this.tctChange = e(this, "tctChange", 7), 
     this.contentId = "content", this.titleId = "title", this.hasYieldedHeader = !1, 
     this.hideContent = !1, this.addContentSlotListener = () => {
-      if (this.contentSlot) return void this.contentSlot.addEventListener("slotchange", n);
-      const t = new MutationObserver(n);
+      if (this.contentSlot) return void this.contentSlot.addEventListener("slotchange", a);
+      const t = new MutationObserver(a);
       t.observe(this.contentContainer, {
         childList: !0,
         subtree: !0
@@ -39,7 +39,7 @@ const p = class {
       }), 1e3);
     }, this.removeContentSlotListener = () => {
       var t;
-      this.contentSlot ? this.contentSlot.removeEventListener("slotchange", n) : null === (t = this.contentSlotMutationObserver) || void 0 === t || t.disconnect();
+      this.contentSlot ? this.contentSlot.removeEventListener("slotchange", a) : null === (t = this.contentSlotMutationObserver) || void 0 === t || t.disconnect();
     }, this.removeHeaderSlotListener = () => {
       var t;
       this.headerSlot ? this.headerSlot.removeEventListener("slotchange", this.onHeaderSlotChange) : null === (t = this.headerSlotMutationObserver) || void 0 === t || t.disconnect();
@@ -93,7 +93,7 @@ const p = class {
     this.contentHeight = this.currentHeight;
   }
   async expandedObserver(t) {
-    this.clearResizeInterval(), this.resizerFn = setInterval(n, 5), t ? this.expandSection() : this.collapseSection();
+    this.clearResizeInterval(), this.resizerFn = setInterval(a, 5), t ? this.expandSection() : this.collapseSection();
   }
   // #endregion
   // #region Local Methods
@@ -117,33 +117,33 @@ const p = class {
   // #endregion
   // #region Render Methods
   render() {
-    const t = this.label || this.hasYieldedHeader, e = [ "content-wrapper" ], {collapsible: a, hideContent: n, contentHeight: r} = this;
-    a && (n ? e.push("is-closed") : r && e.push("is-transitioning"));
+    const t = this.label || this.hasYieldedHeader, e = [ "content-wrapper" ], {collapsible: n, hideContent: a, contentHeight: r} = this;
+    n && (a ? e.push("is-closed") : r && e.push("is-transitioning"));
     const s = !this.hasYieldedHeader && !!this.label;
     return i("section", {
-      key: "1614590b2058a69ebaee5a59455ec5c8bfa30bde",
+      key: "671c4611adeaff5c3e53d05a43955851d682c792",
       class: "wrapper"
     }, i("header", {
-      key: "e52e3037b59ac3443e812299114850dd6ed8810b",
+      key: "fb724579804c9c3dd4da39bbc45d6df5cfad3815",
       class: t ? "has-header" : ""
     }, i("div", {
-      key: "2066c8ff48cb4c6445068207533b3b6b808e9dd7",
+      key: "76ad513b058264c1dbbeac7732120fea97586e1f",
       class: "header-content",
       id: this.titleId,
       onClick: this.collapsible && this.onHeaderClick
     }, s && i("h2", {
-      key: "a159d8b6bc29e10711b603aef2ce6c1419f4b7ae",
+      key: "6717219e621e8b605e4cbc7fa4f1f84bd4b1f20a",
       class: "title"
     }, d(this.label)), i("div", {
-      key: "829f24123711551a6e3792cb66a2759386d6bec8",
+      key: "61acf1ce4b3281aed6f35571a62f4da58d692d10",
       ref: t => this.headerSlotWrapper = t,
       class: "header-slot-wrapper"
     }, i("slot", {
-      key: "22c2518c55bf5f6160917beea8ab2c523bf76169",
+      key: "acd5b6f6337700edf60fd03ce3d35a634eb2f97c",
       ref: t => this.headerSlot = t,
       name: "q2-section-header"
     }))), this.collapsible && !this.noCollapseIcon && i("q2-btn", {
-      key: "950c09ccfad31453393a52cd21321338d53ac03b",
+      key: "02543820b86cf3d8fd103e0384d283e130fc2212",
       label: d(this.label || "tecton.element.section.defaultToggleLabel"),
       ariaExpanded: `${!!this.expanded}`,
       ariaControls: this.contentId,
@@ -151,10 +151,10 @@ const p = class {
       "hide-label": !0,
       onClick: this.onHeaderClick
     }, i("q2-icon", {
-      key: "a962ea4f0f5c0ba761d3c3eafd31a16f0338c8da",
+      key: "fc7484a585f815948d1bed037948f21e777336f5",
       type: "chevron-up"
     }))), i("div", {
-      key: "45a1762386b7bf88fcaa50c18c1ac059b93d2e59",
+      key: "f57ce6b9a2e8f8ca589274d496362f106148b499",
       class: e.join(" "),
       id: this.contentId,
       "aria-labelledby": this.titleId,
@@ -164,17 +164,17 @@ const p = class {
         height: this.contentHeight
       }
     }, i("div", {
-      key: "80508c39608fa4bf3d6f1911ff592f04e5115014",
+      key: "e1473a0a5f86918df19119a62f99918e8f2203f2",
       ref: t => this.contentContainer = t,
       class: "content",
       tabindex: "-1"
     }, i("slot", {
-      key: "c88062ea0a59b62143e22c8492a8d06826a27a83",
+      key: "f4f92ebdb06b45be6d70759b6b59caf31f816b04",
       ref: t => this.contentSlot = t
     }))));
   }
   get hostElement() {
-    return a(this);
+    return n(this);
   }
   static get watchers() {
     return {

package/dist/q2-tecton-elements/q2-select.entry.js

@@ -1,6 +1,6 @@
 import { r as t, c as e, h as i, F as s, g as o } from "./index-Cqkz7Bnm.js";
 
-import { c as l, l as n, g as a, d as r, o as c, i as h, j as d, k as p, w as u } from "./index-DJw6Feh0.js";
+import { c as l, l as n, g as a, d as r, o as c, i as h, j as d, k as p, w as u } from "./index-CP8pXJ-l.js";
 
 import { m as v } from "./mirror-emit-DUjY_ucm.js";
 
@@ -242,7 +242,7 @@ const g = class {
     this.inputKeydownHandler(t);
   }
   popoverStateChanged({detail: {open: t}}) {
-    this.open !== t && (this.open = t);
+    this.open !== t && (this.open = t, t || this.focusInput());
   }
   handleTctClick() {
     const {name: t, version: e} = p(), i = Number(e.split(".")[0]);
@@ -624,7 +624,7 @@ const g = class {
   }
   render() {
     return i("click-elsewhere", {
-      key: "5c9a6d681aedcebfbadd6b1249f7bcd96c27809c",
+      key: "c5ee7401b7dc4350fb01992e9a8a76e6700cb63c",
       class: this.wrapperClasses,
       role: "presentation",
       onChange: this.clickedElsewhere

package/dist/q2-tecton-elements/q2-stepper-pane.entry.js

@@ -1,8 +1,8 @@
-import { r as t, c as e, h as i, F as a, H as s, g as n } from "./index-Cqkz7Bnm.js";
+import { r as t, c as e, h as i, F as s, H as a, g as n } from "./index-Cqkz7Bnm.js";
 
 import { b as o } from "./component-DaQM9u3s.js";
 
-import { c as r, n as d, l as h } from "./index-DJw6Feh0.js";
+import { c as r, n as d, l as h } from "./index-CP8pXJ-l.js";
 
 import { m as c } from "./mirror-emit-DUjY_ucm.js";
 
@@ -69,35 +69,35 @@ const l = class {
   // #region Render Methods
   render() {
     const {label: t, isActive: e} = this;
-    return i(s, {
-      key: "7acf643f717380c37eb25334534afbca81ac8ab6",
+    return i(a, {
+      key: "6cbcc9f6363bf6f60ff2d999b9317e32691168da",
       role: "listitem"
-    }, i(a, {
-      key: "0241a9ad68973eea81c961070d6171dab3241f79"
+    }, i(s, {
+      key: "f9b8d56b05e6d26978feab6386849498f797cca6"
     }, i("div", {
-      key: "6678cb4a7e65a3a4341ff552682c1011c588108b",
+      key: "383a77ce1848255574680375e7df122bf4468f95",
       role: "group",
       "aria-labelledby": "pane-label",
       tabindex: "0",
       hidden: !(e || this.isChildActive && this.showWithChildren)
     }, i("slot", {
-      key: "0f8d339f894bdaa55bd5bdf94b1220da7a083dde"
+      key: "9b9cf0bd60e23d9860174c5525c3f688c70411f4"
     })), i("div", {
-      key: "51e3934ad791e45486360ab8c6509b68e3a15d9d",
+      key: "8f628fe11acfc7a8df7c84013a7eaca9d5a1327a",
       hidden: !0
     }, i("span", {
-      key: "96fe08c826d87f86559fe2dbb586914b4065eb40",
+      key: "6c03721fb71d8e3c5c48a6af80ae8723575e0205",
       id: "pane-label"
     }, i("slot", {
-      key: "b4cab1594ae047f032fbaa67f75167e31cc4cdf7",
+      key: "da9a253e3399d0552478a29c743fc4a73f432ddf",
       name: "label",
       onSlotchange: () => this.contentChange.emit()
     }, t && h(t))), i("slot", {
-      key: "473cf6b9bc3ef5995d11e46502db1321d59baa5e",
+      key: "d7229f76aedb1c96623fac655982b88d2769b9ae",
       name: "description",
       onSlotchange: () => this.contentChange.emit()
     })), i("slot", {
-      key: "76cb24680ed1ec8a49956f888accf3fd07da7fa0",
+      key: "7670d7b17b74732d0dd14198dd50560d005700d1",
       name: "children"
     })));
   }

package/dist/q2-tecton-elements/q2-stepper-vertical.entry.js

@@ -1,6 +1,6 @@
 import { r as t, c as e, h as a, F as r, g as i } from "./index-Cqkz7Bnm.js";
 
-import { c as s, o as n, i as o, l as c } from "./index-DJw6Feh0.js";
+import { c as s, o as n, i as o, l as c } from "./index-CP8pXJ-l.js";
 
 import { m as l } from "./mirror-emit-DUjY_ucm.js";
 
@@ -255,13 +255,13 @@ const d = class {
     }), $ = this.getStatusLabel(z), S = l ? `${y} ${f} ${x}` : void 0, C = l ? void 0 : `${k}, ${$}`;
     let q;
     "complete" === b ? q = "success-filled" : "error" === b && (q = "warning-filled");
-    const A = [ "step-btn" ];
-    b && A.push(`status-${b}`), v && A.push("pane-disabled");
-    const P = t.children.map((t => t.id)), I = u || P.includes(i);
+    const P = [ "step-btn" ];
+    b && P.push(`status-${b}`), v && P.push("pane-disabled");
+    const A = t.children.map((t => t.id)), I = u || A.includes(i);
     return a("li", {
       role: "presentation"
     }, a("button", {
-      class: A.join(" "),
+      class: P.join(" "),
       type: "button",
       "aria-labelledby": S,
       "aria-describedBy": w,
@@ -299,15 +299,15 @@ const d = class {
   }
   render() {
     return a(r, {
-      key: "9d40414e7b510493b0236568c4d6231eeacdbd80"
+      key: "318ce778645240cfb969f39c7df5326691b6c5ed"
     }, a("ul", {
-      key: "b3a444833439d59be874a2bf04833f8df0ff107f",
+      key: "3af2a138e648b887b3d8f96cf2b06bb6f11d1159",
       role: "tablist"
     }, this.structuredPanes.map(((t, e) => this.renderStepBtn(t, e)))), a("div", {
-      key: "34f3841d0eb0c5fe96670ac3d5e87244682ace74",
+      key: "628d3fb7485c7648d31b7a4935476a61cdfef7b4",
       role: "list"
     }, a("slot", {
-      key: "e224e413162cb28eab4ec0e8b51367ed3b83fa0b"
+      key: "9d616d4a7234dee7715a696d0a17d37914741b1a"
     })));
   }
   get hostElement() {

package/dist/q2-tecton-elements/q2-stepper.entry.js

@@ -1,6 +1,6 @@
-import { r as t, c as e, h as r, F as i, g as o } from "./index-Cqkz7Bnm.js";
+import { r as t, c as e, h as r, F as i, g as a } from "./index-Cqkz7Bnm.js";
 
-import { c as a, o as s, i as l, l as n } from "./index-DJw6Feh0.js";
+import { c as o, o as s, i as l, l as n } from "./index-CP8pXJ-l.js";
 
 import { m as c } from "./mirror-emit-DUjY_ucm.js";
 
@@ -16,7 +16,7 @@ const d = class {
     this.showScrollRight = !1, this.checkForPanes = () => {
       const {allPanes: t} = this;
       t.length && (t.forEach((t => {
-        t.id || (t.id = `step-${a()}`);
+        t.id || (t.id = `step-${o()}`);
       })), this.stepCount = t.length);
     }, this.checkScrollState = () => {
       if (!this.listElement) return;
@@ -32,33 +32,33 @@ const d = class {
       this.checkForPanes(), this.checkScrollState();
     }, this.onStepClick = (t, e) => {
       t.stopPropagation();
-      const {currentStep: r, stepCount: i, lastEnabledStep: o} = this;
-      e > o || e === r || c(this, [ "change", "tctChange" ], {
+      const {currentStep: r, stepCount: i, lastEnabledStep: a} = this;
+      e > a || e === r || c(this, [ "change", "tctChange" ], {
         selectedStep: e,
-        lastEnabledStep: o,
+        lastEnabledStep: a,
         currentStep: r,
         stepCount: i
       });
     }, this.onStepKeyDown = (t, e) => {
-      const {lastEnabledStep: r, stepCount: i} = this, {key: o} = t;
-      let a;
-      switch (o) {
+      const {lastEnabledStep: r, stepCount: i} = this, {key: a} = t;
+      let o;
+      switch (a) {
        case "ArrowLeft":
-        t.preventDefault(), a = Math.max(e - 1, 0);
+        t.preventDefault(), o = Math.max(e - 1, 0);
         break;
 
        case "ArrowRight":
-        t.preventDefault(), a = Math.min(e + 1, i);
+        t.preventDefault(), o = Math.min(e + 1, i);
         break;
 
        case "Home":
-        t.preventDefault(), a = 1;
+        t.preventDefault(), o = 1;
         break;
 
        case "End":
-        t.preventDefault(), a = r;
+        t.preventDefault(), o = r;
       }
-      a && this.focusStep(a, !0);
+      o && this.focusStep(o, !0);
     };
   }
   // #endregion
@@ -116,11 +116,11 @@ const d = class {
       break;
 
      case "string":
-      const o = this.hostElement.querySelector(`#${t}`);
-      if (!o) break;
-      const a = this.allPanes.indexOf(o);
-      if (a + 1 > this.lastEnabledStep || a < 0) break;
-      if (i = this.listElement.children[a], !i) break;
+      const a = this.hostElement.querySelector(`#${t}`);
+      if (!a) break;
+      const o = this.allPanes.indexOf(a);
+      if (o + 1 > this.lastEnabledStep || o < 0) break;
+      if (i = this.listElement.children[o], !i) break;
       null === (r = i.firstElementChild) || void 0 === r || r.click();
     }
   }
@@ -139,12 +139,12 @@ const d = class {
   }
   focusStep(t, e, r) {
     var i;
-    const {listElement: o} = this;
-    if (!o) return;
-    const a = o.children[t - 1], s = document.activeElement === this.hostElement;
-    if (a && ((s || r) && (null === (i = a.firstElementChild) || void 0 === i || i.focus()), 
+    const {listElement: a} = this;
+    if (!a) return;
+    const o = a.children[t - 1], s = document.activeElement === this.hostElement;
+    if (o && ((s || r) && (null === (i = o.firstElementChild) || void 0 === i || i.focus()), 
     e)) {
-      const t = a.offsetLeft - this.listElement.clientWidth / 2;
+      const t = o.offsetLeft - this.listElement.clientWidth / 2;
       this.listElement.scrollTo({
         left: t,
         behavior: "smooth"
@@ -190,9 +190,9 @@ const d = class {
   // #region Render Methods
   renderStepBtn(t) {
     var e;
-    const {allPanes: o, stepCount: a, lastEnabledStep: s, currentStep: l} = this, c = null !== (e = null == o ? void 0 : o[t]) && void 0 !== e ? e : null, {id: d, status: b} = c, h = this.getPaneSlotOrProperty(c, "label"), v = this.getPaneSlotOrProperty(c, "description"), u = t + 1, f = u === l, m = !!h && `label-${d}`, g = !!h && !!v && `description-${d}`, w = `position-${d}`, x = `status-${d}`, y = "complete" === b || "error" === b ? b : "pending", k = n("tecton.element.stepper.number", {
+    const {allPanes: a, stepCount: o, lastEnabledStep: s, currentStep: l} = this, c = null !== (e = null == a ? void 0 : a[t]) && void 0 !== e ? e : null, {id: d, status: b} = c, h = this.getPaneSlotOrProperty(c, "label"), v = this.getPaneSlotOrProperty(c, "description"), u = t + 1, f = u === l, m = !!h && `label-${d}`, g = !!h && !!v && `description-${d}`, w = `position-${d}`, x = `status-${d}`, y = "complete" === b || "error" === b ? b : "pending", k = n("tecton.element.stepper.number", {
       step: `${u}`,
-      total: `${a}`
+      total: `${o}`
     }), 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");
@@ -200,7 +200,7 @@ const d = class {
     b && $.push(`status-${b}`);
     const q = "locked" === b, L = c.disabled;
     L && $.push("pane-disabled");
-    const j = q || u > s;
+    const P = q || u > s;
     return r("li", {
       role: "presentation"
     }, r("button", {
@@ -210,11 +210,11 @@ const d = class {
       "aria-describedBy": g,
       "aria-label": C,
       "aria-selected": `${f}`,
-      "aria-disabled": j ? "true" : void 0,
+      "aria-disabled": P ? "true" : void 0,
       role: "tab",
       tabIndex: f ? 0 : -1,
       onKeyDown: t => this.onStepKeyDown(t, u),
-      onClick: t => !L && !j && this.onStepClick(t, u)
+      onClick: t => !L && !P && this.onStepClick(t, u)
     }, r(i, null, h && r(i, null, r("span", {
       class: "sr-only",
       id: w
@@ -241,57 +241,57 @@ const d = class {
     }) : "");
   }
   render() {
-    const {stepCount: t, scrollEnabled: e, showScrollLeft: o, showScrollRight: a} = this, s = [ "step-container" ];
+    const {stepCount: t, scrollEnabled: e, showScrollLeft: a, showScrollRight: o} = this, s = [ "step-container" ];
     return e && s.push("has-scroll"), r(i, {
-      key: "cd7a09546e4b74cf98f5e27dbcf0efce71e02781"
+      key: "c9839ff458e2d71fb66c42cb5b4ae394c7ffb9ff"
     }, r("div", {
-      key: "aaa383584217da20fdd01174f4b136dfef0128b7",
+      key: "51d8a914662c2794e16928c971ef995bca933776",
       class: s.join(" ")
     }, e && r(i, {
-      key: "6f7f38d768b274409606132cc62d36d48812f50c"
+      key: "0b1d1dd0c973d2266a468a8f81d0c9bdd2a430cc"
     }, r("div", {
-      key: "98e26550803496a0edd0e7415b4ec9e16b501722",
+      key: "87b9ae7e5ab260ee8743e78302017389941c3ead",
       class: "gradient-left",
-      hidden: !o
+      hidden: !a
     }), r("div", {
-      key: "58102ecd26dd3f6b36d530f36ecc109b287b4faa",
+      key: "a5d487517c497ae927a1fd05d7c4631aa00d76bf",
       class: "gradient-right",
-      hidden: !a
+      hidden: !o
     }), r("q2-btn", {
-      key: "a475ba4a846ea5cf93a5ca46422a5473e0d266bd",
+      key: "fe008283e673c2b51acf1cc654ed1c844a6d33bf",
       class: "btn-left",
       hideLabel: !0,
       hidden: !this.showScrollLeft,
       label: n("tecton.element.stepper.scrollLeft"),
       onTctClick: () => this.onScrollBtnClick("left")
     }, r("q2-icon", {
-      key: "b040f724a926e5c07a81438e3586e0eb7a3c063b",
+      key: "7d83dfafb861da55085fa33a4aca620416849e27",
       type: "chevron-left"
     })), r("q2-btn", {
-      key: "119dbcd49ce282cbccd58be097f8833e22df4fb4",
+      key: "c81adb720c387ddabb7eead010db863b0e295208",
       class: "btn-right",
       hideLabel: !0,
       hidden: !this.showScrollRight,
       label: n("tecton.element.stepper.scrollRight"),
       onTctClick: () => this.onScrollBtnClick("right")
     }, r("q2-icon", {
-      key: "c656a9493134eb6a4ea0a008ee94829fc708ecfe",
+      key: "c0d5939662d35c18ea9c486a1dc8da243b779ea2",
       type: "chevron-right"
     }))), r("ul", {
-      key: "09e1472989c7c2e6c40504072bca2790865e013a",
+      key: "07501b7abbe4e828686b87c057b79bae4059e826",
       onScroll: this.checkScrollState,
       ref: t => this.listElement = t,
       role: "tablist"
     }, t > 0 && [ ...Array(t).keys() ].map((t => this.renderStepBtn(t))))), r("div", {
-      key: "0b25c172d585892aa9e286dac6080ce2bbb80e1a",
+      key: "df8d51e7b40ee1999b0a280fa8524559accfec9a",
       role: "list"
     }, r("slot", {
-      key: "507375368c8e89a94f8af0a44bf4951fd14d7466",
+      key: "a8ce54b65b8c7d8542e60811a7215fed12400e38",
       onSlotchange: () => this.onSlotChange()
     })));
   }
   get hostElement() {
-    return o(this);
+    return a(this);
   }
   static get watchers() {
     return {

package/dist/q2-tecton-elements/q2-surface.entry.js

@@ -69,14 +69,14 @@ const c = class {
   // #region Render Methods
   render() {
     return o(e, {
-      key: "8dd96991bc74e2157dc256f21eb4953eaeffdd46"
+      key: "ee34e7472208140fc2203e0494140778c0c16756"
     }, o("div", {
-      key: "a5b315fd3e6dd999cd704b3fd2c9de5ffb139033",
+      key: "0909c642dd27cbc96f7a8ea25f5d7f712395ed19",
       class: "container",
       role: this.clickable ? "button" : void 0,
       tabIndex: this.clickable ? 0 : void 0
     }, o("slot", {
-      key: "4897bfe06a95bf14eddf2bb964bf4a27ed96798a"
+      key: "fbba5735e98b065121f0b73ef926b6546aeab82c"
     })));
   }
   get hostElement() {