q2-tecton-elements 1.70.2 → 1.71.0

package/dist/components/q2-option-list2.js

@@ -1,8 +1,8 @@
 import { proxyCustomElement as t, HTMLElement as e, createEvent as i, h as s, Host as n, transformTag as o } from "@stencil/core/internal/client";
 
-import { b as h } from "./component.js";
+import { b as a } from "./component.js";
 
-import { l as a, n as c, o as r, i as l, w as d, t as p } from "./index2.js";
+import { l as h, n as r, o as c, i as l, w as d, t as p } from "./index2.js";
 
 import { m as u } from "./mirror-emit.js";
 
@@ -15,7 +15,7 @@ const b =  t(class extends e {
       lastPressedAt: new Date
     }, this.scheduledAfterRender = [], 
     /** Determines the label that is applied to the option list for accessibility purposes. */
-    this.label = a("tecton.element.optionList.label"), 
+    this.label = h("tecton.element.optionList.label"), 
     /** A list of the selected options on the element. */
     this.selectedOptions = [], 
     /** Translates to the role of the option list */
@@ -42,7 +42,7 @@ const b =  t(class extends e {
           break;
         }
         "menu" === this.type ? (this.activeIndex = 0, this.openDropdownWithActiveElement(0)) : (this.setDefaultActiveElement(), 
-        c((() => this.popoverState.emit({
+        r((() => this.popoverState.emit({
           open: !0,
           action: "open"
         }))));
@@ -50,7 +50,7 @@ const b =  t(class extends e {
 
        case "Enter":
         "menu" === this.type ? (this.activeIndex = 0, this.openDropdownWithActiveElement(0)) : (this.setDefaultActiveElement(), 
-        c((() => this.popoverState.emit({
+        r((() => this.popoverState.emit({
           open: !0,
           action: "open"
         }))));
@@ -111,17 +111,17 @@ const b =  t(class extends e {
       (i || s) && t.stopPropagation();
     }, this.internalKeydownHandler = t => {
       t.stopPropagation();
-      const {activeIndex: e, customSearch: i, allOptions: s, allVisibleOptions: n, multiple: o} = this, {key: h, shiftKey: a} = t;
-      let c;
-      switch (h) {
+      const {activeIndex: e, customSearch: i, allOptions: s, allVisibleOptions: n, multiple: o} = this, {key: a, shiftKey: h} = t;
+      let r;
+      switch (a) {
        case " ":
         if (this.searchString && !this.multiple) {
           if (i) break;
-          this.searchOptions(h, !1);
+          this.searchOptions(a, !1);
           break;
         }
-        if (c = s.find((t => t.active)), !c || c.disabled) break;
-        if (this.selectOption(c), o) break;
+        if (r = s.find((t => t.active)), !r || r.disabled) break;
+        if (this.selectOption(r), o) break;
         this.hostElement.addEventListener("tctClick", (() => {
           this.popoverState.emit({
             open: !1,
@@ -133,8 +133,8 @@ const b =  t(class extends e {
         break;
 
        case "Enter":
-        if (c = s.find((t => t.active)), !c || c.disabled) break;
-        if (this.selectOption(c), o) break;
+        if (r = s.find((t => t.active)), !r || r.disabled) break;
+        if (this.selectOption(r), o) break;
         this.hostElement.addEventListener("tctClick", (() => {
           this.popoverState.emit({
             open: !1,
@@ -148,9 +148,9 @@ const b =  t(class extends e {
        case "ArrowUp":
        case "ArrowDown":
         // Guard: only process if an option is currently focused
-        const r = document.activeElement;
-        if (!this.allOptions.some((t => t === r))) return;
-        if (t.preventDefault(), "ArrowUp" === h) {
+        const c = document.activeElement;
+        if (!this.allOptions.some((t => t === c))) return;
+        if (t.preventDefault(), "ArrowUp" === a) {
           if (n[0].active) break;
           if (void 0 === e) {
             this.setDefaultActiveElement();
@@ -192,7 +192,7 @@ const b =  t(class extends e {
         break;
 
        case "Tab":
-        if (a) break;
+        if (h) break;
         if (this.multiple && "listbox" === this.type) break;
         if ("menu" === this.type) {
           this.popoverState.emit({
@@ -201,8 +201,8 @@ const b =  t(class extends e {
           });
           break;
         }
-        if (c = s.find((t => t.active)), !c || c.disabled) return;
-        this.selectOption(c);
+        if (r = s.find((t => t.active)), !r || r.disabled) return;
+        this.selectOption(r);
         break;
 
        case "Esc":
@@ -215,8 +215,8 @@ const b =  t(class extends e {
 
        default:
         if (i) break;
-        if (!h.match(/^[\w]$/)) break;
-        this.searchOptions(h, !1);
+        if (!a.match(/^[\w]$/)) break;
+        this.searchOptions(a, !1);
       }
     }, this.searchAndFocus = (t, e) => {
       // pseudo search in non-searchable select
@@ -253,11 +253,11 @@ const b =  t(class extends e {
   // #endregion
   // #region Component Lifecycle Events
   componentWillLoad() {
-    h(this.hostElement, "q2-select, q2-dropdown, q2-pill, q2-popover, q2-action-sheet"), 
+    a(this.hostElement, "q2-select, q2-dropdown, q2-pill, q2-popover, q2-action-sheet"), 
     this.hasOptions = !!this.hostElement.querySelectorAll("q2-option:not([separator]):not([separator=true]), q2-dropdown-item:not([separator]):not([separator=true])").length;
   }
   componentDidLoad() {
-    r(this.hostElement), this.checkOptions(), this.selectedOptionsUpdated(), this.ready.emit();
+    c(this.hostElement), this.checkOptions(), this.selectedOptionsUpdated(), this.ready.emit();
   }
   componentDidRender() {
     this.scheduledAfterRender.forEach((t => t())), this.scheduledAfterRender = [];
@@ -345,8 +345,8 @@ const b =  t(class extends e {
     const {allVisibleOptions: e, allOptions: i, activeIndex: s} = this, n = i[s];
     let o = e.indexOf(n) + t;
     o < 0 ? o = e.length - 1 : o > e.length - 1 && (o = 0);
-    const h = e[o];
-    return i.indexOf(h);
+    const a = e[o];
+    return i.indexOf(a);
   }
   getRootSlot(t) {
     var e;
@@ -379,19 +379,19 @@ const b =  t(class extends e {
   selectOption(t) {
     const {multiple: e, noSelect: i, showSelected: s} = this;
     if (!t || t.disabled || "disabledGroup" in t && t.disabledGroup) return;
-    const n = t.value, o = "display" in t && t.display ? t.display : t.innerText.trim(), h = {
+    const n = t.value, o = "display" in t && t.display ? t.display : t.innerText.trim(), a = {
       value: n,
       display: o
     };
-    let a = [];
+    let h = [];
     if (e) {
       const {selectedOptions: e} = this;
-      a = e.find((t => t.value === n)) ? e.filter((({value: t}) => t !== n)) : [ ...e, h ], 
+      h = e.find((t => t.value === n)) ? e.filter((({value: t}) => t !== n)) : [ ...e, a ], 
       s && this.focusSelectedSibling(t);
-    } else a = [ h ];
-    i ? this.setActiveElement(null) : this.selectedOptions = a, u(this, [ "change", "tctChange" ], {
+    } else h = [ a ];
+    i ? this.setActiveElement(null) : this.selectedOptions = h, u(this, [ "change", "tctChange" ], {
       value: n,
-      values: a
+      values: h
     });
   }
   setActiveOption() {
@@ -405,7 +405,7 @@ const b =  t(class extends e {
     if (!t) return;
     p(t) ? t.focus({
       preventScroll: !0
-    }) : c((() => t.focus({
+    }) : r((() => t.focus({
       preventScroll: !0
     })));
   }
@@ -435,7 +435,7 @@ const b =  t(class extends e {
     }, s("div", {
       key: "28b5d0460ceca2f0b9a8fd4fa018f949d04154df",
       class: "options",
-      "aria-label": a("tecton.element.optionList.label", [ this.label ]),
+      "aria-label": h("tecton.element.optionList.label", [ this.label ]),
       "aria-multiselectable": "menu" === this.type ? void 0 : this.multiple ? "true" : void 0,
       role: this.type || "listbox",
       onKeyDown: this.internalKeydownHandler,
@@ -458,7 +458,7 @@ const b =  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}:host{position:relative;width:100%;display:block;line-height:var(--tct-option-list-line-height, var(--t-option-list-line-height, var(--app-line-height, 1.428571429em)))}.content{text-align:start}:host([is-sizeable]) .content{display:block;height:auto}";
+    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{position:relative;width:100%;display:block;line-height:var(--tct-option-list-line-height, var(--t-option-list-line-height, var(--app-line-height, 1.428571429em)))}.content{text-align:start}:host([is-sizeable]) .content{display:block;height:auto}';
   }
 }, [ 257, "q2-option-list", {
   align: [ 513 ],

package/dist/components/q2-option2.js

@@ -1,10 +1,10 @@
-import { proxyCustomElement as t, HTMLElement as e, createEvent as i, h as o, Host as s, transformTag as a } from "@stencil/core/internal/client";
+import { proxyCustomElement as t, HTMLElement as e, createEvent as i, h as o, Host as a, transformTag as s } from "@stencil/core/internal/client";
 
 import { q as n, l as r } from "./index2.js";
 
-import { b as c } from "./component.js";
+import { b as d } from "./component.js";
 
-import { d } from "./q2-icon2.js";
+import { d as c } from "./q2-icon2.js";
 
 const l =  t(class extends e {
   constructor(t) {
@@ -61,7 +61,7 @@ const l =  t(class extends e {
     this.separatorChangedHandler(this.separator), this.initDisplay();
   }
   componentDidLoad() {
-    c(this.hostElement, "q2-select, q2-option-list, q2-pill, q2-dropdown"), this.initMutationObserver();
+    d(this.hostElement, "q2-select, q2-option-list, q2-pill, q2-dropdown"), this.initMutationObserver();
   }
   // #endregion
   // #region Watchers
@@ -77,21 +77,21 @@ const l =  t(class extends e {
   // #endregion
   // #region Render Methods
   renderOption() {
-    const {display: t, disabled: e, disabledGroup: i, selected: a, _multiSelectHidden: n, role: c} = this, d = e || i;
-    return o(s, {
+    const {display: t, disabled: e, disabledGroup: i, selected: s, _multiSelectHidden: n, role: d} = this, c = e || i;
+    return o(a, {
       tabindex: "-1",
-      "aria-disabled": d ? "true" : void 0,
-      "aria-selected": "menuitem" === c ? void 0 : `${!!a}`,
+      "aria-disabled": c ? "true" : void 0,
+      "aria-selected": "menuitem" === d ? void 0 : `${!!s}`,
       "aria-hidden": n ? "true" : void 0,
       display: r(t),
       onClick: () => {
-        d || this.tctClick.emit({
+        c || this.tctClick.emit({
           type: "select",
           value: this.value
         });
       },
       onKeydown: t => {
-        d || "Enter" !== t.key && " " !== t.key || (setTimeout((() => {
+        c || "Enter" !== t.key && " " !== t.key || (setTimeout((() => {
           this.tctClick.emit({
             type: "select",
             value: this.value
@@ -126,7 +126,7 @@ const l =  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}:host(:not([separator]):not([separator=false])){--comp-padding:0 var(--app-scale-2x, 10px);--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));padding:var(--tct-option-padding, var(--t-option-padding, var(--comp-padding)));min-height:44px;align-items:center;cursor:pointer;align-items:center}:host(:focus),:host(:not([separator]):not([separator=false]):hover),:host([active]){position:relative;z-index:1}:host([multiline]){--comp-padding:var(--app-scale-2, 10px) var(--app-scale-2, 10px);--comp-selected-icon-size:var(--tct-option-selected-multiline-icon-size, var(--t-option-selected-multiline-icon-size, var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, 26px))))}:host([_hide-selected-block]:not([_hide-selected-block=false])){grid-template-columns:1fr;grid-template-areas:"content"}:host(:not([_hide-selected-block])){grid-template-areas:"icon content";grid-template-columns:var(--comp-selected-icon-size) 1fr;gap:var(--tct-scale-1, var(--app-scale-1x, 5px))}:host([aria-disabled]){cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4));pointer-events:none}:host([aria-hidden]){display:none}:host(:not([hidden]):not([aria-hidden])){display:grid}:host([separator]:not([separator=false])){display:block}:host(:not([aria-disabled]):not([separator]):not([separator=false]):hover),:host([active]),:host(:focus){background:var(--tct-option-active-background, var(--tct-option-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));color:var(--tct-option-active-color, inherit)}:host(:focus-visible){box-shadow:var(--tct-option-focus-box-shadow, var(--const-inset-double-focus-ring, inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC)))) !important}q2-icon{grid-area:icon;--tct-icon-size:var(--comp-selected-icon-size)}::slotted(q2-item){padding:var(--app-scale-1x, 5px) 0}.content{display:block;grid-area:content;font-size:var(--tct-option-content-font-size, inherit)}:host(:not([multiline])) .content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.separator{--comp-default-separator-margin:0 var(--tct-scale-1, var(--app-scale-3x, 15px));margin:var(--tct-dropdown-separator-margin, var(--t-dropdown-separator-margin, var(--comp-default-separator-margin)));border-bottom:1px solid var(--tct-dropdown-item-separator-color, var(--t-gray-11, #cccccc))}';
+    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(:not([separator]):not([separator=false])){--comp-padding:0 var(--app-scale-2x, 10px);--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));padding:var(--tct-option-padding, var(--t-option-padding, var(--comp-padding)));min-height:44px;align-items:center;cursor:pointer;align-items:center}:host(:focus),:host(:not([separator]):not([separator=false]):hover),:host([active]){position:relative;z-index:1}:host([multiline]){--comp-padding:var(--app-scale-2, 10px) var(--app-scale-2, 10px);--comp-selected-icon-size:var(--tct-option-selected-multiline-icon-size, var(--t-option-selected-multiline-icon-size, var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, 26px))))}:host([_hide-selected-block]:not([_hide-selected-block=false])){grid-template-columns:1fr;grid-template-areas:"content"}:host(:not([_hide-selected-block])){grid-template-areas:"icon content";grid-template-columns:var(--comp-selected-icon-size) 1fr;gap:var(--tct-scale-1, var(--app-scale-1x, 5px))}:host([aria-disabled]){cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4));pointer-events:none}:host([aria-hidden]){display:none}:host(:not([hidden]):not([aria-hidden])){display:grid}:host([separator]:not([separator=false])){display:block}:host(:not([aria-disabled]):not([separator]):not([separator=false]):hover),:host([active]),:host(:focus){background:var(--tct-option-active-background, var(--tct-option-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));color:var(--tct-option-active-color, inherit)}:host(:focus-visible){box-shadow:var(--tct-option-focus-box-shadow, var(--const-inset-double-focus-ring, inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC)))) !important}q2-icon{grid-area:icon;--tct-icon-size:var(--comp-selected-icon-size)}::slotted(q2-item){padding:var(--app-scale-1x, 5px) 0}.content{display:block;grid-area:content;font-size:var(--tct-option-content-font-size, inherit)}:host(:not([multiline])) .content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.separator{--comp-default-separator-margin:0 var(--tct-scale-1, var(--app-scale-3x, 15px));margin:var(--tct-dropdown-separator-margin, var(--t-dropdown-separator-margin, var(--comp-default-separator-margin)));border-bottom:1px solid var(--tct-dropdown-item-separator-color, var(--t-gray-11, #cccccc))}';
   }
 }, [ 257, "q2-option", {
   _hideSelectedBlock: [ 516, "_hide-selected-block" ],
@@ -154,11 +154,11 @@ function defineCustomElement() {
   [ "q2-option", "q2-icon" ].forEach((t => {
     switch (t) {
      case "q2-option":
-      customElements.get(a(t)) || customElements.define(a(t), l);
+      customElements.get(s(t)) || customElements.define(s(t), l);
       break;
 
      case "q2-icon":
-      customElements.get(a(t)) || d();
+      customElements.get(s(t)) || c();
     }
   }));
 }

package/dist/components/q2-otp.js

@@ -6,9 +6,9 @@ import { d as l } from "./q2-btn2.js";
 
 import { d as p } from "./q2-icon2.js";
 
-import { d as h } from "./q2-loading2.js";
+import { d } from "./q2-loading2.js";
 
-import { d } from "./q2-message2.js";
+import { d as h } from "./q2-message2.js";
 
 const f =  t(class extends e {
   constructor(t) {
@@ -385,7 +385,7 @@ const f =  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}:host{display:flex;justify-content:center;margin:var(--tct-otp-margin, var(--tct-otp-margin-top, var(--app-scale-5x, 25px)) 0 var(--tct-otp-margin-bottom, var(--app-scale-5x, 25px)));font-size:var(--tct-input-font-size, var(--app-font-size, inherit))}:host([hidden]){display:none}.otp-container{--comp-otp-tween:var(--tct-otp-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)));--comp-otp-vertical-gap:var(--tct-otp-vertical-gap, var(--app-scale-4x, 20px));--comp-otp-field-size:44px;--comp-otp-field-gap:var(--tct-otp-field-gap, var(--app-scale-2x, 10px));--comp-otp-field-background:var(--tct-otp-field-background, var(--t-base, #ffffff));--comp-otp-field-border-color:var(--tct-otp-field-border-color, var(--t-a11y-gray-color-AA, #404040));--comp-otp-field-border-radius:var(--tct-otp-field-border-radius, var(--tct-border-radius-2, var(--app-border-radius-2, 8px)));--comp-otp-field-border-width:var(--tct-otp-field-border-width, 1px);--comp-otp-field-font-color:var(--tct-otp-field-font-color, var(--t-text, inherit));--comp-otp-field-font-size:var(--tct-otp-field-font-size, var(--app-font-size, 16px));--comp-otp-field-masked-color:var(--tct-otp-field-masked-color, var(--tct-otp-field-font-color, var(--t-text, #1f1f1f)));--comp-otp-field-masked-size:var(--tct-otp-field-masked-size, var(--tct-otp-field-masked-font-size, 8px));--comp-otp-field-font-weight:var(--tct-otp-field-font-weight, 400);--comp-otp-field-focus-box-shadow:var(--tct-otp-field-focus-box-shadow, var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc));--comp-otp-field-error-border-color:var(--tct-otp-field-error-border-color, var(--const-stoplight-alert, #c30000));--comp-otp-field-error-focus-ring-color:var(--tct-otp-field-error-focus-ring-color, #c30000);--comp-otp-field-error-focus-box-shadow:var(--tct-otp-field-error-focus-box-shadow, 0 0 0 2px #ffffff, 0 0 0 4px var(--comp-otp-field-error-focus-ring-color));--comp-otp-field-success-border-color:var(--tct-otp-field-success-border-color, var(--const-stoplight-success, #0e8a00));--comp-otp-field-success-focus-ring-color:var(--tct-otp-field-success-focus-ring-color, #0e8a00);--comp-otp-field-success-focus-box-shadow:var(--tct-otp-field-success-focus-box-shadow, 0 0 0 2px #ffffff, 0 0 0 4px var(--comp-otp-field-success-focus-ring-color));--comp-otp-field-disabled-opacity:var(--tct-otp-field-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));--comp-otp-separator-color:var(--tct-otp-separator-color, var(--t-textA, var(--t-a11y-gray-color, #4d4d4d)));--comp-otp-separator-font-size:var(--tct-otp-separator-font-size, 20px);--comp-otp-separator-font-weight:var(--tct-otp-separator-font-weight, 600);align-items:center;display:inline-flex;flex-direction:column;gap:var(--comp-otp-vertical-gap);max-width:100%}.otp-label{display:block;color:var(--tct-input-label-font-color, inherit);font-size:var(--tct-input-label-font-size, inherit);font-weight:var(--tct-input-label-font-weight, 600);letter-spacing:var(--tct-input-label-letter-spacing, inherit);line-height:var(--tct-input-label-line-height, inherit);text-align:center;text-transform:var(--tct-input-label-text-transform, none);transition:color var(--comp-otp-tween);width:100%}.helper-text{color:var(--tct-otp-helper-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77))));font-size:var(--tct-otp-helper-font-size, var(--app-font-size-small, 12px));text-align:center}.otp-content{align-items:center;display:inline-flex;flex-direction:column;gap:var(--comp-otp-vertical-gap);max-width:100%}.send-code-hidden{clip:rect(0, 0, 0, 0);height:1px;overflow:hidden;position:absolute;width:1px}.otp-control-group{align-items:center;display:flex;flex-direction:column;gap:var(--comp-otp-vertical-gap);max-width:100%;width:max-content}.fields-container{align-items:center;display:flex;flex-wrap:nowrap;gap:var(--comp-otp-field-gap);justify-content:center;pointer-events:none;position:relative;width:max-content}.fields-shell{max-width:100%;padding:4px;position:relative;width:max-content}.otp-hidden-input{appearance:none;-webkit-appearance:none;background:transparent;border:0;caret-color:transparent;color:transparent;cursor:text;font-size:16px;height:100%;inset:0;margin:0;opacity:1;outline:none;padding:0;pointer-events:auto;position:absolute;width:100%;z-index:1;-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:transparent}.otp-hidden-input::selection{background:transparent;color:transparent}.otp-hidden-input:focus,.otp-hidden-input:focus-visible{outline:none;box-shadow:none}.otp-hidden-input:disabled{cursor:not-allowed}.otp-slot{align-items:center;background:var(--comp-otp-field-background);border-color:var(--comp-otp-field-border-color);border-radius:var(--comp-otp-field-border-radius);border-style:solid;border-width:var(--comp-otp-field-border-width);box-sizing:border-box;color:var(--comp-otp-field-font-color);display:flex;flex:0 0 var(--comp-otp-field-size);height:var(--comp-otp-field-size);justify-content:center;position:relative;transition:border-color var(--comp-otp-tween), box-shadow var(--comp-otp-tween), opacity var(--comp-otp-tween);width:var(--comp-otp-field-size)}.otp-slot.is-active{border-color:var(--tct-otp-field-focus-border-color, var(--comp-otp-field-border-color));box-shadow:var(--comp-otp-field-focus-box-shadow)}.otp-slot .otp-caret{animation:otp-caret-blink 1s step-end infinite;background:currentColor;display:block;height:50%;pointer-events:none;width:2px}.state-error .otp-slot{border-color:var(--comp-otp-field-error-border-color)}.state-error .otp-slot.is-active{box-shadow:var(--comp-otp-field-error-focus-box-shadow)}.state-success .otp-slot{border-color:var(--comp-otp-field-success-border-color)}.state-success .otp-slot.is-active{box-shadow:var(--comp-otp-field-success-focus-box-shadow)}:host([disabled]) .otp-slot{opacity:var(--comp-otp-field-disabled-opacity)}:host([disabled]) .otp-hidden-input{cursor:not-allowed}@keyframes otp-caret-blink{0%,100%{opacity:1}50%{opacity:0}}.otp-char{color:var(--comp-otp-field-font-color);font-family:inherit;font-size:var(--comp-otp-field-font-size);font-weight:var(--comp-otp-field-font-weight);line-height:1;pointer-events:none;user-select:none}.otp-dot{background:var(--comp-otp-field-masked-color);border-radius:50%;display:block;height:var(--comp-otp-field-masked-size);pointer-events:none;width:var(--comp-otp-field-masked-size)}.otp-separator{color:var(--comp-otp-separator-color);font-size:var(--comp-otp-separator-font-size);font-weight:var(--comp-otp-separator-font-weight)}.submit-button{width:100%}.processing-overlay{align-items:center;background:var(--tct-otp-processing-overlay-background, rgba(255, 255, 255, 0.72));border-radius:var(--comp-otp-field-border-radius);display:flex;inset:0;justify-content:center;pointer-events:auto;position:absolute;--tct-loading-spinner-size:var(--tct-otp-processing-spinner-size, 32px);z-index:1}.otp-message{margin:0;text-align:center;width:100%}";
+    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;justify-content:center;margin:var(--tct-otp-margin, var(--tct-otp-margin-top, var(--app-scale-5x, 25px)) 0 var(--tct-otp-margin-bottom, var(--app-scale-5x, 25px)));font-size:var(--tct-input-font-size, var(--app-font-size, inherit))}:host([hidden]){display:none}.otp-container{--comp-otp-tween:var(--tct-otp-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)));--comp-otp-vertical-gap:var(--tct-otp-vertical-gap, var(--app-scale-4x, 20px));--comp-otp-field-size:44px;--comp-otp-field-gap:var(--tct-otp-field-gap, var(--app-scale-2x, 10px));--comp-otp-field-background:var(--tct-otp-field-background, var(--t-base, #ffffff));--comp-otp-field-border-color:var(--tct-otp-field-border-color, var(--t-a11y-gray-color-AA, #404040));--comp-otp-field-border-radius:var(--tct-otp-field-border-radius, var(--tct-border-radius-2, var(--app-border-radius-2, 8px)));--comp-otp-field-border-width:var(--tct-otp-field-border-width, 1px);--comp-otp-field-font-color:var(--tct-otp-field-font-color, var(--t-text, inherit));--comp-otp-field-font-size:var(--tct-otp-field-font-size, var(--app-font-size, var(--const-px-16, 16px)));--comp-otp-field-masked-color:var(--tct-otp-field-masked-color, var(--tct-otp-field-font-color, var(--t-text, #1f1f1f)));--comp-otp-field-masked-size:var(--tct-otp-field-masked-size, var(--tct-otp-field-masked-font-size, var(--const-px-8, 8px)));--comp-otp-field-font-weight:var(--tct-otp-field-font-weight, 400);--comp-otp-field-focus-box-shadow:var(--tct-otp-field-focus-box-shadow, var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc));--comp-otp-field-error-border-color:var(--tct-otp-field-error-border-color, var(--const-stoplight-alert, #c30000));--comp-otp-field-error-focus-ring-color:var(--tct-otp-field-error-focus-ring-color, #c30000);--comp-otp-field-error-focus-box-shadow:var(--tct-otp-field-error-focus-box-shadow, 0 0 0 2px #ffffff, 0 0 0 4px var(--comp-otp-field-error-focus-ring-color));--comp-otp-field-success-border-color:var(--tct-otp-field-success-border-color, var(--const-stoplight-success, #0e8a00));--comp-otp-field-success-focus-ring-color:var(--tct-otp-field-success-focus-ring-color, #0e8a00);--comp-otp-field-success-focus-box-shadow:var(--tct-otp-field-success-focus-box-shadow, 0 0 0 2px #ffffff, 0 0 0 4px var(--comp-otp-field-success-focus-ring-color));--comp-otp-field-disabled-opacity:var(--tct-otp-field-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));--comp-otp-separator-color:var(--tct-otp-separator-color, var(--t-textA, var(--t-a11y-gray-color, #4d4d4d)));--comp-otp-separator-font-size:var(--tct-otp-separator-font-size, var(--const-px-20, 20px));--comp-otp-separator-font-weight:var(--tct-otp-separator-font-weight, 600);align-items:center;display:inline-flex;flex-direction:column;gap:var(--comp-otp-vertical-gap);max-width:100%}.otp-label{display:block;color:var(--tct-input-label-font-color, inherit);font-size:var(--tct-input-label-font-size, inherit);font-weight:var(--tct-input-label-font-weight, 600);letter-spacing:var(--tct-input-label-letter-spacing, inherit);line-height:var(--tct-input-label-line-height, inherit);text-align:center;text-transform:var(--tct-input-label-text-transform, none);transition:color var(--comp-otp-tween);width:100%}.helper-text{color:var(--tct-otp-helper-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77))));font-size:var(--tct-otp-helper-font-size, var(--app-font-size-small, var(--const-px-12, 12px)));text-align:center}.otp-content{align-items:center;display:inline-flex;flex-direction:column;gap:var(--comp-otp-vertical-gap);max-width:100%}.send-code-hidden{clip:rect(0, 0, 0, 0);height:1px;overflow:hidden;position:absolute;width:1px}.otp-control-group{align-items:center;display:flex;flex-direction:column;gap:var(--comp-otp-vertical-gap);max-width:100%;width:max-content}.fields-container{align-items:center;display:flex;flex-wrap:nowrap;gap:var(--comp-otp-field-gap);justify-content:center;pointer-events:none;position:relative;width:max-content}.fields-shell{max-width:100%;padding:4px;position:relative;width:max-content}.otp-hidden-input{appearance:none;-webkit-appearance:none;background:transparent;border:0;caret-color:transparent;color:transparent;cursor:text;font-size:16px;height:100%;inset:0;margin:0;opacity:1;outline:none;padding:0;pointer-events:auto;position:absolute;width:100%;z-index:1;-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:transparent}.otp-hidden-input::selection{background:transparent;color:transparent}.otp-hidden-input:focus,.otp-hidden-input:focus-visible{outline:none;box-shadow:none}.otp-hidden-input:disabled{cursor:not-allowed}.otp-slot{align-items:center;background:var(--comp-otp-field-background);border-color:var(--comp-otp-field-border-color);border-radius:var(--comp-otp-field-border-radius);border-style:solid;border-width:var(--comp-otp-field-border-width);box-sizing:border-box;color:var(--comp-otp-field-font-color);display:flex;flex:0 0 var(--comp-otp-field-size);height:var(--comp-otp-field-size);justify-content:center;position:relative;transition:border-color var(--comp-otp-tween), box-shadow var(--comp-otp-tween), opacity var(--comp-otp-tween);width:var(--comp-otp-field-size)}.otp-slot.is-active{border-color:var(--tct-otp-field-focus-border-color, var(--comp-otp-field-border-color));box-shadow:var(--comp-otp-field-focus-box-shadow)}.otp-slot .otp-caret{animation:otp-caret-blink 1s step-end infinite;background:currentColor;display:block;height:50%;pointer-events:none;width:2px}.state-error .otp-slot{border-color:var(--comp-otp-field-error-border-color)}.state-error .otp-slot.is-active{box-shadow:var(--comp-otp-field-error-focus-box-shadow)}.state-success .otp-slot{border-color:var(--comp-otp-field-success-border-color)}.state-success .otp-slot.is-active{box-shadow:var(--comp-otp-field-success-focus-box-shadow)}:host([disabled]) .otp-slot{opacity:var(--comp-otp-field-disabled-opacity)}:host([disabled]) .otp-hidden-input{cursor:not-allowed}@keyframes otp-caret-blink{0%,100%{opacity:1}50%{opacity:0}}.otp-char{color:var(--comp-otp-field-font-color);font-family:inherit;font-size:var(--comp-otp-field-font-size);font-weight:var(--comp-otp-field-font-weight);line-height:1;pointer-events:none;user-select:none}.otp-dot{background:var(--comp-otp-field-masked-color);border-radius:50%;display:block;height:var(--comp-otp-field-masked-size);pointer-events:none;width:var(--comp-otp-field-masked-size)}.otp-separator{color:var(--comp-otp-separator-color);font-size:var(--comp-otp-separator-font-size);font-weight:var(--comp-otp-separator-font-weight)}.submit-button{width:100%}.processing-overlay{align-items:center;background:var(--tct-otp-processing-overlay-background, rgba(255, 255, 255, 0.72));border-radius:var(--comp-otp-field-border-radius);display:flex;inset:0;justify-content:center;pointer-events:auto;position:absolute;--tct-loading-spinner-size:var(--tct-otp-processing-spinner-size, 32px);z-index:1}.otp-message{margin:0;text-align:center;width:100%}';
   }
 }, [ 1, "q2-otp", {
   autoFocus: [ 516, "auto-focus" ],
@@ -437,11 +437,11 @@ const u = f, defineCustomElement = function() {
       break;
 
      case "q2-loading":
-      customElements.get(s(t)) || h();
+      customElements.get(s(t)) || d();
       break;
 
      case "q2-message":
-      customElements.get(s(t)) || d();
+      customElements.get(s(t)) || h();
     }
   }));
 };

package/dist/components/q2-pagination.js

@@ -1,4 +1,4 @@
-import { proxyCustomElement as t, HTMLElement as e, createEvent as i, h as a, transformTag as n } from "@stencil/core/internal/client";
+import { proxyCustomElement as t, HTMLElement as e, createEvent as i, h as n, transformTag as a } from "@stencil/core/internal/client";
 
 import { n as s, o, i as r, a as c, l } from "./index2.js";
 
@@ -6,17 +6,17 @@ import { m as p } from "./mirror-emit.js";
 
 import { d as h } from "./click-elsewhere2.js";
 
-import { d as g } from "./q2-badge2.js";
+import { d } from "./q2-badge2.js";
 
-import { d } from "./q2-btn2.js";
+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 b } from "./q2-loading2.js";
+import { d as f } from "./q2-loading2.js";
 
-import { d as m } from "./q2-option2.js";
+import { d as b } from "./q2-option2.js";
 
 import { d as v } from "./q2-option-list2.js";
 
@@ -73,8 +73,8 @@ const x =  t(class extends e {
     var e;
     if (this.disabled) return;
     if (!r(t, this.hostElement)) return;
-    const {isFullViewHidden: i, containerElement: a, inputField: n} = this;
-    i ? null === (e = a.querySelector("q2-btn:not([disabled])")) || void 0 === e || e.focus() : n.focus();
+    const {isFullViewHidden: i, containerElement: n, inputField: a} = this;
+    i ? null === (e = n.querySelector("q2-btn:not([disabled])")) || void 0 === e || e.focus() : a.focus();
   }
   // #endregion
   // #region Public Methods API
@@ -196,8 +196,8 @@ const x =  t(class extends e {
     return (null === (t = this.perPageIncrements) || void 0 === t ? void 0 : t.length) > 1;
   }
   get totalPages() {
-    const {pagesOnly: t, totalWithDefault: e, perPageWithDefault: i, pages: a} = this;
-    return t && a && !isNaN(parseInt("" + a)) ? a : Math.ceil(e / i);
+    const {pagesOnly: t, totalWithDefault: e, perPageWithDefault: i, pages: n} = this;
+    return t && n && !isNaN(parseInt("" + n)) ? n : Math.ceil(e / i);
   }
   get totalWithDefault() {
     return this.total || 0;
@@ -212,7 +212,7 @@ const x =  t(class extends e {
   renderPerPage() {
     const t = this.perPageIncrementsArray.sort(((t, e) => t - e));
     return (void 0 === this.perPage || isNaN(this.perPage)) && (this.perPage = t[0]), 
-    this.perPageIncrements = `[${t.join(",")}]`, a("q2-select", {
+    this.perPageIncrements = `[${t.join(",")}]`, n("q2-select", {
       ref: t => this.perPageSelect = t,
       onChange: t => t.stopImmediatePropagation(),
       onTctChange: t => {
@@ -220,35 +220,35 @@ const x =  t(class extends e {
       },
       value: this.perPageIncrementsArray.includes(this.perPage) ? "" + this.perPage : void 0,
       disabled: this.disabled
-    }, t.map((t => a("q2-option", {
+    }, t.map((t => n("q2-option", {
       value: "" + t,
       display: `${l("tecton.element.pagination.view")} ${t}`
     }, `${l("tecton.element.pagination.view")} ${t}`))));
   }
   render() {
     var t;
-    const {pagesOnly: e, recordsOnly: i, isFullViewHidden: n, recordTypeWithDefault: s, totalPages: o, totalWithDefault: r, pageWithDefault: c, currentRange: p, nextRange: h, prevRange: g, showPerPageSelect: d, disabled: u} = this, f = c < 2, b = c === o;
-    let m = l("tecton.element.pagination.goToNext"), v = l("tecton.element.pagination.goToPrevious");
+    const {pagesOnly: e, recordsOnly: i, isFullViewHidden: a, recordTypeWithDefault: s, totalPages: o, totalWithDefault: r, pageWithDefault: c, currentRange: p, nextRange: h, prevRange: d, showPerPageSelect: g, disabled: u} = this, m = c < 2, f = c === o;
+    let b = l("tecton.element.pagination.goToNext"), v = l("tecton.element.pagination.goToPrevious");
     return e ? (v = l("tecton.element.pagination.goToPages", {
       next: c - 1,
       total: o
-    }), m = l("tecton.element.pagination.goToPages", {
+    }), b = l("tecton.element.pagination.goToPages", {
       next: c + 1,
       total: o
     })) : i && (v = l("tecton.element.pagination.goToRecords", {
-      range: g,
+      range: d,
       recordType: s.toLowerCase(),
       total: r
-    }), m = l("tecton.element.pagination.goToRecords", {
+    }), b = l("tecton.element.pagination.goToRecords", {
       range: h,
       recordType: s.toLowerCase(),
       total: r
-    })), a("nav", {
+    })), n("nav", {
       key: "c42b191eccb70b9e3c684843cebf9f6b06f3c3b3",
       class: this.containerClasses.join(" "),
       ref: t => this.containerElement = t,
       "aria-label": l("tecton.element.pagination.title")
-    }, a("div", {
+    }, n("div", {
       key: "eb03cdc19938adac4a5c44887fa7d9853c9b89ab",
       class: "description",
       "test-id": "description"
@@ -259,47 +259,47 @@ const x =  t(class extends e {
       range: p,
       recordType: s.toLowerCase(),
       total: r.toLocaleString()
-    })), a("div", {
+    })), n("div", {
       key: "0e9a0bcfa6545b08843423378066989cf96ad18e",
       class: "controls"
-    }, a("div", {
+    }, n("div", {
       key: "4ea3b0a64165885dfd1bd525527e2617e4f4d748",
       class: "btn-group"
-    }, a("q2-btn", {
+    }, n("q2-btn", {
       key: "72d72c7b974ecbca50c4259cca5028515786af5b",
       ref: t => this.firstPageBtn = t,
       label: l("tecton.element.pagination.goToFirstPage"),
-      disabled: u || f,
-      hidden: n,
+      disabled: u || m,
+      hidden: a,
       onTctClick: () => this.handlePageChange(1),
       "test-id": "firstPageBtn",
       "hide-label": !0
-    }, a("q2-icon", {
+    }, n("q2-icon", {
       key: "26f5f8e8cf23a6d924b4a01796827fb62017809d",
       type: "chevron-double-left"
-    })), a("q2-btn", {
+    })), n("q2-btn", {
       key: "5f7845c5917137131cc6703bb59d90c842e32a7e",
       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", {
+    }, n("q2-icon", {
       key: "e02ccf51de21789099e2b254019f962dbb5011dc",
       type: "chevron-left"
-    }))), a("div", {
+    }))), n("div", {
       key: "ca201f7a4382e7f3835093c4c3877f7e2a0b5150",
       class: "input-display",
-      hidden: n
-    }, a("span", {
+      hidden: a
+    }, n("span", {
       key: "c690830341a15c25e4ad5a2d2a524d876c9f7cdb",
       "aria-hidden": "true"
-    }, l("tecton.element.pagination.page")), a("div", {
+    }, l("tecton.element.pagination.page")), n("div", {
       key: "7d08062d6cd495d4025a82413b347ed87915cbce",
       class: "input-wrapper",
       onClick: () => this.inputField.dispatchEvent(new FocusEvent("focus"))
-    }, a("q2-input", {
+    }, n("q2-input", {
       key: "e30795721d66d75dd5f349ad4d6d3ffda6023820",
       ref: t => this.inputField = t,
       type: "number",
@@ -316,40 +316,40 @@ const x =  t(class extends e {
       "test-id": "pageInput",
       current: "page",
       disabled: u
-    })), a("span", {
+    })), n("span", {
       key: "e2f1e51306298ddf428fd4e9fa665b58b2535fc8",
       "aria-hidden": "true"
-    }, l("tecton.element.pagination.ofPages", [ o.toLocaleString() ]))), a("div", {
+    }, l("tecton.element.pagination.ofPages", [ o.toLocaleString() ]))), n("div", {
       key: "c7a095aaa30743441c0c4d22f55e94801b3a823f",
       class: "btn-group"
-    }, a("q2-btn", {
+    }, n("q2-btn", {
       key: "c52d8837ec35b128a9d3f9c87766ed770edc9600",
       ref: t => this.nextPageBtn = t,
-      label: m,
-      disabled: u || b,
+      label: b,
+      disabled: u || f,
       onTctClick: () => this.handlePageChange(c + 1),
       "test-id": "nextPageBtn",
       "hide-label": !0
-    }, a("q2-icon", {
+    }, n("q2-icon", {
       key: "d1d802bddb426070fa1ca92a7937b8405949f01c",
       type: "chevron-right"
-    })), a("q2-btn", {
+    })), n("q2-btn", {
       key: "357f5bf5426e6c0004b737238a3c66697fc6a672",
       ref: t => this.lastPageBtn = t,
       label: "tecton.element.pagination.goToLastPage",
-      disabled: u || b,
-      hidden: n,
+      disabled: u || f,
+      hidden: a,
       onTctClick: () => this.handlePageChange(o),
       "test-id": "lastPageBtn",
       "hide-label": !0
-    }, a("q2-icon", {
+    }, n("q2-icon", {
       key: "1be92d6fa9252168baf63420271c8b8a77f41d92",
       type: "chevron-double-right"
-    })))), a("div", {
+    })))), n("div", {
       key: "96ca4bc582b1dcb830bad146fbf1233f2549f256",
       class: "per-page",
-      hidden: n || !(null === (t = this.perPageIncrements) || void 0 === t ? void 0 : t.length)
-    }, d && this.renderPerPage()));
+      hidden: a || !(null === (t = this.perPageIncrements) || void 0 === t ? void 0 : t.length)
+    }, g && this.renderPerPage()));
   }
   get hostElement() {
     return this;
@@ -374,7 +374,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}: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%)}.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 ],
@@ -420,47 +420,47 @@ const q = x, defineCustomElement = function() {
   [ "q2-pagination", "click-elsewhere", "q2-badge", "q2-btn", "q2-icon", "q2-input", "q2-loading", "q2-option", "q2-option-list", "q2-popover", "q2-select" ].forEach((t => {
     switch (t) {
      case "q2-pagination":
-      customElements.get(n(t)) || customElements.define(n(t), x);
+      customElements.get(a(t)) || customElements.define(a(t), x);
       break;
 
      case "click-elsewhere":
-      customElements.get(n(t)) || h();
+      customElements.get(a(t)) || h();
       break;
 
      case "q2-badge":
-      customElements.get(n(t)) || g();
+      customElements.get(a(t)) || d();
       break;
 
      case "q2-btn":
-      customElements.get(n(t)) || d();
+      customElements.get(a(t)) || g();
       break;
 
      case "q2-icon":
-      customElements.get(n(t)) || u();
+      customElements.get(a(t)) || u();
       break;
 
      case "q2-input":
-      customElements.get(n(t)) || f();
+      customElements.get(a(t)) || m();
       break;
 
      case "q2-loading":
-      customElements.get(n(t)) || b();
+      customElements.get(a(t)) || f();
       break;
 
      case "q2-option":
-      customElements.get(n(t)) || m();
+      customElements.get(a(t)) || b();
       break;
 
      case "q2-option-list":
-      customElements.get(n(t)) || v();
+      customElements.get(a(t)) || v();
       break;
 
      case "q2-popover":
-      customElements.get(n(t)) || y();
+      customElements.get(a(t)) || y();
       break;
 
      case "q2-select":
-      customElements.get(n(t)) || k();
+      customElements.get(a(t)) || k();
     }
   }));
 };