q2-tecton-elements 1.72.0 → 1.73.0

package/dist/components/q2-radio-group.js

@@ -161,26 +161,26 @@ const u =  t(class extends o {
   render() {
     const t = this.label || this.optional || this.readonly, {hasError: o} = this, r = t && !this.hideLabel || o;
     return e(i, {
-      key: "25ec8b2089b54a5d968c3cfb99a1740c5dcbd0d0"
+      key: "0503a52d9cb4715cba418f445b708ad650aa5f1f"
     }, r && e("div", {
-      key: "1ff216a3e27dd4284dbb2f0300e25728f376df62",
+      key: "7236b03ea65a44bbfacf57944370236c9653d69c",
       class: "label-row"
     }, t && !this.hideLabel && e("div", {
-      key: "462c3833b83b524426ef2f937e0bf60c1cc841f7",
+      key: "fbede7f7cfbd2c0fe8364a77966009a2e14ede37",
       class: "group-legend"
     }, l(this)), o && e("q2-icon", {
-      key: "249e09338abad9e55fa472bcc9807ce2297cd4c3",
+      key: "b7d7456a6fd1e673d5799748a727db2babc3d2bf",
       type: "error",
       "test-id": "iconError"
     })), e("fieldset", {
-      key: "2085294bc3fc10c2f3cf20e6a1a0553cb0829e7d",
+      key: "cba87bdefb32eaa0cd6cc1760d874fd622146b5e",
       onChange: this.onInnerRadioChange,
       "aria-invalid": o ? "" + o : void 0
     }, t && e("legend", {
-      key: "ad2686c2e07d168a0cf1cbe0baf844121add6ecd",
+      key: "c4ff0e86435564ece7e468ecd7b0e373ae9fc078",
       class: "sr-only"
     }, l(this)), e("q2-resize-observer", {
-      key: "e183977bae5484f38356b17b274d6e3125d4d603",
+      key: "f3bfe6941b46da58433ed959017a4383c07ce16d",
       onTctResize: this.handleResize,
       disabled: this.tileLayout || "horizontal" !== this.orientation
     }, this.inputDom())));

package/dist/components/q2-radio.js

@@ -72,10 +72,10 @@ const s =  r(class extends a {
   // #region Render Methods
   render() {
     return t("div", {
-      key: "8fbe0ad9c8b0712fd51dbac67baae6209ebf2532",
+      key: "1aafcfbdb7d6e2863618d6741bc12491a109ec80",
       class: this.groupTileLayout ? "radio-tile" : "radio-container"
     }, t("input", {
-      key: "a9322154f304963731fb3d6ee99632c06938f27f",
+      key: "1989707753be2d6b8bc8c69098a5c9bf27af99b7",
       ref: r => this.inputField = r,
       class: "sr",
       id: this._id,
@@ -88,19 +88,19 @@ const s =  r(class extends a {
       onChange: this.inputChange,
       "test-id": "q2RadioInnerRadioBox"
     }), t("label", {
-      key: "234f95d4c4656e4325a15853bacf888d7a4ae446",
+      key: "93a6f7f8d718c8070c4d4d88c3b48905f518e166",
       htmlFor: this._id,
       class: this.hideLabel ? "label-hidden" : void 0,
       "test-id": "radioButton"
     }, !this.groupTileLayout && t("span", {
-      key: "ac98c34734a5e54b347cc2a48dc23d3ea2eb31ce",
+      key: "f351a1aef39845bbb1bbd360037d36486de27cd9",
       class: "radio-mark",
       "aria-hidden": "true"
     }), !this.hideLabel && t("div", {
-      key: "41dd2c195bc03dd8af8d5722e4aa2323cbeaab76",
+      key: "c9cb25115cffc72dfbb52024b6343f16a0744fbc",
       class: "label-content"
     }, this.label && l(this.label) || "", t("slot", {
-      key: "595014c6a32c2e98f7612dc51f0bd89579770988"
+      key: "8d63e148c83fb247b60b719d3de8627c327efaa4"
     }))));
   }
   get hostElement() {

package/dist/components/q2-relative-time.js

@@ -118,7 +118,7 @@ const r =  e(class extends t {
   render() {
     const {shouldShow: e, displayedMessage: t} = this;
     return i(s, {
-      key: "7bcf2e8d9cb391ea43664b9cf01ec6d474a1743e"
+      key: "c6d24ac6d794284c3f0ea654f1999ff6e201f8b1"
     }, e ? i("time", {
       dateTime: t
     }, t) : null);

package/dist/components/q2-resize-observer2.js

@@ -1,8 +1,8 @@
-import { proxyCustomElement as e, HTMLElement as t, createEvent as i, h as n, transformTag as s } from "@stencil/core/internal/client";
+import { proxyCustomElement as t, HTMLElement as e, createEvent as i, h as n, transformTag as s } from "@stencil/core/internal/client";
 
-const o =  e(class extends t {
-  constructor(e) {
-    super(), !1 !== e && this.__registerHost(), this.__attachShadow(), this.tctResize = i(this, "tctResize", 7), 
+const o =  t(class extends e {
+  constructor(t) {
+    super(), !1 !== t && this.__registerHost(), this.__attachShadow(), this.tctResize = i(this, "tctResize", 7), 
     this.observedElements = [], 
     // #endregion
     // #region Local Methods
@@ -16,10 +16,10 @@ const o =  e(class extends t {
     this.stopObserver(), this.resizeObserver = null;
   }
   componentDidLoad() {
-    "undefined" != typeof ResizeObserver ? this.resizeObserver = new ResizeObserver((e => {
+    "undefined" != typeof ResizeObserver ? this.resizeObserver = new ResizeObserver((t => {
       this.tctResize.emit({
-        entries: e
-      }), this.currentResizeObserverEntries = e;
+        entries: t
+      }), this.currentResizeObserverEntries = t;
     })) : console.warn("ResizeObserver is not defined."), this.disabled || this.startObserver();
   }
   // #endregion
@@ -32,36 +32,36 @@ const o =  e(class extends t {
   }
   // #endregion
   // #region Watchers
-  disabledUpdated(e) {
-    e ? this.stopObserver() : this.startObserver();
+  disabledUpdated(t) {
+    t ? this.stopObserver() : this.startObserver();
   }
   startObserver() {
-    var e, t, i;
+    var t, e, i;
     const n = this.hostElement.shadowRoot.querySelector("slot");
     if (null === n) return;
-    const s = null !== (t = null === (e = n.assignedElements) || void 0 === e ? void 0 : e.call(n, {
+    const s = null !== (e = null === (t = n.assignedElements) || void 0 === t ? void 0 : t.call(n, {
       flatten: !0
-    })) && void 0 !== t ? t : [];
+    })) && void 0 !== e ? e : [];
     // Unwatch previous elements
-        null === (i = this.observedElements) || void 0 === i || i.forEach((e => {
-      var t;
-      return null === (t = this.resizeObserver) || void 0 === t ? void 0 : t.unobserve(e);
+        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);
     })), this.observedElements = [], 
     // Watch new elements
-    s.forEach((e => {
-      var t;
-      null === (t = this.resizeObserver) || void 0 === t || t.observe(e), this.observedElements.push(e);
+    s.forEach((t => {
+      var e;
+      null === (e = this.resizeObserver) || void 0 === e || e.observe(t), this.observedElements.push(t);
     }));
   }
   stopObserver() {
-    var e;
-    null === (e = this.resizeObserver) || void 0 === e || e.disconnect();
+    var t;
+    null === (t = this.resizeObserver) || void 0 === t || t.disconnect();
   }
   // #endregion
   // #region Render Methods
   render() {
     return n("slot", {
-      key: "f5cc2cee6e979f047d3854d243ec3560ae5cb35d",
+      key: "cd3c22934ee46501f6ab1dc317ab702ba97150f3",
       onSlotchange: this.handleSlotChange
     });
   }
@@ -89,8 +89,8 @@ const o =  e(class extends t {
 
 function defineCustomElement() {
   if ("undefined" == typeof customElements) return;
-  [ "q2-resize-observer" ].forEach((e => {
-    if ("q2-resize-observer" === e) customElements.get(s(e)) || customElements.define(s(e), o);
+  [ "q2-resize-observer" ].forEach((t => {
+    if ("q2-resize-observer" === t) customElements.get(s(t)) || customElements.define(s(t), o);
   }));
 }
 

package/dist/components/q2-search.js

@@ -47,7 +47,7 @@ const f =  t(class extends e {
     /**
          * 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, 
     /**
@@ -618,20 +618,20 @@ const f =  t(class extends e {
   }
   render() {
     return s(o, {
-      key: "78ce7b735d59271600debb18ab2f0f5cf315e465"
+      key: "282a0d7a6fc3199a2ae52a9a6f1c3ace8b58c00d"
     }, s("div", {
-      key: "d3e9a713581842cc62969a0df9556733edf6e378",
+      key: "b45c3a05cfb004bf7dfbf266af0e983c9740f7e6",
       "aria-live": "polite",
       "aria-atomic": "true",
       role: "status",
       class: "sr"
     }, this.statusMessage), s("click-elsewhere", {
-      key: "6912af1d8f31af8de7c7ffb28786756819c57afc",
+      key: "603d6b423bd6e2a6f3b90b85f13e744d157c7c61",
       class: this.wrapperClasses,
       role: "presentation",
       onChange: this.onClickElsewhere
     }, s("q2-input", {
-      key: "95a5397765aab6d3279b3d81cc31215f235aefc2",
+      key: "267c12c340e038bb5d10133d59955b4067699fbf",
       ref: t => this.inputField = t,
       class: "q2-search-input",
       label: this.label && h(this.label) || "",

package/dist/components/q2-section.js

@@ -6,11 +6,11 @@ import { m as p } from "./mirror-emit.js";
 
 import { d as l } from "./q2-btn2.js";
 
-import { d as b } from "./q2-icon2.js";
+import { d as f } from "./q2-icon2.js";
 
-import { d as m } from "./q2-loading2.js";
+import { d as b } from "./q2-loading2.js";
 
-const v =  t(class extends e {
+const m =  t(class extends e {
   constructor(t) {
     super(), !1 !== t && this.__registerHost(), this.__attachShadow(), this.change = i(this, "change", 7), 
     this.tctChange = i(this, "tctChange", 7), this.contentId = "content", this.titleId = "title", 
@@ -127,29 +127,29 @@ const v =  t(class extends e {
     i && (a ? e.push("is-closed") : s && e.push("is-transitioning"));
     const o = !this.hasYieldedHeader && !!this.label;
     return n("section", {
-      key: "1614590b2058a69ebaee5a59455ec5c8bfa30bde",
+      key: "671c4611adeaff5c3e53d05a43955851d682c792",
       class: "wrapper"
     }, n("header", {
-      key: "e52e3037b59ac3443e812299114850dd6ed8810b",
+      key: "fb724579804c9c3dd4da39bbc45d6df5cfad3815",
       class: t ? "has-header" : ""
     }, n("div", {
-      key: "2066c8ff48cb4c6445068207533b3b6b808e9dd7",
+      key: "76ad513b058264c1dbbeac7732120fea97586e1f",
       class: "header-content",
       id: this.titleId,
       onClick: this.collapsible && this.onHeaderClick
     }, o && n("h2", {
-      key: "a159d8b6bc29e10711b603aef2ce6c1419f4b7ae",
+      key: "6717219e621e8b605e4cbc7fa4f1f84bd4b1f20a",
       class: "title"
     }, h(this.label)), n("div", {
-      key: "829f24123711551a6e3792cb66a2759386d6bec8",
+      key: "61acf1ce4b3281aed6f35571a62f4da58d692d10",
       ref: t => this.headerSlotWrapper = t,
       class: "header-slot-wrapper"
     }, n("slot", {
-      key: "22c2518c55bf5f6160917beea8ab2c523bf76169",
+      key: "acd5b6f6337700edf60fd03ce3d35a634eb2f97c",
       ref: t => this.headerSlot = t,
       name: "q2-section-header"
     }))), this.collapsible && !this.noCollapseIcon && n("q2-btn", {
-      key: "950c09ccfad31453393a52cd21321338d53ac03b",
+      key: "02543820b86cf3d8fd103e0384d283e130fc2212",
       label: h(this.label || "tecton.element.section.defaultToggleLabel"),
       ariaExpanded: "" + !!this.expanded,
       ariaControls: this.contentId,
@@ -157,10 +157,10 @@ const v =  t(class extends e {
       "hide-label": !0,
       onClick: this.onHeaderClick
     }, n("q2-icon", {
-      key: "a962ea4f0f5c0ba761d3c3eafd31a16f0338c8da",
+      key: "fc7484a585f815948d1bed037948f21e777336f5",
       type: "chevron-up"
     }))), n("div", {
-      key: "45a1762386b7bf88fcaa50c18c1ac059b93d2e59",
+      key: "f57ce6b9a2e8f8ca589274d496362f106148b499",
       class: e.join(" "),
       id: this.contentId,
       "aria-labelledby": this.titleId,
@@ -170,12 +170,12 @@ const v =  t(class extends e {
         height: this.contentHeight
       }
     }, n("div", {
-      key: "80508c39608fa4bf3d6f1911ff592f04e5115014",
+      key: "e1473a0a5f86918df19119a62f99918e8f2203f2",
       ref: t => this.contentContainer = t,
       class: "content",
       tabindex: "-1"
     }, n("slot", {
-      key: "c88062ea0a59b62143e22c8492a8d06826a27a83",
+      key: "f4f92ebdb06b45be6d70759b6b59caf31f816b04",
       ref: t => this.contentSlot = t
     }))));
   }
@@ -214,12 +214,12 @@ const v =  t(class extends e {
   } ]
 } ]);
 
-const f = v, defineCustomElement = function() {
+const v = m, defineCustomElement = function() {
   if ("undefined" == typeof customElements) return;
   [ "q2-section", "q2-btn", "q2-icon", "q2-loading" ].forEach((t => {
     switch (t) {
      case "q2-section":
-      customElements.get(a(t)) || customElements.define(a(t), v);
+      customElements.get(a(t)) || customElements.define(a(t), m);
       break;
 
      case "q2-btn":
@@ -227,13 +227,13 @@ const f = v, defineCustomElement = function() {
       break;
 
      case "q2-icon":
-      customElements.get(a(t)) || b();
+      customElements.get(a(t)) || f();
       break;
 
      case "q2-loading":
-      customElements.get(a(t)) || m();
+      customElements.get(a(t)) || b();
     }
   }));
 };
 
-export { f as Q2Section, defineCustomElement }
+export { v as Q2Section, defineCustomElement }

package/dist/components/q2-select2.js

@@ -258,7 +258,7 @@ const O =  t(class extends e {
     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} = u(), i = Number(e.split(".")[0]);
@@ -640,7 +640,7 @@ const O =  t(class extends e {
   }
   render() {
     return s("click-elsewhere", {
-      key: "5c9a6d681aedcebfbadd6b1249f7bcd96c27809c",
+      key: "c5ee7401b7dc4350fb01992e9a8a76e6700cb63c",
       class: this.wrapperClasses,
       role: "presentation",
       onChange: this.clickedElsewhere

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

@@ -70,34 +70,34 @@ const p =  t(class extends e {
   render() {
     const {label: t, isActive: e} = this;
     return s(n, {
-      key: "7acf643f717380c37eb25334534afbca81ac8ab6",
+      key: "6cbcc9f6363bf6f60ff2d999b9317e32691168da",
       role: "listitem"
     }, s(a, {
-      key: "0241a9ad68973eea81c961070d6171dab3241f79"
+      key: "f9b8d56b05e6d26978feab6386849498f797cca6"
     }, s("div", {
-      key: "6678cb4a7e65a3a4341ff552682c1011c588108b",
+      key: "383a77ce1848255574680375e7df122bf4468f95",
       role: "group",
       "aria-labelledby": "pane-label",
       tabindex: "0",
       hidden: !(e || this.isChildActive && this.showWithChildren)
     }, s("slot", {
-      key: "0f8d339f894bdaa55bd5bdf94b1220da7a083dde"
+      key: "9b9cf0bd60e23d9860174c5525c3f688c70411f4"
     })), s("div", {
-      key: "51e3934ad791e45486360ab8c6509b68e3a15d9d",
+      key: "8f628fe11acfc7a8df7c84013a7eaca9d5a1327a",
       hidden: !0
     }, s("span", {
-      key: "96fe08c826d87f86559fe2dbb586914b4065eb40",
+      key: "6c03721fb71d8e3c5c48a6af80ae8723575e0205",
       id: "pane-label"
     }, s("slot", {
-      key: "b4cab1594ae047f032fbaa67f75167e31cc4cdf7",
+      key: "da9a253e3399d0552478a29c743fc4a73f432ddf",
       name: "label",
       onSlotchange: () => this.contentChange.emit()
     }, t && h(t))), s("slot", {
-      key: "473cf6b9bc3ef5995d11e46502db1321d59baa5e",
+      key: "d7229f76aedb1c96623fac655982b88d2769b9ae",
       name: "description",
       onSlotchange: () => this.contentChange.emit()
     })), s("slot", {
-      key: "76cb24680ed1ec8a49956f888accf3fd07da7fa0",
+      key: "7670d7b17b74732d0dd14198dd50560d005700d1",
       name: "children"
     })));
   }

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

@@ -301,15 +301,15 @@ const v =  t(class extends e {
   }
   render() {
     return r(i, {
-      key: "9d40414e7b510493b0236568c4d6231eeacdbd80"
+      key: "318ce778645240cfb969f39c7df5326691b6c5ed"
     }, r("ul", {
-      key: "b3a444833439d59be874a2bf04833f8df0ff107f",
+      key: "3af2a138e648b887b3d8f96cf2b06bb6f11d1159",
       role: "tablist"
     }, this.structuredPanes.map(((t, e) => this.renderStepBtn(t, e)))), r("div", {
-      key: "34f3841d0eb0c5fe96670ac3d5e87244682ace74",
+      key: "628d3fb7485c7648d31b7a4935476a61cdfef7b4",
       role: "list"
     }, r("slot", {
-      key: "e224e413162cb28eab4ec0e8b51367ed3b83fa0b"
+      key: "9d616d4a7234dee7715a696d0a17d37914741b1a"
     })));
   }
   get hostElement() {

package/dist/components/q2-stepper.js

@@ -1,4 +1,4 @@
-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 a, Fragment as o, transformTag as i } from "@stencil/core/internal/client";
 
 import { c as s, o as n, i as l, l as c } from "./index2.js";
 
@@ -38,23 +38,23 @@ const u =  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: a, lastEnabledStep: o} = this;
+      e > o || e === r || p(this, [ "change", "tctChange" ], {
         selectedStep: e,
-        lastEnabledStep: a,
+        lastEnabledStep: o,
         currentStep: r,
-        stepCount: o
+        stepCount: a
       });
     }, this.onStepKeyDown = (t, e) => {
-      const {lastEnabledStep: r, stepCount: o} = this, {key: a} = t;
+      const {lastEnabledStep: r, stepCount: a} = this, {key: o} = t;
       let i;
-      switch (a) {
+      switch (o) {
        case "ArrowLeft":
         t.preventDefault(), i = Math.max(e - 1, 0);
         break;
 
        case "ArrowRight":
-        t.preventDefault(), i = Math.min(e + 1, o);
+        t.preventDefault(), i = Math.min(e + 1, a);
         break;
 
        case "Home":
@@ -113,21 +113,21 @@ const u =  t(class extends e {
      */
   async selectStep(t) {
     var e, r;
-    let o;
+    let a;
     switch (typeof t) {
      case "number":
       if (t > this.lastEnabledStep || t < 1) break;
-      if (o = this.listElement.children[t - 1], !o) return;
-      null === (e = o.firstElementChild) || void 0 === e || e.click();
+      if (a = this.listElement.children[t - 1], !a) return;
+      null === (e = a.firstElementChild) || void 0 === e || e.click();
       break;
 
      case "string":
-      const a = this.hostElement.querySelector("#" + t);
-      if (!a) break;
-      const i = this.allPanes.indexOf(a);
+      const o = this.hostElement.querySelector("#" + t);
+      if (!o) break;
+      const i = this.allPanes.indexOf(o);
       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();
+      if (a = this.listElement.children[i], !a) break;
+      null === (r = a.firstElementChild) || void 0 === r || r.click();
     }
   }
   // #endregion
@@ -144,11 +144,11 @@ const u =  t(class extends e {
     return Array.from(this.hostElement.querySelectorAll("q2-stepper-pane"));
   }
   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()), 
+    var a;
+    const {listElement: o} = this;
+    if (!o) return;
+    const i = o.children[t - 1], s = document.activeElement === this.hostElement;
+    if (i && ((s || r) && (null === (a = i.firstElementChild) || void 0 === a || a.focus()), 
     e)) {
       const t = i.offsetLeft - this.listElement.clientWidth / 2;
       this.listElement.scrollTo({
@@ -159,8 +159,8 @@ const u =  t(class extends e {
   }
   getPaneSlotOrProperty(t, e) {
     var r;
-    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]);
+    const a = Array.from(t.children).find((t => t.getAttribute("slot") === e));
+    return null !== (r = null == a ? void 0 : a.outerHTML) && void 0 !== r ? r : c(t[e]);
   }
   getStatusLabel(t) {
     const e = "tecton.element.stepper.status." + t, r = c(e);
@@ -207,9 +207,9 @@ const u =  t(class extends e {
     const L = "locked" === b, j = l.disabled;
     j && q.push("pane-disabled");
     const H = L || u > s;
-    return o("li", {
+    return a("li", {
       role: "presentation"
-    }, o("button", {
+    }, a("button", {
       class: q.join(" "),
       type: "button",
       "aria-labelledby": S,
@@ -221,78 +221,78 @@ const u =  t(class extends e {
       tabIndex: f ? 0 : -1,
       onKeyDown: t => this.onStepKeyDown(t, u),
       onClick: t => !j && !H && this.onStepClick(t, u)
-    }, o(a, null, h && o(a, null, o("span", {
+    }, a(o, null, h && a(o, null, a("span", {
       class: "sr-only",
       id: w
-    }, k), o("span", {
+    }, k), a("span", {
       class: "sr-only",
       id: x
-    }, z)), E ? o("div", {
+    }, z)), E ? a("div", {
       class: "step-icon"
-    }, o("q2-icon", {
+    }, a("q2-icon", {
       "aria-hidden": "true",
       type: E
-    })) : o("div", {
+    })) : a("div", {
       class: "step-bubble"
-    }, u), m && o("div", {
+    }, u), m && a("div", {
       class: "step-label",
       id: m,
       innerHTML: d(h)
-    }), m && g && o("div", {
+    }), m && g && a("div", {
       class: "step-description",
       id: g,
       innerHTML: d(v)
-    }))), t ? o("div", {
+    }))), t ? a("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: "cd7a09546e4b74cf98f5e27dbcf0efce71e02781"
-    }, o("div", {
-      key: "aaa383584217da20fdd01174f4b136dfef0128b7",
+    return e && s.push("has-scroll"), a(o, {
+      key: "c9839ff458e2d71fb66c42cb5b4ae394c7ffb9ff"
+    }, a("div", {
+      key: "51d8a914662c2794e16928c971ef995bca933776",
       class: s.join(" ")
-    }, e && o(a, {
-      key: "6f7f38d768b274409606132cc62d36d48812f50c"
-    }, o("div", {
-      key: "98e26550803496a0edd0e7415b4ec9e16b501722",
+    }, e && a(o, {
+      key: "0b1d1dd0c973d2266a468a8f81d0c9bdd2a430cc"
+    }, a("div", {
+      key: "87b9ae7e5ab260ee8743e78302017389941c3ead",
       class: "gradient-left",
       hidden: !r
-    }), o("div", {
-      key: "58102ecd26dd3f6b36d530f36ecc109b287b4faa",
+    }), a("div", {
+      key: "a5d487517c497ae927a1fd05d7c4631aa00d76bf",
       class: "gradient-right",
       hidden: !i
-    }), o("q2-btn", {
-      key: "a475ba4a846ea5cf93a5ca46422a5473e0d266bd",
+    }), a("q2-btn", {
+      key: "fe008283e673c2b51acf1cc654ed1c844a6d33bf",
       class: "btn-left",
       hideLabel: !0,
       hidden: !this.showScrollLeft,
       label: c("tecton.element.stepper.scrollLeft"),
       onTctClick: () => this.onScrollBtnClick("left")
-    }, o("q2-icon", {
-      key: "b040f724a926e5c07a81438e3586e0eb7a3c063b",
+    }, a("q2-icon", {
+      key: "7d83dfafb861da55085fa33a4aca620416849e27",
       type: "chevron-left"
-    })), o("q2-btn", {
-      key: "119dbcd49ce282cbccd58be097f8833e22df4fb4",
+    })), a("q2-btn", {
+      key: "c81adb720c387ddabb7eead010db863b0e295208",
       class: "btn-right",
       hideLabel: !0,
       hidden: !this.showScrollRight,
       label: c("tecton.element.stepper.scrollRight"),
       onTctClick: () => this.onScrollBtnClick("right")
-    }, o("q2-icon", {
-      key: "c656a9493134eb6a4ea0a008ee94829fc708ecfe",
+    }, a("q2-icon", {
+      key: "c0d5939662d35c18ea9c486a1dc8da243b779ea2",
       type: "chevron-right"
-    }))), o("ul", {
-      key: "09e1472989c7c2e6c40504072bca2790865e013a",
+    }))), a("ul", {
+      key: "07501b7abbe4e828686b87c057b79bae4059e826",
       onScroll: this.checkScrollState,
       ref: t => this.listElement = t,
       role: "tablist"
-    }, t > 0 && [ ...Array(t).keys() ].map((t => this.renderStepBtn(t))))), o("div", {
-      key: "0b25c172d585892aa9e286dac6080ce2bbb80e1a",
+    }, t > 0 && [ ...Array(t).keys() ].map((t => this.renderStepBtn(t))))), a("div", {
+      key: "df8d51e7b40ee1999b0a280fa8524559accfec9a",
       role: "list"
-    }, o("slot", {
-      key: "507375368c8e89a94f8af0a44bf4951fd14d7466",
+    }, a("slot", {
+      key: "a8ce54b65b8c7d8542e60811a7215fed12400e38",
       onSlotchange: () => this.onSlotChange()
     })));
   }

package/dist/components/q2-surface.js

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