@tet/tet-components 1.4.22-testing → 1.4.23-staging

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

@@ -10,6 +10,9 @@ export class TetButton {
         this.size = 'large';
         this.type = 'primary';
         this.theme = 'classic';
+        this.colorTheme = undefined;
+        this.customColorCode = undefined;
+        this.customColorContentTone = 'light';
         this.disabled = false;
         this.iconMode = false;
         this.iconPosition = 'right';
@@ -34,15 +37,73 @@ export class TetButton {
             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() {
+        const { colorTheme, type, customColorCode } = this;
+        const isSecondaryType = type === 'secondary';
+        if (customColorCode) {
+            return isSecondaryType ? 'secondary' : 'primary';
+        }
+        if (colorTheme === 'yellow')
+            return 'primary';
+        if (colorTheme === 'adaptive-yellow')
+            return isSecondaryType ? 'secondary' : 'primary';
+        return type;
+    }
+    /** Resolves the effective theme based on selected theme, colorTheme, type, and customColorCode. */
+    getFallbackTheme() {
+        const { colorTheme, theme, customColorCode, type } = this;
+        const isGhostOrLinkType = type === 'ghost' || type === 'link';
+        if (customColorCode || colorTheme === 'yellow') {
+            return theme === 'dark' || theme === 'light-inverse' ? 'dark' : 'light';
+        }
+        if (colorTheme === 'adaptive-yellow') {
+            switch (theme) {
+                case 'light':
+                case 'light-inverse':
+                case 'dark':
+                    return theme;
+                case 'dark-inverse':
+                    return type === 'primary' ? 'dark-inverse' : 'dark';
+                default:
+                    return 'light';
+            }
+        }
+        if (isGhostOrLinkType && theme === 'light-inverse')
+            return 'dark';
+        if (isGhostOrLinkType && theme === 'dark-inverse')
+            return 'light';
+        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;
+        if (accessibilityLabel) {
+            return accessibilityLabel;
+        }
+        if (iconMode && iconName) {
+            const label = iconName.startsWith('tc-') ? iconName.substring(3) : iconName;
+            return label.replaceAll('-', ' ').trim();
+        }
+        return '';
+    }
+    shouldApplyDarkCustomColorContentClass() {
+        const { customColorCode, type, customColorContentTone } = this;
+        return !!customColorCode && type === 'primary' && customColorContentTone === 'dark';
+    }
     render() {
-        return (h(Host, { key: 'd342042a6828cd844db48ab15ceaa3dcbb0c8316' }, h("button", { key: 'a9a38be9b1acce940572d141eb6a5db65dc5578e', part: "button", onClick: this.handleClick, id: this.elementId, class: {
+        const accessibilityLabel = this.getAccessibilityLabel();
+        return (h(Host, { key: 'de69fa5a41ed8b0d0e1de462509a1bab59fabab4' }, h("button", { key: '6310d69f52cfd2992f21d5e3203e40b8339d09d6', 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.type}`]: true,
-                [`button-${this.theme}-theme`]: true,
-                'icon-mode': this.iconMode,
-                'with-icon': !!this.iconName,
-            }, disabled: this.disabled, ...(this.accessibilityLabel ? { "aria-label": this.accessibilityLabel } : {}), tabindex: 0 }, (!!this.iconName && this.iconMode)
+                [`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)
@@ -126,7 +187,7 @@ export class TetButton {
                 "mutable": false,
                 "complexType": {
                     "original": "ButtonTheme",
-                    "resolved": "\"classic\" | \"dark\" | \"dark-inverse\" | \"light\" | \"light-inverse\" | \"mint\" | \"netflix\" | \"yellow\"",
+                    "resolved": "\"classic\" | \"dark\" | \"dark-inverse\" | \"light\" | \"light-inverse\" | \"mint\"",
                     "references": {
                         "ButtonTheme": {
                             "location": "local",
@@ -145,6 +206,64 @@ export class TetButton {
                 "reflect": false,
                 "defaultValue": "'classic'"
             },
+            "colorTheme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ColorTheme",
+                    "resolved": "\"adaptive-yellow\" | \"yellow\"",
+                    "references": {
+                        "ColorTheme": {
+                            "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::ColorTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The color theme of the button."
+                },
+                "attribute": "color-theme",
+                "reflect": false
+            },
+            "customColorCode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "CSS color value for the custom button color theme."
+                },
+                "attribute": "custom-color-code",
+                "reflect": false
+            },
+            "customColorContentTone": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Content tone for primary buttons when customColorCode is set."
+                },
+                "attribute": "custom-color-content-tone",
+                "reflect": false,
+                "defaultValue": "'light'"
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -480,6 +480,7 @@
   --checkbox-disabled-checked-background-color: var(--tc-checkbox-active-disabled);
   --checkbox-disabled-text-color: var(--tc-grey-40);
   --checkbox-error-border-color: var(--tc-alert-accent-error);
+  --checkbox-unavailable-text-color: var(--tc-text-tertiary);
   display: block;
   position: relative;
 }
@@ -502,6 +503,7 @@
   --checkbox-disabled-checked-background-color: var(--tc-checkbox-active-disabled-dark);
   --checkbox-disabled-text-color: var(--tc-grey-40-dark);
   --checkbox-error-border-color: var(--tc-alert-accent-error-dark);
+  --checkbox-unavailable-text-color: var(--tc-text-tertiary-dark);
 }
 .checkbox.dark .checkbox__html-input:focus-visible ~ .checkbox__input, .checkbox.mint .checkbox__html-input:focus-visible ~ .checkbox__input {
   outline: 0.125rem solid var(--tc-blue-40);
@@ -631,6 +633,9 @@
   border: none;
   background-color: var(--checkbox-disabled-checked-background-color);
 }
+.checkbox__html-input[disabled].checkbox__html-input--unavailable ~ .checkbox__label-container .checkbox__label {
+  color: var(--checkbox-unavailable-text-color);
+}
 .checkbox__input {
   display: inline-flex;
   align-items: center;

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

@@ -12,6 +12,7 @@ export class TetCheckbox {
         this.name = undefined;
         this.value = 0;
         this.disabled = false;
+        this.unavailable = false;
         this.checked = false;
         this.error = false;
         this.indeterminate = false;
@@ -69,18 +70,32 @@ export class TetCheckbox {
         const slot = event.target;
         this.hasSlotIcon = slot.assignedElements().length > 0;
     };
+    get iconType() {
+        const { unavailable, disabled } = this;
+        switch (true) {
+            case unavailable:
+                return 'secondary';
+            case disabled:
+                return 'tertiary';
+            default:
+                return 'primary';
+        }
+    }
     render() {
-        const { label, name, checked, value, disabled, error, iconName, labelFont, alignCenter, hasSlotIcon, accessibilityLabel } = this;
-        return (h(Host, { key: '8fecb04d1babd790e4abb6955d0c31a4522c0008' }, h("div", { key: '0d03c659208ba6f08ed34eff817cc0ade3cc49fd', class: { checkbox: true, [`${this.theme}`]: true } }, h("label", { key: '4e9c24116b348051474da763163172b4a1394de4', class: {
+        const { label, name, checked, value, disabled, error, iconName, labelFont, alignCenter, hasSlotIcon, accessibilityLabel, unavailable, iconType } = this;
+        return (h(Host, { key: '2b137f96b9a158928e7bf13edd24064fc9a67fcf' }, h("div", { key: 'd9ad8a40fb6c0a0a1fe2705b99cb14f092a821e3', class: { checkbox: true, [`${this.theme}`]: true } }, h("label", { key: '73de7eae4cad137187ea5fbd9b355dab804074f6', class: {
                 'checkbox__container': true,
                 'checkbox__container--focus-style': this.focusStyleOnContainer,
                 'checkbox__container--align-start': !alignCenter,
-            }, part: "checkbox-container", htmlFor: "tet-checkbox" }, h("input", { key: 'bd35041be71c7473cf70255c06ce1866ef75fca1', ref: (el) => (this.inputEl = el), class: "checkbox__html-input", id: "tet-checkbox", type: "checkbox", name: name, value: value, ...(accessibilityLabel ? { 'aria-label': accessibilityLabel } : {}), disabled: disabled, checked: checked, onChange: this.handleChange }), h("span", { key: '52fced52c626d7af158634057923dde915d4bc3a', class: {
+            }, part: "checkbox-container", htmlFor: "tet-checkbox" }, h("input", { key: '12fbd0566b9b43771e84fe1bc6bd41ebee30178b', 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: 'd57b60f2c25914cd0469ca9500a3b8e6548ad096', class: {
                 'checkbox__input': true,
                 'checkbox__input--error': error,
                 'checkbox__input--hide-focus-style': this.focusStyleOnContainer,
                 ...(labelFont ? { [`checkbox__input--${labelFont}`]: true } : {}),
-            } }, h("tet-icon", { key: '4a4f7602ad1008445049c14d6c62fe808e3cce64', name: "remove", class: "checkbox__icon checkbox__icon--indeterminate indicator" }), h("tet-icon", { key: '0f2fe9286205b73b92edcd17c24fae27db907264', name: "check", class: "checkbox__icon" })), h("div", { key: '71919d5070682cb5b5a60bece4b08519875e596a', class: "checkbox__label-container" }, iconName ? (h("tet-icon", { theme: this.theme === 'light' ? 'light' : 'dark', name: iconName, type: disabled ? 'tertiary' : 'primary', class: {
+            } }, h("tet-icon", { key: '19057fad568cc1e4a917b6566d4764f1a9b9bf93', name: "remove", class: "checkbox__icon checkbox__icon--indeterminate indicator" }), h("tet-icon", { key: '39d38a6dd295e60d4cbb0c0aafe2ec9d7f7bfddd', name: "check", class: "checkbox__icon" })), h("div", { key: '2ac221e6a4818bec7c32980a0fe5a7aa7cc0ddd6', 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 } : {}),
@@ -88,10 +103,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: '411339feb07761593d87f955435cb7da4679c201', class: {
+            } }, h("slot", { name: "label-icon", onSlotchange: this.onIconSlotChange }))), h("span", { key: '2f1efb33e50c2e00d464399c950e77528e98ed67', class: {
                 'checkbox__label': true,
                 ...(labelFont ? { [`checkbox__label--${labelFont}`]: true } : {}),
-            }, innerHTML: label }, h("slot", { key: '80596fe99fae36f713ac65d39100208d6fac03dd' })))))));
+            }, innerHTML: label }, h("slot", { key: 'c72b3d2b6323c243cf7a58ce25a7b67cc3b6fca2' })))))));
     }
     static get is() { return "tet-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -213,6 +228,24 @@ export class TetCheckbox {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "unavailable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The property to determine whether the checkbox should be unavailable."
+                },
+                "attribute": "unavailable",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "checked": {
                 "type": "boolean",
                 "mutable": true,

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

@@ -371,6 +371,7 @@
   --radio-disabled-text-color: rgb(153, 160, 174);
   --radio-error-border-color: rgb(233, 69, 54);
   --radio-outline-focus-color: var(--tc-blue-40);
+  --radio-unavailable-text-color: var(--tc-text-tertiary);
   --radio-vertical-alignment: flex-start;
   --radio-gap: 0.5rem;
   --radio-container-outline-offset: 0.1875rem;
@@ -396,6 +397,7 @@
   --radio-disabled-text-color: var(--tc-grey-40-dark);
   --radio-error-border-color: var(--tc-alert-accent-error-dark);
   --radio-outline-focus-color: var(--tc-blue-40-dark);
+  --radio-unavailable-text-color: var(--tc-text-tertiary-dark);
 }
 .radio-dark-theme .radio__html-input:focus-visible ~ .radio__input, .radio-mint-theme .radio__html-input:focus-visible ~ .radio__input {
   outline: 0.125rem solid var(--tc-blue-40);
@@ -520,6 +522,9 @@
 .radio__html-input[disabled]:checked ~ .radio__input {
   background-color: var(--radio-disabled-checked-background-color);
 }
+.radio__html-input[disabled].radio__html-input--unavailable ~ .radio__label-container .radio__label {
+  color: var(--radio-unavailable-text-color);
+}
 .radio__input {
   display: inline-flex;
   position: relative;

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

@@ -11,6 +11,7 @@ export class TetRadio {
         this.name = undefined;
         this.value = 0;
         this.disabled = false;
+        this.unavailable = false;
         this.checked = false;
         this.error = false;
         this.inputAutofocus = false;
@@ -83,22 +84,36 @@ export class TetRadio {
         const icon = this.radioElement.querySelector('[slot="label-icon"]');
         this.hasSlotIcon = !!icon;
     };
+    get iconType() {
+        const { unavailable, disabled } = this;
+        switch (true) {
+            case unavailable:
+                return 'secondary';
+            case disabled:
+                return 'tertiary';
+            default:
+                return 'primary';
+        }
+    }
     render() {
-        const { id, disabled, value, checked, name, label, accessibilityLabel, error, inputAutofocus, iconName, labelFont, alignCenter, hasSlotIcon } = this;
-        return (h(Host, { key: '54a4658d1e74c191f562643acda9d0adb398cfcd' }, h("div", { key: 'eff9b52d5608def9650daa103d61713f18d78898', class: { radio: true, [`radio-${this.theme}-theme`]: true } }, h("label", { key: 'd2d1fc5f09076139c0634f1b3ebe08a72e8c260c', class: {
+        const { id, disabled, value, checked, name, label, accessibilityLabel, error, inputAutofocus, iconName, labelFont, alignCenter, hasSlotIcon, unavailable, iconType } = this;
+        return (h(Host, { key: 'ef9c0d26dc82008c844694bfdda7965790562dc2' }, h("div", { key: '1e7dd47026ee5b705d1082d2492e703fd20af0c9', class: { radio: true, [`radio-${this.theme}-theme`]: true } }, h("label", { key: '7462fe2a8b7369ad00a3959c49dc2c63dd70514a', class: {
                 'radio__container': true,
                 'radio__container--focus-style': this.focusStyleOnContainer,
                 'radio__container--align-center': alignCenter,
-            }, htmlFor: id }, h("input", { key: '14d0966944a2f8a6f0d5ce27ee81a6005640ed47', class: "radio__html-input", id: id, name: name, type: "radio", value: value, disabled: disabled, checked: checked, onChange: this.handleInputChange, autofocus: inputAutofocus, ...(accessibilityLabel ? { 'aria-label': accessibilityLabel } : {}) }), h("span", { key: 'e92e3ba779537be87ee6d51d83bae4c86d7e143b', class: {
+            }, htmlFor: id }, h("input", { key: 'd3f03196161ed9030388dbe807d1aa5f5cb15ac0', 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: '2b8f4f62e5bc2eccdaebc3154cccc5a6cef0b6db', 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: 'cb59bb25f069b6a36967b5999293592df30c148b', class: {
+            } }), h("div", { key: '5c53d71f5fe2c5545b469de3a5e5948639c0c6eb', 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: disabled ? 'tertiary' : 'primary', class: {
+            } }, iconName ? (h("tet-icon", { theme: ['classic', 'light'].includes(this.theme) ? 'light' : 'dark', name: iconName, type: iconType, class: {
                 'radio__label-icon': true,
                 [`radio__label-icon--${iconName}`]: true,
                 ...(labelFont ? { [`radio__label-icon--${labelFont}`]: true } : {}),
@@ -106,11 +121,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: 'e6d837e355587421be2e361578a373726fd49cf5', class: {
+            } }, h("slot", { name: "label-icon" }))), h("span", { key: '3278de5e78f554fe9ba12cfdb99b9d6527d8e6c1', class: {
                 'radio__label': true,
                 'radio__label--has-slot-icon': hasSlotIcon,
                 ...(labelFont ? { [`radio__label--${labelFont}`]: true } : {}),
-            }, innerHTML: label }, h("slot", { key: 'bc453a1e2484d1a2b9a9f07f1c2cb47787122d38' })))))));
+            }, innerHTML: label }, h("slot", { key: 'bed2fd33652b1a54dd498846d723f4c4ee4f5bd2' })))))));
     }
     static get is() { return "tet-radio"; }
     static get encapsulation() { return "scoped"; }
@@ -232,6 +247,24 @@ export class TetRadio {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "unavailable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The property to determine whether the radio button should be unavailable."
+                },
+                "attribute": "unavailable",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "checked": {
                 "type": "boolean",
                 "mutable": true,

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: '7ee0bfc5f11d3af57a22b3b14d712f2ca2829e56' }, h("div", { key: 'ac1acfa00e46c07596cb93b8e764c8426f3db3fa', class: { 'switch': true, [`${theme}`]: true } }, h("label", { key: '28419ede75bd03747979c66081d6015ef6b8c20c', class: {
+        return (h(Host, { key: 'b9ab784392f96bcd9c675a17309a074f257c1b6a' }, h("div", { key: 'c747d4f40d343d3fb437a6371e60c4409242e0a7', class: { 'switch': true, [`${theme}`]: true } }, h("label", { key: '51521ad5b256229e559c1264edfcbddff077f01e', 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: 'b19cfb9fa10c85fb14a386ff2b271cccb8ed9fd6', 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: 'fafbabb754702a3774ce914ed05194a38e70854a', class: {
+            }, part: "switch-container", htmlFor: "tet-switch" }, h("input", { key: '24429f5b7d57b9ab1d94bfbf5ae8fcb1af156c82', 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: '259bfd14a0082b379a733f5605eb760f5cb5dfaf', class: {
                 'switch__label': true,
                 ...(labelPosition === 'left' ? { 'switch__label--left': true } : {}),
                 ...(labelFont ? { [`switch__label--${labelFont}`]: true } : {}),
-            }, innerHTML: label }, h("slot", { key: '07c19b7f46f6bb77b01930d44ef699841418f372' })), labelPosition === 'left' && this.renderSwitch()))));
+            }, innerHTML: label }, h("slot", { key: '17bd908993e20dba389ebea6165bba4546bd4853' })), 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: 'fea02f3af80db43b783ee35131a2a2cab2aa9c72' }, h("div", { key: '2e0383886ceb29df1e723bec285b2e6962ec1433', class: {
+        return (h(Host, { key: 'b6c8711fc9850aeaf025e215f04fb2932d4208c4' }, h("div", { key: 'ab5f83843944f003cb6f75378f3768b95d295339', class: {
                 'tet-tab-content': true,
                 'use-visibility': this.useVisibility,
                 [this.theme]: true
-            } }, h("slot", { key: 'd974cdb2a80c8a11fcb63c6169b4a651b5747623' }))));
+            } }, h("slot", { key: '38e182f182fe04c9dcd250323c0f9a5048362c6f' }))));
     }
     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

@@ -471,14 +471,14 @@ export class TetTabHeader {
         return {};
     }
     render() {
-        return (h(Host, { key: 'b86d56bc6b1b41e18e27a268d90a58cace231e79', "data-id-suffix": this.idSuffix }, h("div", { key: '4d6a15f9dbeeafbe7390728c77245736d77401c4', class: {
+        return (h(Host, { key: '8e1924cd0f19ed6987c8cda6df5d7c9cb044c569', "data-id-suffix": this.idSuffix }, h("div", { key: 'd5582e17dd959d569ff981180540b8acaf07803d', class: {
                 'tabs': true,
                 'tabs--segmented': this.segmented,
                 [this.position]: true,
                 [this.theme]: true,
                 [this.sizing]: true,
                 [this.type]: !!this.type
-            }, onMouseDown: this.onContainerMouseDown, style: this.getStyle(), ref: (ref) => (this.tabElement = ref), role: "tablist" }, h("slot", { key: '6f31fd86e6f23a98e0338a8a4a7a3adee3aba112', ref: (slot) => (this.tabContainer = slot) })), h("div", { key: 'c0cc1a80932330b70efbbbc18af2e0bc4fa724ce', class: {
+            }, onMouseDown: this.onContainerMouseDown, style: this.getStyle(), ref: (ref) => (this.tabElement = ref), role: "tablist" }, h("slot", { key: 'b7a3ed5fdfb64cb8ff2ab9614bea51d5b4c7f0a4', ref: (slot) => (this.tabContainer = slot) })), h("div", { key: '7a1d6571c66f66a854be259817bb1d0e39e442ed', class: {
                 'tabs-line': !this.segmented,
                 'no-underline': this.hideHeaderUnderline,
                 [this.theme]: true,

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

@@ -20,12 +20,12 @@ export class TetTag {
         processTranslations('tet-components', this.language).then(() => forceUpdate(this));
     }
     render() {
-        return (h(Host, { key: '19c127e4fda6644f61599bc41dc05fb39e91d3b3' }, h("button", { key: 'df8c40c33b811a04b70755fb72349b668bd6c3a0', class: {
+        return (h(Host, { key: '400777c5cd77465279f0f3dd106ac26e6a15807c' }, h("button", { key: '98998a4119d014a1c7692bf8c409d81851c0a5fc', 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: '7e54370dcf953d709419cb6b489d2715708252a0', class: "tag-title" }, t(this.tagTitle)), this.count !== null && this.count !== undefined && h("span", { key: 'ae3d755087a8dc7eb270f8383190ec07298836cb', class: "tag-count" }, this.count), this.showIcon && h("tet-icon", { key: 'd02fa60f0da29b0b32145e68c01251bca42e2815', class: "tag-icon", name: "close-circle", part: "icon-selected" }))));
+            }, "aria-pressed": this.active.toString(), disabled: this.disabled }, this.tagTitle && h("p", { key: '08322bdc4685a7bd7896cc9d8fa39cb0845bf720', class: "tag-title" }, t(this.tagTitle)), this.count !== null && this.count !== undefined && h("span", { key: 'd0186bd43116b76036813a6b043d18d627d5dd80', class: "tag-count" }, this.count), this.showIcon && h("tet-icon", { key: '479c9d4b1c60d72e9733ec17c8eabe49b7d8492e', 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

@@ -427,23 +427,23 @@ export class TetCarousel {
         document.removeEventListener('pointerup', this.onPointerUp);
     }
     render() {
-        return (h(Host, { key: '239fcae0f7ba43bcf1f394af658b60f4a306f4db' }, h("div", { key: '3857752d5ed212d26cc743169f6f1383b7110d3b', class: { 'tet-carousel': true, [`${this.theme}`]: true }, ref: (el) => (this.container = el), part: "carousel" }, h("div", { key: 'b4d6b90d86bb9a9274a2accf2f5ce907d9634c7a', class: "tet-carousel__container" }, h("div", { key: 'a029b4b4ab96a39150935f4c9c0d82262dd480be', class: "tet-carousel__gradient-left", ref: (el) => {
+        return (h(Host, { key: '55e4a6d72e8d743d4292bf7b13099ba8ec78568f' }, h("div", { key: '690baf14fa0111a48e986f9bb6b46f5e1316532f', class: { 'tet-carousel': true, [`${this.theme}`]: true }, ref: (el) => (this.container = el), part: "carousel" }, h("div", { key: '11c23723dddb8c2b5056d350f4cb38bbae992db5', class: "tet-carousel__container" }, h("div", { key: '16efc588fc8e3ae7e8f574ca9c181a88006a9604', class: "tet-carousel__gradient-left", ref: (el) => {
                 this.leftGradientRef = el;
-            } }), h("div", { key: '63f29224d4fad833b81a4ddea083b7f6a4c783a3', class: "tet-carousel__gradient-right", ref: (el) => {
+            } }), h("div", { key: '21e25113788756b2a50ea2753112946d53e38acf', class: "tet-carousel__gradient-right", ref: (el) => {
                 this.rightGradientRef = el;
-            } }), h("div", { key: 'a85c396691543ea86169e71133baddbb20555915', class: `tet-carousel__track ${!this._showButtons() && !this._showDots() ? 'tet-carousel__track--center' : ''}`, ref: (el) => (this.trackElement = el), style: {
+            } }), h("div", { key: 'd73ce24292dd07dc8f1be3c332d806e2f786ecc4', class: `tet-carousel__track ${!this._showButtons() && !this._showDots() ? 'tet-carousel__track--center' : ''}`, ref: (el) => (this.trackElement = el), style: {
                 transform: `translateX(${this.dragOffset}px)`,
                 transition: this.isDragging ? 'none' : `transform ${this.transitionDuration}ms ${this.transitionTiming}`
-            }, onPointerDown: this.onPointerDown, onMouseMove: this.onPointerMove, onPointerUp: this.onPointerUp, onMouseLeave: this.onPointerUp }, h("slot", { key: '035f1009bbbb5852af92ef5d3476686ac3ded670' }))), !!this.label && h("div", { key: '36a417e5c584b0a2f121f4da7f1ced5ba24bee80', class: "tet-carousel__label" }, this.label), (this._showButtons() || this._showDots()) && (h("div", { key: '63c6244e02866eb5cb1266fcd2df2ae0cf4f4bc7', class: "tet-carousel__controls" }, this._showButtons() && (h("div", { key: '1788aadd6cdd4a02882f26c443be8ce21297aad5', class: "tet-carousel__buttons tet-carousel__buttons--mobile" }, h("tet-button", { key: 'e58cc4096389a4df33a035364918d045d8ac2e67', class: "tet-carousel__btn", theme: this.theme === 'light' ? 'dark' : 'light', "icon-name": this.buttonIconLeft, "icon-mode": true, tabIndex: -1, onPointerDown: (e) => e.stopPropagation(), onPointerUp: () => {
+            }, onPointerDown: this.onPointerDown, onMouseMove: this.onPointerMove, onPointerUp: this.onPointerUp, onMouseLeave: this.onPointerUp }, h("slot", { key: '732eaa7e833adb12c9c6519f29f7070bbd991262' }))), !!this.label && h("div", { key: 'e214ba6831574ac4bc97305e4c6167ff339c6956', class: "tet-carousel__label" }, this.label), (this._showButtons() || this._showDots()) && (h("div", { key: '88282e7940bdb9208cbf681e9b9db4eafdc1231e', class: "tet-carousel__controls" }, this._showButtons() && (h("div", { key: '7824de4ac68ccfd30aff1386265ad3ebfa473517', class: "tet-carousel__buttons tet-carousel__buttons--mobile" }, h("tet-button", { key: 'b871785466eda2bfd76226748789cb9a82ecc3cd', class: "tet-carousel__btn", theme: this.theme === 'light' ? 'dark' : 'light', "icon-name": this.buttonIconLeft, "icon-mode": true, tabIndex: -1, onPointerDown: (e) => e.stopPropagation(), onPointerUp: () => {
                 if (!this.isDragging)
                     this.handlePrev();
-            }, "aria-label": t('components-carousel-previous'), disabled: this.dotCount <= 1 || this.activeItem === 0 }))), this._showDots() && (h("div", { key: '61c7d4c5e4d1b0472b444e4156c454b58b96c226', class: "tet-carousel__dots" }, Array.from({ length: this.dotCount }).map((_, idx) => (h("button", { type: "button", tabIndex: -1, class: `tet-carousel__dot${idx === this.activeDotIndex ? ' active' : ''}`, key: idx, onPointerDown: (e) => e.stopPropagation(), onPointerUp: () => {
+            }, "aria-label": t('components-carousel-previous'), disabled: this.dotCount <= 1 || this.activeItem === 0 }))), this._showDots() && (h("div", { key: '1956610f0ae3ef7caa86345eea1ea8d9c8cdb624', class: "tet-carousel__dots" }, Array.from({ length: this.dotCount }).map((_, idx) => (h("button", { type: "button", tabIndex: -1, class: `tet-carousel__dot${idx === this.activeDotIndex ? ' active' : ''}`, key: idx, onPointerDown: (e) => e.stopPropagation(), onPointerUp: () => {
                 if (!this.isDragging)
                     this.handleDotClick(idx);
-            }, onClick: () => this.handleDotClick(idx) }))))), this._showButtons() && (h("div", { key: '2dec4e09c0e25528c23dda4d29a67506f02dddc6', class: "tet-carousel__buttons " }, h("tet-button", { key: 'ea762b0d356e4cd77aa5d5fd6040d94b06fc839c', class: "tet-carousel__buttons--desktop tet-carousel__btn ", theme: this.theme === 'light' ? 'dark' : 'light', "icon-name": this.buttonIconLeft, "icon-mode": true, tabIndex: -1, onPointerDown: (e) => e.stopPropagation(), onPointerUp: () => {
+            }, onClick: () => this.handleDotClick(idx) }))))), this._showButtons() && (h("div", { key: '7e827860320c5a25ddbee8ff43a416b212a5405f', class: "tet-carousel__buttons " }, h("tet-button", { key: 'd02e07f42cba8277c166404837518c5af32fc0c7', class: "tet-carousel__buttons--desktop tet-carousel__btn ", theme: this.theme === 'light' ? 'dark' : 'light', "icon-name": this.buttonIconLeft, "icon-mode": true, tabIndex: -1, onPointerDown: (e) => e.stopPropagation(), onPointerUp: () => {
                 if (!this.isDragging)
                     this.handlePrev();
-            }, "aria-label": t('components-carousel-previous'), disabled: this.dotCount <= 1 || this.activeItem === 0 }), h("tet-button", { key: 'b33637f0e925d96984890894edb9471c0e42d72b', class: "tet-carousel__btn", theme: this.theme === 'light' ? 'dark' : 'light', "icon-name": this.buttonIconRight, "icon-mode": true, tabIndex: -1, onPointerDown: (e) => e.stopPropagation(), onPointerUp: () => {
+            }, "aria-label": t('components-carousel-previous'), disabled: this.dotCount <= 1 || this.activeItem === 0 }), h("tet-button", { key: '17d47bbfcbf6bd2a9240c74804a33f0e07e15252', class: "tet-carousel__btn", theme: this.theme === 'light' ? 'dark' : 'light', "icon-name": this.buttonIconRight, "icon-mode": true, tabIndex: -1, onPointerDown: (e) => e.stopPropagation(), onPointerUp: () => {
                 if (!this.isDragging)
                     this.handleNext();
             }, "aria-label": t('components-carousel-next'), disabled: this.dotCount <= 1 ||

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

@@ -50,7 +50,7 @@ export class TetIcon {
     };
     shouldUseDefaultColor = () => (this.useDefaultColor || defaultColorIcons.includes(this.name));
     render() {
-        return (h("span", { key: '2bc2f26b1cd7ac669cf3f38a238a1bd04562c19d', class: "icon-wrapper", tabindex: (this.focusable || this.accessibilityLabel) ? 0 : -1 }, h("span", { key: '12f4c973dadb1b26d14419a41d59628287a92efa', class: {
+        return (h("span", { key: 'c5ddca646b87554822b4c175bd7139af80cb3995', class: "icon-wrapper", tabindex: (this.focusable || this.accessibilityLabel) ? 0 : -1 }, h("span", { key: '4d992df15ab7e5342a224e489ac3267664f3f239', 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: '4ff48068b24050af159012a2ec8af7bd3ae1c63d', class: "loader" }, h("div", { key: '61f01f7ccbeea4b675bb45307a99c23d9ec8a5c3', class: "loader-inner" })));
+        return (h("div", { key: '797bebccd24b1d5ec737d614e0446ed93fb529d1', class: "loader" }, h("div", { key: '7950251f3a7f7677cd9303f69eeac54f00e7dcac', 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: '2008dd3ed8585c5ba17f337315642ec04389d4f5', style: { width: this.width, height: this.height } }, h("div", { key: 'cdab65c8429a5216900322836cd3d3cf61e705c1', class: { 'dark-theme': this.darkTheme } }, h("div", { key: '0ce96fea689c45ca7ea88d0861775bcbd8786fe3', class: "placeholder", style: { height: this.height } }))));
+        return (h(Host, { key: 'd235e9e033631259c071d46e1e84ca969baa01ca', style: { width: this.width, height: this.height } }, h("div", { key: '178d0f8bcd2b2478f15519c2174eac61669f566d', class: { 'dark-theme': this.darkTheme } }, h("div", { key: '44ccf3ad5e6cd034affc7a1cce60ac76d62b6508', 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

@@ -48,13 +48,13 @@ export class TetSpinner {
         foreignObject.setAttribute('clip-path', 'url(#clip)');
     };
     render() {
-        return (h("div", { key: 'fa1a948f44b61e85dab67aea8975583fb759242b', ref: element => (this.spinner = element), class: {
+        return (h("div", { key: '34ae4e1b54605bcc6a35cf6c34c3d81912278e1d', ref: element => (this.spinner = element), class: {
                 spinner: true,
                 [`${this.theme}-theme`]: true,
                 [`size--${this.size}`]: true,
                 [`spinner--${this.type}`]: true,
-            } }, h("svg", { key: '77485bbfe47905653ac3bc653038c909f76ff4e4', viewBox: "0 0 40 40" }, h("clipPath", { key: 'f0a15d55e23af6e48d9566c57fecbebb79f38536', id: "clip" }, h("path", { key: '1a7157545aa6b8641891f565505ba8b4bc07cb3c', 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: 'afd2c6b1cba46dc6d12cab21c789ebeee3fd5621' }, h("div", { key: '59959b9a9212817867c87cec50ebed75cca4f1ae', class: "spinner__gradient" })))));
+            } }, h("svg", { key: '6c5b50e4478f8317e694c9588eb13751e4567eb8', viewBox: "0 0 40 40" }, h("clipPath", { key: 'd261977216b2654cd4349be63d18ba71020500a4', id: "clip" }, h("path", { key: '374f5619c2f98434f72fbc6929d7fd6629273a36', 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: 'c987af39f6844eb7950ca327808e6b4dd0ad21c4' }, h("div", { key: 'a5900c0eca56f75f6dfdbb1f3c004510109b3bb4', class: "spinner__gradient" })))));
     }
     static get is() { return "tet-spinner"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,16 @@
+:host {
+  display: inline-block;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  white-space: nowrap;
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+}