q2-tecton-elements 1.71.1 → 1.72.0

package/dist/q2-tecton-elements/q2-badge_2.entry.js

@@ -1,6 +1,6 @@
-import { r as t, h as r, g as a, c as e, F as i, H as o } from "./index-Cqkz7Bnm.js";
+import { r as t, h as r, g as a, c as i, F as e, H as s } from "./index-Cqkz7Bnm.js";
 
-import { l as s, c as n, g as p, s as c, d, o as u, i as l, u as f, h as m, n as h, r as x, f as v } from "./index-Cps4jSQM.js";
+import { l as o, c as n, g as p, s as c, d, o as l, i as u, u as f, h, n as m, r as x, f as v } from "./index-DJw6Feh0.js";
 
 import { m as b } from "./mirror-emit-DUjY_ucm.js";
 
@@ -26,11 +26,11 @@ const g = class {
   }
   get badgeText() {
     const {maxLength: t, computedMaxLength: r} = this;
-    let a = this.value, e = Math.abs(Number(a));
+    let a = this.value, i = Math.abs(Number(a));
     if (!a) return "";
-    if ("string" == typeof a && (a = s(a), e = Math.abs(Number(a))), "string" == typeof a && isNaN(e)) return a.substring(0, r);
-    const i = t ? r : 2, o = Math.pow(10, i) - 1;
-    return e > o ? o.toLocaleString() + "+" : e.toLocaleString();
+    if ("string" == typeof a && (a = o(a), i = Math.abs(Number(a))), "string" == typeof a && isNaN(i)) return a.substring(0, r);
+    const e = t ? r : 2, s = Math.pow(10, e) - 1;
+    return i > s ? s.toLocaleString() + "+" : i.toLocaleString();
   }
   get computedMaxLength() {
     return Math.min(18, this.maxLength || 18);
@@ -69,80 +69,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 d = c || o ? `${c}${o}${p}${n}` : "", l = c || o ? `${c}${r.prefix}${o}${p}${n}${r.suffix}` : "";
+  let u = d.length - e.length;
+  p && (u += r.decimalSeparator.length);
   return {
-    value: i,
+    value: e,
     formattedValue: d,
-    fullyFormattedValue: u,
+    fullyFormattedValue: l,
     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 = k.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 S.includes(t);
-      }(a) && isStaticFormattingChar(t[i], e)) return r;
+      }(a) && isStaticFormattingChar(t[e], i)) return r;
       if (function(t) {
         return k.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 "?":
@@ -162,34 +162,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, d = function(t, r, a) {
     return t.replace(new RegExp(`[${S.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
+    unformattedValue: s
   };
 }
 
@@ -207,7 +207,7 @@ function getNextNonFormattingCharIndex(t, r, a) {
   return isStaticFormattingChar(t[r], a) ? getNextNonFormattingCharIndex(t, ++r, a) : r;
 }
 
-const w = {
+const y = {
   AED: {
     prefix: "",
     suffix: "د.إ",
@@ -1498,13 +1498,13 @@ const w = {
 };
 
 function formatCurrency(t, r = "USD", a = !1) {
-  let e = r || "", i = !0;
-  e.includes("-integer") && (e = e.split("-integer")[0], i = !1);
-  const o = w[e];
-  if (!o) return formatValue(t);
+  let i = r || "", e = !0;
+  i.includes("-integer") && (i = i.split("-integer")[0], e = !1);
+  const s = y[i];
+  if (!s) return formatValue(t);
   return formatNumber(t, {
-    ...o,
-    allowDecimal: i && o.decimals > 0,
+    ...s,
+    allowDecimal: e && s.decimals > 0,
     allowNegative: !1
   }, a);
 }
@@ -1516,7 +1516,7 @@ function formatCurrency(t, r = "USD", a = !1) {
  * To regenerate this file, run: pnpm generate:phone-formats
  * Only regenerate when upgrading google-libphonenumber or fixing generation bugs.
  * See scripts/generatePhoneFormats.js for details.
- */ const y = {
+ */ const w = {
   AC: {
     mask: "#####",
     prefix: "+247 "
@@ -2500,11 +2500,11 @@ function formatCurrency(t, r = "USD", a = !1) {
 };
 
 function formatPhoneNumber(t, r = "US") {
-  const {mask: a, prefix: e} = y[r] || y.US, i = {
-    prefix: e
-  }, o = (t || "").replace(/[^0-9]/g, "");
+  const {mask: a, prefix: i} = w[r] || w.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) {
@@ -2555,21 +2555,21 @@ 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 C = {
@@ -3003,18 +3003,16 @@ const N = {
   clabe: "text"
 }, I = class {
   constructor(r) {
-    t(this, r), this.change = e(this, "change", 7), this.clear = e(this, "clear", 7), 
-    this.formatted = e(this, "formatted", 7), this.input = e(this, "input", 7), this.invalid = e(this, "invalid", 7), 
-    this.tctChange = e(this, "tctChange", 5), this.tctClear = e(this, "tctClear", 7), 
-    this.tctFormatted = e(this, "tctFormatted", 7), this.tctInput = e(this, "tctInput", 7), 
-    this.tctInvalid = e(this, "tctInvalid", 7), 
+    t(this, r), this.change = i(this, "change", 7), this.clear = i(this, "clear", 7), 
+    this.formatted = i(this, "formatted", 7), this.input = i(this, "input", 7), this.invalid = i(this, "invalid", 7), 
+    this.tctChange = i(this, "tctChange", 5), this.tctClear = i(this, "tctClear", 7), 
+    this.tctFormatted = i(this, "tctFormatted", 7), this.tctInput = i(this, "tctInput", 7), 
+    this.tctInvalid = i(this, "tctInvalid", 7), 
     // #region Own Properties
     this.guid = n(), this.isClickEvent = !1, this.isMobile = p(), this.scheduledAfterRender = [], 
     // #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.
          *
@@ -3040,7 +3038,7 @@ const N = {
     /**
          * 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. */
@@ -3071,7 +3069,7 @@ const N = {
       this._updateValueOnInput && (this.value = r.value), b(this, [ "input", "tctInput" ], r), 
       this.formattedValueObject.value || b(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);
@@ -3098,11 +3096,11 @@ const N = {
         }
       }));
     }, 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);
@@ -3127,13 +3125,21 @@ const N = {
         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, 
@@ -3159,11 +3165,11 @@ const N = {
     this.manageClearableResizeObserver(this.clearable);
   }
   componentDidLoad() {
-    u(this.hostElement), this.pseudo || (this.inputField.value = this.formattedValueObject.formattedValue), 
+    l(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
@@ -3171,7 +3177,7 @@ const N = {
     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
@@ -3207,7 +3213,7 @@ const N = {
   updateComboboxAriaLabel() {
     // Set aria-label directly on host for combobox role
     // (can't use ariaLabel prop as it has deprecated handling that hides the label)
-    "combobox" === this._role && this.label && this.hostElement.setAttribute("aria-label", s(this.label));
+    "combobox" === this._role && this.label && this.hostElement.setAttribute("aria-label", o(this.label));
   }
   ariaLabelObserver() {
     // Skip deprecated ariaLabel handling for combobox role
@@ -3238,6 +3244,11 @@ const N = {
   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();
   }
@@ -3277,25 +3288,46 @@ const N = {
     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 && N[this.type] || "text";
+    return this.textHidden && ([ "password", "text", "ssn", "tin" ].includes(this.type) || void 0 !== this.normalizedVisibleLastCount) ? "password" : this.type && N[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 y[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 m(this.hostElement, "custom-display");
+    return h(this.hostElement, "custom-display");
   }
   get hasError() {
     return Array.isArray(this.errors) && this.errors.length > 0;
   }
   get hasInputLeftSlot() {
-    return m(this.hostElement, "input-left");
+    return h(this.hostElement, "input-left");
   }
   get hasInputRightSlot() {
-    return m(this.hostElement, "input-right");
+    return h(this.hostElement, "input-right");
   }
   get hasValidState() {
     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");
@@ -3317,9 +3349,42 @@ const N = {
   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;
   }
@@ -3332,6 +3397,9 @@ const N = {
   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) || "";
   }
@@ -3339,7 +3407,7 @@ const N = {
     return "tecton.element.input.toggleAriaLabel." + (this.textHidden ? "show" : "hide");
   }
   get visibilityToggleText() {
-    return s("tecton.element.input.toggle." + (this.textHidden ? "show" : "hide"));
+    return o("tecton.element.input.toggle." + (this.textHidden ? "show" : "hide"));
   }
   get wrapperClasses() {
     const t = [ "field-container" ];
@@ -3353,18 +3421,18 @@ const N = {
   }
   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
@@ -3411,13 +3479,13 @@ const N = {
     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,
@@ -3426,10 +3494,10 @@ const N = {
       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
       };
@@ -3439,10 +3507,10 @@ const N = {
       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 && h((() => r.setSelectionRange(p, p)));
+    0 === p && m((() => r.setSelectionRange(p, p)));
   }
   handleDataInput(t) {
     void 0 === this.maxlength || t.unformattedValue.length <= this.maxlength || t.unformattedValue.length <= this.formattedValueObject.unformattedValue.length ? this.formattedValueObject = t : this.maxlength && (t = this.getFormattedValue(t.unformattedValue.substring(0, this.maxlength), !1), 
@@ -3452,17 +3520,20 @@ const N = {
     const {inputField: t} = this;
     t.selectionStart = t.selectionEnd = t.value.length;
   }
+  scheduleVisibleLastScrollSync() {
+    this.maskedDisplayValue && m(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);
       }
     }
   }
@@ -3484,7 +3555,8 @@ const N = {
     }, r("div", {
       class: "input-icons-container-left"
     }, this.formattedValueObject.prefix && r("div", {
-      class: "input-prefix"
+      class: "input-prefix",
+      "aria-hidden": "currency" === this.type ? "true" : void 0
     }, this.formattedValueObject.prefix), this.computedIconLeft && r("div", null, r("q2-icon", {
       type: this.computedIconLeft,
       class: this.computedClassForIconLeft
@@ -3510,7 +3582,7 @@ const N = {
       class: "input-icons-container-right"
     }, r("q2-btn", {
       class: this.clearClasses.join(" "),
-      label: s("tecton.element.input.clear", [ this.label ]),
+      label: o("tecton.element.input.clear", [ this.label ]),
       hideLabel: !0,
       "test-id": "clearButton",
       onMouseDown: t => t.preventDefault(),
@@ -3519,16 +3591,17 @@ const N = {
     }, r("q2-icon", {
       type: "close",
       class: "icon-clear"
-    })), [ "password", "text", "ssn", "tin" ].includes(this.type) && this.showVisibilityToggle && r("q2-btn", {
+    })), this.showVisibilityToggleButton && r("q2-btn", {
       class: "btn-visibility-toggle",
       "test-id": "toggleVisibilityButton",
       onClick: this.onToggleVisibility,
-      label: s(this.visibilityToggleAriaLabel, {
+      label: o(this.visibilityToggleAriaLabel, {
         label: this.label
       }),
       "hide-label": !0
     }, this.visibilityToggleText), this.formattedValueObject.suffix && r("span", {
-      class: "input-suffix"
+      class: "input-suffix",
+      "aria-hidden": "currency" === this.type ? "true" : void 0
     }, this.formattedValueObject.suffix), this.badgeValue && r("q2-badge", {
       size: "large",
       theme: this.badgeTheme
@@ -3551,10 +3624,13 @@ const N = {
       class: "icon-right"
     })), a && r("slot", {
       name: "input-right"
-    })));
+    })), this.currencyDescription && r("span", {
+      id: this.currencyDescriptionId,
+      class: "sr"
+    }, this.currencyDescription));
   }
   renderPseudoInputDOM() {
-    const t = !this.value && !!this.placeholder, {ariaOwns: a, ariaHaspopup: e, ariaExpanded: i, ariaActivedescendant: o} = this.ariaAttributes;
+    const t = !this.value && !!this.placeholder, {ariaOwns: a, ariaHaspopup: i, ariaExpanded: e, ariaActivedescendant: s} = this.ariaAttributes;
     return r("div", {
       class: "pseudo-input-container"
     }, r("button", {
@@ -3564,9 +3640,9 @@ const N = {
       "aria-describedby": this.inputDescribedBy,
       "aria-invalid": `${this.hasError}`,
       "aria-owns": a,
-      "aria-haspopup": e,
-      "aria-expanded": i,
-      "aria-activedescendant": o,
+      "aria-haspopup": i,
+      "aria-expanded": e,
+      "aria-activedescendant": s,
       role: this.role || void 0,
       disabled: !!this.disabled,
       "test-id": "q2InputInnerClearButton",
@@ -3578,15 +3654,31 @@ const N = {
       name: "custom-display"
     }, r("span", {
       class: t ? "placeholder-text" : ""
-    }, s(t ? this.placeholder : this.value))))));
+    }, o(t ? this.placeholder : this.value))))));
   }
   renderStandardInputDOM() {
-    const {hasCustomDisplaySlot: t} = this, a = [ "input-field" ], {ariaOwns: e, ariaHaspopup: o, ariaActivedescendant: n, ariaExpanded: p} = this.ariaAttributes;
-    return t && a.push("sr"), r(i, null, t && r("div", {
+    const {hasCustomDisplaySlot: t} = this, a = [ "input-field" ], {ariaOwns: i, ariaHaspopup: s, ariaActivedescendant: n, ariaExpanded: p} = this.ariaAttributes, {maskedCharacters: c, visibleValue: d} = this.maskedDisplayParts;
+    return t && a.push("sr"), this.maskedDisplayValue && a.push("has-visible-last-count"), 
+    r(e, null, t && r("div", {
       class: "custom-display-container"
     }, r("slot", {
       name: "custom-display"
-    })), r("input", {
+    })), r("div", {
+      class: "standard-input-container"
+    }, this.maskedDisplayValue && r("span", {
+      class: "visible-last-count-value",
+      "aria-hidden": "true"
+    }, r("span", {
+      ref: t => this.visibleLastContentRef = t,
+      class: "visible-last-count-content"
+    }, c.map((t => r("span", {
+      class: "visible-last-count-character",
+      "data-character": t
+    }, r("span", {
+      class: "visible-last-count-mask"
+    }, "*")))), r("span", {
+      class: "visible-last-count-visible-value"
+    }, d))), r("input", {
       ref: t => this.inputRef = t,
       class: a.join(" "),
       id: this.inputId,
@@ -3600,8 +3692,8 @@ const N = {
       "aria-describedby": this.inputDescribedBy,
       "aria-required": `${!this.optional}`,
       "aria-invalid": `${this.hasError}`,
-      "aria-owns": e,
-      "aria-haspopup": o,
+      "aria-owns": i,
+      "aria-haspopup": s,
       "aria-activedescendant": n,
       "aria-expanded": p || void 0,
       role: this._role || void 0,
@@ -3609,7 +3701,7 @@ const N = {
       autocapitalize: this.autocapitalize,
       autocorrect: "on" === this.autocorrect ? "on" : "off",
       autofocus: this.autofocus,
-      placeholder: this.placeholder && s(this.placeholder) || void 0,
+      placeholder: this.placeholder && o(this.placeholder) || void 0,
       "test-id": "inputField",
       readonly: this.readonly || this._preventEntry,
       disabled: !!this.disabled,
@@ -3619,23 +3711,28 @@ const N = {
       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: a} = this.ariaAttributes;
-    return r(o, {
-      key: "877bcbc79e4891cab10a027fd4d53cab9852779e",
+    return r(s, {
+      key: "aea772f2158fa032157fcbb26bb49a97dc2e5a1b",
       role: this._role,
       "aria-controls": t,
       "aria-expanded": a
     }, r("div", {
-      key: "0150e85d50d8c69dc16a50fc900cdc78729fc6ec",
+      key: "6b0cdf179216c359cb2db01176f563d77c19780e",
       class: this.wrapperClasses
-    }, r("div", {
-      key: "6fef0d2a694ef81a7967fd86365a64237ea29d96",
+    }, this._ariaDescription && r("span", {
+      key: "816be1dac83810f66ee0204a5be1a8421833e20b",
+      id: `${this.inputId}-aria-description`,
+      class: "sr"
+    }, this._ariaDescription), r("div", {
+      key: "1e4fd3b4bbe5103b7bad2af07ebfecb36c3d1743",
       class: "label-wrapper"
     }, x(this), this.renderCountDOM()), this.renderInputContainerDOM(), v(this)));
   }
@@ -3668,6 +3765,9 @@ const N = {
       hints: [ {
         hintsObserver: 0
       } ],
+      textHidden: [ {
+        textHiddenObserver: 0
+      } ],
       type: [ {
         typeObserver: 0
       } ],
@@ -3678,6 +3778,6 @@ const N = {
   }
 };
 
-I.style = '*{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)))))}';
+I.style = '*{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)))))}';
 
 export { g as q2_badge, I as q2_input }