@ojiepermana/angular-navigation 22.0.32 → 22.0.33

package/fesm2022/ojiepermana-angular-navigation.mjs

@@ -43,7 +43,8 @@ function toKeyPart(value) {
         .replace(/^-+|-+$/g, '');
 }
 function itemFallbackKey(item, index) {
-    return toKeyPart(item.title ?? item.link?.toString() ?? item.href ?? `item-${index}`) || `item-${index}`;
+    return (toKeyPart(item.title ?? item.link?.toString() ?? item.href ?? `item-${index}`) ||
+        `item-${index}`);
 }
 function normalizeItem(item, index, path) {
     if (item.isHidden?.(item)) {
@@ -82,10 +83,7 @@ function injectNavigationController(inputs) {
     ...(ngDevMode ? [{ debugName: "normalizedNavId" }] : /* istanbul ignore next */ []));
     const collapsedPreference = computed(() => inputs.collapsed() ?? (inputs.compact() ? true : null), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "collapsedPreference" }] : /* istanbul ignore next */ []));
-    const normalizedItems = computed(() => {
-        const data = inputs.data();
-        return normalizeUiNavItems(data.length > 0 ? data : inputs.items());
-    }, /* @ts-ignore */
+    const normalizedItems = computed(() => normalizeUiNavItems(inputs.data()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "normalizedItems" }] : /* istanbul ignore next */ []));
     const fallbackState = computed(() => ({
         id: normalizedNavId(),
@@ -172,8 +170,6 @@ class NavigationContainerComponent {
     navId = input('default', { ...(ngDevMode ? { debugName: "navId" } : /* istanbul ignore next */ {}), alias: 'id' });
     data = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
-    items = input([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
     ariaLabel = input('Primary navigation', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     compact = input(false, /* @ts-ignore */
@@ -212,7 +208,7 @@ class NavigationContainerComponent {
     ...(ngDevMode ? [{ debugName: "sidebarCollapse" }] : /* istanbul ignore next */ []));
     previewExpanded = computed(() => this.typeConfig()?.previewExpanded?.() ?? false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "previewExpanded" }] : /* istanbul ignore next */ []));
-    typeStyle = computed(() => this.typeConfig()?.typeStyle?.() ?? 'default', /* @ts-ignore */
+    typeStyle = computed(() => this.typeConfig()?.typeStyle?.() ?? 'flat', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "typeStyle" }] : /* istanbul ignore next */ []));
     flyoutLabel = computed(() => this.typeConfig()?.flyoutLabel?.() ?? 'Menu', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "flyoutLabel" }] : /* istanbul ignore next */ []));
@@ -222,10 +218,15 @@ class NavigationContainerComponent {
     ...(ngDevMode ? [{ debugName: "flyoutIconOnly" }] : /* istanbul ignore next */ []));
     flyoutIconPosition = computed(() => this.typeConfig()?.flyoutIconPosition?.() ?? 'start', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "flyoutIconPosition" }] : /* istanbul ignore next */ []));
+    flyoutTriggerVariant = computed(() => this.typeConfig()?.flyoutTriggerVariant?.() ?? 'button', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "flyoutTriggerVariant" }] : /* istanbul ignore next */ []));
+    flyoutTriggerFloating = computed(() => this.typeConfig()?.flyoutTriggerFloating?.() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "flyoutTriggerFloating" }] : /* istanbul ignore next */ []));
+    flyoutTriggerClass = computed(() => this.typeConfig()?.flyoutTriggerClass?.() ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "flyoutTriggerClass" }] : /* istanbul ignore next */ []));
     controller = injectNavigationController({
         navId: this.navId,
         data: this.data,
-        items: this.items,
         orientation: this.orientationPreference,
         type: this.typePreference,
         position: this.positionPreference,
@@ -288,7 +289,7 @@ class NavigationContainerComponent {
     ...(ngDevMode ? [{ debugName: "shellClasses" }] : /* istanbul ignore next */ []));
     state = this.resolvedState;
     hostClasses = computed(() => cn('relative block min-h-0 text-foreground transition-[width] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none', this.resolvedState().orientation === 'horizontal'
-        ? 'w-full'
+        ? 'h-full w-full'
         : this.resolvedState().type === 'dockbar'
             ? this.dockbarAsideOpen()
                 ? 'w-76'
@@ -323,14 +324,18 @@ class NavigationContainerComponent {
         this.hoverPreviewExpanded.set(this.sidebarCollapse() ? value : false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.2", type: NavigationContainerComponent, isStandalone: true, selector: "Navigation", inputs: { navId: { classPropertyName: "navId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", 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)" }, properties: { "class": "hostClasses()", "attr.aria-label": "ariaLabel() || null", "attr.data-navigation-id": "resolvedState().id", "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, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.2", type: NavigationContainerComponent, isStandalone: true, selector: "Navigation", inputs: { navId: { classPropertyName: "navId", publicName: "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)" }, properties: { "class": "hostClasses()", "attr.aria-label": "ariaLabel() || null", "attr.data-navigation-id": "resolvedState().id", "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, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationContainerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'Navigation',
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    providers: [{ provide: NAVIGATION_SHELL, useExisting: forwardRef(() => NavigationContainerComponent) }],
+                    providers: [
+                        { provide: NAVIGATION_SHELL, useExisting: forwardRef(() => NavigationContainerComponent) },
+                    ],
                     host: {
                         '[class]': 'hostClasses()',
                         role: 'navigation',
@@ -347,7 +352,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                     },
                     template: ` <ng-content /> `,
                 }]
-        }], propDecorators: { navId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], collapseTree: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapse-tree", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], itemClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemClass", required: false }] }], groupClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "nav-group-class", required: false }] }], activeIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIds", required: false }] }], activeUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeUrl", required: false }] }], openedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "openedIds", required: false }] }, { type: i0.Output, args: ["openedIdsChange"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], iconTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavigationIconDirective), { isSignal: true }] }] } });
+        }], propDecorators: { navId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], collapseTree: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapse-tree", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], itemClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemClass", required: false }] }], groupClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "nav-group-class", required: false }] }], activeIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIds", required: false }] }], activeUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeUrl", required: false }] }], openedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "openedIds", required: false }] }, { type: i0.Output, args: ["openedIdsChange"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], iconTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavigationIconDirective), { isSignal: true }] }] } });
 
 class NavigationItemContentComponent {
     nav = inject(NavigationService);
@@ -1531,7 +1536,7 @@ class NavigationEntryGridComponent {
     ...(ngDevMode ? [{ debugName: "navId" }] : /* istanbul ignore next */ []));
     branch = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "branch" }] : /* istanbul ignore next */ []));
-    typeStyle = input('default', /* @ts-ignore */
+    typeStyle = input('flat', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "typeStyle" }] : /* istanbul ignore next */ []));
     itemClass = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "itemClass" }] : /* istanbul ignore next */ []));
@@ -2042,10 +2047,19 @@ class NavigationFlyoutMenuComponent {
     /** Penempatan ikon relatif label: `start` (default) atau `end`. */
     iconPosition = input('start', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "iconPosition" }] : /* istanbul ignore next */ []));
+    /** Bentuk visual tombol trigger: `button` (pil) | `link` | `plain` (ghost). */
+    variant = input('button', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Trigger mengambang (`fixed`) — host menjadi popover lepas, panel menempel ke trigger. */
+    floating = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "floating" }] : /* istanbul ignore next */ []));
+    /** Kelas Tailwind untuk host trigger (posisi pojok floating / styling wrapper in-flow). */
+    triggerClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerClass" }] : /* istanbul ignore next */ []));
     /** `bottom` = bar berada di bawah konten; panel menempel sisi bawah container dan tumbuh ke atas. */
     position = input('top', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
-    typeStyle = input('default', /* @ts-ignore */
+    typeStyle = input('flat', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "typeStyle" }] : /* istanbul ignore next */ []));
     compact = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
@@ -2090,6 +2104,12 @@ class NavigationFlyoutMenuComponent {
         return this.branches().find((branch) => branch.key === key) ?? null;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeBranch" }] : /* istanbul ignore next */ []));
+    /**
+     * Floating: sisi popover relatif trigger — `true` = rata kanan (buka ke kiri, untuk trigger di
+     * pojok kanan), `false` = rata kiri (buka ke kanan). Diukur dari posisi trigger saat dibuka.
+     */
+    floatingAlignEnd = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "floatingAlignEnd" }] : /* istanbul ignore next */ []));
     /**
      * Offset panel terhadap host agar panel menimpa penuh container parent dari
      * `Navigation` (lebar sama persis; posisi atas di mode top, posisi bawah di
@@ -2098,14 +2118,40 @@ class NavigationFlyoutMenuComponent {
      */
     panelPlacement = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelPlacement" }] : /* istanbul ignore next */ []));
-    panelWrapperClasses = computed(() => cn('absolute z-50', !this.panelPlacement() && cn('inset-x-0', this.isBottom() ? 'bottom-0' : 'top-0')), /* @ts-ignore */
+    panelWrapperClasses = computed(() => {
+        if (this.floating()) {
+            // Floating: popover menempel ke trigger — atas/bawah ikut nav-position; sisi kiri/kanan
+            // ikut posisi trigger (floatingAlignEnd) agar tidak keluar layar saat trigger di pojok kiri.
+            return cn('absolute z-50 w-[min(22rem,85vw)] max-w-[85vw]', this.floatingAlignEnd() ? 'right-0' : 'left-0', this.isBottom() ? 'bottom-full mb-2' : 'top-full mt-2');
+        }
+        // Default: panel menutupi (overlay) container bar persis — posisi & lebar ikut container.
+        return cn('absolute z-50', !this.panelPlacement() && cn('inset-x-0', this.isBottom() ? 'bottom-0' : 'top-0'));
+    }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelWrapperClasses" }] : /* istanbul ignore next */ []));
-    /** Mode bottom membalik urutan visual: grid entri di atas, row tab di bawah (dekat bar). */
-    menuClasses = computed(() => cn('flex', this.isBottom() ? 'flex-col-reverse' : 'flex-col'), /* @ts-ignore */
+    /**
+     * Mode bottom membalik urutan visual: grid entri di atas, bar di bawah (dekat bar trigger).
+     * `min-h-0 flex-1` membuat menu mengisi penuh panel card (yang di-clip) sehingga ROW 2
+     * bisa jadi satu-satunya area scroll.
+     */
+    menuClasses = computed(() => cn('flex min-h-0 flex-1', this.isBottom() ? 'flex-col-reverse' : 'flex-col'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "menuClasses" }] : /* istanbul ignore next */ []));
-    closeButtonClasses() {
-        return cn('absolute right-2.5 z-10 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', this.isBottom() ? 'bottom-2' : 'top-2');
-    }
+    /**
+     * ROW 1 = bar flyout: satu baris horizontal seperti bar navbar —
+     * Header (kiri) · menu item (tengah, flex-1) · Footer (kanan). `shrink-0` membuatnya DIAM
+     * (tidak ikut scroll) — hanya ROW 2 (grid child) yang punya area scroll sendiri.
+     * Border memisahkan bar dari ROW 2 di sisi yang menjauh dari bar (bawah di mode top).
+     */
+    barRowClasses = computed(() => cn('flex shrink-0 items-center gap-2 bg-popover px-2 md:px-3', this.isBorderRail()
+        ? cn('min-h-12 border-border', this.isBottom() ? 'border-t-[1.5px]' : 'border-b-[1.5px]')
+        : cn('min-h-[3.25rem] border-[hsl(var(--border)/var(--opacity-60))]', this.isBottom() ? 'border-t' : 'border-b')), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "barRowClasses" }] : /* istanbul ignore next */ []));
+    /**
+     * ROW 2 = HANYA area ini yang scroll: children dari nav item aktif. `min-h-0 flex-1`
+     * membatasi tingginya ke sisa ruang panel lalu `overflow-y-auto` men-scroll isinya —
+     * bar ROW 1 & kontainer panel sendiri tetap diam.
+     */
+    scrollRegionClasses = computed(() => cn('min-h-0 flex-1 overflow-x-hidden overflow-y-auto overscroll-contain'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollRegionClasses" }] : /* istanbul ignore next */ []));
     isOpen() {
         return this.nav.isDrawerOpen(this.navId());
     }
@@ -2115,6 +2161,17 @@ class NavigationFlyoutMenuComponent {
         }
     }
     measurePanelPlacement() {
+        // Floating: panel anchored ke trigger via CSS, bukan overlay container. Pilih sisi popover
+        // (kanan→buka kiri / kiri→buka kanan) dari posisi trigger agar tidak keluar layar.
+        if (this.floating()) {
+            const triggerEl = this.host.nativeElement.querySelector('[data-navigation-flyout-trigger="true"]');
+            const rect = triggerEl?.getBoundingClientRect();
+            if (rect && typeof window !== 'undefined' && window.innerWidth > 0) {
+                this.floatingAlignEnd.set(rect.left + rect.width / 2 > window.innerWidth / 2);
+            }
+            this.panelPlacement.set(null);
+            return;
+        }
         const hostEl = this.host.nativeElement;
         const navEl = hostEl.closest('[data-navigation-id]');
         let container = navEl?.parentElement ?? hostEl.parentElement;
@@ -2183,8 +2240,30 @@ class NavigationFlyoutMenuComponent {
     openBranch(item) {
         this.nav.openPanel(this.navId(), item);
     }
+    /**
+     * Host trigger+panel. Default `relative block w-full` (mengalir di dalam bar/div). Saat
+     * `floating`, jadi `fixed` (mengambang) — default pojok kanan-atas, override via `triggerClass`.
+     */
+    hostClasses = computed(() => this.floating()
+        ? cn('fixed z-50 block w-max', this.triggerClass() || 'right-6 top-6')
+        : cn('relative block w-full', this.triggerClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    /** Bentuk visual trigger: `button` (pil), `link` (tautan), atau `plain` (ghost); + ikon/teks. */
     triggerClasses() {
-        return cn('nav-trigger group/nav inline-flex h-10 min-w-0 items-center gap-2 rounded-full border border-[hsl(var(--border)/var(--opacity-60))] bg-background px-4 py-2 text-sm font-medium shadow-sm transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', this.showIconOnly() && 'w-10 justify-center gap-0 px-0', this.isBorderRail()
+        const iconOnly = this.showIconOnly();
+        const base = 'nav-trigger group/nav inline-flex min-w-0 items-center font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring';
+        if (this.variant() === 'link') {
+            return cn(base, 'text-sm underline-offset-4 hover:underline', 
+            // Icon-only tetap punya target ≥ 36px (WCAG 2.5.8) walau tanpa chrome tautan.
+            iconOnly ? 'h-9 w-9 justify-center gap-0' : 'gap-1.5', this.isOpen() ? 'text-primary underline' : 'text-primary/90 hover:text-primary', this.itemClass());
+        }
+        if (this.variant() === 'plain') {
+            return cn(base, 'gap-2 rounded-md text-sm', iconOnly ? 'h-9 w-9 justify-center' : 'h-9 px-3 py-2', this.isOpen()
+                ? 'bg-accent text-accent-foreground'
+                : 'text-foreground/80 hover:bg-accent hover:text-accent-foreground', this.itemClass());
+        }
+        // button (pil, default)
+        return cn(base, 'h-10 gap-2 rounded-full border border-[hsl(var(--border)/var(--opacity-60))] bg-background px-4 py-2 text-sm shadow-sm', iconOnly && 'w-10 justify-center gap-0 px-0', this.isBorderRail()
             ? this.isOpen()
                 ? 'text-primary'
                 : 'text-foreground/80 hover:text-primary'
@@ -2193,23 +2272,28 @@ class NavigationFlyoutMenuComponent {
                 : 'text-foreground/80 hover:bg-accent hover:text-accent-foreground', this.itemClass());
     }
     panelCardClasses() {
+        if (this.floating()) {
+            // Floating: kartu popover mandiri (rounded penuh + border + shadow), tinggi dibatasi & di-clip;
+            // hanya ROW 2 (children) yang scroll.
+            return cn('relative flex flex-col rounded-xl border border-[hsl(var(--border)/var(--opacity-70))] bg-popover text-popover-foreground shadow-2xl', 'max-h-[min(28rem,70vh)] overflow-hidden');
+        }
         // Border-rail: panel menutup tepat content-box frame layout, jadi garis
         // sisi bar memakai border frame (rail) itu sendiri — panel cukup menggambar
         // border 1.5px senada rail pada sisi yang menjauh dari bar agar sambungan
         // tetap lurus (bawah di mode top, atas di mode bottom).
-        return cn('relative overflow-hidden bg-popover text-popover-foreground shadow-2xl', this.isBorderRail()
+        return cn('relative flex flex-col bg-popover text-popover-foreground shadow-2xl', 
+        // Batasi tinggi panel ke viewport lalu CLIP — bukan scroll. Hanya ROW 2 (children, lihat
+        // scrollRegionClasses) yang scroll; bar ROW 1 & kontainer panel sendiri tetap diam.
+        'max-h-[calc(100dvh-5rem)] overflow-hidden', this.isBorderRail()
             ? cn('rounded-none border-border', this.isBottom() ? 'border-t-[1.5px]' : 'border-b-[1.5px]')
             : 'rounded-xl border border-[hsl(var(--border)/var(--opacity-70))]');
     }
     rowClasses() {
-        // `min-h` menjaga tinggi row stabil meski hanya berisi tab group yang memakai
-        // `-my-2`. Border pemisah row↔grid selalu di sisi yang menjauh dari bar:
-        // border-b di mode top, border-t di mode bottom (row berada di bawah grid).
-        // Border-rail: total tinggi row 48px (min-h-12) + border 1.5px sehingga garis
-        // row jatuh persis di posisi rail horizontal layout dan menyambung lurus.
-        return cn('m-0 flex min-w-0 list-none flex-wrap items-center gap-1 px-2 py-2 pr-12 md:px-3 md:pr-14', this.isBorderRail()
-            ? cn('min-h-12 border-border', this.isBottom() ? 'border-t-[1.5px]' : 'border-b-[1.5px]')
-            : cn('min-h-[3.25rem] border-[hsl(var(--border)/var(--opacity-60))]', this.isBottom() ? 'border-t' : 'border-b'));
+        // Menu item = bagian tengah ROW 1: isi ruang antara Footer & Header (flex-1) lalu
+        // di-center seperti menubar navbar. Saat jumlah/lebar item melebihi band, band ini
+        // scroll horizontal (overflow-x-auto) agar tidak ada item ter-clip & takterjangkau
+        // (panel card meng-clip overflow-x). Tinggi & border bar ditangani barRowClasses().
+        return cn('m-0 flex min-w-0 flex-1 list-none items-center justify-center gap-1 overflow-x-auto overscroll-x-contain py-2');
     }
     /**
      * Container `<li>` tab group. Basis `flex -my-2 self-stretch` membuat tab setinggi
@@ -2258,14 +2342,22 @@ class NavigationFlyoutMenuComponent {
     }
     focusFirstPanelItem() {
         const panel = this.host.nativeElement.querySelector('[data-navigation-flyout-panel="true"]');
-        const target = panel?.querySelector('[role="menuitem"], a[href], button:not([disabled])');
+        if (!panel) {
+            return;
+        }
+        // Fokus awal ke menu item ROW 1 (lalu grid ROW 2) — BUKAN kontrol Header/Footer yang
+        // juga ada di bar (mis. tombol logout). querySelector mengembalikan match pertama dalam
+        // urutan DOM, dan Header/Footer bisa mendahului menu, jadi lingkup ke baris menu dulu.
+        const target = panel.querySelector('[data-navigation-flyout-row="true"] [role="menuitem"], [data-navigation-flyout-row="true"] a[href]') ?? panel.querySelector('[role="menuitem"], a[href]');
         target?.focus();
     }
     focusTrigger() {
-        this.host.nativeElement.querySelector('[data-navigation-flyout-trigger="true"]')?.focus();
+        this.host.nativeElement
+            .querySelector('[data-navigation-flyout-trigger="true"]')
+            ?.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationFlyoutMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: NavigationFlyoutMenuComponent, isStandalone: true, selector: "NavigationFlyoutMenu", inputs: { navId: { classPropertyName: "navId", publicName: "navId", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, 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: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, typeStyle: { classPropertyName: "typeStyle", publicName: "typeStyle", 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 }, groupClass: { classPropertyName: "groupClass", publicName: "groupClass", 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: { listeners: { "keydown.escape": "onEscape($event)", "document:click": "onDocumentClick($event)", "window:resize": "onWindowResize()" }, classAttribute: "relative block w-full" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: NavigationFlyoutMenuComponent, isStandalone: true, selector: "NavigationFlyoutMenu", inputs: { navId: { classPropertyName: "navId", publicName: "navId", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, 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: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, floating: { classPropertyName: "floating", publicName: "floating", isSignal: true, isRequired: false, transformFunction: null }, triggerClass: { classPropertyName: "triggerClass", publicName: "triggerClass", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, typeStyle: { classPropertyName: "typeStyle", publicName: "typeStyle", 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 }, groupClass: { classPropertyName: "groupClass", publicName: "groupClass", 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: { listeners: { "keydown.escape": "onEscape($event)", "document:click": "onDocumentClick($event)", "window:resize": "onWindowResize()" }, properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
     <button
       type="button"
       data-navigation-flyout-trigger="true"
@@ -2275,7 +2367,8 @@ class NavigationFlyoutMenuComponent {
       [attr.aria-controls]="isOpen() ? panelId() : null"
       [attr.aria-label]="showIconOnly() ? label() : null"
       [attr.title]="showIconOnly() ? label() : null"
-      (click)="toggleFlyout()">
+      (click)="toggleFlyout()"
+    >
       @if (showIconOnly()) {
         <Icon [name]="triggerIcon() ?? 'menu'" [size]="18" class="text-current" />
       } @else {
@@ -2296,88 +2389,109 @@ class NavigationFlyoutMenuComponent {
         [id]="panelId()"
         data-navigation-flyout-panel="true"
         [class]="panelWrapperClasses()"
-        [style.left.px]="panelPlacement()?.left"
-        [style.top.px]="isBottom() ? null : panelPlacement()?.top"
-        [style.bottom.px]="isBottom() ? panelPlacement()?.bottom : null"
-        [style.width.px]="panelPlacement()?.width">
+        [style.left.px]="floating() ? null : panelPlacement()?.left"
+        [style.top.px]="floating() || isBottom() ? null : panelPlacement()?.top"
+        [style.bottom.px]="!floating() && isBottom() ? panelPlacement()?.bottom : null"
+        [style.width.px]="floating() ? null : panelPlacement()?.width"
+      >
         <div [class]="panelCardClasses()">
-          <button
-            type="button"
-            data-navigation-flyout-close="true"
-            [class]="closeButtonClasses()"
-            aria-label="Close menu"
-            (click)="closeFlyout(true)">
-            <span aria-hidden="true" class="text-base leading-none">✕</span>
-          </button>
-
           <div role="menu" [class]="menuClasses()" [attr.aria-label]="label()">
-            <ul role="none" data-navigation-flyout-row="true" [class]="rowClasses()" (keydown)="onRowKeydown($event)">
-              @for (item of items(); track item.key) {
-                @switch (item.type) {
-                  @case ('divider') {
-                    <li role="separator" class="mx-1 h-5 w-px bg-border"></li>
-                  }
-                  @case ('spacer') {
-                    <li role="none" aria-hidden="true" class="flex-1"></li>
-                  }
-                  @default {
-                    @if (item.children.length > 0) {
-                      <li role="none" [class]="groupContainerClasses(item)" [attr.data-navigation-item-key]="item.key">
-                        <button
-                          type="button"
-                          role="menuitem"
-                          data-navigation-flyout-tab="true"
-                          [class]="tabClasses(item)"
-                          [attr.aria-expanded]="isBranchOpen(item)"
-                          [attr.aria-controls]="item.panelId"
-                          [disabled]="item.disabled || null"
-                          (click)="openBranch(item)">
-                          <NavigationItemContent
-                            [item]="item"
-                            [active]="isItemActive(item)"
-                            [compact]="false"
-                            [orientation]="'horizontal'"
-                            [level]="0"
-                            [iconTemplate]="iconTemplate()" />
-                          <Icon name="chevron_right" [size]="16" [class]="tabChevronClasses(item)" />
-                        </button>
-                      </li>
-                    } @else {
-                      <li
-                        NavigationItem
-                        [navId]="navId()"
-                        [item]="item"
-                        [level]="0"
-                        [orientation]="'horizontal'"
-                        [compact]="false"
-                        [itemClass]="navItemClass()"
-                        [activeIds]="activeIds()"
-                        [activeUrl]="activeUrl()"
-                        [iconTemplate]="iconTemplate()"
-                        [collapseTree]="collapseTree()"
-                        [openedIds]="openedIds()"
-                        (openedIdsChange)="openedIdsChange.emit($event)"
-                        (itemSelected)="itemSelected.emit($event)"></li>
+            <!-- ROW 1 = bar (sticky, menutup bar trigger), struktur seperti bar navbar:
+                 Header (kiri) | menu item (tengah) | Footer (kanan). Hanya ROW 2 (grid child)
+                 di bawah bar yang ikut scroll. -->
+            <div data-navigation-flyout-bar="true" [class]="barRowClasses()">
+              <ng-content select="NavigationHeader" />
+
+              <ul
+                role="none"
+                data-navigation-flyout-row="true"
+                [class]="rowClasses()"
+                (keydown)="onRowKeydown($event)"
+              >
+                @for (item of items(); track item.key) {
+                  @switch (item.type) {
+                    @case ('divider') {
+                      <li role="separator" class="mx-1 h-5 w-px bg-border"></li>
+                    }
+                    @case ('spacer') {
+                      <li role="none" aria-hidden="true" class="flex-1"></li>
+                    }
+                    @default {
+                      @if (item.children.length > 0) {
+                        <li
+                          role="none"
+                          [class]="groupContainerClasses(item)"
+                          [attr.data-navigation-item-key]="item.key"
+                        >
+                          <button
+                            type="button"
+                            role="menuitem"
+                            data-navigation-flyout-tab="true"
+                            [class]="tabClasses(item)"
+                            [attr.aria-expanded]="isBranchOpen(item)"
+                            [attr.aria-controls]="item.panelId"
+                            [disabled]="item.disabled || null"
+                            (click)="openBranch(item)"
+                          >
+                            <NavigationItemContent
+                              [item]="item"
+                              [active]="isItemActive(item)"
+                              [compact]="false"
+                              [orientation]="'horizontal'"
+                              [level]="0"
+                              [iconTemplate]="iconTemplate()"
+                            />
+                            <Icon
+                              name="chevron_right"
+                              [size]="16"
+                              [class]="tabChevronClasses(item)"
+                            />
+                          </button>
+                        </li>
+                      } @else {
+                        <li
+                          NavigationItem
+                          [navId]="navId()"
+                          [item]="item"
+                          [level]="0"
+                          [orientation]="'horizontal'"
+                          [compact]="false"
+                          [itemClass]="navItemClass()"
+                          [activeIds]="activeIds()"
+                          [activeUrl]="activeUrl()"
+                          [iconTemplate]="iconTemplate()"
+                          [collapseTree]="collapseTree()"
+                          [openedIds]="openedIds()"
+                          (openedIdsChange)="openedIdsChange.emit($event)"
+                          (itemSelected)="itemSelected.emit($event)"
+                        ></li>
+                      }
                     }
                   }
                 }
+              </ul>
+
+              <ng-content select="NavigationFooter" />
+            </div>
+
+            <!-- ROW 2 = child dari menu item aktif; HANYA area ini yang men-scroll. -->
+            <div data-navigation-flyout-scroll="true" [class]="scrollRegionClasses()">
+              @if (activeBranch(); as branch) {
+                <NavigationEntryGrid
+                  [navId]="navId()"
+                  [branch]="branch"
+                  [typeStyle]="typeStyle()"
+                  [itemClass]="itemClass()"
+                  [activeIds]="activeIds()"
+                  [activeUrl]="activeUrl()"
+                  [iconTemplate]="iconTemplate()"
+                  [collapseTree]="collapseTree()"
+                  [openedIds]="openedIds()"
+                  (openedIdsChange)="openedIdsChange.emit($event)"
+                  (itemSelected)="itemSelected.emit($event)"
+                />
               }
-            </ul>
-
-            @if (activeBranch(); as branch) {
-              <NavigationEntryGrid
-                [navId]="navId()"
-                [branch]="branch"
-                [typeStyle]="typeStyle()"
-                [itemClass]="itemClass()"
-                [activeIds]="activeIds()"
-                [activeUrl]="activeUrl()"
-                [iconTemplate]="iconTemplate()"
-                [collapseTree]="collapseTree()"
-                [openedIds]="openedIds()"
-                (openedIdsChange)="openedIdsChange.emit($event)"
-                (itemSelected)="itemSelected.emit($event)" />
-            }
+            </div>
           </div>
         </div>
       </div>
@@ -2389,9 +2503,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
             args: [{
                     selector: 'NavigationFlyoutMenu',
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [IconComponent, NavigationEntryGridComponent, NavigationItemComponent, NavigationItemContentComponent],
+                    imports: [
+                        IconComponent,
+                        NavigationEntryGridComponent,
+                        NavigationItemComponent,
+                        NavigationItemContentComponent,
+                    ],
                     host: {
-                        class: 'relative block w-full',
+                        '[class]': 'hostClasses()',
                         '(keydown.escape)': 'onEscape($event)',
                         '(document:click)': 'onDocumentClick($event)',
                         '(window:resize)': 'onWindowResize()',
@@ -2406,7 +2525,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
       [attr.aria-controls]="isOpen() ? panelId() : null"
       [attr.aria-label]="showIconOnly() ? label() : null"
       [attr.title]="showIconOnly() ? label() : null"
-      (click)="toggleFlyout()">
+      (click)="toggleFlyout()"
+    >
       @if (showIconOnly()) {
         <Icon [name]="triggerIcon() ?? 'menu'" [size]="18" class="text-current" />
       } @else {
@@ -2427,95 +2547,116 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
         [id]="panelId()"
         data-navigation-flyout-panel="true"
         [class]="panelWrapperClasses()"
-        [style.left.px]="panelPlacement()?.left"
-        [style.top.px]="isBottom() ? null : panelPlacement()?.top"
-        [style.bottom.px]="isBottom() ? panelPlacement()?.bottom : null"
-        [style.width.px]="panelPlacement()?.width">
+        [style.left.px]="floating() ? null : panelPlacement()?.left"
+        [style.top.px]="floating() || isBottom() ? null : panelPlacement()?.top"
+        [style.bottom.px]="!floating() && isBottom() ? panelPlacement()?.bottom : null"
+        [style.width.px]="floating() ? null : panelPlacement()?.width"
+      >
         <div [class]="panelCardClasses()">
-          <button
-            type="button"
-            data-navigation-flyout-close="true"
-            [class]="closeButtonClasses()"
-            aria-label="Close menu"
-            (click)="closeFlyout(true)">
-            <span aria-hidden="true" class="text-base leading-none">✕</span>
-          </button>
-
           <div role="menu" [class]="menuClasses()" [attr.aria-label]="label()">
-            <ul role="none" data-navigation-flyout-row="true" [class]="rowClasses()" (keydown)="onRowKeydown($event)">
-              @for (item of items(); track item.key) {
-                @switch (item.type) {
-                  @case ('divider') {
-                    <li role="separator" class="mx-1 h-5 w-px bg-border"></li>
-                  }
-                  @case ('spacer') {
-                    <li role="none" aria-hidden="true" class="flex-1"></li>
-                  }
-                  @default {
-                    @if (item.children.length > 0) {
-                      <li role="none" [class]="groupContainerClasses(item)" [attr.data-navigation-item-key]="item.key">
-                        <button
-                          type="button"
-                          role="menuitem"
-                          data-navigation-flyout-tab="true"
-                          [class]="tabClasses(item)"
-                          [attr.aria-expanded]="isBranchOpen(item)"
-                          [attr.aria-controls]="item.panelId"
-                          [disabled]="item.disabled || null"
-                          (click)="openBranch(item)">
-                          <NavigationItemContent
-                            [item]="item"
-                            [active]="isItemActive(item)"
-                            [compact]="false"
-                            [orientation]="'horizontal'"
-                            [level]="0"
-                            [iconTemplate]="iconTemplate()" />
-                          <Icon name="chevron_right" [size]="16" [class]="tabChevronClasses(item)" />
-                        </button>
-                      </li>
-                    } @else {
-                      <li
-                        NavigationItem
-                        [navId]="navId()"
-                        [item]="item"
-                        [level]="0"
-                        [orientation]="'horizontal'"
-                        [compact]="false"
-                        [itemClass]="navItemClass()"
-                        [activeIds]="activeIds()"
-                        [activeUrl]="activeUrl()"
-                        [iconTemplate]="iconTemplate()"
-                        [collapseTree]="collapseTree()"
-                        [openedIds]="openedIds()"
-                        (openedIdsChange)="openedIdsChange.emit($event)"
-                        (itemSelected)="itemSelected.emit($event)"></li>
+            <!-- ROW 1 = bar (sticky, menutup bar trigger), struktur seperti bar navbar:
+                 Header (kiri) | menu item (tengah) | Footer (kanan). Hanya ROW 2 (grid child)
+                 di bawah bar yang ikut scroll. -->
+            <div data-navigation-flyout-bar="true" [class]="barRowClasses()">
+              <ng-content select="NavigationHeader" />
+
+              <ul
+                role="none"
+                data-navigation-flyout-row="true"
+                [class]="rowClasses()"
+                (keydown)="onRowKeydown($event)"
+              >
+                @for (item of items(); track item.key) {
+                  @switch (item.type) {
+                    @case ('divider') {
+                      <li role="separator" class="mx-1 h-5 w-px bg-border"></li>
+                    }
+                    @case ('spacer') {
+                      <li role="none" aria-hidden="true" class="flex-1"></li>
+                    }
+                    @default {
+                      @if (item.children.length > 0) {
+                        <li
+                          role="none"
+                          [class]="groupContainerClasses(item)"
+                          [attr.data-navigation-item-key]="item.key"
+                        >
+                          <button
+                            type="button"
+                            role="menuitem"
+                            data-navigation-flyout-tab="true"
+                            [class]="tabClasses(item)"
+                            [attr.aria-expanded]="isBranchOpen(item)"
+                            [attr.aria-controls]="item.panelId"
+                            [disabled]="item.disabled || null"
+                            (click)="openBranch(item)"
+                          >
+                            <NavigationItemContent
+                              [item]="item"
+                              [active]="isItemActive(item)"
+                              [compact]="false"
+                              [orientation]="'horizontal'"
+                              [level]="0"
+                              [iconTemplate]="iconTemplate()"
+                            />
+                            <Icon
+                              name="chevron_right"
+                              [size]="16"
+                              [class]="tabChevronClasses(item)"
+                            />
+                          </button>
+                        </li>
+                      } @else {
+                        <li
+                          NavigationItem
+                          [navId]="navId()"
+                          [item]="item"
+                          [level]="0"
+                          [orientation]="'horizontal'"
+                          [compact]="false"
+                          [itemClass]="navItemClass()"
+                          [activeIds]="activeIds()"
+                          [activeUrl]="activeUrl()"
+                          [iconTemplate]="iconTemplate()"
+                          [collapseTree]="collapseTree()"
+                          [openedIds]="openedIds()"
+                          (openedIdsChange)="openedIdsChange.emit($event)"
+                          (itemSelected)="itemSelected.emit($event)"
+                        ></li>
+                      }
                     }
                   }
                 }
+              </ul>
+
+              <ng-content select="NavigationFooter" />
+            </div>
+
+            <!-- ROW 2 = child dari menu item aktif; HANYA area ini yang men-scroll. -->
+            <div data-navigation-flyout-scroll="true" [class]="scrollRegionClasses()">
+              @if (activeBranch(); as branch) {
+                <NavigationEntryGrid
+                  [navId]="navId()"
+                  [branch]="branch"
+                  [typeStyle]="typeStyle()"
+                  [itemClass]="itemClass()"
+                  [activeIds]="activeIds()"
+                  [activeUrl]="activeUrl()"
+                  [iconTemplate]="iconTemplate()"
+                  [collapseTree]="collapseTree()"
+                  [openedIds]="openedIds()"
+                  (openedIdsChange)="openedIdsChange.emit($event)"
+                  (itemSelected)="itemSelected.emit($event)"
+                />
               }
-            </ul>
-
-            @if (activeBranch(); as branch) {
-              <NavigationEntryGrid
-                [navId]="navId()"
-                [branch]="branch"
-                [typeStyle]="typeStyle()"
-                [itemClass]="itemClass()"
-                [activeIds]="activeIds()"
-                [activeUrl]="activeUrl()"
-                [iconTemplate]="iconTemplate()"
-                [collapseTree]="collapseTree()"
-                [openedIds]="openedIds()"
-                (openedIdsChange)="openedIdsChange.emit($event)"
-                (itemSelected)="itemSelected.emit($event)" />
-            }
+            </div>
           </div>
         </div>
       </div>
     }
   `,
                 }]
-        }], propDecorators: { navId: [{ type: i0.Input, args: [{ isSignal: true, alias: "navId", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], typeStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeStyle", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], itemClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemClass", required: false }] }], groupClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupClass", 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 }] }], 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 }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], floating: [{ type: i0.Input, args: [{ isSignal: true, alias: "floating", required: false }] }], triggerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerClass", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], typeStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeStyle", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], itemClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemClass", required: false }] }], groupClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupClass", 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 }] }], openedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "openedIds", required: false }] }], openedIdsChange: [{ type: i0.Output, args: ["openedIdsChange"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }] } });
 
 class NavigationHorizontalComponent {
     nav = inject(NavigationService);
@@ -2527,7 +2668,7 @@ class NavigationHorizontalComponent {
     /** Posisi bar terhadap konten: `bottom` membuka panel ke atas; selain itu ke bawah. */
     position = input('top', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
-    typeStyle = input('default', /* @ts-ignore */
+    typeStyle = input('flat', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "typeStyle" }] : /* istanbul ignore next */ []));
     compact = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
@@ -2555,7 +2696,7 @@ class NavigationHorizontalComponent {
     /** Kelas tambahan untuk NavigationItem leaf di row saat style border-rail aktif. */
     navItemClass = computed(() => cn(this.itemClass(), this.isBorderRail() && 'rounded-none hover:bg-transparent hover:text-primary'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "navItemClass" }] : /* istanbul ignore next */ []));
-    listClasses = computed(() => cn('flex min-w-0 list-none p-0', this.compact() ? 'justify-center gap-1' : 'items-center justify-center gap-1'), /* @ts-ignore */
+    listClasses = computed(() => cn('flex h-full min-w-0 items-center justify-center gap-1 list-none p-0'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "listClasses" }] : /* istanbul ignore next */ []));
     isItemActive(item) {
         return this.nav.isItemActive(item, this.activeIds(), this.activeUrl());
@@ -2635,10 +2776,15 @@ class NavigationHorizontalComponent {
         // Panel mega selebar container parent, menempel rapat tanpa gap pada sisi bar:
         // nav-position top membuka ke bawah (sisi atas siku), bottom membuka ke atas
         // (sisi bawah siku) sehingga sambungan border selalu menyatu dengan bar.
-        // Border-rail: rail horizontal layout menjadi garis sisi-bar panel — panel
-        // cukup menggambar border 1.5px senada rail pada sisi yang menjauh dari bar.
-        return cn('absolute z-50 overflow-hidden bg-popover text-popover-foreground shadow-lg', this.isBottom() ? 'bottom-full' : 'top-full', !this.panelPlacement() && 'inset-x-0', this.isBorderRail()
-            ? cn('rounded-none border-border', this.isBottom() ? 'border-t-[1.5px]' : 'border-b-[1.5px]')
+        // Border-rail: sisi kiri/kanan panel dibiarkan ditangani rail vertikal dari
+        // layout; panel hanya menggambar border atas & bawah 1.5px senada rail.
+        // Panel dibiarkan pada tepi bawah bar (`top-full`) tanpa offset, sehingga border
+        // atasnya sejajar dengan border-bottom bar (mis. yang dipasang consumer).
+        return cn('absolute z-50 bg-popover text-popover-foreground shadow-lg', 
+        // Batasi tinggi ke viewport (dikurangi area bar) lalu scroll vertikal supaya
+        // menu dengan item banyak tetap bisa diakses tanpa keluar layar.
+        'max-h-[calc(100dvh-5rem)] overflow-x-hidden overflow-y-auto overscroll-contain', this.isBottom() ? 'bottom-full' : 'top-full', !this.panelPlacement() && 'inset-x-0', this.isBorderRail()
+            ? 'rounded-none border-y-[1.5px] border-border'
             : cn('rounded-xl border border-[hsl(var(--border)/var(--opacity-70))]', this.isBottom() ? 'rounded-b-none' : 'rounded-t-none'));
     }
     onKeydown(event) {
@@ -2701,7 +2847,7 @@ class NavigationHorizontalComponent {
         item?.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationHorizontalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: NavigationHorizontalComponent, isStandalone: true, selector: "NavigationHorizontal", inputs: { navId: { classPropertyName: "navId", publicName: "navId", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, typeStyle: { classPropertyName: "typeStyle", publicName: "typeStyle", 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 }, groupClass: { classPropertyName: "groupClass", publicName: "groupClass", 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: { listeners: { "window:resize": "onWindowResize()", "document:click": "onDocumentClick($event)" }, classAttribute: "relative block w-full" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: NavigationHorizontalComponent, isStandalone: true, selector: "NavigationHorizontal", inputs: { navId: { classPropertyName: "navId", publicName: "navId", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, typeStyle: { classPropertyName: "typeStyle", publicName: "typeStyle", 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 }, groupClass: { classPropertyName: "groupClass", publicName: "groupClass", 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: { listeners: { "window:resize": "onWindowResize()", "document:click": "onDocumentClick($event)" }, classAttribute: "relative block h-full w-full" }, ngImport: i0, template: `
     <ul [class]="listClasses()" role="menubar" (keydown)="onKeydown($event)">
       @for (item of items(); track item.key) {
         @switch (item.type) {
@@ -2799,7 +2945,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         NavigationItemContentComponent,
                     ],
                     host: {
-                        class: 'relative block w-full',
+                        class: 'relative block h-full w-full',
                         '(window:resize)': 'onWindowResize()',
                         '(document:click)': 'onDocumentClick($event)',
                     },
@@ -2900,7 +3046,7 @@ class NavigationContentComponent {
     class = input('', { ...(ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {}), alias: 'class' });
     hostClasses = computed(() => cn('min-h-0 flex-1', this.container.displayState().orientation === 'horizontal'
         ? 'flex h-full min-w-0 items-stretch justify-center overflow-visible'
-        : 'block overflow-y-auto overflow-x-hidden', this.class()), /* @ts-ignore */
+        : '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.0.2", ngImport: i0, type: NavigationContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", 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: `
@@ -2914,6 +3060,9 @@ class NavigationContentComponent {
         [icon]="container.flyoutIcon()"
         [iconOnly]="container.flyoutIconOnly()"
         [iconPosition]="container.flyoutIconPosition()"
+        [variant]="container.flyoutTriggerVariant()"
+        [floating]="container.flyoutTriggerFloating()"
+        [triggerClass]="container.flyoutTriggerClass()"
         [position]="navState.position"
         [typeStyle]="container.typeStyle()"
         [compact]="container.compact()"
@@ -2925,7 +3074,11 @@ class NavigationContentComponent {
         [collapseTree]="container.collapseTree()"
         [openedIds]="container.openedIds()"
         (openedIdsChange)="container.openedIds.set($event)"
-        (itemSelected)="container.itemSelected.emit($event)" />
+        (itemSelected)="container.itemSelected.emit($event)"
+      >
+        <ng-content select="NavigationHeader" ngProjectAs="NavigationHeader" />
+        <ng-content select="NavigationFooter" ngProjectAs="NavigationFooter" />
+      </NavigationFlyoutMenu>
     } @else if (navState.orientation === 'horizontal') {
       <NavigationHorizontal
         [navId]="navState.id"
@@ -2941,7 +3094,8 @@ class NavigationContentComponent {
         [collapseTree]="container.collapseTree()"
         [openedIds]="container.openedIds()"
         (openedIdsChange)="container.openedIds.set($event)"
-        (itemSelected)="container.itemSelected.emit($event)" />
+        (itemSelected)="container.itemSelected.emit($event)"
+      />
     } @else if (navState.type === 'dockbar') {
       <NavigationDockbarMenu
         [navId]="navState.id"
@@ -2955,7 +3109,8 @@ class NavigationContentComponent {
         [collapseTree]="container.collapseTree()"
         [openedIds]="container.openedIds()"
         (openedIdsChange)="container.openedIds.set($event)"
-        (itemSelected)="container.itemSelected.emit($event)" />
+        (itemSelected)="container.itemSelected.emit($event)"
+      />
     } @else {
       <NavigationList
         [navId]="navState.id"
@@ -2969,9 +3124,10 @@ class NavigationContentComponent {
         [collapseTree]="container.collapseTree()"
         [openedIds]="container.openedIds()"
         (openedIdsChange)="container.openedIds.set($event)"
-        (itemSelected)="container.itemSelected.emit($event)" />
+        (itemSelected)="container.itemSelected.emit($event)"
+      />
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: NavigationDockbarMenuComponent, selector: "NavigationDockbarMenu", inputs: ["navId", "items", "mode", "position", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "component", type: NavigationFlyoutMenuComponent, selector: "NavigationFlyoutMenu", inputs: ["navId", "items", "label", "icon", "iconOnly", "iconPosition", "position", "typeStyle", "compact", "itemClass", "groupClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "component", type: NavigationHorizontalComponent, selector: "NavigationHorizontal", inputs: ["navId", "items", "position", "typeStyle", "compact", "itemClass", "groupClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "component", type: NavigationListComponent, selector: "NavigationList", inputs: ["navId", "items", "collapsed", "compact", "position", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: NavigationDockbarMenuComponent, selector: "NavigationDockbarMenu", inputs: ["navId", "items", "mode", "position", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "component", type: NavigationFlyoutMenuComponent, selector: "NavigationFlyoutMenu", inputs: ["navId", "items", "label", "icon", "iconOnly", "iconPosition", "variant", "floating", "triggerClass", "position", "typeStyle", "compact", "itemClass", "groupClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "component", type: NavigationHorizontalComponent, selector: "NavigationHorizontal", inputs: ["navId", "items", "position", "typeStyle", "compact", "itemClass", "groupClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "component", type: NavigationListComponent, selector: "NavigationList", inputs: ["navId", "items", "collapsed", "compact", "position", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationContentComponent, decorators: [{
             type: Component,
@@ -2998,6 +3154,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
         [icon]="container.flyoutIcon()"
         [iconOnly]="container.flyoutIconOnly()"
         [iconPosition]="container.flyoutIconPosition()"
+        [variant]="container.flyoutTriggerVariant()"
+        [floating]="container.flyoutTriggerFloating()"
+        [triggerClass]="container.flyoutTriggerClass()"
         [position]="navState.position"
         [typeStyle]="container.typeStyle()"
         [compact]="container.compact()"
@@ -3009,7 +3168,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
         [collapseTree]="container.collapseTree()"
         [openedIds]="container.openedIds()"
         (openedIdsChange)="container.openedIds.set($event)"
-        (itemSelected)="container.itemSelected.emit($event)" />
+        (itemSelected)="container.itemSelected.emit($event)"
+      >
+        <ng-content select="NavigationHeader" ngProjectAs="NavigationHeader" />
+        <ng-content select="NavigationFooter" ngProjectAs="NavigationFooter" />
+      </NavigationFlyoutMenu>
     } @else if (navState.orientation === 'horizontal') {
       <NavigationHorizontal
         [navId]="navState.id"
@@ -3025,7 +3188,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
         [collapseTree]="container.collapseTree()"
         [openedIds]="container.openedIds()"
         (openedIdsChange)="container.openedIds.set($event)"
-        (itemSelected)="container.itemSelected.emit($event)" />
+        (itemSelected)="container.itemSelected.emit($event)"
+      />
     } @else if (navState.type === 'dockbar') {
       <NavigationDockbarMenu
         [navId]="navState.id"
@@ -3039,7 +3203,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
         [collapseTree]="container.collapseTree()"
         [openedIds]="container.openedIds()"
         (openedIdsChange)="container.openedIds.set($event)"
-        (itemSelected)="container.itemSelected.emit($event)" />
+        (itemSelected)="container.itemSelected.emit($event)"
+      />
     } @else {
       <NavigationList
         [navId]="navState.id"
@@ -3053,7 +3218,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
         [collapseTree]="container.collapseTree()"
         [openedIds]="container.openedIds()"
         (openedIdsChange)="container.openedIds.set($event)"
-        (itemSelected)="container.itemSelected.emit($event)" />
+        (itemSelected)="container.itemSelected.emit($event)"
+      />
     }
   `,
                 }]
@@ -3070,7 +3236,7 @@ class NavigationFooterComponent {
     ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: NavigationFooterComponent, isStandalone: true, selector: "NavigationFooter", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
-    <div class="flex h-full items-center">
+    <div class="flex h-full min-w-0 items-center gap-3">
       <ng-content />
     </div>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -3084,7 +3250,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         '[class]': 'hostClasses()',
                     },
                     template: `
-    <div class="flex h-full items-center">
+    <div class="flex h-full min-w-0 items-center gap-3">
       <ng-content />
     </div>
   `,
@@ -3109,11 +3275,26 @@ class NavigationHeaderComponent {
         return this.toggle() || (this.shell.collapseEnabled() && !this.displayCollapsed());
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showToggle" }] : /* istanbul ignore next */ []));
-    toggleAriaLabel = computed(() => (this.collapsed() ? 'Expand navigation' : 'Collapse navigation'), /* @ts-ignore */
+    toggleAriaLabel = computed(() => this.collapsed() ? 'Expand navigation' : 'Collapse navigation', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "toggleAriaLabel" }] : /* istanbul ignore next */ []));
-    toggleIconName = computed(() => (this.collapsed() ? 'left_panel_open' : 'left_panel_close'), /* @ts-ignore */
+    toggleIconName = computed(() => this.collapsed() ? 'left_panel_open' : 'left_panel_close', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "toggleIconName" }] : /* istanbul ignore next */ []));
-    contentClasses = computed(() => (this.isHorizontal() ? 'min-w-0' : 'min-w-0 flex-1'), /* @ts-ignore */
+    /**
+     * Baris isi header. Saat collapsed/dockbar (vertical) isi (inisial/ikon) dipusatkan di tengah
+     * rail agar simetris dengan ikon nav-item di bawahnya (yang juga center di rail); selain itu kiri
+     * dengan padding `px-3`.
+     */
+    rowClasses = computed(() => cn('flex h-full items-center', !this.isHorizontal() && this.displayCollapsed() ? 'justify-center' : 'gap-3 px-3'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowClasses" }] : /* istanbul ignore next */ []));
+    contentClasses = computed(() => {
+        if (this.isHorizontal()) {
+            return 'flex min-w-0 items-center gap-3';
+        }
+        // Collapsed/dockbar: inisial center (tanpa `flex-1` yang membuatnya rata kiri).
+        return this.displayCollapsed()
+            ? 'flex min-w-0 items-center justify-center'
+            : 'flex min-w-0 flex-1 items-center gap-3';
+    }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "contentClasses" }] : /* istanbul ignore next */ []));
     hostClasses = computed(() => cn(this.isHorizontal()
         ? 'relative z-10 block h-full w-auto shrink-0'
@@ -3124,7 +3305,7 @@ class NavigationHeaderComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", 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="flex h-full items-center gap-3 px-3">
+    <div [class]="rowClasses()">
       <div [class]="contentClasses()">
         <ng-content />
       </div>
@@ -3136,7 +3317,8 @@ class NavigationHeaderComponent {
           [attr.aria-label]="toggleAriaLabel()"
           [attr.title]="toggleAriaLabel()"
           data-navigation-header-toggle="true"
-          (click)="toggleCollapsed()">
+          (click)="toggleCollapsed()"
+        >
           <Icon data-navigation-header-toggle-icon="true" [name]="toggleIconName()" [size]="18" />
         </button>
       }
@@ -3154,7 +3336,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         '[attr.data-collapsed]': 'displayCollapsed()',
                     },
                     template: `
-    <div class="flex h-full items-center gap-3 px-3">
+    <div [class]="rowClasses()">
       <div [class]="contentClasses()">
         <ng-content />
       </div>
@@ -3166,7 +3348,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
           [attr.aria-label]="toggleAriaLabel()"
           [attr.title]="toggleAriaLabel()"
           data-navigation-header-toggle="true"
-          (click)="toggleCollapsed()">
+          (click)="toggleCollapsed()"
+        >
           <Icon data-navigation-header-toggle-icon="true" [name]="toggleIconName()" [size]="18" />
         </button>
       }
@@ -3340,7 +3523,7 @@ class NavigationNavbarComponent {
     destroyRef = inject(DestroyRef);
     /** Posisi bar terhadap konten layout: `top` (default) atau `bottom` — panel grid membuka ke arah sebaliknya. */
     position = input(null, { ...(ngDevMode ? { debugName: "position" } : /* istanbul ignore next */ {}), alias: 'nav-position' });
-    typeStyle = input('default', { ...(ngDevMode ? { debugName: "typeStyle" } : /* istanbul ignore next */ {}), alias: 'nav-type-style' });
+    typeStyle = input('flat', { ...(ngDevMode ? { debugName: "typeStyle" } : /* istanbul ignore next */ {}), alias: 'nav-appearance' });
     class = input('', { ...(ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {}), alias: 'class' });
     headerSlot = contentChild(NavigationHeaderComponent, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "headerSlot" }] : /* istanbul ignore next */ []));
@@ -3361,7 +3544,7 @@ class NavigationNavbarComponent {
         this.destroyRef.onDestroy(() => this.container.unregisterType(config));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: NavigationNavbarComponent, isStandalone: true, selector: "NavigationNavbar", inputs: { position: { classPropertyName: "position", publicName: "nav-position", isSignal: true, isRequired: false, transformFunction: null }, typeStyle: { classPropertyName: "typeStyle", publicName: "nav-appearance", 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" />
     }
@@ -3402,7 +3585,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
     }
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "nav-position", required: false }] }], typeStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "nav-type-style", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], headerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavigationHeaderComponent), { isSignal: true }] }], contentSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavigationContentComponent), { isSignal: true }] }], footerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavigationFooterComponent), { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "nav-position", required: false }] }], typeStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "nav-appearance", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], headerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavigationHeaderComponent), { isSignal: true }] }], contentSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavigationContentComponent), { isSignal: true }] }], footerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavigationFooterComponent), { isSignal: true }] }] } });
 
 /**
  * Type flyout horizontal (trigger + panel menu) untuk `<Navigation>`.
@@ -3421,16 +3604,25 @@ class NavigationFlyoutComponent {
     iconOnly = input(false, { ...(ngDevMode ? { debugName: "iconOnly" } : /* istanbul ignore next */ {}), alias: 'icon-only', transform: booleanAttribute });
     /** Penempatan ikon relatif terhadap label: `start` (default) atau `end`. */
     iconPosition = input('start', { ...(ngDevMode ? { debugName: "iconPosition" } : /* istanbul ignore next */ {}), alias: 'icon-position' });
+    /** Bentuk visual tombol trigger: `button` (pil, default) | `link` | `plain` (ghost). */
+    triggerVariant = input('button', { ...(ngDevMode ? { debugName: "triggerVariant" } : /* istanbul ignore next */ {}), alias: 'trigger-variant' });
+    /**
+     * Trigger mengambang (`fixed`) alih-alih mengalir di dalam bar/div. Default pojok kanan-atas;
+     * pakai `trigger-class` untuk pindah pojok (mis. `bottom-6 right-6 top-auto`).
+     *
+     * Catatan: `position: fixed` ber-anchor ke viewport HANYA bila tak ada ancestor pembentuk
+     * containing block. Di dalam `<Layout>` (frame-nya memakai `backdrop-blur`), trigger ber-anchor
+     * ke kotak konten frame (bukan viewport sebenarnya) dan bisa ter-clip oleh frame `overflow-hidden`.
+     * Untuk floating sebenar-viewport, tempatkan `<Navigation>` flyout di luar frame `<Layout>`.
+     */
+    triggerFloating = input(false, { ...(ngDevMode ? { debugName: "triggerFloating" } : /* istanbul ignore next */ {}), alias: 'trigger-floating',
+        transform: booleanAttribute });
+    /** Kelas Tailwind untuk host trigger (posisi pojok floating / styling wrapper saat in-flow). */
+    triggerClass = input('', { ...(ngDevMode ? { debugName: "triggerClass" } : /* istanbul ignore next */ {}), alias: 'trigger-class' });
     /** Posisi bar terhadap konten layout: `top` (default) atau `bottom` — panel membuka ke arah sebaliknya. */
     position = input(null, { ...(ngDevMode ? { debugName: "position" } : /* istanbul ignore next */ {}), alias: 'nav-position' });
-    typeStyle = input('default', { ...(ngDevMode ? { debugName: "typeStyle" } : /* istanbul ignore next */ {}), alias: 'nav-type-style' });
+    typeStyle = input('flat', { ...(ngDevMode ? { debugName: "typeStyle" } : /* istanbul ignore next */ {}), alias: 'nav-appearance' });
     class = input('', { ...(ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {}), alias: 'class' });
-    headerSlot = contentChild(NavigationHeaderComponent, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "headerSlot" }] : /* istanbul ignore next */ []));
-    contentSlot = contentChild(NavigationContentComponent, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "contentSlot" }] : /* istanbul ignore next */ []));
-    footerSlot = contentChild(NavigationFooterComponent, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "footerSlot" }] : /* istanbul ignore next */ []));
     hostClasses = computed(() => cn(this.container.shellClasses(), this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     constructor() {
@@ -3442,26 +3634,24 @@ class NavigationFlyoutComponent {
             flyoutIcon: this.icon,
             flyoutIconOnly: this.iconOnly,
             flyoutIconPosition: this.iconPosition,
+            flyoutTriggerVariant: this.triggerVariant,
+            flyoutTriggerFloating: this.triggerFloating,
+            flyoutTriggerClass: this.triggerClass,
             typeStyle: this.typeStyle,
         };
         this.container.registerType(config);
         this.destroyRef.onDestroy(() => this.container.unregisterType(config));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationFlyoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", 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 }, 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" />
-    }
-
-    @if (contentSlot()) {
-      <ng-content select="NavigationContent" />
-    } @else {
-      <NavigationContent />
-    }
-
-    @if (footerSlot()) {
-      <ng-content select="NavigationFooter" />
-    }
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", 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 }, triggerClass: { classPropertyName: "triggerClass", publicName: "trigger-class", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "nav-position", isSignal: true, isRequired: false, transformFunction: null }, typeStyle: { classPropertyName: "typeStyle", publicName: "nav-appearance", 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:
+         brand atas, logout bawah; mode bottom: cerminannya (brand bawah dekat bar, logout atas). -->
+    <NavigationContent>
+      <ng-content select="NavigationHeader" ngProjectAs="NavigationHeader" />
+      <ng-content select="NavigationFooter" ngProjectAs="NavigationFooter" />
+    </NavigationContent>
   `, isInline: true, dependencies: [{ kind: "component", type: NavigationContentComponent, selector: "NavigationContent", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationFlyoutComponent, decorators: [{
@@ -3474,22 +3664,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         '[class]': 'hostClasses()',
                     },
                     template: `
-    @if (headerSlot()) {
-      <ng-content select="NavigationHeader" />
-    }
-
-    @if (contentSlot()) {
-      <ng-content select="NavigationContent" />
-    } @else {
-      <NavigationContent />
-    }
-
-    @if (footerSlot()) {
-      <ng-content select="NavigationFooter" />
-    }
+    <!-- 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:
+         brand atas, logout bawah; mode bottom: cerminannya (brand bawah dekat bar, logout atas). -->
+    <NavigationContent>
+      <ng-content select="NavigationHeader" ngProjectAs="NavigationHeader" />
+      <ng-content select="NavigationFooter" ngProjectAs="NavigationFooter" />
+    </NavigationContent>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon-only", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon-position", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "nav-position", required: false }] }], typeStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "nav-type-style", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], headerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavigationHeaderComponent), { isSignal: true }] }], contentSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavigationContentComponent), { isSignal: true }] }], footerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavigationFooterComponent), { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon-only", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon-position", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger-variant", required: false }] }], triggerFloating: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger-floating", required: false }] }], triggerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger-class", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "nav-position", required: false }] }], typeStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "nav-appearance", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /**
  * Tampilan compact aktif saat sidebar collapsible sedang collapsed, atau saat
@@ -3560,8 +3745,270 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+/**
+ * Slot aksi di sisi kanan `NavigationFooter`. Selalu didorong ke kanan (`ml-auto`),
+ * rata tengah vertikal, dengan jarak antar-child otomatis (`gap`). Isi bebas dengan
+ * ikon, button, atau teks — mis. tombol logout.
+ *
+ * Otomatis disembunyikan saat sidebar vertical sedang collapsed (rail icon-only)
+ * agar tidak overflow; konsisten dengan `NavigationFooterTitle`.
+ */
+class NavigationFooterActionComponent {
+    shell = inject(NAVIGATION_SHELL, { optional: true });
+    class = input('', { ...(ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {}), alias: 'class' });
+    collapsed = computed(() => {
+        const state = this.shell?.displayState();
+        return state ? state.orientation === 'vertical' && state.collapsed : false;
+    }, /* @ts-ignore */
+    ...(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.0.2", ngImport: i0, type: NavigationFooterActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", 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, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationFooterActionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'NavigationFooterAction',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'hostClasses()',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Turunkan inisial ringkas dari sebuah nama untuk avatar fallback.
+ *
+ *   "Ojie Permana" → "OP"
+ *   "Ojiepermana"  → "OJ"
+ *   ""             → ""
+ *
+ * Mengambil huruf depan kata pertama dan kata terakhir; bila hanya satu kata,
+ * memakai dua huruf pertamanya.
+ */
+function deriveNavigationInitials(name) {
+    const parts = name.trim().split(/\s+/).filter(Boolean);
+    if (parts.length === 0) {
+        return '';
+    }
+    const first = parts[0] ?? '';
+    if (parts.length === 1) {
+        return first.slice(0, 2).toUpperCase();
+    }
+    const last = parts[parts.length - 1] ?? '';
+    return (first.charAt(0) + last.charAt(0)).toUpperCase();
+}
+
+/**
+ * Blok avatar/inisial untuk slot `NavigationFooter` (profil user). Sama seperti
+ * `NavigationHeaderInitial` tetapi default-nya bulat (rounded-full) sesuai
+ * konvensi avatar user. Consumer cukup memberi `name`; inisial diturunkan
+ * otomatis. Beri `src` untuk foto, `icon` untuk material symbol, atau `initials`
+ * untuk override.
+ *
+ * Tetap tampil saat sidebar collapsed; pasangannya `NavigationFooterTitle` yang
+ * menyembunyikan diri.
+ */
+class NavigationFooterInitialComponent {
+    name = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    src = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+    initials = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []));
+    icon = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    class = input('', { ...(ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {}), alias: 'class' });
+    resolvedInitials = computed(() => this.initials()?.slice(0, 2).toUpperCase() || deriveNavigationInitials(this.name()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedInitials" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => cn('inline-flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-full bg-primary/10 text-primary', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationFooterInitialComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", 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) {
+      <Icon [name]="glyph" [size]="18" />
+    } @else {
+      <span class="text-xs font-semibold leading-none">{{ resolvedInitials() }}</span>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "Icon", inputs: ["name", "class", "size", "fill", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationFooterInitialComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'NavigationFooterInitial',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [IconComponent],
+                    host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.role]': "name() ? 'img' : null",
+                        '[attr.aria-label]': 'name() || null',
+                    },
+                    template: `
+    @if (src(); as source) {
+      <img [src]="source" alt="" class="h-full w-full rounded-[inherit] object-cover" />
+    } @else if (icon(); as glyph) {
+      <Icon [name]="glyph" [size]="18" />
+    } @else {
+      <span class="text-xs font-semibold leading-none">{{ resolvedInitials() }}</span>
+    }
+  `,
+                }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Judul + subjudul untuk slot `NavigationFooter` (mis. nama + email user).
+ * Otomatis disembunyikan saat sidebar vertical sedang collapsed (rail icon-only)
+ * dengan membaca `NAVIGATION_SHELL`.
+ */
+class NavigationFooterTitleComponent {
+    shell = inject(NAVIGATION_SHELL, { optional: true });
+    title = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    subtitle = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
+    class = input('', { ...(ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {}), alias: 'class' });
+    collapsed = computed(() => {
+        const state = this.shell?.displayState();
+        return state ? state.orientation === 'vertical' && state.collapsed : false;
+    }, /* @ts-ignore */
+    ...(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.0.2", ngImport: i0, type: NavigationFooterTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", 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="block truncate text-sm font-semibold leading-tight text-foreground">{{ title() }}</span>
+    @if (subtitle(); as sub) {
+      <span class="block truncate text-xs leading-tight text-muted-foreground">{{ sub }}</span>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationFooterTitleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'NavigationFooterTitle',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.data-collapsed]': 'collapsed()',
+                    },
+                    template: `
+    <span class="block truncate text-sm font-semibold leading-tight text-foreground">{{ title() }}</span>
+    @if (subtitle(); as sub) {
+      <span class="block truncate text-xs leading-tight text-muted-foreground">{{ sub }}</span>
+    }
+  `,
+                }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Blok avatar/inisial untuk slot `NavigationHeader` (brand/logo). Consumer cukup
+ * memberi `name`; inisial diturunkan otomatis ("Ojie Permana" → "OP"). Beri `src`
+ * untuk gambar, `icon` (material symbol) sebagai ganti inisial, atau `initials`
+ * untuk override manual.
+ *
+ * Selalu tampil baik saat sidebar expanded maupun collapsed karena ukurannya muat
+ * di rail icon-only — pasangannya, `NavigationHeaderTitle`, yang menyembunyikan
+ * diri saat collapsed.
+ */
+class NavigationHeaderInitialComponent {
+    name = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    src = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+    initials = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []));
+    icon = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    class = input('', { ...(ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {}), alias: 'class' });
+    resolvedInitials = computed(() => this.initials()?.slice(0, 2).toUpperCase() || deriveNavigationInitials(this.name()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedInitials" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => cn('inline-flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-md bg-primary/10 text-primary', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationHeaderInitialComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", 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 }, 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) {
+      <Icon [name]="glyph" [size]="18" />
+    } @else {
+      <span class="text-xs font-semibold leading-none">{{ resolvedInitials() }}</span>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "Icon", inputs: ["name", "class", "size", "fill", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationHeaderInitialComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'NavigationHeaderInitial',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [IconComponent],
+                    host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.role]': "name() ? 'img' : null",
+                        '[attr.aria-label]': 'name() || null',
+                    },
+                    template: `
+    @if (src(); as source) {
+      <img [src]="source" alt="" class="h-full w-full rounded-[inherit] object-cover" />
+    } @else if (icon(); as glyph) {
+      <Icon [name]="glyph" [size]="18" />
+    } @else {
+      <span class="text-xs font-semibold leading-none">{{ resolvedInitials() }}</span>
+    }
+  `,
+                }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Judul + subjudul untuk slot `NavigationHeader`. Otomatis disembunyikan saat
+ * sidebar vertical sedang collapsed (rail icon-only) dengan membaca
+ * `NAVIGATION_SHELL` — consumer tidak perlu mengelola state collapse sendiri.
+ */
+class NavigationHeaderTitleComponent {
+    shell = inject(NAVIGATION_SHELL, { optional: true });
+    title = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    subtitle = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
+    class = input('', { ...(ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {}), alias: 'class' });
+    collapsed = computed(() => {
+        const state = this.shell?.displayState();
+        return state ? state.orientation === 'vertical' && state.collapsed : false;
+    }, /* @ts-ignore */
+    ...(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.0.2", ngImport: i0, type: NavigationHeaderTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", 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="block truncate text-sm font-semibold leading-tight text-foreground">{{ title() }}</span>
+    @if (subtitle(); as sub) {
+      <span class="block truncate text-xs leading-tight text-muted-foreground">{{ sub }}</span>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NavigationHeaderTitleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'NavigationHeaderTitle',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.data-collapsed]': 'collapsed()',
+                    },
+                    template: `
+    <span class="block truncate text-sm font-semibold leading-tight text-foreground">{{ title() }}</span>
+    @if (subtitle(); as sub) {
+      <span class="block truncate text-xs leading-tight text-muted-foreground">{{ sub }}</span>
+    }
+  `,
+                }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NavigationCollapseExpandedDirective, NavigationCollapseRootDirective, NavigationContainerComponent, NavigationContentComponent, NavigationDockbarComponent, NavigationFlyoutComponent, NavigationFooterComponent, NavigationHeaderComponent, NavigationIconDirective, NavigationNavbarComponent, NavigationSidebarComponent, normalizeUiNavItems };
+export { NavigationCollapseExpandedDirective, NavigationCollapseRootDirective, NavigationContainerComponent, NavigationContentComponent, NavigationDockbarComponent, NavigationFlyoutComponent, NavigationFooterActionComponent, NavigationFooterComponent, NavigationFooterInitialComponent, NavigationFooterTitleComponent, NavigationHeaderComponent, NavigationHeaderInitialComponent, NavigationHeaderTitleComponent, NavigationIconDirective, NavigationNavbarComponent, NavigationSidebarComponent, deriveNavigationInitials, normalizeUiNavItems };