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

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

@@ -6138,19 +6138,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
  *
  * Features:
  * - Drawer (overlay) and docked (persistent) modes
- * - Collapsed icon-rail mode (narrow 56px sidebar with icons only)
- * - Hierarchical navigation with collapsible groups
- * - Section headlines for item grouping
- * - Active route highlighting
- * - Keyboard navigation support
+ * - Responsive mobile mode — docked automatically switches to drawer below a configurable breakpoint
+ * - Collapsed icon-rail mode (narrow 56px sidebar with icons only and hover tooltips)
+ * - Integrated logo area with collapse-toggle (sidebar-first layouts)
+ * - Hierarchical navigation with collapsible groups (up to 3 levels)
+ * - Section headlines for item grouping with optional action buttons
+ * - Action buttons on any item (hover-reveal)
+ * - Badge support on items (count / status indicator)
+ * - Active route highlighting (no hover color change on active items)
+ * - Keyboard navigation support (Escape closes drawer)
  * - Configurable width and position (left/right)
  * - Optional backdrop overlay
+ * - Theme variants: auto, light, dark (with teal accent for dark mode)
  * - Accessible with ARIA navigation role
  *
  * @example
  * ```html
- * <lc-sidenav [isOpen]="isOpen" mode="docked" [collapsed]="isCollapsed" [items]="navItems"
- *   (closed)="isOpen = false" (itemClicked)="navigate($event)" />
+ * <lc-sidenav
+ *   [isOpenInput]="isOpen"
+ *   modeInput="docked"
+ *   [collapsedInput]="isCollapsed"
+ *   [showLogoInput]="true"
+ *   [mobileBreakpointInput]="768"
+ *   [itemsInput]="navItems"
+ *   activeRouteInput="/dashboard"
+ *   theme="dark"
+ *   (closed)="isOpen = false"
+ *   (itemClicked)="navigate($event)"
+ *   (itemAction)="onAction($event)" />
  * ```
  */
 class SidenavComponent {
@@ -6404,7 +6419,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: { isOpenInput: "isOpenInput", modeInput: "modeInput", positionInput: "positionInput", widthInput: "widthInput", ariaLabelInput: "ariaLabelInput", hasOverlayInput: "hasOverlayInput", itemsInput: "itemsInput", activeRouteInput: "activeRouteInput", collapsedInput: "collapsedInput", showLogoInput: "showLogoInput", mobileBreakpointInput: "mobileBreakpointInput", themeInput: ["theme", "themeInput"] }, outputs: { closed: "closed", itemClicked: "itemClicked", itemAction: "itemAction" }, host: { listeners: { "document:keydown": "handleKeydown($event)" }, properties: { "class.lc-sidenav-container": "true", "class.lc-sidenav-container--docked": "effectiveMode() === 'docked'", "class.lc-sidenav-container--open": "isOpen()" } }, ngImport: i0, template: "<!-- Drawer mode: render with overlay and conditional visibility -->\n@if (effectiveMode() === 'drawer') {\n  @if (isOpen()) {\n    <!-- Overlay backdrop -->\n    @if (hasOverlay()) {\n      <div\n        class=\"lc-sidenav__overlay\"\n        (click)=\"handleClose()\"\n        aria-hidden=\"true\">\n      </div>\n    }\n\n    <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n  }\n}\n\n<!-- Docked mode: always render, visibility controlled by CSS -->\n@if (effectiveMode() === 'docked') {\n  <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n}\n\n<!-- Shared sidenav panel template -->\n<ng-template #sidenavPanel>\n  <aside\n    [class]=\"sidenavClasses()\"\n    [ngStyle]=\"sidenavStyles()\"\n    role=\"navigation\"\n    [attr.aria-label]=\"ariaLabel()\">\n\n    <!-- Logo area (sidebar-first layout) -->\n    @if (showLogo()) {\n      <div class=\"lc-sidenav__logo\">\n        <button type=\"button\" class=\"lc-sidenav__logo-link\" aria-label=\"Toggle sidebar\" (click)=\"toggleCollapsed()\">\n          <lc-logo [variant]=\"collapsed() ? 'emblem' : 'full'\" size=\"sm\" [clickable]=\"false\" [colorMode]=\"themeMode() === 'dark' ? 'dark' : themeMode() === 'light' ? 'light' : 'auto'\" />\n        </button>\n      </div>\n    }\n\n    <!-- Close button (drawer mode only) -->\n    @if (effectiveMode() === 'drawer') {\n      <button\n        type=\"button\"\n        class=\"lc-sidenav__close\"\n        (click)=\"handleClose()\"\n        aria-label=\"Close navigation\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\">\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n        </svg>\n      </button>\n    }\n\n    <!-- Navigation items (if provided) -->\n    @if (items().length > 0) {\n      <nav class=\"lc-sidenav__nav\" [class.lc-sidenav__nav--docked]=\"effectiveMode() === 'docked'\">\n        @for (item of sortedItems(); track item.id) {\n          <!-- Section headline -->\n          @if (item.isSection) {\n            <div class=\"lc-sidenav__section\">\n              <div class=\"lc-sidenav__section-header\">\n                <h2 class=\"lc-sidenav__section-title\">{{ item.label }}</h2>\n                @if (item.action) {\n                  <button\n                    type=\"button\"\n                    class=\"lc-sidenav__action-btn\"\n                    [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n                    (click)=\"handleItemAction($event, item)\">\n                    <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                  </button>\n                }\n              </div>\n              @if (item.children?.length) {\n                <ul class=\"lc-sidenav__section-items\">\n                  @for (child of item.children; track child.id) {\n                    <li>\n                      @if (child.children?.length) {\n                        <!-- Section child with nested children (collapsible) -->\n                        <div class=\"lc-sidenav__nav-item-row\">\n                          <button\n                            type=\"button\"\n                            class=\"lc-sidenav__nav-item lc-sidenav__nav-item--parent\"\n                            [class.lc-sidenav__nav-item--expanded]=\"isExpanded(child)\"\n                            [class.lc-sidenav__nav-item--active]=\"hasActiveChild(child)\"\n                            (click)=\"toggleExpanded(child)\"\n                            [attr.aria-expanded]=\"isExpanded(child)\"\n                            [title]=\"collapsed() ? child.label : ''\">\n                            @if (child.icon) {\n                              <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                            }\n                            <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n                            @if (child.badge) {\n                              <lc-badge [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>\n                            }\n                            <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" class=\"lc-sidenav__nav-chevron\" />\n                          </button>\n                          @if (child.action) {\n                            <button\n                              type=\"button\"\n                              class=\"lc-sidenav__action-btn\"\n                              [attr.aria-label]=\"child.action.ariaLabel || child.label + ' action'\"\n                              (click)=\"handleItemAction($event, child)\">\n                              <lc-icon [name]=\"child.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                            </button>\n                          }\n                        </div>\n                        @if (isExpanded(child)) {\n                          <div class=\"lc-sidenav__nav-children\">\n                            @for (grandchild of child.children; track grandchild.id) {\n                              <a\n                                [routerLink]=\"grandchild.route\"\n                                routerLinkActive=\"lc-sidenav__nav-item--active\"\n                                class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                                (click)=\"handleItemClick(grandchild)\"\n                                [attr.aria-current]=\"isItemActive(grandchild) ? 'page' : null\">\n                                @if (grandchild.icon) {\n                                  <lc-icon [name]=\"grandchild.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                                }\n                                <span class=\"lc-sidenav__nav-label\">{{ grandchild.label }}</span>\n                                @if (grandchild.badge) {\n                                  <lc-badge [variant]=\"grandchild.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ grandchild.badge.value }}</lc-badge>\n                                }\n                              </a>\n                            }\n                          </div>\n                        }\n                      } @else {\n                        <!-- Section child (simple link) -->\n                        <div class=\"lc-sidenav__nav-item-row\">\n                          <a\n                            [routerLink]=\"child.route\"\n                            routerLinkActive=\"lc-sidenav__nav-item--active\"\n                            [routerLinkActiveOptions]=\"{ exact: child.route === '/' }\"\n                            class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                            (click)=\"handleItemClick(child)\"\n                            [attr.aria-current]=\"isItemActive(child) ? 'page' : null\"\n                            [title]=\"collapsed() ? child.label : ''\">\n                            @if (child.icon) {\n                              <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                            }\n                            <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n                            @if (child.badge) {\n                              <lc-badge [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>\n                            }\n                          </a>\n                          @if (child.action) {\n                            <button\n                              type=\"button\"\n                              class=\"lc-sidenav__action-btn\"\n                              [attr.aria-label]=\"child.action.ariaLabel || child.label + ' action'\"\n                              (click)=\"handleItemAction($event, child)\">\n                              <lc-icon [name]=\"child.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                            </button>\n                          }\n                        </div>\n                      }\n                    </li>\n                  }\n                </ul>\n              }\n            </div>\n          } @else if (item.children?.length) {\n            <!-- Parent item with children (collapsible group) -->\n            <div class=\"lc-sidenav__nav-item-row\">\n              <button\n                type=\"button\"\n                class=\"lc-sidenav__nav-item lc-sidenav__nav-item--parent\"\n                [class.lc-sidenav__nav-item--expanded]=\"isExpanded(item)\"\n                [class.lc-sidenav__nav-item--active]=\"hasActiveChild(item)\"\n                (click)=\"toggleExpanded(item)\"\n                [attr.aria-expanded]=\"isExpanded(item)\"\n                [title]=\"collapsed() ? item.label : ''\">\n                <lc-icon [name]=\"item.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                <span class=\"lc-sidenav__nav-label\">{{ item.label }}</span>\n                @if (item.badge) {\n                  <lc-badge [variant]=\"item.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ item.badge.value }}</lc-badge>\n                }\n                <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" class=\"lc-sidenav__nav-chevron\" />\n              </button>\n              @if (item.action) {\n                <button\n                  type=\"button\"\n                  class=\"lc-sidenav__action-btn\"\n                  [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n                  (click)=\"handleItemAction($event, item)\">\n                  <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                </button>\n              }\n            </div>\n            @if (isExpanded(item)) {\n              <div class=\"lc-sidenav__nav-children\">\n                @for (child of item.children; track child.id) {\n                  <a\n                    [routerLink]=\"child.route\"\n                    routerLinkActive=\"lc-sidenav__nav-item--active\"\n                    class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                    (click)=\"handleItemClick(child)\"\n                    [attr.aria-current]=\"isItemActive(child) ? 'page' : null\">\n                    <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                    <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n                    @if (child.badge) {\n                      <lc-badge [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>\n                    }\n                  </a>\n                }\n              </div>\n            }\n          } @else {\n            <!-- Simple item without children -->\n            <div class=\"lc-sidenav__nav-item-row\">\n              <a\n                [routerLink]=\"item.route\"\n                routerLinkActive=\"lc-sidenav__nav-item--active\"\n                [routerLinkActiveOptions]=\"{ exact: item.route === '/' }\"\n                class=\"lc-sidenav__nav-item\"\n                (click)=\"handleItemClick(item)\"\n                [attr.aria-current]=\"isItemActive(item) ? 'page' : null\"\n                [title]=\"collapsed() ? item.label : ''\">\n                <lc-icon [name]=\"item.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                <span class=\"lc-sidenav__nav-label\">{{ item.label }}</span>\n                @if (item.badge) {\n                  <lc-badge [variant]=\"item.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ item.badge.value }}</lc-badge>\n                }\n              </a>\n              @if (item.action) {\n                <button\n                  type=\"button\"\n                  class=\"lc-sidenav__action-btn\"\n                  [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n                  (click)=\"handleItemAction($event, item)\">\n                  <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                </button>\n              }\n            </div>\n          }\n        }\n      </nav>\n    }\n\n    <!-- Content projection (for custom content) -->\n    <div class=\"lc-sidenav__content\" [class.lc-sidenav__content--docked]=\"mode() === 'docked'\">\n      <ng-content></ng-content>\n    </div>\n  </aside>\n</ng-template>\n", styles: [".lc-sidenav-container{position:relative;z-index:1000}.lc-sidenav-container--docked{position:static;z-index:auto;height:100%}.lc-sidenav__overlay{position:fixed;inset:0;background-color:#00000080;opacity:0;animation:fadeIn .3s ease-out forwards;z-index:1000;cursor:pointer}@media(prefers-reduced-motion:reduce){.lc-sidenav__overlay{animation:none;opacity:1}}.lc-sidenav{--lc-sidenav-bg: var(--color-background, #ffffff);--lc-sidenav-fg: #374151;--lc-sidenav-fg-active: #111827;--lc-sidenav-border: var(--color-border, #e5e7eb);--lc-sidenav-hover-bg: #f3f4f6;--lc-sidenav-section-fg: #6b7280;position:fixed;top:0;bottom:0;background-color:var(--lc-sidenav-bg);box-shadow:var(--elevation-3, 0 10px 15px -3px rgba(0, 0, 0, .1));z-index:1001;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}.lc-sidenav--left{left:0}.lc-sidenav--right{right:0}.lc-sidenav--drawer.lc-sidenav--left{animation:slideInLeft .3s ease-out}.lc-sidenav--drawer.lc-sidenav--right{animation:slideInRight .3s ease-out}@media(prefers-reduced-motion:reduce){.lc-sidenav--drawer{animation:none!important}}.lc-sidenav--docked{position:static;z-index:auto;height:100%;box-shadow:none;border-right:1px solid var(--lc-sidenav-border, #e5e7eb);transform:translate(0);transition:width .3s ease,transform .3s ease}.lc-sidenav--docked:not(.lc-sidenav--open){width:0!important;overflow:hidden;border-right:none}.lc-sidenav--collapsed{width:56px!important;overflow:visible}.lc-sidenav--collapsed .lc-sidenav__nav-label,.lc-sidenav--collapsed .lc-sidenav__nav-chevron,.lc-sidenav--collapsed .lc-sidenav__section-title,.lc-sidenav--collapsed .lc-sidenav__action-btn,.lc-sidenav--collapsed .lc-sidenav__section-header{display:none}.lc-sidenav--collapsed .lc-sidenav__nav{padding:.5rem;gap:.125rem}.lc-sidenav--collapsed .lc-sidenav__nav-item-row .lc-sidenav__action-btn{display:none}.lc-sidenav--collapsed .lc-sidenav__nav-item{justify-content:center;padding:.625rem;gap:0;border-radius:var(--radius-md, .375rem);position:relative}.lc-sidenav--collapsed .lc-sidenav__nav-item:hover:after{content:attr(title);position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:8px;padding:4px 10px;background-color:var(--color-neutral-900, #111827);color:#fff;font-size:.75rem;white-space:nowrap;border-radius:4px;z-index:1002;pointer-events:none}.lc-sidenav--collapsed .lc-sidenav__nav-icon{width:22px;height:22px}.lc-sidenav--collapsed .lc-sidenav__nav-badge{position:absolute;top:2px;right:2px;margin-left:0;font-size:.625rem;min-width:0;padding:0 3px;line-height:1.2}.lc-sidenav--collapsed .lc-sidenav__nav-children{display:none}.lc-sidenav--collapsed .lc-sidenav__section-items{display:flex;flex-direction:column;gap:.125rem}.lc-sidenav--collapsed .lc-sidenav__section{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--color-divider, #e5e7eb)}.lc-sidenav--collapsed .lc-sidenav__content{display:none}.lc-sidenav--collapsed .lc-sidenav__logo{padding:var(--spacing-3);justify-content:center}.lc-sidenav__logo{display:flex;align-items:center;padding:var(--spacing-3) var(--spacing-4);border-bottom:1px solid var(--lc-sidenav-border);height:64px;flex-shrink:0}.lc-sidenav__logo-link{display:flex;align-items:center;text-decoration:none;color:var(--lc-sidenav-fg);background:transparent;border:none;padding:0;cursor:pointer}.lc-sidenav__logo-link:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:4px;border-radius:var(--radius-sm, .25rem)}.lc-sidenav__close{position:absolute;top:1rem;right:1rem;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;background:none;border:none;border-radius:var(--border-radius-md, .375rem);color:var(--color-text-secondary);cursor:pointer;transition:background-color .2s ease,color .2s ease;z-index:1}.lc-sidenav__close:hover{background-color:var(--color-surface);color:var(--color-text-primary)}.lc-sidenav__close:focus-visible{outline:2px solid var(--color-primary-500, rgb(59, 130, 246));outline-offset:2px}.lc-sidenav__close:active{background-color:var(--color-border)}.lc-sidenav__close svg{width:1.25rem;height:1.25rem}.lc-sidenav__nav{display:flex;flex-direction:column;gap:var(--spacing-1, .25rem);padding:4rem 1rem 1rem}.lc-sidenav__nav--docked{padding-top:1rem;gap:0}.lc-sidenav__section:not(:first-child){margin-top:var(--spacing-4, 1rem);padding-top:var(--spacing-3, .75rem)}.lc-sidenav__section-header{display:flex;align-items:center;justify-content:space-between;padding-right:var(--spacing-2, .5rem)}.lc-sidenav__section-title{padding:0 var(--spacing-3, .75rem);margin-bottom:var(--spacing-2, .5rem);font-size:var(--font-size-xs, .75rem);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--lc-sidenav-section-fg)}.lc-sidenav__section-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--spacing-1, .25rem)}.lc-sidenav__nav-item{display:flex;align-items:center;gap:var(--spacing-3, .75rem);padding:var(--spacing-2, .5rem) var(--spacing-3, .75rem);text-decoration:none;color:var(--lc-sidenav-fg);border-radius:var(--radius-md, .375rem);transition:background-color .2s ease,color .2s ease;font-size:var(--font-size-sm, .875rem);font-weight:500;cursor:pointer}.lc-sidenav__nav-item:hover{background-color:var(--lc-sidenav-hover-bg);color:var(--lc-sidenav-fg-active)}.lc-sidenav__nav-item:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-sidenav__nav-item--active{background-color:var(--color-primary-50, rgba(59, 130, 246, .1));color:var(--color-primary-700, #1d4ed8);font-weight:600}.lc-sidenav__nav-item--active .lc-sidenav__nav-icon{color:var(--color-primary-600, #2563eb)}.lc-sidenav__nav-icon{width:20px;height:20px;flex-shrink:0;color:currentColor}.lc-sidenav__nav-chevron{width:16px;height:16px;flex-shrink:0;margin-left:auto;transition:transform .2s ease}.lc-sidenav__nav-badge{flex-shrink:0;margin-left:auto}.lc-sidenav__nav-item--expanded .lc-sidenav__nav-chevron{transform:rotate(180deg)}.lc-sidenav__nav-item--parent{width:100%;border:none;background:none;font-family:inherit;text-align:left}.lc-sidenav__nav-children{display:flex;flex-direction:column;gap:var(--spacing-1, .25rem);padding-left:var(--spacing-4, 1rem)}.lc-sidenav__nav-item--child{font-size:var(--font-size-sm, .875rem)}.lc-sidenav__nav-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lc-sidenav__nav-item-row{display:flex;align-items:center}.lc-sidenav__nav-item-row .lc-sidenav__nav-item{flex:1;min-width:0}.lc-sidenav__nav-item-row .lc-sidenav__action-btn{opacity:0;transition:opacity .15s ease}.lc-sidenav__nav-item-row:hover .lc-sidenav__action-btn{opacity:1}.lc-sidenav__action-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;padding:0;background:transparent;border:none;border-radius:var(--radius-sm, .25rem);color:var(--lc-sidenav-section-fg);cursor:pointer;transition:background-color .15s ease,color .15s ease}.lc-sidenav__action-btn:hover{background-color:var(--lc-sidenav-hover-bg);color:var(--lc-sidenav-fg-active)}.lc-sidenav__action-btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px;opacity:1}.lc-sidenav__content{flex:1;padding:4rem 1rem 1rem;overflow-y:auto;-webkit-overflow-scrolling:touch}.lc-sidenav__content--docked{padding-top:1rem}.lc-sidenav__content::-webkit-scrollbar{width:.5rem}.lc-sidenav__content::-webkit-scrollbar-track{background:var(--color-surface);border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav__content::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav__content::-webkit-scrollbar-thumb:hover{background:var(--color-text-secondary)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@media(max-width:640px){.lc-sidenav--drawer{width:100%!important;max-width:320px}}@media(max-width:480px){.lc-sidenav--drawer{max-width:280px}}.lc-sidenav__content:focus{outline:none}.lc-sidenav__content a:focus-visible,.lc-sidenav__content button:focus-visible{outline:2px solid var(--color-primary-500, rgb(59, 130, 246));outline-offset:2px;border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav--dark{--lc-sidenav-bg: #18181b;--lc-sidenav-fg: #d4d4d8;--lc-sidenav-fg-active: #f5f5f5;--lc-sidenav-border: #3f3f46;--lc-sidenav-hover-bg: #27272a;--lc-sidenav-section-fg: #a1a1aa}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light){--lc-sidenav-bg: #18181b;--lc-sidenav-fg: #d4d4d8;--lc-sidenav-fg-active: #f5f5f5;--lc-sidenav-border: #3f3f46;--lc-sidenav-hover-bg: #27272a;--lc-sidenav-section-fg: #a1a1aa}@media print{.lc-sidenav-container,.lc-sidenav__overlay,.lc-sidenav{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }, { kind: "component", type: BadgeComponent, selector: "lc-badge", inputs: ["variant", "size", "rounded"] }, { kind: "component", type: LogoComponent, selector: "lc-logo", inputs: ["variant", "size", "alt", "clickable", "colorMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: SidenavComponent, isStandalone: true, selector: "lc-sidenav", inputs: { isOpenInput: "isOpenInput", modeInput: "modeInput", positionInput: "positionInput", widthInput: "widthInput", ariaLabelInput: "ariaLabelInput", hasOverlayInput: "hasOverlayInput", itemsInput: "itemsInput", activeRouteInput: "activeRouteInput", collapsedInput: "collapsedInput", showLogoInput: "showLogoInput", mobileBreakpointInput: "mobileBreakpointInput", themeInput: ["theme", "themeInput"] }, outputs: { closed: "closed", itemClicked: "itemClicked", itemAction: "itemAction" }, host: { listeners: { "document:keydown": "handleKeydown($event)" }, properties: { "class.lc-sidenav-container": "true", "class.lc-sidenav-container--docked": "effectiveMode() === 'docked'", "class.lc-sidenav-container--open": "isOpen()" } }, ngImport: i0, template: "<!-- Drawer mode: render with overlay and conditional visibility -->\n@if (effectiveMode() === 'drawer') {\n  @if (isOpen()) {\n    <!-- Overlay backdrop -->\n    @if (hasOverlay()) {\n      <div\n        class=\"lc-sidenav__overlay\"\n        (click)=\"handleClose()\"\n        aria-hidden=\"true\">\n      </div>\n    }\n\n    <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n  }\n}\n\n<!-- Docked mode: always render, visibility controlled by CSS -->\n@if (effectiveMode() === 'docked') {\n  <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n}\n\n<!-- Shared sidenav panel template -->\n<ng-template #sidenavPanel>\n  <aside\n    [class]=\"sidenavClasses()\"\n    [ngStyle]=\"sidenavStyles()\"\n    role=\"navigation\"\n    [attr.aria-label]=\"ariaLabel()\">\n\n    <!-- Logo area (sidebar-first layout) -->\n    @if (showLogo()) {\n      <div class=\"lc-sidenav__logo\">\n        <button type=\"button\" class=\"lc-sidenav__logo-link\" aria-label=\"Toggle sidebar\" (click)=\"toggleCollapsed()\">\n          <lc-logo [variant]=\"collapsed() ? 'emblem' : 'full'\" [size]=\"collapsed() ? 'sm' : 'md'\" [clickable]=\"false\" [colorMode]=\"themeMode() === 'dark' ? 'dark' : themeMode() === 'light' ? 'light' : 'auto'\" />\n        </button>\n      </div>\n    }\n\n    <!-- Close button (drawer mode only) -->\n    @if (effectiveMode() === 'drawer') {\n      <button\n        type=\"button\"\n        class=\"lc-sidenav__close\"\n        (click)=\"handleClose()\"\n        aria-label=\"Close navigation\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\">\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n        </svg>\n      </button>\n    }\n\n    <!-- Navigation items (if provided) -->\n    @if (items().length > 0) {\n      <nav class=\"lc-sidenav__nav\" [class.lc-sidenav__nav--docked]=\"effectiveMode() === 'docked'\">\n        @for (item of sortedItems(); track item.id) {\n          <!-- Section headline -->\n          @if (item.isSection) {\n            <div class=\"lc-sidenav__section\">\n              <div class=\"lc-sidenav__section-header\">\n                <h2 class=\"lc-sidenav__section-title\">{{ item.label }}</h2>\n                @if (item.action) {\n                  <button\n                    type=\"button\"\n                    class=\"lc-sidenav__action-btn\"\n                    [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n                    (click)=\"handleItemAction($event, item)\">\n                    <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                  </button>\n                }\n              </div>\n              @if (item.children?.length) {\n                <ul class=\"lc-sidenav__section-items\">\n                  @for (child of item.children; track child.id) {\n                    <li>\n                      @if (child.children?.length) {\n                        <!-- Section child with nested children (collapsible) -->\n                        <div class=\"lc-sidenav__nav-item-row\">\n                          <button\n                            type=\"button\"\n                            class=\"lc-sidenav__nav-item lc-sidenav__nav-item--parent\"\n                            [class.lc-sidenav__nav-item--expanded]=\"isExpanded(child)\"\n                            [class.lc-sidenav__nav-item--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:var(--spacing-3);justify-content:center}.lc-sidenav__logo{display:flex;align-items:center;padding:var(--spacing-4) var(--spacing-4);border-bottom:1px solid var(--lc-sidenav-border);min-height:64px;flex-shrink:0}.lc-sidenav__logo-link{display:flex;align-items:center;text-decoration:none;color:var(--lc-sidenav-fg);background:transparent;border:none;padding:0;cursor:pointer}.lc-sidenav__logo-link:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:4px;border-radius:var(--radius-sm, .25rem)}.lc-sidenav__close{position:absolute;top:1rem;right:1rem;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;background:none;border:none;border-radius:var(--border-radius-md, .375rem);color:var(--color-text-secondary);cursor:pointer;transition:background-color .2s ease,color .2s ease;z-index:1}.lc-sidenav__close:hover{background-color:var(--color-surface);color:var(--color-text-primary)}.lc-sidenav__close:focus-visible{outline:2px solid var(--color-primary-500, rgb(59, 130, 246));outline-offset:2px}.lc-sidenav__close:active{background-color:var(--color-border)}.lc-sidenav__close svg{width:1.25rem;height:1.25rem}.lc-sidenav__nav{display:flex;flex-direction:column;gap:var(--spacing-1, .25rem);padding:4rem 1rem 1rem}.lc-sidenav__nav--docked{padding-top:1rem;gap:0}.lc-sidenav__section:not(:first-child){margin-top:var(--spacing-4, 1rem);padding-top:var(--spacing-3, .75rem)}.lc-sidenav__section-header{display:flex;align-items:center;justify-content:space-between;padding-right: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(--spacing-1, .25rem)}.lc-sidenav__nav-item{display:flex;align-items:center;gap:var(--spacing-3, .75rem);padding:var(--spacing-2, .5rem) var(--spacing-3, .75rem);text-decoration:none;color:var(--lc-sidenav-fg);border-radius:var(--radius-md, .375rem);transition:background-color .2s ease,color .2s ease;font-size:var(--font-size-sm, .875rem);font-weight:500;cursor:pointer}.lc-sidenav__nav-item:hover{background-color:var(--lc-sidenav-hover-bg);color:var(--lc-sidenav-fg-active)}.lc-sidenav__nav-item:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-sidenav__nav-item--active{background-color:var(--color-primary-50, rgba(59, 130, 246, .1));color:var(--color-primary-700, #1d4ed8);font-weight:600}.lc-sidenav__nav-item--active .lc-sidenav__nav-icon{color:var(--color-primary-600, #2563eb)}.lc-sidenav__nav-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(--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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }, { kind: "component", type: BadgeComponent, selector: "lc-badge", inputs: ["variant", "size", "rounded"] }, { kind: "component", type: LogoComponent, selector: "lc-logo", inputs: ["variant", "size", "alt", "clickable", "colorMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: SidenavComponent, decorators: [{
             type: Component,
@@ -6412,7 +6427,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 class=\"lc-sidenav__logo\">\n        <button type=\"button\" class=\"lc-sidenav__logo-link\" aria-label=\"Toggle sidebar\" (click)=\"toggleCollapsed()\">\n          <lc-logo [variant]=\"collapsed() ? 'emblem' : 'full'\" size=\"sm\" [clickable]=\"false\" [colorMode]=\"themeMode() === 'dark' ? 'dark' : themeMode() === 'light' ? 'light' : 'auto'\" />\n        </button>\n      </div>\n    }\n\n    <!-- Close button (drawer mode only) -->\n    @if (effectiveMode() === 'drawer') {\n      <button\n        type=\"button\"\n        class=\"lc-sidenav__close\"\n        (click)=\"handleClose()\"\n        aria-label=\"Close navigation\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\">\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n        </svg>\n      </button>\n    }\n\n    <!-- Navigation items (if provided) -->\n    @if (items().length > 0) {\n      <nav class=\"lc-sidenav__nav\" [class.lc-sidenav__nav--docked]=\"effectiveMode() === 'docked'\">\n        @for (item of sortedItems(); track item.id) {\n          <!-- Section headline -->\n          @if (item.isSection) {\n            <div class=\"lc-sidenav__section\">\n              <div class=\"lc-sidenav__section-header\">\n                <h2 class=\"lc-sidenav__section-title\">{{ item.label }}</h2>\n                @if (item.action) {\n                  <button\n                    type=\"button\"\n                    class=\"lc-sidenav__action-btn\"\n                    [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n                    (click)=\"handleItemAction($event, item)\">\n                    <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                  </button>\n                }\n              </div>\n              @if (item.children?.length) {\n                <ul class=\"lc-sidenav__section-items\">\n                  @for (child of item.children; track child.id) {\n                    <li>\n                      @if (child.children?.length) {\n                        <!-- Section child with nested children (collapsible) -->\n                        <div class=\"lc-sidenav__nav-item-row\">\n                          <button\n                            type=\"button\"\n                            class=\"lc-sidenav__nav-item lc-sidenav__nav-item--parent\"\n                            [class.lc-sidenav__nav-item--expanded]=\"isExpanded(child)\"\n                            [class.lc-sidenav__nav-item--active]=\"hasActiveChild(child)\"\n                            (click)=\"toggleExpanded(child)\"\n                            [attr.aria-expanded]=\"isExpanded(child)\"\n                            [title]=\"collapsed() ? child.label : ''\">\n                            @if (child.icon) {\n                              <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                            }\n                            <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n                            @if (child.badge) {\n                              <lc-badge [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>\n                            }\n                            <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" class=\"lc-sidenav__nav-chevron\" />\n                          </button>\n                          @if (child.action) {\n                            <button\n                              type=\"button\"\n                              class=\"lc-sidenav__action-btn\"\n                              [attr.aria-label]=\"child.action.ariaLabel || child.label + ' action'\"\n                              (click)=\"handleItemAction($event, child)\">\n                              <lc-icon [name]=\"child.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                            </button>\n                          }\n                        </div>\n                        @if (isExpanded(child)) {\n                          <div class=\"lc-sidenav__nav-children\">\n                            @for (grandchild of child.children; track grandchild.id) {\n                              <a\n                                [routerLink]=\"grandchild.route\"\n                                routerLinkActive=\"lc-sidenav__nav-item--active\"\n                                class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                                (click)=\"handleItemClick(grandchild)\"\n                                [attr.aria-current]=\"isItemActive(grandchild) ? 'page' : null\">\n                                @if (grandchild.icon) {\n                                  <lc-icon [name]=\"grandchild.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                                }\n                                <span class=\"lc-sidenav__nav-label\">{{ grandchild.label }}</span>\n                                @if (grandchild.badge) {\n                                  <lc-badge [variant]=\"grandchild.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ grandchild.badge.value }}</lc-badge>\n                                }\n                              </a>\n                            }\n                          </div>\n                        }\n                      } @else {\n                        <!-- Section child (simple link) -->\n                        <div class=\"lc-sidenav__nav-item-row\">\n                          <a\n                            [routerLink]=\"child.route\"\n                            routerLinkActive=\"lc-sidenav__nav-item--active\"\n                            [routerLinkActiveOptions]=\"{ exact: child.route === '/' }\"\n                            class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                            (click)=\"handleItemClick(child)\"\n                            [attr.aria-current]=\"isItemActive(child) ? 'page' : null\"\n                            [title]=\"collapsed() ? child.label : ''\">\n                            @if (child.icon) {\n                              <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                            }\n                            <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n                            @if (child.badge) {\n                              <lc-badge [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>\n                            }\n                          </a>\n                          @if (child.action) {\n                            <button\n                              type=\"button\"\n                              class=\"lc-sidenav__action-btn\"\n                              [attr.aria-label]=\"child.action.ariaLabel || child.label + ' action'\"\n                              (click)=\"handleItemAction($event, child)\">\n                              <lc-icon [name]=\"child.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                            </button>\n                          }\n                        </div>\n                      }\n                    </li>\n                  }\n                </ul>\n              }\n            </div>\n          } @else if (item.children?.length) {\n            <!-- Parent item with children (collapsible group) -->\n            <div class=\"lc-sidenav__nav-item-row\">\n              <button\n                type=\"button\"\n                class=\"lc-sidenav__nav-item lc-sidenav__nav-item--parent\"\n                [class.lc-sidenav__nav-item--expanded]=\"isExpanded(item)\"\n                [class.lc-sidenav__nav-item--active]=\"hasActiveChild(item)\"\n                (click)=\"toggleExpanded(item)\"\n                [attr.aria-expanded]=\"isExpanded(item)\"\n                [title]=\"collapsed() ? item.label : ''\">\n                <lc-icon [name]=\"item.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                <span class=\"lc-sidenav__nav-label\">{{ item.label }}</span>\n                @if (item.badge) {\n                  <lc-badge [variant]=\"item.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ item.badge.value }}</lc-badge>\n                }\n                <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" class=\"lc-sidenav__nav-chevron\" />\n              </button>\n              @if (item.action) {\n                <button\n                  type=\"button\"\n                  class=\"lc-sidenav__action-btn\"\n                  [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n                  (click)=\"handleItemAction($event, item)\">\n                  <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                </button>\n              }\n            </div>\n            @if (isExpanded(item)) {\n              <div class=\"lc-sidenav__nav-children\">\n                @for (child of item.children; track child.id) {\n                  <a\n                    [routerLink]=\"child.route\"\n                    routerLinkActive=\"lc-sidenav__nav-item--active\"\n                    class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                    (click)=\"handleItemClick(child)\"\n                    [attr.aria-current]=\"isItemActive(child) ? 'page' : null\">\n                    <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                    <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n                    @if (child.badge) {\n                      <lc-badge [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>\n                    }\n                  </a>\n                }\n              </div>\n            }\n          } @else {\n            <!-- Simple item without children -->\n            <div class=\"lc-sidenav__nav-item-row\">\n              <a\n                [routerLink]=\"item.route\"\n                routerLinkActive=\"lc-sidenav__nav-item--active\"\n                [routerLinkActiveOptions]=\"{ exact: item.route === '/' }\"\n                class=\"lc-sidenav__nav-item\"\n                (click)=\"handleItemClick(item)\"\n                [attr.aria-current]=\"isItemActive(item) ? 'page' : null\"\n                [title]=\"collapsed() ? item.label : ''\">\n                <lc-icon [name]=\"item.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                <span class=\"lc-sidenav__nav-label\">{{ item.label }}</span>\n                @if (item.badge) {\n                  <lc-badge [variant]=\"item.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ item.badge.value }}</lc-badge>\n                }\n              </a>\n              @if (item.action) {\n                <button\n                  type=\"button\"\n                  class=\"lc-sidenav__action-btn\"\n                  [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n                  (click)=\"handleItemAction($event, item)\">\n                  <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                </button>\n              }\n            </div>\n          }\n        }\n      </nav>\n    }\n\n    <!-- Content projection (for custom content) -->\n    <div class=\"lc-sidenav__content\" [class.lc-sidenav__content--docked]=\"mode() === 'docked'\">\n      <ng-content></ng-content>\n    </div>\n  </aside>\n</ng-template>\n", styles: [".lc-sidenav-container{position:relative;z-index:1000}.lc-sidenav-container--docked{position:static;z-index:auto;height:100%}.lc-sidenav__overlay{position:fixed;inset:0;background-color:#00000080;opacity:0;animation:fadeIn .3s ease-out forwards;z-index:1000;cursor:pointer}@media(prefers-reduced-motion:reduce){.lc-sidenav__overlay{animation:none;opacity:1}}.lc-sidenav{--lc-sidenav-bg: var(--color-background, #ffffff);--lc-sidenav-fg: #374151;--lc-sidenav-fg-active: #111827;--lc-sidenav-border: var(--color-border, #e5e7eb);--lc-sidenav-hover-bg: #f3f4f6;--lc-sidenav-section-fg: #6b7280;position:fixed;top:0;bottom:0;background-color:var(--lc-sidenav-bg);box-shadow:var(--elevation-3, 0 10px 15px -3px rgba(0, 0, 0, .1));z-index:1001;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}.lc-sidenav--left{left:0}.lc-sidenav--right{right:0}.lc-sidenav--drawer.lc-sidenav--left{animation:slideInLeft .3s ease-out}.lc-sidenav--drawer.lc-sidenav--right{animation:slideInRight .3s ease-out}@media(prefers-reduced-motion:reduce){.lc-sidenav--drawer{animation:none!important}}.lc-sidenav--docked{position:static;z-index:auto;height:100%;box-shadow:none;border-right:1px solid var(--lc-sidenav-border, #e5e7eb);transform:translate(0);transition:width .3s ease,transform .3s ease}.lc-sidenav--docked:not(.lc-sidenav--open){width:0!important;overflow:hidden;border-right:none}.lc-sidenav--collapsed{width:56px!important;overflow:visible}.lc-sidenav--collapsed .lc-sidenav__nav-label,.lc-sidenav--collapsed .lc-sidenav__nav-chevron,.lc-sidenav--collapsed .lc-sidenav__section-title,.lc-sidenav--collapsed .lc-sidenav__action-btn,.lc-sidenav--collapsed .lc-sidenav__section-header{display:none}.lc-sidenav--collapsed .lc-sidenav__nav{padding:.5rem;gap:.125rem}.lc-sidenav--collapsed .lc-sidenav__nav-item-row .lc-sidenav__action-btn{display:none}.lc-sidenav--collapsed .lc-sidenav__nav-item{justify-content:center;padding:.625rem;gap:0;border-radius:var(--radius-md, .375rem);position:relative}.lc-sidenav--collapsed .lc-sidenav__nav-item:hover:after{content:attr(title);position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:8px;padding:4px 10px;background-color:var(--color-neutral-900, #111827);color:#fff;font-size:.75rem;white-space:nowrap;border-radius:4px;z-index:1002;pointer-events:none}.lc-sidenav--collapsed .lc-sidenav__nav-icon{width:22px;height:22px}.lc-sidenav--collapsed .lc-sidenav__nav-badge{position:absolute;top:2px;right:2px;margin-left:0;font-size:.625rem;min-width:0;padding:0 3px;line-height:1.2}.lc-sidenav--collapsed .lc-sidenav__nav-children{display:none}.lc-sidenav--collapsed .lc-sidenav__section-items{display:flex;flex-direction:column;gap:.125rem}.lc-sidenav--collapsed .lc-sidenav__section{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--color-divider, #e5e7eb)}.lc-sidenav--collapsed .lc-sidenav__content{display:none}.lc-sidenav--collapsed .lc-sidenav__logo{padding:var(--spacing-3);justify-content:center}.lc-sidenav__logo{display:flex;align-items:center;padding:var(--spacing-3) var(--spacing-4);border-bottom:1px solid var(--lc-sidenav-border);height:64px;flex-shrink:0}.lc-sidenav__logo-link{display:flex;align-items:center;text-decoration:none;color:var(--lc-sidenav-fg);background:transparent;border:none;padding:0;cursor:pointer}.lc-sidenav__logo-link:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:4px;border-radius:var(--radius-sm, .25rem)}.lc-sidenav__close{position:absolute;top:1rem;right:1rem;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;background:none;border:none;border-radius:var(--border-radius-md, .375rem);color:var(--color-text-secondary);cursor:pointer;transition:background-color .2s ease,color .2s ease;z-index:1}.lc-sidenav__close:hover{background-color:var(--color-surface);color:var(--color-text-primary)}.lc-sidenav__close:focus-visible{outline:2px solid var(--color-primary-500, rgb(59, 130, 246));outline-offset:2px}.lc-sidenav__close:active{background-color:var(--color-border)}.lc-sidenav__close svg{width:1.25rem;height:1.25rem}.lc-sidenav__nav{display:flex;flex-direction:column;gap:var(--spacing-1, .25rem);padding:4rem 1rem 1rem}.lc-sidenav__nav--docked{padding-top:1rem;gap:0}.lc-sidenav__section:not(:first-child){margin-top:var(--spacing-4, 1rem);padding-top:var(--spacing-3, .75rem)}.lc-sidenav__section-header{display:flex;align-items:center;justify-content:space-between;padding-right:var(--spacing-2, .5rem)}.lc-sidenav__section-title{padding:0 var(--spacing-3, .75rem);margin-bottom:var(--spacing-2, .5rem);font-size:var(--font-size-xs, .75rem);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--lc-sidenav-section-fg)}.lc-sidenav__section-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--spacing-1, .25rem)}.lc-sidenav__nav-item{display:flex;align-items:center;gap:var(--spacing-3, .75rem);padding:var(--spacing-2, .5rem) var(--spacing-3, .75rem);text-decoration:none;color:var(--lc-sidenav-fg);border-radius:var(--radius-md, .375rem);transition:background-color .2s ease,color .2s ease;font-size:var(--font-size-sm, .875rem);font-weight:500;cursor:pointer}.lc-sidenav__nav-item:hover{background-color:var(--lc-sidenav-hover-bg);color:var(--lc-sidenav-fg-active)}.lc-sidenav__nav-item:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-sidenav__nav-item--active{background-color:var(--color-primary-50, rgba(59, 130, 246, .1));color:var(--color-primary-700, #1d4ed8);font-weight:600}.lc-sidenav__nav-item--active .lc-sidenav__nav-icon{color:var(--color-primary-600, #2563eb)}.lc-sidenav__nav-icon{width:20px;height:20px;flex-shrink:0;color:currentColor}.lc-sidenav__nav-chevron{width:16px;height:16px;flex-shrink:0;margin-left:auto;transition:transform .2s ease}.lc-sidenav__nav-badge{flex-shrink:0;margin-left:auto}.lc-sidenav__nav-item--expanded .lc-sidenav__nav-chevron{transform:rotate(180deg)}.lc-sidenav__nav-item--parent{width:100%;border:none;background:none;font-family:inherit;text-align:left}.lc-sidenav__nav-children{display:flex;flex-direction:column;gap:var(--spacing-1, .25rem);padding-left:var(--spacing-4, 1rem)}.lc-sidenav__nav-item--child{font-size:var(--font-size-sm, .875rem)}.lc-sidenav__nav-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lc-sidenav__nav-item-row{display:flex;align-items:center}.lc-sidenav__nav-item-row .lc-sidenav__nav-item{flex:1;min-width:0}.lc-sidenav__nav-item-row .lc-sidenav__action-btn{opacity:0;transition:opacity .15s ease}.lc-sidenav__nav-item-row:hover .lc-sidenav__action-btn{opacity:1}.lc-sidenav__action-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;padding:0;background:transparent;border:none;border-radius:var(--radius-sm, .25rem);color:var(--lc-sidenav-section-fg);cursor:pointer;transition:background-color .15s ease,color .15s ease}.lc-sidenav__action-btn:hover{background-color:var(--lc-sidenav-hover-bg);color:var(--lc-sidenav-fg-active)}.lc-sidenav__action-btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px;opacity:1}.lc-sidenav__content{flex:1;padding:4rem 1rem 1rem;overflow-y:auto;-webkit-overflow-scrolling:touch}.lc-sidenav__content--docked{padding-top:1rem}.lc-sidenav__content::-webkit-scrollbar{width:.5rem}.lc-sidenav__content::-webkit-scrollbar-track{background:var(--color-surface);border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav__content::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav__content::-webkit-scrollbar-thumb:hover{background:var(--color-text-secondary)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@media(max-width:640px){.lc-sidenav--drawer{width:100%!important;max-width:320px}}@media(max-width:480px){.lc-sidenav--drawer{max-width:280px}}.lc-sidenav__content:focus{outline:none}.lc-sidenav__content a:focus-visible,.lc-sidenav__content button:focus-visible{outline:2px solid var(--color-primary-500, rgb(59, 130, 246));outline-offset:2px;border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav--dark{--lc-sidenav-bg: #18181b;--lc-sidenav-fg: #d4d4d8;--lc-sidenav-fg-active: #f5f5f5;--lc-sidenav-border: #3f3f46;--lc-sidenav-hover-bg: #27272a;--lc-sidenav-section-fg: #a1a1aa}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light){--lc-sidenav-bg: #18181b;--lc-sidenav-fg: #d4d4d8;--lc-sidenav-fg-active: #f5f5f5;--lc-sidenav-border: #3f3f46;--lc-sidenav-hover-bg: #27272a;--lc-sidenav-section-fg: #a1a1aa}@media print{.lc-sidenav-container,.lc-sidenav__overlay,.lc-sidenav{display:none}}\n"] }]
+                    }, template: "<!-- Drawer mode: render with overlay and conditional visibility -->\n@if (effectiveMode() === 'drawer') {\n  @if (isOpen()) {\n    <!-- Overlay backdrop -->\n    @if (hasOverlay()) {\n      <div\n        class=\"lc-sidenav__overlay\"\n        (click)=\"handleClose()\"\n        aria-hidden=\"true\">\n      </div>\n    }\n\n    <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n  }\n}\n\n<!-- Docked mode: always render, visibility controlled by CSS -->\n@if (effectiveMode() === 'docked') {\n  <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n}\n\n<!-- Shared sidenav panel template -->\n<ng-template #sidenavPanel>\n  <aside\n    [class]=\"sidenavClasses()\"\n    [ngStyle]=\"sidenavStyles()\"\n    role=\"navigation\"\n    [attr.aria-label]=\"ariaLabel()\">\n\n    <!-- Logo area (sidebar-first layout) -->\n    @if (showLogo()) {\n      <div class=\"lc-sidenav__logo\">\n        <button type=\"button\" class=\"lc-sidenav__logo-link\" aria-label=\"Toggle sidebar\" (click)=\"toggleCollapsed()\">\n          <lc-logo [variant]=\"collapsed() ? 'emblem' : 'full'\" [size]=\"collapsed() ? 'sm' : 'md'\" [clickable]=\"false\" [colorMode]=\"themeMode() === 'dark' ? 'dark' : themeMode() === 'light' ? 'light' : 'auto'\" />\n        </button>\n      </div>\n    }\n\n    <!-- Close button (drawer mode only) -->\n    @if (effectiveMode() === 'drawer') {\n      <button\n        type=\"button\"\n        class=\"lc-sidenav__close\"\n        (click)=\"handleClose()\"\n        aria-label=\"Close navigation\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\">\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n        </svg>\n      </button>\n    }\n\n    <!-- Navigation items (if provided) -->\n    @if (items().length > 0) {\n      <nav class=\"lc-sidenav__nav\" [class.lc-sidenav__nav--docked]=\"effectiveMode() === 'docked'\">\n        @for (item of sortedItems(); track item.id) {\n          <!-- Section headline -->\n          @if (item.isSection) {\n            <div class=\"lc-sidenav__section\">\n              <div class=\"lc-sidenav__section-header\">\n                <h2 class=\"lc-sidenav__section-title\">{{ item.label }}</h2>\n                @if (item.action) {\n                  <button\n                    type=\"button\"\n                    class=\"lc-sidenav__action-btn\"\n                    [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n                    (click)=\"handleItemAction($event, item)\">\n                    <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                  </button>\n                }\n              </div>\n              @if (item.children?.length) {\n                <ul class=\"lc-sidenav__section-items\">\n                  @for (child of item.children; track child.id) {\n                    <li>\n                      @if (child.children?.length) {\n                        <!-- Section child with nested children (collapsible) -->\n                        <div class=\"lc-sidenav__nav-item-row\">\n                          <button\n                            type=\"button\"\n                            class=\"lc-sidenav__nav-item lc-sidenav__nav-item--parent\"\n                            [class.lc-sidenav__nav-item--expanded]=\"isExpanded(child)\"\n                            [class.lc-sidenav__nav-item--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:var(--spacing-3);justify-content:center}.lc-sidenav__logo{display:flex;align-items:center;padding:var(--spacing-4) var(--spacing-4);border-bottom:1px solid var(--lc-sidenav-border);min-height:64px;flex-shrink:0}.lc-sidenav__logo-link{display:flex;align-items:center;text-decoration:none;color:var(--lc-sidenav-fg);background:transparent;border:none;padding:0;cursor:pointer}.lc-sidenav__logo-link:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:4px;border-radius:var(--radius-sm, .25rem)}.lc-sidenav__close{position:absolute;top:1rem;right:1rem;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;background:none;border:none;border-radius:var(--border-radius-md, .375rem);color:var(--color-text-secondary);cursor:pointer;transition:background-color .2s ease,color .2s ease;z-index:1}.lc-sidenav__close:hover{background-color:var(--color-surface);color:var(--color-text-primary)}.lc-sidenav__close:focus-visible{outline:2px solid var(--color-primary-500, rgb(59, 130, 246));outline-offset:2px}.lc-sidenav__close:active{background-color:var(--color-border)}.lc-sidenav__close svg{width:1.25rem;height:1.25rem}.lc-sidenav__nav{display:flex;flex-direction:column;gap:var(--spacing-1, .25rem);padding:4rem 1rem 1rem}.lc-sidenav__nav--docked{padding-top:1rem;gap:0}.lc-sidenav__section:not(:first-child){margin-top:var(--spacing-4, 1rem);padding-top:var(--spacing-3, .75rem)}.lc-sidenav__section-header{display:flex;align-items:center;justify-content:space-between;padding-right: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(--spacing-1, .25rem)}.lc-sidenav__nav-item{display:flex;align-items:center;gap:var(--spacing-3, .75rem);padding:var(--spacing-2, .5rem) var(--spacing-3, .75rem);text-decoration:none;color:var(--lc-sidenav-fg);border-radius:var(--radius-md, .375rem);transition:background-color .2s ease,color .2s ease;font-size:var(--font-size-sm, .875rem);font-weight:500;cursor:pointer}.lc-sidenav__nav-item:hover{background-color:var(--lc-sidenav-hover-bg);color:var(--lc-sidenav-fg-active)}.lc-sidenav__nav-item:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-sidenav__nav-item--active{background-color:var(--color-primary-50, rgba(59, 130, 246, .1));color:var(--color-primary-700, #1d4ed8);font-weight:600}.lc-sidenav__nav-item--active .lc-sidenav__nav-icon{color:var(--color-primary-600, #2563eb)}.lc-sidenav__nav-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(--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"] }]
         }], propDecorators: { isOpenInput: [{
                 type: Input
             }], modeInput: [{