@lifecorner/angular-ui-kit 3.30.2 → 3.32.0

package/fesm2022/lifecorner-angular-ui-kit-select.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lifecorner-angular-ui-kit-select.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/select/select.component.ts","../../../../libs/angular-ui-kit/src/lib/select/select.component.html"],"sourcesContent":["import {\n  Component,\n  input,\n  output,\n  signal,\n  computed,\n  linkedSignal,\n  ChangeDetectionStrategy,\n  forwardRef,\n  ElementRef,\n  viewChild,\n  inject,\n  DOCUMENT,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';\nimport { OverlayModule } from '@angular/cdk/overlay';\n\nexport interface SelectOption {\n  value: string | number;\n  label: string;\n  disabled?: boolean;\n}\n\nexport interface SelectOptionGroup {\n  label: string;\n  options: SelectOption[];\n}\n\nexport type SelectValue = string | number | string[] | number[] | null;\n\n/**\n * Select component for dropdown option selection.\n *\n * Features:\n * - Single and multiple selection modes\n * - Searchable/filterable option list\n * - Option groups with headers\n * - Loading state indicator\n * - Variant styles (outline, filled)\n * - Size presets (xs, sm, md, lg)\n * - Keyboard navigation support\n * - CDK overlay positioning\n * - ControlValueAccessor integration for reactive forms\n *\n * @example\n * ```html\n * <lc-select [options]=\"options\" placeholder=\"Choose\" [(ngModel)]=\"selected\" />\n * ```\n */\n@Component({\n  selector: 'lc-select',\n  standalone: true,\n  imports: [FormsModule, OverlayModule],\n  templateUrl: './select.component.html',\n  styleUrl: './select.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => SelectComponent),\n      multi: true,\n    },\n  ],\n})\nexport class SelectComponent implements ControlValueAccessor {\n  private static nextId = 0;\n\n  /** Per-instance id base; the listbox and its options derive their ids from it. */\n  readonly selectId = `lc-select-${++SelectComponent.nextId}`;\n  readonly listboxId = `${this.selectId}-listbox`;\n\n  private readonly selectTrigger = viewChild<ElementRef<HTMLElement>>('selectTrigger');\n  private readonly dropdownPanel = viewChild<ElementRef<HTMLElement>>('dropdownPanel');\n\n  /**\n   * Visual variant of the select\n   */\n  readonly variant = input<'outline' | 'filled'>('outline');\n\n  /**\n   * Size of the select\n   */\n  readonly size = input<'xs' | 'sm' | 'md' | 'lg'>('md');\n\n  /**\n   * Whether the select is disabled\n   */\n  readonly disabled = input<boolean>(false);\n\n  /**\n   * Whether the select is in error state\n   */\n  readonly error = input<boolean>(false);\n\n  /**\n   * Whether the select is required\n   */\n  readonly required = input<boolean>(false);\n\n  /**\n   * Whether the select is in loading state\n   */\n  readonly loading = input<boolean>(false);\n\n  /**\n   * Whether the select allows searching\n   */\n  readonly searchable = input<boolean>(false);\n\n  /**\n   * Whether multiple options can be selected\n   */\n  readonly multiple = input<boolean>(false);\n\n  /**\n   * Placeholder text when no option is selected\n   */\n  readonly placeholder = input<string>('Select an option');\n\n  /**\n   * Helper text displayed below the select\n   */\n  readonly helperText = input<string>('');\n\n  /**\n   * Error message displayed when error is true\n   */\n  readonly errorMessage = input<string>('');\n\n  /**\n   * ARIA label for accessibility\n   */\n  readonly ariaLabel = input<string | undefined>(undefined);\n\n  /**\n   * Select options (flat list or groups)\n   */\n  readonly options = input<SelectOption[] | SelectOptionGroup[]>([]);\n\n  /** Accessible name of the clear button. */\n  readonly clearAriaLabel = input('Clear selection');\n\n  /** Placeholder of the search field (`searchable`). */\n  readonly searchPlaceholder = input('Search...');\n\n  /** Accessible name of the search field. Empty: \"Search \" + `ariaLabel`, or \"Search options\". */\n  readonly searchAriaLabel = input('');\n\n  /** Shown when the search matches no option. */\n  readonly noOptionsLabel = input('No options found');\n\n  /**\n   * Emitted when selection changes\n   */\n  readonly selectionChange = output<SelectValue>();\n\n  /**\n   * Emitted when dropdown opens\n   */\n  readonly opened = output<void>();\n\n  /**\n   * Emitted when dropdown closes\n   */\n  readonly closed = output<void>();\n\n  // Internal state\n  readonly value = signal<SelectValue>(null);\n  readonly isOpen = signal<boolean>(false);\n  readonly searchQuery = signal<string>('');\n\n  /** Disabled state pushed in by the forms API (setDisabledState). */\n  private readonly formDisabled = signal<boolean>(false);\n\n  /** Effective disabled state: the `disabled` input OR the form control's disabled state. */\n  readonly isDisabled = computed(() => this.disabled() || this.formDisabled());\n\n  // Computed values\n  readonly filteredOptions = computed(() => {\n    const query = this.searchQuery().toLowerCase();\n    const opts = this.options();\n\n    if (!query || !this.searchable()) {\n      return this.flattenOptions(opts);\n    }\n\n    return this.flattenOptions(opts).filter((opt) => opt.label.toLowerCase().includes(query));\n  });\n\n  /** Keyboard highlight; resets whenever the visible option list changes so it never points at a stale row. */\n  readonly highlightedIndex = linkedSignal<SelectOption[], number>({\n    source: this.filteredOptions,\n    computation: () => -1,\n  });\n\n  readonly activeDescendantId = computed(() => {\n    const index = this.highlightedIndex();\n    return this.isOpen() && index >= 0 ? this.optionId(index) : null;\n  });\n\n  readonly selectedLabel = computed(() => {\n    const currentValue = this.value();\n    const opts = this.options();\n\n    if (currentValue === null) {\n      return '';\n    }\n\n    if (this.multiple()) {\n      const values = Array.isArray(currentValue) ? currentValue : [currentValue];\n      return values\n        .map((val) => this.findOptionByValue(val, opts)?.label)\n        .filter(Boolean)\n        .join(', ');\n    }\n\n    const val = Array.isArray(currentValue) ? currentValue[0] : currentValue;\n    return this.findOptionByValue(val ?? '', opts)?.label || '';\n  });\n\n  readonly displayValue = computed(() => {\n    const label = this.selectedLabel();\n    if (label) {\n      const currentValue = this.value();\n      if (this.multiple() && Array.isArray(currentValue)) {\n        const count = currentValue.length;\n        return count > 1 ? `${count} selected` : label;\n      }\n      return label;\n    }\n    return this.placeholder();\n  });\n\n  /** id of the helper/error text the trigger is described by (aria-describedby) */\n  readonly describedBy = computed(() => {\n    if (this.error() && this.errorMessage()) {\n      return `${this.selectId}-error`;\n    }\n    return this.helperText() ? `${this.selectId}-helper` : null;\n  });\n\n  /**\n   * Computed classes for the select trigger element\n   */\n  readonly selectClasses = computed(() => {\n    const classes = ['lc-select', `lc-select--${this.variant()}`, `lc-select--${this.size()}`];\n\n    if (this.isDisabled()) {\n      classes.push('lc-select--disabled');\n    }\n\n    if (this.error()) {\n      classes.push('lc-select--error');\n    }\n\n    if (this.loading()) {\n      classes.push('lc-select--loading');\n    }\n\n    if (this.isOpen()) {\n      classes.push('lc-select--open');\n    }\n\n    return classes.join(' ');\n  });\n\n  // Private properties\n  private readonly document = inject(DOCUMENT);\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  private onChange: (value: SelectValue) => void = () => {};\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  private onTouched: () => void = () => {};\n\n  // Public methods\n  /**\n   * Id of the option at `index` in the filtered list (used for aria-activedescendant)\n   */\n  optionId(index: number): string {\n    return `${this.selectId}-option-${index}`;\n  }\n\n  /**\n   * Toggle dropdown open/closed\n   */\n  toggle(): void {\n    if (this.isDisabled() || this.loading()) {\n      return;\n    }\n    if (this.isOpen()) {\n      this.close();\n    } else {\n      this.open();\n    }\n  }\n\n  /**\n   * Open dropdown\n   */\n  open(): void {\n    if (this.isDisabled() || this.loading() || this.isOpen()) {\n      return;\n    }\n    this.isOpen.set(true);\n    this.opened.emit();\n  }\n\n  /**\n   * Close dropdown. Idempotent: the overlay's `detach` re-enters here after\n   * `isOpen` flips, and that second call must not emit `closed` again.\n   */\n  close(): void {\n    if (!this.isOpen()) {\n      return;\n    }\n    // If focus is inside the panel (search input) it would fall to <body> when the\n    // overlay is torn down; hand it back to the trigger first.\n    this.restoreFocusFromPanel();\n    this.isOpen.set(false);\n    this.searchQuery.set('');\n    this.highlightedIndex.set(-1);\n    this.closed.emit();\n  }\n\n  /**\n   * Select an option\n   */\n  selectOption(option: SelectOption): void {\n    if (option.disabled) {\n      return;\n    }\n\n    if (this.multiple()) {\n      const currentValue = this.value() || [];\n      const currentArray = (Array.isArray(currentValue) ? currentValue : []) as (string | number)[];\n      const index = currentArray.indexOf(option.value);\n\n      const newValue = (\n        index > -1\n          ? currentArray.filter((v) => v !== option.value) // Deselect\n          : [...currentArray, option.value] // Select\n      ) as SelectValue;\n      this.value.set(newValue);\n      this.onChange(newValue);\n      this.selectionChange.emit(newValue);\n    } else {\n      this.value.set(option.value);\n      this.onChange(option.value);\n      this.selectionChange.emit(option.value);\n      this.close();\n    }\n  }\n\n  /**\n   * Check if an option is selected\n   */\n  isSelected(option: SelectOption): boolean {\n    const currentValue = this.value();\n    if (this.multiple()) {\n      const values = Array.isArray(currentValue) ? currentValue : [];\n      return values.some((v) => v === option.value);\n    }\n    return currentValue === option.value;\n  }\n\n  /**\n   * Clear selection\n   */\n  clear(): void {\n    if (this.multiple()) {\n      this.value.set([]);\n      this.onChange([]);\n    } else {\n      this.value.set(null);\n      this.onChange(null);\n    }\n    this.selectionChange.emit(this.value());\n  }\n\n  /**\n   * Handle keyboard navigation (trigger and search input share this handler)\n   */\n  onKeyDown(event: KeyboardEvent): void {\n    if (this.isDisabled() || this.loading()) {\n      return;\n    }\n\n    switch (event.key) {\n      case ' ':\n      case 'Enter':\n        // Space must keep typing into the search box.\n        if (event.key === ' ' && this.isSearchInput(event.target)) {\n          return;\n        }\n        if (!this.isOpen()) {\n          this.open();\n        } else {\n          const option = this.filteredOptions()[this.highlightedIndex()];\n          if (option) {\n            this.selectOption(option);\n          }\n        }\n        event.preventDefault();\n        break;\n\n      case 'Escape':\n        if (this.isOpen()) {\n          this.close();\n          event.preventDefault();\n          // Only this select should react; keep the key from reaching enclosing overlays.\n          event.stopPropagation();\n        }\n        break;\n\n      case 'ArrowDown':\n        if (!this.isOpen()) {\n          this.open();\n        } else {\n          const count = this.filteredOptions().length;\n          if (count > 0) {\n            this.highlightedIndex.set((this.highlightedIndex() + 1) % count);\n          }\n        }\n        event.preventDefault();\n        break;\n\n      case 'ArrowUp':\n        if (!this.isOpen()) {\n          this.open();\n        } else {\n          const count = this.filteredOptions().length;\n          if (count > 0) {\n            const current = this.highlightedIndex();\n            this.highlightedIndex.set(current <= 0 ? count - 1 : current - 1);\n          }\n        }\n        event.preventDefault();\n        break;\n\n      case 'Home':\n        if (this.isOpen() && this.filteredOptions().length > 0) {\n          this.highlightedIndex.set(0);\n          event.preventDefault();\n        }\n        break;\n\n      case 'End':\n        if (this.isOpen() && this.filteredOptions().length > 0) {\n          this.highlightedIndex.set(this.filteredOptions().length - 1);\n          event.preventDefault();\n        }\n        break;\n    }\n  }\n\n  /**\n   * Handle blur event\n   */\n  onBlur(): void {\n    this.onTouched();\n  }\n\n  /**\n   * Handle click outside\n   */\n  onClickOutside(): void {\n    this.close();\n  }\n\n  // ControlValueAccessor implementation\n  writeValue(value: SelectValue): void {\n    this.value.set(value);\n  }\n\n  registerOnChange(fn: (value: SelectValue) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.formDisabled.set(isDisabled);\n  }\n\n  // Private helper methods\n  private isSearchInput(target: EventTarget | null): boolean {\n    return target instanceof HTMLInputElement;\n  }\n\n  private restoreFocusFromPanel(): void {\n    const panel = this.dropdownPanel()?.nativeElement;\n    const active = this.document.activeElement;\n    if (panel && active && panel.contains(active)) {\n      this.selectTrigger()?.nativeElement.focus();\n    }\n  }\n\n  private findOptionByValue(\n    value: string | number,\n    options: SelectOption[] | SelectOptionGroup[],\n  ): SelectOption | undefined {\n    const flatOptions = this.flattenOptions(options);\n    return flatOptions.find((opt) => opt.value === value);\n  }\n\n  private flattenOptions(options: SelectOption[] | SelectOptionGroup[]): SelectOption[] {\n    if (!options || options.length === 0) {\n      return [];\n    }\n\n    // Check if first item is a group\n    const firstItem = options[0];\n    if (firstItem && 'options' in firstItem) {\n      return (options as SelectOptionGroup[]).flatMap((group) => group.options);\n    }\n\n    return options as SelectOption[];\n  }\n}\n","<div class=\"lc-select-wrapper\">\n  <div\n    #selectTrigger\n    [class]=\"selectClasses()\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"isOpen() ? 'true' : 'false'\"\n    [attr.aria-controls]=\"isOpen() ? listboxId : null\"\n    [attr.aria-activedescendant]=\"activeDescendantId()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-required]=\"required() ? 'true' : null\"\n    [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n    [attr.aria-invalid]=\"error() ? 'true' : null\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    (click)=\"toggle()\"\n    (keydown)=\"onKeyDown($event)\"\n    (blur)=\"onBlur()\"\n  >\n    <div class=\"lc-select__value\">\n      <span [class.lc-select__placeholder]=\"!selectedLabel()\">\n        {{ displayValue() }}\n      </span>\n    </div>\n\n    <div class=\"lc-select__icons\">\n      @if (loading()) {\n        <svg\n          class=\"lc-select__spinner\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          aria-hidden=\"true\"\n        >\n          <circle\n            class=\"opacity-25\"\n            cx=\"12\"\n            cy=\"12\"\n            r=\"10\"\n            stroke=\"currentColor\"\n            stroke-width=\"4\"\n          ></circle>\n          <path\n            class=\"opacity-75\"\n            fill=\"currentColor\"\n            d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n          ></path>\n        </svg>\n      } @else if (value() && !isDisabled() && !multiple()) {\n        <button\n          type=\"button\"\n          class=\"lc-select__clear\"\n          (click)=\"clear(); $event.stopPropagation()\"\n          [attr.aria-label]=\"clearAriaLabel()\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\"\n            />\n          </svg>\n        </button>\n      }\n\n      <svg\n        class=\"lc-select__chevron\"\n        [class.lc-select__chevron--open]=\"isOpen()\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 20 20\"\n        fill=\"currentColor\"\n        aria-hidden=\"true\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z\"\n          clip-rule=\"evenodd\"\n        />\n      </svg>\n    </div>\n  </div>\n\n  <!-- Dropdown Panel -->\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectTrigger\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n    (backdropClick)=\"onClickOutside()\"\n    (detach)=\"close()\"\n  >\n    <div #dropdownPanel class=\"lc-select__dropdown\" [class.lc-select__dropdown--open]=\"isOpen()\">\n      @if (searchable()) {\n        <div class=\"lc-select__search\">\n          <input\n            type=\"text\"\n            class=\"lc-select__search-input\"\n            [placeholder]=\"searchPlaceholder()\"\n            aria-autocomplete=\"list\"\n            [attr.aria-controls]=\"listboxId\"\n            [attr.aria-activedescendant]=\"activeDescendantId()\"\n            [attr.aria-label]=\"searchAriaLabel() || (ariaLabel() ? 'Search ' + ariaLabel() : 'Search options')\"\n            [(ngModel)]=\"searchQuery\"\n            (keydown)=\"onKeyDown($event)\"\n            (click)=\"$event.stopPropagation()\"\n          />\n        </div>\n      }\n\n      <div\n        class=\"lc-select__options\"\n        role=\"listbox\"\n        [id]=\"listboxId\"\n        [attr.aria-label]=\"ariaLabel() || null\"\n        [attr.aria-multiselectable]=\"multiple() ? 'true' : null\"\n      >\n        @if (filteredOptions().length === 0) {\n          <div\n            class=\"lc-select__option lc-select__option--no-results\"\n            role=\"option\"\n            aria-disabled=\"true\"\n            aria-selected=\"false\"\n          >\n            {{ noOptionsLabel() }}\n          </div>\n        } @else {\n          @for (option of filteredOptions(); track option.value; let i = $index) {\n            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- listbox option: focus stays on the trigger/search, keyboard selection via aria-activedescendant -->\n            <div\n              class=\"lc-select__option\"\n              role=\"option\"\n              [id]=\"optionId(i)\"\n              [attr.aria-selected]=\"isSelected(option) ? 'true' : 'false'\"\n              [attr.aria-disabled]=\"option.disabled ? 'true' : null\"\n              [class.lc-select__option--selected]=\"isSelected(option)\"\n              [class.lc-select__option--highlighted]=\"highlightedIndex() === i\"\n              [class.lc-select__option--disabled]=\"option.disabled\"\n              (click)=\"selectOption(option)\"\n              (mouseenter)=\"highlightedIndex.set(i)\"\n            >\n              @if (multiple()) {\n                <!-- Purely visual: the option itself carries the selected state (role=option\n                     + aria-selected); the checkbox is inert so clicks land on the option. -->\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"isSelected(option)\"\n                  [disabled]=\"option.disabled\"\n                  class=\"lc-select__checkbox\"\n                  tabindex=\"-1\"\n                  aria-hidden=\"true\"\n                />\n              }\n              <span class=\"lc-select__option-label\">{{ option.label }}</span>\n              @if (isSelected(option) && !multiple()) {\n                <svg\n                  class=\"lc-select__check\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 20 20\"\n                  fill=\"currentColor\"\n                  aria-hidden=\"true\"\n                >\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              }\n            </div>\n          }\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <!-- Helper/Error Text -->\n  @if (error() && errorMessage()) {\n    <div class=\"lc-select__error\" [id]=\"selectId + '-error'\" role=\"alert\">\n      {{ errorMessage() }}\n    </div>\n  } @else if (helperText()) {\n    <div class=\"lc-select__helper\" [id]=\"selectId + '-helper'\">\n      {{ helperText() }}\n    </div>\n  }\n</div>\n"],"mappings":"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"}
+{"version":3,"file":"lifecorner-angular-ui-kit-select.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/select/select.component.ts","../../../../libs/angular-ui-kit/src/lib/select/select.component.html"],"sourcesContent":["import {\n  Component,\n  input,\n  output,\n  signal,\n  computed,\n  linkedSignal,\n  ChangeDetectionStrategy,\n  forwardRef,\n  ElementRef,\n  viewChild,\n  inject,\n  DOCUMENT,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';\nimport { OverlayModule } from '@angular/cdk/overlay';\nimport { closestLang } from '@lifecorner/angular-ui-kit/internal/a11y';\n\nexport interface SelectOption {\n  value: string | number;\n  label: string;\n  disabled?: boolean;\n}\n\nexport interface SelectOptionGroup {\n  label: string;\n  options: SelectOption[];\n}\n\nexport type SelectValue = string | number | string[] | number[] | null;\n\n/**\n * Select component for dropdown option selection.\n *\n * Features:\n * - Single and multiple selection modes\n * - Searchable/filterable option list\n * - Option groups with headers\n * - Loading state indicator\n * - Variant styles (outline, filled)\n * - Size presets (xs, sm, md, lg)\n * - Keyboard navigation support\n * - CDK overlay positioning\n * - ControlValueAccessor integration for reactive forms\n *\n * The dropdown takes the `lang` of the host's closest `[lang]` (3.31).\n *\n * @example\n * ```html\n * <lc-select [options]=\"options\" placeholder=\"Choose\" [(ngModel)]=\"selected\" />\n * ```\n */\n@Component({\n  selector: 'lc-select',\n  standalone: true,\n  imports: [FormsModule, OverlayModule],\n  templateUrl: './select.component.html',\n  styleUrl: './select.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => SelectComponent),\n      multi: true,\n    },\n  ],\n})\nexport class SelectComponent implements ControlValueAccessor {\n  private static nextId = 0;\n\n  /** Per-instance id base; the listbox and its options derive their ids from it. */\n  readonly selectId = `lc-select-${++SelectComponent.nextId}`;\n  readonly listboxId = `${this.selectId}-listbox`;\n\n  private readonly selectTrigger = viewChild<ElementRef<HTMLElement>>('selectTrigger');\n  private readonly dropdownPanel = viewChild<ElementRef<HTMLElement>>('dropdownPanel');\n\n  /**\n   * Visual variant of the select\n   */\n  readonly variant = input<'outline' | 'filled'>('outline');\n\n  /**\n   * Size of the select\n   */\n  readonly size = input<'xs' | 'sm' | 'md' | 'lg'>('md');\n\n  /**\n   * Whether the select is disabled\n   */\n  readonly disabled = input<boolean>(false);\n\n  /**\n   * Whether the select is in error state\n   */\n  readonly error = input<boolean>(false);\n\n  /**\n   * Whether the select is required\n   */\n  readonly required = input<boolean>(false);\n\n  /**\n   * Whether the select is in loading state\n   */\n  readonly loading = input<boolean>(false);\n\n  /**\n   * Whether the select allows searching\n   */\n  readonly searchable = input<boolean>(false);\n\n  /**\n   * Whether multiple options can be selected\n   */\n  readonly multiple = input<boolean>(false);\n\n  /**\n   * Placeholder text when no option is selected\n   */\n  readonly placeholder = input<string>('Select an option');\n\n  /**\n   * Helper text displayed below the select\n   */\n  readonly helperText = input<string>('');\n\n  /**\n   * Error message displayed when error is true\n   */\n  readonly errorMessage = input<string>('');\n\n  /**\n   * ARIA label for accessibility\n   */\n  readonly ariaLabel = input<string | undefined>(undefined);\n\n  /**\n   * Select options (flat list or groups)\n   */\n  readonly options = input<SelectOption[] | SelectOptionGroup[]>([]);\n\n  /** Accessible name of the clear button. */\n  readonly clearAriaLabel = input('Clear selection');\n\n  /** Placeholder of the search field (`searchable`). */\n  readonly searchPlaceholder = input('Search...');\n\n  /** Accessible name of the search field. Empty: \"Search \" + `ariaLabel`, or \"Search options\". */\n  readonly searchAriaLabel = input('');\n\n  /** Shown when the search matches no option. */\n  readonly noOptionsLabel = input('No options found');\n\n  /**\n   * Emitted when selection changes\n   */\n  readonly selectionChange = output<SelectValue>();\n\n  /**\n   * Emitted when dropdown opens\n   */\n  readonly opened = output<void>();\n\n  /**\n   * Emitted when dropdown closes\n   */\n  readonly closed = output<void>();\n\n  // Internal state\n  readonly value = signal<SelectValue>(null);\n  readonly isOpen = signal<boolean>(false);\n  readonly searchQuery = signal<string>('');\n\n  /** Disabled state pushed in by the forms API (setDisabledState). */\n  private readonly formDisabled = signal<boolean>(false);\n\n  /** Effective disabled state: the `disabled` input OR the form control's disabled state. */\n  readonly isDisabled = computed(() => this.disabled() || this.formDisabled());\n\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n\n  /**\n   * `lang` of the open dropdown (3.31, request 050, WCAG 3.1.2): the overlay\n   * renders under `<body>`, so it takes the host's closest `[lang]`, else none.\n   * Read at every opening; `null` while closed, so the server never reads the DOM.\n   */\n  protected readonly panelLang = computed(() => (this.isOpen() ? closestLang(this.host.nativeElement) : null));\n\n  // Computed values\n  readonly filteredOptions = computed(() => {\n    const query = this.searchQuery().toLowerCase();\n    const opts = this.options();\n\n    if (!query || !this.searchable()) {\n      return this.flattenOptions(opts);\n    }\n\n    return this.flattenOptions(opts).filter((opt) => opt.label.toLowerCase().includes(query));\n  });\n\n  /** Keyboard highlight; resets whenever the visible option list changes so it never points at a stale row. */\n  readonly highlightedIndex = linkedSignal<SelectOption[], number>({\n    source: this.filteredOptions,\n    computation: () => -1,\n  });\n\n  readonly activeDescendantId = computed(() => {\n    const index = this.highlightedIndex();\n    return this.isOpen() && index >= 0 ? this.optionId(index) : null;\n  });\n\n  readonly selectedLabel = computed(() => {\n    const currentValue = this.value();\n    const opts = this.options();\n\n    if (currentValue === null) {\n      return '';\n    }\n\n    if (this.multiple()) {\n      const values = Array.isArray(currentValue) ? currentValue : [currentValue];\n      return values\n        .map((val) => this.findOptionByValue(val, opts)?.label)\n        .filter(Boolean)\n        .join(', ');\n    }\n\n    const val = Array.isArray(currentValue) ? currentValue[0] : currentValue;\n    return this.findOptionByValue(val ?? '', opts)?.label || '';\n  });\n\n  readonly displayValue = computed(() => {\n    const label = this.selectedLabel();\n    if (label) {\n      const currentValue = this.value();\n      if (this.multiple() && Array.isArray(currentValue)) {\n        const count = currentValue.length;\n        return count > 1 ? `${count} selected` : label;\n      }\n      return label;\n    }\n    return this.placeholder();\n  });\n\n  /** id of the helper/error text the trigger is described by (aria-describedby) */\n  readonly describedBy = computed(() => {\n    if (this.error() && this.errorMessage()) {\n      return `${this.selectId}-error`;\n    }\n    return this.helperText() ? `${this.selectId}-helper` : null;\n  });\n\n  /**\n   * Computed classes for the select trigger element\n   */\n  readonly selectClasses = computed(() => {\n    const classes = ['lc-select', `lc-select--${this.variant()}`, `lc-select--${this.size()}`];\n\n    if (this.isDisabled()) {\n      classes.push('lc-select--disabled');\n    }\n\n    if (this.error()) {\n      classes.push('lc-select--error');\n    }\n\n    if (this.loading()) {\n      classes.push('lc-select--loading');\n    }\n\n    if (this.isOpen()) {\n      classes.push('lc-select--open');\n    }\n\n    return classes.join(' ');\n  });\n\n  // Private properties\n  private readonly document = inject(DOCUMENT);\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  private onChange: (value: SelectValue) => void = () => {};\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  private onTouched: () => void = () => {};\n\n  // Public methods\n  /**\n   * Id of the option at `index` in the filtered list (used for aria-activedescendant)\n   */\n  optionId(index: number): string {\n    return `${this.selectId}-option-${index}`;\n  }\n\n  /**\n   * Toggle dropdown open/closed\n   */\n  toggle(): void {\n    if (this.isDisabled() || this.loading()) {\n      return;\n    }\n    if (this.isOpen()) {\n      this.close();\n    } else {\n      this.open();\n    }\n  }\n\n  /**\n   * Open dropdown\n   */\n  open(): void {\n    if (this.isDisabled() || this.loading() || this.isOpen()) {\n      return;\n    }\n    this.isOpen.set(true);\n    this.opened.emit();\n  }\n\n  /**\n   * Close dropdown. Idempotent: the overlay's `detach` re-enters here after\n   * `isOpen` flips, and that second call must not emit `closed` again.\n   */\n  close(): void {\n    if (!this.isOpen()) {\n      return;\n    }\n    // If focus is inside the panel (search input) it would fall to <body> when the\n    // overlay is torn down; hand it back to the trigger first.\n    this.restoreFocusFromPanel();\n    this.isOpen.set(false);\n    this.searchQuery.set('');\n    this.highlightedIndex.set(-1);\n    this.closed.emit();\n  }\n\n  /**\n   * Select an option\n   */\n  selectOption(option: SelectOption): void {\n    if (option.disabled) {\n      return;\n    }\n\n    if (this.multiple()) {\n      const currentValue = this.value() || [];\n      const currentArray = (Array.isArray(currentValue) ? currentValue : []) as (string | number)[];\n      const index = currentArray.indexOf(option.value);\n\n      const newValue = (\n        index > -1\n          ? currentArray.filter((v) => v !== option.value) // Deselect\n          : [...currentArray, option.value] // Select\n      ) as SelectValue;\n      this.value.set(newValue);\n      this.onChange(newValue);\n      this.selectionChange.emit(newValue);\n    } else {\n      this.value.set(option.value);\n      this.onChange(option.value);\n      this.selectionChange.emit(option.value);\n      this.close();\n    }\n  }\n\n  /**\n   * Check if an option is selected\n   */\n  isSelected(option: SelectOption): boolean {\n    const currentValue = this.value();\n    if (this.multiple()) {\n      const values = Array.isArray(currentValue) ? currentValue : [];\n      return values.some((v) => v === option.value);\n    }\n    return currentValue === option.value;\n  }\n\n  /**\n   * Clear selection\n   */\n  clear(): void {\n    if (this.multiple()) {\n      this.value.set([]);\n      this.onChange([]);\n    } else {\n      this.value.set(null);\n      this.onChange(null);\n    }\n    this.selectionChange.emit(this.value());\n  }\n\n  /**\n   * Handle keyboard navigation (trigger and search input share this handler)\n   */\n  onKeyDown(event: KeyboardEvent): void {\n    if (this.isDisabled() || this.loading()) {\n      return;\n    }\n\n    switch (event.key) {\n      case ' ':\n      case 'Enter':\n        // Space must keep typing into the search box.\n        if (event.key === ' ' && this.isSearchInput(event.target)) {\n          return;\n        }\n        if (!this.isOpen()) {\n          this.open();\n        } else {\n          const option = this.filteredOptions()[this.highlightedIndex()];\n          if (option) {\n            this.selectOption(option);\n          }\n        }\n        event.preventDefault();\n        break;\n\n      case 'Escape':\n        if (this.isOpen()) {\n          this.close();\n          event.preventDefault();\n          // Only this select should react; keep the key from reaching enclosing overlays.\n          event.stopPropagation();\n        }\n        break;\n\n      case 'ArrowDown':\n        if (!this.isOpen()) {\n          this.open();\n        } else {\n          const count = this.filteredOptions().length;\n          if (count > 0) {\n            this.highlightedIndex.set((this.highlightedIndex() + 1) % count);\n          }\n        }\n        event.preventDefault();\n        break;\n\n      case 'ArrowUp':\n        if (!this.isOpen()) {\n          this.open();\n        } else {\n          const count = this.filteredOptions().length;\n          if (count > 0) {\n            const current = this.highlightedIndex();\n            this.highlightedIndex.set(current <= 0 ? count - 1 : current - 1);\n          }\n        }\n        event.preventDefault();\n        break;\n\n      case 'Home':\n        if (this.isOpen() && this.filteredOptions().length > 0) {\n          this.highlightedIndex.set(0);\n          event.preventDefault();\n        }\n        break;\n\n      case 'End':\n        if (this.isOpen() && this.filteredOptions().length > 0) {\n          this.highlightedIndex.set(this.filteredOptions().length - 1);\n          event.preventDefault();\n        }\n        break;\n    }\n  }\n\n  /**\n   * Handle blur event\n   */\n  onBlur(): void {\n    this.onTouched();\n  }\n\n  /**\n   * Handle click outside\n   */\n  onClickOutside(): void {\n    this.close();\n  }\n\n  // ControlValueAccessor implementation\n  writeValue(value: SelectValue): void {\n    this.value.set(value);\n  }\n\n  registerOnChange(fn: (value: SelectValue) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.formDisabled.set(isDisabled);\n  }\n\n  // Private helper methods\n  private isSearchInput(target: EventTarget | null): boolean {\n    return target instanceof HTMLInputElement;\n  }\n\n  private restoreFocusFromPanel(): void {\n    const panel = this.dropdownPanel()?.nativeElement;\n    const active = this.document.activeElement;\n    if (panel && active && panel.contains(active)) {\n      this.selectTrigger()?.nativeElement.focus();\n    }\n  }\n\n  private findOptionByValue(\n    value: string | number,\n    options: SelectOption[] | SelectOptionGroup[],\n  ): SelectOption | undefined {\n    const flatOptions = this.flattenOptions(options);\n    return flatOptions.find((opt) => opt.value === value);\n  }\n\n  private flattenOptions(options: SelectOption[] | SelectOptionGroup[]): SelectOption[] {\n    if (!options || options.length === 0) {\n      return [];\n    }\n\n    // Check if first item is a group\n    const firstItem = options[0];\n    if (firstItem && 'options' in firstItem) {\n      return (options as SelectOptionGroup[]).flatMap((group) => group.options);\n    }\n\n    return options as SelectOption[];\n  }\n}\n","<div class=\"lc-select-wrapper\">\n  <div\n    #selectTrigger\n    [class]=\"selectClasses()\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"isOpen() ? 'true' : 'false'\"\n    [attr.aria-controls]=\"isOpen() ? listboxId : null\"\n    [attr.aria-activedescendant]=\"activeDescendantId()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-required]=\"required() ? 'true' : null\"\n    [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n    [attr.aria-invalid]=\"error() ? 'true' : null\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    (click)=\"toggle()\"\n    (keydown)=\"onKeyDown($event)\"\n    (blur)=\"onBlur()\"\n  >\n    <div class=\"lc-select__value\">\n      <span [class.lc-select__placeholder]=\"!selectedLabel()\">\n        {{ displayValue() }}\n      </span>\n    </div>\n\n    <div class=\"lc-select__icons\">\n      @if (loading()) {\n        <svg\n          class=\"lc-select__spinner\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          aria-hidden=\"true\"\n        >\n          <circle\n            class=\"opacity-25\"\n            cx=\"12\"\n            cy=\"12\"\n            r=\"10\"\n            stroke=\"currentColor\"\n            stroke-width=\"4\"\n          ></circle>\n          <path\n            class=\"opacity-75\"\n            fill=\"currentColor\"\n            d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n          ></path>\n        </svg>\n      } @else if (value() && !isDisabled() && !multiple()) {\n        <button\n          type=\"button\"\n          class=\"lc-select__clear\"\n          (click)=\"clear(); $event.stopPropagation()\"\n          [attr.aria-label]=\"clearAriaLabel()\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\"\n            />\n          </svg>\n        </button>\n      }\n\n      <svg\n        class=\"lc-select__chevron\"\n        [class.lc-select__chevron--open]=\"isOpen()\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 20 20\"\n        fill=\"currentColor\"\n        aria-hidden=\"true\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z\"\n          clip-rule=\"evenodd\"\n        />\n      </svg>\n    </div>\n  </div>\n\n  <!-- Dropdown Panel -->\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectTrigger\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n    (backdropClick)=\"onClickOutside()\"\n    (detach)=\"close()\"\n  >\n    <div\n      #dropdownPanel\n      class=\"lc-select__dropdown\"\n      [class.lc-select__dropdown--open]=\"isOpen()\"\n      [attr.lang]=\"panelLang()\"\n    >\n      @if (searchable()) {\n        <div class=\"lc-select__search\">\n          <input\n            type=\"text\"\n            class=\"lc-select__search-input\"\n            [placeholder]=\"searchPlaceholder()\"\n            aria-autocomplete=\"list\"\n            [attr.aria-controls]=\"listboxId\"\n            [attr.aria-activedescendant]=\"activeDescendantId()\"\n            [attr.aria-label]=\"searchAriaLabel() || (ariaLabel() ? 'Search ' + ariaLabel() : 'Search options')\"\n            [(ngModel)]=\"searchQuery\"\n            (keydown)=\"onKeyDown($event)\"\n            (click)=\"$event.stopPropagation()\"\n          />\n        </div>\n      }\n\n      <div\n        class=\"lc-select__options\"\n        role=\"listbox\"\n        [id]=\"listboxId\"\n        [attr.aria-label]=\"ariaLabel() || null\"\n        [attr.aria-multiselectable]=\"multiple() ? 'true' : null\"\n      >\n        @if (filteredOptions().length === 0) {\n          <div\n            class=\"lc-select__option lc-select__option--no-results\"\n            role=\"option\"\n            aria-disabled=\"true\"\n            aria-selected=\"false\"\n          >\n            {{ noOptionsLabel() }}\n          </div>\n        } @else {\n          @for (option of filteredOptions(); track option.value; let i = $index) {\n            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- listbox option: focus stays on the trigger/search, keyboard selection via aria-activedescendant -->\n            <div\n              class=\"lc-select__option\"\n              role=\"option\"\n              [id]=\"optionId(i)\"\n              [attr.aria-selected]=\"isSelected(option) ? 'true' : 'false'\"\n              [attr.aria-disabled]=\"option.disabled ? 'true' : null\"\n              [class.lc-select__option--selected]=\"isSelected(option)\"\n              [class.lc-select__option--highlighted]=\"highlightedIndex() === i\"\n              [class.lc-select__option--disabled]=\"option.disabled\"\n              (click)=\"selectOption(option)\"\n              (mouseenter)=\"highlightedIndex.set(i)\"\n            >\n              @if (multiple()) {\n                <!-- Purely visual: the option itself carries the selected state (role=option\n                     + aria-selected); the checkbox is inert so clicks land on the option. -->\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"isSelected(option)\"\n                  [disabled]=\"option.disabled\"\n                  class=\"lc-select__checkbox\"\n                  tabindex=\"-1\"\n                  aria-hidden=\"true\"\n                />\n              }\n              <span class=\"lc-select__option-label\">{{ option.label }}</span>\n              @if (isSelected(option) && !multiple()) {\n                <svg\n                  class=\"lc-select__check\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 20 20\"\n                  fill=\"currentColor\"\n                  aria-hidden=\"true\"\n                >\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              }\n            </div>\n          }\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <!-- Helper/Error Text -->\n  @if (error() && errorMessage()) {\n    <div class=\"lc-select__error\" [id]=\"selectId + '-error'\" role=\"alert\">\n      {{ errorMessage() }}\n    </div>\n  } @else if (helperText()) {\n    <div class=\"lc-select__helper\" [id]=\"selectId + '-helper'\">\n      {{ helperText() }}\n    </div>\n  }\n</div>\n"],"mappings":"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"}

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

@@ -50,6 +50,7 @@ var SidenavComponent = class SidenavComponent {
 	collapseAriaLabel = input("", ...ngDevMode ? [{ debugName: "collapseAriaLabel" }] : /* istanbul ignore next */ []);
 	collapseTitle = input("Collapse sidebar", ...ngDevMode ? [{ debugName: "collapseTitle" }] : /* istanbul ignore next */ []);
 	closeAriaLabel = input("Close navigation", ...ngDevMode ? [{ debugName: "closeAriaLabel" }] : /* istanbul ignore next */ []);
+	badgeAriaLabel = input("{value}", ...ngDevMode ? [{ debugName: "badgeAriaLabel" }] : /* istanbul ignore next */ []);
 	expandedItems = signal(/* @__PURE__ */ new Set(), ...ngDevMode ? [{ debugName: "expandedItems" }] : /* istanbul ignore next */ []);
 	activeChildParents = computed(() => currentItemParents(this.items(), this.currentItem()), ...ngDevMode ? [{ debugName: "activeChildParents" }] : /* istanbul ignore next */ []);
 	sortedItems = computed(() => sortNavigationItems(this.items()), ...ngDevMode ? [{ debugName: "sortedItems" }] : /* istanbul ignore next */ []);
@@ -100,6 +101,11 @@ var SidenavComponent = class SidenavComponent {
 	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 */ []);
+	badgeText(item) {
+		if (!item.badge) return "";
+		const text = this.badgeAriaLabel().replace("{value}", String(item.badge.value));
+		return this.isRail() ? `${item.label} ${text}` : text;
+	}
 	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";
@@ -364,6 +370,13 @@ var SidenavComponent = class SidenavComponent {
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
+			},
+			badgeAriaLabel: {
+				classPropertyName: "badgeAriaLabel",
+				publicName: "badgeAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
 			}
 		},
 		outputs: {
@@ -383,7 +396,7 @@ var SidenavComponent = class SidenavComponent {
 			}
 		},
 		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    <!-- 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",
+		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 aria-hidden=\"true\" [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>&ngsp;<span class=\"lc-sidenav__sr-only\">{{ badgeText(child) }}</span>\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 aria-hidden=\"true\" [variant]=\"grandchild.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ grandchild.badge.value }}</lc-badge>&ngsp;<span class=\"lc-sidenav__sr-only\">{{ badgeText(grandchild) }}</span>\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 aria-hidden=\"true\" [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>&ngsp;<span class=\"lc-sidenav__sr-only\">{{ badgeText(child) }}</span>\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 aria-hidden=\"true\" [variant]=\"item.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ item.badge.value }}</lc-badge>&ngsp;<span class=\"lc-sidenav__sr-only\">{{ badgeText(item) }}</span>\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 aria-hidden=\"true\" [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>&ngsp;<span class=\"lc-sidenav__sr-only\">{{ badgeText(child) }}</span>\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 aria-hidden=\"true\" [variant]=\"item.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ item.badge.value }}</lc-badge>&ngsp;<span class=\"lc-sidenav__sr-only\">{{ badgeText(item) }}</span>\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-t-bg: var(--color-sidebar, var(--color-surface));--_lc-sidenav-t-fg: var(--color-text-secondary);--_lc-sidenav-t-fg-active: var(--color-text-primary);--_lc-sidenav-t-border: var(--color-border);--_lc-sidenav-t-hover-bg: var(--color-surface-hover);--_lc-sidenav-t-section-fg: var(--color-text-tertiary);--_lc-sidenav-t-active-bg: var(--color-surface-selected);--_lc-sidenav-t-active-fg: var(--color-on-surface-selected, var(--color-link));--_lc-sidenav-t-active-icon: var(--color-on-surface-selected, var(--color-link));--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, var(--_lc-sidenav-t-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, var(--_lc-sidenav-t-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, var(--lc-sidenav-bg, var(--_lc-sidenav-t-bg)));box-shadow:0 0 0 2px var(--lc-sidenav-badge-ring, var(--lc-sidenav-bg, var(--_lc-sidenav-t-bg)));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, var(--_lc-sidenav-t-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, var(--_lc-sidenav-t-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, var(--_lc-sidenav-t-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, var(--_lc-sidenav-t-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, var(--_lc-sidenav-t-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, var(--_lc-sidenav-t-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, var(--_lc-sidenav-t-hover-bg));color:var(--lc-sidenav-fg-active, var(--_lc-sidenav-t-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, var(--_lc-sidenav-t-active-bg));color:var(--lc-sidenav-active-fg, var(--_lc-sidenav-t-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, var(--_lc-sidenav-t-active-icon))}.lc-sidenav__nav-item--active:hover,.lc-sidenav__nav-item[aria-current=page]:hover{background-color:var(--lc-sidenav-active-bg, var(--_lc-sidenav-t-active-bg));color:var(--lc-sidenav-active-fg, var(--_lc-sidenav-t-active-fg))}.lc-sidenav__nav-item--has-active-child{color:var(--lc-sidenav-fg-active, var(--_lc-sidenav-t-fg-active));font-weight:600}.lc-sidenav__nav-item--has-active-child .lc-sidenav__nav-icon{color:var(--lc-sidenav-fg-active, var(--_lc-sidenav-t-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, var(--_lc-sidenav-t-section-fg));cursor:pointer;transition:background-color .15s ease,color .15s ease}.lc-sidenav__action-btn:hover{background-color:var(--lc-sidenav-hover-bg, var(--_lc-sidenav-t-hover-bg));color:var(--lc-sidenav-fg-active, var(--_lc-sidenav-t-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, var(--_lc-sidenav-t-fg-active));text-decoration:none;transition:background-color .2s ease}.lc-sidenav__brand:hover{background-color:var(--lc-sidenav-hover-bg, var(--_lc-sidenav-t-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, var(--_lc-sidenav-t-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, var(--_lc-sidenav-t-fg));cursor:pointer;transition:background-color .2s ease,color .2s ease}.lc-sidenav__collapse-toggle:hover{background-color:var(--lc-sidenav-hover-bg, var(--_lc-sidenav-t-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: [
 			{
@@ -519,7 +532,7 @@ i0.ɵɵngDeclareClassMetadata({
 				"[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    <!-- 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",
+			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 aria-hidden=\"true\" [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>&ngsp;<span class=\"lc-sidenav__sr-only\">{{ badgeText(child) }}</span>\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 aria-hidden=\"true\" [variant]=\"grandchild.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ grandchild.badge.value }}</lc-badge>&ngsp;<span class=\"lc-sidenav__sr-only\">{{ badgeText(grandchild) }}</span>\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 aria-hidden=\"true\" [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>&ngsp;<span class=\"lc-sidenav__sr-only\">{{ badgeText(child) }}</span>\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 aria-hidden=\"true\" [variant]=\"item.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ item.badge.value }}</lc-badge>&ngsp;<span class=\"lc-sidenav__sr-only\">{{ badgeText(item) }}</span>\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 aria-hidden=\"true\" [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>&ngsp;<span class=\"lc-sidenav__sr-only\">{{ badgeText(child) }}</span>\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 aria-hidden=\"true\" [variant]=\"item.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ item.badge.value }}</lc-badge>&ngsp;<span class=\"lc-sidenav__sr-only\">{{ badgeText(item) }}</span>\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-t-bg: var(--color-sidebar, var(--color-surface));--_lc-sidenav-t-fg: var(--color-text-secondary);--_lc-sidenav-t-fg-active: var(--color-text-primary);--_lc-sidenav-t-border: var(--color-border);--_lc-sidenav-t-hover-bg: var(--color-surface-hover);--_lc-sidenav-t-section-fg: var(--color-text-tertiary);--_lc-sidenav-t-active-bg: var(--color-surface-selected);--_lc-sidenav-t-active-fg: var(--color-on-surface-selected, var(--color-link));--_lc-sidenav-t-active-icon: var(--color-on-surface-selected, var(--color-link));--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, var(--_lc-sidenav-t-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, var(--_lc-sidenav-t-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, var(--lc-sidenav-bg, var(--_lc-sidenav-t-bg)));box-shadow:0 0 0 2px var(--lc-sidenav-badge-ring, var(--lc-sidenav-bg, var(--_lc-sidenav-t-bg)));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, var(--_lc-sidenav-t-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, var(--_lc-sidenav-t-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, var(--_lc-sidenav-t-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, var(--_lc-sidenav-t-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, var(--_lc-sidenav-t-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, var(--_lc-sidenav-t-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, var(--_lc-sidenav-t-hover-bg));color:var(--lc-sidenav-fg-active, var(--_lc-sidenav-t-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, var(--_lc-sidenav-t-active-bg));color:var(--lc-sidenav-active-fg, var(--_lc-sidenav-t-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, var(--_lc-sidenav-t-active-icon))}.lc-sidenav__nav-item--active:hover,.lc-sidenav__nav-item[aria-current=page]:hover{background-color:var(--lc-sidenav-active-bg, var(--_lc-sidenav-t-active-bg));color:var(--lc-sidenav-active-fg, var(--_lc-sidenav-t-active-fg))}.lc-sidenav__nav-item--has-active-child{color:var(--lc-sidenav-fg-active, var(--_lc-sidenav-t-fg-active));font-weight:600}.lc-sidenav__nav-item--has-active-child .lc-sidenav__nav-icon{color:var(--lc-sidenav-fg-active, var(--_lc-sidenav-t-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, var(--_lc-sidenav-t-section-fg));cursor:pointer;transition:background-color .15s ease,color .15s ease}.lc-sidenav__action-btn:hover{background-color:var(--lc-sidenav-hover-bg, var(--_lc-sidenav-t-hover-bg));color:var(--lc-sidenav-fg-active, var(--_lc-sidenav-t-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, var(--_lc-sidenav-t-fg-active));text-decoration:none;transition:background-color .2s ease}.lc-sidenav__brand:hover{background-color:var(--lc-sidenav-hover-bg, var(--_lc-sidenav-t-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, var(--_lc-sidenav-t-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, var(--_lc-sidenav-t-fg));cursor:pointer;transition:background-color .2s ease,color .2s ease}.lc-sidenav__collapse-toggle:hover{background-color:var(--lc-sidenav-hover-bg, var(--_lc-sidenav-t-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"]
 		}]
 	}],
@@ -760,6 +773,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		badgeAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "badgeAriaLabel",
+				required: false
+			}]
+		}],
 		closed: [{
 			type: i0.Output,
 			args: ["closed"]