@tedi-design-system/angular 8.2.0-rc.4 → 8.2.0-rc.6

package/fesm2022/tedi-design-system-angular-tedi.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, inject, ElementRef, Directive, booleanAttribute, output, ViewContainerRef, Renderer2, effect, HostListener, Injectable, InjectionToken, model, isDevMode, forwardRef, contentChild, DestroyRef, afterRenderEffect, contentChildren, PLATFORM_ID, REQUEST, isSignal, Pipe, Injector, HostAttributeToken, viewChild, NgZone, viewChildren, afterNextRender, Optional, SkipSelf, linkedSignal, untracked, ViewChild, TemplateRef, numberAttribute, HostBinding, runInInjectionContext, ContentChildren, RendererStyleFlags2, ContentChild, makeEnvironmentProviders } from '@angular/core';
+import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, inject, ElementRef, Directive, booleanAttribute, output, ViewContainerRef, Renderer2, effect, HostListener, Injectable, InjectionToken, model, isDevMode, forwardRef, contentChild, DestroyRef, afterRenderEffect, contentChildren, PLATFORM_ID, REQUEST, isSignal, Pipe, Injector, HostAttributeToken, viewChild, NgZone, viewChildren, afterNextRender, ErrorHandler, Optional, SkipSelf, linkedSignal, untracked, ViewChild, TemplateRef, numberAttribute, HostBinding, runInInjectionContext, ContentChildren, RendererStyleFlags2, ContentChild, makeEnvironmentProviders } from '@angular/core';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import * as i1 from '@angular/cdk/overlay';
 import { CdkOverlayOrigin, OverlayContainer, OverlayModule, Overlay, OverlayConfig, CdkConnectedOverlay } from '@angular/cdk/overlay';
@@ -11,6 +11,7 @@ import * as i2 from '@angular/cdk/a11y';
 import { _IdGenerator, CdkTrapFocus, A11yModule, LiveAnnouncer, ActiveDescendantKeyManager } from '@angular/cdk/a11y';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Dialog } from '@angular/cdk/dialog';
+import { isObservable, firstValueFrom } from 'rxjs';
 import * as i1$2 from '@angular/cdk/scrolling';
 import { CdkScrollable, CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
 import * as i3 from '@angular/cdk/listbox';
@@ -8691,15 +8692,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
 /**
  * Reference to a modal opened via `ModalService`.
  * Provides methods to close the modal and observe its lifecycle.
+ * The opener and the content share the same instance.
  */
 class ModalRef {
     dialogRef;
-    constructor(dialogRef) {
+    errorHandler;
+    /** Checked before every close, except `ModalService.closeAll()` and navigation. */
+    canClose = null;
+    pendingGuard = false;
+    constructor(dialogRef, errorHandler = new ErrorHandler()) {
         this.dialogRef = dialogRef;
+        this.errorHandler = errorHandler;
     }
-    /** Close the modal, optionally returning a result. */
+    /** Close the modal, optionally returning a result. Subject to `canClose`. */
     close(result) {
-        this.dialogRef.close(result);
+        this.requestClose("programmatic", result);
+    }
+    /** @internal */
+    requestClose(reason, result) {
+        if (this.pendingGuard)
+            return;
+        let verdict;
+        try {
+            verdict = this.canClose ? this.canClose(result, reason) : true;
+        }
+        catch (error) {
+            this.errorHandler.handleError(error);
+            return;
+        }
+        if (typeof verdict === "boolean") {
+            if (verdict)
+                this.dialogRef.close(result);
+            return;
+        }
+        this.pendingGuard = true;
+        const decision = isObservable(verdict)
+            ? firstValueFrom(verdict, { defaultValue: false })
+            : verdict;
+        decision
+            .then((allowed) => {
+            if (allowed)
+                this.dialogRef.close(result);
+        })
+            .catch((error) => this.errorHandler.handleError(error))
+            .finally(() => (this.pendingGuard = false));
     }
     /** Observable that emits when the modal is closed, with the optional result value. */
     get closed() {
@@ -8755,6 +8791,7 @@ class ModalService {
     overlay = inject(Overlay);
     injector = inject(Injector);
     idGenerator = inject(_IdGenerator);
+    errorHandler = inject(ErrorHandler);
     /**
      * Open a modal dialog with the given component as content.
      *
@@ -8777,6 +8814,7 @@ class ModalService {
         const { data, size = "default", width = "sm", position = "center", scrollBehavior = "content", closeOnBackdropClick = true, closeOnEscape = true, fullscreen = false, maxWidth, ariaLabel, ariaLabelledBy, } = config;
         const panelClasses = this.buildPanelClasses(size, width, position, scrollBehavior, fullscreen);
         const isPresetWidth = WIDTH_PRESETS.includes(width);
+        let modalRef;
         const dialogRef = this.dialog.open(component, {
             data,
             panelClass: panelClasses,
@@ -8791,7 +8829,10 @@ class ModalService {
             positionStrategy: this.buildPositionStrategy(position, scrollBehavior),
             scrollStrategy: this.overlay.scrollStrategies.block(),
             providers: (ref) => [
-                { provide: ModalRef, useValue: new ModalRef(ref) },
+                {
+                    provide: ModalRef,
+                    useValue: (modalRef = new ModalRef(ref, this.errorHandler)),
+                },
                 { provide: MODAL_DATA, useValue: data },
                 { provide: MODAL_SIZE, useValue: signal(size) },
             ],
@@ -8802,13 +8843,13 @@ class ModalService {
         if (maxWidth) {
             dialogRef.overlayRef.overlayElement.style.setProperty("--_tedi-modal-max-width", maxWidth);
         }
-        this.setupDialogBehavior(dialogRef, scrollBehavior, closeOnBackdropClick, closeOnEscape);
+        this.setupDialogBehavior(dialogRef, modalRef, scrollBehavior, closeOnBackdropClick, closeOnEscape);
         if (!ariaLabel && !ariaLabelledBy) {
             this.labelFromHeading(dialogRef);
         }
-        return new ModalRef(dialogRef);
+        return modalRef;
     }
-    /** Close all open modals. */
+    /** Close all open modals, ignoring `canClose`. */
     closeAll() {
         this.dialog.closeAll();
     }
@@ -8824,7 +8865,8 @@ class ModalService {
     labelFromHeading(dialogRef) {
         afterNextRender(() => {
             // The container, not the pane, is what carries role="dialog".
-            const container = dialogRef.overlayRef.overlayElement.querySelector("cdk-dialog-container");
+            // The pane is null if the modal closed before rendering.
+            const container = dialogRef.overlayRef.overlayElement?.querySelector("cdk-dialog-container");
             if (!container)
                 return;
             const headingId = resolveModalHeadingId(container, this.idGenerator);
@@ -8855,19 +8897,19 @@ class ModalService {
         }
         return classes;
     }
-    setupDialogBehavior(dialogRef, scrollBehavior, closeOnBackdropClick, closeOnEscape) {
+    setupDialogBehavior(dialogRef, modalRef, scrollBehavior, closeOnBackdropClick, closeOnEscape) {
         if (scrollBehavior === "page") {
             const host = dialogRef.overlayRef.hostElement;
             host.style.overflow = "auto";
             host.style.paddingBlock = "var(--layout-grid-gutters-16)";
         }
         if (closeOnBackdropClick) {
-            dialogRef.backdropClick.subscribe(() => dialogRef.close());
+            dialogRef.backdropClick.subscribe(() => modalRef.requestClose("backdrop"));
         }
         if (closeOnEscape) {
             dialogRef.keydownEvents.subscribe((event) => {
                 if (event.key === "Escape") {
-                    dialogRef.close();
+                    modalRef.requestClose("escape");
                 }
             });
         }
@@ -9123,7 +9165,7 @@ class ModalHeaderComponent {
     }, ...(ngDevMode ? [{ debugName: "effectiveCloseButtonSize" }] : []));
     closeModal() {
         if (this.modalRef) {
-            this.modalRef.close();
+            this.modalRef.requestClose("close-button");
         }
         else if (this.modal) {
             this.modal.open.set(false);
@@ -15612,6 +15654,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                 }]
         }] });
 
+/** Ignore tiny calculation differences when deciding the carousel’s position. */
+const EPSILON = 0.001;
 class CarouselContentComponent {
     /** Slides per view (minimum 1, can be fractional, e.g. 1.25 for peeking) */
     slidesPerView = input({ xs: 1 }, ...(ngDevMode ? [{ debugName: "slidesPerView", transform: (v) => breakpointInput(v) }] : [{ transform: (v) => breakpointInput(v) }]));
@@ -15621,6 +15665,12 @@ class CarouselContentComponent {
     fade = input(false, ...(ngDevMode ? [{ debugName: "fade" }] : []));
     /** Transition duration in ms */
     transitionMs = input(400, ...(ngDevMode ? [{ debugName: "transitionMs" }] : []));
+    /**
+     * Whether navigation wraps around at the ends. When `false`, it stops at the
+     * first and last reachable positions and disables the corresponding arrow.
+     * @default true
+     */
+    loop = input(true, ...(ngDevMode ? [{ debugName: "loop", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     /** Accessible label for the carousel region. Falls back to the `carousel` translation. */
     ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
     translationService = inject(TediTranslationService);
@@ -15684,18 +15734,46 @@ class CarouselContentComponent {
             return this.gap().xs;
         }
     }, ...(ngDevMode ? [{ debugName: "currentGap" }] : []));
-    buffer = computed(() => this.slides().length, ...(ngDevMode ? [{ debugName: "buffer" }] : []));
+    buffer = computed(() => (this.loop() ? this.slides().length : 0), ...(ngDevMode ? [{ debugName: "buffer" }] : []));
+    /** Furthest track position in bounded mode; may be fractional to show the last slide fully. */
+    maxIndex = computed(() => Math.max(0, this.slides().length - this.currentSlidesPerView()), ...(ngDevMode ? [{ debugName: "maxIndex" }] : []));
+    /** Number of indicator positions: one per slide when looping, or one per reachable stop when bounded. */
+    positionCount = computed(() => {
+        if (this.loop() || !this.slides().length) {
+            return this.slides().length;
+        }
+        return Math.ceil(this.maxIndex() - EPSILON) + 1;
+    }, ...(ngDevMode ? [{ debugName: "positionCount" }] : []));
+    /** Index of the active indicator; a fractional final stop gets its own index. */
+    activePosition = computed(() => {
+        if (this.loop()) {
+            return this.slideIndex();
+        }
+        const nearest = this.snap(this.trackIndex());
+        return nearest >= this.maxIndex() - EPSILON
+            ? this.positionCount() - 1
+            : Math.round(nearest);
+    }, ...(ngDevMode ? [{ debugName: "activePosition" }] : []));
+    /** Index of the leftmost visible slide, skipping a partially visible one in bounded mode. */
     slideIndex = computed(() => {
         const slidesCount = this.slides().length;
         if (slidesCount === 0) {
             return 0;
         }
+        if (!this.loop()) {
+            return Math.min(Math.max(Math.ceil(this.trackIndex() - EPSILON), 0), slidesCount - 1);
+        }
         const i = Math.floor(this.trackIndex());
         return ((i % slidesCount) + slidesCount) % slidesCount;
     }, ...(ngDevMode ? [{ debugName: "slideIndex" }] : []));
     renderedActiveIndex = computed(() => {
+        if (!this.loop()) {
+            return this.trackIndex();
+        }
         return this.trackIndex() - this.windowBase() + this.buffer();
     }, ...(ngDevMode ? [{ debugName: "renderedActiveIndex" }] : []));
+    canPrev = computed(() => this.loop() || this.trackIndex() > EPSILON, ...(ngDevMode ? [{ debugName: "canPrev" }] : []));
+    canNext = computed(() => this.loop() || this.trackIndex() < this.maxIndex() - EPSILON, ...(ngDevMode ? [{ debugName: "canNext" }] : []));
     /**
      * Checks if a slide at the given rendered index is currently visible in the viewport.
      * Used to determine which slides should be accessible to screen readers.
@@ -15711,6 +15789,9 @@ class CarouselContentComponent {
         if (!slidesCount) {
             return [];
         }
+        if (!this.loop()) {
+            return Array.from({ length: slidesCount }, (_, i) => i);
+        }
         const total = 2 * this.buffer() + Math.ceil(this.currentSlidesPerView());
         const start = this.windowBase() - this.buffer();
         return Array.from({ length: total }, (_, i) => (((start + i) % slidesCount) + slidesCount) % slidesCount);
@@ -15743,7 +15824,7 @@ class CarouselContentComponent {
         }
         const totalGapWidth = gap * (slidesPerView - 1);
         const slideWidth = (viewportWidth - totalGapWidth) / slidesPerView;
-        const offsetSlides = this.trackIndex() - this.windowBase() + this.buffer();
+        const offsetSlides = this.renderedActiveIndex();
         const translateX = -offsetSlides * (slideWidth + gap);
         return {
             gap: `${gap}px`,
@@ -15753,6 +15834,16 @@ class CarouselContentComponent {
                 : "none",
         };
     }, ...(ngDevMode ? [{ debugName: "trackStyle" }] : []));
+    constructor() {
+        // Re-clamp without animation when bounded mode starts or its limit changes.
+        // Don't track the current position: normal navigation must not rerun this effect.
+        effect(() => {
+            if (!this.loop()) {
+                const max = this.maxIndex();
+                untracked(() => this.clampIntoRange(max));
+            }
+        });
+    }
     locked = false;
     dragging = false;
     pendingFocus = false;
@@ -15789,9 +15880,7 @@ class CarouselContentComponent {
         }
         const deltaSlides = delta / cellWidth;
         this.scrollDelta += deltaSlides;
-        const maxDelta = this.buffer() * 0.9;
-        const min = this.windowBase() - maxDelta;
-        const max = this.windowBase() + maxDelta;
+        const { min, max } = this.dragBounds(this.windowBase());
         const unclamped = this.trackIndex() + deltaSlides;
         const clamped = Math.min(Math.max(unclamped, min), max);
         const wasClamped = clamped !== unclamped;
@@ -15800,17 +15889,20 @@ class CarouselContentComponent {
         clearTimeout(this.wheelTimeout);
         this.wheelTimeout = setTimeout(() => {
             this.animate.set(true);
+            // Recalculate bounds: the viewport or slide count may have changed before snapping.
+            const { min, max } = this.dragBounds(this.windowBase());
             const direction = Math.sign(this.scrollDelta);
             const current = this.trackIndex();
-            let snapIndex = Math.round(current);
+            let snapIndex = this.snap(current);
             if (Math.abs(this.scrollDelta) > 0.3) {
                 snapIndex = direction > 0 ? Math.ceil(current) : Math.floor(current);
             }
+            // If scrolling hit a limit, snap inward when looping or to the exact bound otherwise.
             if (wasClamped) {
                 if (current <= min)
-                    snapIndex = Math.ceil(min);
+                    snapIndex = this.loop() ? Math.ceil(min) : min;
                 if (current >= max)
-                    snapIndex = Math.floor(max);
+                    snapIndex = this.loop() ? Math.floor(max) : max;
             }
             const finalIndex = Math.min(Math.max(snapIndex, min), max);
             this.trackIndex.set(finalIndex);
@@ -15851,7 +15943,9 @@ class CarouselContentComponent {
         this.animate.set(false);
         this.startX = ev.clientX;
         this.startIndex = this.trackIndex();
-        this.windowBase.set(Math.floor(this.startIndex));
+        if (this.loop()) {
+            this.windowBase.set(Math.floor(this.startIndex));
+        }
     }
     onPointerMove(ev) {
         if (!this.dragging) {
@@ -15867,9 +15961,7 @@ class CarouselContentComponent {
         }
         const deltaSlides = dx / cellWidth;
         const targetIndex = this.startIndex - deltaSlides;
-        const maxDelta = this.buffer() * 0.9;
-        const min = this.windowBase() - maxDelta;
-        const max = this.windowBase() + maxDelta;
+        const { min, max } = this.dragBounds(Math.floor(this.startIndex));
         const clamped = Math.min(Math.max(targetIndex, min), max);
         this.trackIndex.set(clamped);
     }
@@ -15879,13 +15971,14 @@ class CarouselContentComponent {
         }
         this.dragging = false;
         this.animate.set(true);
-        this.trackIndex.set(Math.round(this.trackIndex()));
+        this.trackIndex.set(this.snap(this.trackIndex()));
     }
     ngAfterViewInit() {
         const viewport = this.host.nativeElement;
         this.viewportWidth.set(viewport.clientWidth);
-        this.ro = new ResizeObserver(() => {
-            this.viewportWidth.set(viewport.clientWidth);
+        // Use the fractional width to keep track translation aligned with CSS-sized slides.
+        this.ro = new ResizeObserver(([entry]) => {
+            this.viewportWidth.set(entry.contentRect.width);
         });
         this.ro.observe(viewport);
     }
@@ -15893,20 +15986,21 @@ class CarouselContentComponent {
         this.ro?.disconnect();
     }
     next() {
-        if (!this.slides().length || this.locked) {
+        if (!this.slides().length || this.locked || !this.canNext()) {
             return;
         }
         this.animate.set(true);
-        this.trackIndex.update((i) => i + 1);
+        // Move to the next whole position, clamping to a fractional final position.
+        this.trackIndex.update((i) => this.clampIndex(Math.floor(i + EPSILON) + 1));
         this.lockNavigation();
         this.announceSlideChange();
     }
     prev() {
-        if (!this.slides().length || this.locked) {
+        if (!this.slides().length || this.locked || !this.canPrev()) {
             return;
         }
         this.animate.set(true);
-        this.trackIndex.update((i) => i - 1);
+        this.trackIndex.update((i) => this.clampIndex(Math.ceil(i - EPSILON) - 1));
         this.lockNavigation();
         this.announceSlideChange();
     }
@@ -15915,11 +16009,16 @@ class CarouselContentComponent {
         if (!slidesCount || this.locked) {
             return;
         }
-        const current = this.slideIndex();
-        const normalized = ((index % slidesCount) + slidesCount) % slidesCount;
-        const delta = normalized - current;
         this.animate.set(true);
-        this.trackIndex.update((i) => i + delta);
+        if (this.loop()) {
+            const current = this.slideIndex();
+            const normalized = ((index % slidesCount) + slidesCount) % slidesCount;
+            const delta = normalized - current;
+            this.trackIndex.update((i) => i + delta);
+        }
+        else {
+            this.trackIndex.set(this.clampIndex(index));
+        }
         if (options?.focusSlide) {
             // Focus after transition completes so DOM positions are stable
             this.pendingFocus = true;
@@ -15934,7 +16033,8 @@ class CarouselContentComponent {
      */
     focusActiveSlide() {
         setTimeout(() => {
-            const activeIndex = this.renderedActiveIndex();
+            // A bounded track can rest at a fractional index; focus the first fully visible slide.
+            const activeIndex = Math.ceil(this.renderedActiveIndex() - EPSILON);
             const slideElement = this.slideElements()[activeIndex];
             if (slideElement) {
                 slideElement.nativeElement.focus({ preventScroll: true });
@@ -15954,14 +16054,42 @@ class CarouselContentComponent {
             this.focusActiveSlide();
         }
     }
+    clampIntoRange(max) {
+        const current = this.trackIndex();
+        const clamped = Math.min(Math.max(current, 0), max);
+        if (clamped !== current) {
+            this.animate.set(false);
+            this.trackIndex.set(clamped);
+            this.windowBase.set(Math.floor(clamped));
+        }
+    }
+    clampIndex(value) {
+        return this.loop() ? value : Math.min(Math.max(value, 0), this.maxIndex());
+    }
+    /** Snap to the nearest reachable position, including a fractional end. */
+    snap(value) {
+        if (this.loop()) {
+            return Math.round(value);
+        }
+        const below = this.clampIndex(Math.floor(value));
+        const above = this.clampIndex(Math.ceil(value));
+        return value - below <= above - value ? below : above;
+    }
+    /**
+     * Range the track may be dragged or wheeled within. A looping track stays inside
+     * its rendered duplicate buffer around `base`; a bounded one stops at the ends.
+     */
+    dragBounds(base) {
+        if (!this.loop()) {
+            return { min: 0, max: this.maxIndex() };
+        }
+        const maxDelta = this.buffer() * 0.9;
+        return { min: base - maxDelta, max: base + maxDelta };
+    }
     lockNavigation() {
         this.locked = true;
         setTimeout(() => (this.locked = false), this.transitionMs());
     }
-    /**
-     * Announces the current slide position to screen readers via LiveAnnouncer.
-     * Called after navigation to inform users of the slide change.
-     */
     announceSlideChange() {
         setTimeout(() => {
             const slideNumber = this.slideIndex() + 1;
@@ -15971,7 +16099,7 @@ class CarouselContentComponent {
         }, 100);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CarouselContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: CarouselContentComponent, isStandalone: true, selector: "tedi-carousel-content", inputs: { slidesPerView: { classPropertyName: "slidesPerView", publicName: "slidesPerView", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, fade: { classPropertyName: "fade", publicName: "fade", isSignal: true, isRequired: false, transformFunction: null }, transitionMs: { classPropertyName: "transitionMs", publicName: "transitionMs", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0", "role": "region", "aria-roledescription": "carousel", "aria-live": "off" }, listeners: { "scroll": "onScroll()", "wheel": "onWheel($event)", "keydown": "onKeyDown($event)", "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "onPointerUp()", "pointercancel": "onPointerUp()", "lostpointercapture": "onPointerUp()" }, properties: { "attr.aria-label": "resolvedAriaLabel()", "class": "classes()" } }, queries: [{ propertyName: "slides", predicate: CarouselSlideDirective, isSignal: true }], viewQueries: [{ propertyName: "track", first: true, predicate: ["track"], descendants: true, isSignal: true }, { propertyName: "slideElements", predicate: ["slide"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #track\n  class=\"tedi-carousel__track\"\n  [style]=\"trackStyle()\"\n  (transitionend)=\"onTransitionEnd($event)\"\n>\n  @for (idx of renderedIndices(); track $index) {\n    <div\n      #slide\n      class=\"tedi-carousel__slide\"\n      [attr.role]=\"isSlideVisible($index) ? 'group' : 'presentation'\"\n      aria-roledescription=\"slide\"\n      [attr.aria-label]=\"\n        translationService.track('carousel.slide', idx + 1, slides().length)()\n      \"\n      [attr.aria-current]=\"$index === renderedActiveIndex() ? 'true' : null\"\n      [attr.aria-hidden]=\"isSlideVisible($index) ? null : 'true'\"\n      [attr.tabindex]=\"isSlideVisible($index) ? '-1' : null\"\n      [style.flex]=\"slideFlex()\"\n    >\n      <ng-container *ngTemplateOutlet=\"slides()[idx].template\"></ng-container>\n    </div>\n  }\n</div>\n", styles: [".tedi-carousel__content{position:relative;width:100%;overflow:hidden;overscroll-behavior:contain;touch-action:pan-y;cursor:grab}.tedi-carousel__content:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-03))}.tedi-carousel__content:active{cursor:grabbing}.tedi-carousel__content--fade-right{-webkit-mask-image:linear-gradient(to right,black 90%,transparent 100%);mask-image:linear-gradient(to right,black 90%,transparent 100%)}.tedi-carousel__content--fade-x{-webkit-mask-image:linear-gradient(to right,black 85%,transparent 100%),linear-gradient(to left,black 85%,transparent 100%);mask-image:linear-gradient(to right,black 85%,transparent 100%),linear-gradient(to left,black 85%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}.tedi-carousel__track{display:flex;will-change:transform}.tedi-carousel__slide{-webkit-user-select:none;user-select:none;scroll-snap-align:none;scroll-margin:0;-webkit-user-drag:none}.tedi-carousel__slide:focus{outline:none}.tedi-carousel__slide:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-03))}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: CarouselContentComponent, isStandalone: true, selector: "tedi-carousel-content", inputs: { slidesPerView: { classPropertyName: "slidesPerView", publicName: "slidesPerView", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, fade: { classPropertyName: "fade", publicName: "fade", isSignal: true, isRequired: false, transformFunction: null }, transitionMs: { classPropertyName: "transitionMs", publicName: "transitionMs", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0", "role": "region", "aria-roledescription": "carousel", "aria-live": "off" }, listeners: { "scroll": "onScroll()", "wheel": "onWheel($event)", "keydown": "onKeyDown($event)", "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "onPointerUp()", "pointercancel": "onPointerUp()", "lostpointercapture": "onPointerUp()" }, properties: { "attr.aria-label": "resolvedAriaLabel()", "class": "classes()" } }, queries: [{ propertyName: "slides", predicate: CarouselSlideDirective, isSignal: true }], viewQueries: [{ propertyName: "track", first: true, predicate: ["track"], descendants: true, isSignal: true }, { propertyName: "slideElements", predicate: ["slide"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #track\n  class=\"tedi-carousel__track\"\n  [style]=\"trackStyle()\"\n  (transitionend)=\"onTransitionEnd($event)\"\n>\n  @for (idx of renderedIndices(); track $index) {\n    <div\n      #slide\n      class=\"tedi-carousel__slide\"\n      [attr.role]=\"isSlideVisible($index) ? 'group' : 'presentation'\"\n      aria-roledescription=\"slide\"\n      [attr.aria-label]=\"\n        translationService.track('carousel.slide', idx + 1, slides().length)()\n      \"\n      [attr.aria-current]=\"$index === renderedActiveIndex() ? 'true' : null\"\n      [attr.aria-hidden]=\"isSlideVisible($index) ? null : 'true'\"\n      [attr.tabindex]=\"isSlideVisible($index) ? '-1' : null\"\n      [style.flex]=\"slideFlex()\"\n    >\n      <ng-container *ngTemplateOutlet=\"slides()[idx].template\"></ng-container>\n    </div>\n  }\n</div>\n", styles: [".tedi-carousel__content{position:relative;width:100%;overflow:hidden;overscroll-behavior:contain;touch-action:pan-y;cursor:grab}.tedi-carousel__content:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-03))}.tedi-carousel__content:active{cursor:grabbing}.tedi-carousel__content--fade-right{-webkit-mask-image:linear-gradient(to right,black 90%,transparent 100%);mask-image:linear-gradient(to right,black 90%,transparent 100%)}.tedi-carousel__content--fade-x{-webkit-mask-image:linear-gradient(to right,black 85%,transparent 100%),linear-gradient(to left,black 85%,transparent 100%);mask-image:linear-gradient(to right,black 85%,transparent 100%),linear-gradient(to left,black 85%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}.tedi-carousel__track{display:flex;will-change:transform}.tedi-carousel__slide{-webkit-user-select:none;user-select:none;scroll-snap-align:none;scroll-margin:0;-webkit-user-drag:none}.tedi-carousel__slide:focus{outline:none}.tedi-carousel__slide:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-03))}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CarouselContentComponent, decorators: [{
             type: Component,
@@ -15983,7 +16111,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                         "aria-live": "off",
                         "[class]": "classes()",
                     }, template: "<div\n  #track\n  class=\"tedi-carousel__track\"\n  [style]=\"trackStyle()\"\n  (transitionend)=\"onTransitionEnd($event)\"\n>\n  @for (idx of renderedIndices(); track $index) {\n    <div\n      #slide\n      class=\"tedi-carousel__slide\"\n      [attr.role]=\"isSlideVisible($index) ? 'group' : 'presentation'\"\n      aria-roledescription=\"slide\"\n      [attr.aria-label]=\"\n        translationService.track('carousel.slide', idx + 1, slides().length)()\n      \"\n      [attr.aria-current]=\"$index === renderedActiveIndex() ? 'true' : null\"\n      [attr.aria-hidden]=\"isSlideVisible($index) ? null : 'true'\"\n      [attr.tabindex]=\"isSlideVisible($index) ? '-1' : null\"\n      [style.flex]=\"slideFlex()\"\n    >\n      <ng-container *ngTemplateOutlet=\"slides()[idx].template\"></ng-container>\n    </div>\n  }\n</div>\n", styles: [".tedi-carousel__content{position:relative;width:100%;overflow:hidden;overscroll-behavior:contain;touch-action:pan-y;cursor:grab}.tedi-carousel__content:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-03))}.tedi-carousel__content:active{cursor:grabbing}.tedi-carousel__content--fade-right{-webkit-mask-image:linear-gradient(to right,black 90%,transparent 100%);mask-image:linear-gradient(to right,black 90%,transparent 100%)}.tedi-carousel__content--fade-x{-webkit-mask-image:linear-gradient(to right,black 85%,transparent 100%),linear-gradient(to left,black 85%,transparent 100%);mask-image:linear-gradient(to right,black 85%,transparent 100%),linear-gradient(to left,black 85%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}.tedi-carousel__track{display:flex;will-change:transform}.tedi-carousel__slide{-webkit-user-select:none;user-select:none;scroll-snap-align:none;scroll-margin:0;-webkit-user-drag:none}.tedi-carousel__slide:focus{outline:none}.tedi-carousel__slide:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-03))}\n"] }]
-        }], propDecorators: { slidesPerView: [{ type: i0.Input, args: [{ isSignal: true, alias: "slidesPerView", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], fade: [{ type: i0.Input, args: [{ isSignal: true, alias: "fade", required: false }] }], transitionMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitionMs", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], track: [{ type: i0.ViewChild, args: ["track", { isSignal: true }] }], slideElements: [{ type: i0.ViewChildren, args: ["slide", { isSignal: true }] }], slides: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CarouselSlideDirective), { isSignal: true }] }], onScroll: [{
+        }], ctorParameters: () => [], propDecorators: { slidesPerView: [{ type: i0.Input, args: [{ isSignal: true, alias: "slidesPerView", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], fade: [{ type: i0.Input, args: [{ isSignal: true, alias: "fade", required: false }] }], transitionMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitionMs", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], track: [{ type: i0.ViewChild, args: ["track", { isSignal: true }] }], slideElements: [{ type: i0.ViewChildren, args: ["slide", { isSignal: true }] }], slides: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CarouselSlideDirective), { isSignal: true }] }], onScroll: [{
                 type: HostListener,
                 args: ["scroll"]
             }], onWheel: [{
@@ -16012,11 +16140,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
 class CarouselComponent {
     carouselContent = contentChild.required(CarouselContentComponent);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.24", type: CarouselComponent, isStandalone: true, selector: "tedi-carousel", queries: [{ propertyName: "carouselContent", first: true, predicate: CarouselContentComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"tedi-carousel-header\" />\n<ng-content select=\"tedi-carousel-content\" />\n<ng-content select=\"tedi-carousel-footer\" />\n", styles: ["tedi-carousel{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.24", type: CarouselComponent, isStandalone: true, selector: "tedi-carousel", queries: [{ propertyName: "carouselContent", first: true, predicate: CarouselContentComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"tedi-carousel-header\" />\n<div class=\"tedi-carousel__body\">\n  <ng-content select=\"tedi-carousel-content\" />\n  <ng-content select=\"tedi-carousel-navigation\" />\n</div>\n<ng-content select=\"tedi-carousel-footer\" />\n", styles: ["tedi-carousel{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08)}.tedi-carousel__body{position:relative;display:flex;flex-direction:column}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CarouselComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: "tedi-carousel", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"tedi-carousel-header\" />\n<ng-content select=\"tedi-carousel-content\" />\n<ng-content select=\"tedi-carousel-footer\" />\n", styles: ["tedi-carousel{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08)}\n"] }]
+            args: [{ standalone: true, selector: "tedi-carousel", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"tedi-carousel-header\" />\n<div class=\"tedi-carousel__body\">\n  <ng-content select=\"tedi-carousel-content\" />\n  <ng-content select=\"tedi-carousel-navigation\" />\n</div>\n<ng-content select=\"tedi-carousel-footer\" />\n", styles: ["tedi-carousel{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08)}.tedi-carousel__body{position:relative;display:flex;flex-direction:column}\n"] }]
         }], propDecorators: { carouselContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CarouselContentComponent), { isSignal: true }] }] } });
 
 class CarouselFooterComponent {
@@ -16044,11 +16172,11 @@ class CarouselIndicatorsComponent {
     variant = input("dots", ...(ngDevMode ? [{ debugName: "variant" }] : []));
     translationService = inject(TediTranslationService);
     carousel = inject(CarouselComponent);
-    indicatorsArray = computed(() => Array.from({ length: this.carousel.carouselContent().slides().length }, (_, i) => ({
+    indicatorsArray = computed(() => Array.from({ length: this.carousel.carouselContent().positionCount() }, (_, i) => ({
         index: i,
-        active: this.carousel.carouselContent().slideIndex() === i,
+        active: this.carousel.carouselContent().activePosition() === i,
     })), ...(ngDevMode ? [{ debugName: "indicatorsArray" }] : []));
-    activeSlideNumber = computed(() => this.carousel.carouselContent().slideIndex() + 1, ...(ngDevMode ? [{ debugName: "activeSlideNumber" }] : []));
+    activeSlideNumber = computed(() => this.carousel.carouselContent().activePosition() + 1, ...(ngDevMode ? [{ debugName: "activeSlideNumber" }] : []));
     handleNext() {
         this.carousel.carouselContent().next();
     }
@@ -16059,16 +16187,24 @@ class CarouselIndicatorsComponent {
         this.carousel.carouselContent().goToIndex(index, { focusSlide: true });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CarouselIndicatorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: CarouselIndicatorsComponent, isStandalone: true, selector: "tedi-carousel-indicators", inputs: { withArrows: { classPropertyName: "withArrows", publicName: "withArrows", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (withArrows()) {\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"neutral\"\n    [attr.aria-label]=\"translationService.track('carousel.moveBack')()\"\n    (click)=\"handlePrev()\"\n  >\n    <tedi-icon name=\"arrow_back\" [size]=\"18\" />\n  </button>\n}\n\n@if (variant() === \"dots\") {\n  @for (indicator of indicatorsArray(); track indicator.index) {\n    <button\n      type=\"button\"\n      class=\"tedi-carousel__indicator\"\n      [attr.aria-label]=\"\n        translationService.track('carousel.showSlide', indicator.index + 1)()\n      \"\n      [ngClass]=\"indicator.active ? 'tedi-carousel__indicator--active' : null\"\n      (click)=\"handleIndicatorClick(indicator.index)\"\n    ></button>\n  }\n} @else if (activeSlideNumber()) {\n  <div>\n    <b tedi-text color=\"brand\">{{ activeSlideNumber() }}</b>\n    <span tedi-text color=\"tertiary\"> / {{ indicatorsArray().length }}</span>\n  </div>\n}\n\n@if (withArrows()) {\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"neutral\"\n    [attr.aria-label]=\"translationService.track('carousel.moveForward')()\"\n    (click)=\"handleNext()\"\n  >\n    <tedi-icon name=\"arrow_forward\" [size]=\"18\" />\n  </button>\n}\n", styles: ["tedi-carousel-indicators{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;min-height:24px}.tedi-carousel__indicator{position:relative;width:24px;height:24px;cursor:pointer;background:none;border:none}.tedi-carousel__indicator:after{position:absolute;top:50%;left:50%;width:22px;height:8px;content:\"\";background-color:transparent;border:1px solid var(--tedi-primary-600);border-radius:100px;transform:translate(-50%,-50%)}.tedi-carousel__indicator:hover:after{border-color:var(--tedi-primary-700)}.tedi-carousel__indicator:active:after{background-color:var(--tedi-primary-800);border-color:var(--tedi-primary-800)}.tedi-carousel__indicator:focus-visible:after{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-carousel__indicator--active:after{background-color:var(--tedi-primary-600)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: CarouselIndicatorsComponent, isStandalone: true, selector: "tedi-carousel-indicators", inputs: { withArrows: { classPropertyName: "withArrows", publicName: "withArrows", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (withArrows()) {\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"neutral\"\n    [attr.aria-label]=\"translationService.track('carousel.moveBack')()\"\n    [disabled]=\"!carousel.carouselContent().canPrev()\"\n    (click)=\"handlePrev()\"\n  >\n    <tedi-icon name=\"arrow_back\" [size]=\"18\" />\n  </button>\n}\n\n@if (variant() === \"dots\") {\n  @for (indicator of indicatorsArray(); track indicator.index) {\n    <button\n      type=\"button\"\n      class=\"tedi-carousel__indicator\"\n      [attr.aria-label]=\"\n        translationService.track('carousel.showSlide', indicator.index + 1)()\n      \"\n      [ngClass]=\"indicator.active ? 'tedi-carousel__indicator--active' : null\"\n      (click)=\"handleIndicatorClick(indicator.index)\"\n    ></button>\n  }\n} @else if (indicatorsArray().length) {\n  <div>\n    <b tedi-text color=\"brand\">{{ activeSlideNumber() }}</b>\n    <span tedi-text color=\"tertiary\"> / {{ indicatorsArray().length }}</span>\n  </div>\n}\n\n@if (withArrows()) {\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"neutral\"\n    [attr.aria-label]=\"translationService.track('carousel.moveForward')()\"\n    [disabled]=\"!carousel.carouselContent().canNext()\"\n    (click)=\"handleNext()\"\n  >\n    <tedi-icon name=\"arrow_forward\" [size]=\"18\" />\n  </button>\n}\n", styles: ["tedi-carousel-indicators{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;min-height:24px}.tedi-carousel__indicator{position:relative;width:24px;height:24px;cursor:pointer;background:none;border:none}.tedi-carousel__indicator:after{position:absolute;top:50%;left:50%;width:22px;height:8px;content:\"\";background-color:transparent;border:1px solid var(--tedi-primary-600);border-radius:100px;transform:translate(-50%,-50%)}.tedi-carousel__indicator:hover:after{border-color:var(--tedi-primary-700)}.tedi-carousel__indicator:active:after{background-color:var(--tedi-primary-800);border-color:var(--tedi-primary-800)}.tedi-carousel__indicator:focus-visible:after{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-carousel__indicator--active:after{background-color:var(--tedi-primary-600)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CarouselIndicatorsComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: "tedi-carousel-indicators", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgClass, ButtonComponent, IconComponent, TextComponent], template: "@if (withArrows()) {\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"neutral\"\n    [attr.aria-label]=\"translationService.track('carousel.moveBack')()\"\n    (click)=\"handlePrev()\"\n  >\n    <tedi-icon name=\"arrow_back\" [size]=\"18\" />\n  </button>\n}\n\n@if (variant() === \"dots\") {\n  @for (indicator of indicatorsArray(); track indicator.index) {\n    <button\n      type=\"button\"\n      class=\"tedi-carousel__indicator\"\n      [attr.aria-label]=\"\n        translationService.track('carousel.showSlide', indicator.index + 1)()\n      \"\n      [ngClass]=\"indicator.active ? 'tedi-carousel__indicator--active' : null\"\n      (click)=\"handleIndicatorClick(indicator.index)\"\n    ></button>\n  }\n} @else if (activeSlideNumber()) {\n  <div>\n    <b tedi-text color=\"brand\">{{ activeSlideNumber() }}</b>\n    <span tedi-text color=\"tertiary\"> / {{ indicatorsArray().length }}</span>\n  </div>\n}\n\n@if (withArrows()) {\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"neutral\"\n    [attr.aria-label]=\"translationService.track('carousel.moveForward')()\"\n    (click)=\"handleNext()\"\n  >\n    <tedi-icon name=\"arrow_forward\" [size]=\"18\" />\n  </button>\n}\n", styles: ["tedi-carousel-indicators{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;min-height:24px}.tedi-carousel__indicator{position:relative;width:24px;height:24px;cursor:pointer;background:none;border:none}.tedi-carousel__indicator:after{position:absolute;top:50%;left:50%;width:22px;height:8px;content:\"\";background-color:transparent;border:1px solid var(--tedi-primary-600);border-radius:100px;transform:translate(-50%,-50%)}.tedi-carousel__indicator:hover:after{border-color:var(--tedi-primary-700)}.tedi-carousel__indicator:active:after{background-color:var(--tedi-primary-800);border-color:var(--tedi-primary-800)}.tedi-carousel__indicator:focus-visible:after{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-carousel__indicator--active:after{background-color:var(--tedi-primary-600)}\n"] }]
+            args: [{ standalone: true, selector: "tedi-carousel-indicators", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgClass, ButtonComponent, IconComponent, TextComponent], template: "@if (withArrows()) {\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"neutral\"\n    [attr.aria-label]=\"translationService.track('carousel.moveBack')()\"\n    [disabled]=\"!carousel.carouselContent().canPrev()\"\n    (click)=\"handlePrev()\"\n  >\n    <tedi-icon name=\"arrow_back\" [size]=\"18\" />\n  </button>\n}\n\n@if (variant() === \"dots\") {\n  @for (indicator of indicatorsArray(); track indicator.index) {\n    <button\n      type=\"button\"\n      class=\"tedi-carousel__indicator\"\n      [attr.aria-label]=\"\n        translationService.track('carousel.showSlide', indicator.index + 1)()\n      \"\n      [ngClass]=\"indicator.active ? 'tedi-carousel__indicator--active' : null\"\n      (click)=\"handleIndicatorClick(indicator.index)\"\n    ></button>\n  }\n} @else if (indicatorsArray().length) {\n  <div>\n    <b tedi-text color=\"brand\">{{ activeSlideNumber() }}</b>\n    <span tedi-text color=\"tertiary\"> / {{ indicatorsArray().length }}</span>\n  </div>\n}\n\n@if (withArrows()) {\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"neutral\"\n    [attr.aria-label]=\"translationService.track('carousel.moveForward')()\"\n    [disabled]=\"!carousel.carouselContent().canNext()\"\n    (click)=\"handleNext()\"\n  >\n    <tedi-icon name=\"arrow_forward\" [size]=\"18\" />\n  </button>\n}\n", styles: ["tedi-carousel-indicators{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;min-height:24px}.tedi-carousel__indicator{position:relative;width:24px;height:24px;cursor:pointer;background:none;border:none}.tedi-carousel__indicator:after{position:absolute;top:50%;left:50%;width:22px;height:8px;content:\"\";background-color:transparent;border:1px solid var(--tedi-primary-600);border-radius:100px;transform:translate(-50%,-50%)}.tedi-carousel__indicator:hover:after{border-color:var(--tedi-primary-700)}.tedi-carousel__indicator:active:after{background-color:var(--tedi-primary-800);border-color:var(--tedi-primary-800)}.tedi-carousel__indicator:focus-visible:after{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-carousel__indicator--active:after{background-color:var(--tedi-primary-600)}\n"] }]
         }], propDecorators: { withArrows: [{ type: i0.Input, args: [{ isSignal: true, alias: "withArrows", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
 
 class CarouselNavigationComponent {
+    /**
+     * Shows floating navigation buttons over the slides. Place navigation directly
+     * inside `tedi-carousel`, outside the header and footer.
+     * @default false
+     */
+    overlay = input(false, ...(ngDevMode ? [{ debugName: "overlay", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     translationService = inject(TediTranslationService);
     carousel = inject(CarouselComponent);
+    canPrev = computed(() => this.carousel.carouselContent().canPrev(), ...(ngDevMode ? [{ debugName: "canPrev" }] : []));
+    canNext = computed(() => this.carousel.carouselContent().canNext(), ...(ngDevMode ? [{ debugName: "canNext" }] : []));
     handleNext() {
         this.carousel.carouselContent().next();
     }
@@ -16076,12 +16212,14 @@ class CarouselNavigationComponent {
         this.carousel.carouselContent().prev();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CarouselNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: CarouselNavigationComponent, isStandalone: true, selector: "tedi-carousel-navigation", ngImport: i0, template: "<button\n  tedi-button\n  type=\"button\"\n  variant=\"secondary\"\n  [attr.aria-label]=\"translationService.track('carousel.moveBack')()\"\n  (click)=\"handlePrev()\"\n>\n  <tedi-icon name=\"arrow_back\" [size]=\"18\" />\n</button>\n<button\n  tedi-button\n  type=\"button\"\n  variant=\"secondary\"\n  [attr.aria-label]=\"translationService.track('carousel.moveForward')()\"\n  (click)=\"handleNext()\"\n>\n  <tedi-icon name=\"arrow_forward\" [size]=\"18\" />\n</button>\n", styles: ["tedi-carousel-navigation{display:flex;gap:var(--layout-grid-gutters-08);align-items:center}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: CarouselNavigationComponent, isStandalone: true, selector: "tedi-carousel-navigation", inputs: { overlay: { classPropertyName: "overlay", publicName: "overlay", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-carousel-navigation--overlay": "overlay()" } }, ngImport: i0, template: "@if (overlay()) {\n  <button\n    tedi-floating-button\n    type=\"button\"\n    variant=\"secondary\"\n    position=\"static\"\n    [attr.aria-label]=\"translationService.track('carousel.moveBack')()\"\n    [disabled]=\"!canPrev()\"\n    (click)=\"handlePrev()\"\n  >\n    <tedi-icon name=\"arrow_back\" [size]=\"18\" />\n  </button>\n  <button\n    tedi-floating-button\n    type=\"button\"\n    variant=\"secondary\"\n    position=\"static\"\n    [attr.aria-label]=\"translationService.track('carousel.moveForward')()\"\n    [disabled]=\"!canNext()\"\n    (click)=\"handleNext()\"\n  >\n    <tedi-icon name=\"arrow_forward\" [size]=\"18\" />\n  </button>\n} @else {\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"secondary\"\n    [attr.aria-label]=\"translationService.track('carousel.moveBack')()\"\n    [disabled]=\"!canPrev()\"\n    (click)=\"handlePrev()\"\n  >\n    <tedi-icon name=\"arrow_back\" [size]=\"18\" />\n  </button>\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"secondary\"\n    [attr.aria-label]=\"translationService.track('carousel.moveForward')()\"\n    [disabled]=\"!canNext()\"\n    (click)=\"handleNext()\"\n  >\n    <tedi-icon name=\"arrow_forward\" [size]=\"18\" />\n  </button>\n}\n", styles: ["tedi-carousel-navigation{display:flex;gap:var(--layout-grid-gutters-08);align-items:center}tedi-carousel-navigation.tedi-carousel-navigation--overlay{position:absolute;inset:0;z-index:1;box-sizing:border-box;justify-content:space-between;padding:var(--layout-grid-gutters-08);pointer-events:none}tedi-carousel-navigation.tedi-carousel-navigation--overlay>*{pointer-events:auto}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: FloatingButtonComponent, selector: "[tedi-floating-button]", inputs: ["variant", "size", "axis", "position", "placement", "offset", "zIndex"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CarouselNavigationComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: "tedi-carousel-navigation", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [ButtonComponent, IconComponent], template: "<button\n  tedi-button\n  type=\"button\"\n  variant=\"secondary\"\n  [attr.aria-label]=\"translationService.track('carousel.moveBack')()\"\n  (click)=\"handlePrev()\"\n>\n  <tedi-icon name=\"arrow_back\" [size]=\"18\" />\n</button>\n<button\n  tedi-button\n  type=\"button\"\n  variant=\"secondary\"\n  [attr.aria-label]=\"translationService.track('carousel.moveForward')()\"\n  (click)=\"handleNext()\"\n>\n  <tedi-icon name=\"arrow_forward\" [size]=\"18\" />\n</button>\n", styles: ["tedi-carousel-navigation{display:flex;gap:var(--layout-grid-gutters-08);align-items:center}\n"] }]
-        }] });
+            args: [{ standalone: true, selector: "tedi-carousel-navigation", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [ButtonComponent, FloatingButtonComponent, IconComponent], host: {
+                        "[class.tedi-carousel-navigation--overlay]": "overlay()",
+                    }, template: "@if (overlay()) {\n  <button\n    tedi-floating-button\n    type=\"button\"\n    variant=\"secondary\"\n    position=\"static\"\n    [attr.aria-label]=\"translationService.track('carousel.moveBack')()\"\n    [disabled]=\"!canPrev()\"\n    (click)=\"handlePrev()\"\n  >\n    <tedi-icon name=\"arrow_back\" [size]=\"18\" />\n  </button>\n  <button\n    tedi-floating-button\n    type=\"button\"\n    variant=\"secondary\"\n    position=\"static\"\n    [attr.aria-label]=\"translationService.track('carousel.moveForward')()\"\n    [disabled]=\"!canNext()\"\n    (click)=\"handleNext()\"\n  >\n    <tedi-icon name=\"arrow_forward\" [size]=\"18\" />\n  </button>\n} @else {\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"secondary\"\n    [attr.aria-label]=\"translationService.track('carousel.moveBack')()\"\n    [disabled]=\"!canPrev()\"\n    (click)=\"handlePrev()\"\n  >\n    <tedi-icon name=\"arrow_back\" [size]=\"18\" />\n  </button>\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"secondary\"\n    [attr.aria-label]=\"translationService.track('carousel.moveForward')()\"\n    [disabled]=\"!canNext()\"\n    (click)=\"handleNext()\"\n  >\n    <tedi-icon name=\"arrow_forward\" [size]=\"18\" />\n  </button>\n}\n", styles: ["tedi-carousel-navigation{display:flex;gap:var(--layout-grid-gutters-08);align-items:center}tedi-carousel-navigation.tedi-carousel-navigation--overlay{position:absolute;inset:0;z-index:1;box-sizing:border-box;justify-content:space-between;padding:var(--layout-grid-gutters-08);pointer-events:none}tedi-carousel-navigation.tedi-carousel-navigation--overlay>*{pointer-events:auto}\n"] }]
+        }], propDecorators: { overlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlay", required: false }] }] } });
 
 const range = (start, end) => {
     if (end < start)