@devjuliovilla/jv-ui 1.11.2 → 1.12.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, 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,218 +18042,1495 @@ 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()"
-    />
+    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 ES = {
+    'list.emptyMessage': 'No hay elementos',
+    'grid.emptyMessage': 'No hay registros',
+    'grid.noResults': 'No se encontraron resultados',
+    'grid.searchPlaceholder': 'Buscar...',
+    'grid.loading': 'Cargando datos...',
+    'grid.pageOf': 'de',
+    'grid.itemsPerPage': 'Registros por página',
+    'grid.selected': 'seleccionados',
+    'grid.selectAll': 'Seleccionar todo',
+    'grid.deselectAll': 'Deseleccionar todo',
+    'grid.sortAsc': 'Orden ascendente',
+    'grid.sortDesc': 'Orden descendente',
+    'grid.sortNone': 'Sin orden',
+    'grid.pageFirst': 'Primera página',
+    'grid.pagePrev': 'Página anterior',
+    'grid.pageNext': 'Página siguiente',
+    'grid.pageLast': 'Última página',
+    'grid.pageOfTotal': 'Página {page} de {total}',
+    'grid.itemsTotal': '{total} registros',
+    'grid.itemsShowing': 'Mostrando {start}-{end} de {total}',
+    'grid.exportCsv': 'CSV',
+    'grid.exportExcel': 'Excel',
+    'grid.filterPlaceholder': 'Filtrar...',
+    'grid.filterForColumn': 'Filtrar por ${column}',
+    'grid.actionsLabel': 'Acciones',
+    'pagination.pageLabel': 'Página {page}',
+    'pagination.itemsShowing': '{start}-{end} de {total}',
+    'pagination.of': 'de',
+    'pagination.firstPage': 'Primera página',
+    'pagination.prevPage': 'Página anterior',
+    'pagination.nextPage': 'Página siguiente',
+    'pagination.lastPage': 'Última página',
+    'pagination.itemsPerPage': 'Registros por página',
+    'datePicker.placeholder': 'Seleccione una fecha',
+    'datePicker.dialogTitle': 'Seleccionar fecha',
+    'datePicker.clear': 'Limpiar fecha',
+    'datePicker.close': 'Cerrar',
+    'datePicker.prevMonth': 'Mes anterior',
+    'datePicker.nextMonth': 'Mes siguiente',
+    'datePicker.selectionCleared': 'Seleccion de fecha limpiada',
+    'monthCalendar.title': 'Calendario mensual',
+    'monthCalendar.today': 'Hoy',
+    'monthCalendar.prevMonth': 'Mes anterior',
+    'monthCalendar.nextMonth': 'Mes siguiente',
+    'modalSelector.placeholder': 'Seleccione una opcion',
+    'modalSelector.searchPlaceholder': 'Buscar',
+    'modalSelector.emptyMessage': 'No se encontraron resultados',
+    'modalSelector.clear': 'Limpiar seleccion',
+    'modalSelector.close': 'Cerrar',
+    'modalSelector.results': '{count} resultados',
+    'modalSelector.selected': '{label} seleccionado',
+    'modalSelector.selectionCleared': 'Seleccion limpiada',
+    'fileInput.dropLabel': 'Arrastre archivos aqui o haga clic para seleccionarlos',
+    'fileInput.helperText': 'Compatible con seleccion multiple y arrastrar y soltar',
+    'fileInput.selectionSummary': '{count} de {max} archivos seleccionados',
+    'fileInput.invalidFiles': '{count} archivos no coinciden con el tipo permitido',
+    'fileInput.tooManyFiles': 'Solo se permiten hasta {max} archivos',
+    'fileInput.removeFile': 'Quitar archivo {name}',
+    'dialog.confirmTitle': 'Confirmar',
+    'dialog.confirm': 'Aceptar',
+    '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',
+    'gallery.close': 'Cerrar',
+    'gallery.prevImage': 'Imagen anterior',
+    'gallery.nextImage': 'Imagen siguiente',
+};
+
+const EN = {
+    'list.emptyMessage': 'No items',
+    'grid.emptyMessage': 'No records found',
+    'grid.noResults': 'No results found',
+    'grid.searchPlaceholder': 'Search...',
+    'grid.loading': 'Loading data...',
+    'grid.pageOf': 'of',
+    'grid.itemsPerPage': 'Items per page',
+    'grid.selected': 'selected',
+    'grid.selectAll': 'Select all',
+    'grid.deselectAll': 'Deselect all',
+    'grid.sortAsc': 'Sort ascending',
+    'grid.sortDesc': 'Sort descending',
+    'grid.sortNone': 'No sort',
+    'grid.pageFirst': 'First page',
+    'grid.pagePrev': 'Previous page',
+    'grid.pageNext': 'Next page',
+    'grid.pageLast': 'Last page',
+    'grid.pageOfTotal': 'Page {page} of {total}',
+    'grid.itemsTotal': '{total} items',
+    'grid.itemsShowing': 'Showing {start}-{end} of {total}',
+    'grid.exportCsv': 'CSV',
+    'grid.exportExcel': 'Excel',
+    'grid.filterPlaceholder': 'Filter...',
+    'grid.filterForColumn': 'Filter by ${column}',
+    'grid.actionsLabel': 'Actions',
+    'pagination.pageLabel': 'Page {page}',
+    'pagination.itemsShowing': '{start}-{end} of {total}',
+    'pagination.of': 'of',
+    'pagination.firstPage': 'First page',
+    'pagination.prevPage': 'Previous page',
+    'pagination.nextPage': 'Next page',
+    'pagination.lastPage': 'Last page',
+    'pagination.itemsPerPage': 'Items per page',
+    'datePicker.placeholder': 'Select a date',
+    'datePicker.dialogTitle': 'Select date',
+    'datePicker.clear': 'Clear date',
+    'datePicker.close': 'Close',
+    'datePicker.prevMonth': 'Previous month',
+    'datePicker.nextMonth': 'Next month',
+    'datePicker.selectionCleared': 'Date selection cleared',
+    'monthCalendar.title': 'Month calendar',
+    'monthCalendar.today': 'Today',
+    'monthCalendar.prevMonth': 'Previous month',
+    'monthCalendar.nextMonth': 'Next month',
+    'modalSelector.placeholder': 'Select an option',
+    'modalSelector.searchPlaceholder': 'Search',
+    'modalSelector.emptyMessage': 'No results found',
+    'modalSelector.clear': 'Clear selection',
+    'modalSelector.close': 'Close',
+    'modalSelector.results': '{count} results',
+    'modalSelector.selected': '{label} selected',
+    'modalSelector.selectionCleared': 'Selection cleared',
+    'fileInput.dropLabel': 'Drag files here or click to choose them',
+    'fileInput.helperText': 'Supports multiple selection and drag and drop',
+    'fileInput.selectionSummary': '{count} of {max} files selected',
+    'fileInput.invalidFiles': '{count} files do not match the allowed type',
+    'fileInput.tooManyFiles': 'Only up to {max} files are allowed',
+    'fileInput.removeFile': 'Remove file {name}',
+    'dialog.confirmTitle': 'Confirm',
+    'dialog.confirm': 'Confirm',
+    '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',
+    'gallery.close': 'Close',
+    'gallery.prevImage': 'Previous image',
+    'gallery.nextImage': 'Next image',
+};
+
+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 */ []));
+    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"] }] } });
+
+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' });
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* 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 */ []));
+    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 currentYear = new Date().getFullYear();
+        return Array.from({ length: 21 }, (_, index) => {
+            const year = currentYear - 10 + 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 */ []));
+    constructor() {
+        effect(() => {
+            const selectedDate = this.selectedDate();
+            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());
+    }
+    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 month = this.visibleMonth();
+        const nextDate = startOfDay$1(new Date(month.getFullYear(), month.getMonth(), Math.min(date.getDate(), daysInMonth$1(month.getFullYear(), month.getMonth()))));
+        this.focusedDate.set(nextDate);
+        queueMicrotask(() => this.focusDateButton(nextDate));
+    }
+    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 }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", 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">
+        <jv-icon-button
+          icon="chevron-left"
+          variant="ghost"
+          [ariaLabel]="translation.translate('monthCalendar.prevMonth')"
+          (click)="shiftMonth(-1)"
+        />
+
+        <div class="jv-month-calendar-selects">
+          <jv-select
+            [options]="monthOptions()"
+            [modelValue]="visibleMonth().getMonth().toString()"
+            (selectionChange)="handleMonthChange($event)"
+          />
+          <jv-select
+            [options]="yearOptions()"
+            [modelValue]="visibleMonth().getFullYear().toString()"
+            (selectionChange)="handleYearChange($event)"
+          />
+        </div>
+
+        <jv-icon-button
+          icon="chevron-right"
+          variant="ghost"
+          [ariaLabel]="translation.translate('monthCalendar.nextMonth')"
+          (click)="shiftMonth(1)"
+        />
+      </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-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-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", "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">
+        <jv-icon-button
+          icon="chevron-left"
+          variant="ghost"
+          [ariaLabel]="translation.translate('monthCalendar.prevMonth')"
+          (click)="shiftMonth(-1)"
+        />
+
+        <div class="jv-month-calendar-selects">
+          <jv-select
+            [options]="monthOptions()"
+            [modelValue]="visibleMonth().getMonth().toString()"
+            (selectionChange)="handleMonthChange($event)"
+          />
+          <jv-select
+            [options]="yearOptions()"
+            [modelValue]="visibleMonth().getFullYear().toString()"
+            (selectionChange)="handleYearChange($event)"
+          />
+        </div>
+
+        <jv-icon-button
+          icon="chevron-right"
+          variant="ghost"
+          [ariaLabel]="translation.translate('monthCalendar.nextMonth')"
+          (click)="shiftMonth(1)"
+        />
+      </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-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-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 }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", 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 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 }] }] } });
 
@@ -18368,784 +19645,346 @@ class JvChangePasswordPageComponent {
     </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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvChangePasswordPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'jv-login-page', standalone: true, imports: [ReactiveFormsModule, JvAlertComponent, JvButtonComponent, JvCardComponent, JvCheckboxComponent, JvFormContainerComponent, JvInputComponent, JvSectionComponent], template: `
+            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="Sign-in error" role="alert">{{ error() }}</jv-alert>
+          <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="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 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="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 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>
 
-          <div class="auth-inline-row">
-            <jv-checkbox formControlName="rememberMe" label="{{ rememberMeLabel() }}" />
-            <button type="button" class="auth-link" (click)="forgotPasswordClick.emit()">{{ forgotPasswordLabel() }}</button>
-          </div>
+          <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>
 
-          <jv-button type="submit" variant="primary" icon="check" [loading]="loading()">{{ submitLabel() }}</jv-button>
+          <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-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 }] }] } });
+  `, 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 JvAnnouncementService {
-    document = inject(DOCUMENT);
-    region = null;
-    announce(message, politeness = 'polite') {
-        if (!message.trim()) {
+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;
         }
-        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' });
-}
-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' });
+        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: JvFormatService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
+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"] }] } });
 
-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.
-        }
+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;
     }
-    setDensity(density) {
-        this.applyDensity(density);
+    registerOnChange(fn) {
+        this.onChange = fn;
     }
-    applyTheme(theme) {
-        this.theme.set(theme);
-        const root = this.document.documentElement;
-        root.dataset['theme'] = theme;
-        root.style.colorScheme = theme === 'dark' ? 'dark' : 'light';
+    registerOnTouched(fn) {
+        this.onTouched = fn;
     }
-    applyDensity(density) {
-        this.density.set(density);
-        this.document.documentElement.dataset['density'] = density;
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
     }
-    applyLanguage(language) {
-        this.document.documentElement.lang = language;
+    handleChange(event) {
+        const nextValue = event.target.checked;
+        this.value = nextValue;
+        this.onChange(nextValue);
     }
-    resolveInitialTheme(fallbackTheme) {
-        const savedTheme = this.readSavedTheme();
-        if (savedTheme) {
-            return savedTheme;
-        }
-        if (fallbackTheme === 'high-contrast') {
-            return fallbackTheme;
-        }
-        return this.prefersDarkMode() ? 'dark' : fallbackTheme;
+    handleBlur() {
+        this.onTouched();
     }
-    readSavedTheme() {
-        try {
-            const saved = this.document.defaultView?.localStorage.getItem(this.storageKey);
-            return this.isTheme(saved) ? saved : null;
-        }
-        catch {
-            return null;
+    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());
     }
-    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' });
+    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: JvThemeService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
+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"] }] } });
 
-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 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 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 },
-        });
+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: JvUiConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvUiConfigService, providedIn: 'root' });
+    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: JvUiConfigService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-const ES = {
-    'list.emptyMessage': 'No hay elementos',
-    'grid.emptyMessage': 'No hay registros',
-    'grid.noResults': 'No se encontraron resultados',
-    'grid.searchPlaceholder': 'Buscar...',
-    'grid.loading': 'Cargando datos...',
-    'grid.pageOf': 'de',
-    'grid.itemsPerPage': 'Registros por página',
-    'grid.selected': 'seleccionados',
-    'grid.selectAll': 'Seleccionar todo',
-    'grid.deselectAll': 'Deseleccionar todo',
-    'grid.sortAsc': 'Orden ascendente',
-    'grid.sortDesc': 'Orden descendente',
-    'grid.sortNone': 'Sin orden',
-    'grid.pageFirst': 'Primera página',
-    'grid.pagePrev': 'Página anterior',
-    'grid.pageNext': 'Página siguiente',
-    'grid.pageLast': 'Última página',
-    'grid.pageOfTotal': 'Página {page} de {total}',
-    'grid.itemsTotal': '{total} registros',
-    'grid.itemsShowing': 'Mostrando {start}-{end} de {total}',
-    'grid.exportCsv': 'CSV',
-    'grid.exportExcel': 'Excel',
-    'grid.filterPlaceholder': 'Filtrar...',
-    'grid.filterForColumn': 'Filtrar por ${column}',
-    'grid.actionsLabel': 'Acciones',
-    'pagination.pageLabel': 'Página {page}',
-    'pagination.itemsShowing': '{start}-{end} de {total}',
-    'pagination.of': 'de',
-    'pagination.firstPage': 'Primera página',
-    'pagination.prevPage': 'Página anterior',
-    'pagination.nextPage': 'Página siguiente',
-    'pagination.lastPage': 'Última página',
-    'pagination.itemsPerPage': 'Registros por página',
-    'datePicker.placeholder': 'Seleccione una fecha',
-    'datePicker.dialogTitle': 'Seleccionar fecha',
-    'datePicker.clear': 'Limpiar fecha',
-    'datePicker.close': 'Cerrar',
-    'datePicker.prevMonth': 'Mes anterior',
-    'datePicker.nextMonth': 'Mes siguiente',
-    'datePicker.selectionCleared': 'Seleccion de fecha limpiada',
-    'modalSelector.placeholder': 'Seleccione una opcion',
-    'modalSelector.searchPlaceholder': 'Buscar',
-    'modalSelector.emptyMessage': 'No se encontraron resultados',
-    'modalSelector.clear': 'Limpiar seleccion',
-    'modalSelector.close': 'Cerrar',
-    'modalSelector.results': '{count} resultados',
-    'modalSelector.selected': '{label} seleccionado',
-    'modalSelector.selectionCleared': 'Seleccion limpiada',
-    'fileInput.dropLabel': 'Arrastre archivos aqui o haga clic para seleccionarlos',
-    'fileInput.helperText': 'Compatible con seleccion multiple y arrastrar y soltar',
-    'fileInput.selectionSummary': '{count} de {max} archivos seleccionados',
-    'fileInput.invalidFiles': '{count} archivos no coinciden con el tipo permitido',
-    'fileInput.tooManyFiles': 'Solo se permiten hasta {max} archivos',
-    'fileInput.removeFile': 'Quitar archivo {name}',
-    'dialog.confirmTitle': 'Confirmar',
-    'dialog.confirm': 'Aceptar',
-    'dialog.cancel': 'Cancelar',
-    'common.expanded': 'Expandido',
-    'common.collapsed': 'Colapsado',
-    'slider.prevImage': 'Imagen anterior',
-    'slider.nextImage': 'Imagen siguiente',
-    'slider.thumbnailList': 'Miniaturas de imagenes',
-    'gallery.close': 'Cerrar',
-    'gallery.prevImage': 'Imagen anterior',
-    'gallery.nextImage': 'Imagen siguiente',
-};
-
-const EN = {
-    'list.emptyMessage': 'No items',
-    'grid.emptyMessage': 'No records found',
-    'grid.noResults': 'No results found',
-    'grid.searchPlaceholder': 'Search...',
-    'grid.loading': 'Loading data...',
-    'grid.pageOf': 'of',
-    'grid.itemsPerPage': 'Items per page',
-    'grid.selected': 'selected',
-    'grid.selectAll': 'Select all',
-    'grid.deselectAll': 'Deselect all',
-    'grid.sortAsc': 'Sort ascending',
-    'grid.sortDesc': 'Sort descending',
-    'grid.sortNone': 'No sort',
-    'grid.pageFirst': 'First page',
-    'grid.pagePrev': 'Previous page',
-    'grid.pageNext': 'Next page',
-    'grid.pageLast': 'Last page',
-    'grid.pageOfTotal': 'Page {page} of {total}',
-    'grid.itemsTotal': '{total} items',
-    'grid.itemsShowing': 'Showing {start}-{end} of {total}',
-    'grid.exportCsv': 'CSV',
-    'grid.exportExcel': 'Excel',
-    'grid.filterPlaceholder': 'Filter...',
-    'grid.filterForColumn': 'Filter by ${column}',
-    'grid.actionsLabel': 'Actions',
-    'pagination.pageLabel': 'Page {page}',
-    'pagination.itemsShowing': '{start}-{end} of {total}',
-    'pagination.of': 'of',
-    'pagination.firstPage': 'First page',
-    'pagination.prevPage': 'Previous page',
-    'pagination.nextPage': 'Next page',
-    'pagination.lastPage': 'Last page',
-    'pagination.itemsPerPage': 'Items per page',
-    'datePicker.placeholder': 'Select a date',
-    'datePicker.dialogTitle': 'Select date',
-    'datePicker.clear': 'Clear date',
-    'datePicker.close': 'Close',
-    'datePicker.prevMonth': 'Previous month',
-    'datePicker.nextMonth': 'Next month',
-    'datePicker.selectionCleared': 'Date selection cleared',
-    'modalSelector.placeholder': 'Select an option',
-    'modalSelector.searchPlaceholder': 'Search',
-    'modalSelector.emptyMessage': 'No results found',
-    'modalSelector.clear': 'Clear selection',
-    'modalSelector.close': 'Close',
-    'modalSelector.results': '{count} results',
-    'modalSelector.selected': '{label} selected',
-    'modalSelector.selectionCleared': 'Selection cleared',
-    'fileInput.dropLabel': 'Drag files here or click to choose them',
-    'fileInput.helperText': 'Supports multiple selection and drag and drop',
-    'fileInput.selectionSummary': '{count} of {max} files selected',
-    'fileInput.invalidFiles': '{count} files do not match the allowed type',
-    'fileInput.tooManyFiles': 'Only up to {max} files are allowed',
-    'fileInput.removeFile': 'Remove file {name}',
-    'dialog.confirmTitle': 'Confirm',
-    'dialog.confirm': 'Confirm',
-    'dialog.cancel': 'Cancel',
-    'common.expanded': 'Expanded',
-    'common.collapsed': 'Collapsed',
-    'slider.prevImage': 'Previous image',
-    'slider.nextImage': 'Next image',
-    'slider.thumbnailList': 'Image thumbnails',
-    'gallery.close': 'Close',
-    'gallery.prevImage': 'Previous image',
-    'gallery.nextImage': 'Next image',
-};
-
-const JV_LOCALE_DICTIONARIES = {
-    es: ES,
-    en: EN,
-};
-const JV_DEFAULT_LOCALE = 'es';
+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 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));
-            }
+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 +20235,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 */ []));
@@ -19815,104 +20643,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);
@@ -21872,6 +22602,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 });
@@ -24899,5 +25836,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