@tet/tet-components 1.3.35-testing → 1.3.36-staging

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

@@ -4,18 +4,54 @@ import { h, Host } from "@stencil/core";
  */
 export class TetTextarea {
     constructor() {
-        this.renderErrorMessage = (message) => {
-            return h("span", { class: "tet-textarea__error-message" }, message);
+        /**
+         * Set Keyboard Focus State on Input if Tab key is pressed.
+         */
+        this.addKeyboardFocus = () => {
+            this.focusVisible = this.isKeyboardFocus;
         };
-        this.value = undefined;
-        this.label = undefined;
-        this.placeholder = undefined;
+        /**
+         * Removes Keyboard Focus State.
+         */
+        this.removeKeyboardFocus = () => {
+            this.focusVisible = false;
+        };
+        this.renderErrorMessages = () => (h("div", { class: { 'errors': true, [`tet-textarea__${this.theme}`]: true, 'errors--hidden': this.disabled } }, this.errorMessages.map((message) => h("p", { class: 'tet-textarea__error-message' }, message))));
+        this.value = '';
+        this.label = '';
+        this.placeholder = '';
         this.disabled = false;
         this.errorMessages = [];
+        this.theme = 'light';
+        this.isKeyboardFocus = true;
+        this.focusVisible = false;
+    }
+    /**
+     * Listen for Tab key event.
+     * @param {KeyboardEvent} event
+     */
+    onKeyDown(event) {
+        if (event.key === 'Tab') {
+            this.isKeyboardFocus = true;
+        }
+    }
+    /**
+     * Listen for click event and reset Keyboard focus on Input.
+     */
+    onMouseDown() {
+        this.isKeyboardFocus = false;
+        this.focusVisible = false;
     }
     render() {
-        const { value, label, placeholder, disabled, errorMessages, renderErrorMessage } = this;
-        return (h(Host, { key: 'ad7a286e44416f425640cd2e1bd2543a2fa038f3' }, label && (h("label", { key: '5dc7147d5a2ba83ec5bf0286c66e40f2246523c7', class: "tet-textarea__label", htmlFor: "textarea" }, label)), h("textarea", { key: 'cea399df1e3347ae79010c1c43e6fb79f8dbea9e', id: "textarea", class: { 'tet-textarea__base': true, 'error': !!errorMessages.length }, placeholder: placeholder, disabled: disabled, autocomplete: "off" }, value !== null && value !== void 0 ? value : ''), !!errorMessages.length && h("div", { key: 'ec0526225717a09db6641911a12bc365900a752f', class: "error-messages" }, errorMessages.map(renderErrorMessage))));
+        const { value, label, placeholder, disabled, errorMessages, theme, renderErrorMessages } = this;
+        const textareaClasses = {
+            'tet-textarea__base': true,
+            [`tet-textarea__${this.theme}`]: true,
+            'error': (errorMessages.length > 0),
+            'keyboard-focus': this.focusVisible,
+        };
+        return (h(Host, { key: 'f34b954b1d38ae335fda3c21d032a8dea5d1ac4f' }, h("label", { key: 'c680c4240522092485f1b9cbb859b35f2996065e', class: { [`${theme}`]: true } }, label &&
+            h("span", { key: '7a6874afd2b70c10433eb31b6030c48920db287f', class: { 'tet-textarea__label': true, [`tet-textarea__${theme}`]: true } }, label), h("div", { key: 'de2655f6e926eef109488b3d9902aa4e87a63927', class: { 'input-container': true, [`tet-textarea__${theme}`]: true } }, h("textarea", { key: '8fe67b12b422f386d5145ecc82a444b2a6bc4c3b', onFocus: this.addKeyboardFocus, onFocusout: this.removeKeyboardFocus, id: "textarea", class: textareaClasses, placeholder: placeholder, disabled: disabled, autocomplete: "off" }, value))), (this.errorMessages.length > 0) && renderErrorMessages()));
     }
     static get is() { return "tet-textarea"; }
     static get encapsulation() { return "shadow"; }
@@ -40,13 +76,14 @@ export class TetTextarea {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The textarea input value."
                 },
                 "attribute": "value",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "''"
             },
             "label": {
                 "type": "string",
@@ -57,13 +94,14 @@ export class TetTextarea {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The label text."
                 },
                 "attribute": "label",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "''"
             },
             "placeholder": {
                 "type": "string",
@@ -74,13 +112,14 @@ export class TetTextarea {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The placeholder text."
                 },
                 "attribute": "placeholder",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "''"
             },
             "disabled": {
                 "type": "boolean",
@@ -115,7 +154,46 @@ export class TetTextarea {
                     "text": "The error messages to display."
                 },
                 "defaultValue": "[]"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The theme of the textarea field."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "'light'"
             }
         };
     }
+    static get states() {
+        return {
+            "isKeyboardFocus": {},
+            "focusVisible": {}
+        };
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "onKeyDown",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "mousedown",
+                "method": "onMouseDown",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
 }

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

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

package/dist/collection/components/simple/lists/tet-text-list/tet-text-list.css

@@ -4772,9 +4772,12 @@
   --input-border-disabled: rgb(215, 219, 224);
   --input-disabled-background-color: rgba(88, 99, 116, 0.08);
   --input-disabled-icon-color: var(--input-icon-color);
+  --textarea-border-radius: 0.625rem;
+  --textarea-min-height: 5.25rem;
 }
 
-.tet-input__dark {
+.tet-input__dark,
+.tet-textarea__dark {
   --input-icon-color: var(--tc-icon-primary-dark);
   --input-label-color: var(--tc-text-primary-dark);
   --input-text-color: var(--tc-text-primary-dark);
@@ -4793,7 +4796,8 @@
   --input-disabled-icon-color: var(--tc-button-icon-inverse-disabled-dark);
   --input-color-error: var(--tc-alert-accent-error-dark);
 }
-.tet-input__dark.tet-input__dark.keyboard-focus:focus {
+.tet-input__dark.tet-input__dark.keyboard-focus:focus,
+.tet-textarea__dark.tet-input__dark.keyboard-focus:focus {
   outline: 0.125rem solid var(--tc-blue-40);
   outline: 0.125rem solid var(--tc-blue-40-dark);
   outline-offset: 0.125rem;
@@ -4818,7 +4822,8 @@
   --input-disabled-text-color: rgb(67, 75, 86);
 }
 
-.tet-input__light {
+.tet-input__light,
+.tet-textarea__light {
   --input-icon-color: var(--tc-icon-primary);
   --input-label-color: var(--tc-text-primary);
   --input-text-color: var(--tc-text-primary);
@@ -4850,7 +4855,8 @@
   --input-focus-background-color: #1d2128;
 }
 
-.tet-input__base {
+.tet-input__base,
+.tet-textarea__base {
   width: 100%;
   height: var(--input-height);
   box-sizing: border-box;
@@ -4883,228 +4889,101 @@
    *   }
    */
 }
-.tet-input__base::placeholder {
+.tet-input__base::placeholder,
+.tet-textarea__base::placeholder {
   color: var(--input-placeholder-color);
 }
-.tet-input__base.tet-input__mint-original:not(:disabled):hover {
+.tet-input__base.tet-input__mint-original:not(:disabled):hover,
+.tet-textarea__base.tet-input__mint-original:not(:disabled):hover {
   background-color: #1d2128;
   border-color: #01cbe0;
   box-shadow: 0 0.0625rem 0.25rem 0.125rem rgba(1, 203, 224, 0.4);
 }
-.tet-input__base.tet-input__mint-original:not(:disabled):hover.error, .tet-input__base.tet-input__mint-original:not(:disabled):focus.error, .tet-input__base.tet-input__mint-original:not(:disabled):active.error {
+.tet-input__base.tet-input__mint-original:not(:disabled):hover.error, .tet-input__base.tet-input__mint-original:not(:disabled):focus.error, .tet-input__base.tet-input__mint-original:not(:disabled):active.error,
+.tet-textarea__base.tet-input__mint-original:not(:disabled):hover.error,
+.tet-textarea__base.tet-input__mint-original:not(:disabled):focus.error,
+.tet-textarea__base.tet-input__mint-original:not(:disabled):active.error {
   border-color: rgb(233, 69, 54);
 }
-.tet-input__base.tet-input__mint-original:not(:disabled):focus, .tet-input__base.tet-input__mint-original:not(:disabled):active {
+.tet-input__base.tet-input__mint-original:not(:disabled):focus, .tet-input__base.tet-input__mint-original:not(:disabled):active,
+.tet-textarea__base.tet-input__mint-original:not(:disabled):focus,
+.tet-textarea__base.tet-input__mint-original:not(:disabled):active {
   outline: none;
 }
-.tet-input__base.tet-input__mint-original.keyboard-focus:focus {
+.tet-input__base.tet-input__mint-original.keyboard-focus:focus,
+.tet-textarea__base.tet-input__mint-original.keyboard-focus:focus {
   outline: 0.125rem solid var(--tc-blue-40);
   outline-offset: 0.125rem;
   transition: outline 0s;
   box-shadow: none;
 }
-.tet-input__base[disabled] {
+.tet-input__base[disabled],
+.tet-textarea__base[disabled] {
   cursor: not-allowed;
   outline: none;
   border: 0.0625rem solid var(--input-border-disabled);
   background-color: var(--input-disabled-background-color);
   color: var(--input-disabled-text-color);
 }
-.tet-input__base:not(:disabled).error {
+.tet-input__base:not(:disabled).error,
+.tet-textarea__base:not(:disabled).error {
   border-color: var(--input-color-error);
 }
-.tet-input__base:not(:disabled):hover {
+.tet-input__base:not(:disabled):hover,
+.tet-textarea__base:not(:disabled):hover {
   background: var(--input-hover-background-color);
 }
-.tet-input__base:not(:disabled):focus, .tet-input__base:not(:disabled):active {
+.tet-input__base:not(:disabled):focus, .tet-input__base:not(:disabled):active,
+.tet-textarea__base:not(:disabled):focus,
+.tet-textarea__base:not(:disabled):active {
   background: var(--input-focus-background-color);
   border: 0.0625rem solid var(--input-focus-border-color);
   box-shadow: 0 0 0 0.25rem var(--input-focus-outline-color);
 }
-.tet-input__base.keyboard-focus:focus {
+.tet-input__base.keyboard-focus:focus,
+.tet-textarea__base.keyboard-focus:focus {
   outline: 0.125rem solid var(--tc-blue-40);
   outline-offset: 0.125rem;
   transition: outline 0s;
   box-shadow: none;
 }
-.tet-input__base.error {
+.tet-input__base.error:not(:disabled).keyboard-focus,
+.tet-textarea__base.error:not(:disabled).keyboard-focus {
   border-color: var(--input-color-error);
 }
 
-.tet-input__label {
+.tet-input__label,
+.tet-textarea__label {
   display: block;
   margin-left: 0.25rem !important;
   margin-bottom: 0.25rem !important;
   color: var(--input-label-color);
   font: 500 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
 }
-.tet-input__label.tet-input__mint-original {
+.tet-input__label.tet-input__mint-original,
+.tet-textarea__label.tet-input__mint-original {
   margin-left: 0 !important;
   font-family: var(--font-family-fallback);
 }
-.tet-input__label:has(~ .input-container input[disabled]) {
+.tet-input__label:has(~ .input-container input[disabled]),
+.tet-textarea__label:has(~ .input-container input[disabled]) {
   color: var(--input-disabled-label-color);
 }
 
-.tet-input__error-message {
+.tet-input__error-message,
+.tet-textarea__error-message {
   font: 500 0.75rem/1rem "Inter", "Gilroy, Arial, sans-serif";
   color: var(--input-color-error);
 }
 
-@font-face {
-  font-family: "Gilroy";
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url("assets/fonts/Gilroy-W05-Medium.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Medium.woff") format("woff");
-}
-@font-face {
-  font-family: "Gilroy";
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url("assets/fonts/Gilroy-W05-Medium.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Medium.woff") format("woff");
-}
-@font-face {
-  font-family: "Gilroy";
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url("assets/fonts/Gilroy-W05-Semibold.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Semibold.woff") format("woff");
-}
-@font-face {
-  font-family: "Gilroy";
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url("assets/fonts/Gilroy-W05-Bold.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Bold.woff") format("woff");
-}
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url("assets/fonts/Inter-Regular.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-Regular.woff?v=3.19") format("woff");
-}
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url("assets/fonts/Inter-Medium.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-Medium.woff?v=3.19") format("woff");
-}
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url("assets/fonts/Inter-SemiBold.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-SemiBold.woff?v=3.19") format("woff");
-}
-@font-face {
-  font-family: "Gilroy";
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url("assets/fonts/Gilroy-W05-Medium.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Medium.woff") format("woff");
-}
-@font-face {
-  font-family: "Gilroy";
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url("assets/fonts/Gilroy-W05-Medium.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Medium.woff") format("woff");
-}
-@font-face {
-  font-family: "Gilroy";
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url("assets/fonts/Gilroy-W05-Semibold.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Semibold.woff") format("woff");
-}
-@font-face {
-  font-family: "Gilroy";
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url("assets/fonts/Gilroy-W05-Bold.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Bold.woff") format("woff");
-}
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url("assets/fonts/Inter-Regular.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-Regular.woff?v=3.19") format("woff");
-}
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url("assets/fonts/Inter-Medium.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-Medium.woff?v=3.19") format("woff");
-}
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url("assets/fonts/Inter-SemiBold.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-SemiBold.woff?v=3.19") format("woff");
-}
-:host {
-  --font-family-fallback: Gilroy, Arial, sans-serif;
-  --font-family-headline: Gilroy;
-  --font-family-content: Inter, var(--font-family-fallback);
-  font-family: var(--font-family-content);
-}
-
-.tet-textarea__base {
-  box-sizing: border-box;
-  width: 100%;
-  min-height: 5.25rem;
-  border-radius: 0.625rem;
-  padding: 0.75rem !important;
-  background: rgb(255, 255, 255);
-  border: 0.0625rem solid rgb(153, 160, 174);
-  font: 500 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
-  outline: none;
-  resize: none;
-}
-.tet-textarea__base:disabled {
-  cursor: not-allowed;
-  outline: none;
-  border-color: rgb(215, 219, 224);
-  background: rgba(88, 99, 116, 0.08);
-}
-.tet-textarea__base::placeholder {
-  color: rgb(153, 160, 174);
-}
-.tet-textarea__base:not(:disabled):hover {
-  background: rgba(88, 99, 116, 0.08);
-}
-.tet-textarea__base:not(:disabled):focus {
-  background: rgb(255, 255, 255);
-}
-.tet-textarea__base:not(:disabled):focus, .tet-textarea__base:not(:disabled):active {
-  border-color: rgb(10, 11, 13);
-  box-shadow: 0 0 0 0.25rem rgba(88, 99, 116, 0.12);
-}
-.tet-textarea__base.error {
-  border-color: rgb(233, 69, 54);
-}
-
-.tet-textarea__label {
-  display: inline-block;
-  margin-left: 0.25rem !important;
-  margin-bottom: 0.25rem !important;
-  color: rgb(10, 11, 13);
-  font: 500 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
-}
-.tet-textarea__label:disabled {
-  color: rgb(67, 75, 86);
+.errors {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+  margin-top: 0.5em;
 }
-
-.tet-textarea__error-message {
-  font: 500 0.75rem/1rem "Inter", "Gilroy, Arial, sans-serif";
-  color: rgb(233, 69, 54);
+.errors--hidden {
+  display: none;
 }
 
 .tet-body-text-max-width {

package/dist/collection/components/simple/menu/tet-navigation-mobile/tet-navigation-mobile.js

@@ -54,13 +54,13 @@ export class TetNavigationMobile {
         this.mainDropdownToggle.emit(isTogglerExpanded);
     }
     render() {
-        return (h(Host, { key: '332e35be21c5ee447f36aaa542068b0996b7c80b' }, h("navigation", { key: '483af78b98861116dfa90df76ef03d59d044f203', class: {
+        return (h(Host, { key: 'cc1b1aa87ee611a0d92eaa398470d9964e4c8c84' }, h("navigation", { key: 'a67966c59f534a61e63f213b8dd67e9eb57cfb60', class: {
                 'navigation': true,
                 'navigation--dark': this.darkMode
-            } }, h("div", { key: '5255b4833bf000f28365d13eb2fec6e8985d0b50', class: "navigation__nav-bar" }, h("slot", { key: '271edc57f8daf2df292e62b1de40ba1f48a3500a' })), this.isTogglerVisible && (h("span", { key: '1b836d11a190f7f866bc51e6d47dd5cd67f10b65', class: "navigation__toggler", onClick: this.onTogglerClick, onKeyDown: (e) => this.handleKeyDown(e), tabIndex: 0 }, !this.isTogglerExpanded && h("tet-icon", { key: '4262afcb4745993be753e99696f37f820dc751b9', class: "navigation__toggler navigation__toggler--burger", name: "burger" }), this.isTogglerExpanded && h("tet-icon", { key: '327db1e5bc326a71a26418bbfab7316bbb57862a', class: "navigation__toggler navigation__toggler--close", name: "close" }))), h("div", { key: 'c0cb7cb7c0b16bd414f689eb61af782a73a75e88', class: {
+            } }, h("div", { key: '97bfb7048844941518783e4b80066d4ff34ed316', class: "navigation__nav-bar" }, h("slot", { key: 'dbb827d5afb985136b8c2543f9610d60dcdb1c77' })), this.isTogglerVisible && (h("span", { key: '1ec147a08db09250dce57ed38cceae0a893a4251', class: "navigation__toggler", onClick: this.onTogglerClick, onKeyDown: (e) => this.handleKeyDown(e), tabIndex: 0 }, !this.isTogglerExpanded && h("tet-icon", { key: '28778de9eba097c4fd597937518bc1d22f8f1a93', class: "navigation__toggler navigation__toggler--burger", name: "burger" }), this.isTogglerExpanded && h("tet-icon", { key: 'c9a66785961b66676ef0b18e61b7cc1cf8072f49', class: "navigation__toggler navigation__toggler--close", name: "close" }))), h("div", { key: 'ea2162d16872548b201588e959c89a4f42c41521', class: {
                 'navigation__dropdown': true,
                 'navigation__dropdown--expanded': this.isTogglerExpanded,
-            } }, h("slot", { key: 'd20f722e1200a0c0d51e33e86ae9c1407027c7df', name: "dropdown" })))));
+            } }, h("slot", { key: '5d1651e6dfe715f33520f1e3d5a738b137161b1d', name: "dropdown" })))));
     }
     static get is() { return "tet-navigation-mobile"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/structural/tet-accordion/tet-accordion.js

@@ -107,22 +107,22 @@ export class TetAccordion {
         }
     }
     render() {
-        return (h(Host, { key: '60e6d779be4515f6f8f34f3873bf1c26bc2dd27c' }, h("div", { key: '4caca08b986453a115478239528cdf63e8afa1fc', class: {
+        return (h(Host, { key: '85a5bfbe20b0d3c91b0cea9dd80c556acc8ffcd0' }, h("div", { key: 'c0a3dc2e9f094a99c4092a5b4f357c8899c2edfb', class: {
                 'tet-accordion': true,
                 'tet-accordion--border': this.withBorder,
                 [`${this.theme}-theme`]: true,
                 [`tet-accordion--breakpoint-${this.breakpoint}`]: true,
                 'transparent-bg': this.transparentBackground,
-            } }, h("div", { key: '92c7a1b4655a5d5203d751020cc8be7a4c8b5099', class: { "tet-accordion__header": true, [this.theme]: true }, onClick: this.toggleOpenState, onKeyDown: this.toggleAccessibilityOpenState, tabIndex: 0 }, this.headerImageSrc && this.headerImageSrc !== '' &&
-            h("img", { key: '8e82beef563a53cc7fdf0c046769920149aa9343', src: this.headerImageSrc, alt: this.headerImageAlt ? this.headerImageAlt : undefined, class: "tet-accordion__header-image" }), this.renderHeading(), h("tet-icon", { key: '3b40a29a6c3011fbf671812f67c42aa7666b7b08', name: "chevron-down", class: {
+            } }, h("div", { key: 'd273da7ffc6c06569b1ee7f48b998e05585fb49e', class: { "tet-accordion__header": true, [this.theme]: true }, onClick: this.toggleOpenState, onKeyDown: this.toggleAccessibilityOpenState, tabIndex: 0 }, this.headerImageSrc && this.headerImageSrc !== '' &&
+            h("img", { key: '9b5fe55af2c878e7e136bc007c30422c7b1bb959', src: this.headerImageSrc, alt: this.headerImageAlt ? this.headerImageAlt : undefined, class: "tet-accordion__header-image" }), this.renderHeading(), h("tet-icon", { key: '2770e5abee56e385de90e3cf41978d13ada03c15', name: "chevron-down", class: {
                 'tet-accordion__icon': true,
                 'open': this.isOpen
-            } })), h("div", { key: '7bd51ca7be5aebb135a1c4f4241679acab3eb20d', ref: (element) => (this.contentWrapperElement = element), class: {
+            } })), h("div", { key: 'a60885eec3d86e94482703b356cbaca38976697e', ref: (element) => (this.contentWrapperElement = element), class: {
                 'tet-accordion__content-wrapper': true,
                 'visible': this.isOpen
-            }, inert: !this.isOpen }, h("div", { key: 'f8005bc454aec72b8bbf5ea4ac6147f3a1448213', ref: (element) => (this.contentElement = element), class: {
+            }, inert: !this.isOpen }, h("div", { key: '6bdaf1a8f1d80889ed2d68156b8312048134be7b', ref: (element) => (this.contentElement = element), class: {
                 'tet-accordion__content': true
-            } }, h("slot", { key: 'e7ae62ba11ea4f79bb3e722c847ac580e308d8ec' }))))));
+            } }, h("slot", { key: '79c31ec5233e8db9c4209ea9cb37fbf97b61e893' }))))));
     }
     static get is() { return "tet-accordion"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/structural/tet-expansion-panel/tet-expansion-panel.js

@@ -63,7 +63,7 @@ export class TetExpansionPanel {
         return this.state;
     }
     render() {
-        return (h("div", { key: '2cfc5a9b6e1b737ae9ec35c2b68d923177f91a09', class: { 'tet-expansion-panel': true, 'open': this.state === 'open' } }, h("div", { key: '4eb8622185ed43584281b687838329f9a6131dba', class: "tet-expansion-panel-content" }, h("slot", { key: '05d1e48538a9f5141a3d1f19a9d6cc744c08d926' }))));
+        return (h("div", { key: '8d3a43d63d7a147bc794f8faca7285cd21eb4ae5', class: { 'tet-expansion-panel': true, 'open': this.state === 'open' } }, h("div", { key: 'ac084397487be7a1a158b3890993fdc1d1b25494', class: "tet-expansion-panel-content" }, h("slot", { key: '8cf593d96b9e238309bb128f77b22c0980c85d96' }))));
     }
     static get is() { return "tet-expansion-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/text-blocks/tet-notification/tet-notification.js

@@ -116,7 +116,7 @@ export class TetNotification {
     }
     render() {
         const { headerTitle, content } = this;
-        return (h(Host, { key: '3160d4c1fda7caab004ac6b2c50f94a07f62a891' }, h("div", { key: 'deca0bc7de26bb6f91ecb2b7019207c3977fb599', class: { notification: true, [this.theme]: true } }, h("div", { key: 'dca76087578b045e61d47f0719be58f35b709f8b', class: { item: true, [this.type]: true } }, h("div", { key: '69a7318cf966bc465c039ca4b26078f2d861bc6d', class: "header" }, this.renderTypeIcon(), h("div", { key: 'eafd4f8fa1b6733e7ecc64910b1d5fc1d54004ea', class: "title" }, headerTitle), this.renderCloseButton()), h("div", { key: '58973e8880d13851cd9fcedd261deacf04814c5f', class: "content" }, h("span", { key: '9fc7abb6dd076289921f9c7cfc973ba86dcafc9a', innerHTML: content }), h("div", { key: 'ae857392dcec3debcb7cf73371792e5097ae49be' }, h("slot", { key: 'c4b295a6e78f5256fd72d22a1d7b6b771ce73d5d', name: "button" })))))));
+        return (h(Host, { key: 'f47e2e40fc38b631376fc995c95b6b17ef9a7926' }, h("div", { key: 'f28de4ca9913b891e0c196a3c1705da8895c85bd', class: { notification: true, [this.theme]: true } }, h("div", { key: '0eac189810dbc1d0483a5099e2ffd63fd5c508f2', class: { item: true, [this.type]: true } }, h("div", { key: '36e18f24247faa7227eabb3a3538c14d51661cb8', class: "header" }, this.renderTypeIcon(), h("div", { key: 'ac722222084c3a16fe2a0a59c25110cd2573f980', class: "title" }, headerTitle), this.renderCloseButton()), h("div", { key: '558e257d50da78129470e03dec4363921aad2c94', class: "content" }, h("span", { key: '3f738797645a9fd06bd1529f8d1eeb114f434d2d', innerHTML: content }), h("div", { key: '08e3d2adb10f55394082c80dc59919ad7f8a31a9' }, h("slot", { key: '5d2c46da0b437c8208aa08cae3613292c16f14ac', name: "button" })))))));
     }
     static get is() { return "tet-notification"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/text-blocks/tet-tooltip/tet-tooltip.js

@@ -351,7 +351,7 @@ export class TetTooltip {
         return isTooltipOutOfBounds;
     }
     render() {
-        return h(Host, { key: 'c24e662bedaf97a4ed591e7d8acfaecb518c6f4e', class: { visible: this.showTooltip } }, this.renderTooltip());
+        return h(Host, { key: 'b6b7767977d2fe74bcb72087a7a438c3f70a75d2', class: { visible: this.showTooltip } }, this.renderTooltip());
     }
     static get is() { return "tet-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/views/tet-address-offers-view/tet-address-offers-view.js

@@ -129,7 +129,7 @@ export class TetAddressOffersView {
         return h(Fragment, null);
     }
     render() {
-        return (h(Host, { key: '6b67666455865e05f074bbaa855aa3559471367a' }, this.renderContactForm(), this.renderHeader(), this.address && this.renderBody()));
+        return (h(Host, { key: '67a2379ba57c996cfecb21e6640c16e7e11071c2' }, this.renderContactForm(), this.renderHeader(), this.address && this.renderBody()));
     }
     static get is() { return "tet-address-offers-view"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/views/tet-b2b-service-calculator/tet-b2b-service-calculator.js

@@ -51,7 +51,7 @@ export class TetB2bServiceCalculator {
         processTranslations('tet-components', this.language).then(() => forceUpdate(this));
     }
     render() {
-        return (h("section", { key: '19d69ee7e8b3716d956c0aaaa9d4bb73a5de1aa6', class: "container" }, h("div", { key: '8593b107f6fd0acaf0e1990ec28b8c09ee9e4c0f', class: "title-block" }, t('components-b2b-calculator-title')), h("div", { key: 'eb612362043c57062045b72fb3b1dd294ba74af1', class: "calculator-block" }, h("p", { key: '869874c51a0ba74da4c682d30d1e5b6609c6ca08', class: "slider-title" }, t('components-b2b-calculator-computer-count')), h("tet-range-slider", { key: '18ccc895a891c9588f44f6863acd4cb9dcaa281c', class: "slider", size: "large", type: "primary", defaultValue: 75, maxValue: 100, withControls: false, withInput: false, dataPoints: [1, 20, 40, 60, 80, 100], displayDataPoints: [1, 20, 40, 60, 80, 100], lockToDataPoint: false }), h("div", { key: 'e15aaa6368a78233f7e71334ed8283a0de495f61', class: "control-container" }, h("div", { key: 'fcde28a136e694431a5587e9e4457870b62fba55', class: "control" }, h("tet-checkbox", { key: 'af1f87eb8e8e12521ffbaaf1c80b9aead1542210', class: "it-admin-checkbox", checked: this.withItAdmin, onCheck: this.handleWithItAdminValueChange }, t('components-b2b-calculator-it-admin-checkbox-label'))), h("div", { key: 'e5b39d654dc5a5af4ebd97dea1e607908de9275e', class: "control" }, h("tet-switch", { key: '9213ac8f1e9fae51c14399d627a9434658479d1f', class: "in-person-support-switch", checked: this.withInPersonServiceSupport, onCheck: this.handleInPersonServiceSupportValueChange }, t('components-b2b-calculator-in-person-support-switch-label')))), h("div", { key: '2b7d55c76af19863863bfb86bba86d02b11e09b3', class: "monthly-payment-block" }, h("p", { key: 'b71122463651db9c0eba62cfa93dfcf20026ccf3', class: "title" }, t('components-b2b-calculator-potential-monthly-payment')), h("p", { key: '08527411c6b78f59c221b7c9a231f039ec2bbbf9' }, h("span", { key: '0a27726f38de0c70585032df1161abde208af1dd', class: "price" }, this.totalPrice), h("span", { key: 'b74c5573de60068027d036e830b8463f1ec219e5', class: "currency" }, t('components-euro-per-month')))))));
+        return (h("section", { key: '8cda85f25ae16f047aaebba17cf5b09a5ba0108a', class: "container" }, h("div", { key: 'ae274f3c35a2757636dc200731788b7fc2b4bd4c', class: "title-block" }, t('components-b2b-calculator-title')), h("div", { key: '69f0978da2ef1e1a76ee9693a8dc114bfc39e469', class: "calculator-block" }, h("p", { key: 'e6ccf402ed96cc735da3d8ea7395be1e27d7628e', class: "slider-title" }, t('components-b2b-calculator-computer-count')), h("tet-range-slider", { key: '263f051eae4f7d06b830d61e63ccc1b1b22534d6', class: "slider", size: "large", type: "primary", defaultValue: 75, maxValue: 100, withControls: false, withInput: false, dataPoints: [1, 20, 40, 60, 80, 100], displayDataPoints: [1, 20, 40, 60, 80, 100], lockToDataPoint: false }), h("div", { key: '99b23da4d8d13786556eef06e1b04afc8a35f081', class: "control-container" }, h("div", { key: 'bfa319bf2daff7cc8b9e4f1f65a782569657fc4a', class: "control" }, h("tet-checkbox", { key: '0bfc8eba56e1eca62fbbe9e7879a9034ba22bea4', class: "it-admin-checkbox", checked: this.withItAdmin, onCheck: this.handleWithItAdminValueChange }, t('components-b2b-calculator-it-admin-checkbox-label'))), h("div", { key: '73fd15a359b09e2e5094a2b0534ffc63fc5d5dbd', class: "control" }, h("tet-switch", { key: '667a14871e68615f5ca7c9180939c2b3a7b676b1', class: "in-person-support-switch", checked: this.withInPersonServiceSupport, onCheck: this.handleInPersonServiceSupportValueChange }, t('components-b2b-calculator-in-person-support-switch-label')))), h("div", { key: 'a5d8ea4cbd3035344f4aaf336627ff327d3761b9', class: "monthly-payment-block" }, h("p", { key: '054e81603ab5db3fe159df169e9b54e22f385da5', class: "title" }, t('components-b2b-calculator-potential-monthly-payment')), h("p", { key: 'b65b239ac7c6f63ca4ddcb1c99d03d17c857814e' }, h("span", { key: 'afce3dfee4426188c9e2f28a6e2ff639754721b4', class: "price" }, this.totalPrice), h("span", { key: 'e49f0eacccb635be66fdfbd213ba6415e81e1053', class: "currency" }, t('components-euro-per-month')))))));
     }
     static get is() { return "tet-b2b-service-calculator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/views/tet-business-lines/tet-business-lines.js

@@ -46,7 +46,7 @@ export class TetBusinessLines {
     }
     render() {
         var _a;
-        return (h("div", { key: '639c9917e6619bba6e5237e7cd00c79a6ca9732f', class: "container" }, this.showHeadings && this.renderHeadings(), h("div", { key: 'a344a4c08833b9d5ed9196c31fa10914ac17aecb', class: "business-line-wrapper" }, (_a = this.businessLines) === null || _a === void 0 ? void 0 : _a.map(this.renderBusinessLineItem))));
+        return (h("div", { key: '18fc1ef0574e27d2983bd44d7718dbe1ac4e793f', class: "container" }, this.showHeadings && this.renderHeadings(), h("div", { key: 'b5b31380a2a12a0458ae6532f92db7618e3fa22a', class: "business-line-wrapper" }, (_a = this.businessLines) === null || _a === void 0 ? void 0 : _a.map(this.renderBusinessLineItem))));
     }
     static get is() { return "tet-business-lines"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/docs/styling/border-radius/tet-border-radius.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class TetBorderRadius {
     render() {
-        return (h(Host, { key: '4facf9cc9757b96b7541b50eba8232efb50873a0' }, h("div", { key: '4a345b6a0f448304b5f49632842bed813550644a', class: "variable-container" }, h("div", { key: '3bde1c9e0a6c31ab5395833cdee16ff924bcb515', class: "container-title main" }, "Border r\u0101diusa klase"), h("div", { key: '55cdc6f51cb210b8d0ad1ce2b506249c047fd408', class: "container-section" }, h("div", { key: '10ff2f2effca84d5e8c6ba759dbb0a0f053f9570', class: "variable-name" }, h("div", { key: '13236f944ac1f50159625a66d0ee4fdf5d3e2540', class: "variable-part" }, "tet"), h("div", { key: '0f63c6ae98effe5e2d147b9f9b0b7a433945bdbc', class: "variable-part" }, "-border"), h("div", { key: '28e2a1034d554ae8e288c7cef9bd6ebdae58c968', class: "variable-part variable variable-type" }, "-radius"), h("div", { key: '7b7b46c6bdded83de4b5fc4b4b9cdf7f8ebc06aa', class: "variable-part variable variable-size" }, "--md")))), h("div", { key: 'b94d53f117b2c25bd4e5f8df29396f1023b2f841', class: "tet-fonts-container" }, h("div", { key: '851c909f0d1d78d34018125a735af1b682298d2b', class: "container-title" }, "R\u0101diusa izm\u0113ri"), h("div", { key: 'cd0af74aa7a78b41b1529925801d11f32e741744', class: "section" }, h("div", { key: '945ce648b94ea0c95427f9104f5f99fa4e32d984', class: "section-variable" }, h("div", { key: 'b86a4f9d5c25e6ecd4a9dd72f871d339199e579e', class: "border tet-border-radius--xs" }), h("div", { key: 'bbde69eadeec505c1a38afb62ac50b1b04b5654c', class: "section-font-class" }, "klase: tet-border-radius--xs"), h("div", { key: 'e683da8db602de01820e227caeea6e8e9c0e49e2', class: "section-font-size" }, "border radius: 0.25rem / 4px")), h("div", { key: 'c3985e161abf69dc86c8f34a6b0dff2e13df156e', class: "section-variable" }, h("div", { key: 'e0bf2064f5bb5ed5d659bba38cc0088549d8a7f4', class: "border tet-border-radius--sm" }), h("div", { key: '7cd7d97d6f1918514ceca6b778b680ec1f31039b', class: "section-font-class" }, "klase: tet-border-radius--sm"), h("div", { key: 'c7b2d5ddeb55444aad1efb6602030b35baaae8e3', class: "section-font-size" }, "border radius: 0.5rem / 8px")), h("div", { key: '2ec178a0da30cde7df13693d35504626478859ff', class: "section-variable" }, h("div", { key: '5bedae662edda29cab90077e6f74af2ad0096b3d', class: "border tet-border-radius--md" }), h("div", { key: '22ba0e1e93d2a2235d892125cdf8b7b6a075d330', class: "section-font-class" }, "klase: tet-border-radius--md"), h("div", { key: 'f58f8a6c513945dbb07c65dc4ca15593b163e9aa', class: "section-font-size" }, "border radius: 1rem / 16px")), h("div", { key: '09b4c8c8bca0c752553cd850e37a4cc87bcfdf33', class: "section-variable" }, h("div", { key: '841de0bae04b0034e4a6a2688637c9c2e93f4402', class: "border tet-border-radius--lg" }), h("div", { key: '0917f03d966c40f02d2ecf5558467690506a6008', class: "section-font-class" }, "klase: tet-border-radius--lg"), h("div", { key: 'ffe06beb065e411b81a1867a3fa366ee7c7670cc', class: "section-font-size" }, "border radius: 1.5rem / 24px"), h("div", { key: '0f73aad1f57c4fb731fc8b87995174ed55426ae8', class: "section-font-size" })), h("div", { key: 'cbff70f17cef873f11ffdc597ae6b0dbaafabc39', class: "section-variable" }, h("div", { key: '77d9f16ae3bb791146e41475f397af4da0b68614', class: "border tet-border-radius--xl" }), h("div", { key: 'f20e5d95e7590e96abfb49221bf4c580040ca46c', class: "section-font-class" }, "klase: tet-border-radius--xl"), h("div", { key: 'e749b4724a67d40d4c35ef23fb6daba55e1518f1', class: "section-font-size" }, "border radius: 2rem / 32px"))))));
+        return (h(Host, { key: '4a46166e9e795d489c73b3ac4b62cbc16faa0bee' }, h("div", { key: '201d250d57473d034a495d4876d6816ae2859d3f', class: "variable-container" }, h("div", { key: '7bd8f01dc27afb86a6029176323e59085245b843', class: "container-title main" }, "Border r\u0101diusa klase"), h("div", { key: '0315d265667cb4eb2883cc3992c3ed55eebcf12d', class: "container-section" }, h("div", { key: '596aebf279c1589d681d6f61806a1e888e6e0afb', class: "variable-name" }, h("div", { key: '403e64949f7351d7de47c4d2a07f53c86104fa7b', class: "variable-part" }, "tet"), h("div", { key: 'e176cadca4bb79e5c3178b48257c10c3670a9e42', class: "variable-part" }, "-border"), h("div", { key: '4f60e4199a08dc721a8fac45b9f2c82aded1df32', class: "variable-part variable variable-type" }, "-radius"), h("div", { key: 'f0d8dd0ba7456fbfb45770d317cadb2d744065ba', class: "variable-part variable variable-size" }, "--md")))), h("div", { key: 'b520847efba27a289d2727592fb65e710252e1cc', class: "tet-fonts-container" }, h("div", { key: '022eda39b425d88861649108ac9ca44ef98e4038', class: "container-title" }, "R\u0101diusa izm\u0113ri"), h("div", { key: '5262606c772121aed9200a97829d2ab60be5c989', class: "section" }, h("div", { key: '56daf490c0e1daf9007ffa7a5b84955fafdc73f5', class: "section-variable" }, h("div", { key: '9edb662eed2227fa687b5012b6010bbd720635be', class: "border tet-border-radius--xs" }), h("div", { key: 'cb9b2902fe02b3ebe328badea59dc8114ec6e973', class: "section-font-class" }, "klase: tet-border-radius--xs"), h("div", { key: '510521bc56b87c4b86a4f87eb5c6e6908a6e97c4', class: "section-font-size" }, "border radius: 0.25rem / 4px")), h("div", { key: '5e414ee10d5c3f8feec6a14527b67df3139f5045', class: "section-variable" }, h("div", { key: '6fb3e800c58d732e131df9c1a912dbf27dede6a3', class: "border tet-border-radius--sm" }), h("div", { key: 'e2a7638a3bb032a9ce8bb8996d914bbf58aec228', class: "section-font-class" }, "klase: tet-border-radius--sm"), h("div", { key: '5f5373688330fa7701a31291aad224708ec977d8', class: "section-font-size" }, "border radius: 0.5rem / 8px")), h("div", { key: '35621fbe330a78782eaef97cf10e779e47a68268', class: "section-variable" }, h("div", { key: 'e1fc08f3f31acfd8606a175f5e912dea8ecab20e', class: "border tet-border-radius--md" }), h("div", { key: '42f4ce6708b575ec5b98d6795dc3c92b82aef699', class: "section-font-class" }, "klase: tet-border-radius--md"), h("div", { key: '52c083e7bfb616d7bdf9866755ef404ac5a52297', class: "section-font-size" }, "border radius: 1rem / 16px")), h("div", { key: '3a1af89dd901b25061e4a84447cc1ba71c464e93', class: "section-variable" }, h("div", { key: '62fd645b1228686cc35667ab447e6e49b58d3d47', class: "border tet-border-radius--lg" }), h("div", { key: '238940ca30bc3d8ff84bd62a2f0a6fafb482df0a', class: "section-font-class" }, "klase: tet-border-radius--lg"), h("div", { key: '847d39a42da033248d1c88980f9a93e6e3e42d37', class: "section-font-size" }, "border radius: 1.5rem / 24px"), h("div", { key: '2223cabb18b061a49629187aec91da610e8cc81b', class: "section-font-size" })), h("div", { key: 'bbbc2cc946f2b0bc987fcd82bfe17bad28810913', class: "section-variable" }, h("div", { key: '4961094a6325e41637272036e679c53239b8c979', class: "border tet-border-radius--xl" }), h("div", { key: '4e1a0ab5c7aabea38fea6759355a087391c92a75', class: "section-font-class" }, "klase: tet-border-radius--xl"), h("div", { key: 'dbc909298a26ae2ad3280c2b27f9b9c9856e18e8', class: "section-font-size" }, "border radius: 2rem / 32px"))))));
     }
     static get is() { return "tet-border-radius"; }
     static get encapsulation() { return "shadow"; }