npm - q2-tecton-elements - Versions diffs - 1.10.9 → 1.13.0-alpha.0 - Mend

q2-tecton-elements 1.10.9 → 1.13.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (74) hide show

package/dist/esm/q2-editable-field.entry.js CHANGED Viewed

@@ -12,6 +12,7 @@ const Q2EditableField = class {
     this.editing = false;
     this.label = '';
     this.scheduledAfterRender = [];
+    this.defaultValue = this.value;
     //////// ACTIONS /////////
     this.inputInput = (e) => {
       e.stopPropagation();
@@ -40,12 +41,19 @@ const Q2EditableField = class {
     this.saveClick = (event) => {
       event && event.stopPropagation();
       const valueFromInputProp = this.hostElement.shadowRoot.querySelector('q2-input').value;
+      this.defaultValue = valueFromInputProp;
       this.change.emit({
         editing: false,
         name: 'save',
         value: this.innerValue || valueFromInputProp,
         formattedValue: this.formattedValue || valueFromInputProp
       });
+      setTimeout(() => {
+        const { errors = [] } = this;
+        if (!errors.length)
+          return;
+        this.hostElement.focus();
+      }, 1);
     };
     this.editClick = (event) => {
       event === null || event === void 0 ? void 0 : event.stopPropagation();
@@ -54,6 +62,7 @@ const Q2EditableField = class {
     this.cancelClick = (event) => {
       event === null || event === void 0 ? void 0 : event.stopPropagation();
       this.change.emit({ editing: false, name: 'cancel' });
+      this.hostElement.shadowRoot.querySelector('q2-input').value = this.defaultValue;
     };
   }
   get locLabel() {
@@ -71,28 +80,23 @@ const Q2EditableField = class {
     overrideFocus(this.hostElement);
   }
   //////// OBSERVERS //////////
+  errorsObserver() {
+    var _a;
+    const { editing, errors = [] } = this;
+    const focusedElement = this.hostElement.shadowRoot.activeElement;
+    const isInputFocused = (_a = (focusedElement === null || focusedElement === void 0 ? void 0 : focusedElement.tagName) === 'Q2-INPUT') !== null && _a !== void 0 ? _a : false;
+    const hasErrors = errors.length;
+    if (isInputFocused || !focusedElement || !editing || !hasErrors)
+      return;
+    this.q2InputElement.focus();
+  }
   ariaLabelObserver() {
     handleAriaLabel(this);
   }
   observesEditing(newValue, oldValue) {
-    if (newValue === oldValue) {
+    if (newValue === oldValue)
       return;
-    }
-    //When editing state changes focus on input or edit button after render
-    if (newValue) {
-      this.scheduledAfterRender.push(() => {
-        this.hostElement.shadowRoot
-          .querySelector('q2-input')
-          .dispatchEvent(new FocusEvent('focus'));
-      });
-    }
-    else {
-      this.scheduledAfterRender.push(() => {
-        this.hostElement.shadowRoot
-          .querySelector('.begin-edit')
-          .dispatchEvent(new FocusEvent('focus'));
-      });
-    }
+    this.scheduledAfterRender.push(this.hostElement.focus);
   }
   get wrapperClass() {
     return `q2-editable-field-wrapper ${this.editing ? 'editing' : ''}`;
@@ -136,6 +140,7 @@ const Q2EditableField = class {
   }
   get hostElement() { return getElement(this); }
   static get watchers() { return {
+    "errors": ["errorsObserver"],
     "ariaLabel": ["ariaLabelObserver"],
     "editing": ["observesEditing"]
   }; }

package/dist/esm/q2-input.entry.js CHANGED Viewed

@@ -2863,7 +2863,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(--app-scale-6x, 30px));margin-bottom:var(--tct-input-margin-bottom, var(--app-scale-6x, 30px));font-size:var(--tct-input-font-size, var(--app-font-size, inherit))}:host([hidden]){display:none}.field-container,.input-container{position:relative}label{display:block;padding-left:var(--tct-input-label-padding-left, 0);padding-right:var(--tct-input-label-padding-right, 0);margin-top:var(--tct-input-label-margin-top, 0);margin-bottom:var(--tct-input-label-margin-bottom, var(--tct-scale-1, var(--app-scale-1, 5px)));color:var(--tct-input-label-font-color, inherit);font-size:var(--tct-input-label-font-size, inherit);font-weight:var(--tct-input-label-font-weight, 600);text-transform:var(--tct-input-label-text-transform, none);letter-spacing:var(--tct-input-label-letter-spacing, normal);transition:color var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)))}.optional-tag{margin-left:var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1, 5px)));color:var(--tct-input-label-optional-font-color, var(--tct-a11y-color, var(--t-a11y-gray-color, #767676)));font-size:var(--tct-input-label-optional-font-size, 12px);font-weight:var(--tct-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(\n      --tct-input-horizontal-gap,\n      var(--t-input-horizontal-gap, 8px)\n  );--comp-input-border-top-left-radius:var(\n      --tct-input-border-top-left-radius,\n      var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n  );--comp-input-border-top-right-radius:var(\n      --tct-input-border-top-right-radius,\n      var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n  );--comp-input-border-bottom-right-radius:var(\n      --tct-input-border-bottom-right-radius,\n      var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n  );--comp-input-border-bottom-left-radius:var(\n      --tct-input-border-bottom-left-radius,\n      var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n  );--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, var(--tct-gray-11, var(--t-gray-11, #cccccc))));border-radius:var(--comp-input-border-radius);box-shadow:var(--tct-input-box-shadow, none);transition:border-width var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))), border-color var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))), box-shadow var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)))}.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, 44px);width:100%;padding:0 var(--tct-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{display:inline-block}.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-container:focus-within{border-width:var(--comp-input-focus-border-width, 1px);border-color:var(--tct-input-focus-border-color, var(--t-input-focus, 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, 0 0 transparent)}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(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666))))))}.pseudo-input{display:inline-flex;align-items:center}.pseudo-input span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.input-icons-container-left:empty{display:none}.input-icons-container-left{display:flex;flex-direction:row;align-items:center;gap:var(--comp-input-horizontal-gap);padding-left:var(--comp-input-horizontal-gap)}.input-icons-container-right:empty{display:none}.input-icons-container-right{display:flex;flex-direction:row;align-items:center;gap:var(--comp-input-horizontal-gap);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, 1px) / 2);margin-bottom:calc(var(--tct-input-border-bottom-width, 1px) / 2);pointer-events:none;color:var(--tct-input-icon-stroke-primary, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))));--tct-icon-stroke-primary:var(\n      --tct-input-icon-stroke-primary,\n      var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))\n  );--t-icon-stroke-primary:var(\n      --tct-input-icon-stroke-primary,\n      var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))\n  )}.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, 1px) - var(--tct-input-focus-border-bottom-width, 1px) );height:calc( var(--tct-input-height, 44px) - var(--tct-input-focus-border-top-width, 1px) - var(--tct-input-focus-border-bottom-width, 1px) );font-size:var(--tct-input-prefix-font-size, inherit);color:var(--tct-input-prefix-font-color, inherit);background-color:var(--tct-input-prefix-bg, var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, #f2f2f2)))));transition:color var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))), background-color var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)))}.input-prefix{border-top-left-radius:calc( var(--comp-input-border-top-left-radius) - var(--tct-input-border-top-width, 1px) - var(--tct-input-border-left-width, 1px) );border-bottom-left-radius:calc( var(--comp-input-border-bottom-left-radius) - var(--tct-input-border-bottom-width, 1px) - var(--tct-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, 1px) - var(--tct-input-border-right-width, 1px) );border-bottom-right-radius:calc( var(--comp-input-border-bottom-right-radius) - var(--tct-input-border-bottom-width, 1px) - var(--tct-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));--t-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, 1px) / 2);margin-bottom:calc(var(--tct-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(--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(--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(--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, inherit)}:host([disabled]) .input-container{cursor:not-allowed;opacity:var(--tct-input-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)))}.input-field[disabled]{cursor:not-allowed}.right-aligned .input-field{text-align:right}.has-error label{color:var(--tct-input-error-label-font-color, var(--tct-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, inherit);background-color:var(--tct-input-error-prefix-bg, var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--app-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(--tct-input-border-color, var(--t-input-border, 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: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 Q2Input = class {
   constructor(hostRef) {

package/dist/esm/q2-radio-group.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-be8376c0.js';
 import { c as createGuid, o as overrideFocus, i as isEventFromElement, l as loc } from './index-ec6660af.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{margin-top:var(--tct-scale-2, var(--app-scale-2, 10px))}fieldset{padding:0;margin:0;border:0}fieldset.has-error{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000));border-width:1px;border-style:solid;border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 2px));position:relative}fieldset.has-error .error-icon-container{top:8px;right:8px;position:absolute;width:40%;text-align:right;background:linear-gradient(to right, transparent, white)}fieldset.has-error legend+div.error-icon-container.no-label{top:28px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.optional-tag{margin-left:var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1, 5px)));color:var(--tct-input-label-optional-font-color, var(--tct-a11y-color, var(--t-a11y-gray-color, #767676)));font-size:var(--tct-input-label-optional-font-size, 12px);font-weight:var(--tct-input-label-optional-font-weight, 400)}.flexed{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.flexed.left{justify-content:left}.flexed.right{justify-content:right}";
+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{margin-top:var(--tct-scale-2, var(--app-scale-2, 10px))}fieldset{padding:0;margin:0;border:0}fieldset.has-error{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000));border-width:1px;border-style:solid;border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 2px));position:relative}fieldset.has-error .error-icon-container{top:8px;right:8px;position:absolute;width:40%;text-align:right;background:linear-gradient(to right, transparent, white)}fieldset.has-error legend+div.error-icon-container.no-label{top:28px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.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))}.flexed{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.flexed.left{justify-content:left}.flexed.right{justify-content:right}";
 const Q2RadioGroup = class {
   constructor(hostRef) {
@@ -68,6 +68,25 @@ const Q2RadioGroup = class {
       this.hostElement.querySelector('q2-radio');
     radio === null || radio === void 0 ? void 0 : radio.dispatchEvent(new FocusEvent('focus'));
   }
+  keydownHandler(event) {
+    const currentValue = event.target.getAttribute('value') || this.value;
+    let index = this.radioElements.findIndex(el => el === event.target || el.getAttribute('value') === currentValue);
+    let sign = 0;
+    if (['ArrowLeft', 'Left', 'ArrowUp', 'Up'].includes(event.key)) {
+      sign = -1;
+    }
+    else if (['ArrowRight', 'Right', 'ArrowDown', 'Down'].includes(event.key)) {
+      sign = 1;
+    }
+    if (index === -1 || sign === 0) {
+      return;
+    }
+    index += sign;
+    index = sign < 0 ? Math.max(0, index) : Math.min(this.radioElements.length - 1, index);
+    event.preventDefault();
+    this.value = this.radioElements[index].value;
+    this.radioElements[index].dispatchEvent(new FocusEvent('focus'));
+  }
   render() {
     return (h("div", null, this.label || this.optional ? (h("div", { class: "group-legend" }, this.label && loc(this.label), this.optional ? (h("span", { class: "optional-tag" }, loc('tecton.element.input.optional'))) : (''))) : (''), h("fieldset", { class: `q2-radio-fieldset ${this.hasError ? 'has-error' : ''}`, onChange: this.onInnerRadioChange, "aria-required": `${!this.optional}` }, this.label || this.optional ? (h("legend", { class: "sr-only" }, this.label && loc(this.label), this.optional ? (h("span", { class: "optional-tag" }, loc('tecton.element.input.optional'))) : (''))) : (''), this.hasError ? (h("div", { class: `error-icon-container ${this.label || this.optional ? '' : 'no-label'}` }, h("q2-icon", { class: "h(4) w(4) mrg-b(2)", type: "error" }))) : (''), this.inputDom())));
   }

package/dist/esm/q2-radio.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-be8376c0.js';
 import { c as createGuid, h as handleAriaLabel, o as overrideFocus, l as loc } from './index-ec6660af.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-radio{margin-top:var(--tct-radio-margin-vertical, var(--tct-scale-2, 10px));margin-right:var(--tct-radio-margin-horizontal, var(--tct-scale-3, 15px));display:block}q2-radio .radio-container{margin-bottom:var(--tct-radio-margin-vertical, var(--tct-scale-2, 10px))}q2-radio .radio-container label[for]{font-weight:var(--tct-radio-font-weight, var(--tct-checkbox-font-weight, 400));align-items:center;cursor:pointer;margin-right:1rem;display:grid;grid-template-columns:18px 1fr;gap:var(--tct-scale-1, var(--app-scale-1, 5px))}q2-radio .radio-container svg{border-radius:50%;transition:box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));outline:0;width:100%}q2-radio .radio-container circle:nth-child(1){stroke-width:2;stroke:var(--tct-radio-stroke-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))))}q2-radio .radio-container input:focus+label svg{box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff))}q2-radio .radio-container input:focus+label circle:nth-child(1){stroke:var(--tct-radio-focus-stroke-color, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)))}q2-radio .radio-container input:checked+label circle:nth-child(1){background-color:var(--tct-radio-checked-bg, transparent);stroke:var(--tct-radio-checked-stroke-color, var(--tct-radio-stroke-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))))}q2-radio .radio-container input:checked+label .label-content{font-weight:var(--tct-checkbox-selected-font-weight, 600);letter-spacing:var(--tct-checkbox-selected-letter-spacing, 0.25)}q2-radio .radio-container input:checked+label circle:nth-child(2){fill:var(--tct-radio-checked-fill, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)))}q2-radio .radio-tile{flex-basis:100px;flex-grow:0;flex-wrap:wrap}q2-radio .radio-tile label[for]{align-items:center;border-radius:3px;border:2px solid var(--tct-radio-stroke-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))));cursor:pointer;display:block;padding:1rem;position:relative;text-align:center;transition:border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease));white-space:nowrap}q2-radio .radio-tile input:focus+label{border-color:#0079c1;box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff))}q2-radio .radio-tile input:checked+label{border-color:var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e));box-shadow:inset 0 0 0 2px #ffffff}q2-radio .radio-tile input:checked+label:after{border-bottom-width:3px;border-bottom:5px solid #0079c1;border-left-width:5px;border-left:8px solid transparent;border-right-width:5px;border-right:8px solid transparent;bottom:0;content:\"\";height:0;left:50%;margin-left:-5px;position:absolute;width:0}q2-radio input:disabled+label{cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))}";
+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{margin-top:var(--tct-radio-margin-vertical, var(--tct-scale-2, 10px));margin-right:var(--tct-radio-margin-horizontal, var(--tct-scale-3, 15px));display:block}:host .radio-container{margin-bottom:var(--tct-radio-margin-vertical, var(--tct-scale-2, 10px))}:host .radio-container label[for]{font-weight:var(--tct-radio-font-weight, var(--tct-checkbox-font-weight, 400));align-items:center;cursor:pointer;margin-right:1rem;display:grid;grid-template-columns:18px 1fr;gap:var(--tct-scale-1, var(--app-scale-1, 5px))}:host .radio-container svg{border-radius:50%;transition:box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));outline:0;width:100%}:host .radio-container circle:nth-child(1){stroke-width:2;stroke:var(--tct-radio-stroke-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))))}:host .radio-container input:focus+label svg{box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff))}:host .radio-container input:focus+label circle:nth-child(1){stroke:var(--tct-radio-focus-stroke-color, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)))}:host .radio-container input:checked+label circle:nth-child(1){background-color:var(--tct-radio-checked-bg, transparent);stroke:var(--tct-radio-checked-stroke-color, var(--tct-radio-stroke-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))))}:host .radio-container input:checked+label .label-content{font-weight:var(--tct-checkbox-selected-font-weight, 600);letter-spacing:var(--tct-checkbox-selected-letter-spacing, 0.25)}:host .radio-container input:checked+label circle:nth-child(2){fill:var(--tct-radio-checked-fill, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)))}:host .radio-tile{flex-basis:100px;flex-grow:0;flex-wrap:wrap}:host .radio-tile label[for]{align-items:center;border-radius:3px;border:2px solid var(--tct-radio-stroke-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))));cursor:pointer;display:block;padding:1rem;position:relative;text-align:center;transition:border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease));white-space:nowrap}:host .radio-tile input:focus+label{border-color:#0079c1;box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff))}:host .radio-tile input:checked+label{border-color:var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e));box-shadow:inset 0 0 0 2px #ffffff}:host .radio-tile input:checked+label:after{border-bottom-width:3px;border-bottom:5px solid #0079c1;border-left-width:5px;border-left:8px solid transparent;border-right-width:5px;border-right:8px solid transparent;bottom:0;content:\"\";height:0;left:50%;margin-left:-5px;position:absolute;width:0}:host input:disabled+label{cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))}";
 const Q2Radio = class {
   constructor(hostRef) {

package/dist/esm/q2-select.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-be8376c0.js';
 import { c as createGuid, s as setPopProperties, l as loc, h as handleAriaLabel, o as overrideFocus, i as isEventFromElement } from './index-ec6660af.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:block;margin-top:var(--tct-select-margin-top, var(--app-scale-4, 30px));margin-bottom:var(--tct-select-margin-bottom, var(--app-scale-4, 30px))}.q2-select-container{position:relative;display:block}.q2-select-input{margin:0}.custom-display-content{position:absolute;bottom:0;left:calc(var-list(--tct-scale-2, --app-scale-2, 10px) + 1px);height:44px;width:calc(100% - 34px - var-list(--tct-scale-3, --app-scale-3, 15px));overflow:hidden;cursor:pointer;transition:left var(--tct-tween-2, var(--app-tween-1, 0.2s ease))}.custom-display-content:not([hidden]){display:flex;align-items:center}.is-searchable.is-focused .custom-display-content,.is-searchable .custom-display-content:active{left:calc(var-list(--tct-scale-3, --app-scale-3, 15px) + 1px)}.has-error .custom-display-content{width:calc(100% - 68px - var-list(--tct-scale-3, --app-scale-3, 15px))}.dropdown-open .q2-select-dropdown{overflow-y:auto;max-height:300px}.multi-select-header{padding:var(--tct-scale-1, var(--app-scale-1, 5px)) var(--tct-scale-2, var(--app-scale-2, 10px))}.show-all-options{margin-right:var(--tct-scale-1, var(--app-scale-1, 5px));margin-left:var(--tct-scale-2, var(--app-scale-2, 10px))}.q2-element-dropdown.dropup{bottom:40px}";
+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:block;margin-top:var(--tct-select-margin-top, var(--app-scale-4, 30px));margin-bottom:var(--tct-select-margin-bottom, var(--app-scale-4, 30px))}.q2-select-container{position:relative;display:block}.q2-select-input{margin:0}.custom-display-content{position:absolute;bottom:0;left:calc(var(--tct-scale-2, var(--app-scale-2, 10px)) + 1px);height:44px;width:calc(100% - 34px - var(--tct-scale-3, var(--app-scale-3, 15px)));overflow:hidden;cursor:pointer;transition:left var(--tct-tween-2, var(--app-tween-1, 0.2s ease))}.custom-display-content:not([hidden]){display:flex;align-items:center}.is-searchable.is-focused .custom-display-content,.is-searchable .custom-display-content:active{left:calc(var(--tct-scale-3, var(--app-scale-3, 15px)) + 1px)}.has-error .custom-display-content{width:calc(100% - 68px - var(--tct-scale-3, var(--app-scale-3, 15px)))}.dropdown-open .q2-select-dropdown{overflow-y:auto;max-height:300px}.multi-select-header{padding:var(--tct-scale-1, var(--app-scale-1, 5px)) var(--tct-scale-2, var(--app-scale-2, 10px))}.show-all-options{margin-right:var(--tct-scale-1, var(--app-scale-1, 5px));margin-left:var(--tct-scale-2, var(--app-scale-2, 10px))}.q2-element-dropdown.dropup{bottom:40px}";
 const Q2Select = class {
   constructor(hostRef) {
@@ -48,9 +48,9 @@ const Q2Select = class {
     this.searchAndFocus = keyValue => {
       // pseudo search in non-searchable select
       const reorder = () => {
-        const pivotIndex = (this.activeIndex || 0) + 1;
+        this.pivotIndex = this.pivotIndex === undefined ? 0 : (this.activeIndex || 0) + 1;
         const list = this.optionElements.map((element, index) => ({ element, index }));
-        return [...list.slice(pivotIndex), ...list.slice(0, pivotIndex)];
+        return [...list.slice(this.pivotIndex), ...list.slice(0, this.pivotIndex)];
       };
       const buildQueue = () => {
         const now = new Date();
@@ -66,6 +66,7 @@ const Q2Select = class {
       const searchIndex = list => {
         return list.find(v => {
           return (!v.element.disabled &&
+            v.element.display &&
             v.element.display
               .replace(/\s/g, '')
               .match(new RegExp(`^${this.keyStore.queue.join('')}`, 'i')));
@@ -186,6 +187,7 @@ const Q2Select = class {
       }
     };
     this.inputKeydownHandler = (event) => {
+      event.stopPropagation();
       const { key } = event;
       const { optionElements, dropdownOpen, searchable } = this;
       switch (key) {
@@ -348,7 +350,7 @@ const Q2Select = class {
   get minPopHeight() {
     const { minRows } = this;
     const firstOption = this.hostElement.querySelector('q2-option:not([hidden])');
-    const minHeight = window.getComputedStyle(firstOption).minHeight;
+    const minHeight = firstOption ? window.getComputedStyle(firstOption).minHeight : '44px';
     return minRows * parseInt(minHeight);
   }
   get selectedDisplay() {

package/dist/esm/q2-stepper.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-be8376c0.js';
 import { a as addSmoothScrollPolyfill, o as overrideFocus, i as isEventFromElement, l as loc } from './index-ec6660af.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;position:relative}ul{--comp-bullet-bg:var(--tct-stepper-bullet-active-bg, var(--t-stepper-bullet-active-bg, var(--t-primary, #0079c1)));--comp-bullet-font-color:var(--tct-stepper-bullet-active-font-color, var(--t-stepper-bullet-active-font-color, var(--t-primary-font-color, #ffffff)));--comp-bullet-size:var(--tct-stepper-bullet-size, var(--t-stepper-bullet-size, 18px));--comp-bullet-gap:var(--tct-stepper-bullet-padding, var(--t-stepper-bullet-padding, var(--app-scale-2x, 10px)));--comp-bullet-border-offset:var(--tct-stepper-bullet-border-offset, var(--t-stepper-bullet-border-offset, 4px));--comp-bullet-border:var(--tct-stepper-bullet-border, var(--t-stepper-bullet-border, 2px solid var(--t-primary-l3)));--comp-bullet-font-size:var(--tct-stepper-bullet-font-size, var(--t-stepper-bullet-font-size, var(--app-font-size-small, 12px)));--comp-step-width:var(--tct-stepper-step-width, var(--t-stepper-step-width, var(--t-stepper-step-width, 80px)));--comp-step-gap:var(--tct-stepper-step-gap, var(--t-stepper-step-gap, 5px));--comp-tween:var(--tct-stepper-tween, var(--t-stepper-tween, var(--app-tween-1, 0.2s ease)));overflow-x:auto;display:flex;justify-content:center;list-style:none;padding:0;padding:var(--tct-stepper-list-padding, var(--t-stepper-list-padding, 2px));margin:0;gap:var(--comp-step-gap);--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}ul::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}ul::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}ul::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.has-scroll ul{justify-content:unset}li{min-height:var(--tct-stepper-min-height, var(--t-stepper-min-height, 50px));flex:0 0 auto;position:relative;width:var(--comp-step-width);text-align:center;max-width:150px;min-width:80px}.step-btn{position:relative;background:transparent;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;height:calc(100% - 4px);width:100%;transition:var(--comp-tween);padding:0;transition-property:box-shadow;outline:none}.step-btn[aria-disabled]{cursor:default}.step-btn[aria-disabled],.step-btn[aria-disabled]+hr{--comp-bullet-font-color:var(--tct-stepper-bullet-inactive-font-color, var(--t-stepper-bullet-inactive-font-color, var(--t-text, #4d4d4d)));--comp-bullet-bg:var(--tct-stepper-bullet-inactive-bg, var(--t-stepper-bullet-inactive-bg, var(--t-gray12, #d9d9d9)))}.step-bubble{margin:var(--comp-bullet-gap) auto;background:var(--comp-bullet-bg);color:var(--comp-bullet-font-color);width:var(--comp-bullet-size);height:var(--comp-bullet-size);min-height:var(--comp-bullet-size);font-size:var(--comp-bullet-font-size);transition:var(--comp-tween);transition-property:background, color;border-radius:50%;position:relative}[aria-selected] .step-bubble{font-weight:var(--tct-stepper-bullet-active-font-weight, var(--t-stepper-bullet-active-font-weight, 600))}[aria-selected] .step-bubble:before{content:\"\";position:absolute;inset:calc(var(--comp-bullet-border-offset) * -1);width:calc(var(--comp-bullet-size) + var(--comp-bullet-border-offset));height:calc(var(--comp-bullet-size) + var(--comp-bullet-border-offset));border-radius:50%;border:var(--comp-bullet-border)}hr{width:calc( var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size) );top:calc(calc(var(--comp-bullet-size) / 2) + var(--comp-bullet-gap));left:calc(calc(var(--comp-step-width) * -0.5) + var(--comp-step-gap) + var(--comp-bullet-gap));border:0;border-top:1px solid var(--comp-bullet-bg);height:0;position:absolute;margin:0;transition:border var(--comp-tween)}.step-container{position:relative}.step-label{color:var(--tct-stepper-title-color, var(--t-stepper-title-color, var(--t-text, #4d4d4d)));font-size:var(--tct-stepper-title-font-size, var(--t-stepper-title-font-size, var(--app-font-size-small, 12px)));height:1.5em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}[aria-selected] .step-label{font-weight:var(--tct-stepper-active-font-weight, var(--t-stepper-active-font-weight, 600))}[aria-describedby] .step-label{-webkit-line-clamp:1}.step-description{color:var(--tct-stepper-description-color, var(--t-stepper-description-color, var(--t-textA, rgba(77, 77, 77, 0.77))));font-size:var(--tct-stepper-description-font-size, var(--t-stepper-description-font-size, var(--app-font-size-small, 12px)));display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;padding-bottom:0.2em}.gradient-left,.gradient-right{z-index:1;position:absolute;top:0;height:100%;width:18px}.gradient-left{background-image:linear-gradient(to right, var(--t-base), var(--t-base-a0));left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0), var(--t-base));right:0}.btn-left,.btn-right{--tct-icon-size:18px;--tct-btn-icon-hover-bg:transparent;--tct-btn-icon-width:22px;--tct-icon-stroke-primary:var(--tct-stepper-scroll-arrow-color, var(--t-stepper-scroll-arrow-color, var(--t-text, #4d4d4d)));position:absolute;top:calc(50% - 22px);z-index:2}.btn-left{left:0}.btn-right{right: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}:host{display:block;position:relative}ul{--comp-bullet-bg:var(--tct-stepper-bullet-active-bg, var(--t-stepper-bullet-active-bg, var(--t-primary, #0079c1)));--comp-bullet-font-color:var(--tct-stepper-bullet-active-font-color, var(--t-stepper-bullet-active-font-color, var(--t-primary-font-color, #ffffff)));--comp-bullet-size:var(--tct-stepper-bullet-size, var(--t-stepper-bullet-size, 18px));--comp-bullet-gap:var(--tct-stepper-bullet-padding, var(--t-stepper-bullet-padding, var(--app-scale-2x, 10px)));--comp-bullet-border-offset:var(--tct-stepper-bullet-border-offset, var(--t-stepper-bullet-border-offset, 4px));--comp-bullet-border:var(--tct-stepper-bullet-border, var(--t-stepper-bullet-border, 2px solid var(--t-primary-l3)));--comp-bullet-font-size:var(--tct-stepper-bullet-font-size, var(--t-stepper-bullet-font-size, var(--app-font-size-small, 12px)));--comp-step-width:var(--tct-stepper-step-width, var(--t-stepper-step-width, var(--t-stepper-step-width, 80px)));--comp-step-gap:var(--tct-stepper-step-gap, var(--t-stepper-step-gap, 5px));--comp-tween:var(--tct-stepper-tween, var(--t-stepper-tween, var(--app-tween-1, 0.2s ease)));overflow-x:auto;display:flex;justify-content:center;list-style:none;padding:0;padding:var(--tct-stepper-list-padding, var(--t-stepper-list-padding, 2px));margin:0;gap:var(--comp-step-gap);--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}ul::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}ul::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}ul::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.has-scroll ul{justify-content:unset}li{min-height:var(--tct-stepper-min-height, var(--t-stepper-min-height, 50px));flex:0 0 auto;position:relative;width:var(--comp-step-width);text-align:center;max-width:150px;min-width:80px}.step-btn{position:relative;background:transparent;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;height:calc(100% - 4px);width:100%;transition:var(--comp-tween);padding:0;transition-property:box-shadow;outline:none}.step-btn[aria-disabled]{cursor:default}.step-btn[aria-disabled],.step-btn[aria-disabled]+hr{--comp-bullet-font-color:var(--tct-stepper-bullet-inactive-font-color, var(--t-stepper-bullet-inactive-font-color, var(--t-text, #4d4d4d)));--comp-bullet-bg:var(--tct-stepper-bullet-inactive-bg, var(--t-stepper-bullet-inactive-bg, var(--t-gray12, #d9d9d9)))}.step-bubble{margin:var(--comp-bullet-gap) auto;background:var(--comp-bullet-bg);color:var(--comp-bullet-font-color);width:var(--comp-bullet-size);height:var(--comp-bullet-size);min-height:var(--comp-bullet-size);font-size:var(--comp-bullet-font-size);transition:var(--comp-tween);transition-property:background, color;border-radius:50%;position:relative}[aria-selected] .step-bubble{font-weight:var(--tct-stepper-bullet-active-font-weight, var(--t-stepper-bullet-active-font-weight, 600))}[aria-selected] .step-bubble:before{content:\"\";position:absolute;inset:calc(var(--comp-bullet-border-offset) * -1);width:calc(var(--comp-bullet-size) + var(--comp-bullet-border-offset));height:calc(var(--comp-bullet-size) + var(--comp-bullet-border-offset));border-radius:50%;border:var(--comp-bullet-border)}hr{width:calc(var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size));top:calc(var(--comp-bullet-size) / 2 + var(--comp-bullet-gap));left:calc(var(--comp-step-width) * -0.5 + var(--comp-step-gap) + var(--comp-bullet-gap));border:0;border-top:1px solid var(--comp-bullet-bg);height:0;position:absolute;margin:0;transition:border var(--comp-tween)}.step-container{position:relative}.step-label{color:var(--tct-stepper-title-color, var(--t-stepper-title-color, var(--t-text, #4d4d4d)));font-size:var(--tct-stepper-title-font-size, var(--t-stepper-title-font-size, var(--app-font-size-small, 12px)));height:1.5em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}[aria-selected] .step-label{font-weight:var(--tct-stepper-active-font-weight, var(--t-stepper-active-font-weight, 600))}[aria-describedby] .step-label{-webkit-line-clamp:1}.step-description{color:var(--tct-stepper-description-color, var(--t-stepper-description-color, var(--t-textA, rgba(77, 77, 77, 0.77))));font-size:var(--tct-stepper-description-font-size, var(--t-stepper-description-font-size, var(--app-font-size-small, 12px)));display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;padding-bottom:0.2em}.gradient-left,.gradient-right{z-index:1;position:absolute;top:0;height:100%;width:18px}.gradient-left{background-image:linear-gradient(to right, var(--t-base), var(--t-base-a0));left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0), var(--t-base));right:0}.btn-left,.btn-right{--tct-icon-size:18px;--tct-btn-icon-hover-bg:transparent;--tct-btn-icon-width:22px;--tct-icon-stroke-primary:var(--tct-stepper-scroll-arrow-color, var(--t-stepper-scroll-arrow-color, var(--t-text, #4d4d4d)));position:absolute;top:calc(50% - 22px);z-index:2}.btn-left{left:0}.btn-right{right:0}";
 addSmoothScrollPolyfill();
 const Q2Stepper = class {
@@ -70,6 +70,8 @@ const Q2Stepper = class {
       this.stepCount = allPanes.length;
     };
     this.checkScrollState = () => {
+      if (!this.listElement)
+        return;
       const { scrollLeft, scrollWidth, clientWidth } = this.listElement;
       this.scrollEnabled = scrollWidth > clientWidth;
       this.showScrollLeft = !!scrollLeft;

package/dist/esm/q2-tab-container.entry.js CHANGED Viewed

@@ -103,6 +103,8 @@ const Q2TabContainer = class {
       return focusedTab;
     };
     this.checkScrollState = () => {
+      if (!this.listElement)
+        return;
       const { scrollLeft, scrollWidth, clientWidth } = this.listElement;
       this.scrollEnabled = scrollWidth > clientWidth;
       this.showScrollLeft = !!scrollLeft;
@@ -170,7 +172,7 @@ const Q2TabContainer = class {
     overrideFocus(this.hostElement);
     const index = this.tabs.findIndex(el => el.value === this.value);
     this.scheduledAfterRender.push(() => {
-      const tab = this.moveFocus(Math.max(index, 0), false);
+      const tab = this.moveFocus(Math.max(index, 0));
       this.value = tab.dataset.value;
       tab.blur();
     });

package/dist/esm/q2-tecton-elements.js CHANGED Viewed

@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 patchBrowser().then(options => {
-  return bootstrapLazy([["q2-icon",[[1,"q2-icon",{"type":[513],"label":[513]}]]],["q2-calendar",[[1,"q2-calendar",{"value":[1537],"label":[513],"hideLabel":[516,"hide-label"],"ariaLabel":[513,"aria-label"],"optional":[516],"disabled":[516],"invalid":[1540],"typeable":[516],"placeholder":[513],"buttonLabel":[513,"button-label"],"disabledMsg":[513,"disabled-msg"],"calendarLabel":[513,"calendar-label"],"disclaimer":[513],"displayFormat":[513,"display-format"],"startDate":[513,"start-date"],"endDate":[513,"end-date"],"cutoffTime":[513,"cutoff-time"],"daysOfWeekChecksum":[514,"days-of-week-checksum"],"popDirection":[513,"pop-direction"],"assume":[513],"errors":[1040],"invalidDates":[16],"validDates":[16],"onsuccess":[16],"dropdownOpen":[32],"keyboardSelection":[32],"typedValue":[32],"dateList":[32],"hintMessage":[32],"hintMessageType":[32]},[[0,"change","defaultChangeHandler"],[0,"error","defaultErrorHandler"],[0,"success","defaultSuccessHandler"],[0,"focus","delegateFocus"]]]]],["q2-dropdown",[[1,"q2-dropdown",{"type":[513],"icon":[513],"label":[513],"hideLabel":[516,"hide-label"],"ariaLabel":[513,"aria-label"],"disabled":[516],"popDirection":[513,"pop-direction"],"name":[513],"context":[513],"contextValue":[513,"context-value"],"resolvedType":[513,"resolved-type"],"dropdownOpen":[32]},[[0,"focus","delegateFocus"]]]]],["q2-select",[[1,"q2-select",{"label":[513],"hideLabel":[516,"hide-label"],"value":[1025],"ariaLabel":[513,"aria-label"],"selectedOptions":[1032,"selected-options"],"disabled":[516],"invalid":[516],"errors":[16],"multiple":[516],"minRows":[2,"min-rows"],"popDirection":[513,"pop-direction"],"searchable":[516],"multilineOptions":[516,"multiline-options"],"optional":[516],"dropdownOpen":[32],"onlyShowingSelected":[32],"activeOptionId":[32],"searchText":[32],"hasCustomDisplay":[32],"inputFocused":[32],"statusMessage":[32]},[[0,"change","onHostElementChange"],[0,"input","onHostElementInput"],[0,"focus","delegateFocus"],[0,"click","clickHandler"],[0,"keydown","keydownHandler"]]]]],["q2-editable-field",[[1,"q2-editable-field",{"value":[1537],"editing":[1540],"label":[513],"hideLabel":[516,"hide-label"],"ariaLabel":[513,"aria-label"],"type":[513],"formatModifier":[513,"format-modifier"],"truncated":[513],"maxlength":[514],"persistentLabel":[516,"persistent-label"],"hints":[16],"errors":[16]},[[0,"change","onHostElementChange"],[0,"focus","delegateFocus"]]]]],["q2-carousel",[[4,"q2-carousel",{"autoPlay":[516,"auto-play"],"fullWidthPanes":[516,"full-width-panes"],"hidePagination":[516,"hide-pagination"],"showNavigationArrows":[516,"show-navigation-arrows"],"ariaLabel":[513,"aria-label"],"label":[513],"index":[1538],"universalCarouselOptions":[32],"fullWidthDisplayOptions":[32],"activePaneIndex":[32],"applyFocus":[32],"applyPaginationFocus":[32],"autoPlayInProgress":[32],"compactMode":[32],"carouselWrapperWidth":[32]},[[0,"change","onHostElementChange"],[0,"clickCarouselPane","carouselPaneClicked"],[0,"focus","delegateFocus"]]]]],["q2-section",[[1,"q2-section",{"label":[513],"collapsible":[516],"noCollapseIcon":[516,"no-collapse-icon"],"expanded":[1540],"contentHeight":[32],"hasYieldedHeader":[32]},[[0,"change","defaultChangeHandler"],[0,"focus","delegateFocus"]]]]],["q2-stepper",[[1,"q2-stepper",{"currentStep":[1538,"current-step"],"stepCount":[1026,"step-count"],"lastEnabledStep":[1026,"last-enabled-step"],"scrollEnabled":[32],"showScrollLeft":[32],"showScrollRight":[32]},[[0,"change","defaultChangeHandler"],[0,"focus","delegateFocus"]]]]],["q2-tab-container",[[1,"q2-tab-container",{"value":[1537],"type":[513],"name":[513],"color":[513],"noPrint":[516,"no-print"],"hasLeft":[32],"hasRight":[32],"scrollEnabled":[32],"showScrollLeft":[32],"showScrollRight":[32],"tabs":[32]},[[0,"change","defaultChangeHandler"],[9,"resize","onResize"],[0,"focus","onFocus"]]]]],["q2-avatar",[[1,"q2-avatar",{"name":[513],"initials":[513],"src":[513],"icon":[1],"badSrc":[32]}]]],["q2-checkbox",[[1,"q2-checkbox",{"checked":[1540],"type":[513],"label":[513],"hideLabel":[516,"hide-label"],"ariaLabel":[513,"aria-label"],"indeterminate":[516],"disabled":[516],"value":[513],"name":[513],"hasError":[516,"has-error"],"groupDisabled":[516,"group-disabled"],"alignment":[513]},[[0,"change","defaultChangeHandler"],[0,"focus","delegateFocus"]]]]],["q2-checkbox-group",[[1,"q2-checkbox-group",{"label":[513],"value":[1040],"disabled":[516],"optional":[516],"hasError":[516,"has-error"]},[[0,"change","onHostElementChange"]]]]],["q2-option",[[1,"q2-option",{"role":[513],"tabindex":[513],"display":[513],"value":[513],"disabled":[516],"optionId":[513,"option-id"],"disabledGroup":[516,"disabled-group"],"selected":[516],"hidden":[516],"multiline":[516],"active":[516],"_multiSelectHidden":[516,"_multiselecthidden"]}]]],["q2-radio-group",[[1,"q2-radio-group",{"label":[513],"value":[1025],"disabled":[516],"name":[513],"optional":[516],"tilelayout":[516],"tileAlignment":[513,"tile-alignment"],"hasError":[516,"has-error"]},[[0,"change","onHostElementChange"],[0,"focus","delegateFocus"]]]]],["q2-textarea",[[1,"q2-textarea",{"value":[1025],"label":[513],"hideLabel":[516,"hide-label"],"hideMessages":[516,"hide-messages"],"optional":[516],"placeholder":[513],"disabled":[516],"readonly":[516],"spellcheck":[516],"maxlength":[1538],"rows":[514],"cols":[514],"resize":[513],"errors":[16],"hints":[16],"hasFocus":[32],"downParams":[32]},[[0,"focus","onHostElementFocus"],[0,"change","onHostElementChange"]]]]],["q2-carousel-pane",[[4,"q2-carousel-pane",{"index":[2],"siblingCount":[2,"sibling-count"],"isActivePane":[516,"is-active-pane"],"label":[513]}]]],["q2-loading-element",[[0,"q2-loading-element",{"shape":[513],"width":[513],"height":[513],"borderRadius":[513,"border-radius"]}]]],["q2-loc",[[1,"q2-loc",{"value":[513],"substitutions":[16]}]]],["q2-optgroup",[[1,"q2-optgroup",{"disabled":[516],"label":[513],"hidden":[32]}]]],["q2-radio",[[4,"q2-radio",{"label":[513],"hideLabel":[516,"hide-label"],"value":[513],"disabled":[516],"checked":[516],"name":[513],"ariaLabel":[513,"aria-label"],"groupDisabled":[4,"group-disabled"],"groupTileLayout":[4,"group-tile-layout"]},[[0,"click","onHostClick"],[0,"focus","delegateFocus"]]]]],["q2-stepper-pane",[[1,"q2-stepper-pane",{"label":[513],"description":[513],"isActive":[516,"is-active"]}]]],["q2-tab-pane",[[1,"q2-tab-pane",{"value":[513],"label":[513],"name":[513],"selected":[516],"index":[2],"guid":[2]}]]],["tecton-tab-pane",[[1,"tecton-tab-pane",{"value":[513],"label":[513],"name":[513],"selected":[516],"index":[2],"guid":[2],"provided":[516],"url":[513],"moduleId":[513,"module-id"],"minHeight":[513,"min-height"],"authPayload":[16],"showForm":[4,"show-form"],"_showForm":[32]}]]],["q2-dropdown-item",[[1,"q2-dropdown-item",{"disabled":[516],"removable":[516],"separator":[516],"label":[513],"ariaLabel":[513,"aria-label"],"value":[513]},[[0,"focus","onHostElementFocus"]]]]],["q2-message",[[1,"q2-message",{"type":[513],"appearance":[513],"description":[516],"presentToggle":[32],"present":[64]},[[0,"focus","delegateFocus"]]]]],["q2-input",[[1,"q2-input",{"value":[1025],"label":[513],"hideLabel":[516,"hide-label"],"type":[513],"placeholder":[513],"disabled":[516],"autocomplete":[513],"autocorrect":[513],"autocapitalize":[513],"hideMessages":[516,"hide-messages"],"iconLeft":[513,"icon-left"],"iconRight":[513,"icon-right"],"readonly":[516],"clearable":[516],"optional":[516],"formatModifier":[513,"format-modifier"],"maxlength":[1538],"pseudo":[516],"showVisibilityToggle":[516,"show-visibility-toggle"],"textHidden":[1540,"text-hidden"],"ariaControls":[1,"aria-controls"],"role":[1],"ariaOwns":[1,"aria-owns"],"ariaLabel":[513,"aria-label"],"ariaHaspopup":[1,"aria-haspopup"],"ariaExpanded":[4,"aria-expanded"],"ariaActivedescendant":[8,"aria-activedescendant"],"errors":[16],"hints":[16],"formattedValueObject":[32],"hasFocus":[32]},[[0,"focus","onHostElementFocus"],[0,"change","onHostElementChange"]]]]],["click-elsewhere",[[0,"click-elsewhere"]]],["q2-btn_2",[[1,"q2-btn",{"ariaExpanded":[4,"aria-expanded"],"ariaHasPopup":[8,"aria-has-popup"],"ariaControls":[1,"aria-controls"],"ariaSelected":[4,"aria-selected"],"label":[513],"hideLabel":[516,"hide-label"],"ariaLabel":[513,"aria-label"],"tabIndex":[2,"tab-index"],"intent":[513],"disabled":[516],"type":[513],"loading":[516],"badge":[516],"active":[516],"fab":[516],"iconPosition":[32]},[[2,"click","disable"],[0,"focus","delegateFocus"]]],[1,"q2-loading",{"type":[513],"shape":[513],"modifiers":[513],"counts":[513],"label":[513],"ariaLabel":[513,"aria-label"],"inline":[516]}]]]], options);
+  return bootstrapLazy([["q2-icon",[[1,"q2-icon",{"type":[513],"label":[513]}]]],["q2-calendar",[[1,"q2-calendar",{"value":[1537],"label":[513],"hideLabel":[516,"hide-label"],"ariaLabel":[513,"aria-label"],"optional":[516],"disabled":[516],"invalid":[1540],"typeable":[516],"placeholder":[513],"buttonLabel":[513,"button-label"],"disabledMsg":[513,"disabled-msg"],"calendarLabel":[513,"calendar-label"],"disclaimer":[513],"displayFormat":[513,"display-format"],"startDate":[513,"start-date"],"endDate":[513,"end-date"],"cutoffTime":[513,"cutoff-time"],"daysOfWeekChecksum":[514,"days-of-week-checksum"],"popDirection":[513,"pop-direction"],"assume":[513],"errors":[1040],"invalidDates":[16],"validDates":[16],"onsuccess":[16],"dropdownOpen":[32],"keyboardSelection":[32],"typedValue":[32],"dateList":[32],"hintMessage":[32],"hintMessageType":[32]},[[0,"change","defaultChangeHandler"],[0,"error","defaultErrorHandler"],[0,"success","defaultSuccessHandler"],[0,"focus","delegateFocus"]]]]],["q2-dropdown",[[1,"q2-dropdown",{"type":[513],"icon":[513],"label":[513],"hideLabel":[516,"hide-label"],"ariaLabel":[513,"aria-label"],"disabled":[516],"popDirection":[513,"pop-direction"],"name":[513],"context":[513],"contextValue":[513,"context-value"],"resolvedType":[513,"resolved-type"],"dropdownOpen":[32]},[[0,"focus","delegateFocus"]]]]],["q2-select",[[1,"q2-select",{"label":[513],"hideLabel":[516,"hide-label"],"value":[1025],"ariaLabel":[513,"aria-label"],"selectedOptions":[1032,"selected-options"],"disabled":[516],"invalid":[516],"errors":[16],"multiple":[516],"minRows":[2,"min-rows"],"popDirection":[513,"pop-direction"],"searchable":[516],"multilineOptions":[516,"multiline-options"],"optional":[516],"dropdownOpen":[32],"onlyShowingSelected":[32],"activeOptionId":[32],"searchText":[32],"hasCustomDisplay":[32],"inputFocused":[32],"statusMessage":[32]},[[0,"change","onHostElementChange"],[0,"input","onHostElementInput"],[0,"focus","delegateFocus"],[0,"click","clickHandler"],[0,"keydown","keydownHandler"]]]]],["q2-editable-field",[[1,"q2-editable-field",{"value":[1537],"editing":[1540],"label":[1537],"hideLabel":[1540,"hide-label"],"ariaLabel":[1537,"aria-label"],"type":[513],"formatModifier":[513,"format-modifier"],"truncated":[513],"maxlength":[514],"persistentLabel":[516,"persistent-label"],"hints":[16],"errors":[16]},[[0,"change","onHostElementChange"],[0,"focus","delegateFocus"]]]]],["q2-carousel",[[4,"q2-carousel",{"autoPlay":[516,"auto-play"],"fullWidthPanes":[516,"full-width-panes"],"hidePagination":[516,"hide-pagination"],"showNavigationArrows":[516,"show-navigation-arrows"],"ariaLabel":[513,"aria-label"],"label":[513],"index":[1538],"universalCarouselOptions":[32],"fullWidthDisplayOptions":[32],"activePaneIndex":[32],"applyFocus":[32],"applyPaginationFocus":[32],"autoPlayInProgress":[32],"compactMode":[32],"carouselWrapperWidth":[32]},[[0,"change","onHostElementChange"],[0,"clickCarouselPane","carouselPaneClicked"],[0,"focus","delegateFocus"]]]]],["q2-section",[[1,"q2-section",{"label":[513],"collapsible":[516],"noCollapseIcon":[516,"no-collapse-icon"],"expanded":[1540],"contentHeight":[32],"hasYieldedHeader":[32]},[[0,"change","defaultChangeHandler"],[0,"focus","delegateFocus"]]]]],["q2-stepper",[[1,"q2-stepper",{"currentStep":[1538,"current-step"],"stepCount":[1026,"step-count"],"lastEnabledStep":[1026,"last-enabled-step"],"scrollEnabled":[32],"showScrollLeft":[32],"showScrollRight":[32]},[[0,"change","defaultChangeHandler"],[0,"focus","delegateFocus"]]]]],["q2-tab-container",[[1,"q2-tab-container",{"value":[1537],"type":[513],"name":[513],"color":[513],"noPrint":[516,"no-print"],"hasLeft":[32],"hasRight":[32],"scrollEnabled":[32],"showScrollLeft":[32],"showScrollRight":[32],"tabs":[32]},[[0,"change","defaultChangeHandler"],[9,"resize","onResize"],[0,"focus","onFocus"]]]]],["q2-avatar",[[1,"q2-avatar",{"name":[513],"initials":[513],"src":[513],"icon":[1],"badSrc":[32]}]]],["q2-checkbox",[[1,"q2-checkbox",{"checked":[1540],"type":[513],"label":[513],"hideLabel":[516,"hide-label"],"ariaLabel":[513,"aria-label"],"indeterminate":[516],"disabled":[516],"value":[513],"name":[513],"hasError":[516,"has-error"],"groupDisabled":[516,"group-disabled"],"alignment":[513]},[[0,"change","defaultChangeHandler"],[0,"focus","delegateFocus"]]]]],["q2-checkbox-group",[[1,"q2-checkbox-group",{"label":[513],"value":[1040],"disabled":[516],"optional":[516],"hasError":[516,"has-error"]},[[0,"change","onHostElementChange"]]]]],["q2-option",[[1,"q2-option",{"role":[513],"tabindex":[513],"display":[513],"value":[513],"disabled":[516],"optionId":[513,"option-id"],"disabledGroup":[516,"disabled-group"],"selected":[516],"hidden":[516],"multiline":[516],"active":[516],"_multiSelectHidden":[516,"_multiselecthidden"]}]]],["q2-radio-group",[[1,"q2-radio-group",{"label":[513],"value":[1025],"disabled":[516],"name":[513],"optional":[516],"tilelayout":[516],"tileAlignment":[513,"tile-alignment"],"hasError":[516,"has-error"]},[[0,"change","onHostElementChange"],[0,"focus","delegateFocus"],[0,"keydown","keydownHandler"]]]]],["q2-textarea",[[1,"q2-textarea",{"value":[1025],"label":[513],"hideLabel":[516,"hide-label"],"hideMessages":[516,"hide-messages"],"optional":[516],"placeholder":[513],"disabled":[516],"readonly":[516],"spellcheck":[516],"maxlength":[1538],"rows":[514],"cols":[514],"resize":[513],"errors":[16],"hints":[16],"hasFocus":[32],"downParams":[32]},[[0,"focus","onHostElementFocus"],[0,"change","onHostElementChange"]]]]],["q2-carousel-pane",[[4,"q2-carousel-pane",{"index":[2],"siblingCount":[2,"sibling-count"],"isActivePane":[516,"is-active-pane"],"label":[513]}]]],["q2-loading-element",[[0,"q2-loading-element",{"shape":[513],"width":[513],"height":[513],"borderRadius":[513,"border-radius"]}]]],["q2-loc",[[1,"q2-loc",{"value":[513],"substitutions":[16]}]]],["q2-optgroup",[[1,"q2-optgroup",{"disabled":[516],"label":[513],"hidden":[32]}]]],["q2-radio",[[1,"q2-radio",{"label":[513],"hideLabel":[516,"hide-label"],"value":[513],"disabled":[516],"checked":[516],"name":[513],"ariaLabel":[513,"aria-label"],"groupDisabled":[4,"group-disabled"],"groupTileLayout":[4,"group-tile-layout"]},[[0,"click","onHostClick"],[0,"focus","delegateFocus"]]]]],["q2-stepper-pane",[[1,"q2-stepper-pane",{"label":[513],"description":[513],"isActive":[516,"is-active"]}]]],["q2-tab-pane",[[1,"q2-tab-pane",{"value":[513],"label":[513],"name":[513],"selected":[516],"index":[2],"guid":[2]}]]],["tecton-tab-pane",[[1,"tecton-tab-pane",{"value":[513],"label":[513],"name":[513],"selected":[516],"index":[2],"guid":[2],"provided":[516],"url":[513],"moduleId":[513,"module-id"],"minHeight":[513,"min-height"],"authPayload":[16],"showForm":[4,"show-form"],"_showForm":[32]}]]],["q2-dropdown-item",[[1,"q2-dropdown-item",{"disabled":[516],"removable":[516],"separator":[516],"label":[513],"ariaLabel":[513,"aria-label"],"value":[513]},[[0,"focus","onHostElementFocus"]]]]],["q2-message",[[1,"q2-message",{"type":[513],"appearance":[513],"description":[516],"presentToggle":[32],"present":[64]},[[0,"focus","delegateFocus"]]]]],["q2-input",[[1,"q2-input",{"value":[1025],"label":[513],"hideLabel":[516,"hide-label"],"type":[513],"placeholder":[513],"disabled":[516],"autocomplete":[513],"autocorrect":[513],"autocapitalize":[513],"hideMessages":[516,"hide-messages"],"iconLeft":[513,"icon-left"],"iconRight":[513,"icon-right"],"readonly":[516],"clearable":[516],"optional":[516],"formatModifier":[513,"format-modifier"],"maxlength":[1538],"pseudo":[516],"showVisibilityToggle":[516,"show-visibility-toggle"],"textHidden":[1540,"text-hidden"],"ariaControls":[1,"aria-controls"],"role":[1],"ariaOwns":[1,"aria-owns"],"ariaLabel":[513,"aria-label"],"ariaHaspopup":[1,"aria-haspopup"],"ariaExpanded":[4,"aria-expanded"],"ariaActivedescendant":[8,"aria-activedescendant"],"errors":[16],"hints":[16],"formattedValueObject":[32],"hasFocus":[32]},[[0,"focus","onHostElementFocus"],[0,"change","onHostElementChange"]]]]],["click-elsewhere",[[0,"click-elsewhere"]]],["q2-btn_2",[[1,"q2-btn",{"ariaExpanded":[4,"aria-expanded"],"ariaHasPopup":[8,"aria-has-popup"],"ariaControls":[1,"aria-controls"],"ariaSelected":[4,"aria-selected"],"label":[513],"hideLabel":[516,"hide-label"],"ariaLabel":[513,"aria-label"],"tabIndex":[2,"tab-index"],"intent":[513],"disabled":[516],"type":[513],"loading":[516],"badge":[516],"active":[516],"fab":[516],"iconPosition":[32]},[[2,"click","disable"],[0,"focus","delegateFocus"]]],[1,"q2-loading",{"type":[513],"shape":[513],"modifiers":[513],"counts":[513],"label":[513],"ariaLabel":[513,"aria-label"],"inline":[516]}]]]], options);
 });

package/dist/esm/q2-textarea.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-be8376c0.js';
 import { c as createGuid, b as setMessageHeight, o as overrideFocus, i as isEventFromElement, m as messagesDOM, d as labelDOM, l as loc } from './index-ec6660af.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;margin-top:var(--tct-textarea-margin-top, var(--app-scale-6x, 30px));margin-bottom:var(--tct-textarea-margin-bottom, var(--app-scale-6x, 30px));font-size:var(--tct-textarea-font-size, var(--app-font-size, inherit))}:host([hidden]){display:none}label{display:block;padding-left:var(--tct-textarea-label-padding-left, 0);padding-right:var(--tct-textarea-label-padding-right, 0);margin-top:var(--tct-textarea-label-margin-top, 0);margin-bottom:var(--tct-textarea-label-margin-bottom, var(--tct-scale-1x, var(--app-scale-1x, 5px)));color:var(--tct-textarea-label-font-color, inherit);font-size:var(--tct-textarea-label-font-size, inherit);font-weight:var(--tct-textarea-label-font-weight, 600);text-transform:var(--tct-textarea-label-text-transform, none);letter-spacing:var(--tct-textarea-label-letter-spacing, normal);transition:color var(--tct-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)))}.optional-tag{margin-left:var(--tct-textarea-label-optional-margin-left, var(--tct-scale-1x, var(--app-scale-1x, 5px)));color:var(--tct-textarea-label-optional-font-color, var(--tct-a11y-color, var(--t-a11y-gray-color, #767676)));font-size:var(--tct-textarea-label-optional-font-size, 12px);font-weight:var(--tct-textarea-label-optional-font-weight, 400)}.input-container{min-height:var(--comp-textarea-min-height, var(--tct-textarea-min-height));height:100%;--comp-textarea-border-top-left-radius:var(\n      --tct-textarea-border-top-left-radius,\n      var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n  );--comp-textarea-border-top-right-radius:var(\n      --tct-textarea-border-top-right-radius,\n      var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n  );--comp-textarea-border-bottom-right-radius:var(\n      --tct-textarea-border-bottom-right-radius,\n      var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n  );--comp-textarea-border-bottom-left-radius:var(\n      --tct-textarea-border-bottom-left-radius,\n      var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n  );--comp-textarea-border-radius:var(--comp-textarea-border-top-left-radius)\n      var(--comp-textarea-border-top-right-radius) var(--comp-textarea-border-bottom-right-radius)\n      var(--comp-textarea-border-bottom-left-radius);--comp-textarea-border-width:var(--tct-textarea-border-top-width, 1px)\n      var(--tct-textarea-border-right-width, 1px) var(--tct-textarea-border-bottom-width, 1px)\n      var(--tct-textarea-border-left-width, 1px);--comp-textarea-focus-border-width:var(--tct-textarea-focus-border-top-width, 1px)\n      var(--tct-textarea-focus-border-right-width, 1px)\n      var(--tct-textarea-focus-border-bottom-width, 1px)\n      var(--tct-textarea-focus-border-left-width, 1px);--comp-textarea-icon-clearance:34px}.content-container{--comp-textarea-min-height:44px;--comp-textarea-min-width:150px;position:relative;display:inline-block;min-height:var(--comp-textarea-min-height, var(--tct-textarea-min-height, 44px));min-width:var(--comp-textarea-min-width, var(--tct-textarea-min-width, 150px))}:host(:not([cols])) .content-container{width:100%}textarea{resize:none;height:100%;-webkit-appearance:none;appearance:none;display:block;box-sizing:border-box;min-height:var(--comp-textarea-min-height, var(--tct-textarea-min-height));padding:var(--tct-textarea-vertical-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px))) var(--tct-textarea-horizontal-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px)));background-color:var(--tct-textarea-bg, var(--t-input-bg, var(--tct-gray-14, var(--app-gray-14, #f2f2f2))));color:var(--tct-textarea-font-color, var(--t-input-font-color, inherit));border-width:var(--comp-textarea-border-width);border-style:solid;border-color:var(--tct-textarea-border-color, var(--t-input-border, var(--tct-gray-11, var(--app-gray-11, #cccccc))));border-radius:var(--comp-textarea-border-radius);box-shadow:var(--tct-textarea-box-shadow, none);scrollbar-width:thin;scrollbar-color:var(--t-a11y-gray-color) transparent;transition:border-width var(--tct-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))), border-color var(--tct-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))), box-shadow var(--tct-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)))}textarea::-webkit-scrollbar{width:var(--app-scale-1x);height:var(--app-scale-1x);margin:var(--app-scale-1x)}textarea::-webkit-scrollbar-thumb{background:var(--t-a11y-gray-color);border-radius:2px}textarea::-webkit-scrollbar-track{background:transparent}textarea:not([cols]){width:100%}textarea:focus{border-width:var(--comp-textarea-focus-border-width, 1px);border-color:var(--tct-textarea-focus-border-color, var(--t-input-focus, var(--tct-gray-9, var(--app-gray-9, #999999))));box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff)), var(--tct-textarea-focus-box-shadow, 0 0 transparent)}textarea::placeholder{color:var(--tct-textarea-placeholder-font-color, var(--t-input-placeholder-font-color, var(--tct-gray-7, var(--app-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666))))))}q2-icon{margin-top:calc(var(--tct-textarea-border-top-width, 1px) / 2);margin-bottom:calc(var(--tct-textarea-border-bottom-width, 1px) / 2);pointer-events:none;position:absolute;top:var(--tct-textarea-vertical-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px)));color:var(--tct-textarea-icon-stroke-primary, var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999))));right:0;margin-right:var(--tct-scale-2x, var(--app-scale-2x, 10px));--tct-icon-stroke-primary:var(\n      --tct-textarea-icon-stroke-primary,\n      var(--tct-gray-9, var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999))))\n  );--t-icon-stroke-primary:var(\n      --tct-textarea-icon-stroke-primary,\n      var(--tct-gray-9, var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999))))\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));--t-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000))}.messages-container{height:0px;overflow:hidden;background-color:var(--tct-message-bg, var(--tct-gray-14, var(--app-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))));box-shadow:var(--tct-textarea-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-textarea-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-textarea-messages-font-color, inherit)}:host([disabled]) .input-container{cursor:not-allowed;opacity:var(--tct-textarea-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)))}textarea[disabled]{cursor:not-allowed}.has-error textarea{padding-right:var(--comp-textarea-icon-clearance)}.has-error label{color:var(--tct-textarea-error-label-font-color, var(--tct-textarea-label-font-color, inherit))}.has-error textarea:not(:focus){border-color:var(--tct-textarea-error-border-color, var(--const-stoplight-alert, #c30000))}.max-length{color:var(--tct-textarea-max-length-color, var(--t-textA, rgba(77, 77, 77, 0.77)));font-size:var(--tct-textarea-max-length-font-size, var(--tct-font-size-small, var(--app-font-size-small, 12px)));position:absolute;right:0}.btn-resize{--tct-textarea-resize-icon-padding:calc(\n      calc(\n              var(--tct-textarea-resize-btn-width, var(--tct-btn-icon-width, 44px)) -\n                  var(--tct-textarea-resize-icon-size, 12px)\n          ) / 2\n  );width:var(--tct-textarea-resize-btn-width, var(--tct-btn-icon-width, 44px));height:var(--tct-textarea-resize-btn-height, var(--tct-btn-icon-height, 44px));background:var(--tct-textarea-resize-btn-background, transparent);stroke:var(--tct-textarea-resize-color, var(--t-textA, rgba(77, 77, 77, 0.77)));border:0;position:absolute;right:calc(var(--tct-textarea-resize-icon-padding) * -1 + 2px);bottom:calc(var(--tct-textarea-resize-icon-padding) * -1 + 2px);display:block;padding:var(--tct-textarea-resize-icon-padding);font-size:0}.btn-resize:focus{outline:none;box-shadow:none}:host([resize=both]) .btn-resize{cursor:se-resize}:host([resize=vertical]) .btn-resize{cursor:s-resize}:host([resize=horizontal]) .btn-resize{cursor:e-resize}";
+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-textarea-margin-top, var(--t-textarea-margin-top, var(--app-scale-6x, 30px)));margin-bottom:var(--tct-textarea-margin-bottom, var(--t-textarea-margin-bottom, var(--app-scale-6x, 30px)));font-size:var(--tct-textarea-font-size, var(--t-textarea-font-size, var(--app-font-size, inherit)))}:host([hidden]){display:none}label{display:block;padding-left:var(--tct-textarea-label-padding-left, var(--t-textarea-label-padding-left, 0));padding-right:var(--tct-textarea-label-padding-right, var(--t-textarea-label-padding-right, 0));margin-top:var(--tct-textarea-label-margin-top, var(--t-textarea-label-margin-top, 0));margin-bottom:var(--tct-textarea-label-margin-bottom, var(--t-textarea-label-margin-bottom, var(--tct-scale-1x, var(--app-scale-1x, 5px))));color:var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit));font-size:var(--tct-textarea-label-font-size, var(--t-textarea-label-font-size, inherit));font-weight:var(--tct-textarea-label-font-weight, var(--t-textarea-label-font-weight, 600));text-transform:var(--tct-textarea-label-text-transform, var(--t-textarea-label-text-transform, none));letter-spacing:var(--tct-textarea-label-letter-spacing, var(--t-textarea-label-letter-spacing, normal));transition:color var(--tct-textarea-tween, var(--t-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))))}.optional-tag{margin-left:var(--tct-textarea-label-optional-margin-left, var(--t-textarea-label-optional-margin-left, var(--tct-scale-1x, var(--app-scale-1x, 5px))));color:var(--tct-textarea-label-optional-font-color, var(--t-textarea-label-optional-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-textarea-label-optional-font-size, var(--t-textarea-label-optional-font-size, 12px));font-weight:var(--tct-textarea-label-optional-font-weight, var(--t-textarea-label-optional-font-weight, 400))}.input-container{min-height:var(--tct-textarea-min-height, var(--t-textarea-min-height, var(--comp-textarea-min-height)));height:100%;--comp-default-border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 3px));--comp-textarea-border-top-left-radius:var(--tct-textarea-border-top-left-radius, var(--t-textarea-border-top-left-radius, var(--comp-default-border-radius)));--comp-textarea-border-top-right-radius:var(--tct-textarea-border-top-right-radius, var(--t-textarea-border-top-right-radius, var(--comp-default-border-radius)));--comp-textarea-border-bottom-right-radius:var(--tct-textarea-border-bottom-right-radius, var(--t-textarea-border-bottom-right-radius, var(--comp-default-border-radius)));--comp-textarea-border-bottom-left-radius:var(--tct-textarea-border-bottom-left-radius, var(--t-textarea-border-bottom-left-radius, var(--comp-default-border-radius)));--comp-textarea-border-radius:var(--comp-textarea-border-top-left-radius)\n      var(--comp-textarea-border-top-right-radius) var(--comp-textarea-border-bottom-right-radius)\n      var(--comp-textarea-border-bottom-left-radius);--comp-textarea-border-width:var(--tct-textarea-border-top-width, var(--t-textarea-border-top-width, 1px)) var(--tct-textarea-border-right-width, var(--t-textarea-border-right-width, 1px)) var(--tct-textarea-border-bottom-width, var(--t-textarea-border-bottom-width, 1px)) var(--tct-textarea-border-left-width, var(--t-textarea-border-left-width, 1px));--comp-textarea-focus-border-width:var(--tct-textarea-focus-border-top-width, var(--t-textarea-focus-border-top-width, 1px)) var(--tct-textarea-focus-border-right-width, var(--t-textarea-focus-border-right-width, 1px)) var(--tct-textarea-focus-border-bottom-width, var(--t-textarea-focus-border-bottom-width, 1px)) var(--tct-textarea-focus-border-left-width, var(--t-textarea-focus-border-left-width, 1px));--comp-textarea-icon-clearance:34px}:host([disabled]) .input-container{cursor:not-allowed;opacity:var(--tct-textarea-disabled-opacity, var(--t-textarea-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}.content-container{--comp-textarea-min-height:44px;--comp-textarea-min-width:150px;position:relative;display:inline-block;min-height:var(--tct-textarea-min-height, var(--t-textarea-min-height, var(--comp-textarea-min-height)));min-width:var(--tct-textarea-min-width, var(--t-textarea-min-width, var(--comp-textarea-min-width)))}:host(:not([cols])) .content-container{width:100%}textarea{resize:none;height:100%;-webkit-appearance:none;appearance:none;display:block;box-sizing:border-box;min-height:var(--tct-textarea-min-height, var(--t-textarea-min-height, var(--comp-textarea-min-height)));padding:var(--tct-textarea-vertical-padding, var(--t-textarea-vertical-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px)))) var(--tct-textarea-horizontal-padding, var(--t-textarea-horizontal-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px))));background-color:var(--tct-textarea-bg, var(--t-textarea-bg, var(--t-input-bg, var(--tct-gray-14, var(--app-gray-14, #f2f2f2)))));color:var(--tct-textarea-font-color, var(--t-textarea-font-color, var(--t-input-font-color, inherit)));border-width:var(--comp-textarea-border-width);border-style:solid;border-color:var(--tct-textarea-border-color, var(--t-textarea-border-color, var(--t-input-border, var(--tct-gray-11, var(--app-gray-11, #cccccc)))));border-radius:var(--comp-textarea-border-radius);box-shadow:var(--tct-textarea-box-shadow, var(--t-textarea-box-shadow, none));scrollbar-width:thin;scrollbar-color:var(--t-a11y-gray-color) transparent;--comp-textarea-tween:var(--tct-textarea-tween, var(--t-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))));transition:border-width var(--comp-textarea-tween), border-color var(--comp-textarea-tween), box-shadow var(--comp-textarea-tween)}textarea::-webkit-scrollbar{width:var(--app-scale-1x);height:var(--app-scale-1x);margin:var(--app-scale-1x)}textarea::-webkit-scrollbar-thumb{background:var(--t-a11y-gray-color);border-radius:2px}textarea::-webkit-scrollbar-track{background:transparent}textarea:not([cols]){width:100%}textarea:focus{border-width:var(--comp-textarea-focus-border-width, 1px);border-color:var(--tct-textarea-focus-border-color, var(--t-textarea-focus-border-color, var(--t-input-focus, var(--tct-gray-9, var(--app-gray-9, #999999)))));box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff)), var(--tct-textarea-focus-box-shadow, var(--t-textarea-focus-box-shadow, 0 0 transparent))}textarea::placeholder{color:var(--tct-textarea-placeholder-font-color, var(--t-textarea-placeholder-font-color, var(--t-input-placeholder-font-color, var(--tct-gray-7, var(--app-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666)))))))}textarea[disabled]{cursor:not-allowed}.has-error textarea{padding-right:var(--comp-textarea-icon-clearance)}.has-error textarea:not(:focus){border-color:var(--tct-textarea-error-border-color, var(--t-textarea-error-border-color, var(--const-stoplight-alert, #c30000)))}q2-icon{margin-top:calc(var(--tct-textarea-border-top-width, var(--t-textarea-border-top-width, 1px)) / 2);margin-bottom:calc(var(--tct-textarea-border-bottom-width, var(--t-textarea-border-bottom-width, 1px)) / 2);pointer-events:none;position:absolute;top:var(--tct-textarea-vertical-padding, var(--t-textarea-vertical-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px))));color:var(--tct-textarea-icon-stroke-primary, var(--t-textarea-icon-stroke-primary, var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999)))));right:0;margin-right:var(--tct-scale-2x, var(--app-scale-2x, 10px));--tct-icon-stroke-primary:var(--tct-textarea-icon-stroke-primary, var(--t-textarea-icon-stroke-primary, var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))));--t-icon-stroke-primary:var(--tct-textarea-icon-stroke-primary, var(--t-textarea-icon-stroke-primary, var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))))}.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));--t-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000))}.messages-container{height:0px;overflow:hidden;background-color:var(--tct-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))));box-shadow:var(--tct-textarea-message-box-shadow, var(--t-textarea-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-textarea-messages-tween, var(--t-textarea-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-textarea-messages-font-color, var(--t-textarea-messages-font-color, inherit))}.has-error label{color:var(--tct-textarea-error-label-font-color, var(--t-textarea-error-label-font-color, var(--tct-textarea-label-font-color, inherit)))}.max-length{color:var(--tct-textarea-max-length-color, var(--t-textarea-max-length-color, var(--t-textA, rgba(77, 77, 77, 0.77))));font-size:var(--tct-textarea-max-length-font-size, var(--t-textarea-max-length-font-size, var(--tct-font-size-small, var(--app-font-size-small, 12px))));position:absolute;right:0}.btn-resize{--tct-textarea-resize-icon-padding:calc(\n      calc(\n              var(--tct-textarea-resize-btn-width, var(--t-textarea-resize-btn-width, var(--tct-btn-icon-width, 44px))) - var(--tct-textarea-resize-icon-size, var(--t-textarea-resize-icon-size, 12px))\n          ) / 2\n  );width:var(--tct-textarea-resize-btn-width, var(--t-textarea-resize-btn-width, var(--tct-btn-icon-width, 44px)));height:var(--tct-textarea-resize-btn-height, var(--t-textarea-resize-btn-height, var(--tct-btn-icon-height, 44px)));background:var(--tct-textarea-resize-btn-background, var(--t-textarea-resize-btn-background, transparent));stroke:var(--tct-textarea-resize-color, var(--t-textarea-resize-color, var(--t-textA, rgba(77, 77, 77, 0.77))));border:0;position:absolute;right:calc(var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding)) * -1 + 2px);bottom:calc(var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding)) * -1 + 2px);display:block;padding:var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding));font-size:0}.btn-resize:focus{outline:none;box-shadow:none}:host([resize=both]) .btn-resize{cursor:se-resize}:host([resize=vertical]) .btn-resize{cursor:s-resize}:host([resize=horizontal]) .btn-resize{cursor:e-resize}";
 const Q2Textarea = class {
   constructor(hostRef) {