@devjuliovilla/jv-ui 1.7.1 → 1.8.0

package/fesm2022/devjuliovilla-jv-ui.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { input, computed, Component, forwardRef, inject, output, signal, Injectable, effect, HostListener, InjectionToken, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, viewChild } from '@angular/core';
+import { input, computed, Component, forwardRef, inject, output, Directive, Injectable, signal, InjectionToken, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, effect, contentChildren, HostListener, viewChild, viewChildren, afterNextRender, Renderer2, ElementRef } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormBuilder, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { CommonModule, DOCUMENT } from '@angular/common';
+import { CommonModule, DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import { Router, RouterLink } from '@angular/router';
 
 // This file is auto-generated by tools/generate-icons.mjs
@@ -18658,116 +18658,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
   `, styles: [".jv-divider{width:100%;height:1px;background:var(--jv-color-border)}.jv-divider--vertical{width:1px;height:100%;min-height:1.5rem}\n"] }]
         }], propDecorators: { vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }] } });
 
-class JvBadgeComponent {
-    tone = input('primary', ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
-    badgeClass = computed(() => `jv-badge--${this.tone()}`, ...(ngDevMode ? [{ debugName: "badgeClass" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: JvBadgeComponent, isStandalone: true, selector: "jv-badge", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<span class="jv-badge" [class]="badgeClass()"><ng-content></ng-content></span>`, isInline: true, styles: [".jv-badge{display:inline-flex;align-items:center;justify-content:center;min-height:1.75rem;padding:0 var(--jv-spacing-sm);border-radius:999px;font-size:.8rem;font-weight:700;line-height:1;white-space:nowrap}.jv-badge--primary{background:color-mix(in srgb,var(--jv-color-primary) 14%,var(--jv-color-surface));color:var(--jv-color-primary)}.jv-badge--secondary,.jv-badge--neutral{background:var(--jv-color-surface-muted);color:var(--jv-color-foreground)}.jv-badge--success{background:color-mix(in srgb,var(--jv-color-success) 16%,var(--jv-color-surface));color:var(--jv-color-success)}.jv-badge--warning{background:color-mix(in srgb,var(--jv-color-warning) 20%,var(--jv-color-surface));color:#8a4b00}.jv-badge--danger{background:color-mix(in srgb,var(--jv-color-danger) 16%,var(--jv-color-surface));color:var(--jv-color-danger)}.jv-badge--info{background:color-mix(in srgb,var(--jv-color-info) 16%,var(--jv-color-surface));color:var(--jv-color-info)}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvBadgeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'jv-badge', standalone: true, template: `<span class="jv-badge" [class]="badgeClass()"><ng-content></ng-content></span>`, styles: [".jv-badge{display:inline-flex;align-items:center;justify-content:center;min-height:1.75rem;padding:0 var(--jv-spacing-sm);border-radius:999px;font-size:.8rem;font-weight:700;line-height:1;white-space:nowrap}.jv-badge--primary{background:color-mix(in srgb,var(--jv-color-primary) 14%,var(--jv-color-surface));color:var(--jv-color-primary)}.jv-badge--secondary,.jv-badge--neutral{background:var(--jv-color-surface-muted);color:var(--jv-color-foreground)}.jv-badge--success{background:color-mix(in srgb,var(--jv-color-success) 16%,var(--jv-color-surface));color:var(--jv-color-success)}.jv-badge--warning{background:color-mix(in srgb,var(--jv-color-warning) 20%,var(--jv-color-surface));color:#8a4b00}.jv-badge--danger{background:color-mix(in srgb,var(--jv-color-danger) 16%,var(--jv-color-surface));color:var(--jv-color-danger)}.jv-badge--info{background:color-mix(in srgb,var(--jv-color-info) 16%,var(--jv-color-surface));color:var(--jv-color-info)}\n"] }]
-        }], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }] } });
-
-class JvLoaderService {
-    counter = signal(0, ...(ngDevMode ? [{ debugName: "counter" }] : /* istanbul ignore next */ []));
-    visible = signal(false, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-    message = signal('Loading', ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
-    delayMs = 300;
-    showTimeout = null;
-    activeCount = this.counter.asReadonly();
-    isVisible = this.visible.asReadonly();
-    liveMessage = this.message.asReadonly();
-    show(message = 'Loading') {
-        this.message.set(message);
-        this.counter.update((count) => count + 1);
-        if (this.counter() === 1) {
-            this.scheduleVisibility();
-        }
-    }
-    hide() {
-        this.counter.update((count) => Math.max(0, count - 1));
-        if (this.counter() === 0) {
-            this.clearTimer();
-            this.visible.set(false);
-        }
-    }
-    scheduleVisibility() {
-        this.clearTimer();
-        this.showTimeout = setTimeout(() => {
-            if (this.counter() > 0) {
-                this.visible.set(true);
-            }
-            this.showTimeout = null;
-        }, this.delayMs);
-    }
-    clearTimer() {
-        if (this.showTimeout) {
-            clearTimeout(this.showTimeout);
-            this.showTimeout = null;
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvLoaderService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvLoaderService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-class JvLoaderComponent {
-    document = inject(DOCUMENT);
-    loaderService = inject(JvLoaderService);
-    constructor() {
-        effect(() => {
-            const locked = this.loaderService.isVisible();
-            const body = this.document.body;
-            const root = this.document.documentElement;
-            body.style.overflow = locked ? 'hidden' : '';
-            root.style.overflow = locked ? 'hidden' : '';
-        });
-    }
-    handleWheel(event) {
-        if (this.loaderService.isVisible()) {
-            event.preventDefault();
-        }
-    }
-    handleTouchMove(event) {
-        if (this.loaderService.isVisible()) {
-            event.preventDefault();
-        }
+class JvAccordionPanelDirective {
+    templateRef;
+    id = input.required({ ...(ngDevMode ? { debugName: "id" } : /* istanbul ignore next */ {}), alias: 'jvAccordionPanel' });
+    constructor(templateRef) {
+        this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvLoaderComponent, isStandalone: true, selector: "jv-loader", host: { listeners: { "document:wheel": "handleWheel($event)", "document:touchmove": "handleTouchMove($event)" } }, ngImport: i0, template: `
-    @if (loaderService.isVisible()) {
-      <div class="jv-loader-backdrop" aria-live="polite" aria-atomic="true">
-        <div class="jv-loader-panel" role="status">
-          <span class="spinner" aria-hidden="true"></span>
-          <span>{{ loaderService.liveMessage() }}</span>
-        </div>
-      </div>
-    }
-  `, isInline: true, styles: [".jv-loader-backdrop{position:fixed;inset:0;z-index:1050;display:grid;place-items:center;background:#0f172a2e;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.jv-loader-panel{display:inline-flex;align-items:center;gap:var(--jv-spacing-sm);padding:var(--jv-spacing-md) var(--jv-spacing-lg);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-lg);background:var(--jv-color-surface);box-shadow:var(--jv-shadow-lg);color:var(--jv-color-foreground)}.spinner{width:1rem;height:1rem;border:2px solid currentColor;border-right-color:transparent;border-radius:999px;animation:jv-loader-spin .8s linear infinite}@keyframes jv-loader-spin{to{transform:rotate(360deg)}}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvAccordionPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: JvAccordionPanelDirective, isStandalone: true, selector: "ng-template[jvAccordionPanel]", inputs: { id: { classPropertyName: "id", publicName: "jvAccordionPanel", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvLoaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'jv-loader', standalone: true, template: `
-    @if (loaderService.isVisible()) {
-      <div class="jv-loader-backdrop" aria-live="polite" aria-atomic="true">
-        <div class="jv-loader-panel" role="status">
-          <span class="spinner" aria-hidden="true"></span>
-          <span>{{ loaderService.liveMessage() }}</span>
-        </div>
-      </div>
-    }
-  `, styles: [".jv-loader-backdrop{position:fixed;inset:0;z-index:1050;display:grid;place-items:center;background:#0f172a2e;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.jv-loader-panel{display:inline-flex;align-items:center;gap:var(--jv-spacing-sm);padding:var(--jv-spacing-md) var(--jv-spacing-lg);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-lg);background:var(--jv-color-surface);box-shadow:var(--jv-shadow-lg);color:var(--jv-color-foreground)}.spinner{width:1rem;height:1rem;border:2px solid currentColor;border-right-color:transparent;border-radius:999px;animation:jv-loader-spin .8s linear infinite}@keyframes jv-loader-spin{to{transform:rotate(360deg)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { handleWheel: [{
-                type: HostListener,
-                args: ['document:wheel', ['$event']]
-            }], handleTouchMove: [{
-                type: HostListener,
-                args: ['document:touchmove', ['$event']]
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvAccordionPanelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[jvAccordionPanel]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "jvAccordionPanel", required: true }] }] } });
 
 class JvAnnouncementService {
     document = inject(DOCUMENT);
@@ -18885,6 +18791,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
+const JV_UI_CONFIG = new InjectionToken('JV_UI_CONFIG');
+const JV_UI_CONFIG_DEFAULTS = new InjectionToken('JV_UI_CONFIG_DEFAULTS', {
+    providedIn: 'root',
+    factory: () => JV_UI_DEFAULT_CONFIG,
+});
+function provideJvUi(config = {}) {
+    const configProvider = {
+        provide: JV_UI_CONFIG,
+        useValue: config,
+        multi: true,
+    };
+    return makeEnvironmentProviders([
+        configProvider,
+        {
+            provide: ENVIRONMENT_INITIALIZER,
+            multi: true,
+            useValue: () => {
+                inject(JvThemeService).initialize();
+                inject(JvTranslationService).initialize();
+            },
+        },
+    ]);
+}
+
+class JvUiConfigService {
+    defaults = inject(JV_UI_CONFIG_DEFAULTS);
+    configLayers = inject(JV_UI_CONFIG, { optional: true }) ?? [];
+    get snapshot() {
+        return this.configLayers.reduce((merged, layer) => ({ ...merged, ...layer }), { ...this.defaults });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvUiConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvUiConfigService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvUiConfigService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 const ES = {
     'list.emptyMessage': 'No hay elementos',
     'grid.emptyMessage': 'No hay registros',
@@ -18919,6 +18863,23 @@ const ES = {
     'pagination.nextPage': 'Página siguiente',
     'pagination.lastPage': 'Última página',
     'pagination.itemsPerPage': 'Registros por página',
+    'datePicker.placeholder': 'Seleccione una fecha',
+    'datePicker.dialogTitle': 'Seleccionar fecha',
+    'datePicker.clear': 'Limpiar fecha',
+    'datePicker.close': 'Cerrar',
+    'datePicker.prevMonth': 'Mes anterior',
+    'datePicker.nextMonth': 'Mes siguiente',
+    'datePicker.selectionCleared': 'Seleccion de fecha limpiada',
+    'modalSelector.placeholder': 'Seleccione una opcion',
+    'modalSelector.searchPlaceholder': 'Buscar',
+    'modalSelector.emptyMessage': 'No se encontraron resultados',
+    'modalSelector.clear': 'Limpiar seleccion',
+    'modalSelector.close': 'Cerrar',
+    'modalSelector.results': '{count} resultados',
+    'modalSelector.selected': '{label} seleccionado',
+    'modalSelector.selectionCleared': 'Seleccion limpiada',
+    'common.expanded': 'Expandido',
+    'common.collapsed': 'Colapsado',
 };
 
 const EN = {
@@ -18955,6 +18916,23 @@ const EN = {
     'pagination.nextPage': 'Next page',
     'pagination.lastPage': 'Last page',
     'pagination.itemsPerPage': 'Items per page',
+    'datePicker.placeholder': 'Select a date',
+    'datePicker.dialogTitle': 'Select date',
+    'datePicker.clear': 'Clear date',
+    'datePicker.close': 'Close',
+    'datePicker.prevMonth': 'Previous month',
+    'datePicker.nextMonth': 'Next month',
+    'datePicker.selectionCleared': 'Date selection cleared',
+    'modalSelector.placeholder': 'Select an option',
+    'modalSelector.searchPlaceholder': 'Search',
+    'modalSelector.emptyMessage': 'No results found',
+    'modalSelector.clear': 'Clear selection',
+    'modalSelector.close': 'Close',
+    'modalSelector.results': '{count} results',
+    'modalSelector.selected': '{label} selected',
+    'modalSelector.selectionCleared': 'Selection cleared',
+    'common.expanded': 'Expanded',
+    'common.collapsed': 'Collapsed',
 };
 
 const JV_LOCALE_DICTIONARIES = {
@@ -18999,94 +18977,413 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
-const JV_UI_CONFIG = new InjectionToken('JV_UI_CONFIG');
-const JV_UI_CONFIG_DEFAULTS = new InjectionToken('JV_UI_CONFIG_DEFAULTS', {
-    providedIn: 'root',
-    factory: () => JV_UI_DEFAULT_CONFIG,
-});
-function provideJvUi(config = {}) {
-    const configProvider = {
-        provide: JV_UI_CONFIG,
-        useValue: config,
-        multi: true,
-    };
-    return makeEnvironmentProviders([
-        configProvider,
-        {
-            provide: ENVIRONMENT_INITIALIZER,
-            multi: true,
-            useValue: () => {
-                inject(JvThemeService).initialize();
-                inject(JvTranslationService).initialize();
-            },
-        },
-    ]);
-}
-
-class JvUiConfigService {
-    defaults = inject(JV_UI_CONFIG_DEFAULTS);
-    configLayers = inject(JV_UI_CONFIG, { optional: true }) ?? [];
-    get snapshot() {
-        return this.configLayers.reduce((merged, layer) => ({ ...merged, ...layer }), { ...this.defaults });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvUiConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvUiConfigService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvUiConfigService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-class JvToastService {
+let collapsiblePanelSequence = 0;
+class JvCollapsiblePanelComponent {
     announcementService = inject(JvAnnouncementService);
-    config = inject(JvUiConfigService);
-    items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
-    positionOverride = signal(null, ...(ngDevMode ? [{ debugName: "positionOverride" }] : /* istanbul ignore next */ []));
-    nextId = 0;
-    toasts = computed(() => this.items(), ...(ngDevMode ? [{ debugName: "toasts" }] : /* istanbul ignore next */ []));
-    position = computed(() => this.positionOverride() ?? this.config.snapshot.toastPosition, ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
-    show(message, tone = 'info', options = {}) {
-        const id = ++this.nextId;
-        const toast = {
-            id,
-            title: options.title,
-            message,
-            tone,
-            duration: options.duration ?? 4000,
-        };
-        this.items.update((current) => [...current, toast]);
-        this.announcementService.announce(toast.title ? `${toast.title}. ${toast.message}` : toast.message, toast.tone === 'danger' ? 'assertive' : 'polite');
-        if (toast.duration > 0) {
-            setTimeout(() => this.dismiss(id), toast.duration);
+    translation = inject(JvTranslationService);
+    internalOpen = signal(false, ...(ngDevMode ? [{ debugName: "internalOpen" }] : /* istanbul ignore next */ []));
+    bodyVisible = signal(false, ...(ngDevMode ? [{ debugName: "bodyVisible" }] : /* istanbul ignore next */ []));
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    subtitle = input('', ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
+    icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    open = input(undefined, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    defaultOpen = input(false, ...(ngDevMode ? [{ debugName: "defaultOpen" }] : /* istanbul ignore next */ []));
+    keepMounted = input(true, ...(ngDevMode ? [{ debugName: "keepMounted" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    showIndicator = input(true, ...(ngDevMode ? [{ debugName: "showIndicator" }] : /* istanbul ignore next */ []));
+    variant = input('bordered', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    openChange = output();
+    triggerId = `jv-collapsible-trigger-${++collapsiblePanelSequence}`;
+    contentId = `jv-collapsible-content-${collapsiblePanelSequence}`;
+    resolvedOpen = computed(() => this.open() ?? this.internalOpen(), ...(ngDevMode ? [{ debugName: "resolvedOpen" }] : /* istanbul ignore next */ []));
+    panelClass = computed(() => `jv-collapsible-panel--${this.variant()}`, ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
+    shouldRenderBody = computed(() => this.keepMounted() || this.bodyVisible(), ...(ngDevMode ? [{ debugName: "shouldRenderBody" }] : /* istanbul ignore next */ []));
+    triggerAriaLabel = computed(() => {
+        const parts = [this.title()];
+        if (this.subtitle()) {
+            parts.push(this.subtitle());
         }
-        return id;
+        parts.push(this.translation.translate(this.resolvedOpen() ? 'common.expanded' : 'common.collapsed'));
+        return parts.join('. ');
+    }, ...(ngDevMode ? [{ debugName: "triggerAriaLabel" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.internalOpen.set(this.defaultOpen());
+        this.bodyVisible.set(this.defaultOpen());
+        effect(() => {
+            const open = this.resolvedOpen();
+            const keepMounted = this.keepMounted();
+            if (keepMounted || open) {
+                this.bodyVisible.set(true);
+            }
+        });
     }
-    dismiss(id) {
-        this.items.update((current) => current.filter((item) => item.id !== id));
+    toggle() {
+        if (this.disabled()) {
+            return;
+        }
+        const nextOpen = !this.resolvedOpen();
+        if (this.open() === undefined) {
+            this.internalOpen.set(nextOpen);
+        }
+        if (nextOpen) {
+            this.bodyVisible.set(true);
+        }
+        this.announcementService.announce(`${this.title()}. ${this.translation.translate(nextOpen ? 'common.expanded' : 'common.collapsed')}`, 'polite');
+        this.openChange.emit(nextOpen);
     }
-    setPosition(position) {
-        this.positionOverride.set(position);
+    handleBodyTransitionEnd(event) {
+        if (event.propertyName !== 'grid-template-rows' || this.keepMounted() || this.resolvedOpen()) {
+            return;
+        }
+        this.bodyVisible.set(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvToastService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvCollapsiblePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvCollapsiblePanelComponent, isStandalone: true, selector: "jv-collapsible-panel", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, keepMounted: { classPropertyName: "keepMounted", publicName: "keepMounted", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showIndicator: { classPropertyName: "showIndicator", publicName: "showIndicator", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange" }, ngImport: i0, template: `
+    <section class="jv-collapsible-panel" [class]="panelClass()">
+      <button
+        type="button"
+        class="jv-collapsible-trigger"
+        [id]="triggerId"
+        [disabled]="disabled()"
+        [attr.aria-expanded]="resolvedOpen() ? 'true' : 'false'"
+        [attr.aria-controls]="contentId"
+        [attr.aria-label]="triggerAriaLabel()"
+        (click)="toggle()"
+      >
+        <span class="jv-collapsible-main">
+          @if (icon()) {
+            <jv-icon [name]="icon()!" [size]="18" />
+          }
+
+          <span class="jv-collapsible-copy">
+            <span class="jv-collapsible-title">{{ title() }}</span>
+            @if (subtitle()) {
+              <span class="jv-collapsible-subtitle">{{ subtitle() }}</span>
+            }
+          </span>
+        </span>
+
+        @if (showIndicator()) {
+          <jv-icon class="jv-collapsible-indicator" [class.jv-collapsible-indicator--open]="resolvedOpen()" name="chevron-down" [size]="18" />
+        }
+      </button>
+
+      @if (shouldRenderBody()) {
+        <div
+          class="jv-collapsible-body"
+          [class.jv-collapsible-body--open]="resolvedOpen()"
+          [id]="contentId"
+          role="region"
+          [attr.aria-labelledby]="triggerId"
+          [attr.aria-hidden]="resolvedOpen() ? null : 'true'"
+          [attr.inert]="resolvedOpen() ? null : ''"
+          (transitionend)="handleBodyTransitionEnd($event)"
+        >
+          <div class="jv-collapsible-content">
+            <ng-content />
+          </div>
+        </div>
+      }
+    </section>
+  `, isInline: true, styles: [".jv-collapsible-panel{border-radius:var(--jv-radius-lg);background:var(--jv-color-surface)}.jv-collapsible-panel--bordered{border:1px solid var(--jv-color-border)}.jv-collapsible-panel--filled{border:1px solid transparent;background:var(--jv-color-surface-muted)}.jv-collapsible-panel--minimal{border-bottom:1px solid var(--jv-color-border);border-radius:0}.jv-collapsible-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);padding:var(--jv-spacing-md) var(--jv-spacing-lg);border:0;border-radius:inherit;background:transparent;color:var(--jv-color-foreground);text-align:left;font:inherit;cursor:pointer}.jv-collapsible-trigger:disabled{opacity:.6;cursor:not-allowed}.jv-collapsible-trigger:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-collapsible-main{min-width:0;display:inline-flex;align-items:flex-start;gap:var(--jv-spacing-sm)}.jv-collapsible-copy{min-width:0;display:grid;gap:.25rem}.jv-collapsible-title{font-weight:600}.jv-collapsible-subtitle{color:var(--jv-color-foreground-muted);font-size:.875rem}.jv-collapsible-indicator{flex-shrink:0;transition:transform .18s ease}.jv-collapsible-indicator--open{transform:rotate(180deg)}.jv-collapsible-body{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .18s ease,opacity .18s ease}.jv-collapsible-body--open{grid-template-rows:1fr;opacity:1}.jv-collapsible-content{min-height:0;overflow:hidden;padding:0 var(--jv-spacing-lg) var(--jv-spacing-lg)}\n"], dependencies: [{ kind: "component", type: JvIconComponent, selector: "jv-icon", inputs: ["name", "size", "strokeWidth", "decorative", "ariaLabel"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvToastService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvCollapsiblePanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jv-collapsible-panel', standalone: true, imports: [JvIconComponent], template: `
+    <section class="jv-collapsible-panel" [class]="panelClass()">
+      <button
+        type="button"
+        class="jv-collapsible-trigger"
+        [id]="triggerId"
+        [disabled]="disabled()"
+        [attr.aria-expanded]="resolvedOpen() ? 'true' : 'false'"
+        [attr.aria-controls]="contentId"
+        [attr.aria-label]="triggerAriaLabel()"
+        (click)="toggle()"
+      >
+        <span class="jv-collapsible-main">
+          @if (icon()) {
+            <jv-icon [name]="icon()!" [size]="18" />
+          }
 
-class JvToastComponent {
-    toastService = inject(JvToastService);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvToastComponent, isStandalone: true, selector: "jv-toast", ngImport: i0, template: `
-    @if (toastService.toasts().length > 0) {
-      <div class="jv-toast-viewport" [class]="'is-' + toastService.position()" aria-live="polite" aria-atomic="false">
-        @for (toast of toastService.toasts(); track toast.id) {
-          <article class="jv-toast-item" [class]="'jv-toast--' + toast.tone" [attr.role]="toast.tone === 'danger' ? 'alert' : 'status'" aria-atomic="true">
-            <div class="jv-toast-copy">
-              @if (toast.title) {
-                <strong>{{ toast.title }}</strong>
-              }
+          <span class="jv-collapsible-copy">
+            <span class="jv-collapsible-title">{{ title() }}</span>
+            @if (subtitle()) {
+              <span class="jv-collapsible-subtitle">{{ subtitle() }}</span>
+            }
+          </span>
+        </span>
+
+        @if (showIndicator()) {
+          <jv-icon class="jv-collapsible-indicator" [class.jv-collapsible-indicator--open]="resolvedOpen()" name="chevron-down" [size]="18" />
+        }
+      </button>
+
+      @if (shouldRenderBody()) {
+        <div
+          class="jv-collapsible-body"
+          [class.jv-collapsible-body--open]="resolvedOpen()"
+          [id]="contentId"
+          role="region"
+          [attr.aria-labelledby]="triggerId"
+          [attr.aria-hidden]="resolvedOpen() ? null : 'true'"
+          [attr.inert]="resolvedOpen() ? null : ''"
+          (transitionend)="handleBodyTransitionEnd($event)"
+        >
+          <div class="jv-collapsible-content">
+            <ng-content />
+          </div>
+        </div>
+      }
+    </section>
+  `, styles: [".jv-collapsible-panel{border-radius:var(--jv-radius-lg);background:var(--jv-color-surface)}.jv-collapsible-panel--bordered{border:1px solid var(--jv-color-border)}.jv-collapsible-panel--filled{border:1px solid transparent;background:var(--jv-color-surface-muted)}.jv-collapsible-panel--minimal{border-bottom:1px solid var(--jv-color-border);border-radius:0}.jv-collapsible-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);padding:var(--jv-spacing-md) var(--jv-spacing-lg);border:0;border-radius:inherit;background:transparent;color:var(--jv-color-foreground);text-align:left;font:inherit;cursor:pointer}.jv-collapsible-trigger:disabled{opacity:.6;cursor:not-allowed}.jv-collapsible-trigger:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-collapsible-main{min-width:0;display:inline-flex;align-items:flex-start;gap:var(--jv-spacing-sm)}.jv-collapsible-copy{min-width:0;display:grid;gap:.25rem}.jv-collapsible-title{font-weight:600}.jv-collapsible-subtitle{color:var(--jv-color-foreground-muted);font-size:.875rem}.jv-collapsible-indicator{flex-shrink:0;transition:transform .18s ease}.jv-collapsible-indicator--open{transform:rotate(180deg)}.jv-collapsible-body{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .18s ease,opacity .18s ease}.jv-collapsible-body--open{grid-template-rows:1fr;opacity:1}.jv-collapsible-content{min-height:0;overflow:hidden;padding:0 var(--jv-spacing-lg) var(--jv-spacing-lg)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], keepMounted: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepMounted", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIndicator", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }] } });
+
+class JvAccordionComponent {
+    panelTemplates = contentChildren(JvAccordionPanelDirective, ...(ngDevMode ? [{ debugName: "panelTemplates" }] : /* istanbul ignore next */ []));
+    internalOpenItemIds = signal([], ...(ngDevMode ? [{ debugName: "internalOpenItemIds" }] : /* istanbul ignore next */ []));
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    openItemIds = input(undefined, ...(ngDevMode ? [{ debugName: "openItemIds" }] : /* istanbul ignore next */ []));
+    defaultOpenItemIds = input([], ...(ngDevMode ? [{ debugName: "defaultOpenItemIds" }] : /* istanbul ignore next */ []));
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    keepMounted = input(true, ...(ngDevMode ? [{ debugName: "keepMounted" }] : /* istanbul ignore next */ []));
+    showIndicator = input(true, ...(ngDevMode ? [{ debugName: "showIndicator" }] : /* istanbul ignore next */ []));
+    variant = input('bordered', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    openItemIdsChange = output();
+    resolvedOpenItemIds = computed(() => {
+        const allItemIds = new Set(this.items().map((item) => item.id));
+        const candidateIds = this.openItemIds() ?? this.internalOpenItemIds();
+        const filteredIds = candidateIds.filter((id) => allItemIds.has(id));
+        return this.multiple() ? filteredIds : filteredIds.slice(0, 1);
+    }, ...(ngDevMode ? [{ debugName: "resolvedOpenItemIds" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.internalOpenItemIds.set(this.defaultOpenItemIds());
+    }
+    isItemOpen(itemId) {
+        return this.resolvedOpenItemIds().includes(itemId);
+    }
+    handleItemOpenChange(itemId, nextOpen) {
+        const currentIds = this.resolvedOpenItemIds();
+        let nextIds = currentIds;
+        if (nextOpen) {
+            nextIds = this.multiple() ? [...new Set([...currentIds, itemId])] : [itemId];
+        }
+        else {
+            nextIds = currentIds.filter((id) => id !== itemId);
+        }
+        if (this.openItemIds() === undefined) {
+            this.internalOpenItemIds.set(nextIds);
+        }
+        this.openItemIdsChange.emit(nextIds);
+    }
+    panelTemplate(itemId) {
+        return this.panelTemplates().find((panel) => panel.id() === itemId)?.templateRef ?? null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvAccordionComponent, isStandalone: true, selector: "jv-accordion", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, openItemIds: { classPropertyName: "openItemIds", publicName: "openItemIds", isSignal: true, isRequired: false, transformFunction: null }, defaultOpenItemIds: { classPropertyName: "defaultOpenItemIds", publicName: "defaultOpenItemIds", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, keepMounted: { classPropertyName: "keepMounted", publicName: "keepMounted", isSignal: true, isRequired: false, transformFunction: null }, showIndicator: { classPropertyName: "showIndicator", publicName: "showIndicator", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openItemIdsChange: "openItemIdsChange" }, queries: [{ propertyName: "panelTemplates", predicate: JvAccordionPanelDirective, isSignal: true }], ngImport: i0, template: `
+    <div class="jv-accordion">
+      @for (item of items(); track item.id) {
+        <jv-collapsible-panel
+          [title]="item.title"
+          [subtitle]="item.subtitle ?? ''"
+          [icon]="item.icon ?? null"
+          [open]="isItemOpen(item.id)"
+          [keepMounted]="keepMounted()"
+          [disabled]="item.disabled ?? false"
+          [showIndicator]="showIndicator()"
+          [variant]="variant()"
+          (openChange)="handleItemOpenChange(item.id, $event)"
+        >
+          <ng-container [ngTemplateOutlet]="panelTemplate(item.id) ?? null" />
+        </jv-collapsible-panel>
+      }
+    </div>
+  `, isInline: true, styles: [".jv-accordion{display:grid;gap:var(--jv-spacing-sm)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: JvCollapsiblePanelComponent, selector: "jv-collapsible-panel", inputs: ["title", "subtitle", "icon", "open", "defaultOpen", "keepMounted", "disabled", "showIndicator", "variant"], outputs: ["openChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvAccordionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jv-accordion', standalone: true, imports: [NgTemplateOutlet, JvCollapsiblePanelComponent], template: `
+    <div class="jv-accordion">
+      @for (item of items(); track item.id) {
+        <jv-collapsible-panel
+          [title]="item.title"
+          [subtitle]="item.subtitle ?? ''"
+          [icon]="item.icon ?? null"
+          [open]="isItemOpen(item.id)"
+          [keepMounted]="keepMounted()"
+          [disabled]="item.disabled ?? false"
+          [showIndicator]="showIndicator()"
+          [variant]="variant()"
+          (openChange)="handleItemOpenChange(item.id, $event)"
+        >
+          <ng-container [ngTemplateOutlet]="panelTemplate(item.id) ?? null" />
+        </jv-collapsible-panel>
+      }
+    </div>
+  `, styles: [".jv-accordion{display:grid;gap:var(--jv-spacing-sm)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { panelTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => JvAccordionPanelDirective), { isSignal: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], openItemIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "openItemIds", required: false }] }], defaultOpenItemIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpenItemIds", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], keepMounted: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepMounted", required: false }] }], showIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIndicator", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], openItemIdsChange: [{ type: i0.Output, args: ["openItemIdsChange"] }] } });
+
+class JvBadgeComponent {
+    tone = input('primary', ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    badgeClass = computed(() => `jv-badge--${this.tone()}`, ...(ngDevMode ? [{ debugName: "badgeClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: JvBadgeComponent, isStandalone: true, selector: "jv-badge", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<span class="jv-badge" [class]="badgeClass()"><ng-content></ng-content></span>`, isInline: true, styles: [".jv-badge{display:inline-flex;align-items:center;justify-content:center;min-height:1.75rem;padding:0 var(--jv-spacing-sm);border-radius:999px;font-size:.8rem;font-weight:700;line-height:1;white-space:nowrap}.jv-badge--primary{background:color-mix(in srgb,var(--jv-color-primary) 14%,var(--jv-color-surface));color:var(--jv-color-primary)}.jv-badge--secondary,.jv-badge--neutral{background:var(--jv-color-surface-muted);color:var(--jv-color-foreground)}.jv-badge--success{background:color-mix(in srgb,var(--jv-color-success) 16%,var(--jv-color-surface));color:var(--jv-color-success)}.jv-badge--warning{background:color-mix(in srgb,var(--jv-color-warning) 20%,var(--jv-color-surface));color:#8a4b00}.jv-badge--danger{background:color-mix(in srgb,var(--jv-color-danger) 16%,var(--jv-color-surface));color:var(--jv-color-danger)}.jv-badge--info{background:color-mix(in srgb,var(--jv-color-info) 16%,var(--jv-color-surface));color:var(--jv-color-info)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvBadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jv-badge', standalone: true, template: `<span class="jv-badge" [class]="badgeClass()"><ng-content></ng-content></span>`, styles: [".jv-badge{display:inline-flex;align-items:center;justify-content:center;min-height:1.75rem;padding:0 var(--jv-spacing-sm);border-radius:999px;font-size:.8rem;font-weight:700;line-height:1;white-space:nowrap}.jv-badge--primary{background:color-mix(in srgb,var(--jv-color-primary) 14%,var(--jv-color-surface));color:var(--jv-color-primary)}.jv-badge--secondary,.jv-badge--neutral{background:var(--jv-color-surface-muted);color:var(--jv-color-foreground)}.jv-badge--success{background:color-mix(in srgb,var(--jv-color-success) 16%,var(--jv-color-surface));color:var(--jv-color-success)}.jv-badge--warning{background:color-mix(in srgb,var(--jv-color-warning) 20%,var(--jv-color-surface));color:#8a4b00}.jv-badge--danger{background:color-mix(in srgb,var(--jv-color-danger) 16%,var(--jv-color-surface));color:var(--jv-color-danger)}.jv-badge--info{background:color-mix(in srgb,var(--jv-color-info) 16%,var(--jv-color-surface));color:var(--jv-color-info)}\n"] }]
+        }], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }] } });
+
+class JvLoaderService {
+    counter = signal(0, ...(ngDevMode ? [{ debugName: "counter" }] : /* istanbul ignore next */ []));
+    visible = signal(false, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    message = signal('Loading', ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    delayMs = 300;
+    showTimeout = null;
+    activeCount = this.counter.asReadonly();
+    isVisible = this.visible.asReadonly();
+    liveMessage = this.message.asReadonly();
+    show(message = 'Loading') {
+        this.message.set(message);
+        this.counter.update((count) => count + 1);
+        if (this.counter() === 1) {
+            this.scheduleVisibility();
+        }
+    }
+    hide() {
+        this.counter.update((count) => Math.max(0, count - 1));
+        if (this.counter() === 0) {
+            this.clearTimer();
+            this.visible.set(false);
+        }
+    }
+    scheduleVisibility() {
+        this.clearTimer();
+        this.showTimeout = setTimeout(() => {
+            if (this.counter() > 0) {
+                this.visible.set(true);
+            }
+            this.showTimeout = null;
+        }, this.delayMs);
+    }
+    clearTimer() {
+        if (this.showTimeout) {
+            clearTimeout(this.showTimeout);
+            this.showTimeout = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvLoaderService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvLoaderService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class JvLoaderComponent {
+    document = inject(DOCUMENT);
+    loaderService = inject(JvLoaderService);
+    constructor() {
+        effect(() => {
+            const locked = this.loaderService.isVisible();
+            const body = this.document.body;
+            const root = this.document.documentElement;
+            body.style.overflow = locked ? 'hidden' : '';
+            root.style.overflow = locked ? 'hidden' : '';
+        });
+    }
+    handleWheel(event) {
+        if (this.loaderService.isVisible()) {
+            event.preventDefault();
+        }
+    }
+    handleTouchMove(event) {
+        if (this.loaderService.isVisible()) {
+            event.preventDefault();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvLoaderComponent, isStandalone: true, selector: "jv-loader", host: { listeners: { "document:wheel": "handleWheel($event)", "document:touchmove": "handleTouchMove($event)" } }, ngImport: i0, template: `
+    @if (loaderService.isVisible()) {
+      <div class="jv-loader-backdrop" aria-live="polite" aria-atomic="true">
+        <div class="jv-loader-panel" role="status">
+          <span class="spinner" aria-hidden="true"></span>
+          <span>{{ loaderService.liveMessage() }}</span>
+        </div>
+      </div>
+    }
+  `, isInline: true, styles: [".jv-loader-backdrop{position:fixed;inset:0;z-index:1050;display:grid;place-items:center;background:#0f172a2e;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.jv-loader-panel{display:inline-flex;align-items:center;gap:var(--jv-spacing-sm);padding:var(--jv-spacing-md) var(--jv-spacing-lg);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-lg);background:var(--jv-color-surface);box-shadow:var(--jv-shadow-lg);color:var(--jv-color-foreground)}.spinner{width:1rem;height:1rem;border:2px solid currentColor;border-right-color:transparent;border-radius:999px;animation:jv-loader-spin .8s linear infinite}@keyframes jv-loader-spin{to{transform:rotate(360deg)}}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvLoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jv-loader', standalone: true, template: `
+    @if (loaderService.isVisible()) {
+      <div class="jv-loader-backdrop" aria-live="polite" aria-atomic="true">
+        <div class="jv-loader-panel" role="status">
+          <span class="spinner" aria-hidden="true"></span>
+          <span>{{ loaderService.liveMessage() }}</span>
+        </div>
+      </div>
+    }
+  `, styles: [".jv-loader-backdrop{position:fixed;inset:0;z-index:1050;display:grid;place-items:center;background:#0f172a2e;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.jv-loader-panel{display:inline-flex;align-items:center;gap:var(--jv-spacing-sm);padding:var(--jv-spacing-md) var(--jv-spacing-lg);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-lg);background:var(--jv-color-surface);box-shadow:var(--jv-shadow-lg);color:var(--jv-color-foreground)}.spinner{width:1rem;height:1rem;border:2px solid currentColor;border-right-color:transparent;border-radius:999px;animation:jv-loader-spin .8s linear infinite}@keyframes jv-loader-spin{to{transform:rotate(360deg)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { handleWheel: [{
+                type: HostListener,
+                args: ['document:wheel', ['$event']]
+            }], handleTouchMove: [{
+                type: HostListener,
+                args: ['document:touchmove', ['$event']]
+            }] } });
+
+class JvToastService {
+    announcementService = inject(JvAnnouncementService);
+    config = inject(JvUiConfigService);
+    items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    positionOverride = signal(null, ...(ngDevMode ? [{ debugName: "positionOverride" }] : /* istanbul ignore next */ []));
+    nextId = 0;
+    toasts = computed(() => this.items(), ...(ngDevMode ? [{ debugName: "toasts" }] : /* istanbul ignore next */ []));
+    position = computed(() => this.positionOverride() ?? this.config.snapshot.toastPosition, ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    show(message, tone = 'info', options = {}) {
+        const id = ++this.nextId;
+        const toast = {
+            id,
+            title: options.title,
+            message,
+            tone,
+            duration: options.duration ?? 4000,
+        };
+        this.items.update((current) => [...current, toast]);
+        this.announcementService.announce(toast.title ? `${toast.title}. ${toast.message}` : toast.message, toast.tone === 'danger' ? 'assertive' : 'polite');
+        if (toast.duration > 0) {
+            setTimeout(() => this.dismiss(id), toast.duration);
+        }
+        return id;
+    }
+    dismiss(id) {
+        this.items.update((current) => current.filter((item) => item.id !== id));
+    }
+    setPosition(position) {
+        this.positionOverride.set(position);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvToastService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvToastService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class JvToastComponent {
+    toastService = inject(JvToastService);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvToastComponent, isStandalone: true, selector: "jv-toast", ngImport: i0, template: `
+    @if (toastService.toasts().length > 0) {
+      <div class="jv-toast-viewport" [class]="'is-' + toastService.position()" aria-live="polite" aria-atomic="false">
+        @for (toast of toastService.toasts(); track toast.id) {
+          <article class="jv-toast-item" [class]="'jv-toast--' + toast.tone" [attr.role]="toast.tone === 'danger' ? 'alert' : 'status'" aria-atomic="true">
+            <div class="jv-toast-copy">
+              @if (toast.title) {
+                <strong>{{ toast.title }}</strong>
+              }
               <p>{{ toast.message }}</p>
             </div>
 
@@ -19099,43 +19396,735 @@ class JvToastComponent {
     }
   `, isInline: true, styles: [".jv-toast-viewport{position:fixed;z-index:1100;display:grid;gap:var(--jv-spacing-sm);width:min(360px,calc(100vw - 2rem))}.is-top-left{top:1rem;left:1rem}.is-top-center{top:1rem;left:50%;transform:translate(-50%)}.is-top-right{top:1rem;right:1rem}.is-bottom-left{bottom:1rem;left:1rem}.is-bottom-center{bottom:1rem;left:50%;transform:translate(-50%)}.is-bottom-right{bottom:1rem;right:1rem}.jv-toast-item{display:grid;grid-template-columns:1fr auto;gap:var(--jv-spacing-sm);padding:var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);background:var(--jv-color-surface);box-shadow:var(--jv-shadow-lg)}.jv-toast-copy strong,.jv-toast-copy p{margin:0}.jv-toast-copy{display:grid;gap:.25rem}.jv-toast-copy p{color:var(--jv-color-foreground-muted)}.jv-toast-close{display:inline-grid;place-items:center;width:2rem;height:2rem;border:0;border-radius:999px;background:transparent;color:inherit}.jv-toast--success{border-color:color-mix(in srgb,var(--jv-color-success) 35%,var(--jv-color-border))}.jv-toast--warning{border-color:color-mix(in srgb,var(--jv-color-warning) 35%,var(--jv-color-border))}.jv-toast--danger{border-color:color-mix(in srgb,var(--jv-color-danger) 35%,var(--jv-color-border))}.jv-toast--info,.jv-toast--primary{border-color:color-mix(in srgb,var(--jv-color-primary) 35%,var(--jv-color-border))}\n"], dependencies: [{ kind: "component", type: JvIconComponent, selector: "jv-icon", inputs: ["name", "size", "strokeWidth", "decorative", "ariaLabel"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvToastComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvToastComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jv-toast', standalone: true, imports: [JvIconComponent], template: `
+    @if (toastService.toasts().length > 0) {
+      <div class="jv-toast-viewport" [class]="'is-' + toastService.position()" aria-live="polite" aria-atomic="false">
+        @for (toast of toastService.toasts(); track toast.id) {
+          <article class="jv-toast-item" [class]="'jv-toast--' + toast.tone" [attr.role]="toast.tone === 'danger' ? 'alert' : 'status'" aria-atomic="true">
+            <div class="jv-toast-copy">
+              @if (toast.title) {
+                <strong>{{ toast.title }}</strong>
+              }
+              <p>{{ toast.message }}</p>
+            </div>
+
+            <button type="button" class="jv-toast-close" (click)="toastService.dismiss(toast.id)" aria-label="Dismiss notification">
+              <jv-icon name="x" [size]="16" />
+            </button>
+          </article>
+        }
+      </div>
+    }
+  `, styles: [".jv-toast-viewport{position:fixed;z-index:1100;display:grid;gap:var(--jv-spacing-sm);width:min(360px,calc(100vw - 2rem))}.is-top-left{top:1rem;left:1rem}.is-top-center{top:1rem;left:50%;transform:translate(-50%)}.is-top-right{top:1rem;right:1rem}.is-bottom-left{bottom:1rem;left:1rem}.is-bottom-center{bottom:1rem;left:50%;transform:translate(-50%)}.is-bottom-right{bottom:1rem;right:1rem}.jv-toast-item{display:grid;grid-template-columns:1fr auto;gap:var(--jv-spacing-sm);padding:var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);background:var(--jv-color-surface);box-shadow:var(--jv-shadow-lg)}.jv-toast-copy strong,.jv-toast-copy p{margin:0}.jv-toast-copy{display:grid;gap:.25rem}.jv-toast-copy p{color:var(--jv-color-foreground-muted)}.jv-toast-close{display:inline-grid;place-items:center;width:2rem;height:2rem;border:0;border-radius:999px;background:transparent;color:inherit}.jv-toast--success{border-color:color-mix(in srgb,var(--jv-color-success) 35%,var(--jv-color-border))}.jv-toast--warning{border-color:color-mix(in srgb,var(--jv-color-warning) 35%,var(--jv-color-border))}.jv-toast--danger{border-color:color-mix(in srgb,var(--jv-color-danger) 35%,var(--jv-color-border))}.jv-toast--info,.jv-toast--primary{border-color:color-mix(in srgb,var(--jv-color-primary) 35%,var(--jv-color-border))}\n"] }]
+        }] });
+
+class JvDialogComponent {
+    document = inject(DOCUMENT);
+    panelRef = viewChild('panel', ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
+    open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    title = input('Dialog', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    closed = output();
+    titleId = `jv-dialog-title-${Math.random().toString(36).slice(2, 8)}`;
+    descriptionId = `jv-dialog-description-${Math.random().toString(36).slice(2, 8)}`;
+    constructor() {
+        effect(() => {
+            if (this.open()) {
+                queueMicrotask(() => this.focusInitialElement());
+            }
+        });
+    }
+    handleDocumentKeydown(event) {
+        if (!this.open()) {
+            return;
+        }
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.closed.emit();
+            return;
+        }
+        if (event.key === 'Tab') {
+            this.trapFocus(event);
+        }
+    }
+    focusInitialElement() {
+        const panel = this.panelRef()?.nativeElement;
+        if (!panel) {
+            return;
+        }
+        const firstFocusable = this.getFocusableElements()[0];
+        (firstFocusable ?? panel).focus();
+    }
+    backdropClose() {
+        this.closed.emit();
+    }
+    trapFocus(event) {
+        const focusable = this.getFocusableElements();
+        const panel = this.panelRef()?.nativeElement;
+        if (!panel || focusable.length === 0) {
+            panel?.focus();
+            event.preventDefault();
+            return;
+        }
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        const active = this.document.activeElement;
+        if (event.shiftKey && active === first) {
+            last.focus();
+            event.preventDefault();
+        }
+        else if (!event.shiftKey && active === last) {
+            first.focus();
+            event.preventDefault();
+        }
+    }
+    getFocusableElements() {
+        const panel = this.panelRef()?.nativeElement;
+        if (!panel) {
+            return [];
+        }
+        return Array.from(panel.querySelectorAll('button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvDialogComponent, isStandalone: true, selector: "jv-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { listeners: { "document:keydown": "handleDocumentKeydown($event)" } }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (open()) {
+      <div class="jv-dialog-backdrop" (click)="backdropClose()">
+        <div class="jv-dialog-panel" role="dialog" aria-modal="true" tabindex="-1" [attr.aria-labelledby]="titleId" [attr.aria-describedby]="descriptionId" (click)="$event.stopPropagation()" #panel>
+          <header class="jv-dialog-header">
+            <h2 [id]="titleId">{{ title() }}</h2>
+          </header>
+
+          <div class="jv-dialog-body" [id]="descriptionId">
+            <ng-content></ng-content>
+          </div>
+
+          <footer class="jv-dialog-footer">
+            <ng-content select="[dialog-actions]"></ng-content>
+          </footer>
+        </div>
+      </div>
+    }
+  `, isInline: true, styles: [".jv-dialog-backdrop{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:1rem;background:#0f172a80}.jv-dialog-panel{width:min(32rem,100%);max-height:calc(100vh - 2rem);overflow:auto;padding:var(--jv-spacing-lg);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-lg);background:var(--jv-color-surface);box-shadow:var(--jv-shadow-lg)}.jv-dialog-header,.jv-dialog-body,.jv-dialog-footer{display:grid;gap:var(--jv-spacing-sm)}.jv-dialog-footer{margin-top:var(--jv-spacing-lg)}h2,p{margin:0}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jv-dialog', standalone: true, template: `
+    @if (open()) {
+      <div class="jv-dialog-backdrop" (click)="backdropClose()">
+        <div class="jv-dialog-panel" role="dialog" aria-modal="true" tabindex="-1" [attr.aria-labelledby]="titleId" [attr.aria-describedby]="descriptionId" (click)="$event.stopPropagation()" #panel>
+          <header class="jv-dialog-header">
+            <h2 [id]="titleId">{{ title() }}</h2>
+          </header>
+
+          <div class="jv-dialog-body" [id]="descriptionId">
+            <ng-content></ng-content>
+          </div>
+
+          <footer class="jv-dialog-footer">
+            <ng-content select="[dialog-actions]"></ng-content>
+          </footer>
+        </div>
+      </div>
+    }
+  `, styles: [".jv-dialog-backdrop{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:1rem;background:#0f172a80}.jv-dialog-panel{width:min(32rem,100%);max-height:calc(100vh - 2rem);overflow:auto;padding:var(--jv-spacing-lg);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-lg);background:var(--jv-color-surface);box-shadow:var(--jv-shadow-lg)}.jv-dialog-header,.jv-dialog-body,.jv-dialog-footer{display:grid;gap:var(--jv-spacing-sm)}.jv-dialog-footer{margin-top:var(--jv-spacing-lg)}h2,p{margin:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], handleDocumentKeydown: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }] } });
+
+let selectIdSequence = 0;
+class JvSelectComponent {
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    describedBy = input('', ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    inputId = input(`jv-select-${++selectIdSequence}`, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+    modelValue = input('', ...(ngDevMode ? [{ debugName: "modelValue" }] : /* istanbul ignore next */ []));
+    selectionChange = output();
+    value = '';
+    disabled = false;
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    currentValue = computed(() => this.modelValue() || this.value, ...(ngDevMode ? [{ debugName: "currentValue" }] : /* istanbul ignore next */ []));
+    writeValue(value) {
+        this.value = value ?? '';
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    handleChange(event) {
+        const nextValue = event.target.value;
+        this.value = nextValue;
+        this.onChange(nextValue);
+        this.selectionChange.emit(nextValue);
+    }
+    handleBlur() {
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvSelectComponent, isStandalone: true, selector: "jv-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "describedBy", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, modelValue: { classPropertyName: "modelValue", publicName: "modelValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => JvSelectComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: `
+    <select
+      class="jv-select"
+      [class.is-invalid]="invalid()"
+      [id]="inputId()"
+      [disabled]="disabled"
+      [required]="required()"
+      [attr.aria-invalid]="invalid() ? 'true' : null"
+      [attr.aria-describedby]="describedBy() || null"
+      [value]="currentValue()"
+      (change)="handleChange($event)"
+      (blur)="handleBlur()"
+    >
+      @if (placeholder()) {
+        <option value="" [disabled]="required()">{{ placeholder() }}</option>
+      }
+
+      @for (option of options(); track option.label + ':' + option.value) {
+        <option [value]="option.value" [disabled]="option.disabled ?? false">{{ option.label }}</option>
+      }
+    </select>
+  `, isInline: true, styles: [".jv-select{width:100%;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);background:var(--jv-color-surface);color:var(--jv-color-foreground)}.jv-select.is-invalid{border-color:var(--jv-color-danger)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jv-select', standalone: true, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => JvSelectComponent),
+                            multi: true,
+                        },
+                    ], template: `
+    <select
+      class="jv-select"
+      [class.is-invalid]="invalid()"
+      [id]="inputId()"
+      [disabled]="disabled"
+      [required]="required()"
+      [attr.aria-invalid]="invalid() ? 'true' : null"
+      [attr.aria-describedby]="describedBy() || null"
+      [value]="currentValue()"
+      (change)="handleChange($event)"
+      (blur)="handleBlur()"
+    >
+      @if (placeholder()) {
+        <option value="" [disabled]="required()">{{ placeholder() }}</option>
+      }
+
+      @for (option of options(); track option.label + ':' + option.value) {
+        <option [value]="option.value" [disabled]="option.disabled ?? false">{{ option.label }}</option>
+      }
+    </select>
+  `, styles: [".jv-select{width:100%;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);background:var(--jv-color-surface);color:var(--jv-color-foreground)}.jv-select.is-invalid{border-color:var(--jv-color-danger)}\n"] }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "describedBy", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], modelValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "modelValue", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
+
+let datePickerIdSequence = 0;
+class JvDatePickerComponent {
+    translation = inject(JvTranslationService);
+    announcementService = inject(JvAnnouncementService);
+    instanceId = ++datePickerIdSequence;
+    calendarRootRef = viewChild('calendarRoot', ...(ngDevMode ? [{ debugName: "calendarRootRef" }] : /* istanbul ignore next */ []));
+    triggerButtonRef = viewChild('triggerButton', ...(ngDevMode ? [{ debugName: "triggerButtonRef" }] : /* istanbul ignore next */ []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    dialogTitle = input('', ...(ngDevMode ? [{ debugName: "dialogTitle" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    error = input('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    describedBy = input('', ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    inputId = input(`jv-date-picker-${this.instanceId}`, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+    valueInput = input(undefined, { ...(ngDevMode ? { debugName: "valueInput" } : /* istanbul ignore next */ {}), alias: 'value' });
+    selectionChange = output();
+    dialogOpen = signal(false, ...(ngDevMode ? [{ debugName: "dialogOpen" }] : /* istanbul ignore next */ []));
+    visibleMonth = signal(firstOfMonth(new Date()), ...(ngDevMode ? [{ debugName: "visibleMonth" }] : /* istanbul ignore next */ []));
+    focusedDate = signal(startOfDay(new Date()), ...(ngDevMode ? [{ debugName: "focusedDate" }] : /* istanbul ignore next */ []));
+    dialogId = `jv-date-picker-dialog-${this.instanceId}`;
+    value = null;
+    disabled = false;
+    resolvedDialogTitle = computed(() => this.dialogTitle() || this.translation.translate('datePicker.dialogTitle'), ...(ngDevMode ? [{ debugName: "resolvedDialogTitle" }] : /* istanbul ignore next */ []));
+    currentValue = computed(() => this.valueInput() !== undefined ? this.valueInput() : this.value, ...(ngDevMode ? [{ debugName: "currentValue" }] : /* istanbul ignore next */ []));
+    triggerAriaLabel = computed(() => {
+        const name = this.label() || this.resolvedDialogTitle();
+        return `${name}. ${this.displayValue()}`;
+    }, ...(ngDevMode ? [{ debugName: "triggerAriaLabel" }] : /* istanbul ignore next */ []));
+    displayValue = computed(() => {
+        const value = this.currentValue();
+        if (!value) {
+            return this.placeholder() || this.translation.translate('datePicker.placeholder');
+        }
+        return new Intl.DateTimeFormat(this.translation.locale(), {
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric',
+        }).format(value);
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    monthOptions = computed(() => {
+        const formatter = new Intl.DateTimeFormat(this.translation.locale(), { month: 'long' });
+        return Array.from({ length: 12 }, (_, month) => ({
+            label: capitalize(formatter.format(new Date(2026, month, 1))),
+            value: String(month),
+        }));
+    }, ...(ngDevMode ? [{ debugName: "monthOptions" }] : /* istanbul ignore next */ []));
+    yearOptions = computed(() => {
+        return Array.from({ length: 201 }, (_, index) => {
+            const year = 1900 + index;
+            return { label: String(year), value: String(year) };
+        });
+    }, ...(ngDevMode ? [{ debugName: "yearOptions" }] : /* istanbul ignore next */ []));
+    weekdayLabels = computed(() => {
+        const startDay = this.firstDayOfWeek();
+        const formatter = new Intl.DateTimeFormat(this.translation.locale(), { weekday: 'short' });
+        return Array.from({ length: 7 }, (_, index) => capitalize(formatter.format(addDays(new Date(2026, 5, 7), startDay + index))));
+    }, ...(ngDevMode ? [{ debugName: "weekdayLabels" }] : /* istanbul ignore next */ []));
+    calendarCells = computed(() => {
+        const month = this.visibleMonth();
+        const firstDay = firstOfMonth(month);
+        const daysInCurrentMonth = daysInMonth(month.getFullYear(), month.getMonth());
+        const startOffset = (firstDay.getDay() - this.firstDayOfWeek() + 7) % 7;
+        const gridStart = addDays(firstDay, -startOffset);
+        return Array.from({ length: 42 }, (_, index) => {
+            const date = addDays(gridStart, index);
+            return {
+                date,
+                currentMonth: date.getMonth() === month.getMonth(),
+                isToday: sameDate(date, new Date()),
+            };
+        }).slice(0, Math.ceil((startOffset + daysInCurrentMonth) / 7) * 7);
+    }, ...(ngDevMode ? [{ debugName: "calendarCells" }] : /* istanbul ignore next */ []));
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    writeValue(value) {
+        this.value = value ? startOfDay(value) : null;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    openDialog() {
+        if (this.disabled) {
+            return;
+        }
+        const baseDate = this.currentValue() ?? startOfDay(new Date());
+        this.visibleMonth.set(firstOfMonth(baseDate));
+        this.focusedDate.set(baseDate);
+        this.dialogOpen.set(true);
+        queueMicrotask(() => this.focusDateButton(baseDate));
+    }
+    closeDialog() {
+        this.dialogOpen.set(false);
+        this.handleBlur();
+        queueMicrotask(() => this.triggerButtonRef()?.nativeElement.focus());
+    }
+    clearSelection() {
+        this.updateValue(null);
+        this.announcementService.announce(this.translation.translate('datePicker.selectionCleared'), 'polite');
+        this.closeDialog();
+    }
+    shiftMonth(offset) {
+        const month = this.visibleMonth();
+        const nextMonth = firstOfMonth(new Date(month.getFullYear(), month.getMonth() + offset, 1));
+        this.visibleMonth.set(nextMonth);
+        this.focusDateWithinVisibleMonth(this.focusedDate());
+    }
+    handleMonthChange(value) {
+        const month = Number(value);
+        const current = this.visibleMonth();
+        this.visibleMonth.set(firstOfMonth(new Date(current.getFullYear(), month, 1)));
+        this.focusDateWithinVisibleMonth(this.focusedDate());
+    }
+    handleYearChange(value) {
+        const year = Number(value);
+        const current = this.visibleMonth();
+        this.visibleMonth.set(firstOfMonth(new Date(year, current.getMonth(), 1)));
+        this.focusDateWithinVisibleMonth(this.focusedDate());
+    }
+    selectDate(date) {
+        const nextValue = startOfDay(date);
+        this.updateValue(nextValue);
+        this.announcementService.announce(this.displayDateForAnnouncement(nextValue), 'polite');
+        this.closeDialog();
+    }
+    handleDayKeydown(event, date) {
+        let nextDate = null;
+        switch (event.key) {
+            case 'ArrowRight':
+                nextDate = addDays(date, 1);
+                break;
+            case 'ArrowLeft':
+                nextDate = addDays(date, -1);
+                break;
+            case 'ArrowDown':
+                nextDate = addDays(date, 7);
+                break;
+            case 'ArrowUp':
+                nextDate = addDays(date, -7);
+                break;
+            case 'Home':
+                nextDate = addDays(date, -((date.getDay() - this.firstDayOfWeek() + 7) % 7));
+                break;
+            case 'End':
+                nextDate = addDays(date, 6 - ((date.getDay() - this.firstDayOfWeek() + 7) % 7));
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                this.selectDate(date);
+                return;
+        }
+        if (!nextDate) {
+            return;
+        }
+        event.preventDefault();
+        this.focusedDate.set(nextDate);
+        this.visibleMonth.set(firstOfMonth(nextDate));
+        queueMicrotask(() => this.focusDateButton(nextDate));
+    }
+    isSelected(date) {
+        return sameDate(date, this.currentValue());
+    }
+    isFocusedDate(date) {
+        return sameDate(date, this.focusedDate());
+    }
+    isoDate(date) {
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const day = String(date.getDate()).padStart(2, '0');
+        return `${year}-${month}-${day}`;
+    }
+    handleBlur() {
+        this.onTouched();
+    }
+    updateValue(value) {
+        this.value = value;
+        this.onChange(value);
+        this.selectionChange.emit(value);
+    }
+    focusDateWithinVisibleMonth(date) {
+        const month = this.visibleMonth();
+        const nextDate = startOfDay(new Date(month.getFullYear(), month.getMonth(), Math.min(date.getDate(), daysInMonth(month.getFullYear(), month.getMonth()))));
+        this.focusedDate.set(nextDate);
+        queueMicrotask(() => this.focusDateButton(nextDate));
+    }
+    focusDateButton(date) {
+        const root = this.calendarRootRef()?.nativeElement;
+        root?.querySelector(`[data-jv-date="${this.isoDate(date)}"]`)?.focus();
+    }
+    firstDayOfWeek() {
+        return this.translation.locale() === 'es' ? 1 : 0;
+    }
+    displayDateForAnnouncement(date) {
+        return new Intl.DateTimeFormat(this.translation.locale(), {
+            weekday: 'long',
+            day: 'numeric',
+            month: 'long',
+            year: 'numeric',
+        }).format(date);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvDatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvDatePickerComponent, isStandalone: true, selector: "jv-date-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, dialogTitle: { classPropertyName: "dialogTitle", publicName: "dialogTitle", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "describedBy", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => JvDatePickerComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "calendarRootRef", first: true, predicate: ["calendarRoot"], descendants: true, isSignal: true }, { propertyName: "triggerButtonRef", first: true, predicate: ["triggerButton"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <jv-form-container
+      [label]="label()"
+      [inputId]="inputId()"
+      [required]="required()"
+      [invalid]="invalid()"
+      [hint]="hint()"
+      [error]="error()"
+    >
+      <button
+        #triggerButton
+        type="button"
+        class="jv-date-picker-trigger"
+        [class.is-invalid]="invalid()"
+        [id]="inputId()"
+        [disabled]="disabled"
+        [attr.aria-haspopup]="'dialog'"
+        [attr.aria-expanded]="dialogOpen() ? 'true' : 'false'"
+        [attr.aria-controls]="dialogId"
+        [attr.aria-invalid]="invalid() ? 'true' : null"
+        [attr.aria-describedby]="describedBy() || null"
+        [attr.aria-label]="triggerAriaLabel()"
+        [attr.title]="displayValue()"
+        (click)="openDialog()"
+        (blur)="handleBlur()"
+      >
+        <span [class.jv-date-picker-placeholder]="!currentValue()">{{ displayValue() }}</span>
+        <jv-icon name="calendar-days" [size]="18" />
+      </button>
+    </jv-form-container>
+
+    <jv-dialog [open]="dialogOpen()" [title]="resolvedDialogTitle()" (closed)="closeDialog()">
+      <div #calendarRoot [id]="dialogId" class="jv-date-picker-dialog">
+        <div class="jv-date-picker-toolbar">
+          <jv-icon-button icon="chevron-left" variant="ghost" [ariaLabel]="translation.translate('datePicker.prevMonth')" (click)="shiftMonth(-1)" />
+
+          <div class="jv-date-picker-selects">
+            <jv-select [options]="monthOptions()" [modelValue]="visibleMonth().getMonth().toString()" (selectionChange)="handleMonthChange($event)" />
+            <jv-select [options]="yearOptions()" [modelValue]="visibleMonth().getFullYear().toString()" (selectionChange)="handleYearChange($event)" />
+          </div>
+
+          <jv-icon-button icon="chevron-right" variant="ghost" [ariaLabel]="translation.translate('datePicker.nextMonth')" (click)="shiftMonth(1)" />
+        </div>
+
+        <div class="jv-date-picker-weekdays" aria-hidden="true">
+          @for (weekday of weekdayLabels(); track weekday) {
+            <span>{{ weekday }}</span>
+          }
+        </div>
+
+        <div class="jv-date-picker-grid" role="grid" [attr.aria-label]="resolvedDialogTitle()">
+          @for (cell of calendarCells(); track isoDate(cell.date)) {
+            <button
+              type="button"
+              class="jv-date-picker-day"
+              [class.jv-date-picker-day--outside]="!cell.currentMonth"
+              [class.jv-date-picker-day--today]="cell.isToday"
+              [class.jv-date-picker-day--selected]="isSelected(cell.date)"
+              [attr.data-jv-date]="isoDate(cell.date)"
+              [attr.tabindex]="isFocusedDate(cell.date) ? 0 : -1"
+              [attr.aria-selected]="isSelected(cell.date) ? 'true' : 'false'"
+              (click)="selectDate(cell.date)"
+              (keydown)="handleDayKeydown($event, cell.date)"
+            >
+              {{ cell.date.getDate() }}
+            </button>
+          }
+        </div>
+      </div>
+
+      <div dialog-actions class="jv-date-picker-actions">
+        @if (currentValue()) {
+          <jv-button variant="ghost" (click)="clearSelection()">{{ translation.translate('datePicker.clear') }}</jv-button>
+        }
+        <jv-button variant="outline" (click)="closeDialog()">{{ translation.translate('datePicker.close') }}</jv-button>
+      </div>
+    </jv-dialog>
+  `, isInline: true, styles: [".jv-date-picker-trigger{width:100%;min-height:var(--jv-density-control-height);display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-sm);padding:0 var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);background:var(--jv-color-surface);color:var(--jv-color-foreground);text-align:left;font:inherit;cursor:pointer}.jv-date-picker-trigger.is-invalid{border-color:var(--jv-color-danger)}.jv-date-picker-trigger:disabled{opacity:.7;cursor:not-allowed}.jv-date-picker-trigger:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:1px}.jv-date-picker-placeholder{color:var(--jv-color-foreground-muted)}.jv-date-picker-dialog,.jv-date-picker-actions{display:grid;gap:var(--jv-spacing-md)}.jv-date-picker-toolbar,.jv-date-picker-selects,.jv-date-picker-weekdays,.jv-date-picker-grid{display:grid;gap:var(--jv-spacing-sm)}.jv-date-picker-toolbar{grid-template-columns:auto 1fr auto;align-items:center}.jv-date-picker-selects{grid-template-columns:1fr 1fr}.jv-date-picker-weekdays,.jv-date-picker-grid{grid-template-columns:repeat(7,minmax(0,1fr))}.jv-date-picker-weekdays span{text-align:center;font-size:.8125rem;font-weight:600;color:var(--jv-color-foreground-muted)}.jv-date-picker-day{min-height:2.5rem;border:1px solid transparent;border-radius:var(--jv-radius-md);background:transparent;color:var(--jv-color-foreground);font:inherit;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease}.jv-date-picker-day:hover,.jv-date-picker-day:focus-visible{background:var(--jv-color-surface-muted)}.jv-date-picker-day:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:1px}.jv-date-picker-day--outside{color:var(--jv-color-foreground-muted)}.jv-date-picker-day--today{border-color:var(--jv-color-primary)}.jv-date-picker-day--selected{background:var(--jv-color-primary);color:#fff}\n"], dependencies: [{ kind: "component", type: JvButtonComponent, selector: "jv-button", inputs: ["type", "variant", "icon", "iconPosition", "loading", "disabled"] }, { kind: "component", type: JvDialogComponent, selector: "jv-dialog", inputs: ["open", "title"], outputs: ["closed"] }, { kind: "component", type: JvFormContainerComponent, selector: "jv-form-container", inputs: ["label", "hint", "error", "inputId", "hintId", "errorId", "required", "invalid"] }, { kind: "component", type: JvIconButtonComponent, selector: "jv-icon-button", inputs: ["icon", "ariaLabel", "variant", "disabled"] }, { kind: "component", type: JvIconComponent, selector: "jv-icon", inputs: ["name", "size", "strokeWidth", "decorative", "ariaLabel"] }, { kind: "component", type: JvSelectComponent, selector: "jv-select", inputs: ["options", "placeholder", "required", "invalid", "describedBy", "inputId", "modelValue"], outputs: ["selectionChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvDatePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jv-date-picker', standalone: true, imports: [JvButtonComponent, JvDialogComponent, JvFormContainerComponent, JvIconButtonComponent, JvIconComponent, JvSelectComponent], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => JvDatePickerComponent),
+                            multi: true,
+                        },
+                    ], template: `
+    <jv-form-container
+      [label]="label()"
+      [inputId]="inputId()"
+      [required]="required()"
+      [invalid]="invalid()"
+      [hint]="hint()"
+      [error]="error()"
+    >
+      <button
+        #triggerButton
+        type="button"
+        class="jv-date-picker-trigger"
+        [class.is-invalid]="invalid()"
+        [id]="inputId()"
+        [disabled]="disabled"
+        [attr.aria-haspopup]="'dialog'"
+        [attr.aria-expanded]="dialogOpen() ? 'true' : 'false'"
+        [attr.aria-controls]="dialogId"
+        [attr.aria-invalid]="invalid() ? 'true' : null"
+        [attr.aria-describedby]="describedBy() || null"
+        [attr.aria-label]="triggerAriaLabel()"
+        [attr.title]="displayValue()"
+        (click)="openDialog()"
+        (blur)="handleBlur()"
+      >
+        <span [class.jv-date-picker-placeholder]="!currentValue()">{{ displayValue() }}</span>
+        <jv-icon name="calendar-days" [size]="18" />
+      </button>
+    </jv-form-container>
+
+    <jv-dialog [open]="dialogOpen()" [title]="resolvedDialogTitle()" (closed)="closeDialog()">
+      <div #calendarRoot [id]="dialogId" class="jv-date-picker-dialog">
+        <div class="jv-date-picker-toolbar">
+          <jv-icon-button icon="chevron-left" variant="ghost" [ariaLabel]="translation.translate('datePicker.prevMonth')" (click)="shiftMonth(-1)" />
+
+          <div class="jv-date-picker-selects">
+            <jv-select [options]="monthOptions()" [modelValue]="visibleMonth().getMonth().toString()" (selectionChange)="handleMonthChange($event)" />
+            <jv-select [options]="yearOptions()" [modelValue]="visibleMonth().getFullYear().toString()" (selectionChange)="handleYearChange($event)" />
+          </div>
+
+          <jv-icon-button icon="chevron-right" variant="ghost" [ariaLabel]="translation.translate('datePicker.nextMonth')" (click)="shiftMonth(1)" />
+        </div>
+
+        <div class="jv-date-picker-weekdays" aria-hidden="true">
+          @for (weekday of weekdayLabels(); track weekday) {
+            <span>{{ weekday }}</span>
+          }
+        </div>
+
+        <div class="jv-date-picker-grid" role="grid" [attr.aria-label]="resolvedDialogTitle()">
+          @for (cell of calendarCells(); track isoDate(cell.date)) {
+            <button
+              type="button"
+              class="jv-date-picker-day"
+              [class.jv-date-picker-day--outside]="!cell.currentMonth"
+              [class.jv-date-picker-day--today]="cell.isToday"
+              [class.jv-date-picker-day--selected]="isSelected(cell.date)"
+              [attr.data-jv-date]="isoDate(cell.date)"
+              [attr.tabindex]="isFocusedDate(cell.date) ? 0 : -1"
+              [attr.aria-selected]="isSelected(cell.date) ? 'true' : 'false'"
+              (click)="selectDate(cell.date)"
+              (keydown)="handleDayKeydown($event, cell.date)"
+            >
+              {{ cell.date.getDate() }}
+            </button>
+          }
+        </div>
+      </div>
+
+      <div dialog-actions class="jv-date-picker-actions">
+        @if (currentValue()) {
+          <jv-button variant="ghost" (click)="clearSelection()">{{ translation.translate('datePicker.clear') }}</jv-button>
+        }
+        <jv-button variant="outline" (click)="closeDialog()">{{ translation.translate('datePicker.close') }}</jv-button>
+      </div>
+    </jv-dialog>
+  `, styles: [".jv-date-picker-trigger{width:100%;min-height:var(--jv-density-control-height);display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-sm);padding:0 var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);background:var(--jv-color-surface);color:var(--jv-color-foreground);text-align:left;font:inherit;cursor:pointer}.jv-date-picker-trigger.is-invalid{border-color:var(--jv-color-danger)}.jv-date-picker-trigger:disabled{opacity:.7;cursor:not-allowed}.jv-date-picker-trigger:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:1px}.jv-date-picker-placeholder{color:var(--jv-color-foreground-muted)}.jv-date-picker-dialog,.jv-date-picker-actions{display:grid;gap:var(--jv-spacing-md)}.jv-date-picker-toolbar,.jv-date-picker-selects,.jv-date-picker-weekdays,.jv-date-picker-grid{display:grid;gap:var(--jv-spacing-sm)}.jv-date-picker-toolbar{grid-template-columns:auto 1fr auto;align-items:center}.jv-date-picker-selects{grid-template-columns:1fr 1fr}.jv-date-picker-weekdays,.jv-date-picker-grid{grid-template-columns:repeat(7,minmax(0,1fr))}.jv-date-picker-weekdays span{text-align:center;font-size:.8125rem;font-weight:600;color:var(--jv-color-foreground-muted)}.jv-date-picker-day{min-height:2.5rem;border:1px solid transparent;border-radius:var(--jv-radius-md);background:transparent;color:var(--jv-color-foreground);font:inherit;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease}.jv-date-picker-day:hover,.jv-date-picker-day:focus-visible{background:var(--jv-color-surface-muted)}.jv-date-picker-day:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:1px}.jv-date-picker-day--outside{color:var(--jv-color-foreground-muted)}.jv-date-picker-day--today{border-color:var(--jv-color-primary)}.jv-date-picker-day--selected{background:var(--jv-color-primary);color:#fff}\n"] }]
+        }], propDecorators: { calendarRootRef: [{ type: i0.ViewChild, args: ['calendarRoot', { isSignal: true }] }], triggerButtonRef: [{ type: i0.ViewChild, args: ['triggerButton', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], dialogTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogTitle", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "describedBy", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], valueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
+function daysInMonth(year, month) {
+    return new Date(year, month + 1, 0).getDate();
+}
+function firstOfMonth(date) {
+    return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+function startOfDay(date) {
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+function addDays(date, amount) {
+    return startOfDay(new Date(date.getFullYear(), date.getMonth(), date.getDate() + amount));
+}
+function sameDate(left, right) {
+    if (!left || !right) {
+        return false;
+    }
+    return left.getFullYear() === right.getFullYear() && left.getMonth() === right.getMonth() && left.getDate() === right.getDate();
+}
+function capitalize(value) {
+    return value.charAt(0).toUpperCase() + value.slice(1);
+}
+
+class JvListComponent {
+    role = input('list', ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+    ariaRole = input(null, ...(ngDevMode ? [{ debugName: "ariaRole" }] : /* istanbul ignore next */ []));
+    variant = input(null, ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    variantClass = computed(() => {
+        const v = this.variant();
+        return v ? `jv-list--${v}` : '';
+    }, ...(ngDevMode ? [{ debugName: "variantClass" }] : /* istanbul ignore next */ []));
+    resolvedRole = computed(() => this.ariaRole() ?? (this.role() === 'navigation' ? 'list' : null), ...(ngDevMode ? [{ debugName: "resolvedRole" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: JvListComponent, isStandalone: true, selector: "jv-list", inputs: { role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaRole: { classPropertyName: "ariaRole", publicName: "ariaRole", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <ul
+      class="jv-list"
+      [class]="variantClass()"
+      [attr.role]="resolvedRole()"
+      [attr.aria-label]="ariaLabel()"
+    >
+      <ng-content />
+    </ul>
+  `, isInline: true, styles: [".jv-list{display:block;list-style:none;margin:0;padding:0}.jv-list>:not(:last-child){border-bottom:1px solid var(--jv-color-border)}.jv-list--bordered{border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'jv-toast', standalone: true, imports: [JvIconComponent], template: `
-    @if (toastService.toasts().length > 0) {
-      <div class="jv-toast-viewport" [class]="'is-' + toastService.position()" aria-live="polite" aria-atomic="false">
-        @for (toast of toastService.toasts(); track toast.id) {
-          <article class="jv-toast-item" [class]="'jv-toast--' + toast.tone" [attr.role]="toast.tone === 'danger' ? 'alert' : 'status'" aria-atomic="true">
-            <div class="jv-toast-copy">
-              @if (toast.title) {
-                <strong>{{ toast.title }}</strong>
-              }
-              <p>{{ toast.message }}</p>
-            </div>
-
-            <button type="button" class="jv-toast-close" (click)="toastService.dismiss(toast.id)" aria-label="Dismiss notification">
-              <jv-icon name="x" [size]="16" />
-            </button>
-          </article>
-        }
-      </div>
-    }
-  `, styles: [".jv-toast-viewport{position:fixed;z-index:1100;display:grid;gap:var(--jv-spacing-sm);width:min(360px,calc(100vw - 2rem))}.is-top-left{top:1rem;left:1rem}.is-top-center{top:1rem;left:50%;transform:translate(-50%)}.is-top-right{top:1rem;right:1rem}.is-bottom-left{bottom:1rem;left:1rem}.is-bottom-center{bottom:1rem;left:50%;transform:translate(-50%)}.is-bottom-right{bottom:1rem;right:1rem}.jv-toast-item{display:grid;grid-template-columns:1fr auto;gap:var(--jv-spacing-sm);padding:var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);background:var(--jv-color-surface);box-shadow:var(--jv-shadow-lg)}.jv-toast-copy strong,.jv-toast-copy p{margin:0}.jv-toast-copy{display:grid;gap:.25rem}.jv-toast-copy p{color:var(--jv-color-foreground-muted)}.jv-toast-close{display:inline-grid;place-items:center;width:2rem;height:2rem;border:0;border-radius:999px;background:transparent;color:inherit}.jv-toast--success{border-color:color-mix(in srgb,var(--jv-color-success) 35%,var(--jv-color-border))}.jv-toast--warning{border-color:color-mix(in srgb,var(--jv-color-warning) 35%,var(--jv-color-border))}.jv-toast--danger{border-color:color-mix(in srgb,var(--jv-color-danger) 35%,var(--jv-color-border))}.jv-toast--info,.jv-toast--primary{border-color:color-mix(in srgb,var(--jv-color-primary) 35%,var(--jv-color-border))}\n"] }]
-        }] });
+            args: [{ selector: 'jv-list', standalone: true, template: `
+    <ul
+      class="jv-list"
+      [class]="variantClass()"
+      [attr.role]="resolvedRole()"
+      [attr.aria-label]="ariaLabel()"
+    >
+      <ng-content />
+    </ul>
+  `, styles: [".jv-list{display:block;list-style:none;margin:0;padding:0}.jv-list>:not(:last-child){border-bottom:1px solid var(--jv-color-border)}.jv-list--bordered{border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md)}\n"] }]
+        }], propDecorators: { role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], ariaRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaRole", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
-let radioIdSequence = 0;
-class JvRadioComponent {
-    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+let modalSelectorIdSequence = 0;
+class JvModalSelectorComponent {
+    announcementService = inject(JvAnnouncementService);
+    translation = inject(JvTranslationService);
+    instanceId = ++modalSelectorIdSequence;
+    triggerButtonRef = viewChild('triggerButton', ...(ngDevMode ? [{ debugName: "triggerButtonRef" }] : /* istanbul ignore next */ []));
+    optionElements = viewChildren('optionElement', ...(ngDevMode ? [{ debugName: "optionElements" }] : /* istanbul ignore next */ []));
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    radioValue = input.required(...(ngDevMode ? [{ debugName: "radioValue" }] : /* istanbul ignore next */ []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    dialogTitle = input('', ...(ngDevMode ? [{ debugName: "dialogTitle" }] : /* istanbul ignore next */ []));
+    dialogSubtitle = input('', ...(ngDevMode ? [{ debugName: "dialogSubtitle" }] : /* istanbul ignore next */ []));
+    searchPlaceholder = input('', ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+    emptyMessage = input('', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+    clearLabel = input('', ...(ngDevMode ? [{ debugName: "clearLabel" }] : /* istanbul ignore next */ []));
+    closeLabel = input('', ...(ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []));
+    showSearch = input(true, ...(ngDevMode ? [{ debugName: "showSearch" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    error = input('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
     describedBy = input('', ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
-    inputId = input(`jv-radio-${++radioIdSequence}`, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
-    value = '';
+    inputId = input(`jv-modal-selector-${this.instanceId}`, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+    valueInput = input(undefined, { ...(ngDevMode ? { debugName: "valueInput" } : /* istanbul ignore next */ {}), alias: 'value' });
+    selectionChange = output();
+    dialogOpen = signal(false, ...(ngDevMode ? [{ debugName: "dialogOpen" }] : /* istanbul ignore next */ []));
+    searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : /* istanbul ignore next */ []));
+    dialogId = `jv-modal-selector-dialog-${this.instanceId}`;
+    searchInputId = `jv-modal-selector-search-${this.instanceId}`;
+    value = null;
     disabled = false;
+    resolvedDialogTitle = computed(() => this.dialogTitle() || this.label() || this.translation.translate('modalSelector.placeholder'), ...(ngDevMode ? [{ debugName: "resolvedDialogTitle" }] : /* istanbul ignore next */ []));
+    currentValue = computed(() => (this.valueInput() !== undefined ? this.valueInput() : this.value), ...(ngDevMode ? [{ debugName: "currentValue" }] : /* istanbul ignore next */ []));
+    selectedOption = computed(() => this.options().find((option) => Object.is(option.value, this.currentValue())) ?? null, ...(ngDevMode ? [{ debugName: "selectedOption" }] : /* istanbul ignore next */ []));
+    resolvedPlaceholder = computed(() => this.placeholder() || this.translation.translate('modalSelector.placeholder'), ...(ngDevMode ? [{ debugName: "resolvedPlaceholder" }] : /* istanbul ignore next */ []));
+    triggerAriaLabel = computed(() => {
+        const name = this.label() || this.resolvedDialogTitle();
+        const value = this.selectedOption()?.label ?? this.resolvedPlaceholder();
+        return `${name}. ${value}`;
+    }, ...(ngDevMode ? [{ debugName: "triggerAriaLabel" }] : /* istanbul ignore next */ []));
+    resultsLabel = computed(() => this.translation.translate('modalSelector.results', { count: this.filteredOptions().length }), ...(ngDevMode ? [{ debugName: "resultsLabel" }] : /* istanbul ignore next */ []));
+    filteredOptions = computed(() => {
+        const query = this.searchQuery().trim().toLocaleLowerCase();
+        if (!query) {
+            return this.options();
+        }
+        return this.options().filter((option) => {
+            const haystack = [option.label, option.description ?? '', ...(option.keywords ?? [])].join(' ').toLocaleLowerCase();
+            return haystack.includes(query);
+        });
+    }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
     onChange = () => undefined;
     onTouched = () => undefined;
     writeValue(value) {
-        this.value = value ?? '';
+        this.value = value ?? null;
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -19146,77 +20135,312 @@ class JvRadioComponent {
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
     }
-    handleChange() {
-        const nextValue = this.radioValue();
-        this.value = nextValue;
-        this.onChange(nextValue);
+    openDialog() {
+        if (this.disabled) {
+            return;
+        }
+        this.searchQuery.set('');
+        this.dialogOpen.set(true);
+    }
+    closeDialog() {
+        this.dialogOpen.set(false);
+        this.handleBlur();
+        queueMicrotask(() => this.triggerButtonRef()?.nativeElement.focus());
+    }
+    clearSelection() {
+        this.updateValue(null);
+        this.announcementService.announce(this.translation.translate('modalSelector.selectionCleared'), 'polite');
+        this.closeDialog();
+    }
+    selectOption(option) {
+        if (option.disabled) {
+            return;
+        }
+        this.updateValue(option.value);
+        this.announcementService.announce(this.translation.translate('modalSelector.selected', { label: option.label }), 'polite');
+        this.closeDialog();
+    }
+    isSelected(option) {
+        return Object.is(option.value, this.currentValue());
+    }
+    getOptionTabIndex(option, index) {
+        if (option.disabled) {
+            return -1;
+        }
+        const selected = this.filteredOptions().find((item) => this.isSelected(item) && !item.disabled);
+        if (selected) {
+            return this.isSelected(option) ? 0 : -1;
+        }
+        const firstEnabledIndex = this.filteredOptions().findIndex((item) => !item.disabled);
+        return index === firstEnabledIndex ? 0 : -1;
+    }
+    optionId(index) {
+        return `jv-modal-selector-option-${this.instanceId}-${index}`;
+    }
+    handleOptionKeydown(event, index, option) {
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.focusRelativeOption(index, 1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.focusRelativeOption(index, -1);
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.focusOptionByIndex(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                this.focusOptionByIndex(this.filteredOptions().length - 1);
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                this.selectOption(option);
+                break;
+        }
     }
     handleBlur() {
         this.onTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: JvRadioComponent, isStandalone: true, selector: "jv-radio", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, radioValue: { classPropertyName: "radioValue", publicName: "radioValue", isSignal: true, isRequired: true, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "describedBy", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    updateValue(value) {
+        this.value = value;
+        this.onChange(value);
+        this.selectionChange.emit(value);
+    }
+    focusRelativeOption(startIndex, direction) {
+        const options = this.filteredOptions();
+        for (let offset = 1; offset <= options.length; offset++) {
+            const candidateIndex = (startIndex + direction * offset + options.length) % options.length;
+            if (!options[candidateIndex]?.disabled) {
+                this.focusOptionByIndex(candidateIndex);
+                return;
+            }
+        }
+    }
+    focusOptionByIndex(index) {
+        const optionElements = this.optionElements();
+        optionElements?.[index]?.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvModalSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvModalSelectorComponent, isStandalone: true, selector: "jv-modal-selector", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, dialogTitle: { classPropertyName: "dialogTitle", publicName: "dialogTitle", isSignal: true, isRequired: false, transformFunction: null }, dialogSubtitle: { classPropertyName: "dialogSubtitle", publicName: "dialogSubtitle", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "describedBy", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => JvRadioComponent),
+                useExisting: forwardRef(() => JvModalSelectorComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: `
-    <label class="jv-radio" [class.is-disabled]="disabled">
-      <input
-        type="radio"
-        [id]="inputId()"
-        [name]="name()"
-        [checked]="value === radioValue()"
-        [disabled]="disabled"
-        [attr.aria-describedby]="describedBy() || null"
-        (change)="handleChange()"
-        (blur)="handleBlur()"
-      />
-      <span>{{ label() }}</span>
-    </label>
-  `, isInline: true, styles: [".jv-radio{display:inline-flex;align-items:center;gap:var(--jv-spacing-sm);min-height:var(--jv-density-control-height);color:var(--jv-color-foreground)}.jv-radio.is-disabled{opacity:.7}\n"] });
+        ], viewQueries: [{ propertyName: "triggerButtonRef", first: true, predicate: ["triggerButton"], descendants: true, isSignal: true }, { propertyName: "optionElements", predicate: ["optionElement"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <jv-form-container
+      [label]="label()"
+      [inputId]="inputId()"
+      [required]="required()"
+      [invalid]="invalid()"
+      [hint]="hint()"
+      [error]="error()"
+    >
+      <button
+        #triggerButton
+        type="button"
+        class="jv-modal-selector-trigger"
+        [class.is-invalid]="invalid()"
+        [id]="inputId()"
+        [disabled]="disabled"
+        [attr.aria-haspopup]="'dialog'"
+        [attr.aria-expanded]="dialogOpen() ? 'true' : 'false'"
+        [attr.aria-controls]="dialogId"
+        [attr.aria-invalid]="invalid() ? 'true' : null"
+        [attr.aria-describedby]="describedBy() || null"
+        [attr.aria-label]="triggerAriaLabel()"
+        (click)="openDialog()"
+        (blur)="handleBlur()"
+      >
+        <span class="jv-modal-selector-trigger-copy">
+          <span [class.jv-modal-selector-trigger-placeholder]="!selectedOption()">
+            {{ selectedOption()?.label ?? resolvedPlaceholder() }}
+          </span>
+        </span>
+        <jv-icon name="chevrons-up-down" [size]="18" />
+      </button>
+    </jv-form-container>
+
+    <jv-dialog [open]="dialogOpen()" [title]="resolvedDialogTitle()" (closed)="closeDialog()">
+      <div [id]="dialogId" class="jv-modal-selector-dialog">
+        @if (dialogSubtitle()) {
+          <p class="jv-modal-selector-subtitle">{{ dialogSubtitle() }}</p>
+        }
+
+        @if (showSearch()) {
+          <jv-input
+            type="search"
+            [inputId]="searchInputId"
+            [placeholder]="searchPlaceholder() || translation.translate('modalSelector.searchPlaceholder')"
+            [ngModel]="searchQuery()"
+            (ngModelChange)="searchQuery.set($event)"
+          />
+        }
+
+        <p class="jv-modal-selector-results" aria-live="polite">{{ resultsLabel() }}</p>
+
+        @if (filteredOptions().length > 0) {
+          <jv-list variant="bordered" [ariaRole]="'listbox'" [ariaLabel]="resolvedDialogTitle()">
+            @for (option of filteredOptions(); track option.value; let index = $index) {
+              <li role="presentation">
+                <div
+                  #optionElement
+                  class="jv-modal-selector-option"
+                  [class.jv-modal-selector-option--selected]="isSelected(option)"
+                  [class.jv-modal-selector-option--disabled]="option.disabled ?? false"
+                  [id]="optionId(index)"
+                  role="option"
+                  [attr.aria-selected]="isSelected(option) ? 'true' : 'false'"
+                  [attr.tabindex]="getOptionTabIndex(option, index)"
+                  (click)="selectOption(option)"
+                  (keydown)="handleOptionKeydown($event, index, option)"
+                >
+                  <div class="jv-modal-selector-option-copy">
+                    <span class="jv-modal-selector-option-label">{{ option.label }}</span>
+                    @if (option.description) {
+                      <span class="jv-modal-selector-option-description">{{ option.description }}</span>
+                    }
+                  </div>
+                  @if (isSelected(option)) {
+                    <jv-icon name="check" [size]="16" />
+                  }
+                </div>
+              </li>
+            }
+          </jv-list>
+        } @else {
+          <div class="jv-modal-selector-empty" aria-live="polite">{{ emptyMessage() || translation.translate('modalSelector.emptyMessage') }}</div>
+        }
+      </div>
+
+      <div dialog-actions class="jv-modal-selector-actions">
+        @if (selectedOption()) {
+          <jv-button variant="ghost" (click)="clearSelection()">{{ clearLabel() || translation.translate('modalSelector.clear') }}</jv-button>
+        }
+        <jv-button variant="outline" (click)="closeDialog()">{{ closeLabel() || translation.translate('modalSelector.close') }}</jv-button>
+      </div>
+    </jv-dialog>
+  `, isInline: true, styles: [".jv-modal-selector-trigger{width:100%;min-height:var(--jv-density-control-height);display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-sm);padding:0 var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);background:var(--jv-color-surface);color:var(--jv-color-foreground);text-align:left;font:inherit;cursor:pointer}.jv-modal-selector-trigger.is-invalid{border-color:var(--jv-color-danger)}.jv-modal-selector-trigger:disabled{opacity:.7;cursor:not-allowed}.jv-modal-selector-trigger:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:1px}.jv-modal-selector-trigger-copy{min-width:0;flex:1}.jv-modal-selector-trigger-placeholder{color:var(--jv-color-foreground-muted)}.jv-modal-selector-dialog,.jv-modal-selector-actions{display:grid;gap:var(--jv-spacing-md)}.jv-modal-selector-subtitle,.jv-modal-selector-results,.jv-modal-selector-option-description,.jv-modal-selector-empty{margin:0;color:var(--jv-color-foreground-muted)}.jv-modal-selector-empty{padding:var(--jv-spacing-md);border:1px dashed var(--jv-color-border);border-radius:var(--jv-radius-md);text-align:center}.jv-modal-selector-option{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);padding:var(--jv-spacing-md);background:var(--jv-color-surface);cursor:pointer;outline:none;transition:background-color .16s ease}.jv-modal-selector-option:hover,.jv-modal-selector-option:focus-visible{background:var(--jv-color-surface-muted)}.jv-modal-selector-option:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-modal-selector-option--selected{background:color-mix(in srgb,var(--jv-color-primary) 8%,var(--jv-color-surface))}.jv-modal-selector-option--disabled{opacity:.55;cursor:not-allowed;pointer-events:none}.jv-modal-selector-option-copy{min-width:0;display:grid;gap:.25rem}.jv-modal-selector-option-label{font-weight:600;color:var(--jv-color-foreground)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: JvButtonComponent, selector: "jv-button", inputs: ["type", "variant", "icon", "iconPosition", "loading", "disabled"] }, { kind: "component", type: JvDialogComponent, selector: "jv-dialog", inputs: ["open", "title"], outputs: ["closed"] }, { kind: "component", type: JvFormContainerComponent, selector: "jv-form-container", inputs: ["label", "hint", "error", "inputId", "hintId", "errorId", "required", "invalid"] }, { kind: "component", type: JvIconComponent, selector: "jv-icon", inputs: ["name", "size", "strokeWidth", "decorative", "ariaLabel"] }, { kind: "component", type: JvInputComponent, selector: "jv-input", inputs: ["type", "placeholder", "required", "invalid", "describedBy", "inputId"] }, { kind: "component", type: JvListComponent, selector: "jv-list", inputs: ["role", "ariaRole", "variant", "ariaLabel"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvRadioComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvModalSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'jv-radio', standalone: true, providers: [
+            args: [{ selector: 'jv-modal-selector', standalone: true, imports: [FormsModule, JvButtonComponent, JvDialogComponent, JvFormContainerComponent, JvIconComponent, JvInputComponent, JvListComponent], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => JvRadioComponent),
+                            useExisting: forwardRef(() => JvModalSelectorComponent),
                             multi: true,
                         },
-                    ], template: `
-    <label class="jv-radio" [class.is-disabled]="disabled">
-      <input
-        type="radio"
-        [id]="inputId()"
-        [name]="name()"
-        [checked]="value === radioValue()"
-        [disabled]="disabled"
-        [attr.aria-describedby]="describedBy() || null"
-        (change)="handleChange()"
-        (blur)="handleBlur()"
-      />
-      <span>{{ label() }}</span>
-    </label>
-  `, styles: [".jv-radio{display:inline-flex;align-items:center;gap:var(--jv-spacing-sm);min-height:var(--jv-density-control-height);color:var(--jv-color-foreground)}.jv-radio.is-disabled{opacity:.7}\n"] }]
-        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], radioValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "radioValue", required: true }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "describedBy", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }] } });
+                    ], template: `
+    <jv-form-container
+      [label]="label()"
+      [inputId]="inputId()"
+      [required]="required()"
+      [invalid]="invalid()"
+      [hint]="hint()"
+      [error]="error()"
+    >
+      <button
+        #triggerButton
+        type="button"
+        class="jv-modal-selector-trigger"
+        [class.is-invalid]="invalid()"
+        [id]="inputId()"
+        [disabled]="disabled"
+        [attr.aria-haspopup]="'dialog'"
+        [attr.aria-expanded]="dialogOpen() ? 'true' : 'false'"
+        [attr.aria-controls]="dialogId"
+        [attr.aria-invalid]="invalid() ? 'true' : null"
+        [attr.aria-describedby]="describedBy() || null"
+        [attr.aria-label]="triggerAriaLabel()"
+        (click)="openDialog()"
+        (blur)="handleBlur()"
+      >
+        <span class="jv-modal-selector-trigger-copy">
+          <span [class.jv-modal-selector-trigger-placeholder]="!selectedOption()">
+            {{ selectedOption()?.label ?? resolvedPlaceholder() }}
+          </span>
+        </span>
+        <jv-icon name="chevrons-up-down" [size]="18" />
+      </button>
+    </jv-form-container>
 
-let selectIdSequence = 0;
-class JvSelectComponent {
-    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
-    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
-    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
-    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    <jv-dialog [open]="dialogOpen()" [title]="resolvedDialogTitle()" (closed)="closeDialog()">
+      <div [id]="dialogId" class="jv-modal-selector-dialog">
+        @if (dialogSubtitle()) {
+          <p class="jv-modal-selector-subtitle">{{ dialogSubtitle() }}</p>
+        }
+
+        @if (showSearch()) {
+          <jv-input
+            type="search"
+            [inputId]="searchInputId"
+            [placeholder]="searchPlaceholder() || translation.translate('modalSelector.searchPlaceholder')"
+            [ngModel]="searchQuery()"
+            (ngModelChange)="searchQuery.set($event)"
+          />
+        }
+
+        <p class="jv-modal-selector-results" aria-live="polite">{{ resultsLabel() }}</p>
+
+        @if (filteredOptions().length > 0) {
+          <jv-list variant="bordered" [ariaRole]="'listbox'" [ariaLabel]="resolvedDialogTitle()">
+            @for (option of filteredOptions(); track option.value; let index = $index) {
+              <li role="presentation">
+                <div
+                  #optionElement
+                  class="jv-modal-selector-option"
+                  [class.jv-modal-selector-option--selected]="isSelected(option)"
+                  [class.jv-modal-selector-option--disabled]="option.disabled ?? false"
+                  [id]="optionId(index)"
+                  role="option"
+                  [attr.aria-selected]="isSelected(option) ? 'true' : 'false'"
+                  [attr.tabindex]="getOptionTabIndex(option, index)"
+                  (click)="selectOption(option)"
+                  (keydown)="handleOptionKeydown($event, index, option)"
+                >
+                  <div class="jv-modal-selector-option-copy">
+                    <span class="jv-modal-selector-option-label">{{ option.label }}</span>
+                    @if (option.description) {
+                      <span class="jv-modal-selector-option-description">{{ option.description }}</span>
+                    }
+                  </div>
+                  @if (isSelected(option)) {
+                    <jv-icon name="check" [size]="16" />
+                  }
+                </div>
+              </li>
+            }
+          </jv-list>
+        } @else {
+          <div class="jv-modal-selector-empty" aria-live="polite">{{ emptyMessage() || translation.translate('modalSelector.emptyMessage') }}</div>
+        }
+      </div>
+
+      <div dialog-actions class="jv-modal-selector-actions">
+        @if (selectedOption()) {
+          <jv-button variant="ghost" (click)="clearSelection()">{{ clearLabel() || translation.translate('modalSelector.clear') }}</jv-button>
+        }
+        <jv-button variant="outline" (click)="closeDialog()">{{ closeLabel() || translation.translate('modalSelector.close') }}</jv-button>
+      </div>
+    </jv-dialog>
+  `, styles: [".jv-modal-selector-trigger{width:100%;min-height:var(--jv-density-control-height);display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-sm);padding:0 var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);background:var(--jv-color-surface);color:var(--jv-color-foreground);text-align:left;font:inherit;cursor:pointer}.jv-modal-selector-trigger.is-invalid{border-color:var(--jv-color-danger)}.jv-modal-selector-trigger:disabled{opacity:.7;cursor:not-allowed}.jv-modal-selector-trigger:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:1px}.jv-modal-selector-trigger-copy{min-width:0;flex:1}.jv-modal-selector-trigger-placeholder{color:var(--jv-color-foreground-muted)}.jv-modal-selector-dialog,.jv-modal-selector-actions{display:grid;gap:var(--jv-spacing-md)}.jv-modal-selector-subtitle,.jv-modal-selector-results,.jv-modal-selector-option-description,.jv-modal-selector-empty{margin:0;color:var(--jv-color-foreground-muted)}.jv-modal-selector-empty{padding:var(--jv-spacing-md);border:1px dashed var(--jv-color-border);border-radius:var(--jv-radius-md);text-align:center}.jv-modal-selector-option{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);padding:var(--jv-spacing-md);background:var(--jv-color-surface);cursor:pointer;outline:none;transition:background-color .16s ease}.jv-modal-selector-option:hover,.jv-modal-selector-option:focus-visible{background:var(--jv-color-surface-muted)}.jv-modal-selector-option:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-modal-selector-option--selected{background:color-mix(in srgb,var(--jv-color-primary) 8%,var(--jv-color-surface))}.jv-modal-selector-option--disabled{opacity:.55;cursor:not-allowed;pointer-events:none}.jv-modal-selector-option-copy{min-width:0;display:grid;gap:.25rem}.jv-modal-selector-option-label{font-weight:600;color:var(--jv-color-foreground)}\n"] }]
+        }], propDecorators: { triggerButtonRef: [{ type: i0.ViewChild, args: ['triggerButton', { isSignal: true }] }], optionElements: [{ type: i0.ViewChildren, args: ['optionElement', { isSignal: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], dialogTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogTitle", required: false }] }], dialogSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogSubtitle", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "describedBy", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], valueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
+
+let radioIdSequence = 0;
+class JvRadioComponent {
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    radioValue = input.required(...(ngDevMode ? [{ debugName: "radioValue" }] : /* istanbul ignore next */ []));
     describedBy = input('', ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
-    inputId = input(`jv-select-${++selectIdSequence}`, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
-    modelValue = input('', ...(ngDevMode ? [{ debugName: "modelValue" }] : /* istanbul ignore next */ []));
-    selectionChange = output();
+    inputId = input(`jv-radio-${++radioIdSequence}`, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
     value = '';
     disabled = false;
     onChange = () => undefined;
     onTouched = () => undefined;
-    currentValue = computed(() => this.modelValue() || this.value, ...(ngDevMode ? [{ debugName: "currentValue" }] : /* istanbul ignore next */ []));
     writeValue(value) {
         this.value = value ?? '';
     }
@@ -19229,76 +20453,61 @@ class JvSelectComponent {
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
     }
-    handleChange(event) {
-        const nextValue = event.target.value;
+    handleChange() {
+        const nextValue = this.radioValue();
         this.value = nextValue;
         this.onChange(nextValue);
-        this.selectionChange.emit(nextValue);
     }
     handleBlur() {
         this.onTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvSelectComponent, isStandalone: true, selector: "jv-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "describedBy", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, modelValue: { classPropertyName: "modelValue", publicName: "modelValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: JvRadioComponent, isStandalone: true, selector: "jv-radio", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, radioValue: { classPropertyName: "radioValue", publicName: "radioValue", isSignal: true, isRequired: true, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "describedBy", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => JvSelectComponent),
+                useExisting: forwardRef(() => JvRadioComponent),
                 multi: true,
             },
         ], ngImport: i0, template: `
-    <select
-      class="jv-select"
-      [class.is-invalid]="invalid()"
-      [id]="inputId()"
-      [disabled]="disabled"
-      [required]="required()"
-      [attr.aria-invalid]="invalid() ? 'true' : null"
-      [attr.aria-describedby]="describedBy() || null"
-      [value]="currentValue()"
-      (change)="handleChange($event)"
-      (blur)="handleBlur()"
-    >
-      @if (placeholder()) {
-        <option value="" [disabled]="required()">{{ placeholder() }}</option>
-      }
-
-      @for (option of options(); track option.label + ':' + option.value) {
-        <option [value]="option.value" [disabled]="option.disabled ?? false">{{ option.label }}</option>
-      }
-    </select>
-  `, isInline: true, styles: [".jv-select{width:100%;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);background:var(--jv-color-surface);color:var(--jv-color-foreground)}.jv-select.is-invalid{border-color:var(--jv-color-danger)}\n"] });
+    <label class="jv-radio" [class.is-disabled]="disabled">
+      <input
+        type="radio"
+        [id]="inputId()"
+        [name]="name()"
+        [checked]="value === radioValue()"
+        [disabled]="disabled"
+        [attr.aria-describedby]="describedBy() || null"
+        (change)="handleChange()"
+        (blur)="handleBlur()"
+      />
+      <span>{{ label() }}</span>
+    </label>
+  `, isInline: true, styles: [".jv-radio{display:inline-flex;align-items:center;gap:var(--jv-spacing-sm);min-height:var(--jv-density-control-height);color:var(--jv-color-foreground)}.jv-radio.is-disabled{opacity:.7}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvRadioComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'jv-select', standalone: true, providers: [
+            args: [{ selector: 'jv-radio', standalone: true, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => JvSelectComponent),
-                            multi: true,
-                        },
-                    ], template: `
-    <select
-      class="jv-select"
-      [class.is-invalid]="invalid()"
-      [id]="inputId()"
-      [disabled]="disabled"
-      [required]="required()"
-      [attr.aria-invalid]="invalid() ? 'true' : null"
-      [attr.aria-describedby]="describedBy() || null"
-      [value]="currentValue()"
-      (change)="handleChange($event)"
-      (blur)="handleBlur()"
-    >
-      @if (placeholder()) {
-        <option value="" [disabled]="required()">{{ placeholder() }}</option>
-      }
-
-      @for (option of options(); track option.label + ':' + option.value) {
-        <option [value]="option.value" [disabled]="option.disabled ?? false">{{ option.label }}</option>
-      }
-    </select>
-  `, styles: [".jv-select{width:100%;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);background:var(--jv-color-surface);color:var(--jv-color-foreground)}.jv-select.is-invalid{border-color:var(--jv-color-danger)}\n"] }]
-        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "describedBy", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], modelValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "modelValue", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
+                            useExisting: forwardRef(() => JvRadioComponent),
+                            multi: true,
+                        },
+                    ], template: `
+    <label class="jv-radio" [class.is-disabled]="disabled">
+      <input
+        type="radio"
+        [id]="inputId()"
+        [name]="name()"
+        [checked]="value === radioValue()"
+        [disabled]="disabled"
+        [attr.aria-describedby]="describedBy() || null"
+        (change)="handleChange()"
+        (blur)="handleBlur()"
+      />
+      <span>{{ label() }}</span>
+    </label>
+  `, styles: [".jv-radio{display:inline-flex;align-items:center;gap:var(--jv-spacing-sm);min-height:var(--jv-density-control-height);color:var(--jv-color-foreground)}.jv-radio.is-disabled{opacity:.7}\n"] }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], radioValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "radioValue", required: true }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "describedBy", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }] } });
 
 let switchIdSequence = 0;
 class JvSwitchComponent {
@@ -19515,119 +20724,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
-class JvDialogComponent {
-    document = inject(DOCUMENT);
-    panelRef = viewChild('panel', ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
-    open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
-    title = input('Dialog', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-    closed = output();
-    titleId = `jv-dialog-title-${Math.random().toString(36).slice(2, 8)}`;
-    descriptionId = `jv-dialog-description-${Math.random().toString(36).slice(2, 8)}`;
-    constructor() {
-        effect(() => {
-            if (this.open()) {
-                queueMicrotask(() => this.focusInitialElement());
-            }
-        });
-    }
-    handleDocumentKeydown(event) {
-        if (!this.open()) {
-            return;
-        }
-        if (event.key === 'Escape') {
-            event.preventDefault();
-            this.closed.emit();
-            return;
-        }
-        if (event.key === 'Tab') {
-            this.trapFocus(event);
-        }
-    }
-    focusInitialElement() {
-        const panel = this.panelRef()?.nativeElement;
-        if (!panel) {
-            return;
-        }
-        const firstFocusable = this.getFocusableElements()[0];
-        (firstFocusable ?? panel).focus();
-    }
-    backdropClose() {
-        this.closed.emit();
-    }
-    trapFocus(event) {
-        const focusable = this.getFocusableElements();
-        const panel = this.panelRef()?.nativeElement;
-        if (!panel || focusable.length === 0) {
-            panel?.focus();
-            event.preventDefault();
-            return;
-        }
-        const first = focusable[0];
-        const last = focusable[focusable.length - 1];
-        const active = this.document.activeElement;
-        if (event.shiftKey && active === first) {
-            last.focus();
-            event.preventDefault();
-        }
-        else if (!event.shiftKey && active === last) {
-            first.focus();
-            event.preventDefault();
-        }
-    }
-    getFocusableElements() {
-        const panel = this.panelRef()?.nativeElement;
-        if (!panel) {
-            return [];
-        }
-        return Array.from(panel.querySelectorAll('button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvDialogComponent, isStandalone: true, selector: "jv-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { listeners: { "document:keydown": "handleDocumentKeydown($event)" } }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    @if (open()) {
-      <div class="jv-dialog-backdrop" (click)="backdropClose()">
-        <div class="jv-dialog-panel" role="dialog" aria-modal="true" tabindex="-1" [attr.aria-labelledby]="titleId" [attr.aria-describedby]="descriptionId" (click)="$event.stopPropagation()" #panel>
-          <header class="jv-dialog-header">
-            <h2 [id]="titleId">{{ title() }}</h2>
-          </header>
-
-          <div class="jv-dialog-body" [id]="descriptionId">
-            <ng-content></ng-content>
-          </div>
-
-          <footer class="jv-dialog-footer">
-            <ng-content select="[dialog-actions]"></ng-content>
-          </footer>
-        </div>
-      </div>
-    }
-  `, isInline: true, styles: [".jv-dialog-backdrop{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:1rem;background:#0f172a80}.jv-dialog-panel{width:min(32rem,100%);max-height:calc(100vh - 2rem);overflow:auto;padding:var(--jv-spacing-lg);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-lg);background:var(--jv-color-surface);box-shadow:var(--jv-shadow-lg)}.jv-dialog-header,.jv-dialog-body,.jv-dialog-footer{display:grid;gap:var(--jv-spacing-sm)}.jv-dialog-footer{margin-top:var(--jv-spacing-lg)}h2,p{margin:0}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvDialogComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'jv-dialog', standalone: true, template: `
-    @if (open()) {
-      <div class="jv-dialog-backdrop" (click)="backdropClose()">
-        <div class="jv-dialog-panel" role="dialog" aria-modal="true" tabindex="-1" [attr.aria-labelledby]="titleId" [attr.aria-describedby]="descriptionId" (click)="$event.stopPropagation()" #panel>
-          <header class="jv-dialog-header">
-            <h2 [id]="titleId">{{ title() }}</h2>
-          </header>
-
-          <div class="jv-dialog-body" [id]="descriptionId">
-            <ng-content></ng-content>
-          </div>
-
-          <footer class="jv-dialog-footer">
-            <ng-content select="[dialog-actions]"></ng-content>
-          </footer>
-        </div>
-      </div>
-    }
-  `, styles: [".jv-dialog-backdrop{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:1rem;background:#0f172a80}.jv-dialog-panel{width:min(32rem,100%);max-height:calc(100vh - 2rem);overflow:auto;padding:var(--jv-spacing-lg);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-lg);background:var(--jv-color-surface);box-shadow:var(--jv-shadow-lg)}.jv-dialog-header,.jv-dialog-body,.jv-dialog-footer{display:grid;gap:var(--jv-spacing-sm)}.jv-dialog-footer{margin-top:var(--jv-spacing-lg)}h2,p{margin:0}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], handleDocumentKeydown: [{
-                type: HostListener,
-                args: ['document:keydown', ['$event']]
-            }] } });
-
 class JvConfirmDialogComponent {
     dialogService = inject(JvDialogService);
     activeDialog = this.dialogService.activeDialog;
@@ -19784,320 +20880,320 @@ class JvSidebarComponent {
         target?.scrollIntoView({ block: 'start', behavior: 'smooth' });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvSidebarComponent, isStandalone: true, selector: "jv-sidebar", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, brandIcon: { classPropertyName: "brandIcon", publicName: "brandIcon", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, mobileOpen: { classPropertyName: "mobileOpen", publicName: "mobileOpen", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, currentTheme: { classPropertyName: "currentTheme", publicName: "currentTheme", isSignal: true, isRequired: false, transformFunction: null }, themeOptions: { classPropertyName: "themeOptions", publicName: "themeOptions", isSignal: true, isRequired: false, transformFunction: null }, topbarActions: { classPropertyName: "topbarActions", publicName: "topbarActions", isSignal: true, isRequired: false, transformFunction: null }, showThemeSelector: { classPropertyName: "showThemeSelector", publicName: "showThemeSelector", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapseToggle: "collapseToggle", mobileClose: "mobileClose", themeChange: "themeChange", actionClick: "actionClick" }, ngImport: i0, template: `
-    @if (mobileOpen()) {
-      <div class="jv-sidebar-backdrop" (click)="mobileClose.emit()"></div>
-    }
-
-    <aside
-      class="jv-sidebar"
-      [class.is-collapsed]="collapsed()"
-      [class.is-mobile-open]="mobileOpen()"
-    >
-      <div class="jv-sidebar-brand">
-        <div class="brand-mark">
-          <jv-icon [name]="brandIcon()" [size]="18" />
-        </div>
-
-        @if (!collapsed()) {
-          <div class="brand-copy">
-            <strong>{{ title() }}</strong>
-            @if (subtitle()) {
-              <span>{{ subtitle() }}</span>
-            }
-          </div>
-        }
-      </div>
-
-      <nav class="jv-sidebar-nav" [attr.aria-label]="ariaLabel()">
-        <ul class="jv-sidebar-list">
-        @for (item of normalizedItems(); track item.id) {
-          <li class="jv-sidebar-item">
-            @if (item.children.length > 0) {
-              <button
-                type="button"
-                class="jv-sidebar-link"
-                [class.is-active]="item.active"
-                [attr.aria-label]="item.label"
-                [attr.aria-expanded]="isExpanded(item.id) ? 'true' : 'false'"
-                [attr.aria-controls]="'jv-sidebar-section-' + item.id"
-                [attr.title]="item.label"
-                (click)="toggleSection(item.id)"
-              >
-                <span class="jv-sidebar-link-main">
-                  @if (item.icon) {
-                    <jv-icon [name]="item.icon" [size]="18" />
-                  }
-
-                  @if (!collapsed()) {
-                    <span>{{ item.label }}</span>
-                  }
-                </span>
-
-                @if (!collapsed()) {
-                  <jv-icon [name]="isExpanded(item.id) ? 'chevron-up' : 'chevron-down'" [size]="16" />
-                }
-              </button>
-            } @else {
-              @if (isHashLink(item.href)) {
-                <button
-                  type="button"
-                  class="jv-sidebar-link"
-                  [class.is-active]="item.active"
-                  [attr.aria-label]="item.label"
-                  [attr.aria-current]="item.active ? 'page' : null"
-                  [attr.title]="item.label"
-                  (click)="navigateTo(item.href); mobileClose.emit()"
-                >
-                  <span class="jv-sidebar-link-main">
-                    @if (item.icon) {
-                      <jv-icon [name]="item.icon" [size]="18" />
-                    }
-
-                    @if (!collapsed()) {
-                      <span>{{ item.label }}</span>
-                    }
-                  </span>
-                </button>
-              } @else {
-                <a
-                  class="jv-sidebar-link"
-                  [class.is-active]="item.active"
-                  [attr.aria-label]="item.label"
-                  [attr.aria-current]="item.active ? 'page' : null"
-                  [routerLink]="item.href"
-                  [attr.title]="item.label"
-                  (click)="mobileClose.emit()"
-                >
-                  <span class="jv-sidebar-link-main">
-                    @if (item.icon) {
-                      <jv-icon [name]="item.icon" [size]="18" />
-                    }
-
-                    @if (!collapsed()) {
-                      <span>{{ item.label }}</span>
-                    }
-                  </span>
-                </a>
-              }
-            }
-
-            @if (!collapsed() && item.children.length > 0 && isExpanded(item.id)) {
-              <div class="jv-sidebar-children" [id]="'jv-sidebar-section-' + item.id">
-                @for (child of item.children; track child.id) {
-                  @if (isHashLink(child.href)) {
-                    <button type="button" class="jv-sidebar-child-link" [class.is-active]="child.active" [attr.aria-label]="child.label" [attr.aria-current]="child.active ? 'page' : null" [attr.title]="child.label" (click)="navigateTo(child.href)">
-                      {{ child.label }}
-                    </button>
-                  } @else {
-                    <a class="jv-sidebar-child-link" [class.is-active]="child.active" [attr.aria-label]="child.label" [attr.aria-current]="child.active ? 'page' : null" [routerLink]="child.href" [attr.title]="child.label" (click)="mobileClose.emit()">
-                      {{ child.label }}
-                    </a>
-                  }
-                }
-              </div>
-            }
-          </li>
-        }
-        </ul>
-      </nav>
-
-      <div class="jv-sidebar-footer">
-        <button type="button" class="jv-sidebar-toggle" (click)="collapseToggle.emit()">
-          <jv-icon [name]="collapsed() ? 'menu' : 'panel-left-close'" [size]="18" />
-          @if (!collapsed()) {
-            <span>Collapse</span>
-          }
-        </button>
-
-        <div class="jv-sidebar-mobile-extras">
-          @if (showThemeSelector()) {
-            <div class="theme-group" aria-label="Theme selector">
-              @for (option of themeOptions(); track option.value) {
-                <button
-                  type="button"
-                  class="theme-pill"
-                  [class.is-active]="currentTheme() === option.value"
-                  (click)="themeChange.emit(option.value)"
-                >
-                  @if (option.icon) {
-                    <jv-icon [name]="option.icon" [size]="16" />
-                  }
-                  <span>{{ option.label }}</span>
-                </button>
-              }
-            </div>
-          }
-
-          <div class="mobile-actions">
-            @for (action of topbarActions(); track action.id) {
-              <button type="button" class="icon-button" [attr.aria-label]="action.label" (click)="actionClick.emit(action.id); mobileClose.emit()">
-                <jv-icon [name]="action.icon" [size]="18" />
-              </button>
-            }
-          </div>
-        </div>
-      </div>
-    </aside>
-  `, isInline: true, styles: [".jv-sidebar-backdrop{display:none}.jv-sidebar{display:grid;grid-template-rows:auto 1fr auto;gap:var(--jv-spacing-lg);width:280px;min-width:280px;height:100vh;padding:var(--jv-spacing-lg);overflow-y:auto;border-right:1px solid var(--jv-color-border);background:var(--jv-color-surface);scrollbar-width:none;-ms-overflow-style:none}.jv-sidebar::-webkit-scrollbar{width:0;height:0;display:none}.jv-sidebar.is-collapsed{width:96px;min-width:96px;padding-inline:var(--jv-spacing-md)}.jv-sidebar-footer{display:grid;gap:var(--jv-spacing-md)}.jv-sidebar-mobile-extras{display:none}.jv-sidebar-brand,.jv-sidebar-link,.jv-sidebar-toggle{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.brand-mark{display:inline-grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:var(--jv-radius-md);background:color-mix(in srgb,var(--jv-color-primary) 16%,var(--jv-color-surface));color:var(--jv-color-primary)}.brand-copy{display:grid;gap:.1rem}.brand-copy span{color:var(--jv-color-foreground-muted);font-size:.875rem}.jv-sidebar-item{display:grid;gap:var(--jv-spacing-xs);list-style:none}.jv-sidebar-list{display:grid;gap:var(--jv-spacing-xs);margin:0;padding:0}.jv-sidebar-nav{display:grid;gap:var(--jv-spacing-xs);align-content:start}.jv-sidebar-link,.jv-sidebar-child-link,.jv-sidebar-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border:1px solid transparent;border-radius:var(--jv-radius-md);background:transparent;color:var(--jv-color-foreground-muted);text-decoration:none;cursor:pointer}.jv-sidebar-link-main{display:inline-flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-sidebar-link:hover,.jv-sidebar-child-link:hover,.jv-sidebar-toggle:hover{background:var(--jv-color-surface-muted);color:var(--jv-color-foreground)}.jv-sidebar-link.is-active,.jv-sidebar-child-link.is-active{border-color:color-mix(in srgb,var(--jv-color-primary) 25%,var(--jv-color-border));background:color-mix(in srgb,var(--jv-color-primary) 12%,var(--jv-color-surface));color:var(--jv-color-foreground)}.jv-sidebar-children{display:grid;gap:var(--jv-spacing-xs);margin-left:var(--jv-spacing-xl);padding-left:var(--jv-spacing-sm);border-left:1px solid var(--jv-color-border)}.jv-sidebar-child-link{display:flex;align-items:center;min-height:2.25rem;font-size:.9rem}.jv-sidebar-toggle{width:100%;background:var(--jv-color-surface-muted);cursor:pointer}@media(max-width:900px){.jv-sidebar-backdrop{display:block;position:fixed;inset:0;z-index:99;background:#0006}.jv-sidebar{position:fixed;top:0;left:0;z-index:100;width:280px;min-width:280px;height:100vh;border-right:1px solid var(--jv-color-border);border-bottom:none;box-shadow:var(--jv-shadow-lg);transform:translate(-100%);visibility:hidden;transition:transform .24s cubic-bezier(.4,0,.2,1),visibility .24s}.jv-sidebar.is-mobile-open{transform:translate(0);visibility:visible}.jv-sidebar.is-collapsed{width:280px;min-width:280px}.jv-sidebar-mobile-extras{display:flex;flex-direction:column;gap:var(--jv-spacing-md);padding-top:var(--jv-spacing-md);border-top:1px solid var(--jv-color-border)}.jv-sidebar-mobile-extras .theme-group{display:flex;flex-wrap:wrap;gap:var(--jv-spacing-xs)}.jv-sidebar-mobile-extras .theme-pill{display:inline-flex;align-items:center;gap:var(--jv-spacing-xs);min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:999px;background:var(--jv-color-surface-muted);color:var(--jv-color-foreground);cursor:pointer;font:inherit}.jv-sidebar-mobile-extras .theme-pill.is-active{border-color:var(--jv-color-primary);background:color-mix(in srgb,var(--jv-color-primary) 14%,var(--jv-color-surface))}.jv-sidebar-mobile-extras .mobile-actions{display:flex;gap:var(--jv-spacing-sm)}.jv-sidebar-mobile-extras .icon-button{display:inline-grid;place-items:center;width:var(--jv-density-control-height);height:var(--jv-density-control-height);border:1px solid var(--jv-color-border);border-radius:999px;background:var(--jv-color-surface-muted);color:var(--jv-color-foreground);cursor:pointer}}\n"], dependencies: [{ kind: "component", type: JvIconComponent, selector: "jv-icon", inputs: ["name", "size", "strokeWidth", "decorative", "ariaLabel"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvSidebarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'jv-sidebar', standalone: true, imports: [JvIconComponent, RouterLink], template: `
-    @if (mobileOpen()) {
-      <div class="jv-sidebar-backdrop" (click)="mobileClose.emit()"></div>
-    }
-
-    <aside
-      class="jv-sidebar"
-      [class.is-collapsed]="collapsed()"
-      [class.is-mobile-open]="mobileOpen()"
-    >
-      <div class="jv-sidebar-brand">
-        <div class="brand-mark">
-          <jv-icon [name]="brandIcon()" [size]="18" />
-        </div>
-
-        @if (!collapsed()) {
-          <div class="brand-copy">
-            <strong>{{ title() }}</strong>
-            @if (subtitle()) {
-              <span>{{ subtitle() }}</span>
-            }
-          </div>
-        }
-      </div>
-
-      <nav class="jv-sidebar-nav" [attr.aria-label]="ariaLabel()">
-        <ul class="jv-sidebar-list">
-        @for (item of normalizedItems(); track item.id) {
-          <li class="jv-sidebar-item">
-            @if (item.children.length > 0) {
-              <button
-                type="button"
-                class="jv-sidebar-link"
-                [class.is-active]="item.active"
-                [attr.aria-label]="item.label"
-                [attr.aria-expanded]="isExpanded(item.id) ? 'true' : 'false'"
-                [attr.aria-controls]="'jv-sidebar-section-' + item.id"
-                [attr.title]="item.label"
-                (click)="toggleSection(item.id)"
-              >
-                <span class="jv-sidebar-link-main">
-                  @if (item.icon) {
-                    <jv-icon [name]="item.icon" [size]="18" />
-                  }
-
-                  @if (!collapsed()) {
-                    <span>{{ item.label }}</span>
-                  }
-                </span>
-
-                @if (!collapsed()) {
-                  <jv-icon [name]="isExpanded(item.id) ? 'chevron-up' : 'chevron-down'" [size]="16" />
-                }
-              </button>
-            } @else {
-              @if (isHashLink(item.href)) {
-                <button
-                  type="button"
-                  class="jv-sidebar-link"
-                  [class.is-active]="item.active"
-                  [attr.aria-label]="item.label"
-                  [attr.aria-current]="item.active ? 'page' : null"
-                  [attr.title]="item.label"
-                  (click)="navigateTo(item.href); mobileClose.emit()"
-                >
-                  <span class="jv-sidebar-link-main">
-                    @if (item.icon) {
-                      <jv-icon [name]="item.icon" [size]="18" />
-                    }
-
-                    @if (!collapsed()) {
-                      <span>{{ item.label }}</span>
-                    }
-                  </span>
-                </button>
-              } @else {
-                <a
-                  class="jv-sidebar-link"
-                  [class.is-active]="item.active"
-                  [attr.aria-label]="item.label"
-                  [attr.aria-current]="item.active ? 'page' : null"
-                  [routerLink]="item.href"
-                  [attr.title]="item.label"
-                  (click)="mobileClose.emit()"
-                >
-                  <span class="jv-sidebar-link-main">
-                    @if (item.icon) {
-                      <jv-icon [name]="item.icon" [size]="18" />
-                    }
-
-                    @if (!collapsed()) {
-                      <span>{{ item.label }}</span>
-                    }
-                  </span>
-                </a>
-              }
-            }
-
-            @if (!collapsed() && item.children.length > 0 && isExpanded(item.id)) {
-              <div class="jv-sidebar-children" [id]="'jv-sidebar-section-' + item.id">
-                @for (child of item.children; track child.id) {
-                  @if (isHashLink(child.href)) {
-                    <button type="button" class="jv-sidebar-child-link" [class.is-active]="child.active" [attr.aria-label]="child.label" [attr.aria-current]="child.active ? 'page' : null" [attr.title]="child.label" (click)="navigateTo(child.href)">
-                      {{ child.label }}
-                    </button>
-                  } @else {
-                    <a class="jv-sidebar-child-link" [class.is-active]="child.active" [attr.aria-label]="child.label" [attr.aria-current]="child.active ? 'page' : null" [routerLink]="child.href" [attr.title]="child.label" (click)="mobileClose.emit()">
-                      {{ child.label }}
-                    </a>
-                  }
-                }
-              </div>
-            }
-          </li>
-        }
-        </ul>
-      </nav>
-
-      <div class="jv-sidebar-footer">
-        <button type="button" class="jv-sidebar-toggle" (click)="collapseToggle.emit()">
-          <jv-icon [name]="collapsed() ? 'menu' : 'panel-left-close'" [size]="18" />
-          @if (!collapsed()) {
-            <span>Collapse</span>
-          }
-        </button>
-
-        <div class="jv-sidebar-mobile-extras">
-          @if (showThemeSelector()) {
-            <div class="theme-group" aria-label="Theme selector">
-              @for (option of themeOptions(); track option.value) {
-                <button
-                  type="button"
-                  class="theme-pill"
-                  [class.is-active]="currentTheme() === option.value"
-                  (click)="themeChange.emit(option.value)"
-                >
-                  @if (option.icon) {
-                    <jv-icon [name]="option.icon" [size]="16" />
-                  }
-                  <span>{{ option.label }}</span>
-                </button>
-              }
-            </div>
-          }
-
-          <div class="mobile-actions">
-            @for (action of topbarActions(); track action.id) {
-              <button type="button" class="icon-button" [attr.aria-label]="action.label" (click)="actionClick.emit(action.id); mobileClose.emit()">
-                <jv-icon [name]="action.icon" [size]="18" />
-              </button>
-            }
-          </div>
-        </div>
-      </div>
-    </aside>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvSidebarComponent, isStandalone: true, selector: "jv-sidebar", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, brandIcon: { classPropertyName: "brandIcon", publicName: "brandIcon", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, mobileOpen: { classPropertyName: "mobileOpen", publicName: "mobileOpen", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, currentTheme: { classPropertyName: "currentTheme", publicName: "currentTheme", isSignal: true, isRequired: false, transformFunction: null }, themeOptions: { classPropertyName: "themeOptions", publicName: "themeOptions", isSignal: true, isRequired: false, transformFunction: null }, topbarActions: { classPropertyName: "topbarActions", publicName: "topbarActions", isSignal: true, isRequired: false, transformFunction: null }, showThemeSelector: { classPropertyName: "showThemeSelector", publicName: "showThemeSelector", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapseToggle: "collapseToggle", mobileClose: "mobileClose", themeChange: "themeChange", actionClick: "actionClick" }, ngImport: i0, template: `
+    @if (mobileOpen()) {
+      <div class="jv-sidebar-backdrop" (click)="mobileClose.emit()"></div>
+    }
+
+    <aside
+      class="jv-sidebar"
+      [class.is-collapsed]="collapsed()"
+      [class.is-mobile-open]="mobileOpen()"
+    >
+      <div class="jv-sidebar-brand">
+        <div class="brand-mark">
+          <jv-icon [name]="brandIcon()" [size]="18" />
+        </div>
+
+        @if (!collapsed()) {
+          <div class="brand-copy">
+            <strong>{{ title() }}</strong>
+            @if (subtitle()) {
+              <span>{{ subtitle() }}</span>
+            }
+          </div>
+        }
+      </div>
+
+      <nav class="jv-sidebar-nav" [attr.aria-label]="ariaLabel()">
+        <ul class="jv-sidebar-list">
+        @for (item of normalizedItems(); track item.id) {
+          <li class="jv-sidebar-item">
+            @if (item.children.length > 0) {
+              <button
+                type="button"
+                class="jv-sidebar-link"
+                [class.is-active]="item.active"
+                [attr.aria-label]="item.label"
+                [attr.aria-expanded]="isExpanded(item.id) ? 'true' : 'false'"
+                [attr.aria-controls]="'jv-sidebar-section-' + item.id"
+                [attr.title]="item.label"
+                (click)="toggleSection(item.id)"
+              >
+                <span class="jv-sidebar-link-main">
+                  @if (item.icon) {
+                    <jv-icon [name]="item.icon" [size]="18" />
+                  }
+
+                  @if (!collapsed()) {
+                    <span>{{ item.label }}</span>
+                  }
+                </span>
+
+                @if (!collapsed()) {
+                  <jv-icon [name]="isExpanded(item.id) ? 'chevron-up' : 'chevron-down'" [size]="16" />
+                }
+              </button>
+            } @else {
+              @if (isHashLink(item.href)) {
+                <button
+                  type="button"
+                  class="jv-sidebar-link"
+                  [class.is-active]="item.active"
+                  [attr.aria-label]="item.label"
+                  [attr.aria-current]="item.active ? 'page' : null"
+                  [attr.title]="item.label"
+                  (click)="navigateTo(item.href); mobileClose.emit()"
+                >
+                  <span class="jv-sidebar-link-main">
+                    @if (item.icon) {
+                      <jv-icon [name]="item.icon" [size]="18" />
+                    }
+
+                    @if (!collapsed()) {
+                      <span>{{ item.label }}</span>
+                    }
+                  </span>
+                </button>
+              } @else {
+                <a
+                  class="jv-sidebar-link"
+                  [class.is-active]="item.active"
+                  [attr.aria-label]="item.label"
+                  [attr.aria-current]="item.active ? 'page' : null"
+                  [routerLink]="item.href"
+                  [attr.title]="item.label"
+                  (click)="mobileClose.emit()"
+                >
+                  <span class="jv-sidebar-link-main">
+                    @if (item.icon) {
+                      <jv-icon [name]="item.icon" [size]="18" />
+                    }
+
+                    @if (!collapsed()) {
+                      <span>{{ item.label }}</span>
+                    }
+                  </span>
+                </a>
+              }
+            }
+
+            @if (!collapsed() && item.children.length > 0 && isExpanded(item.id)) {
+              <div class="jv-sidebar-children" [id]="'jv-sidebar-section-' + item.id">
+                @for (child of item.children; track child.id) {
+                  @if (isHashLink(child.href)) {
+                    <button type="button" class="jv-sidebar-child-link" [class.is-active]="child.active" [attr.aria-label]="child.label" [attr.aria-current]="child.active ? 'page' : null" [attr.title]="child.label" (click)="navigateTo(child.href)">
+                      {{ child.label }}
+                    </button>
+                  } @else {
+                    <a class="jv-sidebar-child-link" [class.is-active]="child.active" [attr.aria-label]="child.label" [attr.aria-current]="child.active ? 'page' : null" [routerLink]="child.href" [attr.title]="child.label" (click)="mobileClose.emit()">
+                      {{ child.label }}
+                    </a>
+                  }
+                }
+              </div>
+            }
+          </li>
+        }
+        </ul>
+      </nav>
+
+      <div class="jv-sidebar-footer">
+        <button type="button" class="jv-sidebar-toggle" (click)="collapseToggle.emit()">
+          <jv-icon [name]="collapsed() ? 'menu' : 'panel-left-close'" [size]="18" />
+          @if (!collapsed()) {
+            <span>Collapse</span>
+          }
+        </button>
+
+        <div class="jv-sidebar-mobile-extras">
+          @if (showThemeSelector()) {
+            <div class="theme-group" aria-label="Theme selector">
+              @for (option of themeOptions(); track option.value) {
+                <button
+                  type="button"
+                  class="theme-pill"
+                  [class.is-active]="currentTheme() === option.value"
+                  (click)="themeChange.emit(option.value)"
+                >
+                  @if (option.icon) {
+                    <jv-icon [name]="option.icon" [size]="16" />
+                  }
+                  <span>{{ option.label }}</span>
+                </button>
+              }
+            </div>
+          }
+
+          <div class="mobile-actions">
+            @for (action of topbarActions(); track action.id) {
+              <button type="button" class="icon-button" [attr.aria-label]="action.label" (click)="actionClick.emit(action.id); mobileClose.emit()">
+                <jv-icon [name]="action.icon" [size]="18" />
+              </button>
+            }
+          </div>
+        </div>
+      </div>
+    </aside>
+  `, isInline: true, styles: [".jv-sidebar-backdrop{display:none}.jv-sidebar{display:grid;grid-template-rows:auto 1fr auto;gap:var(--jv-spacing-lg);width:280px;min-width:280px;height:100vh;padding:var(--jv-spacing-lg);overflow-y:auto;border-right:1px solid var(--jv-color-border);background:var(--jv-color-surface);scrollbar-width:none;-ms-overflow-style:none}.jv-sidebar::-webkit-scrollbar{width:0;height:0;display:none}.jv-sidebar.is-collapsed{width:96px;min-width:96px;padding-inline:var(--jv-spacing-md)}.jv-sidebar-footer{display:grid;gap:var(--jv-spacing-md)}.jv-sidebar-mobile-extras{display:none}.jv-sidebar-brand,.jv-sidebar-link,.jv-sidebar-toggle{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.brand-mark{display:inline-grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:var(--jv-radius-md);background:color-mix(in srgb,var(--jv-color-primary) 16%,var(--jv-color-surface));color:var(--jv-color-primary)}.brand-copy{display:grid;gap:.1rem}.brand-copy span{color:var(--jv-color-foreground-muted);font-size:.875rem}.jv-sidebar-item{display:grid;gap:var(--jv-spacing-xs);list-style:none}.jv-sidebar-list{display:grid;gap:var(--jv-spacing-xs);margin:0;padding:0}.jv-sidebar-nav{display:grid;gap:var(--jv-spacing-xs);align-content:start}.jv-sidebar-link,.jv-sidebar-child-link,.jv-sidebar-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border:1px solid transparent;border-radius:var(--jv-radius-md);background:transparent;color:var(--jv-color-foreground-muted);text-decoration:none;cursor:pointer}.jv-sidebar-link-main{display:inline-flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-sidebar-link:hover,.jv-sidebar-child-link:hover,.jv-sidebar-toggle:hover{background:var(--jv-color-surface-muted);color:var(--jv-color-foreground)}.jv-sidebar-link.is-active,.jv-sidebar-child-link.is-active{border-color:color-mix(in srgb,var(--jv-color-primary) 25%,var(--jv-color-border));background:color-mix(in srgb,var(--jv-color-primary) 12%,var(--jv-color-surface));color:var(--jv-color-foreground)}.jv-sidebar-children{display:grid;gap:var(--jv-spacing-xs);margin-left:var(--jv-spacing-xl);padding-left:var(--jv-spacing-sm);border-left:1px solid var(--jv-color-border)}.jv-sidebar-child-link{display:flex;align-items:center;min-height:2.25rem;font-size:.9rem}.jv-sidebar-toggle{width:100%;background:var(--jv-color-surface-muted);cursor:pointer}@media(max-width:900px){.jv-sidebar-backdrop{display:block;position:fixed;inset:0;z-index:99;background:#0006}.jv-sidebar{position:fixed;top:0;left:0;z-index:100;width:280px;min-width:280px;height:100vh;border-right:1px solid var(--jv-color-border);border-bottom:none;box-shadow:var(--jv-shadow-lg);transform:translate(-100%);visibility:hidden;transition:transform .24s cubic-bezier(.4,0,.2,1),visibility .24s}.jv-sidebar.is-mobile-open{transform:translate(0);visibility:visible}.jv-sidebar.is-collapsed{width:280px;min-width:280px}.jv-sidebar-mobile-extras{display:flex;flex-direction:column;gap:var(--jv-spacing-md);padding-top:var(--jv-spacing-md);border-top:1px solid var(--jv-color-border)}.jv-sidebar-mobile-extras .theme-group{display:flex;flex-wrap:wrap;gap:var(--jv-spacing-xs)}.jv-sidebar-mobile-extras .theme-pill{display:inline-flex;align-items:center;gap:var(--jv-spacing-xs);min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:999px;background:var(--jv-color-surface-muted);color:var(--jv-color-foreground);cursor:pointer;font:inherit}.jv-sidebar-mobile-extras .theme-pill.is-active{border-color:var(--jv-color-primary);background:color-mix(in srgb,var(--jv-color-primary) 14%,var(--jv-color-surface))}.jv-sidebar-mobile-extras .mobile-actions{display:flex;gap:var(--jv-spacing-sm)}.jv-sidebar-mobile-extras .icon-button{display:inline-grid;place-items:center;width:var(--jv-density-control-height);height:var(--jv-density-control-height);border:1px solid var(--jv-color-border);border-radius:999px;background:var(--jv-color-surface-muted);color:var(--jv-color-foreground);cursor:pointer}}\n"], dependencies: [{ kind: "component", type: JvIconComponent, selector: "jv-icon", inputs: ["name", "size", "strokeWidth", "decorative", "ariaLabel"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvSidebarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jv-sidebar', standalone: true, imports: [JvIconComponent, RouterLink], template: `
+    @if (mobileOpen()) {
+      <div class="jv-sidebar-backdrop" (click)="mobileClose.emit()"></div>
+    }
+
+    <aside
+      class="jv-sidebar"
+      [class.is-collapsed]="collapsed()"
+      [class.is-mobile-open]="mobileOpen()"
+    >
+      <div class="jv-sidebar-brand">
+        <div class="brand-mark">
+          <jv-icon [name]="brandIcon()" [size]="18" />
+        </div>
+
+        @if (!collapsed()) {
+          <div class="brand-copy">
+            <strong>{{ title() }}</strong>
+            @if (subtitle()) {
+              <span>{{ subtitle() }}</span>
+            }
+          </div>
+        }
+      </div>
+
+      <nav class="jv-sidebar-nav" [attr.aria-label]="ariaLabel()">
+        <ul class="jv-sidebar-list">
+        @for (item of normalizedItems(); track item.id) {
+          <li class="jv-sidebar-item">
+            @if (item.children.length > 0) {
+              <button
+                type="button"
+                class="jv-sidebar-link"
+                [class.is-active]="item.active"
+                [attr.aria-label]="item.label"
+                [attr.aria-expanded]="isExpanded(item.id) ? 'true' : 'false'"
+                [attr.aria-controls]="'jv-sidebar-section-' + item.id"
+                [attr.title]="item.label"
+                (click)="toggleSection(item.id)"
+              >
+                <span class="jv-sidebar-link-main">
+                  @if (item.icon) {
+                    <jv-icon [name]="item.icon" [size]="18" />
+                  }
+
+                  @if (!collapsed()) {
+                    <span>{{ item.label }}</span>
+                  }
+                </span>
+
+                @if (!collapsed()) {
+                  <jv-icon [name]="isExpanded(item.id) ? 'chevron-up' : 'chevron-down'" [size]="16" />
+                }
+              </button>
+            } @else {
+              @if (isHashLink(item.href)) {
+                <button
+                  type="button"
+                  class="jv-sidebar-link"
+                  [class.is-active]="item.active"
+                  [attr.aria-label]="item.label"
+                  [attr.aria-current]="item.active ? 'page' : null"
+                  [attr.title]="item.label"
+                  (click)="navigateTo(item.href); mobileClose.emit()"
+                >
+                  <span class="jv-sidebar-link-main">
+                    @if (item.icon) {
+                      <jv-icon [name]="item.icon" [size]="18" />
+                    }
+
+                    @if (!collapsed()) {
+                      <span>{{ item.label }}</span>
+                    }
+                  </span>
+                </button>
+              } @else {
+                <a
+                  class="jv-sidebar-link"
+                  [class.is-active]="item.active"
+                  [attr.aria-label]="item.label"
+                  [attr.aria-current]="item.active ? 'page' : null"
+                  [routerLink]="item.href"
+                  [attr.title]="item.label"
+                  (click)="mobileClose.emit()"
+                >
+                  <span class="jv-sidebar-link-main">
+                    @if (item.icon) {
+                      <jv-icon [name]="item.icon" [size]="18" />
+                    }
+
+                    @if (!collapsed()) {
+                      <span>{{ item.label }}</span>
+                    }
+                  </span>
+                </a>
+              }
+            }
+
+            @if (!collapsed() && item.children.length > 0 && isExpanded(item.id)) {
+              <div class="jv-sidebar-children" [id]="'jv-sidebar-section-' + item.id">
+                @for (child of item.children; track child.id) {
+                  @if (isHashLink(child.href)) {
+                    <button type="button" class="jv-sidebar-child-link" [class.is-active]="child.active" [attr.aria-label]="child.label" [attr.aria-current]="child.active ? 'page' : null" [attr.title]="child.label" (click)="navigateTo(child.href)">
+                      {{ child.label }}
+                    </button>
+                  } @else {
+                    <a class="jv-sidebar-child-link" [class.is-active]="child.active" [attr.aria-label]="child.label" [attr.aria-current]="child.active ? 'page' : null" [routerLink]="child.href" [attr.title]="child.label" (click)="mobileClose.emit()">
+                      {{ child.label }}
+                    </a>
+                  }
+                }
+              </div>
+            }
+          </li>
+        }
+        </ul>
+      </nav>
+
+      <div class="jv-sidebar-footer">
+        <button type="button" class="jv-sidebar-toggle" (click)="collapseToggle.emit()">
+          <jv-icon [name]="collapsed() ? 'menu' : 'panel-left-close'" [size]="18" />
+          @if (!collapsed()) {
+            <span>Collapse</span>
+          }
+        </button>
+
+        <div class="jv-sidebar-mobile-extras">
+          @if (showThemeSelector()) {
+            <div class="theme-group" aria-label="Theme selector">
+              @for (option of themeOptions(); track option.value) {
+                <button
+                  type="button"
+                  class="theme-pill"
+                  [class.is-active]="currentTheme() === option.value"
+                  (click)="themeChange.emit(option.value)"
+                >
+                  @if (option.icon) {
+                    <jv-icon [name]="option.icon" [size]="16" />
+                  }
+                  <span>{{ option.label }}</span>
+                </button>
+              }
+            </div>
+          }
+
+          <div class="mobile-actions">
+            @for (action of topbarActions(); track action.id) {
+              <button type="button" class="icon-button" [attr.aria-label]="action.label" (click)="actionClick.emit(action.id); mobileClose.emit()">
+                <jv-icon [name]="action.icon" [size]="18" />
+              </button>
+            }
+          </div>
+        </div>
+      </div>
+    </aside>
   `, styles: [".jv-sidebar-backdrop{display:none}.jv-sidebar{display:grid;grid-template-rows:auto 1fr auto;gap:var(--jv-spacing-lg);width:280px;min-width:280px;height:100vh;padding:var(--jv-spacing-lg);overflow-y:auto;border-right:1px solid var(--jv-color-border);background:var(--jv-color-surface);scrollbar-width:none;-ms-overflow-style:none}.jv-sidebar::-webkit-scrollbar{width:0;height:0;display:none}.jv-sidebar.is-collapsed{width:96px;min-width:96px;padding-inline:var(--jv-spacing-md)}.jv-sidebar-footer{display:grid;gap:var(--jv-spacing-md)}.jv-sidebar-mobile-extras{display:none}.jv-sidebar-brand,.jv-sidebar-link,.jv-sidebar-toggle{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.brand-mark{display:inline-grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:var(--jv-radius-md);background:color-mix(in srgb,var(--jv-color-primary) 16%,var(--jv-color-surface));color:var(--jv-color-primary)}.brand-copy{display:grid;gap:.1rem}.brand-copy span{color:var(--jv-color-foreground-muted);font-size:.875rem}.jv-sidebar-item{display:grid;gap:var(--jv-spacing-xs);list-style:none}.jv-sidebar-list{display:grid;gap:var(--jv-spacing-xs);margin:0;padding:0}.jv-sidebar-nav{display:grid;gap:var(--jv-spacing-xs);align-content:start}.jv-sidebar-link,.jv-sidebar-child-link,.jv-sidebar-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border:1px solid transparent;border-radius:var(--jv-radius-md);background:transparent;color:var(--jv-color-foreground-muted);text-decoration:none;cursor:pointer}.jv-sidebar-link-main{display:inline-flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-sidebar-link:hover,.jv-sidebar-child-link:hover,.jv-sidebar-toggle:hover{background:var(--jv-color-surface-muted);color:var(--jv-color-foreground)}.jv-sidebar-link.is-active,.jv-sidebar-child-link.is-active{border-color:color-mix(in srgb,var(--jv-color-primary) 25%,var(--jv-color-border));background:color-mix(in srgb,var(--jv-color-primary) 12%,var(--jv-color-surface));color:var(--jv-color-foreground)}.jv-sidebar-children{display:grid;gap:var(--jv-spacing-xs);margin-left:var(--jv-spacing-xl);padding-left:var(--jv-spacing-sm);border-left:1px solid var(--jv-color-border)}.jv-sidebar-child-link{display:flex;align-items:center;min-height:2.25rem;font-size:.9rem}.jv-sidebar-toggle{width:100%;background:var(--jv-color-surface-muted);cursor:pointer}@media(max-width:900px){.jv-sidebar-backdrop{display:block;position:fixed;inset:0;z-index:99;background:#0006}.jv-sidebar{position:fixed;top:0;left:0;z-index:100;width:280px;min-width:280px;height:100vh;border-right:1px solid var(--jv-color-border);border-bottom:none;box-shadow:var(--jv-shadow-lg);transform:translate(-100%);visibility:hidden;transition:transform .24s cubic-bezier(.4,0,.2,1),visibility .24s}.jv-sidebar.is-mobile-open{transform:translate(0);visibility:visible}.jv-sidebar.is-collapsed{width:280px;min-width:280px}.jv-sidebar-mobile-extras{display:flex;flex-direction:column;gap:var(--jv-spacing-md);padding-top:var(--jv-spacing-md);border-top:1px solid var(--jv-color-border)}.jv-sidebar-mobile-extras .theme-group{display:flex;flex-wrap:wrap;gap:var(--jv-spacing-xs)}.jv-sidebar-mobile-extras .theme-pill{display:inline-flex;align-items:center;gap:var(--jv-spacing-xs);min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:999px;background:var(--jv-color-surface-muted);color:var(--jv-color-foreground);cursor:pointer;font:inherit}.jv-sidebar-mobile-extras .theme-pill.is-active{border-color:var(--jv-color-primary);background:color-mix(in srgb,var(--jv-color-primary) 14%,var(--jv-color-surface))}.jv-sidebar-mobile-extras .mobile-actions{display:flex;gap:var(--jv-spacing-sm)}.jv-sidebar-mobile-extras .icon-button{display:inline-grid;place-items:center;width:var(--jv-density-control-height);height:var(--jv-density-control-height);border:1px solid var(--jv-color-border);border-radius:999px;background:var(--jv-color-surface-muted);color:var(--jv-color-foreground);cursor:pointer}}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], brandIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandIcon", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], mobileOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileOpen", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], currentTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentTheme", required: false }] }], themeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "themeOptions", required: false }] }], topbarActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "topbarActions", required: false }] }], showThemeSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThemeSelector", required: false }] }], collapseToggle: [{ type: i0.Output, args: ["collapseToggle"] }], mobileClose: [{ type: i0.Output, args: ["mobileClose"] }], themeChange: [{ type: i0.Output, args: ["themeChange"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }] } });
 
@@ -20229,88 +21325,88 @@ class JvDashboardShellComponent {
     themeChange = output();
     topbarActionClick = output();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvDashboardShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: JvDashboardShellComponent, isStandalone: true, selector: "jv-dashboard-shell", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, sidebarSubtitle: { classPropertyName: "sidebarSubtitle", publicName: "sidebarSubtitle", isSignal: true, isRequired: false, transformFunction: null }, brandIcon: { classPropertyName: "brandIcon", publicName: "brandIcon", isSignal: true, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, sidebarCollapsed: { classPropertyName: "sidebarCollapsed", publicName: "sidebarCollapsed", isSignal: true, isRequired: false, transformFunction: null }, mobileSidebarOpen: { classPropertyName: "mobileSidebarOpen", publicName: "mobileSidebarOpen", isSignal: true, isRequired: false, transformFunction: null }, topbarTitle: { classPropertyName: "topbarTitle", publicName: "topbarTitle", isSignal: true, isRequired: false, transformFunction: null }, topbarSubtitle: { classPropertyName: "topbarSubtitle", publicName: "topbarSubtitle", isSignal: true, isRequired: false, transformFunction: null }, currentTheme: { classPropertyName: "currentTheme", publicName: "currentTheme", isSignal: true, isRequired: false, transformFunction: null }, themeOptions: { classPropertyName: "themeOptions", publicName: "themeOptions", isSignal: true, isRequired: false, transformFunction: null }, topbarActions: { classPropertyName: "topbarActions", publicName: "topbarActions", isSignal: true, isRequired: false, transformFunction: null }, showThemeSelector: { classPropertyName: "showThemeSelector", publicName: "showThemeSelector", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuClick: "menuClick", mobileClose: "mobileClose", sidebarCollapseToggle: "sidebarCollapseToggle", themeChange: "themeChange", topbarActionClick: "topbarActionClick" }, ngImport: i0, template: `
-    <div class="jv-dashboard-shell" [class.is-sidebar-collapsed]="sidebarCollapsed()">
-      <jv-sidebar
-        [title]="title()"
-        [subtitle]="sidebarSubtitle()"
-        [brandIcon]="brandIcon()"
-        [items]="navItems()"
-        [collapsed]="sidebarCollapsed()"
-        [mobileOpen]="mobileSidebarOpen()"
-        [currentTheme]="currentTheme()"
-        [themeOptions]="themeOptions()"
-        [topbarActions]="topbarActions()"
-        [showThemeSelector]="showThemeSelector()"
-        (collapseToggle)="sidebarCollapseToggle.emit()"
-        (mobileClose)="mobileClose.emit()"
-        (themeChange)="themeChange.emit($event)"
-        (actionClick)="topbarActionClick.emit($event)"
-      />
-
-      <div class="jv-dashboard-main">
-        <jv-topbar
-          [title]="topbarTitle()"
-          [subtitle]="topbarSubtitle()"
-          [currentTheme]="currentTheme()"
-          [themeOptions]="themeOptions()"
-          [actions]="topbarActions()"
-          [showThemeSelector]="showThemeSelector()"
-          (menuClick)="menuClick.emit()"
-          (themeChange)="themeChange.emit($event)"
-          (actionClick)="topbarActionClick.emit($event)"
-        >
-          <ng-content select="[topbar-actions]" topbar-actions></ng-content>
-        </jv-topbar>
-
-        <main class="jv-dashboard-content">
-          <ng-content></ng-content>
-        </main>
-      </div>
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: JvDashboardShellComponent, isStandalone: true, selector: "jv-dashboard-shell", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, sidebarSubtitle: { classPropertyName: "sidebarSubtitle", publicName: "sidebarSubtitle", isSignal: true, isRequired: false, transformFunction: null }, brandIcon: { classPropertyName: "brandIcon", publicName: "brandIcon", isSignal: true, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, sidebarCollapsed: { classPropertyName: "sidebarCollapsed", publicName: "sidebarCollapsed", isSignal: true, isRequired: false, transformFunction: null }, mobileSidebarOpen: { classPropertyName: "mobileSidebarOpen", publicName: "mobileSidebarOpen", isSignal: true, isRequired: false, transformFunction: null }, topbarTitle: { classPropertyName: "topbarTitle", publicName: "topbarTitle", isSignal: true, isRequired: false, transformFunction: null }, topbarSubtitle: { classPropertyName: "topbarSubtitle", publicName: "topbarSubtitle", isSignal: true, isRequired: false, transformFunction: null }, currentTheme: { classPropertyName: "currentTheme", publicName: "currentTheme", isSignal: true, isRequired: false, transformFunction: null }, themeOptions: { classPropertyName: "themeOptions", publicName: "themeOptions", isSignal: true, isRequired: false, transformFunction: null }, topbarActions: { classPropertyName: "topbarActions", publicName: "topbarActions", isSignal: true, isRequired: false, transformFunction: null }, showThemeSelector: { classPropertyName: "showThemeSelector", publicName: "showThemeSelector", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuClick: "menuClick", mobileClose: "mobileClose", sidebarCollapseToggle: "sidebarCollapseToggle", themeChange: "themeChange", topbarActionClick: "topbarActionClick" }, ngImport: i0, template: `
+    <div class="jv-dashboard-shell" [class.is-sidebar-collapsed]="sidebarCollapsed()">
+      <jv-sidebar
+        [title]="title()"
+        [subtitle]="sidebarSubtitle()"
+        [brandIcon]="brandIcon()"
+        [items]="navItems()"
+        [collapsed]="sidebarCollapsed()"
+        [mobileOpen]="mobileSidebarOpen()"
+        [currentTheme]="currentTheme()"
+        [themeOptions]="themeOptions()"
+        [topbarActions]="topbarActions()"
+        [showThemeSelector]="showThemeSelector()"
+        (collapseToggle)="sidebarCollapseToggle.emit()"
+        (mobileClose)="mobileClose.emit()"
+        (themeChange)="themeChange.emit($event)"
+        (actionClick)="topbarActionClick.emit($event)"
+      />
+
+      <div class="jv-dashboard-main">
+        <jv-topbar
+          [title]="topbarTitle()"
+          [subtitle]="topbarSubtitle()"
+          [currentTheme]="currentTheme()"
+          [themeOptions]="themeOptions()"
+          [actions]="topbarActions()"
+          [showThemeSelector]="showThemeSelector()"
+          (menuClick)="menuClick.emit()"
+          (themeChange)="themeChange.emit($event)"
+          (actionClick)="topbarActionClick.emit($event)"
+        >
+          <ng-content select="[topbar-actions]" topbar-actions></ng-content>
+        </jv-topbar>
+
+        <main class="jv-dashboard-content">
+          <ng-content></ng-content>
+        </main>
+      </div>
+    </div>
   `, isInline: true, styles: [":host{display:block;height:100dvh;overflow:hidden}.jv-dashboard-shell{display:grid;height:100%;grid-template-columns:auto 1fr;background:var(--jv-color-background);overflow:hidden}.jv-dashboard-main{display:grid;grid-template-rows:auto 1fr;min-width:0;min-height:0;overflow:hidden}.jv-dashboard-content{overflow:auto;min-width:0;min-height:0;padding:var(--jv-spacing-xl);scrollbar-width:none;-ms-overflow-style:none}.jv-dashboard-content::-webkit-scrollbar{width:0;height:0;display:none}@media(max-width:900px){.jv-dashboard-shell{grid-template-columns:1fr}.jv-dashboard-content{padding:var(--jv-spacing-lg)}}\n"], dependencies: [{ kind: "component", type: JvSidebarComponent, selector: "jv-sidebar", inputs: ["title", "subtitle", "brandIcon", "items", "collapsed", "mobileOpen", "ariaLabel", "currentTheme", "themeOptions", "topbarActions", "showThemeSelector"], outputs: ["collapseToggle", "mobileClose", "themeChange", "actionClick"] }, { kind: "component", type: JvTopbarComponent, selector: "jv-topbar", inputs: ["title", "subtitle", "currentTheme", "themeOptions", "actions", "showThemeSelector"], outputs: ["menuClick", "themeChange", "actionClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvDashboardShellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'jv-dashboard-shell', standalone: true, imports: [JvSidebarComponent, JvTopbarComponent], template: `
-    <div class="jv-dashboard-shell" [class.is-sidebar-collapsed]="sidebarCollapsed()">
-      <jv-sidebar
-        [title]="title()"
-        [subtitle]="sidebarSubtitle()"
-        [brandIcon]="brandIcon()"
-        [items]="navItems()"
-        [collapsed]="sidebarCollapsed()"
-        [mobileOpen]="mobileSidebarOpen()"
-        [currentTheme]="currentTheme()"
-        [themeOptions]="themeOptions()"
-        [topbarActions]="topbarActions()"
-        [showThemeSelector]="showThemeSelector()"
-        (collapseToggle)="sidebarCollapseToggle.emit()"
-        (mobileClose)="mobileClose.emit()"
-        (themeChange)="themeChange.emit($event)"
-        (actionClick)="topbarActionClick.emit($event)"
-      />
-
-      <div class="jv-dashboard-main">
-        <jv-topbar
-          [title]="topbarTitle()"
-          [subtitle]="topbarSubtitle()"
-          [currentTheme]="currentTheme()"
-          [themeOptions]="themeOptions()"
-          [actions]="topbarActions()"
-          [showThemeSelector]="showThemeSelector()"
-          (menuClick)="menuClick.emit()"
-          (themeChange)="themeChange.emit($event)"
-          (actionClick)="topbarActionClick.emit($event)"
-        >
-          <ng-content select="[topbar-actions]" topbar-actions></ng-content>
-        </jv-topbar>
-
-        <main class="jv-dashboard-content">
-          <ng-content></ng-content>
-        </main>
-      </div>
-    </div>
+            args: [{ selector: 'jv-dashboard-shell', standalone: true, imports: [JvSidebarComponent, JvTopbarComponent], template: `
+    <div class="jv-dashboard-shell" [class.is-sidebar-collapsed]="sidebarCollapsed()">
+      <jv-sidebar
+        [title]="title()"
+        [subtitle]="sidebarSubtitle()"
+        [brandIcon]="brandIcon()"
+        [items]="navItems()"
+        [collapsed]="sidebarCollapsed()"
+        [mobileOpen]="mobileSidebarOpen()"
+        [currentTheme]="currentTheme()"
+        [themeOptions]="themeOptions()"
+        [topbarActions]="topbarActions()"
+        [showThemeSelector]="showThemeSelector()"
+        (collapseToggle)="sidebarCollapseToggle.emit()"
+        (mobileClose)="mobileClose.emit()"
+        (themeChange)="themeChange.emit($event)"
+        (actionClick)="topbarActionClick.emit($event)"
+      />
+
+      <div class="jv-dashboard-main">
+        <jv-topbar
+          [title]="topbarTitle()"
+          [subtitle]="topbarSubtitle()"
+          [currentTheme]="currentTheme()"
+          [themeOptions]="themeOptions()"
+          [actions]="topbarActions()"
+          [showThemeSelector]="showThemeSelector()"
+          (menuClick)="menuClick.emit()"
+          (themeChange)="themeChange.emit($event)"
+          (actionClick)="topbarActionClick.emit($event)"
+        >
+          <ng-content select="[topbar-actions]" topbar-actions></ng-content>
+        </jv-topbar>
+
+        <main class="jv-dashboard-content">
+          <ng-content></ng-content>
+        </main>
+      </div>
+    </div>
   `, styles: [":host{display:block;height:100dvh;overflow:hidden}.jv-dashboard-shell{display:grid;height:100%;grid-template-columns:auto 1fr;background:var(--jv-color-background);overflow:hidden}.jv-dashboard-main{display:grid;grid-template-rows:auto 1fr;min-width:0;min-height:0;overflow:hidden}.jv-dashboard-content{overflow:auto;min-width:0;min-height:0;padding:var(--jv-spacing-xl);scrollbar-width:none;-ms-overflow-style:none}.jv-dashboard-content::-webkit-scrollbar{width:0;height:0;display:none}@media(max-width:900px){.jv-dashboard-shell{grid-template-columns:1fr}.jv-dashboard-content{padding:var(--jv-spacing-lg)}}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], sidebarSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarSubtitle", required: false }] }], brandIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandIcon", required: false }] }], navItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "navItems", required: false }] }], sidebarCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarCollapsed", required: false }] }], mobileSidebarOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileSidebarOpen", required: false }] }], topbarTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "topbarTitle", required: false }] }], topbarSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "topbarSubtitle", required: false }] }], currentTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentTheme", required: false }] }], themeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "themeOptions", required: false }] }], topbarActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "topbarActions", required: false }] }], showThemeSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThemeSelector", required: false }] }], menuClick: [{ type: i0.Output, args: ["menuClick"] }], mobileClose: [{ type: i0.Output, args: ["mobileClose"] }], sidebarCollapseToggle: [{ type: i0.Output, args: ["sidebarCollapseToggle"] }], themeChange: [{ type: i0.Output, args: ["themeChange"] }], topbarActionClick: [{ type: i0.Output, args: ["topbarActionClick"] }] } });
 
@@ -20379,40 +21475,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
   `, styles: [".jv-page{display:grid;gap:var(--jv-spacing-lg);min-width:0}.jv-page-header{display:grid;gap:var(--jv-spacing-sm)}.jv-page-content{min-width:0}.eyebrow{margin:0;color:var(--jv-color-primary);font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}h1,.description{margin:0}.description{color:var(--jv-color-foreground-muted);max-width:72ch}\n"] }]
         }], propDecorators: { eyebrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "eyebrow", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], breadcrumbs: [{ type: i0.Input, args: [{ isSignal: true, alias: "breadcrumbs", required: false }] }] } });
 
-class JvListComponent {
-    role = input('list', ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
-    variant = input(null, ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    variantClass = computed(() => {
-        const v = this.variant();
-        return v ? `jv-list--${v}` : '';
-    }, ...(ngDevMode ? [{ debugName: "variantClass" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: JvListComponent, isStandalone: true, selector: "jv-list", inputs: { role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <ul
-      class="jv-list"
-      [class]="variantClass()"
-      [attr.role]="role() === 'navigation' ? 'list' : null"
-      [attr.aria-label]="ariaLabel()"
-    >
-      <ng-content />
-    </ul>
-  `, isInline: true, styles: [".jv-list{display:block;list-style:none;margin:0;padding:0}.jv-list>:not(:last-child){border-bottom:1px solid var(--jv-color-border)}.jv-list--bordered{border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md)}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvListComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'jv-list', standalone: true, template: `
-    <ul
-      class="jv-list"
-      [class]="variantClass()"
-      [attr.role]="role() === 'navigation' ? 'list' : null"
-      [attr.aria-label]="ariaLabel()"
-    >
-      <ng-content />
-    </ul>
-  `, styles: [".jv-list{display:block;list-style:none;margin:0;padding:0}.jv-list>:not(:last-child){border-bottom:1px solid var(--jv-color-border)}.jv-list--bordered{border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md)}\n"] }]
-        }], propDecorators: { role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
-
 class JvListItemComponent {
     title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
     description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
@@ -20481,6 +21543,470 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
   `, styles: [":host{display:block}.jv-list-item{display:flex;align-items:center;gap:var(--jv-spacing-md);padding:var(--jv-spacing-md);background:var(--jv-color-surface);cursor:default;outline:none;transition:background-color .16s ease}.jv-list-item:hover{background:var(--jv-color-surface-muted)}.jv-list-item:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-list-item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.jv-list-item--active{background:color-mix(in srgb,var(--jv-color-primary) 10%,var(--jv-color-surface));border-left:3px solid var(--jv-color-primary);padding-left:calc(var(--jv-spacing-md) - 3px)}.jv-list-item-text{flex:1;display:flex;flex-direction:column;gap:.125rem;min-width:0}.jv-list-item-title{font-weight:600;font-size:var(--jv-density-font-size);color:var(--jv-color-foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.jv-list-item-description{font-size:.85rem;color:var(--jv-color-foreground-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.jv-list-item-meta{display:flex;align-items:center;gap:var(--jv-spacing-sm);flex-shrink:0}.jv-list-item-leading{flex-shrink:0;color:var(--jv-color-foreground-muted)}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], leadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIcon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], activated: [{ type: i0.Output, args: ["activated"] }] } });
 
+class JvTabPanelDirective {
+    templateRef;
+    id = input.required({ ...(ngDevMode ? { debugName: "id" } : /* istanbul ignore next */ {}), alias: 'jvTabPanel' });
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvTabPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: JvTabPanelDirective, isStandalone: true, selector: "ng-template[jvTabPanel]", inputs: { id: { classPropertyName: "id", publicName: "jvTabPanel", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvTabPanelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[jvTabPanel]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "jvTabPanel", required: true }] }] } });
+
+let tabsSequence = 0;
+class JvTabsComponent {
+    instanceId = ++tabsSequence;
+    panelTemplates = contentChildren(JvTabPanelDirective, ...(ngDevMode ? [{ debugName: "panelTemplates" }] : /* istanbul ignore next */ []));
+    tabListRef = viewChild('tabList', ...(ngDevMode ? [{ debugName: "tabListRef" }] : /* istanbul ignore next */ []));
+    tabs = input([], ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+    activeTabId = input(null, ...(ngDevMode ? [{ debugName: "activeTabId" }] : /* istanbul ignore next */ []));
+    keepMounted = input(true, ...(ngDevMode ? [{ debugName: "keepMounted" }] : /* istanbul ignore next */ []));
+    activeTabChange = output();
+    showScrollLeft = signal(false, ...(ngDevMode ? [{ debugName: "showScrollLeft" }] : /* istanbul ignore next */ []));
+    showScrollRight = signal(false, ...(ngDevMode ? [{ debugName: "showScrollRight" }] : /* istanbul ignore next */ []));
+    resolvedActiveTabId = computed(() => {
+        const enabledTabs = this.tabs().filter((tab) => !tab.disabled);
+        const requestedId = this.activeTabId();
+        if (requestedId && enabledTabs.some((tab) => tab.id === requestedId)) {
+            return requestedId;
+        }
+        return enabledTabs[0]?.id ?? null;
+    }, ...(ngDevMode ? [{ debugName: "resolvedActiveTabId" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterNextRender(() => this.updateScrollControls());
+        effect(() => {
+            this.tabs();
+            this.panelTemplates();
+            this.activeTabId();
+            queueMicrotask(() => {
+                this.ensureActiveTabVisible();
+                this.updateScrollControls();
+            });
+        });
+    }
+    ngAfterViewInit() {
+        this.updateScrollControls();
+    }
+    handleWindowResize() {
+        this.updateScrollControls();
+    }
+    isActive(tabId) {
+        return this.resolvedActiveTabId() === tabId;
+    }
+    getTabIndex(tabId, disabled) {
+        if (disabled) {
+            return -1;
+        }
+        return this.isActive(tabId) ? 0 : -1;
+    }
+    activateTab(tabId) {
+        const tab = this.tabs().find((item) => item.id === tabId);
+        if (!tab || tab.disabled || this.resolvedActiveTabId() === tabId) {
+            return;
+        }
+        this.activeTabChange.emit(tabId);
+        queueMicrotask(() => this.focusTabButton(tabId));
+    }
+    handleKeydown(event, currentTabId) {
+        const enabledTabs = this.tabs().filter((tab) => !tab.disabled);
+        if (enabledTabs.length === 0) {
+            return;
+        }
+        const currentIndex = Math.max(0, enabledTabs.findIndex((tab) => tab.id === currentTabId));
+        switch (event.key) {
+            case 'ArrowRight':
+                event.preventDefault();
+                this.activateAndFocus(enabledTabs[(currentIndex + 1) % enabledTabs.length].id);
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                this.activateAndFocus(enabledTabs[(currentIndex - 1 + enabledTabs.length) % enabledTabs.length].id);
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.activateAndFocus(enabledTabs[0].id);
+                break;
+            case 'End':
+                event.preventDefault();
+                this.activateAndFocus(enabledTabs[enabledTabs.length - 1].id);
+                break;
+        }
+    }
+    scrollTabs(direction) {
+        const tabList = this.tabListRef()?.nativeElement;
+        if (!tabList) {
+            return;
+        }
+        tabList.scrollBy({
+            left: direction * Math.max(tabList.clientWidth * 0.75, 180),
+            behavior: 'smooth',
+        });
+    }
+    updateScrollControls() {
+        const tabList = this.tabListRef()?.nativeElement;
+        if (!tabList) {
+            return;
+        }
+        const maxScrollLeft = Math.max(tabList.scrollWidth - tabList.clientWidth, 0);
+        this.showScrollLeft.set(tabList.scrollLeft > 1);
+        this.showScrollRight.set(tabList.scrollLeft < maxScrollLeft - 1);
+    }
+    panelTemplate(tabId) {
+        return this.panelTemplates().find((panel) => panel.id() === tabId)?.templateRef ?? null;
+    }
+    tabButtonId(tabId) {
+        return `jv-tab-${this.instanceId}-${tabId}`;
+    }
+    panelId(tabId) {
+        return `jv-tab-panel-${this.instanceId}-${tabId}`;
+    }
+    activateAndFocus(tabId) {
+        if (this.resolvedActiveTabId() !== tabId) {
+            this.activeTabChange.emit(tabId);
+        }
+        queueMicrotask(() => this.focusTabButton(tabId));
+    }
+    ensureActiveTabVisible() {
+        const activeTabId = this.resolvedActiveTabId();
+        if (!activeTabId) {
+            return;
+        }
+        const button = this.getTabButton(activeTabId);
+        if (button && typeof button.scrollIntoView === 'function') {
+            button.scrollIntoView({ inline: 'nearest', block: 'nearest' });
+        }
+    }
+    focusTabButton(tabId) {
+        this.getTabButton(tabId)?.focus();
+    }
+    getTabButton(tabId) {
+        const tabList = this.tabListRef()?.nativeElement;
+        if (!tabList) {
+            return null;
+        }
+        return (Array.from(tabList.querySelectorAll('[data-jv-tab-id]')).find((button) => button.dataset['jvTabId'] === tabId) ?? null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvTabsComponent, isStandalone: true, selector: "jv-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, activeTabId: { classPropertyName: "activeTabId", publicName: "activeTabId", isSignal: true, isRequired: false, transformFunction: null }, keepMounted: { classPropertyName: "keepMounted", publicName: "keepMounted", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTabChange: "activeTabChange" }, host: { listeners: { "window:resize": "handleWindowResize()" } }, queries: [{ propertyName: "panelTemplates", predicate: JvTabPanelDirective, isSignal: true }], viewQueries: [{ propertyName: "tabListRef", first: true, predicate: ["tabList"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="jv-tabs">
+      <div class="jv-tabs-header">
+        <div class="jv-tabs-scroll" #tabList role="tablist" aria-orientation="horizontal" (scroll)="updateScrollControls()">
+          @for (tab of tabs(); track tab.id) {
+            <button
+              type="button"
+              class="jv-tab"
+              [class.jv-tab--active]="isActive(tab.id)"
+              [class.jv-tab--disabled]="tab.disabled ?? false"
+              [id]="tabButtonId(tab.id)"
+              [attr.data-jv-tab-id]="tab.id"
+              role="tab"
+              [attr.aria-selected]="isActive(tab.id) ? 'true' : 'false'"
+              [attr.aria-controls]="panelId(tab.id)"
+              [attr.tabindex]="getTabIndex(tab.id, tab.disabled ?? false)"
+              [disabled]="tab.disabled ?? false"
+              (click)="activateTab(tab.id)"
+              (keydown)="handleKeydown($event, tab.id)"
+            >
+              @if (tab.icon) {
+                <jv-icon [name]="tab.icon" [size]="16" />
+              }
+              <span>{{ tab.label }}</span>
+            </button>
+          }
+        </div>
+
+        @if (showScrollLeft() || showScrollRight()) {
+          <div class="jv-tabs-controls" aria-hidden="true">
+            <button type="button" class="jv-tabs-scroll-button" [disabled]="!showScrollLeft()" (click)="scrollTabs(-1)">
+              <jv-icon name="chevron-left" [size]="16" />
+            </button>
+            <button type="button" class="jv-tabs-scroll-button" [disabled]="!showScrollRight()" (click)="scrollTabs(1)">
+              <jv-icon name="chevron-right" [size]="16" />
+            </button>
+          </div>
+        }
+      </div>
+
+      <div class="jv-tabs-panels">
+        @if (keepMounted()) {
+          @for (tab of tabs(); track tab.id) {
+            <div
+              class="jv-tab-panel"
+              [class.jv-tab-panel--hidden]="!isActive(tab.id)"
+              [id]="panelId(tab.id)"
+              role="tabpanel"
+              [attr.aria-labelledby]="tabButtonId(tab.id)"
+              [attr.tabindex]="isActive(tab.id) ? 0 : null"
+              [hidden]="!isActive(tab.id)"
+            >
+              <ng-container [ngTemplateOutlet]="panelTemplate(tab.id) ?? null" />
+            </div>
+          }
+        } @else if (resolvedActiveTabId(); as activeId) {
+          <div
+            class="jv-tab-panel"
+            [id]="panelId(activeId)"
+            role="tabpanel"
+            [attr.aria-labelledby]="tabButtonId(activeId)"
+            tabindex="0"
+          >
+            <ng-container [ngTemplateOutlet]="panelTemplate(activeId) ?? null" />
+          </div>
+        }
+      </div>
+    </div>
+  `, isInline: true, styles: [".jv-tabs{display:grid;gap:var(--jv-spacing-md)}.jv-tabs-header{display:flex;align-items:center;gap:var(--jv-spacing-sm);min-width:0}.jv-tabs-scroll{flex:1;min-width:0;display:flex;align-items:stretch;gap:var(--jv-spacing-xs);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;border-bottom:1px solid var(--jv-color-border);scroll-behavior:smooth}.jv-tabs-scroll::-webkit-scrollbar{display:none}.jv-tab{position:relative;display:inline-flex;align-items:center;gap:var(--jv-spacing-xs);flex:0 0 auto;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border:0;border-bottom:2px solid transparent;background:transparent;color:var(--jv-color-foreground-muted);font:inherit;font-weight:600;white-space:nowrap;cursor:pointer;transition:color .16s ease,border-color .16s ease,background-color .16s ease}.jv-tab:hover:not(:disabled){color:var(--jv-color-foreground);background:color-mix(in srgb,var(--jv-color-primary) 6%,transparent)}.jv-tab:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px;border-radius:var(--jv-radius-sm) var(--jv-radius-sm) 0 0}.jv-tab--active{color:var(--jv-color-primary);border-bottom-color:var(--jv-color-primary)}.jv-tab--disabled{opacity:.5;cursor:not-allowed}.jv-tabs-controls{display:inline-flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-tabs-scroll-button{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);background:var(--jv-color-surface);color:var(--jv-color-foreground);cursor:pointer}.jv-tabs-scroll-button:disabled{opacity:.4;cursor:default}.jv-tab-panel{outline:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: JvIconComponent, selector: "jv-icon", inputs: ["name", "size", "strokeWidth", "decorative", "ariaLabel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvTabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jv-tabs', standalone: true, imports: [NgTemplateOutlet, JvIconComponent], template: `
+    <div class="jv-tabs">
+      <div class="jv-tabs-header">
+        <div class="jv-tabs-scroll" #tabList role="tablist" aria-orientation="horizontal" (scroll)="updateScrollControls()">
+          @for (tab of tabs(); track tab.id) {
+            <button
+              type="button"
+              class="jv-tab"
+              [class.jv-tab--active]="isActive(tab.id)"
+              [class.jv-tab--disabled]="tab.disabled ?? false"
+              [id]="tabButtonId(tab.id)"
+              [attr.data-jv-tab-id]="tab.id"
+              role="tab"
+              [attr.aria-selected]="isActive(tab.id) ? 'true' : 'false'"
+              [attr.aria-controls]="panelId(tab.id)"
+              [attr.tabindex]="getTabIndex(tab.id, tab.disabled ?? false)"
+              [disabled]="tab.disabled ?? false"
+              (click)="activateTab(tab.id)"
+              (keydown)="handleKeydown($event, tab.id)"
+            >
+              @if (tab.icon) {
+                <jv-icon [name]="tab.icon" [size]="16" />
+              }
+              <span>{{ tab.label }}</span>
+            </button>
+          }
+        </div>
+
+        @if (showScrollLeft() || showScrollRight()) {
+          <div class="jv-tabs-controls" aria-hidden="true">
+            <button type="button" class="jv-tabs-scroll-button" [disabled]="!showScrollLeft()" (click)="scrollTabs(-1)">
+              <jv-icon name="chevron-left" [size]="16" />
+            </button>
+            <button type="button" class="jv-tabs-scroll-button" [disabled]="!showScrollRight()" (click)="scrollTabs(1)">
+              <jv-icon name="chevron-right" [size]="16" />
+            </button>
+          </div>
+        }
+      </div>
+
+      <div class="jv-tabs-panels">
+        @if (keepMounted()) {
+          @for (tab of tabs(); track tab.id) {
+            <div
+              class="jv-tab-panel"
+              [class.jv-tab-panel--hidden]="!isActive(tab.id)"
+              [id]="panelId(tab.id)"
+              role="tabpanel"
+              [attr.aria-labelledby]="tabButtonId(tab.id)"
+              [attr.tabindex]="isActive(tab.id) ? 0 : null"
+              [hidden]="!isActive(tab.id)"
+            >
+              <ng-container [ngTemplateOutlet]="panelTemplate(tab.id) ?? null" />
+            </div>
+          }
+        } @else if (resolvedActiveTabId(); as activeId) {
+          <div
+            class="jv-tab-panel"
+            [id]="panelId(activeId)"
+            role="tabpanel"
+            [attr.aria-labelledby]="tabButtonId(activeId)"
+            tabindex="0"
+          >
+            <ng-container [ngTemplateOutlet]="panelTemplate(activeId) ?? null" />
+          </div>
+        }
+      </div>
+    </div>
+  `, styles: [".jv-tabs{display:grid;gap:var(--jv-spacing-md)}.jv-tabs-header{display:flex;align-items:center;gap:var(--jv-spacing-sm);min-width:0}.jv-tabs-scroll{flex:1;min-width:0;display:flex;align-items:stretch;gap:var(--jv-spacing-xs);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;border-bottom:1px solid var(--jv-color-border);scroll-behavior:smooth}.jv-tabs-scroll::-webkit-scrollbar{display:none}.jv-tab{position:relative;display:inline-flex;align-items:center;gap:var(--jv-spacing-xs);flex:0 0 auto;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border:0;border-bottom:2px solid transparent;background:transparent;color:var(--jv-color-foreground-muted);font:inherit;font-weight:600;white-space:nowrap;cursor:pointer;transition:color .16s ease,border-color .16s ease,background-color .16s ease}.jv-tab:hover:not(:disabled){color:var(--jv-color-foreground);background:color-mix(in srgb,var(--jv-color-primary) 6%,transparent)}.jv-tab:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px;border-radius:var(--jv-radius-sm) var(--jv-radius-sm) 0 0}.jv-tab--active{color:var(--jv-color-primary);border-bottom-color:var(--jv-color-primary)}.jv-tab--disabled{opacity:.5;cursor:not-allowed}.jv-tabs-controls{display:inline-flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-tabs-scroll-button{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);background:var(--jv-color-surface);color:var(--jv-color-foreground);cursor:pointer}.jv-tabs-scroll-button:disabled{opacity:.4;cursor:default}.jv-tab-panel{outline:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { panelTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => JvTabPanelDirective), { isSignal: true }] }], tabListRef: [{ type: i0.ViewChild, args: ['tabList', { isSignal: true }] }], tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], activeTabId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTabId", required: false }] }], keepMounted: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepMounted", required: false }] }], activeTabChange: [{ type: i0.Output, args: ["activeTabChange"] }], handleWindowResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
+let tooltipSequence = 0;
+class JvTooltipDirective {
+    document = inject(DOCUMENT);
+    renderer = inject(Renderer2);
+    hostRef = inject((ElementRef));
+    tooltipElement = null;
+    showTimeout = null;
+    hideTimeout = null;
+    tooltipId = `jv-tooltip-${++tooltipSequence}`;
+    text = input.required({ ...(ngDevMode ? { debugName: "text" } : /* istanbul ignore next */ {}), alias: 'jvTooltip' });
+    position = input('top', { ...(ngDevMode ? { debugName: "position" } : /* istanbul ignore next */ {}), alias: 'jvTooltipPosition' });
+    show() {
+        if (!this.text().trim()) {
+            return;
+        }
+        this.clearHideTimeout();
+        if (this.tooltipElement) {
+            return;
+        }
+        this.showTimeout = setTimeout(() => {
+            this.renderTooltip();
+            this.positionTooltip();
+            this.renderer.setAttribute(this.anchorElement(), 'aria-describedby', this.tooltipId);
+        }, 120);
+    }
+    hide() {
+        this.clearShowTimeout();
+        if (!this.tooltipElement) {
+            return;
+        }
+        this.hideTimeout = setTimeout(() => this.destroyTooltip(), 80);
+    }
+    handleDocumentKeydown(event) {
+        if (event.key === 'Escape') {
+            this.destroyTooltip();
+        }
+    }
+    handleViewportChange() {
+        if (this.tooltipElement) {
+            this.positionTooltip();
+        }
+    }
+    ngOnDestroy() {
+        this.clearShowTimeout();
+        this.clearHideTimeout();
+        this.destroyTooltip();
+    }
+    renderTooltip() {
+        if (this.tooltipElement) {
+            return;
+        }
+        const tooltip = this.renderer.createElement('div');
+        tooltip.textContent = this.text();
+        this.renderer.setAttribute(tooltip, 'id', this.tooltipId);
+        this.renderer.setAttribute(tooltip, 'role', 'tooltip');
+        this.renderer.setStyle(tooltip, 'position', 'fixed');
+        this.renderer.setStyle(tooltip, 'z-index', '1400');
+        this.renderer.setStyle(tooltip, 'max-width', '18rem');
+        this.renderer.setStyle(tooltip, 'padding', '0.5rem 0.75rem');
+        this.renderer.setStyle(tooltip, 'border-radius', '0.5rem');
+        this.renderer.setStyle(tooltip, 'background', 'rgb(15 23 42)');
+        this.renderer.setStyle(tooltip, 'color', '#ffffff');
+        this.renderer.setStyle(tooltip, 'font-size', '0.8125rem');
+        this.renderer.setStyle(tooltip, 'line-height', '1.4');
+        this.renderer.setStyle(tooltip, 'box-shadow', 'var(--jv-shadow-md)');
+        this.renderer.setStyle(tooltip, 'pointer-events', 'none');
+        this.renderer.setStyle(tooltip, 'opacity', '0');
+        this.renderer.setStyle(tooltip, 'transition', 'opacity 120ms ease');
+        this.renderer.appendChild(this.document.body, tooltip);
+        this.tooltipElement = tooltip;
+        requestAnimationFrame(() => {
+            if (this.tooltipElement) {
+                this.renderer.setStyle(this.tooltipElement, 'opacity', '1');
+            }
+        });
+    }
+    positionTooltip() {
+        const tooltip = this.tooltipElement;
+        if (!tooltip) {
+            return;
+        }
+        const hostRect = this.anchorElement().getBoundingClientRect();
+        const tooltipRect = tooltip.getBoundingClientRect();
+        const gap = 8;
+        let top = hostRect.top - tooltipRect.height - gap;
+        let left = hostRect.left + hostRect.width / 2 - tooltipRect.width / 2;
+        switch (this.position()) {
+            case 'right':
+                top = hostRect.top + hostRect.height / 2 - tooltipRect.height / 2;
+                left = hostRect.right + gap;
+                break;
+            case 'bottom':
+                top = hostRect.bottom + gap;
+                left = hostRect.left + hostRect.width / 2 - tooltipRect.width / 2;
+                break;
+            case 'left':
+                top = hostRect.top + hostRect.height / 2 - tooltipRect.height / 2;
+                left = hostRect.left - tooltipRect.width - gap;
+                break;
+        }
+        this.renderer.setStyle(tooltip, 'top', `${Math.round(top)}px`);
+        this.renderer.setStyle(tooltip, 'left', `${Math.round(left)}px`);
+    }
+    destroyTooltip() {
+        this.clearHideTimeout();
+        this.clearShowTimeout();
+        if (!this.tooltipElement) {
+            return;
+        }
+        this.renderer.removeAttribute(this.anchorElement(), 'aria-describedby');
+        this.renderer.removeChild(this.document.body, this.tooltipElement);
+        this.tooltipElement = null;
+    }
+    anchorElement() {
+        const host = this.hostRef.nativeElement;
+        if (isInteractiveElement(host)) {
+            return host;
+        }
+        return host.querySelector('button, a, input, select, textarea, [tabindex]:not([tabindex="-1"])') ?? host;
+    }
+    clearShowTimeout() {
+        if (this.showTimeout) {
+            clearTimeout(this.showTimeout);
+            this.showTimeout = null;
+        }
+    }
+    clearHideTimeout() {
+        if (this.hideTimeout) {
+            clearTimeout(this.hideTimeout);
+            this.hideTimeout = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: JvTooltipDirective, isStandalone: true, selector: "[jvTooltip]", inputs: { text: { classPropertyName: "text", publicName: "jvTooltip", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "jvTooltipPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "show()", "focusin": "show()", "mouseleave": "hide()", "blur": "hide()", "document:keydown": "handleDocumentKeydown($event)", "window:scroll": "handleViewportChange()", "window:resize": "handleViewportChange()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvTooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[jvTooltip]',
+                    standalone: true,
+                }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "jvTooltip", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "jvTooltipPosition", required: false }] }], show: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }, {
+                type: HostListener,
+                args: ['focusin']
+            }], hide: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }, {
+                type: HostListener,
+                args: ['blur']
+            }], handleDocumentKeydown: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }], handleViewportChange: [{
+                type: HostListener,
+                args: ['window:scroll']
+            }, {
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+function isInteractiveElement(element) {
+    return ['BUTTON', 'A', 'INPUT', 'SELECT', 'TEXTAREA'].includes(element.tagName) || element.tabIndex >= 0;
+}
+
 const JV_GRID_DEFAULT_OPTIONS = {
     searchable: true,
     sortable: true,
@@ -21880,5 +23406,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { EN, ES, JV_DEFAULT_LOCALE, JV_FALLBACK_ICON_NAME, JV_GRID_DEFAULT_OPTIONS, JV_LOCALE_DICTIONARIES, JV_LUCIDE_ICON_REGISTRY, JV_UI_CONFIG, JV_UI_CONFIG_DEFAULTS, JV_UI_DEFAULT_CONFIG, JvAlertComponent, JvAnnouncementService, JvBadgeComponent, JvBreadcrumbComponent, JvButtonComponent, JvButtonGroupComponent, JvCardComponent, JvChangePasswordPageComponent, JvCheckboxComponent, JvConfirmDialogComponent, JvDashboardShellComponent, JvDialogComponent, JvDialogService, JvDividerComponent, JvForgotPasswordPageComponent, JvFormContainerComponent, JvGridComponent, JvIconButtonComponent, JvIconComponent, JvInputComponent, JvListComponent, JvListItemComponent, JvLoaderComponent, JvLoaderService, JvLoginPageComponent, JvPageComponent, JvPaginationComponent, JvRadioComponent, JvSectionComponent, JvSelectComponent, JvSidebarComponent, JvSwitchComponent, JvTextareaComponent, JvThemeService, JvToastComponent, JvToastService, JvTopbarComponent, JvTranslationService, provideJvUi };
+export { EN, ES, JV_DEFAULT_LOCALE, JV_FALLBACK_ICON_NAME, JV_GRID_DEFAULT_OPTIONS, JV_LOCALE_DICTIONARIES, JV_LUCIDE_ICON_REGISTRY, JV_UI_CONFIG, JV_UI_CONFIG_DEFAULTS, JV_UI_DEFAULT_CONFIG, JvAccordionComponent, JvAccordionPanelDirective, JvAlertComponent, JvAnnouncementService, JvBadgeComponent, JvBreadcrumbComponent, JvButtonComponent, JvButtonGroupComponent, JvCardComponent, JvChangePasswordPageComponent, JvCheckboxComponent, JvCollapsiblePanelComponent, JvConfirmDialogComponent, JvDashboardShellComponent, JvDatePickerComponent, JvDialogComponent, JvDialogService, JvDividerComponent, JvForgotPasswordPageComponent, JvFormContainerComponent, JvGridComponent, JvIconButtonComponent, JvIconComponent, JvInputComponent, JvListComponent, JvListItemComponent, JvLoaderComponent, JvLoaderService, JvLoginPageComponent, JvModalSelectorComponent, JvPageComponent, JvPaginationComponent, JvRadioComponent, JvSectionComponent, JvSelectComponent, JvSidebarComponent, JvSwitchComponent, JvTabPanelDirective, JvTabsComponent, JvTextareaComponent, JvThemeService, JvToastComponent, JvToastService, JvTooltipDirective, JvTopbarComponent, JvTranslationService, provideJvUi };
 //# sourceMappingURL=devjuliovilla-jv-ui.mjs.map