@tet/tet-components 1.4.25-testing → 1.4.26-staging

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

@@ -105,87 +105,60 @@
 
 :host {
   /**
-   * @prop --stepper-input-control-background-color: sets background color for stepper control elements
-   * @prop --stepper-input-suffix-color: sets text color for suffix
-   * @prop --stepper-border-color: border color
-   * @prop --stepper-border-color-active: border color when active
+   * @prop --stepper-label-text-align: sets text alignment for the stepper label
+   * @prop --stepper-input-gap: sets the gap between the stepper buttons and the value display
    */
-  --stepper-input-control-background-color: var(--tc-background-secondary);
-  --stepper-input-suffix-color: var(--tc-text-secondary);
-  --stepper-input-border-color: var(--tc-border-tertiary);
-  --stepper-input-border-color-active: var(--tc-border-primary);
-  --stepper-button-bg: var(--tc-button-text-primary);
-  --stepper-button-border: var(--tc-button-text-secondary);
-  --stepper-value-color: var(--tc-button-text-inverse-disabled);
-  --stepper-input-focus-outline-color: var(--tc-blue-40);
   display: inline-flex;
+  --stepper-label-text-align: left;
+  --stepper-input-gap: 0.5rem;
+  --stepper-text-color: var(--tc-text-primary);
+  --stepper-label-disabled-color: var(--tc-text-secondary);
+  --stepper-value-disabled-color: var(--tc-button-text-inverse-disabled);
 }
 
 .stepper-input {
+  display: flex;
+  flex-direction: column;
+  color: var(--stepper-text-color);
+}
+.stepper-input.dark {
+  --stepper-text-color: var(--tc-text-primary-dark);
+  --stepper-label-disabled-color: var(--tc-text-secondary-dark);
+  --stepper-value-disabled-color: var(--tc-button-text-inverse-disabled-dark);
+}
+.stepper-input__inner-wrapper {
   justify-content: center;
   align-items: center;
-  gap: 0.625rem;
+  gap: var(--stepper-input-gap);
   display: inline-flex;
 }
-.stepper-input.dark {
-  --stepper-input-control-background-color: var(--tc-background-primary-dark);
-  --stepper-input-suffix-color: var(--tc-text-secondary-dark);
-  --stepper-input-border-color: var(--tc-border-tertiary-dark);
-  --stepper-input-border-color-active: var(--tc-border-primary-dark);
-  --stepper-button-bg: var(--tc-button-text-primary-dark);
-  --stepper-button-border: var(--tc-border-primary-dark);
-  --stepper-value-color: var(--tc-button-text-inverse-disabled-dark);
-  --stepper-input-focus-outline-color: var(--tc-blue-40);
-}
-.stepper-input__control {
-  background: var(--stepper-button-bg);
-  border: 0.125rem solid var(--stepper-button-border);
-  box-sizing: border-box;
-  margin: 0.25rem;
-  border-radius: 50%;
-  cursor: pointer;
-  padding-block: 0;
-  padding-inline: 0;
-  height: 2.25rem;
-  width: 2.25rem;
-}
-.stepper-input__control:focus-visible {
-  outline: 0.125rem solid var(--tc-blue-40);
-  outline-offset: 0.125rem;
-  transition: outline 0s;
-  outline-color: var(--stepper-input-focus-outline-color);
+.stepper-input__label {
+  font: 500 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
+  margin: 0 0.25rem 0.25rem;
+  text-align: var(--stepper-label-text-align);
+}
+.stepper-input__label--disabled {
+  color: var(--stepper-label-disabled-color);
 }
 .stepper-input__value {
-  border: 0.0625rem solid var(--stepper-input-border-color);
-  font: 500 1.25rem/1.5rem "Inter", "Gilroy, Arial, sans-serif";
-  color: var(--stepper-value-color);
-  background-color: var(--stepper-input-control-background-color);
-  padding-inline: 0;
-  padding-block: 0;
-  width: 3.125rem;
-  height: 2.75rem;
+  font: 500 1rem/1.5rem "Inter", "Gilroy, Arial, sans-serif";
+  width: 1.9375rem;
   text-align: center;
-  box-sizing: border-box;
-  letter-spacing: -0.029375rem;
-  border-radius: 0.625rem;
-  appearance: textfield;
-  -moz-appearance: textfield;
+  overflow: hidden;
 }
-.stepper-input__value::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
+.stepper-input__value--disabled {
+  color: var(--stepper-value-disabled-color);
 }
-.stepper-input__value:focus-within {
-  outline: 0.125rem solid var(--tc-blue-40);
-  outline-offset: 0.125rem;
-  transition: outline 0s;
-  outline-color: var(--stepper-input-focus-outline-color);
-  border: 0.0625rem solid var(--stepper-input-border-color-active);
+.stepper-input__input {
+  --input-border-radius: 0.625rem;
+  --input-font-size: 0.875rem;
+  --input-padding: 0;
+  width: 3.125rem;
 }
-.stepper-input tet-icon {
-  --icon-color: var(--stepper-button-border);
+.stepper-input__input .sc-tet-input {
+  text-align: center;
 }
-.stepper-input tet-button::part(button) {
-  width: 2.75rem;
-  height: 2.75rem;
+.stepper-input__input .sc-tet-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
 }

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

@@ -1,35 +1,34 @@
 import { h, forceUpdate } from "@stencil/core";
 import { processTranslations, t } from "../../../../services/translations/index";
-/**
- * The input enables the user to interact with and input content and data.
- * It supports left and right icons with click actions and error state.
- */
 export class TetStepperInput {
     constructor() {
-        this.value = undefined;
         this.theme = 'light';
-        this.min = undefined;
-        this.max = undefined;
-        this.step = undefined;
-        this.selectOnFocus = undefined;
+        this.value = 0;
+        this.min = 0;
+        this.max = 999;
+        this.step = 1;
+        this.size = 'large';
+        this.disabled = false;
+        this.label = '';
+        this.displayMode = 'input';
+        this.selectOnFocus = false;
         this.accessibilityLabel = '';
         this.language = 'lv';
     }
-    /** Reference to the input element. */
     inputElement;
-    /**
-     * Emits input event
-     */
+    tetInputElement;
+    inputId = `tet-stepper-input-${globalThis.crypto.randomUUID()}`;
+    /** Emits input event */
     inputValueChanged;
     async onLanguageChange(language) {
         processTranslations('tet-components', language).then(() => forceUpdate(this));
     }
-    /**
-     * Lifecycle method
-     */
     async componentWillLoad() {
         processTranslations('tet-components', this.language).then(() => forceUpdate(this));
     }
+    async componentDidLoad() {
+        await this.syncInputElement();
+    }
     /**
      * Expose method to access value
      * @returns {number} value
@@ -56,13 +55,15 @@ export class TetStepperInput {
      * Listens for focus to select value
      */
     onFocus() {
-        this.inputElement.select();
+        this.selectOnFocus && this.inputElement?.select();
     }
     /**
      * Handles input change on input element
      * @returns {void}
      */
     inputChangeHandler() {
+        if (!this.inputElement)
+            return;
         const inputElement = this.inputElement;
         const enteredText = inputElement.value;
         const num = parseInt(enteredText);
@@ -83,53 +84,68 @@ export class TetStepperInput {
         inputElement.value = `${this.value}`;
     }
     /**
-     * Reduces value by step
+     * Syncs the internal native input reference from `tet-input`
      */
-    onMinusClick = (e) => {
-        e && e.stopPropagation();
-        if (this.value - this.step < this.min) {
-            this.value = this.min;
+    async syncInputElement() {
+        const tetInputElement = this.tetInputElement;
+        if (!tetInputElement || this.displayMode !== 'input') {
+            this.inputElement = undefined;
             return;
         }
-        this.value -= this.step;
-    };
-    /**
-     * Increases value by step
-     */
-    onPlusClick = (e) => {
-        e && e.stopPropagation();
-        if (this.value + this.step > this.max) {
-            this.value = this.max;
+        const inputElement = await tetInputElement.getInputHtmlElement();
+        if (!inputElement ||
+            this.tetInputElement !== tetInputElement ||
+            this.displayMode !== 'input') {
             return;
         }
-        this.value += this.step;
-    };
-    /**
-     * Handles keyboard input for an option item.
-     *
-     * @param selectCallback
-     */
-    handleOptionKeydown(selectCallback) {
-        return (event) => {
-            const { key } = event;
-            switch (key) {
-                case ' ':
-                case 'Enter':
-                    event.preventDefault();
-                    selectCallback();
-                    break;
-                default:
-                    break;
-            }
-        };
+        this.inputElement = inputElement;
+        this.inputElement.id = this.inputId;
     }
     /**
-     * Renders component
-     * @returns {FunctionalComponent}
+     * Updates value by one step in the provided direction
      */
+    onStepClick(action) {
+        const { value, step, min, max } = this;
+        const direction = action === 'decrement' ? -1 : 1;
+        const nextValue = value + step * direction;
+        if (nextValue < min) {
+            this.value = min;
+            return;
+        }
+        if (nextValue > max) {
+            this.value = max;
+            return;
+        }
+        this.value = nextValue;
+    }
+    renderLabel() {
+        if (!this.label)
+            return;
+        const { disabled, inputId, label } = this;
+        return (h("label", { class: {
+                "stepper-input__label": true,
+                "stepper-input__label--disabled": disabled,
+            }, htmlFor: inputId }, label));
+    }
+    renderButton(type) {
+        const isDecrement = type === 'decrement';
+        return (h("tet-button", { type: "secondary", size: this.size === 'large' ? 'medium' : 'small', disabled: this.disabled, iconMode: true, iconName: isDecrement ? "tc-remove" : "tc-add", theme: this.theme, accessibilityLabel: isDecrement ? t('components-number-input-decrease') : t('components-number-input-increase'), clickCallback: () => this.onStepClick(type) }));
+    }
+    renderValueDisplay() {
+        const { theme, disabled, value, accessibilityLabel, displayMode } = this;
+        if (displayMode === 'text') {
+            return (h("span", { part: "value", class: {
+                    "stepper-input__value": true,
+                    "stepper-input__value--disabled": disabled,
+                } }, value));
+        }
+        return (h("tet-input", { ref: (htmlInputElement) => {
+                this.tetInputElement = htmlInputElement;
+                this.syncInputElement();
+            }, class: "stepper-input__input", type: "number", value: String(value ?? ''), disabled: disabled, theme: theme, ...(accessibilityLabel ? { accessibilityLabel } : {}) }));
+    }
     render() {
-        const { onMinusClick, value, onPlusClick } = this;
-        return (h("div", { key: '3512abcbdf44d9ef61448754c7b99408d6d28357', class: { 'stepper-input': true, [this.theme]: !!this.theme } }, h("tet-button", { key: '5d0f3a14fc42a91cf8c71026e1d7c7d5d71a7f82', type: "secondary", iconMode: true, theme: this.theme, size: 'small', accessibilityLabel: t('components-number-input-decrease'), onKeyDown: this.handleOptionKeydown(onMinusClick), onClick: onMinusClick }, h("tet-icon", { key: '3b304b4ee371edc0285d9f89da9f6cb60dd74611', name: "remove" })), h("input", { key: '704097c9e52b1deb612916f2d351102f698d257f', ref: (htmlInputElement) => (this.inputElement = htmlInputElement), class: "stepper-input__value", value: value, type: "number", ...(this.accessibilityLabel ? { "aria-label": this.accessibilityLabel } : {}) }), h("tet-button", { key: '6bddee6d0d9f56c5168f4a66bbee9f838e3a1674', type: "secondary", iconMode: true, theme: this.theme, size: 'small', accessibilityLabel: t('components-number-input-increase'), onKeyDown: this.handleOptionKeydown(onPlusClick), onClick: onPlusClick }, h("tet-icon", { key: '6725897d04be2d546fac6ea1609673053575dd63', name: "add" }))));
+        return (h("div", { key: '777018d303e6b137695f390408434ece3ec0e9bf', class: `stepper-input ${this.theme}` }, this.renderLabel(), h("div", { key: '7b9a640913766eda1e2178fcd5bd6a25a749b6d5', class: "stepper-input__inner-wrapper" }, this.renderButton('decrement'), this.renderValueDisplay(), this.renderButton('increment'))));
     }
     static get is() { return "tet-stepper-input"; }
     static get encapsulation() { return "shadow"; }
@@ -145,40 +161,41 @@ export class TetStepperInput {
     }
     static get properties() {
         return {
-            "value": {
-                "type": "number",
-                "mutable": true,
+            "theme": {
+                "type": "string",
+                "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Initial value"
+                    "text": "The theme of the input"
                 },
-                "attribute": "value",
-                "reflect": false
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "'light'"
             },
-            "theme": {
-                "type": "string",
-                "mutable": false,
+            "value": {
+                "type": "number",
+                "mutable": true,
                 "complexType": {
-                    "original": "'light' | 'dark'",
-                    "resolved": "\"dark\" | \"light\"",
+                    "original": "number",
+                    "resolved": "number",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The theme of the input."
+                    "text": "Initial value"
                 },
-                "attribute": "theme",
+                "attribute": "value",
                 "reflect": false,
-                "defaultValue": "'light'"
+                "defaultValue": "0"
             },
             "min": {
                 "type": "number",
@@ -195,7 +212,8 @@ export class TetStepperInput {
                     "text": "Minimal value for value"
                 },
                 "attribute": "min",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "0"
             },
             "max": {
                 "type": "number",
@@ -212,7 +230,8 @@ export class TetStepperInput {
                     "text": "Maximal value for value"
                 },
                 "attribute": "max",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "999"
             },
             "step": {
                 "type": "number",
@@ -229,7 +248,80 @@ export class TetStepperInput {
                     "text": "Step by which value is being modified"
                 },
                 "attribute": "step",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "1"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'large'",
+                    "resolved": "\"large\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the component"
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'large'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled state for the component"
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the input label"
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "displayMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'text' | 'input'",
+                    "resolved": "\"input\" | \"text\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display mode of the component"
+                },
+                "attribute": "display-mode",
+                "reflect": false,
+                "defaultValue": "'input'"
             },
             "selectOnFocus": {
                 "type": "boolean",
@@ -246,7 +338,8 @@ export class TetStepperInput {
                     "text": "Allows selection of field value on focus"
                 },
                 "attribute": "select-on-focus",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "false"
             },
             "accessibilityLabel": {
                 "type": "string",
@@ -260,7 +353,7 @@ export class TetStepperInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The value of the aria label."
+                    "text": "The value of the aria label"
                 },
                 "attribute": "accessibility-label",
                 "reflect": false,
@@ -284,7 +377,7 @@ export class TetStepperInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The translation language."
+                    "text": "The translation language"
                 },
                 "attribute": "language",
                 "reflect": false,
@@ -304,8 +397,8 @@ export class TetStepperInput {
                     "text": "Emits input event"
                 },
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
+                    "original": "number",
+                    "resolved": "number",
                     "references": {}
                 }
             }];

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

@@ -59,8 +59,8 @@ export class TetTextarea {
             'error': (errorMessages.length > 0),
             'keyboard-focus': this.focusVisible,
         };
-        return (h(Host, { key: '1d5b2bb741dd6aac44acabab08a5023a42b53606' }, h("label", { key: 'cba57c0736c4d0f310a1e1a86104cd4863624015', class: { [`${theme}`]: true } }, label &&
-            h("span", { key: '262fb7a64792d70a0a89d0a7bc31426cba85a06c', class: { 'tet-textarea__label': true, [`tet-textarea__${theme}`]: true } }, label), h("div", { key: '7d28b839ae236f82bde1b9756b5b30578774e66d', class: { 'textarea-container': true, [`tet-textarea__${theme}`]: true } }, h("textarea", { key: '6bde0e7f57d11863fcde79a1b3fd4d1f06b25c50', onFocus: this.addKeyboardFocus, onFocusout: this.removeKeyboardFocus, id: "textarea", class: textareaClasses, placeholder: placeholder, disabled: disabled, autocomplete: "off", ref: (el) => (this.textareaHtmlElement = el), maxlength: maxLength }, value))), (this.errorMessages.length > 0) && renderErrorMessages()));
+        return (h(Host, { key: '8d3dcdaafb303e7aceb6aaa4ffa8bbae06109f44' }, h("label", { key: 'ab85baaf318757fce005b69349bb430d35fd474d', class: { [`${theme}`]: true } }, label &&
+            h("span", { key: 'f48f426a399187ccf6fa56b77552e1e4b1f4d191', class: { 'tet-textarea__label': true, [`tet-textarea__${theme}`]: true } }, label), h("div", { key: '0ec9c8e9ba0e2d9085bca36c186c6e9128c157cf', class: { 'textarea-container': true, [`tet-textarea__${theme}`]: true } }, h("textarea", { key: '4a9ef73557332df4f0f6bd89b355d202e868a11e', onFocus: this.addKeyboardFocus, onFocusout: this.removeKeyboardFocus, id: "textarea", class: textareaClasses, placeholder: placeholder, disabled: disabled, autocomplete: "off", ref: (el) => (this.textareaHtmlElement = el), maxlength: maxLength }, value))), (this.errorMessages.length > 0) && renderErrorMessages()));
     }
     static get is() { return "tet-textarea"; }
     static get encapsulation() { return "shadow"; }

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

@@ -68,7 +68,7 @@ export class TetNewsCardList {
             scrollFullWidth,
             controlScrollAmount,
         };
-        return (h(Host, { key: '597c06a831b8eebbc53fc1587aa9394d28fcd120' }, h("tet-card-list", { key: 'f766121ab1fb07d9bb69138eaa2f8f6ef21c18a5', 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: '117469f6625a6d983fe2450bddf4921f43013d60' }, h("tet-card-list", { key: '43ced0d360601c08587baae5359dcdff84185cd6', 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/menu/tet-navigation-mobile/tet-navigation-mobile.js

@@ -58,13 +58,13 @@ export class TetNavigationMobile {
         this.mainDropdownToggle.emit(isTogglerExpanded);
     }
     render() {
-        return (h(Host, { key: 'b1d42011f662e5155e35a0bc8d31437412e4cbdd' }, h("navigation", { key: 'ae96be1c9319553a509fb957d349ecaae4591d4f', class: {
+        return (h(Host, { key: '410b8ecb912be53e623233de8607b2599513fce6' }, h("navigation", { key: 'deab5584ea73bf98225a91f2b0fb54209fa1fc27', class: {
                 'navigation': true,
                 'navigation--dark': this.darkMode
-            } }, h("div", { key: '7d1d7d57b4493d12fcff1cfd9683de743793ce1e', class: "navigation__nav-bar" }, h("slot", { key: '25d03ea4f1baeadd1a46304ebad40dc54692ee90' })), this.isTogglerVisible && (h("span", { key: '7061391265947f77e4fbc5710320b9501b73e55e', class: "navigation__toggler", onClick: this.onTogglerClick, onKeyDown: (e) => this.handleKeyDown(e), tabIndex: 0 }, h("tet-icon", { key: 'aed42f457586db6b3140aedf0392fe73cd23b71b', theme: this.darkMode ? "dark" : "light", name: this.isTogglerExpanded ? "close" : "burger" }))), h("div", { key: 'e20d5e2d63081124f44a8162c8aec1a431d51118', class: {
+            } }, h("div", { key: 'a5fb9f850361f6063e280bb4b79ca56f48c33225', class: "navigation__nav-bar" }, h("slot", { key: 'e7a0d2fdf08f743b4f81be7ee3aae055cdd07ed6' })), this.isTogglerVisible && (h("span", { key: 'a0565e19716ecae54662d997d12da100968cd8c7', class: "navigation__toggler", onClick: this.onTogglerClick, onKeyDown: (e) => this.handleKeyDown(e), tabIndex: 0 }, h("tet-icon", { key: 'd38e5605b66b04ba8d97e52596d4ba47bb0ee26e', theme: this.darkMode ? "dark" : "light", name: this.isTogglerExpanded ? "close" : "burger" }))), h("div", { key: '071ccb7045b4e6ddae37bae053c300148485349d', class: {
                 'navigation__dropdown': true,
                 'navigation__dropdown--expanded': this.isTogglerExpanded,
-            }, inert: !this.isTogglerExpanded }, h("slot", { key: '0672495baa852e33c0ca995bab213fabcb08bd10', name: "dropdown" })))));
+            }, inert: !this.isTogglerExpanded }, h("slot", { key: 'a27a4670604373b4fc8bfe2dcd32631cf3f12043', 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

@@ -130,13 +130,13 @@ export class TetAccordion {
         }
     }
     render() {
-        return (h(Host, { key: '1af66c95edb15cb8188933d6605f9abb08553401' }, h("div", { key: 'c9520e54dfd61e8e64c07d1780c8f399a294975f', class: {
+        return (h(Host, { key: 'e50ecaf01917687b035477d00aea4d3cd5c5f5f7' }, h("div", { key: 'c07425862c2bbef69bf8531797f6e67e5381764f', 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: 'a241142998540db2285ea00fbb9936208fcb2630', class: {
+            } }, h("div", { key: 'fcb1a4ed009c3403d7f696bd6dd1115b180683cb', class: {
                 "tet-accordion__header": true,
                 [this.theme]: true,
                 "tet-accordion__header--non-interactive": !this.isHeaderInteractive,
@@ -144,15 +144,15 @@ export class TetAccordion {
                 onClick: this.toggleOpenState,
                 onKeyDown: this.toggleAccessibilityOpenState,
                 tabIndex: 0
-            } : {}) }, h("slot", { key: '88682022b926be7471207dca95e3b395fc132c4d', name: "header" }, this.headerIconName && (h("tet-icon", { key: '10bb91ab81407172e6826c21c44a0ee53e9dfbba', name: this.headerIconName, class: "tet-accordion__header-icon tet-accordion__icon" })), this.headerImageSrc && this.headerImageSrc !== '' && (h("img", { key: '67df2e6ed69a8284d49a4e5e3c9ff17c0427319f', src: this.headerImageSrc, alt: this.headerImageAlt ? this.headerImageAlt : undefined, class: "tet-accordion__header-image" })), this.renderHeading(), this.isHeaderInteractive && (h("tet-icon", { key: '22bcde8c3516b9d6ca418244a3fe9f57280115eb', name: `chevron-${this.indicatorDirection}`, class: {
+            } : {}) }, h("slot", { key: '6d86e703f2c4d0315a5ec8ac953fcd2e9fc28ab6', name: "header" }, this.headerIconName && (h("tet-icon", { key: '1f326106ba3360f55db0e6e1f454b6e4c4101c09', name: this.headerIconName, class: "tet-accordion__header-icon tet-accordion__icon" })), this.headerImageSrc && this.headerImageSrc !== '' && (h("img", { key: '7a31e0118d5d43f54b261e26303a3f1f65374d25', src: this.headerImageSrc, alt: this.headerImageAlt ? this.headerImageAlt : undefined, class: "tet-accordion__header-image" })), this.renderHeading(), this.isHeaderInteractive && (h("tet-icon", { key: '122456dbaab62726486021b2abe9d886516e6555', name: `chevron-${this.indicatorDirection}`, class: {
                 'tet-accordion__icon': true,
                 'open': this.isOpen
-            } })))), h("div", { key: 'f427b24ff31d0af8d627fe266502e34a1b0a8fd3', ref: (element) => (this.contentWrapperElement = element), class: {
+            } })))), h("div", { key: '1178fae23f7bf0772db6838d07dd3555f393cd41', ref: (element) => (this.contentWrapperElement = element), class: {
                 'tet-accordion__content-wrapper': true,
                 'visible': this.isOpen
-            }, inert: !this.isOpen }, h("div", { key: '81dc6dd0ce61c36a27e36e77f3e82c18a402db2f', ref: (element) => (this.contentElement = element), class: {
+            }, inert: !this.isOpen }, h("div", { key: 'b0f235101ad186ff0a2e3689ad757248773a1d49', ref: (element) => (this.contentElement = element), class: {
                 'tet-accordion__content': true
-            } }, h("slot", { key: 'fd98f90222b5cd0392f8f8d9f428112d8baad277' }))))));
+            } }, h("slot", { key: '6d8e0d8cb152a0434ae078ea7f0e535ba5925969' }))))));
     }
     static get is() { return "tet-accordion"; }
     static get encapsulation() { return "shadow"; }

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

@@ -62,7 +62,7 @@ export class TetExpansionPanel {
         this.state = this.state === 'open' ? 'closed' : 'open';
     };
     render() {
-        return (h("div", { key: '23d590173f5545d85a37b9b3f9fd7d57d6e7d665', class: { 'tet-expansion-panel': true, 'open': this.state === 'open' } }, h("div", { key: 'ffe683c7cc09cab62549cc1e1b16be578e6c4d32', class: "tet-expansion-panel-content" }, h("slot", { key: 'be6a424d36b6ece556ec6139eaef5c07f758a80e' }))));
+        return (h("div", { key: '9abc379e601985d5ae92c82deedd075d4fed41d8', class: { 'tet-expansion-panel': true, 'open': this.state === 'open' } }, h("div", { key: '25a6599c3c96e280c00dc98be4192cda4c1598c9', class: "tet-expansion-panel-content" }, h("slot", { key: '2d722cf0ffe470e707045807b4cce35f28d1fc00' }))));
     }
     static get is() { return "tet-expansion-panel"; }
     static get encapsulation() { return "shadow"; }

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

@@ -120,7 +120,7 @@ export class TetNotification {
     }
     render() {
         const { headerTitle, content } = this;
-        return (h(Host, { key: '0063747546630e9a214dfdc80a61b41c63d1bf96' }, h("div", { key: 'd90f679a76f67ef9ec1ea2d791ddb4d1d1037318', class: { notification: true, [this.theme]: true } }, h("div", { key: 'f20576c608dd6727fb1dedb10051bb2dc12bbfdb', class: { item: true, [this.type]: true } }, h("div", { key: 'ed64a9d1d7fb4b719ab6064c436171c40f1e5f9c', class: "header" }, this.renderTypeIcon(), h("div", { key: '263c93ccb9da44a4500b43ee8c6e0299b79e69e4', class: "title" }, headerTitle), this.renderCloseButton()), h("div", { key: '158cdd90acf4f6e117e0f6f5fffb1354446b8f4d', class: "content" }, h("span", { key: '35b5a1cdcb14d7013c88fb777db8ffacdfdaa459', innerHTML: content }), h("div", { key: '641d1136bc110e31119a573acce0eafbbe2d233c' }, h("slot", { key: '72a449d83c4a87efe7f54d4660433e8cde4bb6c2', name: "button" })))))));
+        return (h(Host, { key: '6c0ded6dc3dc5cf1b40a2d2c0d5b86683de7d4f3' }, h("div", { key: '8ff4661d4f2857c75d98b3ebc90950024dc38f80', class: { notification: true, [this.theme]: true } }, h("div", { key: '02e692b74860456cd1b0e6a97b21f4be73ff482a', class: { item: true, [this.type]: true } }, h("div", { key: '91dc1ad5bce83b136762cad59bc859a11ec58882', class: "header" }, this.renderTypeIcon(), h("div", { key: '7c41ee7257cd0da3026fa4c2df4cf3e39de08858', class: "title" }, headerTitle), this.renderCloseButton()), h("div", { key: '4fca6fc6ba71574ce3777b78019f3c347f8ef66e', class: "content" }, h("span", { key: '37ec2ad34ff6a28df0d2086f65b1e605da3be62c', innerHTML: content }), h("div", { key: 'c1f1bb5ac08dfa393925e643c21179768d999b30' }, h("slot", { key: '33a93a9b8da579f2d4e113c057acb3f9f12926da', 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

@@ -365,7 +365,7 @@ export class TetTooltip {
         return (h("div", { class: { tooltip: true, [`${this.theme}`]: true }, role: "tooltip", "aria-hidden": this.showTooltip ? 'false' : 'true', "aria-live": this.showTooltip ? 'polite' : undefined }, h("div", { class: "tooltip-pointer", ref: (el) => (this.tooltipPointer = el) }), h("slot", null)));
     };
     render() {
-        return h(Host, { key: 'd58fd1a042ff17e143ae3fb2e526c224aafcc2bd', class: { visible: this.showTooltip } }, this.renderTooltip());
+        return h(Host, { key: '9e1242efc981b5fa1c0b019f5e792a078dfadd52', 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

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