@atomng/ui 1.0.0

package/fesm2022/atomng-ui-organisms.mjs

@@ -0,0 +1,1346 @@
+import * as i0 from '@angular/core';
+import { input, model, ChangeDetectionStrategy, Component, output, HostListener, Input, Directive, computed, ContentChildren, inject, signal, effect } from '@angular/core';
+import * as i1$1 from '@angular/common';
+import { CommonModule, NgTemplateOutlet } from '@angular/common';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import * as i1 from '@angular/router';
+import { RouterModule, Router, NavigationEnd, RouterLink, RouterLinkActive } from '@angular/router';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { filter, map, startWith } from 'rxjs';
+import * as i1$2 from 'lucide-angular';
+import { MessageSquare, Contact, LogOut, CircleQuestionMark, LayoutDashboard, House, icons, LucideAngularModule, LucideIconProvider, LUCIDE_ICONS } from 'lucide-angular';
+
+/**
+ * Accordion Organism — Source: Nuxt UI v3 ❖ Accordion
+ * Collapsible content sections with animation
+ * Single or multiple open panels supported
+ */
+class AccordionComponent {
+    constructor() {
+        this.items = input.required();
+        this.variant = input('default');
+        this.multiple = input(true);
+        this.openIds = model([]);
+    }
+    isOpen(id) { return this.openIds().includes(id); }
+    toggle(id) {
+        this.openIds.update(ids => {
+            if (ids.includes(id)) {
+                return ids.filter(i => i !== id);
+            }
+            return this.multiple() ? [...ids, id] : [id];
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: AccordionComponent, isStandalone: true, selector: "ui-accordion", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, openIds: { classPropertyName: "openIds", publicName: "openIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openIds: "openIdsChange" }, ngImport: i0, template: `
+    <div class="ui-accordion ui-accordion--{{ variant() }}" role="list">
+      @for (item of items(); track item.id) {
+        <div
+          class="ui-accordion__item"
+          [class.ui-accordion__item--open]="isOpen(item.id)"
+          [class.ui-accordion__item--disabled]="item.disabled"
+          role="listitem"
+        >
+          <button
+            type="button"
+            class="ui-accordion__trigger"
+            [attr.aria-expanded]="isOpen(item.id)"
+            [attr.aria-controls]="'panel-' + item.id"
+            [disabled]="item.disabled"
+            (click)="toggle(item.id)"
+          >
+            <span class="ui-accordion__label">{{ item.label }}</span>
+            <span class="ui-accordion__icon" [class.ui-accordion__icon--open]="isOpen(item.id)" aria-hidden="true">
+              ▾
+            </span>
+          </button>
+
+          @if (isOpen(item.id)) {
+            <div
+              [@expand]
+              class="ui-accordion__panel"
+              [id]="'panel-' + item.id"
+              role="region"
+              [attr.aria-labelledby]="'trigger-' + item.id"
+            >
+              <div class="ui-accordion__content">{{ item.content }}</div>
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [".ui-accordion{width:100%}.ui-accordion__item{border-bottom:1px solid var(--color-border)}.ui-accordion__item:first-child{border-top:1px solid var(--color-border)}.ui-accordion__item--disabled{opacity:.5;pointer-events:none}.ui-accordion__trigger{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--spacing-4) 0;border:none;background:transparent;cursor:pointer;font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-text);text-align:left;transition:color var(--transition-fast)}.ui-accordion__trigger:hover{color:var(--color-primary-500)}.ui-accordion__trigger:focus-visible{outline:2px solid var(--color-ring);outline-offset:2px;border-radius:var(--radius-sm)}.ui-accordion__icon{flex-shrink:0;font-size:.75rem;transition:transform var(--transition-base);color:var(--color-text-muted)}.ui-accordion__icon--open{transform:rotate(180deg)}.ui-accordion__panel{overflow:hidden}.ui-accordion__content{padding:0 0 var(--spacing-4);font-family:var(--font-sans);font-size:var(--text-sm);color:var(--color-text-muted);line-height:var(--leading-relaxed)}.ui-accordion--ghost .ui-accordion__item{border-bottom:none;border-radius:var(--radius-lg);margin-bottom:var(--spacing-1);background:var(--color-neutral-50)}.ui-accordion--ghost .ui-accordion__item:first-child{border-top:none}.ui-accordion--ghost .ui-accordion__item .ui-accordion__trigger{padding:var(--spacing-3) var(--spacing-4)}.ui-accordion--ghost .ui-accordion__item .ui-accordion__content{padding:0 var(--spacing-4) var(--spacing-3)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], animations: [
+            trigger('expand', [
+                state('void', style({ height: '0', opacity: 0, overflow: 'hidden' })),
+                state('*', style({ height: '*', opacity: 1, overflow: 'hidden' })),
+                transition('void <=> *', animate('200ms ease')),
+            ])
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AccordionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-accordion', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, animations: [
+                        trigger('expand', [
+                            state('void', style({ height: '0', opacity: 0, overflow: 'hidden' })),
+                            state('*', style({ height: '*', opacity: 1, overflow: 'hidden' })),
+                            transition('void <=> *', animate('200ms ease')),
+                        ])
+                    ], template: `
+    <div class="ui-accordion ui-accordion--{{ variant() }}" role="list">
+      @for (item of items(); track item.id) {
+        <div
+          class="ui-accordion__item"
+          [class.ui-accordion__item--open]="isOpen(item.id)"
+          [class.ui-accordion__item--disabled]="item.disabled"
+          role="listitem"
+        >
+          <button
+            type="button"
+            class="ui-accordion__trigger"
+            [attr.aria-expanded]="isOpen(item.id)"
+            [attr.aria-controls]="'panel-' + item.id"
+            [disabled]="item.disabled"
+            (click)="toggle(item.id)"
+          >
+            <span class="ui-accordion__label">{{ item.label }}</span>
+            <span class="ui-accordion__icon" [class.ui-accordion__icon--open]="isOpen(item.id)" aria-hidden="true">
+              ▾
+            </span>
+          </button>
+
+          @if (isOpen(item.id)) {
+            <div
+              [@expand]
+              class="ui-accordion__panel"
+              [id]="'panel-' + item.id"
+              role="region"
+              [attr.aria-labelledby]="'trigger-' + item.id"
+            >
+              <div class="ui-accordion__content">{{ item.content }}</div>
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `, styles: [".ui-accordion{width:100%}.ui-accordion__item{border-bottom:1px solid var(--color-border)}.ui-accordion__item:first-child{border-top:1px solid var(--color-border)}.ui-accordion__item--disabled{opacity:.5;pointer-events:none}.ui-accordion__trigger{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--spacing-4) 0;border:none;background:transparent;cursor:pointer;font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-text);text-align:left;transition:color var(--transition-fast)}.ui-accordion__trigger:hover{color:var(--color-primary-500)}.ui-accordion__trigger:focus-visible{outline:2px solid var(--color-ring);outline-offset:2px;border-radius:var(--radius-sm)}.ui-accordion__icon{flex-shrink:0;font-size:.75rem;transition:transform var(--transition-base);color:var(--color-text-muted)}.ui-accordion__icon--open{transform:rotate(180deg)}.ui-accordion__panel{overflow:hidden}.ui-accordion__content{padding:0 0 var(--spacing-4);font-family:var(--font-sans);font-size:var(--text-sm);color:var(--color-text-muted);line-height:var(--leading-relaxed)}.ui-accordion--ghost .ui-accordion__item{border-bottom:none;border-radius:var(--radius-lg);margin-bottom:var(--spacing-1);background:var(--color-neutral-50)}.ui-accordion--ghost .ui-accordion__item:first-child{border-top:none}.ui-accordion--ghost .ui-accordion__item .ui-accordion__trigger{padding:var(--spacing-3) var(--spacing-4)}.ui-accordion--ghost .ui-accordion__item .ui-accordion__content{padding:0 var(--spacing-4) var(--spacing-3)}\n"] }]
+        }] });
+
+/**
+ * Card Organism — Source: Nuxt UI v3 ❖ Card
+ * Content container with header, body, footer slots
+ */
+class CardComponent {
+    constructor() {
+        this.title = input(null);
+        this.description = input(null);
+        this.variant = input('outline');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: CardComponent, isStandalone: true, selector: "ui-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div [class]="'ui-card ui-card--' + variant()">
+      @if (title() || description()) {
+        <div class="ui-card__header">
+          @if (title()) {
+            <h3 class="ui-card__title">{{ title() }}</h3>
+          }
+          @if (description()) {
+            <p class="ui-card__description">{{ description() }}</p>
+          }
+          <ng-content select="[slot=header]" />
+        </div>
+      }
+      <div class="ui-card__body">
+        <ng-content />
+      </div>
+      <ng-content select="[slot=footer]" />
+    </div>
+  `, isInline: true, styles: [".ui-card{border-radius:var(--radius-xl);overflow:hidden}.ui-card--outline{border:1px solid var(--color-border);background:var(--color-bg);box-shadow:var(--shadow-xs)}.ui-card--soft{background:var(--color-neutral-50);border:1px solid transparent}.ui-card--subtle{background:var(--color-bg-muted)}.ui-card--ghost{background:transparent}.ui-card--none{background:transparent;border:none}.ui-card__header{padding:var(--spacing-4);border-bottom:1px solid var(--color-border)}.ui-card__title{font-family:var(--font-sans);font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--color-text);margin:0 0 var(--spacing-1)}.ui-card__description{font-family:var(--font-sans);font-size:var(--text-sm);color:var(--color-text-muted);margin:0}.ui-card__body{padding:var(--spacing-4)}.ui-card__footer{padding:var(--spacing-4);border-top:1px solid var(--color-border)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-card', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div [class]="'ui-card ui-card--' + variant()">
+      @if (title() || description()) {
+        <div class="ui-card__header">
+          @if (title()) {
+            <h3 class="ui-card__title">{{ title() }}</h3>
+          }
+          @if (description()) {
+            <p class="ui-card__description">{{ description() }}</p>
+          }
+          <ng-content select="[slot=header]" />
+        </div>
+      }
+      <div class="ui-card__body">
+        <ng-content />
+      </div>
+      <ng-content select="[slot=footer]" />
+    </div>
+  `, styles: [".ui-card{border-radius:var(--radius-xl);overflow:hidden}.ui-card--outline{border:1px solid var(--color-border);background:var(--color-bg);box-shadow:var(--shadow-xs)}.ui-card--soft{background:var(--color-neutral-50);border:1px solid transparent}.ui-card--subtle{background:var(--color-bg-muted)}.ui-card--ghost{background:transparent}.ui-card--none{background:transparent;border:none}.ui-card__header{padding:var(--spacing-4);border-bottom:1px solid var(--color-border)}.ui-card__title{font-family:var(--font-sans);font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--color-text);margin:0 0 var(--spacing-1)}.ui-card__description{font-family:var(--font-sans);font-size:var(--text-sm);color:var(--color-text-muted);margin:0}.ui-card__body{padding:var(--spacing-4)}.ui-card__footer{padding:var(--spacing-4);border-top:1px solid var(--color-border)}\n"] }]
+        }] });
+
+/**
+ * DropdownMenu Organism — Source: Nuxt UI v3 ❖ DropdownMenu
+ * Contextual action menu triggered by a slot
+ */
+class DropdownMenuComponent {
+    constructor(el) {
+        this.el = el;
+        this.items = input.required();
+        this.align = input('left');
+        this.open = model(false);
+        this.itemClick = output();
+    }
+    toggle() { this.open.update(v => !v); }
+    select(item) {
+        if (item.disabled)
+            return;
+        this.itemClick.emit(item);
+        this.open.set(false);
+    }
+    onDocumentClick(e) {
+        if (!this.el.nativeElement.contains(e.target)) {
+            this.open.set(false);
+        }
+    }
+    onEscape() { this.open.set(false); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DropdownMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: DropdownMenuComponent, isStandalone: true, selector: "ui-dropdown-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", itemClick: "itemClick" }, host: { listeners: { "document:click": "onDocumentClick($event)", "keydown.escape": "onEscape()" } }, ngImport: i0, template: `
+    <div class="ui-dropdown" [class.ui-dropdown--open]="open()">
+      <div class="ui-dropdown__trigger" (click)="toggle()">
+        <ng-content />
+      </div>
+
+      @if (open()) {
+        <div
+          [@menu]
+          class="ui-dropdown__menu ui-dropdown__menu--{{ align() }}"
+          role="menu"
+          aria-orientation="vertical"
+        >
+          @for (item of items(); track item.id) {
+            @if (item.separator) {
+              <hr class="ui-dropdown__separator" role="separator" />
+            } @else {
+              <button
+                type="button"
+                role="menuitem"
+                [class]="'ui-dropdown__item' + (item.disabled ? ' ui-dropdown__item--disabled' : '') + (item.color === 'error' ? ' ui-dropdown__item--error' : '')"
+                [disabled]="item.disabled"
+                (click)="select(item)"
+              >
+                @if (item.icon) {
+                  <span class="ui-dropdown__icon" aria-hidden="true">{{ item.icon }}</span>
+                }
+                {{ item.label }}
+              </button>
+            }
+          }
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [".ui-dropdown{position:relative;display:inline-flex}.ui-dropdown__trigger{cursor:pointer}.ui-dropdown__menu{position:absolute;top:calc(100% + 4px);z-index:var(--z-dropdown);min-width:160px;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:var(--spacing-1);outline:none}.ui-dropdown__menu--left{left:0}.ui-dropdown__menu--right{right:0}.ui-dropdown__item{display:flex;align-items:center;gap:var(--spacing-2);width:100%;padding:var(--spacing-2) var(--spacing-3);border:none;background:transparent;border-radius:var(--radius-md);font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-text);cursor:pointer;text-align:left;transition:var(--transition-colors)}.ui-dropdown__item:hover:not(.ui-dropdown__item--disabled){background:var(--color-neutral-100)}.ui-dropdown__item--error{color:var(--color-error-600)}.ui-dropdown__item--error:hover{background:color-mix(in srgb,var(--color-error-500) 10%,transparent)}.ui-dropdown__item--disabled{opacity:.4;cursor:not-allowed}.ui-dropdown__icon{flex-shrink:0;width:1rem;height:1rem;display:flex;align-items:center;justify-content:center}.ui-dropdown__separator{margin:var(--spacing-1) 0;border:none;border-top:1px solid var(--color-border)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], animations: [
+            trigger('menu', [
+                transition(':enter', [style({ opacity: 0, transform: 'scale(0.95) translateY(-5px)' }), animate('150ms ease', style({ opacity: 1, transform: 'scale(1) translateY(0)' }))]),
+                transition(':leave', [animate('100ms ease', style({ opacity: 0, transform: 'scale(0.95) translateY(-5px)' }))]),
+            ])
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DropdownMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-dropdown-menu', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, animations: [
+                        trigger('menu', [
+                            transition(':enter', [style({ opacity: 0, transform: 'scale(0.95) translateY(-5px)' }), animate('150ms ease', style({ opacity: 1, transform: 'scale(1) translateY(0)' }))]),
+                            transition(':leave', [animate('100ms ease', style({ opacity: 0, transform: 'scale(0.95) translateY(-5px)' }))]),
+                        ])
+                    ], template: `
+    <div class="ui-dropdown" [class.ui-dropdown--open]="open()">
+      <div class="ui-dropdown__trigger" (click)="toggle()">
+        <ng-content />
+      </div>
+
+      @if (open()) {
+        <div
+          [@menu]
+          class="ui-dropdown__menu ui-dropdown__menu--{{ align() }}"
+          role="menu"
+          aria-orientation="vertical"
+        >
+          @for (item of items(); track item.id) {
+            @if (item.separator) {
+              <hr class="ui-dropdown__separator" role="separator" />
+            } @else {
+              <button
+                type="button"
+                role="menuitem"
+                [class]="'ui-dropdown__item' + (item.disabled ? ' ui-dropdown__item--disabled' : '') + (item.color === 'error' ? ' ui-dropdown__item--error' : '')"
+                [disabled]="item.disabled"
+                (click)="select(item)"
+              >
+                @if (item.icon) {
+                  <span class="ui-dropdown__icon" aria-hidden="true">{{ item.icon }}</span>
+                }
+                {{ item.label }}
+              </button>
+            }
+          }
+        </div>
+      }
+    </div>
+  `, styles: [".ui-dropdown{position:relative;display:inline-flex}.ui-dropdown__trigger{cursor:pointer}.ui-dropdown__menu{position:absolute;top:calc(100% + 4px);z-index:var(--z-dropdown);min-width:160px;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:var(--spacing-1);outline:none}.ui-dropdown__menu--left{left:0}.ui-dropdown__menu--right{right:0}.ui-dropdown__item{display:flex;align-items:center;gap:var(--spacing-2);width:100%;padding:var(--spacing-2) var(--spacing-3);border:none;background:transparent;border-radius:var(--radius-md);font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-text);cursor:pointer;text-align:left;transition:var(--transition-colors)}.ui-dropdown__item:hover:not(.ui-dropdown__item--disabled){background:var(--color-neutral-100)}.ui-dropdown__item--error{color:var(--color-error-600)}.ui-dropdown__item--error:hover{background:color-mix(in srgb,var(--color-error-500) 10%,transparent)}.ui-dropdown__item--disabled{opacity:.4;cursor:not-allowed}.ui-dropdown__icon{flex-shrink:0;width:1rem;height:1rem;display:flex;align-items:center;justify-content:center}.ui-dropdown__separator{margin:var(--spacing-1) 0;border:none;border-top:1px solid var(--color-border)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], onEscape: [{
+                type: HostListener,
+                args: ['keydown.escape']
+            }] } });
+
+/**
+ * Modal Organism — Source: Nuxt UI v3 ❖ Modal
+ * Dialog overlay with backdrop, header, body, footer
+ */
+class ModalComponent {
+    constructor() {
+        this.open = model(false);
+        this.title = input(null);
+        this.size = input('md');
+        this.hideHeader = input(false);
+        this.hideClose = input(false);
+        this.dismissible = input(true);
+        this.close = output();
+    }
+    onOverlayClick() {
+        if (this.dismissible()) {
+            this.open.set(false);
+            this.close.emit();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ModalComponent, isStandalone: true, selector: "ui-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hideHeader: { classPropertyName: "hideHeader", publicName: "hideHeader", isSignal: true, isRequired: false, transformFunction: null }, hideClose: { classPropertyName: "hideClose", publicName: "hideClose", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", close: "close" }, ngImport: i0, template: `
+    @if (open()) {
+      <div class="ui-modal-overlay" [@overlay] (click)="onOverlayClick()" role="presentation">
+        <div
+          [@dialog]
+          class="ui-modal ui-modal--{{ size() }}"
+          role="dialog"
+          [attr.aria-modal]="true"
+          [attr.aria-label]="title() ?? 'Dialog'"
+          (click)="$event.stopPropagation()"
+        >
+          @if (title() || !hideHeader()) {
+            <div class="ui-modal__header">
+              <h2 class="ui-modal__title">{{ title() }}</h2>
+              @if (!hideClose()) {
+                <button type="button" class="ui-modal__close" aria-label="Close" (click)="close.emit()">×</button>
+              }
+            </div>
+          }
+          <div class="ui-modal__body">
+            <ng-content />
+          </div>
+          <ng-content select="[slot=footer]" />
+        </div>
+      </div>
+    }
+  `, isInline: true, styles: [".ui-modal-overlay{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;background:#00000080;padding:var(--spacing-4);backdrop-filter:blur(2px)}.ui-modal{position:relative;background:var(--color-bg);border-radius:var(--radius-2xl);box-shadow:var(--shadow-xl);display:flex;flex-direction:column;max-height:90vh;width:100%;overflow:hidden}.ui-modal--xs{max-width:320px}.ui-modal--sm{max-width:384px}.ui-modal--md{max-width:512px}.ui-modal--lg{max-width:640px}.ui-modal--xl{max-width:768px}.ui-modal--2xl{max-width:896px}.ui-modal--3xl{max-width:1024px}.ui-modal--4xl{max-width:1280px}.ui-modal--full{max-width:calc(100vw - 2rem);max-height:calc(100vh - 2rem)}.ui-modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-6) var(--spacing-6) var(--spacing-4);border-bottom:1px solid var(--color-border);flex-shrink:0}.ui-modal__title{font-family:var(--font-sans);font-size:var(--text-xl);font-weight:var(--font-semibold);color:var(--color-text);margin:0}.ui-modal__close{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;background:transparent;cursor:pointer;font-size:1.5rem;color:var(--color-text-muted);border-radius:var(--radius-md);transition:var(--transition-colors)}.ui-modal__close:hover{color:var(--color-text);background:var(--color-neutral-100)}.ui-modal__body{flex:1;overflow-y:auto;padding:var(--spacing-6);font-family:var(--font-sans);font-size:var(--text-sm);color:var(--color-text-muted)}.ui-modal__footer{flex-shrink:0;padding:var(--spacing-4) var(--spacing-6);border-top:1px solid var(--color-border);display:flex;justify-content:flex-end;gap:var(--spacing-3)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], animations: [
+            trigger('overlay', [
+                transition(':enter', [style({ opacity: 0 }), animate('150ms ease', style({ opacity: 1 }))]),
+                transition(':leave', [animate('150ms ease', style({ opacity: 0 }))]),
+            ]),
+            trigger('dialog', [
+                transition(':enter', [style({ opacity: 0, transform: 'scale(0.95) translateY(-10px)' }), animate('200ms ease', style({ opacity: 1, transform: 'scale(1) translateY(0)' }))]),
+                transition(':leave', [animate('150ms ease', style({ opacity: 0, transform: 'scale(0.95) translateY(-10px)' }))]),
+            ]),
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-modal', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, animations: [
+                        trigger('overlay', [
+                            transition(':enter', [style({ opacity: 0 }), animate('150ms ease', style({ opacity: 1 }))]),
+                            transition(':leave', [animate('150ms ease', style({ opacity: 0 }))]),
+                        ]),
+                        trigger('dialog', [
+                            transition(':enter', [style({ opacity: 0, transform: 'scale(0.95) translateY(-10px)' }), animate('200ms ease', style({ opacity: 1, transform: 'scale(1) translateY(0)' }))]),
+                            transition(':leave', [animate('150ms ease', style({ opacity: 0, transform: 'scale(0.95) translateY(-10px)' }))]),
+                        ]),
+                    ], template: `
+    @if (open()) {
+      <div class="ui-modal-overlay" [@overlay] (click)="onOverlayClick()" role="presentation">
+        <div
+          [@dialog]
+          class="ui-modal ui-modal--{{ size() }}"
+          role="dialog"
+          [attr.aria-modal]="true"
+          [attr.aria-label]="title() ?? 'Dialog'"
+          (click)="$event.stopPropagation()"
+        >
+          @if (title() || !hideHeader()) {
+            <div class="ui-modal__header">
+              <h2 class="ui-modal__title">{{ title() }}</h2>
+              @if (!hideClose()) {
+                <button type="button" class="ui-modal__close" aria-label="Close" (click)="close.emit()">×</button>
+              }
+            </div>
+          }
+          <div class="ui-modal__body">
+            <ng-content />
+          </div>
+          <ng-content select="[slot=footer]" />
+        </div>
+      </div>
+    }
+  `, styles: [".ui-modal-overlay{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;background:#00000080;padding:var(--spacing-4);backdrop-filter:blur(2px)}.ui-modal{position:relative;background:var(--color-bg);border-radius:var(--radius-2xl);box-shadow:var(--shadow-xl);display:flex;flex-direction:column;max-height:90vh;width:100%;overflow:hidden}.ui-modal--xs{max-width:320px}.ui-modal--sm{max-width:384px}.ui-modal--md{max-width:512px}.ui-modal--lg{max-width:640px}.ui-modal--xl{max-width:768px}.ui-modal--2xl{max-width:896px}.ui-modal--3xl{max-width:1024px}.ui-modal--4xl{max-width:1280px}.ui-modal--full{max-width:calc(100vw - 2rem);max-height:calc(100vh - 2rem)}.ui-modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-6) var(--spacing-6) var(--spacing-4);border-bottom:1px solid var(--color-border);flex-shrink:0}.ui-modal__title{font-family:var(--font-sans);font-size:var(--text-xl);font-weight:var(--font-semibold);color:var(--color-text);margin:0}.ui-modal__close{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;background:transparent;cursor:pointer;font-size:1.5rem;color:var(--color-text-muted);border-radius:var(--radius-md);transition:var(--transition-colors)}.ui-modal__close:hover{color:var(--color-text);background:var(--color-neutral-100)}.ui-modal__body{flex:1;overflow-y:auto;padding:var(--spacing-6);font-family:var(--font-sans);font-size:var(--text-sm);color:var(--color-text-muted)}.ui-modal__footer{flex-shrink:0;padding:var(--spacing-4) var(--spacing-6);border-top:1px solid var(--color-border);display:flex;justify-content:flex-end;gap:var(--spacing-3)}\n"] }]
+        }] });
+
+/**
+ * NavigationMenu Organism — Source: Nuxt UI v3 ❖ NavigationMenu
+ * Primary site navigation with active link detection
+ */
+class NavigationMenuComponent {
+    constructor() {
+        this.items = input.required();
+        this.orientation = input('horizontal');
+        this.ariaLabel = input('Main navigation');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: NavigationMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: NavigationMenuComponent, isStandalone: true, selector: "ui-navigation-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <nav
+      class="ui-nav ui-nav--{{ orientation() }}"
+      [attr.aria-label]="ariaLabel()"
+    >
+      @for (item of items(); track item.id) {
+        @if (item.to) {
+          <a
+            [routerLink]="item.to"
+            routerLinkActive="ui-nav__item--active"
+            class="ui-nav__item"
+            [class.ui-nav__item--disabled]="item.disabled"
+          >
+            @if (item.icon) {
+              <span class="ui-nav__icon" aria-hidden="true">{{ item.icon }}</span>
+            }
+            <span class="ui-nav__label">{{ item.label }}</span>
+            @if (item.badge) {
+              <span class="ui-nav__badge" [attr.aria-label]="item.badge + ' notifications'">{{ item.badge }}</span>
+            }
+          </a>
+        } @else {
+          <a
+            [href]="item.href ?? '#'"
+            class="ui-nav__item"
+            [class.ui-nav__item--disabled]="item.disabled"
+          >
+            @if (item.icon) {
+              <span class="ui-nav__icon" aria-hidden="true">{{ item.icon }}</span>
+            }
+            <span class="ui-nav__label">{{ item.label }}</span>
+          </a>
+        }
+      }
+    </nav>
+  `, isInline: true, styles: [".ui-nav{display:flex;align-items:center}.ui-nav--horizontal{flex-direction:row;gap:var(--spacing-1)}.ui-nav--vertical{flex-direction:column;align-items:stretch;gap:var(--spacing-0-5)}.ui-nav__item{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3);border-radius:var(--radius-md);font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-text-muted);text-decoration:none;transition:var(--transition-colors);cursor:pointer}.ui-nav__item:hover{color:var(--color-text);background:var(--color-neutral-100)}.ui-nav__item--active{color:var(--color-primary-500);background:color-mix(in srgb,var(--color-primary-500) 10%,transparent)}.ui-nav__item--disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.ui-nav--vertical .ui-nav__item{justify-content:flex-start}.ui-nav__icon{flex-shrink:0;width:1.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center}.ui-nav__label{flex:1}.ui-nav__badge{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;padding:0 .25rem;border-radius:var(--radius-full);background:var(--color-primary-500);color:#fff;font-size:.7rem;font-weight:var(--font-bold)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: NavigationMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-navigation-menu', standalone: true, imports: [CommonModule, RouterModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <nav
+      class="ui-nav ui-nav--{{ orientation() }}"
+      [attr.aria-label]="ariaLabel()"
+    >
+      @for (item of items(); track item.id) {
+        @if (item.to) {
+          <a
+            [routerLink]="item.to"
+            routerLinkActive="ui-nav__item--active"
+            class="ui-nav__item"
+            [class.ui-nav__item--disabled]="item.disabled"
+          >
+            @if (item.icon) {
+              <span class="ui-nav__icon" aria-hidden="true">{{ item.icon }}</span>
+            }
+            <span class="ui-nav__label">{{ item.label }}</span>
+            @if (item.badge) {
+              <span class="ui-nav__badge" [attr.aria-label]="item.badge + ' notifications'">{{ item.badge }}</span>
+            }
+          </a>
+        } @else {
+          <a
+            [href]="item.href ?? '#'"
+            class="ui-nav__item"
+            [class.ui-nav__item--disabled]="item.disabled"
+          >
+            @if (item.icon) {
+              <span class="ui-nav__icon" aria-hidden="true">{{ item.icon }}</span>
+            }
+            <span class="ui-nav__label">{{ item.label }}</span>
+          </a>
+        }
+      }
+    </nav>
+  `, styles: [".ui-nav{display:flex;align-items:center}.ui-nav--horizontal{flex-direction:row;gap:var(--spacing-1)}.ui-nav--vertical{flex-direction:column;align-items:stretch;gap:var(--spacing-0-5)}.ui-nav__item{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3);border-radius:var(--radius-md);font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-text-muted);text-decoration:none;transition:var(--transition-colors);cursor:pointer}.ui-nav__item:hover{color:var(--color-text);background:var(--color-neutral-100)}.ui-nav__item--active{color:var(--color-primary-500);background:color-mix(in srgb,var(--color-primary-500) 10%,transparent)}.ui-nav__item--disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.ui-nav--vertical .ui-nav__item{justify-content:flex-start}.ui-nav__icon{flex-shrink:0;width:1.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center}.ui-nav__label{flex:1}.ui-nav__badge{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;padding:0 .25rem;border-radius:var(--radius-full);background:var(--color-primary-500);color:#fff;font-size:.7rem;font-weight:var(--font-bold)}\n"] }]
+        }] });
+
+class UiTableCellDirective {
+    constructor(tpl) {
+        this.tpl = tpl;
+    }
+    /** Type-safe static context guard for `let-row`. */
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: UiTableCellDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: UiTableCellDirective, isStandalone: true, selector: "ng-template[uiCell]", inputs: { columnKey: ["uiCell", "columnKey"] }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: UiTableCellDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[uiCell]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { columnKey: [{
+                type: Input,
+                args: [{ required: true, alias: 'uiCell' }]
+            }] } });
+
+/**
+ * Table Organism — Source: Nuxt UI v3 ❖ Table
+ * Data table with sorting, selection, loading state.
+ *
+ * Custom cell templates via UiTableCellDirective:
+ *   <ng-template uiCell="columnKey" let-row>
+ *     <ui-badge>{{ row['field'] }}</ui-badge>
+ *   </ng-template>
+ */
+class TableComponent {
+    constructor() {
+        this.columns = input.required();
+        this.rows = input([]);
+        this.loading = input(false);
+        this.selectable = input(false);
+        this.caption = input(null);
+        this.emptyLabel = input('No data available.');
+        this.rowIdKey = input('id');
+        this.sortState = model(null);
+        this.selectedIds = model([]);
+        this.rowClick = output();
+        // ── Computed ───────────────────────────────────────────────────────────────
+        this.loadingRows = computed(() => Array.from({ length: 5 }, (_, i) => i));
+        this.allSelected = computed(() => this.rows().length > 0 && this.rows().every(r => this.isSelected(this.rowId(r))));
+    }
+    /** Returns the TemplateRef for a column key if a custom template was provided. */
+    getCellTpl(key) {
+        return this.cellDirs?.find(d => d.columnKey === key)?.tpl ?? null;
+    }
+    // ── Helpers ────────────────────────────────────────────────────────────────
+    rowId(row) {
+        return row[this.rowIdKey()];
+    }
+    isSelected(id) {
+        return this.selectedIds().includes(id);
+    }
+    toggleRow(id) {
+        this.selectedIds.update(ids => ids.includes(id) ? ids.filter(i => i !== id) : [...ids, id]);
+    }
+    toggleAll() {
+        if (this.allSelected()) {
+            this.selectedIds.set([]);
+        }
+        else {
+            this.selectedIds.set(this.rows().map(r => this.rowId(r)));
+        }
+    }
+    sort(key) {
+        this.sortState.update(state => {
+            if (state?.column === key) {
+                return state.direction === 'asc'
+                    ? { column: key, direction: 'desc' }
+                    : null;
+            }
+            return { column: key, direction: 'asc' };
+        });
+    }
+    getSortIcon(key) {
+        const s = this.sortState();
+        if (!s || s.column !== key)
+            return '↕';
+        return s.direction === 'asc' ? '↑' : '↓';
+    }
+    getSortAriaLabel(key) {
+        const s = this.sortState();
+        if (!s || s.column !== key)
+            return 'none';
+        return s.direction === 'asc' ? 'ascending' : 'descending';
+    }
+    onRowClick(row) {
+        this.rowClick.emit(row);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TableComponent, isStandalone: true, selector: "ui-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, emptyLabel: { classPropertyName: "emptyLabel", publicName: "emptyLabel", isSignal: true, isRequired: false, transformFunction: null }, rowIdKey: { classPropertyName: "rowIdKey", publicName: "rowIdKey", isSignal: true, isRequired: false, transformFunction: null }, sortState: { classPropertyName: "sortState", publicName: "sortState", isSignal: true, isRequired: false, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortState: "sortStateChange", selectedIds: "selectedIdsChange", rowClick: "rowClick" }, queries: [{ propertyName: "cellDirs", predicate: UiTableCellDirective }], ngImport: i0, template: `
+    <div class="ui-table-wrap">
+      <table class="ui-table" [attr.aria-label]="caption()">
+        @if (caption()) {
+          <caption class="ui-table__caption">{{ caption() }}</caption>
+        }
+        <thead class="ui-table__head">
+          <tr>
+            @if (selectable()) {
+              <th class="ui-table__th ui-table__th--checkbox" scope="col">
+                <input type="checkbox" [checked]="allSelected()" (change)="toggleAll()" aria-label="Select all" />
+              </th>
+            }
+            @for (col of columns(); track col.key) {
+              <th
+                [class]="'ui-table__th' + (col.sortable ? ' ui-table__th--sortable' : '') + ' ui-table__th--' + (col.align ?? 'left')"
+                scope="col"
+                [attr.aria-sort]="getSortAriaLabel(col.key)"
+                [style.width]="col.width ?? null"
+                (click)="col.sortable ? sort(col.key) : null"
+              >
+                <span class="ui-table__th-inner">
+                  {{ col.label }}
+                  @if (col.sortable) {
+                    <span class="ui-table__sort-icon" aria-hidden="true">
+                      {{ getSortIcon(col.key) }}
+                    </span>
+                  }
+                </span>
+              </th>
+            }
+          </tr>
+        </thead>
+        <tbody class="ui-table__body">
+          @if (loading()) {
+            @for (i of loadingRows(); track i) {
+              <tr class="ui-table__row ui-table__row--loading">
+                @if (selectable()) {
+                  <td><div class="ui-skeleton" style="width:18px;height:18px;border-radius:4px"></div></td>
+                }
+                @for (col of columns(); track col.key) {
+                  <td class="ui-table__td">
+                    <div class="ui-skeleton" style="height:16px;border-radius:4px"></div>
+                  </td>
+                }
+              </tr>
+            }
+          } @else if (rows().length === 0) {
+            <tr>
+              <td [attr.colspan]="columns().length + (selectable() ? 1 : 0)" class="ui-table__empty">
+                <ng-content select="[slot=empty]" />
+                {{ emptyLabel() }}
+              </td>
+            </tr>
+          } @else {
+            @for (row of rows(); track rowId(row)) {
+              <tr
+                class="ui-table__row"
+                [class.ui-table__row--selected]="isSelected(rowId(row))"
+                (click)="onRowClick(row)"
+              >
+                @if (selectable()) {
+                  <td class="ui-table__td ui-table__td--checkbox">
+                    <input type="checkbox" [checked]="isSelected(rowId(row))"
+                           (change)="toggleRow(rowId(row))" [attr.aria-label]="'Select row'" />
+                  </td>
+                }
+                @for (col of columns(); track col.key) {
+                  <td [class]="'ui-table__td ui-table__td--' + (col.align ?? 'left')">
+                    @if (getCellTpl(col.key); as tpl) {
+                      <ng-container
+                        [ngTemplateOutlet]="tpl"
+                        [ngTemplateOutletContext]="{ $implicit: row, row: row }"
+                      />
+                    } @else {
+                      {{ row[col.key] }}
+                    }
+                  </td>
+                }
+              </tr>
+            }
+          }
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Custom cell template slots (projected, not rendered directly) -->
+    <ng-content />
+  `, isInline: true, styles: [".ui-table-wrap{width:100%;overflow-x:auto;border:1px solid var(--color-border);border-radius:var(--radius-xl)}.ui-table{width:100%;border-collapse:collapse;font-family:var(--font-sans)}.ui-table__caption{font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-text);padding:var(--spacing-3) var(--spacing-4);text-align:left;caption-side:top}.ui-table__head{background:var(--color-neutral-50)}.ui-table__th{padding:var(--spacing-3) var(--spacing-4);font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:var(--tracking-wide);border-bottom:1px solid var(--color-border);white-space:nowrap}.ui-table__th--left{text-align:left}.ui-table__th--center{text-align:center}.ui-table__th--right{text-align:right}.ui-table__th--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.ui-table__th--sortable:hover{color:var(--color-text)}.ui-table__th--checkbox{width:40px}.ui-table__th-inner{display:inline-flex;align-items:center;gap:var(--spacing-1)}.ui-table__sort-icon{font-size:.75em;opacity:.6}.ui-table__body{background:var(--color-bg)}.ui-table__row{border-bottom:1px solid var(--color-border);transition:background var(--transition-fast)}.ui-table__row:last-child{border-bottom:none}.ui-table__row:hover{background:var(--color-neutral-50)}.ui-table__row--selected{background:color-mix(in srgb,var(--color-primary-500) 5%,transparent)}.ui-table__row--loading{pointer-events:none}.ui-table__td{padding:var(--spacing-3) var(--spacing-4);font-size:var(--text-sm);color:var(--color-text);max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-table__td--left{text-align:left}.ui-table__td--center{text-align:center}.ui-table__td--right{text-align:right}.ui-table__td--checkbox{width:40px}.ui-table__empty{padding:var(--spacing-12) var(--spacing-4);text-align:center;color:var(--color-text-muted);font-size:var(--text-sm)}.ui-skeleton{background:linear-gradient(90deg,var(--color-neutral-100) 25%,var(--color-neutral-200) 50%,var(--color-neutral-100) 75%);background-size:200% 100%;animation:ui-shimmer 1.5s ease-in-out infinite}@keyframes ui-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-table', standalone: true, imports: [CommonModule, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="ui-table-wrap">
+      <table class="ui-table" [attr.aria-label]="caption()">
+        @if (caption()) {
+          <caption class="ui-table__caption">{{ caption() }}</caption>
+        }
+        <thead class="ui-table__head">
+          <tr>
+            @if (selectable()) {
+              <th class="ui-table__th ui-table__th--checkbox" scope="col">
+                <input type="checkbox" [checked]="allSelected()" (change)="toggleAll()" aria-label="Select all" />
+              </th>
+            }
+            @for (col of columns(); track col.key) {
+              <th
+                [class]="'ui-table__th' + (col.sortable ? ' ui-table__th--sortable' : '') + ' ui-table__th--' + (col.align ?? 'left')"
+                scope="col"
+                [attr.aria-sort]="getSortAriaLabel(col.key)"
+                [style.width]="col.width ?? null"
+                (click)="col.sortable ? sort(col.key) : null"
+              >
+                <span class="ui-table__th-inner">
+                  {{ col.label }}
+                  @if (col.sortable) {
+                    <span class="ui-table__sort-icon" aria-hidden="true">
+                      {{ getSortIcon(col.key) }}
+                    </span>
+                  }
+                </span>
+              </th>
+            }
+          </tr>
+        </thead>
+        <tbody class="ui-table__body">
+          @if (loading()) {
+            @for (i of loadingRows(); track i) {
+              <tr class="ui-table__row ui-table__row--loading">
+                @if (selectable()) {
+                  <td><div class="ui-skeleton" style="width:18px;height:18px;border-radius:4px"></div></td>
+                }
+                @for (col of columns(); track col.key) {
+                  <td class="ui-table__td">
+                    <div class="ui-skeleton" style="height:16px;border-radius:4px"></div>
+                  </td>
+                }
+              </tr>
+            }
+          } @else if (rows().length === 0) {
+            <tr>
+              <td [attr.colspan]="columns().length + (selectable() ? 1 : 0)" class="ui-table__empty">
+                <ng-content select="[slot=empty]" />
+                {{ emptyLabel() }}
+              </td>
+            </tr>
+          } @else {
+            @for (row of rows(); track rowId(row)) {
+              <tr
+                class="ui-table__row"
+                [class.ui-table__row--selected]="isSelected(rowId(row))"
+                (click)="onRowClick(row)"
+              >
+                @if (selectable()) {
+                  <td class="ui-table__td ui-table__td--checkbox">
+                    <input type="checkbox" [checked]="isSelected(rowId(row))"
+                           (change)="toggleRow(rowId(row))" [attr.aria-label]="'Select row'" />
+                  </td>
+                }
+                @for (col of columns(); track col.key) {
+                  <td [class]="'ui-table__td ui-table__td--' + (col.align ?? 'left')">
+                    @if (getCellTpl(col.key); as tpl) {
+                      <ng-container
+                        [ngTemplateOutlet]="tpl"
+                        [ngTemplateOutletContext]="{ $implicit: row, row: row }"
+                      />
+                    } @else {
+                      {{ row[col.key] }}
+                    }
+                  </td>
+                }
+              </tr>
+            }
+          }
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Custom cell template slots (projected, not rendered directly) -->
+    <ng-content />
+  `, styles: [".ui-table-wrap{width:100%;overflow-x:auto;border:1px solid var(--color-border);border-radius:var(--radius-xl)}.ui-table{width:100%;border-collapse:collapse;font-family:var(--font-sans)}.ui-table__caption{font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-text);padding:var(--spacing-3) var(--spacing-4);text-align:left;caption-side:top}.ui-table__head{background:var(--color-neutral-50)}.ui-table__th{padding:var(--spacing-3) var(--spacing-4);font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:var(--tracking-wide);border-bottom:1px solid var(--color-border);white-space:nowrap}.ui-table__th--left{text-align:left}.ui-table__th--center{text-align:center}.ui-table__th--right{text-align:right}.ui-table__th--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.ui-table__th--sortable:hover{color:var(--color-text)}.ui-table__th--checkbox{width:40px}.ui-table__th-inner{display:inline-flex;align-items:center;gap:var(--spacing-1)}.ui-table__sort-icon{font-size:.75em;opacity:.6}.ui-table__body{background:var(--color-bg)}.ui-table__row{border-bottom:1px solid var(--color-border);transition:background var(--transition-fast)}.ui-table__row:last-child{border-bottom:none}.ui-table__row:hover{background:var(--color-neutral-50)}.ui-table__row--selected{background:color-mix(in srgb,var(--color-primary-500) 5%,transparent)}.ui-table__row--loading{pointer-events:none}.ui-table__td{padding:var(--spacing-3) var(--spacing-4);font-size:var(--text-sm);color:var(--color-text);max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-table__td--left{text-align:left}.ui-table__td--center{text-align:center}.ui-table__td--right{text-align:right}.ui-table__td--checkbox{width:40px}.ui-table__empty{padding:var(--spacing-12) var(--spacing-4);text-align:center;color:var(--color-text-muted);font-size:var(--text-sm)}.ui-skeleton{background:linear-gradient(90deg,var(--color-neutral-100) 25%,var(--color-neutral-200) 50%,var(--color-neutral-100) 75%);background-size:200% 100%;animation:ui-shimmer 1.5s ease-in-out infinite}@keyframes ui-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
+        }], propDecorators: { cellDirs: [{
+                type: ContentChildren,
+                args: [UiTableCellDirective]
+            }] } });
+
+// ── Catalogue complet des icônes Lucide + aliases pratiques ──
+// `icons` contient les 1 700+ icônes en clés PascalCase.
+// Les aliases couvrent les noms courants qui n'existent pas dans Lucide.
+// LucideAngularComponent convertit kebab-case → PascalCase avant la recherche.
+// Ex : name="home" → cherche "Home" → House
+const SIDEBAR_ICONS = {
+    ...icons,
+    // Aliases courants absents du catalogue Lucide officiel
+    Home: House, // name="home"
+    Dashboard: LayoutDashboard, // name="dashboard"
+    Help: CircleQuestionMark, // name="help"
+    Logout: LogOut, // name="logout"
+    Contacts: Contact, // name="contacts"
+    Feedback: MessageSquare, // name="feedback"
+};
+/**
+ * Sidebar Organism — Source: Nuxt UI v4 ❖ DashboardSidebar
+ *
+ * Sidebar de dashboard avec :
+ * - Mode expanded (254px) ↔ collapsed (64px) avec animation CSS
+ * - Header : logo ou slot personnalisé
+ * - Navigation : groupes d'items avec icônes, badges, sous-menus, liens externes
+ * - Search button avec shortcut clavier (⌘ K)
+ * - Footer : utilisateur courant (avatar + nom)
+ * - Compatible dark mode via `[data-theme="dark"]`
+ *
+ * @example
+ * <ui-sidebar [navGroups]="groups" [user]="currentUser" />
+ * <ui-sidebar [(collapsed)]="sidebarCollapsed" [navGroups]="groups" />
+ */
+class SidebarComponent {
+    constructor() {
+        this.router = inject(Router);
+        // ── Inputs ────────────────────────────────────────────────
+        this.navGroups = input([]);
+        this.footerGroups = input([]);
+        this.user = input(null);
+        this.logoSrc = input(null);
+        this.logoAlt = input('Logo');
+        this.collapsible = input(true);
+        this.showSearch = input(true);
+        this.searchPlaceholder = input('Search...');
+        // ── Two-way binding ───────────────────────────────────────
+        this.collapsed = model(false);
+        // ── Outputs ───────────────────────────────────────────────
+        this.searchClick = output();
+        this.itemClick = output();
+        this.userClick = output();
+        // ── URL courante (réactive) ───────────────────────────────
+        this.currentUrl = toSignal(this.router.events.pipe(filter(e => e instanceof NavigationEnd), map(() => this.router.url), startWith(this.router.url)), { initialValue: this.router.url });
+        // ── Internal state (open sub-menus) ───────────────────────
+        this.openItems = signal(new Set());
+        // Auto-ouvre les sous-menus dont un enfant correspond à la route active
+        effect(() => {
+            const url = this.currentUrl();
+            const allGroups = [...this.navGroups(), ...this.footerGroups()];
+            allGroups.forEach(group => group.items.forEach(item => {
+                const hasActiveChild = item.children?.some(child => child.href && url.startsWith(child.href)) ?? false;
+                if (hasActiveChild) {
+                    this.openItems.update(set => new Set(set).add(item.id));
+                }
+            }));
+        });
+    }
+    isItemOpen(id) {
+        return this.openItems().has(id);
+    }
+    /**
+     * Un item parent (button) est actif si au moins un de ses enfants
+     * correspond à l'URL courante.
+     */
+    isParentActive(item) {
+        const url = this.currentUrl();
+        return item.children?.some(child => child.href ? url.startsWith(child.href) : false) ?? false;
+    }
+    toggleItem(id) {
+        this.openItems.update(set => {
+            const next = new Set(set);
+            next.has(id) ? next.delete(id) : next.add(id);
+            return next;
+        });
+    }
+    toggleCollapse() {
+        this.collapsed.update(v => !v);
+    }
+    navigate(item) {
+        this.itemClick.emit(item);
+        if (!item.href || item.disabled)
+            return;
+        if (item.external) {
+            window.open(item.href, '_blank', 'noopener,noreferrer');
+        }
+        else {
+            this.router.navigate([item.href]);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: SidebarComponent, isStandalone: true, selector: "ui-sidebar", inputs: { navGroups: { classPropertyName: "navGroups", publicName: "navGroups", isSignal: true, isRequired: false, transformFunction: null }, footerGroups: { classPropertyName: "footerGroups", publicName: "footerGroups", isSignal: true, isRequired: false, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, logoSrc: { classPropertyName: "logoSrc", publicName: "logoSrc", isSignal: true, isRequired: false, transformFunction: null }, logoAlt: { classPropertyName: "logoAlt", publicName: "logoAlt", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", searchClick: "searchClick", itemClick: "itemClick", userClick: "userClick" }, providers: [
+            { provide: LUCIDE_ICONS, multi: true, useValue: new LucideIconProvider(SIDEBAR_ICONS) },
+        ], ngImport: i0, template: `
+    <aside
+      class="ui-sidebar"
+      [class.ui-sidebar--collapsed]="collapsed()"
+      [class.ui-sidebar--collapsible]="collapsible()"
+      [attr.aria-label]="'Sidebar navigation'"
+    >
+
+      <!-- ── Header ─────────────────────────────────────────────── -->
+      <div class="ui-sidebar__header">
+        <div class="ui-sidebar__logo">
+          @if (logoSrc()) {
+            <img [src]="logoSrc()" [alt]="logoAlt()" class="ui-sidebar__logo-img" />
+          } @else {
+            <span class="ui-sidebar__logo-text">{{ logoAlt() }}</span>
+          }
+        </div>
+
+        @if (collapsible()) {
+          <!-- Figma: toggle uses i-lucide-chevrons-up-down, consistent in expanded & collapsed states -->
+          <button
+            type="button"
+            class="ui-sidebar__toggle"
+            [attr.aria-label]="collapsed() ? 'Expand sidebar' : 'Collapse sidebar'"
+            (click)="toggleCollapse()"
+          >
+            <lucide-icon name="chevrons-up-down" [size]="16" aria-hidden="true" />
+          </button>
+        }
+      </div>
+
+      <!-- ── Body ───────────────────────────────────────────────── -->
+      <div class="ui-sidebar__body">
+
+        <!-- Top section: search + primary nav groups -->
+        <div class="ui-sidebar__top">
+
+          <!-- Search button -->
+          @if (showSearch()) {
+            <button
+              type="button"
+              class="ui-sidebar__search"
+              [attr.aria-label]="searchPlaceholder()"
+              (click)="searchClick.emit()"
+            >
+              <lucide-icon name="search" [size]="20" aria-hidden="true" class="ui-sidebar__search-icon" />
+              <span class="ui-sidebar__search-label">{{ searchPlaceholder() }}</span>
+              <span class="ui-sidebar__search-kbd" aria-hidden="true">
+                <kbd class="ui-sidebar__kbd">⌘</kbd>
+                <kbd class="ui-sidebar__kbd">K</kbd>
+              </span>
+            </button>
+          }
+
+          <!-- Primary nav groups -->
+          @for (group of navGroups(); track $index) {
+            <nav class="ui-sidebar__group" [attr.aria-label]="group.label ?? 'Navigation'">
+              @if (group.label && !collapsed()) {
+                <p class="ui-sidebar__group-label">{{ group.label }}</p>
+              }
+              @for (item of group.items; track item.id) {
+                <div class="ui-sidebar__nav-item-wrap">
+
+                  @if (item.children?.length) {
+                    <!-- ── Collapsible parent item ── -->
+                    <button
+                      type="button"
+                      class="ui-sidebar__item"
+                      [class.ui-sidebar__item--active]="isParentActive(item)"
+                      [class.ui-sidebar__item--disabled]="item.disabled"
+                      [attr.aria-expanded]="isItemOpen(item.id)"
+                      [disabled]="item.disabled ?? null"
+                      (click)="toggleItem(item.id)"
+                    >
+                      @if (item.icon) {
+                        <lucide-icon [name]="item.icon" [size]="20" aria-hidden="true" class="ui-sidebar__item-icon" />
+                      }
+                      <span class="ui-sidebar__item-label">{{ item.label }}</span>
+                      @if (item.badge != null && !collapsed()) {
+                        <span class="ui-sidebar__badge" [attr.aria-label]="item.badge + ' notifications'">
+                          {{ item.badge }}
+                        </span>
+                      }
+                      @if (!collapsed()) {
+                        <span class="ui-sidebar__chevron"
+                              [class.ui-sidebar__chevron--open]="isItemOpen(item.id)"
+                              aria-hidden="true">
+                          <lucide-icon name="chevron-down" [size]="20" />
+                        </span>
+                      }
+                    </button>
+
+                    <!-- Sub-items (only in expanded mode) -->
+                    @if (isItemOpen(item.id) && !collapsed()) {
+                      <div class="ui-sidebar__children" [@expand]>
+                        @for (child of item.children; track child.id) {
+                          <!-- Figma: NavigationMenuItem child has border-l + px-[6px] on outer wrapper -->
+                          <div class="ui-sidebar__child-wrap"
+                               [class.ui-sidebar__child-wrap--active]="childRla.isActive">
+                            <button
+                              type="button"
+                              #childRla="routerLinkActive"
+                              routerLinkActive
+                              [routerLink]="!child.external ? (child.href ?? null) : null"
+                              [routerLinkActiveOptions]="{ exact: true }"
+                              class="ui-sidebar__child"
+                              [class.ui-sidebar__child--active]="child.external ? !!child.active : childRla.isActive"
+                              [class.ui-sidebar__child--disabled]="child.disabled"
+                              [disabled]="child.disabled ?? null"
+                              (click)="navigate(child)"
+                            >
+                              @if (child.icon) {
+                                <lucide-icon [name]="child.icon" [size]="16" aria-hidden="true" class="ui-sidebar__child-icon" />
+                              }
+                              <span class="ui-sidebar__child-label">{{ child.label }}</span>
+                            </button>
+                          </div>
+                        }
+                      </div>
+                    }
+
+                  } @else {
+                    <!-- ── Simple item ── -->
+                    <button
+                      type="button"
+                      #navRla="routerLinkActive"
+                      routerLinkActive
+                      [routerLink]="!item.external ? (item.href ?? null) : null"
+                      [routerLinkActiveOptions]="{ exact: false }"
+                      class="ui-sidebar__item"
+                      [class.ui-sidebar__item--active]="item.external ? !!item.active : navRla.isActive"
+                      [class.ui-sidebar__item--disabled]="item.disabled"
+                      [disabled]="item.disabled ?? null"
+                      (click)="navigate(item)"
+                    >
+                      @if (item.icon) {
+                        <lucide-icon [name]="item.icon" [size]="20" aria-hidden="true" class="ui-sidebar__item-icon" />
+                      }
+                      <span class="ui-sidebar__item-label">
+                        {{ item.label }}
+                        @if (item.external) {
+                          <lucide-icon name="arrow-up-right" [size]="12" aria-hidden="true" class="ui-sidebar__external" />
+                        }
+                      </span>
+                      @if (item.badge != null && !collapsed()) {
+                        <span class="ui-sidebar__badge" [attr.aria-label]="item.badge + ' notifications'">
+                          {{ item.badge }}
+                        </span>
+                      }
+                    </button>
+                  }
+
+                </div>
+              }
+            </nav>
+          }
+        </div>
+
+        <!-- Bottom section: secondary / footer nav groups -->
+        @if (footerGroups().length) {
+          <div class="ui-sidebar__bottom">
+            @for (group of footerGroups(); track $index) {
+              <nav class="ui-sidebar__group" [attr.aria-label]="group.label ?? 'Footer navigation'">
+                @for (item of group.items; track item.id) {
+                  <button
+                    type="button"
+                    #footerRla="routerLinkActive"
+                    routerLinkActive
+                    [routerLink]="!item.external ? (item.href ?? null) : null"
+                    [routerLinkActiveOptions]="{ exact: false }"
+                    class="ui-sidebar__item"
+                    [class.ui-sidebar__item--active]="item.external ? !!item.active : footerRla.isActive"
+                    [class.ui-sidebar__item--disabled]="item.disabled"
+                    [disabled]="item.disabled ?? null"
+                    (click)="navigate(item)"
+                  >
+                    @if (item.icon) {
+                      <lucide-icon [name]="item.icon" [size]="20" aria-hidden="true" class="ui-sidebar__item-icon" />
+                    }
+                    <span class="ui-sidebar__item-label">
+                      {{ item.label }}
+                      @if (item.external) {
+                        <lucide-icon name="arrow-up-right" [size]="12" aria-hidden="true" class="ui-sidebar__external" />
+                      }
+                    </span>
+                  </button>
+                }
+              </nav>
+            }
+          </div>
+        }
+
+      </div>
+
+      <!-- ── Footer ─────────────────────────────────────────────── -->
+      @if (user()) {
+        <div class="ui-sidebar__footer">
+          <button
+            type="button"
+            class="ui-sidebar__user"
+            [attr.aria-label]="'Account: ' + user()!.name"
+            (click)="userClick.emit(user()!)"
+          >
+            @if (user()!.avatar) {
+              <img
+                class="ui-sidebar__avatar"
+                [src]="user()!.avatar"
+                [alt]="user()!.name"
+              />
+            } @else {
+              <span class="ui-sidebar__avatar-fallback" aria-hidden="true">
+                {{ user()!.name.charAt(0).toUpperCase() }}
+              </span>
+            }
+            <span class="ui-sidebar__user-name">{{ user()!.name }}</span>
+          </button>
+        </div>
+      }
+
+    </aside>
+  `, isInline: true, styles: [".ui-sidebar{--sidebar-border-accented: #cad5e2;position:relative;display:flex;flex-direction:column;width:254px;height:100%;min-height:0;background:var(--color-bg);border-right:1px solid var(--color-border);overflow:hidden;transition:width var(--transition-slow)}.ui-sidebar--collapsed{width:64px}.ui-sidebar__header{position:relative;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;height:64px;padding:0 var(--spacing-4);border-bottom:1px solid var(--color-border);z-index:3}.ui-sidebar--collapsed .ui-sidebar__header{justify-content:center;padding:0 var(--spacing-2)}.ui-sidebar__logo{display:flex;align-items:center;overflow:hidden;white-space:nowrap;min-width:0}.ui-sidebar__logo-img{display:block;height:20px;width:auto;max-width:130px;object-fit:contain;flex-shrink:0;transition:opacity var(--transition-fast)}.ui-sidebar--collapsed .ui-sidebar__logo-img{max-width:32px;height:32px;object-fit:cover;border-radius:var(--radius-md)}.ui-sidebar__logo-text{font-size:var(--text-sm, 14px);font-weight:var(--font-medium, 500);color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity var(--transition-fast)}.ui-sidebar--collapsed .ui-sidebar__logo-text{opacity:0;width:0}.ui-sidebar__toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:transparent;color:var(--color-text-subtle);cursor:pointer;transition:background-color var(--transition-colors),color var(--transition-colors),border-color var(--transition-colors);padding:0}.ui-sidebar__toggle:hover{background:var(--color-bg-subtle);color:var(--color-text);border-color:var(--color-border-accent, var(--color-border))}.ui-sidebar__toggle:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:1px}.ui-sidebar--collapsed .ui-sidebar__toggle{width:32px;height:32px}.ui-sidebar__toggle lucide-icon{display:flex}.ui-sidebar__body{display:flex;flex-direction:column;flex:1 0 0;justify-content:space-between;overflow-y:auto;overflow-x:hidden;min-height:0;padding:var(--spacing-2) var(--spacing-4) var(--spacing-4-5, 18px);scrollbar-width:thin;scrollbar-color:var(--color-border) transparent;z-index:2}.ui-sidebar--collapsed .ui-sidebar__body{padding:var(--spacing-2)}.ui-sidebar__body::-webkit-scrollbar{width:4px}.ui-sidebar__body::-webkit-scrollbar-track{background:transparent}.ui-sidebar__body::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:2px}.ui-sidebar__top{display:flex;flex-direction:column;gap:var(--spacing-4)}.ui-sidebar__bottom{display:flex;flex-direction:column;margin-top:var(--spacing-4)}.ui-sidebar__search{display:flex;align-items:center;gap:var(--spacing-1-5);width:100%;height:32px;padding:0 var(--spacing-2-5);border:1px solid var(--sidebar-border-accented);border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);font-size:var(--text-sm, 14px);cursor:pointer;transition:background-color var(--transition-colors),border-color var(--transition-colors);text-align:left;flex-shrink:0}.ui-sidebar__search:hover{background:var(--color-bg-subtle);border-color:var(--sidebar-border-accented);color:var(--color-text)}.ui-sidebar__search:focus-visible{outline:none;border-color:var(--color-primary-500);box-shadow:0 0 0 1px var(--color-primary-500)}.ui-sidebar--collapsed .ui-sidebar__search{width:100%;height:36px;padding:0;border:1px solid var(--sidebar-border-accented);justify-content:center;border-radius:var(--radius-md)}lucide-icon.ui-sidebar__search-icon{display:flex;align-items:center;flex-shrink:0;width:20px;height:20px}lucide-icon.ui-sidebar__search-icon svg{width:100%;height:100%}.ui-sidebar__search-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:opacity var(--transition-fast),width var(--transition-fast)}.ui-sidebar--collapsed .ui-sidebar__search-label{display:none}.ui-sidebar__search-kbd{display:flex;align-items:center;gap:2px;flex-shrink:0;margin-left:auto}.ui-sidebar--collapsed .ui-sidebar__search-kbd{display:none}.ui-sidebar__kbd{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0 var(--spacing-1);border:1px solid var(--sidebar-border-accented);border-radius:var(--radius-sm, 4px);background:var(--color-bg);font-size:10px;font-family:var(--font-mono, monospace);color:var(--color-text);line-height:1}.ui-sidebar__group{display:flex;flex-direction:column}.ui-sidebar__group-label{padding:var(--spacing-1) var(--spacing-2-5);font-size:var(--text-xs, 11px);font-weight:var(--font-medium, 500);color:var(--color-text-subtle);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:var(--spacing-1)}.ui-sidebar__nav-item-wrap{display:flex;flex-direction:column;padding-right:6px}.ui-sidebar__nav-item-wrap:has(.ui-sidebar__item--active){padding-right:0}.ui-sidebar--collapsed .ui-sidebar__nav-item-wrap{padding-right:0}.ui-sidebar__item{display:flex;align-items:center;gap:var(--spacing-1-5);width:100%;padding:var(--spacing-1-5) var(--spacing-2-5);border-radius:var(--radius-md);background:transparent;border:none;color:var(--color-text-muted);font-family:var(--font-sans);font-size:var(--text-sm, 14px);font-weight:var(--font-medium, 500);text-decoration:none;cursor:pointer;white-space:nowrap;overflow:hidden;text-align:left;transition:background-color var(--transition-colors),color var(--transition-colors);min-height:32px}.ui-sidebar__item:hover:not(.ui-sidebar__item--disabled):not(.ui-sidebar__item--active){background:var(--color-bg-subtle);color:var(--color-text)}.ui-sidebar__item:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:1px}.ui-sidebar__item--active{background:var(--color-bg-muted);color:var(--color-primary-500);font-weight:var(--font-semibold, 600)}.ui-sidebar__item--active:hover{background:color-mix(in srgb,var(--color-primary-500) 8%,var(--color-bg))}.ui-sidebar__item--active .ui-sidebar__item-icon svg{stroke:var(--color-primary-500)}.ui-sidebar__item--disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.ui-sidebar--collapsed .ui-sidebar__item{justify-content:center;padding:var(--spacing-1-5);min-height:36px}lucide-icon.ui-sidebar__item-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px}lucide-icon.ui-sidebar__item-icon svg{width:100%;height:100%;flex-shrink:0}.ui-sidebar__item--active lucide-icon.ui-sidebar__item-icon svg{stroke:var(--color-primary-500)}.ui-sidebar__item-label{display:flex;align-items:center;gap:var(--spacing-1);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;transition:opacity var(--transition-fast)}.ui-sidebar--collapsed .ui-sidebar__item-label{display:none}lucide-icon.ui-sidebar__external{display:inline-flex;align-items:center;width:12px;height:12px;flex-shrink:0;opacity:.5}lucide-icon.ui-sidebar__external svg{width:100%;height:100%}.ui-sidebar__badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 var(--spacing-1-5);border-radius:var(--radius-md);background:var(--color-bg);border:1px solid var(--sidebar-border-accented);color:var(--color-text);font-size:10px;font-weight:var(--font-medium, 500);line-height:1;flex-shrink:0;margin-left:auto}.ui-sidebar__chevron{display:flex;align-items:center;flex-shrink:0;margin-left:auto;color:var(--color-text-subtle);transition:transform var(--transition-fast)}.ui-sidebar__chevron svg{width:20px;height:20px}.ui-sidebar__chevron--open{transform:rotate(180deg)}.ui-sidebar__children{display:flex;flex-direction:column;padding-left:var(--spacing-5);margin-top:var(--spacing-2);overflow:hidden}.ui-sidebar__child-wrap{display:flex;align-items:center;padding:0 var(--spacing-1-5);border-left:1px solid var(--color-border);width:100%}.ui-sidebar__child-wrap--active{border-color:var(--color-primary-500)}.ui-sidebar__child{display:flex;align-items:center;gap:var(--spacing-1-5);flex:1 0 0;width:100%;padding:var(--spacing-1-5) var(--spacing-2-5);border:none;border-radius:var(--radius-md);background:transparent;color:var(--color-text-muted);font-family:var(--font-sans);font-size:var(--text-sm, 14px);font-weight:var(--font-medium, 500);text-align:left;text-decoration:none;cursor:pointer;transition:background-color var(--transition-colors),color var(--transition-colors);white-space:nowrap;overflow:hidden;min-width:0}.ui-sidebar__child:hover:not(.ui-sidebar__child--disabled):not(.ui-sidebar__child--active){background:var(--color-bg-subtle);color:var(--color-text)}.ui-sidebar__child:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:1px}.ui-sidebar__child--active{color:var(--color-primary-500);background:color-mix(in srgb,var(--color-primary-500) 6%,transparent)}.ui-sidebar__child--disabled{opacity:.45;cursor:not-allowed;pointer-events:none}lucide-icon.ui-sidebar__child-icon{display:flex;align-items:center;flex-shrink:0;width:16px;height:16px;opacity:.6}lucide-icon.ui-sidebar__child-icon svg{width:100%;height:100%}.ui-sidebar__child-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-sidebar__footer{flex-shrink:0;padding:var(--spacing-2) var(--spacing-4);border-top:1px solid var(--color-border);z-index:1}.ui-sidebar--collapsed .ui-sidebar__footer{padding:var(--spacing-2)}.ui-sidebar__user{display:flex;align-items:center;gap:var(--spacing-1-5);width:100%;padding:var(--spacing-1-5) var(--spacing-2-5);border:none;border-radius:var(--radius-md);background:transparent;color:var(--color-text);font-family:var(--font-sans);font-size:var(--text-sm, 14px);font-weight:var(--font-medium, 500);cursor:pointer;text-align:left;white-space:nowrap;overflow:hidden;transition:background-color var(--transition-colors)}.ui-sidebar__user:hover{background:var(--color-bg-subtle)}.ui-sidebar__user:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:1px}.ui-sidebar--collapsed .ui-sidebar__user{justify-content:center;padding:var(--spacing-1-5)}.ui-sidebar__avatar{width:20px;height:20px;border-radius:var(--radius-full);object-fit:cover;flex-shrink:0}.ui-sidebar--collapsed .ui-sidebar__avatar{width:24px;height:24px}.ui-sidebar__avatar-fallback{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:var(--radius-full);background:var(--color-primary-500);color:#fff;font-size:10px;font-weight:var(--font-semibold, 600);flex-shrink:0}.ui-sidebar--collapsed .ui-sidebar__avatar-fallback{width:24px;height:24px;font-size:11px}.ui-sidebar__user-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;transition:opacity var(--transition-fast)}.ui-sidebar--collapsed .ui-sidebar__user-name{display:none}[data-theme=dark] .ui-sidebar{background:var(--color-neutral-950);border-color:var(--color-neutral-800)}[data-theme=dark] .ui-sidebar__header{border-color:var(--color-neutral-800)}[data-theme=dark] .ui-sidebar__toggle{border-color:var(--color-neutral-700);color:var(--color-neutral-400)}[data-theme=dark] .ui-sidebar__toggle:hover{background:var(--color-neutral-800);color:var(--color-neutral-100);border-color:var(--color-neutral-600)}[data-theme=dark] .ui-sidebar__search{background:var(--color-neutral-900);border-color:var(--color-neutral-700)}[data-theme=dark] .ui-sidebar__search:hover{background:var(--color-neutral-800)}[data-theme=dark] .ui-sidebar__kbd{background:var(--color-neutral-800);border-color:var(--color-neutral-600);color:var(--color-neutral-300)}[data-theme=dark] .ui-sidebar__item:hover:not(.ui-sidebar__item--disabled):not(.ui-sidebar__item--active){background:var(--color-neutral-800);color:var(--color-neutral-100)}[data-theme=dark] .ui-sidebar__item--active{background:var(--color-neutral-800)}[data-theme=dark] .ui-sidebar__badge{background:var(--color-neutral-800);border-color:var(--color-neutral-700);color:var(--color-neutral-200)}[data-theme=dark] .ui-sidebar__child-wrap{border-color:var(--color-neutral-700)}[data-theme=dark] .ui-sidebar__child-wrap--active{border-color:var(--color-primary-500)}[data-theme=dark] .ui-sidebar__child:hover:not(.ui-sidebar__child--disabled){background:var(--color-neutral-800);color:var(--color-neutral-100)}[data-theme=dark] .ui-sidebar__footer{border-color:var(--color-neutral-800)}[data-theme=dark] .ui-sidebar__user:hover{background:var(--color-neutral-800)}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1$2.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], animations: [
+            trigger('expand', [
+                transition(':enter', [
+                    style({ height: '0', opacity: 0, overflow: 'hidden' }),
+                    animate('180ms ease', style({ height: '*', opacity: 1, overflow: 'hidden' })),
+                ]),
+                transition(':leave', [
+                    style({ overflow: 'hidden' }),
+                    animate('150ms ease', style({ height: '0', opacity: 0 })),
+                ]),
+            ]),
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SidebarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-sidebar', standalone: true, imports: [RouterLink, RouterLinkActive, LucideAngularModule], providers: [
+                        { provide: LUCIDE_ICONS, multi: true, useValue: new LucideIconProvider(SIDEBAR_ICONS) },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, animations: [
+                        trigger('expand', [
+                            transition(':enter', [
+                                style({ height: '0', opacity: 0, overflow: 'hidden' }),
+                                animate('180ms ease', style({ height: '*', opacity: 1, overflow: 'hidden' })),
+                            ]),
+                            transition(':leave', [
+                                style({ overflow: 'hidden' }),
+                                animate('150ms ease', style({ height: '0', opacity: 0 })),
+                            ]),
+                        ]),
+                    ], template: `
+    <aside
+      class="ui-sidebar"
+      [class.ui-sidebar--collapsed]="collapsed()"
+      [class.ui-sidebar--collapsible]="collapsible()"
+      [attr.aria-label]="'Sidebar navigation'"
+    >
+
+      <!-- ── Header ─────────────────────────────────────────────── -->
+      <div class="ui-sidebar__header">
+        <div class="ui-sidebar__logo">
+          @if (logoSrc()) {
+            <img [src]="logoSrc()" [alt]="logoAlt()" class="ui-sidebar__logo-img" />
+          } @else {
+            <span class="ui-sidebar__logo-text">{{ logoAlt() }}</span>
+          }
+        </div>
+
+        @if (collapsible()) {
+          <!-- Figma: toggle uses i-lucide-chevrons-up-down, consistent in expanded & collapsed states -->
+          <button
+            type="button"
+            class="ui-sidebar__toggle"
+            [attr.aria-label]="collapsed() ? 'Expand sidebar' : 'Collapse sidebar'"
+            (click)="toggleCollapse()"
+          >
+            <lucide-icon name="chevrons-up-down" [size]="16" aria-hidden="true" />
+          </button>
+        }
+      </div>
+
+      <!-- ── Body ───────────────────────────────────────────────── -->
+      <div class="ui-sidebar__body">
+
+        <!-- Top section: search + primary nav groups -->
+        <div class="ui-sidebar__top">
+
+          <!-- Search button -->
+          @if (showSearch()) {
+            <button
+              type="button"
+              class="ui-sidebar__search"
+              [attr.aria-label]="searchPlaceholder()"
+              (click)="searchClick.emit()"
+            >
+              <lucide-icon name="search" [size]="20" aria-hidden="true" class="ui-sidebar__search-icon" />
+              <span class="ui-sidebar__search-label">{{ searchPlaceholder() }}</span>
+              <span class="ui-sidebar__search-kbd" aria-hidden="true">
+                <kbd class="ui-sidebar__kbd">⌘</kbd>
+                <kbd class="ui-sidebar__kbd">K</kbd>
+              </span>
+            </button>
+          }
+
+          <!-- Primary nav groups -->
+          @for (group of navGroups(); track $index) {
+            <nav class="ui-sidebar__group" [attr.aria-label]="group.label ?? 'Navigation'">
+              @if (group.label && !collapsed()) {
+                <p class="ui-sidebar__group-label">{{ group.label }}</p>
+              }
+              @for (item of group.items; track item.id) {
+                <div class="ui-sidebar__nav-item-wrap">
+
+                  @if (item.children?.length) {
+                    <!-- ── Collapsible parent item ── -->
+                    <button
+                      type="button"
+                      class="ui-sidebar__item"
+                      [class.ui-sidebar__item--active]="isParentActive(item)"
+                      [class.ui-sidebar__item--disabled]="item.disabled"
+                      [attr.aria-expanded]="isItemOpen(item.id)"
+                      [disabled]="item.disabled ?? null"
+                      (click)="toggleItem(item.id)"
+                    >
+                      @if (item.icon) {
+                        <lucide-icon [name]="item.icon" [size]="20" aria-hidden="true" class="ui-sidebar__item-icon" />
+                      }
+                      <span class="ui-sidebar__item-label">{{ item.label }}</span>
+                      @if (item.badge != null && !collapsed()) {
+                        <span class="ui-sidebar__badge" [attr.aria-label]="item.badge + ' notifications'">
+                          {{ item.badge }}
+                        </span>
+                      }
+                      @if (!collapsed()) {
+                        <span class="ui-sidebar__chevron"
+                              [class.ui-sidebar__chevron--open]="isItemOpen(item.id)"
+                              aria-hidden="true">
+                          <lucide-icon name="chevron-down" [size]="20" />
+                        </span>
+                      }
+                    </button>
+
+                    <!-- Sub-items (only in expanded mode) -->
+                    @if (isItemOpen(item.id) && !collapsed()) {
+                      <div class="ui-sidebar__children" [@expand]>
+                        @for (child of item.children; track child.id) {
+                          <!-- Figma: NavigationMenuItem child has border-l + px-[6px] on outer wrapper -->
+                          <div class="ui-sidebar__child-wrap"
+                               [class.ui-sidebar__child-wrap--active]="childRla.isActive">
+                            <button
+                              type="button"
+                              #childRla="routerLinkActive"
+                              routerLinkActive
+                              [routerLink]="!child.external ? (child.href ?? null) : null"
+                              [routerLinkActiveOptions]="{ exact: true }"
+                              class="ui-sidebar__child"
+                              [class.ui-sidebar__child--active]="child.external ? !!child.active : childRla.isActive"
+                              [class.ui-sidebar__child--disabled]="child.disabled"
+                              [disabled]="child.disabled ?? null"
+                              (click)="navigate(child)"
+                            >
+                              @if (child.icon) {
+                                <lucide-icon [name]="child.icon" [size]="16" aria-hidden="true" class="ui-sidebar__child-icon" />
+                              }
+                              <span class="ui-sidebar__child-label">{{ child.label }}</span>
+                            </button>
+                          </div>
+                        }
+                      </div>
+                    }
+
+                  } @else {
+                    <!-- ── Simple item ── -->
+                    <button
+                      type="button"
+                      #navRla="routerLinkActive"
+                      routerLinkActive
+                      [routerLink]="!item.external ? (item.href ?? null) : null"
+                      [routerLinkActiveOptions]="{ exact: false }"
+                      class="ui-sidebar__item"
+                      [class.ui-sidebar__item--active]="item.external ? !!item.active : navRla.isActive"
+                      [class.ui-sidebar__item--disabled]="item.disabled"
+                      [disabled]="item.disabled ?? null"
+                      (click)="navigate(item)"
+                    >
+                      @if (item.icon) {
+                        <lucide-icon [name]="item.icon" [size]="20" aria-hidden="true" class="ui-sidebar__item-icon" />
+                      }
+                      <span class="ui-sidebar__item-label">
+                        {{ item.label }}
+                        @if (item.external) {
+                          <lucide-icon name="arrow-up-right" [size]="12" aria-hidden="true" class="ui-sidebar__external" />
+                        }
+                      </span>
+                      @if (item.badge != null && !collapsed()) {
+                        <span class="ui-sidebar__badge" [attr.aria-label]="item.badge + ' notifications'">
+                          {{ item.badge }}
+                        </span>
+                      }
+                    </button>
+                  }
+
+                </div>
+              }
+            </nav>
+          }
+        </div>
+
+        <!-- Bottom section: secondary / footer nav groups -->
+        @if (footerGroups().length) {
+          <div class="ui-sidebar__bottom">
+            @for (group of footerGroups(); track $index) {
+              <nav class="ui-sidebar__group" [attr.aria-label]="group.label ?? 'Footer navigation'">
+                @for (item of group.items; track item.id) {
+                  <button
+                    type="button"
+                    #footerRla="routerLinkActive"
+                    routerLinkActive
+                    [routerLink]="!item.external ? (item.href ?? null) : null"
+                    [routerLinkActiveOptions]="{ exact: false }"
+                    class="ui-sidebar__item"
+                    [class.ui-sidebar__item--active]="item.external ? !!item.active : footerRla.isActive"
+                    [class.ui-sidebar__item--disabled]="item.disabled"
+                    [disabled]="item.disabled ?? null"
+                    (click)="navigate(item)"
+                  >
+                    @if (item.icon) {
+                      <lucide-icon [name]="item.icon" [size]="20" aria-hidden="true" class="ui-sidebar__item-icon" />
+                    }
+                    <span class="ui-sidebar__item-label">
+                      {{ item.label }}
+                      @if (item.external) {
+                        <lucide-icon name="arrow-up-right" [size]="12" aria-hidden="true" class="ui-sidebar__external" />
+                      }
+                    </span>
+                  </button>
+                }
+              </nav>
+            }
+          </div>
+        }
+
+      </div>
+
+      <!-- ── Footer ─────────────────────────────────────────────── -->
+      @if (user()) {
+        <div class="ui-sidebar__footer">
+          <button
+            type="button"
+            class="ui-sidebar__user"
+            [attr.aria-label]="'Account: ' + user()!.name"
+            (click)="userClick.emit(user()!)"
+          >
+            @if (user()!.avatar) {
+              <img
+                class="ui-sidebar__avatar"
+                [src]="user()!.avatar"
+                [alt]="user()!.name"
+              />
+            } @else {
+              <span class="ui-sidebar__avatar-fallback" aria-hidden="true">
+                {{ user()!.name.charAt(0).toUpperCase() }}
+              </span>
+            }
+            <span class="ui-sidebar__user-name">{{ user()!.name }}</span>
+          </button>
+        </div>
+      }
+
+    </aside>
+  `, styles: [".ui-sidebar{--sidebar-border-accented: #cad5e2;position:relative;display:flex;flex-direction:column;width:254px;height:100%;min-height:0;background:var(--color-bg);border-right:1px solid var(--color-border);overflow:hidden;transition:width var(--transition-slow)}.ui-sidebar--collapsed{width:64px}.ui-sidebar__header{position:relative;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;height:64px;padding:0 var(--spacing-4);border-bottom:1px solid var(--color-border);z-index:3}.ui-sidebar--collapsed .ui-sidebar__header{justify-content:center;padding:0 var(--spacing-2)}.ui-sidebar__logo{display:flex;align-items:center;overflow:hidden;white-space:nowrap;min-width:0}.ui-sidebar__logo-img{display:block;height:20px;width:auto;max-width:130px;object-fit:contain;flex-shrink:0;transition:opacity var(--transition-fast)}.ui-sidebar--collapsed .ui-sidebar__logo-img{max-width:32px;height:32px;object-fit:cover;border-radius:var(--radius-md)}.ui-sidebar__logo-text{font-size:var(--text-sm, 14px);font-weight:var(--font-medium, 500);color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity var(--transition-fast)}.ui-sidebar--collapsed .ui-sidebar__logo-text{opacity:0;width:0}.ui-sidebar__toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:transparent;color:var(--color-text-subtle);cursor:pointer;transition:background-color var(--transition-colors),color var(--transition-colors),border-color var(--transition-colors);padding:0}.ui-sidebar__toggle:hover{background:var(--color-bg-subtle);color:var(--color-text);border-color:var(--color-border-accent, var(--color-border))}.ui-sidebar__toggle:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:1px}.ui-sidebar--collapsed .ui-sidebar__toggle{width:32px;height:32px}.ui-sidebar__toggle lucide-icon{display:flex}.ui-sidebar__body{display:flex;flex-direction:column;flex:1 0 0;justify-content:space-between;overflow-y:auto;overflow-x:hidden;min-height:0;padding:var(--spacing-2) var(--spacing-4) var(--spacing-4-5, 18px);scrollbar-width:thin;scrollbar-color:var(--color-border) transparent;z-index:2}.ui-sidebar--collapsed .ui-sidebar__body{padding:var(--spacing-2)}.ui-sidebar__body::-webkit-scrollbar{width:4px}.ui-sidebar__body::-webkit-scrollbar-track{background:transparent}.ui-sidebar__body::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:2px}.ui-sidebar__top{display:flex;flex-direction:column;gap:var(--spacing-4)}.ui-sidebar__bottom{display:flex;flex-direction:column;margin-top:var(--spacing-4)}.ui-sidebar__search{display:flex;align-items:center;gap:var(--spacing-1-5);width:100%;height:32px;padding:0 var(--spacing-2-5);border:1px solid var(--sidebar-border-accented);border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);font-size:var(--text-sm, 14px);cursor:pointer;transition:background-color var(--transition-colors),border-color var(--transition-colors);text-align:left;flex-shrink:0}.ui-sidebar__search:hover{background:var(--color-bg-subtle);border-color:var(--sidebar-border-accented);color:var(--color-text)}.ui-sidebar__search:focus-visible{outline:none;border-color:var(--color-primary-500);box-shadow:0 0 0 1px var(--color-primary-500)}.ui-sidebar--collapsed .ui-sidebar__search{width:100%;height:36px;padding:0;border:1px solid var(--sidebar-border-accented);justify-content:center;border-radius:var(--radius-md)}lucide-icon.ui-sidebar__search-icon{display:flex;align-items:center;flex-shrink:0;width:20px;height:20px}lucide-icon.ui-sidebar__search-icon svg{width:100%;height:100%}.ui-sidebar__search-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:opacity var(--transition-fast),width var(--transition-fast)}.ui-sidebar--collapsed .ui-sidebar__search-label{display:none}.ui-sidebar__search-kbd{display:flex;align-items:center;gap:2px;flex-shrink:0;margin-left:auto}.ui-sidebar--collapsed .ui-sidebar__search-kbd{display:none}.ui-sidebar__kbd{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0 var(--spacing-1);border:1px solid var(--sidebar-border-accented);border-radius:var(--radius-sm, 4px);background:var(--color-bg);font-size:10px;font-family:var(--font-mono, monospace);color:var(--color-text);line-height:1}.ui-sidebar__group{display:flex;flex-direction:column}.ui-sidebar__group-label{padding:var(--spacing-1) var(--spacing-2-5);font-size:var(--text-xs, 11px);font-weight:var(--font-medium, 500);color:var(--color-text-subtle);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:var(--spacing-1)}.ui-sidebar__nav-item-wrap{display:flex;flex-direction:column;padding-right:6px}.ui-sidebar__nav-item-wrap:has(.ui-sidebar__item--active){padding-right:0}.ui-sidebar--collapsed .ui-sidebar__nav-item-wrap{padding-right:0}.ui-sidebar__item{display:flex;align-items:center;gap:var(--spacing-1-5);width:100%;padding:var(--spacing-1-5) var(--spacing-2-5);border-radius:var(--radius-md);background:transparent;border:none;color:var(--color-text-muted);font-family:var(--font-sans);font-size:var(--text-sm, 14px);font-weight:var(--font-medium, 500);text-decoration:none;cursor:pointer;white-space:nowrap;overflow:hidden;text-align:left;transition:background-color var(--transition-colors),color var(--transition-colors);min-height:32px}.ui-sidebar__item:hover:not(.ui-sidebar__item--disabled):not(.ui-sidebar__item--active){background:var(--color-bg-subtle);color:var(--color-text)}.ui-sidebar__item:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:1px}.ui-sidebar__item--active{background:var(--color-bg-muted);color:var(--color-primary-500);font-weight:var(--font-semibold, 600)}.ui-sidebar__item--active:hover{background:color-mix(in srgb,var(--color-primary-500) 8%,var(--color-bg))}.ui-sidebar__item--active .ui-sidebar__item-icon svg{stroke:var(--color-primary-500)}.ui-sidebar__item--disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.ui-sidebar--collapsed .ui-sidebar__item{justify-content:center;padding:var(--spacing-1-5);min-height:36px}lucide-icon.ui-sidebar__item-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px}lucide-icon.ui-sidebar__item-icon svg{width:100%;height:100%;flex-shrink:0}.ui-sidebar__item--active lucide-icon.ui-sidebar__item-icon svg{stroke:var(--color-primary-500)}.ui-sidebar__item-label{display:flex;align-items:center;gap:var(--spacing-1);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;transition:opacity var(--transition-fast)}.ui-sidebar--collapsed .ui-sidebar__item-label{display:none}lucide-icon.ui-sidebar__external{display:inline-flex;align-items:center;width:12px;height:12px;flex-shrink:0;opacity:.5}lucide-icon.ui-sidebar__external svg{width:100%;height:100%}.ui-sidebar__badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 var(--spacing-1-5);border-radius:var(--radius-md);background:var(--color-bg);border:1px solid var(--sidebar-border-accented);color:var(--color-text);font-size:10px;font-weight:var(--font-medium, 500);line-height:1;flex-shrink:0;margin-left:auto}.ui-sidebar__chevron{display:flex;align-items:center;flex-shrink:0;margin-left:auto;color:var(--color-text-subtle);transition:transform var(--transition-fast)}.ui-sidebar__chevron svg{width:20px;height:20px}.ui-sidebar__chevron--open{transform:rotate(180deg)}.ui-sidebar__children{display:flex;flex-direction:column;padding-left:var(--spacing-5);margin-top:var(--spacing-2);overflow:hidden}.ui-sidebar__child-wrap{display:flex;align-items:center;padding:0 var(--spacing-1-5);border-left:1px solid var(--color-border);width:100%}.ui-sidebar__child-wrap--active{border-color:var(--color-primary-500)}.ui-sidebar__child{display:flex;align-items:center;gap:var(--spacing-1-5);flex:1 0 0;width:100%;padding:var(--spacing-1-5) var(--spacing-2-5);border:none;border-radius:var(--radius-md);background:transparent;color:var(--color-text-muted);font-family:var(--font-sans);font-size:var(--text-sm, 14px);font-weight:var(--font-medium, 500);text-align:left;text-decoration:none;cursor:pointer;transition:background-color var(--transition-colors),color var(--transition-colors);white-space:nowrap;overflow:hidden;min-width:0}.ui-sidebar__child:hover:not(.ui-sidebar__child--disabled):not(.ui-sidebar__child--active){background:var(--color-bg-subtle);color:var(--color-text)}.ui-sidebar__child:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:1px}.ui-sidebar__child--active{color:var(--color-primary-500);background:color-mix(in srgb,var(--color-primary-500) 6%,transparent)}.ui-sidebar__child--disabled{opacity:.45;cursor:not-allowed;pointer-events:none}lucide-icon.ui-sidebar__child-icon{display:flex;align-items:center;flex-shrink:0;width:16px;height:16px;opacity:.6}lucide-icon.ui-sidebar__child-icon svg{width:100%;height:100%}.ui-sidebar__child-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-sidebar__footer{flex-shrink:0;padding:var(--spacing-2) var(--spacing-4);border-top:1px solid var(--color-border);z-index:1}.ui-sidebar--collapsed .ui-sidebar__footer{padding:var(--spacing-2)}.ui-sidebar__user{display:flex;align-items:center;gap:var(--spacing-1-5);width:100%;padding:var(--spacing-1-5) var(--spacing-2-5);border:none;border-radius:var(--radius-md);background:transparent;color:var(--color-text);font-family:var(--font-sans);font-size:var(--text-sm, 14px);font-weight:var(--font-medium, 500);cursor:pointer;text-align:left;white-space:nowrap;overflow:hidden;transition:background-color var(--transition-colors)}.ui-sidebar__user:hover{background:var(--color-bg-subtle)}.ui-sidebar__user:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:1px}.ui-sidebar--collapsed .ui-sidebar__user{justify-content:center;padding:var(--spacing-1-5)}.ui-sidebar__avatar{width:20px;height:20px;border-radius:var(--radius-full);object-fit:cover;flex-shrink:0}.ui-sidebar--collapsed .ui-sidebar__avatar{width:24px;height:24px}.ui-sidebar__avatar-fallback{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:var(--radius-full);background:var(--color-primary-500);color:#fff;font-size:10px;font-weight:var(--font-semibold, 600);flex-shrink:0}.ui-sidebar--collapsed .ui-sidebar__avatar-fallback{width:24px;height:24px;font-size:11px}.ui-sidebar__user-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;transition:opacity var(--transition-fast)}.ui-sidebar--collapsed .ui-sidebar__user-name{display:none}[data-theme=dark] .ui-sidebar{background:var(--color-neutral-950);border-color:var(--color-neutral-800)}[data-theme=dark] .ui-sidebar__header{border-color:var(--color-neutral-800)}[data-theme=dark] .ui-sidebar__toggle{border-color:var(--color-neutral-700);color:var(--color-neutral-400)}[data-theme=dark] .ui-sidebar__toggle:hover{background:var(--color-neutral-800);color:var(--color-neutral-100);border-color:var(--color-neutral-600)}[data-theme=dark] .ui-sidebar__search{background:var(--color-neutral-900);border-color:var(--color-neutral-700)}[data-theme=dark] .ui-sidebar__search:hover{background:var(--color-neutral-800)}[data-theme=dark] .ui-sidebar__kbd{background:var(--color-neutral-800);border-color:var(--color-neutral-600);color:var(--color-neutral-300)}[data-theme=dark] .ui-sidebar__item:hover:not(.ui-sidebar__item--disabled):not(.ui-sidebar__item--active){background:var(--color-neutral-800);color:var(--color-neutral-100)}[data-theme=dark] .ui-sidebar__item--active{background:var(--color-neutral-800)}[data-theme=dark] .ui-sidebar__badge{background:var(--color-neutral-800);border-color:var(--color-neutral-700);color:var(--color-neutral-200)}[data-theme=dark] .ui-sidebar__child-wrap{border-color:var(--color-neutral-700)}[data-theme=dark] .ui-sidebar__child-wrap--active{border-color:var(--color-primary-500)}[data-theme=dark] .ui-sidebar__child:hover:not(.ui-sidebar__child--disabled){background:var(--color-neutral-800);color:var(--color-neutral-100)}[data-theme=dark] .ui-sidebar__footer{border-color:var(--color-neutral-800)}[data-theme=dark] .ui-sidebar__user:hover{background:var(--color-neutral-800)}\n"] }]
+        }], ctorParameters: () => [] });
+
+// ============================================================
+// ORGANISMS — Nuxt UI v3 Design Kit → Angular 19 + NX
+// Complex components composed of atoms + molecules
+// ============================================================
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AccordionComponent, CardComponent, DropdownMenuComponent, ModalComponent, NavigationMenuComponent, SidebarComponent, TableComponent, UiTableCellDirective };
+//# sourceMappingURL=atomng-ui-organisms.mjs.map