@tet/tet-components 1.3.23-testing → 1.3.24-production

package/dist/collection/components/basic/loaders/tet-spinner/tet-spinner.js

@@ -47,13 +47,13 @@ export class TetSpinner {
         this.setForeignObjectAttributes();
     }
     render() {
-        return (h("div", { key: 'c15f0c771cc10d48100c934e6385a61bc32cc66e', ref: element => (this.spinner = element), class: {
+        return (h("div", { key: '9bb54b79ea1b2fbd3e48b685cb07e51c968cddbf', ref: element => (this.spinner = element), class: {
                 spinner: true,
                 [`${this.theme}-theme`]: true,
                 [`size--${this.size}`]: true,
                 [`spinner--${this.type}`]: true,
-            } }, h("svg", { key: '699481d45c7273cd9fa93e6c173e261ad2a1627e', viewBox: "0 0 40 40" }, h("clipPath", { key: 'bcf306301fb9870daede7a441e6ee5ff73b8564a', id: "clip" }, h("path", { key: 'ebc63f0854d6d9f24cf9cde806507b2743cfdd27', d: `M40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0C31.0457
-              0 40 8.9543 40 20ZM6 20C6 27.732 12.268 34 20 34C27.732 34 34 27.732 34 20C34 12.268 27.732 6 20 6C12.268 6 6 12.268 6 20Z` })), h("foreignObject", { key: '5de22d05531dca735f47c7822c1fdddf058c63be' }, h("div", { key: '6163825ede1377cb15c1a8fb3e211cad6fb4346f', class: "spinner__gradient" })))));
+            } }, h("svg", { key: '105fa1be60b5e418388be76b2cf9e4f61861904e', viewBox: "0 0 40 40" }, h("clipPath", { key: '9c02969cad483d986d619f3f112fef1006245a61', id: "clip" }, h("path", { key: 'fdac38f4af4b7f85774917ae415d9606fed16e72', d: `M40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0C31.0457
+              0 40 8.9543 40 20ZM6 20C6 27.732 12.268 34 20 34C27.732 34 34 27.732 34 20C34 12.268 27.732 6 20 6C12.268 6 6 12.268 6 20Z` })), h("foreignObject", { key: '3fa71c563b41aac23de9dc86fcbcd3d9a9af8fbb' }, h("div", { key: 'f8d2de0ce24eaa6eaf06ca4ae21274300f8e502a', class: "spinner__gradient" })))));
     }
     static get is() { return "tet-spinner"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basic/misc/tet-label/tet-label.js

@@ -13,12 +13,12 @@ export class TetLabel {
         this.showIcon = false;
     }
     render() {
-        return (h(Host, { key: '9dd7a061500cdce531db4358bdada819ff41e4a3' }, h("div", { key: '595b5e7191f561a8fb60bb5356c5671ca270b735', class: {
+        return (h(Host, { key: '9230c8cb7852d1338151c463c8ad3ebbd50e97dd' }, h("div", { key: 'decb4bbca00963bead9f84435900ff259206c13f', class: {
                 label: true,
                 'label-active': this.active,
                 [`label-type-${this.type}`]: true,
                 [`theme-${this.theme}`]: true,
-            } }, this.labelTitle && h("p", { key: '47c9a8dedd0419733b983dd42e8f35fcf452d2cc', class: "label-title" }, this.translateTitle ? t(this.labelTitle) : this.labelTitle), this.showIcon && h("tet-icon", { key: '1b07082b7f1710b618d7fb3219ed8fe6513518c7', class: "label-icon", name: "close-circle", part: "icon-selected" }))));
+            } }, this.labelTitle && h("p", { key: '1178013b2b452fe9ec6d4ecc797007efd63d3b04', class: "label-title" }, this.translateTitle ? t(this.labelTitle) : this.labelTitle), this.showIcon && h("tet-icon", { key: '340907a244fc86c712409bcf9f3fa9b7afa21ce3', class: "label-icon", name: "close-circle", part: "icon-selected" }))));
     }
     static get is() { return "tet-label"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/inputs/tet-datepicker/partials/tet-datepicker-header/tet-datepicker-header.js

@@ -51,9 +51,9 @@ export class TetDatepickerHeader {
         this.internalDateChanged.emit(newDate);
     }
     render() {
-        return (h("div", { key: '510d9b8528a88a96725c58381b091ad4446b66b4', class: "header" }, this.datepickerView !== 'year'
+        return (h("div", { key: 'b728519049d5a6c66d0f43c8997bf4ff25202b4b', class: "header" }, this.datepickerView !== 'year'
             ? (h("div", { class: "icon-container", onClick: () => this.subtractDates() }, h("tet-icon", { class: "arrow-left", name: "arrow-left" })))
-            : h("div", null), h("div", { key: '4b4fcfe4a382d0784a32c5fdccb5d75bfe1d4241', class: "control-button", onClick: () => this.changeDatepickerView() }, this.getControlButtonDate(), h("tet-icon", { key: 'be039101f84f096e3c275ab476920d13b25cc66c', class: "chevron-down", name: this.datepickerView === 'month' ? 'chevron-down' : 'chevron-up' })), this.datepickerView !== 'year'
+            : h("div", null), h("div", { key: 'e1b999d9bed5be2eec5c7c7c083b82f4a71b8573', class: "control-button", onClick: () => this.changeDatepickerView() }, this.getControlButtonDate(), h("tet-icon", { key: '1d98c85536c4f917d11608d4f6c7aa60a10ac96f', class: "chevron-down", name: this.datepickerView === 'month' ? 'chevron-down' : 'chevron-up' })), this.datepickerView !== 'year'
             ? (h("div", { class: "icon-container", onClick: () => this.addDates() }, h("tet-icon", { class: "arrow-left", name: "arrow-right" })))
             : h("div", null)));
     }

package/dist/collection/components/simple/inputs/tet-datepicker/partials/tet-datepicker-month-view/tet-datepicker-month-view.js

@@ -156,7 +156,7 @@ export class TetDatepickerMonthView {
         return date.toDateString() === this.currentDate.toDateString();
     }
     render() {
-        return (h(Host, { key: '3927dde5b691ee8449dadb663981e24562ed80fc' }, h("div", { key: 'c6d9b19017f6df6c1f1809147401d83693f9bfcd', class: "weekday-header" }, this.days.map((day) => h("div", { class: "day" }, day))), h("div", { key: '18293704c71d83799d08f1ce6e3633da449ec1a7', class: "month-dates" }, this.previousMonthPreviewDates.map((date) => h("div", { class: "date-container" }, h("div", { class: "preview-date" }, date.getDate()))), this.monthDates.map(date => h("div", { class: this.getDateContainerClasses(date), onPointerEnter: (event) => this.setInRangeHover(date, event), onPointerLeave: (event) => this.removeInRangeHover(event) }, h("div", { class: this.getDateClasses(date), onClick: () => this.handleDateSelection(date) }, date.getDate()))), this.nextMonthPreviewDates.map((date) => h("div", { class: "date-container" }, h("div", { class: "preview-date" }, date))))));
+        return (h(Host, { key: 'd22c70e154ea1533c3e5609ef9acb7dac0422f50' }, h("div", { key: '13eb00c8c00a78e0c1ecdc43920b1dc912226d06', class: "weekday-header" }, this.days.map((day) => h("div", { class: "day" }, day))), h("div", { key: '9ad78ab1bcb98c269bfc7c4bc06cad05b005d8c5', class: "month-dates" }, this.previousMonthPreviewDates.map((date) => h("div", { class: "date-container" }, h("div", { class: "preview-date" }, date.getDate()))), this.monthDates.map(date => h("div", { class: this.getDateContainerClasses(date), onPointerEnter: (event) => this.setInRangeHover(date, event), onPointerLeave: (event) => this.removeInRangeHover(event) }, h("div", { class: this.getDateClasses(date), onClick: () => this.handleDateSelection(date) }, date.getDate()))), this.nextMonthPreviewDates.map((date) => h("div", { class: "date-container" }, h("div", { class: "preview-date" }, date))))));
     }
     static get is() { return "tet-datepicker-month-view"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/inputs/tet-datepicker/partials/tet-datepicker-multi-year-view/tet-datepicker-multi-year-view.js

@@ -29,7 +29,7 @@ export class TetDatepickerMultiYearView {
         this.years = this.getYears(this.internalDate);
     }
     render() {
-        return (h("div", { key: '2e60f4c50f18004123572c7a846bf1f50893dc48', class: "container" }, this.years.map((year) => h("div", { class: this.getYearClasses(year), onClick: () => this.handleYearSelection(year) }, year))));
+        return (h("div", { key: '768970c71b22cccb2141c409a75272f8735e7ad2', class: "container" }, this.years.map((year) => h("div", { class: this.getYearClasses(year), onClick: () => this.handleYearSelection(year) }, year))));
     }
     static get is() { return "tet-datepicker-multi-year-view"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/inputs/tet-datepicker/partials/tet-datepicker-year-view/tet-datepicker-year-view.js

@@ -34,7 +34,7 @@ export class TetDatepickerYearView {
         return this.todayDate.getMonth() === monthIndex;
     }
     render() {
-        return (h("div", { key: 'b4829f0c145e6a6ca289b25b06f5d0e1a72626ed', class: "container" }, this.months.map((month, index) => h("div", { class: "month-container" }, h("div", { class: this.getMonthClasses(index), onClick: () => this.handleMonthSelection(index) }, month)))));
+        return (h("div", { key: '915baeab946c5d9c3d41dd92146cf2533d2cf01a', class: "container" }, this.months.map((month, index) => h("div", { class: "month-container" }, h("div", { class: this.getMonthClasses(index), onClick: () => this.handleMonthSelection(index) }, month)))));
     }
     static get is() { return "tet-datepicker-year-view"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/inputs/tet-datepicker/tet-datepicker.js

@@ -94,10 +94,10 @@ export class TetDatepicker {
         this.rangeDatesChanged.emit(newDates);
     }
     render() {
-        return (h("div", { key: 'a812f22d1b55ec8587c62a88696192be1aeb497c', class: this.getOverlayClasses(), onClick: this.handleDatepickerClose }, h("div", { key: 'a5abfd90650e4df8c0ff0bf9a6547a98d2f504ad', class: "container", ref: (el) => this.datepickerContainer = el }, h("tet-datepicker-header", { key: '8ca8d7faf3b0a0ba6d2241670294185795b8096b', selectedDate: this.date, internalDate: this.internalDate, locale: this.locale, datepickerView: this.datepickerView }), this.datepickerView === 'month' &&
-            h("tet-datepicker-month-view", { key: 'f5b090675c4515e5775769c8dc379a8c25c26afd', selectedDate: this.date, internalDate: this.internalDate, rangePickerMode: this.rangePickerMode, rangeDates: this.rangeDates }), this.datepickerView === 'multi-year' &&
-            h("tet-datepicker-multi-year-view", { key: '8a1151f3a1f6c3182a08d7703d9c5e565ebcec78', selectedDate: this.date, internalDate: this.internalDate }), this.datepickerView === 'year' &&
-            h("tet-datepicker-year-view", { key: '54e2a20d2cb5f295a5bc7a621e428eaa17ef0bea', selectedDate: this.date, internalDate: this.internalDate }))));
+        return (h("div", { key: 'cf214d36e68a59d50a57f0b324ddd77480f28ae5', class: this.getOverlayClasses(), onClick: this.handleDatepickerClose }, h("div", { key: '6131eccac4608725d9177da82337bc4cbc4ee835', class: "container", ref: (el) => this.datepickerContainer = el }, h("tet-datepicker-header", { key: '121e1c38b34ede7e6f0f88aa5ee6df96b634b5f9', selectedDate: this.date, internalDate: this.internalDate, locale: this.locale, datepickerView: this.datepickerView }), this.datepickerView === 'month' &&
+            h("tet-datepicker-month-view", { key: 'c1f5a49dd3762f93ed4e9ac0099ca1756e813560', selectedDate: this.date, internalDate: this.internalDate, rangePickerMode: this.rangePickerMode, rangeDates: this.rangeDates }), this.datepickerView === 'multi-year' &&
+            h("tet-datepicker-multi-year-view", { key: '268736bee10084216fe1fdfa8558028a5a8f4e26', selectedDate: this.date, internalDate: this.internalDate }), this.datepickerView === 'year' &&
+            h("tet-datepicker-year-view", { key: '92201bd1de3471c5ce3f0bc9bf2a2be894131296', selectedDate: this.date, internalDate: this.internalDate }))));
     }
     static get is() { return "tet-datepicker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/inputs/tet-expandable-input/tet-expandable-input.css

@@ -399,6 +399,7 @@
   --expandable-input-container-height: 2.75rem;
   --expandable-input-container-close-padding: 0.75rem;
   --expandable-input-close-button-text-color: rgb(10, 11, 13);
+  --expandable-input-close-button-outline-color: var(--tc-blue-40);
 }
 
 :host(.small) {
@@ -441,14 +442,25 @@
 }
 .container .input-close.dark, .container .input-close.mint {
   --expandable-input-close-button-text-color: rgb(255, 255, 255);
+  --expandable-input-close-button-outline-color: var(--tc-blue-40-dark);
 }
 .container .input-close.hide {
   display: none;
 }
+.container .input-close:focus-visible {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline-offset: 0.125rem;
+  transition: outline 0s;
+  outline-color: var(--expandable-input-close-button-outline-color);
+  border-radius: 0.125rem;
+}
 .container.mobile .input.with-icon--left.sc-tet-input {
   padding-left: 0.5rem;
   color: transparent;
 }
+.container.mobile .expandable input.keyboard-focus:focus, .container.mobile .expandable input.keyboard-focus:focus-within {
+  border-color: var(--input-border-disabled);
+}
 .container.mobile .icon {
   transition: opacity 300ms;
 }
@@ -538,6 +550,9 @@
 .container.dark.mobile .tet-input__base.sc-tet-input {
   --input-border-color: transparent;
 }
+.container.dark.mobile .tet-input__base.sc-tet-input.keyboard-focus:focus, .container.dark.mobile .tet-input__base.sc-tet-input.keyboard-focus:focus-within {
+  border-color: var(--input-border-disabled);
+}
 .container.dark.desktop .tet-input {
   --input-border-color: rgb(88, 99, 116);
 }
@@ -568,13 +583,4 @@ tet-input.tet-input {
   --input-border-disabled: var(--expandable-input-border-disabled);
   --input-disabled-background-color: var(--expandable-input-disabled-background-color);
   --input-disabled-icon-color: var(--expandable-input-border-disabled);
-}
-
-.tet-input__base.keyboard-focus.sc-tet-input:focus {
-  outline-offset: 0rem;
-  border: 0.125 solid var(--input-focus-border-color);
-}
-
-.tet-input__base.sc-tet-input {
-  border: 0.0625rem solid var(--input-focus-border-color);
 }

package/dist/collection/components/simple/inputs/tet-expandable-input/tet-expandable-input.js

@@ -21,7 +21,6 @@ export class TetExpandableInput {
             this.host.addEventListener('focus', () => {
                 this.setState(true);
             });
-            this.host.tabIndex = 0;
             const minWidth = getConvertedPixels(getComputedStyle(this.host).getPropertyValue('--expandable-input-container-min-width'));
             this.mobileClosedSize = Math.max(this.inputHtmlElement.offsetHeight, minWidth);
             const minHeight = getConvertedPixels(getComputedStyle(this.host).getPropertyValue('--expandable-input-container-height'));
@@ -139,13 +138,19 @@ export class TetExpandableInput {
      * The method to handle input close element states.
      */
     inputCloseHandler() {
-        var _a, _b;
+        var _a, _b, _c;
         (_a = this.closeInputHtmlElement) === null || _a === void 0 ? void 0 : _a.classList.remove('hide');
         (_b = this.closeInputHtmlElement) === null || _b === void 0 ? void 0 : _b.addEventListener('click', () => {
             var _a;
             this.host.blur();
             (_a = this.closeInputHtmlElement) === null || _a === void 0 ? void 0 : _a.classList.add('hide');
         });
+        (_c = this.closeInputHtmlElement) === null || _c === void 0 ? void 0 : _c.addEventListener('keydown', (e) => {
+            var _a;
+            if (['Enter', ' '].includes(e.key)) {
+                (_a = this.closeInputHtmlElement) === null || _a === void 0 ? void 0 : _a.classList.add('hide');
+            }
+        });
     }
     /**
      * Expands the input to the width of the host element's width
@@ -220,17 +225,17 @@ export class TetExpandableInput {
                     'input-close': true,
                     'hide': true,
                     [this.theme]: true,
-                }, ref: (closeInputElement) => (this.closeInputHtmlElement = closeInputElement) }, this.closeInputText));
+                }, ref: (closeInputElement) => (this.closeInputHtmlElement = closeInputElement), tabindex: 0 }, this.closeInputText));
         }
         return '';
     }
     render() {
-        return (h(Host, { key: '966f0c513c9af74accb2c9ac05106ea2fb9b2ec2', class: { small: this.size === 'small' } }, h("div", { key: '3181be4bba55614b2d538469f2d4d7c7a7bfdfd9', class: {
+        return (h(Host, { key: '606e74b43f6f0784da854bcc916753463607717a', class: { small: this.size === 'small' } }, h("div", { key: 'f99fb88a8be40b50ddaafb71c2a34f9b88a0f2c8', class: {
                 container: true,
                 expanded: this.expanded,
                 [this.mode]: true,
                 dark: this.darkMode
-            } }, h("div", { key: 'a50105b3fc8d3b34fe3b9fa13b0afc46b639ff10', class: "input-wrapper", ref: (element) => (this.inputWrapper = element) }, h("tet-input", { key: '8cb1ec1d74fc7b87062b988ce63b8794e887182e', class: "tet-input", label: this.label, "input-class": this.class, "input-placeholder": this.renderInputContent ? this.placeholder : '', "accessibility-label": this.accessibilityLabel, "input-type": this.type, "input-value": this.value, "input-disabled": this.disabled, error: this.error, "icon-left": this.iconLeft, "icon-right": this.renderInputContent ? this.iconRight : '', iconRightClickCallback: this.iconRightClickCallback, theme: this.theme, ref: (inputElement) => (this.inputHtmlElement = inputElement) }), this.closeButton))));
+            }, tabIndex: -1 }, h("div", { key: '12c8c996e1acc053e138ea56107b90351b106906', class: "input-wrapper", ref: (element) => (this.inputWrapper = element), tabIndex: -1 }, h("tet-input", { key: '2d91f266517a28ad064b901a9431697f91fa2760', class: "tet-input expandable", label: this.label, "input-class": this.class, "input-placeholder": this.renderInputContent ? this.placeholder : '', "accessibility-label": this.accessibilityLabel, "input-type": this.type, "input-value": this.value, "input-disabled": this.disabled, error: this.error, "icon-left": this.iconLeft, "icon-right": this.renderInputContent ? this.iconRight : '', iconRightClickCallback: this.iconRightClickCallback, theme: this.theme, ref: (inputElement) => (this.inputHtmlElement = inputElement) }), this.closeButton))));
     }
     static get is() { return "tet-expandable-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/inputs/tet-input/test/tet-input.spec.js

@@ -34,8 +34,8 @@ describe('tet-input', () => {
               type="text"
               value=""
             />
-            <tet-icon class="icon icon-left" name="search" tabindex="-1"></tet-icon>
-            <tet-icon class="icon icon-right" name="close-circle" tabindex="-1"></tet-icon>
+            <tet-icon accessibilitylabel=""  class="icon icon-left" name="search"></tet-icon>
+            <tet-icon accessibilitylabel=""  class="icon icon-right" name="close-circle"></tet-icon>
           </div>
         </label>
       </tet-input>

package/dist/collection/components/simple/inputs/tet-input/tet-input.js

@@ -2,7 +2,6 @@ import { Host, h } from "@stencil/core";
 import { validate } from "../../../../services/validators/index";
 import { t } from "../../../../services/translations/index";
 import { a11yBtnClick } from "../../../../services/utils/a11y";
-import { IconName } from "../../../../types/enums";
 /**
  * The input enables the user to interact with and input content and data.
  * It supports left and right icons with click actions and error state.
@@ -32,7 +31,7 @@ export class TetInput {
                 'icon-right': alignment === 'right',
                 'clickable': clickable
             };
-            return h("tet-icon", { name: iconName, class: classes, onClick: callback, tabIndex: iconName === IconName.Close ? 0 : -1, onKeyDown: a11yBtnClick });
+            return h("tet-icon", { name: iconName, class: classes, onClick: callback, accessibilityLabel: clickable ? 'Area label' : '', onKeyDown: a11yBtnClick });
         };
         this.renderErrorMessages = () => {
             return (h("div", { class: "errors" }, this.errorMessages.map((message) => h("p", { class: "tet-input__error-message" }, t(message)))));

package/dist/collection/components/simple/inputs/tet-number-input/tet-number-input.css

@@ -123,6 +123,7 @@
   --number-input-text-secondary-color: var(--tc-text-secondary);
   --number-input-dropdown-active: var(--tc-layer-tertiary);
   --number-input-max-width: 21.625rem;
+  --number-input-focus-outline-color: var(--tc-blue-40);
   --number-input-disabled: var(--tc-background-secondary);
   --number-input-disabled-text: var(--tc-text-tertiary);
   --number-input-dropdown-border: var(--tc-border-tertiary);
@@ -145,6 +146,7 @@
   --number-input-disabled: var(--tc-background-secondary-dark);
   --number-input-disabled-text: var(--tc-text-tertiary-dark);
   --number-input-dropdown-border: var(--tc-border-tertiary-dark);
+  --number-input-focus-outline-color: var(--tc-blue-40-dark);
 }
 .number-input__label {
   margin-bottom: 0.25rem;
@@ -188,19 +190,20 @@
   background-color: var(--number-input-background-color);
   border-radius: var(--number-input-border-radius);
 }
-.number-input__input-container:focus-within:not(.dropdown-open) {
-  outline: 2px solid var(--tc-blue-50-dark);
-  outline-offset: 2px;
-}
-.number-input__input-container .dropdown-open .number-input__input:focus {
-  outline: none !important;
-}
-.number-input__input-container:active {
+.number-input__input-container:active, .number-input__input-container:focus-within {
   outline: none;
   border: 0.063rem solid var(--number-input-border-color-active);
 }
+.number-input__input-container.focus-visible {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline-offset: 0.125rem;
+  transition: outline 0s;
+  outline-color: var(--number-input-focus-outline-color);
+  border-color: var(--number-input-border-color-active);
+}
 .number-input__input--hidden {
-  display: none;
+  opacity: 0;
+  position: absolute;
 }
 .number-input__helper-text {
   margin-top: 0.25rem;
@@ -220,6 +223,9 @@
   --button-border: none;
   --button-padding-small: 0.5rem;
 }
+.number-input__cheveron:focus, .number-input__cheveron:focus-visible {
+  --button-box-shadow: none;
+}
 .number-input__dropdown {
   border: 0.0625rem solid var(--number-input-dropdown-border);
   position: absolute;
@@ -231,6 +237,9 @@
   z-index: 1;
   color: var(--number-input-text-color);
 }
+.number-input__dropdown:focus-within {
+  outline: none;
+}
 .number-input__dropdown-item {
   display: flex;
   align-items: center;
@@ -240,9 +249,12 @@
 .number-input__dropdown-item.active {
   background-color: var(--number-input-dropdown-active);
 }
-.number-input__dropdown-item.focus {
-  outline: 2px solid var(--tc-blue-50-dark);
-  outline-offset: 2px;
+.number-input__dropdown-item:focus-visible {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline-offset: 0rem;
+  transition: outline 0s;
+  border-radius: 0.125rem;
+  outline-color: var(--number-input-focus-outline-color);
 }
 .number-input__dropdown-item:hover {
   background-color: var(--number-input-dropdown-active);

package/dist/collection/components/simple/inputs/tet-number-input/tet-number-input.js

@@ -28,6 +28,7 @@ export class TetInput {
          */
         this.onChevronClick = () => {
             this.isOpen = !this.isOpen;
+            this.onDropdownOpenChanged();
         };
         /**
          * Closes dropdown
@@ -54,7 +55,7 @@ export class TetInput {
         this.handleContainerKeydown = (e) => {
             if (e.key === "Enter" || e.key === " ") {
                 e.preventDefault();
-                this.isOpen = !this.isOpen;
+                this.onChevronClick();
             }
         };
         this.label = undefined;
@@ -73,6 +74,7 @@ export class TetInput {
         this.suffix = undefined;
         this.isOpen = undefined;
         this.isValueHidden = false;
+        this.isKeyboardFocus = false;
     }
     /**
      * Expose method to access value
@@ -113,6 +115,9 @@ export class TetInput {
         if (['-', '+', '.'].includes(event.key)) {
             event.preventDefault();
         }
+        if (event.key === 'Tab') {
+            this.isKeyboardFocus = true;
+        }
     }
     /**
      * Listens for focus to select value
@@ -134,6 +139,8 @@ export class TetInput {
      * @param event mouse event
      */
     onClick(event) {
+        this.isKeyboardFocus = false;
+        this.inputWrapperElement.classList.remove('focus-visible');
         const path = event.composedPath();
         if (!path.includes(this.dropdownElement) && !path.includes(this.chevronElement)) {
             this.closeDropdown();
@@ -156,6 +163,7 @@ export class TetInput {
         }
         this.inputElement.value = this.value.toString();
         this.inputValueChanged.emit({ value: this.value, suffix: this.suffix });
+        this.inputWrapperElement.classList.remove('focus-visible');
     }
     /**
      * handle input logic
@@ -186,7 +194,6 @@ export class TetInput {
             const { key, target } = event;
             switch (key) {
                 case ' ':
-                case 'SpaceBar':
                 case 'Enter':
                     event.preventDefault();
                     selectCallback();
@@ -201,13 +208,19 @@ export class TetInput {
                     break;
                 case 'Escape':
                     this.isOpen = false;
-                    this.dropdownElement.focus();
+                    this.inputWrapperElement.classList.add('focus-visible');
                     break;
                 default:
                     break;
             }
         };
     }
+    toggleKeyboardFocus(focus) {
+        if (!this.isKeyboardFocus) {
+            return;
+        }
+        return focus ? this.inputWrapperElement.classList.add('focus-visible') : this.inputWrapperElement.classList.remove('focus-visible');
+    }
     /**
      *
      * @param _suffix selected suffix option
@@ -215,13 +228,15 @@ export class TetInput {
     onDropdownItemClick(_suffix) {
         this.suffix = _suffix;
         this.inputValueChanged.emit({ value: this.value, suffix: this.suffix });
-        this.onChevronClick();
+        if (!this.isKeyboardFocus) {
+            this.closeDropdown();
+        }
     }
     /**
      * Move focus from input element to dropdown
      */
-    onDropdownOpenChanged(isDropdownOpen) {
-        if (isDropdownOpen && this.suffixes) {
+    onDropdownOpenChanged() {
+        if (this.isOpen && this.suffixes) {
             setTimeout(() => {
                 const activeSuffixIndex = this.suffixes.findIndex(suffixOption => suffixOption === this.suffix);
                 const indexToFocus = activeSuffixIndex !== -1 ? activeSuffixIndex : 0;
@@ -236,8 +251,8 @@ export class TetInput {
      */
     render() {
         const { label, helperText, value, disabled, error, completed, isOpen, suffix } = this;
-        return (h("div", { key: 'ad2189f28458f296fd76390eb07996637f0f99d7', class: { 'number-input': true, [this.theme]: !!this.theme,
-                'disabled': disabled, 'error': error, 'completed': completed } }, !!label && (h("label", { key: '146fc7c71058fa0c1f81ed56081f49b054faff61', class: "number-input__label", htmlFor: "number-input" }, label)), h("div", { key: 'f7f5b78ebd0b02fbad5cdc0c285c656d9b03354b', class: { 'number-input__input-container': true, 'dropdown-open': this.isOpen }, onKeyDown: this.handleContainerKeydown }, h("input", Object.assign({ key: '4058bb72542f82be4ec7c692642e2066af44e3e5', ref: (htmlInputElement) => (this.inputElement = htmlInputElement), class: { 'number-input__input': true, 'number-input__input--hidden': this.isValueHidden }, disabled: disabled, value: value, type: "number", id: "number-input" }, (this.accessibilityLabel ? { "aria-label": this.accessibilityLabel } : {}))), h("div", { key: '5a51da6e82e6bb430242f3fb1d630a764b6b1077', ref: (htmlInputElement) => (this.inputElementHidden = htmlInputElement), class: "number-input__input-invisible" }, value), !!suffix && h("div", { key: '2100c7f19934b51a7a46e53139e127c0f935e177', class: "number-input__input-suffix" }, suffix.name), !!this.suffixes && this.suffixes.length > 1 && (h("tet-button", { key: '690e1ebf1a885532fedacad732f376db57e334fb', type: "ghost", size: "small", ref: (element) => (this.chevronElement = element), class: { 'number-input__cheveron': true }, onClick: this.onChevronClick, "accessibility-label": this.buttonAccessibilityLabel, tabindex: "-1" }, !isOpen && h("tet-icon", { key: '600304642780a9fe20e28a6974179ff45842fe09', name: "chevron-down" }), isOpen && h("tet-icon", { key: '30fd2bc3ba018a178e179dec02aa6cd7812248e6', name: "chevron-up" }))), isOpen && (h("div", { key: 'cf7913cf9b324911c24f2069083a7e2e71dcc95b', class: "number-input__dropdown", ref: (htmlDivElement) => (this.dropdownElement = htmlDivElement) }, this.renderDropdownContent()))), !!helperText && h("div", { key: '77a8561e514764964b4d1599e328fa1b38286e19', class: "number-input__helper-text" }, helperText)));
+        return (h("div", { key: 'f42326284d1402bcd30f89475ffceeb1dd87dd64', class: { 'number-input': true, [this.theme]: !!this.theme,
+                'disabled': disabled, 'error': error, 'completed': completed } }, !!label && (h("label", { key: 'bd65040341d94f32e51e27ecc4cb2e31ca5404ac', class: "number-input__label", htmlFor: "number-input" }, label)), h("div", { key: '489371376c69acc1a58de2ef648e9442c67e2102', class: "number-input__input-container", onKeyDown: this.handleContainerKeydown, ref: (divElement) => (this.inputWrapperElement = divElement) }, h("input", Object.assign({ key: '4e60876405aecd6a49780f0aa59927be897b9d47', onFocusin: () => this.toggleKeyboardFocus(true), onFocusout: () => this.toggleKeyboardFocus(false), ref: (htmlInputElement) => (this.inputElement = htmlInputElement), class: { 'number-input__input': true, 'number-input__input--hidden': this.isValueHidden }, disabled: disabled, value: value, type: "number", id: "number-input" }, (this.accessibilityLabel ? { "aria-label": this.accessibilityLabel } : {}))), h("div", { key: '753a6a04acd02316df678e1400cf7ed3230a6db7', ref: (htmlInputElement) => (this.inputElementHidden = htmlInputElement), class: "number-input__input-invisible" }, value), !!suffix && h("div", { key: 'c7e7a471f7e43215ce7d379d2c0acd6438c29409', class: "number-input__input-suffix" }, suffix.name), !!this.suffixes && this.suffixes.length > 1 && (h("tet-button", { key: '4b7abaaa0b100a2eb61e3483067853859427c8d0', type: "ghost", size: "small", ref: (element) => (this.chevronElement = element), class: { 'number-input__cheveron': true }, onClick: this.onChevronClick, "accessibility-label": this.buttonAccessibilityLabel, tabindex: "-1" }, !isOpen && h("tet-icon", { key: 'a0ec85317e9adf73a062a33735b171c394093518', name: "chevron-down" }), isOpen && h("tet-icon", { key: 'bd5066a3599356a91d90aa88377f204293c491ab', name: "chevron-up" }))), isOpen && (h("div", { key: 'e1c8fef8079d26d109462396bf6a883c2336dab1', class: "number-input__dropdown", ref: (htmlDivElement) => (this.dropdownElement = htmlDivElement) }, this.renderDropdownContent()))), !!helperText && h("div", { key: 'efe5c0acfd2bf9dcdafbf8c38e826e1f18a33a98', class: "number-input__helper-text" }, helperText)));
     }
     static get is() { return "tet-number-input"; }
     static get encapsulation() { return "shadow"; }
@@ -487,7 +502,8 @@ export class TetInput {
         return {
             "suffix": {},
             "isOpen": {},
-            "isValueHidden": {}
+            "isValueHidden": {},
+            "isKeyboardFocus": {}
         };
     }
     static get events() {
@@ -553,16 +569,13 @@ export class TetInput {
         return [{
                 "propName": "suffix",
                 "methodName": "onSuffixChange"
-            }, {
-                "propName": "isOpen",
-                "methodName": "onDropdownOpenChanged"
             }];
     }
     static get listeners() {
         return [{
                 "name": "keydown",
                 "method": "onKeydown",
-                "target": undefined,
+                "target": "window",
                 "capture": false,
                 "passive": false
             }, {

package/dist/collection/components/simple/inputs/tet-range-slider/tet-range-slider.js

@@ -709,31 +709,31 @@ export class TetRangeSlider {
         this.updateProgress();
     }
     render() {
-        return (h(Host, { key: '115d4713858a8191f69d4f882f5552ac86c09f24' }, h("div", { key: 'fcc88a9260be64f061322ac8e772468f7c74b41a', class: {
+        return (h(Host, { key: '2db73913f52ba76bd87f2ac665ccfda6dc2911e1' }, h("div", { key: '8bec1ead48c4d8b6da2f9b1338fd0f0f4a7da530', class: {
                 'range-slider': true,
                 [`range-slider--${this.containerSize}`]: true,
                 [`range-slider--${this.type}`]: true,
                 'range-slider--no-controls': !this.withControls,
                 'range-slider--no-input': !this.withInput,
                 [this.theme]: true,
-            } }, h("div", { key: 'c2fd331680eb082efb21b0b13ba08dd13d5c6d56', class: {
+            } }, h("div", { key: 'aec9141a1dfc3a37aac2ca1ce7fecf4974c5ca30', class: {
                 'range-slider__input-container': true,
                 'hidden': !this.withInput,
-            } }, h("tet-input", Object.assign({ key: 'ff2770350df49f5d59d899a6c24ac4e94c226786', "input-class": "range-slider__input", "input-type": "number", "input-value": this.currentValue, ref: inputEl => (this.inputRef = inputEl), theme: this.theme, onInput: this.onInputChange, onKeyDown: (event) => this.onInputKeyDown(event, true), accessibilityLabel: this.numberInputAccessibilityLabel }, (this.containerSize !== 'large' ? { inputTabindex: 3 } : {})))), h("div", { key: 'd0bd143f2b13f5d4b5ff99c5bacb949cbfafe198', class: "range-slider__container" }, h("tet-button", Object.assign({ key: '5ee5f75f8217ef9333dca32e23661463ee153e9b', theme: this.theme, iconMode: true, class: {
+            } }, h("tet-input", Object.assign({ key: 'f7cb6e04cc9f844665977c6e02f823ed8bea99bb', "input-class": "range-slider__input", "input-type": "number", "input-value": this.currentValue, ref: inputEl => (this.inputRef = inputEl), theme: this.theme, onInput: this.onInputChange, onKeyDown: (event) => this.onInputKeyDown(event, true), accessibilityLabel: this.numberInputAccessibilityLabel }, (this.containerSize !== 'large' ? { inputTabindex: 3 } : {})))), h("div", { key: '8328acae770c4da8de958bc582ed50353ce2f863', class: "range-slider__container" }, h("tet-button", Object.assign({ key: '9769e188cb435d3da242b4e4073fae0328446f9b', theme: this.theme, iconMode: true, class: {
                 'range-slider__control': true,
                 'range-slider__control--left': true,
                 'hidden': !this.withControls,
-            }, clickCallback: this.onControlPreviousClick }, (this.reduceButtonAccessibilityLabel ? { accessibilityLabel: this.reduceButtonAccessibilityLabel } : {}), (this.containerSize !== 'large' ? { tabindex: 2 } : {})), h("tet-icon", { key: 'd59cfe259d75bd1b54ea89fbe1a9d305d3a7f749', name: "remove", class: "range-slider__control--icon" })), h("div", { key: '00f15791b4020054f5c7aafe314f663f99890222', onTouchStart: this.onContainerTouchStart, onTouchEnd: this.onContainerTouchEnd, onMouseDown: this.onContainerMouseDown, onScroll: this.onContainerScroll, ref: sliderContainerEl => (this.sliderContainerRef = sliderContainerEl), class: "range-slider__slider-container", draggable: false }, h("div", { key: '0e9902eb81457a5d883c3421b74626b70a588fab', class: "range-slider__slider-wrapper" }, h("input", Object.assign({ key: '78199421e238dd269339197f8dba4564f714f15c', ref: sliderEl => (this.sliderRef = sliderEl), type: "range", min: this.minValue, max: this.maxValue, step: this.step, value: this.defaultValue, list: "steplist", id: "rangeInput", onInput: this.onSliderInput, onChange: this.onSliderChange, onPointerDown: this.onSliderPointerDown, onPointerUp: this.onSliderPointerUp, onKeyDown: this.onInputKeyDown, class: "range-slider__slider" }, (this.sliderInputAccessibilityLabel ? { "aria-label": this.sliderInputAccessibilityLabel } : {}), (this.containerSize !== 'large' ? { tabindex: 1 } : {})))), h("div", { key: 'cdf060a71ff344e62d0781f07635aaa6a59bdff8', class: "range-slider__track range-slider__track--background" }), h("div", { key: '72afb6402fe9c8061ddf38e348b57c256a106628', ref: progressTrackEl => (this.progressTrackRef = progressTrackEl), class: "range-slider__track range-slider__track--progress" }), h("div", { key: 'dd497578a9c8106f72ad3c3e26512877fc1b0d38', ref: tickContainerEl => (this.tickContainerRef = tickContainerEl), class: "range-slider__tick-container" }), h("div", { key: 'cb6a5776d27eacec014ff8da82790d9253382fab', ref: dataLabelEl => (this.dataLabelRef = dataLabelEl), class: {
+            }, clickCallback: this.onControlPreviousClick }, (this.reduceButtonAccessibilityLabel ? { accessibilityLabel: this.reduceButtonAccessibilityLabel } : {}), (this.containerSize !== 'large' ? { tabindex: 2 } : {})), h("tet-icon", { key: '16bf9e11672e7f992be25f11010dc5fc7fba3f22', name: "remove", class: "range-slider__control--icon" })), h("div", { key: '09bf909c83ba93e53b97cbad6e98f9156423f716', onTouchStart: this.onContainerTouchStart, onTouchEnd: this.onContainerTouchEnd, onMouseDown: this.onContainerMouseDown, onScroll: this.onContainerScroll, ref: sliderContainerEl => (this.sliderContainerRef = sliderContainerEl), class: "range-slider__slider-container", draggable: false }, h("div", { key: '5d49d65971fbc14c6c0eb58f47f6377ffd80d37e', class: "range-slider__slider-wrapper" }, h("input", Object.assign({ key: 'a080933d8d33e7b0ea6a630949a7fbe08f4acb16', ref: sliderEl => (this.sliderRef = sliderEl), type: "range", min: this.minValue, max: this.maxValue, step: this.step, value: this.defaultValue, list: "steplist", id: "rangeInput", onInput: this.onSliderInput, onChange: this.onSliderChange, onPointerDown: this.onSliderPointerDown, onPointerUp: this.onSliderPointerUp, onKeyDown: this.onInputKeyDown, class: "range-slider__slider" }, (this.sliderInputAccessibilityLabel ? { "aria-label": this.sliderInputAccessibilityLabel } : {}), (this.containerSize !== 'large' ? { tabindex: 1 } : {})))), h("div", { key: '66464e25e1fe088cf25d7a33fef7682a3d9b0e58', class: "range-slider__track range-slider__track--background" }), h("div", { key: '28b7a552c1217eef93745c2e7e13872c535923d7', ref: progressTrackEl => (this.progressTrackRef = progressTrackEl), class: "range-slider__track range-slider__track--progress" }), h("div", { key: '56bd95b822ab63adc00e594026f783cf52061a7c', ref: tickContainerEl => (this.tickContainerRef = tickContainerEl), class: "range-slider__tick-container" }), h("div", { key: 'c3b12e065b5f4d4ab43f171e8f0b40b8d8ae712d', ref: dataLabelEl => (this.dataLabelRef = dataLabelEl), class: {
                 'range-slider__data-label-container': true,
                 'hidden': this.type === 'secondary' && this.containerSize === 'small',
-            } })), h("div", { key: '18b58ea0cd36892dc7d16073737ae5cee5789d62', class: {
+            } })), h("div", { key: '62d88bc89a31c7674709a8a39d546b38cd234279', class: {
                 'range-slider__current-step-container': true,
                 'hidden': !this.withCurrentStepCounter,
-            } }, h("div", { key: 'ead4b7f71a5f46c662f676265f358482a4f3a215', class: "range-slider__current-step", "aria-live": "polite" }, this.dataSet.indexOf(this.getClosestOverrideDataPoint()) + 1, "/", this.dataPoints.length)), h("div", { key: '50771fffde88c3b3e22ad6b843242a19cc2b8fb5', ref: toolbarHandleEl => (this.tooltipHandleRef = toolbarHandleEl), class: "range-slider__tooltip-handle" }, h("div", { key: '49005a474025ad29f4336c51d0daea29ba5e241a', class: "range-slider__tooltip translation-none", style: { [`--tooltip-offset`]: `${this.tooltipOffset}rem` }, "aria-live": "polite" }, this.getTooltipValue())), h("tet-button", Object.assign({ key: 'bb225028fa126c0c17eb02a88362871caf8dc91f', theme: this.theme, iconMode: true, class: {
+            } }, h("div", { key: '375f6c36aa496598446873d37aec9a892c52253d', class: "range-slider__current-step", "aria-live": "polite" }, this.dataSet.indexOf(this.getClosestOverrideDataPoint()) + 1, "/", this.dataPoints.length)), h("div", { key: '64a7c2f3ad997f4279692f8571a5fc77c1cfaa93', ref: toolbarHandleEl => (this.tooltipHandleRef = toolbarHandleEl), class: "range-slider__tooltip-handle" }, h("div", { key: '825e7075a2426b25958b4533d1d119c2e70276ae', class: "range-slider__tooltip translation-none", style: { [`--tooltip-offset`]: `${this.tooltipOffset}rem` }, "aria-live": "polite" }, this.getTooltipValue())), h("tet-button", Object.assign({ key: '60469766ad4efdeeee7dafa6349279aec3116ecc', theme: this.theme, iconMode: true, class: {
                 'range-slider__control': true,
                 'range-slider__control--right': true,
                 'hidden': !this.withControls,
-            }, clickCallback: this.onControlNextClick }, (this.addButtonAccessibilityLabel ? { accessibilityLabel: this.addButtonAccessibilityLabel } : {}), (this.containerSize !== 'large' ? { tabindex: 4 } : {})), h("tet-icon", { key: '7fc5eb1bf43ac76716f06c86824a6c849b3294aa', name: "add", class: "range-slider__control--icon" }))))));
+            }, clickCallback: this.onControlNextClick }, (this.addButtonAccessibilityLabel ? { accessibilityLabel: this.addButtonAccessibilityLabel } : {}), (this.containerSize !== 'large' ? { tabindex: 4 } : {})), h("tet-icon", { key: 'ef0cdac835d930b0c20f94f0830ab0feb968181d', name: "add", class: "range-slider__control--icon" }))))));
     }
     static get is() { return "tet-range-slider"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/inputs/tet-stepper-input/tet-stepper-input.css

@@ -117,6 +117,7 @@
   --stepper-button-bg: var(--tc-button-text-primary);
   --stepper-button-border: var(--tc-button-text-secondary);
   --stepper-value-color: var(--tc-button-text-inverse-disabled);
+  --stepper-input-focus-outline-color: var(--tc-blue-40);
   display: inline-flex;
 }
 
@@ -134,6 +135,7 @@
   --stepper-button-bg: var(--tc-button-text-primary-dark);
   --stepper-button-border: var(--tc-border-primary-dark);
   --stepper-value-color: var(--tc-button-text-inverse-disabled-dark);
+  --stepper-input-focus-outline-color: var(--tc-blue-40);
 }
 .stepper-input__control {
   background: var(--stepper-button-bg);
@@ -147,6 +149,12 @@
   height: 2.25rem;
   width: 2.25rem;
 }
+.stepper-input__control:focus-visible {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline-offset: 0.125rem;
+  transition: outline 0s;
+  outline-color: var(--stepper-input-focus-outline-color);
+}
 .stepper-input__value {
   border: 0.0625rem solid var(--stepper-value-color);
   font: 500 1.25rem/1.5rem "Inter", "Gilroy, Arial, sans-serif";
@@ -168,6 +176,10 @@
   margin: 0;
 }
 .stepper-input__value:focus-within {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline-offset: 0.125rem;
+  transition: outline 0s;
+  outline-color: var(--stepper-input-focus-outline-color);
   border: 0.0625rem solid var(--stepper-input-border-color-active);
 }
 .stepper-input tet-icon {

package/dist/collection/components/simple/inputs/tet-stepper-input/tet-stepper-input.js

@@ -121,7 +121,7 @@ export class TetStepperInput {
      */
     render() {
         const { onMinusClick, value, onPlusClick } = this;
-        return (h("div", { key: '11e087cc51c530cf0fca8490c13da03cb4061c7f', class: { 'stepper-input': true, [this.theme]: !!this.theme } }, h("tet-button", { key: '6c8788ff8ed37724dfc73a2aca2c5df3749ea0b4', type: "secondary", iconMode: true, theme: this.theme, size: 'small', "aria-label": t('components-number-input-decrease'), onKeyDown: this.handleOptionKeydown(onMinusClick), onClick: onMinusClick }, h("tet-icon", { key: '24cb6ca34cb965709b2c9a1d0ebffa7446895b94', name: "remove", onClick: onMinusClick })), h("input", Object.assign({ key: '8c50b00e33cb1c9d8793b324d3abe7d363ca0d46', ref: (htmlInputElement) => (this.inputElement = htmlInputElement), class: "stepper-input__value", value: value, type: "number" }, (this.accessibilityLabel ? { "aria-label": this.accessibilityLabel } : {}))), h("tet-button", { key: '3a8116b553927b9309887858f9ef368c554b0bd2', type: "secondary", iconMode: true, theme: this.theme, size: 'small', "aria-label": t('components-number-input-increase'), onKeyDown: this.handleOptionKeydown(onPlusClick), onClick: onPlusClick }, h("tet-icon", { key: 'b1524ea85664173e74f3d245ee2650471a561ae4', name: "add", onClick: onPlusClick }))));
+        return (h("div", { key: '228c8f85f8e54f6f02e32f2ff9b9866f1b938fcd', class: { 'stepper-input': true, [this.theme]: !!this.theme } }, h("tet-button", { key: '21ecbebfdb2d09c805be8c673c30bdd6884ada93', type: "secondary", iconMode: true, theme: this.theme, size: 'small', "aria-label": t('components-number-input-decrease'), onKeyDown: this.handleOptionKeydown(onMinusClick), onClick: onMinusClick }, h("tet-icon", { key: '3db5d37c729ba70c16f00d1af6bc9da6d4795ad1', name: "remove", onClick: onMinusClick })), h("input", Object.assign({ key: '290b9ce9cc812c11501e4e2a161ef0c16cf0fa0f', ref: (htmlInputElement) => (this.inputElement = htmlInputElement), class: "stepper-input__value", value: value, type: "number" }, (this.accessibilityLabel ? { "aria-label": this.accessibilityLabel } : {}))), h("tet-button", { key: '1e854519dff317cf704306d3e7a4027ef5bd066b', type: "secondary", iconMode: true, theme: this.theme, size: 'small', "aria-label": t('components-number-input-increase'), onKeyDown: this.handleOptionKeydown(onPlusClick), onClick: onPlusClick }, h("tet-icon", { key: '3d09a2773a6e1b8407a1290d74a1b1f3e9d5d1e3', name: "add", onClick: onPlusClick }))));
     }
     static get is() { return "tet-stepper-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/inputs/tet-textarea/tet-textarea.js

@@ -15,7 +15,7 @@ export class TetTextarea {
     }
     render() {
         const { value, label, placeholder, disabled, errorMessages, renderErrorMessage } = this;
-        return (h(Host, { key: '0bd04fdaf1f62e76c2b5884d521c95b810fda825' }, label && (h("label", { key: '692c72cd4613c1e1c028162d21dea54c8813cccb', class: "tet-textarea__label", htmlFor: "textarea" }, label)), h("textarea", { key: '7ed2e67c57992cc718e91727cf3c3dcabd92d553', id: "textarea", class: { 'tet-textarea__base': true, 'error': !!errorMessages.length }, placeholder: placeholder, disabled: disabled, autocomplete: "off" }, value !== null && value !== void 0 ? value : ''), !!errorMessages.length && h("div", { key: 'a3af65c9298d8ac1af380f1db2efc85854f9c33b', class: "error-messages" }, errorMessages.map(renderErrorMessage))));
+        return (h(Host, { key: 'ad7a286e44416f425640cd2e1bd2543a2fa038f3' }, label && (h("label", { key: '5dc7147d5a2ba83ec5bf0286c66e40f2246523c7', class: "tet-textarea__label", htmlFor: "textarea" }, label)), h("textarea", { key: 'cea399df1e3347ae79010c1c43e6fb79f8dbea9e', id: "textarea", class: { 'tet-textarea__base': true, 'error': !!errorMessages.length }, placeholder: placeholder, disabled: disabled, autocomplete: "off" }, value !== null && value !== void 0 ? value : ''), !!errorMessages.length && h("div", { key: 'ec0526225717a09db6641911a12bc365900a752f', class: "error-messages" }, errorMessages.map(renderErrorMessage))));
     }
     static get is() { return "tet-textarea"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/lists/tet-news-card-list/tet-news-card-list.js

@@ -65,7 +65,7 @@ export class TetNewsCardList {
             scrollFullWidth,
             controlScrollAmount,
         };
-        return (h(Host, { key: '6fd349e976e3622251c11ecbe87f3e9da715fa14' }, h("tet-card-list", Object.assign({ key: 'fe2af05ff2c36aaf1cde946e2c8672af890906d4', theme: this.theme, part: "card-list-component", exportparts: "card-list, card-list-container", withOverflowOpacity: true }, props), this.items.map((item, index) => this.renderListCard(item, index)))));
+        return (h(Host, { key: '4310452120d36309637a6bff67b72ddd16944563' }, h("tet-card-list", Object.assign({ key: '6dba0d78d78e46e539b8b54a032133b34d135204', theme: this.theme, part: "card-list-component", exportparts: "card-list, card-list-container", withOverflowOpacity: true }, props), this.items.map((item, index) => this.renderListCard(item, index)))));
     }
     static get is() { return "tet-news-card-list"; }
     static get encapsulation() { return "shadow"; }