@coreui/angular 5.7.24 → 5.7.25

package/fesm2022/coreui-angular.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Directive, input, Renderer2, effect, TemplateRef, booleanAttribute, untracked, NgModule, computed, Injectable, Component, linkedSignal, output, signal, contentChildren, numberAttribute, MAX_ANIMATION_TIMEOUT, DestroyRef, DOCUMENT, PLATFORM_ID, RendererFactory2, afterNextRender, forwardRef, NgZone, ChangeDetectorRef, contentChild, afterEveryRender, viewChild, ViewContainerRef, model, afterRenderEffect, ChangeDetectionStrategy, Pipe, Input, HostBinding, ContentChildren, HostListener, Injector, runInInjectionContext, ViewEncapsulation } from '@angular/core';
+import { inject, ElementRef, Directive, input, Renderer2, effect, TemplateRef, booleanAttribute, untracked, NgModule, computed, Injectable, Component, linkedSignal, output, signal, contentChildren, numberAttribute, MAX_ANIMATION_TIMEOUT, DestroyRef, DOCUMENT, PLATFORM_ID, RendererFactory2, afterNextRender, forwardRef, NgZone, ChangeDetectorRef, contentChild, afterEveryRender, viewChild, ViewContainerRef, model, afterRenderEffect, Pipe, Input, HostBinding, ChangeDetectionStrategy, ContentChildren, HostListener, Injector, runInInjectionContext, ViewEncapsulation } from '@angular/core';
 import { NgTemplateOutlet, isPlatformServer, isPlatformBrowser } from '@angular/common';
 import { takeUntilDestroyed, toSignal, toObservable } from '@angular/core/rxjs-interop';
 import { fromEvent, Subject, BehaviorSubject, merge, takeWhile, skipWhile } from 'rxjs';
@@ -11,7 +11,6 @@ import * as i1$1 from '@angular/cdk/a11y';
 import { FocusKeyManager, FocusMonitor, A11yModule } from '@angular/cdk/a11y';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { DomPortal, DomPortalOutlet } from '@angular/cdk/portal';
-import { trigger, state, style, transition, animate } from '@angular/animations';
 import { IconDirective } from '@coreui/icons-angular';
 
 var BreakpointInfix;
@@ -456,7 +455,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                 }]
         }] });
 
-let nextId$2 = 0;
+let nextId$3 = 0;
 class AccordionItemComponent {
     #accordionService = inject(AccordionService);
     /**
@@ -477,7 +476,7 @@ class AccordionItemComponent {
     get visible() {
         return this.itemVisible();
     }
-    contentId = `accordion-item-${nextId$2++}`;
+    contentId = `accordion-item-${nextId$3++}`;
     get itemContext() {
         return { $implicit: this.itemVisible() };
     }
@@ -4994,8 +4993,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                 }]
         }] });
 
+class NavGroupService {
+    /**
+     * Id of the open group at this level, `undefined` when none is open.
+     */
+    activeId = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
+    /**
+     * Opens the level owner within its own parent and cascades up to the root.
+     * Replaced by the owning `c-nav-group`; stays a no-op for the root level.
+     */
+    openBranch = () => undefined;
+    setActiveId(id) {
+        this.activeId.set(id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavGroupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavGroupService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavGroupService, decorators: [{
+            type: Injectable
+        }] });
+
+const DISABLED_ATTR_ELEMENTS = new Set(['button', 'fieldset', 'input', 'optgroup', 'option', 'select', 'textarea']);
 class NavLinkDirective {
     static ngAcceptInputType_disabled;
+    #hostElement = inject(ElementRef);
+    #navGroupService = inject(NavGroupService, { optional: true });
+    #classObserver;
+    constructor() {
+        afterNextRender({
+            read: () => {
+                this.#observeActiveClass();
+            }
+        });
+    }
     /**
      * Sets .nav-link class to the host
      * @returns boolean
@@ -5027,15 +5058,23 @@ class NavLinkDirective {
     ariaDisabled = null;
     attrDisabled = null;
     attrTabindex = null;
-    styleCursor = null;
     #disabledEffect = effect(() => {
         const disabled = this.disabled();
-        this.ariaDisabled = disabled || null;
-        this.attrDisabled = disabled ? '' : null;
-        this.attrTabindex = disabled ? -1 : (this.tabindex() ?? null);
-        this.styleCursor = disabled ? null : 'pointer';
+        const tabindex = this.tabindex();
+        const disabledAttrElement = DISABLED_ATTR_ELEMENTS.has(this.#tagName);
+        this.ariaDisabled = (disabled && !disabledAttrElement) || null;
+        this.attrDisabled = disabled && disabledAttrElement ? '' : null;
+        this.attrTabindex = disabled && !disabledAttrElement ? -1 : (Number.isNaN(tabindex) ? null : (tabindex ?? null));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "#disabledEffect" }] : /* istanbul ignore next */ []));
+    #activeEffect = effect(() => {
+        if (this.active()) {
+            untracked(() => {
+                this.#navGroupService?.openBranch();
+            });
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#activeEffect" }] : /* istanbul ignore next */ []));
     hostClasses = computed(() => {
         return {
             'nav-link': this.cNavLink(),
@@ -5044,8 +5083,32 @@ class NavLinkDirective {
         };
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    get #tagName() {
+        return this.#hostElement.nativeElement.tagName.toLowerCase();
+    }
+    ngOnDestroy() {
+        this.#classObserver?.disconnect();
+    }
+    #observeActiveClass() {
+        const host = this.#hostElement.nativeElement;
+        if (!this.#navGroupService) {
+            return;
+        }
+        let wasActive = host.classList.contains('active');
+        if (wasActive) {
+            this.#navGroupService.openBranch();
+        }
+        this.#classObserver = new MutationObserver(() => {
+            const active = host.classList.contains('active');
+            if (active && !wasActive) {
+                this.#navGroupService?.openBranch();
+            }
+            wasActive = active;
+        });
+        this.#classObserver.observe(host, { attributes: true, attributeFilter: ['class'] });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavLinkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: NavLinkDirective, isStandalone: true, selector: "[cNavLink]", inputs: { cNavLink: { classPropertyName: "cNavLink", publicName: "cNavLink", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.aria-current": "ariaCurrent()", "attr.aria-disabled": "ariaDisabled", "attr.disabled": "attrDisabled", "attr.tabindex": "attrTabindex", "style.cursor": "styleCursor" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: NavLinkDirective, isStandalone: true, selector: "[cNavLink]", inputs: { cNavLink: { classPropertyName: "cNavLink", publicName: "cNavLink", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.aria-current": "ariaCurrent()", "attr.aria-disabled": "ariaDisabled", "attr.disabled": "attrDisabled", "attr.tabindex": "attrTabindex" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavLinkDirective, decorators: [{
             type: Directive,
@@ -5056,19 +5119,182 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         '[attr.aria-current]': 'ariaCurrent()',
                         '[attr.aria-disabled]': 'ariaDisabled',
                         '[attr.disabled]': 'attrDisabled',
-                        '[attr.tabindex]': 'attrTabindex',
-                        '[style.cursor]': 'styleCursor'
+                        '[attr.tabindex]': 'attrTabindex'
                     }
                 }]
-        }], propDecorators: { cNavLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "cNavLink", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { cNavLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "cNavLink", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }] } });
+
+class NavGroupItemsComponent {
+    static ngAcceptInputType_compact;
+    /**
+     * Make nav group items more compact by cutting all `padding` in half.
+     * @returns boolean
+     * @default false
+     */
+    compact = input(false, { ...(ngDevMode ? { debugName: "compact" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    hostClasses = computed(() => {
+        return {
+            'nav-group-items': true,
+            compact: this.compact()
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavGroupItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: NavGroupItemsComponent, isStandalone: true, selector: "c-nav-group-items", inputs: { compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:block}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavGroupItemsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c-nav-group-items', template: '<ng-content />', host: { '[class]': 'hostClasses()' }, styles: [":host{display:block}\n"] }]
+        }], propDecorators: { compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }] } });
+
+let nextId$2 = 0;
+class NavGroupComponent {
+    static ngAcceptInputType_compact;
+    static ngAcceptInputType_visible;
+    #navGroupService = inject(NavGroupService);
+    #parentNavGroupService = inject(NavGroupService, { optional: true, skipSelf: true });
+    #id = `nav-group-${nextId$2++}`;
+    constructor() {
+        this.#navGroupService.openBranch = () => {
+            this.openBranch();
+        };
+    }
+    /**
+     * Make nav group items more compact by cutting all `padding` in half.
+     * @returns boolean
+     * @default false
+     */
+    compact = input(false, { ...(ngDevMode ? { debugName: "compact" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Set group toggler label.
+     * @returns string
+     */
+    toggler = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "toggler" }] : /* istanbul ignore next */ []));
+    /**
+     * Template for the group toggler content, receives the visible state as `$implicit`.
+     * @returns TemplateRef
+     */
+    togglerTemplate = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "togglerTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Show nav group items. Sets the initial state, and follows every later change.
+     * @returns boolean
+     */
+    visible = input(undefined, { ...(ngDevMode ? { debugName: "visible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Event emitted on visibility change.
+     * @returns boolean
+     */
+    visibleChange = output();
+    #uncontrolledVisible = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#uncontrolledVisible" }] : /* istanbul ignore next */ []));
+    display = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
+    visibleState = computed(() => {
+        const parent = this.#parentNavGroupService;
+        return parent ? parent.activeId() === this.#id : this.#uncontrolledVisible();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleState" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => {
+        return {
+            'nav-group': true,
+            show: this.visibleState()
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    #visibleEffect = effect(() => {
+        const visible = this.visible();
+        if (visible === undefined) {
+            return;
+        }
+        untracked(() => {
+            this.#setVisible(visible);
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#visibleEffect" }] : /* istanbul ignore next */ []));
+    toggleGroup(event) {
+        event.preventDefault();
+        const next = !this.visibleState();
+        this.#setVisible(next);
+        this.visibleChange.emit(next);
+    }
+    openBranch() {
+        const parent = this.#parentNavGroupService;
+        if (!parent) {
+            this.#uncontrolledVisible.set(true);
+            return;
+        }
+        parent.setActiveId(this.#id);
+        parent.openBranch();
+    }
+    onCollapseChange(state) {
+        this.display.set(state === 'collapsed' || state === 'open' ? null : 'block');
+    }
+    #setVisible(visible) {
+        const parent = this.#parentNavGroupService;
+        if (!parent) {
+            this.#uncontrolledVisible.set(visible);
+            return;
+        }
+        if (visible) {
+            parent.setActiveId(this.#id);
+            return;
+        }
+        if (parent.activeId() === this.#id) {
+            parent.setActiveId(undefined);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NavGroupComponent, isStandalone: true, selector: "c-nav-group", inputs: { compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, toggler: { classPropertyName: "toggler", publicName: "toggler", isSignal: true, isRequired: false, transformFunction: null }, togglerTemplate: { classPropertyName: "togglerTemplate", publicName: "togglerTemplate", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleChange: "visibleChange" }, host: { properties: { "class": "hostClasses()" } }, providers: [NavGroupService], ngImport: i0, template: "@if (toggler() || togglerTemplate()) {\n  <a\n    (click)=\"toggleGroup($event)\"\n    [attr.aria-expanded]=\"visibleState()\"\n    class=\"nav-link nav-group-toggle\"\n    href\n  >\n    @if (togglerTemplate(); as template) {\n      <ng-container\n        *ngTemplateOutlet=\"template; context: { $implicit: visibleState(), visible: visibleState() }\"\n      />\n    } @else {\n      {{ toggler() }}\n    }\n  </a>\n}\n<c-nav-group-items\n  (collapseChange)=\"onCollapseChange($event)\"\n  [compact]=\"compact()\"\n  [style.display]=\"display()\"\n  [visible]=\"visibleState()\"\n  cCollapse\n>\n  <ng-content />\n</c-nav-group-items>\n", styles: [":host{display:list-item;text-align:match-parent;text-align:-webkit-match-parent}\n"], dependencies: [{ kind: "directive", type: CollapseDirective, selector: "[cCollapse]", inputs: ["animate", "horizontal", "visible", "navbar"], outputs: ["visibleChange", "collapseChange"], exportAs: ["cCollapse"] }, { kind: "component", type: NavGroupItemsComponent, selector: "c-nav-group-items", inputs: ["compact"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c-nav-group', imports: [CollapseDirective, NavGroupItemsComponent, NgTemplateOutlet], providers: [NavGroupService], host: { '[class]': 'hostClasses()' }, template: "@if (toggler() || togglerTemplate()) {\n  <a\n    (click)=\"toggleGroup($event)\"\n    [attr.aria-expanded]=\"visibleState()\"\n    class=\"nav-link nav-group-toggle\"\n    href\n  >\n    @if (togglerTemplate(); as template) {\n      <ng-container\n        *ngTemplateOutlet=\"template; context: { $implicit: visibleState(), visible: visibleState() }\"\n      />\n    } @else {\n      {{ toggler() }}\n    }\n  </a>\n}\n<c-nav-group-items\n  (collapseChange)=\"onCollapseChange($event)\"\n  [compact]=\"compact()\"\n  [style.display]=\"display()\"\n  [visible]=\"visibleState()\"\n  cCollapse\n>\n  <ng-content />\n</c-nav-group-items>\n", styles: [":host{display:list-item;text-align:match-parent;text-align:-webkit-match-parent}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], toggler: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggler", required: false }] }], togglerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "togglerTemplate", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], visibleChange: [{ type: i0.Output, args: ["visibleChange"] }] } });
 
 class NavItemComponent {
+    static ngAcceptInputType_active;
+    static ngAcceptInputType_disabled;
+    static ngAcceptInputType_tabindex;
+    /**
+     * Toggle the active state for the nav link rendered for `href`.
+     * @returns boolean
+     * @default undefined
+     */
+    active = input(undefined, { ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Set disabled attr for the nav link rendered for `href`.
+     * @returns boolean
+     * @default false
+     */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * The href attribute of the nav link. Set it to render the nav link, otherwise the item projects its content as is.
+     * @returns string
+     */
+    href = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "href" }] : /* istanbul ignore next */ []));
+    /**
+     * The tabindex attribute of the nav link rendered for `href`.
+     * @returns number | undefined
+     */
+    tabindex = input(undefined, { ...(ngDevMode ? { debugName: "tabindex" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: NavItemComponent, isStandalone: true, selector: "c-nav-item", host: { classAttribute: "nav-item" }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:list-item;text-align:match-parent;text-align:-webkit-match-parent}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NavItemComponent, isStandalone: true, selector: "c-nav-item", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "nav-item" }, ngImport: i0, template: "@if (href()) {\n  <a\n    [active]=\"active()\"\n    [attr.href]=\"href()\"\n    [disabled]=\"disabled()\"\n    [tabindex]=\"tabindex()\"\n    cNavLink\n  >\n    <ng-container *ngTemplateOutlet=\"content\" />\n  </a>\n} @else {\n  <ng-container *ngTemplateOutlet=\"content\" />\n}\n\n<ng-template #content>\n  <ng-content />\n</ng-template>\n", styles: [":host{display:list-item;text-align:match-parent;text-align:-webkit-match-parent}\n"], dependencies: [{ kind: "directive", type: NavLinkDirective, selector: "[cNavLink]", inputs: ["cNavLink", "active", "disabled", "tabindex"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-nav-item', template: '<ng-content />', host: { class: 'nav-item' }, styles: [":host{display:list-item;text-align:match-parent;text-align:-webkit-match-parent}\n"] }]
+            args: [{ selector: 'c-nav-item', imports: [NavLinkDirective, NgTemplateOutlet], host: { class: 'nav-item' }, template: "@if (href()) {\n  <a\n    [active]=\"active()\"\n    [attr.href]=\"href()\"\n    [disabled]=\"disabled()\"\n    [tabindex]=\"tabindex()\"\n    cNavLink\n  >\n    <ng-container *ngTemplateOutlet=\"content\" />\n  </a>\n} @else {\n  <ng-container *ngTemplateOutlet=\"content\" />\n}\n\n<ng-template #content>\n  <ng-content />\n</ng-template>\n", styles: [":host{display:list-item;text-align:match-parent;text-align:-webkit-match-parent}\n"] }]
+        }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }] } });
+
+class NavTitleComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: NavTitleComponent, isStandalone: true, selector: "c-nav-title", host: { classAttribute: "nav-title" }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:list-item;text-align:match-parent;text-align:-webkit-match-parent}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavTitleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c-nav-title', template: '<ng-content />', host: { class: 'nav-title' }, styles: [":host{display:list-item;text-align:match-parent;text-align:-webkit-match-parent}\n"] }]
         }] });
 
 class NavComponent {
@@ -5078,6 +5304,13 @@ class NavComponent {
      */
     layout = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "layout" }] : /* istanbul ignore next */ []));
+    /**
+     * Default role for nav.
+     * @returns string
+     * @default 'navigation'
+     */
+    role = input('navigation', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
     /**
      * Set the nav variant to tabs or pills.
      * @default undefined
@@ -5090,25 +5323,32 @@ class NavComponent {
         return {
             nav: true,
             [`nav-${layout}`]: !!layout,
+            'nav-enclosed': variant === 'enclosed' || variant === 'enclosed-pills',
             [`nav-${variant}`]: !!variant
         };
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: NavComponent, isStandalone: true, selector: "c-nav", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" }, classAttribute: "nav" }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host .nav-link:focus{outline:0}:host.nav-underline-border{column-gap:0}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: NavComponent, isStandalone: true, selector: "c-nav", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.role": "role()" }, classAttribute: "nav" }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host .nav-link:focus{outline:0}:host.nav-underline-border{column-gap:0}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-nav', template: '<ng-content />', host: { class: 'nav', '[class]': 'hostClasses()' }, styles: [":host .nav-link:focus{outline:0}:host.nav-underline-border{column-gap:0}\n"] }]
-        }], propDecorators: { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+            args: [{ selector: 'c-nav', template: '<ng-content />', host: { class: 'nav', '[class]': 'hostClasses()', '[attr.role]': 'role()' }, styles: [":host .nav-link:focus{outline:0}:host.nav-underline-border{column-gap:0}\n"] }]
+        }], propDecorators: { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
 
 class NavModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: NavModule, imports: [NavComponent,
+            NavGroupComponent,
+            NavGroupItemsComponent,
             NavItemComponent,
-            NavLinkDirective], exports: [NavComponent,
+            NavLinkDirective,
+            NavTitleComponent], exports: [NavComponent,
+            NavGroupComponent,
+            NavGroupItemsComponent,
             NavItemComponent,
-            NavLinkDirective] });
+            NavLinkDirective,
+            NavTitleComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavModule });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavModule, decorators: [{
@@ -5116,13 +5356,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
             args: [{
                     imports: [
                         NavComponent,
+                        NavGroupComponent,
+                        NavGroupItemsComponent,
                         NavItemComponent,
-                        NavLinkDirective
+                        NavLinkDirective,
+                        NavTitleComponent
                     ],
                     exports: [
                         NavComponent,
+                        NavGroupComponent,
+                        NavGroupItemsComponent,
                         NavItemComponent,
-                        NavLinkDirective
+                        NavLinkDirective,
+                        NavTitleComponent
                     ]
                 }]
         }] });
@@ -7672,7 +7918,7 @@ class SidebarComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: SidebarComponent, isStandalone: true, selector: "c-sidebar", inputs: { colorScheme: { classPropertyName: "colorScheme", publicName: "colorScheme", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, narrowInput: { classPropertyName: "narrowInput", publicName: "narrow", isSignal: true, isRequired: false, transformFunction: null }, overlaid: { classPropertyName: "overlaid", publicName: "overlaid", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, unfoldableInput: { classPropertyName: "unfoldableInput", publicName: "unfoldable", isSignal: true, isRequired: false, transformFunction: null }, visibleInput: { classPropertyName: "visibleInput", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleChange: "visibleChange" }, host: { properties: { "class": "hostClasses()", "attr.inert": "!this.sidebarState.visible || null" }, classAttribute: "sidebar" }, exportAs: ["cSidebar"], usesOnChanges: true, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: SidebarComponent, isStandalone: true, selector: "c-sidebar", inputs: { colorScheme: { classPropertyName: "colorScheme", publicName: "colorScheme", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, narrowInput: { classPropertyName: "narrowInput", publicName: "narrow", isSignal: true, isRequired: false, transformFunction: null }, overlaid: { classPropertyName: "overlaid", publicName: "overlaid", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, unfoldableInput: { classPropertyName: "unfoldableInput", publicName: "unfoldable", isSignal: true, isRequired: false, transformFunction: null }, visibleInput: { classPropertyName: "visibleInput", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleChange: "visibleChange" }, host: { properties: { "class": "hostClasses()", "attr.inert": "!this.sidebarState.visible || null" }, classAttribute: "sidebar" }, exportAs: ["cSidebar"], usesOnChanges: true, ngImport: i0, template: '<ng-content />', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SidebarComponent, decorators: [{
             type: Component,
@@ -7680,7 +7926,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     selector: 'c-sidebar',
                     exportAs: 'cSidebar',
                     template: '<ng-content />',
-                    changeDetection: ChangeDetectionStrategy.Eager,
                     host: {
                         class: 'sidebar',
                         '[class]': 'hostClasses()',
@@ -8022,11 +8267,11 @@ class SidebarNavLinkComponent {
         this.linkClick?.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SidebarNavLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: SidebarNavLinkComponent, isStandalone: true, selector: "c-sidebar-nav-link", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { linkClick: "linkClick" }, providers: [SidebarNavHelper], ngImport: i0, template: "@let linkItem = item() ?? {};\n\n@switch (linkType) {\n  @case ('disabled') {\n    <a [cHtmlAttr]=\"linkItem.attributes ?? {}\" [class]=\"linkItem | cSidebarNavLink\">\n      <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: linkItem }\" />\n      <c-sidebar-nav-link-content [item]=\"linkItem\" />\n      @if (linkItem.badge) {\n        <span [class]=\"linkItem | cSidebarNavBadge\">{{ linkItem.badge?.text }}</span>\n      }\n    </a>\n  }\n  @case ('external') {\n    <a\n      (click)=\"linkClicked()\"\n      [cHtmlAttr]=\"linkItem.attributes ?? {}\"\n      [href]=\"href\"\n      [class]=\"linkItem | cSidebarNavLink\"\n    >\n      <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: linkItem }\" />\n      <c-sidebar-nav-link-content [item]=\"linkItem\" />\n      @if (linkItem.badge) {\n        <span [class]=\"linkItem | cSidebarNavBadge\">{{ linkItem.badge?.text }}</span>\n      }\n    </a>\n  }\n  @default {\n    <a\n      (click)=\"linkClicked()\"\n      [cHtmlAttr]=\"linkItem.attributes ?? {}\"\n      [fragment]=\"$safeNavigationMigration(linkItem.linkProps?.fragment)\"\n      [class]=\"linkItem | cSidebarNavLink\"\n      [preserveFragment]=\"linkItem.linkProps?.preserveFragment ?? false\"\n      [queryParamsHandling]=\"$safeNavigationMigration(linkItem.linkProps?.queryParamsHandling)\"\n      [queryParams]=\"linkItem.linkProps?.queryParams ?? null\"\n      [replaceUrl]=\"linkItem.linkProps?.replaceUrl ?? false\"\n      [routerLinkActiveOptions]=\"linkItem.linkProps?.routerLinkActiveOptions ?? { exact: false }\"\n      [routerLink]=\"linkItem.url\"\n      [skipLocationChange]=\"linkItem.linkProps?.skipLocationChange ?? false\"\n      [state]=\"linkItem.linkProps?.state ?? {}\"\n      [target]=\"$safeNavigationMigration(linkItem.attributes?.['target'])\"\n      routerLinkActive=\"active\"\n    >\n      <!--    [class.active]=\"linkActive\"-->\n      <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: linkItem }\" />\n      <c-sidebar-nav-link-content [item]=\"linkItem\" />\n      @if (linkItem.badge) {\n        <span [class]=\"linkItem | cSidebarNavBadge\">{{ linkItem.badge?.text }}</span>\n      }\n    </a>\n  }\n}\n<ng-template #iconTemplate let-item>\n  <!--  <i *ngIf=\"item?.icon\" [class]=\"item | cSidebarNavIcon\"></i>-->\n  @if (item?.icon) {\n    <span class=\"nav-icon\">\n      <span [class]=\"item.icon ?? ''\"></span>\n    </span>\n  }\n  @if (item?.iconComponent) {\n    <svg\n      [cIcon]=\"$safeNavigationMigration(item.iconComponent?.content)\"\n      [customClasses]=\"item | cSidebarNavIcon\"\n      [name]=\"$safeNavigationMigration(item.iconComponent?.name)\"\n    ></svg>\n  }\n  @if (!item?.icon && !item?.iconComponent) {\n    <span [class]=\"item | cSidebarNavIcon\"></span>\n  }\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "directive", type: IconDirective, selector: "svg[cIcon]", inputs: ["cIcon", "customClasses", "size", "title", "height", "width", "name", "viewBox", "xmlns", "pointer-events", "role"], exportAs: ["cIcon"] }, { kind: "component", type: SidebarNavLinkContentComponent, selector: "c-sidebar-nav-link-content", inputs: ["item"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: SidebarNavLinkPipe, name: "cSidebarNavLink" }, { kind: "pipe", type: SidebarNavBadgePipe, name: "cSidebarNavBadge" }, { kind: "pipe", type: SidebarNavIconPipe, name: "cSidebarNavIcon" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: SidebarNavLinkComponent, isStandalone: true, selector: "c-sidebar-nav-link", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { linkClick: "linkClick" }, providers: [SidebarNavHelper], ngImport: i0, template: "@let linkItem = item() ?? {};\n\n@switch (linkType) {\n  @case ('disabled') {\n    <a [cHtmlAttr]=\"linkItem.attributes ?? {}\" [class]=\"linkItem | cSidebarNavLink\">\n      <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: linkItem }\" />\n      <c-sidebar-nav-link-content [item]=\"linkItem\" />\n      @if (linkItem.badge) {\n        <span [class]=\"linkItem | cSidebarNavBadge\">{{ linkItem.badge?.text }}</span>\n      }\n    </a>\n  }\n  @case ('external') {\n    <a\n      (click)=\"linkClicked()\"\n      [cHtmlAttr]=\"linkItem.attributes ?? {}\"\n      [href]=\"href\"\n      [class]=\"linkItem | cSidebarNavLink\"\n    >\n      <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: linkItem }\" />\n      <c-sidebar-nav-link-content [item]=\"linkItem\" />\n      @if (linkItem.badge) {\n        <span [class]=\"linkItem | cSidebarNavBadge\">{{ linkItem.badge?.text }}</span>\n      }\n    </a>\n  }\n  @default {\n    <a\n      (click)=\"linkClicked()\"\n      [cHtmlAttr]=\"linkItem.attributes ?? {}\"\n      [fragment]=\"$safeNavigationMigration(linkItem.linkProps?.fragment)\"\n      [class]=\"linkItem | cSidebarNavLink\"\n      [preserveFragment]=\"linkItem.linkProps?.preserveFragment ?? false\"\n      [queryParamsHandling]=\"$safeNavigationMigration(linkItem.linkProps?.queryParamsHandling)\"\n      [queryParams]=\"linkItem.linkProps?.queryParams ?? null\"\n      [replaceUrl]=\"linkItem.linkProps?.replaceUrl ?? false\"\n      [routerLinkActiveOptions]=\"linkItem.linkProps?.routerLinkActiveOptions ?? { exact: false }\"\n      [routerLink]=\"linkItem.url\"\n      [skipLocationChange]=\"linkItem.linkProps?.skipLocationChange ?? false\"\n      [state]=\"linkItem.linkProps?.state ?? {}\"\n      [target]=\"$safeNavigationMigration(linkItem.attributes?.['target'])\"\n      routerLinkActive=\"active\"\n    >\n      <!--    [class.active]=\"linkActive\"-->\n      <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: linkItem }\" />\n      <c-sidebar-nav-link-content [item]=\"linkItem\" />\n      @if (linkItem.badge) {\n        <span [class]=\"linkItem | cSidebarNavBadge\">{{ linkItem.badge?.text }}</span>\n      }\n    </a>\n  }\n}\n<ng-template #iconTemplate let-item>\n  <!--  <i *ngIf=\"item?.icon\" [class]=\"item | cSidebarNavIcon\"></i>-->\n  @if (item?.icon) {\n    <span class=\"nav-icon\">\n      <span [class]=\"item.icon ?? ''\"></span>\n    </span>\n  }\n  @if (item?.iconComponent) {\n    <svg\n      [cIcon]=\"$safeNavigationMigration(item.iconComponent?.content)\"\n      [customClasses]=\"item | cSidebarNavIcon\"\n      [name]=\"$safeNavigationMigration(item.iconComponent?.name)\"\n    ></svg>\n  }\n  @if (!item?.icon && !item?.iconComponent) {\n    <span [class]=\"item | cSidebarNavIcon\"></span>\n  }\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "directive", type: IconDirective, selector: "svg[cIcon]", inputs: ["cIcon", "customClasses", "size", "title", "height", "width", "name", "viewBox", "xmlns", "pointer-events", "role"], exportAs: ["cIcon"] }, { kind: "component", type: SidebarNavLinkContentComponent, selector: "c-sidebar-nav-link-content", inputs: ["item"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: SidebarNavLinkPipe, name: "cSidebarNavLink" }, { kind: "pipe", type: SidebarNavBadgePipe, name: "cSidebarNavBadge" }, { kind: "pipe", type: SidebarNavIconPipe, name: "cSidebarNavIcon" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SidebarNavLinkComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-sidebar-nav-link', providers: [SidebarNavHelper], changeDetection: ChangeDetectionStrategy.Eager, imports: [
+            args: [{ selector: 'c-sidebar-nav-link', providers: [SidebarNavHelper], imports: [
                         RouterModule,
                         HtmlAttributesDirective,
                         IconDirective,
@@ -8199,7 +8444,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
 
 class SidebarNavGroupComponent {
     #router = inject(Router);
-    #renderer = inject(Renderer2);
     #hostElement = inject(ElementRef);
     #sidebarNavGroupService = inject(SidebarNavGroupService);
     helper = inject(SidebarNavHelper);
@@ -8239,7 +8483,6 @@ class SidebarNavGroupComponent {
         };
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-    sidebarNav = viewChild.required(forwardRef(() => SidebarNavComponent), { ...(ngDevMode ? { debugName: "sidebarNav" } : /* istanbul ignore next */ {}), read: ElementRef });
     navigationEndObservable;
     navSubscription;
     navGroupSubscription;
@@ -8247,7 +8490,7 @@ class SidebarNavGroupComponent {
     ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     navItems = signal([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "navItems" }] : /* istanbul ignore next */ []));
-    display = signal({ display: 'block' }, /* @ts-ignore */
+    display = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
     ngOnInit() {
         this.navItems.set([...(this.item()?.children ?? [])]);
@@ -8282,6 +8525,10 @@ class SidebarNavGroupComponent {
         });
     }
     openGroup(open) {
+        if (this.open() !== undefined && this.open() !== open) {
+            // the group drops `show` in the same pass, hiding the nav before cCollapse can measure it
+            this.display.set('block');
+        }
         this.open.set(open);
     }
     toggleGroup($event) {
@@ -8294,64 +8541,26 @@ class SidebarNavGroupComponent {
     ngOnDestroy() {
         this.navSubscription?.unsubscribe();
     }
-    onAnimationStart($event) {
-        this.display.set({ display: 'block' });
-        setTimeout(() => {
-            const host = this.sidebarNav()?.nativeElement;
-            if ($event.toState === 'open' && host) {
-                this.#renderer.setStyle(host, 'height', `${host['scrollHeight']}px`);
-            }
-        });
-    }
-    onAnimationDone($event) {
-        setTimeout(() => {
-            const host = this.sidebarNav()?.nativeElement;
-            if ($event.toState === 'open' && host) {
-                this.#renderer.setStyle(host, 'height', 'auto');
-            }
-            if ($event.toState === 'closed') {
-                setTimeout(() => {
-                    this.display.set(null);
-                });
-            }
-        });
+    onCollapseChange(state) {
+        this.display.set(state === 'collapsed' || state === 'open' ? null : 'block');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SidebarNavGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: SidebarNavGroupComponent, isStandalone: true, selector: "c-sidebar-nav-group", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, dropdownMode: { classPropertyName: "dropdownMode", publicName: "dropdownMode", isSignal: true, isRequired: false, transformFunction: null }, show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, providers: [SidebarNavHelper], viewQueries: [{ propertyName: "sidebarNav", first: true, predicate: i0.forwardRef(() => SidebarNavComponent), descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@let grpItem = item();\n<a\n  (click)=\"toggleGroup($event)\"\n  [cHtmlAttr]=\"$safeNavigationMigration(grpItem?.attributes)\"\n  class=\"nav-link nav-group-toggle\"\n  href\n>\n  <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: grpItem }\" />\n  <ng-container>{{ grpItem?.name }}</ng-container>\n  @if (grpItem?.badge) {\n    <span [class]=\"grpItem | cSidebarNavBadge\">{{ grpItem?.badge?.text }}</span>\n  }\n</a>\n<c-sidebar-nav\n  (@openClose.done)=\"onAnimationDone($event)\"\n  (@openClose.start)=\"onAnimationStart($event)\"\n  [@openClose]=\"open() ? 'open' : 'closed'\"\n  [compact]=\"compact()\"\n  [dropdownMode]=\"dropdownMode()\"\n  [groupItems]=\"true\"\n  [navItems]=\"navItems()\"\n  [style]=\"display()\"\n/>\n\n<ng-template #iconTemplate let-item>\n  <!--  <i *ngIf=\"item?.icon\" [class]=\"item | cSidebarNavIcon\"></i>-->\n  @if (item?.icon) {\n    <span class=\"nav-icon\">\n      <span [class]=\"item.icon ?? ''\"></span>\n    </span>\n  }\n  @if (item?.iconComponent) {\n    <svg\n      [cIcon]=\"$safeNavigationMigration(item.iconComponent?.content)\"\n      [customClasses]=\"item | cSidebarNavIcon\"\n      [name]=\"$safeNavigationMigration(item.iconComponent?.name)\"\n    />\n  }\n  @if (!item?.icon && !item?.iconComponent) {\n    <span [class]=\"item | cSidebarNavIcon\"></span>\n  }\n</ng-template>\n", styles: [".nav-group-toggle{cursor:pointer}.nav-group-items{display:block}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => HtmlAttributesDirective), selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "directive", type: i0.forwardRef(() => IconDirective), selector: "svg[cIcon]", inputs: ["cIcon", "customClasses", "size", "title", "height", "width", "name", "viewBox", "xmlns", "pointer-events", "role"], exportAs: ["cIcon"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(() => SidebarNavComponent), selector: "c-sidebar-nav", inputs: ["navItems", "dropdownMode", "groupItems", "compact", "role"] }, { kind: "pipe", type: i0.forwardRef(() => SidebarNavIconPipe), name: "cSidebarNavIcon" }, { kind: "pipe", type: i0.forwardRef(() => SidebarNavBadgePipe), name: "cSidebarNavBadge" }], animations: [
-            trigger('openClose', [
-                state('open', style({
-                    height: '*'
-                })),
-                state('closed', style({
-                    height: '0px'
-                })),
-                transition('open <=> closed', [animate('.15s ease')])
-            ])
-        ], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: SidebarNavGroupComponent, isStandalone: true, selector: "c-sidebar-nav-group", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, dropdownMode: { classPropertyName: "dropdownMode", publicName: "dropdownMode", isSignal: true, isRequired: false, transformFunction: null }, show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, providers: [SidebarNavHelper], ngImport: i0, template: "@let grpItem = item();\n<a\n  (click)=\"toggleGroup($event)\"\n  [cHtmlAttr]=\"$safeNavigationMigration(grpItem?.attributes)\"\n  class=\"nav-link nav-group-toggle\"\n  href\n>\n  <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: grpItem }\" />\n  <ng-container>{{ grpItem?.name }}</ng-container>\n  @if (grpItem?.badge) {\n    <span [class]=\"grpItem | cSidebarNavBadge\">{{ grpItem?.badge?.text }}</span>\n  }\n</a>\n<c-sidebar-nav\n  (collapseChange)=\"onCollapseChange($event)\"\n  [compact]=\"compact()\"\n  [dropdownMode]=\"dropdownMode()\"\n  [groupItems]=\"true\"\n  [navItems]=\"navItems()\"\n  [style.display]=\"display()\"\n  [visible]=\"!!open()\"\n  cCollapse\n/>\n\n<ng-template #iconTemplate let-item>\n  <!--  <i *ngIf=\"item?.icon\" [class]=\"item | cSidebarNavIcon\"></i>-->\n  @if (item?.icon) {\n    <span class=\"nav-icon\">\n      <span [class]=\"item.icon ?? ''\"></span>\n    </span>\n  }\n  @if (item?.iconComponent) {\n    <svg\n      [cIcon]=\"$safeNavigationMigration(item.iconComponent?.content)\"\n      [customClasses]=\"item | cSidebarNavIcon\"\n      [name]=\"$safeNavigationMigration(item.iconComponent?.name)\"\n    />\n  }\n  @if (!item?.icon && !item?.iconComponent) {\n    <span [class]=\"item | cSidebarNavIcon\"></span>\n  }\n</ng-template>\n", styles: [".nav-group-items{display:block}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => CollapseDirective), selector: "[cCollapse]", inputs: ["animate", "horizontal", "visible", "navbar"], outputs: ["visibleChange", "collapseChange"], exportAs: ["cCollapse"] }, { kind: "directive", type: i0.forwardRef(() => HtmlAttributesDirective), selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "directive", type: i0.forwardRef(() => IconDirective), selector: "svg[cIcon]", inputs: ["cIcon", "customClasses", "size", "title", "height", "width", "name", "viewBox", "xmlns", "pointer-events", "role"], exportAs: ["cIcon"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(() => SidebarNavComponent), selector: "c-sidebar-nav", inputs: ["navItems", "dropdownMode", "groupItems", "compact", "role"] }, { kind: "pipe", type: i0.forwardRef(() => SidebarNavIconPipe), name: "cSidebarNavIcon" }, { kind: "pipe", type: i0.forwardRef(() => SidebarNavBadgePipe), name: "cSidebarNavBadge" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SidebarNavGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c-sidebar-nav-group', providers: [SidebarNavHelper], imports: [
+                        CollapseDirective,
                         HtmlAttributesDirective,
                         IconDirective,
                         NgTemplateOutlet,
                         SidebarNavIconPipe,
                         SidebarNavBadgePipe,
                         forwardRef(() => SidebarNavComponent)
-                    ], animations: [
-                        trigger('openClose', [
-                            state('open', style({
-                                height: '*'
-                            })),
-                            state('closed', style({
-                                height: '0px'
-                            })),
-                            transition('open <=> closed', [animate('.15s ease')])
-                        ])
-                    ], changeDetection: ChangeDetectionStrategy.Eager, host: {
+                    ], host: {
                         '[class]': 'hostClasses()'
-                    }, template: "@let grpItem = item();\n<a\n  (click)=\"toggleGroup($event)\"\n  [cHtmlAttr]=\"$safeNavigationMigration(grpItem?.attributes)\"\n  class=\"nav-link nav-group-toggle\"\n  href\n>\n  <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: grpItem }\" />\n  <ng-container>{{ grpItem?.name }}</ng-container>\n  @if (grpItem?.badge) {\n    <span [class]=\"grpItem | cSidebarNavBadge\">{{ grpItem?.badge?.text }}</span>\n  }\n</a>\n<c-sidebar-nav\n  (@openClose.done)=\"onAnimationDone($event)\"\n  (@openClose.start)=\"onAnimationStart($event)\"\n  [@openClose]=\"open() ? 'open' : 'closed'\"\n  [compact]=\"compact()\"\n  [dropdownMode]=\"dropdownMode()\"\n  [groupItems]=\"true\"\n  [navItems]=\"navItems()\"\n  [style]=\"display()\"\n/>\n\n<ng-template #iconTemplate let-item>\n  <!--  <i *ngIf=\"item?.icon\" [class]=\"item | cSidebarNavIcon\"></i>-->\n  @if (item?.icon) {\n    <span class=\"nav-icon\">\n      <span [class]=\"item.icon ?? ''\"></span>\n    </span>\n  }\n  @if (item?.iconComponent) {\n    <svg\n      [cIcon]=\"$safeNavigationMigration(item.iconComponent?.content)\"\n      [customClasses]=\"item | cSidebarNavIcon\"\n      [name]=\"$safeNavigationMigration(item.iconComponent?.name)\"\n    />\n  }\n  @if (!item?.icon && !item?.iconComponent) {\n    <span [class]=\"item | cSidebarNavIcon\"></span>\n  }\n</ng-template>\n", styles: [".nav-group-toggle{cursor:pointer}.nav-group-items{display:block}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: false }] }], dropdownMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownMode", required: false }] }], show: [{ type: i0.Input, args: [{ isSignal: true, alias: "show", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], sidebarNav: [{ type: i0.ViewChild, args: [forwardRef(() => SidebarNavComponent), { ...{ read: ElementRef }, isSignal: true }] }] } });
+                    }, template: "@let grpItem = item();\n<a\n  (click)=\"toggleGroup($event)\"\n  [cHtmlAttr]=\"$safeNavigationMigration(grpItem?.attributes)\"\n  class=\"nav-link nav-group-toggle\"\n  href\n>\n  <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: grpItem }\" />\n  <ng-container>{{ grpItem?.name }}</ng-container>\n  @if (grpItem?.badge) {\n    <span [class]=\"grpItem | cSidebarNavBadge\">{{ grpItem?.badge?.text }}</span>\n  }\n</a>\n<c-sidebar-nav\n  (collapseChange)=\"onCollapseChange($event)\"\n  [compact]=\"compact()\"\n  [dropdownMode]=\"dropdownMode()\"\n  [groupItems]=\"true\"\n  [navItems]=\"navItems()\"\n  [style.display]=\"display()\"\n  [visible]=\"!!open()\"\n  cCollapse\n/>\n\n<ng-template #iconTemplate let-item>\n  <!--  <i *ngIf=\"item?.icon\" [class]=\"item | cSidebarNavIcon\"></i>-->\n  @if (item?.icon) {\n    <span class=\"nav-icon\">\n      <span [class]=\"item.icon ?? ''\"></span>\n    </span>\n  }\n  @if (item?.iconComponent) {\n    <svg\n      [cIcon]=\"$safeNavigationMigration(item.iconComponent?.content)\"\n      [customClasses]=\"item | cSidebarNavIcon\"\n      [name]=\"$safeNavigationMigration(item.iconComponent?.name)\"\n    />\n  }\n  @if (!item?.icon && !item?.iconComponent) {\n    <span [class]=\"item | cSidebarNavIcon\"></span>\n  }\n</ng-template>\n", styles: [".nav-group-items{display:block}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: false }] }], dropdownMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownMode", required: false }] }], show: [{ type: i0.Input, args: [{ isSignal: true, alias: "show", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }] } });
 class SidebarNavComponent {
     sidebar = inject(SidebarComponent, { optional: true });
     helper = inject(SidebarNavHelper);
@@ -8417,7 +8626,7 @@ class SidebarNavComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SidebarNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: SidebarNavComponent, isStandalone: true, selector: "c-sidebar-nav", inputs: { navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, dropdownMode: { classPropertyName: "dropdownMode", publicName: "dropdownMode", isSignal: true, isRequired: false, transformFunction: null }, groupItems: { classPropertyName: "groupItems", publicName: "groupItems", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.role": "role()" } }, providers: [SidebarNavGroupService], usesOnChanges: true, ngImport: i0, template: "@for (nItem of navItemsArray(); track nItem) {\n  @switch (helper.itemType(nItem)) {\n    @case ('group') {\n      <c-sidebar-nav-group\n        [dropdownMode]=\"dropdownMode()\"\n        [item]=\"nItem\"\n        [class]=\"nItem | cSidebarNavItemClass\"\n        [compact]=\"compact()\"\n      />\n    }\n    @case ('divider') {\n      <c-sidebar-nav-divider\n        [cHtmlAttr]=\"nItem.attributes ?? {}\"\n        [item]=\"nItem\"\n        [class]=\"nItem | cSidebarNavItemClass\"\n      />\n    }\n    @case ('title') {\n      <c-sidebar-nav-title\n        [cHtmlAttr]=\"nItem.attributes ?? {}\"\n        [item]=\"nItem\"\n        [class]=\"nItem | cSidebarNavItemClass\"\n      />\n    }\n    @case ('label') {\n      <c-sidebar-nav-label\n        [item]=\"nItem\"\n        [class]=\"nItem | cSidebarNavItemClass\"\n      />\n    }\n    @case ('empty') {\n      <ng-container />\n    }\n    @default {\n      <c-sidebar-nav-link\n        (linkClick)=\"hideMobile()\"\n        [item]=\"nItem\"\n        [class]=\"nItem | cSidebarNavItemClass\"\n      />\n    }\n  }\n}\n<ng-content />\n", dependencies: [{ kind: "directive", type: i0.forwardRef(() => HtmlAttributesDirective), selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "component", type: i0.forwardRef(() => SidebarNavLinkComponent), selector: "c-sidebar-nav-link", inputs: ["item"], outputs: ["linkClick"] }, { kind: "component", type: i0.forwardRef(() => SidebarNavLabelComponent), selector: "c-sidebar-nav-label", inputs: ["item"] }, { kind: "component", type: i0.forwardRef(() => SidebarNavTitleComponent), selector: "c-sidebar-nav-title", inputs: ["item"] }, { kind: "component", type: i0.forwardRef(() => SidebarNavDividerComponent), selector: "c-sidebar-nav-divider", inputs: ["item"] }, { kind: "component", type: i0.forwardRef(() => SidebarNavGroupComponent), selector: "c-sidebar-nav-group", inputs: ["item", "dropdownMode", "show", "compact"] }, { kind: "ngmodule", type: i0.forwardRef(() => RouterModule) }, { kind: "pipe", type: i0.forwardRef(() => SidebarNavItemClassPipe), name: "cSidebarNavItemClass" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: SidebarNavComponent, isStandalone: true, selector: "c-sidebar-nav", inputs: { navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, dropdownMode: { classPropertyName: "dropdownMode", publicName: "dropdownMode", isSignal: true, isRequired: false, transformFunction: null }, groupItems: { classPropertyName: "groupItems", publicName: "groupItems", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.role": "role()" } }, providers: [NavGroupService, SidebarNavGroupService], usesOnChanges: true, ngImport: i0, template: "@for (nItem of navItemsArray(); track nItem) {\n  @switch (helper.itemType(nItem)) {\n    @case ('group') {\n      <c-sidebar-nav-group\n        [dropdownMode]=\"dropdownMode()\"\n        [item]=\"nItem\"\n        [class]=\"nItem | cSidebarNavItemClass\"\n        [compact]=\"compact()\"\n      />\n    }\n    @case ('divider') {\n      <c-sidebar-nav-divider\n        [cHtmlAttr]=\"nItem.attributes ?? {}\"\n        [item]=\"nItem\"\n        [class]=\"nItem | cSidebarNavItemClass\"\n      />\n    }\n    @case ('title') {\n      <c-sidebar-nav-title\n        [cHtmlAttr]=\"nItem.attributes ?? {}\"\n        [item]=\"nItem\"\n        [class]=\"nItem | cSidebarNavItemClass\"\n      />\n    }\n    @case ('label') {\n      <c-sidebar-nav-label\n        [item]=\"nItem\"\n        [class]=\"nItem | cSidebarNavItemClass\"\n      />\n    }\n    @case ('empty') {\n      <ng-container />\n    }\n    @default {\n      <c-sidebar-nav-link\n        (linkClick)=\"hideMobile()\"\n        [item]=\"nItem\"\n        [class]=\"nItem | cSidebarNavItemClass\"\n      />\n    }\n  }\n}\n<ng-content />\n", styles: [":host .nav-item{display:block}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => HtmlAttributesDirective), selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "component", type: i0.forwardRef(() => SidebarNavLinkComponent), selector: "c-sidebar-nav-link", inputs: ["item"], outputs: ["linkClick"] }, { kind: "component", type: i0.forwardRef(() => SidebarNavLabelComponent), selector: "c-sidebar-nav-label", inputs: ["item"] }, { kind: "component", type: i0.forwardRef(() => SidebarNavTitleComponent), selector: "c-sidebar-nav-title", inputs: ["item"] }, { kind: "component", type: i0.forwardRef(() => SidebarNavDividerComponent), selector: "c-sidebar-nav-divider", inputs: ["item"] }, { kind: "component", type: i0.forwardRef(() => SidebarNavGroupComponent), selector: "c-sidebar-nav-group", inputs: ["item", "dropdownMode", "show", "compact"] }, { kind: "ngmodule", type: i0.forwardRef(() => RouterModule) }, { kind: "pipe", type: i0.forwardRef(() => SidebarNavItemClassPipe), name: "cSidebarNavItemClass" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SidebarNavComponent, decorators: [{
             type: Component,
@@ -8433,7 +8642,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     ], host: {
                         '[class]': 'hostClasses()',
                         '[attr.role]': 'role()'
-                    }, changeDetection: ChangeDetectionStrategy.Eager, providers: [SidebarNavGroupService], template: "@for (nItem of navItemsArray(); track nItem) {\n  @switch (helper.itemType(nItem)) {\n    @case ('group') {\n      <c-sidebar-nav-group\n        [dropdownMode]=\"dropdownMode()\"\n        [item]=\"nItem\"\n        [class]=\"nItem | cSidebarNavItemClass\"\n        [compact]=\"compact()\"\n      />\n    }\n    @case ('divider') {\n      <c-sidebar-nav-divider\n        [cHtmlAttr]=\"nItem.attributes ?? {}\"\n        [item]=\"nItem\"\n        [class]=\"nItem | cSidebarNavItemClass\"\n      />\n    }\n    @case ('title') {\n      <c-sidebar-nav-title\n        [cHtmlAttr]=\"nItem.attributes ?? {}\"\n        [item]=\"nItem\"\n        [class]=\"nItem | cSidebarNavItemClass\"\n      />\n    }\n    @case ('label') {\n      <c-sidebar-nav-label\n        [item]=\"nItem\"\n        [class]=\"nItem | cSidebarNavItemClass\"\n      />\n    }\n    @case ('empty') {\n      <ng-container />\n    }\n    @default {\n      <c-sidebar-nav-link\n        (linkClick)=\"hideMobile()\"\n        [item]=\"nItem\"\n        [class]=\"nItem | cSidebarNavItemClass\"\n      />\n    }\n  }\n}\n<ng-content />\n" }]
+                    }, providers: [NavGroupService, SidebarNavGroupService], template: "@for (nItem of navItemsArray(); track nItem) {\n  @switch (helper.itemType(nItem)) {\n    @case ('group') {\n      <c-sidebar-nav-group\n        [dropdownMode]=\"dropdownMode()\"\n        [item]=\"nItem\"\n        [class]=\"nItem | cSidebarNavItemClass\"\n        [compact]=\"compact()\"\n      />\n    }\n    @case ('divider') {\n      <c-sidebar-nav-divider\n        [cHtmlAttr]=\"nItem.attributes ?? {}\"\n        [item]=\"nItem\"\n        [class]=\"nItem | cSidebarNavItemClass\"\n      />\n    }\n    @case ('title') {\n      <c-sidebar-nav-title\n        [cHtmlAttr]=\"nItem.attributes ?? {}\"\n        [item]=\"nItem\"\n        [class]=\"nItem | cSidebarNavItemClass\"\n      />\n    }\n    @case ('label') {\n      <c-sidebar-nav-label\n        [item]=\"nItem\"\n        [class]=\"nItem | cSidebarNavItemClass\"\n      />\n    }\n    @case ('empty') {\n      <ng-container />\n    }\n    @default {\n      <c-sidebar-nav-link\n        (linkClick)=\"hideMobile()\"\n        [item]=\"nItem\"\n        [class]=\"nItem | cSidebarNavItemClass\"\n      />\n    }\n  }\n}\n<ng-content />\n", styles: [":host .nav-item{display:block}\n"] }]
         }], propDecorators: { navItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "navItems", required: false }] }], dropdownMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownMode", required: false }] }], groupItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupItems", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }] } });
 
 class SidebarModule {
@@ -9293,8 +9502,8 @@ class TabsListComponent {
     layout = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "layout" }] : /* istanbul ignore next */ []));
     /**
-     * Set the variant to tabs, pills or underline.
-     * @returns 'pills' | 'tabs' | 'underline' | 'underline-border' | undefined
+     * Set the variant to tabs, pills, underline or enclosed.
+     * @returns 'enclosed' | 'enclosed-pills' | 'pills' | 'tabs' | 'underline' | 'underline-border' | undefined
      * @default undefined
      */
     variant = input(/* @ts-ignore */
@@ -9311,6 +9520,7 @@ class TabsListComponent {
         return {
             nav: true,
             [`nav-${layout}`]: layout,
+            'nav-enclosed': variant === 'enclosed' || variant === 'enclosed-pills',
             [`nav-${variant}`]: variant
         };
     }, /* @ts-ignore */
@@ -10719,5 +10929,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionButtonDirective, AccordionComponent, AccordionItemComponent, AccordionModule, AlertComponent, AlertHeadingDirective, AlertLinkDirective, AlertModule, AlignDirective, AvatarComponent, AvatarModule, BackdropService, BadgeComponent, BadgeModule, BgColorDirective, BorderDirective, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, BreadcrumbRouterComponent, BreadcrumbRouterService, BreakpointInfix, ButtonCloseDirective, ButtonDirective, ButtonGroupComponent, ButtonGroupModule, ButtonModule, ButtonToolbarComponent, CalloutComponent, CalloutModule, CardBodyComponent, CardComponent, CardFooterComponent, CardGroupComponent, CardHeaderActionsComponent, CardHeaderComponent, CardImgDirective, CardImgOverlayComponent, CardLinkDirective, CardModule, CardSubtitleDirective, CardTextDirective, CardTitleDirective, CarouselCaptionComponent, CarouselComponent, CarouselConfig, CarouselControlComponent, CarouselIndicatorsComponent, CarouselInnerComponent, CarouselItemComponent, CarouselModule, ClassToggleService, ColComponent, ColDirective, CollapseDirective, CollapseModule, ColorModeService, ContainerComponent, DropdownCloseDirective, DropdownComponent, DropdownDividerDirective, DropdownHeaderDirective, DropdownItemDirective, DropdownItemPlainDirective, DropdownMenuDirective, DropdownModule, DropdownService, DropdownToggleDirective, ElementRefDirective, FooterComponent, FooterModule, FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective, FormControlDirective, FormDirective, FormFeedbackComponent, FormFloatingDirective, FormLabelDirective, FormModule, FormSelectDirective, FormTextDirective, GridModule, GutterDirective, HeaderBrandComponent, HeaderComponent, HeaderDividerComponent, HeaderModule, HeaderNavComponent, HeaderTextComponent, HeaderTogglerDirective, HtmlAttributesDirective, ImgDirective, ImgModule, InMemoryStorageService, InputGroupComponent, InputGroupTextDirective, IntersectionService, ListGroupDirective, ListGroupItemDirective, ListGroupModule, ListenersService, LocalStorageService, ModalBodyComponent, ModalComponent, ModalContentComponent, ModalDialogComponent, ModalFooterComponent, ModalHeaderComponent, ModalModule, ModalService, ModalTitleDirective, ModalToggleDirective, NavComponent, NavItemComponent, NavLinkDirective, NavModule, NavbarBrandDirective, NavbarComponent, NavbarModule, NavbarNavComponent, NavbarTextComponent, NavbarTogglerDirective, OffcanvasBodyComponent, OffcanvasComponent, OffcanvasHeaderComponent, OffcanvasModule, OffcanvasService, OffcanvasTitleDirective, OffcanvasToggleDirective, PageItemComponent, PageItemDirective, PageLinkDirective, PaginationComponent, PaginationModule, PlaceholderAnimationDirective, PlaceholderDirective, PlaceholderModule, PopoverComponent, PopoverDirective, PopoverModule, ProgressBarComponent, ProgressBarDirective, ProgressComponent, ProgressModule, ProgressStackedComponent, RoundedDirective, RowComponent, RowDirective, RtlService, SearchButtonComponent, SearchButtonModule, ShadowOnScrollDirective, SharedModule, SidebarBrandComponent, SidebarComponent, SidebarFooterComponent, SidebarHeaderComponent, SidebarModule, SidebarNavComponent, SidebarNavHelper, SidebarService, SidebarToggleDirective, SidebarTogglerDirective, SpinnerComponent, SpinnerModule, TabContentComponent, TabContentRefDirective, TabDirective, TabPaneComponent, TabPanelComponent, TabService, TableActiveDirective, TableColorDirective, TableDirective, TableModule, Tabs2Module, TabsComponent, TabsContentComponent, TabsListComponent, TabsModule, TabsService, TemplateIdDirective, TextBgColorDirective, TextColorDirective, ThemeDirective, ToastBodyComponent, ToastCloseDirective, ToastComponent, ToastContentComponent, ToastHeaderComponent, ToastModule, ToasterComponent, ToasterHostDirective, ToasterPlacement, ToasterService, TooltipComponent, TooltipDirective, TooltipModule, UIDService, UtilitiesModule, WidgetModule, WidgetStatAComponent, WidgetStatBComponent, WidgetStatCComponent, WidgetStatDComponent, WidgetStatEComponent, WidgetStatFComponent };
+export { AccordionButtonDirective, AccordionComponent, AccordionItemComponent, AccordionModule, AlertComponent, AlertHeadingDirective, AlertLinkDirective, AlertModule, AlignDirective, AvatarComponent, AvatarModule, BackdropService, BadgeComponent, BadgeModule, BgColorDirective, BorderDirective, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, BreadcrumbRouterComponent, BreadcrumbRouterService, BreakpointInfix, ButtonCloseDirective, ButtonDirective, ButtonGroupComponent, ButtonGroupModule, ButtonModule, ButtonToolbarComponent, CalloutComponent, CalloutModule, CardBodyComponent, CardComponent, CardFooterComponent, CardGroupComponent, CardHeaderActionsComponent, CardHeaderComponent, CardImgDirective, CardImgOverlayComponent, CardLinkDirective, CardModule, CardSubtitleDirective, CardTextDirective, CardTitleDirective, CarouselCaptionComponent, CarouselComponent, CarouselConfig, CarouselControlComponent, CarouselIndicatorsComponent, CarouselInnerComponent, CarouselItemComponent, CarouselModule, ClassToggleService, ColComponent, ColDirective, CollapseDirective, CollapseModule, ColorModeService, ContainerComponent, DropdownCloseDirective, DropdownComponent, DropdownDividerDirective, DropdownHeaderDirective, DropdownItemDirective, DropdownItemPlainDirective, DropdownMenuDirective, DropdownModule, DropdownService, DropdownToggleDirective, ElementRefDirective, FooterComponent, FooterModule, FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective, FormControlDirective, FormDirective, FormFeedbackComponent, FormFloatingDirective, FormLabelDirective, FormModule, FormSelectDirective, FormTextDirective, GridModule, GutterDirective, HeaderBrandComponent, HeaderComponent, HeaderDividerComponent, HeaderModule, HeaderNavComponent, HeaderTextComponent, HeaderTogglerDirective, HtmlAttributesDirective, ImgDirective, ImgModule, InMemoryStorageService, InputGroupComponent, InputGroupTextDirective, IntersectionService, ListGroupDirective, ListGroupItemDirective, ListGroupModule, ListenersService, LocalStorageService, ModalBodyComponent, ModalComponent, ModalContentComponent, ModalDialogComponent, ModalFooterComponent, ModalHeaderComponent, ModalModule, ModalService, ModalTitleDirective, ModalToggleDirective, NavComponent, NavGroupComponent, NavGroupItemsComponent, NavGroupService, NavItemComponent, NavLinkDirective, NavModule, NavTitleComponent, NavbarBrandDirective, NavbarComponent, NavbarModule, NavbarNavComponent, NavbarTextComponent, NavbarTogglerDirective, OffcanvasBodyComponent, OffcanvasComponent, OffcanvasHeaderComponent, OffcanvasModule, OffcanvasService, OffcanvasTitleDirective, OffcanvasToggleDirective, PageItemComponent, PageItemDirective, PageLinkDirective, PaginationComponent, PaginationModule, PlaceholderAnimationDirective, PlaceholderDirective, PlaceholderModule, PopoverComponent, PopoverDirective, PopoverModule, ProgressBarComponent, ProgressBarDirective, ProgressComponent, ProgressModule, ProgressStackedComponent, RoundedDirective, RowComponent, RowDirective, RtlService, SearchButtonComponent, SearchButtonModule, ShadowOnScrollDirective, SharedModule, SidebarBrandComponent, SidebarComponent, SidebarFooterComponent, SidebarHeaderComponent, SidebarModule, SidebarNavComponent, SidebarNavHelper, SidebarService, SidebarToggleDirective, SidebarTogglerDirective, SpinnerComponent, SpinnerModule, TabContentComponent, TabContentRefDirective, TabDirective, TabPaneComponent, TabPanelComponent, TabService, TableActiveDirective, TableColorDirective, TableDirective, TableModule, Tabs2Module, TabsComponent, TabsContentComponent, TabsListComponent, TabsModule, TabsService, TemplateIdDirective, TextBgColorDirective, TextColorDirective, ThemeDirective, ToastBodyComponent, ToastCloseDirective, ToastComponent, ToastContentComponent, ToastHeaderComponent, ToastModule, ToasterComponent, ToasterHostDirective, ToasterPlacement, ToasterService, TooltipComponent, TooltipDirective, TooltipModule, UIDService, UtilitiesModule, WidgetModule, WidgetStatAComponent, WidgetStatBComponent, WidgetStatCComponent, WidgetStatDComponent, WidgetStatEComponent, WidgetStatFComponent };
 //# sourceMappingURL=coreui-angular.mjs.map