q2-tecton-elements 1.72.0 → 1.73.1

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: "5adb22a7e6cf098fa3cf2325c945c6aa1c20b2d5",
       class: "wrapper"
     }, i("header", {
-      key: "e52e3037b59ac3443e812299114850dd6ed8810b",
+      key: "c04df6d07756c27374e4be85ad88848a0c1ac897",
       class: t ? "has-header" : ""
     }, i("div", {
-      key: "2066c8ff48cb4c6445068207533b3b6b808e9dd7",
+      key: "8cd09e8bf367a7510b91106b8ebd4f419faff861",
       class: "header-content",
       id: this.titleId,
       onClick: this.collapsible && this.onHeaderClick
     }, s && i("h2", {
-      key: "a159d8b6bc29e10711b603aef2ce6c1419f4b7ae",
+      key: "195e1523e68c83e294bd92d617b8c4d44e679494",
       class: "title"
     }, d(this.label)), i("div", {
-      key: "829f24123711551a6e3792cb66a2759386d6bec8",
+      key: "e493986ee113d44bf74b11116003939f3db24bd7",
       ref: t => this.headerSlotWrapper = t,
       class: "header-slot-wrapper"
     }, i("slot", {
-      key: "22c2518c55bf5f6160917beea8ab2c523bf76169",
+      key: "44f2dc2ca76acfd800a1435608a75bf6e3258d37",
       ref: t => this.headerSlot = t,
       name: "q2-section-header"
     }))), this.collapsible && !this.noCollapseIcon && i("q2-btn", {
-      key: "950c09ccfad31453393a52cd21321338d53ac03b",
+      key: "b2602555b9282c8149780f65d2fbaa65febc1f50",
       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: "62728524b58cf5cf7aa2531df1218d3bf0b40b0a",
       type: "chevron-up"
     }))), i("div", {
-      key: "45a1762386b7bf88fcaa50c18c1ac059b93d2e59",
+      key: "13ef854a01937880007fb4021b1528c1b83fe937",
       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: "866d8b0301a9c5979f5b3bd31086d25f73373709",
       ref: t => this.contentContainer = t,
       class: "content",
       tabindex: "-1"
     }, i("slot", {
-      key: "c88062ea0a59b62143e22c8492a8d06826a27a83",
+      key: "36c97155aa106dc1587537066e031c7d6c032295",
       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

@@ -2,7 +2,7 @@ import { r as t, c as e, h as i, F as a, H as s, g as n } from "./index-Cqkz7Bnm
 
 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";
 
@@ -70,34 +70,34 @@ const l = class {
   render() {
     const {label: t, isActive: e} = this;
     return i(s, {
-      key: "7acf643f717380c37eb25334534afbca81ac8ab6",
+      key: "3929b6bdb716394892be2bcdd933864e43f0204e",
       role: "listitem"
     }, i(a, {
-      key: "0241a9ad68973eea81c961070d6171dab3241f79"
+      key: "d913741a6b71aebef92be14fd7ee541a3d5568da"
     }, i("div", {
-      key: "6678cb4a7e65a3a4341ff552682c1011c588108b",
+      key: "038d29ac861f70ad15350da7733b39eece30e538",
       role: "group",
       "aria-labelledby": "pane-label",
       tabindex: "0",
       hidden: !(e || this.isChildActive && this.showWithChildren)
     }, i("slot", {
-      key: "0f8d339f894bdaa55bd5bdf94b1220da7a083dde"
+      key: "56f4c0d9edfe134886d46367f2c801348267b53d"
     })), i("div", {
-      key: "51e3934ad791e45486360ab8c6509b68e3a15d9d",
+      key: "88bf8a9e1a6124c39d9ac4ee8906f61ac026966a",
       hidden: !0
     }, i("span", {
-      key: "96fe08c826d87f86559fe2dbb586914b4065eb40",
+      key: "db485a5e84ab67fe714f0861fcd05c4b0bd7722f",
       id: "pane-label"
     }, i("slot", {
-      key: "b4cab1594ae047f032fbaa67f75167e31cc4cdf7",
+      key: "940a9a3a8543fd4c64425db2b7ea7b9cf079c947",
       name: "label",
       onSlotchange: () => this.contentChange.emit()
     }, t && h(t))), i("slot", {
-      key: "473cf6b9bc3ef5995d11e46502db1321d59baa5e",
+      key: "74a78697ed1aa85fca66743023d303c7abea0116",
       name: "description",
       onSlotchange: () => this.contentChange.emit()
     })), i("slot", {
-      key: "76cb24680ed1ec8a49956f888accf3fd07da7fa0",
+      key: "4fb660b547a2da7dca37de9106b20b93b72aaf83",
       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: "d2e82613e91ef3acf210781f807807b0fba8e7fc"
     }, a("ul", {
-      key: "b3a444833439d59be874a2bf04833f8df0ff107f",
+      key: "1ad1e36d0fca4b0c1cf793de43d9ea9ccb76974f",
       role: "tablist"
     }, this.structuredPanes.map(((t, e) => this.renderStepBtn(t, e)))), a("div", {
-      key: "34f3841d0eb0c5fe96670ac3d5e87244682ace74",
+      key: "ee710c6cb41011be7a8223ec817563cfeaeb6b71",
       role: "list"
     }, a("slot", {
-      key: "e224e413162cb28eab4ec0e8b51367ed3b83fa0b"
+      key: "0d1f6f53b73f72f163fc219de8db9736f669720d"
     })));
   }
   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: "423f7d50f787abf21c14730ae9cd50cd3638b17b"
     }, r("div", {
-      key: "aaa383584217da20fdd01174f4b136dfef0128b7",
+      key: "2ffacd2f9792075956748eb6960975d9aeda28ad",
       class: s.join(" ")
     }, e && r(i, {
-      key: "6f7f38d768b274409606132cc62d36d48812f50c"
+      key: "da90a671295ce6702c3bc6f1ab71f671cda2c9c8"
     }, r("div", {
-      key: "98e26550803496a0edd0e7415b4ec9e16b501722",
+      key: "319c4a75dfafd7b03d3f7f13156f24bd1ca7b0c3",
       class: "gradient-left",
-      hidden: !o
+      hidden: !a
     }), r("div", {
-      key: "58102ecd26dd3f6b36d530f36ecc109b287b4faa",
+      key: "80a08dc979685d94f6cfe20d66787d06e7d46014",
       class: "gradient-right",
-      hidden: !a
+      hidden: !o
     }), r("q2-btn", {
-      key: "a475ba4a846ea5cf93a5ca46422a5473e0d266bd",
+      key: "43a71cb3212ddbe37c6e7d7051850efd49ced456",
       class: "btn-left",
       hideLabel: !0,
       hidden: !this.showScrollLeft,
       label: n("tecton.element.stepper.scrollLeft"),
       onTctClick: () => this.onScrollBtnClick("left")
     }, r("q2-icon", {
-      key: "b040f724a926e5c07a81438e3586e0eb7a3c063b",
+      key: "19ee5abc690bba84016fb8c692a74b5c233aa426",
       type: "chevron-left"
     })), r("q2-btn", {
-      key: "119dbcd49ce282cbccd58be097f8833e22df4fb4",
+      key: "f26bc502269a5d60308aba041a6d9a75efcf2573",
       class: "btn-right",
       hideLabel: !0,
       hidden: !this.showScrollRight,
       label: n("tecton.element.stepper.scrollRight"),
       onTctClick: () => this.onScrollBtnClick("right")
     }, r("q2-icon", {
-      key: "c656a9493134eb6a4ea0a008ee94829fc708ecfe",
+      key: "7f35a54468433010427213e18d213b1c227413a6",
       type: "chevron-right"
     }))), r("ul", {
-      key: "09e1472989c7c2e6c40504072bca2790865e013a",
+      key: "0bc4eed617263c7e4a6138c3a884f6a1b8bc2ca6",
       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: "87945c612fcaa70164faa50d78bb63c9b290e3f2",
       role: "list"
     }, r("slot", {
-      key: "507375368c8e89a94f8af0a44bf4951fd14d7466",
+      key: "4b55529f41b4731dc1424c8be4fcd941ff2c2f33",
       onSlotchange: () => this.onSlotChange()
     })));
   }
   get hostElement() {
-    return o(this);
+    return a(this);
   }
   static get watchers() {
     return {

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

@@ -1,8 +1,8 @@
-import { r, c as a, h as o, H as e, g as t } from "./index-Cqkz7Bnm.js";
+import { r as a, c as r, h as o, H as e, g as t } from "./index-Cqkz7Bnm.js";
 
 const c = class {
   constructor(o) {
-    r(this, o), this.tctClick = a(this, "tctClick", 7), 
+    a(this, o), this.tctClick = r(this, "tctClick", 7), 
     // #region Own Properties
     this._cancelAnimation = null, 
     /** Applies a gradient fade across the background.
@@ -33,16 +33,16 @@ const c = class {
   // #endregion
   // #region Component Lifecycle Events
   disconnectedCallback() {
-    var r;
-    null === (r = this._cancelAnimation) || void 0 === r || r.call(this);
+    var a;
+    null === (a = this._cancelAnimation) || void 0 === a || a.call(this);
   }
   // #endregion
   // #region Listeners
   onClick() {
     this.clickable && this.tctClick.emit();
   }
-  onKeydown(r) {
-    this.clickable && ("Enter" !== r.key && " " !== r.key || (r.preventDefault(), this.tctClick.emit()));
+  onKeydown(a) {
+    this.clickable && ("Enter" !== a.key && " " !== a.key || (a.preventDefault(), this.tctClick.emit()));
   }
   // #endregion
   // #region Public Methods API
@@ -51,15 +51,15 @@ const c = class {
      * @param animation The animation to play. Defaults to `'pulse'`.
      * @returns A Promise that resolves when the animation finishes or is cancelled.
      */
-  async triggerAnimation(r = "pulse") {
-    var a;
-    return null === (a = this._cancelAnimation) || void 0 === a || a.call(this), new Promise((a => {
-      const o = `q2-surface-animate-${r}`, onEnd = () => {
-        this.hostElement.classList.remove(o), this._cancelAnimation = null, a();
+  async triggerAnimation(a = "pulse") {
+    var r;
+    return null === (r = this._cancelAnimation) || void 0 === r || r.call(this), new Promise((r => {
+      const o = `q2-surface-animate-${a}`, onEnd = () => {
+        this.hostElement.classList.remove(o), this._cancelAnimation = null, r();
       };
       this._cancelAnimation = () => {
         this.hostElement.classList.remove(o), this.hostElement.removeEventListener("animationend", onEnd), 
-        this._cancelAnimation = null, a();
+        this._cancelAnimation = null, r();
       }, this.hostElement.classList.add(o), this.hostElement.addEventListener("animationend", onEnd, {
         once: !0
       });
@@ -69,14 +69,14 @@ const c = class {
   // #region Render Methods
   render() {
     return o(e, {
-      key: "8dd96991bc74e2157dc256f21eb4953eaeffdd46"
+      key: "fba508447ca646c22aa4a14872d78e02294a2fa1"
     }, o("div", {
-      key: "a5b315fd3e6dd999cd704b3fd2c9de5ffb139033",
+      key: "46ac755e4c071b2345be0ba4272f283ac2758a82",
       class: "container",
       role: this.clickable ? "button" : void 0,
       tabIndex: this.clickable ? 0 : void 0
     }, o("slot", {
-      key: "4897bfe06a95bf14eddf2bb964bf4a27ed96798a"
+      key: "699fdd1427248cdff8ecf1b3b1ca1d4a892dd763"
     })));
   }
   get hostElement() {