q2-tecton-elements 1.72.0 → 1.73.1

package/dist/components/q2-pagination.js

@@ -1,4 +1,4 @@
-import { proxyCustomElement as t, HTMLElement as e, createEvent as i, h as n, transformTag as a } from "@stencil/core/internal/client";
+import { proxyCustomElement as t, HTMLElement as e, createEvent as i, h as a, transformTag as n } from "@stencil/core/internal/client";
 
 import { n as s, o, i as r, a as c, l } from "./index2.js";
 
@@ -32,8 +32,8 @@ const x =  t(class extends e {
     this.autoSize = !0, 
     /** Allows the component to be disabled should the state of the page require this  */
     this.disabled = !1, this.checkSize = () => {
-      const {hostElement: t, containerElement: e} = this, i = this.containerWidth > t.clientWidth;
-      this.isSmall = i, s((() => {
+      const {hostElement: t, containerElement: e} = this, i = parseFloat(getComputedStyle(e).fontSize), a = this.containerWidth > t.clientWidth || t.clientWidth < 42 * i;
+      this.isSmall = a, s((() => {
         const t = e.clientWidth, i = this.isSmall ? Math.max(this.containerWidth || 0, t) : t;
         this.containerWidth === i || (this.containerWidth = i, this.checkSize());
       }));
@@ -65,7 +65,9 @@ const x =  t(class extends e {
     this.align || (this.align = this.stacked ? "center" : "right");
   }
   componentDidLoad() {
-    this.containerWidth = this.containerElement.clientWidth, o(this.hostElement);
+    var t;
+    this.containerWidth = this.containerElement.clientWidth, null === (t = this.resizeObserver) || void 0 === t || t.observe(this.containerElement), 
+    o(this.hostElement);
   }
   // #endregion
   // #region Listeners
@@ -73,8 +75,8 @@ const x =  t(class extends e {
     var e;
     if (this.disabled) return;
     if (!r(t, this.hostElement)) return;
-    const {isFullViewHidden: i, containerElement: n, inputField: a} = this;
-    i ? null === (e = n.querySelector("q2-btn:not([disabled])")) || void 0 === e || e.focus() : a.focus();
+    const {isFullViewHidden: i, containerElement: a, inputField: n} = this;
+    i ? null === (e = a.querySelector("q2-btn:not([disabled])")) || void 0 === e || e.focus() : n.focus();
   }
   // #endregion
   // #region Public Methods API
@@ -162,7 +164,7 @@ const x =  t(class extends e {
   // #region Local Methods
   get containerClasses() {
     const t = [ "container" ];
-    return this.stacked && t.push("stacked"), t;
+    return this.stacked && t.push("stacked"), this.isSmall && t.push("small"), t;
   }
   get currentRange() {
     const {perPageWithDefault: t, totalWithDefault: e, pageWithDefault: i} = this;
@@ -196,8 +198,8 @@ const x =  t(class extends e {
     return (null === (t = this.perPageIncrements) || void 0 === t ? void 0 : t.length) > 1;
   }
   get totalPages() {
-    const {pagesOnly: t, totalWithDefault: e, perPageWithDefault: i, pages: n} = this;
-    return t && n && !isNaN(parseInt("" + n)) ? n : Math.ceil(e / i);
+    const {pagesOnly: t, totalWithDefault: e, perPageWithDefault: i, pages: a} = this;
+    return t && a && !isNaN(parseInt("" + a)) ? a : Math.ceil(e / i);
   }
   get totalWithDefault() {
     return this.total || 0;
@@ -212,7 +214,7 @@ const x =  t(class extends e {
   renderPerPage() {
     const t = this.perPageIncrementsArray.sort(((t, e) => t - e));
     return (void 0 === this.perPage || isNaN(this.perPage)) && (this.perPage = t[0]), 
-    this.perPageIncrements = `[${t.join(",")}]`, n("q2-select", {
+    this.perPageIncrements = `[${t.join(",")}]`, a("q2-select", {
       ref: t => this.perPageSelect = t,
       onChange: t => t.stopImmediatePropagation(),
       onTctChange: t => {
@@ -220,14 +222,14 @@ const x =  t(class extends e {
       },
       value: this.perPageIncrementsArray.includes(this.perPage) ? "" + this.perPage : void 0,
       disabled: this.disabled
-    }, t.map((t => n("q2-option", {
+    }, t.map((t => a("q2-option", {
       value: "" + t,
       display: `${l("tecton.element.pagination.view")} ${t}`
     }, `${l("tecton.element.pagination.view")} ${t}`))));
   }
   render() {
     var t;
-    const {pagesOnly: e, recordsOnly: i, isFullViewHidden: a, recordTypeWithDefault: s, totalPages: o, totalWithDefault: r, pageWithDefault: c, currentRange: p, nextRange: h, prevRange: d, showPerPageSelect: g, disabled: u} = this, m = c < 2, f = c === o;
+    const {pagesOnly: e, recordsOnly: i, isFullViewHidden: n, recordTypeWithDefault: s, totalPages: o, totalWithDefault: r, pageWithDefault: c, currentRange: p, nextRange: h, prevRange: d, showPerPageSelect: g, disabled: u} = this, m = c < 2, f = c === o;
     let b = l("tecton.element.pagination.goToNext"), v = l("tecton.element.pagination.goToPrevious");
     return e ? (v = l("tecton.element.pagination.goToPages", {
       next: c - 1,
@@ -243,13 +245,13 @@ const x =  t(class extends e {
       range: h,
       recordType: s.toLowerCase(),
       total: r
-    })), n("nav", {
-      key: "c42b191eccb70b9e3c684843cebf9f6b06f3c3b3",
+    })), a("nav", {
+      key: "a427944d7134621fe5c1cc469d554cf60ea69271",
       class: this.containerClasses.join(" "),
       ref: t => this.containerElement = t,
       "aria-label": l("tecton.element.pagination.title")
-    }, n("div", {
-      key: "eb03cdc19938adac4a5c44887fa7d9853c9b89ab",
+    }, a("div", {
+      key: "ab5e3a0dc0a8c3ab99c8d6754097c37ae1c10193",
       class: "description",
       "test-id": "description"
     }, e ? l("tecton.element.pagination.pages", {
@@ -259,48 +261,48 @@ const x =  t(class extends e {
       range: p,
       recordType: s.toLowerCase(),
       total: r.toLocaleString()
-    })), n("div", {
-      key: "0e9a0bcfa6545b08843423378066989cf96ad18e",
+    })), a("div", {
+      key: "e84213e3dbeac1bb54fcd8244e486274869c5fa5",
       class: "controls"
-    }, n("div", {
-      key: "4ea3b0a64165885dfd1bd525527e2617e4f4d748",
+    }, a("div", {
+      key: "f5a4cb3a4d467b2ce412afa2bb016e1843ccb364",
       class: "btn-group"
-    }, n("q2-btn", {
-      key: "72d72c7b974ecbca50c4259cca5028515786af5b",
+    }, a("q2-btn", {
+      key: "b4d315503de340e482ffb042d3cd4dbaff1aa3eb",
       ref: t => this.firstPageBtn = t,
       label: l("tecton.element.pagination.goToFirstPage"),
       disabled: u || m,
-      hidden: a,
+      hidden: n,
       onTctClick: () => this.handlePageChange(1),
       "test-id": "firstPageBtn",
       "hide-label": !0
-    }, n("q2-icon", {
-      key: "26f5f8e8cf23a6d924b4a01796827fb62017809d",
+    }, a("q2-icon", {
+      key: "8d437e9a6b00999eee091accd8581b84a2dbe4fe",
       type: "chevron-double-left"
-    })), n("q2-btn", {
-      key: "5f7845c5917137131cc6703bb59d90c842e32a7e",
+    })), a("q2-btn", {
+      key: "bd91788b84cbe8a55fb7e7b53342a6c9a75e3694",
       ref: t => this.prevPageBtn = t,
       label: v,
       disabled: u || m,
       onTctClick: () => this.handlePageChange(c - 1),
       "test-id": "prevPageBtn",
       "hide-label": !0
-    }, n("q2-icon", {
-      key: "e02ccf51de21789099e2b254019f962dbb5011dc",
+    }, a("q2-icon", {
+      key: "bf9285d825da06e43e330b565ecf46f72a9ad930",
       type: "chevron-left"
-    }))), n("div", {
-      key: "ca201f7a4382e7f3835093c4c3877f7e2a0b5150",
+    }))), a("div", {
+      key: "76ce1e31814ec56e7d060200ee8a87c720c5fc1e",
       class: "input-display",
-      hidden: a
-    }, n("span", {
-      key: "c690830341a15c25e4ad5a2d2a524d876c9f7cdb",
+      hidden: n
+    }, a("span", {
+      key: "b1768b78ca08e2f76892823a165448c298d2a5b4",
       "aria-hidden": "true"
-    }, l("tecton.element.pagination.page")), n("div", {
-      key: "7d08062d6cd495d4025a82413b347ed87915cbce",
+    }, l("tecton.element.pagination.page")), a("div", {
+      key: "8909fdeaf8832ec6a104ffad86258d0d3034fbb3",
       class: "input-wrapper",
       onClick: () => this.inputField.dispatchEvent(new FocusEvent("focus"))
-    }, n("q2-input", {
-      key: "e30795721d66d75dd5f349ad4d6d3ffda6023820",
+    }, a("q2-input", {
+      key: "96e0ce1764dc542fcac5a516b608b379bd1453a9",
       ref: t => this.inputField = t,
       type: "number",
       value: "" + c,
@@ -316,39 +318,39 @@ const x =  t(class extends e {
       "test-id": "pageInput",
       current: "page",
       disabled: u
-    })), n("span", {
-      key: "e2f1e51306298ddf428fd4e9fa665b58b2535fc8",
+    })), a("span", {
+      key: "3914f78404deab10b4173df5b16c205067c7e15e",
       "aria-hidden": "true"
-    }, l("tecton.element.pagination.ofPages", [ o.toLocaleString() ]))), n("div", {
-      key: "c7a095aaa30743441c0c4d22f55e94801b3a823f",
+    }, l("tecton.element.pagination.ofPages", [ o.toLocaleString() ]))), a("div", {
+      key: "b5b441d213d99d04b18c976628ba07142e00856f",
       class: "btn-group"
-    }, n("q2-btn", {
-      key: "c52d8837ec35b128a9d3f9c87766ed770edc9600",
+    }, a("q2-btn", {
+      key: "3299b27a7d24045f2258288e86702a4b7e6d1e37",
       ref: t => this.nextPageBtn = t,
       label: b,
       disabled: u || f,
       onTctClick: () => this.handlePageChange(c + 1),
       "test-id": "nextPageBtn",
       "hide-label": !0
-    }, n("q2-icon", {
-      key: "d1d802bddb426070fa1ca92a7937b8405949f01c",
+    }, a("q2-icon", {
+      key: "d63e7679e5087a1a03bb17fd0a7c24c0d07bdf87",
       type: "chevron-right"
-    })), n("q2-btn", {
-      key: "357f5bf5426e6c0004b737238a3c66697fc6a672",
+    })), a("q2-btn", {
+      key: "f575528380b7d239db48f49353d71b88ba0e2d9e",
       ref: t => this.lastPageBtn = t,
       label: "tecton.element.pagination.goToLastPage",
       disabled: u || f,
-      hidden: a,
+      hidden: n,
       onTctClick: () => this.handlePageChange(o),
       "test-id": "lastPageBtn",
       "hide-label": !0
-    }, n("q2-icon", {
-      key: "1be92d6fa9252168baf63420271c8b8a77f41d92",
+    }, a("q2-icon", {
+      key: "c76d0fe0dff9095f893604fc41cd4d615075045e",
       type: "chevron-double-right"
-    })))), n("div", {
-      key: "96ca4bc582b1dcb830bad146fbf1233f2549f256",
+    })))), a("div", {
+      key: "71ad1c246e16a1c84318d7ccf75d50a37246af12",
       class: "per-page",
-      hidden: a || !(null === (t = this.perPageIncrements) || void 0 === t ? void 0 : t.length)
+      hidden: n || !(null === (t = this.perPageIncrements) || void 0 === t ? void 0 : t.length)
     }, g && this.renderPerPage()));
   }
   get hostElement() {
@@ -374,7 +376,7 @@ const x =  t(class extends e {
     };
   }
   static get style() {
-    return '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@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:flex;width:100%}:host([align=right]),:host([alignment=right]){justify-content:flex-end}:host([align=center]),:host([alignment=center]){justify-content:center}:host([align=left]),:host([alignment=left]){justify-content:flex-start}:host([hidden]){display:none}.container{display:inline-flex;column-gap:var(--tct-pagination-column-gap, var(--t-pagination-column-gap, var(--app-scale-2x, 10px)));align-items:center;height:var(--tct-pagination-height, var(--t-pagination-height, 44px));color:var(--tct-pagination-color, inherit);font-size:var(--tct-pagination-font-size, inherit);font-weight:var(--tct-pagination-font-weight, inherit)}.container.stacked{flex-direction:column;column-gap:0;row-gap:var(--tct-pagination-row-gap, var(--app-scale-2x, 10px));height:auto;align-items:stretch}.container.stacked .description{text-align:center}.container.stacked .controls{justify-content:center}.container.stacked .per-page{display:flex;justify-content:center}.container.stacked q2-select{--tct-select-margin:0;width:var(--tct-pagination-perpage-width, 60%)}.controls{display:flex}.btn-group{display:flex;gap:var(--tct-pagination-btn-gap, var(--t-pagination-btn-gap, 0))}.description,.input-display{white-space:nowrap}.input-display{display:grid;grid-template-columns:auto var(--tct-pagination-input-width, 50px) auto;align-items:center;gap:var(--tct-pagination-controls-gap, var(--t-pagination-controls-gap, var(--app-scale-1x, 5px)))}.input-display[hidden]{display:none}.input-wrapper{height:var(--tct-pagination-height, var(--t-pagination-height, 44px));display:flex;align-items:center}q2-btn{--tct-btn-border-radius:var(--tct-pagination-btn-border-radius, var(--t-pagination-btn-border-radius));--tct-btn-border:var(--tct-pagination-btn-border, var(--t-pagination-btn-border));--tct-btn-icon-hover-background:var(--tct-pagination-btn-hover-background, var(--app-gray-l3, #f2f2f2));--tct-icon-stroke-primary:var(--tct-pagination-btn-icon-stroke-primary, var(--app-gray, #747474));--tct-icon-stroke-secondary:var(--tct-pagination-btn-icon-stroke-secondary, var(--app-gray, #747474))}q2-icon{--tct-icon-size:var(--tct-pagination-icon-size, var(--t-pagination-icon-size, 12px));color:var(--tct-pagination-icon-color, var(--t-pagination-icon-color, var(--t-text, #4d4d4d)))}q2-input{--tct-input-margin-top:0;--tct-input-margin-bottom:0;--tct-input-height:var(--tct-pagination-input-height, var(--t-pagination-input-height, 30px));--tct-input-min-height:var(--tct-input-height);--tct-input-align:center}q2-select{--tct-input-align:start;--tct-select-input-min-height:var(--tct-pagination-select-height, var(--t-pagination-select-height, 30px));--tct-select-input-max-height:var(--tct-pagination-select-height, var(--t-pagination-select-height, 30px));width:var(--tct-pagination-perpage-width, var(--t-pagination-perpage-width, 100%));min-width:var(--tct-pagination-perpage-min-width, var(--t-pagination-perpage-min-width, 110px))}';
+    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:flex;width:100%}:host([align=right]),:host([alignment=right]){justify-content:flex-end}:host([align=center]),:host([alignment=center]){justify-content:center}:host([align=left]),:host([alignment=left]){justify-content:flex-start}:host([hidden]){display:none}.container{display:inline-flex;column-gap:var(--tct-pagination-column-gap, var(--t-pagination-column-gap, var(--app-scale-2x, 10px)));align-items:center;height:var(--tct-pagination-height, var(--t-pagination-height, 44px));color:var(--tct-pagination-color, inherit);font-size:var(--tct-pagination-font-size, inherit);font-weight:var(--tct-pagination-font-weight, inherit)}.container.stacked{flex-direction:column;column-gap:0;row-gap:var(--tct-pagination-row-gap, var(--app-scale-2x, 10px));height:auto;align-items:stretch}.container.stacked .description{text-align:center}.container.stacked .controls{justify-content:center}.container.stacked .per-page{display:flex;justify-content:center}.container.stacked q2-select{--tct-select-margin:0;width:var(--tct-pagination-perpage-width, 60%)}.container.small{flex-wrap:wrap;row-gap:var(--tct-pagination-row-gap, var(--app-scale-2x, 10px));height:auto;max-width:100%}.container.small .description{flex-basis:100%;min-width:0;overflow-wrap:anywhere;text-align:center;white-space:normal;line-height:max(1.2em, var(--app-line-height, 1.428571429em))}.container.small .controls{margin-inline:auto}.controls{display:flex}.btn-group{display:flex;gap:var(--tct-pagination-btn-gap, var(--t-pagination-btn-gap, 0))}.description,.input-display{white-space:nowrap}.input-display{display:grid;grid-template-columns:auto var(--tct-pagination-input-width, 50px) auto;align-items:center;gap:var(--tct-pagination-controls-gap, var(--t-pagination-controls-gap, var(--app-scale-1x, 5px)))}.input-display[hidden]{display:none}.input-wrapper{height:var(--tct-pagination-height, var(--t-pagination-height, 44px));display:flex;align-items:center}q2-btn{--tct-btn-border-radius:var(--tct-pagination-btn-border-radius, var(--t-pagination-btn-border-radius));--tct-btn-border:var(--tct-pagination-btn-border, var(--t-pagination-btn-border));--tct-btn-icon-hover-background:var(--tct-pagination-btn-hover-background, var(--app-gray-l3, #f2f2f2));--tct-icon-stroke-primary:var(--tct-pagination-btn-icon-stroke-primary, var(--app-gray, #747474));--tct-icon-stroke-secondary:var(--tct-pagination-btn-icon-stroke-secondary, var(--app-gray, #747474))}q2-icon{--tct-icon-size:var(--tct-pagination-icon-size, var(--t-pagination-icon-size, 12px));color:var(--tct-pagination-icon-color, var(--t-pagination-icon-color, var(--t-text, #4d4d4d)))}q2-input{--tct-input-margin-top:0;--tct-input-margin-bottom:0;--tct-input-height:var(--tct-pagination-input-height, var(--t-pagination-input-height, 30px));--tct-input-min-height:var(--tct-input-height);--tct-input-align:center}q2-select{--tct-input-align:start;--tct-select-input-min-height:var(--tct-pagination-select-height, var(--t-pagination-select-height, 30px));--tct-select-input-max-height:var(--tct-pagination-select-height, var(--t-pagination-select-height, 30px));width:var(--tct-pagination-perpage-width, var(--t-pagination-perpage-width, 100%));min-width:var(--tct-pagination-perpage-min-width, var(--t-pagination-perpage-min-width, 110px))}';
   }
 }, [ 1, "q2-pagination", {
   align: [ 1537 ],
@@ -415,54 +417,54 @@ const x =  t(class extends e {
   } ]
 } ]);
 
-const q = x, defineCustomElement = function() {
+const w = x, defineCustomElement = function() {
   if ("undefined" == typeof customElements) return;
   [ "q2-pagination", "click-elsewhere", "q2-badge", "q2-btn", "q2-icon", "q2-input", "q2-loading", "q2-option", "q2-option-list", "q2-popover", "q2-select" ].forEach((t => {
     switch (t) {
      case "q2-pagination":
-      customElements.get(a(t)) || customElements.define(a(t), x);
+      customElements.get(n(t)) || customElements.define(n(t), x);
       break;
 
      case "click-elsewhere":
-      customElements.get(a(t)) || h();
+      customElements.get(n(t)) || h();
       break;
 
      case "q2-badge":
-      customElements.get(a(t)) || d();
+      customElements.get(n(t)) || d();
       break;
 
      case "q2-btn":
-      customElements.get(a(t)) || g();
+      customElements.get(n(t)) || g();
       break;
 
      case "q2-icon":
-      customElements.get(a(t)) || u();
+      customElements.get(n(t)) || u();
       break;
 
      case "q2-input":
-      customElements.get(a(t)) || m();
+      customElements.get(n(t)) || m();
       break;
 
      case "q2-loading":
-      customElements.get(a(t)) || f();
+      customElements.get(n(t)) || f();
       break;
 
      case "q2-option":
-      customElements.get(a(t)) || b();
+      customElements.get(n(t)) || b();
       break;
 
      case "q2-option-list":
-      customElements.get(a(t)) || v();
+      customElements.get(n(t)) || v();
       break;
 
      case "q2-popover":
-      customElements.get(a(t)) || y();
+      customElements.get(n(t)) || y();
       break;
 
      case "q2-select":
-      customElements.get(a(t)) || k();
+      customElements.get(n(t)) || k();
     }
   }));
 };
 
-export { q as Q2Pagination, defineCustomElement }
+export { w as Q2Pagination, defineCustomElement }

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
@@ -183,7 +183,9 @@ const f =  t(class extends o {
     c(t, this.hostElement) && this.primaryBtn.focus();
   }
   async popoverStateHandler({detail: {open: t}}) {
-    this.open !== t && (this.open = t), t || this.setOptionListActiveElement(null);
+    var o;
+    this.open !== t && (this.open = t, t || (this.setOptionListActiveElement(null), 
+    null === (o = this.primaryBtn) || void 0 === o || o.focus()));
   }
   // #endregion
   // #region Public Methods API
@@ -222,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,
@@ -244,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() {
@@ -278,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,
@@ -286,25 +288,25 @@ 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: "5bbfce776dcd2ef3ac7097b37fd2df039d47c21f",
+      key: "8cba59cde3746d0397305512334eb56357e9e5d4",
       onChange: this.onClickElsewhere
     }, e("div", {
-      key: "9d8d7a4b6afb1d931d762a0e656509a2036180ba",
+      key: "391da54f9fd870e223765e6266291dff9775abe6",
       class: n.join(" ")
     }, e("div", {
-      key: "5bbf245bd78d2ed075b9a16cc46396528f20b823",
+      key: "06431fd76c0a9d30833756407c89ff59609bc3a3",
       class: "btn-height-wrapper",
       ref: t => this.primaryBtnWrapper = t,
       onClick: this.handleWrapperClick,
       tabIndex: -1
     }, e("button", {
-      key: "494b1555d332a62c8a2946da260a9bb5f26849d5",
+      key: "609557b9206c91511e78e26c990230e61f7e5c19",
       class: "btn-primary",
       "test-id": "btn-control",
       type: "button",
@@ -317,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: "d26426863ec1dadfbf2049ca6b85dcdb28875858",
+      key: "e1f4c57b7526f714cf0242e101ec0f5c39ebafa5",
       name: "decorator"
-    }), a)), this.renderIcon(), !!t && this.renderHiddenElement()), this.optionCount > 0 && e("q2-popover", {
-      key: "1b06b432ce4ab98a1d1d0b70acb7074849e94999",
+    }), 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,
@@ -334,20 +339,20 @@ const f =  t(class extends o {
       align: this.popoverAlignment,
       onFocusout: this.handleFocusOut
     }, e("div", {
-      key: "ea87e923fe84d94fc1f9a1b72b9fd1deef5cb5ad",
+      key: "6fc858b2064b78b2ccaafd35aefaa2e4c9e1ea07",
       class: "popover-content"
     }, e("div", {
-      key: "53b50f438af20d4474b42511ee334391ff429fa0",
+      key: "75134f4a5d4296f6f69a70197bf1bd450c05a8e0",
       ref: t => this.popoverTopContainer = t,
       class: "popover-top-container",
       tabindex: "-1",
       hidden: !this.hasPopoverTop,
       onKeyDown: this.handleSlotKeydown
     }, e("slot", {
-      key: "0996ca12d288c696601919df48ef6c8784bbf8d4",
+      key: "f570a1a19b97bd7eb4b2ae38975db95ff1153b00",
       name: "popover-top"
     })), e("q2-option-list", {
-      key: "9faef4049f040e8c22b46107a7a618224cd0e82c",
+      key: "aca9ff86903dcf5b4e5138541ac20dac68955fb7",
       type: "listbox",
       ref: t => this.optionList = t,
       id: "option-list",
@@ -358,16 +363,16 @@ const f =  t(class extends o {
       onPopoverState: this.onPopoverState,
       label: l("tecton.element.optionList.label", [ this.optionListLabel ])
     }, e("slot", {
-      key: "8f54a5eb6670b9bffb2062eeb9815834b2aa8de7"
+      key: "89c5f3739c36206ceecb06245ba3052491b89898"
     })), e("div", {
-      key: "1e61e07bb5c6bdcdfd68080cc606bb1a42f48d79",
+      key: "8f98c6b4a59c2c0675b5648aed4a1110f0136d87",
       ref: t => this.popoverBottomContainer = t,
       class: "popover-bottom-container",
       tabindex: "-1",
       hidden: !this.hasPopoverBottom,
       onKeyDown: this.handleSlotKeydown
     }, e("slot", {
-      key: "48a8d60e3eae7de823d1e55ab9153dedda9a739d",
+      key: "75ef6c235c31755e0a5b9905db16e02ff8c4eea3",
       name: "popover-bottom"
     })))));
   }
@@ -388,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 ],
@@ -431,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();
     }
   }));
 };