@devjuliovilla/jv-ui 1.11.2 → 1.13.0

package/fesm2022/devjuliovilla-jv-ui.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { input, computed, Component, forwardRef, inject, output, Directive, Injectable, signal, InjectionToken, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, effect, contentChildren, HostListener, viewChild, viewChildren, numberAttribute, afterNextRender, Renderer2, ElementRef } from '@angular/core';
+import { input, computed, Component, inject, signal, Injectable, InjectionToken, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, Directive, contentChild, output, effect, forwardRef, viewChild, untracked, contentChildren, HostListener, viewChildren, numberAttribute, afterNextRender, Renderer2, ElementRef } from '@angular/core';
+import { DOCUMENT, NgTemplateOutlet, CommonModule } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormBuilder, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { CommonModule, DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import { Router, RouterLink } from '@angular/router';
 
 // This file is auto-generated by tools/generate-icons.mjs
@@ -18042,927 +18042,93 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
   `, styles: [".jv-icon-button{display:inline-grid;place-items:center;width:var(--jv-density-control-height);height:var(--jv-density-control-height);border:1px solid transparent;border-radius:999px;cursor:pointer;transition:background-color .16s ease,color .16s ease,border-color .16s ease}.jv-icon-button:disabled{opacity:.6;cursor:not-allowed}.jv-icon-button--primary{background:var(--jv-color-primary);color:#fff}.jv-icon-button--secondary{background:var(--jv-color-secondary);color:#fff}.jv-icon-button--outline{border-color:var(--jv-color-border);background:var(--jv-color-surface);color:var(--jv-color-foreground)}.jv-icon-button--ghost,.jv-icon-button--link{background:transparent;color:var(--jv-color-foreground)}.jv-icon-button--danger{background:var(--jv-color-danger);color:#fff}.jv-icon-button--success{background:var(--jv-color-success);color:#fff}.jv-icon-button--warning{background:var(--jv-color-warning);color:#111827}.jv-icon-button--outline:hover,.jv-icon-button--ghost:hover,.jv-icon-button--link:hover{background:var(--jv-color-surface-muted)}\n"] }]
         }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
-class JvAlertComponent {
-    tone = input('info', ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
-    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-    role = input('status', ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
-    alertClass = computed(() => `jv-alert--${this.tone()}`, ...(ngDevMode ? [{ debugName: "alertClass" }] : /* istanbul ignore next */ []));
-    iconName = computed(() => {
-        switch (this.tone()) {
-            case 'success':
-                return 'check';
-            case 'warning':
-                return 'triangle-alert';
-            case 'danger':
-                return 'circle-alert';
-            case 'primary':
-                return 'sparkles';
-            case 'secondary':
-            case 'neutral':
-                return 'info';
-            default:
-                return 'info';
-        }
-    }, ...(ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvAlertComponent, isStandalone: true, selector: "jv-alert", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <div class="jv-alert" [class]="alertClass()" [attr.role]="role()">
-      <div class="jv-alert-icon">
-        <jv-icon [name]="iconName()" [size]="18" />
-      </div>
-      <div class="jv-alert-content">
-        @if (title()) {
-          <strong>{{ title() }}</strong>
-        }
-        <div><ng-content></ng-content></div>
-      </div>
-    </div>
-  `, isInline: true, styles: [".jv-alert{display:grid;grid-template-columns:auto 1fr;gap:var(--jv-spacing-sm);padding:var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md)}.jv-alert-content{display:grid;gap:var(--jv-spacing-xs)}.jv-alert--primary{background:color-mix(in srgb,var(--jv-color-primary) 10%,var(--jv-color-surface));color:var(--jv-color-foreground)}.jv-alert--secondary,.jv-alert--neutral{background:var(--jv-color-surface-muted);color:var(--jv-color-foreground)}.jv-alert--success{background:color-mix(in srgb,var(--jv-color-success) 12%,var(--jv-color-surface))}.jv-alert--warning{background:color-mix(in srgb,var(--jv-color-warning) 16%,var(--jv-color-surface))}.jv-alert--danger{background:color-mix(in srgb,var(--jv-color-danger) 12%,var(--jv-color-surface))}.jv-alert--info{background:color-mix(in srgb,var(--jv-color-info) 12%,var(--jv-color-surface))}strong{font-size:.95rem}\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: JvAlertComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'jv-alert', standalone: true, imports: [JvIconComponent], template: `
-    <div class="jv-alert" [class]="alertClass()" [attr.role]="role()">
-      <div class="jv-alert-icon">
-        <jv-icon [name]="iconName()" [size]="18" />
-      </div>
-      <div class="jv-alert-content">
-        @if (title()) {
-          <strong>{{ title() }}</strong>
-        }
-        <div><ng-content></ng-content></div>
-      </div>
-    </div>
-  `, styles: [".jv-alert{display:grid;grid-template-columns:auto 1fr;gap:var(--jv-spacing-sm);padding:var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md)}.jv-alert-content{display:grid;gap:var(--jv-spacing-xs)}.jv-alert--primary{background:color-mix(in srgb,var(--jv-color-primary) 10%,var(--jv-color-surface));color:var(--jv-color-foreground)}.jv-alert--secondary,.jv-alert--neutral{background:var(--jv-color-surface-muted);color:var(--jv-color-foreground)}.jv-alert--success{background:color-mix(in srgb,var(--jv-color-success) 12%,var(--jv-color-surface))}.jv-alert--warning{background:color-mix(in srgb,var(--jv-color-warning) 16%,var(--jv-color-surface))}.jv-alert--danger{background:color-mix(in srgb,var(--jv-color-danger) 12%,var(--jv-color-surface))}.jv-alert--info{background:color-mix(in srgb,var(--jv-color-info) 12%,var(--jv-color-surface))}strong{font-size:.95rem}\n"] }]
-        }], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }] } });
-
-class JvCardComponent {
-    elevated = input(true, ...(ngDevMode ? [{ debugName: "elevated" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: JvCardComponent, isStandalone: true, selector: "jv-card", inputs: { elevated: { classPropertyName: "elevated", publicName: "elevated", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <article class="jv-card" [class]="elevated() ? 'jv-card--elevated' : 'jv-card--flat'">
-      <ng-content></ng-content>
-    </article>
-  `, isInline: true, styles: [".jv-card{padding:var(--jv-spacing-lg);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-lg);background:var(--jv-color-surface)}.jv-card--elevated{box-shadow:var(--jv-shadow-md)}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'jv-card', standalone: true, template: `
-    <article class="jv-card" [class]="elevated() ? 'jv-card--elevated' : 'jv-card--flat'">
-      <ng-content></ng-content>
-    </article>
-  `, styles: [".jv-card{padding:var(--jv-spacing-lg);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-lg);background:var(--jv-color-surface)}.jv-card--elevated{box-shadow:var(--jv-shadow-md)}\n"] }]
-        }], propDecorators: { elevated: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevated", required: false }] }] } });
-
-class JvFormContainerComponent {
-    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
-    error = input('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
-    inputId = input('', ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
-    hintId = input('', ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
-    errorId = input('', ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
-    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
-    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
-    resolvedHintId = computed(() => this.hintId() || (this.inputId() ? `${this.inputId()}-hint` : ''), ...(ngDevMode ? [{ debugName: "resolvedHintId" }] : /* istanbul ignore next */ []));
-    resolvedErrorId = computed(() => this.errorId() || (this.inputId() ? `${this.inputId()}-error` : ''), ...(ngDevMode ? [{ debugName: "resolvedErrorId" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvFormContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvFormContainerComponent, isStandalone: true, selector: "jv-form-container", inputs: { label: { classPropertyName: "label", publicName: "label", 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 }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, hintId: { classPropertyName: "hintId", publicName: "hintId", isSignal: true, isRequired: false, transformFunction: null }, errorId: { classPropertyName: "errorId", publicName: "errorId", 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 } }, ngImport: i0, template: `
-    <div class="jv-form-container" [class.is-invalid]="invalid()">
-      @if (label()) {
-        <label class="jv-form-label" [attr.for]="inputId() || null">
-          <span>{{ label() }}</span>
-          @if (required()) {
-            <span class="required-indicator" aria-hidden="true">*</span>
-          }
-        </label>
-      }
-
-      <ng-content></ng-content>
-
-      @if (hint() && !invalid()) {
-        <p class="jv-form-hint" [id]="resolvedHintId() || null">{{ hint() }}</p>
-      }
-
-      @if (error() && invalid()) {
-        <p class="jv-form-error" [id]="resolvedErrorId() || null" role="alert" aria-live="assertive">{{ error() }}</p>
-      }
-    </div>
-  `, isInline: true, styles: [".jv-form-container{display:grid;gap:var(--jv-spacing-xs)}.jv-form-label{display:inline-flex;align-items:center;gap:.35rem;font-weight:600;color:var(--jv-color-foreground)}.required-indicator,.jv-form-error{color:var(--jv-color-danger)}.jv-form-hint,.jv-form-error{margin:0;font-size:.875rem}.jv-form-hint{color:var(--jv-color-foreground-muted)}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvFormContainerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'jv-form-container', standalone: true, template: `
-    <div class="jv-form-container" [class.is-invalid]="invalid()">
-      @if (label()) {
-        <label class="jv-form-label" [attr.for]="inputId() || null">
-          <span>{{ label() }}</span>
-          @if (required()) {
-            <span class="required-indicator" aria-hidden="true">*</span>
-          }
-        </label>
-      }
-
-      <ng-content></ng-content>
-
-      @if (hint() && !invalid()) {
-        <p class="jv-form-hint" [id]="resolvedHintId() || null">{{ hint() }}</p>
-      }
-
-      @if (error() && invalid()) {
-        <p class="jv-form-error" [id]="resolvedErrorId() || null" role="alert" aria-live="assertive">{{ error() }}</p>
-      }
-    </div>
-  `, styles: [".jv-form-container{display:grid;gap:var(--jv-spacing-xs)}.jv-form-label{display:inline-flex;align-items:center;gap:.35rem;font-weight:600;color:var(--jv-color-foreground)}.required-indicator,.jv-form-error{color:var(--jv-color-danger)}.jv-form-hint,.jv-form-error{margin:0;font-size:.875rem}.jv-form-hint{color:var(--jv-color-foreground-muted)}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], hintId: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintId", required: false }] }], errorId: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorId", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }] } });
+const JV_UI_DEFAULT_CONFIG = {
+    theme: 'light',
+    density: 'normal',
+    language: 'es-MX',
+    locale: 'es',
+    messagesLocale: 'es',
+    formatLocale: 'es-MX',
+    formats: {
+        date: { day: '2-digit', month: '2-digit', year: 'numeric' },
+        time: { hour: '2-digit', minute: '2-digit' },
+        datetime: { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' },
+        integer: { maximumFractionDigits: 0 },
+        number: { minimumFractionDigits: 0, maximumFractionDigits: 2 },
+        currency: { style: 'currency', currency: 'MXN', minimumFractionDigits: 2, maximumFractionDigits: 2 },
+        percent: { style: 'percent', minimumFractionDigits: 0, maximumFractionDigits: 2 },
+    },
+    toastPosition: 'bottom-right',
+    tabsTransition: 'none',
+};
 
-let inputIdSequence = 0;
-class JvInputComponent {
-    type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* 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-input-${++inputIdSequence}`, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
-    value = '';
-    disabled = false;
-    onChange = () => undefined;
-    onTouched = () => undefined;
-    writeValue(value) {
-        this.value = value ?? '';
+class JvThemeService {
+    document = inject(DOCUMENT);
+    config = inject(JvUiConfigService);
+    storageKey = 'jv-ui-theme';
+    theme = signal(this.config.snapshot.theme, ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
+    density = signal(this.config.snapshot.density, ...(ngDevMode ? [{ debugName: "density" }] : /* istanbul ignore next */ []));
+    initialize() {
+        const initialConfig = this.config.snapshot;
+        const theme = this.resolveInitialTheme(initialConfig.theme);
+        this.applyTheme(theme);
+        this.applyDensity(initialConfig.density);
+        this.applyLanguage(initialConfig.language);
     }
-    registerOnChange(fn) {
-        this.onChange = fn;
+    setTheme(theme) {
+        this.applyTheme(theme);
+        try {
+            this.document.defaultView?.localStorage.setItem(this.storageKey, theme);
+        }
+        catch {
+            // Ignore storage failures in restricted environments.
+        }
     }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
+    setDensity(density) {
+        this.applyDensity(density);
     }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
+    applyTheme(theme) {
+        this.theme.set(theme);
+        const root = this.document.documentElement;
+        root.dataset['theme'] = theme;
+        root.style.colorScheme = theme === 'dark' ? 'dark' : 'light';
     }
-    handleInput(event) {
-        const nextValue = event.target.value;
-        this.value = nextValue;
-        this.onChange(nextValue);
+    applyDensity(density) {
+        this.density.set(density);
+        this.document.documentElement.dataset['density'] = density;
     }
-    handleBlur() {
-        this.onTouched();
+    applyLanguage(language) {
+        this.document.documentElement.lang = language;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: JvInputComponent, isStandalone: true, selector: "jv-input", inputs: { type: { classPropertyName: "type", publicName: "type", 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 } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => JvInputComponent),
-                multi: true,
-            },
-        ], ngImport: i0, template: `
-    <input
-      class="jv-input"
-      [class.is-invalid]="invalid()"
-      [id]="inputId()"
-      [type]="type()"
-      [value]="value"
-      [placeholder]="placeholder()"
-      [required]="required()"
-      [disabled]="disabled"
-      [attr.aria-invalid]="invalid() ? 'true' : null"
-      [attr.aria-describedby]="describedBy() || null"
-      (input)="handleInput($event)"
-      (blur)="handleBlur()"
-    />
-  `, isInline: true, styles: [".jv-input{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-input::placeholder{color:var(--jv-color-foreground-muted)}.jv-input.is-invalid{border-color:var(--jv-color-danger)}.jv-input:disabled{opacity:.7;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'jv-input', standalone: true, imports: [CommonModule], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => JvInputComponent),
-                            multi: true,
-                        },
-                    ], template: `
-    <input
-      class="jv-input"
-      [class.is-invalid]="invalid()"
-      [id]="inputId()"
-      [type]="type()"
-      [value]="value"
-      [placeholder]="placeholder()"
-      [required]="required()"
-      [disabled]="disabled"
-      [attr.aria-invalid]="invalid() ? 'true' : null"
-      [attr.aria-describedby]="describedBy() || null"
-      (input)="handleInput($event)"
-      (blur)="handleBlur()"
-    />
-  `, styles: [".jv-input{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-input::placeholder{color:var(--jv-color-foreground-muted)}.jv-input.is-invalid{border-color:var(--jv-color-danger)}.jv-input:disabled{opacity:.7;cursor:not-allowed}\n"] }]
-        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", 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 }] }] } });
-
-class JvSectionComponent {
-    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-    description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvSectionComponent, isStandalone: true, selector: "jv-section", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <section class="jv-section">
-      @if (title() || description()) {
-        <header class="jv-section-header">
-          @if (title()) {
-            <h2>{{ title() }}</h2>
-          }
-          @if (description()) {
-            <p>{{ description() }}</p>
-          }
-        </header>
-      }
-      <div class="jv-section-content"><ng-content></ng-content></div>
-    </section>
-  `, isInline: true, styles: [".jv-section{display:grid;gap:var(--jv-spacing-md)}.jv-section-header{display:grid;gap:var(--jv-spacing-xs)}h2,p{margin:0}p{color:var(--jv-color-foreground-muted)}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvSectionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'jv-section', standalone: true, template: `
-    <section class="jv-section">
-      @if (title() || description()) {
-        <header class="jv-section-header">
-          @if (title()) {
-            <h2>{{ title() }}</h2>
-          }
-          @if (description()) {
-            <p>{{ description() }}</p>
-          }
-        </header>
-      }
-      <div class="jv-section-content"><ng-content></ng-content></div>
-    </section>
-  `, styles: [".jv-section{display:grid;gap:var(--jv-spacing-md)}.jv-section-header{display:grid;gap:var(--jv-spacing-xs)}h2,p{margin:0}p{color:var(--jv-color-foreground-muted)}\n"] }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }] } });
-
-function passwordMatchValidator(control) {
-    const newPassword = control.get('newPassword')?.value;
-    const confirmPassword = control.get('confirmPassword')?.value;
-    if (!newPassword || !confirmPassword) {
-        return null;
-    }
-    return newPassword === confirmPassword ? null : { passwordMismatch: true };
-}
-class JvChangePasswordPageComponent {
-    formBuilder = inject(FormBuilder);
-    title = input('Change password', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-    description = input('Update your password and keep your account secure.', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
-    submitLabel = input('Update password', ...(ngDevMode ? [{ debugName: "submitLabel" }] : /* istanbul ignore next */ []));
-    cancelLabel = input('Cancel', ...(ngDevMode ? [{ debugName: "cancelLabel" }] : /* istanbul ignore next */ []));
-    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
-    error = input('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
-    changePasswordSubmit = output();
-    cancel = output();
-    form = this.formBuilder.group({
-        currentPassword: ['', Validators.required],
-        newPassword: ['', Validators.required],
-        confirmPassword: ['', Validators.required],
-    }, { validators: passwordMatchValidator });
-    currentInvalid = computed(() => {
-        const control = this.form.controls.currentPassword;
-        return control.invalid && (control.touched || control.dirty);
-    }, ...(ngDevMode ? [{ debugName: "currentInvalid" }] : /* istanbul ignore next */ []));
-    newInvalid = computed(() => {
-        const control = this.form.controls.newPassword;
-        return control.invalid && (control.touched || control.dirty);
-    }, ...(ngDevMode ? [{ debugName: "newInvalid" }] : /* istanbul ignore next */ []));
-    confirmInvalid = computed(() => {
-        const control = this.form.controls.confirmPassword;
-        return (control.invalid && (control.touched || control.dirty)) || ((control.touched || control.dirty) && this.form.hasError('passwordMismatch'));
-    }, ...(ngDevMode ? [{ debugName: "confirmInvalid" }] : /* istanbul ignore next */ []));
-    submit() {
-        if (this.form.invalid) {
-            this.form.markAllAsTouched();
-            return;
+    resolveInitialTheme(fallbackTheme) {
+        const savedTheme = this.readSavedTheme();
+        if (savedTheme) {
+            return savedTheme;
         }
-        this.changePasswordSubmit.emit(this.form.getRawValue());
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvChangePasswordPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvChangePasswordPageComponent, isStandalone: true, selector: "jv-change-password-page", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, submitLabel: { classPropertyName: "submitLabel", publicName: "submitLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changePasswordSubmit: "changePasswordSubmit", cancel: "cancel" }, ngImport: i0, template: `
-    <jv-card>
-      <jv-section [title]="title()" [description]="description()">
-        @if (error()) {
-          <jv-alert tone="danger" title="Password change error" role="alert">{{ error() }}</jv-alert>
-        }
-
-        <form class="auth-form" [formGroup]="form" (ngSubmit)="submit()">
-          <jv-form-container label="Current password" inputId="jv-current-password" error="Current password is required" [required]="true" [invalid]="currentInvalid()">
-            <jv-input inputId="jv-current-password" type="password" formControlName="currentPassword" [invalid]="currentInvalid()" />
-          </jv-form-container>
-
-          <jv-form-container label="New password" inputId="jv-new-password" error="New password is required" [required]="true" [invalid]="newInvalid()">
-            <jv-input inputId="jv-new-password" type="password" formControlName="newPassword" [invalid]="newInvalid()" />
-          </jv-form-container>
-
-          <jv-form-container label="Confirm new password" inputId="jv-confirm-password" error="Passwords must match" [required]="true" [invalid]="confirmInvalid()">
-            <jv-input inputId="jv-confirm-password" type="password" formControlName="confirmPassword" [invalid]="confirmInvalid()" />
-          </jv-form-container>
-
-          <div class="auth-actions">
-            <jv-button variant="outline" (click)="cancel.emit()">{{ cancelLabel() }}</jv-button>
-            <jv-button variant="primary" icon="check" [loading]="loading()">{{ submitLabel() }}</jv-button>
-          </div>
-        </form>
-      </jv-section>
-    </jv-card>
-  `, isInline: true, styles: [".auth-form{display:grid;gap:var(--jv-spacing-md)}.auth-actions{display:flex;gap:var(--jv-spacing-sm);flex-wrap:wrap}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: JvAlertComponent, selector: "jv-alert", inputs: ["tone", "title", "role"] }, { kind: "component", type: JvButtonComponent, selector: "jv-button", inputs: ["type", "variant", "icon", "iconPosition", "loading", "disabled"] }, { kind: "component", type: JvCardComponent, selector: "jv-card", inputs: ["elevated"] }, { kind: "component", type: JvFormContainerComponent, selector: "jv-form-container", inputs: ["label", "hint", "error", "inputId", "hintId", "errorId", "required", "invalid"] }, { kind: "component", type: JvInputComponent, selector: "jv-input", inputs: ["type", "placeholder", "required", "invalid", "describedBy", "inputId"] }, { kind: "component", type: JvSectionComponent, selector: "jv-section", inputs: ["title", "description"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvChangePasswordPageComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'jv-change-password-page', standalone: true, imports: [ReactiveFormsModule, JvAlertComponent, JvButtonComponent, JvCardComponent, JvFormContainerComponent, JvInputComponent, JvSectionComponent], template: `
-    <jv-card>
-      <jv-section [title]="title()" [description]="description()">
-        @if (error()) {
-          <jv-alert tone="danger" title="Password change error" role="alert">{{ error() }}</jv-alert>
-        }
-
-        <form class="auth-form" [formGroup]="form" (ngSubmit)="submit()">
-          <jv-form-container label="Current password" inputId="jv-current-password" error="Current password is required" [required]="true" [invalid]="currentInvalid()">
-            <jv-input inputId="jv-current-password" type="password" formControlName="currentPassword" [invalid]="currentInvalid()" />
-          </jv-form-container>
-
-          <jv-form-container label="New password" inputId="jv-new-password" error="New password is required" [required]="true" [invalid]="newInvalid()">
-            <jv-input inputId="jv-new-password" type="password" formControlName="newPassword" [invalid]="newInvalid()" />
-          </jv-form-container>
-
-          <jv-form-container label="Confirm new password" inputId="jv-confirm-password" error="Passwords must match" [required]="true" [invalid]="confirmInvalid()">
-            <jv-input inputId="jv-confirm-password" type="password" formControlName="confirmPassword" [invalid]="confirmInvalid()" />
-          </jv-form-container>
-
-          <div class="auth-actions">
-            <jv-button variant="outline" (click)="cancel.emit()">{{ cancelLabel() }}</jv-button>
-            <jv-button variant="primary" icon="check" [loading]="loading()">{{ submitLabel() }}</jv-button>
-          </div>
-        </form>
-      </jv-section>
-    </jv-card>
-  `, styles: [".auth-form{display:grid;gap:var(--jv-spacing-md)}.auth-actions{display:flex;gap:var(--jv-spacing-sm);flex-wrap:wrap}\n"] }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], submitLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitLabel", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], changePasswordSubmit: [{ type: i0.Output, args: ["changePasswordSubmit"] }], cancel: [{ type: i0.Output, args: ["cancel"] }] } });
-
-class JvForgotPasswordPageComponent {
-    formBuilder = inject(FormBuilder);
-    title = input('Reset your password', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-    description = input('We will send reset instructions to your email address.', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
-    submitLabel = input('Send reset link', ...(ngDevMode ? [{ debugName: "submitLabel" }] : /* istanbul ignore next */ []));
-    backLabel = input('Back to login', ...(ngDevMode ? [{ debugName: "backLabel" }] : /* istanbul ignore next */ []));
-    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
-    error = input('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
-    forgotPasswordSubmit = output();
-    backToLogin = output();
-    form = this.formBuilder.group({
-        email: ['', [Validators.required, Validators.email]],
-    });
-    emailInvalid = computed(() => {
-        const control = this.form.controls.email;
-        return control.invalid && (control.touched || control.dirty);
-    }, ...(ngDevMode ? [{ debugName: "emailInvalid" }] : /* istanbul ignore next */ []));
-    submit() {
-        if (this.form.invalid) {
-            this.form.markAllAsTouched();
-            return;
+        if (fallbackTheme === 'high-contrast') {
+            return fallbackTheme;
         }
-        this.forgotPasswordSubmit.emit(this.form.getRawValue());
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvForgotPasswordPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvForgotPasswordPageComponent, isStandalone: true, selector: "jv-forgot-password-page", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, submitLabel: { classPropertyName: "submitLabel", publicName: "submitLabel", isSignal: true, isRequired: false, transformFunction: null }, backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { forgotPasswordSubmit: "forgotPasswordSubmit", backToLogin: "backToLogin" }, ngImport: i0, template: `
-    <jv-card>
-      <jv-section [title]="title()" [description]="description()">
-        @if (error()) {
-          <jv-alert tone="danger" title="Reset error" role="alert">{{ error() }}</jv-alert>
-        }
-
-        <form class="auth-form" [formGroup]="form" (ngSubmit)="submit()">
-          <jv-form-container label="Email" inputId="jv-forgot-email" error="Enter a valid email" [required]="true" [invalid]="emailInvalid()">
-            <jv-input inputId="jv-forgot-email" type="email" formControlName="email" [invalid]="emailInvalid()" placeholder="you@example.com" />
-          </jv-form-container>
-
-          <div class="auth-actions">
-            <jv-button variant="outline" (click)="backToLogin.emit()">{{ backLabel() }}</jv-button>
-            <jv-button type="submit" variant="primary" icon="check" [loading]="loading()">{{ submitLabel() }}</jv-button>
-          </div>
-        </form>
-      </jv-section>
-    </jv-card>
-  `, isInline: true, styles: [".auth-form{display:grid;gap:var(--jv-spacing-md)}.auth-actions{display:flex;gap:var(--jv-spacing-sm);flex-wrap:wrap}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: JvAlertComponent, selector: "jv-alert", inputs: ["tone", "title", "role"] }, { kind: "component", type: JvButtonComponent, selector: "jv-button", inputs: ["type", "variant", "icon", "iconPosition", "loading", "disabled"] }, { kind: "component", type: JvCardComponent, selector: "jv-card", inputs: ["elevated"] }, { kind: "component", type: JvFormContainerComponent, selector: "jv-form-container", inputs: ["label", "hint", "error", "inputId", "hintId", "errorId", "required", "invalid"] }, { kind: "component", type: JvInputComponent, selector: "jv-input", inputs: ["type", "placeholder", "required", "invalid", "describedBy", "inputId"] }, { kind: "component", type: JvSectionComponent, selector: "jv-section", inputs: ["title", "description"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvForgotPasswordPageComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'jv-forgot-password-page', standalone: true, imports: [ReactiveFormsModule, JvAlertComponent, JvButtonComponent, JvCardComponent, JvFormContainerComponent, JvInputComponent, JvSectionComponent], template: `
-    <jv-card>
-      <jv-section [title]="title()" [description]="description()">
-        @if (error()) {
-          <jv-alert tone="danger" title="Reset error" role="alert">{{ error() }}</jv-alert>
-        }
-
-        <form class="auth-form" [formGroup]="form" (ngSubmit)="submit()">
-          <jv-form-container label="Email" inputId="jv-forgot-email" error="Enter a valid email" [required]="true" [invalid]="emailInvalid()">
-            <jv-input inputId="jv-forgot-email" type="email" formControlName="email" [invalid]="emailInvalid()" placeholder="you@example.com" />
-          </jv-form-container>
-
-          <div class="auth-actions">
-            <jv-button variant="outline" (click)="backToLogin.emit()">{{ backLabel() }}</jv-button>
-            <jv-button type="submit" variant="primary" icon="check" [loading]="loading()">{{ submitLabel() }}</jv-button>
-          </div>
-        </form>
-      </jv-section>
-    </jv-card>
-  `, styles: [".auth-form{display:grid;gap:var(--jv-spacing-md)}.auth-actions{display:flex;gap:var(--jv-spacing-sm);flex-wrap:wrap}\n"] }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], submitLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitLabel", required: false }] }], backLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "backLabel", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], forgotPasswordSubmit: [{ type: i0.Output, args: ["forgotPasswordSubmit"] }], backToLogin: [{ type: i0.Output, args: ["backToLogin"] }] } });
-
-let checkboxIdSequence = 0;
-class JvCheckboxComponent {
-    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    describedBy = input('', ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
-    inputId = input(`jv-checkbox-${++checkboxIdSequence}`, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
-    value = false;
-    disabled = false;
-    onChange = () => undefined;
-    onTouched = () => undefined;
-    writeValue(value) {
-        this.value = value ?? false;
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
+        return this.prefersDarkMode() ? 'dark' : fallbackTheme;
     }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
+    readSavedTheme() {
+        try {
+            const saved = this.document.defaultView?.localStorage.getItem(this.storageKey);
+            return this.isTheme(saved) ? saved : null;
+        }
+        catch {
+            return null;
+        }
     }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
+    prefersDarkMode() {
+        return this.document.defaultView?.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false;
     }
-    handleChange(event) {
-        const nextValue = event.target.checked;
-        this.value = nextValue;
-        this.onChange(nextValue);
+    isTheme(value) {
+        return value === 'light' || value === 'dark' || value === 'high-contrast';
     }
-    handleBlur() {
-        this.onTouched();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: JvCheckboxComponent, isStandalone: true, selector: "jv-checkbox", inputs: { label: { classPropertyName: "label", publicName: "label", 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 } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => JvCheckboxComponent),
-                multi: true,
-            },
-        ], ngImport: i0, template: `
-    <label class="jv-checkbox" [class.is-disabled]="disabled">
-      <input
-        type="checkbox"
-        [id]="inputId()"
-        [checked]="value"
-        [disabled]="disabled"
-        [attr.aria-describedby]="describedBy() || null"
-        (change)="handleChange($event)"
-        (blur)="handleBlur()"
-      />
-      <span>{{ label() }}</span>
-    </label>
-  `, isInline: true, styles: [".jv-checkbox{display:inline-flex;align-items:center;gap:var(--jv-spacing-sm);min-height:var(--jv-density-control-height);color:var(--jv-color-foreground)}.jv-checkbox.is-disabled{opacity:.7}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvCheckboxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'jv-checkbox', standalone: true, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => JvCheckboxComponent),
-                            multi: true,
-                        },
-                    ], template: `
-    <label class="jv-checkbox" [class.is-disabled]="disabled">
-      <input
-        type="checkbox"
-        [id]="inputId()"
-        [checked]="value"
-        [disabled]="disabled"
-        [attr.aria-describedby]="describedBy() || null"
-        (change)="handleChange($event)"
-        (blur)="handleBlur()"
-      />
-      <span>{{ label() }}</span>
-    </label>
-  `, styles: [".jv-checkbox{display:inline-flex;align-items:center;gap:var(--jv-spacing-sm);min-height:var(--jv-density-control-height);color:var(--jv-color-foreground)}.jv-checkbox.is-disabled{opacity:.7}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "describedBy", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }] } });
-
-class JvLoginPageComponent {
-    formBuilder = inject(FormBuilder);
-    title = input('Welcome back', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-    description = input('Use your account credentials to continue.', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
-    submitLabel = input('Sign in', ...(ngDevMode ? [{ debugName: "submitLabel" }] : /* istanbul ignore next */ []));
-    rememberMeLabel = input('Remember me', ...(ngDevMode ? [{ debugName: "rememberMeLabel" }] : /* istanbul ignore next */ []));
-    forgotPasswordLabel = input('Forgot password?', ...(ngDevMode ? [{ debugName: "forgotPasswordLabel" }] : /* istanbul ignore next */ []));
-    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
-    error = input('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
-    loginSubmit = output();
-    forgotPasswordClick = output();
-    form = this.formBuilder.group({
-        identifier: ['', Validators.required],
-        password: ['', Validators.required],
-        rememberMe: [false],
-    });
-    identifierInvalid = computed(() => {
-        const control = this.form.controls.identifier;
-        return control.invalid && (control.touched || control.dirty);
-    }, ...(ngDevMode ? [{ debugName: "identifierInvalid" }] : /* istanbul ignore next */ []));
-    passwordInvalid = computed(() => {
-        const control = this.form.controls.password;
-        return control.invalid && (control.touched || control.dirty);
-    }, ...(ngDevMode ? [{ debugName: "passwordInvalid" }] : /* istanbul ignore next */ []));
-    submit() {
-        if (this.form.invalid) {
-            this.form.markAllAsTouched();
-            return;
-        }
-        this.loginSubmit.emit(this.form.getRawValue());
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvLoginPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvLoginPageComponent, isStandalone: true, selector: "jv-login-page", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, submitLabel: { classPropertyName: "submitLabel", publicName: "submitLabel", isSignal: true, isRequired: false, transformFunction: null }, rememberMeLabel: { classPropertyName: "rememberMeLabel", publicName: "rememberMeLabel", isSignal: true, isRequired: false, transformFunction: null }, forgotPasswordLabel: { classPropertyName: "forgotPasswordLabel", publicName: "forgotPasswordLabel", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loginSubmit: "loginSubmit", forgotPasswordClick: "forgotPasswordClick" }, ngImport: i0, template: `
-    <jv-card>
-      <jv-section [title]="title()" [description]="description()">
-        @if (error()) {
-          <jv-alert tone="danger" title="Sign-in error" role="alert">{{ error() }}</jv-alert>
-        }
-
-        <form class="auth-form" [formGroup]="form" (ngSubmit)="submit()">
-          <jv-form-container label="Email or username" inputId="jv-login-identifier" error="This field is required" [required]="true" [invalid]="identifierInvalid()">
-            <jv-input inputId="jv-login-identifier" formControlName="identifier" [invalid]="identifierInvalid()" placeholder="you@example.com" />
-          </jv-form-container>
-
-          <jv-form-container label="Password" inputId="jv-login-password" error="Password is required" [required]="true" [invalid]="passwordInvalid()">
-            <jv-input inputId="jv-login-password" type="password" formControlName="password" [invalid]="passwordInvalid()" placeholder="Enter your password" />
-          </jv-form-container>
-
-          <div class="auth-inline-row">
-            <jv-checkbox formControlName="rememberMe" label="{{ rememberMeLabel() }}" />
-            <button type="button" class="auth-link" (click)="forgotPasswordClick.emit()">{{ forgotPasswordLabel() }}</button>
-          </div>
-
-          <jv-button type="submit" variant="primary" icon="check" [loading]="loading()">{{ submitLabel() }}</jv-button>
-        </form>
-      </jv-section>
-    </jv-card>
-  `, isInline: true, styles: [".auth-form{display:grid;gap:var(--jv-spacing-md)}.auth-inline-row{display:flex;justify-content:space-between;align-items:center;gap:var(--jv-spacing-md);flex-wrap:wrap}.auth-link{border:0;padding:0;background:transparent;color:var(--jv-color-primary);text-decoration:underline;text-underline-offset:.18em}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: JvAlertComponent, selector: "jv-alert", inputs: ["tone", "title", "role"] }, { kind: "component", type: JvButtonComponent, selector: "jv-button", inputs: ["type", "variant", "icon", "iconPosition", "loading", "disabled"] }, { kind: "component", type: JvCardComponent, selector: "jv-card", inputs: ["elevated"] }, { kind: "component", type: JvCheckboxComponent, selector: "jv-checkbox", inputs: ["label", "describedBy", "inputId"] }, { kind: "component", type: JvFormContainerComponent, selector: "jv-form-container", inputs: ["label", "hint", "error", "inputId", "hintId", "errorId", "required", "invalid"] }, { kind: "component", type: JvInputComponent, selector: "jv-input", inputs: ["type", "placeholder", "required", "invalid", "describedBy", "inputId"] }, { kind: "component", type: JvSectionComponent, selector: "jv-section", inputs: ["title", "description"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvLoginPageComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'jv-login-page', standalone: true, imports: [ReactiveFormsModule, JvAlertComponent, JvButtonComponent, JvCardComponent, JvCheckboxComponent, JvFormContainerComponent, JvInputComponent, JvSectionComponent], template: `
-    <jv-card>
-      <jv-section [title]="title()" [description]="description()">
-        @if (error()) {
-          <jv-alert tone="danger" title="Sign-in error" role="alert">{{ error() }}</jv-alert>
-        }
-
-        <form class="auth-form" [formGroup]="form" (ngSubmit)="submit()">
-          <jv-form-container label="Email or username" inputId="jv-login-identifier" error="This field is required" [required]="true" [invalid]="identifierInvalid()">
-            <jv-input inputId="jv-login-identifier" formControlName="identifier" [invalid]="identifierInvalid()" placeholder="you@example.com" />
-          </jv-form-container>
-
-          <jv-form-container label="Password" inputId="jv-login-password" error="Password is required" [required]="true" [invalid]="passwordInvalid()">
-            <jv-input inputId="jv-login-password" type="password" formControlName="password" [invalid]="passwordInvalid()" placeholder="Enter your password" />
-          </jv-form-container>
-
-          <div class="auth-inline-row">
-            <jv-checkbox formControlName="rememberMe" label="{{ rememberMeLabel() }}" />
-            <button type="button" class="auth-link" (click)="forgotPasswordClick.emit()">{{ forgotPasswordLabel() }}</button>
-          </div>
-
-          <jv-button type="submit" variant="primary" icon="check" [loading]="loading()">{{ submitLabel() }}</jv-button>
-        </form>
-      </jv-section>
-    </jv-card>
-  `, styles: [".auth-form{display:grid;gap:var(--jv-spacing-md)}.auth-inline-row{display:flex;justify-content:space-between;align-items:center;gap:var(--jv-spacing-md);flex-wrap:wrap}.auth-link{border:0;padding:0;background:transparent;color:var(--jv-color-primary);text-decoration:underline;text-underline-offset:.18em}\n"] }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], submitLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitLabel", required: false }] }], rememberMeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rememberMeLabel", required: false }] }], forgotPasswordLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "forgotPasswordLabel", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], loginSubmit: [{ type: i0.Output, args: ["loginSubmit"] }], forgotPasswordClick: [{ type: i0.Output, args: ["forgotPasswordClick"] }] } });
-
-class JvDividerComponent {
-    vertical = input(false, ...(ngDevMode ? [{ debugName: "vertical" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: JvDividerComponent, isStandalone: true, selector: "jv-divider", inputs: { vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <div
-      class="jv-divider"
-      [class.jv-divider--vertical]="vertical()"
-      [attr.role]="'separator'"
-      [attr.aria-orientation]="vertical() ? 'vertical' : 'horizontal'"
-    ></div>
-  `, isInline: true, styles: [".jv-divider{width:100%;height:1px;background:var(--jv-color-border)}.jv-divider--vertical{width:1px;height:100%;min-height:1.5rem}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvDividerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'jv-divider', standalone: true, template: `
-    <div
-      class="jv-divider"
-      [class.jv-divider--vertical]="vertical()"
-      [attr.role]="'separator'"
-      [attr.aria-orientation]="vertical() ? 'vertical' : 'horizontal'"
-    ></div>
-  `, 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 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: 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: 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);
-    region = null;
-    announce(message, politeness = 'polite') {
-        if (!message.trim()) {
-            return;
-        }
-        const region = this.ensureRegion(politeness);
-        region.textContent = '';
-        // Clear and reinsert so NVDA reliably reads repeated updates.
-        setTimeout(() => {
-            region.textContent = message;
-        }, 20);
-    }
-    ensureRegion(politeness) {
-        if (!this.region) {
-            const region = this.document.createElement('div');
-            region.className = 'sr-only';
-            region.setAttribute('role', politeness === 'assertive' ? 'alert' : 'status');
-            region.setAttribute('aria-live', politeness);
-            region.setAttribute('aria-atomic', 'true');
-            this.document.body.appendChild(region);
-            this.region = region;
-            return region;
-        }
-        this.region.setAttribute('role', politeness === 'assertive' ? 'alert' : 'status');
-        this.region.setAttribute('aria-live', politeness);
-        return this.region;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvAnnouncementService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvAnnouncementService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvThemeService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvAnnouncementService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-const JV_UI_DEFAULT_CONFIG = {
-    theme: 'light',
-    density: 'normal',
-    language: 'es-MX',
-    locale: 'es',
-    messagesLocale: 'es',
-    formatLocale: 'es-MX',
-    formats: {
-        date: { day: '2-digit', month: '2-digit', year: 'numeric' },
-        time: { hour: '2-digit', minute: '2-digit' },
-        datetime: { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' },
-        integer: { maximumFractionDigits: 0 },
-        number: { minimumFractionDigits: 0, maximumFractionDigits: 2 },
-        currency: { style: 'currency', currency: 'MXN', minimumFractionDigits: 2, maximumFractionDigits: 2 },
-        percent: { style: 'percent', minimumFractionDigits: 0, maximumFractionDigits: 2 },
-    },
-    toastPosition: 'bottom-right',
-    tabsTransition: 'none',
-};
-
-class JvFormatService {
-    config = inject(JvUiConfigService);
-    formatLocale = signal(this.config.snapshot.formatLocale || this.config.snapshot.language || 'es-MX', ...(ngDevMode ? [{ debugName: "formatLocale" }] : /* istanbul ignore next */ []));
-    formats = signal(this.resolveFormats(this.config.snapshot.formats), ...(ngDevMode ? [{ debugName: "formats" }] : /* istanbul ignore next */ []));
-    firstDayOfWeek = computed(() => this.resolveFirstDayOfWeek(this.formatLocale()), ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
-    initialize() {
-        this.formatLocale.set(this.config.snapshot.formatLocale || this.config.snapshot.language || 'es-MX');
-        this.formats.set(this.resolveFormats(this.config.snapshot.formats));
-    }
-    setFormatLocale(locale) {
-        this.formatLocale.set(locale);
-    }
-    setFormats(formats) {
-        this.formats.update((current) => this.resolveFormats({ ...current, ...formats }));
-    }
-    format(kind, value, overrides) {
-        if (value == null || value === '')
-            return '';
-        if (kind === 'date' || kind === 'time' || kind === 'datetime') {
-            const date = this.toDate(value);
-            if (!date)
-                return String(value);
-            return new Intl.DateTimeFormat(this.formatLocale(), this.resolveDateOptions(kind, overrides)).format(date);
-        }
-        const number = this.toNumber(value);
-        if (number === null)
-            return String(value);
-        return new Intl.NumberFormat(this.formatLocale(), this.resolveNumberOptions(kind, overrides)).format(number);
-    }
-    toComparable(kind, value) {
-        if (value == null || value === '')
-            return null;
-        if (kind === 'date' || kind === 'time' || kind === 'datetime') {
-            const date = this.toDate(value);
-            return date ? date.getTime() : String(value);
-        }
-        if (kind === 'integer' || kind === 'number' || kind === 'currency' || kind === 'percent') {
-            const number = this.toNumber(value);
-            return number ?? String(value);
-        }
-        return String(value);
-    }
-    toDate(value) {
-        if (value instanceof Date) {
-            return Number.isNaN(value.getTime()) ? null : value;
-        }
-        if (typeof value === 'number' || typeof value === 'string') {
-            const date = new Date(value);
-            return Number.isNaN(date.getTime()) ? null : date;
-        }
-        return null;
-    }
-    toNumber(value) {
-        if (typeof value === 'number') {
-            return Number.isFinite(value) ? value : null;
-        }
-        if (typeof value === 'string') {
-            const normalized = value.trim().replace(/[%,$\s]/g, '').replace(/,/g, '');
-            if (!normalized)
-                return null;
-            const parsed = Number(normalized);
-            return Number.isFinite(parsed) ? parsed : null;
-        }
-        return null;
-    }
-    toSearchValue(kind, value) {
-        if (value == null)
-            return '';
-        if (kind === 'date' || kind === 'time' || kind === 'datetime') {
-            const date = this.toDate(value);
-            if (!date)
-                return String(value).toLowerCase();
-            return date.toISOString().toLowerCase();
-        }
-        return String(value).toLowerCase();
-    }
-    resolveFormats(formats) {
-        const defaults = this.config.snapshot.formats;
-        return {
-            date: { ...defaults.date, ...formats?.date },
-            time: { ...defaults.time, ...formats?.time },
-            datetime: { ...defaults.datetime, ...formats?.datetime },
-            integer: { ...defaults.integer, ...formats?.integer },
-            number: { ...defaults.number, ...formats?.number },
-            currency: { ...defaults.currency, ...formats?.currency },
-            percent: { ...defaults.percent, ...formats?.percent },
-        };
-    }
-    resolveDateOptions(kind, overrides) {
-        return { ...this.formats()[kind], ...overrides };
-    }
-    resolveNumberOptions(kind, overrides) {
-        return { ...this.formats()[kind], ...overrides };
-    }
-    resolveFirstDayOfWeek(locale) {
-        try {
-            const intlLocale = new Intl.Locale(locale);
-            const firstDay = intlLocale.weekInfo?.firstDay;
-            if (typeof firstDay === 'number') {
-                return firstDay % 7;
-            }
-        }
-        catch {
-            // Ignore unsupported Intl.Locale implementations.
-        }
-        return 0;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvFormatService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvFormatService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvFormatService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-class JvThemeService {
-    document = inject(DOCUMENT);
-    config = inject(JvUiConfigService);
-    storageKey = 'jv-ui-theme';
-    theme = signal(this.config.snapshot.theme, ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
-    density = signal(this.config.snapshot.density, ...(ngDevMode ? [{ debugName: "density" }] : /* istanbul ignore next */ []));
-    initialize() {
-        const initialConfig = this.config.snapshot;
-        const theme = this.resolveInitialTheme(initialConfig.theme);
-        this.applyTheme(theme);
-        this.applyDensity(initialConfig.density);
-        this.applyLanguage(initialConfig.language);
-    }
-    setTheme(theme) {
-        this.applyTheme(theme);
-        try {
-            this.document.defaultView?.localStorage.setItem(this.storageKey, theme);
-        }
-        catch {
-            // Ignore storage failures in restricted environments.
-        }
-    }
-    setDensity(density) {
-        this.applyDensity(density);
-    }
-    applyTheme(theme) {
-        this.theme.set(theme);
-        const root = this.document.documentElement;
-        root.dataset['theme'] = theme;
-        root.style.colorScheme = theme === 'dark' ? 'dark' : 'light';
-    }
-    applyDensity(density) {
-        this.density.set(density);
-        this.document.documentElement.dataset['density'] = density;
-    }
-    applyLanguage(language) {
-        this.document.documentElement.lang = language;
-    }
-    resolveInitialTheme(fallbackTheme) {
-        const savedTheme = this.readSavedTheme();
-        if (savedTheme) {
-            return savedTheme;
-        }
-        if (fallbackTheme === 'high-contrast') {
-            return fallbackTheme;
-        }
-        return this.prefersDarkMode() ? 'dark' : fallbackTheme;
-    }
-    readSavedTheme() {
-        try {
-            const saved = this.document.defaultView?.localStorage.getItem(this.storageKey);
-            return this.isTheme(saved) ? saved : null;
-        }
-        catch {
-            return null;
-        }
-    }
-    prefersDarkMode() {
-        return this.document.defaultView?.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false;
-    }
-    isTheme(value) {
-        return value === 'light' || value === 'dark' || value === 'high-contrast';
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvThemeService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvThemeService, decorators: [{
-            type: Injectable,
-            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();
-                inject(JvFormatService).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,
-            formats: {
-                ...merged.formats,
-                ...(layer.formats ?? {}),
-            },
-        }), {
-            ...this.defaults,
-            formats: { ...this.defaults.formats },
-        });
-    }
-    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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvThemeService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -19008,6 +18174,12 @@ const ES = {
     'datePicker.prevMonth': 'Mes anterior',
     'datePicker.nextMonth': 'Mes siguiente',
     'datePicker.selectionCleared': 'Seleccion de fecha limpiada',
+    'monthCalendar.title': 'Calendario mensual',
+    'monthCalendar.today': 'Hoy',
+    'monthCalendar.prevMonth': 'Mes anterior',
+    'monthCalendar.nextMonth': 'Mes siguiente',
+    'monthCalendar.prevYear': 'Ano anterior',
+    'monthCalendar.nextYear': 'Ano siguiente',
     'modalSelector.placeholder': 'Seleccione una opcion',
     'modalSelector.searchPlaceholder': 'Buscar',
     'modalSelector.emptyMessage': 'No se encontraron resultados',
@@ -19027,6 +18199,11 @@ const ES = {
     'dialog.cancel': 'Cancelar',
     'common.expanded': 'Expandido',
     'common.collapsed': 'Colapsado',
+    'planner.title': 'Planificador',
+    'planner.emptyMessage': 'No hay elementos programados',
+    'planner.expand': 'Expandir detalles',
+    'planner.collapse': 'Colapsar detalles',
+    'planner.unscheduled': 'Sin programar',
     'slider.prevImage': 'Imagen anterior',
     'slider.nextImage': 'Imagen siguiente',
     'slider.thumbnailList': 'Miniaturas de imagenes',
@@ -19076,6 +18253,12 @@ const EN = {
     'datePicker.prevMonth': 'Previous month',
     'datePicker.nextMonth': 'Next month',
     'datePicker.selectionCleared': 'Date selection cleared',
+    'monthCalendar.title': 'Month calendar',
+    'monthCalendar.today': 'Today',
+    'monthCalendar.prevMonth': 'Previous month',
+    'monthCalendar.nextMonth': 'Next month',
+    'monthCalendar.prevYear': 'Previous year',
+    'monthCalendar.nextYear': 'Next year',
     'modalSelector.placeholder': 'Select an option',
     'modalSelector.searchPlaceholder': 'Search',
     'modalSelector.emptyMessage': 'No results found',
@@ -19095,6 +18278,11 @@ const EN = {
     'dialog.cancel': 'Cancel',
     'common.expanded': 'Expanded',
     'common.collapsed': 'Collapsed',
+    'planner.title': 'Schedule planner',
+    'planner.emptyMessage': 'No scheduled items',
+    'planner.expand': 'Expand details',
+    'planner.collapse': 'Collapse details',
+    'planner.unscheduled': 'Unscheduled',
     'slider.prevImage': 'Previous image',
     'slider.nextImage': 'Next image',
     'slider.thumbnailList': 'Image thumbnails',
@@ -19103,49 +18291,1798 @@ const EN = {
     'gallery.nextImage': 'Next image',
 };
 
-const JV_LOCALE_DICTIONARIES = {
-    es: ES,
-    en: EN,
-};
-const JV_DEFAULT_LOCALE = 'es';
+const JV_LOCALE_DICTIONARIES = {
+    es: ES,
+    en: EN,
+};
+const JV_DEFAULT_LOCALE = 'es';
+
+class JvTranslationService {
+    config = inject(JvUiConfigService);
+    locale = signal(this.resolveLocale(this.config.snapshot.messagesLocale ?? this.config.snapshot.locale), ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    initialize() {
+        const locale = this.resolveLocale(this.config.snapshot.messagesLocale ?? this.config.snapshot.locale);
+        this.locale.set(locale);
+    }
+    setLocale(locale) {
+        this.locale.set(locale);
+    }
+    setMessagesLocale(locale) {
+        this.setLocale(locale);
+    }
+    translate(key, params) {
+        const dict = JV_LOCALE_DICTIONARIES[this.locale()] ?? JV_LOCALE_DICTIONARIES[JV_DEFAULT_LOCALE];
+        let value = dict[key];
+        if (value === undefined) {
+            value = JV_LOCALE_DICTIONARIES[JV_DEFAULT_LOCALE][key] ?? key;
+        }
+        if (params) {
+            for (const [k, v] of Object.entries(params)) {
+                value = value.replace(`{${k}}`, String(v));
+            }
+        }
+        return value;
+    }
+    resolveLocale(locale) {
+        if (!locale)
+            return JV_DEFAULT_LOCALE;
+        if (locale === 'es' || locale === 'en')
+            return locale;
+        return locale.startsWith('es') ? 'es' : 'en';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvTranslationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvTranslationService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvTranslationService, decorators: [{
+            type: Injectable,
+            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();
+                inject(JvFormatService).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,
+            formats: {
+                ...merged.formats,
+                ...(layer.formats ?? {}),
+            },
+        }), {
+            ...this.defaults,
+            formats: { ...this.defaults.formats },
+        });
+    }
+    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 JvFormatService {
+    config = inject(JvUiConfigService);
+    formatLocale = signal(this.config.snapshot.formatLocale || this.config.snapshot.language || 'es-MX', ...(ngDevMode ? [{ debugName: "formatLocale" }] : /* istanbul ignore next */ []));
+    formats = signal(this.resolveFormats(this.config.snapshot.formats), ...(ngDevMode ? [{ debugName: "formats" }] : /* istanbul ignore next */ []));
+    firstDayOfWeek = computed(() => this.resolveFirstDayOfWeek(this.formatLocale()), ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
+    initialize() {
+        this.formatLocale.set(this.config.snapshot.formatLocale || this.config.snapshot.language || 'es-MX');
+        this.formats.set(this.resolveFormats(this.config.snapshot.formats));
+    }
+    setFormatLocale(locale) {
+        this.formatLocale.set(locale);
+    }
+    setFormats(formats) {
+        this.formats.update((current) => this.resolveFormats({ ...current, ...formats }));
+    }
+    format(kind, value, overrides) {
+        if (value == null || value === '')
+            return '';
+        if (kind === 'date' || kind === 'time' || kind === 'datetime') {
+            const date = this.toDate(value);
+            if (!date)
+                return String(value);
+            return new Intl.DateTimeFormat(this.formatLocale(), this.resolveDateOptions(kind, overrides)).format(date);
+        }
+        const number = this.toNumber(value);
+        if (number === null)
+            return String(value);
+        return new Intl.NumberFormat(this.formatLocale(), this.resolveNumberOptions(kind, overrides)).format(number);
+    }
+    toComparable(kind, value) {
+        if (value == null || value === '')
+            return null;
+        if (kind === 'date' || kind === 'time' || kind === 'datetime') {
+            const date = this.toDate(value);
+            return date ? date.getTime() : String(value);
+        }
+        if (kind === 'integer' || kind === 'number' || kind === 'currency' || kind === 'percent') {
+            const number = this.toNumber(value);
+            return number ?? String(value);
+        }
+        return String(value);
+    }
+    toDate(value) {
+        if (value instanceof Date) {
+            return Number.isNaN(value.getTime()) ? null : value;
+        }
+        if (typeof value === 'number' || typeof value === 'string') {
+            const date = new Date(value);
+            return Number.isNaN(date.getTime()) ? null : date;
+        }
+        return null;
+    }
+    toNumber(value) {
+        if (typeof value === 'number') {
+            return Number.isFinite(value) ? value : null;
+        }
+        if (typeof value === 'string') {
+            const normalized = value.trim().replace(/[%,$\s]/g, '').replace(/,/g, '');
+            if (!normalized)
+                return null;
+            const parsed = Number(normalized);
+            return Number.isFinite(parsed) ? parsed : null;
+        }
+        return null;
+    }
+    toSearchValue(kind, value) {
+        if (value == null)
+            return '';
+        if (kind === 'date' || kind === 'time' || kind === 'datetime') {
+            const date = this.toDate(value);
+            if (!date)
+                return String(value).toLowerCase();
+            return date.toISOString().toLowerCase();
+        }
+        return String(value).toLowerCase();
+    }
+    resolveFormats(formats) {
+        const defaults = this.config.snapshot.formats;
+        return {
+            date: { ...defaults.date, ...formats?.date },
+            time: { ...defaults.time, ...formats?.time },
+            datetime: { ...defaults.datetime, ...formats?.datetime },
+            integer: { ...defaults.integer, ...formats?.integer },
+            number: { ...defaults.number, ...formats?.number },
+            currency: { ...defaults.currency, ...formats?.currency },
+            percent: { ...defaults.percent, ...formats?.percent },
+        };
+    }
+    resolveDateOptions(kind, overrides) {
+        return { ...this.formats()[kind], ...overrides };
+    }
+    resolveNumberOptions(kind, overrides) {
+        return { ...this.formats()[kind], ...overrides };
+    }
+    resolveFirstDayOfWeek(locale) {
+        try {
+            const intlLocale = new Intl.Locale(locale);
+            const firstDay = intlLocale.weekInfo?.firstDay;
+            if (typeof firstDay === 'number') {
+                return firstDay % 7;
+            }
+        }
+        catch {
+            // Ignore unsupported Intl.Locale implementations.
+        }
+        return 0;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvFormatService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvFormatService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvFormatService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+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 JvDayPlannerDetailDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvDayPlannerDetailDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: JvDayPlannerDetailDirective, isStandalone: true, selector: "ng-template[jvDayPlannerDetail]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvDayPlannerDetailDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[jvDayPlannerDetail]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+class JvDayPlannerItemDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvDayPlannerItemDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: JvDayPlannerItemDirective, isStandalone: true, selector: "ng-template[jvDayPlannerItem]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvDayPlannerItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[jvDayPlannerItem]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+class JvDayPlannerComponent {
+    translation = inject(JvTranslationService);
+    formatService = inject(JvFormatService);
+    customItemTemplate = contentChild(JvDayPlannerItemDirective, ...(ngDevMode ? [{ debugName: "customItemTemplate" }] : /* istanbul ignore next */ []));
+    customDetailTemplate = contentChild(JvDayPlannerDetailDirective, ...(ngDevMode ? [{ debugName: "customDetailTemplate" }] : /* istanbul ignore next */ []));
+    expandedIds = signal([], ...(ngDevMode ? [{ debugName: "expandedIds" }] : /* istanbul ignore next */ []));
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    groupByDate = input(false, ...(ngDevMode ? [{ debugName: "groupByDate" }] : /* istanbul ignore next */ []));
+    emptyMessage = input('', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    defaultExpandedItemIds = input([], ...(ngDevMode ? [{ debugName: "defaultExpandedItemIds" }] : /* istanbul ignore next */ []));
+    itemSelect = output();
+    resolvedAriaLabel = computed(() => this.ariaLabel() || this.translation.translate('planner.title'), ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    resolvedItems = computed(() => {
+        return this.items()
+            .map((item) => {
+            const date = normalizeDate$1(item.date ?? item.start ?? null);
+            const start = normalizeDateTime(item.start ?? item.date ?? null);
+            const end = normalizeDateTime(item.end ?? null);
+            return {
+                id: String(item.id),
+                raw: item,
+                date,
+                start,
+                end,
+                sortValue: start?.getTime() ?? date?.getTime() ?? Number.MAX_SAFE_INTEGER,
+                hasDetails: Boolean(item.details) || Boolean(this.customDetailTemplate()),
+            };
+        })
+            .sort((left, right) => left.sortValue - right.sortValue);
+    }, ...(ngDevMode ? [{ debugName: "resolvedItems" }] : /* istanbul ignore next */ []));
+    groupedItems = computed(() => {
+        const items = this.resolvedItems();
+        if (!this.groupByDate()) {
+            return [{ key: 'all', label: '', items }];
+        }
+        const groups = new Map();
+        for (const item of items) {
+            const key = item.date ? toDateKey$1(item.date) : 'unscheduled';
+            const bucket = groups.get(key) ?? [];
+            bucket.push(item);
+            groups.set(key, bucket);
+        }
+        return Array.from(groups.entries()).map(([key, groupItems]) => ({
+            key,
+            label: key === 'unscheduled' ? this.translation.translate('planner.unscheduled') : this.formatDateLabel(groupItems[0]?.date),
+            items: groupItems,
+        }));
+    }, ...(ngDevMode ? [{ debugName: "groupedItems" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            this.expandedIds.set(this.defaultExpandedItemIds().map((id) => String(id)));
+        });
+    }
+    itemTemplate() {
+        return this.customItemTemplate();
+    }
+    detailTemplate() {
+        return this.customDetailTemplate();
+    }
+    itemContext(item) {
+        return { $implicit: item.raw, item: item.raw, expanded: this.isExpanded(item.id) };
+    }
+    detailContext(item) {
+        return { $implicit: item.raw, item: item.raw };
+    }
+    selectItem(item) {
+        this.itemSelect.emit(item);
+    }
+    toggleExpanded(itemId) {
+        this.expandedIds.update((current) => current.includes(itemId)
+            ? current.filter((id) => id !== itemId)
+            : [...current, itemId]);
+    }
+    isExpanded(itemId) {
+        return this.expandedIds().includes(itemId);
+    }
+    timeLabel(item) {
+        if (!item.start && !item.end) {
+            return '';
+        }
+        const formatter = new Intl.DateTimeFormat(this.formatService.formatLocale(), {
+            hour: 'numeric',
+            minute: '2-digit',
+        });
+        if (item.start && item.end) {
+            return `${formatter.format(item.start)} - ${formatter.format(item.end)}`;
+        }
+        return formatter.format(item.start ?? item.end);
+    }
+    formatDateLabel(date) {
+        if (!date) {
+            return this.translation.translate('planner.unscheduled');
+        }
+        return new Intl.DateTimeFormat(this.formatService.formatLocale(), {
+            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: JvDayPlannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvDayPlannerComponent, isStandalone: true, selector: "jv-day-planner", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, groupByDate: { classPropertyName: "groupByDate", publicName: "groupByDate", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, defaultExpandedItemIds: { classPropertyName: "defaultExpandedItemIds", publicName: "defaultExpandedItemIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, queries: [{ propertyName: "customItemTemplate", first: true, predicate: JvDayPlannerItemDirective, descendants: true, isSignal: true }, { propertyName: "customDetailTemplate", first: true, predicate: JvDayPlannerDetailDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <section class="jv-day-planner" [attr.aria-label]="resolvedAriaLabel()">
+      @if (groupedItems().length === 0) {
+        <div class="jv-day-planner-empty">{{ emptyMessage() || translation.translate('planner.emptyMessage') }}</div>
+      } @else {
+        <div class="jv-day-planner-groups">
+          @for (group of groupedItems(); track group.key) {
+            <section class="jv-day-planner-group">
+              @if (groupByDate()) {
+                <header class="jv-day-planner-group-header">{{ group.label }}</header>
+              }
+
+              <div class="jv-day-planner-items">
+                @for (item of group.items; track item.id) {
+                  <article class="jv-day-planner-item" [class.jv-day-planner-item--completed]="item.raw.completed">
+                    <div class="jv-day-planner-item-header">
+                      <button type="button" class="jv-day-planner-item-button" (click)="selectItem(item.raw)">
+                        @if (itemTemplate()) {
+                          <ng-container
+                            [ngTemplateOutlet]="itemTemplate()!.templateRef"
+                            [ngTemplateOutletContext]="itemContext(item)"
+                          />
+                        } @else {
+                          <div class="jv-day-planner-item-content">
+                            <div class="jv-day-planner-item-topline">
+                              <strong>{{ item.raw.title }}</strong>
+                              <span class="jv-day-planner-item-time">{{ timeLabel(item) }}</span>
+                            </div>
+
+                            <div class="jv-day-planner-item-badges">
+                              @if (item.raw.status) {
+                                <jv-badge [tone]="item.raw.statusTone ?? 'secondary'">{{ item.raw.status }}</jv-badge>
+                              }
+                              @if (item.raw.type) {
+                                <jv-badge [tone]="item.raw.typeTone ?? 'primary'">{{ item.raw.type }}</jv-badge>
+                              }
+                            </div>
+
+                            <div class="jv-day-planner-item-meta">
+                              @if (item.raw.responsible) {
+                                <span>{{ item.raw.responsible }}</span>
+                              }
+                              @if (item.raw.location) {
+                                <span>{{ item.raw.location }}</span>
+                              }
+                            </div>
+                          </div>
+                        }
+                      </button>
+
+                      @if (item.hasDetails) {
+                        <button
+                          type="button"
+                          class="jv-day-planner-toggle"
+                          [attr.aria-expanded]="isExpanded(item.id) ? 'true' : 'false'"
+                          [attr.aria-label]="isExpanded(item.id) ? translation.translate('planner.collapse') : translation.translate('planner.expand')"
+                          (click)="toggleExpanded(item.id)"
+                        >
+                          {{ isExpanded(item.id) ? '−' : '+' }}
+                        </button>
+                      }
+                    </div>
+
+                    @if (item.hasDetails && isExpanded(item.id)) {
+                      <div class="jv-day-planner-detail">
+                        @if (detailTemplate()) {
+                          <ng-container
+                            [ngTemplateOutlet]="detailTemplate()!.templateRef"
+                            [ngTemplateOutletContext]="detailContext(item)"
+                          />
+                        } @else {
+                          <p>{{ item.raw.details }}</p>
+                        }
+                      </div>
+                    }
+                  </article>
+                }
+              </div>
+            </section>
+          }
+        </div>
+      }
+    </section>
+  `, isInline: true, styles: [".jv-day-planner,.jv-day-planner-groups,.jv-day-planner-group,.jv-day-planner-items{display:grid;gap:var(--jv-spacing-md)}.jv-day-planner-empty{padding:var(--jv-spacing-lg);border:1px dashed var(--jv-color-border);border-radius:var(--jv-radius-lg);color:var(--jv-color-foreground-muted);text-align:center}.jv-day-planner-group-header{font-size:.875rem;font-weight:700;color:var(--jv-color-foreground-muted);text-transform:uppercase;letter-spacing:.04em}.jv-day-planner-item{display:grid;gap:var(--jv-spacing-sm);padding:var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-lg);background:var(--jv-color-surface)}.jv-day-planner-item--completed{opacity:.72}.jv-day-planner-item-header{display:grid;grid-template-columns:1fr auto;gap:var(--jv-spacing-sm);align-items:start}.jv-day-planner-item-button,.jv-day-planner-toggle{border:0;background:transparent;color:inherit;font:inherit}.jv-day-planner-item-button{padding:0;text-align:left;cursor:pointer}.jv-day-planner-item-button:focus-visible,.jv-day-planner-toggle:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:2px;border-radius:var(--jv-radius-sm)}.jv-day-planner-toggle{width:2rem;height:2rem;border-radius:999px;cursor:pointer;color:var(--jv-color-foreground-muted)}.jv-day-planner-toggle:hover{background:var(--jv-color-surface-muted)}.jv-day-planner-item-content,.jv-day-planner-item-badges,.jv-day-planner-item-meta{display:grid;gap:var(--jv-spacing-xs)}.jv-day-planner-item-topline{display:flex;flex-wrap:wrap;gap:var(--jv-spacing-sm);align-items:baseline;justify-content:space-between}.jv-day-planner-item-time{color:var(--jv-color-foreground-muted);font-size:.875rem}.jv-day-planner-item-badges,.jv-day-planner-item-meta{grid-auto-flow:column;grid-auto-columns:max-content;align-items:center;justify-content:start;column-gap:var(--jv-spacing-sm);row-gap:var(--jv-spacing-xs);flex-wrap:wrap}.jv-day-planner-item-meta{color:var(--jv-color-foreground-muted);font-size:.875rem}.jv-day-planner-detail{padding-top:var(--jv-spacing-sm);border-top:1px solid var(--jv-color-border);color:var(--jv-color-foreground-muted)}.jv-day-planner-detail p{margin:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: JvBadgeComponent, selector: "jv-badge", inputs: ["tone"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvDayPlannerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jv-day-planner', standalone: true, imports: [NgTemplateOutlet, JvBadgeComponent], template: `
+    <section class="jv-day-planner" [attr.aria-label]="resolvedAriaLabel()">
+      @if (groupedItems().length === 0) {
+        <div class="jv-day-planner-empty">{{ emptyMessage() || translation.translate('planner.emptyMessage') }}</div>
+      } @else {
+        <div class="jv-day-planner-groups">
+          @for (group of groupedItems(); track group.key) {
+            <section class="jv-day-planner-group">
+              @if (groupByDate()) {
+                <header class="jv-day-planner-group-header">{{ group.label }}</header>
+              }
+
+              <div class="jv-day-planner-items">
+                @for (item of group.items; track item.id) {
+                  <article class="jv-day-planner-item" [class.jv-day-planner-item--completed]="item.raw.completed">
+                    <div class="jv-day-planner-item-header">
+                      <button type="button" class="jv-day-planner-item-button" (click)="selectItem(item.raw)">
+                        @if (itemTemplate()) {
+                          <ng-container
+                            [ngTemplateOutlet]="itemTemplate()!.templateRef"
+                            [ngTemplateOutletContext]="itemContext(item)"
+                          />
+                        } @else {
+                          <div class="jv-day-planner-item-content">
+                            <div class="jv-day-planner-item-topline">
+                              <strong>{{ item.raw.title }}</strong>
+                              <span class="jv-day-planner-item-time">{{ timeLabel(item) }}</span>
+                            </div>
+
+                            <div class="jv-day-planner-item-badges">
+                              @if (item.raw.status) {
+                                <jv-badge [tone]="item.raw.statusTone ?? 'secondary'">{{ item.raw.status }}</jv-badge>
+                              }
+                              @if (item.raw.type) {
+                                <jv-badge [tone]="item.raw.typeTone ?? 'primary'">{{ item.raw.type }}</jv-badge>
+                              }
+                            </div>
+
+                            <div class="jv-day-planner-item-meta">
+                              @if (item.raw.responsible) {
+                                <span>{{ item.raw.responsible }}</span>
+                              }
+                              @if (item.raw.location) {
+                                <span>{{ item.raw.location }}</span>
+                              }
+                            </div>
+                          </div>
+                        }
+                      </button>
+
+                      @if (item.hasDetails) {
+                        <button
+                          type="button"
+                          class="jv-day-planner-toggle"
+                          [attr.aria-expanded]="isExpanded(item.id) ? 'true' : 'false'"
+                          [attr.aria-label]="isExpanded(item.id) ? translation.translate('planner.collapse') : translation.translate('planner.expand')"
+                          (click)="toggleExpanded(item.id)"
+                        >
+                          {{ isExpanded(item.id) ? '−' : '+' }}
+                        </button>
+                      }
+                    </div>
+
+                    @if (item.hasDetails && isExpanded(item.id)) {
+                      <div class="jv-day-planner-detail">
+                        @if (detailTemplate()) {
+                          <ng-container
+                            [ngTemplateOutlet]="detailTemplate()!.templateRef"
+                            [ngTemplateOutletContext]="detailContext(item)"
+                          />
+                        } @else {
+                          <p>{{ item.raw.details }}</p>
+                        }
+                      </div>
+                    }
+                  </article>
+                }
+              </div>
+            </section>
+          }
+        </div>
+      }
+    </section>
+  `, styles: [".jv-day-planner,.jv-day-planner-groups,.jv-day-planner-group,.jv-day-planner-items{display:grid;gap:var(--jv-spacing-md)}.jv-day-planner-empty{padding:var(--jv-spacing-lg);border:1px dashed var(--jv-color-border);border-radius:var(--jv-radius-lg);color:var(--jv-color-foreground-muted);text-align:center}.jv-day-planner-group-header{font-size:.875rem;font-weight:700;color:var(--jv-color-foreground-muted);text-transform:uppercase;letter-spacing:.04em}.jv-day-planner-item{display:grid;gap:var(--jv-spacing-sm);padding:var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-lg);background:var(--jv-color-surface)}.jv-day-planner-item--completed{opacity:.72}.jv-day-planner-item-header{display:grid;grid-template-columns:1fr auto;gap:var(--jv-spacing-sm);align-items:start}.jv-day-planner-item-button,.jv-day-planner-toggle{border:0;background:transparent;color:inherit;font:inherit}.jv-day-planner-item-button{padding:0;text-align:left;cursor:pointer}.jv-day-planner-item-button:focus-visible,.jv-day-planner-toggle:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:2px;border-radius:var(--jv-radius-sm)}.jv-day-planner-toggle{width:2rem;height:2rem;border-radius:999px;cursor:pointer;color:var(--jv-color-foreground-muted)}.jv-day-planner-toggle:hover{background:var(--jv-color-surface-muted)}.jv-day-planner-item-content,.jv-day-planner-item-badges,.jv-day-planner-item-meta{display:grid;gap:var(--jv-spacing-xs)}.jv-day-planner-item-topline{display:flex;flex-wrap:wrap;gap:var(--jv-spacing-sm);align-items:baseline;justify-content:space-between}.jv-day-planner-item-time{color:var(--jv-color-foreground-muted);font-size:.875rem}.jv-day-planner-item-badges,.jv-day-planner-item-meta{grid-auto-flow:column;grid-auto-columns:max-content;align-items:center;justify-content:start;column-gap:var(--jv-spacing-sm);row-gap:var(--jv-spacing-xs);flex-wrap:wrap}.jv-day-planner-item-meta{color:var(--jv-color-foreground-muted);font-size:.875rem}.jv-day-planner-detail{padding-top:var(--jv-spacing-sm);border-top:1px solid var(--jv-color-border);color:var(--jv-color-foreground-muted)}.jv-day-planner-detail p{margin:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { customItemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => JvDayPlannerItemDirective), { isSignal: true }] }], customDetailTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => JvDayPlannerDetailDirective), { isSignal: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], groupByDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupByDate", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], defaultExpandedItemIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultExpandedItemIds", required: false }] }], itemSelect: [{ type: i0.Output, args: ["itemSelect"] }] } });
+function normalizeDate$1(value) {
+    if (!value) {
+        return null;
+    }
+    const date = value instanceof Date ? value : new Date(value);
+    return Number.isNaN(date.getTime()) ? null : new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+function normalizeDateTime(value) {
+    if (!value) {
+        return null;
+    }
+    const date = value instanceof Date ? value : new Date(value);
+    return Number.isNaN(date.getTime()) ? null : date;
+}
+function toDateKey$1(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}`;
+}
+
+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 */ []));
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* 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 }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", 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"
+      [attr.aria-label]="ariaLabel() || null"
+      (change)="handleChange($event)"
+      (blur)="handleBlur()"
+    >
+      @if (placeholder()) {
+        <option value="" [disabled]="required()" [selected]="currentValue() === ''">{{ placeholder() }}</option>
+      }
+
+      @for (option of options(); track option.label + ':' + option.value) {
+        <option [value]="option.value" [disabled]="option.disabled ?? false" [selected]="option.value === currentValue()">{{ 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"
+      [attr.aria-label]="ariaLabel() || null"
+      (change)="handleChange($event)"
+      (blur)="handleBlur()"
+    >
+      @if (placeholder()) {
+        <option value="" [disabled]="required()" [selected]="currentValue() === ''">{{ placeholder() }}</option>
+      }
+
+      @for (option of options(); track option.label + ':' + option.value) {
+        <option [value]="option.value" [disabled]="option.disabled ?? false" [selected]="option.value === currentValue()">{{ 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 }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", 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"] }] } });
+
+class JvMonthCalendarDayDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvMonthCalendarDayDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: JvMonthCalendarDayDirective, isStandalone: true, selector: "ng-template[jvMonthCalendarDay]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvMonthCalendarDayDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[jvMonthCalendarDay]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+class JvMonthCalendarComponent {
+    translation = inject(JvTranslationService);
+    formatService = inject(JvFormatService);
+    gridRootRef = viewChild('gridRoot', ...(ngDevMode ? [{ debugName: "gridRootRef" }] : /* istanbul ignore next */ []));
+    customDayTemplate = contentChild(JvMonthCalendarDayDirective, ...(ngDevMode ? [{ debugName: "customDayTemplate" }] : /* istanbul ignore next */ []));
+    valueInput = input(undefined, { ...(ngDevMode ? { debugName: "valueInput" } : /* istanbul ignore next */ {}), alias: 'value' });
+    visibleMonthInput = input(undefined, { ...(ngDevMode ? { debugName: "visibleMonthInput" } : /* istanbul ignore next */ {}), alias: 'visibleMonth' });
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    monthLabel = input('', ...(ngDevMode ? [{ debugName: "monthLabel" }] : /* istanbul ignore next */ []));
+    yearLabel = input('', ...(ngDevMode ? [{ debugName: "yearLabel" }] : /* istanbul ignore next */ []));
+    minYear = input(undefined, ...(ngDevMode ? [{ debugName: "minYear" }] : /* istanbul ignore next */ []));
+    maxYear = input(undefined, ...(ngDevMode ? [{ debugName: "maxYear" }] : /* istanbul ignore next */ []));
+    navigation = input(null, ...(ngDevMode ? [{ debugName: "navigation" }] : /* istanbul ignore next */ []));
+    dayMeta = input([], ...(ngDevMode ? [{ debugName: "dayMeta" }] : /* istanbul ignore next */ []));
+    selectionChange = output();
+    visibleMonthChange = output();
+    visibleMonth = signal(firstOfMonth$1(new Date()), ...(ngDevMode ? [{ debugName: "visibleMonth" }] : /* istanbul ignore next */ []));
+    focusedDate = signal(startOfDay$1(new Date()), ...(ngDevMode ? [{ debugName: "focusedDate" }] : /* istanbul ignore next */ []));
+    resolvedAriaLabel = computed(() => this.ariaLabel() || this.translation.translate('monthCalendar.title'), ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    resolvedMonthLabel = computed(() => this.monthLabel() || 'Month', ...(ngDevMode ? [{ debugName: "resolvedMonthLabel" }] : /* istanbul ignore next */ []));
+    resolvedYearLabel = computed(() => this.yearLabel() || 'Year', ...(ngDevMode ? [{ debugName: "resolvedYearLabel" }] : /* istanbul ignore next */ []));
+    resolvedNavigation = computed(() => ({
+        previousMonth: this.navigation()?.previousMonth ?? true,
+        nextMonth: this.navigation()?.nextMonth ?? true,
+        previousYear: this.navigation()?.previousYear ?? false,
+        nextYear: this.navigation()?.nextYear ?? false,
+    }), ...(ngDevMode ? [{ debugName: "resolvedNavigation" }] : /* istanbul ignore next */ []));
+    monthOptions = computed(() => {
+        const formatter = new Intl.DateTimeFormat(this.formatService.formatLocale(), { month: 'long' });
+        return Array.from({ length: 12 }, (_, month) => ({
+            label: capitalize$1(formatter.format(new Date(2026, month, 1))),
+            value: String(month),
+        }));
+    }, ...(ngDevMode ? [{ debugName: "monthOptions" }] : /* istanbul ignore next */ []));
+    yearOptions = computed(() => {
+        const [startYear, endYear] = this.yearBounds();
+        return Array.from({ length: endYear - startYear + 1 }, (_, index) => {
+            const year = startYear + index;
+            return { label: String(year), value: String(year) };
+        });
+    }, ...(ngDevMode ? [{ debugName: "yearOptions" }] : /* istanbul ignore next */ []));
+    weekdayLabels = computed(() => {
+        const startDay = this.formatService.firstDayOfWeek();
+        const formatter = new Intl.DateTimeFormat(this.formatService.formatLocale(), { weekday: 'short' });
+        return Array.from({ length: 7 }, (_, index) => capitalize$1(formatter.format(addDays$1(new Date(2026, 5, 7), startDay + index))));
+    }, ...(ngDevMode ? [{ debugName: "weekdayLabels" }] : /* istanbul ignore next */ []));
+    metaMap = computed(() => {
+        const entries = this.dayMeta()
+            .map((meta) => {
+            const date = normalizeDate(meta.date);
+            return date ? [toDateKey(date), {
+                    count: Math.max(0, meta.count ?? 0),
+                    tone: meta.tone ?? 'primary',
+                    label: meta.label ?? '',
+                }] : null;
+        })
+            .filter((entry) => entry !== null);
+        return new Map(entries);
+    }, ...(ngDevMode ? [{ debugName: "metaMap" }] : /* istanbul ignore next */ []));
+    calendarCells = computed(() => {
+        const month = this.visibleMonth();
+        const firstDay = firstOfMonth$1(month);
+        const startOffset = (firstDay.getDay() - this.formatService.firstDayOfWeek() + 7) % 7;
+        const daysInCurrentMonth = daysInMonth$1(month.getFullYear(), month.getMonth());
+        const gridStart = addDays$1(firstDay, -startOffset);
+        const selectedDate = this.selectedDate();
+        const today = startOfDay$1(new Date());
+        return Array.from({ length: Math.ceil((startOffset + daysInCurrentMonth) / 7) * 7 }, (_, index) => {
+            const date = addDays$1(gridStart, index);
+            return {
+                date,
+                currentMonth: date.getMonth() === month.getMonth(),
+                isToday: sameDate$1(date, today),
+                isSelected: sameDate$1(date, selectedDate),
+                meta: this.metaMap().get(toDateKey(date)) ?? null,
+            };
+        });
+    }, ...(ngDevMode ? [{ debugName: "calendarCells" }] : /* istanbul ignore next */ []));
+    selectedDate = computed(() => normalizeDate(this.valueInput()), ...(ngDevMode ? [{ debugName: "selectedDate" }] : /* istanbul ignore next */ []));
+    visibleMonthValue = computed(() => normalizeMonth(this.visibleMonthInput()), ...(ngDevMode ? [{ debugName: "visibleMonthValue" }] : /* istanbul ignore next */ []));
+    yearBounds = computed(() => {
+        const fallbackYear = new Date().getFullYear();
+        const minYear = this.minYear() ?? fallbackYear - 10;
+        const maxYear = this.maxYear() ?? fallbackYear + 10;
+        return minYear <= maxYear ? [minYear, maxYear] : [maxYear, minYear];
+    }, ...(ngDevMode ? [{ debugName: "yearBounds" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const explicitVisibleMonth = this.visibleMonthValue();
+            const selectedDate = this.selectedDate();
+            if (explicitVisibleMonth) {
+                this.focusedDate.set(this.focusDateForMonth(explicitVisibleMonth, untracked(() => this.focusedDate())));
+                this.visibleMonth.set(explicitVisibleMonth);
+                return;
+            }
+            if (!selectedDate) {
+                return;
+            }
+            this.focusedDate.set(selectedDate);
+            this.visibleMonth.set(firstOfMonth$1(selectedDate));
+        });
+    }
+    dayTemplate() {
+        return this.customDayTemplate();
+    }
+    dayContext(cell) {
+        return { $implicit: cell, cell };
+    }
+    shiftMonth(offset) {
+        this.setVisibleMonth(new Date(this.visibleMonth().getFullYear(), this.visibleMonth().getMonth() + offset, 1));
+        this.focusDateWithinVisibleMonth(this.focusedDate());
+    }
+    shiftYear(offset) {
+        this.setVisibleMonth(new Date(this.visibleMonth().getFullYear() + offset, this.visibleMonth().getMonth(), 1));
+        this.focusDateWithinVisibleMonth(this.focusedDate());
+    }
+    handleMonthChange(value) {
+        const current = this.visibleMonth();
+        this.setVisibleMonth(new Date(current.getFullYear(), Number(value), 1));
+        this.focusDateWithinVisibleMonth(this.focusedDate());
+    }
+    handleYearChange(value) {
+        const current = this.visibleMonth();
+        this.setVisibleMonth(new Date(Number(value), current.getMonth(), 1));
+        this.focusDateWithinVisibleMonth(this.focusedDate());
+    }
+    selectToday() {
+        const today = startOfDay$1(new Date());
+        this.setVisibleMonth(today);
+        this.selectDate(today);
+    }
+    selectDate(date) {
+        const nextValue = startOfDay$1(date);
+        this.focusedDate.set(nextValue);
+        this.setVisibleMonth(nextValue);
+        this.selectionChange.emit(nextValue);
+    }
+    handleDayKeydown(event, date) {
+        let nextDate = null;
+        switch (event.key) {
+            case 'ArrowRight':
+                nextDate = addDays$1(date, 1);
+                break;
+            case 'ArrowLeft':
+                nextDate = addDays$1(date, -1);
+                break;
+            case 'ArrowDown':
+                nextDate = addDays$1(date, 7);
+                break;
+            case 'ArrowUp':
+                nextDate = addDays$1(date, -7);
+                break;
+            case 'Home':
+                nextDate = addDays$1(date, -((date.getDay() - this.formatService.firstDayOfWeek() + 7) % 7));
+                break;
+            case 'End':
+                nextDate = addDays$1(date, 6 - ((date.getDay() - this.formatService.firstDayOfWeek() + 7) % 7));
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                this.selectDate(date);
+                return;
+        }
+        if (!nextDate) {
+            return;
+        }
+        event.preventDefault();
+        this.focusedDate.set(nextDate);
+        this.setVisibleMonth(nextDate);
+        queueMicrotask(() => this.focusDateButton(nextDate));
+    }
+    isFocusedDate(date) {
+        return sameDate$1(date, this.focusedDate());
+    }
+    dayAriaLabel(cell) {
+        const parts = [new Intl.DateTimeFormat(this.formatService.formatLocale(), {
+                weekday: 'long',
+                day: 'numeric',
+                month: 'long',
+                year: 'numeric',
+            }).format(cell.date)];
+        if (cell.meta?.count) {
+            parts.push(`${cell.meta.count}`);
+        }
+        if (cell.meta?.label) {
+            parts.push(cell.meta.label);
+        }
+        return parts.join('. ');
+    }
+    markerClass(tone) {
+        return `jv-month-calendar-marker--${tone}`;
+    }
+    isoDate(date) {
+        return toDateKey(date);
+    }
+    setVisibleMonth(date) {
+        const month = firstOfMonth$1(date);
+        this.visibleMonth.set(month);
+        this.visibleMonthChange.emit(month);
+    }
+    focusDateWithinVisibleMonth(date) {
+        const nextDate = this.focusDateForMonth(this.visibleMonth(), date);
+        this.focusedDate.set(nextDate);
+        queueMicrotask(() => this.focusDateButton(nextDate));
+    }
+    focusDateForMonth(month, date) {
+        return startOfDay$1(new Date(month.getFullYear(), month.getMonth(), Math.min(date.getDate(), daysInMonth$1(month.getFullYear(), month.getMonth()))));
+    }
+    focusDateButton(date) {
+        const button = this.gridRootRef()?.nativeElement
+            .querySelector(`[data-jv-date="${toDateKey(date)}"]`);
+        button?.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvMonthCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvMonthCalendarComponent, isStandalone: true, selector: "jv-month-calendar", inputs: { valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, visibleMonthInput: { classPropertyName: "visibleMonthInput", publicName: "visibleMonth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, monthLabel: { classPropertyName: "monthLabel", publicName: "monthLabel", isSignal: true, isRequired: false, transformFunction: null }, yearLabel: { classPropertyName: "yearLabel", publicName: "yearLabel", isSignal: true, isRequired: false, transformFunction: null }, minYear: { classPropertyName: "minYear", publicName: "minYear", isSignal: true, isRequired: false, transformFunction: null }, maxYear: { classPropertyName: "maxYear", publicName: "maxYear", isSignal: true, isRequired: false, transformFunction: null }, navigation: { classPropertyName: "navigation", publicName: "navigation", isSignal: true, isRequired: false, transformFunction: null }, dayMeta: { classPropertyName: "dayMeta", publicName: "dayMeta", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", visibleMonthChange: "visibleMonthChange" }, queries: [{ propertyName: "customDayTemplate", first: true, predicate: JvMonthCalendarDayDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "gridRootRef", first: true, predicate: ["gridRoot"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <section class="jv-month-calendar" [attr.aria-label]="resolvedAriaLabel()">
+      <div class="jv-month-calendar-toolbar">
+        <div class="jv-month-calendar-nav-group jv-month-calendar-nav-group--start">
+          @if (resolvedNavigation().previousYear) {
+            <jv-icon-button
+              icon="chevrons-left"
+              variant="ghost"
+              [ariaLabel]="translation.translate('monthCalendar.prevYear')"
+              (click)="shiftYear(-1)"
+            />
+          }
+
+          @if (resolvedNavigation().previousMonth) {
+            <jv-icon-button
+              icon="chevron-left"
+              variant="ghost"
+              [ariaLabel]="translation.translate('monthCalendar.prevMonth')"
+              (click)="shiftMonth(-1)"
+            />
+          }
+        </div>
+
+        <div class="jv-month-calendar-selects">
+          <jv-select
+            [options]="monthOptions()"
+            [ariaLabel]="resolvedMonthLabel()"
+            [modelValue]="visibleMonth().getMonth().toString()"
+            (selectionChange)="handleMonthChange($event)"
+          />
+          <jv-select
+            [options]="yearOptions()"
+            [ariaLabel]="resolvedYearLabel()"
+            [modelValue]="visibleMonth().getFullYear().toString()"
+            (selectionChange)="handleYearChange($event)"
+          />
+        </div>
+
+        <div class="jv-month-calendar-nav-group jv-month-calendar-nav-group--end">
+          @if (resolvedNavigation().nextMonth) {
+            <jv-icon-button
+              icon="chevron-right"
+              variant="ghost"
+              [ariaLabel]="translation.translate('monthCalendar.nextMonth')"
+              (click)="shiftMonth(1)"
+            />
+          }
+
+          @if (resolvedNavigation().nextYear) {
+            <jv-icon-button
+              icon="chevrons-right"
+              variant="ghost"
+              [ariaLabel]="translation.translate('monthCalendar.nextYear')"
+              (click)="shiftYear(1)"
+            />
+          }
+        </div>
+      </div>
+
+      <div class="jv-month-calendar-actions">
+        <button type="button" class="jv-month-calendar-today" (click)="selectToday()">
+          {{ translation.translate('monthCalendar.today') }}
+        </button>
+      </div>
+
+      <div class="jv-month-calendar-weekdays" aria-hidden="true">
+        @for (weekday of weekdayLabels(); track weekday) {
+          <span>{{ weekday }}</span>
+        }
+      </div>
+
+      <div #gridRoot class="jv-month-calendar-grid" role="grid" [attr.aria-label]="resolvedAriaLabel()">
+        @for (cell of calendarCells(); track isoDate(cell.date)) {
+          <button
+            type="button"
+            class="jv-month-calendar-day"
+            [class.jv-month-calendar-day--outside]="!cell.currentMonth"
+            [class.jv-month-calendar-day--today]="cell.isToday"
+            [class.jv-month-calendar-day--selected]="cell.isSelected"
+            [attr.aria-selected]="cell.isSelected ? 'true' : 'false'"
+            [attr.aria-label]="dayAriaLabel(cell)"
+            [attr.data-jv-date]="isoDate(cell.date)"
+            [attr.tabindex]="isFocusedDate(cell.date) ? 0 : -1"
+            (click)="selectDate(cell.date)"
+            (keydown)="handleDayKeydown($event, cell.date)"
+          >
+            @if (dayTemplate()) {
+              <ng-container [ngTemplateOutlet]="dayTemplate()!.templateRef" [ngTemplateOutletContext]="dayContext(cell)" />
+            } @else {
+              <span class="jv-month-calendar-day-number">{{ cell.date.getDate() }}</span>
+              @if (cell.meta?.count) {
+                <span class="jv-month-calendar-day-count" [class]="markerClass(cell.meta!.tone)">{{ cell.meta?.count }}</span>
+              } @else if (cell.meta) {
+                <span class="jv-month-calendar-day-dot" [class]="markerClass(cell.meta.tone)"></span>
+              }
+            }
+          </button>
+        }
+      </div>
+    </section>
+  `, isInline: true, styles: [".jv-month-calendar{display:grid;gap:var(--jv-spacing-md);padding:var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-lg);background:var(--jv-color-surface)}.jv-month-calendar-toolbar,.jv-month-calendar-nav-group,.jv-month-calendar-selects,.jv-month-calendar-weekdays,.jv-month-calendar-grid,.jv-month-calendar-actions{display:grid;gap:var(--jv-spacing-sm)}.jv-month-calendar-toolbar{grid-template-columns:auto 1fr auto;align-items:center}.jv-month-calendar-nav-group{display:inline-flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-month-calendar-nav-group--end{justify-content:end}.jv-month-calendar-selects{grid-template-columns:1fr 1fr}.jv-month-calendar-actions{justify-content:end}.jv-month-calendar-today{min-height:2.25rem;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);font:inherit;cursor:pointer}.jv-month-calendar-today:hover,.jv-month-calendar-today:focus-visible{border-color:var(--jv-color-primary);outline:none}.jv-month-calendar-weekdays,.jv-month-calendar-grid{grid-template-columns:repeat(7,minmax(0,1fr))}.jv-month-calendar-weekdays span{text-align:center;font-size:.8125rem;font-weight:600;color:var(--jv-color-foreground-muted)}.jv-month-calendar-day{position:relative;min-height:5rem;display:grid;align-content:start;justify-items:start;gap:var(--jv-spacing-xs);padding:var(--jv-spacing-sm);border:1px solid transparent;border-radius:var(--jv-radius-md);background:transparent;color:var(--jv-color-foreground);text-align:left;font:inherit;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease}.jv-month-calendar-day:hover,.jv-month-calendar-day:focus-visible{background:var(--jv-color-surface-muted);outline:none}.jv-month-calendar-day--outside{color:var(--jv-color-foreground-muted)}.jv-month-calendar-day--today{border-color:var(--jv-color-primary)}.jv-month-calendar-day--selected{background:color-mix(in srgb,var(--jv-color-primary) 14%,var(--jv-color-surface));border-color:var(--jv-color-primary)}.jv-month-calendar-day-number{font-weight:700}.jv-month-calendar-day-count,.jv-month-calendar-day-dot{display:inline-flex;align-items:center;justify-content:center;border-radius:999px}.jv-month-calendar-day-count{min-width:1.5rem;min-height:1.5rem;padding:0 .375rem;font-size:.75rem;font-weight:700}.jv-month-calendar-day-dot{width:.5rem;height:.5rem;margin-top:auto}.jv-month-calendar-marker--primary{background:color-mix(in srgb,var(--jv-color-primary) 18%,var(--jv-color-surface));color:var(--jv-color-primary)}.jv-month-calendar-marker--secondary,.jv-month-calendar-marker--neutral{background:var(--jv-color-surface-muted);color:var(--jv-color-foreground)}.jv-month-calendar-marker--success{background:color-mix(in srgb,var(--jv-color-success) 18%,var(--jv-color-surface));color:var(--jv-color-success)}.jv-month-calendar-marker--warning{background:color-mix(in srgb,var(--jv-color-warning) 20%,var(--jv-color-surface));color:#8a4b00}.jv-month-calendar-marker--danger{background:color-mix(in srgb,var(--jv-color-danger) 18%,var(--jv-color-surface));color:var(--jv-color-danger)}.jv-month-calendar-marker--info{background:color-mix(in srgb,var(--jv-color-info) 18%,var(--jv-color-surface));color:var(--jv-color-info)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: JvIconButtonComponent, selector: "jv-icon-button", inputs: ["icon", "ariaLabel", "variant", "disabled"] }, { kind: "component", type: JvSelectComponent, selector: "jv-select", inputs: ["options", "placeholder", "required", "invalid", "describedBy", "ariaLabel", "inputId", "modelValue"], outputs: ["selectionChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvMonthCalendarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jv-month-calendar', standalone: true, imports: [NgTemplateOutlet, JvIconButtonComponent, JvSelectComponent], template: `
+    <section class="jv-month-calendar" [attr.aria-label]="resolvedAriaLabel()">
+      <div class="jv-month-calendar-toolbar">
+        <div class="jv-month-calendar-nav-group jv-month-calendar-nav-group--start">
+          @if (resolvedNavigation().previousYear) {
+            <jv-icon-button
+              icon="chevrons-left"
+              variant="ghost"
+              [ariaLabel]="translation.translate('monthCalendar.prevYear')"
+              (click)="shiftYear(-1)"
+            />
+          }
+
+          @if (resolvedNavigation().previousMonth) {
+            <jv-icon-button
+              icon="chevron-left"
+              variant="ghost"
+              [ariaLabel]="translation.translate('monthCalendar.prevMonth')"
+              (click)="shiftMonth(-1)"
+            />
+          }
+        </div>
+
+        <div class="jv-month-calendar-selects">
+          <jv-select
+            [options]="monthOptions()"
+            [ariaLabel]="resolvedMonthLabel()"
+            [modelValue]="visibleMonth().getMonth().toString()"
+            (selectionChange)="handleMonthChange($event)"
+          />
+          <jv-select
+            [options]="yearOptions()"
+            [ariaLabel]="resolvedYearLabel()"
+            [modelValue]="visibleMonth().getFullYear().toString()"
+            (selectionChange)="handleYearChange($event)"
+          />
+        </div>
+
+        <div class="jv-month-calendar-nav-group jv-month-calendar-nav-group--end">
+          @if (resolvedNavigation().nextMonth) {
+            <jv-icon-button
+              icon="chevron-right"
+              variant="ghost"
+              [ariaLabel]="translation.translate('monthCalendar.nextMonth')"
+              (click)="shiftMonth(1)"
+            />
+          }
+
+          @if (resolvedNavigation().nextYear) {
+            <jv-icon-button
+              icon="chevrons-right"
+              variant="ghost"
+              [ariaLabel]="translation.translate('monthCalendar.nextYear')"
+              (click)="shiftYear(1)"
+            />
+          }
+        </div>
+      </div>
+
+      <div class="jv-month-calendar-actions">
+        <button type="button" class="jv-month-calendar-today" (click)="selectToday()">
+          {{ translation.translate('monthCalendar.today') }}
+        </button>
+      </div>
+
+      <div class="jv-month-calendar-weekdays" aria-hidden="true">
+        @for (weekday of weekdayLabels(); track weekday) {
+          <span>{{ weekday }}</span>
+        }
+      </div>
+
+      <div #gridRoot class="jv-month-calendar-grid" role="grid" [attr.aria-label]="resolvedAriaLabel()">
+        @for (cell of calendarCells(); track isoDate(cell.date)) {
+          <button
+            type="button"
+            class="jv-month-calendar-day"
+            [class.jv-month-calendar-day--outside]="!cell.currentMonth"
+            [class.jv-month-calendar-day--today]="cell.isToday"
+            [class.jv-month-calendar-day--selected]="cell.isSelected"
+            [attr.aria-selected]="cell.isSelected ? 'true' : 'false'"
+            [attr.aria-label]="dayAriaLabel(cell)"
+            [attr.data-jv-date]="isoDate(cell.date)"
+            [attr.tabindex]="isFocusedDate(cell.date) ? 0 : -1"
+            (click)="selectDate(cell.date)"
+            (keydown)="handleDayKeydown($event, cell.date)"
+          >
+            @if (dayTemplate()) {
+              <ng-container [ngTemplateOutlet]="dayTemplate()!.templateRef" [ngTemplateOutletContext]="dayContext(cell)" />
+            } @else {
+              <span class="jv-month-calendar-day-number">{{ cell.date.getDate() }}</span>
+              @if (cell.meta?.count) {
+                <span class="jv-month-calendar-day-count" [class]="markerClass(cell.meta!.tone)">{{ cell.meta?.count }}</span>
+              } @else if (cell.meta) {
+                <span class="jv-month-calendar-day-dot" [class]="markerClass(cell.meta.tone)"></span>
+              }
+            }
+          </button>
+        }
+      </div>
+    </section>
+  `, styles: [".jv-month-calendar{display:grid;gap:var(--jv-spacing-md);padding:var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-lg);background:var(--jv-color-surface)}.jv-month-calendar-toolbar,.jv-month-calendar-nav-group,.jv-month-calendar-selects,.jv-month-calendar-weekdays,.jv-month-calendar-grid,.jv-month-calendar-actions{display:grid;gap:var(--jv-spacing-sm)}.jv-month-calendar-toolbar{grid-template-columns:auto 1fr auto;align-items:center}.jv-month-calendar-nav-group{display:inline-flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-month-calendar-nav-group--end{justify-content:end}.jv-month-calendar-selects{grid-template-columns:1fr 1fr}.jv-month-calendar-actions{justify-content:end}.jv-month-calendar-today{min-height:2.25rem;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);font:inherit;cursor:pointer}.jv-month-calendar-today:hover,.jv-month-calendar-today:focus-visible{border-color:var(--jv-color-primary);outline:none}.jv-month-calendar-weekdays,.jv-month-calendar-grid{grid-template-columns:repeat(7,minmax(0,1fr))}.jv-month-calendar-weekdays span{text-align:center;font-size:.8125rem;font-weight:600;color:var(--jv-color-foreground-muted)}.jv-month-calendar-day{position:relative;min-height:5rem;display:grid;align-content:start;justify-items:start;gap:var(--jv-spacing-xs);padding:var(--jv-spacing-sm);border:1px solid transparent;border-radius:var(--jv-radius-md);background:transparent;color:var(--jv-color-foreground);text-align:left;font:inherit;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease}.jv-month-calendar-day:hover,.jv-month-calendar-day:focus-visible{background:var(--jv-color-surface-muted);outline:none}.jv-month-calendar-day--outside{color:var(--jv-color-foreground-muted)}.jv-month-calendar-day--today{border-color:var(--jv-color-primary)}.jv-month-calendar-day--selected{background:color-mix(in srgb,var(--jv-color-primary) 14%,var(--jv-color-surface));border-color:var(--jv-color-primary)}.jv-month-calendar-day-number{font-weight:700}.jv-month-calendar-day-count,.jv-month-calendar-day-dot{display:inline-flex;align-items:center;justify-content:center;border-radius:999px}.jv-month-calendar-day-count{min-width:1.5rem;min-height:1.5rem;padding:0 .375rem;font-size:.75rem;font-weight:700}.jv-month-calendar-day-dot{width:.5rem;height:.5rem;margin-top:auto}.jv-month-calendar-marker--primary{background:color-mix(in srgb,var(--jv-color-primary) 18%,var(--jv-color-surface));color:var(--jv-color-primary)}.jv-month-calendar-marker--secondary,.jv-month-calendar-marker--neutral{background:var(--jv-color-surface-muted);color:var(--jv-color-foreground)}.jv-month-calendar-marker--success{background:color-mix(in srgb,var(--jv-color-success) 18%,var(--jv-color-surface));color:var(--jv-color-success)}.jv-month-calendar-marker--warning{background:color-mix(in srgb,var(--jv-color-warning) 20%,var(--jv-color-surface));color:#8a4b00}.jv-month-calendar-marker--danger{background:color-mix(in srgb,var(--jv-color-danger) 18%,var(--jv-color-surface));color:var(--jv-color-danger)}.jv-month-calendar-marker--info{background:color-mix(in srgb,var(--jv-color-info) 18%,var(--jv-color-surface));color:var(--jv-color-info)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { gridRootRef: [{ type: i0.ViewChild, args: ['gridRoot', { isSignal: true }] }], customDayTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => JvMonthCalendarDayDirective), { isSignal: true }] }], valueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], visibleMonthInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibleMonth", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], monthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthLabel", required: false }] }], yearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "yearLabel", required: false }] }], minYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "minYear", required: false }] }], maxYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxYear", required: false }] }], navigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigation", required: false }] }], dayMeta: [{ type: i0.Input, args: [{ isSignal: true, alias: "dayMeta", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], visibleMonthChange: [{ type: i0.Output, args: ["visibleMonthChange"] }] } });
+function normalizeDate(value) {
+    if (!value) {
+        return null;
+    }
+    const date = value instanceof Date ? value : new Date(value);
+    return Number.isNaN(date.getTime()) ? null : startOfDay$1(date);
+}
+function normalizeMonth(value) {
+    const date = normalizeDate(value);
+    return date ? firstOfMonth$1(date) : null;
+}
+function daysInMonth$1(year, month) {
+    return new Date(year, month + 1, 0).getDate();
+}
+function firstOfMonth$1(date) {
+    return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+function startOfDay$1(date) {
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+function addDays$1(date, amount) {
+    return startOfDay$1(new Date(date.getFullYear(), date.getMonth(), date.getDate() + amount));
+}
+function sameDate$1(left, right) {
+    if (!left || !right) {
+        return false;
+    }
+    return left.getFullYear() === right.getFullYear()
+        && left.getMonth() === right.getMonth()
+        && left.getDate() === right.getDate();
+}
+function toDateKey(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}`;
+}
+function capitalize$1(value) {
+    return value.charAt(0).toUpperCase() + value.slice(1);
+}
+
+class JvAlertComponent {
+    tone = input('info', ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    role = input('status', ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+    alertClass = computed(() => `jv-alert--${this.tone()}`, ...(ngDevMode ? [{ debugName: "alertClass" }] : /* istanbul ignore next */ []));
+    iconName = computed(() => {
+        switch (this.tone()) {
+            case 'success':
+                return 'check';
+            case 'warning':
+                return 'triangle-alert';
+            case 'danger':
+                return 'circle-alert';
+            case 'primary':
+                return 'sparkles';
+            case 'secondary':
+            case 'neutral':
+                return 'info';
+            default:
+                return 'info';
+        }
+    }, ...(ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvAlertComponent, isStandalone: true, selector: "jv-alert", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="jv-alert" [class]="alertClass()" [attr.role]="role()">
+      <div class="jv-alert-icon">
+        <jv-icon [name]="iconName()" [size]="18" />
+      </div>
+      <div class="jv-alert-content">
+        @if (title()) {
+          <strong>{{ title() }}</strong>
+        }
+        <div><ng-content></ng-content></div>
+      </div>
+    </div>
+  `, isInline: true, styles: [".jv-alert{display:grid;grid-template-columns:auto 1fr;gap:var(--jv-spacing-sm);padding:var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md)}.jv-alert-content{display:grid;gap:var(--jv-spacing-xs)}.jv-alert--primary{background:color-mix(in srgb,var(--jv-color-primary) 10%,var(--jv-color-surface));color:var(--jv-color-foreground)}.jv-alert--secondary,.jv-alert--neutral{background:var(--jv-color-surface-muted);color:var(--jv-color-foreground)}.jv-alert--success{background:color-mix(in srgb,var(--jv-color-success) 12%,var(--jv-color-surface))}.jv-alert--warning{background:color-mix(in srgb,var(--jv-color-warning) 16%,var(--jv-color-surface))}.jv-alert--danger{background:color-mix(in srgb,var(--jv-color-danger) 12%,var(--jv-color-surface))}.jv-alert--info{background:color-mix(in srgb,var(--jv-color-info) 12%,var(--jv-color-surface))}strong{font-size:.95rem}\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: JvAlertComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jv-alert', standalone: true, imports: [JvIconComponent], template: `
+    <div class="jv-alert" [class]="alertClass()" [attr.role]="role()">
+      <div class="jv-alert-icon">
+        <jv-icon [name]="iconName()" [size]="18" />
+      </div>
+      <div class="jv-alert-content">
+        @if (title()) {
+          <strong>{{ title() }}</strong>
+        }
+        <div><ng-content></ng-content></div>
+      </div>
+    </div>
+  `, styles: [".jv-alert{display:grid;grid-template-columns:auto 1fr;gap:var(--jv-spacing-sm);padding:var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md)}.jv-alert-content{display:grid;gap:var(--jv-spacing-xs)}.jv-alert--primary{background:color-mix(in srgb,var(--jv-color-primary) 10%,var(--jv-color-surface));color:var(--jv-color-foreground)}.jv-alert--secondary,.jv-alert--neutral{background:var(--jv-color-surface-muted);color:var(--jv-color-foreground)}.jv-alert--success{background:color-mix(in srgb,var(--jv-color-success) 12%,var(--jv-color-surface))}.jv-alert--warning{background:color-mix(in srgb,var(--jv-color-warning) 16%,var(--jv-color-surface))}.jv-alert--danger{background:color-mix(in srgb,var(--jv-color-danger) 12%,var(--jv-color-surface))}.jv-alert--info{background:color-mix(in srgb,var(--jv-color-info) 12%,var(--jv-color-surface))}strong{font-size:.95rem}\n"] }]
+        }], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }] } });
+
+class JvCardComponent {
+    elevated = input(true, ...(ngDevMode ? [{ debugName: "elevated" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: JvCardComponent, isStandalone: true, selector: "jv-card", inputs: { elevated: { classPropertyName: "elevated", publicName: "elevated", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <article class="jv-card" [class]="elevated() ? 'jv-card--elevated' : 'jv-card--flat'">
+      <ng-content></ng-content>
+    </article>
+  `, isInline: true, styles: [".jv-card{padding:var(--jv-spacing-lg);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-lg);background:var(--jv-color-surface)}.jv-card--elevated{box-shadow:var(--jv-shadow-md)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jv-card', standalone: true, template: `
+    <article class="jv-card" [class]="elevated() ? 'jv-card--elevated' : 'jv-card--flat'">
+      <ng-content></ng-content>
+    </article>
+  `, styles: [".jv-card{padding:var(--jv-spacing-lg);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-lg);background:var(--jv-color-surface)}.jv-card--elevated{box-shadow:var(--jv-shadow-md)}\n"] }]
+        }], propDecorators: { elevated: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevated", required: false }] }] } });
+
+class JvFormContainerComponent {
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    error = input('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    inputId = input('', ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+    hintId = input('', ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
+    errorId = input('', ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    resolvedHintId = computed(() => this.hintId() || (this.inputId() ? `${this.inputId()}-hint` : ''), ...(ngDevMode ? [{ debugName: "resolvedHintId" }] : /* istanbul ignore next */ []));
+    resolvedErrorId = computed(() => this.errorId() || (this.inputId() ? `${this.inputId()}-error` : ''), ...(ngDevMode ? [{ debugName: "resolvedErrorId" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvFormContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvFormContainerComponent, isStandalone: true, selector: "jv-form-container", inputs: { label: { classPropertyName: "label", publicName: "label", 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 }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, hintId: { classPropertyName: "hintId", publicName: "hintId", isSignal: true, isRequired: false, transformFunction: null }, errorId: { classPropertyName: "errorId", publicName: "errorId", 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 } }, ngImport: i0, template: `
+    <div class="jv-form-container" [class.is-invalid]="invalid()">
+      @if (label()) {
+        <label class="jv-form-label" [attr.for]="inputId() || null">
+          <span>{{ label() }}</span>
+          @if (required()) {
+            <span class="required-indicator" aria-hidden="true">*</span>
+          }
+        </label>
+      }
+
+      <ng-content></ng-content>
+
+      @if (hint() && !invalid()) {
+        <p class="jv-form-hint" [id]="resolvedHintId() || null">{{ hint() }}</p>
+      }
+
+      @if (error() && invalid()) {
+        <p class="jv-form-error" [id]="resolvedErrorId() || null" role="alert" aria-live="assertive">{{ error() }}</p>
+      }
+    </div>
+  `, isInline: true, styles: [".jv-form-container{display:grid;gap:var(--jv-spacing-xs)}.jv-form-label{display:inline-flex;align-items:center;gap:.35rem;font-weight:600;color:var(--jv-color-foreground)}.required-indicator,.jv-form-error{color:var(--jv-color-danger)}.jv-form-hint,.jv-form-error{margin:0;font-size:.875rem}.jv-form-hint{color:var(--jv-color-foreground-muted)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvFormContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jv-form-container', standalone: true, template: `
+    <div class="jv-form-container" [class.is-invalid]="invalid()">
+      @if (label()) {
+        <label class="jv-form-label" [attr.for]="inputId() || null">
+          <span>{{ label() }}</span>
+          @if (required()) {
+            <span class="required-indicator" aria-hidden="true">*</span>
+          }
+        </label>
+      }
+
+      <ng-content></ng-content>
+
+      @if (hint() && !invalid()) {
+        <p class="jv-form-hint" [id]="resolvedHintId() || null">{{ hint() }}</p>
+      }
+
+      @if (error() && invalid()) {
+        <p class="jv-form-error" [id]="resolvedErrorId() || null" role="alert" aria-live="assertive">{{ error() }}</p>
+      }
+    </div>
+  `, styles: [".jv-form-container{display:grid;gap:var(--jv-spacing-xs)}.jv-form-label{display:inline-flex;align-items:center;gap:.35rem;font-weight:600;color:var(--jv-color-foreground)}.required-indicator,.jv-form-error{color:var(--jv-color-danger)}.jv-form-hint,.jv-form-error{margin:0;font-size:.875rem}.jv-form-hint{color:var(--jv-color-foreground-muted)}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], hintId: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintId", required: false }] }], errorId: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorId", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }] } });
+
+let inputIdSequence = 0;
+class JvInputComponent {
+    type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* 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-input-${++inputIdSequence}`, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+    value = '';
+    disabled = false;
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    writeValue(value) {
+        this.value = value ?? '';
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    handleInput(event) {
+        const nextValue = event.target.value;
+        this.value = nextValue;
+        this.onChange(nextValue);
+    }
+    handleBlur() {
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: JvInputComponent, isStandalone: true, selector: "jv-input", inputs: { type: { classPropertyName: "type", publicName: "type", 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 } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => JvInputComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: `
+    <input
+      class="jv-input"
+      [class.is-invalid]="invalid()"
+      [id]="inputId()"
+      [type]="type()"
+      [value]="value"
+      [placeholder]="placeholder()"
+      [required]="required()"
+      [disabled]="disabled"
+      [attr.aria-invalid]="invalid() ? 'true' : null"
+      [attr.aria-describedby]="describedBy() || null"
+      (input)="handleInput($event)"
+      (blur)="handleBlur()"
+    />
+  `, isInline: true, styles: [".jv-input{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-input::placeholder{color:var(--jv-color-foreground-muted)}.jv-input.is-invalid{border-color:var(--jv-color-danger)}.jv-input:disabled{opacity:.7;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jv-input', standalone: true, imports: [CommonModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => JvInputComponent),
+                            multi: true,
+                        },
+                    ], template: `
+    <input
+      class="jv-input"
+      [class.is-invalid]="invalid()"
+      [id]="inputId()"
+      [type]="type()"
+      [value]="value"
+      [placeholder]="placeholder()"
+      [required]="required()"
+      [disabled]="disabled"
+      [attr.aria-invalid]="invalid() ? 'true' : null"
+      [attr.aria-describedby]="describedBy() || null"
+      (input)="handleInput($event)"
+      (blur)="handleBlur()"
+    />
+  `, styles: [".jv-input{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-input::placeholder{color:var(--jv-color-foreground-muted)}.jv-input.is-invalid{border-color:var(--jv-color-danger)}.jv-input:disabled{opacity:.7;cursor:not-allowed}\n"] }]
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", 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 }] }] } });
+
+class JvSectionComponent {
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvSectionComponent, isStandalone: true, selector: "jv-section", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <section class="jv-section">
+      @if (title() || description()) {
+        <header class="jv-section-header">
+          @if (title()) {
+            <h2>{{ title() }}</h2>
+          }
+          @if (description()) {
+            <p>{{ description() }}</p>
+          }
+        </header>
+      }
+      <div class="jv-section-content"><ng-content></ng-content></div>
+    </section>
+  `, isInline: true, styles: [".jv-section{display:grid;gap:var(--jv-spacing-md)}.jv-section-header{display:grid;gap:var(--jv-spacing-xs)}h2,p{margin:0}p{color:var(--jv-color-foreground-muted)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jv-section', standalone: true, template: `
+    <section class="jv-section">
+      @if (title() || description()) {
+        <header class="jv-section-header">
+          @if (title()) {
+            <h2>{{ title() }}</h2>
+          }
+          @if (description()) {
+            <p>{{ description() }}</p>
+          }
+        </header>
+      }
+      <div class="jv-section-content"><ng-content></ng-content></div>
+    </section>
+  `, styles: [".jv-section{display:grid;gap:var(--jv-spacing-md)}.jv-section-header{display:grid;gap:var(--jv-spacing-xs)}h2,p{margin:0}p{color:var(--jv-color-foreground-muted)}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }] } });
+
+function passwordMatchValidator(control) {
+    const newPassword = control.get('newPassword')?.value;
+    const confirmPassword = control.get('confirmPassword')?.value;
+    if (!newPassword || !confirmPassword) {
+        return null;
+    }
+    return newPassword === confirmPassword ? null : { passwordMismatch: true };
+}
+class JvChangePasswordPageComponent {
+    formBuilder = inject(FormBuilder);
+    title = input('Change password', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    description = input('Update your password and keep your account secure.', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    submitLabel = input('Update password', ...(ngDevMode ? [{ debugName: "submitLabel" }] : /* istanbul ignore next */ []));
+    cancelLabel = input('Cancel', ...(ngDevMode ? [{ debugName: "cancelLabel" }] : /* istanbul ignore next */ []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    error = input('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    changePasswordSubmit = output();
+    cancel = output();
+    form = this.formBuilder.group({
+        currentPassword: ['', Validators.required],
+        newPassword: ['', Validators.required],
+        confirmPassword: ['', Validators.required],
+    }, { validators: passwordMatchValidator });
+    currentInvalid = computed(() => {
+        const control = this.form.controls.currentPassword;
+        return control.invalid && (control.touched || control.dirty);
+    }, ...(ngDevMode ? [{ debugName: "currentInvalid" }] : /* istanbul ignore next */ []));
+    newInvalid = computed(() => {
+        const control = this.form.controls.newPassword;
+        return control.invalid && (control.touched || control.dirty);
+    }, ...(ngDevMode ? [{ debugName: "newInvalid" }] : /* istanbul ignore next */ []));
+    confirmInvalid = computed(() => {
+        const control = this.form.controls.confirmPassword;
+        return (control.invalid && (control.touched || control.dirty)) || ((control.touched || control.dirty) && this.form.hasError('passwordMismatch'));
+    }, ...(ngDevMode ? [{ debugName: "confirmInvalid" }] : /* istanbul ignore next */ []));
+    submit() {
+        if (this.form.invalid) {
+            this.form.markAllAsTouched();
+            return;
+        }
+        this.changePasswordSubmit.emit(this.form.getRawValue());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvChangePasswordPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvChangePasswordPageComponent, isStandalone: true, selector: "jv-change-password-page", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, submitLabel: { classPropertyName: "submitLabel", publicName: "submitLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changePasswordSubmit: "changePasswordSubmit", cancel: "cancel" }, ngImport: i0, template: `
+    <jv-card>
+      <jv-section [title]="title()" [description]="description()">
+        @if (error()) {
+          <jv-alert tone="danger" title="Password change error" role="alert">{{ error() }}</jv-alert>
+        }
+
+        <form class="auth-form" [formGroup]="form" (ngSubmit)="submit()">
+          <jv-form-container label="Current password" inputId="jv-current-password" error="Current password is required" [required]="true" [invalid]="currentInvalid()">
+            <jv-input inputId="jv-current-password" type="password" formControlName="currentPassword" [invalid]="currentInvalid()" />
+          </jv-form-container>
+
+          <jv-form-container label="New password" inputId="jv-new-password" error="New password is required" [required]="true" [invalid]="newInvalid()">
+            <jv-input inputId="jv-new-password" type="password" formControlName="newPassword" [invalid]="newInvalid()" />
+          </jv-form-container>
+
+          <jv-form-container label="Confirm new password" inputId="jv-confirm-password" error="Passwords must match" [required]="true" [invalid]="confirmInvalid()">
+            <jv-input inputId="jv-confirm-password" type="password" formControlName="confirmPassword" [invalid]="confirmInvalid()" />
+          </jv-form-container>
+
+          <div class="auth-actions">
+            <jv-button variant="outline" (click)="cancel.emit()">{{ cancelLabel() }}</jv-button>
+            <jv-button variant="primary" icon="check" [loading]="loading()">{{ submitLabel() }}</jv-button>
+          </div>
+        </form>
+      </jv-section>
+    </jv-card>
+  `, isInline: true, styles: [".auth-form{display:grid;gap:var(--jv-spacing-md)}.auth-actions{display:flex;gap:var(--jv-spacing-sm);flex-wrap:wrap}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: JvAlertComponent, selector: "jv-alert", inputs: ["tone", "title", "role"] }, { kind: "component", type: JvButtonComponent, selector: "jv-button", inputs: ["type", "variant", "icon", "iconPosition", "loading", "disabled"] }, { kind: "component", type: JvCardComponent, selector: "jv-card", inputs: ["elevated"] }, { kind: "component", type: JvFormContainerComponent, selector: "jv-form-container", inputs: ["label", "hint", "error", "inputId", "hintId", "errorId", "required", "invalid"] }, { kind: "component", type: JvInputComponent, selector: "jv-input", inputs: ["type", "placeholder", "required", "invalid", "describedBy", "inputId"] }, { kind: "component", type: JvSectionComponent, selector: "jv-section", inputs: ["title", "description"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvChangePasswordPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jv-change-password-page', standalone: true, imports: [ReactiveFormsModule, JvAlertComponent, JvButtonComponent, JvCardComponent, JvFormContainerComponent, JvInputComponent, JvSectionComponent], template: `
+    <jv-card>
+      <jv-section [title]="title()" [description]="description()">
+        @if (error()) {
+          <jv-alert tone="danger" title="Password change error" role="alert">{{ error() }}</jv-alert>
+        }
+
+        <form class="auth-form" [formGroup]="form" (ngSubmit)="submit()">
+          <jv-form-container label="Current password" inputId="jv-current-password" error="Current password is required" [required]="true" [invalid]="currentInvalid()">
+            <jv-input inputId="jv-current-password" type="password" formControlName="currentPassword" [invalid]="currentInvalid()" />
+          </jv-form-container>
+
+          <jv-form-container label="New password" inputId="jv-new-password" error="New password is required" [required]="true" [invalid]="newInvalid()">
+            <jv-input inputId="jv-new-password" type="password" formControlName="newPassword" [invalid]="newInvalid()" />
+          </jv-form-container>
+
+          <jv-form-container label="Confirm new password" inputId="jv-confirm-password" error="Passwords must match" [required]="true" [invalid]="confirmInvalid()">
+            <jv-input inputId="jv-confirm-password" type="password" formControlName="confirmPassword" [invalid]="confirmInvalid()" />
+          </jv-form-container>
+
+          <div class="auth-actions">
+            <jv-button variant="outline" (click)="cancel.emit()">{{ cancelLabel() }}</jv-button>
+            <jv-button variant="primary" icon="check" [loading]="loading()">{{ submitLabel() }}</jv-button>
+          </div>
+        </form>
+      </jv-section>
+    </jv-card>
+  `, styles: [".auth-form{display:grid;gap:var(--jv-spacing-md)}.auth-actions{display:flex;gap:var(--jv-spacing-sm);flex-wrap:wrap}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], submitLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitLabel", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], changePasswordSubmit: [{ type: i0.Output, args: ["changePasswordSubmit"] }], cancel: [{ type: i0.Output, args: ["cancel"] }] } });
+
+class JvForgotPasswordPageComponent {
+    formBuilder = inject(FormBuilder);
+    title = input('Reset your password', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    description = input('We will send reset instructions to your email address.', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    submitLabel = input('Send reset link', ...(ngDevMode ? [{ debugName: "submitLabel" }] : /* istanbul ignore next */ []));
+    backLabel = input('Back to login', ...(ngDevMode ? [{ debugName: "backLabel" }] : /* istanbul ignore next */ []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    error = input('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    forgotPasswordSubmit = output();
+    backToLogin = output();
+    form = this.formBuilder.group({
+        email: ['', [Validators.required, Validators.email]],
+    });
+    emailInvalid = computed(() => {
+        const control = this.form.controls.email;
+        return control.invalid && (control.touched || control.dirty);
+    }, ...(ngDevMode ? [{ debugName: "emailInvalid" }] : /* istanbul ignore next */ []));
+    submit() {
+        if (this.form.invalid) {
+            this.form.markAllAsTouched();
+            return;
+        }
+        this.forgotPasswordSubmit.emit(this.form.getRawValue());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvForgotPasswordPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvForgotPasswordPageComponent, isStandalone: true, selector: "jv-forgot-password-page", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, submitLabel: { classPropertyName: "submitLabel", publicName: "submitLabel", isSignal: true, isRequired: false, transformFunction: null }, backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { forgotPasswordSubmit: "forgotPasswordSubmit", backToLogin: "backToLogin" }, ngImport: i0, template: `
+    <jv-card>
+      <jv-section [title]="title()" [description]="description()">
+        @if (error()) {
+          <jv-alert tone="danger" title="Reset error" role="alert">{{ error() }}</jv-alert>
+        }
+
+        <form class="auth-form" [formGroup]="form" (ngSubmit)="submit()">
+          <jv-form-container label="Email" inputId="jv-forgot-email" error="Enter a valid email" [required]="true" [invalid]="emailInvalid()">
+            <jv-input inputId="jv-forgot-email" type="email" formControlName="email" [invalid]="emailInvalid()" placeholder="you@example.com" />
+          </jv-form-container>
+
+          <div class="auth-actions">
+            <jv-button variant="outline" (click)="backToLogin.emit()">{{ backLabel() }}</jv-button>
+            <jv-button type="submit" variant="primary" icon="check" [loading]="loading()">{{ submitLabel() }}</jv-button>
+          </div>
+        </form>
+      </jv-section>
+    </jv-card>
+  `, isInline: true, styles: [".auth-form{display:grid;gap:var(--jv-spacing-md)}.auth-actions{display:flex;gap:var(--jv-spacing-sm);flex-wrap:wrap}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: JvAlertComponent, selector: "jv-alert", inputs: ["tone", "title", "role"] }, { kind: "component", type: JvButtonComponent, selector: "jv-button", inputs: ["type", "variant", "icon", "iconPosition", "loading", "disabled"] }, { kind: "component", type: JvCardComponent, selector: "jv-card", inputs: ["elevated"] }, { kind: "component", type: JvFormContainerComponent, selector: "jv-form-container", inputs: ["label", "hint", "error", "inputId", "hintId", "errorId", "required", "invalid"] }, { kind: "component", type: JvInputComponent, selector: "jv-input", inputs: ["type", "placeholder", "required", "invalid", "describedBy", "inputId"] }, { kind: "component", type: JvSectionComponent, selector: "jv-section", inputs: ["title", "description"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvForgotPasswordPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jv-forgot-password-page', standalone: true, imports: [ReactiveFormsModule, JvAlertComponent, JvButtonComponent, JvCardComponent, JvFormContainerComponent, JvInputComponent, JvSectionComponent], template: `
+    <jv-card>
+      <jv-section [title]="title()" [description]="description()">
+        @if (error()) {
+          <jv-alert tone="danger" title="Reset error" role="alert">{{ error() }}</jv-alert>
+        }
+
+        <form class="auth-form" [formGroup]="form" (ngSubmit)="submit()">
+          <jv-form-container label="Email" inputId="jv-forgot-email" error="Enter a valid email" [required]="true" [invalid]="emailInvalid()">
+            <jv-input inputId="jv-forgot-email" type="email" formControlName="email" [invalid]="emailInvalid()" placeholder="you@example.com" />
+          </jv-form-container>
+
+          <div class="auth-actions">
+            <jv-button variant="outline" (click)="backToLogin.emit()">{{ backLabel() }}</jv-button>
+            <jv-button type="submit" variant="primary" icon="check" [loading]="loading()">{{ submitLabel() }}</jv-button>
+          </div>
+        </form>
+      </jv-section>
+    </jv-card>
+  `, styles: [".auth-form{display:grid;gap:var(--jv-spacing-md)}.auth-actions{display:flex;gap:var(--jv-spacing-sm);flex-wrap:wrap}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], submitLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitLabel", required: false }] }], backLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "backLabel", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], forgotPasswordSubmit: [{ type: i0.Output, args: ["forgotPasswordSubmit"] }], backToLogin: [{ type: i0.Output, args: ["backToLogin"] }] } });
+
+let checkboxIdSequence = 0;
+class JvCheckboxComponent {
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    describedBy = input('', ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    inputId = input(`jv-checkbox-${++checkboxIdSequence}`, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+    value = false;
+    disabled = false;
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    writeValue(value) {
+        this.value = value ?? false;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    handleChange(event) {
+        const nextValue = event.target.checked;
+        this.value = nextValue;
+        this.onChange(nextValue);
+    }
+    handleBlur() {
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: JvCheckboxComponent, isStandalone: true, selector: "jv-checkbox", inputs: { label: { classPropertyName: "label", publicName: "label", 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 } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => JvCheckboxComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: `
+    <label class="jv-checkbox" [class.is-disabled]="disabled">
+      <input
+        type="checkbox"
+        [id]="inputId()"
+        [checked]="value"
+        [disabled]="disabled"
+        [attr.aria-describedby]="describedBy() || null"
+        (change)="handleChange($event)"
+        (blur)="handleBlur()"
+      />
+      <span>{{ label() }}</span>
+    </label>
+  `, isInline: true, styles: [".jv-checkbox{display:inline-flex;align-items:center;gap:var(--jv-spacing-sm);min-height:var(--jv-density-control-height);color:var(--jv-color-foreground)}.jv-checkbox.is-disabled{opacity:.7}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jv-checkbox', standalone: true, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => JvCheckboxComponent),
+                            multi: true,
+                        },
+                    ], template: `
+    <label class="jv-checkbox" [class.is-disabled]="disabled">
+      <input
+        type="checkbox"
+        [id]="inputId()"
+        [checked]="value"
+        [disabled]="disabled"
+        [attr.aria-describedby]="describedBy() || null"
+        (change)="handleChange($event)"
+        (blur)="handleBlur()"
+      />
+      <span>{{ label() }}</span>
+    </label>
+  `, styles: [".jv-checkbox{display:inline-flex;align-items:center;gap:var(--jv-spacing-sm);min-height:var(--jv-density-control-height);color:var(--jv-color-foreground)}.jv-checkbox.is-disabled{opacity:.7}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "describedBy", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }] } });
+
+class JvLoginPageComponent {
+    formBuilder = inject(FormBuilder);
+    title = input('Welcome back', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    description = input('Use your account credentials to continue.', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    submitLabel = input('Sign in', ...(ngDevMode ? [{ debugName: "submitLabel" }] : /* istanbul ignore next */ []));
+    rememberMeLabel = input('Remember me', ...(ngDevMode ? [{ debugName: "rememberMeLabel" }] : /* istanbul ignore next */ []));
+    forgotPasswordLabel = input('Forgot password?', ...(ngDevMode ? [{ debugName: "forgotPasswordLabel" }] : /* istanbul ignore next */ []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    error = input('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    loginSubmit = output();
+    forgotPasswordClick = output();
+    form = this.formBuilder.group({
+        identifier: ['', Validators.required],
+        password: ['', Validators.required],
+        rememberMe: [false],
+    });
+    identifierInvalid = computed(() => {
+        const control = this.form.controls.identifier;
+        return control.invalid && (control.touched || control.dirty);
+    }, ...(ngDevMode ? [{ debugName: "identifierInvalid" }] : /* istanbul ignore next */ []));
+    passwordInvalid = computed(() => {
+        const control = this.form.controls.password;
+        return control.invalid && (control.touched || control.dirty);
+    }, ...(ngDevMode ? [{ debugName: "passwordInvalid" }] : /* istanbul ignore next */ []));
+    submit() {
+        if (this.form.invalid) {
+            this.form.markAllAsTouched();
+            return;
+        }
+        this.loginSubmit.emit(this.form.getRawValue());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvLoginPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvLoginPageComponent, isStandalone: true, selector: "jv-login-page", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, submitLabel: { classPropertyName: "submitLabel", publicName: "submitLabel", isSignal: true, isRequired: false, transformFunction: null }, rememberMeLabel: { classPropertyName: "rememberMeLabel", publicName: "rememberMeLabel", isSignal: true, isRequired: false, transformFunction: null }, forgotPasswordLabel: { classPropertyName: "forgotPasswordLabel", publicName: "forgotPasswordLabel", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loginSubmit: "loginSubmit", forgotPasswordClick: "forgotPasswordClick" }, ngImport: i0, template: `
+    <jv-card>
+      <jv-section [title]="title()" [description]="description()">
+        @if (error()) {
+          <jv-alert tone="danger" title="Sign-in error" role="alert">{{ error() }}</jv-alert>
+        }
+
+        <form class="auth-form" [formGroup]="form" (ngSubmit)="submit()">
+          <jv-form-container label="Email or username" inputId="jv-login-identifier" error="This field is required" [required]="true" [invalid]="identifierInvalid()">
+            <jv-input inputId="jv-login-identifier" formControlName="identifier" [invalid]="identifierInvalid()" placeholder="you@example.com" />
+          </jv-form-container>
+
+          <jv-form-container label="Password" inputId="jv-login-password" error="Password is required" [required]="true" [invalid]="passwordInvalid()">
+            <jv-input inputId="jv-login-password" type="password" formControlName="password" [invalid]="passwordInvalid()" placeholder="Enter your password" />
+          </jv-form-container>
+
+          <div class="auth-inline-row">
+            <jv-checkbox formControlName="rememberMe" label="{{ rememberMeLabel() }}" />
+            <button type="button" class="auth-link" (click)="forgotPasswordClick.emit()">{{ forgotPasswordLabel() }}</button>
+          </div>
+
+          <jv-button type="submit" variant="primary" icon="check" [loading]="loading()">{{ submitLabel() }}</jv-button>
+        </form>
+      </jv-section>
+    </jv-card>
+  `, isInline: true, styles: [".auth-form{display:grid;gap:var(--jv-spacing-md)}.auth-inline-row{display:flex;justify-content:space-between;align-items:center;gap:var(--jv-spacing-md);flex-wrap:wrap}.auth-link{border:0;padding:0;background:transparent;color:var(--jv-color-primary);text-decoration:underline;text-underline-offset:.18em}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: JvAlertComponent, selector: "jv-alert", inputs: ["tone", "title", "role"] }, { kind: "component", type: JvButtonComponent, selector: "jv-button", inputs: ["type", "variant", "icon", "iconPosition", "loading", "disabled"] }, { kind: "component", type: JvCardComponent, selector: "jv-card", inputs: ["elevated"] }, { kind: "component", type: JvCheckboxComponent, selector: "jv-checkbox", inputs: ["label", "describedBy", "inputId"] }, { kind: "component", type: JvFormContainerComponent, selector: "jv-form-container", inputs: ["label", "hint", "error", "inputId", "hintId", "errorId", "required", "invalid"] }, { kind: "component", type: JvInputComponent, selector: "jv-input", inputs: ["type", "placeholder", "required", "invalid", "describedBy", "inputId"] }, { kind: "component", type: JvSectionComponent, selector: "jv-section", inputs: ["title", "description"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvLoginPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jv-login-page', standalone: true, imports: [ReactiveFormsModule, JvAlertComponent, JvButtonComponent, JvCardComponent, JvCheckboxComponent, JvFormContainerComponent, JvInputComponent, JvSectionComponent], template: `
+    <jv-card>
+      <jv-section [title]="title()" [description]="description()">
+        @if (error()) {
+          <jv-alert tone="danger" title="Sign-in error" role="alert">{{ error() }}</jv-alert>
+        }
+
+        <form class="auth-form" [formGroup]="form" (ngSubmit)="submit()">
+          <jv-form-container label="Email or username" inputId="jv-login-identifier" error="This field is required" [required]="true" [invalid]="identifierInvalid()">
+            <jv-input inputId="jv-login-identifier" formControlName="identifier" [invalid]="identifierInvalid()" placeholder="you@example.com" />
+          </jv-form-container>
+
+          <jv-form-container label="Password" inputId="jv-login-password" error="Password is required" [required]="true" [invalid]="passwordInvalid()">
+            <jv-input inputId="jv-login-password" type="password" formControlName="password" [invalid]="passwordInvalid()" placeholder="Enter your password" />
+          </jv-form-container>
+
+          <div class="auth-inline-row">
+            <jv-checkbox formControlName="rememberMe" label="{{ rememberMeLabel() }}" />
+            <button type="button" class="auth-link" (click)="forgotPasswordClick.emit()">{{ forgotPasswordLabel() }}</button>
+          </div>
+
+          <jv-button type="submit" variant="primary" icon="check" [loading]="loading()">{{ submitLabel() }}</jv-button>
+        </form>
+      </jv-section>
+    </jv-card>
+  `, styles: [".auth-form{display:grid;gap:var(--jv-spacing-md)}.auth-inline-row{display:flex;justify-content:space-between;align-items:center;gap:var(--jv-spacing-md);flex-wrap:wrap}.auth-link{border:0;padding:0;background:transparent;color:var(--jv-color-primary);text-decoration:underline;text-underline-offset:.18em}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], submitLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitLabel", required: false }] }], rememberMeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rememberMeLabel", required: false }] }], forgotPasswordLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "forgotPasswordLabel", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], loginSubmit: [{ type: i0.Output, args: ["loginSubmit"] }], forgotPasswordClick: [{ type: i0.Output, args: ["forgotPasswordClick"] }] } });
+
+class JvDividerComponent {
+    vertical = input(false, ...(ngDevMode ? [{ debugName: "vertical" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: JvDividerComponent, isStandalone: true, selector: "jv-divider", inputs: { vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div
+      class="jv-divider"
+      [class.jv-divider--vertical]="vertical()"
+      [attr.role]="'separator'"
+      [attr.aria-orientation]="vertical() ? 'vertical' : 'horizontal'"
+    ></div>
+  `, isInline: true, styles: [".jv-divider{width:100%;height:1px;background:var(--jv-color-border)}.jv-divider--vertical{width:1px;height:100%;min-height:1.5rem}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvDividerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jv-divider', standalone: true, template: `
+    <div
+      class="jv-divider"
+      [class.jv-divider--vertical]="vertical()"
+      [attr.role]="'separator'"
+      [attr.aria-orientation]="vertical() ? 'vertical' : 'horizontal'"
+    ></div>
+  `, 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 JvTranslationService {
-    config = inject(JvUiConfigService);
-    locale = signal(this.resolveLocale(this.config.snapshot.messagesLocale ?? this.config.snapshot.locale), ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
-    initialize() {
-        const locale = this.resolveLocale(this.config.snapshot.messagesLocale ?? this.config.snapshot.locale);
-        this.locale.set(locale);
-    }
-    setLocale(locale) {
-        this.locale.set(locale);
-    }
-    setMessagesLocale(locale) {
-        this.setLocale(locale);
+class JvAccordionPanelDirective {
+    templateRef;
+    id = input.required({ ...(ngDevMode ? { debugName: "id" } : /* istanbul ignore next */ {}), alias: 'jvAccordionPanel' });
+    constructor(templateRef) {
+        this.templateRef = templateRef;
     }
-    translate(key, params) {
-        const dict = JV_LOCALE_DICTIONARIES[this.locale()] ?? JV_LOCALE_DICTIONARIES[JV_DEFAULT_LOCALE];
-        let value = dict[key];
-        if (value === undefined) {
-            value = JV_LOCALE_DICTIONARIES[JV_DEFAULT_LOCALE][key] ?? key;
-        }
-        if (params) {
-            for (const [k, v] of Object.entries(params)) {
-                value = value.replace(`{${k}}`, String(v));
-            }
+    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: 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);
+    region = null;
+    announce(message, politeness = 'polite') {
+        if (!message.trim()) {
+            return;
         }
-        return value;
+        const region = this.ensureRegion(politeness);
+        region.textContent = '';
+        // Clear and reinsert so NVDA reliably reads repeated updates.
+        setTimeout(() => {
+            region.textContent = message;
+        }, 20);
     }
-    resolveLocale(locale) {
-        if (!locale)
-            return JV_DEFAULT_LOCALE;
-        if (locale === 'es' || locale === 'en')
-            return locale;
-        return locale.startsWith('es') ? 'es' : 'en';
+    ensureRegion(politeness) {
+        if (!this.region) {
+            const region = this.document.createElement('div');
+            region.className = 'sr-only';
+            region.setAttribute('role', politeness === 'assertive' ? 'alert' : 'status');
+            region.setAttribute('aria-live', politeness);
+            region.setAttribute('aria-atomic', 'true');
+            this.document.body.appendChild(region);
+            this.region = region;
+            return region;
+        }
+        this.region.setAttribute('role', politeness === 'assertive' ? 'alert' : 'status');
+        this.region.setAttribute('aria-live', politeness);
+        return this.region;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvTranslationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvTranslationService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvAnnouncementService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvAnnouncementService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvTranslationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvAnnouncementService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -19396,17 +20333,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
   `, 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 */ []));
@@ -19705,6 +20631,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 class JvDialogComponent {
     document = inject(DOCUMENT);
     panelRef = viewChild('panel', ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
+    previouslyFocusedElement = null;
     open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     title = input('Dialog', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
     closed = output();
@@ -19713,8 +20640,11 @@ class JvDialogComponent {
     constructor() {
         effect(() => {
             if (this.open()) {
+                this.previouslyFocusedElement = this.document.activeElement instanceof HTMLElement ? this.document.activeElement : null;
                 queueMicrotask(() => this.focusInitialElement());
+                return;
             }
+            this.restoreFocus();
         });
     }
     handleDocumentKeydown(event) {
@@ -19741,6 +20671,10 @@ class JvDialogComponent {
     backdropClose() {
         this.closed.emit();
     }
+    restoreFocus() {
+        this.previouslyFocusedElement?.focus();
+        this.previouslyFocusedElement = null;
+    }
     trapFocus(event) {
         const focusable = this.getFocusableElements();
         const panel = this.panelRef()?.nativeElement;
@@ -19772,7 +20706,7 @@ class JvDialogComponent {
     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>
+        <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>
@@ -19794,7 +20728,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             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>
+        <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>
@@ -19815,104 +20749,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 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);
@@ -20202,7 +21038,7 @@ class JvDatePickerComponent {
         <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"] }] });
+  `, 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", "ariaLabel", "inputId", "modelValue"], outputs: ["selectionChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvDatePickerComponent, decorators: [{
             type: Component,
@@ -20482,7 +21318,7 @@ class JvFileInputComponent {
         [class.jv-file-input-dropzone--dragover]="dragActive()"
         [class.jv-file-input-dropzone--invalid]="invalid()"
         role="button"
-        tabindex="0"
+        [attr.tabindex]="disabled() ? -1 : 0"
         [attr.aria-disabled]="disabled() ? 'true' : 'false'"
         [attr.aria-label]="dropzoneAriaLabel()"
         (click)="openFileDialog()"
@@ -20557,7 +21393,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         [class.jv-file-input-dropzone--dragover]="dragActive()"
         [class.jv-file-input-dropzone--invalid]="invalid()"
         role="button"
-        tabindex="0"
+        [attr.tabindex]="disabled() ? -1 : 0"
         [attr.aria-disabled]="disabled() ? 'true' : 'false'"
         [attr.aria-label]="dropzoneAriaLabel()"
         (click)="openFileDialog()"
@@ -20605,6 +21441,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         }], propDecorators: { nativeInputRef: [{ type: i0.ViewChild, args: ['nativeInput', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", 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 }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], filesInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }], filesChange: [{ type: i0.Output, args: ["filesChange"] }], filesRejected: [{ type: i0.Output, args: ["filesRejected"] }] } });
 
 class JvListComponent {
+    listId = input('', ...(ngDevMode ? [{ debugName: "listId" }] : /* istanbul ignore next */ []));
     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 */ []));
@@ -20615,13 +21452,14 @@ class JvListComponent {
     }, ...(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()"
-    >
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: JvListComponent, isStandalone: true, selector: "jv-list", inputs: { listId: { classPropertyName: "listId", publicName: "listId", isSignal: true, isRequired: false, transformFunction: null }, 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
+      [id]="listId() || null"
+      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"] });
@@ -20629,16 +21467,17 @@ class JvListComponent {
 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]="resolvedRole()"
-      [attr.aria-label]="ariaLabel()"
-    >
+    <ul
+      [id]="listId() || null"
+      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 }] }] } });
+        }], propDecorators: { listId: [{ type: i0.Input, args: [{ isSignal: true, alias: "listId", required: false }] }], 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 modalSelectorIdSequence = 0;
 class JvModalSelectorComponent {
@@ -20668,6 +21507,8 @@ class JvModalSelectorComponent {
     dialogOpen = signal(false, ...(ngDevMode ? [{ debugName: "dialogOpen" }] : /* istanbul ignore next */ []));
     searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : /* istanbul ignore next */ []));
     dialogId = `jv-modal-selector-dialog-${this.instanceId}`;
+    listboxId = `jv-modal-selector-listbox-${this.instanceId}`;
+    resultsId = `jv-modal-selector-results-${this.instanceId}`;
     searchInputId = `jv-modal-selector-search-${this.instanceId}`;
     value = null;
     disabled = false;
@@ -20801,100 +21642,102 @@ class JvModalSelectorComponent {
                 useExisting: forwardRef(() => JvModalSelectorComponent),
                 multi: true,
             },
-        ], 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"] }] });
+        ], 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')"
+            [describedBy]="resultsId"
+            [ngModel]="searchQuery()"
+            (ngModelChange)="searchQuery.set($event)"
+          />
+        }
+
+        <p class="jv-modal-selector-results" [id]="resultsId" aria-live="polite">{{ resultsLabel() }}</p>
+
+        @if (filteredOptions().length > 0) {
+          <jv-list [listId]="listboxId" 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.aria-disabled]="option.disabled ? 'true' : null"
+                  [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: ["listId", "role", "ariaRole", "variant", "ariaLabel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvModalSelectorComponent, decorators: [{
             type: Component,
@@ -20904,99 +21747,101 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                             useExisting: forwardRef(() => JvModalSelectorComponent),
                             multi: true,
                         },
-                    ], 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>
+                    ], 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')"
+            [describedBy]="resultsId"
+            [ngModel]="searchQuery()"
+            (ngModelChange)="searchQuery.set($event)"
+          />
+        }
+
+        <p class="jv-modal-selector-results" [id]="resultsId" aria-live="polite">{{ resultsLabel() }}</p>
+
+        @if (filteredOptions().length > 0) {
+          <jv-list [listId]="listboxId" 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.aria-disabled]="option.disabled ? 'true' : null"
+                  [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"] }] } });
 
@@ -21872,6 +22717,213 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
   `, styles: [".actions{display:flex;justify-content:flex-end;gap:var(--jv-spacing-sm);flex-wrap:wrap}p{margin:0;color:var(--jv-color-foreground-muted)}\n"] }]
         }] });
 
+class JvWindowModalComponent {
+    document = inject(DOCUMENT);
+    panelRef = viewChild('panel', ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
+    open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    subtitle = input('', ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
+    mode = input('floating', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    size = input('xl', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    showCloseButton = input(true, ...(ngDevMode ? [{ debugName: "showCloseButton" }] : /* istanbul ignore next */ []));
+    closeOnBackdrop = input(true, ...(ngDevMode ? [{ debugName: "closeOnBackdrop" }] : /* istanbul ignore next */ []));
+    closeOnEscape = input(true, ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : /* istanbul ignore next */ []));
+    closeLabel = input('Close workspace', ...(ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []));
+    closed = output();
+    close = output();
+    resolvedMode = computed(() => (this.size() === 'fullscreen' ? 'fullscreen' : this.mode()), ...(ngDevMode ? [{ debugName: "resolvedMode" }] : /* istanbul ignore next */ []));
+    titleId = `jv-window-modal-title-${Math.random().toString(36).slice(2, 8)}`;
+    descriptionId = `jv-window-modal-description-${Math.random().toString(36).slice(2, 8)}`;
+    previousFocusedElement = null;
+    previousBodyOverflow = '';
+    wasOpen = false;
+    constructor() {
+        effect(() => {
+            const isOpen = this.open();
+            if (isOpen) {
+                if (!this.wasOpen) {
+                    this.previousFocusedElement = this.document.activeElement instanceof HTMLElement ? this.document.activeElement : null;
+                    this.previousBodyOverflow = this.document.body.style.overflow;
+                    this.document.body.style.overflow = 'hidden';
+                }
+                queueMicrotask(() => this.focusInitialElement());
+            }
+            else if (this.wasOpen) {
+                this.document.body.style.overflow = this.previousBodyOverflow;
+                const previousFocusedElement = this.previousFocusedElement;
+                queueMicrotask(() => previousFocusedElement?.focus());
+            }
+            this.wasOpen = isOpen;
+        });
+    }
+    ngOnDestroy() {
+        if (this.wasOpen) {
+            this.document.body.style.overflow = this.previousBodyOverflow;
+        }
+    }
+    handleDocumentKeydown(event) {
+        if (!this.open()) {
+            return;
+        }
+        if (event.key === 'Escape' && this.closeOnEscape()) {
+            event.preventDefault();
+            this.requestClose();
+            return;
+        }
+        if (event.key === 'Tab') {
+            this.trapFocus(event);
+        }
+    }
+    backdropClose() {
+        if (!this.closeOnBackdrop()) {
+            return;
+        }
+        this.requestClose();
+    }
+    requestClose() {
+        this.closed.emit();
+        this.close.emit();
+    }
+    focusInitialElement() {
+        const panel = this.panelRef()?.nativeElement;
+        if (!panel) {
+            return;
+        }
+        const firstFocusable = this.getFocusableElements()[0];
+        (firstFocusable ?? panel).focus();
+    }
+    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: JvWindowModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvWindowModalComponent, isStandalone: true, selector: "jv-window-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", close: "close" }, 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-window-modal-backdrop" (click)="backdropClose()">
+        <section
+          class="jv-window-modal-panel"
+          [class.jv-window-modal-panel--floating]="resolvedMode() === 'floating'"
+          [class.jv-window-modal-panel--fullscreen]="resolvedMode() === 'fullscreen'"
+          [class.jv-window-modal-panel--lg]="resolvedMode() === 'floating' && size() === 'lg'"
+          [class.jv-window-modal-panel--xl]="resolvedMode() === 'floating' && size() === 'xl'"
+          role="dialog"
+          aria-modal="true"
+          tabindex="-1"
+          [attr.aria-labelledby]="title() ? titleId : null"
+          [attr.aria-describedby]="descriptionId"
+          (click)="$event.stopPropagation()"
+          #panel
+        >
+          <header class="jv-window-modal-header">
+            <div class="jv-window-modal-heading">
+              @if (title()) {
+                <h2 [id]="titleId">{{ title() }}</h2>
+              }
+
+              @if (subtitle()) {
+                <p class="jv-window-modal-subtitle">{{ subtitle() }}</p>
+              }
+            </div>
+
+            <div class="jv-window-modal-header-actions">
+              <ng-content select="[window-modal-header-actions]"></ng-content>
+
+              @if (showCloseButton()) {
+                <jv-icon-button icon="x" variant="ghost" [ariaLabel]="closeLabel()" (click)="requestClose()" />
+              }
+            </div>
+          </header>
+
+          <div class="jv-window-modal-body" [id]="descriptionId">
+            <ng-content></ng-content>
+          </div>
+
+          <footer class="jv-window-modal-footer">
+            <ng-content select="[window-modal-footer]"></ng-content>
+          </footer>
+        </section>
+      </div>
+    }
+  `, isInline: true, styles: [".jv-window-modal-backdrop{position:fixed;inset:0;z-index:1250;display:flex;align-items:center;justify-content:center;padding:1rem;background:#0f172a94}.jv-window-modal-panel{width:min(100%,72rem);max-width:100%;max-height:calc(100dvh - 2rem);display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-xl, 1.25rem);background:var(--jv-color-surface);color:var(--jv-color-foreground);box-shadow:var(--jv-shadow-lg)}.jv-window-modal-panel--lg{width:min(100%,56rem)}.jv-window-modal-panel--xl{width:min(100%,72rem)}.jv-window-modal-panel--fullscreen{width:min(100%,calc(100vw - 1rem));height:calc(100dvh - 1rem);max-height:calc(100dvh - 1rem)}.jv-window-modal-header,.jv-window-modal-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);padding:var(--jv-spacing-lg);background:var(--jv-color-surface)}.jv-window-modal-header{border-bottom:1px solid var(--jv-color-border)}.jv-window-modal-footer{border-top:1px solid var(--jv-color-border);justify-content:flex-end}.jv-window-modal-footer:empty{display:none}.jv-window-modal-heading{display:grid;gap:.35rem;min-width:0}.jv-window-modal-heading h2,.jv-window-modal-subtitle{margin:0}.jv-window-modal-subtitle{color:var(--jv-color-foreground-muted)}.jv-window-modal-header-actions{display:inline-flex;align-items:center;gap:var(--jv-spacing-sm);flex-shrink:0}.jv-window-modal-body{min-height:0;overflow:auto;padding:var(--jv-spacing-lg);display:grid;gap:var(--jv-spacing-lg);overscroll-behavior:contain}@media(max-width:720px){.jv-window-modal-backdrop{padding:0}.jv-window-modal-panel,.jv-window-modal-panel--fullscreen{width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border-left:none;border-right:none}.jv-window-modal-header,.jv-window-modal-body,.jv-window-modal-footer{padding:var(--jv-spacing-md)}}\n"], dependencies: [{ kind: "component", type: JvIconButtonComponent, selector: "jv-icon-button", inputs: ["icon", "ariaLabel", "variant", "disabled"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvWindowModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jv-window-modal', standalone: true, imports: [JvIconButtonComponent], template: `
+    @if (open()) {
+      <div class="jv-window-modal-backdrop" (click)="backdropClose()">
+        <section
+          class="jv-window-modal-panel"
+          [class.jv-window-modal-panel--floating]="resolvedMode() === 'floating'"
+          [class.jv-window-modal-panel--fullscreen]="resolvedMode() === 'fullscreen'"
+          [class.jv-window-modal-panel--lg]="resolvedMode() === 'floating' && size() === 'lg'"
+          [class.jv-window-modal-panel--xl]="resolvedMode() === 'floating' && size() === 'xl'"
+          role="dialog"
+          aria-modal="true"
+          tabindex="-1"
+          [attr.aria-labelledby]="title() ? titleId : null"
+          [attr.aria-describedby]="descriptionId"
+          (click)="$event.stopPropagation()"
+          #panel
+        >
+          <header class="jv-window-modal-header">
+            <div class="jv-window-modal-heading">
+              @if (title()) {
+                <h2 [id]="titleId">{{ title() }}</h2>
+              }
+
+              @if (subtitle()) {
+                <p class="jv-window-modal-subtitle">{{ subtitle() }}</p>
+              }
+            </div>
+
+            <div class="jv-window-modal-header-actions">
+              <ng-content select="[window-modal-header-actions]"></ng-content>
+
+              @if (showCloseButton()) {
+                <jv-icon-button icon="x" variant="ghost" [ariaLabel]="closeLabel()" (click)="requestClose()" />
+              }
+            </div>
+          </header>
+
+          <div class="jv-window-modal-body" [id]="descriptionId">
+            <ng-content></ng-content>
+          </div>
+
+          <footer class="jv-window-modal-footer">
+            <ng-content select="[window-modal-footer]"></ng-content>
+          </footer>
+        </section>
+      </div>
+    }
+  `, styles: [".jv-window-modal-backdrop{position:fixed;inset:0;z-index:1250;display:flex;align-items:center;justify-content:center;padding:1rem;background:#0f172a94}.jv-window-modal-panel{width:min(100%,72rem);max-width:100%;max-height:calc(100dvh - 2rem);display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-xl, 1.25rem);background:var(--jv-color-surface);color:var(--jv-color-foreground);box-shadow:var(--jv-shadow-lg)}.jv-window-modal-panel--lg{width:min(100%,56rem)}.jv-window-modal-panel--xl{width:min(100%,72rem)}.jv-window-modal-panel--fullscreen{width:min(100%,calc(100vw - 1rem));height:calc(100dvh - 1rem);max-height:calc(100dvh - 1rem)}.jv-window-modal-header,.jv-window-modal-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);padding:var(--jv-spacing-lg);background:var(--jv-color-surface)}.jv-window-modal-header{border-bottom:1px solid var(--jv-color-border)}.jv-window-modal-footer{border-top:1px solid var(--jv-color-border);justify-content:flex-end}.jv-window-modal-footer:empty{display:none}.jv-window-modal-heading{display:grid;gap:.35rem;min-width:0}.jv-window-modal-heading h2,.jv-window-modal-subtitle{margin:0}.jv-window-modal-subtitle{color:var(--jv-color-foreground-muted)}.jv-window-modal-header-actions{display:inline-flex;align-items:center;gap:var(--jv-spacing-sm);flex-shrink:0}.jv-window-modal-body{min-height:0;overflow:auto;padding:var(--jv-spacing-lg);display:grid;gap:var(--jv-spacing-lg);overscroll-behavior:contain}@media(max-width:720px){.jv-window-modal-backdrop{padding:0}.jv-window-modal-panel,.jv-window-modal-panel--fullscreen{width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border-left:none;border-right:none}.jv-window-modal-header,.jv-window-modal-body,.jv-window-modal-footer{padding:var(--jv-spacing-md)}}\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 }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], close: [{ type: i0.Output, args: ["close"] }], handleDocumentKeydown: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }] } });
+
 class JvBreadcrumbComponent {
     items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -22595,8 +23647,9 @@ class JvListItemComponent {
       class="jv-list-item"
       [class.jv-list-item--disabled]="disabled()"
       [class.jv-list-item--active]="active()"
-      tabindex="0"
+      [attr.tabindex]="disabled() ? -1 : 0"
       role="listitem"
+      [attr.aria-disabled]="disabled() ? 'true' : null"
       (click)="onActivate()"
       (keydown.enter)="onActivate()"
       (keydown.space)="onActivate(); $event.preventDefault()"
@@ -22623,8 +23676,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       class="jv-list-item"
       [class.jv-list-item--disabled]="disabled()"
       [class.jv-list-item--active]="active()"
-      tabindex="0"
+      [attr.tabindex]="disabled() ? -1 : 0"
       role="listitem"
+      [attr.aria-disabled]="disabled() ? 'true' : null"
       (click)="onActivate()"
       (keydown.enter)="onActivate()"
       (keydown.space)="onActivate(); $event.preventDefault()"
@@ -22860,11 +23914,23 @@ class JvTabsComponent {
         </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)">
+          <div class="jv-tabs-controls">
+            <button
+              type="button"
+              class="jv-tabs-scroll-button"
+              aria-label="Scroll tabs backward"
+              [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)">
+            <button
+              type="button"
+              class="jv-tabs-scroll-button"
+              aria-label="Scroll tabs forward"
+              [disabled]="!showScrollRight()"
+              (click)="scrollTabs(1)"
+            >
               <jv-icon name="chevron-right" [size]="16" />
             </button>
           </div>
@@ -22955,11 +24021,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         </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)">
+          <div class="jv-tabs-controls">
+            <button
+              type="button"
+              class="jv-tabs-scroll-button"
+              aria-label="Scroll tabs backward"
+              [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)">
+            <button
+              type="button"
+              class="jv-tabs-scroll-button"
+              aria-label="Scroll tabs forward"
+              [disabled]="!showScrollRight()"
+              (click)="scrollTabs(1)"
+            >
               <jv-icon name="chevron-right" [size]="16" />
             </button>
           </div>
@@ -23032,6 +24110,7 @@ class JvTooltipDirective {
     showTimeout = null;
     hideTimeout = null;
     tooltipId = `jv-tooltip-${++tooltipSequence}`;
+    originalDescribedBy = null;
     text = input.required({ ...(ngDevMode ? { debugName: "text" } : /* istanbul ignore next */ {}), alias: 'jvTooltip' });
     position = input('top', { ...(ngDevMode ? { debugName: "position" } : /* istanbul ignore next */ {}), alias: 'jvTooltipPosition' });
     show() {
@@ -23045,7 +24124,7 @@ class JvTooltipDirective {
         this.showTimeout = setTimeout(() => {
             this.renderTooltip();
             this.positionTooltip();
-            this.renderer.setAttribute(this.anchorElement(), 'aria-describedby', this.tooltipId);
+            this.attachTooltipDescription();
         }, 120);
     }
     hide() {
@@ -23132,10 +24211,29 @@ class JvTooltipDirective {
         if (!this.tooltipElement) {
             return;
         }
-        this.renderer.removeAttribute(this.anchorElement(), 'aria-describedby');
+        this.restoreTooltipDescription();
         this.renderer.removeChild(this.document.body, this.tooltipElement);
         this.tooltipElement = null;
     }
+    attachTooltipDescription() {
+        const anchor = this.anchorElement();
+        this.originalDescribedBy ??= anchor.getAttribute('aria-describedby');
+        const describedBy = [this.originalDescribedBy, this.tooltipId]
+            .filter((value) => !!value)
+            .join(' ')
+            .trim();
+        this.renderer.setAttribute(anchor, 'aria-describedby', describedBy);
+    }
+    restoreTooltipDescription() {
+        const anchor = this.anchorElement();
+        if (this.originalDescribedBy) {
+            this.renderer.setAttribute(anchor, 'aria-describedby', this.originalDescribedBy);
+        }
+        else {
+            this.renderer.removeAttribute(anchor, 'aria-describedby');
+        }
+        this.originalDescribedBy = null;
+    }
     anchorElement() {
         const host = this.hostRef.nativeElement;
         if (isInteractiveElement(host)) {
@@ -23495,6 +24593,7 @@ function exportGridToExcel(header, rows, filename = 'export.xlsx') {
 let gridIdSequence = 0;
 class JvGridComponent {
     gridId = `jv-grid-${++gridIdSequence}`;
+    gridSearchInputId = `${this.gridId}-search`;
     formatService = inject(JvFormatService);
     translationService = inject(JvTranslationService);
     data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
@@ -24038,7 +25137,7 @@ class JvGridComponent {
             <div class="jv-grid-search">
               <jv-icon name="search" [size]="16" />
               <jv-input
-                inputId="grid-search"
+                [inputId]="gridSearchInputId"
                 [placeholder]="t('grid.searchPlaceholder')"
                 [ngModel]="searchTerm()"
                 (ngModelChange)="onSearchInput($event)"
@@ -24377,7 +25476,7 @@ class JvGridComponent {
         </nav>
       }
     </div>
-  `, isInline: true, styles: [".jv-grid{display:flex;flex-direction:column;gap:var(--jv-spacing-md)}.jv-grid-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);flex-wrap:wrap}.jv-grid-search{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-grid-export-actions{display:flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-grid-table-wrap{overflow-x:auto;overflow-y:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);position:relative}.jv-grid-virtual{max-height:600px}.jv-grid-virtual-spacer{pointer-events:none}.jv-grid-table{width:100%;border-collapse:collapse;background:var(--jv-color-surface)}.jv-grid-thead{background:var(--jv-color-surface-muted)}.jv-grid-th{padding:var(--jv-spacing-sm) var(--jv-spacing-md);font-weight:600;font-size:.875rem;color:var(--jv-color-foreground-muted);text-align:start;white-space:nowrap;border-bottom:1px solid var(--jv-color-border);-webkit-user-select:none;user-select:none;position:relative}.jv-grid-th-sortable{cursor:pointer}.jv-grid-th-sortable:hover{background:var(--jv-color-surface)}.jv-grid-th-reorderable{cursor:grab}.jv-grid-th-reorderable:active{cursor:grabbing}.jv-grid-th-sticky-left{position:sticky;left:0;z-index:2;background:var(--jv-color-surface-muted);border-right:1px solid var(--jv-color-border)}.jv-grid-th-sticky-right{position:sticky;right:0;z-index:2;background:var(--jv-color-surface-muted);border-left:1px solid var(--jv-color-border)}.jv-grid-th-content{display:flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-grid-sort-icon{font-size:.75rem;line-height:1}.jv-grid-th-select,.jv-grid-td-select{width:3rem;text-align:center}.jv-grid-th-actions,.jv-grid-td-actions{width:1%;white-space:nowrap}.jv-grid-td{padding:var(--jv-spacing-sm) var(--jv-spacing-md);color:var(--jv-color-foreground);font-size:var(--jv-density-font-size);border-bottom:1px solid var(--jv-color-border)}.jv-grid-td-sticky-left{position:sticky;left:0;z-index:1;background:var(--jv-color-surface);border-right:1px solid var(--jv-color-border)}.jv-grid-td-sticky-right{position:sticky;right:0;z-index:1;background:var(--jv-color-surface);border-left:1px solid var(--jv-color-border)}.jv-grid-t:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-grid-tr{transition:background-color .12s ease}.jv-grid-tr:hover{background:var(--jv-color-surface-muted)}.jv-grid-tr:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-grid-tr-editing{background:var(--jv-color-surface-highlight, rgba(59, 130, 246, .05))}.jv-grid-tr-selected{background:var(--jv-color-primary-light, rgba(59, 130, 246, .08))}.jv-grid-checkbox{width:1rem;height:1rem;accent-color:var(--jv-color-primary);cursor:pointer}.jv-grid-boolean{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:999px;font-size:.75rem;font-weight:700}.jv-grid-boolean-true{background:var(--jv-color-success);color:#fff}.jv-grid-boolean-false{background:var(--jv-color-danger);color:#fff}.jv-grid-empty{padding:var(--jv-spacing-xl) var(--jv-spacing-md);text-align:center;color:var(--jv-color-foreground-muted);font-style:italic}.jv-grid-actions-group{display:flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-grid-loading{display:flex;align-items:center;justify-content:center;gap:var(--jv-spacing-md);padding:var(--jv-spacing-xl);color:var(--jv-color-foreground-muted)}.jv-grid-spinner{width:1.25rem;height:1.25rem;border:2px solid var(--jv-color-border);border-right-color:var(--jv-color-primary);border-radius:999px;animation:jv-grid-spin .8s linear infinite}@keyframes jv-grid-spin{to{transform:rotate(360deg)}}.jv-grid-pagination{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);flex-wrap:wrap}.jv-grid-pagination-info{font-size:.875rem;color:var(--jv-color-foreground-muted)}.jv-grid-pagination-controls{display:flex;align-items:center;gap:var(--jv-spacing-xs);flex-wrap:wrap}@media(max-width:640px){.jv-grid-pagination{flex-direction:column;align-items:stretch;gap:var(--jv-spacing-sm)}.jv-grid-pagination-info{text-align:center}.jv-grid-pagination-controls{justify-content:center}.jv-grid-toolbar{flex-direction:column;align-items:stretch}.jv-grid-search{width:100%}.jv-grid-export-actions{justify-content:stretch}.jv-grid-export-actions jv-button{flex:1}}.jv-grid-resize-handle{position:absolute;top:0;right:0;width:4px;height:100%;cursor:col-resize;background:transparent;z-index:3}.jv-grid-resize-handle:hover,.jv-grid-resize-handle:active{background:var(--jv-color-primary)}.jv-grid-filter-row .jv-grid-th{padding:var(--jv-spacing-xs) var(--jv-spacing-sm)}.jv-grid-filter-input{width:100%;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-sm);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-sm);background:var(--jv-color-surface);color:var(--jv-color-foreground);font-size:.8rem;box-sizing:border-box}.jv-grid-td-editable{cursor:pointer}.jv-grid-td-editable:hover{box-shadow:inset 0 0 0 1px var(--jv-color-primary)}.jv-grid-edit-input{width:100%;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-sm);border:1px solid var(--jv-color-primary);border-radius:var(--jv-radius-sm);background:var(--jv-color-surface);color:var(--jv-color-foreground);font-size:var(--jv-density-font-size);box-sizing:border-box}.jv-grid-edit-input:focus{outline:2px solid var(--jv-color-primary);outline-offset:-1px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.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: 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: JvSelectComponent, selector: "jv-select", inputs: ["options", "placeholder", "required", "invalid", "describedBy", "inputId", "modelValue"], outputs: ["selectionChange"] }] });
+  `, isInline: true, styles: [".jv-grid{display:flex;flex-direction:column;gap:var(--jv-spacing-md)}.jv-grid-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);flex-wrap:wrap}.jv-grid-search{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-grid-export-actions{display:flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-grid-table-wrap{overflow-x:auto;overflow-y:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);position:relative}.jv-grid-virtual{max-height:600px}.jv-grid-virtual-spacer{pointer-events:none}.jv-grid-table{width:100%;border-collapse:collapse;background:var(--jv-color-surface)}.jv-grid-thead{background:var(--jv-color-surface-muted)}.jv-grid-th{padding:var(--jv-spacing-sm) var(--jv-spacing-md);font-weight:600;font-size:.875rem;color:var(--jv-color-foreground-muted);text-align:start;white-space:nowrap;border-bottom:1px solid var(--jv-color-border);-webkit-user-select:none;user-select:none;position:relative}.jv-grid-th-sortable{cursor:pointer}.jv-grid-th-sortable:hover{background:var(--jv-color-surface)}.jv-grid-th-reorderable{cursor:grab}.jv-grid-th-reorderable:active{cursor:grabbing}.jv-grid-th-sticky-left{position:sticky;left:0;z-index:2;background:var(--jv-color-surface-muted);border-right:1px solid var(--jv-color-border)}.jv-grid-th-sticky-right{position:sticky;right:0;z-index:2;background:var(--jv-color-surface-muted);border-left:1px solid var(--jv-color-border)}.jv-grid-th-content{display:flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-grid-sort-icon{font-size:.75rem;line-height:1}.jv-grid-th-select,.jv-grid-td-select{width:3rem;text-align:center}.jv-grid-th-actions,.jv-grid-td-actions{width:1%;white-space:nowrap}.jv-grid-td{padding:var(--jv-spacing-sm) var(--jv-spacing-md);color:var(--jv-color-foreground);font-size:var(--jv-density-font-size);border-bottom:1px solid var(--jv-color-border)}.jv-grid-td-sticky-left{position:sticky;left:0;z-index:1;background:var(--jv-color-surface);border-right:1px solid var(--jv-color-border)}.jv-grid-td-sticky-right{position:sticky;right:0;z-index:1;background:var(--jv-color-surface);border-left:1px solid var(--jv-color-border)}.jv-grid-t:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-grid-tr{transition:background-color .12s ease}.jv-grid-tr:hover{background:var(--jv-color-surface-muted)}.jv-grid-tr:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-grid-tr-editing{background:var(--jv-color-surface-highlight, rgba(59, 130, 246, .05))}.jv-grid-tr-selected{background:var(--jv-color-primary-light, rgba(59, 130, 246, .08))}.jv-grid-checkbox{width:1rem;height:1rem;accent-color:var(--jv-color-primary);cursor:pointer}.jv-grid-boolean{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:999px;font-size:.75rem;font-weight:700}.jv-grid-boolean-true{background:var(--jv-color-success);color:#fff}.jv-grid-boolean-false{background:var(--jv-color-danger);color:#fff}.jv-grid-empty{padding:var(--jv-spacing-xl) var(--jv-spacing-md);text-align:center;color:var(--jv-color-foreground-muted);font-style:italic}.jv-grid-actions-group{display:flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-grid-loading{display:flex;align-items:center;justify-content:center;gap:var(--jv-spacing-md);padding:var(--jv-spacing-xl);color:var(--jv-color-foreground-muted)}.jv-grid-spinner{width:1.25rem;height:1.25rem;border:2px solid var(--jv-color-border);border-right-color:var(--jv-color-primary);border-radius:999px;animation:jv-grid-spin .8s linear infinite}@keyframes jv-grid-spin{to{transform:rotate(360deg)}}.jv-grid-pagination{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);flex-wrap:wrap}.jv-grid-pagination-info{font-size:.875rem;color:var(--jv-color-foreground-muted)}.jv-grid-pagination-controls{display:flex;align-items:center;gap:var(--jv-spacing-xs);flex-wrap:wrap}@media(max-width:640px){.jv-grid-pagination{flex-direction:column;align-items:stretch;gap:var(--jv-spacing-sm)}.jv-grid-pagination-info{text-align:center}.jv-grid-pagination-controls{justify-content:center}.jv-grid-toolbar{flex-direction:column;align-items:stretch}.jv-grid-search{width:100%}.jv-grid-export-actions{justify-content:stretch}.jv-grid-export-actions jv-button{flex:1}}.jv-grid-resize-handle{position:absolute;top:0;right:0;width:4px;height:100%;cursor:col-resize;background:transparent;z-index:3}.jv-grid-resize-handle:hover,.jv-grid-resize-handle:active{background:var(--jv-color-primary)}.jv-grid-filter-row .jv-grid-th{padding:var(--jv-spacing-xs) var(--jv-spacing-sm)}.jv-grid-filter-input{width:100%;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-sm);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-sm);background:var(--jv-color-surface);color:var(--jv-color-foreground);font-size:.8rem;box-sizing:border-box}.jv-grid-td-editable{cursor:pointer}.jv-grid-td-editable:hover{box-shadow:inset 0 0 0 1px var(--jv-color-primary)}.jv-grid-edit-input{width:100%;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-sm);border:1px solid var(--jv-color-primary);border-radius:var(--jv-radius-sm);background:var(--jv-color-surface);color:var(--jv-color-foreground);font-size:var(--jv-density-font-size);box-sizing:border-box}.jv-grid-edit-input:focus{outline:2px solid var(--jv-color-primary);outline-offset:-1px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.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: 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: JvSelectComponent, selector: "jv-select", inputs: ["options", "placeholder", "required", "invalid", "describedBy", "ariaLabel", "inputId", "modelValue"], outputs: ["selectionChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvGridComponent, decorators: [{
             type: Component,
@@ -24389,7 +25488,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             <div class="jv-grid-search">
               <jv-icon name="search" [size]="16" />
               <jv-input
-                inputId="grid-search"
+                [inputId]="gridSearchInputId"
                 [placeholder]="t('grid.searchPlaceholder')"
                 [ngModel]="searchTerm()"
                 (ngModelChange)="onSearchInput($event)"
@@ -24828,7 +25927,7 @@ class JvPaginationComponent {
         </div>
       </div>
     </nav>
-  `, isInline: true, styles: [".jv-pagination{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);flex-wrap:wrap}.jv-pagination-info{font-size:.875rem;color:var(--jv-color-foreground-muted)}.jv-pagination-controls{display:flex;align-items:center;gap:var(--jv-spacing-md);flex-wrap:wrap}.jv-pagination-size{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-pagination-size-label{font-size:.875rem;color:var(--jv-color-foreground-muted);white-space:nowrap}.jv-pagination-size jv-select{width:auto;min-width:4.5rem}.jv-pagination-buttons{display:flex;align-items:center;gap:var(--jv-spacing-xs)}\n"], dependencies: [{ kind: "component", type: JvButtonComponent, selector: "jv-button", inputs: ["type", "variant", "icon", "iconPosition", "loading", "disabled"] }, { kind: "component", type: JvSelectComponent, selector: "jv-select", inputs: ["options", "placeholder", "required", "invalid", "describedBy", "inputId", "modelValue"], outputs: ["selectionChange"] }] });
+  `, isInline: true, styles: [".jv-pagination{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);flex-wrap:wrap}.jv-pagination-info{font-size:.875rem;color:var(--jv-color-foreground-muted)}.jv-pagination-controls{display:flex;align-items:center;gap:var(--jv-spacing-md);flex-wrap:wrap}.jv-pagination-size{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-pagination-size-label{font-size:.875rem;color:var(--jv-color-foreground-muted);white-space:nowrap}.jv-pagination-size jv-select{width:auto;min-width:4.5rem}.jv-pagination-buttons{display:flex;align-items:center;gap:var(--jv-spacing-xs)}\n"], dependencies: [{ kind: "component", type: JvButtonComponent, selector: "jv-button", inputs: ["type", "variant", "icon", "iconPosition", "loading", "disabled"] }, { kind: "component", type: JvSelectComponent, selector: "jv-select", inputs: ["options", "placeholder", "required", "invalid", "describedBy", "ariaLabel", "inputId", "modelValue"], outputs: ["selectionChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvPaginationComponent, decorators: [{
             type: Component,
@@ -24899,5 +25998,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, JvAccordionComponent, JvAccordionPanelDirective, JvAlertComponent, JvAnnouncementService, JvBadgeComponent, JvBreadcrumbComponent, JvButtonComponent, JvButtonGroupComponent, JvCardComponent, JvChangePasswordPageComponent, JvCheckboxComponent, JvCodeComponent, JvCollapsiblePanelComponent, JvConfirmDialogComponent, JvDashboardShellComponent, JvDatePickerComponent, JvDialogComponent, JvDialogService, JvDividerComponent, JvFileInputComponent, JvForgotPasswordPageComponent, JvFormContainerComponent, JvFormatService, JvGridComponent, JvIconButtonComponent, JvIconComponent, JvImageGalleryComponent, JvImageSliderComponent, JvInputComponent, JvListComponent, JvListItemComponent, JvLoaderComponent, JvLoaderService, JvLoginPageComponent, JvModalSelectorComponent, JvPageComponent, JvPaginationComponent, JvRadioComponent, JvSectionComponent, JvSelectComponent, JvSidebarComponent, JvSwitchComponent, JvTabPanelDirective, JvTabsComponent, JvTextareaComponent, JvThemeService, JvToastComponent, JvToastService, JvTooltipDirective, 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, JvCodeComponent, JvCollapsiblePanelComponent, JvConfirmDialogComponent, JvDashboardShellComponent, JvDatePickerComponent, JvDayPlannerComponent, JvDayPlannerDetailDirective, JvDayPlannerItemDirective, JvDialogComponent, JvDialogService, JvDividerComponent, JvFileInputComponent, JvForgotPasswordPageComponent, JvFormContainerComponent, JvFormatService, JvGridComponent, JvIconButtonComponent, JvIconComponent, JvImageGalleryComponent, JvImageSliderComponent, JvInputComponent, JvListComponent, JvListItemComponent, JvLoaderComponent, JvLoaderService, JvLoginPageComponent, JvModalSelectorComponent, JvMonthCalendarComponent, JvMonthCalendarDayDirective, JvPageComponent, JvPaginationComponent, JvRadioComponent, JvSectionComponent, JvSelectComponent, JvSidebarComponent, JvSwitchComponent, JvTabPanelDirective, JvTabsComponent, JvTextareaComponent, JvThemeService, JvToastComponent, JvToastService, JvTooltipDirective, JvTopbarComponent, JvTranslationService, JvWindowModalComponent, provideJvUi };
 //# sourceMappingURL=devjuliovilla-jv-ui.mjs.map