q2-tecton-elements 1.69.1 → 1.70.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 { c as n, d as p, s as c, h as u, o as d, 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 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 { m as g } from "./mirror-emit.js";
 
@@ -50,13 +50,13 @@ function formatNumber(t = "", r = {
   i = `${c}${s}${p}${n}`, 
   // format integerString
   s = s.replace(/\B(?=(\d{3})+(?!\d))/g, r.thousandsSeparator);
-  const u = c || s ? `${c}${s}${p}${n}` : "", d = c || s ? `${c}${r.prefix}${s}${p}${n}${r.suffix}` : "";
-  let l = u.length - i.length;
+  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);
   return {
     value: i,
-    formattedValue: u,
-    fullyFormattedValue: d,
+    formattedValue: d,
+    fullyFormattedValue: u,
     prefix: r.prefix || r.suffix,
     suffix: "",
     formattingCharacterCount: l,
@@ -128,7 +128,7 @@ function formatValue(t = "", r = "", a) {
       formattedValue: n,
       formattingCharacterCount: o
     };
-  }(t, r), p = `${e}${s}${i}`, c = r.length, u = function(t, r, a) {
+  }(t, r), p = `${e}${s}${i}`, c = r.length, d = 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
@@ -140,7 +140,7 @@ function formatValue(t = "", r = "", a) {
     prefix: e.trim() || i.trim(),
     formattingCharacterCount: n,
     maxlength: c,
-    minFormattedLength: u,
+    minFormattedLength: d,
     unformattedValue: o
   };
 }
@@ -2751,7 +2751,7 @@ function formatPostalCode(t, r = "US") {
   return a ? formatValue(t, a) : formatAlphanumeric(t);
 }
 
-const L = {
+const I = {
   "MM/DD/YYYY": "##/##/####",
   "M/D/YYYY": "#?/#?/####",
   "MM/DD/YY": "##/##/##",
@@ -2775,7 +2775,7 @@ const L = {
 };
 
 function formatDate(t, r = "MM/DD/YYYY") {
-  const a = formatValue(t, L[null == r ? void 0 : r.toUpperCase()] || L["MM/DD/YYYY"]);
+  const a = formatValue(t, I[null == r ? void 0 : r.toUpperCase()] || I["MM/DD/YYYY"]);
   return {
     ...a,
     value: a.formattedValue
@@ -2824,7 +2824,7 @@ const unknownFormatter = function(t) {
     leftIcon: "card-dinersclub-color",
     leftIconMuted: t.length < 14
   };
-}, I = {
+}, L = {
   discover: discoverFormatter,
   amex: amexFormatter,
   masterCard: masterCardFormatter,
@@ -2834,7 +2834,7 @@ const unknownFormatter = function(t) {
 };
 
 /* tslint:enable:cyclomatic-complexity */
-const F = {
+const V = {
   detectCreditCardTypeFromValue: 
   /* tslint:disable:cyclomatic-complexity */
   function(t) {
@@ -2897,7 +2897,7 @@ const F = {
   },
   format: function(t) {
     // have a initial generic mask which then converts to specific mask
-    const r = F.detectCreditCardTypeFromValue(t), a = I[r](t);
+    const r = V.detectCreditCardTypeFromValue(t), a = L[r](t);
     return t.length < 2 && "unknown" === r && (a.leftIcon = "card"), a;
   },
   amexFormatter,
@@ -2928,7 +2928,7 @@ function formatCLABE(t) {
   return formatValue(t, "##################");
 }
 
-const V = {
+const F = {
   text: "text",
   tel: "tel",
   number: "number",
@@ -2989,6 +2989,8 @@ const V = {
     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. */
     this.type = "text", 
+    /** Displays a success state icon when the field does not have active errors. */
+    this.valid = !1, 
     /**
          * Sets textSelectedForDeletion to true if the user has selected text for deletion
          * This is used to prevent other logic from running when text is deleted
@@ -3095,11 +3097,11 @@ const V = {
         var t, r;
         return null !== (r = null === (t = this.formattedValueObject) || void 0 === t ? void 0 : t.formattedValue) && void 0 !== r ? r : "";
       }
-    }), u(this), this.updateComboboxAriaLabel(), void 0 === this.textHidden && (this.textHidden = "password" === this.type), 
+    }), d(this), this.updateComboboxAriaLabel(), void 0 === this.textHidden && (this.textHidden = "password" === this.type), 
     this.manageClearableResizeObserver(this.clearable);
   }
   componentDidLoad() {
-    d(this.hostElement), this.pseudo || (this.inputField.value = this.formattedValueObject.formattedValue), 
+    u(this.hostElement), this.pseudo || (this.inputField.value = this.formattedValueObject.formattedValue), 
     this.autofocus && this.inputField.focus(), this.initMutationObserver();
   }
   componentDidRender() {
@@ -3152,7 +3154,7 @@ const V = {
   ariaLabelObserver() {
     // Skip deprecated ariaLabel handling for combobox role
     // (combobox sets aria-label directly for accessibility without hiding the visual label)
-    "combobox" !== this._role && u(this);
+    "combobox" !== this._role && d(this);
   }
   manageClearableResizeObserver(t) {
     var r;
@@ -3217,7 +3219,7 @@ const V = {
     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 && V[this.type] || "text";
+    return [ "password", "text", "ssn" ].includes(this.type) && this.textHidden ? "password" : this.type && F[this.type] || "text";
   }
   get hasCustomDisplaySlot() {
     return h(this.hostElement, "custom-display");
@@ -3231,6 +3233,9 @@ const V = {
   get hasInputRightSlot() {
     return h(this.hostElement, "input-right");
   }
+  get hasValidState() {
+    return this.valid && !this.hasError;
+  }
   get inputDescribedBy() {
     return this.showMessages ? `${this.inputId}-description` : void 0;
   }
@@ -3280,9 +3285,9 @@ const V = {
   }
   get wrapperClasses() {
     const t = [ "field-container" ];
-    return this.hasError && t.push("has-error"), this.value && t.push("has-value"), 
-    this.clearable && this.value && t.push("has-clear"), this.hasFocus && t.push("has-focus"), 
-    this.isSmall && t.push("is-small"), this.formattedValueObject.prefix && t.push("has-prefix"), 
+    return this.hasError && t.push("has-error"), this.hasValidState && t.push("has-valid"), 
+    this.value && t.push("has-value"), this.clearable && this.value && t.push("has-clear"), 
+    this.hasFocus && t.push("has-focus"), this.isSmall && t.push("is-small"), this.formattedValueObject.prefix && t.push("has-prefix"), 
     this.computedIconLeft && t.push("has-icon-left"), this.showIconSeparator && t.push("has-icon-separator"), 
     this.formattedValueObject.suffix && t.push("has-suffix"), !this.formattedValueObject.suffix && this.iconRight && t.push("has-icon-right"), 
     "currency" === this.type ? t.push("right-aligned") : t.push("left-aligned"), this.hasCustomDisplaySlot && t.push("has-custom-display"), 
@@ -3333,7 +3338,7 @@ const V = {
       swift: formatSwift,
       iban: formatIBAN,
       clabe: formatCLABE,
-      "credit-card": F.format
+      "credit-card": V.format
     };
     return a[this.type] ? a[this.type](t, this.formatModifier, r) : {
       value: t,
@@ -3436,6 +3441,13 @@ const V = {
       type: "error",
       class: "icon-error",
       "test-id": "iconError"
+    })), this.hasValidState && "currency" === this.type && e("div", {
+      class: "input-valid-icon-container",
+      "test-id": "divIconValid"
+    }, e("q2-icon", {
+      type: "success",
+      class: "icon-valid",
+      "test-id": "iconValid"
     }))), this.pseudo ? this.renderPseudoInputDOM() : this.renderStandardInputDOM(), e("div", {
       class: "input-icons-container-right"
     }, e("q2-btn", {
@@ -3462,7 +3474,14 @@ const V = {
     }, this.formattedValueObject.suffix), this.badgeValue && e("q2-badge", {
       size: "large",
       theme: this.badgeTheme
-    }, this.badgeValue), this.hasError && "currency" !== this.type && e("div", {
+    }, this.badgeValue), this.hasValidState && "currency" !== this.type && e("div", {
+      class: "input-valid-icon-container",
+      "test-id": "divIconValid"
+    }, e("q2-icon", {
+      type: "success",
+      class: "icon-valid",
+      "test-id": "iconValid"
+    })), this.hasError && "currency" !== this.type && e("div", {
       "test-id": "divIconError",
       onClick: this.onRefocusInput
     }, e("q2-icon", {
@@ -3548,15 +3567,15 @@ const V = {
   render() {
     const {ariaControls: t, ariaExpanded: r} = this.ariaAttributes;
     return e(o, {
-      key: "46cdbeba2566abda875c4aa2cf8e4faa9ea2c85c",
+      key: "edb58506d07e300340ece461b1788acfcbaf712a",
       role: this._role,
       "aria-controls": t,
       "aria-expanded": r
     }, e("div", {
-      key: "024c8a9551a4ae3661109e30da7f651b1b8fc7af",
+      key: "10bcd4e4adb9614628958029aca0d7cb96593c31",
       class: this.wrapperClasses
     }, e("div", {
-      key: "11c2a87970b4a32d2b2efa7f2bad892ac0db63bf",
+      key: "bfad0e782b14bc1ab1c2fd01cacc79d76f82f6ab",
       class: "label-wrapper"
     }, v(this), this.renderCountDOM()), this.renderInputContainerDOM(), b(this)));
   }
@@ -3598,7 +3617,7 @@ const V = {
     };
   }
   static get style() {
-    return '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{--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, 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, 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, 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{--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)));width:100%}.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, 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))}.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}: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, 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, 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, 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, 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)))))}';
   }
 }, [ 257, "q2-input", {
   _preventEntry: [ 1028, "_prevent-entry" ],
@@ -3640,6 +3659,7 @@ const V = {
   step: [ 514 ],
   textHidden: [ 1540, "text-hidden" ],
   type: [ 513 ],
+  valid: [ 516 ],
   validity: [ 1040 ],
   value: [ 1025 ],
   checkSlotCount: [ 32 ],

package/dist/components/q2-item2.js

@@ -132,7 +132,7 @@ const n =  t(class extends e {
     return this;
   }
   static get style() {
-    return "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}:host .item{--comp-border-radius:var(--tct-item-border-radius, var(--app-border-radius-0, 0))}:host([clickable]){cursor:pointer;--comp-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040)))}:host([clickable]) .item{--comp-border-radius:var(--tct-item-border-radius, var(--app-border-radius-1, 4px));--comp-btn-tween:var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-active-box-shadow:var(--tct-btn-primary-active-background, #0063a0);--comp-font-color:var(--tct-btn-primary-font-color, var(--app-white, #ffffff));--comp-hover-outer-ring-color:var(--tct-btn-primary-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-primary-hover-inner-ring-color, var(--comp-font-color));--comp-hover-box-shadow:var(       --tct-btn-primary-hover-box-shadow,       0 0 0 2px var(--comp-hover-inner-ring-color),       0 0 0 4px var(--comp-hover-outer-ring-color)   )}:host([clickable]) .item:active{box-shadow:var(--comp-active-box-shadow)}:host([clickable]) .item:focus-visible{box-shadow:var(--const-double-focus-ring)}:host([clickable]:is(:not([disabled]),[disabled=false]):is(:not([aria-disabled]),[aria-disabled=false])) .item:hover{background-color:var(--tct-item-hover-background, var(--t-base-hover))}.action{--tct-btn-icon-height:var(--tct-item-action-icon-height, var(--app-scale-6x, 30px));--tct-btn-icon-width:var(--tct-item-action-icon-width, var(--app-scale-6x, 30px));--tct-icon-size:var(--tct-item-action-icon-size, var(--app-scale-6x, 30px));--tct-radio-label-hidden-columns:18px;--tct-radio-label-margin-right:0;--tct-radio-margin:0;align-items:var(--tct-item-action-align-items, center);display:flex;grid-row:1;justify-content:center}.action-no-bullet{grid-column:2}.body{color:var(--tct-item-body-color, var(--t-textA, #747474));font-size:var(--tct-item-body-font-size, var(--app-font-size, 14px));font-weight:var(--tct-item-body-font-weight, 400);font-style:var(--tct-item-body-font-style, inherit)}.bullet{--tct-avatar-fallback-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-fallback-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px));--tct-avatar-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px));grid-column:1;grid-row-start:1;grid-row-end:3;padding-top:var(--tct-item-bullet-padding-top, var(--app-scale-1x, 5px));text-align:center}.bullet-no-footer{grid-row-end:2}.vertical-align-center{align-self:center;padding-top:0}.vertical-align-bottom{align-self:end;padding-top:0}.vertical-align-single-content{grid-row-end:2}.footer{color:var(--tct-item-footer-color, inherit);font-size:var(--tct-item-footer-font-size, inherit);font-weight:var(--tct-item-footer-font-weight, inherit);font-style:var(--tct-item-footer-font-style, inherit);grid-column-start:2;grid-column-end:4;grid-row:2}.footer-no-action-nor-bullet{grid-column-start:1;grid-column-end:2}.footer-no-action{grid-column-start:2;grid-column-end:3}.footer-no-bullet{grid-column-start:1;grid-column-end:3}.vertical-align-footer-center{align-self:center;grid-row:1}.vertical-align-footer-bottom{align-self:end;grid-row:1}.header{color:var(--tct-item-header-color, var(--t-text, #4d4d4d));font-size:var(--tct-item-header-font-size, 16px);font-style:var(--tct-item-header-font-style, inherit);font-weight:var(--tct-item-header-font-weight, 600);line-height:var(--tct-item-header-line-height, 1.5)}.item{font-style:var(--tct-item-font-style, inherit);border:var(--tct-item-border);border-radius:var(--comp-border-radius);transition:box-shadow var(--comp-btn-tween), background-color var(--t-tween-time-out-1, 100ms) var(--t-tween-ease-out);column-gap:var(--tct-item-horizontal-spacing, var(--app-scale-3x, 15px));display:grid;grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(0, 1fr) minmax(var(--app-scale-5x, 25px), auto);grid-template-rows:auto auto;padding:var(--tct-item-padding, 0);row-gap:var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px))}.item-no-action-nor-bullet{grid-template-columns:auto}.item-no-action{grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(0, 1fr)}.item-no-footer{grid-template-rows:auto}.item-no-bullet{grid-template-columns:minmax(0, 1fr) minmax(var(--app-scale-5x, 25px), auto)}.item-single-content{grid-template-rows:auto}.main{grid-column:2;grid-row:1}.main-no-action-nor-bullet{grid-column:1}.main-no-bullet{grid-column:1}.vertical-align-main-center{align-self:center}.vertical-align-main-bottom{align-self:end}";
+    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}*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}:host .item{--comp-border-radius:var(--tct-item-border-radius, var(--app-border-radius-0, 0))}:host([clickable]){cursor:pointer;--comp-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040)))}:host([clickable]) .item{--comp-border-radius:var(--tct-item-border-radius, var(--app-border-radius-1, 4px));--comp-btn-tween:var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-active-box-shadow:var(--tct-btn-primary-active-background, #0063a0);--comp-font-color:var(--tct-btn-primary-font-color, var(--app-white, #ffffff));--comp-hover-outer-ring-color:var(--tct-btn-primary-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-primary-hover-inner-ring-color, var(--comp-font-color));--comp-hover-box-shadow:var(       --tct-btn-primary-hover-box-shadow,       0 0 0 2px var(--comp-hover-inner-ring-color),       0 0 0 4px var(--comp-hover-outer-ring-color)   )}:host([clickable]) .item:active{box-shadow:var(--comp-active-box-shadow)}:host([clickable]) .item:focus-visible{box-shadow:var(--const-double-focus-ring)}:host([clickable]:is(:not([disabled]),[disabled=false]):is(:not([aria-disabled]),[aria-disabled=false])) .item:hover{background-color:var(--tct-item-hover-background, var(--t-base-hover))}.action{--tct-radio-label-hidden-columns:18px;--tct-radio-label-margin-right:0;--tct-radio-margin:0;align-items:var(--tct-item-action-align-items, center);display:flex;grid-row:1;justify-content:center}.action-no-bullet{grid-column:2}.action ::slotted(q2-dropdown[type=icon]),.action ::slotted(q2-btn:not([intent])){--tct-btn-icon-height:var(--tct-item-action-icon-height, var(--app-scale-6x, 30px));--tct-btn-icon-width:var(--tct-item-action-icon-width, var(--app-scale-6x, 30px));--tct-icon-size:var(--tct-item-action-icon-size, var(--app-scale-6x, 30px));--tct-btn-icon-padding:var(--tct-item-action-btn-icon-padding, 0)}.body{color:var(--tct-item-body-color, inherit);font-size:var(--tct-item-body-font-size, var(--app-font-size, 14px));font-weight:var(--tct-item-body-font-weight, 400);font-style:var(--tct-item-body-font-style, inherit)}.bullet{--tct-avatar-fallback-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-fallback-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px));--tct-avatar-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px));grid-column:1;grid-row-start:1;grid-row-end:3;padding-top:var(--tct-item-bullet-padding-top, var(--app-scale-1x, 5px));text-align:center}.bullet-no-footer{grid-row-end:2}.vertical-align-center{align-self:center;padding-top:0}.vertical-align-bottom{align-self:end;padding-top:0}.vertical-align-single-content{grid-row-end:2}.footer{color:var(--tct-item-footer-color, inherit);font-size:var(--tct-item-footer-font-size, inherit);font-weight:var(--tct-item-footer-font-weight, inherit);font-style:var(--tct-item-footer-font-style, inherit);grid-column-start:2;grid-column-end:4;grid-row:2}.footer-no-action-nor-bullet{grid-column-start:1;grid-column-end:2}.footer-no-action{grid-column-start:2;grid-column-end:3}.footer-no-bullet{grid-column-start:1;grid-column-end:3}.vertical-align-footer-center{align-self:center;grid-row:1}.vertical-align-footer-bottom{align-self:end;grid-row:1}.header{color:var(--tct-item-header-color, inherit);font-size:var(--tct-item-header-font-size, 16px);font-style:var(--tct-item-header-font-style, inherit);font-weight:var(--tct-item-header-font-weight, 600);line-height:var(--tct-item-header-line-height, 1.5)}.item{font-style:var(--tct-item-font-style, inherit);border:var(--tct-item-border);border-radius:var(--comp-border-radius);transition:box-shadow var(--comp-btn-tween), background-color var(--t-tween-time-out-1, 100ms) var(--t-tween-ease-out);column-gap:var(--tct-item-horizontal-spacing, var(--app-scale-3x, 15px));display:grid;grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(0, 1fr) minmax(var(--app-scale-5x, 25px), auto);grid-template-rows:auto auto;padding:var(--tct-item-padding, 0);row-gap:var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px))}.item-no-action-nor-bullet{grid-template-columns:auto}.item-no-action{grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(0, 1fr)}.item-no-footer{grid-template-rows:auto}.item-no-bullet{grid-template-columns:minmax(0, 1fr) minmax(var(--app-scale-5x, 25px), auto)}.item-single-content{grid-template-rows:auto}.main{grid-column:2;grid-row:1}.main-no-action-nor-bullet{grid-column:1}.main-no-bullet{grid-column:1}.vertical-align-main-center{align-self:center}.vertical-align-main-bottom{align-self:end}";
   }
 }, [ 257, "q2-item", {
   clickable: [ 516 ],

package/dist/components/q2-legend2.js

@@ -1,12 +1,12 @@
-import { proxyCustomElement as t, HTMLElement as e, createEvent as i, h as s, transformTag as n } from "@stencil/core/internal/client";
+import { proxyCustomElement as e, HTMLElement as t, createEvent as i, h as s, transformTag as n } from "@stencil/core/internal/client";
 
 import { m as o } from "./mirror-emit.js";
 
 import { d as a } from "./click-elsewhere2.js";
 
-const r =  t(class extends e {
-  constructor(t) {
-    super(), !1 !== t && this.__registerHost(), this.__attachShadow(), this.click = i(this, "click", 7), 
+const r =  e(class extends t {
+  constructor(e) {
+    super(), !1 !== e && this.__registerHost(), this.__attachShadow(), this.click = i(this, "click", 7), 
     this.mouseenter = i(this, "mouseenter", 7), this.mouseleave = i(this, "mouseleave", 7), 
     this.tctClick = i(this, "tctClick", 7), this.tctMouseEnter = i(this, "tctMouseEnter", 7), 
     this.tctMouseLeave = i(this, "tctMouseLeave", 7), 
@@ -28,65 +28,65 @@ const r =  t(class extends e {
   }
   // #endregion
   // #region Watchers
-  watchHoveredItemId(t) {
-    const e = this.getDataIndexForId(t);
-    this.hoveredItemIndex = e;
+  watchHoveredItemId(e) {
+    const t = this.getDataIndexForId(e);
+    this.hoveredItemIndex = t;
   }
-  watchSelectedItemId(t) {
-    const e = this.getDataIndexForId(t);
-    this.selectedItemIndex = e;
+  watchSelectedItemId(e) {
+    const t = this.getDataIndexForId(e);
+    this.selectedItemIndex = t;
   }
   // #endregion
   // #region Local Methods
   get dataWithClasses() {
-    return this.data.map(((t, e) => ({
-      ...t,
+    return this.data.map(((e, t) => ({
+      ...e,
       classes: {
         "item-button": !0,
-        "item-button-faded": this.isItemButtonFaded(e),
-        "item-button-selected": this.isItemButtonSelected(e)
+        "item-button-faded": this.isItemButtonFaded(t),
+        "item-button-selected": this.isItemButtonSelected(t)
       }
     })));
   }
-  formatValue(t) {
-    const e = parseFloat(t.toString());
+  formatValue(e) {
+    const t = parseFloat(e.toString());
     return "currency" === this.format ? Intl.NumberFormat("en-US", {
       style: "currency",
       currency: "USD",
       maximumFractionDigits: this.currencyRound ? 0 : 2
-    }).format(e) : Intl.NumberFormat("en-US").format(e);
+    }).format(t) : Intl.NumberFormat("en-US").format(t);
   }
-  getDataIndexForId(t) {
-    const e = this.data.findIndex((e => e.id === t));
-    return e >= 0 ? e : -1;
+  getDataIndexForId(e) {
+    const t = this.data.findIndex((t => t.id === e));
+    return t >= 0 ? t : -1;
   }
-  isItemButtonFaded(t) {
-    return !this.isItemButtonSelected(t) && t != this.hoveredItemIndex && (this.selectedItemIndex >= 0 && -1 === this.hoveredItemIndex || this.hoveredItemIndex >= 0 && t !== this.hoveredItemIndex);
+  isItemButtonFaded(e) {
+    return !this.isItemButtonSelected(e) && e != this.hoveredItemIndex && (this.selectedItemIndex >= 0 && -1 === this.hoveredItemIndex || this.hoveredItemIndex >= 0 && e !== this.hoveredItemIndex);
   }
-  isItemButtonSelected(t) {
-    return t === this.selectedItemIndex;
+  isItemButtonSelected(e) {
+    return e === this.selectedItemIndex;
   }
-  onClick(t, e) {
-    t.stopPropagation();
-    const i = this.getDataIndexForId(e.id);
-    if (this.selectedItemIndex === i) return this.selectedItemIndex = -1, 0 === t.detail ? 
+  onClick(e, t) {
+    e.stopPropagation();
+    const i = this.getDataIndexForId(t.id);
+    if (this.selectedItemIndex === i) return this.selectedItemIndex = -1, 0 === e.detail ? 
     // Keyboard click
     this.hoveredItemIndex = -1 : 
     // Mouse click
     this.hoveredItemIndex = i, void o(this, [ "click", "tctClick" ], null);
     this.selectedItemIndex = i, o(this, [ "click", "tctClick" ], this.data[i]);
   }
-  onClickElsewhere(t) {
-    t.selectedItemIndex = -1;
+  onClickElsewhere(e) {
+    e.selectedItemIndex = -1;
   }
-  onMouseEnter(t, e) {
-    t.stopPropagation();
-    const i = this.getDataIndexForId(e.id);
+  onMouseEnter(e, t) {
+    e.stopPropagation();
+    const i = this.getDataIndexForId(t.id);
     this.hoveredItemIndex = i, o(this, [ "mouseenter", "tctMouseEnter" ], this.data[i]);
   }
-  onMouseLeave(t, e) {
-    t.stopPropagation();
-    const i = this.getDataIndexForId(e.id);
+  onMouseLeave(e, t) {
+    e.stopPropagation();
+    const i = this.getDataIndexForId(t.id);
     this.hoveredItemIndex = -1, o(this, [ "mouseleave", "tctMouseLeave" ], this.data[i]);
   }
   // #endregion
@@ -97,30 +97,30 @@ const r =  t(class extends e {
       onChange: () => this.onClickElsewhere(this)
     }, s("ul", {
       key: "2842a006e6aab9d478bf900e13e0f45c14ec4a67"
-    }, this.dataWithClasses.map((t => s("li", {
+    }, this.dataWithClasses.map((e => s("li", {
       class: "item"
     }, s("button", {
       "test-id": "item",
-      "aria-label": `${t.name} ${this.formatValue(t.value)}`,
-      class: t.classes,
-      onClick: e => this.onClick(e, t),
-      onMouseEnter: e => this.onMouseEnter(e, t),
-      onMouseLeave: e => this.onMouseLeave(e, t)
+      "aria-label": `${e.name} ${this.formatValue(e.value)}`,
+      class: e.classes,
+      onClick: t => this.onClick(t, e),
+      onMouseEnter: t => this.onMouseEnter(t, e),
+      onMouseLeave: t => this.onMouseLeave(t, e)
     }, s("span", {
       "test-id": "itemColor",
       class: "item-color-indicator",
       style: {
-        backgroundColor: t.color
+        backgroundColor: e.color
       },
       "aria-hidden": "true"
     }), s("span", {
       "test-id": "itemName",
       class: "item-name"
-    }, t.name), s("span", {
-      id: `item-${t.id}`,
+    }, e.name), s("span", {
+      id: `item-${e.id}`,
       "test-id": "itemValue",
       class: "item-value"
-    }, this.formatValue(t.value))))))));
+    }, this.formatValue(e.value))))))));
   }
   static get watchers() {
     return {
@@ -133,7 +133,7 @@ const r =  t(class extends e {
     };
   }
   static get style() {
-    return "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{position:relative;width:100%;display:block}ul{list-style:none;padding:0;margin:0}.item-button{align-items:flex-start;background-color:transparent;border:none;column-gap:var(--tct-legend-item-gap, var(--app-scale-2x, 10px));display:flex;min-height:var(--tct-legend-item-min-height, 15px);opacity:1;padding:var(--tct-legend-item-padding, 0 0 9px 0);transition:opacity var(--app-tween-1, 0.2s ease);width:100%}.item-button:focus-visible{box-shadow:var(--tct-legend-item-focus-visible-box-shadow, var(--aesthetic-focus-ring-shadow))}.item-button:hover{cursor:pointer}.item-button-faded>*{opacity:var(--tct-legend-item-opacity-faded, var(--app-disabled-opacity, 0.4))}.item-color-indicator{border-radius:50%;display:inline-block;flex-shrink:0;height:var(--tct-legend-item-color-indicator-size, var(--app-scale-3x, 15px));width:var(--tct-legend-item-color-indicator-size, var(--app-scale-3x, 15px))}.item-name{color:var(--tct-legend-item-name-font-color, var(--t-text, #4d4d4d));display:inline-block;flex-grow:1;font-size:var(--tct-legend-item-name-font-size, var(--app-font-size, 14px));font-weight:var(--tct-legend-item-name-font-weight, 600);line-height:var(--tct-legend-item-name-line-height, 1);text-align:left}.item-value{color:var(--tct-legend-item-value-font-color, var(--t-text, #4d4d4d));display:inline-block;margin-left:auto;flex-grow:0;font-size:var(--tct-legend-item-value-font-size, var(--app-font-size, 14px));font-weight:var(--tct-legend-item-value-font-weight, 400);line-height:var(--tct-legend-item-value-line-height, 1);text-align:right}";
+    return "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{position:relative;width:100%;display:block}ul{list-style:none;padding:0;margin:0}.item-button{align-items:flex-start;background-color:transparent;border:none;column-gap:var(--tct-legend-item-gap, var(--app-scale-2x, 10px));display:flex;min-height:var(--tct-legend-item-min-height, 15px);opacity:1;padding:var(--tct-legend-item-padding, 0 0 9px 0);transition:opacity var(--app-tween-1, 0.2s ease);width:100%}.item-button:focus-visible{box-shadow:var(--tct-legend-item-focus-visible-box-shadow, var(--aesthetic-focus-ring-shadow))}.item-button:hover{cursor:pointer}.item-button-faded>*{opacity:var(--tct-legend-item-opacity-faded, var(--app-disabled-opacity, 0.4))}.item-color-indicator{border-radius:50%;display:inline-block;flex-shrink:0;height:var(--tct-legend-item-color-indicator-size, var(--app-scale-3x, 15px));width:var(--tct-legend-item-color-indicator-size, var(--app-scale-3x, 15px))}.item-name{color:var(--tct-legend-item-name-font-color, inherit);display:inline-block;flex-grow:1;font-size:var(--tct-legend-item-name-font-size, var(--app-font-size, 14px));font-weight:var(--tct-legend-item-name-font-weight, 600);line-height:var(--tct-legend-item-name-line-height, 1);text-align:left}.item-value{color:var(--tct-legend-item-value-font-color, inherit);display:inline-block;margin-left:auto;flex-grow:0;font-size:var(--tct-legend-item-value-font-size, var(--app-font-size, 14px));font-weight:var(--tct-legend-item-value-font-weight, 400);line-height:var(--tct-legend-item-value-line-height, 1);text-align:right}";
   }
 }, [ 1, "q2-legend", {
   currencyRound: [ 4, "currency-round" ],
@@ -154,14 +154,14 @@ const r =  t(class extends e {
 
 function defineCustomElement() {
   if ("undefined" == typeof customElements) return;
-  [ "q2-legend", "click-elsewhere" ].forEach((t => {
-    switch (t) {
+  [ "q2-legend", "click-elsewhere" ].forEach((e => {
+    switch (e) {
      case "q2-legend":
-      customElements.get(n(t)) || customElements.define(n(t), r);
+      customElements.get(n(e)) || customElements.define(n(e), r);
       break;
 
      case "click-elsewhere":
-      customElements.get(n(t)) || a();
+      customElements.get(n(e)) || a();
     }
   }));
 }

package/dist/components/q2-list2.js

@@ -75,7 +75,7 @@ const r =  e(class extends t {
     return this;
   }
   static get style() {
-    return "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host([bordered]:not([bordered=false])) ::slotted(q2-item:not(:last-child)),:host([bordered]:not([bordered=false])) .header{border-style:var(--tct-list-item-border-style, solid);border-width:var(--tct-list-item-border-width, 0 0 1px 0);border-color:var(--tct-list-item-border-color, var(--t-gray-12, #d9d9d9))}::slotted(q2-item){--comp-item-padding:var(--tct-list-item-padding, var(--app-scale-2x, 10px) var(--app-scale-4x, 20px));--tct-item-padding:var(--comp-item-padding)}.header{--comp-default-header-padding:0 var(--app-scale-4x, 20px);display:flex;gap:var(--app-scale-3x, 12px);padding:var(--tct-list-header-padding, var(--comp-default-header-padding));min-height:var(--tct-list-header-min-height, var(--t-list-header-min-height, 44px))}.header-spacebetween{justify-content:space-between}.header-start{justify-content:flex-start}.header-end{justify-content:flex-end}.header .label{width:100%;height:var(--tct-list-label-height, 44px);line-height:var(--tct-list-label-line-height, 44px);font-size:var(--tct-list-label-font-size, var(--app-font-size, 14px));font-weight:var(--tct-list-label-font-weight, 600);color:var(--tct-list-label-font-color, var(--t-text, #4d4d4d))}slot:not([name]){display:flex;flex-direction:column;gap:var(--tct-list-item-gap, 0)}";
+    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}*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host([bordered]:not([bordered=false])) ::slotted(q2-item:not(:last-child)),:host([bordered]:not([bordered=false])) .header{border-style:var(--tct-list-item-border-style, solid);border-width:var(--tct-list-item-border-width, 0 0 1px 0);border-color:var(--tct-list-item-border-color, var(--t-gray-12, #d9d9d9))}::slotted(q2-item){--comp-item-padding:var(--tct-list-item-padding, var(--app-scale-2x, 10px) var(--app-scale-4x, 20px));--tct-item-padding:var(--comp-item-padding)}.header{--comp-default-header-padding:0 var(--app-scale-4x, 20px);display:flex;gap:var(--app-scale-3x, 12px);padding:var(--tct-list-header-padding, var(--comp-default-header-padding));min-height:var(--tct-list-header-min-height, var(--t-list-header-min-height, 44px))}.header-spacebetween{justify-content:space-between}.header-start{justify-content:flex-start}.header-end{justify-content:flex-end}.header .label{width:100%;height:var(--tct-list-label-height, 44px);line-height:var(--tct-list-label-line-height, 44px);font-size:var(--tct-list-label-font-size, var(--app-font-size, 14px));font-weight:var(--tct-list-label-font-weight, 600);color:var(--tct-list-label-font-color, inherit)}slot:not([name]){display:flex;flex-direction:column;gap:var(--tct-list-item-gap, 0)}";
   }
 }, [ 257, "q2-list", {
   bordered: [ 1540 ],

package/dist/components/q2-loc.js

@@ -1,10 +1,19 @@
-import { proxyCustomElement as t, HTMLElement as s, transformTag as e } from "@stencil/core/internal/client";
+import { proxyCustomElement as t, HTMLElement as s, transformTag as i } from "@stencil/core/internal/client";
+
+import { s as e } from "./sanitize-html-string.js";
 
 import { l as n } from "./index2.js";
 
-const i =  t(class extends s {
+const o =  t(class extends s {
   constructor(t) {
-    super(), !1 !== t && this.__registerHost(), this.initMutationObserver = () => {
+    super(), !1 !== t && this.__registerHost(), 
+    // #endregion
+    // #region Public Property API
+    /**
+         * When true, allows HTML tags in the localized string to be rendered as HTML.
+         * @warning Only use this with trusted localization strings, as it uses innerHTML and may expose XSS vulnerabilities. See the FAQ "Can I add HTML to my localization strings?" for usage guidance.
+         */
+    this.ignoreTag = !1, this.initMutationObserver = () => {
       if (!("MutationObserver" in window)) return;
       const t = new MutationObserver(this.mutationHandler);
       t.observe(this.hostElement, {
@@ -32,32 +41,38 @@ const i =  t(class extends s {
   componentDidLoad() {
     this.initMutationObserver();
   }
+  componentDidRender() {
+    this.ignoreTag && (this.hostElement.innerHTML = e(this.translatedValue));
+  }
   // #endregion
   // #region Local Methods
   get hostTextContent() {
     return this.hostElement.textContent.trim();
   }
   get translatedValue() {
-    return n(this.value, this.substitutions);
+    return n(this.value, this.substitutions, this.ignoreTag ? {
+      ignoreTag: !0
+    } : void 0);
   }
   // #endregion
   // #region Render Methods
   render() {
-    return this.translatedValue;
+    return this.ignoreTag ? null : this.translatedValue;
   }
   get hostElement() {
     return this;
   }
 }, [ 0, "q2-loc", {
+  ignoreTag: [ 4, "ignore-tag" ],
   substitutions: [ 16 ],
   value: [ 1537 ]
 } ]);
 
-const o = i, defineCustomElement = function() {
+const r = o, defineCustomElement = function() {
   if ("undefined" == typeof customElements) return;
   [ "q2-loc" ].forEach((t => {
-    if ("q2-loc" === t) customElements.get(e(t)) || customElements.define(e(t), i);
+    if ("q2-loc" === t) customElements.get(i(t)) || customElements.define(i(t), o);
   }));
 };
 
-export { o as Q2Loc, defineCustomElement }
+export { r as Q2Loc, defineCustomElement }