q2-tecton-elements 1.12.0-alpha.0 → 1.12.0

package/dist/cjs/q2-dropdown-item.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c2e53804.js');
-const index$1 = require('./index-a55d3c34.js');
+const index$1 = require('./index-773c3eec.js');
 
 const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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}.dropdown-separator{margin:0 var(--tct-scale-1, var(--app-scale-1, 5px));border-bottom:1px solid var(--tct-dropdown-item-separator-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))))}.dropdown-item-wrapper{display:flex}.dropdown-item{min-height:44px;flex:1 1 100%;padding:var(--tct-dropdown-item-padding, 2px)}.dropdown-item-content{padding:12px var(--tct-scale-3, var(--app-scale-3, 15px));text-align:left;background-color:var(--tct-dropdown-item-bg, var(--tct-white, var(--t-base, var(--app-white, #ffffff))));color:var(--tct-dropdown-item-font-color, inherit);transition:background-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease));overflow:hidden;text-overflow:ellipsis;flex:1}:host(:not([disabled])) .dropdown-item-content:hover,:host(:not([disabled])) .dropdown-item:focus-within .dropdown-item-content{background-color:var(--tct-dropdown-item-selected-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, var(--t-base, #f2f2f2))))));color:var(--tct-dropdown-item-selected-font-color, inherit)}.remove-dropdown-item{flex:0 0 44px;margin:2px}";
 

package/dist/cjs/q2-dropdown.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c2e53804.js');
-const index$1 = require('./index-a55d3c34.js');
+const index$1 = require('./index-773c3eec.js');
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white);color:var(--t-font-color);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1);height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1);border-radius:var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host{display:inline-flex}.dropdown-container{position:relative;display:block}.dropdown-button-content{display:flex;align-items:center}.dropdown-button.unstyled .dropdown-button-content{padding:var(--tct-scale-2, var(--app-scale-2, 10px)) var(--tct-scale-1, var(--app-scale-1, 5px))}.q2-element-dropdown{width:var(--tct-dropdown-width, var(--t-dropdown-width, 175px))}.q2-element-dropdown.dropup{bottom:var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px))}q2-btn[color=primary]~.q2-element-dropdown.dropup,q2-btn[intent=workflow-primary]~.q2-element-dropdown.dropup{bottom:calc(var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px)) + var(--tct-btn-primary-border-width, var(--t-btn-primary-border-width, 0)))}q2-btn[color=secondary]~.q2-element-dropdown.dropup,q2-btn[intent=workflow-secondary]~.q2-element-dropdown.dropup{bottom:calc(var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px)) + var(--tct-btn-secondary-border-width, var(--t-btn-secondary-border-width, 0)))}q2-btn[intent=neutral]~.q2-element-dropdown.dropup{bottom:calc(var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px)) + var(--tct-btn-neutral-border-width, var(--t-btn-neutral-border-width, 0)))}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white);color:var(--t-font-color);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1);height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1);border-radius:var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host{display:inline-flex}.dropdown-container{position:relative;display:block}.dropdown-button-content{display:flex;align-items:center}.dropdown-button.unstyled .dropdown-button-content{padding:var(--tct-scale-2, var(--app-scale-2, 10px)) var(--tct-scale-1, var(--app-scale-1, 5px))}.q2-element-dropdown{width:var(--tct-dropdown-width, var(--t-dropdown-width, 175px))}.q2-element-dropdown.dropup{bottom:var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px))}q2-btn[color=primary]~.q2-element-dropdown.dropup,q2-btn[intent=workflow-primary]~.q2-element-dropdown.dropup{bottom:calc( var-list(var-prefixer(btn-icon-height), 44px) + var-list(var-prefixer(btn-primary-border-width), 0) )}q2-btn[color=secondary]~.q2-element-dropdown.dropup,q2-btn[intent=workflow-secondary]~.q2-element-dropdown.dropup{bottom:calc( var-list(var-prefixer(btn-icon-height), 44px) + var-list(var-prefixer(btn-secondary-border-width), 0) )}q2-btn[intent=neutral]~.q2-element-dropdown.dropup{bottom:calc( var-list(var-prefixer(btn-icon-height), 44px) + var-list(var-prefixer(btn-neutral-border-width), 0) )}";
 
 const Q2Dropdown = class {
   constructor(hostRef) {

package/dist/cjs/q2-editable-field.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c2e53804.js');
-const index$1 = require('./index-a55d3c34.js');
+const index$1 = require('./index-773c3eec.js');
 
 const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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:inline-block;max-width:100%}.q2-editable-field-wrapper:not([hidden]){display:flex}.q2-editable-field-wrapper.editing{align-items:flex-end}q2-input,.text-wrapper{margin:0 var(--tct-scale-2, var(--app-scale-2, 10px)) 0 0}q2-input{flex:1 0 auto;min-width:170px}.text-wrapper{flex:0 auto;align-self:center;display:inline-block}:host([truncated]) .text-wrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}q2-btn{flex:0 0 44px}dl{margin:var(--tct-scale-0, var(--app-scale-0, 0))}dt{font-weight:600}dd{margin-left:var(--tct-scale-0, var(--app-scale-0, 0));display:flex;align-items:center}";
 

package/dist/cjs/q2-icon.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c2e53804.js');
-const index$1 = require('./index-a55d3c34.js');
-const icons = require('./icons-4595ee47.js');
+const index$1 = require('./index-773c3eec.js');
+const icons = require('./icons-9bd0febe.js');
 
 const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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:inline-block;height:var(--tct-icon-size, 24px);width:var(--tct-icon-size, 24px);position:relative;fill:none}svg{display:block;position:absolute;top:0;left:0;stroke-width:var(--tct-icon-stroke-width, var(--t-icon-stroke-width, 1.5));stroke-linecap:var(--tct-icon-cap, var(--t-icon-cap, round));stroke-linejoin:var(--tct-icon-cap, var(--t-icon-cap, round))}.stroke-primary{stroke:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, var(--t-text, currentColor)))}.stroke-secondary{stroke:var(--tct-icon-stroke-secondary, var(--t-icon-stroke-secondary, var(--t-text, currentColor)))}.fill-primary{fill:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, var(--t-text, currentColor)))}.filled{fill:var(--tct-icon-fill, var(--t-icon-fill, none))}.uniform{fill:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, currentColor))}:host([type=info]){--tct-icon-stroke-primary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));--tct-icon-stroke-secondary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host([type=success]){--tct-icon-stroke-primary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00));--t-icon-stroke-secondary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=warning]){--tct-icon-stroke-primary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400));--t-icon-stroke-secondary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400))}:host([type=error]){--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));--t-icon-stroke-secondary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000))}";
 

package/dist/cjs/q2-input.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c2e53804.js');
-const index$1 = require('./index-a55d3c34.js');
+const index$1 = require('./index-773c3eec.js');
 
 function formatNumber(val = '', options = {
   prefix: '',
@@ -2867,7 +2867,7 @@ const formatCreditCard = {
   unknownFormatter
 };
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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-top:var(--tct-input-margin-top, var(--t-input-margin-top, var(--app-scale-6x, 30px)));margin-bottom: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{display:block;padding-left:var(--tct-input-label-padding-left, var(--t-input-label-padding-left, 0));padding-right:var(--tct-input-label-padding-right, var(--t-input-label-padding-right, 0));margin-top:var(--tct-input-label-margin-top, var(--t-input-label-margin-top, 0));margin-bottom:var(--tct-input-label-margin-bottom, var(--t-input-label-margin-bottom, var(--tct-scale-1, var(--app-scale-1, 5px))));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{margin-left:var(--tct-input-label-optional-margin-left, var(--t-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1, 5px))));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{background-color:var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, #f2f2f2))));display:flex;align-items:center;--comp-input-horizontal-gap:var(--tct-input-horizontal-gap, var(--t-input-horizontal-gap, 8px));--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)\n      var(--comp-input-border-top-right-radius) var(--comp-input-border-bottom-right-radius)\n      var(--comp-input-border-bottom-left-radius);--comp-input-border-width:var(--tct-input-border-top-width, 1px)\n      var(--tct-input-border-right-width, 1px) var(--tct-input-border-bottom-width, 1px)\n      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)\n      var(--tct-input-focus-border-bottom-width, 1px)\n      var(--tct-input-focus-border-left-width, 1px);--comp-input-prefix-clearance:calc(\n      3 * var(--tct-input-prefix-font-size, 14px) + var(--tct-scale-1, 5px)\n  );--comp-input-icon-clearance:34px;--comp-input-min-height:44px;border-width:var(--comp-input-border-width);border-style:solid;border-color:var(--tct-input-border-color, var(--t-input-border-color, var(--tct-gray-11, var(--t-gray-11, #cccccc))));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]) .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{flex:1;border:0;-webkit-appearance:none;appearance:none;box-sizing:border-box;min-height:var(--comp-input-min-height);height:var(--tct-input-height, var(--t-input-height, 44px));width:100%;padding:0 var(--tct-input-horizontal-padding, var(--t-input-horizontal-padding, var(--tct-scale-2, var(--app-scale-2, 10px))));background-color:transparent;color:var(--tct-input-font-color, var(--t-input-font-color, var(--t-text, 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[disabled]{cursor:not-allowed}.right-aligned .input-field{text-align:right}.input-container:focus-within{border-width:var(--comp-input-focus-border-width, 1px);border-color:var(--tct-input-focus-border-color, var(--t-input-focus-border-color, var(--tct-gray-9, var(--t-gray-9, #999999))));box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff)), var(--tct-input-focus-box-shadow, var(--t-input-focus-box-shadow, 0 0 transparent))}input{display:inline-block}input::-ms-clear{display:none}input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}input::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{display:inline-flex;align-items:center}.pseudo-input span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.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: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-textA, var(--app-gray, rgba(77, 77, 77, 0.77)))));--tct-icon-stroke-primary:var(--tct-input-icon-stroke-primary, var(--t-input-icon-stroke-primary, var(--t-textA, var(--app-gray, rgba(77, 77, 77, 0.77)))))}.icon-left-muted{opacity:0.5}.input-prefix,.input-suffix{margin-left:calc(var(--comp-input-horizontal-gap) * -1);margin-right:calc(var(--comp-input-horizontal-gap) * -1);width:3em;display:inline-flex;align-items:center;justify-content:center;min-height:calc(\n        var(--comp-input-min-height) - var(--tct-input-focus-border-top-width, var(--t-input-focus-border-top-width, 1px)) -\n            var(--tct-input-focus-border-bottom-width, var(--t-input-focus-border-bottom-width, 1px))\n    );height:calc(\n        var(--tct-input-height, var(--t-input-height, 44px)) - var(--tct-input-focus-border-top-width, var(--t-input-focus-border-top-width, 1px)) - var(--tct-input-focus-border-bottom-width, var(--t-input-focus-border-bottom-width, 1px))\n    );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-color:var(--tct-input-prefix-bg, var(--t-input-prefix-bg, var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, #f2f2f2))))));transition:color var(--comp-input-tween), background-color 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-2, 20px))}.btn-clear{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);height:22px;--tct-btn-icon-width:17px;--tct-btn-icon-height:22px;--tct-icon-size:17px}.messages-container{height:0px;overflow:hidden;background-color: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-color:var(--tct-input-error-prefix-bg, var(--t-input-error-prefix-bg, 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(--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(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))))))}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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-top:var(--tct-input-margin-top, var(--t-input-margin-top, var(--app-scale-6x, 30px)));margin-bottom: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{display:block;padding-left:var(--tct-input-label-padding-left, var(--t-input-label-padding-left, 0));padding-right:var(--tct-input-label-padding-right, var(--t-input-label-padding-right, 0));margin-top:var(--tct-input-label-margin-top, var(--t-input-label-margin-top, 0));margin-bottom:var(--tct-input-label-margin-bottom, var(--t-input-label-margin-bottom, var(--tct-scale-1, var(--app-scale-1, 5px))));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{margin-left:var(--tct-input-label-optional-margin-left, var(--t-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1, 5px))));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{background-color:var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, #f2f2f2))));display:flex;align-items:center;--comp-input-horizontal-gap:var(--tct-input-horizontal-gap, var(--t-input-horizontal-gap, 8px));--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)\n      var(--comp-input-border-top-right-radius) var(--comp-input-border-bottom-right-radius)\n      var(--comp-input-border-bottom-left-radius);--comp-input-border-width:var(--tct-input-border-top-width, 1px)\n      var(--tct-input-border-right-width, 1px) var(--tct-input-border-bottom-width, 1px)\n      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)\n      var(--tct-input-focus-border-bottom-width, 1px)\n      var(--tct-input-focus-border-left-width, 1px);--comp-input-prefix-clearance:calc(\n      3 * var(--tct-input-prefix-font-size, 14px) + var(--tct-scale-1, 5px)\n  );--comp-input-icon-clearance:34px;--comp-input-min-height:var(--tct-input-min-height, 44px);border-width:var(--comp-input-border-width);border-style:solid;border-color:var(--tct-input-border-color, var(--t-input-border-color, var(--tct-gray-11, var(--t-gray-11, #cccccc))));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]) .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{flex:1;border:0;-webkit-appearance:none;appearance:none;box-sizing:border-box;min-height:var(--comp-input-min-height);height:var(--tct-input-height, var(--t-input-height, 44px));width:100%;padding:0 var(--tct-input-horizontal-padding, var(--t-input-horizontal-padding, var(--tct-scale-2, var(--app-scale-2, 10px))));background-color: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\");}.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]{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}.input-container:focus-within{border-width:var(--comp-input-focus-border-width, 1px);border-color:var(--tct-input-focus-border-color, var(--t-input-focus-border-color, var(--tct-gray-9, var(--t-gray-9, #999999))));box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff)), var(--tct-input-focus-box-shadow, var(--t-input-focus-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{min-width:0;flex:1}.pseudo-input span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.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: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-textA, var(--app-gray, rgba(77, 77, 77, 0.77)))));--tct-icon-stroke-primary:var(--tct-input-icon-stroke-primary, var(--t-input-icon-stroke-primary, var(--t-textA, var(--app-gray, rgba(77, 77, 77, 0.77)))))}.icon-left-muted{opacity:0.5}.input-prefix,.input-suffix{margin-left:calc(var(--comp-input-horizontal-gap) * -1);margin-right:calc(var(--comp-input-horizontal-gap) * -1);width:3em;display:inline-flex;align-items:center;justify-content:center;min-height:calc( var(--comp-input-min-height) - var(--tct-input-focus-border-top-width, var(--t-input-focus-border-top-width, 1px)) - var(--tct-input-focus-border-bottom-width, var(--t-input-focus-border-bottom-width, 1px)) );height:calc( var(--tct-input-height, var(--t-input-height, 44px)) - var(--tct-input-focus-border-top-width, var(--t-input-focus-border-top-width, 1px)) - var(--tct-input-focus-border-bottom-width, var(--t-input-focus-border-bottom-width, 1px)) );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-color:var(--tct-input-prefix-bg, var(--t-input-prefix-bg, var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, #f2f2f2))))));transition:color var(--comp-input-tween), background-color var(--comp-input-tween)}.input-prefix{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)) );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)) );pointer-events:none;}.input-suffix{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)) );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)) )}.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-2, 20px))}.btn-clear{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);height:22px;--tct-btn-icon-width:17px;--tct-btn-icon-height:22px;--tct-icon-size:17px}.messages-container{height:0px;overflow:hidden;background-color: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-color:var(--tct-input-error-prefix-bg, var(--t-input-error-prefix-bg, 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(--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(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))))))}";
 
 const Q2Input = class {
   constructor(hostRef) {
@@ -3142,14 +3142,19 @@ const Q2Input = class {
     return (index.h("div", { class: this.wrapperClasses }, index$1.labelDOM(this), this.inputDOM(), index$1.messagesDOM(this)));
   }
   inputDOM() {
-    return (index.h("div", { class: "input-container" }, index.h("div", { class: "input-icons-container-left" }, this.formattedValueObject.prefix && (index.h("span", { class: "input-prefix" }, this.formattedValueObject.prefix)), this.computedIconLeft && (index.h("q2-icon", { type: this.computedIconLeft, class: this.computedClassForIconLeft })), this.showIconSeperator && index.h("div", { class: "vertical-separator" }), this.hasError && this.type === 'currency' && (index.h("q2-icon", { type: "error", class: "icon-error" }))), this.pseudo ? (this.pseudoInputDOM()) : (index.h("input", { class: "input-field", id: this.inputId, type: this.computedType, size: this.formattedValueObject.prefix ? 10 : undefined, "aria-describedby": this.inputDescribedBy, "aria-required": `${!this.optional}`, "aria-invalid": `${this.hasError}`, "aria-controls": (this.ariaControls && `${this.ariaControls}`) || undefined, "aria-owns": (this.ariaOwns && `${this.ariaOwns}`) || undefined, "aria-haspopup": (this.ariaHaspopup && `${this.ariaHaspopup}`) || undefined, "aria-expanded": (!!this.ariaExpanded && `${!!this.ariaExpanded}`) || undefined, "aria-activedescendant": this.ariaActivedescendant && `${this.ariaActivedescendant}`, "aria-label": this.hideLabel && this.label ? index$1.loc(this.label) : undefined, autocomplete: this.autocomplete ? this.autocomplete : 'off', autocapitalize: this.autocapitalize === 'on' ? 'on' : 'off', autocorrect: this.autocorrect === 'on' ? 'on' : 'off', placeholder: (this.placeholder && index$1.loc(this.placeholder)) || undefined, role: (this.role && `${this.role}`) || undefined, "test-id": "inputField", readonly: !!this.readonly, disabled: !!this.disabled, onFocus: this.onInputFocus, onBlur: this.onInputBlur, onKeyDown: this.onInputKeydown, onInput: this.onInputInput, onPaste: this.onInputPaste })), index.h("div", { class: "input-icons-container-right" }, this.canClear && (index.h("q2-btn", { class: "btn-clear", ariaLabel: index$1.loc('tecton.element.input.clear', [this.label]), "test-id": "clearButton", onClick: this.onClearInput }, index.h("q2-icon", { type: "close", class: "icon-clear" }))), ['password', 'text'].includes(this.type) && this.showVisibilityToggle && (index.h("q2-btn", { class: "btn-visibility-toggle", "test-id": "toggleVisibilityButton", onClick: this.onToggleVisibility }, this.visibilityToggleText)), this.formattedValueObject.suffix && (index.h("span", { class: "input-suffix" }, this.formattedValueObject.suffix)), this.iconRight && !this.formattedValueObject.suffix && (index.h("q2-icon", { type: this.iconRight, class: "icon-right" })), this.hasError && this.type !== 'currency' && (index.h("q2-icon", { type: "error", class: "icon-error" })))));
+    return (index.h("div", { class: "input-container" }, index.h("div", { class: "input-icons-container-left" }, this.formattedValueObject.prefix && (index.h("span", { class: "input-prefix" }, this.formattedValueObject.prefix)), this.computedIconLeft && (index.h("q2-icon", { type: this.computedIconLeft, class: this.computedClassForIconLeft })), this.showIconSeperator && index.h("div", { class: "vertical-separator" }), this.hasError && this.type === 'currency' && (index.h("q2-icon", { type: "error", class: "icon-error" }))), this.pseudo ? (this.pseudoInputDOM()) : (index.h("input", { class: "input-field", id: this.inputId, type: this.computedType, size: this.formattedValueObject.prefix ? 10 : undefined, max: this.max, min: this.min, "aria-current": this.current || undefined, "aria-describedby": this.inputDescribedBy, "aria-required": `${!this.optional}`, "aria-invalid": `${this.hasError}`, "aria-controls": (this.ariaControls && `${this.ariaControls}`) || undefined, "aria-owns": (this.ariaOwns && `${this.ariaOwns}`) || undefined, "aria-haspopup": (this.ariaHaspopup && `${this.ariaHaspopup}`) || undefined, "aria-expanded": (!!this.ariaExpanded && `${!!this.ariaExpanded}`) || undefined, "aria-activedescendant": this.ariaActivedescendant && `${this.ariaActivedescendant}`, "aria-label": this.hideLabel && this.label ? index$1.loc(this.label) : undefined, autocomplete: this.autocomplete ? this.autocomplete : 'off', autocapitalize: this.autocapitalize === 'on' ? 'on' : 'off', autocorrect: this.autocorrect === 'on' ? 'on' : 'off', placeholder: (this.placeholder && index$1.loc(this.placeholder)) || undefined, role: (this.role && `${this.role}`) || undefined, "test-id": "inputField", readonly: !!this.readonly, disabled: !!this.disabled, onFocus: this.onInputFocus, onBlur: this.onInputBlur, onKeyDown: this.onInputKeydown, onInput: this.onInputInput, onPaste: this.onInputPaste })), index.h("div", { class: "input-icons-container-right" }, this.canClear && (index.h("q2-btn", { class: "btn-clear", ariaLabel: index$1.loc('tecton.element.input.clear', [this.label]), "test-id": "clearButton", onClick: this.onClearInput }, index.h("q2-icon", { type: "close", class: "icon-clear" }))), ['password', 'text'].includes(this.type) && this.showVisibilityToggle && (index.h("q2-btn", { class: "btn-visibility-toggle", "test-id": "toggleVisibilityButton", onClick: this.onToggleVisibility }, this.visibilityToggleText)), this.formattedValueObject.suffix && (index.h("span", { class: "input-suffix" }, this.formattedValueObject.suffix)), this.iconRight && !this.formattedValueObject.suffix && (index.h("q2-icon", { type: this.iconRight, class: "icon-right" })), this.hasError && this.type !== 'currency' && (index.h("q2-icon", { type: "error", class: "icon-error" })))));
   }
   pseudoInputDOM() {
     const showPlaceholder = !this.value && !!this.placeholder;
-    return (index.h("button", { class: "pseudo-input input-field", type: "button", id: this.inputId, "aria-describedby": this.inputDescribedBy, "aria-required": `${!this.optional}`, "aria-invalid": `${this.hasError}`, "aria-controls": (this.ariaControls && `${this.ariaControls}`) || undefined, "aria-owns": (this.ariaOwns && `${this.ariaOwns}`) || undefined, "aria-haspopup": (this.ariaHaspopup && `${this.ariaHaspopup}`) || undefined, "aria-expanded": (!!this.ariaExpanded && `${!!this.ariaExpanded}`) || undefined, "aria-activedescendant": this.ariaActivedescendant && `${this.ariaActivedescendant}`, "aria-label": `${this.value}, ${(this.label && index$1.loc(this.label)) || ''}${(this
-        .optional &&
-        index$1.loc('tecton.element.input.optional')) ||
-        ''}`, role: (this.role && `${this.role}`) || undefined, disabled: !!this.disabled, "test-id": "q2InputInnerClearButton" }, index.h("span", { class: showPlaceholder ? 'placeholder-text' : '' }, showPlaceholder ? this.placeholder : this.value)));
+    let ariaLabelSuffix = '';
+    if (this.optional) {
+      ariaLabelSuffix = index$1.loc('tecton.element.input.optional');
+    }
+    if (this.readonly) {
+      ariaLabelSuffix = index$1.loc('tecton.element.input.readonly');
+    }
+    return (index.h("div", { class: "pseudo-input" }, index.h("button", { class: "input-field", type: "button", id: this.inputId, "aria-describedby": this.inputDescribedBy, "aria-required": `${!this.optional}`, "aria-invalid": `${this.hasError}`, "aria-controls": (this.ariaControls && `${this.ariaControls}`) || undefined, "aria-owns": (this.ariaOwns && `${this.ariaOwns}`) || undefined, "aria-haspopup": (this.ariaHaspopup && `${this.ariaHaspopup}`) || undefined, "aria-expanded": (!!this.ariaExpanded && `${!!this.ariaExpanded}`) || undefined, "aria-activedescendant": this.ariaActivedescendant && `${this.ariaActivedescendant}`, "aria-label": `${this.value}, ${(this.label && index$1.loc(this.label)) ||
+        ''}${ariaLabelSuffix}`, role: (this.role && `${this.role}`) || undefined, disabled: !!this.disabled, "test-id": "q2InputInnerClearButton" }, index.h("span", { class: showPlaceholder ? 'placeholder-text' : '' }, showPlaceholder ? this.placeholder : this.value))));
   }
   calculateCursorPositionOnInput() {
     const input = this.inputField;

package/dist/cjs/q2-loc.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c2e53804.js');
-const index$1 = require('./index-a55d3c34.js');
+const index$1 = require('./index-773c3eec.js');
 
 const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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:inline}";
 

package/dist/cjs/q2-message.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c2e53804.js');
-const index$1 = require('./index-a55d3c34.js');
+const index$1 = require('./index-773c3eec.js');
 
 const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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([hidden]){display:none}.message{border-left-width:var(--tct-message-bar-width, var(--t-message-bar-width, var(--app-scale-1, 5px)));border-left-style:solid;display:grid;gap:var(--tct-scale-1, var(--app-scale-1, 5px));align-items:flex-start;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))))));color:var(--tct-message-font-color, var(--t-message-font-color, inherit));box-shadow:var(--tct-message-box-shadow, var(--t-message-box-shadow, inherit));border-radius:var(--tct-message-border-radius, var(--t-message-border-radius, inherit))}.message:focus{box-shadow:var(--const-global-focus)}.message-icon{width:24px}.message-content{flex:1}::slotted(ul){padding-left:var(--tct-scale-l3, var(--app-scale-3, 15px))}:host(:not([appearance])),:host([appearance=standard]){margin:var(--tct-scale-l3, var(--app-scale-3, 15px)) 0}:host(:not([appearance])) .message,:host([appearance=standard]) .message{grid-template-columns:24px 1fr;--comp-padding:var(--tct-message-padding, var(--t-message-padding, var(--app-scale-3, 15px)));padding:var(--comp-padding);padding-top:calc(var(--comp-padding) - var(--tct-scale-1, var(--app-scale-1, 5px)));padding-left:calc(var(--comp-padding) - var(--tct-scale-2, var(--app-scale-2, 10px)))}:host(:not([appearance])) .message-content,:host([appearance=standard]) .message-content{padding-top:var(--tct-scale-1, var(--app-scale-1, 5px))}:host(:not([appearance])) ::slotted(ul),:host([appearance=standard]) ::slotted(ul){margin:var(--tct-scale-l3, var(--app-scale-3, 15px)) 0}:host([appearance=minimal]){margin:0}:host([appearance=minimal]) .message{padding:var(--tct-message-minimal-padding, var(--t-message-minimal-padding, var(--app-scale-2, 10px)));grid-template-columns:1fr}:host([appearance=minimal]) ::slotted(ul){margin:var(--tct-scale-1, var(--app-scale-1, 5px)) 0}:host(:not([type])) .message,:host([type=info]) .message{border-left-color:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host(:not([type])) .message-icon,:host([type=info]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));--tct-icon-stroke-secondary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host([type=success]) .message{border-left-color:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=success]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00));--tct-icon-stroke-secondary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=warning]) .message{border-left-color:var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400))}:host([type=warning]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400));--tct-icon-stroke-secondary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400))}:host([type=error]) .message,:host([type=danger]) .message{border-left-color:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000))}:host([type=error]) .message-icon,:host([type=danger]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));--tct-icon-stroke-secondary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000))}";
 

package/dist/cjs/q2-optgroup.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c2e53804.js');
-const index$1 = require('./index-a55d3c34.js');
+const index$1 = require('./index-773c3eec.js');
 
 const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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}.q2-optgroup-header{background-color:var(--tct-optgroup-header-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l2, var(--app-gray-l2, #e6e6e6)))));padding:var(--tct-scale-1, var(--app-scale-1, 5px)) var(--tct-scale-2, var(--app-scale-2, 10px));font-weight:var(--tct-optgroup-header-font-weight, 600);text-transform:var(--tct-optgroup-header-text-transform, uppercase);}";
 

package/dist/cjs/q2-option-list.cjs.entry.js

@@ -0,0 +1,357 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c2e53804.js');
+const index$1 = require('./index-773c3eec.js');
+
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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}.content{margin-top:var(--tct-option-list-margin, var(--t-option-list-margin, var(--app-scale-1x, 5px)));position:absolute;height:0;opacity:0;visibility:hidden;background-color:var(--app-white);color:var(--t-font-color);z-index:100;width:max-content;min-width:var(--tct-option-list-min-width, var(--t-option-list-min-width, 135px));box-shadow:var(--app-shadow-1);overflow:hidden;text-align:start;transition:opacity var(--app-tween-1);border-radius:var(--tct-option-list-border-radius, var(--t-option-list-border-radius, 0));--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.content::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.content::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.content::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}:host(:not([align=right])) .content{left:0}:host([align=right]) .content{right:0}:host([open]) .content{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([is-sizeable]) .content{display:block;height:auto}:host([alignment=right]) .content{left:unset;right:0}";
+
+const Q2OptionList = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.change = index.createEvent(this, "change", 7);
+    this.optionListState = index.createEvent(this, "optionListState", 7);
+    this.role = 'listbox';
+    this.direction = 'down';
+    this.selectedOptions = [];
+    this.scheduledAfterRender = [];
+    /// Event Handlers ///
+    this.keydownHandler = (event, ignoreSelectionEvents) => {
+      event.stopPropagation();
+      const { activeIndex, customSearch, allOptions } = this;
+      const { key, shiftKey } = event;
+      let newOption;
+      switch (key) {
+        case ' ':
+        case 'Enter':
+          if (ignoreSelectionEvents) {
+            this.setDefaultActiveElement();
+            break;
+          }
+          event.preventDefault();
+          newOption = allOptions.find(element => element.active);
+          if (!newOption || newOption.disabled)
+            break;
+          this.selectOption(newOption.value);
+          break;
+        case 'ArrowUp':
+          event.preventDefault();
+          const isFirstOption = activeIndex === 0;
+          if (isFirstOption)
+            break;
+          if (activeIndex === undefined) {
+            this.setDefaultActiveElement();
+          }
+          else {
+            const nextIndex = this.getNextVisibleIndex(-1);
+            if (nextIndex === -1)
+              break;
+            this.adjustActiveOptionAndScroll(nextIndex - activeIndex);
+          }
+          break;
+        case 'ArrowDown':
+          event.preventDefault();
+          const isLastOption = activeIndex === allOptions.length - 1;
+          if (isLastOption)
+            break;
+          if (activeIndex === undefined) {
+            this.setDefaultActiveElement();
+          }
+          else {
+            const nextIndex = this.getNextVisibleIndex(1);
+            if (nextIndex === -1)
+              break;
+            this.adjustActiveOptionAndScroll(nextIndex - activeIndex);
+          }
+          break;
+        case 'Home':
+          event.preventDefault();
+          this.openDropdownWithActiveElement(0);
+          break;
+        case 'End':
+          event.preventDefault();
+          this.openDropdownWithActiveElement(allOptions.length - 1);
+          break;
+        case 'PageUp':
+          event.preventDefault();
+          this.openDropdownWithActiveElement(Math.max(activeIndex - 10, 0));
+          break;
+        case 'PageDown':
+          event.preventDefault();
+          this.openDropdownWithActiveElement(Math.min(activeIndex + 10, allOptions.length - 1));
+          break;
+        case 'Tab':
+          if (ignoreSelectionEvents)
+            break;
+          if (shiftKey)
+            break;
+          newOption = allOptions.find(element => element.active);
+          if (!newOption || newOption.disabled)
+            return;
+          this.selectOption(newOption.value);
+          break;
+        case 'Esc':
+        case 'Escape':
+          if (this.noSelect)
+            this.setActiveElement(null);
+          this.open = false;
+          break;
+        default:
+          if (customSearch)
+            break;
+          if (!key.match(/^[A-Za-z0-9]$/))
+            break;
+          // search in non-searchable select: alpha-numeric only
+          this.searchAndFocus(key);
+          break;
+      }
+    };
+    this.focusoutHandler = (event) => {
+      const { relatedTarget } = event;
+      const isInDropdown = this.allOptions.includes(relatedTarget);
+      const isInLightDom = !isInDropdown && this.hostElement.contains(relatedTarget);
+      if (isInDropdown || isInLightDom) {
+        event.stopPropagation();
+      }
+    };
+    this.clickHandler = (event) => {
+      const target = event.target;
+      if (target.localName !== 'q2-option' || target.disabled) {
+        return;
+      }
+      this.selectOption(target.value);
+    };
+  }
+  /// LifeCycle Hooks ///
+  componentWillLoad() {
+    this.hasOptions = !!this.hostElement.querySelectorAll('q2-option').length;
+  }
+  componentDidLoad() {
+    index$1.overrideFocus(this.hostElement);
+    this.checkOptions();
+  }
+  componentDidRender() {
+    this.scheduledAfterRender.forEach(fn => fn());
+    this.scheduledAfterRender = [];
+  }
+  /// Getters ///
+  get allOptions() {
+    return this.getRootSlot(this.hostElement);
+  }
+  /// Helpers ///
+  checkOptions() {
+    const { noSelect, type, allOptions } = this;
+    if (!noSelect && !type)
+      return;
+    const optionRole = type === 'menu' ? 'menuitem' : 'option';
+    allOptions.forEach(option => {
+      if (noSelect)
+        option.noSelect = true;
+      if (type)
+        option.role = optionRole;
+    });
+  }
+  getRootSlot(element) {
+    var _a;
+    const slot = element.querySelector('slot');
+    const assignedElements = (_a = slot === null || slot === void 0 ? void 0 : slot.assignedElements()) !== null && _a !== void 0 ? _a : Array.from(element.children);
+    const hasAnotherSlot = !!assignedElements.length && assignedElements[0].tagName === 'SLOT';
+    if (hasAnotherSlot) {
+      return this.getRootSlot(assignedElements[0]);
+    }
+    else {
+      return assignedElements;
+    }
+  }
+  scrollToActiveOption() {
+    const activeOption = this.allOptions[this.activeIndex];
+    activeOption === null || activeOption === void 0 ? void 0 : activeOption.scrollIntoView({ block: 'nearest' });
+  }
+  resizeIframe() {
+    var _a, _b;
+    return (_b = (_a = window.TectonElements) === null || _a === void 0 ? void 0 : _a.resizeIframe) === null || _b === void 0 ? void 0 : _b.call(_a);
+  }
+  openDropdownWithActiveElement(activeIndex) {
+    if (this.disabled)
+      return;
+    this.activeIndex = activeIndex;
+    this.open = true;
+    this.setActiveOption();
+    this.setFocusedOption();
+    this.scheduledAfterRender.push(() => {
+      this.scrollToActiveOption();
+      this.resizeIframe();
+    });
+  }
+  getDefaultActiveIndex() {
+    const { allOptions } = this;
+    const firstSelected = allOptions.findIndex(element => element.selected);
+    if (firstSelected > -1)
+      return firstSelected;
+    const firstEnabled = allOptions.findIndex(element => !element.hidden);
+    if (firstEnabled > -1)
+      return firstEnabled;
+    return 0;
+  }
+  updateSingleOptionAttrs() {
+    var _a, _b;
+    const { allOptions, selectedOptions } = this;
+    const singleValue = (_b = (_a = selectedOptions[0]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : undefined;
+    allOptions.forEach(element => {
+      element.selected = element.value === singleValue;
+    });
+  }
+  updateMultipleOptionAttrs() {
+    const { allOptions, selectedOptions } = this;
+    const selectedValues = selectedOptions.map(option => option.value);
+    allOptions.forEach(element => {
+      element.selected = selectedValues.includes(element.value);
+    });
+  }
+  setActiveOption() {
+    if (!this.open)
+      return;
+    const activeIndex = this.activeIndex;
+    this.allOptions.forEach((element, elementIndex) => {
+      element.active = activeIndex === elementIndex;
+    });
+  }
+  setFocusedOption() {
+    const option = this.allOptions[this.activeIndex];
+    if (!option)
+      return;
+    setTimeout(() => {
+      option.focus();
+    }, 25);
+  }
+  getNextVisibleIndex(direction) {
+    let index = this.activeIndex + direction;
+    while (index >= 0 && index <= this.allOptions.length - 1) {
+      const { display, visibility } = window.getComputedStyle(this.allOptions[index]);
+      if (display !== 'none' && visibility !== 'hidden') {
+        return index;
+      }
+      index = index + direction;
+    }
+    return -1;
+  }
+  selectOption(selectedValue) {
+    const option = this.allOptions.find(({ value }) => value === selectedValue);
+    const valueObject = {
+      value: selectedValue,
+      display: option.display || option.innerText.trim()
+    };
+    const { multiple, noSelect } = this;
+    let values;
+    if (multiple) {
+      const { selectedOptions = [] } = this;
+      const isAlreadySelected = !!selectedOptions.find(({ value }) => value === selectedValue);
+      if (isAlreadySelected) {
+        values = selectedOptions.filter(({ value }) => value !== selectedValue);
+      }
+      else {
+        values = [...selectedOptions, valueObject];
+      }
+    }
+    else {
+      values = [valueObject];
+    }
+    if (noSelect)
+      this.setActiveElement(null);
+    else
+      this.selectedOptions = values;
+    this.change.emit({ value: selectedValue, values });
+    if (multiple)
+      return;
+    this.open = false;
+  }
+  adjustActiveOptionAndScroll(numToAdd) {
+    this.activeIndex += numToAdd;
+    this.setActiveOption();
+    this.setFocusedOption();
+    this.scrollToActiveOption();
+  }
+  resetTimer() {
+    if (this.searchStringTimer) {
+      clearTimeout(this.searchStringTimer);
+    }
+    this.searchStringTimer = window.setTimeout(() => {
+      this.searchString = null;
+    }, 2000);
+  }
+  searchAndFocus(key) {
+    this.resetTimer();
+    let searchString = this.searchString ? `${this.searchString}${key}` : key;
+    searchString = searchString.replace(/[^0-9a-z]/gi, '');
+    this.searchString = searchString;
+    const searchRegEx = new RegExp(searchString, 'i');
+    const foundIndex = this.allOptions.findIndex(option => option.value === searchString || option.textContent.match(searchRegEx));
+    if (foundIndex === -1)
+      return;
+    this.setActiveElement(foundIndex);
+  }
+  /// Watchers ///
+  selectedOptionsUpdated() {
+    if (this.multiple) {
+      this.updateMultipleOptionAttrs();
+    }
+    else {
+      this.updateSingleOptionAttrs();
+    }
+  }
+  openChanged(newValue) {
+    this.optionListState.emit({ open: newValue });
+  }
+  /// Listeners ///
+  delegateFocus(event) {
+    if (!index$1.isEventFromElement(event, this.hostElement))
+      return;
+    this.open = true;
+    this.setDefaultActiveElement();
+  }
+  handleClick(event) {
+    event.stopPropagation();
+  }
+  /// Public Methods ///
+  toggle() {
+    const isOpen = !this.open;
+    this.open = isOpen;
+  }
+  setDefaultActiveElement() {
+    this.activeIndex = this.getDefaultActiveIndex();
+    this.setActiveOption();
+    this.setFocusedOption();
+  }
+  setActiveElement(index) {
+    this.activeIndex = index;
+    this.setActiveOption();
+    this.setFocusedOption();
+  }
+  handleExternalKeydown(event) {
+    const keysThatTriggerOpen = ['ArrowDown', 'ArrowUp', 'PageDown', 'PageUp', 'Home', 'End'];
+    if (keysThatTriggerOpen.includes(event.key)) {
+      this.open = true;
+    }
+    const keysThatTriggerDefault = ['ArrowDown', 'ArrowUp'];
+    if (keysThatTriggerDefault.includes(event.key)) {
+      event.preventDefault();
+      this.setDefaultActiveElement();
+    }
+    else {
+      this.keydownHandler(event, true);
+    }
+  }
+  /// DOM ///
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, index.h("div", { class: "options", role: this.type || 'listbox', onKeyDown: this.keydownHandler, onClick: this.clickHandler }, index.h("slot", null)))));
+  }
+  get hostElement() { return index.getElement(this); }
+  static get watchers() { return {
+    "selectedOptions": ["selectedOptionsUpdated"],
+    "open": ["openChanged"]
+  }; }
+};
+Q2OptionList.style = stylesCss;
+
+exports.q2_option_list = Q2OptionList;

package/dist/cjs/q2-option.cjs.entry.js

@@ -4,27 +4,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c2e53804.js');
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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{padding:0 var(--tct-scale-2, var(--app-scale-2, 10px));min-height:44px;align-items:center;cursor:pointer;grid-template-columns:var(--tct-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3, 15px))) 1fr;align-items:center;grid-template-areas:\"icon content\";gap:var(--tct-scale-1, var(--app-scale-1, 5px))}:host([aria-disabled]){cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4));pointer-events:none}:host([aria-hidden]){display:none}:host(:not([hidden]):not([aria-hidden])){display:grid}:host(:not([aria-disabled]):hover),:host([active]),:host(:focus){background-color:var(--tct-option-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))}q2-icon{grid-area:icon;--tct-icon-size:var(--tct-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3, 15px)))}.content{display:block;grid-area:content}:host(:not([multiline])) .content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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{padding:0 var(--tct-scale-2, var(--app-scale-2, 10px));min-height:44px;align-items:center;cursor:pointer;grid-template-columns:var(--tct-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3, 15px))) 1fr;align-items:center;grid-template-areas:\"icon content\";gap:var(--tct-scale-1, var(--app-scale-1, 5px))}:host([_no-select]){grid-template-columns:1fr;grid-template-areas:\"content\"}:host([aria-disabled]){cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4));pointer-events:none}:host([aria-hidden]){display:none}:host(:not([hidden]):not([aria-hidden])){display:grid}:host(:not([aria-disabled]):hover),:host([active]),:host(:focus){background-color:var(--tct-option-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))}q2-icon{grid-area:icon;--tct-icon-size:var(--tct-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3, 15px)))}.content{display:block;grid-area:content}:host(:not([multiline])) .content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}";
 
 const Q2Option = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.click = index.createEvent(this, "click", 7);
     this.role = 'option';
     this.tabindex = '-1';
     this._multiSelectHidden = false;
-    this.onClick = (event) => {
-      event.stopImmediatePropagation();
-      const { disabled, disabledGroup } = this;
-      if (disabled || disabledGroup)
-        return;
-      this.click.emit();
-    };
   }
   render() {
     const { disabled, disabledGroup, selected, _multiSelectHidden } = this;
     const isDisabled = disabled || disabledGroup;
-    return (index.h(index.Host, { "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": selected ? 'true' : undefined, "aria-hidden": _multiSelectHidden ? 'true' : undefined }, this.selected && index.h("q2-icon", { type: "checkmark" }), index.h("div", { class: "content", onClick: this.onClick }, index.h("slot", null))));
+    return (index.h(index.Host, { "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": selected ? 'true' : undefined, "aria-hidden": _multiSelectHidden ? 'true' : undefined }, this.selected && index.h("q2-icon", { type: "checkmark" }), index.h("div", { class: "content" }, index.h("slot", null))));
   }
   get hostElement() { return index.getElement(this); }
 };