q2-tecton-elements 1.10.2 → 1.10.6

package/dist/cjs/q2-tab-container.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index$1 = require('./index-6b2c271e.js');
-const index = require('./index-14348270.js');
+const index$1 = require('./index-c2e53804.js');
+const index = require('./index-f4153f5a.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}.tab-container{position:relative;display:flex;flex-direction:column}.tab-list{padding:0;display:flex;margin:0;list-style:none;border-bottom:1px solid\n        var(--tct-tab-container-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))));white-space:nowrap;overflow-x:hidden;align-items:center}.tab-list li.nav{position:absolute;height:44px;width:46px}.tab-list li.nav-left{left:-15px;background:linear-gradient(to right, var(--tct-section-bg, var(--t-section-bg, #ffffff)) 60%, rgba(255,255,255,0))}.tab-list li.nav-right{right:-15px;background:linear-gradient(to left, var(--tct-section-bg, var(--t-section-bg, #ffffff)) 60%, rgba(255,255,255,0))}.tab-list li.nav .arrow-container{display:flex;justify-content:center;align-items:center;height:inherit;width:inherit;cursor:pointer}.tab-list li.nav .arrow-container a{padding:0;margin:0;height:inherit;width:inherit;border-bottom:0;display:flex;align-items:center;justify-content:center}.tab-list li.nav .arrow-container a q2-icon{width:19px;height:19px}.tab-list a{width:var(--tct-tab-hover-width, var(--t-tab-hover-width, 100%));text-align:center;text-decoration:none;padding:var(--tct-scale-2, var(--app-scale-2, 10px));margin:var(--tct-scale-1, var(--app-scale-1, 5px)) var(--tct-scale-1, var(--app-scale-1, 5px))\n        0;color:var(--tct-tab-inactive-color, var(--t-tab-inactive, inherit));font-size:var(--tct-tab-font-size, var(--t-tab-font-size, 17px));border-bottom:3px solid transparent;display:block;transition:color var(--tct-tween-2, var(--app-tween-2, 0.4s ease)),\n        border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease))}:host([type='section']) .tab-list a{font-size:inherit;padding:var(--tct-scale-2, var(--app-scale-2, 10px))\n        var(--tct-scale-1, var(--app-scale-1, 5px))}@media screen and (max-width: 767px){.tab-list a{font-size:inherit;padding:var(--tct-scale-2, var(--app-scale-2, 10px))\n            var(--tct-scale-1, var(--app-scale-1, 5px))}}@media print{.tab-list.no-print{display:none}}.tab-list a:hover{color:var(--tct-tab-active-color, var(--t-tab-active, #2e2e2e));background-color:var(--tct-tab-hover-bg-color, var(--t-tab-hover-bg-color, inherit));width:var(--tct-tab-hover-width, var(--t-tab-hover-width, 100%))}.tab-list a[aria-selected='true']{color:var(--tct-tab-active-color, var(--t-tab-active, #2e2e2e));border-color:currentColor;width:var(--tct-tab-active-width, var(--t-tab-active-width, 100%));background-color:var(--tct-tab-active-bg-color, var(--t-tab-active-bg-color, inherit))}:host([color='alt']) .tab-list a{color:var(--tct-tab-alt-inactive-color, var(--t-tab-alt-inactive, inherit))}:host([color='alt']) .tab-list a:hover,:host([color='alt']) .tab-list a[aria-selected='true']{color:var(--tct-tab-alt-active-color, var(--t-tab-alt-active, inherit))}.tab-content{padding:var(--tct-scale-2, var(--app-scale-2, 10px)) 0}.tab-content:focus{outline:none;box-shadow:none}";
+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}button{cursor:pointer;margin:0}.tab-container{position:relative}ul{--comp-container-padding:var(--tct-scale-1, var(--app-scale-1, 5px)) var(--tct-scale-1, var(--app-scale-1, 5px)) 0;padding:var(--tct-tab-container-padding, var(--t-tab-container-padding, var(--comp-container-padding)));display:flex;gap:var(--tct-tab-gap, var(--t-tab-gap, var(--tct-scale-1, var(--app-scale-1, 5px))));list-style:none;border-bottom:1px solid var(--tct-tab-container-border-color, var(--t-tab-container-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));overflow-x:auto;align-items:center;scrollbar-width:none;scrollbar-color:transparent}ul::-webkit-scrollbar{width:0;height:0}ul::-webkit-scrollbar-thumb{background:transparent}ul::-webkit-scrollbar-track{background:transparent}@media print{ul.no-print{display:none}}li{flex:0 0 auto}li button{background:var(--tct-tab-inactive-bg-color, var(--t-tab-inactive-bg-color, transparent));border-width:var(--tct-tab-inactive-border-width, var(--t-tab-inactive-border-width, 0 0 3px 0));border-color:var(--tct-tab-inactive-border-color, var(--t-tab-inactive-border-color, transparent));border-style:var(--tct-tab-inactive-border-style, var(--t-tab-inactive-border-style, solid));border-radius:var(--tct-tab-border-radius, var(--t-tab-border-radius, 0));width:var(--tct-tab-width, var(--t-tab-width, 100%));text-align:var(--tct-tab-text-align, var(--t-tab-text-align, center));text-decoration:var(--tct-tab-text-decoration, var(--t-tab-text-decoration, none));padding:var(--tct-tab-padding, var(--t-tab-padding, var(--tct-scale-2, var(--app-scale-2, 10px))));color:var(--tct-tab-inactive-color, var(--t-tab-inactive-color, inherit));font-size:var(--tct-tab-font-size, var(--t-tab-font-size, 17px));display:block;transition:color var(--tct-tween-2, var(--app-tween-2, 0.4s ease)), border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease))}:host([type=section]) li button{--comp-tab-section-padding:var(--tct-scale-2, var(--app-scale-2, 10px)) var(--tct-scale-1, var(--app-scale-1, 5px));font-size:inherit;padding:var(--tct-tab-section-padding, var(--t-tab-section-padding, var(--comp-tab-section-padding)))}li button:hover{color:var(--tct-tab-hover-color, var(--t-tab-hover-color, var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e))));background-color:var(--tct-tab-hover-bg-color, var(--t-tab-hover-bg-color, inherit));width:var(--tct-tab-hover-width, var(--t-tab-hover-width, 100%))}li button[aria-selected=true]{color:var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e));border-color:var(--tct-tab-active-border-color, var(--t-tab-active-border-color, currentColor));border-style:var(--tct-tab-active-border-style, var(--t-tab-active-border-style, solid));width:var(--tct-tab-active-width, var(--t-tab-active-width, 100%));background-color:var(--tct-tab-active-bg-color, var(--t-tab-active-bg-color, inherit))}:host([color=alt]) li button{color:var(--tct-tab-alt-inactive-color, var(--t-tab-alt-inactive-color, inherit))}:host([color=alt]) li button:hover,:host([color=alt]) li button[aria-selected=true]{color:var(--tct-tab-alt-active-color, var(--t-tab-alt-active-color, inherit))}@media screen and (max-width: 767px){li button{--comp-tab-padding:var(--tct-scale-2, var(--app-scale-2, 10px)) var(--tct-scale-1, var(--app-scale-1, 5px));font-size:inherit;padding:var(--tct-tab-padding, var(--t-tab-padding, var(--comp-tab-padding)))}}.tab-content{--comp-tab-content-padding:var(--tct-scale-2, var(--app-scale-2, 10px)) 0;padding:var(--tct-tab-content-padding, var(--t-tab-content-padding, var(--comp-tab-content-padding)))}.tab-content:focus{outline:none;box-shadow:none}.gradient-left,.gradient-right{z-index:1;position:absolute;top:0;height:100%;width:44px}.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}";
 
 index.addSmoothScrollPolyfill();
 const userAgent = navigator.userAgent.toLowerCase();
@@ -21,6 +21,9 @@ const Q2TabContainer = class {
     this.lastScrolled = new Date(null).getTime();
     this.hasLeft = false;
     this.hasRight = false;
+    this.scrollEnabled = false;
+    this.showScrollLeft = false;
+    this.showScrollRight = false;
     ///////// Actions /////////
     this.updateTabData = () => {
       this.updateTabPaneProps();
@@ -34,131 +37,97 @@ const Q2TabContainer = class {
       });
     };
     this.setTabs = () => {
-      this.tabs = this.tabPanes.map(({ label, value }) => {
-        return {
-          label: (label && index.loc(label)) || '',
-          value
-        };
-      });
+      this.tabs = this.tabPanes.map(({ label, value }) => ({
+        label: (label && index.loc(label)) || '',
+        value
+      }));
     };
     this.onTabClick = (event) => {
+      const isAlreadySelected = this.value === event.target.dataset.value;
+      if (isAlreadySelected)
+        return;
       this.change.emit({
         value: event.target.dataset.value
       });
     };
     this.onTabKeyDown = (event) => {
       const value = event.target.dataset.value;
-      if (event.key === 'ArrowRight' || event.key === 'Right') {
-        this.moveToAdjacentTab(value, 'next');
-        return;
-      }
-      if (event.key === 'ArrowLeft' || event.key === 'Left') {
-        this.moveToAdjacentTab(value, 'prev');
-        return;
-      }
-      if (event.code === 'Space' || event.code === 'Enter') {
-        // to prevent triggering scroll when press the space key
-        event.preventDefault();
-        this.change.emit({ value });
-        return;
+      switch (event.key) {
+        case 'ArrowRight':
+          event.preventDefault();
+          this.moveToAdjacentTab(value, 'next');
+          break;
+        case 'ArrowLeft':
+          event.preventDefault();
+          this.moveToAdjacentTab(value, 'prev');
+          break;
+        case 'Home':
+          event.preventDefault();
+          this.moveToAdjacentTab(value, 'first');
+          break;
+        case 'End':
+          event.preventDefault();
+          this.moveToAdjacentTab(value, 'last');
+          break;
+        case 'Space':
+        case 'Enter':
+          event.preventDefault();
+          this.change.emit({ value });
+          break;
       }
     };
     this.moveToAdjacentTab = (value, direction) => {
       let index = this.tabs.map(({ value }) => value).indexOf(value);
-      let newIndex = direction === 'next'
-        ? Math.min(index + 1, this.tabs.length - 1)
-        : Math.max(index - 1, 0);
-      if (index !== newIndex) {
-        const focusedTab = this.moveFocus(newIndex);
-        // Scroll only if it overflows
-        if (this.tabList.scrollWidth > this.tabList.clientWidth) {
-          // Scroll only if it's first or last tab
-          if (newIndex !== 0 && newIndex !== this.tabs.length - 1) {
-            this.scrollByKeyboard(direction, focusedTab);
-          }
-          else {
-            // first or last element: just show or hide nav arrow
-            this.onTabScroll(direction);
-          }
-        }
+      let newIndex;
+      switch (direction) {
+        case 'next':
+          newIndex = Math.min(index + 1, this.tabs.length - 1);
+          break;
+        case 'prev':
+          newIndex = Math.max(index - 1, 0);
+          break;
+        case 'first':
+          newIndex = 0;
+          break;
+        case 'last':
+          newIndex = this.tabs.length - 1;
+          break;
       }
+      if (index === newIndex)
+        return;
+      this.moveFocus(newIndex, false);
     };
     this.moveFocus = (index, preventScroll = true) => {
       const focusedValue = this.tabs[index].value;
-      const focusedTab = this.hostElement.shadowRoot.querySelector(`.tab-list a[data-value="${focusedValue}"]`);
+      const focusedTab = this.listElement.querySelector(`[data-value="${focusedValue}"]`);
       focusedTab.focus({ preventScroll });
+      const left = focusedTab.offsetLeft - this.listElement.clientWidth / 2;
+      this.listElement.scrollTo({
+        left,
+        behavior: 'smooth'
+      });
       return focusedTab;
     };
-    this.calculateKeyboardScroll = (direction, focusedTab) => {
-      const { left: tabListLeft } = this.tabList.getBoundingClientRect();
-      const { left: focusedTabLeft } = focusedTab.getBoundingClientRect();
-      const arrowWidth = 46;
-      let scrollAmount = 0;
-      // check how much focused tab overflows
-      if (direction === 'next' &&
-        focusedTabLeft + focusedTab.clientWidth >
-          tabListLeft + this.tabList.clientWidth + arrowWidth) {
-        scrollAmount =
-          this.tabList.scrollLeft +
-            arrowWidth +
-            (focusedTabLeft + focusedTab.clientWidth) -
-            (tabListLeft + this.tabList.clientWidth);
-      }
-      else if (direction === 'prev' && focusedTabLeft + arrowWidth < tabListLeft) {
-        scrollAmount = this.tabList.scrollLeft - arrowWidth + (focusedTabLeft - tabListLeft);
-      }
-      return scrollAmount;
-    };
-    this.scrollByKeyboard = (direction, focusedTab) => {
-      const scrollAmount = this.calculateKeyboardScroll(direction, focusedTab);
-      if (scrollAmount !== 0) {
-        this.tabList.scroll({ left: scrollAmount, behavior: 'smooth' });
-        // wait to finish scroll then show or hide nav arrow
-        setTimeout(() => this.onTabScroll(), 100);
-      }
+    this.checkScrollState = () => {
+      const { scrollLeft, scrollWidth, clientWidth } = this.listElement;
+      this.scrollEnabled = scrollWidth > clientWidth;
+      this.showScrollLeft = !!scrollLeft;
+      this.showScrollRight = scrollWidth !== scrollLeft + clientWidth;
     };
-    this.calculateTabScroll = ({ direction, scrollWidth, clientWidth, scrollLeft }) => {
-      const directions = { prev: -1, next: 1 };
-      // step 0 means no scroll needed, re-render or resize can trigger this
-      const step = directions[direction] || 0;
-      const scrollRate = 0.5; // half of visual width
-      const delta = Math.round(clientWidth * scrollRate);
-      const newScrollLeft = scrollLeft + step * delta;
-      const scrolled = clientWidth + newScrollLeft;
-      const hasLeft = newScrollLeft > 0;
-      const hasRight = scrollWidth > scrolled;
-      return {
-        newScrollLeft,
-        hasLeft,
-        hasRight
-      };
-    };
-    this.onTabScroll = (direction) => {
-      // throttle under 50ms due to re-rendering & resizing
-      const now = new Date().getTime();
-      if (now - this.lastScrolled < 50)
-        return;
-      this.lastScrolled = now;
-      if (!this.tabList)
-        return;
-      let { scrollWidth, clientWidth, scrollLeft } = this.tabList;
-      const { newScrollLeft, hasLeft, hasRight } = this.calculateTabScroll({
-        direction,
-        scrollWidth,
-        clientWidth,
-        scrollLeft
+    this.onScrollBtnClick = (direction) => {
+      const scrollAmount = Math.floor(this.listElement.clientWidth / 2);
+      this.listElement.scrollBy({
+        left: direction === 'left' ? -scrollAmount : scrollAmount,
+        behavior: 'smooth'
       });
-      this.hasLeft = hasLeft;
-      this.hasRight = hasRight;
-      if (direction) {
-        this.tabList.scroll({ left: newScrollLeft, behavior: 'smooth' });
-      }
+    };
+    this.onSlotChange = () => {
+      this.checkScrollState();
     };
   }
   resizeIframe() {
-    return (window.TectonElements &&
-      window.TectonElements.resizeIframe &&
-      window.TectonElements.resizeIframe());
+    var _a, _b;
+    return (_b = (_a = window.TectonElements) === null || _a === void 0 ? void 0 : _a.resizeIframe) === null || _b === void 0 ? void 0 : _b.call(_a);
   }
   get tabPanes() {
     const tabPanes = this.hostElement.querySelectorAll('q2-tab-pane, tecton-tab-pane');
@@ -180,7 +149,7 @@ const Q2TabContainer = class {
     }
   }
   onResize() {
-    this.onTabScroll();
+    this.checkScrollState();
   }
   onFocus() {
     // firefox receives focus on overflowed element even if it's not interactive element
@@ -194,25 +163,26 @@ const Q2TabContainer = class {
     const observer = new MutationObserver(this.updateTabData);
     observer.observe(this.hostElement, { childList: true, attributes: true });
     this.mutationObserver = observer;
+    this.resizeObserver = new ResizeObserver(() => this.checkScrollState());
     this.updateTabData();
   }
   componentDidRender() {
     this.scheduledAfterRender.forEach(fn => fn());
     this.scheduledAfterRender = [];
     this.settled.emit();
-    this.onTabScroll();
   }
   componentDidLoad() {
+    this.resizeObserver.observe(this.listElement);
+    this.checkScrollState();
     const index = this.tabs.findIndex(el => el.value === this.value);
-    // move focus if the value is valid and not the first tab's value
-    if (index > 0) {
-      this.scheduledAfterRender.push(() => {
-        const tab = this.moveFocus(index, false);
-        tab.blur();
-      });
-    }
+    this.scheduledAfterRender.push(() => {
+      const tab = this.moveFocus(Math.max(index, 0), false);
+      this.value = tab.dataset.value;
+      tab.blur();
+    });
   }
   disconnectedCallback() {
+    this.resizeObserver.disconnect();
     this.mutationObserver.disconnect();
     this.mutationObserver = null;
   }
@@ -230,12 +200,12 @@ const Q2TabContainer = class {
   }
   ///////// View Methods /////////
   render() {
-    return (index$1.h("div", { class: "tab-container" }, index$1.h("ul", { class: `tab-list ${this.noPrint ? 'no-print' : ''}`, role: "tablist" }, this.hasLeft && (index$1.h("li", { role: "presentation", class: "nav nav-left", onClick: () => this.onTabScroll('prev') }, index$1.h("div", { class: "arrow-container" }, index$1.h("a", null, index$1.h("q2-icon", { type: "chevron-left" }))))), this.tabs.map((tab, index) => this.generateTab(tab, index)), this.hasRight && (index$1.h("li", { role: "presentation", class: "nav nav-right", onClick: () => this.onTabScroll('next') }, index$1.h("div", { class: "arrow-container" }, index$1.h("a", null, index$1.h("q2-icon", { type: "chevron-right" })))))), index$1.h("div", { class: "tab-content" }, index$1.h("slot", null))));
+    return (index$1.h(index$1.Fragment, null, index$1.h("div", { class: "tab-container" }, this.scrollEnabled && (index$1.h(index$1.Fragment, null, index$1.h("div", { class: "gradient-left", hidden: !this.showScrollLeft }), index$1.h("div", { class: "gradient-right", hidden: !this.showScrollRight }), index$1.h("q2-btn", { class: "btn-left", hidden: !this.showScrollLeft, onClick: () => this.onScrollBtnClick('left') }, index$1.h("q2-icon", { type: "chevron-left" })), index$1.h("q2-btn", { class: "btn-right", hidden: !this.showScrollRight, onClick: () => this.onScrollBtnClick('right') }, index$1.h("q2-icon", { type: "chevron-right" })))), index$1.h("ul", { onScroll: this.checkScrollState, ref: el => (this.listElement = el), class: this.noPrint ? 'no-print' : null, role: "tablist" }, this.tabs.map((tab, index) => this.generateTab(tab, index)))), index$1.h("div", { class: "tab-content" }, index$1.h("slot", { onSlotchange: () => this.onSlotChange() }))));
   }
   generateTab(tab, index) {
     const { label, value } = tab;
     const isSelected = this.selectedTabValue === value;
-    return (index$1.h("li", { role: "presentation" }, index$1.h("a", { id: `tab-${this.guid}-${index}`, href: "javascript://", "data-value": value, "test-id": "tabLink", tabIndex: isSelected ? 0 : -1, role: "tab", "aria-selected": `${isSelected}`, "aria-controls": `tab-pane-${this.guid}-${index}`, onClick: this.onTabClick, onKeyDown: this.onTabKeyDown }, label)));
+    return (index$1.h("li", { role: "presentation" }, index$1.h("button", { id: `tab-${this.guid}-${index}`, "data-value": value, "test-id": "tabLink", tabIndex: isSelected ? 0 : -1, role: "tab", "aria-selected": isSelected ? 'true' : undefined, "aria-controls": `tab-pane-${this.guid}-${index}`, onClick: this.onTabClick, onKeyDown: this.onTabKeyDown }, label)));
   }
   get hostElement() { return index$1.getElement(this); }
   static get watchers() { return {

package/dist/cjs/q2-tab-pane.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6b2c271e.js');
+const index = require('./index-c2e53804.js');
 
 const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.tab-pane[aria-hidden='true']{display:none}.tab-pane:focus{outline:none;box-shadow:none}";
 

package/dist/cjs/q2-tecton-elements.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-6b2c271e.js');
+const index = require('./index-c2e53804.js');
 
 /*
  Stencil Client Patch Browser v2.8.0 | MIT Licensed | https://stenciljs.com
@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["q2-icon.cjs",[[1,"q2-icon",{"type":[513],"label":[513]}]]],["q2-calendar.cjs",[[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"],"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"]]]]],["q2-dropdown.cjs",[[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]}]]],["q2-select.cjs",[[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,"click","clickHandler"],[0,"keydown","keydownHandler"]]]]],["q2-editable-field.cjs",[[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"]]]]],["q2-section.cjs",[[1,"q2-section",{"label":[513],"collapsible":[516],"noCollapseIcon":[516,"no-collapse-icon"],"expanded":[1540],"contentHeight":[32],"hasYieldedHeader":[32]},[[0,"change","defaultChangeHandler"]]]]],["q2-stepper.cjs",[[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"]]]]],["q2-avatar.cjs",[[1,"q2-avatar",{"name":[513],"initials":[513],"src":[513],"icon":[1],"badSrc":[32]}]]],["q2-carousel.cjs",[[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],"compactMode":[32],"autoPlayInProgress":[32],"carouselWrapperWidth":[32],"tabIndex":[32]},[[0,"change","onHostElementChange"]]]]],["q2-checkbox.cjs",[[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"]]]]],["q2-checkbox-group.cjs",[[1,"q2-checkbox-group",{"label":[513],"value":[1040],"disabled":[516],"optional":[516],"hasError":[516,"has-error"]},[[0,"change","onHostElementChange"]]]]],["q2-option.cjs",[[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.cjs",[[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"]]]]],["q2-tab-container.cjs",[[1,"q2-tab-container",{"value":[1537],"type":[513],"name":[513],"color":[513],"noPrint":[516,"no-print"],"hasLeft":[32],"hasRight":[32],"tabs":[32]},[[0,"change","defaultChangeHandler"],[9,"resize","onResize"],[0,"focus","onFocus"]]]]],["q2-textarea.cjs",[[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.cjs",[[4,"q2-carousel-pane",{"index":[2],"siblingCount":[2,"sibling-count"],"hideFromScreenReader":[516,"hide-from-screen-reader"],"isActivePane":[516,"is-active-pane"],"label":[513]}]]],["q2-loading-element.cjs",[[0,"q2-loading-element",{"shape":[513],"width":[513],"height":[513],"borderRadius":[513,"border-radius"]}]]],["q2-loc.cjs",[[1,"q2-loc",{"value":[513],"substitutions":[16]}]]],["q2-optgroup.cjs",[[1,"q2-optgroup",{"disabled":[516],"label":[513],"hidden":[32]}]]],["q2-radio.cjs",[[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"]]]]],["q2-stepper-pane.cjs",[[1,"q2-stepper-pane",{"label":[513],"description":[513],"isActive":[516,"is-active"]}]]],["q2-tab-pane.cjs",[[1,"q2-tab-pane",{"value":[513],"label":[513],"name":[513],"selected":[516],"index":[2],"guid":[2]}]]],["tecton-tab-pane.cjs",[[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.cjs",[[1,"q2-dropdown-item",{"disabled":[516],"removable":[516],"separator":[516],"label":[513],"ariaLabel":[513,"aria-label"],"value":[513]},[[0,"focus","onHostElementFocus"]]]]],["q2-message.cjs",[[1,"q2-message",{"type":[513],"appearance":[513],"description":[516]}]]],["q2-input.cjs",[[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.cjs",[[0,"click-elsewhere"]]],["q2-btn_2.cjs",[[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 index.bootstrapLazy([["q2-icon.cjs",[[1,"q2-icon",{"type":[513],"label":[513]}]]],["q2-calendar.cjs",[[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"],"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"]]]]],["q2-dropdown.cjs",[[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]}]]],["q2-select.cjs",[[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,"click","clickHandler"],[0,"keydown","keydownHandler"]]]]],["q2-editable-field.cjs",[[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"]]]]],["q2-section.cjs",[[1,"q2-section",{"label":[513],"collapsible":[516],"noCollapseIcon":[516,"no-collapse-icon"],"expanded":[1540],"contentHeight":[32],"hasYieldedHeader":[32]},[[0,"change","defaultChangeHandler"]]]]],["q2-stepper.cjs",[[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"]]]]],["q2-tab-container.cjs",[[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.cjs",[[1,"q2-avatar",{"name":[513],"initials":[513],"src":[513],"icon":[1],"badSrc":[32]}]]],["q2-carousel.cjs",[[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],"compactMode":[32],"autoPlayInProgress":[32],"carouselWrapperWidth":[32],"tabIndex":[32]},[[0,"change","onHostElementChange"]]]]],["q2-checkbox.cjs",[[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"]]]]],["q2-checkbox-group.cjs",[[1,"q2-checkbox-group",{"label":[513],"value":[1040],"disabled":[516],"optional":[516],"hasError":[516,"has-error"]},[[0,"change","onHostElementChange"]]]]],["q2-option.cjs",[[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.cjs",[[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"]]]]],["q2-textarea.cjs",[[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.cjs",[[4,"q2-carousel-pane",{"index":[2],"siblingCount":[2,"sibling-count"],"hideFromScreenReader":[516,"hide-from-screen-reader"],"isActivePane":[516,"is-active-pane"],"label":[513]}]]],["q2-loading-element.cjs",[[0,"q2-loading-element",{"shape":[513],"width":[513],"height":[513],"borderRadius":[513,"border-radius"]}]]],["q2-loc.cjs",[[1,"q2-loc",{"value":[513],"substitutions":[16]}]]],["q2-optgroup.cjs",[[1,"q2-optgroup",{"disabled":[516],"label":[513],"hidden":[32]}]]],["q2-radio.cjs",[[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"]]]]],["q2-stepper-pane.cjs",[[1,"q2-stepper-pane",{"label":[513],"description":[513],"isActive":[516,"is-active"]}]]],["q2-tab-pane.cjs",[[1,"q2-tab-pane",{"value":[513],"label":[513],"name":[513],"selected":[516],"index":[2],"guid":[2]}]]],["tecton-tab-pane.cjs",[[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.cjs",[[1,"q2-dropdown-item",{"disabled":[516],"removable":[516],"separator":[516],"label":[513],"ariaLabel":[513,"aria-label"],"value":[513]},[[0,"focus","onHostElementFocus"]]]]],["q2-message.cjs",[[1,"q2-message",{"type":[513],"appearance":[513],"description":[516],"presentToggle":[32],"present":[64]}]]],["q2-input.cjs",[[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.cjs",[[0,"click-elsewhere"]]],["q2-btn_2.cjs",[[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/cjs/q2-textarea.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6b2c271e.js');
-const index$1 = require('./index-14348270.js');
+const index = require('./index-c2e53804.js');
+const index$1 = require('./index-f4153f5a.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(\n        --tct-textarea-label-margin-bottom,\n        var(--tct-scale-1x, var(--app-scale-1x, 5px))\n    );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(\n        --tct-textarea-label-optional-margin-left,\n        var(--tct-scale-1x, var(--app-scale-1x, 5px))\n    );color:var(\n        --tct-textarea-label-optional-font-color,\n        var(--tct-a11y-color, var(--t-a11y-gray-color, #767676))\n    );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)))\n        var(--tct-textarea-horizontal-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px)));background-color:var(\n        --tct-textarea-bg,\n        var(--t-input-bg, var(--tct-gray-14, var(--app-gray-14, #f2f2f2)))\n    );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(\n        --tct-textarea-border-color,\n        var(--t-input-border, var(--tct-gray-11, var(--app-gray-11, #cccccc)))\n    );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\n            var(--tct-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))),\n        border-color var(--tct-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))),\n        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(\n        --tct-textarea-focus-border-color,\n        var(--t-input-focus, var(--tct-gray-9, var(--app-gray-9, #999999)))\n    );box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff)),\n        var(--tct-textarea-focus-box-shadow, 0 0 transparent)}textarea::placeholder{color:var(\n        --tct-textarea-placeholder-font-color,\n        var(\n            --t-input-placeholder-font-color,\n            var(--tct-gray-7, var(--app-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666))))\n        )\n    )}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(\n        --tct-textarea-icon-stroke-primary,\n        var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999)))\n    );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(\n        --tct-message-bg,\n        var(--tct-gray-14, var(--app-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))\n    );box-shadow:var(\n        --tct-textarea-message-box-shadow,\n        var(--tct-box-shadow-1, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3)))\n    );transition:height\n        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(\n        --tct-textarea-disabled-opacity,\n        var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))\n    )}textarea[disabled]{cursor:not-allowed}.has-error textarea{padding-right:var(--comp-textarea-icon-clearance)}.has-error label{color:var(\n        --tct-textarea-error-label-font-color,\n        var(--tct-textarea-label-font-color, inherit)\n    )}.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(\n        --tct-textarea-max-length-font-size,\n        var(--tct-font-size-small, var(--app-font-size-small, 12px))\n    );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}";
 

package/dist/cjs/{shapes-a7595d72.js → shapes-086c0365.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-6b2c271e.js');
+const index = require('./index-c2e53804.js');
 
 const atoms = {
   circle: ({ width, additionalClasses }) => (index.h("div", { class: `skeleton-shape circle ${additionalClasses || ''}`, style: { width, height: width } })),

package/dist/cjs/tecton-tab-pane.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6b2c271e.js');
+const index = require('./index-c2e53804.js');
 
 const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.tab-pane[aria-hidden='true']{display:none}.tab-pane:focus{outline:none;box-shadow:none}.loading-wrapper{height:44px;width:100%;align-items:center;justify-content:center}.loading-wrapper:not([hidden]){display:flex}iframe{width:100%;height:auto;overflow-y:hidden;border:none}iframe:not([hidden]){display:inline-block}.slot-wrapper:focus{outline:none;box-shadow:var(--const-global-focus)}";
 
@@ -22,6 +22,13 @@ const TectonTabPane = class {
       .slice(-2)
       .join('-');
   }
+  componentWillRender() {
+    const loadingWrapper = this.hostElement.shadowRoot.querySelector('.loading-wrapper');
+    if (loadingWrapper) {
+      loadingWrapper.style.minHeight = this.minHeight;
+      loadingWrapper.hidden = !this.selected;
+    }
+  }
   componentWillLoad() {
     this._showForm = this.showForm;
   }
@@ -34,7 +41,11 @@ const TectonTabPane = class {
   }
   ///////// Observers /////////
   selectedObserver() {
+    const loader = this.hostElement.shadowRoot.querySelector('div[slot="loading-wrapper"]');
     this._showForm = this.showForm; // reset state
+    if (loader) {
+      loader.hidden = !this.selected;
+    }
   }
   ///////// View Methods /////////
   render() {

package/dist/collection/components/q2-avatar/index.js

@@ -39,8 +39,8 @@ export class Q2Avatar {
     const showInitials = (this.name || this.initials) && (!this.src || this.badSrc);
     const showFallback = !this.name && !this.initials && (!this.src || this.badSrc);
     return (h("div", null,
-      showImg && (h("img", { class: "avatar-img", "test-id": "userImage", src: this.src, onError: this.onError })),
-      showInitials && (h("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid meet", "test-id": "userInitials", class: `avatar-initials size-${computedInitials.length}` },
+      showImg && (h("img", { class: "avatar-img", "test-id": "userImage", src: this.src, onError: this.onError, alt: this.name || '' })),
+      showInitials && (h("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid meet", "test-id": "userInitials", class: `avatar-initials size-${computedInitials.length}`, "aria-label": this.name, "aria-hidden": !this.name && 'true' },
         h("text", { x: "50", y: "50", "dominant-baseline": "central", "text-anchor": "middle", "aria-hidden": "true" }, computedInitials))),
       showFallback && (h("div", { "test-id": "fallbackIcon", class: "fallback" },
         h("q2-icon", { type: this.icon })))));

package/dist/collection/components/q2-calendar/index.js

@@ -315,8 +315,12 @@ export class Q2Calendar {
       return stringToMoment(this.typedValue);
     }
     else {
-      const { value } = this;
+      let { value } = this;
       const isMoment = value && typeof value !== 'string' && 'toDate' in value;
+      // stringified moment value assigned in html template e.g.) handlebar
+      if (!isMoment && typeof value === 'string') {
+        value = formatDateISO(value);
+      }
       return isMoment ? value : stringToMoment(value);
     }
   }