@devjuliovilla/jv-ui 1.12.0 → 1.14.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, DestroyRef } 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';
@@ -18159,6 +18159,8 @@ const ES = {
     'grid.filterPlaceholder': 'Filtrar...',
     'grid.filterForColumn': 'Filtrar por ${column}',
     'grid.actionsLabel': 'Acciones',
+    'grid.booleanYes': 'SI',
+    'grid.booleanNo': 'NO',
     'pagination.pageLabel': 'Página {page}',
     'pagination.itemsShowing': '{start}-{end} de {total}',
     'pagination.of': 'de',
@@ -18178,6 +18180,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',
@@ -18236,6 +18240,8 @@ const EN = {
     'grid.filterPlaceholder': 'Filter...',
     'grid.filterForColumn': 'Filter by ${column}',
     'grid.actionsLabel': 'Actions',
+    'grid.booleanYes': 'YES',
+    'grid.booleanNo': 'NO',
     'pagination.pageLabel': 'Page {page}',
     'pagination.itemsShowing': '{start}-{end} of {total}',
     'pagination.of': 'of',
@@ -18255,6 +18261,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',
@@ -18362,18 +18370,19 @@ function provideJvUi(config = {}) {
 class JvUiConfigService {
     defaults = inject(JV_UI_CONFIG_DEFAULTS);
     configLayers = (inject(JV_UI_CONFIG, { optional: true }) ?? []);
+    resolvedConfig = this.configLayers.reduce((merged, layer) => ({
+        ...merged,
+        ...layer,
+        formats: {
+            ...merged.formats,
+            ...(layer.formats ?? {}),
+        },
+    }), {
+        ...this.defaults,
+        formats: { ...this.defaults.formats },
+    });
     get snapshot() {
-        return this.configLayers.reduce((merged, layer) => ({
-            ...merged,
-            ...layer,
-            formats: {
-                ...merged.formats,
-                ...(layer.formats ?? {}),
-            },
-        }), {
-            ...this.defaults,
-            formats: { ...this.defaults.formats },
-        });
+        return this.resolvedConfig;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvUiConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvUiConfigService, providedIn: 'root' });
@@ -18843,6 +18852,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 +18883,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 +18898,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 +18929,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 +18966,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 +18995,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 +19039,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 +19072,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 +19162,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 +19275,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 +19379,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 +19388,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 +20636,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 +20645,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 +20676,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 +20711,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 +20733,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 +21043,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 +21323,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 +21398,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 +21446,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 +21457,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 +21472,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 +21512,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 +21647,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 +21752,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 +23652,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 +23681,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 +23919,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 +24026,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 +24115,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 +24129,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 +24216,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)) {
@@ -24152,6 +24318,7 @@ const JV_GRID_DEFAULT_OPTIONS = {
     exportFileName: '',
     columnFilters: false,
     rowDoubleClick: false,
+    keyboardNavigation: false,
 };
 
 const MAIN_NS = 'http://schemas.openxmlformats.org/spreadsheetml/2006/main';
@@ -24432,6 +24599,9 @@ function exportGridToExcel(header, rows, filename = 'export.xlsx') {
 let gridIdSequence = 0;
 class JvGridComponent {
     gridId = `jv-grid-${++gridIdSequence}`;
+    gridSearchInputId = `${this.gridId}-search`;
+    destroyRef = inject(DestroyRef);
+    document = inject(DOCUMENT);
     formatService = inject(JvFormatService);
     translationService = inject(JvTranslationService);
     data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
@@ -24439,7 +24609,7 @@ class JvGridComponent {
     actions = input([], ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
     options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     trackBy = input(null, ...(ngDevMode ? [{ debugName: "trackBy" }] : /* istanbul ignore next */ []));
-    selectedIds = input([], ...(ngDevMode ? [{ debugName: "selectedIds" }] : /* istanbul ignore next */ []));
+    selectedIds = input(null, ...(ngDevMode ? [{ debugName: "selectedIds" }] : /* istanbul ignore next */ []));
     rowClick = output();
     rowDoubleClick = output();
     actionClick = output();
@@ -24463,8 +24633,9 @@ class JvGridComponent {
     columnOrder = signal([], ...(ngDevMode ? [{ debugName: "columnOrder" }] : /* istanbul ignore next */ []));
     colFilters = signal({}, ...(ngDevMode ? [{ debugName: "colFilters" }] : /* istanbul ignore next */ []));
     columnWidths = signal({}, ...(ngDevMode ? [{ debugName: "columnWidths" }] : /* istanbul ignore next */ []));
+    activeCell = signal({ row: 0, column: 0 }, ...(ngDevMode ? [{ debugName: "activeCell" }] : /* istanbul ignore next */ []));
     visibleColumns = computed(() => {
-        const cols = this.columns().filter(col => !col.hidden);
+        const cols = this.flattenColumns(this.columns()).filter(col => !col.hidden);
         const order = this.columnOrder();
         if (order.length > 0) {
             return order.map(key => cols.find(c => this.colKey(c) === key)).filter(Boolean);
@@ -24476,15 +24647,29 @@ class JvGridComponent {
     searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
     sortState = signal({ columnKey: '', direction: null }, ...(ngDevMode ? [{ debugName: "sortState" }] : /* istanbul ignore next */ []));
     pageIndex = signal(0, ...(ngDevMode ? [{ debugName: "pageIndex" }] : /* istanbul ignore next */ []));
-    pageSize = computed(() => this.effectiveOptions().pageSize ?? 20, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    internalPageSize = signal(null, ...(ngDevMode ? [{ debugName: "internalPageSize" }] : /* istanbul ignore next */ []));
+    pageSize = computed(() => this.internalPageSize() ?? this.effectiveOptions().pageSize ?? 20, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    pageSizeStr = computed(() => String(this.pageSize()), ...(ngDevMode ? [{ debugName: "pageSizeStr" }] : /* istanbul ignore next */ []));
+    pageSizeOptions = computed(() => (this.effectiveOptions().pageSizeOptions ?? [])
+        .filter(size => Number.isInteger(size) && size > 0)
+        .map(size => ({ label: String(size), value: String(size) })), ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
+    pageSizeInputSync = effect(() => {
+        this.options().pageSize;
+        this.internalPageSize.set(null);
+    }, ...(ngDevMode ? [{ debugName: "pageSizeInputSync" }] : /* istanbul ignore next */ []));
     searchPageResetter = effect(() => {
         this.searchTerm();
         this.pageIndex.set(0);
     }, ...(ngDevMode ? [{ debugName: "searchPageResetter" }] : /* istanbul ignore next */ []));
+    pageBoundsGuard = effect(() => {
+        const lastPage = this.effectiveTotalPages() - 1;
+        if (this.pageIndex() > lastPage)
+            this.pageIndex.set(Math.max(0, lastPage));
+    }, ...(ngDevMode ? [{ debugName: "pageBoundsGuard" }] : /* istanbul ignore next */ []));
     selectedIdSet = computed(() => {
         const fromInput = this.selectedIds();
         const fromInternal = this.internalSelectedIds();
-        const ids = fromInput.length > 0 ? fromInput : fromInternal;
+        const ids = fromInput !== null ? fromInput : fromInternal;
         return new Set(ids);
     }, ...(ngDevMode ? [{ debugName: "selectedIdSet" }] : /* istanbul ignore next */ []));
     hasActiveFilters = computed(() => Object.values(this.colFilters()).some(f => f.value.trim().length > 0), ...(ngDevMode ? [{ debugName: "hasActiveFilters" }] : /* istanbul ignore next */ []));
@@ -24556,9 +24741,8 @@ class JvGridComponent {
     }, ...(ngDevMode ? [{ debugName: "effectiveTotalItems" }] : /* istanbul ignore next */ []));
     effectiveTotalPages = computed(() => Math.max(1, Math.ceil(this.effectiveTotalItems() / this.pageSize())), ...(ngDevMode ? [{ debugName: "effectiveTotalPages" }] : /* istanbul ignore next */ []));
     displayData = computed(() => {
-        if (this.effectiveOptions().virtualScroll) {
-            return this.sortedData();
-        }
+        if (this.virtualScrollEnabled())
+            return this.virtualDisplayData();
         if (!this.effectiveOptions().pageable)
             return this.sortedData();
         const items = this.sortedData();
@@ -24566,12 +24750,17 @@ class JvGridComponent {
         const page = Math.min(this.pageIndex(), this.effectiveTotalPages() - 1);
         return items.slice(page * ps, page * ps + ps);
     }, ...(ngDevMode ? [{ debugName: "displayData" }] : /* istanbul ignore next */ []));
-    virtualScroll = computed(() => this.effectiveOptions().virtualScroll && this.effectiveOptions().virtualScrollRowHeight, ...(ngDevMode ? [{ debugName: "virtualScroll" }] : /* istanbul ignore next */ []));
+    virtualScrollEnabled = computed(() => this.effectiveOptions().virtualScroll && !this.effectiveOptions().serverSide, ...(ngDevMode ? [{ debugName: "virtualScrollEnabled" }] : /* istanbul ignore next */ []));
     virtualStartIndex = signal(0, ...(ngDevMode ? [{ debugName: "virtualStartIndex" }] : /* istanbul ignore next */ []));
-    virtualEndIndex = signal(0, ...(ngDevMode ? [{ debugName: "virtualEndIndex" }] : /* istanbul ignore next */ []));
+    virtualEndIndex = signal(20, ...(ngDevMode ? [{ debugName: "virtualEndIndex" }] : /* istanbul ignore next */ []));
+    virtualRangeResetter = effect(() => {
+        const length = this.sortedData().length;
+        this.virtualStartIndex.set(0);
+        this.virtualEndIndex.set(Math.min(20, length));
+    }, ...(ngDevMode ? [{ debugName: "virtualRangeResetter" }] : /* istanbul ignore next */ []));
     virtualDisplayData = computed(() => {
-        if (!this.effectiveOptions().virtualScroll)
-            return this.displayData();
+        if (!this.virtualScrollEnabled())
+            return this.sortedData();
         const items = this.sortedData();
         const start = this.virtualStartIndex();
         const end = this.virtualEndIndex();
@@ -24617,6 +24806,95 @@ class JvGridComponent {
         return count;
     }, ...(ngDevMode ? [{ debugName: "colspan" }] : /* istanbul ignore next */ []));
     densityClass = computed(() => `jv-grid-density--${this.resolvedOptions().density ?? 'normal'}`, ...(ngDevMode ? [{ debugName: "densityClass" }] : /* istanbul ignore next */ []));
+    cellTabIndex(rowIndex, columnIndex, col) {
+        if (!this.resolvedOptions().keyboardNavigation) {
+            return this.isCellEditable(col) ? -1 : null;
+        }
+        const active = this.activeCell();
+        return active.row === rowIndex && active.column === columnIndex ? 0 : -1;
+    }
+    flattenColumns(columns) {
+        return columns.flatMap(col => col.children?.length ? this.flattenColumns(col.children) : [col]);
+    }
+    onCellFocus(rowIndex, columnIndex) {
+        if (this.resolvedOptions().keyboardNavigation) {
+            this.activeCell.set({ row: rowIndex, column: columnIndex });
+        }
+    }
+    onCellKeydown(event, rowIndex, columnIndex) {
+        if (!this.resolvedOptions().keyboardNavigation)
+            return;
+        const target = event.target;
+        if (target !== event.currentTarget && target.closest('button, input, select, textarea, [contenteditable="true"]')) {
+            return;
+        }
+        const movement = {
+            ArrowDown: [1, 0],
+            ArrowLeft: [0, -1],
+            ArrowRight: [0, 1],
+        };
+        if (event.key === 'ArrowUp' && rowIndex === 0) {
+            event.preventDefault();
+            this.activeCell.set({ row: 0, column: columnIndex });
+            const table = event.currentTarget.closest('table');
+            table?.querySelector(`[data-column-index="${columnIndex}"][role="columnheader"]`)?.focus();
+            return;
+        }
+        const delta = event.key === 'ArrowUp' ? [-1, 0] : movement[event.key];
+        if (!delta)
+            return;
+        const nextRow = rowIndex + delta[0];
+        const nextColumn = columnIndex + delta[1];
+        const rows = this.displayData();
+        const columns = this.visibleColumns();
+        if (nextRow < 0 || nextRow >= rows.length || nextColumn < 0 || nextColumn >= columns.length)
+            return;
+        event.preventDefault();
+        this.activeCell.set({ row: nextRow, column: nextColumn });
+        const table = event.currentTarget.closest('table');
+        const nextCell = table?.querySelector(`.jv-grid-keyboard-cell[data-row-index="${nextRow}"][data-column-index="${nextColumn}"]`);
+        nextCell?.focus();
+    }
+    onCellF2(event, rowIndex, columnIndex) {
+        if (!this.resolvedOptions().keyboardNavigation)
+            return;
+        const col = this.visibleColumns()[columnIndex];
+        const row = this.displayData()[rowIndex];
+        if (!col || !row || !this.isCellEditable(col))
+            return;
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        this.startEdit(row, col, event);
+    }
+    onHeaderFocus(columnIndex) {
+        if (this.resolvedOptions().keyboardNavigation) {
+            this.activeCell.set({ row: 0, column: columnIndex });
+        }
+    }
+    onHeaderKeydown(event, columnIndex) {
+        if (!this.resolvedOptions().keyboardNavigation)
+            return;
+        if (event.key === 'ArrowDown') {
+            const table = event.currentTarget.closest('table');
+            const firstCell = table?.querySelector(`.jv-grid-keyboard-cell[data-row-index="0"][data-column-index="${columnIndex}"]`);
+            if (firstCell) {
+                event.preventDefault();
+                this.activeCell.set({ row: 0, column: columnIndex });
+                firstCell.focus();
+            }
+            return;
+        }
+        const delta = event.key === 'ArrowLeft' ? -1 : event.key === 'ArrowRight' ? 1 : 0;
+        if (!delta)
+            return;
+        const nextColumn = columnIndex + delta;
+        if (nextColumn < 0 || nextColumn >= this.visibleColumns().length)
+            return;
+        event.preventDefault();
+        this.activeCell.set({ row: 0, column: nextColumn });
+        const table = event.currentTarget.closest('table');
+        table?.querySelector(`[data-column-index="${nextColumn}"][role="columnheader"]`)?.focus();
+    }
     editState = signal(null, ...(ngDevMode ? [{ debugName: "editState" }] : /* istanbul ignore next */ []));
     t = (key, params) => this.translationService.translate(key, params);
     getRowId(row, index) {
@@ -24626,6 +24904,11 @@ class JvGridComponent {
         const tb = this.trackBy();
         if (typeof tb === 'function')
             return tb(row, index ?? 0);
+        if (row && typeof row === 'object' && ('id' in row)) {
+            const id = row.id;
+            if (typeof id === 'string' || typeof id === 'number')
+                return id;
+        }
         if (index !== undefined)
             return index;
         return this.data().indexOf(row);
@@ -24641,8 +24924,106 @@ class JvGridComponent {
     }
     getEditValue(row, col) {
         const val = this.getCellValue(row, col);
+        const editType = this.editType(col);
+        if (editType === 'date')
+            return this.toDateInputValue(val);
+        if (editType === 'datetime')
+            return this.toDateTimeInputValue(val);
+        if (editType === 'time')
+            return this.toTimeInputValue(val);
         return val == null ? '' : String(val);
     }
+    getBooleanEditValue(row, col) {
+        const value = this.getCellValue(row, col);
+        return value === true || value === 'true' || value === 1 || value === '1';
+    }
+    isBooleanTrue(value) {
+        return value === true || value === 'true' || value === 1 || value === '1';
+    }
+    editType(col) {
+        if (col.editType)
+            return col.editType;
+        switch (col.type) {
+            case 'integer':
+            case 'number':
+            case 'currency':
+            case 'percent':
+                return 'number';
+            case 'date':
+                return 'date';
+            case 'time':
+                return 'time';
+            case 'datetime':
+                return 'datetime';
+            case 'boolean':
+                return 'boolean';
+            default:
+                return 'text';
+        }
+    }
+    inputType(col) {
+        switch (this.editType(col)) {
+            case 'number': return 'number';
+            case 'date': return 'date';
+            case 'time': return 'time';
+            case 'datetime': return 'datetime-local';
+            default: return 'text';
+        }
+    }
+    normalizeEditValue(col, value) {
+        switch (this.editType(col)) {
+            case 'number': {
+                if (value === '' || value == null)
+                    return null;
+                const number = Number(value);
+                return Number.isFinite(number) ? number : null;
+            }
+            case 'date':
+                return this.toDateInputValue(value) || null;
+            case 'datetime': {
+                if (value === '' || value == null)
+                    return null;
+                const date = new Date(String(value));
+                return Number.isNaN(date.getTime()) ? null : date.toISOString();
+            }
+            case 'time': {
+                if (value === '' || value == null)
+                    return null;
+                const time = String(value);
+                return /^\d{2}:\d{2}$/.test(time) ? `${time}:00` : time;
+            }
+            case 'boolean':
+                return Boolean(value);
+            default:
+                return value;
+        }
+    }
+    toDateInputValue(value) {
+        if (typeof value === 'string') {
+            const match = value.match(/^\d{4}-\d{2}-\d{2}/);
+            if (match)
+                return match[0];
+        }
+        const date = this.formatService.toDate(value);
+        if (!date)
+            return '';
+        return `${date.getUTCFullYear()}-${String(date.getUTCMonth() + 1).padStart(2, '0')}-${String(date.getUTCDate()).padStart(2, '0')}`;
+    }
+    toDateTimeInputValue(value) {
+        const date = this.formatService.toDate(value);
+        if (!date)
+            return '';
+        const pad = (part) => String(part).padStart(2, '0');
+        return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
+    }
+    toTimeInputValue(value) {
+        if (typeof value === 'string' && /^\d{2}:\d{2}(:\d{2})?$/.test(value))
+            return value.slice(0, 5);
+        const date = this.formatService.toDate(value);
+        if (!date)
+            return '';
+        return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
+    }
     formatValue(value, col, _row) {
         if (value == null)
             return '';
@@ -24728,7 +25109,7 @@ class JvGridComponent {
         return (this.resolvedOptions().editable || col.editable === true) && col.editable !== false;
     }
     groupColspan(group) {
-        return group.children?.length ?? 1;
+        return this.flattenColumns(group.children ?? []).filter(col => !col.hidden).length || 1;
     }
     isEditingCell(row, col) {
         const es = this.editState();
@@ -24745,30 +25126,28 @@ class JvGridComponent {
         }));
     }
     findColumn(key) {
-        return this.columns().find(c => this.colKey(c) === key) ?? { key, header: key };
+        return this.visibleColumns().find(c => this.colKey(c) === key) ?? { key, header: key };
     }
     toggleSort(col, event) {
-        if (!event || !(event instanceof KeyboardEvent && event.key === ' ')) {
-            if (col.sortable === false || !this.resolvedOptions().sortable)
-                return;
-            if (event instanceof KeyboardEvent)
-                event.preventDefault();
-            const key = this.colKey(col);
-            const current = this.sortState();
-            let direction;
-            if (current.columnKey !== key) {
-                direction = 'asc';
-            }
-            else if (current.direction === 'asc') {
-                direction = 'desc';
-            }
-            else {
-                direction = null;
-            }
-            this.sortState.set({ columnKey: direction ? key : '', direction });
-            this.pageIndex.set(0);
-            this.sortChange.emit({ columnKey: direction ? key : '', direction });
+        if (col.sortable === false || !this.resolvedOptions().sortable)
+            return;
+        if (event instanceof KeyboardEvent)
+            event.preventDefault();
+        const key = this.colKey(col);
+        const current = this.sortState();
+        let direction;
+        if (current.columnKey !== key) {
+            direction = 'asc';
         }
+        else if (current.direction === 'asc') {
+            direction = 'desc';
+        }
+        else {
+            direction = null;
+        }
+        this.sortState.set({ columnKey: direction ? key : '', direction });
+        this.pageIndex.set(0);
+        this.sortChange.emit({ columnKey: direction ? key : '', direction });
     }
     actionVariant = (v) => v === 'primary' ? 'primary' : v === 'danger' ? 'danger' : 'ghost';
     onSearchInput(value) {
@@ -24786,29 +25165,37 @@ class JvGridComponent {
     }
     toggleRow(row) {
         const id = this.getRowId(row);
-        this.internalSelectedIds.update(ids => {
-            const set = new Set(ids);
-            if (set.has(id))
-                set.delete(id);
-            else
-                set.add(id);
-            return Array.from(set);
-        });
-        this.selectionChange.emit(this.internalSelectedIds());
+        const set = new Set(this.selectedIdSet());
+        if (set.has(id))
+            set.delete(id);
+        else
+            set.add(id);
+        const nextIds = Array.from(set);
+        if (this.selectedIds() === null)
+            this.internalSelectedIds.set(nextIds);
+        this.selectionChange.emit(nextIds);
+    }
+    onPageSizeChange(value) {
+        const pageSize = Number(value);
+        if (!Number.isInteger(pageSize) || pageSize <= 0)
+            return;
+        this.internalPageSize.set(pageSize);
+        this.pageIndex.set(0);
+        this.pageChange.emit({ pageIndex: 0, pageSize });
     }
     toggleSelectAll(checked) {
-        this.internalSelectedIds.update(ids => {
-            const set = new Set(ids);
-            const rows = this.displayData();
-            rows.forEach(r => {
-                if (checked)
-                    set.add(this.getRowId(r));
-                else
-                    set.delete(this.getRowId(r));
-            });
-            return Array.from(set);
+        const set = new Set(this.selectedIdSet());
+        const rows = this.displayData();
+        rows.forEach(r => {
+            if (checked)
+                set.add(this.getRowId(r));
+            else
+                set.delete(this.getRowId(r));
         });
-        this.selectionChange.emit(this.internalSelectedIds());
+        const nextIds = Array.from(set);
+        if (this.selectedIds() === null)
+            this.internalSelectedIds.set(nextIds);
+        this.selectionChange.emit(nextIds);
     }
     onRowClick(event, row) {
         if (event instanceof Event) {
@@ -24847,33 +25234,52 @@ class JvGridComponent {
     startEdit(row, col, event) {
         if (!this.isCellEditable(col))
             return;
-        if (col.type === 'boolean')
-            return;
+        const cell = event.currentTarget;
         event.preventDefault();
         this.editState.set({ rowId: this.getRowId(row), colKey: this.colKey(col) });
+        setTimeout(() => {
+            const editor = cell?.querySelector('input:not(.jv-grid-checkbox), .jv-grid-checkbox, select');
+            editor?.focus();
+            if (editor instanceof HTMLInputElement && editor.type !== 'checkbox')
+                editor.select();
+        });
     }
     commitEdit(row, col, value) {
         const colKey = this.colKey(col);
-        if (this.editState()?.colKey === colKey) {
+        if (this.editState()?.rowId === this.getRowId(row) && this.editState()?.colKey === colKey) {
             this.rowEdit.emit({ row, column: col, value });
             this.editState.set(null);
         }
     }
+    commitEditFromKeyboard(event, row, col, value) {
+        event.stopPropagation();
+        const cell = event.currentTarget.closest('.jv-grid-keyboard-cell');
+        this.commitEdit(row, col, value);
+        setTimeout(() => cell?.focus());
+    }
     cancelEdit() {
         this.editState.set(null);
     }
     onEditValueChange(row, col, value) {
-        this.commitEdit(row, col, value);
+        const option = col.editOptions?.find(item => String(item.value) === value);
+        this.commitEdit(row, col, option?.value ?? value);
     }
     // Column resizing
     resizeData = null;
+    constructor() {
+        this.destroyRef.onDestroy(() => {
+            this.document.removeEventListener('mousemove', this.onResizeMove);
+            this.document.removeEventListener('mouseup', this.onResizeEnd);
+            this.resizeData = null;
+        });
+    }
     onResizeStart(event, col, _colIdx) {
         event.preventDefault();
         const th = event.target.closest('th');
         const startWidth = th.offsetWidth;
         this.resizeData = { col, startX: event.clientX, startWidth };
-        document.addEventListener('mousemove', this.onResizeMove);
-        document.addEventListener('mouseup', this.onResizeEnd);
+        this.document.addEventListener('mousemove', this.onResizeMove);
+        this.document.addEventListener('mouseup', this.onResizeEnd);
     }
     onResizeMove = (event) => {
         if (!this.resizeData)
@@ -24892,8 +25298,8 @@ class JvGridComponent {
             this.columnResize.emit({ columnKey: key, width: w });
         }
         this.resizeData = null;
-        document.removeEventListener('mousemove', this.onResizeMove);
-        document.removeEventListener('mouseup', this.onResizeEnd);
+        this.document.removeEventListener('mousemove', this.onResizeMove);
+        this.document.removeEventListener('mouseup', this.onResizeEnd);
     };
     // Column reordering
     dragIndex = null;
@@ -24927,7 +25333,7 @@ class JvGridComponent {
     }
     // Virtual scrolling
     onVirtualScroll(target) {
-        if (!this.effectiveOptions().virtualScroll)
+        if (!this.virtualScrollEnabled())
             return;
         const rowHeight = this.effectiveOptions().virtualScrollRowHeight ?? 48;
         const buffer = 5;
@@ -24975,7 +25381,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)"
@@ -24999,11 +25405,11 @@ class JvGridComponent {
       } @else {
         <div
           class="jv-grid-table-wrap"
-          [class.jv-grid-virtual]="resolvedOptions().virtualScroll"
+          [class.jv-grid-virtual]="virtualScrollEnabled()"
           #tableWrap
           (scroll)="onVirtualScroll($any($event.target))"
         >
-          @if (resolvedOptions().virtualScroll) {
+          @if (virtualScrollEnabled()) {
             <div class="jv-grid-virtual-spacer" [style.height.px]="virtualTotalHeight()"></div>
           }
           <table
@@ -25011,9 +25417,9 @@ class JvGridComponent {
             role="grid"
             [attr.aria-label]="resolvedOptions().ariaLabel || gridLabel()"
             [attr.aria-rowcount]="effectiveTotalItems()"
-            [attr.aria-colcount]="visibleColumns().length"
+            [attr.aria-colcount]="colspan()"
             [class]="densityClass()"
-            [style.position]="resolvedOptions().virtualScroll ? 'relative' : null"
+            [style.position]="virtualScrollEnabled() ? 'relative' : null"
             [style.top.px]="virtualOffsetY()"
           >
             <caption class="sr-only">{{ resolvedOptions().ariaLabel || gridLabel() }}</caption>
@@ -25081,12 +25487,16 @@ class JvGridComponent {
                     [style.width]="getColumnWidth(col)"
                     [style.min-width]="col.minWidth || undefined"
                     [style.max-width]="col.maxWidth || undefined"
-                    scope="col"
-                    [attr.aria-sort]="getAriaSort(col)"
-                    [attr.aria-label]="getSortLabel(col)"
-                    [tabindex]="col.sortable !== false && resolvedOptions().sortable ? 0 : -1"
-                    (click)="toggleSort(col)"
-                    (keydown.enter)="toggleSort(col)"
+                     scope="col"
+                     role="columnheader"
+                     [attr.data-column-index]="colIdx"
+                     [attr.aria-sort]="getAriaSort(col)"
+                     [attr.aria-label]="getSortLabel(col)"
+                     [tabindex]="resolvedOptions().keyboardNavigation ? (activeCell().column === colIdx ? 0 : -1) : (col.sortable !== false && resolvedOptions().sortable ? 0 : -1)"
+                     (click)="toggleSort(col)"
+                     (focus)="onHeaderFocus(colIdx)"
+                     (keydown)="onHeaderKeydown($event, colIdx)"
+                     (keydown.enter)="toggleSort(col)"
                     (keydown.space)="toggleSort(col, $event)"
                     draggable="{{ resolvedOptions().reorderableColumns ? 'true' : 'false' }}"
                     (dragstart)="onDragStart($event, colIdx)"
@@ -25187,9 +25597,10 @@ class JvGridComponent {
                         />
                       </td>
                     }
-                    @for (col of visibleColumns(); track colKey(col)) {
+                    @for (col of visibleColumns(); track colKey(col); let colIdx = $index) {
                       <td
                         class="jv-grid-td"
+                        [attr.role]="resolvedOptions().keyboardNavigation ? 'gridcell' : null"
                         [class]="col.cellClass || ''"
                         [class.jv-grid-td-sticky-left]="isStickyLeft(col)"
                         [class.jv-grid-td-sticky-right]="isStickyRight(col)"
@@ -25197,30 +25608,38 @@ class JvGridComponent {
                         [style.text-align]="col.align ?? 'start'"
                         (dblclick)="startEdit(row, col, $event)"
                         (keydown.enter)="startEdit(row, col, $event)"
-                        [tabindex]="isCellEditable(col) ? -1 : null"
+                        [attr.data-row-index]="rowIdx"
+                        [attr.data-column-index]="colIdx"
+                        [class.jv-grid-keyboard-cell]="resolvedOptions().keyboardNavigation"
+                        [attr.tabindex]="cellTabIndex(rowIdx, colIdx, col)"
+                        (focus)="onCellFocus(rowIdx, colIdx)"
+                        (keydown.f2)="onCellF2($event, rowIdx, colIdx)"
+                        (keydown)="onCellKeydown($event, rowIdx, colIdx)"
                       >
                         @if (isEditingCell(row, col)) {
-                          @if (col.editType === 'select' && col.editOptions) {
+                          @if (editType(col) === 'select' && col.editOptions) {
                             <jv-select
                               [options]="getEditOptions(col)"
                               [modelValue]="getEditValue(row, col)"
                               (selectionChange)="onEditValueChange(row, col, $event)"
                             />
-                          } @else if (col.editType === 'boolean') {
+                          } @else if (editType(col) === 'boolean') {
                             <input
                               type="checkbox"
                               class="jv-grid-checkbox"
-                              [checked]="getCellValue(row, col) === true"
-                              (change)="commitEdit(row, col, $any($event.target).checked)"
+                              [checked]="getBooleanEditValue(row, col)"
+                              (change)="commitEdit(row, col, normalizeEditValue(col, $any($event.target).checked))"
+                              (keydown.enter)="commitEditFromKeyboard($event, row, col, normalizeEditValue(col, $any($event.target).checked))"
+                              (keydown.escape)="cancelEdit()"
                               [attr.aria-label]="col.header"
                             />
                           } @else {
                             <input
                               class="jv-grid-edit-input"
-                              [type]="col.editType === 'number' ? 'number' : 'text'"
+                              [type]="inputType(col)"
                               [value]="getEditValue(row, col)"
-                              (blur)="commitEdit(row, col, $any($event.target).value)"
-                              (keydown.enter)="commitEdit(row, col, $any($event.target).value)"
+                              (blur)="commitEdit(row, col, normalizeEditValue(col, $any($event.target).value))"
+                              (keydown.enter)="commitEditFromKeyboard($event, row, col, normalizeEditValue(col, $any($event.target).value))"
                               (keydown.escape)="cancelEdit()"
                               autofocus
                             />
@@ -25228,10 +25647,10 @@ class JvGridComponent {
                         } @else {
                           @let value = getCellValue(row, col);
                           @if (col.type === 'boolean') {
-                            @if (value) {
-                              <span class="jv-grid-boolean jv-grid-boolean-true" aria-label="true">✓</span>
+                            @if (isBooleanTrue(value)) {
+                              <span class="jv-grid-boolean jv-grid-boolean-true" [attr.aria-label]="t('grid.booleanYes')">{{ t('grid.booleanYes') }}</span>
                             } @else {
-                              <span class="jv-grid-boolean jv-grid-boolean-false" aria-label="false">✗</span>
+                              <span class="jv-grid-boolean jv-grid-boolean-false" [attr.aria-label]="t('grid.booleanNo')">{{ t('grid.booleanNo') }}</span>
                             }
                           } @else if (col.format) {
                             {{ col.format(value, row) }}
@@ -25268,13 +25687,21 @@ class JvGridComponent {
         </div>
       }
 
-      @if (resolvedOptions().pageable && effectiveTotalPages() > 1 && !resolvedOptions().loading) {
+      @if (resolvedOptions().pageable && !virtualScrollEnabled() && effectiveTotalPages() > 1 && !resolvedOptions().loading) {
         <nav class="jv-grid-pagination" role="navigation" [attr.aria-label]="t('grid.paginationLabel', { label: '' })">
           <div class="jv-grid-pagination-info" aria-live="polite" aria-atomic="true">
             {{ t('grid.itemsShowing', { start: pageStart(), end: pageEnd(), total: effectiveTotalItems() }) }}
           </div>
-          <div class="jv-grid-pagination-controls">
-            <jv-button
+            <div class="jv-grid-pagination-controls">
+              @if (pageSizeOptions().length > 0) {
+                <jv-select
+                  [options]="pageSizeOptions()"
+                  [modelValue]="pageSizeStr()"
+                  [ariaLabel]="t('grid.itemsPerPage')"
+                  (selectionChange)="onPageSizeChange($event)"
+                />
+              }
+              <jv-button
               variant="outline"
               icon="chevrons-left"
               [disabled]="pageIndex() === 0"
@@ -25314,7 +25741,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-keyboard-cell:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.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 +25753,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)"
@@ -25350,11 +25777,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       } @else {
         <div
           class="jv-grid-table-wrap"
-          [class.jv-grid-virtual]="resolvedOptions().virtualScroll"
+          [class.jv-grid-virtual]="virtualScrollEnabled()"
           #tableWrap
           (scroll)="onVirtualScroll($any($event.target))"
         >
-          @if (resolvedOptions().virtualScroll) {
+          @if (virtualScrollEnabled()) {
             <div class="jv-grid-virtual-spacer" [style.height.px]="virtualTotalHeight()"></div>
           }
           <table
@@ -25362,9 +25789,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             role="grid"
             [attr.aria-label]="resolvedOptions().ariaLabel || gridLabel()"
             [attr.aria-rowcount]="effectiveTotalItems()"
-            [attr.aria-colcount]="visibleColumns().length"
+            [attr.aria-colcount]="colspan()"
             [class]="densityClass()"
-            [style.position]="resolvedOptions().virtualScroll ? 'relative' : null"
+            [style.position]="virtualScrollEnabled() ? 'relative' : null"
             [style.top.px]="virtualOffsetY()"
           >
             <caption class="sr-only">{{ resolvedOptions().ariaLabel || gridLabel() }}</caption>
@@ -25432,12 +25859,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     [style.width]="getColumnWidth(col)"
                     [style.min-width]="col.minWidth || undefined"
                     [style.max-width]="col.maxWidth || undefined"
-                    scope="col"
-                    [attr.aria-sort]="getAriaSort(col)"
-                    [attr.aria-label]="getSortLabel(col)"
-                    [tabindex]="col.sortable !== false && resolvedOptions().sortable ? 0 : -1"
-                    (click)="toggleSort(col)"
-                    (keydown.enter)="toggleSort(col)"
+                     scope="col"
+                     role="columnheader"
+                     [attr.data-column-index]="colIdx"
+                     [attr.aria-sort]="getAriaSort(col)"
+                     [attr.aria-label]="getSortLabel(col)"
+                     [tabindex]="resolvedOptions().keyboardNavigation ? (activeCell().column === colIdx ? 0 : -1) : (col.sortable !== false && resolvedOptions().sortable ? 0 : -1)"
+                     (click)="toggleSort(col)"
+                     (focus)="onHeaderFocus(colIdx)"
+                     (keydown)="onHeaderKeydown($event, colIdx)"
+                     (keydown.enter)="toggleSort(col)"
                     (keydown.space)="toggleSort(col, $event)"
                     draggable="{{ resolvedOptions().reorderableColumns ? 'true' : 'false' }}"
                     (dragstart)="onDragStart($event, colIdx)"
@@ -25538,9 +25969,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         />
                       </td>
                     }
-                    @for (col of visibleColumns(); track colKey(col)) {
+                    @for (col of visibleColumns(); track colKey(col); let colIdx = $index) {
                       <td
                         class="jv-grid-td"
+                        [attr.role]="resolvedOptions().keyboardNavigation ? 'gridcell' : null"
                         [class]="col.cellClass || ''"
                         [class.jv-grid-td-sticky-left]="isStickyLeft(col)"
                         [class.jv-grid-td-sticky-right]="isStickyRight(col)"
@@ -25548,30 +25980,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         [style.text-align]="col.align ?? 'start'"
                         (dblclick)="startEdit(row, col, $event)"
                         (keydown.enter)="startEdit(row, col, $event)"
-                        [tabindex]="isCellEditable(col) ? -1 : null"
+                        [attr.data-row-index]="rowIdx"
+                        [attr.data-column-index]="colIdx"
+                        [class.jv-grid-keyboard-cell]="resolvedOptions().keyboardNavigation"
+                        [attr.tabindex]="cellTabIndex(rowIdx, colIdx, col)"
+                        (focus)="onCellFocus(rowIdx, colIdx)"
+                        (keydown.f2)="onCellF2($event, rowIdx, colIdx)"
+                        (keydown)="onCellKeydown($event, rowIdx, colIdx)"
                       >
                         @if (isEditingCell(row, col)) {
-                          @if (col.editType === 'select' && col.editOptions) {
+                          @if (editType(col) === 'select' && col.editOptions) {
                             <jv-select
                               [options]="getEditOptions(col)"
                               [modelValue]="getEditValue(row, col)"
                               (selectionChange)="onEditValueChange(row, col, $event)"
                             />
-                          } @else if (col.editType === 'boolean') {
+                          } @else if (editType(col) === 'boolean') {
                             <input
                               type="checkbox"
                               class="jv-grid-checkbox"
-                              [checked]="getCellValue(row, col) === true"
-                              (change)="commitEdit(row, col, $any($event.target).checked)"
+                              [checked]="getBooleanEditValue(row, col)"
+                              (change)="commitEdit(row, col, normalizeEditValue(col, $any($event.target).checked))"
+                              (keydown.enter)="commitEditFromKeyboard($event, row, col, normalizeEditValue(col, $any($event.target).checked))"
+                              (keydown.escape)="cancelEdit()"
                               [attr.aria-label]="col.header"
                             />
                           } @else {
                             <input
                               class="jv-grid-edit-input"
-                              [type]="col.editType === 'number' ? 'number' : 'text'"
+                              [type]="inputType(col)"
                               [value]="getEditValue(row, col)"
-                              (blur)="commitEdit(row, col, $any($event.target).value)"
-                              (keydown.enter)="commitEdit(row, col, $any($event.target).value)"
+                              (blur)="commitEdit(row, col, normalizeEditValue(col, $any($event.target).value))"
+                              (keydown.enter)="commitEditFromKeyboard($event, row, col, normalizeEditValue(col, $any($event.target).value))"
                               (keydown.escape)="cancelEdit()"
                               autofocus
                             />
@@ -25579,10 +26019,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         } @else {
                           @let value = getCellValue(row, col);
                           @if (col.type === 'boolean') {
-                            @if (value) {
-                              <span class="jv-grid-boolean jv-grid-boolean-true" aria-label="true">✓</span>
+                            @if (isBooleanTrue(value)) {
+                              <span class="jv-grid-boolean jv-grid-boolean-true" [attr.aria-label]="t('grid.booleanYes')">{{ t('grid.booleanYes') }}</span>
                             } @else {
-                              <span class="jv-grid-boolean jv-grid-boolean-false" aria-label="false">✗</span>
+                              <span class="jv-grid-boolean jv-grid-boolean-false" [attr.aria-label]="t('grid.booleanNo')">{{ t('grid.booleanNo') }}</span>
                             }
                           } @else if (col.format) {
                             {{ col.format(value, row) }}
@@ -25619,13 +26059,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         </div>
       }
 
-      @if (resolvedOptions().pageable && effectiveTotalPages() > 1 && !resolvedOptions().loading) {
+      @if (resolvedOptions().pageable && !virtualScrollEnabled() && effectiveTotalPages() > 1 && !resolvedOptions().loading) {
         <nav class="jv-grid-pagination" role="navigation" [attr.aria-label]="t('grid.paginationLabel', { label: '' })">
           <div class="jv-grid-pagination-info" aria-live="polite" aria-atomic="true">
             {{ t('grid.itemsShowing', { start: pageStart(), end: pageEnd(), total: effectiveTotalItems() }) }}
           </div>
-          <div class="jv-grid-pagination-controls">
-            <jv-button
+            <div class="jv-grid-pagination-controls">
+              @if (pageSizeOptions().length > 0) {
+                <jv-select
+                  [options]="pageSizeOptions()"
+                  [modelValue]="pageSizeStr()"
+                  [ariaLabel]="t('grid.itemsPerPage')"
+                  (selectionChange)="onPageSizeChange($event)"
+                />
+              }
+              <jv-button
               variant="outline"
               icon="chevrons-left"
               [disabled]="pageIndex() === 0"
@@ -25665,8 +26113,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         </nav>
       }
     </div>
-  `, 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"] }]
-        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], selectedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIds", required: false }] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowDoubleClick: [{ type: i0.Output, args: ["rowDoubleClick"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], columnFilter: [{ type: i0.Output, args: ["columnFilter"] }], columnResize: [{ type: i0.Output, args: ["columnResize"] }], columnReorder: [{ type: i0.Output, args: ["columnReorder"] }], rowEdit: [{ type: i0.Output, args: ["rowEdit"] }] } });
+  `, 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-keyboard-cell:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.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"] }]
+        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], selectedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIds", required: false }] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowDoubleClick: [{ type: i0.Output, args: ["rowDoubleClick"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], columnFilter: [{ type: i0.Output, args: ["columnFilter"] }], columnResize: [{ type: i0.Output, args: ["columnResize"] }], columnReorder: [{ type: i0.Output, args: ["columnReorder"] }], rowEdit: [{ type: i0.Output, args: ["rowEdit"] }] } });
 
 class JvPaginationComponent {
     translationService = inject(JvTranslationService);
@@ -25765,7 +26213,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,