@ojiepermana/angular 22.1.13 → 22.1.14

package/fesm2022/{ojiepermana-angular-navigation-ojiepermana-angular-navigation-DNKU6viC.mjs → ojiepermana-angular-navigation-ojiepermana-angular-navigation-CIUhmytH.mjs}

@@ -7,6 +7,7 @@ import { NAVIGATION_ADAPTER, NAVIGATION_ROUTE_CONTEXT_ADAPTER } from '@ojieperma
 import { normalizeUiNavItems, NAVIGATION_DOCKBAR_FALLBACK_ICON } from '@ojiepermana/angular/navigation/types';
 import { NgTemplateOutlet } from '@angular/common';
 import { IconComponent } from '@ojiepermana/angular/component/icon';
+import { TooltipDirective } from '@ojiepermana/angular/component/tooltip';
 
 function injectNavigationController(inputs) {
     const nav = inject(NAVIGATION_ADAPTER);
@@ -446,12 +447,12 @@ class NavigationContainerComponent {
             .replace(/[^a-z0-9_-]+/g, '-');
         return normalized || 'default';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.4", type: NavigationContainerComponent, isStandalone: true, selector: "Navigation", inputs: { navId: { classPropertyName: "navId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, dataId: { classPropertyName: "dataId", publicName: "data-id", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, collapseTree: { classPropertyName: "collapseTree", publicName: "collapse-tree", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, itemClass: { classPropertyName: "itemClass", publicName: "itemClass", isSignal: true, isRequired: false, transformFunction: null }, groupClass: { classPropertyName: "groupClass", publicName: "nav-group-class", isSignal: true, isRequired: false, transformFunction: null }, activeIds: { classPropertyName: "activeIds", publicName: "activeIds", isSignal: true, isRequired: false, transformFunction: null }, activeUrl: { classPropertyName: "activeUrl", publicName: "activeUrl", isSignal: true, isRequired: false, transformFunction: null }, openedIds: { classPropertyName: "openedIds", publicName: "openedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedIds: "openedIdsChange", itemSelected: "itemSelected" }, host: { attributes: { "role": "navigation" }, listeners: { "mouseenter": "setHoverPreview(true)", "mouseleave": "setHoverPreview(false)", "focusin": "setFocusPreview(true)", "focusout": "setFocusPreview(false, $event)" }, properties: { "class": "hostClasses()", "attr.aria-label": "ariaLabel() || null", "attr.data-navigation-id": "resolvedState().id", "attr.data-id": "resolvedDataId()", "attr.data-orientation": "resolvedState().orientation", "attr.data-type": "resolvedState().type", "attr.data-type-style": "typeStyle()", "attr.data-position": "resolvedState().position", "attr.data-collapse-tree": "collapseTree()", "attr.data-preview-expanded": "previewRailExpanded() ? \"true\" : null" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavigationContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.6", type: NavigationContainerComponent, isStandalone: true, selector: "Navigation", inputs: { navId: { classPropertyName: "navId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, dataId: { classPropertyName: "dataId", publicName: "data-id", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, collapseTree: { classPropertyName: "collapseTree", publicName: "collapse-tree", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, itemClass: { classPropertyName: "itemClass", publicName: "itemClass", isSignal: true, isRequired: false, transformFunction: null }, groupClass: { classPropertyName: "groupClass", publicName: "nav-group-class", isSignal: true, isRequired: false, transformFunction: null }, activeIds: { classPropertyName: "activeIds", publicName: "activeIds", isSignal: true, isRequired: false, transformFunction: null }, activeUrl: { classPropertyName: "activeUrl", publicName: "activeUrl", isSignal: true, isRequired: false, transformFunction: null }, openedIds: { classPropertyName: "openedIds", publicName: "openedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedIds: "openedIdsChange", itemSelected: "itemSelected" }, host: { attributes: { "role": "navigation" }, listeners: { "mouseenter": "setHoverPreview(true)", "mouseleave": "setHoverPreview(false)", "focusin": "setFocusPreview(true)", "focusout": "setFocusPreview(false, $event)" }, properties: { "class": "hostClasses()", "attr.aria-label": "ariaLabel() || null", "attr.data-navigation-id": "resolvedState().id", "attr.data-id": "resolvedDataId()", "attr.data-orientation": "resolvedState().orientation", "attr.data-type": "resolvedState().type", "attr.data-type-style": "typeStyle()", "attr.data-position": "resolvedState().position", "attr.data-collapse-tree": "collapseTree()", "attr.data-preview-expanded": "previewRailExpanded() ? \"true\" : null" } }, providers: [
             { provide: NAVIGATION_SHELL, useExisting: forwardRef(() => NavigationContainerComponent) },
         ], queries: [{ propertyName: "iconTemplate", first: true, predicate: NavigationIconDirective, descendants: true, isSignal: true }], ngImport: i0, template: ` <ng-content /> `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavigationContainerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'Navigation',
@@ -512,8 +513,8 @@ class NavigationItemContentComponent {
     compactFallback() {
         return this.nav.compactFallback(this.item());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationItemContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NavigationItemContentComponent, isStandalone: true, selector: "NavigationItemContent", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavigationItemContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: NavigationItemContentComponent, isStandalone: true, selector: "NavigationItemContent", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
     @if (item().icon; as iconName) {
       <span data-navigation-icon-slot="true" [class]="iconSlotClasses()">
         @if (iconTemplate(); as customIcon) {
@@ -545,7 +546,7 @@ class NavigationItemContentComponent {
     }
   `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "Icon", inputs: ["name", "class", "size", "fill", "weight", "grade", "opticalSize"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationItemContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavigationItemContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'NavigationItemContent',
@@ -626,6 +627,7 @@ class NavigationItemComponent {
     ...(ngDevMode ? [{ debugName: "activeUrl" }] : /* istanbul ignore next */ []));
     iconTemplate = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "iconTemplate" }] : /* istanbul ignore next */ []));
+    tooltipPosition = input('above', { ...(ngDevMode ? { debugName: "tooltipPosition" } : /* istanbul ignore next */ {}), alias: 'tooltip-position' });
     collapseTree = input('stairs', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "collapseTree" }] : /* istanbul ignore next */ []));
     straightRail = input(false, /* @ts-ignore */
@@ -841,8 +843,8 @@ class NavigationItemComponent {
             ? 'before:bottom-[calc(100%-var(--nav-item-height)/2)]'
             : 'before:-bottom-0.5');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NavigationItemComponent, isStandalone: true, selector: "li[NavigationItem]", inputs: { navId: { classPropertyName: "navId", publicName: "navId", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, itemClass: { classPropertyName: "itemClass", publicName: "itemClass", isSignal: true, isRequired: false, transformFunction: null }, activeIds: { classPropertyName: "activeIds", publicName: "activeIds", isSignal: true, isRequired: false, transformFunction: null }, activeUrl: { classPropertyName: "activeUrl", publicName: "activeUrl", isSignal: true, isRequired: false, transformFunction: null }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null }, collapseTree: { classPropertyName: "collapseTree", publicName: "collapseTree", isSignal: true, isRequired: false, transformFunction: null }, straightRail: { classPropertyName: "straightRail", publicName: "straightRail", isSignal: true, isRequired: false, transformFunction: null }, stairsRail: { classPropertyName: "stairsRail", publicName: "stairsRail", isSignal: true, isRequired: false, transformFunction: null }, straightRailActive: { classPropertyName: "straightRailActive", publicName: "straightRailActive", isSignal: true, isRequired: false, transformFunction: null }, firstInBranch: { classPropertyName: "firstInBranch", publicName: "firstInBranch", isSignal: true, isRequired: false, transformFunction: null }, lastInBranch: { classPropertyName: "lastInBranch", publicName: "lastInBranch", isSignal: true, isRequired: false, transformFunction: null }, openedIds: { classPropertyName: "openedIds", publicName: "openedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedIdsChange: "openedIdsChange", itemSelected: "itemSelected" }, host: { properties: { "class": "hostClasses()", "attr.role": "hostRole()", "attr.data-navigation-item-key": "item().key", "attr.aria-hidden": "item().type === \"spacer\" || item().type === \"divider\" ? \"true\" : null" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: NavigationItemComponent, isStandalone: true, selector: "li[NavigationItem]", inputs: { navId: { classPropertyName: "navId", publicName: "navId", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, itemClass: { classPropertyName: "itemClass", publicName: "itemClass", isSignal: true, isRequired: false, transformFunction: null }, activeIds: { classPropertyName: "activeIds", publicName: "activeIds", isSignal: true, isRequired: false, transformFunction: null }, activeUrl: { classPropertyName: "activeUrl", publicName: "activeUrl", isSignal: true, isRequired: false, transformFunction: null }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltip-position", isSignal: true, isRequired: false, transformFunction: null }, collapseTree: { classPropertyName: "collapseTree", publicName: "collapseTree", isSignal: true, isRequired: false, transformFunction: null }, straightRail: { classPropertyName: "straightRail", publicName: "straightRail", isSignal: true, isRequired: false, transformFunction: null }, stairsRail: { classPropertyName: "stairsRail", publicName: "stairsRail", isSignal: true, isRequired: false, transformFunction: null }, straightRailActive: { classPropertyName: "straightRailActive", publicName: "straightRailActive", isSignal: true, isRequired: false, transformFunction: null }, firstInBranch: { classPropertyName: "firstInBranch", publicName: "firstInBranch", isSignal: true, isRequired: false, transformFunction: null }, lastInBranch: { classPropertyName: "lastInBranch", publicName: "lastInBranch", isSignal: true, isRequired: false, transformFunction: null }, openedIds: { classPropertyName: "openedIds", publicName: "openedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedIdsChange: "openedIdsChange", itemSelected: "itemSelected" }, host: { properties: { "class": "hostClasses()", "attr.role": "hostRole()", "attr.data-navigation-item-key": "item().key", "attr.aria-hidden": "item().type === \"spacer\" || item().type === \"divider\" ? \"true\" : null" } }, ngImport: i0, template: `
     @switch (item().type) {
       @case ('divider') {
         <span class="block h-px w-full bg-border"></span>
@@ -883,6 +885,8 @@ class NavigationItemComponent {
           [attr.aria-controls]="showChildren() ? panelId() : null"
           [attr.aria-label]="compactLabel()"
           [attr.title]="titleFor()"
+          [Tooltip]="compact() ? (titleFor() ?? '') : ''"
+          [TooltipPosition]="tooltipPosition()"
           [disabled]="item().disabled || null"
           (click)="toggleOpen()"
         >
@@ -940,6 +944,8 @@ class NavigationItemComponent {
             [attr.tabindex]="leafTabIndex()"
             [attr.aria-label]="compactLabel()"
             [attr.title]="titleFor()"
+            [Tooltip]="compact() ? (titleFor() ?? '') : ''"
+            [TooltipPosition]="tooltipPosition()"
             [attr.role]="itemRole()"
             [attr.data-navigation-root-item]="isHorizontalRoot() ? 'true' : null"
             (click)="selectItem($event)"
@@ -964,6 +970,8 @@ class NavigationItemComponent {
             [attr.tabindex]="leafTabIndex()"
             [attr.aria-label]="compactLabel()"
             [attr.title]="titleFor()"
+            [Tooltip]="compact() ? (titleFor() ?? '') : ''"
+            [TooltipPosition]="tooltipPosition()"
             [attr.role]="itemRole()"
             [attr.data-navigation-root-item]="isHorizontalRoot() ? 'true' : null"
             (click)="selectItem($event)"
@@ -1026,6 +1034,7 @@ class NavigationItemComponent {
           [activeIds]="activeIds()"
           [activeUrl]="activeUrl()"
           [iconTemplate]="iconTemplate()"
+          [tooltip-position]="tooltipPosition()"
           [collapseTree]="collapseTree()"
           [straightRail]="showStraightRailForChildren()"
           [stairsRail]="showsStairsRailForChildren()"
@@ -1038,9 +1047,9 @@ class NavigationItemComponent {
         ></li>
       }
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "component", type: NavigationItemComponent, selector: "li[NavigationItem]", inputs: ["navId", "item", "level", "orientation", "compact", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "straightRail", "stairsRail", "straightRailActive", "firstInBranch", "lastInBranch", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "component", type: IconComponent, selector: "Icon", inputs: ["name", "class", "size", "fill", "weight", "grade", "opticalSize"] }, { kind: "component", type: NavigationItemContentComponent, selector: "NavigationItemContent", inputs: ["item", "active", "compact", "orientation", "level", "iconTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: NavigationItemComponent, selector: "li[NavigationItem]", inputs: ["navId", "item", "level", "orientation", "compact", "itemClass", "activeIds", "activeUrl", "iconTemplate", "tooltip-position", "collapseTree", "straightRail", "stairsRail", "straightRailActive", "firstInBranch", "lastInBranch", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "component", type: IconComponent, selector: "Icon", inputs: ["name", "class", "size", "fill", "weight", "grade", "opticalSize"] }, { kind: "component", type: NavigationItemContentComponent, selector: "NavigationItemContent", inputs: ["item", "active", "compact", "orientation", "level", "iconTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: TooltipDirective, selector: "[Tooltip]", inputs: ["Tooltip", "TooltipPosition", "TooltipDisabled", "TooltipShowDelay", "TooltipHideDelay"], exportAs: ["Tooltip"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavigationItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'li[NavigationItem]',
@@ -1050,6 +1059,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         NgTemplateOutlet,
                         RouterLink,
                         RouterLinkActive,
+                        TooltipDirective,
                     ],
                     host: {
                         '[class]': 'hostClasses()',
@@ -1098,6 +1108,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
           [attr.aria-controls]="showChildren() ? panelId() : null"
           [attr.aria-label]="compactLabel()"
           [attr.title]="titleFor()"
+          [Tooltip]="compact() ? (titleFor() ?? '') : ''"
+          [TooltipPosition]="tooltipPosition()"
           [disabled]="item().disabled || null"
           (click)="toggleOpen()"
         >
@@ -1155,6 +1167,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
             [attr.tabindex]="leafTabIndex()"
             [attr.aria-label]="compactLabel()"
             [attr.title]="titleFor()"
+            [Tooltip]="compact() ? (titleFor() ?? '') : ''"
+            [TooltipPosition]="tooltipPosition()"
             [attr.role]="itemRole()"
             [attr.data-navigation-root-item]="isHorizontalRoot() ? 'true' : null"
             (click)="selectItem($event)"
@@ -1179,6 +1193,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
             [attr.tabindex]="leafTabIndex()"
             [attr.aria-label]="compactLabel()"
             [attr.title]="titleFor()"
+            [Tooltip]="compact() ? (titleFor() ?? '') : ''"
+            [TooltipPosition]="tooltipPosition()"
             [attr.role]="itemRole()"
             [attr.data-navigation-root-item]="isHorizontalRoot() ? 'true' : null"
             (click)="selectItem($event)"
@@ -1241,6 +1257,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
           [activeIds]="activeIds()"
           [activeUrl]="activeUrl()"
           [iconTemplate]="iconTemplate()"
+          [tooltip-position]="tooltipPosition()"
           [collapseTree]="collapseTree()"
           [straightRail]="showStraightRailForChildren()"
           [stairsRail]="showsStairsRailForChildren()"
@@ -1255,7 +1272,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
     </ng-template>
   `,
                 }]
-        }], propDecorators: { navId: [{ type: i0.Input, args: [{ isSignal: true, alias: "navId", required: false }] }], item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], itemClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemClass", required: false }] }], activeIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIds", required: false }] }], activeUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeUrl", required: false }] }], iconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTemplate", required: false }] }], collapseTree: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseTree", required: false }] }], straightRail: [{ type: i0.Input, args: [{ isSignal: true, alias: "straightRail", required: false }] }], stairsRail: [{ type: i0.Input, args: [{ isSignal: true, alias: "stairsRail", required: false }] }], straightRailActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "straightRailActive", required: false }] }], firstInBranch: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstInBranch", required: false }] }], lastInBranch: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastInBranch", required: false }] }], openedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "openedIds", required: false }] }], openedIdsChange: [{ type: i0.Output, args: ["openedIdsChange"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }] } });
+        }], propDecorators: { navId: [{ type: i0.Input, args: [{ isSignal: true, alias: "navId", required: false }] }], item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], itemClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemClass", required: false }] }], activeIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIds", required: false }] }], activeUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeUrl", required: false }] }], iconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTemplate", required: false }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip-position", required: false }] }], collapseTree: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseTree", required: false }] }], straightRail: [{ type: i0.Input, args: [{ isSignal: true, alias: "straightRail", required: false }] }], stairsRail: [{ type: i0.Input, args: [{ isSignal: true, alias: "stairsRail", required: false }] }], straightRailActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "straightRailActive", required: false }] }], firstInBranch: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstInBranch", required: false }] }], lastInBranch: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastInBranch", required: false }] }], openedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "openedIds", required: false }] }], openedIdsChange: [{ type: i0.Output, args: ["openedIdsChange"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }] } });
 
 class NavigationListComponent {
     navId = input('default', /* @ts-ignore */
@@ -1290,8 +1307,8 @@ class NavigationListComponent {
         ? cn('flex list-none flex-col items-center gap-0.5 p-0')
         : cn('flex list-none flex-col gap-0.5 p-0', this.position() === 'right' && 'items-end'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "listClasses" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NavigationListComponent, isStandalone: true, selector: "NavigationList", inputs: { navId: { classPropertyName: "navId", publicName: "navId", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, itemClass: { classPropertyName: "itemClass", publicName: "itemClass", isSignal: true, isRequired: false, transformFunction: null }, activeIds: { classPropertyName: "activeIds", publicName: "activeIds", isSignal: true, isRequired: false, transformFunction: null }, activeUrl: { classPropertyName: "activeUrl", publicName: "activeUrl", isSignal: true, isRequired: false, transformFunction: null }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null }, collapseTree: { classPropertyName: "collapseTree", publicName: "collapseTree", isSignal: true, isRequired: false, transformFunction: null }, openedIds: { classPropertyName: "openedIds", publicName: "openedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedIdsChange: "openedIdsChange", itemSelected: "itemSelected" }, host: { properties: { "class": "hostClasses()", "attr.data-position": "position()" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavigationListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: NavigationListComponent, isStandalone: true, selector: "NavigationList", inputs: { navId: { classPropertyName: "navId", publicName: "navId", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, itemClass: { classPropertyName: "itemClass", publicName: "itemClass", isSignal: true, isRequired: false, transformFunction: null }, activeIds: { classPropertyName: "activeIds", publicName: "activeIds", isSignal: true, isRequired: false, transformFunction: null }, activeUrl: { classPropertyName: "activeUrl", publicName: "activeUrl", isSignal: true, isRequired: false, transformFunction: null }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null }, collapseTree: { classPropertyName: "collapseTree", publicName: "collapseTree", isSignal: true, isRequired: false, transformFunction: null }, openedIds: { classPropertyName: "openedIds", publicName: "openedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedIdsChange: "openedIdsChange", itemSelected: "itemSelected" }, host: { properties: { "class": "hostClasses()", "attr.data-position": "position()" } }, ngImport: i0, template: `
     <ul [class]="listClasses()" role="list">
       @for (item of items(); track item.key) {
         <li
@@ -1312,9 +1329,9 @@ class NavigationListComponent {
         ></li>
       }
     </ul>
-  `, isInline: true, dependencies: [{ kind: "component", type: NavigationItemComponent, selector: "li[NavigationItem]", inputs: ["navId", "item", "level", "orientation", "compact", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "straightRail", "stairsRail", "straightRailActive", "firstInBranch", "lastInBranch", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: NavigationItemComponent, selector: "li[NavigationItem]", inputs: ["navId", "item", "level", "orientation", "compact", "itemClass", "activeIds", "activeUrl", "iconTemplate", "tooltip-position", "collapseTree", "straightRail", "stairsRail", "straightRailActive", "firstInBranch", "lastInBranch", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavigationListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'NavigationList',
@@ -1360,8 +1377,8 @@ class NavigationContentComponent {
         ? 'flex h-full min-w-0 items-stretch justify-center overflow-visible'
         : 'block overflow-y-auto overflow-x-hidden py-2', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NavigationContentComponent, isStandalone: true, selector: "NavigationContent", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavigationContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: NavigationContentComponent, isStandalone: true, selector: "NavigationContent", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
     @let navState = container.displayState();
 
     @if (navState.orientation === 'horizontal' && navState.type === 'flyout') {
@@ -1458,14 +1475,14 @@ class NavigationContentComponent {
       />
     }
   `, isInline: true, dependencies: [{ kind: "component", type: NavigationListComponent, selector: "NavigationList", inputs: ["navId", "items", "collapsed", "compact", "position", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }], deferBlockDependencies: [() => [/* @ts-ignore */
-                import('./ojiepermana-angular-navigation-navigation-flyout-menu.component-BCGvhoYj.mjs').then(m => m.NavigationFlyoutMenuComponent)], () => [/* @ts-ignore */
-                import('./ojiepermana-angular-navigation-navigation-horizontal.component-Dk_03e-6.mjs').then(m => m.NavigationHorizontalComponent)], () => [/* @ts-ignore */
-                import('./ojiepermana-angular-navigation-navigation-dockbar-menu.component-DBQHdvGa.mjs').then(m => m.NavigationDockbarMenuComponent)]] });
+                import('./ojiepermana-angular-navigation-navigation-flyout-menu.component-DA8VPEn7.mjs').then(m => m.NavigationFlyoutMenuComponent)], () => [/* @ts-ignore */
+                import('./ojiepermana-angular-navigation-navigation-horizontal.component-U2TJTzlW.mjs').then(m => m.NavigationHorizontalComponent)], () => [/* @ts-ignore */
+                import('./ojiepermana-angular-navigation-navigation-dockbar-menu.component-Bc7DWK3R.mjs').then(m => m.NavigationDockbarMenuComponent)]] });
 }
-i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.1.4", ngImport: i0, type: NavigationContentComponent, resolveDeferredDeps: () => [/* @ts-ignore */
-        import('./ojiepermana-angular-navigation-navigation-flyout-menu.component-BCGvhoYj.mjs').then(m => m.NavigationFlyoutMenuComponent), /* @ts-ignore */
-        import('./ojiepermana-angular-navigation-navigation-horizontal.component-Dk_03e-6.mjs').then(m => m.NavigationHorizontalComponent), /* @ts-ignore */
-        import('./ojiepermana-angular-navigation-navigation-dockbar-menu.component-DBQHdvGa.mjs').then(m => m.NavigationDockbarMenuComponent)], resolveMetadata: (NavigationFlyoutMenuComponent, NavigationHorizontalComponent, NavigationDockbarMenuComponent) => ({ decorators: [{
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.1.6", ngImport: i0, type: NavigationContentComponent, resolveDeferredDeps: () => [/* @ts-ignore */
+        import('./ojiepermana-angular-navigation-navigation-flyout-menu.component-DA8VPEn7.mjs').then(m => m.NavigationFlyoutMenuComponent), /* @ts-ignore */
+        import('./ojiepermana-angular-navigation-navigation-horizontal.component-U2TJTzlW.mjs').then(m => m.NavigationHorizontalComponent), /* @ts-ignore */
+        import('./ojiepermana-angular-navigation-navigation-dockbar-menu.component-Bc7DWK3R.mjs').then(m => m.NavigationDockbarMenuComponent)], resolveMetadata: (NavigationFlyoutMenuComponent, NavigationHorizontalComponent, NavigationDockbarMenuComponent) => ({ decorators: [{
                 type: Component,
                 args: [{
                         selector: 'NavigationContent',
@@ -1596,14 +1613,14 @@ class NavigationFooterComponent {
         ? 'relative z-10 block h-full w-auto shrink-0'
         : 'sticky bottom-0 z-10 block h-(--layout-topbar-height) shrink-0 border-t border-[hsl(var(--border)/var(--section-border-opacity))]', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: NavigationFooterComponent, isStandalone: true, selector: "NavigationFooter", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.data-collapsed": "displayCollapsed()" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavigationFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: NavigationFooterComponent, isStandalone: true, selector: "NavigationFooter", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.data-collapsed": "displayCollapsed()" } }, ngImport: i0, template: `
     <div [class]="rowClasses()">
       <ng-content />
     </div>
   `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavigationFooterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'NavigationFooter',
@@ -1670,8 +1687,8 @@ class NavigationHeaderComponent {
     toggleCollapsed() {
         this.shell.toggleCollapsed();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NavigationHeaderComponent, isStandalone: true, selector: "NavigationHeader", inputs: { toggle: { classPropertyName: "toggle", publicName: "toggle", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.data-collapsed": "displayCollapsed()" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavigationHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: NavigationHeaderComponent, isStandalone: true, selector: "NavigationHeader", inputs: { toggle: { classPropertyName: "toggle", publicName: "toggle", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.data-collapsed": "displayCollapsed()" } }, ngImport: i0, template: `
     <div [class]="rowClasses()">
       <div [class]="contentClasses()">
         <ng-content />
@@ -1697,7 +1714,7 @@ class NavigationHeaderComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "Icon", inputs: ["name", "class", "size", "fill", "weight", "grade", "opticalSize"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavigationHeaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'NavigationHeader',
@@ -1770,8 +1787,8 @@ class NavigationSidebarComponent {
         this.container.registerType(config);
         this.destroyRef.onDestroy(() => this.container.unregisterType(config));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NavigationSidebarComponent, isStandalone: true, selector: "NavigationSidebar", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, collapse: { classPropertyName: "collapse", publicName: "nav-sidebar-collapse", isSignal: true, isRequired: false, transformFunction: null }, previewExpanded: { classPropertyName: "previewExpanded", publicName: "previewExpanded", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "headerSlot", first: true, predicate: NavigationHeaderComponent, descendants: true, isSignal: true }, { propertyName: "contentSlot", first: true, predicate: NavigationContentComponent, descendants: true, isSignal: true }, { propertyName: "footerSlot", first: true, predicate: NavigationFooterComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavigationSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: NavigationSidebarComponent, isStandalone: true, selector: "NavigationSidebar", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, collapse: { classPropertyName: "collapse", publicName: "nav-sidebar-collapse", isSignal: true, isRequired: false, transformFunction: null }, previewExpanded: { classPropertyName: "previewExpanded", publicName: "previewExpanded", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "headerSlot", first: true, predicate: NavigationHeaderComponent, descendants: true, isSignal: true }, { propertyName: "contentSlot", first: true, predicate: NavigationContentComponent, descendants: true, isSignal: true }, { propertyName: "footerSlot", first: true, predicate: NavigationFooterComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (headerSlot()) {
       <ng-content select="NavigationHeader" />
     }
@@ -1787,7 +1804,7 @@ class NavigationSidebarComponent {
     }
   `, isInline: true, dependencies: [{ kind: "component", type: NavigationContentComponent, selector: "NavigationContent", inputs: ["class"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationSidebarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavigationSidebarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'NavigationSidebar',
@@ -1831,10 +1848,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
  */
 class NavigationAsideFooterDirective {
     templateRef = inject((TemplateRef));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationAsideFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: NavigationAsideFooterDirective, isStandalone: true, selector: "ng-template[NavigationAsideFooter]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavigationAsideFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: NavigationAsideFooterDirective, isStandalone: true, selector: "ng-template[NavigationAsideFooter]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationAsideFooterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavigationAsideFooterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[NavigationAsideFooter]',
@@ -1930,8 +1947,8 @@ class NavigationDockbarComponent {
             }, { injector: this.injector });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationDockbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NavigationDockbarComponent, isStandalone: true, selector: "NavigationDockbar", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, routeContext: { classPropertyName: "routeContext", publicName: "dockbar-route-context", isSignal: true, isRequired: false, transformFunction: null }, badgeContext: { classPropertyName: "badgeContext", publicName: "dockbar-badge", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.escape": "onEscape($event)", "pointerout": "onPointerOut($event)" }, properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "headerSlot", first: true, predicate: NavigationHeaderComponent, descendants: true, isSignal: true }, { propertyName: "contentSlot", first: true, predicate: NavigationContentComponent, descendants: true, isSignal: true }, { propertyName: "footerSlot", first: true, predicate: NavigationFooterComponent, descendants: true, isSignal: true }, { propertyName: "asideFooterSlot", first: true, predicate: NavigationAsideFooterDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavigationDockbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: NavigationDockbarComponent, isStandalone: true, selector: "NavigationDockbar", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, routeContext: { classPropertyName: "routeContext", publicName: "dockbar-route-context", isSignal: true, isRequired: false, transformFunction: null }, badgeContext: { classPropertyName: "badgeContext", publicName: "dockbar-badge", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.escape": "onEscape($event)", "pointerout": "onPointerOut($event)" }, properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "headerSlot", first: true, predicate: NavigationHeaderComponent, descendants: true, isSignal: true }, { propertyName: "contentSlot", first: true, predicate: NavigationContentComponent, descendants: true, isSignal: true }, { propertyName: "footerSlot", first: true, predicate: NavigationFooterComponent, descendants: true, isSignal: true }, { propertyName: "asideFooterSlot", first: true, predicate: NavigationAsideFooterDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (headerSlot()) {
       <ng-content select="NavigationHeader" />
     } @else if (container.dockbarRouteHeader(); as routeHeader) {
@@ -1965,6 +1982,8 @@ class NavigationDockbarComponent {
             data-navigation-dockbar-route-trigger="true"
             [attr.data-navigation-item-key]="routeHeader.activeEntry?.key"
             class="relative inline-flex size-(--nav-rail-item-size) items-center justify-center rounded-md bg-accent text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            [Tooltip]="routeHeader.label"
+            [TooltipPosition]="position() === 'right' ? 'left' : 'right'"
             [attr.aria-controls]="container.dockbarAsideId()"
             [attr.aria-expanded]="container.dockbarActiveRoutePanelExpanded()"
             (click)="toggleActiveRoutePanel()"
@@ -1976,6 +1995,8 @@ class NavigationDockbarComponent {
           <span
             data-navigation-dockbar-route-header="true"
             class="relative inline-flex size-(--nav-rail-item-size) items-center justify-center text-foreground"
+            [Tooltip]="routeHeader.label"
+            [TooltipPosition]="position() === 'right' ? 'left' : 'right'"
           >
             <span class="sr-only">{{ routeHeader.label }}</span>
             <ng-container [ngTemplateOutlet]="routeIndicator" />
@@ -1993,11 +2014,11 @@ class NavigationDockbarComponent {
     @if (footerSlot()) {
       <ng-content select="NavigationFooter" />
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "Icon", inputs: ["name", "class", "size", "fill", "weight", "grade", "opticalSize"] }, { kind: "component", type: NavigationContentComponent, selector: "NavigationContent", inputs: ["class"] }, { kind: "component", type: NavigationHeaderComponent, selector: "NavigationHeader", inputs: ["toggle", "class"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], deferBlockDependencies: [() => [/* @ts-ignore */
-                import('./ojiepermana-angular-navigation-navigation-badge-count.component-CDBxQ8rk.mjs').then(m => m.NavigationBadgeCountComponent)]] });
+  `, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "Icon", inputs: ["name", "class", "size", "fill", "weight", "grade", "opticalSize"] }, { kind: "component", type: NavigationContentComponent, selector: "NavigationContent", inputs: ["class"] }, { kind: "component", type: NavigationHeaderComponent, selector: "NavigationHeader", inputs: ["toggle", "class"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TooltipDirective, selector: "[Tooltip]", inputs: ["Tooltip", "TooltipPosition", "TooltipDisabled", "TooltipShowDelay", "TooltipHideDelay"], exportAs: ["Tooltip"] }], deferBlockDependencies: [() => [/* @ts-ignore */
+                import('./ojiepermana-angular-navigation-navigation-badge-count.component-Be3IqzG4.mjs').then(m => m.NavigationBadgeCountComponent)]] });
 }
-i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.1.4", ngImport: i0, type: NavigationDockbarComponent, resolveDeferredDeps: () => [/* @ts-ignore */
-        import('./ojiepermana-angular-navigation-navigation-badge-count.component-CDBxQ8rk.mjs').then(m => m.NavigationBadgeCountComponent)], resolveMetadata: NavigationBadgeCountComponent => ({ decorators: [{
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.1.6", ngImport: i0, type: NavigationDockbarComponent, resolveDeferredDeps: () => [/* @ts-ignore */
+        import('./ojiepermana-angular-navigation-navigation-badge-count.component-Be3IqzG4.mjs').then(m => m.NavigationBadgeCountComponent)], resolveMetadata: NavigationBadgeCountComponent => ({ decorators: [{
                 type: Component,
                 args: [{
                         selector: 'NavigationDockbar',
@@ -2007,6 +2028,7 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.1.4", ng
                             NavigationContentComponent,
                             NavigationHeaderComponent,
                             NgTemplateOutlet,
+                            TooltipDirective,
                         ],
                         host: {
                             '[class]': 'hostClasses()',
@@ -2047,6 +2069,8 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.1.4", ng
             data-navigation-dockbar-route-trigger="true"
             [attr.data-navigation-item-key]="routeHeader.activeEntry?.key"
             class="relative inline-flex size-(--nav-rail-item-size) items-center justify-center rounded-md bg-accent text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            [Tooltip]="routeHeader.label"
+            [TooltipPosition]="position() === 'right' ? 'left' : 'right'"
             [attr.aria-controls]="container.dockbarAsideId()"
             [attr.aria-expanded]="container.dockbarActiveRoutePanelExpanded()"
             (click)="toggleActiveRoutePanel()"
@@ -2058,6 +2082,8 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.1.4", ng
           <span
             data-navigation-dockbar-route-header="true"
             class="relative inline-flex size-(--nav-rail-item-size) items-center justify-center text-foreground"
+            [Tooltip]="routeHeader.label"
+            [TooltipPosition]="position() === 'right' ? 'left' : 'right'"
           >
             <span class="sr-only">{{ routeHeader.label }}</span>
             <ng-container [ngTemplateOutlet]="routeIndicator" />
@@ -2109,8 +2135,8 @@ class NavigationNavbarComponent {
         this.container.registerType(config);
         this.destroyRef.onDestroy(() => this.container.unregisterType(config));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NavigationNavbarComponent, isStandalone: true, selector: "NavigationNavbar", inputs: { position: { classPropertyName: "position", publicName: "nav-position", isSignal: true, isRequired: false, transformFunction: null }, typeStyle: { classPropertyName: "typeStyle", publicName: "nav-type-style", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "headerSlot", first: true, predicate: NavigationHeaderComponent, descendants: true, isSignal: true }, { propertyName: "contentSlot", first: true, predicate: NavigationContentComponent, descendants: true, isSignal: true }, { propertyName: "footerSlot", first: true, predicate: NavigationFooterComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavigationNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: NavigationNavbarComponent, isStandalone: true, selector: "NavigationNavbar", inputs: { position: { classPropertyName: "position", publicName: "nav-position", isSignal: true, isRequired: false, transformFunction: null }, typeStyle: { classPropertyName: "typeStyle", publicName: "nav-type-style", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "headerSlot", first: true, predicate: NavigationHeaderComponent, descendants: true, isSignal: true }, { propertyName: "contentSlot", first: true, predicate: NavigationContentComponent, descendants: true, isSignal: true }, { propertyName: "footerSlot", first: true, predicate: NavigationFooterComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (headerSlot()) {
       <ng-content select="NavigationHeader" />
     }
@@ -2126,7 +2152,7 @@ class NavigationNavbarComponent {
     }
   `, isInline: true, dependencies: [{ kind: "component", type: NavigationContentComponent, selector: "NavigationContent", inputs: ["class"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationNavbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavigationNavbarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'NavigationNavbar',
@@ -2218,8 +2244,8 @@ class NavigationFlyoutComponent {
         this.container.registerType(config);
         this.destroyRef.onDestroy(() => this.container.unregisterType(config));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationFlyoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: NavigationFlyoutComponent, isStandalone: true, selector: "NavigationFlyout", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "icon-only", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "icon-position", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "trigger-variant", isSignal: true, isRequired: false, transformFunction: null }, triggerFloating: { classPropertyName: "triggerFloating", publicName: "trigger-floating", isSignal: true, isRequired: false, transformFunction: null }, panelViewport: { classPropertyName: "panelViewport", publicName: "panel-viewport", isSignal: true, isRequired: false, transformFunction: null }, triggerClass: { classPropertyName: "triggerClass", publicName: "trigger-class", isSignal: true, isRequired: false, transformFunction: null }, triggerButtonClass: { classPropertyName: "triggerButtonClass", publicName: "trigger-button-class", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "nav-position", isSignal: true, isRequired: false, transformFunction: null }, typeStyle: { classPropertyName: "typeStyle", publicName: "nav-type-style", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavigationFlyoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: NavigationFlyoutComponent, isStandalone: true, selector: "NavigationFlyout", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "icon-only", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "icon-position", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "trigger-variant", isSignal: true, isRequired: false, transformFunction: null }, triggerFloating: { classPropertyName: "triggerFloating", publicName: "trigger-floating", isSignal: true, isRequired: false, transformFunction: null }, panelViewport: { classPropertyName: "panelViewport", publicName: "panel-viewport", isSignal: true, isRequired: false, transformFunction: null }, triggerClass: { classPropertyName: "triggerClass", publicName: "trigger-class", isSignal: true, isRequired: false, transformFunction: null }, triggerButtonClass: { classPropertyName: "triggerButtonClass", publicName: "trigger-button-class", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "nav-position", isSignal: true, isRequired: false, transformFunction: null }, typeStyle: { classPropertyName: "typeStyle", publicName: "nav-type-style", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
     <!-- Bar hanya berisi trigger (dari NavigationContent → FlyoutMenu); NavigationHeader &
          NavigationFooter di-re-project ke DALAM panel flyout saat dibuka. Urutan dibaca dari sisi
          bar ke arah luar: header (menempel bar, sticky) → menu → footer (ujung jauh). Mode top:
@@ -2230,7 +2256,7 @@ class NavigationFlyoutComponent {
     </NavigationContent>
   `, isInline: true, dependencies: [{ kind: "component", type: NavigationContentComponent, selector: "NavigationContent", inputs: ["class"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationFlyoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavigationFlyoutComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'NavigationFlyout',
@@ -2276,10 +2302,10 @@ class NavigationCollapseRootDirective {
     ...(ngDevMode ? [{ debugName: "collapseEnabled" }] : /* istanbul ignore next */ []));
     displayCollapsed = computed(() => isCompactDisplay(this.shell), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "displayCollapsed" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationCollapseRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: NavigationCollapseRootDirective, isStandalone: true, selector: "[NavigationCollapseRoot]", host: { properties: { "class.w-full": "collapseEnabled()", "class.justify-center": "displayCollapsed()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavigationCollapseRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: NavigationCollapseRootDirective, isStandalone: true, selector: "[NavigationCollapseRoot]", host: { properties: { "class.w-full": "collapseEnabled()", "class.justify-center": "displayCollapsed()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationCollapseRootDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavigationCollapseRootDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[NavigationCollapseRoot]',
@@ -2311,10 +2337,10 @@ class NavigationCollapseExpandedDirective {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationCollapseExpandedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: NavigationCollapseExpandedDirective, isStandalone: true, selector: "[NavigationCollapseExpanded]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavigationCollapseExpandedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: NavigationCollapseExpandedDirective, isStandalone: true, selector: "[NavigationCollapseExpanded]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationCollapseExpandedDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavigationCollapseExpandedDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[NavigationCollapseExpanded]',
@@ -2339,10 +2365,10 @@ class NavigationFooterActionComponent {
     ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
     hostClasses = computed(() => cn(this.collapsed() ? 'hidden' : 'ml-auto flex shrink-0 items-center gap-1', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationFooterActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: NavigationFooterActionComponent, isStandalone: true, selector: "NavigationFooterAction", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavigationFooterActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: NavigationFooterActionComponent, isStandalone: true, selector: "NavigationFooterAction", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationFooterActionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavigationFooterActionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'NavigationFooterAction',
@@ -2430,8 +2456,8 @@ class NavigationFooterInitialComponent {
     });
     resolvedInitials = this.view.resolvedInitials;
     hostClasses = this.view.hostClasses;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationFooterInitialComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NavigationFooterInitialComponent, isStandalone: true, selector: "NavigationFooterInitial", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.role": "name() ? 'img' : null", "attr.aria-label": "name() || null" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavigationFooterInitialComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: NavigationFooterInitialComponent, isStandalone: true, selector: "NavigationFooterInitial", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.role": "name() ? 'img' : null", "attr.aria-label": "name() || null" } }, ngImport: i0, template: `
     @if (src(); as source) {
       <img [src]="source" alt="" class="h-full w-full rounded-[inherit] object-cover" />
     } @else if (icon(); as glyph) {
@@ -2441,7 +2467,7 @@ class NavigationFooterInitialComponent {
     }
   `, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "Icon", inputs: ["name", "class", "size", "fill", "weight", "grade", "opticalSize"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationFooterInitialComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavigationFooterInitialComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'NavigationFooterInitial',
@@ -2482,8 +2508,8 @@ class NavigationFooterTitleComponent {
     ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
     hostClasses = computed(() => cn(this.collapsed() ? 'hidden' : 'flex min-w-0 flex-col justify-center', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationFooterTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NavigationFooterTitleComponent, isStandalone: true, selector: "NavigationFooterTitle", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.data-collapsed": "collapsed()" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavigationFooterTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: NavigationFooterTitleComponent, isStandalone: true, selector: "NavigationFooterTitle", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.data-collapsed": "collapsed()" } }, ngImport: i0, template: `
     <span class="nav-text block truncate text-foreground">{{ title() }}</span>
     @if (subtitle(); as sub) {
       <span
@@ -2495,7 +2521,7 @@ class NavigationFooterTitleComponent {
     }
   `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationFooterTitleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavigationFooterTitleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'NavigationFooterTitle',
@@ -2548,8 +2574,8 @@ class NavigationHeaderInitialComponent {
     resolvedInitials = this.view.resolvedInitials;
     iconClasses = this.view.iconClasses;
     hostClasses = this.view.hostClasses;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationHeaderInitialComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NavigationHeaderInitialComponent, isStandalone: true, selector: "NavigationHeaderInitial", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.role": "name() ? 'img' : null", "attr.aria-label": "name() || null" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavigationHeaderInitialComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: NavigationHeaderInitialComponent, isStandalone: true, selector: "NavigationHeaderInitial", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.role": "name() ? 'img' : null", "attr.aria-label": "name() || null" } }, ngImport: i0, template: `
     @if (src(); as source) {
       <img [src]="source" alt="" class="h-full w-full rounded-[inherit] object-cover" />
     } @else if (icon(); as glyph) {
@@ -2559,7 +2585,7 @@ class NavigationHeaderInitialComponent {
     }
   `, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "Icon", inputs: ["name", "class", "size", "fill", "weight", "grade", "opticalSize"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationHeaderInitialComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavigationHeaderInitialComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'NavigationHeaderInitial',
@@ -2600,8 +2626,8 @@ class NavigationHeaderTitleComponent {
     ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
     hostClasses = computed(() => cn(this.collapsed() ? 'hidden' : 'flex min-w-0 flex-col justify-center', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationHeaderTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NavigationHeaderTitleComponent, isStandalone: true, selector: "NavigationHeaderTitle", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.data-collapsed": "collapsed()" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavigationHeaderTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: NavigationHeaderTitleComponent, isStandalone: true, selector: "NavigationHeaderTitle", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.data-collapsed": "collapsed()" } }, ngImport: i0, template: `
     <span class="nav-text block truncate text-foreground">{{ title() }}</span>
     @if (subtitle(); as sub) {
       <span
@@ -2613,7 +2639,7 @@ class NavigationHeaderTitleComponent {
     }
   `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationHeaderTitleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavigationHeaderTitleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'NavigationHeaderTitle',