@tet/tet-components 1.3.157-testing → 1.4.0-production

package/dist/esm/tet-card-list.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-7f1e2a22.js';
+import { r as registerInstance, c as createEvent, g as getElement, h, H as Host } from './index-209dece3.js';
 import { g as getConvertedPixels } from './size-93cf5335.js';
 
 /**
@@ -8,195 +8,39 @@ import { g as getConvertedPixels } from './size-93cf5335.js';
  * dispatches `content-scroll` and `content-scroll-end` events to the `rootElement`.
  */
 class InertiaScroll {
+    /** Determines whether the scroll logic is enabled. */
+    isEnabled = false;
+    /** Determines whether the user is currently dragging the content. */
+    isDragging = false;
+    /** Determines whether the content is currently being scrolled with inertia. */
+    isScrolling = false;
+    /** The current pointer position on the X asis. */
+    pointerX = 0;
+    /** The previous pointer position on the X asis from ~50ms ago. */
+    pointerXOld = 0;
+    /** The speed of the pointer movement for calculating the innertia after the user interaction. */
+    pointerSpeedXOld = 0;
+    /** The speed of current scroll */
+    scrollSpeed = 0;
+    /** The root element of the scroll. */
+    rootElement = null;
+    /** the scroll container created inside of `element` to mimic scroll behaviour. */
+    scrollContainer = null;
+    /** The reference of the interval timer used for updating pointer related values. */
+    timer = null;
+    /** The custom class to be applied to the `scrollContainer`. */
+    scrollableElementClass = '';
+    /** The speed of `animateScroll` scroll animation. */
+    animationSpeed = 0;
+    /** The amount of horizontal scroll from which to disable vertical scrolling. */
+    scrollAmount = 10;
+    /** The width of the window beneath witch to disable vertical scroll when scrolling horizontally. */
+    mobileBreakpoint = 740;
     /**
      * Attaches the `window` listeners and initialises the
      * @param {IInertiaScroll} configuration
      */
     constructor({ rootElement, scrollableElementClass, animationSpeed = 200 }) {
-        /** Determines whether the scroll logic is enabled. */
-        this.isEnabled = false;
-        /** Determines whether the user is currently dragging the content. */
-        this.isDragging = false;
-        /** Determines whether the content is currently being scrolled with inertia. */
-        this.isScrolling = false;
-        /** The current pointer position on the X asis. */
-        this.pointerX = 0;
-        /** The previous pointer position on the X asis from ~50ms ago. */
-        this.pointerXOld = 0;
-        /** The speed of the pointer movement for calculating the innertia after the user interaction. */
-        this.pointerSpeedXOld = 0;
-        /** The speed of current scroll */
-        this.scrollSpeed = 0;
-        /** The root element of the scroll. */
-        this.rootElement = null;
-        /** the scroll container created inside of `element` to mimic scroll behaviour. */
-        this.scrollContainer = null;
-        /** The reference of the interval timer used for updating pointer related values. */
-        this.timer = null;
-        /** The custom class to be applied to the `scrollContainer`. */
-        this.scrollableElementClass = '';
-        /** The speed of `animateScroll` scroll animation. */
-        this.animationSpeed = 0;
-        /** The amount of horizontal scroll from which to disable vertical scrolling. */
-        this.scrollAmount = 10;
-        /** The width of the window beneath witch to disable vertical scroll when scrolling horizontally. */
-        this.mobileBreakpoint = 740;
-        /**
-         * Applies required styles to the `rootElement`.
-         * Creates `scrollContainer` inside of the `rootElement`.
-         * Moves the `rootElement` innerHTML into the `scrollContainer`.
-         * Attaches listeners to the `rootElement`.
-         */
-        this.makeScrollable = () => {
-            this.rootElement.style.display = 'grid';
-            this.rootElement.style.gridAutoFlow = 'column';
-            this.rootElement.style.position = 'relative';
-            this.rootElement.style.overflow = 'hidden';
-            this.rootElement.style.width = '100%';
-            this.rootElement.style.height = '100%';
-            const innerHTML = this.rootElement.innerHTML;
-            this.scrollContainer = document.createElement('div');
-            this.rootElement.innerHTML = '';
-            this.rootElement.appendChild(this.scrollContainer);
-            this.scrollContainer.innerHTML = innerHTML;
-            this.scrollContainer.setAttribute('part', 'scroll-container');
-            this.scrollContainer.classList.add(this.scrollableElementClass);
-            this.scrollContainer.style.overflow = 'visible';
-            this.scrollContainer.style.position = 'relative';
-            this.scrollContainer.style.left = '0px';
-            this.scrollContainer.style.display = 'grid';
-            this.scrollContainer.style.gridAutoFlow = 'column';
-            this.scrollSpeed = 0;
-            this.rootElement.addEventListener('mousedown', this.onMouseDown, { passive: false });
-            this.rootElement.addEventListener('touchstart', this.onTouchStart);
-        };
-        /** Mouse down event handler. */
-        this.onMouseDown = (event) => {
-            this.onPointerDown(event.clientX);
-        };
-        /** Touch start event handler. */
-        this.onTouchStart = (event) => {
-            for (let i = 0; i < event.changedTouches.length; i++) {
-                const touch = event.changedTouches[i];
-                this.onPointerDown(touch.clientX);
-            }
-        };
-        /** Mouse move event handler. */
-        this.onMouseMove = (event) => {
-            if (this.isDragging) {
-                this.onPointerMove(event.clientX);
-            }
-        };
-        /** Touch move event handler. */
-        this.onTouchMove = (event) => {
-            if (this.isDragging) {
-                for (let i = 0; i < event.changedTouches.length; i++) {
-                    const touch = event.changedTouches[i];
-                    this.onPointerMove(touch.clientX);
-                }
-            }
-        };
-        /** Mouse up event handler. */
-        this.onMouseUp = () => {
-            this.onPointerRelease();
-        };
-        /** Touch end event handler. */
-        this.onTouchEnd = (event) => {
-            for (let i = 0; i < event.changedTouches.length; i++) {
-                this.onPointerRelease();
-            }
-        };
-        /** Sets the scroll parameters to the initial state for scroll start. */
-        this.onPointerDown = (x) => {
-            if (!this.isEnabled) {
-                return;
-            }
-            this.scrollSpeed = 0;
-            this.pointerSpeedXOld = 0;
-            this.isDragging = true;
-            this.pointerX = this.pointerXOld = x;
-        };
-        /** Stops the manual scroll by user and sets the initial state for the inertia scroll. */
-        this.onPointerRelease = () => {
-            if (!this.isEnabled) {
-                return;
-            }
-            if (this.isDragging) {
-                this.scrollSpeed = this.pointerSpeedXOld;
-                this.isScrolling = true;
-                this.isDragging = false;
-                this.scrollContainer.style.userSelect = null;
-                this.scrollContainer.style.pointerEvents = null;
-                document.querySelector('body').style.overflowY = null;
-            }
-        };
-        /** Calculates the distance traveled by the pointer while it's pressed updating the `scrollContainer` position. */
-        this.onPointerMove = (x) => {
-            if (!this.isEnabled) {
-                return;
-            }
-            if (!this.isDragging) {
-                return;
-            }
-            this.scrollContainer.style.userSelect = 'none';
-            this.scrollContainer.style.pointerEvents = 'none';
-            // Get the distance the mouse has moved.
-            let scrollDelta = x - this.pointerX;
-            if (Math.abs(scrollDelta) > this.scrollAmount && window.innerWidth < this.mobileBreakpoint) {
-                document.querySelector('body').style.overflowY = 'hidden';
-            }
-            const { scrollLeft, scrollWidth } = this;
-            // Scroll past the end of content, to mimic bounce.
-            if ((scrollLeft < 0 && scrollDelta > 0) || (scrollLeft > scrollWidth && scrollDelta < 0)) {
-                scrollDelta /= 3;
-            }
-            // Increase the left position by the amount scrolled.
-            this.scrollContainer.style.left = `-${scrollLeft - scrollDelta}px`;
-            // Store the position to calculate the next pointer move.
-            this.pointerX = x;
-        };
-        /**
-         * Animation cycle.
-         * Handles the inertial scroll after user has stoped the interaction.
-         */
-        this.scrollUpdate = () => {
-            if (this.isEnabled) {
-                requestAnimationFrame(this.scrollUpdate);
-            }
-            if (!this.isDragging && !this.isScrolling) {
-                return;
-            }
-            // Continue scrolling after drag end with scroll innertia.
-            let { scrollLeft } = this;
-            scrollLeft -= this.scrollSpeed;
-            // Slow down gradually.
-            this.scrollSpeed *= 0.9;
-            if (Math.abs(this.scrollSpeed) < 0.1) {
-                this.scrollSpeed = 0;
-            }
-            // Reach content left end. Trigger a bounce effect.
-            if (scrollLeft < 0) {
-                scrollLeft *= 0.7;
-            }
-            // Reach content right end. Trigger a bounce effect.
-            const { scrollWidth } = this;
-            if (scrollLeft > scrollWidth) {
-                scrollLeft = scrollWidth + (scrollLeft - scrollWidth) * 0.3;
-            }
-            // Update scroll position.
-            this.scrollContainer.style.left = -scrollLeft + 'px';
-            if (this.scrollSpeed === 0 && !this.isDragging && this.isScrolling) {
-                this.isScrolling = false;
-                this.rootElement.dispatchEvent(new CustomEvent('content-scroll-end', {
-                    detail: Object.assign({}, this.currentScroll),
-                }));
-            }
-            if (this.isDragging || this.isScrolling) {
-                this.rootElement.dispatchEvent(new CustomEvent('content-scroll', {
-                    detail: Object.assign({}, this.currentScroll),
-                }));
-            }
-        };
         this.rootElement = rootElement;
         this.scrollableElementClass = scrollableElementClass;
         this.animationSpeed = animationSpeed;
@@ -250,13 +94,11 @@ class InertiaScroll {
     }
     /** Gets the current `scrollLeft` value of the `scrollableContainer`. */
     get scrollLeft() {
-        var _a, _b;
-        return Math.round(Math.abs(parseFloat((_b = (_a = this.scrollContainer) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.left) || 0));
+        return Math.round(Math.abs(parseFloat(this.scrollContainer?.style?.left) || 0));
     }
     /** Get the total available `scrollWidth` value of the `scrollableContainer`. */
     get scrollWidth() {
-        var _a, _b;
-        return Math.round(((_a = this.scrollContainer) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) - ((_b = this.rootElement) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width) || 0);
+        return Math.round(this.scrollContainer?.getBoundingClientRect().width - this.rootElement?.getBoundingClientRect().width || 0);
     }
     /** Enables the scroll. */
     enable() {
@@ -290,7 +132,10 @@ class InertiaScroll {
             return;
         }
         this.rootElement.dispatchEvent(new CustomEvent('content-scroll-end', {
-            detail: Object.assign(Object.assign({}, this.currentScroll), { scrollSpeed: scrollResult > scrollLeft ? -1 : 1 }),
+            detail: {
+                ...this.currentScroll,
+                scrollSpeed: scrollResult > scrollLeft ? -1 : 1,
+            },
         }));
     }
     /** Scrolls the passed element to the center of the viewport if possible.
@@ -328,7 +173,10 @@ class InertiaScroll {
             return;
         }
         this.rootElement.dispatchEvent(new CustomEvent('content-scroll-end', {
-            detail: Object.assign(Object.assign({}, this.currentScroll), { scrollSpeed: scrollOptions.left > scrollLeft ? -1 : 1 }),
+            detail: {
+                ...this.currentScroll,
+                scrollSpeed: scrollOptions.left > scrollLeft ? -1 : 1,
+            },
         }));
     }
     /**
@@ -359,13 +207,177 @@ class InertiaScroll {
                     resolve();
                 }
                 this.rootElement.dispatchEvent(new CustomEvent('content-scroll', {
-                    detail: Object.assign(Object.assign({}, this.currentScroll), { scrollSpeed: scrollAmount < 0 ? -1 : 1, isUserScroll: false }),
+                    detail: {
+                        ...this.currentScroll,
+                        scrollSpeed: scrollAmount < 0 ? -1 : 1,
+                        isUserScroll: false,
+                    },
                 }));
             };
             animate(currentTime);
         });
         await promise;
     }
+    /**
+     * Applies required styles to the `rootElement`.
+     * Creates `scrollContainer` inside of the `rootElement`.
+     * Moves the `rootElement` innerHTML into the `scrollContainer`.
+     * Attaches listeners to the `rootElement`.
+     */
+    makeScrollable = () => {
+        this.rootElement.style.display = 'grid';
+        this.rootElement.style.gridAutoFlow = 'column';
+        this.rootElement.style.position = 'relative';
+        this.rootElement.style.overflow = 'hidden';
+        this.rootElement.style.width = '100%';
+        this.rootElement.style.height = '100%';
+        const innerHTML = this.rootElement.innerHTML;
+        this.scrollContainer = document.createElement('div');
+        this.rootElement.innerHTML = '';
+        this.rootElement.appendChild(this.scrollContainer);
+        this.scrollContainer.innerHTML = innerHTML;
+        this.scrollContainer.setAttribute('part', 'scroll-container');
+        this.scrollContainer.classList.add(this.scrollableElementClass);
+        this.scrollContainer.style.overflow = 'visible';
+        this.scrollContainer.style.position = 'relative';
+        this.scrollContainer.style.left = '0px';
+        this.scrollContainer.style.display = 'grid';
+        this.scrollContainer.style.gridAutoFlow = 'column';
+        this.scrollSpeed = 0;
+        this.rootElement.addEventListener('mousedown', this.onMouseDown, { passive: false });
+        this.rootElement.addEventListener('touchstart', this.onTouchStart);
+    };
+    /** Mouse down event handler. */
+    onMouseDown = (event) => {
+        this.onPointerDown(event.clientX);
+    };
+    /** Touch start event handler. */
+    onTouchStart = (event) => {
+        for (let i = 0; i < event.changedTouches.length; i++) {
+            const touch = event.changedTouches[i];
+            this.onPointerDown(touch.clientX);
+        }
+    };
+    /** Mouse move event handler. */
+    onMouseMove = (event) => {
+        if (this.isDragging) {
+            this.onPointerMove(event.clientX);
+        }
+    };
+    /** Touch move event handler. */
+    onTouchMove = (event) => {
+        if (this.isDragging) {
+            for (let i = 0; i < event.changedTouches.length; i++) {
+                const touch = event.changedTouches[i];
+                this.onPointerMove(touch.clientX);
+            }
+        }
+    };
+    /** Mouse up event handler. */
+    onMouseUp = () => {
+        this.onPointerRelease();
+    };
+    /** Touch end event handler. */
+    onTouchEnd = (event) => {
+        for (let i = 0; i < event.changedTouches.length; i++) {
+            this.onPointerRelease();
+        }
+    };
+    /** Sets the scroll parameters to the initial state for scroll start. */
+    onPointerDown = (x) => {
+        if (!this.isEnabled) {
+            return;
+        }
+        this.scrollSpeed = 0;
+        this.pointerSpeedXOld = 0;
+        this.isDragging = true;
+        this.pointerX = this.pointerXOld = x;
+    };
+    /** Stops the manual scroll by user and sets the initial state for the inertia scroll. */
+    onPointerRelease = () => {
+        if (!this.isEnabled) {
+            return;
+        }
+        if (this.isDragging) {
+            this.scrollSpeed = this.pointerSpeedXOld;
+            this.isScrolling = true;
+            this.isDragging = false;
+            this.scrollContainer.style.userSelect = null;
+            this.scrollContainer.style.pointerEvents = null;
+            document.querySelector('body').style.overflowY = null;
+        }
+    };
+    /** Calculates the distance traveled by the pointer while it's pressed updating the `scrollContainer` position. */
+    onPointerMove = (x) => {
+        if (!this.isEnabled) {
+            return;
+        }
+        if (!this.isDragging) {
+            return;
+        }
+        this.scrollContainer.style.userSelect = 'none';
+        this.scrollContainer.style.pointerEvents = 'none';
+        // Get the distance the mouse has moved.
+        let scrollDelta = x - this.pointerX;
+        if (Math.abs(scrollDelta) > this.scrollAmount && window.innerWidth < this.mobileBreakpoint) {
+            document.querySelector('body').style.overflowY = 'hidden';
+        }
+        const { scrollLeft, scrollWidth } = this;
+        // Scroll past the end of content, to mimic bounce.
+        if ((scrollLeft < 0 && scrollDelta > 0) || (scrollLeft > scrollWidth && scrollDelta < 0)) {
+            scrollDelta /= 3;
+        }
+        // Increase the left position by the amount scrolled.
+        this.scrollContainer.style.left = `-${scrollLeft - scrollDelta}px`;
+        // Store the position to calculate the next pointer move.
+        this.pointerX = x;
+    };
+    /**
+     * Animation cycle.
+     * Handles the inertial scroll after user has stoped the interaction.
+     */
+    scrollUpdate = () => {
+        if (this.isEnabled) {
+            requestAnimationFrame(this.scrollUpdate);
+        }
+        if (!this.isDragging && !this.isScrolling) {
+            return;
+        }
+        // Continue scrolling after drag end with scroll innertia.
+        let { scrollLeft } = this;
+        scrollLeft -= this.scrollSpeed;
+        // Slow down gradually.
+        this.scrollSpeed *= 0.9;
+        if (Math.abs(this.scrollSpeed) < 0.1) {
+            this.scrollSpeed = 0;
+        }
+        // Reach content left end. Trigger a bounce effect.
+        if (scrollLeft < 0) {
+            scrollLeft *= 0.7;
+        }
+        // Reach content right end. Trigger a bounce effect.
+        const { scrollWidth } = this;
+        if (scrollLeft > scrollWidth) {
+            scrollLeft = scrollWidth + (scrollLeft - scrollWidth) * 0.3;
+        }
+        // Update scroll position.
+        this.scrollContainer.style.left = -scrollLeft + 'px';
+        if (this.scrollSpeed === 0 && !this.isDragging && this.isScrolling) {
+            this.isScrolling = false;
+            this.rootElement.dispatchEvent(new CustomEvent('content-scroll-end', {
+                detail: {
+                    ...this.currentScroll,
+                },
+            }));
+        }
+        if (this.isDragging || this.isScrolling) {
+            this.rootElement.dispatchEvent(new CustomEvent('content-scroll', {
+                detail: {
+                    ...this.currentScroll,
+                },
+            }));
+        }
+    };
 }
 
 const tetCardListCss = "@font-face{font-family:Avenir Next;src:url(assets/fonts/8e7462a9501f48c43c58f870188b3fb2.eot?#iefix);src:url(assets/fonts/8e7462a9501f48c43c58f870188b3fb2.eot?#iefix) format(\"eot\"),url(assets/fonts/3c3e10968ffc97c2a52c5830f9886d1f.woff2) format(\"woff2\"),url(assets/fonts/660fbf858d30d7685fa4b166080f5980.woff) format(\"woff\"),url(assets/fonts/2b7748589092fd1a10b806abdfb562ff.ttf) format(\"truetype\");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Avenir Next;src:url(assets/fonts/d5e25ad69d0ea31f3b8f66d634ca40fe.eot?#iefix);src:url(assets/fonts/d5e25ad69d0ea31f3b8f66d634ca40fe.eot?#iefix) format(\"eot\"),url(assets/fonts/aad36ecead30948bb30fe0ef818b749c.woff2) format(\"woff2\"),url(assets/fonts/c437d7752feaf3f056bbf8613e898d3a.woff) format(\"woff\"),url(assets/fonts/b8df4d02ef5de13a813917a85bc4a9c4.ttf) format(\"truetype\");font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:Avenir Next;src:url(assets/fonts/046190c9a2f724b925df848737b03819.eot?#iefix);src:url(assets/fonts/046190c9a2f724b925df848737b03819.eot?#iefix) format(\"eot\"),url(assets/fonts/4d52f8276a74ea8efbad833ed790367c.woff2) format(\"woff2\"),url(assets/fonts/a067695dd1b87e927f4056c040d84669.woff) format(\"woff\"),url(assets/fonts/510a664af9771b72d4ce5e637109ca3c.ttf) format(\"truetype\");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:Avenir Next;src:url(assets/fonts/0715de188f56c99aa615905f7e06292e.eot?#iefix);src:url(assets/fonts/0715de188f56c99aa615905f7e06292e.eot?#iefix) format(\"eot\"),url(assets/fonts/63f5acc71d9852468683a4bfe824a28f.woff2) format(\"woff2\"),url(assets/fonts/ed94c737da267752ce0abd79bb003ff6.woff) format(\"woff\"),url(assets/fonts/6302f55a6dc6b12365177dc89b7d63cf.ttf) format(\"truetype\");font-weight:500;font-style:italic;font-display:swap}@font-face{font-family:Avenir Next;src:url(assets/fonts/3f76abc23eef0596c499840db84213bb.eot?#iefix);src:url(assets/fonts/3f76abc23eef0596c499840db84213bb.eot?#iefix) format(\"eot\"),url(assets/fonts/1fe7da97fe9dbe1349aca9b54b5fdf69.woff2) format(\"woff2\"),url(assets/fonts/dacc6a84278e221422902af99579ada5.woff) format(\"woff\"),url(assets/fonts/e530c573663a3a07243d303fbf7db508.ttf) format(\"truetype\");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:Avenir Next;src:url(assets/fonts/75f8489ba53f19968feaa3e2eb78c569.eot?#iefix);src:url(assets/fonts/75f8489ba53f19968feaa3e2eb78c569.eot?#iefix) format(\"eot\"),url(assets/fonts/93ec0034623fc696601ab99aba652d4c.woff2) format(\"woff2\"),url(assets/fonts/d73c8eb1c13abe1237366aa3ee829a59.woff) format(\"woff\"),url(assets/fonts/7b6dcef99f3f4b23346e23925ec8678f.ttf) format(\"truetype\");font-weight:600;font-style:italic;font-display:swap}.tet-icon{font-family:Tet Icons;font-weight:400;font-style:normal;font-size:24px;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}@font-face{font-family:Tet Icons;src:url(assets/fonts/d2ce51cdcd0b9707af186f8d50023d23.eot);src:url(assets/fonts/d2ce51cdcd0b9707af186f8d50023d23.eot?#iefix) format(\"embedded-opentype\"),url(assets/fonts/25f10ef322a1220b2e9e11db38b73892.woff2) format(\"woff2\"),url(assets/fonts/fed75ac1edcf1c25cdd8612d2c365f9a.woff) format(\"woff\"),url(assets/fonts/df7fbe67cabb13cb837172a73c46378a.ttf) format(\"truetype\"),url(assets/fonts/5486d8c87e2abc6c13ed952a6cc96658.svg#tet-icons) format(\"svg\");font-weight:400;font-style:normal}.tet-icon:before{content:\"\\E84E\"}.tet-icon--sm{font-size:1.125rem}.tet-icon--md{font-size:1.5rem}.tet-icon--lg{font-size:2.25rem}.tet-icon--xl{font-size:3rem}.tet-icon--xxl{font-size:4rem}.tet-icon--0{font-size:0}.tet-icon--1{font-size:.0625rem}.tet-icon--2{font-size:.125rem}.tet-icon--3{font-size:.1875rem}.tet-icon--4{font-size:.25rem}.tet-icon--5{font-size:.3125rem}.tet-icon--6{font-size:.375rem}.tet-icon--7{font-size:.4375rem}.tet-icon--8{font-size:.5rem}.tet-icon--9{font-size:.5625rem}.tet-icon--10{font-size:.625rem}.tet-icon--11{font-size:.6875rem}.tet-icon--12{font-size:.75rem}.tet-icon--13{font-size:.8125rem}.tet-icon--14{font-size:.875rem}.tet-icon--15{font-size:.9375rem}.tet-icon--16{font-size:1rem}.tet-icon--17{font-size:1.0625rem}.tet-icon--18{font-size:1.125rem}.tet-icon--19{font-size:1.1875rem}.tet-icon--20{font-size:1.25rem}.tet-icon--21{font-size:1.3125rem}.tet-icon--22{font-size:1.375rem}.tet-icon--23{font-size:1.4375rem}.tet-icon--24{font-size:1.5rem}.tet-icon--25{font-size:1.5625rem}.tet-icon--26{font-size:1.625rem}.tet-icon--27{font-size:1.6875rem}.tet-icon--28{font-size:1.75rem}.tet-icon--29{font-size:1.8125rem}.tet-icon--30{font-size:1.875rem}.tet-icon--31{font-size:1.9375rem}.tet-icon--32{font-size:2rem}.tet-icon--33{font-size:2.0625rem}.tet-icon--34{font-size:2.125rem}.tet-icon--35{font-size:2.1875rem}.tet-icon--36{font-size:2.25rem}.tet-icon--37{font-size:2.3125rem}.tet-icon--38{font-size:2.375rem}.tet-icon--39{font-size:2.4375rem}.tet-icon--40{font-size:2.5rem}.tet-icon--41{font-size:2.5625rem}.tet-icon--42{font-size:2.625rem}.tet-icon--43{font-size:2.6875rem}.tet-icon--44{font-size:2.75rem}.tet-icon--45{font-size:2.8125rem}.tet-icon--46{font-size:2.875rem}.tet-icon--47{font-size:2.9375rem}.tet-icon--48{font-size:3rem}.tet-icon--49{font-size:3.0625rem}.tet-icon--50{font-size:3.125rem}.tet-icon--51{font-size:3.1875rem}.tet-icon--52{font-size:3.25rem}.tet-icon--53{font-size:3.3125rem}.tet-icon--54{font-size:3.375rem}.tet-icon--55{font-size:3.4375rem}.tet-icon--56{font-size:3.5rem}.tet-icon--57{font-size:3.5625rem}.tet-icon--58{font-size:3.625rem}.tet-icon--59{font-size:3.6875rem}.tet-icon--60{font-size:3.75rem}.tet-icon--61{font-size:3.8125rem}.tet-icon--62{font-size:3.875rem}.tet-icon--63{font-size:3.9375rem}.tet-icon--64{font-size:4rem}.tet-icon--65{font-size:4.0625rem}.tet-icon--66{font-size:4.125rem}.tet-icon--67{font-size:4.1875rem}.tet-icon--68{font-size:4.25rem}.tet-icon--69{font-size:4.3125rem}.tet-icon--70{font-size:4.375rem}.tet-icon--71{font-size:4.4375rem}.tet-icon--72{font-size:4.5rem}.tet-icon--73{font-size:4.5625rem}.tet-icon--74{font-size:4.625rem}.tet-icon--75{font-size:4.6875rem}.tet-icon--76{font-size:4.75rem}.tet-icon--77{font-size:4.8125rem}.tet-icon--78{font-size:4.875rem}.tet-icon--79{font-size:4.9375rem}.tet-icon--80{font-size:5rem}.tet-icon--81{font-size:5.0625rem}.tet-icon--82{font-size:5.125rem}.tet-icon--83{font-size:5.1875rem}.tet-icon--84{font-size:5.25rem}.tet-icon--85{font-size:5.3125rem}.tet-icon--86{font-size:5.375rem}.tet-icon--87{font-size:5.4375rem}.tet-icon--88{font-size:5.5rem}.tet-icon--89{font-size:5.5625rem}.tet-icon--90{font-size:5.625rem}.tet-icon--91{font-size:5.6875rem}.tet-icon--92{font-size:5.75rem}.tet-icon--93{font-size:5.8125rem}.tet-icon--94{font-size:5.875rem}.tet-icon--95{font-size:5.9375rem}.tet-icon--96{font-size:6rem}.tet-icon--97{font-size:6.0625rem}.tet-icon--98{font-size:6.125rem}.tet-icon--99{font-size:6.1875rem}.tet-icon--100{font-size:6.25rem}.tet-icon--101{font-size:6.3125rem}.tet-icon__add:before{content:\"\\E800\"}.tet-icon__alert-circled:before{content:\"\\E801\"}.tet-icon__alert:before{content:\"\\E802\"}.tet-icon__bank:before{content:\"\\E803\"}.tet-icon__box:before{content:\"\\E804\"}.tet-icon__download:before{content:\"\\E805\"}.tet-icon__burger:before{content:\"\\E806\"}.tet-icon__cancel:before{content:\"\\E807\"}.tet-icon__printer:before{content:\"\\E808\"}.tet-icon__cart-add:before{content:\"\\E809\"}.tet-icon__cart-remove:before{content:\"\\E80A\"}.tet-icon__cart:before{content:\"\\E80B\"}.tet-icon__chat:before{content:\"\\E80C\"}.tet-icon__arrow-up:before{content:\"\\E80D\"}.tet-icon__calendar:before{content:\"\\E80E\"}.tet-icon__help-circled:before{content:\"\\E80F\"}.tet-icon__edit:before{content:\"\\E810\"}.tet-icon__external-link:before{content:\"\\E811\"}.tet-icon__gift:before{content:\"\\E812\"}.tet-icon__person:before{content:\"\\E813\"}.tet-icon__heart:before{content:\"\\E814\"}.tet-icon__language:before{content:\"\\E815\"}.tet-icon__help:before{content:\"\\E816\"}.tet-icon__home-1:before{content:\"\\E817\"}.tet-icon__location:before{content:\"\\E818\"}.tet-icon__home-3:before{content:\"\\E819\"}.tet-icon__chart-even:before{content:\"\\E81A\"}.tet-icon__info-2:before{content:\"\\E81B\"}.tet-icon__key:before{content:\"\\E81C\"}.tet-icon__info:before{content:\"\\E81D\"}.tet-icon__lock-opened:before{content:\"\\E81E\"}.tet-icon__lock-outlined:before{content:\"\\E81F\"}.tet-icon__lock:before{content:\"\\E820\"}.tet-icon__laptop-filled:before{content:\"\\E821\"}.tet-icon__mail:before{content:\"\\E822\"}.tet-icon__options:before{content:\"\\E823\"}.tet-icon__chart-uneven:before{content:\"\\E824\"}.tet-icon__mail-2:before{content:\"\\E825\"}.tet-icon__remove:before{content:\"\\E826\"}.tet-icon__mobile-filled:before{content:\"\\E827\"}.tet-icon__ilu-calendar-check:before{content:\"\\E828\"}.tet-icon__settings-outlined:before{content:\"\\E829\"}.tet-icon__tablet:before{content:\"\\E82A\"}.tet-icon__thumb-up:before{content:\"\\E82B\"}.tet-icon__ilu-purchase:before{content:\"\\E82C\"}.tet-icon__chart-even-outlined:before{content:\"\\E82D\"}.tet-icon__movie:before{content:\"\\E82E\"}.tet-icon__percent:before{content:\"\\E82F\"}.tet-icon__ilu-change-whenever:before{content:\"\\E830\"}.tet-icon__truck:before{content:\"\\E831\"}.tet-icon__zero:before{content:\"\\E832\"}.tet-icon__attach:before{content:\"\\E833\"}.tet-icon__cloud-done:before{content:\"\\E834\"}.tet-icon__cloud-download:before{content:\"\\E835\"}.tet-icon__cloud-upload:before{content:\"\\E836\"}.tet-icon__cloud:before{content:\"\\E837\"}.tet-icon__folder:before{content:\"\\E838\"}.tet-icon__remote:before{content:\"\\E839\"}.tet-icon__router:before{content:\"\\E83A\"}.tet-icon__shield-filled:before{content:\"\\E83B\"}.tet-icon__shield:before{content:\"\\E83C\"}.tet-icon__ilu-devices:before{content:\"\\E83D\"}.tet-icon__ilu-get-points:before{content:\"\\E83E\"}.tet-icon__tv:before{content:\"\\E83F\"}.tet-icon__ilu-internet:before{content:\"\\E840\"}.tet-icon__wifi-outlined:before{content:\"\\E841\"}.tet-icon__wifi:before{content:\"\\E842\"}.tet-icon__description-outlined:before{content:\"\\E843\"}.tet-icon__laptop:before{content:\"\\E844\"}.tet-icon__chart-uneven-outlined:before{content:\"\\E845\"}.tet-icon__meter:before{content:\"\\E846\"}.tet-icon__mobile:before{content:\"\\E847\"}.tet-icon__phone:before{content:\"\\E848\"}.tet-icon__plug-filled:before{content:\"\\E849\"}.tet-icon__plug:before{content:\"\\E84A\"}.tet-icon__print:before{content:\"\\E84B\"}.tet-icon__camera:before{content:\"\\E84C\"}.tet-icon__clock:before{content:\"\\E84D\"}.tet-icon__placeholder:before{content:\"\\E84E\"}.tet-icon__tv-filled:before{content:\"\\E84F\"}.tet-icon__arrow-down:before{content:\"\\E850\"}.tet-icon__arrow-left:before{content:\"\\E851\"}.tet-icon__arrow-right:before{content:\"\\E852\"}.tet-icon__description:before{content:\"\\E853\"}.tet-icon__login:before{content:\"\\E854\"}.tet-icon__check:before{content:\"\\E855\"}.tet-icon__chevron-down:before{content:\"\\E856\"}.tet-icon__chevron-left:before{content:\"\\E857\"}.tet-icon__chevron-right:before{content:\"\\E858\"}.tet-icon__chevron-up:before{content:\"\\E859\"}.tet-icon__close-circled:before{content:\"\\E85A\"}.tet-icon__close:before{content:\"\\E85B\"}.tet-icon__more-horizontal:before{content:\"\\E85C\"}.tet-icon__more-vertical:before{content:\"\\E85D\"}.tet-icon__refresh:before{content:\"\\E85E\"}.tet-icon__facebook:before{content:\"\\E85F\"}.tet-icon__instagram:before{content:\"\\E860\"}.tet-icon__linkedin:before{content:\"\\E861\"}.tet-icon__people:before{content:\"\\E862\"}.tet-icon__logout:before{content:\"\\E863\"}.tet-icon__share:before{content:\"\\E864\"}.tet-icon__twitter:before{content:\"\\E865\"}.tet-icon__cancel-filled:before{content:\"\\E866\"}.tet-icon__done:before{content:\"\\E867\"}.tet-icon__star-filled:before{content:\"\\E868\"}.tet-icon__star:before{content:\"\\E869\"}.tet-icon__clipboard:before{content:\"\\E86A\"}.tet-icon__ilu-calendar:before{content:\"\\E86B\"}.tet-icon__check-circled:before{content:\"\\E86C\"}.tet-icon__ilu-choose-channels:before{content:\"\\E86D\"}.tet-icon__search:before{content:\"\\E86E\"}.tet-icon__warning:before{content:\"\\E86F\"}.tet-icon__ilu-clock-1:before{content:\"\\E870\"}.tet-icon__ilu-fold:before{content:\"\\E871\"}.tet-icon__ilu-letter:before{content:\"\\E872\"}.tet-icon__ilu-pay:before{content:\"\\E873\"}.tet-icon__ilu-meter:before{content:\"\\E874\"}.tet-icon__ilu-sign:before{content:\"\\E875\"}.tet-icon__smart-watch-filled:before{content:\"\\E876\"}.tet-icon__washing-machine-filled:before{content:\"\\E877\"}.tet-icon__bullet:before{content:\"\\E878\"}.tet-icon__sound:before{content:\"\\E879\"}.tet-icon__dropdown:before{content:\"\\E87A\"}.tet-icon__mask-pass:before{content:\"\\E87B\"}.tet-icon__select:before{content:\"\\E87C\"}.tet-icon__text-area-sizing:before{content:\"\\E87D\"}.tet-icon__unmask-pass:before{content:\"\\E87E\"}.tet-icon__bullet-small:before{content:\"\\E882\"}.tet-icon__electric-bolt:before{content:\"\\E880\"}.tet-icon__sun:before{content:\"\\E881\"}:host{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit;padding:0;margin:0}:host{--color-gray-light:#cdd2de;--color-ta070:#f5f6f8;--color-ta080:#e6e8ee;--color-ta100:#cdd2de;--color-ta200:#9ba5be;--color-ta300:#69789c;--color-ta500:#1e356a;--color-ta600:#051d59;--color-tc090:#d6e6fd;--color-tc100:#d1dffe;--color-tc300:#75a1fb;--color-tc500:#1a70f6;--color-tc600:#0060f5;--color-td500:#00F1F2;--color-td600:#01cbe0;--color-tf600:#f53b2a;--color-tg300:#2b3036;--color-tg400:#1d2128;--color-tg500:#12171e;--color-tg600:#01050c;--color-th500:#f5f5f5;--color-ti500:#869198;--color-ti600:#aeb7bc;--text-font:Gilroy, serif;--text-color-darker:var(--color-ta600);--text-color-dark:var(--color-ta500);--text-color-dark-theme:var(--color-th500);--icons-font:Tet Icons, serif}.icon.tet-search{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-search::before{content:\"\\e86e\"}.icon.tet-close-circled{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-close-circled::before{content:\"\\e85a\"}.icon.tet-close{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-close::before{content:\"\\e85b\"}.icon.tet-check-circled{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-check-circled::before{content:\"\\e86c\"}.icon.tet-check{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-check::before{content:\"\\e855\"}.icon.tet-chevron-up{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-chevron-up::before{content:\"\\e859\"}.icon.tet-chevron-down{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-chevron-down::before{content:\"\\e856\"}.icon.tet-clipboard{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-clipboard::before{content:\"\\e86a\"}.icon.tet-info{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-info::before{content:\"\\e81d\"}.icon.tet-done{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-done::before{content:\"\\e867\"}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:400;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Medium.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Medium.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:500;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Medium.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Medium.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:600;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Semibold.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Semibold.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:700;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Bold.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Bold.woff\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:400;font-display:swap;src:url(\"assets/fonts/Inter-Regular.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-Regular.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:500;font-display:swap;src:url(\"assets/fonts/Inter-Medium.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-Medium.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:600;font-display:swap;src:url(\"assets/fonts/Inter-SemiBold.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-SemiBold.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:400;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Medium.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Medium.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:500;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Medium.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Medium.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:600;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Semibold.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Semibold.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:700;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Bold.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Bold.woff\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:400;font-display:swap;src:url(\"assets/fonts/Inter-Regular.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-Regular.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:500;font-display:swap;src:url(\"assets/fonts/Inter-Medium.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-Medium.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:600;font-display:swap;src:url(\"assets/fonts/Inter-SemiBold.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-SemiBold.woff?v=3.19\") format(\"woff\")}:host{--font-family-fallback:Gilroy, Arial, sans-serif;--font-family-headline:Gilroy;--font-family-content:Inter, var(--font-family-fallback);font-family:var(--font-family-content)}:host{--card-list-content-width:100%;--card-list-content-height:100%;--card-list-horizontal-margin:10rem;--card-list-tablet-horizontal-margin:2rem;--card-list-mobile-horizontal-margin:1rem;--card-list-vertical-padding:0;--card-list-control-height:12.5rem;--card-list-control-button-height:3.25rem;--card-list-control-button-width:3.25rem;--card-list-control-horizontal-margin:5rem;--card-list-control-icon-color:var(--tc-button-icon-primary);--card-list-scroll-margin:3.5rem auto 0 auto;--card-list-scroll-background-color:var(--tc-border-quaternary);--card-list-scroll-thumb-background-color:var(--tc-border-secondary);--card-list-gap:1rem}.hidden{display:none}.tet-card-list{display:inline-flex;flex-direction:row;flex-wrap:nowrap;align-items:center;height:var(--card-list-content-height);gap:var(--card-list-gap);overflow:visible;position:relative;box-sizing:border-box;margin:0 auto;-ms-overflow-style:none;scrollbar-width:none}.tet-card-list__container{display:flex;flex-direction:column;align-items:center;position:relative;-webkit-overflow-scrolling:touch}.tet-card-list__container.dark{--card-list-control-icon-color:var(--tc-button-icon-primary-dark);--card-list-scroll-background-color:var(--tc-border-quaternary-dark);--card-list-scroll-thumb-background-color:var(--tc-border-secondary-dark)}.tet-card-list__scroll-container{width:var(--card-list-content-width);height:var(--card-list-content-height);overflow:hidden;display:block;position:relative}.tet-card-list ::slotted(:first-child){margin-left:var(--card-list-mobile-horizontal-margin) !important}.tet-card-list ::slotted(:last-child){margin-right:var(--card-list-mobile-horizontal-margin) !important}.tet-card-list::-webkit-scrollbar{display:none}.tet-card-list__scroll{position:relative;display:flex;height:0.25rem;background-color:var(--card-list-scroll-background-color);width:70%;margin:var(--card-list-scroll-margin);border-radius:0.25rem}.tet-card-list__scroll--thumb{background-color:var(--card-list-scroll-thumb-background-color);border-radius:0.25rem;display:block;height:100%;left:0;position:absolute}.tet-card-list--no-scroll{overflow-x:hidden}.tet-card-list--no-scroll .tet-card-list__scroll{display:none}.tet-card-list__control{--button-padding:0;cursor:pointer;align-items:center;color:rgb(10, 11, 13);display:none;justify-content:center;position:absolute;top:calc(var(--card-list-control-height) / 2 - var(--card-list-control-button-height) / 2);user-select:none;z-index:2}.tet-card-list__control--left{left:var(--card-list-control-horizontal-margin)}.tet-card-list__control--right{right:var(--card-list-control-horizontal-margin)}.tet-card-list__control__icon{--icon-size:1.25rem;--icon-color:var(--card-list-control-icon-color);display:flex;align-items:center;justify-content:center;border-radius:50%;height:var(--card-list-control-button-height);width:var(--card-list-control-button-width)}.tet-card-list--hidden,.tet-card-list__control--hidden{display:none;opacity:0;visibility:hidden}.tet-card-list--dragging{user-select:none;cursor:grabbing}.tet-card-list--dragging *{pointer-events:none}@media all and (min-width: 22.5rem){.tet-card-list__scroll{width:50%}.tet-card-list ::slotted(:first-child){margin-left:var(--card-list-tablet-horizontal-margin) !important}.tet-card-list ::slotted(:last-child){margin-right:var(--card-list-tablet-horizontal-margin) !important}}@media all and (min-width: 48rem){.tet-card-list__scroll{width:min(40%, var(--card-list-content-width) * 0.325)}.tet-card-list__control{display:flex}.tet-card-list ::slotted(:first-child){margin-left:var(--card-list-horizontal-margin) !important}.tet-card-list ::slotted(:last-child){margin-right:var(--card-list-horizontal-margin) !important}}";
@@ -376,340 +388,6 @@ const TetCardList = class {
         registerInstance(this, hostRef);
         this.cardScroll = createEvent(this, "cardScroll", 7);
         this.contentScrollEnd = createEvent(this, "contentScrollEnd", 7);
-        /**
-         * The arrays containing cloned content elements.
-         */
-        this.virtualScrollPrependClones = [];
-        this.virtualScrollAppendClones = [];
-        /**
-         * Stores the content scroll and pointer positions for use with pointer events.
-         */
-        this.scrollDetails = null;
-        /**
-         * Stores the `element` left and width values to limit html reflows.
-         */
-        this.dimensions = { element: { left: 0, width: 0 } };
-        /**
-         * The css gap value set between elements.
-         */
-        this.elementGap = 16;
-        /**
-         * Determines if the content is currently being scrolled.
-         */
-        this.isScrolling = false;
-        /**
-         * Scrolls the element to the horizontal center of the viewport.
-         * @param querySelector The query selector of the element that will be scrolled to the center of view.
-         * @param isSmooth determines whether the scroll should be animated.
-         * @param isQuiet determines wheter scroll events should be triggered.
-         */
-        this.scrollToElementCenter = async (querySelector, isSmooth = true, isQuiet = false) => {
-            let childNodes = Array.from(this.element.children);
-            if (this.withVirtualScroll) {
-                childNodes = Array.from(this.element.querySelectorAll('[data-id]'));
-            }
-            const elementToCenter = childNodes.find(childNode => childNode.matches(querySelector));
-            if (elementToCenter === null || elementToCenter === undefined) {
-                return;
-            }
-            await this.inertialScroll.scrollToElement(elementToCenter, isSmooth, isQuiet);
-            if (this.withOverflowOpacity) {
-                this.updateChildElementOverflowOpacity();
-            }
-        };
-        /**
-         * Calculates the width of the scroll thumb in percentage relative to the content. Sets up the
-         * width parameters of the scroll thumb.
-         */
-        this.setupScrollbar = () => {
-            const { currentScroll } = this.inertialScroll;
-            this.scrollThumbWidth =
-                (this.scrollContainerRef.clientWidth / (currentScroll.scrollWidth + this.scrollContainerRef.clientWidth)) * 100;
-            if (this.scrollbarRef === undefined) {
-                return;
-            }
-            this.scrollbarRef.style.width = `${this.scrollThumbWidth}%`;
-            this.scrollbarRef.style.left = `${this.currentScrollbarScroll}%`;
-        };
-        /**
-         * Prevents the event if scrolling is disabled.
-         * @param event Event
-         */
-        this.handleDisableScroll = (event) => {
-            if (!this.disableScroll) {
-                return;
-            }
-            event.preventDefault();
-        };
-        /**
-         * The scroll event handler. Updates the card item classes as they are scrolled out of view.
-         * Updates the control element classes as the content scroll reaches either end of the scroll.
-         * Updates the position of the visual scrollbar thumb element.
-         */
-        this.handleScroll = () => {
-            this.cardScroll.emit({
-                totalAvailableScrollWidth: this.scrollDetails.scrollWidth,
-                currentScroll: this.scrollDetails.scrollLeft,
-            });
-            const elementChildren = Array.from(this.element.children);
-            if (this.withActiveElement) {
-                const activeClone = elementChildren.find(element => element.attributes['data-clone-id'] && element.classList.contains(this.activeElementClass));
-                if (activeClone !== undefined) {
-                    activeClone.classList.remove(this.activeElementClass);
-                    const cloneOffset = activeClone.getBoundingClientRect().left;
-                    const activeOriginal = elementChildren.find(element => element.classList.contains(this.activeElementClass));
-                    if (activeOriginal !== undefined) {
-                        const originalOffset = activeOriginal.getBoundingClientRect().left;
-                        const scrollDelta = cloneOffset - originalOffset;
-                        this.inertialScroll.scrollTo({ left: this.scrollDetails.scrollLeft - scrollDelta }, true);
-                        this.updateChildElementOverflowOpacity();
-                    }
-                }
-                this.setActiveCenteredElement();
-            }
-            if (this.withVirtualScroll) {
-                this.moveElements();
-                this.updateChildElementOverflowOpacity();
-            }
-        };
-        /**
-         * Handles toggling of the `activeElementClass` on elements during pointer drag events.
-         */
-        this.setActiveCenteredElement = () => {
-            let isScrollRight = this.scrollDetails.scrollSpeed > 0;
-            let isScrollLeft = this.scrollDetails.scrollSpeed < 0;
-            const elementChildren = Array.from(this.element.children);
-            const elementPositions = elementChildren.map(child => child.getBoundingClientRect());
-            const elementRect = this.element.getBoundingClientRect();
-            /** Determine the center point of the bounding element */
-            const centerPoint = elementRect.width / 2 + elementRect.left;
-            /** Determine the index of the child card overlapping with the `centerPoint` */
-            let centeredElementIndex = elementPositions.findIndex(element => element.left <= centerPoint && element.left + element.width >= centerPoint);
-            /** Set index to the first element in case list is scrolled to the start */
-            if (centeredElementIndex === 1 && isScrollLeft && this.scrollDetails.scrollLeft === 0) {
-                centeredElementIndex = 0;
-            }
-            /** Set index to the last element in case list is scrolled to the end */
-            if (centeredElementIndex === elementPositions.length - 2 &&
-                isScrollRight &&
-                this.scrollDetails.scrollLeft + this.scrollContainerRef.getBoundingClientRect().width >=
-                    this.scrollDetails.scrollWidth) {
-                centeredElementIndex = elementPositions.length - 1;
-            }
-            /** Calculate the index of the next element in case `centerPoint` is in between two elements */
-            if (centeredElementIndex === -1) {
-                if (isScrollRight) {
-                    centeredElementIndex = elementPositions.findIndex(element => element.left - this.elementGap <= centerPoint && element.left + element.width >= centerPoint);
-                }
-                if (isScrollLeft) {
-                    centeredElementIndex = elementPositions.findIndex(element => element.left <= centerPoint && element.left + element.width + this.elementGap >= centerPoint);
-                }
-            }
-            const currentActiveElements = elementChildren.filter(element => element.classList.contains(this.activeElementClass));
-            currentActiveElements.forEach(element => element.classList.remove(this.activeElementClass));
-            const nextElement = elementChildren[centeredElementIndex];
-            if (this.withVirtualScroll && (nextElement === null || nextElement === void 0 ? void 0 : nextElement.hasAttribute('data-clone-id'))) {
-                const nextOriginalElement = elementChildren.find(element => { var _a; return ((_a = element.attributes['data-id']) === null || _a === void 0 ? void 0 : _a.value) === nextElement.getAttribute('data-clone-id'); });
-                nextOriginalElement.classList.add(this.activeElementClass);
-            }
-            if (nextElement !== undefined) {
-                nextElement.classList.add(this.activeElementClass);
-            }
-            this.updateControlVisibility();
-        };
-        /**
-         * Shifts the elements and scroll position.
-         * Gets the first and the last of the original elements and shifts both the original
-         * and the cloned elements depending on the scroll direction.
-         * Updates the currently set scroll values to hide the shift of the elements.
-         */
-        this.moveElements = () => {
-            var _a, _b;
-            if (!this.withVirtualScroll) {
-                return;
-            }
-            const { width, left } = this.dimensions.element;
-            const firstOriginalElement = this.getFirstOriginal();
-            const lastOriginalElement = this.getLastOriginal();
-            const firstOriginalRect = firstOriginalElement.getBoundingClientRect();
-            const lastOriginalRect = lastOriginalElement.getBoundingClientRect();
-            const lastOriginalRight = lastOriginalRect.right - left;
-            const isLastOriginalInViewport = lastOriginalRight < width;
-            if (isLastOriginalInViewport && ((_a = this.scrollDetails) === null || _a === void 0 ? void 0 : _a.scrollSpeed) < 0) {
-                const movedElementDataId = parseInt(firstOriginalElement.getAttribute('data-id'), 10);
-                const positionDelta = firstOriginalRect.width + this.elementGap;
-                const secondOriginalElement = firstOriginalElement.nextElementSibling;
-                this.inertialScroll.scrollBy({ left: -positionDelta }, true);
-                lastOriginalElement.insertAdjacentElement('afterend', firstOriginalElement);
-                secondOriginalElement.insertAdjacentElement('beforebegin', this.virtualScrollPrependClones[movedElementDataId]);
-                this.element.insertAdjacentElement('beforeend', this.virtualScrollAppendClones[movedElementDataId]);
-            }
-            const firstOriginalLeft = firstOriginalRect.left - left;
-            const isFirstOriginalInViewport = firstOriginalLeft > 0;
-            if (isFirstOriginalInViewport && ((_b = this.scrollDetails) === null || _b === void 0 ? void 0 : _b.scrollSpeed) > 0) {
-                const secondToLastElement = lastOriginalElement.previousElementSibling;
-                const positionDelta = lastOriginalRect.width + this.elementGap;
-                const movedElementDataId = parseInt(lastOriginalElement.getAttribute('data-id'), 10);
-                this.inertialScroll.scrollBy({ left: positionDelta }, true);
-                firstOriginalElement.insertAdjacentElement('beforebegin', lastOriginalElement);
-                secondToLastElement.insertAdjacentElement('afterend', this.virtualScrollAppendClones[movedElementDataId]);
-                this.element.insertAdjacentElement('afterbegin', this.virtualScrollPrependClones[movedElementDataId]);
-            }
-        };
-        /**
-         * Stops event propagation bubbling to the `contentElement`
-         * @param event PointerEvent
-         */
-        this.handleControlPointerDown = (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            event.stopImmediatePropagation();
-        };
-        /**
-         * Handles the left control click.
-         */
-        this.handleLeftControl = async () => {
-            if (this.isScrolling) {
-                return;
-            }
-            this.isScrolling = true;
-            if (this.withActiveElement) {
-                const currentActive = this.element.querySelector(`.${this.activeElementClass}`);
-                let previousElement = currentActive.previousElementSibling;
-                if (previousElement === null) {
-                    return;
-                }
-                currentActive.classList.remove(this.activeElementClass);
-                if (previousElement.hasAttribute('data-clone-id')) {
-                    this.scrollDetails.scrollSpeed = 1;
-                    this.moveElements();
-                    previousElement = currentActive.previousElementSibling;
-                    if (this.withOverflowOpacity) {
-                        this.updateChildElementOverflowOpacity();
-                    }
-                }
-                previousElement.classList.add(this.activeElementClass);
-                await this.scrollToElementCenter(`.${this.activeElementClass}`);
-                this.moveElements();
-                this.updateControlVisibility();
-            }
-            else if (this.scrollFullWidth) {
-                const scrollRect = this.scrollContainerRef.getBoundingClientRect();
-                const scrollWidth = scrollRect.width;
-                const scrollStart = scrollRect.left;
-                const firstElement = Array.from(this.element.children).find(child => {
-                    const childRect = child.getBoundingClientRect();
-                    return childRect.left < scrollStart && childRect.right + this.elementGap > scrollStart;
-                });
-                if (firstElement !== undefined) {
-                    const firstElementRight = firstElement.getBoundingClientRect().right;
-                    const scrollEnd = scrollRect.left + scrollWidth;
-                    await this.inertialScroll.scrollBy({ left: -(scrollEnd - firstElementRight), behavior: 'smooth' });
-                }
-                else {
-                    await this.inertialScroll.scrollBy({ left: -scrollWidth, behavior: 'smooth' });
-                }
-            }
-            else {
-                await this.inertialScroll.scrollBy({ left: -this.controlScrollAmount, behavior: 'smooth' });
-            }
-            this.isScrolling = false;
-        };
-        /**
-         * Handles the right control click.
-         */
-        this.handleRightControl = async () => {
-            if (this.isScrolling) {
-                return;
-            }
-            this.isScrolling = true;
-            if (this.withActiveElement) {
-                const currentActive = this.element.querySelector(`.${this.activeElementClass}`);
-                let nextElement = currentActive.nextElementSibling;
-                if (nextElement === null) {
-                    return;
-                }
-                currentActive.classList.remove(this.activeElementClass);
-                if (nextElement.hasAttribute('data-clone-id')) {
-                    this.scrollDetails.scrollSpeed = -1;
-                    this.moveElements();
-                    nextElement = currentActive.nextElementSibling;
-                    if (this.withOverflowOpacity) {
-                        this.updateChildElementOverflowOpacity();
-                    }
-                }
-                nextElement.classList.add(this.activeElementClass);
-                await this.scrollToElementCenter(`.${this.activeElementClass}`);
-                this.moveElements();
-                this.updateControlVisibility();
-            }
-            else if (this.scrollFullWidth) {
-                const scrollRect = this.scrollContainerRef.getBoundingClientRect();
-                const scrollWidth = scrollRect.width;
-                const scrollEnd = scrollWidth + scrollRect.left;
-                const lastElement = Array.from(this.element.children).find(child => {
-                    const childRect = child.getBoundingClientRect();
-                    return childRect.left - this.elementGap < scrollEnd && childRect.right > scrollEnd;
-                });
-                if (lastElement !== undefined) {
-                    const lastElementLeft = lastElement.getBoundingClientRect().left;
-                    const scrollStart = scrollRect.left;
-                    await this.inertialScroll.scrollBy({ left: lastElementLeft - scrollStart, behavior: 'smooth' });
-                }
-                else {
-                    await this.inertialScroll.scrollBy({ left: scrollWidth, behavior: 'smooth' });
-                }
-            }
-            else {
-                await this.inertialScroll.scrollBy({ left: this.controlScrollAmount, behavior: 'smooth' });
-            }
-            this.isScrolling = false;
-        };
-        /**
-         * Handles the keyup event on the right control.
-         * If the key is "Enter" or "Space", will trigger navigation to the next card.
-         * @param e - The keyboard event object.
-         */
-        this.handleRightControlKeyUp = (e) => {
-            if (e.key === ' ' || e.key === 'Enter') {
-                this.handleRightControl();
-            }
-        };
-        /**
-         * Handles the keyup event on the left control.
-         * If the key is "Enter" or "Space", will trigger navigation to the previous card.
-         * @param e - The keyboard event object.
-         */
-        this.handleLeftControlKeyUp = (e) => {
-            if (e.key === ' ' || e.key === 'Enter') {
-                this.handleLeftControl();
-            }
-        };
-        /**
-         * Updates the visibility of the control element.
-         */
-        this.updateControlVisibility = (scroll = this.scrollDetails) => {
-            let controlVisibility = {
-                left: false,
-                right: false,
-            };
-            if (this.withControls) {
-                if (scroll === null) {
-                    controlVisibility = {
-                        left: false,
-                        right: true,
-                    };
-                }
-                else {
-                    controlVisibility.left = scroll.scrollLeft - 1 <= 0 ? false : true;
-                    controlVisibility.right = scroll.scrollLeft >= scroll.scrollWidth ? false : true;
-                }
-            }
-            // Only update if there are changes.
-            if (JSON.stringify(controlVisibility) !== JSON.stringify(this.controlVisibility)) {
-                this.controlVisibility = controlVisibility;
-            }
-        };
         this.controlVisibility = { left: true, right: true };
         this.scrollThumbWidth = 0;
         this.isSmallContainer = false;
@@ -730,6 +408,45 @@ const TetCardList = class {
         this.iconPrev = '';
         this.iconNext = '';
     }
+    inertialScroll;
+    get element() { return getElement(this); }
+    /**
+     * The DOM element of the scrollable content container.
+     */
+    scrollContainerRef;
+    /**
+     * The DOM element of the scroll thumb.
+     */
+    scrollbarRef;
+    /**
+     * The arrays containing cloned content elements.
+     */
+    virtualScrollPrependClones = [];
+    virtualScrollAppendClones = [];
+    /**
+     * Stores the content scroll and pointer positions for use with pointer events.
+     */
+    scrollDetails = null;
+    /**
+     * Stores the `element` left and width values to limit html reflows.
+     */
+    dimensions = { element: { left: 0, width: 0 } };
+    /**
+     * The css gap value set between elements.
+     */
+    elementGap = 16;
+    /**
+     * Determines if the content is currently being scrolled.
+     */
+    isScrolling = false;
+    /**
+     * The event that is emitted when the component is scrolled.
+     */
+    cardScroll;
+    /**
+     * The event that is emitted when the component is scrolled.
+     */
+    contentScrollEnd;
     /**
      * Adds and removes event pointer event handles to the `element` on `withMouseDrag` change.
      * @param withMouseDrag boolean
@@ -788,6 +505,26 @@ const TetCardList = class {
     async scrollListToElementCenter(querySelector, isQuiet = false) {
         await this.scrollToElementCenter(querySelector, true, isQuiet);
     }
+    /**
+     * Scrolls the element to the horizontal center of the viewport.
+     * @param querySelector The query selector of the element that will be scrolled to the center of view.
+     * @param isSmooth determines whether the scroll should be animated.
+     * @param isQuiet determines wheter scroll events should be triggered.
+     */
+    scrollToElementCenter = async (querySelector, isSmooth = true, isQuiet = false) => {
+        let childNodes = Array.from(this.element.children);
+        if (this.withVirtualScroll) {
+            childNodes = Array.from(this.element.querySelectorAll('[data-id]'));
+        }
+        const elementToCenter = childNodes.find(childNode => childNode.matches(querySelector));
+        if (elementToCenter === null || elementToCenter === undefined) {
+            return;
+        }
+        await this.inertialScroll.scrollToElement(elementToCenter, isSmooth, isQuiet);
+        if (this.withOverflowOpacity) {
+            this.updateChildElementOverflowOpacity();
+        }
+    };
     /**
      * The lifecycle method that called once just after the component is fully loaded and the first
      * `render()` occurs. Attaches the event listeners to the root element of the component and
@@ -940,11 +677,148 @@ const TetCardList = class {
      * Removes the event listeners.
      */
     disconnectedCallback() {
-        var _a, _b;
         this.inertialScroll.detach();
-        (_a = this.scrollContainerRef) === null || _a === void 0 ? void 0 : _a.removeEventListener('mousewheel', this.handleDisableScroll);
-        (_b = this.scrollContainerRef) === null || _b === void 0 ? void 0 : _b.removeEventListener('touchmove', this.handleDisableScroll);
+        this.scrollContainerRef?.removeEventListener('mousewheel', this.handleDisableScroll);
+        this.scrollContainerRef?.removeEventListener('touchmove', this.handleDisableScroll);
     }
+    /**
+     * Calculates the width of the scroll thumb in percentage relative to the content. Sets up the
+     * width parameters of the scroll thumb.
+     */
+    setupScrollbar = () => {
+        const { currentScroll } = this.inertialScroll;
+        this.scrollThumbWidth =
+            (this.scrollContainerRef.clientWidth / (currentScroll.scrollWidth + this.scrollContainerRef.clientWidth)) * 100;
+        if (this.scrollbarRef === undefined) {
+            return;
+        }
+        this.scrollbarRef.style.width = `${this.scrollThumbWidth}%`;
+        this.scrollbarRef.style.left = `${this.currentScrollbarScroll}%`;
+    };
+    /**
+     * Prevents the event if scrolling is disabled.
+     * @param event Event
+     */
+    handleDisableScroll = (event) => {
+        if (!this.disableScroll) {
+            return;
+        }
+        event.preventDefault();
+    };
+    /**
+     * The scroll event handler. Updates the card item classes as they are scrolled out of view.
+     * Updates the control element classes as the content scroll reaches either end of the scroll.
+     * Updates the position of the visual scrollbar thumb element.
+     */
+    handleScroll = () => {
+        this.cardScroll.emit({
+            totalAvailableScrollWidth: this.scrollDetails.scrollWidth,
+            currentScroll: this.scrollDetails.scrollLeft,
+        });
+        const elementChildren = Array.from(this.element.children);
+        if (this.withActiveElement) {
+            const activeClone = elementChildren.find(element => element.attributes['data-clone-id'] && element.classList.contains(this.activeElementClass));
+            if (activeClone !== undefined) {
+                activeClone.classList.remove(this.activeElementClass);
+                const cloneOffset = activeClone.getBoundingClientRect().left;
+                const activeOriginal = elementChildren.find(element => element.classList.contains(this.activeElementClass));
+                if (activeOriginal !== undefined) {
+                    const originalOffset = activeOriginal.getBoundingClientRect().left;
+                    const scrollDelta = cloneOffset - originalOffset;
+                    this.inertialScroll.scrollTo({ left: this.scrollDetails.scrollLeft - scrollDelta }, true);
+                    this.updateChildElementOverflowOpacity();
+                }
+            }
+            this.setActiveCenteredElement();
+        }
+        if (this.withVirtualScroll) {
+            this.moveElements();
+            this.updateChildElementOverflowOpacity();
+        }
+    };
+    /**
+     * Handles toggling of the `activeElementClass` on elements during pointer drag events.
+     */
+    setActiveCenteredElement = () => {
+        let isScrollRight = this.scrollDetails.scrollSpeed > 0;
+        let isScrollLeft = this.scrollDetails.scrollSpeed < 0;
+        const elementChildren = Array.from(this.element.children);
+        const elementPositions = elementChildren.map(child => child.getBoundingClientRect());
+        const elementRect = this.element.getBoundingClientRect();
+        /** Determine the center point of the bounding element */
+        const centerPoint = elementRect.width / 2 + elementRect.left;
+        /** Determine the index of the child card overlapping with the `centerPoint` */
+        let centeredElementIndex = elementPositions.findIndex(element => element.left <= centerPoint && element.left + element.width >= centerPoint);
+        /** Set index to the first element in case list is scrolled to the start */
+        if (centeredElementIndex === 1 && isScrollLeft && this.scrollDetails.scrollLeft === 0) {
+            centeredElementIndex = 0;
+        }
+        /** Set index to the last element in case list is scrolled to the end */
+        if (centeredElementIndex === elementPositions.length - 2 &&
+            isScrollRight &&
+            this.scrollDetails.scrollLeft + this.scrollContainerRef.getBoundingClientRect().width >=
+                this.scrollDetails.scrollWidth) {
+            centeredElementIndex = elementPositions.length - 1;
+        }
+        /** Calculate the index of the next element in case `centerPoint` is in between two elements */
+        if (centeredElementIndex === -1) {
+            if (isScrollRight) {
+                centeredElementIndex = elementPositions.findIndex(element => element.left - this.elementGap <= centerPoint && element.left + element.width >= centerPoint);
+            }
+            if (isScrollLeft) {
+                centeredElementIndex = elementPositions.findIndex(element => element.left <= centerPoint && element.left + element.width + this.elementGap >= centerPoint);
+            }
+        }
+        const currentActiveElements = elementChildren.filter(element => element.classList.contains(this.activeElementClass));
+        currentActiveElements.forEach(element => element.classList.remove(this.activeElementClass));
+        const nextElement = elementChildren[centeredElementIndex];
+        if (this.withVirtualScroll && nextElement?.hasAttribute('data-clone-id')) {
+            const nextOriginalElement = elementChildren.find(element => element.attributes['data-id']?.value === nextElement.getAttribute('data-clone-id'));
+            nextOriginalElement.classList.add(this.activeElementClass);
+        }
+        if (nextElement !== undefined) {
+            nextElement.classList.add(this.activeElementClass);
+        }
+        this.updateControlVisibility();
+    };
+    /**
+     * Shifts the elements and scroll position.
+     * Gets the first and the last of the original elements and shifts both the original
+     * and the cloned elements depending on the scroll direction.
+     * Updates the currently set scroll values to hide the shift of the elements.
+     */
+    moveElements = () => {
+        if (!this.withVirtualScroll) {
+            return;
+        }
+        const { width, left } = this.dimensions.element;
+        const firstOriginalElement = this.getFirstOriginal();
+        const lastOriginalElement = this.getLastOriginal();
+        const firstOriginalRect = firstOriginalElement.getBoundingClientRect();
+        const lastOriginalRect = lastOriginalElement.getBoundingClientRect();
+        const lastOriginalRight = lastOriginalRect.right - left;
+        const isLastOriginalInViewport = lastOriginalRight < width;
+        if (isLastOriginalInViewport && this.scrollDetails?.scrollSpeed < 0) {
+            const movedElementDataId = parseInt(firstOriginalElement.getAttribute('data-id'), 10);
+            const positionDelta = firstOriginalRect.width + this.elementGap;
+            const secondOriginalElement = firstOriginalElement.nextElementSibling;
+            this.inertialScroll.scrollBy({ left: -positionDelta }, true);
+            lastOriginalElement.insertAdjacentElement('afterend', firstOriginalElement);
+            secondOriginalElement.insertAdjacentElement('beforebegin', this.virtualScrollPrependClones[movedElementDataId]);
+            this.element.insertAdjacentElement('beforeend', this.virtualScrollAppendClones[movedElementDataId]);
+        }
+        const firstOriginalLeft = firstOriginalRect.left - left;
+        const isFirstOriginalInViewport = firstOriginalLeft > 0;
+        if (isFirstOriginalInViewport && this.scrollDetails?.scrollSpeed > 0) {
+            const secondToLastElement = lastOriginalElement.previousElementSibling;
+            const positionDelta = lastOriginalRect.width + this.elementGap;
+            const movedElementDataId = parseInt(lastOriginalElement.getAttribute('data-id'), 10);
+            this.inertialScroll.scrollBy({ left: positionDelta }, true);
+            firstOriginalElement.insertAdjacentElement('beforebegin', lastOriginalElement);
+            secondToLastElement.insertAdjacentElement('afterend', this.virtualScrollAppendClones[movedElementDataId]);
+            this.element.insertAdjacentElement('afterbegin', this.virtualScrollPrependClones[movedElementDataId]);
+        }
+    };
     /**
      * Returns the current scroll in percentage.
      * @returns number representing the current scroll value in percent.
@@ -969,6 +843,160 @@ const TetCardList = class {
         }
         return scrollThumbPosition;
     }
+    /**
+     * Stops event propagation bubbling to the `contentElement`
+     * @param event PointerEvent
+     */
+    handleControlPointerDown = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+    };
+    /**
+     * Handles the left control click.
+     */
+    handleLeftControl = async () => {
+        if (this.isScrolling) {
+            return;
+        }
+        this.isScrolling = true;
+        if (this.withActiveElement) {
+            const currentActive = this.element.querySelector(`.${this.activeElementClass}`);
+            let previousElement = currentActive.previousElementSibling;
+            if (previousElement === null) {
+                return;
+            }
+            currentActive.classList.remove(this.activeElementClass);
+            if (previousElement.hasAttribute('data-clone-id')) {
+                this.scrollDetails.scrollSpeed = 1;
+                this.moveElements();
+                previousElement = currentActive.previousElementSibling;
+                if (this.withOverflowOpacity) {
+                    this.updateChildElementOverflowOpacity();
+                }
+            }
+            previousElement.classList.add(this.activeElementClass);
+            await this.scrollToElementCenter(`.${this.activeElementClass}`);
+            this.moveElements();
+            this.updateControlVisibility();
+        }
+        else if (this.scrollFullWidth) {
+            const scrollRect = this.scrollContainerRef.getBoundingClientRect();
+            const scrollWidth = scrollRect.width;
+            const scrollStart = scrollRect.left;
+            const firstElement = Array.from(this.element.children).find(child => {
+                const childRect = child.getBoundingClientRect();
+                return childRect.left < scrollStart && childRect.right + this.elementGap > scrollStart;
+            });
+            if (firstElement !== undefined) {
+                const firstElementRight = firstElement.getBoundingClientRect().right;
+                const scrollEnd = scrollRect.left + scrollWidth;
+                await this.inertialScroll.scrollBy({ left: -(scrollEnd - firstElementRight), behavior: 'smooth' });
+            }
+            else {
+                await this.inertialScroll.scrollBy({ left: -scrollWidth, behavior: 'smooth' });
+            }
+        }
+        else {
+            await this.inertialScroll.scrollBy({ left: -this.controlScrollAmount, behavior: 'smooth' });
+        }
+        this.isScrolling = false;
+    };
+    /**
+     * Handles the right control click.
+     */
+    handleRightControl = async () => {
+        if (this.isScrolling) {
+            return;
+        }
+        this.isScrolling = true;
+        if (this.withActiveElement) {
+            const currentActive = this.element.querySelector(`.${this.activeElementClass}`);
+            let nextElement = currentActive.nextElementSibling;
+            if (nextElement === null) {
+                return;
+            }
+            currentActive.classList.remove(this.activeElementClass);
+            if (nextElement.hasAttribute('data-clone-id')) {
+                this.scrollDetails.scrollSpeed = -1;
+                this.moveElements();
+                nextElement = currentActive.nextElementSibling;
+                if (this.withOverflowOpacity) {
+                    this.updateChildElementOverflowOpacity();
+                }
+            }
+            nextElement.classList.add(this.activeElementClass);
+            await this.scrollToElementCenter(`.${this.activeElementClass}`);
+            this.moveElements();
+            this.updateControlVisibility();
+        }
+        else if (this.scrollFullWidth) {
+            const scrollRect = this.scrollContainerRef.getBoundingClientRect();
+            const scrollWidth = scrollRect.width;
+            const scrollEnd = scrollWidth + scrollRect.left;
+            const lastElement = Array.from(this.element.children).find(child => {
+                const childRect = child.getBoundingClientRect();
+                return childRect.left - this.elementGap < scrollEnd && childRect.right > scrollEnd;
+            });
+            if (lastElement !== undefined) {
+                const lastElementLeft = lastElement.getBoundingClientRect().left;
+                const scrollStart = scrollRect.left;
+                await this.inertialScroll.scrollBy({ left: lastElementLeft - scrollStart, behavior: 'smooth' });
+            }
+            else {
+                await this.inertialScroll.scrollBy({ left: scrollWidth, behavior: 'smooth' });
+            }
+        }
+        else {
+            await this.inertialScroll.scrollBy({ left: this.controlScrollAmount, behavior: 'smooth' });
+        }
+        this.isScrolling = false;
+    };
+    /**
+     * Handles the keyup event on the right control.
+     * If the key is "Enter" or "Space", will trigger navigation to the next card.
+     * @param e - The keyboard event object.
+     */
+    handleRightControlKeyUp = (e) => {
+        if (e.key === ' ' || e.key === 'Enter') {
+            this.handleRightControl();
+        }
+    };
+    /**
+     * Handles the keyup event on the left control.
+     * If the key is "Enter" or "Space", will trigger navigation to the previous card.
+     * @param e - The keyboard event object.
+     */
+    handleLeftControlKeyUp = (e) => {
+        if (e.key === ' ' || e.key === 'Enter') {
+            this.handleLeftControl();
+        }
+    };
+    /**
+     * Updates the visibility of the control element.
+     */
+    updateControlVisibility = (scroll = this.scrollDetails) => {
+        let controlVisibility = {
+            left: false,
+            right: false,
+        };
+        if (this.withControls) {
+            if (scroll === null) {
+                controlVisibility = {
+                    left: false,
+                    right: true,
+                };
+            }
+            else {
+                controlVisibility.left = scroll.scrollLeft - 1 <= 0 ? false : true;
+                controlVisibility.right = scroll.scrollLeft >= scroll.scrollWidth ? false : true;
+            }
+        }
+        // Only update if there are changes.
+        if (JSON.stringify(controlVisibility) !== JSON.stringify(this.controlVisibility)) {
+            this.controlVisibility = controlVisibility;
+        }
+    };
     /**
      * Adds or removes the transparency effect to the card items as they enter or leave the viewport.
      */
@@ -1028,7 +1056,6 @@ const TetCardList = class {
                 'tet-card-list__control--hidden': !this.controlVisibility.right,
             }, onPointerDown: this.handleControlPointerDown, onPointerUp: this.handleRightControl, onKeyUp: this.handleRightControlKeyUp }, h("tet-icon", { key: 'b19ee3803dd3fcf44a11816372555b6be84150f9', name: this.iconNext && this.iconNext !== '' ? this.iconNext : 'chevron-right', class: "tet-card-list__control__icon" })), h("div", { key: '9d93b130142f3675cb2d6436a84ff78df28c092a', class: { 'tet-card-list__scroll': true, 'tet-card-list--hidden': !this.withScrollbar } }, h("div", { key: 'b71a2c641265034396d4b0a350ba3aa57e8d7c49', class: "tet-card-list__scroll--thumb", ref: el => (this.scrollbarRef = el) })))));
     }
-    get element() { return getElement(this); }
     static get watchers() { return {
         "withMouseDrag": ["onWithMouseDragChange"],
         "disableScroll": ["onDisableScrollChange"],