@lifecorner/angular-ui-kit 3.13.0 → 3.14.0

package/fesm2022/lifecorner-angular-ui-kit-sidenav-placeholder.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lifecorner-angular-ui-kit-sidenav-placeholder.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/sidenav-placeholder/sidenav-placeholder.component.ts","../../../../libs/angular-ui-kit/src/lib/sidenav-placeholder/sidenav-placeholder.component.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, inject, input, signal } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { NavigationEnd, Router } from '@angular/router';\nimport { filter } from 'rxjs';\nimport type { NavigationItem } from '@lifecorner/angular-ui-kit/models';\n// Types only: a value import would load lc-sidenav eagerly (AS-18).\nimport type { SidenavPosition, SidenavVariant } from '@lifecorner/angular-ui-kit/sidenav';\nimport {\n  currentItemParents,\n  currentNavigationItem,\n  navigationLinks,\n  navigationPath,\n  sortNavigationItems,\n} from '@lifecorner/angular-ui-kit/internal/navigation';\n\n/** Label bar widths, cycled per row (design 002 §3). */\nconst LABEL_WIDTHS = ['64%', '48%', '72%', '56%'] as const;\n\n/**\n * Stand-in for a docked `lc-sidenav` while it loads (3.6, AS-18): an inert\n * skeleton of the rail with exactly the sidenav's boxes — the same container,\n * width, logo block, rows, sections and expanded groups, built from the same\n * classes and the same box rules — so swapping it for the sidenav moves\n * nothing (CLS 0). Give it the sidenav's bindings.\n *\n * Use it as the `@placeholder` of a `@defer (on viewport)` block. In the app\n * shell the navigation column is hidden below 1024 px, so on a phone the\n * trigger never fires and the sidenav's JavaScript never loads:\n *\n * @example\n * ```html\n * <div shell-nav>\n *   @defer (on viewport) {\n *     <lc-sidenav mode=\"docked\" [isOpen]=\"true\" width=\"100%\" [mobileBreakpoint]=\"0\"\n *                 variant=\"transparent\" ariaLabel=\"Hauptnavigation\" [items]=\"nav\" [activeRoute]=\"url()\" />\n *   } @placeholder {\n *     <lc-sidenav-placeholder [isOpen]=\"true\" width=\"100%\" variant=\"transparent\" [items]=\"nav\" [activeRoute]=\"url()\" />\n *   }\n * </div>\n * ```\n * Import `SidenavComponent` from `@lifecorner/angular-ui-kit/sidenav` and use\n * it only inside the `@defer` block; any other use of it in the same\n * component makes Angular load it eagerly. With a percentage `width`, give\n * the block a container of definite width (the app shell's column is one):\n * in a shrink-to-fit container the sidenav's width follows its label text.\n *\n * Accessibility: the whole placeholder is `aria-hidden=\"true\"` and `inert` —\n * no landmark, no tab stop, nothing announced, so focus can never be inside\n * it when it is swapped. The navigation landmark, the current item\n * (`aria-current`) and the tab order arrive with `lc-sidenav`. Static, no\n * shimmer. The skeleton shapes are filled with\n * `--lc-sidenav-placeholder-fill`; the `--lc-sidenav-*` hooks apply as on\n * `lc-sidenav` (set them on an ancestor of both).\n */\n@Component({\n  selector: 'lc-sidenav-placeholder',\n  standalone: true,\n  templateUrl: './sidenav-placeholder.component.html',\n  styleUrl: './sidenav-placeholder.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'lc-sidenav-container lc-sidenav-container--docked',\n    '[class.lc-sidenav-container--open]': 'isOpen()',\n    'aria-hidden': 'true',\n    inert: '',\n  },\n})\nexport class SidenavPlaceholderComponent {\n  private readonly router = inject(Router, { optional: true });\n  /** The router's URL, as on `lc-sidenav`; read only when `activeRoute` is empty. */\n  private readonly routerUrl = signal(this.router?.url ?? '/');\n\n  /**\n   * Navigation items, the same value as on `lc-sidenav`: they give the number\n   * of rows, the sections and the groups that start expanded.\n   * @default []\n   */\n  readonly items = input<NavigationItem[]>([]);\n\n  /**\n   * The current route, as on `lc-sidenav`. It decides which group starts\n   * expanded; when empty, the router's URL does (3.5 rules).\n   * @default ''\n   */\n  readonly activeRoute = input('');\n\n  /**\n   * The 56 px icon rail. One-way here (a `model` on `lc-sidenav`).\n   * @default false\n   */\n  readonly collapsed = input(false);\n\n  /**\n   * Whether the docked rail is open; a closed one is 0 px wide, as on `lc-sidenav`.\n   * @default false\n   */\n  readonly isOpen = input(false);\n\n  /**\n   * Width of the rail, as on `lc-sidenav`.\n   * @default '320px'\n   */\n  readonly width = input('320px');\n\n  /**\n   * Surface, as on `lc-sidenav`: `default` (the rail) or `transparent` (the\n   * side navigation on the page, 48 px pills).\n   * @default 'default'\n   */\n  readonly variant = input<SidenavVariant>('default');\n\n  /**\n   * Theme, as on `lc-sidenav`.\n   * @default 'auto'\n   */\n  readonly theme = input<'light' | 'dark' | 'auto'>('auto');\n\n  /**\n   * Position, as on `lc-sidenav`.\n   * @default 'left'\n   */\n  readonly position = input<SidenavPosition>('left');\n\n  /**\n   * Reserves the logo block, as `showLogo` on `lc-sidenav`.\n   * @default false\n   */\n  readonly showLogo = input(false);\n\n  /**\n   * Height of the logo block, as on `lc-sidenav`.\n   * @default 'md'\n   */\n  readonly logoSize = input<'xs' | 'sm' | 'md' | 'lg' | 'xl'>('md');\n\n  /** The items in display order. @internal */\n  protected readonly sortedItems = computed(() => sortNavigationItems(this.items()));\n\n  /** The groups `lc-sidenav` opens on load: the parents of the current item. @internal */\n  private readonly expanded = computed(() => {\n    const active = this.activeRoute();\n    const path = active === '' && this.router ? navigationPath(this.router, this.routerUrl()) : '';\n    const current = currentNavigationItem(navigationLinks(this.sortedItems()), active, path);\n    return new Set(currentItemParents(this.items(), current));\n  });\n\n  /** The rail's classes, in `lc-sidenav`'s order, always docked. @internal */\n  protected readonly railClasses = computed(() => {\n    const classes = ['lc-sidenav', `lc-sidenav--${this.position()}`, 'lc-sidenav--docked'];\n    if (this.isOpen()) classes.push('lc-sidenav--open');\n    if (this.collapsed()) classes.push('lc-sidenav--collapsed');\n    if (this.theme() !== 'auto') classes.push(`lc-sidenav--${this.theme()}`);\n    if (this.variant() === 'transparent') classes.push('lc-sidenav--transparent');\n    return classes.join(' ');\n  });\n\n  /** The rail's width, as `lc-sidenav` sets it. @internal */\n  protected readonly railWidth = computed(() => (this.collapsed() ? '56px' : this.width()));\n\n  constructor() {\n    this.router?.events\n      .pipe(\n        filter((event): event is NavigationEnd => event instanceof NavigationEnd),\n        takeUntilDestroyed(),\n      )\n      .subscribe(() => this.routerUrl.set(this.router?.url ?? '/'));\n  }\n\n  /** Whether a group starts expanded. @internal */\n  protected isExpanded(item: NavigationItem): boolean {\n    return this.expanded().has(item.id);\n  }\n\n  /** The label bar's width for the row at `index`. @internal */\n  protected labelWidth(index: number): string {\n    return LABEL_WIDTHS[index % LABEL_WIDTHS.length];\n  }\n}\n","<!-- The docked lc-sidenav's DOM skeleton: same classes and element types, so\n     the shared box rules (sidenav/_sidenav-docked.scss) give the same boxes.\n     <aside>, <nav>, <a> and <button> become <div>s: the host is inert and\n     aria-hidden, so nothing here is a landmark, a link or a tab stop. -->\n<div [class]=\"railClasses()\" [style.width]=\"railWidth()\">\n  @if (showLogo()) {\n    <div class=\"lc-sidenav__logo\" [class]=\"'lc-sidenav__logo--size-' + logoSize()\">\n      <span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__logo\"></span>\n    </div>\n  }\n\n  @if (items().length > 0) {\n    <div class=\"lc-sidenav__nav lc-sidenav__nav--docked\">\n      @for (item of sortedItems(); track item.id; let i = $index) {\n        @if (item.isSection) {\n          <div class=\"lc-sidenav__section\">\n            <div class=\"lc-sidenav__section-header\">\n              <h2 class=\"lc-sidenav__section-title\"><span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__title\"></span></h2>\n            </div>\n            @if (item.children?.length) {\n              <ul class=\"lc-sidenav__section-items\">\n                @for (child of item.children; track child.id; let j = $index) {\n                  <li>\n                    <div class=\"lc-sidenav__nav-item-row\">\n                      <div class=\"lc-sidenav__nav-item\">\n                        @if (child.icon) {\n                          <span class=\"lc-sidenav__nav-icon lc-sidenav-placeholder__shape lc-sidenav-placeholder__icon\"></span>\n                        }\n                        <span class=\"lc-sidenav__nav-label\"><span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__label\" [style.width]=\"labelWidth(j)\"></span></span>\n                      </div>\n                    </div>\n                    @if (child.children?.length && isExpanded(child)) {\n                      <div class=\"lc-sidenav__nav-children\">\n                        @for (grandchild of child.children; track grandchild.id; let k = $index) {\n                          <div class=\"lc-sidenav__nav-item\">\n                            @if (grandchild.icon) {\n                              <span class=\"lc-sidenav__nav-icon lc-sidenav-placeholder__shape lc-sidenav-placeholder__icon\"></span>\n                            }\n                            <span class=\"lc-sidenav__nav-label\"><span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__label\" [style.width]=\"labelWidth(k + 1)\"></span></span>\n                          </div>\n                        }\n                      </div>\n                    }\n                  </li>\n                }\n              </ul>\n            }\n          </div>\n        } @else {\n          <div class=\"lc-sidenav__nav-item-row\">\n            <div class=\"lc-sidenav__nav-item\">\n              <span class=\"lc-sidenav__nav-icon lc-sidenav-placeholder__shape lc-sidenav-placeholder__icon\"></span>\n              <span class=\"lc-sidenav__nav-label\"><span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__label\" [style.width]=\"labelWidth(i)\"></span></span>\n            </div>\n          </div>\n          @if (item.children?.length && isExpanded(item)) {\n            <div class=\"lc-sidenav__nav-children\">\n              @for (child of item.children; track child.id; let j = $index) {\n                <div class=\"lc-sidenav__nav-item\">\n                  <span class=\"lc-sidenav__nav-icon lc-sidenav-placeholder__shape lc-sidenav-placeholder__icon\"></span>\n                  <span class=\"lc-sidenav__nav-label\"><span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__label\" [style.width]=\"labelWidth(j + 1)\"></span></span>\n                </div>\n              }\n            </div>\n          }\n        }\n      }\n    </div>\n  }\n\n  <div class=\"lc-sidenav__content lc-sidenav__content--docked\"></div>\n</div>\n"],"mappings":"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"}
+{"version":3,"file":"lifecorner-angular-ui-kit-sidenav-placeholder.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/sidenav-placeholder/sidenav-placeholder.component.ts","../../../../libs/angular-ui-kit/src/lib/sidenav-placeholder/sidenav-placeholder.component.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, inject, input, signal } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { NavigationEnd, Router } from '@angular/router';\nimport { filter } from 'rxjs';\nimport type { NavigationItem } from '@lifecorner/angular-ui-kit/models';\n// Types only: a value import would load lc-sidenav eagerly (AS-18).\nimport type { SidenavPosition, SidenavVariant } from '@lifecorner/angular-ui-kit/sidenav';\nimport {\n  currentItemParents,\n  currentNavigationItem,\n  navigationLinks,\n  navigationPath,\n  sortNavigationItems,\n} from '@lifecorner/angular-ui-kit/internal/navigation';\n\n/** Label bar widths, cycled per row (design 002 §3). */\nconst LABEL_WIDTHS = ['64%', '48%', '72%', '56%'] as const;\n\n/**\n * Stand-in for a docked `lc-sidenav` while it loads (3.6, AS-18): an inert\n * skeleton of the rail with exactly the sidenav's boxes — the same container,\n * width, logo block, rows, sections and expanded groups, built from the same\n * classes and the same box rules — so swapping it for the sidenav moves\n * nothing (CLS 0). Give it the sidenav's bindings.\n *\n * Use it as the `@placeholder` of a `@defer (on viewport)` block. In the app\n * shell the navigation column is hidden below 1024 px, so on a phone the\n * trigger never fires and the sidenav's JavaScript never loads:\n *\n * @example\n * ```html\n * <div shell-nav>\n *   @defer (on viewport) {\n *     <lc-sidenav mode=\"docked\" [isOpen]=\"true\" width=\"100%\" [mobileBreakpoint]=\"0\"\n *                 variant=\"transparent\" ariaLabel=\"Hauptnavigation\" [items]=\"nav\" [activeRoute]=\"url()\" />\n *   } @placeholder {\n *     <lc-sidenav-placeholder [isOpen]=\"true\" width=\"100%\" variant=\"transparent\" [items]=\"nav\" [activeRoute]=\"url()\" />\n *   }\n * </div>\n * ```\n * Import `SidenavComponent` from `@lifecorner/angular-ui-kit/sidenav` and use\n * it only inside the `@defer` block; any other use of it in the same\n * component makes Angular load it eagerly. With a percentage `width`, give\n * the block a container of definite width (the app shell's column is one):\n * in a shrink-to-fit container the sidenav's width follows its label text.\n *\n * Accessibility: the whole placeholder is `aria-hidden=\"true\"` and `inert` —\n * no landmark, no tab stop, nothing announced, so focus can never be inside\n * it when it is swapped. The navigation landmark, the current item\n * (`aria-current`) and the tab order arrive with `lc-sidenav`. Static, no\n * shimmer. The skeleton shapes are filled with\n * `--lc-sidenav-placeholder-fill`; the `--lc-sidenav-*` hooks apply as on\n * `lc-sidenav` (set them on an ancestor of both).\n */\n@Component({\n  selector: 'lc-sidenav-placeholder',\n  standalone: true,\n  templateUrl: './sidenav-placeholder.component.html',\n  styleUrl: './sidenav-placeholder.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'lc-sidenav-container lc-sidenav-container--docked',\n    '[class.lc-sidenav-container--open]': 'isOpen()',\n    // The theme's values sit on the host, as on lc-sidenav (019).\n    '[class.lc-sidenav-container--light]': \"theme() === 'light'\",\n    '[class.lc-sidenav-container--dark]': \"theme() === 'dark'\",\n    'aria-hidden': 'true',\n    inert: '',\n  },\n})\nexport class SidenavPlaceholderComponent {\n  private readonly router = inject(Router, { optional: true });\n  /** The router's URL, as on `lc-sidenav`; read only when `activeRoute` is empty. */\n  private readonly routerUrl = signal(this.router?.url ?? '/');\n\n  /**\n   * Navigation items, the same value as on `lc-sidenav`: they give the number\n   * of rows, the sections and the groups that start expanded.\n   * @default []\n   */\n  readonly items = input<NavigationItem[]>([]);\n\n  /**\n   * The current route, as on `lc-sidenav`. It decides which group starts\n   * expanded; when empty, the router's URL does (3.5 rules).\n   * @default ''\n   */\n  readonly activeRoute = input('');\n\n  /**\n   * The 56 px icon rail. One-way here (a `model` on `lc-sidenav`).\n   * @default false\n   */\n  readonly collapsed = input(false);\n\n  /**\n   * Whether the docked rail is open; a closed one is 0 px wide, as on `lc-sidenav`.\n   * @default false\n   */\n  readonly isOpen = input(false);\n\n  /**\n   * Width of the rail, as on `lc-sidenav`.\n   * @default '320px'\n   */\n  readonly width = input('320px');\n\n  /**\n   * Surface, as on `lc-sidenav`: `default` (the rail) or `transparent` (the\n   * side navigation on the page, 48 px pills).\n   * @default 'default'\n   */\n  readonly variant = input<SidenavVariant>('default');\n\n  /**\n   * Theme, as on `lc-sidenav`.\n   * @default 'auto'\n   */\n  readonly theme = input<'light' | 'dark' | 'auto'>('auto');\n\n  /**\n   * Position, as on `lc-sidenav`.\n   * @default 'left'\n   */\n  readonly position = input<SidenavPosition>('left');\n\n  /**\n   * Reserves the logo block, as `showLogo` on `lc-sidenav`.\n   * @default false\n   */\n  readonly showLogo = input(false);\n\n  /**\n   * Height of the logo block, as on `lc-sidenav`.\n   * @default 'md'\n   */\n  readonly logoSize = input<'xs' | 'sm' | 'md' | 'lg' | 'xl'>('md');\n\n  /** The items in display order. @internal */\n  protected readonly sortedItems = computed(() => sortNavigationItems(this.items()));\n\n  /** The groups `lc-sidenav` opens on load: the parents of the current item. @internal */\n  private readonly expanded = computed(() => {\n    const active = this.activeRoute();\n    const path = active === '' && this.router ? navigationPath(this.router, this.routerUrl()) : '';\n    const current = currentNavigationItem(navigationLinks(this.sortedItems()), active, path);\n    return new Set(currentItemParents(this.items(), current));\n  });\n\n  /** The rail's classes, in `lc-sidenav`'s order, always docked. @internal */\n  protected readonly railClasses = computed(() => {\n    const classes = ['lc-sidenav', `lc-sidenav--${this.position()}`, 'lc-sidenav--docked'];\n    if (this.isOpen()) classes.push('lc-sidenav--open');\n    if (this.collapsed()) classes.push('lc-sidenav--collapsed');\n    if (this.theme() !== 'auto') classes.push(`lc-sidenav--${this.theme()}`);\n    if (this.variant() === 'transparent') classes.push('lc-sidenav--transparent');\n    return classes.join(' ');\n  });\n\n  /** The rail's width, as `lc-sidenav` sets it. @internal */\n  protected readonly railWidth = computed(() => (this.collapsed() ? '56px' : this.width()));\n\n  constructor() {\n    this.router?.events\n      .pipe(\n        filter((event): event is NavigationEnd => event instanceof NavigationEnd),\n        takeUntilDestroyed(),\n      )\n      .subscribe(() => this.routerUrl.set(this.router?.url ?? '/'));\n  }\n\n  /** Whether a group starts expanded. @internal */\n  protected isExpanded(item: NavigationItem): boolean {\n    return this.expanded().has(item.id);\n  }\n\n  /** The label bar's width for the row at `index`. @internal */\n  protected labelWidth(index: number): string {\n    return LABEL_WIDTHS[index % LABEL_WIDTHS.length];\n  }\n}\n","<!-- The docked lc-sidenav's DOM skeleton: same classes and element types, so\n     the shared box rules (sidenav/_sidenav-docked.scss) give the same boxes.\n     <aside>, <nav>, <a> and <button> become <div>s: the host is inert and\n     aria-hidden, so nothing here is a landmark, a link or a tab stop. -->\n<div [class]=\"railClasses()\" [style.width]=\"railWidth()\">\n  @if (showLogo()) {\n    <div class=\"lc-sidenav__logo\" [class]=\"'lc-sidenav__logo--size-' + logoSize()\">\n      <span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__logo\"></span>\n    </div>\n  }\n\n  @if (items().length > 0) {\n    <div class=\"lc-sidenav__nav lc-sidenav__nav--docked\">\n      @for (item of sortedItems(); track item.id; let i = $index) {\n        @if (item.isSection) {\n          <div class=\"lc-sidenav__section\">\n            <div class=\"lc-sidenav__section-header\">\n              <h2 class=\"lc-sidenav__section-title\"><span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__title\"></span></h2>\n            </div>\n            @if (item.children?.length) {\n              <ul class=\"lc-sidenav__section-items\">\n                @for (child of item.children; track child.id; let j = $index) {\n                  <li>\n                    <div class=\"lc-sidenav__nav-item-row\">\n                      <div class=\"lc-sidenav__nav-item\">\n                        @if (child.icon) {\n                          <span class=\"lc-sidenav__nav-icon lc-sidenav-placeholder__shape lc-sidenav-placeholder__icon\"></span>\n                        }\n                        <span class=\"lc-sidenav__nav-label\"><span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__label\" [style.width]=\"labelWidth(j)\"></span></span>\n                      </div>\n                    </div>\n                    @if (child.children?.length && isExpanded(child)) {\n                      <div class=\"lc-sidenav__nav-children\">\n                        @for (grandchild of child.children; track grandchild.id; let k = $index) {\n                          <div class=\"lc-sidenav__nav-item\">\n                            @if (grandchild.icon) {\n                              <span class=\"lc-sidenav__nav-icon lc-sidenav-placeholder__shape lc-sidenav-placeholder__icon\"></span>\n                            }\n                            <span class=\"lc-sidenav__nav-label\"><span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__label\" [style.width]=\"labelWidth(k + 1)\"></span></span>\n                          </div>\n                        }\n                      </div>\n                    }\n                  </li>\n                }\n              </ul>\n            }\n          </div>\n        } @else {\n          <div class=\"lc-sidenav__nav-item-row\">\n            <div class=\"lc-sidenav__nav-item\">\n              <span class=\"lc-sidenav__nav-icon lc-sidenav-placeholder__shape lc-sidenav-placeholder__icon\"></span>\n              <span class=\"lc-sidenav__nav-label\"><span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__label\" [style.width]=\"labelWidth(i)\"></span></span>\n            </div>\n          </div>\n          @if (item.children?.length && isExpanded(item)) {\n            <div class=\"lc-sidenav__nav-children\">\n              @for (child of item.children; track child.id; let j = $index) {\n                <div class=\"lc-sidenav__nav-item\">\n                  <span class=\"lc-sidenav__nav-icon lc-sidenav-placeholder__shape lc-sidenav-placeholder__icon\"></span>\n                  <span class=\"lc-sidenav__nav-label\"><span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__label\" [style.width]=\"labelWidth(j + 1)\"></span></span>\n                </div>\n              }\n            </div>\n          }\n        }\n      }\n    </div>\n  }\n\n  <div class=\"lc-sidenav__content lc-sidenav__content--docked\"></div>\n</div>\n"],"mappings":";;;;;;AAgBA,MAAM,eAAe;CAAC;CAAO;CAAO;CAAO;AAAK;AAsDhD,IAAa,8BAAb,MAAa,4BAA2B;CACrB,SAAS,OAAO,QAAQ,EAAE,UAAU,KAAI,CAAE;CAE1C,YAAY,OAAO,KAAK,QAAQ,OAAO,KAAI,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAOnD,QAAQ,MAAwB,CAAA,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAOnC,cAAc,MAAM,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAMvB,YAAY,MAAM,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAMxB,SAAS,MAAM,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAMrB,QAAQ,MAAM,SAAQ,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAOtB,UAAU,MAAsB,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAM1C,QAAQ,MAAiC,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAMhD,WAAW,MAAuB,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAMzC,WAAW,MAAM,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAMvB,WAAW,MAAwC,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAG9C,cAAc,eAAe,oBAAoB,KAAK,MAAK,CAAE,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAGjE,WAAW,eAAc;EACxC,MAAM,SAAS,KAAK,YAAW;EAC/B,MAAM,OAAO,WAAW,MAAM,KAAK,SAAS,eAAe,KAAK,QAAQ,KAAK,UAAS,CAAE,IAAI;EAC5F,MAAM,UAAU,sBAAsB,gBAAgB,KAAK,YAAW,CAAE,GAAG,QAAQ,IAAI;EACvF,OAAO,IAAI,IAAI,mBAAmB,KAAK,MAAK,GAAI,OAAO,CAAC;CAC1D,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAGiB,cAAc,eAAc;EAC7C,MAAM,UAAU;GAAC;GAAc,eAAe,KAAK,SAAQ;GAAM;EAAoB;EACrF,IAAI,KAAK,OAAM,GAAI,QAAQ,KAAK,kBAAkB;EAClD,IAAI,KAAK,UAAS,GAAI,QAAQ,KAAK,uBAAuB;EAC1D,IAAI,KAAK,MAAK,MAAO,QAAQ,QAAQ,KAAK,eAAe,KAAK,MAAK,GAAI;EACvE,IAAI,KAAK,QAAO,MAAO,eAAe,QAAQ,KAAK,yBAAyB;EAC5E,OAAO,QAAQ,KAAK,GAAG;CACzB,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAGiB,YAAY,eAAgB,KAAK,UAAS,IAAK,SAAS,KAAK,MAAK,GAAI,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAEzF,cAAA;EACE,KAAK,QAAQ,OACV,KACC,QAAQ,UAAkC,iBAAiB,aAAa,GACxE,mBAAkB,CAAE,CACrB,CACA,gBAAgB,KAAK,UAAU,IAAI,KAAK,QAAQ,OAAO,GAAG,CAAC;CAChE;CAGU,WAAW,MAAoB;EACvC,OAAO,KAAK,SAAQ,CAAE,CAAC,IAAI,KAAK,EAAE;CACpC;CAGU,WAAW,OAAa;EAChC,OAAO,aAAa,QAAQ,aAAa;CAC3C;CA7GW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAA2B,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAA3B,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAA2B,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,aAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA;GAAA,YAAA;IAAA,eAAA;IAAA,SAAA;GAAA;GAAA,YAAA;IAAA,oCAAA;IAAA,qCAAA;IAAA,oCAAA;GAAA;GAAA,gBAAA;EAAA;EAAA,UAAA;EAAA,UCtExC;EAwEA,QAAA,CAAA,uxKAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;ADFa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAA2B,YAAA,CAAA;EAhBvC,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAwB,YACtB;GAAI,iBAGC,wBAAwB;GAAM,MACzC;IACJ,OAAO;IACP,sCAAsC;IAEtC,uCAAuC;IACvC,sCAAsC;IACtC,eAAe;IACf,OAAO;GACR;GAAA,UAAA;GAAA,QAAA,CAAA,uxKAAA;EAAA,CAAA"}

package/fesm2022/lifecorner-angular-ui-kit-sidenav.mjs

@@ -22,6 +22,12 @@ var SidenavComponent = class SidenavComponent {
 	logoDarkEmblemSrc = input("", ...ngDevMode ? [{ debugName: "logoDarkEmblemSrc" }] : /* istanbul ignore next */ []);
 	logoAlt = input("", ...ngDevMode ? [{ debugName: "logoAlt" }] : /* istanbul ignore next */ []);
 	logoSize = input("md", ...ngDevMode ? [{ debugName: "logoSize" }] : /* istanbul ignore next */ []);
+	brandName = input("", ...ngDevMode ? [{ debugName: "brandName" }] : /* istanbul ignore next */ []);
+	brandIcon = input("", ...ngDevMode ? [{ debugName: "brandIcon" }] : /* istanbul ignore next */ []);
+	brandHref = input("", ...ngDevMode ? [{ debugName: "brandHref" }] : /* istanbul ignore next */ []);
+	brandAriaLabel = input("", ...ngDevMode ? [{ debugName: "brandAriaLabel" }] : /* istanbul ignore next */ []);
+	showCollapseToggle = input(false, ...ngDevMode ? [{ debugName: "showCollapseToggle" }] : /* istanbul ignore next */ []);
+	expandAriaLabel = input("Expand navigation", ...ngDevMode ? [{ debugName: "expandAriaLabel" }] : /* istanbul ignore next */ []);
 	isOpen = input(false, ...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
 	mode = input("drawer", ...ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []);
 	mobileBreakpoint = input(768, ...ngDevMode ? [{ debugName: "mobileBreakpoint" }] : /* istanbul ignore next */ []);
@@ -92,9 +98,18 @@ var SidenavComponent = class SidenavComponent {
 		return classes.join(" ");
 	}, ...ngDevMode ? [{ debugName: "sidenavClasses" }] : /* istanbul ignore next */ []);
 	sidenavStyles = computed(() => ({ width: this.isMobile() ? this.width() : this.collapsed() ? "56px" : this.width() }), ...ngDevMode ? [{ debugName: "sidenavStyles" }] : /* istanbul ignore next */ []);
+	brandInitial = computed(() => ([...this.brandName().trim()][0] ?? "").toUpperCase(), ...ngDevMode ? [{ debugName: "brandInitial" }] : /* istanbul ignore next */ []);
+	isRail = computed(() => this.collapsed() && !this.isMobile(), ...ngDevMode ? [{ debugName: "isRail" }] : /* istanbul ignore next */ []);
+	collapseToggleLabel = computed(() => this.collapsed() ? this.expandAriaLabel() : this.collapseAriaLabel() || (this.position() === "right" ? "Collapse navigation to the right" : "Collapse navigation to the left"), ...ngDevMode ? [{ debugName: "collapseToggleLabel" }] : /* istanbul ignore next */ []);
+	collapseToggleIcon = computed(() => {
+		return (this.position() === "right" ? this.collapsed() : !this.collapsed()) ? "chevron-left" : "chevron-right";
+	}, ...ngDevMode ? [{ debugName: "collapseToggleIcon" }] : /* istanbul ignore next */ []);
 	toggleCollapsed() {
 		this.collapsed.set(!this.collapsed());
 	}
+	handleBrandClick() {
+		if (this.isMobile()) this.handleClose();
+	}
 	handleClose() {
 		this.closed.emit();
 	}
@@ -203,6 +218,48 @@ var SidenavComponent = class SidenavComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			brandName: {
+				classPropertyName: "brandName",
+				publicName: "brandName",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			brandIcon: {
+				classPropertyName: "brandIcon",
+				publicName: "brandIcon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			brandHref: {
+				classPropertyName: "brandHref",
+				publicName: "brandHref",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			brandAriaLabel: {
+				classPropertyName: "brandAriaLabel",
+				publicName: "brandAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showCollapseToggle: {
+				classPropertyName: "showCollapseToggle",
+				publicName: "showCollapseToggle",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			expandAriaLabel: {
+				classPropertyName: "expandAriaLabel",
+				publicName: "expandAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			isOpen: {
 				classPropertyName: "isOpen",
 				publicName: "isOpen",
@@ -320,12 +377,14 @@ var SidenavComponent = class SidenavComponent {
 			properties: {
 				"class.lc-sidenav-container": "true",
 				"class.lc-sidenav-container--docked": "effectiveMode() === 'docked'",
-				"class.lc-sidenav-container--open": "isOpen()"
+				"class.lc-sidenav-container--open": "isOpen()",
+				"class.lc-sidenav-container--light": "theme() === 'light'",
+				"class.lc-sidenav-container--dark": "theme() === 'dark'"
 			}
 		},
 		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     The <aside> is a plain complementary region; the navigation landmark is\n     the inner <nav> (nesting a role=\"navigation\" wrapper around a <nav> gave\n     two navigation landmarks). In drawer mode the panel is a modal dialog:\n     focus is captured (close button first, see cdkFocusInitial), trapped\n     while open and restored to the opener when the panel is destroyed. -->\n<ng-template #sidenavPanel>\n  <aside\n    [class]=\"sidenavClasses()\"\n    [ngStyle]=\"sidenavStyles()\"\n    [attr.role]=\"effectiveMode() === 'drawer' ? 'dialog' : null\"\n    [attr.aria-modal]=\"effectiveMode() === 'drawer' ? 'true' : null\"\n    [attr.aria-label]=\"effectiveMode() === 'drawer' ? ariaLabel() : null\"\n    [cdkTrapFocus]=\"effectiveMode() === 'drawer'\"\n    [cdkTrapFocusAutoCapture]=\"effectiveMode() === 'drawer'\">\n\n    <!-- Logo area (sidebar-first layout) -->\n    @if (showLogo()) {\n      <div\n        class=\"lc-sidenav__logo\"\n        [class.lc-sidenav__logo--size-xs]=\"logoSize() === 'xs'\"\n        [class.lc-sidenav__logo--size-sm]=\"logoSize() === 'sm'\"\n        [class.lc-sidenav__logo--size-md]=\"logoSize() === 'md'\"\n        [class.lc-sidenav__logo--size-lg]=\"logoSize() === 'lg'\"\n        [class.lc-sidenav__logo--size-xl]=\"logoSize() === 'xl'\"\n      >\n        <button type=\"button\" class=\"lc-sidenav__logo-link\" [attr.aria-label]=\"toggleAriaLabel()\" (click)=\"toggleCollapsed()\">\n          <lc-logo\n            [variant]=\"collapsed() ? 'emblem' : 'full'\"\n            [size]=\"collapsed() ? 'sm' : logoSize()\"\n            [clickable]=\"false\"\n            [colorMode]=\"theme() === 'dark' ? 'dark' : theme() === 'light' ? 'light' : 'auto'\"\n            [src]=\"logoSrc()\"\n            [emblemSrc]=\"logoEmblemSrc()\"\n            [darkSrc]=\"logoDarkSrc()\"\n            [darkEmblemSrc]=\"logoDarkEmblemSrc()\"\n            [alt]=\"logoAlt() || 'Logo'\"\n          />\n        </button>\n        @if (!collapsed() && effectiveMode() === 'docked') {\n          <button\n            type=\"button\"\n            class=\"lc-sidenav__logo-toggle\"\n            (click)=\"toggleCollapsed()\"\n            [attr.aria-label]=\"collapseAriaLabel() || (position() === 'right' ? 'Collapse navigation to the right' : 'Collapse navigation to the left')\"\n            [attr.title]=\"collapseTitle()\">\n            <lc-icon\n              [name]=\"position() === 'right' ? 'chevron-right' : 'chevron-left'\"\n              size=\"sm\"\n              [decorative]=\"true\" />\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Close button (drawer mode only) -->\n    @if (effectiveMode() === 'drawer') {\n      <button\n        type=\"button\"\n        class=\"lc-sidenav__close\"\n        cdkFocusInitial\n        (click)=\"handleClose()\"\n        [attr.aria-label]=\"closeAriaLabel()\">\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\n        class=\"lc-sidenav__nav\"\n        [class.lc-sidenav__nav--docked]=\"effectiveMode() === 'docked'\"\n        [attr.aria-label]=\"ariaLabel()\">\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                                class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                                (click)=\"handleItemClick(grandchild)\"\n                                [class.lc-sidenav__nav-item--active]=\"isItemActive(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                            class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                            (click)=\"handleItemClick(child)\"\n                            [class.lc-sidenav__nav-item--active]=\"isItemActive(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                    class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                    (click)=\"handleItemClick(child)\"\n                    [class.lc-sidenav__nav-item--active]=\"isItemActive(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                class=\"lc-sidenav__nav-item\"\n                (click)=\"handleItemClick(item)\"\n                [class.lc-sidenav__nav-item--active]=\"isItemActive(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]=\"effectiveMode() === '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}}:host{--lc-sidenav-bg: var(--color-sidebar, var(--color-surface));--lc-sidenav-fg: var(--color-text-secondary);--lc-sidenav-fg-active: var(--color-text-primary);--lc-sidenav-border: var(--color-border);--lc-sidenav-hover-bg: var(--color-surface-hover);--lc-sidenav-section-fg: var(--color-text-tertiary);--lc-sidenav-active-bg: var(--color-surface-selected);--lc-sidenav-active-fg: var(--color-on-surface-selected, var(--color-link));--lc-sidenav-active-icon: var(--color-on-surface-selected, var(--color-link));--lc-sidenav-badge-ring: var(--lc-sidenav-bg);--lc-sidenav-rail-width: 56px;--lc-sidenav-nav-padding-x: .5rem;--lc-sidenav-item-padding-x: .625rem}.lc-sidenav{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:var(--lc-sidenav-rail-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 var(--lc-sidenav-nav-padding-x);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 var(--lc-sidenav-item-padding-x);gap:0;border-radius:var(--border-radius-md, .375rem);position:relative}.lc-sidenav--collapsed .lc-sidenav__nav-item:hover:after,.lc-sidenav--collapsed .lc-sidenav__nav-item:focus-visible:after{content:attr(title);position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:8px;padding:4px 10px;background-color:var(--color-surface-raised);color:var(--color-text-primary);border:1px solid var(--color-border);box-shadow:var(--elevation-2, 0 4px 6px -1px rgba(0, 0, 0, .1));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:4px;right:4px;display:flex;margin-left:0;border-radius:var(--border-radius-full, 9999px);background-color:var(--lc-sidenav-badge-ring);box-shadow:0 0 0 2px var(--lc-sidenav-badge-ring);pointer-events:none}.lc-sidenav--collapsed .lc-sidenav__nav-children{display:none}.lc-sidenav--collapsed .lc-sidenav__section-items{display:flex;flex-direction:column;gap:.125rem}.lc-sidenav--collapsed .lc-sidenav__section{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--color-divider, #e5e7eb)}.lc-sidenav--collapsed .lc-sidenav__content{display:none}.lc-sidenav--collapsed .lc-sidenav__logo{padding:0;justify-content:center}.lc-sidenav__logo{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-3);padding:0 var(--spacing-4);border-bottom:1px solid var(--lc-sidenav-border);min-height:64px;flex-shrink:0}.lc-sidenav__logo--size-xs,.lc-sidenav__logo--size-sm{min-height:56px}.lc-sidenav__logo--size-md{min-height:64px}.lc-sidenav__logo--size-lg{min-height:80px}.lc-sidenav__logo--size-xl{min-height:112px}.lc-sidenav__logo-link{display:flex;align-items:center;flex:0 1 auto;min-width:0;max-width:100%;text-decoration:none;color:var(--lc-sidenav-fg);background:transparent;border:none;padding:0;cursor:pointer}.lc-sidenav__logo-link:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:4px;border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav__logo-toggle{display:inline-flex;align-items:center;justify-content:center;width:1.875rem;height:1.875rem;border:none;border-radius:var(--border-radius-md, .375rem);background:transparent;color:var(--lc-sidenav-fg);opacity:.8;flex-shrink:0;cursor:pointer;transition:background-color .2s ease,color .2s ease,opacity .2s ease}.lc-sidenav__logo-toggle:hover{background-color:var(--lc-sidenav-hover-bg);opacity:1}.lc-sidenav__logo-toggle:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-sidenav__close{position:absolute;top:1rem;right:1rem;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;background:none;border:none;border-radius:var(--border-radius-md, .375rem);color:var(--color-text-secondary);cursor:pointer;transition:background-color .2s ease,color .2s ease;z-index:1}.lc-sidenav__close:hover{background-color:var(--color-surface);color:var(--color-text-primary)}.lc-sidenav__close:focus-visible{outline:2px solid var(--color-primary-500, rgb(59, 130, 246));outline-offset:2px}.lc-sidenav__close:active{background-color:var(--color-border)}.lc-sidenav__close svg{width:1.25rem;height:1.25rem}.lc-sidenav__nav{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1, .25rem));padding:var(--lc-density-padding-md, 1rem) var(--lc-sidenav-nav-padding-x);padding-top:4rem}.lc-sidenav__nav--docked{padding-top:var(--lc-density-padding-md, 1rem);gap:0}.lc-sidenav__section:not(:first-child){margin-top:var(--spacing-4, 1rem);padding-top:var(--spacing-3, .75rem)}.lc-sidenav__section-header{display:flex;align-items:center;justify-content:space-between;padding-right:0;margin-bottom:var(--spacing-1, .25rem)}.lc-sidenav__section-title{padding:0 var(--lc-sidenav-item-padding-x);margin-bottom:0;font-size:var(--font-size-xs, .75rem);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--lc-sidenav-section-fg);line-height:28px}.lc-sidenav__section-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1, .25rem))}.lc-sidenav__nav-item{display:flex;align-items:center;gap:var(--spacing-3, .75rem);min-height:var(--size-min-touch-height, 2.75rem);box-sizing:border-box;padding:var(--lc-density-padding-xs, var(--spacing-2, .5rem)) var(--lc-sidenav-item-padding-x);text-decoration:none;color:var(--lc-sidenav-fg);border-radius:var(--border-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,.lc-sidenav__nav-item[aria-current=page]{background-color:var(--lc-sidenav-active-bg);color:var(--lc-sidenav-active-fg);font-weight:600;box-shadow:inset 2px 0 0 var(--color-primary-500)}.lc-sidenav__nav-item--active .lc-sidenav__nav-icon,.lc-sidenav__nav-item[aria-current=page] .lc-sidenav__nav-icon{color:var(--lc-sidenav-active-icon)}.lc-sidenav__nav-item--active:hover,.lc-sidenav__nav-item[aria-current=page]:hover{background-color:var(--lc-sidenav-active-bg);color:var(--lc-sidenav-active-fg)}.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}:host ::ng-deep .lc-sidenav--collapsed .lc-sidenav__nav-badge .lc-badge{min-width:16px;height:16px;padding:0 3px;font-size:10px;font-weight:600;line-height:1;border:0}.lc-sidenav__nav-item--expanded .lc-sidenav__nav-chevron{transform:rotate(180deg)}.lc-sidenav__nav-item--parent{width:100%;border:none;background:none;font-family:inherit;text-align:left}.lc-sidenav__nav-children{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1, .25rem));padding-left:var(--spacing-4, 1rem)}.lc-sidenav__nav-item--child{font-size:var(--font-size-sm, .875rem)}.lc-sidenav__nav-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lc-sidenav__nav-item-row{display:flex;align-items:center}.lc-sidenav__nav-item-row .lc-sidenav__nav-item{flex:1;min-width:0}.lc-sidenav__nav-item-row .lc-sidenav__action-btn{opacity:0;transition:opacity .15s ease}.lc-sidenav__nav-item-row:hover .lc-sidenav__action-btn{opacity:1}.lc-sidenav__action-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;padding:0;background:transparent;border:none;border-radius:var(--border-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-surface-hover)}@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--light{--lc-sidenav-bg: #ffffff;--lc-sidenav-fg: #374151;--lc-sidenav-fg-active: #111827;--lc-sidenav-border: #e5e7eb;--lc-sidenav-hover-bg: #f3f4f6;--lc-sidenav-section-fg: #6b7280;--lc-sidenav-active-bg: #f0f8fa;--lc-sidenav-active-fg: #144f5b;--lc-sidenav-active-icon: #1a6a79}.lc-sidenav--dark{--lc-sidenav-bg: #070e15;--lc-sidenav-fg: #c4d2d9;--lc-sidenav-fg-active: #f1f6f8;--lc-sidenav-border: rgba(255, 255, 255, .08);--lc-sidenav-hover-bg: rgba(132, 199, 212, .06);--lc-sidenav-section-fg: #93a4ad;--lc-sidenav-active-bg: rgba(32, 132, 151, .12);--lc-sidenav-active-fg: #84c7d4;--lc-sidenav-active-icon: #84c7d4}.lc-sidenav--transparent.lc-sidenav--docked{--lc-sidenav-bg: transparent;--lc-sidenav-badge-ring: var(--color-background);background-color:transparent;border-right:0}.lc-sidenav--transparent .lc-sidenav__nav,.lc-sidenav--transparent .lc-sidenav__nav--docked{gap:var(--spacing-1, .25rem);padding:var(--lc-sidenav-transparent-padding, 3rem 1.5rem 1.5rem)}.lc-sidenav--transparent .lc-sidenav__section-items,.lc-sidenav--transparent .lc-sidenav__nav-children{gap:var(--spacing-1, .25rem)}.lc-sidenav--transparent .lc-sidenav__nav-item{gap:var(--spacing-3, .75rem);min-height:3rem;padding:0 var(--spacing-4, 1rem);border-radius:var(--border-radius-full, 9999px);font-size:var(--font-size-base, 1rem);font-weight:var(--font-weight-medium, 500)}.lc-sidenav--transparent .lc-sidenav__nav-item--active,.lc-sidenav--transparent .lc-sidenav__nav-item[aria-current=page]{box-shadow:none;font-weight:var(--font-weight-semibold, 600)}.lc-sidenav--transparent .lc-sidenav__nav-item--active .lc-sidenav__nav-icon ::ng-deep svg,.lc-sidenav--transparent .lc-sidenav__nav-item[aria-current=page] .lc-sidenav__nav-icon ::ng-deep svg{stroke-width:2.2}.lc-sidenav--transparent .lc-sidenav__section-title{padding:0 var(--spacing-4, 1rem)}@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     The <aside> is a plain complementary region; the navigation landmark is\n     the inner <nav> (nesting a role=\"navigation\" wrapper around a <nav> gave\n     two navigation landmarks). In drawer mode the panel is a modal dialog:\n     focus is captured (close button first, see cdkFocusInitial), trapped\n     while open and restored to the opener when the panel is destroyed. -->\n<ng-template #sidenavPanel>\n  <aside\n    [class]=\"sidenavClasses()\"\n    [ngStyle]=\"sidenavStyles()\"\n    [attr.role]=\"effectiveMode() === 'drawer' ? 'dialog' : null\"\n    [attr.aria-modal]=\"effectiveMode() === 'drawer' ? 'true' : null\"\n    [attr.aria-label]=\"effectiveMode() === 'drawer' ? ariaLabel() : null\"\n    [cdkTrapFocus]=\"effectiveMode() === 'drawer'\"\n    [cdkTrapFocusAutoCapture]=\"effectiveMode() === 'drawer'\">\n\n    <!-- Text brand (019): one link to home, never a toggle. Replaces the image logo. -->\n    @if (brandName()) {\n      <div\n        class=\"lc-sidenav__logo lc-sidenav__logo--brand\"\n        [class.lc-sidenav__logo--size-xs]=\"logoSize() === 'xs'\"\n        [class.lc-sidenav__logo--size-sm]=\"logoSize() === 'sm'\"\n        [class.lc-sidenav__logo--size-md]=\"logoSize() === 'md'\"\n        [class.lc-sidenav__logo--size-lg]=\"logoSize() === 'lg'\"\n        [class.lc-sidenav__logo--size-xl]=\"logoSize() === 'xl'\"\n      >\n        @if (brandHref()) {\n          <!-- Plain link: works without the router and without JavaScript. -->\n          <a\n            [href]=\"brandHref()\"\n            class=\"lc-sidenav__brand\"\n            [attr.aria-label]=\"brandAriaLabel() || null\"\n            [attr.data-tooltip]=\"brandName()\"\n            (click)=\"handleBrandClick()\">\n            <ng-container [ngTemplateOutlet]=\"brandContent\" />\n          </a>\n        } @else {\n          <a\n            routerLink=\"/\"\n            class=\"lc-sidenav__brand\"\n            [attr.aria-label]=\"brandAriaLabel() || null\"\n            [attr.data-tooltip]=\"brandName()\"\n            (click)=\"handleBrandClick()\">\n            <ng-container [ngTemplateOutlet]=\"brandContent\" />\n          </a>\n        }\n      </div>\n    } @else if (showLogo()) {\n      <!-- Logo area (sidebar-first layout) -->\n      <div\n        class=\"lc-sidenav__logo\"\n        [class.lc-sidenav__logo--size-xs]=\"logoSize() === 'xs'\"\n        [class.lc-sidenav__logo--size-sm]=\"logoSize() === 'sm'\"\n        [class.lc-sidenav__logo--size-md]=\"logoSize() === 'md'\"\n        [class.lc-sidenav__logo--size-lg]=\"logoSize() === 'lg'\"\n        [class.lc-sidenav__logo--size-xl]=\"logoSize() === 'xl'\"\n      >\n        <button type=\"button\" class=\"lc-sidenav__logo-link\" [attr.aria-label]=\"toggleAriaLabel()\" (click)=\"toggleCollapsed()\">\n          <lc-logo\n            [variant]=\"collapsed() ? 'emblem' : 'full'\"\n            [size]=\"collapsed() ? 'sm' : logoSize()\"\n            [clickable]=\"false\"\n            [colorMode]=\"theme() === 'dark' ? 'dark' : theme() === 'light' ? 'light' : 'auto'\"\n            [src]=\"logoSrc()\"\n            [emblemSrc]=\"logoEmblemSrc()\"\n            [darkSrc]=\"logoDarkSrc()\"\n            [darkEmblemSrc]=\"logoDarkEmblemSrc()\"\n            [alt]=\"logoAlt() || 'Logo'\"\n          />\n        </button>\n        @if (!collapsed() && effectiveMode() === 'docked') {\n          <button\n            type=\"button\"\n            class=\"lc-sidenav__logo-toggle\"\n            (click)=\"toggleCollapsed()\"\n            [attr.aria-label]=\"collapseAriaLabel() || (position() === 'right' ? 'Collapse navigation to the right' : 'Collapse navigation to the left')\"\n            [attr.title]=\"collapseTitle()\">\n            <lc-icon\n              [name]=\"position() === 'right' ? 'chevron-right' : 'chevron-left'\"\n              size=\"sm\"\n              [decorative]=\"true\" />\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Close button (drawer mode only) -->\n    @if (effectiveMode() === 'drawer') {\n      <button\n        type=\"button\"\n        class=\"lc-sidenav__close\"\n        cdkFocusInitial\n        (click)=\"handleClose()\"\n        [attr.aria-label]=\"closeAriaLabel()\">\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\n        class=\"lc-sidenav__nav\"\n        [class.lc-sidenav__nav--docked]=\"effectiveMode() === 'docked'\"\n        [attr.aria-label]=\"ariaLabel()\">\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                                class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                                (click)=\"handleItemClick(grandchild)\"\n                                [class.lc-sidenav__nav-item--active]=\"isItemActive(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                            class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                            (click)=\"handleItemClick(child)\"\n                            [class.lc-sidenav__nav-item--active]=\"isItemActive(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                    class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                    (click)=\"handleItemClick(child)\"\n                    [class.lc-sidenav__nav-item--active]=\"isItemActive(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                class=\"lc-sidenav__nav-item\"\n                (click)=\"handleItemClick(item)\"\n                [class.lc-sidenav__nav-item--active]=\"isItemActive(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]=\"effectiveMode() === 'docked'\">\n      <ng-content></ng-content>\n    </div>\n\n    <!-- Collapse button at the bottom of the rail (019, docked only): on the icon column in both states. -->\n    @if (showCollapseToggle() && effectiveMode() === 'docked') {\n      <div class=\"lc-sidenav__collapse-row\">\n        <button\n          type=\"button\"\n          class=\"lc-sidenav__collapse-toggle\"\n          (click)=\"toggleCollapsed()\"\n          [attr.aria-label]=\"collapseToggleLabel()\">\n          <lc-icon\n            [name]=\"collapseToggleIcon()\"\n            size=\"sm\"\n            [decorative]=\"true\" />\n        </button>\n      </div>\n    }\n  </aside>\n</ng-template>\n\n<!-- The brand link's content: the tile (decorative) and the name. -->\n<ng-template #brandContent>\n  <span class=\"lc-sidenav__brand-tile\" aria-hidden=\"true\">\n    @if (brandIcon()) {\n      <lc-icon [name]=\"brandIcon()\" size=\"sm\" [decorative]=\"true\" />\n    } @else {\n      {{ brandInitial() }}\n    }\n  </span>\n  <span class=\"lc-sidenav__brand-name\" [class.lc-sidenav__sr-only]=\"isRail()\">{{ brandName() }}</span>\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}}:host{--lc-sidenav-bg: var(--_lc-sidenav-t-bg, var(--color-sidebar, var(--color-surface)));--lc-sidenav-fg: var(--_lc-sidenav-t-fg, var(--color-text-secondary));--lc-sidenav-fg-active: var(--_lc-sidenav-t-fg-active, var(--color-text-primary));--lc-sidenav-border: var(--_lc-sidenav-t-border, var(--color-border));--lc-sidenav-hover-bg: var(--_lc-sidenav-t-hover-bg, var(--color-surface-hover));--lc-sidenav-section-fg: var(--_lc-sidenav-t-section-fg, var(--color-text-tertiary));--lc-sidenav-active-bg: var(--_lc-sidenav-t-active-bg, var(--color-surface-selected));--lc-sidenav-active-fg: var(--_lc-sidenav-t-active-fg, var(--color-on-surface-selected, var(--color-link)));--lc-sidenav-active-icon: var(--_lc-sidenav-t-active-icon, var(--color-on-surface-selected, var(--color-link)));--lc-sidenav-badge-ring: var(--lc-sidenav-bg);--lc-sidenav-rail-width: 56px;--lc-sidenav-nav-padding-x: .5rem;--lc-sidenav-item-padding-x: .625rem}.lc-sidenav{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:var(--lc-sidenav-rail-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 var(--lc-sidenav-nav-padding-x);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 var(--lc-sidenav-item-padding-x);gap:0;border-radius:var(--border-radius-md, .375rem);position:relative}.lc-sidenav--collapsed .lc-sidenav__nav-item:hover:after,.lc-sidenav--collapsed .lc-sidenav__nav-item:focus-visible:after{content:attr(title);position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:8px;padding:4px 10px;background-color:var(--color-surface-raised);color:var(--color-text-primary);border:1px solid var(--color-border);box-shadow:var(--elevation-2, 0 4px 6px -1px rgba(0, 0, 0, .1));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:4px;right:4px;display:flex;margin-left:0;border-radius:var(--border-radius-full, 9999px);background-color:var(--lc-sidenav-badge-ring);box-shadow:0 0 0 2px var(--lc-sidenav-badge-ring);pointer-events:none}.lc-sidenav--collapsed .lc-sidenav__nav-children{display:none}.lc-sidenav--collapsed .lc-sidenav__section-items{display:flex;flex-direction:column;gap:.125rem}.lc-sidenav--collapsed .lc-sidenav__section{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--color-divider, #e5e7eb)}.lc-sidenav--collapsed .lc-sidenav__content{display:none}.lc-sidenav--collapsed .lc-sidenav__logo{padding:0;justify-content:center}.lc-sidenav__logo{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-3);padding:0 var(--spacing-4);border-bottom:1px solid var(--lc-sidenav-border);min-height:64px;flex-shrink:0}.lc-sidenav__logo--size-xs,.lc-sidenav__logo--size-sm{min-height:56px}.lc-sidenav__logo--size-md{min-height:64px}.lc-sidenav__logo--size-lg{min-height:80px}.lc-sidenav__logo--size-xl{min-height:112px}.lc-sidenav__logo-link{display:flex;align-items:center;flex:0 1 auto;min-width:0;max-width:100%;text-decoration:none;color:var(--lc-sidenav-fg);background:transparent;border:none;padding:0;cursor:pointer}.lc-sidenav__logo-link:focus-visible{outline:2px solid var(--_lc-sidenav-t-accent, var(--color-primary-500));outline-offset:4px;border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav__logo-toggle{display:inline-flex;align-items:center;justify-content:center;width:1.875rem;height:1.875rem;border:none;border-radius:var(--border-radius-md, .375rem);background:transparent;color:var(--lc-sidenav-fg);opacity:.8;flex-shrink:0;cursor:pointer;transition:background-color .2s ease,color .2s ease,opacity .2s ease}.lc-sidenav__logo-toggle:hover{background-color:var(--lc-sidenav-hover-bg);opacity:1}.lc-sidenav__logo-toggle:focus-visible{outline:2px solid var(--_lc-sidenav-t-accent, var(--color-primary-500));outline-offset:2px}.lc-sidenav__close{position:absolute;top:1rem;right:1rem;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;background:none;border:none;border-radius:var(--border-radius-md, .375rem);color:var(--color-text-secondary);cursor:pointer;transition:background-color .2s ease,color .2s ease;z-index:1}.lc-sidenav__close:hover{background-color:var(--color-surface);color:var(--color-text-primary)}.lc-sidenav__close:focus-visible{outline:2px solid var(--_lc-sidenav-t-accent, var(--color-primary-500, rgb(59, 130, 246)));outline-offset:2px}.lc-sidenav__close:active{background-color:var(--color-border)}.lc-sidenav__close svg{width:1.25rem;height:1.25rem}.lc-sidenav__nav{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1, .25rem));padding:var(--lc-density-padding-md, 1rem) var(--lc-sidenav-nav-padding-x);padding-top:4rem}.lc-sidenav__nav--docked{padding-top:var(--lc-density-padding-md, 1rem);gap:0}.lc-sidenav__section:not(:first-child){margin-top:var(--spacing-4, 1rem);padding-top:var(--spacing-3, .75rem)}.lc-sidenav__section-header{display:flex;align-items:center;justify-content:space-between;padding-right:0;margin-bottom:var(--spacing-1, .25rem)}.lc-sidenav__section-title{padding:0 var(--lc-sidenav-item-padding-x);margin-bottom:0;font-size:var(--font-size-xs, .75rem);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--lc-sidenav-section-fg);line-height:28px}.lc-sidenav__section-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1, .25rem))}.lc-sidenav__nav-item{display:flex;align-items:center;gap:var(--spacing-3, .75rem);min-height:var(--size-min-touch-height, 2.75rem);box-sizing:border-box;padding:var(--lc-density-padding-xs, var(--spacing-2, .5rem)) var(--lc-sidenav-item-padding-x);text-decoration:none;color:var(--lc-sidenav-fg);border-radius:var(--border-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(--_lc-sidenav-t-accent, var(--color-primary-500));outline-offset:2px}.lc-sidenav__nav-item--active,.lc-sidenav__nav-item[aria-current=page]{background-color:var(--lc-sidenav-active-bg);color:var(--lc-sidenav-active-fg);font-weight:600;box-shadow:inset 2px 0 0 var(--lc-sidenav-active-indicator, var(--_lc-sidenav-t-accent, var(--color-primary-500)))}.lc-sidenav__nav-item--active .lc-sidenav__nav-icon,.lc-sidenav__nav-item[aria-current=page] .lc-sidenav__nav-icon{color:var(--lc-sidenav-active-icon)}.lc-sidenav__nav-item--active:hover,.lc-sidenav__nav-item[aria-current=page]:hover{background-color:var(--lc-sidenav-active-bg);color:var(--lc-sidenav-active-fg)}.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}:host ::ng-deep .lc-sidenav--collapsed .lc-sidenav__nav-badge .lc-badge{min-width:16px;height:16px;padding:0 3px;font-size:10px;font-weight:600;line-height:1;border:0}.lc-sidenav__nav-item--expanded .lc-sidenav__nav-chevron{transform:rotate(180deg)}.lc-sidenav__nav-item--parent{width:100%;border:none;background:none;font-family:inherit;text-align:left}.lc-sidenav__nav-children{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1, .25rem));padding-left:var(--spacing-4, 1rem)}.lc-sidenav__nav-item--child{font-size:var(--font-size-sm, .875rem)}.lc-sidenav__nav-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lc-sidenav__nav-item-row{display:flex;align-items:center}.lc-sidenav__nav-item-row .lc-sidenav__nav-item{flex:1;min-width:0}.lc-sidenav__nav-item-row .lc-sidenav__action-btn{opacity:0;transition:opacity .15s ease}.lc-sidenav__nav-item-row:hover .lc-sidenav__action-btn{opacity:1}.lc-sidenav__action-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;padding:0;background:transparent;border:none;border-radius:var(--border-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(--_lc-sidenav-t-accent, 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-surface-hover)}@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(--_lc-sidenav-t-accent, var(--color-primary-500, rgb(59, 130, 246)));outline-offset:2px;border-radius:var(--border-radius-sm, .25rem)}:host(.lc-sidenav-container--light){--_lc-sidenav-t-bg: #ffffff;--_lc-sidenav-t-fg: #374151;--_lc-sidenav-t-fg-active: #111827;--_lc-sidenav-t-border: #e5e7eb;--_lc-sidenav-t-hover-bg: #f3f4f6;--_lc-sidenav-t-section-fg: #6b7280;--_lc-sidenav-t-active-bg: #f0f8fa;--_lc-sidenav-t-active-fg: #144f5b;--_lc-sidenav-t-active-icon: #1a6a79;--_lc-sidenav-t-accent: #208497}:host(.lc-sidenav-container--dark){--_lc-sidenav-t-bg: #070e15;--_lc-sidenav-t-fg: #c4d2d9;--_lc-sidenav-t-fg-active: #f1f6f8;--_lc-sidenav-t-border: rgba(255, 255, 255, .08);--_lc-sidenav-t-hover-bg: rgba(132, 199, 212, .06);--_lc-sidenav-t-section-fg: #93a4ad;--_lc-sidenav-t-active-bg: rgba(32, 132, 151, .12);--_lc-sidenav-t-active-fg: #84c7d4;--_lc-sidenav-t-active-icon: #84c7d4}.lc-sidenav--transparent.lc-sidenav--docked{--lc-sidenav-bg: transparent;--lc-sidenav-badge-ring: var(--color-background);background-color:transparent;border-right:0}.lc-sidenav--transparent .lc-sidenav__nav,.lc-sidenav--transparent .lc-sidenav__nav--docked{gap:var(--spacing-1, .25rem);padding:var(--lc-sidenav-transparent-padding, 3rem 1.5rem 1.5rem)}.lc-sidenav--transparent .lc-sidenav__section-items,.lc-sidenav--transparent .lc-sidenav__nav-children{gap:var(--spacing-1, .25rem)}.lc-sidenav--transparent .lc-sidenav__nav-item{gap:var(--spacing-3, .75rem);min-height:3rem;padding:0 var(--spacing-4, 1rem);border-radius:var(--border-radius-full, 9999px);font-size:var(--font-size-base, 1rem);font-weight:var(--font-weight-medium, 500)}.lc-sidenav--transparent .lc-sidenav__nav-item--active,.lc-sidenav--transparent .lc-sidenav__nav-item[aria-current=page]{box-shadow:none;font-weight:var(--font-weight-semibold, 600)}.lc-sidenav--transparent .lc-sidenav__nav-item--active .lc-sidenav__nav-icon ::ng-deep svg,.lc-sidenav--transparent .lc-sidenav__nav-item[aria-current=page] .lc-sidenav__nav-icon ::ng-deep svg{stroke-width:2.2}.lc-sidenav--transparent .lc-sidenav__section-title{padding:0 var(--spacing-4, 1rem)}.lc-sidenav__logo--brand{gap:var(--spacing-1, .25rem);padding-inline:var(--spacing-2, .5rem)}.lc-sidenav__brand{display:flex;align-items:center;gap:var(--spacing-3, .75rem);flex:1 1 auto;min-width:0;min-height:var(--size-min-touch-height, 2.75rem);box-sizing:border-box;padding:var(--spacing-1-5, .375rem) var(--spacing-2, .5rem) var(--spacing-1-5, .375rem) var(--spacing-1, .25rem);border-radius:var(--border-radius-md, .75rem);color:var(--lc-sidenav-fg-active);text-decoration:none;transition:background-color .2s ease}.lc-sidenav__brand:hover{background-color:var(--lc-sidenav-hover-bg)}.lc-sidenav__brand:focus-visible{outline:2px solid var(--_lc-sidenav-t-accent, var(--color-primary-500));outline-offset:2px}.lc-sidenav__brand-tile{display:grid;place-items:center;flex:none;width:32px;height:32px;box-sizing:border-box;border-radius:var(--border-radius-sm, .625rem);background-color:var(--lc-sidenav-brand-tile-bg, var(--color-primary-fill));color:var(--lc-sidenav-brand-tile-fg, var(--color-on-primary));font-size:var(--font-size-base, 1rem);font-weight:var(--font-weight-bold, 700);line-height:1}.lc-sidenav__brand-name{min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:break-word;hyphens:auto;font-size:var(--font-size-base, 1rem);font-weight:var(--font-weight-semibold, 600);line-height:var(--line-height-tight, 1.25)}.lc-sidenav__collapse-row{display:flex;flex-shrink:0;margin-top:auto;border-top:1px solid var(--lc-sidenav-border);padding:var(--spacing-2, .5rem) calc(var(--lc-sidenav-nav-padding-x) - 2px)}.lc-sidenav__collapse-toggle{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--size-min-touch-width, 2.75rem);height:var(--size-min-touch-height, 2.75rem);padding:0;border:none;border-radius:var(--border-radius-md, .75rem);background:transparent;color:var(--lc-sidenav-fg);cursor:pointer;transition:background-color .2s ease,color .2s ease}.lc-sidenav__collapse-toggle:hover{background-color:var(--lc-sidenav-hover-bg)}.lc-sidenav__collapse-toggle:focus-visible{outline:2px solid var(--_lc-sidenav-t-accent, var(--color-primary-500));outline-offset:2px}.lc-sidenav--transparent .lc-sidenav__logo--brand{padding-inline:var(--spacing-6, 1.5rem) var(--spacing-4, 1rem)}.lc-sidenav--transparent .lc-sidenav__brand{padding:var(--spacing-1-5, .375rem) var(--spacing-2, .5rem) var(--spacing-1-5, .375rem) var(--spacing-2-5, .625rem)}.lc-sidenav--transparent .lc-sidenav__collapse-row{padding:var(--spacing-2, .5rem) var(--spacing-7, 1.75rem)}.lc-sidenav--collapsed .lc-sidenav__logo--brand{padding:0}.lc-sidenav--collapsed .lc-sidenav__brand{position:relative;flex:none;padding:var(--spacing-1-5, .375rem)}.lc-sidenav--collapsed .lc-sidenav__brand:hover:after,.lc-sidenav--collapsed .lc-sidenav__brand:focus-visible:after{content:attr(data-tooltip);position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:8px;padding:4px 10px;background-color:var(--color-surface-raised);color:var(--color-text-primary);border:1px solid var(--color-border);box-shadow:var(--elevation-2, 0 4px 6px -1px rgba(0, 0, 0, .1));font-size:.75rem;white-space:nowrap;border-radius:4px;z-index:1002;pointer-events:none}.lc-sidenav--collapsed .lc-sidenav__collapse-row{padding:var(--spacing-2, .5rem) 0;justify-content:center}.lc-sidenav--drawer .lc-sidenav__logo--brand{padding-inline-end:58px}.lc-sidenav--drawer .lc-sidenav__logo--brand~.lc-sidenav__close{top:10px;right:10px;width:var(--size-min-touch-width, 2.75rem);height:var(--size-min-touch-height, 2.75rem)}.lc-sidenav--drawer .lc-sidenav__logo--brand~.lc-sidenav__nav{padding-top:var(--spacing-4, 1rem)}.lc-sidenav__sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(forced-colors:active){.lc-sidenav__brand-tile{border:1px solid CanvasText;color:CanvasText}.lc-sidenav__nav-item--active:not(:focus-visible),.lc-sidenav__nav-item[aria-current=page]:not(:focus-visible){outline:1px solid Highlight}}@media print{.lc-sidenav-container,.lc-sidenav__overlay,.lc-sidenav{display:none}}\n"],
 		dependencies: [
 			{
 				kind: "directive",
@@ -456,10 +515,12 @@ i0.ɵɵngDeclareClassMetadata({
 			host: {
 				"[class.lc-sidenav-container]": "true",
 				"[class.lc-sidenav-container--docked]": "effectiveMode() === 'docked'",
-				"[class.lc-sidenav-container--open]": "isOpen()"
+				"[class.lc-sidenav-container--open]": "isOpen()",
+				"[class.lc-sidenav-container--light]": "theme() === 'light'",
+				"[class.lc-sidenav-container--dark]": "theme() === 'dark'"
 			},
-			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     The <aside> is a plain complementary region; the navigation landmark is\n     the inner <nav> (nesting a role=\"navigation\" wrapper around a <nav> gave\n     two navigation landmarks). In drawer mode the panel is a modal dialog:\n     focus is captured (close button first, see cdkFocusInitial), trapped\n     while open and restored to the opener when the panel is destroyed. -->\n<ng-template #sidenavPanel>\n  <aside\n    [class]=\"sidenavClasses()\"\n    [ngStyle]=\"sidenavStyles()\"\n    [attr.role]=\"effectiveMode() === 'drawer' ? 'dialog' : null\"\n    [attr.aria-modal]=\"effectiveMode() === 'drawer' ? 'true' : null\"\n    [attr.aria-label]=\"effectiveMode() === 'drawer' ? ariaLabel() : null\"\n    [cdkTrapFocus]=\"effectiveMode() === 'drawer'\"\n    [cdkTrapFocusAutoCapture]=\"effectiveMode() === 'drawer'\">\n\n    <!-- Logo area (sidebar-first layout) -->\n    @if (showLogo()) {\n      <div\n        class=\"lc-sidenav__logo\"\n        [class.lc-sidenav__logo--size-xs]=\"logoSize() === 'xs'\"\n        [class.lc-sidenav__logo--size-sm]=\"logoSize() === 'sm'\"\n        [class.lc-sidenav__logo--size-md]=\"logoSize() === 'md'\"\n        [class.lc-sidenav__logo--size-lg]=\"logoSize() === 'lg'\"\n        [class.lc-sidenav__logo--size-xl]=\"logoSize() === 'xl'\"\n      >\n        <button type=\"button\" class=\"lc-sidenav__logo-link\" [attr.aria-label]=\"toggleAriaLabel()\" (click)=\"toggleCollapsed()\">\n          <lc-logo\n            [variant]=\"collapsed() ? 'emblem' : 'full'\"\n            [size]=\"collapsed() ? 'sm' : logoSize()\"\n            [clickable]=\"false\"\n            [colorMode]=\"theme() === 'dark' ? 'dark' : theme() === 'light' ? 'light' : 'auto'\"\n            [src]=\"logoSrc()\"\n            [emblemSrc]=\"logoEmblemSrc()\"\n            [darkSrc]=\"logoDarkSrc()\"\n            [darkEmblemSrc]=\"logoDarkEmblemSrc()\"\n            [alt]=\"logoAlt() || 'Logo'\"\n          />\n        </button>\n        @if (!collapsed() && effectiveMode() === 'docked') {\n          <button\n            type=\"button\"\n            class=\"lc-sidenav__logo-toggle\"\n            (click)=\"toggleCollapsed()\"\n            [attr.aria-label]=\"collapseAriaLabel() || (position() === 'right' ? 'Collapse navigation to the right' : 'Collapse navigation to the left')\"\n            [attr.title]=\"collapseTitle()\">\n            <lc-icon\n              [name]=\"position() === 'right' ? 'chevron-right' : 'chevron-left'\"\n              size=\"sm\"\n              [decorative]=\"true\" />\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Close button (drawer mode only) -->\n    @if (effectiveMode() === 'drawer') {\n      <button\n        type=\"button\"\n        class=\"lc-sidenav__close\"\n        cdkFocusInitial\n        (click)=\"handleClose()\"\n        [attr.aria-label]=\"closeAriaLabel()\">\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\n        class=\"lc-sidenav__nav\"\n        [class.lc-sidenav__nav--docked]=\"effectiveMode() === 'docked'\"\n        [attr.aria-label]=\"ariaLabel()\">\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                                class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                                (click)=\"handleItemClick(grandchild)\"\n                                [class.lc-sidenav__nav-item--active]=\"isItemActive(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                            class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                            (click)=\"handleItemClick(child)\"\n                            [class.lc-sidenav__nav-item--active]=\"isItemActive(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                    class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                    (click)=\"handleItemClick(child)\"\n                    [class.lc-sidenav__nav-item--active]=\"isItemActive(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                class=\"lc-sidenav__nav-item\"\n                (click)=\"handleItemClick(item)\"\n                [class.lc-sidenav__nav-item--active]=\"isItemActive(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]=\"effectiveMode() === '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}}:host{--lc-sidenav-bg: var(--color-sidebar, var(--color-surface));--lc-sidenav-fg: var(--color-text-secondary);--lc-sidenav-fg-active: var(--color-text-primary);--lc-sidenav-border: var(--color-border);--lc-sidenav-hover-bg: var(--color-surface-hover);--lc-sidenav-section-fg: var(--color-text-tertiary);--lc-sidenav-active-bg: var(--color-surface-selected);--lc-sidenav-active-fg: var(--color-on-surface-selected, var(--color-link));--lc-sidenav-active-icon: var(--color-on-surface-selected, var(--color-link));--lc-sidenav-badge-ring: var(--lc-sidenav-bg);--lc-sidenav-rail-width: 56px;--lc-sidenav-nav-padding-x: .5rem;--lc-sidenav-item-padding-x: .625rem}.lc-sidenav{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:var(--lc-sidenav-rail-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 var(--lc-sidenav-nav-padding-x);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 var(--lc-sidenav-item-padding-x);gap:0;border-radius:var(--border-radius-md, .375rem);position:relative}.lc-sidenav--collapsed .lc-sidenav__nav-item:hover:after,.lc-sidenav--collapsed .lc-sidenav__nav-item:focus-visible:after{content:attr(title);position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:8px;padding:4px 10px;background-color:var(--color-surface-raised);color:var(--color-text-primary);border:1px solid var(--color-border);box-shadow:var(--elevation-2, 0 4px 6px -1px rgba(0, 0, 0, .1));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:4px;right:4px;display:flex;margin-left:0;border-radius:var(--border-radius-full, 9999px);background-color:var(--lc-sidenav-badge-ring);box-shadow:0 0 0 2px var(--lc-sidenav-badge-ring);pointer-events:none}.lc-sidenav--collapsed .lc-sidenav__nav-children{display:none}.lc-sidenav--collapsed .lc-sidenav__section-items{display:flex;flex-direction:column;gap:.125rem}.lc-sidenav--collapsed .lc-sidenav__section{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--color-divider, #e5e7eb)}.lc-sidenav--collapsed .lc-sidenav__content{display:none}.lc-sidenav--collapsed .lc-sidenav__logo{padding:0;justify-content:center}.lc-sidenav__logo{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-3);padding:0 var(--spacing-4);border-bottom:1px solid var(--lc-sidenav-border);min-height:64px;flex-shrink:0}.lc-sidenav__logo--size-xs,.lc-sidenav__logo--size-sm{min-height:56px}.lc-sidenav__logo--size-md{min-height:64px}.lc-sidenav__logo--size-lg{min-height:80px}.lc-sidenav__logo--size-xl{min-height:112px}.lc-sidenav__logo-link{display:flex;align-items:center;flex:0 1 auto;min-width:0;max-width:100%;text-decoration:none;color:var(--lc-sidenav-fg);background:transparent;border:none;padding:0;cursor:pointer}.lc-sidenav__logo-link:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:4px;border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav__logo-toggle{display:inline-flex;align-items:center;justify-content:center;width:1.875rem;height:1.875rem;border:none;border-radius:var(--border-radius-md, .375rem);background:transparent;color:var(--lc-sidenav-fg);opacity:.8;flex-shrink:0;cursor:pointer;transition:background-color .2s ease,color .2s ease,opacity .2s ease}.lc-sidenav__logo-toggle:hover{background-color:var(--lc-sidenav-hover-bg);opacity:1}.lc-sidenav__logo-toggle:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-sidenav__close{position:absolute;top:1rem;right:1rem;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;background:none;border:none;border-radius:var(--border-radius-md, .375rem);color:var(--color-text-secondary);cursor:pointer;transition:background-color .2s ease,color .2s ease;z-index:1}.lc-sidenav__close:hover{background-color:var(--color-surface);color:var(--color-text-primary)}.lc-sidenav__close:focus-visible{outline:2px solid var(--color-primary-500, rgb(59, 130, 246));outline-offset:2px}.lc-sidenav__close:active{background-color:var(--color-border)}.lc-sidenav__close svg{width:1.25rem;height:1.25rem}.lc-sidenav__nav{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1, .25rem));padding:var(--lc-density-padding-md, 1rem) var(--lc-sidenav-nav-padding-x);padding-top:4rem}.lc-sidenav__nav--docked{padding-top:var(--lc-density-padding-md, 1rem);gap:0}.lc-sidenav__section:not(:first-child){margin-top:var(--spacing-4, 1rem);padding-top:var(--spacing-3, .75rem)}.lc-sidenav__section-header{display:flex;align-items:center;justify-content:space-between;padding-right:0;margin-bottom:var(--spacing-1, .25rem)}.lc-sidenav__section-title{padding:0 var(--lc-sidenav-item-padding-x);margin-bottom:0;font-size:var(--font-size-xs, .75rem);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--lc-sidenav-section-fg);line-height:28px}.lc-sidenav__section-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1, .25rem))}.lc-sidenav__nav-item{display:flex;align-items:center;gap:var(--spacing-3, .75rem);min-height:var(--size-min-touch-height, 2.75rem);box-sizing:border-box;padding:var(--lc-density-padding-xs, var(--spacing-2, .5rem)) var(--lc-sidenav-item-padding-x);text-decoration:none;color:var(--lc-sidenav-fg);border-radius:var(--border-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,.lc-sidenav__nav-item[aria-current=page]{background-color:var(--lc-sidenav-active-bg);color:var(--lc-sidenav-active-fg);font-weight:600;box-shadow:inset 2px 0 0 var(--color-primary-500)}.lc-sidenav__nav-item--active .lc-sidenav__nav-icon,.lc-sidenav__nav-item[aria-current=page] .lc-sidenav__nav-icon{color:var(--lc-sidenav-active-icon)}.lc-sidenav__nav-item--active:hover,.lc-sidenav__nav-item[aria-current=page]:hover{background-color:var(--lc-sidenav-active-bg);color:var(--lc-sidenav-active-fg)}.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}:host ::ng-deep .lc-sidenav--collapsed .lc-sidenav__nav-badge .lc-badge{min-width:16px;height:16px;padding:0 3px;font-size:10px;font-weight:600;line-height:1;border:0}.lc-sidenav__nav-item--expanded .lc-sidenav__nav-chevron{transform:rotate(180deg)}.lc-sidenav__nav-item--parent{width:100%;border:none;background:none;font-family:inherit;text-align:left}.lc-sidenav__nav-children{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1, .25rem));padding-left:var(--spacing-4, 1rem)}.lc-sidenav__nav-item--child{font-size:var(--font-size-sm, .875rem)}.lc-sidenav__nav-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lc-sidenav__nav-item-row{display:flex;align-items:center}.lc-sidenav__nav-item-row .lc-sidenav__nav-item{flex:1;min-width:0}.lc-sidenav__nav-item-row .lc-sidenav__action-btn{opacity:0;transition:opacity .15s ease}.lc-sidenav__nav-item-row:hover .lc-sidenav__action-btn{opacity:1}.lc-sidenav__action-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;padding:0;background:transparent;border:none;border-radius:var(--border-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-surface-hover)}@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--light{--lc-sidenav-bg: #ffffff;--lc-sidenav-fg: #374151;--lc-sidenav-fg-active: #111827;--lc-sidenav-border: #e5e7eb;--lc-sidenav-hover-bg: #f3f4f6;--lc-sidenav-section-fg: #6b7280;--lc-sidenav-active-bg: #f0f8fa;--lc-sidenav-active-fg: #144f5b;--lc-sidenav-active-icon: #1a6a79}.lc-sidenav--dark{--lc-sidenav-bg: #070e15;--lc-sidenav-fg: #c4d2d9;--lc-sidenav-fg-active: #f1f6f8;--lc-sidenav-border: rgba(255, 255, 255, .08);--lc-sidenav-hover-bg: rgba(132, 199, 212, .06);--lc-sidenav-section-fg: #93a4ad;--lc-sidenav-active-bg: rgba(32, 132, 151, .12);--lc-sidenav-active-fg: #84c7d4;--lc-sidenav-active-icon: #84c7d4}.lc-sidenav--transparent.lc-sidenav--docked{--lc-sidenav-bg: transparent;--lc-sidenav-badge-ring: var(--color-background);background-color:transparent;border-right:0}.lc-sidenav--transparent .lc-sidenav__nav,.lc-sidenav--transparent .lc-sidenav__nav--docked{gap:var(--spacing-1, .25rem);padding:var(--lc-sidenav-transparent-padding, 3rem 1.5rem 1.5rem)}.lc-sidenav--transparent .lc-sidenav__section-items,.lc-sidenav--transparent .lc-sidenav__nav-children{gap:var(--spacing-1, .25rem)}.lc-sidenav--transparent .lc-sidenav__nav-item{gap:var(--spacing-3, .75rem);min-height:3rem;padding:0 var(--spacing-4, 1rem);border-radius:var(--border-radius-full, 9999px);font-size:var(--font-size-base, 1rem);font-weight:var(--font-weight-medium, 500)}.lc-sidenav--transparent .lc-sidenav__nav-item--active,.lc-sidenav--transparent .lc-sidenav__nav-item[aria-current=page]{box-shadow:none;font-weight:var(--font-weight-semibold, 600)}.lc-sidenav--transparent .lc-sidenav__nav-item--active .lc-sidenav__nav-icon ::ng-deep svg,.lc-sidenav--transparent .lc-sidenav__nav-item[aria-current=page] .lc-sidenav__nav-icon ::ng-deep svg{stroke-width:2.2}.lc-sidenav--transparent .lc-sidenav__section-title{padding:0 var(--spacing-4, 1rem)}@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     The <aside> is a plain complementary region; the navigation landmark is\n     the inner <nav> (nesting a role=\"navigation\" wrapper around a <nav> gave\n     two navigation landmarks). In drawer mode the panel is a modal dialog:\n     focus is captured (close button first, see cdkFocusInitial), trapped\n     while open and restored to the opener when the panel is destroyed. -->\n<ng-template #sidenavPanel>\n  <aside\n    [class]=\"sidenavClasses()\"\n    [ngStyle]=\"sidenavStyles()\"\n    [attr.role]=\"effectiveMode() === 'drawer' ? 'dialog' : null\"\n    [attr.aria-modal]=\"effectiveMode() === 'drawer' ? 'true' : null\"\n    [attr.aria-label]=\"effectiveMode() === 'drawer' ? ariaLabel() : null\"\n    [cdkTrapFocus]=\"effectiveMode() === 'drawer'\"\n    [cdkTrapFocusAutoCapture]=\"effectiveMode() === 'drawer'\">\n\n    <!-- Text brand (019): one link to home, never a toggle. Replaces the image logo. -->\n    @if (brandName()) {\n      <div\n        class=\"lc-sidenav__logo lc-sidenav__logo--brand\"\n        [class.lc-sidenav__logo--size-xs]=\"logoSize() === 'xs'\"\n        [class.lc-sidenav__logo--size-sm]=\"logoSize() === 'sm'\"\n        [class.lc-sidenav__logo--size-md]=\"logoSize() === 'md'\"\n        [class.lc-sidenav__logo--size-lg]=\"logoSize() === 'lg'\"\n        [class.lc-sidenav__logo--size-xl]=\"logoSize() === 'xl'\"\n      >\n        @if (brandHref()) {\n          <!-- Plain link: works without the router and without JavaScript. -->\n          <a\n            [href]=\"brandHref()\"\n            class=\"lc-sidenav__brand\"\n            [attr.aria-label]=\"brandAriaLabel() || null\"\n            [attr.data-tooltip]=\"brandName()\"\n            (click)=\"handleBrandClick()\">\n            <ng-container [ngTemplateOutlet]=\"brandContent\" />\n          </a>\n        } @else {\n          <a\n            routerLink=\"/\"\n            class=\"lc-sidenav__brand\"\n            [attr.aria-label]=\"brandAriaLabel() || null\"\n            [attr.data-tooltip]=\"brandName()\"\n            (click)=\"handleBrandClick()\">\n            <ng-container [ngTemplateOutlet]=\"brandContent\" />\n          </a>\n        }\n      </div>\n    } @else if (showLogo()) {\n      <!-- Logo area (sidebar-first layout) -->\n      <div\n        class=\"lc-sidenav__logo\"\n        [class.lc-sidenav__logo--size-xs]=\"logoSize() === 'xs'\"\n        [class.lc-sidenav__logo--size-sm]=\"logoSize() === 'sm'\"\n        [class.lc-sidenav__logo--size-md]=\"logoSize() === 'md'\"\n        [class.lc-sidenav__logo--size-lg]=\"logoSize() === 'lg'\"\n        [class.lc-sidenav__logo--size-xl]=\"logoSize() === 'xl'\"\n      >\n        <button type=\"button\" class=\"lc-sidenav__logo-link\" [attr.aria-label]=\"toggleAriaLabel()\" (click)=\"toggleCollapsed()\">\n          <lc-logo\n            [variant]=\"collapsed() ? 'emblem' : 'full'\"\n            [size]=\"collapsed() ? 'sm' : logoSize()\"\n            [clickable]=\"false\"\n            [colorMode]=\"theme() === 'dark' ? 'dark' : theme() === 'light' ? 'light' : 'auto'\"\n            [src]=\"logoSrc()\"\n            [emblemSrc]=\"logoEmblemSrc()\"\n            [darkSrc]=\"logoDarkSrc()\"\n            [darkEmblemSrc]=\"logoDarkEmblemSrc()\"\n            [alt]=\"logoAlt() || 'Logo'\"\n          />\n        </button>\n        @if (!collapsed() && effectiveMode() === 'docked') {\n          <button\n            type=\"button\"\n            class=\"lc-sidenav__logo-toggle\"\n            (click)=\"toggleCollapsed()\"\n            [attr.aria-label]=\"collapseAriaLabel() || (position() === 'right' ? 'Collapse navigation to the right' : 'Collapse navigation to the left')\"\n            [attr.title]=\"collapseTitle()\">\n            <lc-icon\n              [name]=\"position() === 'right' ? 'chevron-right' : 'chevron-left'\"\n              size=\"sm\"\n              [decorative]=\"true\" />\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Close button (drawer mode only) -->\n    @if (effectiveMode() === 'drawer') {\n      <button\n        type=\"button\"\n        class=\"lc-sidenav__close\"\n        cdkFocusInitial\n        (click)=\"handleClose()\"\n        [attr.aria-label]=\"closeAriaLabel()\">\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\n        class=\"lc-sidenav__nav\"\n        [class.lc-sidenav__nav--docked]=\"effectiveMode() === 'docked'\"\n        [attr.aria-label]=\"ariaLabel()\">\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                                class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                                (click)=\"handleItemClick(grandchild)\"\n                                [class.lc-sidenav__nav-item--active]=\"isItemActive(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                            class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                            (click)=\"handleItemClick(child)\"\n                            [class.lc-sidenav__nav-item--active]=\"isItemActive(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                    class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                    (click)=\"handleItemClick(child)\"\n                    [class.lc-sidenav__nav-item--active]=\"isItemActive(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                class=\"lc-sidenav__nav-item\"\n                (click)=\"handleItemClick(item)\"\n                [class.lc-sidenav__nav-item--active]=\"isItemActive(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]=\"effectiveMode() === 'docked'\">\n      <ng-content></ng-content>\n    </div>\n\n    <!-- Collapse button at the bottom of the rail (019, docked only): on the icon column in both states. -->\n    @if (showCollapseToggle() && effectiveMode() === 'docked') {\n      <div class=\"lc-sidenav__collapse-row\">\n        <button\n          type=\"button\"\n          class=\"lc-sidenav__collapse-toggle\"\n          (click)=\"toggleCollapsed()\"\n          [attr.aria-label]=\"collapseToggleLabel()\">\n          <lc-icon\n            [name]=\"collapseToggleIcon()\"\n            size=\"sm\"\n            [decorative]=\"true\" />\n        </button>\n      </div>\n    }\n  </aside>\n</ng-template>\n\n<!-- The brand link's content: the tile (decorative) and the name. -->\n<ng-template #brandContent>\n  <span class=\"lc-sidenav__brand-tile\" aria-hidden=\"true\">\n    @if (brandIcon()) {\n      <lc-icon [name]=\"brandIcon()\" size=\"sm\" [decorative]=\"true\" />\n    } @else {\n      {{ brandInitial() }}\n    }\n  </span>\n  <span class=\"lc-sidenav__brand-name\" [class.lc-sidenav__sr-only]=\"isRail()\">{{ brandName() }}</span>\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}}:host{--lc-sidenav-bg: var(--_lc-sidenav-t-bg, var(--color-sidebar, var(--color-surface)));--lc-sidenav-fg: var(--_lc-sidenav-t-fg, var(--color-text-secondary));--lc-sidenav-fg-active: var(--_lc-sidenav-t-fg-active, var(--color-text-primary));--lc-sidenav-border: var(--_lc-sidenav-t-border, var(--color-border));--lc-sidenav-hover-bg: var(--_lc-sidenav-t-hover-bg, var(--color-surface-hover));--lc-sidenav-section-fg: var(--_lc-sidenav-t-section-fg, var(--color-text-tertiary));--lc-sidenav-active-bg: var(--_lc-sidenav-t-active-bg, var(--color-surface-selected));--lc-sidenav-active-fg: var(--_lc-sidenav-t-active-fg, var(--color-on-surface-selected, var(--color-link)));--lc-sidenav-active-icon: var(--_lc-sidenav-t-active-icon, var(--color-on-surface-selected, var(--color-link)));--lc-sidenav-badge-ring: var(--lc-sidenav-bg);--lc-sidenav-rail-width: 56px;--lc-sidenav-nav-padding-x: .5rem;--lc-sidenav-item-padding-x: .625rem}.lc-sidenav{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:var(--lc-sidenav-rail-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 var(--lc-sidenav-nav-padding-x);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 var(--lc-sidenav-item-padding-x);gap:0;border-radius:var(--border-radius-md, .375rem);position:relative}.lc-sidenav--collapsed .lc-sidenav__nav-item:hover:after,.lc-sidenav--collapsed .lc-sidenav__nav-item:focus-visible:after{content:attr(title);position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:8px;padding:4px 10px;background-color:var(--color-surface-raised);color:var(--color-text-primary);border:1px solid var(--color-border);box-shadow:var(--elevation-2, 0 4px 6px -1px rgba(0, 0, 0, .1));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:4px;right:4px;display:flex;margin-left:0;border-radius:var(--border-radius-full, 9999px);background-color:var(--lc-sidenav-badge-ring);box-shadow:0 0 0 2px var(--lc-sidenav-badge-ring);pointer-events:none}.lc-sidenav--collapsed .lc-sidenav__nav-children{display:none}.lc-sidenav--collapsed .lc-sidenav__section-items{display:flex;flex-direction:column;gap:.125rem}.lc-sidenav--collapsed .lc-sidenav__section{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--color-divider, #e5e7eb)}.lc-sidenav--collapsed .lc-sidenav__content{display:none}.lc-sidenav--collapsed .lc-sidenav__logo{padding:0;justify-content:center}.lc-sidenav__logo{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-3);padding:0 var(--spacing-4);border-bottom:1px solid var(--lc-sidenav-border);min-height:64px;flex-shrink:0}.lc-sidenav__logo--size-xs,.lc-sidenav__logo--size-sm{min-height:56px}.lc-sidenav__logo--size-md{min-height:64px}.lc-sidenav__logo--size-lg{min-height:80px}.lc-sidenav__logo--size-xl{min-height:112px}.lc-sidenav__logo-link{display:flex;align-items:center;flex:0 1 auto;min-width:0;max-width:100%;text-decoration:none;color:var(--lc-sidenav-fg);background:transparent;border:none;padding:0;cursor:pointer}.lc-sidenav__logo-link:focus-visible{outline:2px solid var(--_lc-sidenav-t-accent, var(--color-primary-500));outline-offset:4px;border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav__logo-toggle{display:inline-flex;align-items:center;justify-content:center;width:1.875rem;height:1.875rem;border:none;border-radius:var(--border-radius-md, .375rem);background:transparent;color:var(--lc-sidenav-fg);opacity:.8;flex-shrink:0;cursor:pointer;transition:background-color .2s ease,color .2s ease,opacity .2s ease}.lc-sidenav__logo-toggle:hover{background-color:var(--lc-sidenav-hover-bg);opacity:1}.lc-sidenav__logo-toggle:focus-visible{outline:2px solid var(--_lc-sidenav-t-accent, var(--color-primary-500));outline-offset:2px}.lc-sidenav__close{position:absolute;top:1rem;right:1rem;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;background:none;border:none;border-radius:var(--border-radius-md, .375rem);color:var(--color-text-secondary);cursor:pointer;transition:background-color .2s ease,color .2s ease;z-index:1}.lc-sidenav__close:hover{background-color:var(--color-surface);color:var(--color-text-primary)}.lc-sidenav__close:focus-visible{outline:2px solid var(--_lc-sidenav-t-accent, var(--color-primary-500, rgb(59, 130, 246)));outline-offset:2px}.lc-sidenav__close:active{background-color:var(--color-border)}.lc-sidenav__close svg{width:1.25rem;height:1.25rem}.lc-sidenav__nav{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1, .25rem));padding:var(--lc-density-padding-md, 1rem) var(--lc-sidenav-nav-padding-x);padding-top:4rem}.lc-sidenav__nav--docked{padding-top:var(--lc-density-padding-md, 1rem);gap:0}.lc-sidenav__section:not(:first-child){margin-top:var(--spacing-4, 1rem);padding-top:var(--spacing-3, .75rem)}.lc-sidenav__section-header{display:flex;align-items:center;justify-content:space-between;padding-right:0;margin-bottom:var(--spacing-1, .25rem)}.lc-sidenav__section-title{padding:0 var(--lc-sidenav-item-padding-x);margin-bottom:0;font-size:var(--font-size-xs, .75rem);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--lc-sidenav-section-fg);line-height:28px}.lc-sidenav__section-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1, .25rem))}.lc-sidenav__nav-item{display:flex;align-items:center;gap:var(--spacing-3, .75rem);min-height:var(--size-min-touch-height, 2.75rem);box-sizing:border-box;padding:var(--lc-density-padding-xs, var(--spacing-2, .5rem)) var(--lc-sidenav-item-padding-x);text-decoration:none;color:var(--lc-sidenav-fg);border-radius:var(--border-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(--_lc-sidenav-t-accent, var(--color-primary-500));outline-offset:2px}.lc-sidenav__nav-item--active,.lc-sidenav__nav-item[aria-current=page]{background-color:var(--lc-sidenav-active-bg);color:var(--lc-sidenav-active-fg);font-weight:600;box-shadow:inset 2px 0 0 var(--lc-sidenav-active-indicator, var(--_lc-sidenav-t-accent, var(--color-primary-500)))}.lc-sidenav__nav-item--active .lc-sidenav__nav-icon,.lc-sidenav__nav-item[aria-current=page] .lc-sidenav__nav-icon{color:var(--lc-sidenav-active-icon)}.lc-sidenav__nav-item--active:hover,.lc-sidenav__nav-item[aria-current=page]:hover{background-color:var(--lc-sidenav-active-bg);color:var(--lc-sidenav-active-fg)}.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}:host ::ng-deep .lc-sidenav--collapsed .lc-sidenav__nav-badge .lc-badge{min-width:16px;height:16px;padding:0 3px;font-size:10px;font-weight:600;line-height:1;border:0}.lc-sidenav__nav-item--expanded .lc-sidenav__nav-chevron{transform:rotate(180deg)}.lc-sidenav__nav-item--parent{width:100%;border:none;background:none;font-family:inherit;text-align:left}.lc-sidenav__nav-children{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1, .25rem));padding-left:var(--spacing-4, 1rem)}.lc-sidenav__nav-item--child{font-size:var(--font-size-sm, .875rem)}.lc-sidenav__nav-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lc-sidenav__nav-item-row{display:flex;align-items:center}.lc-sidenav__nav-item-row .lc-sidenav__nav-item{flex:1;min-width:0}.lc-sidenav__nav-item-row .lc-sidenav__action-btn{opacity:0;transition:opacity .15s ease}.lc-sidenav__nav-item-row:hover .lc-sidenav__action-btn{opacity:1}.lc-sidenav__action-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;padding:0;background:transparent;border:none;border-radius:var(--border-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(--_lc-sidenav-t-accent, 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-surface-hover)}@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(--_lc-sidenav-t-accent, var(--color-primary-500, rgb(59, 130, 246)));outline-offset:2px;border-radius:var(--border-radius-sm, .25rem)}:host(.lc-sidenav-container--light){--_lc-sidenav-t-bg: #ffffff;--_lc-sidenav-t-fg: #374151;--_lc-sidenav-t-fg-active: #111827;--_lc-sidenav-t-border: #e5e7eb;--_lc-sidenav-t-hover-bg: #f3f4f6;--_lc-sidenav-t-section-fg: #6b7280;--_lc-sidenav-t-active-bg: #f0f8fa;--_lc-sidenav-t-active-fg: #144f5b;--_lc-sidenav-t-active-icon: #1a6a79;--_lc-sidenav-t-accent: #208497}:host(.lc-sidenav-container--dark){--_lc-sidenav-t-bg: #070e15;--_lc-sidenav-t-fg: #c4d2d9;--_lc-sidenav-t-fg-active: #f1f6f8;--_lc-sidenav-t-border: rgba(255, 255, 255, .08);--_lc-sidenav-t-hover-bg: rgba(132, 199, 212, .06);--_lc-sidenav-t-section-fg: #93a4ad;--_lc-sidenav-t-active-bg: rgba(32, 132, 151, .12);--_lc-sidenav-t-active-fg: #84c7d4;--_lc-sidenav-t-active-icon: #84c7d4}.lc-sidenav--transparent.lc-sidenav--docked{--lc-sidenav-bg: transparent;--lc-sidenav-badge-ring: var(--color-background);background-color:transparent;border-right:0}.lc-sidenav--transparent .lc-sidenav__nav,.lc-sidenav--transparent .lc-sidenav__nav--docked{gap:var(--spacing-1, .25rem);padding:var(--lc-sidenav-transparent-padding, 3rem 1.5rem 1.5rem)}.lc-sidenav--transparent .lc-sidenav__section-items,.lc-sidenav--transparent .lc-sidenav__nav-children{gap:var(--spacing-1, .25rem)}.lc-sidenav--transparent .lc-sidenav__nav-item{gap:var(--spacing-3, .75rem);min-height:3rem;padding:0 var(--spacing-4, 1rem);border-radius:var(--border-radius-full, 9999px);font-size:var(--font-size-base, 1rem);font-weight:var(--font-weight-medium, 500)}.lc-sidenav--transparent .lc-sidenav__nav-item--active,.lc-sidenav--transparent .lc-sidenav__nav-item[aria-current=page]{box-shadow:none;font-weight:var(--font-weight-semibold, 600)}.lc-sidenav--transparent .lc-sidenav__nav-item--active .lc-sidenav__nav-icon ::ng-deep svg,.lc-sidenav--transparent .lc-sidenav__nav-item[aria-current=page] .lc-sidenav__nav-icon ::ng-deep svg{stroke-width:2.2}.lc-sidenav--transparent .lc-sidenav__section-title{padding:0 var(--spacing-4, 1rem)}.lc-sidenav__logo--brand{gap:var(--spacing-1, .25rem);padding-inline:var(--spacing-2, .5rem)}.lc-sidenav__brand{display:flex;align-items:center;gap:var(--spacing-3, .75rem);flex:1 1 auto;min-width:0;min-height:var(--size-min-touch-height, 2.75rem);box-sizing:border-box;padding:var(--spacing-1-5, .375rem) var(--spacing-2, .5rem) var(--spacing-1-5, .375rem) var(--spacing-1, .25rem);border-radius:var(--border-radius-md, .75rem);color:var(--lc-sidenav-fg-active);text-decoration:none;transition:background-color .2s ease}.lc-sidenav__brand:hover{background-color:var(--lc-sidenav-hover-bg)}.lc-sidenav__brand:focus-visible{outline:2px solid var(--_lc-sidenav-t-accent, var(--color-primary-500));outline-offset:2px}.lc-sidenav__brand-tile{display:grid;place-items:center;flex:none;width:32px;height:32px;box-sizing:border-box;border-radius:var(--border-radius-sm, .625rem);background-color:var(--lc-sidenav-brand-tile-bg, var(--color-primary-fill));color:var(--lc-sidenav-brand-tile-fg, var(--color-on-primary));font-size:var(--font-size-base, 1rem);font-weight:var(--font-weight-bold, 700);line-height:1}.lc-sidenav__brand-name{min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:break-word;hyphens:auto;font-size:var(--font-size-base, 1rem);font-weight:var(--font-weight-semibold, 600);line-height:var(--line-height-tight, 1.25)}.lc-sidenav__collapse-row{display:flex;flex-shrink:0;margin-top:auto;border-top:1px solid var(--lc-sidenav-border);padding:var(--spacing-2, .5rem) calc(var(--lc-sidenav-nav-padding-x) - 2px)}.lc-sidenav__collapse-toggle{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--size-min-touch-width, 2.75rem);height:var(--size-min-touch-height, 2.75rem);padding:0;border:none;border-radius:var(--border-radius-md, .75rem);background:transparent;color:var(--lc-sidenav-fg);cursor:pointer;transition:background-color .2s ease,color .2s ease}.lc-sidenav__collapse-toggle:hover{background-color:var(--lc-sidenav-hover-bg)}.lc-sidenav__collapse-toggle:focus-visible{outline:2px solid var(--_lc-sidenav-t-accent, var(--color-primary-500));outline-offset:2px}.lc-sidenav--transparent .lc-sidenav__logo--brand{padding-inline:var(--spacing-6, 1.5rem) var(--spacing-4, 1rem)}.lc-sidenav--transparent .lc-sidenav__brand{padding:var(--spacing-1-5, .375rem) var(--spacing-2, .5rem) var(--spacing-1-5, .375rem) var(--spacing-2-5, .625rem)}.lc-sidenav--transparent .lc-sidenav__collapse-row{padding:var(--spacing-2, .5rem) var(--spacing-7, 1.75rem)}.lc-sidenav--collapsed .lc-sidenav__logo--brand{padding:0}.lc-sidenav--collapsed .lc-sidenav__brand{position:relative;flex:none;padding:var(--spacing-1-5, .375rem)}.lc-sidenav--collapsed .lc-sidenav__brand:hover:after,.lc-sidenav--collapsed .lc-sidenav__brand:focus-visible:after{content:attr(data-tooltip);position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:8px;padding:4px 10px;background-color:var(--color-surface-raised);color:var(--color-text-primary);border:1px solid var(--color-border);box-shadow:var(--elevation-2, 0 4px 6px -1px rgba(0, 0, 0, .1));font-size:.75rem;white-space:nowrap;border-radius:4px;z-index:1002;pointer-events:none}.lc-sidenav--collapsed .lc-sidenav__collapse-row{padding:var(--spacing-2, .5rem) 0;justify-content:center}.lc-sidenav--drawer .lc-sidenav__logo--brand{padding-inline-end:58px}.lc-sidenav--drawer .lc-sidenav__logo--brand~.lc-sidenav__close{top:10px;right:10px;width:var(--size-min-touch-width, 2.75rem);height:var(--size-min-touch-height, 2.75rem)}.lc-sidenav--drawer .lc-sidenav__logo--brand~.lc-sidenav__nav{padding-top:var(--spacing-4, 1rem)}.lc-sidenav__sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(forced-colors:active){.lc-sidenav__brand-tile{border:1px solid CanvasText;color:CanvasText}.lc-sidenav__nav-item--active:not(:focus-visible),.lc-sidenav__nav-item[aria-current=page]:not(:focus-visible){outline:1px solid Highlight}}@media print{.lc-sidenav-container,.lc-sidenav__overlay,.lc-sidenav{display:none}}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -531,6 +592,54 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		brandName: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "brandName",
+				required: false
+			}]
+		}],
+		brandIcon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "brandIcon",
+				required: false
+			}]
+		}],
+		brandHref: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "brandHref",
+				required: false
+			}]
+		}],
+		brandAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "brandAriaLabel",
+				required: false
+			}]
+		}],
+		showCollapseToggle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showCollapseToggle",
+				required: false
+			}]
+		}],
+		expandAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "expandAriaLabel",
+				required: false
+			}]
+		}],
 		isOpen: [{
 			type: i0.Input,
 			args: [{