@tet/tet-components 1.4.27-testing → 1.4.28-staging

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

@@ -26,42 +26,73 @@ export class TetCarousel {
     static NUDGE_DISTANCE_PX = 16;
     static NUDGE_IDLE_THRESHOLD_MS = 1500;
     static GRADIENT_VISIBILITY_THRESHOLD_PX = 1;
+    static EDGE_DRAG_MAX_PX = 32;
+    static EDGE_DRAG_RESISTANCE = 0.95;
+    static MOUSE_DRAG_SMOOTHING_MS = 60;
+    focusableSelector = 'a[href], [tabindex]:not([tabindex="-1"])';
+    handleResize = () => {
+        this.getDotCount();
+        const assigned = this.getSlotElements();
+        if (!assigned?.length)
+            return;
+        const idx = Math.max(0, Math.min(this.activeItem, assigned.length - 1));
+        this.moveToItem(assigned[idx], idx);
+        this.checkGradient();
+    };
+    handleSlotChangeListener = () => this.handleSlotChange();
+    managedFocusableElements = [];
+    managedSlideFocusWithinListeners = [];
     draggedAnchor = null;
     dragMoved = false;
     dragPointerStartX = 0;
     dragStartX = 0;
+    dragStartActiveItem = 0;
+    dragPointerType = '';
     nudgeTimeoutId;
     nudgeGradientRafId;
     lastInteractionAt = 0;
     trackElement = null;
     trackContentElement = null;
+    mobileBackButtonWrapper = null;
     container;
     leftGradientRef;
     rightGradientRef;
     slotObserver;
-    async onLanguageChange(language) {
-        processTranslations('tet-components', language).then(() => forceUpdate(this));
+    safeForceUpdate() {
+        try {
+            forceUpdate(this);
+        }
+        catch { }
+    }
+    syncTranslations(language) {
+        processTranslations('tet-components', language).then(() => this.safeForceUpdate());
+    }
+    onLanguageChange(language) {
+        this.syncTranslations(language);
+    }
+    onActiveItemChange() {
+        this.updateSlideFocusableTabIndexes();
     }
     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';
-                }
+            const maxScrollableOffset = Math.max(0, totalWidth - wrapperWidth);
+            const rawScrollableOffset = -this.getRealDragOffset();
+            const clampedScrollableOffset = Math.max(0, Math.min(maxScrollableOffset, rawScrollableOffset));
+            const rightEdgeDistance = maxScrollableOffset - clampedScrollableOffset;
+            const rightEdge = rightEdgeDistance < TetCarousel.GRADIENT_VISIBILITY_THRESHOLD_PX;
+            if (clampedScrollableOffset < 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 {
@@ -77,7 +108,7 @@ export class TetCarousel {
         this.checkGradient();
     }
     componentWillLoad() {
-        processTranslations('tet-components', this.language).then(() => forceUpdate(this));
+        this.syncTranslations(this.language);
     }
     getSlotElements() {
         const slot = this.container?.querySelector('slot');
@@ -97,6 +128,9 @@ export class TetCarousel {
     getSlotClientWidth() {
         return this.trackElement?.querySelector('slot')?.offsetWidth || window.innerWidth;
     }
+    getMaxScrollableOffset() {
+        return Math.max(0, this.getSlotClientWidth() - this.getViewportWidth());
+    }
     // Run a callback after layout/paint to ensure DOM measurements are up to date
     afterLayout(cb) {
         requestAnimationFrame(() => requestAnimationFrame(cb));
@@ -119,30 +153,140 @@ export class TetCarousel {
         const lastScreenBorder = Math.max(dotScreenLength, viewportWidth);
         return this.isLast(lastScreenBorder, position);
     }
-    getFullyVisibleItemCount() {
+    getItemLayoutMetrics() {
         const assigned = this.getSlotElements();
         if (!assigned || assigned.length === 0)
+            return [];
+        return assigned.map((item, index) => {
+            const left = item.offsetLeft;
+            return {
+                item,
+                index,
+                left,
+                right: left + item.offsetWidth
+            };
+        });
+    }
+    getFullyVisibleItemCount() {
+        const metrics = this.getItemLayoutMetrics();
+        if (!metrics.length)
             return 0;
         const viewportWidth = this.getViewportWidth();
-        const absOffset = Math.abs(this.dragOffset);
-        const visibleLeft = absOffset;
-        const visibleRight = absOffset + viewportWidth;
+        const visibleLeft = Math.abs(this.dragOffset);
+        const visibleRight = visibleLeft + viewportWidth;
         let count = 0;
-        for (const item of assigned) {
-            const rect = item.getBoundingClientRect();
-            const trackRect = this.trackElement.getBoundingClientRect();
-            const relativeLeft = rect.left - trackRect.left;
-            const relativeRight = relativeLeft + item.offsetWidth;
-            // Fully visible when the entire item falls inside the viewport window
-            if (relativeLeft >= visibleLeft && relativeRight <= visibleRight) {
+        for (const { left, right } of metrics) {
+            if (left >= visibleLeft && right <= visibleRight) {
                 count++;
             }
         }
         return count;
     }
+    getVisibleItemCountFromIndex(startIndex) {
+        const metrics = this.getItemLayoutMetrics();
+        if (!metrics.length)
+            return 1;
+        const safeStart = Math.max(0, Math.min(startIndex, metrics.length - 1));
+        const viewportWidth = this.getViewportWidth();
+        const startLeft = metrics[safeStart].left;
+        const visibleRight = startLeft + viewportWidth + 0.5;
+        let count = 0;
+        for (let index = safeStart; index < metrics.length; index++) {
+            if (metrics[index].right <= visibleRight) {
+                count++;
+            }
+            else {
+                break;
+            }
+        }
+        return Math.max(1, count);
+    }
+    getFirstVisibleItemInViewport() {
+        const metrics = this.getItemLayoutMetrics();
+        if (!metrics.length)
+            return null;
+        const viewportLeft = Math.abs(this.dragOffset);
+        const edgeEpsilon = 0.5;
+        const current = metrics.find((metric) => metric.left <= viewportLeft + edgeEpsilon && metric.right > viewportLeft + edgeEpsilon);
+        if (current) {
+            const itemWidth = current.right - current.left;
+            const visibleWidth = current.right - viewportLeft;
+            const isAtLeastHalfVisible = visibleWidth >= itemWidth / 2;
+            if (isAtLeastHalfVisible || current.index === metrics.length - 1) {
+                return { item: current.item, index: current.index };
+            }
+            const next = metrics[current.index + 1];
+            if (next) {
+                return { item: next.item, index: next.index };
+            }
+        }
+        if (viewportLeft <= metrics[0].left + edgeEpsilon) {
+            return { item: metrics[0].item, index: metrics[0].index };
+        }
+        const firstAfterViewport = metrics.find((metric) => metric.left > viewportLeft + edgeEpsilon);
+        if (firstAfterViewport) {
+            return { item: firstAfterViewport.item, index: firstAfterViewport.index };
+        }
+        const last = metrics.at(-1);
+        return { item: last.item, index: last.index };
+    }
+    getEdgeSnapTarget(direction) {
+        const metrics = this.getItemLayoutMetrics();
+        if (!metrics.length)
+            return null;
+        const viewportLeft = Math.abs(this.dragOffset);
+        const viewportRight = viewportLeft + this.getViewportWidth();
+        const first = metrics[0];
+        const last = metrics.at(-1);
+        if (direction < 0) {
+            const firstVisibleWidth = Math.min(first.right, viewportRight) - Math.max(first.left, viewportLeft);
+            if (firstVisibleWidth > 0 && firstVisibleWidth >= (first.right - first.left) / 2) {
+                return { item: first.item, index: first.index };
+            }
+        }
+        if (direction > 0) {
+            const lastVisibleWidth = Math.min(last.right, viewportRight) - Math.max(last.left, viewportLeft);
+            if (lastVisibleWidth > 0 && lastVisibleWidth >= (last.right - last.left) / 2) {
+                return { item: last.item, index: last.index };
+            }
+        }
+        return null;
+    }
+    getSwipeTarget(direction) {
+        const assigned = this.getSlotElements();
+        if (!assigned || assigned.length === 0)
+            return null;
+        const edgeSnapTarget = this.getEdgeSnapTarget(direction);
+        if (edgeSnapTarget) {
+            return edgeSnapTarget;
+        }
+        const firstVisible = this.getFirstVisibleItemInViewport();
+        let targetIndex = firstVisible?.index ?? this.dragStartActiveItem;
+        if (direction > 0 && targetIndex <= this.dragStartActiveItem) {
+            targetIndex = this.dragStartActiveItem + 1;
+        }
+        if (direction < 0 && targetIndex >= this.dragStartActiveItem) {
+            targetIndex = this.dragStartActiveItem - 1;
+        }
+        targetIndex = Math.max(0, Math.min(assigned.length - 1, targetIndex));
+        const targetItem = assigned[targetIndex];
+        if (!targetItem)
+            return null;
+        return { item: targetItem, index: targetIndex };
+    }
     getRealDragOffset() {
         return this.dragOffset + this.getCurrentNudgeTranslateX();
     }
+    applyEdgeDragResistance(offset, minDragOffset) {
+        if (offset > 0) {
+            return Math.min(TetCarousel.EDGE_DRAG_MAX_PX, offset * TetCarousel.EDGE_DRAG_RESISTANCE);
+        }
+        if (offset < minDragOffset) {
+            const overscrollPastEnd = offset - minDragOffset;
+            return minDragOffset + Math.max(-TetCarousel.EDGE_DRAG_MAX_PX, overscrollPastEnd * TetCarousel.EDGE_DRAG_RESISTANCE);
+        }
+        return offset;
+    }
     getCurrentNudgeTranslateX() {
         if (!this.isNudgeAnimating || !this.trackContentElement)
             return 0;
@@ -161,53 +305,53 @@ export class TetCarousel {
         if (!assigned) {
             this.dotCount = 1;
             this.totalItems = 0;
-            return 1;
+            this.activeDotIndex = 0;
+            return;
         }
         this.totalItems = assigned.length;
         const viewportWidth = this.getViewportWidth();
         const totalWidth = this.getSlotClientWidth();
         // Precise: add a dot whenever there's any overflow beyond a full viewport
         const exactScreens = Math.ceil(totalWidth / Math.max(1, viewportWidth));
-        this.dotCount = Math.max(1, Math.min(this?.maxDots, exactScreens));
+        const maxDots = Number.isFinite(this.maxDots) ? this.maxDots : exactScreens;
+        this.dotCount = Math.max(1, Math.min(maxDots, exactScreens));
+        this.activeDotIndex = this.clampDotIndex(this.activeDotIndex);
     }
     handleMove = () => {
         const assigned = this.getSlotElements();
         if (!assigned)
-            return 1;
+            return;
         const item = assigned[this.activeItem];
         if (item) {
             this.moveToItem(item);
         }
     };
-    handlePrev = () => {
+    navigateByStep(direction) {
         this.registerUserInteraction();
-        if (this.activeItem <= 0)
+        const assigned = this.getSlotElements();
+        if (!assigned || assigned.length === 0)
             return;
-        this.afterLayout(() => {
-            const visibleItems = Math.max(1, this.getFullyVisibleItemCount());
-            if (this.activeItem && this.activeItem < visibleItems) {
-                this.activeItem -= this.activeItem;
-            }
-            else {
-                this.activeItem -= visibleItems;
-            }
-            this.handleMove();
-        });
+        const previousDotIndex = this.activeDotIndex;
+        const viewportFirstVisible = this.getFirstVisibleItemInViewport();
+        const baseIndex = viewportFirstVisible?.index ?? this.activeItem;
+        const visibleItems = this.getVisibleItemCountFromIndex(baseIndex);
+        const targetIndex = Math.max(0, Math.min(assigned.length - 1, baseIndex + direction * visibleItems));
+        if (targetIndex === baseIndex)
+            return;
+        const targetItem = assigned[targetIndex];
+        if (!targetItem)
+            return;
+        this.moveToItem(targetItem, targetIndex);
+        // Keep arrow-driven dot navigation stable: one arrow press must not skip more than one dot.
+        if (Math.abs(this.activeDotIndex - previousDotIndex) > 1) {
+            this.moveToDotIndex(previousDotIndex + direction);
+        }
+    }
+    handlePrev = () => {
+        this.navigateByStep(-1);
     };
     handleNext = () => {
-        this.registerUserInteraction();
-        if (this.activeItem >= this.totalItems - 1)
-            return;
-        this.afterLayout(() => {
-            const visibleItems = Math.max(1, this.getFullyVisibleItemCount());
-            if (this.totalItems - this.activeItem < visibleItems) {
-                this.activeItem = this.totalItems - 1;
-            }
-            else {
-                this.activeItem += visibleItems;
-            }
-            this.handleMove();
-        });
+        this.navigateByStep(1);
     };
     moveToLastScreen = () => {
         const wrapperWidth = this.getViewportWidth();
@@ -228,9 +372,9 @@ export class TetCarousel {
         const assigned = this.getSlotElements();
         if (!assigned)
             return null;
+        const trackRect = this.trackElement.getBoundingClientRect();
         for (const [index, item] of assigned.entries()) {
             const rect = item.getBoundingClientRect();
-            const trackRect = this.trackElement.getBoundingClientRect();
             let relativeLeft = rect.left - trackRect.left;
             const gradientOffset = this.calculateGradient(item, relativeLeft);
             if (relativeLeft >= target - this.swipeThreshold + gradientOffset) {
@@ -239,33 +383,94 @@ export class TetCarousel {
         }
         return { item: assigned[0], index: 0 };
     };
+    moveToDotIndex(idx) {
+        this.activeDotIndex = this.clampDotIndex(idx);
+        const maxScrollableOffset = this.getMaxScrollableOffset();
+        const isLastDot = this.dotCount - 1 === this.activeDotIndex && !this.isDragging;
+        const unclampedTargetOffset = isLastDot ? maxScrollableOffset : this.activeDotIndex * this.getDotScreenLength();
+        const targetOffset = Math.max(0, Math.min(unclampedTargetOffset, maxScrollableOffset));
+        const lastScreenElement = this.calcLastScreenElement(targetOffset);
+        if (!lastScreenElement) {
+            this.activeItem = 0;
+            this.dragOffset = 0;
+            return;
+        }
+        const { index } = lastScreenElement;
+        this.activeItem = index;
+        this.dragOffset = -targetOffset;
+    }
     handleDotClick = (idx) => {
         this.registerUserInteraction();
-        this.activeDotIndex = idx;
-        const totalWidth = this.getSlotClientWidth();
-        let targetDragOffset = 0;
-        if (this.dotCount - 1 === this.activeDotIndex && !this.isDragging) {
-            const viewPortWidth = this.getViewportWidth();
-            targetDragOffset = totalWidth - viewPortWidth;
-        }
-        else {
-            targetDragOffset = idx * this.getDotScreenLength();
+        this.moveToDotIndex(idx);
+    };
+    focusDot = (idx) => {
+        if (!this.container)
+            return;
+        const dots = Array.from(this.container.querySelectorAll('.tet-carousel__dot'));
+        dots[idx]?.focus();
+    };
+    getKeyboardTargetIndex(key, currentIndex, maxIndex) {
+        if (maxIndex < 1)
+            return null;
+        switch (key) {
+            case 'ArrowRight':
+            case 'ArrowDown':
+                return Math.min(maxIndex, currentIndex + 1);
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                return Math.max(0, currentIndex - 1);
+            case 'Home':
+                return 0;
+            case 'End':
+                return maxIndex;
+            default:
+                return null;
         }
-        const { item, index } = this.calcLastScreenElement(targetDragOffset);
-        if (!this.isLastViewport(targetDragOffset)) {
-            if (!item)
+    }
+    handleNavigationKeyDown(event, currentIndex, maxIndex, onNavigate, onFocus) {
+        const targetIndex = this.getKeyboardTargetIndex(event.key, currentIndex, maxIndex);
+        if (targetIndex === null)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        if (!onNavigate(targetIndex))
+            return;
+        this.afterLayout(() => onFocus(targetIndex));
+    }
+    handleDotKeyDown = (event, idx) => {
+        if (event.key === 'Tab' && event.shiftKey) {
+            if (this.hasVisibleMobileBackButtonTarget())
                 return;
-            this.moveToItem(item, index);
-        }
-        else {
-            if (index || index === 0) {
-                this.activeItem = index;
-            }
-            this.moveToLastScreen();
+            this.registerUserInteraction();
+            event.preventDefault();
+            event.stopPropagation();
+            this.afterLayout(() => this.focusSlideByIndex(this.activeItem));
+            return;
         }
+        this.handleNavigationKeyDown(event, idx, this.dotCount - 1, (targetIdx) => {
+            this.handleDotClick(targetIdx);
+            return true;
+        }, (targetIdx) => this.focusDot(targetIdx));
     };
+    isElementVisible(element) {
+        if (!element.isConnected)
+            return false;
+        if (element.hidden || element.hasAttribute('hidden'))
+            return false;
+        if (element.getClientRects().length === 0)
+            return false;
+        const style = getComputedStyle(element);
+        return style.display !== 'none' && style.visibility !== 'hidden';
+    }
+    hasVisibleMobileBackButtonTarget() {
+        if (this.isLeftNavigationDisabled())
+            return false;
+        const wrapper = this.mobileBackButtonWrapper;
+        return !!wrapper && this.isElementVisible(wrapper);
+    }
     onPointerDown = (e) => {
         this.registerUserInteraction();
+        this.dragPointerType = e.pointerType || 'mouse';
         e.preventDefault();
         e.stopPropagation();
         e.stopImmediatePropagation();
@@ -273,9 +478,11 @@ export class TetCarousel {
         this.dragStartX = e.screenX;
         this.dragMoved = false;
         this.dragPointerStartX = e.screenX;
+        this.dragStartActiveItem = this.activeItem;
         document.body.style.userSelect = 'none';
         document.addEventListener('pointermove', this.onPointerMove);
         document.addEventListener('pointerup', this.onPointerUp);
+        document.addEventListener('pointercancel', this.onPointerUp);
         let el = e.target;
         this.draggedAnchor = null;
         while (el) {
@@ -289,7 +496,6 @@ 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) {
@@ -307,84 +513,117 @@ export class TetCarousel {
         this.dragStartX = e.screenX;
         const wrapperWidth = this.getViewportWidth();
         const totalWidth = this.getSlotClientWidth();
-        const totalScrollableWidth = -(totalWidth - wrapperWidth);
-        if (totalScrollableWidth < _dragOffset && _dragOffset < 0) {
-            this.dragOffset = _dragOffset;
+        const minDragOffset = -(totalWidth - wrapperWidth);
+        this.dragOffset = this.applyEdgeDragResistance(_dragOffset, minDragOffset);
+        const firstVisible = this.getFirstVisibleItemInViewport();
+        if (firstVisible && this.activeItem !== firstVisible.index) {
+            this.activeItem = firstVisible.index;
         }
     };
-    onPointerUp = (e) => {
-        if (!this.isDragging)
+    releaseTrackPointerCapture(pointerId) {
+        try {
+            this.trackElement?.releasePointerCapture?.(pointerId);
+        }
+        catch { }
+    }
+    getMinDragOffset() {
+        const wrapperWidth = this.getViewportWidth();
+        const totalWidth = this.getSlotClientWidth();
+        return -(totalWidth - wrapperWidth);
+    }
+    snapToEdge(minDragOffset) {
+        const hitStartEdge = this.dragOffset > 0;
+        this.activeItem = hitStartEdge ? 0 : Math.max(0, this.totalItems - 1);
+        this.activeDotIndex = hitStartEdge ? 0 : Math.max(0, this.dotCount - 1);
+        this.dragOffset = hitStartEdge ? 0 : minDragOffset;
+    }
+    moveBySwipeDelta(delta) {
+        if (Math.abs(delta) <= this.swipeThreshold) {
+            this.activeItem = this.dragStartActiveItem;
+            this.afterLayout(() => this.handleMove());
             return;
-        this.registerUserInteraction();
-        if (this.trackElement) {
-            try {
-                this.trackElement.releasePointerCapture?.(e.pointerId);
-            }
-            catch { }
         }
+        const direction = delta < 0 ? 1 : -1;
+        const swipeTarget = this.getSwipeTarget(direction);
+        if (swipeTarget) {
+            this.moveToItem(swipeTarget.item, swipeTarget.index);
+        }
+    }
+    finalizePointerDrag() {
+        document.body.style.userSelect = '';
+        document.removeEventListener('pointermove', this.onPointerMove);
+        document.removeEventListener('pointerup', this.onPointerUp);
+        document.removeEventListener('pointercancel', this.onPointerUp);
+        this.dragPointerType = '';
+    }
+    preventClickAfterDrag() {
+        if (!this.draggedAnchor || !this.dragMoved)
+            return;
+        const preventClick = (ev) => {
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.draggedAnchor?.removeEventListener('click', preventClick, true);
+        };
+        this.draggedAnchor.addEventListener('click', preventClick, true);
+    }
+    onPointerUp = (e) => {
         if (!this.isDragging)
             return;
-        // Snap activeDotIndex when dragOffset passes threshold from last index position
+        this.registerUserInteraction();
+        this.releaseTrackPointerCapture(e.pointerId);
         this.isDragging = false;
-        // Let the once:true capture handler auto-remove itself. Clear flag after a tick.
+        const minDragOffset = this.getMinDragOffset();
+        const isOutOfBounds = this.dragOffset > 0 || this.dragOffset < minDragOffset;
         const delta = e.screenX - this.dragPointerStartX;
-        if (Math.abs(delta) > this.swipeThreshold) {
-            if (delta < 0) {
-                this.handleNext();
-            }
-            if (delta > 0) {
-                this.handlePrev();
-            }
+        if (isOutOfBounds) {
+            this.snapToEdge(minDragOffset);
         }
-        document.body.style.userSelect = '';
-        document.removeEventListener('pointermove', this.onPointerMove);
-        document.removeEventListener('pointerup', this.onPointerUp);
-        if (this.draggedAnchor && this.dragMoved) {
-            const preventClick = (ev) => {
-                ev.preventDefault();
-                ev.stopPropagation();
-                this.draggedAnchor?.removeEventListener('click', preventClick, true);
-            };
-            this.draggedAnchor.addEventListener('click', preventClick, true);
+        else {
+            this.moveBySwipeDelta(delta);
         }
+        this.finalizePointerDrag();
+        this.preventClickAfterDrag();
     };
-    _showButtons() {
+    _showButtons(fullyVisibleItemCount = this.getFullyVisibleItemCount()) {
         if (!this.showButtons) {
             return false;
         }
-        if (this.getFullyVisibleItemCount() >= this.totalItems) {
+        if (fullyVisibleItemCount >= this.totalItems) {
             return false;
         }
         return true;
     }
-    _showDots() {
+    _showDots(fullyVisibleItemCount = this.getFullyVisibleItemCount()) {
         if (!this.showDots) {
             return false;
         }
-        if (this.getFullyVisibleItemCount() && this.getFullyVisibleItemCount() >= this.totalItems) {
+        if (this.totalItems <= 0 || fullyVisibleItemCount >= this.totalItems) {
             return false;
         }
         return true;
     }
     componentDidLoad() {
         this.getDotCount();
-        window.addEventListener('resize', this.getDotCount.bind(this));
-        this.addAnchorFocusListeners();
+        window.addEventListener('resize', this.handleResize);
         this.checkGradient();
         this.initSlotListeners();
         this.syncNudgeSchedule();
+        this.refreshSlideFocusableElements();
     }
     handleSlotChange() {
         this.getDotCount();
+        const maxItemIndex = Math.max(0, this.totalItems - 1);
+        this.activeItem = Math.max(0, Math.min(this.activeItem, maxItemIndex));
+        this.refreshSlideFocusableElements();
         this.checkGradient();
-        forceUpdate(this);
+        this.safeForceUpdate();
     }
     initSlotListeners() {
         const slot = this.container?.querySelector('slot');
         if (!slot)
             return;
         // add listeners for slot elements
-        slot.addEventListener('slotchange', () => this.handleSlotChange());
+        slot.addEventListener('slotchange', this.handleSlotChangeListener);
         // add listeners for slot element children
         if (typeof slot.assignedElements !== 'function')
             return;
@@ -398,32 +637,105 @@ export class TetCarousel {
             subtree: false
         });
     }
-    addAnchorFocusListeners() {
-        const assigned = this.getSlotElements();
-        if (!assigned)
-            return 1;
-        let anchors = [];
-        assigned.forEach((el) => {
-            if (el.tagName === 'A') {
-                anchors.push(el);
+    isTabbableElement(element) {
+        if (element.tagName === 'A') {
+            return element.hasAttribute('href');
+        }
+        const tabIndexValue = element.getAttribute('tabindex');
+        return tabIndexValue !== null && tabIndexValue.trim() !== '-1';
+    }
+    getSlideFocusableElements(slide) {
+        const focusableElements = new Set();
+        if (this.isTabbableElement(slide)) {
+            focusableElements.add(slide);
+        }
+        const descendants = Array.from(slide.querySelectorAll(this.focusableSelector));
+        descendants.forEach((element) => {
+            if (this.isTabbableElement(element)) {
+                focusableElements.add(element);
             }
-            anchors = anchors.concat(Array.from(el.querySelectorAll('a')));
-            if (el.getAttribute('tabindex') === '0') {
-                anchors.push(el);
+        });
+        if (slide.shadowRoot) {
+            const shadowDescendants = Array.from(slide.shadowRoot.querySelectorAll(this.focusableSelector));
+            shadowDescendants.forEach((element) => {
+                if (this.isTabbableElement(element)) {
+                    focusableElements.add(element);
+                }
+            });
+        }
+        return Array.from(focusableElements);
+    }
+    clearManagedSlideFocusableElements() {
+        this.managedSlideFocusWithinListeners.forEach(({ slide, onFocusWithin }) => {
+            slide.removeEventListener('focusin', onFocusWithin);
+        });
+        this.managedSlideFocusWithinListeners = [];
+        this.managedFocusableElements.forEach(({ element, originalTabIndex, onKeyDown }) => {
+            element.removeEventListener('keydown', onKeyDown);
+            if (originalTabIndex === null) {
+                element.removeAttribute('tabindex');
             }
-            const tabIndexElements = Array.from(el.querySelectorAll('[tabindex="0"]'));
-            anchors = anchors.concat(tabIndexElements);
-            if (el.shadowRoot) {
-                const deepTabIndexElements = Array.from(el.shadowRoot.querySelectorAll('[tabindex="0"]'));
-                anchors = anchors.concat(deepTabIndexElements);
+            else {
+                element.setAttribute('tabindex', originalTabIndex);
             }
         });
-        anchors.forEach((a, index) => {
-            a.addEventListener('focus', () => {
+        this.managedFocusableElements = [];
+    }
+    updateSlideFocusableTabIndexes() {
+        if (!this.managedFocusableElements.length)
+            return;
+        this.managedFocusableElements.forEach(({ element, slideIndex }) => {
+            element.setAttribute('tabindex', slideIndex === this.activeItem ? '0' : '-1');
+        });
+    }
+    focusSlideByIndex(index) {
+        const focusable = this.managedFocusableElements.find((element) => element.slideIndex === index);
+        const element = focusable?.element;
+        if (!element)
+            return;
+        try {
+            element.focus({ preventScroll: true });
+        }
+        catch { }
+    }
+    handleSlideKeyDown(event, idx) {
+        this.handleNavigationKeyDown(event, idx, this.totalItems - 1, (targetIdx) => {
+            const assigned = this.getSlotElements();
+            if (!assigned?.[targetIdx])
+                return false;
+            this.registerUserInteraction();
+            this.moveToItem(assigned[targetIdx], targetIdx);
+            return true;
+        }, (targetIdx) => this.focusSlideByIndex(targetIdx));
+    }
+    refreshSlideFocusableElements() {
+        this.clearManagedSlideFocusableElements();
+        const assigned = this.getSlotElements();
+        if (!assigned?.length)
+            return;
+        assigned.forEach((slide, slideIndex) => {
+            const onFocusWithin = () => {
                 this.registerUserInteraction();
-                this.moveToItem(a, index);
+                this.moveToItem(slide, slideIndex);
+            };
+            this.managedSlideFocusWithinListeners.push({
+                slide,
+                onFocusWithin
+            });
+            slide.addEventListener('focusin', onFocusWithin);
+            const focusableElements = this.getSlideFocusableElements(slide);
+            focusableElements.forEach((element) => {
+                const onKeyDown = (event) => this.handleSlideKeyDown(event, slideIndex);
+                this.managedFocusableElements.push({
+                    element,
+                    slideIndex,
+                    originalTabIndex: element.getAttribute('tabindex'),
+                    onKeyDown
+                });
+                element.addEventListener('keydown', onKeyDown);
             });
         });
+        this.updateSlideFocusableTabIndexes();
     }
     startNudgeGradientLoop() {
         if (this.nudgeGradientRafId)
@@ -466,8 +778,16 @@ export class TetCarousel {
     isRightNavigationDisabled() {
         return this.dotCount <= 1 || this.activeItem === this.totalItems - 1 || this.isLastViewport(-this.dragOffset);
     }
+    isLeftNavigationDisabled() {
+        return this.dotCount <= 1 || this.activeItem === 0;
+    }
     isNudgeEligible() {
-        return !!this.trackElement && !this.isDragging && !this.isNudgeAnimating && !this.hasRecentInteraction() && !this.isRightNavigationDisabled();
+        return (!!this.trackElement &&
+            !this.isDragging &&
+            !this.isNudgeAnimating &&
+            !this.hasRecentInteraction() &&
+            !this.isRightNavigationDisabled() &&
+            this.dragOffset === 0);
     }
     scheduleNextNudge() {
         if (this.nudgeAnimationInterval <= 0)
@@ -519,7 +839,7 @@ export class TetCarousel {
             dotIndex = this.dotCount - 1;
         }
         else {
-            dotIndex = Math.floor((position + gradientOffset) / dotScreenLength);
+            dotIndex = Math.round((position + gradientOffset) / dotScreenLength);
         }
         this.activeDotIndex = this.clampDotIndex(dotIndex);
     }
@@ -542,44 +862,50 @@ export class TetCarousel {
     disconnectedCallback() {
         this.stopNudgeSchedule();
         this.stopNudgeGradientLoop();
-        window.removeEventListener('resize', this.getDotCount.bind(this));
+        window.removeEventListener('resize', this.handleResize);
+        this.clearManagedSlideFocusableElements();
         const slot = this.container?.querySelector('slot');
         if (slot) {
-            slot.removeEventListener('slotchange', () => this.handleSlotChange());
+            slot.removeEventListener('slotchange', this.handleSlotChangeListener);
         }
         if (this.slotObserver) {
-            this.slotObserver?.disconnect();
+            this.slotObserver.disconnect();
             this.slotObserver = null;
         }
         document.removeEventListener('pointermove', this.onPointerMove);
         document.removeEventListener('pointerup', this.onPointerUp);
+        document.removeEventListener('pointercancel', this.onPointerUp);
     }
     render() {
-        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) => {
+        const fullyVisibleItemCount = this.getFullyVisibleItemCount();
+        const showButtons = this._showButtons(fullyVisibleItemCount);
+        const showDots = this._showDots(fullyVisibleItemCount);
+        const showControls = showButtons || showDots;
+        let trackTransition = `transform ${this.transitionDuration}ms ${this.transitionTiming}`;
+        if (this.isDragging) {
+            if (this.dragPointerType === 'mouse') {
+                trackTransition = `transform ${TetCarousel.MOUSE_DRAG_SMOOTHING_MS}ms linear`;
+            }
+            else {
+                trackTransition = 'none';
+            }
+        }
+        return (h(Host, { key: '9767de8c2faf3b0e4830a392c9ba0d86c613646e' }, h("div", { key: 'fa87bbfcf929287a5440accd922698d4ad1f6d4b', class: { 'tet-carousel': true, [`${this.theme}`]: true }, ref: (el) => (this.container = el), part: "carousel" }, h("div", { key: 'f5650393d39f906e8c47fd299680b09f82b00a07', class: "tet-carousel__container" }, h("div", { key: 'f6bd47326c58ef355d35e33c037025e1d5a7b5a8', class: "tet-carousel__gradient-left", ref: (el) => {
                 this.leftGradientRef = el;
-            } }), h("div", { key: 'ced61d4ccfcc5de268ba1da71bccff32ad8ec9f6', class: "tet-carousel__gradient-right", ref: (el) => {
+            } }), h("div", { key: '685cad2d917518a83c6db28ef451563fe349c218', class: "tet-carousel__gradient-right", ref: (el) => {
                 this.rightGradientRef = el;
-            } }), 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("div", { key: '874945906359997e34b179988f05b33d4300b4ae', class: {
+            } }), h("div", { key: '2f5acf14605c82e42c845766bd50e61a644a6fe6', class: `tet-carousel__track ${showControls ? '' : 'tet-carousel__track--center'}`, ref: (el) => (this.trackElement = el), style: {
+                transform: `translate3d(${this.dragOffset}px, 0, 0)`,
+                transition: trackTransition,
+                willChange: 'transform'
+            }, onPointerDown: this.onPointerDown, onPointerUp: this.onPointerUp }, h("div", { key: '84bcc48d810f6cd0d15022cdc6d48841187613ad', 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: '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: '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();
-            }, 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();
-            }, accessibilityLabel: t('components-carousel-next'), disabled: this.isRightNavigationDisabled() }))))))));
+            }, onAnimationEnd: this.onNudgeAnimationEnd }, h("slot", { key: '008187ecc9d482ffd1565aaa2c6da818a7bf34ed' })))), !!this.label && h("div", { key: 'd040796e5dc156331fdb2356cd7bb20e7900f460', class: "tet-carousel__label" }, this.label), showControls && (h("div", { key: '4446a2194185bae6fef623d21790f89346378194', class: "tet-carousel__controls" }, showButtons && (h("div", { key: '6c3c10f149b11f9b6503392f16d2d74b526d74c8', class: "tet-carousel__buttons tet-carousel__buttons--mobile", ref: (el) => (this.mobileBackButtonWrapper = el) }, h("tet-button", { key: 'e8f3dad8e0978add649e844149b94072e366f4d8', theme: this.theme, type: "secondary", size: "medium", "icon-name": this.buttonIconLeft, "icon-mode": true, onPointerDown: (e) => e.stopPropagation(), onClick: () => this.handlePrev(), accessibilityLabel: t('components-carousel-previous'), disabled: this.isLeftNavigationDisabled() }))), showDots && (h("div", { key: 'a747eb625e0bf36603a279f29f17ccac16c2e84c', class: "tet-carousel__dots" }, Array.from({ length: this.dotCount }).map((_, idx) => (h("button", { type: "button", tabIndex: idx === this.activeDotIndex ? 0 : -1, class: `tet-carousel__dot${idx === this.activeDotIndex ? ' active' : ''}`, key: idx, "aria-label": `${idx === this.activeDotIndex
+                ? t('components-carousel-indicator-button-active')
+                : t('components-carousel-indicator-button')} ${idx + 1}/${this.dotCount}`, "aria-current": idx === this.activeDotIndex ? 'true' : undefined, onPointerDown: (e) => e.stopPropagation(), onKeyDown: (event) => this.handleDotKeyDown(event, idx), onClick: () => this.handleDotClick(idx) }))))), showButtons && (h("div", { key: '4ffa948621436b96fb9b8d6b10308ec9aa98dff3', class: "tet-carousel__buttons" }, h("tet-button", { key: '43de7d0b8e92e6b1e0e2b7f1ff5f851c4fc75ead', class: "tet-carousel__buttons--desktop", theme: this.theme, type: "secondary", size: "medium", "icon-name": this.buttonIconLeft, "icon-mode": true, onPointerDown: (e) => e.stopPropagation(), onClick: () => this.handlePrev(), accessibilityLabel: t('components-carousel-previous'), disabled: this.isLeftNavigationDisabled() }), h("tet-button", { key: 'eb7b1f82803e0bc39ffb41721a1a906dd5fc6d55', theme: this.theme, type: "secondary", size: "medium", "icon-name": this.buttonIconRight, "icon-mode": true, onPointerDown: (e) => e.stopPropagation(), onClick: () => this.handleNext(), accessibilityLabel: t('components-carousel-next'), disabled: this.isRightNavigationDisabled() }))))))));
     }
     static get is() { return "tet-carousel"; }
     static get encapsulation() { return "shadow"; }
@@ -851,6 +1177,9 @@ export class TetCarousel {
         return [{
                 "propName": "language",
                 "methodName": "onLanguageChange"
+            }, {
+                "propName": "activeItem",
+                "methodName": "onActiveItemChange"
             }, {
                 "propName": "showGradient",
                 "methodName": "checkGradient"