@ojiepermana/angular 21.1.9 → 21.1.12

package/fesm2022/ojiepermana-angular-navigation.mjs

@@ -1,9 +1,9 @@
+import { DOCUMENT, isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, DestroyRef, signal, computed, Injectable, PLATFORM_ID, input, ChangeDetectionStrategy, Component, ViewContainerRef, viewChild, effect, ElementRef } from '@angular/core';
+import { inject, DestroyRef, signal, computed, effect, Injectable, PLATFORM_ID, input, ChangeDetectionStrategy, Component, ViewContainerRef, viewChild, ElementRef } from '@angular/core';
 import { Router, NavigationEnd, RouterLink, RouterLinkActive } from '@angular/router';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { filter, map } from 'rxjs/operators';
-import { DOCUMENT, isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
 import { MatTooltip } from '@angular/material/tooltip';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -15,26 +15,42 @@ import { merge } from 'rxjs';
 
 /** Default registry key used when no id is specified. */
 const DEFAULT_NAVIGATION_ID = 'main';
+const SIDEBAR_COLLAPSE_STORAGE_KEY = 'sidebar-collapse';
+const LEGACY_SIDEBAR_APPEARANCE_STORAGE_KEY = 'sidebar-appearance';
+function parseSidebarCollapsed(value) {
+    if (value === 'true')
+        return true;
+    if (value === 'false')
+        return false;
+    return null;
+}
 /**
  * Signal-based global state untuk navigation (sidebar/topbar).
  *
  * Items disimpan dalam registry ber-key. Key default adalah `'main'`.
- * Komponen `ui-sidebar` / `ui-topbar` memilih registry via input `navigationId`.
+ * Komponen `sidebar` / `topbar` memilih registry via input `navigationId`.
  */
 class NavigationService {
+    doc = inject(DOCUMENT);
     router = inject(Router);
     destroyRef = inject(DestroyRef);
+    persistedSidebarCollapsed = this.readPersistedSidebarCollapsed();
     /** Internal version counter — incremented on every registry mutation. */
     _version = signal(0, ...(ngDevMode ? [{ debugName: "_version" }] : /* istanbul ignore next */ []));
     /** Internal map of registered navigation trees. */
     _registry = new Map();
+    _collapsed = signal(this.persistedSidebarCollapsed ?? false, ...(ngDevMode ? [{ debugName: "_collapsed" }] : /* istanbul ignore next */ []));
+    _hasStoredSidebarCollapse = signal(this.persistedSidebarCollapsed !== null, ...(ngDevMode ? [{ debugName: "_hasStoredSidebarCollapse" }] : /* istanbul ignore next */ []));
     /**
      * Backward-compatible accessor — returns items for the default (`'main'`) key.
      * Prefer `getItems(id)` when working with named registries.
      */
     items = computed(() => this.getItems(DEFAULT_NAVIGATION_ID)(), ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Sidebar appearance preference (`default` or `thin`). */
+    sidebarAppearance = computed(() => (this._collapsed() ? 'thin' : 'default'), ...(ngDevMode ? [{ debugName: "sidebarAppearance" }] : /* istanbul ignore next */ []));
+    hasStoredSidebarCollapse = this._hasStoredSidebarCollapse.asReadonly();
     /** Sidebar collapsed (default ↔ thin) toggle untuk desktop. */
-    collapsed = signal(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    collapsed = this._collapsed.asReadonly();
     /** Sheet drawer terbuka di mobile. */
     mobileOpen = signal(false, ...(ngDevMode ? [{ debugName: "mobileOpen" }] : /* istanbul ignore next */ []));
     /** Set id grup / collapsable yang sedang terbuka. */
@@ -74,6 +90,12 @@ class NavigationService {
         return trail;
     }, ...(ngDevMode ? [{ debugName: "activeTrail" }] : /* istanbul ignore next */ []));
     constructor() {
+        effect(() => {
+            if (!this._hasStoredSidebarCollapse()) {
+                return;
+            }
+            this.persistSidebarCollapsed(this._collapsed());
+        });
         this.router.events
             .pipe(filter((e) => e instanceof NavigationEnd), takeUntilDestroyed(this.destroyRef))
             .subscribe((e) => this.activeUrl.set(e.urlAfterRedirects));
@@ -98,12 +120,19 @@ class NavigationService {
             return this._registry.get(id) ?? [];
         });
     }
+    setSidebarAppearance(value) {
+        this.setCollapsed(value === 'thin');
+    }
+    toggleSidebarAppearance(currentAppearance = this.sidebarAppearance()) {
+        this.setCollapsed(currentAppearance !== 'thin');
+    }
     /** Toggle sidebar collapsed (default ↔ thin). */
     toggleCollapsed() {
-        this.collapsed.update((v) => !v);
+        this.setCollapsed(!this._collapsed());
     }
     setCollapsed(value) {
-        this.collapsed.set(value);
+        this._collapsed.set(value);
+        this._hasStoredSidebarCollapse.set(true);
     }
     openMobile() {
         this.mobileOpen.set(true);
@@ -137,10 +166,40 @@ class NavigationService {
     isActive(id) {
         return !!id && this.activeTrail().has(id);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NavigationService, providedIn: 'root' });
+    readPersistedSidebarCollapsed() {
+        try {
+            const storage = this.doc.defaultView?.localStorage;
+            const collapsed = parseSidebarCollapsed(storage?.getItem(SIDEBAR_COLLAPSE_STORAGE_KEY));
+            if (collapsed !== null) {
+                return collapsed;
+            }
+            const legacyAppearance = storage?.getItem(LEGACY_SIDEBAR_APPEARANCE_STORAGE_KEY);
+            if (legacyAppearance === 'thin') {
+                return true;
+            }
+            if (legacyAppearance === 'default') {
+                return false;
+            }
+            return null;
+        }
+        catch {
+            return null;
+        }
+    }
+    persistSidebarCollapsed(value) {
+        try {
+            const storage = this.doc.defaultView?.localStorage;
+            storage?.setItem(SIDEBAR_COLLAPSE_STORAGE_KEY, String(value));
+            storage?.removeItem(LEGACY_SIDEBAR_APPEARANCE_STORAGE_KEY);
+        }
+        catch {
+            /* ignore */
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: NavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: NavigationService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NavigationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: NavigationService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -180,10 +239,10 @@ class UiNavIconComponent {
         link.setAttribute(MATERIAL_SYMBOLS_FONT_ATTR, MATERIAL_SYMBOLS_FONT_ID);
         this.doc.head.appendChild(link);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UiNavIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: UiNavIconComponent, isStandalone: true, selector: "ui-nav-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true", "translate": "no" }, properties: { "class": "classes()", "style.font-size.px": "size()", "style.font-variation-settings": "fontVariationSettings" } }, ngImport: i0, template: `{{ name() }}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UiNavIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", type: UiNavIconComponent, isStandalone: true, selector: "ui-nav-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true", "translate": "no" }, properties: { "class": "classes()", "style.font-size.px": "size()", "style.font-variation-settings": "fontVariationSettings" } }, ngImport: i0, template: `{{ name() }}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UiNavIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UiNavIconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-nav-icon',
@@ -263,8 +322,8 @@ class UiNavItemComponent {
             item.action(item);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UiNavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: UiNavItemComponent, isStandalone: true, selector: "ui-nav-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UiNavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: UiNavItemComponent, isStandalone: true, selector: "ui-nav-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     @switch (type()) {
       @case ('divider') {
         <hr class="my-2 border-t border-border" role="separator" />
@@ -273,9 +332,9 @@ class UiNavItemComponent {
         <div class="flex-1"></div>
       }
       @case ('group') {
-        <div class="p-3" role="group" [attr.aria-labelledby]="headingId()">
+        <div role="group" [attr.aria-labelledby]="headingId()">
           @if (!compact()) {
-            <div class="sticky top-0 z-10 bg-background py-3 text-muted-foreground">
+            <div class="sticky top-0 z-10  p-3 text-muted-foreground backdrop-blur-3xl bg-transparent">
               <div [id]="headingId()" [class]="cn('ui-nav-heading text-muted-foreground', item().classes?.title)">
                 {{ item().title }}
               </div>
@@ -295,7 +354,7 @@ class UiNavItemComponent {
           type="button"
           [class]="
             cn(
-              'ui-nav-text group/ni flex w-full items-center gap-3 rounded-md px-3 py-2 text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+              'ui-nav-text group/ni flex w-full items-center gap-3 rounded-full p-3 text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
               isTrailActive() && 'text-primary',
               item().classes?.wrapper
             )
@@ -308,7 +367,15 @@ class UiNavItemComponent {
           [matTooltipDisabled]="!compact()"
           (click)="toggleGroup()">
           @if (collapsableItem().icon) {
-            <ui-nav-icon [name]="collapsableItem().icon!" [size]="18" [class]="item().classes?.icon ?? ''" />
+            <span
+              [class]="
+                cn(
+                  'inline-flex shrink-0 items-center justify-center',
+                  open && 'h-7 w-7 rounded-full border border-brand'
+                )
+              ">
+              <ui-nav-icon [name]="collapsableItem().icon!" [size]="18" [class]="item().classes?.icon ?? ''" />
+            </span>
           }
           @if (!compact()) {
             <span [class]="cn('flex-1 truncate text-left', item().classes?.title)">
@@ -324,7 +391,10 @@ class UiNavItemComponent {
           }
         </button>
         @if (!compact() && open) {
-          <div [id]="id + '-panel'" role="region" class="ml-3 mt-0.5 flex flex-col gap-0.5 border-l border-border pl-3">
+          <div
+            [id]="id + '-panel'"
+            role="region"
+            class="relative ml-6.5 mt-0.5 flex flex-col gap-0.5 pl-3 before:absolute before:bottom-0 before:left-0 before:-top-3.5 before:w-px before:bg-border before:content-['']">
             @for (child of collapsableItem().children; track child.id) {
               <ui-nav-item [item]="child" [level]="level() + 1" [compact]="false" />
             }
@@ -456,7 +526,7 @@ class UiNavItemComponent {
     }
   `, isInline: true, dependencies: [{ kind: "component", type: UiNavItemComponent, selector: "ui-nav-item", inputs: ["item", "level", "compact"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: UiNavIconComponent, selector: "ui-nav-icon", inputs: ["name", "class", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UiNavItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UiNavItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-nav-item',
@@ -471,9 +541,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         <div class="flex-1"></div>
       }
       @case ('group') {
-        <div class="p-3" role="group" [attr.aria-labelledby]="headingId()">
+        <div role="group" [attr.aria-labelledby]="headingId()">
           @if (!compact()) {
-            <div class="sticky top-0 z-10 bg-background py-3 text-muted-foreground">
+            <div class="sticky top-0 z-10  p-3 text-muted-foreground backdrop-blur-3xl bg-transparent">
               <div [id]="headingId()" [class]="cn('ui-nav-heading text-muted-foreground', item().classes?.title)">
                 {{ item().title }}
               </div>
@@ -493,7 +563,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
           type="button"
           [class]="
             cn(
-              'ui-nav-text group/ni flex w-full items-center gap-3 rounded-md px-3 py-2 text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+              'ui-nav-text group/ni flex w-full items-center gap-3 rounded-full p-3 text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
               isTrailActive() && 'text-primary',
               item().classes?.wrapper
             )
@@ -506,7 +576,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
           [matTooltipDisabled]="!compact()"
           (click)="toggleGroup()">
           @if (collapsableItem().icon) {
-            <ui-nav-icon [name]="collapsableItem().icon!" [size]="18" [class]="item().classes?.icon ?? ''" />
+            <span
+              [class]="
+                cn(
+                  'inline-flex shrink-0 items-center justify-center',
+                  open && 'h-7 w-7 rounded-full border border-brand'
+                )
+              ">
+              <ui-nav-icon [name]="collapsableItem().icon!" [size]="18" [class]="item().classes?.icon ?? ''" />
+            </span>
           }
           @if (!compact()) {
             <span [class]="cn('flex-1 truncate text-left', item().classes?.title)">
@@ -522,7 +600,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
           }
         </button>
         @if (!compact() && open) {
-          <div [id]="id + '-panel'" role="region" class="ml-3 mt-0.5 flex flex-col gap-0.5 border-l border-border pl-3">
+          <div
+            [id]="id + '-panel'"
+            role="region"
+            class="relative ml-6.5 mt-0.5 flex flex-col gap-0.5 pl-3 before:absolute before:bottom-0 before:left-0 before:-top-3.5 before:w-px before:bg-border before:content-['']">
             @for (child of collapsableItem().children; track child.id) {
               <ui-nav-item [item]="child" [level]="level() + 1" [compact]="false" />
             }
@@ -693,6 +774,7 @@ class SidebarComponent {
         return explicit.length > 0 ? explicit : this.nav.getItems(this.navigationId())();
     }, ...(ngDevMode ? [{ debugName: "resolvedItems" }] : /* istanbul ignore next */ []));
     hovered = signal(false, ...(ngDevMode ? [{ debugName: "hovered" }] : /* istanbul ignore next */ []));
+    suppressHoverUntilLeave = signal(false, ...(ngDevMode ? [{ debugName: "suppressHoverUntilLeave" }] : /* istanbul ignore next */ []));
     drawerTpl = viewChild.required('drawerTpl');
     drawerRef = null;
     focusTrap = null;
@@ -702,8 +784,19 @@ class SidebarComponent {
         initialValue: false,
     });
     isMobile = computed(() => this.autoMobile() && this.isMobileMedia(), ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
-    isExpanded = computed(() => this.appearance() === 'default' || this.hovered(), ...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
-    isCompact = computed(() => !this.isMobile() && this.appearance() === 'thin' && !this.hovered(), ...(ngDevMode ? [{ debugName: "isCompact" }] : /* istanbul ignore next */ []));
+    resolvedCollapsed = computed(() => {
+        if (this.nav.hasStoredSidebarCollapse()) {
+            return this.nav.collapsed();
+        }
+        return this.appearance() === 'thin';
+    }, ...(ngDevMode ? [{ debugName: "resolvedCollapsed" }] : /* istanbul ignore next */ []));
+    resolvedAppearance = computed(() => {
+        return this.resolvedCollapsed() ? 'thin' : 'default';
+    }, ...(ngDevMode ? [{ debugName: "resolvedAppearance" }] : /* istanbul ignore next */ []));
+    hoverActive = computed(() => this.hovered() && !this.suppressHoverUntilLeave(), ...(ngDevMode ? [{ debugName: "hoverActive" }] : /* istanbul ignore next */ []));
+    isExpanded = computed(() => !this.resolvedCollapsed() || this.hoverActive(), ...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
+    isCompact = computed(() => !this.isMobile() && this.resolvedCollapsed() && !this.hoverActive(), ...(ngDevMode ? [{ debugName: "isCompact" }] : /* istanbul ignore next */ []));
+    toggleButtonLabel = computed(() => this.resolvedCollapsed() ? 'Expand sidebar' : 'Collapse sidebar', ...(ngDevMode ? [{ debugName: "toggleButtonLabel" }] : /* istanbul ignore next */ []));
     constructor() {
         // Auto-register items ke service untuk active trail (hanya jika input non-kosong).
         effect(() => {
@@ -723,24 +816,64 @@ class SidebarComponent {
         this.destroyRef.onDestroy(() => this.closeDrawer());
     }
     hostClasses = computed(() => {
-        const base = ['relative flex shrink-0 bg-background text-foreground', 'transition-[width] duration-200 ease-out'];
-        const appearance = this.appearance();
-        if (appearance === 'thin')
+        const base = ['relative flex shrink-0 text-foreground', 'transition-[width] duration-200 ease-out'];
+        if (this.resolvedCollapsed())
             base.push('w-16');
         else
             base.push('[width:17.5rem]');
         if (this.position() === 'right')
-            base.push('border-l');
-        else
-            base.push('border-r');
-        base.push('border-border');
+            base.push('border-l', 'border-brand');
         return [...base, this.class()].join(' ');
     }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    headerClasses = computed(() => {
+        const base = ['flex h-12 items-center gap-2 border-b border-brand'];
+        if (this.isCompact()) {
+            base.push('justify-center px-2');
+        }
+        return base.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "headerClasses" }] : /* istanbul ignore next */ []));
+    headerSlotClasses = computed(() => {
+        const base = ['min-w-0'];
+        if (this.isCompact()) {
+            base.push('flex flex-1 items-center justify-center overflow-hidden', '[&>[sidebar-header]>*]:mx-auto', '[&>[sidebar-header]>*]:max-w-full', '[&>[sidebar-header]>*]:shrink-0');
+        }
+        else {
+            base.push('flex min-w-0 flex-1 items-center');
+        }
+        return base.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "headerSlotClasses" }] : /* istanbul ignore next */ []));
+    navClasses = computed(() => {
+        const base = ['flex-1 overflow-y-auto overflow-x-hidden'];
+        if (this.isCompact()) {
+            base.push('px-2', '[&_.ui-nav-text]:mx-auto', '[&_.ui-nav-text]:w-10', '[&_.ui-nav-text]:justify-center', '[&_.ui-nav-text]:px-0');
+        }
+        return base.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "navClasses" }] : /* istanbul ignore next */ []));
+    footerClasses = computed(() => {
+        const base = ['h-12 border-t border-brand'];
+        if (this.isCompact()) {
+            base.push('flex items-center justify-center px-2');
+        }
+        return base.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "footerClasses" }] : /* istanbul ignore next */ []));
+    footerSlotClasses = computed(() => {
+        const base = ['h-full'];
+        if (this.isCompact()) {
+            base.push('flex h-full items-center justify-center overflow-hidden', '[&>[sidebar-footer]>*]:mx-auto', '[&>[sidebar-footer]>*]:w-auto', '[&>[sidebar-footer]>*]:max-w-full', '[&>[sidebar-footer]>*]:justify-center', '[&>[sidebar-footer]>*]:gap-0', '[&>[sidebar-footer]>*]:px-0', '[&>[sidebar-footer]>*>*:first-child]:mx-auto', '[&>[sidebar-footer]>*>*:nth-child(n+2)]:hidden');
+        }
+        else {
+            base.push('w-full');
+        }
+        return base.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "footerSlotClasses" }] : /* istanbul ignore next */ []));
     innerClasses = computed(() => {
-        const overlayActive = this.appearance() === 'thin' && this.hovered();
+        const overlayActive = this.resolvedCollapsed() && this.hoverActive();
         const base = ['flex h-full flex-col transition-[width] duration-200 ease-out'];
+        if (this.resolvedCollapsed()) {
+            base.push('bg-background');
+        }
         if (overlayActive) {
-            base.push('absolute inset-y-0 z-30 bg-background shadow-xl [width:17.5rem]', this.position() === 'right' ? 'right-0 border-l border-border' : 'left-0 border-r border-border');
+            base.push('absolute inset-y-0 z-30 shadow-xl [width:17.5rem]', this.position() === 'right' ? 'right-0 border-l border-brand' : 'left-0 border-r border-brand');
         }
         else {
             base.push('w-full');
@@ -748,16 +881,25 @@ class SidebarComponent {
         return base.join(' ');
     }, ...(ngDevMode ? [{ debugName: "innerClasses" }] : /* istanbul ignore next */ []));
     onHoverEnter() {
-        if (this.appearance() === 'thin' && !this.isMobile())
-            this.hovered.set(true);
+        if (!this.resolvedCollapsed() || this.isMobile() || this.suppressHoverUntilLeave())
+            return;
+        this.hovered.set(true);
     }
     onHoverLeave() {
-        if (this.appearance() === 'thin')
+        this.suppressHoverUntilLeave.set(false);
+        if (this.resolvedCollapsed())
             this.hovered.set(false);
     }
+    toggleAppearance(event) {
+        event.stopPropagation();
+        const nextCollapsed = !this.resolvedCollapsed();
+        this.nav.setCollapsed(nextCollapsed);
+        this.hovered.set(false);
+        this.suppressHoverUntilLeave.set(nextCollapsed);
+    }
     /** Touch fallback: tap pada strip thin (ketika belum expanded) untuk expand. */
     onHostClick(event) {
-        if (this.appearance() !== 'thin' || this.isMobile())
+        if (!this.resolvedCollapsed() || this.isMobile())
             return;
         if (this.hovered())
             return;
@@ -782,7 +924,7 @@ class SidebarComponent {
             hasBackdrop: true,
             backdropClass: 'cdk-overlay-dark-backdrop',
             scrollStrategy: this.overlay.scrollStrategies.block(),
-            panelClass: ['ui-sidebar-drawer'],
+            panelClass: ['sidebar-drawer'],
         });
         const portal = new TemplatePortal(this.drawerTpl(), this.vcr);
         const viewRef = this.drawerRef.attach(portal);
@@ -810,25 +952,41 @@ class SidebarComponent {
         this.previouslyFocused?.focus?.();
         this.previouslyFocused = null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SidebarComponent, isStandalone: true, selector: "ui-sidebar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, navigationId: { classPropertyName: "navigationId", publicName: "navigationId", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, autoMobile: { classPropertyName: "autoMobile", publicName: "autoMobile", isSignal: true, isRequired: false, transformFunction: null }, autoRegister: { classPropertyName: "autoRegister", publicName: "autoRegister", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, listeners: { "mouseenter": "onHoverEnter()", "mouseleave": "onHoverLeave()", "focusin": "onHoverEnter()", "click": "onHostClick($event)" }, properties: { "attr.aria-label": "ariaLabel()", "class": "hostClasses()", "attr.data-appearance": "appearance()", "attr.data-position": "position()", "attr.data-expanded": "isExpanded()", "hidden": "isMobile()" } }, viewQueries: [{ propertyName: "drawerTpl", first: true, predicate: ["drawerTpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: SidebarComponent, isStandalone: true, selector: "sidebar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, navigationId: { classPropertyName: "navigationId", publicName: "navigationId", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, autoMobile: { classPropertyName: "autoMobile", publicName: "autoMobile", isSignal: true, isRequired: false, transformFunction: null }, autoRegister: { classPropertyName: "autoRegister", publicName: "autoRegister", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, listeners: { "mouseenter": "onHoverEnter()", "mouseleave": "onHoverLeave()", "focusin": "onHoverEnter()", "click": "onHostClick($event)" }, properties: { "attr.aria-label": "ariaLabel()", "class": "hostClasses()", "attr.data-appearance": "resolvedAppearance()", "attr.data-position": "position()", "attr.data-expanded": "isExpanded()", "hidden": "isMobile()" } }, viewQueries: [{ propertyName: "drawerTpl", first: true, predicate: ["drawerTpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div [class]="innerClasses()">
       <ng-container [ngTemplateOutlet]="body" />
     </div>
 
     <ng-template #body>
       @if (header()) {
-        <div class="flex h-12 items-center gap-2 border-b border-border">
-          <ng-content select="[ui-sidebar-header]" />
+        <div [class]="headerClasses()">
+          <div [class]="headerSlotClasses()">
+            <ng-content select="[sidebar-header]" />
+          </div>
+          @if (!isMobile() && !isCompact()) {
+            <button
+              type="button"
+              data-sidebar-toggle
+              class="ml-auto mr-2 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+              [attr.aria-label]="toggleButtonLabel()"
+              [attr.title]="toggleButtonLabel()"
+              [attr.aria-pressed]="resolvedAppearance() === 'thin'"
+              (click)="toggleAppearance($event)">
+              <ui-nav-icon name="view_sidebar" [size]="18" class="text-current" />
+            </button>
+          }
         </div>
       }
-      <nav class="flex-1 overflow-y-auto overflow-x-hidden">
+      <nav [class]="navClasses()">
         @for (item of resolvedItems(); track item.id) {
           <ui-nav-item [item]="item" [compact]="isCompact()" />
         }
       </nav>
-      <div class="border-t border-border h-12">
-        <ng-content select="[ui-sidebar-footer]" />
+      <div [class]="footerClasses()">
+        <div [class]="footerSlotClasses()">
+          <ng-content select="[sidebar-footer]" />
+        </div>
       </div>
     </ng-template>
 
@@ -837,25 +995,25 @@ class SidebarComponent {
         role="dialog"
         aria-modal="true"
         [attr.aria-label]="ariaLabel()"
-        class="flex h-full w-72 max-w-[85vw] flex-col border-border bg-background text-foreground shadow-xl"
+        class="flex h-full w-72 max-w-[85vw] flex-col text-foreground shadow-xl"
         [class.border-l]="position() === 'right'"
-        [class.border-r]="position() !== 'right'">
+        [class.border-brand]="position() === 'right'">
         <ng-container [ngTemplateOutlet]="body" />
       </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UiNavItemComponent, selector: "ui-nav-item", inputs: ["item", "level", "compact"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UiNavIconComponent, selector: "ui-nav-icon", inputs: ["name", "class", "size"] }, { kind: "component", type: UiNavItemComponent, selector: "ui-nav-item", inputs: ["item", "level", "compact"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SidebarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SidebarComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ui-sidebar',
+                    selector: 'sidebar',
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [NgTemplateOutlet, UiNavItemComponent],
+                    imports: [NgTemplateOutlet, UiNavIconComponent, UiNavItemComponent],
                     host: {
                         role: 'navigation',
                         '[attr.aria-label]': 'ariaLabel()',
                         '[class]': 'hostClasses()',
-                        '[attr.data-appearance]': 'appearance()',
+                        '[attr.data-appearance]': 'resolvedAppearance()',
                         '[attr.data-position]': 'position()',
                         '[attr.data-expanded]': 'isExpanded()',
                         '[hidden]': 'isMobile()',
@@ -871,17 +1029,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 
     <ng-template #body>
       @if (header()) {
-        <div class="flex h-12 items-center gap-2 border-b border-border">
-          <ng-content select="[ui-sidebar-header]" />
+        <div [class]="headerClasses()">
+          <div [class]="headerSlotClasses()">
+            <ng-content select="[sidebar-header]" />
+          </div>
+          @if (!isMobile() && !isCompact()) {
+            <button
+              type="button"
+              data-sidebar-toggle
+              class="ml-auto mr-2 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+              [attr.aria-label]="toggleButtonLabel()"
+              [attr.title]="toggleButtonLabel()"
+              [attr.aria-pressed]="resolvedAppearance() === 'thin'"
+              (click)="toggleAppearance($event)">
+              <ui-nav-icon name="view_sidebar" [size]="18" class="text-current" />
+            </button>
+          }
         </div>
       }
-      <nav class="flex-1 overflow-y-auto overflow-x-hidden">
+      <nav [class]="navClasses()">
         @for (item of resolvedItems(); track item.id) {
           <ui-nav-item [item]="item" [compact]="isCompact()" />
         }
       </nav>
-      <div class="border-t border-border h-12">
-        <ng-content select="[ui-sidebar-footer]" />
+      <div [class]="footerClasses()">
+        <div [class]="footerSlotClasses()">
+          <ng-content select="[sidebar-footer]" />
+        </div>
       </div>
     </ng-template>
 
@@ -890,9 +1064,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         role="dialog"
         aria-modal="true"
         [attr.aria-label]="ariaLabel()"
-        class="flex h-full w-72 max-w-[85vw] flex-col border-border bg-background text-foreground shadow-xl"
+        class="flex h-full w-72 max-w-[85vw] flex-col text-foreground shadow-xl"
         [class.border-l]="position() === 'right'"
-        [class.border-r]="position() !== 'right'">
+        [class.border-brand]="position() === 'right'">
         <ng-container [ngTemplateOutlet]="body" />
       </div>
     </ng-template>
@@ -902,10 +1076,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 
 /**
  * Horizontal navigation (topbar) — shadcn-styled.
- *
- * Variants:
- * - `default`: horizontal list; item `collapsable` buka dropdown
- * - `megamenu`: item `mega` buka panel full-width multi-kolom
  */
 class TopbarComponent {
     nav = inject(NavigationService);
@@ -924,7 +1094,6 @@ class TopbarComponent {
     /** Tampilkan hamburger di `< md` yang men-toggle mobile drawer sidebar. */
     showHamburger = input(true, ...(ngDevMode ? [{ debugName: "showHamburger" }] : /* istanbul ignore next */ []));
     hamburgerLabel = input('Open navigation', ...(ngDevMode ? [{ debugName: "hamburgerLabel" }] : /* istanbul ignore next */ []));
-    topbarHeight = 'var(--layout-topbar-height)';
     /** Resolved items: input jika disediakan, fallback ke registry NavigationService. */
     resolvedItems = computed(() => {
         const explicit = this.items();
@@ -933,7 +1102,6 @@ class TopbarComponent {
     openId = signal(null, ...(ngDevMode ? [{ debugName: "openId" }] : /* istanbul ignore next */ []));
     active = null;
     dropdownTpl = viewChild.required('dropdownTpl');
-    megaTpl = viewChild.required('megaTpl');
     constructor() {
         effect(() => {
             const explicit = this.items();
@@ -943,11 +1111,13 @@ class TopbarComponent {
         this.destroyRef.onDestroy(() => this.closeAll());
     }
     hostClasses = computed(() => {
-        return [
-            'sticky top-0 z-20 flex w-full items-center border-b border-border bg-background text-foreground',
-            this.class(),
-        ].join(' ');
+        return ['sticky top-0 z-20 flex h-11 w-full items-center', this.class()].join(' ');
     }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    endSlotClasses = computed(() => {
+        const base = ['flex h-full shrink-0 items-center justify-end gap-2 overflow-hidden'];
+        base.push('[&>[topbar-end]]:flex', '[&>[topbar-end]]:min-w-0', '[&>[topbar-end]]:max-w-full', '[&>[topbar-end]]:items-center', '[&>[topbar-end]]:justify-end', '[&>[topbar-end]]:gap-2', '[&>[topbar-end]>*]:w-auto', '[&>[topbar-end]>*]:max-w-full', '[&>[topbar-end]>*]:justify-end', '[&>[topbar-end]>*]:gap-0', '[&>[topbar-end]>*]:px-2', '[&>[topbar-end]>*>*:first-child]:ml-auto', '[&>[topbar-end]>*>*:nth-child(n+2)]:hidden');
+        return base.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "endSlotClasses" }] : /* istanbul ignore next */ []));
     asBasic(i) {
         return i;
     }
@@ -957,36 +1127,9 @@ class TopbarComponent {
     asGroup(i) {
         return i;
     }
-    asMega(i) {
-        return i;
-    }
     isItemActive(id) {
         return this.nav.isActive(id);
     }
-    megaGridClasses(columns) {
-        const c = Math.min(Math.max(columns ?? 4, 1), 6);
-        const classes = ['grid', 'gap-6'];
-        switch (c) {
-            case 1:
-                classes.push('grid-cols-1');
-                break;
-            case 2:
-                classes.push('md:grid-cols-2');
-                break;
-            case 3:
-                classes.push('md:grid-cols-3');
-                break;
-            case 5:
-                classes.push('md:grid-cols-5');
-                break;
-            case 6:
-                classes.push('md:grid-cols-6');
-                break;
-            default:
-                classes.push('md:grid-cols-4');
-        }
-        return classes.join(' ');
-    }
     toggleDropdown(trigger, item) {
         if (this.openId() === item.id)
             this.closeAll();
@@ -997,67 +1140,36 @@ class TopbarComponent {
         if (this.openId() === item.id)
             return;
         this.closeAll();
-        this.attach(trigger, item, this.dropdownTpl(), /*fullWidth*/ false);
+        this.attach(trigger, item, this.dropdownTpl());
     }
-    toggleMega(trigger, item) {
-        if (this.openId() === item.id)
-            this.closeAll();
-        else
-            this.openMega(trigger, item);
-    }
-    openMega(trigger, item) {
-        if (this.openId() === item.id)
-            return;
-        this.closeAll();
-        this.attach(trigger, item, this.megaTpl(), /*fullWidth*/ true);
-    }
-    attach(trigger, item, tpl, fullWidth) {
+    attach(trigger, item, tpl) {
         const strategy = this.overlay
             .position()
             .flexibleConnectedTo(trigger)
             .withFlexibleDimensions(false)
             .withPush(false)
-            .withPositions(fullWidth
-            ? [
-                {
-                    originX: 'center',
-                    originY: 'bottom',
-                    overlayX: 'center',
-                    overlayY: 'top',
-                    offsetY: 4,
-                },
-                {
-                    originX: 'center',
-                    originY: 'top',
-                    overlayX: 'center',
-                    overlayY: 'bottom',
-                    offsetY: -4,
-                },
-            ]
-            : [
-                {
-                    originX: 'start',
-                    originY: 'bottom',
-                    overlayX: 'start',
-                    overlayY: 'top',
-                    offsetY: 4,
-                },
-                {
-                    originX: 'start',
-                    originY: 'top',
-                    overlayX: 'start',
-                    overlayY: 'bottom',
-                    offsetY: -4,
-                },
-            ]);
+            .withPositions([
+            {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
+                offsetY: 4,
+            },
+            {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'bottom',
+                offsetY: -4,
+            },
+        ]);
         const ref = this.overlay.create({
             positionStrategy: strategy,
             scrollStrategy: this.overlay.scrollStrategies.reposition(),
             hasBackdrop: true,
             backdropClass: 'cdk-overlay-transparent-backdrop',
-            panelClass: fullWidth ? ['ui-mega-panel'] : ['ui-dropdown-panel'],
-            width: fullWidth ? '100vw' : undefined,
-            maxWidth: fullWidth ? '100vw' : undefined,
+            panelClass: ['ui-dropdown-panel'],
         });
         const portal = new TemplatePortal(tpl, this.vcr, { $implicit: item });
         ref.attach(portal);
@@ -1107,7 +1219,7 @@ class TopbarComponent {
             triggers[nextIndex].focus();
         }
     }
-    /** Arrow-key navigation dalam dropdown/mega panel. */
+    /** Arrow-key navigation dalam dropdown panel. */
     onPanelKeydown(event) {
         const key = event.key;
         if (key !== 'ArrowDown' &&
@@ -1148,10 +1260,10 @@ class TopbarComponent {
         const items = this.collectPanelFocusables(panel);
         items[0]?.focus();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: TopbarComponent, isStandalone: true, selector: "ui-topbar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, navigationId: { classPropertyName: "navigationId", publicName: "navigationId", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, autoRegister: { classPropertyName: "autoRegister", publicName: "autoRegister", isSignal: true, isRequired: false, transformFunction: null }, showHamburger: { classPropertyName: "showHamburger", publicName: "showHamburger", isSignal: true, isRequired: false, transformFunction: null }, hamburgerLabel: { classPropertyName: "hamburgerLabel", publicName: "hamburgerLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "ariaLabel()", "class": "hostClasses()", "attr.data-appearance": "appearance()", "style.height": "topbarHeight" } }, viewQueries: [{ propertyName: "dropdownTpl", first: true, predicate: ["dropdownTpl"], descendants: true, isSignal: true }, { propertyName: "megaTpl", first: true, predicate: ["megaTpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: TopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: TopbarComponent, isStandalone: true, selector: "topbar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, navigationId: { classPropertyName: "navigationId", publicName: "navigationId", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, autoRegister: { classPropertyName: "autoRegister", publicName: "autoRegister", isSignal: true, isRequired: false, transformFunction: null }, showHamburger: { classPropertyName: "showHamburger", publicName: "showHamburger", isSignal: true, isRequired: false, transformFunction: null }, hamburgerLabel: { classPropertyName: "hamburgerLabel", publicName: "hamburgerLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "ariaLabel()", "class": "hostClasses()", "attr.data-appearance": "appearance()" } }, viewQueries: [{ propertyName: "dropdownTpl", first: true, predicate: ["dropdownTpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="flex h-full w-full items-center gap-3 px-1">
-      <div data-ui-topbar-slot="start" class="flex shrink-0 items-center gap-2">
+      <div data-topbar-slot="start" class="flex shrink-0 items-center gap-2">
         @if (showHamburger()) {
           <button
             type="button"
@@ -1162,10 +1274,10 @@ class TopbarComponent {
             <ui-nav-icon name="menu" [size]="18" />
           </button>
         }
-        <ng-content select="[ui-topbar-start]" />
+        <ng-content select="[topbar-start]" />
       </div>
 
-      <div data-ui-topbar-slot="nav" class="flex min-w-0 flex-1 items-center justify-center">
+      <div data-topbar-slot="nav" class="flex min-w-0 flex-1 items-center justify-center">
         <ul
           class="flex min-w-0 flex-1 items-center justify-center gap-1"
           role="menubar"
@@ -1228,25 +1340,6 @@ class TopbarComponent {
                     <ui-nav-icon name="expand_more" [size]="18" />
                   </button>
                 }
-                @case ('mega') {
-                  @let mega = asMega(item);
-                  <button
-                    #trigger
-                    type="button"
-                    role="menuitem"
-                    class="ui-nav-text inline-flex items-center gap-2 rounded-md px-3 py-2 text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                    [class.text-primary]="isItemActive(mega.id)"
-                    [attr.aria-expanded]="openId() === mega.id"
-                    [attr.aria-haspopup]="'menu'"
-                    (click)="toggleMega(trigger, item)"
-                    (mouseenter)="openMega(trigger, item)">
-                    @if (mega.icon) {
-                      <ui-nav-icon [name]="mega.icon" [size]="18" />
-                    }
-                    <span>{{ mega.title }}</span>
-                    <ui-nav-icon name="expand_more" [size]="18" />
-                  </button>
-                }
                 @default {
                   <span class="ui-nav-heading px-3 py-2 text-muted-foreground">
                     {{ item.title }}
@@ -1258,51 +1351,25 @@ class TopbarComponent {
         </ul>
       </div>
 
-      <div data-ui-topbar-slot="end" class="flex shrink-0 items-center justify-end gap-2">
-        <ng-content select="[ui-topbar-end]" />
+      <div data-topbar-slot="end" [class]="endSlotClasses()">
+        <ng-content select="[topbar-end]" />
       </div>
     </div>
 
     <!-- Dropdown template -->
     <ng-template #dropdownTpl let-item>
-      <div
-        role="menu"
-        class="min-w-56 rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md"
-        (keydown)="onPanelKeydown($event)">
+      <div role="menu" class="min-w-56 border border-brand bg-background/95 p-1" (keydown)="onPanelKeydown($event)">
         @for (child of item.children; track child.id) {
           <ui-nav-item [item]="child" />
         }
       </div>
     </ng-template>
-
-    <!-- Mega panel template -->
-    <ng-template #megaTpl let-item>
-      <div
-        role="menu"
-        class="w-screen max-w-[min(90vw,72rem)] rounded-md border border-border bg-popover p-6 text-popover-foreground shadow-lg"
-        (keydown)="onPanelKeydown($event)">
-        <div [class]="megaGridClasses(item.columns)">
-          @for (col of item.children; track col.id) {
-            <div>
-              <div class="ui-nav-heading mb-2 text-muted-foreground">
-                {{ col.title }}
-              </div>
-              <div class="flex flex-col gap-0.5">
-                @for (leaf of col.children ?? []; track leaf.id) {
-                  <ui-nav-item [item]="leaf" />
-                }
-              </div>
-            </div>
-          }
-        </div>
-      </div>
-    </ng-template>
   `, isInline: true, dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: UiNavIconComponent, selector: "ui-nav-icon", inputs: ["name", "class", "size"] }, { kind: "component", type: UiNavItemComponent, selector: "ui-nav-item", inputs: ["item", "level", "compact"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TopbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: TopbarComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ui-topbar',
+                    selector: 'topbar',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [RouterLink, RouterLinkActive, UiNavIconComponent, UiNavItemComponent],
                     host: {
@@ -1310,11 +1377,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '[attr.aria-label]': 'ariaLabel()',
                         '[class]': 'hostClasses()',
                         '[attr.data-appearance]': 'appearance()',
-                        '[style.height]': 'topbarHeight',
                     },
                     template: `
     <div class="flex h-full w-full items-center gap-3 px-1">
-      <div data-ui-topbar-slot="start" class="flex shrink-0 items-center gap-2">
+      <div data-topbar-slot="start" class="flex shrink-0 items-center gap-2">
         @if (showHamburger()) {
           <button
             type="button"
@@ -1325,10 +1391,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             <ui-nav-icon name="menu" [size]="18" />
           </button>
         }
-        <ng-content select="[ui-topbar-start]" />
+        <ng-content select="[topbar-start]" />
       </div>
 
-      <div data-ui-topbar-slot="nav" class="flex min-w-0 flex-1 items-center justify-center">
+      <div data-topbar-slot="nav" class="flex min-w-0 flex-1 items-center justify-center">
         <ul
           class="flex min-w-0 flex-1 items-center justify-center gap-1"
           role="menubar"
@@ -1391,25 +1457,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     <ui-nav-icon name="expand_more" [size]="18" />
                   </button>
                 }
-                @case ('mega') {
-                  @let mega = asMega(item);
-                  <button
-                    #trigger
-                    type="button"
-                    role="menuitem"
-                    class="ui-nav-text inline-flex items-center gap-2 rounded-md px-3 py-2 text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                    [class.text-primary]="isItemActive(mega.id)"
-                    [attr.aria-expanded]="openId() === mega.id"
-                    [attr.aria-haspopup]="'menu'"
-                    (click)="toggleMega(trigger, item)"
-                    (mouseenter)="openMega(trigger, item)">
-                    @if (mega.icon) {
-                      <ui-nav-icon [name]="mega.icon" [size]="18" />
-                    }
-                    <span>{{ mega.title }}</span>
-                    <ui-nav-icon name="expand_more" [size]="18" />
-                  </button>
-                }
                 @default {
                   <span class="ui-nav-heading px-3 py-2 text-muted-foreground">
                     {{ item.title }}
@@ -1421,48 +1468,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         </ul>
       </div>
 
-      <div data-ui-topbar-slot="end" class="flex shrink-0 items-center justify-end gap-2">
-        <ng-content select="[ui-topbar-end]" />
+      <div data-topbar-slot="end" [class]="endSlotClasses()">
+        <ng-content select="[topbar-end]" />
       </div>
     </div>
 
     <!-- Dropdown template -->
     <ng-template #dropdownTpl let-item>
-      <div
-        role="menu"
-        class="min-w-56 rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md"
-        (keydown)="onPanelKeydown($event)">
+      <div role="menu" class="min-w-56 border border-brand bg-background/95 p-1" (keydown)="onPanelKeydown($event)">
         @for (child of item.children; track child.id) {
           <ui-nav-item [item]="child" />
         }
       </div>
     </ng-template>
-
-    <!-- Mega panel template -->
-    <ng-template #megaTpl let-item>
-      <div
-        role="menu"
-        class="w-screen max-w-[min(90vw,72rem)] rounded-md border border-border bg-popover p-6 text-popover-foreground shadow-lg"
-        (keydown)="onPanelKeydown($event)">
-        <div [class]="megaGridClasses(item.columns)">
-          @for (col of item.children; track col.id) {
-            <div>
-              <div class="ui-nav-heading mb-2 text-muted-foreground">
-                {{ col.title }}
-              </div>
-              <div class="flex flex-col gap-0.5">
-                @for (leaf of col.children ?? []; track leaf.id) {
-                  <ui-nav-item [item]="leaf" />
-                }
-              </div>
-            </div>
-          }
-        </div>
-      </div>
-    </ng-template>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], navigationId: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigationId", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], autoRegister: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoRegister", required: false }] }], showHamburger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHamburger", required: false }] }], hamburgerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hamburgerLabel", required: false }] }], dropdownTpl: [{ type: i0.ViewChild, args: ['dropdownTpl', { isSignal: true }] }], megaTpl: [{ type: i0.ViewChild, args: ['megaTpl', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], navigationId: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigationId", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], autoRegister: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoRegister", required: false }] }], showHamburger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHamburger", required: false }] }], hamburgerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hamburgerLabel", required: false }] }], dropdownTpl: [{ type: i0.ViewChild, args: ['dropdownTpl', { isSignal: true }] }] } });
 
 const DemoNavigationData = [
     {