@tet/tet-components 1.3.18-testing → 1.3.19-production

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

@@ -362,6 +362,7 @@
   * @prop --button-font-size: The font size of the button.
   * @prop --button-font-weight: The font weight of the button.
   * @prop --button-padding: The padding of the button.
+  * @prop --button-icon-size: Specifies the size of the button icon when the icon is set using the iconName prop.
   */
   --button-text-decoration: none;
   --button-background: rgb(255, 255, 255);
@@ -372,6 +373,7 @@
   --button-box-shadow: none;
   --button-font-weight: 500;
   --button-gap: 0.25rem;
+  --button-icon-size: 1.5rem;
   --button-font-size-small: 0.875rem;
   --button-padding-small: 0.5rem 1.125rem;
   --button-font-size-medium: 1rem;
@@ -420,6 +422,10 @@
 .button:not(:disabled) {
   backdrop-filter: blur(7.5px);
 }
+.button.with-icon tet-icon {
+  --icon-color: var(--button-icon-color);
+  --icon-size: var(--button-icon-size);
+}
 .button--type-primary {
   --button-background: initial;
 }
@@ -427,6 +433,7 @@
   --button-text-color: var(--tc-button-text-primary-dark);
   --button-border-color: transparent;
   --button-background: var(--tc-button-primary-background-default-dark);
+  --button-icon-color: var(--tc-button-icon-primary-dark);
 }
 .button--type-primary.button-dark-theme:hover:not(:disabled) {
   --button-background: var(--tc-button-primary-background-hover-dark);
@@ -445,11 +452,13 @@
 .button--type-primary.button-dark-theme:disabled {
   --button-text-color: var(--tc-button-text-disabled-dark);
   --button-background: var(--tc-button-primary-background-disabled-dark);
+  --button-icon-color: var(--tc-button-icon-disabled-dark);
 }
 .button--type-primary.button-dark-inverse-theme {
   --button-text-color: var(--tc-button-text-inverse-primary-dark);
   --button-border-color: transparent;
   --button-background: var(--tc-button-primary-background-inverse-default-dark);
+  --button-icon-color: var(--tc-button-icon-inverse-primary-dark);
 }
 .button--type-primary.button-dark-inverse-theme:hover:not(:disabled) {
   --button-background: var(--tc-button-primary-background-inverse-hover-dark);
@@ -468,6 +477,7 @@
 .button--type-primary.button-dark-inverse-theme:disabled {
   --button-text-color: var(--tc-button-text-inverse-disabled-dark);
   --button-background: var(--tc-button-primary-background-inverse-disabled-dark);
+  --button-icon-color: var(--tc-button-icon-inverse-disabled-dark);
 }
 .button--type-primary.button-mint-theme {
   --button-text-color: rgb(10, 11, 13);
@@ -496,6 +506,7 @@
   --button-text-color: var(--tc-button-text-primary);
   --button-border-color: transparent;
   --button-background: var(--tc-button-primary-background-default);
+  --button-icon-color: var(--tc-button-icon-primary);
 }
 .button--type-primary.button-light-theme:hover:not(:disabled) {
   --button-background: var(--tc-button-primary-background-hover);
@@ -513,11 +524,13 @@
 .button--type-primary.button-light-theme:disabled {
   --button-text-color: var(--tc-button-text-disabled);
   --button-background: var(--tc-button-primary-background-disabled);
+  --button-icon-color: var(--tc-button-icon-disabled);
 }
 .button--type-primary.button-light-inverse-theme {
   --button-text-color: var(--tc-button-text-inverse-primary);
   --button-border-color: transparent;
   --button-background: var(--tc-button-primary-background-inverse-default);
+  --button-icon-color: var(--tc-button-icon-inverse-primary);
 }
 .button--type-primary.button-light-inverse-theme:hover:not(:disabled) {
   --button-background: var(--tc-button-primary-background-inverse-hover);
@@ -535,6 +548,7 @@
 .button--type-primary.button-light-inverse-theme:disabled {
   --button-text-color: var(--tc-button-text-inverse-disabled);
   --button-background: var(--tc-button-primary-background-inverse-disabled);
+  --button-icon-color: var(--tc-button-icon-inverse-disabled);
 }
 .button--type-primary.button-classic-theme {
   --button-text-color: rgb(255, 255, 255);
@@ -609,7 +623,8 @@
 }
 .button--type-secondary.button-dark-theme {
   --button-text-color: var(--tc-button-text-secondary-dark);
-  --button-border-color: var(--tc-border-primary-dark);
+  --button-border-color: var(--tc-button-border-secondary-dark);
+  --button-icon-color: var(--tc-button-icon-inverse-primary-dark);
 }
 .button--type-secondary.button-dark-theme:hover:not(:disabled) {
   --button-background: var(--tc-button-secondary-background-hover-dark);
@@ -626,15 +641,17 @@
   --button-background: var(--tc-button-secondary-background-pressed-dark);
 }
 .button--type-secondary.button-dark-theme:disabled {
-  --button-text-color: var(--tc-button-secondary-background-disabled-dark);
-  --button-border-color: var(--tc-button-secondary-background-disabled-dark);
+  --button-text-color: var(--tc-button-text-secondary-disabled-dark);
+  --button-border-color: var(--tc-button-border-disabled-dark);
+  --button-icon-color: var(--tc-button-icon-secondary-disabled-dark);
 }
 .button--type-secondary.button-dark-inverse-theme {
   --button-text-color: var(--tc-button-text-inverse-secondary-dark);
-  --button-border-color: var(--tc-border-inverse-primary-dark);
+  --button-border-color: var(--tc-button-border-inverse-secondary-dark);
+  --button-icon-color: var(--tc-button-icon-inverse-secondary-dark);
 }
 .button--type-secondary.button-dark-inverse-theme:hover:not(:disabled) {
-  --button-background: var(--tc-button-secondary-background-hover-dark);
+  --button-background: var(--tc-button-secondary-background-inverse-hover-dark);
   --button-box-shadow: var(--tc-button-hover-shadow-centre-dark), var(--tc-button-hover-shadow-raised-dark);
 }
 .button--type-secondary.button-dark-inverse-theme:focus-visible:not(:disabled) {
@@ -645,11 +662,12 @@
   --button-box-shadow: none;
 }
 .button--type-secondary.button-dark-inverse-theme:active:not(:disabled) {
-  --button-background: var(--tc-button-secondary-background-pressed-dark);
+  --button-background: var(--tc-button-secondary-background-inverse-pressed-dark);
 }
 .button--type-secondary.button-dark-inverse-theme:disabled {
-  --button-text-color: var(--tc-button-secondary-background-disabled-dark);
-  --button-border-color: var(--tc-button-secondary-background-disabled-dark);
+  --button-text-color: var(--tc-button-text-inverse-secondary-disabled-dark);
+  --button-border-color: var(--tc-button-border-inverse-disabled-dark);
+  --button-icon-color: var(--tc-button-icon-inverse-secondary-disabled-dark);
 }
 .button--type-secondary.button-mint-theme {
   --button-text-color: rgb(26, 213, 219);
@@ -678,7 +696,8 @@
 }
 .button--type-secondary.button-light-theme {
   --button-text-color: var(--tc-button-text-secondary);
-  --button-border-color: var(--tc-border-primary);
+  --button-border-color: var(--tc-button-border-secondary);
+  --button-icon-color: var(--tc-button-icon-inverse-primary);
 }
 .button--type-secondary.button-light-theme:hover:not(:disabled) {
   --button-background: var(--tc-button-secondary-background-hover);
@@ -694,15 +713,17 @@
   --button-background: var(--tc-button-secondary-background-pressed);
 }
 .button--type-secondary.button-light-theme:disabled {
-  --button-text-color: var(--tc-button-secondary-background-disabled);
-  --button-border-color: var(--tc-button-secondary-background-disabled);
+  --button-text-color: var(--tc-button-text-secondary-disabled);
+  --button-border-color: var(--tc-button-border-disabled);
+  --button-icon-color: var(--tc-button-icon-secondary-disabled);
 }
 .button--type-secondary.button-light-inverse-theme {
   --button-text-color: var(--tc-button-text-inverse-secondary);
-  --button-border-color: var(--tc-border-inverse-primary);
+  --button-border-color: var(--tc-button-border-inverse-secondary);
+  --button-icon-color: var(--tc-button-icon-inverse-secondary);
 }
 .button--type-secondary.button-light-inverse-theme:hover:not(:disabled) {
-  --button-background: var(--tc-button-secondary-background-hover);
+  --button-background: var(--tc-button-secondary-background-inverse-hover);
   --button-box-shadow: var(--tc-button-hover-shadow-centre), var(--tc-button-hover-shadow-raised);
 }
 .button--type-secondary.button-light-inverse-theme:focus-visible:not(:disabled) {
@@ -712,11 +733,12 @@
   --button-box-shadow: none;
 }
 .button--type-secondary.button-light-inverse-theme:active:not(:disabled) {
-  --button-background: var(--tc-button-secondary-background-pressed);
+  --button-background: var(--tc-button-secondary-background-inverse-pressed);
 }
 .button--type-secondary.button-light-inverse-theme:disabled {
-  --button-text-color: var(--tc-button-secondary-background-disabled);
-  --button-border-color: var(--tc-button-secondary-background-disabled);
+  --button-text-color: var(--tc-button-text-inverse-secondary-disabled);
+  --button-border-color: var(--tc-button-border-inverse-disabled);
+  --button-icon-color: var(--tc-button-icon-inverse-secondary-disabled);
 }
 .button--type-secondary.button-classic-theme {
   --button-text-color: rgb(0, 96, 245);

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

@@ -12,17 +12,19 @@ export class TetButton {
         this.theme = 'classic';
         this.disabled = false;
         this.iconMode = false;
+        this.iconName = undefined;
         this.elementId = undefined;
         this.accessibilityLabel = '';
     }
     render() {
-        return (h(Host, { key: '0f2d8bfa4fca62ab1e95cefbb4fb3b5536bc4873' }, h("button", Object.assign({ key: '1f6a89232680ed608947c8081064c1adb8f823ea', part: "button", onClick: this.clickCallback, id: this.elementId, class: {
+        return (h(Host, { key: '89f91307931778bc010d22ef8852942158b03e2d' }, h("button", Object.assign({ key: 'fc228303ec3c839f06cdf2aaca15f0e4832081ea', part: "button", onClick: this.clickCallback, id: this.elementId, class: {
                 button: true,
                 [`button-${this.size}`]: true,
                 [`button--type-${this.type}`]: true,
                 [`button-${this.theme}-theme`]: true,
-                'icon-mode': this.iconMode
-            }, disabled: this.disabled }, (this.accessibilityLabel ? { "aria-label": this.accessibilityLabel } : {})), h("slot", { key: '78dead44b0b104b5b1747713c79078f007986c8d' }))));
+                'icon-mode': this.iconMode || !!this.iconName,
+                'with-icon': !!this.iconName,
+            }, disabled: this.disabled }, (this.accessibilityLabel ? { "aria-label": this.accessibilityLabel } : {})), !!this.iconName ? h("tet-icon", { name: this.iconName }) : h("slot", null))));
     }
     static get is() { return "tet-button"; }
     static get encapsulation() { return "shadow"; }
@@ -157,6 +159,23 @@ export class TetButton {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "iconName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the icon to use for the button. \nWhen this property is set, the button automatically switches to icon mode."
+                },
+                "attribute": "icon-name",
+                "reflect": false
+            },
             "elementId": {
                 "type": "string",
                 "mutable": false,

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: '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)))))));
+        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)))))));
     }
     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: '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)))))));
+        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)))))));
     }
     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: '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
+        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
             ? 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: '9c8fd9fc3e5ad0a58cf1a0486b678f5a473f487b' }, h("div", { key: '15567c97e3fb8441e613719b8f715ee72dadf9c9', class: {
+        return (h(Host, { key: '1e1adf215b2fe6c4618b1a7fb63e7a992fcd4c60' }, h("div", { key: '8bdda1c746a062e2b1cc402e51d5730b79b962b9', class: {
                 'tet-tab-content': true,
                 'use-visibility': this.useVisibility
-            } }, h("slot", { key: '0b97f6cdc6809f0baa6a30a374ef73fa38ee30b7' }))));
+            } }, h("slot", { key: '1bd5c0c90f61ffe937979fc33a7cfd60fd5607d8' }))));
     }
     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: '6107fb9cd4e766beb2964e97f577da2df56a696d' }, h("div", { key: '679475f5b61c2ce851ef04048441b65b54a81ddb', class: {
+        return (h(Host, { key: '8910bc0892ab4c86f0595b02effead58cee93419' }, h("div", { key: 'e67fb443e4ddc58d57b5a7f1f0567fe3e236c62a', 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: '15b95436e1ee794f54e5c279f1bcf5029fe207ff', ref: (slot) => (this.tabContainer = slot) }))));
+            }, onMouseDown: this.onContainerMouseDown, style: this.getStyle(), ref: (ref) => (this.tabElement = ref) }, h("slot", { key: '412120e4448fc59441db1d7fea42a5338b9f5a2c', 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: 'cad24f22944b29db0e04a3fbcd6b1bb8185c4a06' }, h("button", { key: '86d0cb6e979c835f53fd88599ff9e962c791a80f', class: {
+        return (h(Host, { key: '93a81aebb3103f7901d7f22a3f445a0e679b0d6c' }, h("button", { key: '59a5c054091cb576de1913841630d52448fcd9db', 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: '9e12e034421d7e0cbfc8af09a720c552f7cf8e7b', class: "tag-title" }, t(this.tagTitle)), this.count !== null && this.count !== undefined && h("span", { key: '438368c57326b0dbc50c5eb56ac5273a4d3f2f20', class: "tag-count" }, this.count), this.showIcon && h("tet-icon", { key: '45308f219e814f1ded388ebafccae52987d2deba', class: "tag-icon", name: "close-circle", part: "icon-selected" }))));
+            }, "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" }))));
     }
     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: '5ac5ea13f4ab8a1e421f9db6b7c6d0ee6076ccf3', class: {
+        return (h("div", { key: 'e6b104ae77688173e78cd0938d584c670a08f02c', class: {
                 'container': true,
                 'container--highlightable': this.highlightable,
                 'container--selected': this.selected,
                 [`container--${this.theme}`]: this.theme !== 'classic',
-            }, part: "container" }, h("slot", { key: '08405376f22817c242f62d60e04b037512fe4d3d' })));
+            }, part: "container" }, h("slot", { key: '603211fdaa1769de317f7927b651afb84e939e07' })));
     }
     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: 'aeea59b75df11e0e1c81eb4383078581f9c234bc', class: "icon-wrapper" }, h("span", Object.assign({ key: '59fd548503dcaf8cfceeb0d873eecf612bb3b61a', class: { 'icon-container': true, 'default-color': this.useDefaultColor, [this.theme]: true }, ref: (element) => (this.iconContainer = element) }, (this.accessibilityLabel
+        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
             ? { "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: '5bc1c107ddb9fa27687c50f04bd026fa8c51e780', class: "loader" }, h("div", { key: '94b6ee49537df49428197ee73b2bae16cd244850', class: "loader-inner" })));
+        return (h("div", { key: 'd7e698a28d977fcc1e7bf198898715cc1739d5b8', class: "loader" }, h("div", { key: '5ee1ae97c6bbec0f1936421a5b7c31ffc308cd63', 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: '589a775dde38ff0e1a40eaa93c90cf237968d0dd', style: { width: this.width, height: this.height } }, h("div", { key: '9baef9be86ba642528a5e5471cd15396ba1e04cd', class: { 'dark-theme': this.darkTheme } }, h("div", { key: '72a277b7cbfd08f3d3b3b86bc4429f142faecb9f', class: "placeholder", style: { height: this.height } }))));
+        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 } }))));
     }
     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: '64245b43d3c39e7491bddb7c9ab64812eb51695c', ref: element => (this.spinner = element), class: {
+        return (h("div", { key: 'da8983e8ceb2734306ec986e3285257f24855d0a', ref: element => (this.spinner = element), class: {
                 spinner: true,
                 [`${this.theme}-theme`]: true,
                 [`size--${this.size}`]: true,
                 [`spinner--${this.type}`]: true,
-            } }, h("svg", { key: 'f90d77e014562dc9f415cd9fd05f8d4ed41b613e', viewBox: "0 0 40 40" }, h("clipPath", { key: '4c6ed3c3f986b0325a08eca5542031bd8f6b8d89', id: "clip" }, h("path", { key: '799ca0735e39a56f17f91ffc694786b9bd7bca52', 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: '0e6f432596310182f35357cb059c6fea9f126456' }, h("div", { key: 'dc1a66865a7036a7ffccad7c51b93f6cc2b31d9c', class: "spinner__gradient" })))));
+            } }, 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" })))));
     }
     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: 'ca8e3e987bcb57147cf9c6af38525d1d503de56a' }, h("div", { key: '63e2d66b0faa09f97cdd75dc99685e8a4cf9375d', class: {
+        return (h(Host, { key: '7efbd5e4aa519a6cfb79d7557b85a8e885fc90f6' }, h("div", { key: '93bdb5fa15a26e715bcbe9fe57153cf5c60c2566', class: {
                 label: true,
                 'label-active': this.active,
                 [`label-type-${this.type}`]: true,
                 [`theme-${this.theme}`]: true,
-            } }, this.labelTitle && h("p", { key: '3b0aaa32ef279ae770cf9e5d34efcd665910dd31', class: "label-title" }, this.translateTitle ? t(this.labelTitle) : this.labelTitle), this.showIcon && h("tet-icon", { key: 'd6e1c7331c229bf7ff8c8650f8d4f843428ad731', class: "label-icon", name: "close-circle", part: "icon-selected" }))));
+            } }, 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" }))));
     }
     static get is() { return "tet-label"; }
     static get encapsulation() { return "shadow"; }

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: '06c75498d8fb49bac8e2b918a887304403b637cc' }, h("div", { key: '7765f56024935fcef5e7bd10ab7d2aadc6d89062', class: {
+        return (h(Host, { key: 'fd8ee9e0f0ac5f69bda900db3753a746d57d36c4' }, h("div", { key: 'd6e9a4a4a94e8df4b83d8d37cca1a83548a53394', 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: '6ac0529a66f1cf0e2c8d2b107850b028cb50e2a2' }, h("ol", { key: 'c5403e7b83d047cead659f664947de3130c411e0', class: "stepper" }, this.stepperData.map(this.renderStep))));
+        return (h(Host, { key: '31d797a5d491a807379364783569a9de5a797890' }, h("ol", { key: 'eb1e51a74e75e8572f058f00e61ff13541c01fb7', 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: '465f30f914aec7d3d9924f163c4fbddc2690a7f3' }, h("ol", { key: '698b427da7b02faab8ebd6ea6dc25dc7a44bba67', class: {
+        return (h(Host, { key: '7d6261e6159384fbd48d7cd96298b26514d58833' }, h("ol", { key: 'fb16ca14511bae1c9a9395aaeb52cde426412677', 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: 'd94cd02d7aad2f5bcd5d62660d35693cdbdc12cc', class: "header" }, this.datepickerView !== 'year'
+        return (h("div", { key: '393785539930497c44155dfe589ba37326f88b91', 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: '3df19d8f3e2a3d0d33d94516b9a01833ca9fb999', class: "control-button", onClick: () => this.changeDatepickerView() }, this.getControlButtonDate(), h("tet-icon", { key: '086294c27c80c822882cc810375c97f9c0a8782b', class: "chevron-down", name: this.datepickerView === 'month' ? 'chevron-down' : 'chevron-up' })), this.datepickerView !== 'year'
+            : 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", { 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: '19eec01f34fe896afb4ad31d713c180067841baf' }, h("div", { key: 'da89706e46c92b37320c7ac1cc9aee1872b438c7', class: "weekday-header" }, this.days.map((day) => h("div", { class: "day" }, day))), h("div", { key: '15aa740e8eb65ea17cbc48fc4dd7bb03af22d238', 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: '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))))));
     }
     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: '283bf3b24c73fae850ada2fb5fb78ba06a2b7d73', class: "container" }, this.years.map((year) => h("div", { class: this.getYearClasses(year), onClick: () => this.handleYearSelection(year) }, year))));
+        return (h("div", { key: '060f4e7e7ee31e870b1569ea6e9f582e3854977d', 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: 'be114aa7e7714909649fa4a65dcbcf094f8c551a', 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: '27e060a2a2415f6259d828f587d68c4bfc9f2154', 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: '4db54c92023dc64e8e50a9321bef3216834eeedf', class: this.getOverlayClasses(), onClick: this.handleDatepickerClose }, h("div", { key: '4ba2ae5407efdbae479aa68c04883e104ef46bfa', class: "container", ref: (el) => this.datepickerContainer = el }, h("tet-datepicker-header", { key: 'ad75479e83bce286c1e60aa986a5e93413ca83ae', selectedDate: this.date, internalDate: this.internalDate, locale: this.locale, datepickerView: this.datepickerView }), this.datepickerView === 'month' &&
-            h("tet-datepicker-month-view", { key: 'df90eccaa173a1fa4063c1703faf8593666ce966', selectedDate: this.date, internalDate: this.internalDate, rangePickerMode: this.rangePickerMode, rangeDates: this.rangeDates }), this.datepickerView === 'multi-year' &&
-            h("tet-datepicker-multi-year-view", { key: '3e97b686021e2bcf43a2203d0cac832611a27bbd', selectedDate: this.date, internalDate: this.internalDate }), this.datepickerView === 'year' &&
-            h("tet-datepicker-year-view", { key: '5982b432e96740d267d8f61d64324d6a35b08f82', selectedDate: this.date, internalDate: this.internalDate }))));
+        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 }))));
     }
     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: '562e18e6d7541ae72f276140592f9f1e86bf1dfb' }, h("div", { key: '5bd4df5ed2992ec894cfe6b1b838e0d59d6503c9', class: { 'dropdown': true, 'dropdown--open': isOpen, 'focus-visible': isKeyboardFocus && isOpen, [`${theme}`]: true } }, this.renderButton(), this.renderOptions())));
+        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())));
     }
     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: '966f0c513c9af74accb2c9ac05106ea2fb9b2ec2', class: { small: this.size === 'small' } }, h("div", { key: '3181be4bba55614b2d538469f2d4d7c7a7bfdfd9', class: {
+        return (h(Host, { key: '8ccc4b8abfff3cf163aeeb76d4aa1c99b576fca2', class: { small: this.size === 'small' } }, h("div", { key: '2d8108e130f185b709b632ec20b748a4023b2084', class: {
                 container: true,
                 expanded: this.expanded,
                 [this.mode]: true,
                 dark: this.darkMode
-            } }, h("div", { key: 'a50105b3fc8d3b34fe3b9fa13b0afc46b639ff10', class: "input-wrapper", ref: (element) => (this.inputWrapper = element) }, h("tet-input", { key: '8cb1ec1d74fc7b87062b988ce63b8794e887182e', class: "tet-input", label: this.label, "input-class": this.class, "input-placeholder": this.renderInputContent ? this.placeholder : '', "accessibility-label": this.accessibilityLabel, "input-type": this.type, "input-value": this.value, "input-disabled": this.disabled, error: this.error, "icon-left": this.iconLeft, "icon-right": this.renderInputContent ? this.iconRight : '', iconRightClickCallback: this.iconRightClickCallback, theme: this.theme, ref: (inputElement) => (this.inputHtmlElement = inputElement) }), this.closeButton))));
+            } }, 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))));
     }
     static get is() { return "tet-expandable-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -696,7 +696,7 @@
   align-items: center;
   font-size: var(--input-font-size);
 }
-.input-container:focus-within {
+.input-container:focus-within .icon {
   --input-icon-color: var(--input-focus-icon-color);
 }
 

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: 'ad2189f28458f296fd76390eb07996637f0f99d7', class: { 'number-input': true, [this.theme]: !!this.theme,
-                'disabled': disabled, 'error': error, 'completed': completed } }, !!label && (h("label", { key: '146fc7c71058fa0c1f81ed56081f49b054faff61', class: "number-input__label", htmlFor: "number-input" }, label)), h("div", { key: 'f7f5b78ebd0b02fbad5cdc0c285c656d9b03354b', class: { 'number-input__input-container': true, 'dropdown-open': this.isOpen }, onKeyDown: this.handleContainerKeydown }, h("input", Object.assign({ key: '4058bb72542f82be4ec7c692642e2066af44e3e5', ref: (htmlInputElement) => (this.inputElement = htmlInputElement), class: { 'number-input__input': true, 'number-input__input--hidden': this.isValueHidden }, disabled: disabled, value: value, type: "number", id: "number-input" }, (this.accessibilityLabel ? { "aria-label": this.accessibilityLabel } : {}))), h("div", { key: '5a51da6e82e6bb430242f3fb1d630a764b6b1077', ref: (htmlInputElement) => (this.inputElementHidden = htmlInputElement), class: "number-input__input-invisible" }, value), !!suffix && h("div", { key: '2100c7f19934b51a7a46e53139e127c0f935e177', class: "number-input__input-suffix" }, suffix.name), !!this.suffixes && this.suffixes.length > 1 && (h("tet-button", { key: '690e1ebf1a885532fedacad732f376db57e334fb', type: "ghost", size: "small", ref: (element) => (this.chevronElement = element), class: { 'number-input__cheveron': true }, onClick: this.onChevronClick, "accessibility-label": this.buttonAccessibilityLabel, tabindex: "-1" }, !isOpen && h("tet-icon", { key: '600304642780a9fe20e28a6974179ff45842fe09', name: "chevron-down" }), isOpen && h("tet-icon", { key: '30fd2bc3ba018a178e179dec02aa6cd7812248e6', name: "chevron-up" }))), isOpen && (h("div", { key: 'cf7913cf9b324911c24f2069083a7e2e71dcc95b', class: "number-input__dropdown", ref: (htmlDivElement) => (this.dropdownElement = htmlDivElement) }, this.renderDropdownContent()))), !!helperText && h("div", { key: '77a8561e514764964b4d1599e328fa1b38286e19', class: "number-input__helper-text" }, helperText)));
+        return (h("div", { key: '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)));
     }
     static get is() { return "tet-number-input"; }
     static get encapsulation() { return "shadow"; }