@life-cockpit/angular-ui-kit 1.1.0 → 1.1.1

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

@@ -1079,6 +1079,11 @@ class MenuComponent {
      * @default 'bottom-right'
      */
     position = 'bottom-right';
+    /**
+     * Size of menu items
+     * @default 'md'
+     */
+    size = 'md';
     /**
      * Minimum width of menu dropdown
      * @default '220px'
@@ -1142,17 +1147,19 @@ class MenuComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: MenuComponent, isStandalone: true, selector: "lc-menu", inputs: { items: "items", isOpen: "isOpen", position: "position", minWidth: "minWidth" }, outputs: { itemClick: "itemClick", closed: "closed" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscapeKey()" } }, ngImport: i0, template: "<div class=\"lc-menu\">\n  <!-- Trigger slot -->\n  <div class=\"lc-menu__trigger\">\n    <ng-content select=\"[trigger]\" />\n  </div>\n\n  <!-- Dropdown menu -->\n  @if (isOpen) {\n    <div \n      class=\"lc-menu__dropdown\"\n      [class.lc-menu__dropdown--bottom-left]=\"position === 'bottom-left'\"\n      [class.lc-menu__dropdown--bottom-right]=\"position === 'bottom-right'\"\n      [class.lc-menu__dropdown--top-left]=\"position === 'top-left'\"\n      [class.lc-menu__dropdown--top-right]=\"position === 'top-right'\"\n      [style.min-width]=\"minWidth\"\n    >\n      <!-- Optional header slot -->\n      <ng-content select=\"[header]\" />\n\n      <!-- Menu items -->\n      @for (item of items; track item.id) {\n        @if (item.href) {\n          <!-- Link item -->\n          <a\n            [href]=\"item.href\"\n            [target]=\"item.target || '_self'\"\n            [attr.rel]=\"item.target === '_blank' ? 'noopener noreferrer' : null\"\n            class=\"lc-menu__item\"\n            [class.lc-menu__item--danger]=\"item.variant === 'danger'\"\n            [class.lc-menu__item--disabled]=\"item.disabled\"\n            (click)=\"onItemClick(item, $event)\"\n          >\n            @if (item.icon) {\n              <lc-icon [name]=\"item.icon\" [size]=\"item.iconSize || 'sm'\" />\n            }\n            <span class=\"lc-menu__item-content\">\n              <span class=\"lc-menu__item-label\">{{ item.label }}</span>\n              @if (item.metadata?.subtitle) {\n                <span class=\"lc-menu__item-subtitle\">{{ item.metadata?.subtitle }}</span>\n              }\n            </span>\n            @if (item.metadata?.badge) {\n              <span class=\"lc-menu__item-badge\">{{ item.metadata?.badge }}</span>\n            }\n          </a>\n        } @else {\n          <!-- Button item -->\n          <button\n            type=\"button\"\n            class=\"lc-menu__item\"\n            [class.lc-menu__item--danger]=\"item.variant === 'danger'\"\n            [class.lc-menu__item--disabled]=\"item.disabled\"\n            [disabled]=\"item.disabled\"\n            (click)=\"onItemClick(item, $event)\"\n          >\n            @if (item.icon) {\n              <lc-icon [name]=\"item.icon\" [size]=\"item.iconSize || 'sm'\" />\n            }\n            <span class=\"lc-menu__item-content\">\n              <span class=\"lc-menu__item-label\">{{ item.label }}</span>\n              @if (item.metadata?.subtitle) {\n                <span class=\"lc-menu__item-subtitle\">{{ item.metadata?.subtitle }}</span>\n              }\n            </span>\n            @if (item.metadata?.badge) {\n              <span class=\"lc-menu__item-badge\">{{ item.metadata?.badge }}</span>\n            }\n          </button>\n        }\n\n        @if (item.dividerAfter) {\n          <hr class=\"lc-menu__divider\" />\n        }\n      }\n\n      <!-- Optional footer slot -->\n      <ng-content select=\"[footer]\" />\n    </div>\n  }\n</div>\n", styles: [".lc-menu{position:relative;display:inline-block}.lc-menu__trigger{display:inline-block}.lc-menu__dropdown{position:absolute;background-color:var(--color-neutral-0, #ffffff);border:1px solid var(--color-neutral-200, #e5e7eb);border-radius:var(--radius-lg, .5rem);box-shadow:var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1));padding:var(--spacing-2, .5rem) 0;z-index:1000;animation:slideDown .15s ease-out}.lc-menu__dropdown--bottom-left{top:calc(100% + var(--spacing-2));left:0}.lc-menu__dropdown--bottom-right{top:calc(100% + var(--spacing-2));right:0}.lc-menu__dropdown--top-left{bottom:calc(100% + var(--spacing-2));left:0}.lc-menu__dropdown--top-right{bottom:calc(100% + var(--spacing-2));right:0}.lc-menu__item{display:flex;align-items:center;gap:var(--spacing-3);width:100%;padding:var(--spacing-3) var(--spacing-4);background:transparent;border:none;text-align:left;text-decoration:none;color:var(--color-neutral-900);font-size:var(--font-size-base);font-family:var(--font-family-base);cursor:pointer;transition:background-color .2s ease}.lc-menu__item:hover:not(.lc-menu__item--disabled){background-color:var(--color-neutral-100)}.lc-menu__item:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:-2px;background-color:var(--color-neutral-100)}.lc-menu__item--danger{color:var(--color-danger-600)}.lc-menu__item--danger:hover:not(.lc-menu__item--danger--disabled){background-color:var(--color-danger-50)}.lc-menu__item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.lc-menu__item-content{display:flex;flex-direction:column;gap:var(--spacing-1);flex:1}.lc-menu__item-label{font-size:var(--font-size-base);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight)}.lc-menu__item-subtitle{font-size:var(--font-size-sm);color:var(--color-neutral-600);line-height:var(--line-height-tight)}.lc-menu__item-badge{padding:var(--spacing-1) var(--spacing-2);background-color:var(--color-primary-100);color:var(--color-primary-700);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);border-radius:var(--radius-full);line-height:1}.lc-menu__divider{margin:var(--spacing-2) 0;border:none;border-top:1px solid var(--color-neutral-200)}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}:host-context(.dark) .lc-menu__dropdown{background-color:#27272a!important;border-color:#3f3f46!important}:host-context(.dark) .lc-menu__item{color:#f5f5f5}:host-context(.dark) .lc-menu__item:hover:not(:host-context(.dark) .lc-menu__item--disabled){background-color:#3f3f46}:host-context(.dark) .lc-menu__item:focus-visible{background-color:#3f3f46}:host-context(.dark) .lc-menu__item--danger{color:#f87171}:host-context(.dark) .lc-menu__item--danger:hover:not(:host-context(.dark) .lc-menu__item--danger--disabled){background-color:#450a0a}:host-context(.dark) .lc-menu__item-subtitle{color:#a1a1aa}:host-context(.dark) .lc-menu__divider{border-top-color:#3f3f46}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: MenuComponent, isStandalone: true, selector: "lc-menu", inputs: { items: "items", isOpen: "isOpen", position: "position", size: "size", minWidth: "minWidth" }, outputs: { itemClick: "itemClick", closed: "closed" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscapeKey()" } }, ngImport: i0, template: "<div class=\"lc-menu\">\n  <!-- Trigger slot -->\n  <div class=\"lc-menu__trigger\">\n    <ng-content select=\"[trigger]\" />\n  </div>\n\n  <!-- Dropdown menu -->\n  @if (isOpen) {\n    <div \n      class=\"lc-menu__dropdown\"\n      [class.lc-menu__dropdown--bottom-left]=\"position === 'bottom-left'\"\n      [class.lc-menu__dropdown--bottom-right]=\"position === 'bottom-right'\"\n      [class.lc-menu__dropdown--top-left]=\"position === 'top-left'\"\n      [class.lc-menu__dropdown--top-right]=\"position === 'top-right'\"\n      [class.lc-menu__dropdown--sm]=\"size === 'sm'\"\n      [class.lc-menu__dropdown--lg]=\"size === 'lg'\"\n      [style.min-width]=\"minWidth\"\n    >\n      <!-- Optional header slot -->\n      <ng-content select=\"[header]\" />\n\n      <!-- Menu items -->\n      @for (item of items; track item.id) {\n        @if (item.href) {\n          <!-- Link item -->\n          <a\n            [href]=\"item.href\"\n            [target]=\"item.target || '_self'\"\n            [attr.rel]=\"item.target === '_blank' ? 'noopener noreferrer' : null\"\n            class=\"lc-menu__item\"\n            [class.lc-menu__item--danger]=\"item.variant === 'danger'\"\n            [class.lc-menu__item--disabled]=\"item.disabled\"\n            (click)=\"onItemClick(item, $event)\"\n          >\n            @if (item.icon) {\n              <lc-icon [name]=\"item.icon\" [size]=\"item.iconSize || 'sm'\" />\n            }\n            <span class=\"lc-menu__item-content\">\n              <span class=\"lc-menu__item-label\">{{ item.label }}</span>\n              @if (item.metadata?.subtitle) {\n                <span class=\"lc-menu__item-subtitle\">{{ item.metadata?.subtitle }}</span>\n              }\n            </span>\n            @if (item.metadata?.badge) {\n              <span class=\"lc-menu__item-badge\">{{ item.metadata?.badge }}</span>\n            }\n          </a>\n        } @else {\n          <!-- Button item -->\n          <button\n            type=\"button\"\n            class=\"lc-menu__item\"\n            [class.lc-menu__item--danger]=\"item.variant === 'danger'\"\n            [class.lc-menu__item--disabled]=\"item.disabled\"\n            [disabled]=\"item.disabled\"\n            (click)=\"onItemClick(item, $event)\"\n          >\n            @if (item.icon) {\n              <lc-icon [name]=\"item.icon\" [size]=\"item.iconSize || 'sm'\" />\n            }\n            <span class=\"lc-menu__item-content\">\n              <span class=\"lc-menu__item-label\">{{ item.label }}</span>\n              @if (item.metadata?.subtitle) {\n                <span class=\"lc-menu__item-subtitle\">{{ item.metadata?.subtitle }}</span>\n              }\n            </span>\n            @if (item.metadata?.badge) {\n              <span class=\"lc-menu__item-badge\">{{ item.metadata?.badge }}</span>\n            }\n          </button>\n        }\n\n        @if (item.dividerAfter) {\n          <hr class=\"lc-menu__divider\" />\n        }\n      }\n\n      <!-- Optional footer slot -->\n      <ng-content select=\"[footer]\" />\n    </div>\n  }\n</div>\n", styles: [".lc-menu{position:relative;display:inline-block}.lc-menu__trigger{display:inline-block}.lc-menu__dropdown{position:absolute;background-color:var(--color-neutral-0, #ffffff);border:1px solid var(--color-neutral-200, #e5e7eb);border-radius:var(--radius-lg, .5rem);box-shadow:var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1));padding:var(--spacing-2, .5rem) 0;z-index:9999;animation:slideDown .15s ease-out}.lc-menu__dropdown--bottom-left{top:calc(100% + var(--spacing-2));left:0}.lc-menu__dropdown--bottom-right{top:calc(100% + var(--spacing-2));right:0}.lc-menu__dropdown--top-left{bottom:calc(100% + var(--spacing-2));left:0}.lc-menu__dropdown--top-right{bottom:calc(100% + var(--spacing-2));right:0}.lc-menu__item{display:flex;align-items:center;gap:var(--spacing-3);width:100%;padding:var(--spacing-3) var(--spacing-4);background:transparent;border:none;text-align:left;text-decoration:none;color:var(--color-neutral-900);font-size:var(--font-size-base);font-family:var(--font-family-base);cursor:pointer;transition:background-color .2s ease}.lc-menu__item:hover:not(.lc-menu__item--disabled){background-color:var(--color-neutral-100)}.lc-menu__item:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:-2px;background-color:var(--color-neutral-100)}.lc-menu__item--danger{color:var(--color-danger-600)}.lc-menu__item--danger:hover:not(.lc-menu__item--danger--disabled){background-color:var(--color-danger-50)}.lc-menu__item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.lc-menu__item-content{display:flex;flex-direction:column;gap:var(--spacing-1);flex:1}.lc-menu__item-label{font-size:var(--font-size-base);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight)}.lc-menu__item-subtitle{font-size:var(--font-size-sm);color:var(--color-neutral-600);line-height:var(--line-height-tight)}.lc-menu__item-badge{padding:var(--spacing-1) var(--spacing-2);background-color:var(--color-primary-100);color:var(--color-primary-700);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);border-radius:var(--radius-full);line-height:1}.lc-menu__divider{margin:var(--spacing-2) 0;border:none;border-top:1px solid var(--color-neutral-200)}.lc-menu__dropdown--sm{padding:var(--spacing-1, .25rem) 0}.lc-menu__dropdown--sm .lc-menu__item{gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm)}.lc-menu__dropdown--sm .lc-menu__item-label{font-size:var(--font-size-sm)}.lc-menu__dropdown--sm .lc-menu__item-subtitle{font-size:var(--font-size-xs)}.lc-menu__dropdown--sm .lc-menu__item-badge{font-size:.625rem;padding:1px var(--spacing-1)}.lc-menu__dropdown--sm .lc-menu__divider{margin:var(--spacing-1) 0}.lc-menu__dropdown--lg .lc-menu__item{gap:var(--spacing-4);padding:var(--spacing-4) var(--spacing-5);font-size:var(--font-size-lg)}.lc-menu__dropdown--lg .lc-menu__item-label{font-size:var(--font-size-lg)}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}:host-context(.dark) .lc-menu__dropdown{background-color:#27272a!important;border-color:#3f3f46!important}:host-context(.dark) .lc-menu__item{color:#f5f5f5}:host-context(.dark) .lc-menu__item:hover:not(:host-context(.dark) .lc-menu__item--disabled){background-color:#3f3f46}:host-context(.dark) .lc-menu__item:focus-visible{background-color:#3f3f46}:host-context(.dark) .lc-menu__item--danger{color:#f87171}:host-context(.dark) .lc-menu__item--danger:hover:not(:host-context(.dark) .lc-menu__item--danger--disabled){background-color:#450a0a}:host-context(.dark) .lc-menu__item-subtitle{color:#a1a1aa}:host-context(.dark) .lc-menu__divider{border-top-color:#3f3f46}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lc-menu', standalone: true, imports: [CommonModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-menu\">\n  <!-- Trigger slot -->\n  <div class=\"lc-menu__trigger\">\n    <ng-content select=\"[trigger]\" />\n  </div>\n\n  <!-- Dropdown menu -->\n  @if (isOpen) {\n    <div \n      class=\"lc-menu__dropdown\"\n      [class.lc-menu__dropdown--bottom-left]=\"position === 'bottom-left'\"\n      [class.lc-menu__dropdown--bottom-right]=\"position === 'bottom-right'\"\n      [class.lc-menu__dropdown--top-left]=\"position === 'top-left'\"\n      [class.lc-menu__dropdown--top-right]=\"position === 'top-right'\"\n      [style.min-width]=\"minWidth\"\n    >\n      <!-- Optional header slot -->\n      <ng-content select=\"[header]\" />\n\n      <!-- Menu items -->\n      @for (item of items; track item.id) {\n        @if (item.href) {\n          <!-- Link item -->\n          <a\n            [href]=\"item.href\"\n            [target]=\"item.target || '_self'\"\n            [attr.rel]=\"item.target === '_blank' ? 'noopener noreferrer' : null\"\n            class=\"lc-menu__item\"\n            [class.lc-menu__item--danger]=\"item.variant === 'danger'\"\n            [class.lc-menu__item--disabled]=\"item.disabled\"\n            (click)=\"onItemClick(item, $event)\"\n          >\n            @if (item.icon) {\n              <lc-icon [name]=\"item.icon\" [size]=\"item.iconSize || 'sm'\" />\n            }\n            <span class=\"lc-menu__item-content\">\n              <span class=\"lc-menu__item-label\">{{ item.label }}</span>\n              @if (item.metadata?.subtitle) {\n                <span class=\"lc-menu__item-subtitle\">{{ item.metadata?.subtitle }}</span>\n              }\n            </span>\n            @if (item.metadata?.badge) {\n              <span class=\"lc-menu__item-badge\">{{ item.metadata?.badge }}</span>\n            }\n          </a>\n        } @else {\n          <!-- Button item -->\n          <button\n            type=\"button\"\n            class=\"lc-menu__item\"\n            [class.lc-menu__item--danger]=\"item.variant === 'danger'\"\n            [class.lc-menu__item--disabled]=\"item.disabled\"\n            [disabled]=\"item.disabled\"\n            (click)=\"onItemClick(item, $event)\"\n          >\n            @if (item.icon) {\n              <lc-icon [name]=\"item.icon\" [size]=\"item.iconSize || 'sm'\" />\n            }\n            <span class=\"lc-menu__item-content\">\n              <span class=\"lc-menu__item-label\">{{ item.label }}</span>\n              @if (item.metadata?.subtitle) {\n                <span class=\"lc-menu__item-subtitle\">{{ item.metadata?.subtitle }}</span>\n              }\n            </span>\n            @if (item.metadata?.badge) {\n              <span class=\"lc-menu__item-badge\">{{ item.metadata?.badge }}</span>\n            }\n          </button>\n        }\n\n        @if (item.dividerAfter) {\n          <hr class=\"lc-menu__divider\" />\n        }\n      }\n\n      <!-- Optional footer slot -->\n      <ng-content select=\"[footer]\" />\n    </div>\n  }\n</div>\n", styles: [".lc-menu{position:relative;display:inline-block}.lc-menu__trigger{display:inline-block}.lc-menu__dropdown{position:absolute;background-color:var(--color-neutral-0, #ffffff);border:1px solid var(--color-neutral-200, #e5e7eb);border-radius:var(--radius-lg, .5rem);box-shadow:var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1));padding:var(--spacing-2, .5rem) 0;z-index:1000;animation:slideDown .15s ease-out}.lc-menu__dropdown--bottom-left{top:calc(100% + var(--spacing-2));left:0}.lc-menu__dropdown--bottom-right{top:calc(100% + var(--spacing-2));right:0}.lc-menu__dropdown--top-left{bottom:calc(100% + var(--spacing-2));left:0}.lc-menu__dropdown--top-right{bottom:calc(100% + var(--spacing-2));right:0}.lc-menu__item{display:flex;align-items:center;gap:var(--spacing-3);width:100%;padding:var(--spacing-3) var(--spacing-4);background:transparent;border:none;text-align:left;text-decoration:none;color:var(--color-neutral-900);font-size:var(--font-size-base);font-family:var(--font-family-base);cursor:pointer;transition:background-color .2s ease}.lc-menu__item:hover:not(.lc-menu__item--disabled){background-color:var(--color-neutral-100)}.lc-menu__item:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:-2px;background-color:var(--color-neutral-100)}.lc-menu__item--danger{color:var(--color-danger-600)}.lc-menu__item--danger:hover:not(.lc-menu__item--danger--disabled){background-color:var(--color-danger-50)}.lc-menu__item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.lc-menu__item-content{display:flex;flex-direction:column;gap:var(--spacing-1);flex:1}.lc-menu__item-label{font-size:var(--font-size-base);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight)}.lc-menu__item-subtitle{font-size:var(--font-size-sm);color:var(--color-neutral-600);line-height:var(--line-height-tight)}.lc-menu__item-badge{padding:var(--spacing-1) var(--spacing-2);background-color:var(--color-primary-100);color:var(--color-primary-700);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);border-radius:var(--radius-full);line-height:1}.lc-menu__divider{margin:var(--spacing-2) 0;border:none;border-top:1px solid var(--color-neutral-200)}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}:host-context(.dark) .lc-menu__dropdown{background-color:#27272a!important;border-color:#3f3f46!important}:host-context(.dark) .lc-menu__item{color:#f5f5f5}:host-context(.dark) .lc-menu__item:hover:not(:host-context(.dark) .lc-menu__item--disabled){background-color:#3f3f46}:host-context(.dark) .lc-menu__item:focus-visible{background-color:#3f3f46}:host-context(.dark) .lc-menu__item--danger{color:#f87171}:host-context(.dark) .lc-menu__item--danger:hover:not(:host-context(.dark) .lc-menu__item--danger--disabled){background-color:#450a0a}:host-context(.dark) .lc-menu__item-subtitle{color:#a1a1aa}:host-context(.dark) .lc-menu__divider{border-top-color:#3f3f46}\n"] }]
+            args: [{ selector: 'lc-menu', standalone: true, imports: [CommonModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-menu\">\n  <!-- Trigger slot -->\n  <div class=\"lc-menu__trigger\">\n    <ng-content select=\"[trigger]\" />\n  </div>\n\n  <!-- Dropdown menu -->\n  @if (isOpen) {\n    <div \n      class=\"lc-menu__dropdown\"\n      [class.lc-menu__dropdown--bottom-left]=\"position === 'bottom-left'\"\n      [class.lc-menu__dropdown--bottom-right]=\"position === 'bottom-right'\"\n      [class.lc-menu__dropdown--top-left]=\"position === 'top-left'\"\n      [class.lc-menu__dropdown--top-right]=\"position === 'top-right'\"\n      [class.lc-menu__dropdown--sm]=\"size === 'sm'\"\n      [class.lc-menu__dropdown--lg]=\"size === 'lg'\"\n      [style.min-width]=\"minWidth\"\n    >\n      <!-- Optional header slot -->\n      <ng-content select=\"[header]\" />\n\n      <!-- Menu items -->\n      @for (item of items; track item.id) {\n        @if (item.href) {\n          <!-- Link item -->\n          <a\n            [href]=\"item.href\"\n            [target]=\"item.target || '_self'\"\n            [attr.rel]=\"item.target === '_blank' ? 'noopener noreferrer' : null\"\n            class=\"lc-menu__item\"\n            [class.lc-menu__item--danger]=\"item.variant === 'danger'\"\n            [class.lc-menu__item--disabled]=\"item.disabled\"\n            (click)=\"onItemClick(item, $event)\"\n          >\n            @if (item.icon) {\n              <lc-icon [name]=\"item.icon\" [size]=\"item.iconSize || 'sm'\" />\n            }\n            <span class=\"lc-menu__item-content\">\n              <span class=\"lc-menu__item-label\">{{ item.label }}</span>\n              @if (item.metadata?.subtitle) {\n                <span class=\"lc-menu__item-subtitle\">{{ item.metadata?.subtitle }}</span>\n              }\n            </span>\n            @if (item.metadata?.badge) {\n              <span class=\"lc-menu__item-badge\">{{ item.metadata?.badge }}</span>\n            }\n          </a>\n        } @else {\n          <!-- Button item -->\n          <button\n            type=\"button\"\n            class=\"lc-menu__item\"\n            [class.lc-menu__item--danger]=\"item.variant === 'danger'\"\n            [class.lc-menu__item--disabled]=\"item.disabled\"\n            [disabled]=\"item.disabled\"\n            (click)=\"onItemClick(item, $event)\"\n          >\n            @if (item.icon) {\n              <lc-icon [name]=\"item.icon\" [size]=\"item.iconSize || 'sm'\" />\n            }\n            <span class=\"lc-menu__item-content\">\n              <span class=\"lc-menu__item-label\">{{ item.label }}</span>\n              @if (item.metadata?.subtitle) {\n                <span class=\"lc-menu__item-subtitle\">{{ item.metadata?.subtitle }}</span>\n              }\n            </span>\n            @if (item.metadata?.badge) {\n              <span class=\"lc-menu__item-badge\">{{ item.metadata?.badge }}</span>\n            }\n          </button>\n        }\n\n        @if (item.dividerAfter) {\n          <hr class=\"lc-menu__divider\" />\n        }\n      }\n\n      <!-- Optional footer slot -->\n      <ng-content select=\"[footer]\" />\n    </div>\n  }\n</div>\n", styles: [".lc-menu{position:relative;display:inline-block}.lc-menu__trigger{display:inline-block}.lc-menu__dropdown{position:absolute;background-color:var(--color-neutral-0, #ffffff);border:1px solid var(--color-neutral-200, #e5e7eb);border-radius:var(--radius-lg, .5rem);box-shadow:var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1));padding:var(--spacing-2, .5rem) 0;z-index:9999;animation:slideDown .15s ease-out}.lc-menu__dropdown--bottom-left{top:calc(100% + var(--spacing-2));left:0}.lc-menu__dropdown--bottom-right{top:calc(100% + var(--spacing-2));right:0}.lc-menu__dropdown--top-left{bottom:calc(100% + var(--spacing-2));left:0}.lc-menu__dropdown--top-right{bottom:calc(100% + var(--spacing-2));right:0}.lc-menu__item{display:flex;align-items:center;gap:var(--spacing-3);width:100%;padding:var(--spacing-3) var(--spacing-4);background:transparent;border:none;text-align:left;text-decoration:none;color:var(--color-neutral-900);font-size:var(--font-size-base);font-family:var(--font-family-base);cursor:pointer;transition:background-color .2s ease}.lc-menu__item:hover:not(.lc-menu__item--disabled){background-color:var(--color-neutral-100)}.lc-menu__item:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:-2px;background-color:var(--color-neutral-100)}.lc-menu__item--danger{color:var(--color-danger-600)}.lc-menu__item--danger:hover:not(.lc-menu__item--danger--disabled){background-color:var(--color-danger-50)}.lc-menu__item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.lc-menu__item-content{display:flex;flex-direction:column;gap:var(--spacing-1);flex:1}.lc-menu__item-label{font-size:var(--font-size-base);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight)}.lc-menu__item-subtitle{font-size:var(--font-size-sm);color:var(--color-neutral-600);line-height:var(--line-height-tight)}.lc-menu__item-badge{padding:var(--spacing-1) var(--spacing-2);background-color:var(--color-primary-100);color:var(--color-primary-700);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);border-radius:var(--radius-full);line-height:1}.lc-menu__divider{margin:var(--spacing-2) 0;border:none;border-top:1px solid var(--color-neutral-200)}.lc-menu__dropdown--sm{padding:var(--spacing-1, .25rem) 0}.lc-menu__dropdown--sm .lc-menu__item{gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm)}.lc-menu__dropdown--sm .lc-menu__item-label{font-size:var(--font-size-sm)}.lc-menu__dropdown--sm .lc-menu__item-subtitle{font-size:var(--font-size-xs)}.lc-menu__dropdown--sm .lc-menu__item-badge{font-size:.625rem;padding:1px var(--spacing-1)}.lc-menu__dropdown--sm .lc-menu__divider{margin:var(--spacing-1) 0}.lc-menu__dropdown--lg .lc-menu__item{gap:var(--spacing-4);padding:var(--spacing-4) var(--spacing-5);font-size:var(--font-size-lg)}.lc-menu__dropdown--lg .lc-menu__item-label{font-size:var(--font-size-lg)}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}:host-context(.dark) .lc-menu__dropdown{background-color:#27272a!important;border-color:#3f3f46!important}:host-context(.dark) .lc-menu__item{color:#f5f5f5}:host-context(.dark) .lc-menu__item:hover:not(:host-context(.dark) .lc-menu__item--disabled){background-color:#3f3f46}:host-context(.dark) .lc-menu__item:focus-visible{background-color:#3f3f46}:host-context(.dark) .lc-menu__item--danger{color:#f87171}:host-context(.dark) .lc-menu__item--danger:hover:not(:host-context(.dark) .lc-menu__item--danger--disabled){background-color:#450a0a}:host-context(.dark) .lc-menu__item-subtitle{color:#a1a1aa}:host-context(.dark) .lc-menu__divider{border-top-color:#3f3f46}\n"] }]
         }], propDecorators: { items: [{
                 type: Input
             }], isOpen: [{
                 type: Input
             }], position: [{
                 type: Input
+            }], size: [{
+                type: Input
             }], minWidth: [{
                 type: Input
             }], itemClick: [{
@@ -3817,7 +3824,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
  * Hero component for prominent page headers with gradient backgrounds.
  *
  * Features:
- * - Color gradient variants (primary, secondary, success, warning, error, neutral)
+ * - Color gradient variants (primary, secondary, success, warning, info, neutral, accent-orange, accent-purple, accent-violet)
+ * - 3 visual variants: default (dark gradient), slim (compact banner), light (pastel gradient with dark text)
  * - Size options (sm, md, lg)
  * - Optional label text above the title
  * - Configurable border radius
@@ -3826,7 +3834,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
  *
  * @example
  * ```html
- * <lc-hero label="MY APP" title="Welcome" color="primary">
+ * <lc-hero label="MY APP" title="Welcome" color="primary" variant="slim">
  *   <p>Description text</p>
  *   <div hero-footer>Status: Active</div>
  * </lc-hero>
@@ -3856,21 +3864,30 @@ class HeroComponent {
      * @default 'lg'
      */
     borderRadius = input('lg', ...(ngDevMode ? [{ debugName: "borderRadius" }] : /* istanbul ignore next */ []));
+    /**
+     * Visual variant.
+     * - `default`: dark gradient with white text
+     * - `slim`: compact single-line banner
+     * - `light`: softer pastel gradient with dark text
+     * @default 'default'
+     */
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     heroClasses = computed(() => {
         return [
             'hero',
             `hero--${this.color()}`,
             `hero--${this.size()}`,
             `hero--radius-${this.borderRadius()}`,
+            `hero--${this.variant()}`,
         ].join(' ');
     }, ...(ngDevMode ? [{ debugName: "heroClasses" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: HeroComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: HeroComponent, isStandalone: true, selector: "lc-hero", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"heroClasses()\">\n  <div class=\"hero__content\">\n    @if (label()) {\n      <span class=\"hero__label\">{{ label() }}</span>\n    }\n    <h1 class=\"hero__title\">{{ title() }}</h1>\n    <div class=\"hero__body\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n  <ng-content select=\"[hero-footer]\"></ng-content>\n</div>\n", styles: [":host{display:block;width:100%}.hero{position:relative;display:flex;flex-direction:column;justify-content:space-between;color:#fff;overflow:hidden}.hero--primary{background:linear-gradient(135deg,#0d353d,#208497)}.hero--secondary{background:linear-gradient(135deg,#2d3c46,#7097af)}.hero--neutral{background:linear-gradient(135deg,#111827,#4b5563)}.hero--success{background:linear-gradient(135deg,#5f7150,#8ea475)}.hero--info{background:linear-gradient(135deg,#27445c,#3b6588)}.hero--warning{background:linear-gradient(135deg,#9b6b2b,#e1a040)}.hero--accent-orange{background:linear-gradient(135deg,#7a3a10,#df792e)}.hero--accent-purple{background:linear-gradient(135deg,#3a2a52,#866aa0)}.hero--accent-violet{background:linear-gradient(135deg,#221a42,#4e3f84)}.hero--sm{padding:1.5rem 1.25rem}@media(min-width:640px){.hero--sm{padding:2rem}}@media(min-width:1024px){.hero--sm{padding:2.5rem 3rem}}.hero--md{padding:2rem 1.25rem}@media(min-width:640px){.hero--md{padding:2.5rem 2rem}}@media(min-width:1024px){.hero--md{padding:3rem 3.5rem}}.hero--lg{padding:2.5rem 1.25rem}@media(min-width:640px){.hero--lg{padding:3rem 2.5rem}}@media(min-width:1024px){.hero--lg{padding:4rem}}.hero--radius-none{border-radius:0}.hero--radius-sm{border-radius:.25rem}.hero--radius-md{border-radius:.5rem}.hero--radius-lg{border-radius:1rem}.hero__content{flex:1}.hero__label{display:inline-block;font-size:.6875rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;opacity:.8;margin-bottom:.75rem}@media(min-width:640px){.hero__label{font-size:.75rem;margin-bottom:1rem}}.hero__title{margin:0;font-weight:800;line-height:1.1;color:inherit}.hero--sm .hero__title{font-size:1.5rem}@media(min-width:640px){.hero--sm .hero__title{font-size:1.75rem}}@media(min-width:1024px){.hero--sm .hero__title{font-size:2rem}}.hero--md .hero__title{font-size:1.75rem}@media(min-width:640px){.hero--md .hero__title{font-size:2.25rem}}@media(min-width:1024px){.hero--md .hero__title{font-size:2.75rem}}.hero--lg .hero__title{font-size:2rem}@media(min-width:640px){.hero--lg .hero__title{font-size:2.75rem}}@media(min-width:1024px){.hero--lg .hero__title{font-size:3.5rem}}.hero__body{margin-top:1rem;font-size:.875rem;line-height:1.6;opacity:.85;max-width:48rem}@media(min-width:640px){.hero__body{font-size:1rem;margin-top:1.25rem}}@media(min-width:1024px){.hero__body{font-size:1.125rem;margin-top:1.5rem}}.hero__body:empty{display:none}::ng-deep [hero-footer]{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.2)}@media(min-width:640px){::ng-deep [hero-footer]{grid-template-columns:repeat(2,1fr);margin-top:2.5rem}}@media(min-width:1024px){::ng-deep [hero-footer]{grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));margin-top:3rem}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: HeroComponent, isStandalone: true, selector: "lc-hero", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"heroClasses()\">\n  <div class=\"hero__content\">\n    @if (label()) {\n      <span class=\"hero__label\">{{ label() }}</span>\n    }\n    <h1 class=\"hero__title\">{{ title() }}</h1>\n    <div class=\"hero__body\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n  <ng-content select=\"[hero-footer]\"></ng-content>\n</div>\n", styles: [":host{display:block;width:100%}.hero{position:relative;display:flex;flex-direction:column;justify-content:space-between;color:#fff;overflow:hidden}.hero--primary{background:linear-gradient(135deg,#0d353d,#208497)}.hero--secondary{background:linear-gradient(135deg,#2d3c46,#7097af)}.hero--neutral{background:linear-gradient(135deg,#111827,#4b5563)}.hero--success{background:linear-gradient(135deg,#5f7150,#8ea475)}.hero--info{background:linear-gradient(135deg,#27445c,#3b6588)}.hero--warning{background:linear-gradient(135deg,#9b6b2b,#e1a040)}.hero--accent-orange{background:linear-gradient(135deg,#7a3a10,#df792e)}.hero--accent-purple{background:linear-gradient(135deg,#3a2a52,#866aa0)}.hero--accent-violet{background:linear-gradient(135deg,#221a42,#4e3f84)}.hero--sm{padding:1.5rem 1.25rem}@media(min-width:640px){.hero--sm{padding:2rem}}@media(min-width:1024px){.hero--sm{padding:2.5rem 3rem}}.hero--md{padding:2rem 1.25rem}@media(min-width:640px){.hero--md{padding:2.5rem 2rem}}@media(min-width:1024px){.hero--md{padding:3rem 3.5rem}}.hero--lg{padding:2.5rem 1.25rem}@media(min-width:640px){.hero--lg{padding:3rem 2.5rem}}@media(min-width:1024px){.hero--lg{padding:4rem}}.hero--radius-none{border-radius:0}.hero--radius-sm{border-radius:.25rem}.hero--radius-md{border-radius:.5rem}.hero--radius-lg{border-radius:1rem}.hero--slim{padding:1rem 1.25rem!important}@media(min-width:640px){.hero--slim{padding:1.25rem 2rem!important}}@media(min-width:1024px){.hero--slim{padding:1.5rem 3rem!important}}.hero--slim .hero__title{font-size:1.125rem!important;font-weight:700;line-height:1.3}@media(min-width:640px){.hero--slim .hero__title{font-size:1.25rem!important}}@media(min-width:1024px){.hero--slim .hero__title{font-size:1.5rem!important}}.hero--slim .hero__label{font-size:.5625rem;margin-bottom:.375rem;letter-spacing:.12em}@media(min-width:640px){.hero--slim .hero__label{font-size:.625rem;margin-bottom:.5rem}}.hero--slim .hero__body{margin-top:.5rem;font-size:.8125rem}@media(min-width:640px){.hero--slim .hero__body{font-size:.875rem;margin-top:.625rem}}.hero--slim ::ng-deep [hero-footer]{margin-top:1rem;padding-top:.75rem}@media(min-width:640px){.hero--slim ::ng-deep [hero-footer]{margin-top:1.25rem}}.hero--light{color:var(--color-text-primary, #1f2937)}.hero--light .hero__label{opacity:.7}.hero--light .hero__body{opacity:.75}.hero--light ::ng-deep [hero-footer]{border-top-color:#0000001f}.hero--light.hero--primary{background:linear-gradient(135deg,#dbeafe,#eff6ff)}.hero--light.hero--secondary{background:linear-gradient(135deg,#e0e7ff,#eef2ff)}.hero--light.hero--neutral{background:linear-gradient(135deg,#e5e7eb,#f9fafb)}.hero--light.hero--success{background:linear-gradient(135deg,#d1fae5,#ecfdf5)}.hero--light.hero--info{background:linear-gradient(135deg,#dbeafe,#eff6ff)}.hero--light.hero--warning{background:linear-gradient(135deg,#fef3c7,#fffbeb)}.hero--light.hero--accent-orange{background:linear-gradient(135deg,#ffedd5,#fff7ed)}.hero--light.hero--accent-purple{background:linear-gradient(135deg,#e9d5ff,#f5f3ff)}.hero--light.hero--accent-violet{background:linear-gradient(135deg,#ddd6fe,#ede9fe)}.hero__content{flex:1}.hero__label{display:inline-block;font-size:.6875rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;opacity:.8;margin-bottom:.75rem}@media(min-width:640px){.hero__label{font-size:.75rem;margin-bottom:1rem}}.hero__title{margin:0;font-weight:800;line-height:1.1;color:inherit}.hero--sm .hero__title{font-size:1.5rem}@media(min-width:640px){.hero--sm .hero__title{font-size:1.75rem}}@media(min-width:1024px){.hero--sm .hero__title{font-size:2rem}}.hero--md .hero__title{font-size:1.75rem}@media(min-width:640px){.hero--md .hero__title{font-size:2.25rem}}@media(min-width:1024px){.hero--md .hero__title{font-size:2.75rem}}.hero--lg .hero__title{font-size:2rem}@media(min-width:640px){.hero--lg .hero__title{font-size:2.75rem}}@media(min-width:1024px){.hero--lg .hero__title{font-size:3.5rem}}.hero__body{margin-top:1rem;font-size:.875rem;line-height:1.6;opacity:.85;max-width:48rem}@media(min-width:640px){.hero__body{font-size:1rem;margin-top:1.25rem}}@media(min-width:1024px){.hero__body{font-size:1.125rem;margin-top:1.5rem}}.hero__body:empty{display:none}::ng-deep [hero-footer]{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.2)}@media(min-width:640px){::ng-deep [hero-footer]{grid-template-columns:repeat(2,1fr);margin-top:2.5rem}}@media(min-width:1024px){::ng-deep [hero-footer]{grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));margin-top:3rem}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: HeroComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lc-hero', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"heroClasses()\">\n  <div class=\"hero__content\">\n    @if (label()) {\n      <span class=\"hero__label\">{{ label() }}</span>\n    }\n    <h1 class=\"hero__title\">{{ title() }}</h1>\n    <div class=\"hero__body\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n  <ng-content select=\"[hero-footer]\"></ng-content>\n</div>\n", styles: [":host{display:block;width:100%}.hero{position:relative;display:flex;flex-direction:column;justify-content:space-between;color:#fff;overflow:hidden}.hero--primary{background:linear-gradient(135deg,#0d353d,#208497)}.hero--secondary{background:linear-gradient(135deg,#2d3c46,#7097af)}.hero--neutral{background:linear-gradient(135deg,#111827,#4b5563)}.hero--success{background:linear-gradient(135deg,#5f7150,#8ea475)}.hero--info{background:linear-gradient(135deg,#27445c,#3b6588)}.hero--warning{background:linear-gradient(135deg,#9b6b2b,#e1a040)}.hero--accent-orange{background:linear-gradient(135deg,#7a3a10,#df792e)}.hero--accent-purple{background:linear-gradient(135deg,#3a2a52,#866aa0)}.hero--accent-violet{background:linear-gradient(135deg,#221a42,#4e3f84)}.hero--sm{padding:1.5rem 1.25rem}@media(min-width:640px){.hero--sm{padding:2rem}}@media(min-width:1024px){.hero--sm{padding:2.5rem 3rem}}.hero--md{padding:2rem 1.25rem}@media(min-width:640px){.hero--md{padding:2.5rem 2rem}}@media(min-width:1024px){.hero--md{padding:3rem 3.5rem}}.hero--lg{padding:2.5rem 1.25rem}@media(min-width:640px){.hero--lg{padding:3rem 2.5rem}}@media(min-width:1024px){.hero--lg{padding:4rem}}.hero--radius-none{border-radius:0}.hero--radius-sm{border-radius:.25rem}.hero--radius-md{border-radius:.5rem}.hero--radius-lg{border-radius:1rem}.hero__content{flex:1}.hero__label{display:inline-block;font-size:.6875rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;opacity:.8;margin-bottom:.75rem}@media(min-width:640px){.hero__label{font-size:.75rem;margin-bottom:1rem}}.hero__title{margin:0;font-weight:800;line-height:1.1;color:inherit}.hero--sm .hero__title{font-size:1.5rem}@media(min-width:640px){.hero--sm .hero__title{font-size:1.75rem}}@media(min-width:1024px){.hero--sm .hero__title{font-size:2rem}}.hero--md .hero__title{font-size:1.75rem}@media(min-width:640px){.hero--md .hero__title{font-size:2.25rem}}@media(min-width:1024px){.hero--md .hero__title{font-size:2.75rem}}.hero--lg .hero__title{font-size:2rem}@media(min-width:640px){.hero--lg .hero__title{font-size:2.75rem}}@media(min-width:1024px){.hero--lg .hero__title{font-size:3.5rem}}.hero__body{margin-top:1rem;font-size:.875rem;line-height:1.6;opacity:.85;max-width:48rem}@media(min-width:640px){.hero__body{font-size:1rem;margin-top:1.25rem}}@media(min-width:1024px){.hero__body{font-size:1.125rem;margin-top:1.5rem}}.hero__body:empty{display:none}::ng-deep [hero-footer]{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.2)}@media(min-width:640px){::ng-deep [hero-footer]{grid-template-columns:repeat(2,1fr);margin-top:2.5rem}}@media(min-width:1024px){::ng-deep [hero-footer]{grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));margin-top:3rem}}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }] } });
+            args: [{ selector: 'lc-hero', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"heroClasses()\">\n  <div class=\"hero__content\">\n    @if (label()) {\n      <span class=\"hero__label\">{{ label() }}</span>\n    }\n    <h1 class=\"hero__title\">{{ title() }}</h1>\n    <div class=\"hero__body\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n  <ng-content select=\"[hero-footer]\"></ng-content>\n</div>\n", styles: [":host{display:block;width:100%}.hero{position:relative;display:flex;flex-direction:column;justify-content:space-between;color:#fff;overflow:hidden}.hero--primary{background:linear-gradient(135deg,#0d353d,#208497)}.hero--secondary{background:linear-gradient(135deg,#2d3c46,#7097af)}.hero--neutral{background:linear-gradient(135deg,#111827,#4b5563)}.hero--success{background:linear-gradient(135deg,#5f7150,#8ea475)}.hero--info{background:linear-gradient(135deg,#27445c,#3b6588)}.hero--warning{background:linear-gradient(135deg,#9b6b2b,#e1a040)}.hero--accent-orange{background:linear-gradient(135deg,#7a3a10,#df792e)}.hero--accent-purple{background:linear-gradient(135deg,#3a2a52,#866aa0)}.hero--accent-violet{background:linear-gradient(135deg,#221a42,#4e3f84)}.hero--sm{padding:1.5rem 1.25rem}@media(min-width:640px){.hero--sm{padding:2rem}}@media(min-width:1024px){.hero--sm{padding:2.5rem 3rem}}.hero--md{padding:2rem 1.25rem}@media(min-width:640px){.hero--md{padding:2.5rem 2rem}}@media(min-width:1024px){.hero--md{padding:3rem 3.5rem}}.hero--lg{padding:2.5rem 1.25rem}@media(min-width:640px){.hero--lg{padding:3rem 2.5rem}}@media(min-width:1024px){.hero--lg{padding:4rem}}.hero--radius-none{border-radius:0}.hero--radius-sm{border-radius:.25rem}.hero--radius-md{border-radius:.5rem}.hero--radius-lg{border-radius:1rem}.hero--slim{padding:1rem 1.25rem!important}@media(min-width:640px){.hero--slim{padding:1.25rem 2rem!important}}@media(min-width:1024px){.hero--slim{padding:1.5rem 3rem!important}}.hero--slim .hero__title{font-size:1.125rem!important;font-weight:700;line-height:1.3}@media(min-width:640px){.hero--slim .hero__title{font-size:1.25rem!important}}@media(min-width:1024px){.hero--slim .hero__title{font-size:1.5rem!important}}.hero--slim .hero__label{font-size:.5625rem;margin-bottom:.375rem;letter-spacing:.12em}@media(min-width:640px){.hero--slim .hero__label{font-size:.625rem;margin-bottom:.5rem}}.hero--slim .hero__body{margin-top:.5rem;font-size:.8125rem}@media(min-width:640px){.hero--slim .hero__body{font-size:.875rem;margin-top:.625rem}}.hero--slim ::ng-deep [hero-footer]{margin-top:1rem;padding-top:.75rem}@media(min-width:640px){.hero--slim ::ng-deep [hero-footer]{margin-top:1.25rem}}.hero--light{color:var(--color-text-primary, #1f2937)}.hero--light .hero__label{opacity:.7}.hero--light .hero__body{opacity:.75}.hero--light ::ng-deep [hero-footer]{border-top-color:#0000001f}.hero--light.hero--primary{background:linear-gradient(135deg,#dbeafe,#eff6ff)}.hero--light.hero--secondary{background:linear-gradient(135deg,#e0e7ff,#eef2ff)}.hero--light.hero--neutral{background:linear-gradient(135deg,#e5e7eb,#f9fafb)}.hero--light.hero--success{background:linear-gradient(135deg,#d1fae5,#ecfdf5)}.hero--light.hero--info{background:linear-gradient(135deg,#dbeafe,#eff6ff)}.hero--light.hero--warning{background:linear-gradient(135deg,#fef3c7,#fffbeb)}.hero--light.hero--accent-orange{background:linear-gradient(135deg,#ffedd5,#fff7ed)}.hero--light.hero--accent-purple{background:linear-gradient(135deg,#e9d5ff,#f5f3ff)}.hero--light.hero--accent-violet{background:linear-gradient(135deg,#ddd6fe,#ede9fe)}.hero__content{flex:1}.hero__label{display:inline-block;font-size:.6875rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;opacity:.8;margin-bottom:.75rem}@media(min-width:640px){.hero__label{font-size:.75rem;margin-bottom:1rem}}.hero__title{margin:0;font-weight:800;line-height:1.1;color:inherit}.hero--sm .hero__title{font-size:1.5rem}@media(min-width:640px){.hero--sm .hero__title{font-size:1.75rem}}@media(min-width:1024px){.hero--sm .hero__title{font-size:2rem}}.hero--md .hero__title{font-size:1.75rem}@media(min-width:640px){.hero--md .hero__title{font-size:2.25rem}}@media(min-width:1024px){.hero--md .hero__title{font-size:2.75rem}}.hero--lg .hero__title{font-size:2rem}@media(min-width:640px){.hero--lg .hero__title{font-size:2.75rem}}@media(min-width:1024px){.hero--lg .hero__title{font-size:3.5rem}}.hero__body{margin-top:1rem;font-size:.875rem;line-height:1.6;opacity:.85;max-width:48rem}@media(min-width:640px){.hero__body{font-size:1rem;margin-top:1.25rem}}@media(min-width:1024px){.hero__body{font-size:1.125rem;margin-top:1.5rem}}.hero__body:empty{display:none}::ng-deep [hero-footer]{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.2)}@media(min-width:640px){::ng-deep [hero-footer]{grid-template-columns:repeat(2,1fr);margin-top:2.5rem}}@media(min-width:1024px){::ng-deep [hero-footer]{grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));margin-top:3rem}}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
 
 /**
  * Progress bar component for displaying completion status.
@@ -5788,7 +5805,7 @@ class HeaderComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: HeaderComponent, isStandalone: true, selector: "lc-header", inputs: { logo: "logo", title: "title", subtitle: "subtitle", userEmail: "userEmail", userName: "userName", showHamburger: "showHamburger", showThemeButton: "showThemeButton", showProfileMenuItem: "showProfileMenuItem" }, outputs: { hamburgerClick: "hamburgerClick", themeToggleClick: "themeToggleClick", logoutClick: "logoutClick", profileClick: "profileClick" }, host: { classAttribute: "lc-header-host" }, ngImport: i0, template: "<header class=\"lc-header\">\n  <!-- Hamburger menu icon (mobile only) -->\n  @if (showHamburger) {\n    <lc-button\n      variant=\"ghost\"\n      size=\"sm\"\n      [iconOnly]=\"true\"\n      [ariaLabel]=\"'Toggle sidebar menu'\"\n      (clicked)=\"onHamburgerClick()\"\n      class=\"lc-header__hamburger\"\n    >\n      <lc-icon name=\"bars-3\" size=\"sm\" />\n    </lc-button>\n  }\n\n  <!-- Logo (clickable, navigates to home) -->\n  <div class=\"lc-header__brand\">\n    @if (logo || title) {\n      <a routerLink=\"/\" class=\"lc-header__logo\" aria-label=\"Go to home\">\n        <lc-logo [variant]=\"logo ? 'full' : 'emblem'\" size=\"md\" [clickable]=\"false\" />\n      </a>\n    }\n    \n    @if (title) {\n      <div class=\"lc-header__title-group\">\n        <h1 class=\"lc-header__title\">{{ title }}</h1>\n        @if (subtitle) {\n          <span class=\"lc-header__subtitle\">{{ subtitle }}</span>\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"lc-header__spacer\"></div>\n\n  <!-- Theme toggle button -->\n  @if (showThemeButton) {\n    <lc-button\n      variant=\"ghost\"\n      size=\"sm\"\n      [iconOnly]=\"true\"\n      [ariaLabel]=\"themeService.isDark() ? 'Switch to light mode' : 'Switch to dark mode'\"\n      (clicked)=\"onThemeButtonClick()\"\n      class=\"lc-header__theme-toggle\"\n    >\n      <lc-icon [name]=\"themeService.isDark() ? 'sun' : 'moon'\" size=\"sm\" />\n    </lc-button>\n  }\n\n  <!-- User profile menu -->\n  <lc-menu\n    [items]=\"menuItems()\"\n    [isOpen]=\"isDropdownOpen()\"\n    position=\"bottom-right\"\n    minWidth=\"220px\"\n    (itemClick)=\"onMenuItemClick($event)\"\n    (closed)=\"closeDropdown()\"\n  >\n    <!-- Menu header with avatar, name and email -->\n    @if (userName || userEmail) {\n      <div header class=\"lc-header__menu-header\">\n        <lc-avatar [name]=\"userName\" size=\"md\" />\n        <div class=\"lc-header__menu-user-info\">\n          @if (userName) {\n            <div class=\"lc-header__menu-user-name\">{{ userName }}</div>\n          }\n          @if (userEmail) {\n            <div class=\"lc-header__menu-user-email\">{{ userEmail }}</div>\n          }\n        </div>\n      </div>\n    }\n\n    <button\n      trigger\n      class=\"lc-header__profile-trigger\"\n      type=\"button\"\n      aria-label=\"Open user menu\"\n      [attr.aria-expanded]=\"isDropdownOpen()\"\n      (click)=\"toggleDropdown()\"\n    >\n      <lc-icon name=\"user\" size=\"sm\" />\n      <lc-icon name=\"chevron-down\" size=\"xs\" />\n    </button>\n  </lc-menu>\n</header>\n", styles: [".lc-header{display:flex;align-items:center;gap:var(--spacing-4);padding:var(--spacing-3) var(--spacing-6);background-color:var(--color-neutral-0, #ffffff);border-bottom:1px solid var(--color-neutral-200, #e5e7eb);height:64px;position:sticky;top:0;z-index:1000}@media(max-width:768px){.lc-header{padding:var(--spacing-3) var(--spacing-4)}}.lc-header__hamburger{display:flex;align-items:center;justify-content:center;padding:var(--spacing-2);background:transparent;border:none;cursor:pointer;color:var(--color-neutral-700);border-radius:var(--radius-md);transition:background-color .2s ease,color .2s ease}.lc-header__hamburger:hover{background-color:var(--color-neutral-100);color:var(--color-neutral-900)}.lc-header__hamburger:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-header__hamburger .lc-icon{width:24px;height:24px}.lc-header__brand{display:flex;align-items:center;gap:var(--spacing-3)}.lc-header__logo{display:flex;align-items:center;text-decoration:none;color:var(--color-neutral-900);flex-shrink:0}.lc-header__logo:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:4px;border-radius:var(--radius-sm)}.lc-header__logo-img{height:32px;width:auto}.lc-header__title-group{display:flex;flex-direction:column;gap:.125rem}.lc-header__title{font-size:1.25rem;font-weight:700;color:var(--color-text-primary);margin:0;line-height:1.2;transition:color .2s ease}@media(max-width:640px){.lc-header__title{font-size:1.125rem}}.lc-header__subtitle{font-size:.75rem;font-weight:500;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em;transition:color .2s ease}.lc-header__spacer{flex:1}.lc-header__theme-toggle{margin-right:var(--spacing-2)}.lc-header__profile-trigger{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3);background:transparent;border:1px solid var(--color-neutral-200);border-radius:var(--radius-full);cursor:pointer;color:var(--color-neutral-700);transition:background-color .2s ease,border-color .2s ease}.lc-header__profile-trigger:hover{background-color:var(--color-neutral-100);border-color:var(--color-neutral-300)}.lc-header__profile-trigger:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-menu__header{padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-sm);color:var(--color-neutral-600);border-bottom:1px solid var(--color-neutral-200);margin-bottom:var(--spacing-1);word-break:break-word}.lc-header__menu-header{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--spacing-4);border-bottom:1px solid var(--color-neutral-200);margin-bottom:var(--spacing-1)}.lc-header__menu-user-info{flex:1;min-width:0}.lc-header__menu-user-name{font-size:var(--font-size-sm);font-weight:600;color:var(--color-neutral-900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}.lc-header__menu-user-email{font-size:var(--font-size-xs);color:var(--color-neutral-600);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}html.dark .lc-header,:root.dark .lc-header,.dark .lc-header{background-color:#27272a!important;border-bottom-color:#3f3f46!important}html.dark .lc-header__hamburger,:root.dark .lc-header__hamburger,.dark .lc-header__hamburger{color:#d4d4d8}html.dark .lc-header__hamburger:hover,:root.dark .lc-header__hamburger:hover,.dark .lc-header__hamburger:hover{background-color:#27272a;color:#f5f5f5}html.dark .lc-header__logo,:root.dark .lc-header__logo,.dark .lc-header__logo{color:#f5f5f5}html.dark .lc-header__title,:root.dark .lc-header__title,.dark .lc-header__title{color:#f5f5f5}html.dark .lc-header__subtitle,:root.dark .lc-header__subtitle,.dark .lc-header__subtitle{color:#a1a1aa}html.dark .lc-header__profile-trigger,:root.dark .lc-header__profile-trigger,.dark .lc-header__profile-trigger{border-color:#3f3f46;color:#d4d4d8}html.dark .lc-header__profile-trigger:hover,:root.dark .lc-header__profile-trigger:hover,.dark .lc-header__profile-trigger:hover{background-color:#27272a;border-color:#52525b}html.dark .lc-menu__header,:root.dark .lc-menu__header,.dark .lc-menu__header{color:#a1a1aa;border-bottom-color:#3f3f46}html.dark .lc-header__menu-header,:root.dark .lc-header__menu-header,.dark .lc-header__menu-header{border-bottom-color:#3f3f46}html.dark .lc-header__menu-user-name,:root.dark .lc-header__menu-user-name,.dark .lc-header__menu-user-name{color:#f5f5f5}html.dark .lc-header__menu-user-email,:root.dark .lc-header__menu-user-email,.dark .lc-header__menu-user-email{color:#a1a1aa}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ButtonComponent, selector: "lc-button", inputs: ["variant", "size", "disabled", "loading", "isLoading", "iconOnly", "fullWidth", "ariaLabel", "type"], outputs: ["clicked", "focused", "blurred"] }, { kind: "component", type: LogoComponent, selector: "lc-logo", inputs: ["variant", "size", "alt", "clickable"] }, { kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }, { kind: "component", type: AvatarComponent, selector: "lc-avatar", inputs: ["src", "alt", "name", "size", "status"] }, { kind: "component", type: MenuComponent, selector: "lc-menu", inputs: ["items", "isOpen", "position", "minWidth"], outputs: ["itemClick", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: HeaderComponent, isStandalone: true, selector: "lc-header", inputs: { logo: "logo", title: "title", subtitle: "subtitle", userEmail: "userEmail", userName: "userName", showHamburger: "showHamburger", showThemeButton: "showThemeButton", showProfileMenuItem: "showProfileMenuItem" }, outputs: { hamburgerClick: "hamburgerClick", themeToggleClick: "themeToggleClick", logoutClick: "logoutClick", profileClick: "profileClick" }, host: { classAttribute: "lc-header-host" }, ngImport: i0, template: "<header class=\"lc-header\">\n  <!-- Hamburger menu icon (mobile only) -->\n  @if (showHamburger) {\n    <lc-button\n      variant=\"ghost\"\n      size=\"sm\"\n      [iconOnly]=\"true\"\n      [ariaLabel]=\"'Toggle sidebar menu'\"\n      (clicked)=\"onHamburgerClick()\"\n      class=\"lc-header__hamburger\"\n    >\n      <lc-icon name=\"bars-3\" size=\"sm\" />\n    </lc-button>\n  }\n\n  <!-- Logo (clickable, navigates to home) -->\n  <div class=\"lc-header__brand\">\n    @if (logo || title) {\n      <a routerLink=\"/\" class=\"lc-header__logo\" aria-label=\"Go to home\">\n        <lc-logo [variant]=\"logo ? 'full' : 'emblem'\" size=\"md\" [clickable]=\"false\" />\n      </a>\n    }\n    \n    @if (title) {\n      <div class=\"lc-header__title-group\">\n        <h1 class=\"lc-header__title\">{{ title }}</h1>\n        @if (subtitle) {\n          <span class=\"lc-header__subtitle\">{{ subtitle }}</span>\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"lc-header__spacer\"></div>\n\n  <!-- Theme toggle button -->\n  @if (showThemeButton) {\n    <lc-button\n      variant=\"ghost\"\n      size=\"sm\"\n      [iconOnly]=\"true\"\n      [ariaLabel]=\"themeService.isDark() ? 'Switch to light mode' : 'Switch to dark mode'\"\n      (clicked)=\"onThemeButtonClick()\"\n      class=\"lc-header__theme-toggle\"\n    >\n      <lc-icon [name]=\"themeService.isDark() ? 'sun' : 'moon'\" size=\"sm\" />\n    </lc-button>\n  }\n\n  <!-- User profile menu -->\n  <lc-menu\n    [items]=\"menuItems()\"\n    [isOpen]=\"isDropdownOpen()\"\n    position=\"bottom-right\"\n    minWidth=\"220px\"\n    (itemClick)=\"onMenuItemClick($event)\"\n    (closed)=\"closeDropdown()\"\n  >\n    <!-- Menu header with avatar, name and email -->\n    @if (userName || userEmail) {\n      <div header class=\"lc-header__menu-header\">\n        <lc-avatar [name]=\"userName\" size=\"md\" />\n        <div class=\"lc-header__menu-user-info\">\n          @if (userName) {\n            <div class=\"lc-header__menu-user-name\">{{ userName }}</div>\n          }\n          @if (userEmail) {\n            <div class=\"lc-header__menu-user-email\">{{ userEmail }}</div>\n          }\n        </div>\n      </div>\n    }\n\n    <button\n      trigger\n      class=\"lc-header__profile-trigger\"\n      type=\"button\"\n      aria-label=\"Open user menu\"\n      [attr.aria-expanded]=\"isDropdownOpen()\"\n      (click)=\"toggleDropdown()\"\n    >\n      <lc-icon name=\"user\" size=\"sm\" />\n      <lc-icon name=\"chevron-down\" size=\"xs\" />\n    </button>\n  </lc-menu>\n</header>\n", styles: [".lc-header{display:flex;align-items:center;gap:var(--spacing-4);padding:var(--spacing-3) var(--spacing-6);background-color:var(--color-neutral-0, #ffffff);border-bottom:1px solid var(--color-neutral-200, #e5e7eb);height:64px;position:sticky;top:0;z-index:1000}@media(max-width:768px){.lc-header{padding:var(--spacing-3) var(--spacing-4)}}.lc-header__hamburger{display:flex;align-items:center;justify-content:center;padding:var(--spacing-2);background:transparent;border:none;cursor:pointer;color:var(--color-neutral-700);border-radius:var(--radius-md);transition:background-color .2s ease,color .2s ease}.lc-header__hamburger:hover{background-color:var(--color-neutral-100);color:var(--color-neutral-900)}.lc-header__hamburger:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-header__hamburger .lc-icon{width:24px;height:24px}.lc-header__brand{display:flex;align-items:center;gap:var(--spacing-3)}.lc-header__logo{display:flex;align-items:center;text-decoration:none;color:var(--color-neutral-900);flex-shrink:0}.lc-header__logo:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:4px;border-radius:var(--radius-sm)}.lc-header__logo-img{height:32px;width:auto}.lc-header__title-group{display:flex;flex-direction:column;gap:.125rem}.lc-header__title{font-size:1.25rem;font-weight:700;color:var(--color-text-primary);margin:0;line-height:1.2;transition:color .2s ease}@media(max-width:640px){.lc-header__title{font-size:1.125rem}}.lc-header__subtitle{font-size:.75rem;font-weight:500;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em;transition:color .2s ease}.lc-header__spacer{flex:1}.lc-header__theme-toggle{margin-right:var(--spacing-2)}.lc-header__profile-trigger{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3);background:transparent;border:1px solid var(--color-neutral-200);border-radius:var(--radius-full);cursor:pointer;color:var(--color-neutral-700);transition:background-color .2s ease,border-color .2s ease}.lc-header__profile-trigger:hover{background-color:var(--color-neutral-100);border-color:var(--color-neutral-300)}.lc-header__profile-trigger:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-menu__header{padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-sm);color:var(--color-neutral-600);border-bottom:1px solid var(--color-neutral-200);margin-bottom:var(--spacing-1);word-break:break-word}.lc-header__menu-header{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--spacing-4);border-bottom:1px solid var(--color-neutral-200);margin-bottom:var(--spacing-1)}.lc-header__menu-user-info{flex:1;min-width:0}.lc-header__menu-user-name{font-size:var(--font-size-sm);font-weight:600;color:var(--color-neutral-900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}.lc-header__menu-user-email{font-size:var(--font-size-xs);color:var(--color-neutral-600);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}html.dark .lc-header,:root.dark .lc-header,.dark .lc-header{background-color:#27272a!important;border-bottom-color:#3f3f46!important}html.dark .lc-header__hamburger,:root.dark .lc-header__hamburger,.dark .lc-header__hamburger{color:#d4d4d8}html.dark .lc-header__hamburger:hover,:root.dark .lc-header__hamburger:hover,.dark .lc-header__hamburger:hover{background-color:#27272a;color:#f5f5f5}html.dark .lc-header__logo,:root.dark .lc-header__logo,.dark .lc-header__logo{color:#f5f5f5}html.dark .lc-header__title,:root.dark .lc-header__title,.dark .lc-header__title{color:#f5f5f5}html.dark .lc-header__subtitle,:root.dark .lc-header__subtitle,.dark .lc-header__subtitle{color:#a1a1aa}html.dark .lc-header__profile-trigger,:root.dark .lc-header__profile-trigger,.dark .lc-header__profile-trigger{border-color:#3f3f46;color:#d4d4d8}html.dark .lc-header__profile-trigger:hover,:root.dark .lc-header__profile-trigger:hover,.dark .lc-header__profile-trigger:hover{background-color:#27272a;border-color:#52525b}html.dark .lc-menu__header,:root.dark .lc-menu__header,.dark .lc-menu__header{color:#a1a1aa;border-bottom-color:#3f3f46}html.dark .lc-header__menu-header,:root.dark .lc-header__menu-header,.dark .lc-header__menu-header{border-bottom-color:#3f3f46}html.dark .lc-header__menu-user-name,:root.dark .lc-header__menu-user-name,.dark .lc-header__menu-user-name{color:#f5f5f5}html.dark .lc-header__menu-user-email,:root.dark .lc-header__menu-user-email,.dark .lc-header__menu-user-email{color:#a1a1aa}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ButtonComponent, selector: "lc-button", inputs: ["variant", "size", "disabled", "loading", "isLoading", "iconOnly", "fullWidth", "ariaLabel", "type"], outputs: ["clicked", "focused", "blurred"] }, { kind: "component", type: LogoComponent, selector: "lc-logo", inputs: ["variant", "size", "alt", "clickable"] }, { kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }, { kind: "component", type: AvatarComponent, selector: "lc-avatar", inputs: ["src", "alt", "name", "size", "status"] }, { kind: "component", type: MenuComponent, selector: "lc-menu", inputs: ["items", "isOpen", "position", "size", "minWidth"], outputs: ["itemClick", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
@@ -6011,6 +6028,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
  *
  * Features:
  * - Drawer (overlay) and docked (persistent) modes
+ * - Collapsed icon-rail mode (narrow 56px sidebar with icons only)
  * - Hierarchical navigation with collapsible groups
  * - Section headlines for item grouping
  * - Active route highlighting
@@ -6021,11 +6039,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
  *
  * @example
  * ```html
- * <lc-sidenav [isOpen]="isOpen" mode="docked" [items]="navItems"
+ * <lc-sidenav [isOpen]="isOpen" mode="docked" [collapsed]="isCollapsed" [items]="navItems"
  *   (closed)="isOpen = false" (itemClicked)="navigate($event)" />
  * ```
  */
 class SidenavComponent {
+    /** Whether the sidenav is collapsed to icon-only rail */
+    collapsed = signal(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
     /** Whether the sidenav is open */
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
     /** Display mode: 'drawer' (overlay) or 'docked' (persistent sidebar) */
@@ -6098,6 +6118,12 @@ class SidenavComponent {
     set activeRouteInput(value) {
         this.activeRoute.set(value);
     }
+    /**
+     * Input setter for collapsed
+     */
+    set collapsedInput(value) {
+        this.collapsed.set(value);
+    }
     /**
      * Event emitted when the sidenav should close
      */
@@ -6116,14 +6142,23 @@ class SidenavComponent {
         if (this.isOpen()) {
             classes.push('lc-sidenav--open');
         }
+        if (this.collapsed()) {
+            classes.push('lc-sidenav--collapsed');
+        }
         return classes.join(' ');
     }, ...(ngDevMode ? [{ debugName: "sidenavClasses" }] : /* istanbul ignore next */ []));
     /**
      * Computed inline styles for the sidenav
      */
     sidenavStyles = computed(() => ({
-        width: this.width(),
+        width: this.collapsed() ? '56px' : this.width(),
     }), ...(ngDevMode ? [{ debugName: "sidenavStyles" }] : /* istanbul ignore next */ []));
+    /**
+     * Toggle collapsed state
+     */
+    toggleCollapsed() {
+        this.collapsed.set(!this.collapsed());
+    }
     /**
      * Handle close action
      */
@@ -6178,7 +6213,7 @@ class SidenavComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: SidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: SidenavComponent, isStandalone: true, selector: "lc-sidenav", inputs: { isOpenInput: "isOpenInput", modeInput: "modeInput", positionInput: "positionInput", widthInput: "widthInput", ariaLabelInput: "ariaLabelInput", hasOverlayInput: "hasOverlayInput", itemsInput: "itemsInput", activeRouteInput: "activeRouteInput" }, outputs: { closed: "closed", itemClicked: "itemClicked" }, host: { listeners: { "document:keydown": "handleKeydown($event)" }, properties: { "class.lc-sidenav-container": "true", "class.lc-sidenav-container--docked": "mode() === 'docked'", "class.lc-sidenav-container--open": "isOpen()" } }, ngImport: i0, template: "<!-- Drawer mode: render with overlay and conditional visibility -->\n@if (mode() === 'drawer') {\n  @if (isOpen()) {\n    <!-- Overlay backdrop -->\n    @if (hasOverlay()) {\n      <div\n        class=\"lc-sidenav__overlay\"\n        (click)=\"handleClose()\"\n        aria-hidden=\"true\">\n      </div>\n    }\n\n    <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n  }\n}\n\n<!-- Docked mode: always render, visibility controlled by CSS -->\n@if (mode() === 'docked') {\n  <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n}\n\n<!-- Shared sidenav panel template -->\n<ng-template #sidenavPanel>\n  <aside\n    [class]=\"sidenavClasses()\"\n    [ngStyle]=\"sidenavStyles()\"\n    role=\"navigation\"\n    [attr.aria-label]=\"ariaLabel()\">\n\n    <!-- Close button (drawer mode only) -->\n    @if (mode() === 'drawer') {\n      <button\n        type=\"button\"\n        class=\"lc-sidenav__close\"\n        (click)=\"handleClose()\"\n        aria-label=\"Close navigation\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\">\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n        </svg>\n      </button>\n    }\n\n    <!-- Navigation items (if provided) -->\n    @if (items().length > 0) {\n      <nav class=\"lc-sidenav__nav\" [class.lc-sidenav__nav--docked]=\"mode() === 'docked'\">\n        @for (item of sortedItems(); track item.id) {\n          <!-- Section headline -->\n          @if (item.isSection) {\n            <div class=\"lc-sidenav__section\">\n              <h2 class=\"lc-sidenav__section-title\">{{ item.label }}</h2>\n              @if (item.children?.length) {\n                <ul class=\"lc-sidenav__section-items\">\n                  @for (child of item.children; track child.id) {\n                    <li>\n                      <a\n                        [routerLink]=\"child.route\"\n                        routerLinkActive=\"lc-sidenav__nav-item--active\"\n                        [routerLinkActiveOptions]=\"{ exact: child.route === '/' }\"\n                        class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                        (click)=\"handleItemClick(child)\"\n                        [attr.aria-current]=\"isItemActive(child) ? 'page' : null\">\n                        @if (child.icon) {\n                          <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                        }\n                        <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n                      </a>\n                    </li>\n                  }\n                </ul>\n              }\n            </div>\n          } @else if (item.children?.length) {\n            <!-- Parent item with children (collapsible group) -->\n            <button\n              type=\"button\"\n              class=\"lc-sidenav__nav-item lc-sidenav__nav-item--parent\"\n              [class.lc-sidenav__nav-item--expanded]=\"isExpanded(item)\"\n              [class.lc-sidenav__nav-item--active]=\"hasActiveChild(item)\"\n              (click)=\"toggleExpanded(item)\"\n              [attr.aria-expanded]=\"isExpanded(item)\">\n              <lc-icon [name]=\"item.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n              <span class=\"lc-sidenav__nav-label\">{{ item.label }}</span>\n              <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" class=\"lc-sidenav__nav-chevron\" />\n            </button>\n            @if (isExpanded(item)) {\n              <div class=\"lc-sidenav__nav-children\">\n                @for (child of item.children; track child.id) {\n                  <a\n                    [routerLink]=\"child.route\"\n                    routerLinkActive=\"lc-sidenav__nav-item--active\"\n                    class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                    (click)=\"handleItemClick(child)\"\n                    [attr.aria-current]=\"isItemActive(child) ? 'page' : null\">\n                    <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                    <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n                  </a>\n                }\n              </div>\n            }\n          } @else {\n            <!-- Simple item without children -->\n            <a\n              [routerLink]=\"item.route\"\n              routerLinkActive=\"lc-sidenav__nav-item--active\"\n              [routerLinkActiveOptions]=\"{ exact: item.route === '/' }\"\n              class=\"lc-sidenav__nav-item\"\n              (click)=\"handleItemClick(item)\"\n              [attr.aria-current]=\"isItemActive(item) ? 'page' : null\">\n              <lc-icon [name]=\"item.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n              <span class=\"lc-sidenav__nav-label\">{{ item.label }}</span>\n            </a>\n          }\n        }\n      </nav>\n    }\n\n    <!-- Content projection (for custom content) -->\n    <div class=\"lc-sidenav__content\" [class.lc-sidenav__content--docked]=\"mode() === 'docked'\">\n      <ng-content></ng-content>\n    </div>\n  </aside>\n</ng-template>\n", styles: [".lc-sidenav-container{position:relative;z-index:1000}.lc-sidenav-container--docked{position:static;z-index:auto;height:100%}.lc-sidenav__overlay{position:fixed;inset:0;background-color:#00000080;opacity:0;animation:fadeIn .3s ease-out forwards;z-index:1000;cursor:pointer}@media(prefers-reduced-motion:reduce){.lc-sidenav__overlay{animation:none;opacity:1}}.lc-sidenav{position:fixed;top:0;bottom:0;background-color:var(--color-background);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(--color-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__close{position:absolute;top:1rem;right:1rem;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;background:none;border:none;border-radius:var(--border-radius-md, .375rem);color:var(--color-text-secondary);cursor:pointer;transition:background-color .2s ease,color .2s ease;z-index:1}.lc-sidenav__close:hover{background-color:var(--color-surface);color:var(--color-text-primary)}.lc-sidenav__close:focus-visible{outline:2px solid var(--color-primary-500, rgb(59, 130, 246));outline-offset:2px}.lc-sidenav__close:active{background-color:var(--color-border)}.lc-sidenav__close svg{width:1.25rem;height:1.25rem}.lc-sidenav__nav{display:flex;flex-direction:column;gap:var(--spacing-1, .25rem);padding:4rem 1rem 1rem}.lc-sidenav__nav--docked{padding-top:1rem;gap:0}.lc-sidenav__section:not(:first-child){margin-top:var(--spacing-4, 1rem);padding-top:var(--spacing-3, .75rem)}.lc-sidenav__section-title{padding:0 var(--spacing-3, .75rem);margin-bottom:var(--spacing-2, .5rem);font-size:var(--font-size-xs, .75rem);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-neutral-500)}.lc-sidenav__section-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--spacing-1, .25rem)}.lc-sidenav__nav-item{display:flex;align-items:center;gap:var(--spacing-3, .75rem);padding:var(--spacing-2, .5rem) var(--spacing-3, .75rem);text-decoration:none;color:var(--color-neutral-700);border-radius:var(--radius-md, .375rem);transition:background-color .2s ease,color .2s ease;font-size:var(--font-size-sm, .875rem);font-weight:500;cursor:pointer}.lc-sidenav__nav-item:hover{background-color:var(--color-neutral-100);color:var(--color-neutral-900)}.lc-sidenav__nav-item:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-sidenav__nav-item--active{background-color:var(--color-primary-50, rgba(59, 130, 246, .1));color:var(--color-primary-700, #1d4ed8);font-weight:600}.lc-sidenav__nav-item--active .lc-sidenav__nav-icon{color:var(--color-primary-600, #2563eb)}.lc-sidenav__nav-icon{width:20px;height:20px;flex-shrink:0}.lc-sidenav__nav-chevron{width:16px;height:16px;flex-shrink:0;margin-left:auto;transition:transform .2s ease}.lc-sidenav__nav-item--expanded .lc-sidenav__nav-chevron{transform:rotate(180deg)}.lc-sidenav__nav-item--parent{width:100%;border:none;background:none;font-family:inherit;text-align:left}.lc-sidenav__nav-children{display:flex;flex-direction:column;gap:var(--spacing-1, .25rem);padding-left:var(--spacing-4, 1rem)}.lc-sidenav__nav-item--child{font-size:var(--font-size-sm, .875rem)}.lc-sidenav__nav-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lc-sidenav__content{flex:1;padding:4rem 1rem 1rem;overflow-y:auto;-webkit-overflow-scrolling:touch}.lc-sidenav__content--docked{padding-top:1rem}.lc-sidenav__content::-webkit-scrollbar{width:.5rem}.lc-sidenav__content::-webkit-scrollbar-track{background:var(--color-surface);border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav__content::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav__content::-webkit-scrollbar-thumb:hover{background:var(--color-text-secondary)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@media(max-width:640px){.lc-sidenav--drawer{width:100%!important;max-width:320px}}@media(max-width:480px){.lc-sidenav--drawer{max-width:280px}}.lc-sidenav__content:focus{outline:none}.lc-sidenav__content a:focus-visible,.lc-sidenav__content button:focus-visible{outline:2px solid var(--color-primary-500, rgb(59, 130, 246));outline-offset:2px;border-radius:var(--border-radius-sm, .25rem)}:host-context([data-theme=dark]) .lc-sidenav__section-title{color:var(--color-neutral-400)}:host-context([data-theme=dark]) .lc-sidenav__nav-item{color:var(--color-neutral-300)}:host-context([data-theme=dark]) .lc-sidenav__nav-item:hover{background-color:var(--color-neutral-800);color:var(--color-neutral-100)}:host-context([data-theme=dark]) .lc-sidenav__nav-item--active{background-color:#3b82f626;color:var(--color-primary-400)}:host-context([data-theme=dark]) .lc-sidenav__nav-item--active .lc-sidenav__nav-icon{color:var(--color-primary-400)}@media print{.lc-sidenav-container,.lc-sidenav__overlay,.lc-sidenav{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: SidenavComponent, isStandalone: true, selector: "lc-sidenav", inputs: { isOpenInput: "isOpenInput", modeInput: "modeInput", positionInput: "positionInput", widthInput: "widthInput", ariaLabelInput: "ariaLabelInput", hasOverlayInput: "hasOverlayInput", itemsInput: "itemsInput", activeRouteInput: "activeRouteInput", collapsedInput: "collapsedInput" }, outputs: { closed: "closed", itemClicked: "itemClicked" }, host: { listeners: { "document:keydown": "handleKeydown($event)" }, properties: { "class.lc-sidenav-container": "true", "class.lc-sidenav-container--docked": "mode() === 'docked'", "class.lc-sidenav-container--open": "isOpen()" } }, ngImport: i0, template: "<!-- Drawer mode: render with overlay and conditional visibility -->\n@if (mode() === 'drawer') {\n  @if (isOpen()) {\n    <!-- Overlay backdrop -->\n    @if (hasOverlay()) {\n      <div\n        class=\"lc-sidenav__overlay\"\n        (click)=\"handleClose()\"\n        aria-hidden=\"true\">\n      </div>\n    }\n\n    <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n  }\n}\n\n<!-- Docked mode: always render, visibility controlled by CSS -->\n@if (mode() === 'docked') {\n  <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n}\n\n<!-- Shared sidenav panel template -->\n<ng-template #sidenavPanel>\n  <aside\n    [class]=\"sidenavClasses()\"\n    [ngStyle]=\"sidenavStyles()\"\n    role=\"navigation\"\n    [attr.aria-label]=\"ariaLabel()\">\n\n    <!-- Close button (drawer mode only) -->\n    @if (mode() === 'drawer') {\n      <button\n        type=\"button\"\n        class=\"lc-sidenav__close\"\n        (click)=\"handleClose()\"\n        aria-label=\"Close navigation\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\">\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n        </svg>\n      </button>\n    }\n\n    <!-- Navigation items (if provided) -->\n    @if (items().length > 0) {\n      <nav class=\"lc-sidenav__nav\" [class.lc-sidenav__nav--docked]=\"mode() === 'docked'\">\n        @for (item of sortedItems(); track item.id) {\n          <!-- Section headline -->\n          @if (item.isSection) {\n            <div class=\"lc-sidenav__section\">\n              <h2 class=\"lc-sidenav__section-title\">{{ item.label }}</h2>\n              @if (item.children?.length) {\n                <ul class=\"lc-sidenav__section-items\">\n                  @for (child of item.children; track child.id) {\n                    <li>\n                      <a\n                        [routerLink]=\"child.route\"\n                        routerLinkActive=\"lc-sidenav__nav-item--active\"\n                        [routerLinkActiveOptions]=\"{ exact: child.route === '/' }\"\n                        class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                        (click)=\"handleItemClick(child)\"\n                        [attr.aria-current]=\"isItemActive(child) ? 'page' : null\">\n                        @if (child.icon) {\n                          <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                        }\n                        <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n                      </a>\n                    </li>\n                  }\n                </ul>\n              }\n            </div>\n          } @else if (item.children?.length) {\n            <!-- Parent item with children (collapsible group) -->\n            <button\n              type=\"button\"\n              class=\"lc-sidenav__nav-item lc-sidenav__nav-item--parent\"\n              [class.lc-sidenav__nav-item--expanded]=\"isExpanded(item)\"\n              [class.lc-sidenav__nav-item--active]=\"hasActiveChild(item)\"\n              (click)=\"toggleExpanded(item)\"\n              [attr.aria-expanded]=\"isExpanded(item)\">\n              <lc-icon [name]=\"item.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n              <span class=\"lc-sidenav__nav-label\">{{ item.label }}</span>\n              <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" class=\"lc-sidenav__nav-chevron\" />\n            </button>\n            @if (isExpanded(item)) {\n              <div class=\"lc-sidenav__nav-children\">\n                @for (child of item.children; track child.id) {\n                  <a\n                    [routerLink]=\"child.route\"\n                    routerLinkActive=\"lc-sidenav__nav-item--active\"\n                    class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                    (click)=\"handleItemClick(child)\"\n                    [attr.aria-current]=\"isItemActive(child) ? 'page' : null\">\n                    <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                    <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n                  </a>\n                }\n              </div>\n            }\n          } @else {\n            <!-- Simple item without children -->\n            <a\n              [routerLink]=\"item.route\"\n              routerLinkActive=\"lc-sidenav__nav-item--active\"\n              [routerLinkActiveOptions]=\"{ exact: item.route === '/' }\"\n              class=\"lc-sidenav__nav-item\"\n              (click)=\"handleItemClick(item)\"\n              [attr.aria-current]=\"isItemActive(item) ? 'page' : null\"\n              [title]=\"collapsed() ? item.label : ''\">\n              <lc-icon [name]=\"item.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n              <span class=\"lc-sidenav__nav-label\">{{ item.label }}</span>\n            </a>\n          }\n        }\n      </nav>\n    }\n\n    <!-- Content projection (for custom content) -->\n    <div class=\"lc-sidenav__content\" [class.lc-sidenav__content--docked]=\"mode() === 'docked'\">\n      <ng-content></ng-content>\n    </div>\n  </aside>\n</ng-template>\n", styles: [".lc-sidenav-container{position:relative;z-index:1000}.lc-sidenav-container--docked{position:static;z-index:auto;height:100%}.lc-sidenav__overlay{position:fixed;inset:0;background-color:#00000080;opacity:0;animation:fadeIn .3s ease-out forwards;z-index:1000;cursor:pointer}@media(prefers-reduced-motion:reduce){.lc-sidenav__overlay{animation:none;opacity:1}}.lc-sidenav{position:fixed;top:0;bottom:0;background-color:var(--color-background);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(--color-border, #e5e7eb);transform:translate(0);transition:width .3s ease,transform .3s ease}.lc-sidenav--docked:not(.lc-sidenav--open){width:0!important;overflow:hidden;border-right:none}.lc-sidenav--collapsed{width:56px!important;overflow:visible}.lc-sidenav--collapsed .lc-sidenav__nav-label,.lc-sidenav--collapsed .lc-sidenav__nav-chevron,.lc-sidenav--collapsed .lc-sidenav__section-title{display:none}.lc-sidenav--collapsed .lc-sidenav__nav{padding:.5rem;gap:.125rem}.lc-sidenav--collapsed .lc-sidenav__nav-item{justify-content:center;padding:.625rem;gap:0;border-radius:var(--radius-md, .375rem);position:relative}.lc-sidenav--collapsed .lc-sidenav__nav-item:hover:after{content:attr(title);position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:8px;padding:4px 10px;background-color:var(--color-neutral-900, #111827);color:#fff;font-size:.75rem;white-space:nowrap;border-radius:4px;z-index:1002;pointer-events:none}.lc-sidenav--collapsed .lc-sidenav__nav-icon{width:22px;height:22px}.lc-sidenav--collapsed .lc-sidenav__nav-children{display:none}.lc-sidenav--collapsed .lc-sidenav__section{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--color-divider, #e5e7eb)}.lc-sidenav--collapsed .lc-sidenav__content{display:none}.lc-sidenav__close{position:absolute;top:1rem;right:1rem;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;background:none;border:none;border-radius:var(--border-radius-md, .375rem);color:var(--color-text-secondary);cursor:pointer;transition:background-color .2s ease,color .2s ease;z-index:1}.lc-sidenav__close:hover{background-color:var(--color-surface);color:var(--color-text-primary)}.lc-sidenav__close:focus-visible{outline:2px solid var(--color-primary-500, rgb(59, 130, 246));outline-offset:2px}.lc-sidenav__close:active{background-color:var(--color-border)}.lc-sidenav__close svg{width:1.25rem;height:1.25rem}.lc-sidenav__nav{display:flex;flex-direction:column;gap:var(--spacing-1, .25rem);padding:4rem 1rem 1rem}.lc-sidenav__nav--docked{padding-top:1rem;gap:0}.lc-sidenav__section:not(:first-child){margin-top:var(--spacing-4, 1rem);padding-top:var(--spacing-3, .75rem)}.lc-sidenav__section-title{padding:0 var(--spacing-3, .75rem);margin-bottom:var(--spacing-2, .5rem);font-size:var(--font-size-xs, .75rem);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-neutral-500)}.lc-sidenav__section-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--spacing-1, .25rem)}.lc-sidenav__nav-item{display:flex;align-items:center;gap:var(--spacing-3, .75rem);padding:var(--spacing-2, .5rem) var(--spacing-3, .75rem);text-decoration:none;color:var(--color-neutral-700);border-radius:var(--radius-md, .375rem);transition:background-color .2s ease,color .2s ease;font-size:var(--font-size-sm, .875rem);font-weight:500;cursor:pointer}.lc-sidenav__nav-item:hover{background-color:var(--color-neutral-100);color:var(--color-neutral-900)}.lc-sidenav__nav-item:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-sidenav__nav-item--active{background-color:var(--color-primary-50, rgba(59, 130, 246, .1));color:var(--color-primary-700, #1d4ed8);font-weight:600}.lc-sidenav__nav-item--active .lc-sidenav__nav-icon{color:var(--color-primary-600, #2563eb)}.lc-sidenav__nav-icon{width:20px;height:20px;flex-shrink:0}.lc-sidenav__nav-chevron{width:16px;height:16px;flex-shrink:0;margin-left:auto;transition:transform .2s ease}.lc-sidenav__nav-item--expanded .lc-sidenav__nav-chevron{transform:rotate(180deg)}.lc-sidenav__nav-item--parent{width:100%;border:none;background:none;font-family:inherit;text-align:left}.lc-sidenav__nav-children{display:flex;flex-direction:column;gap:var(--spacing-1, .25rem);padding-left:var(--spacing-4, 1rem)}.lc-sidenav__nav-item--child{font-size:var(--font-size-sm, .875rem)}.lc-sidenav__nav-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lc-sidenav__content{flex:1;padding:4rem 1rem 1rem;overflow-y:auto;-webkit-overflow-scrolling:touch}.lc-sidenav__content--docked{padding-top:1rem}.lc-sidenav__content::-webkit-scrollbar{width:.5rem}.lc-sidenav__content::-webkit-scrollbar-track{background:var(--color-surface);border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav__content::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav__content::-webkit-scrollbar-thumb:hover{background:var(--color-text-secondary)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@media(max-width:640px){.lc-sidenav--drawer{width:100%!important;max-width:320px}}@media(max-width:480px){.lc-sidenav--drawer{max-width:280px}}.lc-sidenav__content:focus{outline:none}.lc-sidenav__content a:focus-visible,.lc-sidenav__content button:focus-visible{outline:2px solid var(--color-primary-500, rgb(59, 130, 246));outline-offset:2px;border-radius:var(--border-radius-sm, .25rem)}:host-context([data-theme=dark]) .lc-sidenav__section-title{color:var(--color-neutral-400)}:host-context([data-theme=dark]) .lc-sidenav__nav-item{color:var(--color-neutral-300)}:host-context([data-theme=dark]) .lc-sidenav__nav-item:hover{background-color:var(--color-neutral-800);color:var(--color-neutral-100)}:host-context([data-theme=dark]) .lc-sidenav__nav-item--active{background-color:#3b82f626;color:var(--color-primary-400)}:host-context([data-theme=dark]) .lc-sidenav__nav-item--active .lc-sidenav__nav-icon{color:var(--color-primary-400)}@media print{.lc-sidenav-container,.lc-sidenav__overlay,.lc-sidenav{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: SidenavComponent, decorators: [{
             type: Component,
@@ -6186,7 +6221,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                         '[class.lc-sidenav-container]': 'true',
                         '[class.lc-sidenav-container--docked]': "mode() === 'docked'",
                         '[class.lc-sidenav-container--open]': 'isOpen()',
-                    }, template: "<!-- Drawer mode: render with overlay and conditional visibility -->\n@if (mode() === 'drawer') {\n  @if (isOpen()) {\n    <!-- Overlay backdrop -->\n    @if (hasOverlay()) {\n      <div\n        class=\"lc-sidenav__overlay\"\n        (click)=\"handleClose()\"\n        aria-hidden=\"true\">\n      </div>\n    }\n\n    <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n  }\n}\n\n<!-- Docked mode: always render, visibility controlled by CSS -->\n@if (mode() === 'docked') {\n  <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n}\n\n<!-- Shared sidenav panel template -->\n<ng-template #sidenavPanel>\n  <aside\n    [class]=\"sidenavClasses()\"\n    [ngStyle]=\"sidenavStyles()\"\n    role=\"navigation\"\n    [attr.aria-label]=\"ariaLabel()\">\n\n    <!-- Close button (drawer mode only) -->\n    @if (mode() === 'drawer') {\n      <button\n        type=\"button\"\n        class=\"lc-sidenav__close\"\n        (click)=\"handleClose()\"\n        aria-label=\"Close navigation\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\">\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n        </svg>\n      </button>\n    }\n\n    <!-- Navigation items (if provided) -->\n    @if (items().length > 0) {\n      <nav class=\"lc-sidenav__nav\" [class.lc-sidenav__nav--docked]=\"mode() === 'docked'\">\n        @for (item of sortedItems(); track item.id) {\n          <!-- Section headline -->\n          @if (item.isSection) {\n            <div class=\"lc-sidenav__section\">\n              <h2 class=\"lc-sidenav__section-title\">{{ item.label }}</h2>\n              @if (item.children?.length) {\n                <ul class=\"lc-sidenav__section-items\">\n                  @for (child of item.children; track child.id) {\n                    <li>\n                      <a\n                        [routerLink]=\"child.route\"\n                        routerLinkActive=\"lc-sidenav__nav-item--active\"\n                        [routerLinkActiveOptions]=\"{ exact: child.route === '/' }\"\n                        class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                        (click)=\"handleItemClick(child)\"\n                        [attr.aria-current]=\"isItemActive(child) ? 'page' : null\">\n                        @if (child.icon) {\n                          <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                        }\n                        <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n                      </a>\n                    </li>\n                  }\n                </ul>\n              }\n            </div>\n          } @else if (item.children?.length) {\n            <!-- Parent item with children (collapsible group) -->\n            <button\n              type=\"button\"\n              class=\"lc-sidenav__nav-item lc-sidenav__nav-item--parent\"\n              [class.lc-sidenav__nav-item--expanded]=\"isExpanded(item)\"\n              [class.lc-sidenav__nav-item--active]=\"hasActiveChild(item)\"\n              (click)=\"toggleExpanded(item)\"\n              [attr.aria-expanded]=\"isExpanded(item)\">\n              <lc-icon [name]=\"item.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n              <span class=\"lc-sidenav__nav-label\">{{ item.label }}</span>\n              <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" class=\"lc-sidenav__nav-chevron\" />\n            </button>\n            @if (isExpanded(item)) {\n              <div class=\"lc-sidenav__nav-children\">\n                @for (child of item.children; track child.id) {\n                  <a\n                    [routerLink]=\"child.route\"\n                    routerLinkActive=\"lc-sidenav__nav-item--active\"\n                    class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                    (click)=\"handleItemClick(child)\"\n                    [attr.aria-current]=\"isItemActive(child) ? 'page' : null\">\n                    <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                    <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n                  </a>\n                }\n              </div>\n            }\n          } @else {\n            <!-- Simple item without children -->\n            <a\n              [routerLink]=\"item.route\"\n              routerLinkActive=\"lc-sidenav__nav-item--active\"\n              [routerLinkActiveOptions]=\"{ exact: item.route === '/' }\"\n              class=\"lc-sidenav__nav-item\"\n              (click)=\"handleItemClick(item)\"\n              [attr.aria-current]=\"isItemActive(item) ? 'page' : null\">\n              <lc-icon [name]=\"item.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n              <span class=\"lc-sidenav__nav-label\">{{ item.label }}</span>\n            </a>\n          }\n        }\n      </nav>\n    }\n\n    <!-- Content projection (for custom content) -->\n    <div class=\"lc-sidenav__content\" [class.lc-sidenav__content--docked]=\"mode() === 'docked'\">\n      <ng-content></ng-content>\n    </div>\n  </aside>\n</ng-template>\n", styles: [".lc-sidenav-container{position:relative;z-index:1000}.lc-sidenav-container--docked{position:static;z-index:auto;height:100%}.lc-sidenav__overlay{position:fixed;inset:0;background-color:#00000080;opacity:0;animation:fadeIn .3s ease-out forwards;z-index:1000;cursor:pointer}@media(prefers-reduced-motion:reduce){.lc-sidenav__overlay{animation:none;opacity:1}}.lc-sidenav{position:fixed;top:0;bottom:0;background-color:var(--color-background);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(--color-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__close{position:absolute;top:1rem;right:1rem;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;background:none;border:none;border-radius:var(--border-radius-md, .375rem);color:var(--color-text-secondary);cursor:pointer;transition:background-color .2s ease,color .2s ease;z-index:1}.lc-sidenav__close:hover{background-color:var(--color-surface);color:var(--color-text-primary)}.lc-sidenav__close:focus-visible{outline:2px solid var(--color-primary-500, rgb(59, 130, 246));outline-offset:2px}.lc-sidenav__close:active{background-color:var(--color-border)}.lc-sidenav__close svg{width:1.25rem;height:1.25rem}.lc-sidenav__nav{display:flex;flex-direction:column;gap:var(--spacing-1, .25rem);padding:4rem 1rem 1rem}.lc-sidenav__nav--docked{padding-top:1rem;gap:0}.lc-sidenav__section:not(:first-child){margin-top:var(--spacing-4, 1rem);padding-top:var(--spacing-3, .75rem)}.lc-sidenav__section-title{padding:0 var(--spacing-3, .75rem);margin-bottom:var(--spacing-2, .5rem);font-size:var(--font-size-xs, .75rem);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-neutral-500)}.lc-sidenav__section-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--spacing-1, .25rem)}.lc-sidenav__nav-item{display:flex;align-items:center;gap:var(--spacing-3, .75rem);padding:var(--spacing-2, .5rem) var(--spacing-3, .75rem);text-decoration:none;color:var(--color-neutral-700);border-radius:var(--radius-md, .375rem);transition:background-color .2s ease,color .2s ease;font-size:var(--font-size-sm, .875rem);font-weight:500;cursor:pointer}.lc-sidenav__nav-item:hover{background-color:var(--color-neutral-100);color:var(--color-neutral-900)}.lc-sidenav__nav-item:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-sidenav__nav-item--active{background-color:var(--color-primary-50, rgba(59, 130, 246, .1));color:var(--color-primary-700, #1d4ed8);font-weight:600}.lc-sidenav__nav-item--active .lc-sidenav__nav-icon{color:var(--color-primary-600, #2563eb)}.lc-sidenav__nav-icon{width:20px;height:20px;flex-shrink:0}.lc-sidenav__nav-chevron{width:16px;height:16px;flex-shrink:0;margin-left:auto;transition:transform .2s ease}.lc-sidenav__nav-item--expanded .lc-sidenav__nav-chevron{transform:rotate(180deg)}.lc-sidenav__nav-item--parent{width:100%;border:none;background:none;font-family:inherit;text-align:left}.lc-sidenav__nav-children{display:flex;flex-direction:column;gap:var(--spacing-1, .25rem);padding-left:var(--spacing-4, 1rem)}.lc-sidenav__nav-item--child{font-size:var(--font-size-sm, .875rem)}.lc-sidenav__nav-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lc-sidenav__content{flex:1;padding:4rem 1rem 1rem;overflow-y:auto;-webkit-overflow-scrolling:touch}.lc-sidenav__content--docked{padding-top:1rem}.lc-sidenav__content::-webkit-scrollbar{width:.5rem}.lc-sidenav__content::-webkit-scrollbar-track{background:var(--color-surface);border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav__content::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav__content::-webkit-scrollbar-thumb:hover{background:var(--color-text-secondary)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@media(max-width:640px){.lc-sidenav--drawer{width:100%!important;max-width:320px}}@media(max-width:480px){.lc-sidenav--drawer{max-width:280px}}.lc-sidenav__content:focus{outline:none}.lc-sidenav__content a:focus-visible,.lc-sidenav__content button:focus-visible{outline:2px solid var(--color-primary-500, rgb(59, 130, 246));outline-offset:2px;border-radius:var(--border-radius-sm, .25rem)}:host-context([data-theme=dark]) .lc-sidenav__section-title{color:var(--color-neutral-400)}:host-context([data-theme=dark]) .lc-sidenav__nav-item{color:var(--color-neutral-300)}:host-context([data-theme=dark]) .lc-sidenav__nav-item:hover{background-color:var(--color-neutral-800);color:var(--color-neutral-100)}:host-context([data-theme=dark]) .lc-sidenav__nav-item--active{background-color:#3b82f626;color:var(--color-primary-400)}:host-context([data-theme=dark]) .lc-sidenav__nav-item--active .lc-sidenav__nav-icon{color:var(--color-primary-400)}@media print{.lc-sidenav-container,.lc-sidenav__overlay,.lc-sidenav{display:none}}\n"] }]
+                    }, template: "<!-- Drawer mode: render with overlay and conditional visibility -->\n@if (mode() === 'drawer') {\n  @if (isOpen()) {\n    <!-- Overlay backdrop -->\n    @if (hasOverlay()) {\n      <div\n        class=\"lc-sidenav__overlay\"\n        (click)=\"handleClose()\"\n        aria-hidden=\"true\">\n      </div>\n    }\n\n    <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n  }\n}\n\n<!-- Docked mode: always render, visibility controlled by CSS -->\n@if (mode() === 'docked') {\n  <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n}\n\n<!-- Shared sidenav panel template -->\n<ng-template #sidenavPanel>\n  <aside\n    [class]=\"sidenavClasses()\"\n    [ngStyle]=\"sidenavStyles()\"\n    role=\"navigation\"\n    [attr.aria-label]=\"ariaLabel()\">\n\n    <!-- Close button (drawer mode only) -->\n    @if (mode() === 'drawer') {\n      <button\n        type=\"button\"\n        class=\"lc-sidenav__close\"\n        (click)=\"handleClose()\"\n        aria-label=\"Close navigation\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\">\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n        </svg>\n      </button>\n    }\n\n    <!-- Navigation items (if provided) -->\n    @if (items().length > 0) {\n      <nav class=\"lc-sidenav__nav\" [class.lc-sidenav__nav--docked]=\"mode() === 'docked'\">\n        @for (item of sortedItems(); track item.id) {\n          <!-- Section headline -->\n          @if (item.isSection) {\n            <div class=\"lc-sidenav__section\">\n              <h2 class=\"lc-sidenav__section-title\">{{ item.label }}</h2>\n              @if (item.children?.length) {\n                <ul class=\"lc-sidenav__section-items\">\n                  @for (child of item.children; track child.id) {\n                    <li>\n                      <a\n                        [routerLink]=\"child.route\"\n                        routerLinkActive=\"lc-sidenav__nav-item--active\"\n                        [routerLinkActiveOptions]=\"{ exact: child.route === '/' }\"\n                        class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                        (click)=\"handleItemClick(child)\"\n                        [attr.aria-current]=\"isItemActive(child) ? 'page' : null\">\n                        @if (child.icon) {\n                          <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                        }\n                        <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n                      </a>\n                    </li>\n                  }\n                </ul>\n              }\n            </div>\n          } @else if (item.children?.length) {\n            <!-- Parent item with children (collapsible group) -->\n            <button\n              type=\"button\"\n              class=\"lc-sidenav__nav-item lc-sidenav__nav-item--parent\"\n              [class.lc-sidenav__nav-item--expanded]=\"isExpanded(item)\"\n              [class.lc-sidenav__nav-item--active]=\"hasActiveChild(item)\"\n              (click)=\"toggleExpanded(item)\"\n              [attr.aria-expanded]=\"isExpanded(item)\">\n              <lc-icon [name]=\"item.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n              <span class=\"lc-sidenav__nav-label\">{{ item.label }}</span>\n              <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" class=\"lc-sidenav__nav-chevron\" />\n            </button>\n            @if (isExpanded(item)) {\n              <div class=\"lc-sidenav__nav-children\">\n                @for (child of item.children; track child.id) {\n                  <a\n                    [routerLink]=\"child.route\"\n                    routerLinkActive=\"lc-sidenav__nav-item--active\"\n                    class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                    (click)=\"handleItemClick(child)\"\n                    [attr.aria-current]=\"isItemActive(child) ? 'page' : null\">\n                    <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                    <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n                  </a>\n                }\n              </div>\n            }\n          } @else {\n            <!-- Simple item without children -->\n            <a\n              [routerLink]=\"item.route\"\n              routerLinkActive=\"lc-sidenav__nav-item--active\"\n              [routerLinkActiveOptions]=\"{ exact: item.route === '/' }\"\n              class=\"lc-sidenav__nav-item\"\n              (click)=\"handleItemClick(item)\"\n              [attr.aria-current]=\"isItemActive(item) ? 'page' : null\"\n              [title]=\"collapsed() ? item.label : ''\">\n              <lc-icon [name]=\"item.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n              <span class=\"lc-sidenav__nav-label\">{{ item.label }}</span>\n            </a>\n          }\n        }\n      </nav>\n    }\n\n    <!-- Content projection (for custom content) -->\n    <div class=\"lc-sidenav__content\" [class.lc-sidenav__content--docked]=\"mode() === 'docked'\">\n      <ng-content></ng-content>\n    </div>\n  </aside>\n</ng-template>\n", styles: [".lc-sidenav-container{position:relative;z-index:1000}.lc-sidenav-container--docked{position:static;z-index:auto;height:100%}.lc-sidenav__overlay{position:fixed;inset:0;background-color:#00000080;opacity:0;animation:fadeIn .3s ease-out forwards;z-index:1000;cursor:pointer}@media(prefers-reduced-motion:reduce){.lc-sidenav__overlay{animation:none;opacity:1}}.lc-sidenav{position:fixed;top:0;bottom:0;background-color:var(--color-background);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(--color-border, #e5e7eb);transform:translate(0);transition:width .3s ease,transform .3s ease}.lc-sidenav--docked:not(.lc-sidenav--open){width:0!important;overflow:hidden;border-right:none}.lc-sidenav--collapsed{width:56px!important;overflow:visible}.lc-sidenav--collapsed .lc-sidenav__nav-label,.lc-sidenav--collapsed .lc-sidenav__nav-chevron,.lc-sidenav--collapsed .lc-sidenav__section-title{display:none}.lc-sidenav--collapsed .lc-sidenav__nav{padding:.5rem;gap:.125rem}.lc-sidenav--collapsed .lc-sidenav__nav-item{justify-content:center;padding:.625rem;gap:0;border-radius:var(--radius-md, .375rem);position:relative}.lc-sidenav--collapsed .lc-sidenav__nav-item:hover:after{content:attr(title);position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:8px;padding:4px 10px;background-color:var(--color-neutral-900, #111827);color:#fff;font-size:.75rem;white-space:nowrap;border-radius:4px;z-index:1002;pointer-events:none}.lc-sidenav--collapsed .lc-sidenav__nav-icon{width:22px;height:22px}.lc-sidenav--collapsed .lc-sidenav__nav-children{display:none}.lc-sidenav--collapsed .lc-sidenav__section{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--color-divider, #e5e7eb)}.lc-sidenav--collapsed .lc-sidenav__content{display:none}.lc-sidenav__close{position:absolute;top:1rem;right:1rem;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;background:none;border:none;border-radius:var(--border-radius-md, .375rem);color:var(--color-text-secondary);cursor:pointer;transition:background-color .2s ease,color .2s ease;z-index:1}.lc-sidenav__close:hover{background-color:var(--color-surface);color:var(--color-text-primary)}.lc-sidenav__close:focus-visible{outline:2px solid var(--color-primary-500, rgb(59, 130, 246));outline-offset:2px}.lc-sidenav__close:active{background-color:var(--color-border)}.lc-sidenav__close svg{width:1.25rem;height:1.25rem}.lc-sidenav__nav{display:flex;flex-direction:column;gap:var(--spacing-1, .25rem);padding:4rem 1rem 1rem}.lc-sidenav__nav--docked{padding-top:1rem;gap:0}.lc-sidenav__section:not(:first-child){margin-top:var(--spacing-4, 1rem);padding-top:var(--spacing-3, .75rem)}.lc-sidenav__section-title{padding:0 var(--spacing-3, .75rem);margin-bottom:var(--spacing-2, .5rem);font-size:var(--font-size-xs, .75rem);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-neutral-500)}.lc-sidenav__section-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--spacing-1, .25rem)}.lc-sidenav__nav-item{display:flex;align-items:center;gap:var(--spacing-3, .75rem);padding:var(--spacing-2, .5rem) var(--spacing-3, .75rem);text-decoration:none;color:var(--color-neutral-700);border-radius:var(--radius-md, .375rem);transition:background-color .2s ease,color .2s ease;font-size:var(--font-size-sm, .875rem);font-weight:500;cursor:pointer}.lc-sidenav__nav-item:hover{background-color:var(--color-neutral-100);color:var(--color-neutral-900)}.lc-sidenav__nav-item:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-sidenav__nav-item--active{background-color:var(--color-primary-50, rgba(59, 130, 246, .1));color:var(--color-primary-700, #1d4ed8);font-weight:600}.lc-sidenav__nav-item--active .lc-sidenav__nav-icon{color:var(--color-primary-600, #2563eb)}.lc-sidenav__nav-icon{width:20px;height:20px;flex-shrink:0}.lc-sidenav__nav-chevron{width:16px;height:16px;flex-shrink:0;margin-left:auto;transition:transform .2s ease}.lc-sidenav__nav-item--expanded .lc-sidenav__nav-chevron{transform:rotate(180deg)}.lc-sidenav__nav-item--parent{width:100%;border:none;background:none;font-family:inherit;text-align:left}.lc-sidenav__nav-children{display:flex;flex-direction:column;gap:var(--spacing-1, .25rem);padding-left:var(--spacing-4, 1rem)}.lc-sidenav__nav-item--child{font-size:var(--font-size-sm, .875rem)}.lc-sidenav__nav-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lc-sidenav__content{flex:1;padding:4rem 1rem 1rem;overflow-y:auto;-webkit-overflow-scrolling:touch}.lc-sidenav__content--docked{padding-top:1rem}.lc-sidenav__content::-webkit-scrollbar{width:.5rem}.lc-sidenav__content::-webkit-scrollbar-track{background:var(--color-surface);border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav__content::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav__content::-webkit-scrollbar-thumb:hover{background:var(--color-text-secondary)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@media(max-width:640px){.lc-sidenav--drawer{width:100%!important;max-width:320px}}@media(max-width:480px){.lc-sidenav--drawer{max-width:280px}}.lc-sidenav__content:focus{outline:none}.lc-sidenav__content a:focus-visible,.lc-sidenav__content button:focus-visible{outline:2px solid var(--color-primary-500, rgb(59, 130, 246));outline-offset:2px;border-radius:var(--border-radius-sm, .25rem)}:host-context([data-theme=dark]) .lc-sidenav__section-title{color:var(--color-neutral-400)}:host-context([data-theme=dark]) .lc-sidenav__nav-item{color:var(--color-neutral-300)}:host-context([data-theme=dark]) .lc-sidenav__nav-item:hover{background-color:var(--color-neutral-800);color:var(--color-neutral-100)}:host-context([data-theme=dark]) .lc-sidenav__nav-item--active{background-color:#3b82f626;color:var(--color-primary-400)}:host-context([data-theme=dark]) .lc-sidenav__nav-item--active .lc-sidenav__nav-icon{color:var(--color-primary-400)}@media print{.lc-sidenav-container,.lc-sidenav__overlay,.lc-sidenav{display:none}}\n"] }]
         }], propDecorators: { isOpenInput: [{
                 type: Input
             }], modeInput: [{
@@ -6203,6 +6238,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 type: Input
             }], activeRouteInput: [{
                 type: Input
+            }], collapsedInput: [{
+                type: Input
             }], closed: [{
                 type: Output
             }], itemClicked: [{
@@ -6663,6 +6700,8 @@ class ListComponent {
     orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
     /** Visual variant */
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Size of list items */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     /** Whether to show dividers between items */
     showDividers = input(false, ...(ngDevMode ? [{ debugName: "showDividers" }] : /* istanbul ignore next */ []));
     /** Event emitted when an item is clicked */
@@ -6676,6 +6715,7 @@ class ListComponent {
         const classes = ['lc-list'];
         classes.push(`lc-list--${this.orientation()}`);
         classes.push(`lc-list--${this.variant()}`);
+        classes.push(`lc-list--${this.size()}`);
         if (this.showDividers()) {
             classes.push('lc-list--with-dividers');
         }
@@ -6689,6 +6729,9 @@ class ListComponent {
         if (item.disabled) {
             classes.push('lc-list__item--disabled');
         }
+        if (item.selected) {
+            classes.push('lc-list__item--selected');
+        }
         return classes.join(' ');
     }
     /**
@@ -6706,15 +6749,15 @@ class ListComponent {
         this.actionClick.emit(item);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: ListComponent, isStandalone: true, selector: "lc-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showDividers: { classPropertyName: "showDividers", publicName: "showDividers", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", actionClick: "actionClick" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true }], ngImport: i0, template: "<div [class]=\"listClasses()\" role=\"list\">\n  @for (item of items(); track item.id || $index) {\n    <div\n      [class]=\"getItemClasses(item)\"\n      role=\"listitem\"\n      [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n      (click)=\"onItemClick(item)\"\n    >\n      @if (itemTemplate) {\n        <ng-container *ngTemplateOutlet=\"itemTemplate.template; context: { $implicit: item }\"></ng-container>\n      } @else {\n        @if (item.icon) {\n          <lc-icon [name]=\"item.icon\" class=\"lc-list__icon\" size=\"sm\" />\n        }\n        <span class=\"lc-list__label\">{{ item.label }}</span>\n        @if (item.action) {\n          <lc-button\n            variant=\"ghost\"\n            size=\"xs\"\n            class=\"lc-list__action\"\n            (clicked)=\"onActionClick(item)\"\n          >\n            {{ item.action }}\n          </lc-button>\n        }\n      }\n    </div>\n  }\n</div>\n", styles: [".lc-list{display:flex;width:100%;background-color:var(--color-surface, #ffffff);border-radius:var(--radius-md);overflow:hidden}.lc-list--vertical{flex-direction:column}.lc-list--vertical .lc-list__item{border-bottom:1px solid transparent}.lc-list--vertical .lc-list__item:last-child{border-bottom:none}.lc-list--vertical.lc-list--with-dividers .lc-list__item{border-bottom-color:var(--color-neutral-200, #e5e7eb)}.lc-list--horizontal{flex-direction:row}.lc-list--horizontal .lc-list__item{border-right:1px solid transparent;flex:1}.lc-list--horizontal .lc-list__item:last-child{border-right:none}.lc-list--horizontal.lc-list--with-dividers .lc-list__item{border-right-color:var(--color-neutral-200, #e5e7eb)}.lc-list__item{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--spacing-3) var(--spacing-4);cursor:pointer;transition:background-color .2s ease}.lc-list__item:hover:not(.lc-list__item--disabled){background-color:var(--color-neutral-100, #f3f4f6)}.lc-list__item:active:not(.lc-list__item--disabled){background-color:var(--color-neutral-200, #e5e7eb)}.lc-list__item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.lc-list__icon{flex-shrink:0;color:var(--color-neutral-500, #6b7280)}.lc-list__label{flex:1;color:var(--color-text-primary, #111827);font-size:var(--font-size-base);line-height:var(--line-height-base)}.lc-list__action{flex-shrink:0}.lc-list--card{background:transparent;gap:.5rem;overflow:visible}.lc-list--card .lc-list__item{flex-direction:column;align-items:stretch;gap:.375rem;padding:.75rem 1rem;border-radius:var(--border-radius-md, .5rem);background:var(--color-neutral-50, #f9fafb);border:1px solid var(--color-neutral-200, #e5e7eb);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.lc-list--card .lc-list__item:hover:not(.lc-list__item--disabled){background:var(--color-neutral-100, #f3f4f6);border-color:var(--color-neutral-300, #d1d5db);box-shadow:0 1px 3px #0000000f}.lc-list--card .lc-list__item:active:not(.lc-list__item--disabled){background:var(--color-neutral-200, #e5e7eb)}.lc-list--card.lc-list--with-dividers .lc-list__item{border-bottom-color:transparent}:host-context([data-theme=dark]) .lc-list{background-color:var(--color-neutral-900, #111827)}:host-context([data-theme=dark]) .lc-list--with-dividers .lc-list__item{border-bottom-color:var(--color-neutral-700, #374151)}:host-context([data-theme=dark]) .lc-list__item:hover:not(.lc-list__item--disabled){background-color:var(--color-neutral-800, #1f2937)}:host-context([data-theme=dark]) .lc-list__item:active:not(.lc-list__item--disabled){background-color:var(--color-neutral-700, #374151)}:host-context([data-theme=dark]) .lc-list__icon{color:var(--color-neutral-400, #9ca3af)}:host-context([data-theme=dark]) .lc-list__label{color:var(--color-neutral-100, #f3f4f6)}:host-context([data-theme=dark]) .lc-list--card .lc-list__item{background:var(--color-neutral-800, #1f2937);border-color:var(--color-neutral-700, #374151)}:host-context([data-theme=dark]) .lc-list--card .lc-list__item:hover:not(.lc-list__item--disabled){background:var(--color-neutral-700, #374151);border-color:var(--color-neutral-600, #4b5563)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }, { kind: "component", type: ButtonComponent, selector: "lc-button", inputs: ["variant", "size", "disabled", "loading", "isLoading", "iconOnly", "fullWidth", "ariaLabel", "type"], outputs: ["clicked", "focused", "blurred"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: ListComponent, isStandalone: true, selector: "lc-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showDividers: { classPropertyName: "showDividers", publicName: "showDividers", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", actionClick: "actionClick" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true }], ngImport: i0, template: "<div [class]=\"listClasses()\" role=\"list\">\n  @for (item of items(); track item.id || $index) {\n    <div\n      [class]=\"getItemClasses(item)\"\n      role=\"listitem\"\n      [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n      (click)=\"onItemClick(item)\"\n    >\n      @if (itemTemplate) {\n        <ng-container *ngTemplateOutlet=\"itemTemplate.template; context: { $implicit: item }\"></ng-container>\n      } @else {\n        <!-- Leading: Avatar or Icon -->\n        @if (item.avatar) {\n          <div class=\"lc-list__avatar\">\n            @if (item.avatar.startsWith('http') || item.avatar.startsWith('/') || item.avatar.startsWith('data:')) {\n              <img [src]=\"item.avatar\" [alt]=\"item.label\" class=\"lc-list__avatar-img\" />\n            } @else {\n              <span class=\"lc-list__avatar-initials\">{{ item.avatar }}</span>\n            }\n          </div>\n        } @else if (item.icon) {\n          <lc-icon [name]=\"item.icon\" class=\"lc-list__icon\" size=\"sm\" />\n        }\n\n        <!-- Content: Label, Subtitle, Description -->\n        <div class=\"lc-list__content\">\n          <span class=\"lc-list__label\">{{ item.label }}</span>\n          @if (item.subtitle) {\n            <span class=\"lc-list__subtitle\">{{ item.subtitle }}</span>\n          }\n          @if (item.description) {\n            <span class=\"lc-list__description\">{{ item.description }}</span>\n          }\n        </div>\n\n        <!-- Trailing: Badge, Metadata, Action -->\n        <div class=\"lc-list__trailing\">\n          @if (item.badge) {\n            <span class=\"lc-list__badge lc-list__badge--{{ item.badgeVariant || 'default' }}\">{{ item.badge }}</span>\n          }\n          @if (item.metadata) {\n            <span class=\"lc-list__metadata\">{{ item.metadata }}</span>\n          }\n          @if (item.action) {\n            <lc-button\n              variant=\"ghost\"\n              size=\"xs\"\n              class=\"lc-list__action\"\n              (clicked)=\"onActionClick(item)\"\n            >\n              {{ item.action }}\n            </lc-button>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".lc-list{display:flex;width:100%;background-color:var(--color-surface, #ffffff);border-radius:var(--radius-md);overflow:hidden}.lc-list--vertical{flex-direction:column}.lc-list--vertical .lc-list__item{border-bottom:1px solid transparent}.lc-list--vertical .lc-list__item:last-child{border-bottom:none}.lc-list--vertical.lc-list--with-dividers .lc-list__item{border-bottom-color:var(--color-neutral-200, #e5e7eb)}.lc-list--horizontal{flex-direction:row}.lc-list--horizontal .lc-list__item{border-right:1px solid transparent;flex:1}.lc-list--horizontal .lc-list__item:last-child{border-right:none}.lc-list--horizontal.lc-list--with-dividers .lc-list__item{border-right-color:var(--color-neutral-200, #e5e7eb)}.lc-list__item{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--spacing-3) var(--spacing-4);cursor:pointer;transition:background-color .2s ease}.lc-list__item:hover:not(.lc-list__item--disabled){background-color:var(--color-neutral-100, #f3f4f6)}.lc-list__item:active:not(.lc-list__item--disabled){background-color:var(--color-neutral-200, #e5e7eb)}.lc-list__item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.lc-list__icon{flex-shrink:0;color:var(--color-neutral-500, #6b7280)}.lc-list__label{flex:1;color:var(--color-text-primary, #111827);font-size:var(--font-size-base);line-height:var(--line-height-base)}.lc-list__avatar{flex-shrink:0;width:40px;height:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background-color:var(--color-primary-100, #dbeafe)}.lc-list__avatar-img{width:100%;height:100%;object-fit:cover}.lc-list__avatar-initials{font-size:var(--font-size-sm, .875rem);font-weight:600;color:var(--color-primary-700, #1d4ed8);text-transform:uppercase;line-height:1;-webkit-user-select:none;user-select:none}.lc-list__content{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.lc-list__subtitle{font-size:var(--font-size-sm, .875rem);color:var(--color-neutral-500, #6b7280);line-height:var(--line-height-sm, 1.25rem)}.lc-list__description{font-size:var(--font-size-xs, .75rem);color:var(--color-neutral-400, #9ca3af);line-height:var(--line-height-xs, 1rem);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.lc-list__trailing{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:4px}.lc-list__action{flex-shrink:0}.lc-list__badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:9999px;font-size:var(--font-size-xs, .75rem);font-weight:500;line-height:1.25rem;white-space:nowrap}.lc-list__badge--default{background-color:var(--color-neutral-100, #f3f4f6);color:var(--color-neutral-700, #374151)}.lc-list__badge--primary{background-color:var(--color-primary-100, #dbeafe);color:var(--color-primary-700, #1d4ed8)}.lc-list__badge--success{background-color:var(--color-success-100, #dcfce7);color:var(--color-success-700, #15803d)}.lc-list__badge--warning{background-color:var(--color-warning-100, #fef3c7);color:var(--color-warning-700, #a16207)}.lc-list__badge--error{background-color:var(--color-error-100, #fee2e2);color:var(--color-error-700, #b91c1c)}.lc-list__metadata{font-size:var(--font-size-xs, .75rem);color:var(--color-neutral-400, #9ca3af);white-space:nowrap}.lc-list__item--selected{background-color:var(--color-primary-50, #eff6ff)}.lc-list__item--selected:hover:not(.lc-list__item--disabled){background-color:var(--color-primary-100, #dbeafe)}.lc-list--sm .lc-list__item{padding:var(--spacing-2) var(--spacing-3);gap:var(--spacing-2)}.lc-list--sm .lc-list__avatar{width:32px;height:32px}.lc-list--sm .lc-list__avatar-initials{font-size:var(--font-size-xs, .75rem)}.lc-list--sm .lc-list__label{font-size:var(--font-size-sm, .875rem)}.lc-list--sm .lc-list__subtitle{font-size:var(--font-size-xs, .75rem)}.lc-list--sm .lc-list__description{display:none}.lc-list--lg .lc-list__item{padding:var(--spacing-4) var(--spacing-5);gap:var(--spacing-4)}.lc-list--lg .lc-list__avatar{width:48px;height:48px}.lc-list--lg .lc-list__avatar-initials{font-size:var(--font-size-base, 1rem)}.lc-list--lg .lc-list__label{font-size:var(--font-size-lg, 1.125rem)}.lc-list--lg .lc-list__content{gap:4px}.lc-list--card{background:transparent;gap:.5rem;overflow:visible}.lc-list--card .lc-list__item{padding:.75rem 1rem;border-radius:var(--border-radius-md, .5rem);background:var(--color-neutral-50, #f9fafb);border:1px solid var(--color-neutral-200, #e5e7eb);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.lc-list--card .lc-list__item:hover:not(.lc-list__item--disabled){background:var(--color-neutral-100, #f3f4f6);border-color:var(--color-neutral-300, #d1d5db);box-shadow:0 1px 3px #0000000f}.lc-list--card .lc-list__item:active:not(.lc-list__item--disabled){background:var(--color-neutral-200, #e5e7eb)}.lc-list--card.lc-list--with-dividers .lc-list__item{border-bottom-color:transparent}:host-context([data-theme=dark]) .lc-list{background-color:var(--color-neutral-900, #111827)}:host-context([data-theme=dark]) .lc-list--with-dividers .lc-list__item{border-bottom-color:var(--color-neutral-700, #374151)}:host-context([data-theme=dark]) .lc-list__item:hover:not(.lc-list__item--disabled){background-color:var(--color-neutral-800, #1f2937)}:host-context([data-theme=dark]) .lc-list__item:active:not(.lc-list__item--disabled){background-color:var(--color-neutral-700, #374151)}:host-context([data-theme=dark]) .lc-list__icon{color:var(--color-neutral-400, #9ca3af)}:host-context([data-theme=dark]) .lc-list__label{color:var(--color-neutral-100, #f3f4f6)}:host-context([data-theme=dark]) .lc-list__subtitle{color:var(--color-neutral-400, #9ca3af)}:host-context([data-theme=dark]) .lc-list__description{color:var(--color-neutral-500, #6b7280)}:host-context([data-theme=dark]) .lc-list__metadata{color:var(--color-neutral-500, #6b7280)}:host-context([data-theme=dark]) .lc-list__avatar{background-color:var(--color-primary-900, #1e3a5f)}:host-context([data-theme=dark]) .lc-list__avatar-initials{color:var(--color-primary-300, #93c5fd)}:host-context([data-theme=dark]) .lc-list__badge--default{background-color:var(--color-neutral-800, #1f2937);color:var(--color-neutral-300, #d1d5db)}:host-context([data-theme=dark]) .lc-list__badge--primary{background-color:var(--color-primary-900, #1e3a5f);color:var(--color-primary-300, #93c5fd)}:host-context([data-theme=dark]) .lc-list__badge--success{background-color:var(--color-success-900, #14532d);color:var(--color-success-300, #86efac)}:host-context([data-theme=dark]) .lc-list__badge--warning{background-color:var(--color-warning-900, #78350f);color:var(--color-warning-300, #fcd34d)}:host-context([data-theme=dark]) .lc-list__badge--error{background-color:var(--color-error-900, #7f1d1d);color:var(--color-error-300, #fca5a5)}:host-context([data-theme=dark]) .lc-list__item--selected{background-color:var(--color-primary-900, #1e3a5f)}:host-context([data-theme=dark]) .lc-list__item--selected:hover:not(.lc-list__item--disabled){background-color:var(--color-primary-800, #1e40af)}:host-context([data-theme=dark]) .lc-list--card .lc-list__item{background:var(--color-neutral-800, #1f2937);border-color:var(--color-neutral-700, #374151)}:host-context([data-theme=dark]) .lc-list--card .lc-list__item:hover:not(.lc-list__item--disabled){background:var(--color-neutral-700, #374151);border-color:var(--color-neutral-600, #4b5563)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }, { kind: "component", type: ButtonComponent, selector: "lc-button", inputs: ["variant", "size", "disabled", "loading", "isLoading", "iconOnly", "fullWidth", "ariaLabel", "type"], outputs: ["clicked", "focused", "blurred"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lc-list', standalone: true, imports: [CommonModule, IconComponent, ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"listClasses()\" role=\"list\">\n  @for (item of items(); track item.id || $index) {\n    <div\n      [class]=\"getItemClasses(item)\"\n      role=\"listitem\"\n      [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n      (click)=\"onItemClick(item)\"\n    >\n      @if (itemTemplate) {\n        <ng-container *ngTemplateOutlet=\"itemTemplate.template; context: { $implicit: item }\"></ng-container>\n      } @else {\n        @if (item.icon) {\n          <lc-icon [name]=\"item.icon\" class=\"lc-list__icon\" size=\"sm\" />\n        }\n        <span class=\"lc-list__label\">{{ item.label }}</span>\n        @if (item.action) {\n          <lc-button\n            variant=\"ghost\"\n            size=\"xs\"\n            class=\"lc-list__action\"\n            (clicked)=\"onActionClick(item)\"\n          >\n            {{ item.action }}\n          </lc-button>\n        }\n      }\n    </div>\n  }\n</div>\n", styles: [".lc-list{display:flex;width:100%;background-color:var(--color-surface, #ffffff);border-radius:var(--radius-md);overflow:hidden}.lc-list--vertical{flex-direction:column}.lc-list--vertical .lc-list__item{border-bottom:1px solid transparent}.lc-list--vertical .lc-list__item:last-child{border-bottom:none}.lc-list--vertical.lc-list--with-dividers .lc-list__item{border-bottom-color:var(--color-neutral-200, #e5e7eb)}.lc-list--horizontal{flex-direction:row}.lc-list--horizontal .lc-list__item{border-right:1px solid transparent;flex:1}.lc-list--horizontal .lc-list__item:last-child{border-right:none}.lc-list--horizontal.lc-list--with-dividers .lc-list__item{border-right-color:var(--color-neutral-200, #e5e7eb)}.lc-list__item{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--spacing-3) var(--spacing-4);cursor:pointer;transition:background-color .2s ease}.lc-list__item:hover:not(.lc-list__item--disabled){background-color:var(--color-neutral-100, #f3f4f6)}.lc-list__item:active:not(.lc-list__item--disabled){background-color:var(--color-neutral-200, #e5e7eb)}.lc-list__item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.lc-list__icon{flex-shrink:0;color:var(--color-neutral-500, #6b7280)}.lc-list__label{flex:1;color:var(--color-text-primary, #111827);font-size:var(--font-size-base);line-height:var(--line-height-base)}.lc-list__action{flex-shrink:0}.lc-list--card{background:transparent;gap:.5rem;overflow:visible}.lc-list--card .lc-list__item{flex-direction:column;align-items:stretch;gap:.375rem;padding:.75rem 1rem;border-radius:var(--border-radius-md, .5rem);background:var(--color-neutral-50, #f9fafb);border:1px solid var(--color-neutral-200, #e5e7eb);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.lc-list--card .lc-list__item:hover:not(.lc-list__item--disabled){background:var(--color-neutral-100, #f3f4f6);border-color:var(--color-neutral-300, #d1d5db);box-shadow:0 1px 3px #0000000f}.lc-list--card .lc-list__item:active:not(.lc-list__item--disabled){background:var(--color-neutral-200, #e5e7eb)}.lc-list--card.lc-list--with-dividers .lc-list__item{border-bottom-color:transparent}:host-context([data-theme=dark]) .lc-list{background-color:var(--color-neutral-900, #111827)}:host-context([data-theme=dark]) .lc-list--with-dividers .lc-list__item{border-bottom-color:var(--color-neutral-700, #374151)}:host-context([data-theme=dark]) .lc-list__item:hover:not(.lc-list__item--disabled){background-color:var(--color-neutral-800, #1f2937)}:host-context([data-theme=dark]) .lc-list__item:active:not(.lc-list__item--disabled){background-color:var(--color-neutral-700, #374151)}:host-context([data-theme=dark]) .lc-list__icon{color:var(--color-neutral-400, #9ca3af)}:host-context([data-theme=dark]) .lc-list__label{color:var(--color-neutral-100, #f3f4f6)}:host-context([data-theme=dark]) .lc-list--card .lc-list__item{background:var(--color-neutral-800, #1f2937);border-color:var(--color-neutral-700, #374151)}:host-context([data-theme=dark]) .lc-list--card .lc-list__item:hover:not(.lc-list__item--disabled){background:var(--color-neutral-700, #374151);border-color:var(--color-neutral-600, #4b5563)}\n"] }]
+            args: [{ selector: 'lc-list', standalone: true, imports: [CommonModule, IconComponent, ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"listClasses()\" role=\"list\">\n  @for (item of items(); track item.id || $index) {\n    <div\n      [class]=\"getItemClasses(item)\"\n      role=\"listitem\"\n      [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n      (click)=\"onItemClick(item)\"\n    >\n      @if (itemTemplate) {\n        <ng-container *ngTemplateOutlet=\"itemTemplate.template; context: { $implicit: item }\"></ng-container>\n      } @else {\n        <!-- Leading: Avatar or Icon -->\n        @if (item.avatar) {\n          <div class=\"lc-list__avatar\">\n            @if (item.avatar.startsWith('http') || item.avatar.startsWith('/') || item.avatar.startsWith('data:')) {\n              <img [src]=\"item.avatar\" [alt]=\"item.label\" class=\"lc-list__avatar-img\" />\n            } @else {\n              <span class=\"lc-list__avatar-initials\">{{ item.avatar }}</span>\n            }\n          </div>\n        } @else if (item.icon) {\n          <lc-icon [name]=\"item.icon\" class=\"lc-list__icon\" size=\"sm\" />\n        }\n\n        <!-- Content: Label, Subtitle, Description -->\n        <div class=\"lc-list__content\">\n          <span class=\"lc-list__label\">{{ item.label }}</span>\n          @if (item.subtitle) {\n            <span class=\"lc-list__subtitle\">{{ item.subtitle }}</span>\n          }\n          @if (item.description) {\n            <span class=\"lc-list__description\">{{ item.description }}</span>\n          }\n        </div>\n\n        <!-- Trailing: Badge, Metadata, Action -->\n        <div class=\"lc-list__trailing\">\n          @if (item.badge) {\n            <span class=\"lc-list__badge lc-list__badge--{{ item.badgeVariant || 'default' }}\">{{ item.badge }}</span>\n          }\n          @if (item.metadata) {\n            <span class=\"lc-list__metadata\">{{ item.metadata }}</span>\n          }\n          @if (item.action) {\n            <lc-button\n              variant=\"ghost\"\n              size=\"xs\"\n              class=\"lc-list__action\"\n              (clicked)=\"onActionClick(item)\"\n            >\n              {{ item.action }}\n            </lc-button>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".lc-list{display:flex;width:100%;background-color:var(--color-surface, #ffffff);border-radius:var(--radius-md);overflow:hidden}.lc-list--vertical{flex-direction:column}.lc-list--vertical .lc-list__item{border-bottom:1px solid transparent}.lc-list--vertical .lc-list__item:last-child{border-bottom:none}.lc-list--vertical.lc-list--with-dividers .lc-list__item{border-bottom-color:var(--color-neutral-200, #e5e7eb)}.lc-list--horizontal{flex-direction:row}.lc-list--horizontal .lc-list__item{border-right:1px solid transparent;flex:1}.lc-list--horizontal .lc-list__item:last-child{border-right:none}.lc-list--horizontal.lc-list--with-dividers .lc-list__item{border-right-color:var(--color-neutral-200, #e5e7eb)}.lc-list__item{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--spacing-3) var(--spacing-4);cursor:pointer;transition:background-color .2s ease}.lc-list__item:hover:not(.lc-list__item--disabled){background-color:var(--color-neutral-100, #f3f4f6)}.lc-list__item:active:not(.lc-list__item--disabled){background-color:var(--color-neutral-200, #e5e7eb)}.lc-list__item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.lc-list__icon{flex-shrink:0;color:var(--color-neutral-500, #6b7280)}.lc-list__label{flex:1;color:var(--color-text-primary, #111827);font-size:var(--font-size-base);line-height:var(--line-height-base)}.lc-list__avatar{flex-shrink:0;width:40px;height:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background-color:var(--color-primary-100, #dbeafe)}.lc-list__avatar-img{width:100%;height:100%;object-fit:cover}.lc-list__avatar-initials{font-size:var(--font-size-sm, .875rem);font-weight:600;color:var(--color-primary-700, #1d4ed8);text-transform:uppercase;line-height:1;-webkit-user-select:none;user-select:none}.lc-list__content{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.lc-list__subtitle{font-size:var(--font-size-sm, .875rem);color:var(--color-neutral-500, #6b7280);line-height:var(--line-height-sm, 1.25rem)}.lc-list__description{font-size:var(--font-size-xs, .75rem);color:var(--color-neutral-400, #9ca3af);line-height:var(--line-height-xs, 1rem);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.lc-list__trailing{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:4px}.lc-list__action{flex-shrink:0}.lc-list__badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:9999px;font-size:var(--font-size-xs, .75rem);font-weight:500;line-height:1.25rem;white-space:nowrap}.lc-list__badge--default{background-color:var(--color-neutral-100, #f3f4f6);color:var(--color-neutral-700, #374151)}.lc-list__badge--primary{background-color:var(--color-primary-100, #dbeafe);color:var(--color-primary-700, #1d4ed8)}.lc-list__badge--success{background-color:var(--color-success-100, #dcfce7);color:var(--color-success-700, #15803d)}.lc-list__badge--warning{background-color:var(--color-warning-100, #fef3c7);color:var(--color-warning-700, #a16207)}.lc-list__badge--error{background-color:var(--color-error-100, #fee2e2);color:var(--color-error-700, #b91c1c)}.lc-list__metadata{font-size:var(--font-size-xs, .75rem);color:var(--color-neutral-400, #9ca3af);white-space:nowrap}.lc-list__item--selected{background-color:var(--color-primary-50, #eff6ff)}.lc-list__item--selected:hover:not(.lc-list__item--disabled){background-color:var(--color-primary-100, #dbeafe)}.lc-list--sm .lc-list__item{padding:var(--spacing-2) var(--spacing-3);gap:var(--spacing-2)}.lc-list--sm .lc-list__avatar{width:32px;height:32px}.lc-list--sm .lc-list__avatar-initials{font-size:var(--font-size-xs, .75rem)}.lc-list--sm .lc-list__label{font-size:var(--font-size-sm, .875rem)}.lc-list--sm .lc-list__subtitle{font-size:var(--font-size-xs, .75rem)}.lc-list--sm .lc-list__description{display:none}.lc-list--lg .lc-list__item{padding:var(--spacing-4) var(--spacing-5);gap:var(--spacing-4)}.lc-list--lg .lc-list__avatar{width:48px;height:48px}.lc-list--lg .lc-list__avatar-initials{font-size:var(--font-size-base, 1rem)}.lc-list--lg .lc-list__label{font-size:var(--font-size-lg, 1.125rem)}.lc-list--lg .lc-list__content{gap:4px}.lc-list--card{background:transparent;gap:.5rem;overflow:visible}.lc-list--card .lc-list__item{padding:.75rem 1rem;border-radius:var(--border-radius-md, .5rem);background:var(--color-neutral-50, #f9fafb);border:1px solid var(--color-neutral-200, #e5e7eb);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.lc-list--card .lc-list__item:hover:not(.lc-list__item--disabled){background:var(--color-neutral-100, #f3f4f6);border-color:var(--color-neutral-300, #d1d5db);box-shadow:0 1px 3px #0000000f}.lc-list--card .lc-list__item:active:not(.lc-list__item--disabled){background:var(--color-neutral-200, #e5e7eb)}.lc-list--card.lc-list--with-dividers .lc-list__item{border-bottom-color:transparent}:host-context([data-theme=dark]) .lc-list{background-color:var(--color-neutral-900, #111827)}:host-context([data-theme=dark]) .lc-list--with-dividers .lc-list__item{border-bottom-color:var(--color-neutral-700, #374151)}:host-context([data-theme=dark]) .lc-list__item:hover:not(.lc-list__item--disabled){background-color:var(--color-neutral-800, #1f2937)}:host-context([data-theme=dark]) .lc-list__item:active:not(.lc-list__item--disabled){background-color:var(--color-neutral-700, #374151)}:host-context([data-theme=dark]) .lc-list__icon{color:var(--color-neutral-400, #9ca3af)}:host-context([data-theme=dark]) .lc-list__label{color:var(--color-neutral-100, #f3f4f6)}:host-context([data-theme=dark]) .lc-list__subtitle{color:var(--color-neutral-400, #9ca3af)}:host-context([data-theme=dark]) .lc-list__description{color:var(--color-neutral-500, #6b7280)}:host-context([data-theme=dark]) .lc-list__metadata{color:var(--color-neutral-500, #6b7280)}:host-context([data-theme=dark]) .lc-list__avatar{background-color:var(--color-primary-900, #1e3a5f)}:host-context([data-theme=dark]) .lc-list__avatar-initials{color:var(--color-primary-300, #93c5fd)}:host-context([data-theme=dark]) .lc-list__badge--default{background-color:var(--color-neutral-800, #1f2937);color:var(--color-neutral-300, #d1d5db)}:host-context([data-theme=dark]) .lc-list__badge--primary{background-color:var(--color-primary-900, #1e3a5f);color:var(--color-primary-300, #93c5fd)}:host-context([data-theme=dark]) .lc-list__badge--success{background-color:var(--color-success-900, #14532d);color:var(--color-success-300, #86efac)}:host-context([data-theme=dark]) .lc-list__badge--warning{background-color:var(--color-warning-900, #78350f);color:var(--color-warning-300, #fcd34d)}:host-context([data-theme=dark]) .lc-list__badge--error{background-color:var(--color-error-900, #7f1d1d);color:var(--color-error-300, #fca5a5)}:host-context([data-theme=dark]) .lc-list__item--selected{background-color:var(--color-primary-900, #1e3a5f)}:host-context([data-theme=dark]) .lc-list__item--selected:hover:not(.lc-list__item--disabled){background-color:var(--color-primary-800, #1e40af)}:host-context([data-theme=dark]) .lc-list--card .lc-list__item{background:var(--color-neutral-800, #1f2937);border-color:var(--color-neutral-700, #374151)}:host-context([data-theme=dark]) .lc-list--card .lc-list__item:hover:not(.lc-list__item--disabled){background:var(--color-neutral-700, #374151);border-color:var(--color-neutral-600, #4b5563)}\n"] }]
         }], propDecorators: { itemTemplate: [{
                 type: ContentChild,
                 args: [ListItemTemplateDirective]
-            }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showDividers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDividers", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }] } });
+            }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showDividers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDividers", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }] } });
 
 /**
  * Chip component for displaying tags, filters, or selections.