@atomng/ui 1.0.0

package/fesm2022/atomng-ui.mjs

@@ -0,0 +1,4184 @@
+import * as i0 from '@angular/core';
+import { inject, PLATFORM_ID, signal, computed, effect, Injectable, makeEnvironmentProviders, APP_INITIALIZER, output, ChangeDetectionStrategy, Component, input, model, forwardRef, HostListener, ViewChild, Input, Directive, ContentChildren } from '@angular/core';
+import * as i1$2 from '@angular/common';
+import { isPlatformBrowser, CommonModule, NgTemplateOutlet } from '@angular/common';
+import * as i1$1 from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i1 from '@angular/router';
+import { RouterModule, Router, NavigationEnd, RouterLink, RouterLinkActive } from '@angular/router';
+import { AvatarComponent as AvatarComponent$1 } from '@atomng/ui/atoms';
+import { trigger, transition, style, animate, state } from '@angular/animations';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { filter, map, startWith } from 'rxjs';
+import * as i1$3 from 'lucide-angular';
+import { MessageSquare, Contact, LogOut, CircleQuestionMark, LayoutDashboard, House, icons, LucideAngularModule, LucideIconProvider, LUCIDE_ICONS } from 'lucide-angular';
+
+// ── Color presets ─────────────────────────────────────────────────────────────
+// Full 11-step palettes (50→950).
+// Colors sourced from Tailwind CSS v3 palette — production-grade, accessible.
+// Each palette is keyed by a human-readable preset name.
+// ── Palette definitions ───────────────────────────────────────────────────────
+const COLOR_PRESETS = {
+    green: {
+        name: 'green', label: 'Green', swatch: '#22c55e',
+        palette: {
+            50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac',
+            400: '#4ade80', 500: '#22c55e', 600: '#16a34a', 700: '#15803d',
+            800: '#166534', 900: '#14532d', 950: '#052e16',
+        },
+    },
+    emerald: {
+        name: 'emerald', label: 'Emerald', swatch: '#10b981',
+        palette: {
+            50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b7',
+            400: '#34d399', 500: '#10b981', 600: '#059669', 700: '#047857',
+            800: '#065f46', 900: '#064e3b', 950: '#022c22',
+        },
+    },
+    teal: {
+        name: 'teal', label: 'Teal', swatch: '#14b8a6',
+        palette: {
+            50: '#f0fdfa', 100: '#ccfbf1', 200: '#99f6e4', 300: '#5eead4',
+            400: '#2dd4bf', 500: '#14b8a6', 600: '#0d9488', 700: '#0f766e',
+            800: '#115e59', 900: '#134e4a', 950: '#042f2e',
+        },
+    },
+    cyan: {
+        name: 'cyan', label: 'Cyan', swatch: '#06b6d4',
+        palette: {
+            50: '#ecfeff', 100: '#cffafe', 200: '#a5f3fc', 300: '#67e8f9',
+            400: '#22d3ee', 500: '#06b6d4', 600: '#0891b2', 700: '#0e7490',
+            800: '#155e75', 900: '#164e63', 950: '#083344',
+        },
+    },
+    sky: {
+        name: 'sky', label: 'Sky', swatch: '#0ea5e9',
+        palette: {
+            50: '#f0f9ff', 100: '#e0f2fe', 200: '#bae6fd', 300: '#7dd3fc',
+            400: '#38bdf8', 500: '#0ea5e9', 600: '#0284c7', 700: '#0369a1',
+            800: '#075985', 900: '#0c4a6e', 950: '#082f49',
+        },
+    },
+    blue: {
+        name: 'blue', label: 'Blue', swatch: '#3b82f6',
+        palette: {
+            50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd',
+            400: '#60a5fa', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8',
+            800: '#1e40af', 900: '#1e3a8a', 950: '#172554',
+        },
+    },
+    indigo: {
+        name: 'indigo', label: 'Indigo', swatch: '#6366f1',
+        palette: {
+            50: '#eef2ff', 100: '#e0e7ff', 200: '#c7d2fe', 300: '#a5b4fc',
+            400: '#818cf8', 500: '#6366f1', 600: '#4f46e5', 700: '#4338ca',
+            800: '#3730a3', 900: '#312e81', 950: '#1e1b4b',
+        },
+    },
+    violet: {
+        name: 'violet', label: 'Violet', swatch: '#8b5cf6',
+        palette: {
+            50: '#f5f3ff', 100: '#ede9fe', 200: '#ddd6fe', 300: '#c4b5fd',
+            400: '#a78bfa', 500: '#8b5cf6', 600: '#7c3aed', 700: '#6d28d9',
+            800: '#5b21b6', 900: '#4c1d95', 950: '#2e1065',
+        },
+    },
+    purple: {
+        name: 'purple', label: 'Purple', swatch: '#a855f7',
+        palette: {
+            50: '#faf5ff', 100: '#f3e8ff', 200: '#e9d5ff', 300: '#d8b4fe',
+            400: '#c084fc', 500: '#a855f7', 600: '#9333ea', 700: '#7e22ce',
+            800: '#6b21a8', 900: '#581c87', 950: '#3b0764',
+        },
+    },
+    fuchsia: {
+        name: 'fuchsia', label: 'Fuchsia', swatch: '#d946ef',
+        palette: {
+            50: '#fdf4ff', 100: '#fae8ff', 200: '#f5d0fe', 300: '#f0abfc',
+            400: '#e879f9', 500: '#d946ef', 600: '#c026d3', 700: '#a21caf',
+            800: '#86198f', 900: '#701a75', 950: '#4a044e',
+        },
+    },
+    pink: {
+        name: 'pink', label: 'Pink', swatch: '#ec4899',
+        palette: {
+            50: '#fdf2f8', 100: '#fce7f3', 200: '#fbcfe8', 300: '#f9a8d4',
+            400: '#f472b6', 500: '#ec4899', 600: '#db2777', 700: '#be185d',
+            800: '#9d174d', 900: '#831843', 950: '#500724',
+        },
+    },
+    rose: {
+        name: 'rose', label: 'Rose', swatch: '#f43f5e',
+        palette: {
+            50: '#fff1f2', 100: '#ffe4e6', 200: '#fecdd3', 300: '#fda4af',
+            400: '#fb7185', 500: '#f43f5e', 600: '#e11d48', 700: '#be123c',
+            800: '#9f1239', 900: '#881337', 950: '#4c0519',
+        },
+    },
+    red: {
+        name: 'red', label: 'Red', swatch: '#ef4444',
+        palette: {
+            50: '#fef2f2', 100: '#fee2e2', 200: '#fecaca', 300: '#fca5a5',
+            400: '#f87171', 500: '#ef4444', 600: '#dc2626', 700: '#b91c1c',
+            800: '#991b1b', 900: '#7f1d1d', 950: '#450a0a',
+        },
+    },
+    orange: {
+        name: 'orange', label: 'Orange', swatch: '#f97316',
+        palette: {
+            50: '#fff7ed', 100: '#ffedd5', 200: '#fed7aa', 300: '#fdba74',
+            400: '#fb923c', 500: '#f97316', 600: '#ea580c', 700: '#c2410c',
+            800: '#9a3412', 900: '#7c2d12', 950: '#431407',
+        },
+    },
+    amber: {
+        name: 'amber', label: 'Amber', swatch: '#f59e0b',
+        palette: {
+            50: '#fffbeb', 100: '#fef3c7', 200: '#fde68a', 300: '#fcd34d',
+            400: '#fbbf24', 500: '#f59e0b', 600: '#d97706', 700: '#b45309',
+            800: '#92400e', 900: '#78350f', 950: '#451a03',
+        },
+    },
+    lime: {
+        name: 'lime', label: 'Lime', swatch: '#84cc16',
+        palette: {
+            50: '#f7fee7', 100: '#ecfccb', 200: '#d9f99d', 300: '#bef264',
+            400: '#a3e635', 500: '#84cc16', 600: '#65a30d', 700: '#4d7c0f',
+            800: '#3f6212', 900: '#365314', 950: '#1a2e05',
+        },
+    },
+    slate: {
+        name: 'slate', label: 'Slate', swatch: '#64748b',
+        palette: {
+            50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 300: '#cbd5e1',
+            400: '#94a3b8', 500: '#64748b', 600: '#475569', 700: '#334155',
+            800: '#1e293b', 900: '#0f172a', 950: '#020617',
+        },
+    },
+    zinc: {
+        name: 'zinc', label: 'Zinc', swatch: '#71717a',
+        palette: {
+            50: '#fafafa', 100: '#f4f4f5', 200: '#e4e4e7', 300: '#d4d4d8',
+            400: '#a1a1aa', 500: '#71717a', 600: '#52525b', 700: '#3f3f46',
+            800: '#27272a', 900: '#18181b', 950: '#09090b',
+        },
+    },
+};
+/** Returns all preset metas sorted for display */
+function getAllPresets() {
+    return Object.values(COLOR_PRESETS);
+}
+
+const STORAGE_KEY_MODE = 'ui-theme-mode';
+const STORAGE_KEY_PRESET = 'ui-theme-preset';
+// ── ThemeService ──────────────────────────────────────────────────────────────
+// Single source of truth for:
+//   · Primary color palette  → overrides --color-primary-* CSS vars on :root
+//   · Theme mode (light / dark / system) → sets data-theme attribute
+//
+// State is persisted to localStorage and restored on next page load.
+//
+// Usage (anywhere in the app):
+//   theme = inject(ThemeService);
+//   theme.setPrimary('violet');
+//   theme.setMode('dark');
+class ThemeService {
+    // ── Constructor — restore from localStorage ───────────────────────────────
+    constructor() {
+        this.platformId = inject(PLATFORM_ID);
+        // ── Private state ─────────────────────────────────────────────────────────
+        this._preset = signal(null);
+        this._palette = signal(null);
+        this._mode = signal('light');
+        // ── Public read-only signals ──────────────────────────────────────────────
+        /** Currently active preset name (null when a custom palette was set) */
+        this.activePreset = this._preset.asReadonly();
+        /** Resolved full palette */
+        this.activePalette = computed(() => {
+            const custom = this._palette();
+            if (custom)
+                return custom;
+            const preset = this._preset();
+            return preset ? (COLOR_PRESETS[preset]?.palette ?? null) : null;
+        });
+        /** Currently active mode */
+        this.activeMode = this._mode.asReadonly();
+        /** Derived boolean — true when dark is currently active (including system→dark) */
+        this.isDark = computed(() => {
+            if (this._mode() === 'dark')
+                return true;
+            if (this._mode() === 'system' && isPlatformBrowser(this.platformId)) {
+                return window.matchMedia('(prefers-color-scheme: dark)').matches;
+            }
+            return false;
+        });
+        /** All available presets for rendering a picker */
+        this.presets = Object.values(COLOR_PRESETS);
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        // Restore mode
+        const savedMode = localStorage.getItem(STORAGE_KEY_MODE);
+        const initialMode = (savedMode === 'light' || savedMode === 'dark' || savedMode === 'system')
+            ? savedMode : 'light';
+        this._mode.set(initialMode);
+        this.applyMode(initialMode);
+        // Restore preset
+        const savedPreset = localStorage.getItem(STORAGE_KEY_PRESET);
+        if (savedPreset && COLOR_PRESETS[savedPreset]) {
+            this._preset.set(savedPreset);
+            this.applyPalette(COLOR_PRESETS[savedPreset].palette);
+        }
+        // Persist mode changes to localStorage
+        effect(() => {
+            localStorage.setItem(STORAGE_KEY_MODE, this._mode());
+        });
+        // Persist preset changes to localStorage
+        effect(() => {
+            const p = this._preset();
+            if (p)
+                localStorage.setItem(STORAGE_KEY_PRESET, p);
+            else
+                localStorage.removeItem(STORAGE_KEY_PRESET);
+        });
+    }
+    // ── Public API ─────────────────────────────────────────────────────────────
+    /**
+     * Set the primary color using a preset name or a full custom palette.
+     * Immediately applies CSS custom properties to :root and persists to localStorage.
+     */
+    setPrimary(color) {
+        if (typeof color === 'string') {
+            if (!COLOR_PRESETS[color])
+                return;
+            this._preset.set(color);
+            this._palette.set(null);
+            this.applyPalette(COLOR_PRESETS[color].palette);
+        }
+        else {
+            this._preset.set(null);
+            this._palette.set(color);
+            this.applyPalette(color);
+        }
+    }
+    /**
+     * Switch between light, dark, and system modes.
+     * Persisted to localStorage automatically.
+     */
+    setMode(mode) {
+        this._mode.set(mode);
+        this.applyMode(mode);
+    }
+    /** Toggle between light ↔ dark (ignores system). */
+    toggleMode() {
+        this.setMode(this._mode() === 'dark' ? 'light' : 'dark');
+    }
+    /**
+     * Apply a full ThemeConfig at once (used by provideSharedUiTheme).
+     * Does NOT override values already restored from localStorage unless
+     * the config explicitly provides them.
+     */
+    applyConfig(config) {
+        // Only apply if nothing was already restored from localStorage
+        if (config.primaryColor !== undefined && this._preset() === null && this._palette() === null) {
+            this.setPrimary(config.primaryColor);
+        }
+        if (config.mode !== undefined) {
+            const saved = isPlatformBrowser(this.platformId)
+                ? localStorage.getItem(STORAGE_KEY_MODE)
+                : null;
+            // Don't override a user's saved preference with the default config
+            if (!saved)
+                this.setMode(config.mode);
+        }
+    }
+    // ── Internal helpers ──────────────────────────────────────────────────────
+    applyPalette(palette) {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        const root = document.documentElement;
+        Object.entries(palette).forEach(([shade, value]) => {
+            root.style.setProperty(`--color-primary-${shade}`, value);
+        });
+    }
+    applyMode(mode) {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        const applyDark = (dark) => document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light');
+        // Remove any previous media-query listener
+        if (this._mqListener) {
+            window.matchMedia('(prefers-color-scheme: dark)')
+                .removeEventListener('change', this._mqListener);
+            this._mqListener = undefined;
+        }
+        if (mode === 'system') {
+            const mq = window.matchMedia('(prefers-color-scheme: dark)');
+            applyDark(mq.matches);
+            this._mqListener = (e) => { if (this._mode() === 'system')
+                applyDark(e.matches); };
+            mq.addEventListener('change', this._mqListener);
+        }
+        else {
+            applyDark(mode === 'dark');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ThemeService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ThemeService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+// ── provideSharedUiTheme ──────────────────────────────────────────────────────
+// Call in app.config.ts to configure the design system theme at bootstrap time.
+//
+// Usage:
+//   export const appConfig: ApplicationConfig = {
+//     providers: [
+//       provideSharedUiTheme({ primaryColor: 'indigo', mode: 'light' }),
+//     ],
+//   };
+function provideSharedUiTheme(config = {}) {
+    return makeEnvironmentProviders([
+        {
+            provide: APP_INITIALIZER,
+            useFactory: (theme) => () => theme.applyConfig(config),
+            deps: [ThemeService],
+            multi: true,
+        },
+    ]);
+}
+
+// ── ThemePickerComponent ──────────────────────────────────────────────────────
+// Grid of color swatches — clicking one applies the preset immediately.
+// Emits (change) for the host to react if needed.
+//
+// Usage:
+//   <ui-theme-picker />
+//   <ui-theme-picker (change)="onColorChange($event)" />
+class ThemePickerComponent {
+    constructor() {
+        this.theme = inject(ThemeService);
+        this.change = output();
+    }
+    select(preset) {
+        this.theme.setPrimary(preset.name);
+        this.change.emit(preset.name);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ThemePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ThemePickerComponent, isStandalone: true, selector: "ui-theme-picker", outputs: { change: "change" }, ngImport: i0, template: `
+    <div class="tp" role="radiogroup" aria-label="Primary color">
+      @for (preset of theme.presets; track preset.name) {
+        <button
+          class="tp__swatch"
+          type="button"
+          role="radio"
+          [attr.aria-label]="preset.label"
+          [attr.aria-checked]="theme.activePreset() === preset.name"
+          [class.tp__swatch--active]="theme.activePreset() === preset.name"
+          [style.background]="preset.swatch"
+          [title]="preset.label"
+          (click)="select(preset)"
+        >
+          @if (theme.activePreset() === preset.name) {
+            <svg class="tp__check" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+              <path d="M2 6l3 3 5-5" stroke="#fff" stroke-width="1.8"
+                stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          }
+        </button>
+      }
+    </div>
+  `, isInline: true, styles: [".tp{display:grid;grid-template-columns:repeat(6,28px);gap:8px;padding:4px}.tp__swatch{width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s,border-color .15s;padding:0;&:hover{transform:scale(1.15)}}.tp__swatch--active{border-color:var(--color-border);box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px currentColor}.tp__check{width:12px;height:12px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ThemePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-theme-picker', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="tp" role="radiogroup" aria-label="Primary color">
+      @for (preset of theme.presets; track preset.name) {
+        <button
+          class="tp__swatch"
+          type="button"
+          role="radio"
+          [attr.aria-label]="preset.label"
+          [attr.aria-checked]="theme.activePreset() === preset.name"
+          [class.tp__swatch--active]="theme.activePreset() === preset.name"
+          [style.background]="preset.swatch"
+          [title]="preset.label"
+          (click)="select(preset)"
+        >
+          @if (theme.activePreset() === preset.name) {
+            <svg class="tp__check" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+              <path d="M2 6l3 3 5-5" stroke="#fff" stroke-width="1.8"
+                stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          }
+        </button>
+      }
+    </div>
+  `, styles: [".tp{display:grid;grid-template-columns:repeat(6,28px);gap:8px;padding:4px}.tp__swatch{width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s,border-color .15s;padding:0;&:hover{transform:scale(1.15)}}.tp__swatch--active{border-color:var(--color-border);box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px currentColor}.tp__check{width:12px;height:12px}\n"] }]
+        }] });
+
+class ThemeToggleComponent {
+    constructor() {
+        this.theme = inject(ThemeService);
+        this.options = [
+            {
+                value: 'light',
+                label: 'Clair',
+                icon: `<circle cx="12" cy="12" r="4"/>
+              <path d="M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32 1.41 1.41M2 12h2m16 0h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/>`,
+            },
+            {
+                value: 'system',
+                label: 'Auto',
+                icon: `<rect x="2" y="3" width="20" height="14" rx="2"/>
+              <path d="M8 21h8m-4-4v4"/>`,
+            },
+            {
+                value: 'dark',
+                label: 'Sombre',
+                icon: `<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>`,
+            },
+        ];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ThemeToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ThemeToggleComponent, isStandalone: true, selector: "ui-theme-toggle", ngImport: i0, template: `
+    <div class="toggle" role="group" aria-label="Mode d'affichage">
+      @for (opt of options; track opt.value) {
+        <button
+          class="toggle__btn"
+          [class.toggle__btn--active]="theme.activeMode() === opt.value"
+          type="button"
+          [attr.aria-label]="opt.label"
+          [attr.title]="opt.label"
+          [attr.aria-pressed]="theme.activeMode() === opt.value"
+          (click)="theme.setMode(opt.value)"
+        >
+          <svg
+            width="15" height="15"
+            viewBox="0 0 24 24" fill="none"
+            stroke="currentColor" stroke-width="2"
+            stroke-linecap="round" stroke-linejoin="round"
+            aria-hidden="true"
+            [innerHTML]="opt.icon"
+          ></svg>
+          <span class="toggle__label">{{ opt.label }}</span>
+        </button>
+      }
+    </div>
+  `, isInline: true, styles: [".toggle{display:inline-flex;align-items:center;background:var(--color-bg-subtle);border:1px solid var(--color-border);border-radius:var(--radius-lg, 10px);padding:3px;gap:2px}.toggle__btn{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:var(--radius-md, 8px);background:transparent;border:none;color:var(--color-text-muted);font-family:var(--font-sans);font-size:var(--text-xs, 11px);font-weight:var(--font-medium, 500);cursor:pointer;transition:background .15s,color .15s,box-shadow .15s;white-space:nowrap}.toggle__label{line-height:1}.toggle__btn:hover:not(.toggle__btn--active){background:var(--color-bg);color:var(--color-text)}.toggle__btn--active{background:var(--color-bg);color:var(--color-text);box-shadow:0 1px 3px #0000001a,0 0 0 1px var(--color-border)}:host-context([data-theme=\"dark\"]) .toggle__btn:hover:not(.toggle__btn--active){background:var(--color-neutral-700);color:var(--color-text)}:host-context([data-theme=\"dark\"]) .toggle__btn--active{background:var(--color-neutral-600);color:var(--color-text);box-shadow:0 1px 3px #00000059,0 0 0 1px var(--color-neutral-600)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ThemeToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-theme-toggle', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="toggle" role="group" aria-label="Mode d'affichage">
+      @for (opt of options; track opt.value) {
+        <button
+          class="toggle__btn"
+          [class.toggle__btn--active]="theme.activeMode() === opt.value"
+          type="button"
+          [attr.aria-label]="opt.label"
+          [attr.title]="opt.label"
+          [attr.aria-pressed]="theme.activeMode() === opt.value"
+          (click)="theme.setMode(opt.value)"
+        >
+          <svg
+            width="15" height="15"
+            viewBox="0 0 24 24" fill="none"
+            stroke="currentColor" stroke-width="2"
+            stroke-linecap="round" stroke-linejoin="round"
+            aria-hidden="true"
+            [innerHTML]="opt.icon"
+          ></svg>
+          <span class="toggle__label">{{ opt.label }}</span>
+        </button>
+      }
+    </div>
+  `, styles: [".toggle{display:inline-flex;align-items:center;background:var(--color-bg-subtle);border:1px solid var(--color-border);border-radius:var(--radius-lg, 10px);padding:3px;gap:2px}.toggle__btn{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:var(--radius-md, 8px);background:transparent;border:none;color:var(--color-text-muted);font-family:var(--font-sans);font-size:var(--text-xs, 11px);font-weight:var(--font-medium, 500);cursor:pointer;transition:background .15s,color .15s,box-shadow .15s;white-space:nowrap}.toggle__label{line-height:1}.toggle__btn:hover:not(.toggle__btn--active){background:var(--color-bg);color:var(--color-text)}.toggle__btn--active{background:var(--color-bg);color:var(--color-text);box-shadow:0 1px 3px #0000001a,0 0 0 1px var(--color-border)}:host-context([data-theme=\"dark\"]) .toggle__btn:hover:not(.toggle__btn--active){background:var(--color-neutral-700);color:var(--color-text)}:host-context([data-theme=\"dark\"]) .toggle__btn--active{background:var(--color-neutral-600);color:var(--color-text);box-shadow:0 1px 3px #00000059,0 0 0 1px var(--color-neutral-600)}\n"] }]
+        }] });
+
+// ── Tokens public API ─────────────────────────────────────────────────────────
+// Re-exports all TypeScript theme utilities.
+// SCSS tokens are imported separately via @use in your global styles.scss
+
+/**
+ * Avatar Atom
+ * Source: Nuxt UI v3 — ❖ Avatar
+ * Shows: image → initials → icon fallback
+ * Sizes: xs(20) sm(24) md(32) lg(40) xl(48) 2xl(64) 3xl(80)
+ */
+class AvatarComponent {
+    constructor() {
+        this.src = input(null);
+        this.alt = input(null);
+        this.size = input('md');
+        this.initials = input(null);
+        this.chip = input(false);
+        this.chipColor = input('success');
+        this.chipAlt = input(null);
+        this.rounded = input(true);
+        this.imgError = signal(false);
+        this.classes = computed(() => {
+            const cls = ['ui-avatar', `ui-avatar--${this.size()}`];
+            if (!this.rounded())
+                cls.push('ui-avatar--square');
+            return cls.join(' ');
+        });
+    }
+    onImgError() { this.imgError.set(true); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: AvatarComponent, isStandalone: true, selector: "ui-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, chip: { classPropertyName: "chip", publicName: "chip", isSignal: true, isRequired: false, transformFunction: null }, chipColor: { classPropertyName: "chipColor", publicName: "chipColor", isSignal: true, isRequired: false, transformFunction: null }, chipAlt: { classPropertyName: "chipAlt", publicName: "chipAlt", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <span [class]="classes()" [attr.aria-label]="alt() ?? null">
+      @if (src() && !imgError()) {
+        <img
+          [src]="src()"
+          [alt]="alt() ?? ''"
+          (error)="onImgError()"
+          class="ui-avatar__img"
+        />
+      } @else if (initials()) {
+        <span class="ui-avatar__initials" aria-hidden="true">{{ initials() }}</span>
+      } @else {
+        <span class="ui-avatar__icon" aria-hidden="true">
+          <ng-content />
+        </span>
+      }
+
+      @if (chip()) {
+        <span
+          class="ui-avatar__chip"
+          [class]="'ui-avatar__chip--' + chipColor()"
+          [attr.aria-label]="chipAlt()"
+        ></span>
+      }
+    </span>
+  `, isInline: true, styles: [".ui-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full);background:var(--color-neutral-100);color:var(--color-neutral-500);overflow:hidden;flex-shrink:0;font-family:var(--font-sans);font-weight:var(--font-medium)}.ui-avatar--square{border-radius:var(--radius-md)}.ui-avatar--xs{width:20px;height:20px;font-size:10px}.ui-avatar--sm{width:24px;height:24px;font-size:11px}.ui-avatar--md{width:32px;height:32px;font-size:13px}.ui-avatar--lg{width:40px;height:40px;font-size:15px}.ui-avatar--xl{width:48px;height:48px;font-size:18px}.ui-avatar--2xl{width:64px;height:64px;font-size:22px}.ui-avatar--3xl{width:80px;height:80px;font-size:28px}.ui-avatar__img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.ui-avatar__initials{line-height:1;letter-spacing:var(--tracking-wide);text-transform:uppercase;-webkit-user-select:none;user-select:none}.ui-avatar__icon{display:flex;align-items:center;justify-content:center;width:60%;height:60%}.ui-avatar__chip{position:absolute;bottom:0;right:0;width:30%;height:30%;min-width:8px;min-height:8px;border-radius:50%;border:2px solid var(--color-bg)}.ui-avatar__chip--online{background:var(--color-success-500)}.ui-avatar__chip--idle{background:var(--color-warning-500)}.ui-avatar__chip--busy{background:var(--color-error-500)}.ui-avatar__chip--offline{background:var(--color-neutral-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-avatar', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <span [class]="classes()" [attr.aria-label]="alt() ?? null">
+      @if (src() && !imgError()) {
+        <img
+          [src]="src()"
+          [alt]="alt() ?? ''"
+          (error)="onImgError()"
+          class="ui-avatar__img"
+        />
+      } @else if (initials()) {
+        <span class="ui-avatar__initials" aria-hidden="true">{{ initials() }}</span>
+      } @else {
+        <span class="ui-avatar__icon" aria-hidden="true">
+          <ng-content />
+        </span>
+      }
+
+      @if (chip()) {
+        <span
+          class="ui-avatar__chip"
+          [class]="'ui-avatar__chip--' + chipColor()"
+          [attr.aria-label]="chipAlt()"
+        ></span>
+      }
+    </span>
+  `, styles: [".ui-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full);background:var(--color-neutral-100);color:var(--color-neutral-500);overflow:hidden;flex-shrink:0;font-family:var(--font-sans);font-weight:var(--font-medium)}.ui-avatar--square{border-radius:var(--radius-md)}.ui-avatar--xs{width:20px;height:20px;font-size:10px}.ui-avatar--sm{width:24px;height:24px;font-size:11px}.ui-avatar--md{width:32px;height:32px;font-size:13px}.ui-avatar--lg{width:40px;height:40px;font-size:15px}.ui-avatar--xl{width:48px;height:48px;font-size:18px}.ui-avatar--2xl{width:64px;height:64px;font-size:22px}.ui-avatar--3xl{width:80px;height:80px;font-size:28px}.ui-avatar__img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.ui-avatar__initials{line-height:1;letter-spacing:var(--tracking-wide);text-transform:uppercase;-webkit-user-select:none;user-select:none}.ui-avatar__icon{display:flex;align-items:center;justify-content:center;width:60%;height:60%}.ui-avatar__chip{position:absolute;bottom:0;right:0;width:30%;height:30%;min-width:8px;min-height:8px;border-radius:50%;border:2px solid var(--color-bg)}.ui-avatar__chip--online{background:var(--color-success-500)}.ui-avatar__chip--idle{background:var(--color-warning-500)}.ui-avatar__chip--busy{background:var(--color-error-500)}.ui-avatar__chip--offline{background:var(--color-neutral-400)}\n"] }]
+        }] });
+
+/**
+ * Badge Atom
+ * Source: Nuxt UI v3 — ❖ Badge
+ * Colors: Neutral | Primary | Secondary | Success | Info | Warning | Error
+ * Variants: Outline | Soft | Solid | Subtle
+ * Sizes: xs | sm | md | lg | xl
+ * RoundedFull: True | False
+ */
+class BadgeComponent {
+    constructor() {
+        this.variant = input('soft');
+        this.color = input('neutral');
+        this.size = input('md');
+        this.rounded = input(false);
+        this.dot = input(false);
+        this.classes = computed(() => {
+            const cls = ['ui-badge', `ui-badge--${this.variant()}`, `ui-badge--${this.color()}`, `ui-badge--${this.size()}`];
+            if (this.rounded())
+                cls.push('ui-badge--rounded');
+            return cls.join(' ');
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: BadgeComponent, isStandalone: true, selector: "ui-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <span [class]="classes()">
+      @if (dot()) {
+        <span class="ui-badge__dot" aria-hidden="true"></span>
+      }
+      <ng-content />
+    </span>
+  `, isInline: true, styles: [".ui-badge{display:inline-flex;align-items:center;gap:.25rem;font-family:var(--font-sans);font-weight:var(--font-medium);white-space:nowrap;border:1px solid transparent;border-radius:var(--radius-md)}.ui-badge--rounded{border-radius:var(--radius-full)}.ui-badge__dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}.ui-badge--xs{padding:0 6px;font-size:var(--text-xs);height:18px}.ui-badge--sm{padding:0 8px;font-size:var(--text-xs);height:20px}.ui-badge--md{padding:0 10px;font-size:var(--text-sm);height:22px}.ui-badge--lg{padding:0 10px;font-size:var(--text-sm);height:24px}.ui-badge--xl{padding:0 12px;font-size:var(--text-md);height:28px}.ui-badge--primary.ui-badge--solid{background:var(--color-primary-500);color:#fff}.ui-badge--primary.ui-badge--outline{color:var(--color-primary-500);border-color:var(--color-primary-500);background:transparent}.ui-badge--primary.ui-badge--soft{background:color-mix(in srgb,var(--color-primary-500) 15%,transparent);color:var(--color-primary-700)}.ui-badge--primary.ui-badge--subtle{background:color-mix(in srgb,var(--color-primary-500) 10%,transparent);color:var(--color-primary-600)}.ui-badge--neutral.ui-badge--solid{background:var(--color-neutral-800);color:#fff}.ui-badge--neutral.ui-badge--outline{color:var(--color-neutral-600);border-color:var(--color-neutral-300);background:transparent}.ui-badge--neutral.ui-badge--soft{background:var(--color-neutral-100);color:var(--color-neutral-700)}.ui-badge--neutral.ui-badge--subtle{background:var(--color-neutral-50);color:var(--color-neutral-600)}.ui-badge--success.ui-badge--solid{background:var(--color-success-500);color:#fff}.ui-badge--success.ui-badge--outline{color:var(--color-success-600);border-color:var(--color-success-500);background:transparent}.ui-badge--success.ui-badge--soft{background:color-mix(in srgb,var(--color-success-500) 15%,transparent);color:var(--color-success-700)}.ui-badge--success.ui-badge--subtle{background:color-mix(in srgb,var(--color-success-500) 10%,transparent);color:var(--color-success-600)}.ui-badge--warning.ui-badge--solid{background:var(--color-warning-500);color:#fff}.ui-badge--warning.ui-badge--outline{color:var(--color-warning-600);border-color:var(--color-warning-500);background:transparent}.ui-badge--warning.ui-badge--soft{background:color-mix(in srgb,var(--color-warning-500) 15%,transparent);color:var(--color-warning-700)}.ui-badge--warning.ui-badge--subtle{background:color-mix(in srgb,var(--color-warning-500) 10%,transparent);color:var(--color-warning-600)}.ui-badge--error.ui-badge--solid{background:var(--color-error-500);color:#fff}.ui-badge--error.ui-badge--outline{color:var(--color-error-600);border-color:var(--color-error-500);background:transparent}.ui-badge--error.ui-badge--soft{background:color-mix(in srgb,var(--color-error-500) 15%,transparent);color:var(--color-error-700)}.ui-badge--error.ui-badge--subtle{background:color-mix(in srgb,var(--color-error-500) 10%,transparent);color:var(--color-error-600)}.ui-badge--info.ui-badge--solid{background:var(--color-info-500);color:#fff}.ui-badge--info.ui-badge--outline{color:var(--color-info-600);border-color:var(--color-info-500);background:transparent}.ui-badge--info.ui-badge--soft{background:color-mix(in srgb,var(--color-info-500) 15%,transparent);color:var(--color-info-700)}.ui-badge--info.ui-badge--subtle{background:color-mix(in srgb,var(--color-info-500) 10%,transparent);color:var(--color-info-600)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: BadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-badge', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <span [class]="classes()">
+      @if (dot()) {
+        <span class="ui-badge__dot" aria-hidden="true"></span>
+      }
+      <ng-content />
+    </span>
+  `, styles: [".ui-badge{display:inline-flex;align-items:center;gap:.25rem;font-family:var(--font-sans);font-weight:var(--font-medium);white-space:nowrap;border:1px solid transparent;border-radius:var(--radius-md)}.ui-badge--rounded{border-radius:var(--radius-full)}.ui-badge__dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}.ui-badge--xs{padding:0 6px;font-size:var(--text-xs);height:18px}.ui-badge--sm{padding:0 8px;font-size:var(--text-xs);height:20px}.ui-badge--md{padding:0 10px;font-size:var(--text-sm);height:22px}.ui-badge--lg{padding:0 10px;font-size:var(--text-sm);height:24px}.ui-badge--xl{padding:0 12px;font-size:var(--text-md);height:28px}.ui-badge--primary.ui-badge--solid{background:var(--color-primary-500);color:#fff}.ui-badge--primary.ui-badge--outline{color:var(--color-primary-500);border-color:var(--color-primary-500);background:transparent}.ui-badge--primary.ui-badge--soft{background:color-mix(in srgb,var(--color-primary-500) 15%,transparent);color:var(--color-primary-700)}.ui-badge--primary.ui-badge--subtle{background:color-mix(in srgb,var(--color-primary-500) 10%,transparent);color:var(--color-primary-600)}.ui-badge--neutral.ui-badge--solid{background:var(--color-neutral-800);color:#fff}.ui-badge--neutral.ui-badge--outline{color:var(--color-neutral-600);border-color:var(--color-neutral-300);background:transparent}.ui-badge--neutral.ui-badge--soft{background:var(--color-neutral-100);color:var(--color-neutral-700)}.ui-badge--neutral.ui-badge--subtle{background:var(--color-neutral-50);color:var(--color-neutral-600)}.ui-badge--success.ui-badge--solid{background:var(--color-success-500);color:#fff}.ui-badge--success.ui-badge--outline{color:var(--color-success-600);border-color:var(--color-success-500);background:transparent}.ui-badge--success.ui-badge--soft{background:color-mix(in srgb,var(--color-success-500) 15%,transparent);color:var(--color-success-700)}.ui-badge--success.ui-badge--subtle{background:color-mix(in srgb,var(--color-success-500) 10%,transparent);color:var(--color-success-600)}.ui-badge--warning.ui-badge--solid{background:var(--color-warning-500);color:#fff}.ui-badge--warning.ui-badge--outline{color:var(--color-warning-600);border-color:var(--color-warning-500);background:transparent}.ui-badge--warning.ui-badge--soft{background:color-mix(in srgb,var(--color-warning-500) 15%,transparent);color:var(--color-warning-700)}.ui-badge--warning.ui-badge--subtle{background:color-mix(in srgb,var(--color-warning-500) 10%,transparent);color:var(--color-warning-600)}.ui-badge--error.ui-badge--solid{background:var(--color-error-500);color:#fff}.ui-badge--error.ui-badge--outline{color:var(--color-error-600);border-color:var(--color-error-500);background:transparent}.ui-badge--error.ui-badge--soft{background:color-mix(in srgb,var(--color-error-500) 15%,transparent);color:var(--color-error-700)}.ui-badge--error.ui-badge--subtle{background:color-mix(in srgb,var(--color-error-500) 10%,transparent);color:var(--color-error-600)}.ui-badge--info.ui-badge--solid{background:var(--color-info-500);color:#fff}.ui-badge--info.ui-badge--outline{color:var(--color-info-600);border-color:var(--color-info-500);background:transparent}.ui-badge--info.ui-badge--soft{background:color-mix(in srgb,var(--color-info-500) 15%,transparent);color:var(--color-info-700)}.ui-badge--info.ui-badge--subtle{background:color-mix(in srgb,var(--color-info-500) 10%,transparent);color:var(--color-info-600)}\n"] }]
+        }] });
+
+/**
+ * Button Atom
+ * Source: Nuxt UI v3 Design Kit — ❖ Button
+ *
+ * Variants: solid | outline | soft | subtle | ghost | link
+ * Sizes:    xs (h:24px) | sm (h:28px) | md (h:32px) | lg (h:36px) | xl (h:40px)
+ * States:   default | hover | focus | disabled | loading
+ *
+ * @example
+ * <ui-button variant="solid" color="primary" size="md">Click me</ui-button>
+ * <ui-button variant="outline" [loading]="true">Loading</ui-button>
+ * <ui-button [square]="true" leadingIcon="plus" />
+ */
+class ButtonComponent {
+    constructor() {
+        /** Visual variant — from Figma: Solid | Outline | Soft | Subtle | Ghost | Link */
+        this.variant = input('solid');
+        /** Color theme */
+        this.color = input('primary');
+        /** Size — from Figma: xs(h:24) sm(h:28) md(h:32) lg(h:36) xl(h:40) */
+        this.size = input('md');
+        /** Disabled state */
+        this.disabled = input(false);
+        /** Loading state — shows spinner */
+        this.loading = input(false);
+        /** Position of the spinner */
+        this.loadingPosition = input('leading');
+        /** Square/icon-only mode */
+        this.square = input(false);
+        /** Full width */
+        this.block = input(false);
+        /** Leading icon name (for aria/slot reference) */
+        this.leadingIcon = input(null);
+        /** Trailing icon name */
+        this.trailingIcon = input(null);
+        /** HTML button type */
+        this.type = input('button');
+        /** Accessible label for icon-only buttons */
+        this.ariaLabel = input(null);
+        this.hostClasses = computed(() => {
+            const classes = [
+                'ui-btn',
+                `ui-btn--${this.variant()}`,
+                `ui-btn--${this.color()}`,
+                `ui-btn--${this.size()}`,
+            ];
+            if (this.square())
+                classes.push('ui-btn--square');
+            if (this.block())
+                classes.push('ui-btn--block');
+            if (this.loading())
+                classes.push('ui-btn--loading');
+            if (this.disabled())
+                classes.push('ui-btn--disabled');
+            return classes.join(' ');
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ButtonComponent, isStandalone: true, selector: "ui-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingPosition: { classPropertyName: "loadingPosition", publicName: "loadingPosition", isSignal: true, isRequired: false, transformFunction: null }, square: { classPropertyName: "square", publicName: "square", isSignal: true, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, leadingIcon: { classPropertyName: "leadingIcon", publicName: "leadingIcon", isSignal: true, isRequired: false, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <button
+      [type]="type()"
+      [disabled]="disabled() || loading()"
+      [class]="hostClasses()"
+      [attr.aria-disabled]="disabled() || loading()"
+      [attr.aria-label]="ariaLabel() ?? null"
+      [attr.aria-busy]="loading()"
+    >
+      <!-- Leading icon -->
+      @if (loading() && loadingPosition() === 'leading') {
+        <span class="ui-btn__spinner" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="10" stroke-opacity="0.25"/>
+            <path d="M12 2a10 10 0 0 1 10 10" stroke-linecap="round"/>
+          </svg>
+        </span>
+      } @else if (leadingIcon() && !square()) {
+        <span class="ui-btn__icon ui-btn__icon--leading" aria-hidden="true">
+          <ng-content select="[slot=leading-icon]" />
+        </span>
+      }
+
+      <!-- Label -->
+      @if (!square()) {
+        <span class="ui-btn__label">
+          <ng-content />
+        </span>
+      }
+
+      <!-- Trailing icon or square icon -->
+      @if (loading() && loadingPosition() === 'trailing') {
+        <span class="ui-btn__spinner" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="10" stroke-opacity="0.25"/>
+            <path d="M12 2a10 10 0 0 1 10 10" stroke-linecap="round"/>
+          </svg>
+        </span>
+      } @else if (trailingIcon() && !square()) {
+        <span class="ui-btn__icon ui-btn__icon--trailing" aria-hidden="true">
+          <ng-content select="[slot=trailing-icon]" />
+        </span>
+      }
+
+      <!-- Square/icon-only mode -->
+      @if (square()) {
+        <span class="ui-btn__icon" aria-hidden="true">
+          <ng-content select="[slot=icon]" />
+        </span>
+      }
+    </button>
+  `, isInline: true, styles: [".ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;white-space:nowrap;cursor:pointer;border:1px solid transparent;border-radius:var(--radius-md);font-family:var(--font-sans);font-weight:var(--font-medium);text-decoration:none;outline:none;transition:var(--transition-colors);-webkit-user-select:none;user-select:none;position:relative;overflow:hidden}.ui-btn:focus-visible{box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-ring)}.ui-btn--xs{height:var(--size-xs);padding:4px 8px;font-size:var(--text-xs)}.ui-btn--xs .ui-btn__icon{width:var(--icon-xs);height:var(--icon-xs)}.ui-btn--xs.ui-btn--square{width:var(--size-xs);padding:0}.ui-btn--sm{height:var(--size-sm);padding:6px 10px;font-size:var(--text-xs)}.ui-btn--sm .ui-btn__icon{width:var(--icon-sm);height:var(--icon-sm)}.ui-btn--sm.ui-btn--square{width:var(--size-sm);padding:0}.ui-btn--md{height:var(--size-md);padding:6px 10px;font-size:var(--text-sm)}.ui-btn--md .ui-btn__icon{width:var(--icon-md);height:var(--icon-md)}.ui-btn--md.ui-btn--square{width:var(--size-md);padding:0}.ui-btn--lg{height:var(--size-lg);padding:8px 12px;font-size:var(--text-sm)}.ui-btn--lg .ui-btn__icon{width:var(--icon-md);height:var(--icon-md)}.ui-btn--lg.ui-btn--square{width:var(--size-lg);padding:0}.ui-btn--xl{height:var(--size-xl);padding:8px 12px;font-size:var(--text-md)}.ui-btn--xl .ui-btn__icon{width:var(--icon-lg);height:var(--icon-lg)}.ui-btn--xl.ui-btn--square{width:var(--size-xl);padding:0}.ui-btn--block{width:100%}.ui-btn__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.ui-btn__spinner{display:flex;align-items:center;width:1em;height:1em;flex-shrink:0}.ui-btn__spinner svg{width:100%;height:100%;animation:ui-spin .75s linear infinite}.ui-btn[disabled],.ui-btn--disabled{cursor:not-allowed;opacity:.5}.ui-btn--loading{cursor:wait}.ui-btn--primary.ui-btn--solid{background:var(--color-primary-500);color:var(--color-neutral-0)}.ui-btn--primary.ui-btn--solid:hover:not([disabled]){background:var(--color-primary-600)}.ui-btn--primary.ui-btn--solid:active:not([disabled]){background:var(--color-primary-700)}.ui-btn--primary.ui-btn--outline{background:transparent;color:var(--color-primary-500);border-color:var(--color-primary-500)}.ui-btn--primary.ui-btn--outline:hover:not([disabled]){background:color-mix(in srgb,var(--color-primary-500) 10%,transparent)}.ui-btn--primary.ui-btn--soft{background:color-mix(in srgb,var(--color-primary-500) 15%,transparent);color:var(--color-primary-700)}.ui-btn--primary.ui-btn--soft:hover:not([disabled]){background:color-mix(in srgb,var(--color-primary-500) 20%,transparent)}.ui-btn--primary.ui-btn--subtle{background:transparent;color:var(--color-primary-500)}.ui-btn--primary.ui-btn--subtle:hover:not([disabled]){background:color-mix(in srgb,var(--color-primary-500) 10%,transparent)}.ui-btn--primary.ui-btn--ghost{background:transparent;color:var(--color-primary-500)}.ui-btn--primary.ui-btn--ghost:hover:not([disabled]){background:color-mix(in srgb,var(--color-primary-500) 8%,transparent)}.ui-btn--primary.ui-btn--link{background:transparent;color:var(--color-primary-500);text-decoration:underline;padding-left:0;padding-right:0;height:auto}.ui-btn--primary.ui-btn--link:hover:not([disabled]){color:var(--color-primary-600)}.ui-btn--neutral.ui-btn--solid{background:var(--color-neutral-900);color:var(--color-neutral-0)}.ui-btn--neutral.ui-btn--solid:hover:not([disabled]){background:var(--color-neutral-800)}.ui-btn--neutral.ui-btn--outline{background:transparent;color:var(--color-neutral-700);border-color:var(--color-neutral-300)}.ui-btn--neutral.ui-btn--outline:hover:not([disabled]){background:var(--color-neutral-50)}.ui-btn--neutral.ui-btn--soft{background:var(--color-neutral-100);color:var(--color-neutral-700)}.ui-btn--neutral.ui-btn--soft:hover:not([disabled]){background:var(--color-neutral-200)}.ui-btn--neutral.ui-btn--subtle{background:transparent;color:var(--color-neutral-600)}.ui-btn--neutral.ui-btn--subtle:hover:not([disabled]){background:var(--color-neutral-100)}.ui-btn--neutral.ui-btn--ghost{background:transparent;color:var(--color-neutral-600)}.ui-btn--neutral.ui-btn--ghost:hover:not([disabled]){background:var(--color-neutral-100)}.ui-btn--neutral.ui-btn--link{background:transparent;color:var(--color-neutral-600);text-decoration:underline;padding-left:0;padding-right:0;height:auto}.ui-btn--success.ui-btn--solid{background:var(--color-success-500);color:var(--color-neutral-0)}.ui-btn--success.ui-btn--solid:hover:not([disabled]){background:var(--color-success-600)}.ui-btn--success.ui-btn--outline{background:transparent;color:var(--color-success-600);border-color:var(--color-success-500)}.ui-btn--success.ui-btn--soft{background:color-mix(in srgb,var(--color-success-500) 15%,transparent);color:var(--color-success-700)}.ui-btn--success.ui-btn--subtle,.ui-btn--success.ui-btn--ghost{background:transparent;color:var(--color-success-600)}.ui-btn--warning.ui-btn--solid{background:var(--color-warning-500);color:var(--color-neutral-0)}.ui-btn--warning.ui-btn--solid:hover:not([disabled]){background:var(--color-warning-600)}.ui-btn--warning.ui-btn--outline{background:transparent;color:var(--color-warning-600);border-color:var(--color-warning-500)}.ui-btn--warning.ui-btn--soft{background:color-mix(in srgb,var(--color-warning-500) 15%,transparent);color:var(--color-warning-700)}.ui-btn--warning.ui-btn--subtle,.ui-btn--warning.ui-btn--ghost{background:transparent;color:var(--color-warning-600)}.ui-btn--error.ui-btn--solid{background:var(--color-error-500);color:var(--color-neutral-0)}.ui-btn--error.ui-btn--solid:hover:not([disabled]){background:var(--color-error-600)}.ui-btn--error.ui-btn--outline{background:transparent;color:var(--color-error-600);border-color:var(--color-error-500)}.ui-btn--error.ui-btn--soft{background:color-mix(in srgb,var(--color-error-500) 15%,transparent);color:var(--color-error-700)}.ui-btn--error.ui-btn--subtle,.ui-btn--error.ui-btn--ghost{background:transparent;color:var(--color-error-600)}.ui-btn--info.ui-btn--solid{background:var(--color-info-500);color:var(--color-neutral-0)}.ui-btn--info.ui-btn--solid:hover:not([disabled]){background:var(--color-info-600)}.ui-btn--info.ui-btn--outline{background:transparent;color:var(--color-info-600);border-color:var(--color-info-500)}.ui-btn--info.ui-btn--soft{background:color-mix(in srgb,var(--color-info-500) 15%,transparent);color:var(--color-info-700)}.ui-btn--info.ui-btn--subtle,.ui-btn--info.ui-btn--ghost{background:transparent;color:var(--color-info-600)}@keyframes ui-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-button', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <button
+      [type]="type()"
+      [disabled]="disabled() || loading()"
+      [class]="hostClasses()"
+      [attr.aria-disabled]="disabled() || loading()"
+      [attr.aria-label]="ariaLabel() ?? null"
+      [attr.aria-busy]="loading()"
+    >
+      <!-- Leading icon -->
+      @if (loading() && loadingPosition() === 'leading') {
+        <span class="ui-btn__spinner" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="10" stroke-opacity="0.25"/>
+            <path d="M12 2a10 10 0 0 1 10 10" stroke-linecap="round"/>
+          </svg>
+        </span>
+      } @else if (leadingIcon() && !square()) {
+        <span class="ui-btn__icon ui-btn__icon--leading" aria-hidden="true">
+          <ng-content select="[slot=leading-icon]" />
+        </span>
+      }
+
+      <!-- Label -->
+      @if (!square()) {
+        <span class="ui-btn__label">
+          <ng-content />
+        </span>
+      }
+
+      <!-- Trailing icon or square icon -->
+      @if (loading() && loadingPosition() === 'trailing') {
+        <span class="ui-btn__spinner" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="10" stroke-opacity="0.25"/>
+            <path d="M12 2a10 10 0 0 1 10 10" stroke-linecap="round"/>
+          </svg>
+        </span>
+      } @else if (trailingIcon() && !square()) {
+        <span class="ui-btn__icon ui-btn__icon--trailing" aria-hidden="true">
+          <ng-content select="[slot=trailing-icon]" />
+        </span>
+      }
+
+      <!-- Square/icon-only mode -->
+      @if (square()) {
+        <span class="ui-btn__icon" aria-hidden="true">
+          <ng-content select="[slot=icon]" />
+        </span>
+      }
+    </button>
+  `, styles: [".ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;white-space:nowrap;cursor:pointer;border:1px solid transparent;border-radius:var(--radius-md);font-family:var(--font-sans);font-weight:var(--font-medium);text-decoration:none;outline:none;transition:var(--transition-colors);-webkit-user-select:none;user-select:none;position:relative;overflow:hidden}.ui-btn:focus-visible{box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-ring)}.ui-btn--xs{height:var(--size-xs);padding:4px 8px;font-size:var(--text-xs)}.ui-btn--xs .ui-btn__icon{width:var(--icon-xs);height:var(--icon-xs)}.ui-btn--xs.ui-btn--square{width:var(--size-xs);padding:0}.ui-btn--sm{height:var(--size-sm);padding:6px 10px;font-size:var(--text-xs)}.ui-btn--sm .ui-btn__icon{width:var(--icon-sm);height:var(--icon-sm)}.ui-btn--sm.ui-btn--square{width:var(--size-sm);padding:0}.ui-btn--md{height:var(--size-md);padding:6px 10px;font-size:var(--text-sm)}.ui-btn--md .ui-btn__icon{width:var(--icon-md);height:var(--icon-md)}.ui-btn--md.ui-btn--square{width:var(--size-md);padding:0}.ui-btn--lg{height:var(--size-lg);padding:8px 12px;font-size:var(--text-sm)}.ui-btn--lg .ui-btn__icon{width:var(--icon-md);height:var(--icon-md)}.ui-btn--lg.ui-btn--square{width:var(--size-lg);padding:0}.ui-btn--xl{height:var(--size-xl);padding:8px 12px;font-size:var(--text-md)}.ui-btn--xl .ui-btn__icon{width:var(--icon-lg);height:var(--icon-lg)}.ui-btn--xl.ui-btn--square{width:var(--size-xl);padding:0}.ui-btn--block{width:100%}.ui-btn__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.ui-btn__spinner{display:flex;align-items:center;width:1em;height:1em;flex-shrink:0}.ui-btn__spinner svg{width:100%;height:100%;animation:ui-spin .75s linear infinite}.ui-btn[disabled],.ui-btn--disabled{cursor:not-allowed;opacity:.5}.ui-btn--loading{cursor:wait}.ui-btn--primary.ui-btn--solid{background:var(--color-primary-500);color:var(--color-neutral-0)}.ui-btn--primary.ui-btn--solid:hover:not([disabled]){background:var(--color-primary-600)}.ui-btn--primary.ui-btn--solid:active:not([disabled]){background:var(--color-primary-700)}.ui-btn--primary.ui-btn--outline{background:transparent;color:var(--color-primary-500);border-color:var(--color-primary-500)}.ui-btn--primary.ui-btn--outline:hover:not([disabled]){background:color-mix(in srgb,var(--color-primary-500) 10%,transparent)}.ui-btn--primary.ui-btn--soft{background:color-mix(in srgb,var(--color-primary-500) 15%,transparent);color:var(--color-primary-700)}.ui-btn--primary.ui-btn--soft:hover:not([disabled]){background:color-mix(in srgb,var(--color-primary-500) 20%,transparent)}.ui-btn--primary.ui-btn--subtle{background:transparent;color:var(--color-primary-500)}.ui-btn--primary.ui-btn--subtle:hover:not([disabled]){background:color-mix(in srgb,var(--color-primary-500) 10%,transparent)}.ui-btn--primary.ui-btn--ghost{background:transparent;color:var(--color-primary-500)}.ui-btn--primary.ui-btn--ghost:hover:not([disabled]){background:color-mix(in srgb,var(--color-primary-500) 8%,transparent)}.ui-btn--primary.ui-btn--link{background:transparent;color:var(--color-primary-500);text-decoration:underline;padding-left:0;padding-right:0;height:auto}.ui-btn--primary.ui-btn--link:hover:not([disabled]){color:var(--color-primary-600)}.ui-btn--neutral.ui-btn--solid{background:var(--color-neutral-900);color:var(--color-neutral-0)}.ui-btn--neutral.ui-btn--solid:hover:not([disabled]){background:var(--color-neutral-800)}.ui-btn--neutral.ui-btn--outline{background:transparent;color:var(--color-neutral-700);border-color:var(--color-neutral-300)}.ui-btn--neutral.ui-btn--outline:hover:not([disabled]){background:var(--color-neutral-50)}.ui-btn--neutral.ui-btn--soft{background:var(--color-neutral-100);color:var(--color-neutral-700)}.ui-btn--neutral.ui-btn--soft:hover:not([disabled]){background:var(--color-neutral-200)}.ui-btn--neutral.ui-btn--subtle{background:transparent;color:var(--color-neutral-600)}.ui-btn--neutral.ui-btn--subtle:hover:not([disabled]){background:var(--color-neutral-100)}.ui-btn--neutral.ui-btn--ghost{background:transparent;color:var(--color-neutral-600)}.ui-btn--neutral.ui-btn--ghost:hover:not([disabled]){background:var(--color-neutral-100)}.ui-btn--neutral.ui-btn--link{background:transparent;color:var(--color-neutral-600);text-decoration:underline;padding-left:0;padding-right:0;height:auto}.ui-btn--success.ui-btn--solid{background:var(--color-success-500);color:var(--color-neutral-0)}.ui-btn--success.ui-btn--solid:hover:not([disabled]){background:var(--color-success-600)}.ui-btn--success.ui-btn--outline{background:transparent;color:var(--color-success-600);border-color:var(--color-success-500)}.ui-btn--success.ui-btn--soft{background:color-mix(in srgb,var(--color-success-500) 15%,transparent);color:var(--color-success-700)}.ui-btn--success.ui-btn--subtle,.ui-btn--success.ui-btn--ghost{background:transparent;color:var(--color-success-600)}.ui-btn--warning.ui-btn--solid{background:var(--color-warning-500);color:var(--color-neutral-0)}.ui-btn--warning.ui-btn--solid:hover:not([disabled]){background:var(--color-warning-600)}.ui-btn--warning.ui-btn--outline{background:transparent;color:var(--color-warning-600);border-color:var(--color-warning-500)}.ui-btn--warning.ui-btn--soft{background:color-mix(in srgb,var(--color-warning-500) 15%,transparent);color:var(--color-warning-700)}.ui-btn--warning.ui-btn--subtle,.ui-btn--warning.ui-btn--ghost{background:transparent;color:var(--color-warning-600)}.ui-btn--error.ui-btn--solid{background:var(--color-error-500);color:var(--color-neutral-0)}.ui-btn--error.ui-btn--solid:hover:not([disabled]){background:var(--color-error-600)}.ui-btn--error.ui-btn--outline{background:transparent;color:var(--color-error-600);border-color:var(--color-error-500)}.ui-btn--error.ui-btn--soft{background:color-mix(in srgb,var(--color-error-500) 15%,transparent);color:var(--color-error-700)}.ui-btn--error.ui-btn--subtle,.ui-btn--error.ui-btn--ghost{background:transparent;color:var(--color-error-600)}.ui-btn--info.ui-btn--solid{background:var(--color-info-500);color:var(--color-neutral-0)}.ui-btn--info.ui-btn--solid:hover:not([disabled]){background:var(--color-info-600)}.ui-btn--info.ui-btn--outline{background:transparent;color:var(--color-info-600);border-color:var(--color-info-500)}.ui-btn--info.ui-btn--soft{background:color-mix(in srgb,var(--color-info-500) 15%,transparent);color:var(--color-info-700)}.ui-btn--info.ui-btn--subtle,.ui-btn--info.ui-btn--ghost{background:transparent;color:var(--color-info-600)}@keyframes ui-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+        }] });
+
+/**
+ * Checkbox Atom — Source: Nuxt UI v3 ❖ Checkbox
+ * CVA-compatible, accessible (ARIA), indeterminate state
+ */
+class CheckboxComponent {
+    constructor() {
+        this.size = input('md');
+        this.color = input('primary');
+        this.label = input(null);
+        this.disabled = input(false);
+        this.indeterminate = input(false);
+        this.required = input(false);
+        this.ariaLabel = input(null);
+        this.checked = model(false);
+        this._onChange = () => { };
+        this._onTouched = () => { };
+    }
+    writeValue(v) { this.checked.set(v); }
+    registerOnChange(fn) { this._onChange = fn; }
+    registerOnTouched(fn) { this._onTouched = fn; }
+    setDisabledState(_) { }
+    onChange(e) {
+        const checked = e.target.checked;
+        this.checked.set(checked);
+        this._onChange(checked);
+        this._onTouched();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: CheckboxComponent, isStandalone: true, selector: "ui-checkbox", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CheckboxComponent), multi: true }], ngImport: i0, template: `
+    <label class="ui-checkbox" [class.ui-checkbox--disabled]="disabled()">
+      <span class="ui-checkbox__control ui-checkbox__control--{{ size() }} ui-checkbox__control--{{ color() }}"
+        [class.ui-checkbox__control--checked]="checked()"
+        [class.ui-checkbox__control--indeterminate]="indeterminate()">
+        <input
+          type="checkbox"
+          class="ui-checkbox__input"
+          [checked]="checked()"
+          [disabled]="disabled()"
+          [indeterminate]="indeterminate()"
+          [attr.aria-label]="ariaLabel() ?? null"
+          (change)="onChange($event)"
+        />
+        @if (indeterminate()) {
+          <span class="ui-checkbox__icon ui-checkbox__icon--indeterminate" aria-hidden="true">—</span>
+        } @else if (checked()) {
+          <span class="ui-checkbox__icon" aria-hidden="true">✓</span>
+        }
+      </span>
+      @if (label()) {
+        <span class="ui-checkbox__label ui-checkbox__label--{{ size() }}">
+          {{ label() }}
+          @if (required()) { <span class="ui-checkbox__required" aria-hidden="true">*</span> }
+        </span>
+      }
+    </label>
+  `, isInline: true, styles: [".ui-checkbox{display:inline-flex;align-items:flex-start;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.ui-checkbox--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ui-checkbox__input{position:absolute;opacity:0;width:0;height:0}.ui-checkbox__control{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1.5px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);transition:var(--transition-colors)}.ui-checkbox__control--xs{width:14px;height:14px}.ui-checkbox__control--sm{width:16px;height:16px}.ui-checkbox__control--md{width:18px;height:18px}.ui-checkbox__control--lg{width:20px;height:20px}.ui-checkbox__control--xl{width:22px;height:22px}.ui-checkbox__control--checked.ui-checkbox__control--primary,.ui-checkbox__control--indeterminate.ui-checkbox__control--primary{background:var(--color-primary-500);border-color:var(--color-primary-500);color:#fff}.ui-checkbox__control--checked.ui-checkbox__control--neutral,.ui-checkbox__control--indeterminate.ui-checkbox__control--neutral{background:var(--color-neutral-800);border-color:var(--color-neutral-800);color:#fff}.ui-checkbox__control--checked.ui-checkbox__control--success,.ui-checkbox__control--indeterminate.ui-checkbox__control--success{background:var(--color-success-500);border-color:var(--color-success-500);color:#fff}.ui-checkbox__control--checked.ui-checkbox__control--error,.ui-checkbox__control--indeterminate.ui-checkbox__control--error{background:var(--color-error-500);border-color:var(--color-error-500);color:#fff}.ui-checkbox__control:focus-within{box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-ring)}.ui-checkbox__icon{font-size:11px;font-weight:700;line-height:1}.ui-checkbox__label{font-family:var(--font-sans);color:var(--color-text)}.ui-checkbox__label--xs,.ui-checkbox__label--sm{font-size:var(--text-xs)}.ui-checkbox__label--md{font-size:var(--text-sm)}.ui-checkbox__label--lg{font-size:var(--text-md)}.ui-checkbox__label--xl{font-size:var(--text-lg)}.ui-checkbox__required{color:var(--color-error-500);margin-left:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-checkbox', standalone: true, imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CheckboxComponent), multi: true }], template: `
+    <label class="ui-checkbox" [class.ui-checkbox--disabled]="disabled()">
+      <span class="ui-checkbox__control ui-checkbox__control--{{ size() }} ui-checkbox__control--{{ color() }}"
+        [class.ui-checkbox__control--checked]="checked()"
+        [class.ui-checkbox__control--indeterminate]="indeterminate()">
+        <input
+          type="checkbox"
+          class="ui-checkbox__input"
+          [checked]="checked()"
+          [disabled]="disabled()"
+          [indeterminate]="indeterminate()"
+          [attr.aria-label]="ariaLabel() ?? null"
+          (change)="onChange($event)"
+        />
+        @if (indeterminate()) {
+          <span class="ui-checkbox__icon ui-checkbox__icon--indeterminate" aria-hidden="true">—</span>
+        } @else if (checked()) {
+          <span class="ui-checkbox__icon" aria-hidden="true">✓</span>
+        }
+      </span>
+      @if (label()) {
+        <span class="ui-checkbox__label ui-checkbox__label--{{ size() }}">
+          {{ label() }}
+          @if (required()) { <span class="ui-checkbox__required" aria-hidden="true">*</span> }
+        </span>
+      }
+    </label>
+  `, styles: [".ui-checkbox{display:inline-flex;align-items:flex-start;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.ui-checkbox--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ui-checkbox__input{position:absolute;opacity:0;width:0;height:0}.ui-checkbox__control{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1.5px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);transition:var(--transition-colors)}.ui-checkbox__control--xs{width:14px;height:14px}.ui-checkbox__control--sm{width:16px;height:16px}.ui-checkbox__control--md{width:18px;height:18px}.ui-checkbox__control--lg{width:20px;height:20px}.ui-checkbox__control--xl{width:22px;height:22px}.ui-checkbox__control--checked.ui-checkbox__control--primary,.ui-checkbox__control--indeterminate.ui-checkbox__control--primary{background:var(--color-primary-500);border-color:var(--color-primary-500);color:#fff}.ui-checkbox__control--checked.ui-checkbox__control--neutral,.ui-checkbox__control--indeterminate.ui-checkbox__control--neutral{background:var(--color-neutral-800);border-color:var(--color-neutral-800);color:#fff}.ui-checkbox__control--checked.ui-checkbox__control--success,.ui-checkbox__control--indeterminate.ui-checkbox__control--success{background:var(--color-success-500);border-color:var(--color-success-500);color:#fff}.ui-checkbox__control--checked.ui-checkbox__control--error,.ui-checkbox__control--indeterminate.ui-checkbox__control--error{background:var(--color-error-500);border-color:var(--color-error-500);color:#fff}.ui-checkbox__control:focus-within{box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-ring)}.ui-checkbox__icon{font-size:11px;font-weight:700;line-height:1}.ui-checkbox__label{font-family:var(--font-sans);color:var(--color-text)}.ui-checkbox__label--xs,.ui-checkbox__label--sm{font-size:var(--text-xs)}.ui-checkbox__label--md{font-size:var(--text-sm)}.ui-checkbox__label--lg{font-size:var(--text-md)}.ui-checkbox__label--xl{font-size:var(--text-lg)}.ui-checkbox__required{color:var(--color-error-500);margin-left:2px}\n"] }]
+        }] });
+
+/**
+ * Chip Atom — Source: Nuxt UI v3 ❖ Chip
+ * Small indicator overlaid on another element (e.g., notification dot)
+ */
+class ChipComponent {
+    constructor() {
+        this.color = input('primary');
+        this.size = input('md');
+        this.position = input('top-right');
+        this.text = input(null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ChipComponent, isStandalone: true, selector: "ui-chip", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <span class="ui-chip-wrap">
+      <ng-content />
+      <span [class]="'ui-chip ui-chip--' + color() + ' ui-chip--' + size() + ' ui-chip--' + position()">
+        @if (text()) { {{ text() }} }
+      </span>
+    </span>
+  `, isInline: true, styles: [".ui-chip-wrap{position:relative;display:inline-flex}.ui-chip{position:absolute;border:2px solid var(--color-bg);border-radius:var(--radius-full);font-family:var(--font-sans);font-weight:var(--font-medium);font-size:10px;display:flex;align-items:center;justify-content:center;z-index:var(--z-raised)}.ui-chip--xs{min-width:8px;height:8px;padding:0}.ui-chip--sm{min-width:10px;height:10px;padding:0}.ui-chip--md{min-width:16px;height:16px;padding:0 4px}.ui-chip--lg{min-width:18px;height:18px;padding:0 5px}.ui-chip--xl{min-width:20px;height:20px;padding:0 6px}.ui-chip--top-right{top:0;right:0;transform:translate(30%,-30%)}.ui-chip--top-left{top:0;left:0;transform:translate(-30%,-30%)}.ui-chip--bottom-right{bottom:0;right:0;transform:translate(30%,30%)}.ui-chip--bottom-left{bottom:0;left:0;transform:translate(-30%,30%)}.ui-chip--primary{background:var(--color-primary-500);color:#fff}.ui-chip--secondary{background:var(--color-secondary-500);color:#fff}.ui-chip--neutral{background:var(--color-neutral-500);color:#fff}.ui-chip--success{background:var(--color-success-500);color:#fff}.ui-chip--warning{background:var(--color-warning-500);color:#fff}.ui-chip--error{background:var(--color-error-500);color:#fff}.ui-chip--info{background:var(--color-info-500);color:#fff}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ChipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-chip', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <span class="ui-chip-wrap">
+      <ng-content />
+      <span [class]="'ui-chip ui-chip--' + color() + ' ui-chip--' + size() + ' ui-chip--' + position()">
+        @if (text()) { {{ text() }} }
+      </span>
+    </span>
+  `, styles: [".ui-chip-wrap{position:relative;display:inline-flex}.ui-chip{position:absolute;border:2px solid var(--color-bg);border-radius:var(--radius-full);font-family:var(--font-sans);font-weight:var(--font-medium);font-size:10px;display:flex;align-items:center;justify-content:center;z-index:var(--z-raised)}.ui-chip--xs{min-width:8px;height:8px;padding:0}.ui-chip--sm{min-width:10px;height:10px;padding:0}.ui-chip--md{min-width:16px;height:16px;padding:0 4px}.ui-chip--lg{min-width:18px;height:18px;padding:0 5px}.ui-chip--xl{min-width:20px;height:20px;padding:0 6px}.ui-chip--top-right{top:0;right:0;transform:translate(30%,-30%)}.ui-chip--top-left{top:0;left:0;transform:translate(-30%,-30%)}.ui-chip--bottom-right{bottom:0;right:0;transform:translate(30%,30%)}.ui-chip--bottom-left{bottom:0;left:0;transform:translate(-30%,30%)}.ui-chip--primary{background:var(--color-primary-500);color:#fff}.ui-chip--secondary{background:var(--color-secondary-500);color:#fff}.ui-chip--neutral{background:var(--color-neutral-500);color:#fff}.ui-chip--success{background:var(--color-success-500);color:#fff}.ui-chip--warning{background:var(--color-warning-500);color:#fff}.ui-chip--error{background:var(--color-error-500);color:#fff}.ui-chip--info{background:var(--color-info-500);color:#fff}\n"] }]
+        }] });
+
+/**
+ * Kbd Atom — Source: Nuxt UI v3 ❖ Kbd
+ * Keyboard key indicator
+ */
+class KbdComponent {
+    constructor() {
+        this.size = input('md');
+        this.variant = input('outline');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbdComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.20", type: KbdComponent, isStandalone: true, selector: "ui-kbd", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<kbd [class]="'ui-kbd ui-kbd--' + size() + ' ui-kbd--' + variant()"><ng-content /></kbd>`, isInline: true, styles: [".ui-kbd{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:var(--font-medium);border-radius:var(--radius-md);white-space:nowrap}.ui-kbd--xs{padding:1px 4px;font-size:10px}.ui-kbd--sm{padding:2px 6px;font-size:11px}.ui-kbd--md{padding:2px 8px;font-size:12px}.ui-kbd--lg{padding:3px 10px;font-size:13px}.ui-kbd--xl{padding:4px 12px;font-size:14px}.ui-kbd--solid{background:var(--color-neutral-800);color:#fff}.ui-kbd--outline{background:var(--color-bg);color:var(--color-text);border:1px solid var(--color-border);box-shadow:0 1px 0 var(--color-border)}.ui-kbd--subtle{background:var(--color-neutral-100);color:var(--color-neutral-700)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbdComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-kbd', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `<kbd [class]="'ui-kbd ui-kbd--' + size() + ' ui-kbd--' + variant()"><ng-content /></kbd>`, styles: [".ui-kbd{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:var(--font-medium);border-radius:var(--radius-md);white-space:nowrap}.ui-kbd--xs{padding:1px 4px;font-size:10px}.ui-kbd--sm{padding:2px 6px;font-size:11px}.ui-kbd--md{padding:2px 8px;font-size:12px}.ui-kbd--lg{padding:3px 10px;font-size:13px}.ui-kbd--xl{padding:4px 12px;font-size:14px}.ui-kbd--solid{background:var(--color-neutral-800);color:#fff}.ui-kbd--outline{background:var(--color-bg);color:var(--color-text);border:1px solid var(--color-border);box-shadow:0 1px 0 var(--color-border)}.ui-kbd--subtle{background:var(--color-neutral-100);color:var(--color-neutral-700)}\n"] }]
+        }] });
+
+/**
+ * Link Atom — Source: Nuxt UI v3 ❖ Link
+ * Router-aware link with external support
+ */
+class LinkComponent {
+    constructor() {
+        this.href = input(null);
+        this.to = input(null);
+        this.external = input(false);
+        this.inactive = input(false);
+        this.classes = input('ui-link');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: LinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: LinkComponent, isStandalone: true, selector: "ui-link", inputs: { href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, to: { classPropertyName: "to", publicName: "to", isSignal: true, isRequired: false, transformFunction: null }, external: { classPropertyName: "external", publicName: "external", isSignal: true, isRequired: false, transformFunction: null }, inactive: { classPropertyName: "inactive", publicName: "inactive", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (external()) {
+      <a [href]="href()" [class]="classes()" target="_blank" rel="noopener noreferrer">
+        <ng-content />
+      </a>
+    } @else if (href()) {
+      <a [href]="href()" [class]="classes()"><ng-content /></a>
+    } @else {
+      <a [routerLink]="to()" [class]="classes()"><ng-content /></a>
+    }
+  `, isInline: true, styles: [".ui-link{color:var(--color-primary-500);text-decoration:none;font-family:var(--font-sans);transition:color var(--transition-fast);cursor:pointer}.ui-link:hover{color:var(--color-primary-600);text-decoration:underline}.ui-link:visited{color:var(--color-primary-700)}.ui-link:focus-visible{outline:2px solid var(--color-ring);outline-offset:2px;border-radius:var(--radius-sm)}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: LinkComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-link', standalone: true, imports: [CommonModule, RouterModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (external()) {
+      <a [href]="href()" [class]="classes()" target="_blank" rel="noopener noreferrer">
+        <ng-content />
+      </a>
+    } @else if (href()) {
+      <a [href]="href()" [class]="classes()"><ng-content /></a>
+    } @else {
+      <a [routerLink]="to()" [class]="classes()"><ng-content /></a>
+    }
+  `, styles: [".ui-link{color:var(--color-primary-500);text-decoration:none;font-family:var(--font-sans);transition:color var(--transition-fast);cursor:pointer}.ui-link:hover{color:var(--color-primary-600);text-decoration:underline}.ui-link:visited{color:var(--color-primary-700)}.ui-link:focus-visible{outline:2px solid var(--color-ring);outline-offset:2px;border-radius:var(--radius-sm)}\n"] }]
+        }] });
+
+/**
+ * Progress Atom — Source: Nuxt UI v3 ❖ Progress
+ * Linear progress bar with indeterminate support
+ */
+class ProgressComponent {
+    constructor() {
+        this.value = input(0);
+        this.max = input(100);
+        this.size = input('md');
+        this.color = input('primary');
+        this.indeterminate = input(false);
+        this.label = input(null);
+        this.showValue = input(false);
+        this.percentage = computed(() => Math.min(100, Math.max(0, Math.round((this.value() / this.max()) * 100))));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ProgressComponent, isStandalone: true, selector: "ui-progress", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="ui-progress" [class]="'ui-progress--' + size()">
+      @if (label()) {
+        <div class="ui-progress__label">{{ label() }}</div>
+      }
+      <div
+        class="ui-progress__track"
+        role="progressbar"
+        [attr.aria-valuenow]="indeterminate() ? null : value()"
+        [attr.aria-valuemin]="0"
+        [attr.aria-valuemax]="max()"
+        [attr.aria-label]="label() ?? 'Progress'"
+      >
+        <div
+          class="ui-progress__bar"
+          [class]="'ui-progress__bar--' + color() + (indeterminate() ? ' ui-progress__bar--indeterminate' : '')"
+          [style.width]="indeterminate() ? null : percentage() + '%'"
+        ></div>
+      </div>
+      @if (showValue() && !indeterminate()) {
+        <span class="ui-progress__value">{{ percentage() }}%</span>
+      }
+    </div>
+  `, isInline: true, styles: [".ui-progress{display:flex;flex-direction:column;gap:var(--spacing-1)}.ui-progress--xs .ui-progress__track{height:4px;border-radius:var(--radius-full)}.ui-progress--sm .ui-progress__track{height:6px;border-radius:var(--radius-full)}.ui-progress--md .ui-progress__track{height:8px;border-radius:var(--radius-full)}.ui-progress--lg .ui-progress__track{height:10px;border-radius:var(--radius-full)}.ui-progress--xl .ui-progress__track{height:12px;border-radius:var(--radius-full)}.ui-progress__track{width:100%;background:var(--color-neutral-100);overflow:hidden}.ui-progress__bar{height:100%;border-radius:inherit;transition:width var(--transition-slow)}.ui-progress__bar--primary{background:var(--color-primary-500)}.ui-progress__bar--neutral{background:var(--color-neutral-600)}.ui-progress__bar--success{background:var(--color-success-500)}.ui-progress__bar--warning{background:var(--color-warning-500)}.ui-progress__bar--error{background:var(--color-error-500)}.ui-progress__bar--info{background:var(--color-info-500)}.ui-progress__bar--indeterminate{width:40%!important;animation:ui-progress-slide 1.5s ease-in-out infinite}.ui-progress__label{font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-text)}.ui-progress__value{font-family:var(--font-sans);font-size:var(--text-xs);color:var(--color-text-muted);text-align:right}@keyframes ui-progress-slide{0%{transform:translate(-150%)}to{transform:translate(350%)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProgressComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-progress', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="ui-progress" [class]="'ui-progress--' + size()">
+      @if (label()) {
+        <div class="ui-progress__label">{{ label() }}</div>
+      }
+      <div
+        class="ui-progress__track"
+        role="progressbar"
+        [attr.aria-valuenow]="indeterminate() ? null : value()"
+        [attr.aria-valuemin]="0"
+        [attr.aria-valuemax]="max()"
+        [attr.aria-label]="label() ?? 'Progress'"
+      >
+        <div
+          class="ui-progress__bar"
+          [class]="'ui-progress__bar--' + color() + (indeterminate() ? ' ui-progress__bar--indeterminate' : '')"
+          [style.width]="indeterminate() ? null : percentage() + '%'"
+        ></div>
+      </div>
+      @if (showValue() && !indeterminate()) {
+        <span class="ui-progress__value">{{ percentage() }}%</span>
+      }
+    </div>
+  `, styles: [".ui-progress{display:flex;flex-direction:column;gap:var(--spacing-1)}.ui-progress--xs .ui-progress__track{height:4px;border-radius:var(--radius-full)}.ui-progress--sm .ui-progress__track{height:6px;border-radius:var(--radius-full)}.ui-progress--md .ui-progress__track{height:8px;border-radius:var(--radius-full)}.ui-progress--lg .ui-progress__track{height:10px;border-radius:var(--radius-full)}.ui-progress--xl .ui-progress__track{height:12px;border-radius:var(--radius-full)}.ui-progress__track{width:100%;background:var(--color-neutral-100);overflow:hidden}.ui-progress__bar{height:100%;border-radius:inherit;transition:width var(--transition-slow)}.ui-progress__bar--primary{background:var(--color-primary-500)}.ui-progress__bar--neutral{background:var(--color-neutral-600)}.ui-progress__bar--success{background:var(--color-success-500)}.ui-progress__bar--warning{background:var(--color-warning-500)}.ui-progress__bar--error{background:var(--color-error-500)}.ui-progress__bar--info{background:var(--color-info-500)}.ui-progress__bar--indeterminate{width:40%!important;animation:ui-progress-slide 1.5s ease-in-out infinite}.ui-progress__label{font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-text)}.ui-progress__value{font-family:var(--font-sans);font-size:var(--text-xs);color:var(--color-text-muted);text-align:right}@keyframes ui-progress-slide{0%{transform:translate(-150%)}to{transform:translate(350%)}}\n"] }]
+        }] });
+
+/**
+ * Separator Atom — Source: Nuxt UI v3 ❖ Separator
+ * Horizontal or vertical divider, optionally with label
+ */
+class SeparatorComponent {
+    constructor() {
+        this.orientation = input('horizontal');
+        this.label = input(null);
+        this.type = input('solid');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: SeparatorComponent, isStandalone: true, selector: "ui-separator", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div [class]="'ui-separator ui-separator--' + orientation() + (label() ? ' ui-separator--labeled' : '')"
+         role="separator"
+         [attr.aria-orientation]="orientation()">
+      @if (label()) {
+        <span class="ui-separator__label">{{ label() }}</span>
+      }
+    </div>
+  `, isInline: true, styles: [".ui-separator{--sep-color: var(--color-border);flex-shrink:0}.ui-separator--horizontal{width:100%;height:1px;background:var(--sep-color);margin:var(--spacing-4) 0}.ui-separator--vertical{width:1px;height:100%;min-height:1em;background:var(--sep-color);margin:0 var(--spacing-4)}.ui-separator--labeled{display:flex;align-items:center;gap:var(--spacing-3);background:none;height:auto}.ui-separator--labeled:before,.ui-separator--labeled:after{content:\"\";flex:1;height:1px;background:var(--sep-color)}.ui-separator__label{font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--color-text-muted);white-space:nowrap;padding:0 var(--spacing-2)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SeparatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-separator', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div [class]="'ui-separator ui-separator--' + orientation() + (label() ? ' ui-separator--labeled' : '')"
+         role="separator"
+         [attr.aria-orientation]="orientation()">
+      @if (label()) {
+        <span class="ui-separator__label">{{ label() }}</span>
+      }
+    </div>
+  `, styles: [".ui-separator{--sep-color: var(--color-border);flex-shrink:0}.ui-separator--horizontal{width:100%;height:1px;background:var(--sep-color);margin:var(--spacing-4) 0}.ui-separator--vertical{width:1px;height:100%;min-height:1em;background:var(--sep-color);margin:0 var(--spacing-4)}.ui-separator--labeled{display:flex;align-items:center;gap:var(--spacing-3);background:none;height:auto}.ui-separator--labeled:before,.ui-separator--labeled:after{content:\"\";flex:1;height:1px;background:var(--sep-color)}.ui-separator__label{font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--color-text-muted);white-space:nowrap;padding:0 var(--spacing-2)}\n"] }]
+        }] });
+
+/**
+ * Skeleton Atom — Source: Nuxt UI v3 ❖ Skeleton
+ * Loading placeholder with shimmer animation
+ */
+class SkeletonComponent {
+    constructor() {
+        this.width = input('100%');
+        this.height = input('1rem');
+        this.rounded = input(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.20", type: SkeletonComponent, isStandalone: true, selector: "ui-skeleton", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<div [class]="'ui-skeleton' + (rounded() ? ' ui-skeleton--rounded' : '')"
+    [style.width]="width()" [style.height]="height()" role="status" aria-label="Loading..."></div>`, isInline: true, styles: [".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;border-radius:var(--radius-md);display:block}.ui-skeleton--rounded{border-radius:var(--radius-full)}@keyframes ui-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-skeleton', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `<div [class]="'ui-skeleton' + (rounded() ? ' ui-skeleton--rounded' : '')"
+    [style.width]="width()" [style.height]="height()" role="status" aria-label="Loading..."></div>`, styles: [".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;border-radius:var(--radius-md);display:block}.ui-skeleton--rounded{border-radius:var(--radius-full)}@keyframes ui-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
+        }] });
+
+/**
+ * Slider Atom — Source: Nuxt UI v3 ❖ Slider
+ * Range input with custom styling
+ */
+class SliderComponent {
+    constructor() {
+        this.min = input(0);
+        this.max = input(100);
+        this.step = input(1);
+        this.size = input('md');
+        this.color = input('primary');
+        this.disabled = input(false);
+        this.value = model(0);
+        this._onChange = () => { };
+        this._onTouched = () => { };
+    }
+    onInput(e) {
+        const val = Number(e.target.value);
+        this.value.set(val);
+        this._onChange(val);
+        this._onTouched();
+    }
+    writeValue(v) { this.value.set(v); }
+    registerOnChange(fn) { this._onChange = fn; }
+    registerOnTouched(fn) { this._onTouched = fn; }
+    setDisabledState(_) { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.20", type: SliderComponent, isStandalone: true, selector: "ui-slider", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SliderComponent), multi: true }], ngImport: i0, template: `
+    <div class="ui-slider ui-slider--{{ size() }}">
+      <input
+        type="range"
+        class="ui-slider__input ui-slider__input--{{ color() }}"
+        [min]="min()"
+        [max]="max()"
+        [step]="step()"
+        [value]="value()"
+        [disabled]="disabled()"
+        (input)="onInput($event)"
+      />
+    </div>
+  `, isInline: true, styles: [".ui-slider{display:flex;align-items:center;width:100%}.ui-slider--xs{height:var(--size-xs)}.ui-slider--sm{height:var(--size-sm)}.ui-slider--md{height:var(--size-md)}.ui-slider--lg{height:var(--size-lg)}.ui-slider--xl{height:var(--size-xl)}.ui-slider__input{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:var(--radius-full);background:var(--color-neutral-200);cursor:pointer;outline:none}.ui-slider__input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;border:2px solid white;box-shadow:var(--shadow-sm);transition:transform var(--transition-fast)}.ui-slider__input:focus-visible{box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-ring)}.ui-slider__input--primary::-webkit-slider-thumb{background:var(--color-primary-500)}.ui-slider__input--neutral::-webkit-slider-thumb{background:var(--color-neutral-600)}.ui-slider__input--success::-webkit-slider-thumb{background:var(--color-success-500)}.ui-slider__input--warning::-webkit-slider-thumb{background:var(--color-warning-500)}.ui-slider__input--error::-webkit-slider-thumb{background:var(--color-error-500)}.ui-slider__input:disabled{opacity:.5;cursor:not-allowed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SliderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-slider', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SliderComponent), multi: true }], template: `
+    <div class="ui-slider ui-slider--{{ size() }}">
+      <input
+        type="range"
+        class="ui-slider__input ui-slider__input--{{ color() }}"
+        [min]="min()"
+        [max]="max()"
+        [step]="step()"
+        [value]="value()"
+        [disabled]="disabled()"
+        (input)="onInput($event)"
+      />
+    </div>
+  `, styles: [".ui-slider{display:flex;align-items:center;width:100%}.ui-slider--xs{height:var(--size-xs)}.ui-slider--sm{height:var(--size-sm)}.ui-slider--md{height:var(--size-md)}.ui-slider--lg{height:var(--size-lg)}.ui-slider--xl{height:var(--size-xl)}.ui-slider__input{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:var(--radius-full);background:var(--color-neutral-200);cursor:pointer;outline:none}.ui-slider__input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;border:2px solid white;box-shadow:var(--shadow-sm);transition:transform var(--transition-fast)}.ui-slider__input:focus-visible{box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-ring)}.ui-slider__input--primary::-webkit-slider-thumb{background:var(--color-primary-500)}.ui-slider__input--neutral::-webkit-slider-thumb{background:var(--color-neutral-600)}.ui-slider__input--success::-webkit-slider-thumb{background:var(--color-success-500)}.ui-slider__input--warning::-webkit-slider-thumb{background:var(--color-warning-500)}.ui-slider__input--error::-webkit-slider-thumb{background:var(--color-error-500)}.ui-slider__input:disabled{opacity:.5;cursor:not-allowed}\n"] }]
+        }] });
+
+/**
+ * Switch Atom — Source: Nuxt UI v3 ❖ Switch
+ * Toggle control with label support and CVA
+ */
+class SwitchComponent {
+    constructor() {
+        this.size = input('md');
+        this.color = input('primary');
+        this.label = input(null);
+        this.disabled = input(false);
+        this.checked = model(false);
+        this._onChange = () => { };
+        this._onTouched = () => { };
+    }
+    toggle() {
+        if (this.disabled())
+            return;
+        this.checked.update(v => !v);
+        this._onChange(this.checked());
+        this._onTouched();
+    }
+    writeValue(v) { this.checked.set(v); }
+    registerOnChange(fn) { this._onChange = fn; }
+    registerOnTouched(fn) { this._onTouched = fn; }
+    setDisabledState(_) { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: SwitchComponent, isStandalone: true, selector: "ui-switch", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SwitchComponent), multi: true }], ngImport: i0, template: `
+    <label class="ui-switch" [class.ui-switch--disabled]="disabled()">
+      <button
+        type="button"
+        role="switch"
+        [class]="'ui-switch__track ui-switch__track--' + size() + ' ui-switch__track--' + color() + (checked() ? ' ui-switch__track--on' : '')"
+        [attr.aria-checked]="checked()"
+        [disabled]="disabled()"
+        (click)="toggle()"
+      >
+        <span class="ui-switch__thumb" [class.ui-switch__thumb--on]="checked()"></span>
+      </button>
+      @if (label()) {
+        <span class="ui-switch__label">{{ label() }}</span>
+      }
+    </label>
+  `, isInline: true, styles: [".ui-switch{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}.ui-switch--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ui-switch__track{position:relative;display:inline-flex;align-items:center;border:none;border-radius:var(--radius-full);background:var(--color-neutral-300);cursor:pointer;transition:background var(--transition-base);padding:2px}.ui-switch__track--xs{width:28px;height:16px}.ui-switch__track--sm{width:32px;height:18px}.ui-switch__track--md{width:40px;height:22px}.ui-switch__track--lg{width:48px;height:26px}.ui-switch__track--xl{width:56px;height:30px}.ui-switch__track--on.ui-switch__track--primary{background:var(--color-primary-500)}.ui-switch__track--on.ui-switch__track--neutral{background:var(--color-neutral-800)}.ui-switch__track--on.ui-switch__track--success{background:var(--color-success-500)}.ui-switch__track--on.ui-switch__track--warning{background:var(--color-warning-500)}.ui-switch__track--on.ui-switch__track--error{background:var(--color-error-500)}.ui-switch__track:focus-visible{box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-ring)}.ui-switch__thumb{width:calc(50% - 2px);height:calc(100% - 4px);border-radius:50%;background:#fff;box-shadow:var(--shadow-xs);transition:transform var(--transition-base);transform:translate(0)}.ui-switch__thumb--on{transform:translate(100%)}.ui-switch__label{font-family:var(--font-sans);font-size:var(--text-sm);color:var(--color-text)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SwitchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-switch', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SwitchComponent), multi: true }], template: `
+    <label class="ui-switch" [class.ui-switch--disabled]="disabled()">
+      <button
+        type="button"
+        role="switch"
+        [class]="'ui-switch__track ui-switch__track--' + size() + ' ui-switch__track--' + color() + (checked() ? ' ui-switch__track--on' : '')"
+        [attr.aria-checked]="checked()"
+        [disabled]="disabled()"
+        (click)="toggle()"
+      >
+        <span class="ui-switch__thumb" [class.ui-switch__thumb--on]="checked()"></span>
+      </button>
+      @if (label()) {
+        <span class="ui-switch__label">{{ label() }}</span>
+      }
+    </label>
+  `, styles: [".ui-switch{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}.ui-switch--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ui-switch__track{position:relative;display:inline-flex;align-items:center;border:none;border-radius:var(--radius-full);background:var(--color-neutral-300);cursor:pointer;transition:background var(--transition-base);padding:2px}.ui-switch__track--xs{width:28px;height:16px}.ui-switch__track--sm{width:32px;height:18px}.ui-switch__track--md{width:40px;height:22px}.ui-switch__track--lg{width:48px;height:26px}.ui-switch__track--xl{width:56px;height:30px}.ui-switch__track--on.ui-switch__track--primary{background:var(--color-primary-500)}.ui-switch__track--on.ui-switch__track--neutral{background:var(--color-neutral-800)}.ui-switch__track--on.ui-switch__track--success{background:var(--color-success-500)}.ui-switch__track--on.ui-switch__track--warning{background:var(--color-warning-500)}.ui-switch__track--on.ui-switch__track--error{background:var(--color-error-500)}.ui-switch__track:focus-visible{box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-ring)}.ui-switch__thumb{width:calc(50% - 2px);height:calc(100% - 4px);border-radius:50%;background:#fff;box-shadow:var(--shadow-xs);transition:transform var(--transition-base);transform:translate(0)}.ui-switch__thumb--on{transform:translate(100%)}.ui-switch__label{font-family:var(--font-sans);font-size:var(--text-sm);color:var(--color-text)}\n"] }]
+        }] });
+
+/**
+ * Tooltip Atom — Source: Nuxt UI v3 ❖ Tooltip
+ * CSS-only hover tooltip with positioning
+ */
+class TooltipComponent {
+    constructor() {
+        this.text = input.required();
+        this.position = input('top');
+        this.shortcut = input(null);
+        this.delay = input(500);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TooltipComponent, isStandalone: true, selector: "ui-tooltip", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, shortcut: { classPropertyName: "shortcut", publicName: "shortcut", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <span class="ui-tooltip-wrap">
+      <ng-content />
+      <span class="ui-tooltip ui-tooltip--{{ position() }}" role="tooltip">
+        {{ text() }}
+        @if (shortcut()) {
+          <kbd class="ui-tooltip__kbd">{{ shortcut() }}</kbd>
+        }
+      </span>
+    </span>
+  `, isInline: true, styles: [".ui-tooltip-wrap{position:relative;display:inline-flex;align-items:center}.ui-tooltip-wrap:hover .ui-tooltip,.ui-tooltip-wrap:focus-within .ui-tooltip{opacity:1;pointer-events:auto}.ui-tooltip{position:absolute;z-index:var(--z-tooltip);padding:5px 10px;background:var(--color-neutral-900);color:var(--color-neutral-0);font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--font-medium);border-radius:var(--radius-md);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--transition-fast);box-shadow:var(--shadow-md)}.ui-tooltip--top{bottom:calc(100% + 6px);left:50%;transform:translate(-50%)}.ui-tooltip--bottom{top:calc(100% + 6px);left:50%;transform:translate(-50%)}.ui-tooltip--left{right:calc(100% + 6px);top:50%;transform:translateY(-50%)}.ui-tooltip--right{left:calc(100% + 6px);top:50%;transform:translateY(-50%)}.ui-tooltip__kbd{display:inline-flex;align-items:center;justify-content:center;padding:1px 4px;margin-left:4px;background:var(--color-neutral-700);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:.7em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-tooltip', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <span class="ui-tooltip-wrap">
+      <ng-content />
+      <span class="ui-tooltip ui-tooltip--{{ position() }}" role="tooltip">
+        {{ text() }}
+        @if (shortcut()) {
+          <kbd class="ui-tooltip__kbd">{{ shortcut() }}</kbd>
+        }
+      </span>
+    </span>
+  `, styles: [".ui-tooltip-wrap{position:relative;display:inline-flex;align-items:center}.ui-tooltip-wrap:hover .ui-tooltip,.ui-tooltip-wrap:focus-within .ui-tooltip{opacity:1;pointer-events:auto}.ui-tooltip{position:absolute;z-index:var(--z-tooltip);padding:5px 10px;background:var(--color-neutral-900);color:var(--color-neutral-0);font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--font-medium);border-radius:var(--radius-md);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--transition-fast);box-shadow:var(--shadow-md)}.ui-tooltip--top{bottom:calc(100% + 6px);left:50%;transform:translate(-50%)}.ui-tooltip--bottom{top:calc(100% + 6px);left:50%;transform:translate(-50%)}.ui-tooltip--left{right:calc(100% + 6px);top:50%;transform:translateY(-50%)}.ui-tooltip--right{left:calc(100% + 6px);top:50%;transform:translateY(-50%)}.ui-tooltip__kbd{display:inline-flex;align-items:center;justify-content:center;padding:1px 4px;margin-left:4px;background:var(--color-neutral-700);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:.7em}\n"] }]
+        }] });
+
+// ============================================================
+// ATOMS — Nuxt UI v3 Design Kit → Angular 19 + NX
+// Basic building blocks (no component dependencies)
+// ============================================================
+
+/**
+ * Alert Molecule — Source: Nuxt UI v3 ❖ Alert
+ * Contextual messages with icon, title, description, actions
+ * Built from: icon (atom) + content + optional close button
+ */
+class AlertComponent {
+    constructor() {
+        this.variant = input('soft');
+        this.color = input('info');
+        this.title = input(null);
+        this.description = input(null);
+        this.icon = input(true);
+        this.closable = input(false);
+        this.actions = input(false);
+        this.live = input('polite');
+        this.close = output();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: AlertComponent, isStandalone: true, selector: "ui-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, live: { classPropertyName: "live", publicName: "live", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, ngImport: i0, template: `
+    <div [class]="'ui-alert ui-alert--' + variant() + ' ui-alert--' + color()"
+         role="alert" [attr.aria-live]="live()">
+      @if (icon()) {
+        <span class="ui-alert__icon" aria-hidden="true">
+          <ng-content select="[slot=icon]" />
+        </span>
+      }
+      <div class="ui-alert__body">
+        @if (title()) {
+          <p class="ui-alert__title">{{ title() }}</p>
+        }
+        @if (description()) {
+          <p class="ui-alert__description">{{ description() }}</p>
+        }
+        <ng-content />
+        @if (actions()) {
+          <div class="ui-alert__actions">
+            <ng-content select="[slot=actions]" />
+          </div>
+        }
+      </div>
+      @if (closable()) {
+        <button type="button" class="ui-alert__close" aria-label="Close" (click)="close.emit()">
+          <span aria-hidden="true">×</span>
+        </button>
+      }
+    </div>
+  `, isInline: true, styles: [".ui-alert{display:flex;align-items:flex-start;gap:var(--spacing-3);padding:var(--spacing-4);border-radius:var(--radius-lg);border:1px solid transparent}.ui-alert__icon{flex-shrink:0;width:1.25rem;height:1.25rem;margin-top:1px}.ui-alert__body{flex:1;min-width:0}.ui-alert__title{font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-text);margin:0 0 var(--spacing-1)}.ui-alert__description{font-family:var(--font-sans);font-size:var(--text-sm);color:var(--color-text-muted);margin:0}.ui-alert__actions{display:flex;gap:var(--spacing-2);margin-top:var(--spacing-3)}.ui-alert__close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border:none;background:transparent;cursor:pointer;border-radius:var(--radius-md);color:currentColor;opacity:.6;font-size:1.25rem;line-height:1}.ui-alert__close:hover{opacity:1}.ui-alert--primary.ui-alert--soft{background:color-mix(in srgb,var(--color-primary-500) 12%,transparent);border-color:color-mix(in srgb,var(--color-primary-500) 20%,transparent);color:var(--color-primary-700)}.ui-alert--primary.ui-alert--outline{background:transparent;border-color:var(--color-primary-500);color:var(--color-primary-700)}.ui-alert--primary.ui-alert--solid{background:var(--color-primary-500);color:#fff}.ui-alert--primary.ui-alert--subtle{background:color-mix(in srgb,var(--color-primary-500) 8%,transparent);border-color:transparent;color:var(--color-primary-700)}.ui-alert--success.ui-alert--soft{background:color-mix(in srgb,var(--color-success-500) 12%,transparent);border-color:color-mix(in srgb,var(--color-success-500) 20%,transparent);color:var(--color-success-700)}.ui-alert--success.ui-alert--outline{background:transparent;border-color:var(--color-success-500);color:var(--color-success-700)}.ui-alert--success.ui-alert--solid{background:var(--color-success-500);color:#fff}.ui-alert--success.ui-alert--subtle{background:color-mix(in srgb,var(--color-success-500) 8%,transparent);border-color:transparent;color:var(--color-success-700)}.ui-alert--warning.ui-alert--soft{background:color-mix(in srgb,var(--color-warning-500) 12%,transparent);border-color:color-mix(in srgb,var(--color-warning-500) 20%,transparent);color:var(--color-warning-700)}.ui-alert--warning.ui-alert--outline{background:transparent;border-color:var(--color-warning-500);color:var(--color-warning-700)}.ui-alert--warning.ui-alert--solid{background:var(--color-warning-500);color:#fff}.ui-alert--warning.ui-alert--subtle{background:color-mix(in srgb,var(--color-warning-500) 8%,transparent);border-color:transparent;color:var(--color-warning-700)}.ui-alert--error.ui-alert--soft{background:color-mix(in srgb,var(--color-error-500) 12%,transparent);border-color:color-mix(in srgb,var(--color-error-500) 20%,transparent);color:var(--color-error-700)}.ui-alert--error.ui-alert--outline{background:transparent;border-color:var(--color-error-500);color:var(--color-error-700)}.ui-alert--error.ui-alert--solid{background:var(--color-error-500);color:#fff}.ui-alert--error.ui-alert--subtle{background:color-mix(in srgb,var(--color-error-500) 8%,transparent);border-color:transparent;color:var(--color-error-700)}.ui-alert--info.ui-alert--soft{background:color-mix(in srgb,var(--color-info-500) 12%,transparent);border-color:color-mix(in srgb,var(--color-info-500) 20%,transparent);color:var(--color-info-700)}.ui-alert--info.ui-alert--outline{background:transparent;border-color:var(--color-info-500);color:var(--color-info-700)}.ui-alert--info.ui-alert--solid{background:var(--color-info-500);color:#fff}.ui-alert--info.ui-alert--subtle{background:color-mix(in srgb,var(--color-info-500) 8%,transparent);border-color:transparent;color:var(--color-info-700)}.ui-alert--neutral.ui-alert--soft{background:color-mix(in srgb,var(--color-neutral-500) 12%,transparent);border-color:color-mix(in srgb,var(--color-neutral-500) 20%,transparent);color:var(--color-neutral-700)}.ui-alert--neutral.ui-alert--outline{background:transparent;border-color:var(--color-neutral-500);color:var(--color-neutral-700)}.ui-alert--neutral.ui-alert--solid{background:var(--color-neutral-500);color:#fff}.ui-alert--neutral.ui-alert--subtle{background:color-mix(in srgb,var(--color-neutral-500) 8%,transparent);border-color:transparent;color:var(--color-neutral-700)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AlertComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-alert', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div [class]="'ui-alert ui-alert--' + variant() + ' ui-alert--' + color()"
+         role="alert" [attr.aria-live]="live()">
+      @if (icon()) {
+        <span class="ui-alert__icon" aria-hidden="true">
+          <ng-content select="[slot=icon]" />
+        </span>
+      }
+      <div class="ui-alert__body">
+        @if (title()) {
+          <p class="ui-alert__title">{{ title() }}</p>
+        }
+        @if (description()) {
+          <p class="ui-alert__description">{{ description() }}</p>
+        }
+        <ng-content />
+        @if (actions()) {
+          <div class="ui-alert__actions">
+            <ng-content select="[slot=actions]" />
+          </div>
+        }
+      </div>
+      @if (closable()) {
+        <button type="button" class="ui-alert__close" aria-label="Close" (click)="close.emit()">
+          <span aria-hidden="true">×</span>
+        </button>
+      }
+    </div>
+  `, styles: [".ui-alert{display:flex;align-items:flex-start;gap:var(--spacing-3);padding:var(--spacing-4);border-radius:var(--radius-lg);border:1px solid transparent}.ui-alert__icon{flex-shrink:0;width:1.25rem;height:1.25rem;margin-top:1px}.ui-alert__body{flex:1;min-width:0}.ui-alert__title{font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-text);margin:0 0 var(--spacing-1)}.ui-alert__description{font-family:var(--font-sans);font-size:var(--text-sm);color:var(--color-text-muted);margin:0}.ui-alert__actions{display:flex;gap:var(--spacing-2);margin-top:var(--spacing-3)}.ui-alert__close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border:none;background:transparent;cursor:pointer;border-radius:var(--radius-md);color:currentColor;opacity:.6;font-size:1.25rem;line-height:1}.ui-alert__close:hover{opacity:1}.ui-alert--primary.ui-alert--soft{background:color-mix(in srgb,var(--color-primary-500) 12%,transparent);border-color:color-mix(in srgb,var(--color-primary-500) 20%,transparent);color:var(--color-primary-700)}.ui-alert--primary.ui-alert--outline{background:transparent;border-color:var(--color-primary-500);color:var(--color-primary-700)}.ui-alert--primary.ui-alert--solid{background:var(--color-primary-500);color:#fff}.ui-alert--primary.ui-alert--subtle{background:color-mix(in srgb,var(--color-primary-500) 8%,transparent);border-color:transparent;color:var(--color-primary-700)}.ui-alert--success.ui-alert--soft{background:color-mix(in srgb,var(--color-success-500) 12%,transparent);border-color:color-mix(in srgb,var(--color-success-500) 20%,transparent);color:var(--color-success-700)}.ui-alert--success.ui-alert--outline{background:transparent;border-color:var(--color-success-500);color:var(--color-success-700)}.ui-alert--success.ui-alert--solid{background:var(--color-success-500);color:#fff}.ui-alert--success.ui-alert--subtle{background:color-mix(in srgb,var(--color-success-500) 8%,transparent);border-color:transparent;color:var(--color-success-700)}.ui-alert--warning.ui-alert--soft{background:color-mix(in srgb,var(--color-warning-500) 12%,transparent);border-color:color-mix(in srgb,var(--color-warning-500) 20%,transparent);color:var(--color-warning-700)}.ui-alert--warning.ui-alert--outline{background:transparent;border-color:var(--color-warning-500);color:var(--color-warning-700)}.ui-alert--warning.ui-alert--solid{background:var(--color-warning-500);color:#fff}.ui-alert--warning.ui-alert--subtle{background:color-mix(in srgb,var(--color-warning-500) 8%,transparent);border-color:transparent;color:var(--color-warning-700)}.ui-alert--error.ui-alert--soft{background:color-mix(in srgb,var(--color-error-500) 12%,transparent);border-color:color-mix(in srgb,var(--color-error-500) 20%,transparent);color:var(--color-error-700)}.ui-alert--error.ui-alert--outline{background:transparent;border-color:var(--color-error-500);color:var(--color-error-700)}.ui-alert--error.ui-alert--solid{background:var(--color-error-500);color:#fff}.ui-alert--error.ui-alert--subtle{background:color-mix(in srgb,var(--color-error-500) 8%,transparent);border-color:transparent;color:var(--color-error-700)}.ui-alert--info.ui-alert--soft{background:color-mix(in srgb,var(--color-info-500) 12%,transparent);border-color:color-mix(in srgb,var(--color-info-500) 20%,transparent);color:var(--color-info-700)}.ui-alert--info.ui-alert--outline{background:transparent;border-color:var(--color-info-500);color:var(--color-info-700)}.ui-alert--info.ui-alert--solid{background:var(--color-info-500);color:#fff}.ui-alert--info.ui-alert--subtle{background:color-mix(in srgb,var(--color-info-500) 8%,transparent);border-color:transparent;color:var(--color-info-700)}.ui-alert--neutral.ui-alert--soft{background:color-mix(in srgb,var(--color-neutral-500) 12%,transparent);border-color:color-mix(in srgb,var(--color-neutral-500) 20%,transparent);color:var(--color-neutral-700)}.ui-alert--neutral.ui-alert--outline{background:transparent;border-color:var(--color-neutral-500);color:var(--color-neutral-700)}.ui-alert--neutral.ui-alert--solid{background:var(--color-neutral-500);color:#fff}.ui-alert--neutral.ui-alert--subtle{background:color-mix(in srgb,var(--color-neutral-500) 8%,transparent);border-color:transparent;color:var(--color-neutral-700)}\n"] }]
+        }] });
+
+/**
+ * AvatarGroup Molecule — Source: Nuxt UI v3 ❖ AvatarGroup
+ * Stacked avatar list with overflow count
+ * Depends on: AvatarComponent (atom)
+ */
+class AvatarGroupComponent {
+    constructor() {
+        this.items = input.required();
+        this.max = input(5);
+        this.size = input('md');
+    }
+    get visibleItems() { return () => this.items().slice(0, this.max()); }
+    get overflow() { return () => Math.max(0, this.items().length - this.max()); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AvatarGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: AvatarGroupComponent, isStandalone: true, selector: "ui-avatar-group", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="ui-avatar-group" [attr.aria-label]="'Group of ' + items().length + ' avatars'">
+      @for (item of visibleItems(); track item.alt) {
+        <ui-avatar
+          [src]="item.src ?? null"
+          [alt]="item.alt ?? null"
+          [initials]="item.initials ?? null"
+          [size]="size()"
+          class="ui-avatar-group__item"
+        />
+      }
+      @if (overflow() > 0) {
+        <span class="ui-avatar-group__overflow ui-avatar-group__overflow--{{ size() }}"
+              [attr.aria-label]="overflow() + ' more'">
+          +{{ overflow() }}
+        </span>
+      }
+    </div>
+  `, isInline: true, styles: [".ui-avatar-group{display:flex;align-items:center}.ui-avatar-group .ui-avatar-group__item,.ui-avatar-group ui-avatar{margin-left:-8px}.ui-avatar-group .ui-avatar-group__item:first-child,.ui-avatar-group ui-avatar:first-child{margin-left:0}.ui-avatar-group ui-avatar,.ui-avatar-group .ui-avatar-group__item{border:2px solid var(--color-bg);border-radius:50%}.ui-avatar-group__overflow{display:inline-flex;align-items:center;justify-content:center;margin-left:-8px;border:2px solid var(--color-bg);border-radius:50%;background:var(--color-neutral-100);color:var(--color-neutral-600);font-family:var(--font-sans);font-weight:var(--font-medium);flex-shrink:0}.ui-avatar-group__overflow--xs{width:20px;height:20px;font-size:10px}.ui-avatar-group__overflow--sm{width:24px;height:24px;font-size:11px}.ui-avatar-group__overflow--md{width:32px;height:32px;font-size:13px}.ui-avatar-group__overflow--lg{width:40px;height:40px;font-size:15px}.ui-avatar-group__overflow--xl{width:48px;height:48px;font-size:17px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AvatarComponent$1, selector: "ui-avatar", inputs: ["src", "alt", "size", "initials", "chip", "chipColor", "chipAlt", "rounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AvatarGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-avatar-group', standalone: true, imports: [CommonModule, AvatarComponent$1], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="ui-avatar-group" [attr.aria-label]="'Group of ' + items().length + ' avatars'">
+      @for (item of visibleItems(); track item.alt) {
+        <ui-avatar
+          [src]="item.src ?? null"
+          [alt]="item.alt ?? null"
+          [initials]="item.initials ?? null"
+          [size]="size()"
+          class="ui-avatar-group__item"
+        />
+      }
+      @if (overflow() > 0) {
+        <span class="ui-avatar-group__overflow ui-avatar-group__overflow--{{ size() }}"
+              [attr.aria-label]="overflow() + ' more'">
+          +{{ overflow() }}
+        </span>
+      }
+    </div>
+  `, styles: [".ui-avatar-group{display:flex;align-items:center}.ui-avatar-group .ui-avatar-group__item,.ui-avatar-group ui-avatar{margin-left:-8px}.ui-avatar-group .ui-avatar-group__item:first-child,.ui-avatar-group ui-avatar:first-child{margin-left:0}.ui-avatar-group ui-avatar,.ui-avatar-group .ui-avatar-group__item{border:2px solid var(--color-bg);border-radius:50%}.ui-avatar-group__overflow{display:inline-flex;align-items:center;justify-content:center;margin-left:-8px;border:2px solid var(--color-bg);border-radius:50%;background:var(--color-neutral-100);color:var(--color-neutral-600);font-family:var(--font-sans);font-weight:var(--font-medium);flex-shrink:0}.ui-avatar-group__overflow--xs{width:20px;height:20px;font-size:10px}.ui-avatar-group__overflow--sm{width:24px;height:24px;font-size:11px}.ui-avatar-group__overflow--md{width:32px;height:32px;font-size:13px}.ui-avatar-group__overflow--lg{width:40px;height:40px;font-size:15px}.ui-avatar-group__overflow--xl{width:48px;height:48px;font-size:17px}\n"] }]
+        }] });
+
+/**
+ * Breadcrumb Molecule — Source: Nuxt UI v3 ❖ Breadcrumb
+ * Navigation trail with router support
+ */
+class BreadcrumbComponent {
+    constructor() {
+        this.items = input.required();
+        this.separator = input('/');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: BreadcrumbComponent, isStandalone: true, selector: "ui-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <nav aria-label="Breadcrumb">
+      <ol class="ui-breadcrumb">
+        @for (item of items(); track item.label; let last = $last) {
+          <li class="ui-breadcrumb__item" [class.ui-breadcrumb__item--current]="last">
+            @if (!last && item.to) {
+              <a [routerLink]="item.to" class="ui-breadcrumb__link">{{ item.label }}</a>
+            } @else if (!last && item.href) {
+              <a [href]="item.href" class="ui-breadcrumb__link">{{ item.label }}</a>
+            } @else {
+              <span class="ui-breadcrumb__current" [attr.aria-current]="last ? 'page' : null">{{ item.label }}</span>
+            }
+            @if (!last) {
+              <span class="ui-breadcrumb__separator" aria-hidden="true">{{ separator() }}</span>
+            }
+          </li>
+        }
+      </ol>
+    </nav>
+  `, isInline: true, styles: [".ui-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-1);list-style:none;padding:0;margin:0}.ui-breadcrumb__item{display:flex;align-items:center;gap:var(--spacing-1)}.ui-breadcrumb__link{font-family:var(--font-sans);font-size:var(--text-sm);color:var(--color-text-muted);text-decoration:none;transition:color var(--transition-fast)}.ui-breadcrumb__link:hover{color:var(--color-primary-500);text-decoration:underline}.ui-breadcrumb__current{font-family:var(--font-sans);font-size:var(--text-sm);color:var(--color-text);font-weight:var(--font-medium)}.ui-breadcrumb__separator{font-size:var(--text-xs);color:var(--color-text-subtle);-webkit-user-select:none;user-select:none}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: BreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-breadcrumb', standalone: true, imports: [CommonModule, RouterModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <nav aria-label="Breadcrumb">
+      <ol class="ui-breadcrumb">
+        @for (item of items(); track item.label; let last = $last) {
+          <li class="ui-breadcrumb__item" [class.ui-breadcrumb__item--current]="last">
+            @if (!last && item.to) {
+              <a [routerLink]="item.to" class="ui-breadcrumb__link">{{ item.label }}</a>
+            } @else if (!last && item.href) {
+              <a [href]="item.href" class="ui-breadcrumb__link">{{ item.label }}</a>
+            } @else {
+              <span class="ui-breadcrumb__current" [attr.aria-current]="last ? 'page' : null">{{ item.label }}</span>
+            }
+            @if (!last) {
+              <span class="ui-breadcrumb__separator" aria-hidden="true">{{ separator() }}</span>
+            }
+          </li>
+        }
+      </ol>
+    </nav>
+  `, styles: [".ui-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-1);list-style:none;padding:0;margin:0}.ui-breadcrumb__item{display:flex;align-items:center;gap:var(--spacing-1)}.ui-breadcrumb__link{font-family:var(--font-sans);font-size:var(--text-sm);color:var(--color-text-muted);text-decoration:none;transition:color var(--transition-fast)}.ui-breadcrumb__link:hover{color:var(--color-primary-500);text-decoration:underline}.ui-breadcrumb__current{font-family:var(--font-sans);font-size:var(--text-sm);color:var(--color-text);font-weight:var(--font-medium)}.ui-breadcrumb__separator{font-size:var(--text-xs);color:var(--color-text-subtle);-webkit-user-select:none;user-select:none}\n"] }]
+        }] });
+
+/**
+ * ButtonGroup Molecule — Source: Nuxt UI v3 ❖ ButtonGroup
+ * Groups buttons in a visual row (joined borders)
+ */
+class ButtonGroupComponent {
+    constructor() {
+        this.vertical = input(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.20", type: ButtonGroupComponent, isStandalone: true, selector: "ui-button-group", inputs: { vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="ui-button-group" [class.ui-button-group--vertical]="vertical()" role="group">
+      <ng-content />
+    </div>
+  `, isInline: true, styles: [".ui-button-group{display:inline-flex;align-items:stretch}.ui-button-group ::ng-deep ui-button button,.ui-button-group ::ng-deep .ui-btn{border-radius:0;border-right-width:0}.ui-button-group ::ng-deep ui-button button:first-child,.ui-button-group ::ng-deep .ui-btn:first-child{border-radius:var(--radius-md) 0 0 var(--radius-md)}.ui-button-group ::ng-deep ui-button button:last-child,.ui-button-group ::ng-deep .ui-btn:last-child{border-radius:0 var(--radius-md) var(--radius-md) 0;border-right-width:1px}.ui-button-group--vertical{flex-direction:column}.ui-button-group--vertical ::ng-deep ui-button button,.ui-button-group--vertical ::ng-deep .ui-btn{border-bottom-width:0;border-radius:0}.ui-button-group--vertical ::ng-deep ui-button button:first-child,.ui-button-group--vertical ::ng-deep .ui-btn:first-child{border-radius:var(--radius-md) var(--radius-md) 0 0}.ui-button-group--vertical ::ng-deep ui-button button:last-child,.ui-button-group--vertical ::ng-deep .ui-btn:last-child{border-radius:0 0 var(--radius-md) var(--radius-md);border-bottom-width:1px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ButtonGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-button-group', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="ui-button-group" [class.ui-button-group--vertical]="vertical()" role="group">
+      <ng-content />
+    </div>
+  `, styles: [".ui-button-group{display:inline-flex;align-items:stretch}.ui-button-group ::ng-deep ui-button button,.ui-button-group ::ng-deep .ui-btn{border-radius:0;border-right-width:0}.ui-button-group ::ng-deep ui-button button:first-child,.ui-button-group ::ng-deep .ui-btn:first-child{border-radius:var(--radius-md) 0 0 var(--radius-md)}.ui-button-group ::ng-deep ui-button button:last-child,.ui-button-group ::ng-deep .ui-btn:last-child{border-radius:0 var(--radius-md) var(--radius-md) 0;border-right-width:1px}.ui-button-group--vertical{flex-direction:column}.ui-button-group--vertical ::ng-deep ui-button button,.ui-button-group--vertical ::ng-deep .ui-btn{border-bottom-width:0;border-radius:0}.ui-button-group--vertical ::ng-deep ui-button button:first-child,.ui-button-group--vertical ::ng-deep .ui-btn:first-child{border-radius:var(--radius-md) var(--radius-md) 0 0}.ui-button-group--vertical ::ng-deep ui-button button:last-child,.ui-button-group--vertical ::ng-deep .ui-btn:last-child{border-radius:0 0 var(--radius-md) var(--radius-md);border-bottom-width:1px}\n"] }]
+        }] });
+
+/**
+ * FormField Molecule — Source: Nuxt UI v3 ❖ FormField
+ * Wrapper for form controls: label + control + hint + error
+ * Used with: Input, Textarea, Select, Checkbox, Radio...
+ */
+class FormFieldComponent {
+    constructor() {
+        this.label = input(null);
+        this.name = input('');
+        this.hint = input(null);
+        this.errorMessage = input(null);
+        this.required = input(false);
+        this.size = input('md');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: FormFieldComponent, isStandalone: true, selector: "ui-form-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="ui-form-field" [class.ui-form-field--error]="!!errorMessage()" [class.ui-form-field--required]="required()">
+      @if (label()) {
+        <label class="ui-form-field__label ui-form-field__label--{{ size() }}" [for]="name()">
+          {{ label() }}
+          @if (required()) {
+            <span class="ui-form-field__required" aria-hidden="true"> *</span>
+          }
+        </label>
+      }
+
+      <div class="ui-form-field__control">
+        <ng-content />
+      </div>
+
+      @if (hint() && !errorMessage()) {
+        <p class="ui-form-field__hint" [id]="name() + '-hint'">{{ hint() }}</p>
+      }
+
+      @if (errorMessage()) {
+        <p class="ui-form-field__error" role="alert" [id]="name() + '-error'">
+          {{ errorMessage() }}
+        </p>
+      }
+    </div>
+  `, isInline: true, styles: [".ui-form-field{display:flex;flex-direction:column;gap:var(--spacing-1-5);width:100%}.ui-form-field__label{font-family:var(--font-sans);font-weight:var(--font-medium);color:var(--color-text);cursor:pointer}.ui-form-field__label--xs,.ui-form-field__label--sm{font-size:var(--text-xs)}.ui-form-field__label--md{font-size:var(--text-sm)}.ui-form-field__label--lg{font-size:var(--text-md)}.ui-form-field__label--xl{font-size:var(--text-lg)}.ui-form-field__required{color:var(--color-error-500)}.ui-form-field__control{position:relative}.ui-form-field__hint{font-family:var(--font-sans);font-size:var(--text-xs);color:var(--color-text-muted);margin:0}.ui-form-field__error{font-family:var(--font-sans);font-size:var(--text-xs);color:var(--color-error-600);margin:0;font-weight:var(--font-medium)}.ui-form-field--error .ui-form-field__label{color:var(--color-error-600)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FormFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-form-field', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="ui-form-field" [class.ui-form-field--error]="!!errorMessage()" [class.ui-form-field--required]="required()">
+      @if (label()) {
+        <label class="ui-form-field__label ui-form-field__label--{{ size() }}" [for]="name()">
+          {{ label() }}
+          @if (required()) {
+            <span class="ui-form-field__required" aria-hidden="true"> *</span>
+          }
+        </label>
+      }
+
+      <div class="ui-form-field__control">
+        <ng-content />
+      </div>
+
+      @if (hint() && !errorMessage()) {
+        <p class="ui-form-field__hint" [id]="name() + '-hint'">{{ hint() }}</p>
+      }
+
+      @if (errorMessage()) {
+        <p class="ui-form-field__error" role="alert" [id]="name() + '-error'">
+          {{ errorMessage() }}
+        </p>
+      }
+    </div>
+  `, styles: [".ui-form-field{display:flex;flex-direction:column;gap:var(--spacing-1-5);width:100%}.ui-form-field__label{font-family:var(--font-sans);font-weight:var(--font-medium);color:var(--color-text);cursor:pointer}.ui-form-field__label--xs,.ui-form-field__label--sm{font-size:var(--text-xs)}.ui-form-field__label--md{font-size:var(--text-sm)}.ui-form-field__label--lg{font-size:var(--text-md)}.ui-form-field__label--xl{font-size:var(--text-lg)}.ui-form-field__required{color:var(--color-error-500)}.ui-form-field__control{position:relative}.ui-form-field__hint{font-family:var(--font-sans);font-size:var(--text-xs);color:var(--color-text-muted);margin:0}.ui-form-field__error{font-family:var(--font-sans);font-size:var(--text-xs);color:var(--color-error-600);margin:0;font-weight:var(--font-medium)}.ui-form-field--error .ui-form-field__label{color:var(--color-error-600)}\n"] }]
+        }] });
+
+/**
+ * Input Molecule — Source: Nuxt UI v3 ❖ Input
+ *
+ * Slots :
+ *   [slot=leading]  — icône / contenu à gauche
+ *   [slot=trailing] — icône / contenu à droite
+ *
+ * Pour rendre un slot cliquable (ex: toggle password) :
+ *   [trailingClickable]="true"  → rend le slot trailing en <button> et émet (trailingClick)
+ *   [leadingClickable]="true"   → rend le slot leading  en <button> et émet (leadingClick)
+ */
+class InputComponent {
+    constructor() {
+        // ── Inputs ───────────────────────────────────────────────
+        this.type = input('text');
+        this.placeholder = input('');
+        this.size = input('md');
+        this.variant = input('outline');
+        this.color = input('primary');
+        this.disabled = input(false);
+        this.readonly = input(false);
+        this.required = input(false);
+        this.ariaLabel = input(null);
+        this.leading = input(false);
+        this.leadingClickable = input(false);
+        /** aria-label du bouton leading quand leadingClickable=true */
+        this.leadingLabel = input('');
+        this.trailing = input(false);
+        this.trailingClickable = input(false);
+        /** aria-label du bouton trailing quand trailingClickable=true */
+        this.trailingLabel = input('');
+        // ── Two-way ──────────────────────────────────────────────
+        this.value = model('');
+        // ── Outputs ──────────────────────────────────────────────
+        this.leadingClick = output();
+        this.trailingClick = output();
+        // ── CVA ──────────────────────────────────────────────────
+        this._onChange = () => { };
+        this.onTouched = () => { };
+    }
+    // ── Classes computed ─────────────────────────────────────
+    wrapClass() {
+        return [
+            'ui-input-wrap',
+            `ui-input-wrap--${this.size()}`,
+            this.leading() ? 'ui-input-wrap--has-leading' : '',
+            this.trailing() ? 'ui-input-wrap--has-trailing' : '',
+        ].filter(Boolean).join(' ');
+    }
+    inputClass() {
+        return `ui-input ui-input--${this.variant()} ui-input--${this.color()} ui-input--${this.size()}`;
+    }
+    onInput(e) {
+        const val = e.target.value;
+        this.value.set(val);
+        this._onChange(val);
+    }
+    writeValue(v) { this.value.set(v ?? ''); }
+    registerOnChange(fn) { this._onChange = fn; }
+    registerOnTouched(fn) { this.onTouched = fn; }
+    setDisabledState(_) { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: InputComponent, isStandalone: true, selector: "ui-input", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, leading: { classPropertyName: "leading", publicName: "leading", isSignal: true, isRequired: false, transformFunction: null }, leadingClickable: { classPropertyName: "leadingClickable", publicName: "leadingClickable", isSignal: true, isRequired: false, transformFunction: null }, leadingLabel: { classPropertyName: "leadingLabel", publicName: "leadingLabel", isSignal: true, isRequired: false, transformFunction: null }, trailing: { classPropertyName: "trailing", publicName: "trailing", isSignal: true, isRequired: false, transformFunction: null }, trailingClickable: { classPropertyName: "trailingClickable", publicName: "trailingClickable", isSignal: true, isRequired: false, transformFunction: null }, trailingLabel: { classPropertyName: "trailingLabel", publicName: "trailingLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", leadingClick: "leadingClick", trailingClick: "trailingClick" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputComponent), multi: true }], ngImport: i0, template: `
+    <div [class]="wrapClass()">
+
+      <!-- Leading slot -->
+      @if (leading()) {
+        <span
+          class="ui-input__leading"
+          [class.ui-input__slot--clickable]="leadingClickable()"
+          [attr.role]="leadingClickable() ? 'button' : null"
+          [attr.tabindex]="leadingClickable() ? 0 : null"
+          [attr.aria-label]="leadingClickable() ? leadingLabel() : null"
+          (click)="leadingClickable() && leadingClick.emit()"
+          (keydown.enter)="leadingClickable() && leadingClick.emit()"
+          (keydown.space)="leadingClickable() && leadingClick.emit()"
+        >
+          <ng-content select="[slot=leading]" />
+        </span>
+      }
+
+      <!-- Native input -->
+      <input
+        [class]="inputClass()"
+        [type]="type()"
+        [placeholder]="placeholder()"
+        [disabled]="disabled()"
+        [readonly]="readonly()"
+        [required]="required()"
+        [attr.aria-label]="ariaLabel() ?? null"
+        [attr.aria-invalid]="color() === 'error'"
+        [value]="value()"
+        (input)="onInput($event)"
+        (blur)="onTouched()"
+      />
+
+      <!-- Trailing slot -->
+      @if (trailing()) {
+        <span
+          class="ui-input__trailing"
+          [class.ui-input__slot--clickable]="trailingClickable()"
+          [attr.role]="trailingClickable() ? 'button' : null"
+          [attr.tabindex]="trailingClickable() ? 0 : null"
+          [attr.aria-label]="trailingClickable() ? trailingLabel() : null"
+          (click)="trailingClickable() && trailingClick.emit()"
+          (keydown.enter)="trailingClickable() && trailingClick.emit()"
+          (keydown.space)="trailingClickable() && trailingClick.emit()"
+        >
+          <ng-content select="[slot=trailing]" />
+        </span>
+      }
+
+    </div>
+  `, isInline: true, styles: [".ui-input-wrap{position:relative;display:flex;align-items:stretch;width:100%}.ui-input-wrap--has-leading .ui-input{padding-left:2.5rem}.ui-input-wrap--has-trailing .ui-input{padding-right:2.5rem}.ui-input{width:100%;font-family:var(--font-sans);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-text);outline:none;transition:var(--transition-colors)}.ui-input::placeholder{color:var(--color-text-subtle)}.ui-input:focus{border-color:var(--color-primary-500);box-shadow:0 0 0 1px var(--color-primary-500)}.ui-input:disabled{opacity:.5;cursor:not-allowed;background:var(--color-neutral-50)}.ui-input--xs{height:var(--size-xs);padding:0 8px;font-size:var(--text-xs)}.ui-input--sm{height:var(--size-sm);padding:0 10px;font-size:var(--text-xs)}.ui-input--md{height:var(--size-md);padding:0 10px;font-size:var(--text-sm)}.ui-input--lg{height:var(--size-lg);padding:0 12px;font-size:var(--text-sm)}.ui-input--xl{height:var(--size-xl);padding:0 12px;font-size:var(--text-md)}.ui-input--outline{border-color:var(--color-border)}.ui-input--soft{background:var(--color-neutral-50);border-color:transparent}.ui-input--subtle{background:transparent;border-color:transparent;border-bottom-color:var(--color-border);border-radius:0}.ui-input--none{border:none;background:transparent;box-shadow:none!important}.ui-input--error{border-color:var(--color-error-500)}.ui-input--error:focus{box-shadow:0 0 0 1px var(--color-error-500)}.ui-input--success{border-color:var(--color-success-500)}.ui-input--success:focus{box-shadow:0 0 0 1px var(--color-success-500)}.ui-input--warning{border-color:var(--color-warning-500)}.ui-input--warning:focus{box-shadow:0 0 0 1px var(--color-warning-500)}.ui-input__leading,.ui-input__trailing{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);width:2.25rem;height:100%;pointer-events:none}.ui-input__leading{left:0}.ui-input__trailing{right:0}.ui-input__slot--clickable{pointer-events:auto;cursor:pointer;border-radius:var(--radius-sm);color:var(--color-text-muted);transition:color var(--transition-colors)}.ui-input__slot--clickable:hover{color:var(--color-text)}.ui-input__slot--clickable:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:-2px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: InputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-input', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputComponent), multi: true }], template: `
+    <div [class]="wrapClass()">
+
+      <!-- Leading slot -->
+      @if (leading()) {
+        <span
+          class="ui-input__leading"
+          [class.ui-input__slot--clickable]="leadingClickable()"
+          [attr.role]="leadingClickable() ? 'button' : null"
+          [attr.tabindex]="leadingClickable() ? 0 : null"
+          [attr.aria-label]="leadingClickable() ? leadingLabel() : null"
+          (click)="leadingClickable() && leadingClick.emit()"
+          (keydown.enter)="leadingClickable() && leadingClick.emit()"
+          (keydown.space)="leadingClickable() && leadingClick.emit()"
+        >
+          <ng-content select="[slot=leading]" />
+        </span>
+      }
+
+      <!-- Native input -->
+      <input
+        [class]="inputClass()"
+        [type]="type()"
+        [placeholder]="placeholder()"
+        [disabled]="disabled()"
+        [readonly]="readonly()"
+        [required]="required()"
+        [attr.aria-label]="ariaLabel() ?? null"
+        [attr.aria-invalid]="color() === 'error'"
+        [value]="value()"
+        (input)="onInput($event)"
+        (blur)="onTouched()"
+      />
+
+      <!-- Trailing slot -->
+      @if (trailing()) {
+        <span
+          class="ui-input__trailing"
+          [class.ui-input__slot--clickable]="trailingClickable()"
+          [attr.role]="trailingClickable() ? 'button' : null"
+          [attr.tabindex]="trailingClickable() ? 0 : null"
+          [attr.aria-label]="trailingClickable() ? trailingLabel() : null"
+          (click)="trailingClickable() && trailingClick.emit()"
+          (keydown.enter)="trailingClickable() && trailingClick.emit()"
+          (keydown.space)="trailingClickable() && trailingClick.emit()"
+        >
+          <ng-content select="[slot=trailing]" />
+        </span>
+      }
+
+    </div>
+  `, styles: [".ui-input-wrap{position:relative;display:flex;align-items:stretch;width:100%}.ui-input-wrap--has-leading .ui-input{padding-left:2.5rem}.ui-input-wrap--has-trailing .ui-input{padding-right:2.5rem}.ui-input{width:100%;font-family:var(--font-sans);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-text);outline:none;transition:var(--transition-colors)}.ui-input::placeholder{color:var(--color-text-subtle)}.ui-input:focus{border-color:var(--color-primary-500);box-shadow:0 0 0 1px var(--color-primary-500)}.ui-input:disabled{opacity:.5;cursor:not-allowed;background:var(--color-neutral-50)}.ui-input--xs{height:var(--size-xs);padding:0 8px;font-size:var(--text-xs)}.ui-input--sm{height:var(--size-sm);padding:0 10px;font-size:var(--text-xs)}.ui-input--md{height:var(--size-md);padding:0 10px;font-size:var(--text-sm)}.ui-input--lg{height:var(--size-lg);padding:0 12px;font-size:var(--text-sm)}.ui-input--xl{height:var(--size-xl);padding:0 12px;font-size:var(--text-md)}.ui-input--outline{border-color:var(--color-border)}.ui-input--soft{background:var(--color-neutral-50);border-color:transparent}.ui-input--subtle{background:transparent;border-color:transparent;border-bottom-color:var(--color-border);border-radius:0}.ui-input--none{border:none;background:transparent;box-shadow:none!important}.ui-input--error{border-color:var(--color-error-500)}.ui-input--error:focus{box-shadow:0 0 0 1px var(--color-error-500)}.ui-input--success{border-color:var(--color-success-500)}.ui-input--success:focus{box-shadow:0 0 0 1px var(--color-success-500)}.ui-input--warning{border-color:var(--color-warning-500)}.ui-input--warning:focus{box-shadow:0 0 0 1px var(--color-warning-500)}.ui-input__leading,.ui-input__trailing{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);width:2.25rem;height:100%;pointer-events:none}.ui-input__leading{left:0}.ui-input__trailing{right:0}.ui-input__slot--clickable{pointer-events:auto;cursor:pointer;border-radius:var(--radius-sm);color:var(--color-text-muted);transition:color var(--transition-colors)}.ui-input__slot--clickable:hover{color:var(--color-text)}.ui-input__slot--clickable:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:-2px}\n"] }]
+        }] });
+
+/**
+ * Pagination Molecule — Source: Nuxt UI v3 ❖ Pagination
+ * Page navigation with page numbers, prev/next controls
+ */
+class PaginationComponent {
+    constructor() {
+        this.total = input.required();
+        this.size = input('md');
+        this.page = model(1);
+        this.pages = computed(() => {
+            const current = this.page();
+            const last = this.total();
+            if (last <= 7)
+                return Array.from({ length: last }, (_, i) => i + 1);
+            const items = [1];
+            if (current > 3)
+                items.push('...');
+            const start = Math.max(2, current - 1);
+            const end = Math.min(last - 1, current + 1);
+            for (let i = start; i <= end; i++)
+                items.push(i);
+            if (current < last - 2)
+                items.push('...');
+            items.push(last);
+            return items;
+        });
+    }
+    prev() { if (this.page() > 1)
+        this.page.update(p => p - 1); }
+    next() { if (this.page() < this.total())
+        this.page.update(p => p + 1); }
+    goTo(p) { this.page.set(p); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: PaginationComponent, isStandalone: true, selector: "ui-pagination", inputs: { total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange" }, ngImport: i0, template: `
+    <nav class="ui-pagination ui-pagination--{{ size() }}" aria-label="Pagination">
+      <button
+        class="ui-pagination__btn"
+        [disabled]="page() <= 1"
+        (click)="prev()"
+        aria-label="Previous page"
+      >‹</button>
+
+      @for (p of pages(); track p) {
+        @if (p === '...') {
+          <span class="ui-pagination__ellipsis" aria-hidden="true">…</span>
+        } @else {
+          <button
+            class="ui-pagination__btn"
+            [class.ui-pagination__btn--active]="p === page()"
+            [attr.aria-current]="p === page() ? 'page' : null"
+            (click)="goTo(+p)"
+          >{{ p }}</button>
+        }
+      }
+
+      <button
+        class="ui-pagination__btn"
+        [disabled]="page() >= total()"
+        (click)="next()"
+        aria-label="Next page"
+      >›</button>
+    </nav>
+  `, isInline: true, styles: [".ui-pagination{display:flex;align-items:center;gap:var(--spacing-1)}.ui-pagination--xs .ui-pagination__btn{height:var(--size-xs);min-width:var(--size-xs);font-size:var(--text-xs)}.ui-pagination--sm .ui-pagination__btn{height:var(--size-sm);min-width:var(--size-sm);font-size:var(--text-xs)}.ui-pagination--md .ui-pagination__btn{height:var(--size-md);min-width:var(--size-md);font-size:var(--text-sm)}.ui-pagination--lg .ui-pagination__btn{height:var(--size-lg);min-width:var(--size-lg);font-size:var(--text-sm)}.ui-pagination--xl .ui-pagination__btn{height:var(--size-xl);min-width:var(--size-xl);font-size:var(--text-md)}.ui-pagination__btn{display:inline-flex;align-items:center;justify-content:center;padding:0 var(--spacing-2);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);font-weight:var(--font-medium);cursor:pointer;transition:var(--transition-colors)}.ui-pagination__btn:hover:not([disabled]){background:var(--color-neutral-100);border-color:var(--color-neutral-300)}.ui-pagination__btn--active{background:var(--color-primary-500);border-color:var(--color-primary-500);color:#fff}.ui-pagination__btn[disabled]{opacity:.4;cursor:not-allowed}.ui-pagination__ellipsis{display:inline-flex;align-items:center;padding:0 var(--spacing-1);color:var(--color-text-muted);font-family:var(--font-sans);font-size:var(--text-sm)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PaginationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-pagination', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <nav class="ui-pagination ui-pagination--{{ size() }}" aria-label="Pagination">
+      <button
+        class="ui-pagination__btn"
+        [disabled]="page() <= 1"
+        (click)="prev()"
+        aria-label="Previous page"
+      >‹</button>
+
+      @for (p of pages(); track p) {
+        @if (p === '...') {
+          <span class="ui-pagination__ellipsis" aria-hidden="true">…</span>
+        } @else {
+          <button
+            class="ui-pagination__btn"
+            [class.ui-pagination__btn--active]="p === page()"
+            [attr.aria-current]="p === page() ? 'page' : null"
+            (click)="goTo(+p)"
+          >{{ p }}</button>
+        }
+      }
+
+      <button
+        class="ui-pagination__btn"
+        [disabled]="page() >= total()"
+        (click)="next()"
+        aria-label="Next page"
+      >›</button>
+    </nav>
+  `, styles: [".ui-pagination{display:flex;align-items:center;gap:var(--spacing-1)}.ui-pagination--xs .ui-pagination__btn{height:var(--size-xs);min-width:var(--size-xs);font-size:var(--text-xs)}.ui-pagination--sm .ui-pagination__btn{height:var(--size-sm);min-width:var(--size-sm);font-size:var(--text-xs)}.ui-pagination--md .ui-pagination__btn{height:var(--size-md);min-width:var(--size-md);font-size:var(--text-sm)}.ui-pagination--lg .ui-pagination__btn{height:var(--size-lg);min-width:var(--size-lg);font-size:var(--text-sm)}.ui-pagination--xl .ui-pagination__btn{height:var(--size-xl);min-width:var(--size-xl);font-size:var(--text-md)}.ui-pagination__btn{display:inline-flex;align-items:center;justify-content:center;padding:0 var(--spacing-2);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);font-weight:var(--font-medium);cursor:pointer;transition:var(--transition-colors)}.ui-pagination__btn:hover:not([disabled]){background:var(--color-neutral-100);border-color:var(--color-neutral-300)}.ui-pagination__btn--active{background:var(--color-primary-500);border-color:var(--color-primary-500);color:#fff}.ui-pagination__btn[disabled]{opacity:.4;cursor:not-allowed}.ui-pagination__ellipsis{display:inline-flex;align-items:center;padding:0 var(--spacing-1);color:var(--color-text-muted);font-family:var(--font-sans);font-size:var(--text-sm)}\n"] }]
+        }] });
+
+/**
+ * Select Molecule — Source: Nuxt UI v3 ❖ Select
+ *
+ * Dropdown custom (non natif) :
+ * - Trigger stylisé comme un Input (variants, couleurs, tailles Figma)
+ * - Panel dropdown animé (scale + fade, 100ms ease-out)
+ * - Navigation clavier : ArrowUp/Down, Enter, Space, Escape, Tab
+ * - ClickOutside pour fermer
+ * - Slot leading icon dans le trigger
+ * - Icône + checkmark par option
+ * - Compatible ControlValueAccessor
+ */
+class SelectComponent {
+    constructor() {
+        this.options = input.required();
+        this.placeholder = input(null);
+        this.size = input('md');
+        this.variant = input('outline');
+        this.color = input('neutral');
+        this.disabled = input(false);
+        this.loading = input(false);
+        this.leadingIcon = input(false);
+        this.ariaLabel = input(null);
+        this.value = model('');
+        this.change = output();
+        this.isOpen = signal(false);
+        this.activeIndex = signal(-1);
+        this.selectedOption = computed(() => this.options().find(o => String(o.value) === String(this.value())));
+        this.triggerClasses = computed(() => ['ui-select__trigger',
+            `ui-select__trigger--${this.size()}`,
+            `ui-select__trigger--${this.variant()}`,
+            `ui-select__trigger--${this.color()}`
+        ].join(' '));
+        // CVA
+        this._onChange = () => { };
+        this._onTouched = () => { };
+    }
+    isSelected(opt) {
+        return String(opt.value) === String(this.value());
+    }
+    writeValue(v) { this.value.set(v ?? ''); }
+    registerOnChange(fn) { this._onChange = fn; }
+    registerOnTouched(fn) { this._onTouched = fn; }
+    setDisabledState(_) { }
+    toggleOpen() {
+        if (this.disabled() || this.loading())
+            return;
+        this.isOpen.update(v => !v);
+        if (this.isOpen()) {
+            const idx = this.options().findIndex(o => this.isSelected(o));
+            this.activeIndex.set(idx >= 0 ? idx : 0);
+        }
+    }
+    selectOption(opt) {
+        if (opt.disabled)
+            return;
+        const val = String(opt.value);
+        this.value.set(val);
+        this._onChange(val);
+        this._onTouched();
+        this.change.emit(opt);
+        this.isOpen.set(false);
+        this.triggerEl?.nativeElement.focus();
+    }
+    onTriggerKeydown(event) {
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                if (!this.isOpen()) {
+                    this.toggleOpen();
+                }
+                else {
+                    const opt = this.options()[this.activeIndex()];
+                    if (opt && !opt.disabled)
+                        this.selectOption(opt);
+                }
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                if (!this.isOpen()) {
+                    this.toggleOpen();
+                    return;
+                }
+                this.activeIndex.update(i => {
+                    let n = i + 1;
+                    while (n < this.options().length && this.options()[n]?.disabled)
+                        n++;
+                    return Math.min(n, this.options().length - 1);
+                });
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.activeIndex.update(i => {
+                    let n = i - 1;
+                    while (n >= 0 && this.options()[n]?.disabled)
+                        n--;
+                    return Math.max(n, 0);
+                });
+                break;
+            case 'Escape':
+            case 'Tab':
+                this.isOpen.set(false);
+                break;
+        }
+    }
+    onDocumentClick(event) {
+        if (this.isOpen() && !event.target.closest('ui-select')) {
+            this.isOpen.set(false);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: SelectComponent, isStandalone: true, selector: "ui-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, leadingIcon: { classPropertyName: "leadingIcon", publicName: "leadingIcon", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", change: "change" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [{
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SelectComponent),
+                multi: true,
+            }], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true }], ngImport: i0, template: `
+    <div
+      class="ui-select"
+      [class.ui-select--open]="isOpen()"
+      [class.ui-select--disabled]="disabled()"
+    >
+      <!-- Trigger -->
+      <button
+        #triggerEl
+        type="button"
+        [class]="triggerClasses()"
+        [disabled]="disabled() || loading()"
+        [attr.aria-haspopup]="'listbox'"
+        [attr.aria-expanded]="isOpen()"
+        [attr.aria-label]="ariaLabel() ?? null"
+        (click)="toggleOpen(); $event.stopPropagation()"
+        (keydown)="onTriggerKeydown($event)"
+      >
+        @if (leadingIcon()) {
+          <span class="ui-select__leading" aria-hidden="true">
+            <ng-content select="[slot=leading]" />
+          </span>
+        }
+
+        <span class="ui-select__value" [class.ui-select__value--placeholder]="!selectedOption()">
+          @if (loading()) {
+            <span class="ui-select__spinner" aria-hidden="true">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <circle cx="12" cy="12" r="10" stroke-opacity="0.25"/>
+                <path d="M12 2a10 10 0 0 1 10 10" stroke-linecap="round"/>
+              </svg>
+            </span>
+          } @else {
+            {{ selectedOption()?.label ?? placeholder() ?? 'Sélectionner...' }}
+          }
+        </span>
+
+        <span class="ui-select__chevron" [class.ui-select__chevron--open]="isOpen()" aria-hidden="true">
+          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.75"
+               stroke-linecap="round" stroke-linejoin="round">
+            <path d="M4 6l4 4 4-4"/>
+          </svg>
+        </span>
+      </button>
+
+      <!-- Dropdown panel -->
+      @if (isOpen()) {
+        <div
+          [@dropdown]
+          class="ui-select__panel"
+          role="listbox"
+          [attr.aria-label]="ariaLabel() ?? 'Options'"
+          (click)="$event.stopPropagation()"
+        >
+          @for (opt of options(); track opt.value; let i = $index) {
+            <button
+              type="button"
+              class="ui-select__option"
+              role="option"
+              [class.ui-select__option--selected]="isSelected(opt)"
+              [class.ui-select__option--highlighted]="activeIndex() === i"
+              [class.ui-select__option--disabled]="opt.disabled"
+              [attr.aria-selected]="isSelected(opt)"
+              [disabled]="opt.disabled"
+              (click)="selectOption(opt)"
+              (mouseenter)="activeIndex.set(i)"
+            >
+              @if (opt.icon) {
+                <span class="ui-select__option-icon" aria-hidden="true">{{ opt.icon }}</span>
+              }
+              <span class="ui-select__option-label">{{ opt.label }}</span>
+              @if (isSelected(opt)) {
+                <span class="ui-select__option-check" aria-hidden="true">
+                  <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.25"
+                       stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M3 8l3.5 3.5L13 5"/>
+                  </svg>
+                </span>
+              }
+            </button>
+          }
+          @if (options().length === 0) {
+            <div class="ui-select__empty">Aucune option disponible</div>
+          }
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [".ui-select{position:relative;display:inline-block;width:100%}.ui-select--disabled{opacity:.5;cursor:not-allowed}.ui-select__trigger{display:inline-flex;align-items:center;gap:.375rem;width:100%;border-radius:var(--radius-md);font-family:var(--font-sans);font-weight:var(--font-medium);cursor:pointer;outline:none;transition:background-color var(--transition-colors),border-color var(--transition-colors),box-shadow var(--transition-colors);text-align:left;white-space:nowrap;overflow:hidden}.ui-select__trigger--xs{height:var(--size-xs);padding:0 8px;font-size:var(--text-xs)}.ui-select__trigger--sm{height:var(--size-sm);padding:0 10px;font-size:var(--text-xs)}.ui-select__trigger--md{height:var(--size-md);padding:0 10px;font-size:var(--text-sm)}.ui-select__trigger--lg{height:var(--size-lg);padding:0 12px;font-size:var(--text-sm)}.ui-select__trigger--xl{height:var(--size-xl);padding:0 12px;font-size:var(--text-md)}.ui-select__trigger--outline.ui-select__trigger--neutral{background:var(--color-bg);border:1px solid var(--color-border);color:var(--color-text)}.ui-select__trigger--outline.ui-select__trigger--neutral:hover:not(:disabled){border-color:var(--color-neutral-400)}.ui-select__trigger--outline.ui-select__trigger--neutral:focus-visible{border-color:var(--color-primary-500);box-shadow:0 0 0 1px var(--color-primary-500)}.ui-select__trigger--soft.ui-select__trigger--neutral{background:var(--color-neutral-100);border:1px solid transparent;color:var(--color-text)}.ui-select__trigger--soft.ui-select__trigger--neutral:hover:not(:disabled){background:var(--color-neutral-200)}.ui-select__trigger--soft.ui-select__trigger--neutral:focus-visible{box-shadow:0 0 0 2px var(--color-primary-500)}.ui-select__trigger--subtle.ui-select__trigger--neutral{background:transparent;border:1px solid transparent;color:var(--color-text)}.ui-select__trigger--subtle.ui-select__trigger--neutral:hover:not(:disabled){background:var(--color-neutral-100)}.ui-select__trigger--subtle.ui-select__trigger--neutral:focus-visible{box-shadow:0 0 0 2px var(--color-primary-500)}.ui-select__trigger--ghost.ui-select__trigger--neutral{background:transparent;border:1px solid transparent;color:var(--color-text)}.ui-select__trigger--ghost.ui-select__trigger--neutral:hover:not(:disabled){background:var(--color-neutral-100)}.ui-select__trigger--ghost.ui-select__trigger--neutral:focus-visible{box-shadow:0 0 0 2px var(--color-primary-500)}.ui-select__trigger--none.ui-select__trigger--neutral{background:transparent;border:none;color:var(--color-text)}.ui-select__trigger--outline.ui-select__trigger--primary{background:var(--color-bg);border:1px solid var(--color-primary-500);color:var(--color-primary-600)}.ui-select__trigger--outline.ui-select__trigger--primary:hover:not(:disabled){border-color:var(--color-primary-600);background:color-mix(in srgb,var(--color-primary-500) 5%,transparent)}.ui-select__trigger--outline.ui-select__trigger--primary:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary-500) 30%,transparent)}.ui-select__trigger--soft.ui-select__trigger--primary{background:color-mix(in srgb,var(--color-primary-500) 10%,transparent);border:1px solid transparent;color:var(--color-primary-600)}.ui-select__trigger--soft.ui-select__trigger--primary:hover:not(:disabled){background:color-mix(in srgb,var(--color-primary-500) 15%,transparent)}.ui-select__trigger--soft.ui-select__trigger--primary:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary-500) 40%,transparent)}.ui-select__trigger--outline.ui-select__trigger--error{background:var(--color-bg);border:1px solid var(--color-error-500);color:var(--color-error-600)}.ui-select__trigger--outline.ui-select__trigger--error:hover:not(:disabled){background:color-mix(in srgb,var(--color-error-500) 5%,transparent)}.ui-select__trigger--outline.ui-select__trigger--error:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-error-500) 30%,transparent)}.ui-select__trigger--soft.ui-select__trigger--error{background:color-mix(in srgb,var(--color-error-500) 10%,transparent);border:1px solid transparent;color:var(--color-error-700)}.ui-select__trigger--soft.ui-select__trigger--error:hover:not(:disabled){background:color-mix(in srgb,var(--color-error-500) 15%,transparent)}.ui-select__trigger--soft.ui-select__trigger--error:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-error-500) 40%,transparent)}.ui-select__trigger--outline.ui-select__trigger--warning{background:var(--color-bg);border:1px solid var(--color-warning-500);color:var(--color-warning-600)}.ui-select__trigger--outline.ui-select__trigger--warning:hover:not(:disabled){background:color-mix(in srgb,var(--color-warning-500) 5%,transparent)}.ui-select__trigger--outline.ui-select__trigger--warning:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-warning-500) 30%,transparent)}.ui-select__trigger--soft.ui-select__trigger--warning{background:color-mix(in srgb,var(--color-warning-500) 10%,transparent);border:1px solid transparent;color:var(--color-warning-700)}.ui-select__trigger--soft.ui-select__trigger--warning:hover:not(:disabled){background:color-mix(in srgb,var(--color-warning-500) 15%,transparent)}.ui-select__trigger--soft.ui-select__trigger--warning:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-warning-500) 40%,transparent)}.ui-select__trigger--outline.ui-select__trigger--success{background:var(--color-bg);border:1px solid var(--color-success-500);color:var(--color-success-600)}.ui-select__trigger--outline.ui-select__trigger--success:hover:not(:disabled){background:color-mix(in srgb,var(--color-success-500) 5%,transparent)}.ui-select__trigger--outline.ui-select__trigger--success:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-success-500) 30%,transparent)}.ui-select__trigger--soft.ui-select__trigger--success{background:color-mix(in srgb,var(--color-success-500) 10%,transparent);border:1px solid transparent;color:var(--color-success-700)}.ui-select__trigger--soft.ui-select__trigger--success:hover:not(:disabled){background:color-mix(in srgb,var(--color-success-500) 15%,transparent)}.ui-select__trigger--soft.ui-select__trigger--success:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-success-500) 40%,transparent)}.ui-select__trigger--outline.ui-select__trigger--info{background:var(--color-bg);border:1px solid var(--color-info-500);color:var(--color-info-600)}.ui-select__trigger--outline.ui-select__trigger--info:hover:not(:disabled){background:color-mix(in srgb,var(--color-info-500) 5%,transparent)}.ui-select__trigger--outline.ui-select__trigger--info:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-info-500) 30%,transparent)}.ui-select__trigger--soft.ui-select__trigger--info{background:color-mix(in srgb,var(--color-info-500) 10%,transparent);border:1px solid transparent;color:var(--color-info-700)}.ui-select__trigger--soft.ui-select__trigger--info:hover:not(:disabled){background:color-mix(in srgb,var(--color-info-500) 15%,transparent)}.ui-select__trigger--soft.ui-select__trigger--info:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-info-500) 40%,transparent)}.ui-select__trigger--outline.ui-select__trigger--secondary{background:var(--color-bg);border:1px solid var(--color-secondary-500);color:var(--color-secondary-600)}.ui-select__trigger--outline.ui-select__trigger--secondary:hover:not(:disabled){background:color-mix(in srgb,var(--color-secondary-500) 5%,transparent)}.ui-select__trigger--outline.ui-select__trigger--secondary:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-secondary-500) 30%,transparent)}.ui-select__trigger--soft.ui-select__trigger--secondary{background:color-mix(in srgb,var(--color-secondary-500) 10%,transparent);border:1px solid transparent;color:var(--color-secondary-700)}.ui-select__trigger--soft.ui-select__trigger--secondary:hover:not(:disabled){background:color-mix(in srgb,var(--color-secondary-500) 15%,transparent)}.ui-select__trigger--soft.ui-select__trigger--secondary:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-secondary-500) 40%,transparent)}.ui-select--open .ui-select__trigger--outline{border-color:var(--color-primary-500)}.ui-select__trigger:disabled{cursor:not-allowed}.ui-select__leading{display:flex;align-items:center;flex-shrink:0;color:var(--color-text-muted);width:1rem;height:1rem}.ui-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-select__value--placeholder{color:var(--color-text-muted)}.ui-select__chevron{display:flex;align-items:center;flex-shrink:0;color:var(--color-text-muted);width:1rem;height:1rem;transition:transform .15s ease}.ui-select__chevron svg{width:100%;height:100%}.ui-select__chevron--open{transform:rotate(180deg)}.ui-select__spinner{display:inline-flex;align-items:center}.ui-select__spinner svg{width:1em;height:1em;animation:ui-spin .75s linear infinite}@keyframes ui-spin{to{transform:rotate(360deg)}}.ui-select__panel{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:var(--z-dropdown, 50);min-width:100%;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1));padding:4px;overflow:hidden;overflow-y:auto;max-height:240px;transform-origin:top center}.ui-select__option{display:flex;align-items:center;gap:.5rem;width:100%;padding:6px 8px;border-radius:calc(var(--radius-md) - 2px);font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--font-normal);color:var(--color-text);background:transparent;border:none;cursor:pointer;text-align:left;transition:background-color .1s ease}.ui-select__option:hover:not(:disabled),.ui-select__option--highlighted:not(:disabled){background:var(--color-neutral-100)}.ui-select__option--selected{color:var(--color-primary-600);font-weight:var(--font-medium);background:color-mix(in srgb,var(--color-primary-500) 8%,transparent)}.ui-select__option--selected:hover,.ui-select__option--selected.ui-select__option--highlighted{background:color-mix(in srgb,var(--color-primary-500) 12%,transparent)}.ui-select__option--disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.ui-select__option-icon{flex-shrink:0;font-size:1rem;line-height:1}.ui-select__option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-select__option-check{flex-shrink:0;width:1rem;height:1rem;color:var(--color-primary-500);display:flex;align-items:center}.ui-select__option-check svg{width:100%;height:100%}.ui-select__empty{padding:12px 8px;text-align:center;font-size:var(--text-sm);color:var(--color-text-muted)}[data-theme=dark] .ui-select__trigger--outline.ui-select__trigger--neutral{background:var(--color-neutral-900);border-color:var(--color-neutral-700)}[data-theme=dark] .ui-select__trigger--outline.ui-select__trigger--neutral:hover:not(:disabled){border-color:var(--color-neutral-500)}[data-theme=dark] .ui-select__trigger--soft.ui-select__trigger--neutral{background:var(--color-neutral-800)}[data-theme=dark] .ui-select__panel{background:var(--color-neutral-900);border-color:var(--color-neutral-700)}[data-theme=dark] .ui-select__option:hover:not(:disabled),[data-theme=dark] .ui-select__option--highlighted:not(:disabled){background:var(--color-neutral-800)}[data-theme=dark] .ui-select__option--selected{background:color-mix(in srgb,var(--color-primary-500) 12%,transparent)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], animations: [
+            trigger('dropdown', [
+                transition(':enter', [
+                    style({ opacity: 0, transform: 'scale(0.96) translateY(-4px)' }),
+                    animate('100ms ease-out', style({ opacity: 1, transform: 'scale(1) translateY(0)' })),
+                ]),
+                transition(':leave', [
+                    animate('80ms ease-in', style({ opacity: 0, transform: 'scale(0.96) translateY(-4px)' })),
+                ]),
+            ]),
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-select', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SelectComponent),
+                            multi: true,
+                        }], animations: [
+                        trigger('dropdown', [
+                            transition(':enter', [
+                                style({ opacity: 0, transform: 'scale(0.96) translateY(-4px)' }),
+                                animate('100ms ease-out', style({ opacity: 1, transform: 'scale(1) translateY(0)' })),
+                            ]),
+                            transition(':leave', [
+                                animate('80ms ease-in', style({ opacity: 0, transform: 'scale(0.96) translateY(-4px)' })),
+                            ]),
+                        ]),
+                    ], template: `
+    <div
+      class="ui-select"
+      [class.ui-select--open]="isOpen()"
+      [class.ui-select--disabled]="disabled()"
+    >
+      <!-- Trigger -->
+      <button
+        #triggerEl
+        type="button"
+        [class]="triggerClasses()"
+        [disabled]="disabled() || loading()"
+        [attr.aria-haspopup]="'listbox'"
+        [attr.aria-expanded]="isOpen()"
+        [attr.aria-label]="ariaLabel() ?? null"
+        (click)="toggleOpen(); $event.stopPropagation()"
+        (keydown)="onTriggerKeydown($event)"
+      >
+        @if (leadingIcon()) {
+          <span class="ui-select__leading" aria-hidden="true">
+            <ng-content select="[slot=leading]" />
+          </span>
+        }
+
+        <span class="ui-select__value" [class.ui-select__value--placeholder]="!selectedOption()">
+          @if (loading()) {
+            <span class="ui-select__spinner" aria-hidden="true">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <circle cx="12" cy="12" r="10" stroke-opacity="0.25"/>
+                <path d="M12 2a10 10 0 0 1 10 10" stroke-linecap="round"/>
+              </svg>
+            </span>
+          } @else {
+            {{ selectedOption()?.label ?? placeholder() ?? 'Sélectionner...' }}
+          }
+        </span>
+
+        <span class="ui-select__chevron" [class.ui-select__chevron--open]="isOpen()" aria-hidden="true">
+          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.75"
+               stroke-linecap="round" stroke-linejoin="round">
+            <path d="M4 6l4 4 4-4"/>
+          </svg>
+        </span>
+      </button>
+
+      <!-- Dropdown panel -->
+      @if (isOpen()) {
+        <div
+          [@dropdown]
+          class="ui-select__panel"
+          role="listbox"
+          [attr.aria-label]="ariaLabel() ?? 'Options'"
+          (click)="$event.stopPropagation()"
+        >
+          @for (opt of options(); track opt.value; let i = $index) {
+            <button
+              type="button"
+              class="ui-select__option"
+              role="option"
+              [class.ui-select__option--selected]="isSelected(opt)"
+              [class.ui-select__option--highlighted]="activeIndex() === i"
+              [class.ui-select__option--disabled]="opt.disabled"
+              [attr.aria-selected]="isSelected(opt)"
+              [disabled]="opt.disabled"
+              (click)="selectOption(opt)"
+              (mouseenter)="activeIndex.set(i)"
+            >
+              @if (opt.icon) {
+                <span class="ui-select__option-icon" aria-hidden="true">{{ opt.icon }}</span>
+              }
+              <span class="ui-select__option-label">{{ opt.label }}</span>
+              @if (isSelected(opt)) {
+                <span class="ui-select__option-check" aria-hidden="true">
+                  <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.25"
+                       stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M3 8l3.5 3.5L13 5"/>
+                  </svg>
+                </span>
+              }
+            </button>
+          }
+          @if (options().length === 0) {
+            <div class="ui-select__empty">Aucune option disponible</div>
+          }
+        </div>
+      }
+    </div>
+  `, styles: [".ui-select{position:relative;display:inline-block;width:100%}.ui-select--disabled{opacity:.5;cursor:not-allowed}.ui-select__trigger{display:inline-flex;align-items:center;gap:.375rem;width:100%;border-radius:var(--radius-md);font-family:var(--font-sans);font-weight:var(--font-medium);cursor:pointer;outline:none;transition:background-color var(--transition-colors),border-color var(--transition-colors),box-shadow var(--transition-colors);text-align:left;white-space:nowrap;overflow:hidden}.ui-select__trigger--xs{height:var(--size-xs);padding:0 8px;font-size:var(--text-xs)}.ui-select__trigger--sm{height:var(--size-sm);padding:0 10px;font-size:var(--text-xs)}.ui-select__trigger--md{height:var(--size-md);padding:0 10px;font-size:var(--text-sm)}.ui-select__trigger--lg{height:var(--size-lg);padding:0 12px;font-size:var(--text-sm)}.ui-select__trigger--xl{height:var(--size-xl);padding:0 12px;font-size:var(--text-md)}.ui-select__trigger--outline.ui-select__trigger--neutral{background:var(--color-bg);border:1px solid var(--color-border);color:var(--color-text)}.ui-select__trigger--outline.ui-select__trigger--neutral:hover:not(:disabled){border-color:var(--color-neutral-400)}.ui-select__trigger--outline.ui-select__trigger--neutral:focus-visible{border-color:var(--color-primary-500);box-shadow:0 0 0 1px var(--color-primary-500)}.ui-select__trigger--soft.ui-select__trigger--neutral{background:var(--color-neutral-100);border:1px solid transparent;color:var(--color-text)}.ui-select__trigger--soft.ui-select__trigger--neutral:hover:not(:disabled){background:var(--color-neutral-200)}.ui-select__trigger--soft.ui-select__trigger--neutral:focus-visible{box-shadow:0 0 0 2px var(--color-primary-500)}.ui-select__trigger--subtle.ui-select__trigger--neutral{background:transparent;border:1px solid transparent;color:var(--color-text)}.ui-select__trigger--subtle.ui-select__trigger--neutral:hover:not(:disabled){background:var(--color-neutral-100)}.ui-select__trigger--subtle.ui-select__trigger--neutral:focus-visible{box-shadow:0 0 0 2px var(--color-primary-500)}.ui-select__trigger--ghost.ui-select__trigger--neutral{background:transparent;border:1px solid transparent;color:var(--color-text)}.ui-select__trigger--ghost.ui-select__trigger--neutral:hover:not(:disabled){background:var(--color-neutral-100)}.ui-select__trigger--ghost.ui-select__trigger--neutral:focus-visible{box-shadow:0 0 0 2px var(--color-primary-500)}.ui-select__trigger--none.ui-select__trigger--neutral{background:transparent;border:none;color:var(--color-text)}.ui-select__trigger--outline.ui-select__trigger--primary{background:var(--color-bg);border:1px solid var(--color-primary-500);color:var(--color-primary-600)}.ui-select__trigger--outline.ui-select__trigger--primary:hover:not(:disabled){border-color:var(--color-primary-600);background:color-mix(in srgb,var(--color-primary-500) 5%,transparent)}.ui-select__trigger--outline.ui-select__trigger--primary:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary-500) 30%,transparent)}.ui-select__trigger--soft.ui-select__trigger--primary{background:color-mix(in srgb,var(--color-primary-500) 10%,transparent);border:1px solid transparent;color:var(--color-primary-600)}.ui-select__trigger--soft.ui-select__trigger--primary:hover:not(:disabled){background:color-mix(in srgb,var(--color-primary-500) 15%,transparent)}.ui-select__trigger--soft.ui-select__trigger--primary:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary-500) 40%,transparent)}.ui-select__trigger--outline.ui-select__trigger--error{background:var(--color-bg);border:1px solid var(--color-error-500);color:var(--color-error-600)}.ui-select__trigger--outline.ui-select__trigger--error:hover:not(:disabled){background:color-mix(in srgb,var(--color-error-500) 5%,transparent)}.ui-select__trigger--outline.ui-select__trigger--error:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-error-500) 30%,transparent)}.ui-select__trigger--soft.ui-select__trigger--error{background:color-mix(in srgb,var(--color-error-500) 10%,transparent);border:1px solid transparent;color:var(--color-error-700)}.ui-select__trigger--soft.ui-select__trigger--error:hover:not(:disabled){background:color-mix(in srgb,var(--color-error-500) 15%,transparent)}.ui-select__trigger--soft.ui-select__trigger--error:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-error-500) 40%,transparent)}.ui-select__trigger--outline.ui-select__trigger--warning{background:var(--color-bg);border:1px solid var(--color-warning-500);color:var(--color-warning-600)}.ui-select__trigger--outline.ui-select__trigger--warning:hover:not(:disabled){background:color-mix(in srgb,var(--color-warning-500) 5%,transparent)}.ui-select__trigger--outline.ui-select__trigger--warning:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-warning-500) 30%,transparent)}.ui-select__trigger--soft.ui-select__trigger--warning{background:color-mix(in srgb,var(--color-warning-500) 10%,transparent);border:1px solid transparent;color:var(--color-warning-700)}.ui-select__trigger--soft.ui-select__trigger--warning:hover:not(:disabled){background:color-mix(in srgb,var(--color-warning-500) 15%,transparent)}.ui-select__trigger--soft.ui-select__trigger--warning:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-warning-500) 40%,transparent)}.ui-select__trigger--outline.ui-select__trigger--success{background:var(--color-bg);border:1px solid var(--color-success-500);color:var(--color-success-600)}.ui-select__trigger--outline.ui-select__trigger--success:hover:not(:disabled){background:color-mix(in srgb,var(--color-success-500) 5%,transparent)}.ui-select__trigger--outline.ui-select__trigger--success:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-success-500) 30%,transparent)}.ui-select__trigger--soft.ui-select__trigger--success{background:color-mix(in srgb,var(--color-success-500) 10%,transparent);border:1px solid transparent;color:var(--color-success-700)}.ui-select__trigger--soft.ui-select__trigger--success:hover:not(:disabled){background:color-mix(in srgb,var(--color-success-500) 15%,transparent)}.ui-select__trigger--soft.ui-select__trigger--success:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-success-500) 40%,transparent)}.ui-select__trigger--outline.ui-select__trigger--info{background:var(--color-bg);border:1px solid var(--color-info-500);color:var(--color-info-600)}.ui-select__trigger--outline.ui-select__trigger--info:hover:not(:disabled){background:color-mix(in srgb,var(--color-info-500) 5%,transparent)}.ui-select__trigger--outline.ui-select__trigger--info:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-info-500) 30%,transparent)}.ui-select__trigger--soft.ui-select__trigger--info{background:color-mix(in srgb,var(--color-info-500) 10%,transparent);border:1px solid transparent;color:var(--color-info-700)}.ui-select__trigger--soft.ui-select__trigger--info:hover:not(:disabled){background:color-mix(in srgb,var(--color-info-500) 15%,transparent)}.ui-select__trigger--soft.ui-select__trigger--info:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-info-500) 40%,transparent)}.ui-select__trigger--outline.ui-select__trigger--secondary{background:var(--color-bg);border:1px solid var(--color-secondary-500);color:var(--color-secondary-600)}.ui-select__trigger--outline.ui-select__trigger--secondary:hover:not(:disabled){background:color-mix(in srgb,var(--color-secondary-500) 5%,transparent)}.ui-select__trigger--outline.ui-select__trigger--secondary:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-secondary-500) 30%,transparent)}.ui-select__trigger--soft.ui-select__trigger--secondary{background:color-mix(in srgb,var(--color-secondary-500) 10%,transparent);border:1px solid transparent;color:var(--color-secondary-700)}.ui-select__trigger--soft.ui-select__trigger--secondary:hover:not(:disabled){background:color-mix(in srgb,var(--color-secondary-500) 15%,transparent)}.ui-select__trigger--soft.ui-select__trigger--secondary:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-secondary-500) 40%,transparent)}.ui-select--open .ui-select__trigger--outline{border-color:var(--color-primary-500)}.ui-select__trigger:disabled{cursor:not-allowed}.ui-select__leading{display:flex;align-items:center;flex-shrink:0;color:var(--color-text-muted);width:1rem;height:1rem}.ui-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-select__value--placeholder{color:var(--color-text-muted)}.ui-select__chevron{display:flex;align-items:center;flex-shrink:0;color:var(--color-text-muted);width:1rem;height:1rem;transition:transform .15s ease}.ui-select__chevron svg{width:100%;height:100%}.ui-select__chevron--open{transform:rotate(180deg)}.ui-select__spinner{display:inline-flex;align-items:center}.ui-select__spinner svg{width:1em;height:1em;animation:ui-spin .75s linear infinite}@keyframes ui-spin{to{transform:rotate(360deg)}}.ui-select__panel{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:var(--z-dropdown, 50);min-width:100%;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1));padding:4px;overflow:hidden;overflow-y:auto;max-height:240px;transform-origin:top center}.ui-select__option{display:flex;align-items:center;gap:.5rem;width:100%;padding:6px 8px;border-radius:calc(var(--radius-md) - 2px);font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--font-normal);color:var(--color-text);background:transparent;border:none;cursor:pointer;text-align:left;transition:background-color .1s ease}.ui-select__option:hover:not(:disabled),.ui-select__option--highlighted:not(:disabled){background:var(--color-neutral-100)}.ui-select__option--selected{color:var(--color-primary-600);font-weight:var(--font-medium);background:color-mix(in srgb,var(--color-primary-500) 8%,transparent)}.ui-select__option--selected:hover,.ui-select__option--selected.ui-select__option--highlighted{background:color-mix(in srgb,var(--color-primary-500) 12%,transparent)}.ui-select__option--disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.ui-select__option-icon{flex-shrink:0;font-size:1rem;line-height:1}.ui-select__option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-select__option-check{flex-shrink:0;width:1rem;height:1rem;color:var(--color-primary-500);display:flex;align-items:center}.ui-select__option-check svg{width:100%;height:100%}.ui-select__empty{padding:12px 8px;text-align:center;font-size:var(--text-sm);color:var(--color-text-muted)}[data-theme=dark] .ui-select__trigger--outline.ui-select__trigger--neutral{background:var(--color-neutral-900);border-color:var(--color-neutral-700)}[data-theme=dark] .ui-select__trigger--outline.ui-select__trigger--neutral:hover:not(:disabled){border-color:var(--color-neutral-500)}[data-theme=dark] .ui-select__trigger--soft.ui-select__trigger--neutral{background:var(--color-neutral-800)}[data-theme=dark] .ui-select__panel{background:var(--color-neutral-900);border-color:var(--color-neutral-700)}[data-theme=dark] .ui-select__option:hover:not(:disabled),[data-theme=dark] .ui-select__option--highlighted:not(:disabled){background:var(--color-neutral-800)}[data-theme=dark] .ui-select__option--selected{background:color-mix(in srgb,var(--color-primary-500) 12%,transparent)}\n"] }]
+        }], propDecorators: { triggerEl: [{
+                type: ViewChild,
+                args: ['triggerEl']
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+/**
+ * Tabs Molecule — Source: Nuxt UI v3 ❖ Tabs
+ * Tabbed navigation with pill, link and underline variants
+ */
+class TabsComponent {
+    constructor() {
+        this.items = input.required();
+        this.variant = input('pill');
+        this.size = input('md');
+        this.activeId = model('');
+    }
+    select(id) { this.activeId.set(id); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TabsComponent, isStandalone: true, selector: "ui-tabs", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, activeId: { classPropertyName: "activeId", publicName: "activeId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeId: "activeIdChange" }, ngImport: i0, template: `
+    <div class="ui-tabs ui-tabs--{{ variant() }} ui-tabs--{{ size() }}" role="tablist">
+      @for (tab of items(); track tab.id) {
+        <button
+          role="tab"
+          type="button"
+          [class]="'ui-tabs__tab' + (activeId() === tab.id ? ' ui-tabs__tab--active' : '') + (tab.disabled ? ' ui-tabs__tab--disabled' : '')"
+          [attr.aria-selected]="activeId() === tab.id"
+          [attr.aria-controls]="'panel-' + tab.id"
+          [disabled]="tab.disabled"
+          (click)="select(tab.id)"
+        >
+          {{ tab.label }}
+          @if (tab.count !== undefined) {
+            <span class="ui-tabs__count">{{ tab.count }}</span>
+          }
+        </button>
+      }
+    </div>
+    <div class="ui-tabs__panels">
+      <ng-content />
+    </div>
+  `, isInline: true, styles: [".ui-tabs{display:flex;align-items:center;gap:var(--spacing-1);overflow-x:auto}.ui-tabs--xs .ui-tabs__tab{height:var(--size-xs);padding:0 8px;font-size:var(--text-xs)}.ui-tabs--sm .ui-tabs__tab{height:var(--size-sm);padding:0 10px;font-size:var(--text-xs)}.ui-tabs--md .ui-tabs__tab{height:var(--size-md);padding:0 12px;font-size:var(--text-sm)}.ui-tabs--lg .ui-tabs__tab{height:var(--size-lg);padding:0 14px;font-size:var(--text-sm)}.ui-tabs--xl .ui-tabs__tab{height:var(--size-xl);padding:0 16px;font-size:var(--text-md)}.ui-tabs__tab{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2);cursor:pointer;border:none;background:transparent;font-family:var(--font-sans);font-weight:var(--font-medium);color:var(--color-text-muted);border-radius:var(--radius-md);white-space:nowrap;transition:var(--transition-colors)}.ui-tabs__tab:hover:not(.ui-tabs__tab--disabled){color:var(--color-text)}.ui-tabs__tab--disabled{opacity:.5;cursor:not-allowed}.ui-tabs__count{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;padding:0 .25rem;border-radius:var(--radius-full);font-size:.75em;background:var(--color-neutral-100);color:var(--color-text-muted)}.ui-tabs--pill .ui-tabs__tab--active{background:var(--color-primary-500);color:#fff}.ui-tabs--pill .ui-tabs__tab--active .ui-tabs__count{background:#ffffff4d;color:#fff}.ui-tabs--link .ui-tabs__tab--active{color:var(--color-primary-500);font-weight:var(--font-semibold)}.ui-tabs--underline{border-bottom:1px solid var(--color-border);border-radius:0;gap:0}.ui-tabs--underline .ui-tabs__tab{border-radius:0;border-bottom:2px solid transparent;margin-bottom:-1px}.ui-tabs--underline .ui-tabs__tab--active{color:var(--color-primary-500);border-bottom-color:var(--color-primary-500)}.ui-tabs__panels{margin-top:var(--spacing-4)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-tabs', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="ui-tabs ui-tabs--{{ variant() }} ui-tabs--{{ size() }}" role="tablist">
+      @for (tab of items(); track tab.id) {
+        <button
+          role="tab"
+          type="button"
+          [class]="'ui-tabs__tab' + (activeId() === tab.id ? ' ui-tabs__tab--active' : '') + (tab.disabled ? ' ui-tabs__tab--disabled' : '')"
+          [attr.aria-selected]="activeId() === tab.id"
+          [attr.aria-controls]="'panel-' + tab.id"
+          [disabled]="tab.disabled"
+          (click)="select(tab.id)"
+        >
+          {{ tab.label }}
+          @if (tab.count !== undefined) {
+            <span class="ui-tabs__count">{{ tab.count }}</span>
+          }
+        </button>
+      }
+    </div>
+    <div class="ui-tabs__panels">
+      <ng-content />
+    </div>
+  `, styles: [".ui-tabs{display:flex;align-items:center;gap:var(--spacing-1);overflow-x:auto}.ui-tabs--xs .ui-tabs__tab{height:var(--size-xs);padding:0 8px;font-size:var(--text-xs)}.ui-tabs--sm .ui-tabs__tab{height:var(--size-sm);padding:0 10px;font-size:var(--text-xs)}.ui-tabs--md .ui-tabs__tab{height:var(--size-md);padding:0 12px;font-size:var(--text-sm)}.ui-tabs--lg .ui-tabs__tab{height:var(--size-lg);padding:0 14px;font-size:var(--text-sm)}.ui-tabs--xl .ui-tabs__tab{height:var(--size-xl);padding:0 16px;font-size:var(--text-md)}.ui-tabs__tab{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2);cursor:pointer;border:none;background:transparent;font-family:var(--font-sans);font-weight:var(--font-medium);color:var(--color-text-muted);border-radius:var(--radius-md);white-space:nowrap;transition:var(--transition-colors)}.ui-tabs__tab:hover:not(.ui-tabs__tab--disabled){color:var(--color-text)}.ui-tabs__tab--disabled{opacity:.5;cursor:not-allowed}.ui-tabs__count{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;padding:0 .25rem;border-radius:var(--radius-full);font-size:.75em;background:var(--color-neutral-100);color:var(--color-text-muted)}.ui-tabs--pill .ui-tabs__tab--active{background:var(--color-primary-500);color:#fff}.ui-tabs--pill .ui-tabs__tab--active .ui-tabs__count{background:#ffffff4d;color:#fff}.ui-tabs--link .ui-tabs__tab--active{color:var(--color-primary-500);font-weight:var(--font-semibold)}.ui-tabs--underline{border-bottom:1px solid var(--color-border);border-radius:0;gap:0}.ui-tabs--underline .ui-tabs__tab{border-radius:0;border-bottom:2px solid transparent;margin-bottom:-1px}.ui-tabs--underline .ui-tabs__tab--active{color:var(--color-primary-500);border-bottom-color:var(--color-primary-500)}.ui-tabs__panels{margin-top:var(--spacing-4)}\n"] }]
+        }] });
+
+/**
+ * Textarea Molecule — Source: Nuxt UI v3 ❖ Textarea
+ * Multi-line text input with auto-resize support
+ */
+class TextareaComponent {
+    constructor() {
+        this.placeholder = input('');
+        this.size = input('md');
+        this.rows = input(4);
+        this.disabled = input(false);
+        this.readonly = input(false);
+        this.autoResize = input(false);
+        this.ariaLabel = input(null);
+        this.value = model('');
+        this._onChange = () => { };
+        this.onTouched = () => { };
+    }
+    onInput(e) {
+        const el = e.target;
+        this.value.set(el.value);
+        this._onChange(el.value);
+    }
+    writeValue(v) { this.value.set(v ?? ''); }
+    registerOnChange(fn) { this._onChange = fn; }
+    registerOnTouched(fn) { this.onTouched = fn; }
+    setDisabledState(_) { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.20", type: TextareaComponent, isStandalone: true, selector: "ui-textarea", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, autoResize: { classPropertyName: "autoResize", publicName: "autoResize", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TextareaComponent), multi: true }], ngImport: i0, template: `
+    <textarea
+      [class]="'ui-textarea ui-textarea--' + size()"
+      [placeholder]="placeholder()"
+      [disabled]="disabled()"
+      [readonly]="readonly()"
+      [rows]="rows()"
+      [attr.aria-label]="ariaLabel() ?? null"
+      (input)="onInput($event)"
+      (blur)="onTouched()"
+    >{{ value() }}</textarea>
+  `, isInline: true, styles: [".ui-textarea{width:100%;display:block;font-family:var(--font-sans);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-text);resize:vertical;outline:none;transition:var(--transition-colors)}.ui-textarea::placeholder{color:var(--color-text-subtle)}.ui-textarea:focus{border-color:var(--color-primary-500);box-shadow:0 0 0 1px var(--color-primary-500)}.ui-textarea:disabled{opacity:.5;cursor:not-allowed;resize:none}.ui-textarea--xs{padding:6px 8px;font-size:var(--text-xs)}.ui-textarea--sm{padding:8px 10px;font-size:var(--text-xs)}.ui-textarea--md{padding:8px 10px;font-size:var(--text-sm)}.ui-textarea--lg{padding:10px 12px;font-size:var(--text-sm)}.ui-textarea--xl{padding:10px 12px;font-size:var(--text-md)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TextareaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-textarea', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TextareaComponent), multi: true }], template: `
+    <textarea
+      [class]="'ui-textarea ui-textarea--' + size()"
+      [placeholder]="placeholder()"
+      [disabled]="disabled()"
+      [readonly]="readonly()"
+      [rows]="rows()"
+      [attr.aria-label]="ariaLabel() ?? null"
+      (input)="onInput($event)"
+      (blur)="onTouched()"
+    >{{ value() }}</textarea>
+  `, styles: [".ui-textarea{width:100%;display:block;font-family:var(--font-sans);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-text);resize:vertical;outline:none;transition:var(--transition-colors)}.ui-textarea::placeholder{color:var(--color-text-subtle)}.ui-textarea:focus{border-color:var(--color-primary-500);box-shadow:0 0 0 1px var(--color-primary-500)}.ui-textarea:disabled{opacity:.5;cursor:not-allowed;resize:none}.ui-textarea--xs{padding:6px 8px;font-size:var(--text-xs)}.ui-textarea--sm{padding:8px 10px;font-size:var(--text-xs)}.ui-textarea--md{padding:8px 10px;font-size:var(--text-sm)}.ui-textarea--lg{padding:10px 12px;font-size:var(--text-sm)}.ui-textarea--xl{padding:10px 12px;font-size:var(--text-md)}\n"] }]
+        }] });
+
+/**
+ * Toast Molecule — Source: Nuxt UI v3 ❖ Toast
+ * Transient notification with auto-close
+ */
+class ToastComponent {
+    constructor() {
+        this.variant = input('soft');
+        this.color = input('neutral');
+        this.title = input(null);
+        this.description = input(null);
+        this.icon = input(false);
+        this.closable = input(true);
+        this.close = output();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ToastComponent, isStandalone: true, selector: "ui-toast", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, ngImport: i0, template: `
+    <div
+      [class]="'ui-toast ui-toast--' + variant() + ' ui-toast--' + color()"
+      role="status"
+      aria-live="polite"
+      aria-atomic="true"
+    >
+      @if (icon()) {
+        <span class="ui-toast__icon" aria-hidden="true">
+          <ng-content select="[slot=icon]" />
+        </span>
+      }
+      <div class="ui-toast__body">
+        @if (title()) {
+          <p class="ui-toast__title">{{ title() }}</p>
+        }
+        @if (description()) {
+          <p class="ui-toast__description">{{ description() }}</p>
+        }
+        <ng-content />
+      </div>
+      @if (closable()) {
+        <button type="button" class="ui-toast__close" aria-label="Dismiss" (click)="close.emit()">×</button>
+      }
+    </div>
+  `, isInline: true, styles: [".ui-toast{display:flex;align-items:flex-start;gap:var(--spacing-3);padding:var(--spacing-3) var(--spacing-4);border-radius:var(--radius-lg);border:1px solid transparent;box-shadow:var(--shadow-lg);min-width:280px;max-width:480px;background:var(--color-bg);pointer-events:auto}.ui-toast__icon{flex-shrink:0;width:1.25rem;height:1.25rem}.ui-toast__body{flex:1;min-width:0}.ui-toast__title{font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-text);margin:0}.ui-toast__description{font-family:var(--font-sans);font-size:var(--text-xs);color:var(--color-text-muted);margin:var(--spacing-0-5) 0 0}.ui-toast__close{flex-shrink:0;cursor:pointer;border:none;background:transparent;font-size:1.25rem;color:var(--color-text-muted);line-height:1;padding:0}.ui-toast__close:hover{color:var(--color-text)}.ui-toast--success{border-color:var(--color-success-200)}.ui-toast--error{border-color:var(--color-error-200)}.ui-toast--warning{border-color:var(--color-warning-200)}.ui-toast--info{border-color:var(--color-info-200)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ToastComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-toast', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div
+      [class]="'ui-toast ui-toast--' + variant() + ' ui-toast--' + color()"
+      role="status"
+      aria-live="polite"
+      aria-atomic="true"
+    >
+      @if (icon()) {
+        <span class="ui-toast__icon" aria-hidden="true">
+          <ng-content select="[slot=icon]" />
+        </span>
+      }
+      <div class="ui-toast__body">
+        @if (title()) {
+          <p class="ui-toast__title">{{ title() }}</p>
+        }
+        @if (description()) {
+          <p class="ui-toast__description">{{ description() }}</p>
+        }
+        <ng-content />
+      </div>
+      @if (closable()) {
+        <button type="button" class="ui-toast__close" aria-label="Dismiss" (click)="close.emit()">×</button>
+      }
+    </div>
+  `, styles: [".ui-toast{display:flex;align-items:flex-start;gap:var(--spacing-3);padding:var(--spacing-3) var(--spacing-4);border-radius:var(--radius-lg);border:1px solid transparent;box-shadow:var(--shadow-lg);min-width:280px;max-width:480px;background:var(--color-bg);pointer-events:auto}.ui-toast__icon{flex-shrink:0;width:1.25rem;height:1.25rem}.ui-toast__body{flex:1;min-width:0}.ui-toast__title{font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-text);margin:0}.ui-toast__description{font-family:var(--font-sans);font-size:var(--text-xs);color:var(--color-text-muted);margin:var(--spacing-0-5) 0 0}.ui-toast__close{flex-shrink:0;cursor:pointer;border:none;background:transparent;font-size:1.25rem;color:var(--color-text-muted);line-height:1;padding:0}.ui-toast__close:hover{color:var(--color-text)}.ui-toast--success{border-color:var(--color-success-200)}.ui-toast--error{border-color:var(--color-error-200)}.ui-toast--warning{border-color:var(--color-warning-200)}.ui-toast--info{border-color:var(--color-info-200)}\n"] }]
+        }] });
+
+/**
+ * SelectSearch Molecule — Source: Nuxt UI v3 ❖ SelectMenu / Combobox
+ *
+ * Extension du Select avec un input de recherche intégré dans le panel :
+ * - Filtre les options en temps réel (case-insensitive)
+ * - Highlight du terme recherché dans les labels
+ * - "Aucun résultat" si aucune option trouvée
+ * - Clavier : ↑↓ navigue, Enter sélectionne, Escape ferme, Tab ferme
+ * - Focus automatique sur l'input à l'ouverture
+ * - Même API / variants / couleurs / tailles que SelectComponent
+ * - Compatible ControlValueAccessor
+ *
+ * @example
+ * <ui-select-search [options]="pays" placeholder="Rechercher un pays..." />
+ * <ui-select-search [(value)]="val" variant="soft" color="primary" />
+ */
+class SelectSearchComponent {
+    constructor() {
+        // ── Inputs ───────────────────────────────────────────────
+        this.options = input.required();
+        this.placeholder = input(null);
+        this.searchPlaceholder = input('Rechercher...');
+        this.emptyLabel = input('Aucun résultat');
+        this.size = input('md');
+        this.variant = input('outline');
+        this.color = input('neutral');
+        this.disabled = input(false);
+        this.loading = input(false);
+        this.leadingIcon = input(false);
+        this.ariaLabel = input(null);
+        // ── Two-way binding ──────────────────────────────────────
+        this.value = model('');
+        this.change = output();
+        // ── Internal state ───────────────────────────────────────
+        this.isOpen = signal(false);
+        this.activeIndex = signal(-1);
+        this.query = signal('');
+        this.selectedOption = computed(() => this.options().find(o => String(o.value) === String(this.value())));
+        this.filteredOptions = computed(() => {
+            const q = this.query().trim().toLowerCase();
+            if (!q)
+                return this.options();
+            return this.options().filter(o => o.label.toLowerCase().includes(q));
+        });
+        this.triggerClasses = computed(() => ['ui-select-search__trigger',
+            `ui-select-search__trigger--${this.size()}`,
+            `ui-select-search__trigger--${this.variant()}`,
+            `ui-select-search__trigger--${this.color()}`
+        ].join(' '));
+        // ── CVA ──────────────────────────────────────────────────
+        this._onChange = () => { };
+        this._onTouched = () => { };
+    }
+    isSelected(opt) {
+        return String(opt.value) === String(this.value());
+    }
+    /** Entoure le terme recherché dans le label avec <mark> */
+    highlight(label) {
+        const q = this.query().trim();
+        if (!q)
+            return label;
+        const escaped = q.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        return label.replace(new RegExp(`(${escaped})`, 'gi'), '<mark class="ui-select-search__highlight">$1</mark>');
+    }
+    writeValue(v) { this.value.set(v ?? ''); }
+    registerOnChange(fn) { this._onChange = fn; }
+    registerOnTouched(fn) { this._onTouched = fn; }
+    setDisabledState(_) { }
+    ngAfterViewInit() { }
+    // ── Actions ──────────────────────────────────────────────
+    toggleOpen() {
+        if (this.disabled() || this.loading())
+            return;
+        this.isOpen.update(v => !v);
+        if (this.isOpen()) {
+            this.query.set('');
+            const idx = this.filteredOptions().findIndex(o => this.isSelected(o));
+            this.activeIndex.set(idx >= 0 ? idx : 0);
+            // Focus search input after animation
+            setTimeout(() => this.searchInput?.nativeElement.focus(), 60);
+        }
+    }
+    selectOption(opt) {
+        if (opt.disabled)
+            return;
+        const val = String(opt.value);
+        this.value.set(val);
+        this._onChange(val);
+        this._onTouched();
+        this.change.emit(opt);
+        this.isOpen.set(false);
+        this.query.set('');
+        this.triggerEl?.nativeElement.focus();
+    }
+    clearQuery() {
+        this.query.set('');
+        this.activeIndex.set(0);
+        this.searchInput?.nativeElement.focus();
+    }
+    // ── Keyboard — trigger ───────────────────────────────────
+    onTriggerKeydown(event) {
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                this.toggleOpen();
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                this.toggleOpen();
+                break;
+            case 'Escape':
+                this.isOpen.set(false);
+                break;
+        }
+    }
+    // ── Keyboard — search input ──────────────────────────────
+    onSearchKeydown(event) {
+        const opts = this.filteredOptions();
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.activeIndex.update(i => {
+                    let n = i + 1;
+                    while (n < opts.length && opts[n]?.disabled)
+                        n++;
+                    return Math.min(n, opts.length - 1);
+                });
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.activeIndex.update(i => {
+                    let n = i - 1;
+                    while (n >= 0 && opts[n]?.disabled)
+                        n--;
+                    return Math.max(n, 0);
+                });
+                break;
+            case 'Enter':
+                event.preventDefault();
+                const opt = opts[this.activeIndex()];
+                if (opt && !opt.disabled)
+                    this.selectOption(opt);
+                break;
+            case 'Escape':
+            case 'Tab':
+                this.isOpen.set(false);
+                this.triggerEl?.nativeElement.focus();
+                break;
+        }
+    }
+    // ── Close on outside click ───────────────────────────────
+    onDocumentClick(event) {
+        if (this.isOpen() && !event.target.closest('ui-select-search')) {
+            this.isOpen.set(false);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SelectSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: SelectSearchComponent, isStandalone: true, selector: "ui-select-search", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyLabel: { classPropertyName: "emptyLabel", publicName: "emptyLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, leadingIcon: { classPropertyName: "leadingIcon", publicName: "leadingIcon", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", change: "change" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [{
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SelectSearchComponent),
+                multi: true,
+            }], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: `
+    <div
+      class="ui-select-search"
+      [class.ui-select-search--open]="isOpen()"
+      [class.ui-select-search--disabled]="disabled()"
+    >
+      <!-- ── Trigger ──────────────────────────────────────── -->
+      <button
+        #triggerEl
+        type="button"
+        [class]="triggerClasses()"
+        [disabled]="disabled() || loading()"
+        [attr.aria-haspopup]="'listbox'"
+        [attr.aria-expanded]="isOpen()"
+        [attr.aria-label]="ariaLabel() ?? null"
+        (click)="toggleOpen(); $event.stopPropagation()"
+        (keydown)="onTriggerKeydown($event)"
+      >
+        @if (leadingIcon()) {
+          <span class="ui-select-search__leading" aria-hidden="true">
+            <ng-content select="[slot=leading]" />
+          </span>
+        }
+
+        <span
+          class="ui-select-search__value"
+          [class.ui-select-search__value--placeholder]="!selectedOption()"
+        >
+          @if (loading()) {
+            <span class="ui-select-search__spinner" aria-hidden="true">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <circle cx="12" cy="12" r="10" stroke-opacity="0.25"/>
+                <path d="M12 2a10 10 0 0 1 10 10" stroke-linecap="round"/>
+              </svg>
+            </span>
+          } @else {
+            {{ selectedOption()?.label ?? placeholder() ?? 'Sélectionner...' }}
+          }
+        </span>
+
+        <span
+          class="ui-select-search__chevron"
+          [class.ui-select-search__chevron--open]="isOpen()"
+          aria-hidden="true"
+        >
+          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor"
+               stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M4 6l4 4 4-4"/>
+          </svg>
+        </span>
+      </button>
+
+      <!-- ── Dropdown panel ───────────────────────────────── -->
+      @if (isOpen()) {
+        <div [@dropdown] class="ui-select-search__panel" (click)="$event.stopPropagation()">
+
+          <!-- Search input -->
+          <div class="ui-select-search__search-wrap">
+            <span class="ui-select-search__search-icon" aria-hidden="true">
+              <svg viewBox="0 0 16 16" fill="none" stroke="currentColor"
+                   stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="6.5" cy="6.5" r="4"/>
+                <path d="M10 10l3 3"/>
+              </svg>
+            </span>
+            <input
+              #searchInput
+              type="text"
+              class="ui-select-search__input"
+              [placeholder]="searchPlaceholder()"
+              [ngModel]="query()"
+              (ngModelChange)="query.set($event); activeIndex.set(0)"
+              (keydown)="onSearchKeydown($event)"
+              aria-label="Rechercher"
+              autocomplete="off"
+              spellcheck="false"
+            />
+            @if (query()) {
+              <button
+                type="button"
+                class="ui-select-search__clear"
+                (click)="clearQuery()"
+                aria-label="Effacer la recherche"
+              >
+                <svg viewBox="0 0 16 16" fill="none" stroke="currentColor"
+                     stroke-width="2" stroke-linecap="round">
+                  <path d="M4 4l8 8M12 4l-8 8"/>
+                </svg>
+              </button>
+            }
+          </div>
+
+          <!-- Options list -->
+          <div
+            class="ui-select-search__options"
+            role="listbox"
+            [attr.aria-label]="ariaLabel() ?? 'Options'"
+          >
+            @for (opt of filteredOptions(); track opt.value; let i = $index) {
+              <button
+                type="button"
+                class="ui-select-search__option"
+                role="option"
+                [class.ui-select-search__option--selected]="isSelected(opt)"
+                [class.ui-select-search__option--highlighted]="activeIndex() === i"
+                [class.ui-select-search__option--disabled]="opt.disabled"
+                [attr.aria-selected]="isSelected(opt)"
+                [disabled]="opt.disabled"
+                (click)="selectOption(opt)"
+                (mouseenter)="activeIndex.set(i)"
+              >
+                @if (opt.icon) {
+                  <span class="ui-select-search__option-icon" aria-hidden="true">{{ opt.icon }}</span>
+                }
+                <!-- Highlighted label -->
+                <span
+                  class="ui-select-search__option-label"
+                  [innerHTML]="highlight(opt.label)"
+                ></span>
+
+                @if (isSelected(opt)) {
+                  <span class="ui-select-search__option-check" aria-hidden="true">
+                    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor"
+                         stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round">
+                      <path d="M3 8l3.5 3.5L13 5"/>
+                    </svg>
+                  </span>
+                }
+              </button>
+            }
+
+            @if (filteredOptions().length === 0) {
+              <div class="ui-select-search__empty">
+                <svg viewBox="0 0 20 20" fill="none" stroke="currentColor"
+                     stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                  <circle cx="10" cy="10" r="8"/>
+                  <path d="M10 6v5M10 14h.01"/>
+                </svg>
+                <span>{{ emptyLabel() }}</span>
+              </div>
+            }
+          </div>
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [".ui-select-search{position:relative;display:inline-block;width:100%}.ui-select-search--disabled{opacity:.5;cursor:not-allowed}.ui-select-search__trigger{display:inline-flex;align-items:center;gap:.375rem;width:100%;border-radius:var(--radius-md);font-family:var(--font-sans);font-weight:var(--font-medium);cursor:pointer;outline:none;transition:background-color var(--transition-colors),border-color var(--transition-colors),box-shadow var(--transition-colors);text-align:left;white-space:nowrap;overflow:hidden}.ui-select-search__trigger--xs{height:var(--size-xs);padding:0 8px;font-size:var(--text-xs)}.ui-select-search__trigger--sm{height:var(--size-sm);padding:0 10px;font-size:var(--text-xs)}.ui-select-search__trigger--md{height:var(--size-md);padding:0 10px;font-size:var(--text-sm)}.ui-select-search__trigger--lg{height:var(--size-lg);padding:0 12px;font-size:var(--text-sm)}.ui-select-search__trigger--xl{height:var(--size-xl);padding:0 12px;font-size:var(--text-md)}.ui-select-search__trigger--outline.ui-select-search__trigger--neutral{background:var(--color-bg);border:1px solid var(--color-border);color:var(--color-text)}.ui-select-search__trigger--outline.ui-select-search__trigger--neutral:hover:not(:disabled){border-color:var(--color-neutral-400)}.ui-select-search__trigger--outline.ui-select-search__trigger--neutral:focus-visible{border-color:var(--color-primary-500);box-shadow:0 0 0 1px var(--color-primary-500)}.ui-select-search__trigger--soft.ui-select-search__trigger--neutral{background:var(--color-neutral-100);border:1px solid transparent;color:var(--color-text)}.ui-select-search__trigger--soft.ui-select-search__trigger--neutral:hover:not(:disabled){background:var(--color-neutral-200)}.ui-select-search__trigger--soft.ui-select-search__trigger--neutral:focus-visible{box-shadow:0 0 0 2px var(--color-primary-500)}.ui-select-search__trigger--subtle.ui-select-search__trigger--neutral,.ui-select-search__trigger--ghost.ui-select-search__trigger--neutral{background:transparent;border:1px solid transparent;color:var(--color-text)}.ui-select-search__trigger--subtle.ui-select-search__trigger--neutral:hover:not(:disabled),.ui-select-search__trigger--ghost.ui-select-search__trigger--neutral:hover:not(:disabled){background:var(--color-neutral-100)}.ui-select-search__trigger--subtle.ui-select-search__trigger--neutral:focus-visible,.ui-select-search__trigger--ghost.ui-select-search__trigger--neutral:focus-visible{box-shadow:0 0 0 2px var(--color-primary-500)}.ui-select-search__trigger--none.ui-select-search__trigger--neutral{background:transparent;border:none;color:var(--color-text)}.ui-select-search__trigger--outline.ui-select-search__trigger--primary{background:var(--color-bg);border:1px solid var(--color-primary-500);color:var(--color-primary-600)}.ui-select-search__trigger--outline.ui-select-search__trigger--primary:hover:not(:disabled){background:color-mix(in srgb,var(--color-primary-500) 5%,transparent)}.ui-select-search__trigger--outline.ui-select-search__trigger--primary:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary-500) 30%,transparent)}.ui-select-search__trigger--soft.ui-select-search__trigger--primary{background:color-mix(in srgb,var(--color-primary-500) 10%,transparent);border:1px solid transparent;color:var(--color-primary-600)}.ui-select-search__trigger--soft.ui-select-search__trigger--primary:hover:not(:disabled){background:color-mix(in srgb,var(--color-primary-500) 15%,transparent)}.ui-select-search__trigger--outline.ui-select-search__trigger--error{background:var(--color-bg);border:1px solid var(--color-error-500);color:var(--color-error-600)}.ui-select-search__trigger--outline.ui-select-search__trigger--error:hover:not(:disabled){background:color-mix(in srgb,var(--color-error-500) 5%,transparent)}.ui-select-search__trigger--soft.ui-select-search__trigger--error{background:color-mix(in srgb,var(--color-error-500) 10%,transparent);border:1px solid transparent;color:var(--color-error-700)}.ui-select-search__trigger--outline.ui-select-search__trigger--warning{background:var(--color-bg);border:1px solid var(--color-warning-500);color:var(--color-warning-600)}.ui-select-search__trigger--outline.ui-select-search__trigger--warning:hover:not(:disabled){background:color-mix(in srgb,var(--color-warning-500) 5%,transparent)}.ui-select-search__trigger--soft.ui-select-search__trigger--warning{background:color-mix(in srgb,var(--color-warning-500) 10%,transparent);border:1px solid transparent;color:var(--color-warning-700)}.ui-select-search__trigger--outline.ui-select-search__trigger--success{background:var(--color-bg);border:1px solid var(--color-success-500);color:var(--color-success-600)}.ui-select-search__trigger--outline.ui-select-search__trigger--success:hover:not(:disabled){background:color-mix(in srgb,var(--color-success-500) 5%,transparent)}.ui-select-search__trigger--soft.ui-select-search__trigger--success{background:color-mix(in srgb,var(--color-success-500) 10%,transparent);border:1px solid transparent;color:var(--color-success-700)}.ui-select-search__trigger--outline.ui-select-search__trigger--info{background:var(--color-bg);border:1px solid var(--color-info-500);color:var(--color-info-600)}.ui-select-search__trigger--outline.ui-select-search__trigger--info:hover:not(:disabled){background:color-mix(in srgb,var(--color-info-500) 5%,transparent)}.ui-select-search__trigger--soft.ui-select-search__trigger--info{background:color-mix(in srgb,var(--color-info-500) 10%,transparent);border:1px solid transparent;color:var(--color-info-700)}.ui-select-search__trigger--outline.ui-select-search__trigger--secondary{background:var(--color-bg);border:1px solid var(--color-secondary-500);color:var(--color-secondary-600)}.ui-select-search__trigger--outline.ui-select-search__trigger--secondary:hover:not(:disabled){background:color-mix(in srgb,var(--color-secondary-500) 5%,transparent)}.ui-select-search__trigger--soft.ui-select-search__trigger--secondary{background:color-mix(in srgb,var(--color-secondary-500) 10%,transparent);border:1px solid transparent;color:var(--color-secondary-700)}.ui-select-search--open .ui-select-search__trigger--outline{border-color:var(--color-primary-500)}.ui-select-search__trigger:disabled{cursor:not-allowed}.ui-select-search__leading{display:flex;align-items:center;flex-shrink:0;color:var(--color-text-muted);width:1rem;height:1rem}.ui-select-search__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-select-search__value--placeholder{color:var(--color-text-muted)}.ui-select-search__chevron{display:flex;align-items:center;flex-shrink:0;color:var(--color-text-muted);width:1rem;height:1rem;transition:transform .15s ease}.ui-select-search__chevron svg{width:100%;height:100%}.ui-select-search__chevron--open{transform:rotate(180deg)}.ui-select-search__spinner{display:inline-flex;align-items:center}.ui-select-search__spinner svg{width:1em;height:1em;animation:ui-spin .75s linear infinite}@keyframes ui-spin{to{transform:rotate(360deg)}}.ui-select-search__panel{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:var(--z-dropdown, 50);min-width:100%;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;overflow:hidden;transform-origin:top center}.ui-select-search__search-wrap{display:flex;align-items:center;gap:.375rem;padding:6px 8px;border-bottom:1px solid var(--color-border);background:var(--color-bg-muted, var(--color-neutral-50))}.ui-select-search__search-icon{display:flex;align-items:center;flex-shrink:0;color:var(--color-text-muted);width:14px;height:14px}.ui-select-search__search-icon svg{width:100%;height:100%}.ui-select-search__input{flex:1;border:none;background:transparent;outline:none;font-family:var(--font-sans);font-size:var(--text-sm);color:var(--color-text);min-width:0}.ui-select-search__input::placeholder{color:var(--color-text-muted)}.ui-select-search__clear{display:flex;align-items:center;flex-shrink:0;width:16px;height:16px;color:var(--color-text-muted);background:transparent;border:none;cursor:pointer;padding:0;border-radius:3px;transition:color .1s ease}.ui-select-search__clear svg{width:100%;height:100%}.ui-select-search__clear:hover{color:var(--color-text)}.ui-select-search__options{padding:4px;overflow-y:auto;max-height:200px}.ui-select-search__option{display:flex;align-items:center;gap:.5rem;width:100%;padding:6px 8px;border-radius:calc(var(--radius-md) - 2px);font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--font-normal);color:var(--color-text);background:transparent;border:none;cursor:pointer;text-align:left;transition:background-color .1s ease}.ui-select-search__option:hover:not(:disabled),.ui-select-search__option--highlighted:not(:disabled){background:var(--color-neutral-100)}.ui-select-search__option--selected{color:var(--color-primary-600);font-weight:var(--font-medium);background:color-mix(in srgb,var(--color-primary-500) 8%,transparent)}.ui-select-search__option--selected:hover,.ui-select-search__option--selected.ui-select-search__option--highlighted{background:color-mix(in srgb,var(--color-primary-500) 12%,transparent)}.ui-select-search__option--disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.ui-select-search__option-icon{flex-shrink:0;font-size:1rem;line-height:1}.ui-select-search__option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-select-search__option-check{flex-shrink:0;width:1rem;height:1rem;color:var(--color-primary-500);display:flex;align-items:center}.ui-select-search__option-check svg{width:100%;height:100%}:host ::ng-deep .ui-select-search__highlight{background:color-mix(in srgb,var(--color-primary-500) 20%,transparent);color:var(--color-primary-700);border-radius:2px;padding:0 1px;font-weight:var(--font-medium);font-style:normal}.ui-select-search__empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 16px;color:var(--color-text-muted);font-size:var(--text-sm);text-align:center}.ui-select-search__empty svg{width:20px;height:20px;opacity:.5}[data-theme=dark] .ui-select-search__trigger--outline.ui-select-search__trigger--neutral{background:var(--color-neutral-900);border-color:var(--color-neutral-700)}[data-theme=dark] .ui-select-search__trigger--outline.ui-select-search__trigger--neutral:hover:not(:disabled){border-color:var(--color-neutral-500)}[data-theme=dark] .ui-select-search__trigger--soft.ui-select-search__trigger--neutral{background:var(--color-neutral-800)}[data-theme=dark] .ui-select-search__panel{background:var(--color-neutral-900);border-color:var(--color-neutral-700)}[data-theme=dark] .ui-select-search__search-wrap{background:var(--color-neutral-800);border-color:var(--color-neutral-700)}[data-theme=dark] .ui-select-search__option:hover:not(:disabled),[data-theme=dark] .ui-select-search__option--highlighted:not(:disabled){background:var(--color-neutral-800)}[data-theme=dark] .ui-select-search__option--selected{background:color-mix(in srgb,var(--color-primary-500) 12%,transparent)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [
+            trigger('dropdown', [
+                transition(':enter', [
+                    style({ opacity: 0, transform: 'scale(0.96) translateY(-4px)' }),
+                    animate('100ms ease-out', style({ opacity: 1, transform: 'scale(1) translateY(0)' })),
+                ]),
+                transition(':leave', [
+                    animate('80ms ease-in', style({ opacity: 0, transform: 'scale(0.96) translateY(-4px)' })),
+                ]),
+            ]),
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SelectSearchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-select-search', standalone: true, imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SelectSearchComponent),
+                            multi: true,
+                        }], animations: [
+                        trigger('dropdown', [
+                            transition(':enter', [
+                                style({ opacity: 0, transform: 'scale(0.96) translateY(-4px)' }),
+                                animate('100ms ease-out', style({ opacity: 1, transform: 'scale(1) translateY(0)' })),
+                            ]),
+                            transition(':leave', [
+                                animate('80ms ease-in', style({ opacity: 0, transform: 'scale(0.96) translateY(-4px)' })),
+                            ]),
+                        ]),
+                    ], template: `
+    <div
+      class="ui-select-search"
+      [class.ui-select-search--open]="isOpen()"
+      [class.ui-select-search--disabled]="disabled()"
+    >
+      <!-- ── Trigger ──────────────────────────────────────── -->
+      <button
+        #triggerEl
+        type="button"
+        [class]="triggerClasses()"
+        [disabled]="disabled() || loading()"
+        [attr.aria-haspopup]="'listbox'"
+        [attr.aria-expanded]="isOpen()"
+        [attr.aria-label]="ariaLabel() ?? null"
+        (click)="toggleOpen(); $event.stopPropagation()"
+        (keydown)="onTriggerKeydown($event)"
+      >
+        @if (leadingIcon()) {
+          <span class="ui-select-search__leading" aria-hidden="true">
+            <ng-content select="[slot=leading]" />
+          </span>
+        }
+
+        <span
+          class="ui-select-search__value"
+          [class.ui-select-search__value--placeholder]="!selectedOption()"
+        >
+          @if (loading()) {
+            <span class="ui-select-search__spinner" aria-hidden="true">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <circle cx="12" cy="12" r="10" stroke-opacity="0.25"/>
+                <path d="M12 2a10 10 0 0 1 10 10" stroke-linecap="round"/>
+              </svg>
+            </span>
+          } @else {
+            {{ selectedOption()?.label ?? placeholder() ?? 'Sélectionner...' }}
+          }
+        </span>
+
+        <span
+          class="ui-select-search__chevron"
+          [class.ui-select-search__chevron--open]="isOpen()"
+          aria-hidden="true"
+        >
+          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor"
+               stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M4 6l4 4 4-4"/>
+          </svg>
+        </span>
+      </button>
+
+      <!-- ── Dropdown panel ───────────────────────────────── -->
+      @if (isOpen()) {
+        <div [@dropdown] class="ui-select-search__panel" (click)="$event.stopPropagation()">
+
+          <!-- Search input -->
+          <div class="ui-select-search__search-wrap">
+            <span class="ui-select-search__search-icon" aria-hidden="true">
+              <svg viewBox="0 0 16 16" fill="none" stroke="currentColor"
+                   stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="6.5" cy="6.5" r="4"/>
+                <path d="M10 10l3 3"/>
+              </svg>
+            </span>
+            <input
+              #searchInput
+              type="text"
+              class="ui-select-search__input"
+              [placeholder]="searchPlaceholder()"
+              [ngModel]="query()"
+              (ngModelChange)="query.set($event); activeIndex.set(0)"
+              (keydown)="onSearchKeydown($event)"
+              aria-label="Rechercher"
+              autocomplete="off"
+              spellcheck="false"
+            />
+            @if (query()) {
+              <button
+                type="button"
+                class="ui-select-search__clear"
+                (click)="clearQuery()"
+                aria-label="Effacer la recherche"
+              >
+                <svg viewBox="0 0 16 16" fill="none" stroke="currentColor"
+                     stroke-width="2" stroke-linecap="round">
+                  <path d="M4 4l8 8M12 4l-8 8"/>
+                </svg>
+              </button>
+            }
+          </div>
+
+          <!-- Options list -->
+          <div
+            class="ui-select-search__options"
+            role="listbox"
+            [attr.aria-label]="ariaLabel() ?? 'Options'"
+          >
+            @for (opt of filteredOptions(); track opt.value; let i = $index) {
+              <button
+                type="button"
+                class="ui-select-search__option"
+                role="option"
+                [class.ui-select-search__option--selected]="isSelected(opt)"
+                [class.ui-select-search__option--highlighted]="activeIndex() === i"
+                [class.ui-select-search__option--disabled]="opt.disabled"
+                [attr.aria-selected]="isSelected(opt)"
+                [disabled]="opt.disabled"
+                (click)="selectOption(opt)"
+                (mouseenter)="activeIndex.set(i)"
+              >
+                @if (opt.icon) {
+                  <span class="ui-select-search__option-icon" aria-hidden="true">{{ opt.icon }}</span>
+                }
+                <!-- Highlighted label -->
+                <span
+                  class="ui-select-search__option-label"
+                  [innerHTML]="highlight(opt.label)"
+                ></span>
+
+                @if (isSelected(opt)) {
+                  <span class="ui-select-search__option-check" aria-hidden="true">
+                    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor"
+                         stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round">
+                      <path d="M3 8l3.5 3.5L13 5"/>
+                    </svg>
+                  </span>
+                }
+              </button>
+            }
+
+            @if (filteredOptions().length === 0) {
+              <div class="ui-select-search__empty">
+                <svg viewBox="0 0 20 20" fill="none" stroke="currentColor"
+                     stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                  <circle cx="10" cy="10" r="8"/>
+                  <path d="M10 6v5M10 14h.01"/>
+                </svg>
+                <span>{{ emptyLabel() }}</span>
+              </div>
+            }
+          </div>
+        </div>
+      }
+    </div>
+  `, styles: [".ui-select-search{position:relative;display:inline-block;width:100%}.ui-select-search--disabled{opacity:.5;cursor:not-allowed}.ui-select-search__trigger{display:inline-flex;align-items:center;gap:.375rem;width:100%;border-radius:var(--radius-md);font-family:var(--font-sans);font-weight:var(--font-medium);cursor:pointer;outline:none;transition:background-color var(--transition-colors),border-color var(--transition-colors),box-shadow var(--transition-colors);text-align:left;white-space:nowrap;overflow:hidden}.ui-select-search__trigger--xs{height:var(--size-xs);padding:0 8px;font-size:var(--text-xs)}.ui-select-search__trigger--sm{height:var(--size-sm);padding:0 10px;font-size:var(--text-xs)}.ui-select-search__trigger--md{height:var(--size-md);padding:0 10px;font-size:var(--text-sm)}.ui-select-search__trigger--lg{height:var(--size-lg);padding:0 12px;font-size:var(--text-sm)}.ui-select-search__trigger--xl{height:var(--size-xl);padding:0 12px;font-size:var(--text-md)}.ui-select-search__trigger--outline.ui-select-search__trigger--neutral{background:var(--color-bg);border:1px solid var(--color-border);color:var(--color-text)}.ui-select-search__trigger--outline.ui-select-search__trigger--neutral:hover:not(:disabled){border-color:var(--color-neutral-400)}.ui-select-search__trigger--outline.ui-select-search__trigger--neutral:focus-visible{border-color:var(--color-primary-500);box-shadow:0 0 0 1px var(--color-primary-500)}.ui-select-search__trigger--soft.ui-select-search__trigger--neutral{background:var(--color-neutral-100);border:1px solid transparent;color:var(--color-text)}.ui-select-search__trigger--soft.ui-select-search__trigger--neutral:hover:not(:disabled){background:var(--color-neutral-200)}.ui-select-search__trigger--soft.ui-select-search__trigger--neutral:focus-visible{box-shadow:0 0 0 2px var(--color-primary-500)}.ui-select-search__trigger--subtle.ui-select-search__trigger--neutral,.ui-select-search__trigger--ghost.ui-select-search__trigger--neutral{background:transparent;border:1px solid transparent;color:var(--color-text)}.ui-select-search__trigger--subtle.ui-select-search__trigger--neutral:hover:not(:disabled),.ui-select-search__trigger--ghost.ui-select-search__trigger--neutral:hover:not(:disabled){background:var(--color-neutral-100)}.ui-select-search__trigger--subtle.ui-select-search__trigger--neutral:focus-visible,.ui-select-search__trigger--ghost.ui-select-search__trigger--neutral:focus-visible{box-shadow:0 0 0 2px var(--color-primary-500)}.ui-select-search__trigger--none.ui-select-search__trigger--neutral{background:transparent;border:none;color:var(--color-text)}.ui-select-search__trigger--outline.ui-select-search__trigger--primary{background:var(--color-bg);border:1px solid var(--color-primary-500);color:var(--color-primary-600)}.ui-select-search__trigger--outline.ui-select-search__trigger--primary:hover:not(:disabled){background:color-mix(in srgb,var(--color-primary-500) 5%,transparent)}.ui-select-search__trigger--outline.ui-select-search__trigger--primary:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary-500) 30%,transparent)}.ui-select-search__trigger--soft.ui-select-search__trigger--primary{background:color-mix(in srgb,var(--color-primary-500) 10%,transparent);border:1px solid transparent;color:var(--color-primary-600)}.ui-select-search__trigger--soft.ui-select-search__trigger--primary:hover:not(:disabled){background:color-mix(in srgb,var(--color-primary-500) 15%,transparent)}.ui-select-search__trigger--outline.ui-select-search__trigger--error{background:var(--color-bg);border:1px solid var(--color-error-500);color:var(--color-error-600)}.ui-select-search__trigger--outline.ui-select-search__trigger--error:hover:not(:disabled){background:color-mix(in srgb,var(--color-error-500) 5%,transparent)}.ui-select-search__trigger--soft.ui-select-search__trigger--error{background:color-mix(in srgb,var(--color-error-500) 10%,transparent);border:1px solid transparent;color:var(--color-error-700)}.ui-select-search__trigger--outline.ui-select-search__trigger--warning{background:var(--color-bg);border:1px solid var(--color-warning-500);color:var(--color-warning-600)}.ui-select-search__trigger--outline.ui-select-search__trigger--warning:hover:not(:disabled){background:color-mix(in srgb,var(--color-warning-500) 5%,transparent)}.ui-select-search__trigger--soft.ui-select-search__trigger--warning{background:color-mix(in srgb,var(--color-warning-500) 10%,transparent);border:1px solid transparent;color:var(--color-warning-700)}.ui-select-search__trigger--outline.ui-select-search__trigger--success{background:var(--color-bg);border:1px solid var(--color-success-500);color:var(--color-success-600)}.ui-select-search__trigger--outline.ui-select-search__trigger--success:hover:not(:disabled){background:color-mix(in srgb,var(--color-success-500) 5%,transparent)}.ui-select-search__trigger--soft.ui-select-search__trigger--success{background:color-mix(in srgb,var(--color-success-500) 10%,transparent);border:1px solid transparent;color:var(--color-success-700)}.ui-select-search__trigger--outline.ui-select-search__trigger--info{background:var(--color-bg);border:1px solid var(--color-info-500);color:var(--color-info-600)}.ui-select-search__trigger--outline.ui-select-search__trigger--info:hover:not(:disabled){background:color-mix(in srgb,var(--color-info-500) 5%,transparent)}.ui-select-search__trigger--soft.ui-select-search__trigger--info{background:color-mix(in srgb,var(--color-info-500) 10%,transparent);border:1px solid transparent;color:var(--color-info-700)}.ui-select-search__trigger--outline.ui-select-search__trigger--secondary{background:var(--color-bg);border:1px solid var(--color-secondary-500);color:var(--color-secondary-600)}.ui-select-search__trigger--outline.ui-select-search__trigger--secondary:hover:not(:disabled){background:color-mix(in srgb,var(--color-secondary-500) 5%,transparent)}.ui-select-search__trigger--soft.ui-select-search__trigger--secondary{background:color-mix(in srgb,var(--color-secondary-500) 10%,transparent);border:1px solid transparent;color:var(--color-secondary-700)}.ui-select-search--open .ui-select-search__trigger--outline{border-color:var(--color-primary-500)}.ui-select-search__trigger:disabled{cursor:not-allowed}.ui-select-search__leading{display:flex;align-items:center;flex-shrink:0;color:var(--color-text-muted);width:1rem;height:1rem}.ui-select-search__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-select-search__value--placeholder{color:var(--color-text-muted)}.ui-select-search__chevron{display:flex;align-items:center;flex-shrink:0;color:var(--color-text-muted);width:1rem;height:1rem;transition:transform .15s ease}.ui-select-search__chevron svg{width:100%;height:100%}.ui-select-search__chevron--open{transform:rotate(180deg)}.ui-select-search__spinner{display:inline-flex;align-items:center}.ui-select-search__spinner svg{width:1em;height:1em;animation:ui-spin .75s linear infinite}@keyframes ui-spin{to{transform:rotate(360deg)}}.ui-select-search__panel{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:var(--z-dropdown, 50);min-width:100%;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;overflow:hidden;transform-origin:top center}.ui-select-search__search-wrap{display:flex;align-items:center;gap:.375rem;padding:6px 8px;border-bottom:1px solid var(--color-border);background:var(--color-bg-muted, var(--color-neutral-50))}.ui-select-search__search-icon{display:flex;align-items:center;flex-shrink:0;color:var(--color-text-muted);width:14px;height:14px}.ui-select-search__search-icon svg{width:100%;height:100%}.ui-select-search__input{flex:1;border:none;background:transparent;outline:none;font-family:var(--font-sans);font-size:var(--text-sm);color:var(--color-text);min-width:0}.ui-select-search__input::placeholder{color:var(--color-text-muted)}.ui-select-search__clear{display:flex;align-items:center;flex-shrink:0;width:16px;height:16px;color:var(--color-text-muted);background:transparent;border:none;cursor:pointer;padding:0;border-radius:3px;transition:color .1s ease}.ui-select-search__clear svg{width:100%;height:100%}.ui-select-search__clear:hover{color:var(--color-text)}.ui-select-search__options{padding:4px;overflow-y:auto;max-height:200px}.ui-select-search__option{display:flex;align-items:center;gap:.5rem;width:100%;padding:6px 8px;border-radius:calc(var(--radius-md) - 2px);font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--font-normal);color:var(--color-text);background:transparent;border:none;cursor:pointer;text-align:left;transition:background-color .1s ease}.ui-select-search__option:hover:not(:disabled),.ui-select-search__option--highlighted:not(:disabled){background:var(--color-neutral-100)}.ui-select-search__option--selected{color:var(--color-primary-600);font-weight:var(--font-medium);background:color-mix(in srgb,var(--color-primary-500) 8%,transparent)}.ui-select-search__option--selected:hover,.ui-select-search__option--selected.ui-select-search__option--highlighted{background:color-mix(in srgb,var(--color-primary-500) 12%,transparent)}.ui-select-search__option--disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.ui-select-search__option-icon{flex-shrink:0;font-size:1rem;line-height:1}.ui-select-search__option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-select-search__option-check{flex-shrink:0;width:1rem;height:1rem;color:var(--color-primary-500);display:flex;align-items:center}.ui-select-search__option-check svg{width:100%;height:100%}:host ::ng-deep .ui-select-search__highlight{background:color-mix(in srgb,var(--color-primary-500) 20%,transparent);color:var(--color-primary-700);border-radius:2px;padding:0 1px;font-weight:var(--font-medium);font-style:normal}.ui-select-search__empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 16px;color:var(--color-text-muted);font-size:var(--text-sm);text-align:center}.ui-select-search__empty svg{width:20px;height:20px;opacity:.5}[data-theme=dark] .ui-select-search__trigger--outline.ui-select-search__trigger--neutral{background:var(--color-neutral-900);border-color:var(--color-neutral-700)}[data-theme=dark] .ui-select-search__trigger--outline.ui-select-search__trigger--neutral:hover:not(:disabled){border-color:var(--color-neutral-500)}[data-theme=dark] .ui-select-search__trigger--soft.ui-select-search__trigger--neutral{background:var(--color-neutral-800)}[data-theme=dark] .ui-select-search__panel{background:var(--color-neutral-900);border-color:var(--color-neutral-700)}[data-theme=dark] .ui-select-search__search-wrap{background:var(--color-neutral-800);border-color:var(--color-neutral-700)}[data-theme=dark] .ui-select-search__option:hover:not(:disabled),[data-theme=dark] .ui-select-search__option--highlighted:not(:disabled){background:var(--color-neutral-800)}[data-theme=dark] .ui-select-search__option--selected{background:color-mix(in srgb,var(--color-primary-500) 12%,transparent)}\n"] }]
+        }], propDecorators: { triggerEl: [{
+                type: ViewChild,
+                args: ['triggerEl']
+            }], searchInput: [{
+                type: ViewChild,
+                args: ['searchInput']
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+// ============================================================
+// MOLECULES — Nuxt UI v3 Design Kit → Angular 19 + NX
+// Combinations of atoms with focused single responsibility
+// ============================================================
+
+/**
+ * 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$2.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$3.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
+// ============================================================
+
+// ============================================================
+// SHARED-UI PUBLIC API
+// NX Angular Library — Nuxt UI v3 Design Kit
+// Atomic Design: Atoms → Molecules → Organisms
+// ============================================================
+// ── Theme (ThemeService, provideSharedUiTheme, ThemePickerComponent, presets) ─
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AccordionComponent, AlertComponent, AvatarComponent, AvatarGroupComponent, BadgeComponent, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, COLOR_PRESETS, CardComponent, CheckboxComponent, ChipComponent, DropdownMenuComponent, FormFieldComponent, InputComponent, KbdComponent, LinkComponent, ModalComponent, NavigationMenuComponent, PaginationComponent, ProgressComponent, SelectComponent, SelectSearchComponent, SeparatorComponent, SidebarComponent, SkeletonComponent, SliderComponent, SwitchComponent, TableComponent, TabsComponent, TextareaComponent, ThemePickerComponent, ThemeService, ThemeToggleComponent, ToastComponent, TooltipComponent, UiTableCellDirective, getAllPresets, provideSharedUiTheme };
+//# sourceMappingURL=atomng-ui.mjs.map