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

package/dist/collection/components/advanced/customer/tet-referral/tet-referral.js

@@ -1,6 +1,8 @@
-import { Host, h, forceUpdate } from "@stencil/core";
-import { processTranslations, t } from "../../../../services/translations/index";
+import { ThemeWrapper } from "../../../theme/functional/theme-wrapper";
 import { landingPages } from "../../../../config/landing-pages";
+import { Theme } from "../../../../services/theme/index";
+import { processTranslations, t } from "../../../../services/translations/index";
+import { forceUpdate, h, Host } from "@stencil/core";
 /**
  * The referral Web Component can be used to advertise a referral program and prompt an existing
  * customer to share a dedicated link with other people.
@@ -26,6 +28,7 @@ export class TetReferral {
                 });
             });
         };
+        this.theme = Theme.LIGHT;
         this.language = 'lv';
         this.data = undefined;
     }
@@ -39,7 +42,9 @@ export class TetReferral {
         processTranslations('tet-components', this.language).then(() => forceUpdate(this));
     }
     render() {
-        return (h(Host, { key: '3a94cc93b37397fcfdd737a346171647edbe9202' }, h("div", { key: '9b9c9f2b4e3d54211b706b0ba2445c452fe204d2', class: "wrapper" }, h("div", { key: 'ad1aa09ce3f66df5aafd75d34edbda674fa6e693', class: "image-container" }, h("img", { key: '4353b15c387d10f3b47d669fcd86c56a1e74ad8c', src: t('components-referral-image-url'), alt: "" })), h("div", { key: 'a968969319dd35fdfab2c98aea9f13f9349dc62c', class: "subtitle-container" }, t('components-referral-subtitle')), h("div", { key: '9961d7576cb65bae6f035ed48194ce62198a2116', class: "description-container", innerHTML: t('components-referral-description') }), h("div", { key: '5db2b6fa66bfe9f33395eeca1e8bb68ccec3036b', class: "referral-block" }, h("div", { key: '749fcd43207bc685d9a828165273f5beb7086615', class: "url-wrapper" }, h("div", { key: '5a8db237ccbad5a531f6c36245c719693f22e11c', class: "referral-url" }, this.getReferralUrl()), h("div", { key: '85ac755947f12341bd43c40be4bbf87bdb57e44c' }, h("div", { key: '3447a2f187c25b0563293c1a9347c1099a102174', class: "button-wrapper" }, h("tet-tooltip", { key: '95f0c3477504f002d2f7a38786d07503dda797b4', class: "tooltip", doNotShowOnHover: true, ref: (el) => { this.tooltip = el; } }, t('components-referral-tooltip')), h("tet-button", { key: 'fda4c97919efcb0255baddcb46a1b6f0e308a1a3', clickCallback: this.copyToClipBoard, type: "primary" }, t('components-referral-copy-button-label')))))))));
+        return (h(Host, { key: 'c98cad8db5dbffed7d94d3f4b20c86f76dc6c133' }, h("div", { key: '91b2e3a6199e93f8ad2a137eecbdb850e8269f72', class: "wrapper" }, h(ThemeWrapper, { key: '126407b7ef5b3f253ec90ede0d17648a3aee9dd6', theme: this.theme }, h("div", { key: '7632e7be11bf4032058482fd78b324d3ed05fb15', class: "image-container" }, h("img", { key: '71b7e6bac26a0cfef9697ddfb75347048545dbf7', src: t('components-referral-image-url'), alt: "" })), h("div", { key: 'acfb45a8d4a7ecd8e7f58a9ba02dfe029d4e9368', class: "subtitle-container" }, t('components-referral-subtitle')), h("div", { key: 'e2c1b3feceee5daf022229c9ebbeda2c697893b3', class: "description-container", innerHTML: t('components-referral-description') }), h("div", { key: 'b4602c905ca9528d0f50717d5919b4580df3e782', class: "referral-block" }, h("div", { key: 'dabddc6d65722dc1b6a6777a0ab0cb5b5594b614', class: "url-wrapper" }, h("div", { key: '17487ebf3ed63bd11416cc0484a6b5e64b0e5f60', class: "referral-url" }, this.getReferralUrl()), h("div", { key: 'ef44a01cbabf9da81223dc76e04427196b30d6a6' }, h("div", { key: 'fc7068202b757ed2dbb2ab9691bdb63ffa8cfd0e', class: "button-wrapper" }, h("tet-tooltip", { key: 'f3b0f1a0d09b72c3acc9f04ce6c150abe4c789c0', theme: this.theme, class: "tooltip", doNotShowOnHover: true, ref: (el) => {
+                this.tooltip = el;
+            } }, t('components-referral-tooltip')), h("tet-button", { key: '7155d7919c8525d832611d967b8b01eb99b281a3', clickCallback: this.copyToClipBoard, type: "primary", theme: this.theme }, t('components-referral-copy-button-label'))))))))));
     }
     static get is() { return "tet-referral"; }
     static get encapsulation() { return "shadow"; }
@@ -56,6 +61,30 @@ export class TetReferral {
     static get assetsDirs() { return ["assets.component"]; }
     static get properties() {
         return {
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Theme",
+                    "resolved": "Theme.DARK | Theme.LIGHT",
+                    "references": {
+                        "Theme": {
+                            "location": "import",
+                            "path": "@services/theme",
+                            "id": "src/services/theme/index.ts::Theme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The property to determine the theme of the component."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "Theme.LIGHT"
+            },
             "language": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/advanced/dialog/tet-multi-step-dialog/tet-multi-step-dialog.js

@@ -90,7 +90,7 @@ export class TetMultiStepDialog {
         return (h("div", { innerHTML: step, "data-step": Number(index) + 1, class: "multi-step-dialog__step", ref: this.setStepBlocks }));
     }
     render() {
-        return (h(Host, { key: '640902053f94d5d9492e88ce1a23cd6292349f12', class: "multi-step-dialog" }, h("tet-dialog", { key: '8a8e77b0fbfcf4878f144b86447effb2b09dd6ae', class: this.tetDialogClass, "is-open": this.isOpen, "data-screen-key": this.dialogDataScreenKey, "footer-display": "right", ref: el => this.tetDialog = el }, h("div", { key: '10fc6f9897457c0ed4eac81c0ca32d408d7cca72', innerHTML: this.content }), this.steps.map((step, index) => (this.renderStep(step, index))), h("tet-button", { key: 'fe4c40ac710f82c54592f41ac33f874e878f0bfc', class: "footer-button", slot: "footer", size: "medium", theme: "light", type: "secondary", ref: el => this.prevButton = el }, t('components-go-back')), h("tet-button", { key: 'b99a2f6784636c0c87eec748119e8b9f8620d669', class: "footer-button", slot: "footer", size: "medium", theme: "light", ref: el => this.nextButton = el }, t('components-next-step')))));
+        return (h(Host, { key: '883b306209d9f8a82d2ce23a51285cb241aa824b', class: "multi-step-dialog" }, h("tet-dialog", { key: 'a97de5824348ff149ac9db2ad436fddd39ea28e0', class: this.tetDialogClass, "is-open": this.isOpen, "data-screen-key": this.dialogDataScreenKey, "footer-display": "right", ref: el => this.tetDialog = el }, h("div", { key: '3813fcac4aa952b12884151dd7acf5eeb10cfdf7', innerHTML: this.content }), this.steps.map((step, index) => (this.renderStep(step, index))), h("tet-button", { key: 'a192e68cd76da9e9bcad4c42828f23f78a7b1c66', class: "footer-button", slot: "footer", size: "medium", theme: "light", type: "secondary", ref: el => this.prevButton = el }, t('components-go-back')), h("tet-button", { key: 'da34881e842d87aac6d656e97b86d7533ebf9be9', class: "footer-button", slot: "footer", size: "medium", theme: "light", ref: el => this.nextButton = el }, t('components-next-step')))));
     }
     static get is() { return "tet-multi-step-dialog"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/advanced/forms/tet-availability-contact-form/tet-availability-contact-form.js

@@ -121,7 +121,7 @@ export class TetAvailabilityContactForm {
         return (h("div", null, h("tet-dialog", { ref: (element) => this.dialogElement = element, "footer-display": "hidden", "is-open": this.showAvailabilityContactForm, closeOnEscape: true, closeOnOverlayClick: true }, h("div", { class: "form-container" }, h("tet-icon", { name: "confirm-md", class: "icon icon-success icon-size" }), this.showTitle && h("h2", { class: "form-title" }, t('components-availability-contact-form-success-title')), h("p", { class: "form-subtitle" }, t('components-availability-contact-form-success-subtitle')), h("tet-button", { class: "form-container-close", clickCallback: this.closeDialogElement, size: "medium", type: "primary", theme: "light" }, h("span", null, t('components-availability-contact-form-success-close')))))));
     }
     render() {
-        return (h("div", { key: '60cfbd496c749055c32bdcf39d9e0cb8689ac5ff', class: { 'dark-theme': this.darkTheme } }, this.success ? this.renderSuccessStep() : this.renderForm()));
+        return (h("div", { key: '3c2c8a5a2c96852faec1443b9d392aa8c77742f0', class: { 'dark-theme': this.darkTheme } }, this.success ? this.renderSuccessStep() : this.renderForm()));
     }
     static get is() { return "tet-availability-contact-form"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/advanced/forms/tet-contact-form/tet-contact-form.js

@@ -64,7 +64,7 @@ export class TetContactForm {
         processTranslations('tet-components', this.language).then(() => forceUpdate(this));
     }
     render() {
-        return (h("div", { key: '3d2dda6cb26747ac4aa6202071ed3427ed80a564', class: { 'dark-theme': this.darkTheme } }, h("tet-container", { key: '22fe1d2a3b0a46e59a1c3c078b374914b511cb92', class: "container" }, this.showLoader && this.renderLoader(), h("div", { key: '2940476abc3acd28e260dddc5acfc9106e1e4254', class: "form-container" }, this.showTitle && h("h2", { key: '5e9c6da97bf6ab46fb361f18bdf94c06b12cb0ee', class: "form-title" }, t('components-contact-form-title')), h("p", { key: 'eaf49bc8a79ec05cbfe3c3f4bbb8858c800288b0', class: "form-subtitle" }, t(this.subtitle)), h("tet-input", { key: 'a7b9af9d58fed3d5f3c5ebea702f21494be68529', class: "form-input", placeholder: "+37122345678", ref: (element) => this.phoneInput = element, validators: this.validators, label: this.showInputLabel ? t('components-contact-form-input-label') : null, theme: this.darkTheme ? 'dark' : 'classic' }), h("tet-button", Object.assign({ key: 'cebbb505333ae5d9489e1ec5d538f2d8f5722f10', class: "form-submit", type: "primary", clickCallback: this.createManualTask, innerHTML: t('components-contact-form-submit') }, this.submitButtonProps))))));
+        return (h("div", { key: '42605e97778dd48bce6a8247d4ef569c603fbe5e', class: { 'dark-theme': this.darkTheme } }, h("tet-container", { key: '34357707e1e2061047f459d82e1cd57ace297e54', class: "container" }, this.showLoader && this.renderLoader(), h("div", { key: 'bd1c3f044fbefa0bfc11f9848317a7ea0055d5ea', class: "form-container" }, this.showTitle && h("h2", { key: '31270fb76a7d8a61d5129df7ba10a15c6482f1f3', class: "form-title" }, t('components-contact-form-title')), h("p", { key: '0a9c4900224c2e09cfc281ccaea331092e12f1fe', class: "form-subtitle" }, t(this.subtitle)), h("tet-input", { key: '7f76f3bc0778e2a1ebaa6b587ec79ac2c2b415b2', class: "form-input", placeholder: "+37122345678", ref: (element) => this.phoneInput = element, validators: this.validators, label: this.showInputLabel ? t('components-contact-form-input-label') : null, theme: this.darkTheme ? 'dark' : 'classic' }), h("tet-button", Object.assign({ key: 'b39cc8ea681851fbceab6de6a47615720150013d', class: "form-submit", type: "primary", clickCallback: this.createManualTask, innerHTML: t('components-contact-form-submit') }, this.submitButtonProps))))));
     }
     static get is() { return "tet-contact-form"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/advanced/promotions/tv-gift/tet-tv-gift-block/tet-tv-gift-block.js

@@ -32,7 +32,7 @@ export class TetTvGiftBlock {
         this.setContainerSize();
     }
     render() {
-        return (h(Host, { key: 'c3d9c5c4d84ae21aad281f62e44967a15908dda2' }, h("div", { key: 'c75702b70f946353f1b14d812faa7a298470f673', class: { 'tv-gift': true, [`tv-gift--${this.containerSize}`]: true } }, h("div", { key: '780644088806143e4d2a0b5c3ff8c5b2bb7927e3', class: "tv-gift__header" }, h("slot", { key: 'ae171c13bcfda8e66717f7da9326194f3a03e148', name: "header" }, this.headerImageSrc && h("img", { key: '9c62fc8a33ce89fd1e9934d40e12b2a496ae5ba7', class: "tv-gift__header__image", src: this.headerImageSrc }), h("div", { key: 'f57bbf8d79a0ce91312e4d7cdd5b60919fa8d82e', class: "tv-gift__header-text" }, this.headerTitle))), h("div", { key: 'c7c5ee8ea34ffdc616dfff8bdece4baaac226d44', class: "tv-gift__content" }, h("slot", { key: '10cea1d4da00b7ecf5fcb19f6661c45a1cfd14c4' })), h("div", { key: '0603c81476501a743c1ed795c6ab3e82ea9ce344', class: "tv-gift__footer" }, h("slot", { key: '9096d5572503d01c4aaef88e74c9326e60d0f77b', name: "footer" }, h("span", { key: '593d9de6f85bcc95204b6e4a37a7ac02e06247ac', class: "tv-gift__footer__title" }, this.footerTitle), h("span", { key: '474f22c096c2968233096b4c1c0901527df76288', class: "tv-gift__footer__text" }, this.footerText))))));
+        return (h(Host, { key: '2e72249d13c9b2a04fe92ef4344e26ec59710e05' }, h("div", { key: 'c9ec574f0e1f140c353100399e25f8c2f2a57939', class: { 'tv-gift': true, [`tv-gift--${this.containerSize}`]: true } }, h("div", { key: '6f52b2408fd48500affbf5d0f2c111cf33f2168b', class: "tv-gift__header" }, h("slot", { key: 'b390054f876ab278f6fa8b308d1e11dfc14efbe0', name: "header" }, this.headerImageSrc && h("img", { key: '7c9728bf77fd717c75fc09d576871576ab4c6826', class: "tv-gift__header__image", src: this.headerImageSrc }), h("div", { key: '7939336e74c56ce21a2ded019e33f531a8d787fa', class: "tv-gift__header-text" }, this.headerTitle))), h("div", { key: '2c501b50b2b79f0310558df488831ebf18317d15', class: "tv-gift__content" }, h("slot", { key: '7be94725a7d884a4dbf241542d9d2d304abd86f5' })), h("div", { key: 'ba22228277be617dd32e227a4d902722686c21a7', class: "tv-gift__footer" }, h("slot", { key: 'c4fb5d3b40694840a08ca7394ba301a7f1fb5b20', name: "footer" }, h("span", { key: 'd248d4e4080b8e8962307f5b0e477f1f61830749', class: "tv-gift__footer__title" }, this.footerTitle), h("span", { key: 'dae6a5665b9dc34696337ec447f16e38d15f8ab8', class: "tv-gift__footer__text" }, this.footerText))))));
     }
     static get is() { return "tet-tv-gift-block"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/advanced/promotions/tv-gift/tet-tv-gift-list/tet-tv-gift-list.js

@@ -34,11 +34,11 @@ export class TetTvGiftList {
         this.setContainerSize();
     }
     render() {
-        return (h(Host, { key: '2af4ff7ec0b8e5d7ab38b1b4de49f1f4d8144509' }, h("div", { key: '495b97db31acbe7162ae739f18123f94a1aa0d6f', class: {
+        return (h(Host, { key: '270bcbabbb7180756d8b25e85a2f1aee57fb341a' }, h("div", { key: 'ffcb75681fc4b2e7c7857d52e71e537cd7559bb9', class: {
                 'tv-gift-list': true,
                 [`tv-gift-list--${this.containerSize}`]: true,
                 'tv-gift-list--image-list': Boolean(this.imageSource),
-            } }, this.imageSource && (h("div", { key: '09b22c5ec4ed6ddf96bd8b8d2f08285e7708f2e0', class: "tv-gift-list__image__wrapper" }, h("img", { key: 'ad0fd1629b3006d3ccf02f14e3e6358d4d576cba', class: "tv-gift-list__image", src: this.imageSource }))), h("div", { key: '4302290d8a189fe14b5100f61a594b87786ac661', class: "tv-gift-list__list__wrapper" }, h("span", { key: '1ec7d3e276c43668c9138071b78d334a4e0c7bda', class: "tv-gift-list__list__header" }, this.header), h("ul", { key: '7070d414787f61532515118d95c933b18d8419c1', class: "tv-gift-list__list" }, this.list.map(item => (h("li", { class: "tv-gift-list__list__item" }, h("tet-icon", { name: this.listBulletIcon }), item))))))));
+            } }, this.imageSource && (h("div", { key: '4e89a9af1c6c56250a8767c7d2595e6eed8c08c3', class: "tv-gift-list__image__wrapper" }, h("img", { key: 'd8431708ea52c261a0be0c5385114461dfdfd9de', class: "tv-gift-list__image", src: this.imageSource }))), h("div", { key: '339e53d2985951176847c8acb4e866a4b359b842', class: "tv-gift-list__list__wrapper" }, h("span", { key: 'fa680171e07654d476b3924c5c02a6185d307bc2', class: "tv-gift-list__list__header" }, this.header), h("ul", { key: 'ec9b710b5781bb0ff6067d3bb39b59558623c97f', class: "tv-gift-list__list" }, this.list.map(item => (h("li", { class: "tv-gift-list__list__item" }, h("tet-icon", { name: this.listBulletIcon }), item))))))));
     }
     static get is() { return "tet-tv-gift-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basic/buttons/tet-button/tet-button.js

@@ -27,7 +27,7 @@ export class TetButton {
         return (h("div", { class: "button__content" }, h("slot", null), h("tet-icon", { name: this.iconName })));
     }
     render() {
-        return (h(Host, { key: '89185edb403bfa1b36c8fa079a86149762b1a0cf' }, h("button", Object.assign({ key: 'cf7cf91729dab81110021ecf1bd6bc5472d012a5', part: "button", onClick: this.clickCallback, id: this.elementId, class: {
+        return (h(Host, { key: '57f85898ea9406150ff5d6ebe74207ce9db2f468' }, h("button", Object.assign({ key: 'd8ab0fc232a28724d24bb09502033204d2e1016c', part: "button", onClick: this.clickCallback, id: this.elementId, class: {
                 button: true,
                 [`button-${this.size}`]: true,
                 [`button--type-${this.type}`]: true,

package/dist/collection/components/basic/buttons/tet-checkbox/tet-checkbox.js

@@ -57,7 +57,7 @@ export class TetCheckbox {
     }
     render() {
         const { label, name, checked, value, disabled, error } = this;
-        return (h(Host, { key: '6d1abff1fa1a75fed5b12f9e85ece2b3464b2c2f' }, h("div", { key: '5f862a3d051096849715411b3c17e4132cb0dafa', class: { checkbox: true, [`${this.theme}`]: true } }, h("label", { key: 'fb741b5bb7397c552a02cb6341de1016a498d36c', class: "checkbox__container", part: "checkbox-container", htmlFor: "tet-checkbox" }, h("input", { key: '2416ba723506f9b168eb7bb9740867325d78db99', ref: (el) => (this.inputEl = el), class: "checkbox__html-input", id: "tet-checkbox", type: "checkbox", name: name, value: value, disabled: disabled, checked: checked, onChange: this.handleChange }), h("span", { key: '8f5250ad79b6ca8d7b6d8848abdd12e972984de8', class: { 'checkbox__input': true, 'checkbox__input--error': error } }, h("tet-icon", { key: '9ff02edccb55061253fc79d8d8ca22e071ad8963', name: "remove", class: "checkbox__icon checkbox__icon--indeterminate indicator" }), h("tet-icon", { key: '06c23c7b5b2bd5cef5646b9e3b86b537cffccda7', name: "check", class: "checkbox__icon" })), label ? (h("span", { class: "checkbox__label", innerHTML: label })) : (h("span", { class: "checkbox__label" }, h("slot", null)))))));
+        return (h(Host, { key: 'a1b82f46971bb28bad2d2dd2e6710b74493062bf' }, h("div", { key: 'f940718cd92c51c2539a4bda4e6045cae52bcc4a', class: { checkbox: true, [`${this.theme}`]: true } }, h("label", { key: 'd9605cc70023629d9e310f89e9d9c0930c5e0e86', class: "checkbox__container", part: "checkbox-container", htmlFor: "tet-checkbox" }, h("input", { key: '4b027f65600277d5503fba7f1b9d43587711f532', ref: (el) => (this.inputEl = el), class: "checkbox__html-input", id: "tet-checkbox", type: "checkbox", name: name, value: value, disabled: disabled, checked: checked, onChange: this.handleChange }), h("span", { key: '328bd69893030a78b22b919647a7979fc5986e41', class: { 'checkbox__input': true, 'checkbox__input--error': error } }, h("tet-icon", { key: '5a49a6a251cc21a572f558116e91c5ffd3673d87', name: "remove", class: "checkbox__icon checkbox__icon--indeterminate indicator" }), h("tet-icon", { key: '6447610f05dc85b21cf4689a6bd586f570cfd471', name: "check", class: "checkbox__icon" })), label ? (h("span", { class: "checkbox__label", innerHTML: label })) : (h("span", { class: "checkbox__label" }, h("slot", null)))))));
     }
     static get is() { return "tet-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basic/buttons/tet-radio/tet-radio.js

@@ -45,7 +45,7 @@ export class TetRadio {
     }
     render() {
         const { id, disabled, value, checked, name, label, handleInputChange, accessibilityLabel, inputAutofocus } = this;
-        return (h(Host, { key: '5b61be69de9ec0849bc2745da7ef409f7edd82c8' }, h("div", { key: '2dd530a0889cfb6e99934a941b86e2aaddbf8dbd', class: { radio: true, [`radio-${this.theme}-theme`]: true } }, h("label", { key: '804d53f085df288e427ee8f805f03838f9f758a9', class: "radio__container", htmlFor: id }, h("input", Object.assign({ key: '27d0a4d28f1072f00c0737433f4442452b23cc21', class: "radio__html-input", id: id, name: name, type: "radio", value: value, disabled: disabled, checked: checked, onChange: handleInputChange, autofocus: inputAutofocus }, (accessibilityLabel ? { 'aria-label': accessibilityLabel } : {}), { tabindex: this.checked ? '0' : '-1', role: "radio", "aria-checked": this.checked ? 'true' : 'false' })), h("span", { key: 'c3da1a5e036d721583e507c49c451e49d4b2013e', class: "radio__input" }), label ? (h("span", { class: "radio__label", innerHTML: label })) : (h("span", { class: "radio__label" }, h("slot", null)))))));
+        return (h(Host, { key: 'f390c9749d5b2ea79058da7169a69154533ebe28' }, h("div", { key: '6ef9ab27b3eda1559412a9f8043cffebdf5f4529', class: { radio: true, [`radio-${this.theme}-theme`]: true } }, h("label", { key: '9a4058656b39b10483a977d7105ce8d2820e1b3c', class: "radio__container", htmlFor: id }, h("input", Object.assign({ key: '6d801c90500e2724fc1dd03de75cf2e3d2d30539', class: "radio__html-input", id: id, name: name, type: "radio", value: value, disabled: disabled, checked: checked, onChange: handleInputChange, autofocus: inputAutofocus }, (accessibilityLabel ? { 'aria-label': accessibilityLabel } : {}), { tabindex: this.checked ? '0' : '-1', role: "radio", "aria-checked": this.checked ? 'true' : 'false' })), h("span", { key: '227f509a4eff043ce71a177a2733b04a23dacf82', class: "radio__input" }), label ? (h("span", { class: "radio__label", innerHTML: label })) : (h("span", { class: "radio__label" }, h("slot", null)))))));
     }
     static get is() { return "tet-radio"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/basic/buttons/tet-switch/tet-switch.js

@@ -35,7 +35,7 @@ export class TetSwitch {
     }
     render() {
         const { label, name, theme, disabled, checked, accessibilityLabel } = this;
-        return (h(Host, { key: '192e210eabc95bb42cc0e46fb61127ba6cc594a0' }, h("div", { key: 'b9959805dc353b9121b9280b0c0e4741512dbff6', class: { 'switch': true, [`${theme}`]: true } }, h("label", { key: 'fba548a18611cc16f1029c7308d83da3ea9a3433', class: "switch__container", part: "switch-container", htmlFor: "tet-switch" }, h("input", Object.assign({ key: 'ab71dcfdcc42ecd110ecd0119bf97f1281c07d6f', class: "switch__html-input", name: name, id: "tet-switch", type: "checkbox", disabled: disabled, checked: checked, onChange: this.handleChange() }, (accessibilityLabel ? { "aria-label": accessibilityLabel } : {}))), h("span", { key: 'fb1c3befb3414f35097bbe6b378538e9820ed9ca', class: { "switch__input": true, [this.theme]: true } }, h("span", { key: '88716ebb1e352447b0c08e4b71ff41e3d349ef89', class: "switch__state" })), label
+        return (h(Host, { key: '54f2e341920d6bcd99533b723eee03a6f35927e5' }, h("div", { key: '3dc73c69e65bbef9c57406933933e5b377d16fa7', class: { 'switch': true, [`${theme}`]: true } }, h("label", { key: '449c3812e489af508a057966eef8ceab18233089', class: "switch__container", part: "switch-container", htmlFor: "tet-switch" }, h("input", Object.assign({ key: 'a526a2071de462760e14b0399fed18e5137cfea9', class: "switch__html-input", name: name, id: "tet-switch", type: "checkbox", disabled: disabled, checked: checked, onChange: this.handleChange() }, (accessibilityLabel ? { "aria-label": accessibilityLabel } : {}))), h("span", { key: '3ed6173e93a1a823103379115d7bcf04235ce141', class: { "switch__input": true, [this.theme]: true } }, h("span", { key: 'f715fb0a5bd2dcfac29be4799a843d2ae0cdbda9', class: "switch__state" })), label
             ? h("span", { class: "switch__label", innerHTML: label })
             : h("span", { class: "switch__label" }, h("slot", null))))));
     }

package/dist/collection/components/basic/buttons/tet-tabs/tet-tab-content/tet-tab-content.js

@@ -113,10 +113,10 @@ export class TetTabContent {
         this.selectedId = id;
     }
     render() {
-        return (h(Host, { key: '1e1adf215b2fe6c4618b1a7fb63e7a992fcd4c60' }, h("div", { key: '8bdda1c746a062e2b1cc402e51d5730b79b962b9', class: {
+        return (h(Host, { key: '192fc02028e1f5a90d0c63f5c3c6f879d3aac7e3' }, h("div", { key: 'dd44ab40f8615ef72fa03fe9e865851b540cc8bb', class: {
                 'tet-tab-content': true,
                 'use-visibility': this.useVisibility
-            } }, h("slot", { key: '1bd5c0c90f61ffe937979fc33a7cfd60fd5607d8' }))));
+            } }, h("slot", { key: '790ecd2a8ef21b5a8bf05b90770c3c017e5d57e5' }))));
     }
     static get is() { return "tet-tab-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basic/buttons/tet-tabs/tet-tab-header/tet-tab-header.js

@@ -399,7 +399,7 @@ export class TetTabHeader {
         return {};
     }
     render() {
-        return (h(Host, { key: '8910bc0892ab4c86f0595b02effead58cee93419' }, h("div", { key: 'e67fb443e4ddc58d57b5a7f1f0567fe3e236c62a', class: {
+        return (h(Host, { key: 'e52f129c090c3d6a2c09d45d9b9fcad1bbd1e9ad' }, h("div", { key: '98e09e86a9d0f1202a98e826b2362b95d88547ac', class: {
                 'tabs': true,
                 'tabs--segmented': this.segmented,
                 [this.position]: true,
@@ -407,7 +407,7 @@ export class TetTabHeader {
                 [this.sizing]: true,
                 'no-underline': this.hideHeaderUnderline,
                 [this.type]: !!this.type
-            }, onMouseDown: this.onContainerMouseDown, style: this.getStyle(), ref: (ref) => (this.tabElement = ref) }, h("slot", { key: '412120e4448fc59441db1d7fea42a5338b9f5a2c', ref: (slot) => (this.tabContainer = slot) }))));
+            }, onMouseDown: this.onContainerMouseDown, style: this.getStyle(), ref: (ref) => (this.tabElement = ref) }, h("slot", { key: '26b7c15d820aa76edeed064264ac801c2b089080', ref: (slot) => (this.tabContainer = slot) }))));
     }
     static get is() { return "tet-tab-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basic/buttons/tet-tag/tet-tag.js

@@ -19,12 +19,12 @@ export class TetTag {
         processTranslations('tet-components', this.language).then(() => forceUpdate(this));
     }
     render() {
-        return (h(Host, { key: '93a81aebb3103f7901d7f22a3f445a0e679b0d6c' }, h("button", { key: '59a5c054091cb576de1913841630d52448fcd9db', class: {
+        return (h(Host, { key: 'e4b668968daf57d36ddea1790453092a0c59278f' }, h("button", { key: '13648dc924f1f970a2a88cb1a5ab84d42f2926ca', class: {
                 tag: true,
                 'tag-active': this.active,
                 'tag--icon': this.showIcon,
                 [`theme-${this.theme}`]: true,
-            }, "aria-pressed": this.active.toString() }, this.tagTitle && h("p", { key: '9eced167ece27d9bcf87ed05ac8b28e6203108c9', class: "tag-title" }, t(this.tagTitle)), this.count !== null && this.count !== undefined && h("span", { key: '8c8db46b2a8a161d50c97a9d076d9ccfb5bf9a1b', class: "tag-count" }, this.count), this.showIcon && h("tet-icon", { key: '7d1825f0760f4c115197b69c402dd01e5109aa15', class: "tag-icon", name: "close-circle", part: "icon-selected" }))));
+            }, "aria-pressed": this.active.toString() }, this.tagTitle && h("p", { key: '7a4922d106fd52c4a502527b9ecb63aa3148b8c4', class: "tag-title" }, t(this.tagTitle)), this.count !== null && this.count !== undefined && h("span", { key: '4ac29841e9ec6f3f4de40c061f2baeb0c49efcef', class: "tag-count" }, this.count), this.showIcon && h("tet-icon", { key: '4a1109eb4767741c469c8073e471555dc15ee33e', class: "tag-icon", name: "close-circle", part: "icon-selected" }))));
     }
     static get is() { return "tet-tag"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basic/container/tet-container/tet-container.js

@@ -11,12 +11,12 @@ export class TetContainer {
         this.theme = 'classic';
     }
     render() {
-        return (h("div", { key: 'e6b104ae77688173e78cd0938d584c670a08f02c', class: {
+        return (h("div", { key: '5ac5ea13f4ab8a1e421f9db6b7c6d0ee6076ccf3', class: {
                 'container': true,
                 'container--highlightable': this.highlightable,
                 'container--selected': this.selected,
                 [`container--${this.theme}`]: this.theme !== 'classic',
-            }, part: "container" }, h("slot", { key: '603211fdaa1769de317f7927b651afb84e939e07' })));
+            }, part: "container" }, h("slot", { key: '08405376f22817c242f62d60e04b037512fe4d3d' })));
     }
     static get is() { return "tet-container"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basic/icon/tet-icon.js

@@ -45,7 +45,7 @@ export class TetIcon {
         });
     }
     render() {
-        return (h("span", { key: 'b67c1c9fab01d2726ca999c90e8d7f125d877d6c', class: "icon-wrapper" }, h("span", Object.assign({ key: 'a36a5594a9b0c5fc31c2249ffd9a32da30b35057', class: { 'icon-container': true, 'default-color': this.useDefaultColor, [this.theme]: true }, ref: (element) => (this.iconContainer = element) }, (this.accessibilityLabel
+        return (h("span", { key: '3749c414a38d699b7688db6af43b365ebf56f536', class: "icon-wrapper" }, h("span", Object.assign({ key: 'c3a443ffabc1529f929b0954b88e813d5fd29aa3', class: { 'icon-container': true, 'default-color': this.useDefaultColor, [this.theme]: true }, ref: (element) => (this.iconContainer = element) }, (this.accessibilityLabel
             ? { "aria-label": this.accessibilityLabel, "role": "img" }
             : { "role": "presentation" })))));
     }

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

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class TetLoader {
     render() {
-        return (h("div", { key: 'd7e698a28d977fcc1e7bf198898715cc1739d5b8', class: "loader" }, h("div", { key: '5ee1ae97c6bbec0f1936421a5b7c31ffc308cd63', class: "loader-inner" })));
+        return (h("div", { key: 'fb07b6b91f86cb2a73963747120907c039972b10', class: "loader" }, h("div", { key: '40420aef875c7ae320f32a6fea69e6bdee118c44', class: "loader-inner" })));
     }
     static get is() { return "tet-loader"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,7 +9,7 @@ export class TetPlaceholder {
         this.darkTheme = false;
     }
     render() {
-        return (h(Host, { key: 'b11b339397eaf084989480d02b56ed140e1ed769', style: { width: this.width, height: this.height } }, h("div", { key: 'a38152acb4bdf9fba6d1bc3a94cc0fc46b9cc66e', class: { 'dark-theme': this.darkTheme } }, h("div", { key: '6073eb33bea8cb0be5e4f260eeddd8ca9bdc521c', class: "placeholder", style: { height: this.height } }))));
+        return (h(Host, { key: 'bc59e16189f2cee4b74e5755175874232310cd6e', style: { width: this.width, height: this.height } }, h("div", { key: '95a67726db2105bb9fc3228b1e53997c117a7fd1', class: { 'dark-theme': this.darkTheme } }, h("div", { key: '75f3970f227ca92dc9d2ceb7b1c65dd05b870c02', class: "placeholder", style: { height: this.height } }))));
     }
     static get is() { return "tet-placeholder"; }
     static get encapsulation() { return "shadow"; }

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: 'da8983e8ceb2734306ec986e3285257f24855d0a', ref: element => (this.spinner = element), class: {
+        return (h("div", { key: 'c15f0c771cc10d48100c934e6385a61bc32cc66e', ref: element => (this.spinner = element), class: {
                 spinner: true,
                 [`${this.theme}-theme`]: true,
                 [`size--${this.size}`]: true,
                 [`spinner--${this.type}`]: true,
-            } }, h("svg", { key: '0e451f887c3d9ad8460941cc1122e174968527f6', viewBox: "0 0 40 40" }, h("clipPath", { key: '992b35747bd26603697b73d59325e830e838b96e', id: "clip" }, h("path", { key: '5693b10f385945e059206f9b978cd4b4548ee069', 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: '1e300ef785846d8154b802b79b0c0a5a9f4c025a' }, h("div", { key: '71f0770410b9136dc107388a5aec1c6f216fe30d', class: "spinner__gradient" })))));
+            } }, 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" })))));
     }
     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: '7efbd5e4aa519a6cfb79d7557b85a8e885fc90f6' }, h("div", { key: '93bdb5fa15a26e715bcbe9fe57153cf5c60c2566', class: {
+        return (h(Host, { key: '9dd7a061500cdce531db4358bdada819ff41e4a3' }, h("div", { key: '595b5e7191f561a8fb60bb5356c5671ca270b735', class: {
                 label: true,
                 'label-active': this.active,
                 [`label-type-${this.type}`]: true,
                 [`theme-${this.theme}`]: true,
-            } }, this.labelTitle && h("p", { key: '34e5927a3030c2a876217cd425744559a7a74b26', class: "label-title" }, this.translateTitle ? t(this.labelTitle) : this.labelTitle), this.showIcon && h("tet-icon", { key: '8f30815f83fb6de4d439a00a7da0951d11a71815', class: "label-icon", name: "close-circle", part: "icon-selected" }))));
+            } }, 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" }))));
     }
     static get is() { return "tet-label"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basic/steppers/tet-business-round-stepper/tet-business-round-stepper.js

@@ -17,7 +17,7 @@ export class TetBusinessRoundStepper {
         return (h("div", { class: "business-stepper__step" }, h("div", { class: "business-stepper__icon", style: { 'background-color': stepData.color } }, h("tet-icon", { name: stepData.icon, style: { '--icon-color': stepData.iconColor } })), h("span", { class: "business-stepper__title" }, stepData.description), h("p", { class: "business-stepper__text" }, stepData.text)));
     }
     render() {
-        return (h("div", { key: 'b41285bb2186cc9b09f6bc9f9878b0d1868905ca', class: {
+        return (h("div", { key: '7b1781760a645007ad505eacc221a77b34a4b9f3', class: {
                 'business-stepper': true,
                 'business-stepper--uneven': this.layout === 'grid' && this.stepperData.length % 2 == 1,
                 [`business-stepper--${this.layout}`]: true,

package/dist/collection/components/basic/steppers/tet-round-stepper/tet-round-stepper.js

@@ -58,7 +58,7 @@ export class TetRoundStepper {
         this.calculateContainerWidth();
     }
     render() {
-        return (h(Host, { key: 'fd8ee9e0f0ac5f69bda900db3753a746d57d36c4' }, h("div", { key: 'd6e9a4a4a94e8df4b83d8d37cca1a83548a53394', class: {
+        return (h(Host, { key: '06c75498d8fb49bac8e2b918a887304403b637cc' }, h("div", { key: '7765f56024935fcef5e7bd10ab7d2aadc6d89062', class: {
                 'round-stepper': true,
                 'column': this.forcedColumn,
                 'hide-icons': this.hideIcons,

package/dist/collection/components/basic/steppers/tet-stepper/tet-stepper.js

@@ -70,7 +70,7 @@ export class TetStepper {
         this.stepperData = [];
     }
     render() {
-        return (h(Host, { key: '31d797a5d491a807379364783569a9de5a797890' }, h("ol", { key: 'eb1e51a74e75e8572f058f00e61ff13541c01fb7', class: "stepper" }, this.stepperData.map(this.renderStep))));
+        return (h(Host, { key: '6ac0529a66f1cf0e2c8d2b107850b028cb50e2a2' }, h("ol", { key: 'c5403e7b83d047cead659f664947de3130c411e0', class: "stepper" }, this.stepperData.map(this.renderStep))));
     }
     static get is() { return "tet-stepper"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basic/steppers/tet-stepper-v2/tet-stepper-v2.js

@@ -36,7 +36,7 @@ export class TetStepperV2 {
         this.theme = 'light';
     }
     render() {
-        return (h(Host, { key: '7d6261e6159384fbd48d7cd96298b26514d58833' }, h("ol", { key: 'fb16ca14511bae1c9a9395aaeb52cde426412677', class: {
+        return (h(Host, { key: '465f30f914aec7d3d9924f163c4fbddc2690a7f3' }, h("ol", { key: '698b427da7b02faab8ebd6ea6dc25dc7a44bba67', class: {
                 'stepper': true,
                 [this.theme]: true,
             } }, this.stepperData.map(this.renderStep.bind(this)))));

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: '393785539930497c44155dfe589ba37326f88b91', class: "header" }, this.datepickerView !== 'year'
+        return (h("div", { key: '510d9b8528a88a96725c58381b091ad4446b66b4', 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: '08f41f93016d2b07fb8c9b9bc37b8b436901d7f1', class: "control-button", onClick: () => this.changeDatepickerView() }, this.getControlButtonDate(), h("tet-icon", { key: '7e157cbce8babcc1dde3b58311d4c8eb2c4660af', class: "chevron-down", name: this.datepickerView === 'month' ? 'chevron-down' : 'chevron-up' })), this.datepickerView !== 'year'
+            : 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", { 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: 'f66143c73073ea18cfa6136fb9fcc8a288cde60f' }, h("div", { key: '9d0f358ecc737dde8258bbba2d4b9728f71fe81a', class: "weekday-header" }, this.days.map((day) => h("div", { class: "day" }, day))), h("div", { key: 'cda2d017b54f7049a5693c62d9b2aeda06130929', 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: '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))))));
     }
     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: '060f4e7e7ee31e870b1569ea6e9f582e3854977d', class: "container" }, this.years.map((year) => h("div", { class: this.getYearClasses(year), onClick: () => this.handleYearSelection(year) }, year))));
+        return (h("div", { key: '2e60f4c50f18004123572c7a846bf1f50893dc48', 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: '27e060a2a2415f6259d828f587d68c4bfc9f2154', 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: 'b4829f0c145e6a6ca289b25b06f5d0e1a72626ed', 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: '3fb74be7aefe0ae97476e7458922c730b3f4a02a', class: this.getOverlayClasses(), onClick: this.handleDatepickerClose }, h("div", { key: '131e37c247f88d2d60b3dfaf79210d17d48bcc3e', class: "container", ref: (el) => this.datepickerContainer = el }, h("tet-datepicker-header", { key: '19c7ea536c4368a0c7fdf23ada0f27dc222396a9', selectedDate: this.date, internalDate: this.internalDate, locale: this.locale, datepickerView: this.datepickerView }), this.datepickerView === 'month' &&
-            h("tet-datepicker-month-view", { key: '9f6a4dfc3b95809119f76cedc5e7d777719be5aa', selectedDate: this.date, internalDate: this.internalDate, rangePickerMode: this.rangePickerMode, rangeDates: this.rangeDates }), this.datepickerView === 'multi-year' &&
-            h("tet-datepicker-multi-year-view", { key: '6ed21d6663231cf754aea7d39318e3f7fd2688b1', selectedDate: this.date, internalDate: this.internalDate }), this.datepickerView === 'year' &&
-            h("tet-datepicker-year-view", { key: 'fbbfd9acf7114e46a4340a86073bcdefe1e9caca', selectedDate: this.date, internalDate: this.internalDate }))));
+        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 }))));
     }
     static get is() { return "tet-datepicker"; }
     static get encapsulation() { return "shadow"; }

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

@@ -359,7 +359,7 @@ export class TetDropdown {
     }
     render() {
         const { theme, isOpen, isKeyboardFocus } = this;
-        return (h(Host, { key: 'f827ff643370a151e80d71b630e6160d3e0d9f6a' }, h("div", { key: 'fe6ad17752853b83b7b4d1d9210ec26e36e618fc', class: { 'dropdown': true, 'dropdown--open': isOpen, 'focus-visible': isKeyboardFocus && isOpen, [`${theme}`]: true } }, this.renderButton(), this.renderOptions())));
+        return (h(Host, { key: '562e18e6d7541ae72f276140592f9f1e86bf1dfb' }, h("div", { key: '5bd4df5ed2992ec894cfe6b1b838e0d59d6503c9', class: { 'dropdown': true, 'dropdown--open': isOpen, 'focus-visible': isKeyboardFocus && isOpen, [`${theme}`]: true } }, this.renderButton(), this.renderOptions())));
     }
     static get is() { return "tet-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -225,12 +225,12 @@ export class TetExpandableInput {
         return '';
     }
     render() {
-        return (h(Host, { key: '8ccc4b8abfff3cf163aeeb76d4aa1c99b576fca2', class: { small: this.size === 'small' } }, h("div", { key: '2d8108e130f185b709b632ec20b748a4023b2084', class: {
+        return (h(Host, { key: '966f0c513c9af74accb2c9ac05106ea2fb9b2ec2', class: { small: this.size === 'small' } }, h("div", { key: '3181be4bba55614b2d538469f2d4d7c7a7bfdfd9', class: {
                 container: true,
                 expanded: this.expanded,
                 [this.mode]: true,
                 dark: this.darkMode
-            } }, h("div", { key: '91f42522064a74acdbee6a8ea1c71af85fbb2e30', class: "input-wrapper", ref: (element) => (this.inputWrapper = element) }, h("tet-input", { key: '2d79a8deccb40dceec33366a7126ee9523b39fb2', 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))));
+            } }, 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))));
     }
     static get is() { return "tet-expandable-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -236,8 +236,8 @@ export class TetInput {
      */
     render() {
         const { label, helperText, value, disabled, error, completed, isOpen, suffix } = this;
-        return (h("div", { key: 'c2e6e1a2a1d94ed55de0ac7e45507a5eedb40eeb', class: { 'number-input': true, [this.theme]: !!this.theme,
-                'disabled': disabled, 'error': error, 'completed': completed } }, !!label && (h("label", { key: '5be47d3de72987236c4d9170c73fc671e9e02f2b', class: "number-input__label", htmlFor: "number-input" }, label)), h("div", { key: '97dd4ffd0a98b6809e1d8c0715b5763fa2bf33dc', class: { 'number-input__input-container': true, 'dropdown-open': this.isOpen }, onKeyDown: this.handleContainerKeydown }, h("input", Object.assign({ key: '70861db84737fd5fc172ac30b75e6d8dc4753927', 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: '52173c774b8ef5749533975ce85d114243c7c75a', ref: (htmlInputElement) => (this.inputElementHidden = htmlInputElement), class: "number-input__input-invisible" }, value), !!suffix && h("div", { key: '7d870844289e51ae7cbbed0da7af3d5b2c2335c7', class: "number-input__input-suffix" }, suffix.name), !!this.suffixes && this.suffixes.length > 1 && (h("tet-button", { key: 'b8db5870b392c9c924dc17d5993189b73ed2af94', 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: 'd725f13f0378594e5b0ddb88657b56cbb26df1c6', name: "chevron-down" }), isOpen && h("tet-icon", { key: '4b63c7f23397d22f16c38af6a0b9d01b01ec8707', name: "chevron-up" }))), isOpen && (h("div", { key: '88eea4ebf882cdfaa5941c90b65af793f46a0867', class: "number-input__dropdown", ref: (htmlDivElement) => (this.dropdownElement = htmlDivElement) }, this.renderDropdownContent()))), !!helperText && h("div", { key: 'd3404a7268cf473111665716615f3a725b1a45a1', class: "number-input__helper-text" }, helperText)));
+        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)));
     }
     static get is() { return "tet-number-input"; }
     static get encapsulation() { return "shadow"; }

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: '960043ff4e3eff55a4cb200187e1e41f97ad421c' }, h("div", { key: 'cc913efb32afb59eca65be9cd6cf2356c8c8c3b0', class: {
+        return (h(Host, { key: '115d4713858a8191f69d4f882f5552ac86c09f24' }, h("div", { key: 'fcc88a9260be64f061322ac8e772468f7c74b41a', 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: 'ff6c82cba8e4e8623f1c7c000b3533ff28863c18', class: {
+            } }, h("div", { key: 'c2fd331680eb082efb21b0b13ba08dd13d5c6d56', class: {
                 'range-slider__input-container': true,
                 'hidden': !this.withInput,
-            } }, h("tet-input", Object.assign({ key: 'c5ffab073efa7d2e99a1e9e52ff6bcd4ee3a5627', "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: '73deca081cbb2613789d3ac7e631ac1c8ddc2412', class: "range-slider__container" }, h("tet-button", Object.assign({ key: '1e3b92ab2cb011f7ee484d3e22e2d7c9900dcadf', theme: this.theme, iconMode: true, class: {
+            } }, 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: {
                 '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: '995c95f7b94aa4b63bd836bab691fef617be02c6', name: "remove", class: "range-slider__control--icon" })), h("div", { key: 'ae3803aa1266b2d0a37d67630d6c75823d0753f9', 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: '0a38cdef1f3f35002b1477f6cb09af322e67db93', class: "range-slider__slider-wrapper" }, h("input", Object.assign({ key: '646bd42c751e28f610a51879d57ba56676c08233', 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: 'a603ea874d5f1b477d578ae57e216674bd6d9660', class: "range-slider__track range-slider__track--background" }), h("div", { key: 'd7f30440ac2c5d44469b41a23adaa602cafeb8a2', ref: progressTrackEl => (this.progressTrackRef = progressTrackEl), class: "range-slider__track range-slider__track--progress" }), h("div", { key: '56ba7e8a00136ed2a25b027b268653a9255e95cd', ref: tickContainerEl => (this.tickContainerRef = tickContainerEl), class: "range-slider__tick-container" }), h("div", { key: '77629dfb09ff5f6bdb33aa7a6c7e1ac2e002511d', ref: dataLabelEl => (this.dataLabelRef = dataLabelEl), class: {
+            }, 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: {
                 'range-slider__data-label-container': true,
                 'hidden': this.type === 'secondary' && this.containerSize === 'small',
-            } })), h("div", { key: '96ec0390d7861d6d2f9be30e8aa15dfe5c93f472', class: {
+            } })), h("div", { key: '18b58ea0cd36892dc7d16073737ae5cee5789d62', class: {
                 'range-slider__current-step-container': true,
                 'hidden': !this.withCurrentStepCounter,
-            } }, h("div", { key: 'a8c54149c75bab4579bd6e1685e8d83e49e7853f', class: "range-slider__current-step", "aria-live": "polite" }, this.dataSet.indexOf(this.getClosestOverrideDataPoint()) + 1, "/", this.dataPoints.length)), h("div", { key: '65b128a5e0c6e00b6c022cf6bff39ff58fe0eff3', ref: toolbarHandleEl => (this.tooltipHandleRef = toolbarHandleEl), class: "range-slider__tooltip-handle" }, h("div", { key: '75210ea00429b179e95fbb0b6085a384edcf6977', class: "range-slider__tooltip translation-none", style: { [`--tooltip-offset`]: `${this.tooltipOffset}rem` }, "aria-live": "polite" }, this.getTooltipValue())), h("tet-button", Object.assign({ key: 'dcf9d6f61d5969d3419bc34a3f810cb662c605f1', theme: this.theme, iconMode: true, class: {
+            } }, 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: {
                 '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: '2057bd1c627149d27577f6d5e8d2b8be629afe00', name: "add", class: "range-slider__control--icon" }))))));
+            }, 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" }))))));
     }
     static get is() { return "tet-range-slider"; }
     static get encapsulation() { return "shadow"; }

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: '561128f2d9c2bbcd3b53154ee2a255129990b41e', class: { 'stepper-input': true, [this.theme]: !!this.theme } }, h("tet-button", { key: 'adc69a8506cba05da7194ba13830cc142dde7cfc', 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: 'cfd0ee88e7d8ac415da05afb319f85bd1b0c1e41', name: "remove", onClick: onMinusClick })), h("input", Object.assign({ key: 'bd32e85f8c6c4f4ebdc824d82110898f540dacbd', ref: (htmlInputElement) => (this.inputElement = htmlInputElement), class: "stepper-input__value", value: value, type: "number" }, (this.accessibilityLabel ? { "aria-label": this.accessibilityLabel } : {}))), h("tet-button", { key: 'd506ee6f2f3c2de903475e37b7eb9b76cbaf1007', 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: '3cfff8f0c228caa84221a99c9f1be7438e4e4d6f', name: "add", onClick: onPlusClick }))));
+        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 }))));
     }
     static get is() { return "tet-stepper-input"; }
     static get encapsulation() { return "shadow"; }