q2-tecton-elements 1.34.0 → 1.35.1

package/dist/components/index9.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
-import { k as isMobile, c as createGuid, s as setMessageHeight, h as handleAriaLabel, o as overrideFocus, l as loc, i as isEventFromElement, g as labelDOM, m as messagesDOM } from './index16.js';
+import { p as isMobile, c as createGuid, s as setMessageHeight, h as handleAriaLabel, o as overrideFocus, l as loc, i as isEventFromElement, g as labelDOM, m as messagesDOM } from './index16.js';
 import { d as defineCustomElement$4 } from './index4.js';
 import { d as defineCustomElement$3 } from './index5.js';
 import { d as defineCustomElement$2 } from './index8.js';
@@ -2875,7 +2875,7 @@ const formatCreditCard = {
   unknownFormatter,
 };
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}: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;margin:var(--tct-input-margin-top, var(--t-input-margin-top, var(--app-scale-6x, 30px))) 0 var(--tct-input-margin-bottom, var(--t-input-margin-bottom, var(--app-scale-6x, 30px)));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))))}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)));--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:block;padding:var(--comp-label-padding);margin:var(--comp-label-margin);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, normal));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, 12px));font-weight:var(--tct-input-label-optional-font-weight, var(--t-input-label-optional-font-weight, 400))}.input-container{--comp-input-background:var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--t-gray-14, #fcfcfd))));--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, 3px))));--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, 3px))));--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, 3px))));--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, 3px))));--comp-input-border-radius:var(--comp-input-border-top-left-radius) var(--comp-input-border-top-right-radius)\n      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)\n      var(--tct-input-border-bottom-width, 1px) var(--tct-input-border-left-width, 1px);--comp-input-focus-border-width:var(--tct-input-focus-border-top-width, 1px)\n      var(--tct-input-focus-border-right-width, 1px) var(--tct-input-focus-border-bottom-width, 1px)\n      var(--tct-input-focus-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);background:var(--comp-input-background);display:flex;align-items:center;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: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))))}.input-field{--comp-input-padding:var(--tct-input-padding, 0 var(--tct-input-horizontal-padding, var(--t-input-horizontal-padding, var(--tct-scale-2, var(--app-scale-2x, 10px)))));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(--comp-input-padding);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));}.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-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(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}.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%}.has-error .input-container:hover{--comp-input-hover-ring-color:var(--tct-input-error-border-color, var(--t-input-error-border-color));--comp-input-hover-ring:0 0 0 2px var(--t-base), 0 0 0 4px var(--comp-input-hover-ring-color)}.input-container:hover{border-width:var(--tct-input-hover-border-width, var(--comp-input-border-width));border-color:var(--tct-input-hover-border-color, var(--comp-input-border-color));background:var(--tct-input-hover-background, var(--comp-input-background));box-shadow:var(--comp-input-hover-ring), var(--tct-input-hover-box-shadow, var(--t-input-hover-box-shadow, 0 0 transparent))}.has-focus .input-container{border-width:var(--tct-input-focus-border-width, var(--comp-input-focus-border-width));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));box-shadow:var(--const-double-focus-ring), var(--tct-input-focus-box-shadow, var(--t-input-focus-box-shadow, 0 0 transparent))}.has-focus .input-container:hover{border-width:var(--tct-input-hover-border-width, var(--comp-input-border-width));border-color:var(--tct-input-hover-border-color, var(--comp-input-border-color));background:var(--tct-input-hover-background, var(--comp-input-background));box-shadow:var(--comp-input-hover-ring), var(--tct-input-hover-box-shadow, var(--t-input-hover-box-shadow, 0 0 transparent))}.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)))))}.pseudo-input-container{min-width:0;flex:1}.input-icons-container-left,.input-icons-container-right{display:flex;flex-direction:row;align-items:center;gap:var(--comp-input-horizontal-gap)}.input-icons-container-left>div:not(.vertical-separator),.input-icons-container-right>div:not(.vertical-separator){min-width:var(--tct-icon-min-width, 44px);display:flex;justify-content:center;align-items:center}.input-icons-container-left:empty,.input-icons-container-right:empty{display:none}.input-icons-container-left{padding-left:var(--comp-input-horizontal-gap)}.input-icons-container-right{padding-right:var(--comp-input-horizontal-gap)}.input-icons-container-right .btn-visibility-toggle{color:var(--tct-primary, var(--t-primary, #006eb2));font-size: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)))))}.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));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:calc(\n        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))\n    );border-bottom-left-radius:calc(\n        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))\n    );pointer-events:none;}.input-suffix{border-top-right-radius:calc(\n        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))\n    );border-bottom-right-radius:calc(\n        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))\n    )}.icon-error{color:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000))}.pw-show{position:absolute;margin-right:var(--tct-scale-2, var(--app-scale-2x, 10px))}.btn-clear{--tct-icon-size:17px}.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, 0 2px 4px rgba(0, 0, 0, 0.3)))));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:2px;z-index:1;position:absolute;width:100%;color:var(--tct-input-messages-font-color, var(--t-input-messages-font-color, 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))))))))))}.has-error .input-container:not(:focus-within){border-color:var(--tct-input-error-border-color, var(--t-input-error-border-color, var(--const-stoplight-alert, #c30000)))}.icon-left{width:26px;height:26px}.vertical-separator{height:calc(var(--comp-input-min-height) - 2px);border-right:1px solid 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)))))}";
+const stylesCss = "* {\n  box-sizing: border-box;\n}\n\n*:active {\n  outline: none;\n}\n\n*:focus {\n  outline: none;\n  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C);\n}\n\n:host {\n  box-shadow: none !important;\n}\n\n::-moz-focus-inner {\n  border: none;\n}\n\ninput,\ntextarea,\nbutton {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n}\n\n:host(.sr),\n:host(.sr) button {\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n  white-space: nowrap;\n}\n\n.sr,\n.sr button {\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n  white-space: nowrap;\n}\n\n.hidden {\n  display: none;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.invisible {\n  visibility: hidden;\n}\n\n:host {\n  display: block;\n  margin: var(--tct-input-margin-top, var(--t-input-margin-top, var(--app-scale-6x, 30px))) 0 var(--tct-input-margin-bottom, var(--t-input-margin-bottom, var(--app-scale-6x, 30px)));\n  font-size: var(--tct-input-font-size, var(--t-input-font-size, var(--app-font-size, inherit)));\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.field-container,\n.input-container {\n  position: relative;\n}\n\n.field-container {\n  --comp-input-tween: var(--tct-input-tween, var(--t-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))));\n}\n\nlabel {\n  --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)));\n  --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)))));\n  display: block;\n  padding: var(--comp-label-padding);\n  margin: var(--comp-label-margin);\n  color: var(--tct-input-label-font-color, var(--t-input-label-font-color, inherit));\n  font-size: var(--tct-input-label-font-size, var(--t-input-label-font-size, inherit));\n  font-weight: var(--tct-input-label-font-weight, var(--t-input-label-font-weight, 600));\n  text-transform: var(--tct-input-label-text-transform, var(--t-input-label-text-transform, none));\n  letter-spacing: var(--tct-input-label-letter-spacing, var(--t-input-label-letter-spacing, normal));\n  transition: color var(--comp-input-tween);\n}\n\n.optional-tag {\n  --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)))));\n  margin: var(--comp-label-optional-margin);\n  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)))));\n  font-size: var(--tct-input-label-optional-font-size, var(--t-input-label-optional-font-size, 12px));\n  font-weight: var(--tct-input-label-optional-font-weight, var(--t-input-label-optional-font-weight, 400));\n}\n\n.input-container {\n  --comp-input-background: var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--t-gray-14, #fcfcfd))));\n  --comp-input-horizontal-gap: var(--tct-input-horizontal-gap, var(--t-input-horizontal-gap, 0));\n  --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, 3px))));\n  --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, 3px))));\n  --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, 3px))));\n  --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, 3px))));\n  --comp-input-border-radius: var(--comp-input-border-top-left-radius) var(--comp-input-border-top-right-radius)\n      var(--comp-input-border-bottom-right-radius) var(--comp-input-border-bottom-left-radius);\n  --comp-input-border-width: var(--tct-input-border-top-width, 1px) var(--tct-input-border-right-width, 1px)\n      var(--tct-input-border-bottom-width, 1px) var(--tct-input-border-left-width, 1px);\n  --comp-input-focus-border-width: var(--tct-input-focus-border-top-width, 1px)\n      var(--tct-input-focus-border-right-width, 1px) var(--tct-input-focus-border-bottom-width, 1px)\n      var(--tct-input-focus-border-left-width, 1px);\n  --comp-input-border-color: var(--tct-input-border-color, var(--t-input-border-color, var(--t-a11y-gray-color-AA, #404040)));\n  --comp-input-prefix-clearance: calc(3 * var(--tct-input-prefix-font-size, 14px) + var(--tct-scale-1, 5px));\n  --comp-input-icon-clearance: 34px;\n  --comp-input-min-height: var(--tct-input-min-height, var(--t-input-min-height, 44px));\n  --comp-input-max-height: var(--tct-input-max-height, var(--t-input-max-height));\n  --comp-input-hover-ring-color: var(--tct-input-hover-ring-color, var(--t-input-hover-ring-color));\n  --comp-input-hover-ring: 0 0 0 2px var(--t-base), 0 0 0 4px var(--comp-input-hover-ring-color);\n  container-type: inline-size;\n  background: var(--comp-input-background);\n  display: flex;\n  align-items: center;\n  border-width: var(--comp-input-border-width);\n  border-style: solid;\n  border-color: var(--comp-input-border-color);\n  border-radius: var(--comp-input-border-radius);\n  box-shadow: var(--tct-input-box-shadow, var(--t-input-box-shadow, none));\n  transition: border-width var(--comp-input-tween), border-color var(--comp-input-tween), box-shadow var(--comp-input-tween);\n}\n:host([disabled]:not([disabled=false])) .input-container {\n  cursor: not-allowed;\n  opacity: var(--tct-input-disabled-opacity, var(--t-input-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));\n}\n\n.input-field {\n  --comp-input-padding: var(--tct-input-padding, 0 var(--tct-input-horizontal-padding, var(--t-input-horizontal-padding, var(--tct-scale-2, var(--app-scale-2x, 10px)))));\n  flex: 1;\n  border: 0;\n  -webkit-appearance: none;\n  appearance: none;\n  box-sizing: border-box;\n  min-height: var(--comp-input-min-height);\n  max-height: var(--comp-input-max-height);\n  overflow-y: hidden;\n  height: var(--tct-input-height, var(--t-input-height, 44px));\n  width: 100%;\n  padding: var(--comp-input-padding);\n  background: transparent;\n  color: var(--tct-input-font-color, var(--t-input-font-color, var(--t-text, inherit)));\n  display: inline-block;\n  text-align: var(--tct-input-align, \"start\");\n  font-weight: var(--tct-input-font-weight, var(--t-input-font-weight, 400));\n  /* To remove up/down arrow in number field for webkit based browser */\n  /* For Firefox */\n}\n.input-field:focus {\n  outline: none;\n  box-shadow: none;\n}\n.input-field::-webkit-outer-spin-button, .input-field::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.input-field[type=number] {\n  -moz-appearance: textfield;\n}\n.input-field::-ms-clear {\n  display: none;\n}\n.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 {\n  display: none;\n}\n.input-field[disabled]:not([disabled=false]) {\n  cursor: not-allowed;\n}\n.right-aligned .input-field {\n  text-align: right;\n}\n.input-field:is(input) {\n  flex: 1;\n}\n.input-field:is(button) {\n  display: inline-flex;\n  align-items: center;\n}\n.has-custom-display .input-field:is(button) {\n  height: auto;\n  padding: 0;\n}\n.input-field:is(button) span {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: block;\n}\n\n.custom-display-container {\n  max-width: 100%;\n}\n.has-custom-display .custom-display-container {\n  --comp-default-padding: var(--app-scale-2x, 10px) var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);\n  padding: var(--tct-input-padding, var(--t-input-padding, var(--comp-default-padding)));\n  width: 100%;\n}\n\n.has-error .input-container:hover {\n  --comp-input-hover-ring-color: var(--tct-input-error-border-color, var(--t-input-error-border-color));\n  --comp-input-hover-ring: 0 0 0 2px var(--t-base), 0 0 0 4px var(--comp-input-hover-ring-color);\n}\n\n.input-container:hover {\n  border-width: var(--tct-input-hover-border-width, var(--comp-input-border-width));\n  border-color: var(--tct-input-hover-border-color, var(--comp-input-border-color));\n  background: var(--tct-input-hover-background, var(--comp-input-background));\n  box-shadow: var(--comp-input-hover-ring), var(--tct-input-hover-box-shadow, var(--t-input-hover-box-shadow, 0 0 transparent));\n}\n\n.has-focus .input-container {\n  border-width: var(--tct-input-focus-border-width, var(--comp-input-focus-border-width));\n  border-color: var(--tct-input-focus-border-color, var(--t-input-focus-border-color, var(--comp-input-border-color)));\n  background: var(--tct-input-focus-background, var(--comp-input-background));\n  box-shadow: var(--const-double-focus-ring), var(--tct-input-focus-box-shadow, var(--t-input-focus-box-shadow, 0 0 transparent));\n}\n.has-focus .input-container:hover {\n  border-width: var(--tct-input-hover-border-width, var(--comp-input-border-width));\n  border-color: var(--tct-input-hover-border-color, var(--comp-input-border-color));\n  background: var(--tct-input-hover-background, var(--comp-input-background));\n  box-shadow: var(--comp-input-hover-ring), var(--tct-input-hover-box-shadow, var(--t-input-hover-box-shadow, 0 0 transparent));\n}\n\n.input-field::placeholder,\n.placeholder-text {\n  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)))));\n}\n\n.pseudo-input-container {\n  min-width: 0;\n  flex: 1;\n}\n\n.input-icons-container-left,\n.input-icons-container-right {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--comp-input-horizontal-gap);\n}\n.input-icons-container-left > div:not(.vertical-separator),\n.input-icons-container-right > div:not(.vertical-separator) {\n  min-width: var(--tct-icon-min-width, 44px);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.input-icons-container-left:empty,\n.input-icons-container-right:empty {\n  display: none;\n}\n\n.input-icons-container-left {\n  padding-left: var(--comp-input-horizontal-gap);\n}\n\n.input-icons-container-right {\n  padding-right: var(--comp-input-horizontal-gap);\n  --comp-visibility-toggle-padding: 0px var(--app-scale-2x, 10px);\n}\n.input-icons-container-right .btn-visibility-toggle {\n  color: var(--tct-input-visibility-toggle-font-color, var(--tct-primary, var(--t-primary, #006eb2)));\n  font-size: var(--tct-input-visibility-toggle-font-size, 12px);\n  padding: var(--tct-input-visibility-toggle-padding, var(--comp-visibility-toggle-padding));\n}\n\nq2-icon {\n  margin-top: calc(var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) / 2);\n  margin-bottom: calc(var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) / 2);\n  pointer-events: none;\n  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)))));\n  --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)))));\n}\n\n.icon-left-muted {\n  opacity: 0.5;\n}\n\n.input-prefix,\n.input-suffix {\n  min-height: var(--comp-input-min-height);\n  max-height: var(--comp-input-max-height);\n  height: var(--tct-input-height, var(--t-input-height, 44px));\n  font-size: var(--tct-input-prefix-font-size, var(--t-input-prefix-font-size, inherit));\n  color: var(--tct-input-prefix-font-color, var(--t-input-prefix-font-color, inherit));\n  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))))))));\n  transition: color var(--comp-input-tween), background var(--comp-input-tween);\n}\n\n.input-prefix {\n  border-top-left-radius: calc(\n        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))\n    );\n  border-bottom-left-radius: calc(\n        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))\n    );\n  pointer-events: none; /* used to allow iOS voiceover to display keyboard in input TCT-1194 */\n}\n\n.input-suffix {\n  border-top-right-radius: calc(\n        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))\n    );\n  border-bottom-right-radius: calc(\n        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))\n    );\n}\n\n.icon-error {\n  color: var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));\n  --tct-icon-stroke-primary: var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));\n}\n\n.pw-show {\n  position: absolute;\n  margin-right: var(--tct-scale-2, var(--app-scale-2x, 10px));\n}\n\n.btn-clear {\n  --tct-icon-size: 17px;\n}\n\n@container (max-width: 190px) {\n  .input-container .btn-clear {\n    --tct-btn-icon-width: 17px;\n  }\n}\n.messages-container {\n  height: 0px;\n  overflow: hidden;\n  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)))))));\n  box-shadow: var(--tct-input-message-box-shadow, var(--t-input-message-box-shadow, var(--tct-box-shadow-1, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3)))));\n  transition: height var(--tct-input-messages-tween, var(--t-input-messages-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));\n  margin-top: var(--tct-input-messages-margin-top, 2px);\n  z-index: var(--tct-input-messages-z-index, 5);\n  position: absolute;\n  width: 100%;\n  color: var(--tct-input-messages-font-color, var(--t-input-messages-font-color, inherit));\n}\n\n.has-error label {\n  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))));\n}\n\n.has-error:not(.has-focus) .input-prefix,\n.has-error:not(.has-focus) .input-suffix {\n  color: var(--tct-input-error-prefix-font-color, var(--t-input-error-prefix-font-color, inherit));\n  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))))))))));\n}\n\n.has-error .input-container:not(:focus-within) {\n  border-color: var(--tct-input-error-border-color, var(--t-input-error-border-color, var(--const-stoplight-alert, #c30000)));\n}\n\n.icon-left {\n  width: 26px;\n  height: 26px;\n}\n\n.vertical-separator {\n  height: calc(var(--comp-input-min-height) - 2px);\n  border-right: 1px solid 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)))));\n}";
 
 const inputTypeMap = {
   text: 'text',
@@ -3073,8 +3073,8 @@ const Q2Input = /*@__PURE__*/ proxyCustomElement(class Q2Input extends HTMLEleme
     };
   }
   get canClear() {
-    var _a;
-    return this.clearable && !!((_a = this.inputField) === null || _a === void 0 ? void 0 : _a.value);
+    var _a, _b;
+    return this.clearable && !!((_b = (_a = this.inputField) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : this.value);
   }
   get shouldCursorStayAtEnd() {
     return this.isMobile && this.type === 'currency';
@@ -3265,7 +3265,7 @@ const Q2Input = /*@__PURE__*/ proxyCustomElement(class Q2Input extends HTMLEleme
   }
   /* tslint:disable:cyclomatic-complexity */
   inputContainerDOM() {
-    return (h("div", { class: "input-container", tabindex: -1, "test-id": "inputContainer" }, h("div", { class: "input-icons-container-left" }, this.formattedValueObject.prefix && (h("div", { class: "input-prefix" }, this.formattedValueObject.prefix)), this.computedIconLeft && (h("div", null, h("q2-icon", { type: this.computedIconLeft, class: this.computedClassForIconLeft }))), h("slot", { name: "input-left" }), this.showIconSeparator && h("div", { class: "vertical-separator" }), this.hasError && this.type === 'currency' && (h("div", null, h("q2-icon", { type: "error", class: "icon-error", "test-id": "iconError" })))), this.pseudo ? this.pseudoInputDOM() : this.standardInputDOM(), h("div", { class: "input-icons-container-right" }, this.canClear && (h("q2-btn", { class: "btn-clear", ariaLabel: loc('tecton.element.input.clear', [this.label]), "test-id": "clearButton", onClick: this.onClearInput }, h("q2-icon", { type: "close", class: "icon-clear" }))), ['password', 'text', 'ssn', 'tin'].includes(this.type) && this.showVisibilityToggle && (h("q2-btn", { class: "btn-visibility-toggle", "test-id": "toggleVisibilityButton", onClick: this.onToggleVisibility }, this.visibilityToggleText)), this.formattedValueObject.suffix && (h("span", { class: "input-suffix" }, this.formattedValueObject.suffix)), this.badgeValue && (h("q2-badge", { size: "large", theme: this.badgeTheme }, this.badgeValue)), this.iconRight && !this.formattedValueObject.suffix && (h("div", null, h("q2-icon", { type: this.iconRight, class: "icon-right" }))), h("slot", { name: "input-right" }), this.hasError && this.type !== 'currency' && (h("div", null, h("q2-icon", { type: "error", class: "icon-error" }))))));
+    return (h("div", { class: "input-container", tabindex: -1, "test-id": "inputContainer" }, h("div", { class: "input-icons-container-left" }, this.formattedValueObject.prefix && (h("div", { class: "input-prefix" }, this.formattedValueObject.prefix)), this.computedIconLeft && (h("div", null, h("q2-icon", { type: this.computedIconLeft, class: this.computedClassForIconLeft }))), h("slot", { name: "input-left" }), this.showIconSeparator && h("div", { class: "vertical-separator" }), this.hasError && this.type === 'currency' && (h("div", null, h("q2-icon", { type: "error", class: "icon-error", "test-id": "iconError" })))), this.pseudo ? this.pseudoInputDOM() : this.standardInputDOM(), h("div", { class: "input-icons-container-right" }, this.canClear && (h("q2-btn", { class: "btn-clear", ariaLabel: loc('tecton.element.input.clear', [this.label]), "test-id": "clearButton", onClick: this.onClearInput }, h("q2-icon", { type: "close", class: "icon-clear" }))), ['password', 'text', 'ssn', 'tin'].includes(this.type) && this.showVisibilityToggle && (h("q2-btn", { class: "btn-visibility-toggle", "test-id": "toggleVisibilityButton", onClick: this.onToggleVisibility }, this.visibilityToggleText)), this.formattedValueObject.suffix && (h("span", { class: "input-suffix" }, this.formattedValueObject.suffix)), this.badgeValue && (h("q2-badge", { size: "large", theme: this.badgeTheme }, this.badgeValue)), this.hasError && this.type !== 'currency' && (h("div", null, h("q2-icon", { type: "error", class: "icon-error", "test-id": "iconError" }))), this.iconRight && !this.formattedValueObject.suffix && (h("div", null, h("q2-icon", { type: this.iconRight, class: "icon-right" }))), h("slot", { name: "input-right" }))));
   }
   /* tslint:enable:cyclomatic-complexity */
   /* tslint:disable:cyclomatic-complexity */