@life-cockpit/angular-ui-kit 1.4.0 → 1.6.0

package/fesm2022/life-cockpit-angular-ui-kit.mjs

@@ -5705,6 +5705,12 @@ class HeaderComponent {
      * Logo image source URL
      */
     logo = '';
+    /**
+     * Whether to show the logo in the header.
+     * Set to false when the sidenav owns the logo (sidebar-first layout).
+     * @default true
+     */
+    showLogo = true;
     /**
      * Optional title to display next to logo
      */
@@ -5855,7 +5861,7 @@ class HeaderComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: HeaderComponent, isStandalone: true, selector: "lc-header", inputs: { theme: "theme", logo: "logo", title: "title", subtitle: "subtitle", userEmail: "userEmail", userName: "userName", showHamburger: "showHamburger", showThemeButton: "showThemeButton", contextName: "contextName", contextLabel: "contextLabel", menuSize: "menuSize", showProfileMenuItem: "showProfileMenuItem" }, outputs: { hamburgerClick: "hamburgerClick", themeToggleClick: "themeToggleClick", logoutClick: "logoutClick", profileClick: "profileClick", contextClick: "contextClick" }, host: { classAttribute: "lc-header-host" }, ngImport: i0, template: "<header class=\"lc-header\" [class.lc-header--dark]=\"theme === 'dark'\" [class.lc-header--light]=\"theme === 'light'\">\n  <!-- Hamburger menu icon (mobile only) -->\n  @if (showHamburger) {\n    <lc-button\n      variant=\"ghost\"\n      size=\"sm\"\n      [iconOnly]=\"true\"\n      [ariaLabel]=\"'Toggle sidebar menu'\"\n      (clicked)=\"onHamburgerClick()\"\n      class=\"lc-header__hamburger\"\n    >\n      <lc-icon name=\"bars-3\" size=\"sm\" />\n    </lc-button>\n  }\n\n  <!-- Logo (clickable, navigates to home) -->\n  <div class=\"lc-header__brand\">\n    @if (logo || title) {\n      <a routerLink=\"/\" class=\"lc-header__logo\" aria-label=\"Go to home\">\n        <lc-logo [variant]=\"logo ? 'full' : 'emblem'\" size=\"md\" [clickable]=\"false\" [colorMode]=\"theme === 'dark' ? 'dark' : theme === 'light' ? 'light' : 'auto'\" />\n      </a>\n    }\n    \n    @if (title) {\n      <div class=\"lc-header__title-group\">\n        <h1 class=\"lc-header__title\">{{ title }}</h1>\n        @if (subtitle) {\n          <span class=\"lc-header__subtitle\">{{ subtitle }}</span>\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"lc-header__spacer\"></div>\n\n  <!-- Theme toggle button -->\n  @if (showThemeButton) {\n    <lc-button\n      variant=\"ghost\"\n      size=\"sm\"\n      [iconOnly]=\"true\"\n      [ariaLabel]=\"themeService.isDark() ? 'Switch to light mode' : 'Switch to dark mode'\"\n      (clicked)=\"onThemeButtonClick()\"\n      class=\"lc-header__theme-toggle\"\n    >\n      <lc-icon [name]=\"themeService.isDark() ? 'sun' : 'moon'\" size=\"sm\" />\n    </lc-button>\n  }\n\n  <!-- Context info (e.g. tenant, organization, project) -->\n  @if (contextName) {\n    <button\n      type=\"button\"\n      class=\"lc-header__context-info\"\n      [attr.title]=\"contextName\"\n      aria-label=\"Context info\"\n      (click)=\"contextClick.emit()\"\n    >\n      @if (contextLabel) {\n        <span class=\"lc-header__context-label\">{{ contextLabel }}</span>\n      }\n      <span class=\"lc-header__context-name\">{{ contextName }}</span>\n    </button>\n  }\n\n  <!-- User profile menu -->\n  <lc-menu\n    [items]=\"menuItems()\"\n    [isOpen]=\"isDropdownOpen()\"\n    position=\"bottom-right\"\n    minWidth=\"220px\"\n    [size]=\"menuSize\"\n    (itemClick)=\"onMenuItemClick($event)\"\n    (closed)=\"closeDropdown()\"\n  >\n    <!-- Menu header with avatar, name and email -->\n    @if (userName || userEmail) {\n      <div header class=\"lc-header__menu-header\">\n        <lc-avatar [name]=\"userName\" size=\"md\" />\n        <div class=\"lc-header__menu-user-info\">\n          @if (userName) {\n            <div class=\"lc-header__menu-user-name\">{{ userName }}</div>\n          }\n          @if (userEmail) {\n            <div class=\"lc-header__menu-user-email\">{{ userEmail }}</div>\n          }\n        </div>\n      </div>\n    }\n\n    <button\n      trigger\n      class=\"lc-header__profile-trigger\"\n      type=\"button\"\n      aria-label=\"Open user menu\"\n      [attr.aria-expanded]=\"isDropdownOpen()\"\n      (click)=\"toggleDropdown()\"\n    >\n      <lc-icon name=\"user\" size=\"sm\" />\n      <lc-icon name=\"chevron-down\" size=\"xs\" />\n    </button>\n  </lc-menu>\n</header>\n", styles: [".lc-header{--lc-header-bg: var(--color-neutral-0, #ffffff);--lc-header-fg: var(--color-neutral-900, #111827);--lc-header-fg-secondary: var(--color-neutral-600, #4b5563);--lc-header-border: var(--color-neutral-200, #e5e7eb);--lc-header-hover-bg: var(--color-neutral-100, #f3f4f6);--lc-header-trigger-border: var(--color-neutral-200, #e5e7eb);--lc-header-trigger-fg: var(--color-neutral-700, #374151);display:flex;align-items:center;gap:var(--spacing-4);padding:var(--spacing-3) var(--spacing-6);background-color:var(--lc-header-bg);border-bottom:1px solid var(--lc-header-border);height:64px;position:sticky;top:0;z-index:1000}@media(max-width:768px){.lc-header{padding:var(--spacing-3) var(--spacing-4)}}.lc-header--dark{--lc-header-bg: #18181b;--lc-header-fg: #f5f5f5;--lc-header-fg-secondary: #a1a1aa;--lc-header-border: #27272a;--lc-header-hover-bg: #27272a;--lc-header-trigger-border: #52525b;--lc-header-trigger-fg: #e4e4e7}.lc-header--light{--lc-header-bg: var(--color-neutral-0, #ffffff);--lc-header-fg: var(--color-neutral-900, #111827);--lc-header-fg-secondary: var(--color-neutral-600, #4b5563);--lc-header-border: var(--color-neutral-200, #e5e7eb);--lc-header-hover-bg: var(--color-neutral-100, #f3f4f6);--lc-header-trigger-border: var(--color-neutral-200, #e5e7eb);--lc-header-trigger-fg: var(--color-neutral-700, #374151)}html.dark .lc-header:not(.lc-header--light),:root.dark .lc-header:not(.lc-header--light),.dark .lc-header:not(.lc-header--light){--lc-header-bg: #18181b;--lc-header-fg: #f5f5f5;--lc-header-fg-secondary: #a1a1aa;--lc-header-border: #27272a;--lc-header-hover-bg: #27272a;--lc-header-trigger-border: #52525b;--lc-header-trigger-fg: #e4e4e7}.lc-header__hamburger{display:flex;align-items:center;justify-content:center;padding:var(--spacing-2);background:transparent;border:none;cursor:pointer;color:var(--lc-header-trigger-fg);border-radius:var(--radius-md);transition:background-color .2s ease,color .2s ease}.lc-header__hamburger:hover{background-color:var(--lc-header-hover-bg);color:var(--lc-header-fg)}.lc-header__hamburger:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-header__hamburger .lc-icon{width:24px;height:24px}.lc-header__brand{display:flex;align-items:center;gap:var(--spacing-3)}.lc-header__logo{display:flex;align-items:center;text-decoration:none;color:var(--lc-header-fg);flex-shrink:0}.lc-header__logo:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:4px;border-radius:var(--radius-sm)}.lc-header__logo-img{height:32px;width:auto}.lc-header__title-group{display:flex;flex-direction:column;gap:.125rem}.lc-header__title{font-size:1.25rem;font-weight:700;color:var(--lc-header-fg);margin:0;line-height:1.2;transition:color .2s ease}@media(max-width:640px){.lc-header__title{font-size:1.125rem}}.lc-header__subtitle{font-size:.75rem;font-weight:500;color:var(--lc-header-fg-secondary);text-transform:uppercase;letter-spacing:.05em;transition:color .2s ease}.lc-header__spacer{flex:1}.lc-header__theme-toggle{color:var(--lc-header-trigger-fg)}.lc-header__context-info{display:flex;flex-direction:column;align-items:flex-end;gap:.0625rem;padding:var(--spacing-2) var(--spacing-3);background:transparent;border:none;cursor:pointer;border-radius:var(--radius-md);color:var(--lc-header-trigger-fg);transition:background-color .2s ease,color .2s ease;max-width:220px;min-width:0}.lc-header__context-info:hover{background-color:var(--lc-header-hover-bg)}.lc-header__context-info:hover .lc-header__context-name{color:var(--lc-header-fg)}.lc-header__context-info:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}@media(max-width:640px){.lc-header__context-info{display:none}}.lc-header__context-label{font-size:var(--font-size-xs);font-weight:500;color:var(--lc-header-fg-secondary);text-transform:uppercase;letter-spacing:.05em;line-height:1.2}.lc-header__context-name{font-size:var(--font-size-sm);font-weight:600;color:var(--lc-header-fg);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.lc-header--dark .lc-header__theme-toggle lc-icon,.lc-header--dark .lc-header__theme-toggle .lc-icon,.lc-header--dark .lc-header__theme-toggle svg,.lc-header--dark .lc-header__hamburger lc-icon,.lc-header--dark .lc-header__hamburger .lc-icon,.lc-header--dark .lc-header__hamburger svg,.lc-header--dark .lc-header__profile-trigger lc-icon,.lc-header--dark .lc-header__profile-trigger .lc-icon,.lc-header--dark .lc-header__profile-trigger svg,html.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle .lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle svg,html.dark .lc-header:not(.lc-header--light) .lc-header__hamburger lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__hamburger .lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__hamburger svg,html.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger .lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger svg,:root.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle .lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle svg,:root.dark .lc-header:not(.lc-header--light) .lc-header__hamburger lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__hamburger .lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__hamburger svg,:root.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger .lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger svg,.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle .lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle svg,.dark .lc-header:not(.lc-header--light) .lc-header__hamburger lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__hamburger .lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__hamburger svg,.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger .lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger svg{color:var(--lc-header-trigger-fg)}.lc-header--dark lc-button,html.dark .lc-header:not(.lc-header--light) lc-button,:root.dark .lc-header:not(.lc-header--light) lc-button,.dark .lc-header:not(.lc-header--light) lc-button{--lc-button-ghost-fg: var(--lc-header-trigger-fg);--lc-button-ghost-hover-bg: var(--lc-header-hover-bg);--lc-button-ghost-hover-fg: var(--lc-header-fg);--lc-button-ghost-active-bg: var(--lc-header-hover-bg)}.lc-header__profile-trigger{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3);background:transparent;border:1px solid var(--lc-header-trigger-border);border-radius:var(--radius-full);cursor:pointer;color:var(--lc-header-trigger-fg);transition:background-color .2s ease,border-color .2s ease}.lc-header__profile-trigger:hover{background-color:var(--lc-header-hover-bg);border-color:var(--lc-header-fg-secondary)}.lc-header__profile-trigger:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-menu__header{padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-sm);color:var(--color-text-secondary, #6b7280);border-bottom:1px solid var(--color-divider, #e5e7eb);margin-bottom:var(--spacing-1);word-break:break-word}.lc-header__menu-header{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--spacing-4);border-bottom:1px solid var(--color-divider, #e5e7eb);margin-bottom:var(--spacing-1)}.lc-header__menu-user-info{flex:1;min-width:0}.lc-header__menu-user-name{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text, #111827);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}.lc-header__menu-user-email{font-size:var(--font-size-xs);color:var(--color-text-secondary, #6b7280);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ButtonComponent, selector: "lc-button", inputs: ["variant", "size", "disabled", "loading", "isLoading", "iconOnly", "fullWidth", "ariaLabel", "type"], outputs: ["clicked", "focused", "blurred"] }, { kind: "component", type: LogoComponent, selector: "lc-logo", inputs: ["variant", "size", "alt", "clickable", "colorMode"] }, { kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }, { kind: "component", type: AvatarComponent, selector: "lc-avatar", inputs: ["src", "alt", "name", "size", "status"] }, { kind: "component", type: MenuComponent, selector: "lc-menu", inputs: ["items", "isOpen", "position", "size", "minWidth"], outputs: ["itemClick", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: HeaderComponent, isStandalone: true, selector: "lc-header", inputs: { theme: "theme", logo: "logo", showLogo: "showLogo", title: "title", subtitle: "subtitle", userEmail: "userEmail", userName: "userName", showHamburger: "showHamburger", showThemeButton: "showThemeButton", contextName: "contextName", contextLabel: "contextLabel", menuSize: "menuSize", showProfileMenuItem: "showProfileMenuItem" }, outputs: { hamburgerClick: "hamburgerClick", themeToggleClick: "themeToggleClick", logoutClick: "logoutClick", profileClick: "profileClick", contextClick: "contextClick" }, host: { classAttribute: "lc-header-host" }, ngImport: i0, template: "<header class=\"lc-header\" [class.lc-header--dark]=\"theme === 'dark'\" [class.lc-header--light]=\"theme === 'light'\">\n  <!-- Hamburger menu icon (mobile only) -->\n  @if (showHamburger) {\n    <lc-button\n      variant=\"ghost\"\n      size=\"sm\"\n      [iconOnly]=\"true\"\n      [ariaLabel]=\"'Toggle sidebar menu'\"\n      (clicked)=\"onHamburgerClick()\"\n      class=\"lc-header__hamburger\"\n    >\n      <lc-icon name=\"bars-3\" size=\"sm\" />\n    </lc-button>\n  }\n\n  <!-- Logo (clickable, navigates to home) -->\n  <div class=\"lc-header__brand\">\n    @if (showLogo && (logo || title)) {\n      <a routerLink=\"/\" class=\"lc-header__logo\" aria-label=\"Go to home\">\n        <lc-logo [variant]=\"logo ? 'full' : 'emblem'\" size=\"md\" [clickable]=\"false\" [colorMode]=\"theme === 'dark' ? 'dark' : theme === 'light' ? 'light' : 'auto'\" />\n      </a>\n    }\n    \n    @if (title) {\n      <div class=\"lc-header__title-group\">\n        <h1 class=\"lc-header__title\">{{ title }}</h1>\n        @if (subtitle) {\n          <span class=\"lc-header__subtitle\">{{ subtitle }}</span>\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"lc-header__spacer\"></div>\n\n  <!-- Theme toggle button -->\n  @if (showThemeButton) {\n    <lc-button\n      variant=\"ghost\"\n      size=\"sm\"\n      [iconOnly]=\"true\"\n      [ariaLabel]=\"themeService.isDark() ? 'Switch to light mode' : 'Switch to dark mode'\"\n      (clicked)=\"onThemeButtonClick()\"\n      class=\"lc-header__theme-toggle\"\n    >\n      <lc-icon [name]=\"themeService.isDark() ? 'sun' : 'moon'\" size=\"sm\" />\n    </lc-button>\n  }\n\n  <!-- Context info (e.g. tenant, organization, project) -->\n  @if (contextName) {\n    <button\n      type=\"button\"\n      class=\"lc-header__context-info\"\n      [attr.title]=\"contextName\"\n      aria-label=\"Context info\"\n      (click)=\"contextClick.emit()\"\n    >\n      @if (contextLabel) {\n        <span class=\"lc-header__context-label\">{{ contextLabel }}</span>\n      }\n      <span class=\"lc-header__context-name\">{{ contextName }}</span>\n    </button>\n  }\n\n  <!-- User profile menu -->\n  <lc-menu\n    [items]=\"menuItems()\"\n    [isOpen]=\"isDropdownOpen()\"\n    position=\"bottom-right\"\n    minWidth=\"220px\"\n    [size]=\"menuSize\"\n    (itemClick)=\"onMenuItemClick($event)\"\n    (closed)=\"closeDropdown()\"\n  >\n    <!-- Menu header with avatar, name and email -->\n    @if (userName || userEmail) {\n      <div header class=\"lc-header__menu-header\">\n        <lc-avatar [name]=\"userName\" size=\"md\" />\n        <div class=\"lc-header__menu-user-info\">\n          @if (userName) {\n            <div class=\"lc-header__menu-user-name\">{{ userName }}</div>\n          }\n          @if (userEmail) {\n            <div class=\"lc-header__menu-user-email\">{{ userEmail }}</div>\n          }\n        </div>\n      </div>\n    }\n\n    <button\n      trigger\n      class=\"lc-header__profile-trigger\"\n      type=\"button\"\n      aria-label=\"Open user menu\"\n      [attr.aria-expanded]=\"isDropdownOpen()\"\n      (click)=\"toggleDropdown()\"\n    >\n      <lc-icon name=\"user\" size=\"sm\" />\n      <lc-icon name=\"chevron-down\" size=\"xs\" />\n    </button>\n  </lc-menu>\n</header>\n", styles: [".lc-header{--lc-header-bg: var(--color-neutral-0, #ffffff);--lc-header-fg: var(--color-neutral-900, #111827);--lc-header-fg-secondary: var(--color-neutral-600, #4b5563);--lc-header-border: var(--color-neutral-200, #e5e7eb);--lc-header-hover-bg: var(--color-neutral-100, #f3f4f6);--lc-header-trigger-border: var(--color-neutral-200, #e5e7eb);--lc-header-trigger-fg: var(--color-neutral-700, #374151);display:flex;align-items:center;gap:var(--spacing-4);padding:var(--spacing-3) var(--spacing-6);background-color:var(--lc-header-bg);border-bottom:1px solid var(--lc-header-border);height:64px;position:sticky;top:0;z-index:1000}@media(max-width:768px){.lc-header{padding:var(--spacing-3) var(--spacing-4)}}.lc-header--dark{--lc-header-bg: #18181b;--lc-header-fg: #f5f5f5;--lc-header-fg-secondary: #a1a1aa;--lc-header-border: #27272a;--lc-header-hover-bg: #27272a;--lc-header-trigger-border: #52525b;--lc-header-trigger-fg: #e4e4e7}.lc-header--light{--lc-header-bg: var(--color-neutral-0, #ffffff);--lc-header-fg: var(--color-neutral-900, #111827);--lc-header-fg-secondary: var(--color-neutral-600, #4b5563);--lc-header-border: var(--color-neutral-200, #e5e7eb);--lc-header-hover-bg: var(--color-neutral-100, #f3f4f6);--lc-header-trigger-border: var(--color-neutral-200, #e5e7eb);--lc-header-trigger-fg: var(--color-neutral-700, #374151)}html.dark .lc-header:not(.lc-header--light),:root.dark .lc-header:not(.lc-header--light),.dark .lc-header:not(.lc-header--light){--lc-header-bg: #18181b;--lc-header-fg: #f5f5f5;--lc-header-fg-secondary: #a1a1aa;--lc-header-border: #27272a;--lc-header-hover-bg: #27272a;--lc-header-trigger-border: #52525b;--lc-header-trigger-fg: #e4e4e7}.lc-header__hamburger{display:flex;align-items:center;justify-content:center;padding:var(--spacing-2);background:transparent;border:none;cursor:pointer;color:var(--lc-header-trigger-fg);border-radius:var(--radius-md);transition:background-color .2s ease,color .2s ease}.lc-header__hamburger:hover{background-color:var(--lc-header-hover-bg);color:var(--lc-header-fg)}.lc-header__hamburger:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-header__hamburger .lc-icon{width:24px;height:24px}.lc-header__brand{display:flex;align-items:center;gap:var(--spacing-3)}.lc-header__logo{display:flex;align-items:center;text-decoration:none;color:var(--lc-header-fg);flex-shrink:0}.lc-header__logo:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:4px;border-radius:var(--radius-sm)}.lc-header__logo-img{height:32px;width:auto}.lc-header__title-group{display:flex;flex-direction:column;gap:.125rem}.lc-header__title{font-size:1.25rem;font-weight:700;color:var(--lc-header-fg);margin:0;line-height:1.2;transition:color .2s ease}@media(max-width:640px){.lc-header__title{font-size:1.125rem}}.lc-header__subtitle{font-size:.75rem;font-weight:500;color:var(--lc-header-fg-secondary);text-transform:uppercase;letter-spacing:.05em;transition:color .2s ease}.lc-header__spacer{flex:1}.lc-header__theme-toggle{color:var(--lc-header-trigger-fg)}.lc-header__context-info{display:flex;flex-direction:column;align-items:flex-end;gap:.0625rem;padding:var(--spacing-2) var(--spacing-3);background:transparent;border:none;cursor:pointer;border-radius:var(--radius-md);color:var(--lc-header-trigger-fg);transition:background-color .2s ease,color .2s ease;max-width:220px;min-width:0}.lc-header__context-info:hover{background-color:var(--lc-header-hover-bg)}.lc-header__context-info:hover .lc-header__context-name{color:var(--lc-header-fg)}.lc-header__context-info:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}@media(max-width:640px){.lc-header__context-info{display:none}}.lc-header__context-label{font-size:var(--font-size-xs);font-weight:500;color:var(--lc-header-fg-secondary);text-transform:uppercase;letter-spacing:.05em;line-height:1.2}.lc-header__context-name{font-size:var(--font-size-sm);font-weight:600;color:var(--lc-header-fg);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.lc-header--dark .lc-header__theme-toggle lc-icon,.lc-header--dark .lc-header__theme-toggle .lc-icon,.lc-header--dark .lc-header__theme-toggle svg,.lc-header--dark .lc-header__hamburger lc-icon,.lc-header--dark .lc-header__hamburger .lc-icon,.lc-header--dark .lc-header__hamburger svg,.lc-header--dark .lc-header__profile-trigger lc-icon,.lc-header--dark .lc-header__profile-trigger .lc-icon,.lc-header--dark .lc-header__profile-trigger svg,html.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle .lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle svg,html.dark .lc-header:not(.lc-header--light) .lc-header__hamburger lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__hamburger .lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__hamburger svg,html.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger .lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger svg,:root.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle .lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle svg,:root.dark .lc-header:not(.lc-header--light) .lc-header__hamburger lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__hamburger .lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__hamburger svg,:root.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger .lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger svg,.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle .lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle svg,.dark .lc-header:not(.lc-header--light) .lc-header__hamburger lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__hamburger .lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__hamburger svg,.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger .lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger svg{color:var(--lc-header-trigger-fg)}.lc-header--dark lc-button,html.dark .lc-header:not(.lc-header--light) lc-button,:root.dark .lc-header:not(.lc-header--light) lc-button,.dark .lc-header:not(.lc-header--light) lc-button{--lc-button-ghost-fg: var(--lc-header-trigger-fg);--lc-button-ghost-hover-bg: var(--lc-header-hover-bg);--lc-button-ghost-hover-fg: var(--lc-header-fg);--lc-button-ghost-active-bg: var(--lc-header-hover-bg)}.lc-header__profile-trigger{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3);background:transparent;border:1px solid var(--lc-header-trigger-border);border-radius:var(--radius-full);cursor:pointer;color:var(--lc-header-trigger-fg);transition:background-color .2s ease,border-color .2s ease}.lc-header__profile-trigger:hover{background-color:var(--lc-header-hover-bg);border-color:var(--lc-header-fg-secondary)}.lc-header__profile-trigger:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-menu__header{padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-sm);color:var(--color-text-secondary, #6b7280);border-bottom:1px solid var(--color-divider, #e5e7eb);margin-bottom:var(--spacing-1);word-break:break-word}.lc-header__menu-header{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--spacing-4);border-bottom:1px solid var(--color-divider, #e5e7eb);margin-bottom:var(--spacing-1)}.lc-header__menu-user-info{flex:1;min-width:0}.lc-header__menu-user-name{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text, #111827);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}.lc-header__menu-user-email{font-size:var(--font-size-xs);color:var(--color-text-secondary, #6b7280);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ButtonComponent, selector: "lc-button", inputs: ["variant", "size", "disabled", "loading", "isLoading", "iconOnly", "fullWidth", "ariaLabel", "type"], outputs: ["clicked", "focused", "blurred"] }, { kind: "component", type: LogoComponent, selector: "lc-logo", inputs: ["variant", "size", "alt", "clickable", "colorMode"] }, { kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }, { kind: "component", type: AvatarComponent, selector: "lc-avatar", inputs: ["src", "alt", "name", "size", "status"] }, { kind: "component", type: MenuComponent, selector: "lc-menu", inputs: ["items", "isOpen", "position", "size", "minWidth"], outputs: ["itemClick", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
@@ -5869,11 +5875,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                         MenuComponent,
                     ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'lc-header-host',
-                    }, template: "<header class=\"lc-header\" [class.lc-header--dark]=\"theme === 'dark'\" [class.lc-header--light]=\"theme === 'light'\">\n  <!-- Hamburger menu icon (mobile only) -->\n  @if (showHamburger) {\n    <lc-button\n      variant=\"ghost\"\n      size=\"sm\"\n      [iconOnly]=\"true\"\n      [ariaLabel]=\"'Toggle sidebar menu'\"\n      (clicked)=\"onHamburgerClick()\"\n      class=\"lc-header__hamburger\"\n    >\n      <lc-icon name=\"bars-3\" size=\"sm\" />\n    </lc-button>\n  }\n\n  <!-- Logo (clickable, navigates to home) -->\n  <div class=\"lc-header__brand\">\n    @if (logo || title) {\n      <a routerLink=\"/\" class=\"lc-header__logo\" aria-label=\"Go to home\">\n        <lc-logo [variant]=\"logo ? 'full' : 'emblem'\" size=\"md\" [clickable]=\"false\" [colorMode]=\"theme === 'dark' ? 'dark' : theme === 'light' ? 'light' : 'auto'\" />\n      </a>\n    }\n    \n    @if (title) {\n      <div class=\"lc-header__title-group\">\n        <h1 class=\"lc-header__title\">{{ title }}</h1>\n        @if (subtitle) {\n          <span class=\"lc-header__subtitle\">{{ subtitle }}</span>\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"lc-header__spacer\"></div>\n\n  <!-- Theme toggle button -->\n  @if (showThemeButton) {\n    <lc-button\n      variant=\"ghost\"\n      size=\"sm\"\n      [iconOnly]=\"true\"\n      [ariaLabel]=\"themeService.isDark() ? 'Switch to light mode' : 'Switch to dark mode'\"\n      (clicked)=\"onThemeButtonClick()\"\n      class=\"lc-header__theme-toggle\"\n    >\n      <lc-icon [name]=\"themeService.isDark() ? 'sun' : 'moon'\" size=\"sm\" />\n    </lc-button>\n  }\n\n  <!-- Context info (e.g. tenant, organization, project) -->\n  @if (contextName) {\n    <button\n      type=\"button\"\n      class=\"lc-header__context-info\"\n      [attr.title]=\"contextName\"\n      aria-label=\"Context info\"\n      (click)=\"contextClick.emit()\"\n    >\n      @if (contextLabel) {\n        <span class=\"lc-header__context-label\">{{ contextLabel }}</span>\n      }\n      <span class=\"lc-header__context-name\">{{ contextName }}</span>\n    </button>\n  }\n\n  <!-- User profile menu -->\n  <lc-menu\n    [items]=\"menuItems()\"\n    [isOpen]=\"isDropdownOpen()\"\n    position=\"bottom-right\"\n    minWidth=\"220px\"\n    [size]=\"menuSize\"\n    (itemClick)=\"onMenuItemClick($event)\"\n    (closed)=\"closeDropdown()\"\n  >\n    <!-- Menu header with avatar, name and email -->\n    @if (userName || userEmail) {\n      <div header class=\"lc-header__menu-header\">\n        <lc-avatar [name]=\"userName\" size=\"md\" />\n        <div class=\"lc-header__menu-user-info\">\n          @if (userName) {\n            <div class=\"lc-header__menu-user-name\">{{ userName }}</div>\n          }\n          @if (userEmail) {\n            <div class=\"lc-header__menu-user-email\">{{ userEmail }}</div>\n          }\n        </div>\n      </div>\n    }\n\n    <button\n      trigger\n      class=\"lc-header__profile-trigger\"\n      type=\"button\"\n      aria-label=\"Open user menu\"\n      [attr.aria-expanded]=\"isDropdownOpen()\"\n      (click)=\"toggleDropdown()\"\n    >\n      <lc-icon name=\"user\" size=\"sm\" />\n      <lc-icon name=\"chevron-down\" size=\"xs\" />\n    </button>\n  </lc-menu>\n</header>\n", styles: [".lc-header{--lc-header-bg: var(--color-neutral-0, #ffffff);--lc-header-fg: var(--color-neutral-900, #111827);--lc-header-fg-secondary: var(--color-neutral-600, #4b5563);--lc-header-border: var(--color-neutral-200, #e5e7eb);--lc-header-hover-bg: var(--color-neutral-100, #f3f4f6);--lc-header-trigger-border: var(--color-neutral-200, #e5e7eb);--lc-header-trigger-fg: var(--color-neutral-700, #374151);display:flex;align-items:center;gap:var(--spacing-4);padding:var(--spacing-3) var(--spacing-6);background-color:var(--lc-header-bg);border-bottom:1px solid var(--lc-header-border);height:64px;position:sticky;top:0;z-index:1000}@media(max-width:768px){.lc-header{padding:var(--spacing-3) var(--spacing-4)}}.lc-header--dark{--lc-header-bg: #18181b;--lc-header-fg: #f5f5f5;--lc-header-fg-secondary: #a1a1aa;--lc-header-border: #27272a;--lc-header-hover-bg: #27272a;--lc-header-trigger-border: #52525b;--lc-header-trigger-fg: #e4e4e7}.lc-header--light{--lc-header-bg: var(--color-neutral-0, #ffffff);--lc-header-fg: var(--color-neutral-900, #111827);--lc-header-fg-secondary: var(--color-neutral-600, #4b5563);--lc-header-border: var(--color-neutral-200, #e5e7eb);--lc-header-hover-bg: var(--color-neutral-100, #f3f4f6);--lc-header-trigger-border: var(--color-neutral-200, #e5e7eb);--lc-header-trigger-fg: var(--color-neutral-700, #374151)}html.dark .lc-header:not(.lc-header--light),:root.dark .lc-header:not(.lc-header--light),.dark .lc-header:not(.lc-header--light){--lc-header-bg: #18181b;--lc-header-fg: #f5f5f5;--lc-header-fg-secondary: #a1a1aa;--lc-header-border: #27272a;--lc-header-hover-bg: #27272a;--lc-header-trigger-border: #52525b;--lc-header-trigger-fg: #e4e4e7}.lc-header__hamburger{display:flex;align-items:center;justify-content:center;padding:var(--spacing-2);background:transparent;border:none;cursor:pointer;color:var(--lc-header-trigger-fg);border-radius:var(--radius-md);transition:background-color .2s ease,color .2s ease}.lc-header__hamburger:hover{background-color:var(--lc-header-hover-bg);color:var(--lc-header-fg)}.lc-header__hamburger:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-header__hamburger .lc-icon{width:24px;height:24px}.lc-header__brand{display:flex;align-items:center;gap:var(--spacing-3)}.lc-header__logo{display:flex;align-items:center;text-decoration:none;color:var(--lc-header-fg);flex-shrink:0}.lc-header__logo:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:4px;border-radius:var(--radius-sm)}.lc-header__logo-img{height:32px;width:auto}.lc-header__title-group{display:flex;flex-direction:column;gap:.125rem}.lc-header__title{font-size:1.25rem;font-weight:700;color:var(--lc-header-fg);margin:0;line-height:1.2;transition:color .2s ease}@media(max-width:640px){.lc-header__title{font-size:1.125rem}}.lc-header__subtitle{font-size:.75rem;font-weight:500;color:var(--lc-header-fg-secondary);text-transform:uppercase;letter-spacing:.05em;transition:color .2s ease}.lc-header__spacer{flex:1}.lc-header__theme-toggle{color:var(--lc-header-trigger-fg)}.lc-header__context-info{display:flex;flex-direction:column;align-items:flex-end;gap:.0625rem;padding:var(--spacing-2) var(--spacing-3);background:transparent;border:none;cursor:pointer;border-radius:var(--radius-md);color:var(--lc-header-trigger-fg);transition:background-color .2s ease,color .2s ease;max-width:220px;min-width:0}.lc-header__context-info:hover{background-color:var(--lc-header-hover-bg)}.lc-header__context-info:hover .lc-header__context-name{color:var(--lc-header-fg)}.lc-header__context-info:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}@media(max-width:640px){.lc-header__context-info{display:none}}.lc-header__context-label{font-size:var(--font-size-xs);font-weight:500;color:var(--lc-header-fg-secondary);text-transform:uppercase;letter-spacing:.05em;line-height:1.2}.lc-header__context-name{font-size:var(--font-size-sm);font-weight:600;color:var(--lc-header-fg);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.lc-header--dark .lc-header__theme-toggle lc-icon,.lc-header--dark .lc-header__theme-toggle .lc-icon,.lc-header--dark .lc-header__theme-toggle svg,.lc-header--dark .lc-header__hamburger lc-icon,.lc-header--dark .lc-header__hamburger .lc-icon,.lc-header--dark .lc-header__hamburger svg,.lc-header--dark .lc-header__profile-trigger lc-icon,.lc-header--dark .lc-header__profile-trigger .lc-icon,.lc-header--dark .lc-header__profile-trigger svg,html.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle .lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle svg,html.dark .lc-header:not(.lc-header--light) .lc-header__hamburger lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__hamburger .lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__hamburger svg,html.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger .lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger svg,:root.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle .lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle svg,:root.dark .lc-header:not(.lc-header--light) .lc-header__hamburger lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__hamburger .lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__hamburger svg,:root.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger .lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger svg,.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle .lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle svg,.dark .lc-header:not(.lc-header--light) .lc-header__hamburger lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__hamburger .lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__hamburger svg,.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger .lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger svg{color:var(--lc-header-trigger-fg)}.lc-header--dark lc-button,html.dark .lc-header:not(.lc-header--light) lc-button,:root.dark .lc-header:not(.lc-header--light) lc-button,.dark .lc-header:not(.lc-header--light) lc-button{--lc-button-ghost-fg: var(--lc-header-trigger-fg);--lc-button-ghost-hover-bg: var(--lc-header-hover-bg);--lc-button-ghost-hover-fg: var(--lc-header-fg);--lc-button-ghost-active-bg: var(--lc-header-hover-bg)}.lc-header__profile-trigger{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3);background:transparent;border:1px solid var(--lc-header-trigger-border);border-radius:var(--radius-full);cursor:pointer;color:var(--lc-header-trigger-fg);transition:background-color .2s ease,border-color .2s ease}.lc-header__profile-trigger:hover{background-color:var(--lc-header-hover-bg);border-color:var(--lc-header-fg-secondary)}.lc-header__profile-trigger:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-menu__header{padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-sm);color:var(--color-text-secondary, #6b7280);border-bottom:1px solid var(--color-divider, #e5e7eb);margin-bottom:var(--spacing-1);word-break:break-word}.lc-header__menu-header{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--spacing-4);border-bottom:1px solid var(--color-divider, #e5e7eb);margin-bottom:var(--spacing-1)}.lc-header__menu-user-info{flex:1;min-width:0}.lc-header__menu-user-name{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text, #111827);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}.lc-header__menu-user-email{font-size:var(--font-size-xs);color:var(--color-text-secondary, #6b7280);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}\n"] }]
+                    }, template: "<header class=\"lc-header\" [class.lc-header--dark]=\"theme === 'dark'\" [class.lc-header--light]=\"theme === 'light'\">\n  <!-- Hamburger menu icon (mobile only) -->\n  @if (showHamburger) {\n    <lc-button\n      variant=\"ghost\"\n      size=\"sm\"\n      [iconOnly]=\"true\"\n      [ariaLabel]=\"'Toggle sidebar menu'\"\n      (clicked)=\"onHamburgerClick()\"\n      class=\"lc-header__hamburger\"\n    >\n      <lc-icon name=\"bars-3\" size=\"sm\" />\n    </lc-button>\n  }\n\n  <!-- Logo (clickable, navigates to home) -->\n  <div class=\"lc-header__brand\">\n    @if (showLogo && (logo || title)) {\n      <a routerLink=\"/\" class=\"lc-header__logo\" aria-label=\"Go to home\">\n        <lc-logo [variant]=\"logo ? 'full' : 'emblem'\" size=\"md\" [clickable]=\"false\" [colorMode]=\"theme === 'dark' ? 'dark' : theme === 'light' ? 'light' : 'auto'\" />\n      </a>\n    }\n    \n    @if (title) {\n      <div class=\"lc-header__title-group\">\n        <h1 class=\"lc-header__title\">{{ title }}</h1>\n        @if (subtitle) {\n          <span class=\"lc-header__subtitle\">{{ subtitle }}</span>\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"lc-header__spacer\"></div>\n\n  <!-- Theme toggle button -->\n  @if (showThemeButton) {\n    <lc-button\n      variant=\"ghost\"\n      size=\"sm\"\n      [iconOnly]=\"true\"\n      [ariaLabel]=\"themeService.isDark() ? 'Switch to light mode' : 'Switch to dark mode'\"\n      (clicked)=\"onThemeButtonClick()\"\n      class=\"lc-header__theme-toggle\"\n    >\n      <lc-icon [name]=\"themeService.isDark() ? 'sun' : 'moon'\" size=\"sm\" />\n    </lc-button>\n  }\n\n  <!-- Context info (e.g. tenant, organization, project) -->\n  @if (contextName) {\n    <button\n      type=\"button\"\n      class=\"lc-header__context-info\"\n      [attr.title]=\"contextName\"\n      aria-label=\"Context info\"\n      (click)=\"contextClick.emit()\"\n    >\n      @if (contextLabel) {\n        <span class=\"lc-header__context-label\">{{ contextLabel }}</span>\n      }\n      <span class=\"lc-header__context-name\">{{ contextName }}</span>\n    </button>\n  }\n\n  <!-- User profile menu -->\n  <lc-menu\n    [items]=\"menuItems()\"\n    [isOpen]=\"isDropdownOpen()\"\n    position=\"bottom-right\"\n    minWidth=\"220px\"\n    [size]=\"menuSize\"\n    (itemClick)=\"onMenuItemClick($event)\"\n    (closed)=\"closeDropdown()\"\n  >\n    <!-- Menu header with avatar, name and email -->\n    @if (userName || userEmail) {\n      <div header class=\"lc-header__menu-header\">\n        <lc-avatar [name]=\"userName\" size=\"md\" />\n        <div class=\"lc-header__menu-user-info\">\n          @if (userName) {\n            <div class=\"lc-header__menu-user-name\">{{ userName }}</div>\n          }\n          @if (userEmail) {\n            <div class=\"lc-header__menu-user-email\">{{ userEmail }}</div>\n          }\n        </div>\n      </div>\n    }\n\n    <button\n      trigger\n      class=\"lc-header__profile-trigger\"\n      type=\"button\"\n      aria-label=\"Open user menu\"\n      [attr.aria-expanded]=\"isDropdownOpen()\"\n      (click)=\"toggleDropdown()\"\n    >\n      <lc-icon name=\"user\" size=\"sm\" />\n      <lc-icon name=\"chevron-down\" size=\"xs\" />\n    </button>\n  </lc-menu>\n</header>\n", styles: [".lc-header{--lc-header-bg: var(--color-neutral-0, #ffffff);--lc-header-fg: var(--color-neutral-900, #111827);--lc-header-fg-secondary: var(--color-neutral-600, #4b5563);--lc-header-border: var(--color-neutral-200, #e5e7eb);--lc-header-hover-bg: var(--color-neutral-100, #f3f4f6);--lc-header-trigger-border: var(--color-neutral-200, #e5e7eb);--lc-header-trigger-fg: var(--color-neutral-700, #374151);display:flex;align-items:center;gap:var(--spacing-4);padding:var(--spacing-3) var(--spacing-6);background-color:var(--lc-header-bg);border-bottom:1px solid var(--lc-header-border);height:64px;position:sticky;top:0;z-index:1000}@media(max-width:768px){.lc-header{padding:var(--spacing-3) var(--spacing-4)}}.lc-header--dark{--lc-header-bg: #18181b;--lc-header-fg: #f5f5f5;--lc-header-fg-secondary: #a1a1aa;--lc-header-border: #27272a;--lc-header-hover-bg: #27272a;--lc-header-trigger-border: #52525b;--lc-header-trigger-fg: #e4e4e7}.lc-header--light{--lc-header-bg: var(--color-neutral-0, #ffffff);--lc-header-fg: var(--color-neutral-900, #111827);--lc-header-fg-secondary: var(--color-neutral-600, #4b5563);--lc-header-border: var(--color-neutral-200, #e5e7eb);--lc-header-hover-bg: var(--color-neutral-100, #f3f4f6);--lc-header-trigger-border: var(--color-neutral-200, #e5e7eb);--lc-header-trigger-fg: var(--color-neutral-700, #374151)}html.dark .lc-header:not(.lc-header--light),:root.dark .lc-header:not(.lc-header--light),.dark .lc-header:not(.lc-header--light){--lc-header-bg: #18181b;--lc-header-fg: #f5f5f5;--lc-header-fg-secondary: #a1a1aa;--lc-header-border: #27272a;--lc-header-hover-bg: #27272a;--lc-header-trigger-border: #52525b;--lc-header-trigger-fg: #e4e4e7}.lc-header__hamburger{display:flex;align-items:center;justify-content:center;padding:var(--spacing-2);background:transparent;border:none;cursor:pointer;color:var(--lc-header-trigger-fg);border-radius:var(--radius-md);transition:background-color .2s ease,color .2s ease}.lc-header__hamburger:hover{background-color:var(--lc-header-hover-bg);color:var(--lc-header-fg)}.lc-header__hamburger:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-header__hamburger .lc-icon{width:24px;height:24px}.lc-header__brand{display:flex;align-items:center;gap:var(--spacing-3)}.lc-header__logo{display:flex;align-items:center;text-decoration:none;color:var(--lc-header-fg);flex-shrink:0}.lc-header__logo:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:4px;border-radius:var(--radius-sm)}.lc-header__logo-img{height:32px;width:auto}.lc-header__title-group{display:flex;flex-direction:column;gap:.125rem}.lc-header__title{font-size:1.25rem;font-weight:700;color:var(--lc-header-fg);margin:0;line-height:1.2;transition:color .2s ease}@media(max-width:640px){.lc-header__title{font-size:1.125rem}}.lc-header__subtitle{font-size:.75rem;font-weight:500;color:var(--lc-header-fg-secondary);text-transform:uppercase;letter-spacing:.05em;transition:color .2s ease}.lc-header__spacer{flex:1}.lc-header__theme-toggle{color:var(--lc-header-trigger-fg)}.lc-header__context-info{display:flex;flex-direction:column;align-items:flex-end;gap:.0625rem;padding:var(--spacing-2) var(--spacing-3);background:transparent;border:none;cursor:pointer;border-radius:var(--radius-md);color:var(--lc-header-trigger-fg);transition:background-color .2s ease,color .2s ease;max-width:220px;min-width:0}.lc-header__context-info:hover{background-color:var(--lc-header-hover-bg)}.lc-header__context-info:hover .lc-header__context-name{color:var(--lc-header-fg)}.lc-header__context-info:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}@media(max-width:640px){.lc-header__context-info{display:none}}.lc-header__context-label{font-size:var(--font-size-xs);font-weight:500;color:var(--lc-header-fg-secondary);text-transform:uppercase;letter-spacing:.05em;line-height:1.2}.lc-header__context-name{font-size:var(--font-size-sm);font-weight:600;color:var(--lc-header-fg);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.lc-header--dark .lc-header__theme-toggle lc-icon,.lc-header--dark .lc-header__theme-toggle .lc-icon,.lc-header--dark .lc-header__theme-toggle svg,.lc-header--dark .lc-header__hamburger lc-icon,.lc-header--dark .lc-header__hamburger .lc-icon,.lc-header--dark .lc-header__hamburger svg,.lc-header--dark .lc-header__profile-trigger lc-icon,.lc-header--dark .lc-header__profile-trigger .lc-icon,.lc-header--dark .lc-header__profile-trigger svg,html.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle .lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle svg,html.dark .lc-header:not(.lc-header--light) .lc-header__hamburger lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__hamburger .lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__hamburger svg,html.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger .lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger svg,:root.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle .lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle svg,:root.dark .lc-header:not(.lc-header--light) .lc-header__hamburger lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__hamburger .lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__hamburger svg,:root.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger .lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger svg,.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle .lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle svg,.dark .lc-header:not(.lc-header--light) .lc-header__hamburger lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__hamburger .lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__hamburger svg,.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger .lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger svg{color:var(--lc-header-trigger-fg)}.lc-header--dark lc-button,html.dark .lc-header:not(.lc-header--light) lc-button,:root.dark .lc-header:not(.lc-header--light) lc-button,.dark .lc-header:not(.lc-header--light) lc-button{--lc-button-ghost-fg: var(--lc-header-trigger-fg);--lc-button-ghost-hover-bg: var(--lc-header-hover-bg);--lc-button-ghost-hover-fg: var(--lc-header-fg);--lc-button-ghost-active-bg: var(--lc-header-hover-bg)}.lc-header__profile-trigger{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3);background:transparent;border:1px solid var(--lc-header-trigger-border);border-radius:var(--radius-full);cursor:pointer;color:var(--lc-header-trigger-fg);transition:background-color .2s ease,border-color .2s ease}.lc-header__profile-trigger:hover{background-color:var(--lc-header-hover-bg);border-color:var(--lc-header-fg-secondary)}.lc-header__profile-trigger:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-menu__header{padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-sm);color:var(--color-text-secondary, #6b7280);border-bottom:1px solid var(--color-divider, #e5e7eb);margin-bottom:var(--spacing-1);word-break:break-word}.lc-header__menu-header{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--spacing-4);border-bottom:1px solid var(--color-divider, #e5e7eb);margin-bottom:var(--spacing-1)}.lc-header__menu-user-info{flex:1;min-width:0}.lc-header__menu-user-name{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text, #111827);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}.lc-header__menu-user-email{font-size:var(--font-size-xs);color:var(--color-text-secondary, #6b7280);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}\n"] }]
         }], propDecorators: { theme: [{
                 type: Input
             }], logo: [{
                 type: Input
+            }], showLogo: [{
+                type: Input
             }], title: [{
                 type: Input
             }], subtitle: [{
@@ -6083,6 +6091,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 type: Input
             }] } });
 
+/**
+ * Badge component for displaying status, notifications, or counts.
+ *
+ * Features:
+ * - Semantic color variants (primary, secondary, success, warning, error, info, neutral)
+ * - Multiple size options (xs, sm, md, lg)
+ * - Pill-shaped rounded mode
+ * - Content projection for labels or count values
+ *
+ * @example
+ * ```html
+ * <lc-badge variant="primary" size="md">New</lc-badge>
+ * <lc-badge variant="error" size="sm" [rounded]="true">5</lc-badge>
+ * ```
+ */
+class BadgeComponent {
+    /** Visual variant of the badge */
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Size of the badge */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Whether the badge has fully rounded corners (pill shape) */
+    rounded = input(false, ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+    /**
+     * Computed CSS classes for the badge
+     */
+    badgeClasses = computed(() => {
+        const classes = ['lc-badge'];
+        classes.push(`lc-badge--${this.variant()}`);
+        classes.push(`lc-badge--${this.size()}`);
+        if (this.rounded()) {
+            classes.push('lc-badge--rounded');
+        }
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "badgeClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.10", type: BadgeComponent, isStandalone: true, selector: "lc-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span [class]=\"badgeClasses()\">\n  <ng-content></ng-content>\n</span>\n", styles: [".lc-badge{display:inline-flex;align-items:center;justify-content:center;font-weight:var(--typography-font-weight-medium, 500);line-height:1;border-radius:var(--border-radius-sm, .25rem);white-space:nowrap;transition:background-color .15s ease,color .15s ease}.lc-badge--xs{padding:.125rem .375rem;font-size:var(--typography-font-size-xs, .75rem);min-width:1.25rem;height:1.25rem}.lc-badge--sm{padding:.25rem .5rem;font-size:var(--typography-font-size-sm, .875rem);min-width:1.5rem;height:1.5rem}.lc-badge--md{padding:.375rem .625rem;font-size:var(--typography-font-size-sm, .875rem);min-width:1.75rem;height:1.75rem}.lc-badge--lg{padding:.5rem .75rem;font-size:var(--typography-font-size-base, 1rem);min-width:2rem;height:2rem}.lc-badge--default{background-color:var(--color-neutral-200, #e5e7eb);color:var(--color-neutral-800, #1f2937)}[data-theme=dark] .lc-badge--default,:root[data-theme=dark] .lc-badge--default{background-color:var(--color-neutral-700, #374151);color:var(--color-neutral-100, #f3f4f6)}.lc-badge--primary{background-color:var(--color-primary-100, #dbeafe);color:var(--color-primary-800, #1e3a5f)}[data-theme=dark] .lc-badge--primary,:root[data-theme=dark] .lc-badge--primary{background-color:var(--color-primary-900, #1e3a5f);color:var(--color-primary-200, #bfdbfe)}.lc-badge--success{background-color:var(--color-success-light, #dcfce7);color:var(--color-success-dark, #166534)}[data-theme=dark] .lc-badge--success,:root[data-theme=dark] .lc-badge--success{background-color:#22c55e33;color:#86efac}.lc-badge--warning{background-color:var(--color-warning-light, #fef3c7);color:var(--color-warning-dark, #92400e)}[data-theme=dark] .lc-badge--warning,:root[data-theme=dark] .lc-badge--warning{background-color:#fbbf2433;color:#fde047}.lc-badge--error{background-color:var(--color-error-light, #fee2e2);color:var(--color-error-dark, #991b1b)}[data-theme=dark] .lc-badge--error,:root[data-theme=dark] .lc-badge--error{background-color:#ef444433;color:#fca5a5}.lc-badge--info{background-color:var(--color-info-light, #dbeafe);color:var(--color-info-dark, #1e40af)}[data-theme=dark] .lc-badge--info,:root[data-theme=dark] .lc-badge--info{background-color:#3b82f633;color:#93c5fd}.lc-badge--rounded{border-radius:var(--border-radius-full, 9999px)}@media(max-width:640px){.lc-badge--lg{padding:.5rem .875rem}}@media print{.lc-badge{border:1px solid currentColor}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: BadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lc-badge', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<span [class]=\"badgeClasses()\">\n  <ng-content></ng-content>\n</span>\n", styles: [".lc-badge{display:inline-flex;align-items:center;justify-content:center;font-weight:var(--typography-font-weight-medium, 500);line-height:1;border-radius:var(--border-radius-sm, .25rem);white-space:nowrap;transition:background-color .15s ease,color .15s ease}.lc-badge--xs{padding:.125rem .375rem;font-size:var(--typography-font-size-xs, .75rem);min-width:1.25rem;height:1.25rem}.lc-badge--sm{padding:.25rem .5rem;font-size:var(--typography-font-size-sm, .875rem);min-width:1.5rem;height:1.5rem}.lc-badge--md{padding:.375rem .625rem;font-size:var(--typography-font-size-sm, .875rem);min-width:1.75rem;height:1.75rem}.lc-badge--lg{padding:.5rem .75rem;font-size:var(--typography-font-size-base, 1rem);min-width:2rem;height:2rem}.lc-badge--default{background-color:var(--color-neutral-200, #e5e7eb);color:var(--color-neutral-800, #1f2937)}[data-theme=dark] .lc-badge--default,:root[data-theme=dark] .lc-badge--default{background-color:var(--color-neutral-700, #374151);color:var(--color-neutral-100, #f3f4f6)}.lc-badge--primary{background-color:var(--color-primary-100, #dbeafe);color:var(--color-primary-800, #1e3a5f)}[data-theme=dark] .lc-badge--primary,:root[data-theme=dark] .lc-badge--primary{background-color:var(--color-primary-900, #1e3a5f);color:var(--color-primary-200, #bfdbfe)}.lc-badge--success{background-color:var(--color-success-light, #dcfce7);color:var(--color-success-dark, #166534)}[data-theme=dark] .lc-badge--success,:root[data-theme=dark] .lc-badge--success{background-color:#22c55e33;color:#86efac}.lc-badge--warning{background-color:var(--color-warning-light, #fef3c7);color:var(--color-warning-dark, #92400e)}[data-theme=dark] .lc-badge--warning,:root[data-theme=dark] .lc-badge--warning{background-color:#fbbf2433;color:#fde047}.lc-badge--error{background-color:var(--color-error-light, #fee2e2);color:var(--color-error-dark, #991b1b)}[data-theme=dark] .lc-badge--error,:root[data-theme=dark] .lc-badge--error{background-color:#ef444433;color:#fca5a5}.lc-badge--info{background-color:var(--color-info-light, #dbeafe);color:var(--color-info-dark, #1e40af)}[data-theme=dark] .lc-badge--info,:root[data-theme=dark] .lc-badge--info{background-color:#3b82f633;color:#93c5fd}.lc-badge--rounded{border-radius:var(--border-radius-full, 9999px)}@media(max-width:640px){.lc-badge--lg{padding:.5rem .875rem}}@media print{.lc-badge{border:1px solid currentColor}}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }] } });
+
 /**
  * Sidenav component for application navigation sidebar.
  *
@@ -6106,10 +6156,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
 class SidenavComponent {
     /** Whether the sidenav is collapsed to icon-only rail */
     collapsed = signal(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    /** Whether to show the logo at the top of the sidenav */
+    showLogo = signal(false, ...(ngDevMode ? [{ debugName: "showLogo" }] : /* istanbul ignore next */ []));
     /** Whether the sidenav is open */
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
     /** Display mode: 'drawer' (overlay) or 'docked' (persistent sidebar) */
     mode = signal('drawer', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /** Mobile breakpoint in pixels. Below this width, docked mode switches to drawer. */
+    mobileBreakpoint = signal(768, ...(ngDevMode ? [{ debugName: "mobileBreakpoint" }] : /* istanbul ignore next */ []));
+    /** Whether the viewport is below the mobile breakpoint */
+    isMobile = signal(false, ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
+    /** Effective mode: switches docked → drawer on mobile */
+    effectiveMode = computed(() => {
+        if (this.isMobile() && this.mode() === 'docked') {
+            return 'drawer';
+        }
+        return this.mode();
+    }, ...(ngDevMode ? [{ debugName: "effectiveMode" }] : /* istanbul ignore next */ []));
+    mediaQuery = null;
+    mediaHandler = (e) => this.isMobile.set(e.matches);
     /** Position of the sidenav (left or right) */
     position = signal('left', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
     /** Width of the sidenav drawer */
@@ -6184,6 +6249,19 @@ class SidenavComponent {
     set collapsedInput(value) {
         this.collapsed.set(value);
     }
+    /**
+     * Input setter for showLogo
+     */
+    set showLogoInput(value) {
+        this.showLogo.set(value);
+    }
+    /**
+     * Input setter for mobileBreakpoint
+     */
+    set mobileBreakpointInput(value) {
+        this.mobileBreakpoint.set(value);
+        this.setupMediaQuery();
+    }
     /** Theme variant for the sidenav */
     themeMode = signal('auto', ...(ngDevMode ? [{ debugName: "themeMode" }] : /* istanbul ignore next */ []));
     /**
@@ -6200,17 +6278,39 @@ class SidenavComponent {
      * Event emitted when a navigation item is clicked
      */
     itemClicked = new EventEmitter();
+    /**
+     * Event emitted when an item's action button is clicked
+     */
+    itemAction = new EventEmitter();
+    ngOnInit() {
+        this.setupMediaQuery();
+    }
+    ngOnDestroy() {
+        this.teardownMediaQuery();
+    }
+    setupMediaQuery() {
+        if (typeof window === 'undefined')
+            return;
+        this.teardownMediaQuery();
+        this.mediaQuery = window.matchMedia(`(max-width: ${this.mobileBreakpoint()}px)`);
+        this.isMobile.set(this.mediaQuery.matches);
+        this.mediaQuery.addEventListener('change', this.mediaHandler);
+    }
+    teardownMediaQuery() {
+        this.mediaQuery?.removeEventListener('change', this.mediaHandler);
+        this.mediaQuery = null;
+    }
     /**
      * Computed CSS classes for the sidenav
      */
     sidenavClasses = computed(() => {
         const classes = ['lc-sidenav'];
         classes.push(`lc-sidenav--${this.position()}`);
-        classes.push(`lc-sidenav--${this.mode()}`);
+        classes.push(`lc-sidenav--${this.effectiveMode()}`);
         if (this.isOpen()) {
             classes.push('lc-sidenav--open');
         }
-        if (this.collapsed()) {
+        if (this.collapsed() && !this.isMobile()) {
             classes.push('lc-sidenav--collapsed');
         }
         if (this.themeMode() !== 'auto') {
@@ -6222,7 +6322,7 @@ class SidenavComponent {
      * Computed inline styles for the sidenav
      */
     sidenavStyles = computed(() => ({
-        width: this.collapsed() ? '56px' : this.width(),
+        width: this.isMobile() ? this.width() : (this.collapsed() ? '56px' : this.width()),
     }), ...(ngDevMode ? [{ debugName: "sidenavStyles" }] : /* istanbul ignore next */ []));
     /**
      * Toggle collapsed state
@@ -6241,6 +6341,17 @@ class SidenavComponent {
      */
     handleItemClick(item) {
         this.itemClicked.emit(item);
+        // Auto-close drawer on mobile after navigation
+        if (this.isMobile()) {
+            this.handleClose();
+        }
+    }
+    /**
+     * Handle action button click on a navigation item
+     */
+    handleItemAction(event, item) {
+        event.stopPropagation();
+        this.itemAction.emit(item);
     }
     /**
      * Check if an item is active
@@ -6257,9 +6368,18 @@ class SidenavComponent {
         return item.children.some((child) => this.isItemActive(child));
     }
     /**
-     * Toggle expansion of a parent item
+     * Toggle expansion of a parent item.
+     * If the sidenav is collapsed, expand it first.
      */
     toggleExpanded(item) {
+        if (this.collapsed()) {
+            this.collapsed.set(false);
+            // Expand the clicked item after uncollapsing
+            const expanded = new Set(this.expandedItems());
+            expanded.add(item.id);
+            this.expandedItems.set(expanded);
+            return;
+        }
         const expanded = new Set(this.expandedItems());
         if (expanded.has(item.id)) {
             expanded.delete(item.id);
@@ -6284,15 +6404,15 @@ class SidenavComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: SidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: SidenavComponent, isStandalone: true, selector: "lc-sidenav", inputs: { isOpenInput: "isOpenInput", modeInput: "modeInput", positionInput: "positionInput", widthInput: "widthInput", ariaLabelInput: "ariaLabelInput", hasOverlayInput: "hasOverlayInput", itemsInput: "itemsInput", activeRouteInput: "activeRouteInput", collapsedInput: "collapsedInput", themeInput: ["theme", "themeInput"] }, outputs: { closed: "closed", itemClicked: "itemClicked" }, host: { listeners: { "document:keydown": "handleKeydown($event)" }, properties: { "class.lc-sidenav-container": "true", "class.lc-sidenav-container--docked": "mode() === 'docked'", "class.lc-sidenav-container--open": "isOpen()" } }, ngImport: i0, template: "<!-- Drawer mode: render with overlay and conditional visibility -->\n@if (mode() === 'drawer') {\n  @if (isOpen()) {\n    <!-- Overlay backdrop -->\n    @if (hasOverlay()) {\n      <div\n        class=\"lc-sidenav__overlay\"\n        (click)=\"handleClose()\"\n        aria-hidden=\"true\">\n      </div>\n    }\n\n    <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n  }\n}\n\n<!-- Docked mode: always render, visibility controlled by CSS -->\n@if (mode() === 'docked') {\n  <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n}\n\n<!-- Shared sidenav panel template -->\n<ng-template #sidenavPanel>\n  <aside\n    [class]=\"sidenavClasses()\"\n    [ngStyle]=\"sidenavStyles()\"\n    role=\"navigation\"\n    [attr.aria-label]=\"ariaLabel()\">\n\n    <!-- Close button (drawer mode only) -->\n    @if (mode() === 'drawer') {\n      <button\n        type=\"button\"\n        class=\"lc-sidenav__close\"\n        (click)=\"handleClose()\"\n        aria-label=\"Close navigation\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\">\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n        </svg>\n      </button>\n    }\n\n    <!-- Navigation items (if provided) -->\n    @if (items().length > 0) {\n      <nav class=\"lc-sidenav__nav\" [class.lc-sidenav__nav--docked]=\"mode() === 'docked'\">\n        @for (item of sortedItems(); track item.id) {\n          <!-- Section headline -->\n          @if (item.isSection) {\n            <div class=\"lc-sidenav__section\">\n              <h2 class=\"lc-sidenav__section-title\">{{ item.label }}</h2>\n              @if (item.children?.length) {\n                <ul class=\"lc-sidenav__section-items\">\n                  @for (child of item.children; track child.id) {\n                    <li>\n                      <a\n                        [routerLink]=\"child.route\"\n                        routerLinkActive=\"lc-sidenav__nav-item--active\"\n                        [routerLinkActiveOptions]=\"{ exact: child.route === '/' }\"\n                        class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                        (click)=\"handleItemClick(child)\"\n                        [attr.aria-current]=\"isItemActive(child) ? 'page' : null\">\n                        @if (child.icon) {\n                          <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                        }\n                        <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n                      </a>\n                    </li>\n                  }\n                </ul>\n              }\n            </div>\n          } @else if (item.children?.length) {\n            <!-- Parent item with children (collapsible group) -->\n            <button\n              type=\"button\"\n              class=\"lc-sidenav__nav-item lc-sidenav__nav-item--parent\"\n              [class.lc-sidenav__nav-item--expanded]=\"isExpanded(item)\"\n              [class.lc-sidenav__nav-item--active]=\"hasActiveChild(item)\"\n              (click)=\"toggleExpanded(item)\"\n              [attr.aria-expanded]=\"isExpanded(item)\">\n              <lc-icon [name]=\"item.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n              <span class=\"lc-sidenav__nav-label\">{{ item.label }}</span>\n              <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" class=\"lc-sidenav__nav-chevron\" />\n            </button>\n            @if (isExpanded(item)) {\n              <div class=\"lc-sidenav__nav-children\">\n                @for (child of item.children; track child.id) {\n                  <a\n                    [routerLink]=\"child.route\"\n                    routerLinkActive=\"lc-sidenav__nav-item--active\"\n                    class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                    (click)=\"handleItemClick(child)\"\n                    [attr.aria-current]=\"isItemActive(child) ? 'page' : null\">\n                    <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                    <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n                  </a>\n                }\n              </div>\n            }\n          } @else {\n            <!-- Simple item without children -->\n            <a\n              [routerLink]=\"item.route\"\n              routerLinkActive=\"lc-sidenav__nav-item--active\"\n              [routerLinkActiveOptions]=\"{ exact: item.route === '/' }\"\n              class=\"lc-sidenav__nav-item\"\n              (click)=\"handleItemClick(item)\"\n              [attr.aria-current]=\"isItemActive(item) ? 'page' : null\"\n              [title]=\"collapsed() ? item.label : ''\">\n              <lc-icon [name]=\"item.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n              <span class=\"lc-sidenav__nav-label\">{{ item.label }}</span>\n            </a>\n          }\n        }\n      </nav>\n    }\n\n    <!-- Content projection (for custom content) -->\n    <div class=\"lc-sidenav__content\" [class.lc-sidenav__content--docked]=\"mode() === 'docked'\">\n      <ng-content></ng-content>\n    </div>\n  </aside>\n</ng-template>\n", styles: [".lc-sidenav-container{position:relative;z-index:1000}.lc-sidenav-container--docked{position:static;z-index:auto;height:100%}.lc-sidenav__overlay{position:fixed;inset:0;background-color:#00000080;opacity:0;animation:fadeIn .3s ease-out forwards;z-index:1000;cursor:pointer}@media(prefers-reduced-motion:reduce){.lc-sidenav__overlay{animation:none;opacity:1}}.lc-sidenav{--lc-sidenav-bg: var(--color-background, #ffffff);--lc-sidenav-fg: #374151;--lc-sidenav-fg-active: #111827;--lc-sidenav-border: var(--color-border, #e5e7eb);--lc-sidenav-hover-bg: #f3f4f6;--lc-sidenav-section-fg: #6b7280;position:fixed;top:0;bottom:0;background-color:var(--lc-sidenav-bg);box-shadow:var(--elevation-3, 0 10px 15px -3px rgba(0, 0, 0, .1));z-index:1001;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}.lc-sidenav--left{left:0}.lc-sidenav--right{right:0}.lc-sidenav--drawer.lc-sidenav--left{animation:slideInLeft .3s ease-out}.lc-sidenav--drawer.lc-sidenav--right{animation:slideInRight .3s ease-out}@media(prefers-reduced-motion:reduce){.lc-sidenav--drawer{animation:none!important}}.lc-sidenav--docked{position:static;z-index:auto;height:100%;box-shadow:none;border-right:1px solid var(--lc-sidenav-border, #e5e7eb);transform:translate(0);transition:width .3s ease,transform .3s ease}.lc-sidenav--docked:not(.lc-sidenav--open){width:0!important;overflow:hidden;border-right:none}.lc-sidenav--collapsed{width:56px!important;overflow:visible}.lc-sidenav--collapsed .lc-sidenav__nav-label,.lc-sidenav--collapsed .lc-sidenav__nav-chevron,.lc-sidenav--collapsed .lc-sidenav__section-title{display:none}.lc-sidenav--collapsed .lc-sidenav__nav{padding:.5rem;gap:.125rem}.lc-sidenav--collapsed .lc-sidenav__nav-item{justify-content:center;padding:.625rem;gap:0;border-radius:var(--radius-md, .375rem);position:relative}.lc-sidenav--collapsed .lc-sidenav__nav-item:hover:after{content:attr(title);position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:8px;padding:4px 10px;background-color:var(--color-neutral-900, #111827);color:#fff;font-size:.75rem;white-space:nowrap;border-radius:4px;z-index:1002;pointer-events:none}.lc-sidenav--collapsed .lc-sidenav__nav-icon{width:22px;height:22px}.lc-sidenav--collapsed .lc-sidenav__nav-children{display:none}.lc-sidenav--collapsed .lc-sidenav__section{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--color-divider, #e5e7eb)}.lc-sidenav--collapsed .lc-sidenav__content{display:none}.lc-sidenav__close{position:absolute;top:1rem;right:1rem;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;background:none;border:none;border-radius:var(--border-radius-md, .375rem);color:var(--color-text-secondary);cursor:pointer;transition:background-color .2s ease,color .2s ease;z-index:1}.lc-sidenav__close:hover{background-color:var(--color-surface);color:var(--color-text-primary)}.lc-sidenav__close:focus-visible{outline:2px solid var(--color-primary-500, rgb(59, 130, 246));outline-offset:2px}.lc-sidenav__close:active{background-color:var(--color-border)}.lc-sidenav__close svg{width:1.25rem;height:1.25rem}.lc-sidenav__nav{display:flex;flex-direction:column;gap:var(--spacing-1, .25rem);padding:4rem 1rem 1rem}.lc-sidenav__nav--docked{padding-top:1rem;gap:0}.lc-sidenav__section:not(:first-child){margin-top:var(--spacing-4, 1rem);padding-top:var(--spacing-3, .75rem)}.lc-sidenav__section-title{padding:0 var(--spacing-3, .75rem);margin-bottom:var(--spacing-2, .5rem);font-size:var(--font-size-xs, .75rem);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--lc-sidenav-section-fg)}.lc-sidenav__section-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--spacing-1, .25rem)}.lc-sidenav__nav-item{display:flex;align-items:center;gap:var(--spacing-3, .75rem);padding:var(--spacing-2, .5rem) var(--spacing-3, .75rem);text-decoration:none;color:var(--lc-sidenav-fg);border-radius:var(--radius-md, .375rem);transition:background-color .2s ease,color .2s ease;font-size:var(--font-size-sm, .875rem);font-weight:500;cursor:pointer}.lc-sidenav__nav-item:hover{background-color:var(--lc-sidenav-hover-bg);color:var(--lc-sidenav-fg-active)}.lc-sidenav__nav-item:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-sidenav__nav-item--active{background-color:var(--color-primary-50, rgba(59, 130, 246, .1));color:var(--color-primary-700, #1d4ed8);font-weight:600}.lc-sidenav__nav-item--active .lc-sidenav__nav-icon{color:var(--color-primary-600, #2563eb)}.lc-sidenav__nav-icon{width:20px;height:20px;flex-shrink:0;color:currentColor}.lc-sidenav__nav-chevron{width:16px;height:16px;flex-shrink:0;margin-left:auto;transition:transform .2s ease}.lc-sidenav__nav-item--expanded .lc-sidenav__nav-chevron{transform:rotate(180deg)}.lc-sidenav__nav-item--parent{width:100%;border:none;background:none;font-family:inherit;text-align:left}.lc-sidenav__nav-children{display:flex;flex-direction:column;gap:var(--spacing-1, .25rem);padding-left:var(--spacing-4, 1rem)}.lc-sidenav__nav-item--child{font-size:var(--font-size-sm, .875rem)}.lc-sidenav__nav-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lc-sidenav__content{flex:1;padding:4rem 1rem 1rem;overflow-y:auto;-webkit-overflow-scrolling:touch}.lc-sidenav__content--docked{padding-top:1rem}.lc-sidenav__content::-webkit-scrollbar{width:.5rem}.lc-sidenav__content::-webkit-scrollbar-track{background:var(--color-surface);border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav__content::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav__content::-webkit-scrollbar-thumb:hover{background:var(--color-text-secondary)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@media(max-width:640px){.lc-sidenav--drawer{width:100%!important;max-width:320px}}@media(max-width:480px){.lc-sidenav--drawer{max-width:280px}}.lc-sidenav__content:focus{outline:none}.lc-sidenav__content a:focus-visible,.lc-sidenav__content button:focus-visible{outline:2px solid var(--color-primary-500, rgb(59, 130, 246));outline-offset:2px;border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav--dark{--lc-sidenav-bg: #18181b;--lc-sidenav-fg: #d4d4d8;--lc-sidenav-fg-active: #f5f5f5;--lc-sidenav-border: #3f3f46;--lc-sidenav-hover-bg: #27272a;--lc-sidenav-section-fg: #a1a1aa}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light){--lc-sidenav-bg: #18181b;--lc-sidenav-fg: #d4d4d8;--lc-sidenav-fg-active: #f5f5f5;--lc-sidenav-border: #3f3f46;--lc-sidenav-hover-bg: #27272a;--lc-sidenav-section-fg: #a1a1aa}@media print{.lc-sidenav-container,.lc-sidenav__overlay,.lc-sidenav{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: SidenavComponent, isStandalone: true, selector: "lc-sidenav", inputs: { isOpenInput: "isOpenInput", modeInput: "modeInput", positionInput: "positionInput", widthInput: "widthInput", ariaLabelInput: "ariaLabelInput", hasOverlayInput: "hasOverlayInput", itemsInput: "itemsInput", activeRouteInput: "activeRouteInput", collapsedInput: "collapsedInput", showLogoInput: "showLogoInput", mobileBreakpointInput: "mobileBreakpointInput", themeInput: ["theme", "themeInput"] }, outputs: { closed: "closed", itemClicked: "itemClicked", itemAction: "itemAction" }, host: { listeners: { "document:keydown": "handleKeydown($event)" }, properties: { "class.lc-sidenav-container": "true", "class.lc-sidenav-container--docked": "effectiveMode() === 'docked'", "class.lc-sidenav-container--open": "isOpen()" } }, ngImport: i0, template: "<!-- Drawer mode: render with overlay and conditional visibility -->\n@if (effectiveMode() === 'drawer') {\n  @if (isOpen()) {\n    <!-- Overlay backdrop -->\n    @if (hasOverlay()) {\n      <div\n        class=\"lc-sidenav__overlay\"\n        (click)=\"handleClose()\"\n        aria-hidden=\"true\">\n      </div>\n    }\n\n    <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n  }\n}\n\n<!-- Docked mode: always render, visibility controlled by CSS -->\n@if (effectiveMode() === 'docked') {\n  <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n}\n\n<!-- Shared sidenav panel template -->\n<ng-template #sidenavPanel>\n  <aside\n    [class]=\"sidenavClasses()\"\n    [ngStyle]=\"sidenavStyles()\"\n    role=\"navigation\"\n    [attr.aria-label]=\"ariaLabel()\">\n\n    <!-- Logo area (sidebar-first layout) -->\n    @if (showLogo()) {\n      <div class=\"lc-sidenav__logo\">\n        <button type=\"button\" class=\"lc-sidenav__logo-link\" aria-label=\"Toggle sidebar\" (click)=\"toggleCollapsed()\">\n          <lc-logo [variant]=\"collapsed() ? 'emblem' : 'full'\" size=\"sm\" [clickable]=\"false\" [colorMode]=\"themeMode() === 'dark' ? 'dark' : themeMode() === 'light' ? 'light' : 'auto'\" />\n        </button>\n      </div>\n    }\n\n    <!-- Close button (drawer mode only) -->\n    @if (effectiveMode() === 'drawer') {\n      <button\n        type=\"button\"\n        class=\"lc-sidenav__close\"\n        (click)=\"handleClose()\"\n        aria-label=\"Close navigation\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\">\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n        </svg>\n      </button>\n    }\n\n    <!-- Navigation items (if provided) -->\n    @if (items().length > 0) {\n      <nav class=\"lc-sidenav__nav\" [class.lc-sidenav__nav--docked]=\"effectiveMode() === 'docked'\">\n        @for (item of sortedItems(); track item.id) {\n          <!-- Section headline -->\n          @if (item.isSection) {\n            <div class=\"lc-sidenav__section\">\n              <div class=\"lc-sidenav__section-header\">\n                <h2 class=\"lc-sidenav__section-title\">{{ item.label }}</h2>\n                @if (item.action) {\n                  <button\n                    type=\"button\"\n                    class=\"lc-sidenav__action-btn\"\n                    [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n                    (click)=\"handleItemAction($event, item)\">\n                    <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                  </button>\n                }\n              </div>\n              @if (item.children?.length) {\n                <ul class=\"lc-sidenav__section-items\">\n                  @for (child of item.children; track child.id) {\n                    <li>\n                      @if (child.children?.length) {\n                        <!-- Section child with nested children (collapsible) -->\n                        <div class=\"lc-sidenav__nav-item-row\">\n                          <button\n                            type=\"button\"\n                            class=\"lc-sidenav__nav-item lc-sidenav__nav-item--parent\"\n                            [class.lc-sidenav__nav-item--expanded]=\"isExpanded(child)\"\n                            [class.lc-sidenav__nav-item--active]=\"hasActiveChild(child)\"\n                            (click)=\"toggleExpanded(child)\"\n                            [attr.aria-expanded]=\"isExpanded(child)\"\n                            [title]=\"collapsed() ? child.label : ''\">\n                            @if (child.icon) {\n                              <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                            }\n                            <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n                            @if (child.badge) {\n                              <lc-badge [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>\n                            }\n                            <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" class=\"lc-sidenav__nav-chevron\" />\n                          </button>\n                          @if (child.action) {\n                            <button\n                              type=\"button\"\n                              class=\"lc-sidenav__action-btn\"\n                              [attr.aria-label]=\"child.action.ariaLabel || child.label + ' action'\"\n                              (click)=\"handleItemAction($event, child)\">\n                              <lc-icon [name]=\"child.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                            </button>\n                          }\n                        </div>\n                        @if (isExpanded(child)) {\n                          <div class=\"lc-sidenav__nav-children\">\n                            @for (grandchild of child.children; track grandchild.id) {\n                              <a\n                                [routerLink]=\"grandchild.route\"\n                                routerLinkActive=\"lc-sidenav__nav-item--active\"\n                                class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                                (click)=\"handleItemClick(grandchild)\"\n                                [attr.aria-current]=\"isItemActive(grandchild) ? 'page' : null\">\n                                @if (grandchild.icon) {\n                                  <lc-icon [name]=\"grandchild.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                                }\n                                <span class=\"lc-sidenav__nav-label\">{{ grandchild.label }}</span>\n                                @if (grandchild.badge) {\n                                  <lc-badge [variant]=\"grandchild.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ grandchild.badge.value }}</lc-badge>\n                                }\n                              </a>\n                            }\n                          </div>\n                        }\n                      } @else {\n                        <!-- Section child (simple link) -->\n                        <div class=\"lc-sidenav__nav-item-row\">\n                          <a\n                            [routerLink]=\"child.route\"\n                            routerLinkActive=\"lc-sidenav__nav-item--active\"\n                            [routerLinkActiveOptions]=\"{ exact: child.route === '/' }\"\n                            class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                            (click)=\"handleItemClick(child)\"\n                            [attr.aria-current]=\"isItemActive(child) ? 'page' : null\"\n                            [title]=\"collapsed() ? child.label : ''\">\n                            @if (child.icon) {\n                              <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                            }\n                            <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n                            @if (child.badge) {\n                              <lc-badge [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>\n                            }\n                          </a>\n                          @if (child.action) {\n                            <button\n                              type=\"button\"\n                              class=\"lc-sidenav__action-btn\"\n                              [attr.aria-label]=\"child.action.ariaLabel || child.label + ' action'\"\n                              (click)=\"handleItemAction($event, child)\">\n                              <lc-icon [name]=\"child.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                            </button>\n                          }\n                        </div>\n                      }\n                    </li>\n                  }\n                </ul>\n              }\n            </div>\n          } @else if (item.children?.length) {\n            <!-- Parent item with children (collapsible group) -->\n            <div class=\"lc-sidenav__nav-item-row\">\n              <button\n                type=\"button\"\n                class=\"lc-sidenav__nav-item lc-sidenav__nav-item--parent\"\n                [class.lc-sidenav__nav-item--expanded]=\"isExpanded(item)\"\n                [class.lc-sidenav__nav-item--active]=\"hasActiveChild(item)\"\n                (click)=\"toggleExpanded(item)\"\n                [attr.aria-expanded]=\"isExpanded(item)\"\n                [title]=\"collapsed() ? item.label : ''\">\n                <lc-icon [name]=\"item.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                <span class=\"lc-sidenav__nav-label\">{{ item.label }}</span>\n                @if (item.badge) {\n                  <lc-badge [variant]=\"item.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ item.badge.value }}</lc-badge>\n                }\n                <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" class=\"lc-sidenav__nav-chevron\" />\n              </button>\n              @if (item.action) {\n                <button\n                  type=\"button\"\n                  class=\"lc-sidenav__action-btn\"\n                  [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n                  (click)=\"handleItemAction($event, item)\">\n                  <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                </button>\n              }\n            </div>\n            @if (isExpanded(item)) {\n              <div class=\"lc-sidenav__nav-children\">\n                @for (child of item.children; track child.id) {\n                  <a\n                    [routerLink]=\"child.route\"\n                    routerLinkActive=\"lc-sidenav__nav-item--active\"\n                    class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                    (click)=\"handleItemClick(child)\"\n                    [attr.aria-current]=\"isItemActive(child) ? 'page' : null\">\n                    <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                    <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n                    @if (child.badge) {\n                      <lc-badge [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>\n                    }\n                  </a>\n                }\n              </div>\n            }\n          } @else {\n            <!-- Simple item without children -->\n            <div class=\"lc-sidenav__nav-item-row\">\n              <a\n                [routerLink]=\"item.route\"\n                routerLinkActive=\"lc-sidenav__nav-item--active\"\n                [routerLinkActiveOptions]=\"{ exact: item.route === '/' }\"\n                class=\"lc-sidenav__nav-item\"\n                (click)=\"handleItemClick(item)\"\n                [attr.aria-current]=\"isItemActive(item) ? 'page' : null\"\n                [title]=\"collapsed() ? item.label : ''\">\n                <lc-icon [name]=\"item.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                <span class=\"lc-sidenav__nav-label\">{{ item.label }}</span>\n                @if (item.badge) {\n                  <lc-badge [variant]=\"item.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ item.badge.value }}</lc-badge>\n                }\n              </a>\n              @if (item.action) {\n                <button\n                  type=\"button\"\n                  class=\"lc-sidenav__action-btn\"\n                  [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n                  (click)=\"handleItemAction($event, item)\">\n                  <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                </button>\n              }\n            </div>\n          }\n        }\n      </nav>\n    }\n\n    <!-- Content projection (for custom content) -->\n    <div class=\"lc-sidenav__content\" [class.lc-sidenav__content--docked]=\"mode() === 'docked'\">\n      <ng-content></ng-content>\n    </div>\n  </aside>\n</ng-template>\n", styles: [".lc-sidenav-container{position:relative;z-index:1000}.lc-sidenav-container--docked{position:static;z-index:auto;height:100%}.lc-sidenav__overlay{position:fixed;inset:0;background-color:#00000080;opacity:0;animation:fadeIn .3s ease-out forwards;z-index:1000;cursor:pointer}@media(prefers-reduced-motion:reduce){.lc-sidenav__overlay{animation:none;opacity:1}}.lc-sidenav{--lc-sidenav-bg: var(--color-background, #ffffff);--lc-sidenav-fg: #374151;--lc-sidenav-fg-active: #111827;--lc-sidenav-border: var(--color-border, #e5e7eb);--lc-sidenav-hover-bg: #f3f4f6;--lc-sidenav-section-fg: #6b7280;position:fixed;top:0;bottom:0;background-color:var(--lc-sidenav-bg);box-shadow:var(--elevation-3, 0 10px 15px -3px rgba(0, 0, 0, .1));z-index:1001;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}.lc-sidenav--left{left:0}.lc-sidenav--right{right:0}.lc-sidenav--drawer.lc-sidenav--left{animation:slideInLeft .3s ease-out}.lc-sidenav--drawer.lc-sidenav--right{animation:slideInRight .3s ease-out}@media(prefers-reduced-motion:reduce){.lc-sidenav--drawer{animation:none!important}}.lc-sidenav--docked{position:static;z-index:auto;height:100%;box-shadow:none;border-right:1px solid var(--lc-sidenav-border, #e5e7eb);transform:translate(0);transition:width .3s ease,transform .3s ease}.lc-sidenav--docked:not(.lc-sidenav--open){width:0!important;overflow:hidden;border-right:none}.lc-sidenav--collapsed{width:56px!important;overflow:visible}.lc-sidenav--collapsed .lc-sidenav__nav-label,.lc-sidenav--collapsed .lc-sidenav__nav-chevron,.lc-sidenav--collapsed .lc-sidenav__section-title,.lc-sidenav--collapsed .lc-sidenav__action-btn,.lc-sidenav--collapsed .lc-sidenav__section-header{display:none}.lc-sidenav--collapsed .lc-sidenav__nav{padding:.5rem;gap:.125rem}.lc-sidenav--collapsed .lc-sidenav__nav-item-row .lc-sidenav__action-btn{display:none}.lc-sidenav--collapsed .lc-sidenav__nav-item{justify-content:center;padding:.625rem;gap:0;border-radius:var(--radius-md, .375rem);position:relative}.lc-sidenav--collapsed .lc-sidenav__nav-item:hover:after{content:attr(title);position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:8px;padding:4px 10px;background-color:var(--color-neutral-900, #111827);color:#fff;font-size:.75rem;white-space:nowrap;border-radius:4px;z-index:1002;pointer-events:none}.lc-sidenav--collapsed .lc-sidenav__nav-icon{width:22px;height:22px}.lc-sidenav--collapsed .lc-sidenav__nav-badge{position:absolute;top:2px;right:2px;margin-left:0;font-size:.625rem;min-width:0;padding:0 3px;line-height:1.2}.lc-sidenav--collapsed .lc-sidenav__nav-children{display:none}.lc-sidenav--collapsed .lc-sidenav__section-items{display:flex;flex-direction:column;gap:.125rem}.lc-sidenav--collapsed .lc-sidenav__section{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--color-divider, #e5e7eb)}.lc-sidenav--collapsed .lc-sidenav__content{display:none}.lc-sidenav--collapsed .lc-sidenav__logo{padding:var(--spacing-3);justify-content:center}.lc-sidenav__logo{display:flex;align-items:center;padding:var(--spacing-3) var(--spacing-4);border-bottom:1px solid var(--lc-sidenav-border);height:64px;flex-shrink:0}.lc-sidenav__logo-link{display:flex;align-items:center;text-decoration:none;color:var(--lc-sidenav-fg);background:transparent;border:none;padding:0;cursor:pointer}.lc-sidenav__logo-link:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:4px;border-radius:var(--radius-sm, .25rem)}.lc-sidenav__close{position:absolute;top:1rem;right:1rem;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;background:none;border:none;border-radius:var(--border-radius-md, .375rem);color:var(--color-text-secondary);cursor:pointer;transition:background-color .2s ease,color .2s ease;z-index:1}.lc-sidenav__close:hover{background-color:var(--color-surface);color:var(--color-text-primary)}.lc-sidenav__close:focus-visible{outline:2px solid var(--color-primary-500, rgb(59, 130, 246));outline-offset:2px}.lc-sidenav__close:active{background-color:var(--color-border)}.lc-sidenav__close svg{width:1.25rem;height:1.25rem}.lc-sidenav__nav{display:flex;flex-direction:column;gap:var(--spacing-1, .25rem);padding:4rem 1rem 1rem}.lc-sidenav__nav--docked{padding-top:1rem;gap:0}.lc-sidenav__section:not(:first-child){margin-top:var(--spacing-4, 1rem);padding-top:var(--spacing-3, .75rem)}.lc-sidenav__section-header{display:flex;align-items:center;justify-content:space-between;padding-right:var(--spacing-2, .5rem)}.lc-sidenav__section-title{padding:0 var(--spacing-3, .75rem);margin-bottom:var(--spacing-2, .5rem);font-size:var(--font-size-xs, .75rem);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--lc-sidenav-section-fg)}.lc-sidenav__section-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--spacing-1, .25rem)}.lc-sidenav__nav-item{display:flex;align-items:center;gap:var(--spacing-3, .75rem);padding:var(--spacing-2, .5rem) var(--spacing-3, .75rem);text-decoration:none;color:var(--lc-sidenav-fg);border-radius:var(--radius-md, .375rem);transition:background-color .2s ease,color .2s ease;font-size:var(--font-size-sm, .875rem);font-weight:500;cursor:pointer}.lc-sidenav__nav-item:hover{background-color:var(--lc-sidenav-hover-bg);color:var(--lc-sidenav-fg-active)}.lc-sidenav__nav-item:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-sidenav__nav-item--active{background-color:var(--color-primary-50, rgba(59, 130, 246, .1));color:var(--color-primary-700, #1d4ed8);font-weight:600}.lc-sidenav__nav-item--active .lc-sidenav__nav-icon{color:var(--color-primary-600, #2563eb)}.lc-sidenav__nav-icon{width:20px;height:20px;flex-shrink:0;color:currentColor}.lc-sidenav__nav-chevron{width:16px;height:16px;flex-shrink:0;margin-left:auto;transition:transform .2s ease}.lc-sidenav__nav-badge{flex-shrink:0;margin-left:auto}.lc-sidenav__nav-item--expanded .lc-sidenav__nav-chevron{transform:rotate(180deg)}.lc-sidenav__nav-item--parent{width:100%;border:none;background:none;font-family:inherit;text-align:left}.lc-sidenav__nav-children{display:flex;flex-direction:column;gap:var(--spacing-1, .25rem);padding-left:var(--spacing-4, 1rem)}.lc-sidenav__nav-item--child{font-size:var(--font-size-sm, .875rem)}.lc-sidenav__nav-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lc-sidenav__nav-item-row{display:flex;align-items:center}.lc-sidenav__nav-item-row .lc-sidenav__nav-item{flex:1;min-width:0}.lc-sidenav__nav-item-row .lc-sidenav__action-btn{opacity:0;transition:opacity .15s ease}.lc-sidenav__nav-item-row:hover .lc-sidenav__action-btn{opacity:1}.lc-sidenav__action-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;padding:0;background:transparent;border:none;border-radius:var(--radius-sm, .25rem);color:var(--lc-sidenav-section-fg);cursor:pointer;transition:background-color .15s ease,color .15s ease}.lc-sidenav__action-btn:hover{background-color:var(--lc-sidenav-hover-bg);color:var(--lc-sidenav-fg-active)}.lc-sidenav__action-btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px;opacity:1}.lc-sidenav__content{flex:1;padding:4rem 1rem 1rem;overflow-y:auto;-webkit-overflow-scrolling:touch}.lc-sidenav__content--docked{padding-top:1rem}.lc-sidenav__content::-webkit-scrollbar{width:.5rem}.lc-sidenav__content::-webkit-scrollbar-track{background:var(--color-surface);border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav__content::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav__content::-webkit-scrollbar-thumb:hover{background:var(--color-text-secondary)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@media(max-width:640px){.lc-sidenav--drawer{width:100%!important;max-width:320px}}@media(max-width:480px){.lc-sidenav--drawer{max-width:280px}}.lc-sidenav__content:focus{outline:none}.lc-sidenav__content a:focus-visible,.lc-sidenav__content button:focus-visible{outline:2px solid var(--color-primary-500, rgb(59, 130, 246));outline-offset:2px;border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav--dark{--lc-sidenav-bg: #18181b;--lc-sidenav-fg: #d4d4d8;--lc-sidenav-fg-active: #f5f5f5;--lc-sidenav-border: #3f3f46;--lc-sidenav-hover-bg: #27272a;--lc-sidenav-section-fg: #a1a1aa}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light){--lc-sidenav-bg: #18181b;--lc-sidenav-fg: #d4d4d8;--lc-sidenav-fg-active: #f5f5f5;--lc-sidenav-border: #3f3f46;--lc-sidenav-hover-bg: #27272a;--lc-sidenav-section-fg: #a1a1aa}@media print{.lc-sidenav-container,.lc-sidenav__overlay,.lc-sidenav{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }, { kind: "component", type: BadgeComponent, selector: "lc-badge", inputs: ["variant", "size", "rounded"] }, { kind: "component", type: LogoComponent, selector: "lc-logo", inputs: ["variant", "size", "alt", "clickable", "colorMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: SidenavComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lc-sidenav', standalone: true, imports: [CommonModule, RouterModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'lc-sidenav', standalone: true, imports: [CommonModule, RouterModule, IconComponent, BadgeComponent, LogoComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.lc-sidenav-container]': 'true',
-                        '[class.lc-sidenav-container--docked]': "mode() === 'docked'",
+                        '[class.lc-sidenav-container--docked]': "effectiveMode() === 'docked'",
                         '[class.lc-sidenav-container--open]': 'isOpen()',
-                    }, template: "<!-- Drawer mode: render with overlay and conditional visibility -->\n@if (mode() === 'drawer') {\n  @if (isOpen()) {\n    <!-- Overlay backdrop -->\n    @if (hasOverlay()) {\n      <div\n        class=\"lc-sidenav__overlay\"\n        (click)=\"handleClose()\"\n        aria-hidden=\"true\">\n      </div>\n    }\n\n    <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n  }\n}\n\n<!-- Docked mode: always render, visibility controlled by CSS -->\n@if (mode() === 'docked') {\n  <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n}\n\n<!-- Shared sidenav panel template -->\n<ng-template #sidenavPanel>\n  <aside\n    [class]=\"sidenavClasses()\"\n    [ngStyle]=\"sidenavStyles()\"\n    role=\"navigation\"\n    [attr.aria-label]=\"ariaLabel()\">\n\n    <!-- Close button (drawer mode only) -->\n    @if (mode() === 'drawer') {\n      <button\n        type=\"button\"\n        class=\"lc-sidenav__close\"\n        (click)=\"handleClose()\"\n        aria-label=\"Close navigation\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\">\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n        </svg>\n      </button>\n    }\n\n    <!-- Navigation items (if provided) -->\n    @if (items().length > 0) {\n      <nav class=\"lc-sidenav__nav\" [class.lc-sidenav__nav--docked]=\"mode() === 'docked'\">\n        @for (item of sortedItems(); track item.id) {\n          <!-- Section headline -->\n          @if (item.isSection) {\n            <div class=\"lc-sidenav__section\">\n              <h2 class=\"lc-sidenav__section-title\">{{ item.label }}</h2>\n              @if (item.children?.length) {\n                <ul class=\"lc-sidenav__section-items\">\n                  @for (child of item.children; track child.id) {\n                    <li>\n                      <a\n                        [routerLink]=\"child.route\"\n                        routerLinkActive=\"lc-sidenav__nav-item--active\"\n                        [routerLinkActiveOptions]=\"{ exact: child.route === '/' }\"\n                        class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                        (click)=\"handleItemClick(child)\"\n                        [attr.aria-current]=\"isItemActive(child) ? 'page' : null\">\n                        @if (child.icon) {\n                          <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                        }\n                        <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n                      </a>\n                    </li>\n                  }\n                </ul>\n              }\n            </div>\n          } @else if (item.children?.length) {\n            <!-- Parent item with children (collapsible group) -->\n            <button\n              type=\"button\"\n              class=\"lc-sidenav__nav-item lc-sidenav__nav-item--parent\"\n              [class.lc-sidenav__nav-item--expanded]=\"isExpanded(item)\"\n              [class.lc-sidenav__nav-item--active]=\"hasActiveChild(item)\"\n              (click)=\"toggleExpanded(item)\"\n              [attr.aria-expanded]=\"isExpanded(item)\">\n              <lc-icon [name]=\"item.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n              <span class=\"lc-sidenav__nav-label\">{{ item.label }}</span>\n              <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" class=\"lc-sidenav__nav-chevron\" />\n            </button>\n            @if (isExpanded(item)) {\n              <div class=\"lc-sidenav__nav-children\">\n                @for (child of item.children; track child.id) {\n                  <a\n                    [routerLink]=\"child.route\"\n                    routerLinkActive=\"lc-sidenav__nav-item--active\"\n                    class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                    (click)=\"handleItemClick(child)\"\n                    [attr.aria-current]=\"isItemActive(child) ? 'page' : null\">\n                    <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                    <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n                  </a>\n                }\n              </div>\n            }\n          } @else {\n            <!-- Simple item without children -->\n            <a\n              [routerLink]=\"item.route\"\n              routerLinkActive=\"lc-sidenav__nav-item--active\"\n              [routerLinkActiveOptions]=\"{ exact: item.route === '/' }\"\n              class=\"lc-sidenav__nav-item\"\n              (click)=\"handleItemClick(item)\"\n              [attr.aria-current]=\"isItemActive(item) ? 'page' : null\"\n              [title]=\"collapsed() ? item.label : ''\">\n              <lc-icon [name]=\"item.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n              <span class=\"lc-sidenav__nav-label\">{{ item.label }}</span>\n            </a>\n          }\n        }\n      </nav>\n    }\n\n    <!-- Content projection (for custom content) -->\n    <div class=\"lc-sidenav__content\" [class.lc-sidenav__content--docked]=\"mode() === 'docked'\">\n      <ng-content></ng-content>\n    </div>\n  </aside>\n</ng-template>\n", styles: [".lc-sidenav-container{position:relative;z-index:1000}.lc-sidenav-container--docked{position:static;z-index:auto;height:100%}.lc-sidenav__overlay{position:fixed;inset:0;background-color:#00000080;opacity:0;animation:fadeIn .3s ease-out forwards;z-index:1000;cursor:pointer}@media(prefers-reduced-motion:reduce){.lc-sidenav__overlay{animation:none;opacity:1}}.lc-sidenav{--lc-sidenav-bg: var(--color-background, #ffffff);--lc-sidenav-fg: #374151;--lc-sidenav-fg-active: #111827;--lc-sidenav-border: var(--color-border, #e5e7eb);--lc-sidenav-hover-bg: #f3f4f6;--lc-sidenav-section-fg: #6b7280;position:fixed;top:0;bottom:0;background-color:var(--lc-sidenav-bg);box-shadow:var(--elevation-3, 0 10px 15px -3px rgba(0, 0, 0, .1));z-index:1001;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}.lc-sidenav--left{left:0}.lc-sidenav--right{right:0}.lc-sidenav--drawer.lc-sidenav--left{animation:slideInLeft .3s ease-out}.lc-sidenav--drawer.lc-sidenav--right{animation:slideInRight .3s ease-out}@media(prefers-reduced-motion:reduce){.lc-sidenav--drawer{animation:none!important}}.lc-sidenav--docked{position:static;z-index:auto;height:100%;box-shadow:none;border-right:1px solid var(--lc-sidenav-border, #e5e7eb);transform:translate(0);transition:width .3s ease,transform .3s ease}.lc-sidenav--docked:not(.lc-sidenav--open){width:0!important;overflow:hidden;border-right:none}.lc-sidenav--collapsed{width:56px!important;overflow:visible}.lc-sidenav--collapsed .lc-sidenav__nav-label,.lc-sidenav--collapsed .lc-sidenav__nav-chevron,.lc-sidenav--collapsed .lc-sidenav__section-title{display:none}.lc-sidenav--collapsed .lc-sidenav__nav{padding:.5rem;gap:.125rem}.lc-sidenav--collapsed .lc-sidenav__nav-item{justify-content:center;padding:.625rem;gap:0;border-radius:var(--radius-md, .375rem);position:relative}.lc-sidenav--collapsed .lc-sidenav__nav-item:hover:after{content:attr(title);position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:8px;padding:4px 10px;background-color:var(--color-neutral-900, #111827);color:#fff;font-size:.75rem;white-space:nowrap;border-radius:4px;z-index:1002;pointer-events:none}.lc-sidenav--collapsed .lc-sidenav__nav-icon{width:22px;height:22px}.lc-sidenav--collapsed .lc-sidenav__nav-children{display:none}.lc-sidenav--collapsed .lc-sidenav__section{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--color-divider, #e5e7eb)}.lc-sidenav--collapsed .lc-sidenav__content{display:none}.lc-sidenav__close{position:absolute;top:1rem;right:1rem;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;background:none;border:none;border-radius:var(--border-radius-md, .375rem);color:var(--color-text-secondary);cursor:pointer;transition:background-color .2s ease,color .2s ease;z-index:1}.lc-sidenav__close:hover{background-color:var(--color-surface);color:var(--color-text-primary)}.lc-sidenav__close:focus-visible{outline:2px solid var(--color-primary-500, rgb(59, 130, 246));outline-offset:2px}.lc-sidenav__close:active{background-color:var(--color-border)}.lc-sidenav__close svg{width:1.25rem;height:1.25rem}.lc-sidenav__nav{display:flex;flex-direction:column;gap:var(--spacing-1, .25rem);padding:4rem 1rem 1rem}.lc-sidenav__nav--docked{padding-top:1rem;gap:0}.lc-sidenav__section:not(:first-child){margin-top:var(--spacing-4, 1rem);padding-top:var(--spacing-3, .75rem)}.lc-sidenav__section-title{padding:0 var(--spacing-3, .75rem);margin-bottom:var(--spacing-2, .5rem);font-size:var(--font-size-xs, .75rem);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--lc-sidenav-section-fg)}.lc-sidenav__section-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--spacing-1, .25rem)}.lc-sidenav__nav-item{display:flex;align-items:center;gap:var(--spacing-3, .75rem);padding:var(--spacing-2, .5rem) var(--spacing-3, .75rem);text-decoration:none;color:var(--lc-sidenav-fg);border-radius:var(--radius-md, .375rem);transition:background-color .2s ease,color .2s ease;font-size:var(--font-size-sm, .875rem);font-weight:500;cursor:pointer}.lc-sidenav__nav-item:hover{background-color:var(--lc-sidenav-hover-bg);color:var(--lc-sidenav-fg-active)}.lc-sidenav__nav-item:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-sidenav__nav-item--active{background-color:var(--color-primary-50, rgba(59, 130, 246, .1));color:var(--color-primary-700, #1d4ed8);font-weight:600}.lc-sidenav__nav-item--active .lc-sidenav__nav-icon{color:var(--color-primary-600, #2563eb)}.lc-sidenav__nav-icon{width:20px;height:20px;flex-shrink:0;color:currentColor}.lc-sidenav__nav-chevron{width:16px;height:16px;flex-shrink:0;margin-left:auto;transition:transform .2s ease}.lc-sidenav__nav-item--expanded .lc-sidenav__nav-chevron{transform:rotate(180deg)}.lc-sidenav__nav-item--parent{width:100%;border:none;background:none;font-family:inherit;text-align:left}.lc-sidenav__nav-children{display:flex;flex-direction:column;gap:var(--spacing-1, .25rem);padding-left:var(--spacing-4, 1rem)}.lc-sidenav__nav-item--child{font-size:var(--font-size-sm, .875rem)}.lc-sidenav__nav-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lc-sidenav__content{flex:1;padding:4rem 1rem 1rem;overflow-y:auto;-webkit-overflow-scrolling:touch}.lc-sidenav__content--docked{padding-top:1rem}.lc-sidenav__content::-webkit-scrollbar{width:.5rem}.lc-sidenav__content::-webkit-scrollbar-track{background:var(--color-surface);border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav__content::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav__content::-webkit-scrollbar-thumb:hover{background:var(--color-text-secondary)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@media(max-width:640px){.lc-sidenav--drawer{width:100%!important;max-width:320px}}@media(max-width:480px){.lc-sidenav--drawer{max-width:280px}}.lc-sidenav__content:focus{outline:none}.lc-sidenav__content a:focus-visible,.lc-sidenav__content button:focus-visible{outline:2px solid var(--color-primary-500, rgb(59, 130, 246));outline-offset:2px;border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav--dark{--lc-sidenav-bg: #18181b;--lc-sidenav-fg: #d4d4d8;--lc-sidenav-fg-active: #f5f5f5;--lc-sidenav-border: #3f3f46;--lc-sidenav-hover-bg: #27272a;--lc-sidenav-section-fg: #a1a1aa}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light){--lc-sidenav-bg: #18181b;--lc-sidenav-fg: #d4d4d8;--lc-sidenav-fg-active: #f5f5f5;--lc-sidenav-border: #3f3f46;--lc-sidenav-hover-bg: #27272a;--lc-sidenav-section-fg: #a1a1aa}@media print{.lc-sidenav-container,.lc-sidenav__overlay,.lc-sidenav{display:none}}\n"] }]
+                    }, template: "<!-- Drawer mode: render with overlay and conditional visibility -->\n@if (effectiveMode() === 'drawer') {\n  @if (isOpen()) {\n    <!-- Overlay backdrop -->\n    @if (hasOverlay()) {\n      <div\n        class=\"lc-sidenav__overlay\"\n        (click)=\"handleClose()\"\n        aria-hidden=\"true\">\n      </div>\n    }\n\n    <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n  }\n}\n\n<!-- Docked mode: always render, visibility controlled by CSS -->\n@if (effectiveMode() === 'docked') {\n  <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n}\n\n<!-- Shared sidenav panel template -->\n<ng-template #sidenavPanel>\n  <aside\n    [class]=\"sidenavClasses()\"\n    [ngStyle]=\"sidenavStyles()\"\n    role=\"navigation\"\n    [attr.aria-label]=\"ariaLabel()\">\n\n    <!-- Logo area (sidebar-first layout) -->\n    @if (showLogo()) {\n      <div class=\"lc-sidenav__logo\">\n        <button type=\"button\" class=\"lc-sidenav__logo-link\" aria-label=\"Toggle sidebar\" (click)=\"toggleCollapsed()\">\n          <lc-logo [variant]=\"collapsed() ? 'emblem' : 'full'\" size=\"sm\" [clickable]=\"false\" [colorMode]=\"themeMode() === 'dark' ? 'dark' : themeMode() === 'light' ? 'light' : 'auto'\" />\n        </button>\n      </div>\n    }\n\n    <!-- Close button (drawer mode only) -->\n    @if (effectiveMode() === 'drawer') {\n      <button\n        type=\"button\"\n        class=\"lc-sidenav__close\"\n        (click)=\"handleClose()\"\n        aria-label=\"Close navigation\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\">\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n        </svg>\n      </button>\n    }\n\n    <!-- Navigation items (if provided) -->\n    @if (items().length > 0) {\n      <nav class=\"lc-sidenav__nav\" [class.lc-sidenav__nav--docked]=\"effectiveMode() === 'docked'\">\n        @for (item of sortedItems(); track item.id) {\n          <!-- Section headline -->\n          @if (item.isSection) {\n            <div class=\"lc-sidenav__section\">\n              <div class=\"lc-sidenav__section-header\">\n                <h2 class=\"lc-sidenav__section-title\">{{ item.label }}</h2>\n                @if (item.action) {\n                  <button\n                    type=\"button\"\n                    class=\"lc-sidenav__action-btn\"\n                    [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n                    (click)=\"handleItemAction($event, item)\">\n                    <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                  </button>\n                }\n              </div>\n              @if (item.children?.length) {\n                <ul class=\"lc-sidenav__section-items\">\n                  @for (child of item.children; track child.id) {\n                    <li>\n                      @if (child.children?.length) {\n                        <!-- Section child with nested children (collapsible) -->\n                        <div class=\"lc-sidenav__nav-item-row\">\n                          <button\n                            type=\"button\"\n                            class=\"lc-sidenav__nav-item lc-sidenav__nav-item--parent\"\n                            [class.lc-sidenav__nav-item--expanded]=\"isExpanded(child)\"\n                            [class.lc-sidenav__nav-item--active]=\"hasActiveChild(child)\"\n                            (click)=\"toggleExpanded(child)\"\n                            [attr.aria-expanded]=\"isExpanded(child)\"\n                            [title]=\"collapsed() ? child.label : ''\">\n                            @if (child.icon) {\n                              <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                            }\n                            <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n                            @if (child.badge) {\n                              <lc-badge [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>\n                            }\n                            <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" class=\"lc-sidenav__nav-chevron\" />\n                          </button>\n                          @if (child.action) {\n                            <button\n                              type=\"button\"\n                              class=\"lc-sidenav__action-btn\"\n                              [attr.aria-label]=\"child.action.ariaLabel || child.label + ' action'\"\n                              (click)=\"handleItemAction($event, child)\">\n                              <lc-icon [name]=\"child.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                            </button>\n                          }\n                        </div>\n                        @if (isExpanded(child)) {\n                          <div class=\"lc-sidenav__nav-children\">\n                            @for (grandchild of child.children; track grandchild.id) {\n                              <a\n                                [routerLink]=\"grandchild.route\"\n                                routerLinkActive=\"lc-sidenav__nav-item--active\"\n                                class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                                (click)=\"handleItemClick(grandchild)\"\n                                [attr.aria-current]=\"isItemActive(grandchild) ? 'page' : null\">\n                                @if (grandchild.icon) {\n                                  <lc-icon [name]=\"grandchild.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                                }\n                                <span class=\"lc-sidenav__nav-label\">{{ grandchild.label }}</span>\n                                @if (grandchild.badge) {\n                                  <lc-badge [variant]=\"grandchild.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ grandchild.badge.value }}</lc-badge>\n                                }\n                              </a>\n                            }\n                          </div>\n                        }\n                      } @else {\n                        <!-- Section child (simple link) -->\n                        <div class=\"lc-sidenav__nav-item-row\">\n                          <a\n                            [routerLink]=\"child.route\"\n                            routerLinkActive=\"lc-sidenav__nav-item--active\"\n                            [routerLinkActiveOptions]=\"{ exact: child.route === '/' }\"\n                            class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                            (click)=\"handleItemClick(child)\"\n                            [attr.aria-current]=\"isItemActive(child) ? 'page' : null\"\n                            [title]=\"collapsed() ? child.label : ''\">\n                            @if (child.icon) {\n                              <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                            }\n                            <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n                            @if (child.badge) {\n                              <lc-badge [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>\n                            }\n                          </a>\n                          @if (child.action) {\n                            <button\n                              type=\"button\"\n                              class=\"lc-sidenav__action-btn\"\n                              [attr.aria-label]=\"child.action.ariaLabel || child.label + ' action'\"\n                              (click)=\"handleItemAction($event, child)\">\n                              <lc-icon [name]=\"child.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                            </button>\n                          }\n                        </div>\n                      }\n                    </li>\n                  }\n                </ul>\n              }\n            </div>\n          } @else if (item.children?.length) {\n            <!-- Parent item with children (collapsible group) -->\n            <div class=\"lc-sidenav__nav-item-row\">\n              <button\n                type=\"button\"\n                class=\"lc-sidenav__nav-item lc-sidenav__nav-item--parent\"\n                [class.lc-sidenav__nav-item--expanded]=\"isExpanded(item)\"\n                [class.lc-sidenav__nav-item--active]=\"hasActiveChild(item)\"\n                (click)=\"toggleExpanded(item)\"\n                [attr.aria-expanded]=\"isExpanded(item)\"\n                [title]=\"collapsed() ? item.label : ''\">\n                <lc-icon [name]=\"item.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                <span class=\"lc-sidenav__nav-label\">{{ item.label }}</span>\n                @if (item.badge) {\n                  <lc-badge [variant]=\"item.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ item.badge.value }}</lc-badge>\n                }\n                <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" class=\"lc-sidenav__nav-chevron\" />\n              </button>\n              @if (item.action) {\n                <button\n                  type=\"button\"\n                  class=\"lc-sidenav__action-btn\"\n                  [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n                  (click)=\"handleItemAction($event, item)\">\n                  <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                </button>\n              }\n            </div>\n            @if (isExpanded(item)) {\n              <div class=\"lc-sidenav__nav-children\">\n                @for (child of item.children; track child.id) {\n                  <a\n                    [routerLink]=\"child.route\"\n                    routerLinkActive=\"lc-sidenav__nav-item--active\"\n                    class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                    (click)=\"handleItemClick(child)\"\n                    [attr.aria-current]=\"isItemActive(child) ? 'page' : null\">\n                    <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                    <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n                    @if (child.badge) {\n                      <lc-badge [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>\n                    }\n                  </a>\n                }\n              </div>\n            }\n          } @else {\n            <!-- Simple item without children -->\n            <div class=\"lc-sidenav__nav-item-row\">\n              <a\n                [routerLink]=\"item.route\"\n                routerLinkActive=\"lc-sidenav__nav-item--active\"\n                [routerLinkActiveOptions]=\"{ exact: item.route === '/' }\"\n                class=\"lc-sidenav__nav-item\"\n                (click)=\"handleItemClick(item)\"\n                [attr.aria-current]=\"isItemActive(item) ? 'page' : null\"\n                [title]=\"collapsed() ? item.label : ''\">\n                <lc-icon [name]=\"item.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                <span class=\"lc-sidenav__nav-label\">{{ item.label }}</span>\n                @if (item.badge) {\n                  <lc-badge [variant]=\"item.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ item.badge.value }}</lc-badge>\n                }\n              </a>\n              @if (item.action) {\n                <button\n                  type=\"button\"\n                  class=\"lc-sidenav__action-btn\"\n                  [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n                  (click)=\"handleItemAction($event, item)\">\n                  <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                </button>\n              }\n            </div>\n          }\n        }\n      </nav>\n    }\n\n    <!-- Content projection (for custom content) -->\n    <div class=\"lc-sidenav__content\" [class.lc-sidenav__content--docked]=\"mode() === 'docked'\">\n      <ng-content></ng-content>\n    </div>\n  </aside>\n</ng-template>\n", styles: [".lc-sidenav-container{position:relative;z-index:1000}.lc-sidenav-container--docked{position:static;z-index:auto;height:100%}.lc-sidenav__overlay{position:fixed;inset:0;background-color:#00000080;opacity:0;animation:fadeIn .3s ease-out forwards;z-index:1000;cursor:pointer}@media(prefers-reduced-motion:reduce){.lc-sidenav__overlay{animation:none;opacity:1}}.lc-sidenav{--lc-sidenav-bg: var(--color-background, #ffffff);--lc-sidenav-fg: #374151;--lc-sidenav-fg-active: #111827;--lc-sidenav-border: var(--color-border, #e5e7eb);--lc-sidenav-hover-bg: #f3f4f6;--lc-sidenav-section-fg: #6b7280;position:fixed;top:0;bottom:0;background-color:var(--lc-sidenav-bg);box-shadow:var(--elevation-3, 0 10px 15px -3px rgba(0, 0, 0, .1));z-index:1001;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}.lc-sidenav--left{left:0}.lc-sidenav--right{right:0}.lc-sidenav--drawer.lc-sidenav--left{animation:slideInLeft .3s ease-out}.lc-sidenav--drawer.lc-sidenav--right{animation:slideInRight .3s ease-out}@media(prefers-reduced-motion:reduce){.lc-sidenav--drawer{animation:none!important}}.lc-sidenav--docked{position:static;z-index:auto;height:100%;box-shadow:none;border-right:1px solid var(--lc-sidenav-border, #e5e7eb);transform:translate(0);transition:width .3s ease,transform .3s ease}.lc-sidenav--docked:not(.lc-sidenav--open){width:0!important;overflow:hidden;border-right:none}.lc-sidenav--collapsed{width:56px!important;overflow:visible}.lc-sidenav--collapsed .lc-sidenav__nav-label,.lc-sidenav--collapsed .lc-sidenav__nav-chevron,.lc-sidenav--collapsed .lc-sidenav__section-title,.lc-sidenav--collapsed .lc-sidenav__action-btn,.lc-sidenav--collapsed .lc-sidenav__section-header{display:none}.lc-sidenav--collapsed .lc-sidenav__nav{padding:.5rem;gap:.125rem}.lc-sidenav--collapsed .lc-sidenav__nav-item-row .lc-sidenav__action-btn{display:none}.lc-sidenav--collapsed .lc-sidenav__nav-item{justify-content:center;padding:.625rem;gap:0;border-radius:var(--radius-md, .375rem);position:relative}.lc-sidenav--collapsed .lc-sidenav__nav-item:hover:after{content:attr(title);position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:8px;padding:4px 10px;background-color:var(--color-neutral-900, #111827);color:#fff;font-size:.75rem;white-space:nowrap;border-radius:4px;z-index:1002;pointer-events:none}.lc-sidenav--collapsed .lc-sidenav__nav-icon{width:22px;height:22px}.lc-sidenav--collapsed .lc-sidenav__nav-badge{position:absolute;top:2px;right:2px;margin-left:0;font-size:.625rem;min-width:0;padding:0 3px;line-height:1.2}.lc-sidenav--collapsed .lc-sidenav__nav-children{display:none}.lc-sidenav--collapsed .lc-sidenav__section-items{display:flex;flex-direction:column;gap:.125rem}.lc-sidenav--collapsed .lc-sidenav__section{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--color-divider, #e5e7eb)}.lc-sidenav--collapsed .lc-sidenav__content{display:none}.lc-sidenav--collapsed .lc-sidenav__logo{padding:var(--spacing-3);justify-content:center}.lc-sidenav__logo{display:flex;align-items:center;padding:var(--spacing-3) var(--spacing-4);border-bottom:1px solid var(--lc-sidenav-border);height:64px;flex-shrink:0}.lc-sidenav__logo-link{display:flex;align-items:center;text-decoration:none;color:var(--lc-sidenav-fg);background:transparent;border:none;padding:0;cursor:pointer}.lc-sidenav__logo-link:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:4px;border-radius:var(--radius-sm, .25rem)}.lc-sidenav__close{position:absolute;top:1rem;right:1rem;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;background:none;border:none;border-radius:var(--border-radius-md, .375rem);color:var(--color-text-secondary);cursor:pointer;transition:background-color .2s ease,color .2s ease;z-index:1}.lc-sidenav__close:hover{background-color:var(--color-surface);color:var(--color-text-primary)}.lc-sidenav__close:focus-visible{outline:2px solid var(--color-primary-500, rgb(59, 130, 246));outline-offset:2px}.lc-sidenav__close:active{background-color:var(--color-border)}.lc-sidenav__close svg{width:1.25rem;height:1.25rem}.lc-sidenav__nav{display:flex;flex-direction:column;gap:var(--spacing-1, .25rem);padding:4rem 1rem 1rem}.lc-sidenav__nav--docked{padding-top:1rem;gap:0}.lc-sidenav__section:not(:first-child){margin-top:var(--spacing-4, 1rem);padding-top:var(--spacing-3, .75rem)}.lc-sidenav__section-header{display:flex;align-items:center;justify-content:space-between;padding-right:var(--spacing-2, .5rem)}.lc-sidenav__section-title{padding:0 var(--spacing-3, .75rem);margin-bottom:var(--spacing-2, .5rem);font-size:var(--font-size-xs, .75rem);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--lc-sidenav-section-fg)}.lc-sidenav__section-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--spacing-1, .25rem)}.lc-sidenav__nav-item{display:flex;align-items:center;gap:var(--spacing-3, .75rem);padding:var(--spacing-2, .5rem) var(--spacing-3, .75rem);text-decoration:none;color:var(--lc-sidenav-fg);border-radius:var(--radius-md, .375rem);transition:background-color .2s ease,color .2s ease;font-size:var(--font-size-sm, .875rem);font-weight:500;cursor:pointer}.lc-sidenav__nav-item:hover{background-color:var(--lc-sidenav-hover-bg);color:var(--lc-sidenav-fg-active)}.lc-sidenav__nav-item:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-sidenav__nav-item--active{background-color:var(--color-primary-50, rgba(59, 130, 246, .1));color:var(--color-primary-700, #1d4ed8);font-weight:600}.lc-sidenav__nav-item--active .lc-sidenav__nav-icon{color:var(--color-primary-600, #2563eb)}.lc-sidenav__nav-icon{width:20px;height:20px;flex-shrink:0;color:currentColor}.lc-sidenav__nav-chevron{width:16px;height:16px;flex-shrink:0;margin-left:auto;transition:transform .2s ease}.lc-sidenav__nav-badge{flex-shrink:0;margin-left:auto}.lc-sidenav__nav-item--expanded .lc-sidenav__nav-chevron{transform:rotate(180deg)}.lc-sidenav__nav-item--parent{width:100%;border:none;background:none;font-family:inherit;text-align:left}.lc-sidenav__nav-children{display:flex;flex-direction:column;gap:var(--spacing-1, .25rem);padding-left:var(--spacing-4, 1rem)}.lc-sidenav__nav-item--child{font-size:var(--font-size-sm, .875rem)}.lc-sidenav__nav-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lc-sidenav__nav-item-row{display:flex;align-items:center}.lc-sidenav__nav-item-row .lc-sidenav__nav-item{flex:1;min-width:0}.lc-sidenav__nav-item-row .lc-sidenav__action-btn{opacity:0;transition:opacity .15s ease}.lc-sidenav__nav-item-row:hover .lc-sidenav__action-btn{opacity:1}.lc-sidenav__action-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;padding:0;background:transparent;border:none;border-radius:var(--radius-sm, .25rem);color:var(--lc-sidenav-section-fg);cursor:pointer;transition:background-color .15s ease,color .15s ease}.lc-sidenav__action-btn:hover{background-color:var(--lc-sidenav-hover-bg);color:var(--lc-sidenav-fg-active)}.lc-sidenav__action-btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px;opacity:1}.lc-sidenav__content{flex:1;padding:4rem 1rem 1rem;overflow-y:auto;-webkit-overflow-scrolling:touch}.lc-sidenav__content--docked{padding-top:1rem}.lc-sidenav__content::-webkit-scrollbar{width:.5rem}.lc-sidenav__content::-webkit-scrollbar-track{background:var(--color-surface);border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav__content::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav__content::-webkit-scrollbar-thumb:hover{background:var(--color-text-secondary)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@media(max-width:640px){.lc-sidenav--drawer{width:100%!important;max-width:320px}}@media(max-width:480px){.lc-sidenav--drawer{max-width:280px}}.lc-sidenav__content:focus{outline:none}.lc-sidenav__content a:focus-visible,.lc-sidenav__content button:focus-visible{outline:2px solid var(--color-primary-500, rgb(59, 130, 246));outline-offset:2px;border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav--dark{--lc-sidenav-bg: #18181b;--lc-sidenav-fg: #d4d4d8;--lc-sidenav-fg-active: #f5f5f5;--lc-sidenav-border: #3f3f46;--lc-sidenav-hover-bg: #27272a;--lc-sidenav-section-fg: #a1a1aa}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light){--lc-sidenav-bg: #18181b;--lc-sidenav-fg: #d4d4d8;--lc-sidenav-fg-active: #f5f5f5;--lc-sidenav-border: #3f3f46;--lc-sidenav-hover-bg: #27272a;--lc-sidenav-section-fg: #a1a1aa}@media print{.lc-sidenav-container,.lc-sidenav__overlay,.lc-sidenav{display:none}}\n"] }]
         }], propDecorators: { isOpenInput: [{
                 type: Input
             }], modeInput: [{
@@ -6311,6 +6431,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 type: Input
             }], collapsedInput: [{
                 type: Input
+            }], showLogoInput: [{
+                type: Input
+            }], mobileBreakpointInput: [{
+                type: Input
             }], themeInput: [{
                 type: Input,
                 args: ['theme']
@@ -6318,6 +6442,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 type: Output
             }], itemClicked: [{
                 type: Output
+            }], itemAction: [{
+                type: Output
             }], handleKeydown: [{
                 type: HostListener,
                 args: ['document:keydown', ['$event']]
@@ -6615,48 +6741,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 type: Input
             }] } });
 
-/**
- * Badge component for displaying status, notifications, or counts.
- *
- * Features:
- * - Semantic color variants (primary, secondary, success, warning, error, info, neutral)
- * - Multiple size options (xs, sm, md, lg)
- * - Pill-shaped rounded mode
- * - Content projection for labels or count values
- *
- * @example
- * ```html
- * <lc-badge variant="primary" size="md">New</lc-badge>
- * <lc-badge variant="error" size="sm" [rounded]="true">5</lc-badge>
- * ```
- */
-class BadgeComponent {
-    /** Visual variant of the badge */
-    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    /** Size of the badge */
-    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    /** Whether the badge has fully rounded corners (pill shape) */
-    rounded = input(false, ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
-    /**
-     * Computed CSS classes for the badge
-     */
-    badgeClasses = computed(() => {
-        const classes = ['lc-badge'];
-        classes.push(`lc-badge--${this.variant()}`);
-        classes.push(`lc-badge--${this.size()}`);
-        if (this.rounded()) {
-            classes.push('lc-badge--rounded');
-        }
-        return classes.join(' ');
-    }, ...(ngDevMode ? [{ debugName: "badgeClasses" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.10", type: BadgeComponent, isStandalone: true, selector: "lc-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span [class]=\"badgeClasses()\">\n  <ng-content></ng-content>\n</span>\n", styles: [".lc-badge{display:inline-flex;align-items:center;justify-content:center;font-weight:var(--typography-font-weight-medium, 500);line-height:1;border-radius:var(--border-radius-sm, .25rem);white-space:nowrap;transition:background-color .15s ease,color .15s ease}.lc-badge--xs{padding:.125rem .375rem;font-size:var(--typography-font-size-xs, .75rem);min-width:1.25rem;height:1.25rem}.lc-badge--sm{padding:.25rem .5rem;font-size:var(--typography-font-size-sm, .875rem);min-width:1.5rem;height:1.5rem}.lc-badge--md{padding:.375rem .625rem;font-size:var(--typography-font-size-sm, .875rem);min-width:1.75rem;height:1.75rem}.lc-badge--lg{padding:.5rem .75rem;font-size:var(--typography-font-size-base, 1rem);min-width:2rem;height:2rem}.lc-badge--default{background-color:var(--color-neutral-200, #e5e7eb);color:var(--color-neutral-800, #1f2937)}[data-theme=dark] .lc-badge--default,:root[data-theme=dark] .lc-badge--default{background-color:var(--color-neutral-700, #374151);color:var(--color-neutral-100, #f3f4f6)}.lc-badge--primary{background-color:var(--color-primary-100, #dbeafe);color:var(--color-primary-800, #1e3a5f)}[data-theme=dark] .lc-badge--primary,:root[data-theme=dark] .lc-badge--primary{background-color:var(--color-primary-900, #1e3a5f);color:var(--color-primary-200, #bfdbfe)}.lc-badge--success{background-color:var(--color-success-light, #dcfce7);color:var(--color-success-dark, #166534)}[data-theme=dark] .lc-badge--success,:root[data-theme=dark] .lc-badge--success{background-color:#22c55e33;color:#86efac}.lc-badge--warning{background-color:var(--color-warning-light, #fef3c7);color:var(--color-warning-dark, #92400e)}[data-theme=dark] .lc-badge--warning,:root[data-theme=dark] .lc-badge--warning{background-color:#fbbf2433;color:#fde047}.lc-badge--error{background-color:var(--color-error-light, #fee2e2);color:var(--color-error-dark, #991b1b)}[data-theme=dark] .lc-badge--error,:root[data-theme=dark] .lc-badge--error{background-color:#ef444433;color:#fca5a5}.lc-badge--info{background-color:var(--color-info-light, #dbeafe);color:var(--color-info-dark, #1e40af)}[data-theme=dark] .lc-badge--info,:root[data-theme=dark] .lc-badge--info{background-color:#3b82f633;color:#93c5fd}.lc-badge--rounded{border-radius:var(--border-radius-full, 9999px)}@media(max-width:640px){.lc-badge--lg{padding:.5rem .875rem}}@media print{.lc-badge{border:1px solid currentColor}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: BadgeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lc-badge', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<span [class]=\"badgeClasses()\">\n  <ng-content></ng-content>\n</span>\n", styles: [".lc-badge{display:inline-flex;align-items:center;justify-content:center;font-weight:var(--typography-font-weight-medium, 500);line-height:1;border-radius:var(--border-radius-sm, .25rem);white-space:nowrap;transition:background-color .15s ease,color .15s ease}.lc-badge--xs{padding:.125rem .375rem;font-size:var(--typography-font-size-xs, .75rem);min-width:1.25rem;height:1.25rem}.lc-badge--sm{padding:.25rem .5rem;font-size:var(--typography-font-size-sm, .875rem);min-width:1.5rem;height:1.5rem}.lc-badge--md{padding:.375rem .625rem;font-size:var(--typography-font-size-sm, .875rem);min-width:1.75rem;height:1.75rem}.lc-badge--lg{padding:.5rem .75rem;font-size:var(--typography-font-size-base, 1rem);min-width:2rem;height:2rem}.lc-badge--default{background-color:var(--color-neutral-200, #e5e7eb);color:var(--color-neutral-800, #1f2937)}[data-theme=dark] .lc-badge--default,:root[data-theme=dark] .lc-badge--default{background-color:var(--color-neutral-700, #374151);color:var(--color-neutral-100, #f3f4f6)}.lc-badge--primary{background-color:var(--color-primary-100, #dbeafe);color:var(--color-primary-800, #1e3a5f)}[data-theme=dark] .lc-badge--primary,:root[data-theme=dark] .lc-badge--primary{background-color:var(--color-primary-900, #1e3a5f);color:var(--color-primary-200, #bfdbfe)}.lc-badge--success{background-color:var(--color-success-light, #dcfce7);color:var(--color-success-dark, #166534)}[data-theme=dark] .lc-badge--success,:root[data-theme=dark] .lc-badge--success{background-color:#22c55e33;color:#86efac}.lc-badge--warning{background-color:var(--color-warning-light, #fef3c7);color:var(--color-warning-dark, #92400e)}[data-theme=dark] .lc-badge--warning,:root[data-theme=dark] .lc-badge--warning{background-color:#fbbf2433;color:#fde047}.lc-badge--error{background-color:var(--color-error-light, #fee2e2);color:var(--color-error-dark, #991b1b)}[data-theme=dark] .lc-badge--error,:root[data-theme=dark] .lc-badge--error{background-color:#ef444433;color:#fca5a5}.lc-badge--info{background-color:var(--color-info-light, #dbeafe);color:var(--color-info-dark, #1e40af)}[data-theme=dark] .lc-badge--info,:root[data-theme=dark] .lc-badge--info{background-color:#3b82f633;color:#93c5fd}.lc-badge--rounded{border-radius:var(--border-radius-full, 9999px)}@media(max-width:640px){.lc-badge--lg{padding:.5rem .875rem}}@media print{.lc-badge{border:1px solid currentColor}}\n"] }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }] } });
-
 /**
  * Toggle group component for single-option selection from a set.
  *