q2-tecton-elements 1.73.0 → 1.73.1

package/dist/components/q2-stepper.js

@@ -249,50 +249,50 @@ const u =  t(class extends e {
   render() {
     const {stepCount: t, scrollEnabled: e, showScrollLeft: r, showScrollRight: i} = this, s = [ "step-container" ];
     return e && s.push("has-scroll"), a(o, {
-      key: "c9839ff458e2d71fb66c42cb5b4ae394c7ffb9ff"
+      key: "423f7d50f787abf21c14730ae9cd50cd3638b17b"
     }, a("div", {
-      key: "51d8a914662c2794e16928c971ef995bca933776",
+      key: "2ffacd2f9792075956748eb6960975d9aeda28ad",
       class: s.join(" ")
     }, e && a(o, {
-      key: "0b1d1dd0c973d2266a468a8f81d0c9bdd2a430cc"
+      key: "da90a671295ce6702c3bc6f1ab71f671cda2c9c8"
     }, a("div", {
-      key: "87b9ae7e5ab260ee8743e78302017389941c3ead",
+      key: "319c4a75dfafd7b03d3f7f13156f24bd1ca7b0c3",
       class: "gradient-left",
       hidden: !r
     }), a("div", {
-      key: "a5d487517c497ae927a1fd05d7c4631aa00d76bf",
+      key: "80a08dc979685d94f6cfe20d66787d06e7d46014",
       class: "gradient-right",
       hidden: !i
     }), a("q2-btn", {
-      key: "fe008283e673c2b51acf1cc654ed1c844a6d33bf",
+      key: "43a71cb3212ddbe37c6e7d7051850efd49ced456",
       class: "btn-left",
       hideLabel: !0,
       hidden: !this.showScrollLeft,
       label: c("tecton.element.stepper.scrollLeft"),
       onTctClick: () => this.onScrollBtnClick("left")
     }, a("q2-icon", {
-      key: "7d83dfafb861da55085fa33a4aca620416849e27",
+      key: "19ee5abc690bba84016fb8c692a74b5c233aa426",
       type: "chevron-left"
     })), a("q2-btn", {
-      key: "c81adb720c387ddabb7eead010db863b0e295208",
+      key: "f26bc502269a5d60308aba041a6d9a75efcf2573",
       class: "btn-right",
       hideLabel: !0,
       hidden: !this.showScrollRight,
       label: c("tecton.element.stepper.scrollRight"),
       onTctClick: () => this.onScrollBtnClick("right")
     }, a("q2-icon", {
-      key: "c0d5939662d35c18ea9c486a1dc8da243b779ea2",
+      key: "7f35a54468433010427213e18d213b1c227413a6",
       type: "chevron-right"
     }))), a("ul", {
-      key: "07501b7abbe4e828686b87c057b79bae4059e826",
+      key: "0bc4eed617263c7e4a6138c3a884f6a1b8bc2ca6",
       onScroll: this.checkScrollState,
       ref: t => this.listElement = t,
       role: "tablist"
     }, t > 0 && [ ...Array(t).keys() ].map((t => this.renderStepBtn(t))))), a("div", {
-      key: "df8d51e7b40ee1999b0a280fa8524559accfec9a",
+      key: "87945c612fcaa70164faa50d78bb63c9b290e3f2",
       role: "list"
     }, a("slot", {
-      key: "a8ce54b65b8c7d8542e60811a7215fed12400e38",
+      key: "4b55529f41b4731dc1424c8be4fcd941ff2c2f33",
       onSlotchange: () => this.onSlotChange()
     })));
   }

package/dist/components/q2-surface.js

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

package/dist/components/q2-tab-container.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement as t, HTMLElement as a, createEvent as e, h as i, Fragment as r, transformTag as o } from "@stencil/core/internal/client";
 
-import { c as n, l as s, o as c, i as l } from "./index2.js";
+import { c as n, l as c, o as s, i as l } from "./index2.js";
 
 import { m as b } from "./mirror-emit.js";
 
@@ -145,7 +145,7 @@ const f =  t(class extends a {
       }
     }, this.setTabs = () => {
       this.tabs = this.tabPanes.map((({label: t, value: a, badgeCount: e, badgeDescription: i, badgeTheme: r, badgeStatus: o}) => ({
-        label: t && s(t) || "",
+        label: t && c(t) || "",
         value: a,
         badgeCount: e,
         badgeDescription: i,
@@ -186,7 +186,7 @@ const f =  t(class extends a {
   componentDidLoad() {
     var t;
     null === (t = this.resizeObserver) || void 0 === t || t.observe(this.listElement), 
-    this.checkScrollState(), c(this.hostElement), this.scheduledAfterRender.push((() => this.determineTabMove())), 
+    this.checkScrollState(), s(this.hostElement), this.scheduledAfterRender.push((() => this.determineTabMove())), 
     this.narrowViewportMedia && (this.narrowViewportListener = t => {
       this.isNarrowViewport = t.matches;
     }, this.narrowViewportMedia.addEventListener("change", this.narrowViewportListener));
@@ -274,7 +274,7 @@ const f =  t(class extends a {
   }
   renderTabWithBadge(t, a) {
     let e, r;
-    return !t.badgeStatus && a && (e = t.badgeTheme || "primary"), r = t.badgeDescription ? s(t.badgeDescription) : t.badgeStatus ? s("tecton.element.tab.pane." + t.badgeStatus, [ t.badgeCount ]) : s("tecton.element.tab.pane.new"), 
+    return !t.badgeStatus && a && (e = t.badgeTheme || "primary"), r = t.badgeDescription ? c(t.badgeDescription) : t.badgeStatus ? c("tecton.element.tab.pane." + t.badgeStatus, [ t.badgeCount ]) : c("tecton.element.tab.pane.new"), 
     i("div", {
       class: "tab-pane-badge",
       "aria-label": `${t.label}, ${t.badgeCount} ${r}`
@@ -287,50 +287,50 @@ const f =  t(class extends a {
   render() {
     const t = "vertical" === this.computedOrientation;
     return i(r, {
-      key: "03d43399332adeda98bb8d9e20053a9c6d49fcce"
+      key: "37c84e750a2494ea2b4302fd99e0cebc443d58ce"
     }, i("div", {
-      key: "e0a8ef7f09a83f703a4b20f54c32522ddb1c5c50",
+      key: "249effad5ab4e880c2c203ac0e4024557c310679",
       class: "tab-container"
     }, this.scrollEnabled && i(r, {
-      key: "ad75ef49a54bfe0f862e19123e2a4770e17bf4a2"
+      key: "10a7d53d5bde829e5897722cd924d40ce90a0b82"
     }, i("div", {
-      key: "0a699d7dff2af9e01eb0c9a4727c0aa586068d97",
+      key: "b2acc786c41a9d1a8d3e951fdc36ecea3a304664",
       class: "gradient-left",
       hidden: !this.showScrollBack
     }), i("div", {
-      key: "758388b43d96757cd402eac4c8c881b20853e8d2",
+      key: "fa70173c7d845f88417c6b6b6d54884ead80f34f",
       class: "gradient-right",
       hidden: !this.showScrollForward
     }), i("q2-btn", {
-      key: "0738c515ffc60c9fb82941ce1cb104924c3a85ef",
+      key: "d953c160ff42503dce5bb7c60d8234bdd9196d73",
       class: "btn-left",
       hidden: !this.showScrollBack,
       onTctClick: () => this.onScrollBtnClick("back")
     }, i("q2-icon", {
-      key: "95820c6bad13d98ad94e4722026b00e1fedb720e",
+      key: "3980ef873b5d7ae6c50eb868455839344dda9701",
       type: t ? "chevron-up" : "chevron-left",
       label: t ? "scroll up" : "scroll left"
     })), i("q2-btn", {
-      key: "2aabca6f28a8acffd6565870b56424c410f4ebae",
+      key: "a3b1f46355ab1de2f73ac7529b734b684194093f",
       class: "btn-right",
       hidden: !this.showScrollForward,
       onTctClick: () => this.onScrollBtnClick("forward")
     }, i("q2-icon", {
-      key: "94561888012314b3e3503c7f0b64444f3a7b7c96",
+      key: "a2ec50ff7e0cce3716ba890c626fa56e62ecddbb",
       type: t ? "chevron-down" : "chevron-right",
       label: t ? "scroll down" : "scroll right"
     }))), i("ul", {
-      key: "d58936a795d74807740d291b93bb739d66fbbe24",
+      key: "e42bbb379d396a25b3af96985504a8f4bae1bba0",
       onScroll: this.checkScrollState,
       ref: t => this.listElement = t,
       class: this.noPrint ? "no-print" : null,
       role: "tablist",
       "aria-orientation": this.computedOrientation
     }, this.tabs.map(((t, a) => this.renderTab(t, a))))), i("div", {
-      key: "ccd952b3f0ef0e639e0f86957841ad548fe65eb5",
+      key: "7d1f6ac5262cccb0b7087b3d93f33e46390814af",
       class: "tab-content"
     }, i("slot", {
-      key: "24deecd3894184e816d1d8c5e5257aab382ed055",
+      key: "fa341fadca5ba04fe21ef7186cc0e15b5c7357db",
       onSlotchange: () => this.onSlotChange()
     })));
   }

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

@@ -1,4 +1,4 @@
-import { proxyCustomElement as e, HTMLElement as t, createEvent as n, h as i, transformTag as a } from "@stencil/core/internal/client";
+import { proxyCustomElement as e, HTMLElement as t, createEvent as n, h as a, transformTag as i } from "@stencil/core/internal/client";
 
 import { b as o } from "./component.js";
 
@@ -19,16 +19,16 @@ const r =  e(class extends t {
   // #endregion
   // #region Render Methods
   render() {
-    return i("div", {
-      key: "a1ca82c1b98634b33d0ded7c459e151bbcba82ab",
+    return a("div", {
+      key: "1a957a6a6fb4dee7e420d46ad5f576b5b25008c4",
       id: `tab-pane-${this.guid}-${this.index}`,
       class: "tab-pane" + (this.selected ? "" : " hidden"),
       role: "tabpanel",
       tabindex: "-1",
       "aria-hidden": "" + !this.selected,
       "aria-labelledby": `tab-${this.guid}-${this.index}`
-    }, i("slot", {
-      key: "4893e7153f387cfa726ba354cb53274d8f907b94"
+    }, a("slot", {
+      key: "9c9dc847674f0a829feb822808f7e3dac9ac3263"
     }));
   }
   get hostElement() {
@@ -82,7 +82,7 @@ const r =  e(class extends t {
 const s = r, defineCustomElement = function() {
   if ("undefined" == typeof customElements) return;
   [ "q2-tab-pane" ].forEach((e => {
-    if ("q2-tab-pane" === e) customElements.get(a(e)) || customElements.define(a(e), r);
+    if ("q2-tab-pane" === e) customElements.get(i(e)) || customElements.define(i(e), r);
   }));
 };
 

package/dist/components/q2-tag2.js

@@ -153,9 +153,9 @@ const f =  t(class extends o {
     this.optionCount && o.push("has-options");
     const e = this.optionCount > 0;
     return r(i, {
-      key: "a18af83301ac8bf08d1638b05d4dd8795f11cd46"
+      key: "a46abe562647fe64e55427bcc8284bbfc5f01e3f"
     }, r("click-elsewhere", {
-      key: "130d173a4bf53dd6eec1775944d910c630e704ae",
+      key: "667e76295c30be78462ee67128a8fb2c38c01285",
       onChange: this.onClickElsewhere
     }, e ? r(a, null, r("button", {
       class: "tag-wrapper",
@@ -182,7 +182,7 @@ const f =  t(class extends o {
     }, r("slot", {
       name: "decorator"
     }), l(this.label))), e && r("q2-popover", {
-      key: "07bf52f6b4d8c4bbf42e90e69ff9a9deec82810b",
+      key: "805e64b738fc5a0b1a73968636a8843af33834ef",
       ref: t => this.popoverElement = t,
       controlElement: this.dropdownBtn,
       open: this.open,
@@ -191,7 +191,7 @@ const f =  t(class extends o {
       direction: this.popoverDirection,
       align: this.popoverAlignment
     }, r("q2-option-list", {
-      key: "eefdf7202c269194a9753e438b4c6060984ba33e",
+      key: "1d037878cfcf4785439edb9a5693d4dba700e947",
       id: "option-list",
       ref: t => this.optionList = t,
       onChange: this.handleChange,
@@ -200,7 +200,7 @@ const f =  t(class extends o {
       label: l("tecton.element.optionList.label", [ this.optionListLabel ]),
       "no-select": !0
     }, r("slot", {
-      key: "3067ac9beee239562c410d7dfe4af04c651ef8ae"
+      key: "1039cd355f5b1a7ec7cab1eca80479042060fef4"
     })))));
   }
   get hostElement() {

package/dist/components/tecton-tab-pane.js

@@ -42,7 +42,7 @@ const o =  e(class extends t {
   // #region Render Methods
   render() {
     return n("div", {
-      key: "b55643965ef49af2e41a683686db00b97e1c90b7",
+      key: "313fa13779cd8ecb5439b1a96cb7aaf17f6c871b",
       id: `tab-pane-${this.guid}-${this.index}`,
       class: "tab-pane" + (this.selected ? "" : " hidden"),
       role: "tabpanel",
@@ -50,12 +50,12 @@ const o =  e(class extends t {
       "aria-hidden": "" + !this.selected,
       "aria-labelledby": `tab-${this.guid}-${this.index}`
     }, this.selected && void 0 !== this.provided && !this.provided && n("div", {
-      key: "f04f1594eba66d962d9adbab48bf3559f658c650"
+      key: "5207414b205d1e9a25fb1455ca21ff7cc913a5fd"
     }, n("slot", {
-      key: "08804102412a6b57ac9b9db2002d1608f8b22c19",
+      key: "d883e909e38981f315bc1cab9ef57957a616c0d5",
       name: "loading-wrapper"
     }), n("iframe", {
-      key: "a2524435de8072fb27ebdcc9762a1f20367df098",
+      key: "2f0233d04d3c5be619cb54bfe637252a7ef42d77",
       hidden: !0,
       name: this.moduleId,
       scrolling: "no",
@@ -78,11 +78,11 @@ const o =  e(class extends t {
       value: e.value,
       name: e.key
     })))) : ""), n("div", {
-      key: "59e9d5ddbabadb0e66615d998403d267c259f937",
+      key: "ae5ee8d5a5a7d1b798f4111b33120d301b86a16b",
       class: "slot-wrapper",
       hidden: this.selected && void 0 !== this.provided && !this.provided
     }, n("slot", {
-      key: "450c5724cf32ba05a2fc93b8adeba83b08e871e4"
+      key: "cb1057d2b6cb467a25da1577610bfcc5b6300047"
     })));
   }
   get hostElement() {

package/dist/esm/q2-avatar.entry.js

@@ -5,6 +5,7 @@ const q2AvatarCss = () => `*{box-sizing:border-box}*:active{outline:none}*:focus
 const Q2Avatar = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.initialsFontScale = 1;
         // #endregion
         // #region State Properties
         this.badSrc = false;
@@ -26,9 +27,11 @@ const Q2Avatar = class {
     // #endregion
     // #region Component Lifecycle Events
     disconnectedCallback() {
+        var _a;
         if (this.decoratorObserver) {
             this.decoratorObserver.disconnect();
         }
+        (_a = this.initialsResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     componentWillLoad() {
         this.checkDecorator();
@@ -36,6 +39,20 @@ const Q2Avatar = class {
     componentDidLoad() {
         this.setupDecoratorObserver();
     }
+    componentDidRender() {
+        var _a, _b, _c;
+        const text = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.avatar-initials text');
+        if (text !== this.observedInitialsText) {
+            (_b = this.initialsResizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+            this.observedInitialsText = text;
+            this.initialsFontScale = 1;
+            if (text && typeof ResizeObserver === 'function') {
+                (_c = this.initialsResizeObserver) !== null && _c !== void 0 ? _c : (this.initialsResizeObserver = new ResizeObserver(() => this.fitInitials()));
+                this.initialsResizeObserver.observe(text);
+            }
+        }
+        this.fitInitials();
+    }
     // #endregion
     // #region Watchers
     srcDidUpdate() {
@@ -66,6 +83,22 @@ const Q2Avatar = class {
         const decoratorElements = Array.from(this.el.children).filter(child => child.getAttribute('slot') === 'decorator');
         this.hasDecorator = decoratorElements.length > 0;
     }
+    fitInitials() {
+        const text = this.observedInitialsText;
+        if (!text)
+            return;
+        const { x, y, width, height } = text.getBBox();
+        const requiredHalfExtent = Math.max(50 - x, x + width - 50, 50 - y, y + height - 50);
+        const baseHalfExtent = requiredHalfExtent / this.initialsFontScale;
+        const scale = baseHalfExtent > 50 ? 48 / baseHalfExtent : 1;
+        if (Math.abs(scale - this.initialsFontScale) < 0.00001)
+            return;
+        this.initialsFontScale = scale;
+        if (scale === 1)
+            text.style.removeProperty('font-size');
+        else
+            text.style.fontSize = `calc(var(--tct-avatar-font-size, var(--const-px-40, 40px)) * ${scale})`;
+    }
     setupDecoratorObserver() {
         // Set up MutationObserver to watch for changes to the host element's children
         this.decoratorObserver = new MutationObserver(() => {
@@ -87,7 +120,7 @@ const Q2Avatar = class {
         const isLoaded = this.isLoaded;
         const showInitials = (this.name || this.initials) && (!this.src || this.badSrc);
         const showFallback = !this.name && !this.initials && (!this.src || this.badSrc);
-        return (h("div", { key: '2a10f13b2ca606dab3563d026910d909e37ddcb0', class: `avatar-wrapper size-${this.size}` }, this.hasDecorator && (h("div", { key: 'e5deb3da74508a5731238724895ca9f1ab8b7a50', class: "decorator" }, h("slot", { key: '3cc01e88891a09f7917416a0acd0940e79decf26', name: "decorator" }))), showImg && (h("img", { key: 'cbed4e936072bca7bd23bd18b8679d0539c3fbd2', class: `${isLoaded ? 'avatar-img' : 'avatar-img-default'}`, "test-id": "userImage", src: this.src, onError: this.onError, onLoad: this.onLoad, alt: this.name || '' })), showInitials && (h("svg", { key: 'f1876a7748d3806e21e48f3de7b70c6faea499ca', viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid meet", "test-id": "userInitials", class: `avatar-initials initials-size-${computedInitials.length}`, "aria-label": this.name, "aria-hidden": !this.name && 'true' }, h("text", { key: 'a120d991968334f383efcb9d5ef920c7ee542880', x: "50", y: "50", "dominant-baseline": "central", "text-anchor": "middle", "aria-hidden": "true" }, computedInitials))), showFallback && (h("div", { key: '598457dc937327172221fab317246d1085a57b02', "test-id": "fallbackIcon", class: "fallback" }, h("q2-icon", { key: '578836c985252ea19c06d5499e6ad8f9c311e09f', type: this.icon })))));
+        return (h("div", { key: 'd5a32129734a7923c61ecfbace6af0799051b8c9', class: `avatar-wrapper size-${this.size}` }, this.hasDecorator && (h("div", { key: 'a20e35425d03a0b45df79846b1613be993935bab', class: "decorator" }, h("slot", { key: '082a7d3022be63825ac0237b0f458eb3fc328737', name: "decorator" }))), showImg && (h("img", { key: 'bc092a5fe3996d53f89bc69146aceb2af53b571a', class: `${isLoaded ? 'avatar-img' : 'avatar-img-default'}`, "test-id": "userImage", src: this.src, onError: this.onError, onLoad: this.onLoad, alt: this.name || '' })), showInitials && (h("svg", { key: '385335ea2b6d35d48179cbea4aa3ac3d99e56093', viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid meet", "test-id": "userInitials", class: `avatar-initials initials-size-${computedInitials.length}`, "aria-label": this.name, "aria-hidden": !this.name && 'true' }, h("text", { key: 'fb331a07ddc746787341e31febcf2a267f8f0e33', x: "50", y: "50", "dominant-baseline": "central", "text-anchor": "middle", "aria-hidden": "true" }, computedInitials))), showFallback && (h("div", { key: 'da7a75cc5e5b4e62eeaa63c399ed0dc6c869e99c', "test-id": "fallbackIcon", class: "fallback" }, h("q2-icon", { key: '626219dd1528fa7e39d298856be8205f21a6708e', type: this.icon })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/q2-badge_2.entry.js

@@ -1826,7 +1826,7 @@ const phoneNumberFormats = {
         prefix: '+44 ',
     },
     IN: {
-        mask: '###### #####',
+        mask: '##### #####?',
         prefix: '+91 ',
     },
     IO: {

package/dist/esm/q2-checkbox_2.entry.js

@@ -392,7 +392,7 @@ const Q2Tag = class {
         if (this.optionCount)
             wrapperClassNames.push('has-options');
         const shouldShowOptions = this.optionCount > 0;
-        return (h(Host, { key: 'a18af83301ac8bf08d1638b05d4dd8795f11cd46' }, h("click-elsewhere", { key: '130d173a4bf53dd6eec1775944d910c630e704ae', onChange: this.onClickElsewhere }, shouldShowOptions ? (h(Fragment, null, h("button", { class: "tag-wrapper", ref: el => (this.dropdownBtn = el), "test-id": "btn-control", type: "button", role: "combobox", onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, "aria-controls": "option-list", "aria-expanded": open ? 'true' : 'false', "aria-describedby": "option-description", "aria-label": loc(this.label) }, h("div", { class: wrapperClassNames.join(' ') }, loc(this.label)), h("q2-icon", { type: "options" })), this.renderHiddenElement())) : (h("div", { class: "tag-wrapper", onClick: e => e.stopPropagation() }, h("div", { class: wrapperClassNames.join(' ') }, h("slot", { name: "decorator" }), loc(this.label)))), shouldShowOptions && (h("q2-popover", { key: '07bf52f6b4d8c4bbf42e90e69ff9a9deec82810b', ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, maxHeight: this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("q2-option-list", { key: 'eefdf7202c269194a9753e438b4c6060984ba33e', id: "option-list", ref: el => (this.optionList = el), onChange: this.handleChange, type: "menu", align: "right", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", { key: '3067ac9beee239562c410d7dfe4af04c651ef8ae' })))))));
+        return (h(Host, { key: 'a46abe562647fe64e55427bcc8284bbfc5f01e3f' }, h("click-elsewhere", { key: '667e76295c30be78462ee67128a8fb2c38c01285', onChange: this.onClickElsewhere }, shouldShowOptions ? (h(Fragment, null, h("button", { class: "tag-wrapper", ref: el => (this.dropdownBtn = el), "test-id": "btn-control", type: "button", role: "combobox", onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, "aria-controls": "option-list", "aria-expanded": open ? 'true' : 'false', "aria-describedby": "option-description", "aria-label": loc(this.label) }, h("div", { class: wrapperClassNames.join(' ') }, loc(this.label)), h("q2-icon", { type: "options" })), this.renderHiddenElement())) : (h("div", { class: "tag-wrapper", onClick: e => e.stopPropagation() }, h("div", { class: wrapperClassNames.join(' ') }, h("slot", { name: "decorator" }), loc(this.label)))), shouldShowOptions && (h("q2-popover", { key: '805e64b738fc5a0b1a73968636a8843af33834ef', ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, maxHeight: this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("q2-option-list", { key: '1d037878cfcf4785439edb9a5693d4dba700e947', id: "option-list", ref: el => (this.optionList = el), onChange: this.handleChange, type: "menu", align: "right", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", { key: '1039cd355f5b1a7ec7cab1eca80479042060fef4' })))))));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/q2-message.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, h, g as getElement } from './index-Cqkz7Bnm.js';
 import { o as overrideFocus, i as isEventFromElement, n as nextPaint, p as isFirefox, l as loc } from './index-CP8pXJ-l.js';
 
-const q2MessageCss = () => `*{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:block}:host([hidden]){display:none}.message{--comp-line-height:var(--tct-message-line-height, var(--t-message-line-height, var(--app-line-height, 1.428571429em)));border-width:var(--tct-message-border-width, 0);border-style:var(--tct-message-border-style, solid);border-color:var(--tct-message-border-color, transparent);position:relative;display:grid;gap:var(--tct-message-gap, 8px);align-items:flex-start;background:var(--comp-message-background);color:var(--tct-message-font-color, var(--t-message-font-color, inherit));box-shadow:var(--tct-message-box-shadow, var(--t-message-box-shadow, var(--app-shadow-1, inherit)));border-radius:var(--tct-message-border-radius, var(--t-message-border-radius, var(--app-border-radius-1, inherit)))}.message:focus{box-shadow:var(--const-global-focus)}.bar{position:absolute;left:0;top:0;bottom:0;height:100%;background:var(--comp-bar-color);width:var(--tct-message-bar-width, var(--t-message-bar-width, 4px));border-radius:var(--tct-message-bar-border-radius, var(--app-border-radius-1) 0 0 var(--app-border-radius-1))}.message-icon{--comp-top-offset:calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);--tct-icon-size:var(--comp-icon-size);top:var(--comp-top-offset);margin-bottom:calc(var(--comp-top-offset) * -1)}.message-content{flex:1;line-height:var(--comp-line-height);font-size:var(--tct-message-font-size, inherit)}::slotted(ul){--comp-list-default-padding:0 0 0 var(--app-scale-3x, 15px);padding:var(--tct-message-list-padding, var(--comp-list-default-padding))}:host(:not([appearance])),:host([appearance=standard]){--comp-default-margin:var(--app-scale-3x, 5px) 0;margin:var(--tct-message-margin, var(--comp-default-margin))}:host(:not([appearance])) .message,:host([appearance=standard]) .message{--comp-icon-size:var(--tct-message-icon-size, var(--t-message-icon-size, 24px));--comp-padding:var(--tct-message-padding, var(--t-message-padding, var(--app-scale-3x, 15px)));grid-template-columns:var(--comp-icon-size) 1fr;padding:var(--comp-padding);padding-bottom:calc(var(--comp-padding) - var(--tct-scale-1, var(--app-scale-1x, 5px)))}:host(:not([appearance])) ::slotted(ul),:host([appearance=standard]) ::slotted(ul){--comp-list-default-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-message-list-margin, var(--comp-list-default-margin))}:host([appearance=minimal]){margin:0}:host([appearance=minimal]) .message{padding:var(--tct-message-minimal-padding, var(--t-message-minimal-padding, var(--app-scale-2x, 10px)));grid-template-columns:1fr}:host([appearance=minimal]) ::slotted(ul){margin:var(--tct-scale-1, var(--app-scale-1x, 5px)) 0}:host(:not([type])),:host([type=info]){--comp-info-color:#0079c1;--comp-bar-color:var(--tct-message-info-bar-color, var(--const-stoplight-info, var(--comp-info-color)));--comp-message-background:var(--tct-message-info-background, var(--tct-message-background, color-mix(in srgb, var(--t-base, #FFFFFF), var(--comp-bar-color) 10%)))}:host(:not([type])) .message-icon,:host([type=info]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-info, var(--const-stoplight-info, var(--comp-info-color)));--tct-icon-stroke-secondary:var(--tct-stoplight-info, var(--const-stoplight-info, var(--comp-info-color)))}:host([type=success]){--comp-success-color:#0e8a00;--comp-bar-color:var(--tct-message-success-bar-color, var(--const-stoplight-success, var(--comp-success-color)));--comp-message-background:var(--tct-message-success-background, var(--tct-message-background, color-mix(in srgb, var(--t-base, #FFFFFF), var(--comp-bar-color) 10%)))}:host([type=success]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-success, var(--const-stoplight-success, var(--comp-success-color)));--tct-icon-stroke-secondary:var(--tct-stoplight-success, var(--const-stoplight-success, var(--comp-success-color)))}:host([type=warning]){--comp-warning-color:#c35500;--comp-bar-color:var(--tct-message-warning-bar-color, var(--const-stoplight-warning, var(--comp-warning-color)));--comp-message-background:var(--tct-message-warning-background, var(--tct-message-background, color-mix(in srgb, var(--t-base, #FFFFFF), var(--comp-bar-color) 10%)))}:host([type=warning]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-warning, var(--const-stoplight-warning, var(--comp-warning-color)));--tct-icon-stroke-secondary:var(--tct-stoplight-warning, var(--const-stoplight-warning, var(--comp-warning-color)))}:host([type=error]),:host([type=danger]){--comp-error-color:#d20a0a;--comp-bar-color:var(--tct-message-error-bar-color, var(--const-stoplight-alert, var(--comp-error-color)));--comp-message-background:var(--tct-message-error-background, var(--tct-message-background, color-mix(in srgb, var(--t-base, #FFFFFF), var(--comp-bar-color) 10%)))}:host([type=error]) .message-icon,:host([type=danger]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, var(--comp-error-color)));--tct-icon-stroke-secondary:var(--tct-stoplight-error, var(--const-stoplight-alert, var(--comp-error-color)))}`;
+const q2MessageCss = () => `*{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:block}:host([hidden]){display:none}.message{--comp-line-height:var(--tct-message-line-height, var(--t-message-line-height, var(--app-line-height, 1.428571429em)));border-width:var(--tct-message-border-width, 0);border-style:var(--tct-message-border-style, solid);border-color:var(--tct-message-border-color, transparent);position:relative;display:grid;gap:var(--tct-message-gap, 8px);align-items:flex-start;background:var(--comp-message-background);color:var(--tct-message-font-color, var(--t-message-font-color, inherit));box-shadow:var(--tct-message-box-shadow, var(--t-message-box-shadow, var(--app-shadow-1, inherit)));border-radius:var(--tct-message-border-radius, var(--t-message-border-radius, var(--app-border-radius-1, inherit)))}.message:focus{box-shadow:var(--const-global-focus)}.bar{position:absolute;left:0;top:0;bottom:0;height:100%;background:var(--comp-bar-color);width:var(--tct-message-bar-width, var(--t-message-bar-width, 4px));border-radius:var(--tct-message-bar-border-radius, var(--app-border-radius-1) 0 0 var(--app-border-radius-1))}.message-icon{--comp-top-offset:calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);--tct-icon-size:var(--comp-icon-size);top:var(--comp-top-offset);margin-bottom:calc(var(--comp-top-offset) * -1)}.message-content{flex:1;font-size:var(--tct-message-font-size, inherit);line-height:max(1.2em, var(--comp-line-height))}::slotted(ul){--comp-list-default-padding:0 0 0 var(--app-scale-3x, 15px);padding:var(--tct-message-list-padding, var(--comp-list-default-padding))}:host(:not([appearance])),:host([appearance=standard]){--comp-default-margin:var(--app-scale-3x, 5px) 0;margin:var(--tct-message-margin, var(--comp-default-margin))}:host(:not([appearance])) .message,:host([appearance=standard]) .message{--comp-icon-size:var(--tct-message-icon-size, var(--t-message-icon-size, 24px));--comp-padding:var(--tct-message-padding, var(--t-message-padding, var(--app-scale-3x, 15px)));grid-template-columns:var(--comp-icon-size) 1fr;padding:var(--comp-padding);padding-bottom:calc(var(--comp-padding) - var(--tct-scale-1, var(--app-scale-1x, 5px)))}:host(:not([appearance])) ::slotted(ul),:host([appearance=standard]) ::slotted(ul){--comp-list-default-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-message-list-margin, var(--comp-list-default-margin))}:host([appearance=minimal]){margin:0}:host([appearance=minimal]) .message{padding:var(--tct-message-minimal-padding, var(--t-message-minimal-padding, var(--app-scale-2x, 10px)));grid-template-columns:1fr}:host([appearance=minimal]) ::slotted(ul){margin:var(--tct-scale-1, var(--app-scale-1x, 5px)) 0}:host(:not([type])),:host([type=info]){--comp-info-color:#0079c1;--comp-bar-color:var(--tct-message-info-bar-color, var(--const-stoplight-info, var(--comp-info-color)));--comp-message-background:var(--tct-message-info-background, var(--tct-message-background, color-mix(in srgb, var(--t-base, #FFFFFF), var(--comp-bar-color) 10%)))}:host(:not([type])) .message-icon,:host([type=info]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-info, var(--const-stoplight-info, var(--comp-info-color)));--tct-icon-stroke-secondary:var(--tct-stoplight-info, var(--const-stoplight-info, var(--comp-info-color)))}:host([type=success]){--comp-success-color:#0e8a00;--comp-bar-color:var(--tct-message-success-bar-color, var(--const-stoplight-success, var(--comp-success-color)));--comp-message-background:var(--tct-message-success-background, var(--tct-message-background, color-mix(in srgb, var(--t-base, #FFFFFF), var(--comp-bar-color) 10%)))}:host([type=success]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-success, var(--const-stoplight-success, var(--comp-success-color)));--tct-icon-stroke-secondary:var(--tct-stoplight-success, var(--const-stoplight-success, var(--comp-success-color)))}:host([type=warning]){--comp-warning-color:#c35500;--comp-bar-color:var(--tct-message-warning-bar-color, var(--const-stoplight-warning, var(--comp-warning-color)));--comp-message-background:var(--tct-message-warning-background, var(--tct-message-background, color-mix(in srgb, var(--t-base, #FFFFFF), var(--comp-bar-color) 10%)))}:host([type=warning]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-warning, var(--const-stoplight-warning, var(--comp-warning-color)));--tct-icon-stroke-secondary:var(--tct-stoplight-warning, var(--const-stoplight-warning, var(--comp-warning-color)))}:host([type=error]),:host([type=danger]){--comp-error-color:#d20a0a;--comp-bar-color:var(--tct-message-error-bar-color, var(--const-stoplight-alert, var(--comp-error-color)));--comp-message-background:var(--tct-message-error-background, var(--tct-message-background, color-mix(in srgb, var(--t-base, #FFFFFF), var(--comp-bar-color) 10%)))}:host([type=error]) .message-icon,:host([type=danger]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, var(--comp-error-color)));--tct-icon-stroke-secondary:var(--tct-stoplight-error, var(--const-stoplight-alert, var(--comp-error-color)))}`;
 
 const Q2Message = class {
     constructor(hostRef) {

package/dist/esm/q2-pagination.entry.js

@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, g as getElement } from './i
 import { n as nextPaint, o as overrideFocus, i as isEventFromElement, b as handleRenamedProp, l as loc } from './index-CP8pXJ-l.js';
 import { m as mirrorEmit } from './mirror-emit-DUjY_ucm.js';
 
-const q2PaginationCss = () => `*{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))}`;
+const q2PaginationCss = () => `*{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))}`;
 
 const Q2Pagination = class {
     constructor(hostRef) {
@@ -15,7 +15,9 @@ const Q2Pagination = class {
         this.disabled = false;
         this.checkSize = () => {
             const { hostElement, containerElement } = this;
-            const isOverflowing = this.containerWidth > hostElement.clientWidth;
+            const fontSize = parseFloat(getComputedStyle(containerElement).fontSize);
+            // Reserve enough space for the full controls as the text grows.
+            const isOverflowing = this.containerWidth > hostElement.clientWidth || hostElement.clientWidth < fontSize * 42;
             this.isSmall = isOverflowing;
             nextPaint(() => {
                 const currentContainerWidth = containerElement.clientWidth;
@@ -70,7 +72,9 @@ const Q2Pagination = class {
         }
     }
     componentDidLoad() {
+        var _a;
         this.containerWidth = this.containerElement.clientWidth;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.containerElement);
         overrideFocus(this.hostElement);
     }
     // #endregion
@@ -210,6 +214,8 @@ const Q2Pagination = class {
         const classes = ['container'];
         if (this.stacked)
             classes.push('stacked');
+        if (this.isSmall)
+            classes.push('small');
         return classes;
     }
     get currentRange() {
@@ -313,7 +319,7 @@ const Q2Pagination = class {
                 total,
             });
         }
-        return (h("nav", { key: '647c141a9df399b3764fdc90c5ae05f113e0019d', class: this.containerClasses.join(' '), ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: 'fd595002af27dd639391665573433783342d2aee', class: "description", "test-id": "description" }, pagesOnly
+        return (h("nav", { key: 'a427944d7134621fe5c1cc469d554cf60ea69271', class: this.containerClasses.join(' '), ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: 'ab5e3a0dc0a8c3ab99c8d6754097c37ae1c10193', class: "description", "test-id": "description" }, pagesOnly
             ? loc('tecton.element.pagination.pages', {
                 current: page,
                 total: totalPages,
@@ -322,10 +328,10 @@ const Q2Pagination = class {
                 range: currentRange,
                 recordType: recordType.toLowerCase(),
                 total: total.toLocaleString(),
-            })), h("div", { key: 'da4c7137ed566532a9471a7b83a63c49c51c8e82', class: "controls" }, h("div", { key: 'ef59aadb7b6cfb82707ffb1ee9e1626428a84801', class: "btn-group" }, h("q2-btn", { key: 'e5d551764bec56fed3dc34684c4ff2cdfadd95ea', ref: el => (this.firstPageBtn = el), label: loc('tecton.element.pagination.goToFirstPage'), disabled: disabled || onFirstPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { key: '7423721c4c3082b8f0fdea5d6bde9fc62640fa24', type: "chevron-double-left" })), h("q2-btn", { key: '90b3544e9983fa652f225eda9d18d08883b31c39', ref: el => (this.prevPageBtn = el), label: prevButtonLabel, disabled: disabled || onFirstPage, onTctClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: '6535f2c3745421cbf1dd5750e3ab8d08288bc148', type: "chevron-left" }))), h("div", { key: 'd4a581982a62f360e5b693a110a7d75eaf0ba24c', class: "input-display", hidden: isFullViewHidden }, h("span", { key: '45a28afc71ee038d829cbe64550bf929210002a9', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: 'ba5df7f89aed5be2f882057d8cf344981e3f1127', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: '686c5c8891bd64a40ba9abe8436475bf3ef8fd38', ref: el => (this.inputField = el), type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${loc('tecton.element.pagination.page')} (${loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => event.stopImmediatePropagation(), onTctChange: event => {
+            })), h("div", { key: 'e84213e3dbeac1bb54fcd8244e486274869c5fa5', class: "controls" }, h("div", { key: 'f5a4cb3a4d467b2ce412afa2bb016e1843ccb364', class: "btn-group" }, h("q2-btn", { key: 'b4d315503de340e482ffb042d3cd4dbaff1aa3eb', ref: el => (this.firstPageBtn = el), label: loc('tecton.element.pagination.goToFirstPage'), disabled: disabled || onFirstPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { key: '8d437e9a6b00999eee091accd8581b84a2dbe4fe', type: "chevron-double-left" })), h("q2-btn", { key: 'bd91788b84cbe8a55fb7e7b53342a6c9a75e3694', ref: el => (this.prevPageBtn = el), label: prevButtonLabel, disabled: disabled || onFirstPage, onTctClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: 'bf9285d825da06e43e330b565ecf46f72a9ad930', type: "chevron-left" }))), h("div", { key: '76ce1e31814ec56e7d060200ee8a87c720c5fc1e', class: "input-display", hidden: isFullViewHidden }, h("span", { key: 'b1768b78ca08e2f76892823a165448c298d2a5b4', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: '8909fdeaf8832ec6a104ffad86258d0d3034fbb3', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: '96e0ce1764dc542fcac5a516b608b379bd1453a9', ref: el => (this.inputField = el), type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${loc('tecton.element.pagination.page')} (${loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => event.stopImmediatePropagation(), onTctChange: event => {
                 event.stopPropagation();
                 this.handlePageChange(event.detail.value);
-            }, "test-id": "pageInput", current: "page", disabled: disabled })), h("span", { key: '59853a0308d1f97b6722f40c29219d887842c54c', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: '17fa28deff49d5a3a28b6d66b5639428a309057a', class: "btn-group" }, h("q2-btn", { key: '0e5eca8dc228a8285015d5941d9c4e44af5e5353', ref: el => (this.nextPageBtn = el), label: nextButtonLabel, disabled: disabled || onLastPage, onTctClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: '9a42a4961ac7efd40c176145a39f0c63540daf14', type: "chevron-right" })), h("q2-btn", { key: 'fe0c41536c25d7deffa26fdab4f91405e5b197d6', ref: el => (this.lastPageBtn = el), label: "tecton.element.pagination.goToLastPage", disabled: disabled || onLastPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { key: '5beccc87ad5ef95350cb21d969b15c0996911126', type: "chevron-double-right" })))), h("div", { key: 'd60b56b2f8173ea2a6fcf3cf4fd1b5f2807fbc5c', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, showPerPageSelect && this.renderPerPage())));
+            }, "test-id": "pageInput", current: "page", disabled: disabled })), h("span", { key: '3914f78404deab10b4173df5b16c205067c7e15e', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: 'b5b441d213d99d04b18c976628ba07142e00856f', class: "btn-group" }, h("q2-btn", { key: '3299b27a7d24045f2258288e86702a4b7e6d1e37', ref: el => (this.nextPageBtn = el), label: nextButtonLabel, disabled: disabled || onLastPage, onTctClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: 'd63e7679e5087a1a03bb17fd0a7c24c0d07bdf87', type: "chevron-right" })), h("q2-btn", { key: 'f575528380b7d239db48f49353d71b88ba0e2d9e', ref: el => (this.lastPageBtn = el), label: "tecton.element.pagination.goToLastPage", disabled: disabled || onLastPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { key: 'c76d0fe0dff9095f893604fc41cd4d615075045e', type: "chevron-double-right" })))), h("div", { key: '71ad1c246e16a1c84318d7ccf75d50a37246af12', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, showPerPageSelect && this.renderPerPage())));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/q2-pill.entry.js

@@ -3,7 +3,7 @@ import { a as resizeIframe, o as overrideFocus, i as isEventFromElement, w as wa
 import { m as mirrorEmit } from './mirror-emit-DUjY_ucm.js';
 import { a as showActionSheetList, s as shouldShowActionSheet } from './action-sheet-DuQ7VZ08.js';
 
-const q2PillCss = () => `*{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}`;
+const q2PillCss = () => `*{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}`;
 
 const Q2Pill = class {
     constructor(hostRef) {
@@ -411,7 +411,7 @@ const Q2Pill = class {
             wrapperClassNames.push('has-icon');
         if (optionCount)
             wrapperClassNames.push('has-options');
-        return (h("click-elsewhere", { key: '8cba59cde3746d0397305512334eb56357e9e5d4', onChange: this.onClickElsewhere }, h("div", { key: '391da54f9fd870e223765e6266291dff9775abe6', class: wrapperClassNames.join(' ') }, h("div", { key: '06431fd76c0a9d30833756407c89ff59609bc3a3', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: '609557b9206c91511e78e26c990230e61f7e5c19', class: "btn-primary", "test-id": "btn-control", type: "button", role: (optionCount && 'combobox') || undefined, ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleFocusOut, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": (optionCount && 'option-list') || undefined, "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": text, "aria-pressed": !optionCount ? `${!!active}` : undefined, "aria-describedby": (optionCount && 'option-description') || undefined }, h("slot", { key: 'e1f4c57b7526f714cf0242e101ec0f5c39ebafa5', name: "decorator" }), truncatedText)), this.renderIcon(), !!optionCount && this.renderHiddenElement()), this.optionCount > 0 && (h("q2-popover", { key: '2777b45efbd94516a633ca4ff1e2d6a452ecbd81', ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, "max-height": this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, onFocusout: this.handleFocusOut }, h("div", { key: '54d2c1c8814be9265b4ed8092bd3360da76cc2b0', class: "popover-content" }, h("div", { key: 'fb95b6f0ab78119f0bf944fa67ec0bcf391088dc', ref: el => (this.popoverTopContainer = el), class: "popover-top-container", tabindex: "-1", hidden: !this.hasPopoverTop, onKeyDown: this.handleSlotKeydown }, h("slot", { key: '8e522c96fa1241e7c05fbc989d59f71ec2bc1d98', name: "popover-top" })), h("q2-option-list", { key: '5e7a827ac08395399e0b04fa9074f5b6a3fa1c48', type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), onPopoverState: this.onPopoverState, label: loc('tecton.element.optionList.label', [this.optionListLabel]) }, h("slot", { key: '4197780a058b3937ac748b53aef6afc5eabd8c7a' })), h("div", { key: '78992c83515dcfe6acbf7e09a5efced2d65c1903', ref: el => (this.popoverBottomContainer = el), class: "popover-bottom-container", tabindex: "-1", hidden: !this.hasPopoverBottom, onKeyDown: this.handleSlotKeydown }, h("slot", { key: '553f959ec8b866111b2e5c5f9090d8ddee5fd208', name: "popover-bottom" })))))));
+        return (h("click-elsewhere", { key: '8cba59cde3746d0397305512334eb56357e9e5d4', onChange: this.onClickElsewhere }, h("div", { key: '391da54f9fd870e223765e6266291dff9775abe6', class: wrapperClassNames.join(' ') }, h("div", { key: '06431fd76c0a9d30833756407c89ff59609bc3a3', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: '609557b9206c91511e78e26c990230e61f7e5c19', class: "btn-primary", "test-id": "btn-control", type: "button", role: (optionCount && 'combobox') || undefined, ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleFocusOut, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": (optionCount && 'option-list') || undefined, "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": text, "aria-pressed": !optionCount ? `${!!active}` : undefined, "aria-describedby": (optionCount && 'option-description') || undefined }, h("slot", { key: 'e1f4c57b7526f714cf0242e101ec0f5c39ebafa5', name: "decorator" }), h("span", { key: '98a770f6f4fabe04d886f66d57e76a4febb31353', class: "pill-label" }, truncatedText))), this.renderIcon(), !!optionCount && this.renderHiddenElement()), this.optionCount > 0 && (h("q2-popover", { key: '30fb581a9eeb008262bbb3fc4a82537f1b78af28', ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, "max-height": this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, onFocusout: this.handleFocusOut }, h("div", { key: '6fc858b2064b78b2ccaafd35aefaa2e4c9e1ea07', class: "popover-content" }, h("div", { key: '75134f4a5d4296f6f69a70197bf1bd450c05a8e0', ref: el => (this.popoverTopContainer = el), class: "popover-top-container", tabindex: "-1", hidden: !this.hasPopoverTop, onKeyDown: this.handleSlotKeydown }, h("slot", { key: 'f570a1a19b97bd7eb4b2ae38975db95ff1153b00', name: "popover-top" })), h("q2-option-list", { key: 'aca9ff86903dcf5b4e5138541ac20dac68955fb7', type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), onPopoverState: this.onPopoverState, label: loc('tecton.element.optionList.label', [this.optionListLabel]) }, h("slot", { key: '89c5f3739c36206ceecb06245ba3052491b89898' })), h("div", { key: '8f98c6b4a59c2c0675b5648aed4a1110f0136d87', ref: el => (this.popoverBottomContainer = el), class: "popover-bottom-container", tabindex: "-1", hidden: !this.hasPopoverBottom, onKeyDown: this.handleSlotKeydown }, h("slot", { key: '75ef6c235c31755e0a5b9905db16e02ff8c4eea3', name: "popover-bottom" })))))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/q2-relative-time.entry.js

@@ -152,7 +152,7 @@ const Q2RelativeTime = class {
     // #region Render Methods
     render() {
         const { shouldShow, displayedMessage } = this;
-        return h(Fragment, { key: 'c6d24ac6d794284c3f0ea654f1999ff6e201f8b1' }, shouldShow ? h("time", { dateTime: displayedMessage }, displayedMessage) : null);
+        return h(Fragment, { key: 'e32fc9201354f10456368f47c0a7b6e50fd3eeb2' }, shouldShow ? h("time", { dateTime: displayedMessage }, displayedMessage) : null);
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {