@tet/tet-components 1.4.87-testing → 1.4.88-staging

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

@@ -1,8 +1,18 @@
 import { Host, h } from "@stencil/core";
+const breakpointWidths = {
+    df: 360,
+    xs: 500,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    mg: 1440,
+    gg: 1920,
+};
+const breakpointOrder = ['df', 'xs', 'md', 'lg', 'xl', 'mg', 'gg'];
 /**
  * A simple button component.
  *
- * @part button - HTML button element.
+ * @part button - Interactive button or anchor element.
  */
 export class TetButton {
     constructor() {
@@ -21,21 +31,45 @@ export class TetButton {
         this.accessibilityLabel = '';
         this.url = '';
         this.urlTarget = '_self';
+        this.breakpointConfig = {};
+        this.responsiveBreakpointConfig = {};
+    }
+    componentWillLoad() {
+        this.updateResponsiveBreakpointConfig();
+    }
+    onBreakpointConfigChange() {
+        this.updateResponsiveBreakpointConfig();
+    }
+    onWindowResize() {
+        this.updateResponsiveBreakpointConfig();
+    }
+    updateResponsiveBreakpointConfig() {
+        this.responsiveBreakpointConfig = breakpointOrder.reduce((config, breakpoint) => {
+            if (globalThis.innerWidth >= breakpointWidths[breakpoint]) {
+                return { ...config, ...this.breakpointConfig[breakpoint] };
+            }
+            return config;
+        }, {});
+    }
+    getResponsiveButtonProps() {
+        const { iconMode, iconName, size } = this.responsiveBreakpointConfig;
+        return {
+            iconMode: iconMode ?? this.iconMode,
+            iconName: iconName ?? this.iconName,
+            size: size ?? this.size,
+        };
     }
     /**
      * Renders the button content with the icon displayed before or after the text, based on the icon position.
      */
-    renderButtonWithIcon(iconPosition) {
+    renderButtonWithIcon(iconPosition, iconName) {
         if (iconPosition === 'left') {
-            return (h("div", { class: "button__content" }, h("tet-icon", { name: this.iconName }), h("slot", null)));
+            return (h("div", { class: "button__content" }, h("tet-icon", { name: iconName }), h("slot", null)));
         }
-        return (h("div", { class: "button__content" }, h("slot", null), h("tet-icon", { name: this.iconName })));
+        return (h("div", { class: "button__content" }, h("slot", null), h("tet-icon", { name: iconName })));
     }
     handleClick = () => {
         this.clickCallback();
-        if (!this.url)
-            return;
-        window.open(this.url, this.urlTarget, this.urlTarget === '_blank' ? 'noopener,noreferrer' : undefined);
     };
     /** Resolves the supported type based on selected type, colorTheme, and customColorCode. */
     getFallbackType() {
@@ -76,8 +110,8 @@ export class TetButton {
         return theme;
     }
     /** Ensures iconMode has an accessible name by deriving one from iconName when no explicit accessibilityLabel is provided. */
-    getAccessibilityLabel() {
-        const { accessibilityLabel, iconMode, iconName } = this;
+    getAccessibilityLabel(iconMode, iconName) {
+        const { accessibilityLabel } = this;
         if (accessibilityLabel) {
             return accessibilityLabel;
         }
@@ -91,23 +125,37 @@ export class TetButton {
         const { customColorCode, type, customColorContentTone } = this;
         return !!customColorCode && type === 'primary' && customColorContentTone === 'dark';
     }
+    renderButtonContent(iconName) {
+        return iconName
+            ? this.renderButtonWithIcon(this.iconPosition, iconName)
+            : h("slot", null);
+    }
+    renderIconModeButtonContent(iconName) {
+        return iconName
+            ? h("tet-icon", { name: iconName })
+            : h("slot", null);
+    }
     render() {
-        const accessibilityLabel = this.getAccessibilityLabel();
-        return (h(Host, { key: '7a813e11fad92ef7d4011e75deb7e8c7ce76df58' }, h("button", { key: '766e3e634e2b6273170b1e6ae30e83a5f336f0a6', part: "button", onClick: this.handleClick, id: this.elementId, style: this.customColorCode ? { '--button-custom-color': this.customColorCode } : undefined, class: {
-                button: true,
-                [`button--${this.size}`]: true,
-                [`button--type-${this.getFallbackType()}`]: true,
-                [`button--${this.getFallbackTheme()}-theme`]: true,
-                [`button--color-theme-${this.colorTheme}`]: !!this.colorTheme && !this.customColorCode,
-                'button--custom-color': !!this.customColorCode,
-                'button--custom-color-content-dark': this.shouldApplyDarkCustomColorContentClass(),
-                'button--icon-mode': this.iconMode,
-                'button--with-icon': !!this.iconName,
-            }, disabled: this.disabled, ...(accessibilityLabel ? { 'aria-label': accessibilityLabel } : {}), tabindex: 0 }, (!!this.iconName && this.iconMode)
-            ? h("tet-icon", { name: this.iconName })
-            : !!this.iconName
-                ? this.renderButtonWithIcon(this.iconPosition)
-                : h("slot", null))));
+        const { iconMode, iconName, size } = this.getResponsiveButtonProps();
+        const accessibilityLabel = this.getAccessibilityLabel(iconMode, iconName);
+        const buttonContent = iconMode
+            ? this.renderIconModeButtonContent(iconName)
+            : this.renderButtonContent(iconName);
+        const buttonClass = {
+            button: true,
+            [`button--${size}`]: true,
+            [`button--type-${this.getFallbackType()}`]: true,
+            [`button--${this.getFallbackTheme()}-theme`]: true,
+            [`button--color-theme-${this.colorTheme}`]: !!this.colorTheme && !this.customColorCode,
+            'button--custom-color': !!this.customColorCode,
+            'button--custom-color-content-dark': this.shouldApplyDarkCustomColorContentClass(),
+            'button--icon-mode': iconMode,
+            'button--with-icon': !!iconName,
+        };
+        const buttonStyle = this.customColorCode ? { '--button-custom-color': this.customColorCode } : undefined;
+        return (h(Host, { key: 'e4b89acbdf28b4af3f754b69273a770ff13b972d' }, this.url
+            ? h("a", { part: "button", onClick: this.handleClick, id: this.elementId, style: buttonStyle, class: buttonClass, href: this.url, target: this.urlTarget, rel: this.urlTarget === '_blank' ? 'noopener noreferrer' : undefined, "aria-label": accessibilityLabel || undefined, tabindex: 0 }, buttonContent)
+            : h("button", { part: "button", onClick: this.handleClick, id: this.elementId, style: buttonStyle, class: buttonClass, disabled: this.disabled, "aria-label": accessibilityLabel || undefined, tabindex: 0 }, buttonContent)));
     }
     static get is() { return "tet-button"; }
     static get encapsulation() { return "shadow"; }
@@ -350,7 +398,7 @@ export class TetButton {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The ID of the button"
@@ -411,7 +459,49 @@ export class TetButton {
                 "attribute": "url-target",
                 "reflect": false,
                 "defaultValue": "'_self'"
+            },
+            "breakpointConfig": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "BreakpointMap",
+                    "resolved": "{ xs?: BreakpointConfig; lg?: BreakpointConfig; df?: BreakpointConfig; md?: BreakpointConfig; xl?: BreakpointConfig; mg?: BreakpointConfig; gg?: BreakpointConfig; }",
+                    "references": {
+                        "BreakpointMap": {
+                            "location": "local",
+                            "path": "/__w/internal-tet-web-components-tet-components/internal-tet-web-components-tet-components/src/src/components/basic/buttons/tet-button/tet-button.tsx",
+                            "id": "src/components/basic/buttons/tet-button/tet-button.tsx::BreakpointMap"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Configures button properties for specific responsive breakpoints."
+                },
+                "defaultValue": "{}"
             }
         };
     }
+    static get states() {
+        return {
+            "responsiveBreakpointConfig": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "breakpointConfig",
+                "methodName": "onBreakpointConfigChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "onWindowResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
 }

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

@@ -83,22 +83,22 @@ export class TetCheckbox {
     }
     render() {
         const { label, name, checked, value, disabled, error, iconName, labelFont, alignCenter, hasSlotIcon, accessibilityLabel, unavailable, iconType } = this;
-        return (h(Host, { key: '3922531c26c2a95cd70d35d9c7b6b4255cfa01ce' }, h("div", { key: 'ccbe25bfe034a709ae877dfbf824f54ab2329d2b', class: { checkbox: true, [`${this.theme}`]: true } }, h("label", { key: '1bc6d87209a17fd540784451d41213c7f5ad4cd4', class: {
+        return (h(Host, { key: 'ec3de0f2af0b8485daf484d93ce1f47a26d95286' }, h("div", { key: '30c99c77026d923fe94acf2ca296aa9aa05a1f0b', class: { checkbox: true, [`${this.theme}`]: true } }, h("label", { key: 'f1974c14dcf1072a5e9db59658da14a7bf5c2e20', class: {
                 'checkbox__container': true,
                 'checkbox__container--focus-style': this.focusStyleOnContainer,
                 'checkbox__container--align-start': !alignCenter,
-            }, part: "checkbox-container", htmlFor: "tet-checkbox" }, h("input", { key: '6e25dc5ea506333fe5238ed5d5e6143bcdf4719c', ref: (el) => (this.inputEl = el), class: {
+            }, part: "checkbox-container", htmlFor: "tet-checkbox" }, h("input", { key: 'e33d9d5e5edd7fc9e59928692ed3ba80abafb1da', ref: (el) => (this.inputEl = el), class: {
                 "checkbox__html-input": true,
                 'checkbox__html-input--unavailable': unavailable,
-            }, id: "tet-checkbox", type: "checkbox", name: name, value: value, ...(accessibilityLabel ? { 'aria-label': accessibilityLabel } : {}), disabled: disabled || unavailable, checked: checked, onChange: this.handleChange }), h("span", { key: 'dbe0baed06f4cfab9b65eba564e2fbfcdf21d1f1', class: {
+            }, id: "tet-checkbox", type: "checkbox", name: name, value: value, ...(accessibilityLabel ? { 'aria-label': accessibilityLabel } : {}), disabled: disabled || unavailable, checked: checked, onChange: this.handleChange }), h("span", { key: 'f7fe83d1fc10349e1d9fda3ccb3e271db0e079bd', class: {
                 'checkbox__input-background': true,
                 ...(labelFont ? { [`checkbox__input-background--${labelFont}`]: true } : {}),
-            } }), h("span", { key: '21d052d31b84c94d40217a2f60eebe40d5c424d4', class: {
+            } }), h("span", { key: '10de8980b97aba5de42e434d50f0608a94e211f3', class: {
                 'checkbox__input': true,
                 'checkbox__input--error': error,
                 'checkbox__input--hide-focus-style': this.focusStyleOnContainer,
                 ...(labelFont ? { [`checkbox__input--${labelFont}`]: true } : {}),
-            } }, h("tet-icon", { key: 'a86ad8e26933d87cd1294e9ee0c536a760404d05', name: "remove", class: "checkbox__icon checkbox__icon--indeterminate indicator" }), h("tet-icon", { key: 'd4686d2a78f158cf8f2107751161bf433604b8c3', name: "check", class: "checkbox__icon" })), h("div", { key: 'a030dc5e25a685c5af0a71a91c0be6d283f5fef9', class: "checkbox__label-container" }, iconName ? (h("tet-icon", { theme: this.theme === 'light' ? 'light' : 'dark', name: iconName, type: iconType, class: {
+            } }, h("tet-icon", { key: 'c9277b8f28f4c47854c2195e0684720f34bd890e', name: "remove", class: "checkbox__icon checkbox__icon--indeterminate indicator" }), h("tet-icon", { key: '925161d8a310b4e11e9933598b8178b2a467e48c', name: "check", class: "checkbox__icon" })), h("div", { key: 'f50050b33fe6870f5ce3d66d75f689053d3243bb', class: "checkbox__label-container" }, iconName ? (h("tet-icon", { theme: this.theme === 'light' ? 'light' : 'dark', name: iconName, type: iconType, class: {
                 'checkbox__label-icon': true,
                 [`checkbox__label-icon--${iconName}`]: true,
                 ...(labelFont ? { [`checkbox__label-icon--${labelFont}`]: true } : {}),
@@ -106,10 +106,10 @@ export class TetCheckbox {
                 'checkbox__label-slot-icon': true,
                 'checkbox__label-slot-icon--hidden': !hasSlotIcon,
                 ...(labelFont ? { [`checkbox__label-slot-icon--${labelFont}`]: true } : {}),
-            } }, h("slot", { name: "label-icon", onSlotchange: this.onIconSlotChange }))), h("span", { key: 'dc8c5788a68465ede9f07fc867c81edda2c6461f', class: {
+            } }, h("slot", { name: "label-icon", onSlotchange: this.onIconSlotChange }))), h("span", { key: '840768a72ccfd4d8f8a71c85008246cb6a49396c', class: {
                 'checkbox__label': true,
                 ...(labelFont ? { [`checkbox__label--${labelFont}`]: true } : {}),
-            }, innerHTML: label }, h("slot", { key: '090985367d24c7ccea904a369300513cf85ff6fa' })))))));
+            }, innerHTML: label }, h("slot", { key: 'abe6baa60f9f7dc6d94cad02c664cdad501c5f62' })))))));
     }
     static get is() { return "tet-checkbox"; }
     static get encapsulation() { return "shadow"; }

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

@@ -99,24 +99,24 @@ export class TetRadio {
     }
     render() {
         const { id, disabled, value, checked, name, label, accessibilityLabel, error, inputAutofocus, iconName, labelFont, alignCenter, hasSlotIcon, unavailable, iconType } = this;
-        return (h(Host, { key: 'c2ba713dff6507e129a00e73bd769476ac99aab3' }, h("div", { key: '30e3a1a3b10e85f61d5fd5f24f04fe687637e6d6', class: { radio: true, [`radio-${this.theme}-theme`]: true } }, h("label", { key: '30daaeba312595817fe240e8622acf21028badcd', class: {
+        return (h(Host, { key: '044bed922df2605146b724df6c07bd1262c624c6' }, h("div", { key: '93f6e7e407a7aa9314a97adf0bdcbacdf2d4598a', class: { radio: true, [`radio-${this.theme}-theme`]: true } }, h("label", { key: 'fbbaedb8aa60f1e41d22084b4936ece65dcf6de6', class: {
                 'radio__container': true,
                 'radio__container--focus-style': this.focusStyleOnContainer,
                 'radio__container--align-center': alignCenter,
-            }, htmlFor: id }, h("input", { key: '3fef4f5f39674f695fba7c4bff78e515c0eced50', class: {
+            }, htmlFor: id }, h("input", { key: '1c313e9d39c542d004a7d986455d43b202e4430e', class: {
                 "radio__html-input": true,
                 'radio__html-input--unavailable': unavailable,
-            }, id: id, name: name, type: "radio", value: value, disabled: disabled || unavailable, checked: checked, onChange: this.handleInputChange, autofocus: inputAutofocus, ...(accessibilityLabel ? { 'aria-label': accessibilityLabel } : {}) }), h("span", { key: '956dcb460b4afe17959e246a73b8031f71aeec98', class: {
+            }, id: id, name: name, type: "radio", value: value, disabled: disabled || unavailable, checked: checked, onChange: this.handleInputChange, autofocus: inputAutofocus, ...(accessibilityLabel ? { 'aria-label': accessibilityLabel } : {}) }), h("span", { key: '7f5cef267fae409fa6902096b7a4b308f8ea178e', class: {
                 'radio__input-background': true,
                 'radio__input-background--has-label-prop': !!label,
                 ...(labelFont ? { [`radio__input-background--${labelFont}`]: true } : {}),
-            } }), h("span", { key: '26c562b40f078a9542f4ba2d864c170ef1107358', class: {
+            } }), h("span", { key: 'adc802363f3556df97467aeecf478aae3c2e48d4', class: {
                 'radio__input': true,
                 'radio__input--error': error,
                 'radio__input--hide-focus-style': this.focusStyleOnContainer,
                 'radio__input--has-label-prop': !!label,
                 ...(labelFont ? { [`radio__input--${labelFont}`]: true } : {}),
-            } }), h("div", { key: 'cded25c1d16c6ea1c6da14aa09d9e961080ef81b', class: {
+            } }), h("div", { key: 'c697a26327fe81b39091649da7599091f1601c30', class: {
                 'radio__label-container': true,
                 'radio__label-container--line-height': hasSlotIcon || !!iconName,
             } }, iconName ? (h("tet-icon", { theme: ['classic', 'light'].includes(this.theme) ? 'light' : 'dark', name: iconName, type: iconType, class: {
@@ -127,11 +127,11 @@ export class TetRadio {
                 'radio__label-slot-icon': true,
                 'radio__label-slot-icon--hidden': !hasSlotIcon,
                 ...(labelFont ? { [`radio__label-slot-icon--${labelFont}`]: true } : {}),
-            } }, h("slot", { name: "label-icon" }))), h("span", { key: '772069369f03124021242c9280ccd4ea85deb8dd', class: {
+            } }, h("slot", { name: "label-icon" }))), h("span", { key: '12bec614da0085a66d4def197bd656e119b2743e', class: {
                 'radio__label': true,
                 'radio__label--has-slot-icon': hasSlotIcon,
                 ...(labelFont ? { [`radio__label--${labelFont}`]: true } : {}),
-            }, innerHTML: label }, h("slot", { key: 'fcf235453f9881465d1a9b273339324ae9a073fe' })))))));
+            }, innerHTML: label }, h("slot", { key: '75fc6c14b139b6f3298b8ffa2fd4b80ffbf4249b' })))))));
     }
     static get is() { return "tet-radio"; }
     static get encapsulation() { return "scoped"; }

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

@@ -54,7 +54,7 @@ export class TetRadioBlocks {
     }
     render() {
         const { theme, blocks } = this;
-        return (h(Host, { key: '9a1ac5080500e16dcd35a5deb34ee34c4c922906' }, h("div", { key: '7da20eddef3919e7a10651a67e26da5935907482', class: {
+        return (h(Host, { key: 'e1f32a693a04facdc73ee50fb492259314f15512' }, h("div", { key: 'bd8efca139630add4901c936bddff4eeddc22a0d', class: {
                 'radio-block__container': true,
                 [`radio-block-${theme}-theme`]: true,
                 [`row-of-${this.blocksPerRow}`]: !!this.blocksPerRow

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

@@ -46,16 +46,16 @@ export class TetSwitch {
     }
     render() {
         const { label, name, theme, disabled, checked, accessibilityLabel, labelFont, alignCenter, labelPosition } = this;
-        return (h(Host, { key: 'd6eceefd783c4583c27ec2367c98ca11e9d62ac9' }, h("div", { key: 'c1b3981427839f9a31cea2a4571e802122ea6883', class: { 'switch': true, [`${theme}`]: true } }, h("label", { key: '45616f538a6d3d467ebfd30c8cbd1962140a1a4f', class: {
+        return (h(Host, { key: '87b48fda4b73c6b0970c162e37871664028c94bc' }, h("div", { key: '4c3fcb25433dc75862fe7846bdee5e9d6a4a7086', class: { 'switch': true, [`${theme}`]: true } }, h("label", { key: 'cc6b10c3051088e545de10327a3e823482717710', class: {
                 'switch__container': true,
                 'switch__container--align-start': !alignCenter,
                 [`switch__container--${labelFont}`]: true,
                 'switch__container--focus-style': this.focusStyleOnContainer,
-            }, part: "switch-container", htmlFor: "tet-switch" }, h("input", { key: '16f7e5822aef5e897db26b5f4c683387c9511370', class: "switch__html-input", name: name, id: "tet-switch", type: "checkbox", disabled: disabled, checked: checked, onChange: this.handleChange.bind(this), ...(accessibilityLabel ? { "aria-label": accessibilityLabel } : {}) }), labelPosition === 'right' && this.renderSwitch(), h("span", { key: 'ea7b7194ee194a61e155b4f65248117dd8563408', class: {
+            }, part: "switch-container", htmlFor: "tet-switch" }, h("input", { key: 'b4d928ec795a933aeaee350f40009952748ee0ce', class: "switch__html-input", name: name, id: "tet-switch", type: "checkbox", disabled: disabled, checked: checked, onChange: this.handleChange.bind(this), ...(accessibilityLabel ? { "aria-label": accessibilityLabel } : {}) }), labelPosition === 'right' && this.renderSwitch(), h("span", { key: '92b15df23f6c5a1ece1c95a7eda0aca7b2b93e7f', class: {
                 'switch__label': true,
                 ...(labelPosition === 'left' ? { 'switch__label--left': true } : {}),
                 ...(labelFont ? { [`switch__label--${labelFont}`]: true } : {}),
-            }, innerHTML: label }, h("slot", { key: 'eaba8585196f3ba5f4efdd09bf06e0e41360f835' })), labelPosition === 'left' && this.renderSwitch()))));
+            }, innerHTML: label }, h("slot", { key: '854b1f777f53115dfa3a12ce707647272ecb31eb' })), labelPosition === 'left' && this.renderSwitch()))));
     }
     static get is() { return "tet-switch"; }
     static get encapsulation() { return "shadow"; }

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

@@ -161,11 +161,11 @@ export class TetTabContent {
         this.selectedId = id;
     }
     render() {
-        return (h(Host, { key: '591625c8c2a45eb2bab3a48457159b6f84c53c84' }, h("div", { key: '711685eeda5c10cb51ed61bdc923f4c2add2cd04', class: {
+        return (h(Host, { key: '2bb3c9eb29e7d1af040e19df576c465dc70e15a2' }, h("div", { key: 'bcbd0c25a1ac76a653e5cc4901fe3df7e36eb4a4', class: {
                 'tet-tab-content': true,
                 'use-visibility': this.useVisibility,
                 [this.theme]: true
-            } }, h("slot", { key: 'df24dc9b2e60d501e6643f2486e5d44a6626f73f' }))));
+            } }, h("slot", { key: 'fedc25761ccc5281b6b5f866bbb4eb6c7f618057' }))));
     }
     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

@@ -652,7 +652,7 @@ export class TetTabHeader {
     }
     render() {
         const shouldRenderOverflowGradients = this.showOverflowGradients;
-        return (h(Host, { key: '066ac0cb29060dbf7e6b88e0170d2f3cd47c8b76', "data-id-suffix": this.idSuffix }, h("div", { key: '8e664aece15cbc58b9c39e2a879f504489e62e8e', class: {
+        return (h(Host, { key: '7ec1139f579ef209df0af5bb1a0c2c318441aa35', "data-id-suffix": this.idSuffix }, h("div", { key: '46912061c10409706acaf76a5814622ae201e198', class: {
                 'tabs': true,
                 'tabs--segmented': this.segmented,
                 'tabs--disabled': this.isSwitchDisabled,
@@ -662,7 +662,7 @@ export class TetTabHeader {
                 [this.theme]: true,
                 [this.sizing]: true,
                 [this.type]: !!this.type
-            }, onMouseDown: this.onContainerMouseDown, style: this.getStyle(), ref: (ref) => (this.tabElement = ref), role: this.isSwitchMode ? 'radiogroup' : 'tablist', "aria-label": this.isSwitchMode && this.accessibilityLabel ? this.accessibilityLabel : undefined, "aria-orientation": this.isSwitchMode ? 'horizontal' : undefined, "aria-disabled": this.isSwitchDisabled ? 'true' : undefined }, shouldRenderOverflowGradients && h("div", { key: '4c9ae2fbe2bf27d7cc91bbc8ce55c3e9d7469a3b', class: "tabs-gradient tabs-gradient-left", "aria-hidden": "true" }), h("slot", { key: '677d35c1979329dc6271f231ca554ca58ed4924f', onSlotchange: () => this.updatePositionClass(), ref: (slot) => (this.tabContainer = slot) }), shouldRenderOverflowGradients && h("div", { key: '5a265eba7ef003aa87fe6bdf55ea9f596cbccfa2', class: "tabs-gradient tabs-gradient-right", "aria-hidden": "true" })), h("div", { key: '76e09c8fc61c1a6adc5d00224caf73869af66d57', class: {
+            }, onMouseDown: this.onContainerMouseDown, style: this.getStyle(), ref: (ref) => (this.tabElement = ref), role: this.isSwitchMode ? 'radiogroup' : 'tablist', "aria-label": this.isSwitchMode && this.accessibilityLabel ? this.accessibilityLabel : undefined, "aria-orientation": this.isSwitchMode ? 'horizontal' : undefined, "aria-disabled": this.isSwitchDisabled ? 'true' : undefined }, shouldRenderOverflowGradients && h("div", { key: '77dd73bfb3eb00358c1f5dea34e2cedf8d4a998d', class: "tabs-gradient tabs-gradient-left", "aria-hidden": "true" }), h("slot", { key: '7eff26bd0244486f28be39bb64245c3ef8dee0fb', onSlotchange: () => this.updatePositionClass(), ref: (slot) => (this.tabContainer = slot) }), shouldRenderOverflowGradients && h("div", { key: 'a1c5faa59e7f3a62f8062ec2dc74706e35f7f766', class: "tabs-gradient tabs-gradient-right", "aria-hidden": "true" })), h("div", { key: 'cca3b3b98de15f8367720adf3d74b140f50c7d5a', class: {
                 'tabs-line': !this.segmented,
                 'no-underline': this.hideHeaderUnderline || this.isScrollableType,
                 [this.theme]: true

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

@@ -14,18 +14,19 @@ export class TetTag {
         this.language = 'lv';
     }
     async onLanguageChange(language) {
-        processTranslations('tet-components', language).then(() => forceUpdate(this));
+        await processTranslations('tet-components', language);
+        forceUpdate(this);
     }
     async componentWillLoad() {
-        processTranslations('tet-components', this.language).then(() => forceUpdate(this));
+        await processTranslations('tet-components', this.language);
     }
     render() {
-        return (h(Host, { key: '391dd9b3c6f14148b3784a10e6f47c463dcb2ffe' }, h("button", { key: '01e3796e90f6d63cc5544f4611063a25895da934', class: {
+        return (h(Host, { key: '834e40e0b73ed2ef306cc4668a36d721cbe16f4c' }, h("button", { key: '79f527946ef083d4d3ff8980d58ed9369ee1c354', class: {
                 tag: true,
                 'tag-active': this.active,
                 'tag--icon': this.showIcon,
                 [`theme-${this.theme}`]: true,
-            }, "aria-pressed": this.active.toString(), disabled: this.disabled }, this.tagTitle && h("p", { key: '28589d1d7bc4f621968dd30042c5ac988ff48c93', class: "tag-title" }, t(this.tagTitle)), this.count !== null && this.count !== undefined && h("span", { key: 'fd40980c43d822c1f4c1e7038b12aed0c2756f32', class: "tag-count" }, this.count), this.showIcon && h("tet-icon", { key: '381f348df9d50e87dd606042461c62464a1b7205', class: "tag-icon", name: "close-circle", part: "icon-selected" }))));
+            }, "aria-pressed": this.active.toString(), disabled: this.disabled }, this.tagTitle && h("p", { key: '1d6de3657a9ddb4405a216ad81b6b3f79a0241d4', class: "tag-title" }, t(this.tagTitle)), this.count !== null && this.count !== undefined && h("span", { key: '04ef1bafee80a43066ff8dcbf00f7d70dbba4a75', class: "tag-count" }, this.count), this.showIcon && h("tet-icon", { key: '79ec1e1fe535722dcbab51456c85e9e169da0b6c', 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/carousel/tet-carousel/tet-carousel.js

@@ -3,7 +3,7 @@ import { processTranslations, t } from "../../../../services/translations/index"
 export class TetCarousel {
     constructor() {
         this.activeDotIndex = 0;
-        this.dotCount = 0;
+        this.dotCount = 1;
         this.totalItems = 0;
         this.activeItem = 0;
         this.isDragging = false;
@@ -68,11 +68,9 @@ export class TetCarousel {
         }
         catch { }
     }
-    syncTranslations(language) {
-        processTranslations('tet-components', language).then(() => this.safeForceUpdate());
-    }
-    onLanguageChange(language) {
-        this.syncTranslations(language);
+    async onLanguageChange(language) {
+        await processTranslations('tet-components', language);
+        this.safeForceUpdate();
     }
     onActiveItemChange() {
         this.updateSlideFocusableTabIndexes();
@@ -111,8 +109,8 @@ export class TetCarousel {
         this.syncNudgeGradientLoop();
         this.checkGradient();
     }
-    componentWillLoad() {
-        this.syncTranslations(this.language);
+    async componentWillLoad() {
+        await processTranslations('tet-components', this.language);
     }
     getSlotElements() {
         const slot = this.container?.querySelector('slot');
@@ -934,22 +932,22 @@ export class TetCarousel {
                 trackTransition = 'none';
             }
         }
-        return (h(Host, { key: '1dd8589a8215e2ec8b3b5da6890eb0832d394997' }, h("div", { key: '3a45655dc33c50ce1d075088540b18d6138dfd43', class: { 'tet-carousel': true, [`${this.theme}`]: true, 'tet-carousel--unified-buttons': this.unifiedButtons }, ref: (el) => (this.container = el), part: "carousel" }, h("div", { key: 'cd9ab06b3529a8199a49ab6b917d6d59d3998cd3', class: "tet-carousel__container" }, h("div", { key: '326afd8aad07a33316bc25e1a07275b6915aa1bd', class: "tet-carousel__gradient-left", ref: (el) => {
+        return (h(Host, { key: 'ad132abf1f4de351587972348634b90e76e22ab3' }, h("div", { key: '086d8d972fca9cc528b2dedb8f900ca1a17d4611', class: { 'tet-carousel': true, [`${this.theme}`]: true, 'tet-carousel--unified-buttons': this.unifiedButtons }, ref: (el) => (this.container = el), part: "carousel" }, h("div", { key: '13587675acf78a9161d73a26ba0ea7b8b9d143fb', class: "tet-carousel__container" }, h("div", { key: 'decb3ff4c21e68ec1c411dad2ba9cff96f005d34', class: "tet-carousel__gradient-left", ref: (el) => {
                 this.leftGradientRef = el;
-            } }), h("div", { key: '1394d06295894f5a81c85da444da62abdf914a79', class: "tet-carousel__gradient-right", ref: (el) => {
+            } }), h("div", { key: '0cd620f52647b335f18895707d4ab3a3163b2b5b', class: "tet-carousel__gradient-right", ref: (el) => {
                 this.rightGradientRef = el;
-            } }), h("div", { key: '3aadd879ce7ec407f58d99fcd712fa976e3f5f10', class: `tet-carousel__track ${showControls ? '' : 'tet-carousel__track--center'}`, ref: (el) => (this.trackElement = el), style: {
+            } }), h("div", { key: '831c329f8e452cf9335dc28b53984c08f1c9c88b', class: `tet-carousel__track ${showControls ? '' : 'tet-carousel__track--center'}`, ref: (el) => (this.trackElement = el), style: {
                 transform: `translate3d(${this.dragOffset}px, 0, 0)`,
                 transition: trackTransition,
                 willChange: 'transform'
-            }, onPointerDown: this.onPointerDown, onPointerUp: this.onPointerUp }, h("div", { key: 'c1a86897a403f2b2e296cf5be66240507ef6056c', class: {
+            }, onPointerDown: this.onPointerDown, onPointerUp: this.onPointerUp }, h("div", { key: 'a95a6f779918bb2d21bfa177792af358852d1866', class: {
                 'tet-carousel__track-content': true,
                 'tet-carousel__track-content--nudge': this.isNudgeAnimating
             }, ref: (el) => (this.trackContentElement = el), style: {
                 '--tet-carousel-nudge-distance': `${TetCarousel.NUDGE_DISTANCE_PX}px`
-            }, onAnimationEnd: this.onNudgeAnimationEnd }, h("slot", { key: 'a21d8148e60bcb06ae0449b6e9c78091ee576942' })))), !!this.label && h("div", { key: 'eeb218a23d25bf099e50020d23ffb3c13577c989', class: "tet-carousel__label" }, this.label), showControls && (h("div", { key: '24f1a2fb4f5d1dd951994f6cd6e66c6837b9f44e', class: "tet-carousel__controls" }, showButtons && (h("div", { key: '9007741c53cefde7cf8405ff120f54d4a69b51b6', class: "tet-carousel__buttons tet-carousel__buttons--mobile", ref: (el) => (this.mobileBackButtonWrapper = el) }, h("tet-button", { key: '264e1436e8b55e8f0ac98f3b19c4be9467648ff2', theme: this.theme, type: "secondary", size: "medium", "icon-name": this.buttonIconLeft, "icon-mode": true, onPointerDown: (e) => e.stopPropagation(), onClick: () => this.handlePrev(), accessibilityLabel: t('components-carousel-previous'), disabled: this.isLeftNavigationDisabled() }))), showDots && (h("div", { key: 'fbf2694153420fbcd3242cdd399e74f54ca955a9', class: "tet-carousel__dots" }, Array.from({ length: this.dotCount }).map((_, idx) => (h("button", { type: "button", tabIndex: idx === this.activeDotIndex ? 0 : -1, class: `tet-carousel__dot${idx === this.activeDotIndex ? ' active' : ''}`, key: idx, "aria-label": `${idx === this.activeDotIndex
+            }, onAnimationEnd: this.onNudgeAnimationEnd }, h("slot", { key: '4e6536f4edf8a196e98bf799978aa23913d5fc5d' })))), !!this.label && h("div", { key: 'afa6d0a9d4b790b04fa38c32fe9400ecd8be7ab2', class: "tet-carousel__label" }, this.label), showControls && (h("div", { key: 'cb506ebda9394b6adb726d00ce7b8a34f47da595', class: "tet-carousel__controls" }, showButtons && (h("div", { key: '39e427155bf759235e4606c73a64f67331fb178f', class: "tet-carousel__buttons tet-carousel__buttons--mobile", ref: (el) => (this.mobileBackButtonWrapper = el) }, h("tet-button", { key: '06740a3682c2ceedc22c41389a5865c9533659dd', theme: this.theme, type: "secondary", size: "medium", "icon-name": this.buttonIconLeft, "icon-mode": true, onPointerDown: (e) => e.stopPropagation(), onClick: () => this.handlePrev(), accessibilityLabel: t('components-carousel-previous'), disabled: this.isLeftNavigationDisabled() }))), showDots && (h("div", { key: 'd6757681663a2271946d76c335536e722b8a1c20', class: "tet-carousel__dots" }, Array.from({ length: this.dotCount }).map((_, idx) => (h("button", { type: "button", tabIndex: idx === this.activeDotIndex ? 0 : -1, class: `tet-carousel__dot${idx === this.activeDotIndex ? ' active' : ''}`, key: idx, "aria-label": `${idx === this.activeDotIndex
                 ? t('components-carousel-indicator-button-active')
-                : t('components-carousel-indicator-button')} ${idx + 1}/${this.dotCount}`, "aria-current": idx === this.activeDotIndex ? 'true' : undefined, onPointerDown: (e) => e.stopPropagation(), onKeyDown: (event) => this.handleDotKeyDown(event, idx), onClick: () => this.handleDotClick(idx) }))))), showButtons && (h("div", { key: 'b8dadaa6912860ac7735a7b087c25ecd1c8493a5', class: "tet-carousel__buttons" }, h("tet-button", { key: 'e46ec9996b8bb408a5a9fde95f3085ce42fc01a8', class: "tet-carousel__buttons--desktop", theme: this.theme, type: "secondary", size: "medium", "icon-name": this.buttonIconLeft, "icon-mode": true, onPointerDown: (e) => e.stopPropagation(), onClick: () => this.handlePrev(), accessibilityLabel: t('components-carousel-previous'), disabled: this.isLeftNavigationDisabled() }), h("tet-button", { key: '63a2f1d82f42384c8f9c24f67a81132585b35aa9', theme: this.theme, type: "secondary", size: "medium", "icon-name": this.buttonIconRight, "icon-mode": true, onPointerDown: (e) => e.stopPropagation(), onClick: () => this.handleNext(), accessibilityLabel: t('components-carousel-next'), disabled: this.isRightNavigationDisabled() }))))))));
+                : t('components-carousel-indicator-button')} ${idx + 1}/${this.dotCount}`, "aria-current": idx === this.activeDotIndex ? 'true' : undefined, onPointerDown: (e) => e.stopPropagation(), onKeyDown: (event) => this.handleDotKeyDown(event, idx), onClick: () => this.handleDotClick(idx) }))))), showButtons && (h("div", { key: '4cdceb1e8341d5ef1f486908ce20b76d49aa3670', class: "tet-carousel__buttons" }, h("tet-button", { key: '2d813f6f52864d5c03c06e95488f8042e612c225', class: "tet-carousel__buttons--desktop", theme: this.theme, type: "secondary", size: "medium", "icon-name": this.buttonIconLeft, "icon-mode": true, onPointerDown: (e) => e.stopPropagation(), onClick: () => this.handlePrev(), accessibilityLabel: t('components-carousel-previous'), disabled: this.isLeftNavigationDisabled() }), h("tet-button", { key: '5abab060727a1603f24d700be1ec8887b9be80d5', theme: this.theme, type: "secondary", size: "medium", "icon-name": this.buttonIconRight, "icon-mode": true, onPointerDown: (e) => e.stopPropagation(), onClick: () => this.handleNext(), accessibilityLabel: t('components-carousel-next'), disabled: this.isRightNavigationDisabled() }))))))));
     }
     static get is() { return "tet-carousel"; }
     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: '7932523b6f1e330481a2ebe5bfb6d63d2beb1a2a', class: {
+        return (h("div", { key: '7efb553e36c48eb50dc40fab7b29edbb7345b6c2', class: {
                 'container': true,
                 'container--highlightable': this.highlightable,
                 'container--selected': this.selected,
                 [`container--${this.theme}`]: this.theme !== 'classic',
-            }, part: "container" }, h("slot", { key: '939c53084b211743aa1eec537843795ad2b22f64' })));
+            }, part: "container" }, h("slot", { key: '900e0239bb079cac83b7414c8c87fa255af37eac' })));
     }
     static get is() { return "tet-container"; }
     static get encapsulation() { return "shadow"; }

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

@@ -70,7 +70,7 @@ export class TetIcon {
     }
     ;
     render() {
-        return (h("span", { key: 'b30b0bbad15f131c88f4b270e4d2c506e0a4ddf8', class: "icon-wrapper", tabindex: (this.focusable || this.accessibilityLabel) ? 0 : -1 }, h("span", { key: 'b8785798af62392bc9e3a54b47901b9542aec188', class: {
+        return (h("span", { key: '24303705739dc26a12cb9985194981a1a7c9ead4', class: "icon-wrapper", tabindex: (this.focusable || this.accessibilityLabel) ? 0 : -1 }, h("span", { key: 'b06f6e3c104432472d61e539a3b0f52c76fab78b', class: {
                 'icon-container': true,
                 'default-color': this.shouldUseDefaultColor(),
                 [this.theme]: true,

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: 'abd0af703c970bde9a51884ccc9f360c5a9b59bb', class: "loader" }, h("div", { key: '1d41f42112600ab6dd76eb0fc89fbefcd16cffd4', class: "loader-inner" })));
+        return (h("div", { key: 'dddd5219c590f05b85d7bf63c48583d9076a9f54', class: "loader" }, h("div", { key: '12a30bd690d44ffaff95d871f4a874db85c99c37', 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: '8ca0a953a395836484890b1f48b3d121239e2dce', style: { width: this.width, height: this.height } }, h("div", { key: 'fb14faf4e860c6fe6a4c464c1f5a79b56b70b241', class: { 'placeholder': true, 'dark-theme': this.darkTheme }, style: { height: this.height } })));
+        return (h(Host, { key: 'fc3198f44f5c197c90bf8f6e652e7da7dc4d08b9', style: { width: this.width, height: this.height } }, h("div", { key: '5fbe8f34374b9c42ee237dbfa2a3151bfb4b0ed1', class: { 'placeholder': true, 'dark-theme': this.darkTheme }, 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

@@ -48,13 +48,13 @@ export class TetSpinner {
         foreignObject.setAttribute('clip-path', 'url(#clip)');
     };
     render() {
-        return (h("div", { key: '6b4b47133e361c44f8897255635ef17de6b081ba', ref: element => (this.spinner = element), class: {
+        return (h("div", { key: '60fe0f21e1111e99479a22dcbdc835e0c54d284f', ref: element => (this.spinner = element), class: {
                 spinner: true,
                 [`${this.theme}-theme`]: true,
                 [`size--${this.size}`]: true,
                 [`spinner--${this.type}`]: true,
-            } }, h("svg", { key: '784bfb3447b86309060f29e0fc2dcc7817bbda97', viewBox: "0 0 40 40" }, h("clipPath", { key: '4dfd89e369ea41ac5561482fcf0285497059f2ba', id: "clip" }, h("path", { key: '0d8bc7fbaca120ef58a4a77e61a5bb3e1fc47f56', 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: 'cb07583d91425c1e6da3cda25d7793c928509a0e' }, h("div", { key: '73c73af5079bf6f1ad66a2f075ec04dee5cc5cff', class: "spinner__gradient" })))));
+            } }, h("svg", { key: '69e022d2277cfb7388dfd01bd149369d7e84c75d', viewBox: "0 0 40 40" }, h("clipPath", { key: 'a2501367e58e2a7565ece7ce2f6fc2b09b735c3b', id: "clip" }, h("path", { key: 'e98975d83a79ff7aae596fe365f475c4f91a785d', 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: 'a4142020efe0a98c5cd0482a2931118506c23210' }, h("div", { key: '7cb4116018ed01ed02b895883c352b1dba6772b4', class: "spinner__gradient" })))));
     }
     static get is() { return "tet-spinner"; }
     static get encapsulation() { return "shadow"; }

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

@@ -119,7 +119,7 @@ export class TetCountdown {
     }
     render() {
         const hostClass = `static-text-color-${this.staticTextColor}`;
-        return (h(Host, { key: '00bd6565b7a59be6bca1e8145c52a3c11b43e47c', class: hostClass }, this.countdownTitle && (h("div", { key: '9f1e2cb66c1b889f0ae3a19d65792940980876c7', class: "countdown-title", part: "title", "aria-hidden": "true" }, this.countdownTitle)), h("div", { key: 'ab6d2bf0b5a2e62edd7b9beaf78b685239f01b07', class: "countdown", part: "countdown", "aria-hidden": "true" }, this.renderUnit(this.countdown.days, this.getUnitLabel('days', this.countdown.days), 'days'), this.renderUnit(this.countdown.hours, this.getUnitLabel('hours', this.countdown.hours), 'hours'), this.renderUnit(this.countdown.minutes, this.getUnitLabel('minutes', this.countdown.minutes), 'minutes'), this.renderUnit(this.countdown.seconds, this.getUnitLabel('seconds', this.countdown.seconds), 'seconds')), h("div", { key: '5a928217cf9fa434dcfc657f5974fd2753cb05d8', class: "sr-only" }, this.getCountdownAriaLabel())));
+        return (h(Host, { key: '479f3c8bcbce08595dc0ec453cf8a7424dbb92b2', class: hostClass }, this.countdownTitle && (h("div", { key: 'f9a219e8fb6a25b8d1e6d24b59b8e94dda71f716', class: "countdown-title", part: "title", "aria-hidden": "true" }, this.countdownTitle)), h("div", { key: '13aefbb8e20545f2278eac5440d825847ff31e36', class: "countdown", part: "countdown", "aria-hidden": "true" }, this.renderUnit(this.countdown.days, this.getUnitLabel('days', this.countdown.days), 'days'), this.renderUnit(this.countdown.hours, this.getUnitLabel('hours', this.countdown.hours), 'hours'), this.renderUnit(this.countdown.minutes, this.getUnitLabel('minutes', this.countdown.minutes), 'minutes'), this.renderUnit(this.countdown.seconds, this.getUnitLabel('seconds', this.countdown.seconds), 'seconds')), h("div", { key: 'd3c60bbc0747ed3bedab421acea8e3c6e922ffe4', class: "sr-only" }, this.getCountdownAriaLabel())));
     }
     static get is() { return "tet-countdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -239,7 +239,7 @@ export class TetCounter {
         return this.disableAnimation ? this.formatValue(this.endValue) : this.formatValue(this.currentValue);
     }
     render() {
-        return (h(Host, { key: 'd56c9ce76576a6e90d7fe80494aef46f58b04e19' }, h("span", { key: 'acd89dc32e53bfc784977ffaea3e2b7220161341', part: "counter", "aria-hidden": "true" }, this.outputValue()), h("span", { key: 'f892c2aa06792e061faaae7fee7fd8aa72e9da0f', class: "sr-only" }, this.formatValue(this.endValue))));
+        return (h(Host, { key: '5caef654c993515966a6bca1de275cdf151c524c' }, h("span", { key: '73e6b98e7a3fff5ee5ad1efe8a283edfb8a00717', part: "counter", "aria-hidden": "true" }, this.outputValue()), h("span", { key: 'bffd62c608d6da5072b8b65cf8851d115249e55c', class: "sr-only" }, this.formatValue(this.endValue))));
     }
     static get is() { return "tet-counter"; }
     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: '6a41dfdeadcccba0b47086300217ee437c1bc9f7' }, h("div", { key: '3d9b82287fb320df851bdea358b133bcdb203fb1', class: {
+        return (h(Host, { key: '95024abedad9bae5276c554552035a245154cec4' }, h("div", { key: '56f83d3bd666b0e5b0c3643d4937709089f965ed', class: {
                 label: true,
                 'label-active': this.active,
                 [`label-type-${this.type}`]: true,
                 [`theme-${this.theme}`]: true,
-            } }, this.labelTitle && h("p", { key: 'b5cc2ea65fbd5f7453a8821f1d4c0931bb60e34c', class: "label-title" }, this.translateTitle ? t(this.labelTitle) : this.labelTitle), this.showIcon && h("tet-icon", { key: '8bc36a8be0d8a457911d7b2f56fcf4a33ec22729', class: "label-icon", name: "close-circle", part: "icon-selected" }))));
+            } }, this.labelTitle && h("p", { key: '72655c21e7e05281e206c6a8b00780eaebeaca4a', class: "label-title" }, this.translateTitle ? t(this.labelTitle) : this.labelTitle), this.showIcon && h("tet-icon", { key: '7b5fda50a499fec7d624cd1553f08ee8ccd8c11a', 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-banner-nav/tet-banner-nav.js

@@ -38,10 +38,10 @@ export class TetBannerNavigation {
     async onLanguageChange(language) {
         processTranslations('tet-components', language).then(() => forceUpdate(this));
     }
-    componentWillLoad() {
+    async componentWillLoad() {
         this.isPaused = this.paused;
         this.firstLoad = true;
-        processTranslations('tet-components', this.language).then(() => forceUpdate(this));
+        await processTranslations('tet-components', this.language);
     }
     componentDidLoad() {
         if (!this.isPaused) {

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

@@ -73,7 +73,7 @@ export class TetRoundStepper {
         }
     }
     render() {
-        return (h(Host, { key: '3867c623826b057d45f9952bf1ae251cedcffda0' }, h("div", { key: '57d80fdfab4e9cf6a410135d0cb5eb90aa0e134d', class: {
+        return (h(Host, { key: '0cb44a58dc395c6204dbe47d57384e9928429f2b' }, h("div", { key: 'd13e38a618b357f777eeb6e2adfba21de596e4ff', class: {
                 'round-stepper': true,
                 'with-background-gradient': this.layout === 'withBackgroundGradient',
                 'column': this.forcedColumn,

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

@@ -75,7 +75,7 @@ export class TetStepper {
         return this.stepperData.length - 1 > index ? h("li", { class: lineClasses }) : null;
     };
     render() {
-        return (h(Host, { key: '58c7194e8ec9ed5737dcca848016677b176ae797' }, h("ol", { key: 'ff261783b0d9616b1b1f41ab9df6ece65fa5241d', class: "stepper" }, this.stepperData.map(this.renderStep))));
+        return (h(Host, { key: '346449e75270b13371ee8142f4ce27d0d20a7033' }, h("ol", { key: 'b30ca2d1dce437775287a536be1357898a887f6c', class: "stepper" }, this.stepperData.map(this.renderStep))));
     }
     static get is() { return "tet-stepper"; }
     static get encapsulation() { return "shadow"; }