@tet/tet-components 1.4.14-testing → 1.4.15-staging

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

@@ -100,10 +100,10 @@ export class TetDatepicker {
         return { overlay: true, closed: !this.isOpen, 'overlay-effect': this.overlayEffect };
     };
     render() {
-        return (h("div", { key: '8740adbea7e086bff83e1ae090660c1076b41c6c', class: this.getOverlayClasses(), onClick: this.handleDatepickerClose }, h("div", { key: '3cfd44b7409c3a45441990fdb839c228b1c62166', class: "container", ref: (el) => this.datepickerContainer = el }, h("tet-datepicker-header", { key: '4c8c9492aad6b63abdb41beb30f8264aa3a16c83', selectedDate: this.date, internalDate: this.internalDate, locale: this.locale, datepickerView: this.datepickerView }), this.datepickerView === 'month' &&
-            h("tet-datepicker-month-view", { key: '8ee27e99470ab266bedf32776470de4e58cfaa03', selectedDate: this.date, internalDate: this.internalDate, rangePickerMode: this.rangePickerMode, rangeDates: this.rangeDates }), this.datepickerView === 'multi-year' &&
-            h("tet-datepicker-multi-year-view", { key: '1b45ed5101997ea7cb0c4ecfc2f63a09aa2f1cf1', selectedDate: this.date, internalDate: this.internalDate }), this.datepickerView === 'year' &&
-            h("tet-datepicker-year-view", { key: '1363fb604a3245318a1e99e3f707311f218167fd', selectedDate: this.date, internalDate: this.internalDate }))));
+        return (h("div", { key: '4fe71fb245ae22a4ebdf807ca7dc7248049d139f', class: this.getOverlayClasses(), onClick: this.handleDatepickerClose }, h("div", { key: 'f430f0461cb32da7941868096b7557414a21bbf1', class: "container", ref: (el) => this.datepickerContainer = el }, h("tet-datepicker-header", { key: 'b71b4d38859a72bf3879dd416cb9b71398115b1b', selectedDate: this.date, internalDate: this.internalDate, locale: this.locale, datepickerView: this.datepickerView }), this.datepickerView === 'month' &&
+            h("tet-datepicker-month-view", { key: '185740a6c1d022659a39aea1f52305de7599f39a', selectedDate: this.date, internalDate: this.internalDate, rangePickerMode: this.rangePickerMode, rangeDates: this.rangeDates }), this.datepickerView === 'multi-year' &&
+            h("tet-datepicker-multi-year-view", { key: 'fe22e3c8e719e91875771b40eab504a5ea66afff', selectedDate: this.date, internalDate: this.internalDate }), this.datepickerView === 'year' &&
+            h("tet-datepicker-year-view", { key: '6d0252e4c42ec91dcd12f8de2fbb7c48c0fd95c1', 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

@@ -375,7 +375,7 @@ export class TetDropdown {
     }
     render() {
         const { theme, isOpen, isKeyboardFocus } = this;
-        return (h(Host, { key: '7e4b72735dd64dfa17459bde3dcb5ace019087ba' }, h("div", { key: '0f0a27eaced0102cd52b3eff74ccf2d0db610f86', class: { 'dropdown': true, 'dropdown--open': isOpen, 'focus-visible': isKeyboardFocus && isOpen, [`${theme}`]: true } }, this.renderButton(), this.renderOptions())));
+        return (h(Host, { key: '4fcc4beb65a3a5a8383c6b467d8ec00a0948f07e' }, h("div", { key: '1606e5d400a45f7d20c059c65dd817706cf43338', 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

@@ -284,13 +284,13 @@ export class TetExpandableInput {
         return '';
     }
     render() {
-        return (h(Host, { key: '3876b4379c422f3298ab44d8b2fb3827d61bc9eb' }, h("div", { key: '541f2c0c8a43d266c0a65d2b33822ee0dfcfd7c9', class: {
+        return (h(Host, { key: 'a731ff40833bfc8cbb3de2ed760f3fab833fbc98' }, h("div", { key: 'fe5525c39c905812340af9e6f25e097dedb5e181', class: {
                 container: true,
                 expanded: this.expanded,
                 [this.mode]: true,
                 [this.darkMode ? 'dark' : this.theme]: true,
                 [this.size]: true,
-            }, tabIndex: -1 }, h("div", { key: '7fe150fed747fa814e8ef9c813036424c483148b', class: "input-wrapper", ref: (element) => (this.inputWrapper = element), tabIndex: -1 }, h("tet-input", { key: '5eec2352cc4ad5f521d179592450b50a72154e6e', class: "tet-input expandable", "input-class": this.class, "input-placeholder": this.renderInputContent ? this.placeholder : '', "accessibility-label": this.accessibilityLabel, "input-value": this.value, "input-disabled": this.disabled, error: this.error, "icon-left": this.iconLeft, "icon-right": this.hasInputValue && this.expanded ? this.iconRight : '', iconRightClickCallback: this.iconRightClickCallback, theme: this.darkMode ? 'dark' : this.theme, ref: (inputElement) => (this.inputHtmlElement = inputElement) }), this.closeButton))));
+            }, tabIndex: -1 }, h("div", { key: '33dc67ec9262db0259100248fd8a4c94b80241c2', class: "input-wrapper", ref: (element) => (this.inputWrapper = element), tabIndex: -1 }, h("tet-input", { key: 'a17dadaed53b5319a5e005a90803e770824094b1', class: "tet-input expandable", "input-class": this.class, "input-placeholder": this.renderInputContent ? this.placeholder : '', "accessibility-label": this.accessibilityLabel, "input-value": this.value, "input-disabled": this.disabled, error: this.error, "icon-left": this.iconLeft, "icon-right": this.hasInputValue && this.expanded ? this.iconRight : '', iconRightClickCallback: this.iconRightClickCallback, theme: this.darkMode ? 'dark' : 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-number-input/tet-number-input.js

@@ -271,8 +271,8 @@ export class TetInput {
      */
     render() {
         const { label, helperText, value, disabled, error, completed, isOpen, suffix } = this;
-        return (h("div", { key: 'db5aeb43cf2665b6240bee1d0a782ea4098fa3df', class: { 'number-input': true, [this.theme]: !!this.theme,
-                'disabled': disabled, 'error': error, 'completed': completed } }, !!label && (h("label", { key: 'b1681cee27b1e9d745180ac3b2ade0517b1392c4', class: "number-input__label", htmlFor: "number-input" }, label)), h("div", { key: '467a8c3ff3e2f098b8eb117f9c98fecc75cfa47c', class: "number-input__input-container", onKeyDown: this.handleContainerKeydown, ref: (divElement) => (this.inputWrapperElement = divElement) }, h("input", { key: '55658e3151648491c88ee666f85487cd8f5e523c', onFocusin: () => this.toggleKeyboardFocus(true), onFocusout: () => this.toggleKeyboardFocus(false), 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: 'ddf8bc957312390ef302732286821938f00f537d', ref: (htmlInputElement) => (this.inputElementHidden = htmlInputElement), class: "number-input__input-invisible" }, value), !!suffix && h("div", { key: 'ea9789ee9f511a1fec5b691aa8a8095591c7bf19', class: "number-input__input-suffix" }, suffix.name), !!this.suffixes && this.suffixes.length > 1 && (h("tet-button", { key: '7cb1ce08521d17f58e733e19d0a5c2e9f49b0a12', 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: 'd1760b2810bd9d664e3eade28ac99a52db17f291', name: "chevron-down" }), isOpen && h("tet-icon", { key: '2d4a440344e44cedbfdc3d50d0ebf6732f134eb8', name: "chevron-up" }))), isOpen && (h("div", { key: '65555453579e0614fc0f817b1477980f68341341', class: "number-input__dropdown", ref: (htmlDivElement) => (this.dropdownElement = htmlDivElement) }, this.renderDropdownContent()))), !!helperText && h("div", { key: 'b94eb345bf5249aa089ddfe671d5d4a8bfb3e6d9', class: "number-input__helper-text" }, helperText)));
+        return (h("div", { key: '58306294b1d417609b3d2a864a8e9dc69966616d', class: { 'number-input': true, [this.theme]: !!this.theme,
+                'disabled': disabled, 'error': error, 'completed': completed } }, !!label && (h("label", { key: 'd8807961e899822ccc801ab1d7208a4b5c8b2e98', class: "number-input__label", htmlFor: "number-input" }, label)), h("div", { key: '52278bacc3db353e5a3e97af33751c9ee99a4def', class: "number-input__input-container", onKeyDown: this.handleContainerKeydown, ref: (divElement) => (this.inputWrapperElement = divElement) }, h("input", { key: '5bd0e7fef2a85d3d4b51e7447a2da51ea0324fb5', onFocusin: () => this.toggleKeyboardFocus(true), onFocusout: () => this.toggleKeyboardFocus(false), 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: 'e989d7b2002a97967d54a6acdf9b27d51cf57730', ref: (htmlInputElement) => (this.inputElementHidden = htmlInputElement), class: "number-input__input-invisible" }, value), !!suffix && h("div", { key: '28b5fd46ab07df329491d0ac310d171ab84b1d0d', class: "number-input__input-suffix" }, suffix.name), !!this.suffixes && this.suffixes.length > 1 && (h("tet-button", { key: '92d6a0e28ac640c0b6f43658bfefd954ca58a9d4', 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: 'a3d5c37e4d87bfdc340d173db68fbc95923f8bde', name: "chevron-down" }), isOpen && h("tet-icon", { key: '59ba90e98b52f7aeca966debdc76cfda941a9b7a', name: "chevron-up" }))), isOpen && (h("div", { key: '99608869c1d37aba3c93d1f2f7b6c267fa2ab639', class: "number-input__dropdown", ref: (htmlDivElement) => (this.dropdownElement = htmlDivElement) }, this.renderDropdownContent()))), !!helperText && h("div", { key: '94e94cf9e4540b15330e2c3b0485bfb190c47be8', class: "number-input__helper-text" }, helperText)));
     }
     static get is() { return "tet-number-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/inputs/tet-range-slider/tet-range-slider.js

@@ -760,31 +760,31 @@ export class TetRangeSlider {
         return dataListItem;
     };
     render() {
-        return (h(Host, { key: '5ee5cc82d572d6afa1db61d68e51f8fb296844de' }, h("div", { key: '61f181094d36dd5a223c7c51e92fced2da394312', class: {
+        return (h(Host, { key: '7b6df525a01291a02538f9e3e5ed4fc4e0bf6f4d' }, h("div", { key: '64347e6a138a776253ef28ddf144ee5bd96f9793', class: {
                 'range-slider': true,
                 [`range-slider--${this.containerSize}`]: true,
                 [`range-slider--${this.type}`]: true,
                 'range-slider--no-controls': !this.withControls,
                 'range-slider--no-input': !this.withInput,
                 [this.theme]: true,
-            } }, h("div", { key: '204b5551792722a90ffc7cf49d4f925a742f074d', class: {
+            } }, h("div", { key: '0751c6222179ee07b1bea1204103a9f9321e4959', class: {
                 'range-slider__input-container': true,
                 'hidden': !this.withInput,
-            } }, h("tet-input", { key: 'f55bfb28039b28f02086ae949675315b7358df22', "input-class": "range-slider__input", "input-type": "number", "input-value": this.currentValue, ref: inputEl => (this.inputRef = inputEl), theme: this.theme, onInput: this.onInputChange, onKeyDown: (event) => this.onInputKeyDown(event, true), accessibilityLabel: this.numberInputAccessibilityLabel, ...(this.containerSize !== 'large' ? { inputTabindex: 3 } : {}) })), h("div", { key: '256d7a1402628ff6d842729ea604c726864570fd', class: "range-slider__container" }, h("tet-button", { key: '0ee35410b1e3fb572bc8d35a01561df38f08439f', theme: this.theme, iconMode: true, class: {
+            } }, h("tet-input", { key: '1c5142cc0fc704181b0255de454b8b217b2560e1', "input-class": "range-slider__input", "input-type": "number", "input-value": this.currentValue, ref: inputEl => (this.inputRef = inputEl), theme: this.theme, onInput: this.onInputChange, onKeyDown: (event) => this.onInputKeyDown(event, true), accessibilityLabel: this.numberInputAccessibilityLabel, ...(this.containerSize !== 'large' ? { inputTabindex: 3 } : {}) })), h("div", { key: '4cfcf21065d4e8b13ceedb18133b8a3077adf6f3', class: "range-slider__container" }, h("tet-button", { key: '91bac1cd9267e19c35ca435eb95f6893df0b6a81', theme: this.theme, iconMode: true, class: {
                 'range-slider__control': true,
                 'range-slider__control--left': true,
                 'hidden': !this.withControls,
-            }, clickCallback: this.onControlPreviousClick, ...(this.reduceButtonAccessibilityLabel ? { accessibilityLabel: this.reduceButtonAccessibilityLabel } : {}), ...(this.containerSize !== 'large' ? { tabindex: 2 } : {}) }, h("tet-icon", { key: 'df947b9e5d1079bcba4fadaed88cceb603c126c7', name: "remove", class: "range-slider__control--icon" })), h("div", { key: 'bfb148aa94b2036ee0de83b7460d3f69eb078353', onTouchStart: this.onContainerTouchStart, onTouchEnd: this.onContainerTouchEnd, onMouseDown: this.onContainerMouseDown, onScroll: this.onContainerScroll, ref: sliderContainerEl => (this.sliderContainerRef = sliderContainerEl), class: "range-slider__slider-container", draggable: false }, h("div", { key: '5045ebfd5cdd629ec90c14246d4b9439695bef48', class: "range-slider__slider-wrapper" }, h("input", { key: '3bd3c17dbecf5f0a180de4e1776d88aa8280e847', ref: sliderEl => (this.sliderRef = sliderEl), type: "range", min: this.minValue, max: this.maxValue, step: this.step, value: this.defaultValue, list: "steplist", id: "rangeInput", onInput: this.onSliderInput, onChange: this.onSliderChange, onPointerDown: this.onSliderPointerDown, onPointerUp: this.onSliderPointerUp, onKeyDown: this.onInputKeyDown, class: "range-slider__slider", ...(this.sliderInputAccessibilityLabel ? { "aria-label": this.sliderInputAccessibilityLabel } : {}), ...(this.containerSize !== 'large' ? { tabindex: 1 } : {}) })), h("div", { key: '7968073f304f29e0e8ada95eb3ee0a8c489e92c5', class: "range-slider__track range-slider__track--background" }), h("div", { key: '8664216a48018a29590e1a082cfa2a1addada335', ref: progressTrackEl => (this.progressTrackRef = progressTrackEl), class: "range-slider__track range-slider__track--progress" }), h("div", { key: '64a2f9320bcc93baa534c583146087a1096a0a22', ref: tickContainerEl => (this.tickContainerRef = tickContainerEl), class: "range-slider__tick-container" }), h("div", { key: 'a04c3196e02ee8c4347d0e235bd25887e4bcfd54', ref: dataLabelEl => (this.dataLabelRef = dataLabelEl), class: {
+            }, clickCallback: this.onControlPreviousClick, ...(this.reduceButtonAccessibilityLabel ? { accessibilityLabel: this.reduceButtonAccessibilityLabel } : {}), ...(this.containerSize !== 'large' ? { tabindex: 2 } : {}) }, h("tet-icon", { key: '2c571ca63a933dc91e12c848e2a9938b0c0fb553', name: "remove", class: "range-slider__control--icon" })), h("div", { key: 'e6bee19f5587d8c218b64f44b988f7680ba8075a', onTouchStart: this.onContainerTouchStart, onTouchEnd: this.onContainerTouchEnd, onMouseDown: this.onContainerMouseDown, onScroll: this.onContainerScroll, ref: sliderContainerEl => (this.sliderContainerRef = sliderContainerEl), class: "range-slider__slider-container", draggable: false }, h("div", { key: 'fa4fd5b4aeacf122d6602be3eed3cb727d2e406d', class: "range-slider__slider-wrapper" }, h("input", { key: '71e6dbfc560f5c2df5fe03e61e07ba336d23c021', ref: sliderEl => (this.sliderRef = sliderEl), type: "range", min: this.minValue, max: this.maxValue, step: this.step, value: this.defaultValue, list: "steplist", id: "rangeInput", onInput: this.onSliderInput, onChange: this.onSliderChange, onPointerDown: this.onSliderPointerDown, onPointerUp: this.onSliderPointerUp, onKeyDown: this.onInputKeyDown, class: "range-slider__slider", ...(this.sliderInputAccessibilityLabel ? { "aria-label": this.sliderInputAccessibilityLabel } : {}), ...(this.containerSize !== 'large' ? { tabindex: 1 } : {}) })), h("div", { key: '9d48abfbdd6e5bebd7b0e077c77d1befad826fcd', class: "range-slider__track range-slider__track--background" }), h("div", { key: 'f2a3996931d3d10c744b6abff8575c6358217e5e', ref: progressTrackEl => (this.progressTrackRef = progressTrackEl), class: "range-slider__track range-slider__track--progress" }), h("div", { key: 'fd6de45347d1a86580569e25875f28821df21103', ref: tickContainerEl => (this.tickContainerRef = tickContainerEl), class: "range-slider__tick-container" }), h("div", { key: 'e2d165f5d8287ec066da9be62f895c1407c13ddd', ref: dataLabelEl => (this.dataLabelRef = dataLabelEl), class: {
                 'range-slider__data-label-container': true,
                 'hidden': this.type === 'secondary' && this.containerSize === 'small',
-            } })), h("div", { key: '62c19f3773a67fcf9b6179e3b22f12c9dc2eff45', class: {
+            } })), h("div", { key: 'cf5a10bf14a684ef920a9e0c9652a4e1f81ac80c', class: {
                 'range-slider__current-step-container': true,
                 'hidden': !this.withCurrentStepCounter,
-            } }, h("div", { key: '7aa0e59e8d5df709761b2ad018ec0599ae3b5fc1', class: "range-slider__current-step", "aria-live": "polite" }, this.dataSet.indexOf(this.getClosestOverrideDataPoint()) + 1, "/", this.dataPoints.length)), h("div", { key: '599228503d127e54e75e1a4771f7304ec85cba52', ref: toolbarHandleEl => (this.tooltipHandleRef = toolbarHandleEl), class: "range-slider__tooltip-handle" }, h("div", { key: '2133bc7256d070f8313b8a9a5f51bfed1009e742', class: "range-slider__tooltip translation-none", style: { [`--tooltip-offset`]: `${this.tooltipOffset}rem` }, "aria-live": "polite" }, this.getTooltipValue())), h("tet-button", { key: 'b1ab82c658347b4d5f1240c3945a6dd064a28a4e', theme: this.theme, iconMode: true, class: {
+            } }, h("div", { key: 'ebcc9fe3ee4dc266eed71aa2e4200d32ce711235', class: "range-slider__current-step", "aria-live": "polite" }, this.dataSet.indexOf(this.getClosestOverrideDataPoint()) + 1, "/", this.dataPoints.length)), h("div", { key: '812d5f2890024bf4920dd0e3fe5126fe13cd173e', ref: toolbarHandleEl => (this.tooltipHandleRef = toolbarHandleEl), class: "range-slider__tooltip-handle" }, h("div", { key: '94195c1ce698c9d386eeb3d8e1ee77bcdf5b5c8a', class: "range-slider__tooltip translation-none", style: { [`--tooltip-offset`]: `${this.tooltipOffset}rem` }, "aria-live": "polite" }, this.getTooltipValue())), h("tet-button", { key: '996619cf413eec42c94648ff0087c19462161f50', theme: this.theme, iconMode: true, class: {
                 'range-slider__control': true,
                 'range-slider__control--right': true,
                 'hidden': !this.withControls,
-            }, clickCallback: this.onControlNextClick, ...(this.addButtonAccessibilityLabel ? { accessibilityLabel: this.addButtonAccessibilityLabel } : {}), ...(this.containerSize !== 'large' ? { tabindex: 4 } : {}) }, h("tet-icon", { key: 'd4a8a531af482f8b05dcfd9f489bf7d3342e78da', name: "add", class: "range-slider__control--icon" }))))));
+            }, clickCallback: this.onControlNextClick, ...(this.addButtonAccessibilityLabel ? { accessibilityLabel: this.addButtonAccessibilityLabel } : {}), ...(this.containerSize !== 'large' ? { tabindex: 4 } : {}) }, h("tet-icon", { key: 'f54026e9957ab098656afc46589f44d5f12a89e0', name: "add", class: "range-slider__control--icon" }))))));
     }
     static get is() { return "tet-range-slider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -129,7 +129,7 @@ export class TetStepperInput {
      */
     render() {
         const { onMinusClick, value, onPlusClick } = this;
-        return (h("div", { key: '9107250eeb31e1355f3d27c7b9792f46f457ac02', class: { 'stepper-input': true, [this.theme]: !!this.theme } }, h("tet-button", { key: '3bbbda40a241c18eaa5b13400d87b22ba7dd381d', 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: 'd53cea114b7727fddfffb3f6b6ad352595e3ba0a', name: "remove" })), h("input", { key: '0b3c5978d3bcf3d5b4391a241674e111cfe3147f', ref: (htmlInputElement) => (this.inputElement = htmlInputElement), class: "stepper-input__value", value: value, type: "number", ...(this.accessibilityLabel ? { "aria-label": this.accessibilityLabel } : {}) }), h("tet-button", { key: 'ab77d2e15bbb53b9ff37e5392ed19f37614c0109', 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: '69da72af44c828a30b40c21c0c2cd9c85eb0445d', name: "add" }))));
+        return (h("div", { key: '78cbe4b6dbf86e93e6d5286e7209da59bc66deaa', class: { 'stepper-input': true, [this.theme]: !!this.theme } }, h("tet-button", { key: 'ad3291ad57d581fd399e013b716d7d463764caf1', 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: '05538edc2b320de78d18590468197cdde0c5013b', name: "remove" })), h("input", { key: '60e78e5e742811791bf29ffa6ff0b1f21e9742c7', ref: (htmlInputElement) => (this.inputElement = htmlInputElement), class: "stepper-input__value", value: value, type: "number", ...(this.accessibilityLabel ? { "aria-label": this.accessibilityLabel } : {}) }), h("tet-button", { key: 'e0d8619b694c385e97b9afebea892f734ef81634', 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: '2faae11136e7316f84bb59c5952372342ab44066', name: "add" }))));
     }
     static get is() { return "tet-stepper-input"; }
     static get encapsulation() { return "shadow"; }

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: 'c868ae99241363fbcee19570ea99f5ec4c7f6b12' }, h("label", { key: 'a6b5ef7ccdf0aebbbd9ec8b90b90abf265ad47a6', class: { [`${theme}`]: true } }, label &&
-            h("span", { key: '90433f2927f52e20b464a077f28b5371ab236b86', class: { 'tet-textarea__label': true, [`tet-textarea__${theme}`]: true } }, label), h("div", { key: '085405b8d8f919d303466600f6c34d5775aab1dc', class: { 'textarea-container': true, [`tet-textarea__${theme}`]: true } }, h("textarea", { key: '7cb10f64d64fe48143b3c6388a1a8dd580858926', 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: 'f805680129976460439b0be0f9371c8cfc806471' }, h("label", { key: '6dbf858bdfa165acd784b8cb439d3b2fece90311', class: { [`${theme}`]: true } }, label &&
+            h("span", { key: 'da5769d16d50125ffbc04ddd93bbe2a8069482a5', class: { 'tet-textarea__label': true, [`tet-textarea__${theme}`]: true } }, label), h("div", { key: '95bc7d3f0f0ca2dfdf66b14fefd5a122b9566682', class: { 'textarea-container': true, [`tet-textarea__${theme}`]: true } }, h("textarea", { key: 'ae66464f68e938193e217243846ea307e70ffc73', 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-link-card-list/tet-link-card-list.js

@@ -48,7 +48,7 @@ export class TetLinkCardList {
     }
     render() {
         const { theme, layout, items } = this;
-        return (h(Host, { key: 'fe4319a3a8a99be1888e0ee9fb5106816c6632a3' }, h("ul", { key: '7d5e3556b7f230210efbed59c109b2f83485e46e', class: `link-card-list link-card-list--${theme} link-card-list--${layout}` }, items?.length
+        return (h(Host, { key: '86277af7437beff013153ad044ceb4a9c971daff' }, h("ul", { key: 'b710f81abf25e617e9433bad956938169111a739', class: `link-card-list link-card-list--${theme} link-card-list--${layout}` }, items?.length
             ? items.map(this.renderListItem.bind(this))
             : this.renderPlaceholders())));
     }

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: '0e60282d675d2f955ef19a42a6428b968206d1aa' }, h("tet-card-list", { key: '0a47d418d83b1ac1c2abb6f0067091b2c3b7e963', 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: 'c3da65767536b86fd79c5b24ea924369f5f5ee36' }, h("tet-card-list", { key: '42e60e31fcda7eb16f4bbcb6afc2bd31f645b19f', 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-business-navigation/tet-business-navigation.css

@@ -112,6 +112,7 @@
   flex-direction: column;
   max-width: 20.5rem;
   width: 100%;
+  transition: width 2s;
 }
 @media screen and (max-width: 63.9375rem) {
   .business-navigation {
@@ -133,8 +134,14 @@
   --tet-business-navigation-item-selected-item-color: var(--tc-text-inverse-primary);
   --tet-business-navigation-item-selected-icon-color: var(--tc-layer-primary);
   --tet-business-navigation-label-color: var(--tc-text-primary);
-}
-.business-navigation.light .business-navigation-item:focus-visible {
+  --tet-business-navigation-item-divider-color: var(--tc-border-quaternary);
+  --tet-expandable-business-navigation-border-shadow: var(--tc-elevation-one);
+  --tet-expandable-business-navigation-border-color: var(--tc-border-quaternary);
+  --tet-business-navigation-item-chevron-color: var(--tc-icon-secondary);
+  --tet-business-navigation-item-chevron-pressed-color: var(--tc-grey-60);
+}
+.business-navigation.light .business-navigation-item:focus-visible,
+.business-navigation.light .business-navigation-expand-button:focus-visible {
   outline: 0.125rem solid var(--tc-blue-40);
   outline-offset: -0.125rem;
   transition: outline 0s;
@@ -148,35 +155,85 @@
   --tet-business-navigation-item-selected-item-color: var(--tc-text-inverse-primary-dark);
   --tet-business-navigation-item-selected-icon-color: var(--tc-layer-primary-dark);
   --tet-business-navigation-label-color: var(--tc-text-primary-dark);
-}
-.business-navigation.dark .business-navigation-item:focus-visible {
+  --tet-business-navigation-item-divider-color: var(--tc-border-quaternary-dark);
+  --tet-expandable-business-navigation-border-shadow: var(--tc-elevation-one-dark);
+  --tet-expandable-business-navigation-border-color: var(--tc-border-quaternary-dark);
+  --tet-business-navigation-item-chevron-color: var(--tc-icon-secondary-dark);
+  --tet-business-navigation-item-chevron-pressed-color: var(--tc-grey-60-dark);
+}
+.business-navigation.dark .business-navigation-item:focus-visible,
+.business-navigation.dark .business-navigation-expand-button:focus-visible {
   outline: 0.125rem solid var(--tc-blue-40);
   outline: 0.125rem solid var(--tc-blue-40-dark);
   outline-offset: -0.125rem;
   transition: outline 0s;
 }
+.business-navigation.expandable {
+  border-radius: 1rem;
+  padding: 1.5rem;
+  box-shadow: var(--tet-expandable-business-navigation-border-shadow);
+  border: 0.0625rem solid var(--tet-expandable-business-navigation-border-color);
+  transition: width 2s;
+}
+@media screen and (max-width: 63.9375rem) {
+  .business-navigation.expandable {
+    display: none;
+  }
+}
+.business-navigation.expandable.closed {
+  width: auto;
+  padding: 1.5rem 1rem;
+}
+.business-navigation.expandable.closed .business-navigation-expand-button {
+  justify-content: center;
+}
+.business-navigation.expandable.closed .business-navigation-item__icon {
+  margin-right: 0;
+}
+.business-navigation-expand-button {
+  display: flex;
+  padding: 0.75rem;
+  align-items: flex-start;
+  border-radius: 0.5rem;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+}
+.business-navigation-expand-button__icon {
+  margin-right: 0.75rem;
+  --icon-size: 1.5rem;
+  --icon-color: var(--tet-business-navigation-label-color);
+  transition: transform 0.2s ease;
+}
+.business-navigation-expand-button__icon.closed {
+  transform: rotate(180deg);
+  margin-right: 0;
+}
+.business-navigation-expand-button:hover {
+  background-color: var(--tet-business-navigation-item-hover-background-color);
+}
+.business-navigation-expand-button:active {
+  background-color: var(--tet-business-navigation-item-active-background-color);
+}
+.business-navigation-divider {
+  width: 100%;
+  margin: 0.75rem 0;
+  background-color: var(--tet-business-navigation-item-divider-color);
+  height: 0.0625rem;
+  border: 0;
+  min-height: 0.0625rem;
+}
 .business-navigation-item {
   display: flex;
   flex-direction: row;
-  padding: 1rem;
+  padding: 0.75rem;
   align-items: flex-start;
-  gap: 0.75rem;
   align-self: stretch;
   border: none;
   border-radius: 0.5rem;
   background-color: var(--tet-business-navigation-item-background-color);
   cursor: pointer;
 }
-@media screen and (max-width: 63.9375rem) {
-  .business-navigation-item:first-child {
-    margin-left: 1.5rem;
-  }
-}
-@media screen and (max-width: 63.9375rem) {
-  .business-navigation-item:last-child {
-    margin-right: 1.5rem;
-  }
-}
 @media screen and (max-width: 63.9375rem) {
   .business-navigation-item {
     display: inline-flex;
@@ -190,10 +247,39 @@
 .business-navigation-item:hover {
   background-color: var(--tet-business-navigation-item-hover-background-color);
 }
+.business-navigation-item:hover .business-navigation-item__chevron {
+  --icon-color: var(--tet-business-navigation-label-color);
+}
 .business-navigation-item:active {
   background-color: var(--tet-business-navigation-item-active-background-color);
 }
+.business-navigation-item:active .business-navigation-item__chevron {
+  --icon-color: var(--tet-business-navigation-item-chevron-pressed-color);
+}
+.business-navigation-item__wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+@media screen and (max-width: 63.9375rem) {
+  .business-navigation-item__wrapper:first-child {
+    margin-left: 1.5rem;
+  }
+}
+@media screen and (max-width: 63.9375rem) {
+  .business-navigation-item__wrapper:last-child {
+    margin-right: 1.5rem;
+  }
+}
+.business-navigation-item-sublevel {
+  display: flex;
+  flex-direction: column;
+  padding: 0.25rem 0;
+  align-items: flex-start;
+  align-self: stretch;
+}
 .business-navigation-item__icon {
+  margin-right: 0.75rem;
   --icon-size: 1.5rem;
   --icon-color: var(--tet-business-navigation-label-color);
 }
@@ -202,10 +288,27 @@
     --icon-size: 1.25rem;
   }
 }
+.business-navigation-item__chevron {
+  margin-left: 0.5rem;
+  --icon-size: 1.25rem;
+  --icon-color: var(--tet-business-navigation-item-chevron-color);
+}
+.business-navigation-item__chevron.sublevelOpened {
+  --icon-color: var(--tet-business-navigation-label-color);
+}
 .business-navigation-item__title {
   font: 500 1rem/1.5rem "Inter", "Gilroy, Arial, sans-serif";
   text-align: start;
   color: var(--tet-business-navigation-label-color);
+  margin-right: auto;
+}
+.business-navigation-item__title.sublevel {
+  font: 500 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
+}
+.business-navigation-item__tooltip {
+  --tooltip-delay-show: 1s;
+  --tooltip-padding: 0.75rem 1rem;
+  --tooltip-border-radius: 0.5rem;
 }
 .business-navigation-item.selected {
   background-color: var(--tet-business-navigation-item-selected-background-color);
@@ -213,6 +316,11 @@
 .business-navigation-item.selected .business-navigation-item__title {
   color: var(--tet-business-navigation-item-selected-item-color);
 }
-.business-navigation-item.selected .business-navigation-item__icon {
+.business-navigation-item.selected .business-navigation-item__icon, .business-navigation-item.selected .business-navigation-item__chevron {
   --icon-color: var(--tet-business-navigation-item-selected-icon-color);
+}
+.business-navigation-item.sublevel {
+  padding: 0.5rem 1.5rem;
+  width: 100%;
+  border-radius: 0.5rem;
 }

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

@@ -1,25 +1,39 @@
-import { h } from "@stencil/core";
+import { forceUpdate, h } from "@stencil/core";
+import { processTranslations, t } from "../../../../services/translations/index";
+import { TooltipPosition } from "../../text-blocks/tet-tooltip/enums/TooltipPosition";
 export class TetBusinessNavigation {
     constructor() {
         this.menuItems = undefined;
         this.theme = 'light';
+        this.expandable = false;
+        this.language = 'lv';
         this.selectedItemId = undefined;
+        this.mainMenuItemId = undefined;
         this.positions = { scrollLeft: 0, mouseX: 0 };
+        this.expanded = true;
+        this.sublevelsOpened = false;
     }
     navigationContainer;
     isPointerDown;
-    /** Event emitter for menu item click passing menu id */
+    /** Event emitter for the menu item click passing menu id */
     menuClickEvent;
-    /** Method to run on menu item selection */
-    async selectMenuItem(id) {
-        this.selectedItemId = id;
-        this.menuClickEvent.emit({ id });
-    }
     componentWillLoad() {
         if (!this.menuItems || this.menuItems.length === 0) {
             return;
         }
         this.selectedItemId = this.menuItems.find((item) => item.selected === true)?.id || this.menuItems[0].id;
+        this.mainMenuItemId = this.selectedItemId;
+        processTranslations('tet-components', this.language || 'lv').then(() => forceUpdate(this));
+    }
+    /** Method to run on menu item selection */
+    async selectMenuItem(id, mainMenuId) {
+        if (this.selectedItemId === id) {
+            return;
+        }
+        this.selectedItemId = id;
+        this.mainMenuItemId = mainMenuId || id;
+        localStorage.setItem('selectedSublevelId', JSON.stringify(mainMenuId ? id : ''));
+        this.menuClickEvent.emit({ id });
     }
     /**
      * Initialises the mouse drag.
@@ -59,15 +73,53 @@ export class TetBusinessNavigation {
         this.navigationContainer.removeEventListener('mouseup', this.onContainerMouseUp);
         this.navigationContainer.removeEventListener('mouseleave', this.onContainerMouseUp);
     };
+    /** Expand and minimize menu.*/
+    toggleMenu = (e) => {
+        e.preventDefault();
+        if (this.expanded) {
+            this.selectedItemId = this.mainMenuItemId === this.selectedItemId ? this.selectedItemId : this.mainMenuItemId;
+        }
+        else {
+            const sublevelId = Number(localStorage.getItem('selectedSublevelId'));
+            this.selectedItemId = sublevelId > 0 ? sublevelId : this.mainMenuItemId;
+            this.sublevelsOpened = sublevelId > 0;
+        }
+        this.expanded = !this.expanded;
+    };
+    /** Open and close sublevel menu items. */
+    toggleSublevels = (id) => {
+        if (this.selectedItemId !== id) {
+            this.selectedItemId = id;
+        }
+        this.sublevelsOpened = !this.sublevelsOpened;
+        localStorage.setItem('selectedSublevelId', JSON.stringify(''));
+    };
+    /** Render second menu level */
+    renderSublevelItems = (sublevels, id) => {
+        if (!this.sublevelsOpened) {
+            return null;
+        }
+        const renderSublevelItem = sublevels.map((item) => (h("button", { class: { 'business-navigation-item': true, 'sublevel': true, 'selected': this.selectedItemId === item.id }, key: item.id, onClick: () => this.selectMenuItem(item.id, id) }, h("span", { class: { 'business-navigation-item__title': true, 'sublevel': true } }, item.name))));
+        return h("div", { class: "business-navigation-item-sublevel" }, renderSublevelItem);
+    };
     /** Render menu item */
     renderMenuItem = (menuItem) => {
-        const { id, icon, name } = menuItem;
-        return (h("button", { key: id, class: { 'business-navigation-item': true, 'selected': this.selectedItemId === id }, onClick: () => this.selectMenuItem(id) }, icon && h("tet-icon", { class: "business-navigation-item__icon", name: icon }), h("span", { class: "business-navigation-item__title" }, name)));
+        const { id, icon, name, sublevels } = menuItem;
+        const { expanded, sublevelsOpened } = this;
+        const withSublevels = expanded && sublevels && sublevels.length > 0;
+        return (h("div", { class: "business-navigation-item__wrapper" }, h("button", { key: id, class: { 'business-navigation-item': true, 'selected': this.selectedItemId === id }, onClick: () => (withSublevels ? this.toggleSublevels(id) : this.selectMenuItem(id)), "aria-label": name }, icon && h("tet-icon", { class: "business-navigation-item__icon", name: icon }), !this.expandable || expanded ? (h("span", { class: "business-navigation-item__title" }, name)) : (h("tet-tooltip", { class: "business-navigation-item__tooltip", position: TooltipPosition.RIGHT, theme: this.theme }, name)), withSublevels && (h("tet-icon", { class: { 'business-navigation-item__chevron': true, 'sublevelOpened': sublevelsOpened }, name: sublevelsOpened ? 'chevron-up' : 'chevron-down' }))), withSublevels && this.renderSublevelItems(sublevels, id)));
+    };
+    /** Render button to expand and minimize the menu container. */
+    renderExpandButton = () => {
+        if (!this.expandable) {
+            return null;
+        }
+        return (h("button", { class: "business-navigation-expand-button", onClick: (e) => this.toggleMenu(e), "aria-label": t('components-business-navigation-expand-button-label') }, h("tet-icon", { class: { 'business-navigation-expand-button__icon': true, 'closed': !this.expanded }, name: 'tc-minimize' }), this.expanded && (h("span", { class: "business-navigation-item__title" }, t('components-business-navigation-expand-button-label')))));
     };
     /** Render Functional Component*/
     render() {
-        const { menuItems, theme } = this;
-        return (h("div", { key: 'adaed0f2dd64505a2e2286a9deaf550bfc068aba', class: { 'business-navigation': true, [`${theme}`]: true }, role: "group", onMouseDown: this.onContainerMouseDown, ref: (ref) => (this.navigationContainer = ref) }, menuItems && menuItems.map(this.renderMenuItem)));
+        const { menuItems, theme, expandable } = this;
+        return (h("div", { key: '752d6551dbd03ab8b4f99aede53a5a16dbf56bd1', class: { 'business-navigation': true, [`${theme}`]: true, 'expandable': expandable, 'closed': !this.expanded }, role: "group", onMouseDown: this.onContainerMouseDown, ref: (ref) => (this.navigationContainer = ref) }, this.renderExpandButton(), expandable && h("hr", { key: 'f98adeb81486957f810f73fe689749c4b3583547', class: "business-navigation-divider" }), menuItems && menuItems.map(this.renderMenuItem)));
     }
     static get is() { return "tet-business-navigation"; }
     static get encapsulation() { return "shadow"; }
@@ -125,13 +177,58 @@ export class TetBusinessNavigation {
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "'light'"
+            },
+            "expandable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines menu is expandable and minimize."
+                },
+                "attribute": "expandable",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Language",
+                    "resolved": "\"en\" | \"lv\" | \"ru\"",
+                    "references": {
+                        "Language": {
+                            "location": "import",
+                            "path": "@services/translations",
+                            "id": "src/services/translations/index.ts::Language"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The translation language."
+                },
+                "attribute": "language",
+                "reflect": false,
+                "defaultValue": "'lv'"
             }
         };
     }
     static get states() {
         return {
             "selectedItemId": {},
-            "positions": {}
+            "mainMenuItemId": {},
+            "positions": {},
+            "expanded": {},
+            "sublevelsOpened": {}
         };
     }
     static get events() {
@@ -143,7 +240,7 @@ export class TetBusinessNavigation {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event emitter for menu item click passing menu id"
+                    "text": "Event emitter for the menu item click passing menu id"
                 },
                 "complexType": {
                     "original": "{ id: number }",
@@ -156,11 +253,15 @@ export class TetBusinessNavigation {
         return {
             "selectMenuItem": {
                 "complexType": {
-                    "signature": "(id: number) => Promise<void>",
+                    "signature": "(id: number, mainMenuId?: number) => Promise<void>",
                     "parameters": [{
                             "name": "id",
                             "type": "number",
                             "docs": ""
+                        }, {
+                            "name": "mainMenuId",
+                            "type": "number",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {

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

@@ -211,7 +211,7 @@ export class TetMenu {
     }
     render() {
         const { type } = this;
-        return (h(Host, { key: '3db0426effa27e71911f6991ea0090042a7009ac' }, h("div", { key: '377352e0f620921a4d34e9dff83471f0984c7c63', class: {
+        return (h(Host, { key: 'a0a9076f57ceabe8240f542074354a801ca42be0' }, h("div", { key: 'cb9352216c722e788b01c30cccbfb0d6cc6e33d9', class: {
                 menu: true,
                 menu__main: type === 'main',
                 menu__language: type === 'language',

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

@@ -120,7 +120,7 @@ export class TetMenuMobile {
         return (h("tet-icon", { class: "menu__chevron", name: this.subMenuState.includes(key) ? "chevron-up" : "chevron-down", theme: this.darkMode ? "dark" : "light" }));
     }
     render() {
-        return (h(Host, { key: 'bc6f3c799237ffe7483f650ea4cedf3c24f66ccd' }, h("div", { key: '116bfb30cee9d2f1a7764747016924efc0417fac', class: {
+        return (h(Host, { key: 'eb547ea12bd88c5e1e8d93db2a3b950b2de9fa12' }, h("div", { key: '96ec87de29ac05079530896c4213102bef7d4c01', class: {
                 'menu': true,
                 'menu--expanded': this.isExpanded,
                 'menu--active': this.isActive,

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: 'f8ce367a6a0676499bbd9b8d711b340af743792c' }, h("navigation", { key: '7aeb855f57624847a00adfb8831cfcdcd9186f71', class: {
+        return (h(Host, { key: '3e992774fbf2f0ffd0d82df2916cfb7555e12da4' }, h("navigation", { key: 'cd4bfbda6fb9529f1c8630eb5468269a3c55d9f4', class: {
                 'navigation': true,
                 'navigation--dark': this.darkMode
-            } }, h("div", { key: '37c0511fce1d33dc6bf3d880d1fa9a2020cab614', class: "navigation__nav-bar" }, h("slot", { key: '418058c43411f2588306c419c3b151969c07df0a' })), this.isTogglerVisible && (h("span", { key: '8fe1dc6e8866fe2c168bf211f3912155f88dcb5b', class: "navigation__toggler", onClick: this.onTogglerClick, onKeyDown: (e) => this.handleKeyDown(e), tabIndex: 0 }, h("tet-icon", { key: '10dd5fbe8d78886fa2c1c80ba1b9ce5b91cbebed', theme: this.darkMode ? "dark" : "light", name: this.isTogglerExpanded ? "close" : "burger" }))), h("div", { key: '216fdd8517575c85fb2cb3dcd919354d6d3b8d3a', class: {
+            } }, h("div", { key: '2960ec8429cd012a0ebf2afda1231492ec34695e', class: "navigation__nav-bar" }, h("slot", { key: 'c419c169d6695180419d583444140e968e2666e7' })), this.isTogglerVisible && (h("span", { key: '67b65a729373dd5c39e51b3584701ce5e94e0470', class: "navigation__toggler", onClick: this.onTogglerClick, onKeyDown: (e) => this.handleKeyDown(e), tabIndex: 0 }, h("tet-icon", { key: 'a43b60155846c7a6baf2e1c085a1f7e171e2c034', theme: this.darkMode ? "dark" : "light", name: this.isTogglerExpanded ? "close" : "burger" }))), h("div", { key: '12a8c6d5d2d37b5c00526404859dfc6e34d30d7a', class: {
                 'navigation__dropdown': true,
                 'navigation__dropdown--expanded': this.isTogglerExpanded,
-            }, inert: !this.isTogglerExpanded }, h("slot", { key: '1f39c752f09fbf261751b4fd0140a9f9aa25d2dc', name: "dropdown" })))));
+            }, inert: !this.isTogglerExpanded }, h("slot", { key: '562ff03ee098996731d8636083a9679d492c747e', name: "dropdown" })))));
     }
     static get is() { return "tet-navigation-mobile"; }
     static get encapsulation() { return "shadow"; }