@coreui/angular-pro 5.7.12 → 5.7.14

package/fesm2022/coreui-angular-pro.mjs

@@ -1,7 +1,6 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Directive, input, Renderer2, effect, TemplateRef, booleanAttribute, untracked, NgModule, computed, Injectable, Component, afterNextRender, linkedSignal, output, signal, contentChildren, DestroyRef, forwardRef, DOCUMENT, NgZone, ChangeDetectorRef, contentChild, Input, IterableDiffers, numberAttribute, ViewChild, ContentChildren, ViewChildren, ChangeDetectionStrategy, PLATFORM_ID, RendererFactory2, viewChildren, viewChild, Injector, ViewContainerRef, inputBinding, outputBinding, MAX_ANIMATION_TIMEOUT, KeyValueDiffers, Pipe, HostBinding, model, afterEveryRender, afterRenderEffect, HostListener, runInInjectionContext, ViewEncapsulation } from '@angular/core';
+import { inject, ElementRef, Directive, input, Renderer2, effect, TemplateRef, booleanAttribute, untracked, NgModule, computed, Injectable, Component, linkedSignal, output, signal, contentChildren, DestroyRef, forwardRef, DOCUMENT, NgZone, ChangeDetectorRef, contentChild, afterNextRender, Input, IterableDiffers, numberAttribute, ViewChild, ContentChildren, ViewChildren, ChangeDetectionStrategy, PLATFORM_ID, RendererFactory2, viewChildren, viewChild, Injector, ViewContainerRef, inputBinding, outputBinding, MAX_ANIMATION_TIMEOUT, KeyValueDiffers, Pipe, HostBinding, model, afterEveryRender, afterRenderEffect, HostListener, runInInjectionContext, ViewEncapsulation } from '@angular/core';
 import { NgTemplateOutlet, I18nPluralPipe, NgStyle, AsyncPipe, isPlatformServer, isPlatformBrowser, formatDate } from '@angular/common';
-import { animation, animate, style, AnimationBuilder, useAnimation, group, query, trigger, state, transition, animateChild } from '@angular/animations';
 import { toObservable, takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR, FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
@@ -16,6 +15,7 @@ import { DomSanitizer } from '@angular/platform-browser';
 import * as i1$1 from '@angular/router';
 import { RouterModule, Router, ActivatedRoute, NavigationEnd, RouterLink } from '@angular/router';
 import { BreakpointObserver } from '@angular/cdk/layout';
+import { trigger, state, style, transition, animate } from '@angular/animations';
 import { IconDirective } from '@coreui/icons-angular';
 
 var BreakpointInfix;
@@ -266,74 +266,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
             args: [{ selector: 'c-accordion', template: '<ng-content />', exportAs: 'cAccordionItem', providers: [AccordionService], host: { '[class]': 'hostClasses()' }, styles: [":host{display:block}\n"] }]
         }], propDecorators: { flush: [{ type: i0.Input, args: [{ isSignal: true, alias: "flush", required: false }] }], alwaysOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "alwaysOpen", required: false }] }] } });
 
-const expandAnimation = animation([animate('{{ time }} {{ easing }}')]);
-const collapseAnimation = animation([
-    style({ height: '*', minHeight: '*' }),
-    animate('{{ time }} {{ easing }}', style({ height: 0, minHeight: 0 }))
-]);
-const expandHorizontalAnimation = animation([animate('{{ time }} {{ easing }}')]);
-const collapseHorizontalAnimation = animation([animate('{{ time }} {{ easing }}')]);
-
 class CollapseDirective {
-    #animationBuilder = inject(AnimationBuilder);
+    static ngAcceptInputType_animate;
+    static ngAcceptInputType_horizontal;
+    static ngAcceptInputType_navbar;
+    static ngAcceptInputType_visible;
     #hostElement = inject(ElementRef);
     #renderer = inject(Renderer2);
-    #player = undefined;
-    constructor() {
-        afterNextRender({
-            read: () => {
-                this.#initialized.set(true);
-            }
-        });
-    }
+    #unlistenTransitionEnd;
+    #isFirstChange = true;
     /**
-     * @ignore
+     * @ignore internal
      */
     animateInput = input(true, { ...(ngDevMode ? { debugName: "animateInput" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'animate' });
-    animate = linkedSignal({ ...(ngDevMode ? { debugName: "animate" } : /* istanbul ignore next */ {}), source: this.animateInput,
-        computation: (value) => value });
+    animate = linkedSignal(this.animateInput, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "animate" }] : /* istanbul ignore next */ []));
     /**
      * Set horizontal collapsing to transition the width instead of height.
-     * @type boolean
+     * @return boolean
      * @default false
      */
     horizontal = input(false, { ...(ngDevMode ? { debugName: "horizontal" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
-     * Toggle the visibility of collapsible element.
-     * @type boolean
+     * Toggle the visibility of a collapsible element.
+     * @return boolean
      * @default false
      */
     visibleInput = input(false, { ...(ngDevMode ? { debugName: "visibleInput" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'visible' });
+    /**
+     * Event emitted on visibility change. [docs]
+     * @return boolean
+     */
     visibleChange = output();
-    visible = linkedSignal({ ...(ngDevMode ? { debugName: "visible" } : /* istanbul ignore next */ {}), source: this.visibleInput, computation: (value) => value });
-    #initialized = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "#initialized" }] : /* istanbul ignore next */ []));
+    visible = linkedSignal(this.visibleInput, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
     #visibleEffect = effect(() => {
         const visible = this.visible();
-        if (this.#initialized()) {
-            this.createPlayer(visible);
+        if (this.#isFirstChange || !untracked(() => this.animate())) {
+            // no transition
+            this.#isFirstChange = false;
+            this.setInitialState(visible);
+            return;
         }
+        untracked(() => {
+            this.runTransition(visible);
+        });
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "#visibleEffect" }] : /* istanbul ignore next */ []));
     /**
-     * Add `navbar` prop for grouping and hiding navbar contents by a parent breakpoint.
-     * @type boolean
+     * Add a `navbar` prop for grouping and hiding navbar contents by a parent breakpoint.
+     * @return boolean
      * @default false
      */
     navbar = input(false, { ...(ngDevMode ? { debugName: "navbar" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * @ignore
-     */
-    duration = input('350ms', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "duration" }] : /* istanbul ignore next */ []));
-    /**
-     * @ignore
-     */
-    transition = input('ease', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "transition" }] : /* istanbul ignore next */ []));
     /**
      * Event emitted on visibility change. [docs]
-     * @type string
+     * @return string
      */
     collapseChange = output();
     hostClasses = computed(() => {
@@ -344,60 +332,88 @@ class CollapseDirective {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     ngOnDestroy() {
-        this.destroyPlayer();
+        this.clearPendingCallbacks();
     }
     toggle(visible = !this.visible()) {
         this.visible.set(visible);
     }
-    destroyPlayer() {
-        this.#player?.destroy();
-        this.#player = undefined;
+    clearPendingCallbacks() {
+        this.#unlistenTransitionEnd?.();
+        this.#unlistenTransitionEnd = undefined;
     }
-    createPlayer(visible = this.visible()) {
-        if (this.#player?.hasStarted()) {
-            this.destroyPlayer();
-        }
+    setInitialState(visible) {
         const host = this.#hostElement.nativeElement;
+        this.#renderer.addClass(host, 'collapse');
+        this.#renderer.removeClass(host, 'collapsing');
         if (visible) {
-            this.#renderer.removeStyle(host, 'display');
+            this.#renderer.addClass(host, 'show');
+        }
+        else {
+            this.#renderer.removeClass(host, 'show');
         }
-        const duration = this.animate() ? this.duration() : '0ms';
-        const expand = this.horizontal() ? expandHorizontalAnimation : expandAnimation;
-        const collapse = this.horizontal() ? collapseHorizontalAnimation : collapseAnimation;
+    }
+    runTransition(visible) {
+        this.clearPendingCallbacks();
+        const host = this.#hostElement.nativeElement;
         const dimension = this.horizontal() ? 'width' : 'height';
         const capitalizedDimension = dimension[0].toUpperCase() + dimension.slice(1);
         const scrollSize = `scroll${capitalizedDimension}`;
-        const animationFactory = this.#animationBuilder?.build(useAnimation(visible ? expand : collapse, { params: { time: duration, easing: this.transition() } }));
-        this.#player = animationFactory.create(host);
-        !visible && host.offsetHeight && host.style[dimension] && host.scrollHeight;
-        this.#renderer.setStyle(host, dimension, visible ? 0 : `${host.getBoundingClientRect()[dimension]}px`);
-        this.#player.onStart(() => {
+        const animate = this.animate();
+        if (visible) {
             this.setMaxSize();
+            // Switch off `collapse`/`show` before we measure its scroll size below.
             this.#renderer.removeClass(host, 'collapse');
+            this.#renderer.removeClass(host, 'show');
             this.#renderer.addClass(host, 'collapsing');
+            this.collapseChange?.emit('opening');
+            // Reading scrollHeight/scrollWidth forces a synchronous reflow, committing the 0-size
+            // starting point before we set the target size below, so the browser animates the change.
+            const targetSize = host[scrollSize];
+            this.#renderer.setStyle(host, dimension, `${targetSize}px`);
+        }
+        else {
+            // Lock in the current pixel size first so the browser has a committed starting point,
+            // then switch to the collapsing state and clear it so the size can animate down to 0.
+            const startSize = host.getBoundingClientRect()[dimension];
+            this.#renderer.setStyle(host, dimension, `${startSize}px`);
+            // Force a reflow so the browser registers the starting size before the next style change.
+            // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+            host.offsetHeight;
+            this.#renderer.removeClass(host, 'collapse');
             this.#renderer.removeClass(host, 'show');
-            this.#renderer.setStyle(host, dimension, visible ? `${host[scrollSize]}px` : '');
-            if (this.#player) {
-                this.collapseChange?.emit(visible ? 'opening' : 'collapsing');
-            }
-        });
-        this.#player.onDone(() => {
-            this.#renderer.removeClass(host, 'collapsing');
-            this.#renderer.addClass(host, 'collapse');
-            if (visible) {
-                this.#renderer.addClass(host, 'show');
-                this.#renderer.setStyle(host, dimension, '');
-            }
-            else {
-                this.#renderer.removeClass(host, 'show');
-            }
-            if (this.#player) {
-                this.collapseChange?.emit(visible ? 'open' : 'collapsed');
-                this.visibleChange?.emit(visible);
-            }
-            this.destroyPlayer();
-        });
-        this.#player?.play();
+            this.#renderer.addClass(host, 'collapsing');
+            this.collapseChange?.emit('collapsing');
+            // Now that the starting size is committed, set the target size (0) so the browser
+            // animates the transition down.
+            this.#renderer.setStyle(host, dimension, '0px');
+        }
+        const finish = () => this.finishTransition(visible, host, dimension);
+        if (animate) {
+            this.#unlistenTransitionEnd = this.#renderer.listen(host, 'transitionend', (event) => {
+                // Ignore bubbled transitionend events from descendant elements.
+                if (event.target === host && event.propertyName === dimension) {
+                    finish();
+                }
+            });
+        }
+        else {
+            finish();
+        }
+    }
+    finishTransition(visible, host, dimension) {
+        this.clearPendingCallbacks();
+        this.#renderer.removeClass(host, 'collapsing');
+        this.#renderer.addClass(host, 'collapse');
+        if (visible) {
+            this.#renderer.addClass(host, 'show');
+        }
+        else {
+            this.#renderer.removeClass(host, 'show');
+        }
+        this.#renderer.removeStyle(host, 'transition');
+        this.#renderer.removeStyle(host, dimension);
+        this.collapseChange?.emit(visible ? 'open' : 'collapsed');
+        this.visibleChange?.emit(visible);
     }
     setMaxSize() {
         const host = this.#hostElement.nativeElement;
@@ -408,16 +424,16 @@ class CollapseDirective {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CollapseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.0", type: CollapseDirective, isStandalone: true, selector: "[cCollapse]", inputs: { animateInput: { classPropertyName: "animateInput", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null }, visibleInput: { classPropertyName: "visibleInput", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, navbar: { classPropertyName: "navbar", publicName: "navbar", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, transition: { classPropertyName: "transition", publicName: "transition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleChange: "visibleChange", collapseChange: "collapseChange" }, host: { properties: { "class": "hostClasses()", "style": "{ display: \"none\" }" } }, exportAs: ["cCollapse"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.0", type: CollapseDirective, isStandalone: true, selector: "[cCollapse]", inputs: { animateInput: { classPropertyName: "animateInput", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null }, visibleInput: { classPropertyName: "visibleInput", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, navbar: { classPropertyName: "navbar", publicName: "navbar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleChange: "visibleChange", collapseChange: "collapseChange" }, host: { properties: { "class": "hostClasses()" } }, exportAs: ["cCollapse"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CollapseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cCollapse]',
                     exportAs: 'cCollapse',
-                    host: { '[class]': 'hostClasses()', '[style]': '{ display: "none" }' }
+                    host: { '[class]': 'hostClasses()' }
                 }]
-        }], ctorParameters: () => [], propDecorators: { animateInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }], horizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontal", required: false }] }], visibleInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], visibleChange: [{ type: i0.Output, args: ["visibleChange"] }], navbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "navbar", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], transition: [{ type: i0.Input, args: [{ isSignal: true, alias: "transition", required: false }] }], collapseChange: [{ type: i0.Output, args: ["collapseChange"] }] } });
+        }], propDecorators: { animateInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }], horizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontal", required: false }] }], visibleInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], visibleChange: [{ type: i0.Output, args: ["visibleChange"] }], navbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "navbar", required: false }] }], collapseChange: [{ type: i0.Output, args: ["collapseChange"] }] } });
 
 class CollapseModule {
     static forRoot() {
@@ -478,7 +494,7 @@ class AccordionItemComponent {
         this.#accordionService.toggleItem(this);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.0", type: AccordionItemComponent, isStandalone: true, selector: "c-accordion-item", inputs: { visibleInput: { classPropertyName: "visibleInput", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "accordion-item" }, queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true, isSignal: true }], exportAs: ["cAccordionItem"], ngImport: i0, template: "@let tmpl = templates();\n<ng-container>\n  <div class=\"accordion-header\">\n    <ng-container *ngTemplateOutlet=\"tmpl['accordionHeaderTemplate'] || defaultAccordionHeaderTemplate; context: itemContext\" />\n  </div>\n  <div class=\"accordion-collapse\" cCollapse [visible]=\"itemVisible()\" [attr.aria-expanded]=\"itemVisible()\" [id]=\"contentId\">\n    <ng-container *ngTemplateOutlet=\"tmpl['accordionBodyTemplate'] || defaultAccordionBodyTemplate; context: itemContext\" />\n  </div>\n</ng-container>\n\n<ng-template #defaultAccordionHeaderTemplate>\n  <button cAccordionButton [collapsed]=\"!itemVisible()\" [attr.aria-controls]=\"contentId\" (click)=\"toggleItem()\">\n    <ng-container *ngTemplateOutlet=\"tmpl['accordionHeader'] || defaultAccordionHeaderContentTemplate; context: itemContext\" />\n  </button>\n</ng-template>\n\n<ng-template #defaultAccordionHeaderContentTemplate>\n  <ng-content />\n</ng-template>\n\n<ng-template #defaultAccordionBodyTemplate>\n  <div class=\"accordion-body\">\n    <ng-container *ngTemplateOutlet=\"tmpl['accordionBody'] || defaultAccordionBodyContentTemplate; context: itemContext\" />\n  </div>\n</ng-template>\n\n<ng-template #defaultAccordionBodyContentTemplate>\n  <ng-content />\n</ng-template>\n", styles: [":host{display:block;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: AccordionButtonDirective, selector: "[cAccordionButton]", inputs: ["collapsed", "type"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CollapseDirective, selector: "[cCollapse]", inputs: ["animate", "horizontal", "visible", "navbar", "duration", "transition"], outputs: ["visibleChange", "collapseChange"], exportAs: ["cCollapse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.0", type: AccordionItemComponent, isStandalone: true, selector: "c-accordion-item", inputs: { visibleInput: { classPropertyName: "visibleInput", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "accordion-item" }, queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true, isSignal: true }], exportAs: ["cAccordionItem"], ngImport: i0, template: "@let tmpl = templates();\n<ng-container>\n  <div class=\"accordion-header\">\n    <ng-container *ngTemplateOutlet=\"tmpl['accordionHeaderTemplate'] || defaultAccordionHeaderTemplate; context: itemContext\" />\n  </div>\n  <div class=\"accordion-collapse\" cCollapse [visible]=\"itemVisible()\" [attr.aria-expanded]=\"itemVisible()\" [id]=\"contentId\">\n    <ng-container *ngTemplateOutlet=\"tmpl['accordionBodyTemplate'] || defaultAccordionBodyTemplate; context: itemContext\" />\n  </div>\n</ng-container>\n\n<ng-template #defaultAccordionHeaderTemplate>\n  <button cAccordionButton [collapsed]=\"!itemVisible()\" [attr.aria-controls]=\"contentId\" (click)=\"toggleItem()\">\n    <ng-container *ngTemplateOutlet=\"tmpl['accordionHeader'] || defaultAccordionHeaderContentTemplate; context: itemContext\" />\n  </button>\n</ng-template>\n\n<ng-template #defaultAccordionHeaderContentTemplate>\n  <ng-content />\n</ng-template>\n\n<ng-template #defaultAccordionBodyTemplate>\n  <div class=\"accordion-body\">\n    <ng-container *ngTemplateOutlet=\"tmpl['accordionBody'] || defaultAccordionBodyContentTemplate; context: itemContext\" />\n  </div>\n</ng-template>\n\n<ng-template #defaultAccordionBodyContentTemplate>\n  <ng-content />\n</ng-template>\n", styles: [":host{display:block;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: AccordionButtonDirective, selector: "[cAccordionButton]", inputs: ["collapsed", "type"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CollapseDirective, selector: "[cCollapse]", inputs: ["animate", "horizontal", "visible", "navbar"], outputs: ["visibleChange", "collapseChange"], exportAs: ["cCollapse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AccordionItemComponent, decorators: [{
             type: Component,
@@ -8217,15 +8233,8 @@ class CarouselService {
     setIndex(index) {
         this.#carouselIndex.next(index);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselService, decorators: [{
-            type: Injectable
-        }] });
-
-class CarouselState {
-    #carouselService = inject(CarouselService);
+    animating = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "animating" }] : /* istanbul ignore next */ []));
     #state = {
         activeItemIndex: -1,
         animate: true,
@@ -8244,7 +8253,7 @@ class CarouselState {
         if (prevState.activeItemIndex !== nextState.activeItemIndex) {
             const activeItemIndex = this.state.activeItemIndex || 0;
             const itemInterval = (this.state.items && this.state.items[activeItemIndex]?.interval()) || -1;
-            this.#carouselService.setIndex({
+            this.setIndex({
                 active: nextState.activeItemIndex,
                 interval: itemInterval,
                 lastItemIndex: (nextState.items?.length ?? 0) - 1
@@ -8266,7 +8275,7 @@ class CarouselState {
         }
     }
     setNextIndex(nextIndex) {
-        this.#carouselService.setIndex(nextIndex);
+        this.setIndex(nextIndex);
     }
     direction(direction = 'next') {
         this.state = { direction };
@@ -8295,10 +8304,10 @@ class CarouselState {
             interval: 0
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselState, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselState });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselState, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselService, decorators: [{
             type: Injectable
         }] });
 
@@ -8307,9 +8316,9 @@ class CarouselConfig {
     activeIndex = 0;
     /* Animate transition of slides */
     animate = true;
-    /* Default direction of auto changing of slides */
+    /* Default direction of auto-changing of slides */
     direction = 'next';
-    /* Default interval of auto changing of slides */
+    /* Default interval of auto-changing of slides */
     interval;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselConfig, providedIn: 'root' });
@@ -8323,7 +8332,6 @@ class CarouselComponent {
     config = inject(CarouselConfig);
     #hostElement = inject(ElementRef);
     #carouselService = inject(CarouselService);
-    #carouselState = inject(CarouselState);
     #intersectionService = inject(IntersectionService);
     #listenersService = inject(ListenersService);
     constructor() {
@@ -8331,7 +8339,7 @@ class CarouselComponent {
     }
     loadConfig() {
         this.activeIndex.update((activeIndex) => this.config?.activeIndex ?? activeIndex);
-        this.animate.update((animate) => this.config?.animate ?? animate);
+        this.animate.update((animate) => (animate === false ? animate : (this.config?.animate ?? animate)));
         this.direction.update((direction) => this.config?.direction ?? direction);
         this.interval.update((interval) => this.config?.interval ?? interval);
     }
@@ -8347,8 +8355,8 @@ class CarouselComponent {
      * @return boolean
      */
     animateInput = input(true, { ...(ngDevMode ? { debugName: "animateInput" } : /* istanbul ignore next */ {}), alias: 'animate' });
-    animate = linkedSignal({ ...(ngDevMode ? { debugName: "animate" } : /* istanbul ignore next */ {}), source: this.animateInput,
-        computation: (value) => value });
+    animate = linkedSignal(this.animateInput, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "animate" }] : /* istanbul ignore next */ []));
     /**
      * Carousel direction. [docs]
      * @return {'next' | 'prev'}
@@ -8366,7 +8374,7 @@ class CarouselComponent {
         computation: (value) => value });
     #intervalEffect = effect(() => {
         const interval = this.interval();
-        this.#carouselState.state = { interval: interval };
+        this.#carouselService.state = { interval: interval };
         interval ? this.setTimer() : this.resetTimer();
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "#intervalEffect" }] : /* istanbul ignore next */ []));
@@ -8384,7 +8392,7 @@ class CarouselComponent {
     touch = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "touch" }] : /* istanbul ignore next */ []));
     /**
-     * Set type of the transition.
+     * Set the type of the transition.
      * @return {'slide' | 'crossfade'}
      * @default 'slide'
      */
@@ -8407,16 +8415,18 @@ class CarouselComponent {
     swipeSubscription;
     #destroyRef = inject(DestroyRef);
     ngOnInit() {
-        this.carouselStateSubscribe();
+        this.carouselServiceSubscribe();
     }
     ngOnDestroy() {
         this.resetTimer();
         this.clearListeners();
         this.swipeSubscribe(false);
+        // Ensure IntersectionObserver is cleaned up
+        this.#intersectionService?.unobserve(this.#hostElement);
     }
     ngAfterContentInit() {
         this.intersectionServiceSubscribe();
-        this.#carouselState.state = {
+        this.#carouselService.state = {
             activeItemIndex: this.activeIndex(),
             animate: this.animate(),
             interval: this.interval(),
@@ -8454,8 +8464,8 @@ class CarouselComponent {
         this.resetTimer();
         if (interval > 0) {
             this.timerId = setTimeout(() => {
-                const nextIndex = this.#carouselState.direction(direction);
-                this.#carouselState.state = { activeItemIndex: nextIndex };
+                const nextIndex = this.#carouselService.direction(direction);
+                this.#carouselService.state = { activeItemIndex: nextIndex };
             }, interval);
         }
     }
@@ -8463,7 +8473,7 @@ class CarouselComponent {
         clearTimeout(this.timerId);
         this.timerId = undefined;
     }
-    carouselStateSubscribe() {
+    carouselServiceSubscribe() {
         this.#carouselService.carouselIndex$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((nextItem) => {
             if ('active' in nextItem && typeof nextItem.active === 'number') {
                 this.itemChange?.emit(nextItem.active);
@@ -8480,7 +8490,7 @@ class CarouselComponent {
         this.#intersectionService.createIntersectionObserver(this.#hostElement);
         this.#intersectionService.intersecting$
             .pipe(filter((next) => next.hostElement === this.#hostElement), finalize(() => {
-            this.#intersectionService.unobserve(this.#hostElement);
+            this.#intersectionService?.unobserve(this.#hostElement);
         }), takeUntilDestroyed(this.#destroyRef))
             .subscribe((next) => {
             this.visible = next.isIntersecting;
@@ -8498,10 +8508,13 @@ class CarouselComponent {
                 .subscribe(([touchstart, [touchend, touchmove]]) => {
                 touchstart.stopPropagation();
                 touchmove.stopPropagation();
+                if (this.#carouselService.animating()) {
+                    return;
+                }
                 const distanceX = touchstart.touches[0]?.clientX - touchmove.touches[0]?.clientX || 0;
                 if (Math.abs(distanceX) > 0.3 * carouselElement.clientWidth && touchstart.timeStamp <= touchmove.timeStamp) {
-                    const nextIndex = this.#carouselState.direction(distanceX > 0 ? 'next' : 'prev');
-                    this.#carouselState.state = { activeItemIndex: nextIndex };
+                    const nextIndex = this.#carouselService.direction(distanceX > 0 ? 'next' : 'prev');
+                    this.#carouselService.state = { activeItemIndex: nextIndex };
                 }
             });
         }
@@ -8510,11 +8523,11 @@ class CarouselComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: CarouselComponent, isStandalone: true, selector: "c-carousel", inputs: { activeIndexInput: { classPropertyName: "activeIndexInput", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, animateInput: { classPropertyName: "animateInput", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, directionInput: { classPropertyName: "directionInput", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, intervalInput: { classPropertyName: "intervalInput", publicName: "interval", isSignal: true, isRequired: false, transformFunction: null }, pause: { classPropertyName: "pause", publicName: "pause", isSignal: true, isRequired: false, transformFunction: null }, touch: { classPropertyName: "touch", publicName: "touch", isSignal: true, isRequired: false, transformFunction: null }, transition: { classPropertyName: "transition", publicName: "transition", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemChange: "itemChange" }, host: { properties: { "class.carousel-fade": "transition() === \"crossfade\" && animate()" }, classAttribute: "carousel slide" }, providers: [CarouselService, CarouselState, ListenersService], exportAs: ["cCarousel"], hostDirectives: [{ directive: ThemeDirective, inputs: ["dark", "dark"] }], ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:block}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: CarouselComponent, isStandalone: true, selector: "c-carousel", inputs: { activeIndexInput: { classPropertyName: "activeIndexInput", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, animateInput: { classPropertyName: "animateInput", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, directionInput: { classPropertyName: "directionInput", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, intervalInput: { classPropertyName: "intervalInput", publicName: "interval", isSignal: true, isRequired: false, transformFunction: null }, pause: { classPropertyName: "pause", publicName: "pause", isSignal: true, isRequired: false, transformFunction: null }, touch: { classPropertyName: "touch", publicName: "touch", isSignal: true, isRequired: false, transformFunction: null }, transition: { classPropertyName: "transition", publicName: "transition", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemChange: "itemChange" }, host: { properties: { "class.carousel-fade": "transition() === \"crossfade\" && animate()" }, classAttribute: "carousel slide" }, providers: [CarouselService, ListenersService], exportAs: ["cCarousel"], hostDirectives: [{ directive: ThemeDirective, inputs: ["dark", "dark"] }], ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:block}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-carousel', template: '<ng-content />', providers: [CarouselService, CarouselState, ListenersService], hostDirectives: [{ directive: ThemeDirective, inputs: ['dark'] }], exportAs: 'cCarousel', host: {
+            args: [{ selector: 'c-carousel', template: '<ng-content />', providers: [CarouselService, ListenersService], hostDirectives: [{ directive: ThemeDirective, inputs: ['dark'] }], exportAs: 'cCarousel', host: {
                         class: 'carousel slide',
                         '[class.carousel-fade]': 'transition() === "crossfade" && animate()'
                     }, styles: [":host{display:block}\n"] }]
@@ -8532,7 +8545,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
         }] });
 
 class CarouselControlComponent {
-    #carouselState = inject(CarouselState);
+    #carouselService = inject(CarouselService);
     /**
      * Carousel control caption. [docs]
      * @return string
@@ -8574,11 +8587,14 @@ class CarouselControlComponent {
         }
     }
     onClick($event) {
+        if (this.#carouselService.animating()) {
+            return;
+        }
         this.#play();
     }
     #play(direction = this.direction()) {
-        const nextIndex = this.#carouselState.direction(direction);
-        this.#carouselState.state = { activeItemIndex: nextIndex };
+        const nextIndex = this.#carouselService.direction(direction);
+        this.#carouselService.state = { activeItemIndex: nextIndex };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: CarouselControlComponent, isStandalone: true, selector: "c-carousel-control", inputs: { captionInput: { classPropertyName: "captionInput", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keyup": "onKeyUp($event)", "click": "onClick($event)" }, properties: { "attr.role": "role()", "class": "hostClasses()" } }, exportAs: ["cCarouselControl"], ngImport: i0, template: "<ng-content>\n  <span [attr.aria-hidden]=\"true\" [class]=\"carouselControlIconClass()\"></span>\n  <span class=\"visually-hidden\">{{ caption() }}</span>\n</ng-content>\n" });
@@ -8596,7 +8612,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 class CarouselIndicatorsComponent {
     #destroyRef = inject(DestroyRef);
     #carouselService = inject(CarouselService);
-    #carouselState = inject(CarouselState);
     items = [];
     active = signal(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
@@ -8610,16 +8625,19 @@ class CarouselIndicatorsComponent {
     ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
     ngOnInit() {
         this.#carouselService.carouselIndex$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((nextIndex) => {
-            this.items = this.#carouselState?.state?.items?.map((item) => item.index) ?? [];
+            this.items = this.#carouselService?.state?.items?.map((item) => item.index) ?? [];
             if ('active' in nextIndex) {
                 this.active.set(nextIndex.active ?? 0);
             }
         });
     }
     onClick(index) {
+        if (this.#carouselService.animating()) {
+            return;
+        }
         if (index !== this.active()) {
             const direction = index < this.active() ? 'prev' : 'next';
-            this.#carouselState.state = { direction, activeItemIndex: index };
+            this.#carouselService.state = { direction, activeItemIndex: index };
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselIndicatorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -8631,19 +8649,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
         }], propDecorators: { contentTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TemplateIdDirective), { ...{ descendants: true }, isSignal: true }] }] } });
 
 class CarouselItemComponent {
+    #elementRef = inject((ElementRef));
     #destroyRef = inject(DestroyRef);
     #carouselService = inject(CarouselService);
+    #timeoutId;
+    #rafId;
     index;
     /**
      * @ignore
      */
     activeInput = input(false, { ...(ngDevMode ? { debugName: "activeInput" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'active' });
-    active = linkedSignal({ ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), source: this.activeInput,
-        computation: (value) => {
-            return value;
-        } });
+    active = linkedSignal(this.activeInput, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
     /**
-     * Time delay before cycling to next item. If -1, uses carousel interval value.
+     * Time delay before cycling to the next item. If -1, uses carousel interval value.
      * @return number
      * @default -1
      */
@@ -8657,102 +8676,119 @@ class CarouselItemComponent {
     role = input('group', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
     constructor() {
+        this.#elementRef.nativeElement.style.transition = '1ms';
+    }
+    ngOnInit() {
+        console.log('OnInit', this.#carouselService.state.animate);
         this.#carouselService.carouselIndex$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((nextIndex) => {
             if ('active' in nextIndex) {
+                console.log('#carouselService', this.#carouselService.state.animate, this.#elementRef.nativeElement.style.transition);
+                if (this.#carouselService.state.animate && this.#elementRef.nativeElement.style.transition !== '') {
+                    this.#timeoutId = setTimeout(() => {
+                        this.#elementRef.nativeElement.style.transition = '';
+                        this.#timeoutId = undefined;
+                    }, 500);
+                }
+                this.prevActive.set(this.active());
                 this.active.set(nextIndex.active === this.index);
             }
         });
+        // Clean up timeout on destroy
+        this.#destroyRef.onDestroy(() => {
+            if (this.#timeoutId !== undefined) {
+                clearTimeout(this.#timeoutId);
+            }
+            if (this.#rafId !== undefined) {
+                cancelAnimationFrame(this.#rafId);
+            }
+        });
     }
+    hostClasses = computed(() => {
+        const order = this.orderClassName();
+        const direction = this.directionClassName();
+        return {
+            active: this.activeClass(),
+            [`${order}`]: !!order,
+            [`${direction}`]: !!direction,
+            'd-none': !this.activeClass() && !order && !direction
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    prevActive = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "prevActive" }] : /* istanbul ignore next */ []));
+    activeClass = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeClass" }] : /* istanbul ignore next */ []));
+    orderClassName = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orderClassName" }] : /* istanbul ignore next */ []));
+    directionClassName = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "directionClassName" }] : /* istanbul ignore next */ []));
+    #activeEffect = effect((OnCleanup) => {
+        const active = this.active();
+        const prevActive = untracked(this.prevActive);
+        const direction = this.#carouselService.state?.direction;
+        this.activeClass.set(prevActive);
+        if (active) {
+            this.orderClassName.set(`carousel-item-${direction}`);
+        }
+        if (prevActive || active) {
+            if (this.#rafId) {
+                cancelAnimationFrame(this.#rafId);
+            }
+            this.#rafId = requestAnimationFrame(() => {
+                //  reflow is necessary to proper transition
+                void this.#elementRef.nativeElement.offsetHeight;
+                this.directionClassName.set(`carousel-item-${direction === 'next' ? 'start' : 'end'}`);
+                this.#rafId = undefined;
+            });
+        }
+        const handleTransitionStart = () => {
+            if (active) {
+                this.#carouselService.animating.set(true);
+            }
+        };
+        const handleTransitionEnd = () => {
+            if (active) {
+                this.#carouselService.animating.set(false);
+            }
+            this.directionClassName.set('');
+            this.orderClassName.set('');
+            this.activeClass.set(active);
+        };
+        this.#elementRef.nativeElement.addEventListener('transitionstart', handleTransitionStart);
+        this.#elementRef.nativeElement.addEventListener('transitionend', handleTransitionEnd);
+        OnCleanup(() => {
+            this.#elementRef.nativeElement.removeEventListener('transitionstart', handleTransitionStart);
+            this.#elementRef.nativeElement.removeEventListener('transitionend', handleTransitionEnd);
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#activeEffect" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: CarouselItemComponent, isStandalone: true, selector: "c-carousel-item", inputs: { activeInput: { classPropertyName: "activeInput", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, interval: { classPropertyName: "interval", publicName: "interval", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.active": "active()", "attr.role": "role()" }, classAttribute: "carousel-item" }, exportAs: ["cCarouselItem"], ngImport: i0, template: "@if (active()) {\n  <ng-content />\n}\n", styles: [":host{display:block}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: CarouselItemComponent, isStandalone: true, selector: "c-carousel-item", inputs: { activeInput: { classPropertyName: "activeInput", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, interval: { classPropertyName: "interval", publicName: "interval", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.role": "role()" }, classAttribute: "carousel-item" }, exportAs: ["cCarouselItem"], ngImport: i0, template: `
+    <!--    @if (this.activeClass() || (this.orderClassName() && this.directionClassName())) {-->
+    <ng-content />
+    <!--    }-->
+  `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-carousel-item', exportAs: 'cCarouselItem', host: {
+            args: [{
+                    selector: 'c-carousel-item',
+                    template: `
+    <!--    @if (this.activeClass() || (this.orderClassName() && this.directionClassName())) {-->
+    <ng-content />
+    <!--    }-->
+  `,
+                    exportAs: 'cCarouselItem',
+                    host: {
                         class: 'carousel-item',
-                        '[class.active]': 'active()',
+                        '[class]': 'hostClasses()',
                         '[attr.role]': 'role()'
-                    }, template: "@if (active()) {\n  <ng-content />\n}\n", styles: [":host{display:block}\n"] }]
+                    }
+                }]
         }], ctorParameters: () => [], propDecorators: { activeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], interval: [{ type: i0.Input, args: [{ isSignal: true, alias: "interval", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }] } });
 
-function toSlideLeft(fromState, toState) {
-    return toState.left === true && toState.type === 'slide';
-}
-function toSlideRight(fromState, toState) {
-    return toState.left === false && toState.type === 'slide';
-}
-function toFadeLeft(fromState, toState) {
-    return toState.left === true && toState.type !== 'slide';
-}
-function toFadeRight(fromState, toState) {
-    return toState.left === false && toState.type !== 'slide';
-}
-const slideAnimationLeft = animation(group([
-    query(':leave', [
-        animate('0.6s ease-in-out', style({
-            transform: 'translateX(-100%)'
-        }))
-    ], { optional: true }),
-    query(':enter', [
-        style({
-            transform: 'translateX(100%)'
-        }),
-        animate('0.6s ease-in-out', style('*'))
-    ], { optional: true })
-]));
-const slideAnimationRight = animation(group([
-    query(':enter', [
-        style({
-            transform: 'translateX(-100%)'
-        }),
-        animate('0.6s ease-in-out', style('*'))
-    ], { optional: true }),
-    query(':leave', [
-        animate('0.6s ease-in-out', style({
-            transform: 'translateX(100%)'
-        }))
-    ], { optional: true })
-]));
-const fadeAnimationLeft = animation(group([
-    query(':leave', [
-        animate('0.9s ease-in-out', style({
-            zIndex: 0,
-            opacity: 0
-        }))
-    ], { optional: true }),
-    query(':enter', [
-        style({
-            zIndex: 1,
-            opacity: 1
-        }),
-        animate('0.6s ease-in-out', style('*'))
-    ], { optional: true })
-]));
-const fadeAnimationRight = animation(group([
-    query(':enter', [
-        style({
-            zIndex: 1,
-            opacity: 1
-        }),
-        animate('0.6s ease-in-out', style('*'))
-    ], { optional: true }),
-    query(':leave', [
-        animate('0.9s ease-in-out', style({
-            zIndex: 0,
-            opacity: 0
-        }))
-    ], { optional: true })
-]));
-const carouselPlay = trigger('carouselPlay', [
-    state('*', style({ transform: 'translateX(0)', display: 'block', opacity: 1 })),
-    transition(toFadeLeft, useAnimation(fadeAnimationLeft)),
-    transition(toFadeRight, useAnimation(fadeAnimationRight)),
-    transition(toSlideLeft, useAnimation(slideAnimationLeft)),
-    transition(toSlideRight, useAnimation(slideAnimationRight))
-]);
-
 class CarouselInnerComponent {
-    #carouselState = inject(CarouselState);
+    #carouselService = inject(CarouselService);
     activeIndex = signal(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
     animate = signal(true, /* @ts-ignore */
@@ -8780,7 +8816,7 @@ class CarouselInnerComponent {
     }
     ngAfterContentChecked() {
         this.setItems();
-        const state = this.#carouselState?.state;
+        const state = this.#carouselService?.state;
         const nextIndex = state?.activeItemIndex;
         const nextDirection = state?.direction;
         if (this.activeIndex() !== nextIndex) {
@@ -8795,18 +8831,16 @@ class CarouselInnerComponent {
         const contentItems = this.contentItems();
         if (this.#prevContentItems() !== contentItems) {
             this.#prevContentItems.set([...contentItems]);
-            this.#carouselState.setItems(contentItems);
+            this.#carouselService.setItems(contentItems);
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselInnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.0", type: CarouselInnerComponent, isStandalone: true, selector: "c-carousel-inner", host: { properties: { "@carouselPlay": "slideType()", "@.disabled": "!animate()", "attr.aria-live": "ariaLive()" }, classAttribute: "carousel-inner" }, queries: [{ propertyName: "contentItems", predicate: CarouselItemComponent, isSignal: true }], ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:block}\n"], animations: [carouselPlay] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.0", type: CarouselInnerComponent, isStandalone: true, selector: "c-carousel-inner", host: { properties: { "attr.aria-live": "ariaLive()" }, classAttribute: "carousel-inner" }, queries: [{ propertyName: "contentItems", predicate: CarouselItemComponent, isSignal: true }], ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:block}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselInnerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-carousel-inner', animations: [carouselPlay], template: '<ng-content />', host: {
+            args: [{ selector: 'c-carousel-inner', template: '<ng-content />', host: {
                         class: 'carousel-inner',
-                        '[@carouselPlay]': 'slideType()',
-                        '[@.disabled]': '!animate()',
                         '[attr.aria-live]': 'ariaLive()'
                     }, styles: [":host{display:block}\n"] }]
         }], propDecorators: { contentItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CarouselItemComponent), { isSignal: true }] }] } });
@@ -8827,7 +8861,7 @@ class CarouselModule {
             CarouselIndicatorsComponent,
             CarouselInnerComponent,
             CarouselItemComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselModule, providers: [CarouselService, CarouselState, CarouselConfig] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselModule, providers: [CarouselService, CarouselConfig] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselModule, decorators: [{
             type: NgModule,
@@ -8840,7 +8874,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         CarouselInnerComponent,
                         CarouselItemComponent
                     ],
-                    providers: [CarouselService, CarouselState, CarouselConfig],
+                    providers: [CarouselService, CarouselConfig],
                     exports: [
                         CarouselComponent,
                         CarouselCaptionComponent,
@@ -12464,46 +12498,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 }]
         }] });
 
-const loadingButtonAnimation = trigger('loadingButton', [
-    transition(':enter', [
-        style({
-            opacity: 0,
-            marginRight: '1rem',
-            marginLeft: '-2rem'
-        }),
-        animate('.15s ease-in-out', style({
-            opacity: 1,
-            marginRight: '1rem',
-            marginLeft: '0rem'
-        }))
-    ]),
-    transition(':leave', [
-        style({
-            opacity: 1
-        }),
-        animate('.15s ease-in-out', style({
-            opacity: 0,
-            marginRight: '1rem',
-            marginLeft: '-2rem'
-        }))
-    ])
-]);
-
 class LoadingButtonComponent extends ButtonDirective {
     /**
-     * Makes button disabled when loading.
-     * @type boolean
+     * Makes a button disabled when loading.
+     * @return boolean
      * @default false
      */
     disabledOnLoading = input(false, { ...(ngDevMode ? { debugName: "disabledOnLoading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Loading state (set to true to start animation).
-     * @type boolean
+     * @return boolean
      */
     loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Event emitted on loading change
-     * @type boolean
+     * @return boolean
      */
     loadingChange = output();
     loadingEffect = effect(() => {
@@ -12511,8 +12520,8 @@ class LoadingButtonComponent extends ButtonDirective {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "loadingEffect" }] : /* istanbul ignore next */ []));
     /**
-     * Sets type of spinner.
-     * @type {'border' | 'grow'}
+     * Sets a type of spinner.
+     * @return {'border' | 'grow'}
      */
     spinnerType = input('border', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "spinnerType" }] : /* istanbul ignore next */ []));
@@ -12541,11 +12550,22 @@ class LoadingButtonComponent extends ButtonDirective {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: LoadingButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: LoadingButtonComponent, isStandalone: true, selector: "button[cLoadingButton], a[cLoadingButton]", inputs: { disabledOnLoading: { classPropertyName: "disabledOnLoading", publicName: "disabledOnLoading", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, spinnerType: { classPropertyName: "spinnerType", publicName: "spinnerType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loadingChange: "loadingChange" }, host: { properties: { "class": "hostClasses()", "attr.aria-disabled": "ariaDisabled()", "attr.aria-pressed": "isActive()", "attr.disabled": "attrDisabled()", "attr.tabindex": "tabIndex()", "attr.type": "type()" }, classAttribute: "btn-loading" }, exportAs: ["cLoadingButton"], usesInheritance: true, ngImport: i0, template: "@if (loading()) {\n  <c-spinner [variant]=\"spinnerType()\" size=\"sm\" class=\"btn-loading-spinner\" @loadingButton />\n}\n<ng-content />\n", dependencies: [{ kind: "component", type: SpinnerComponent, selector: "c-spinner", inputs: ["color", "label", "size", "variant", "role"] }], animations: [loadingButtonAnimation] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: LoadingButtonComponent, isStandalone: true, selector: "button[cLoadingButton], a[cLoadingButton]", inputs: { disabledOnLoading: { classPropertyName: "disabledOnLoading", publicName: "disabledOnLoading", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, spinnerType: { classPropertyName: "spinnerType", publicName: "spinnerType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loadingChange: "loadingChange" }, host: { properties: { "class": "hostClasses()", "attr.aria-disabled": "ariaDisabled()", "attr.aria-pressed": "isActive()", "attr.disabled": "attrDisabled()", "attr.tabindex": "tabIndex()", "attr.type": "type()" }, classAttribute: "btn-loading" }, exportAs: ["cLoadingButton"], usesInheritance: true, ngImport: i0, template: `
+    @if (loading()) {
+      <c-spinner
+        [variant]="spinnerType()"
+        size="sm"
+        class="btn-loading-spinner"
+        animate.enter="spinner-enter"
+        animate.leave="spinner-leave"
+      />
+    }
+    <ng-content />
+  `, isInline: true, styles: [":host ::ng-deep .btn-loading-spinner{margin-inline-end:1rem;margin-inline-start:0}.spinner-enter{animation:spinnerEnter .15s ease-in-out}@keyframes spinnerEnter{0%{opacity:0;margin-inline-start:-2rem}to{opacity:1;margin-inline-start:0}}.spinner-leave{animation:spinnerLeave .15s ease-in-out}@keyframes spinnerLeave{0%{opacity:1;margin-inline-start:0}to{opacity:0;margin-inline-start:-2rem}}\n"], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "c-spinner", inputs: ["color", "label", "size", "variant", "role"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: LoadingButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'button[cLoadingButton], a[cLoadingButton]', exportAs: 'cLoadingButton', imports: [SpinnerComponent], animations: [loadingButtonAnimation], host: {
+            args: [{ selector: 'button[cLoadingButton], a[cLoadingButton]', exportAs: 'cLoadingButton', imports: [SpinnerComponent], host: {
                         class: 'btn-loading',
                         '[class]': 'hostClasses()',
                         '[attr.aria-disabled]': 'ariaDisabled()',
@@ -12553,7 +12573,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         '[attr.disabled]': 'attrDisabled()',
                         '[attr.tabindex]': 'tabIndex()',
                         '[attr.type]': 'type()'
-                    }, template: "@if (loading()) {\n  <c-spinner [variant]=\"spinnerType()\" size=\"sm\" class=\"btn-loading-spinner\" @loadingButton />\n}\n<ng-content />\n" }]
+                    }, template: `
+    @if (loading()) {
+      <c-spinner
+        [variant]="spinnerType()"
+        size="sm"
+        class="btn-loading-spinner"
+        animate.enter="spinner-enter"
+        animate.leave="spinner-leave"
+      />
+    }
+    <ng-content />
+  `, styles: [":host ::ng-deep .btn-loading-spinner{margin-inline-end:1rem;margin-inline-start:0}.spinner-enter{animation:spinnerEnter .15s ease-in-out}@keyframes spinnerEnter{0%{opacity:0;margin-inline-start:-2rem}to{opacity:1;margin-inline-start:0}}.spinner-leave{animation:spinnerLeave .15s ease-in-out}@keyframes spinnerLeave{0%{opacity:1;margin-inline-start:0}to{opacity:0;margin-inline-start:-2rem}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { disabledOnLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledOnLoading", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingChange: [{ type: i0.Output, args: ["loadingChange"] }], spinnerType: [{ type: i0.Input, args: [{ isSignal: true, alias: "spinnerType", required: false }] }] } });
 
 class LoadingButtonModule {
@@ -12887,12 +12918,11 @@ class NavbarComponent {
             if (!collapse) {
                 return;
             }
-            const animate = collapse.animate();
             collapse.animate.set(false);
             collapse.toggle(false);
             setTimeout(() => {
                 collapse.toggle(result.matches);
-                setTimeout(() => collapse.animate.set(animate));
+                setTimeout(() => collapse.animate.set(collapse.animateInput()));
             });
         });
         onCleanup(() => subscription.unsubscribe());
@@ -12973,27 +13003,29 @@ class NavbarTogglerDirective {
     }
     /**
      * Reference to navbar collapse element (via # template variable) . [docs]
-     * @type string
+     * @return string
      * @default 'button'
      */
     collapseRef = input(undefined, { ...(ngDevMode ? { debugName: "collapseRef" } : /* istanbul ignore next */ {}), alias: 'cNavbarToggler' });
     /**
      * Default type for navbar-toggler. [docs]
-     * @type string
+     * @return string
      * @default 'button'
      */
     type = input('button', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
     /**
      * Default aria-label attr for navbar-toggler. [docs]
-     * @type string
+     * @return string
      * @default 'Toggle navigation'
      */
     ariaLabel = input('Toggle navigation', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     handleClick($event) {
         const collapseRef = this.collapseRef();
-        collapseRef?.toggle(!collapseRef?.visible());
+        if (collapseRef) {
+            collapseRef?.toggle(!collapseRef?.visible());
+        }
     }
     addDefaultIcon() {
         const span = this.#renderer.createElement('span');
@@ -13893,6 +13925,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
         }] });
 
 class OtpService {
+    count = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
     disabled = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     masked = signal(false, /* @ts-ignore */
@@ -13966,12 +14000,22 @@ class OtpDirective {
     ...(ngDevMode ? [{ debugName: "tabIndex" }] : /* istanbul ignore next */ []));
     index = signal(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+    // Only the first slot advertises the one-time code, so SMS autofill and
+    // password managers target a single field instead of every slot.
+    autocomplete = computed(() => (this.index() === 0 ? 'one-time-code' : 'off'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
+    // An empty first slot is where autofill lands, so it has to accept the whole
+    // code; once it holds a character, it behaves like every other slot.
+    maxLength = computed(() => (this.index() === 0 && !this.value() ? this.#otpService.count() || 1 : 1), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
+    enterKeyHint = computed(() => (this.index() === this.#otpService.count() - 1 ? 'done' : 'next'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enterKeyHint" }] : /* istanbul ignore next */ []));
     focus(origin) {
         if (!this.disabled) {
             this.hostElement.nativeElement.focus();
             this.focusable.set(true);
         }
-        // console.log('focus called with origin:', origin, this.index());
+        // console.log('focus called with origin: ', origin, this.index());
     }
     #otpServiceEffect = effect(() => {
         this.#disabled.set(this.#otpService.disabled());
@@ -13997,7 +14041,7 @@ class OtpDirective {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OtpDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.0", type: OtpDirective, isStandalone: true, selector: "input[cOtp]", inputs: { placeholderInput: { classPropertyName: "placeholderInput", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "selectionchange": "handleSelectionChange($event)" }, properties: { "class": "hostClasses()", "attr.inputMode": "inputMode()", "attr.maxLength": "1", "autocomplete": "\"one-time-code\"", "attr.pattern": "pattern()", "placeholder": "placeholder()", "readOnly": "readOnly()", "tabIndex": "tabIndex()", "attr.type": "inputType()" }, classAttribute: "form-otp-control" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.0", type: OtpDirective, isStandalone: true, selector: "input[cOtp]", inputs: { placeholderInput: { classPropertyName: "placeholderInput", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "selectionchange": "handleSelectionChange($event)" }, properties: { "class": "hostClasses()", "attr.inputMode": "inputMode()", "attr.maxLength": "maxLength()", "autocomplete": "autocomplete()", "attr.autocapitalize": "\"off\"", "attr.autocorrect": "\"off\"", "attr.enterkeyhint": "enterKeyHint()", "attr.spellcheck": "\"false\"", "attr.pattern": "pattern()", "placeholder": "placeholder()", "readOnly": "readOnly()", "tabIndex": "tabIndex()", "attr.type": "inputType()" }, classAttribute: "form-otp-control" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OtpDirective, decorators: [{
             type: Directive,
@@ -14008,8 +14052,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         class: 'form-otp-control',
                         '[class]': 'hostClasses()',
                         '[attr.inputMode]': 'inputMode()',
-                        '[attr.maxLength]': '1',
-                        '[autocomplete]': '"one-time-code"',
+                        '[attr.maxLength]': 'maxLength()',
+                        '[autocomplete]': 'autocomplete()',
+                        '[attr.autocapitalize]': '"off"',
+                        '[attr.autocorrect]': '"off"',
+                        '[attr.enterkeyhint]': 'enterKeyHint()',
+                        '[attr.spellcheck]': '"false"',
                         '[attr.pattern]': 'pattern()',
                         '[placeholder]': 'placeholder()',
                         '[readOnly]': 'readOnly()',
@@ -14087,19 +14135,18 @@ class OneTimePasswordComponent {
     ariaLabel = input((index, total) => `Digit ${index + 1} of ${total}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     /**
-     * Automatically submit the form when all one time password fields are filled.
+     * Automatically submit the form when all one-time password fields are filled.
      * @default: false
      */
     autoSubmit = input(false, { ...(ngDevMode ? { debugName: "autoSubmit" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    // readonly children = input();
     /**
-     * Initial value for Angular one time password input.
+     * Initial value for Angular one-time password input.
      * @default: undefined
      */
     defaultValue = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "defaultValue" }] : /* istanbul ignore next */ []));
     /**
-     * Disable all one time password (OTP) input fields.
+     * Disable all one-time password (OTP) input fields.
      * @default: false
      */
     disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'disabled' });
@@ -14111,7 +14158,7 @@ class OneTimePasswordComponent {
      */
     linear = input(true, { ...(ngDevMode ? { debugName: "linear" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
-     * Show input as password (masked characters).
+     * Show input as a password (masked characters).
      * @default: false
      */
     masked = input(false, { ...(ngDevMode ? { debugName: "masked" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -14122,12 +14169,12 @@ class OneTimePasswordComponent {
     placeholder = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     /**
-     * Make Angular OTP input component read-only.
+     * Make the Angular OTP input component read-only.
      * @default: false
      */
     readOnly = input(false, { ...(ngDevMode ? { debugName: "readOnly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
-     * Sets the visual size of the React.js one time password (OTP) input. Use 'sm' for small or 'lg' for large input fields.
+     * Sets the visual size of the Angular one-time password (OTP) input. Use 'sm' for small or 'lg' for large input fields.
      * @default: undefined
      */
     sizing = input(/* @ts-ignore */
@@ -14176,14 +14223,15 @@ class OneTimePasswordComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "#valueEffect" }] : /* istanbul ignore next */ []));
     /**
-     * Event triggered when the Angular one time password (OTP) value changes.
+     * Event triggered when the Angular one-time password (OTP) value changes.
      */
     valueChange = output();
     /**
-     * Callback triggered when all Angular one time password (OTP) fields are filled.
+     * Callback triggered when all Angular one-time password (OTP) fields are filled.
      */
     complete = output();
     #otpServiceEffect = effect(() => {
+        this.#otpService.count.set(this.inputCount());
         this.#otpService.disabled.set(this.disabled());
         this.#otpService.masked.set(this.masked());
         this.#otpService.placeholder.set(this.placeholder());
@@ -14203,7 +14251,6 @@ class OneTimePasswordComponent {
         };
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-    // protected readonly inputElementRefs = contentChildren(OtpDirective, { read: ElementRef<HTMLInputElement>, descendants: true });
     inputRefs = contentChildren(OtpDirective, { ...(ngDevMode ? { debugName: "inputRefs" } : /* istanbul ignore next */ {}), descendants: true });
     inputCount = computed(() => this.inputRefs().length, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "inputCount" }] : /* istanbul ignore next */ []));
@@ -14282,9 +14329,48 @@ class OneTimePasswordComponent {
         });
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "#inputsArrayEffect" }] : /* istanbul ignore next */ []));
+    // Write `chars` across the slots starting at `startIndex`, then move focus.
+    // Shared by paste and by multi-character `input` events.
+    #distributeChars(startIndex, chars) {
+        const inputCount = this.inputCount();
+        if (!inputCount) {
+            return;
+        }
+        // A value at least as long as the field is a complete code: fill from the
+        // first slot, whichever slot happens to be focused.
+        const start = chars.length >= inputCount ? 0 : startIndex;
+        const newValues = [...this.#inputValues()];
+        for (let i = 0; i < chars.length && start + i < inputCount; i++) {
+            newValues[start + i] = chars[i];
+        }
+        this.#inputValues.set(newValues);
+        setTimeout(() => {
+            // Focus the next empty input or the last filled one
+            const nextEmptyIndex = start + chars.length;
+            if (nextEmptyIndex < inputCount) {
+                this.#focusKeyManager.setActiveItem(nextEmptyIndex);
+            }
+            else {
+                this.#focusKeyManager.setLastItemActive();
+            }
+        });
+    }
     handleInputChange($event, index) {
         this.#focusKeyManager.updateActiveItem(index);
         const inputValue = $event.target.value;
+        // SMS autofill, password managers, dictation and IME commits insert the
+        // whole code at once and fire `input`, not `paste`. Spread it across the
+        // slots instead of leaving it in one of them.
+        if (inputValue.length > 1) {
+            const chars = extractValidChars(inputValue, this.type());
+            // The slot is written from the state, so restore what it holds — an
+            // all-invalid value leaves the state untouched.
+            $event.target.value = this.#inputValues()[index] ?? '';
+            if (chars) {
+                this.#distributeChars(index, chars);
+            }
+            return;
+        }
         if (inputValue.length === 1 && !isValidInput(inputValue, this.type())) {
             $event.target.value = '';
             this.#inputValues.update((value) => {
@@ -14356,30 +14442,11 @@ class OneTimePasswordComponent {
     }
     handlePaste($event, index) {
         $event.preventDefault();
-        const inputCount = this.inputCount();
         const pastedData = $event.clipboardData?.getData('text') ?? '';
         const validChars = extractValidChars(pastedData, this.type());
         if (!validChars)
             return;
-        const newValues = [...this.#inputValues()];
-        const startIndex = index;
-        for (let i = 0; i < validChars.length && startIndex + i < inputCount; i++) {
-            newValues[startIndex + i] = validChars[i];
-        }
-        // untracked(() => {
-        this.#inputValues.set(newValues);
-        // });
-        setTimeout(() => {
-            // Focus the next empty input or the last filled input
-            const nextEmptyIndex = startIndex + validChars.length;
-            if (nextEmptyIndex < inputCount) {
-                this.#focusKeyManager.setActiveItem(nextEmptyIndex);
-                // this.#focusKeyManager.setNextItemActive();
-            }
-            else {
-                this.#focusKeyManager.setLastItemActive();
-            }
-        });
+        this.#distributeChars(index, validChars);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OneTimePasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.0", type: OneTimePasswordComponent, isStandalone: true, selector: "c-one-time-password", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, autoSubmit: { classPropertyName: "autoSubmit", publicName: "autoSubmit", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, masked: { classPropertyName: "masked", publicName: "masked", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, sizing: { classPropertyName: "sizing", publicName: "sizing", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, valid: { classPropertyName: "valid", publicName: "valid", isSignal: true, isRequired: false, transformFunction: null }, valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", complete: "complete" }, host: { attributes: { "role": "group" }, properties: { "class": "hostClasses()" } }, providers: [
@@ -14419,8 +14486,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 }]
         }] });
 
-// export * from './one-time-password.types';
-
 class PageLinkDirective {
     static ngAcceptInputType_disabled;
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -19538,7 +19603,7 @@ class StepperComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "allStepsValid" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: StepperComponent, isStandalone: true, selector: "c-stepper", inputs: { activeStepIndexInput: { classPropertyName: "activeStepIndexInput", publicName: "activeStepIndex", isSignal: true, isRequired: false, transformFunction: null }, defaultActiveStepIndex: { classPropertyName: "defaultActiveStepIndex", publicName: "defaultActiveStepIndex", isSignal: true, isRequired: false, transformFunction: null }, idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, stepButtonLayout: { classPropertyName: "stepButtonLayout", publicName: "stepButtonLayout", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { finished: "finished", onReset: "onReset", activeStepIndexChange: "activeStepIndexChange" }, host: { properties: { "class": "hostClasses()", "id": "id()" }, classAttribute: "stepper" }, queries: [{ propertyName: "stepsContent", predicate: StepperStepComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "stepButtons", predicate: StepButtonDirective, descendants: true, isSignal: true }], exportAs: ["cStepper"], ngImport: i0, template: "@let isVertical = layout() === 'vertical';\n@let activeIdx = activeStepIndex();\n@let finished = finishing();\n<ol [attr.aria-orientation]=\"layout()\" class=\"stepper-steps\" role=\"tablist\">\n  @for (step of steps(); track step.id; let idx = $index, last = $last) {\n    @let isActive = !finished && activeIdx === idx;\n    @let isComplete = finished || idx < activeIdx;\n    @let isDisabled = step.disabled || finished || (linear() && idx > activeIdx + 1 && step.disabled);\n    @let stepId = step.id;\n    @let panelId = `${step.id}-panel`;\n    <li [class]=\"['stepper-step', stepButtonLayout()]\" role=\"presentation\">\n      <button\n        #stepButton\n        cStepButton\n        [attr.inert]=\"step.disabled || null\"\n        [attr.aria-selected]=\"isActive || null\"\n        [attr.aria-controls]=\"panelId\"\n        [tabindex]=\"isActive ? 0 : -1\"\n        [disabled]=\"isDisabled\"\n        [class]=\"{ 'stepper-step-button': true, active: isActive, complete: isComplete }\"\n        id=\"{{ stepId }}\"\n        type=\"button\"\n        role=\"tab\"\n        (click)=\"step.disabled || handleStepClick($event, idx)\"\n        (keydown)=\"handleKeyDown($event)\"\n      >\n        <span class=\"stepper-step-indicator\">\n          @if (isComplete) {\n            <span class=\"stepper-step-indicator-icon\"></span>\n          } @else {\n            <span class=\"stepper-step-indicator-text\">\n              <ng-container\n                [ngTemplateOutlet]=\"step.indicatorRef || indicatorTpl\"\n                [ngTemplateOutletContext]=\"step.indicatorCtx\"\n              />\n              <ng-template #indicatorTpl>{{ step.indicator }}</ng-template>\n            </span>\n          }\n        </span>\n        <span class=\"stepper-step-label\">\n          <ng-container [ngTemplateOutlet]=\"step.labelRef || labelTpl\" [ngTemplateOutletContext]=\"step.labelCtx\" />\n          <ng-template #labelTpl>{{ step.label }}</ng-template>\n        </span>\n      </button>\n      @if (!last) {\n        <div class=\"stepper-step-connector\"></div>\n      }\n      @if (isVertical) {\n        <div\n          class=\"stepper-step-content\"\n          cCollapse\n          [visible]=\"!resetting() && isActive\"\n          [attr.inert]=\"isActive ? null : true\"\n          id=\"{{ panelId }}\"\n          role=\"tabpanel\"\n          [attr.aria-hidden]=\"!isActive || null\"\n          [attr.aria-labelledby]=\"stepId\"\n          aria-live=\"polite\"\n        >\n          <ng-container *ngTemplateOutlet=\"step.templateRef ?? emptyTpl\" />\n        </div>\n      }\n    </li>\n  }\n</ol>\n@if (!isVertical) {\n  <div class=\"stepper-content\">\n    @for (step of steps(); track step.id; let idx = $index) {\n      @let isActive = !finished && activeIdx === idx;\n      @let stepId = step.id;\n      @let panelId = `${step.id}-panel`;\n      <div\n        [attr.inert]=\"isActive ? null : true\"\n        [class]=\"{ 'stepper-pane': true, show: isActive, active: isActive }\"\n        id=\"{{ panelId }}\"\n        role=\"tabpanel\"\n        [attr.aria-hidden]=\"!isActive || null\"\n        [attr.aria-labelledby]=\"stepId\"\n        aria-live=\"polite\"\n      >\n        <ng-container *ngTemplateOutlet=\"step.templateRef ?? emptyTpl\" />\n      </div>\n    }\n  </div>\n}\n\n<ng-template #contentTpl>\n  <ng-content />\n</ng-template>\n<ng-template #emptyTpl />\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: StepButtonDirective, selector: "button[cStepButton]", exportAs: ["cStepButton"] }, { kind: "directive", type: CollapseDirective, selector: "[cCollapse]", inputs: ["animate", "horizontal", "visible", "navbar", "duration", "transition"], outputs: ["visibleChange", "collapseChange"], exportAs: ["cCollapse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: StepperComponent, isStandalone: true, selector: "c-stepper", inputs: { activeStepIndexInput: { classPropertyName: "activeStepIndexInput", publicName: "activeStepIndex", isSignal: true, isRequired: false, transformFunction: null }, defaultActiveStepIndex: { classPropertyName: "defaultActiveStepIndex", publicName: "defaultActiveStepIndex", isSignal: true, isRequired: false, transformFunction: null }, idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, stepButtonLayout: { classPropertyName: "stepButtonLayout", publicName: "stepButtonLayout", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { finished: "finished", onReset: "onReset", activeStepIndexChange: "activeStepIndexChange" }, host: { properties: { "class": "hostClasses()", "id": "id()" }, classAttribute: "stepper" }, queries: [{ propertyName: "stepsContent", predicate: StepperStepComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "stepButtons", predicate: StepButtonDirective, descendants: true, isSignal: true }], exportAs: ["cStepper"], ngImport: i0, template: "@let isVertical = layout() === 'vertical';\n@let activeIdx = activeStepIndex();\n@let finished = finishing();\n<ol [attr.aria-orientation]=\"layout()\" class=\"stepper-steps\" role=\"tablist\">\n  @for (step of steps(); track step.id; let idx = $index, last = $last) {\n    @let isActive = !finished && activeIdx === idx;\n    @let isComplete = finished || idx < activeIdx;\n    @let isDisabled = step.disabled || finished || (linear() && idx > activeIdx + 1 && step.disabled);\n    @let stepId = step.id;\n    @let panelId = `${step.id}-panel`;\n    <li [class]=\"['stepper-step', stepButtonLayout()]\" role=\"presentation\">\n      <button\n        #stepButton\n        cStepButton\n        [attr.inert]=\"step.disabled || null\"\n        [attr.aria-selected]=\"isActive || null\"\n        [attr.aria-controls]=\"panelId\"\n        [tabindex]=\"isActive ? 0 : -1\"\n        [disabled]=\"isDisabled\"\n        [class]=\"{ 'stepper-step-button': true, active: isActive, complete: isComplete }\"\n        id=\"{{ stepId }}\"\n        type=\"button\"\n        role=\"tab\"\n        (click)=\"step.disabled || handleStepClick($event, idx)\"\n        (keydown)=\"handleKeyDown($event)\"\n      >\n        <span class=\"stepper-step-indicator\">\n          @if (isComplete) {\n            <span class=\"stepper-step-indicator-icon\"></span>\n          } @else {\n            <span class=\"stepper-step-indicator-text\">\n              <ng-container\n                [ngTemplateOutlet]=\"step.indicatorRef || indicatorTpl\"\n                [ngTemplateOutletContext]=\"step.indicatorCtx\"\n              />\n              <ng-template #indicatorTpl>{{ step.indicator }}</ng-template>\n            </span>\n          }\n        </span>\n        <span class=\"stepper-step-label\">\n          <ng-container [ngTemplateOutlet]=\"step.labelRef || labelTpl\" [ngTemplateOutletContext]=\"step.labelCtx\" />\n          <ng-template #labelTpl>{{ step.label }}</ng-template>\n        </span>\n      </button>\n      @if (!last) {\n        <div class=\"stepper-step-connector\"></div>\n      }\n      @if (isVertical) {\n        <div\n          class=\"stepper-step-content\"\n          cCollapse\n          [visible]=\"!resetting() && isActive\"\n          [attr.inert]=\"isActive ? null : true\"\n          id=\"{{ panelId }}\"\n          role=\"tabpanel\"\n          [attr.aria-hidden]=\"!isActive || null\"\n          [attr.aria-labelledby]=\"stepId\"\n          aria-live=\"polite\"\n        >\n          <ng-container *ngTemplateOutlet=\"step.templateRef ?? emptyTpl\" />\n        </div>\n      }\n    </li>\n  }\n</ol>\n@if (!isVertical) {\n  <div class=\"stepper-content\">\n    @for (step of steps(); track step.id; let idx = $index) {\n      @let isActive = !finished && activeIdx === idx;\n      @let stepId = step.id;\n      @let panelId = `${step.id}-panel`;\n      <div\n        [attr.inert]=\"isActive ? null : true\"\n        [class]=\"{ 'stepper-pane': true, show: isActive, active: isActive }\"\n        id=\"{{ panelId }}\"\n        role=\"tabpanel\"\n        [attr.aria-hidden]=\"!isActive || null\"\n        [attr.aria-labelledby]=\"stepId\"\n        aria-live=\"polite\"\n      >\n        <ng-container *ngTemplateOutlet=\"step.templateRef ?? emptyTpl\" />\n      </div>\n    }\n  </div>\n}\n\n<ng-template #contentTpl>\n  <ng-content />\n</ng-template>\n<ng-template #emptyTpl />\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: StepButtonDirective, selector: "button[cStepButton]", exportAs: ["cStepButton"] }, { kind: "directive", type: CollapseDirective, selector: "[cCollapse]", inputs: ["animate", "horizontal", "visible", "navbar"], outputs: ["visibleChange", "collapseChange"], exportAs: ["cCollapse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StepperComponent, decorators: [{
             type: Component,
@@ -20166,85 +20231,116 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 }]
         }] });
 
+const getTransitionDurationFromElement = (element) => {
+    if (!element) {
+        return 0;
+    }
+    // Get transition-duration of the element
+    let { transitionDuration, transitionDelay } = window.getComputedStyle(element);
+    const floatTransitionDuration = Number.parseFloat(transitionDuration);
+    const floatTransitionDelay = Number.parseFloat(transitionDelay);
+    // Return 0 if element or transition duration is not found
+    if (!floatTransitionDuration && !floatTransitionDelay) {
+        return 0;
+    }
+    // If multiple durations are defined, take the first
+    transitionDuration = transitionDuration.split(',')[0];
+    transitionDelay = transitionDelay.split(',')[0];
+    return (Number.parseFloat(transitionDuration) + Number.parseFloat(transitionDelay)) * 1000;
+};
+
 class TabPanelComponent {
-    tabsService = inject(TabsService);
+    #tabsService = inject(TabsService);
+    #elementRef = inject(ElementRef);
     /**
      * aria-labelledby attribute
-     * @type string
+     * @return string
      * @default undefined
      */
     ariaLabelledBy = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabelledBy" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
     /**
      * Element id attribute
-     * @type string
+     * @return string
      * @default undefined
      */
     id = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
     /**
      * Item key.
-     * @type string | number
+     * @return string | number
      * @required
      */
     itemKey = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "itemKey" }] : /* istanbul ignore next */ []));
     /**
      * Element role.
-     * @type string
+     * @return string
      * @default 'tabpanel'
      */
     role = input('tabpanel', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
     /**
      * tabindex attribute.
-     * @type number
+     * @return number
      * @default 0
      */
     tabindex = input(0, { ...(ngDevMode ? { debugName: "tabindex" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     /**
      * Enable fade in transition.
-     * @type boolean
+     * @return boolean
      * @default true
      */
     transition = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "transition" }] : /* istanbul ignore next */ []));
     /**
      * visible change output
-     * @type OutputEmitterRef<VisibleChangeEvent>
+     * @return VisibleChangeEvent
      */
     visibleChange = output();
     show = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "show" }] : /* istanbul ignore next */ []));
     visible = computed(() => {
-        const visible = this.tabsService.activeItemKey() === this.itemKey() && !this.tabsService.activeItem()?.disabled;
+        const visible = this.#tabsService.activeItemKey() === this.itemKey() && !this.#tabsService.activeItem()?.disabled;
         this.visibleChange?.emit({ itemKey: this.itemKey(), visible });
         return visible;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-    propId = computed(() => this.id() ?? `${this.tabsService.id()}-panel-${this.itemKey()}`, /* @ts-ignore */
+    #transitionDuration = 0;
+    #visibleEffect = effect(() => {
+        const isVisible = this.visible();
+        const hasTransition = this.transition();
+        if (!hasTransition) {
+            this.show.set(isVisible);
+        }
+        else {
+            requestAnimationFrame(() => {
+                if (this.#transitionDuration === 0) {
+                    this.#transitionDuration = getTransitionDurationFromElement(this.#elementRef.nativeElement);
+                }
+                setTimeout(() => this.show.set(isVisible), this.#transitionDuration || 0);
+            });
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#visibleEffect" }] : /* istanbul ignore next */ []));
+    propId = computed(() => this.id() ?? `${this.#tabsService.id()}-panel-${this.itemKey()}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "propId" }] : /* istanbul ignore next */ []));
-    attrAriaLabelledBy = computed(() => this.ariaLabelledBy() ?? `${this.tabsService.id()}-tab-${this.itemKey()}`, /* @ts-ignore */
+    attrAriaLabelledBy = computed(() => this.ariaLabelledBy() ?? `${this.#tabsService.id()}-tab-${this.itemKey()}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "attrAriaLabelledBy" }] : /* istanbul ignore next */ []));
     hostClasses = computed(() => ({
         'tab-pane': true,
-        active: this.show(),
+        active: this.visible(),
         fade: this.transition(),
         show: this.show(),
-        invisible: this.tabsService.activeItem()?.disabled
+        invisible: this.#tabsService.activeItem()?.disabled
     }), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-    onAnimationDone($event) {
-        this.show.set(this.visible());
+    onTransitionEnd($event) {
+        if ($event.propertyName === 'opacity' && $event.target === this.#elementRef.nativeElement) {
+            this.show.set(this.visible());
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: TabPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: TabPanelComponent, isStandalone: true, selector: "c-tab-panel", inputs: { ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, itemKey: { classPropertyName: "itemKey", publicName: "itemKey", isSignal: true, isRequired: true, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, transition: { classPropertyName: "transition", publicName: "transition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "@fadeInOut.done": "onAnimationDone($event)" }, properties: { "class": "hostClasses()", "tabindex": "visible() ? tabindex() : -1", "attr.aria-labelledby": "attrAriaLabelledBy()", "id": "propId()", "attr.role": "role()", "@.disabled": "!transition()", "@fadeInOut": "visible() ? \"show\" : \"hide\"" } }, exportAs: ["cTabPanel"], ngImport: i0, template: '<ng-content />', isInline: true, animations: [
-            trigger('fadeInOut', [
-                state('show', style({ opacity: 1 })),
-                state('hide', style({ opacity: 0 })),
-                state('void', style({ opacity: 1 })),
-                transition('* => *', [query('@*', [animateChild()], { optional: true }), animate('150ms linear')])
-            ])
-        ] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: TabPanelComponent, isStandalone: true, selector: "c-tab-panel", inputs: { ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, itemKey: { classPropertyName: "itemKey", publicName: "itemKey", isSignal: true, isRequired: true, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, transition: { classPropertyName: "transition", publicName: "transition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "transitionend": "onTransitionEnd($event)" }, properties: { "class": "hostClasses()", "tabindex": "visible() ? tabindex() : -1", "attr.aria-labelledby": "attrAriaLabelledBy()", "id": "propId()", "attr.role": "role()" } }, exportAs: ["cTabPanel"], ngImport: i0, template: '<ng-content />', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: TabPanelComponent, decorators: [{
             type: Component,
@@ -20258,18 +20354,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         '[attr.aria-labelledby]': 'attrAriaLabelledBy()',
                         '[id]': 'propId()',
                         '[attr.role]': 'role()',
-                        '[@.disabled]': '!transition()',
-                        '[@fadeInOut]': 'visible() ? "show" : "hide"',
-                        '(@fadeInOut.done)': 'onAnimationDone($event)'
-                    },
-                    animations: [
-                        trigger('fadeInOut', [
-                            state('show', style({ opacity: 1 })),
-                            state('hide', style({ opacity: 0 })),
-                            state('void', style({ opacity: 1 })),
-                            transition('* => *', [query('@*', [animateChild()], { optional: true }), animate('150ms linear')])
-                        ])
-                    ]
+                        '(transitionend)': 'onTransitionEnd($event)'
+                    }
                 }]
         }], propDecorators: { ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], itemKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemKey", required: true }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], transition: [{ type: i0.Input, args: [{ isSignal: true, alias: "transition", required: false }] }], visibleChange: [{ type: i0.Output, args: ["visibleChange"] }] } });