q2-tecton-elements 1.71.1 → 1.72.0

package/dist/components/q2-input2.js

@@ -1,6 +1,6 @@
-import { proxyCustomElement as t, HTMLElement as r, createEvent as a, h as e, Fragment as i, Host as o, transformTag as s } from "@stencil/core/internal/client";
+import { proxyCustomElement as t, HTMLElement as r, createEvent as a, h as i, Fragment as e, Host as s, transformTag as o } from "@stencil/core/internal/client";
 
-import { c as n, d as p, s as c, h as d, o as u, i as l, l as f, m, b as h, n as x, r as v, g as b } from "./index2.js";
+import { c as n, d as p, s as c, h as l, o as d, i as u, l as f, m, b as h, n as x, r as v, g as b } from "./index2.js";
 
 import { m as g } from "./mirror-emit.js";
 
@@ -21,80 +21,80 @@ function formatNumber(t = "", r = {
   allowDecimal: !1,
   allowNegative: !0
 }, a = !1) {
-  const e = "-" === t[0];
-  let i = t;
-  const o = !!r.allowDecimal && !!r.decimals;
+  const i = "-" === t[0];
+  let e = t;
+  const s = !!r.allowDecimal && !!r.decimals;
   if (a) {
-    const t = i.replace(/[^\d.]/g, "");
-    i = t && Number(t).toFixed(o ? r.decimals : 0) || "";
+    const t = e.replace(/[^\d.]/g, "");
+    e = t && Number(t).toFixed(s ? r.decimals : 0) || "";
   }
-  i = i.replace(/[^\d]/g, "");
-  let {integerString: s, decimalString: n} = function(t, r = !1, a) {
+  e = e.replace(/[^\d]/g, "");
+  let {integerString: o, decimalString: n} = function(t, r = !1, a) {
     if (!r) return {
       integerString: t,
       decimalString: ""
     };
-    const e = t.length - a;
-    let i = t.substring(0, e).padStart(1, "0");
-    i.length > 1 && "0" === i[0] && (i = i.substring(1));
-    const o = t.substring(e).padStart(a, "0");
+    const i = t.length - a;
+    let e = t.substring(0, i).padStart(1, "0");
+    e.length > 1 && "0" === e[0] && (e = e.substring(1));
+    const s = t.substring(i).padStart(a, "0");
     return {
-      integerString: i,
-      decimalString: o
+      integerString: e,
+      decimalString: s
     };
-  }(i, o, r.decimals), p = r.decimalSeparator;
+  }(e, s, r.decimals), p = r.decimalSeparator;
   // define decimalString
-    o || (p = "", n = "");
+    s || (p = "", n = "");
   // define negative
-    const c = r.allowNegative && e ? "-" : "";
-  i = `${c}${s}${p}${n}`, 
+    const c = r.allowNegative && i ? "-" : "";
+  e = `${c}${o}${p}${n}`, 
   // format integerString
-  s = s.replace(/\B(?=(\d{3})+(?!\d))/g, r.thousandsSeparator);
-  const d = c || s ? `${c}${s}${p}${n}` : "", u = c || s ? `${c}${r.prefix}${s}${p}${n}${r.suffix}` : "";
-  let l = d.length - i.length;
-  p && (l += r.decimalSeparator.length);
+  o = o.replace(/\B(?=(\d{3})+(?!\d))/g, r.thousandsSeparator);
+  const l = c || o ? `${c}${o}${p}${n}` : "", d = c || o ? `${c}${r.prefix}${o}${p}${n}${r.suffix}` : "";
+  let u = l.length - e.length;
+  p && (u += r.decimalSeparator.length);
   return {
-    value: i,
-    formattedValue: d,
-    fullyFormattedValue: u,
+    value: e,
+    formattedValue: l,
+    fullyFormattedValue: d,
     prefix: r.prefix || r.suffix,
     suffix: "",
-    formattingCharacterCount: l,
-    maxlength: Number.MAX_SAFE_INTEGER.toString().length + l + n.length,
-    unformattedValue: `${s.replace(/[^0-9]/g, "")}${n}`.replace(/^0+/, "")
+    formattingCharacterCount: u,
+    maxlength: Number.MAX_SAFE_INTEGER.toString().length + u + n.length,
+    unformattedValue: `${o.replace(/[^0-9]/g, "")}${n}`.replace(/^0+/, "")
   };
 }
 
 function formatValue(t = "", r = "", a) {
-  const e = a && a.prefix || "", i = a && a.suffix || "";
+  const i = a && a.prefix || "", e = a && a.suffix || "";
   if (!t || !r) {
     return {
       value: t,
       formattedValue: t,
-      fullyFormattedValue: `${e}${t}${i}`,
-      prefix: e.trim() || i.trim(),
+      fullyFormattedValue: `${i}${t}${e}`,
+      prefix: i.trim() || e.trim(),
       formattingCharacterCount: 0,
       unformattedValue: t
     };
   }
-  const {unformattedValue: o, formattedValue: s, formattingCharacterCount: n} = function(t, r) {
-    const a = r.split(""), e = function(t) {
+  const {unformattedValue: s, formattedValue: o, formattingCharacterCount: n} = function(t, r) {
+    const a = r.split(""), i = function(t) {
       const r = M.join("|"), a = t.replace(new RegExp(`[${r}]`, "g"), "").split("");
       return new Set(a);
     }(r);
-    let i = 0, o = 0, s = "";
+    let e = 0, s = 0, o = "";
     const n = a.reduce(((r, a) => {
-      if (i >= t.length) return r;
+      if (e >= t.length) return r;
       if (function(t) {
         return C.includes(t);
-      }(a) && isStaticFormattingChar(t[i], e)) return r;
+      }(a) && isStaticFormattingChar(t[e], i)) return r;
       if (function(t) {
         return M.includes(t);
       }(a)) {
         if (
         // Step value index if formatting character pushed out of place by user input
-        i = getNextNonFormattingCharIndex(t, i, e), i >= t.length) return r;
-        const o = function(t, r) {
+        e = getNextNonFormattingCharIndex(t, e, i), e >= t.length) return r;
+        const s = function(t, r) {
           switch (r) {
            case "#":
            case "?":
@@ -114,34 +114,34 @@ function formatValue(t = "", r = "", a) {
             return t;
           }
           return t;
-        }(t[i], a);
-        r += o, s += o, i++;
+        }(t[e], a);
+        r += s, o += s, e++;
       } else 
       // Static formatting characters added directly to formatted string
-      r += a, o++, a === t[i] && 
+      r += a, s++, a === t[e] && 
       // Continue to walk value if next value at this index matches formatting character
-      i++;
+      e++;
       return r;
     }), "");
     return {
-      unformattedValue: s,
+      unformattedValue: o,
       formattedValue: n,
-      formattingCharacterCount: o
+      formattingCharacterCount: s
     };
-  }(t, r), p = `${e}${s}${i}`, c = r.length, d = function(t, r, a) {
+  }(t, r), p = `${i}${o}${e}`, c = r.length, l = function(t, r, a) {
     return t.replace(new RegExp(`[${C.join("|")}]`, "g"), "").length + r.length + a.length;
   }
   // decimal data source:  http://www.iso.org/iso/home/standards/currency_codes.htm  09/Nov/2016
-  (r, e, i);
+  (r, i, e);
   return {
-    value: o,
-    formattedValue: s,
+    value: s,
+    formattedValue: o,
     fullyFormattedValue: p,
-    prefix: e.trim() || i.trim(),
+    prefix: i.trim() || e.trim(),
     formattingCharacterCount: n,
     maxlength: c,
-    minFormattedLength: d,
-    unformattedValue: o
+    minFormattedLength: l,
+    unformattedValue: s
   };
 }
 
@@ -1448,13 +1448,13 @@ const A = {
 };
 
 function formatCurrency(t, r = "USD", a = !1) {
-  let e = r || "", i = !0;
-  e.includes("-integer") && (e = e.split("-integer")[0], i = !1);
-  const o = A[e];
-  if (!o) return formatValue(t);
+  let i = r || "", e = !0;
+  i.includes("-integer") && (i = i.split("-integer")[0], e = !1);
+  const s = A[i];
+  if (!s) return formatValue(t);
   return formatNumber(t, {
-    ...o,
-    allowDecimal: i && o.decimals > 0,
+    ...s,
+    allowDecimal: e && s.decimals > 0,
     allowNegative: !1
   }, a);
 }
@@ -2450,11 +2450,11 @@ function formatCurrency(t, r = "USD", a = !1) {
 };
 
 function formatPhoneNumber(t, r = "US") {
-  const {mask: a, prefix: e} = D[r] || D.US, i = {
-    prefix: e
-  }, o = (t || "").replace(/[^0-9]/g, "");
+  const {mask: a, prefix: i} = D[r] || D.US, e = {
+    prefix: i
+  }, s = (t || "").replace(/[^0-9]/g, "");
   // Brazil need edge case handle, mobile: (xx) xxxxx-xxxx, land phone: (xx) xxxx-xxxx
-  return "BR" === r && 11 === o.length ? formatValue(o, "(##) #####-####", i) : formatValue(o, a, i);
+  return "BR" === r && 11 === s.length ? formatValue(s, "(##) #####-####", e) : formatValue(s, a, e);
 }
 
 function formatSSN(t) {
@@ -2505,24 +2505,24 @@ function getNumberFormat(t) {
 }
 
 function formatNumeric(t = "", r = "", a = !1) {
-  const e = getNumberFormat(r);
-  if (!e) {
+  const i = getNumberFormat(r);
+  if (!i) {
     return formatValue((t || "").replace(/[^\d.,-]/g, ""));
   }
-  return formatNumber(t, e, a);
+  return formatNumber(t, i, a);
 }
 
 function formatPercentage(t = "", r = "", a = !1) {
-  const e = getNumberFormat(r);
-  if (!e) {
+  const i = getNumberFormat(r);
+  if (!i) {
     return formatValue((t || "").replace(/[^\d.,-]/g, ""), void 0, {
       suffix: "%"
     });
   }
-  return e.suffix = "%", formatNumber(t, e, a);
+  return i.suffix = "%", formatNumber(t, i, a);
 }
 
-const I = {
+const V = {
   AF: "####",
   AL: "####",
   DZ: "#####",
@@ -2747,11 +2747,11 @@ const I = {
 };
 
 function formatPostalCode(t, r = "US") {
-  const a = I[r];
+  const a = V[r];
   return a ? formatValue(t, a) : formatAlphanumeric(t);
 }
 
-const N = {
+const I = {
   "MM/DD/YYYY": "##/##/####",
   "M/D/YYYY": "#?/#?/####",
   "MM/DD/YY": "##/##/##",
@@ -2775,7 +2775,7 @@ const N = {
 };
 
 function formatDate(t, r = "MM/DD/YYYY") {
-  const a = formatValue(t, N[null == r ? void 0 : r.toUpperCase()] || N["MM/DD/YYYY"]);
+  const a = formatValue(t, I[null == r ? void 0 : r.toUpperCase()] || I["MM/DD/YYYY"]);
   return {
     ...a,
     value: a.formattedValue
@@ -2834,7 +2834,7 @@ const unknownFormatter = function(t) {
 };
 
 /* tslint:enable:cyclomatic-complexity */
-const V = {
+const N = {
   detectCreditCardTypeFromValue: 
   /* tslint:disable:cyclomatic-complexity */
   function(t) {
@@ -2897,7 +2897,7 @@ const V = {
   },
   format: function(t) {
     // have a initial generic mask which then converts to specific mask
-    const r = V.detectCreditCardTypeFromValue(t), a = L[r](t);
+    const r = N.detectCreditCardTypeFromValue(t), a = L[r](t);
     return t.length < 2 && "unknown" === r && (a.leftIcon = "card"), a;
   },
   amexFormatter,
@@ -2963,8 +2963,6 @@ const F = {
     // #endregion
     // #region State Properties
     this.checkSlotCount = 0, this.isSmall = !1, 
-    // #endregion
-    // #region Public Property API
     /**
          * Sets readonly to true on the input without adding the "read only" label.
          *
@@ -2990,7 +2988,7 @@ const F = {
     /**
          * Displays a toggle button at the end of the input field which shows or hides the actual value.
          * @info
-         * Only applicable when `type` is `text`, `password`, or `ssn`.
+         * Applicable when `type` is `text`, `password`, `ssn`, or `tin`, or when `visibleLastCount` is set.
          */
     this.showVisibilityToggle = !1, 
     /** Specifies the field's expected [input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types), and provides the optimal keyboard on mobile devices. */
@@ -3021,7 +3019,7 @@ const F = {
       this._updateValueOnInput && (this.value = r.value), g(this, [ "input", "tctInput" ], r), 
       this.formattedValueObject.value || g(this, [ "clear", "tctClear" ], {
         source: "input"
-      }), this.setCursorPosition(t);
+      }), this.setCursorPosition(t), this.scheduleVisibleLastScrollSync();
     }, this.initMutationObserver = () => {
       if (!("MutationObserver" in window)) return;
       const t = new MutationObserver(this.onMutationObserved);
@@ -3048,11 +3046,11 @@ const F = {
         }
       }));
     }, this.onInputClick = () => {
-      this.shouldCursorStayAtEnd && this.placeCursorAtEnd();
+      this.shouldCursorStayAtEnd && this.placeCursorAtEnd(), this.scheduleVisibleLastScrollSync();
     }, this.onInputFocus = () => {
       "INPUT" === this.inputField.tagName && this.scheduledAfterRender.push((() => {
         this.isClickEvent && this.shouldCursorStartAtEnd ? this.placeCursorAtEnd() : this.setCursorPosition(this.calculateCursorPositionOnFocus()), 
-        this.isClickEvent = !1;
+        this.isClickEvent = !1, this.syncVisibleLastScroll();
       })), this.hasFocus = !0, c(this), this.valueOnFocus = this.value;
     }, this.onInputInput = t => {
       t.stopPropagation(), "currency" === this.type && this.handleCurrencyDeletion(t);
@@ -3077,13 +3075,21 @@ const F = {
         const r = t.clipboardData.getData("text"), a = this.getFormattedValue(r, !0);
         t.preventDefault(), this.handleDataInput(a);
       }
+    }, this.onInputScroll = () => {
+      this.syncVisibleLastScroll();
     }, this.onMutationObserved = () => {
       // Updating checkSlotCount to force re-render when slot content changes
       this.checkSlotCount = this.checkSlotCount + 1;
     }, this.onRefocusInput = () => {
       this.showMessages && (this.inputField.focus(), c(this));
     }, this.onToggleVisibility = () => {
-      this.hostElement.dispatchEvent(new FocusEvent("focus")), this.textHidden = !this.textHidden;
+      this.hostElement.dispatchEvent(new FocusEvent("focus")), void 0 !== this.normalizedVisibleLastCount && (this.value = this.formattedValueObject.value), 
+      this.textHidden = !this.textHidden;
+    }, this.syncVisibleLastScroll = () => {
+      var t, r;
+      if (!this.visibleLastContentRef) return;
+      const a = null !== (r = null === (t = this.inputField) || void 0 === t ? void 0 : t.scrollLeft) && void 0 !== r ? r : 0;
+      this.visibleLastContentRef.style.setProperty("--tct-input-visible-last-count-scroll-left", `${a}px`);
     }, this.validateInput = () => {
       var t, r, a;
       return this.validity = null === (t = this.inputRef) || void 0 === t ? void 0 : t.validity, 
@@ -3105,15 +3111,15 @@ const F = {
         var t, r;
         return null !== (r = null === (t = this.formattedValueObject) || void 0 === t ? void 0 : t.formattedValue) && void 0 !== r ? r : "";
       }
-    }), d(this), this.updateComboboxAriaLabel(), void 0 === this.textHidden && (this.textHidden = "password" === this.type), 
+    }), l(this), this.updateComboboxAriaLabel(), void 0 === this.textHidden && (this.textHidden = "password" === this.type), 
     this.manageClearableResizeObserver(this.clearable);
   }
   componentDidLoad() {
-    u(this.hostElement), this.pseudo || (this.inputField.value = this.formattedValueObject.formattedValue), 
+    d(this.hostElement), this.pseudo || (this.inputField.value = this.formattedValueObject.formattedValue), 
     this.autofocus && this.inputField.focus(), this.initMutationObserver();
   }
   componentDidRender() {
-    this.scheduledAfterRender.forEach((t => t())), this.scheduledAfterRender = [];
+    this.scheduledAfterRender.forEach((t => t())), this.scheduledAfterRender = [], this.syncVisibleLastScroll();
   }
   // #endregion
   // #region Listeners
@@ -3121,7 +3127,7 @@ const F = {
     t instanceof CustomEvent ? t.target !== this.hostElement || this.hostElement.onchange || (this.value = t.detail.value) : t.stopPropagation();
   }
   onHostElementFocus(t) {
-    l(t, this.hostElement) && this.inputField.focus();
+    u(t, this.hostElement) && this.inputField.focus();
   }
   // #endregion
   // #region Public Methods API
@@ -3162,7 +3168,7 @@ const F = {
   ariaLabelObserver() {
     // Skip deprecated ariaLabel handling for combobox role
     // (combobox sets aria-label directly for accessibility without hiding the visual label)
-    "combobox" !== this._role && d(this);
+    "combobox" !== this._role && l(this);
   }
   manageClearableResizeObserver(t) {
     var r;
@@ -3188,6 +3194,11 @@ const F = {
   hintsObserver() {
     this.hasFocus && this.scheduledAfterRender.push((() => c(this)));
   }
+  textHiddenObserver() {
+    this.textHidden ? this.scheduleVisibleLastScrollSync() : this.scheduledAfterRender.push((() => {
+      this.inputField.value = this.formattedValueObject.formattedValue;
+    }));
+  }
   typeObserver() {
     this.formatAndUpdateValueFromProp();
   }
@@ -3227,7 +3238,26 @@ const F = {
     if (!this.formattedValueObject.prefix) return "search" === this.type ? "search" : this.formattedValueObject.leftIcon ? this.formattedValueObject.leftIcon : this.iconLeft;
   }
   get computedType() {
-    return [ "password", "text", "ssn" ].includes(this.type) && this.textHidden ? "password" : this.type && F[this.type] || "text";
+    return this.textHidden && ([ "password", "text", "ssn", "tin" ].includes(this.type) || void 0 !== this.normalizedVisibleLastCount) ? "password" : this.type && F[this.type] || "text";
+  }
+  get currencyCode() {
+    if ("currency" !== this.type) return;
+    const t = void 0 === this.formatModifier ? "USD" : this.formatModifier || "", r = t.includes("-integer") ? t.split("-integer")[0] : t;
+    return A[r] ? r : void 0;
+  }
+  get currencyDescription() {
+    const t = this.currencyCode;
+    if (t) try {
+      const r = document.documentElement.lang || "en-US";
+      return new Intl.DisplayNames(r, {
+        type: "currency"
+      }).of(t) || t;
+    } catch (r) {
+      return t;
+    }
+  }
+  get currencyDescriptionId() {
+    return `${this.inputId}-currency-description`;
   }
   get hasCustomDisplaySlot() {
     return h(this.hostElement, "custom-display");
@@ -3245,7 +3275,9 @@ const F = {
     return this.valid && !this.hasError;
   }
   get inputDescribedBy() {
-    return this.showMessages || this.hasError ? `${this.inputId}-description` : void 0;
+    const t = [];
+    return this.currencyDescription && t.push(this.currencyDescriptionId), this._ariaDescription && t.push(`${this.inputId}-aria-description`), 
+    (this.showMessages || this.hasError) && t.push(`${this.inputId}-description`), t.length ? t.join(" ") : void 0;
   }
   get inputField() {
     return this.hostElement.shadowRoot.querySelector(".input-field");
@@ -3267,9 +3299,42 @@ const F = {
   get isMaskedType() {
     return [ "currency", "phone", "ssn", "tin", "alphanumeric", "alpha", "numeric", "percentage", "postal", "date", "credit-card", "cif", "routingnumber", "swift", "iban", "clabe" ].includes(this.type);
   }
+  get maskedDisplayParts() {
+    var t, r;
+    if (!this.textHidden) return {
+      maskedCharacters: [],
+      visibleValue: ""
+    };
+    const a = this.normalizedVisibleLastCount, i = null !== (r = null === (t = this.formattedValueObject) || void 0 === t ? void 0 : t.formattedValue) && void 0 !== r ? r : "";
+    if (void 0 === a || !i) return {
+      maskedCharacters: [],
+      visibleValue: ""
+    };
+    const e = Array.from(i);
+    if (a >= e.length) return {
+      maskedCharacters: [],
+      visibleValue: i
+    };
+    const s = e.length - a;
+    return {
+      maskedCharacters: e.slice(0, s),
+      visibleValue: e.slice(s).join("")
+    };
+  }
+  get maskedDisplayValue() {
+    const {maskedCharacters: t, visibleValue: r} = this.maskedDisplayParts;
+    return `${"*".repeat(t.length)}${r}`;
+  }
   get messages() {
     return this.errors && this.errors.length > 0 && this.errors || this.hints && this.hints.length > 0 && this.hints || [];
   }
+  get normalizedVisibleLastCount() {
+    if ([ "currency", "password", "date" ].includes(this.type)) return;
+    const t = this.visibleLastCount;
+    if (null == t || "" === t) return;
+    const r = Number(t);
+    return !Number.isFinite(r) || r < 0 ? void 0 : Math.floor(r);
+  }
   get shouldCursorStartAtEnd() {
     return "currency" === this.type;
   }
@@ -3282,6 +3347,9 @@ const F = {
   get showMessages() {
     return this.messages.length > 0 && !this.hideMessages;
   }
+  get showVisibilityToggleButton() {
+    return this.showVisibilityToggle && ([ "password", "text", "ssn", "tin" ].includes(this.type) || void 0 !== this.normalizedVisibleLastCount);
+  }
   get stringValue() {
     return "[object Object]" === Object.prototype.toString.call(this.value) ? "" : this.value && String(this.value) || "";
   }
@@ -3303,18 +3371,18 @@ const F = {
   }
   calculateCursorPositionOnFocus() {
     var t, r, a;
-    const {inputField: e} = this, i = null !== (r = null === (t = null == e ? void 0 : e.value) || void 0 === t ? void 0 : t.length) && void 0 !== r ? r : 0;
+    const {inputField: i} = this, e = null !== (r = null === (t = null == i ? void 0 : i.value) || void 0 === t ? void 0 : t.length) && void 0 !== r ? r : 0;
     return {
-      startingPosition: null !== (a = null == e ? void 0 : e.selectionStart) && void 0 !== a ? a : i,
-      valueLength: i,
-      previousValueLength: i,
+      startingPosition: null !== (a = null == i ? void 0 : i.selectionStart) && void 0 !== a ? a : e,
+      valueLength: e,
+      previousValueLength: e,
       hasSelection: window.getSelection().toString().length > 0
     };
   }
   calculateCursorPositionOnInput() {
-    const t = this.inputField, r = this.formattedValueObject.formattedValue.length, a = t.value.length, e = "currency" === this.type ? r : 0;
+    const t = this.inputField, r = this.formattedValueObject.formattedValue.length, a = t.value.length, i = "currency" === this.type ? r : 0;
     return {
-      startingPosition: t && t.selectionStart || e,
+      startingPosition: t && t.selectionStart || i,
       valueLength: r,
       previousValueLength: t && a,
       hasSelection: !1
@@ -3346,7 +3414,7 @@ const F = {
       swift: formatSwift,
       iban: formatIBAN,
       clabe: formatCLABE,
-      "credit-card": V.format
+      "credit-card": N.format
     };
     return a[this.type] ? a[this.type](t, this.formatModifier, r) : {
       value: t,
@@ -3361,13 +3429,13 @@ const F = {
     if (this.textSelectedForDeletion) return void (this.textSelectedForDeletion = !1);
     // We only care about "Backspace" and "Delete" events
         if (![ "deleteContentBackward", "deleteContentForward" ].includes(t.inputType)) return;
-    const r = t.target, a = r.selectionStart, {formattedValue: e} = this.formattedValueObject;
+    const r = t.target, a = r.selectionStart, {formattedValue: i} = this.formattedValueObject;
     if (null === a) return;
-    let i;
+    let e;
     switch (t.inputType) {
      case "deleteContentBackward":
-      const t = e.substring(0, a + 1), r = /[a-zA-Z0-9]$/.test(t);
-      i = {
+      const t = i.substring(0, a + 1), r = /[a-zA-Z0-9]$/.test(t);
+      e = {
         leftIndex: r ? a : a - 1,
         rightIndex: r ? a + 1 : a,
         afterCursorOffset: 0,
@@ -3376,10 +3444,10 @@ const F = {
       break;
 
      case "deleteContentForward":
-      const o = e.substring(a), s = /^[a-zA-Z0-9]/.test(o);
-      i = {
-        leftIndex: s ? a : a + 1,
-        rightIndex: s ? a + 1 : a + 2,
+      const s = i.substring(a), o = /^[a-zA-Z0-9]/.test(s);
+      e = {
+        leftIndex: o ? a : a + 1,
+        rightIndex: o ? a + 1 : a + 2,
         afterCursorOffset: 1,
         newCursorOffset: 0
       };
@@ -3389,7 +3457,7 @@ const F = {
       return;
     }
     // Ensure the cursor doesn't move with a newly formatted value
-        const o = [ e.substring(0, i.leftIndex), e.substring(i.rightIndex) ].join(""), s = e.length - a - i.afterCursorOffset, n = this.getFormattedValue(o, !1).formattedValue, p = Math.max(n.length - s + i.newCursorOffset, 0);
+        const s = [ i.substring(0, e.leftIndex), i.substring(e.rightIndex) ].join(""), o = i.length - a - e.afterCursorOffset, n = this.getFormattedValue(s, !1).formattedValue, p = Math.max(n.length - o + e.newCursorOffset, 0);
     r.value = n, r.setSelectionRange(p, p), 
     // This handles a runtime issue when a character is deleted from the beginning of the input
     0 === p && x((() => r.setSelectionRange(p, p)));
@@ -3402,17 +3470,20 @@ const F = {
     const {inputField: t} = this;
     t.selectionStart = t.selectionEnd = t.value.length;
   }
+  scheduleVisibleLastScrollSync() {
+    this.maskedDisplayValue && x(this.syncVisibleLastScroll);
+  }
   setCursorPosition(t) {
     if (this.canSetSelection && !t.hasSelection) {
-      const r = this.inputField, {valueLength: a, previousValueLength: e, startingPosition: i} = t;
-      if ("currency" === this.type) if (e - a == 1) r.setSelectionRange(i - 1, i - 1); else {
-        const t = e - a;
-        r.setSelectionRange(i - t, i - t);
+      const r = this.inputField, {valueLength: a, previousValueLength: i, startingPosition: e} = t;
+      if ("currency" === this.type) if (i - a == 1) r.setSelectionRange(e - 1, e - 1); else {
+        const t = i - a;
+        r.setSelectionRange(e - t, e - t);
       }
       if ("currency" !== this.type) {
-        const t = a - e, o = i + (t > 0 ? t : 0);
+        const t = a - i, s = e + (t > 0 ? t : 0);
         // Never allow the cursor to move in reverse
-                r.setSelectionRange(o, o);
+                r.setSelectionRange(s, s);
       }
     }
   }
@@ -3421,44 +3492,45 @@ const F = {
   renderCountDOM() {
     if (!this.showCount) return;
     const {maxlength: t, formattedValueObject: r} = this;
-    return e("div", {
+    return i("div", {
       class: "count-tag"
     }, r.unformattedValue.length, t && `/${t}`);
   }
   renderInputContainerDOM() {
     const {hasInputLeftSlot: t, hasInputRightSlot: r} = this;
-    return e("div", {
+    return i("div", {
       class: "input-container",
       tabindex: -1,
       "test-id": "inputContainer"
-    }, e("div", {
+    }, i("div", {
       class: "input-icons-container-left"
-    }, this.formattedValueObject.prefix && e("div", {
-      class: "input-prefix"
-    }, this.formattedValueObject.prefix), this.computedIconLeft && e("div", null, e("q2-icon", {
+    }, this.formattedValueObject.prefix && i("div", {
+      class: "input-prefix",
+      "aria-hidden": "currency" === this.type ? "true" : void 0
+    }, this.formattedValueObject.prefix), this.computedIconLeft && i("div", null, i("q2-icon", {
       type: this.computedIconLeft,
       class: this.computedClassForIconLeft
-    })), t && e("slot", {
+    })), t && i("slot", {
       name: "input-left"
-    }), this.showIconSeparator && e("div", {
+    }), this.showIconSeparator && i("div", {
       class: "vertical-separator"
-    }), this.hasError && "currency" === this.type && e("div", {
+    }), this.hasError && "currency" === this.type && i("div", {
       "test-id": "divIconError",
       onClick: this.onRefocusInput
-    }, e("q2-icon", {
+    }, i("q2-icon", {
       type: "error",
       class: "icon-error",
       "test-id": "iconError"
-    })), this.hasValidState && "currency" === this.type && e("div", {
+    })), this.hasValidState && "currency" === this.type && i("div", {
       class: "input-valid-icon-container",
       "test-id": "divIconValid"
-    }, e("q2-icon", {
+    }, i("q2-icon", {
       type: "success",
       class: "icon-valid",
       "test-id": "iconValid"
-    }))), this.pseudo ? this.renderPseudoInputDOM() : this.renderStandardInputDOM(), e("div", {
+    }))), this.pseudo ? this.renderPseudoInputDOM() : this.renderStandardInputDOM(), i("div", {
       class: "input-icons-container-right"
-    }, e("q2-btn", {
+    }, i("q2-btn", {
       class: this.clearClasses.join(" "),
       label: f("tecton.element.input.clear", [ this.label ]),
       hideLabel: !0,
@@ -3466,10 +3538,10 @@ const F = {
       onMouseDown: t => t.preventDefault(),
       onClick: this.onClearInput,
       onKeyDown: t => t.stopPropagation()
-    }, e("q2-icon", {
+    }, i("q2-icon", {
       type: "close",
       class: "icon-clear"
-    })), [ "password", "text", "ssn", "tin" ].includes(this.type) && this.showVisibilityToggle && e("q2-btn", {
+    })), this.showVisibilityToggleButton && i("q2-btn", {
       class: "btn-visibility-toggle",
       "test-id": "toggleVisibilityButton",
       onClick: this.onToggleVisibility,
@@ -3477,37 +3549,41 @@ const F = {
         label: this.label
       }),
       "hide-label": !0
-    }, this.visibilityToggleText), this.formattedValueObject.suffix && e("span", {
-      class: "input-suffix"
-    }, this.formattedValueObject.suffix), this.badgeValue && e("q2-badge", {
+    }, this.visibilityToggleText), this.formattedValueObject.suffix && i("span", {
+      class: "input-suffix",
+      "aria-hidden": "currency" === this.type ? "true" : void 0
+    }, this.formattedValueObject.suffix), this.badgeValue && i("q2-badge", {
       size: "large",
       theme: this.badgeTheme
-    }, this.badgeValue), this.hasValidState && "currency" !== this.type && e("div", {
+    }, this.badgeValue), this.hasValidState && "currency" !== this.type && i("div", {
       class: "input-valid-icon-container",
       "test-id": "divIconValid"
-    }, e("q2-icon", {
+    }, i("q2-icon", {
       type: "success",
       class: "icon-valid",
       "test-id": "iconValid"
-    })), this.hasError && "currency" !== this.type && e("div", {
+    })), this.hasError && "currency" !== this.type && i("div", {
       "test-id": "divIconError",
       onClick: this.onRefocusInput
-    }, e("q2-icon", {
+    }, i("q2-icon", {
       type: "error",
       class: "icon-error",
       "test-id": "iconError"
-    })), this.iconRight && !this.formattedValueObject.suffix && e("div", null, e("q2-icon", {
+    })), this.iconRight && !this.formattedValueObject.suffix && i("div", null, i("q2-icon", {
       type: this.iconRight,
       class: "icon-right"
-    })), r && e("slot", {
+    })), r && i("slot", {
       name: "input-right"
-    })));
+    })), this.currencyDescription && i("span", {
+      id: this.currencyDescriptionId,
+      class: "sr"
+    }, this.currencyDescription));
   }
   renderPseudoInputDOM() {
-    const t = !this.value && !!this.placeholder, {ariaOwns: r, ariaHaspopup: a, ariaExpanded: i, ariaActivedescendant: o} = this.ariaAttributes;
-    return e("div", {
+    const t = !this.value && !!this.placeholder, {ariaOwns: r, ariaHaspopup: a, ariaExpanded: e, ariaActivedescendant: s} = this.ariaAttributes;
+    return i("div", {
       class: "pseudo-input-container"
-    }, e("button", {
+    }, i("button", {
       class: "input-field",
       type: "button",
       id: this.inputId,
@@ -3515,28 +3591,44 @@ const F = {
       "aria-invalid": `${this.hasError}`,
       "aria-owns": r,
       "aria-haspopup": a,
-      "aria-expanded": i,
-      "aria-activedescendant": o,
+      "aria-expanded": e,
+      "aria-activedescendant": s,
       role: this.role || void 0,
       disabled: !!this.disabled,
       "test-id": "q2InputInnerClearButton",
       onFocus: this.onInputFocus,
       onBlur: this.onInputBlur
-    }, e("div", {
+    }, i("div", {
       class: "custom-display-container"
-    }, e("slot", {
+    }, i("slot", {
       name: "custom-display"
-    }, e("span", {
+    }, i("span", {
       class: t ? "placeholder-text" : ""
     }, f(t ? this.placeholder : this.value))))));
   }
   renderStandardInputDOM() {
-    const {hasCustomDisplaySlot: t} = this, r = [ "input-field" ], {ariaOwns: a, ariaHaspopup: o, ariaActivedescendant: s, ariaExpanded: n} = this.ariaAttributes;
-    return t && r.push("sr"), e(i, null, t && e("div", {
+    const {hasCustomDisplaySlot: t} = this, r = [ "input-field" ], {ariaOwns: a, ariaHaspopup: s, ariaActivedescendant: o, ariaExpanded: n} = this.ariaAttributes, {maskedCharacters: p, visibleValue: c} = this.maskedDisplayParts;
+    return t && r.push("sr"), this.maskedDisplayValue && r.push("has-visible-last-count"), 
+    i(e, null, t && i("div", {
       class: "custom-display-container"
-    }, e("slot", {
+    }, i("slot", {
       name: "custom-display"
-    })), e("input", {
+    })), i("div", {
+      class: "standard-input-container"
+    }, this.maskedDisplayValue && i("span", {
+      class: "visible-last-count-value",
+      "aria-hidden": "true"
+    }, i("span", {
+      ref: t => this.visibleLastContentRef = t,
+      class: "visible-last-count-content"
+    }, p.map((t => i("span", {
+      class: "visible-last-count-character",
+      "data-character": t
+    }, i("span", {
+      class: "visible-last-count-mask"
+    }, "*")))), i("span", {
+      class: "visible-last-count-visible-value"
+    }, c))), i("input", {
       ref: t => this.inputRef = t,
       class: r.join(" "),
       id: this.inputId,
@@ -3551,8 +3643,8 @@ const F = {
       "aria-required": `${!this.optional}`,
       "aria-invalid": `${this.hasError}`,
       "aria-owns": a,
-      "aria-haspopup": o,
-      "aria-activedescendant": s,
+      "aria-haspopup": s,
+      "aria-activedescendant": o,
       "aria-expanded": n || void 0,
       role: this._role || void 0,
       autocomplete: this.computedAutocomplete,
@@ -3569,23 +3661,28 @@ const F = {
       onKeyDown: this.onInputKeydown,
       onMouseDown: this.onInputMousedown,
       onInput: this.onInputInput,
+      onScroll: this.onInputScroll,
       onPaste: this.onInputPaste,
       inputmode: this.inputMode,
       pattern: this.pattern || void 0
-    }));
+    })));
   }
   render() {
     const {ariaControls: t, ariaExpanded: r} = this.ariaAttributes;
-    return e(o, {
-      key: "877bcbc79e4891cab10a027fd4d53cab9852779e",
+    return i(s, {
+      key: "aea772f2158fa032157fcbb26bb49a97dc2e5a1b",
       role: this._role,
       "aria-controls": t,
       "aria-expanded": r
-    }, e("div", {
-      key: "0150e85d50d8c69dc16a50fc900cdc78729fc6ec",
+    }, i("div", {
+      key: "6b0cdf179216c359cb2db01176f563d77c19780e",
       class: this.wrapperClasses
-    }, e("div", {
-      key: "6fef0d2a694ef81a7967fd86365a64237ea29d96",
+    }, this._ariaDescription && i("span", {
+      key: "816be1dac83810f66ee0204a5be1a8421833e20b",
+      id: `${this.inputId}-aria-description`,
+      class: "sr"
+    }, this._ariaDescription), i("div", {
+      key: "1e4fd3b4bbe5103b7bad2af07ebfecb36c3d1743",
       class: "label-wrapper"
     }, v(this), this.renderCountDOM()), this.renderInputContainerDOM(), b(this)));
   }
@@ -3618,6 +3715,9 @@ const F = {
       hints: [ {
         hintsObserver: 0
       } ],
+      textHidden: [ {
+        textHiddenObserver: 0
+      } ],
       type: [ {
         typeObserver: 0
       } ],
@@ -3627,9 +3727,10 @@ const F = {
     };
   }
   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{--comp-default-input-margin:var(--tct-input-margin-top, var(--t-input-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-input-margin-bottom, var(--t-input-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-input-margin, var(--comp-default-input-margin));font-size:var(--tct-input-font-size, var(--t-input-font-size, var(--app-font-size, inherit)))}:host([hidden]){display:none}.field-container,.input-container{position:relative}.field-container{--comp-input-tween:var(--tct-input-tween, var(--t-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))))}.field-container.is-small .btn-clear{--tct-btn-icon-width:20px;--tct-icon-size:17px}.input-label{--comp-label-padding:var(--tct-input-label-padding, 0 var(--tct-input-label-padding-right, var(--t-input-label-padding-right, 0)) 0 var(--tct-input-label-padding-left, var(--t-input-label-padding-left, 0)));display:block;padding:var(--comp-label-padding);color:var(--tct-input-label-font-color, var(--t-input-label-font-color, inherit));font-size:var(--tct-input-label-font-size, var(--t-input-label-font-size, inherit));font-weight:var(--tct-input-label-font-weight, var(--t-input-label-font-weight, 600));text-transform:var(--tct-input-label-text-transform, var(--t-input-label-text-transform, none));letter-spacing:var(--tct-input-label-letter-spacing, var(--t-input-label-letter-spacing, inherit));transition:color var(--comp-input-tween)}.optional-tag{--comp-label-optional-margin:var(--tct-input-label-optional-margin, 0 0 0 var(--tct-input-label-optional-margin-left, var(--t-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px)))));margin:var(--comp-label-optional-margin);color:var(--tct-input-label-optional-font-color, var(--t-input-label-optional-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-input-label-optional-font-size, var(--t-input-label-optional-font-size, var(--app-font-size-small, var(--const-px-12, 12px))));font-weight:var(--tct-input-label-optional-font-weight, var(--t-input-label-optional-font-weight, 400));line-height:1em}.count-tag{color:var(--tct-input-count-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77))));font-size:var(--tct-input-count-font-size, var(--app-font-size-small, var(--const-px-12, 12px)));font-weight:var(--tct-input-count-font-weight, 400);text-align:right;width:var(--tct-input-count-width, auto)}.label-wrapper{--comp-label-margin:var(--tct-input-label-margin, var(--tct-input-label-margin-top, var(--t-input-label-margin-top, 0)) 0 var(--tct-input-label-margin-bottom, var(--t-input-label-margin-bottom, var(--tct-scale-1, var(--app-scale-1x, 5px)))));display:flex;gap:var(--tct-input-label-gap, var(--app-scale-2x, 10px));justify-content:space-between;align-items:end;margin:var(--comp-label-margin);line-height:var(--tct-input-label-line-height, var(--t-input-label-line-height, inherit))}.label-wrapper:has(label.sr){margin:0}.input-container{--comp-input-background:var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--t-gray-14, #fcfcfd))));--comp-input-backdrop-filter:var(--tct-input-backdrop-filter, none);--comp-input-horizontal-gap:var(--tct-input-horizontal-gap, var(--t-input-horizontal-gap, 0));--comp-input-border-top-left-radius:var(--tct-input-border-top-left-radius, var(--t-input-border-top-left-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));--comp-input-border-top-right-radius:var(--tct-input-border-top-right-radius, var(--t-input-border-top-right-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));--comp-input-border-bottom-right-radius:var(--tct-input-border-bottom-right-radius, var(--t-input-border-bottom-right-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));--comp-input-border-bottom-left-radius:var(--tct-input-border-bottom-left-radius, var(--t-input-border-bottom-left-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));--comp-calc-input-border-top-left-radius:calc(       var(--comp-input-border-top-left-radius) - var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) - var(--tct-input-border-left-width, var(--t-input-border-left-width, 1px))   );--comp-calc-input-border-top-right-radius:calc(       var(--comp-input-border-top-right-radius) - var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) - var(--tct-input-border-right-width, var(--t-input-border-right-width, 1px))   );--comp-calc-input-border-bottom-left-radius:calc(       var(--comp-input-border-bottom-left-radius) - var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) - var(--tct-input-border-left-width, var(--t-input-border-left-width, 1px))   );--comp-calc-input-border-bottom-right-radius:calc(       var(--comp-input-border-bottom-right-radius) - var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) - var(--tct-input-border-right-width, var(--t-input-border-right-width, 1px))   );--comp-input-border-radius:var(--comp-input-border-top-left-radius) var(--comp-input-border-top-right-radius)       var(--comp-input-border-bottom-right-radius) var(--comp-input-border-bottom-left-radius);--comp-input-border-width:var(--tct-input-border-top-width, 1px) var(--tct-input-border-right-width, 1px)       var(--tct-input-border-bottom-width, 1px) var(--tct-input-border-left-width, 1px);--comp-input-border-color:var(--tct-input-border-color, var(--t-input-border-color, var(--t-a11y-gray-color-AA, #404040)));--comp-input-prefix-clearance:calc(3 * var(--tct-input-prefix-font-size, var(--const-px-14, 14px)) + var(--tct-scale-1, 5px));--comp-input-icon-clearance:34px;--comp-input-min-height:var(--tct-input-min-height, var(--t-input-min-height, 44px));--comp-input-max-height:var(--tct-input-max-height, var(--t-input-max-height));--comp-input-hover-ring-color:var(--tct-input-hover-ring-color, var(--t-input-hover-ring-color));--comp-input-hover-ring:0 0 0 2px var(--t-base), 0 0 0 4px var(--comp-input-hover-ring-color), var(--tct-input-hover-box-shadow, var(--t-input-hover-box-shadow, 0 0 transparent));background:var(--comp-input-background);backdrop-filter:var(--comp-input-backdrop-filter);display:flex;align-items:center;gap:var(--tct-input-container-gap, var(--app-scale-2x, 10px));padding-inline:var(--tct-input-container-padding-inline);border-width:var(--comp-input-border-width);border-style:solid;border-color:var(--comp-input-border-color);border-radius:var(--comp-input-border-radius);box-shadow:var(--tct-input-box-shadow, var(--t-input-box-shadow, none));transition:background var(--comp-input-tween), backdrop-filter var(--comp-input-tween), border-width var(--comp-input-tween), border-color var(--comp-input-tween), box-shadow var(--comp-input-tween)}:host([disabled]:not([disabled=false])) .input-container{cursor:not-allowed;opacity:var(--tct-input-disabled-opacity, var(--t-input-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));backdrop-filter:var(--tct-input-disabled-backdrop-filter, var(--comp-input-backdrop-filter))}.has-error .input-container{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a));backdrop-filter:var(--tct-input-error-backdrop-filter, var(--comp-input-backdrop-filter));background:var(--tct-input-error-background, var(--comp-input-background));box-shadow:var(--tct-input-error-box-shadow, var(--comp-input-hover-ring))}.input-container:hover{border-color:var(--tct-input-hover-border-color, var(--comp-input-border-color));background:var(--tct-input-hover-background, var(--comp-input-background));backdrop-filter:var(--tct-input-hover-backdrop-filter, var(--comp-input-backdrop-filter));box-shadow:var(--tct-input-hover-box-shadow, var(--comp-input-hover-ring))}.has-error .input-container:hover{border-color:var(--tct-input-error-hover-border-color, var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a)));backdrop-filter:var(--tct-input-error-hover-backdrop-filter, var(--tct-input-error-backdrop-filter, var(--tct-input-hover-backdrop-filter, var(--comp-input-backdrop-filter))));background:var(--tct-input-error-hover-background, var(--tct-input-error-background, var(--comp-input-background)));box-shadow:var(--tct-input-error-hover-box-shadow, var(--tct-input-error-box-shadow, var(--comp-input-hover-ring)))}.has-focus .input-container{border-color:var(--tct-input-focus-border-color, var(--t-input-focus-border-color, var(--comp-input-border-color)));background:var(--tct-input-focus-background, var(--comp-input-background));backdrop-filter:var(--tct-input-focus-backdrop-filter, var(--comp-input-backdrop-filter));box-shadow:var(--tct-input-focus-box-shadow, var(--const-double-focus-ring))}.has-focus.has-error .input-container,.has-focus.has-error .input-container:hover{border-color:var(--tct-input-error-focus-border-color, var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a)));backdrop-filter:var(--tct-input-error-focus-backdrop-filter, var(--tct-input-error-backdrop-filter, var(--tct-input-focus-backdrop-filter, var(--comp-input-backdrop-filter))));background:var(--tct-input-error-focus-background, var(--tct-input-error-background, var(--comp-input-background)));box-shadow:var(--tct-input-error-focus-box-shadow, var(--tct-input-error-box-shadow, var(--const-double-focus-ring)))}.input-container:has(.input-field:is(:-webkit-autofill,:autofill)){background:var(--tct-input-autofill-background, #faffbc);color:var(--tct-input-autofill-font-color, var(--t-text, inherit))}.input-container:has(.input-field:is(:-webkit-autofill,:autofill)) .input-field{box-shadow:0 0 0 1000px var(--tct-input-autofill-background, #faffbc) inset;color:var(--tct-input-autofill-font-color, var(--t-text, inherit));-webkit-text-fill-color:var(--tct-input-autofill-font-color, var(--t-text, inherit))}.input-field{flex:1;border:0;-webkit-appearance:none;appearance:none;box-sizing:border-box;min-height:var(--comp-input-min-height);max-height:var(--comp-input-max-height);overflow-y:hidden;height:var(--tct-input-height, var(--t-input-height, 44px));width:100%;padding:var(--tct-input-padding, 0);background:transparent;color:var(--tct-input-font-color, var(--t-input-font-color, var(--t-text, inherit)));display:inline-block;text-align:var(--tct-input-align, "start");font-weight:var(--tct-input-font-weight, var(--t-input-font-weight, 400));letter-spacing:var(--tct-input-letter-spacing, var(--t-input-letter-spacing, inherit));}.input-field:focus{outline:none;box-shadow:none}.input-field::-webkit-outer-spin-button,.input-field::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.input-field[type=number]{-moz-appearance:textfield}.input-field::-ms-reveal,.input-field::-ms-clear{display:none}.input-field[type=search]::-webkit-search-decoration,.input-field[type=search]::-webkit-search-cancel-button,.input-field[type=search]::-webkit-search-results-button,.input-field[type=search]::-webkit-search-results-decoration{display:none}.input-field[disabled]:not([disabled=false]){cursor:not-allowed}.right-aligned .input-field{text-align:right}.input-field:is(input){flex:1}.input-field:is(input)[readonly]:not([readonly=false]){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.input-field:is(button){display:inline-flex;align-items:center}.has-custom-display .input-field:is(button){height:auto;padding:0}.input-field:is(button) span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.input-field[readonly]:not([readonly=false]){pointer-events:none}.custom-display-container{max-width:100%}.has-custom-display .custom-display-container{width:100%}.has-custom-display .custom-display-container ::slotted([slot=custom-display]){--comp-default-padding:var(--app-scale-2x, 10px) var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);padding:var(--tct-input-padding, var(--t-input-padding, var(--comp-default-padding)))}.input-field::placeholder,.placeholder-text{color:var(--tct-input-placeholder-font-color, var(--t-input-placeholder-font-color, var(--t-textA, var(--app-gray-d1, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-input-placeholder-font-size, var(--t-input-placeholder-font-size, var(--tct-input-font-size, var(--t-input-font-size, var(--app-font-size, inherit)))));font-weight:var(--tct-input-placeholder-font-weight, var(--t-input-placeholder-font-weight, var(--tct-input-font-weight, var(--t-input-font-weight, inherit))));line-height:var(--tct-input-placeholder-font-size, var(--t-input-placeholder-font-size, var(--tct-input-font-size, var(--t-input-font-size, var(--app-font-size, inherit)))));padding:var(--tct-input-placeholder-padding, var(--t-input-placeholder-padding, var(--tct-input-padding, var(--t-input-padding, inherit))))}.pseudo-input-container{min-width:0;flex:1}.input-icons-container-left,.input-icons-container-right{--tct-btn-icon-hover-background:var(--tct-input-btn-hover-background);--tct-btn-hover-background:var(--tct-input-btn-hover-background);display:flex;flex-direction:row;align-items:center;gap:var(--comp-input-horizontal-gap)}.input-icons-container-left q2-btn q2-icon,.input-icons-container-left ::slotted(q2-btn),.input-icons-container-right q2-btn q2-icon,.input-icons-container-right ::slotted(q2-btn){--tct-icon-stroke-primary:var(--tct-input-btn-icon-stroke-primary);--tct-icon-stroke-secondary:var(--tct-input-btn-icon-stroke-secondary)}.input-icons-container-left>div:not(.vertical-separator),.input-icons-container-right>div:not(.vertical-separator){min-width:var(--tct-input-icon-container-icon-min-width, 44px);display:flex;justify-content:center;align-items:center;font-size:var(--tct-input-icon-container-font-size, inherit)}.input-icons-container-left:empty,.input-icons-container-right:empty{display:var(--tct-input-icon-container-empty-display, block)}.input-icons-container-left{padding-left:var(--comp-input-horizontal-gap)}.input-icons-container-left q2-btn:first-child,.input-icons-container-left ::slotted(q2-btn:first-child){--tct-btn-icon-border-radius:var(--comp-calc-input-border-top-left-radius) 0 0       var(--comp-calc-input-border-bottom-left-radius)}.input-icons-container-right{padding-right:var(--comp-input-horizontal-gap);--comp-visibility-toggle-padding:0px var(--app-scale-2x, 10px)}.input-icons-container-right q2-btn:last-child,.input-icons-container-right ::slotted(q2-btn:last-child){--tct-btn-icon-border-radius:0 var(--comp-calc-input-border-top-right-radius)       var(--comp-calc-input-border-bottom-right-radius) 0}.input-icons-container-right .btn-visibility-toggle{--tct-btn-height:var(--comp-input-min-height);--tct-btn-padding-inline:var(--tct-input-visibility-toggle-padding, var(--app-scale-2x, 10px));--tct-btn-font-weight:var(--tct-input-visibility-toggle-font-weight, 400);color:var(--tct-input-visibility-toggle-font-color, var(--t-primary, #0079c1));font-size:var(--tct-input-visibility-toggle-font-size, var(--app-font-size-small, var(--const-px-12, 12px)))}q2-icon{margin-top:calc(var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) / 2);margin-bottom:calc(var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) / 2);pointer-events:none;color:var(--tct-input-icon-stroke-primary, var(--t-input-icon-stroke-primary, var(--t-a11y-gray-color, var(--t-textA, var(--app-gray, #747474)))));--tct-icon-stroke-primary:var(--tct-input-icon-stroke-primary, var(--t-input-icon-stroke-primary, var(--t-a11y-gray-color, var(--t-textA, var(--app-gray, #747474)))));--tct-icon-stroke-secondary:var(--tct-input-icon-stroke-secondary, var(--t-a11y-gray-color, var(--t-textA, var(--app-gray, #747474))))}.icon-left-muted{opacity:0.5}.input-prefix,.input-suffix{min-height:var(--comp-input-min-height);max-height:var(--comp-input-max-height);height:var(--tct-input-height, var(--t-input-height, 44px));font-size:var(--tct-input-prefix-font-size, var(--t-input-prefix-font-size, inherit));font-weight:var(--tct-input-prefix-font-weight, 400);color:var(--tct-input-prefix-font-color, var(--t-input-prefix-font-color, inherit));background:var(--tct-input-prefix-background, var(--tct-input-prefix-bg, var(--t-input-prefix-bg, var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, #f2f2f2))))))));transition:color var(--comp-input-tween), background var(--comp-input-tween)}.input-prefix{border-top-left-radius:var(--comp-calc-input-border-top-left-radius);border-bottom-left-radius:var(--comp-calc-input-border-bottom-left-radius);pointer-events:none;}.input-suffix{border-top-right-radius:var(--comp-calc-input-border-top-right-radius);border-bottom-right-radius:var(--comp-calc-input-border-bottom-right-radius)}.icon-error{color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}.icon-valid{color:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00));--tct-icon-stroke-primary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}.messages-container{height:0px;overflow:hidden;background:var(--tct-message-background, var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));box-shadow:var(--tct-input-message-box-shadow, var(--t-input-message-box-shadow, var(--tct-box-shadow-1, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)))));transition:height var(--tct-input-messages-tween, var(--t-input-messages-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));margin-top:var(--tct-input-messages-margin-top, 2px);z-index:var(--tct-input-messages-z-index, 5);position:absolute;width:100%;color:var(--tct-input-messages-font-color, var(--t-input-messages-font-color, inherit));border-radius:var(--tct-message-border-radius, var(--app-border-radius-1, inherit))}.has-error label{color:var(--tct-input-error-label-font-color, var(--t-input-error-label-font-color, var(--tct-input-label-font-color, var(--t-input-label-font-color, inherit))))}.has-error:not(.has-focus) .input-prefix,.has-error:not(.has-focus) .input-suffix{color:var(--tct-input-error-prefix-font-color, var(--t-input-error-prefix-font-color, inherit));background:var(--tct-input-error-prefix-background, var(--tct-input-error-prefix-bg, var(--t-input-error-prefix-bg, var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))))))))}.icon-left{width:26px;height:26px}.vertical-separator{height:calc(var(--comp-input-min-height) - 2px);border-right-width:var(--tct-input-prefix-border-width, 1px);border-right-style:solid;border-right-color:var(--tct-input-prefix-border-color, var(--t-input-prefix-border-color, var(--tct-input-border-color, var(--t-input-border-color, var(--t-a11y-gray-color-AA, #404040)))))}';
+    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{--comp-default-input-margin:var(--tct-input-margin-top, var(--t-input-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-input-margin-bottom, var(--t-input-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-input-margin, var(--comp-default-input-margin));font-size:var(--tct-input-font-size, var(--t-input-font-size, var(--app-font-size, inherit)));letter-spacing:inherit}:host([hidden]){display:none}.field-container,.input-container{position:relative}.field-container{--comp-input-tween:var(--tct-input-tween, var(--t-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))))}.field-container.is-small .btn-clear{--tct-btn-icon-width:20px;--tct-icon-size:var(--tct-input-icon-size, var(--const-px-18, 18px))}.input-label{--comp-label-padding:var(--tct-input-label-padding, 0 var(--tct-input-label-padding-right, var(--t-input-label-padding-right, 0)) 0 var(--tct-input-label-padding-left, var(--t-input-label-padding-left, 0)));display:block;padding:var(--comp-label-padding);color:var(--tct-input-label-font-color, var(--t-input-label-font-color, inherit));font-size:var(--tct-input-label-font-size, var(--t-input-label-font-size, inherit));font-weight:var(--tct-input-label-font-weight, var(--t-input-label-font-weight, 600));text-transform:var(--tct-input-label-text-transform, var(--t-input-label-text-transform, none));letter-spacing:var(--tct-input-label-letter-spacing, var(--t-input-label-letter-spacing, inherit));transition:color var(--comp-input-tween)}.optional-tag{--comp-label-optional-margin:var(--tct-input-label-optional-margin, 0 0 0 var(--tct-input-label-optional-margin-left, var(--t-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px)))));margin:var(--comp-label-optional-margin);color:var(--tct-input-label-optional-font-color, var(--t-input-label-optional-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-input-label-optional-font-size, var(--t-input-label-optional-font-size, var(--app-font-size-small, var(--const-px-12, 12px))));font-weight:var(--tct-input-label-optional-font-weight, var(--t-input-label-optional-font-weight, 400));line-height:1em}.count-tag{color:var(--tct-input-count-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77))));font-size:var(--tct-input-count-font-size, var(--app-font-size-small, var(--const-px-12, 12px)));font-weight:var(--tct-input-count-font-weight, 400);text-align:right;width:var(--tct-input-count-width, auto)}.label-wrapper{--comp-label-margin:var(--tct-input-label-margin, var(--tct-input-label-margin-top, var(--t-input-label-margin-top, 0)) 0 var(--tct-input-label-margin-bottom, var(--t-input-label-margin-bottom, var(--tct-scale-1, var(--app-scale-1x, 5px)))));display:flex;gap:var(--tct-input-label-gap, var(--app-scale-2x, 10px));justify-content:space-between;align-items:end;margin:var(--comp-label-margin);line-height:var(--tct-input-label-line-height, var(--t-input-label-line-height, inherit))}.label-wrapper:has(label.sr){margin:0}.input-container{--comp-input-background:var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--t-gray-14, #fcfcfd))));--comp-input-backdrop-filter:var(--tct-input-backdrop-filter, none);--comp-input-horizontal-gap:var(--tct-input-horizontal-gap, var(--t-input-horizontal-gap, 0));--comp-input-border-top-left-radius:var(--tct-input-border-top-left-radius, var(--t-input-border-top-left-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));--comp-input-border-top-right-radius:var(--tct-input-border-top-right-radius, var(--t-input-border-top-right-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));--comp-input-border-bottom-right-radius:var(--tct-input-border-bottom-right-radius, var(--t-input-border-bottom-right-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));--comp-input-border-bottom-left-radius:var(--tct-input-border-bottom-left-radius, var(--t-input-border-bottom-left-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));--comp-calc-input-border-top-left-radius:calc(       var(--comp-input-border-top-left-radius) - var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) - var(--tct-input-border-left-width, var(--t-input-border-left-width, 1px))   );--comp-calc-input-border-top-right-radius:calc(       var(--comp-input-border-top-right-radius) - var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) - var(--tct-input-border-right-width, var(--t-input-border-right-width, 1px))   );--comp-calc-input-border-bottom-left-radius:calc(       var(--comp-input-border-bottom-left-radius) - var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) - var(--tct-input-border-left-width, var(--t-input-border-left-width, 1px))   );--comp-calc-input-border-bottom-right-radius:calc(       var(--comp-input-border-bottom-right-radius) - var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) - var(--tct-input-border-right-width, var(--t-input-border-right-width, 1px))   );--comp-input-border-radius:var(--comp-input-border-top-left-radius) var(--comp-input-border-top-right-radius)       var(--comp-input-border-bottom-right-radius) var(--comp-input-border-bottom-left-radius);--comp-input-border-width:var(--tct-input-border-top-width, 1px) var(--tct-input-border-right-width, 1px)       var(--tct-input-border-bottom-width, 1px) var(--tct-input-border-left-width, 1px);--comp-input-border-color:var(--tct-input-border-color, var(--t-input-border-color, var(--t-a11y-gray-color-AA, #404040)));--comp-input-prefix-clearance:calc(3 * var(--tct-input-prefix-font-size, var(--const-px-14, 14px)) + var(--tct-scale-1, 5px));--comp-input-icon-clearance:34px;--comp-input-min-height:var(--tct-input-min-height, var(--t-input-min-height, 44px));--comp-input-max-height:var(--tct-input-max-height, var(--t-input-max-height));--comp-input-hover-ring-color:var(--tct-input-hover-ring-color, var(--t-input-hover-ring-color));--comp-input-hover-ring:0 0 0 2px var(--t-base), 0 0 0 4px var(--comp-input-hover-ring-color), var(--tct-input-hover-box-shadow, var(--t-input-hover-box-shadow, 0 0 transparent));background:var(--comp-input-background);backdrop-filter:var(--comp-input-backdrop-filter);display:flex;align-items:center;gap:var(--tct-input-container-gap, var(--app-scale-2x, 10px));padding-inline:var(--tct-input-container-padding-inline);border-width:var(--comp-input-border-width);border-style:solid;border-color:var(--comp-input-border-color);border-radius:var(--comp-input-border-radius);box-shadow:var(--tct-input-box-shadow, var(--t-input-box-shadow, none));transition:background var(--comp-input-tween), backdrop-filter var(--comp-input-tween), border-width var(--comp-input-tween), border-color var(--comp-input-tween), box-shadow var(--comp-input-tween)}:host([disabled]:not([disabled=false])) .input-container{cursor:not-allowed;opacity:var(--tct-input-disabled-opacity, var(--t-input-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));backdrop-filter:var(--tct-input-disabled-backdrop-filter, var(--comp-input-backdrop-filter))}.has-error .input-container{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a));backdrop-filter:var(--tct-input-error-backdrop-filter, var(--comp-input-backdrop-filter));background:var(--tct-input-error-background, var(--comp-input-background));box-shadow:var(--tct-input-error-box-shadow, var(--comp-input-hover-ring))}.input-container:hover{border-color:var(--tct-input-hover-border-color, var(--comp-input-border-color));background:var(--tct-input-hover-background, var(--comp-input-background));backdrop-filter:var(--tct-input-hover-backdrop-filter, var(--comp-input-backdrop-filter));box-shadow:var(--tct-input-hover-box-shadow, var(--comp-input-hover-ring))}.has-error .input-container:hover{border-color:var(--tct-input-error-hover-border-color, var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a)));backdrop-filter:var(--tct-input-error-hover-backdrop-filter, var(--tct-input-error-backdrop-filter, var(--tct-input-hover-backdrop-filter, var(--comp-input-backdrop-filter))));background:var(--tct-input-error-hover-background, var(--tct-input-error-background, var(--comp-input-background)));box-shadow:var(--tct-input-error-hover-box-shadow, var(--tct-input-error-box-shadow, var(--comp-input-hover-ring)))}.has-focus .input-container{border-color:var(--tct-input-focus-border-color, var(--t-input-focus-border-color, var(--comp-input-border-color)));background:var(--tct-input-focus-background, var(--comp-input-background));backdrop-filter:var(--tct-input-focus-backdrop-filter, var(--comp-input-backdrop-filter));box-shadow:var(--tct-input-focus-box-shadow, var(--const-double-focus-ring))}.has-focus.has-error .input-container,.has-focus.has-error .input-container:hover{border-color:var(--tct-input-error-focus-border-color, var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a)));backdrop-filter:var(--tct-input-error-focus-backdrop-filter, var(--tct-input-error-backdrop-filter, var(--tct-input-focus-backdrop-filter, var(--comp-input-backdrop-filter))));background:var(--tct-input-error-focus-background, var(--tct-input-error-background, var(--comp-input-background)));box-shadow:var(--tct-input-error-focus-box-shadow, var(--tct-input-error-box-shadow, var(--const-double-focus-ring)))}.input-container:has(.input-field:is(:-webkit-autofill,:autofill)){background:var(--tct-input-autofill-background, #faffbc);color:var(--tct-input-autofill-font-color, var(--t-text, inherit))}.input-container:has(.input-field:is(:-webkit-autofill,:autofill)) .input-field{box-shadow:0 0 0 1000px var(--tct-input-autofill-background, #faffbc) inset;color:var(--tct-input-autofill-font-color, var(--t-text, inherit));-webkit-text-fill-color:var(--tct-input-autofill-font-color, var(--t-text, inherit))}.standard-input-container{position:relative;display:flex;flex:1;min-width:0}.visible-last-count-value{position:absolute;inset:0;z-index:0;box-sizing:border-box;display:flex;align-items:center;overflow:hidden;padding:var(--tct-input-padding, 0);color:var(--tct-input-font-color, var(--t-input-font-color, var(--t-text, inherit)));font-weight:var(--tct-input-font-weight, var(--t-input-font-weight, 400));font-family:var(--tct-input-visible-last-count-font-family, monospace);letter-spacing:var(--tct-input-letter-spacing, var(--t-input-letter-spacing, inherit));pointer-events:none;text-overflow:ellipsis;white-space:nowrap}.visible-last-count-content{display:inline-flex;align-items:center;flex:0 0 auto;transform:translateX(calc(var(--tct-input-visible-last-count-scroll-left, 0px) * -1))}.visible-last-count-character{display:inline-grid;flex:0 0 auto}.visible-last-count-character::before{content:attr(data-character);grid-area:1/1;visibility:hidden}.visible-last-count-visible-value{flex:0 0 auto}.visible-last-count-mask{grid-area:1/1;justify-self:center;transform:translateY(var(--tct-input-visible-last-count-mask-translate-y, 0))}.input-field{flex:1;border:0;-webkit-appearance:none;appearance:none;box-sizing:border-box;min-height:var(--comp-input-min-height);max-height:var(--comp-input-max-height);overflow-y:hidden;height:var(--tct-input-height, var(--t-input-height, 44px));width:100%;padding:var(--tct-input-padding, 0);background:transparent;color:var(--tct-input-font-color, var(--t-input-font-color, var(--t-text, inherit)));display:inline-block;text-align:var(--tct-input-align, "start");font-weight:var(--tct-input-font-weight, var(--t-input-font-weight, 400));letter-spacing:var(--tct-input-letter-spacing, var(--t-input-letter-spacing, inherit));}.input-field.has-visible-last-count{position:relative;z-index:1;color:transparent;caret-color:var(--tct-input-font-color, var(--t-input-font-color, var(--t-text, auto)));-webkit-text-fill-color:transparent;font-family:var(--tct-input-visible-last-count-font-family, monospace)}.input-field:focus{outline:none;box-shadow:none}.input-field::-webkit-outer-spin-button,.input-field::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.input-field[type=number]{-moz-appearance:textfield}.input-field::-ms-reveal,.input-field::-ms-clear{display:none}.input-field[type=search]::-webkit-search-decoration,.input-field[type=search]::-webkit-search-cancel-button,.input-field[type=search]::-webkit-search-results-button,.input-field[type=search]::-webkit-search-results-decoration{display:none}.input-field[disabled]:not([disabled=false]){cursor:not-allowed}.right-aligned .input-field{text-align:right}.input-field:is(input){flex:1}.input-field:is(input)[readonly]:not([readonly=false]){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.input-field:is(button){display:inline-flex;align-items:center}.has-custom-display .input-field:is(button){height:auto;padding:0}.input-field:is(button) span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.input-field[readonly]:not([readonly=false]){pointer-events:none}.custom-display-container{max-width:100%}.has-custom-display .custom-display-container{width:100%}.has-custom-display .custom-display-container ::slotted([slot=custom-display]){--comp-default-padding:var(--app-scale-2x, 10px) var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);padding:var(--tct-input-padding, var(--t-input-padding, var(--comp-default-padding)))}.input-field::placeholder,.placeholder-text{color:var(--tct-input-placeholder-font-color, var(--t-input-placeholder-font-color, var(--t-textA, var(--app-gray-d1, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-input-placeholder-font-size, var(--t-input-placeholder-font-size, var(--tct-input-font-size, var(--t-input-font-size, var(--app-font-size, inherit)))));font-weight:var(--tct-input-placeholder-font-weight, var(--t-input-placeholder-font-weight, var(--tct-input-font-weight, var(--t-input-font-weight, inherit))));line-height:var(--tct-input-placeholder-font-size, var(--t-input-placeholder-font-size, var(--tct-input-font-size, var(--t-input-font-size, var(--app-font-size, inherit)))));padding:var(--tct-input-placeholder-padding, var(--t-input-placeholder-padding, var(--tct-input-padding, var(--t-input-padding, inherit))))}.pseudo-input-container{min-width:0;flex:1}.input-icons-container-left,.input-icons-container-right{--tct-icon-size:var(--tct-input-icon-size, var(--const-px-18, 18px));--tct-btn-icon-hover-background:var(--tct-input-btn-hover-background);--tct-btn-hover-background:var(--tct-input-btn-hover-background);display:flex;flex-direction:row;align-items:center;gap:var(--comp-input-horizontal-gap)}.input-icons-container-left q2-btn q2-icon,.input-icons-container-left ::slotted(q2-btn),.input-icons-container-right q2-btn q2-icon,.input-icons-container-right ::slotted(q2-btn){--tct-icon-stroke-primary:var(--tct-input-btn-icon-stroke-primary);--tct-icon-stroke-secondary:var(--tct-input-btn-icon-stroke-secondary)}.input-icons-container-left>div:not(.vertical-separator),.input-icons-container-right>div:not(.vertical-separator){min-width:var(--tct-input-icon-container-icon-min-width, 44px);display:flex;justify-content:center;align-items:center;font-size:var(--tct-input-icon-container-font-size, inherit)}.input-icons-container-left:empty,.input-icons-container-right:empty{display:var(--tct-input-icon-container-empty-display, block)}.input-icons-container-left{padding-left:var(--comp-input-horizontal-gap)}.input-icons-container-left q2-btn:first-child,.input-icons-container-left ::slotted(q2-btn:first-child){--tct-btn-icon-border-radius:var(--comp-calc-input-border-top-left-radius) 0 0       var(--comp-calc-input-border-bottom-left-radius)}.input-icons-container-right{padding-right:var(--comp-input-horizontal-gap);--comp-visibility-toggle-padding:0px var(--app-scale-2x, 10px)}.input-icons-container-right q2-btn:last-child,.input-icons-container-right ::slotted(q2-btn:last-child){--tct-btn-icon-border-radius:0 var(--comp-calc-input-border-top-right-radius)       var(--comp-calc-input-border-bottom-right-radius) 0}.input-icons-container-right .btn-visibility-toggle{--tct-btn-height:var(--comp-input-min-height);--tct-btn-padding-inline:var(--tct-input-visibility-toggle-padding, var(--app-scale-2x, 10px));--tct-btn-font-weight:var(--tct-input-visibility-toggle-font-weight, 400);color:var(--tct-input-visibility-toggle-font-color, var(--t-primary, #0079c1));font-size:var(--tct-input-visibility-toggle-font-size, var(--app-font-size-small, var(--const-px-12, 12px)))}q2-icon{margin-top:calc(var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) / 2);margin-bottom:calc(var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) / 2);pointer-events:none;color:var(--tct-input-icon-stroke-primary, var(--t-input-icon-stroke-primary, var(--t-a11y-gray-color, var(--t-textA, var(--app-gray, #747474)))));--tct-icon-stroke-primary:var(--tct-input-icon-stroke-primary, var(--t-input-icon-stroke-primary, var(--t-a11y-gray-color, var(--t-textA, var(--app-gray, #747474)))));--tct-icon-stroke-secondary:var(--tct-input-icon-stroke-secondary, var(--t-a11y-gray-color, var(--t-textA, var(--app-gray, #747474))))}.icon-left-muted{opacity:0.5}.input-prefix,.input-suffix{min-height:var(--comp-input-min-height);max-height:var(--comp-input-max-height);height:var(--tct-input-height, var(--t-input-height, 44px));font-size:var(--tct-input-prefix-font-size, var(--t-input-prefix-font-size, inherit));font-weight:var(--tct-input-prefix-font-weight, 400);color:var(--tct-input-prefix-font-color, var(--t-input-prefix-font-color, inherit));background:var(--tct-input-prefix-background, var(--tct-input-prefix-bg, var(--t-input-prefix-bg, var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, #f2f2f2))))))));transition:color var(--comp-input-tween), background var(--comp-input-tween)}.input-prefix{border-top-left-radius:var(--comp-calc-input-border-top-left-radius);border-bottom-left-radius:var(--comp-calc-input-border-bottom-left-radius);pointer-events:none;}.input-suffix{border-top-right-radius:var(--comp-calc-input-border-top-right-radius);border-bottom-right-radius:var(--comp-calc-input-border-bottom-right-radius)}.icon-error{color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}.icon-valid{color:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00));--tct-icon-stroke-primary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}.messages-container{height:0px;overflow:hidden;background:var(--tct-message-background, var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));box-shadow:var(--tct-input-message-box-shadow, var(--t-input-message-box-shadow, var(--tct-box-shadow-1, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)))));transition:height var(--tct-input-messages-tween, var(--t-input-messages-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));margin-top:var(--tct-input-messages-margin-top, 2px);z-index:var(--tct-input-messages-z-index, 5);position:absolute;width:100%;color:var(--tct-input-messages-font-color, var(--t-input-messages-font-color, inherit));border-radius:var(--tct-message-border-radius, var(--app-border-radius-1, inherit))}.messages-container li:only-child{list-style:none}.has-error label{color:var(--tct-input-error-label-font-color, var(--t-input-error-label-font-color, var(--tct-input-label-font-color, var(--t-input-label-font-color, inherit))))}.has-error:not(.has-focus) .input-prefix,.has-error:not(.has-focus) .input-suffix{color:var(--tct-input-error-prefix-font-color, var(--t-input-error-prefix-font-color, inherit));background:var(--tct-input-error-prefix-background, var(--tct-input-error-prefix-bg, var(--t-input-error-prefix-bg, var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))))))))}.icon-left{width:26px;height:26px}.vertical-separator{height:calc(var(--comp-input-min-height) - 2px);border-right-width:var(--tct-input-prefix-border-width, 1px);border-right-style:solid;border-right-color:var(--tct-input-prefix-border-color, var(--t-input-prefix-border-color, var(--tct-input-border-color, var(--t-input-border-color, var(--t-a11y-gray-color-AA, #404040)))))}';
   }
 }, [ 257, "q2-input", {
+  _ariaDescription: [ 1, "_aria-description" ],
   _preventEntry: [ 1028, "_prevent-entry" ],
   _role: [ 1025 ],
   _updateValueOnInput: [ 1028, "_update-value-on-input" ],
@@ -3673,6 +3774,7 @@ const F = {
   valid: [ 516 ],
   validity: [ 1040 ],
   value: [ 1025 ],
+  visibleLastCount: [ 514, "visible-last-count" ],
   checkSlotCount: [ 32 ],
   formattedValueObject: [ 32 ],
   hasFocus: [ 32 ],
@@ -3705,6 +3807,9 @@ const F = {
   hints: [ {
     hintsObserver: 0
   } ],
+  textHidden: [ {
+    textHiddenObserver: 0
+  } ],
   type: [ {
     typeObserver: 0
   } ],
@@ -3718,23 +3823,23 @@ function defineCustomElement() {
   [ "q2-input", "q2-badge", "q2-btn", "q2-icon", "q2-loading" ].forEach((t => {
     switch (t) {
      case "q2-input":
-      customElements.get(s(t)) || customElements.define(s(t), E);
+      customElements.get(o(t)) || customElements.define(o(t), E);
       break;
 
      case "q2-badge":
-      customElements.get(s(t)) || S();
+      customElements.get(o(t)) || S();
       break;
 
      case "q2-btn":
-      customElements.get(s(t)) || k();
+      customElements.get(o(t)) || k();
       break;
 
      case "q2-icon":
-      customElements.get(s(t)) || w();
+      customElements.get(o(t)) || w();
       break;
 
      case "q2-loading":
-      customElements.get(s(t)) || y();
+      customElements.get(o(t)) || y();
     }
   }));
 }