@life-cockpit/angular-ui-kit 1.11.0 → 1.11.2

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

@@ -6160,13 +6160,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
  * @example
  * ```html
  * <lc-sidenav
- *   [isOpenInput]="isOpen"
- *   modeInput="docked"
- *   [collapsedInput]="isCollapsed"
- *   [showLogoInput]="true"
- *   [mobileBreakpointInput]="768"
- *   [itemsInput]="navItems"
- *   activeRouteInput="/dashboard"
+ *   [isOpen]="isOpen"
+ *   mode="docked"
+ *   [(collapsed)]="isCollapsed"
+ *   [showLogo]="true"
+ *   logoSize="md"
+ *   [mobileBreakpoint]="768"
+ *   [items]="navItems"
+ *   activeRoute="/dashboard"
  *   theme="dark"
  *   (closed)="isOpen = false"
  *   (itemClicked)="navigate($event)"
@@ -6367,7 +6368,7 @@ 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: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, showLogo: { classPropertyName: "showLogo", publicName: "showLogo", isSignal: true, isRequired: false, transformFunction: null }, logoSrc: { classPropertyName: "logoSrc", publicName: "logoSrc", isSignal: true, isRequired: false, transformFunction: null }, logoEmblemSrc: { classPropertyName: "logoEmblemSrc", publicName: "logoEmblemSrc", isSignal: true, isRequired: false, transformFunction: null }, logoDarkSrc: { classPropertyName: "logoDarkSrc", publicName: "logoDarkSrc", isSignal: true, isRequired: false, transformFunction: null }, logoDarkEmblemSrc: { classPropertyName: "logoDarkEmblemSrc", publicName: "logoDarkEmblemSrc", isSignal: true, isRequired: false, transformFunction: null }, logoAlt: { classPropertyName: "logoAlt", publicName: "logoAlt", isSignal: true, isRequired: false, transformFunction: null }, logoSize: { classPropertyName: "logoSize", publicName: "logoSize", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, mobileBreakpoint: { classPropertyName: "mobileBreakpoint", publicName: "mobileBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, hasOverlay: { classPropertyName: "hasOverlay", publicName: "hasOverlay", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, activeRoute: { classPropertyName: "activeRoute", publicName: "activeRoute", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", 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\n        class=\"lc-sidenav__logo\"\n        [class.lc-sidenav__logo--size-xs]=\"logoSize() === 'xs'\"\n        [class.lc-sidenav__logo--size-sm]=\"logoSize() === 'sm'\"\n        [class.lc-sidenav__logo--size-md]=\"logoSize() === 'md'\"\n        [class.lc-sidenav__logo--size-lg]=\"logoSize() === 'lg'\"\n        [class.lc-sidenav__logo--size-xl]=\"logoSize() === 'xl'\"\n      >\n        <button type=\"button\" class=\"lc-sidenav__logo-link\" aria-label=\"Toggle sidebar\" (click)=\"toggleCollapsed()\">\n          <lc-logo\n            [variant]=\"collapsed() ? 'emblem' : 'full'\"\n            [size]=\"logoSize()\"\n            [clickable]=\"false\"\n            [colorMode]=\"theme() === 'dark' ? 'dark' : theme() === 'light' ? 'light' : 'auto'\"\n            [src]=\"logoSrc()\"\n            [emblemSrc]=\"logoEmblemSrc()\"\n            [darkSrc]=\"logoDarkSrc()\"\n            [darkEmblemSrc]=\"logoDarkEmblemSrc()\"\n            [alt]=\"logoAlt() || 'Logo'\"\n          />\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--has-active-child]=\"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--has-active-child]=\"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:0 var(--spacing-3);justify-content:center}.lc-sidenav__logo{display:flex;align-items:center;padding:0 var(--spacing-4);border-bottom:1px solid var(--lc-sidenav-border);min-height:64px;flex-shrink:0}.lc-sidenav__logo--size-xs,.lc-sidenav__logo--size-sm{min-height:56px}.lc-sidenav__logo--size-md{min-height:64px}.lc-sidenav__logo--size-lg{min-height:80px}.lc-sidenav__logo--size-xl{min-height:112px}.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(--lc-density-gap-xs, var(--spacing-1, .25rem));padding:var(--lc-density-padding-md, 1rem);padding-top:4rem}.lc-sidenav__nav--docked{padding-top:var(--lc-density-padding-md, 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:0;margin-bottom:var(--spacing-1, .25rem)}.lc-sidenav__section-title{padding:0 var(--spacing-3, .75rem);margin-bottom:0;font-size:var(--font-size-xs, .75rem);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--lc-sidenav-section-fg);line-height:28px}.lc-sidenav__section-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1, .25rem))}.lc-sidenav__nav-item{display:flex;align-items:center;gap:var(--spacing-3, .75rem);padding:var(--lc-density-padding-xs, 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-item--active:hover{background-color:var(--color-primary-50, rgba(59, 130, 246, .1));color:var(--color-primary-700, #1d4ed8)}.lc-sidenav__nav-item--has-active-child{color:var(--lc-sidenav-fg-active);font-weight:600}.lc-sidenav__nav-item--has-active-child .lc-sidenav__nav-icon{color:var(--lc-sidenav-fg-active)}.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(--lc-density-gap-xs, 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:28px;height:28px;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: #1e1e22;--lc-sidenav-fg: #d4d4d8;--lc-sidenav-fg-active: #f5f5f5;--lc-sidenav-border: #3f3f46;--lc-sidenav-hover-bg: #2a2a2f;--lc-sidenav-section-fg: #a1a1aa;--lc-sidenav-active-bg: rgba(45, 212, 191, .12);--lc-sidenav-active-fg: #5eead4;--lc-sidenav-active-icon: #2dd4bf}.lc-sidenav--dark .lc-sidenav__nav-item--active{background-color:var(--lc-sidenav-active-bg);color:var(--lc-sidenav-active-fg)}.lc-sidenav--dark .lc-sidenav__nav-item--active .lc-sidenav__nav-icon{color:var(--lc-sidenav-active-icon)}.lc-sidenav--dark .lc-sidenav__nav-item--active:hover{background-color:var(--lc-sidenav-active-bg);color:var(--lc-sidenav-active-fg)}.lc-sidenav--dark .lc-sidenav__nav-item--has-active-child,.lc-sidenav--dark .lc-sidenav__nav-item--has-active-child .lc-sidenav__nav-icon{color:var(--lc-sidenav-fg-active)}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light){--lc-sidenav-bg: #1e1e22;--lc-sidenav-fg: #d4d4d8;--lc-sidenav-fg-active: #f5f5f5;--lc-sidenav-border: #3f3f46;--lc-sidenav-hover-bg: #2a2a2f;--lc-sidenav-section-fg: #a1a1aa;--lc-sidenav-active-bg: rgba(45, 212, 191, .12);--lc-sidenav-active-fg: #5eead4;--lc-sidenav-active-icon: #2dd4bf}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light) .lc-sidenav__nav-item--active{background-color:var(--lc-sidenav-active-bg);color:var(--lc-sidenav-active-fg)}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light) .lc-sidenav__nav-item--active .lc-sidenav__nav-icon{color:var(--lc-sidenav-active-icon)}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light) .lc-sidenav__nav-item--active:hover{background-color:var(--lc-sidenav-active-bg);color:var(--lc-sidenav-active-fg)}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light) .lc-sidenav__nav-item--has-active-child{color:var(--lc-sidenav-fg-active)}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light) .lc-sidenav__nav-item--has-active-child .lc-sidenav__nav-icon{color:var(--lc-sidenav-fg-active)}@media print{.lc-sidenav-container,.lc-sidenav__overlay,.lc-sidenav{display:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$3.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", "src", "emblemSrc", "darkSrc", "darkEmblemSrc"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: SidenavComponent, isStandalone: true, selector: "lc-sidenav", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, showLogo: { classPropertyName: "showLogo", publicName: "showLogo", isSignal: true, isRequired: false, transformFunction: null }, logoSrc: { classPropertyName: "logoSrc", publicName: "logoSrc", isSignal: true, isRequired: false, transformFunction: null }, logoEmblemSrc: { classPropertyName: "logoEmblemSrc", publicName: "logoEmblemSrc", isSignal: true, isRequired: false, transformFunction: null }, logoDarkSrc: { classPropertyName: "logoDarkSrc", publicName: "logoDarkSrc", isSignal: true, isRequired: false, transformFunction: null }, logoDarkEmblemSrc: { classPropertyName: "logoDarkEmblemSrc", publicName: "logoDarkEmblemSrc", isSignal: true, isRequired: false, transformFunction: null }, logoAlt: { classPropertyName: "logoAlt", publicName: "logoAlt", isSignal: true, isRequired: false, transformFunction: null }, logoSize: { classPropertyName: "logoSize", publicName: "logoSize", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, mobileBreakpoint: { classPropertyName: "mobileBreakpoint", publicName: "mobileBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, hasOverlay: { classPropertyName: "hasOverlay", publicName: "hasOverlay", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, activeRoute: { classPropertyName: "activeRoute", publicName: "activeRoute", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", 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\n        class=\"lc-sidenav__logo\"\n        [class.lc-sidenav__logo--size-xs]=\"logoSize() === 'xs'\"\n        [class.lc-sidenav__logo--size-sm]=\"logoSize() === 'sm'\"\n        [class.lc-sidenav__logo--size-md]=\"logoSize() === 'md'\"\n        [class.lc-sidenav__logo--size-lg]=\"logoSize() === 'lg'\"\n        [class.lc-sidenav__logo--size-xl]=\"logoSize() === 'xl'\"\n      >\n        <button type=\"button\" class=\"lc-sidenav__logo-link\" aria-label=\"Toggle sidebar\" (click)=\"toggleCollapsed()\">\n          <lc-logo\n            [variant]=\"collapsed() ? 'emblem' : 'full'\"\n            [size]=\"collapsed() ? 'sm' : logoSize()\"\n            [clickable]=\"false\"\n            [colorMode]=\"theme() === 'dark' ? 'dark' : theme() === 'light' ? 'light' : 'auto'\"\n            [src]=\"logoSrc()\"\n            [emblemSrc]=\"logoEmblemSrc()\"\n            [darkSrc]=\"logoDarkSrc()\"\n            [darkEmblemSrc]=\"logoDarkEmblemSrc()\"\n            [alt]=\"logoAlt() || 'Logo'\"\n          />\n        </button>\n        @if (!collapsed() && effectiveMode() === 'docked') {\n          <button\n            type=\"button\"\n            class=\"lc-sidenav__logo-toggle\"\n            (click)=\"toggleCollapsed()\"\n            [attr.aria-label]=\"position() === 'right' ? 'Collapse navigation to the right' : 'Collapse navigation to the left'\"\n            title=\"Collapse sidebar\">\n            <lc-icon\n              [name]=\"position() === 'right' ? 'chevron-right' : 'chevron-left'\"\n              size=\"sm\"\n              [decorative]=\"true\" />\n          </button>\n        }\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--has-active-child]=\"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--has-active-child]=\"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:0;justify-content:center}.lc-sidenav__logo{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-3);padding:0 var(--spacing-4);border-bottom:1px solid var(--lc-sidenav-border);min-height:64px;flex-shrink:0}.lc-sidenav__logo--size-xs,.lc-sidenav__logo--size-sm{min-height:56px}.lc-sidenav__logo--size-md{min-height:64px}.lc-sidenav__logo--size-lg{min-height:80px}.lc-sidenav__logo--size-xl{min-height:112px}.lc-sidenav__logo-link{display:flex;align-items:center;flex:0 1 auto;min-width:0;max-width:100%;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__logo-toggle{display:inline-flex;align-items:center;justify-content:center;width:1.875rem;height:1.875rem;border:none;border-radius:var(--radius-md, .375rem);background:transparent;color:var(--lc-sidenav-fg);opacity:.8;flex-shrink:0;cursor:pointer;transition:background-color .2s ease,color .2s ease,opacity .2s ease}.lc-sidenav__logo-toggle:hover{background-color:var(--lc-sidenav-hover-bg);opacity:1}.lc-sidenav__logo-toggle:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.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(--lc-density-gap-xs, var(--spacing-1, .25rem));padding:var(--lc-density-padding-md, 1rem);padding-top:4rem}.lc-sidenav__nav--docked{padding-top:var(--lc-density-padding-md, 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:0;margin-bottom:var(--spacing-1, .25rem)}.lc-sidenav__section-title{padding:0 var(--spacing-3, .75rem);margin-bottom:0;font-size:var(--font-size-xs, .75rem);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--lc-sidenav-section-fg);line-height:28px}.lc-sidenav__section-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1, .25rem))}.lc-sidenav__nav-item{display:flex;align-items:center;gap:var(--spacing-3, .75rem);padding:var(--lc-density-padding-xs, 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-item--active:hover{background-color:var(--color-primary-50, rgba(59, 130, 246, .1));color:var(--color-primary-700, #1d4ed8)}.lc-sidenav__nav-item--has-active-child{color:var(--lc-sidenav-fg-active);font-weight:600}.lc-sidenav__nav-item--has-active-child .lc-sidenav__nav-icon{color:var(--lc-sidenav-fg-active)}.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(--lc-density-gap-xs, 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:28px;height:28px;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: #1e1e22;--lc-sidenav-fg: #d4d4d8;--lc-sidenav-fg-active: #f5f5f5;--lc-sidenav-border: #3f3f46;--lc-sidenav-hover-bg: #2a2a2f;--lc-sidenav-section-fg: #a1a1aa;--lc-sidenav-active-bg: rgba(45, 212, 191, .12);--lc-sidenav-active-fg: #5eead4;--lc-sidenav-active-icon: #2dd4bf}.lc-sidenav--dark .lc-sidenav__nav-item--active{background-color:var(--lc-sidenav-active-bg);color:var(--lc-sidenav-active-fg)}.lc-sidenav--dark .lc-sidenav__nav-item--active .lc-sidenav__nav-icon{color:var(--lc-sidenav-active-icon)}.lc-sidenav--dark .lc-sidenav__nav-item--active:hover{background-color:var(--lc-sidenav-active-bg);color:var(--lc-sidenav-active-fg)}.lc-sidenav--dark .lc-sidenav__nav-item--has-active-child,.lc-sidenav--dark .lc-sidenav__nav-item--has-active-child .lc-sidenav__nav-icon{color:var(--lc-sidenav-fg-active)}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light){--lc-sidenav-bg: #1e1e22;--lc-sidenav-fg: #d4d4d8;--lc-sidenav-fg-active: #f5f5f5;--lc-sidenav-border: #3f3f46;--lc-sidenav-hover-bg: #2a2a2f;--lc-sidenav-section-fg: #a1a1aa;--lc-sidenav-active-bg: rgba(45, 212, 191, .12);--lc-sidenav-active-fg: #5eead4;--lc-sidenav-active-icon: #2dd4bf}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light) .lc-sidenav__nav-item--active{background-color:var(--lc-sidenav-active-bg);color:var(--lc-sidenav-active-fg)}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light) .lc-sidenav__nav-item--active .lc-sidenav__nav-icon{color:var(--lc-sidenav-active-icon)}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light) .lc-sidenav__nav-item--active:hover{background-color:var(--lc-sidenav-active-bg);color:var(--lc-sidenav-active-fg)}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light) .lc-sidenav__nav-item--has-active-child{color:var(--lc-sidenav-fg-active)}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light) .lc-sidenav__nav-item--has-active-child .lc-sidenav__nav-icon{color:var(--lc-sidenav-fg-active)}@media print{.lc-sidenav-container,.lc-sidenav__overlay,.lc-sidenav{display:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$3.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", "src", "emblemSrc", "darkSrc", "darkEmblemSrc"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: SidenavComponent, decorators: [{
             type: Component,
@@ -6375,7 +6376,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                         '[class.lc-sidenav-container]': 'true',
                         '[class.lc-sidenav-container--docked]': "effectiveMode() === 'docked'",
                         '[class.lc-sidenav-container--open]': 'isOpen()',
-                    }, 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\n        class=\"lc-sidenav__logo\"\n        [class.lc-sidenav__logo--size-xs]=\"logoSize() === 'xs'\"\n        [class.lc-sidenav__logo--size-sm]=\"logoSize() === 'sm'\"\n        [class.lc-sidenav__logo--size-md]=\"logoSize() === 'md'\"\n        [class.lc-sidenav__logo--size-lg]=\"logoSize() === 'lg'\"\n        [class.lc-sidenav__logo--size-xl]=\"logoSize() === 'xl'\"\n      >\n        <button type=\"button\" class=\"lc-sidenav__logo-link\" aria-label=\"Toggle sidebar\" (click)=\"toggleCollapsed()\">\n          <lc-logo\n            [variant]=\"collapsed() ? 'emblem' : 'full'\"\n            [size]=\"logoSize()\"\n            [clickable]=\"false\"\n            [colorMode]=\"theme() === 'dark' ? 'dark' : theme() === 'light' ? 'light' : 'auto'\"\n            [src]=\"logoSrc()\"\n            [emblemSrc]=\"logoEmblemSrc()\"\n            [darkSrc]=\"logoDarkSrc()\"\n            [darkEmblemSrc]=\"logoDarkEmblemSrc()\"\n            [alt]=\"logoAlt() || 'Logo'\"\n          />\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--has-active-child]=\"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--has-active-child]=\"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:0 var(--spacing-3);justify-content:center}.lc-sidenav__logo{display:flex;align-items:center;padding:0 var(--spacing-4);border-bottom:1px solid var(--lc-sidenav-border);min-height:64px;flex-shrink:0}.lc-sidenav__logo--size-xs,.lc-sidenav__logo--size-sm{min-height:56px}.lc-sidenav__logo--size-md{min-height:64px}.lc-sidenav__logo--size-lg{min-height:80px}.lc-sidenav__logo--size-xl{min-height:112px}.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(--lc-density-gap-xs, var(--spacing-1, .25rem));padding:var(--lc-density-padding-md, 1rem);padding-top:4rem}.lc-sidenav__nav--docked{padding-top:var(--lc-density-padding-md, 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:0;margin-bottom:var(--spacing-1, .25rem)}.lc-sidenav__section-title{padding:0 var(--spacing-3, .75rem);margin-bottom:0;font-size:var(--font-size-xs, .75rem);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--lc-sidenav-section-fg);line-height:28px}.lc-sidenav__section-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1, .25rem))}.lc-sidenav__nav-item{display:flex;align-items:center;gap:var(--spacing-3, .75rem);padding:var(--lc-density-padding-xs, 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-item--active:hover{background-color:var(--color-primary-50, rgba(59, 130, 246, .1));color:var(--color-primary-700, #1d4ed8)}.lc-sidenav__nav-item--has-active-child{color:var(--lc-sidenav-fg-active);font-weight:600}.lc-sidenav__nav-item--has-active-child .lc-sidenav__nav-icon{color:var(--lc-sidenav-fg-active)}.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(--lc-density-gap-xs, 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:28px;height:28px;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: #1e1e22;--lc-sidenav-fg: #d4d4d8;--lc-sidenav-fg-active: #f5f5f5;--lc-sidenav-border: #3f3f46;--lc-sidenav-hover-bg: #2a2a2f;--lc-sidenav-section-fg: #a1a1aa;--lc-sidenav-active-bg: rgba(45, 212, 191, .12);--lc-sidenav-active-fg: #5eead4;--lc-sidenav-active-icon: #2dd4bf}.lc-sidenav--dark .lc-sidenav__nav-item--active{background-color:var(--lc-sidenav-active-bg);color:var(--lc-sidenav-active-fg)}.lc-sidenav--dark .lc-sidenav__nav-item--active .lc-sidenav__nav-icon{color:var(--lc-sidenav-active-icon)}.lc-sidenav--dark .lc-sidenav__nav-item--active:hover{background-color:var(--lc-sidenav-active-bg);color:var(--lc-sidenav-active-fg)}.lc-sidenav--dark .lc-sidenav__nav-item--has-active-child,.lc-sidenav--dark .lc-sidenav__nav-item--has-active-child .lc-sidenav__nav-icon{color:var(--lc-sidenav-fg-active)}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light){--lc-sidenav-bg: #1e1e22;--lc-sidenav-fg: #d4d4d8;--lc-sidenav-fg-active: #f5f5f5;--lc-sidenav-border: #3f3f46;--lc-sidenav-hover-bg: #2a2a2f;--lc-sidenav-section-fg: #a1a1aa;--lc-sidenav-active-bg: rgba(45, 212, 191, .12);--lc-sidenav-active-fg: #5eead4;--lc-sidenav-active-icon: #2dd4bf}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light) .lc-sidenav__nav-item--active{background-color:var(--lc-sidenav-active-bg);color:var(--lc-sidenav-active-fg)}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light) .lc-sidenav__nav-item--active .lc-sidenav__nav-icon{color:var(--lc-sidenav-active-icon)}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light) .lc-sidenav__nav-item--active:hover{background-color:var(--lc-sidenav-active-bg);color:var(--lc-sidenav-active-fg)}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light) .lc-sidenav__nav-item--has-active-child{color:var(--lc-sidenav-fg-active)}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light) .lc-sidenav__nav-item--has-active-child .lc-sidenav__nav-icon{color:var(--lc-sidenav-fg-active)}@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\n        class=\"lc-sidenav__logo\"\n        [class.lc-sidenav__logo--size-xs]=\"logoSize() === 'xs'\"\n        [class.lc-sidenav__logo--size-sm]=\"logoSize() === 'sm'\"\n        [class.lc-sidenav__logo--size-md]=\"logoSize() === 'md'\"\n        [class.lc-sidenav__logo--size-lg]=\"logoSize() === 'lg'\"\n        [class.lc-sidenav__logo--size-xl]=\"logoSize() === 'xl'\"\n      >\n        <button type=\"button\" class=\"lc-sidenav__logo-link\" aria-label=\"Toggle sidebar\" (click)=\"toggleCollapsed()\">\n          <lc-logo\n            [variant]=\"collapsed() ? 'emblem' : 'full'\"\n            [size]=\"collapsed() ? 'sm' : logoSize()\"\n            [clickable]=\"false\"\n            [colorMode]=\"theme() === 'dark' ? 'dark' : theme() === 'light' ? 'light' : 'auto'\"\n            [src]=\"logoSrc()\"\n            [emblemSrc]=\"logoEmblemSrc()\"\n            [darkSrc]=\"logoDarkSrc()\"\n            [darkEmblemSrc]=\"logoDarkEmblemSrc()\"\n            [alt]=\"logoAlt() || 'Logo'\"\n          />\n        </button>\n        @if (!collapsed() && effectiveMode() === 'docked') {\n          <button\n            type=\"button\"\n            class=\"lc-sidenav__logo-toggle\"\n            (click)=\"toggleCollapsed()\"\n            [attr.aria-label]=\"position() === 'right' ? 'Collapse navigation to the right' : 'Collapse navigation to the left'\"\n            title=\"Collapse sidebar\">\n            <lc-icon\n              [name]=\"position() === 'right' ? 'chevron-right' : 'chevron-left'\"\n              size=\"sm\"\n              [decorative]=\"true\" />\n          </button>\n        }\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--has-active-child]=\"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--has-active-child]=\"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:0;justify-content:center}.lc-sidenav__logo{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-3);padding:0 var(--spacing-4);border-bottom:1px solid var(--lc-sidenav-border);min-height:64px;flex-shrink:0}.lc-sidenav__logo--size-xs,.lc-sidenav__logo--size-sm{min-height:56px}.lc-sidenav__logo--size-md{min-height:64px}.lc-sidenav__logo--size-lg{min-height:80px}.lc-sidenav__logo--size-xl{min-height:112px}.lc-sidenav__logo-link{display:flex;align-items:center;flex:0 1 auto;min-width:0;max-width:100%;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__logo-toggle{display:inline-flex;align-items:center;justify-content:center;width:1.875rem;height:1.875rem;border:none;border-radius:var(--radius-md, .375rem);background:transparent;color:var(--lc-sidenav-fg);opacity:.8;flex-shrink:0;cursor:pointer;transition:background-color .2s ease,color .2s ease,opacity .2s ease}.lc-sidenav__logo-toggle:hover{background-color:var(--lc-sidenav-hover-bg);opacity:1}.lc-sidenav__logo-toggle:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.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(--lc-density-gap-xs, var(--spacing-1, .25rem));padding:var(--lc-density-padding-md, 1rem);padding-top:4rem}.lc-sidenav__nav--docked{padding-top:var(--lc-density-padding-md, 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:0;margin-bottom:var(--spacing-1, .25rem)}.lc-sidenav__section-title{padding:0 var(--spacing-3, .75rem);margin-bottom:0;font-size:var(--font-size-xs, .75rem);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--lc-sidenav-section-fg);line-height:28px}.lc-sidenav__section-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1, .25rem))}.lc-sidenav__nav-item{display:flex;align-items:center;gap:var(--spacing-3, .75rem);padding:var(--lc-density-padding-xs, 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-item--active:hover{background-color:var(--color-primary-50, rgba(59, 130, 246, .1));color:var(--color-primary-700, #1d4ed8)}.lc-sidenav__nav-item--has-active-child{color:var(--lc-sidenav-fg-active);font-weight:600}.lc-sidenav__nav-item--has-active-child .lc-sidenav__nav-icon{color:var(--lc-sidenav-fg-active)}.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(--lc-density-gap-xs, 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:28px;height:28px;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: #1e1e22;--lc-sidenav-fg: #d4d4d8;--lc-sidenav-fg-active: #f5f5f5;--lc-sidenav-border: #3f3f46;--lc-sidenav-hover-bg: #2a2a2f;--lc-sidenav-section-fg: #a1a1aa;--lc-sidenav-active-bg: rgba(45, 212, 191, .12);--lc-sidenav-active-fg: #5eead4;--lc-sidenav-active-icon: #2dd4bf}.lc-sidenav--dark .lc-sidenav__nav-item--active{background-color:var(--lc-sidenav-active-bg);color:var(--lc-sidenav-active-fg)}.lc-sidenav--dark .lc-sidenav__nav-item--active .lc-sidenav__nav-icon{color:var(--lc-sidenav-active-icon)}.lc-sidenav--dark .lc-sidenav__nav-item--active:hover{background-color:var(--lc-sidenav-active-bg);color:var(--lc-sidenav-active-fg)}.lc-sidenav--dark .lc-sidenav__nav-item--has-active-child,.lc-sidenav--dark .lc-sidenav__nav-item--has-active-child .lc-sidenav__nav-icon{color:var(--lc-sidenav-fg-active)}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light){--lc-sidenav-bg: #1e1e22;--lc-sidenav-fg: #d4d4d8;--lc-sidenav-fg-active: #f5f5f5;--lc-sidenav-border: #3f3f46;--lc-sidenav-hover-bg: #2a2a2f;--lc-sidenav-section-fg: #a1a1aa;--lc-sidenav-active-bg: rgba(45, 212, 191, .12);--lc-sidenav-active-fg: #5eead4;--lc-sidenav-active-icon: #2dd4bf}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light) .lc-sidenav__nav-item--active{background-color:var(--lc-sidenav-active-bg);color:var(--lc-sidenav-active-fg)}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light) .lc-sidenav__nav-item--active .lc-sidenav__nav-icon{color:var(--lc-sidenav-active-icon)}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light) .lc-sidenav__nav-item--active:hover{background-color:var(--lc-sidenav-active-bg);color:var(--lc-sidenav-active-fg)}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light) .lc-sidenav__nav-item--has-active-child{color:var(--lc-sidenav-fg-active)}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light) .lc-sidenav__nav-item--has-active-child .lc-sidenav__nav-icon{color:var(--lc-sidenav-fg-active)}@media print{.lc-sidenav-container,.lc-sidenav__overlay,.lc-sidenav{display:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], showLogo: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLogo", required: false }] }], logoSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoSrc", required: false }] }], logoEmblemSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoEmblemSrc", required: false }] }], logoDarkSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoDarkSrc", required: false }] }], logoDarkEmblemSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoDarkEmblemSrc", required: false }] }], logoAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoAlt", required: false }] }], logoSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoSize", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], mobileBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileBreakpoint", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hasOverlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasOverlay", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], activeRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeRoute", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }], itemAction: [{ type: i0.Output, args: ["itemAction"] }], handleKeydown: [{
                 type: HostListener,
                 args: ['document:keydown', ['$event']]
@@ -10506,6 +10507,9 @@ class MarkdownComponent {
     sanitizer = inject(DomSanitizer);
     http = inject(HttpClient);
     httpSub;
+    mermaidApiPromise;
+    mermaidInitialized = false;
+    mermaidRenderRun = 0;
     /** URL or path to load markdown from */
     src = input(...(ngDevMode ? [undefined, { debugName: "src" }] : /* istanbul ignore next */ []));
     /** Raw markdown string */
@@ -10531,8 +10535,13 @@ class MarkdownComponent {
     /** Parsed result (computed once from resolvedMarkdown) */
     parsed = computed(() => {
         const md = this.resolvedMarkdown();
-        if (!md)
-            return { html: '', blocks: [], headings: [] };
+        if (!md) {
+            return {
+                html: '',
+                blocks: [],
+                headings: [],
+            };
+        }
         return this.parseMarkdown(md);
     }, ...(ngDevMode ? [{ debugName: "parsed" }] : /* istanbul ignore next */ []));
     /** Computed render parts (HTML chunks + code blocks interleaved) */
@@ -10556,6 +10565,8 @@ class MarkdownComponent {
     containerClasses = computed(() => {
         return `lc-markdown lc-markdown--${this.variant()}`;
     }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : /* istanbul ignore next */ []));
+    mermaidSvgs = signal({}, ...(ngDevMode ? [{ debugName: "mermaidSvgs" }] : /* istanbul ignore next */ []));
+    mermaidErrors = signal({}, ...(ngDevMode ? [{ debugName: "mermaidErrors" }] : /* istanbul ignore next */ []));
     headings = computed(() => this.parsed().headings, ...(ngDevMode ? [{ debugName: "headings" }] : /* istanbul ignore next */ []));
     constructor() {
         // Load content from src when src changes
@@ -10579,6 +10590,10 @@ class MarkdownComponent {
                 this.rendered.emit({ headings: h });
             }
         });
+        // Render Mermaid code fences as inline SVG diagrams.
+        effect(() => {
+            void this.renderMermaidParts(this.renderParts());
+        });
     }
     ngOnDestroy() {
         this.httpSub?.unsubscribe();
@@ -10617,12 +10632,22 @@ class MarkdownComponent {
                 });
             }
             const blockIdx = parseInt(match[1], 10);
-            parts.push({
-                type: 'code',
-                index: partIndex++,
-                code: blocks[blockIdx].code,
-                lang: blocks[blockIdx].lang,
-            });
+            const block = blocks[blockIdx];
+            if (block.kind === 'mermaid') {
+                parts.push({
+                    type: 'mermaid',
+                    index: partIndex++,
+                    code: block.code,
+                });
+            }
+            else {
+                parts.push({
+                    type: 'code',
+                    index: partIndex++,
+                    code: block.code,
+                    lang: block.lang,
+                });
+            }
             lastIndex = match.index + match[0].length;
         }
         const remaining = html.slice(lastIndex);
@@ -10647,7 +10672,12 @@ class MarkdownComponent {
         // 1. Extract fenced code blocks → placeholders
         let processed = md.replace(/```(\w*)\n([\s\S]*?)```/g, (_match, lang, code) => {
             const idx = blocks.length;
-            blocks.push({ lang: (lang || 'text'), code: code.trimEnd() });
+            const normalizedLang = (lang || 'text').toLowerCase();
+            blocks.push({
+                kind: normalizedLang === 'mermaid' ? 'mermaid' : 'code',
+                lang: normalizedLang,
+                code: code.trimEnd(),
+            });
             return `<!--CODE_BLOCK_${idx}-->`;
         });
         // 2. Escape HTML entities
@@ -10771,12 +10801,79 @@ class MarkdownComponent {
             .replace(/</g, '&lt;')
             .replace(/>/g, '&gt;');
     }
+    mermaidSvgFor(index) {
+        return this.mermaidSvgs()[index] ?? null;
+    }
+    mermaidErrorFor(index) {
+        return this.mermaidErrors()[index] ?? null;
+    }
+    async renderMermaidParts(parts) {
+        const mermaidParts = parts.filter((part) => part.type === 'mermaid' && !!part.code);
+        this.mermaidSvgs.set({});
+        this.mermaidErrors.set({});
+        if (mermaidParts.length === 0) {
+            return;
+        }
+        const runId = ++this.mermaidRenderRun;
+        try {
+            const mermaidApi = await this.getMermaidApi();
+            if (runId !== this.mermaidRenderRun)
+                return;
+            const nextSvgs = {};
+            const nextErrors = {};
+            for (const part of mermaidParts) {
+                try {
+                    const renderId = `lc-md-mermaid-${runId}-${part.index}`;
+                    const { svg } = await mermaidApi.render(renderId, part.code);
+                    if (runId !== this.mermaidRenderRun)
+                        return;
+                    // Mermaid emits self-contained SVG with internal <style> rules.
+                    // Angular HTML sanitization strips critical style declarations,
+                    // which leaves only labels visible (no edges/shapes). We trust
+                    // Mermaid output here and rely on Mermaid's strict security mode.
+                    nextSvgs[part.index] = this.sanitizer.bypassSecurityTrustHtml(svg);
+                }
+                catch {
+                    nextErrors[part.index] = 'Mermaid diagram could not be rendered.';
+                }
+            }
+            if (runId !== this.mermaidRenderRun)
+                return;
+            this.mermaidSvgs.set(nextSvgs);
+            this.mermaidErrors.set(nextErrors);
+        }
+        catch {
+            if (runId !== this.mermaidRenderRun)
+                return;
+            const fallbackErrors = {};
+            for (const part of mermaidParts) {
+                fallbackErrors[part.index] = 'Mermaid runtime is not available.';
+            }
+            this.mermaidErrors.set(fallbackErrors);
+        }
+    }
+    async getMermaidApi() {
+        if (!this.mermaidApiPromise) {
+            this.mermaidApiPromise = import('mermaid').then((module) => {
+                const api = module.default ?? module;
+                if (!this.mermaidInitialized) {
+                    api.initialize({
+                        startOnLoad: false,
+                        securityLevel: 'strict',
+                    });
+                    this.mermaidInitialized = true;
+                }
+                return api;
+            });
+        }
+        return this.mermaidApiPromise;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: MarkdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: MarkdownComponent, isStandalone: true, selector: "lc-markdown", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, linkTarget: { classPropertyName: "linkTarget", publicName: "linkTarget", isSignal: true, isRequired: false, transformFunction: null }, sanitize: { classPropertyName: "sanitize", publicName: "sanitize", isSignal: true, isRequired: false, transformFunction: null }, syntaxHighlight: { classPropertyName: "syntaxHighlight", publicName: "syntaxHighlight", isSignal: true, isRequired: false, transformFunction: null }, showHeadingAnchors: { classPropertyName: "showHeadingAnchors", publicName: "showHeadingAnchors", isSignal: true, isRequired: false, transformFunction: null }, baseUrl: { classPropertyName: "baseUrl", publicName: "baseUrl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { linkClick: "linkClick", rendered: "rendered" }, ngImport: i0, template: "<div [class]=\"containerClasses()\" (click)=\"onLinkClick($event)\">\n  @for (part of renderParts(); track part.index) {\n    @if (part.type === 'html') {\n      <div [innerHTML]=\"part.safeHtml\"></div>\n    } @else {\n      <lc-code-block\n        [code]=\"part.code!\"\n        [language]=\"part.lang ?? 'text'\"\n        [showLineNumbers]=\"true\"\n        [showCopy]=\"true\"\n      />\n    }\n  }\n</div>\n", styles: [".lc-markdown{color:var(--color-text, #111827);font-family:var(--font-family-sans);font-size:var(--font-size-base, 1rem);line-height:var(--line-height-relaxed, 1.75)}.lc-markdown h1,.lc-markdown h2,.lc-markdown h3,.lc-markdown h4,.lc-markdown h5,.lc-markdown h6{color:var(--color-text, #111827);font-weight:var(--font-weight-semibold, 600);line-height:var(--line-height-tight, 1.25);margin:1.5em 0 .5em}.lc-markdown h1:first-child,.lc-markdown h2:first-child,.lc-markdown h3:first-child,.lc-markdown h4:first-child,.lc-markdown h5:first-child,.lc-markdown h6:first-child{margin-top:0}.lc-markdown h1{font-size:2rem}.lc-markdown h2{font-size:1.5rem}.lc-markdown h3{font-size:1.25rem}.lc-markdown h4{font-size:1.125rem}.lc-markdown h5{font-size:1rem}.lc-markdown h6{font-size:.875rem}.lc-markdown p{margin:0 0 1em}.lc-markdown a{color:var(--color-primary-600, #2563eb);text-decoration:none}.lc-markdown a:hover{text-decoration:underline}.lc-markdown strong{font-weight:var(--font-weight-semibold, 600)}.lc-markdown code{background-color:var(--color-neutral-100, #f3f4f6);color:var(--color-neutral-800, #1f2937);padding:.125em .375em;border-radius:var(--radius-sm, .25rem);font-family:var(--font-family-mono, monospace);font-size:.875em}.lc-markdown pre{margin:1em 0;overflow-x:auto}.lc-markdown pre code{background:none;padding:0;border-radius:0}.lc-markdown blockquote{margin:1em 0;padding:.5em 1em;border-left:4px solid var(--color-primary-300, #93c5fd);background-color:var(--color-neutral-50, #f9fafb);color:var(--color-text-secondary, #4b5563)}.lc-markdown blockquote p{margin:0}.lc-markdown ul,.lc-markdown ol{margin:0 0 1em;padding-left:1.5em}.lc-markdown ul{list-style:disc}.lc-markdown ol{list-style:decimal}.lc-markdown li{margin:.25em 0}.lc-markdown hr{border:none;border-top:1px solid var(--color-divider, #e5e7eb);margin:1.5em 0}.lc-markdown img{max-width:100%;height:auto;border-radius:var(--radius-md, .375rem)}.lc-markdown del{text-decoration:line-through;color:var(--color-text-secondary, #6b7280)}.lc-markdown__table{width:100%;border-collapse:collapse;margin:1em 0;font-size:var(--font-size-sm, .875rem)}.lc-markdown__table th,.lc-markdown__table td{padding:.5rem .75rem;border:1px solid var(--color-divider, #e5e7eb);text-align:left}.lc-markdown__table th{background-color:var(--color-neutral-50, #f9fafb);font-weight:var(--font-weight-semibold, 600)}.lc-markdown__table tr:hover td{background-color:var(--color-neutral-50, #f9fafb)}.lc-markdown__task{list-style:none;margin-left:-1.5em}.lc-markdown__task input[type=checkbox]{margin-right:.5em;vertical-align:middle}.lc-markdown__anchor{color:var(--color-neutral-400, #9ca3af);text-decoration:none;margin-right:.25em;opacity:0;transition:opacity .15s ease}h1:hover .lc-markdown__anchor,h2:hover .lc-markdown__anchor,h3:hover .lc-markdown__anchor,h4:hover .lc-markdown__anchor,h5:hover .lc-markdown__anchor,h6:hover .lc-markdown__anchor{opacity:1}.lc-markdown lc-code-block{display:block;margin:1em 0}.lc-markdown--compact{font-size:var(--font-size-sm, .875rem);line-height:var(--line-height-normal, 1.5)}.lc-markdown--compact h1{font-size:1.5rem}.lc-markdown--compact h2{font-size:1.25rem}.lc-markdown--compact h3{font-size:1.125rem}.lc-markdown--compact h4{font-size:1rem}.lc-markdown--compact h5,.lc-markdown--compact h6{font-size:.875rem}.lc-markdown--compact h1,.lc-markdown--compact h2,.lc-markdown--compact h3,.lc-markdown--compact h4,.lc-markdown--compact h5,.lc-markdown--compact h6{margin:1em 0 .25em}.lc-markdown--compact p{margin:0 0 .5em}.lc-markdown--compact blockquote{margin:.5em 0;padding:.25em .75em}.lc-markdown--compact ul,.lc-markdown--compact ol{margin:0 0 .5em}.lc-markdown--chat{font-size:inherit;line-height:1.4}.lc-markdown--chat p,.lc-markdown--chat ul,.lc-markdown--chat ol,.lc-markdown--chat pre,.lc-markdown--chat blockquote,.lc-markdown--chat table{margin:0 0 6px}.lc-markdown--chat h1,.lc-markdown--chat h2,.lc-markdown--chat h3,.lc-markdown--chat h4,.lc-markdown--chat h5,.lc-markdown--chat h6{margin:8px 0 4px;line-height:1.25}.lc-markdown--chat h1{font-size:1.25rem}.lc-markdown--chat h2{font-size:1.125rem}.lc-markdown--chat h3{font-size:1rem}.lc-markdown--chat h4,.lc-markdown--chat h5,.lc-markdown--chat h6{font-size:.9375rem}.lc-markdown--chat li{margin:0;line-height:1.4}.lc-markdown--chat ul,.lc-markdown--chat ol{padding-left:1.25em}.lc-markdown--chat blockquote{padding:.25em .75em}.lc-markdown--chat lc-code-block{margin:6px 0}.lc-markdown--chat>*:first-child{margin-top:0}.lc-markdown--chat>*:last-child{margin-bottom:0}\n"], dependencies: [{ kind: "component", type: CodeBlockComponent, selector: "lc-code-block", inputs: ["code", "language", "filename", "showLineNumbers", "showCopy", "showHeader"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: MarkdownComponent, isStandalone: true, selector: "lc-markdown", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, linkTarget: { classPropertyName: "linkTarget", publicName: "linkTarget", isSignal: true, isRequired: false, transformFunction: null }, sanitize: { classPropertyName: "sanitize", publicName: "sanitize", isSignal: true, isRequired: false, transformFunction: null }, syntaxHighlight: { classPropertyName: "syntaxHighlight", publicName: "syntaxHighlight", isSignal: true, isRequired: false, transformFunction: null }, showHeadingAnchors: { classPropertyName: "showHeadingAnchors", publicName: "showHeadingAnchors", isSignal: true, isRequired: false, transformFunction: null }, baseUrl: { classPropertyName: "baseUrl", publicName: "baseUrl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { linkClick: "linkClick", rendered: "rendered" }, ngImport: i0, template: "<div [class]=\"containerClasses()\" (click)=\"onLinkClick($event)\">\n  @for (part of renderParts(); track part.index) {\n    @if (part.type === 'html') {\n      <div [innerHTML]=\"part.safeHtml\"></div>\n    } @else if (part.type === 'code') {\n      <lc-code-block\n        [code]=\"part.code!\"\n        [language]=\"part.lang ?? 'text'\"\n        [showLineNumbers]=\"true\"\n        [showCopy]=\"true\"\n      />\n    } @else {\n      @if (mermaidSvgFor(part.index); as svg) {\n        <div class=\"lc-markdown__mermaid\" [innerHTML]=\"svg\"></div>\n      } @else if (mermaidErrorFor(part.index); as errorMessage) {\n        <div class=\"lc-markdown__mermaid-fallback\">\n          <p class=\"lc-markdown__mermaid-error\">{{ errorMessage }}</p>\n          <lc-code-block\n            [code]=\"part.code!\"\n            [language]=\"'text'\"\n            [showLineNumbers]=\"true\"\n            [showCopy]=\"true\"\n          />\n        </div>\n      } @else {\n        <div class=\"lc-markdown__mermaid-loading\">Rendering Mermaid diagram...</div>\n      }\n    }\n  }\n</div>\n", styles: [".lc-markdown{color:var(--color-text, #111827);font-family:var(--font-family-sans);font-size:var(--font-size-base, 1rem);line-height:var(--line-height-relaxed, 1.75)}.lc-markdown h1,.lc-markdown h2,.lc-markdown h3,.lc-markdown h4,.lc-markdown h5,.lc-markdown h6{color:var(--color-text, #111827);font-weight:var(--font-weight-semibold, 600);line-height:var(--line-height-tight, 1.25);margin:1.5em 0 .5em}.lc-markdown h1:first-child,.lc-markdown h2:first-child,.lc-markdown h3:first-child,.lc-markdown h4:first-child,.lc-markdown h5:first-child,.lc-markdown h6:first-child{margin-top:0}.lc-markdown h1{font-size:2rem}.lc-markdown h2{font-size:1.5rem}.lc-markdown h3{font-size:1.25rem}.lc-markdown h4{font-size:1.125rem}.lc-markdown h5{font-size:1rem}.lc-markdown h6{font-size:.875rem}.lc-markdown p{margin:0 0 1em}.lc-markdown a{color:var(--color-primary-600, #2563eb);text-decoration:none}.lc-markdown a:hover{text-decoration:underline}.lc-markdown strong{font-weight:var(--font-weight-semibold, 600)}.lc-markdown code{background-color:var(--color-neutral-100, #f3f4f6);color:var(--color-neutral-800, #1f2937);padding:.125em .375em;border-radius:var(--radius-sm, .25rem);font-family:var(--font-family-mono, monospace);font-size:.875em}.lc-markdown pre{margin:1em 0;overflow-x:auto}.lc-markdown pre code{background:none;padding:0;border-radius:0}.lc-markdown blockquote{margin:1em 0;padding:.5em 1em;border-left:4px solid var(--color-primary-300, #93c5fd);background-color:var(--color-neutral-50, #f9fafb);color:var(--color-text-secondary, #4b5563)}.lc-markdown blockquote p{margin:0}.lc-markdown ul,.lc-markdown ol{margin:0 0 1em;padding-left:1.5em}.lc-markdown ul{list-style:disc}.lc-markdown ol{list-style:decimal}.lc-markdown li{margin:.25em 0}.lc-markdown hr{border:none;border-top:1px solid var(--color-divider, #e5e7eb);margin:1.5em 0}.lc-markdown img{max-width:100%;height:auto;border-radius:var(--radius-md, .375rem)}.lc-markdown del{text-decoration:line-through;color:var(--color-text-secondary, #6b7280)}.lc-markdown__table{width:100%;border-collapse:collapse;margin:1em 0;font-size:var(--font-size-sm, .875rem)}.lc-markdown__table th,.lc-markdown__table td{padding:.5rem .75rem;border:1px solid var(--color-divider, #e5e7eb);text-align:left}.lc-markdown__table th{background-color:var(--color-neutral-50, #f9fafb);font-weight:var(--font-weight-semibold, 600)}.lc-markdown__table tr:hover td{background-color:var(--color-neutral-50, #f9fafb)}.lc-markdown__task{list-style:none;margin-left:-1.5em}.lc-markdown__task input[type=checkbox]{margin-right:.5em;vertical-align:middle}.lc-markdown__anchor{color:var(--color-neutral-400, #9ca3af);text-decoration:none;margin-right:.25em;opacity:0;transition:opacity .15s ease}h1:hover .lc-markdown__anchor,h2:hover .lc-markdown__anchor,h3:hover .lc-markdown__anchor,h4:hover .lc-markdown__anchor,h5:hover .lc-markdown__anchor,h6:hover .lc-markdown__anchor{opacity:1}.lc-markdown lc-code-block{display:block;margin:1em 0}.lc-markdown lc-code-block code{background:none;color:inherit;padding:0;border-radius:0;font-size:inherit}.lc-markdown__mermaid{margin:1em 0;padding:.75rem;border:1px solid var(--color-divider, #e5e7eb);border-radius:var(--radius-md, .375rem);background:var(--color-surface, #ffffff);overflow-x:auto}.lc-markdown__mermaid svg{display:block;margin:0 auto;max-width:100%;height:auto}.lc-markdown__mermaid-loading{margin:1em 0;padding:.75rem;border:1px dashed var(--color-divider, #e5e7eb);border-radius:var(--radius-md, .375rem);color:var(--color-text-secondary, #6b7280);font-size:var(--font-size-sm, .875rem)}.lc-markdown__mermaid-fallback{margin:1em 0}.lc-markdown__mermaid-error{margin:0 0 .5rem;color:var(--color-danger-600, #dc2626);font-size:var(--font-size-sm, .875rem)}.lc-markdown--compact{font-size:var(--font-size-sm, .875rem);line-height:var(--line-height-normal, 1.5)}.lc-markdown--compact h1{font-size:1.5rem}.lc-markdown--compact h2{font-size:1.25rem}.lc-markdown--compact h3{font-size:1.125rem}.lc-markdown--compact h4{font-size:1rem}.lc-markdown--compact h5,.lc-markdown--compact h6{font-size:.875rem}.lc-markdown--compact h1,.lc-markdown--compact h2,.lc-markdown--compact h3,.lc-markdown--compact h4,.lc-markdown--compact h5,.lc-markdown--compact h6{margin:1em 0 .25em}.lc-markdown--compact p{margin:0 0 .5em}.lc-markdown--compact blockquote{margin:.5em 0;padding:.25em .75em}.lc-markdown--compact ul,.lc-markdown--compact ol{margin:0 0 .5em}.lc-markdown--chat{font-size:inherit;line-height:1.4}.lc-markdown--chat p,.lc-markdown--chat ul,.lc-markdown--chat ol,.lc-markdown--chat pre,.lc-markdown--chat blockquote,.lc-markdown--chat table{margin:0 0 6px}.lc-markdown--chat h1,.lc-markdown--chat h2,.lc-markdown--chat h3,.lc-markdown--chat h4,.lc-markdown--chat h5,.lc-markdown--chat h6{margin:8px 0 4px;line-height:1.25}.lc-markdown--chat h1{font-size:1.25rem}.lc-markdown--chat h2{font-size:1.125rem}.lc-markdown--chat h3{font-size:1rem}.lc-markdown--chat h4,.lc-markdown--chat h5,.lc-markdown--chat h6{font-size:.9375rem}.lc-markdown--chat li{margin:0;line-height:1.4}.lc-markdown--chat ul,.lc-markdown--chat ol{padding-left:1.25em}.lc-markdown--chat blockquote{padding:.25em .75em}.lc-markdown--chat lc-code-block{margin:6px 0}.lc-markdown--chat .lc-markdown__mermaid,.lc-markdown--chat .lc-markdown__mermaid-loading,.lc-markdown--chat .lc-markdown__mermaid-fallback{margin:6px 0}.lc-markdown--chat>*:first-child{margin-top:0}.lc-markdown--chat>*:last-child{margin-bottom:0}\n"], dependencies: [{ kind: "component", type: CodeBlockComponent, selector: "lc-code-block", inputs: ["code", "language", "filename", "showLineNumbers", "showCopy", "showHeader"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: MarkdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lc-markdown', standalone: true, imports: [CodeBlockComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div [class]=\"containerClasses()\" (click)=\"onLinkClick($event)\">\n  @for (part of renderParts(); track part.index) {\n    @if (part.type === 'html') {\n      <div [innerHTML]=\"part.safeHtml\"></div>\n    } @else {\n      <lc-code-block\n        [code]=\"part.code!\"\n        [language]=\"part.lang ?? 'text'\"\n        [showLineNumbers]=\"true\"\n        [showCopy]=\"true\"\n      />\n    }\n  }\n</div>\n", styles: [".lc-markdown{color:var(--color-text, #111827);font-family:var(--font-family-sans);font-size:var(--font-size-base, 1rem);line-height:var(--line-height-relaxed, 1.75)}.lc-markdown h1,.lc-markdown h2,.lc-markdown h3,.lc-markdown h4,.lc-markdown h5,.lc-markdown h6{color:var(--color-text, #111827);font-weight:var(--font-weight-semibold, 600);line-height:var(--line-height-tight, 1.25);margin:1.5em 0 .5em}.lc-markdown h1:first-child,.lc-markdown h2:first-child,.lc-markdown h3:first-child,.lc-markdown h4:first-child,.lc-markdown h5:first-child,.lc-markdown h6:first-child{margin-top:0}.lc-markdown h1{font-size:2rem}.lc-markdown h2{font-size:1.5rem}.lc-markdown h3{font-size:1.25rem}.lc-markdown h4{font-size:1.125rem}.lc-markdown h5{font-size:1rem}.lc-markdown h6{font-size:.875rem}.lc-markdown p{margin:0 0 1em}.lc-markdown a{color:var(--color-primary-600, #2563eb);text-decoration:none}.lc-markdown a:hover{text-decoration:underline}.lc-markdown strong{font-weight:var(--font-weight-semibold, 600)}.lc-markdown code{background-color:var(--color-neutral-100, #f3f4f6);color:var(--color-neutral-800, #1f2937);padding:.125em .375em;border-radius:var(--radius-sm, .25rem);font-family:var(--font-family-mono, monospace);font-size:.875em}.lc-markdown pre{margin:1em 0;overflow-x:auto}.lc-markdown pre code{background:none;padding:0;border-radius:0}.lc-markdown blockquote{margin:1em 0;padding:.5em 1em;border-left:4px solid var(--color-primary-300, #93c5fd);background-color:var(--color-neutral-50, #f9fafb);color:var(--color-text-secondary, #4b5563)}.lc-markdown blockquote p{margin:0}.lc-markdown ul,.lc-markdown ol{margin:0 0 1em;padding-left:1.5em}.lc-markdown ul{list-style:disc}.lc-markdown ol{list-style:decimal}.lc-markdown li{margin:.25em 0}.lc-markdown hr{border:none;border-top:1px solid var(--color-divider, #e5e7eb);margin:1.5em 0}.lc-markdown img{max-width:100%;height:auto;border-radius:var(--radius-md, .375rem)}.lc-markdown del{text-decoration:line-through;color:var(--color-text-secondary, #6b7280)}.lc-markdown__table{width:100%;border-collapse:collapse;margin:1em 0;font-size:var(--font-size-sm, .875rem)}.lc-markdown__table th,.lc-markdown__table td{padding:.5rem .75rem;border:1px solid var(--color-divider, #e5e7eb);text-align:left}.lc-markdown__table th{background-color:var(--color-neutral-50, #f9fafb);font-weight:var(--font-weight-semibold, 600)}.lc-markdown__table tr:hover td{background-color:var(--color-neutral-50, #f9fafb)}.lc-markdown__task{list-style:none;margin-left:-1.5em}.lc-markdown__task input[type=checkbox]{margin-right:.5em;vertical-align:middle}.lc-markdown__anchor{color:var(--color-neutral-400, #9ca3af);text-decoration:none;margin-right:.25em;opacity:0;transition:opacity .15s ease}h1:hover .lc-markdown__anchor,h2:hover .lc-markdown__anchor,h3:hover .lc-markdown__anchor,h4:hover .lc-markdown__anchor,h5:hover .lc-markdown__anchor,h6:hover .lc-markdown__anchor{opacity:1}.lc-markdown lc-code-block{display:block;margin:1em 0}.lc-markdown--compact{font-size:var(--font-size-sm, .875rem);line-height:var(--line-height-normal, 1.5)}.lc-markdown--compact h1{font-size:1.5rem}.lc-markdown--compact h2{font-size:1.25rem}.lc-markdown--compact h3{font-size:1.125rem}.lc-markdown--compact h4{font-size:1rem}.lc-markdown--compact h5,.lc-markdown--compact h6{font-size:.875rem}.lc-markdown--compact h1,.lc-markdown--compact h2,.lc-markdown--compact h3,.lc-markdown--compact h4,.lc-markdown--compact h5,.lc-markdown--compact h6{margin:1em 0 .25em}.lc-markdown--compact p{margin:0 0 .5em}.lc-markdown--compact blockquote{margin:.5em 0;padding:.25em .75em}.lc-markdown--compact ul,.lc-markdown--compact ol{margin:0 0 .5em}.lc-markdown--chat{font-size:inherit;line-height:1.4}.lc-markdown--chat p,.lc-markdown--chat ul,.lc-markdown--chat ol,.lc-markdown--chat pre,.lc-markdown--chat blockquote,.lc-markdown--chat table{margin:0 0 6px}.lc-markdown--chat h1,.lc-markdown--chat h2,.lc-markdown--chat h3,.lc-markdown--chat h4,.lc-markdown--chat h5,.lc-markdown--chat h6{margin:8px 0 4px;line-height:1.25}.lc-markdown--chat h1{font-size:1.25rem}.lc-markdown--chat h2{font-size:1.125rem}.lc-markdown--chat h3{font-size:1rem}.lc-markdown--chat h4,.lc-markdown--chat h5,.lc-markdown--chat h6{font-size:.9375rem}.lc-markdown--chat li{margin:0;line-height:1.4}.lc-markdown--chat ul,.lc-markdown--chat ol{padding-left:1.25em}.lc-markdown--chat blockquote{padding:.25em .75em}.lc-markdown--chat lc-code-block{margin:6px 0}.lc-markdown--chat>*:first-child{margin-top:0}.lc-markdown--chat>*:last-child{margin-bottom:0}\n"] }]
+            args: [{ selector: 'lc-markdown', standalone: true, imports: [CodeBlockComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div [class]=\"containerClasses()\" (click)=\"onLinkClick($event)\">\n  @for (part of renderParts(); track part.index) {\n    @if (part.type === 'html') {\n      <div [innerHTML]=\"part.safeHtml\"></div>\n    } @else if (part.type === 'code') {\n      <lc-code-block\n        [code]=\"part.code!\"\n        [language]=\"part.lang ?? 'text'\"\n        [showLineNumbers]=\"true\"\n        [showCopy]=\"true\"\n      />\n    } @else {\n      @if (mermaidSvgFor(part.index); as svg) {\n        <div class=\"lc-markdown__mermaid\" [innerHTML]=\"svg\"></div>\n      } @else if (mermaidErrorFor(part.index); as errorMessage) {\n        <div class=\"lc-markdown__mermaid-fallback\">\n          <p class=\"lc-markdown__mermaid-error\">{{ errorMessage }}</p>\n          <lc-code-block\n            [code]=\"part.code!\"\n            [language]=\"'text'\"\n            [showLineNumbers]=\"true\"\n            [showCopy]=\"true\"\n          />\n        </div>\n      } @else {\n        <div class=\"lc-markdown__mermaid-loading\">Rendering Mermaid diagram...</div>\n      }\n    }\n  }\n</div>\n", styles: [".lc-markdown{color:var(--color-text, #111827);font-family:var(--font-family-sans);font-size:var(--font-size-base, 1rem);line-height:var(--line-height-relaxed, 1.75)}.lc-markdown h1,.lc-markdown h2,.lc-markdown h3,.lc-markdown h4,.lc-markdown h5,.lc-markdown h6{color:var(--color-text, #111827);font-weight:var(--font-weight-semibold, 600);line-height:var(--line-height-tight, 1.25);margin:1.5em 0 .5em}.lc-markdown h1:first-child,.lc-markdown h2:first-child,.lc-markdown h3:first-child,.lc-markdown h4:first-child,.lc-markdown h5:first-child,.lc-markdown h6:first-child{margin-top:0}.lc-markdown h1{font-size:2rem}.lc-markdown h2{font-size:1.5rem}.lc-markdown h3{font-size:1.25rem}.lc-markdown h4{font-size:1.125rem}.lc-markdown h5{font-size:1rem}.lc-markdown h6{font-size:.875rem}.lc-markdown p{margin:0 0 1em}.lc-markdown a{color:var(--color-primary-600, #2563eb);text-decoration:none}.lc-markdown a:hover{text-decoration:underline}.lc-markdown strong{font-weight:var(--font-weight-semibold, 600)}.lc-markdown code{background-color:var(--color-neutral-100, #f3f4f6);color:var(--color-neutral-800, #1f2937);padding:.125em .375em;border-radius:var(--radius-sm, .25rem);font-family:var(--font-family-mono, monospace);font-size:.875em}.lc-markdown pre{margin:1em 0;overflow-x:auto}.lc-markdown pre code{background:none;padding:0;border-radius:0}.lc-markdown blockquote{margin:1em 0;padding:.5em 1em;border-left:4px solid var(--color-primary-300, #93c5fd);background-color:var(--color-neutral-50, #f9fafb);color:var(--color-text-secondary, #4b5563)}.lc-markdown blockquote p{margin:0}.lc-markdown ul,.lc-markdown ol{margin:0 0 1em;padding-left:1.5em}.lc-markdown ul{list-style:disc}.lc-markdown ol{list-style:decimal}.lc-markdown li{margin:.25em 0}.lc-markdown hr{border:none;border-top:1px solid var(--color-divider, #e5e7eb);margin:1.5em 0}.lc-markdown img{max-width:100%;height:auto;border-radius:var(--radius-md, .375rem)}.lc-markdown del{text-decoration:line-through;color:var(--color-text-secondary, #6b7280)}.lc-markdown__table{width:100%;border-collapse:collapse;margin:1em 0;font-size:var(--font-size-sm, .875rem)}.lc-markdown__table th,.lc-markdown__table td{padding:.5rem .75rem;border:1px solid var(--color-divider, #e5e7eb);text-align:left}.lc-markdown__table th{background-color:var(--color-neutral-50, #f9fafb);font-weight:var(--font-weight-semibold, 600)}.lc-markdown__table tr:hover td{background-color:var(--color-neutral-50, #f9fafb)}.lc-markdown__task{list-style:none;margin-left:-1.5em}.lc-markdown__task input[type=checkbox]{margin-right:.5em;vertical-align:middle}.lc-markdown__anchor{color:var(--color-neutral-400, #9ca3af);text-decoration:none;margin-right:.25em;opacity:0;transition:opacity .15s ease}h1:hover .lc-markdown__anchor,h2:hover .lc-markdown__anchor,h3:hover .lc-markdown__anchor,h4:hover .lc-markdown__anchor,h5:hover .lc-markdown__anchor,h6:hover .lc-markdown__anchor{opacity:1}.lc-markdown lc-code-block{display:block;margin:1em 0}.lc-markdown lc-code-block code{background:none;color:inherit;padding:0;border-radius:0;font-size:inherit}.lc-markdown__mermaid{margin:1em 0;padding:.75rem;border:1px solid var(--color-divider, #e5e7eb);border-radius:var(--radius-md, .375rem);background:var(--color-surface, #ffffff);overflow-x:auto}.lc-markdown__mermaid svg{display:block;margin:0 auto;max-width:100%;height:auto}.lc-markdown__mermaid-loading{margin:1em 0;padding:.75rem;border:1px dashed var(--color-divider, #e5e7eb);border-radius:var(--radius-md, .375rem);color:var(--color-text-secondary, #6b7280);font-size:var(--font-size-sm, .875rem)}.lc-markdown__mermaid-fallback{margin:1em 0}.lc-markdown__mermaid-error{margin:0 0 .5rem;color:var(--color-danger-600, #dc2626);font-size:var(--font-size-sm, .875rem)}.lc-markdown--compact{font-size:var(--font-size-sm, .875rem);line-height:var(--line-height-normal, 1.5)}.lc-markdown--compact h1{font-size:1.5rem}.lc-markdown--compact h2{font-size:1.25rem}.lc-markdown--compact h3{font-size:1.125rem}.lc-markdown--compact h4{font-size:1rem}.lc-markdown--compact h5,.lc-markdown--compact h6{font-size:.875rem}.lc-markdown--compact h1,.lc-markdown--compact h2,.lc-markdown--compact h3,.lc-markdown--compact h4,.lc-markdown--compact h5,.lc-markdown--compact h6{margin:1em 0 .25em}.lc-markdown--compact p{margin:0 0 .5em}.lc-markdown--compact blockquote{margin:.5em 0;padding:.25em .75em}.lc-markdown--compact ul,.lc-markdown--compact ol{margin:0 0 .5em}.lc-markdown--chat{font-size:inherit;line-height:1.4}.lc-markdown--chat p,.lc-markdown--chat ul,.lc-markdown--chat ol,.lc-markdown--chat pre,.lc-markdown--chat blockquote,.lc-markdown--chat table{margin:0 0 6px}.lc-markdown--chat h1,.lc-markdown--chat h2,.lc-markdown--chat h3,.lc-markdown--chat h4,.lc-markdown--chat h5,.lc-markdown--chat h6{margin:8px 0 4px;line-height:1.25}.lc-markdown--chat h1{font-size:1.25rem}.lc-markdown--chat h2{font-size:1.125rem}.lc-markdown--chat h3{font-size:1rem}.lc-markdown--chat h4,.lc-markdown--chat h5,.lc-markdown--chat h6{font-size:.9375rem}.lc-markdown--chat li{margin:0;line-height:1.4}.lc-markdown--chat ul,.lc-markdown--chat ol{padding-left:1.25em}.lc-markdown--chat blockquote{padding:.25em .75em}.lc-markdown--chat lc-code-block{margin:6px 0}.lc-markdown--chat .lc-markdown__mermaid,.lc-markdown--chat .lc-markdown__mermaid-loading,.lc-markdown--chat .lc-markdown__mermaid-fallback{margin:6px 0}.lc-markdown--chat>*:first-child{margin-top:0}.lc-markdown--chat>*:last-child{margin-bottom:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], linkTarget: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkTarget", required: false }] }], sanitize: [{ type: i0.Input, args: [{ isSignal: true, alias: "sanitize", required: false }] }], syntaxHighlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "syntaxHighlight", required: false }] }], showHeadingAnchors: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeadingAnchors", required: false }] }], baseUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseUrl", required: false }] }], linkClick: [{ type: i0.Output, args: ["linkClick"] }], rendered: [{ type: i0.Output, args: ["rendered"] }] } });
 
 /**