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

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-5749376d.js';
 
 const defineCustomElements = (opts) => {
     if (typeof customElements !== 'undefined') {

package/dist/components/{p-2aa241a0.js → p-085c661b.js}

@@ -1,10 +1,10 @@
-import { p as proxyCustomElement, H, h, f as forceUpdate, c as Host } from './p-37ed3ebb.js';
-import { s as state } from './p-d60c709d.js';
-import { p as processTranslations } from './p-ae1f41ee.js';
-import { d as defineCustomElement$4 } from './p-ed842a53.js';
-import { d as defineCustomElement$3 } from './p-cbbc6864.js';
-import { d as defineCustomElement$2 } from './p-58df31fd.js';
-import { d as defineCustomElement$1 } from './p-69091f37.js';
+import { p as proxyCustomElement, H, h, f as forceUpdate, c as Host } from './p-5749376d.js';
+import { s as state } from './p-3be1c277.js';
+import { p as processTranslations } from './p-70f08f08.js';
+import { d as defineCustomElement$4 } from './p-38631790.js';
+import { d as defineCustomElement$3 } from './p-79933eb4.js';
+import { d as defineCustomElement$2 } from './p-a380ee65.js';
+import { d as defineCustomElement$1 } from './p-08daefb4.js';
 
 const tetAddressOffersFiltersCss = ":host{display:block}.loader{display:flex;gap:0.5rem;flex-wrap:wrap}.loader .tag-placeholder{--placeholder-animation-speed:20s}";
 const TetAddressOffersFiltersStyle0 = tetAddressOffersFiltersCss;