@tet/tet-components 1.4.25-testing → 1.4.26-staging

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

@@ -6,30 +6,76 @@ export class TetCarousel {
         this.dotCount = 0;
         this.totalItems = 0;
         this.activeItem = 0;
-        this.theme = 'light';
         this.isDragging = false;
         this.dragOffset = 0;
+        this.isNudgeAnimating = false;
+        this.theme = 'light';
         this.showDots = true;
         this.showGradient = false;
         this.showButtons = true;
         this.transitionDuration = 500;
         this.swipeThreshold = 32;
-        this.transitionTiming = 'cubic-bezier(0.77,0,0.175,1)';
+        this.transitionTiming = 'ease-out';
         this.buttonIconLeft = 'arrow-left';
         this.buttonIconRight = 'arrow-right';
         this.maxDots = 8;
         this.label = undefined;
+        this.nudgeAnimationInterval = 0;
         this.language = 'lv';
     }
+    static NUDGE_DISTANCE_PX = 16;
+    static NUDGE_IDLE_THRESHOLD_MS = 1500;
+    static GRADIENT_VISIBILITY_THRESHOLD_PX = 1;
     draggedAnchor = null;
     dragMoved = false;
     dragPointerStartX = 0;
+    dragStartX = 0;
+    nudgeTimeoutId;
+    nudgeGradientRafId;
+    lastInteractionAt = 0;
     trackElement = null;
+    trackContentElement = null;
     container;
-    dragStartX = 0;
+    leftGradientRef;
+    rightGradientRef;
+    slotObserver;
     async onLanguageChange(language) {
         processTranslations('tet-components', language).then(() => forceUpdate(this));
     }
+    checkGradient() {
+        if (this.showGradient) {
+            const absOffset = Math.abs(this.getRealDragOffset());
+            const wrapperWidth = this.getViewportWidth();
+            const totalWidth = this.getSlotClientWidth();
+            const rightEdgeDistance = totalWidth - absOffset - wrapperWidth;
+            if (rightEdgeDistance >= 0) {
+                const rightEdge = rightEdgeDistance < TetCarousel.GRADIENT_VISIBILITY_THRESHOLD_PX;
+                if (absOffset < TetCarousel.GRADIENT_VISIBILITY_THRESHOLD_PX) {
+                    this.leftGradientRef.style.opacity = '0';
+                    this.rightGradientRef.style.opacity = '1';
+                }
+                else if (rightEdge) {
+                    this.leftGradientRef.style.opacity = '1';
+                    this.rightGradientRef.style.opacity = '0';
+                }
+                else {
+                    this.leftGradientRef.style.opacity = '1';
+                    this.rightGradientRef.style.opacity = '1';
+                }
+            }
+        }
+        else {
+            this.leftGradientRef.style.opacity = '0';
+            this.rightGradientRef.style.opacity = '0';
+        }
+    }
+    onNudgeAnimIntervalChange() {
+        this.syncNudgeSchedule();
+    }
+    onNudgeAnimationStateChange() {
+        this.syncNudgeGradientLoop();
+        this.checkGradient();
+    }
     componentWillLoad() {
         processTranslations('tet-components', this.language).then(() => forceUpdate(this));
     }
@@ -94,33 +140,20 @@ export class TetCarousel {
         }
         return count;
     }
-    leftGradientRef;
-    rightGradientRef;
-    checkGradient() {
-        if (this.showGradient) {
-            const absOffset = Math.abs(this.dragOffset);
-            const wrapperWidth = this.getViewportWidth();
-            const totalWidth = this.getSlotClientWidth();
-            const rightEdgeDistance = totalWidth - absOffset - wrapperWidth;
-            if (rightEdgeDistance >= 0) {
-                const rightEdge = rightEdgeDistance < 16;
-                if (absOffset < 16) {
-                    this.leftGradientRef.style.opacity = '0';
-                    this.rightGradientRef.style.opacity = '1';
-                }
-                else if (rightEdge) {
-                    this.leftGradientRef.style.opacity = '1';
-                    this.rightGradientRef.style.opacity = '0';
-                }
-                else {
-                    this.leftGradientRef.style.opacity = '1';
-                    this.rightGradientRef.style.opacity = '1';
-                }
-            }
+    getRealDragOffset() {
+        return this.dragOffset + this.getCurrentNudgeTranslateX();
+    }
+    getCurrentNudgeTranslateX() {
+        if (!this.isNudgeAnimating || !this.trackContentElement)
+            return 0;
+        const transform = getComputedStyle(this.trackContentElement).transform;
+        if (!transform || transform === 'none')
+            return 0;
+        try {
+            return new DOMMatrixReadOnly(transform).m41 || 0;
         }
-        else {
-            this.leftGradientRef.style.opacity = '0';
-            this.rightGradientRef.style.opacity = '0';
+        catch {
+            return 0;
         }
     }
     getDotCount() {
@@ -147,6 +180,7 @@ export class TetCarousel {
         }
     };
     handlePrev = () => {
+        this.registerUserInteraction();
         if (this.activeItem <= 0)
             return;
         this.afterLayout(() => {
@@ -161,6 +195,7 @@ export class TetCarousel {
         });
     };
     handleNext = () => {
+        this.registerUserInteraction();
         if (this.activeItem >= this.totalItems - 1)
             return;
         this.afterLayout(() => {
@@ -205,6 +240,7 @@ export class TetCarousel {
         return { item: assigned[0], index: 0 };
     };
     handleDotClick = (idx) => {
+        this.registerUserInteraction();
         this.activeDotIndex = idx;
         const totalWidth = this.getSlotClientWidth();
         let targetDragOffset = 0;
@@ -229,6 +265,7 @@ export class TetCarousel {
         }
     };
     onPointerDown = (e) => {
+        this.registerUserInteraction();
         e.preventDefault();
         e.stopPropagation();
         e.stopImmediatePropagation();
@@ -252,6 +289,7 @@ export class TetCarousel {
     onPointerMove = (e) => {
         if (!this.isDragging)
             return;
+        this.registerUserInteraction();
         // Only consider this a move (and prevent clicks) when movement exceeds a small threshold.
         const moveDistanceFromStart = Math.abs(e.screenX - this.dragPointerStartX);
         if (!this.dragMoved && moveDistanceFromStart > 5) {
@@ -275,6 +313,9 @@ export class TetCarousel {
         }
     };
     onPointerUp = (e) => {
+        if (!this.isDragging)
+            return;
+        this.registerUserInteraction();
         if (this.trackElement) {
             try {
                 this.trackElement.releasePointerCapture?.(e.pointerId);
@@ -331,8 +372,8 @@ export class TetCarousel {
         this.addAnchorFocusListeners();
         this.checkGradient();
         this.initSlotListeners();
+        this.syncNudgeSchedule();
     }
-    slotObserver;
     handleSlotChange() {
         this.getDotCount();
         this.checkGradient();
@@ -379,10 +420,95 @@ export class TetCarousel {
         });
         anchors.forEach((a, index) => {
             a.addEventListener('focus', () => {
+                this.registerUserInteraction();
                 this.moveToItem(a, index);
             });
         });
     }
+    startNudgeGradientLoop() {
+        if (this.nudgeGradientRafId)
+            return;
+        const step = () => {
+            this.checkGradient();
+            if (!this.isNudgeAnimating) {
+                this.nudgeGradientRafId = undefined;
+                return;
+            }
+            this.nudgeGradientRafId = requestAnimationFrame(step);
+        };
+        this.nudgeGradientRafId = requestAnimationFrame(step);
+    }
+    stopNudgeGradientLoop() {
+        if (!this.nudgeGradientRafId)
+            return;
+        cancelAnimationFrame(this.nudgeGradientRafId);
+        this.nudgeGradientRafId = undefined;
+    }
+    syncNudgeGradientLoop() {
+        if (this.isNudgeAnimating) {
+            this.startNudgeGradientLoop();
+        }
+        else {
+            this.stopNudgeGradientLoop();
+        }
+    }
+    registerUserInteraction() {
+        this.lastInteractionAt = Date.now();
+        if (this.stopNudgeAnimation()) {
+            this.scheduleNextNudge();
+        }
+    }
+    hasRecentInteraction() {
+        if (!this.lastInteractionAt)
+            return false;
+        return Date.now() - this.lastInteractionAt < TetCarousel.NUDGE_IDLE_THRESHOLD_MS;
+    }
+    isRightNavigationDisabled() {
+        return this.dotCount <= 1 || this.activeItem === this.totalItems - 1 || this.isLastViewport(-this.dragOffset);
+    }
+    isNudgeEligible() {
+        return !!this.trackElement && !this.isDragging && !this.isNudgeAnimating && !this.hasRecentInteraction() && !this.isRightNavigationDisabled();
+    }
+    scheduleNextNudge() {
+        if (this.nudgeAnimationInterval <= 0)
+            return;
+        this.clearNudgeTimeout();
+        this.nudgeTimeoutId = setTimeout(() => {
+            this.nudgeTimeoutId = undefined;
+            if (this.isNudgeEligible()) {
+                this.isNudgeAnimating = true;
+                return;
+            }
+            this.scheduleNextNudge();
+        }, this.nudgeAnimationInterval);
+    }
+    onNudgeAnimationEnd = (event) => {
+        if (event.animationName === 'tet-carousel-nudge') {
+            this.stopNudgeAnimation();
+            this.scheduleNextNudge();
+        }
+    };
+    stopNudgeAnimation() {
+        const wasAnimating = this.isNudgeAnimating;
+        if (wasAnimating) {
+            this.isNudgeAnimating = false;
+        }
+        return wasAnimating;
+    }
+    clearNudgeTimeout() {
+        if (this.nudgeTimeoutId) {
+            clearTimeout(this.nudgeTimeoutId);
+            this.nudgeTimeoutId = undefined;
+        }
+    }
+    stopNudgeSchedule() {
+        this.clearNudgeTimeout();
+        this.stopNudgeAnimation();
+    }
+    syncNudgeSchedule() {
+        this.stopNudgeSchedule();
+        this.scheduleNextNudge();
+    }
     clampDotIndex(dotIndex) {
         return Math.max(0, Math.min(dotIndex, this.dotCount - 1));
     }
@@ -414,6 +540,8 @@ export class TetCarousel {
         }
     }
     disconnectedCallback() {
+        this.stopNudgeSchedule();
+        this.stopNudgeGradientLoop();
         window.removeEventListener('resize', this.getDotCount.bind(this));
         const slot = this.container?.querySelector('slot');
         if (slot) {
@@ -427,28 +555,31 @@ export class TetCarousel {
         document.removeEventListener('pointerup', this.onPointerUp);
     }
     render() {
-        return (h(Host, { key: '55e4a6d72e8d743d4292bf7b13099ba8ec78568f' }, h("div", { key: '690baf14fa0111a48e986f9bb6b46f5e1316532f', class: { 'tet-carousel': true, [`${this.theme}`]: true }, ref: (el) => (this.container = el), part: "carousel" }, h("div", { key: '11c23723dddb8c2b5056d350f4cb38bbae992db5', class: "tet-carousel__container" }, h("div", { key: '16efc588fc8e3ae7e8f574ca9c181a88006a9604', class: "tet-carousel__gradient-left", ref: (el) => {
+        return (h(Host, { key: '3a7b181e4c8a1d19777a39ca77197199452e12b5' }, h("div", { key: 'f5830e6a8158c0ae5ffddd3cde678223b8e1b51a', class: { 'tet-carousel': true, [`${this.theme}`]: true }, ref: (el) => (this.container = el), part: "carousel" }, h("div", { key: '77031caf2348f1a06e757096192cdaa7cadaf3cc', class: "tet-carousel__container" }, h("div", { key: 'd514790264ef2b4a7faf66ef9932871525db053a', class: "tet-carousel__gradient-left", ref: (el) => {
                 this.leftGradientRef = el;
-            } }), h("div", { key: '21e25113788756b2a50ea2753112946d53e38acf', class: "tet-carousel__gradient-right", ref: (el) => {
+            } }), h("div", { key: 'ced61d4ccfcc5de268ba1da71bccff32ad8ec9f6', class: "tet-carousel__gradient-right", ref: (el) => {
                 this.rightGradientRef = el;
-            } }), h("div", { key: 'd73ce24292dd07dc8f1be3c332d806e2f786ecc4', class: `tet-carousel__track ${!this._showButtons() && !this._showDots() ? 'tet-carousel__track--center' : ''}`, ref: (el) => (this.trackElement = el), style: {
+            } }), h("div", { key: 'd76b0c1211165a3ee32adfec02cc109b7d296307', class: `tet-carousel__track ${!this._showButtons() && !this._showDots() ? 'tet-carousel__track--center' : ''}`, 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: '732eaa7e833adb12c9c6519f29f7070bbd991262' }))), !!this.label && h("div", { key: 'e214ba6831574ac4bc97305e4c6167ff339c6956', class: "tet-carousel__label" }, this.label), (this._showButtons() || this._showDots()) && (h("div", { key: '88282e7940bdb9208cbf681e9b9db4eafdc1231e', class: "tet-carousel__controls" }, this._showButtons() && (h("div", { key: '7824de4ac68ccfd30aff1386265ad3ebfa473517', class: "tet-carousel__buttons tet-carousel__buttons--mobile" }, h("tet-button", { key: 'b871785466eda2bfd76226748789cb9a82ecc3cd', class: "tet-carousel__btn", theme: this.theme === 'light' ? 'dark' : 'light', "icon-name": this.buttonIconLeft, "icon-mode": true, tabIndex: -1, onPointerDown: (e) => e.stopPropagation(), onPointerUp: () => {
+            }, onPointerDown: this.onPointerDown, onMouseMove: this.onPointerMove, onPointerUp: this.onPointerUp, onMouseLeave: this.onPointerUp }, h("div", { key: '874945906359997e34b179988f05b33d4300b4ae', class: {
+                'tet-carousel__track-content': true,
+                'tet-carousel__track-content--nudge': this.isNudgeAnimating
+            }, ref: (el) => (this.trackContentElement = el), style: {
+                '--tet-carousel-nudge-distance': `${TetCarousel.NUDGE_DISTANCE_PX}px`
+            }, onAnimationEnd: this.onNudgeAnimationEnd }, h("slot", { key: 'c714dd8072438aae03661de4d3dc689fb471e412' })))), !!this.label && h("div", { key: '28a233d7c5c7799b0dc505e83616da798deb970c', class: "tet-carousel__label" }, this.label), (this._showButtons() || this._showDots()) && (h("div", { key: 'e84c35e48571aa85420686a5e608135610103571', class: "tet-carousel__controls" }, this._showButtons() && (h("div", { key: '3222b45cfd3a37deb7a4a572d0523044be1eb1f5', class: "tet-carousel__buttons tet-carousel__buttons--mobile" }, h("tet-button", { key: 'a296a74cbbecb955d378de5e9ba04c6ef1a4a74f', theme: this.theme, type: "secondary", size: "medium", "icon-name": this.buttonIconLeft, "icon-mode": true, tabIndex: -1, onPointerDown: (e) => e.stopPropagation(), onPointerUp: () => {
                 if (!this.isDragging)
                     this.handlePrev();
-            }, "aria-label": t('components-carousel-previous'), disabled: this.dotCount <= 1 || this.activeItem === 0 }))), this._showDots() && (h("div", { key: '1956610f0ae3ef7caa86345eea1ea8d9c8cdb624', class: "tet-carousel__dots" }, Array.from({ length: this.dotCount }).map((_, idx) => (h("button", { type: "button", tabIndex: -1, class: `tet-carousel__dot${idx === this.activeDotIndex ? ' active' : ''}`, key: idx, onPointerDown: (e) => e.stopPropagation(), onPointerUp: () => {
+            }, "aria-label": t('components-carousel-previous'), disabled: this.dotCount <= 1 || this.activeItem === 0 }))), this._showDots() && (h("div", { key: 'e205c6a0354ab7a66985759dd95f6f0aa086bba0', class: "tet-carousel__dots" }, Array.from({ length: this.dotCount }).map((_, idx) => (h("button", { type: "button", tabIndex: -1, class: `tet-carousel__dot${idx === this.activeDotIndex ? ' active' : ''}`, key: idx, onPointerDown: (e) => e.stopPropagation(), onPointerUp: () => {
                 if (!this.isDragging)
                     this.handleDotClick(idx);
-            }, onClick: () => this.handleDotClick(idx) }))))), this._showButtons() && (h("div", { key: '7e827860320c5a25ddbee8ff43a416b212a5405f', class: "tet-carousel__buttons " }, h("tet-button", { key: 'd02e07f42cba8277c166404837518c5af32fc0c7', class: "tet-carousel__buttons--desktop tet-carousel__btn ", theme: this.theme === 'light' ? 'dark' : 'light', "icon-name": this.buttonIconLeft, "icon-mode": true, tabIndex: -1, onPointerDown: (e) => e.stopPropagation(), onPointerUp: () => {
+            }, onClick: () => this.handleDotClick(idx) }))))), this._showButtons() && (h("div", { key: 'ff9081c15d417e870db6e5e82f030bc031310027', class: "tet-carousel__buttons" }, h("tet-button", { key: '279bac2814813a2ce35308d556bca341f1b4a3bb', class: "tet-carousel__buttons--desktop", theme: this.theme, type: "secondary", size: "medium", "icon-name": this.buttonIconLeft, "icon-mode": true, tabIndex: -1, onPointerDown: (e) => e.stopPropagation(), onPointerUp: () => {
                 if (!this.isDragging)
                     this.handlePrev();
-            }, "aria-label": t('components-carousel-previous'), disabled: this.dotCount <= 1 || this.activeItem === 0 }), h("tet-button", { key: '17d47bbfcbf6bd2a9240c74804a33f0e07e15252', class: "tet-carousel__btn", theme: this.theme === 'light' ? 'dark' : 'light', "icon-name": this.buttonIconRight, "icon-mode": true, tabIndex: -1, onPointerDown: (e) => e.stopPropagation(), onPointerUp: () => {
+            }, accessibilityLabel: t('components-carousel-previous'), disabled: this.dotCount <= 1 || this.activeItem === 0 }), h("tet-button", { key: '320adc13d425ca84c26ef2d1cc7001220ce7d9c4', theme: this.theme, type: "secondary", size: "medium", "icon-name": this.buttonIconRight, "icon-mode": true, tabIndex: -1, onPointerDown: (e) => e.stopPropagation(), onPointerUp: () => {
                 if (!this.isDragging)
                     this.handleNext();
-            }, "aria-label": t('components-carousel-next'), disabled: this.dotCount <= 1 ||
-                this.activeItem === this.totalItems - 1 ||
-                this.isLastViewport(-this.dragOffset) }))))))));
+            }, accessibilityLabel: t('components-carousel-next'), disabled: this.isRightNavigationDisabled() }))))))));
     }
     static get is() { return "tet-carousel"; }
     static get encapsulation() { return "shadow"; }
@@ -588,7 +719,7 @@ export class TetCarousel {
                 },
                 "attribute": "transition-timing",
                 "reflect": false,
-                "defaultValue": "'cubic-bezier(0.77,0,0.175,1)'"
+                "defaultValue": "'ease-out'"
             },
             "buttonIconLeft": {
                 "type": "string",
@@ -656,11 +787,29 @@ export class TetCarousel {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Maximum number of dots."
+                    "text": "Label for the carousel."
                 },
                 "attribute": "label",
                 "reflect": false
             },
+            "nudgeAnimationInterval": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Interval for the nudge animation in milliseconds."
+                },
+                "attribute": "nudge-animation-interval",
+                "reflect": false,
+                "defaultValue": "0"
+            },
             "language": {
                 "type": "string",
                 "mutable": false,
@@ -694,7 +843,8 @@ export class TetCarousel {
             "totalItems": {},
             "activeItem": {},
             "isDragging": {},
-            "dragOffset": {}
+            "dragOffset": {},
+            "isNudgeAnimating": {}
         };
     }
     static get watchers() {
@@ -707,6 +857,12 @@ export class TetCarousel {
             }, {
                 "propName": "dragOffset",
                 "methodName": "checkGradient"
+            }, {
+                "propName": "nudgeAnimationInterval",
+                "methodName": "onNudgeAnimIntervalChange"
+            }, {
+                "propName": "isNudgeAnimating",
+                "methodName": "onNudgeAnimationStateChange"
             }];
     }
 }

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

@@ -50,7 +50,7 @@ export class TetIcon {
     };
     shouldUseDefaultColor = () => (this.useDefaultColor || defaultColorIcons.includes(this.name));
     render() {
-        return (h("span", { key: 'c5ddca646b87554822b4c175bd7139af80cb3995', class: "icon-wrapper", tabindex: (this.focusable || this.accessibilityLabel) ? 0 : -1 }, h("span", { key: '4d992df15ab7e5342a224e489ac3267664f3f239', class: {
+        return (h("span", { key: 'ed320686c17d5866f26d5f418f328c6948d3640f', class: "icon-wrapper", tabindex: (this.focusable || this.accessibilityLabel) ? 0 : -1 }, h("span", { key: '8d5eb263eba6ce33576caff437625d5f021f9b19', 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: '797bebccd24b1d5ec737d614e0446ed93fb529d1', class: "loader" }, h("div", { key: '7950251f3a7f7677cd9303f69eeac54f00e7dcac', class: "loader-inner" })));
+        return (h("div", { key: '85b2d0e291d3ef70af1e83c6adba5ace485b9010', class: "loader" }, h("div", { key: '962714060397a7dec7af28e046e5cd6533ed4505', 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: 'd235e9e033631259c071d46e1e84ca969baa01ca', style: { width: this.width, height: this.height } }, h("div", { key: '178d0f8bcd2b2478f15519c2174eac61669f566d', class: { 'dark-theme': this.darkTheme } }, h("div", { key: '44ccf3ad5e6cd034affc7a1cce60ac76d62b6508', class: "placeholder", style: { height: this.height } }))));
+        return (h(Host, { key: 'f9c9d1dfed194378e90fe06171441b0db34111cd', style: { width: this.width, height: this.height } }, h("div", { key: 'd1f3b190ecfae5bfbb58a4a84901bf6ff7da64dd', class: { 'dark-theme': this.darkTheme } }, h("div", { key: '79e229334a49b944ef89c27e3aefbcd053f2dc9d', 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

@@ -48,13 +48,13 @@ export class TetSpinner {
         foreignObject.setAttribute('clip-path', 'url(#clip)');
     };
     render() {
-        return (h("div", { key: '34ae4e1b54605bcc6a35cf6c34c3d81912278e1d', ref: element => (this.spinner = element), class: {
+        return (h("div", { key: 'c5de3ff62bae17c64468e3406729a4c4a3a587f8', ref: element => (this.spinner = element), class: {
                 spinner: true,
                 [`${this.theme}-theme`]: true,
                 [`size--${this.size}`]: true,
                 [`spinner--${this.type}`]: true,
-            } }, h("svg", { key: '6c5b50e4478f8317e694c9588eb13751e4567eb8', viewBox: "0 0 40 40" }, h("clipPath", { key: 'd261977216b2654cd4349be63d18ba71020500a4', id: "clip" }, h("path", { key: '374f5619c2f98434f72fbc6929d7fd6629273a36', 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: 'c987af39f6844eb7950ca327808e6b4dd0ad21c4' }, h("div", { key: 'a5900c0eca56f75f6dfdbb1f3c004510109b3bb4', class: "spinner__gradient" })))));
+            } }, h("svg", { key: 'acb4ecdbf2a75a47aae09a18a1fa44d8f942b6c5', viewBox: "0 0 40 40" }, h("clipPath", { key: 'f45be4277077512749cd357ec78146d2d180cf46', id: "clip" }, h("path", { key: '4d82466e60d835501e4622ae28e6cc3b90229c33', 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: '62877b47af730b01ec32cb094b24445c0a4fa328' }, h("div", { key: 'b09da6b267c7dcfee4e17bedd0bc297ffea54ace', 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: 'c77468e7d0e8cf9309be371a5228820e78016d11' }, h("div", { key: '0893759ac35c617c8832f8cda94f22df4980ce17', class: {
+        return (h(Host, { key: 'e126e5919f6be51dc62a20027556a7c0e803f9a4' }, h("div", { key: '08ce2538f49bb446d065eb7e1ca22e43ae732d3d', class: {
                 label: true,
                 'label-active': this.active,
                 [`label-type-${this.type}`]: true,
                 [`theme-${this.theme}`]: true,
-            } }, this.labelTitle && h("p", { key: '357088a0ed3815c89d0004a8fe9626749c2e987f', class: "label-title" }, this.translateTitle ? t(this.labelTitle) : this.labelTitle), this.showIcon && h("tet-icon", { key: 'c783b3a210a19fa191927f7ec4ae0e6eadcc3111', class: "label-icon", name: "close-circle", part: "icon-selected" }))));
+            } }, this.labelTitle && h("p", { key: '7ebcaf67ad4fe0fa7fbab9956bbe5cbe7fc1016c', class: "label-title" }, this.translateTitle ? t(this.labelTitle) : this.labelTitle), this.showIcon && h("tet-icon", { key: 'bcc130874d361d1765c5a0c6b2478e79435f2a63', 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

@@ -55,9 +55,9 @@ export class TetDatepickerHeader {
         this.datepickerViewChanged.emit(view);
     };
     render() {
-        return (h("div", { key: '680ac39611eaeff615289e20b845fa484613f300', class: "header" }, this.datepickerView !== 'year'
+        return (h("div", { key: 'eabd0fd41ab5d16da4c28f953b040a628c472825', 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: '370eadab0ce764da8252c38f5c27eada0a97cd79', class: "control-button", onClick: () => this.changeDatepickerView() }, this.getControlButtonDate(), h("tet-icon", { key: 'eb1797ccea14f21a193ca5e9cbe3de263fab42a5', class: "chevron-down", name: this.datepickerView === 'month' ? 'chevron-down' : 'chevron-up' })), this.datepickerView !== 'year'
+            : h("div", null), h("div", { key: 'a41aabaa5e06a7632874ea12e33ace557989594f', class: "control-button", onClick: () => this.changeDatepickerView() }, this.getControlButtonDate(), h("tet-icon", { key: '6765d3880b0fa9dd11582d4109104d75c8e735e9', 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

@@ -159,7 +159,7 @@ export class TetDatepickerMonthView {
         };
     };
     render() {
-        return (h(Host, { key: 'fca8cb8d45578ec0c8608da8ce323420644faad9' }, h("div", { key: '74cac3ff3a471c08931b46db322a0e0e4e40b125', class: "weekday-header" }, this.days.map((day) => h("div", { class: "day" }, day))), h("div", { key: '72e847b71935b87986f2b356adfe29758e1361fa', 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: '5006dcdcb3b2fb73458d2570ee3e5868e9746bad' }, h("div", { key: '397d63b6868d5f0bf83d78fe0281921b8eff9d3f', class: "weekday-header" }, this.days.map((day) => h("div", { class: "day" }, day))), h("div", { key: 'cb15ac94b2e1500655d0a98216d99b899da83b83', 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

@@ -32,7 +32,7 @@ export class TetDatepickerMultiYearView {
         return { year: true, current: year === currentYear, selected: this.isSelectedYear(year) };
     };
     render() {
-        return (h("div", { key: '15883bca1e32241d0d9622e2792bf784608cb1ed', class: "container" }, this.years.map((year) => h("div", { class: this.getYearClasses(year), onClick: () => this.handleYearSelection(year) }, year))));
+        return (h("div", { key: '1015708cc1361091f9cd7e96c771c6d9f14053b3', 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

@@ -39,7 +39,7 @@ export class TetDatepickerYearView {
         };
     };
     render() {
-        return (h("div", { key: '6c53c78d86fae911b7dab4ace3d7c49f191d4ec5', 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: 'c6cebcc616dc7ad4ebe644c37aafd1379ee86867', 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

@@ -100,10 +100,10 @@ export class TetDatepicker {
         return { overlay: true, closed: !this.isOpen, 'overlay-effect': this.overlayEffect };
     };
     render() {
-        return (h("div", { key: '636e956c0abe1c6b98ce50163680dec31d78a7c2', class: this.getOverlayClasses(), onClick: this.handleDatepickerClose }, h("div", { key: '2e9cea1ac3c2fca14fed89b97bd38acb36105699', class: "container", ref: (el) => this.datepickerContainer = el }, h("tet-datepicker-header", { key: '78eb3d79204d9a605cda3d08273b95efda75bdd8', selectedDate: this.date, internalDate: this.internalDate, locale: this.locale, datepickerView: this.datepickerView }), this.datepickerView === 'month' &&
-            h("tet-datepicker-month-view", { key: 'a3153cabfd2f9970a691dfeb76c2a28cc5748d37', selectedDate: this.date, internalDate: this.internalDate, rangePickerMode: this.rangePickerMode, rangeDates: this.rangeDates }), this.datepickerView === 'multi-year' &&
-            h("tet-datepicker-multi-year-view", { key: 'eaa1a0714135ea4d5e7544fdfb8c49775b650335', selectedDate: this.date, internalDate: this.internalDate }), this.datepickerView === 'year' &&
-            h("tet-datepicker-year-view", { key: '6af6afa0d4672bf7954420836d6a2beb349093f2', selectedDate: this.date, internalDate: this.internalDate }))));
+        return (h("div", { key: '86dabe383b21b6fda3d4ee7de596c1eb90dcca8f', class: this.getOverlayClasses(), onClick: this.handleDatepickerClose }, h("div", { key: 'd6ab55b8985e2a392f5f3ffbdce0cb53c5a48477', class: "container", ref: (el) => this.datepickerContainer = el }, h("tet-datepicker-header", { key: '179b9fcceddfcfcdaac97b6def9d33d9746c3139', selectedDate: this.date, internalDate: this.internalDate, locale: this.locale, datepickerView: this.datepickerView }), this.datepickerView === 'month' &&
+            h("tet-datepicker-month-view", { key: '9c9e0046ca5b1f287cc8464eb01d6a02c19596cf', selectedDate: this.date, internalDate: this.internalDate, rangePickerMode: this.rangePickerMode, rangeDates: this.rangeDates }), this.datepickerView === 'multi-year' &&
+            h("tet-datepicker-multi-year-view", { key: '378525502835c38a657722116e9d87ce3b649815', selectedDate: this.date, internalDate: this.internalDate }), this.datepickerView === 'year' &&
+            h("tet-datepicker-year-view", { key: '5ad09fb548685b6cd3942d84ed687f848cb03130', 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

@@ -760,31 +760,31 @@ export class TetRangeSlider {
         return dataListItem;
     };
     render() {
-        return (h(Host, { key: 'c8e35c143a6be1b172d63fae08d5bb248773ad9a' }, h("div", { key: 'ad0451e17d38d08f28875e53138ad77c3142ec0b', class: {
+        return (h(Host, { key: 'ebafef0764cad521f4d0a1ad04bd14ea4b33fc34' }, h("div", { key: 'ac62632dd6025bf34344c97002cfda4435031826', 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: '3f99b104e645bab2d8e3c9c43fb2f7e0b8f1ffe1', class: {
+            } }, h("div", { key: '203a318df8a5f2dcf15fc9b47d5b865ef777ead6', class: {
                 'range-slider__input-container': true,
                 'hidden': !this.withInput,
-            } }, h("tet-input", { key: '8f0914d7daf2ca75ef15062357ebc61703e800a7', "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: 'c84209a7974376535239e801ff34f2fb7e9a6239', class: "range-slider__container" }, h("tet-button", { key: 'e4575713db819b214b90eac76f3f2caa084dd1a8', theme: this.theme, iconMode: true, class: {
+            } }, h("tet-input", { key: '4cd2625ce22bfd189607958ad04b88fa0d2201cb', "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: 'acc67a500cd277551c6647dbd2c869ce14791bff', class: "range-slider__container" }, h("tet-button", { key: 'cb81687a384812615e63bbe81836a73b6ebbc113', 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: '161f612a4d88f0567b22dfa2d81d3f49471ca893', name: "remove", class: "range-slider__control--icon" })), h("div", { key: '35f9d67d11383538944ae64a14ffef539c223de3', 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: '958c36eb8dca4510923ec6fa762a6fa408e64bed', class: "range-slider__slider-wrapper" }, h("input", { key: '0b62e5d99d2be52351c01dfe0565e5ac1e86cdfe', 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: '03730d339ffd756348777c9836213944341c1f6a', class: "range-slider__track range-slider__track--background" }), h("div", { key: 'a3cd5c83d1b43dc1dab2fab272cb71892542f9eb', ref: progressTrackEl => (this.progressTrackRef = progressTrackEl), class: "range-slider__track range-slider__track--progress" }), h("div", { key: '4371c05d040b41f55628dc48912ad025b4df3c83', ref: tickContainerEl => (this.tickContainerRef = tickContainerEl), class: "range-slider__tick-container" }), h("div", { key: '44452760584d6d2e642ad32d324ac932a8581ef5', ref: dataLabelEl => (this.dataLabelRef = dataLabelEl), class: {
+            }, clickCallback: this.onControlPreviousClick, ...(this.reduceButtonAccessibilityLabel ? { accessibilityLabel: this.reduceButtonAccessibilityLabel } : {}), ...(this.containerSize !== 'large' ? { tabindex: 2 } : {}) }, h("tet-icon", { key: 'be6a56e0ff20488516c1c1ab1ebf094efd9b0bb1', name: "remove", class: "range-slider__control--icon" })), h("div", { key: 'eb3ec7776668b7ebeaa0d99bf2f59a76f0d939a5', 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: '3e5164c4b8ca9d9a3d911545b18525263fd5c078', class: "range-slider__slider-wrapper" }, h("input", { key: '717cb69fb664957a5867ab55da46371bafa2ad71', 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: '8e7e077417277d080e38f377c5527a88d9c942b0', class: "range-slider__track range-slider__track--background" }), h("div", { key: 'e2a1e570cbcf97c8cf0b1fd4ce855adde8096cf6', ref: progressTrackEl => (this.progressTrackRef = progressTrackEl), class: "range-slider__track range-slider__track--progress" }), h("div", { key: 'fddc819a7f3106dfc5e432c2063f9955aecb1de1', ref: tickContainerEl => (this.tickContainerRef = tickContainerEl), class: "range-slider__tick-container" }), h("div", { key: '991b98aa20fbffb3528a32647dabab94d22a1a6b', ref: dataLabelEl => (this.dataLabelRef = dataLabelEl), class: {
                 'range-slider__data-label-container': true,
                 'hidden': this.type === 'secondary' && this.containerSize === 'small',
-            } })), h("div", { key: '088a8e3000f577eb1af4709299660228ec60884e', class: {
+            } })), h("div", { key: '86daa095139cc87d7e99a40d5c37f3d4da43dac1', class: {
                 'range-slider__current-step-container': true,
                 'hidden': !this.withCurrentStepCounter,
-            } }, h("div", { key: '281d1bcfde25f0a4dd6d4d0587cd9fced09005a7', class: "range-slider__current-step", "aria-live": "polite" }, this.dataSet.indexOf(this.getClosestOverrideDataPoint()) + 1, "/", this.dataPoints.length)), h("div", { key: '59ccd4b546d5a8ccf875c0a097a325ac9cc95603', ref: toolbarHandleEl => (this.tooltipHandleRef = toolbarHandleEl), class: "range-slider__tooltip-handle" }, h("div", { key: '8031a4502185007da20bf6c321249772206d73b1', class: "range-slider__tooltip translation-none", style: { [`--tooltip-offset`]: `${this.tooltipOffset}rem` }, "aria-live": "polite" }, this.getTooltipValue())), h("tet-button", { key: 'eca48c3c4384bdf17cc87a5fc9873c71b0251265', theme: this.theme, iconMode: true, class: {
+            } }, h("div", { key: 'a6c111fcd16cad59b77830825cb59619968181f0', class: "range-slider__current-step", "aria-live": "polite" }, this.dataSet.indexOf(this.getClosestOverrideDataPoint()) + 1, "/", this.dataPoints.length)), h("div", { key: '2b48c092b79f16721d6d83bd2b3a4d6a7c3ddc58', ref: toolbarHandleEl => (this.tooltipHandleRef = toolbarHandleEl), class: "range-slider__tooltip-handle" }, h("div", { key: '158b1e8dec1254680235b2f332d60f2cc78c1dda', class: "range-slider__tooltip translation-none", style: { [`--tooltip-offset`]: `${this.tooltipOffset}rem` }, "aria-live": "polite" }, this.getTooltipValue())), h("tet-button", { key: '2e442cc696fba3bbc9143531ecead99dfdec6cb2', 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: 'cc3eb3b278138a756126bdd74398caddb89dba91', name: "add", class: "range-slider__control--icon" }))))));
+            }, clickCallback: this.onControlNextClick, ...(this.addButtonAccessibilityLabel ? { accessibilityLabel: this.addButtonAccessibilityLabel } : {}), ...(this.containerSize !== 'large' ? { tabindex: 4 } : {}) }, h("tet-icon", { key: 'f8639052793ebc0ce28bc9b05634571ea3755e07', name: "add", class: "range-slider__control--icon" }))))));
     }
     static get is() { return "tet-range-slider"; }
     static get encapsulation() { return "shadow"; }