@tet/tet-components 1.3.15-testing → 1.3.16-production

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

@@ -114,12 +114,18 @@
   * @prop --number-input-max-width: sets inputs max-width
   */
   --number-input-height: 3.5rem;
-  --number-input-background-color: var(--color-foundation-white);
+  --number-input-background-color: var(--tc-layer-primary);
   --number-input-border-radius: 0.75rem;
-  --number-input-border-color: rgb(192, 197, 206);
-  --number-input-border-color-active: rgb(10, 11, 13);
-  --number-input-border-color-error: rgb(233, 69, 54);
+  --number-input-border-color: var(--tc-border-secondary);
+  --number-input-border-color-active: var(--tc-border-primary);
+  --number-input-border-color-error: var( --tc-alert-accent-error);
+  --number-input-text-color: var(--tc-text-primary);
+  --number-input-text-secondary-color: var(--tc-text-secondary);
+  --number-input-dropdown-active: var(--tc-layer-tertiary);
   --number-input-max-width: 21.625rem;
+  --number-input-disabled: var(--tc-background-secondary);
+  --number-input-disabled-text: var(--tc-text-tertiary);
+  --number-input-dropdown-border: var(--tc-border-tertiary);
   max-width: var(--number-input-max-width);
   display: block;
 }
@@ -128,10 +134,22 @@
   display: flex;
   flex-direction: column;
 }
+.number-input.dark {
+  --number-input-background-color: var(--tc-layer-primary-dark);
+  --number-input-border-color: var(--tc-border-secondary-dark);
+  --number-input-border-color-active: var(--tc-border-primary-dark);
+  --number-input-border-color-error: var(--tc-alert-accent-error-dark);
+  --number-input-text-color: var(--tc-text-primary-dark);
+  --number-input-text-secondary-color: var(--tc-text-secondary-dark);
+  --number-input-dropdown-active: var(--tc-layer-tertiary-dark);
+  --number-input-disabled: var(--tc-background-secondary-dark);
+  --number-input-disabled-text: var(--tc-text-tertiary-dark);
+  --number-input-dropdown-border: var(--tc-border-tertiary-dark);
+}
 .number-input__label {
   margin-bottom: 0.25rem;
   font: 500 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
-  color: rgb(67, 75, 86);
+  color: var(--number-input-text-secondary-color);
 }
 .number-input__input {
   border: none;
@@ -148,7 +166,7 @@
 }
 .number-input__input-suffix {
   font: 400 1rem/1.5rem "Inter", "Gilroy, Arial, sans-serif";
-  color: rgb(67, 75, 86);
+  color: var(--number-input-text-secondary-color);
   margin-left: 0.25rem;
 }
 .number-input__input-invisible {
@@ -160,7 +178,7 @@
 .number-input__input-container {
   position: relative;
   display: flex;
-  border: 0.0625rem solid var(--number-input-border-color);
+  border: 0.063rem solid var(--number-input-border-color);
   align-items: baseline;
   justify-content: center;
   padding: 0.9375rem;
@@ -170,9 +188,16 @@
   background-color: var(--number-input-background-color);
   border-radius: var(--number-input-border-radius);
 }
-.number-input__input-container:focus-within, .number-input__input-container:active {
+.number-input__input-container:focus-within:not(.dropdown-open) {
+  outline: 2px solid var(--tc-blue-50-dark);
+  outline-offset: 2px;
+}
+.number-input__input-container .dropdown-open .number-input__input:focus {
+  outline: none !important;
+}
+.number-input__input-container:active {
   outline: none;
-  border: 0.0625rem solid var(--number-input-border-color-active);
+  border: 0.063rem solid var(--number-input-border-color-active);
 }
 .number-input__input--hidden {
   display: none;
@@ -180,7 +205,7 @@
 .number-input__helper-text {
   margin-top: 0.25rem;
   font: 400 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
-  color: rgb(67, 75, 86);
+  color: var(--number-input-text-secondary-color);
 }
 .number-input__cheveron {
   display: flex;
@@ -196,15 +221,15 @@
   --button-padding-small: 0.5rem;
 }
 .number-input__dropdown {
-  border: 0.0625rem solid rgb(192, 197, 206);
+  border: 0.0625rem solid var(--number-input-dropdown-border);
   position: absolute;
   width: 100%;
   top: 3.625rem;
-  background-color: var(--color-foundation-white);
+  background-color: var(--number-input-background-color);
   padding: 0.625rem 0;
   border-radius: 0.75rem;
   z-index: 1;
-  box-shadow: 0 0.3125rem 0.6875rem 0 rgba(10, 11, 13, 0.12);
+  color: var(--number-input-text-color);
 }
 .number-input__dropdown-item {
   display: flex;
@@ -213,25 +238,30 @@
   font: 500 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
 }
 .number-input__dropdown-item.active {
-  background-color: rgba(89, 99, 115, 0.16);
+  background-color: var(--number-input-dropdown-active);
+}
+.number-input__dropdown-item.focus {
+  outline: 2px solid var(--tc-blue-50-dark);
+  outline-offset: 2px;
 }
 .number-input__dropdown-item:hover {
-  background-color: rgba(89, 99, 115, 0.08);
+  background-color: var(--number-input-dropdown-active);
 }
 .number-input__dropdown-item .check {
   margin-left: auto;
 }
 .number-input.disabled .number-input__input-container,
 .number-input.disabled .number-input__input {
-  background-color: rgb(247, 247, 247);
+  background-color: var(--number-input-disabled);
+  border-color: var(--number-input-disabled);
   cursor: not-allowed;
 }
 .number-input.disabled .number-input__input,
 .number-input.disabled .number-input__input-suffix {
-  color: rgb(88, 99, 116);
+  color: var(--number-input-disabled-text);
 }
 .number-input.error .number-input__input-container {
-  border: 0.0625rem solid var(--number-input-border-color-error);
+  border: 0.063rem solid var(--number-input-border-color-error);
 }
 .number-input.error .number-input__helper-text {
   color: var(--number-input-border-color-error);
@@ -240,4 +270,11 @@
   .number-input .number-input__label {
     font: 500 1rem/1.5rem "Inter", "Gilroy, Arial, sans-serif";
   }
+}
+.number-input tet-icon {
+  --icon-color: var(--number-input-text-color);
+}
+.number-input .number-input__input {
+  color: var(--number-input-text-color);
+  background-color: var(--number-input-background-color);
 }

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

@@ -23,12 +23,6 @@ function focusNextElement(element) {
  */
 export class TetInput {
     constructor() {
-        /**
-         * Move focus to input element
-         */
-        this.shiftFocus = () => {
-            this.inputElement.focus();
-        };
         /**
          * Changes dropdown state
          */
@@ -44,16 +38,27 @@ export class TetInput {
         /**
          * Renders dropdown content
          */
+        this.dropdownItemRefs = [];
         this.renderDropdownContent = () => {
-            if (!this.suffixes) {
-                return;
-            }
-            return this.suffixes.map((_suffix) => {
+            this.dropdownItemRefs = [];
+            if (!this.suffixes)
+                return [];
+            return this.suffixes.map((_suffix, i) => {
                 const isActive = this.suffix === _suffix;
-                return (h("div", { onClick: () => this.onDropdownItemClick(_suffix), onKeyDown: this.handleOptionKeydown(() => this.onDropdownItemClick(_suffix)), class: { 'number-input__dropdown-item': true, 'active': isActive }, tabIndex: 0 }, _suffix.name, isActive && h("tet-icon", { class: "check", name: "check" })));
+                return (h("div", { ref: el => { this.dropdownItemRefs[i] = el; }, onClick: () => this.onDropdownItemClick(_suffix), onKeyDown: this.handleOptionKeydown(() => this.onDropdownItemClick(_suffix)), class: { 'number-input__dropdown-item': true, 'active': isActive }, tabIndex: 0 }, _suffix.name, isActive && h("tet-icon", { class: "check", name: "check" })));
             });
         };
+        /**
+         * Move focus from input element to dropdown
+         */
+        this.handleContainerKeydown = (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                this.isOpen = !this.isOpen;
+            }
+        };
         this.label = undefined;
+        this.theme = 'light';
         this.accessibilityLabel = '';
         this.buttonAccessibilityLabel = '';
         this.helperText = undefined;
@@ -113,9 +118,7 @@ export class TetInput {
      * Listens for focus to select value
      */
     onFocus() {
-        if (this.selectOnFocus) {
-            this.inputElement.select();
-        }
+        this.inputElement.select();
     }
     /** A listener to suffix values changes. Updates `isValuesHidden` state. */
     onSuffixChange(suffix) {
@@ -214,13 +217,27 @@ export class TetInput {
         this.inputValueChanged.emit({ value: this.value, suffix: this.suffix });
         this.onChevronClick();
     }
+    /**
+     * Move focus from input element to dropdown
+     */
+    onDropdownOpenChanged(isDropdownOpen) {
+        if (isDropdownOpen && this.suffixes) {
+            setTimeout(() => {
+                const activeSuffixIndex = this.suffixes.findIndex(suffixOption => suffixOption === this.suffix);
+                const indexToFocus = activeSuffixIndex !== -1 ? activeSuffixIndex : 0;
+                const dropdownOptionToFocus = this.dropdownItemRefs[indexToFocus];
+                dropdownOptionToFocus === null || dropdownOptionToFocus === void 0 ? void 0 : dropdownOptionToFocus.focus();
+            }, 0);
+        }
+    }
     /**
      * Renders component
      * @returns {FunctionalComponent}
      */
     render() {
         const { label, helperText, value, disabled, error, completed, isOpen, suffix } = this;
-        return (h("div", { key: 'f326524a925c120ecddba15833dc8e4cb8897179', class: { 'number-input': true, 'disabled': disabled, 'error': error, 'completed': completed } }, !!label && (h("label", { key: '7e1c0f9930b5fe8c4d3eecb8fdd705e0d8bc3133', class: "number-input__label", htmlFor: "number-input" }, label)), h("div", { key: 'a2e9136935db0c1277234d0bb2e7143801843189', class: "number-input__input-container", onClick: this.shiftFocus }, h("input", Object.assign({ key: 'fccaeab297ae6cc313dd0bc4759ab53316ab53b4', 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: 'f3fb264c0e839c20a9e26981d3bd7f552ba3bd3e', ref: (htmlInputElement) => (this.inputElementHidden = htmlInputElement), class: "number-input__input-invisible" }, value), !!suffix && h("div", { key: '55139698a73b5c4ddc56ec20c0bb08bc1f894956', class: "number-input__input-suffix" }, suffix.name), !!this.suffixes && this.suffixes.length > 1 && (h("tet-button", { key: 'd4711796220d3ef02ae655583ad3403f14dd6ac2', type: "ghost", size: "small", ref: (element) => (this.chevronElement = element), class: { 'number-input__cheveron': true }, onClick: this.onChevronClick, "accessibility-label": this.buttonAccessibilityLabel }, !isOpen && h("tet-icon", { key: 'a3cb79dac9ed077f4884e2f46ddec3ce9691372c', name: "chevron-down" }), isOpen && h("tet-icon", { key: '8a319a2b03507f82b89c59829686a92ad0bdb6db', name: "chevron-up" }))), isOpen && (h("div", { key: '857d7c821006472c787e3bdc68c61fe305a1ae65', class: "number-input__dropdown", ref: (htmlDivElement) => (this.dropdownElement = htmlDivElement) }, this.renderDropdownContent()))), !!helperText && h("div", { key: '2ff12b36a98c717107cd80cfab1a91cbf71e0216', class: "number-input__helper-text" }, helperText)));
+        return (h("div", { key: 'ad2189f28458f296fd76390eb07996637f0f99d7', class: { 'number-input': true, [this.theme]: !!this.theme,
+                'disabled': disabled, 'error': error, 'completed': completed } }, !!label && (h("label", { key: '146fc7c71058fa0c1f81ed56081f49b054faff61', class: "number-input__label", htmlFor: "number-input" }, label)), h("div", { key: 'f7f5b78ebd0b02fbad5cdc0c285c656d9b03354b', class: { 'number-input__input-container': true, 'dropdown-open': this.isOpen }, onKeyDown: this.handleContainerKeydown }, h("input", Object.assign({ key: '4058bb72542f82be4ec7c692642e2066af44e3e5', ref: (htmlInputElement) => (this.inputElement = htmlInputElement), class: { 'number-input__input': true, 'number-input__input--hidden': this.isValueHidden }, disabled: disabled, value: value, type: "number", id: "number-input" }, (this.accessibilityLabel ? { "aria-label": this.accessibilityLabel } : {}))), h("div", { key: '5a51da6e82e6bb430242f3fb1d630a764b6b1077', ref: (htmlInputElement) => (this.inputElementHidden = htmlInputElement), class: "number-input__input-invisible" }, value), !!suffix && h("div", { key: '2100c7f19934b51a7a46e53139e127c0f935e177', class: "number-input__input-suffix" }, suffix.name), !!this.suffixes && this.suffixes.length > 1 && (h("tet-button", { key: '690e1ebf1a885532fedacad732f376db57e334fb', type: "ghost", size: "small", ref: (element) => (this.chevronElement = element), class: { 'number-input__cheveron': true }, onClick: this.onChevronClick, "accessibility-label": this.buttonAccessibilityLabel, tabindex: "-1" }, !isOpen && h("tet-icon", { key: '600304642780a9fe20e28a6974179ff45842fe09', name: "chevron-down" }), isOpen && h("tet-icon", { key: '30fd2bc3ba018a178e179dec02aa6cd7812248e6', name: "chevron-up" }))), isOpen && (h("div", { key: 'cf7913cf9b324911c24f2069083a7e2e71dcc95b', class: "number-input__dropdown", ref: (htmlDivElement) => (this.dropdownElement = htmlDivElement) }, this.renderDropdownContent()))), !!helperText && h("div", { key: '77a8561e514764964b4d1599e328fa1b38286e19', class: "number-input__helper-text" }, helperText)));
     }
     static get is() { return "tet-number-input"; }
     static get encapsulation() { return "shadow"; }
@@ -253,6 +270,24 @@ export class TetInput {
                 "attribute": "label",
                 "reflect": false
             },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The theme of the input."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "'light'"
+            },
             "accessibilityLabel": {
                 "type": "string",
                 "mutable": false,
@@ -518,6 +553,9 @@ export class TetInput {
         return [{
                 "propName": "suffix",
                 "methodName": "onSuffixChange"
+            }, {
+                "propName": "isOpen",
+                "methodName": "onDropdownOpenChanged"
             }];
     }
     static get listeners() {

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

@@ -126,6 +126,12 @@
   --slider-step-counter-text-color: var(--tc-text-primary-dark);
   --slider-data-label-text-color: var(--tc-text-secondary-dark);
 }
+.range-slider.dark .range-slider__slider-container:has(.range-slider__slider-wrapper input:focus-visible) ~ .range-slider__tooltip-handle {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline: 0.125rem solid var(--tc-blue-40-dark);
+  outline-offset: 0.125rem;
+  transition: outline 0s;
+}
 .range-slider--large {
   flex-direction: column;
 }

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

@@ -110,10 +110,13 @@
    * @prop --stepper-border-color: border color
    * @prop --stepper-border-color-active: border color when active
    */
-  --stepper-input-control-background-color: rgb(247, 247, 247);
-  --stepper-input-suffix-color: rgb(67, 75, 86);
-  --stepper-input-border-color: rgb(192, 197, 206);
-  --stepper-input-border-color-active: rgb(10, 11, 13);
+  --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);
   display: inline-flex;
 }
 
@@ -123,28 +126,40 @@
   gap: 0.625rem;
   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__control {
-  background: var(--stepper-input-control-background-color);
+  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;
-  border: none;
+  height: 2.25rem;
+  width: 2.25rem;
 }
 .stepper-input__value {
-  border: 0.0625rem solid var(--stepper-input-border-color);
-  outline: none;
+  border: 0.0625rem solid var(--stepper-value-color);
   font: 500 1.25rem/1.5rem "Inter", "Gilroy, Arial, sans-serif";
-  color: rgb(10, 11, 13);
+  color: var(--stepper-value-color);
+  background-color: var(--stepper-input-control-background-color);
   padding-inline: 0;
   padding-block: 0;
-  width: 3.375rem;
-  height: 2rem;
-  border-radius: 0.375rem;
+  width: 3.125rem;
+  height: 2.75rem;
   text-align: center;
   box-sizing: border-box;
   letter-spacing: -0.029375rem;
+  border-radius: 0.625rem;
   appearance: textfield;
   -moz-appearance: textfield;
 }
@@ -153,6 +168,12 @@
   margin: 0;
 }
 .stepper-input__value:focus-within {
-  outline: none;
   border: 0.0625rem solid var(--stepper-input-border-color-active);
+}
+.stepper-input tet-icon {
+  --icon-color: var(--stepper-button-border);
+}
+.stepper-input tet-button::part(button) {
+  width: 2.75rem;
+  height: 2.75rem;
 }

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

@@ -27,6 +27,7 @@ export class TetStepperInput {
             this.value += this.step;
         };
         this.value = undefined;
+        this.theme = 'light';
         this.min = undefined;
         this.max = undefined;
         this.step = undefined;
@@ -69,9 +70,7 @@ export class TetStepperInput {
      * Listens for focus to select value
      */
     onFocus() {
-        if (this.selectOnFocus) {
-            this.inputElement.select();
-        }
+        this.inputElement.select();
     }
     /**
      * Handles input change on input element
@@ -122,7 +121,7 @@ export class TetStepperInput {
      */
     render() {
         const { onMinusClick, value, onPlusClick } = this;
-        return (h("div", { key: 'b8baa0962d9e8287741483b9f8aaa7065ea84de8', class: "stepper-input" }, h("button", { key: 'b6e36b43624b60eecddffc4a4c8dcbf48d504195', class: "stepper-input__control", "aria-label": t('components-number-input-decrease'), onKeyDown: this.handleOptionKeydown(onMinusClick) }, h("tet-icon", { key: '6369c3dcf26349ea47613f7fa9c3868aa85cb54f', name: "remove", onClick: onMinusClick })), h("input", Object.assign({ key: 'cb57e8e5a6608a9176e1d20a75e9e38fe74f801d', ref: (htmlInputElement) => (this.inputElement = htmlInputElement), class: "stepper-input__value", value: value, type: "number" }, (this.accessibilityLabel ? { "aria-label": this.accessibilityLabel } : {}))), h("button", { key: '2c05d122dc811fae2d8832a3f7a659b47ce4344d', class: "stepper-input__control", "aria-label": t('components-number-input-increase'), onKeyDown: this.handleOptionKeydown(onPlusClick) }, h("tet-icon", { key: '3a8c08cc7a927d7c86d27d28bccf05be02071e70', name: "add", onClick: onPlusClick }))));
+        return (h("div", { key: 'acaaf4e825dbeff59ae1aaf307c5d6cd3b081676', class: { 'stepper-input': true, [this.theme]: !!this.theme } }, h("tet-button", { key: 'ef3908d34bee2063ea47918736dff9234161a820', type: "secondary", iconMode: true, theme: this.theme, size: 'small', "aria-label": t('components-number-input-decrease'), onKeyDown: this.handleOptionKeydown(onMinusClick), onClick: onMinusClick }, h("tet-icon", { key: '4fb2ef4fa0ae6768902c53a45e082e3bf8906f1e', name: "remove", onClick: onMinusClick })), h("input", Object.assign({ key: 'e9517055b16a51ad89ba94bb3db73c31639504bf', ref: (htmlInputElement) => (this.inputElement = htmlInputElement), class: "stepper-input__value", value: value, type: "number" }, (this.accessibilityLabel ? { "aria-label": this.accessibilityLabel } : {}))), h("tet-button", { key: 'c56c4c9e389c4d2fdb6cacca1c41c54f5e954dc9', type: "secondary", iconMode: true, theme: this.theme, size: 'small', "aria-label": t('components-number-input-increase'), onKeyDown: this.handleOptionKeydown(onPlusClick), onClick: onPlusClick }, h("tet-icon", { key: '24dd8fb808508385516a5355c7598518d6a3585f', name: "add", onClick: onPlusClick }))));
     }
     static get is() { return "tet-stepper-input"; }
     static get encapsulation() { return "shadow"; }
@@ -155,6 +154,24 @@ export class TetStepperInput {
                 "attribute": "value",
                 "reflect": false
             },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The theme of the input."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "'light'"
+            },
             "min": {
                 "type": "number",
                 "mutable": false,

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

@@ -4793,6 +4793,12 @@
   --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 {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline: 0.125rem solid var(--tc-blue-40-dark);
+  outline-offset: 0.125rem;
+  transition: outline 0s;
+}
 
 .tet-input__mint {
   --input-icon-color: rgb(247, 247, 247);

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

@@ -388,6 +388,9 @@
   background-color: var(--accordion-background-color);
   border-color: var(--accordion-border-color);
 }
+.tet-accordion.transparent-bg {
+  --accordion-background-color: transparent;
+}
 .tet-accordion--border {
   border-bottom-style: solid;
   border-bottom-width: var(--accordion-border-bottom-width);

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

@@ -35,6 +35,7 @@ export class TetAccordion {
         this.withAutoScroll = false;
         this.breakpoint = 'tablet';
         this.headingTag = 'span';
+        this.transparentBackground = false;
     }
     /**
      * Public API method to open the accordion content.
@@ -106,21 +107,22 @@ export class TetAccordion {
         }
     }
     render() {
-        return (h(Host, { key: '83d08c63490aacf0d069492e2b5269e9bc9d62bd' }, h("div", { key: 'b0178734c66d4840e3606ad1863c2441b3e4f026', class: {
+        return (h(Host, { key: 'b203cec9965b2a90df2b86f040faad72ac55904a' }, h("div", { key: '055bfa73740cb424dc509ebb6d822707111aa310', class: {
                 'tet-accordion': true,
                 'tet-accordion--border': this.withBorder,
                 [`${this.theme}-theme`]: true,
-                [`tet-accordion--breakpoint-${this.breakpoint}`]: true
-            } }, h("div", { key: 'f6eb73214ac9367e13bac1a8d2c367712d262b99', class: { "tet-accordion__header": true, [this.theme]: true }, onClick: this.toggleOpenState, onKeyDown: this.toggleAccessibilityOpenState, tabIndex: 0 }, this.headerImageSrc && this.headerImageSrc !== '' &&
-            h("img", { key: 'dfb610782ebb237e87acc266a834e82394596d6b', src: this.headerImageSrc, alt: this.headerImageAlt ? this.headerImageAlt : undefined, class: "tet-accordion__header-image" }), this.renderHeading(), h("tet-icon", { key: '5b385630eca42efc421fd1260827ac95401d7673', name: "chevron-down", class: {
+                [`tet-accordion--breakpoint-${this.breakpoint}`]: true,
+                'transparent-bg': this.transparentBackground,
+            } }, h("div", { key: '44a9a507b64552d408604af83e207019b0959f86', class: { "tet-accordion__header": true, [this.theme]: true }, onClick: this.toggleOpenState, onKeyDown: this.toggleAccessibilityOpenState, tabIndex: 0 }, this.headerImageSrc && this.headerImageSrc !== '' &&
+            h("img", { key: '60e80780efb714583b45732b09a8ace1584e50d5', src: this.headerImageSrc, alt: this.headerImageAlt ? this.headerImageAlt : undefined, class: "tet-accordion__header-image" }), this.renderHeading(), h("tet-icon", { key: '72878d09ba4617a05ad2c1aa10a77b37c5d740e1', name: "chevron-down", class: {
                 'tet-accordion__icon': true,
                 'open': this.isOpen
-            } })), h("div", { key: '13aae62813e6ba5ff816c952909b21cfcbfe4aa4', ref: (element) => (this.contentWrapperElement = element), class: {
+            } })), h("div", { key: 'ec8748dca010cae7689324b9bbb3687b34f5553b', ref: (element) => (this.contentWrapperElement = element), class: {
                 'tet-accordion__content-wrapper': true,
                 'visible': this.isOpen
-            }, inert: !this.isOpen }, h("div", { key: '7d354aa32ef4b7e698bfa11e3ac09ae951430f70', ref: (element) => (this.contentElement = element), class: {
+            }, inert: !this.isOpen }, h("div", { key: '13eb067b37dcc34ae00246e854edf0066d904033', ref: (element) => (this.contentElement = element), class: {
                 'tet-accordion__content': true
-            } }, h("slot", { key: 'ead52152480876da5557bf233477c5acf66a368e' }))))));
+            } }, h("slot", { key: '3fa5e60b2462a8f0ab1c598cc6bec0fb5efd89fc' }))))));
     }
     static get is() { return "tet-accordion"; }
     static get encapsulation() { return "shadow"; }
@@ -297,6 +299,24 @@ export class TetAccordion {
                 "attribute": "heading-tag",
                 "reflect": false,
                 "defaultValue": "'span'"
+            },
+            "transparentBackground": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to use a transparent background for the component."
+                },
+                "attribute": "transparent-background",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/simple/text-blocks/tet-dialog/tet-dialog.css

@@ -416,6 +416,12 @@ dialog .dialog--theme-dark {
   --dialog-close-icon-background-hover-color: var(--tc-menu-item-hover-dark);
   --dialog-close-icon-background-pressed-color: var(--tc-menu-item-pressed-dark);
 }
+dialog .dialog--theme-dark .dialog__close-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;
+}
 dialog .dialog--theme-dark-secondary {
   --dialog-text-color: rgb(255, 255, 255);
   --dialog-background-color: rgb(35, 40, 46);

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

@@ -554,6 +554,12 @@
   --notification-danger-icon-color: var(--tc-alert-accent-error-dark);
   --notification-danger-border-left-color: var(--tc-alert-colorwave-error-dark);
 }
+.dark .item .header .close-icon-wrapper:focus-visible .close-icon {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline: 0.125rem solid var(--tc-blue-40-dark);
+  outline-offset: 0rem;
+  transition: outline 0s;
+}
 
 .notification {
   font: 400 0.875rem/1.25rem Inter, Gilroy, Arial, sans-serif, Gilroy, Arial, sans-serif;

package/dist/collection/components/views/tet-cloud-configurator/tet-cloud-configurator.js

@@ -409,7 +409,7 @@ export class TetCloudConfigurator {
             hidden: Boolean((_a = this.formValues['ddos_protection_enabled']) === null || _a === void 0 ? void 0 : _a.value)
         }), this.renderNumberInput('ddos_protection_bandwidth', {
             hidden: !Boolean((_b = this.formValues['ddos_protection_enabled']) === null || _b === void 0 ? void 0 : _b.value)
-        }), h("div", { class: "form__input" }), h("div", { class: "form__checkbox" }, h("tet-checkbox", { label: this.getLabel('ddos_protection_enabled'), value: (_c = this.formValues['ddos_protection_enabled']) === null || _c === void 0 ? void 0 : _c.value, checked: !!((_d = this.formValues['ddos_protection_enabled']) === null || _d === void 0 ? void 0 : _d.value), onCheck: this.onDdosProtectionEnabledCheck }), h("p", { class: "form__checkbox-helper" }, this.getHelperText('ddos_protection_enabled'))))), h("div", { class: "summary", part: "summary" }, h("h2", { class: "summary__title" }, t('components-cloud-configurator-group-summary')), h("div", { class: "summary__toggle" }, h("tet-radio", { name: "summary-period", value: CloudSummaryPeriod.MONTHLY, checked: this.selectedPeriod === CloudSummaryPeriod.MONTHLY, label: t('components-cloud-configurator-summary-period-monthly'), theme: "classic", onCheck: this.onSummaryPeriodChange }), h("tet-radio", { name: "summary-period", value: CloudSummaryPeriod.HOURLY, checked: this.selectedPeriod === CloudSummaryPeriod.HOURLY, label: t('components-cloud-configurator-summary-period-hourly'), theme: "classic", onCheck: this.onSummaryPeriodChange })), this.renderSummaryTable())), h("div", { class: { 'floating-summary': true, 'floating-summary--is-pinned': this.isFloatingSummary }, part: "floating-summary" }, this.renderFloatingSummary()), h("div", { part: "footer", class: "footer", ref: (el) => (this.footerRef = el) }, h("tet-button", { class: "footer__button", size: "large", type: "primary", theme: "light", onClick: this.onFormSubmit }, t('components-cloud-configurator-submit'))))));
+        }), h("div", { class: "form__input" }), h("div", { class: "form__checkbox" }, h("tet-checkbox", { label: this.getLabel('ddos_protection_enabled'), value: (_c = this.formValues['ddos_protection_enabled']) === null || _c === void 0 ? void 0 : _c.value, checked: !!((_d = this.formValues['ddos_protection_enabled']) === null || _d === void 0 ? void 0 : _d.value), onCheck: this.onDdosProtectionEnabledCheck }), h("p", { class: "form__checkbox-helper" }, this.getHelperText('ddos_protection_enabled'))))), h("div", { class: "summary", part: "summary" }, h("h2", { class: "summary__title" }, t('components-cloud-configurator-group-summary')), h("div", { class: "summary__toggle", role: "radiogroup" }, h("tet-radio", { name: "summary-period", value: CloudSummaryPeriod.MONTHLY, checked: this.selectedPeriod === CloudSummaryPeriod.MONTHLY, label: t('components-cloud-configurator-summary-period-monthly'), theme: "classic", onCheck: this.onSummaryPeriodChange }), h("tet-radio", { name: "summary-period", value: CloudSummaryPeriod.HOURLY, checked: this.selectedPeriod === CloudSummaryPeriod.HOURLY, label: t('components-cloud-configurator-summary-period-hourly'), theme: "classic", onCheck: this.onSummaryPeriodChange })), this.renderSummaryTable())), h("div", { class: { 'floating-summary': true, 'floating-summary--is-pinned': this.isFloatingSummary }, part: "floating-summary" }, this.renderFloatingSummary()), h("div", { part: "footer", class: "footer", ref: (el) => (this.footerRef = el) }, h("tet-button", { class: "footer__button", size: "large", type: "primary", theme: "light", onClick: this.onFormSubmit }, t('components-cloud-configurator-submit'))))));
     }
     static get is() { return "tet-cloud-configurator"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/index.js

@@ -79,7 +79,7 @@ import { TetThankYouViewV2 } from './tet-thank-you-view-v2.js';
 import { TetTooltip } from './tet-tooltip.js';
 import { TetTvGiftBlock } from './tet-tv-gift-block.js';
 import { TetTvGiftList } from './tet-tv-gift-list.js';
-export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-37ed3ebb.js';
+export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-599035b8.js';
 
 const defineCustomElements = (opts) => {
     if (typeof customElements !== 'undefined') {

package/dist/components/{p-48546872.js → p-038ed6bd.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, d as createEvent, h } from './p-37ed3ebb.js';
+import { p as proxyCustomElement, H, d as createEvent, h } from './p-599035b8.js';
 
 const tetDatepickerMultiYearViewCss = "@font-face{font-family:Avenir Next;src:url(assets/fonts/8e7462a9501f48c43c58f870188b3fb2.eot?#iefix);src:url(assets/fonts/8e7462a9501f48c43c58f870188b3fb2.eot?#iefix) format(\"eot\"),url(assets/fonts/3c3e10968ffc97c2a52c5830f9886d1f.woff2) format(\"woff2\"),url(assets/fonts/660fbf858d30d7685fa4b166080f5980.woff) format(\"woff\"),url(assets/fonts/2b7748589092fd1a10b806abdfb562ff.ttf) format(\"truetype\");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Avenir Next;src:url(assets/fonts/d5e25ad69d0ea31f3b8f66d634ca40fe.eot?#iefix);src:url(assets/fonts/d5e25ad69d0ea31f3b8f66d634ca40fe.eot?#iefix) format(\"eot\"),url(assets/fonts/aad36ecead30948bb30fe0ef818b749c.woff2) format(\"woff2\"),url(assets/fonts/c437d7752feaf3f056bbf8613e898d3a.woff) format(\"woff\"),url(assets/fonts/b8df4d02ef5de13a813917a85bc4a9c4.ttf) format(\"truetype\");font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:Avenir Next;src:url(assets/fonts/046190c9a2f724b925df848737b03819.eot?#iefix);src:url(assets/fonts/046190c9a2f724b925df848737b03819.eot?#iefix) format(\"eot\"),url(assets/fonts/4d52f8276a74ea8efbad833ed790367c.woff2) format(\"woff2\"),url(assets/fonts/a067695dd1b87e927f4056c040d84669.woff) format(\"woff\"),url(assets/fonts/510a664af9771b72d4ce5e637109ca3c.ttf) format(\"truetype\");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:Avenir Next;src:url(assets/fonts/0715de188f56c99aa615905f7e06292e.eot?#iefix);src:url(assets/fonts/0715de188f56c99aa615905f7e06292e.eot?#iefix) format(\"eot\"),url(assets/fonts/63f5acc71d9852468683a4bfe824a28f.woff2) format(\"woff2\"),url(assets/fonts/ed94c737da267752ce0abd79bb003ff6.woff) format(\"woff\"),url(assets/fonts/6302f55a6dc6b12365177dc89b7d63cf.ttf) format(\"truetype\");font-weight:500;font-style:italic;font-display:swap}@font-face{font-family:Avenir Next;src:url(assets/fonts/3f76abc23eef0596c499840db84213bb.eot?#iefix);src:url(assets/fonts/3f76abc23eef0596c499840db84213bb.eot?#iefix) format(\"eot\"),url(assets/fonts/1fe7da97fe9dbe1349aca9b54b5fdf69.woff2) format(\"woff2\"),url(assets/fonts/dacc6a84278e221422902af99579ada5.woff) format(\"woff\"),url(assets/fonts/e530c573663a3a07243d303fbf7db508.ttf) format(\"truetype\");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:Avenir Next;src:url(assets/fonts/75f8489ba53f19968feaa3e2eb78c569.eot?#iefix);src:url(assets/fonts/75f8489ba53f19968feaa3e2eb78c569.eot?#iefix) format(\"eot\"),url(assets/fonts/93ec0034623fc696601ab99aba652d4c.woff2) format(\"woff2\"),url(assets/fonts/d73c8eb1c13abe1237366aa3ee829a59.woff) format(\"woff\"),url(assets/fonts/7b6dcef99f3f4b23346e23925ec8678f.ttf) format(\"truetype\");font-weight:600;font-style:italic;font-display:swap}.tet-icon{font-family:Tet Icons;font-weight:400;font-style:normal;font-size:24px;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}@font-face{font-family:Tet Icons;src:url(assets/fonts/d2ce51cdcd0b9707af186f8d50023d23.eot);src:url(assets/fonts/d2ce51cdcd0b9707af186f8d50023d23.eot?#iefix) format(\"embedded-opentype\"),url(assets/fonts/25f10ef322a1220b2e9e11db38b73892.woff2) format(\"woff2\"),url(assets/fonts/fed75ac1edcf1c25cdd8612d2c365f9a.woff) format(\"woff\"),url(assets/fonts/df7fbe67cabb13cb837172a73c46378a.ttf) format(\"truetype\"),url(assets/fonts/5486d8c87e2abc6c13ed952a6cc96658.svg#tet-icons) format(\"svg\");font-weight:400;font-style:normal}.tet-icon:before{content:\"\\E84E\"}.tet-icon--sm{font-size:1.125rem}.tet-icon--md{font-size:1.5rem}.tet-icon--lg{font-size:2.25rem}.tet-icon--xl{font-size:3rem}.tet-icon--xxl{font-size:4rem}.tet-icon--0{font-size:0}.tet-icon--1{font-size:.0625rem}.tet-icon--2{font-size:.125rem}.tet-icon--3{font-size:.1875rem}.tet-icon--4{font-size:.25rem}.tet-icon--5{font-size:.3125rem}.tet-icon--6{font-size:.375rem}.tet-icon--7{font-size:.4375rem}.tet-icon--8{font-size:.5rem}.tet-icon--9{font-size:.5625rem}.tet-icon--10{font-size:.625rem}.tet-icon--11{font-size:.6875rem}.tet-icon--12{font-size:.75rem}.tet-icon--13{font-size:.8125rem}.tet-icon--14{font-size:.875rem}.tet-icon--15{font-size:.9375rem}.tet-icon--16{font-size:1rem}.tet-icon--17{font-size:1.0625rem}.tet-icon--18{font-size:1.125rem}.tet-icon--19{font-size:1.1875rem}.tet-icon--20{font-size:1.25rem}.tet-icon--21{font-size:1.3125rem}.tet-icon--22{font-size:1.375rem}.tet-icon--23{font-size:1.4375rem}.tet-icon--24{font-size:1.5rem}.tet-icon--25{font-size:1.5625rem}.tet-icon--26{font-size:1.625rem}.tet-icon--27{font-size:1.6875rem}.tet-icon--28{font-size:1.75rem}.tet-icon--29{font-size:1.8125rem}.tet-icon--30{font-size:1.875rem}.tet-icon--31{font-size:1.9375rem}.tet-icon--32{font-size:2rem}.tet-icon--33{font-size:2.0625rem}.tet-icon--34{font-size:2.125rem}.tet-icon--35{font-size:2.1875rem}.tet-icon--36{font-size:2.25rem}.tet-icon--37{font-size:2.3125rem}.tet-icon--38{font-size:2.375rem}.tet-icon--39{font-size:2.4375rem}.tet-icon--40{font-size:2.5rem}.tet-icon--41{font-size:2.5625rem}.tet-icon--42{font-size:2.625rem}.tet-icon--43{font-size:2.6875rem}.tet-icon--44{font-size:2.75rem}.tet-icon--45{font-size:2.8125rem}.tet-icon--46{font-size:2.875rem}.tet-icon--47{font-size:2.9375rem}.tet-icon--48{font-size:3rem}.tet-icon--49{font-size:3.0625rem}.tet-icon--50{font-size:3.125rem}.tet-icon--51{font-size:3.1875rem}.tet-icon--52{font-size:3.25rem}.tet-icon--53{font-size:3.3125rem}.tet-icon--54{font-size:3.375rem}.tet-icon--55{font-size:3.4375rem}.tet-icon--56{font-size:3.5rem}.tet-icon--57{font-size:3.5625rem}.tet-icon--58{font-size:3.625rem}.tet-icon--59{font-size:3.6875rem}.tet-icon--60{font-size:3.75rem}.tet-icon--61{font-size:3.8125rem}.tet-icon--62{font-size:3.875rem}.tet-icon--63{font-size:3.9375rem}.tet-icon--64{font-size:4rem}.tet-icon--65{font-size:4.0625rem}.tet-icon--66{font-size:4.125rem}.tet-icon--67{font-size:4.1875rem}.tet-icon--68{font-size:4.25rem}.tet-icon--69{font-size:4.3125rem}.tet-icon--70{font-size:4.375rem}.tet-icon--71{font-size:4.4375rem}.tet-icon--72{font-size:4.5rem}.tet-icon--73{font-size:4.5625rem}.tet-icon--74{font-size:4.625rem}.tet-icon--75{font-size:4.6875rem}.tet-icon--76{font-size:4.75rem}.tet-icon--77{font-size:4.8125rem}.tet-icon--78{font-size:4.875rem}.tet-icon--79{font-size:4.9375rem}.tet-icon--80{font-size:5rem}.tet-icon--81{font-size:5.0625rem}.tet-icon--82{font-size:5.125rem}.tet-icon--83{font-size:5.1875rem}.tet-icon--84{font-size:5.25rem}.tet-icon--85{font-size:5.3125rem}.tet-icon--86{font-size:5.375rem}.tet-icon--87{font-size:5.4375rem}.tet-icon--88{font-size:5.5rem}.tet-icon--89{font-size:5.5625rem}.tet-icon--90{font-size:5.625rem}.tet-icon--91{font-size:5.6875rem}.tet-icon--92{font-size:5.75rem}.tet-icon--93{font-size:5.8125rem}.tet-icon--94{font-size:5.875rem}.tet-icon--95{font-size:5.9375rem}.tet-icon--96{font-size:6rem}.tet-icon--97{font-size:6.0625rem}.tet-icon--98{font-size:6.125rem}.tet-icon--99{font-size:6.1875rem}.tet-icon--100{font-size:6.25rem}.tet-icon--101{font-size:6.3125rem}.tet-icon__add:before{content:\"\\E800\"}.tet-icon__alert-circled:before{content:\"\\E801\"}.tet-icon__alert:before{content:\"\\E802\"}.tet-icon__bank:before{content:\"\\E803\"}.tet-icon__box:before{content:\"\\E804\"}.tet-icon__download:before{content:\"\\E805\"}.tet-icon__burger:before{content:\"\\E806\"}.tet-icon__cancel:before{content:\"\\E807\"}.tet-icon__printer:before{content:\"\\E808\"}.tet-icon__cart-add:before{content:\"\\E809\"}.tet-icon__cart-remove:before{content:\"\\E80A\"}.tet-icon__cart:before{content:\"\\E80B\"}.tet-icon__chat:before{content:\"\\E80C\"}.tet-icon__arrow-up:before{content:\"\\E80D\"}.tet-icon__calendar:before{content:\"\\E80E\"}.tet-icon__help-circled:before{content:\"\\E80F\"}.tet-icon__edit:before{content:\"\\E810\"}.tet-icon__external-link:before{content:\"\\E811\"}.tet-icon__gift:before{content:\"\\E812\"}.tet-icon__person:before{content:\"\\E813\"}.tet-icon__heart:before{content:\"\\E814\"}.tet-icon__language:before{content:\"\\E815\"}.tet-icon__help:before{content:\"\\E816\"}.tet-icon__home-1:before{content:\"\\E817\"}.tet-icon__location:before{content:\"\\E818\"}.tet-icon__home-3:before{content:\"\\E819\"}.tet-icon__chart-even:before{content:\"\\E81A\"}.tet-icon__info-2:before{content:\"\\E81B\"}.tet-icon__key:before{content:\"\\E81C\"}.tet-icon__info:before{content:\"\\E81D\"}.tet-icon__lock-opened:before{content:\"\\E81E\"}.tet-icon__lock-outlined:before{content:\"\\E81F\"}.tet-icon__lock:before{content:\"\\E820\"}.tet-icon__laptop-filled:before{content:\"\\E821\"}.tet-icon__mail:before{content:\"\\E822\"}.tet-icon__options:before{content:\"\\E823\"}.tet-icon__chart-uneven:before{content:\"\\E824\"}.tet-icon__mail-2:before{content:\"\\E825\"}.tet-icon__remove:before{content:\"\\E826\"}.tet-icon__mobile-filled:before{content:\"\\E827\"}.tet-icon__ilu-calendar-check:before{content:\"\\E828\"}.tet-icon__settings-outlined:before{content:\"\\E829\"}.tet-icon__tablet:before{content:\"\\E82A\"}.tet-icon__thumb-up:before{content:\"\\E82B\"}.tet-icon__ilu-purchase:before{content:\"\\E82C\"}.tet-icon__chart-even-outlined:before{content:\"\\E82D\"}.tet-icon__movie:before{content:\"\\E82E\"}.tet-icon__percent:before{content:\"\\E82F\"}.tet-icon__ilu-change-whenever:before{content:\"\\E830\"}.tet-icon__truck:before{content:\"\\E831\"}.tet-icon__zero:before{content:\"\\E832\"}.tet-icon__attach:before{content:\"\\E833\"}.tet-icon__cloud-done:before{content:\"\\E834\"}.tet-icon__cloud-download:before{content:\"\\E835\"}.tet-icon__cloud-upload:before{content:\"\\E836\"}.tet-icon__cloud:before{content:\"\\E837\"}.tet-icon__folder:before{content:\"\\E838\"}.tet-icon__remote:before{content:\"\\E839\"}.tet-icon__router:before{content:\"\\E83A\"}.tet-icon__shield-filled:before{content:\"\\E83B\"}.tet-icon__shield:before{content:\"\\E83C\"}.tet-icon__ilu-devices:before{content:\"\\E83D\"}.tet-icon__ilu-get-points:before{content:\"\\E83E\"}.tet-icon__tv:before{content:\"\\E83F\"}.tet-icon__ilu-internet:before{content:\"\\E840\"}.tet-icon__wifi-outlined:before{content:\"\\E841\"}.tet-icon__wifi:before{content:\"\\E842\"}.tet-icon__description-outlined:before{content:\"\\E843\"}.tet-icon__laptop:before{content:\"\\E844\"}.tet-icon__chart-uneven-outlined:before{content:\"\\E845\"}.tet-icon__meter:before{content:\"\\E846\"}.tet-icon__mobile:before{content:\"\\E847\"}.tet-icon__phone:before{content:\"\\E848\"}.tet-icon__plug-filled:before{content:\"\\E849\"}.tet-icon__plug:before{content:\"\\E84A\"}.tet-icon__print:before{content:\"\\E84B\"}.tet-icon__camera:before{content:\"\\E84C\"}.tet-icon__clock:before{content:\"\\E84D\"}.tet-icon__placeholder:before{content:\"\\E84E\"}.tet-icon__tv-filled:before{content:\"\\E84F\"}.tet-icon__arrow-down:before{content:\"\\E850\"}.tet-icon__arrow-left:before{content:\"\\E851\"}.tet-icon__arrow-right:before{content:\"\\E852\"}.tet-icon__description:before{content:\"\\E853\"}.tet-icon__login:before{content:\"\\E854\"}.tet-icon__check:before{content:\"\\E855\"}.tet-icon__chevron-down:before{content:\"\\E856\"}.tet-icon__chevron-left:before{content:\"\\E857\"}.tet-icon__chevron-right:before{content:\"\\E858\"}.tet-icon__chevron-up:before{content:\"\\E859\"}.tet-icon__close-circled:before{content:\"\\E85A\"}.tet-icon__close:before{content:\"\\E85B\"}.tet-icon__more-horizontal:before{content:\"\\E85C\"}.tet-icon__more-vertical:before{content:\"\\E85D\"}.tet-icon__refresh:before{content:\"\\E85E\"}.tet-icon__facebook:before{content:\"\\E85F\"}.tet-icon__instagram:before{content:\"\\E860\"}.tet-icon__linkedin:before{content:\"\\E861\"}.tet-icon__people:before{content:\"\\E862\"}.tet-icon__logout:before{content:\"\\E863\"}.tet-icon__share:before{content:\"\\E864\"}.tet-icon__twitter:before{content:\"\\E865\"}.tet-icon__cancel-filled:before{content:\"\\E866\"}.tet-icon__done:before{content:\"\\E867\"}.tet-icon__star-filled:before{content:\"\\E868\"}.tet-icon__star:before{content:\"\\E869\"}.tet-icon__clipboard:before{content:\"\\E86A\"}.tet-icon__ilu-calendar:before{content:\"\\E86B\"}.tet-icon__check-circled:before{content:\"\\E86C\"}.tet-icon__ilu-choose-channels:before{content:\"\\E86D\"}.tet-icon__search:before{content:\"\\E86E\"}.tet-icon__warning:before{content:\"\\E86F\"}.tet-icon__ilu-clock-1:before{content:\"\\E870\"}.tet-icon__ilu-fold:before{content:\"\\E871\"}.tet-icon__ilu-letter:before{content:\"\\E872\"}.tet-icon__ilu-pay:before{content:\"\\E873\"}.tet-icon__ilu-meter:before{content:\"\\E874\"}.tet-icon__ilu-sign:before{content:\"\\E875\"}.tet-icon__smart-watch-filled:before{content:\"\\E876\"}.tet-icon__washing-machine-filled:before{content:\"\\E877\"}.tet-icon__bullet:before{content:\"\\E878\"}.tet-icon__sound:before{content:\"\\E879\"}.tet-icon__dropdown:before{content:\"\\E87A\"}.tet-icon__mask-pass:before{content:\"\\E87B\"}.tet-icon__select:before{content:\"\\E87C\"}.tet-icon__text-area-sizing:before{content:\"\\E87D\"}.tet-icon__unmask-pass:before{content:\"\\E87E\"}.tet-icon__bullet-small:before{content:\"\\E882\"}.tet-icon__electric-bolt:before{content:\"\\E880\"}.tet-icon__sun:before{content:\"\\E881\"}:host{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit;padding:0;margin:0}:host{--color-gray-light:#cdd2de;--color-ta070:#f5f6f8;--color-ta080:#e6e8ee;--color-ta100:#cdd2de;--color-ta200:#9ba5be;--color-ta300:#69789c;--color-ta500:#1e356a;--color-ta600:#051d59;--color-tc090:#d6e6fd;--color-tc100:#d1dffe;--color-tc300:#75a1fb;--color-tc500:#1a70f6;--color-tc600:#0060f5;--color-td500:#00F1F2;--color-td600:#01cbe0;--color-tf600:#f53b2a;--color-tg300:#2b3036;--color-tg400:#1d2128;--color-tg500:#12171e;--color-tg600:#01050c;--color-th500:#f5f5f5;--color-ti500:#869198;--color-ti600:#aeb7bc;--text-font:Gilroy, serif;--text-color-darker:var(--color-ta600);--text-color-dark:var(--color-ta500);--text-color-dark-theme:var(--color-th500);--icons-font:Tet Icons, serif}.icon.tet-search{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-search::before{content:\"\\e86e\"}.icon.tet-close-circled{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-close-circled::before{content:\"\\e85a\"}.icon.tet-close{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-close::before{content:\"\\e85b\"}.icon.tet-check-circled{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-check-circled::before{content:\"\\e86c\"}.icon.tet-check{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-check::before{content:\"\\e855\"}.icon.tet-chevron-up{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-chevron-up::before{content:\"\\e859\"}.icon.tet-chevron-down{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-chevron-down::before{content:\"\\e856\"}.icon.tet-clipboard{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-clipboard::before{content:\"\\e86a\"}.icon.tet-info{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-info::before{content:\"\\e81d\"}.icon.tet-done{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-done::before{content:\"\\e867\"}@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)}:host{display:block;-webkit-tap-highlight-color:transparent}.container{display:grid;grid-template-columns:repeat(3, 1fr);row-gap:2rem;column-gap:0.25rem;margin:1.25rem 0 0.75rem;font:500 0.875rem/1.25rem \"Inter\", \"Gilroy, Arial, sans-serif\"}.container .year{display:flex;width:100%;height:2.875rem;align-items:center;justify-content:center;border-radius:1.5rem;cursor:pointer}.container .year.current:not(.container .year.selected,.container .year:active){border:0.09375rem solid rgb(153, 160, 174)}.container .year:active,.container .year.selected{color:var(--text-color-primary-light);background:rgb(10, 11, 13)}.container .year:hover:not(.container .year.selected,.container .year:active){background:var(--interaction-state-gray)}";
 const TetDatepickerMultiYearViewStyle0 = tetDatepickerMultiYearViewCss;