valtech-components 4.0.5 → 4.0.6

package/fesm2022/valtech-components.mjs

@@ -56,7 +56,7 @@ import { BrowserMultiFormatReader } from '@zxing/browser';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '4.0.5';
+const VERSION = '4.0.6';
 
 // Control de estado de refresco (singleton a nivel de módulo)
 let isRefreshing = false;
@@ -10576,8 +10576,13 @@ class ButtonComponent {
       [disabled]="resolvedProps.state === states.DISABLED"
       [ngClass]="resolvedProps.size ? [resolvedProps.size] : []"
     >
-      <ion-icon *ngIf="resolvedProps.icon" [slot]="resolvedProps.icon.slot" [name]="resolvedProps.icon.name"></ion-icon>
-      <ion-spinner *ngIf="resolvedProps.state === states.WORKING" name="circular"></ion-spinner>
+      <ion-icon
+        *ngIf="resolvedProps.icon"
+        [slot]="resolvedProps.icon.slot"
+        [name]="resolvedProps.icon.name"
+        aria-hidden="true"
+      ></ion-icon>
+      <ion-spinner *ngIf="resolvedProps.state === states.WORKING" name="circular" aria-label="Cargando"></ion-spinner>
       <ion-text *ngIf="resolvedProps.state !== states.WORKING">{{ displayText }}</ion-text>
     </ion-button>
   `, isInline: true, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}ion-button{font-family:var(--ion-default-font),Arial,sans-serif;min-width:6.25rem;margin:0}ion-button.small{--padding-bottom: 12px;--padding-end: 14px;--padding-start: 14px;--padding-top: 12px}ion-button.button-clear{padding:0;margin:0}ion-button ion-spinner{--color: currentColor}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }] }); }
@@ -10600,8 +10605,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       [disabled]="resolvedProps.state === states.DISABLED"
       [ngClass]="resolvedProps.size ? [resolvedProps.size] : []"
     >
-      <ion-icon *ngIf="resolvedProps.icon" [slot]="resolvedProps.icon.slot" [name]="resolvedProps.icon.name"></ion-icon>
-      <ion-spinner *ngIf="resolvedProps.state === states.WORKING" name="circular"></ion-spinner>
+      <ion-icon
+        *ngIf="resolvedProps.icon"
+        [slot]="resolvedProps.icon.slot"
+        [name]="resolvedProps.icon.name"
+        aria-hidden="true"
+      ></ion-icon>
+      <ion-spinner *ngIf="resolvedProps.state === states.WORKING" name="circular" aria-label="Cargando"></ion-spinner>
       <ion-text *ngIf="resolvedProps.state !== states.WORKING">{{ displayText }}</ion-text>
     </ion-button>
   `, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}ion-button{font-family:var(--ion-default-font),Arial,sans-serif;min-width:6.25rem;margin:0}ion-button.small{--padding-bottom: 12px;--padding-end: 14px;--padding-start: 14px;--padding-top: 12px}ion-button.button-clear{padding:0;margin:0}ion-button ion-spinner{--color: currentColor}\n"] }]
@@ -11383,6 +11393,7 @@ class ProgressBarComponent {
       [color]="resolvedProps.color"
       [buffer]="resolvedProps.buffer"
       [type]="resolvedProps.type"
+      [attr.aria-label]="resolvedProps.label || 'Progreso'"
     ></ion-progress-bar>
   `, isInline: true, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}ion-progress-bar.rounded{border-radius:.5rem}.medium{height:.25rem}.large{height:.375rem}.xlarge{height:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IonProgressBar, selector: "ion-progress-bar", inputs: ["buffer", "color", "mode", "reversed", "type", "value"] }] }); }
 }
@@ -11396,6 +11407,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       [color]="resolvedProps.color"
       [buffer]="resolvedProps.buffer"
       [type]="resolvedProps.type"
+      [attr.aria-label]="resolvedProps.label || 'Progreso'"
     ></ion-progress-bar>
   `, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}ion-progress-bar.rounded{border-radius:.5rem}.medium{height:.25rem}.large{height:.375rem}.xlarge{height:.5rem}\n"] }]
         }], propDecorators: { preset: [{
@@ -12348,9 +12360,7 @@ class FabComponent {
      * Explicit props take precedence over preset values.
      */
     resolveProps() {
-        const presetProps = this.preset
-            ? this.presets.get('fab', this.preset)
-            : {};
+        const presetProps = this.preset ? this.presets.get('fab', this.preset) : {};
         this.resolvedProps = {
             ...presetProps,
             ...this.props,
@@ -12394,11 +12404,7 @@ class FabComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FabComponent, isStandalone: true, selector: "val-fab", inputs: { preset: "preset", props: "props" }, outputs: { fabClick: "fabClick", actionClick: "actionClick" }, usesOnChanges: true, ngImport: i0, template: `
-    <ion-fab
-      [vertical]="getVertical()"
-      [horizontal]="getHorizontal()"
-      [activated]="isActivated"
-    >
+    <ion-fab [vertical]="getVertical()" [horizontal]="getHorizontal()" [activated]="isActivated">
       <ion-fab-button
         [color]="resolvedProps.color || 'primary'"
         [size]="resolvedProps.size"
@@ -12406,7 +12412,7 @@ class FabComponent {
         [translucent]="resolvedProps.translucent"
         (click)="onMainClick()"
       >
-        <ion-icon [name]="getMainIcon()"></ion-icon>
+        <ion-icon [name]="getMainIcon()" aria-hidden="true"></ion-icon>
       </ion-fab-button>
 
       @if (resolvedProps.actions && resolvedProps.actions.length > 0) {
@@ -12417,7 +12423,7 @@ class FabComponent {
               [disabled]="action.disabled"
               (click)="onActionClick(action)"
             >
-              <ion-icon [name]="action.icon"></ion-icon>
+              <ion-icon [name]="action.icon" aria-hidden="true"></ion-icon>
             </ion-fab-button>
           }
         </ion-fab-list>
@@ -12428,11 +12434,7 @@ class FabComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FabComponent, decorators: [{
             type: Component,
             args: [{ selector: 'val-fab', standalone: true, imports: [CommonModule, IonFab, IonFabButton, IonFabList, IonIcon, IonLabel], template: `
-    <ion-fab
-      [vertical]="getVertical()"
-      [horizontal]="getHorizontal()"
-      [activated]="isActivated"
-    >
+    <ion-fab [vertical]="getVertical()" [horizontal]="getHorizontal()" [activated]="isActivated">
       <ion-fab-button
         [color]="resolvedProps.color || 'primary'"
         [size]="resolvedProps.size"
@@ -12440,7 +12442,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         [translucent]="resolvedProps.translucent"
         (click)="onMainClick()"
       >
-        <ion-icon [name]="getMainIcon()"></ion-icon>
+        <ion-icon [name]="getMainIcon()" aria-hidden="true"></ion-icon>
       </ion-fab-button>
 
       @if (resolvedProps.actions && resolvedProps.actions.length > 0) {
@@ -12451,7 +12453,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
               [disabled]="action.disabled"
               (click)="onActionClick(action)"
             >
-              <ion-icon [name]="action.icon"></ion-icon>
+              <ion-icon [name]="action.icon" aria-hidden="true"></ion-icon>
             </ion-fab-button>
           }
         </ion-fab-list>
@@ -13865,13 +13867,12 @@ class HorizontalScrollComponent {
       [class.snap-start]="props?.snapAlign === 'start'"
       [class.snap-center]="props?.snapAlign === 'center'"
       [style.padding]="props?.padding || '0px'"
+      tabindex="0"
     >
       <div class="items-wrapper" [style.gap]="props?.gap || '0px'">
         @for (item of items; track $index) {
           <div class="scroll-item">
-            <ng-container
-              *ngTemplateOutlet="itemTemplate; context: { $implicit: item, index: $index }"
-            ></ng-container>
+            <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item, index: $index }"></ng-container>
           </div>
         }
       </div>
@@ -13887,13 +13888,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       [class.snap-start]="props?.snapAlign === 'start'"
       [class.snap-center]="props?.snapAlign === 'center'"
       [style.padding]="props?.padding || '0px'"
+      tabindex="0"
     >
       <div class="items-wrapper" [style.gap]="props?.gap || '0px'">
         @for (item of items; track $index) {
           <div class="scroll-item">
-            <ng-container
-              *ngTemplateOutlet="itemTemplate; context: { $implicit: item, index: $index }"
-            ></ng-container>
+            <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item, index: $index }"></ng-container>
           </div>
         }
       </div>
@@ -15194,9 +15194,10 @@ class CardComponent {
           <ng-container *ngFor="let action of resolvedProps.leftActions">
             <ion-button
               *ngIf="action.type === actionTypes.ICON"
+              [attr.aria-label]="action.description"
               (click)="clickHandler(sections.headerLeft, action.token)"
             >
-              <ion-icon slot="icon-only" [name]="action.description" color="dark"></ion-icon>
+              <ion-icon slot="icon-only" [name]="action.description" color="dark" aria-hidden="true"></ion-icon>
             </ion-button>
             <val-avatar
               style="margin-right: 4px; cursor: pointer"
@@ -15224,9 +15225,10 @@ class CardComponent {
           <ng-container *ngFor="let action of resolvedProps.rightActions">
             <ion-button
               *ngIf="action.type === actionTypes.ICON"
+              [attr.aria-label]="action.description"
               (click)="clickHandler(sections.headerRight, action.token)"
             >
-              <ion-icon slot="icon-only" [name]="action.description" color="dark"></ion-icon>
+              <ion-icon slot="icon-only" [name]="action.description" color="dark" aria-hidden="true"></ion-icon>
             </ion-button>
             <val-avatar
               style="margin-right: 4px; cursor: pointer"
@@ -15268,7 +15270,9 @@ class CardComponent {
         @if (resolvedProps.image) {
           <img [alt]="resolvedProps.title || 'Card image'" [src]="resolvedProps.image" />
         }
-        <ion-card-content *ngIf="resolvedProps.content" class="complex-content">{{ resolvedProps.content }}</ion-card-content>
+        <ion-card-content *ngIf="resolvedProps.content" class="complex-content">{{
+          resolvedProps.content
+        }}</ion-card-content>
       </div>
       @if (resolvedProps.footerActions && resolvedProps.footerActions.length > 0) {
         <div class="card-actions">
@@ -15286,9 +15290,10 @@ class CardComponent {
         <ng-container *ngFor="let action of resolvedProps.footerComplexActions">
           <ion-button
             *ngIf="action.type === actionTypes.ICON"
+            [attr.aria-label]="action.description"
             (click)="clickHandler(sections.footerExtra, action.token)"
           >
-            <ion-icon slot="icon-only" [name]="action.description" color="dark"></ion-icon>
+            <ion-icon slot="icon-only" [name]="action.description" color="dark" aria-hidden="true"></ion-icon>
           </ion-button>
           <val-avatar
             style="margin-right: 4px; cursor: pointer"
@@ -15404,9 +15409,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           <ng-container *ngFor="let action of resolvedProps.leftActions">
             <ion-button
               *ngIf="action.type === actionTypes.ICON"
+              [attr.aria-label]="action.description"
               (click)="clickHandler(sections.headerLeft, action.token)"
             >
-              <ion-icon slot="icon-only" [name]="action.description" color="dark"></ion-icon>
+              <ion-icon slot="icon-only" [name]="action.description" color="dark" aria-hidden="true"></ion-icon>
             </ion-button>
             <val-avatar
               style="margin-right: 4px; cursor: pointer"
@@ -15434,9 +15440,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           <ng-container *ngFor="let action of resolvedProps.rightActions">
             <ion-button
               *ngIf="action.type === actionTypes.ICON"
+              [attr.aria-label]="action.description"
               (click)="clickHandler(sections.headerRight, action.token)"
             >
-              <ion-icon slot="icon-only" [name]="action.description" color="dark"></ion-icon>
+              <ion-icon slot="icon-only" [name]="action.description" color="dark" aria-hidden="true"></ion-icon>
             </ion-button>
             <val-avatar
               style="margin-right: 4px; cursor: pointer"
@@ -15478,7 +15485,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         @if (resolvedProps.image) {
           <img [alt]="resolvedProps.title || 'Card image'" [src]="resolvedProps.image" />
         }
-        <ion-card-content *ngIf="resolvedProps.content" class="complex-content">{{ resolvedProps.content }}</ion-card-content>
+        <ion-card-content *ngIf="resolvedProps.content" class="complex-content">{{
+          resolvedProps.content
+        }}</ion-card-content>
       </div>
       @if (resolvedProps.footerActions && resolvedProps.footerActions.length > 0) {
         <div class="card-actions">
@@ -15496,9 +15505,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         <ng-container *ngFor="let action of resolvedProps.footerComplexActions">
           <ion-button
             *ngIf="action.type === actionTypes.ICON"
+            [attr.aria-label]="action.description"
             (click)="clickHandler(sections.footerExtra, action.token)"
           >
-            <ion-icon slot="icon-only" [name]="action.description" color="dark"></ion-icon>
+            <ion-icon slot="icon-only" [name]="action.description" color="dark" aria-hidden="true"></ion-icon>
           </ion-button>
           <val-avatar
             style="margin-right: 4px; cursor: pointer"
@@ -15720,7 +15730,12 @@ class ContentLoaderComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ContentLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ContentLoaderComponent, isStandalone: true, selector: "val-content-loader", inputs: { props: "props" }, ngImport: i0, template: `
     <div [ngClass]="['spinner-wrapper', props.size]">
-      <ion-spinner [ngClass]="[props.size]" [name]="props.name" [color]="props.color"></ion-spinner>
+      <ion-spinner
+        [ngClass]="[props.size]"
+        [name]="props.name"
+        [color]="props.color"
+        [attr.aria-label]="props.text || 'Cargando'"
+      ></ion-spinner>
       <ion-text [color]="props.color">
         <p>{{ props.text }}</p>
       </ion-text>
@@ -15731,7 +15746,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             type: Component,
             args: [{ selector: 'val-content-loader', standalone: true, imports: [CommonModule, IonSpinner, IonText], template: `
     <div [ngClass]="['spinner-wrapper', props.size]">
-      <ion-spinner [ngClass]="[props.size]" [name]="props.name" [color]="props.color"></ion-spinner>
+      <ion-spinner
+        [ngClass]="[props.size]"
+        [name]="props.name"
+        [color]="props.color"
+        [attr.aria-label]="props.text || 'Cargando'"
+      ></ion-spinner>
       <ion-text [color]="props.color">
         <p>{{ props.text }}</p>
       </ion-text>
@@ -16144,7 +16164,10 @@ class FileInputComponent {
     <div class="file-container">
       <input style="display: none" type="file" (change)="onFileSelected($event)" #fileInput [accept]="props.accept" />
       <div class="name-container">
-        <ion-icon [name]="selectedFile ? 'checkmark-circle-outline' : 'alert-circle-outline'"></ion-icon>
+        <ion-icon
+          [name]="selectedFile ? 'checkmark-circle-outline' : 'alert-circle-outline'"
+          aria-hidden="true"
+        ></ion-icon>
         <val-text
           style="margin-left: 4px;"
           [props]="{
@@ -16165,7 +16188,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
     <div class="file-container">
       <input style="display: none" type="file" (change)="onFileSelected($event)" #fileInput [accept]="props.accept" />
       <div class="name-container">
-        <ion-icon [name]="selectedFile ? 'checkmark-circle-outline' : 'alert-circle-outline'"></ion-icon>
+        <ion-icon
+          [name]="selectedFile ? 'checkmark-circle-outline' : 'alert-circle-outline'"
+          aria-hidden="true"
+        ></ion-icon>
         <val-text
           style="margin-left: 4px;"
           [props]="{
@@ -16411,16 +16437,16 @@ class PopoverSelectorComponent {
           [disabled]="props.disabled || false"
           class="selector-trigger"
         >
-          <ion-icon *ngIf="props.icon" [name]="props.icon" slot="start"> </ion-icon>
+          <ion-icon *ngIf="props.icon" [name]="props.icon" slot="start" aria-hidden="true"> </ion-icon>
 
           <span class="trigger-text">{{ getDisplayText() }}</span>
 
-          <ion-icon name="chevron-down-outline" slot="end" class="chevron-icon"> </ion-icon>
+          <ion-icon name="chevron-down-outline" slot="end" class="chevron-icon" aria-hidden="true"> </ion-icon>
         </ion-button>
 
         <ion-select-option *ngFor="let option of props.options" [value]="option.value" [disabled]="option.disabled">
           <div class="option-content">
-            <ion-icon *ngIf="option.icon" [name]="option.icon" class="option-icon"> </ion-icon>
+            <ion-icon *ngIf="option.icon" [name]="option.icon" class="option-icon" aria-hidden="true"> </ion-icon>
             <span>{{ option.label }}</span>
           </div>
         </ion-select-option>
@@ -16453,16 +16479,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           [disabled]="props.disabled || false"
           class="selector-trigger"
         >
-          <ion-icon *ngIf="props.icon" [name]="props.icon" slot="start"> </ion-icon>
+          <ion-icon *ngIf="props.icon" [name]="props.icon" slot="start" aria-hidden="true"> </ion-icon>
 
           <span class="trigger-text">{{ getDisplayText() }}</span>
 
-          <ion-icon name="chevron-down-outline" slot="end" class="chevron-icon"> </ion-icon>
+          <ion-icon name="chevron-down-outline" slot="end" class="chevron-icon" aria-hidden="true"> </ion-icon>
         </ion-button>
 
         <ion-select-option *ngFor="let option of props.options" [value]="option.value" [disabled]="option.disabled">
           <div class="option-content">
-            <ion-icon *ngIf="option.icon" [name]="option.icon" class="option-icon"> </ion-icon>
+            <ion-icon *ngIf="option.icon" [name]="option.icon" class="option-icon" aria-hidden="true"> </ion-icon>
             <span>{{ option.label }}</span>
           </div>
         </ion-select-option>
@@ -16611,9 +16637,10 @@ class LanguageSelectorComponent {
         [fill]="props.fill || 'clear'"
         [size]="props.size || 'default'"
         [disabled]="props.disabled"
+        [attr.aria-label]="'Cambiar idioma'"
         class="icon-mode-button"
       >
-        <ion-icon slot="icon-only" [name]="props.icon || 'globe-outline'"></ion-icon>
+        <ion-icon slot="icon-only" [name]="props.icon || 'globe-outline'" aria-hidden="true"></ion-icon>
       </ion-button>
 
       <ion-popover [trigger]="popoverId" [dismissOnSelect]="true">
@@ -16628,7 +16655,7 @@ class LanguageSelectorComponent {
               >
                 <ion-label>{{ getLanguageDisplayName(lang) }}</ion-label>
                 @if (lang === currentLanguage) {
-                  <ion-icon slot="end" name="checkmark" color="primary"></ion-icon>
+                  <ion-icon slot="end" name="checkmark" color="primary" aria-hidden="true"></ion-icon>
                 }
               </ion-item>
             }
@@ -16654,9 +16681,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         [fill]="props.fill || 'clear'"
         [size]="props.size || 'default'"
         [disabled]="props.disabled"
+        [attr.aria-label]="'Cambiar idioma'"
         class="icon-mode-button"
       >
-        <ion-icon slot="icon-only" [name]="props.icon || 'globe-outline'"></ion-icon>
+        <ion-icon slot="icon-only" [name]="props.icon || 'globe-outline'" aria-hidden="true"></ion-icon>
       </ion-button>
 
       <ion-popover [trigger]="popoverId" [dismissOnSelect]="true">
@@ -16671,7 +16699,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
               >
                 <ion-label>{{ getLanguageDisplayName(lang) }}</ion-label>
                 @if (lang === currentLanguage) {
-                  <ion-icon slot="end" name="checkmark" color="primary"></ion-icon>
+                  <ion-icon slot="end" name="checkmark" color="primary" aria-hidden="true"></ion-icon>
                 }
               </ion-item>
             }
@@ -17111,7 +17139,7 @@ class LinkComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: LinkComponent, isStandalone: true, selector: "val-link", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
     <div>
       <ion-button type="button" [color]="props.color" fill="clear" [size]="props.size" (click)="onClickHandler()">
-        <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
+        <ion-icon slot="end" name="chevron-forward-outline" aria-hidden="true"></ion-icon>
         <ion-text>{{ props.text }}</ion-text>
       </ion-button>
     </div>
@@ -17122,7 +17150,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             args: [{ selector: 'val-link', standalone: true, imports: [IonButton, IonIcon, IonText], template: `
     <div>
       <ion-button type="button" [color]="props.color" fill="clear" [size]="props.size" (click)="onClickHandler()">
-        <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
+        <ion-icon slot="end" name="chevron-forward-outline" aria-hidden="true"></ion-icon>
         <ion-text>{{ props.text }}</ion-text>
       </ion-button>
     </div>
@@ -17634,7 +17662,11 @@ class PasswordInputComponent {
         [attr.aria-label]="toggleLabel()"
         [attr.aria-pressed]="!hidePassword"
       >
-        <ion-icon slot="icon-only" [name]="hidePassword ? 'eye-off-outline' : 'eye-outline'"></ion-icon>
+        <ion-icon
+          slot="icon-only"
+          [name]="hidePassword ? 'eye-off-outline' : 'eye-outline'"
+          aria-hidden="true"
+        ></ion-icon>
       </ion-button>
     </div>
   `, isInline: true, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.section{margin-top:1rem}.input{margin:var(--val-form-field-gap, .5rem) 0}@media (min-width: 768px){.input{margin:var(--val-form-field-gap, .75rem) 0}}.submit-actions--sticky{position:sticky;bottom:0;z-index:1;background:var(--ion-background-color);border-top:1px solid var(--ion-color-step-150, rgba(0, 0, 0, .08));padding:.75rem 0 calc(.75rem + env(safe-area-inset-bottom))}.field-description{display:block;font-size:.75rem;color:var(--ion-color-dark);margin-bottom:.25rem;line-height:1.4}.input-container{display:flex;align-items:center;flex-direction:row}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
@@ -17657,7 +17689,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         [attr.aria-label]="toggleLabel()"
         [attr.aria-pressed]="!hidePassword"
       >
-        <ion-icon slot="icon-only" [name]="hidePassword ? 'eye-off-outline' : 'eye-outline'"></ion-icon>
+        <ion-icon
+          slot="icon-only"
+          [name]="hidePassword ? 'eye-off-outline' : 'eye-outline'"
+          aria-hidden="true"
+        ></ion-icon>
       </ion-button>
     </div>
   `, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.section{margin-top:1rem}.input{margin:var(--val-form-field-gap, .5rem) 0}@media (min-width: 768px){.input{margin:var(--val-form-field-gap, .75rem) 0}}.submit-actions--sticky{position:sticky;bottom:0;z-index:1;background:var(--ion-background-color);border-top:1px solid var(--ion-color-step-150, rgba(0, 0, 0, .08));padding:.75rem 0 calc(.75rem + env(safe-area-inset-bottom))}.field-description{display:block;font-size:.75rem;color:var(--ion-color-dark);margin-bottom:.25rem;line-height:1.4}.input-container{display:flex;align-items:center;flex-direction:row}\n"] }]
@@ -18818,7 +18854,13 @@ class SelectSearchComponent {
           <ion-list>
             <ion-item *ngFor="let item of filteredItems" button (click)="selectItem(item)" detail="false">
               <ion-label>{{ item[labelProperty] }}</ion-label>
-              <ion-icon *ngIf="isItemSelected(item)" name="checkmark-outline" slot="end" color="primary"></ion-icon>
+              <ion-icon
+                *ngIf="isItemSelected(item)"
+                name="checkmark-outline"
+                slot="end"
+                color="primary"
+                aria-hidden="true"
+              ></ion-icon>
             </ion-item>
             <ion-item *ngIf="filteredItems.length === 0" lines="none">
               <ion-label color="dark">{{ getNoResultsText() }}</ion-label>
@@ -18859,7 +18901,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           <ion-list>
             <ion-item *ngFor="let item of filteredItems" button (click)="selectItem(item)" detail="false">
               <ion-label>{{ item[labelProperty] }}</ion-label>
-              <ion-icon *ngIf="isItemSelected(item)" name="checkmark-outline" slot="end" color="primary"></ion-icon>
+              <ion-icon
+                *ngIf="isItemSelected(item)"
+                name="checkmark-outline"
+                slot="end"
+                color="primary"
+                aria-hidden="true"
+              ></ion-icon>
             </ion-item>
             <ion-item *ngIf="filteredItems.length === 0" lines="none">
               <ion-label color="dark">{{ getNoResultsText() }}</ion-label>
@@ -18965,7 +19013,7 @@ class SegmentControlComponent {
       @for (option of resolvedProps.options; track option.value) {
         <ion-segment-button [value]="option.value" [disabled]="option.disabled" [layout]="option.layout || 'icon-top'">
           @if (option.icon) {
-            <ion-icon [name]="option.icon"></ion-icon>
+            <ion-icon [name]="option.icon" aria-hidden="true"></ion-icon>
           }
           @if (getOptionLabel(option)) {
             <ion-label>{{ getOptionLabel(option) }}</ion-label>
@@ -18990,7 +19038,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       @for (option of resolvedProps.options; track option.value) {
         <ion-segment-button [value]="option.value" [disabled]="option.disabled" [layout]="option.layout || 'icon-top'">
           @if (option.icon) {
-            <ion-icon [name]="option.icon"></ion-icon>
+            <ion-icon [name]="option.icon" aria-hidden="true"></ion-icon>
           }
           @if (getOptionLabel(option)) {
             <ion-label>{{ getOptionLabel(option) }}</ion-label>
@@ -19309,8 +19357,8 @@ class CodeDisplayComponent {
       </div>
       <div class="code-content">
         <div class="copy-button-wrapper">
-          <ion-button fill="clear" class="copy-button" (click)="copyToClipboard()">
-            <ion-icon name="copy-outline"></ion-icon>
+          <ion-button fill="clear" class="copy-button" [attr.aria-label]="'Copiar'" (click)="copyToClipboard()">
+            <ion-icon name="copy-outline" aria-hidden="true"></ion-icon>
           </ion-button>
         </div>
         <pre><code [class]="'language-' + (props.tabs[selectedTab]?.language || props.language)" #codeElement></code></pre>
@@ -19334,8 +19382,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       </div>
       <div class="code-content">
         <div class="copy-button-wrapper">
-          <ion-button fill="clear" class="copy-button" (click)="copyToClipboard()">
-            <ion-icon name="copy-outline"></ion-icon>
+          <ion-button fill="clear" class="copy-button" [attr.aria-label]="'Copiar'" (click)="copyToClipboard()">
+            <ion-icon name="copy-outline" aria-hidden="true"></ion-icon>
           </ion-button>
         </div>
         <pre><code [class]="'language-' + (props.tabs[selectedTab]?.language || props.language)" #codeElement></code></pre>
@@ -19457,7 +19505,7 @@ class PillComponent {
       <div class="notif-pill" [attr.aria-live]="'polite'">
         @if (resolvedProps.notification?.icon) {
           <div class="notif-pill__icon-wrap" [style.color]="getIconColor()">
-            <ion-icon [name]="resolvedProps.notification!.icon!" />
+            <ion-icon [name]="resolvedProps.notification!.icon!" aria-hidden="true" />
           </div>
         }
 
@@ -19479,7 +19527,7 @@ class PillComponent {
                 [attr.aria-label]="action.ariaLabel || action.token"
                 (click)="onActionClick(action.token, $event)"
               >
-                <ion-icon [name]="action.icon" />
+                <ion-icon [name]="action.icon" aria-hidden="true" />
               </button>
             }
           </div>
@@ -19508,7 +19556,7 @@ class PillComponent {
         (keydown.space)="onPillClick($event)"
       >
         @if (resolvedProps.icon) {
-          <ion-icon class="val-pill__icon" [name]="resolvedProps.icon" />
+          <ion-icon class="val-pill__icon" [name]="resolvedProps.icon" aria-hidden="true" />
         }
         <span class="val-pill__label">{{ resolvedProps.label }}</span>
       </span>
@@ -19523,7 +19571,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       <div class="notif-pill" [attr.aria-live]="'polite'">
         @if (resolvedProps.notification?.icon) {
           <div class="notif-pill__icon-wrap" [style.color]="getIconColor()">
-            <ion-icon [name]="resolvedProps.notification!.icon!" />
+            <ion-icon [name]="resolvedProps.notification!.icon!" aria-hidden="true" />
           </div>
         }
 
@@ -19545,7 +19593,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 [attr.aria-label]="action.ariaLabel || action.token"
                 (click)="onActionClick(action.token, $event)"
               >
-                <ion-icon [name]="action.icon" />
+                <ion-icon [name]="action.icon" aria-hidden="true" />
               </button>
             }
           </div>
@@ -19574,7 +19622,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         (keydown.space)="onPillClick($event)"
       >
         @if (resolvedProps.icon) {
-          <ion-icon class="val-pill__icon" [name]="resolvedProps.icon" />
+          <ion-icon class="val-pill__icon" [name]="resolvedProps.icon" aria-hidden="true" />
         }
         <span class="val-pill__label">{{ resolvedProps.label }}</span>
       </span>
@@ -19804,9 +19852,7 @@ class AccordionComponent {
         }
     }
     resolveProps() {
-        const presetProps = this.preset
-            ? this.presets.get('accordion', this.preset)
-            : {};
+        const presetProps = this.preset ? this.presets.get('accordion', this.preset) : {};
         this.resolvedProps = {
             ...presetProps,
             ...this.props,
@@ -19834,7 +19880,7 @@ class AccordionComponent {
         <ion-accordion [value]="item.value" [disabled]="item.disabled">
           <ion-item slot="header" [color]="resolvedProps.color || 'light'">
             @if (item.icon) {
-              <ion-icon [name]="item.icon" slot="start"></ion-icon>
+              <ion-icon [name]="item.icon" slot="start" aria-hidden="true"></ion-icon>
             }
             <ion-label>{{ getItemHeader(item) }}</ion-label>
           </ion-item>
@@ -19860,7 +19906,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         <ion-accordion [value]="item.value" [disabled]="item.disabled">
           <ion-item slot="header" [color]="resolvedProps.color || 'light'">
             @if (item.icon) {
-              <ion-icon [name]="item.icon" slot="start"></ion-icon>
+              <ion-icon [name]="item.icon" slot="start" aria-hidden="true"></ion-icon>
             }
             <ion-label>{{ getItemHeader(item) }}</ion-label>
           </ion-item>
@@ -19929,9 +19975,7 @@ class TabsComponent {
      * Explicit props take precedence over preset values.
      */
     resolveProps() {
-        const presetProps = this.preset
-            ? this.presets.get('tabs', this.preset)
-            : {};
+        const presetProps = this.preset ? this.presets.get('tabs', this.preset) : {};
         this.resolvedProps = {
             ...presetProps,
             ...this.props,
@@ -19961,7 +20005,7 @@ class TabsComponent {
           (click)="onTabClick(tab)"
         >
           @if (tab.icon && resolvedProps.layout !== 'icon-hide') {
-            <ion-icon [name]="tab.icon"></ion-icon>
+            <ion-icon [name]="tab.icon" aria-hidden="true"></ion-icon>
           }
           @if (getTabLabel(tab) && resolvedProps.layout !== 'label-hide') {
             <ion-label>{{ getTabLabel(tab) }}</ion-label>
@@ -19991,7 +20035,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           (click)="onTabClick(tab)"
         >
           @if (tab.icon && resolvedProps.layout !== 'icon-hide') {
-            <ion-icon [name]="tab.icon"></ion-icon>
+            <ion-icon [name]="tab.icon" aria-hidden="true"></ion-icon>
           }
           @if (getTabLabel(tab) && resolvedProps.layout !== 'label-hide') {
             <ion-label>{{ getTabLabel(tab) }}</ion-label>
@@ -20085,11 +20129,11 @@ class BreadcrumbComponent {
           (click)="onBreadcrumbClick($event, item, $index)"
         >
           @if (item.icon) {
-            <ion-icon [name]="item.icon" slot="start"></ion-icon>
+            <ion-icon [name]="item.icon" slot="start" aria-hidden="true"></ion-icon>
           }
           {{ getItemLabel(item) }}
           @if (!isLast && resolvedProps.separatorIcon) {
-            <ion-icon [name]="resolvedProps.separatorIcon" slot="separator"></ion-icon>
+            <ion-icon [name]="resolvedProps.separatorIcon" slot="separator" aria-hidden="true"></ion-icon>
           }
         </ion-breadcrumb>
       }
@@ -20114,11 +20158,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           (click)="onBreadcrumbClick($event, item, $index)"
         >
           @if (item.icon) {
-            <ion-icon [name]="item.icon" slot="start"></ion-icon>
+            <ion-icon [name]="item.icon" slot="start" aria-hidden="true"></ion-icon>
           }
           {{ getItemLabel(item) }}
           @if (!isLast && resolvedProps.separatorIcon) {
-            <ion-icon [name]="resolvedProps.separatorIcon" slot="separator"></ion-icon>
+            <ion-icon [name]="resolvedProps.separatorIcon" slot="separator" aria-hidden="true"></ion-icon>
           }
         </ion-breadcrumb>
       }
@@ -20489,9 +20533,7 @@ class StepperComponent {
         }
     }
     resolveProps() {
-        const presetProps = this.preset
-            ? this.presets.get('stepper', this.preset)
-            : {};
+        const presetProps = this.preset ? this.presets.get('stepper', this.preset) : {};
         this.resolvedProps = {
             ...presetProps,
             ...this.props,
@@ -20502,7 +20544,7 @@ class StepperComponent {
             return this.resolvedProps.currentIndex;
         }
         if (this.resolvedProps.currentStep) {
-            return this.resolvedProps.steps?.findIndex((s) => s.value === this.resolvedProps.currentStep) ?? 0;
+            return this.resolvedProps.steps?.findIndex(s => s.value === this.resolvedProps.currentStep) ?? 0;
         }
         return 0;
     }
@@ -20577,15 +20619,15 @@ class StepperComponent {
           <div class="step-indicator">
             <div class="step-circle" [style.--step-color]="getStepColor(step, i)">
               @if (getStepStatus(step, i) === 'completed') {
-                <ion-icon name="checkmark"></ion-icon>
+                <ion-icon name="checkmark" aria-hidden="true"></ion-icon>
               } @else if (getStepStatus(step, i) === 'error') {
-                <ion-icon name="close"></ion-icon>
+                <ion-icon name="close" aria-hidden="true"></ion-icon>
               } @else if (step.icon) {
-                <ion-icon [name]="step.icon"></ion-icon>
+                <ion-icon [name]="step.icon" aria-hidden="true"></ion-icon>
               } @else if (resolvedProps.showNumbers !== false) {
                 <span class="step-number">{{ i + 1 }}</span>
               } @else {
-                <ion-icon name="ellipse"></ion-icon>
+                <ion-icon name="ellipse" aria-hidden="true"></ion-icon>
               }
             </div>
             @if (!isLast && resolvedProps.connectorStyle !== 'none') {
@@ -20637,15 +20679,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           <div class="step-indicator">
             <div class="step-circle" [style.--step-color]="getStepColor(step, i)">
               @if (getStepStatus(step, i) === 'completed') {
-                <ion-icon name="checkmark"></ion-icon>
+                <ion-icon name="checkmark" aria-hidden="true"></ion-icon>
               } @else if (getStepStatus(step, i) === 'error') {
-                <ion-icon name="close"></ion-icon>
+                <ion-icon name="close" aria-hidden="true"></ion-icon>
               } @else if (step.icon) {
-                <ion-icon [name]="step.icon"></ion-icon>
+                <ion-icon [name]="step.icon" aria-hidden="true"></ion-icon>
               } @else if (resolvedProps.showNumbers !== false) {
                 <span class="step-number">{{ i + 1 }}</span>
               } @else {
-                <ion-icon name="ellipse"></ion-icon>
+                <ion-icon name="ellipse" aria-hidden="true"></ion-icon>
               }
             </div>
             @if (!isLast && resolvedProps.connectorStyle !== 'none') {
@@ -20746,9 +20788,7 @@ class ChipGroupComponent {
         }
     }
     resolveProps() {
-        const presetProps = this.preset
-            ? this.presets.get('chipGroup', this.preset)
-            : {};
+        const presetProps = this.preset ? this.presets.get('chipGroup', this.preset) : {};
         this.resolvedProps = {
             ...presetProps,
             ...this.props,
@@ -20774,7 +20814,7 @@ class ChipGroupComponent {
         }
         else {
             // Single selection: deselect all others
-            this.resolvedProps.chips.forEach((c) => {
+            this.resolvedProps.chips.forEach(c => {
                 c.selected = c.value === chip.value ? !c.selected : false;
             });
         }
@@ -20792,8 +20832,8 @@ class ChipGroupComponent {
         }
     }
     emitSelectionChange() {
-        const selected = this.resolvedProps.chips.filter((c) => c.selected);
-        const values = selected.map((c) => c.value);
+        const selected = this.resolvedProps.chips.filter(c => c.selected);
+        const values = selected.map(c => c.value);
         this.selectionChange.emit({
             selected: this.resolvedProps.multiple ? selected : selected[0],
             values: this.resolvedProps.multiple ? values : values[0],
@@ -20815,14 +20855,19 @@ class ChipGroupComponent {
           (keydown.space)="onChipKey($event, chip)"
         >
           @if (chip.icon) {
-            <ion-icon [name]="chip.icon"></ion-icon>
+            <ion-icon [name]="chip.icon" aria-hidden="true"></ion-icon>
           }
           @if (chip.selected && resolvedProps.selectable) {
-            <ion-icon name="checkmark" class="selected-icon"></ion-icon>
+            <ion-icon name="checkmark" class="selected-icon" aria-hidden="true"></ion-icon>
           }
           <ion-label>{{ getChipLabel(chip) }}</ion-label>
           @if (resolvedProps.removable && !chip.disabled) {
-            <button type="button" class="remove-button" [attr.aria-label]="removeLabel(chip)" (click)="onRemoveChip($event, chip)">
+            <button
+              type="button"
+              class="remove-button"
+              [attr.aria-label]="removeLabel(chip)"
+              (click)="onRemoveChip($event, chip)"
+            >
               <ion-icon name="close" class="remove-icon" aria-hidden="true"></ion-icon>
             </button>
           }
@@ -20848,14 +20893,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           (keydown.space)="onChipKey($event, chip)"
         >
           @if (chip.icon) {
-            <ion-icon [name]="chip.icon"></ion-icon>
+            <ion-icon [name]="chip.icon" aria-hidden="true"></ion-icon>
           }
           @if (chip.selected && resolvedProps.selectable) {
-            <ion-icon name="checkmark" class="selected-icon"></ion-icon>
+            <ion-icon name="checkmark" class="selected-icon" aria-hidden="true"></ion-icon>
           }
           <ion-label>{{ getChipLabel(chip) }}</ion-label>
           @if (resolvedProps.removable && !chip.disabled) {
-            <button type="button" class="remove-button" [attr.aria-label]="removeLabel(chip)" (click)="onRemoveChip($event, chip)">
+            <button
+              type="button"
+              class="remove-button"
+              [attr.aria-label]="removeLabel(chip)"
+              (click)="onRemoveChip($event, chip)"
+            >
               <ion-icon name="close" class="remove-icon" aria-hidden="true"></ion-icon>
             </button>
           }
@@ -21326,7 +21376,7 @@ class StatsCardComponent {
         <div class="stats-header">
           <span class="stats-title">{{ resolvedProps.title }}</span>
           @if (resolvedProps.icon) {
-            <ion-icon [name]="resolvedProps.icon" class="stats-icon"></ion-icon>
+            <ion-icon [name]="resolvedProps.icon" class="stats-icon" aria-hidden="true"></ion-icon>
           }
         </div>
 
@@ -21346,7 +21396,7 @@ class StatsCardComponent {
 
         @if (resolvedProps.trend && !resolvedProps.loading) {
           <div class="stats-trend" [class]="getTrendClass()">
-            <ion-icon [name]="getTrendIcon()"></ion-icon>
+            <ion-icon [name]="getTrendIcon()" aria-hidden="true"></ion-icon>
             <span class="trend-value">{{ Math.abs(resolvedProps.trend.value) }}%</span>
             @if (resolvedProps.trend.label) {
               <span class="trend-label">{{ resolvedProps.trend.label }}</span>
@@ -21390,7 +21440,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         <div class="stats-header">
           <span class="stats-title">{{ resolvedProps.title }}</span>
           @if (resolvedProps.icon) {
-            <ion-icon [name]="resolvedProps.icon" class="stats-icon"></ion-icon>
+            <ion-icon [name]="resolvedProps.icon" class="stats-icon" aria-hidden="true"></ion-icon>
           }
         </div>
 
@@ -21410,7 +21460,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
         @if (resolvedProps.trend && !resolvedProps.loading) {
           <div class="stats-trend" [class]="getTrendClass()">
-            <ion-icon [name]="getTrendIcon()"></ion-icon>
+            <ion-icon [name]="getTrendIcon()" aria-hidden="true"></ion-icon>
             <span class="trend-value">{{ Math.abs(resolvedProps.trend.value) }}%</span>
             @if (resolvedProps.trend.label) {
               <span class="trend-label">{{ resolvedProps.trend.label }}</span>
@@ -21540,7 +21590,7 @@ class CommentComponent {
     getInitials(name) {
         return name
             .split(' ')
-            .map((n) => n[0])
+            .map(n => n[0])
             .join('')
             .substring(0, 2)
             .toUpperCase();
@@ -21625,8 +21675,8 @@ class CommentComponent {
         return item.label || item.contentFallback || '';
     }
     hasChildren() {
-        return !!(this.props.children && this.props.children.length > 0) ||
-            !!(this.props.replyCount && this.props.replyCount > 0);
+        return (!!(this.props.children && this.props.children.length > 0) ||
+            !!(this.props.replyCount && this.props.replyCount > 0));
     }
     canShowChildren() {
         const maxDepth = this.props.maxDepth ?? 3;
@@ -21699,7 +21749,7 @@ class CommentComponent {
     >
       @if (props.pinned) {
         <div class="pinned-indicator">
-          <ion-icon name="pin"></ion-icon>
+          <ion-icon name="pin" aria-hidden="true"></ion-icon>
           <span>{{ i18n.t('pinned') }}</span>
         </div>
       }
@@ -21720,7 +21770,7 @@ class CommentComponent {
             <button type="button" class="author-info" [attr.aria-label]="authorLabel()" (click)="onAuthorClick()">
               <span class="author-name">{{ props.author.name }}</span>
               @if (props.author.verified) {
-                <ion-icon name="checkmark-circle" class="verified-badge"></ion-icon>
+                <ion-icon name="checkmark-circle" class="verified-badge" aria-hidden="true"></ion-icon>
               }
               @if (props.author.username) {
                 <span class="author-username">&#64;{{ props.author.username }}</span>
@@ -21740,14 +21790,12 @@ class CommentComponent {
                 size="small"
                 class="more-button"
                 [id]="'menu-trigger-' + props.token"
+                [attr.aria-label]="'Más opciones'"
               >
-                <ion-icon name="ellipsis-horizontal" slot="icon-only"></ion-icon>
+                <ion-icon name="ellipsis-horizontal" slot="icon-only" aria-hidden="true"></ion-icon>
               </ion-button>
 
-              <ion-popover
-                [trigger]="'menu-trigger-' + props.token"
-                [dismissOnSelect]="true"
-              >
+              <ion-popover [trigger]="'menu-trigger-' + props.token" [dismissOnSelect]="true">
                 <ng-template>
                   <ion-list>
                     @for (item of props.menuItems; track item.token) {
@@ -21761,11 +21809,7 @@ class CommentComponent {
                         (click)="onMenuItemClick(item)"
                       >
                         @if (item.icon) {
-                          <ion-icon
-                            [name]="item.icon"
-                            slot="start"
-                            [color]="item.color"
-                          ></ion-icon>
+                          <ion-icon [name]="item.icon" slot="start" [color]="item.color" aria-hidden="true"></ion-icon>
                         }
                         <ion-label [color]="item.color">
                           {{ getMenuItemLabel(item) }}
@@ -21779,10 +21823,7 @@ class CommentComponent {
           </div>
 
           @if (!props.collapsed) {
-            <div
-              class="comment-content"
-              [innerHTML]="processContent(displayContent)"
-            ></div>
+            <div class="comment-content" [innerHTML]="processContent(displayContent)"></div>
 
             @if (props.reactions && props.reactions.length > 0) {
               <div class="comment-reactions">
@@ -21793,7 +21834,7 @@ class CommentComponent {
                     [style.--reaction-color]="getReactionColor(reaction)"
                     (click)="onReactionClick(reaction)"
                   >
-                    <ion-icon [name]="reaction.icon"></ion-icon>
+                    <ion-icon [name]="reaction.icon" aria-hidden="true"></ion-icon>
                     @if (reaction.count > 0) {
                       <span class="reaction-count">{{ formatCount(reaction.count) }}</span>
                     }
@@ -21813,7 +21854,7 @@ class CommentComponent {
                     (click)="onActionClick(action)"
                   >
                     @if (action.icon) {
-                      <ion-icon [name]="action.icon" slot="start"></ion-icon>
+                      <ion-icon [name]="action.icon" slot="start" aria-hidden="true"></ion-icon>
                     }
                     {{ getActionLabel(action) }}
                   </ion-button>
@@ -21822,7 +21863,7 @@ class CommentComponent {
             }
           } @else {
             <button class="expand-button" (click)="onToggleCollapse()">
-              <ion-icon name="chevron-down"></ion-icon>
+              <ion-icon name="chevron-down" aria-hidden="true"></ion-icon>
               <span>{{ i18n.t('showComment') }}</span>
             </button>
           }
@@ -21833,7 +21874,7 @@ class CommentComponent {
         <div class="comment-children">
           @if (props.collapsed) {
             <button class="collapse-button" (click)="onToggleCollapse()">
-              <ion-icon name="chevron-up"></ion-icon>
+              <ion-icon name="chevron-up" aria-hidden="true"></ion-icon>
               <span>{{ i18n.t('hideReplies') }}</span>
             </button>
           }
@@ -21853,7 +21894,7 @@ class CommentComponent {
 
             @if (hasMoreReplies()) {
               <button class="load-more-button" (click)="onLoadMoreClick()">
-                <ion-icon name="chatbubble-outline"></ion-icon>
+                <ion-icon name="chatbubble-outline" aria-hidden="true"></ion-icon>
                 <span>{{ getLoadMoreRepliesText() }}</span>
               </button>
             }
@@ -21870,16 +21911,7 @@ class CommentComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CommentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-comment', standalone: true, imports: [
-                        CommonModule,
-                        IonIcon,
-                        IonButton,
-                        IonPopover,
-                        IonList,
-                        IonItem,
-                        IonLabel,
-                        AvatarComponent,
-                    ], template: `
+            args: [{ selector: 'val-comment', standalone: true, imports: [CommonModule, IonIcon, IonButton, IonPopover, IonList, IonItem, IonLabel, AvatarComponent], template: `
     <div
       class="comment"
       [class.highlighted]="props.highlighted"
@@ -21889,7 +21921,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
     >
       @if (props.pinned) {
         <div class="pinned-indicator">
-          <ion-icon name="pin"></ion-icon>
+          <ion-icon name="pin" aria-hidden="true"></ion-icon>
           <span>{{ i18n.t('pinned') }}</span>
         </div>
       }
@@ -21910,7 +21942,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             <button type="button" class="author-info" [attr.aria-label]="authorLabel()" (click)="onAuthorClick()">
               <span class="author-name">{{ props.author.name }}</span>
               @if (props.author.verified) {
-                <ion-icon name="checkmark-circle" class="verified-badge"></ion-icon>
+                <ion-icon name="checkmark-circle" class="verified-badge" aria-hidden="true"></ion-icon>
               }
               @if (props.author.username) {
                 <span class="author-username">&#64;{{ props.author.username }}</span>
@@ -21930,14 +21962,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 size="small"
                 class="more-button"
                 [id]="'menu-trigger-' + props.token"
+                [attr.aria-label]="'Más opciones'"
               >
-                <ion-icon name="ellipsis-horizontal" slot="icon-only"></ion-icon>
+                <ion-icon name="ellipsis-horizontal" slot="icon-only" aria-hidden="true"></ion-icon>
               </ion-button>
 
-              <ion-popover
-                [trigger]="'menu-trigger-' + props.token"
-                [dismissOnSelect]="true"
-              >
+              <ion-popover [trigger]="'menu-trigger-' + props.token" [dismissOnSelect]="true">
                 <ng-template>
                   <ion-list>
                     @for (item of props.menuItems; track item.token) {
@@ -21951,11 +21981,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         (click)="onMenuItemClick(item)"
                       >
                         @if (item.icon) {
-                          <ion-icon
-                            [name]="item.icon"
-                            slot="start"
-                            [color]="item.color"
-                          ></ion-icon>
+                          <ion-icon [name]="item.icon" slot="start" [color]="item.color" aria-hidden="true"></ion-icon>
                         }
                         <ion-label [color]="item.color">
                           {{ getMenuItemLabel(item) }}
@@ -21969,10 +21995,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           </div>
 
           @if (!props.collapsed) {
-            <div
-              class="comment-content"
-              [innerHTML]="processContent(displayContent)"
-            ></div>
+            <div class="comment-content" [innerHTML]="processContent(displayContent)"></div>
 
             @if (props.reactions && props.reactions.length > 0) {
               <div class="comment-reactions">
@@ -21983,7 +22006,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     [style.--reaction-color]="getReactionColor(reaction)"
                     (click)="onReactionClick(reaction)"
                   >
-                    <ion-icon [name]="reaction.icon"></ion-icon>
+                    <ion-icon [name]="reaction.icon" aria-hidden="true"></ion-icon>
                     @if (reaction.count > 0) {
                       <span class="reaction-count">{{ formatCount(reaction.count) }}</span>
                     }
@@ -22003,7 +22026,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     (click)="onActionClick(action)"
                   >
                     @if (action.icon) {
-                      <ion-icon [name]="action.icon" slot="start"></ion-icon>
+                      <ion-icon [name]="action.icon" slot="start" aria-hidden="true"></ion-icon>
                     }
                     {{ getActionLabel(action) }}
                   </ion-button>
@@ -22012,7 +22035,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }
           } @else {
             <button class="expand-button" (click)="onToggleCollapse()">
-              <ion-icon name="chevron-down"></ion-icon>
+              <ion-icon name="chevron-down" aria-hidden="true"></ion-icon>
               <span>{{ i18n.t('showComment') }}</span>
             </button>
           }
@@ -22023,7 +22046,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         <div class="comment-children">
           @if (props.collapsed) {
             <button class="collapse-button" (click)="onToggleCollapse()">
-              <ion-icon name="chevron-up"></ion-icon>
+              <ion-icon name="chevron-up" aria-hidden="true"></ion-icon>
               <span>{{ i18n.t('hideReplies') }}</span>
             </button>
           }
@@ -22043,7 +22066,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
             @if (hasMoreReplies()) {
               <button class="load-more-button" (click)="onLoadMoreClick()">
-                <ion-icon name="chatbubble-outline"></ion-icon>
+                <ion-icon name="chatbubble-outline" aria-hidden="true"></ion-icon>
                 <span>{{ getLoadMoreRepliesText() }}</span>
               </button>
             }
@@ -23882,7 +23905,7 @@ class DateRangeInputComponent {
 
         <!-- Separator -->
         <div class="date-separator">
-          <ion-icon name="arrow-forward-outline"></ion-icon>
+          <ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>
         </div>
 
         <!-- End Date -->
@@ -23916,9 +23939,7 @@ class DateRangeInputComponent {
       </div>
 
       @if (showDayCount && dayCount !== null) {
-        <div class="day-count">
-          {{ dayCount }} {{ getDayLabel() }}
-        </div>
+        <div class="day-count">{{ dayCount }} {{ getDayLabel() }}</div>
       }
 
       @if (props.hint && !hasError) {
@@ -23980,7 +24001,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
         <!-- Separator -->
         <div class="date-separator">
-          <ion-icon name="arrow-forward-outline"></ion-icon>
+          <ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>
         </div>
 
         <!-- End Date -->
@@ -24014,9 +24035,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       </div>
 
       @if (showDayCount && dayCount !== null) {
-        <div class="day-count">
-          {{ dayCount }} {{ getDayLabel() }}
-        </div>
+        <div class="day-count">{{ dayCount }} {{ getDayLabel() }}</div>
       }
 
       @if (props.hint && !hasError) {
@@ -24703,6 +24722,7 @@ class ShareButtonsComponent {
           <ion-icon
             [slot]="props.showLabels === false || props.variant === 'icon-only' ? 'icon-only' : 'start'"
             [name]="getButtonIcon(button)"
+            aria-hidden="true"
           ></ion-icon>
           @if (props.showLabels !== false && props.variant !== 'icon-only') {
             {{ getButtonLabel(button) }}
@@ -24744,6 +24764,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           <ion-icon
             [slot]="props.showLabels === false || props.variant === 'icon-only' ? 'icon-only' : 'start'"
             [name]="getButtonIcon(button)"
+            aria-hidden="true"
           ></ion-icon>
           @if (props.showLabels !== false && props.variant !== 'icon-only') {
             {{ getButtonLabel(button) }}
@@ -24794,9 +24815,7 @@ class GlowCardComponent {
         }
     }
     resolveProps() {
-        const presetProps = this.preset
-            ? this.presets.get('glowCard', this.preset)
-            : {};
+        const presetProps = this.preset ? this.presets.get('glowCard', this.preset) : {};
         this.resolvedProps = {
             ...presetProps,
             ...this.props,
@@ -24810,7 +24829,17 @@ class GlowCardComponent {
         this.i18n = inject(I18nService);
         this.navigationService = inject(NavigationService);
         this.themeService = inject(ThemeService);
-        this.ionicColors = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
+        this.ionicColors = [
+            'primary',
+            'secondary',
+            'tertiary',
+            'success',
+            'warning',
+            'danger',
+            'light',
+            'medium',
+            'dark',
+        ];
         // RGB values with SPACE separator for CSS rgb(var() / alpha) syntax
         this.colorRgbMap = {
             primary: '112 38 223',
@@ -24976,15 +25005,12 @@ class GlowCardComponent {
         </p>
 
         <!-- CTA Link with expanding animation -->
-        <a
-          class="glow-card__cta"
-          [href]="resolvedProps.cta?.url"
-          (click)="onCtaClick($event)"
-        >
+        <a class="glow-card__cta" [href]="resolvedProps.cta?.url" (click)="onCtaClick($event)">
           <span class="glow-card__cta-text">{{ getCtaText() }}</span>
           <ion-icon
             class="glow-card__cta-icon"
             [name]="resolvedProps.cta?.icon || 'arrow-forward-outline'"
+            aria-hidden="true"
           ></ion-icon>
         </a>
       </div>
@@ -25040,15 +25066,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </p>
 
         <!-- CTA Link with expanding animation -->
-        <a
-          class="glow-card__cta"
-          [href]="resolvedProps.cta?.url"
-          (click)="onCtaClick($event)"
-        >
+        <a class="glow-card__cta" [href]="resolvedProps.cta?.url" (click)="onCtaClick($event)">
           <span class="glow-card__cta-text">{{ getCtaText() }}</span>
           <ion-icon
             class="glow-card__cta-icon"
             [name]="resolvedProps.cta?.icon || 'arrow-forward-outline'"
+            aria-hidden="true"
           ></ion-icon>
         </a>
       </div>
@@ -25574,7 +25597,7 @@ class FeaturesListComponent {
                   <path [attr.d]="feature.svgPath" />
                 </svg>
               } @else if (feature.icon) {
-                <ion-icon [name]="feature.icon" [style.font-size.px]="config().iconSize"></ion-icon>
+                <ion-icon [name]="feature.icon" [style.font-size.px]="config().iconSize" aria-hidden="true"></ion-icon>
               }
             </div>
             <div class="feature__content">
@@ -25611,7 +25634,7 @@ class FeaturesListComponent {
                   <path [attr.d]="feature.svgPath" />
                 </svg>
               } @else if (feature.icon) {
-                <ion-icon [name]="feature.icon" [style.font-size.px]="config().iconSize"></ion-icon>
+                <ion-icon [name]="feature.icon" [style.font-size.px]="config().iconSize" aria-hidden="true"></ion-icon>
               }
             </div>
             <div class="feature__content">
@@ -25683,7 +25706,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                   <path [attr.d]="feature.svgPath" />
                 </svg>
               } @else if (feature.icon) {
-                <ion-icon [name]="feature.icon" [style.font-size.px]="config().iconSize"></ion-icon>
+                <ion-icon [name]="feature.icon" [style.font-size.px]="config().iconSize" aria-hidden="true"></ion-icon>
               }
             </div>
             <div class="feature__content">
@@ -25720,7 +25743,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                   <path [attr.d]="feature.svgPath" />
                 </svg>
               } @else if (feature.icon) {
-                <ion-icon [name]="feature.icon" [style.font-size.px]="config().iconSize"></ion-icon>
+                <ion-icon [name]="feature.icon" [style.font-size.px]="config().iconSize" aria-hidden="true"></ion-icon>
               }
             </div>
             <div class="feature__content">
@@ -27592,7 +27615,7 @@ class ActionCardComponent {
       <!-- Icon Container -->
       <div class="action-card__icon" [style.color]="getIconColor()" [style.background-color]="getIconBackgroundColor()">
         @if (config().icon?.ionicon) {
-          <ion-icon [name]="config().icon!.ionicon!"></ion-icon>
+          <ion-icon [name]="config().icon!.ionicon!" aria-hidden="true"></ion-icon>
         } @else if (config().icon?.svgPath) {
           <svg
             viewBox="0 0 24 24"
@@ -27619,7 +27642,7 @@ class ActionCardComponent {
 
       <!-- Chevron (optional) -->
       @if (config().showChevron && !config().disabled) {
-        <ion-icon name="chevron-forward-outline" class="action-card__chevron"></ion-icon>
+        <ion-icon name="chevron-forward-outline" class="action-card__chevron" aria-hidden="true"></ion-icon>
       }
     </article>
   `, isInline: true, styles: [":host{display:flex;flex-direction:column}.action-card{position:relative;display:flex;align-items:center;flex:1;gap:1rem;padding:1rem;background:var(--card-bg, var(--ion-card-background, var(--ion-background-color)));border-radius:12px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease;text-decoration:none;overflow:hidden;--ripple-color: var(--ion-color-primary)}.action-card--small{padding:.75rem;gap:.75rem}.action-card--small .action-card__icon{width:36px;height:36px;font-size:1.125rem;border-radius:8px}.action-card--small .action-card__icon svg{width:18px;height:18px}.action-card--small .action-card__title{font-size:.9rem}.action-card--small .action-card__description{font-size:.8rem}.action-card--medium{padding:1rem;gap:1rem}.action-card--medium .action-card__icon{width:48px;height:48px;font-size:1.5rem;border-radius:10px}.action-card--medium .action-card__icon svg{width:24px;height:24px}.action-card--medium .action-card__title{font-size:1rem}.action-card--medium .action-card__description{font-size:.875rem}.action-card--large{padding:1.25rem;gap:1.25rem}.action-card--large .action-card__icon{width:56px;height:56px;font-size:1.75rem;border-radius:12px}.action-card--large .action-card__icon svg{width:28px;height:28px}.action-card--large .action-card__title{font-size:1.1rem}.action-card--large .action-card__description{font-size:.9rem}.action-card--bordered{border:1px solid var(--card-border-color, var(--ion-color-light-shade))}.action-card--shadowed{box-shadow:0 2px 8px #00000014}.action-card--clickable:hover{transform:translateY(-2px);box-shadow:0 4px 16px #0000001f}.action-card--clickable:focus-visible{outline:2px solid var(--ion-color-primary);outline-offset:2px}.action-card--clickable:active{transform:translateY(0)}.action-card--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.action-card__badge{position:absolute;top:8px;right:8px;padding:2px 8px;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;border-radius:10px;z-index:1}.action-card__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.action-card__icon ion-icon{font-size:inherit}.action-card__icon svg{display:block}.action-card__icon-image{width:100%;height:100%;object-fit:cover;border-radius:8px}.action-card__content{flex:1;min-width:0}.action-card__title{margin:0 0 .25rem;font-weight:600;color:var(--ion-text-color);line-height:1.3}.action-card__description{margin:0;color:var(--ion-color-medium);line-height:1.4}.action-card__chevron{flex-shrink:0;font-size:1.25rem;color:var(--ion-color-medium);transition:transform .2s ease}.action-card--clickable:hover .action-card__chevron{transform:translate(4px)}:host-context(.dark) .action-card--shadowed,:host-context(.ion-palette-dark) .action-card--shadowed,:host-context(html.ion-palette-dark) .action-card--shadowed,:host-context(body.dark) .action-card--shadowed,:host-context([data-theme=dark]) .action-card--shadowed{box-shadow:0 2px 8px #0000004d}:host-context(.dark) .action-card--clickable:hover,:host-context(.ion-palette-dark) .action-card--clickable:hover,:host-context(html.ion-palette-dark) .action-card--clickable:hover,:host-context(body.dark) .action-card--clickable:hover,:host-context([data-theme=dark]) .action-card--clickable:hover{box-shadow:0 4px 16px #0006}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }] }); }
@@ -27660,7 +27683,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       <!-- Icon Container -->
       <div class="action-card__icon" [style.color]="getIconColor()" [style.background-color]="getIconBackgroundColor()">
         @if (config().icon?.ionicon) {
-          <ion-icon [name]="config().icon!.ionicon!"></ion-icon>
+          <ion-icon [name]="config().icon!.ionicon!" aria-hidden="true"></ion-icon>
         } @else if (config().icon?.svgPath) {
           <svg
             viewBox="0 0 24 24"
@@ -27687,7 +27710,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
       <!-- Chevron (optional) -->
       @if (config().showChevron && !config().disabled) {
-        <ion-icon name="chevron-forward-outline" class="action-card__chevron"></ion-icon>
+        <ion-icon name="chevron-forward-outline" class="action-card__chevron" aria-hidden="true"></ion-icon>
       }
     </article>
   `, styles: [":host{display:flex;flex-direction:column}.action-card{position:relative;display:flex;align-items:center;flex:1;gap:1rem;padding:1rem;background:var(--card-bg, var(--ion-card-background, var(--ion-background-color)));border-radius:12px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease;text-decoration:none;overflow:hidden;--ripple-color: var(--ion-color-primary)}.action-card--small{padding:.75rem;gap:.75rem}.action-card--small .action-card__icon{width:36px;height:36px;font-size:1.125rem;border-radius:8px}.action-card--small .action-card__icon svg{width:18px;height:18px}.action-card--small .action-card__title{font-size:.9rem}.action-card--small .action-card__description{font-size:.8rem}.action-card--medium{padding:1rem;gap:1rem}.action-card--medium .action-card__icon{width:48px;height:48px;font-size:1.5rem;border-radius:10px}.action-card--medium .action-card__icon svg{width:24px;height:24px}.action-card--medium .action-card__title{font-size:1rem}.action-card--medium .action-card__description{font-size:.875rem}.action-card--large{padding:1.25rem;gap:1.25rem}.action-card--large .action-card__icon{width:56px;height:56px;font-size:1.75rem;border-radius:12px}.action-card--large .action-card__icon svg{width:28px;height:28px}.action-card--large .action-card__title{font-size:1.1rem}.action-card--large .action-card__description{font-size:.9rem}.action-card--bordered{border:1px solid var(--card-border-color, var(--ion-color-light-shade))}.action-card--shadowed{box-shadow:0 2px 8px #00000014}.action-card--clickable:hover{transform:translateY(-2px);box-shadow:0 4px 16px #0000001f}.action-card--clickable:focus-visible{outline:2px solid var(--ion-color-primary);outline-offset:2px}.action-card--clickable:active{transform:translateY(0)}.action-card--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.action-card__badge{position:absolute;top:8px;right:8px;padding:2px 8px;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;border-radius:10px;z-index:1}.action-card__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.action-card__icon ion-icon{font-size:inherit}.action-card__icon svg{display:block}.action-card__icon-image{width:100%;height:100%;object-fit:cover;border-radius:8px}.action-card__content{flex:1;min-width:0}.action-card__title{margin:0 0 .25rem;font-weight:600;color:var(--ion-text-color);line-height:1.3}.action-card__description{margin:0;color:var(--ion-color-medium);line-height:1.4}.action-card__chevron{flex-shrink:0;font-size:1.25rem;color:var(--ion-color-medium);transition:transform .2s ease}.action-card--clickable:hover .action-card__chevron{transform:translate(4px)}:host-context(.dark) .action-card--shadowed,:host-context(.ion-palette-dark) .action-card--shadowed,:host-context(html.ion-palette-dark) .action-card--shadowed,:host-context(body.dark) .action-card--shadowed,:host-context([data-theme=dark]) .action-card--shadowed{box-shadow:0 2px 8px #0000004d}:host-context(.dark) .action-card--clickable:hover,:host-context(.ion-palette-dark) .action-card--clickable:hover,:host-context(html.ion-palette-dark) .action-card--clickable:hover,:host-context(body.dark) .action-card--clickable:hover,:host-context([data-theme=dark]) .action-card--clickable:hover{box-shadow:0 4px 16px #0006}\n"] }]
@@ -27774,7 +27797,7 @@ class MediaObjectComponent {
         @if (config().image) {
           <img [src]="config().image" [alt]="config().imageAlt || config().title" />
         } @else if (config().icon) {
-          <ion-icon [name]="config().icon!"></ion-icon>
+          <ion-icon [name]="config().icon!" aria-hidden="true"></ion-icon>
         }
       </div>
 
@@ -27815,7 +27838,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         @if (config().image) {
           <img [src]="config().image" [alt]="config().imageAlt || config().title" />
         } @else if (config().icon) {
-          <ion-icon [name]="config().icon!"></ion-icon>
+          <ion-icon [name]="config().icon!" aria-hidden="true"></ion-icon>
         }
       </div>
 
@@ -33766,6 +33789,7 @@ class CookieBannerComponent {
         role="dialog"
         aria-modal="false"
         aria-live="polite"
+        [attr.aria-label]="props.ariaLabel || 'Aviso de cookies'"
       >
         <div class="val-cookie-banner__inner" [style.max-width]="props.maxWidth || '1200px'">
           @if (props.dismissible) {
@@ -33842,6 +33866,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         role="dialog"
         aria-modal="false"
         aria-live="polite"
+        [attr.aria-label]="props.ariaLabel || 'Aviso de cookies'"
       >
         <div class="val-cookie-banner__inner" [style.max-width]="props.maxWidth || '1200px'">
           @if (props.dismissible) {
@@ -36899,9 +36924,9 @@ class DataTableComponent {
       <!-- Loading overlay -->
       @if (props.loadingState?.loading) {
         <div class="loading-overlay">
-          <ion-spinner name="circular"></ion-spinner>
+          <ion-spinner name="circular" [attr.aria-label]="props.loadingState?.message || 'Cargando'"></ion-spinner>
           @if (props.loadingState?.message) {
-            <span class="loading-message">{{ props.loadingState.message }}</span>
+            <span class="loading-message" aria-hidden="true">{{ props.loadingState.message }}</span>
           }
         </div>
       }
@@ -36920,11 +36945,12 @@ class DataTableComponent {
             <tr>
               <!-- Selection column -->
               @if (props.showSelectionColumn && props.selection?.mode === 'multiple') {
-                <th class="selection-cell">
+                <th class="selection-cell" scope="col" aria-label="Selección">
                   <ion-checkbox
                     [checked]="isAllSelected"
                     [indeterminate]="isIndeterminate"
                     (ionChange)="toggleSelectAll($event)"
+                    aria-label="Seleccionar todo"
                   ></ion-checkbox>
                 </th>
               }
@@ -37016,6 +37042,7 @@ class DataTableComponent {
                           [checked]="isRowSelected(row)"
                           (ionChange)="toggleRowSelection(row, $event)"
                           (click)="$event.stopPropagation()"
+                          aria-label="Seleccionar fila"
                         ></ion-checkbox>
                       } @else if (props.selection?.mode === 'single') {
                         <input
@@ -37254,9 +37281,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       <!-- Loading overlay -->
       @if (props.loadingState?.loading) {
         <div class="loading-overlay">
-          <ion-spinner name="circular"></ion-spinner>
+          <ion-spinner name="circular" [attr.aria-label]="props.loadingState?.message || 'Cargando'"></ion-spinner>
           @if (props.loadingState?.message) {
-            <span class="loading-message">{{ props.loadingState.message }}</span>
+            <span class="loading-message" aria-hidden="true">{{ props.loadingState.message }}</span>
           }
         </div>
       }
@@ -37275,11 +37302,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             <tr>
               <!-- Selection column -->
               @if (props.showSelectionColumn && props.selection?.mode === 'multiple') {
-                <th class="selection-cell">
+                <th class="selection-cell" scope="col" aria-label="Selección">
                   <ion-checkbox
                     [checked]="isAllSelected"
                     [indeterminate]="isIndeterminate"
                     (ionChange)="toggleSelectAll($event)"
+                    aria-label="Seleccionar todo"
                   ></ion-checkbox>
                 </th>
               }
@@ -37371,6 +37399,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                           [checked]="isRowSelected(row)"
                           (ionChange)="toggleRowSelection(row, $event)"
                           (click)="$event.stopPropagation()"
+                          aria-label="Seleccionar fila"
                         ></ion-checkbox>
                       } @else if (props.selection?.mode === 'single') {
                         <input
@@ -40352,7 +40381,7 @@ class LoginComponent {
         this.stopResetResendCooldown();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoginComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LoginComponent, isStandalone: true, selector: "val-login", inputs: { props: "props" }, outputs: { onSuccess: "onSuccess", onError: "onError", onMFARequired: "onMFARequired" }, ngImport: i0, template: "<div class=\"val-login\" [class.val-login--card]=\"config.showCard\">\n  <!-- Logo -->\n  @if (props.logo) {\n  <div class=\"logo-container\">\n    <val-image [props]=\"props.logo\" />\n  </div>\n  }\n\n  <!-- Login Form -->\n  <val-form [props]=\"loginFormProps()\" (onSubmit)=\"loginHandler($event)\" />\n\n  <!-- OAuth Section -->\n  @if (config.showOAuth && config.oauthProviders.length > 0) {\n  <div class=\"oauth-separator\">\n    <span>{{ t('orContinueWith') }}</span>\n  </div>\n\n  <div class=\"oauth-buttons\">\n    @for (provider of config.oauthProviders; track provider) {\n    <ion-button\n      expand=\"block\"\n      fill=\"outline\"\n      color=\"dark\"\n      (click)=\"loginWithOAuth(provider)\"\n      [disabled]=\"isOAuthLoading\"\n    >\n      @switch (provider) { @case ('google') {\n      <ion-icon slot=\"start\" name=\"logo-google\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithGoogle') }} } @case ('apple') {\n      <ion-icon slot=\"start\" name=\"logo-apple\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithApple') }} } @case ('microsoft') {\n      <ion-icon slot=\"start\" name=\"logo-microsoft\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithMicrosoft') }} } }\n    </ion-button>\n    }\n  </div>\n  }\n\n  <!-- Register Link -->\n  @if (config.showRegister) {\n  <div class=\"auth-link\">\n    <ion-text color=\"dark\">\n      {{ t('noAccount') }}\n      <a (click)=\"openRegisterModal()\">{{ t('register') }}</a>\n    </ion-text>\n  </div>\n  }\n\n  <!-- Forgot Password Link -->\n  @if (config.showForgotPassword) {\n  <div class=\"auth-link forgot-password\">\n    <ion-text color=\"dark\">\n      {{ t('forgotLink') }}\n      <a (click)=\"openForgotPasswordModal()\">{{ t('recoverPassword') }}</a>\n    </ion-text>\n  </div>\n  }\n\n  <!-- Legal Notice -->\n  @if (props.legal) {\n  <div class=\"legal-notice\">\n    <ion-text color=\"dark\">\n      <p>\n        {{ t('legalPrefix') }} @if (resolvedCompanyLink) {\n        <a [href]=\"resolvedCompanyLink\" target=\"_blank\" rel=\"noopener noreferrer\"\n          ><strong>{{ props.legal.companyName }}</strong></a\n        >\n        } @else {\n        <strong>{{ props.legal.companyName }}</strong>\n        } {{ t('legalSuffix') }} @if (props.legal.termsLink) {\n        <a [href]=\"props.legal.termsLink\">{{ t('termsAndConditions') }}</a>\n        } @else {\n        <span>{{ t('termsAndConditions') }}</span>\n        } {{ t('and') }} @if (props.legal.privacyLink) {\n        <a [href]=\"props.legal.privacyLink\">{{ t('privacyPolicy') }}</a>\n        } @else {\n        <span>{{ t('privacyPolicy') }}</span>\n        }.\n      </p>\n    </ion-text>\n  </div>\n  }\n</div>\n\n<!-- Register Modal -->\n<ion-modal [isOpen]=\"isRegisterModalOpen\" (didDismiss)=\"closeRegisterModal()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" (click)=\"closeRegisterModal()\">\n            <ion-icon name=\"close-outline\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\n        <val-form [props]=\"registerFormProps()\" (onSubmit)=\"registerHandler($event)\" />\n        <div class=\"auth-link\">\n          <ion-text color=\"dark\">\n            {{ t('hasAccount') }}\n            <a (click)=\"closeRegisterModal()\">{{ t('signIn') }}</a>\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- Verify Email Modal -->\n<ion-modal [isOpen]=\"isVerifyModalOpen\" [backdropDismiss]=\"false\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" (click)=\"closeVerifyModal()\">\n            <ion-icon name=\"close-outline\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\n        <val-form [props]=\"verifyFormProps()\" (onSubmit)=\"verifyHandler($event)\" />\n        <div class=\"resend-link\">\n          <ion-text color=\"dark\">\n            {{ t('noCodeReceived') }} @if (resendCooldown > 0) {\n            <span class=\"cooldown\">{{ t('resendIn', { seconds: resendCooldown.toString() }) }}</span>\n            } @else {\n            <a (click)=\"resendCode()\">{{ t('resend') }}</a>\n            }\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- Forgot Password Modal -->\n<ion-modal [isOpen]=\"isForgotPasswordModalOpen\" (didDismiss)=\"closeForgotPasswordModal()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" (click)=\"closeForgotPasswordModal()\">\n            <ion-icon name=\"close-outline\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\n        <val-form [props]=\"forgotPasswordFormProps()\" (onSubmit)=\"forgotPasswordHandler($event)\" />\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- Reset Password Modal -->\n<ion-modal [isOpen]=\"isResetPasswordModalOpen\" [backdropDismiss]=\"false\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" (click)=\"closeResetPasswordModal()\">\n            <ion-icon name=\"close-outline\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\n        <val-form [props]=\"resetPasswordFormProps()\" (onSubmit)=\"resetPasswordHandler($event)\" />\n        <div class=\"resend-link\">\n          <ion-text color=\"dark\">\n            {{ t('noCodeReceived') }} @if (resetResendCooldown > 0) {\n            <span class=\"cooldown\">{{ t('resendIn', { seconds: resetResendCooldown.toString() }) }}</span>\n            } @else {\n            <a (click)=\"resendResetCode()\">{{ t('resend') }}</a>\n            }\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- MFA Verify Modal -->\n<ion-modal [isOpen]=\"isMFAVerifyModalOpen\" [backdropDismiss]=\"false\" (didDismiss)=\"onMFAVerifyDismissed()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" (click)=\"closeMFAVerifyModal()\">\n            <ion-icon name=\"close-outline\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\n        <val-form [props]=\"mfaVerifyFormProps()\" (onSubmit)=\"verifyMFAHandler($event)\" />\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".val-login{width:100%}.val-login--card{padding:1rem .75rem;background:var(--ion-color-light);border-radius:16px;box-shadow:0 2px 8px #00000014}.logo-container{max-width:130px;margin-bottom:1.5rem}.auth-link{text-align:center;margin-top:1rem;font-size:.9rem}.auth-link a{color:var(--ion-color-primary);text-decoration:none;font-weight:500;cursor:pointer}.auth-link a:hover{text-decoration:underline}.oauth-separator{display:flex;align-items:center;margin:1.5rem 0}.oauth-separator:before,.oauth-separator:after{content:\"\";flex:1;height:1px;background:var(--ion-color-medium-tint)}.oauth-separator span{padding:0 1rem;color:var(--ion-color-dark);font-size:.85rem}.oauth-buttons{margin-bottom:1rem}.oauth-buttons ion-button{--border-radius: 8px;--border-width: 1px}.oauth-buttons ion-icon{font-size:1.2rem;margin-right:.5rem}.legal-notice{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--ion-color-medium-tint)}.legal-notice p{font-size:.75rem;line-height:1.5;text-align:center;margin:0}.legal-notice a{color:var(--ion-color-primary);text-decoration:none}.legal-notice a:hover{text-decoration:underline}.resend-link{text-align:center;margin-top:1rem;font-size:.9rem}.resend-link a{color:var(--ion-color-primary);cursor:pointer;font-weight:500}.resend-link a:hover{text-decoration:underline}.resend-link .cooldown{color:var(--ion-color-medium)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onInvalid", "onSelectChange"] }, { kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LoginComponent, isStandalone: true, selector: "val-login", inputs: { props: "props" }, outputs: { onSuccess: "onSuccess", onError: "onError", onMFARequired: "onMFARequired" }, ngImport: i0, template: "<div class=\"val-login\" [class.val-login--card]=\"config.showCard\">\n  <!-- Logo -->\n  @if (props.logo) {\n  <div class=\"logo-container\">\n    <val-image [props]=\"props.logo\" />\n  </div>\n  }\n\n  <!-- Login Form -->\n  <val-form [props]=\"loginFormProps()\" (onSubmit)=\"loginHandler($event)\" />\n\n  <!-- OAuth Section -->\n  @if (config.showOAuth && config.oauthProviders.length > 0) {\n  <div class=\"oauth-separator\">\n    <span>{{ t('orContinueWith') }}</span>\n  </div>\n\n  <div class=\"oauth-buttons\">\n    @for (provider of config.oauthProviders; track provider) {\n    <ion-button\n      expand=\"block\"\n      fill=\"outline\"\n      color=\"dark\"\n      (click)=\"loginWithOAuth(provider)\"\n      [disabled]=\"isOAuthLoading\"\n    >\n      @switch (provider) { @case ('google') {\n      <ion-icon slot=\"start\" name=\"logo-google\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithGoogle') }} } @case ('apple') {\n      <ion-icon slot=\"start\" name=\"logo-apple\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithApple') }} } @case ('microsoft') {\n      <ion-icon slot=\"start\" name=\"logo-microsoft\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithMicrosoft') }} } }\n    </ion-button>\n    }\n  </div>\n  }\n\n  <!-- Register Link -->\n  @if (config.showRegister) {\n  <div class=\"auth-link\">\n    <ion-text color=\"dark\">\n      {{ t('noAccount') }}\n      <a (click)=\"openRegisterModal()\">{{ t('register') }}</a>\n    </ion-text>\n  </div>\n  }\n\n  <!-- Forgot Password Link -->\n  @if (config.showForgotPassword) {\n  <div class=\"auth-link forgot-password\">\n    <ion-text color=\"dark\">\n      {{ t('forgotLink') }}\n      <a (click)=\"openForgotPasswordModal()\">{{ t('recoverPassword') }}</a>\n    </ion-text>\n  </div>\n  }\n\n  <!-- Legal Notice -->\n  @if (props.legal) {\n  <div class=\"legal-notice\">\n    <ion-text color=\"dark\">\n      <p>\n        {{ t('legalPrefix') }} @if (resolvedCompanyLink) {\n        <a [href]=\"resolvedCompanyLink\" target=\"_blank\" rel=\"noopener noreferrer\"\n          ><strong>{{ props.legal.companyName }}</strong></a\n        >\n        } @else {\n        <strong>{{ props.legal.companyName }}</strong>\n        } {{ t('legalSuffix') }} @if (props.legal.termsLink) {\n        <a [href]=\"props.legal.termsLink\">{{ t('termsAndConditions') }}</a>\n        } @else {\n        <span>{{ t('termsAndConditions') }}</span>\n        } {{ t('and') }} @if (props.legal.privacyLink) {\n        <a [href]=\"props.legal.privacyLink\">{{ t('privacyPolicy') }}</a>\n        } @else {\n        <span>{{ t('privacyPolicy') }}</span>\n        }.\n      </p>\n    </ion-text>\n  </div>\n  }\n</div>\n\n<!-- Register Modal -->\n<ion-modal [isOpen]=\"isRegisterModalOpen\" (didDismiss)=\"closeRegisterModal()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeRegisterModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\n        <val-form [props]=\"registerFormProps()\" (onSubmit)=\"registerHandler($event)\" />\n        <div class=\"auth-link\">\n          <ion-text color=\"dark\">\n            {{ t('hasAccount') }}\n            <a (click)=\"closeRegisterModal()\">{{ t('signIn') }}</a>\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- Verify Email Modal -->\n<ion-modal [isOpen]=\"isVerifyModalOpen\" [backdropDismiss]=\"false\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeVerifyModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\n        <val-form [props]=\"verifyFormProps()\" (onSubmit)=\"verifyHandler($event)\" />\n        <div class=\"resend-link\">\n          <ion-text color=\"dark\">\n            {{ t('noCodeReceived') }} @if (resendCooldown > 0) {\n            <span class=\"cooldown\">{{ t('resendIn', { seconds: resendCooldown.toString() }) }}</span>\n            } @else {\n            <a (click)=\"resendCode()\">{{ t('resend') }}</a>\n            }\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- Forgot Password Modal -->\n<ion-modal [isOpen]=\"isForgotPasswordModalOpen\" (didDismiss)=\"closeForgotPasswordModal()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeForgotPasswordModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\n        <val-form [props]=\"forgotPasswordFormProps()\" (onSubmit)=\"forgotPasswordHandler($event)\" />\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- Reset Password Modal -->\n<ion-modal [isOpen]=\"isResetPasswordModalOpen\" [backdropDismiss]=\"false\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeResetPasswordModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\n        <val-form [props]=\"resetPasswordFormProps()\" (onSubmit)=\"resetPasswordHandler($event)\" />\n        <div class=\"resend-link\">\n          <ion-text color=\"dark\">\n            {{ t('noCodeReceived') }} @if (resetResendCooldown > 0) {\n            <span class=\"cooldown\">{{ t('resendIn', { seconds: resetResendCooldown.toString() }) }}</span>\n            } @else {\n            <a (click)=\"resendResetCode()\">{{ t('resend') }}</a>\n            }\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- MFA Verify Modal -->\n<ion-modal [isOpen]=\"isMFAVerifyModalOpen\" [backdropDismiss]=\"false\" (didDismiss)=\"onMFAVerifyDismissed()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" (click)=\"closeMFAVerifyModal()\">\n            <ion-icon name=\"close-outline\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\n        <val-form [props]=\"mfaVerifyFormProps()\" (onSubmit)=\"verifyMFAHandler($event)\" />\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".val-login{width:100%}.val-login--card{padding:1rem .75rem;background:var(--ion-color-light);border-radius:16px;box-shadow:0 2px 8px #00000014}.logo-container{max-width:130px;margin-bottom:1.5rem}.auth-link{text-align:center;margin-top:1rem;font-size:.9rem}.auth-link a{color:var(--ion-color-primary);text-decoration:none;font-weight:500;cursor:pointer}.auth-link a:hover{text-decoration:underline}.oauth-separator{display:flex;align-items:center;margin:1.5rem 0}.oauth-separator:before,.oauth-separator:after{content:\"\";flex:1;height:1px;background:var(--ion-color-medium-tint)}.oauth-separator span{padding:0 1rem;color:var(--ion-color-dark);font-size:.85rem}.oauth-buttons{margin-bottom:1rem}.oauth-buttons ion-button{--border-radius: 8px;--border-width: 1px}.oauth-buttons ion-icon{font-size:1.2rem;margin-right:.5rem}.legal-notice{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--ion-color-medium-tint)}.legal-notice p{font-size:.75rem;line-height:1.5;text-align:center;margin:0}.legal-notice a{color:var(--ion-color-primary);text-decoration:none}.legal-notice a:hover{text-decoration:underline}.resend-link{text-align:center;margin-top:1rem;font-size:.9rem}.resend-link a{color:var(--ion-color-primary);cursor:pointer;font-weight:500}.resend-link a:hover{text-decoration:underline}.resend-link .cooldown{color:var(--ion-color-medium)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onInvalid", "onSelectChange"] }, { kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoginComponent, decorators: [{
             type: Component,
@@ -40368,7 +40397,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         IonToolbar,
                         FormComponent,
                         ImageComponent,
-                    ], template: "<div class=\"val-login\" [class.val-login--card]=\"config.showCard\">\n  <!-- Logo -->\n  @if (props.logo) {\n  <div class=\"logo-container\">\n    <val-image [props]=\"props.logo\" />\n  </div>\n  }\n\n  <!-- Login Form -->\n  <val-form [props]=\"loginFormProps()\" (onSubmit)=\"loginHandler($event)\" />\n\n  <!-- OAuth Section -->\n  @if (config.showOAuth && config.oauthProviders.length > 0) {\n  <div class=\"oauth-separator\">\n    <span>{{ t('orContinueWith') }}</span>\n  </div>\n\n  <div class=\"oauth-buttons\">\n    @for (provider of config.oauthProviders; track provider) {\n    <ion-button\n      expand=\"block\"\n      fill=\"outline\"\n      color=\"dark\"\n      (click)=\"loginWithOAuth(provider)\"\n      [disabled]=\"isOAuthLoading\"\n    >\n      @switch (provider) { @case ('google') {\n      <ion-icon slot=\"start\" name=\"logo-google\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithGoogle') }} } @case ('apple') {\n      <ion-icon slot=\"start\" name=\"logo-apple\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithApple') }} } @case ('microsoft') {\n      <ion-icon slot=\"start\" name=\"logo-microsoft\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithMicrosoft') }} } }\n    </ion-button>\n    }\n  </div>\n  }\n\n  <!-- Register Link -->\n  @if (config.showRegister) {\n  <div class=\"auth-link\">\n    <ion-text color=\"dark\">\n      {{ t('noAccount') }}\n      <a (click)=\"openRegisterModal()\">{{ t('register') }}</a>\n    </ion-text>\n  </div>\n  }\n\n  <!-- Forgot Password Link -->\n  @if (config.showForgotPassword) {\n  <div class=\"auth-link forgot-password\">\n    <ion-text color=\"dark\">\n      {{ t('forgotLink') }}\n      <a (click)=\"openForgotPasswordModal()\">{{ t('recoverPassword') }}</a>\n    </ion-text>\n  </div>\n  }\n\n  <!-- Legal Notice -->\n  @if (props.legal) {\n  <div class=\"legal-notice\">\n    <ion-text color=\"dark\">\n      <p>\n        {{ t('legalPrefix') }} @if (resolvedCompanyLink) {\n        <a [href]=\"resolvedCompanyLink\" target=\"_blank\" rel=\"noopener noreferrer\"\n          ><strong>{{ props.legal.companyName }}</strong></a\n        >\n        } @else {\n        <strong>{{ props.legal.companyName }}</strong>\n        } {{ t('legalSuffix') }} @if (props.legal.termsLink) {\n        <a [href]=\"props.legal.termsLink\">{{ t('termsAndConditions') }}</a>\n        } @else {\n        <span>{{ t('termsAndConditions') }}</span>\n        } {{ t('and') }} @if (props.legal.privacyLink) {\n        <a [href]=\"props.legal.privacyLink\">{{ t('privacyPolicy') }}</a>\n        } @else {\n        <span>{{ t('privacyPolicy') }}</span>\n        }.\n      </p>\n    </ion-text>\n  </div>\n  }\n</div>\n\n<!-- Register Modal -->\n<ion-modal [isOpen]=\"isRegisterModalOpen\" (didDismiss)=\"closeRegisterModal()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" (click)=\"closeRegisterModal()\">\n            <ion-icon name=\"close-outline\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\n        <val-form [props]=\"registerFormProps()\" (onSubmit)=\"registerHandler($event)\" />\n        <div class=\"auth-link\">\n          <ion-text color=\"dark\">\n            {{ t('hasAccount') }}\n            <a (click)=\"closeRegisterModal()\">{{ t('signIn') }}</a>\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- Verify Email Modal -->\n<ion-modal [isOpen]=\"isVerifyModalOpen\" [backdropDismiss]=\"false\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" (click)=\"closeVerifyModal()\">\n            <ion-icon name=\"close-outline\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\n        <val-form [props]=\"verifyFormProps()\" (onSubmit)=\"verifyHandler($event)\" />\n        <div class=\"resend-link\">\n          <ion-text color=\"dark\">\n            {{ t('noCodeReceived') }} @if (resendCooldown > 0) {\n            <span class=\"cooldown\">{{ t('resendIn', { seconds: resendCooldown.toString() }) }}</span>\n            } @else {\n            <a (click)=\"resendCode()\">{{ t('resend') }}</a>\n            }\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- Forgot Password Modal -->\n<ion-modal [isOpen]=\"isForgotPasswordModalOpen\" (didDismiss)=\"closeForgotPasswordModal()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" (click)=\"closeForgotPasswordModal()\">\n            <ion-icon name=\"close-outline\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\n        <val-form [props]=\"forgotPasswordFormProps()\" (onSubmit)=\"forgotPasswordHandler($event)\" />\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- Reset Password Modal -->\n<ion-modal [isOpen]=\"isResetPasswordModalOpen\" [backdropDismiss]=\"false\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" (click)=\"closeResetPasswordModal()\">\n            <ion-icon name=\"close-outline\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\n        <val-form [props]=\"resetPasswordFormProps()\" (onSubmit)=\"resetPasswordHandler($event)\" />\n        <div class=\"resend-link\">\n          <ion-text color=\"dark\">\n            {{ t('noCodeReceived') }} @if (resetResendCooldown > 0) {\n            <span class=\"cooldown\">{{ t('resendIn', { seconds: resetResendCooldown.toString() }) }}</span>\n            } @else {\n            <a (click)=\"resendResetCode()\">{{ t('resend') }}</a>\n            }\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- MFA Verify Modal -->\n<ion-modal [isOpen]=\"isMFAVerifyModalOpen\" [backdropDismiss]=\"false\" (didDismiss)=\"onMFAVerifyDismissed()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" (click)=\"closeMFAVerifyModal()\">\n            <ion-icon name=\"close-outline\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\n        <val-form [props]=\"mfaVerifyFormProps()\" (onSubmit)=\"verifyMFAHandler($event)\" />\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".val-login{width:100%}.val-login--card{padding:1rem .75rem;background:var(--ion-color-light);border-radius:16px;box-shadow:0 2px 8px #00000014}.logo-container{max-width:130px;margin-bottom:1.5rem}.auth-link{text-align:center;margin-top:1rem;font-size:.9rem}.auth-link a{color:var(--ion-color-primary);text-decoration:none;font-weight:500;cursor:pointer}.auth-link a:hover{text-decoration:underline}.oauth-separator{display:flex;align-items:center;margin:1.5rem 0}.oauth-separator:before,.oauth-separator:after{content:\"\";flex:1;height:1px;background:var(--ion-color-medium-tint)}.oauth-separator span{padding:0 1rem;color:var(--ion-color-dark);font-size:.85rem}.oauth-buttons{margin-bottom:1rem}.oauth-buttons ion-button{--border-radius: 8px;--border-width: 1px}.oauth-buttons ion-icon{font-size:1.2rem;margin-right:.5rem}.legal-notice{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--ion-color-medium-tint)}.legal-notice p{font-size:.75rem;line-height:1.5;text-align:center;margin:0}.legal-notice a{color:var(--ion-color-primary);text-decoration:none}.legal-notice a:hover{text-decoration:underline}.resend-link{text-align:center;margin-top:1rem;font-size:.9rem}.resend-link a{color:var(--ion-color-primary);cursor:pointer;font-weight:500}.resend-link a:hover{text-decoration:underline}.resend-link .cooldown{color:var(--ion-color-medium)}\n"] }]
+                    ], template: "<div class=\"val-login\" [class.val-login--card]=\"config.showCard\">\n  <!-- Logo -->\n  @if (props.logo) {\n  <div class=\"logo-container\">\n    <val-image [props]=\"props.logo\" />\n  </div>\n  }\n\n  <!-- Login Form -->\n  <val-form [props]=\"loginFormProps()\" (onSubmit)=\"loginHandler($event)\" />\n\n  <!-- OAuth Section -->\n  @if (config.showOAuth && config.oauthProviders.length > 0) {\n  <div class=\"oauth-separator\">\n    <span>{{ t('orContinueWith') }}</span>\n  </div>\n\n  <div class=\"oauth-buttons\">\n    @for (provider of config.oauthProviders; track provider) {\n    <ion-button\n      expand=\"block\"\n      fill=\"outline\"\n      color=\"dark\"\n      (click)=\"loginWithOAuth(provider)\"\n      [disabled]=\"isOAuthLoading\"\n    >\n      @switch (provider) { @case ('google') {\n      <ion-icon slot=\"start\" name=\"logo-google\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithGoogle') }} } @case ('apple') {\n      <ion-icon slot=\"start\" name=\"logo-apple\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithApple') }} } @case ('microsoft') {\n      <ion-icon slot=\"start\" name=\"logo-microsoft\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithMicrosoft') }} } }\n    </ion-button>\n    }\n  </div>\n  }\n\n  <!-- Register Link -->\n  @if (config.showRegister) {\n  <div class=\"auth-link\">\n    <ion-text color=\"dark\">\n      {{ t('noAccount') }}\n      <a (click)=\"openRegisterModal()\">{{ t('register') }}</a>\n    </ion-text>\n  </div>\n  }\n\n  <!-- Forgot Password Link -->\n  @if (config.showForgotPassword) {\n  <div class=\"auth-link forgot-password\">\n    <ion-text color=\"dark\">\n      {{ t('forgotLink') }}\n      <a (click)=\"openForgotPasswordModal()\">{{ t('recoverPassword') }}</a>\n    </ion-text>\n  </div>\n  }\n\n  <!-- Legal Notice -->\n  @if (props.legal) {\n  <div class=\"legal-notice\">\n    <ion-text color=\"dark\">\n      <p>\n        {{ t('legalPrefix') }} @if (resolvedCompanyLink) {\n        <a [href]=\"resolvedCompanyLink\" target=\"_blank\" rel=\"noopener noreferrer\"\n          ><strong>{{ props.legal.companyName }}</strong></a\n        >\n        } @else {\n        <strong>{{ props.legal.companyName }}</strong>\n        } {{ t('legalSuffix') }} @if (props.legal.termsLink) {\n        <a [href]=\"props.legal.termsLink\">{{ t('termsAndConditions') }}</a>\n        } @else {\n        <span>{{ t('termsAndConditions') }}</span>\n        } {{ t('and') }} @if (props.legal.privacyLink) {\n        <a [href]=\"props.legal.privacyLink\">{{ t('privacyPolicy') }}</a>\n        } @else {\n        <span>{{ t('privacyPolicy') }}</span>\n        }.\n      </p>\n    </ion-text>\n  </div>\n  }\n</div>\n\n<!-- Register Modal -->\n<ion-modal [isOpen]=\"isRegisterModalOpen\" (didDismiss)=\"closeRegisterModal()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeRegisterModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\n        <val-form [props]=\"registerFormProps()\" (onSubmit)=\"registerHandler($event)\" />\n        <div class=\"auth-link\">\n          <ion-text color=\"dark\">\n            {{ t('hasAccount') }}\n            <a (click)=\"closeRegisterModal()\">{{ t('signIn') }}</a>\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- Verify Email Modal -->\n<ion-modal [isOpen]=\"isVerifyModalOpen\" [backdropDismiss]=\"false\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeVerifyModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\n        <val-form [props]=\"verifyFormProps()\" (onSubmit)=\"verifyHandler($event)\" />\n        <div class=\"resend-link\">\n          <ion-text color=\"dark\">\n            {{ t('noCodeReceived') }} @if (resendCooldown > 0) {\n            <span class=\"cooldown\">{{ t('resendIn', { seconds: resendCooldown.toString() }) }}</span>\n            } @else {\n            <a (click)=\"resendCode()\">{{ t('resend') }}</a>\n            }\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- Forgot Password Modal -->\n<ion-modal [isOpen]=\"isForgotPasswordModalOpen\" (didDismiss)=\"closeForgotPasswordModal()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeForgotPasswordModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\n        <val-form [props]=\"forgotPasswordFormProps()\" (onSubmit)=\"forgotPasswordHandler($event)\" />\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- Reset Password Modal -->\n<ion-modal [isOpen]=\"isResetPasswordModalOpen\" [backdropDismiss]=\"false\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeResetPasswordModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\n        <val-form [props]=\"resetPasswordFormProps()\" (onSubmit)=\"resetPasswordHandler($event)\" />\n        <div class=\"resend-link\">\n          <ion-text color=\"dark\">\n            {{ t('noCodeReceived') }} @if (resetResendCooldown > 0) {\n            <span class=\"cooldown\">{{ t('resendIn', { seconds: resetResendCooldown.toString() }) }}</span>\n            } @else {\n            <a (click)=\"resendResetCode()\">{{ t('resend') }}</a>\n            }\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- MFA Verify Modal -->\n<ion-modal [isOpen]=\"isMFAVerifyModalOpen\" [backdropDismiss]=\"false\" (didDismiss)=\"onMFAVerifyDismissed()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" (click)=\"closeMFAVerifyModal()\">\n            <ion-icon name=\"close-outline\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        @if (props.logo) {\n        <div class=\"logo-container\">\n          <val-image [props]=\"props.logo\" />\n        </div>\n        }\n        <val-form [props]=\"mfaVerifyFormProps()\" (onSubmit)=\"verifyMFAHandler($event)\" />\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".val-login{width:100%}.val-login--card{padding:1rem .75rem;background:var(--ion-color-light);border-radius:16px;box-shadow:0 2px 8px #00000014}.logo-container{max-width:130px;margin-bottom:1.5rem}.auth-link{text-align:center;margin-top:1rem;font-size:.9rem}.auth-link a{color:var(--ion-color-primary);text-decoration:none;font-weight:500;cursor:pointer}.auth-link a:hover{text-decoration:underline}.oauth-separator{display:flex;align-items:center;margin:1.5rem 0}.oauth-separator:before,.oauth-separator:after{content:\"\";flex:1;height:1px;background:var(--ion-color-medium-tint)}.oauth-separator span{padding:0 1rem;color:var(--ion-color-dark);font-size:.85rem}.oauth-buttons{margin-bottom:1rem}.oauth-buttons ion-button{--border-radius: 8px;--border-width: 1px}.oauth-buttons ion-icon{font-size:1.2rem;margin-right:.5rem}.legal-notice{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--ion-color-medium-tint)}.legal-notice p{font-size:.75rem;line-height:1.5;text-align:center;margin:0}.legal-notice a{color:var(--ion-color-primary);text-decoration:none}.legal-notice a:hover{text-decoration:underline}.resend-link{text-align:center;margin-top:1rem;font-size:.9rem}.resend-link a{color:var(--ion-color-primary);cursor:pointer;font-weight:500}.resend-link a:hover{text-decoration:underline}.resend-link .cooldown{color:var(--ion-color-medium)}\n"] }]
         }], propDecorators: { props: [{
                 type: Input
             }], onSuccess: [{
@@ -55401,7 +55430,7 @@ const FIELD_LIST_I18N = {
 };
 
 addIcons({ addOutline, trashOutline });
-const I18N_NS$1 = 'FieldList';
+const I18N_NS$2 = 'FieldList';
 /**
  * `val-field-list` — editor de listas de campos repetibles (premios, rondas,
  * integrantes, etc.). Cada ítem es una **card** con sus campos apilados y un botón
@@ -55455,8 +55484,8 @@ class FieldListComponent {
             const max = this.props.max;
             return max == null || this.rowsSig().length < max;
         });
-        if (!this.i18n.hasNamespace(I18N_NS$1)) {
-            this.i18n.registerContent(I18N_NS$1, FIELD_LIST_I18N);
+        if (!this.i18n.hasNamespace(I18N_NS$2)) {
+            this.i18n.registerContent(I18N_NS$2, FIELD_LIST_I18N);
         }
     }
     ngOnChanges(changes) {
@@ -55472,7 +55501,7 @@ class FieldListComponent {
         }
     }
     t(key) {
-        return this.i18n.t(key, I18N_NS$1);
+        return this.i18n.t(key, I18N_NS$2);
     }
     /** Reemplaza `{n}` por el número de fila (1-based) en el rótulo de la card. */
     rowLabel(template, index) {
@@ -55644,7 +55673,7 @@ const DATE_PICKER_I18N = {
 };
 
 addIcons({ calendarOutline, closeOutline });
-const I18N_NS = 'DatePicker';
+const I18N_NS$1 = 'DatePicker';
 /**
  * `val-date-picker` — selector de fecha con calendario vanilla-calendar-pro v3
  * (NO ion-datetime). Se presenta como **sheet modal** (bottom sheet), igual que
@@ -55666,8 +55695,8 @@ class DatePickerComponent {
         this.sheetOpen = signal(false);
         /** true cuando el calendario ya se construyó y es visible (fade-in). */
         this.calReady = signal(false);
-        if (!this.i18n.hasNamespace(I18N_NS)) {
-            this.i18n.registerContent(I18N_NS, DATE_PICKER_I18N);
+        if (!this.i18n.hasNamespace(I18N_NS$1)) {
+            this.i18n.registerContent(I18N_NS$1, DATE_PICKER_I18N);
         }
     }
     get triggerId() {
@@ -55710,7 +55739,7 @@ class DatePickerComponent {
         this.destroyCalendar();
     }
     t(key) {
-        return this.i18n.t(key, I18N_NS);
+        return this.i18n.t(key, I18N_NS$1);
     }
     onSheetPresent() {
         this.calReady.set(false);
@@ -55736,7 +55765,7 @@ class DatePickerComponent {
             selectedDates: value ? [value] : [],
             displayDateMin: (this.props.min ?? undefined),
             displayDateMax: (this.props.max ?? undefined),
-            onClickDate: (self) => {
+            onClickDate: self => {
                 const picked = self.context.selectedDates[0] ?? null;
                 if (picked)
                     this.apply(picked);
@@ -55801,7 +55830,7 @@ class DatePickerComponent {
         [class.is-placeholder]="!displayValue"
         (click)="sheetOpen.set(true)"
       >
-        <ion-icon name="calendar-outline" slot="start" />
+        <ion-icon name="calendar-outline" slot="start" aria-hidden="true" />
         {{ displayValue || placeholderText }}
       </ion-button>
     </div>
@@ -55840,11 +55869,7 @@ class DatePickerComponent {
           }
 
           <!-- Calendario: siempre en el DOM para que #cal exista; fade-in al estar listo -->
-          <div
-            #cal
-            class="vdp-sheet__cal"
-            [class.is-ready]="calReady()"
-          ></div>
+          <div #cal class="vdp-sheet__cal" [class.is-ready]="calReady()"></div>
 
           @if (props.clearable && displayValue) {
             <ion-button expand="block" fill="clear" color="medium" (click)="clear()">
@@ -55886,7 +55911,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         [class.is-placeholder]="!displayValue"
         (click)="sheetOpen.set(true)"
       >
-        <ion-icon name="calendar-outline" slot="start" />
+        <ion-icon name="calendar-outline" slot="start" aria-hidden="true" />
         {{ displayValue || placeholderText }}
       </ion-button>
     </div>
@@ -55925,11 +55950,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           }
 
           <!-- Calendario: siempre en el DOM para que #cal exista; fade-in al estar listo -->
-          <div
-            #cal
-            class="vdp-sheet__cal"
-            [class.is-ready]="calReady()"
-          ></div>
+          <div #cal class="vdp-sheet__cal" [class.is-ready]="calReady()"></div>
 
           @if (props.clearable && displayValue) {
             <ion-button expand="block" fill="clear" color="medium" (click)="clear()">
@@ -58434,6 +58455,122 @@ function beautifyLegalArticle(article) {
  * Soporta modo one-shot y real-time, con gate de `firebaseAuthReady`.
  */
 
+/**
+ * Defaults i18n embebidos en `createPageState`. Namespace `PageState`.
+ * Auto-registrados la primera vez que se llama al helper.
+ */
+const PAGE_STATE_I18N = {
+    es: {
+        errorTitle: 'No pudimos cargar la página',
+        offlineTitle: 'Sin conexión',
+        offlineHint: 'Revisá tu conexión e intentá de nuevo.',
+        retry: 'Reintentar',
+    },
+    en: {
+        errorTitle: "We couldn't load the page",
+        offlineTitle: "You're offline",
+        offlineHint: 'Check your connection and try again.',
+        retry: 'Retry',
+    },
+};
+
+/**
+ * createPageState — helper estándar para el patrón loading/error/data de una
+ * página con datos remotos (HTTP o Firestore one-shot).
+ *
+ * Encapsula el boilerplate repetido en cada vista:
+ *  - `loading` signal (true mientras carga o recarga).
+ *  - `loadError` signal (el error crudo o null).
+ *  - `errorState` computed que convierte el error a `EmptyStateMetadata` listo
+ *    para `<val-empty-state>`, reactivo al idioma.
+ *  - `reload()` function que re-ejecuta el `loader` async.
+ *
+ * El caller controla el template; `createPageState` solo maneja el estado:
+ *
+ * ```ts
+ * readonly page = createPageState(
+ *   this.i18n,
+ *   async () => {
+ *     const res = await firstValueFrom(this.svc.getData());
+ *     this.items.set(res.items);
+ *   },
+ *   { errorTitle: () => this.t('errorTitle'), retryLabel: () => this.t('retry') }
+ * );
+ * ```
+ *
+ * Template:
+ * ```html
+ * @if (page.loading()) { <val-skeleton-layout [props]="{ preset: 'list' }" /> }
+ * @else if (page.errorState(); as e) { <val-empty-state [props]="e" /> }
+ * @else { <!-- content --> }
+ * ```
+ *
+ * El helper llama a `reload()` automáticamente al construirse (carga inicial),
+ * igual que el patrón clásico `void this.load()` en el constructor.
+ * Para deshabilitar la carga automática, pasar `{ autoLoad: false }`.
+ *
+ * Para pull-to-refresh usar `connectPageRefresh(() => page.reload())` como siempre.
+ */
+const I18N_NS = 'PageState';
+/**
+ * Crea el estado de carga de una página.
+ *
+ * @param i18n - `I18nService` inyectado en la page (para reactividad al idioma).
+ * @param loader - función async que carga los datos y los siembra en signals
+ *   propias de la page. Si lanza, el error se captura en `loadError`.
+ * @param labels - labels i18n opcionales. Si se omiten usa defaults genéricos.
+ * @param options - `autoLoad`: si false no carga al construirse (default true).
+ */
+function createPageState(i18n, loader, labels, options) {
+    if (!i18n.hasNamespace(I18N_NS)) {
+        i18n.registerContent(I18N_NS, PAGE_STATE_I18N);
+    }
+    const loading = signal(false);
+    const loadError = signal(null);
+    const errorState = computed(() => {
+        i18n.lang(); // reactividad al cambiar idioma
+        const err = loadError();
+        if (!err)
+            return null;
+        const interpreted = interpretError(err);
+        return createErrorStateProps(err, {
+            title: {
+                error: labels?.errorTitle?.() ?? i18n.t('errorTitle', 'PageState'),
+                offline: labels?.offlineTitle?.() ?? i18n.t('offlineTitle', 'PageState'),
+            },
+            description: {
+                error: labels?.errorDescription?.(err) ?? interpreted.message,
+                offline: labels?.offlineHint?.() ?? i18n.t('offlineHint', 'PageState'),
+            },
+            retryLabel: labels?.retryLabel?.() ?? i18n.t('retry', 'PageState'),
+            onRetry: () => void reload(),
+            retrying: loading(),
+        });
+    });
+    async function reload() {
+        loading.set(true);
+        try {
+            await loader();
+            loadError.set(null);
+        }
+        catch (err) {
+            loadError.set(err);
+        }
+        finally {
+            loading.set(false);
+        }
+    }
+    if (options?.autoLoad !== false) {
+        void reload();
+    }
+    return {
+        loading: loading.asReadonly(),
+        loadError: loadError.asReadonly(),
+        errorState,
+        reload,
+    };
+}
+
 /**
  * Cross-Platform Version Helpers
  *
@@ -62419,14 +62556,14 @@ class FeedbackFormComponent {
 
         @if (error()) {
           <div class="feedback-alert error">
-            <ion-icon name="close-circle-outline"></ion-icon>
+            <ion-icon name="close-circle-outline" aria-hidden="true"></ion-icon>
             <span>{{ error() }}</span>
           </div>
         }
 
         @if (isSuccess()) {
           <div class="feedback-alert success">
-            <ion-icon name="checkmark-circle-outline"></ion-icon>
+            <ion-icon name="checkmark-circle-outline" aria-hidden="true"></ion-icon>
             <span>{{ props.successMessage || i18n.t('feedbackSuccess') }}</span>
           </div>
         }
@@ -62454,14 +62591,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
         @if (error()) {
           <div class="feedback-alert error">
-            <ion-icon name="close-circle-outline"></ion-icon>
+            <ion-icon name="close-circle-outline" aria-hidden="true"></ion-icon>
             <span>{{ error() }}</span>
           </div>
         }
 
         @if (isSuccess()) {
           <div class="feedback-alert success">
-            <ion-icon name="checkmark-circle-outline"></ion-icon>
+            <ion-icon name="checkmark-circle-outline" aria-hidden="true"></ion-icon>
             <span>{{ props.successMessage || i18n.t('feedbackSuccess') }}</span>
           </div>
         }
@@ -63495,7 +63632,7 @@ class DocsNavLinksComponent {
             [href]="getHref(props.previous.route)"
             (click)="onNavigate($event, props.previous.route)"
           >
-            <ion-icon name="arrow-back-outline" class="docs-nav-links__icon"></ion-icon>
+            <ion-icon name="arrow-back-outline" class="docs-nav-links__icon" aria-hidden="true"></ion-icon>
             <div class="docs-nav-links__text">
               <span class="docs-nav-links__label">{{ props.previous.label || previousLabel() }}</span>
               <span class="docs-nav-links__title">{{ props.previous.title }}</span>
@@ -63505,10 +63642,7 @@ class DocsNavLinksComponent {
       </div>
 
       <!-- Next -->
-      <div
-        class="docs-nav-links__item docs-nav-links__item--next"
-        [class.docs-nav-links__item--empty]="!props.next"
-      >
+      <div class="docs-nav-links__item docs-nav-links__item--next" [class.docs-nav-links__item--empty]="!props.next">
         @if (props.next) {
           <a
             class="docs-nav-links__link"
@@ -63519,7 +63653,7 @@ class DocsNavLinksComponent {
               <span class="docs-nav-links__label">{{ props.next.label || nextLabel() }}</span>
               <span class="docs-nav-links__title">{{ props.next.title }}</span>
             </div>
-            <ion-icon name="arrow-forward-outline" class="docs-nav-links__icon"></ion-icon>
+            <ion-icon name="arrow-forward-outline" class="docs-nav-links__icon" aria-hidden="true"></ion-icon>
           </a>
         }
       </div>
@@ -63541,7 +63675,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             [href]="getHref(props.previous.route)"
             (click)="onNavigate($event, props.previous.route)"
           >
-            <ion-icon name="arrow-back-outline" class="docs-nav-links__icon"></ion-icon>
+            <ion-icon name="arrow-back-outline" class="docs-nav-links__icon" aria-hidden="true"></ion-icon>
             <div class="docs-nav-links__text">
               <span class="docs-nav-links__label">{{ props.previous.label || previousLabel() }}</span>
               <span class="docs-nav-links__title">{{ props.previous.title }}</span>
@@ -63551,10 +63685,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       </div>
 
       <!-- Next -->
-      <div
-        class="docs-nav-links__item docs-nav-links__item--next"
-        [class.docs-nav-links__item--empty]="!props.next"
-      >
+      <div class="docs-nav-links__item docs-nav-links__item--next" [class.docs-nav-links__item--empty]="!props.next">
         @if (props.next) {
           <a
             class="docs-nav-links__link"
@@ -63565,7 +63696,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
               <span class="docs-nav-links__label">{{ props.next.label || nextLabel() }}</span>
               <span class="docs-nav-links__title">{{ props.next.title }}</span>
             </div>
-            <ion-icon name="arrow-forward-outline" class="docs-nav-links__icon"></ion-icon>
+            <ion-icon name="arrow-forward-outline" class="docs-nav-links__icon" aria-hidden="true"></ion-icon>
           </a>
         }
       </div>
@@ -63894,7 +64025,7 @@ class DocsCodeExampleComponent {
               rel="noopener noreferrer"
             >
               {{ props.externalLink.label || 'Open in StackBlitz' }}
-              <ion-icon name="open-outline"></ion-icon>
+              <ion-icon name="open-outline" aria-hidden="true"></ion-icon>
             </a>
           }
         </div>
@@ -63935,7 +64066,11 @@ class DocsCodeExampleComponent {
                   [attr.aria-label]="copied() ? 'Code copied' : 'Copy code'"
                   (click)="copyCode()"
                 >
-                  <ion-icon slot="icon-only" [name]="copied() ? 'checkmark-outline' : 'copy-outline'"></ion-icon>
+                  <ion-icon
+                    slot="icon-only"
+                    [name]="copied() ? 'checkmark-outline' : 'copy-outline'"
+                    aria-hidden="true"
+                  ></ion-icon>
                 </ion-button>
               }
             </div>
@@ -63974,7 +64109,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
               rel="noopener noreferrer"
             >
               {{ props.externalLink.label || 'Open in StackBlitz' }}
-              <ion-icon name="open-outline"></ion-icon>
+              <ion-icon name="open-outline" aria-hidden="true"></ion-icon>
             </a>
           }
         </div>
@@ -64015,7 +64150,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                   [attr.aria-label]="copied() ? 'Code copied' : 'Copy code'"
                   (click)="copyCode()"
                 >
-                  <ion-icon slot="icon-only" [name]="copied() ? 'checkmark-outline' : 'copy-outline'"></ion-icon>
+                  <ion-icon
+                    slot="icon-only"
+                    [name]="copied() ? 'checkmark-outline' : 'copy-outline'"
+                    aria-hidden="true"
+                  ></ion-icon>
                 </ion-button>
               }
             </div>
@@ -64095,9 +64234,7 @@ class DocsSearchComponent {
             });
             return results.slice(0, 10); // Limit results
         });
-        this.searchSubject
-            .pipe(debounceTime$1(this.props.debounceMs || 150), takeUntil$1(this.destroy$))
-            .subscribe((query) => {
+        this.searchSubject.pipe(debounceTime$1(this.props.debounceMs || 150), takeUntil$1(this.destroy$)).subscribe(query => {
             this.search.emit(query);
         });
     }
@@ -64129,11 +64266,11 @@ class DocsSearchComponent {
         switch (event.key) {
             case 'ArrowDown':
                 event.preventDefault();
-                this.selectedIndex.update((i) => Math.min(i + 1, resultsArray.length - 1));
+                this.selectedIndex.update(i => Math.min(i + 1, resultsArray.length - 1));
                 break;
             case 'ArrowUp':
                 event.preventDefault();
-                this.selectedIndex.update((i) => Math.max(i - 1, 0));
+                this.selectedIndex.update(i => Math.max(i - 1, 0));
                 break;
             case 'Enter':
                 event.preventDefault();
@@ -64162,7 +64299,7 @@ class DocsSearchComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DocsSearchComponent, isStandalone: true, selector: "val-docs-search", inputs: { props: "props" }, outputs: { navigate: "navigate", search: "search" }, host: { listeners: { "document:keydown": "onGlobalKeydown($event)" } }, viewQueries: [{ propertyName: "searchInputEl", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: `
     <div class="docs-search" [class]="props.cssClass">
       <div class="docs-search__input-wrapper">
-        <ion-icon name="search-outline" class="docs-search__icon"></ion-icon>
+        <ion-icon name="search-outline" class="docs-search__icon" aria-hidden="true"></ion-icon>
         <input
           #searchInput
           type="text"
@@ -64177,13 +64314,8 @@ class DocsSearchComponent {
           autocomplete="off"
         />
         @if (searchQuery()) {
-          <button
-            type="button"
-            class="docs-search__clear"
-            (click)="clearSearch()"
-            aria-label="Clear search"
-          >
-            <ion-icon name="close-outline"></ion-icon>
+          <button type="button" class="docs-search__clear" (click)="clearSearch()" aria-label="Clear search">
+            <ion-icon name="close-outline" aria-hidden="true"></ion-icon>
           </button>
         } @else if (props.showShortcut) {
           <span class="docs-search__shortcut">{{ isMac ? '⌘' : 'Ctrl' }}+K</span>
@@ -64213,9 +64345,7 @@ class DocsSearchComponent {
       }
 
       @if (showResults() && searchQuery() && results().length === 0) {
-        <div class="docs-search__no-results">
-          No results found for "{{ searchQuery() }}"
-        </div>
+        <div class="docs-search__no-results">No results found for "{{ searchQuery() }}"</div>
       }
     </div>
   `, isInline: true, styles: [".docs-search{--search-bg: var(--ion-background-color, #fff);--search-border: var(--ion-border-color, #e0e0e0);--search-text: var(--ion-text-color, #1a1a1a);--search-placeholder: var(--ion-color-medium, #666);--search-hover-bg: rgba(0, 0, 0, .03);--search-active-bg: rgba(0, 0, 0, .05);position:relative;font-family:var(--ion-font-family, system-ui, sans-serif)}.docs-search__input-wrapper{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:var(--search-bg);border:1px solid var(--search-border);border-radius:8px;transition:all .15s ease}.docs-search__input-wrapper:focus-within{border-color:#1a1a1a;box-shadow:0 0 0 3px #0000000d}.docs-search__icon{font-size:1rem;color:var(--search-placeholder);flex-shrink:0}.docs-search__input{flex:1;border:none;outline:none;background:transparent;font-size:.875rem;color:var(--search-text);min-width:0}.docs-search__input::placeholder{color:var(--search-placeholder)}.docs-search__clear{display:flex;align-items:center;justify-content:center;padding:.25rem;border:none;background:transparent;color:var(--search-placeholder);cursor:pointer;border-radius:4px;transition:all .15s ease}.docs-search__clear:hover{background:var(--search-hover-bg);color:var(--search-text)}.docs-search__clear:focus-visible{outline:2px solid #1a1a1a;outline-offset:2px}.docs-search__clear ion-icon{font-size:.875rem}.docs-search__shortcut{font-size:.6875rem;font-weight:500;color:var(--search-placeholder);background:var(--search-hover-bg);padding:.125rem .375rem;border-radius:4px;white-space:nowrap}.docs-search__results{position:absolute;top:calc(100% + 4px);left:0;right:0;max-height:400px;overflow-y:auto;background:var(--search-bg);border:1px solid var(--search-border);border-radius:8px;box-shadow:0 4px 16px #0000001a;z-index:100}.docs-search__result{display:flex;flex-direction:column;gap:.125rem;width:100%;padding:.75rem 1rem;border:none;background:transparent;text-align:left;cursor:pointer;transition:background .15s ease;border-bottom:1px solid var(--search-border)}.docs-search__result:last-child{border-bottom:none}.docs-search__result:hover,.docs-search__result--active{background:var(--search-hover-bg)}.docs-search__result:focus-visible{outline:2px solid #1a1a1a;outline-offset:-2px}.docs-search__result-section{font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--search-placeholder)}.docs-search__result-label{font-size:.875rem;font-weight:500;color:var(--search-text)}.docs-search__result-description{font-size:.75rem;color:var(--search-placeholder);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.docs-search__no-results{padding:1.5rem 1rem;text-align:center;font-size:.875rem;color:var(--search-placeholder);background:var(--search-bg);border:1px solid var(--search-border);border-radius:8px;box-shadow:0 4px 16px #0000001a;position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:100}:host-context(.dark) .docs-search,:host-context([color-scheme=dark]) .docs-search{--search-bg: #1e1e1e;--search-border: #3a3a3a;--search-text: #f4f5f8;--search-placeholder: #a0a0a0;--search-hover-bg: rgba(255, 255, 255, .05);--search-active-bg: rgba(255, 255, 255, .08)}:host-context(.dark) .docs-search__input-wrapper:focus-within,:host-context([color-scheme=dark]) .docs-search__input-wrapper:focus-within{border-color:#f4f5f8;box-shadow:0 0 0 3px #ffffff0d}:host-context(.dark) .docs-search__results,:host-context(.dark) .docs-search__no-results,:host-context([color-scheme=dark]) .docs-search__results,:host-context([color-scheme=dark]) .docs-search__no-results{box-shadow:0 4px 16px #0000004d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.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$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
@@ -64225,7 +64355,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             args: [{ selector: 'val-docs-search', standalone: true, imports: [CommonModule, FormsModule, IonIcon], template: `
     <div class="docs-search" [class]="props.cssClass">
       <div class="docs-search__input-wrapper">
-        <ion-icon name="search-outline" class="docs-search__icon"></ion-icon>
+        <ion-icon name="search-outline" class="docs-search__icon" aria-hidden="true"></ion-icon>
         <input
           #searchInput
           type="text"
@@ -64240,13 +64370,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           autocomplete="off"
         />
         @if (searchQuery()) {
-          <button
-            type="button"
-            class="docs-search__clear"
-            (click)="clearSearch()"
-            aria-label="Clear search"
-          >
-            <ion-icon name="close-outline"></ion-icon>
+          <button type="button" class="docs-search__clear" (click)="clearSearch()" aria-label="Clear search">
+            <ion-icon name="close-outline" aria-hidden="true"></ion-icon>
           </button>
         } @else if (props.showShortcut) {
           <span class="docs-search__shortcut">{{ isMac ? '⌘' : 'Ctrl' }}+K</span>
@@ -64276,9 +64401,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       }
 
       @if (showResults() && searchQuery() && results().length === 0) {
-        <div class="docs-search__no-results">
-          No results found for "{{ searchQuery() }}"
-        </div>
+        <div class="docs-search__no-results">No results found for "{{ searchQuery() }}"</div>
       }
     </div>
   `, styles: [".docs-search{--search-bg: var(--ion-background-color, #fff);--search-border: var(--ion-border-color, #e0e0e0);--search-text: var(--ion-text-color, #1a1a1a);--search-placeholder: var(--ion-color-medium, #666);--search-hover-bg: rgba(0, 0, 0, .03);--search-active-bg: rgba(0, 0, 0, .05);position:relative;font-family:var(--ion-font-family, system-ui, sans-serif)}.docs-search__input-wrapper{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:var(--search-bg);border:1px solid var(--search-border);border-radius:8px;transition:all .15s ease}.docs-search__input-wrapper:focus-within{border-color:#1a1a1a;box-shadow:0 0 0 3px #0000000d}.docs-search__icon{font-size:1rem;color:var(--search-placeholder);flex-shrink:0}.docs-search__input{flex:1;border:none;outline:none;background:transparent;font-size:.875rem;color:var(--search-text);min-width:0}.docs-search__input::placeholder{color:var(--search-placeholder)}.docs-search__clear{display:flex;align-items:center;justify-content:center;padding:.25rem;border:none;background:transparent;color:var(--search-placeholder);cursor:pointer;border-radius:4px;transition:all .15s ease}.docs-search__clear:hover{background:var(--search-hover-bg);color:var(--search-text)}.docs-search__clear:focus-visible{outline:2px solid #1a1a1a;outline-offset:2px}.docs-search__clear ion-icon{font-size:.875rem}.docs-search__shortcut{font-size:.6875rem;font-weight:500;color:var(--search-placeholder);background:var(--search-hover-bg);padding:.125rem .375rem;border-radius:4px;white-space:nowrap}.docs-search__results{position:absolute;top:calc(100% + 4px);left:0;right:0;max-height:400px;overflow-y:auto;background:var(--search-bg);border:1px solid var(--search-border);border-radius:8px;box-shadow:0 4px 16px #0000001a;z-index:100}.docs-search__result{display:flex;flex-direction:column;gap:.125rem;width:100%;padding:.75rem 1rem;border:none;background:transparent;text-align:left;cursor:pointer;transition:background .15s ease;border-bottom:1px solid var(--search-border)}.docs-search__result:last-child{border-bottom:none}.docs-search__result:hover,.docs-search__result--active{background:var(--search-hover-bg)}.docs-search__result:focus-visible{outline:2px solid #1a1a1a;outline-offset:-2px}.docs-search__result-section{font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--search-placeholder)}.docs-search__result-label{font-size:.875rem;font-weight:500;color:var(--search-text)}.docs-search__result-description{font-size:.75rem;color:var(--search-placeholder);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.docs-search__no-results{padding:1.5rem 1rem;text-align:center;font-size:.875rem;color:var(--search-placeholder);background:var(--search-bg);border:1px solid var(--search-border);border-radius:8px;box-shadow:0 4px 16px #0000001a;position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:100}:host-context(.dark) .docs-search,:host-context([color-scheme=dark]) .docs-search{--search-bg: #1e1e1e;--search-border: #3a3a3a;--search-text: #f4f5f8;--search-placeholder: #a0a0a0;--search-hover-bg: rgba(255, 255, 255, .05);--search-active-bg: rgba(255, 255, 255, .08)}:host-context(.dark) .docs-search__input-wrapper:focus-within,:host-context([color-scheme=dark]) .docs-search__input-wrapper:focus-within{border-color:#f4f5f8;box-shadow:0 0 0 3px #ffffff0d}:host-context(.dark) .docs-search__results,:host-context(.dark) .docs-search__no-results,:host-context([color-scheme=dark]) .docs-search__results,:host-context([color-scheme=dark]) .docs-search__no-results{box-shadow:0 4px 16px #0000004d}\n"] }]
@@ -65849,9 +65972,10 @@ class MetricCardComponent {
             fill="clear"
             size="small"
             [disabled]="action.disabled ?? false"
+            [attr.aria-label]="action.token"
             (click)="onAction.emit(action.token)"
           >
-            <ion-icon [name]="action.icon" slot="icon-only"></ion-icon>
+            <ion-icon [name]="action.icon" slot="icon-only" aria-hidden="true"></ion-icon>
           </ion-button>
         }
       </div>
@@ -65901,9 +66025,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             fill="clear"
             size="small"
             [disabled]="action.disabled ?? false"
+            [attr.aria-label]="action.token"
             (click)="onAction.emit(action.token)"
           >
-            <ion-icon [name]="action.icon" slot="icon-only"></ion-icon>
+            <ion-icon [name]="action.icon" slot="icon-only" aria-hidden="true"></ion-icon>
           </ion-button>
         }
       </div>
@@ -66249,7 +66374,7 @@ class TicketCardComponent {
           <div class="ticket-card__qr-fallback">{{ tokenShort() }}</div>
         } @else {
           <div class="ticket-card__qr-loading">
-            <ion-spinner name="crescent" />
+            <ion-spinner name="crescent" aria-label="Generando QR" />
           </div>
         }
       </div>
@@ -66283,7 +66408,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           <div class="ticket-card__qr-fallback">{{ tokenShort() }}</div>
         } @else {
           <div class="ticket-card__qr-loading">
-            <ion-spinner name="crescent" />
+            <ion-spinner name="crescent" aria-label="Generando QR" />
           </div>
         }
       </div>
@@ -66641,5 +66766,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_CARD_DEFAULTS, AD_SIZE_MAP, API_TABLE_COLUMN_LABELS, ARTICLE_CARD_DEFAULTS, ARTICLE_SPACING, ARTICLE_STRIP_DEFAULTS, AUTH_CTA_DEFAULTS, AVATAR_UPLOAD_DEFAULTS, AboutViewComponent, AccordionComponent, AccountViewComponent, ActionCardComponent, ActionHeaderComponent, ActionType, AdSlotComponent, AdsLoaderService, AdsService, AlertBoxComponent, AnalyticsErrorHandler, AnalyticsRouterTracker, AnalyticsService, AnimatedTerminalComponent, ApiKeyCreateModalComponent, ApiKeyService, ApiKeysModalComponent, ApiKeysViewComponent, AppConfigService, AppVersionService, ArticleBuilder, ArticleCardComponent, ArticleComponent, ArticleStripComponent, AttachmentUploaderComponent, AuthBackgroundComponent, AuthCtaComponent, AuthService, AuthStateService, AuthStorageService, AuthSyncService, AvatarComponent, AvatarUploadComponent, BOTTOM_NAV_DEFAULTS, BannerComponent, BlogPostBuilder, BottomNavComponent, BoxComponent, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, CALLOUT_LABELS, CHEV_KEYS, CIRCLE_KEYS, COMMON_COUNTRY_CODES, COMMON_CURRENCIES, CORNER_KEYS, CTA_CARD_DEFAULTS, CURRENCY_INFO, CardComponent, CardSection, CardType, CardsCarouselComponent, ChangeEmailModalComponent, ChangePasswordModalComponent, CheckInputComponent, CheckboxRadioInputComponent, ChipGroupComponent, CodeDisplayComponent, CommandDisplayComponent, CommentComponent, CommentInputComponent, CommentSectionComponent, CompanyFooterComponent, ComponentStates, ConfirmationDialogService, ContainerComponent, ContentLoaderComponent, ContentReactionComponent, ContentService, ContentTransformer, CookieBannerComponent, CountdownComponent, CreateOrgModalComponent, CtaCardComponent, CurrencyInputComponent, DEFAULT_ADS_CONFIG, DEFAULT_APP_CONFIG_SERVICE_CONFIG, DEFAULT_APP_VERSION_SERVICE_CONFIG, DEFAULT_AUTH_CONFIG, DEFAULT_BACK_HEADER, DEFAULT_BUTTON_PRESETS, DEFAULT_CANCEL_BUTTON, DEFAULT_CHECK_INTERVAL_MS, DEFAULT_CONFIRM_BUTTON, DEFAULT_COUNTDOWN_LABELS, DEFAULT_COUNTDOWN_LABELS_EN, DEFAULT_DEBUG_CONSOLE_CONFIG, DEFAULT_DONATION_CONFIG, DEFAULT_EMPTY_STATE, DEFAULT_EMULATOR_CONFIG, DEFAULT_FEEDBACK_CONFIG, DEFAULT_FEEDBACK_TYPE_OPTIONS, DEFAULT_HOME_HEADER, DEFAULT_INFINITE_LIST_METADATA, DEFAULT_MODAL_CANCEL_BUTTON, DEFAULT_MODAL_CONFIRM_BUTTON, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLATFORMS, DEFAULT_PRESETS, DEFAULT_REFRESHER_METADATA, DEFAULT_SKELETON_CONFIG, DEFAULT_SPLASH_SCREEN_CONFIG, DataTableComponent, DateInputComponent, DatePickerComponent, DateRangeInputComponent, DebugConsoleComponent, DeleteAccountModalComponent, DetailSkeletonComponent, DeviceService, DisplayComponent, DividerComponent, DocsApiTableComponent, DocsBreadcrumbComponent, DocsBuilder, DocsCalloutComponent, DocsCodeExampleComponent, DocsLayoutComponent, DocsNavLinksComponent, DocsNavigationService, DocsPageComponent, DocsSearchComponent, DocsSectionComponent, DocsShellComponent, DocsSidebarComponent, DocsTocComponent, DonationService, DownloadService, EditOrgModalComponent, EmptyStateComponent, ExpandableTextComponent, FEATURES_LIST_DEFAULTS, FUN_MODAL_DEFAULTS, FabComponent, FaqComponent, FeaturesListComponent, FeedbackFormComponent, FeedbackService, FieldListComponent, FileInputComponent, FirebaseService, FirestoreCollectionFactory, FirestoreService, FontSizeOption, FontSizeService, FooterComponent, FooterLinksComponent, FormComponent, FormSkeletonComponent, FunHeaderComponent, FunModalComponent, GlassComponent, GlowCardComponent, GlowComponent, GridSkeletonComponent, HANDOFF_ROUTE_PARAM, HANDOFF_TOKEN_PARAM, HandoffService, HasPermissionDirective, HeaderComponent, HintComponent, HorizontalScrollComponent, HrefComponent, I18nService, IMAGE_DEFAULTS, INITIAL_AUTH_STATE, INITIAL_MFA_STATE, INVITATION_CARD_DEFAULTS, IONIC_COLORS$5 as IONIC_COLORS, Icon, IconComponent, IconService, ImageComponent, ImageCropComponent, ImageService, InAppBrowserService, InfiniteListComponent, InfoComponent, InputI18nHelper, InputType, InvitationCardComponent, InviteMemberModalComponent, ItemListComponent, LANG_STORAGE_KEY$1 as LANG_STORAGE_KEY, LEGAL_CONTENT_CONFIG, LOGIN_DEFAULTS, LandingSplitComponent, LandingStepsComponent, LanguageSelectorComponent, LayeredCardComponent, LegalContentService, LegalLinkService, LinkComponent, LinkProcessorService, LinkedProvidersComponent, LinksAccordionComponent, LinksCakeComponent, ListSkeletonComponent, LoadingDirective, LocalStorageService, LocaleService, LoginAttemptModalComponent, LoginComponent, MEDIA_OBJECT_DEFAULTS, MEMBER_CARD_DEFAULTS, METRIC_CARD_DEFAULTS, MODAL_SIZES, MOTIF_KEYS, MOTION, MaintenancePageComponent, MarkdownArticleParserService, MediaObjectComponent, MemberCardComponent, MemberDetailModalComponent, MemberImportModalComponent, MenuComponent, MessagingService, MetaService, MetricCardComponent, MfaModalComponent, ModalService, ModalShellComponent, MultiSelectSearchComponent, NUM_KEYS, NavigationService, NetworkBannerComponent, NetworkStatusService, NewsBuilder, NoContentComponent, NotesBoxComponent, NotificationActionService, NotificationPreferencesViewComponent, NotificationsService, NotificationsViewComponent, NumberFromToComponent, NumberStepperComponent, OAUTH_PROVIDERS_INFO, OAuthCallbackComponent, OAuthService, OrgInfoSheetComponent, OrgService, OrgSwitchService, OrganizationViewComponent, PATTERN_MOTIFS, PATTERN_PALETTES, PATTERN_STYLE_CONFIGS, PLATFORM_CONFIGS, PageContentComponent, PageLinksComponent, PageRefreshService, PageTemplateComponent, PageWavesComponent, PageWrapperComponent, PaginationComponent, PaginationService, PasswordInputComponent, PatternComponent, PermissionCatalogService, PermissionSelectorComponent, PermissionsViewComponent, PhoneInputComponent, PillComponent, PinInputComponent, PlainCodeBoxComponent, PopoverSelectorComponent, PreferencesService, PreferencesViewComponent, PresetService, PriceTagComponent, ProcessLinksPipe, ProfileSkeletonComponent, ProfileViewComponent, ProgressBarComponent, ProgressRingComponent, ProgressStatusComponent, PrompterComponent, QR_PRESETS, QrCodeComponent, QrGeneratorService, QrScannerComponent, QueryBuilder, QuoteBoxComponent, REQUEST_STATUSES, RadioInputComponent, RangeInputComponent, RatingComponent, RefresherComponent, RequestFirestoreService, RequestFormBuilderService, RequestService, RightsFooterComponent, RotatingTextComponent, SEARCH_HEADER_DEFAULTS, SETTINGS_SECTIONS_CATALOG, SHAPE_KEYS, SHARE_PROFILE_MODAL_DEFAULTS, SKELETON_LAYOUT_DEFAULT_ROWS, SKELETON_PRESETS, SOLID_KEYS, STATS_BAR_DEFAULTS, STROKE_KEYS, SearchHeaderComponent, SearchSelectorComponent, SearchbarComponent, SecurityViewComponent, SegmentControlComponent, SelectSearchComponent, SessionListModalComponent, SessionService, SettingsHubComponent, ShareButtonsComponent, ShareProfileModalComponent, SimpleComponent, SkeletonComponent, SkeletonLayoutComponent, SkeletonService, SplashScreenService, StatsBarComponent, StatsCardComponent, StepperComponent, StorageService, SwipeCarouselComponent, SwitchOrgModalComponent, TRI_KEYS, TabbedContentComponent, TableSkeletonComponent, TabsComponent, Terminal404Component, TestimonialCardComponent, TestimonialCarouselComponent, TextComponent, TextInputComponent, TextareaInputComponent, ThemeOption, ThemeService, TicketCardComponent, TimelineComponent, TitleBlockComponent, TitleComponent, ToastService, ToggleInputComponent, TokenService, ToolbarActionType, ToolbarComponent, TransferOwnershipModalComponent, TranslatePipe, TypedCollection, UPDATE_BANNER_DEFAULT_CONTENT, UPDATE_BANNER_I18N_NAMESPACE, UpdateBannerComponent, UserAvatarComponent, UsernameInputComponent, VALTECH_ADS_CONFIG, VALTECH_APP_CONFIG, VALTECH_APP_VERSION, VALTECH_AUTH_CONFIG, VALTECH_COMPANY_LINKS, VALTECH_CONTENT_CONFIG, VALTECH_DEBUG_CONSOLE, VALTECH_DEFAULT_CONTENT, VALTECH_DONATION_CONFIG, VALTECH_FEEDBACK_CONFIG, VALTECH_FIREBASE_CONFIG, VALTECH_FOOTER_I18N, VALTECH_FOOTER_LOGO, VALTECH_LANGUAGE_SELECTOR, VALTECH_LEGAL_CONFIG, VALTECH_NETWORK_ERROR_KEY, VALTECH_SETTINGS_MENU_LINKS, VALTECH_SITE_PATHS, VALTECH_SOCIAL_LINKS, VALTECH_SPLASH_SCREEN, VALTECH_WEB_BASE_URLS, VERSION, ValtechErrorService, WizardComponent, WizardFooterComponent, applyDefaultValueToControl, authGuard, authInterceptor, authPasswordValidator, beautifyLegalArticle, blogPost, buildCompanyFooterProps, buildFooterLinks, buildLegalLinkResolver, buildPath, buildSettingsCards, button, collections, connectPageRefresh, createErrorStateProps, createFirebaseConfig, createGlowCardProps, createInitialPaginationState, createNumberFromToField, createPermissionLabeler, createRefreshableStream, createTitleProps, docs, errorLoggingInterceptor, extractPathParams, generatePatternTiles, generateRandomTile, getAppInfo, getAppVersion, getCollectionPath, getDocumentId, getTimeOfDayKey, goToTop, guestGuard, hasEmulators, iconButton, interpretError, isAtEnd, isCollectionPath, isDocumentPath, isEmulatorMode, isIonicColor, isValidPath, joinPath, maxLength, mulberry32, news, parseMarkdownArticle, permissionGuard, permissionGuardFromRoute, provideLegalContent, provideSplashScreen, provideValtechAboutRoutes, provideValtechAccountRoutes, provideValtechAds, provideValtechApiKeysRoutes, provideValtechAppConfig, provideValtechAppVersion, provideValtechAuth, provideValtechAuthInterceptor, provideValtechContent, provideValtechDebugConsole, provideValtechDonations, provideValtechErrorHandling, provideValtechFeedback, provideValtechFirebase, provideValtechI18n, provideValtechLegal, provideValtechNotificationPreferencesRoutes, provideValtechNotificationsRoutes, provideValtechOrganizationRoutes, provideValtechPermissionsRoutes, provideValtechPreferencesRoutes, provideValtechPresets, provideValtechProfileRoutes, provideValtechSecurityRoutes, provideValtechSettingsRoutes, provideValtechSite, provideValtechSkeleton, query, renderPatternSvgInner, replaceSpecialChars, resolveColor, resolveInputDefaultValue, resolveIonicColor, resolveWebBaseUrl, roleGuard, storagePaths, superAdminGuard, toArticle };
+export { ACTION_CARD_DEFAULTS, AD_SIZE_MAP, API_TABLE_COLUMN_LABELS, ARTICLE_CARD_DEFAULTS, ARTICLE_SPACING, ARTICLE_STRIP_DEFAULTS, AUTH_CTA_DEFAULTS, AVATAR_UPLOAD_DEFAULTS, AboutViewComponent, AccordionComponent, AccountViewComponent, ActionCardComponent, ActionHeaderComponent, ActionType, AdSlotComponent, AdsLoaderService, AdsService, AlertBoxComponent, AnalyticsErrorHandler, AnalyticsRouterTracker, AnalyticsService, AnimatedTerminalComponent, ApiKeyCreateModalComponent, ApiKeyService, ApiKeysModalComponent, ApiKeysViewComponent, AppConfigService, AppVersionService, ArticleBuilder, ArticleCardComponent, ArticleComponent, ArticleStripComponent, AttachmentUploaderComponent, AuthBackgroundComponent, AuthCtaComponent, AuthService, AuthStateService, AuthStorageService, AuthSyncService, AvatarComponent, AvatarUploadComponent, BOTTOM_NAV_DEFAULTS, BannerComponent, BlogPostBuilder, BottomNavComponent, BoxComponent, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, CALLOUT_LABELS, CHEV_KEYS, CIRCLE_KEYS, COMMON_COUNTRY_CODES, COMMON_CURRENCIES, CORNER_KEYS, CTA_CARD_DEFAULTS, CURRENCY_INFO, CardComponent, CardSection, CardType, CardsCarouselComponent, ChangeEmailModalComponent, ChangePasswordModalComponent, CheckInputComponent, CheckboxRadioInputComponent, ChipGroupComponent, CodeDisplayComponent, CommandDisplayComponent, CommentComponent, CommentInputComponent, CommentSectionComponent, CompanyFooterComponent, ComponentStates, ConfirmationDialogService, ContainerComponent, ContentLoaderComponent, ContentReactionComponent, ContentService, ContentTransformer, CookieBannerComponent, CountdownComponent, CreateOrgModalComponent, CtaCardComponent, CurrencyInputComponent, DEFAULT_ADS_CONFIG, DEFAULT_APP_CONFIG_SERVICE_CONFIG, DEFAULT_APP_VERSION_SERVICE_CONFIG, DEFAULT_AUTH_CONFIG, DEFAULT_BACK_HEADER, DEFAULT_BUTTON_PRESETS, DEFAULT_CANCEL_BUTTON, DEFAULT_CHECK_INTERVAL_MS, DEFAULT_CONFIRM_BUTTON, DEFAULT_COUNTDOWN_LABELS, DEFAULT_COUNTDOWN_LABELS_EN, DEFAULT_DEBUG_CONSOLE_CONFIG, DEFAULT_DONATION_CONFIG, DEFAULT_EMPTY_STATE, DEFAULT_EMULATOR_CONFIG, DEFAULT_FEEDBACK_CONFIG, DEFAULT_FEEDBACK_TYPE_OPTIONS, DEFAULT_HOME_HEADER, DEFAULT_INFINITE_LIST_METADATA, DEFAULT_MODAL_CANCEL_BUTTON, DEFAULT_MODAL_CONFIRM_BUTTON, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLATFORMS, DEFAULT_PRESETS, DEFAULT_REFRESHER_METADATA, DEFAULT_SKELETON_CONFIG, DEFAULT_SPLASH_SCREEN_CONFIG, DataTableComponent, DateInputComponent, DatePickerComponent, DateRangeInputComponent, DebugConsoleComponent, DeleteAccountModalComponent, DetailSkeletonComponent, DeviceService, DisplayComponent, DividerComponent, DocsApiTableComponent, DocsBreadcrumbComponent, DocsBuilder, DocsCalloutComponent, DocsCodeExampleComponent, DocsLayoutComponent, DocsNavLinksComponent, DocsNavigationService, DocsPageComponent, DocsSearchComponent, DocsSectionComponent, DocsShellComponent, DocsSidebarComponent, DocsTocComponent, DonationService, DownloadService, EditOrgModalComponent, EmptyStateComponent, ExpandableTextComponent, FEATURES_LIST_DEFAULTS, FUN_MODAL_DEFAULTS, FabComponent, FaqComponent, FeaturesListComponent, FeedbackFormComponent, FeedbackService, FieldListComponent, FileInputComponent, FirebaseService, FirestoreCollectionFactory, FirestoreService, FontSizeOption, FontSizeService, FooterComponent, FooterLinksComponent, FormComponent, FormSkeletonComponent, FunHeaderComponent, FunModalComponent, GlassComponent, GlowCardComponent, GlowComponent, GridSkeletonComponent, HANDOFF_ROUTE_PARAM, HANDOFF_TOKEN_PARAM, HandoffService, HasPermissionDirective, HeaderComponent, HintComponent, HorizontalScrollComponent, HrefComponent, I18nService, IMAGE_DEFAULTS, INITIAL_AUTH_STATE, INITIAL_MFA_STATE, INVITATION_CARD_DEFAULTS, IONIC_COLORS$5 as IONIC_COLORS, Icon, IconComponent, IconService, ImageComponent, ImageCropComponent, ImageService, InAppBrowserService, InfiniteListComponent, InfoComponent, InputI18nHelper, InputType, InvitationCardComponent, InviteMemberModalComponent, ItemListComponent, LANG_STORAGE_KEY$1 as LANG_STORAGE_KEY, LEGAL_CONTENT_CONFIG, LOGIN_DEFAULTS, LandingSplitComponent, LandingStepsComponent, LanguageSelectorComponent, LayeredCardComponent, LegalContentService, LegalLinkService, LinkComponent, LinkProcessorService, LinkedProvidersComponent, LinksAccordionComponent, LinksCakeComponent, ListSkeletonComponent, LoadingDirective, LocalStorageService, LocaleService, LoginAttemptModalComponent, LoginComponent, MEDIA_OBJECT_DEFAULTS, MEMBER_CARD_DEFAULTS, METRIC_CARD_DEFAULTS, MODAL_SIZES, MOTIF_KEYS, MOTION, MaintenancePageComponent, MarkdownArticleParserService, MediaObjectComponent, MemberCardComponent, MemberDetailModalComponent, MemberImportModalComponent, MenuComponent, MessagingService, MetaService, MetricCardComponent, MfaModalComponent, ModalService, ModalShellComponent, MultiSelectSearchComponent, NUM_KEYS, NavigationService, NetworkBannerComponent, NetworkStatusService, NewsBuilder, NoContentComponent, NotesBoxComponent, NotificationActionService, NotificationPreferencesViewComponent, NotificationsService, NotificationsViewComponent, NumberFromToComponent, NumberStepperComponent, OAUTH_PROVIDERS_INFO, OAuthCallbackComponent, OAuthService, OrgInfoSheetComponent, OrgService, OrgSwitchService, OrganizationViewComponent, PATTERN_MOTIFS, PATTERN_PALETTES, PATTERN_STYLE_CONFIGS, PLATFORM_CONFIGS, PageContentComponent, PageLinksComponent, PageRefreshService, PageTemplateComponent, PageWavesComponent, PageWrapperComponent, PaginationComponent, PaginationService, PasswordInputComponent, PatternComponent, PermissionCatalogService, PermissionSelectorComponent, PermissionsViewComponent, PhoneInputComponent, PillComponent, PinInputComponent, PlainCodeBoxComponent, PopoverSelectorComponent, PreferencesService, PreferencesViewComponent, PresetService, PriceTagComponent, ProcessLinksPipe, ProfileSkeletonComponent, ProfileViewComponent, ProgressBarComponent, ProgressRingComponent, ProgressStatusComponent, PrompterComponent, QR_PRESETS, QrCodeComponent, QrGeneratorService, QrScannerComponent, QueryBuilder, QuoteBoxComponent, REQUEST_STATUSES, RadioInputComponent, RangeInputComponent, RatingComponent, RefresherComponent, RequestFirestoreService, RequestFormBuilderService, RequestService, RightsFooterComponent, RotatingTextComponent, SEARCH_HEADER_DEFAULTS, SETTINGS_SECTIONS_CATALOG, SHAPE_KEYS, SHARE_PROFILE_MODAL_DEFAULTS, SKELETON_LAYOUT_DEFAULT_ROWS, SKELETON_PRESETS, SOLID_KEYS, STATS_BAR_DEFAULTS, STROKE_KEYS, SearchHeaderComponent, SearchSelectorComponent, SearchbarComponent, SecurityViewComponent, SegmentControlComponent, SelectSearchComponent, SessionListModalComponent, SessionService, SettingsHubComponent, ShareButtonsComponent, ShareProfileModalComponent, SimpleComponent, SkeletonComponent, SkeletonLayoutComponent, SkeletonService, SplashScreenService, StatsBarComponent, StatsCardComponent, StepperComponent, StorageService, SwipeCarouselComponent, SwitchOrgModalComponent, TRI_KEYS, TabbedContentComponent, TableSkeletonComponent, TabsComponent, Terminal404Component, TestimonialCardComponent, TestimonialCarouselComponent, TextComponent, TextInputComponent, TextareaInputComponent, ThemeOption, ThemeService, TicketCardComponent, TimelineComponent, TitleBlockComponent, TitleComponent, ToastService, ToggleInputComponent, TokenService, ToolbarActionType, ToolbarComponent, TransferOwnershipModalComponent, TranslatePipe, TypedCollection, UPDATE_BANNER_DEFAULT_CONTENT, UPDATE_BANNER_I18N_NAMESPACE, UpdateBannerComponent, UserAvatarComponent, UsernameInputComponent, VALTECH_ADS_CONFIG, VALTECH_APP_CONFIG, VALTECH_APP_VERSION, VALTECH_AUTH_CONFIG, VALTECH_COMPANY_LINKS, VALTECH_CONTENT_CONFIG, VALTECH_DEBUG_CONSOLE, VALTECH_DEFAULT_CONTENT, VALTECH_DONATION_CONFIG, VALTECH_FEEDBACK_CONFIG, VALTECH_FIREBASE_CONFIG, VALTECH_FOOTER_I18N, VALTECH_FOOTER_LOGO, VALTECH_LANGUAGE_SELECTOR, VALTECH_LEGAL_CONFIG, VALTECH_NETWORK_ERROR_KEY, VALTECH_SETTINGS_MENU_LINKS, VALTECH_SITE_PATHS, VALTECH_SOCIAL_LINKS, VALTECH_SPLASH_SCREEN, VALTECH_WEB_BASE_URLS, VERSION, ValtechErrorService, WizardComponent, WizardFooterComponent, applyDefaultValueToControl, authGuard, authInterceptor, authPasswordValidator, beautifyLegalArticle, blogPost, buildCompanyFooterProps, buildFooterLinks, buildLegalLinkResolver, buildPath, buildSettingsCards, button, collections, connectPageRefresh, createErrorStateProps, createFirebaseConfig, createGlowCardProps, createInitialPaginationState, createNumberFromToField, createPageState, createPermissionLabeler, createRefreshableStream, createTitleProps, docs, errorLoggingInterceptor, extractPathParams, generatePatternTiles, generateRandomTile, getAppInfo, getAppVersion, getCollectionPath, getDocumentId, getTimeOfDayKey, goToTop, guestGuard, hasEmulators, iconButton, interpretError, isAtEnd, isCollectionPath, isDocumentPath, isEmulatorMode, isIonicColor, isValidPath, joinPath, maxLength, mulberry32, news, parseMarkdownArticle, permissionGuard, permissionGuardFromRoute, provideLegalContent, provideSplashScreen, provideValtechAboutRoutes, provideValtechAccountRoutes, provideValtechAds, provideValtechApiKeysRoutes, provideValtechAppConfig, provideValtechAppVersion, provideValtechAuth, provideValtechAuthInterceptor, provideValtechContent, provideValtechDebugConsole, provideValtechDonations, provideValtechErrorHandling, provideValtechFeedback, provideValtechFirebase, provideValtechI18n, provideValtechLegal, provideValtechNotificationPreferencesRoutes, provideValtechNotificationsRoutes, provideValtechOrganizationRoutes, provideValtechPermissionsRoutes, provideValtechPreferencesRoutes, provideValtechPresets, provideValtechProfileRoutes, provideValtechSecurityRoutes, provideValtechSettingsRoutes, provideValtechSite, provideValtechSkeleton, query, renderPatternSvgInner, replaceSpecialChars, resolveColor, resolveInputDefaultValue, resolveIonicColor, resolveWebBaseUrl, roleGuard, storagePaths, superAdminGuard, toArticle };
 //# sourceMappingURL=valtech-components.mjs.map