q2-tecton-elements 1.73.0 → 1.73.1

package/dist/components/q2-pill.js

@@ -1,6 +1,6 @@
-import { proxyCustomElement as t, HTMLElement as o, createEvent as i, h as e, transformTag as r } from "@stencil/core/internal/client";
+import { proxyCustomElement as t, HTMLElement as o, createEvent as i, h as e, transformTag as a } from "@stencil/core/internal/client";
 
-import { e as a, o as n, i as c, w as s, l } from "./index2.js";
+import { e as r, o as n, i as c, w as s, l } from "./index2.js";
 
 import { m as p } from "./mirror-emit.js";
 
@@ -39,7 +39,7 @@ const f =  t(class extends o {
         value: null,
         values: [],
         active: !1
-      }), this.scheduledAfterRender.push(a);
+      }), this.scheduledAfterRender.push(r);
     }, this.determineOptionCount = async () => {
       if (this.optionList) {
         const t = await this.getOptionListOptions();
@@ -100,7 +100,7 @@ const f =  t(class extends o {
       var o;
       await (null === (o = this.optionList) || void 0 === o ? void 0 : o.handleExternalKeydown(t));
     }, this.handleSelectionChanges = async t => {
-      const {multiple: o} = this, {value: i = "", values: e = []} = t, r = o ? !!e.length : !!i;
+      const {multiple: o} = this, {value: i = "", values: e = []} = t, a = o ? !!e.length : !!i;
       if (!this.hostElement.onchange) if (o) this.selectedOptions = e, this.value = void 0; else {
         const t = await this.getOption(i);
         this.selectedOptions = t ? [ {
@@ -111,7 +111,7 @@ const f =  t(class extends o {
       p(this, [ "change", "tctChange" ], {
         value: o ? void 0 : i,
         values: e,
-        active: r
+        active: a
       });
     }, this.handleSlotKeydown = t => {
       var o;
@@ -151,8 +151,8 @@ const f =  t(class extends o {
       const {selectedOptions: t = []} = this, o = t.map((t => t.value)), i = await this.getOptionListOptions();
       this.optionCount && (this.active = !!o.length), this.selectedOptionElements = (null == i ? void 0 : i.filter((t => o.includes(t.value)))) || [];
     }, this.updateSlotState = () => {
-      const {hostElement: t, hasPopoverTop: o, hasPopoverBottom: i} = this, e = t.shadowRoot.querySelector('slot[name="popover-top"]'), r = t.shadowRoot.querySelector('slot[name="popover-bottom"]'), a = (null == e ? void 0 : e.assignedNodes().length) > 0, n = (null == r ? void 0 : r.assignedNodes().length) > 0;
-      o !== a && (this.hasPopoverTop = a), i !== n && (this.hasPopoverBottom = n);
+      const {hostElement: t, hasPopoverTop: o, hasPopoverBottom: i} = this, e = t.shadowRoot.querySelector('slot[name="popover-top"]'), a = t.shadowRoot.querySelector('slot[name="popover-bottom"]'), r = (null == e ? void 0 : e.assignedNodes().length) > 0, n = (null == a ? void 0 : a.assignedNodes().length) > 0;
+      o !== r && (this.hasPopoverTop = r), i !== n && (this.hasPopoverBottom = n);
     };
   }
   // #endregion
@@ -224,14 +224,14 @@ const f =  t(class extends o {
   // #region Watchers
   selectedOptionsChanged(t) {
     var o, i;
-    const {multiple: e} = this, r = null !== (i = null === (o = null == t ? void 0 : t[0]) || void 0 === o ? void 0 : o.value) && void 0 !== i ? i : null;
-    e ? (this.value && (this.value = null), this.updateSelectedOptionElements()) : this.value === r ? this.updateSelectedOptionElements() : this.value = r;
+    const {multiple: e} = this, a = null !== (i = null === (o = null == t ? void 0 : t[0]) || void 0 === o ? void 0 : o.value) && void 0 !== i ? i : null;
+    e ? (this.value && (this.value = null), this.updateSelectedOptionElements()) : this.value === a ? this.updateSelectedOptionElements() : this.value = a;
   }
   async valueChanged(t, o, i) {
-    var e, r;
-    const {label: a, multiple: n, selectedOptions: c, value: s} = this, l = "value" === i ? t : s, p = "label" === i ? t : a;
+    var e, a;
+    const {label: r, multiple: n, selectedOptions: c, value: s} = this, l = "value" === i ? t : s, p = "label" === i ? t : r;
     if (n) return;
-    const d = null !== (r = null === (e = null == c ? void 0 : c[0]) || void 0 === e ? void 0 : e.value) && void 0 !== r ? r : null;
+    const d = null !== (a = null === (e = null == c ? void 0 : c[0]) || void 0 === e ? void 0 : e.value) && void 0 !== a ? a : null;
     if ("value" === i && t === d) this.updateSelectedOptionElements(); else {
       const o = await this.getOption(t), {value: i, display: e} = o || {
         value: l,
@@ -246,21 +246,21 @@ const f =  t(class extends o {
   // #endregion
   // #region Local Methods
   get buttonContent() {
-    const {label: t, selectedOptionElements: o, optionCount: i, maxLength: e} = this, r = o.length;
-    let a;
-    if (i && 0 !== r) {
-      if (1 !== r) {
-        const t = l(o[0].display), i = " +" + (r - 1);
+    const {label: t, selectedOptionElements: o, optionCount: i, maxLength: e} = this, a = o.length;
+    let r;
+    if (i && 0 !== a) {
+      if (1 !== a) {
+        const t = l(o[0].display), i = " +" + (a - 1);
         return {
           text: `${t}${i}`,
           truncatedText: `${this._truncate(t, e)}${i}`
         };
       }
-      a = l(o[0].display);
-    } else a = l(t);
+      r = l(o[0].display);
+    } else r = l(t);
     return {
-      text: a,
-      truncatedText: this._truncate(a, e)
+      text: r,
+      truncatedText: this._truncate(r, e)
     };
   }
   _togglePopover() {
@@ -280,7 +280,7 @@ const f =  t(class extends o {
     }, l("tecton.element.optionList.optionCount", [ this.optionCount ]));
   }
   renderIcon() {
-    const {optionCount: t, active: o} = this, i = t && o, r = i || !t ? "close" : "chevron-down";
+    const {optionCount: t, active: o} = this, i = t && o, a = i || !t ? "close" : "chevron-down";
     return e(i ? "button" : "div", {
       class: "btn-close",
       onClick: i && this.clearSelectedOptions || void 0,
@@ -288,11 +288,11 @@ const f =  t(class extends o {
       "aria-label": i && l("tecton.element.pill.clearSelection") || void 0,
       type: i ? "button" : void 0
     }, e("q2-icon", {
-      type: r
+      type: a
     }));
   }
   render() {
-    const {optionCount: t, active: o, open: i} = this, {text: r, truncatedText: a} = this.buttonContent, n = [ "btn-wrapper" ];
+    const {optionCount: t, active: o, open: i} = this, {text: a, truncatedText: r} = this.buttonContent, n = [ "btn-wrapper" ];
     return (t || o) && n.push("has-icon"), t && n.push("has-options"), e("click-elsewhere", {
       key: "8cba59cde3746d0397305512334eb56357e9e5d4",
       onChange: this.onClickElsewhere
@@ -319,14 +319,17 @@ const f =  t(class extends o {
       "aria-roledescription": !t && "filter",
       "aria-controls": t ? "option-list" : void 0,
       "aria-expanded": t && "" + !!i || void 0,
-      "aria-label": r,
+      "aria-label": a,
       "aria-pressed": t ? void 0 : "" + !!o,
       "aria-describedby": t ? "option-description" : void 0
     }, e("slot", {
       key: "e1f4c57b7526f714cf0242e101ec0f5c39ebafa5",
       name: "decorator"
-    }), a)), this.renderIcon(), !!t && this.renderHiddenElement()), this.optionCount > 0 && e("q2-popover", {
-      key: "2777b45efbd94516a633ca4ff1e2d6a452ecbd81",
+    }), e("span", {
+      key: "98a770f6f4fabe04d886f66d57e76a4febb31353",
+      class: "pill-label"
+    }, r))), this.renderIcon(), !!t && this.renderHiddenElement()), this.optionCount > 0 && e("q2-popover", {
+      key: "30fb581a9eeb008262bbb3fc4a82537f1b78af28",
       ref: t => this.popoverElement = t,
       controlElement: this.primaryBtn,
       open: this.open,
@@ -336,20 +339,20 @@ const f =  t(class extends o {
       align: this.popoverAlignment,
       onFocusout: this.handleFocusOut
     }, e("div", {
-      key: "54d2c1c8814be9265b4ed8092bd3360da76cc2b0",
+      key: "6fc858b2064b78b2ccaafd35aefaa2e4c9e1ea07",
       class: "popover-content"
     }, e("div", {
-      key: "fb95b6f0ab78119f0bf944fa67ec0bcf391088dc",
+      key: "75134f4a5d4296f6f69a70197bf1bd450c05a8e0",
       ref: t => this.popoverTopContainer = t,
       class: "popover-top-container",
       tabindex: "-1",
       hidden: !this.hasPopoverTop,
       onKeyDown: this.handleSlotKeydown
     }, e("slot", {
-      key: "8e522c96fa1241e7c05fbc989d59f71ec2bc1d98",
+      key: "f570a1a19b97bd7eb4b2ae38975db95ff1153b00",
       name: "popover-top"
     })), e("q2-option-list", {
-      key: "5e7a827ac08395399e0b04fa9074f5b6a3fa1c48",
+      key: "aca9ff86903dcf5b4e5138541ac20dac68955fb7",
       type: "listbox",
       ref: t => this.optionList = t,
       id: "option-list",
@@ -360,16 +363,16 @@ const f =  t(class extends o {
       onPopoverState: this.onPopoverState,
       label: l("tecton.element.optionList.label", [ this.optionListLabel ])
     }, e("slot", {
-      key: "4197780a058b3937ac748b53aef6afc5eabd8c7a"
+      key: "89c5f3739c36206ceecb06245ba3052491b89898"
     })), e("div", {
-      key: "78992c83515dcfe6acbf7e09a5efced2d65c1903",
+      key: "8f98c6b4a59c2c0675b5648aed4a1110f0136d87",
       ref: t => this.popoverBottomContainer = t,
       class: "popover-bottom-container",
       tabindex: "-1",
       hidden: !this.hasPopoverBottom,
       onKeyDown: this.handleSlotKeydown
     }, e("slot", {
-      key: "553f959ec8b866111b2e5c5f9090d8ddee5fd208",
+      key: "75ef6c235c31755e0a5b9905db16e02ff8c4eea3",
       name: "popover-bottom"
     })))));
   }
@@ -390,7 +393,7 @@ const f =  t(class extends o {
     };
   }
   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}@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:inline-block;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-pill-margin, var(--t-pill-margin, var(--app-scale-2x, 10px)))}q2-popover,.btn-wrapper{--comp-pill-min-height:var(--tct-pill-min-height, var(--t-pill-min-height, 44px));--comp-pill-btn-height:var(--tct-pill-btn-height, var(--t-pill-btn-height, 30px))}.popover-top-container{position:sticky;top:0;z-index:5}.popover-bottom-container{position:sticky;bottom:0;z-index:5}.btn-wrapper{--comp-pill-btn-border-width:var(--tct-pill-btn-border-width, var(--t-pill-btn-border-width, 2px));--comp-close-size:0px;--comp-btn-background:var(--tct-pill-btn-background, var(--t-pill-btn-background, var(--t-base, #ffffff)));--comp-btn-box-shadow:var(--tct-pill-btn-box-shadow, none);--comp-btn-backdrop-filter:var(--tct-pill-btn-backdrop-filter, none);--comp-hover-btn-background:var(--tct-pill-hover-btn-background, var(--t-pill-hover-btn-background, var(--t-gray-13, #e6e6e6)));--comp-btn-padding:var(--tct-pill-btn-padding-inline, var(--t-pill-btn-padding-inline, var(--app-scale-3x, 15px)));--comp-btn-letter-spacing:var(--tct-pill-btn-letter-spacing, inherit);--comp-btn-color:var(--tct-pill-btn-color, var(--t-pill-btn-color, var(--t-gray-3, #262626)));--comp-active-btn-color:var(--tct-pill-active-btn-color, var(--comp-btn-background));--comp-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-7, #666666)));--comp-active-btn-box-shadow:var(--tct-pill-active-btn-box-shadow, var(--tct-pill-btn-box-shadow, none));--comp-active-btn-backdrop-filter:var(--tct-pill-active-btn-backdrop-filter, none);--comp-active-btn-border-color:var(--tct-pill-active-btn-border-color, var(--t-pill-active-btn-border-color, var(--t-gray-7, #666666)));--comp-hover-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));--comp-hover-active-btn-border-color:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));position:relative}.btn-wrapper.has-options,.btn-wrapper.has-icon{--comp-close-size:var(--comp-pill-btn-height)}:host([active]:not([active=false])) .btn-wrapper{--comp-btn-color:var(--tct-pill-active-btn-color, var(--t-pill-active-btn-color, var(--t-base, #ffffff)))}:host([theme=primary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-primary-active-background, var(--t-primary, #0079c1));--comp-active-btn-box-shadow:var(--tct-pill-primary-active-btn-box-shadow, none);--comp-active-btn-backdrop-filter:var(--tct-pill-primary-active-backdrop-filter, none);--comp-active-btn-color:var(--tct-pill-primary-active-font-color, var(--t-primary-text, #ffffff));--comp-active-btn-border-color:var(--tct-pill-primary-active-border-color, var(--t-primary, #0079c1));--comp-hover-active-btn-background:var(--tct-pill-primary-active-hover-background, var(--t-primary-l3, #21acff));--comp-hover-active-btn-border-color:var(--tct-pill-primary-active-hover-border-color, var(--t-primary-l3, #21acff))}:host([theme=secondary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-secondary-active-background, var(--t-secondary, #b3c2cc));--comp-active-btn-box-shadow:var(--tct-pill-secondary-active-box-shadow, none);--comp-active-btn-backdrop-filter:var(--tct-pill-secondary-active-backdrop-filter, none);--comp-active-btn-color:var(--tct-pill-secondary-active-font-color, var(--t-secondary-text, #141414));--comp-active-btn-border-color:var(--tct-pill-secondary-active-border-color, var(--t-secondary, #b3c2cc));--comp-hover-active-btn-background:var(--tct-pill-secondary-active-hover-background, var(--t-secondary-l3, #c9d5db));--comp-hover-active-btn-border-color:var(--tct-pill-secondary-active-hover-border-color, var(--t-secondary-l3, #c9d5db))}:host([theme=tertiary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-tertiary-active-background, var(--t-tertiary, #e8f5fc));--comp-active-btn-box-shadow:var(--tct-pill-tertiary-active-box-shadow, none);--comp-active-btn-backdrop-filter:var(--tct-pill-tertiary-active-backdrop-filter, none);--comp-active-btn-color:var(--tct-pill-tertiary-active-font-color, var(--t-tertiary-text, #141414));--comp-active-btn-border-color:var(--tct-pill-tertiary-active-border-color, var(--t-tertiary, #e8f5fc));--comp-hover-active-btn-background:var(--tct-pill-tertiary-active-hover-background, var(--t-tertiary-l3, #eff8fd));--comp-hover-active-btn-border-color:var(--tct-pill-tertiary-active-hover-border-color, var(--t-tertiary-l3, #eff8fd))}.btn-height-wrapper{height:var(--comp-pill-min-height);display:flex;align-items:center;cursor:pointer}.btn-height-wrapper:focus{box-shadow:none}:host([disabled]) .btn-height-wrapper{cursor:not-allowed}.btn-close,.btn-primary{cursor:pointer;height:var(--comp-pill-btn-height);border-style:solid;border-radius:var(--tct-pill-btn-border-radius, var(--t-pill-btn-border-radius, 30px));transition-property:background, color, padding, width, opacity;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}:host([disabled]) .btn-close,:host([disabled]) .btn-primary,:host([disabled]) q2-icon{opacity:var(--tct-pill-disabled-opacity, var(--t-pill-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));cursor:not-allowed}.btn-primary{background:var(--comp-btn-background);box-shadow:var(--comp-btn-box-shadow);backdrop-filter:var(--comp-btn-backdrop-filter);border-width:var(--comp-pill-btn-border-width);border-color:var(--tct-pill-btn-border-color, var(--t-pill-btn-border-color, var(--t-a11y-gray-color-AA, #949494)));letter-spacing:var(--comp-btn-letter-spacing);padding-inline:var(--comp-btn-padding);padding-right:calc(var(--comp-btn-padding) + var(--comp-close-size));font-size:var(--tct-pill-btn-font-size, var(--t-pill-btn-font-size, var(--app-font-size, var(--const-px-14, 14px))));font-weight:var(--tct-pill-btn-font-weight, 400);color:var(--comp-btn-color);display:flex;align-items:center;gap:var(--app-scale-1x, 5px);width:100%;text-align:start}.btn-primary ::slotted(q2-icon[slot=decorator]){--tct-icon-size:1em;--tct-icon-stroke-primary:var(--tct-pill-decorator-icon-primary-stroke, var(--comp-btn-color));--tct-icon-stroke-secondary:var(--tct-pill-decorator-icon-secondary-stroke, var(--comp-btn-color))}.btn-primary:focus{box-shadow:var(--tct-pill-btn-focus-box-shadow, var(--const-double-focus-ring))}.btn-primary:focus-visible{box-shadow:var(--tct-pill-btn-focus-visible-box-shadow, var(--const-double-focus-ring))}.btn-primary:hover{background:var(--comp-hover-btn-background)}.has-options .btn-primary,.has-icon .btn-primary{padding-right:calc(var(--tct-pill-icon-gap, var(--t-pill-icon-gap, var(--app-scale-1x, 5px))) + var(--comp-close-size))}.has-options .btn-primary{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:var(--tct-pill-max-width, var(--t-pill-max-width, 200px))}:host([active]:not([active=false])) .btn-primary{background:var(--comp-active-btn-background);box-shadow:var(--comp-active-btn-box-shadow);backdrop-filter:var(--comp-active-btn-backdrop-filter);border-color:var(--comp-active-btn-border-color);color:var(--comp-active-btn-color)}:host([active]:not([active=false])) .btn-primary:focus{box-shadow:var(--tct-pill-btn-focus-box-shadow, var(--const-double-focus-ring))}:host([active]:not([active=false])) .btn-primary:focus-visible{box-shadow:var(--tct-pill-btn-focus-visible-box-shadow, var(--const-double-focus-ring))}:host([active]:not([active=false])) .btn-primary:hover{background:var(--comp-hover-active-btn-background);border-color:var(--comp-hover-active-btn-border-color)}:host([active]:not([active=false])) .btn-primary ::slotted(q2-icon[slot=decorator]){--tct-icon-stroke-primary:var(--tct-pill-active-decorator-icon-primary-stroke, var(--tct-pill-decorator-icon-primary-stroke, var(--comp-active-btn-color)));--tct-icon-stroke-secondary:var(--tct-pill-active-decorator-icon-secondary-stroke, var(--tct-pill-decorator-icon-secondary-stroke, var(--comp-active-btn-color)))}.btn-close{background:transparent;border-color:transparent;border-width:var(--comp-pill-btn-border-width);width:var(--comp-close-size);height:var(--comp-close-size);padding:0;border:0;display:inline-flex;justify-content:center;align-items:center;position:absolute;right:0;top:50%;transform:translateY(-50%);opacity:0}.btn-close:focus-visible{box-shadow:var(--tct-pill-btn-focus-visible-box-shadow, var(--const-double-focus-ring))}:host([active]:not([active=false])) .btn-close{color:var(--comp-active-btn-color)}.has-options .btn-close,.has-icon .btn-close{opacity:1}q2-icon{--tct-icon-stroke-primary:var(--tct-pill-icon-stroke, currentcolor);--tct-icon-stroke-width:var(--tct-pill-icon-stroke-width, inherit);width:var(--tct-pill-icon-size, var(--t-pill-icon-size, var(--const-px-18, 18px)));height:var(--tct-pill-icon-size, var(--t-pill-icon-size, var(--const-px-18, 18px)));transition-property:transform;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}div.btn-close{pointer-events:none}:host([open]) div.btn-close q2-icon{transform:rotate(180deg)}:host([active]:not([active=false])) button.btn-close:focus,:host([active]:not([active=false])) button.btn-close:hover{background:var(--tct-pill-hover-close-btn-background, var(--t-pill-hover-close-btn-background, var(--t-top-a1, rgba(13, 13, 13, 0.35))));border-color:var(--tct-pill-hover-close-btn-border-color, var(--t-pill-hover-close-btn-border-color, var(--t-top-a1, rgba(13, 13, 13, 0.35))))}q2-popover{top:calc(var(--comp-pill-min-height) - (var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2)}:host([borderless]:not([borderless=false])) button{border-style:none}';
+    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:inline-block;max-width:100%;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-pill-margin, var(--t-pill-margin, var(--app-scale-2x, 10px)))}q2-popover,.btn-wrapper{--comp-pill-min-height:var(--tct-pill-min-height, var(--t-pill-min-height, 44px));--comp-pill-btn-height:var(--tct-pill-btn-height, var(--t-pill-btn-height, 30px))}.popover-top-container{position:sticky;top:0;z-index:5}.popover-bottom-container{position:sticky;bottom:0;z-index:5}.btn-wrapper{--comp-pill-btn-border-width:var(--tct-pill-btn-border-width, var(--t-pill-btn-border-width, 2px));--comp-close-size:0px;--comp-btn-background:var(--tct-pill-btn-background, var(--t-pill-btn-background, var(--t-base, #ffffff)));--comp-btn-box-shadow:var(--tct-pill-btn-box-shadow, none);--comp-btn-backdrop-filter:var(--tct-pill-btn-backdrop-filter, none);--comp-hover-btn-background:var(--tct-pill-hover-btn-background, var(--t-pill-hover-btn-background, var(--t-gray-13, #e6e6e6)));--comp-btn-padding:var(--tct-pill-btn-padding-inline, var(--t-pill-btn-padding-inline, var(--app-scale-3x, 15px)));--comp-btn-letter-spacing:var(--tct-pill-btn-letter-spacing, inherit);--comp-btn-color:var(--tct-pill-btn-color, var(--t-pill-btn-color, var(--t-gray-3, #262626)));--comp-active-btn-color:var(--tct-pill-active-btn-color, var(--comp-btn-background));--comp-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-7, #666666)));--comp-active-btn-box-shadow:var(--tct-pill-active-btn-box-shadow, var(--tct-pill-btn-box-shadow, none));--comp-active-btn-backdrop-filter:var(--tct-pill-active-btn-backdrop-filter, none);--comp-active-btn-border-color:var(--tct-pill-active-btn-border-color, var(--t-pill-active-btn-border-color, var(--t-gray-7, #666666)));--comp-hover-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));--comp-hover-active-btn-border-color:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));position:relative}.btn-wrapper.has-options,.btn-wrapper.has-icon{--comp-close-size:var(--comp-pill-btn-height)}:host([active]:not([active=false])) .btn-wrapper{--comp-btn-color:var(--tct-pill-active-btn-color, var(--t-pill-active-btn-color, var(--t-base, #ffffff)))}:host([theme=primary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-primary-active-background, var(--t-primary, #0079c1));--comp-active-btn-box-shadow:var(--tct-pill-primary-active-btn-box-shadow, none);--comp-active-btn-backdrop-filter:var(--tct-pill-primary-active-backdrop-filter, none);--comp-active-btn-color:var(--tct-pill-primary-active-font-color, var(--t-primary-text, #ffffff));--comp-active-btn-border-color:var(--tct-pill-primary-active-border-color, var(--t-primary, #0079c1));--comp-hover-active-btn-background:var(--tct-pill-primary-active-hover-background, var(--t-primary-l3, #21acff));--comp-hover-active-btn-border-color:var(--tct-pill-primary-active-hover-border-color, var(--t-primary-l3, #21acff))}:host([theme=secondary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-secondary-active-background, var(--t-secondary, #b3c2cc));--comp-active-btn-box-shadow:var(--tct-pill-secondary-active-box-shadow, none);--comp-active-btn-backdrop-filter:var(--tct-pill-secondary-active-backdrop-filter, none);--comp-active-btn-color:var(--tct-pill-secondary-active-font-color, var(--t-secondary-text, #141414));--comp-active-btn-border-color:var(--tct-pill-secondary-active-border-color, var(--t-secondary, #b3c2cc));--comp-hover-active-btn-background:var(--tct-pill-secondary-active-hover-background, var(--t-secondary-l3, #c9d5db));--comp-hover-active-btn-border-color:var(--tct-pill-secondary-active-hover-border-color, var(--t-secondary-l3, #c9d5db))}:host([theme=tertiary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-tertiary-active-background, var(--t-tertiary, #e8f5fc));--comp-active-btn-box-shadow:var(--tct-pill-tertiary-active-box-shadow, none);--comp-active-btn-backdrop-filter:var(--tct-pill-tertiary-active-backdrop-filter, none);--comp-active-btn-color:var(--tct-pill-tertiary-active-font-color, var(--t-tertiary-text, #141414));--comp-active-btn-border-color:var(--tct-pill-tertiary-active-border-color, var(--t-tertiary, #e8f5fc));--comp-hover-active-btn-background:var(--tct-pill-tertiary-active-hover-background, var(--t-tertiary-l3, #eff8fd));--comp-hover-active-btn-border-color:var(--tct-pill-tertiary-active-hover-border-color, var(--t-tertiary-l3, #eff8fd))}.btn-height-wrapper{min-height:var(--comp-pill-min-height);display:flex;align-items:center;cursor:pointer}.btn-height-wrapper:focus{box-shadow:none}:host([disabled]) .btn-height-wrapper{cursor:not-allowed}.btn-close,.btn-primary{cursor:pointer;min-height:var(--comp-pill-btn-height);border-style:solid;border-radius:var(--tct-pill-btn-border-radius, var(--t-pill-btn-border-radius, 30px));transition-property:background, color, padding, width, opacity;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}:host([disabled]) .btn-close,:host([disabled]) .btn-primary,:host([disabled]) q2-icon{opacity:var(--tct-pill-disabled-opacity, var(--t-pill-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));cursor:not-allowed}.btn-primary{background:var(--comp-btn-background);box-shadow:var(--comp-btn-box-shadow);backdrop-filter:var(--comp-btn-backdrop-filter);border-width:var(--comp-pill-btn-border-width);border-color:var(--tct-pill-btn-border-color, var(--t-pill-btn-border-color, var(--t-a11y-gray-color-AA, #949494)));letter-spacing:var(--comp-btn-letter-spacing);padding-inline:var(--comp-btn-padding);padding-right:calc(var(--comp-btn-padding) + var(--comp-close-size));font-size:var(--tct-pill-btn-font-size, var(--t-pill-btn-font-size, var(--app-font-size, var(--const-px-14, 14px))));font-weight:var(--tct-pill-btn-font-weight, 400);color:var(--comp-btn-color);display:flex;align-items:center;gap:var(--app-scale-1x, 5px);width:100%;max-width:var(--tct-pill-max-width, var(--t-pill-max-width, calc(200 * var(--t-px-1, 1px))));min-width:0;text-align:start}.btn-primary ::slotted(q2-icon[slot=decorator]){flex-shrink:0;--tct-icon-size:1em;--tct-icon-stroke-primary:var(--tct-pill-decorator-icon-primary-stroke, var(--comp-btn-color));--tct-icon-stroke-secondary:var(--tct-pill-decorator-icon-secondary-stroke, var(--comp-btn-color))}.btn-primary:focus{box-shadow:var(--tct-pill-btn-focus-box-shadow, var(--const-double-focus-ring))}.btn-primary:focus-visible{box-shadow:var(--tct-pill-btn-focus-visible-box-shadow, var(--const-double-focus-ring))}.btn-primary:hover{background:var(--comp-hover-btn-background)}.has-options .btn-primary,.has-icon .btn-primary{padding-right:calc(var(--tct-pill-icon-gap, var(--t-pill-icon-gap, var(--app-scale-1x, 5px))) + var(--comp-close-size))}:host([active]:not([active=false])) .btn-primary{background:var(--comp-active-btn-background);box-shadow:var(--comp-active-btn-box-shadow);backdrop-filter:var(--comp-active-btn-backdrop-filter);border-color:var(--comp-active-btn-border-color);color:var(--comp-active-btn-color)}:host([active]:not([active=false])) .btn-primary:focus{box-shadow:var(--tct-pill-btn-focus-box-shadow, var(--const-double-focus-ring))}:host([active]:not([active=false])) .btn-primary:focus-visible{box-shadow:var(--tct-pill-btn-focus-visible-box-shadow, var(--const-double-focus-ring))}:host([active]:not([active=false])) .btn-primary:hover{background:var(--comp-hover-active-btn-background);border-color:var(--comp-hover-active-btn-border-color)}:host([active]:not([active=false])) .btn-primary ::slotted(q2-icon[slot=decorator]){--tct-icon-stroke-primary:var(--tct-pill-active-decorator-icon-primary-stroke, var(--tct-pill-decorator-icon-primary-stroke, var(--comp-active-btn-color)));--tct-icon-stroke-secondary:var(--tct-pill-active-decorator-icon-secondary-stroke, var(--tct-pill-decorator-icon-secondary-stroke, var(--comp-active-btn-color)))}.pill-label{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;min-width:0}.btn-close{background:transparent;border-color:transparent;border-width:var(--comp-pill-btn-border-width);width:var(--comp-close-size);height:var(--comp-close-size);padding:0;border:0;display:inline-flex;justify-content:center;align-items:center;position:absolute;right:0;top:50%;transform:translateY(-50%);opacity:0}.btn-close:focus-visible{box-shadow:var(--tct-pill-btn-focus-visible-box-shadow, var(--const-double-focus-ring))}:host([active]:not([active=false])) .btn-close{color:var(--comp-active-btn-color)}.has-options .btn-close,.has-icon .btn-close{opacity:1}q2-icon{--tct-icon-stroke-primary:var(--tct-pill-icon-stroke, currentcolor);--tct-icon-stroke-width:var(--tct-pill-icon-stroke-width, inherit);width:var(--tct-pill-icon-size, var(--t-pill-icon-size, var(--const-px-18, 18px)));height:var(--tct-pill-icon-size, var(--t-pill-icon-size, var(--const-px-18, 18px)));transition-property:transform;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}div.btn-close{pointer-events:none}:host([open]) div.btn-close q2-icon{transform:rotate(180deg)}:host([active]:not([active=false])) button.btn-close:focus,:host([active]:not([active=false])) button.btn-close:hover{background:var(--tct-pill-hover-close-btn-background, var(--t-pill-hover-close-btn-background, var(--t-top-a1, rgba(13, 13, 13, 0.35))));border-color:var(--tct-pill-hover-close-btn-border-color, var(--t-pill-hover-close-btn-border-color, var(--t-top-a1, rgba(13, 13, 13, 0.35))))}q2-popover{top:calc(var(--comp-pill-min-height) - (var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2)}:host([borderless]:not([borderless=false])) button{border-style:none}';
   }
 }, [ 257, "q2-pill", {
   active: [ 1540 ],
@@ -433,23 +436,23 @@ const y = f, defineCustomElement = function() {
   [ "q2-pill", "click-elsewhere", "q2-icon", "q2-option-list", "q2-popover" ].forEach((t => {
     switch (t) {
      case "q2-pill":
-      customElements.get(r(t)) || customElements.define(r(t), f);
+      customElements.get(a(t)) || customElements.define(a(t), f);
       break;
 
      case "click-elsewhere":
-      customElements.get(r(t)) || h();
+      customElements.get(a(t)) || h();
       break;
 
      case "q2-icon":
-      customElements.get(r(t)) || b();
+      customElements.get(a(t)) || b();
       break;
 
      case "q2-option-list":
-      customElements.get(r(t)) || m();
+      customElements.get(a(t)) || m();
       break;
 
      case "q2-popover":
-      customElements.get(r(t)) || u();
+      customElements.get(a(t)) || u();
     }
   }));
 };

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: "c6d24ac6d794284c3f0ea654f1999ff6e201f8b1"
+      key: "e32fc9201354f10456368f47c0a7b6e50fd3eeb2"
     }, e ? i("time", {
       dateTime: t
     }, t) : null);

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

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

package/dist/components/q2-search.js

@@ -618,20 +618,20 @@ const f =  t(class extends e {
   }
   render() {
     return s(o, {
-      key: "282a0d7a6fc3199a2ae52a9a6f1c3ace8b58c00d"
+      key: "4b3787554c37521bc3467345cdd1d733cffba3a5"
     }, s("div", {
-      key: "b45c3a05cfb004bf7dfbf266af0e983c9740f7e6",
+      key: "696caa142cffecf1e0d62afafd826dce37f75512",
       "aria-live": "polite",
       "aria-atomic": "true",
       role: "status",
       class: "sr"
     }, this.statusMessage), s("click-elsewhere", {
-      key: "603d6b423bd6e2a6f3b90b85f13e744d157c7c61",
+      key: "f8b493ec8f7da09fad48f9fa30f0e9be7fbaedf4",
       class: this.wrapperClasses,
       role: "presentation",
       onChange: this.onClickElsewhere
     }, s("q2-input", {
-      key: "267c12c340e038bb5d10133d59955b4067699fbf",
+      key: "44e0ad4b7825ac319dd4277ccb93d4dd66acef12",
       ref: t => this.inputField = t,
       class: "q2-search-input",
       label: this.label && h(this.label) || "",

package/dist/components/q2-section.js

@@ -6,9 +6,9 @@ import { m as p } from "./mirror-emit.js";
 
 import { d as l } from "./q2-btn2.js";
 
-import { d as f } from "./q2-icon2.js";
+import { d as b } from "./q2-icon2.js";
 
-import { d as b } from "./q2-loading2.js";
+import { d as f } from "./q2-loading2.js";
 
 const m =  t(class extends e {
   constructor(t) {
@@ -127,29 +127,29 @@ const m =  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: "671c4611adeaff5c3e53d05a43955851d682c792",
+      key: "5adb22a7e6cf098fa3cf2325c945c6aa1c20b2d5",
       class: "wrapper"
     }, n("header", {
-      key: "fb724579804c9c3dd4da39bbc45d6df5cfad3815",
+      key: "c04df6d07756c27374e4be85ad88848a0c1ac897",
       class: t ? "has-header" : ""
     }, n("div", {
-      key: "76ad513b058264c1dbbeac7732120fea97586e1f",
+      key: "8cd09e8bf367a7510b91106b8ebd4f419faff861",
       class: "header-content",
       id: this.titleId,
       onClick: this.collapsible && this.onHeaderClick
     }, o && n("h2", {
-      key: "6717219e621e8b605e4cbc7fa4f1f84bd4b1f20a",
+      key: "195e1523e68c83e294bd92d617b8c4d44e679494",
       class: "title"
     }, h(this.label)), n("div", {
-      key: "61acf1ce4b3281aed6f35571a62f4da58d692d10",
+      key: "e493986ee113d44bf74b11116003939f3db24bd7",
       ref: t => this.headerSlotWrapper = t,
       class: "header-slot-wrapper"
     }, n("slot", {
-      key: "acd5b6f6337700edf60fd03ce3d35a634eb2f97c",
+      key: "44f2dc2ca76acfd800a1435608a75bf6e3258d37",
       ref: t => this.headerSlot = t,
       name: "q2-section-header"
     }))), this.collapsible && !this.noCollapseIcon && n("q2-btn", {
-      key: "02543820b86cf3d8fd103e0384d283e130fc2212",
+      key: "b2602555b9282c8149780f65d2fbaa65febc1f50",
       label: h(this.label || "tecton.element.section.defaultToggleLabel"),
       ariaExpanded: "" + !!this.expanded,
       ariaControls: this.contentId,
@@ -157,10 +157,10 @@ const m =  t(class extends e {
       "hide-label": !0,
       onClick: this.onHeaderClick
     }, n("q2-icon", {
-      key: "fc7484a585f815948d1bed037948f21e777336f5",
+      key: "62728524b58cf5cf7aa2531df1218d3bf0b40b0a",
       type: "chevron-up"
     }))), n("div", {
-      key: "f57ce6b9a2e8f8ca589274d496362f106148b499",
+      key: "13ef854a01937880007fb4021b1528c1b83fe937",
       class: e.join(" "),
       id: this.contentId,
       "aria-labelledby": this.titleId,
@@ -170,12 +170,12 @@ const m =  t(class extends e {
         height: this.contentHeight
       }
     }, n("div", {
-      key: "e1473a0a5f86918df19119a62f99918e8f2203f2",
+      key: "866d8b0301a9c5979f5b3bd31086d25f73373709",
       ref: t => this.contentContainer = t,
       class: "content",
       tabindex: "-1"
     }, n("slot", {
-      key: "f4f92ebdb06b45be6d70759b6b59caf31f816b04",
+      key: "36c97155aa106dc1587537066e031c7d6c032295",
       ref: t => this.contentSlot = t
     }))));
   }
@@ -227,11 +227,11 @@ const v = m, defineCustomElement = function() {
       break;
 
      case "q2-icon":
-      customElements.get(a(t)) || f();
+      customElements.get(a(t)) || b();
       break;
 
      case "q2-loading":
-      customElements.get(a(t)) || b();
+      customElements.get(a(t)) || f();
     }
   }));
 };

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

@@ -1,14 +1,14 @@
-import { proxyCustomElement as t, HTMLElement as e, createEvent as i, h as s, Host as n, Fragment as a, transformTag as o } from "@stencil/core/internal/client";
+import { proxyCustomElement as e, HTMLElement as t, createEvent as i, h as s, Host as n, Fragment as a, transformTag as o } from "@stencil/core/internal/client";
 
 import { b as r } from "./component.js";
 
-import { c as d, n as c, l as h } from "./index2.js";
+import { c as d, n as h, l as c } from "./index2.js";
 
 import { m as l } from "./mirror-emit.js";
 
-const p =  t(class extends e {
-  constructor(t) {
-    super(), !1 !== t && this.__registerHost(), this.__attachShadow(), this.activeChange = i(this, "activeChange", 7), 
+const p =  e(class extends t {
+  constructor(e) {
+    super(), !1 !== e && this.__registerHost(), this.__attachShadow(), this.activeChange = i(this, "activeChange", 7), 
     this.contentChange = i(this, "contentChange", 7), this.statusChange = i(this, "statusChange", 7), 
     this.tctActiveChange = i(this, "tctActiveChange", 7), this.tctStatusChange = i(this, "tctStatusChange", 7), 
     // #endregion
@@ -21,45 +21,45 @@ const p =  t(class extends e {
     this.hostElement.id || (this.hostElement.id = "step-" + d());
   }
   disconnectedCallback() {
-    var t;
-    null === (t = this.mutationObserver) || void 0 === t || t.disconnect(), this.mutationObserver = null;
+    var e;
+    null === (e = this.mutationObserver) || void 0 === e || e.disconnect(), this.mutationObserver = null;
   }
   componentWillLoad() {
     r(this.hostElement, "q2-stepper, q2-stepper-vertical"), this.checkForActiveChildren();
   }
   componentDidLoad() {
-    const t = new MutationObserver((() => {
+    const e = new MutationObserver((() => {
       this.contentChange.emit();
     }));
-    t.observe(this.hostElement, {
+    e.observe(this.hostElement, {
       childList: !0,
       subtree: !0,
       characterData: !0
-    }), this.mutationObserver = t;
+    }), this.mutationObserver = e;
   }
   // #endregion
   // #region Watchers
   labelOrDescriptionChanged() {
     this.contentChange.emit();
   }
-  isActiveChanged(t) {
+  isActiveChanged(e) {
     l(this, [ "activeChange", "tctActiveChange" ], {
       status: this.status || "",
-      isActive: t,
+      isActive: e,
       id: this.hostElement.id,
       host: this.hostElement
     });
   }
   checkForActiveChildren() {
-    this.showWithChildren && c((() => {
+    this.showWithChildren && h((() => {
       setTimeout((() => {
         this.isChildActive = !!this.hostElement.querySelector("[slot='children'] > q2-stepper-pane[is-active]");
       }));
     }));
   }
-  statusChanged(t) {
+  statusChanged(e) {
     l(this, [ "statusChange", "tctStatusChange" ], {
-      status: t,
+      status: e,
       isActive: !!this.isActive,
       id: this.hostElement.id,
       host: this.hostElement
@@ -68,36 +68,36 @@ const p =  t(class extends e {
   // #endregion
   // #region Render Methods
   render() {
-    const {label: t, isActive: e} = this;
+    const {label: e, isActive: t} = this;
     return s(n, {
-      key: "6cbcc9f6363bf6f60ff2d999b9317e32691168da",
+      key: "3929b6bdb716394892be2bcdd933864e43f0204e",
       role: "listitem"
     }, s(a, {
-      key: "f9b8d56b05e6d26978feab6386849498f797cca6"
+      key: "d913741a6b71aebef92be14fd7ee541a3d5568da"
     }, s("div", {
-      key: "383a77ce1848255574680375e7df122bf4468f95",
+      key: "038d29ac861f70ad15350da7733b39eece30e538",
       role: "group",
       "aria-labelledby": "pane-label",
       tabindex: "0",
-      hidden: !(e || this.isChildActive && this.showWithChildren)
+      hidden: !(t || this.isChildActive && this.showWithChildren)
     }, s("slot", {
-      key: "9b9cf0bd60e23d9860174c5525c3f688c70411f4"
+      key: "56f4c0d9edfe134886d46367f2c801348267b53d"
     })), s("div", {
-      key: "8f628fe11acfc7a8df7c84013a7eaca9d5a1327a",
+      key: "88bf8a9e1a6124c39d9ac4ee8906f61ac026966a",
       hidden: !0
     }, s("span", {
-      key: "6c03721fb71d8e3c5c48a6af80ae8723575e0205",
+      key: "db485a5e84ab67fe714f0861fcd05c4b0bd7722f",
       id: "pane-label"
     }, s("slot", {
-      key: "da9a253e3399d0552478a29c743fc4a73f432ddf",
+      key: "940a9a3a8543fd4c64425db2b7ea7b9cf079c947",
       name: "label",
       onSlotchange: () => this.contentChange.emit()
-    }, t && h(t))), s("slot", {
-      key: "d7229f76aedb1c96623fac655982b88d2769b9ae",
+    }, e && c(e))), s("slot", {
+      key: "74a78697ed1aa85fca66743023d303c7abea0116",
       name: "description",
       onSlotchange: () => this.contentChange.emit()
     })), s("slot", {
-      key: "7670d7b17b74732d0dd14198dd50560d005700d1",
+      key: "4fb660b547a2da7dca37de9106b20b93b72aaf83",
       name: "children"
     })));
   }
@@ -160,8 +160,8 @@ const p =  t(class extends e {
 
 const b = p, defineCustomElement = function() {
   if ("undefined" == typeof customElements) return;
-  [ "q2-stepper-pane" ].forEach((t => {
-    if ("q2-stepper-pane" === t) customElements.get(o(t)) || customElements.define(o(t), p);
+  [ "q2-stepper-pane" ].forEach((e => {
+    if ("q2-stepper-pane" === e) customElements.get(o(e)) || customElements.define(o(e), p);
   }));
 };
 

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

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