@devjuliovilla/jv-ui 1.17.0 → 1.18.1

package/fesm2022/devjuliovilla-jv-ui.mjs

@@ -19043,13 +19043,13 @@ class JvSelectComponent {
     inputId = input(`jv-select-${++selectIdSequence}`, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
     modelValue = input('', ...(ngDevMode ? [{ debugName: "modelValue" }] : /* istanbul ignore next */ []));
     selectionChange = output();
-    value = '';
+    value = signal('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     disabled = false;
     onChange = () => undefined;
     onTouched = () => undefined;
-    currentValue = computed(() => this.modelValue() || this.value, ...(ngDevMode ? [{ debugName: "currentValue" }] : /* istanbul ignore next */ []));
+    currentValue = computed(() => this.modelValue() || this.value(), ...(ngDevMode ? [{ debugName: "currentValue" }] : /* istanbul ignore next */ []));
     writeValue(value) {
-        this.value = value ?? '';
+        this.value.set(value ?? '');
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -19062,7 +19062,7 @@ class JvSelectComponent {
     }
     handleChange(event) {
         const nextValue = event.target.value;
-        this.value = nextValue;
+        this.value.set(nextValue);
         this.onChange(nextValue);
         this.selectionChange.emit(nextValue);
     }
@@ -19746,6 +19746,7 @@ class JvInputComponent {
     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-input-${++inputIdSequence}`, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
     value = '';
     disabled = false;
@@ -19772,7 +19773,7 @@ class JvInputComponent {
         this.onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: JvInputComponent, isStandalone: true, selector: "jv-input", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "describedBy", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: JvInputComponent, isStandalone: true, selector: "jv-input", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "describedBy", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => JvInputComponent),
@@ -19790,6 +19791,7 @@ class JvInputComponent {
       [disabled]="disabled"
       [attr.aria-invalid]="invalid() ? 'true' : null"
       [attr.aria-describedby]="describedBy() || null"
+      [attr.aria-label]="ariaLabel() || null"
       (input)="handleInput($event)"
       (blur)="handleBlur()"
     />
@@ -19815,11 +19817,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       [disabled]="disabled"
       [attr.aria-invalid]="invalid() ? 'true' : null"
       [attr.aria-describedby]="describedBy() || null"
+      [attr.aria-label]="ariaLabel() || null"
       (input)="handleInput($event)"
       (blur)="handleBlur()"
     />
   `, styles: [".jv-input{width:100%;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);background:var(--jv-color-surface);color:var(--jv-color-foreground)}.jv-input::placeholder{color:var(--jv-color-foreground-muted)}.jv-input.is-invalid{border-color:var(--jv-color-danger)}.jv-input:disabled{opacity:.7;cursor:not-allowed}\n"] }]
-        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "describedBy", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }] } });
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "describedBy", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }] } });
 
 class JvSectionComponent {
     title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
@@ -19912,15 +19915,15 @@ class JvChangePasswordPageComponent {
 
         <form class="auth-form" [formGroup]="form" (ngSubmit)="submit()">
           <jv-form-container label="Current password" inputId="jv-current-password" error="Current password is required" [required]="true" [invalid]="currentInvalid()">
-            <jv-input inputId="jv-current-password" type="password" formControlName="currentPassword" [invalid]="currentInvalid()" />
+            <jv-input inputId="jv-current-password" type="password" formControlName="currentPassword" [invalid]="currentInvalid()" [describedBy]="currentInvalid() ? 'jv-current-password-error' : ''" />
           </jv-form-container>
 
           <jv-form-container label="New password" inputId="jv-new-password" error="New password is required" [required]="true" [invalid]="newInvalid()">
-            <jv-input inputId="jv-new-password" type="password" formControlName="newPassword" [invalid]="newInvalid()" />
+            <jv-input inputId="jv-new-password" type="password" formControlName="newPassword" [invalid]="newInvalid()" [describedBy]="newInvalid() ? 'jv-new-password-error' : ''" />
           </jv-form-container>
 
           <jv-form-container label="Confirm new password" inputId="jv-confirm-password" error="Passwords must match" [required]="true" [invalid]="confirmInvalid()">
-            <jv-input inputId="jv-confirm-password" type="password" formControlName="confirmPassword" [invalid]="confirmInvalid()" />
+            <jv-input inputId="jv-confirm-password" type="password" formControlName="confirmPassword" [invalid]="confirmInvalid()" [describedBy]="confirmInvalid() ? 'jv-confirm-password-error' : ''" />
           </jv-form-container>
 
           <div class="auth-actions">
@@ -19930,7 +19933,7 @@ class JvChangePasswordPageComponent {
         </form>
       </jv-section>
     </jv-card>
-  `, isInline: true, styles: [".auth-form{display:grid;gap:var(--jv-spacing-md)}.auth-actions{display:flex;gap:var(--jv-spacing-sm);flex-wrap:wrap}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: JvAlertComponent, selector: "jv-alert", inputs: ["tone", "title", "role"] }, { kind: "component", type: JvButtonComponent, selector: "jv-button", inputs: ["type", "variant", "icon", "iconPosition", "loading", "disabled"] }, { kind: "component", type: JvCardComponent, selector: "jv-card", inputs: ["elevated"] }, { kind: "component", type: JvFormContainerComponent, selector: "jv-form-container", inputs: ["label", "hint", "error", "inputId", "hintId", "errorId", "required", "invalid"] }, { kind: "component", type: JvInputComponent, selector: "jv-input", inputs: ["type", "placeholder", "required", "invalid", "describedBy", "inputId"] }, { kind: "component", type: JvSectionComponent, selector: "jv-section", inputs: ["title", "description"] }] });
+  `, isInline: true, styles: [".auth-form{display:grid;gap:var(--jv-spacing-md)}.auth-actions{display:flex;gap:var(--jv-spacing-sm);flex-wrap:wrap}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: JvAlertComponent, selector: "jv-alert", inputs: ["tone", "title", "role"] }, { kind: "component", type: JvButtonComponent, selector: "jv-button", inputs: ["type", "variant", "icon", "iconPosition", "loading", "disabled"] }, { kind: "component", type: JvCardComponent, selector: "jv-card", inputs: ["elevated"] }, { kind: "component", type: JvFormContainerComponent, selector: "jv-form-container", inputs: ["label", "hint", "error", "inputId", "hintId", "errorId", "required", "invalid"] }, { kind: "component", type: JvInputComponent, selector: "jv-input", inputs: ["type", "placeholder", "required", "invalid", "describedBy", "ariaLabel", "inputId"] }, { kind: "component", type: JvSectionComponent, selector: "jv-section", inputs: ["title", "description"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvChangePasswordPageComponent, decorators: [{
             type: Component,
@@ -19943,15 +19946,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 
         <form class="auth-form" [formGroup]="form" (ngSubmit)="submit()">
           <jv-form-container label="Current password" inputId="jv-current-password" error="Current password is required" [required]="true" [invalid]="currentInvalid()">
-            <jv-input inputId="jv-current-password" type="password" formControlName="currentPassword" [invalid]="currentInvalid()" />
+            <jv-input inputId="jv-current-password" type="password" formControlName="currentPassword" [invalid]="currentInvalid()" [describedBy]="currentInvalid() ? 'jv-current-password-error' : ''" />
           </jv-form-container>
 
           <jv-form-container label="New password" inputId="jv-new-password" error="New password is required" [required]="true" [invalid]="newInvalid()">
-            <jv-input inputId="jv-new-password" type="password" formControlName="newPassword" [invalid]="newInvalid()" />
+            <jv-input inputId="jv-new-password" type="password" formControlName="newPassword" [invalid]="newInvalid()" [describedBy]="newInvalid() ? 'jv-new-password-error' : ''" />
           </jv-form-container>
 
           <jv-form-container label="Confirm new password" inputId="jv-confirm-password" error="Passwords must match" [required]="true" [invalid]="confirmInvalid()">
-            <jv-input inputId="jv-confirm-password" type="password" formControlName="confirmPassword" [invalid]="confirmInvalid()" />
+            <jv-input inputId="jv-confirm-password" type="password" formControlName="confirmPassword" [invalid]="confirmInvalid()" [describedBy]="confirmInvalid() ? 'jv-confirm-password-error' : ''" />
           </jv-form-container>
 
           <div class="auth-actions">
@@ -19998,7 +20001,7 @@ class JvForgotPasswordPageComponent {
 
         <form class="auth-form" [formGroup]="form" (ngSubmit)="submit()">
           <jv-form-container label="Email" inputId="jv-forgot-email" error="Enter a valid email" [required]="true" [invalid]="emailInvalid()">
-            <jv-input inputId="jv-forgot-email" type="email" formControlName="email" [invalid]="emailInvalid()" placeholder="you@example.com" />
+            <jv-input inputId="jv-forgot-email" type="email" formControlName="email" [invalid]="emailInvalid()" [describedBy]="emailInvalid() ? 'jv-forgot-email-error' : ''" placeholder="you@example.com" />
           </jv-form-container>
 
           <div class="auth-actions">
@@ -20008,7 +20011,7 @@ class JvForgotPasswordPageComponent {
         </form>
       </jv-section>
     </jv-card>
-  `, isInline: true, styles: [".auth-form{display:grid;gap:var(--jv-spacing-md)}.auth-actions{display:flex;gap:var(--jv-spacing-sm);flex-wrap:wrap}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: JvAlertComponent, selector: "jv-alert", inputs: ["tone", "title", "role"] }, { kind: "component", type: JvButtonComponent, selector: "jv-button", inputs: ["type", "variant", "icon", "iconPosition", "loading", "disabled"] }, { kind: "component", type: JvCardComponent, selector: "jv-card", inputs: ["elevated"] }, { kind: "component", type: JvFormContainerComponent, selector: "jv-form-container", inputs: ["label", "hint", "error", "inputId", "hintId", "errorId", "required", "invalid"] }, { kind: "component", type: JvInputComponent, selector: "jv-input", inputs: ["type", "placeholder", "required", "invalid", "describedBy", "inputId"] }, { kind: "component", type: JvSectionComponent, selector: "jv-section", inputs: ["title", "description"] }] });
+  `, isInline: true, styles: [".auth-form{display:grid;gap:var(--jv-spacing-md)}.auth-actions{display:flex;gap:var(--jv-spacing-sm);flex-wrap:wrap}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: JvAlertComponent, selector: "jv-alert", inputs: ["tone", "title", "role"] }, { kind: "component", type: JvButtonComponent, selector: "jv-button", inputs: ["type", "variant", "icon", "iconPosition", "loading", "disabled"] }, { kind: "component", type: JvCardComponent, selector: "jv-card", inputs: ["elevated"] }, { kind: "component", type: JvFormContainerComponent, selector: "jv-form-container", inputs: ["label", "hint", "error", "inputId", "hintId", "errorId", "required", "invalid"] }, { kind: "component", type: JvInputComponent, selector: "jv-input", inputs: ["type", "placeholder", "required", "invalid", "describedBy", "ariaLabel", "inputId"] }, { kind: "component", type: JvSectionComponent, selector: "jv-section", inputs: ["title", "description"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvForgotPasswordPageComponent, decorators: [{
             type: Component,
@@ -20021,7 +20024,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 
         <form class="auth-form" [formGroup]="form" (ngSubmit)="submit()">
           <jv-form-container label="Email" inputId="jv-forgot-email" error="Enter a valid email" [required]="true" [invalid]="emailInvalid()">
-            <jv-input inputId="jv-forgot-email" type="email" formControlName="email" [invalid]="emailInvalid()" placeholder="you@example.com" />
+            <jv-input inputId="jv-forgot-email" type="email" formControlName="email" [invalid]="emailInvalid()" [describedBy]="emailInvalid() ? 'jv-forgot-email-error' : ''" placeholder="you@example.com" />
           </jv-form-container>
 
           <div class="auth-actions">
@@ -20150,11 +20153,11 @@ class JvLoginPageComponent {
 
         <form class="auth-form" [formGroup]="form" (ngSubmit)="submit()">
           <jv-form-container label="Email or username" inputId="jv-login-identifier" error="This field is required" [required]="true" [invalid]="identifierInvalid()">
-            <jv-input inputId="jv-login-identifier" formControlName="identifier" [invalid]="identifierInvalid()" placeholder="you@example.com" />
+            <jv-input inputId="jv-login-identifier" formControlName="identifier" [invalid]="identifierInvalid()" [describedBy]="identifierInvalid() ? 'jv-login-identifier-error' : ''" placeholder="you@example.com" />
           </jv-form-container>
 
           <jv-form-container label="Password" inputId="jv-login-password" error="Password is required" [required]="true" [invalid]="passwordInvalid()">
-            <jv-input inputId="jv-login-password" type="password" formControlName="password" [invalid]="passwordInvalid()" placeholder="Enter your password" />
+            <jv-input inputId="jv-login-password" type="password" formControlName="password" [invalid]="passwordInvalid()" [describedBy]="passwordInvalid() ? 'jv-login-password-error' : ''" placeholder="Enter your password" />
           </jv-form-container>
 
           <div class="auth-inline-row">
@@ -20166,7 +20169,7 @@ class JvLoginPageComponent {
         </form>
       </jv-section>
     </jv-card>
-  `, isInline: true, styles: [".auth-form{display:grid;gap:var(--jv-spacing-md)}.auth-inline-row{display:flex;justify-content:space-between;align-items:center;gap:var(--jv-spacing-md);flex-wrap:wrap}.auth-link{border:0;padding:0;background:transparent;color:var(--jv-color-primary);text-decoration:underline;text-underline-offset:.18em}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: JvAlertComponent, selector: "jv-alert", inputs: ["tone", "title", "role"] }, { kind: "component", type: JvButtonComponent, selector: "jv-button", inputs: ["type", "variant", "icon", "iconPosition", "loading", "disabled"] }, { kind: "component", type: JvCardComponent, selector: "jv-card", inputs: ["elevated"] }, { kind: "component", type: JvCheckboxComponent, selector: "jv-checkbox", inputs: ["label", "describedBy", "inputId"] }, { kind: "component", type: JvFormContainerComponent, selector: "jv-form-container", inputs: ["label", "hint", "error", "inputId", "hintId", "errorId", "required", "invalid"] }, { kind: "component", type: JvInputComponent, selector: "jv-input", inputs: ["type", "placeholder", "required", "invalid", "describedBy", "inputId"] }, { kind: "component", type: JvSectionComponent, selector: "jv-section", inputs: ["title", "description"] }] });
+  `, isInline: true, styles: [".auth-form{display:grid;gap:var(--jv-spacing-md)}.auth-inline-row{display:flex;justify-content:space-between;align-items:center;gap:var(--jv-spacing-md);flex-wrap:wrap}.auth-link{border:0;padding:0;background:transparent;color:var(--jv-color-primary);text-decoration:underline;text-underline-offset:.18em}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: JvAlertComponent, selector: "jv-alert", inputs: ["tone", "title", "role"] }, { kind: "component", type: JvButtonComponent, selector: "jv-button", inputs: ["type", "variant", "icon", "iconPosition", "loading", "disabled"] }, { kind: "component", type: JvCardComponent, selector: "jv-card", inputs: ["elevated"] }, { kind: "component", type: JvCheckboxComponent, selector: "jv-checkbox", inputs: ["label", "describedBy", "inputId"] }, { kind: "component", type: JvFormContainerComponent, selector: "jv-form-container", inputs: ["label", "hint", "error", "inputId", "hintId", "errorId", "required", "invalid"] }, { kind: "component", type: JvInputComponent, selector: "jv-input", inputs: ["type", "placeholder", "required", "invalid", "describedBy", "ariaLabel", "inputId"] }, { kind: "component", type: JvSectionComponent, selector: "jv-section", inputs: ["title", "description"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvLoginPageComponent, decorators: [{
             type: Component,
@@ -20179,11 +20182,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 
         <form class="auth-form" [formGroup]="form" (ngSubmit)="submit()">
           <jv-form-container label="Email or username" inputId="jv-login-identifier" error="This field is required" [required]="true" [invalid]="identifierInvalid()">
-            <jv-input inputId="jv-login-identifier" formControlName="identifier" [invalid]="identifierInvalid()" placeholder="you@example.com" />
+            <jv-input inputId="jv-login-identifier" formControlName="identifier" [invalid]="identifierInvalid()" [describedBy]="identifierInvalid() ? 'jv-login-identifier-error' : ''" placeholder="you@example.com" />
           </jv-form-container>
 
           <jv-form-container label="Password" inputId="jv-login-password" error="Password is required" [required]="true" [invalid]="passwordInvalid()">
-            <jv-input inputId="jv-login-password" type="password" formControlName="password" [invalid]="passwordInvalid()" placeholder="Enter your password" />
+            <jv-input inputId="jv-login-password" type="password" formControlName="password" [invalid]="passwordInvalid()" [describedBy]="passwordInvalid() ? 'jv-login-password-error' : ''" placeholder="Enter your password" />
           </jv-form-container>
 
           <div class="auth-inline-row">
@@ -20568,6 +20571,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 class JvLoaderComponent {
     document = inject(DOCUMENT);
     loaderService = inject(JvLoaderService);
+    loaderPanel = viewChild('loaderPanel', ...(ngDevMode ? [{ debugName: "loaderPanel" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
             const locked = this.loaderService.isVisible();
@@ -20575,6 +20579,9 @@ class JvLoaderComponent {
             const root = this.document.documentElement;
             body.style.overflow = locked ? 'hidden' : '';
             root.style.overflow = locked ? 'hidden' : '';
+            if (locked) {
+                queueMicrotask(() => this.loaderPanel()?.nativeElement.focus());
+            }
         });
     }
     handleWheel(event) {
@@ -20588,10 +20595,10 @@ class JvLoaderComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvLoaderComponent, isStandalone: true, selector: "jv-loader", host: { listeners: { "document:wheel": "handleWheel($event)", "document:touchmove": "handleTouchMove($event)" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvLoaderComponent, isStandalone: true, selector: "jv-loader", host: { listeners: { "document:wheel": "handleWheel($event)", "document:touchmove": "handleTouchMove($event)" } }, viewQueries: [{ propertyName: "loaderPanel", first: true, predicate: ["loaderPanel"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (loaderService.isVisible()) {
       <div class="jv-loader-backdrop" aria-live="polite" aria-atomic="true">
-        <div class="jv-loader-panel" role="status">
+        <div #loaderPanel class="jv-loader-panel" role="status" tabindex="-1" aria-live="polite">
           <span class="spinner" aria-hidden="true"></span>
           <span>{{ loaderService.liveMessage() }}</span>
         </div>
@@ -20604,14 +20611,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             args: [{ selector: 'jv-loader', standalone: true, template: `
     @if (loaderService.isVisible()) {
       <div class="jv-loader-backdrop" aria-live="polite" aria-atomic="true">
-        <div class="jv-loader-panel" role="status">
+        <div #loaderPanel class="jv-loader-panel" role="status" tabindex="-1" aria-live="polite">
           <span class="spinner" aria-hidden="true"></span>
           <span>{{ loaderService.liveMessage() }}</span>
         </div>
       </div>
     }
   `, styles: [".jv-loader-backdrop{position:fixed;inset:0;z-index:1050;display:grid;place-items:center;background:#0f172a2e;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.jv-loader-panel{display:inline-flex;align-items:center;gap:var(--jv-spacing-sm);padding:var(--jv-spacing-md) var(--jv-spacing-lg);width:min(35vw,calc(100vw - 2rem));height:min(35vh,calc(100vh - 2rem));max-width:calc(100vw - 2rem);max-height:calc(100vh - 2rem);justify-content:center;border:1px solid #d6dce5;border-radius:var(--jv-radius-lg);background:#f8fafc;box-shadow:var(--jv-shadow-lg);color:#111827;text-align:center;forced-color-adjust:none}.spinner{width:1.25rem;height:1.25rem;border:2px solid currentColor;border-right-color:transparent;border-radius:999px;animation:jv-loader-spin .8s linear infinite}@media(forced-colors:active){.jv-loader-panel{border-color:#d6dce5;background:#f8fafc;color:#111827}}@keyframes jv-loader-spin{to{transform:rotate(360deg)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { handleWheel: [{
+        }], ctorParameters: () => [], propDecorators: { loaderPanel: [{ type: i0.ViewChild, args: ['loaderPanel', { isSignal: true }] }], handleWheel: [{
                 type: HostListener,
                 args: ['document:wheel', ['$event']]
             }], handleTouchMove: [{
@@ -20820,6 +20827,7 @@ class JvDialogComponent {
     previouslyFocusedElement = null;
     open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     title = input('Dialog', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
     closed = output();
     titleId = `jv-dialog-title-${Math.random().toString(36).slice(2, 8)}`;
     descriptionId = `jv-dialog-description-${Math.random().toString(36).slice(2, 8)}`;
@@ -20889,15 +20897,18 @@ class JvDialogComponent {
         return Array.from(panel.querySelectorAll('button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvDialogComponent, isStandalone: true, selector: "jv-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { listeners: { "document:keydown": "handleDocumentKeydown($event)" } }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    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 }, description: { classPropertyName: "description", publicName: "description", 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" tabindex="-1" (click)="backdropClose()" (keydown.escape)="backdropClose()">
-        <div class="jv-dialog-panel" role="dialog" aria-modal="true" tabindex="-1" [attr.aria-labelledby]="titleId" [attr.aria-describedby]="descriptionId" (click)="$event.stopPropagation()" (keydown)="$event.stopPropagation()" #panel>
+        <div class="jv-dialog-panel" role="dialog" aria-modal="true" tabindex="-1" [attr.aria-labelledby]="titleId" [attr.aria-describedby]="description() ? descriptionId : null" (click)="$event.stopPropagation()" (keydown)="$event.stopPropagation()" #panel>
           <header class="jv-dialog-header">
             <h2 [id]="titleId">{{ title() }}</h2>
+            @if (description()) {
+              <p class="jv-dialog-description" [id]="descriptionId">{{ description() }}</p>
+            }
           </header>
 
-          <div class="jv-dialog-body" [id]="descriptionId">
+          <div class="jv-dialog-body">
             <ng-content></ng-content>
           </div>
 
@@ -20914,12 +20925,15 @@ 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" tabindex="-1" (click)="backdropClose()" (keydown.escape)="backdropClose()">
-        <div class="jv-dialog-panel" role="dialog" aria-modal="true" tabindex="-1" [attr.aria-labelledby]="titleId" [attr.aria-describedby]="descriptionId" (click)="$event.stopPropagation()" (keydown)="$event.stopPropagation()" #panel>
+        <div class="jv-dialog-panel" role="dialog" aria-modal="true" tabindex="-1" [attr.aria-labelledby]="titleId" [attr.aria-describedby]="description() ? descriptionId : null" (click)="$event.stopPropagation()" (keydown)="$event.stopPropagation()" #panel>
           <header class="jv-dialog-header">
             <h2 [id]="titleId">{{ title() }}</h2>
+            @if (description()) {
+              <p class="jv-dialog-description" [id]="descriptionId">{{ description() }}</p>
+            }
           </header>
 
-          <div class="jv-dialog-body" [id]="descriptionId">
+          <div class="jv-dialog-body">
             <ng-content></ng-content>
           </div>
 
@@ -20930,7 +20944,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       </div>
     }
   `, styles: [".jv-dialog-backdrop{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:1rem;background:#0f172a80}.jv-dialog-panel{width:min(32rem,100%);max-height:calc(100vh - 2rem);overflow:auto;padding:var(--jv-spacing-lg);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-lg);background:var(--jv-color-surface);box-shadow:var(--jv-shadow-lg)}.jv-dialog-header,.jv-dialog-body,.jv-dialog-footer{display:grid;gap:var(--jv-spacing-sm)}.jv-dialog-footer{margin-top:var(--jv-spacing-lg)}h2,p{margin:0}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], handleDocumentKeydown: [{
+        }], ctorParameters: () => [], propDecorators: { panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], handleDocumentKeydown: [{
                 type: HostListener,
                 args: ['document:keydown', ['$event']]
             }] } });
@@ -20962,6 +20976,9 @@ class JvDatePickerComponent {
     disabled = false;
     resolvedDialogTitle = computed(() => this.dialogTitle() || this.translation.translate('datePicker.dialogTitle'), ...(ngDevMode ? [{ debugName: "resolvedDialogTitle" }] : /* istanbul ignore next */ []));
     currentValue = computed(() => this.valueInput() !== undefined ? this.valueInput() : this.value(), ...(ngDevMode ? [{ debugName: "currentValue" }] : /* istanbul ignore next */ []));
+    resolvedDescribedBy = computed(() => [this.describedBy(), this.invalid() ? (this.error() ? `${this.inputId()}-error` : '') : (this.hint() ? `${this.inputId()}-hint` : '')]
+        .filter(Boolean)
+        .join(' '), ...(ngDevMode ? [{ debugName: "resolvedDescribedBy" }] : /* istanbul ignore next */ []));
     triggerAriaLabel = computed(() => {
         const name = this.label() || this.resolvedDialogTitle();
         return `${name}. ${this.displayValue()}`;
@@ -21167,7 +21184,7 @@ class JvDatePickerComponent {
         [attr.aria-expanded]="dialogOpen() ? 'true' : 'false'"
         [attr.aria-controls]="dialogId"
         [attr.aria-invalid]="invalid() ? 'true' : null"
-        [attr.aria-describedby]="describedBy() || null"
+        [attr.aria-describedby]="resolvedDescribedBy() || null"
         [attr.aria-label]="triggerAriaLabel()"
         [attr.title]="displayValue()"
         (click)="openDialog()"
@@ -21224,7 +21241,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", "ariaLabel", "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", "description"], 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,
@@ -21254,7 +21271,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         [attr.aria-expanded]="dialogOpen() ? 'true' : 'false'"
         [attr.aria-controls]="dialogId"
         [attr.aria-invalid]="invalid() ? 'true' : null"
-        [attr.aria-describedby]="describedBy() || null"
+        [attr.aria-describedby]="resolvedDescribedBy() || null"
         [attr.aria-label]="triggerAriaLabel()"
         [attr.title]="displayValue()"
         (click)="openDialog()"
@@ -21356,6 +21373,7 @@ class JvFileInputComponent {
     filesRejected = output();
     dragActive = signal(false, ...(ngDevMode ? [{ debugName: "dragActive" }] : /* istanbul ignore next */ []));
     rejectionMessage = signal('', ...(ngDevMode ? [{ debugName: "rejectionMessage" }] : /* istanbul ignore next */ []));
+    rejectionId = `jv-file-input-rejection-${this.instanceId}`;
     internalFiles = signal([], ...(ngDevMode ? [{ debugName: "internalFiles" }] : /* istanbul ignore next */ []));
     currentFiles = computed(() => {
         const externalFiles = this.filesInput();
@@ -21363,6 +21381,13 @@ class JvFileInputComponent {
     }, ...(ngDevMode ? [{ debugName: "currentFiles" }] : /* istanbul ignore next */ []));
     selectionSummary = computed(() => this.translation.translate('fileInput.selectionSummary', { count: this.currentFiles().length, max: this.maxFiles() }), ...(ngDevMode ? [{ debugName: "selectionSummary" }] : /* istanbul ignore next */ []));
     dropzoneAriaLabel = computed(() => `${this.label() || this.translation.translate('fileInput.dropLabel')}. ${this.selectionSummary()}`, ...(ngDevMode ? [{ debugName: "dropzoneAriaLabel" }] : /* istanbul ignore next */ []));
+    resolvedDescribedBy = computed(() => [
+        this.describedBy(),
+        this.invalid() ? (this.error() ? `${this.inputId()}-error` : '') : (this.hint() ? `${this.inputId()}-hint` : ''),
+        this.rejectionMessage() ? this.rejectionId : '',
+    ]
+        .filter(Boolean)
+        .join(' '), ...(ngDevMode ? [{ debugName: "resolvedDescribedBy" }] : /* istanbul ignore next */ []));
     openFileDialog() {
         if (this.disabled())
             return;
@@ -21494,7 +21519,7 @@ class JvFileInputComponent {
         [attr.accept]="accept() || null"
         [attr.multiple]="multiple() ? '' : null"
         [disabled]="disabled()"
-        [attr.aria-describedby]="describedBy() || null"
+        [attr.aria-describedby]="resolvedDescribedBy() || null"
         (change)="onNativeInputChange($any($event.target).files)"
       />
 
@@ -21523,7 +21548,7 @@ class JvFileInputComponent {
       </div>
 
       @if (rejectionMessage()) {
-        <p class="jv-file-input-rejection" aria-live="polite">{{ rejectionMessage() }}</p>
+        <p class="jv-file-input-rejection" [id]="rejectionId" aria-live="polite">{{ rejectionMessage() }}</p>
       }
 
       @if (currentFiles().length > 0) {
@@ -21569,7 +21594,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         [attr.accept]="accept() || null"
         [attr.multiple]="multiple() ? '' : null"
         [disabled]="disabled()"
-        [attr.aria-describedby]="describedBy() || null"
+        [attr.aria-describedby]="resolvedDescribedBy() || null"
         (change)="onNativeInputChange($any($event.target).files)"
       />
 
@@ -21598,7 +21623,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       </div>
 
       @if (rejectionMessage()) {
-        <p class="jv-file-input-rejection" aria-live="polite">{{ rejectionMessage() }}</p>
+        <p class="jv-file-input-rejection" [id]="rejectionId" aria-live="polite">{{ rejectionMessage() }}</p>
       }
 
       @if (currentFiles().length > 0) {
@@ -21696,10 +21721,22 @@ class JvModalSelectorComponent {
     listboxId = `jv-modal-selector-listbox-${this.instanceId}`;
     resultsId = `jv-modal-selector-results-${this.instanceId}`;
     searchInputId = `jv-modal-selector-search-${this.instanceId}`;
-    value = null;
+    value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     disabled = false;
     resolvedDialogTitle = computed(() => this.dialogTitle() || this.label() || this.translation.translate('modalSelector.placeholder'), ...(ngDevMode ? [{ debugName: "resolvedDialogTitle" }] : /* istanbul ignore next */ []));
-    currentValue = computed(() => (this.valueInput() !== undefined ? this.valueInput() : this.value), ...(ngDevMode ? [{ debugName: "currentValue" }] : /* istanbul ignore next */ []));
+    currentValue = computed(() => this.valueInput() !== undefined ? this.valueInput() : this.value(), ...(ngDevMode ? [{ debugName: "currentValue" }] : /* istanbul ignore next */ []));
+    resolvedDescribedBy = computed(() => [
+        this.describedBy(),
+        this.invalid()
+            ? this.error()
+                ? `${this.inputId()}-error`
+                : ''
+            : this.hint()
+                ? `${this.inputId()}-hint`
+                : '',
+    ]
+        .filter(Boolean)
+        .join(' '), ...(ngDevMode ? [{ debugName: "resolvedDescribedBy" }] : /* istanbul ignore next */ []));
     selectedOption = computed(() => this.options().find((option) => Object.is(option.value, this.currentValue())) ?? null, ...(ngDevMode ? [{ debugName: "selectedOption" }] : /* istanbul ignore next */ []));
     resolvedPlaceholder = computed(() => this.placeholder() || this.translation.translate('modalSelector.placeholder'), ...(ngDevMode ? [{ debugName: "resolvedPlaceholder" }] : /* istanbul ignore next */ []));
     triggerAriaLabel = computed(() => {
@@ -21714,14 +21751,16 @@ class JvModalSelectorComponent {
             return this.options();
         }
         return this.options().filter((option) => {
-            const haystack = [option.label, option.description ?? '', ...(option.keywords ?? [])].join(' ').toLocaleLowerCase();
+            const haystack = [option.label, option.description ?? '', ...(option.keywords ?? [])]
+                .join(' ')
+                .toLocaleLowerCase();
             return haystack.includes(query);
         });
     }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
     onChange = () => undefined;
     onTouched = () => undefined;
     writeValue(value) {
-        this.value = value ?? null;
+        this.value.set(value ?? null);
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -21803,7 +21842,7 @@ class JvModalSelectorComponent {
         this.onTouched();
     }
     updateValue(value) {
-        this.value = value;
+        this.value.set(value);
         this.onChange(value);
         this.selectionChange.emit(value);
     }
@@ -21848,7 +21887,7 @@ class JvModalSelectorComponent {
         [attr.aria-expanded]="dialogOpen() ? 'true' : 'false'"
         [attr.aria-controls]="dialogId"
         [attr.aria-invalid]="invalid() ? 'true' : null"
-        [attr.aria-describedby]="describedBy() || null"
+        [attr.aria-describedby]="resolvedDescribedBy() || null"
         [attr.aria-label]="triggerAriaLabel()"
         (click)="openDialog()"
         (blur)="handleBlur()"
@@ -21862,27 +21901,40 @@ class JvModalSelectorComponent {
       </button>
     </jv-form-container>
 
-    <jv-dialog [open]="dialogOpen()" [title]="resolvedDialogTitle()" (closed)="closeDialog()">
+    <jv-dialog
+      [open]="dialogOpen()"
+      [title]="resolvedDialogTitle()"
+      [description]="dialogSubtitle()"
+      (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')"
+            [placeholder]="
+              searchPlaceholder() || translation.translate('modalSelector.searchPlaceholder')
+            "
+            [ariaLabel]="
+              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>
+        <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()">
+          <jv-list
+            [listId]="listboxId"
+            variant="bordered"
+            [ariaRole]="'listbox'"
+            [ariaLabel]="resolvedDialogTitle()"
+          >
             @for (option of filteredOptions(); track option.value; let index = $index) {
               <li role="presentation">
                 <div
@@ -21901,7 +21953,9 @@ class JvModalSelectorComponent {
                   <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>
+                      <span class="jv-modal-selector-option-description">{{
+                        option.description
+                      }}</span>
                     }
                   </div>
                   @if (isSelected(option)) {
@@ -21912,22 +21966,36 @@ class JvModalSelectorComponent {
             }
           </jv-list>
         } @else {
-          <div class="jv-modal-selector-empty" aria-live="polite">{{ emptyMessage() || translation.translate('modalSelector.emptyMessage') }}</div>
+          <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="ghost" (click)="clearSelection()">{{
+            clearLabel() || translation.translate('modalSelector.clear')
+          }}</jv-button>
         }
-        <jv-button variant="outline" (click)="closeDialog()">{{ closeLabel() || translation.translate('modalSelector.close') }}</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"] }] });
+  `, 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", "description"], 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", "ariaLabel", "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,
-            args: [{ selector: 'jv-modal-selector', standalone: true, imports: [FormsModule, JvButtonComponent, JvDialogComponent, JvFormContainerComponent, JvIconComponent, JvInputComponent, JvListComponent], providers: [
+            args: [{ selector: 'jv-modal-selector', standalone: true, imports: [
+                        FormsModule,
+                        JvButtonComponent,
+                        JvDialogComponent,
+                        JvFormContainerComponent,
+                        JvIconComponent,
+                        JvInputComponent,
+                        JvListComponent,
+                    ], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => JvModalSelectorComponent),
@@ -21953,7 +22021,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         [attr.aria-expanded]="dialogOpen() ? 'true' : 'false'"
         [attr.aria-controls]="dialogId"
         [attr.aria-invalid]="invalid() ? 'true' : null"
-        [attr.aria-describedby]="describedBy() || null"
+        [attr.aria-describedby]="resolvedDescribedBy() || null"
         [attr.aria-label]="triggerAriaLabel()"
         (click)="openDialog()"
         (blur)="handleBlur()"
@@ -21967,27 +22035,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       </button>
     </jv-form-container>
 
-    <jv-dialog [open]="dialogOpen()" [title]="resolvedDialogTitle()" (closed)="closeDialog()">
+    <jv-dialog
+      [open]="dialogOpen()"
+      [title]="resolvedDialogTitle()"
+      [description]="dialogSubtitle()"
+      (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')"
+            [placeholder]="
+              searchPlaceholder() || translation.translate('modalSelector.searchPlaceholder')
+            "
+            [ariaLabel]="
+              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>
+        <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()">
+          <jv-list
+            [listId]="listboxId"
+            variant="bordered"
+            [ariaRole]="'listbox'"
+            [ariaLabel]="resolvedDialogTitle()"
+          >
             @for (option of filteredOptions(); track option.value; let index = $index) {
               <li role="presentation">
                 <div
@@ -22006,7 +22087,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                   <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>
+                      <span class="jv-modal-selector-option-description">{{
+                        option.description
+                      }}</span>
                     }
                   </div>
                   @if (isSelected(option)) {
@@ -22017,15 +22100,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             }
           </jv-list>
         } @else {
-          <div class="jv-modal-selector-empty" aria-live="polite">{{ emptyMessage() || translation.translate('modalSelector.emptyMessage') }}</div>
+          <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="ghost" (click)="clearSelection()">{{
+            clearLabel() || translation.translate('modalSelector.clear')
+          }}</jv-button>
         }
-        <jv-button variant="outline" (click)="closeDialog()">{{ closeLabel() || translation.translate('modalSelector.close') }}</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"] }]
@@ -22164,7 +22253,7 @@ class JvSwitchComponent {
       </span>
       <span>{{ label() }}</span>
     </label>
-  `, isInline: true, styles: [".jv-switch{display:inline-flex;align-items:center;gap:var(--jv-spacing-sm);min-height:var(--jv-density-control-height);color:var(--jv-color-foreground)}.jv-switch.is-disabled{opacity:.7}.jv-switch-input{position:absolute;opacity:0;pointer-events:none}.jv-switch-track{position:relative;display:inline-flex;align-items:center;width:2.75rem;height:1.6rem;padding:.15rem;border-radius:999px;background:var(--jv-color-border);transition:background-color .16s ease}.jv-switch-thumb{width:1.25rem;height:1.25rem;border-radius:999px;background:#fff;box-shadow:var(--jv-shadow-sm);transition:transform .16s ease}.jv-switch-input:checked+.jv-switch-track{background:var(--jv-color-primary)}.jv-switch-input:checked+.jv-switch-track .jv-switch-thumb{transform:translate(1.1rem)}\n"] });
+  `, isInline: true, styles: [".jv-switch{display:inline-flex;align-items:center;gap:var(--jv-spacing-sm);min-height:var(--jv-density-control-height);color:var(--jv-color-foreground)}.jv-switch.is-disabled{opacity:.7}.jv-switch-input{position:absolute;opacity:0;pointer-events:none}.jv-switch-track{position:relative;display:inline-flex;align-items:center;width:2.75rem;height:1.6rem;padding:.15rem;border-radius:999px;background:var(--jv-color-border);transition:background-color .16s ease}.jv-switch-thumb{width:1.25rem;height:1.25rem;border-radius:999px;background:#fff;box-shadow:var(--jv-shadow-sm);transition:transform .16s ease}.jv-switch-input:checked+.jv-switch-track{background:var(--jv-color-primary)}.jv-switch-input:checked+.jv-switch-track .jv-switch-thumb{transform:translate(1.1rem)}.jv-switch-input:focus-visible+.jv-switch-track{outline:2px solid var(--jv-color-primary);outline-offset:2px}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvSwitchComponent, decorators: [{
             type: Component,
@@ -22192,7 +22281,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       </span>
       <span>{{ label() }}</span>
     </label>
-  `, styles: [".jv-switch{display:inline-flex;align-items:center;gap:var(--jv-spacing-sm);min-height:var(--jv-density-control-height);color:var(--jv-color-foreground)}.jv-switch.is-disabled{opacity:.7}.jv-switch-input{position:absolute;opacity:0;pointer-events:none}.jv-switch-track{position:relative;display:inline-flex;align-items:center;width:2.75rem;height:1.6rem;padding:.15rem;border-radius:999px;background:var(--jv-color-border);transition:background-color .16s ease}.jv-switch-thumb{width:1.25rem;height:1.25rem;border-radius:999px;background:#fff;box-shadow:var(--jv-shadow-sm);transition:transform .16s ease}.jv-switch-input:checked+.jv-switch-track{background:var(--jv-color-primary)}.jv-switch-input:checked+.jv-switch-track .jv-switch-thumb{transform:translate(1.1rem)}\n"] }]
+  `, styles: [".jv-switch{display:inline-flex;align-items:center;gap:var(--jv-spacing-sm);min-height:var(--jv-density-control-height);color:var(--jv-color-foreground)}.jv-switch.is-disabled{opacity:.7}.jv-switch-input{position:absolute;opacity:0;pointer-events:none}.jv-switch-track{position:relative;display:inline-flex;align-items:center;width:2.75rem;height:1.6rem;padding:.15rem;border-radius:999px;background:var(--jv-color-border);transition:background-color .16s ease}.jv-switch-thumb{width:1.25rem;height:1.25rem;border-radius:999px;background:#fff;box-shadow:var(--jv-shadow-sm);transition:transform .16s ease}.jv-switch-input:checked+.jv-switch-track{background:var(--jv-color-primary)}.jv-switch-input:checked+.jv-switch-track .jv-switch-thumb{transform:translate(1.1rem)}.jv-switch-input:focus-visible+.jv-switch-track{outline:2px solid var(--jv-color-primary);outline-offset:2px}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "describedBy", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }] } });
 
 let textareaIdSequence = 0;
@@ -22473,7 +22562,7 @@ class JvImageGalleryComponent {
         </div>
       </jv-dialog>
     </div>
-  `, isInline: true, styles: [".jv-gallery{display:block;width:100%;max-width:100vw}.jv-gallery-strip{display:flex;gap:5px;width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x proximity;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.jv-gallery-strip::-webkit-scrollbar{display:none}.jv-gallery-thumb{flex:0 0 auto;width:calc((100vw - 20px)/4);min-width:120px;height:100%;padding:0;border:2px solid transparent;border-radius:var(--jv-radius-sm);background:transparent;cursor:pointer;overflow:hidden;scroll-snap-align:start;transition:border-color .16s ease,opacity .16s ease}.jv-gallery-thumb:hover{opacity:.85}.jv-gallery-thumb--active{border-color:var(--jv-color-primary)}.jv-gallery-thumb:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:1px}.jv-gallery-thumb-image{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}.jv-gallery-viewer{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:70vh;min-height:300px;background:#000;border-radius:var(--jv-radius-md);overflow:hidden}.jv-gallery-viewer:focus{outline:none}.jv-gallery-viewer-image{display:block;max-width:100%;max-height:100%;object-fit:contain;-webkit-user-select:none;user-select:none}@keyframes gallery-slide-left{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes gallery-slide-right{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}.jv-gallery-viewer-image--slide-left{animation:gallery-slide-left .28s ease-out}.jv-gallery-viewer-image--slide-right{animation:gallery-slide-right .28s ease-out}.jv-gallery-viewer-nav{position:absolute;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:3rem;height:3rem;border:none;border-radius:var(--jv-radius-md);background:#00000080;color:#fff;cursor:pointer;transition:background-color .16s ease;z-index:1}.jv-gallery-viewer-nav:hover{background:#000000bf}.jv-gallery-viewer-nav:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:1px}.jv-gallery-viewer-nav--prev{left:var(--jv-spacing-md)}.jv-gallery-viewer-nav--next{right:var(--jv-spacing-md)}.jv-gallery-viewer-counter{position:absolute;bottom:var(--jv-spacing-md);left:50%;transform:translate(-50%);padding:var(--jv-spacing-xs) var(--jv-spacing-sm);border-radius:var(--jv-radius-sm);background:#0009;color:#fff;font-size:.8125rem;font-variant-numeric:tabular-nums;pointer-events:none}@media(max-width:768px){.jv-gallery-thumb{width:calc(100vw - 20px);min-width:200px}.jv-gallery-viewer-nav{width:2.5rem;height:2.5rem}.jv-gallery-viewer-nav--prev{left:var(--jv-spacing-sm)}.jv-gallery-viewer-nav--next{right:var(--jv-spacing-sm)}}@media(prefers-reduced-motion:reduce){.jv-gallery-strip{scroll-behavior:auto}.jv-gallery-viewer-image--slide-left,.jv-gallery-viewer-image--slide-right{animation:none}}\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: JvIconComponent, selector: "jv-icon", inputs: ["name", "size", "strokeWidth", "decorative", "ariaLabel"] }] });
+  `, isInline: true, styles: [".jv-gallery{display:block;width:100%;max-width:100vw}.jv-gallery-strip{display:flex;gap:5px;width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x proximity;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.jv-gallery-strip::-webkit-scrollbar{display:none}.jv-gallery-thumb{flex:0 0 auto;width:calc((100vw - 20px)/4);min-width:120px;height:100%;padding:0;border:2px solid transparent;border-radius:var(--jv-radius-sm);background:transparent;cursor:pointer;overflow:hidden;scroll-snap-align:start;transition:border-color .16s ease,opacity .16s ease}.jv-gallery-thumb:hover{opacity:.85}.jv-gallery-thumb--active{border-color:var(--jv-color-primary)}.jv-gallery-thumb:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:1px}.jv-gallery-thumb-image{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}.jv-gallery-viewer{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:70vh;min-height:300px;background:#000;border-radius:var(--jv-radius-md);overflow:hidden}.jv-gallery-viewer:focus{outline:none}.jv-gallery-viewer-image{display:block;max-width:100%;max-height:100%;object-fit:contain;-webkit-user-select:none;user-select:none}@keyframes gallery-slide-left{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes gallery-slide-right{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}.jv-gallery-viewer-image--slide-left{animation:gallery-slide-left .28s ease-out}.jv-gallery-viewer-image--slide-right{animation:gallery-slide-right .28s ease-out}.jv-gallery-viewer-nav{position:absolute;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:3rem;height:3rem;border:none;border-radius:var(--jv-radius-md);background:#00000080;color:#fff;cursor:pointer;transition:background-color .16s ease;z-index:1}.jv-gallery-viewer-nav:hover{background:#000000bf}.jv-gallery-viewer-nav:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:1px}.jv-gallery-viewer-nav--prev{left:var(--jv-spacing-md)}.jv-gallery-viewer-nav--next{right:var(--jv-spacing-md)}.jv-gallery-viewer-counter{position:absolute;bottom:var(--jv-spacing-md);left:50%;transform:translate(-50%);padding:var(--jv-spacing-xs) var(--jv-spacing-sm);border-radius:var(--jv-radius-sm);background:#0009;color:#fff;font-size:.8125rem;font-variant-numeric:tabular-nums;pointer-events:none}@media(max-width:768px){.jv-gallery-thumb{width:calc(100vw - 20px);min-width:200px}.jv-gallery-viewer-nav{width:2.5rem;height:2.5rem}.jv-gallery-viewer-nav--prev{left:var(--jv-spacing-sm)}.jv-gallery-viewer-nav--next{right:var(--jv-spacing-sm)}}@media(prefers-reduced-motion:reduce){.jv-gallery-strip{scroll-behavior:auto}.jv-gallery-viewer-image--slide-left,.jv-gallery-viewer-image--slide-right{animation:none}}\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", "description"], outputs: ["closed"] }, { kind: "component", type: JvIconComponent, selector: "jv-icon", inputs: ["name", "size", "strokeWidth", "decorative", "ariaLabel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvImageGalleryComponent, decorators: [{
             type: Component,
@@ -22614,18 +22703,14 @@ class JvImageSliderComponent {
         if (!this.hasMultiple()) {
             return;
         }
-        const newIndex = this.currentIndex() === 0
-            ? this.images().length - 1
-            : this.currentIndex() - 1;
+        const newIndex = this.currentIndex() === 0 ? this.images().length - 1 : this.currentIndex() - 1;
         this.goTo(newIndex);
     }
     next() {
         if (!this.hasMultiple()) {
             return;
         }
-        const newIndex = this.currentIndex() === this.images().length - 1
-            ? 0
-            : this.currentIndex() + 1;
+        const newIndex = this.currentIndex() === this.images().length - 1 ? 0 : this.currentIndex() + 1;
         this.goTo(newIndex);
     }
     goTo(index) {
@@ -22670,13 +22755,12 @@ class JvImageSliderComponent {
             <div
               class="jv-slider-slide"
               [class.jv-slider-slide--active]="i === currentIndex()"
+              [id]="'jv-slider-slide-' + i"
+              role="tabpanel"
+              [attr.aria-hidden]="i === currentIndex() ? 'false' : 'true'"
+              [attr.aria-label]="image.alt"
             >
-              <img
-                class="jv-slider-image"
-                [src]="image.src"
-                [alt]="image.alt"
-                loading="lazy"
-              />
+              <img class="jv-slider-image" [src]="image.src" [alt]="image.alt" loading="lazy" />
             </div>
           }
         </div>
@@ -22702,14 +22786,22 @@ class JvImageSliderComponent {
       }
 
       @if (hasMultiple() && showThumbnails()) {
-        <div class="jv-slider-thumbnails" #thumbnailStrip role="tablist" [attr.aria-label]="translatedAriaLabels().thumbnailList">
+        <div
+          class="jv-slider-thumbnails"
+          #thumbnailStrip
+          role="tablist"
+          [attr.aria-label]="translatedAriaLabels().thumbnailList"
+        >
           @for (image of images(); track image.src; let i = $index) {
             <button
               type="button"
               class="jv-slider-thumbnail"
               [class.jv-slider-thumbnail--active]="i === currentIndex()"
               role="tab"
+              [id]="'jv-slider-tab-' + i"
+              [attr.aria-controls]="'jv-slider-slide-' + i"
               [attr.aria-selected]="i === currentIndex() ? 'true' : 'false'"
+              [attr.tabindex]="i === currentIndex() ? '0' : '-1'"
               [attr.aria-label]="image.alt"
               (click)="goTo(i)"
             >
@@ -22723,9 +22815,7 @@ class JvImageSliderComponent {
           }
         </div>
 
-        <div class="jv-slider-counter">
-          {{ currentIndex() + 1 }} / {{ images().length }}
-        </div>
+        <div class="jv-slider-counter">{{ currentIndex() + 1 }} / {{ images().length }}</div>
       }
     </div>
   `, isInline: true, styles: [".jv-slider{display:grid;gap:var(--jv-spacing-sm);width:100%;max-width:100%}.jv-slider-main{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--jv-spacing-xs)}.jv-slider-stage{position:relative;aspect-ratio:16 / 9;overflow:hidden;border-radius:var(--jv-radius-md);background:var(--jv-color-surface-muted)}.jv-slider-slide{position:absolute;inset:0;opacity:0;transition:opacity .2s ease;pointer-events:none}.jv-slider-slide--active{opacity:1;pointer-events:auto}.jv-slider-image{display:block;width:100%;height:100%;object-fit:contain;-webkit-user-select:none;user-select:none}.jv-slider-nav{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);background:var(--jv-color-surface);color:var(--jv-color-foreground);cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease;flex-shrink:0;z-index:1}.jv-slider-nav:hover{background:var(--jv-color-surface-muted);border-color:var(--jv-color-foreground-muted)}.jv-slider-nav:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:1px}.jv-slider-description{padding:var(--jv-spacing-sm) 0}.jv-slider-description p{margin:0;font-size:var(--jv-density-font-size);color:var(--jv-color-foreground-muted);line-height:1.5}.jv-slider-thumbnails{display:flex;gap:var(--jv-spacing-xs);overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding:var(--jv-spacing-xs) 0}.jv-slider-thumbnails::-webkit-scrollbar{display:none}.jv-slider-thumbnail{flex:0 0 auto;width:3.5rem;height:3.5rem;padding:0;border:2px solid transparent;border-radius:var(--jv-radius-sm);background:transparent;cursor:pointer;overflow:hidden;transition:border-color .16s ease,opacity .16s ease;opacity:.6}.jv-slider-thumbnail:hover{opacity:.85}.jv-slider-thumbnail--active{border-color:var(--jv-color-primary);opacity:1}.jv-slider-thumbnail:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:1px}.jv-slider-thumbnail-image{display:block;width:100%;height:100%;object-fit:cover}.jv-slider-counter{text-align:center;font-size:.8125rem;color:var(--jv-color-foreground-muted);font-variant-numeric:tabular-nums}@media(max-width:640px){.jv-slider-nav{width:2rem;height:2rem}.jv-slider-thumbnail{width:2.75rem;height:2.75rem}}@media(prefers-reduced-motion:reduce){.jv-slider-slide{transition:none}}\n"], dependencies: [{ kind: "component", type: JvIconComponent, selector: "jv-icon", inputs: ["name", "size", "strokeWidth", "decorative", "ariaLabel"] }] });
@@ -22751,13 +22841,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             <div
               class="jv-slider-slide"
               [class.jv-slider-slide--active]="i === currentIndex()"
+              [id]="'jv-slider-slide-' + i"
+              role="tabpanel"
+              [attr.aria-hidden]="i === currentIndex() ? 'false' : 'true'"
+              [attr.aria-label]="image.alt"
             >
-              <img
-                class="jv-slider-image"
-                [src]="image.src"
-                [alt]="image.alt"
-                loading="lazy"
-              />
+              <img class="jv-slider-image" [src]="image.src" [alt]="image.alt" loading="lazy" />
             </div>
           }
         </div>
@@ -22783,14 +22872,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       }
 
       @if (hasMultiple() && showThumbnails()) {
-        <div class="jv-slider-thumbnails" #thumbnailStrip role="tablist" [attr.aria-label]="translatedAriaLabels().thumbnailList">
+        <div
+          class="jv-slider-thumbnails"
+          #thumbnailStrip
+          role="tablist"
+          [attr.aria-label]="translatedAriaLabels().thumbnailList"
+        >
           @for (image of images(); track image.src; let i = $index) {
             <button
               type="button"
               class="jv-slider-thumbnail"
               [class.jv-slider-thumbnail--active]="i === currentIndex()"
               role="tab"
+              [id]="'jv-slider-tab-' + i"
+              [attr.aria-controls]="'jv-slider-slide-' + i"
               [attr.aria-selected]="i === currentIndex() ? 'true' : 'false'"
+              [attr.tabindex]="i === currentIndex() ? '0' : '-1'"
               [attr.aria-label]="image.alt"
               (click)="goTo(i)"
             >
@@ -22804,9 +22901,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
           }
         </div>
 
-        <div class="jv-slider-counter">
-          {{ currentIndex() + 1 }} / {{ images().length }}
-        </div>
+        <div class="jv-slider-counter">{{ currentIndex() + 1 }} / {{ images().length }}</div>
       }
     </div>
   `, styles: [".jv-slider{display:grid;gap:var(--jv-spacing-sm);width:100%;max-width:100%}.jv-slider-main{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--jv-spacing-xs)}.jv-slider-stage{position:relative;aspect-ratio:16 / 9;overflow:hidden;border-radius:var(--jv-radius-md);background:var(--jv-color-surface-muted)}.jv-slider-slide{position:absolute;inset:0;opacity:0;transition:opacity .2s ease;pointer-events:none}.jv-slider-slide--active{opacity:1;pointer-events:auto}.jv-slider-image{display:block;width:100%;height:100%;object-fit:contain;-webkit-user-select:none;user-select:none}.jv-slider-nav{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);background:var(--jv-color-surface);color:var(--jv-color-foreground);cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease;flex-shrink:0;z-index:1}.jv-slider-nav:hover{background:var(--jv-color-surface-muted);border-color:var(--jv-color-foreground-muted)}.jv-slider-nav:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:1px}.jv-slider-description{padding:var(--jv-spacing-sm) 0}.jv-slider-description p{margin:0;font-size:var(--jv-density-font-size);color:var(--jv-color-foreground-muted);line-height:1.5}.jv-slider-thumbnails{display:flex;gap:var(--jv-spacing-xs);overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding:var(--jv-spacing-xs) 0}.jv-slider-thumbnails::-webkit-scrollbar{display:none}.jv-slider-thumbnail{flex:0 0 auto;width:3.5rem;height:3.5rem;padding:0;border:2px solid transparent;border-radius:var(--jv-radius-sm);background:transparent;cursor:pointer;overflow:hidden;transition:border-color .16s ease,opacity .16s ease;opacity:.6}.jv-slider-thumbnail:hover{opacity:.85}.jv-slider-thumbnail--active{border-color:var(--jv-color-primary);opacity:1}.jv-slider-thumbnail:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:1px}.jv-slider-thumbnail-image{display:block;width:100%;height:100%;object-fit:cover}.jv-slider-counter{text-align:center;font-size:.8125rem;color:var(--jv-color-foreground-muted);font-variant-numeric:tabular-nums}@media(max-width:640px){.jv-slider-nav{width:2rem;height:2rem}.jv-slider-thumbnail{width:2.75rem;height:2.75rem}}@media(prefers-reduced-motion:reduce){.jv-slider-slide{transition:none}}\n"] }]
@@ -22874,16 +22969,15 @@ class JvConfirmDialogComponent {
     <jv-dialog
       [open]="isOpen()"
       [title]="dialogTitle()"
+      [description]="dialogMessage()"
       (closed)="dialogService.resolve(false)"
     >
-      <p>{{ dialogMessage() }}</p>
-
       <div dialog-actions class="actions">
         <jv-button [variant]="confirmVariant()" (click)="dialogService.resolve(true)">{{ confirmLabel() }}</jv-button>
         <jv-button variant="ghost" (click)="dialogService.resolve(false)">{{ cancelLabel() }}</jv-button>
       </div>
     </jv-dialog>
-  `, isInline: true, styles: [".actions{display:flex;justify-content:flex-end;gap:var(--jv-spacing-sm);flex-wrap:wrap}p{margin:0;color:var(--jv-color-foreground-muted)}\n"], 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"] }] });
+  `, isInline: true, styles: [".actions{display:flex;justify-content:flex-end;gap:var(--jv-spacing-sm);flex-wrap:wrap}p{margin:0;color:var(--jv-color-foreground-muted)}\n"], 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", "description"], outputs: ["closed"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvConfirmDialogComponent, decorators: [{
             type: Component,
@@ -22891,10 +22985,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
     <jv-dialog
       [open]="isOpen()"
       [title]="dialogTitle()"
+      [description]="dialogMessage()"
       (closed)="dialogService.resolve(false)"
     >
-      <p>{{ dialogMessage() }}</p>
-
       <div dialog-actions class="actions">
         <jv-button [variant]="confirmVariant()" (click)="dialogService.resolve(true)">{{ confirmLabel() }}</jv-button>
         <jv-button variant="ghost" (click)="dialogService.resolve(false)">{{ cancelLabel() }}</jv-button>
@@ -22909,6 +23002,7 @@ class JvWindowModalComponent {
     open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
     subtitle = input('', ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
+    description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
     mode = input('floating', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
     size = input('xl', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     showCloseButton = input(true, ...(ngDevMode ? [{ debugName: "showCloseButton" }] : /* istanbul ignore next */ []));
@@ -22918,6 +23012,7 @@ class JvWindowModalComponent {
     closed = output();
     close = output();
     resolvedMode = computed(() => (this.size() === 'fullscreen' ? 'fullscreen' : this.mode()), ...(ngDevMode ? [{ debugName: "resolvedMode" }] : /* istanbul ignore next */ []));
+    resolvedDescription = computed(() => this.description() || this.subtitle(), ...(ngDevMode ? [{ debugName: "resolvedDescription" }] : /* istanbul ignore next */ []));
     titleId = `jv-window-modal-title-${Math.random().toString(36).slice(2, 8)}`;
     descriptionId = `jv-window-modal-description-${Math.random().toString(36).slice(2, 8)}`;
     previousFocusedElement = null;
@@ -23006,7 +23101,7 @@ class JvWindowModalComponent {
         return Array.from(panel.querySelectorAll('button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvWindowModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvWindowModalComponent, isStandalone: true, selector: "jv-window-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", close: "close" }, host: { listeners: { "document:keydown": "handleDocumentKeydown($event)" } }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvWindowModalComponent, isStandalone: true, selector: "jv-window-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", close: "close" }, host: { listeners: { "document:keydown": "handleDocumentKeydown($event)" } }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (open()) {
       <div class="jv-window-modal-backdrop" tabindex="-1" (click)="backdropClose()" (keydown.escape)="backdropClose()">
         <section
@@ -23019,7 +23114,7 @@ class JvWindowModalComponent {
           aria-modal="true"
           tabindex="-1"
           [attr.aria-labelledby]="title() ? titleId : null"
-          [attr.aria-describedby]="descriptionId"
+          [attr.aria-describedby]="resolvedDescription() ? descriptionId : null"
           (click)="$event.stopPropagation()"
           (keydown)="$event.stopPropagation()"
           #panel
@@ -23030,8 +23125,10 @@ class JvWindowModalComponent {
                 <h2 [id]="titleId">{{ title() }}</h2>
               }
 
-              @if (subtitle()) {
-                <p class="jv-window-modal-subtitle">{{ subtitle() }}</p>
+              @if (description()) {
+                <p class="jv-window-modal-description" [id]="descriptionId">{{ description() }}</p>
+              } @else if (subtitle()) {
+                <p class="jv-window-modal-subtitle" [id]="descriptionId">{{ subtitle() }}</p>
               }
             </div>
 
@@ -23044,7 +23141,7 @@ class JvWindowModalComponent {
             </div>
           </header>
 
-          <div class="jv-window-modal-body" [id]="descriptionId">
+          <div class="jv-window-modal-body">
             <ng-content></ng-content>
           </div>
 
@@ -23071,7 +23168,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
           aria-modal="true"
           tabindex="-1"
           [attr.aria-labelledby]="title() ? titleId : null"
-          [attr.aria-describedby]="descriptionId"
+          [attr.aria-describedby]="resolvedDescription() ? descriptionId : null"
           (click)="$event.stopPropagation()"
           (keydown)="$event.stopPropagation()"
           #panel
@@ -23082,8 +23179,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 <h2 [id]="titleId">{{ title() }}</h2>
               }
 
-              @if (subtitle()) {
-                <p class="jv-window-modal-subtitle">{{ subtitle() }}</p>
+              @if (description()) {
+                <p class="jv-window-modal-description" [id]="descriptionId">{{ description() }}</p>
+              } @else if (subtitle()) {
+                <p class="jv-window-modal-subtitle" [id]="descriptionId">{{ subtitle() }}</p>
               }
             </div>
 
@@ -23096,7 +23195,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             </div>
           </header>
 
-          <div class="jv-window-modal-body" [id]="descriptionId">
+          <div class="jv-window-modal-body">
             <ng-content></ng-content>
           </div>
 
@@ -23107,7 +23206,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       </div>
     }
   `, styles: [".jv-window-modal-backdrop{position:fixed;inset:0;z-index:1250;display:flex;align-items:center;justify-content:center;padding:1rem;background:#0f172a94}.jv-window-modal-panel{width:min(100%,72rem);max-width:100%;max-height:calc(100dvh - 2rem);display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-xl, 1.25rem);background:var(--jv-color-surface);color:var(--jv-color-foreground);box-shadow:var(--jv-shadow-lg)}.jv-window-modal-panel--lg{width:min(100%,56rem)}.jv-window-modal-panel--xl{width:min(100%,72rem)}.jv-window-modal-panel--fullscreen{width:min(100%,calc(100vw - 1rem));height:calc(100dvh - 1rem);max-height:calc(100dvh - 1rem)}.jv-window-modal-header,.jv-window-modal-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);padding:var(--jv-spacing-lg);background:var(--jv-color-surface)}.jv-window-modal-header{border-bottom:1px solid var(--jv-color-border)}.jv-window-modal-footer{border-top:1px solid var(--jv-color-border);justify-content:flex-end}.jv-window-modal-footer:empty{display:none}.jv-window-modal-heading{display:grid;gap:.35rem;min-width:0}.jv-window-modal-heading h2,.jv-window-modal-subtitle{margin:0}.jv-window-modal-subtitle{color:var(--jv-color-foreground-muted)}.jv-window-modal-header-actions{display:inline-flex;align-items:center;gap:var(--jv-spacing-sm);flex-shrink:0}.jv-window-modal-body{min-height:0;overflow:auto;padding:var(--jv-spacing-lg);display:grid;gap:var(--jv-spacing-lg);overscroll-behavior:contain}@media(max-width:720px){.jv-window-modal-backdrop{padding:0}.jv-window-modal-panel,.jv-window-modal-panel--fullscreen{width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border-left:none;border-right:none}.jv-window-modal-header,.jv-window-modal-body,.jv-window-modal-footer{padding:var(--jv-spacing-md)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], close: [{ type: i0.Output, args: ["close"] }], handleDocumentKeydown: [{
+        }], ctorParameters: () => [], propDecorators: { panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], close: [{ type: i0.Output, args: ["close"] }], handleDocumentKeydown: [{
                 type: HostListener,
                 args: ['document:keydown', ['$event']]
             }] } });
@@ -23258,13 +23357,19 @@ class JvSidebarComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvSidebarComponent, isStandalone: true, selector: "jv-sidebar", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, brandIcon: { classPropertyName: "brandIcon", publicName: "brandIcon", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, mobileOpen: { classPropertyName: "mobileOpen", publicName: "mobileOpen", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, currentTheme: { classPropertyName: "currentTheme", publicName: "currentTheme", isSignal: true, isRequired: false, transformFunction: null }, themeOptions: { classPropertyName: "themeOptions", publicName: "themeOptions", isSignal: true, isRequired: false, transformFunction: null }, topbarActions: { classPropertyName: "topbarActions", publicName: "topbarActions", isSignal: true, isRequired: false, transformFunction: null }, showThemeSelector: { classPropertyName: "showThemeSelector", publicName: "showThemeSelector", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapseToggle: "collapseToggle", mobileClose: "mobileClose", themeChange: "themeChange", actionClick: "actionClick" }, ngImport: i0, template: `
     @if (mobileOpen()) {
-      <div class="jv-sidebar-backdrop" tabindex="-1" (click)="mobileClose.emit()" (keydown.escape)="mobileClose.emit()"></div>
+      <div
+        class="jv-sidebar-backdrop"
+        tabindex="-1"
+        (click)="mobileClose.emit()"
+        (keydown.escape)="mobileClose.emit()"
+      ></div>
     }
 
     <aside
       class="jv-sidebar"
       [class.is-collapsed]="collapsed()"
       [class.is-mobile-open]="mobileOpen()"
+      [attr.aria-label]="title()"
     >
       <div class="jv-sidebar-brand">
         <div class="brand-mark">
@@ -23283,43 +23388,18 @@ class JvSidebarComponent {
 
       <nav class="jv-sidebar-nav" [attr.aria-label]="ariaLabel()">
         <ul class="jv-sidebar-list">
-        @for (item of normalizedItems(); track item.id) {
-          <li class="jv-sidebar-item">
-            @if (item.children.length > 0) {
-              <button
-                type="button"
-                class="jv-sidebar-link"
-                [class.is-active]="item.active"
-                [attr.aria-label]="item.label"
-                [attr.aria-expanded]="isExpanded(item.id) ? 'true' : 'false'"
-                [attr.aria-controls]="'jv-sidebar-section-' + item.id"
-                [attr.title]="item.label"
-                (click)="toggleSection(item.id)"
-              >
-                <span class="jv-sidebar-link-main">
-                  @if (item.icon) {
-                    <jv-icon [name]="item.icon" [size]="18" />
-                  }
-
-                  @if (!collapsed()) {
-                    <span>{{ item.label }}</span>
-                  }
-                </span>
-
-                @if (!collapsed()) {
-                  <jv-icon [name]="isExpanded(item.id) ? 'chevron-up' : 'chevron-down'" [size]="16" />
-                }
-              </button>
-            } @else {
-              @if (isHashLink(item.href)) {
+          @for (item of normalizedItems(); track item.id) {
+            <li class="jv-sidebar-item">
+              @if (item.children.length > 0) {
                 <button
                   type="button"
                   class="jv-sidebar-link"
                   [class.is-active]="item.active"
                   [attr.aria-label]="item.label"
-                  [attr.aria-current]="item.active ? 'page' : null"
+                  [attr.aria-expanded]="isExpanded(item.id) ? 'true' : 'false'"
+                  [attr.aria-controls]="'jv-sidebar-section-' + item.id"
                   [attr.title]="item.label"
-                  (click)="navigateTo(item.href); mobileClose.emit()"
+                  (click)="toggleSection(item.id)"
                 >
                   <span class="jv-sidebar-link-main">
                     @if (item.icon) {
@@ -23330,52 +23410,102 @@ class JvSidebarComponent {
                       <span>{{ item.label }}</span>
                     }
                   </span>
+
+                  @if (!collapsed()) {
+                    <jv-icon
+                      [name]="isExpanded(item.id) ? 'chevron-up' : 'chevron-down'"
+                      [size]="16"
+                    />
+                  }
                 </button>
               } @else {
-                <a
-                  class="jv-sidebar-link"
-                  [class.is-active]="item.active"
-                  [attr.aria-label]="item.label"
-                  [attr.aria-current]="item.active ? 'page' : null"
-                  [routerLink]="item.href"
-                  [attr.title]="item.label"
-                  (click)="mobileClose.emit()"
-                >
-                  <span class="jv-sidebar-link-main">
-                    @if (item.icon) {
-                      <jv-icon [name]="item.icon" [size]="18" />
-                    }
+                @if (isHashLink(item.href)) {
+                  <button
+                    type="button"
+                    class="jv-sidebar-link"
+                    [class.is-active]="item.active"
+                    [attr.aria-label]="item.label"
+                    [attr.aria-current]="item.active ? 'page' : null"
+                    [attr.title]="item.label"
+                    (click)="navigateTo(item.href); mobileClose.emit()"
+                  >
+                    <span class="jv-sidebar-link-main">
+                      @if (item.icon) {
+                        <jv-icon [name]="item.icon" [size]="18" />
+                      }
 
-                    @if (!collapsed()) {
-                      <span>{{ item.label }}</span>
-                    }
-                  </span>
-                </a>
+                      @if (!collapsed()) {
+                        <span>{{ item.label }}</span>
+                      }
+                    </span>
+                  </button>
+                } @else {
+                  <a
+                    class="jv-sidebar-link"
+                    [class.is-active]="item.active"
+                    [attr.aria-label]="item.label"
+                    [attr.aria-current]="item.active ? 'page' : null"
+                    [routerLink]="item.href"
+                    [attr.title]="item.label"
+                    (click)="mobileClose.emit()"
+                  >
+                    <span class="jv-sidebar-link-main">
+                      @if (item.icon) {
+                        <jv-icon [name]="item.icon" [size]="18" />
+                      }
+
+                      @if (!collapsed()) {
+                        <span>{{ item.label }}</span>
+                      }
+                    </span>
+                  </a>
+                }
               }
-            }
 
-            @if (!collapsed() && item.children.length > 0 && isExpanded(item.id)) {
-              <div class="jv-sidebar-children" [id]="'jv-sidebar-section-' + item.id">
-                @for (child of item.children; track child.id) {
-                  @if (isHashLink(child.href)) {
-                    <button type="button" class="jv-sidebar-child-link" [class.is-active]="child.active" [attr.aria-label]="child.label" [attr.aria-current]="child.active ? 'page' : null" [attr.title]="child.label" (click)="navigateTo(child.href)">
-                      {{ child.label }}
-                    </button>
-                  } @else {
-                    <a class="jv-sidebar-child-link" [class.is-active]="child.active" [attr.aria-label]="child.label" [attr.aria-current]="child.active ? 'page' : null" [routerLink]="child.href" [attr.title]="child.label" (click)="mobileClose.emit()">
-                      {{ child.label }}
-                    </a>
+              @if (!collapsed() && item.children.length > 0 && isExpanded(item.id)) {
+                <div class="jv-sidebar-children" [id]="'jv-sidebar-section-' + item.id">
+                  @for (child of item.children; track child.id) {
+                    @if (isHashLink(child.href)) {
+                      <button
+                        type="button"
+                        class="jv-sidebar-child-link"
+                        [class.is-active]="child.active"
+                        [attr.aria-label]="child.label"
+                        [attr.aria-current]="child.active ? 'page' : null"
+                        [attr.title]="child.label"
+                        (click)="navigateTo(child.href)"
+                      >
+                        {{ child.label }}
+                      </button>
+                    } @else {
+                      <a
+                        class="jv-sidebar-child-link"
+                        [class.is-active]="child.active"
+                        [attr.aria-label]="child.label"
+                        [attr.aria-current]="child.active ? 'page' : null"
+                        [routerLink]="child.href"
+                        [attr.title]="child.label"
+                        (click)="mobileClose.emit()"
+                      >
+                        {{ child.label }}
+                      </a>
+                    }
                   }
-                }
-              </div>
-            }
-          </li>
-        }
+                </div>
+              }
+            </li>
+          }
         </ul>
       </nav>
 
       <div class="jv-sidebar-footer">
-        <button type="button" class="jv-sidebar-toggle" (click)="collapseToggle.emit()">
+        <button
+          type="button"
+          class="jv-sidebar-toggle"
+          [attr.aria-label]="collapsed() ? 'Expand navigation' : 'Collapse navigation'"
+          [attr.aria-expanded]="collapsed() ? 'false' : 'true'"
+          (click)="collapseToggle.emit()"
+        >
           <jv-icon [name]="collapsed() ? 'menu' : 'panel-left-close'" [size]="18" />
           @if (!collapsed()) {
             <span>Collapse</span>
@@ -23390,6 +23520,7 @@ class JvSidebarComponent {
                   type="button"
                   class="theme-pill"
                   [class.is-active]="currentTheme() === option.value"
+                  [attr.aria-pressed]="currentTheme() === option.value ? 'true' : 'false'"
                   (click)="themeChange.emit(option.value)"
                 >
                   @if (option.icon) {
@@ -23403,7 +23534,14 @@ class JvSidebarComponent {
 
           <div class="mobile-actions">
             @for (action of topbarActions(); track action.id) {
-              <button type="button" class="icon-button" [attr.aria-label]="action.label" [attr.title]="action.label" [jvTooltip]="action.label" (click)="actionClick.emit(action.id); mobileClose.emit()">
+              <button
+                type="button"
+                class="icon-button"
+                [attr.aria-label]="action.label"
+                [attr.title]="action.label"
+                [jvTooltip]="action.label"
+                (click)="actionClick.emit(action.id); mobileClose.emit()"
+              >
                 <jv-icon [name]="action.icon" [size]="18" />
                 <span>{{ action.label }}</span>
               </button>
@@ -23418,13 +23556,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             type: Component,
             args: [{ selector: 'jv-sidebar', standalone: true, imports: [JvIconComponent, RouterLink, JvTooltipDirective], template: `
     @if (mobileOpen()) {
-      <div class="jv-sidebar-backdrop" tabindex="-1" (click)="mobileClose.emit()" (keydown.escape)="mobileClose.emit()"></div>
+      <div
+        class="jv-sidebar-backdrop"
+        tabindex="-1"
+        (click)="mobileClose.emit()"
+        (keydown.escape)="mobileClose.emit()"
+      ></div>
     }
 
     <aside
       class="jv-sidebar"
       [class.is-collapsed]="collapsed()"
       [class.is-mobile-open]="mobileOpen()"
+      [attr.aria-label]="title()"
     >
       <div class="jv-sidebar-brand">
         <div class="brand-mark">
@@ -23443,43 +23587,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 
       <nav class="jv-sidebar-nav" [attr.aria-label]="ariaLabel()">
         <ul class="jv-sidebar-list">
-        @for (item of normalizedItems(); track item.id) {
-          <li class="jv-sidebar-item">
-            @if (item.children.length > 0) {
-              <button
-                type="button"
-                class="jv-sidebar-link"
-                [class.is-active]="item.active"
-                [attr.aria-label]="item.label"
-                [attr.aria-expanded]="isExpanded(item.id) ? 'true' : 'false'"
-                [attr.aria-controls]="'jv-sidebar-section-' + item.id"
-                [attr.title]="item.label"
-                (click)="toggleSection(item.id)"
-              >
-                <span class="jv-sidebar-link-main">
-                  @if (item.icon) {
-                    <jv-icon [name]="item.icon" [size]="18" />
-                  }
-
-                  @if (!collapsed()) {
-                    <span>{{ item.label }}</span>
-                  }
-                </span>
-
-                @if (!collapsed()) {
-                  <jv-icon [name]="isExpanded(item.id) ? 'chevron-up' : 'chevron-down'" [size]="16" />
-                }
-              </button>
-            } @else {
-              @if (isHashLink(item.href)) {
+          @for (item of normalizedItems(); track item.id) {
+            <li class="jv-sidebar-item">
+              @if (item.children.length > 0) {
                 <button
                   type="button"
                   class="jv-sidebar-link"
                   [class.is-active]="item.active"
                   [attr.aria-label]="item.label"
-                  [attr.aria-current]="item.active ? 'page' : null"
+                  [attr.aria-expanded]="isExpanded(item.id) ? 'true' : 'false'"
+                  [attr.aria-controls]="'jv-sidebar-section-' + item.id"
                   [attr.title]="item.label"
-                  (click)="navigateTo(item.href); mobileClose.emit()"
+                  (click)="toggleSection(item.id)"
                 >
                   <span class="jv-sidebar-link-main">
                     @if (item.icon) {
@@ -23490,52 +23609,102 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                       <span>{{ item.label }}</span>
                     }
                   </span>
+
+                  @if (!collapsed()) {
+                    <jv-icon
+                      [name]="isExpanded(item.id) ? 'chevron-up' : 'chevron-down'"
+                      [size]="16"
+                    />
+                  }
                 </button>
               } @else {
-                <a
-                  class="jv-sidebar-link"
-                  [class.is-active]="item.active"
-                  [attr.aria-label]="item.label"
-                  [attr.aria-current]="item.active ? 'page' : null"
-                  [routerLink]="item.href"
-                  [attr.title]="item.label"
-                  (click)="mobileClose.emit()"
-                >
-                  <span class="jv-sidebar-link-main">
-                    @if (item.icon) {
-                      <jv-icon [name]="item.icon" [size]="18" />
-                    }
+                @if (isHashLink(item.href)) {
+                  <button
+                    type="button"
+                    class="jv-sidebar-link"
+                    [class.is-active]="item.active"
+                    [attr.aria-label]="item.label"
+                    [attr.aria-current]="item.active ? 'page' : null"
+                    [attr.title]="item.label"
+                    (click)="navigateTo(item.href); mobileClose.emit()"
+                  >
+                    <span class="jv-sidebar-link-main">
+                      @if (item.icon) {
+                        <jv-icon [name]="item.icon" [size]="18" />
+                      }
 
-                    @if (!collapsed()) {
-                      <span>{{ item.label }}</span>
-                    }
-                  </span>
-                </a>
+                      @if (!collapsed()) {
+                        <span>{{ item.label }}</span>
+                      }
+                    </span>
+                  </button>
+                } @else {
+                  <a
+                    class="jv-sidebar-link"
+                    [class.is-active]="item.active"
+                    [attr.aria-label]="item.label"
+                    [attr.aria-current]="item.active ? 'page' : null"
+                    [routerLink]="item.href"
+                    [attr.title]="item.label"
+                    (click)="mobileClose.emit()"
+                  >
+                    <span class="jv-sidebar-link-main">
+                      @if (item.icon) {
+                        <jv-icon [name]="item.icon" [size]="18" />
+                      }
+
+                      @if (!collapsed()) {
+                        <span>{{ item.label }}</span>
+                      }
+                    </span>
+                  </a>
+                }
               }
-            }
 
-            @if (!collapsed() && item.children.length > 0 && isExpanded(item.id)) {
-              <div class="jv-sidebar-children" [id]="'jv-sidebar-section-' + item.id">
-                @for (child of item.children; track child.id) {
-                  @if (isHashLink(child.href)) {
-                    <button type="button" class="jv-sidebar-child-link" [class.is-active]="child.active" [attr.aria-label]="child.label" [attr.aria-current]="child.active ? 'page' : null" [attr.title]="child.label" (click)="navigateTo(child.href)">
-                      {{ child.label }}
-                    </button>
-                  } @else {
-                    <a class="jv-sidebar-child-link" [class.is-active]="child.active" [attr.aria-label]="child.label" [attr.aria-current]="child.active ? 'page' : null" [routerLink]="child.href" [attr.title]="child.label" (click)="mobileClose.emit()">
-                      {{ child.label }}
-                    </a>
+              @if (!collapsed() && item.children.length > 0 && isExpanded(item.id)) {
+                <div class="jv-sidebar-children" [id]="'jv-sidebar-section-' + item.id">
+                  @for (child of item.children; track child.id) {
+                    @if (isHashLink(child.href)) {
+                      <button
+                        type="button"
+                        class="jv-sidebar-child-link"
+                        [class.is-active]="child.active"
+                        [attr.aria-label]="child.label"
+                        [attr.aria-current]="child.active ? 'page' : null"
+                        [attr.title]="child.label"
+                        (click)="navigateTo(child.href)"
+                      >
+                        {{ child.label }}
+                      </button>
+                    } @else {
+                      <a
+                        class="jv-sidebar-child-link"
+                        [class.is-active]="child.active"
+                        [attr.aria-label]="child.label"
+                        [attr.aria-current]="child.active ? 'page' : null"
+                        [routerLink]="child.href"
+                        [attr.title]="child.label"
+                        (click)="mobileClose.emit()"
+                      >
+                        {{ child.label }}
+                      </a>
+                    }
                   }
-                }
-              </div>
-            }
-          </li>
-        }
+                </div>
+              }
+            </li>
+          }
         </ul>
       </nav>
 
       <div class="jv-sidebar-footer">
-        <button type="button" class="jv-sidebar-toggle" (click)="collapseToggle.emit()">
+        <button
+          type="button"
+          class="jv-sidebar-toggle"
+          [attr.aria-label]="collapsed() ? 'Expand navigation' : 'Collapse navigation'"
+          [attr.aria-expanded]="collapsed() ? 'false' : 'true'"
+          (click)="collapseToggle.emit()"
+        >
           <jv-icon [name]="collapsed() ? 'menu' : 'panel-left-close'" [size]="18" />
           @if (!collapsed()) {
             <span>Collapse</span>
@@ -23550,6 +23719,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                   type="button"
                   class="theme-pill"
                   [class.is-active]="currentTheme() === option.value"
+                  [attr.aria-pressed]="currentTheme() === option.value ? 'true' : 'false'"
                   (click)="themeChange.emit(option.value)"
                 >
                   @if (option.icon) {
@@ -23563,7 +23733,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 
           <div class="mobile-actions">
             @for (action of topbarActions(); track action.id) {
-              <button type="button" class="icon-button" [attr.aria-label]="action.label" [attr.title]="action.label" [jvTooltip]="action.label" (click)="actionClick.emit(action.id); mobileClose.emit()">
+              <button
+                type="button"
+                class="icon-button"
+                [attr.aria-label]="action.label"
+                [attr.title]="action.label"
+                [jvTooltip]="action.label"
+                (click)="actionClick.emit(action.id); mobileClose.emit()"
+              >
                 <jv-icon [name]="action.icon" [size]="18" />
                 <span>{{ action.label }}</span>
               </button>
@@ -23725,7 +23902,12 @@ class JvTopbarMenuComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvTopbarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvTopbarMenuComponent, isStandalone: true, selector: "jv-topbar-menu", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, brandIcon: { classPropertyName: "brandIcon", publicName: "brandIcon", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, mobileOpen: { classPropertyName: "mobileOpen", publicName: "mobileOpen", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, currentTheme: { classPropertyName: "currentTheme", publicName: "currentTheme", isSignal: true, isRequired: false, transformFunction: null }, themeOptions: { classPropertyName: "themeOptions", publicName: "themeOptions", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, showThemeSelector: { classPropertyName: "showThemeSelector", publicName: "showThemeSelector", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuClick: "menuClick", mobileClose: "mobileClose", themeChange: "themeChange", actionClick: "actionClick" }, ngImport: i0, template: `
     @if (mobileOpen()) {
-      <div class="jv-topbar-menu-backdrop" tabindex="-1" (click)="mobileClose.emit()" (keydown.escape)="mobileClose.emit()"></div>
+      <div
+        class="jv-topbar-menu-backdrop"
+        tabindex="-1"
+        (click)="mobileClose.emit()"
+        (keydown.escape)="mobileClose.emit()"
+      ></div>
     }
 
     <header class="jv-topbar-menu" [class.is-mobile-open]="mobileOpen()">
@@ -23741,11 +23923,22 @@ class JvTopbarMenuComponent {
         </div>
       </div>
 
-      <button type="button" class="mobile-menu-button" aria-label="Toggle navigation menu" (click)="menuClick.emit()">
+      <button
+        type="button"
+        class="mobile-menu-button"
+        aria-label="Toggle navigation menu"
+        aria-controls="jv-topbar-menu-navigation"
+        [attr.aria-expanded]="mobileOpen() ? 'true' : 'false'"
+        (click)="menuClick.emit()"
+      >
         <jv-icon name="menu" [size]="18" />
       </button>
 
-      <nav class="jv-topbar-menu-nav" [attr.aria-label]="ariaLabel()">
+      <nav
+        id="jv-topbar-menu-navigation"
+        class="jv-topbar-menu-nav"
+        [attr.aria-label]="ariaLabel()"
+      >
         <ul class="jv-topbar-menu-list">
           @for (item of normalizedItems(); track item.id) {
             <li class="jv-topbar-menu-item">
@@ -23762,18 +23955,32 @@ class JvTopbarMenuComponent {
                     <jv-icon [name]="item.icon" [size]="17" />
                   }
                   <span>{{ item.label }}</span>
-                  <jv-icon [name]="isExpanded(item.id) ? 'chevron-up' : 'chevron-down'" [size]="15" />
+                  <jv-icon
+                    [name]="isExpanded(item.id) ? 'chevron-up' : 'chevron-down'"
+                    [size]="15"
+                  />
                 </button>
 
                 @if (isExpanded(item.id)) {
                   <div class="jv-topbar-menu-dropdown" [id]="'jv-topbar-menu-section-' + item.id">
                     @for (child of item.children; track child.id) {
                       @if (isHashLink(child.href)) {
-                        <button type="button" class="jv-topbar-menu-child" [class.is-active]="child.active" (click)="navigateTo(child.href, item.id)">
+                        <button
+                          type="button"
+                          class="jv-topbar-menu-child"
+                          [class.is-active]="child.active"
+                          (click)="navigateTo(child.href, item.id)"
+                        >
                           {{ child.label }}
                         </button>
                       } @else {
-                        <a class="jv-topbar-menu-child" [class.is-active]="child.active" [routerLink]="child.href" [attr.aria-current]="child.active ? 'page' : null" (click)="closeSection(item.id); mobileClose.emit()">
+                        <a
+                          class="jv-topbar-menu-child"
+                          [class.is-active]="child.active"
+                          [routerLink]="child.href"
+                          [attr.aria-current]="child.active ? 'page' : null"
+                          (click)="closeSection(item.id); mobileClose.emit()"
+                        >
                           {{ child.label }}
                         </a>
                       }
@@ -23782,14 +23989,25 @@ class JvTopbarMenuComponent {
                 }
               } @else {
                 @if (isHashLink(item.href)) {
-                  <button type="button" class="jv-topbar-menu-link" [class.is-active]="item.active" (click)="navigateTo(item.href)">
+                  <button
+                    type="button"
+                    class="jv-topbar-menu-link"
+                    [class.is-active]="item.active"
+                    (click)="navigateTo(item.href)"
+                  >
                     @if (item.icon) {
                       <jv-icon [name]="item.icon" [size]="17" />
                     }
                     <span>{{ item.label }}</span>
                   </button>
                 } @else {
-                  <a class="jv-topbar-menu-link" [class.is-active]="item.active" [routerLink]="item.href" [attr.aria-current]="item.active ? 'page' : null" (click)="mobileClose.emit()">
+                  <a
+                    class="jv-topbar-menu-link"
+                    [class.is-active]="item.active"
+                    [routerLink]="item.href"
+                    [attr.aria-current]="item.active ? 'page' : null"
+                    (click)="mobileClose.emit()"
+                  >
                     @if (item.icon) {
                       <jv-icon [name]="item.icon" [size]="17" />
                     }
@@ -23806,7 +24024,13 @@ class JvTopbarMenuComponent {
         @if (showThemeSelector()) {
           <div class="theme-group" aria-label="Theme selector">
             @for (option of themeOptions(); track option.value) {
-              <button type="button" class="theme-pill" [class.is-active]="currentTheme() === option.value" (click)="themeChange.emit(option.value)">
+              <button
+                type="button"
+                class="theme-pill"
+                [class.is-active]="currentTheme() === option.value"
+                [attr.aria-pressed]="currentTheme() === option.value ? 'true' : 'false'"
+                (click)="themeChange.emit(option.value)"
+              >
                 @if (option.icon) {
                   <jv-icon [name]="option.icon" [size]="16" />
                 }
@@ -23817,7 +24041,14 @@ class JvTopbarMenuComponent {
         }
 
         @for (action of actions(); track action.id) {
-          <button type="button" class="icon-button" [attr.aria-label]="action.label" [attr.title]="action.label" [jvTooltip]="action.label" (click)="actionClick.emit(action.id)">
+          <button
+            type="button"
+            class="icon-button"
+            [attr.aria-label]="action.label"
+            [attr.title]="action.label"
+            [jvTooltip]="action.label"
+            (click)="actionClick.emit(action.id)"
+          >
             <jv-icon [name]="action.icon" [size]="18" />
             <span class="action-label">{{ action.label }}</span>
           </button>
@@ -23830,7 +24061,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             type: Component,
             args: [{ selector: 'jv-topbar-menu', standalone: true, imports: [JvIconComponent, RouterLink, JvTooltipDirective], template: `
     @if (mobileOpen()) {
-      <div class="jv-topbar-menu-backdrop" tabindex="-1" (click)="mobileClose.emit()" (keydown.escape)="mobileClose.emit()"></div>
+      <div
+        class="jv-topbar-menu-backdrop"
+        tabindex="-1"
+        (click)="mobileClose.emit()"
+        (keydown.escape)="mobileClose.emit()"
+      ></div>
     }
 
     <header class="jv-topbar-menu" [class.is-mobile-open]="mobileOpen()">
@@ -23846,11 +24082,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         </div>
       </div>
 
-      <button type="button" class="mobile-menu-button" aria-label="Toggle navigation menu" (click)="menuClick.emit()">
+      <button
+        type="button"
+        class="mobile-menu-button"
+        aria-label="Toggle navigation menu"
+        aria-controls="jv-topbar-menu-navigation"
+        [attr.aria-expanded]="mobileOpen() ? 'true' : 'false'"
+        (click)="menuClick.emit()"
+      >
         <jv-icon name="menu" [size]="18" />
       </button>
 
-      <nav class="jv-topbar-menu-nav" [attr.aria-label]="ariaLabel()">
+      <nav
+        id="jv-topbar-menu-navigation"
+        class="jv-topbar-menu-nav"
+        [attr.aria-label]="ariaLabel()"
+      >
         <ul class="jv-topbar-menu-list">
           @for (item of normalizedItems(); track item.id) {
             <li class="jv-topbar-menu-item">
@@ -23867,18 +24114,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     <jv-icon [name]="item.icon" [size]="17" />
                   }
                   <span>{{ item.label }}</span>
-                  <jv-icon [name]="isExpanded(item.id) ? 'chevron-up' : 'chevron-down'" [size]="15" />
+                  <jv-icon
+                    [name]="isExpanded(item.id) ? 'chevron-up' : 'chevron-down'"
+                    [size]="15"
+                  />
                 </button>
 
                 @if (isExpanded(item.id)) {
                   <div class="jv-topbar-menu-dropdown" [id]="'jv-topbar-menu-section-' + item.id">
                     @for (child of item.children; track child.id) {
                       @if (isHashLink(child.href)) {
-                        <button type="button" class="jv-topbar-menu-child" [class.is-active]="child.active" (click)="navigateTo(child.href, item.id)">
+                        <button
+                          type="button"
+                          class="jv-topbar-menu-child"
+                          [class.is-active]="child.active"
+                          (click)="navigateTo(child.href, item.id)"
+                        >
                           {{ child.label }}
                         </button>
                       } @else {
-                        <a class="jv-topbar-menu-child" [class.is-active]="child.active" [routerLink]="child.href" [attr.aria-current]="child.active ? 'page' : null" (click)="closeSection(item.id); mobileClose.emit()">
+                        <a
+                          class="jv-topbar-menu-child"
+                          [class.is-active]="child.active"
+                          [routerLink]="child.href"
+                          [attr.aria-current]="child.active ? 'page' : null"
+                          (click)="closeSection(item.id); mobileClose.emit()"
+                        >
                           {{ child.label }}
                         </a>
                       }
@@ -23887,14 +24148,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 }
               } @else {
                 @if (isHashLink(item.href)) {
-                  <button type="button" class="jv-topbar-menu-link" [class.is-active]="item.active" (click)="navigateTo(item.href)">
+                  <button
+                    type="button"
+                    class="jv-topbar-menu-link"
+                    [class.is-active]="item.active"
+                    (click)="navigateTo(item.href)"
+                  >
                     @if (item.icon) {
                       <jv-icon [name]="item.icon" [size]="17" />
                     }
                     <span>{{ item.label }}</span>
                   </button>
                 } @else {
-                  <a class="jv-topbar-menu-link" [class.is-active]="item.active" [routerLink]="item.href" [attr.aria-current]="item.active ? 'page' : null" (click)="mobileClose.emit()">
+                  <a
+                    class="jv-topbar-menu-link"
+                    [class.is-active]="item.active"
+                    [routerLink]="item.href"
+                    [attr.aria-current]="item.active ? 'page' : null"
+                    (click)="mobileClose.emit()"
+                  >
                     @if (item.icon) {
                       <jv-icon [name]="item.icon" [size]="17" />
                     }
@@ -23911,7 +24183,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         @if (showThemeSelector()) {
           <div class="theme-group" aria-label="Theme selector">
             @for (option of themeOptions(); track option.value) {
-              <button type="button" class="theme-pill" [class.is-active]="currentTheme() === option.value" (click)="themeChange.emit(option.value)">
+              <button
+                type="button"
+                class="theme-pill"
+                [class.is-active]="currentTheme() === option.value"
+                [attr.aria-pressed]="currentTheme() === option.value ? 'true' : 'false'"
+                (click)="themeChange.emit(option.value)"
+              >
                 @if (option.icon) {
                   <jv-icon [name]="option.icon" [size]="16" />
                 }
@@ -23922,7 +24200,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         }
 
         @for (action of actions(); track action.id) {
-          <button type="button" class="icon-button" [attr.aria-label]="action.label" [attr.title]="action.label" [jvTooltip]="action.label" (click)="actionClick.emit(action.id)">
+          <button
+            type="button"
+            class="icon-button"
+            [attr.aria-label]="action.label"
+            [attr.title]="action.label"
+            [jvTooltip]="action.label"
+            (click)="actionClick.emit(action.id)"
+          >
             <jv-icon [name]="action.icon" [size]="18" />
             <span class="action-label">{{ action.label }}</span>
           </button>
@@ -24398,7 +24683,13 @@ class JvTabsComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvTabsComponent, isStandalone: true, selector: "jv-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, activeTabId: { classPropertyName: "activeTabId", publicName: "activeTabId", isSignal: true, isRequired: false, transformFunction: null }, keepMounted: { classPropertyName: "keepMounted", publicName: "keepMounted", isSignal: true, isRequired: false, transformFunction: null }, transition: { classPropertyName: "transition", publicName: "transition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTabChange: "activeTabChange" }, host: { listeners: { "window:resize": "handleWindowResize()" } }, queries: [{ propertyName: "panelTemplates", predicate: JvTabPanelDirective, isSignal: true }], viewQueries: [{ propertyName: "tabListRef", first: true, predicate: ["tabList"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="jv-tabs">
       <div class="jv-tabs-header">
-        <div class="jv-tabs-scroll" #tabList role="tablist" aria-orientation="horizontal" (scroll)="updateScrollControls()">
+        <div
+          class="jv-tabs-scroll"
+          #tabList
+          role="tablist"
+          aria-orientation="horizontal"
+          (scroll)="updateScrollControls()"
+        >
           @for (tab of tabs(); track tab.id) {
             <button
               type="button"
@@ -24454,11 +24745,16 @@ class JvTabsComponent {
               class="jv-tab-panel"
               [class.jv-tab-panel--hidden]="!isActive(tab.id)"
               [class.jv-tab-panel--fade]="effectiveTransition() === 'fade'"
-              [class.jv-tab-panel--slide-left]="effectiveTransition() === 'slide' && slideDirection() === 'left'"
-              [class.jv-tab-panel--slide-right]="effectiveTransition() === 'slide' && slideDirection() === 'right'"
+              [class.jv-tab-panel--slide-left]="
+                effectiveTransition() === 'slide' && slideDirection() === 'left'
+              "
+              [class.jv-tab-panel--slide-right]="
+                effectiveTransition() === 'slide' && slideDirection() === 'right'
+              "
               [id]="panelId(tab.id)"
               role="tabpanel"
               [attr.aria-labelledby]="tabButtonId(tab.id)"
+              [attr.aria-hidden]="isActive(tab.id) ? null : 'true'"
               [attr.tabindex]="isActive(tab.id) ? 0 : null"
             >
               <ng-container [ngTemplateOutlet]="panelTemplate(tab.id) ?? null" />
@@ -24469,11 +24765,16 @@ class JvTabsComponent {
             <div
               class="jv-tab-panel jv-tab-panel--exit"
               [class.jv-tab-panel--fade]="effectiveTransition() === 'fade'"
-              [class.jv-tab-panel--slide-left]="effectiveTransition() === 'slide' && slideDirection() === 'left'"
-              [class.jv-tab-panel--slide-right]="effectiveTransition() === 'slide' && slideDirection() === 'right'"
+              [class.jv-tab-panel--slide-left]="
+                effectiveTransition() === 'slide' && slideDirection() === 'left'
+              "
+              [class.jv-tab-panel--slide-right]="
+                effectiveTransition() === 'slide' && slideDirection() === 'right'
+              "
               [id]="panelId(outgoingId)"
               role="tabpanel"
               [attr.aria-labelledby]="tabButtonId(outgoingId)"
+              aria-hidden="true"
               tabindex="-1"
               (transitionend)="handleTransitionEnd($event)"
             >
@@ -24485,11 +24786,16 @@ class JvTabsComponent {
             <div
               class="jv-tab-panel jv-tab-panel--entering"
               [class.jv-tab-panel--fade]="effectiveTransition() === 'fade'"
-              [class.jv-tab-panel--slide-left]="effectiveTransition() === 'slide' && slideDirection() === 'left'"
-              [class.jv-tab-panel--slide-right]="effectiveTransition() === 'slide' && slideDirection() === 'right'"
+              [class.jv-tab-panel--slide-left]="
+                effectiveTransition() === 'slide' && slideDirection() === 'left'
+              "
+              [class.jv-tab-panel--slide-right]="
+                effectiveTransition() === 'slide' && slideDirection() === 'right'
+              "
               [id]="panelId(activeId)"
               role="tabpanel"
               [attr.aria-labelledby]="tabButtonId(activeId)"
+              aria-hidden="false"
               tabindex="0"
             >
               <ng-container [ngTemplateOutlet]="panelTemplate(activeId) ?? null" />
@@ -24505,7 +24811,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             args: [{ selector: 'jv-tabs', standalone: true, imports: [NgTemplateOutlet, JvIconComponent], template: `
     <div class="jv-tabs">
       <div class="jv-tabs-header">
-        <div class="jv-tabs-scroll" #tabList role="tablist" aria-orientation="horizontal" (scroll)="updateScrollControls()">
+        <div
+          class="jv-tabs-scroll"
+          #tabList
+          role="tablist"
+          aria-orientation="horizontal"
+          (scroll)="updateScrollControls()"
+        >
           @for (tab of tabs(); track tab.id) {
             <button
               type="button"
@@ -24561,11 +24873,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
               class="jv-tab-panel"
               [class.jv-tab-panel--hidden]="!isActive(tab.id)"
               [class.jv-tab-panel--fade]="effectiveTransition() === 'fade'"
-              [class.jv-tab-panel--slide-left]="effectiveTransition() === 'slide' && slideDirection() === 'left'"
-              [class.jv-tab-panel--slide-right]="effectiveTransition() === 'slide' && slideDirection() === 'right'"
+              [class.jv-tab-panel--slide-left]="
+                effectiveTransition() === 'slide' && slideDirection() === 'left'
+              "
+              [class.jv-tab-panel--slide-right]="
+                effectiveTransition() === 'slide' && slideDirection() === 'right'
+              "
               [id]="panelId(tab.id)"
               role="tabpanel"
               [attr.aria-labelledby]="tabButtonId(tab.id)"
+              [attr.aria-hidden]="isActive(tab.id) ? null : 'true'"
               [attr.tabindex]="isActive(tab.id) ? 0 : null"
             >
               <ng-container [ngTemplateOutlet]="panelTemplate(tab.id) ?? null" />
@@ -24576,11 +24893,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             <div
               class="jv-tab-panel jv-tab-panel--exit"
               [class.jv-tab-panel--fade]="effectiveTransition() === 'fade'"
-              [class.jv-tab-panel--slide-left]="effectiveTransition() === 'slide' && slideDirection() === 'left'"
-              [class.jv-tab-panel--slide-right]="effectiveTransition() === 'slide' && slideDirection() === 'right'"
+              [class.jv-tab-panel--slide-left]="
+                effectiveTransition() === 'slide' && slideDirection() === 'left'
+              "
+              [class.jv-tab-panel--slide-right]="
+                effectiveTransition() === 'slide' && slideDirection() === 'right'
+              "
               [id]="panelId(outgoingId)"
               role="tabpanel"
               [attr.aria-labelledby]="tabButtonId(outgoingId)"
+              aria-hidden="true"
               tabindex="-1"
               (transitionend)="handleTransitionEnd($event)"
             >
@@ -24592,11 +24914,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             <div
               class="jv-tab-panel jv-tab-panel--entering"
               [class.jv-tab-panel--fade]="effectiveTransition() === 'fade'"
-              [class.jv-tab-panel--slide-left]="effectiveTransition() === 'slide' && slideDirection() === 'left'"
-              [class.jv-tab-panel--slide-right]="effectiveTransition() === 'slide' && slideDirection() === 'right'"
+              [class.jv-tab-panel--slide-left]="
+                effectiveTransition() === 'slide' && slideDirection() === 'left'
+              "
+              [class.jv-tab-panel--slide-right]="
+                effectiveTransition() === 'slide' && slideDirection() === 'right'
+              "
               [id]="panelId(activeId)"
               role="tabpanel"
               [attr.aria-labelledby]="tabButtonId(activeId)"
+              aria-hidden="false"
               tabindex="0"
             >
               <ng-container [ngTemplateOutlet]="panelTemplate(activeId) ?? null" />
@@ -25778,7 +26105,7 @@ class JvGridComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvGridComponent, isStandalone: true, selector: "jv-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowClick: "rowClick", rowDoubleClick: "rowDoubleClick", actionClick: "actionClick", selectionChange: "selectionChange", pageChange: "pageChange", searchChange: "searchChange", sortChange: "sortChange", columnFilter: "columnFilter", columnResize: "columnResize", columnReorder: "columnReorder", rowEdit: "rowEdit" }, ngImport: i0, template: "<div class=\"jv-grid\" role=\"region\" [attr.aria-label]=\"resolvedOptions().ariaLabel || gridLabel()\">\n  @if (resolvedOptions().searchable || resolvedOptions().exportable) {\n    <div class=\"jv-grid-toolbar\">\n      @if (resolvedOptions().searchable) {\n        <div class=\"jv-grid-search\">\n          <jv-icon name=\"search\" [size]=\"16\" />\n          <jv-input\n            [inputId]=\"gridSearchInputId\"\n            [placeholder]=\"t('grid.searchPlaceholder')\"\n            [ngModel]=\"searchTerm()\"\n            (ngModelChange)=\"onSearchInput($event)\"\n          />\n        </div>\n      }\n      @if (resolvedOptions().exportable) {\n        <div class=\"jv-grid-export-actions\">\n          <jv-button variant=\"outline\" icon=\"download\" (click)=\"exportCsv()\">{{\n            t('grid.exportCsv')\n          }}</jv-button>\n          <jv-button variant=\"outline\" icon=\"file-spreadsheet\" (click)=\"exportExcel()\">{{\n            t('grid.exportExcel')\n          }}</jv-button>\n        </div>\n      }\n    </div>\n  }\n\n  @if (resolvedOptions().loading) {\n    <div class=\"jv-grid-loading\" role=\"status\" aria-live=\"polite\">\n      <span class=\"jv-grid-spinner\" aria-hidden=\"true\"></span>\n      <span>{{ t('grid.loading') }}</span>\n    </div>\n  } @else {\n    <div\n      class=\"jv-grid-table-wrap\"\n      [class.jv-grid-virtual]=\"virtualScrollEnabled()\"\n      #tableWrap\n      (scroll)=\"onVirtualScroll($any($event.target))\"\n    >\n      @if (virtualScrollEnabled()) {\n        <div class=\"jv-grid-virtual-spacer\" [style.height.px]=\"virtualTotalHeight()\"></div>\n      }\n      <table\n        class=\"jv-grid-table\"\n        role=\"grid\"\n        [attr.aria-label]=\"resolvedOptions().ariaLabel || gridLabel()\"\n        [attr.aria-rowcount]=\"effectiveTotalItems()\"\n        [attr.aria-colcount]=\"colspan()\"\n        [class]=\"densityClass()\"\n        [style.position]=\"virtualScrollEnabled() ? 'relative' : null\"\n        [style.top.px]=\"virtualOffsetY()\"\n      >\n        <caption class=\"sr-only\">\n          {{\n            resolvedOptions().ariaLabel || gridLabel()\n          }}\n        </caption>\n\n        @let hasGroupedHeaders = groupedHeaders().length > 0;\n\n        <thead class=\"jv-grid-thead\">\n          @if (hasGroupedHeaders) {\n            <tr>\n              @if (resolvedOptions().selectable) {\n                <th class=\"jv-grid-th jv-grid-th-select\" scope=\"col\" [attr.rowspan]=\"2\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"jv-grid-checkbox\"\n                    [checked]=\"allSelected()\"\n                    (change)=\"toggleSelectAll($any($event.target).checked)\"\n                    [attr.aria-label]=\"allSelected() ? t('grid.deselectAll') : t('grid.selectAll')\"\n                    [indeterminate]=\"someSelected()\"\n                  />\n                </th>\n              }\n              @for (group of groupedHeaders(); track colKey(group)) {\n                <th\n                  class=\"jv-grid-th\"\n                  [class]=\"group.headerClass || ''\"\n                  [class.jv-grid-th-sticky-left]=\"isStickyLeft(group)\"\n                  [class.jv-grid-th-sticky-right]=\"isStickyRight(group)\"\n                  [attr.colspan]=\"groupColspan(group)\"\n                  scope=\"colgroup\"\n                  [style.text-align]=\"group.align ?? 'start'\"\n                >\n                  <div class=\"jv-grid-th-content\">{{ group.header }}</div>\n                </th>\n              }\n              @if (actions().length > 0) {\n                <th class=\"jv-grid-th jv-grid-th-actions\" scope=\"col\" [attr.rowspan]=\"2\">\n                  <span class=\"sr-only\">{{ t('grid.actionsLabel', { label: '' }) }}</span>\n                </th>\n              }\n            </tr>\n          }\n\n          <tr>\n            @if (!hasGroupedHeaders && resolvedOptions().selectable) {\n              <th class=\"jv-grid-th jv-grid-th-select\" scope=\"col\">\n                <input\n                  type=\"checkbox\"\n                  class=\"jv-grid-checkbox\"\n                  [checked]=\"allSelected()\"\n                  (change)=\"toggleSelectAll($any($event.target).checked)\"\n                  [attr.aria-label]=\"allSelected() ? t('grid.deselectAll') : t('grid.selectAll')\"\n                  [indeterminate]=\"someSelected()\"\n                />\n              </th>\n            }\n            @for (col of visibleColumns(); track colKey(col); let colIdx = $index) {\n              <th\n                class=\"jv-grid-th\"\n                [class]=\"col.headerClass || ''\"\n                [class.jv-grid-th-sortable]=\"col.sortable !== false && resolvedOptions().sortable\"\n                [class.jv-grid-th-sticky-left]=\"isStickyLeft(col)\"\n                [class.jv-grid-th-sticky-right]=\"isStickyRight(col)\"\n                [class.jv-grid-th-reorderable]=\"resolvedOptions().reorderableColumns\"\n                [style.text-align]=\"col.align ?? 'start'\"\n                [style.width]=\"getColumnWidth(col)\"\n                [style.min-width]=\"col.minWidth || undefined\"\n                [style.max-width]=\"col.maxWidth || undefined\"\n                scope=\"col\"\n                role=\"columnheader\"\n                [attr.data-column-index]=\"colIdx\"\n                [attr.aria-sort]=\"getAriaSort(col)\"\n                [attr.aria-label]=\"getSortLabel(col)\"\n                [tabindex]=\"\n                  resolvedOptions().keyboardNavigation\n                    ? activeCell().column === colIdx\n                      ? 0\n                      : -1\n                    : col.sortable !== false && resolvedOptions().sortable\n                      ? 0\n                      : -1\n                \"\n                (click)=\"toggleSort(col)\"\n                (focus)=\"onHeaderFocus(colIdx)\"\n                (keydown)=\"onHeaderKeydown($event, colIdx)\"\n                (keydown.enter)=\"toggleSort(col)\"\n                (keydown.space)=\"toggleSort(col, $event)\"\n                draggable=\"{{ resolvedOptions().reorderableColumns ? 'true' : 'false' }}\"\n                (dragstart)=\"onDragStart($event, colIdx)\"\n                (dragover)=\"onDragOver($event, colIdx)\"\n                (drop)=\"onDrop($event, colIdx)\"\n                (dragend)=\"onDragEnd($event)\"\n              >\n                <div class=\"jv-grid-th-content\">\n                  <span>{{ col.header }}</span>\n                  @if (col.sortable !== false && resolvedOptions().sortable) {\n                    <span class=\"jv-grid-sort-icon\" aria-hidden=\"true\">\n                      @if (sortState().columnKey === colKey(col)) {\n                        @if (sortState().direction === 'asc') {\n                          \u25B2\n                        }\n                        @if (sortState().direction === 'desc') {\n                          \u25BC\n                        }\n                      }\n                    </span>\n                  }\n                </div>\n                @if (isColumnResizable(col)) {\n                  <div\n                    class=\"jv-grid-resize-handle\"\n                    (mousedown)=\"onResizeStart($event, col, colIdx)\"\n                  ></div>\n                }\n              </th>\n            }\n            @if (!hasGroupedHeaders && actions().length > 0) {\n              <th class=\"jv-grid-th jv-grid-th-actions\" scope=\"col\">\n                <span class=\"sr-only\">{{ t('grid.actionsLabel', { label: '' }) }}</span>\n              </th>\n            }\n          </tr>\n\n          @if (resolvedOptions().columnFilters) {\n            <tr class=\"jv-grid-filter-row\">\n              @if (resolvedOptions().selectable) {\n                <th class=\"jv-grid-th jv-grid-th-select\"></th>\n              }\n              @for (col of visibleColumns(); track colKey(col)) {\n                <th class=\"jv-grid-th jv-grid-th-filter\">\n                  @if (col.filterable !== false) {\n                    <input\n                      class=\"jv-grid-filter-input\"\n                      [placeholder]=\"t('grid.filterPlaceholder')\"\n                      [attr.aria-label]=\"t('grid.filterForColumn', { column: col.header })\"\n                      [ngModel]=\"colFilters()[colKey(col)]?.value ?? ''\"\n                      (ngModelChange)=\"onColumnFilterChange(col, $event)\"\n                    />\n                  }\n                </th>\n              }\n              @if (actions().length > 0) {\n                <th class=\"jv-grid-th jv-grid-th-actions\"></th>\n              }\n            </tr>\n          }\n        </thead>\n\n        <tbody class=\"jv-grid-tbody\">\n          @if (displayData().length === 0 && !searchTerm().trim() && !hasActiveFilters()) {\n            <tr>\n              <td class=\"jv-grid-empty\" [attr.colspan]=\"colspan()\">\n                {{ resolvedOptions().emptyMessage || t('grid.emptyMessage') }}\n              </td>\n            </tr>\n          } @else if (displayData().length === 0 && (searchTerm().trim() || hasActiveFilters())) {\n            <tr>\n              <td class=\"jv-grid-empty\" [attr.colspan]=\"colspan()\">\n                {{ resolvedOptions().noResultsMessage || t('grid.noResults') }}\n              </td>\n            </tr>\n          } @else {\n            @for (row of displayData(); track getRowId(row, $index); let rowIdx = $index) {\n              <tr\n                class=\"jv-grid-tr\"\n                role=\"row\"\n                [class.jv-grid-tr-editing]=\"isRowEditing(row)\"\n                [class.jv-grid-tr-selected]=\"isSelected(row)\"\n                [attr.aria-selected]=\"resolvedOptions().selectable ? isSelected(row) : null\"\n                (click)=\"onRowClick(row)\"\n                (dblclick)=\"onRowDblClick(row)\"\n                (keydown.enter)=\"onRowClick(row)\"\n                (keydown.space)=\"onRowClick($event, row)\"\n                [tabindex]=\"-1\"\n              >\n                @if (resolvedOptions().selectable) {\n                  <td\n                    class=\"jv-grid-td jv-grid-td-select\"\n                    [class.jv-grid-td-sticky-left]=\"resolvedOptions().stickyColumns\"\n                  >\n                    <input\n                      type=\"checkbox\"\n                      class=\"jv-grid-checkbox\"\n                      [checked]=\"isSelected(row)\"\n                      (change)=\"toggleRow(row); $event.stopPropagation()\"\n                      (keydown.space)=\"$event.stopPropagation()\"\n                      [attr.aria-label]=\"getRowLabel(row, $index)\"\n                    />\n                  </td>\n                }\n                @for (col of visibleColumns(); track colKey(col); let colIdx = $index) {\n                  <td\n                    class=\"jv-grid-td\"\n                    [attr.role]=\"resolvedOptions().keyboardNavigation ? 'gridcell' : null\"\n                    [class]=\"col.cellClass || ''\"\n                    [class.jv-grid-td-sticky-left]=\"isStickyLeft(col)\"\n                    [class.jv-grid-td-sticky-right]=\"isStickyRight(col)\"\n                    [class.jv-grid-td-editable]=\"isCellEditable(col)\"\n                    [style.text-align]=\"col.align ?? 'start'\"\n                    (dblclick)=\"startEdit(row, col, $event)\"\n                    (keydown.enter)=\"startEdit(row, col, $event)\"\n                    [attr.data-row-index]=\"rowIdx\"\n                    [attr.data-column-index]=\"colIdx\"\n                    [class.jv-grid-keyboard-cell]=\"resolvedOptions().keyboardNavigation\"\n                    [attr.tabindex]=\"cellTabIndex(rowIdx, colIdx, col)\"\n                    (focus)=\"onCellFocus(rowIdx, colIdx)\"\n                    (keydown.f2)=\"onCellF2($event, rowIdx, colIdx)\"\n                    (keydown)=\"onCellKeydown($event, rowIdx, colIdx)\"\n                  >\n                    @if (isEditingCell(row, col)) {\n                      @if (editType(col) === 'select' && col.editOptions) {\n                        <jv-select\n                          [options]=\"getEditOptions(col)\"\n                          [modelValue]=\"getEditValue(row, col)\"\n                          (selectionChange)=\"onEditValueChange(row, col, $event)\"\n                        />\n                      } @else if (editType(col) === 'boolean') {\n                        <input\n                          type=\"checkbox\"\n                          class=\"jv-grid-checkbox\"\n                          [checked]=\"getBooleanEditValue(row, col)\"\n                          (change)=\"\n                            commitEdit(\n                              row,\n                              col,\n                              normalizeEditValue(col, $any($event.target).checked)\n                            )\n                          \"\n                          (keydown.enter)=\"\n                            commitEditFromKeyboard(\n                              $event,\n                              row,\n                              col,\n                              normalizeEditValue(col, $any($event.target).checked)\n                            )\n                          \"\n                          (keydown.escape)=\"cancelEdit()\"\n                          [attr.aria-label]=\"col.header\"\n                        />\n                      } @else {\n                        <input\n                          class=\"jv-grid-edit-input\"\n                          [type]=\"inputType(col)\"\n                          [value]=\"getEditValue(row, col)\"\n                          (blur)=\"\n                            commitEdit(row, col, normalizeEditValue(col, $any($event.target).value))\n                          \"\n                          (keydown.enter)=\"\n                            commitEditFromKeyboard(\n                              $event,\n                              row,\n                              col,\n                              normalizeEditValue(col, $any($event.target).value)\n                            )\n                          \"\n                          (keydown.escape)=\"cancelEdit()\"\n                        />\n                      }\n                    } @else {\n                      @let value = getCellValue(row, col);\n                      @if (col.type === 'boolean') {\n                        @if (isBooleanTrue(value)) {\n                          <span\n                            class=\"jv-grid-boolean jv-grid-boolean-true\"\n                            [attr.aria-label]=\"t('grid.booleanYes')\"\n                            >{{ t('grid.booleanYes') }}</span\n                          >\n                        } @else {\n                          <span\n                            class=\"jv-grid-boolean jv-grid-boolean-false\"\n                            [attr.aria-label]=\"t('grid.booleanNo')\"\n                            >{{ t('grid.booleanNo') }}</span\n                          >\n                        }\n                      } @else if (col.format) {\n                        {{ col.format(value, row) }}\n                      } @else {\n                        {{ formatValue(value, col, row) }}\n                      }\n                    }\n                  </td>\n                }\n                @if (actions().length > 0) {\n                  <td\n                    class=\"jv-grid-td jv-grid-td-actions\"\n                    [class.jv-grid-td-sticky-right]=\"resolvedOptions().stickyColumns\"\n                  >\n                    <div class=\"jv-grid-actions-group\">\n                      @for (action of actions(); track action.id) {\n                        <jv-button\n                          [variant]=\"actionVariant(action.variant)\"\n                          [icon]=\"action.icon ?? null\"\n                          [disabled]=\"action.disabled?.(row) ?? false\"\n                          [attr.aria-label]=\"action.label\"\n                          [title]=\"action.label\"\n                          (click)=\"onActionClick(action, row); $event.stopPropagation()\"\n                        ></jv-button>\n                      }\n                    </div>\n                  </td>\n                }\n              </tr>\n            }\n          }\n        </tbody>\n      </table>\n    </div>\n  }\n\n  @if (\n    resolvedOptions().pageable &&\n    !virtualScrollEnabled() &&\n    effectiveTotalPages() > 1 &&\n    !resolvedOptions().loading\n  ) {\n    <nav\n      class=\"jv-grid-pagination\"\n      role=\"navigation\"\n      [attr.aria-label]=\"t('grid.paginationLabel', { label: '' })\"\n    >\n      <div class=\"jv-grid-pagination-info\" aria-live=\"polite\" aria-atomic=\"true\">\n        {{\n          t('grid.itemsShowing', {\n            start: pageStart(),\n            end: pageEnd(),\n            total: effectiveTotalItems(),\n          })\n        }}\n      </div>\n      <div class=\"jv-grid-pagination-controls\">\n        @if (pageSizeOptions().length > 0) {\n          <jv-select\n            [options]=\"pageSizeOptions()\"\n            [modelValue]=\"pageSizeStr()\"\n            [ariaLabel]=\"t('grid.itemsPerPage')\"\n            (selectionChange)=\"onPageSizeChange($event)\"\n          />\n        }\n        <jv-button\n          variant=\"outline\"\n          icon=\"chevrons-left\"\n          [disabled]=\"pageIndex() === 0\"\n          (click)=\"goToPage(0)\"\n          [attr.aria-label]=\"t('grid.pageFirst')\"\n        ></jv-button>\n        <jv-button\n          variant=\"outline\"\n          icon=\"chevron-left\"\n          [disabled]=\"pageIndex() === 0\"\n          (click)=\"goToPage(pageIndex() - 1)\"\n          [attr.aria-label]=\"t('grid.pagePrev')\"\n        ></jv-button>\n        @for (p of pageRange(); track p) {\n          <jv-button\n            [variant]=\"p === pageIndex() ? 'primary' : 'outline'\"\n            [attr.aria-current]=\"p === pageIndex() ? 'page' : null\"\n            [attr.aria-label]=\"t('grid.pageOfTotal', { page: p + 1, total: effectiveTotalPages() })\"\n            (click)=\"goToPage(p)\"\n            >{{ p + 1 }}</jv-button\n          >\n        }\n        <jv-button\n          variant=\"outline\"\n          icon=\"chevron-right\"\n          [disabled]=\"pageIndex() >= effectiveTotalPages() - 1\"\n          (click)=\"goToPage(pageIndex() + 1)\"\n          [attr.aria-label]=\"t('grid.pageNext')\"\n        ></jv-button>\n        <jv-button\n          variant=\"outline\"\n          icon=\"chevrons-right\"\n          [disabled]=\"pageIndex() >= effectiveTotalPages() - 1\"\n          (click)=\"goToPage(effectiveTotalPages() - 1)\"\n          [attr.aria-label]=\"t('grid.pageLast')\"\n        ></jv-button>\n      </div>\n    </nav>\n  }\n</div>\n", 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvGridComponent, isStandalone: true, selector: "jv-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowClick: "rowClick", rowDoubleClick: "rowDoubleClick", actionClick: "actionClick", selectionChange: "selectionChange", pageChange: "pageChange", searchChange: "searchChange", sortChange: "sortChange", columnFilter: "columnFilter", columnResize: "columnResize", columnReorder: "columnReorder", rowEdit: "rowEdit" }, ngImport: i0, template: "<div class=\"jv-grid\" role=\"region\" [attr.aria-label]=\"resolvedOptions().ariaLabel || gridLabel()\">\n  @if (resolvedOptions().searchable || resolvedOptions().exportable) {\n    <div class=\"jv-grid-toolbar\">\n      @if (resolvedOptions().searchable) {\n        <div class=\"jv-grid-search\">\n          <jv-icon name=\"search\" [size]=\"16\" />\n          <jv-input\n            [inputId]=\"gridSearchInputId\"\n            [placeholder]=\"t('grid.searchPlaceholder')\"\n            [ngModel]=\"searchTerm()\"\n            (ngModelChange)=\"onSearchInput($event)\"\n          />\n        </div>\n      }\n      @if (resolvedOptions().exportable) {\n        <div class=\"jv-grid-export-actions\">\n          <jv-button variant=\"outline\" icon=\"download\" (click)=\"exportCsv()\">{{\n            t('grid.exportCsv')\n          }}</jv-button>\n          <jv-button variant=\"outline\" icon=\"file-spreadsheet\" (click)=\"exportExcel()\">{{\n            t('grid.exportExcel')\n          }}</jv-button>\n        </div>\n      }\n    </div>\n  }\n\n  @if (resolvedOptions().loading) {\n    <div class=\"jv-grid-loading\" role=\"status\" aria-live=\"polite\">\n      <span class=\"jv-grid-spinner\" aria-hidden=\"true\"></span>\n      <span>{{ t('grid.loading') }}</span>\n    </div>\n  } @else {\n    <div\n      class=\"jv-grid-table-wrap\"\n      [class.jv-grid-virtual]=\"virtualScrollEnabled()\"\n      #tableWrap\n      (scroll)=\"onVirtualScroll($any($event.target))\"\n    >\n      @if (virtualScrollEnabled()) {\n        <div class=\"jv-grid-virtual-spacer\" [style.height.px]=\"virtualTotalHeight()\"></div>\n      }\n      <table\n        class=\"jv-grid-table\"\n        role=\"grid\"\n        [attr.aria-label]=\"resolvedOptions().ariaLabel || gridLabel()\"\n        [attr.aria-rowcount]=\"effectiveTotalItems()\"\n        [attr.aria-colcount]=\"colspan()\"\n        [class]=\"densityClass()\"\n        [style.position]=\"virtualScrollEnabled() ? 'relative' : null\"\n        [style.top.px]=\"virtualOffsetY()\"\n      >\n        <caption class=\"sr-only\">\n          {{\n            resolvedOptions().ariaLabel || gridLabel()\n          }}\n        </caption>\n\n        @let hasGroupedHeaders = groupedHeaders().length > 0;\n\n        <thead class=\"jv-grid-thead\">\n          @if (hasGroupedHeaders) {\n            <tr>\n              @if (resolvedOptions().selectable) {\n                <th class=\"jv-grid-th jv-grid-th-select\" scope=\"col\" [attr.rowspan]=\"2\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"jv-grid-checkbox\"\n                    [checked]=\"allSelected()\"\n                    (change)=\"toggleSelectAll($any($event.target).checked)\"\n                    [attr.aria-label]=\"allSelected() ? t('grid.deselectAll') : t('grid.selectAll')\"\n                    [indeterminate]=\"someSelected()\"\n                  />\n                </th>\n              }\n              @for (group of groupedHeaders(); track colKey(group)) {\n                <th\n                  class=\"jv-grid-th\"\n                  [class]=\"group.headerClass || ''\"\n                  [class.jv-grid-th-sticky-left]=\"isStickyLeft(group)\"\n                  [class.jv-grid-th-sticky-right]=\"isStickyRight(group)\"\n                  [attr.colspan]=\"groupColspan(group)\"\n                  scope=\"colgroup\"\n                  [style.text-align]=\"group.align ?? 'start'\"\n                >\n                  <div class=\"jv-grid-th-content\">{{ group.header }}</div>\n                </th>\n              }\n              @if (actions().length > 0) {\n                <th class=\"jv-grid-th jv-grid-th-actions\" scope=\"col\" [attr.rowspan]=\"2\">\n                  <span class=\"sr-only\">{{ t('grid.actionsLabel', { label: '' }) }}</span>\n                </th>\n              }\n            </tr>\n          }\n\n          <tr>\n            @if (!hasGroupedHeaders && resolvedOptions().selectable) {\n              <th class=\"jv-grid-th jv-grid-th-select\" scope=\"col\">\n                <input\n                  type=\"checkbox\"\n                  class=\"jv-grid-checkbox\"\n                  [checked]=\"allSelected()\"\n                  (change)=\"toggleSelectAll($any($event.target).checked)\"\n                  [attr.aria-label]=\"allSelected() ? t('grid.deselectAll') : t('grid.selectAll')\"\n                  [indeterminate]=\"someSelected()\"\n                />\n              </th>\n            }\n            @for (col of visibleColumns(); track colKey(col); let colIdx = $index) {\n              <th\n                class=\"jv-grid-th\"\n                [class]=\"col.headerClass || ''\"\n                [class.jv-grid-th-sortable]=\"col.sortable !== false && resolvedOptions().sortable\"\n                [class.jv-grid-th-sticky-left]=\"isStickyLeft(col)\"\n                [class.jv-grid-th-sticky-right]=\"isStickyRight(col)\"\n                [class.jv-grid-th-reorderable]=\"resolvedOptions().reorderableColumns\"\n                [style.text-align]=\"col.align ?? 'start'\"\n                [style.width]=\"getColumnWidth(col)\"\n                [style.min-width]=\"col.minWidth || undefined\"\n                [style.max-width]=\"col.maxWidth || undefined\"\n                scope=\"col\"\n                role=\"columnheader\"\n                [attr.data-column-index]=\"colIdx\"\n                [attr.aria-sort]=\"getAriaSort(col)\"\n                [attr.aria-label]=\"getSortLabel(col)\"\n                [tabindex]=\"\n                  resolvedOptions().keyboardNavigation\n                    ? activeCell().column === colIdx\n                      ? 0\n                      : -1\n                    : col.sortable !== false && resolvedOptions().sortable\n                      ? 0\n                      : -1\n                \"\n                (click)=\"toggleSort(col)\"\n                (focus)=\"onHeaderFocus(colIdx)\"\n                (keydown)=\"onHeaderKeydown($event, colIdx)\"\n                (keydown.enter)=\"toggleSort(col)\"\n                (keydown.space)=\"toggleSort(col, $event)\"\n                draggable=\"{{ resolvedOptions().reorderableColumns ? 'true' : 'false' }}\"\n                (dragstart)=\"onDragStart($event, colIdx)\"\n                (dragover)=\"onDragOver($event, colIdx)\"\n                (drop)=\"onDrop($event, colIdx)\"\n                (dragend)=\"onDragEnd($event)\"\n              >\n                <div class=\"jv-grid-th-content\">\n                  <span>{{ col.header }}</span>\n                  @if (col.sortable !== false && resolvedOptions().sortable) {\n                    <span class=\"jv-grid-sort-icon\" aria-hidden=\"true\">\n                      @if (sortState().columnKey === colKey(col)) {\n                        @if (sortState().direction === 'asc') {\n                          \u25B2\n                        }\n                        @if (sortState().direction === 'desc') {\n                          \u25BC\n                        }\n                      }\n                    </span>\n                  }\n                </div>\n                @if (isColumnResizable(col)) {\n                  <div\n                    class=\"jv-grid-resize-handle\"\n                    (mousedown)=\"onResizeStart($event, col, colIdx)\"\n                  ></div>\n                }\n              </th>\n            }\n            @if (!hasGroupedHeaders && actions().length > 0) {\n              <th class=\"jv-grid-th jv-grid-th-actions\" scope=\"col\">\n                <span class=\"sr-only\">{{ t('grid.actionsLabel', { label: '' }) }}</span>\n              </th>\n            }\n          </tr>\n\n          @if (resolvedOptions().columnFilters) {\n            <tr class=\"jv-grid-filter-row\">\n              @if (resolvedOptions().selectable) {\n                <th class=\"jv-grid-th jv-grid-th-select\"></th>\n              }\n              @for (col of visibleColumns(); track colKey(col)) {\n                <th class=\"jv-grid-th jv-grid-th-filter\">\n                  @if (col.filterable !== false) {\n                    <input\n                      class=\"jv-grid-filter-input\"\n                      [placeholder]=\"t('grid.filterPlaceholder')\"\n                      [attr.aria-label]=\"t('grid.filterForColumn', { column: col.header })\"\n                      [ngModel]=\"colFilters()[colKey(col)]?.value ?? ''\"\n                      (ngModelChange)=\"onColumnFilterChange(col, $event)\"\n                    />\n                  }\n                </th>\n              }\n              @if (actions().length > 0) {\n                <th class=\"jv-grid-th jv-grid-th-actions\"></th>\n              }\n            </tr>\n          }\n        </thead>\n\n        <tbody class=\"jv-grid-tbody\">\n          @if (displayData().length === 0 && !searchTerm().trim() && !hasActiveFilters()) {\n            <tr>\n              <td class=\"jv-grid-empty\" [attr.colspan]=\"colspan()\">\n                {{ resolvedOptions().emptyMessage || t('grid.emptyMessage') }}\n              </td>\n            </tr>\n          } @else if (displayData().length === 0 && (searchTerm().trim() || hasActiveFilters())) {\n            <tr>\n              <td class=\"jv-grid-empty\" [attr.colspan]=\"colspan()\">\n                {{ resolvedOptions().noResultsMessage || t('grid.noResults') }}\n              </td>\n            </tr>\n          } @else {\n            @for (row of displayData(); track getRowId(row, $index); let rowIdx = $index) {\n              <tr\n                class=\"jv-grid-tr\"\n                role=\"row\"\n                [class.jv-grid-tr-editing]=\"isRowEditing(row)\"\n                [class.jv-grid-tr-selected]=\"isSelected(row)\"\n                [attr.aria-selected]=\"resolvedOptions().selectable ? isSelected(row) : null\"\n                (click)=\"onRowClick(row)\"\n                (dblclick)=\"onRowDblClick(row)\"\n                (keydown.enter)=\"onRowClick(row)\"\n                (keydown.space)=\"onRowClick($event, row)\"\n                [tabindex]=\"-1\"\n              >\n                @if (resolvedOptions().selectable) {\n                  <td\n                    class=\"jv-grid-td jv-grid-td-select\"\n                    [class.jv-grid-td-sticky-left]=\"resolvedOptions().stickyColumns\"\n                  >\n                    <input\n                      type=\"checkbox\"\n                      class=\"jv-grid-checkbox\"\n                      [checked]=\"isSelected(row)\"\n                      (change)=\"toggleRow(row); $event.stopPropagation()\"\n                      (keydown.space)=\"$event.stopPropagation()\"\n                      [attr.aria-label]=\"getRowLabel(row, $index)\"\n                    />\n                  </td>\n                }\n                @for (col of visibleColumns(); track colKey(col); let colIdx = $index) {\n                  <td\n                    class=\"jv-grid-td\"\n                    [attr.role]=\"resolvedOptions().keyboardNavigation ? 'gridcell' : null\"\n                    [class]=\"col.cellClass || ''\"\n                    [class.jv-grid-td-sticky-left]=\"isStickyLeft(col)\"\n                    [class.jv-grid-td-sticky-right]=\"isStickyRight(col)\"\n                    [class.jv-grid-td-editable]=\"isCellEditable(col)\"\n                    [style.text-align]=\"col.align ?? 'start'\"\n                    (dblclick)=\"startEdit(row, col, $event)\"\n                    (keydown.enter)=\"startEdit(row, col, $event)\"\n                    [attr.data-row-index]=\"rowIdx\"\n                    [attr.data-column-index]=\"colIdx\"\n                    [class.jv-grid-keyboard-cell]=\"resolvedOptions().keyboardNavigation\"\n                    [attr.tabindex]=\"cellTabIndex(rowIdx, colIdx, col)\"\n                    (focus)=\"onCellFocus(rowIdx, colIdx)\"\n                    (keydown.f2)=\"onCellF2($event, rowIdx, colIdx)\"\n                    (keydown)=\"onCellKeydown($event, rowIdx, colIdx)\"\n                  >\n                    @if (isEditingCell(row, col)) {\n                      @if (editType(col) === 'select' && col.editOptions) {\n                        <jv-select\n                          [options]=\"getEditOptions(col)\"\n                          [modelValue]=\"getEditValue(row, col)\"\n                          (selectionChange)=\"onEditValueChange(row, col, $event)\"\n                        />\n                      } @else if (editType(col) === 'boolean') {\n                        <input\n                          type=\"checkbox\"\n                          class=\"jv-grid-checkbox\"\n                          [checked]=\"getBooleanEditValue(row, col)\"\n                          (change)=\"\n                            commitEdit(\n                              row,\n                              col,\n                              normalizeEditValue(col, $any($event.target).checked)\n                            )\n                          \"\n                          (keydown.enter)=\"\n                            commitEditFromKeyboard(\n                              $event,\n                              row,\n                              col,\n                              normalizeEditValue(col, $any($event.target).checked)\n                            )\n                          \"\n                          (keydown.escape)=\"cancelEdit()\"\n                          [attr.aria-label]=\"col.header\"\n                        />\n                      } @else {\n                        <input\n                          class=\"jv-grid-edit-input\"\n                          [type]=\"inputType(col)\"\n                          [value]=\"getEditValue(row, col)\"\n                          (blur)=\"\n                            commitEdit(row, col, normalizeEditValue(col, $any($event.target).value))\n                          \"\n                          (keydown.enter)=\"\n                            commitEditFromKeyboard(\n                              $event,\n                              row,\n                              col,\n                              normalizeEditValue(col, $any($event.target).value)\n                            )\n                          \"\n                          (keydown.escape)=\"cancelEdit()\"\n                        />\n                      }\n                    } @else {\n                      @let value = getCellValue(row, col);\n                      @if (col.type === 'boolean') {\n                        @if (isBooleanTrue(value)) {\n                          <span\n                            class=\"jv-grid-boolean jv-grid-boolean-true\"\n                            [attr.aria-label]=\"t('grid.booleanYes')\"\n                            >{{ t('grid.booleanYes') }}</span\n                          >\n                        } @else {\n                          <span\n                            class=\"jv-grid-boolean jv-grid-boolean-false\"\n                            [attr.aria-label]=\"t('grid.booleanNo')\"\n                            >{{ t('grid.booleanNo') }}</span\n                          >\n                        }\n                      } @else if (col.format) {\n                        {{ col.format(value, row) }}\n                      } @else {\n                        {{ formatValue(value, col, row) }}\n                      }\n                    }\n                  </td>\n                }\n                @if (actions().length > 0) {\n                  <td\n                    class=\"jv-grid-td jv-grid-td-actions\"\n                    [class.jv-grid-td-sticky-right]=\"resolvedOptions().stickyColumns\"\n                  >\n                    <div class=\"jv-grid-actions-group\">\n                      @for (action of actions(); track action.id) {\n                        <jv-button\n                          [variant]=\"actionVariant(action.variant)\"\n                          [icon]=\"action.icon ?? null\"\n                          [disabled]=\"action.disabled?.(row) ?? false\"\n                          [attr.aria-label]=\"action.label\"\n                          [title]=\"action.label\"\n                          (click)=\"onActionClick(action, row); $event.stopPropagation()\"\n                        ></jv-button>\n                      }\n                    </div>\n                  </td>\n                }\n              </tr>\n            }\n          }\n        </tbody>\n      </table>\n    </div>\n  }\n\n  @if (\n    resolvedOptions().pageable &&\n    !virtualScrollEnabled() &&\n    effectiveTotalPages() > 1 &&\n    !resolvedOptions().loading\n  ) {\n    <nav\n      class=\"jv-grid-pagination\"\n      role=\"navigation\"\n      [attr.aria-label]=\"t('grid.paginationLabel', { label: '' })\"\n    >\n      <div class=\"jv-grid-pagination-info\" aria-live=\"polite\" aria-atomic=\"true\">\n        {{\n          t('grid.itemsShowing', {\n            start: pageStart(),\n            end: pageEnd(),\n            total: effectiveTotalItems(),\n          })\n        }}\n      </div>\n      <div class=\"jv-grid-pagination-controls\">\n        @if (pageSizeOptions().length > 0) {\n          <jv-select\n            [options]=\"pageSizeOptions()\"\n            [modelValue]=\"pageSizeStr()\"\n            [ariaLabel]=\"t('grid.itemsPerPage')\"\n            (selectionChange)=\"onPageSizeChange($event)\"\n          />\n        }\n        <jv-button\n          variant=\"outline\"\n          icon=\"chevrons-left\"\n          [disabled]=\"pageIndex() === 0\"\n          (click)=\"goToPage(0)\"\n          [attr.aria-label]=\"t('grid.pageFirst')\"\n        ></jv-button>\n        <jv-button\n          variant=\"outline\"\n          icon=\"chevron-left\"\n          [disabled]=\"pageIndex() === 0\"\n          (click)=\"goToPage(pageIndex() - 1)\"\n          [attr.aria-label]=\"t('grid.pagePrev')\"\n        ></jv-button>\n        @for (p of pageRange(); track p) {\n          <jv-button\n            [variant]=\"p === pageIndex() ? 'primary' : 'outline'\"\n            [attr.aria-current]=\"p === pageIndex() ? 'page' : null\"\n            [attr.aria-label]=\"t('grid.pageOfTotal', { page: p + 1, total: effectiveTotalPages() })\"\n            (click)=\"goToPage(p)\"\n            >{{ p + 1 }}</jv-button\n          >\n        }\n        <jv-button\n          variant=\"outline\"\n          icon=\"chevron-right\"\n          [disabled]=\"pageIndex() >= effectiveTotalPages() - 1\"\n          (click)=\"goToPage(pageIndex() + 1)\"\n          [attr.aria-label]=\"t('grid.pageNext')\"\n        ></jv-button>\n        <jv-button\n          variant=\"outline\"\n          icon=\"chevrons-right\"\n          [disabled]=\"pageIndex() >= effectiveTotalPages() - 1\"\n          (click)=\"goToPage(effectiveTotalPages() - 1)\"\n          [attr.aria-label]=\"t('grid.pageLast')\"\n        ></jv-button>\n      </div>\n    </nav>\n  }\n</div>\n", 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", "ariaLabel", "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,