@tet/tet-components 1.3.18-testing → 1.3.19-staging

package/dist/collection/components/advanced/address/tet-autocomplete/tet-autocomplete.css

@@ -350,6 +350,96 @@
   font-family: var(--font-family-content);
 }
 
+:root {
+  --tet-link-color: var(--tc-text-primary);
+  --tet-link-color-hover: var(--tc-text-secondary);
+  --tet-link-color-active: var(--tc-text-tertiary);
+  --tet-link-color-focus: var(--tc-blue-40);
+  --tet-link-color-disabled: var(--tc-button-text-inverse-disabled);
+}
+
+.tet-link,
+.tet-link__arrow {
+  text-decoration: underline;
+  color: var(--tet-link-color);
+  position: relative;
+  line-height: 1.5rem;
+  cursor: pointer;
+}
+.tet-link.dark,
+.tet-link__arrow.dark {
+  --tet-link-color: var(--tc-text-primary-dark);
+  --tet-link-color-hover: var(--tc-text-secondary-dark);
+  --tet-link-color-active: var(--tc-text-tertiary-dark);
+  --tet-link-color-focus: var(--tc-blue-40-dark);
+  --tet-link-color-disabled: var(--tc-button-text-inverse-disabled-dark);
+}
+.tet-link tet-icon,
+.tet-link__arrow tet-icon {
+  --icon-color: var(--tet-link-color);
+}
+.tet-link:hover,
+.tet-link__arrow:hover {
+  color: var(--tet-link-color-hover);
+}
+.tet-link:hover tet-icon,
+.tet-link__arrow:hover tet-icon {
+  --icon-color: var(--tet-link-color-hover);
+}
+.tet-link:active,
+.tet-link__arrow:active {
+  color: var(--tet-link-color-active);
+}
+.tet-link:active tet-icon,
+.tet-link__arrow:active tet-icon {
+  --icon-color: var(--tet-link-color-active);
+}
+.tet-link:focus-visible,
+.tet-link__arrow:focus-visible {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline-offset: 0.125rem;
+  transition: outline 0s;
+  outline-color: var(--tet-link-color-focus);
+  border-radius: 0.125rem;
+}
+.tet-link.disabled,
+.tet-link__arrow.disabled {
+  color: var(--tet-link-color-disabled);
+  pointer-events: none;
+  cursor: auto;
+}
+.tet-link.disabled tet-icon,
+.tet-link__arrow.disabled tet-icon {
+  --icon-color: var(--tet-link-color-disabled);
+}
+.tet-link.disabled:focus-visible,
+.tet-link__arrow.disabled:focus-visible {
+  outline: none;
+}
+.tet-link tet-icon,
+.tet-link__arrow tet-icon {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+  --icon-container-display: inline-block;
+}
+
+.tet-link__arrow {
+  padding-right: 1.5rem;
+}
+.tet-link__arrow::after {
+  content: "-->";
+  position: absolute;
+  white-space: nowrap;
+  display: inline-block;
+  text-decoration: none;
+  padding-left: 0.25rem;
+  letter-spacing: initial;
+  transition: all 0.15s ease-in;
+}
+.tet-link__arrow:hover::after {
+  padding-left: 0.375rem;
+}
+
 :host {
   /**
    * @prop --option-padding: The padding of the select options.
@@ -365,8 +455,8 @@
   --options-max-height: 15.625rem;
   --option-background-color: var(--tc-layer-primary);
   --option-hover-background-color: var(--tc-button-primary-background-inverse-hover);
-  --option-item-icon-color: var(--tc-text-primary);
-  --option-item-icon-hover-color: var(--tc-text-primary);
+  --option-item-icon-color: var(--tc-icon-secondary);
+  --option-item-icon-hover-color: var(--tc-icon-primary);
   --option-text-color: var(--tc-text-primary);
   --option-container-border-color: var(--tc-border-secondary);
   display: block;
@@ -386,6 +476,7 @@
   position: absolute;
   z-index: 20;
   width: 100%;
+  background-color: var(--option-background-color);
   margin: 0;
   padding: 0;
   border-radius: 0.1875rem;
@@ -394,11 +485,21 @@
   animation: slideDown 0.125s ease-out 1;
   animation-fill-mode: forwards;
 }
+.autocomplete-options-container .autocomplete-options {
+  padding: 0.375rem 0;
+}
+.autocomplete-options-container .autocomplete-options-item {
+  margin: 0 0.375rem;
+}
+.autocomplete-options-container .autocomplete-options-item .manual-input {
+  outline-offset: 0.125rem !important;
+  margin: 0 0.375rem;
+}
 .autocomplete-options-container.dark {
   --option-background-color: var(--tc-layer-primary-dark);
   --option-hover-background-color: var(--tc-button-primary-background-inverse-hover-dark);
-  --option-item-icon-color: var(--tc-text-primary-dark);
-  --option-item-icon-hover-color: var(--tc-text-primary-dark);
+  --option-item-icon-color: var(--tc-icon-secondary-dark);
+  --option-item-icon-hover-color: var(--tc-icon-primary-dark);
   --option-text-color: var(--tc-text-primary-dark);
   --option-container-border-color: var(--tc-border-secondary-dark);
 }
@@ -414,7 +515,7 @@
   overflow: hidden;
 }
 .autocomplete-options-container.new-style .autocomplete-options {
-  padding: 0.5rem;
+  padding: 0.5rem 0;
 }
 .autocomplete-options-container.new-style .autocomplete-options-item {
   display: flex;
@@ -423,8 +524,12 @@
   color: var(--option-text-color);
   border-radius: 0.625rem;
   gap: 0.5rem;
+  margin: 0 0.5rem;
   font: 400 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
 }
+.autocomplete-options-container.new-style .autocomplete-options-item .manual-input {
+  margin: 0 0.5rem;
+}
 .autocomplete-options-container.new-style .autocomplete-options-none-message {
   font-size: 0.875rem;
   color: var(--option-text-color);
@@ -436,54 +541,51 @@
   display: flex;
   align-items: center;
   padding: var(--option-padding);
-  color: var(--text-color-dark);
-  background: transparent;
+  color: var(--option-text-color);
+  background: var(--option-background-color);
   cursor: pointer;
 }
 .autocomplete-options-item .icon {
-  --icon-color: var(--item-icon-color);
+  --icon-color: var(--option-item-icon-color);
   --icon-size: 1.25rem;
 }
-.autocomplete-options-item.dark {
-  color: var(--text-color-dark-theme);
-}
 .autocomplete-options-item:hover, .autocomplete-options-item.active {
   background: var(--option-hover-background-color);
-  --item-icon-color: var(--option-item-icon-hover-color);
+  --option-item-icon-color: var(--option-item-icon-hover-color);
 }
-.autocomplete-options-item:hover.focus-visible, .autocomplete-options-item.active.focus-visible {
+.autocomplete-options-item:hover.focus-visible:not(:has(a)), .autocomplete-options-item:hover.focus-visible a, .autocomplete-options-item.active.focus-visible:not(:has(a)), .autocomplete-options-item.active.focus-visible a {
   outline: 0.125rem solid var(--tc-blue-40);
-  outline-offset: 0.125rem;
+  outline-offset: 0rem;
   transition: outline 0s;
-  outline-offset: 0;
-  background: transparent;
+  background: var(--option-background-color);
   border-radius: 0.125rem;
+  z-index: 2;
 }
-.autocomplete-options-item:hover.focus-visible.dark, .autocomplete-options-item.active.focus-visible.dark {
+.autocomplete-options-item:hover.focus-visible:not(:has(a)).dark, .autocomplete-options-item:hover.focus-visible a.dark, .autocomplete-options-item.active.focus-visible:not(:has(a)).dark, .autocomplete-options-item.active.focus-visible a.dark {
   outline: 0.125rem solid var(--tc-blue-40);
   outline: 0.125rem solid var(--tc-blue-40-dark);
-  outline-offset: 0.125rem;
+  outline-offset: 0rem;
   transition: outline 0s;
 }
 .autocomplete-options-loader {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--option-background-color);
+  background: var(--tc-layer-primary);
   position: absolute;
   height: 11.625rem;
   width: 100%;
   z-index: 100;
 }
+.autocomplete-options-loader.dark {
+  background: var(--tc-layer-primary-dark);
+}
 .autocomplete-options-none-message {
   padding: var(--option-padding);
-  color: var(--text-color-dark);
+  color: var(--option-text-color);
   background: var(--option-background-color);
   text-align: center;
 }
-.autocomplete-options-none-message.dark {
-  color: var(--text-color-dark-theme);
-}
 
 @keyframes slideDown {
   0% {

package/dist/collection/components/advanced/address/tet-autocomplete/tet-autocomplete.js

@@ -144,7 +144,12 @@ export class TetAutocomplete {
                 });
             }
             return (h("li", { class: { 'autocomplete-options-item': true,
-                    'active': option === this.activeOption, 'dark': this.darkTheme, 'focus-visible': (option === this.activeOption && this.isKeyboardFocus) }, part: cssPart, onClick: onClickAction, ref: (element) => option === this.activeOption && (this.activeOptionElement = element), id: `${this.internalUniqueId}-${idx}`, role: "option" }, this.optionsIcon && this.newStyle && (h("tet-icon", { class: "icon", name: this.optionsIcon })), h("span", { innerHTML: optionLabel })));
+                    'active': option === this.activeOption, 'dark': this.darkTheme, 'focus-visible': (option === this.activeOption && this.isKeyboardFocus) }, part: cssPart, onClick: onClickAction, ref: (element) => option === this.activeOption && (this.activeOptionElement = element), id: `${this.internalUniqueId}-${idx}`, role: "option" }, option.value === 'manual-input'
+                ? h("a", { class: { 'tet-link': true, 'dark': this.darkTheme, 'manual-input': true }, innerHTML: optionLabel })
+                : [
+                    this.optionsIcon && this.newStyle && (h("tet-icon", { class: "icon", name: this.optionsIcon })),
+                    h("span", { innerHTML: optionLabel })
+                ]));
         };
         this.renderOptions = (options) => {
             var _a;
@@ -343,7 +348,10 @@ export class TetAutocomplete {
         }
     }
     render() {
-        return (h(Host, { key: 'd63289f9b18f53fac2ca7f6eab17c20664395583', class: "autocomplete" }, h("slot", { key: 'aaa969477d5662cef2163865d46d9a5e519611e1' }), this.renderOptionsLoader(), this.renderOptions(this.filteredOptions)));
+        return (h(Host, { key: 'e2e618b5cd1962878d8f8a583b74689550fc3567', class: {
+                'autocomplete': true,
+                'dark': this.darkTheme,
+            } }, h("slot", { key: 'afc91c0b4e3fc27e6fb474511bb644bec76e51c4' }), this.renderOptionsLoader(), this.renderOptions(this.filteredOptions)));
     }
     static get is() { return "tet-autocomplete"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/advanced/address/tet-autocomplete-dropdown/tet-autocomplete-dropdown.js

@@ -69,7 +69,7 @@ export class TetAutocompleteDropdown {
         return this.inputValue.length ? IconName.Close : IconName.ChevronDown;
     }
     render() {
-        return (h(Host, { key: '6c809e85b821f6443000a239dfdda543dee042a2' }, h("tet-autocomplete", { key: 'd2385526b2c10e75a437dcdd742e7e104d3e3efe', newStyle: true, defaultOptions: this.options, showOptionsOnEscapeClear: true, noOptionsMessage: this.noOptionsMessage, optionsFilterAction: this.optionsFilterAction, clearCallback: this.autocompleteClearInputCallback, onOptionSelected: this.handleAutocompleteOptionSelection, ref: (element) => (this.autocomplete = element), darkTheme: this.theme === 'dark' }, h("tet-input", { key: 'd32b32d6a5fc62b029a9863335cdb32ea98396bd', class: "input", label: this.label, error: this.hasError, "icon-right": this.rightIconName, "input-class": "autocomplete-input", "input-placeholder": this.placeholder, ref: (element) => (this.inputComponent = element), iconRightClickCallback: this.iconRightClickCallback, theme: this.theme })), this.hasError && this.errorMessage && h("p", { key: 'a69c055a5a7e6bd019de8f3f8d424095259228ac', class: "error-message" }, this.errorMessage)));
+        return (h(Host, { key: '10cf9b1f2f52f33e80de730efea5c9064f6496db' }, h("tet-autocomplete", { key: '58247af00fab024189881cfdf3422f346ad5cf86', newStyle: true, defaultOptions: this.options, showOptionsOnEscapeClear: true, noOptionsMessage: this.noOptionsMessage, optionsFilterAction: this.optionsFilterAction, clearCallback: this.autocompleteClearInputCallback, onOptionSelected: this.handleAutocompleteOptionSelection, ref: (element) => (this.autocomplete = element), darkTheme: this.theme === 'dark' }, h("tet-input", { key: '1428561aa7b724260489e338b94fb59002cf5985', class: "input", label: this.label, error: this.hasError, "icon-right": this.rightIconName, "input-class": "autocomplete-input", "input-placeholder": this.placeholder, ref: (element) => (this.inputComponent = element), iconRightClickCallback: this.iconRightClickCallback, theme: this.theme })), this.hasError && this.errorMessage && h("p", { key: '04b67e666ce1233c5b22dc4c0e0716f40a825388', class: "error-message" }, this.errorMessage)));
     }
     static get is() { return "tet-autocomplete-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/advanced/cards/tet-business-compare-card/tet-business-compare-card.js

@@ -28,10 +28,10 @@ export class TetBusinessCompareCard {
     }
     render() {
         const { mainTitle, bulletPoints, theme, pricePrefix, price, currency } = this;
-        return (h("div", { key: '8b7549f08013f0293f683dabc93f68d045bc5d12', class: { 'tet-business-compare-card': true, [`theme-${theme}`]: true } }, h("div", { key: '593ca327a83f2160ae26c6f43a78264842a4870f', class: "tet-business-compare-card__body" }, h("div", { key: 'add4cb40b5becc090f756c2a8ff0a3a5c060b27b', class: "tet-business-compare-card__title" }, h("slot", { key: 'f828db6c2220790328c8c19091d3a10c124f067a', name: "title" }, mainTitle)), h("div", { key: '0e2aca017bb165781c93e79e5e5b4a076212949d', class: "tet-business-compare-card__content" }, h("slot", { key: '9baf4c09e38433673a40ee99f23b8a7ab79ee766', name: "content" }, !!(bulletPoints === null || bulletPoints === void 0 ? void 0 : bulletPoints.length) && (h("tet-text-list", { key: '75a2559063f8eb4c1dbe743329ed69c1b62cab5e', class: "bullet-points", theme: this.theme === 'dark' ? 'dark' : 'light' }, bulletPoints.map(bulletPoint => (h("p", null, bulletPoint)))))))), price && currency && (h("div", { key: '061c08d546c0fd32e6ce8917b6f9a05544e6e30f', class: "tet-business-compare-card__price-wrapper" }, pricePrefix && (h("div", { key: '79f626414a4538634cd7bb5ea5b56abea61afc20', class: "tet-business-compare-card__price" }, h("span", { key: 'd63fac0e480950096c05e63f88bdddc9ca63f9e1', class: "tet-business-compare-card__price-prefix" }, pricePrefix, "\u00A0"), price)), !pricePrefix && h("div", { key: '2b422c512338ee1eaea4e0bdd5578b0fa07eaf54', class: "tet-business-compare-card__price" }, price), h("div", { key: '0a0b6685d454cf9b9e3802a59843ac21accded6f', class: "tet-business-compare-card__price-currency" }, currency))), h("div", { key: '6af6bd26e7971029ac6ce887ca7824ca926165f2', class: {
+        return (h("div", { key: 'ee0598c47d0128716d38530b734b9340f5de7754', class: { 'tet-business-compare-card': true, [`theme-${theme}`]: true } }, h("div", { key: 'cdfb395881a557fd5c481adce79311df6bdcad70', class: "tet-business-compare-card__body" }, h("div", { key: '48038f67ff3fd49c885d89bfabfd31cddcccec02', class: "tet-business-compare-card__title" }, h("slot", { key: 'e0f704d691d5b411d816102111b4ad8650d9cc50', name: "title" }, mainTitle)), h("div", { key: '6194e7f063c1a351d21d83dea0b93b88c03fa82f', class: "tet-business-compare-card__content" }, h("slot", { key: 'b9e15901a1388d8890bb0828616bae601b5f25b7', name: "content" }, !!(bulletPoints === null || bulletPoints === void 0 ? void 0 : bulletPoints.length) && (h("tet-text-list", { key: '964324d51b4590aec3609fe07c95771209317e59', class: "bullet-points", theme: this.theme === 'dark' ? 'dark' : 'light' }, bulletPoints.map(bulletPoint => (h("p", null, bulletPoint)))))))), price && currency && (h("div", { key: 'c3f8cf8a409319478f574387cfb8e435e5382483', class: "tet-business-compare-card__price-wrapper" }, pricePrefix && (h("div", { key: 'df5fcc07ce7518a0d37f5c5d6efcf80c1efa8bd1', class: "tet-business-compare-card__price" }, h("span", { key: 'f0e2e0854131b4d14d1721f14cc5f4cc31de52b4', class: "tet-business-compare-card__price-prefix" }, pricePrefix, "\u00A0"), price)), !pricePrefix && h("div", { key: '7a8125759678bd7f007dba427465f93d36684d2f', class: "tet-business-compare-card__price" }, price), h("div", { key: '1acc28ca81455b257f566bb876c7f081fc952261', class: "tet-business-compare-card__price-currency" }, currency))), h("div", { key: 'f8982c067bb65506e6e3d4cbeb811aa3a24e996f', class: {
                 'tet-business-compare-card__footer': true,
                 'tet-business-compare-card__footer--show': this.hasContentInFooter,
-            } }, h("slot", { key: 'e89425e05db57a2e9727cc412bc9302bc135a631', ref: (slot) => (this.buttonSlotRef = slot), onSlotchange: this.checkFooterSlotContent, name: "button" }), h("slot", { key: '1bf419574dd23c829d469c79388254b14223273e', ref: (slot) => (this.linkSlotRef = slot), onSlotchange: this.checkFooterSlotContent, name: "link" }))));
+            } }, h("slot", { key: '1eafe548e99cd863ff6a56080700450e67f5e55b', ref: (slot) => (this.buttonSlotRef = slot), onSlotchange: this.checkFooterSlotContent, name: "button" }), h("slot", { key: '9b1ff441cca03634d41dbfa86b2880b3d8db999d', ref: (slot) => (this.linkSlotRef = slot), onSlotchange: this.checkFooterSlotContent, name: "link" }))));
     }
     static get is() { return "tet-business-compare-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/advanced/cards/tet-card-list/tet-card-list.js

@@ -646,19 +646,19 @@ export class TetCardList {
         this.dimensions.element.width = elementRect.width;
     }
     render() {
-        return (h(Host, { key: '005ac25320712b7f23c8f79df1025910e7b35608' }, h("div", { key: 'a81b2ecf33f0481bcef04eb71c7814f9a23dba37', class: {
+        return (h(Host, { key: '0c2dd405070082b82e11c62d96acc56ff42cd48b' }, h("div", { key: 'f3956be3f2188559bc4dd8e6053e0ff1395bcc64', class: {
                 'tet-card-list__container': true,
                 'tet-card-list--no-scroll': this.disableScroll,
                 [this.theme]: true,
-            }, part: "card-list-container" }, h("div", { key: 'a2c7327104586ef66b669880501ed329c4cda6b3', class: "tet-card-list__scroll-container" }, h("div", { key: 'fda301b0393895ac1c9cd0393cbc350a0bccc02e', part: "card-list", ref: el => (this.scrollContainerRef = el) }, h("slot", { key: '2bdfb39da59c43f0231f986d6ce87ac69803746b' }))), h("tet-button", { key: '3b823c1fb350c2d1000588666dc81ade69c07585', theme: this.theme, iconMode: true, class: {
+            }, part: "card-list-container" }, h("div", { key: '84601863dc7ee44428c587f49419ba2e8f362579', class: "tet-card-list__scroll-container" }, h("div", { key: '7211018edb516463ba8a83129da050b0adb1d877', part: "card-list", ref: el => (this.scrollContainerRef = el) }, h("slot", { key: '006db556e80882436fe6d7907a62a9d8e0f26318' }))), h("tet-button", { key: '5bfd4ba33c1b64d2911e1fda3ce5a8bda919d445', theme: this.theme, iconMode: true, class: {
                 'tet-card-list__control': true,
                 'tet-card-list__control--left': true,
                 'tet-card-list__control--hidden': !this.controlVisibility.left,
-            }, onPointerDown: this.handleControlPointerDown, onPointerUp: this.handleLeftControl, onKeyUp: this.handleLeftControlKeyUp }, h("tet-icon", { key: '79afbc22bdbe383797d16abceadde827e626b5cc', name: this.iconPrev && this.iconPrev !== '' ? this.iconPrev : 'chevron-left', class: "tet-card-list__control__icon" })), h("tet-button", { key: '4e598643ce5b318342efc09a463f4a45ebc547db', theme: this.theme, iconMode: true, class: {
+            }, onPointerDown: this.handleControlPointerDown, onPointerUp: this.handleLeftControl, onKeyUp: this.handleLeftControlKeyUp }, h("tet-icon", { key: '559030affea930ab2e9ef6918e47eae12859acde', name: this.iconPrev && this.iconPrev !== '' ? this.iconPrev : 'chevron-left', class: "tet-card-list__control__icon" })), h("tet-button", { key: '130dd816403e90982332932c429b162b892e7f49', theme: this.theme, iconMode: true, class: {
                 'tet-card-list__control': true,
                 'tet-card-list__control--right': true,
                 'tet-card-list__control--hidden': !this.controlVisibility.right,
-            }, onPointerDown: this.handleControlPointerDown, onPointerUp: this.handleRightControl, onKeyUp: this.handleRightControlKeyUp }, h("tet-icon", { key: '58ade768e96cf33ac377d1ffff1726e569415614', name: this.iconNext && this.iconNext !== '' ? this.iconNext : 'chevron-right', class: "tet-card-list__control__icon" })), h("div", { key: '8e720e69e34a6cf019e3dd0730395e713f6feb1c', class: { 'tet-card-list__scroll': true, 'tet-card-list--hidden': !this.withScrollbar } }, h("div", { key: '24451138506afefd496849925ac390d71044d059', class: "tet-card-list__scroll--thumb", ref: el => (this.scrollbarRef = el) })))));
+            }, onPointerDown: this.handleControlPointerDown, onPointerUp: this.handleRightControl, onKeyUp: this.handleRightControlKeyUp }, h("tet-icon", { key: '5cf9b9fe8fcdf7ec639b19b098fbaa2fb7402c32', name: this.iconNext && this.iconNext !== '' ? this.iconNext : 'chevron-right', class: "tet-card-list__control__icon" })), h("div", { key: 'ae90aef2f57a4e7ba4b77323af1523568820a60e', class: { 'tet-card-list__scroll': true, 'tet-card-list--hidden': !this.withScrollbar } }, h("div", { key: 'f900a949b4aaa85e819eeb8e737ff8a6bcb0fcdc', class: "tet-card-list__scroll--thumb", ref: el => (this.scrollbarRef = el) })))));
     }
     static get is() { return "tet-card-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/advanced/cards/tet-compare-card/tet-compare-card.css

@@ -5254,11 +5254,13 @@
   --tc-button-text-primary-dark: var(--tc-grey-00-dark);
   --tc-button-text-secondary-dark: var(--tc-grey-100-dark);
   --tc-button-text-disabled-dark: rgba(10, 11, 13, 0.32);
-  --tc-button-text-white-permanent-dark: rgb(255, 255, 255);
-  --tc-button-text-black-permanent-dark: rgb(10, 11, 13);
+  --tc-button-text-secondary-disabled-dark: rgba(235, 237, 239, 0.3);
+  --tc-button-text-white-permanent-dark: var(--tc-grey-100-dark);
+  --tc-button-text-black-permanent-dark: var(--tc-grey-00-dark);
   --tc-button-text-inverse-primary-dark: var(--tc-grey-100-dark);
   --tc-button-text-inverse-secondary-dark: var(--tc-grey-00-dark);
   --tc-button-text-inverse-disabled-dark: rgba(255, 255, 255, 0.49);
+  --tc-button-text-inverse-secondary-disabled-dark: rgba(35, 40, 46, 0.16);
   --tc-button-primary-background-default-dark: rgb(255, 255, 255);
   --tc-button-primary-background-hover-dark: rgba(235, 237, 239, 0.9);
   --tc-button-primary-background-pressed-dark: rgba(235, 237, 239, 0.8);
@@ -5269,15 +5271,22 @@
   --tc-button-primary-background-inverse-disabled-dark: rgba(35, 40, 46, 0.3);
   --tc-button-secondary-background-hover-dark: rgba(235, 237, 239, 0.15);
   --tc-button-secondary-background-pressed-dark: rgba(235, 237, 239, 0.3);
-  --tc-button-secondary-background-disabled-dark: rgba(235, 237, 239, 0.3);
+  --tc-button-secondary-background-inverse-hover-dark: rgba(35, 40, 46, 0.12);
+  --tc-button-secondary-background-inverse-pressed-dark: rgba(35, 40, 46, 0.3);
   --tc-button-icon-primary-dark: var(--tc-grey-00-dark);
   --tc-button-icon-secondary-dark: var(--tc-grey-100-dark);
   --tc-button-icon-disabled-dark: rgba(10, 11, 13, 0.32);
+  --tc-button-icon-secondary-disabled-dark: rgba(235, 237, 239, 0.3);
   --tc-button-icon-white-permanent-dark: var(--tc-grey-100-dark);
   --tc-button-icon-black-permanent-dark: var(--tc-grey-00-dark);
   --tc-button-icon-inverse-primary-dark: var(--tc-grey-100-dark);
   --tc-button-icon-inverse-secondary-dark: var(--tc-grey-00-dark);
   --tc-button-icon-inverse-disabled-dark: rgba(255, 255, 255, 0.49);
+  --tc-button-icon-inverse-secondary-disabled-dark: rgba(35, 40, 46, 0.16);
+  --tc-button-border-secondary-dark: var($_grey-100);
+  --tc-button-border-disabled-dark: rgba(235, 237, 239, 0.3);
+  --tc-button-border-inverse-secondary-dark: var($_grey-00);
+  --tc-button-border-inverse-disabled-dark: rgba(35, 40, 46, 0.16);
   --tc-menu-item-hover-dark: rgba(235, 237, 239, 0.12);
   --tc-menu-item-pressed-dark: rgba(235, 237, 239, 0.24);
   --tc-menu-item-active-dark: rgba(29, 50, 84, 1);
@@ -5498,31 +5507,40 @@
   */
   --tc-button-text-primary: var(--tc-grey-00);
   --tc-button-text-secondary: var(--tc-grey-100);
-  --tc-button-text-disabled: rgba(255, 255, 255, 0.4);
+  --tc-button-text-disabled: rgba(255, 255, 255, 0.49);
+  --tc-button-text-secondary-disabled: rgba(35, 40, 46, 0.16);
   --tc-button-text-white-permanent: var(--tc-grey-00);
   --tc-button-text-black-permanent: var(--tc-grey-100);
   --tc-button-text-inverse-primary: var(--tc-grey-100);
   --tc-button-text-inverse-secondary: var(--tc-grey-00);
   --tc-button-text-inverse-disabled: rgba(10, 11, 13, 0.32);
+  --tc-button-text-inverse-secondary-disabled: rgba(235, 237, 239, 0.3);
   --tc-button-primary-background-default: rgb(0, 0, 0);
   --tc-button-primary-background-hover: rgba(35, 40, 46, 0.9);
   --tc-button-primary-background-pressed: rgba(35, 40, 46, 0.8);
-  --tc-button-primary-background-disabled: rgba(35, 40, 46, 0.16);
+  --tc-button-primary-background-disabled: rgba(35, 40, 46, 0.3);
   --tc-button-primary-background-inverse-default: rgb(255, 255, 255);
   --tc-button-primary-background-inverse-hover: rgba(235, 237, 239, 0.9);
   --tc-button-primary-background-inverse-pressed: rgba(235, 237, 239, 0.8);
-  --tc-button-primary-background-inverse-disabled: rgba(235, 237, 239, 0.16);
+  --tc-button-primary-background-inverse-disabled: rgba(235, 237, 239, 0.3);
   --tc-button-secondary-background-hover: rgba(35, 40, 46, 0.12);
   --tc-button-secondary-background-pressed: rgba(35, 40, 46, 0.3);
-  --tc-button-secondary-background-disabled: rgba(35, 40, 46, 0.16);
+  --tc-button-secondary-background-inverse-hover: rgba(235, 237, 239, 0.15);
+  --tc-button-secondary-background-inverse-pressed: rgba(235, 237, 239, 0.3);
   --tc-button-icon-primary: var(--tc-grey-00);
   --tc-button-icon-secondary: var(--tc-grey-100);
-  --tc-button-icon-disabled: rgba(255, 255, 255, 0.4);
+  --tc-button-icon-disabled: rgba(255, 255, 255, 0.49);
+  --tc-button-icon-secondary-disabled: rgba(35, 40, 46, 0.16);
   --tc-button-icon-white-permanent: var(--tc-grey-00);
   --tc-button-icon-black-permanent: var(--tc-grey-100);
   --tc-button-icon-inverse-primary: var(--tc-grey-100);
   --tc-button-icon-inverse-secondary: var(--tc-grey-00);
   --tc-button-icon-inverse-disabled: rgba(10, 11, 13, 0.32);
+  --tc-button-icon-inverse-secondary-disabled: rgba(235, 237, 239, 0.3);
+  --tc-button-border-secondary: var($_grey-100);
+  --tc-button-border-disabled: rgba(35, 40, 46, 0.16);
+  --tc-button-border-inverse-secondary: var($_grey-00);
+  --tc-button-border-inverse-disabled: rgba(235, 237, 239, 0.3);
   --tc-menu-item-hover: rgba(35, 40, 46, 0.06);
   --tc-menu-item-pressed: rgba(35, 40, 46, 0.12);
   --tc-menu-item-active: var(--tc-blue-00);

package/dist/collection/components/advanced/cards/tet-compare-cards/tet-compare-cards.js

@@ -115,7 +115,7 @@ export class TetCompareCards {
         });
     }
     render() {
-        return (h(Host, { key: 'f0e2d0e248a368d9410e1cd73b67f51e0f673c06', class: {
+        return (h(Host, { key: 'a5d21665ac715303c872ddc09cd1bcb2790da5be', class: {
                 'must-initialize': true,
                 'initialized': this.initializedState
             } }, this.showLoader ? (this.renderLoader()) : (h("div", { class: {

package/dist/collection/components/advanced/cards/tet-compare-cards-tab/tet-compare-cards-tab.js

@@ -163,7 +163,7 @@ export class TetTabCompareCards {
         return (h("div", { class: "tet-compare-cards-tab__content" }, h("tet-compare-cards", { layout: this.layout, "force-column": this.forceColumn, "vat-text": vatText !== null && vatText !== void 0 ? vatText : false, "card-script": cardScript !== null && cardScript !== void 0 ? cardScript : false, data: cardsWithAddedSACData, newUrlGeneratorStructure: this.newUrlGeneratorStructure })));
     }
     render() {
-        return (h(Host, { key: '0e387a6e052be624cebfd8e0b60184e4101b899b' }, h("div", { key: '8699855979485ac80cec2e03a9e5c75efcf51705', class: "tet-compare-cards-tab-wrapper" }, this.renderTabHeader(this.data, 1), this.renderLoader(), h("div", { key: 'fa1e5dfd841e44dae8ad5b9507bfd9af36eef376', class: {
+        return (h(Host, { key: '2a42fe1ca65c2bbb479f9eaf480bb19358d060ed' }, h("div", { key: 'fd1a288d5a7138890db6a7d47c96edff30db5585', class: "tet-compare-cards-tab-wrapper" }, this.renderTabHeader(this.data, 1), this.renderLoader(), h("div", { key: '79444001bce5e8159660776783ec8c7b64b9a15b', class: {
                 'tet-compare-cards-tab__cards': true,
                 'hidden': this.showLoader
             } }, this.productDataLoaded ? this.renderContent(this.data, 1) : ''))));

package/dist/collection/components/advanced/customer/tet-customer-assets/tet-customer-assets.js

@@ -117,7 +117,7 @@ export class TetCustomerAssets {
         return provisioningStatus === 'Active' && tetProductType !== 'ConsumerGoods';
     }
     render() {
-        return (h(Host, { key: '483c3486e39408f0f1ea27875a104889b096b4b0' }, h("div", { key: '03989bf22ff7be29d94e07e7e7f9f95c47cd61db', class: { wrapper: this.showLoader && this.singleLoader, 'dark-theme': this.darkTheme } }, this.showLoader && this.singleLoader
+        return (h(Host, { key: 'b69a1886035cd78db3b75d8d64d8558c2f4bb69e' }, h("div", { key: '2aa0848b51884e41017857a944ab0747d44c8ce7', class: { wrapper: this.showLoader && this.singleLoader, 'dark-theme': this.darkTheme } }, this.showLoader && this.singleLoader
             ? h("tet-loader", { class: "loader-single" })
             : this.showLoader ? this.renderLoader() : this.renderAssetsList())));
     }

package/dist/collection/components/advanced/customer/tet-referral/tet-referral.js

@@ -39,7 +39,7 @@ export class TetReferral {
         processTranslations('tet-components', this.language).then(() => forceUpdate(this));
     }
     render() {
-        return (h(Host, { key: '0064b74f704d5e11f664b35156a2ede4b6b16bd8' }, h("div", { key: '462207019286105348701d58b90c7098479abb90', class: "wrapper" }, h("div", { key: '63b2a82855aa8bc610277856910911e0f708be7e', class: "image-container" }, h("img", { key: '511c8bef34f850c128f47271cb1df45f5a15a55c', src: t('components-referral-image-url'), alt: "" })), h("div", { key: '40961456c31fbaf123305588f5e4c5289f08cf44', class: "subtitle-container" }, t('components-referral-subtitle')), h("div", { key: '17e687cbb23602fd739678558d734b6450173fa1', class: "description-container", innerHTML: t('components-referral-description') }), h("div", { key: 'b327b003f8c3e62bb21594bbbadfe3121a30e072', class: "referral-block" }, h("div", { key: 'b1829766e2fb9e3f5448ea31790cbed2728146e9', class: "url-wrapper" }, h("div", { key: '3e6d030e9614925a0ac8a17f64dea0ad340f778f', class: "referral-url" }, this.getReferralUrl()), h("div", { key: 'e10bc99e331cbbeeb5275d8e6a71ffaf00793c8f' }, h("div", { key: '0fc05c0c6fec23d084b72e22f4c66bf2a6f7ce6a', class: "button-wrapper" }, h("tet-tooltip", { key: '4c8495e5ab070d3dd50625fc01360e77eb32edaa', class: "tooltip", doNotShowOnHover: true, ref: (el) => { this.tooltip = el; } }, t('components-referral-tooltip')), h("tet-button", { key: '624e5cd9d66732b4e6af2a2adea911f449e7cb84', clickCallback: this.copyToClipBoard, type: "primary" }, t('components-referral-copy-button-label')))))))));
+        return (h(Host, { key: '3a94cc93b37397fcfdd737a346171647edbe9202' }, h("div", { key: '9b9c9f2b4e3d54211b706b0ba2445c452fe204d2', class: "wrapper" }, h("div", { key: 'ad1aa09ce3f66df5aafd75d34edbda674fa6e693', class: "image-container" }, h("img", { key: '4353b15c387d10f3b47d669fcd86c56a1e74ad8c', src: t('components-referral-image-url'), alt: "" })), h("div", { key: 'a968969319dd35fdfab2c98aea9f13f9349dc62c', class: "subtitle-container" }, t('components-referral-subtitle')), h("div", { key: '9961d7576cb65bae6f035ed48194ce62198a2116', class: "description-container", innerHTML: t('components-referral-description') }), h("div", { key: '5db2b6fa66bfe9f33395eeca1e8bb68ccec3036b', class: "referral-block" }, h("div", { key: '749fcd43207bc685d9a828165273f5beb7086615', class: "url-wrapper" }, h("div", { key: '5a8db237ccbad5a531f6c36245c719693f22e11c', class: "referral-url" }, this.getReferralUrl()), h("div", { key: '85ac755947f12341bd43c40be4bbf87bdb57e44c' }, h("div", { key: '3447a2f187c25b0563293c1a9347c1099a102174', class: "button-wrapper" }, h("tet-tooltip", { key: '95f0c3477504f002d2f7a38786d07503dda797b4', class: "tooltip", doNotShowOnHover: true, ref: (el) => { this.tooltip = el; } }, t('components-referral-tooltip')), h("tet-button", { key: 'fda4c97919efcb0255baddcb46a1b6f0e308a1a3', clickCallback: this.copyToClipBoard, type: "primary" }, t('components-referral-copy-button-label')))))))));
     }
     static get is() { return "tet-referral"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/advanced/dialog/tet-multi-step-dialog/tet-multi-step-dialog.js

@@ -90,7 +90,7 @@ export class TetMultiStepDialog {
         return (h("div", { innerHTML: step, "data-step": Number(index) + 1, class: "multi-step-dialog__step", ref: this.setStepBlocks }));
     }
     render() {
-        return (h(Host, { key: '34db2ec334feee439233fe9bfecad8d3fd74e83a', class: "multi-step-dialog" }, h("tet-dialog", { key: '4fa5b5912bb23c4a7a46c1fff2b25bd764def080', class: this.tetDialogClass, "is-open": this.isOpen, "data-screen-key": this.dialogDataScreenKey, "footer-display": "right", ref: el => this.tetDialog = el }, h("div", { key: 'cedf49be9783508678690fc167dbd69db529dbd4', innerHTML: this.content }), this.steps.map((step, index) => (this.renderStep(step, index))), h("tet-button", { key: 'bda70d18f6ef7b3199ec1305ad6e0fe0d1e5237a', class: "footer-button", slot: "footer", size: "medium", theme: "light", type: "secondary", ref: el => this.prevButton = el }, t('components-go-back')), h("tet-button", { key: '7b56a40b779a0977a04a1afb148502af3a442499', class: "footer-button", slot: "footer", size: "medium", theme: "light", ref: el => this.nextButton = el }, t('components-next-step')))));
+        return (h(Host, { key: '640902053f94d5d9492e88ce1a23cd6292349f12', class: "multi-step-dialog" }, h("tet-dialog", { key: '8a8e77b0fbfcf4878f144b86447effb2b09dd6ae', class: this.tetDialogClass, "is-open": this.isOpen, "data-screen-key": this.dialogDataScreenKey, "footer-display": "right", ref: el => this.tetDialog = el }, h("div", { key: '10fc6f9897457c0ed4eac81c0ca32d408d7cca72', innerHTML: this.content }), this.steps.map((step, index) => (this.renderStep(step, index))), h("tet-button", { key: 'fe4c40ac710f82c54592f41ac33f874e878f0bfc', class: "footer-button", slot: "footer", size: "medium", theme: "light", type: "secondary", ref: el => this.prevButton = el }, t('components-go-back')), h("tet-button", { key: 'b99a2f6784636c0c87eec748119e8b9f8620d669', class: "footer-button", slot: "footer", size: "medium", theme: "light", ref: el => this.nextButton = el }, t('components-next-step')))));
     }
     static get is() { return "tet-multi-step-dialog"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/advanced/forms/tet-availability-contact-form/tet-availability-contact-form.js

@@ -121,7 +121,7 @@ export class TetAvailabilityContactForm {
         return (h("div", null, h("tet-dialog", { ref: (element) => this.dialogElement = element, "footer-display": "hidden", "is-open": this.showAvailabilityContactForm, closeOnEscape: true, closeOnOverlayClick: true }, h("div", { class: "form-container" }, h("tet-icon", { name: "confirm-md", class: "icon icon-success icon-size" }), this.showTitle && h("h2", { class: "form-title" }, t('components-availability-contact-form-success-title')), h("p", { class: "form-subtitle" }, t('components-availability-contact-form-success-subtitle')), h("tet-button", { class: "form-container-close", clickCallback: this.closeDialogElement, size: "medium", type: "primary", theme: "light" }, h("span", null, t('components-availability-contact-form-success-close')))))));
     }
     render() {
-        return (h("div", { key: 'ae420e44d0b579330a3c3e2cf815da17482d085b', class: { 'dark-theme': this.darkTheme } }, this.success ? this.renderSuccessStep() : this.renderForm()));
+        return (h("div", { key: '60cfbd496c749055c32bdcf39d9e0cb8689ac5ff', class: { 'dark-theme': this.darkTheme } }, this.success ? this.renderSuccessStep() : this.renderForm()));
     }
     static get is() { return "tet-availability-contact-form"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/advanced/forms/tet-contact-form/tet-contact-form.js

@@ -64,7 +64,7 @@ export class TetContactForm {
         processTranslations('tet-components', this.language).then(() => forceUpdate(this));
     }
     render() {
-        return (h("div", { key: '0f6aa2d7c33c6326da1eb9ad4be3cf10046d302f', class: { 'dark-theme': this.darkTheme } }, h("tet-container", { key: '7bcaaf3775277f2cf9a26dbaf58ef99ad46a25a2', class: "container" }, this.showLoader && this.renderLoader(), h("div", { key: '2ce317f0bd317eb8495767906c5c21ac4950bba0', class: "form-container" }, this.showTitle && h("h2", { key: 'f0864e23ea8ab2136e91c67b938953a08ded12b8', class: "form-title" }, t('components-contact-form-title')), h("p", { key: 'd1dff397e9069528487e64ce336d6af3285e37f6', class: "form-subtitle" }, t(this.subtitle)), h("tet-input", { key: '853cffe48d733fd28cfbf1beb855c3b6c17ce499', class: "form-input", placeholder: "+37122345678", ref: (element) => this.phoneInput = element, validators: this.validators, label: this.showInputLabel ? t('components-contact-form-input-label') : null, theme: this.darkTheme ? 'dark' : 'classic' }), h("tet-button", Object.assign({ key: '6cab331bcbb61d7332a0d5634d93fae4ef775f0a', class: "form-submit", type: "primary", clickCallback: this.createManualTask, innerHTML: t('components-contact-form-submit') }, this.submitButtonProps))))));
+        return (h("div", { key: '3d2dda6cb26747ac4aa6202071ed3427ed80a564', class: { 'dark-theme': this.darkTheme } }, h("tet-container", { key: '22fe1d2a3b0a46e59a1c3c078b374914b511cb92', class: "container" }, this.showLoader && this.renderLoader(), h("div", { key: '2940476abc3acd28e260dddc5acfc9106e1e4254', class: "form-container" }, this.showTitle && h("h2", { key: '5e9c6da97bf6ab46fb361f18bdf94c06b12cb0ee', class: "form-title" }, t('components-contact-form-title')), h("p", { key: 'eaf49bc8a79ec05cbfe3c3f4bbb8858c800288b0', class: "form-subtitle" }, t(this.subtitle)), h("tet-input", { key: 'a7b9af9d58fed3d5f3c5ebea702f21494be68529', class: "form-input", placeholder: "+37122345678", ref: (element) => this.phoneInput = element, validators: this.validators, label: this.showInputLabel ? t('components-contact-form-input-label') : null, theme: this.darkTheme ? 'dark' : 'classic' }), h("tet-button", Object.assign({ key: 'cebbb505333ae5d9489e1ec5d538f2d8f5722f10', class: "form-submit", type: "primary", clickCallback: this.createManualTask, innerHTML: t('components-contact-form-submit') }, this.submitButtonProps))))));
     }
     static get is() { return "tet-contact-form"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/advanced/promotions/tv-gift/tet-tv-gift-block/tet-tv-gift-block.js

@@ -32,7 +32,7 @@ export class TetTvGiftBlock {
         this.setContainerSize();
     }
     render() {
-        return (h(Host, { key: '8c79d071bc98c82f48762d154fef7448950a7e32' }, h("div", { key: '67758e35a06cd4c128af15d923e99570a2375979', class: { 'tv-gift': true, [`tv-gift--${this.containerSize}`]: true } }, h("div", { key: '370962e4b7a9f1822b270d537a34f736b6049c96', class: "tv-gift__header" }, h("slot", { key: 'e3594ba4db75a9c0805aecccf621a22789a9e0a8', name: "header" }, this.headerImageSrc && h("img", { key: '83910cd0059bca5ae36118716c2d19382d6e5b13', class: "tv-gift__header__image", src: this.headerImageSrc }), h("div", { key: '463fdccc8245217d5405d37a9f73104f6cafa8bf', class: "tv-gift__header-text" }, this.headerTitle))), h("div", { key: '80f9cb37b012591d204175a54c8d187322d0e6d1', class: "tv-gift__content" }, h("slot", { key: 'a3e0d55166e9075490abba52391297d88734e223' })), h("div", { key: '44d02285e3993535e988b362ad5e9569a6651c09', class: "tv-gift__footer" }, h("slot", { key: '23755d1972103cade53bfce4225b496eb703f1ed', name: "footer" }, h("span", { key: '5242ae5997d9d71bd7666d7a11871454a42ac275', class: "tv-gift__footer__title" }, this.footerTitle), h("span", { key: 'c1ee7e119c33267b2acdae4f8a5f5ef001bccfbe', class: "tv-gift__footer__text" }, this.footerText))))));
+        return (h(Host, { key: 'c3d9c5c4d84ae21aad281f62e44967a15908dda2' }, h("div", { key: 'c75702b70f946353f1b14d812faa7a298470f673', class: { 'tv-gift': true, [`tv-gift--${this.containerSize}`]: true } }, h("div", { key: '780644088806143e4d2a0b5c3ff8c5b2bb7927e3', class: "tv-gift__header" }, h("slot", { key: 'ae171c13bcfda8e66717f7da9326194f3a03e148', name: "header" }, this.headerImageSrc && h("img", { key: '9c62fc8a33ce89fd1e9934d40e12b2a496ae5ba7', class: "tv-gift__header__image", src: this.headerImageSrc }), h("div", { key: 'f57bbf8d79a0ce91312e4d7cdd5b60919fa8d82e', class: "tv-gift__header-text" }, this.headerTitle))), h("div", { key: 'c7c5ee8ea34ffdc616dfff8bdece4baaac226d44', class: "tv-gift__content" }, h("slot", { key: '10cea1d4da00b7ecf5fcb19f6661c45a1cfd14c4' })), h("div", { key: '0603c81476501a743c1ed795c6ab3e82ea9ce344', class: "tv-gift__footer" }, h("slot", { key: '9096d5572503d01c4aaef88e74c9326e60d0f77b', name: "footer" }, h("span", { key: '593d9de6f85bcc95204b6e4a37a7ac02e06247ac', class: "tv-gift__footer__title" }, this.footerTitle), h("span", { key: '474f22c096c2968233096b4c1c0901527df76288', class: "tv-gift__footer__text" }, this.footerText))))));
     }
     static get is() { return "tet-tv-gift-block"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/advanced/promotions/tv-gift/tet-tv-gift-list/tet-tv-gift-list.js

@@ -34,11 +34,11 @@ export class TetTvGiftList {
         this.setContainerSize();
     }
     render() {
-        return (h(Host, { key: '7d7bdc15378e32ec3fd78b404d54342fcd5ce6c9' }, h("div", { key: '08861eca7c38fcd24aa3231af7479b8e0495d87a', class: {
+        return (h(Host, { key: '2af4ff7ec0b8e5d7ab38b1b4de49f1f4d8144509' }, h("div", { key: '495b97db31acbe7162ae739f18123f94a1aa0d6f', class: {
                 'tv-gift-list': true,
                 [`tv-gift-list--${this.containerSize}`]: true,
                 'tv-gift-list--image-list': Boolean(this.imageSource),
-            } }, this.imageSource && (h("div", { key: '0b177a68323039c0a4c79fa73473a05a5b40329a', class: "tv-gift-list__image__wrapper" }, h("img", { key: '8cf3cc6d5c1ee264ddb83a225fc218bd27e59f67', class: "tv-gift-list__image", src: this.imageSource }))), h("div", { key: 'c3bda23b93abbbd81ff90dedc5125066e1acb091', class: "tv-gift-list__list__wrapper" }, h("span", { key: '47a6223e9335e0d173ada3653b62785d5c06088f', class: "tv-gift-list__list__header" }, this.header), h("ul", { key: 'a3951d147c88567ea4219e0131ed388b701c9b33', class: "tv-gift-list__list" }, this.list.map(item => (h("li", { class: "tv-gift-list__list__item" }, h("tet-icon", { name: this.listBulletIcon }), item))))))));
+            } }, this.imageSource && (h("div", { key: '09b22c5ec4ed6ddf96bd8b8d2f08285e7708f2e0', class: "tv-gift-list__image__wrapper" }, h("img", { key: 'ad0fd1629b3006d3ccf02f14e3e6358d4d576cba', class: "tv-gift-list__image", src: this.imageSource }))), h("div", { key: '4302290d8a189fe14b5100f61a594b87786ac661', class: "tv-gift-list__list__wrapper" }, h("span", { key: '1ec7d3e276c43668c9138071b78d334a4e0c7bda', class: "tv-gift-list__list__header" }, this.header), h("ul", { key: '7070d414787f61532515118d95c933b18d8419c1', class: "tv-gift-list__list" }, this.list.map(item => (h("li", { class: "tv-gift-list__list__item" }, h("tet-icon", { name: this.listBulletIcon }), item))))))));
     }
     static get is() { return "tet-tv-gift-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basic/buttons/tet-button/test/tet-button.spec.js

@@ -2,6 +2,7 @@ import { newSpecPage } from "@stencil/core/testing";
 import { TetButton } from "../tet-button";
 const expectedClassesLarge = ['button', 'button-large', 'button-classic-theme', 'button--type-primary'];
 const expectedClassesSmall = ['button', 'button-small', 'button-classic-theme', 'button--type-primary'];
+const expectedClassesWithIcon = ['button', 'button-large', 'button-classic-theme', 'button--type-primary', 'icon-mode', 'with-icon'];
 describe('tet-button', () => {
     it('renders', async () => {
         const page = await newSpecPage({
@@ -78,4 +79,19 @@ describe('tet-button', () => {
       </tet-button>
     `);
     });
+    it('renders with icon', async () => {
+        const page = await newSpecPage({
+            components: [TetButton],
+            html: `<tet-button icon-name="arrow-right"></tet-button>`
+        });
+        expect(page.root).toEqualHtml(`
+      <tet-button icon-name="arrow-right">
+        <mock:shadow-root>
+          <button class="${expectedClassesWithIcon.join(' ')}" part="button">
+            <tet-icon name="arrow-right"></tet-icon>
+          </button>
+        </mock:shadow-root>
+      </tet-button>
+    `);
+    });
 });