q2-tecton-elements 1.70.2 → 1.71.0

package/dist/components/q2-tag2.js

@@ -1,18 +1,18 @@
-import { proxyCustomElement as t, HTMLElement as o, createEvent as e, h as i, Host as r, Fragment as a, transformTag as s } from "@stencil/core/internal/client";
+import { proxyCustomElement as t, HTMLElement as o, createEvent as e, h as r, Host as i, Fragment as a, transformTag as s } from "@stencil/core/internal/client";
 
-import { o as n, i as c, w as l, l as p } from "./index2.js";
+import { o as n, i as c, w as p, l } from "./index2.js";
 
-import { m as h } from "./mirror-emit.js";
+import { m as d } from "./mirror-emit.js";
 
-import { s as d, a as g } from "./action-sheet.js";
+import { s as h, a as g } from "./action-sheet.js";
 
-import { d as v } from "./click-elsewhere2.js";
+import { d as m } from "./click-elsewhere2.js";
 
-import { d as m } from "./q2-icon2.js";
+import { d as v } from "./q2-icon2.js";
 
-import { d as b } from "./q2-option-list2.js";
+import { d as u } from "./q2-option-list2.js";
 
-import { d as u } from "./q2-popover2.js";
+import { d as b } from "./q2-popover2.js";
 
 const f =  t(class extends o {
   constructor(t) {
@@ -46,22 +46,22 @@ const f =  t(class extends o {
     }, this.handleChange = t => {
       if (t.stopPropagation(), !this.optionCount) return;
       const {value: o} = t.detail;
-      h(this, [ "click", "tctClick" ], {
+      d(this, [ "click", "tctClick" ], {
         value: o
       });
     }, this.handleClick = async t => {
       if (t.stopPropagation(), this.popoverElement.controlElement = this.dropdownBtn, 
-      d(this)) {
+      h(this)) {
         const {value: o} = await g(this, t);
-        this.dropdownBtn.focus(), h(this, [ "click", "tctClick" ], {
+        this.dropdownBtn.focus(), d(this, [ "click", "tctClick" ], {
           value: o
         });
       } else await this.popoverElement.toggle();
     }, this.handleKeydown = async t => {
       if (!(t.metaKey || t.ctrlKey || "Tab" === t.key)) if (t.preventDefault(), this.popoverElement.controlElement = this.dropdownBtn, 
-      d(this, t)) {
+      h(this, t)) {
         const {value: o} = await g(this, t);
-        this.dropdownBtn.focus(), h(this, [ "click", "tctClick" ], {
+        this.dropdownBtn.focus(), d(this, [ "click", "tctClick" ], {
           value: o
         });
       } else this.optionList.handleExternalKeydown(t);
@@ -127,7 +127,7 @@ const f =  t(class extends o {
      * @testonly
      */  async selectOption(t) {
     if (!this.optionCount) return;
-    await this.openPopover(), await l();
+    await this.openPopover(), await p();
     const o = (await this.optionList.getOptions()).find((o => o.value === t));
     null == o || o.click();
   }
@@ -140,22 +140,22 @@ const f =  t(class extends o {
   // #endregion
   // #region Render Methods
   renderHiddenElement() {
-    return i("div", {
+    return r("div", {
       id: "option-description",
       class: "sr",
       "aria-hidden": "true"
-    }, p("tecton.element.optionList.optionCount", [ this.optionCount ]));
+    }, l("tecton.element.optionList.optionCount", [ this.optionCount ]));
   }
   render() {
     const {open: t} = this, o = [ "tag" ];
     this.optionCount && o.push("has-options");
     const e = this.optionCount > 0;
-    return i(r, {
-      key: "8bf6d92e2f691ae8efeb0b1f24b460d193c069f1"
-    }, i("click-elsewhere", {
-      key: "9c6d2c96a64528a7831f5f1f019e81f5092b1347",
+    return r(i, {
+      key: "b7b199109ef756942f6cf76aff904a21ba406998"
+    }, r("click-elsewhere", {
+      key: "f4a5ec911c582d480e5d7d91638d681ba6c054c8",
       onChange: this.onClickElsewhere
-    }, e ? i(a, null, i("button", {
+    }, e ? r(a, null, r("button", {
       class: "tag-wrapper",
       ref: t => this.dropdownBtn = t,
       "test-id": "btn-control",
@@ -167,20 +167,20 @@ const f =  t(class extends o {
       "aria-controls": "option-list",
       "aria-expanded": t ? "true" : "false",
       "aria-describedby": "option-description",
-      "aria-label": p(this.label)
-    }, i("div", {
+      "aria-label": l(this.label)
+    }, r("div", {
       class: o.join(" ")
-    }, p(this.label)), i("q2-icon", {
+    }, l(this.label)), r("q2-icon", {
       type: "options"
-    })), this.renderHiddenElement()) : i("div", {
+    })), this.renderHiddenElement()) : r("div", {
       class: "tag-wrapper",
       onClick: t => t.stopPropagation()
-    }, i("div", {
+    }, r("div", {
       class: o.join(" ")
-    }, i("slot", {
+    }, r("slot", {
       name: "decorator"
-    }), p(this.label))), e && i("q2-popover", {
-      key: "2df0c2c782ec0908fe95f4c824fa4230beeb2e6d",
+    }), l(this.label))), e && r("q2-popover", {
+      key: "046a9aae077ed9800b081ce70aa5d03f0d919cff",
       ref: t => this.popoverElement = t,
       controlElement: this.dropdownBtn,
       open: this.open,
@@ -188,24 +188,24 @@ const f =  t(class extends o {
       minHeight: this.popoverMinHeight,
       direction: this.popoverDirection,
       align: this.popoverAlignment
-    }, i("q2-option-list", {
-      key: "8423b3877e1750ee12f5162b7fd2eb43a9552002",
+    }, r("q2-option-list", {
+      key: "63899f97a13db69ed8776214ca6670e825663c5a",
       id: "option-list",
       ref: t => this.optionList = t,
       onChange: this.handleChange,
       type: "menu",
       align: "right",
-      label: p("tecton.element.optionList.label", [ this.optionListLabel ]),
+      label: l("tecton.element.optionList.label", [ this.optionListLabel ]),
       "no-select": !0
-    }, i("slot", {
-      key: "66ba933485bb28a9d140018c7ce6ce02e31ea668"
+    }, r("slot", {
+      key: "40fa7c27a8b27ae2c5f894bbe1ae6e51ab1b55f0"
     })))));
   }
   get hostElement() {
     return this;
   }
   static get style() {
-    return "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-tag-margin, var(--t-tag-margin, var(--app-scale-2x, 10px)))}.tag-wrapper{--comp-tag-btn-size:var(--tct-tag-btn-size, var(--t-tag-btn-size, var(--app-scale-5x, 25px)));--comp-tag-background:var(--tct-tag-background, var(--t-tag-background, var(--t-gray-13, #e6e6e6)));--comp-tag-color:var(--tct-tag-color, var(--t-tag-color, var(--t-gray-3, #262626)));--comp-tag-border-color:var(--tct-tag-border-color, transparent);background:var(--comp-tag-background);color:var(--comp-tag-color);border-radius:var(--tct-tag-border-radius, var(--t-tag-border-radius, var(--app-border-radius-1, 4px)));border-width:var(--tct-tag-border-width, 0);border-style:var(--tct-tag-border-style, none);border-color:var(--comp-tag-border-color);font-size:var(--tct-tag-font-size, 14px);font-weight:var(--tct-tag-font-weight, inherit);position:relative}:host([theme=primary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-primary-background, var(--t-primary, #0079c1));--comp-tag-color:var(--tct-tag-primary-font-color, var(--t-primary-text, #ffffff));--comp-tag-border-color:var(--tct-tag-primary-border-color, var(--t-primary, #0079c1))}:host([theme=secondary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-secondary-background, var(--t-secondary, #b3c2cc));--comp-tag-color:var(--tct-tag-secondary-font-color, var(--t-secondary-text, #141414));--comp-tag-border-color:var(--tct-tag-secondary-border-color, var(--t-secondary, #b3c2cc))}:host([theme=tertiary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-tertiary-background, var(--t-tertiary, #e8f5fc));--comp-tag-color:var(--tct-tag-tertiary-font-color, var(--t-tertiary-text, #141414));--comp-tag-border-color:var(--tct-tag-tertiary-border-color, var(--t-tertiary, #e8f5fc))}.tag-wrapper:focus-visible{box-shadow:var(--tct-tag-focus-visible-box-shadow, var(--const-double-focus-ring))}.tag{display:flex;align-items:center;width:max-content;gap:6px;height:var(--tct-tag-height, var(--t-tag-height, var(--app-scale-5x, 25px)));line-height:var(--tct-tag-height, var(--t-tag-height, var(--app-scale-5x, 25px)));padding-inline:var(--tct-tag-padding-inline, var(--t-tag-padding-inline, var(--app-scale-2x, 10px)))}.tag ::slotted(q2-icon[slot=decorator]){--tct-icon-size:1em;--tct-icon-stroke-primary:var(--tct-tag-decorator-icon-primary-stroke);--tct-icon-stroke-secondary:var(--tct-tag-decorator-icon-secondary-stroke)}:host([theme=primary]) .tag ::slotted(q2-icon[slot=decorator]){--tct-icon-stroke-primary:var(--tct-tag-primary-decorator-icon-primary-stroke);--tct-icon-stroke-secondary:var(--tct-tag-primary-decorator-icon-secondary-stroke)}.tag ::slotted(q2-badge[slot=decorator]){--tct-badge-height:1em;--tct-badge-line-height:25px}.tag.has-options{padding-right:6px}button{height:var(--comp-tag-btn-size);stroke:var(--comp-tag-color);--tct-icon-stroke-primary:var(--comp-tag-color);cursor:pointer;border:0;background:transparent;display:flex;align-items:center;justify-content:center;padding:0;padding-right:6px;--tct-icon-size:18px}";
+    return '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host{display:inline-block;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-tag-margin, var(--t-tag-margin, var(--app-scale-2x, 10px)))}.tag-wrapper{--comp-tag-btn-size:var(--tct-tag-btn-size, var(--t-tag-btn-size, var(--app-scale-5x, 25px)));--comp-tag-background:var(--tct-tag-background, var(--t-tag-background, var(--t-gray-13, #e6e6e6)));--comp-tag-color:var(--tct-tag-color, var(--t-tag-color, var(--t-gray-3, #262626)));--comp-tag-border-color:var(--tct-tag-border-color, transparent);background:var(--comp-tag-background);color:var(--comp-tag-color);border-radius:var(--tct-tag-border-radius, var(--t-tag-border-radius, var(--app-border-radius-1, 4px)));border-width:var(--tct-tag-border-width, 0);border-style:var(--tct-tag-border-style, none);border-color:var(--comp-tag-border-color);font-size:var(--tct-tag-font-size, var(--const-px-14, 14px));font-weight:var(--tct-tag-font-weight, inherit);position:relative}:host([theme=primary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-primary-background, var(--t-primary, #0079c1));--comp-tag-color:var(--tct-tag-primary-font-color, var(--t-primary-text, #ffffff));--comp-tag-border-color:var(--tct-tag-primary-border-color, var(--t-primary, #0079c1))}:host([theme=secondary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-secondary-background, var(--t-secondary, #b3c2cc));--comp-tag-color:var(--tct-tag-secondary-font-color, var(--t-secondary-text, #141414));--comp-tag-border-color:var(--tct-tag-secondary-border-color, var(--t-secondary, #b3c2cc))}:host([theme=tertiary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-tertiary-background, var(--t-tertiary, #e8f5fc));--comp-tag-color:var(--tct-tag-tertiary-font-color, var(--t-tertiary-text, #141414));--comp-tag-border-color:var(--tct-tag-tertiary-border-color, var(--t-tertiary, #e8f5fc))}.tag-wrapper:focus-visible{box-shadow:var(--tct-tag-focus-visible-box-shadow, var(--const-double-focus-ring))}.tag{display:flex;align-items:center;width:max-content;gap:6px;height:var(--tct-tag-height, var(--t-tag-height, var(--app-scale-5x, 25px)));line-height:var(--tct-tag-height, var(--t-tag-height, var(--app-scale-5x, 25px)));padding-inline:var(--tct-tag-padding-inline, var(--t-tag-padding-inline, var(--app-scale-2x, 10px)))}.tag ::slotted(q2-icon[slot=decorator]){--tct-icon-size:1em;--tct-icon-stroke-primary:var(--tct-tag-decorator-icon-primary-stroke);--tct-icon-stroke-secondary:var(--tct-tag-decorator-icon-secondary-stroke)}:host([theme=primary]) .tag ::slotted(q2-icon[slot=decorator]){--tct-icon-stroke-primary:var(--tct-tag-primary-decorator-icon-primary-stroke);--tct-icon-stroke-secondary:var(--tct-tag-primary-decorator-icon-secondary-stroke)}.tag ::slotted(q2-badge[slot=decorator]){--tct-badge-height:1em;--tct-badge-line-height:var(--const-px-25, 25px)}.tag.has-options{padding-right:6px}button{height:var(--comp-tag-btn-size);stroke:var(--comp-tag-color);--tct-icon-stroke-primary:var(--comp-tag-color);cursor:pointer;border:0;background:transparent;display:flex;align-items:center;justify-content:center;padding:0;padding-right:6px;--tct-icon-size:18px}';
   }
 }, [ 257, "q2-tag", {
   hoist: [ 4 ],
@@ -232,19 +232,19 @@ function defineCustomElement() {
       break;
 
      case "click-elsewhere":
-      customElements.get(s(t)) || v();
+      customElements.get(s(t)) || m();
       break;
 
      case "q2-icon":
-      customElements.get(s(t)) || m();
+      customElements.get(s(t)) || v();
       break;
 
      case "q2-option-list":
-      customElements.get(s(t)) || b();
+      customElements.get(s(t)) || u();
       break;
 
      case "q2-popover":
-      customElements.get(s(t)) || u();
+      customElements.get(s(t)) || b();
     }
   }));
 }

package/dist/components/q2-textarea.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement as t, HTMLElement as r, createEvent as a, h as e, Fragment as o, transformTag as i } from "@stencil/core/internal/client";
 
-import { f as s, c, s as n, o as l, i as h, l as d, r as v, g as x } from "./index2.js";
+import { f as s, c as n, s as c, o as l, i as h, l as d, r as v, g as x } from "./index2.js";
 
 import { m as p } from "./mirror-emit.js";
 
@@ -12,7 +12,7 @@ const g =  t(class extends r {
     this.input = a(this, "input", 7), this.tctChange = a(this, "tctChange", 7), this.tctInput = a(this, "tctInput", 7), 
     this.debouncedScreenReaderCharacterCount = s((() => {
       this.updateScreenReaderCharacterCount();
-    }), 2e3), this.describeByScreenReaderCharacterCount = !0, this.guid = c(), this.scheduledAfterRender = [], 
+    }), 2e3), this.describeByScreenReaderCharacterCount = !0, this.guid = n(), this.scheduledAfterRender = [], 
     /** Indicates how the field is resizable. */
     this.resize = "vertical", this.checkCols = () => {
       const {contentContainer: t, cols: r, textareaField: a, resize: e} = this;
@@ -50,7 +50,7 @@ const g =  t(class extends r {
       this.downParams = null;
     }, this.onTextareaBlur = () => {
       const {valueOnFocus: t, textareaField: {value: r}} = this;
-      this.describeByScreenReaderCharacterCount = !0, this.hasFocus = !1, n(this), t !== r && p(this, [ "change", "tctChange" ], {
+      this.describeByScreenReaderCharacterCount = !0, this.hasFocus = !1, c(this), t !== r && p(this, [ "change", "tctChange" ], {
         value: r
       });
     }, this.onTextareaChange = t => {
@@ -60,7 +60,7 @@ const g =  t(class extends r {
         value: r
       });
     }, this.onTextareaFocus = () => {
-      this.hasFocus = !0, this.valueOnFocus = this.value, n(this);
+      this.hasFocus = !0, this.valueOnFocus = this.value, c(this);
     }, this.onTextareaInput = t => {
       t.stopPropagation();
       const r = t.target.value;
@@ -128,10 +128,10 @@ const g =  t(class extends r {
     this.contentContainer.style.width = null;
   }
   errorsObserver() {
-    this.hasFocus && this.scheduledAfterRender.push((() => n(this)));
+    this.hasFocus && this.scheduledAfterRender.push((() => c(this)));
   }
   hintsObserver() {
-    this.hasFocus && this.scheduledAfterRender.push((() => n(this)));
+    this.hasFocus && this.scheduledAfterRender.push((() => c(this)));
   }
   maxlengthObserver() {
     this.maxlength && this.updateScreenReaderCharacterCount();
@@ -181,18 +181,18 @@ const g =  t(class extends r {
     var r, a;
     const {contentContainer: e, resize: o, downParams: {height: i, y: s}} = this;
     if (![ "both", "vertical", "vertical-auto" ].includes(o)) return;
-    const c = i - (s - (t instanceof MouseEvent ? t.clientY : null !== (a = null === (r = t.touches[0]) || void 0 === r ? void 0 : r.pageY) && void 0 !== a ? a : 0));
+    const n = i - (s - (t instanceof MouseEvent ? t.clientY : null !== (a = null === (r = t.touches[0]) || void 0 === r ? void 0 : r.pageY) && void 0 !== a ? a : 0));
     // If 'vertical-auto', change height if the new height is greater
     // than the current height or the textarea is not overflowing.
     // Otherwise, change height regardless of the new height.
-    ("vertical-auto" !== o || c > i || "vertical-auto" === o && !this.isOverflowingVertically()) && (e.style.height = c + "px");
+    ("vertical-auto" !== o || n > i || "vertical-auto" === o && !this.isOverflowingVertically()) && (e.style.height = n + "px");
   }
   setWidth(t) {
     var r, a;
     const {contentContainer: e, resize: o, downParams: {width: i, x: s}} = this;
     if (![ "both", "horizontal" ].includes(o)) return;
-    const c = i - (s - (t instanceof MouseEvent ? t.clientX : null !== (a = null === (r = t.touches[0]) || void 0 === r ? void 0 : r.pageX) && void 0 !== a ? a : 0));
-    e.style.width = c + "px";
+    const n = i - (s - (t instanceof MouseEvent ? t.clientX : null !== (a = null === (r = t.touches[0]) || void 0 === r ? void 0 : r.pageX) && void 0 !== a ? a : 0));
+    e.style.width = n + "px";
   }
   // #endregion
   // #region Render Methods
@@ -229,7 +229,7 @@ const g =  t(class extends r {
       onMouseDown: this.onMouseDown,
       onTouchStart: this.onTouchStart,
       class: "btn-resize",
-      "aria-label": d("tecton.element.input.resize"),
+      "aria-hidden": "true",
       tabIndex: -1
     }, e("svg", {
       "aria-hidden": "true",
@@ -255,10 +255,10 @@ const g =  t(class extends r {
   }
   render() {
     return e("div", {
-      key: "1a53c8b1528031f5ccb957f2a2320f7a8a8f4607",
+      key: "9b3eb74c84edd99af52a0ec71ba8b2fd8adbd1f2",
       class: this.wrapperClasses
     }, v(this), e("div", {
-      key: "1de221d01fd339d749b557d408acabdc06c07ecc",
+      key: "a00772502ea6c1fde5af5bf4c12f0606a629252a",
       class: "content-container",
       ref: t => this.contentContainer = t
     }, this.renderInput(), this.maxlength ? this.renderMaxLength() : "", x(this)));
@@ -289,7 +289,7 @@ const g =  t(class extends r {
     };
   }
   static get style() {
-    return "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{--comp-default-textarea-margin:var(--tct-textarea-margin-top, var(--t-textarea-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-textarea-margin-bottom, var(--t-textarea-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-textarea-margin, var(--comp-default-textarea-margin));font-size:var(--tct-textarea-font-size, var(--t-textarea-font-size, var(--app-font-size, inherit)));font-weight:var(--tct-textarea-font-weight, var(--t-textarea-font-weight, 400))}:host([hidden]){display:none}label{--comp-label-padding:var(--tct-textarea-label-padding, 0 var(--tct-textarea-label-padding-right, var(--t-textarea-label-padding-right, 0)) 0 var(--tct-textarea-label-padding-left, var(--t-textarea-label-padding-left, 0)));--comp-label-margin:var(--tct-textarea-label-margin, var(--tct-textarea-label-margin-top, var(--t-textarea-label-margin-top, 0)) 0 var(--tct-textarea-label-margin-bottom, var(--t-textarea-label-margin-bottom, var(--tct-scale-1x, var(--app-scale-1x, 5px)))));display:block;padding:var(--comp-label-padding);margin:var(--comp-label-margin);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, inherit));transition:color var(--tct-textarea-tween, var(--t-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))))}.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)))}:hover label{color:var(--tct-textarea-hover-label-font-color, var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit)))}.has-error :hover label{color:var(--tct-textarea-error-hover-label-font-color, var(--tct-textarea-error-label-font-color, var(--t-textarea-error-label-font-color, var(--tct-textarea-hover-label-font-color, var(--tct-textarea-label-font-color, inherit)))))}:host(:focus-within) label{color:var(--tct-textarea-focus-label-font-color, var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit)))}:host(:focus-within) .has-error label{color:var(--tct-textarea-error-focus-label-font-color, var(--tct-textarea-error-label-font-color, var(--t-textarea-error-label-font-color, var(--tct-textarea-focus-label-font-color, var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit))))))}.optional-tag{--comp-label-optional-margin:var(--tct-textarea-label-optional-margin, 0 0 0 var(--tct-textarea-label-optional-margin-left, var(--t-textarea-label-optional-margin-left, var(--tct-scale-1x, var(--app-scale-1x, 5px)))));margin:var(--comp-label-optional-margin);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, 4px));--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)       var(--comp-textarea-border-top-right-radius) var(--comp-textarea-border-bottom-right-radius)       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-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))));backdrop-filter:var(--tct-textarea-disabled-backdrop-filter, var(--comp-input-backdrop-filter))}.content-container{--comp-textarea-min-height:46px;--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{--comp-textarea-padding:var(--tct-textarea-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)))));--comp-textarea-backdrop-filter:var(--tct-textarea-backdrop-filter, none);--comp-textarea-border-color:var(--tct-textarea-border-color, var(--t-textarea-border-color, var(--tct-input-border-color, var(--t-input-border-color, var(--t-a11y-gray-color-AA, #949494)))));--comp-textarea-background:var(--tct-textarea-background, var(--tct-textarea-bg, var(--t-textarea-bg, var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--t-gray-14, #fcfcfd)))))));--comp-textarea-hover-ring-color:var(--tct-textarea-hover-ring-color);--comp-textarea-hover-ring:0 0 0 2px var(--t-base), 0 0 0 4px var(--comp-textarea-hover-ring-color), var(--tct-textarea-hover-box-shadow, 0 0 transparent);font-size:var(--tct-textarea-font-size, inherit);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(--comp-textarea-padding);backdrop-filter:var(--comp-textarea-backdrop-filter);background:var(--comp-textarea-background);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(--comp-textarea-border-color);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:background var(--comp-textarea-tween), backdrop-filter var(--comp-textarea-tween), 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%}.has-error textarea{padding-right:var(--comp-textarea-icon-clearance);backdrop-filter:var(--tct-textarea-error-backdrop-filter, var(--comp-textarea-backdrop-filter));border-color:var(--tct-textarea-error-border-color, var(--t-textarea-error-border-color, var(--const-stoplight-alert, #d20a0a)));background:var(--tct-textarea-error-background, var(--comp-textarea-background));box-shadow:var(--tct-textarea-error-box-shadow, var(--tct-textarea-box-shadow, var(--t-textarea-box-shadow, none)))}textarea:hover{border-color:var(--tct-textarea-hover-border-color, var(--comp-textarea-border-color));backdrop-filter:var(--tct-textarea-hover-backdrop-filter, var(--comp-textarea-backdrop-filter));background:var(--tct-textarea-hover-background, var(--comp-textarea-background));box-shadow:var(--tct-textarea-hover-box-shadow, var(--comp-textarea-hover-ring))}.has-error textarea:hover{border-color:var(--tct-textarea-error-hover-border-color, var(--tct-textarea-error-border-color, var(--t-textarea-error-border-color, var(--const-stoplight-alert, #d20a0a))));backdrop-filter:var(--tct-textarea-error-hover-backdrop-filter, var(--tct-textarea-error-backdrop-filter, var(--tct-textarea-hover-backdrop-filter, var(--comp-textarea-backdrop-filter))));background:var(--tct-textarea-error-hover-background, var(--tct-textarea-error-background, var(--comp-textarea-background)));box-shadow:var(--tct-textarea-error-hover-box-shadow, var(--tct-textarea-error-box-shadow, var(--tct-textarea-hover-box-shadow, var(--comp-textarea-hover-ring))))}textarea:focus{border-color:var(--tct-textarea-focus-border-color, var(--comp-textarea-border-color));backdrop-filter:var(--tct-textarea-focus-backdrop-filter, var(--comp-textarea-backdrop-filter));background:var(--tct-textarea-focus-background, var(--comp-textarea-background))}.has-error textarea:focus{border-color:var(--tct-textarea-error-focus-border-color, var(--tct-textarea-error-border-color, var(--const-stoplight-alert, #d20a0a)));backdrop-filter:var(--tct-textarea-error-focus-backdrop-filter, var(--tct-textarea-error-backdrop-filter, var(--tct-textarea-focus-backdrop-filter, var(--comp-textarea-backdrop-filter))));background:var(--tct-textarea-error-focus-background, var(--tct-textarea-error-background, var(--tct-textarea-focus-background, var(--comp-textarea-background))));box-shadow:var(--tct-textarea-error-focus-box-shadow, var(--tct-textarea-error-box-shadow, var(--tct-textarea-focus-box-shadow, var(--const-double-focus-ring))))}textarea:focus-visible{box-shadow:var(--tct-textarea-focus-box-shadow, var(--const-double-focus-ring))}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}textarea.resize-vertical-auto{overflow:hidden}.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, #d20a0a)))}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, #d20a0a));--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--t-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}.messages-container{height:0px;overflow:hidden;background:var(--tct-message-background, var(--tct-message-bg, var(--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, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)))));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:var(--tct-textarea-messages-margin-top, 2px);z-index:1;position:absolute;width:100%;color:var(--tct-textarea-messages-font-color, var(--t-textarea-messages-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(       calc(               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))           ) / 2   );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))));stroke-width:var(--tct-textarea-resize-stroke-width, var(--t-textarea-resize-stroke-width, 1));border:0;position:absolute;right:var(--tct-textarea-resize-right, calc(var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding)) * -1 + 2px));bottom:var(--tct-textarea-resize-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,:host([resize=vertical-auto]) .btn-resize{cursor:s-resize}:host([resize=horizontal]) .btn-resize{cursor:e-resize}";
+    return '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host{--comp-default-textarea-margin:var(--tct-textarea-margin-top, var(--t-textarea-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-textarea-margin-bottom, var(--t-textarea-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-textarea-margin, var(--comp-default-textarea-margin));font-size:var(--tct-textarea-font-size, var(--t-textarea-font-size, var(--app-font-size, inherit)));font-weight:var(--tct-textarea-font-weight, var(--t-textarea-font-weight, 400))}:host([hidden]){display:none}label{--comp-label-padding:var(--tct-textarea-label-padding, 0 var(--tct-textarea-label-padding-right, var(--t-textarea-label-padding-right, 0)) 0 var(--tct-textarea-label-padding-left, var(--t-textarea-label-padding-left, 0)));--comp-label-margin:var(--tct-textarea-label-margin, var(--tct-textarea-label-margin-top, var(--t-textarea-label-margin-top, 0)) 0 var(--tct-textarea-label-margin-bottom, var(--t-textarea-label-margin-bottom, var(--tct-scale-1x, var(--app-scale-1x, 5px)))));display:block;padding:var(--comp-label-padding);margin:var(--comp-label-margin);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, inherit));transition:color var(--tct-textarea-tween, var(--t-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))))}.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)))}:hover label{color:var(--tct-textarea-hover-label-font-color, var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit)))}.has-error :hover label{color:var(--tct-textarea-error-hover-label-font-color, var(--tct-textarea-error-label-font-color, var(--t-textarea-error-label-font-color, var(--tct-textarea-hover-label-font-color, var(--tct-textarea-label-font-color, inherit)))))}:host(:focus-within) label{color:var(--tct-textarea-focus-label-font-color, var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit)))}:host(:focus-within) .has-error label{color:var(--tct-textarea-error-focus-label-font-color, var(--tct-textarea-error-label-font-color, var(--t-textarea-error-label-font-color, var(--tct-textarea-focus-label-font-color, var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit))))))}.optional-tag{--comp-label-optional-margin:var(--tct-textarea-label-optional-margin, 0 0 0 var(--tct-textarea-label-optional-margin-left, var(--t-textarea-label-optional-margin-left, var(--tct-scale-1x, var(--app-scale-1x, 5px)))));margin:var(--comp-label-optional-margin);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, var(--const-px-12, 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, 4px));--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)       var(--comp-textarea-border-top-right-radius) var(--comp-textarea-border-bottom-right-radius)       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-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))));backdrop-filter:var(--tct-textarea-disabled-backdrop-filter, var(--comp-input-backdrop-filter))}.content-container{--comp-textarea-min-height:46px;--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{--comp-textarea-padding:var(--tct-textarea-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)))));--comp-textarea-backdrop-filter:var(--tct-textarea-backdrop-filter, none);--comp-textarea-border-color:var(--tct-textarea-border-color, var(--t-textarea-border-color, var(--tct-input-border-color, var(--t-input-border-color, var(--t-a11y-gray-color-AA, #949494)))));--comp-textarea-background:var(--tct-textarea-background, var(--tct-textarea-bg, var(--t-textarea-bg, var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--t-gray-14, #fcfcfd)))))));--comp-textarea-hover-ring-color:var(--tct-textarea-hover-ring-color);--comp-textarea-hover-ring:0 0 0 2px var(--t-base), 0 0 0 4px var(--comp-textarea-hover-ring-color), var(--tct-textarea-hover-box-shadow, 0 0 transparent);font-size:var(--tct-textarea-font-size, inherit);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(--comp-textarea-padding);backdrop-filter:var(--comp-textarea-backdrop-filter);background:var(--comp-textarea-background);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(--comp-textarea-border-color);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:background var(--comp-textarea-tween), backdrop-filter var(--comp-textarea-tween), 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%}.has-error textarea{padding-right:var(--comp-textarea-icon-clearance);backdrop-filter:var(--tct-textarea-error-backdrop-filter, var(--comp-textarea-backdrop-filter));border-color:var(--tct-textarea-error-border-color, var(--t-textarea-error-border-color, var(--const-stoplight-alert, #d20a0a)));background:var(--tct-textarea-error-background, var(--comp-textarea-background));box-shadow:var(--tct-textarea-error-box-shadow, var(--tct-textarea-box-shadow, var(--t-textarea-box-shadow, none)))}textarea:hover{border-color:var(--tct-textarea-hover-border-color, var(--comp-textarea-border-color));backdrop-filter:var(--tct-textarea-hover-backdrop-filter, var(--comp-textarea-backdrop-filter));background:var(--tct-textarea-hover-background, var(--comp-textarea-background));box-shadow:var(--tct-textarea-hover-box-shadow, var(--comp-textarea-hover-ring))}.has-error textarea:hover{border-color:var(--tct-textarea-error-hover-border-color, var(--tct-textarea-error-border-color, var(--t-textarea-error-border-color, var(--const-stoplight-alert, #d20a0a))));backdrop-filter:var(--tct-textarea-error-hover-backdrop-filter, var(--tct-textarea-error-backdrop-filter, var(--tct-textarea-hover-backdrop-filter, var(--comp-textarea-backdrop-filter))));background:var(--tct-textarea-error-hover-background, var(--tct-textarea-error-background, var(--comp-textarea-background)));box-shadow:var(--tct-textarea-error-hover-box-shadow, var(--tct-textarea-error-box-shadow, var(--tct-textarea-hover-box-shadow, var(--comp-textarea-hover-ring))))}textarea:focus{border-color:var(--tct-textarea-focus-border-color, var(--comp-textarea-border-color));backdrop-filter:var(--tct-textarea-focus-backdrop-filter, var(--comp-textarea-backdrop-filter));background:var(--tct-textarea-focus-background, var(--comp-textarea-background))}.has-error textarea:focus{border-color:var(--tct-textarea-error-focus-border-color, var(--tct-textarea-error-border-color, var(--const-stoplight-alert, #d20a0a)));backdrop-filter:var(--tct-textarea-error-focus-backdrop-filter, var(--tct-textarea-error-backdrop-filter, var(--tct-textarea-focus-backdrop-filter, var(--comp-textarea-backdrop-filter))));background:var(--tct-textarea-error-focus-background, var(--tct-textarea-error-background, var(--tct-textarea-focus-background, var(--comp-textarea-background))));box-shadow:var(--tct-textarea-error-focus-box-shadow, var(--tct-textarea-error-box-shadow, var(--tct-textarea-focus-box-shadow, var(--const-double-focus-ring))))}textarea:focus-visible{box-shadow:var(--tct-textarea-focus-box-shadow, var(--const-double-focus-ring))}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}textarea.resize-vertical-auto{overflow:hidden}.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, #d20a0a)))}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, #d20a0a));--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--t-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}.messages-container{height:0px;overflow:hidden;background:var(--tct-message-background, var(--tct-message-bg, var(--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, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)))));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:var(--tct-textarea-messages-margin-top, 2px);z-index:1;position:absolute;width:100%;color:var(--tct-textarea-messages-font-color, var(--t-textarea-messages-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, var(--const-px-12, 12px)))));position:absolute;right:0}.btn-resize{--tct-textarea-resize-icon-padding:calc(       calc(               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))           ) / 2   );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))));stroke-width:var(--tct-textarea-resize-stroke-width, var(--t-textarea-resize-stroke-width, 1));border:0;position:absolute;right:var(--tct-textarea-resize-right, calc(var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding)) * -1 + 2px));bottom:var(--tct-textarea-resize-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,:host([resize=vertical-auto]) .btn-resize{cursor:s-resize}:host([resize=horizontal]) .btn-resize{cursor:e-resize}';
   }
 }, [ 1, "q2-textarea", {
   cols: [ 514 ],
@@ -332,7 +332,7 @@ const g =  t(class extends r {
   } ]
 } ]);
 
-const u = g, defineCustomElement = function() {
+const m = g, defineCustomElement = function() {
   if ("undefined" == typeof customElements) return;
   [ "q2-textarea", "q2-icon" ].forEach((t => {
     switch (t) {
@@ -346,4 +346,4 @@ const u = g, defineCustomElement = function() {
   }));
 };
 
-export { u as Q2Textarea, defineCustomElement }
+export { m as Q2Textarea, defineCustomElement }

package/dist/components/q2-toast.js

@@ -1,4 +1,4 @@
-import { proxyCustomElement as t, HTMLElement as o, createEvent as e, h as s, transformTag as i } from "@stencil/core/internal/client";
+import { proxyCustomElement as t, HTMLElement as o, createEvent as e, h as i, transformTag as s } from "@stencil/core/internal/client";
 
 import { b as a, l as r } from "./index2.js";
 
@@ -130,51 +130,51 @@ const c =  t(class extends o {
   // #endregion
   // #region Render Methods
   renderIcon() {
-    return this.hideIcon ? null : this.hasIconSlot ? s("slot", {
+    return this.hideIcon ? null : this.hasIconSlot ? i("slot", {
       name: "icon"
-    }) : this.resolvedIcon ? s("q2-icon", {
+    }) : this.resolvedIcon ? i("q2-icon", {
       type: this.resolvedIcon
     }) : null;
   }
   render() {
-    return this.isOpen ? s("div", {
+    return this.isOpen ? i("div", {
       class: this.toastClasses,
       role: this.ariaRole,
       "aria-live": this.ariaLive,
       "aria-atomic": "true",
       "aria-relevant": "all"
-    }, this.srTypeLabel && s("span", {
+    }, this.srTypeLabel && i("span", {
       class: "sr"
-    }, this.srTypeLabel), s("div", {
+    }, this.srTypeLabel), i("div", {
       class: "container"
-    }, s("div", {
+    }, i("div", {
       class: "header"
-    }, this.shouldShowIcon && s("div", {
+    }, this.shouldShowIcon && i("div", {
       class: "icon"
-    }, this.renderIcon()), s("div", {
+    }, this.renderIcon()), i("div", {
       class: "title"
-    }, s("span", {
+    }, i("span", {
       class: "title-text"
-    }, s("slot", {
+    }, i("slot", {
       name: "title"
-    }, this.tctTitle))), this.closable && s("button", {
+    }, this.tctTitle))), this.closable && i("button", {
       class: "close",
       type: "button",
       "aria-label": r("tecton.element.toast.close"),
       onClick: this.onCloseClick
-    }, s("q2-icon", {
+    }, i("q2-icon", {
       type: "close"
-    }))), this.isLarge && s("div", {
+    }))), this.isLarge && i("div", {
       class: "content"
-    }, this.message, s("slot", null)), this.showFooter && s("div", {
+    }, this.message, i("slot", null)), this.showFooter && i("div", {
       class: "footer"
-    }, s("div", {
+    }, i("div", {
       class: "time"
-    }, s("slot", {
+    }, i("slot", {
       name: "time"
-    }, this.time)), s("div", {
+    }, this.time)), i("div", {
       class: "actions"
-    }, s("slot", {
+    }, i("slot", {
       name: "actions"
     }))))) : null;
   }
@@ -198,7 +198,7 @@ const c =  t(class extends o {
     };
   }
   static get style() {
-    return "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}.toast{--comp-accent-width:1px;--comp-icon-size:32px;--comp-icon-bg:transparent;--comp-text-color:var(--tct-toast-text, var(--tct-gray-2, var(--app-gray-2, #333333)));--comp-subtle-color:var(--tct-toast-subtle, var(--tct-gray-5, var(--app-gray-5, #6b6b6b)));--comp-color-success:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00));--comp-color-info:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));--comp-color-warning:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500));--comp-color-alert:var(--tct-stoplight-alert, var(--const-stoplight-alert, #d20a0a));--comp-color-default:white;display:flex;flex-direction:column;gap:var(--tct-toast-gap, var(--app-scale-2x, 10px));padding-left:3px;border-radius:5px;border:1px solid transparent;background:var(--tct-toast-background, var(--tct-gray-14, var(--app-gray-l3, #ffffff)));color:var(--comp-text-color);box-shadow:var(--tct-toast-shadow, var(--app-shadow-2, 0 12px 24px rgb(0 0 0 / 0.12)));overflow:hidden}.toast.success{border-color:var(--comp-color-success);background-color:var(--comp-color-success);--comp-icon-bg:#e7f5e3}.toast.info{border-color:var(--comp-color-info);background-color:var(--comp-color-info);--comp-icon-bg:#e6f1fb}.toast.warning{border-color:var(--comp-color-warning);background-color:var(--comp-color-warning);--comp-icon-bg:#fff0df}.toast.alert{border-color:var(--comp-color-alert);background-color:var(--comp-color-alert);--comp-icon-bg:#fde6e6}.toast.is-closing{animation-name:shrink;animation-duration:500ms;animation-timing-function:linear;animation-fill-mode:forwards;transform-origin:top;overflow:hidden}.toast.small .container{padding:var(--tct-toast-padding-small, var(--app-scale-2x, 10px))}.toast.default{--comp-border-color:var(--tct-toast-border, var(--tct-gray-9, var(--app-gray-4, #d1d1d1)));--comp-icon-bg:var(--tct-toast-icon-bg, var(--tct-gray-12, var(--app-gray-l2, #f3f3f3)));border-color:var(--comp-border-color)}.header{display:grid;grid-template-columns:var(--comp-icon-size) 1fr auto;gap:var(--tct-toast-gap, var(--app-scale-2x, 10px));align-items:center}.toast.no-icon .header{grid-template-columns:1fr auto}.icon{width:var(--comp-icon-size);height:var(--comp-icon-size);border-radius:50%;display:grid;place-items:center;background:var(--comp-icon-bg)}.icon q2-icon{--tct-icon-size:calc(var(--comp-icon-size) - 6px);--tct-icon-stroke-primary:var(--comp-border-color);--tct-icon-stroke-secondary:var(--comp-border-color);--tct-icon-fill:var(--comp-border-color)}.title{font-weight:600;display:flex;align-items:center}.title-text{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.content{color:var(--comp-subtle-color);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.footer{margin-top:var(--tct-toast-footer-gap, var(--app-scale-2x, 10px));display:flex;align-items:center;justify-content:space-between;gap:var(--tct-toast-footer-spacing, var(--app-scale-2x, 10px));color:var(--comp-subtle-color);font-size:0.875rem}.time{white-space:nowrap}.actions{display:inline-flex;align-items:center;gap:var(--tct-toast-actions-gap, var(--app-scale-2x, 10px))}.close{border:none;background:transparent;padding:2px;margin-left:var(--tct-toast-close-offset, var(--app-scale-1x, 5px));color:var(--comp-subtle-color);cursor:pointer}.close q2-icon{--tct-icon-size:18px}.container{padding:var(--tct-toast-padding, var(--app-scale-3x, 15px));background-color:white}@keyframes shrink{from{transform:scale(1);height:var(--toast-close-height, 0px);opacity:1}to{transform:scale(0);height:0;opacity:0}}";
+    return '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host{display:block}.toast{--comp-accent-width:1px;--comp-icon-size:32px;--comp-icon-bg:transparent;--comp-text-color:var(--tct-toast-text, var(--tct-gray-2, var(--app-gray-2, #333333)));--comp-subtle-color:var(--tct-toast-subtle, var(--tct-gray-5, var(--app-gray-5, #6b6b6b)));--comp-color-success:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00));--comp-color-info:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));--comp-color-warning:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500));--comp-color-alert:var(--tct-stoplight-alert, var(--const-stoplight-alert, #d20a0a));--comp-color-default:white;display:flex;flex-direction:column;gap:var(--tct-toast-gap, var(--app-scale-2x, 10px));padding-left:3px;border-radius:5px;border:1px solid transparent;background:var(--tct-toast-background, var(--tct-gray-14, var(--app-gray-l3, #ffffff)));color:var(--comp-text-color);box-shadow:var(--tct-toast-shadow, var(--app-shadow-2, 0 12px 24px rgb(0 0 0 / 0.12)));overflow:hidden}.toast.success{border-color:var(--comp-color-success);background-color:var(--comp-color-success);--comp-icon-bg:#e7f5e3}.toast.info{border-color:var(--comp-color-info);background-color:var(--comp-color-info);--comp-icon-bg:#e6f1fb}.toast.warning{border-color:var(--comp-color-warning);background-color:var(--comp-color-warning);--comp-icon-bg:#fff0df}.toast.alert{border-color:var(--comp-color-alert);background-color:var(--comp-color-alert);--comp-icon-bg:#fde6e6}.toast.is-closing{animation-name:shrink;animation-duration:500ms;animation-timing-function:linear;animation-fill-mode:forwards;transform-origin:top;overflow:hidden}.toast.small .container{padding:var(--tct-toast-padding-small, var(--app-scale-2x, 10px))}.toast.default{--comp-border-color:var(--tct-toast-border, var(--tct-gray-9, var(--app-gray-4, #d1d1d1)));--comp-icon-bg:var(--tct-toast-icon-bg, var(--tct-gray-12, var(--app-gray-l2, #f3f3f3)));border-color:var(--comp-border-color)}.header{display:grid;grid-template-columns:var(--comp-icon-size) 1fr auto;gap:var(--tct-toast-gap, var(--app-scale-2x, 10px));align-items:center}.toast.no-icon .header{grid-template-columns:1fr auto}.icon{width:var(--comp-icon-size);height:var(--comp-icon-size);border-radius:50%;display:grid;place-items:center;background:var(--comp-icon-bg)}.icon q2-icon{--tct-icon-size:calc(var(--comp-icon-size) - 6px);--tct-icon-stroke-primary:var(--comp-border-color);--tct-icon-stroke-secondary:var(--comp-border-color);--tct-icon-fill:var(--comp-border-color)}.title{font-weight:600;display:flex;align-items:center}.title-text{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.content{color:var(--comp-subtle-color);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.footer{margin-top:var(--tct-toast-footer-gap, var(--app-scale-2x, 10px));display:flex;align-items:center;justify-content:space-between;gap:var(--tct-toast-footer-spacing, var(--app-scale-2x, 10px));color:var(--comp-subtle-color);font-size:0.875rem}.time{white-space:nowrap}.actions{display:inline-flex;align-items:center;gap:var(--tct-toast-actions-gap, var(--app-scale-2x, 10px))}.close{border:none;background:transparent;padding:2px;margin-left:var(--tct-toast-close-offset, var(--app-scale-1x, 5px));color:var(--comp-subtle-color);cursor:pointer}.close q2-icon{--tct-icon-size:18px}.container{padding:var(--tct-toast-padding, var(--app-scale-3x, 15px));background-color:white}@keyframes shrink{from{transform:scale(1);height:var(--toast-close-height, 0px);opacity:1}to{transform:scale(0);height:0;opacity:0}}';
   }
 }, [ 257, "q2-toast", {
   autoClose: [ 516, "auto-close" ],
@@ -234,11 +234,11 @@ const l = c, defineCustomElement = function() {
   [ "q2-toast", "q2-icon" ].forEach((t => {
     switch (t) {
      case "q2-toast":
-      customElements.get(i(t)) || customElements.define(i(t), c);
+      customElements.get(s(t)) || customElements.define(s(t), c);
       break;
 
      case "q2-icon":
-      customElements.get(i(t)) || n();
+      customElements.get(s(t)) || n();
     }
   }));
 };