@cdevhub/ngx-tw 0.2.0 → 0.3.0

package/fesm2022/cdevhub-ngx-tw-carousel.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, inject, ElementRef, signal, computed, ChangeDetectionStrategy, Component, model, output, DestroyRef, viewChild, contentChildren, afterNextRender, isDevMode, effect, Directive } from '@angular/core';
+import { input, inject, ElementRef, signal, computed, ChangeDetectionStrategy, Component, model, output, DestroyRef, viewChild, contentChildren, afterNextRender, isDevMode, effect, untracked, Directive } from '@angular/core';
 import { tv } from 'tailwind-variants';
 
 // `CarouselComponent` is the canonical "structural-layout primitive" exception
@@ -236,18 +236,23 @@ const carouselVariants = tv({
  */
 class CarouselSlideComponent {
     /** Optional human-readable label for the slide. When provided, used in the slide's `aria-label` as `"{index + 1} of {total}: {label}"`. When `null`, uses `"{index + 1} of {total}"` only. Defaults to `null`. */
-    label = input(null, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    label = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     /** When `true`, the slide is rendered but skipped by Prev/Next, Indicators, keyboard nav, and autoplay. Programmatic `scrollTo` still lands on it. Visually muted (`opacity-50`, `cursor-not-allowed`). Defaults to `false`. */
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     /** @internal Direct parent carousel. A `tw-carousel-slide` outside a `tw-carousel` is a programmer error — the DI failure throws naturally. */
     carousel = inject(CarouselComponent);
     /** @internal Host element reference used by the carousel's `IntersectionObserver`. */
     _hostEl = inject((ElementRef)).nativeElement;
     /** @internal Visibility flag set by the carousel's IntersectionObserver. Initial value is `true` so the first paint does not flash `inert` on every slide. */
-    _isVisible = signal(true, ...(ngDevMode ? [{ debugName: "_isVisible" }] : /* istanbul ignore next */ []));
-    _isHidden = computed(() => !this._isVisible(), ...(ngDevMode ? [{ debugName: "_isHidden" }] : /* istanbul ignore next */ []));
+    _isVisible = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isVisible" }] : /* istanbul ignore next */ []));
+    _isHidden = computed(() => !this._isVisible(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isHidden" }] : /* istanbul ignore next */ []));
     /** @internal 0-based index in the parent carousel's slide content. -1 until contentChildren materialises. */
-    index = computed(() => this.carousel.slides().indexOf(this), ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+    index = computed(() => this.carousel.slides().indexOf(this), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
     /** @internal Resolved `aria-label` per the `slideOf` / `slideOfWithLabel` template. */
     accessibleName = computed(() => {
         const labels = this.carousel.resolvedLabels();
@@ -266,17 +271,20 @@ class CarouselSlideComponent {
             index: oneBasedIndex,
             total,
         });
-    }, ...(ngDevMode ? [{ debugName: "accessibleName" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "accessibleName" }] : /* istanbul ignore next */ []));
     slideClasses = computed(() => {
         const base = this.carousel._slotClasses().slide();
         return this.disabled() ? `${base} opacity-50 cursor-not-allowed` : base;
-    }, ...(ngDevMode ? [{ debugName: "slideClasses" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "slideClasses" }] : /* istanbul ignore next */ []));
     /** @internal Per-slide `flex-basis`. Reads from the carousel so each slide sizes along the viewport's main axis (width for horizontal, height for vertical via `flex-direction`). */
-    _basis = computed(() => this.carousel.slideBasis(), ...(ngDevMode ? [{ debugName: "_basis" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CarouselSlideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: CarouselSlideComponent, isStandalone: true, selector: "tw-carousel-slide", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-roledescription": "\"slide\"", "attr.aria-label": "accessibleName()", "attr.aria-hidden": "_isHidden() ? \"true\" : null", "attr.inert": "_isHidden() ? \"\" : null", "class": "slideClasses()", "style.flex-basis": "_basis()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    _basis = computed(() => this.carousel.slideBasis(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_basis" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CarouselSlideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: CarouselSlideComponent, isStandalone: true, selector: "tw-carousel-slide", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-roledescription": "\"slide\"", "attr.aria-label": "accessibleName()", "attr.aria-hidden": "_isHidden() ? \"true\" : null", "attr.inert": "_isHidden() ? \"\" : null", "class": "slideClasses()", "style.flex-basis": "_basis()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CarouselSlideComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CarouselSlideComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tw-carousel-slide',
@@ -306,37 +314,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
 class CarouselComponent {
     // ── Inputs (17, cap-exempt: structural-layout primitive — precedent SplitComponent) ──
     /** Axis along which slides flow. `'horizontal'` is the canonical case; `'vertical'` is supported for tickers and feature lists. Defaults to `'horizontal'`. */
-    orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    orientation = input('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
     /** Number of slides visible in the viewport. May be fractional (e.g. `1.2` for a "peek" of the next slide). Values below `0.5` are clamped to `0.5`; values above the slide count are clamped to the slide count. Defaults to `1`. */
-    slidesPerView = input(1, ...(ngDevMode ? [{ debugName: "slidesPerView" }] : /* istanbul ignore next */ []));
+    slidesPerView = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "slidesPerView" }] : /* istanbul ignore next */ []));
     /** Number of slides advanced per navigation action (button click, keyboard, indicator). Non-integer values are floored. Defaults to `1`. */
-    slidesToScroll = input(1, ...(ngDevMode ? [{ debugName: "slidesToScroll" }] : /* istanbul ignore next */ []));
+    slidesToScroll = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "slidesToScroll" }] : /* istanbul ignore next */ []));
     /** Inter-slide gap on the scroll axis. Mapped via the canonical spacing scale. Defaults to `'md'`. */
-    gap = input('md', ...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
+    gap = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
     /** When `true`, navigation wraps around at the boundaries. Prev at slide 0 jumps to the last page; Next at the last page jumps to slide 0. Implementation is jumpless via a brief opacity mask. Defaults to `false`. */
-    loop = input(false, ...(ngDevMode ? [{ debugName: "loop" }] : /* istanbul ignore next */ []));
+    loop = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loop" }] : /* istanbul ignore next */ []));
     /** When `true`, the carousel auto-advances by `slidesToScroll` every `autoplayInterval` ms. Pauses on hover, focus-in, drag, document hidden, or user interaction. Defaults to `false`. */
-    autoplay = input(false, ...(ngDevMode ? [{ debugName: "autoplay" }] : /* istanbul ignore next */ []));
+    autoplay = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autoplay" }] : /* istanbul ignore next */ []));
     /** Milliseconds between autoplay advances. Values below `1000` are clamped to `1000` per WCAG 2.2.2. Defaults to `5000`. */
-    autoplayInterval = input(5000, ...(ngDevMode ? [{ debugName: "autoplayInterval" }] : /* istanbul ignore next */ []));
+    autoplayInterval = input(5000, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autoplayInterval" }] : /* istanbul ignore next */ []));
     /** Pauses autoplay while the pointer is over the container. Defaults to `true` because losing autoplay on hover is the expected gallery behavior — opt-out is the special case. */
-    pauseOnHover = input(true, ...(ngDevMode ? [{ debugName: "pauseOnHover" }] : /* istanbul ignore next */ []));
+    pauseOnHover = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pauseOnHover" }] : /* istanbul ignore next */ []));
     /** Pauses autoplay while keyboard focus is anywhere inside the container. Defaults to `true` for WCAG 2.2.2 compliance — opt-out is the special case. */
-    pauseOnFocusIn = input(true, ...(ngDevMode ? [{ debugName: "pauseOnFocusIn" }] : /* istanbul ignore next */ []));
+    pauseOnFocusIn = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pauseOnFocusIn" }] : /* istanbul ignore next */ []));
     /** When `true`, the user may pan the slides via mouse pointer drag; touch is left to native scroll. Pointer events are intercepted only when the drag exceeds a 6-pixel threshold so clicks inside slides still work. Defaults to `true` because galleries are draggable by user expectation — opt-out is the special case. */
-    draggable = input(true, ...(ngDevMode ? [{ debugName: "draggable" }] : /* istanbul ignore next */ []));
+    draggable = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "draggable" }] : /* istanbul ignore next */ []));
     /** When `true`, the viewport responds to Arrow / Home / End / PageUp / PageDown when focus is inside it. Defaults to `true` for keyboard accessibility — opt-out is the special case. */
-    keyboard = input(true, ...(ngDevMode ? [{ debugName: "keyboard" }] : /* istanbul ignore next */ []));
+    keyboard = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "keyboard" }] : /* istanbul ignore next */ []));
     /** CSS `scroll-snap-align` value applied to each slide. `'start'` is the standard gallery behavior; `'center'` is used for peek/preview layouts. Defaults to `'start'`. */
-    snapAlign = input('start', ...(ngDevMode ? [{ debugName: "snapAlign" }] : /* istanbul ignore next */ []));
+    snapAlign = input('start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "snapAlign" }] : /* istanbul ignore next */ []));
     /** Two-way bound 0-based index of the first visible slide in the current page. Setting from the parent scrolls the viewport smoothly to align that slide; reading reflects user-driven scroll position after `scrollend`. Defaults to `0`. */
-    activeIndex = model(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    activeIndex = model(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
     /** Accessible name for the carousel region. If both this and `ariaLabelledBy` are `null`, a one-time dev-mode `console.warn` is logged (production builds never log). Defaults to `null`. */
-    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     /** ID of an element labeling the carousel. Either `ariaLabel` or `ariaLabelledBy` SHOULD be provided. Defaults to `null`. */
-    ariaLabelledBy = input(null, ...(ngDevMode ? [{ debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []));
+    ariaLabelledBy = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []));
     /** Localizable strings for prev/next/pause/resume/indicator/slide-of templates. Unset keys fall back to the English defaults in `DEFAULT_CAROUSEL_LABELS`. Defaults to `{}`. */
-    labels = input({}, ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+    labels = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
     // ── Outputs ───────────────────────────────────────────────────
     /** Fires when the active index changes. Payload identifies the previous and new index plus the trigger source. */
     slideChange = output();
@@ -347,7 +371,8 @@ class CarouselComponent {
     // ── Internal references ────────────────────────────────────────
     _destroyRef = inject(DestroyRef);
     /** @internal The scrollable viewport element. */
-    _viewportRef = viewChild.required('viewport');
+    _viewportRef = viewChild.required('viewport', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_viewportRef" }] : /* istanbul ignore next */ []));
     /** @internal Projected slides in DOM order. */
     slides = contentChildren(CarouselSlideComponent, { ...(ngDevMode ? { debugName: "slides" } : /* istanbul ignore next */ {}), descendants: false });
     // ── Resolved configuration ─────────────────────────────────────
@@ -355,7 +380,8 @@ class CarouselComponent {
     resolvedLabels = computed(() => ({
         ...DEFAULT_CAROUSEL_LABELS,
         ...this.labels(),
-    }), ...(ngDevMode ? [{ debugName: "resolvedLabels" }] : /* istanbul ignore next */ []));
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedLabels" }] : /* istanbul ignore next */ []));
     /** @internal Effective `slidesPerView` clamped to `[0.5, slideCount]`. */
     _effectiveSlidesPerView = computed(() => {
         const count = this.slides().length;
@@ -363,15 +389,18 @@ class CarouselComponent {
         if (count === 0)
             return Math.max(0.5, raw);
         return Math.max(0.5, Math.min(raw, count));
-    }, ...(ngDevMode ? [{ debugName: "_effectiveSlidesPerView" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_effectiveSlidesPerView" }] : /* istanbul ignore next */ []));
     /** @internal Effective `slidesToScroll` floored to a positive integer. Read by child indicators directive (`CarouselIndicatorsComponent._onClick`) as a signal. */
     _effectiveSlidesToScroll = computed(() => {
         return Math.max(1, Math.floor(this.slidesToScroll()));
-    }, ...(ngDevMode ? [{ debugName: "_effectiveSlidesToScroll" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_effectiveSlidesToScroll" }] : /* istanbul ignore next */ []));
     /** @internal Autoplay interval clamped to ≥ 1000 ms per WCAG 2.2.2. */
     _effectiveAutoplayInterval = computed(() => {
         return Math.max(1000, this.autoplayInterval());
-    }, ...(ngDevMode ? [{ debugName: "_effectiveAutoplayInterval" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_effectiveAutoplayInterval" }] : /* istanbul ignore next */ []));
     /** Number of distinct pages (groups of `slidesToScroll` slides) the carousel can land on. Reactive. */
     pageCount = computed(() => {
         const count = this.slides().length;
@@ -380,58 +409,79 @@ class CarouselComponent {
         const perView = this._effectiveSlidesPerView();
         const toScroll = this._effectiveSlidesToScroll();
         return Math.max(1, Math.ceil((count - perView) / toScroll) + 1);
-    }, ...(ngDevMode ? [{ debugName: "pageCount" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageCount" }] : /* istanbul ignore next */ []));
     /** 0-based page index that contains `activeIndex`. Reactive. */
     activePage = computed(() => {
         return Math.floor(this.activeIndex() / this._effectiveSlidesToScroll());
-    }, ...(ngDevMode ? [{ debugName: "activePage" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activePage" }] : /* istanbul ignore next */ []));
     /** The highest slide index the carousel can land on given the current `slidesPerView`. Equals `max(0, slideCount - ceil(effectiveSlidesPerView))`. Reactive. Every site that asks "where is the last legal landing position?" goes through this signal. */
     lastReachableIndex = computed(() => {
         const count = this.slides().length;
         if (count === 0)
             return 0;
         return Math.max(0, count - Math.ceil(this._effectiveSlidesPerView()));
-    }, ...(ngDevMode ? [{ debugName: "lastReachableIndex" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lastReachableIndex" }] : /* istanbul ignore next */ []));
     /** @internal `true` when the carousel is at slide 0 (drives prev directive `disabled`). */
-    isAtStart = computed(() => this.activeIndex() <= 0, ...(ngDevMode ? [{ debugName: "isAtStart" }] : /* istanbul ignore next */ []));
+    isAtStart = computed(() => this.activeIndex() <= 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isAtStart" }] : /* istanbul ignore next */ []));
     /** @internal `true` when the carousel is at the last reachable slide (drives next directive `disabled`). */
-    isAtEnd = computed(() => this.activeIndex() >= this.lastReachableIndex(), ...(ngDevMode ? [{ debugName: "isAtEnd" }] : /* istanbul ignore next */ []));
+    isAtEnd = computed(() => this.activeIndex() >= this.lastReachableIndex(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isAtEnd" }] : /* istanbul ignore next */ []));
     /** @internal Per-slide `flex-basis`. Read by each `CarouselSlideComponent` host style binding to size slides along the viewport's main axis. Reactive. */
     slideBasis = computed(() => {
         const perView = this._effectiveSlidesPerView();
         const gapPx = GAP_PX[this.gap()];
         // calc((100% - ((perView - 1) * gap-px)) / perView)
         return `calc((100% - ${(perView - 1) * gapPx}px) / ${perView})`;
-    }, ...(ngDevMode ? [{ debugName: "slideBasis" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "slideBasis" }] : /* istanbul ignore next */ []));
     // ── tv() resolution ────────────────────────────────────────────
     _variantResult = computed(() => carouselVariants({
         orientation: this.orientation(),
         snapAlign: this.snapAlign(),
         gap: this.gap(),
-    }), ...(ngDevMode ? [{ debugName: "_variantResult" }] : /* istanbul ignore next */ []));
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_variantResult" }] : /* istanbul ignore next */ []));
     /** @internal Slot-class accessor used by child slides and indicators. */
-    _slotClasses = computed(() => this._variantResult(), ...(ngDevMode ? [{ debugName: "_slotClasses" }] : /* istanbul ignore next */ []));
-    rootClasses = computed(() => this._variantResult().root(), ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
-    viewportClasses = computed(() => this._variantResult().viewport(), ...(ngDevMode ? [{ debugName: "viewportClasses" }] : /* istanbul ignore next */ []));
-    pauseControlClasses = computed(() => this._variantResult().pauseControl(), ...(ngDevMode ? [{ debugName: "pauseControlClasses" }] : /* istanbul ignore next */ []));
+    _slotClasses = computed(() => this._variantResult(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_slotClasses" }] : /* istanbul ignore next */ []));
+    rootClasses = computed(() => this._variantResult().root(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
+    viewportClasses = computed(() => this._variantResult().viewport(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewportClasses" }] : /* istanbul ignore next */ []));
+    pauseControlClasses = computed(() => this._variantResult().pauseControl(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pauseControlClasses" }] : /* istanbul ignore next */ []));
     // ── State signals ──────────────────────────────────────────────
     /** @internal Last interaction source — written before any navigation triggers scroll, read by the settle handler. */
-    _lastInteractionSource = signal(null, ...(ngDevMode ? [{ debugName: "_lastInteractionSource" }] : /* istanbul ignore next */ []));
+    _lastInteractionSource = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_lastInteractionSource" }] : /* istanbul ignore next */ []));
     /** @internal Suppresses the scroll-end recompute during a loop-jump. */
-    _isLoopJumping = signal(false, ...(ngDevMode ? [{ debugName: "_isLoopJumping" }] : /* istanbul ignore next */ []));
-    _isHovered = signal(false, ...(ngDevMode ? [{ debugName: "_isHovered" }] : /* istanbul ignore next */ []));
-    _hasFocusInside = signal(false, ...(ngDevMode ? [{ debugName: "_hasFocusInside" }] : /* istanbul ignore next */ []));
-    _isTabVisible = signal(true, ...(ngDevMode ? [{ debugName: "_isTabVisible" }] : /* istanbul ignore next */ []));
-    _isDragging = signal(false, ...(ngDevMode ? [{ debugName: "_isDragging" }] : /* istanbul ignore next */ []));
-    _isManuallyPaused = signal(false, ...(ngDevMode ? [{ debugName: "_isManuallyPaused" }] : /* istanbul ignore next */ []));
-    _postInteractionPauseUntil = signal(null, ...(ngDevMode ? [{ debugName: "_postInteractionPauseUntil" }] : /* istanbul ignore next */ []));
+    _isLoopJumping = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isLoopJumping" }] : /* istanbul ignore next */ []));
+    _isHovered = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isHovered" }] : /* istanbul ignore next */ []));
+    _hasFocusInside = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hasFocusInside" }] : /* istanbul ignore next */ []));
+    _isTabVisible = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isTabVisible" }] : /* istanbul ignore next */ []));
+    _isDragging = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isDragging" }] : /* istanbul ignore next */ []));
+    _isManuallyPaused = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isManuallyPaused" }] : /* istanbul ignore next */ []));
+    _postInteractionPauseUntil = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_postInteractionPauseUntil" }] : /* istanbul ignore next */ []));
     /** @internal RTL sign factor applied to scroll-position math. `+1` LTR, `-1` RTL. */
-    _rtlSign = signal(1, ...(ngDevMode ? [{ debugName: "_rtlSign" }] : /* istanbul ignore next */ []));
+    _rtlSign = signal(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_rtlSign" }] : /* istanbul ignore next */ []));
     // ── Resolved pause-control labels ──────────────────────────────
     _pauseControlAriaLabel = computed(() => {
         const labels = this.resolvedLabels();
         return this._isManuallyPaused() ? labels.resumeAutoplay : labels.pauseAutoplay;
-    }, ...(ngDevMode ? [{ debugName: "_pauseControlAriaLabel" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_pauseControlAriaLabel" }] : /* istanbul ignore next */ []));
     /** @internal Public accessor for the template. */
     _isManuallyPausedView = this._isManuallyPaused.asReadonly();
     // ── Internal API used by child directives / indicators ─────────
@@ -512,13 +562,18 @@ class CarouselComponent {
             prevPaused = paused;
         });
         // Slide-set changes: re-observe with IntersectionObserver, clamp activeIndex.
+        // Only `slides()` is a reactive trigger. The activeIndex read+write is wrapped
+        // in `untracked` so the clamp does not register `activeIndex` as a dependency —
+        // otherwise the `.set` would re-trigger this effect (read→write signal cycle).
         effect(() => {
             const slides = this.slides();
             this._reobserveSlides(slides);
             const count = slides.length;
-            if (count > 0 && this.activeIndex() > count - 1) {
-                this.activeIndex.set(count - 1);
-            }
+            untracked(() => {
+                if (count > 0 && this.activeIndex() > count - 1) {
+                    this.activeIndex.set(count - 1);
+                }
+            });
         });
         this._destroyRef.onDestroy(() => {
             this._teardownViewport();
@@ -540,7 +595,8 @@ class CarouselComponent {
         if (until !== null && Date.now() < until)
             return true;
         return false;
-    }, ...(ngDevMode ? [{ debugName: "_isPaused" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isPaused" }] : /* istanbul ignore next */ []));
     _currentPauseReason() {
         if (this._isManuallyPaused())
             return 'manual';
@@ -1061,14 +1117,20 @@ class CarouselComponent {
             case 'ArrowLeft':
                 if (horizontal) {
                     this._lastInteractionSource.set('keyboard');
-                    rtl ? this.next() : this.prev();
+                    if (rtl)
+                        this.next();
+                    else
+                        this.prev();
                     handled = true;
                 }
                 break;
             case 'ArrowRight':
                 if (horizontal) {
                     this._lastInteractionSource.set('keyboard');
-                    rtl ? this.prev() : this.next();
+                    if (rtl)
+                        this.prev();
+                    else
+                        this.next();
                     handled = true;
                 }
                 break;
@@ -1114,8 +1176,8 @@ class CarouselComponent {
         const next = !this._isManuallyPaused();
         this._isManuallyPaused.set(next);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: CarouselComponent, isStandalone: true, selector: "tw-carousel", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, slidesPerView: { classPropertyName: "slidesPerView", publicName: "slidesPerView", isSignal: true, isRequired: false, transformFunction: null }, slidesToScroll: { classPropertyName: "slidesToScroll", publicName: "slidesToScroll", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, autoplay: { classPropertyName: "autoplay", publicName: "autoplay", isSignal: true, isRequired: false, transformFunction: null }, autoplayInterval: { classPropertyName: "autoplayInterval", publicName: "autoplayInterval", isSignal: true, isRequired: false, transformFunction: null }, pauseOnHover: { classPropertyName: "pauseOnHover", publicName: "pauseOnHover", isSignal: true, isRequired: false, transformFunction: null }, pauseOnFocusIn: { classPropertyName: "pauseOnFocusIn", publicName: "pauseOnFocusIn", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, keyboard: { classPropertyName: "keyboard", publicName: "keyboard", isSignal: true, isRequired: false, transformFunction: null }, snapAlign: { classPropertyName: "snapAlign", publicName: "snapAlign", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange", slideChange: "slideChange", autoplayPaused: "autoplayPaused", autoplayResumed: "autoplayResumed" }, host: { attributes: { "role": "region" }, listeners: { "pointerenter": "_onPointerEnter()", "pointerleave": "_onPointerLeave()", "focusin": "_onFocusIn()", "focusout": "_onFocusOut($event)" }, properties: { "attr.aria-roledescription": "\"carousel\"", "attr.aria-label": "ariaLabel()", "attr.aria-labelledby": "ariaLabelledBy()", "class": "rootClasses()" } }, queries: [{ propertyName: "slides", predicate: CarouselSlideComponent, isSignal: true }], viewQueries: [{ propertyName: "_viewportRef", first: true, predicate: ["viewport"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: CarouselComponent, isStandalone: true, selector: "tw-carousel", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, slidesPerView: { classPropertyName: "slidesPerView", publicName: "slidesPerView", isSignal: true, isRequired: false, transformFunction: null }, slidesToScroll: { classPropertyName: "slidesToScroll", publicName: "slidesToScroll", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, autoplay: { classPropertyName: "autoplay", publicName: "autoplay", isSignal: true, isRequired: false, transformFunction: null }, autoplayInterval: { classPropertyName: "autoplayInterval", publicName: "autoplayInterval", isSignal: true, isRequired: false, transformFunction: null }, pauseOnHover: { classPropertyName: "pauseOnHover", publicName: "pauseOnHover", isSignal: true, isRequired: false, transformFunction: null }, pauseOnFocusIn: { classPropertyName: "pauseOnFocusIn", publicName: "pauseOnFocusIn", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, keyboard: { classPropertyName: "keyboard", publicName: "keyboard", isSignal: true, isRequired: false, transformFunction: null }, snapAlign: { classPropertyName: "snapAlign", publicName: "snapAlign", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange", slideChange: "slideChange", autoplayPaused: "autoplayPaused", autoplayResumed: "autoplayResumed" }, host: { attributes: { "role": "region" }, listeners: { "pointerenter": "_onPointerEnter()", "pointerleave": "_onPointerLeave()", "focusin": "_onFocusIn()", "focusout": "_onFocusOut($event)" }, properties: { "attr.aria-roledescription": "\"carousel\"", "attr.aria-label": "ariaLabel()", "attr.aria-labelledby": "ariaLabelledBy()", "class": "rootClasses()" } }, queries: [{ propertyName: "slides", predicate: CarouselSlideComponent, isSignal: true }], viewQueries: [{ propertyName: "_viewportRef", first: true, predicate: ["viewport"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div
       #viewport
       data-tw-carousel-viewport
@@ -1160,7 +1222,7 @@ class CarouselComponent {
     <ng-content />
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CarouselComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CarouselComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tw-carousel',
@@ -1230,13 +1292,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
  */
 class CarouselIndicatorsComponent {
     /** Visual style. `'dots'` = small filled circles; `'lines'` = short horizontal/vertical bars; `'numbers'` = text 1, 2, 3 inside small pills. Defaults to `'dots'`. */
-    variant = input('dots', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    variant = input('dots', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     /** Color of the active indicator. Inactive indicators use neutral `fg-muted` tokens. Defaults to `'primary'`. */
-    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    color = input('primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     /** Indicator size (diameter/length and gap between indicators). Defaults to `'md'`. */
-    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     /** When `'overlay'`, the indicators float absolutely-positioned over the carousel with a `bg-overlay-control` translucent capsule backdrop for contrast. When `'below'`, they sit below the carousel as a normal block. Defaults to `'below'`. */
-    position = input('below', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    position = input('below', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
     /** @internal Direct parent carousel. */
     carousel = inject(CarouselComponent);
     _variantResult = computed(() => carouselVariants({
@@ -1246,8 +1312,10 @@ class CarouselIndicatorsComponent {
         position: this.position(),
         gap: this.carousel.gap(),
         snapAlign: this.carousel.snapAlign(),
-    }), ...(ngDevMode ? [{ debugName: "_variantResult" }] : /* istanbul ignore next */ []));
-    rootClasses = computed(() => this._variantResult().indicators(), ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_variantResult" }] : /* istanbul ignore next */ []));
+    rootClasses = computed(() => this._variantResult().indicators(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
     /**
      * @internal Sequence of page indices to render. Returns `[]` when the
      * parent carousel's `slidesPerView` is not `1` — a single dot can never
@@ -1265,7 +1333,8 @@ class CarouselIndicatorsComponent {
         for (let i = 0; i < count; i++)
             out[i] = i;
         return out;
-    }, ...(ngDevMode ? [{ debugName: "_pages" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_pages" }] : /* istanbul ignore next */ []));
     constructor() {
         if (isDevMode()) {
             let warned = false;
@@ -1296,8 +1365,8 @@ class CarouselIndicatorsComponent {
         this.carousel._setLastInteractionSource('indicator');
         this.carousel.scrollTo(targetIndex);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CarouselIndicatorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: CarouselIndicatorsComponent, isStandalone: true, selector: "tw-carousel-indicators", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "class": "rootClasses()" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CarouselIndicatorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: CarouselIndicatorsComponent, isStandalone: true, selector: "tw-carousel-indicators", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "class": "rootClasses()" } }, ngImport: i0, template: `
     @for (page of _pages(); track page) {
       <button
         type="button"
@@ -1313,7 +1382,7 @@ class CarouselIndicatorsComponent {
     }
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CarouselIndicatorsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CarouselIndicatorsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tw-carousel-indicators',
@@ -1354,7 +1423,8 @@ class CarouselPrevDirective {
     _hasLabelledBy = this._hostEl.hasAttribute('aria-labelledby');
     _isButton = this._hostEl.tagName === 'BUTTON';
     /** @internal True when prev is unavailable (at start and !loop). */
-    _isDisabled = computed(() => !this.carousel.loop() && this.carousel.isAtStart(), ...(ngDevMode ? [{ debugName: "_isDisabled" }] : /* istanbul ignore next */ []));
+    _isDisabled = computed(() => !this.carousel.loop() && this.carousel.isAtStart(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isDisabled" }] : /* istanbul ignore next */ []));
     _ariaLabel() {
         // Consumer-provided aria-label wins outright. Consumer-provided
         // aria-labelledby suppresses our binding so the two labels don't compete.
@@ -1378,10 +1448,10 @@ class CarouselPrevDirective {
         this.carousel._setLastInteractionSource('button');
         this.carousel.prev();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CarouselPrevDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: CarouselPrevDirective, isStandalone: true, selector: "[twCarouselPrev]", host: { listeners: { "click": "_onClick($event)" }, properties: { "attr.aria-label": "_ariaLabel()", "attr.disabled": "_isButtonDisabled()", "attr.aria-disabled": "_isDisabled() ? \"true\" : null", "attr.tabindex": "_isTabindex()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CarouselPrevDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: CarouselPrevDirective, isStandalone: true, selector: "[twCarouselPrev]", host: { listeners: { "click": "_onClick($event)" }, properties: { "attr.aria-label": "_ariaLabel()", "attr.disabled": "_isButtonDisabled()", "attr.aria-disabled": "_isDisabled() ? \"true\" : null", "attr.tabindex": "_isTabindex()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CarouselPrevDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CarouselPrevDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[twCarouselPrev]',
@@ -1407,7 +1477,8 @@ class CarouselNextDirective {
     _consumerLabel = this._hostEl.getAttribute('aria-label');
     _hasLabelledBy = this._hostEl.hasAttribute('aria-labelledby');
     _isButton = this._hostEl.tagName === 'BUTTON';
-    _isDisabled = computed(() => !this.carousel.loop() && this.carousel.isAtEnd(), ...(ngDevMode ? [{ debugName: "_isDisabled" }] : /* istanbul ignore next */ []));
+    _isDisabled = computed(() => !this.carousel.loop() && this.carousel.isAtEnd(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isDisabled" }] : /* istanbul ignore next */ []));
     _ariaLabel() {
         if (this._consumerLabel !== null)
             return this._consumerLabel;
@@ -1429,10 +1500,10 @@ class CarouselNextDirective {
         this.carousel._setLastInteractionSource('button');
         this.carousel.next();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CarouselNextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: CarouselNextDirective, isStandalone: true, selector: "[twCarouselNext]", host: { listeners: { "click": "_onClick($event)" }, properties: { "attr.aria-label": "_ariaLabel()", "attr.disabled": "_isButtonDisabled()", "attr.aria-disabled": "_isDisabled() ? \"true\" : null", "attr.tabindex": "_isTabindex()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CarouselNextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: CarouselNextDirective, isStandalone: true, selector: "[twCarouselNext]", host: { listeners: { "click": "_onClick($event)" }, properties: { "attr.aria-label": "_ariaLabel()", "attr.disabled": "_isButtonDisabled()", "attr.aria-disabled": "_isDisabled() ? \"true\" : null", "attr.tabindex": "_isTabindex()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CarouselNextDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CarouselNextDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[twCarouselNext]',