q2-tecton-elements 1.73.0 → 1.73.1

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

@@ -325,7 +325,7 @@ export class Q2StepperVertical {
         return (h("li", { role: "presentation" }, h("button", { class: stepClasses.join(' '), type: "button", "aria-labelledby": labelledBy, "aria-describedBy": descriptionId, "aria-label": btnLabel, "aria-selected": `${isCurrentStep}`, "aria-expanded": !!pane.children.length ? `${isExpanded}` : null, id: id, "aria-disabled": isLocked ? 'true' : null, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => !isLocked && this.onStepKeyDown(ev, id), onClick: ev => !isPaneDisabled && !isLocked && this.onStepClick(ev, id) }, label && (h(Fragment, null, h("span", { class: "sr-only", id: positionId }, positionLabel), h("span", { class: "sr-only", id: statusId }, statusLabel))), statusIcon ? (h("div", { class: "step-icon" }, h("q2-icon", { "aria-hidden": "true", type: statusIcon }))) : (h("div", { class: "step-bubble" }, stepNumber)), label && (h("div", null, h("div", { class: "step-label", id: labelId, innerHTML: sanitizeHTMLString(stepLabel) }), description && (h("div", { class: "step-description", id: descriptionId, innerHTML: sanitizeHTMLString(description) }))))), this.renderSpacer(pane, isExpanded, isLastStep)));
     }
     render() {
-        return (h(Fragment, { key: '318ce778645240cfb969f39c7df5326691b6c5ed' }, h("ul", { key: '3af2a138e648b887b3d8f96cf2b06bb6f11d1159', role: "tablist" }, this.structuredPanes.map((pane, index) => this.renderStepBtn(pane, index))), h("div", { key: '628d3fb7485c7648d31b7a4935476a61cdfef7b4', role: "list" }, h("slot", { key: '9d616d4a7234dee7715a696d0a17d37914741b1a' }))));
+        return (h(Fragment, { key: 'd2e82613e91ef3acf210781f807807b0fba8e7fc' }, h("ul", { key: '1ad1e36d0fca4b0c1cf793de43d9ea9ccb76974f', role: "tablist" }, this.structuredPanes.map((pane, index) => this.renderStepBtn(pane, index))), h("div", { key: 'ee710c6cb41011be7a8223ec817563cfeaeb6b71', role: "list" }, h("slot", { key: '0d1f6f53b73f72f163fc219de8db9736f669720d' }))));
     }
     static get is() { return "q2-stepper-vertical"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-surface/q2-surface.js

@@ -84,7 +84,7 @@ export class Q2Surface {
     // #endregion
     // #region Render Methods
     render() {
-        return (h(Host, { key: 'ee34e7472208140fc2203e0494140778c0c16756' }, h("div", { key: '0909c642dd27cbc96f7a8ea25f5d7f712395ed19', class: "container", role: this.clickable ? 'button' : undefined, tabIndex: this.clickable ? 0 : undefined }, h("slot", { key: 'fbba5735e98b065121f0b73ef926b6546aeab82c' }))));
+        return (h(Host, { key: 'fba508447ca646c22aa4a14872d78e02294a2fa1' }, h("div", { key: '46ac755e4c071b2345be0ba4272f283ac2758a82', class: "container", role: this.clickable ? 'button' : undefined, tabIndex: this.clickable ? 0 : undefined }, h("slot", { key: '699fdd1427248cdff8ecf1b3b1ca1d4a892dd763' }))));
     }
     static get is() { return "q2-surface"; }
     static get encapsulation() { return "shadow"; }

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

@@ -335,7 +335,7 @@ export class Q2TabContainer {
     }
     render() {
         const isVertical = this.computedOrientation === 'vertical';
-        return (h(Fragment, { key: '03d43399332adeda98bb8d9e20053a9c6d49fcce' }, h("div", { key: 'e0a8ef7f09a83f703a4b20f54c32522ddb1c5c50', class: "tab-container" }, this.scrollEnabled && (h(Fragment, { key: 'ad75ef49a54bfe0f862e19123e2a4770e17bf4a2' }, h("div", { key: '0a699d7dff2af9e01eb0c9a4727c0aa586068d97', class: "gradient-left", hidden: !this.showScrollBack }), h("div", { key: '758388b43d96757cd402eac4c8c881b20853e8d2', class: "gradient-right", hidden: !this.showScrollForward }), h("q2-btn", { key: '0738c515ffc60c9fb82941ce1cb104924c3a85ef', class: "btn-left", hidden: !this.showScrollBack, onTctClick: () => this.onScrollBtnClick('back') }, h("q2-icon", { key: '95820c6bad13d98ad94e4722026b00e1fedb720e', type: isVertical ? 'chevron-up' : 'chevron-left', label: isVertical ? 'scroll up' : 'scroll left' })), h("q2-btn", { key: '2aabca6f28a8acffd6565870b56424c410f4ebae', class: "btn-right", hidden: !this.showScrollForward, onTctClick: () => this.onScrollBtnClick('forward') }, h("q2-icon", { key: '94561888012314b3e3503c7f0b64444f3a7b7c96', type: isVertical ? 'chevron-down' : 'chevron-right', label: isVertical ? 'scroll down' : 'scroll right' })))), h("ul", { key: 'd58936a795d74807740d291b93bb739d66fbbe24', onScroll: this.checkScrollState, ref: el => (this.listElement = el), class: this.noPrint ? 'no-print' : null, role: "tablist", "aria-orientation": this.computedOrientation }, this.tabs.map((tab, index) => this.renderTab(tab, index)))), h("div", { key: 'ccd952b3f0ef0e639e0f86957841ad548fe65eb5', class: "tab-content" }, h("slot", { key: '24deecd3894184e816d1d8c5e5257aab382ed055', onSlotchange: () => this.onSlotChange() }))));
+        return (h(Fragment, { key: '37c84e750a2494ea2b4302fd99e0cebc443d58ce' }, h("div", { key: '249effad5ab4e880c2c203ac0e4024557c310679', class: "tab-container" }, this.scrollEnabled && (h(Fragment, { key: '10a7d53d5bde829e5897722cd924d40ce90a0b82' }, h("div", { key: 'b2acc786c41a9d1a8d3e951fdc36ecea3a304664', class: "gradient-left", hidden: !this.showScrollBack }), h("div", { key: 'fa70173c7d845f88417c6b6b6d54884ead80f34f', class: "gradient-right", hidden: !this.showScrollForward }), h("q2-btn", { key: 'd953c160ff42503dce5bb7c60d8234bdd9196d73', class: "btn-left", hidden: !this.showScrollBack, onTctClick: () => this.onScrollBtnClick('back') }, h("q2-icon", { key: '3980ef873b5d7ae6c50eb868455839344dda9701', type: isVertical ? 'chevron-up' : 'chevron-left', label: isVertical ? 'scroll up' : 'scroll left' })), h("q2-btn", { key: 'a3b1f46355ab1de2f73ac7529b734b684194093f', class: "btn-right", hidden: !this.showScrollForward, onTctClick: () => this.onScrollBtnClick('forward') }, h("q2-icon", { key: 'a2ec50ff7e0cce3716ba890c626fa56e62ecddbb', type: isVertical ? 'chevron-down' : 'chevron-right', label: isVertical ? 'scroll down' : 'scroll right' })))), h("ul", { key: 'e42bbb379d396a25b3af96985504a8f4bae1bba0', onScroll: this.checkScrollState, ref: el => (this.listElement = el), class: this.noPrint ? 'no-print' : null, role: "tablist", "aria-orientation": this.computedOrientation }, this.tabs.map((tab, index) => this.renderTab(tab, index)))), h("div", { key: '7d1f6ac5262cccb0b7087b3d93f33e46390814af', class: "tab-content" }, h("slot", { key: 'fa341fadca5ba04fe21ef7186cc0e15b5c7357db', onSlotchange: () => this.onSlotChange() }))));
     }
     static get is() { return "q2-tab-container"; }
     static get encapsulation() { return "shadow"; }

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

@@ -19,7 +19,7 @@ export class Q2TabPane {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'a1ca82c1b98634b33d0ded7c459e151bbcba82ab', 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}` }, h("slot", { key: '4893e7153f387cfa726ba354cb53274d8f907b94' })));
+        return (h("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}` }, h("slot", { key: '9c9dc847674f0a829feb822808f7e3dac9ac3263' })));
     }
     static get is() { return "q2-tab-pane"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-tag/q2-tag.js

@@ -197,7 +197,7 @@ export class Q2Tag {
         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' })))))));
     }
     static get is() { return "q2-tag"; }
     static get encapsulation() { return "shadow"; }

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

@@ -51,9 +51,9 @@ export class TectonTabPane {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'b55643965ef49af2e41a683686db00b97e1c90b7', 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}` }, this.selected && this.provided !== undefined && !this.provided && (h("div", { key: 'f04f1594eba66d962d9adbab48bf3559f658c650' }, h("slot", { key: '08804102412a6b57ac9b9db2002d1608f8b22c19', name: "loading-wrapper" }), h("iframe", { key: 'a2524435de8072fb27ebdcc9762a1f20367df098', hidden: true, name: this.moduleId, scrolling: "no", src: this.showForm && this.authPayload.length ? '' : this.url || '', "data-module-id": this.moduleId, style: this.minHeight ? { minHeight: this.minHeight } : null, onLoad: this.onIFrameLoad, title: this.iframeTitle, allow: "geolocation; camera" }), this._showForm && this.authPayload ? (h("form", { hidden: true, method: "post", action: this.url, target: this.moduleId, encType: "multipart/form-data" }, this.authPayload.map(element => {
+        return (h("div", { key: '313fa13779cd8ecb5439b1a96cb7aaf17f6c871b', 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}` }, this.selected && this.provided !== undefined && !this.provided && (h("div", { key: '5207414b205d1e9a25fb1455ca21ff7cc913a5fd' }, h("slot", { key: 'd883e909e38981f315bc1cab9ef57957a616c0d5', name: "loading-wrapper" }), h("iframe", { key: '2f0233d04d3c5be619cb54bfe637252a7ef42d77', hidden: true, name: this.moduleId, scrolling: "no", src: this.showForm && this.authPayload.length ? '' : this.url || '', "data-module-id": this.moduleId, style: this.minHeight ? { minHeight: this.minHeight } : null, onLoad: this.onIFrameLoad, title: this.iframeTitle, allow: "geolocation; camera" }), this._showForm && this.authPayload ? (h("form", { hidden: true, method: "post", action: this.url, target: this.moduleId, encType: "multipart/form-data" }, this.authPayload.map(element => {
             return (h("input", { type: "hidden", value: element.value, name: element.key }));
-        }))) : (''))), h("div", { key: '59e9d5ddbabadb0e66615d998403d267c259f937', class: "slot-wrapper", hidden: this.selected && this.provided !== undefined && !this.provided }, h("slot", { key: '450c5724cf32ba05a2fc93b8adeba83b08e871e4' }))));
+        }))) : (''))), h("div", { key: 'ae5ee8d5a5a7d1b798f4111b33120d301b86a16b', class: "slot-wrapper", hidden: this.selected && this.provided !== undefined && !this.provided }, h("slot", { key: 'cb1057d2b6cb467a25da1577610bfcc5b6300047' }))));
     }
     static get is() { return "tecton-tab-pane"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/q2-avatar2.js

@@ -1,10 +1,10 @@
-import { proxyCustomElement as a, HTMLElement as t, h as r, transformTag as e } from "@stencil/core/internal/client";
+import { proxyCustomElement as t, HTMLElement as a, h as r, transformTag as e } from "@stencil/core/internal/client";
 
 import { d as i } from "./q2-icon2.js";
 
-const o =  a(class extends t {
-  constructor(a) {
-    super(), !1 !== a && this.__registerHost(), this.__attachShadow(), 
+const o =  t(class extends a {
+  constructor(t) {
+    super(), !1 !== t && this.__registerHost(), this.__attachShadow(), this.initialsFontScale = 1, 
     // #endregion
     // #region State Properties
     this.badSrc = !1, this.hasDecorator = !1, this.isLoaded = !1, 
@@ -22,7 +22,8 @@ const o =  a(class extends t {
   // #endregion
   // #region Component Lifecycle Events
   disconnectedCallback() {
-    this.decoratorObserver && this.decoratorObserver.disconnect();
+    var t;
+    this.decoratorObserver && this.decoratorObserver.disconnect(), null === (t = this.initialsResizeObserver) || void 0 === t || t.disconnect();
   }
   componentWillLoad() {
     this.checkDecorator();
@@ -30,6 +31,13 @@ const o =  a(class extends t {
   componentDidLoad() {
     this.setupDecoratorObserver();
   }
+  componentDidRender() {
+    var t, a, r;
+    const e = null === (t = this.el.shadowRoot) || void 0 === t ? void 0 : t.querySelector(".avatar-initials text");
+    e !== this.observedInitialsText && (null === (a = this.initialsResizeObserver) || void 0 === a || a.disconnect(), 
+    this.observedInitialsText = e, this.initialsFontScale = 1, e && "function" == typeof ResizeObserver && (null !== (r = this.initialsResizeObserver) && void 0 !== r || (this.initialsResizeObserver = new ResizeObserver((() => this.fitInitials()))), 
+    this.initialsResizeObserver.observe(e))), this.fitInitials();
+  }
   // #endregion
   // #region Watchers
   srcDidUpdate() {
@@ -38,18 +46,24 @@ const o =  a(class extends t {
   // #endregion
   // #region Local Methods
   get computedInitials() {
-    const {initials: a, name: t} = this;
-    if (!a && !t) return;
+    const {initials: t, name: a} = this;
+    if (!t && !a) return;
     let r = "";
-    if (a) r = a.substr(0, 4); else if (t) {
-      const a = t.split(" "), e = a[0][0], i = a.length > 1 ? a[a.length - 1][0] : void 0;
+    if (t) r = t.substr(0, 4); else if (a) {
+      const t = a.split(" "), e = t[0][0], i = t.length > 1 ? t[t.length - 1][0] : void 0;
       r += e, i && (r += i);
     }
     return r = null == r ? void 0 : r.toUpperCase(), r;
   }
   checkDecorator() {
-    const a = Array.from(this.el.children).filter((a => "decorator" === a.getAttribute("slot")));
-    this.hasDecorator = a.length > 0;
+    const t = Array.from(this.el.children).filter((t => "decorator" === t.getAttribute("slot")));
+    this.hasDecorator = t.length > 0;
+  }
+  fitInitials() {
+    const t = this.observedInitialsText;
+    if (!t) return;
+    const {x: a, y: r, width: e, height: i} = t.getBBox(), o = Math.max(50 - a, a + e - 50, 50 - r, r + i - 50) / this.initialsFontScale, s = o > 50 ? 48 / o : 1;
+    Math.abs(s - this.initialsFontScale) < 1e-5 || (this.initialsFontScale = s, 1 === s ? t.style.removeProperty("font-size") : t.style.fontSize = `calc(var(--tct-avatar-font-size, var(--const-px-40, 40px)) * ${s})`);
   }
   setupDecoratorObserver() {
     // Set up MutationObserver to watch for changes to the host element's children
@@ -67,18 +81,18 @@ const o =  a(class extends t {
   // #endregion
   // #region Render Methods
   render() {
-    const {computedInitials: a} = this, t = this.src && !this.badSrc, e = this.isLoaded, i = (this.name || this.initials) && (!this.src || this.badSrc), o = !this.name && !this.initials && (!this.src || this.badSrc);
+    const {computedInitials: t} = this, a = this.src && !this.badSrc, e = this.isLoaded, i = (this.name || this.initials) && (!this.src || this.badSrc), o = !this.name && !this.initials && (!this.src || this.badSrc);
     return r("div", {
-      key: "2a10f13b2ca606dab3563d026910d909e37ddcb0",
+      key: "d5a32129734a7923c61ecfbace6af0799051b8c9",
       class: `avatar-wrapper size-${this.size}`
     }, this.hasDecorator && r("div", {
-      key: "e5deb3da74508a5731238724895ca9f1ab8b7a50",
+      key: "a20e35425d03a0b45df79846b1613be993935bab",
       class: "decorator"
     }, r("slot", {
-      key: "3cc01e88891a09f7917416a0acd0940e79decf26",
+      key: "082a7d3022be63825ac0237b0f458eb3fc328737",
       name: "decorator"
-    })), t && r("img", {
-      key: "cbed4e936072bca7bd23bd18b8679d0539c3fbd2",
+    })), a && r("img", {
+      key: "bc092a5fe3996d53f89bc69146aceb2af53b571a",
       class: "" + (e ? "avatar-img" : "avatar-img-default"),
       "test-id": "userImage",
       src: this.src,
@@ -86,26 +100,26 @@ const o =  a(class extends t {
       onLoad: this.onLoad,
       alt: this.name || ""
     }), i && r("svg", {
-      key: "f1876a7748d3806e21e48f3de7b70c6faea499ca",
+      key: "385335ea2b6d35d48179cbea4aa3ac3d99e56093",
       viewBox: "0 0 100 100",
       preserveAspectRatio: "xMidYMid meet",
       "test-id": "userInitials",
-      class: `avatar-initials initials-size-${a.length}`,
+      class: `avatar-initials initials-size-${t.length}`,
       "aria-label": this.name,
       "aria-hidden": !this.name && "true"
     }, r("text", {
-      key: "a120d991968334f383efcb9d5ef920c7ee542880",
+      key: "fb331a07ddc746787341e31febcf2a267f8f0e33",
       x: "50",
       y: "50",
       "dominant-baseline": "central",
       "text-anchor": "middle",
       "aria-hidden": "true"
-    }, a)), o && r("div", {
-      key: "598457dc937327172221fab317246d1085a57b02",
+    }, t)), o && r("div", {
+      key: "da7a75cc5e5b4e62eeaa63c399ed0dc6c869e99c",
       "test-id": "fallbackIcon",
       class: "fallback"
     }, r("q2-icon", {
-      key: "578836c985252ea19c06d5499e6ad8f9c311e09f",
+      key: "626219dd1528fa7e39d298856be8205f21a6708e",
       type: this.icon
     })));
   }
@@ -139,14 +153,14 @@ const o =  a(class extends t {
 
 function defineCustomElement() {
   if ("undefined" == typeof customElements) return;
-  [ "q2-avatar", "q2-icon" ].forEach((a => {
-    switch (a) {
+  [ "q2-avatar", "q2-icon" ].forEach((t => {
+    switch (t) {
      case "q2-avatar":
-      customElements.get(e(a)) || customElements.define(e(a), o);
+      customElements.get(e(t)) || customElements.define(e(t), o);
       break;
 
      case "q2-icon":
-      customElements.get(e(a)) || i();
+      customElements.get(e(t)) || i();
     }
   }));
 }

package/dist/components/q2-input2.js

@@ -1872,7 +1872,7 @@ function formatCurrency(t, r = "USD", a = !1) {
     prefix: "+44 "
   },
   IN: {
-    mask: "###### #####",
+    mask: "##### #####?",
     prefix: "+91 "
   },
   IO: {

package/dist/components/q2-message2.js

@@ -90,7 +90,7 @@ const d =  e(class extends a {
     return this;
   }
   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: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)))}';
+    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: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)))}';
   }
 }, [ 257, "q2-message", {
   appearance: [ 513 ],

package/dist/components/q2-pagination.js

@@ -12,9 +12,9 @@ import { d as g } from "./q2-btn2.js";
 
 import { d as u } from "./q2-icon2.js";
 
-import { d as f } from "./q2-input2.js";
+import { d as m } from "./q2-input2.js";
 
-import { d as m } from "./q2-loading2.js";
+import { d as f } from "./q2-loading2.js";
 
 import { d as b } from "./q2-option2.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
@@ -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;
@@ -227,7 +229,7 @@ const x =  t(class extends e {
   }
   render() {
     var t;
-    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, f = c < 2, m = 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,
@@ -244,12 +246,12 @@ const x =  t(class extends e {
       recordType: s.toLowerCase(),
       total: r
     })), a("nav", {
-      key: "647c141a9df399b3764fdc90c5ae05f113e0019d",
+      key: "a427944d7134621fe5c1cc469d554cf60ea69271",
       class: this.containerClasses.join(" "),
       ref: t => this.containerElement = t,
       "aria-label": l("tecton.element.pagination.title")
     }, a("div", {
-      key: "fd595002af27dd639391665573433783342d2aee",
+      key: "ab5e3a0dc0a8c3ab99c8d6754097c37ae1c10193",
       class: "description",
       "test-id": "description"
     }, e ? l("tecton.element.pagination.pages", {
@@ -260,47 +262,47 @@ const x =  t(class extends e {
       recordType: s.toLowerCase(),
       total: r.toLocaleString()
     })), a("div", {
-      key: "da4c7137ed566532a9471a7b83a63c49c51c8e82",
+      key: "e84213e3dbeac1bb54fcd8244e486274869c5fa5",
       class: "controls"
     }, a("div", {
-      key: "ef59aadb7b6cfb82707ffb1ee9e1626428a84801",
+      key: "f5a4cb3a4d467b2ce412afa2bb016e1843ccb364",
       class: "btn-group"
     }, a("q2-btn", {
-      key: "e5d551764bec56fed3dc34684c4ff2cdfadd95ea",
+      key: "b4d315503de340e482ffb042d3cd4dbaff1aa3eb",
       ref: t => this.firstPageBtn = t,
       label: l("tecton.element.pagination.goToFirstPage"),
-      disabled: u || f,
+      disabled: u || m,
       hidden: n,
       onTctClick: () => this.handlePageChange(1),
       "test-id": "firstPageBtn",
       "hide-label": !0
     }, a("q2-icon", {
-      key: "7423721c4c3082b8f0fdea5d6bde9fc62640fa24",
+      key: "8d437e9a6b00999eee091accd8581b84a2dbe4fe",
       type: "chevron-double-left"
     })), a("q2-btn", {
-      key: "90b3544e9983fa652f225eda9d18d08883b31c39",
+      key: "bd91788b84cbe8a55fb7e7b53342a6c9a75e3694",
       ref: t => this.prevPageBtn = t,
       label: v,
-      disabled: u || f,
+      disabled: u || m,
       onTctClick: () => this.handlePageChange(c - 1),
       "test-id": "prevPageBtn",
       "hide-label": !0
     }, a("q2-icon", {
-      key: "6535f2c3745421cbf1dd5750e3ab8d08288bc148",
+      key: "bf9285d825da06e43e330b565ecf46f72a9ad930",
       type: "chevron-left"
     }))), a("div", {
-      key: "d4a581982a62f360e5b693a110a7d75eaf0ba24c",
+      key: "76ce1e31814ec56e7d060200ee8a87c720c5fc1e",
       class: "input-display",
       hidden: n
     }, a("span", {
-      key: "45a28afc71ee038d829cbe64550bf929210002a9",
+      key: "b1768b78ca08e2f76892823a165448c298d2a5b4",
       "aria-hidden": "true"
     }, l("tecton.element.pagination.page")), a("div", {
-      key: "ba5df7f89aed5be2f882057d8cf344981e3f1127",
+      key: "8909fdeaf8832ec6a104ffad86258d0d3034fbb3",
       class: "input-wrapper",
       onClick: () => this.inputField.dispatchEvent(new FocusEvent("focus"))
     }, a("q2-input", {
-      key: "686c5c8891bd64a40ba9abe8436475bf3ef8fd38",
+      key: "96e0ce1764dc542fcac5a516b608b379bd1453a9",
       ref: t => this.inputField = t,
       type: "number",
       value: "" + c,
@@ -317,36 +319,36 @@ const x =  t(class extends e {
       current: "page",
       disabled: u
     })), a("span", {
-      key: "59853a0308d1f97b6722f40c29219d887842c54c",
+      key: "3914f78404deab10b4173df5b16c205067c7e15e",
       "aria-hidden": "true"
     }, l("tecton.element.pagination.ofPages", [ o.toLocaleString() ]))), a("div", {
-      key: "17fa28deff49d5a3a28b6d66b5639428a309057a",
+      key: "b5b441d213d99d04b18c976628ba07142e00856f",
       class: "btn-group"
     }, a("q2-btn", {
-      key: "0e5eca8dc228a8285015d5941d9c4e44af5e5353",
+      key: "3299b27a7d24045f2258288e86702a4b7e6d1e37",
       ref: t => this.nextPageBtn = t,
       label: b,
-      disabled: u || m,
+      disabled: u || f,
       onTctClick: () => this.handlePageChange(c + 1),
       "test-id": "nextPageBtn",
       "hide-label": !0
     }, a("q2-icon", {
-      key: "9a42a4961ac7efd40c176145a39f0c63540daf14",
+      key: "d63e7679e5087a1a03bb17fd0a7c24c0d07bdf87",
       type: "chevron-right"
     })), a("q2-btn", {
-      key: "fe0c41536c25d7deffa26fdab4f91405e5b197d6",
+      key: "f575528380b7d239db48f49353d71b88ba0e2d9e",
       ref: t => this.lastPageBtn = t,
       label: "tecton.element.pagination.goToLastPage",
-      disabled: u || m,
+      disabled: u || f,
       hidden: n,
       onTctClick: () => this.handlePageChange(o),
       "test-id": "lastPageBtn",
       "hide-label": !0
     }, a("q2-icon", {
-      key: "5beccc87ad5ef95350cb21d969b15c0996911126",
+      key: "c76d0fe0dff9095f893604fc41cd4d615075045e",
       type: "chevron-double-right"
     })))), a("div", {
-      key: "d60b56b2f8173ea2a6fcf3cf4fd1b5f2807fbc5c",
+      key: "71ad1c246e16a1c84318d7ccf75d50a37246af12",
       class: "per-page",
       hidden: n || !(null === (t = this.perPageIncrements) || void 0 === t ? void 0 : t.length)
     }, g && this.renderPerPage()));
@@ -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,7 +417,7 @@ 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) {
@@ -440,11 +442,11 @@ const q = x, defineCustomElement = function() {
       break;
 
      case "q2-input":
-      customElements.get(n(t)) || f();
+      customElements.get(n(t)) || m();
       break;
 
      case "q2-loading":
-      customElements.get(n(t)) || m();
+      customElements.get(n(t)) || f();
       break;
 
      case "q2-option":
@@ -465,4 +467,4 @@ const q = x, defineCustomElement = function() {
   }));
 };
 
-export { q as Q2Pagination, defineCustomElement }
+export { w as Q2Pagination, defineCustomElement }