@tet/tet-components 1.3.112-testing → 1.3.113-staging

package/dist/collection/components/basic/buttons/tet-tabs/tet-tab-content/tet-tab-content.js

@@ -157,11 +157,11 @@ export class TetTabContent {
         this.selectedId = id;
     }
     render() {
-        return (h(Host, { key: 'faa568985def862d86ac1a6da06348918b248197' }, h("div", { key: '4cf2ed34e03a4010ef6fc3a8e6983308fe1db993', class: {
+        return (h(Host, { key: '0d7e34fa68230b416e05573b6dffdb29beda6145' }, h("div", { key: '25d0204966c42a3229569b68ac1d117275ded002', class: {
                 'tet-tab-content': true,
                 'use-visibility': this.useVisibility,
                 [this.theme]: true
-            } }, h("slot", { key: 'c08c36283347f383a406074b221d7a225badd590' }))));
+            } }, h("slot", { key: 'e59646b6425fa78dd649f39910e50849bcc39594' }))));
     }
     static get is() { return "tet-tab-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basic/buttons/tet-tabs/tet-tab-header/tet-tab-header.js

@@ -468,7 +468,7 @@ export class TetTabHeader {
         return {};
     }
     render() {
-        return (h(Host, { key: '0c1867218c00b00871d792a888e94b6e966c157c', "data-id-suffix": this.idSuffix }, h("div", { key: '134dbe32a4d5f5d2cc59f55cdec5200c7147bbdf', class: {
+        return (h(Host, { key: '0f4ba9430ef4d0ebf78f6bda500dec97305b6e0e', "data-id-suffix": this.idSuffix }, h("div", { key: 'd736ad3bd1735ecd8e9546bd8a9e685be8ba20c4', class: {
                 'tabs': true,
                 'tabs--segmented': this.segmented,
                 'dark': this.darkMode,
@@ -476,7 +476,7 @@ export class TetTabHeader {
                 [this.theme]: true,
                 [this.sizing]: true,
                 [this.type]: !!this.type
-            }, onMouseDown: this.onContainerMouseDown, style: this.getStyle(), ref: (ref) => (this.tabElement = ref), role: "tablist" }, h("slot", { key: '153b82f0398068ef6adf2321f98cfd0b605b4944', ref: (slot) => (this.tabContainer = slot) })), h("div", { key: '6423830f5b5e63236c6f84af85dba1565b617884', class: { 'tabs-line': !this.segmented, 'no-underline': this.hideHeaderUnderline } })));
+            }, onMouseDown: this.onContainerMouseDown, style: this.getStyle(), ref: (ref) => (this.tabElement = ref), role: "tablist" }, h("slot", { key: '878b5d64e8de05ae8b6d98093a9ed0eaa95859ac', ref: (slot) => (this.tabContainer = slot) })), h("div", { key: '74f70b87c2f4283d6cba19e46647656150fd8295', class: { 'tabs-line': !this.segmented, 'no-underline': this.hideHeaderUnderline } })));
     }
     static get is() { return "tet-tab-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basic/buttons/tet-tag/tet-tag.js

@@ -20,12 +20,12 @@ export class TetTag {
         processTranslations('tet-components', this.language).then(() => forceUpdate(this));
     }
     render() {
-        return (h(Host, { key: 'cf0f36ac5f23bd7d2f01b9dcfea807db47a46219' }, h("button", { key: '9e0e8ca9a934c8ef37ded4a7ce7fe9cca7eeb342', class: {
+        return (h(Host, { key: '19ae917ebe3dc94372dd98e4939ce4e1c81891d8' }, h("button", { key: '67dd55847f85777bf00f2599c5b78d146dc0f7d7', class: {
                 tag: true,
                 'tag-active': this.active,
                 'tag--icon': this.showIcon,
                 [`theme-${this.theme}`]: true,
-            }, "aria-pressed": this.active.toString(), disabled: this.disabled }, this.tagTitle && h("p", { key: '1ed39713ae948576326c306eb80e08e5ea7c1ad9', class: "tag-title" }, t(this.tagTitle)), this.count !== null && this.count !== undefined && h("span", { key: 'b81819a3c030ddd0b4450a7b9f2e0aa30daf0270', class: "tag-count" }, this.count), this.showIcon && h("tet-icon", { key: 'd271c7f5040129da82aa6ad5120a6ad8adbb7645', class: "tag-icon", name: "close-circle", part: "icon-selected" }))));
+            }, "aria-pressed": this.active.toString(), disabled: this.disabled }, this.tagTitle && h("p", { key: 'a07eef94c1f4633aaeab0e35c814430b318e4b51', class: "tag-title" }, t(this.tagTitle)), this.count !== null && this.count !== undefined && h("span", { key: 'bd10bf881a3cee28a0864da7ed87ffcc4c4f97f8', class: "tag-count" }, this.count), this.showIcon && h("tet-icon", { key: '2af01f0b0a226e9421e9aaf4efaa8dcdb12aaf60', class: "tag-icon", name: "close-circle", part: "icon-selected" }))));
     }
     static get is() { return "tet-tag"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basic/carousel/tet-carousel/tet-carousel.css

@@ -365,6 +365,8 @@
   --carousel-dot-border: 1px solid var(--tc-grey-70);
   --carousel-dot-padding-top: 1.875rem;
   --carousel-dot-active-background: var(--tc-layer-inverse-primary);
+  --carousel-dot-hover-background: var(--tc-button-secondary-outline-background-hover);
+  --carousel-dot-active-hover-background: var(--tc-grey-80);
   --carousel-button-hover-background: var(--tc-button-secondary-background-hover);
   --carousel-dots-gap: 0.5rem;
   --carousel-buttons-gap: 1rem;
@@ -393,6 +395,8 @@
   --carousel-button-border: 2px solid var(--tc-button-border-secondary-dark);
   --carousel-button-border-disabled: 2px solid var(--tc-button-border-disabled-dark);
   --carousel-gradient: var(--carousel-gradient-dark);
+  --carousel-dot-hover-background: var(--tc-button-secondary-outline-background-hover-dark);
+  --carousel-dot-active-hover-background: var(--tc-grey-80-dark);
 }
 .tet-carousel__container {
   width: var(--carousel-item-width);
@@ -488,12 +492,15 @@
   z-index: 2;
 }
 .tet-carousel__dot:hover {
-  background: var(--tc-button-secondary-background-hover);
+  background: var(--carousel-dot-hover-background);
 }
 .tet-carousel__dot.active {
   background: var(--carousel-dot-active-background);
   border: none;
 }
+.tet-carousel__dot.active:hover {
+  background: var(--carousel-dot-active-hover-background);
+}
 .tet-carousel__gradient-left, .tet-carousel__gradient-right {
   position: absolute;
   top: 0;

package/dist/collection/components/basic/carousel/tet-carousel/tet-carousel.js

@@ -201,11 +201,19 @@ export class TetCarousel {
         this.totalItems = assigned.length;
         this.screenCount = Math.ceil(totalWidth / screenWidth);
     }
+    disableTabIndex() {
+        const buttonComponents = this.container.querySelectorAll('tet-button');
+        buttonComponents.forEach((btnComponent) => {
+            const btn = btnComponent.shadowRoot.querySelector('button');
+            btn.setAttribute('tabIndex', '-1');
+        });
+    }
     componentDidLoad() {
         this.getScreenCount();
         window.addEventListener('resize', this.getScreenCount.bind(this));
         this.addAnchorFocusListeners();
         this.checkGradient();
+        this.disableTabIndex();
     }
     addAnchorFocusListeners() {
         if (!this.trackElement)
@@ -255,10 +263,10 @@ export class TetCarousel {
         window.removeEventListener('resize', this.getScreenCount.bind(this));
     }
     render() {
-        return (h(Host, { key: '1992c5c4f008cc036595fad0da93c02dbad67e30' }, h("div", { key: '7cfae6e2c609724804030e0977aecf191a116d6f', class: { 'tet-carousel': true, [`${this.theme}`]: true }, ref: (el) => (this.container = el), part: "carousel" }, h("div", { key: '396e38a4e13e3f1de598a701a87b68a98965af52', class: "tet-carousel__container" }, h("div", { key: '848d2e76b8c634c2938bec3261e3be01714fc40a', class: "tet-carousel__gradient-left", ref: (el) => { this.leftGradientRef = el; } }), h("div", { key: '13460bc25b0fd63fef8d4e587b7df9a2572c2d1f', class: "tet-carousel__gradient-right", ref: (el) => { this.rightGradientRef = el; } }), h("div", { key: 'efb4dc13d9a33bd727d93b50e08eaa1acf6238f5', class: "tet-carousel__track", ref: (el) => (this.trackElement = el), style: {
+        return (h(Host, { key: '5992f1f40379e5324c9db3454ffb9d6664d2acaf' }, h("div", { key: 'a6abf4aadb39f6a65de46d740925f5824f256def', class: { 'tet-carousel': true, [`${this.theme}`]: true }, ref: (el) => (this.container = el), part: "carousel" }, h("div", { key: 'abfd06f3c4e8428551c2865814e008803bd588f3', class: "tet-carousel__container" }, h("div", { key: '00a9b8d59d49b7105b52cad50c1d7c37444e8e65', class: "tet-carousel__gradient-left", ref: (el) => { this.leftGradientRef = el; } }), h("div", { key: '238281755c985345ef7733621b39cd4807a276f7', class: "tet-carousel__gradient-right", ref: (el) => { this.rightGradientRef = el; } }), h("div", { key: '9351c5b0da6e5dc93d92f055826b0344b85da996', class: "tet-carousel__track", ref: (el) => (this.trackElement = el), style: {
                 transform: `translateX(${this.dragOffset}px)`,
                 transition: this.isDragging ? 'none' : `transform ${this.transitionDuration}ms ${this.transitionTiming}`
-            }, onPointerDown: this.onPointerDown, onMouseMove: this.onPointerMove, onPointerUp: this.onPointerUp, onMouseLeave: this.onPointerUp }, h("slot", { key: '1bb515ce352ec598d89f333b8c7e85b26b3a108f' }))), h("div", { key: '40502b425463ad88237e99dd1709c25f42aa99b2', class: "tet-carousel__controls" }, this.showButtons && (h("div", { key: '59933ea62f8d8b2ab76860f2d88528967b203f6e', class: "tet-carousel__buttons tet-carousel__buttons--mobile" }, h("tet-button", { key: 'a4aba43e79acc09a7f8c08e3cf2088d92379e28e', class: "tet-carousel__btn", theme: this.theme === 'light' ? 'dark' : 'light', "icon-name": this.buttonIconLeft, "icon-mode": true, onClick: this.handlePrev, "aria-label": "Previous", disabled: this.screenCount <= 1 || this.activeIndex === 0 }))), this.showDots && (h("div", { key: 'bc494e662afd33470965abfde3d68b974b353e88', class: "tet-carousel__dots" }, Array.from({ length: this.screenCount }).map((_, idx) => (h("span", { class: `tet-carousel__dot${idx === this.activeIndex ? ' active' : ''}`, key: idx, onClick: () => this.handleDotClick(idx) }))))), this.showButtons && (h("div", { key: 'b32af9cba60876b51267016eda6917f60e647bf4', class: "tet-carousel__buttons " }, h("tet-button", { key: '1a3ded088ae858e8df72a75aba21d508c9058dc7', class: "tet-carousel__buttons--desktop tet-carousel__btn ", theme: this.theme === 'light' ? 'dark' : 'light', "icon-name": this.buttonIconLeft, "icon-mode": true, onClick: this.handlePrev, "aria-label": "Previous", disabled: this.screenCount <= 1 || this.activeIndex === 0 }), h("tet-button", { key: '81fb23f96d0f70f663b1771ef8f080c75b19b17c', class: "tet-carousel__btn", theme: this.theme === 'light' ? 'dark' : 'light', "icon-name": this.buttonIconRight, "icon-mode": true, onClick: this.handleNext, "aria-label": "Next", disabled: this.screenCount <= 1 || this.activeIndex === this.screenCount - 1 })))))));
+            }, onPointerDown: this.onPointerDown, onMouseMove: this.onPointerMove, onPointerUp: this.onPointerUp, onMouseLeave: this.onPointerUp }, h("slot", { key: 'f410268e9234ffe63d5c26568da7c07fe8126847' }))), h("div", { key: 'afc0d8a7dc118c855404b5e691f48b3bfe008c24', class: "tet-carousel__controls" }, this.showButtons && (h("div", { key: '70a6583e47543b1915d71cb44940211c17c1e99f', class: "tet-carousel__buttons tet-carousel__buttons--mobile" }, h("tet-button", { key: '28c31103f4fa7c062b1d7fa5e3e93320420e7760', class: "tet-carousel__btn", theme: this.theme === 'light' ? 'dark' : 'light', "icon-name": this.buttonIconLeft, "icon-mode": true, onClick: this.handlePrev, "aria-label": "Previous", disabled: this.screenCount <= 1 || this.activeIndex === 0 }))), this.showDots && (h("div", { key: 'c0578a8db9faacef7770c3ee6a78ef6f5344f9c6', class: "tet-carousel__dots" }, Array.from({ length: this.screenCount }).map((_, idx) => (h("span", { class: `tet-carousel__dot${idx === this.activeIndex ? ' active' : ''}`, key: idx, onClick: () => this.handleDotClick(idx) }))))), this.showButtons && (h("div", { key: '317982c0a2f35fd46f98c47c66641bb416ac4ab4', class: "tet-carousel__buttons " }, h("tet-button", { key: 'd7b06315e10b17295b25ea188d2d1a4817cb9aa7', class: "tet-carousel__buttons--desktop tet-carousel__btn ", theme: this.theme === 'light' ? 'dark' : 'light', "icon-name": this.buttonIconLeft, "icon-mode": true, onClick: this.handlePrev, "aria-label": "Previous", disabled: this.screenCount <= 1 || this.activeIndex === 0 }), h("tet-button", { key: '17110d87b3b6855ac9f78f68fd6345d2ad7122df', class: "tet-carousel__btn", theme: this.theme === 'light' ? 'dark' : 'light', "icon-name": this.buttonIconRight, "icon-mode": true, onClick: this.handleNext, "aria-label": "Next", disabled: this.screenCount <= 1 || this.activeIndex === this.screenCount - 1 })))))));
     }
     static get is() { return "tet-carousel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basic/icon/tet-icon.js

@@ -49,7 +49,7 @@ export class TetIcon {
         });
     }
     render() {
-        return (h("span", { key: '4d57de98c7773172e2c39352f63a9a505fb21355', class: "icon-wrapper", tabindex: (this.focusable || this.accessibilityLabel) ? 0 : -1 }, h("span", Object.assign({ key: '9b6c08a8f50aa2d20e837ccbb201e869cda115e5', class: {
+        return (h("span", { key: '54ab31ceb8597ebb94fd12ca44d3c67ba2b45848', class: "icon-wrapper", tabindex: (this.focusable || this.accessibilityLabel) ? 0 : -1 }, h("span", Object.assign({ key: 'cc82f58ce74ee97ee633c9b8720770b155b8ba1f', class: {
                 'icon-container': true,
                 'default-color': this.shouldUseDefaultColor(),
                 [this.theme]: true,

package/dist/collection/components/basic/loaders/tet-loader/tet-loader.js

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class TetLoader {
     render() {
-        return (h("div", { key: '545cffb82104e93777d254077bbdc77a4854ec7c', class: "loader" }, h("div", { key: 'b69aacd15830c3c104cb91847e79b61623e0dfe2', class: "loader-inner" })));
+        return (h("div", { key: 'cece39cbe52a09491a05c4a03d4ab0a6c9bc1c86', class: "loader" }, h("div", { key: '16f3ea48c7e285a3f442518e6aaa3ade71ec6295', class: "loader-inner" })));
     }
     static get is() { return "tet-loader"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basic/loaders/tet-placeholder/tet-placeholder.js

@@ -9,7 +9,7 @@ export class TetPlaceholder {
         this.darkTheme = false;
     }
     render() {
-        return (h(Host, { key: 'f74f8bf770afc9bd569e3bf1a491f085382ff0fd', style: { width: this.width, height: this.height } }, h("div", { key: '71f817ae9d7de92afecbf4893ae4eeb516a05c67', class: { 'dark-theme': this.darkTheme } }, h("div", { key: '97e3da00030658b854ac340b66d37f8392d3c878', class: "placeholder", style: { height: this.height } }))));
+        return (h(Host, { key: '86e6769bb28dceb43e9d9caabe82bdc39887ca32', style: { width: this.width, height: this.height } }, h("div", { key: '97ec2be704ea1dcd71f71c579ac156bed8d85c9a', class: { 'dark-theme': this.darkTheme } }, h("div", { key: '76fd406b3075f8b119e234af334319c170edfc99', class: "placeholder", style: { height: this.height } }))));
     }
     static get is() { return "tet-placeholder"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basic/loaders/tet-spinner/tet-spinner.js

@@ -47,13 +47,13 @@ export class TetSpinner {
         this.setForeignObjectAttributes();
     }
     render() {
-        return (h("div", { key: '2d1d5964789088737f46a0517c2259197d3e8dae', ref: element => (this.spinner = element), class: {
+        return (h("div", { key: '450656cec6ec508c2c9beccb0da3a3921b349f0d', ref: element => (this.spinner = element), class: {
                 spinner: true,
                 [`${this.theme}-theme`]: true,
                 [`size--${this.size}`]: true,
                 [`spinner--${this.type}`]: true,
-            } }, h("svg", { key: '3b9d5780f735ce830a76ec14a5d9ff0406ef4ae7', viewBox: "0 0 40 40" }, h("clipPath", { key: '92043e1bffed70280d5abad3b571dcfcc94bc3d0', id: "clip" }, h("path", { key: '8a5ed3d3311cc28954a82042d02c7c800536a875', d: `M40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0C31.0457
-              0 40 8.9543 40 20ZM6 20C6 27.732 12.268 34 20 34C27.732 34 34 27.732 34 20C34 12.268 27.732 6 20 6C12.268 6 6 12.268 6 20Z` })), h("foreignObject", { key: '66b88e6b2c1947fa456a2f9832299ca1c8865b26' }, h("div", { key: '75ec98089dfad066d7f7c086251f5adf6c7bba20', class: "spinner__gradient" })))));
+            } }, h("svg", { key: '20651ca2883a0872d6f86c49fcbd987bb593a2cd', viewBox: "0 0 40 40" }, h("clipPath", { key: 'b9f9e0a02288d2695445b0173fee6cb0156b63bd', id: "clip" }, h("path", { key: 'f353f534cf1763204288d4379d69ba45a64c0bff', d: `M40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0C31.0457
+              0 40 8.9543 40 20ZM6 20C6 27.732 12.268 34 20 34C27.732 34 34 27.732 34 20C34 12.268 27.732 6 20 6C12.268 6 6 12.268 6 20Z` })), h("foreignObject", { key: '0c780518e75eddecb646fc2e9aa2b45435e6b27f' }, h("div", { key: '5bcb7475f58fdb3dd35630b18900b96ece3f4c59', class: "spinner__gradient" })))));
     }
     static get is() { return "tet-spinner"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basic/misc/tet-label/tet-label.js

@@ -13,12 +13,12 @@ export class TetLabel {
         this.showIcon = false;
     }
     render() {
-        return (h(Host, { key: 'ecf5c98dd7d2bbdbf6a736d1c3e6af70b90078ea' }, h("div", { key: 'd7d7efc1eb4d414a277217084395ff45f150297e', class: {
+        return (h(Host, { key: '5d6ec80f859b10c9214b3f5886105d79417a0c44' }, h("div", { key: '7510c3ba9e0c73b7f2dd683ffd302851a8fedfdf', class: {
                 label: true,
                 'label-active': this.active,
                 [`label-type-${this.type}`]: true,
                 [`theme-${this.theme}`]: true,
-            } }, this.labelTitle && h("p", { key: 'fffb5c1b7034cd127ec61e6ff7ccbb12c67f8996', class: "label-title" }, this.translateTitle ? t(this.labelTitle) : this.labelTitle), this.showIcon && h("tet-icon", { key: 'ce8014381ea8531894450412433c2b2813669ed9', class: "label-icon", name: "close-circle", part: "icon-selected" }))));
+            } }, this.labelTitle && h("p", { key: 'd62ce803dcb857fadcb3017dac24c1c703992e1f', class: "label-title" }, this.translateTitle ? t(this.labelTitle) : this.labelTitle), this.showIcon && h("tet-icon", { key: '102bf8d06d2a16d0cec220202525d9deaf8b8783', class: "label-icon", name: "close-circle", part: "icon-selected" }))));
     }
     static get is() { return "tet-label"; }
     static get encapsulation() { return "shadow"; }

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

@@ -51,9 +51,9 @@ export class TetDatepickerHeader {
         this.internalDateChanged.emit(newDate);
     }
     render() {
-        return (h("div", { key: '030096b424bf720ad219c04933eb90e5fa41c063', class: "header" }, this.datepickerView !== 'year'
+        return (h("div", { key: '86cb5b9f34693dee21896be7bce2eb39bfc5d94d', class: "header" }, this.datepickerView !== 'year'
             ? (h("div", { class: "icon-container", onClick: () => this.subtractDates() }, h("tet-icon", { class: "arrow-left", name: "arrow-left" })))
-            : h("div", null), h("div", { key: '24e5493386380363dcef39cb82e49b85c9748b8d', class: "control-button", onClick: () => this.changeDatepickerView() }, this.getControlButtonDate(), h("tet-icon", { key: '188cdf2c64c7427a6f3ed3fbc38a7e8cfd754dec', class: "chevron-down", name: this.datepickerView === 'month' ? 'chevron-down' : 'chevron-up' })), this.datepickerView !== 'year'
+            : h("div", null), h("div", { key: '656872dc4d6e2f98cebc8a9d769fe586c1c76889', class: "control-button", onClick: () => this.changeDatepickerView() }, this.getControlButtonDate(), h("tet-icon", { key: 'ec06999bf5552fca7fe31114725385f61e68c9c8', class: "chevron-down", name: this.datepickerView === 'month' ? 'chevron-down' : 'chevron-up' })), this.datepickerView !== 'year'
             ? (h("div", { class: "icon-container", onClick: () => this.addDates() }, h("tet-icon", { class: "arrow-left", name: "arrow-right" })))
             : h("div", null)));
     }

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

@@ -156,7 +156,7 @@ export class TetDatepickerMonthView {
         return date.toDateString() === this.currentDate.toDateString();
     }
     render() {
-        return (h(Host, { key: '6d5b9f46433b5e566980dfb33922710f02116d86' }, h("div", { key: '636c39effd6241dcb7dabf14ef3e5e74bd5ba24f', class: "weekday-header" }, this.days.map((day) => h("div", { class: "day" }, day))), h("div", { key: 'eb32ebeb539e365fcbadce3ff601c41a45cee56b', class: "month-dates" }, this.previousMonthPreviewDates.map((date) => h("div", { class: "date-container" }, h("div", { class: "preview-date" }, date.getDate()))), this.monthDates.map(date => h("div", { class: this.getDateContainerClasses(date), onPointerEnter: (event) => this.setInRangeHover(date, event), onPointerLeave: (event) => this.removeInRangeHover(event) }, h("div", { class: this.getDateClasses(date), onClick: () => this.handleDateSelection(date) }, date.getDate()))), this.nextMonthPreviewDates.map((date) => h("div", { class: "date-container" }, h("div", { class: "preview-date" }, date))))));
+        return (h(Host, { key: '667d746ab6da2c4e87a91c0110e617879f890966' }, h("div", { key: 'acfcbf65b3b82d8d528bcfe722e08c4ac2dc1336', class: "weekday-header" }, this.days.map((day) => h("div", { class: "day" }, day))), h("div", { key: 'a1e6dbcb44ea9e45be186aeb195ab9f5f4f55f6a', class: "month-dates" }, this.previousMonthPreviewDates.map((date) => h("div", { class: "date-container" }, h("div", { class: "preview-date" }, date.getDate()))), this.monthDates.map(date => h("div", { class: this.getDateContainerClasses(date), onPointerEnter: (event) => this.setInRangeHover(date, event), onPointerLeave: (event) => this.removeInRangeHover(event) }, h("div", { class: this.getDateClasses(date), onClick: () => this.handleDateSelection(date) }, date.getDate()))), this.nextMonthPreviewDates.map((date) => h("div", { class: "date-container" }, h("div", { class: "preview-date" }, date))))));
     }
     static get is() { return "tet-datepicker-month-view"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/inputs/tet-datepicker/partials/tet-datepicker-multi-year-view/tet-datepicker-multi-year-view.js

@@ -29,7 +29,7 @@ export class TetDatepickerMultiYearView {
         this.years = this.getYears(this.internalDate);
     }
     render() {
-        return (h("div", { key: '3f4f42e871ea738758d8836a343ab8d8d6b4137e', class: "container" }, this.years.map((year) => h("div", { class: this.getYearClasses(year), onClick: () => this.handleYearSelection(year) }, year))));
+        return (h("div", { key: 'c8ab8db87f5e9708834bb160bea013f358857bec', class: "container" }, this.years.map((year) => h("div", { class: this.getYearClasses(year), onClick: () => this.handleYearSelection(year) }, year))));
     }
     static get is() { return "tet-datepicker-multi-year-view"; }
     static get encapsulation() { return "shadow"; }

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

@@ -34,7 +34,7 @@ export class TetDatepickerYearView {
         return this.todayDate.getMonth() === monthIndex;
     }
     render() {
-        return (h("div", { key: '0f6976bbb1f308b579800d912e75248edea09e56', class: "container" }, this.months.map((month, index) => h("div", { class: "month-container" }, h("div", { class: this.getMonthClasses(index), onClick: () => this.handleMonthSelection(index) }, month)))));
+        return (h("div", { key: '2797184eea05b6883775d10862f88a1840a6a84a', class: "container" }, this.months.map((month, index) => h("div", { class: "month-container" }, h("div", { class: this.getMonthClasses(index), onClick: () => this.handleMonthSelection(index) }, month)))));
     }
     static get is() { return "tet-datepicker-year-view"; }
     static get encapsulation() { return "shadow"; }

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

@@ -94,10 +94,10 @@ export class TetDatepicker {
         this.rangeDatesChanged.emit(newDates);
     }
     render() {
-        return (h("div", { key: '55e25f8eeebad8485df47a5b7340bdac801b4d61', class: this.getOverlayClasses(), onClick: this.handleDatepickerClose }, h("div", { key: 'ba895e5a04a7ff7bd4751686febb5a9635f1fce7', class: "container", ref: (el) => this.datepickerContainer = el }, h("tet-datepicker-header", { key: '9d6895a91e3d70aa09c073f3a90314a87c67b1de', selectedDate: this.date, internalDate: this.internalDate, locale: this.locale, datepickerView: this.datepickerView }), this.datepickerView === 'month' &&
-            h("tet-datepicker-month-view", { key: '0efbd6b9d6e10f04d888b6ebed483cec92f20c67', selectedDate: this.date, internalDate: this.internalDate, rangePickerMode: this.rangePickerMode, rangeDates: this.rangeDates }), this.datepickerView === 'multi-year' &&
-            h("tet-datepicker-multi-year-view", { key: '3fb3b8a94dfebaef8ccbaee3e4bb093de476d502', selectedDate: this.date, internalDate: this.internalDate }), this.datepickerView === 'year' &&
-            h("tet-datepicker-year-view", { key: '4e815481a7d652d0d8d6e10e89c6c9daf9d6cf04', selectedDate: this.date, internalDate: this.internalDate }))));
+        return (h("div", { key: '04916684077380e3f2b49588af8f3575a0423a46', class: this.getOverlayClasses(), onClick: this.handleDatepickerClose }, h("div", { key: '35529b2086fa52cdd4eca6069281029596d44173', class: "container", ref: (el) => this.datepickerContainer = el }, h("tet-datepicker-header", { key: '379645f08bf9513cc8369d7aab0188a52023b7ea', selectedDate: this.date, internalDate: this.internalDate, locale: this.locale, datepickerView: this.datepickerView }), this.datepickerView === 'month' &&
+            h("tet-datepicker-month-view", { key: '5411861e00327ebc268e80e2e82e071529bdbeb2', selectedDate: this.date, internalDate: this.internalDate, rangePickerMode: this.rangePickerMode, rangeDates: this.rangeDates }), this.datepickerView === 'multi-year' &&
+            h("tet-datepicker-multi-year-view", { key: 'b66725acd882bca34c0088116182055fcceb4618', selectedDate: this.date, internalDate: this.internalDate }), this.datepickerView === 'year' &&
+            h("tet-datepicker-year-view", { key: '5cb492f727751229b103b17b61556b47700d2788', selectedDate: this.date, internalDate: this.internalDate }))));
     }
     static get is() { return "tet-datepicker"; }
     static get encapsulation() { return "shadow"; }

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

@@ -747,31 +747,31 @@ export class TetRangeSlider {
         this.updateProgress();
     }
     render() {
-        return (h(Host, { key: '820fa6d4032fe9bcd9adb7a4932ba554e124074f' }, h("div", { key: '2bd97606408450c094e43d751726f7e9188dc333', class: {
+        return (h(Host, { key: 'c0d00d072cfc1be591a2bf6e0e0a6b844c0d6807' }, h("div", { key: 'd19c1cbdeddf75ed4b8f67ded7d76b594ab525ff', class: {
                 'range-slider': true,
                 [`range-slider--${this.containerSize}`]: true,
                 [`range-slider--${this.type}`]: true,
                 'range-slider--no-controls': !this.withControls,
                 'range-slider--no-input': !this.withInput,
                 [this.theme]: true,
-            } }, h("div", { key: '574b34fc4b79883313428fb97a0fe6102b200975', class: {
+            } }, h("div", { key: 'f8f7d6ce6d84be9b3b3194c5e225b06f10bc71c3', class: {
                 'range-slider__input-container': true,
                 'hidden': !this.withInput,
-            } }, h("tet-input", Object.assign({ key: '3c0eb10ff377130280c2ab6c200a589b4a48d44c', "input-class": "range-slider__input", "input-type": "number", "input-value": this.currentValue, ref: inputEl => (this.inputRef = inputEl), theme: this.theme, onInput: this.onInputChange, onKeyDown: (event) => this.onInputKeyDown(event, true), accessibilityLabel: this.numberInputAccessibilityLabel }, (this.containerSize !== 'large' ? { inputTabindex: 3 } : {})))), h("div", { key: 'bcdf55e9610cb7e7f6293f900257508ba0709828', class: "range-slider__container" }, h("tet-button", Object.assign({ key: '7864232a26792d483f09fa508f9136cb9fa53641', theme: this.theme, iconMode: true, class: {
+            } }, h("tet-input", Object.assign({ key: '39e75911e058fb9d3d6f5f50c5f53579940c3a20', "input-class": "range-slider__input", "input-type": "number", "input-value": this.currentValue, ref: inputEl => (this.inputRef = inputEl), theme: this.theme, onInput: this.onInputChange, onKeyDown: (event) => this.onInputKeyDown(event, true), accessibilityLabel: this.numberInputAccessibilityLabel }, (this.containerSize !== 'large' ? { inputTabindex: 3 } : {})))), h("div", { key: '881665dec6aadecc5b7c16c75d14bb8e3db3b4c9', class: "range-slider__container" }, h("tet-button", Object.assign({ key: 'c3aea80b8a649226f58b0147e2d675b19d502acb', theme: this.theme, iconMode: true, class: {
                 'range-slider__control': true,
                 'range-slider__control--left': true,
                 'hidden': !this.withControls,
-            }, clickCallback: this.onControlPreviousClick }, (this.reduceButtonAccessibilityLabel ? { accessibilityLabel: this.reduceButtonAccessibilityLabel } : {}), (this.containerSize !== 'large' ? { tabindex: 2 } : {})), h("tet-icon", { key: '2f5450e234cf0c67437e7cf6bf561874b11788a9', name: "remove", class: "range-slider__control--icon" })), h("div", { key: 'e6efbed3118ba5e59623c53042528bd6d68a852a', onTouchStart: this.onContainerTouchStart, onTouchEnd: this.onContainerTouchEnd, onMouseDown: this.onContainerMouseDown, onScroll: this.onContainerScroll, ref: sliderContainerEl => (this.sliderContainerRef = sliderContainerEl), class: "range-slider__slider-container", draggable: false }, h("div", { key: '59698fc6fe3f5222187f1b7306ae4326c9ed4039', class: "range-slider__slider-wrapper" }, h("input", Object.assign({ key: '47239e704e0428fb3ef0373bbe0b5b45f1f586dd', ref: sliderEl => (this.sliderRef = sliderEl), type: "range", min: this.minValue, max: this.maxValue, step: this.step, value: this.defaultValue, list: "steplist", id: "rangeInput", onInput: this.onSliderInput, onChange: this.onSliderChange, onPointerDown: this.onSliderPointerDown, onPointerUp: this.onSliderPointerUp, onKeyDown: this.onInputKeyDown, class: "range-slider__slider" }, (this.sliderInputAccessibilityLabel ? { "aria-label": this.sliderInputAccessibilityLabel } : {}), (this.containerSize !== 'large' ? { tabindex: 1 } : {})))), h("div", { key: '05157e63fc70ff4b023caa4d78395b423a252526', class: "range-slider__track range-slider__track--background" }), h("div", { key: '992854f330b9ad3d69f73f680f566187afd015bf', ref: progressTrackEl => (this.progressTrackRef = progressTrackEl), class: "range-slider__track range-slider__track--progress" }), h("div", { key: 'b2a044d531de1dc5af090d043a9d635b74e45332', ref: tickContainerEl => (this.tickContainerRef = tickContainerEl), class: "range-slider__tick-container" }), h("div", { key: 'b1656775e90d4a30bfae49daaaea21f26f2f81e5', ref: dataLabelEl => (this.dataLabelRef = dataLabelEl), class: {
+            }, clickCallback: this.onControlPreviousClick }, (this.reduceButtonAccessibilityLabel ? { accessibilityLabel: this.reduceButtonAccessibilityLabel } : {}), (this.containerSize !== 'large' ? { tabindex: 2 } : {})), h("tet-icon", { key: 'bcf749ec835816b8b7d8378daab527675fbd74ab', name: "remove", class: "range-slider__control--icon" })), h("div", { key: 'f7832083c3ffc561397c79505bcefa3415a3c69b', onTouchStart: this.onContainerTouchStart, onTouchEnd: this.onContainerTouchEnd, onMouseDown: this.onContainerMouseDown, onScroll: this.onContainerScroll, ref: sliderContainerEl => (this.sliderContainerRef = sliderContainerEl), class: "range-slider__slider-container", draggable: false }, h("div", { key: 'b2350d86df97f4ded9bacd094efe826176d06915', class: "range-slider__slider-wrapper" }, h("input", Object.assign({ key: '4da255b46613c9b22240d8d1fd799cecb05e32cb', ref: sliderEl => (this.sliderRef = sliderEl), type: "range", min: this.minValue, max: this.maxValue, step: this.step, value: this.defaultValue, list: "steplist", id: "rangeInput", onInput: this.onSliderInput, onChange: this.onSliderChange, onPointerDown: this.onSliderPointerDown, onPointerUp: this.onSliderPointerUp, onKeyDown: this.onInputKeyDown, class: "range-slider__slider" }, (this.sliderInputAccessibilityLabel ? { "aria-label": this.sliderInputAccessibilityLabel } : {}), (this.containerSize !== 'large' ? { tabindex: 1 } : {})))), h("div", { key: 'd6674e7c1a5325606a1c07e4c626eec7546e2c60', class: "range-slider__track range-slider__track--background" }), h("div", { key: 'ffcd1412316cfdde7853aebd7c704fe71994526a', ref: progressTrackEl => (this.progressTrackRef = progressTrackEl), class: "range-slider__track range-slider__track--progress" }), h("div", { key: 'ead1f25108639f526791718cb5fb13825f4878b4', ref: tickContainerEl => (this.tickContainerRef = tickContainerEl), class: "range-slider__tick-container" }), h("div", { key: '8391879c38d47f5c2a32a8311c98564cf66308fd', ref: dataLabelEl => (this.dataLabelRef = dataLabelEl), class: {
                 'range-slider__data-label-container': true,
                 'hidden': this.type === 'secondary' && this.containerSize === 'small',
-            } })), h("div", { key: '533f7b7f10928504544886ba827be8f67e35f56a', class: {
+            } })), h("div", { key: 'af4889df82523a093028bbb5015469578250fd48', class: {
                 'range-slider__current-step-container': true,
                 'hidden': !this.withCurrentStepCounter,
-            } }, h("div", { key: 'eb429d23c71b90183d78a8484d1b90ef312d79a3', class: "range-slider__current-step", "aria-live": "polite" }, this.dataSet.indexOf(this.getClosestOverrideDataPoint()) + 1, "/", this.dataPoints.length)), h("div", { key: 'c401bb444b2656da9d3e34c585c736ea3e6a1e94', ref: toolbarHandleEl => (this.tooltipHandleRef = toolbarHandleEl), class: "range-slider__tooltip-handle" }, h("div", { key: 'f8c8be7b681fc0602690fe9befdff6e0011c72ab', class: "range-slider__tooltip translation-none", style: { [`--tooltip-offset`]: `${this.tooltipOffset}rem` }, "aria-live": "polite" }, this.getTooltipValue())), h("tet-button", Object.assign({ key: '8bf991f6aa7f329d9792d062f657c1e32d87447e', theme: this.theme, iconMode: true, class: {
+            } }, h("div", { key: '37f540fa5bb870c54545e9ce6d68316a478cb78f', class: "range-slider__current-step", "aria-live": "polite" }, this.dataSet.indexOf(this.getClosestOverrideDataPoint()) + 1, "/", this.dataPoints.length)), h("div", { key: '6784187d79848c0802af7568844b63bba49a23b8', ref: toolbarHandleEl => (this.tooltipHandleRef = toolbarHandleEl), class: "range-slider__tooltip-handle" }, h("div", { key: '9b9bad5671219ba6dd34576e3279e09c7acff2d9', class: "range-slider__tooltip translation-none", style: { [`--tooltip-offset`]: `${this.tooltipOffset}rem` }, "aria-live": "polite" }, this.getTooltipValue())), h("tet-button", Object.assign({ key: 'be62a8b6bb43d0a0e630777e8a80dcaf9b4af746', theme: this.theme, iconMode: true, class: {
                 'range-slider__control': true,
                 'range-slider__control--right': true,
                 'hidden': !this.withControls,
-            }, clickCallback: this.onControlNextClick }, (this.addButtonAccessibilityLabel ? { accessibilityLabel: this.addButtonAccessibilityLabel } : {}), (this.containerSize !== 'large' ? { tabindex: 4 } : {})), h("tet-icon", { key: 'e2d4d1913a5f6a06bbab1f31703fd7061e10eb73', name: "add", class: "range-slider__control--icon" }))))));
+            }, clickCallback: this.onControlNextClick }, (this.addButtonAccessibilityLabel ? { accessibilityLabel: this.addButtonAccessibilityLabel } : {}), (this.containerSize !== 'large' ? { tabindex: 4 } : {})), h("tet-icon", { key: 'd8c4246055d5622a818069f35edde226db8211b7', name: "add", class: "range-slider__control--icon" }))))));
     }
     static get is() { return "tet-range-slider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -156,7 +156,7 @@
   outline-color: var(--stepper-input-focus-outline-color);
 }
 .stepper-input__value {
-  border: 0.0625rem solid var(--stepper-value-color);
+  border: 0.0625rem solid var(--stepper-input-border-color);
   font: 500 1.25rem/1.5rem "Inter", "Gilroy, Arial, sans-serif";
   color: var(--stepper-value-color);
   background-color: var(--stepper-input-control-background-color);

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

@@ -123,7 +123,7 @@ export class TetStepperInput {
      */
     render() {
         const { onMinusClick, value, onPlusClick } = this;
-        return (h("div", { key: '5e748c8d9fc02ca598c047d122fab9f56f42ccd2', class: { 'stepper-input': true, [this.theme]: !!this.theme } }, h("tet-button", { key: '3efd620997302cdae24088e66bcea3ee84d4f1b0', type: "secondary", iconMode: true, theme: this.theme, size: 'small', accessibilityLabel: t('components-number-input-decrease'), onKeyDown: this.handleOptionKeydown(onMinusClick), onClick: onMinusClick }, h("tet-icon", { key: 'c84ee00401c41d66a33c7d471f54b743e64b4cdb', name: "remove" })), h("input", Object.assign({ key: '3cf4ca758886895b06206b6ddae84165ab664f0b', ref: (htmlInputElement) => (this.inputElement = htmlInputElement), class: "stepper-input__value", value: value, type: "number" }, (this.accessibilityLabel ? { "aria-label": this.accessibilityLabel } : {}))), h("tet-button", { key: '7eeed25fed3c092ae5b75f6d208d65aaf3869b5d', type: "secondary", iconMode: true, theme: this.theme, size: 'small', accessibilityLabel: t('components-number-input-increase'), onKeyDown: this.handleOptionKeydown(onPlusClick), onClick: onPlusClick }, h("tet-icon", { key: '35df3a3af19655820d96709293400311f06a65ae', name: "add" }))));
+        return (h("div", { key: '246478ec9a3cc3e71335433a6451600f8c9d0f25', class: { 'stepper-input': true, [this.theme]: !!this.theme } }, h("tet-button", { key: '6a659e23fce2ed779756e817e3320a41e580ee0b', type: "secondary", iconMode: true, theme: this.theme, size: 'small', accessibilityLabel: t('components-number-input-decrease'), onKeyDown: this.handleOptionKeydown(onMinusClick), onClick: onMinusClick }, h("tet-icon", { key: '62c51f6be866c4ab4db3812d6c170217a4490e5c', name: "remove" })), h("input", Object.assign({ key: '2358b6f69c5e001c625b5e4e633887679d1ef4c6', ref: (htmlInputElement) => (this.inputElement = htmlInputElement), class: "stepper-input__value", value: value, type: "number" }, (this.accessibilityLabel ? { "aria-label": this.accessibilityLabel } : {}))), h("tet-button", { key: '2efd7610377a57d52720aa2fea4aa4d1fd17202c', type: "secondary", iconMode: true, theme: this.theme, size: 'small', accessibilityLabel: t('components-number-input-increase'), onKeyDown: this.handleOptionKeydown(onPlusClick), onClick: onPlusClick }, h("tet-icon", { key: '1125468d02ca4da1058a463f67585ea094ee8ab5', name: "add" }))));
     }
     static get is() { return "tet-stepper-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -50,8 +50,8 @@ export class TetTextarea {
             'error': (errorMessages.length > 0),
             'keyboard-focus': this.focusVisible,
         };
-        return (h(Host, { key: '9f0bb7e589176ee64753e8b5eae095b26a4ed2ba' }, h("label", { key: 'b3659046e6dfeba2611228ac168c5d606e95fbce', class: { [`${theme}`]: true } }, label &&
-            h("span", { key: '30130359654037a137349bc25bb4e76a321649a6', class: { 'tet-textarea__label': true, [`tet-textarea__${theme}`]: true } }, label), h("div", { key: 'a5038cbd88d4ec20e2cfb315b0297c6436e3470b', class: { 'textarea-container': true, [`tet-textarea__${theme}`]: true } }, h("textarea", { key: '36a5d0c26dcd4051dcde8426e7e9b3c8f3c2c53e', onFocus: this.addKeyboardFocus, onFocusout: this.removeKeyboardFocus, id: "textarea", class: textareaClasses, placeholder: placeholder, disabled: disabled, autocomplete: "off" }, value))), (this.errorMessages.length > 0) && renderErrorMessages()));
+        return (h(Host, { key: '6ee2365e95b0ed002932f4046eb606986b31ada9' }, h("label", { key: '8ab9d30fdc5e1d37b9c19007d884525251e3ce19', class: { [`${theme}`]: true } }, label &&
+            h("span", { key: '3cf1d70b6f1730397dede38f933cee790d1274ac', class: { 'tet-textarea__label': true, [`tet-textarea__${theme}`]: true } }, label), h("div", { key: '4f3199ba61df67cd46562613a85a96a1dbefced7', class: { 'textarea-container': true, [`tet-textarea__${theme}`]: true } }, h("textarea", { key: 'f8a6201d6f4daa7cac5e4c6048bd5d6e2afa6789', onFocus: this.addKeyboardFocus, onFocusout: this.removeKeyboardFocus, id: "textarea", class: textareaClasses, placeholder: placeholder, disabled: disabled, autocomplete: "off" }, value))), (this.errorMessages.length > 0) && renderErrorMessages()));
     }
     static get is() { return "tet-textarea"; }
     static get encapsulation() { return "shadow"; }

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

@@ -65,7 +65,7 @@ export class TetNewsCardList {
             scrollFullWidth,
             controlScrollAmount,
         };
-        return (h(Host, { key: '4aeabac14b3b818a4f111a4cd99d8fc77775d165' }, h("tet-card-list", Object.assign({ key: 'ed74c723e2cb232b62afdfb8cb4e23667aa6a0ae', theme: this.theme, part: "card-list-component", exportparts: "card-list, card-list-container", withOverflowOpacity: true }, props), this.items.map((item, index) => this.renderListCard(item, index)))));
+        return (h(Host, { key: 'e5ea95909d581a81c67ae0ebc4eff7bdf92de5cf' }, h("tet-card-list", Object.assign({ key: '2629e333e589233b5be973ed016faeec1305cadb', theme: this.theme, part: "card-list-component", exportparts: "card-list, card-list-container", withOverflowOpacity: true }, props), this.items.map((item, index) => this.renderListCard(item, index)))));
     }
     static get is() { return "tet-news-card-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7202,6 +7202,7 @@
   --tc-button-primary-background-inverse-pressed-dark: rgba(38, 41, 44, 0.8);
   --tc-button-primary-background-inverse-disabled-dark: rgba(38, 41, 44, 0.3);
   --tc-button-secondary-background-hover-dark: rgba(236, 237, 238, 0.15);
+  --tc-button-secondary-outline-background-hover-dark: rgba(255, 255, 255, 0.1);
   --tc-button-secondary-background-pressed-dark: rgba(236, 237, 238, 0.3);
   --tc-button-secondary-background-inverse-hover-dark: rgba(38, 41, 44, 0.12);
   --tc-button-secondary-background-inverse-pressed-dark: rgba(38, 41, 44, 0.3);
@@ -7465,6 +7466,7 @@
   --tc-button-primary-background-inverse-pressed: rgba(236, 237, 238, 0.8);
   --tc-button-primary-background-inverse-disabled: rgba(236, 237, 238, 0.3);
   --tc-button-secondary-background-hover: rgba(38, 41, 44, 0.12);
+  --tc-button-secondary-outline-background-hover: rgba(12, 12, 14, 0.1);
   --tc-button-secondary-background-pressed: rgba(38, 41, 44, 0.3);
   --tc-button-secondary-background-inverse-hover: rgba(236, 237, 238, 0.15);
   --tc-button-secondary-background-inverse-pressed: rgba(236, 237, 238, 0.3);

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

@@ -0,0 +1,208 @@
+@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: flex;
+}
+
+.business-navigation {
+  display: flex;
+  flex-direction: column;
+  max-width: 20.5rem;
+  width: max-content;
+}
+@media screen and (max-width: 48rem) {
+  .business-navigation {
+    flex-direction: row;
+    gap: 0.5rem;
+    max-width: 100%;
+    overflow-x: scroll;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+    user-select: none;
+  }
+}
+.business-navigation.light {
+  --tet-business-navigation-item-background-color: var(--tc-layer-primary);
+  --tet-business-navigation-item-mobile-screen-background-color: var(--tc-layer-secondary);
+  --tet-business-navigation-item-hover-background-color: var(--tc-menu-item-hover);
+  --tet-business-navigation-item-active-background-color: var(--tc-menu-item-pressed);
+  --tet-business-navigation-item-selected-background-color: var(--tc-layer-inverse-primary);
+  --tet-business-navigation-item-selected-item-color: var(--tc-text-inverse-primary);
+  --tet-business-navigation-item-selected-icon-color: var(--tc-layer-primary);
+  --tet-business-navigation-label-color: var(--tc-text-primary);
+}
+.business-navigation.light .business-navigation-item:focus-visible {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline-offset: -0.125rem;
+  transition: outline 0s;
+}
+.business-navigation.dark {
+  --tet-business-navigation-item-background-color: var(--tc-layer-primary-dark);
+  --tet-business-navigation-item-mobile-screen-background-color: var(--tc-layer-secondary-dark);
+  --tet-business-navigation-item-hover-background-color: var(--tc-menu-item-hover-dark);
+  --tet-business-navigation-item-active-background-color: var(--tc-menu-item-pressed-dark);
+  --tet-business-navigation-item-selected-background-color: var(--tc-layer-inverse-primary-dark);
+  --tet-business-navigation-item-selected-item-color: var(--tc-text-inverse-primary-);
+  --tet-business-navigation-item-selected-icon-color: var(--tc-layer-primary-dark);
+  --tet-business-navigation-label-color: var(--tc-text-primary-dark);
+}
+.business-navigation.dark .business-navigation-item:focus-visible {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline: 0.125rem solid var(--tc-blue-40-dark);
+  outline-offset: -0.125rem;
+  transition: outline 0s;
+}
+.business-navigation-item {
+  display: flex;
+  flex-direction: row;
+  padding: 1rem;
+  align-items: flex-start;
+  gap: 0.75rem;
+  align-self: stretch;
+  border: none;
+  border-radius: 0.5rem;
+  background-color: var(--tet-business-navigation-item-background-color);
+  cursor: pointer;
+}
+@media screen and (max-width: 48rem) {
+  .business-navigation-item {
+    display: inline-flex;
+    padding: 0.375rem 0.75rem;
+    min-width: max-content;
+    align-items: center;
+    gap: 0.75rem;
+    background-color: var(--tet-business-navigation-item-mobile-screen-background-color);
+  }
+}
+.business-navigation-item:hover {
+  background-color: var(--tet-business-navigation-item-hover-background-color);
+}
+.business-navigation-item:active {
+  background-color: var(--tet-business-navigation-item-active-background-color);
+}
+.business-navigation-item__icon {
+  --icon-size: 1.5rem;
+  --icon-color: var(--tet-business-navigation-label-color);
+}
+@media screen and (max-width: 48rem) {
+  .business-navigation-item__icon {
+    --icon-size: 1.25rem;
+  }
+}
+.business-navigation-item__title {
+  font: 500 1rem/1.5rem "Inter", "Gilroy, Arial, sans-serif";
+  text-align: start;
+  color: var(--tet-business-navigation-label-color);
+}
+.business-navigation-item.selected {
+  background-color: var(--tet-business-navigation-item-selected-background-color);
+}
+.business-navigation-item.selected .business-navigation-item__title {
+  color: var(--tet-business-navigation-item-selected-item-color);
+}
+.business-navigation-item.selected .business-navigation-item__icon {
+  --icon-color: var(--tet-business-navigation-item-selected-icon-color);
+}