@devjuliovilla/jv-ui 1.12.0 → 1.13.0

package/fesm2022/devjuliovilla-jv-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 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 { input, computed, Component, inject, signal, Injectable, InjectionToken, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, Directive, contentChild, output, effect, forwardRef, viewChild, untracked, contentChildren, HostListener, viewChildren, numberAttribute, afterNextRender, Renderer2, ElementRef } from '@angular/core';
 import { DOCUMENT, NgTemplateOutlet, CommonModule } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormBuilder, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
@@ -18178,6 +18178,8 @@ const ES = {
     'monthCalendar.today': 'Hoy',
     'monthCalendar.prevMonth': 'Mes anterior',
     'monthCalendar.nextMonth': 'Mes siguiente',
+    'monthCalendar.prevYear': 'Ano anterior',
+    'monthCalendar.nextYear': 'Ano siguiente',
     'modalSelector.placeholder': 'Seleccione una opcion',
     'modalSelector.searchPlaceholder': 'Buscar',
     'modalSelector.emptyMessage': 'No se encontraron resultados',
@@ -18255,6 +18257,8 @@ const EN = {
     'monthCalendar.today': 'Today',
     'monthCalendar.prevMonth': 'Previous month',
     'monthCalendar.nextMonth': 'Next month',
+    'monthCalendar.prevYear': 'Previous year',
+    'monthCalendar.nextYear': 'Next year',
     'modalSelector.placeholder': 'Select an option',
     'modalSelector.searchPlaceholder': 'Search',
     'modalSelector.emptyMessage': 'No results found',
@@ -18843,6 +18847,7 @@ class JvSelectComponent {
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
     describedBy = input('', ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     inputId = input(`jv-select-${++selectIdSequence}`, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
     modelValue = input('', ...(ngDevMode ? [{ debugName: "modelValue" }] : /* istanbul ignore next */ []));
     selectionChange = output();
@@ -18873,7 +18878,7 @@ class JvSelectComponent {
         this.onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvSelectComponent, isStandalone: true, selector: "jv-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "describedBy", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, modelValue: { classPropertyName: "modelValue", publicName: "modelValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvSelectComponent, isStandalone: true, selector: "jv-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "describedBy", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, modelValue: { classPropertyName: "modelValue", publicName: "modelValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => JvSelectComponent),
@@ -18888,16 +18893,16 @@ class JvSelectComponent {
       [required]="required()"
       [attr.aria-invalid]="invalid() ? 'true' : null"
       [attr.aria-describedby]="describedBy() || null"
-      [value]="currentValue()"
+      [attr.aria-label]="ariaLabel() || null"
       (change)="handleChange($event)"
       (blur)="handleBlur()"
     >
       @if (placeholder()) {
-        <option value="" [disabled]="required()">{{ placeholder() }}</option>
+        <option value="" [disabled]="required()" [selected]="currentValue() === ''">{{ placeholder() }}</option>
       }
 
       @for (option of options(); track option.label + ':' + option.value) {
-        <option [value]="option.value" [disabled]="option.disabled ?? false">{{ option.label }}</option>
+        <option [value]="option.value" [disabled]="option.disabled ?? false" [selected]="option.value === currentValue()">{{ option.label }}</option>
       }
     </select>
   `, isInline: true, styles: [".jv-select{width:100%;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);background:var(--jv-color-surface);color:var(--jv-color-foreground)}.jv-select.is-invalid{border-color:var(--jv-color-danger)}\n"] });
@@ -18919,20 +18924,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       [required]="required()"
       [attr.aria-invalid]="invalid() ? 'true' : null"
       [attr.aria-describedby]="describedBy() || null"
-      [value]="currentValue()"
+      [attr.aria-label]="ariaLabel() || null"
       (change)="handleChange($event)"
       (blur)="handleBlur()"
     >
       @if (placeholder()) {
-        <option value="" [disabled]="required()">{{ placeholder() }}</option>
+        <option value="" [disabled]="required()" [selected]="currentValue() === ''">{{ placeholder() }}</option>
       }
 
       @for (option of options(); track option.label + ':' + option.value) {
-        <option [value]="option.value" [disabled]="option.disabled ?? false">{{ option.label }}</option>
+        <option [value]="option.value" [disabled]="option.disabled ?? false" [selected]="option.value === currentValue()">{{ option.label }}</option>
       }
     </select>
   `, styles: [".jv-select{width:100%;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);background:var(--jv-color-surface);color:var(--jv-color-foreground)}.jv-select.is-invalid{border-color:var(--jv-color-danger)}\n"] }]
-        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "describedBy", required: false }] }], 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"] }] } });
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "describedBy", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], modelValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "modelValue", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
 
 class JvMonthCalendarDayDirective {
     templateRef;
@@ -18956,13 +18961,27 @@ class JvMonthCalendarComponent {
     gridRootRef = viewChild('gridRoot', ...(ngDevMode ? [{ debugName: "gridRootRef" }] : /* istanbul ignore next */ []));
     customDayTemplate = contentChild(JvMonthCalendarDayDirective, ...(ngDevMode ? [{ debugName: "customDayTemplate" }] : /* istanbul ignore next */ []));
     valueInput = input(undefined, { ...(ngDevMode ? { debugName: "valueInput" } : /* istanbul ignore next */ {}), alias: 'value' });
+    visibleMonthInput = input(undefined, { ...(ngDevMode ? { debugName: "visibleMonthInput" } : /* istanbul ignore next */ {}), alias: 'visibleMonth' });
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    monthLabel = input('', ...(ngDevMode ? [{ debugName: "monthLabel" }] : /* istanbul ignore next */ []));
+    yearLabel = input('', ...(ngDevMode ? [{ debugName: "yearLabel" }] : /* istanbul ignore next */ []));
+    minYear = input(undefined, ...(ngDevMode ? [{ debugName: "minYear" }] : /* istanbul ignore next */ []));
+    maxYear = input(undefined, ...(ngDevMode ? [{ debugName: "maxYear" }] : /* istanbul ignore next */ []));
+    navigation = input(null, ...(ngDevMode ? [{ debugName: "navigation" }] : /* istanbul ignore next */ []));
     dayMeta = input([], ...(ngDevMode ? [{ debugName: "dayMeta" }] : /* istanbul ignore next */ []));
     selectionChange = output();
     visibleMonthChange = output();
     visibleMonth = signal(firstOfMonth$1(new Date()), ...(ngDevMode ? [{ debugName: "visibleMonth" }] : /* istanbul ignore next */ []));
     focusedDate = signal(startOfDay$1(new Date()), ...(ngDevMode ? [{ debugName: "focusedDate" }] : /* istanbul ignore next */ []));
     resolvedAriaLabel = computed(() => this.ariaLabel() || this.translation.translate('monthCalendar.title'), ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    resolvedMonthLabel = computed(() => this.monthLabel() || 'Month', ...(ngDevMode ? [{ debugName: "resolvedMonthLabel" }] : /* istanbul ignore next */ []));
+    resolvedYearLabel = computed(() => this.yearLabel() || 'Year', ...(ngDevMode ? [{ debugName: "resolvedYearLabel" }] : /* istanbul ignore next */ []));
+    resolvedNavigation = computed(() => ({
+        previousMonth: this.navigation()?.previousMonth ?? true,
+        nextMonth: this.navigation()?.nextMonth ?? true,
+        previousYear: this.navigation()?.previousYear ?? false,
+        nextYear: this.navigation()?.nextYear ?? false,
+    }), ...(ngDevMode ? [{ debugName: "resolvedNavigation" }] : /* istanbul ignore next */ []));
     monthOptions = computed(() => {
         const formatter = new Intl.DateTimeFormat(this.formatService.formatLocale(), { month: 'long' });
         return Array.from({ length: 12 }, (_, month) => ({
@@ -18971,9 +18990,9 @@ class JvMonthCalendarComponent {
         }));
     }, ...(ngDevMode ? [{ debugName: "monthOptions" }] : /* istanbul ignore next */ []));
     yearOptions = computed(() => {
-        const currentYear = new Date().getFullYear();
-        return Array.from({ length: 21 }, (_, index) => {
-            const year = currentYear - 10 + index;
+        const [startYear, endYear] = this.yearBounds();
+        return Array.from({ length: endYear - startYear + 1 }, (_, index) => {
+            const year = startYear + index;
             return { label: String(year), value: String(year) };
         });
     }, ...(ngDevMode ? [{ debugName: "yearOptions" }] : /* istanbul ignore next */ []));
@@ -19015,9 +19034,22 @@ class JvMonthCalendarComponent {
         });
     }, ...(ngDevMode ? [{ debugName: "calendarCells" }] : /* istanbul ignore next */ []));
     selectedDate = computed(() => normalizeDate(this.valueInput()), ...(ngDevMode ? [{ debugName: "selectedDate" }] : /* istanbul ignore next */ []));
+    visibleMonthValue = computed(() => normalizeMonth(this.visibleMonthInput()), ...(ngDevMode ? [{ debugName: "visibleMonthValue" }] : /* istanbul ignore next */ []));
+    yearBounds = computed(() => {
+        const fallbackYear = new Date().getFullYear();
+        const minYear = this.minYear() ?? fallbackYear - 10;
+        const maxYear = this.maxYear() ?? fallbackYear + 10;
+        return minYear <= maxYear ? [minYear, maxYear] : [maxYear, minYear];
+    }, ...(ngDevMode ? [{ debugName: "yearBounds" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
+            const explicitVisibleMonth = this.visibleMonthValue();
             const selectedDate = this.selectedDate();
+            if (explicitVisibleMonth) {
+                this.focusedDate.set(this.focusDateForMonth(explicitVisibleMonth, untracked(() => this.focusedDate())));
+                this.visibleMonth.set(explicitVisibleMonth);
+                return;
+            }
             if (!selectedDate) {
                 return;
             }
@@ -19035,6 +19067,10 @@ class JvMonthCalendarComponent {
         this.setVisibleMonth(new Date(this.visibleMonth().getFullYear(), this.visibleMonth().getMonth() + offset, 1));
         this.focusDateWithinVisibleMonth(this.focusedDate());
     }
+    shiftYear(offset) {
+        this.setVisibleMonth(new Date(this.visibleMonth().getFullYear() + offset, this.visibleMonth().getMonth(), 1));
+        this.focusDateWithinVisibleMonth(this.focusedDate());
+    }
     handleMonthChange(value) {
         const current = this.visibleMonth();
         this.setVisibleMonth(new Date(current.getFullYear(), Number(value), 1));
@@ -19121,46 +19157,76 @@ class JvMonthCalendarComponent {
         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()))));
+        const nextDate = this.focusDateForMonth(this.visibleMonth(), date);
         this.focusedDate.set(nextDate);
         queueMicrotask(() => this.focusDateButton(nextDate));
     }
+    focusDateForMonth(month, date) {
+        return startOfDay$1(new Date(month.getFullYear(), month.getMonth(), Math.min(date.getDate(), daysInMonth$1(month.getFullYear(), month.getMonth()))));
+    }
     focusDateButton(date) {
         const button = this.gridRootRef()?.nativeElement
             .querySelector(`[data-jv-date="${toDateKey(date)}"]`);
         button?.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvMonthCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvMonthCalendarComponent, isStandalone: true, selector: "jv-month-calendar", inputs: { valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, 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: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvMonthCalendarComponent, isStandalone: true, selector: "jv-month-calendar", inputs: { valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, visibleMonthInput: { classPropertyName: "visibleMonthInput", publicName: "visibleMonth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, monthLabel: { classPropertyName: "monthLabel", publicName: "monthLabel", isSignal: true, isRequired: false, transformFunction: null }, yearLabel: { classPropertyName: "yearLabel", publicName: "yearLabel", isSignal: true, isRequired: false, transformFunction: null }, minYear: { classPropertyName: "minYear", publicName: "minYear", isSignal: true, isRequired: false, transformFunction: null }, maxYear: { classPropertyName: "maxYear", publicName: "maxYear", isSignal: true, isRequired: false, transformFunction: null }, navigation: { classPropertyName: "navigation", publicName: "navigation", isSignal: true, isRequired: false, transformFunction: null }, dayMeta: { classPropertyName: "dayMeta", publicName: "dayMeta", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", visibleMonthChange: "visibleMonthChange" }, queries: [{ propertyName: "customDayTemplate", first: true, predicate: JvMonthCalendarDayDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "gridRootRef", first: true, predicate: ["gridRoot"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <section class="jv-month-calendar" [attr.aria-label]="resolvedAriaLabel()">
       <div class="jv-month-calendar-toolbar">
-        <jv-icon-button
-          icon="chevron-left"
-          variant="ghost"
-          [ariaLabel]="translation.translate('monthCalendar.prevMonth')"
-          (click)="shiftMonth(-1)"
-        />
+        <div class="jv-month-calendar-nav-group jv-month-calendar-nav-group--start">
+          @if (resolvedNavigation().previousYear) {
+            <jv-icon-button
+              icon="chevrons-left"
+              variant="ghost"
+              [ariaLabel]="translation.translate('monthCalendar.prevYear')"
+              (click)="shiftYear(-1)"
+            />
+          }
+
+          @if (resolvedNavigation().previousMonth) {
+            <jv-icon-button
+              icon="chevron-left"
+              variant="ghost"
+              [ariaLabel]="translation.translate('monthCalendar.prevMonth')"
+              (click)="shiftMonth(-1)"
+            />
+          }
+        </div>
 
         <div class="jv-month-calendar-selects">
           <jv-select
             [options]="monthOptions()"
+            [ariaLabel]="resolvedMonthLabel()"
             [modelValue]="visibleMonth().getMonth().toString()"
             (selectionChange)="handleMonthChange($event)"
           />
           <jv-select
             [options]="yearOptions()"
+            [ariaLabel]="resolvedYearLabel()"
             [modelValue]="visibleMonth().getFullYear().toString()"
             (selectionChange)="handleYearChange($event)"
           />
         </div>
 
-        <jv-icon-button
-          icon="chevron-right"
-          variant="ghost"
-          [ariaLabel]="translation.translate('monthCalendar.nextMonth')"
-          (click)="shiftMonth(1)"
-        />
+        <div class="jv-month-calendar-nav-group jv-month-calendar-nav-group--end">
+          @if (resolvedNavigation().nextMonth) {
+            <jv-icon-button
+              icon="chevron-right"
+              variant="ghost"
+              [ariaLabel]="translation.translate('monthCalendar.nextMonth')"
+              (click)="shiftMonth(1)"
+            />
+          }
+
+          @if (resolvedNavigation().nextYear) {
+            <jv-icon-button
+              icon="chevrons-right"
+              variant="ghost"
+              [ariaLabel]="translation.translate('monthCalendar.nextYear')"
+              (click)="shiftYear(1)"
+            />
+          }
+        </div>
       </div>
 
       <div class="jv-month-calendar-actions">
@@ -19204,39 +19270,67 @@ class JvMonthCalendarComponent {
         }
       </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"] }] });
+  `, isInline: true, styles: [".jv-month-calendar{display:grid;gap:var(--jv-spacing-md);padding:var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-lg);background:var(--jv-color-surface)}.jv-month-calendar-toolbar,.jv-month-calendar-nav-group,.jv-month-calendar-selects,.jv-month-calendar-weekdays,.jv-month-calendar-grid,.jv-month-calendar-actions{display:grid;gap:var(--jv-spacing-sm)}.jv-month-calendar-toolbar{grid-template-columns:auto 1fr auto;align-items:center}.jv-month-calendar-nav-group{display:inline-flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-month-calendar-nav-group--end{justify-content:end}.jv-month-calendar-selects{grid-template-columns:1fr 1fr}.jv-month-calendar-actions{justify-content:end}.jv-month-calendar-today{min-height:2.25rem;padding:0 var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:999px;background:var(--jv-color-surface-muted);color:var(--jv-color-foreground);font:inherit;cursor:pointer}.jv-month-calendar-today:hover,.jv-month-calendar-today:focus-visible{border-color:var(--jv-color-primary);outline:none}.jv-month-calendar-weekdays,.jv-month-calendar-grid{grid-template-columns:repeat(7,minmax(0,1fr))}.jv-month-calendar-weekdays span{text-align:center;font-size:.8125rem;font-weight:600;color:var(--jv-color-foreground-muted)}.jv-month-calendar-day{position:relative;min-height:5rem;display:grid;align-content:start;justify-items:start;gap:var(--jv-spacing-xs);padding:var(--jv-spacing-sm);border:1px solid transparent;border-radius:var(--jv-radius-md);background:transparent;color:var(--jv-color-foreground);text-align:left;font:inherit;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease}.jv-month-calendar-day:hover,.jv-month-calendar-day:focus-visible{background:var(--jv-color-surface-muted);outline:none}.jv-month-calendar-day--outside{color:var(--jv-color-foreground-muted)}.jv-month-calendar-day--today{border-color:var(--jv-color-primary)}.jv-month-calendar-day--selected{background:color-mix(in srgb,var(--jv-color-primary) 14%,var(--jv-color-surface));border-color:var(--jv-color-primary)}.jv-month-calendar-day-number{font-weight:700}.jv-month-calendar-day-count,.jv-month-calendar-day-dot{display:inline-flex;align-items:center;justify-content:center;border-radius:999px}.jv-month-calendar-day-count{min-width:1.5rem;min-height:1.5rem;padding:0 .375rem;font-size:.75rem;font-weight:700}.jv-month-calendar-day-dot{width:.5rem;height:.5rem;margin-top:auto}.jv-month-calendar-marker--primary{background:color-mix(in srgb,var(--jv-color-primary) 18%,var(--jv-color-surface));color:var(--jv-color-primary)}.jv-month-calendar-marker--secondary,.jv-month-calendar-marker--neutral{background:var(--jv-color-surface-muted);color:var(--jv-color-foreground)}.jv-month-calendar-marker--success{background:color-mix(in srgb,var(--jv-color-success) 18%,var(--jv-color-surface));color:var(--jv-color-success)}.jv-month-calendar-marker--warning{background:color-mix(in srgb,var(--jv-color-warning) 20%,var(--jv-color-surface));color:#8a4b00}.jv-month-calendar-marker--danger{background:color-mix(in srgb,var(--jv-color-danger) 18%,var(--jv-color-surface));color:var(--jv-color-danger)}.jv-month-calendar-marker--info{background:color-mix(in srgb,var(--jv-color-info) 18%,var(--jv-color-surface));color:var(--jv-color-info)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: JvIconButtonComponent, selector: "jv-icon-button", inputs: ["icon", "ariaLabel", "variant", "disabled"] }, { kind: "component", type: JvSelectComponent, selector: "jv-select", inputs: ["options", "placeholder", "required", "invalid", "describedBy", "ariaLabel", "inputId", "modelValue"], outputs: ["selectionChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvMonthCalendarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'jv-month-calendar', standalone: true, imports: [NgTemplateOutlet, JvIconButtonComponent, JvSelectComponent], template: `
     <section class="jv-month-calendar" [attr.aria-label]="resolvedAriaLabel()">
       <div class="jv-month-calendar-toolbar">
-        <jv-icon-button
-          icon="chevron-left"
-          variant="ghost"
-          [ariaLabel]="translation.translate('monthCalendar.prevMonth')"
-          (click)="shiftMonth(-1)"
-        />
+        <div class="jv-month-calendar-nav-group jv-month-calendar-nav-group--start">
+          @if (resolvedNavigation().previousYear) {
+            <jv-icon-button
+              icon="chevrons-left"
+              variant="ghost"
+              [ariaLabel]="translation.translate('monthCalendar.prevYear')"
+              (click)="shiftYear(-1)"
+            />
+          }
+
+          @if (resolvedNavigation().previousMonth) {
+            <jv-icon-button
+              icon="chevron-left"
+              variant="ghost"
+              [ariaLabel]="translation.translate('monthCalendar.prevMonth')"
+              (click)="shiftMonth(-1)"
+            />
+          }
+        </div>
 
         <div class="jv-month-calendar-selects">
           <jv-select
             [options]="monthOptions()"
+            [ariaLabel]="resolvedMonthLabel()"
             [modelValue]="visibleMonth().getMonth().toString()"
             (selectionChange)="handleMonthChange($event)"
           />
           <jv-select
             [options]="yearOptions()"
+            [ariaLabel]="resolvedYearLabel()"
             [modelValue]="visibleMonth().getFullYear().toString()"
             (selectionChange)="handleYearChange($event)"
           />
         </div>
 
-        <jv-icon-button
-          icon="chevron-right"
-          variant="ghost"
-          [ariaLabel]="translation.translate('monthCalendar.nextMonth')"
-          (click)="shiftMonth(1)"
-        />
+        <div class="jv-month-calendar-nav-group jv-month-calendar-nav-group--end">
+          @if (resolvedNavigation().nextMonth) {
+            <jv-icon-button
+              icon="chevron-right"
+              variant="ghost"
+              [ariaLabel]="translation.translate('monthCalendar.nextMonth')"
+              (click)="shiftMonth(1)"
+            />
+          }
+
+          @if (resolvedNavigation().nextYear) {
+            <jv-icon-button
+              icon="chevrons-right"
+              variant="ghost"
+              [ariaLabel]="translation.translate('monthCalendar.nextYear')"
+              (click)="shiftYear(1)"
+            />
+          }
+        </div>
       </div>
 
       <div class="jv-month-calendar-actions">
@@ -19280,8 +19374,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         }
       </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"] }] } });
+  `, styles: [".jv-month-calendar{display:grid;gap:var(--jv-spacing-md);padding:var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-lg);background:var(--jv-color-surface)}.jv-month-calendar-toolbar,.jv-month-calendar-nav-group,.jv-month-calendar-selects,.jv-month-calendar-weekdays,.jv-month-calendar-grid,.jv-month-calendar-actions{display:grid;gap:var(--jv-spacing-sm)}.jv-month-calendar-toolbar{grid-template-columns:auto 1fr auto;align-items:center}.jv-month-calendar-nav-group{display:inline-flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-month-calendar-nav-group--end{justify-content:end}.jv-month-calendar-selects{grid-template-columns:1fr 1fr}.jv-month-calendar-actions{justify-content:end}.jv-month-calendar-today{min-height:2.25rem;padding:0 var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:999px;background:var(--jv-color-surface-muted);color:var(--jv-color-foreground);font:inherit;cursor:pointer}.jv-month-calendar-today:hover,.jv-month-calendar-today:focus-visible{border-color:var(--jv-color-primary);outline:none}.jv-month-calendar-weekdays,.jv-month-calendar-grid{grid-template-columns:repeat(7,minmax(0,1fr))}.jv-month-calendar-weekdays span{text-align:center;font-size:.8125rem;font-weight:600;color:var(--jv-color-foreground-muted)}.jv-month-calendar-day{position:relative;min-height:5rem;display:grid;align-content:start;justify-items:start;gap:var(--jv-spacing-xs);padding:var(--jv-spacing-sm);border:1px solid transparent;border-radius:var(--jv-radius-md);background:transparent;color:var(--jv-color-foreground);text-align:left;font:inherit;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease}.jv-month-calendar-day:hover,.jv-month-calendar-day:focus-visible{background:var(--jv-color-surface-muted);outline:none}.jv-month-calendar-day--outside{color:var(--jv-color-foreground-muted)}.jv-month-calendar-day--today{border-color:var(--jv-color-primary)}.jv-month-calendar-day--selected{background:color-mix(in srgb,var(--jv-color-primary) 14%,var(--jv-color-surface));border-color:var(--jv-color-primary)}.jv-month-calendar-day-number{font-weight:700}.jv-month-calendar-day-count,.jv-month-calendar-day-dot{display:inline-flex;align-items:center;justify-content:center;border-radius:999px}.jv-month-calendar-day-count{min-width:1.5rem;min-height:1.5rem;padding:0 .375rem;font-size:.75rem;font-weight:700}.jv-month-calendar-day-dot{width:.5rem;height:.5rem;margin-top:auto}.jv-month-calendar-marker--primary{background:color-mix(in srgb,var(--jv-color-primary) 18%,var(--jv-color-surface));color:var(--jv-color-primary)}.jv-month-calendar-marker--secondary,.jv-month-calendar-marker--neutral{background:var(--jv-color-surface-muted);color:var(--jv-color-foreground)}.jv-month-calendar-marker--success{background:color-mix(in srgb,var(--jv-color-success) 18%,var(--jv-color-surface));color:var(--jv-color-success)}.jv-month-calendar-marker--warning{background:color-mix(in srgb,var(--jv-color-warning) 20%,var(--jv-color-surface));color:#8a4b00}.jv-month-calendar-marker--danger{background:color-mix(in srgb,var(--jv-color-danger) 18%,var(--jv-color-surface));color:var(--jv-color-danger)}.jv-month-calendar-marker--info{background:color-mix(in srgb,var(--jv-color-info) 18%,var(--jv-color-surface));color:var(--jv-color-info)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { gridRootRef: [{ type: i0.ViewChild, args: ['gridRoot', { isSignal: true }] }], customDayTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => JvMonthCalendarDayDirective), { isSignal: true }] }], valueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], visibleMonthInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibleMonth", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], monthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthLabel", required: false }] }], yearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "yearLabel", required: false }] }], minYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "minYear", required: false }] }], maxYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxYear", required: false }] }], navigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigation", required: false }] }], dayMeta: [{ type: i0.Input, args: [{ isSignal: true, alias: "dayMeta", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], visibleMonthChange: [{ type: i0.Output, args: ["visibleMonthChange"] }] } });
 function normalizeDate(value) {
     if (!value) {
         return null;
@@ -19289,6 +19383,10 @@ function normalizeDate(value) {
     const date = value instanceof Date ? value : new Date(value);
     return Number.isNaN(date.getTime()) ? null : startOfDay$1(date);
 }
+function normalizeMonth(value) {
+    const date = normalizeDate(value);
+    return date ? firstOfMonth$1(date) : null;
+}
 function daysInMonth$1(year, month) {
     return new Date(year, month + 1, 0).getDate();
 }
@@ -20533,6 +20631,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 class JvDialogComponent {
     document = inject(DOCUMENT);
     panelRef = viewChild('panel', ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
+    previouslyFocusedElement = null;
     open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     title = input('Dialog', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
     closed = output();
@@ -20541,8 +20640,11 @@ class JvDialogComponent {
     constructor() {
         effect(() => {
             if (this.open()) {
+                this.previouslyFocusedElement = this.document.activeElement instanceof HTMLElement ? this.document.activeElement : null;
                 queueMicrotask(() => this.focusInitialElement());
+                return;
             }
+            this.restoreFocus();
         });
     }
     handleDocumentKeydown(event) {
@@ -20569,6 +20671,10 @@ class JvDialogComponent {
     backdropClose() {
         this.closed.emit();
     }
+    restoreFocus() {
+        this.previouslyFocusedElement?.focus();
+        this.previouslyFocusedElement = null;
+    }
     trapFocus(event) {
         const focusable = this.getFocusableElements();
         const panel = this.panelRef()?.nativeElement;
@@ -20600,7 +20706,7 @@ class JvDialogComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvDialogComponent, isStandalone: true, selector: "jv-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { listeners: { "document:keydown": "handleDocumentKeydown($event)" } }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (open()) {
       <div class="jv-dialog-backdrop" (click)="backdropClose()">
-        <div class="jv-dialog-panel" role="dialog" aria-modal="true" tabindex="-1" [attr.aria-labelledby]="titleId" [attr.aria-describedby]="descriptionId" (click)="$event.stopPropagation()" #panel>
+        <div class="jv-dialog-panel" role="dialog" aria-modal="true" tabindex="-1" [attr.aria-labelledby]="titleId" [attr.aria-describedby]="descriptionId" (click)="$event.stopPropagation()" #panel>
           <header class="jv-dialog-header">
             <h2 [id]="titleId">{{ title() }}</h2>
           </header>
@@ -20622,7 +20728,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             args: [{ selector: 'jv-dialog', standalone: true, template: `
     @if (open()) {
       <div class="jv-dialog-backdrop" (click)="backdropClose()">
-        <div class="jv-dialog-panel" role="dialog" aria-modal="true" tabindex="-1" [attr.aria-labelledby]="titleId" [attr.aria-describedby]="descriptionId" (click)="$event.stopPropagation()" #panel>
+        <div class="jv-dialog-panel" role="dialog" aria-modal="true" tabindex="-1" [attr.aria-labelledby]="titleId" [attr.aria-describedby]="descriptionId" (click)="$event.stopPropagation()" #panel>
           <header class="jv-dialog-header">
             <h2 [id]="titleId">{{ title() }}</h2>
           </header>
@@ -20932,7 +21038,7 @@ class JvDatePickerComponent {
         <jv-button variant="outline" (click)="closeDialog()">{{ translation.translate('datePicker.close') }}</jv-button>
       </div>
     </jv-dialog>
-  `, isInline: true, styles: [".jv-date-picker-trigger{width:100%;min-height:var(--jv-density-control-height);display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-sm);padding:0 var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);background:var(--jv-color-surface);color:var(--jv-color-foreground);text-align:left;font:inherit;cursor:pointer}.jv-date-picker-trigger.is-invalid{border-color:var(--jv-color-danger)}.jv-date-picker-trigger:disabled{opacity:.7;cursor:not-allowed}.jv-date-picker-trigger:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:1px}.jv-date-picker-placeholder{color:var(--jv-color-foreground-muted)}.jv-date-picker-dialog,.jv-date-picker-actions{display:grid;gap:var(--jv-spacing-md)}.jv-date-picker-toolbar,.jv-date-picker-selects,.jv-date-picker-weekdays,.jv-date-picker-grid{display:grid;gap:var(--jv-spacing-sm)}.jv-date-picker-toolbar{grid-template-columns:auto 1fr auto;align-items:center}.jv-date-picker-selects{grid-template-columns:1fr 1fr}.jv-date-picker-weekdays,.jv-date-picker-grid{grid-template-columns:repeat(7,minmax(0,1fr))}.jv-date-picker-weekdays span{text-align:center;font-size:.8125rem;font-weight:600;color:var(--jv-color-foreground-muted)}.jv-date-picker-day{min-height:2.5rem;border:1px solid transparent;border-radius:var(--jv-radius-md);background:transparent;color:var(--jv-color-foreground);font:inherit;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease}.jv-date-picker-day:hover,.jv-date-picker-day:focus-visible{background:var(--jv-color-surface-muted)}.jv-date-picker-day:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:1px}.jv-date-picker-day--outside{color:var(--jv-color-foreground-muted)}.jv-date-picker-day--today{border-color:var(--jv-color-primary)}.jv-date-picker-day--selected{background:var(--jv-color-primary);color:#fff}\n"], dependencies: [{ kind: "component", type: JvButtonComponent, selector: "jv-button", inputs: ["type", "variant", "icon", "iconPosition", "loading", "disabled"] }, { kind: "component", type: JvDialogComponent, selector: "jv-dialog", inputs: ["open", "title"], outputs: ["closed"] }, { kind: "component", type: JvFormContainerComponent, selector: "jv-form-container", inputs: ["label", "hint", "error", "inputId", "hintId", "errorId", "required", "invalid"] }, { kind: "component", type: JvIconButtonComponent, selector: "jv-icon-button", inputs: ["icon", "ariaLabel", "variant", "disabled"] }, { kind: "component", type: JvIconComponent, selector: "jv-icon", inputs: ["name", "size", "strokeWidth", "decorative", "ariaLabel"] }, { kind: "component", type: JvSelectComponent, selector: "jv-select", inputs: ["options", "placeholder", "required", "invalid", "describedBy", "inputId", "modelValue"], outputs: ["selectionChange"] }] });
+  `, isInline: true, styles: [".jv-date-picker-trigger{width:100%;min-height:var(--jv-density-control-height);display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-sm);padding:0 var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);background:var(--jv-color-surface);color:var(--jv-color-foreground);text-align:left;font:inherit;cursor:pointer}.jv-date-picker-trigger.is-invalid{border-color:var(--jv-color-danger)}.jv-date-picker-trigger:disabled{opacity:.7;cursor:not-allowed}.jv-date-picker-trigger:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:1px}.jv-date-picker-placeholder{color:var(--jv-color-foreground-muted)}.jv-date-picker-dialog,.jv-date-picker-actions{display:grid;gap:var(--jv-spacing-md)}.jv-date-picker-toolbar,.jv-date-picker-selects,.jv-date-picker-weekdays,.jv-date-picker-grid{display:grid;gap:var(--jv-spacing-sm)}.jv-date-picker-toolbar{grid-template-columns:auto 1fr auto;align-items:center}.jv-date-picker-selects{grid-template-columns:1fr 1fr}.jv-date-picker-weekdays,.jv-date-picker-grid{grid-template-columns:repeat(7,minmax(0,1fr))}.jv-date-picker-weekdays span{text-align:center;font-size:.8125rem;font-weight:600;color:var(--jv-color-foreground-muted)}.jv-date-picker-day{min-height:2.5rem;border:1px solid transparent;border-radius:var(--jv-radius-md);background:transparent;color:var(--jv-color-foreground);font:inherit;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease}.jv-date-picker-day:hover,.jv-date-picker-day:focus-visible{background:var(--jv-color-surface-muted)}.jv-date-picker-day:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:1px}.jv-date-picker-day--outside{color:var(--jv-color-foreground-muted)}.jv-date-picker-day--today{border-color:var(--jv-color-primary)}.jv-date-picker-day--selected{background:var(--jv-color-primary);color:#fff}\n"], dependencies: [{ kind: "component", type: JvButtonComponent, selector: "jv-button", inputs: ["type", "variant", "icon", "iconPosition", "loading", "disabled"] }, { kind: "component", type: JvDialogComponent, selector: "jv-dialog", inputs: ["open", "title"], outputs: ["closed"] }, { kind: "component", type: JvFormContainerComponent, selector: "jv-form-container", inputs: ["label", "hint", "error", "inputId", "hintId", "errorId", "required", "invalid"] }, { kind: "component", type: JvIconButtonComponent, selector: "jv-icon-button", inputs: ["icon", "ariaLabel", "variant", "disabled"] }, { kind: "component", type: JvIconComponent, selector: "jv-icon", inputs: ["name", "size", "strokeWidth", "decorative", "ariaLabel"] }, { kind: "component", type: JvSelectComponent, selector: "jv-select", inputs: ["options", "placeholder", "required", "invalid", "describedBy", "ariaLabel", "inputId", "modelValue"], outputs: ["selectionChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvDatePickerComponent, decorators: [{
             type: Component,
@@ -21212,7 +21318,7 @@ class JvFileInputComponent {
         [class.jv-file-input-dropzone--dragover]="dragActive()"
         [class.jv-file-input-dropzone--invalid]="invalid()"
         role="button"
-        tabindex="0"
+        [attr.tabindex]="disabled() ? -1 : 0"
         [attr.aria-disabled]="disabled() ? 'true' : 'false'"
         [attr.aria-label]="dropzoneAriaLabel()"
         (click)="openFileDialog()"
@@ -21287,7 +21393,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         [class.jv-file-input-dropzone--dragover]="dragActive()"
         [class.jv-file-input-dropzone--invalid]="invalid()"
         role="button"
-        tabindex="0"
+        [attr.tabindex]="disabled() ? -1 : 0"
         [attr.aria-disabled]="disabled() ? 'true' : 'false'"
         [attr.aria-label]="dropzoneAriaLabel()"
         (click)="openFileDialog()"
@@ -21335,6 +21441,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         }], propDecorators: { nativeInputRef: [{ type: i0.ViewChild, args: ['nativeInput', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "describedBy", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], filesInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }], filesChange: [{ type: i0.Output, args: ["filesChange"] }], filesRejected: [{ type: i0.Output, args: ["filesRejected"] }] } });
 
 class JvListComponent {
+    listId = input('', ...(ngDevMode ? [{ debugName: "listId" }] : /* istanbul ignore next */ []));
     role = input('list', ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
     ariaRole = input(null, ...(ngDevMode ? [{ debugName: "ariaRole" }] : /* istanbul ignore next */ []));
     variant = input(null, ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
@@ -21345,13 +21452,14 @@ class JvListComponent {
     }, ...(ngDevMode ? [{ debugName: "variantClass" }] : /* istanbul ignore next */ []));
     resolvedRole = computed(() => this.ariaRole() ?? (this.role() === 'navigation' ? 'list' : null), ...(ngDevMode ? [{ debugName: "resolvedRole" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: JvListComponent, isStandalone: true, selector: "jv-list", inputs: { role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaRole: { classPropertyName: "ariaRole", publicName: "ariaRole", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <ul
-      class="jv-list"
-      [class]="variantClass()"
-      [attr.role]="resolvedRole()"
-      [attr.aria-label]="ariaLabel()"
-    >
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: JvListComponent, isStandalone: true, selector: "jv-list", inputs: { listId: { classPropertyName: "listId", publicName: "listId", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaRole: { classPropertyName: "ariaRole", publicName: "ariaRole", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <ul
+      [id]="listId() || null"
+      class="jv-list"
+      [class]="variantClass()"
+      [attr.role]="resolvedRole()"
+      [attr.aria-label]="ariaLabel()"
+    >
       <ng-content />
     </ul>
   `, isInline: true, styles: [".jv-list{display:block;list-style:none;margin:0;padding:0}.jv-list>:not(:last-child){border-bottom:1px solid var(--jv-color-border)}.jv-list--bordered{border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md)}\n"] });
@@ -21359,16 +21467,17 @@ class JvListComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'jv-list', standalone: true, template: `
-    <ul
-      class="jv-list"
-      [class]="variantClass()"
-      [attr.role]="resolvedRole()"
-      [attr.aria-label]="ariaLabel()"
-    >
+    <ul
+      [id]="listId() || null"
+      class="jv-list"
+      [class]="variantClass()"
+      [attr.role]="resolvedRole()"
+      [attr.aria-label]="ariaLabel()"
+    >
       <ng-content />
     </ul>
   `, styles: [".jv-list{display:block;list-style:none;margin:0;padding:0}.jv-list>:not(:last-child){border-bottom:1px solid var(--jv-color-border)}.jv-list--bordered{border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md)}\n"] }]
-        }], propDecorators: { role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], ariaRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaRole", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+        }], propDecorators: { listId: [{ type: i0.Input, args: [{ isSignal: true, alias: "listId", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], ariaRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaRole", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
 let modalSelectorIdSequence = 0;
 class JvModalSelectorComponent {
@@ -21398,6 +21507,8 @@ class JvModalSelectorComponent {
     dialogOpen = signal(false, ...(ngDevMode ? [{ debugName: "dialogOpen" }] : /* istanbul ignore next */ []));
     searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : /* istanbul ignore next */ []));
     dialogId = `jv-modal-selector-dialog-${this.instanceId}`;
+    listboxId = `jv-modal-selector-listbox-${this.instanceId}`;
+    resultsId = `jv-modal-selector-results-${this.instanceId}`;
     searchInputId = `jv-modal-selector-search-${this.instanceId}`;
     value = null;
     disabled = false;
@@ -21531,100 +21642,102 @@ class JvModalSelectorComponent {
                 useExisting: forwardRef(() => JvModalSelectorComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "triggerButtonRef", first: true, predicate: ["triggerButton"], descendants: true, isSignal: true }, { propertyName: "optionElements", predicate: ["optionElement"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <jv-form-container
-      [label]="label()"
-      [inputId]="inputId()"
-      [required]="required()"
-      [invalid]="invalid()"
-      [hint]="hint()"
-      [error]="error()"
-    >
-      <button
-        #triggerButton
-        type="button"
-        class="jv-modal-selector-trigger"
-        [class.is-invalid]="invalid()"
-        [id]="inputId()"
-        [disabled]="disabled"
-        [attr.aria-haspopup]="'dialog'"
-        [attr.aria-expanded]="dialogOpen() ? 'true' : 'false'"
-        [attr.aria-controls]="dialogId"
-        [attr.aria-invalid]="invalid() ? 'true' : null"
-        [attr.aria-describedby]="describedBy() || null"
-        [attr.aria-label]="triggerAriaLabel()"
-        (click)="openDialog()"
-        (blur)="handleBlur()"
-      >
-        <span class="jv-modal-selector-trigger-copy">
-          <span [class.jv-modal-selector-trigger-placeholder]="!selectedOption()">
-            {{ selectedOption()?.label ?? resolvedPlaceholder() }}
-          </span>
-        </span>
-        <jv-icon name="chevrons-up-down" [size]="18" />
-      </button>
-    </jv-form-container>
-
-    <jv-dialog [open]="dialogOpen()" [title]="resolvedDialogTitle()" (closed)="closeDialog()">
-      <div [id]="dialogId" class="jv-modal-selector-dialog">
-        @if (dialogSubtitle()) {
-          <p class="jv-modal-selector-subtitle">{{ dialogSubtitle() }}</p>
-        }
-
-        @if (showSearch()) {
-          <jv-input
-            type="search"
-            [inputId]="searchInputId"
-            [placeholder]="searchPlaceholder() || translation.translate('modalSelector.searchPlaceholder')"
-            [ngModel]="searchQuery()"
-            (ngModelChange)="searchQuery.set($event)"
-          />
-        }
-
-        <p class="jv-modal-selector-results" aria-live="polite">{{ resultsLabel() }}</p>
-
-        @if (filteredOptions().length > 0) {
-          <jv-list variant="bordered" [ariaRole]="'listbox'" [ariaLabel]="resolvedDialogTitle()">
-            @for (option of filteredOptions(); track option.value; let index = $index) {
-              <li role="presentation">
-                <div
-                  #optionElement
-                  class="jv-modal-selector-option"
-                  [class.jv-modal-selector-option--selected]="isSelected(option)"
-                  [class.jv-modal-selector-option--disabled]="option.disabled ?? false"
-                  [id]="optionId(index)"
-                  role="option"
-                  [attr.aria-selected]="isSelected(option) ? 'true' : 'false'"
-                  [attr.tabindex]="getOptionTabIndex(option, index)"
-                  (click)="selectOption(option)"
-                  (keydown)="handleOptionKeydown($event, index, option)"
-                >
-                  <div class="jv-modal-selector-option-copy">
-                    <span class="jv-modal-selector-option-label">{{ option.label }}</span>
-                    @if (option.description) {
-                      <span class="jv-modal-selector-option-description">{{ option.description }}</span>
-                    }
-                  </div>
-                  @if (isSelected(option)) {
-                    <jv-icon name="check" [size]="16" />
-                  }
-                </div>
-              </li>
-            }
-          </jv-list>
-        } @else {
-          <div class="jv-modal-selector-empty" aria-live="polite">{{ emptyMessage() || translation.translate('modalSelector.emptyMessage') }}</div>
-        }
-      </div>
-
-      <div dialog-actions class="jv-modal-selector-actions">
-        @if (selectedOption()) {
-          <jv-button variant="ghost" (click)="clearSelection()">{{ clearLabel() || translation.translate('modalSelector.clear') }}</jv-button>
-        }
-        <jv-button variant="outline" (click)="closeDialog()">{{ closeLabel() || translation.translate('modalSelector.close') }}</jv-button>
-      </div>
-    </jv-dialog>
-  `, isInline: true, styles: [".jv-modal-selector-trigger{width:100%;min-height:var(--jv-density-control-height);display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-sm);padding:0 var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);background:var(--jv-color-surface);color:var(--jv-color-foreground);text-align:left;font:inherit;cursor:pointer}.jv-modal-selector-trigger.is-invalid{border-color:var(--jv-color-danger)}.jv-modal-selector-trigger:disabled{opacity:.7;cursor:not-allowed}.jv-modal-selector-trigger:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:1px}.jv-modal-selector-trigger-copy{min-width:0;flex:1}.jv-modal-selector-trigger-placeholder{color:var(--jv-color-foreground-muted)}.jv-modal-selector-dialog,.jv-modal-selector-actions{display:grid;gap:var(--jv-spacing-md)}.jv-modal-selector-subtitle,.jv-modal-selector-results,.jv-modal-selector-option-description,.jv-modal-selector-empty{margin:0;color:var(--jv-color-foreground-muted)}.jv-modal-selector-empty{padding:var(--jv-spacing-md);border:1px dashed var(--jv-color-border);border-radius:var(--jv-radius-md);text-align:center}.jv-modal-selector-option{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);padding:var(--jv-spacing-md);background:var(--jv-color-surface);cursor:pointer;outline:none;transition:background-color .16s ease}.jv-modal-selector-option:hover,.jv-modal-selector-option:focus-visible{background:var(--jv-color-surface-muted)}.jv-modal-selector-option:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-modal-selector-option--selected{background:color-mix(in srgb,var(--jv-color-primary) 8%,var(--jv-color-surface))}.jv-modal-selector-option--disabled{opacity:.55;cursor:not-allowed;pointer-events:none}.jv-modal-selector-option-copy{min-width:0;display:grid;gap:.25rem}.jv-modal-selector-option-label{font-weight:600;color:var(--jv-color-foreground)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: JvButtonComponent, selector: "jv-button", inputs: ["type", "variant", "icon", "iconPosition", "loading", "disabled"] }, { kind: "component", type: JvDialogComponent, selector: "jv-dialog", inputs: ["open", "title"], outputs: ["closed"] }, { kind: "component", type: JvFormContainerComponent, selector: "jv-form-container", inputs: ["label", "hint", "error", "inputId", "hintId", "errorId", "required", "invalid"] }, { kind: "component", type: JvIconComponent, selector: "jv-icon", inputs: ["name", "size", "strokeWidth", "decorative", "ariaLabel"] }, { kind: "component", type: JvInputComponent, selector: "jv-input", inputs: ["type", "placeholder", "required", "invalid", "describedBy", "inputId"] }, { kind: "component", type: JvListComponent, selector: "jv-list", inputs: ["role", "ariaRole", "variant", "ariaLabel"] }] });
+        ], viewQueries: [{ propertyName: "triggerButtonRef", first: true, predicate: ["triggerButton"], descendants: true, isSignal: true }, { propertyName: "optionElements", predicate: ["optionElement"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <jv-form-container
+      [label]="label()"
+      [inputId]="inputId()"
+      [required]="required()"
+      [invalid]="invalid()"
+      [hint]="hint()"
+      [error]="error()"
+    >
+      <button
+        #triggerButton
+        type="button"
+        class="jv-modal-selector-trigger"
+        [class.is-invalid]="invalid()"
+        [id]="inputId()"
+        [disabled]="disabled"
+        [attr.aria-haspopup]="'dialog'"
+        [attr.aria-expanded]="dialogOpen() ? 'true' : 'false'"
+        [attr.aria-controls]="dialogId"
+        [attr.aria-invalid]="invalid() ? 'true' : null"
+        [attr.aria-describedby]="describedBy() || null"
+        [attr.aria-label]="triggerAriaLabel()"
+        (click)="openDialog()"
+        (blur)="handleBlur()"
+      >
+        <span class="jv-modal-selector-trigger-copy">
+          <span [class.jv-modal-selector-trigger-placeholder]="!selectedOption()">
+            {{ selectedOption()?.label ?? resolvedPlaceholder() }}
+          </span>
+        </span>
+        <jv-icon name="chevrons-up-down" [size]="18" />
+      </button>
+    </jv-form-container>
+
+    <jv-dialog [open]="dialogOpen()" [title]="resolvedDialogTitle()" (closed)="closeDialog()">
+      <div [id]="dialogId" class="jv-modal-selector-dialog">
+        @if (dialogSubtitle()) {
+          <p class="jv-modal-selector-subtitle">{{ dialogSubtitle() }}</p>
+        }
+
+        @if (showSearch()) {
+          <jv-input
+            type="search"
+            [inputId]="searchInputId"
+            [placeholder]="searchPlaceholder() || translation.translate('modalSelector.searchPlaceholder')"
+            [describedBy]="resultsId"
+            [ngModel]="searchQuery()"
+            (ngModelChange)="searchQuery.set($event)"
+          />
+        }
+
+        <p class="jv-modal-selector-results" [id]="resultsId" aria-live="polite">{{ resultsLabel() }}</p>
+
+        @if (filteredOptions().length > 0) {
+          <jv-list [listId]="listboxId" variant="bordered" [ariaRole]="'listbox'" [ariaLabel]="resolvedDialogTitle()">
+            @for (option of filteredOptions(); track option.value; let index = $index) {
+              <li role="presentation">
+                <div
+                  #optionElement
+                  class="jv-modal-selector-option"
+                  [class.jv-modal-selector-option--selected]="isSelected(option)"
+                  [class.jv-modal-selector-option--disabled]="option.disabled ?? false"
+                  [id]="optionId(index)"
+                  role="option"
+                  [attr.aria-selected]="isSelected(option) ? 'true' : 'false'"
+                  [attr.aria-disabled]="option.disabled ? 'true' : null"
+                  [attr.tabindex]="getOptionTabIndex(option, index)"
+                  (click)="selectOption(option)"
+                  (keydown)="handleOptionKeydown($event, index, option)"
+                >
+                  <div class="jv-modal-selector-option-copy">
+                    <span class="jv-modal-selector-option-label">{{ option.label }}</span>
+                    @if (option.description) {
+                      <span class="jv-modal-selector-option-description">{{ option.description }}</span>
+                    }
+                  </div>
+                  @if (isSelected(option)) {
+                    <jv-icon name="check" [size]="16" />
+                  }
+                </div>
+              </li>
+            }
+          </jv-list>
+        } @else {
+          <div class="jv-modal-selector-empty" aria-live="polite">{{ emptyMessage() || translation.translate('modalSelector.emptyMessage') }}</div>
+        }
+      </div>
+
+      <div dialog-actions class="jv-modal-selector-actions">
+        @if (selectedOption()) {
+          <jv-button variant="ghost" (click)="clearSelection()">{{ clearLabel() || translation.translate('modalSelector.clear') }}</jv-button>
+        }
+        <jv-button variant="outline" (click)="closeDialog()">{{ closeLabel() || translation.translate('modalSelector.close') }}</jv-button>
+      </div>
+    </jv-dialog>
+  `, isInline: true, styles: [".jv-modal-selector-trigger{width:100%;min-height:var(--jv-density-control-height);display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-sm);padding:0 var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);background:var(--jv-color-surface);color:var(--jv-color-foreground);text-align:left;font:inherit;cursor:pointer}.jv-modal-selector-trigger.is-invalid{border-color:var(--jv-color-danger)}.jv-modal-selector-trigger:disabled{opacity:.7;cursor:not-allowed}.jv-modal-selector-trigger:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:1px}.jv-modal-selector-trigger-copy{min-width:0;flex:1}.jv-modal-selector-trigger-placeholder{color:var(--jv-color-foreground-muted)}.jv-modal-selector-dialog,.jv-modal-selector-actions{display:grid;gap:var(--jv-spacing-md)}.jv-modal-selector-subtitle,.jv-modal-selector-results,.jv-modal-selector-option-description,.jv-modal-selector-empty{margin:0;color:var(--jv-color-foreground-muted)}.jv-modal-selector-empty{padding:var(--jv-spacing-md);border:1px dashed var(--jv-color-border);border-radius:var(--jv-radius-md);text-align:center}.jv-modal-selector-option{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);padding:var(--jv-spacing-md);background:var(--jv-color-surface);cursor:pointer;outline:none;transition:background-color .16s ease}.jv-modal-selector-option:hover,.jv-modal-selector-option:focus-visible{background:var(--jv-color-surface-muted)}.jv-modal-selector-option:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-modal-selector-option--selected{background:color-mix(in srgb,var(--jv-color-primary) 8%,var(--jv-color-surface))}.jv-modal-selector-option--disabled{opacity:.55;cursor:not-allowed;pointer-events:none}.jv-modal-selector-option-copy{min-width:0;display:grid;gap:.25rem}.jv-modal-selector-option-label{font-weight:600;color:var(--jv-color-foreground)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: JvButtonComponent, selector: "jv-button", inputs: ["type", "variant", "icon", "iconPosition", "loading", "disabled"] }, { kind: "component", type: JvDialogComponent, selector: "jv-dialog", inputs: ["open", "title"], outputs: ["closed"] }, { kind: "component", type: JvFormContainerComponent, selector: "jv-form-container", inputs: ["label", "hint", "error", "inputId", "hintId", "errorId", "required", "invalid"] }, { kind: "component", type: JvIconComponent, selector: "jv-icon", inputs: ["name", "size", "strokeWidth", "decorative", "ariaLabel"] }, { kind: "component", type: JvInputComponent, selector: "jv-input", inputs: ["type", "placeholder", "required", "invalid", "describedBy", "inputId"] }, { kind: "component", type: JvListComponent, selector: "jv-list", inputs: ["listId", "role", "ariaRole", "variant", "ariaLabel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvModalSelectorComponent, decorators: [{
             type: Component,
@@ -21634,99 +21747,101 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                             useExisting: forwardRef(() => JvModalSelectorComponent),
                             multi: true,
                         },
-                    ], template: `
-    <jv-form-container
-      [label]="label()"
-      [inputId]="inputId()"
-      [required]="required()"
-      [invalid]="invalid()"
-      [hint]="hint()"
-      [error]="error()"
-    >
-      <button
-        #triggerButton
-        type="button"
-        class="jv-modal-selector-trigger"
-        [class.is-invalid]="invalid()"
-        [id]="inputId()"
-        [disabled]="disabled"
-        [attr.aria-haspopup]="'dialog'"
-        [attr.aria-expanded]="dialogOpen() ? 'true' : 'false'"
-        [attr.aria-controls]="dialogId"
-        [attr.aria-invalid]="invalid() ? 'true' : null"
-        [attr.aria-describedby]="describedBy() || null"
-        [attr.aria-label]="triggerAriaLabel()"
-        (click)="openDialog()"
-        (blur)="handleBlur()"
-      >
-        <span class="jv-modal-selector-trigger-copy">
-          <span [class.jv-modal-selector-trigger-placeholder]="!selectedOption()">
-            {{ selectedOption()?.label ?? resolvedPlaceholder() }}
-          </span>
-        </span>
-        <jv-icon name="chevrons-up-down" [size]="18" />
-      </button>
-    </jv-form-container>
-
-    <jv-dialog [open]="dialogOpen()" [title]="resolvedDialogTitle()" (closed)="closeDialog()">
-      <div [id]="dialogId" class="jv-modal-selector-dialog">
-        @if (dialogSubtitle()) {
-          <p class="jv-modal-selector-subtitle">{{ dialogSubtitle() }}</p>
-        }
-
-        @if (showSearch()) {
-          <jv-input
-            type="search"
-            [inputId]="searchInputId"
-            [placeholder]="searchPlaceholder() || translation.translate('modalSelector.searchPlaceholder')"
-            [ngModel]="searchQuery()"
-            (ngModelChange)="searchQuery.set($event)"
-          />
-        }
-
-        <p class="jv-modal-selector-results" aria-live="polite">{{ resultsLabel() }}</p>
-
-        @if (filteredOptions().length > 0) {
-          <jv-list variant="bordered" [ariaRole]="'listbox'" [ariaLabel]="resolvedDialogTitle()">
-            @for (option of filteredOptions(); track option.value; let index = $index) {
-              <li role="presentation">
-                <div
-                  #optionElement
-                  class="jv-modal-selector-option"
-                  [class.jv-modal-selector-option--selected]="isSelected(option)"
-                  [class.jv-modal-selector-option--disabled]="option.disabled ?? false"
-                  [id]="optionId(index)"
-                  role="option"
-                  [attr.aria-selected]="isSelected(option) ? 'true' : 'false'"
-                  [attr.tabindex]="getOptionTabIndex(option, index)"
-                  (click)="selectOption(option)"
-                  (keydown)="handleOptionKeydown($event, index, option)"
-                >
-                  <div class="jv-modal-selector-option-copy">
-                    <span class="jv-modal-selector-option-label">{{ option.label }}</span>
-                    @if (option.description) {
-                      <span class="jv-modal-selector-option-description">{{ option.description }}</span>
-                    }
-                  </div>
-                  @if (isSelected(option)) {
-                    <jv-icon name="check" [size]="16" />
-                  }
-                </div>
-              </li>
-            }
-          </jv-list>
-        } @else {
-          <div class="jv-modal-selector-empty" aria-live="polite">{{ emptyMessage() || translation.translate('modalSelector.emptyMessage') }}</div>
-        }
-      </div>
-
-      <div dialog-actions class="jv-modal-selector-actions">
-        @if (selectedOption()) {
-          <jv-button variant="ghost" (click)="clearSelection()">{{ clearLabel() || translation.translate('modalSelector.clear') }}</jv-button>
-        }
-        <jv-button variant="outline" (click)="closeDialog()">{{ closeLabel() || translation.translate('modalSelector.close') }}</jv-button>
-      </div>
-    </jv-dialog>
+                    ], template: `
+    <jv-form-container
+      [label]="label()"
+      [inputId]="inputId()"
+      [required]="required()"
+      [invalid]="invalid()"
+      [hint]="hint()"
+      [error]="error()"
+    >
+      <button
+        #triggerButton
+        type="button"
+        class="jv-modal-selector-trigger"
+        [class.is-invalid]="invalid()"
+        [id]="inputId()"
+        [disabled]="disabled"
+        [attr.aria-haspopup]="'dialog'"
+        [attr.aria-expanded]="dialogOpen() ? 'true' : 'false'"
+        [attr.aria-controls]="dialogId"
+        [attr.aria-invalid]="invalid() ? 'true' : null"
+        [attr.aria-describedby]="describedBy() || null"
+        [attr.aria-label]="triggerAriaLabel()"
+        (click)="openDialog()"
+        (blur)="handleBlur()"
+      >
+        <span class="jv-modal-selector-trigger-copy">
+          <span [class.jv-modal-selector-trigger-placeholder]="!selectedOption()">
+            {{ selectedOption()?.label ?? resolvedPlaceholder() }}
+          </span>
+        </span>
+        <jv-icon name="chevrons-up-down" [size]="18" />
+      </button>
+    </jv-form-container>
+
+    <jv-dialog [open]="dialogOpen()" [title]="resolvedDialogTitle()" (closed)="closeDialog()">
+      <div [id]="dialogId" class="jv-modal-selector-dialog">
+        @if (dialogSubtitle()) {
+          <p class="jv-modal-selector-subtitle">{{ dialogSubtitle() }}</p>
+        }
+
+        @if (showSearch()) {
+          <jv-input
+            type="search"
+            [inputId]="searchInputId"
+            [placeholder]="searchPlaceholder() || translation.translate('modalSelector.searchPlaceholder')"
+            [describedBy]="resultsId"
+            [ngModel]="searchQuery()"
+            (ngModelChange)="searchQuery.set($event)"
+          />
+        }
+
+        <p class="jv-modal-selector-results" [id]="resultsId" aria-live="polite">{{ resultsLabel() }}</p>
+
+        @if (filteredOptions().length > 0) {
+          <jv-list [listId]="listboxId" variant="bordered" [ariaRole]="'listbox'" [ariaLabel]="resolvedDialogTitle()">
+            @for (option of filteredOptions(); track option.value; let index = $index) {
+              <li role="presentation">
+                <div
+                  #optionElement
+                  class="jv-modal-selector-option"
+                  [class.jv-modal-selector-option--selected]="isSelected(option)"
+                  [class.jv-modal-selector-option--disabled]="option.disabled ?? false"
+                  [id]="optionId(index)"
+                  role="option"
+                  [attr.aria-selected]="isSelected(option) ? 'true' : 'false'"
+                  [attr.aria-disabled]="option.disabled ? 'true' : null"
+                  [attr.tabindex]="getOptionTabIndex(option, index)"
+                  (click)="selectOption(option)"
+                  (keydown)="handleOptionKeydown($event, index, option)"
+                >
+                  <div class="jv-modal-selector-option-copy">
+                    <span class="jv-modal-selector-option-label">{{ option.label }}</span>
+                    @if (option.description) {
+                      <span class="jv-modal-selector-option-description">{{ option.description }}</span>
+                    }
+                  </div>
+                  @if (isSelected(option)) {
+                    <jv-icon name="check" [size]="16" />
+                  }
+                </div>
+              </li>
+            }
+          </jv-list>
+        } @else {
+          <div class="jv-modal-selector-empty" aria-live="polite">{{ emptyMessage() || translation.translate('modalSelector.emptyMessage') }}</div>
+        }
+      </div>
+
+      <div dialog-actions class="jv-modal-selector-actions">
+        @if (selectedOption()) {
+          <jv-button variant="ghost" (click)="clearSelection()">{{ clearLabel() || translation.translate('modalSelector.clear') }}</jv-button>
+        }
+        <jv-button variant="outline" (click)="closeDialog()">{{ closeLabel() || translation.translate('modalSelector.close') }}</jv-button>
+      </div>
+    </jv-dialog>
   `, styles: [".jv-modal-selector-trigger{width:100%;min-height:var(--jv-density-control-height);display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-sm);padding:0 var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);background:var(--jv-color-surface);color:var(--jv-color-foreground);text-align:left;font:inherit;cursor:pointer}.jv-modal-selector-trigger.is-invalid{border-color:var(--jv-color-danger)}.jv-modal-selector-trigger:disabled{opacity:.7;cursor:not-allowed}.jv-modal-selector-trigger:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:1px}.jv-modal-selector-trigger-copy{min-width:0;flex:1}.jv-modal-selector-trigger-placeholder{color:var(--jv-color-foreground-muted)}.jv-modal-selector-dialog,.jv-modal-selector-actions{display:grid;gap:var(--jv-spacing-md)}.jv-modal-selector-subtitle,.jv-modal-selector-results,.jv-modal-selector-option-description,.jv-modal-selector-empty{margin:0;color:var(--jv-color-foreground-muted)}.jv-modal-selector-empty{padding:var(--jv-spacing-md);border:1px dashed var(--jv-color-border);border-radius:var(--jv-radius-md);text-align:center}.jv-modal-selector-option{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);padding:var(--jv-spacing-md);background:var(--jv-color-surface);cursor:pointer;outline:none;transition:background-color .16s ease}.jv-modal-selector-option:hover,.jv-modal-selector-option:focus-visible{background:var(--jv-color-surface-muted)}.jv-modal-selector-option:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-modal-selector-option--selected{background:color-mix(in srgb,var(--jv-color-primary) 8%,var(--jv-color-surface))}.jv-modal-selector-option--disabled{opacity:.55;cursor:not-allowed;pointer-events:none}.jv-modal-selector-option-copy{min-width:0;display:grid;gap:.25rem}.jv-modal-selector-option-label{font-weight:600;color:var(--jv-color-foreground)}\n"] }]
         }], propDecorators: { triggerButtonRef: [{ type: i0.ViewChild, args: ['triggerButton', { isSignal: true }] }], optionElements: [{ type: i0.ViewChildren, args: ['optionElement', { isSignal: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], dialogTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogTitle", required: false }] }], dialogSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogSubtitle", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "describedBy", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], valueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
 
@@ -23532,8 +23647,9 @@ class JvListItemComponent {
       class="jv-list-item"
       [class.jv-list-item--disabled]="disabled()"
       [class.jv-list-item--active]="active()"
-      tabindex="0"
+      [attr.tabindex]="disabled() ? -1 : 0"
       role="listitem"
+      [attr.aria-disabled]="disabled() ? 'true' : null"
       (click)="onActivate()"
       (keydown.enter)="onActivate()"
       (keydown.space)="onActivate(); $event.preventDefault()"
@@ -23560,8 +23676,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       class="jv-list-item"
       [class.jv-list-item--disabled]="disabled()"
       [class.jv-list-item--active]="active()"
-      tabindex="0"
+      [attr.tabindex]="disabled() ? -1 : 0"
       role="listitem"
+      [attr.aria-disabled]="disabled() ? 'true' : null"
       (click)="onActivate()"
       (keydown.enter)="onActivate()"
       (keydown.space)="onActivate(); $event.preventDefault()"
@@ -23797,11 +23914,23 @@ class JvTabsComponent {
         </div>
 
         @if (showScrollLeft() || showScrollRight()) {
-          <div class="jv-tabs-controls" aria-hidden="true">
-            <button type="button" class="jv-tabs-scroll-button" [disabled]="!showScrollLeft()" (click)="scrollTabs(-1)">
+          <div class="jv-tabs-controls">
+            <button
+              type="button"
+              class="jv-tabs-scroll-button"
+              aria-label="Scroll tabs backward"
+              [disabled]="!showScrollLeft()"
+              (click)="scrollTabs(-1)"
+            >
               <jv-icon name="chevron-left" [size]="16" />
             </button>
-            <button type="button" class="jv-tabs-scroll-button" [disabled]="!showScrollRight()" (click)="scrollTabs(1)">
+            <button
+              type="button"
+              class="jv-tabs-scroll-button"
+              aria-label="Scroll tabs forward"
+              [disabled]="!showScrollRight()"
+              (click)="scrollTabs(1)"
+            >
               <jv-icon name="chevron-right" [size]="16" />
             </button>
           </div>
@@ -23892,11 +24021,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         </div>
 
         @if (showScrollLeft() || showScrollRight()) {
-          <div class="jv-tabs-controls" aria-hidden="true">
-            <button type="button" class="jv-tabs-scroll-button" [disabled]="!showScrollLeft()" (click)="scrollTabs(-1)">
+          <div class="jv-tabs-controls">
+            <button
+              type="button"
+              class="jv-tabs-scroll-button"
+              aria-label="Scroll tabs backward"
+              [disabled]="!showScrollLeft()"
+              (click)="scrollTabs(-1)"
+            >
               <jv-icon name="chevron-left" [size]="16" />
             </button>
-            <button type="button" class="jv-tabs-scroll-button" [disabled]="!showScrollRight()" (click)="scrollTabs(1)">
+            <button
+              type="button"
+              class="jv-tabs-scroll-button"
+              aria-label="Scroll tabs forward"
+              [disabled]="!showScrollRight()"
+              (click)="scrollTabs(1)"
+            >
               <jv-icon name="chevron-right" [size]="16" />
             </button>
           </div>
@@ -23969,6 +24110,7 @@ class JvTooltipDirective {
     showTimeout = null;
     hideTimeout = null;
     tooltipId = `jv-tooltip-${++tooltipSequence}`;
+    originalDescribedBy = null;
     text = input.required({ ...(ngDevMode ? { debugName: "text" } : /* istanbul ignore next */ {}), alias: 'jvTooltip' });
     position = input('top', { ...(ngDevMode ? { debugName: "position" } : /* istanbul ignore next */ {}), alias: 'jvTooltipPosition' });
     show() {
@@ -23982,7 +24124,7 @@ class JvTooltipDirective {
         this.showTimeout = setTimeout(() => {
             this.renderTooltip();
             this.positionTooltip();
-            this.renderer.setAttribute(this.anchorElement(), 'aria-describedby', this.tooltipId);
+            this.attachTooltipDescription();
         }, 120);
     }
     hide() {
@@ -24069,10 +24211,29 @@ class JvTooltipDirective {
         if (!this.tooltipElement) {
             return;
         }
-        this.renderer.removeAttribute(this.anchorElement(), 'aria-describedby');
+        this.restoreTooltipDescription();
         this.renderer.removeChild(this.document.body, this.tooltipElement);
         this.tooltipElement = null;
     }
+    attachTooltipDescription() {
+        const anchor = this.anchorElement();
+        this.originalDescribedBy ??= anchor.getAttribute('aria-describedby');
+        const describedBy = [this.originalDescribedBy, this.tooltipId]
+            .filter((value) => !!value)
+            .join(' ')
+            .trim();
+        this.renderer.setAttribute(anchor, 'aria-describedby', describedBy);
+    }
+    restoreTooltipDescription() {
+        const anchor = this.anchorElement();
+        if (this.originalDescribedBy) {
+            this.renderer.setAttribute(anchor, 'aria-describedby', this.originalDescribedBy);
+        }
+        else {
+            this.renderer.removeAttribute(anchor, 'aria-describedby');
+        }
+        this.originalDescribedBy = null;
+    }
     anchorElement() {
         const host = this.hostRef.nativeElement;
         if (isInteractiveElement(host)) {
@@ -24432,6 +24593,7 @@ function exportGridToExcel(header, rows, filename = 'export.xlsx') {
 let gridIdSequence = 0;
 class JvGridComponent {
     gridId = `jv-grid-${++gridIdSequence}`;
+    gridSearchInputId = `${this.gridId}-search`;
     formatService = inject(JvFormatService);
     translationService = inject(JvTranslationService);
     data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
@@ -24975,7 +25137,7 @@ class JvGridComponent {
             <div class="jv-grid-search">
               <jv-icon name="search" [size]="16" />
               <jv-input
-                inputId="grid-search"
+                [inputId]="gridSearchInputId"
                 [placeholder]="t('grid.searchPlaceholder')"
                 [ngModel]="searchTerm()"
                 (ngModelChange)="onSearchInput($event)"
@@ -25314,7 +25476,7 @@ class JvGridComponent {
         </nav>
       }
     </div>
-  `, isInline: true, styles: [".jv-grid{display:flex;flex-direction:column;gap:var(--jv-spacing-md)}.jv-grid-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);flex-wrap:wrap}.jv-grid-search{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-grid-export-actions{display:flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-grid-table-wrap{overflow-x:auto;overflow-y:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);position:relative}.jv-grid-virtual{max-height:600px}.jv-grid-virtual-spacer{pointer-events:none}.jv-grid-table{width:100%;border-collapse:collapse;background:var(--jv-color-surface)}.jv-grid-thead{background:var(--jv-color-surface-muted)}.jv-grid-th{padding:var(--jv-spacing-sm) var(--jv-spacing-md);font-weight:600;font-size:.875rem;color:var(--jv-color-foreground-muted);text-align:start;white-space:nowrap;border-bottom:1px solid var(--jv-color-border);-webkit-user-select:none;user-select:none;position:relative}.jv-grid-th-sortable{cursor:pointer}.jv-grid-th-sortable:hover{background:var(--jv-color-surface)}.jv-grid-th-reorderable{cursor:grab}.jv-grid-th-reorderable:active{cursor:grabbing}.jv-grid-th-sticky-left{position:sticky;left:0;z-index:2;background:var(--jv-color-surface-muted);border-right:1px solid var(--jv-color-border)}.jv-grid-th-sticky-right{position:sticky;right:0;z-index:2;background:var(--jv-color-surface-muted);border-left:1px solid var(--jv-color-border)}.jv-grid-th-content{display:flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-grid-sort-icon{font-size:.75rem;line-height:1}.jv-grid-th-select,.jv-grid-td-select{width:3rem;text-align:center}.jv-grid-th-actions,.jv-grid-td-actions{width:1%;white-space:nowrap}.jv-grid-td{padding:var(--jv-spacing-sm) var(--jv-spacing-md);color:var(--jv-color-foreground);font-size:var(--jv-density-font-size);border-bottom:1px solid var(--jv-color-border)}.jv-grid-td-sticky-left{position:sticky;left:0;z-index:1;background:var(--jv-color-surface);border-right:1px solid var(--jv-color-border)}.jv-grid-td-sticky-right{position:sticky;right:0;z-index:1;background:var(--jv-color-surface);border-left:1px solid var(--jv-color-border)}.jv-grid-t:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-grid-tr{transition:background-color .12s ease}.jv-grid-tr:hover{background:var(--jv-color-surface-muted)}.jv-grid-tr:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-grid-tr-editing{background:var(--jv-color-surface-highlight, rgba(59, 130, 246, .05))}.jv-grid-tr-selected{background:var(--jv-color-primary-light, rgba(59, 130, 246, .08))}.jv-grid-checkbox{width:1rem;height:1rem;accent-color:var(--jv-color-primary);cursor:pointer}.jv-grid-boolean{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:999px;font-size:.75rem;font-weight:700}.jv-grid-boolean-true{background:var(--jv-color-success);color:#fff}.jv-grid-boolean-false{background:var(--jv-color-danger);color:#fff}.jv-grid-empty{padding:var(--jv-spacing-xl) var(--jv-spacing-md);text-align:center;color:var(--jv-color-foreground-muted);font-style:italic}.jv-grid-actions-group{display:flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-grid-loading{display:flex;align-items:center;justify-content:center;gap:var(--jv-spacing-md);padding:var(--jv-spacing-xl);color:var(--jv-color-foreground-muted)}.jv-grid-spinner{width:1.25rem;height:1.25rem;border:2px solid var(--jv-color-border);border-right-color:var(--jv-color-primary);border-radius:999px;animation:jv-grid-spin .8s linear infinite}@keyframes jv-grid-spin{to{transform:rotate(360deg)}}.jv-grid-pagination{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);flex-wrap:wrap}.jv-grid-pagination-info{font-size:.875rem;color:var(--jv-color-foreground-muted)}.jv-grid-pagination-controls{display:flex;align-items:center;gap:var(--jv-spacing-xs);flex-wrap:wrap}@media(max-width:640px){.jv-grid-pagination{flex-direction:column;align-items:stretch;gap:var(--jv-spacing-sm)}.jv-grid-pagination-info{text-align:center}.jv-grid-pagination-controls{justify-content:center}.jv-grid-toolbar{flex-direction:column;align-items:stretch}.jv-grid-search{width:100%}.jv-grid-export-actions{justify-content:stretch}.jv-grid-export-actions jv-button{flex:1}}.jv-grid-resize-handle{position:absolute;top:0;right:0;width:4px;height:100%;cursor:col-resize;background:transparent;z-index:3}.jv-grid-resize-handle:hover,.jv-grid-resize-handle:active{background:var(--jv-color-primary)}.jv-grid-filter-row .jv-grid-th{padding:var(--jv-spacing-xs) var(--jv-spacing-sm)}.jv-grid-filter-input{width:100%;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-sm);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-sm);background:var(--jv-color-surface);color:var(--jv-color-foreground);font-size:.8rem;box-sizing:border-box}.jv-grid-td-editable{cursor:pointer}.jv-grid-td-editable:hover{box-shadow:inset 0 0 0 1px var(--jv-color-primary)}.jv-grid-edit-input{width:100%;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-sm);border:1px solid var(--jv-color-primary);border-radius:var(--jv-radius-sm);background:var(--jv-color-surface);color:var(--jv-color-foreground);font-size:var(--jv-density-font-size);box-sizing:border-box}.jv-grid-edit-input:focus{outline:2px solid var(--jv-color-primary);outline-offset:-1px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: JvButtonComponent, selector: "jv-button", inputs: ["type", "variant", "icon", "iconPosition", "loading", "disabled"] }, { kind: "component", type: JvIconComponent, selector: "jv-icon", inputs: ["name", "size", "strokeWidth", "decorative", "ariaLabel"] }, { kind: "component", type: JvInputComponent, selector: "jv-input", inputs: ["type", "placeholder", "required", "invalid", "describedBy", "inputId"] }, { kind: "component", type: JvSelectComponent, selector: "jv-select", inputs: ["options", "placeholder", "required", "invalid", "describedBy", "inputId", "modelValue"], outputs: ["selectionChange"] }] });
+  `, isInline: true, styles: [".jv-grid{display:flex;flex-direction:column;gap:var(--jv-spacing-md)}.jv-grid-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);flex-wrap:wrap}.jv-grid-search{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-grid-export-actions{display:flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-grid-table-wrap{overflow-x:auto;overflow-y:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);position:relative}.jv-grid-virtual{max-height:600px}.jv-grid-virtual-spacer{pointer-events:none}.jv-grid-table{width:100%;border-collapse:collapse;background:var(--jv-color-surface)}.jv-grid-thead{background:var(--jv-color-surface-muted)}.jv-grid-th{padding:var(--jv-spacing-sm) var(--jv-spacing-md);font-weight:600;font-size:.875rem;color:var(--jv-color-foreground-muted);text-align:start;white-space:nowrap;border-bottom:1px solid var(--jv-color-border);-webkit-user-select:none;user-select:none;position:relative}.jv-grid-th-sortable{cursor:pointer}.jv-grid-th-sortable:hover{background:var(--jv-color-surface)}.jv-grid-th-reorderable{cursor:grab}.jv-grid-th-reorderable:active{cursor:grabbing}.jv-grid-th-sticky-left{position:sticky;left:0;z-index:2;background:var(--jv-color-surface-muted);border-right:1px solid var(--jv-color-border)}.jv-grid-th-sticky-right{position:sticky;right:0;z-index:2;background:var(--jv-color-surface-muted);border-left:1px solid var(--jv-color-border)}.jv-grid-th-content{display:flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-grid-sort-icon{font-size:.75rem;line-height:1}.jv-grid-th-select,.jv-grid-td-select{width:3rem;text-align:center}.jv-grid-th-actions,.jv-grid-td-actions{width:1%;white-space:nowrap}.jv-grid-td{padding:var(--jv-spacing-sm) var(--jv-spacing-md);color:var(--jv-color-foreground);font-size:var(--jv-density-font-size);border-bottom:1px solid var(--jv-color-border)}.jv-grid-td-sticky-left{position:sticky;left:0;z-index:1;background:var(--jv-color-surface);border-right:1px solid var(--jv-color-border)}.jv-grid-td-sticky-right{position:sticky;right:0;z-index:1;background:var(--jv-color-surface);border-left:1px solid var(--jv-color-border)}.jv-grid-t:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-grid-tr{transition:background-color .12s ease}.jv-grid-tr:hover{background:var(--jv-color-surface-muted)}.jv-grid-tr:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-grid-tr-editing{background:var(--jv-color-surface-highlight, rgba(59, 130, 246, .05))}.jv-grid-tr-selected{background:var(--jv-color-primary-light, rgba(59, 130, 246, .08))}.jv-grid-checkbox{width:1rem;height:1rem;accent-color:var(--jv-color-primary);cursor:pointer}.jv-grid-boolean{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:999px;font-size:.75rem;font-weight:700}.jv-grid-boolean-true{background:var(--jv-color-success);color:#fff}.jv-grid-boolean-false{background:var(--jv-color-danger);color:#fff}.jv-grid-empty{padding:var(--jv-spacing-xl) var(--jv-spacing-md);text-align:center;color:var(--jv-color-foreground-muted);font-style:italic}.jv-grid-actions-group{display:flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-grid-loading{display:flex;align-items:center;justify-content:center;gap:var(--jv-spacing-md);padding:var(--jv-spacing-xl);color:var(--jv-color-foreground-muted)}.jv-grid-spinner{width:1.25rem;height:1.25rem;border:2px solid var(--jv-color-border);border-right-color:var(--jv-color-primary);border-radius:999px;animation:jv-grid-spin .8s linear infinite}@keyframes jv-grid-spin{to{transform:rotate(360deg)}}.jv-grid-pagination{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);flex-wrap:wrap}.jv-grid-pagination-info{font-size:.875rem;color:var(--jv-color-foreground-muted)}.jv-grid-pagination-controls{display:flex;align-items:center;gap:var(--jv-spacing-xs);flex-wrap:wrap}@media(max-width:640px){.jv-grid-pagination{flex-direction:column;align-items:stretch;gap:var(--jv-spacing-sm)}.jv-grid-pagination-info{text-align:center}.jv-grid-pagination-controls{justify-content:center}.jv-grid-toolbar{flex-direction:column;align-items:stretch}.jv-grid-search{width:100%}.jv-grid-export-actions{justify-content:stretch}.jv-grid-export-actions jv-button{flex:1}}.jv-grid-resize-handle{position:absolute;top:0;right:0;width:4px;height:100%;cursor:col-resize;background:transparent;z-index:3}.jv-grid-resize-handle:hover,.jv-grid-resize-handle:active{background:var(--jv-color-primary)}.jv-grid-filter-row .jv-grid-th{padding:var(--jv-spacing-xs) var(--jv-spacing-sm)}.jv-grid-filter-input{width:100%;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-sm);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-sm);background:var(--jv-color-surface);color:var(--jv-color-foreground);font-size:.8rem;box-sizing:border-box}.jv-grid-td-editable{cursor:pointer}.jv-grid-td-editable:hover{box-shadow:inset 0 0 0 1px var(--jv-color-primary)}.jv-grid-edit-input{width:100%;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-sm);border:1px solid var(--jv-color-primary);border-radius:var(--jv-radius-sm);background:var(--jv-color-surface);color:var(--jv-color-foreground);font-size:var(--jv-density-font-size);box-sizing:border-box}.jv-grid-edit-input:focus{outline:2px solid var(--jv-color-primary);outline-offset:-1px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: JvButtonComponent, selector: "jv-button", inputs: ["type", "variant", "icon", "iconPosition", "loading", "disabled"] }, { kind: "component", type: JvIconComponent, selector: "jv-icon", inputs: ["name", "size", "strokeWidth", "decorative", "ariaLabel"] }, { kind: "component", type: JvInputComponent, selector: "jv-input", inputs: ["type", "placeholder", "required", "invalid", "describedBy", "inputId"] }, { kind: "component", type: JvSelectComponent, selector: "jv-select", inputs: ["options", "placeholder", "required", "invalid", "describedBy", "ariaLabel", "inputId", "modelValue"], outputs: ["selectionChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvGridComponent, decorators: [{
             type: Component,
@@ -25326,7 +25488,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             <div class="jv-grid-search">
               <jv-icon name="search" [size]="16" />
               <jv-input
-                inputId="grid-search"
+                [inputId]="gridSearchInputId"
                 [placeholder]="t('grid.searchPlaceholder')"
                 [ngModel]="searchTerm()"
                 (ngModelChange)="onSearchInput($event)"
@@ -25765,7 +25927,7 @@ class JvPaginationComponent {
         </div>
       </div>
     </nav>
-  `, isInline: true, styles: [".jv-pagination{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);flex-wrap:wrap}.jv-pagination-info{font-size:.875rem;color:var(--jv-color-foreground-muted)}.jv-pagination-controls{display:flex;align-items:center;gap:var(--jv-spacing-md);flex-wrap:wrap}.jv-pagination-size{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-pagination-size-label{font-size:.875rem;color:var(--jv-color-foreground-muted);white-space:nowrap}.jv-pagination-size jv-select{width:auto;min-width:4.5rem}.jv-pagination-buttons{display:flex;align-items:center;gap:var(--jv-spacing-xs)}\n"], dependencies: [{ kind: "component", type: JvButtonComponent, selector: "jv-button", inputs: ["type", "variant", "icon", "iconPosition", "loading", "disabled"] }, { kind: "component", type: JvSelectComponent, selector: "jv-select", inputs: ["options", "placeholder", "required", "invalid", "describedBy", "inputId", "modelValue"], outputs: ["selectionChange"] }] });
+  `, isInline: true, styles: [".jv-pagination{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);flex-wrap:wrap}.jv-pagination-info{font-size:.875rem;color:var(--jv-color-foreground-muted)}.jv-pagination-controls{display:flex;align-items:center;gap:var(--jv-spacing-md);flex-wrap:wrap}.jv-pagination-size{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-pagination-size-label{font-size:.875rem;color:var(--jv-color-foreground-muted);white-space:nowrap}.jv-pagination-size jv-select{width:auto;min-width:4.5rem}.jv-pagination-buttons{display:flex;align-items:center;gap:var(--jv-spacing-xs)}\n"], dependencies: [{ kind: "component", type: JvButtonComponent, selector: "jv-button", inputs: ["type", "variant", "icon", "iconPosition", "loading", "disabled"] }, { kind: "component", type: JvSelectComponent, selector: "jv-select", inputs: ["options", "placeholder", "required", "invalid", "describedBy", "ariaLabel", "inputId", "modelValue"], outputs: ["selectionChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvPaginationComponent, decorators: [{
             type: Component,