valtech-components 4.0.6 → 4.0.9

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.6';
+const VERSION = '4.0.9';
 
 // Control de estado de refresco (singleton a nivel de módulo)
 let isRefreshing = false;
@@ -9774,7 +9774,7 @@ class BoxComponent {
       }"
     >
       @if (props.icon) {
-        <ion-icon class="icon" [name]="props.icon" (click)="clickHandler()"></ion-icon>
+        <ion-icon class="icon" [name]="props.icon" (click)="clickHandler()" aria-hidden="true"></ion-icon>
       }
       <div
         [ngStyle]="{
@@ -9801,7 +9801,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       }"
     >
       @if (props.icon) {
-        <ion-icon class="icon" [name]="props.icon" (click)="clickHandler()"></ion-icon>
+        <ion-icon class="icon" [name]="props.icon" (click)="clickHandler()" aria-hidden="true"></ion-icon>
       }
       <div
         [ngStyle]="{
@@ -12411,6 +12411,7 @@ class FabComponent {
         [disabled]="resolvedProps.disabled"
         [translucent]="resolvedProps.translucent"
         (click)="onMainClick()"
+        [attr.aria-label]="resolvedProps.ariaLabel || resolvedProps.label || 'Acción'"
       >
         <ion-icon [name]="getMainIcon()" aria-hidden="true"></ion-icon>
       </ion-fab-button>
@@ -12422,6 +12423,7 @@ class FabComponent {
               [color]="action.color || 'light'"
               [disabled]="action.disabled"
               (click)="onActionClick(action)"
+              [attr.aria-label]="action.label || action.token || action.icon"
             >
               <ion-icon [name]="action.icon" aria-hidden="true"></ion-icon>
             </ion-fab-button>
@@ -12441,6 +12443,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         [disabled]="resolvedProps.disabled"
         [translucent]="resolvedProps.translucent"
         (click)="onMainClick()"
+        [attr.aria-label]="resolvedProps.ariaLabel || resolvedProps.label || 'Acción'"
       >
         <ion-icon [name]="getMainIcon()" aria-hidden="true"></ion-icon>
       </ion-fab-button>
@@ -12452,6 +12455,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
               [color]="action.color || 'light'"
               [disabled]="action.disabled"
               (click)="onActionClick(action)"
+              [attr.aria-label]="action.label || action.token || action.icon"
             >
               <ion-icon [name]="action.icon" aria-hidden="true"></ion-icon>
             </ion-fab-button>
@@ -16071,7 +16075,7 @@ class ExpandableTextComponent {
         return this.props.content?.length > (this.props.limit || 100);
     }
     getExpandText() {
-        return this.props.expandText || this.i18n.t('seeMore');
+        return this.props.expandText || this.i18n.t('seeMore') || 'Ver más';
     }
     toggleExpand() {
         this.expanded = !this.expanded;
@@ -16090,7 +16094,13 @@ class ExpandableTextComponent {
         </ion-text>
       </div>
       @if (!expanded && isTruncated) {
-        <button type="button" class="see-more" [style.color]="this.color()" [attr.aria-expanded]="expanded" (click)="toggleExpand()">
+        <button
+          type="button"
+          class="see-more"
+          [style.color]="this.color()"
+          [attr.aria-expanded]="expanded"
+          (click)="toggleExpand()"
+        >
           {{ getExpandText() }}
         </button>
       }
@@ -16109,7 +16119,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </ion-text>
       </div>
       @if (!expanded && isTruncated) {
-        <button type="button" class="see-more" [style.color]="this.color()" [attr.aria-expanded]="expanded" (click)="toggleExpand()">
+        <button
+          type="button"
+          class="see-more"
+          [style.color]="this.color()"
+          [attr.aria-expanded]="expanded"
+          (click)="toggleExpand()"
+        >
           {{ getExpandText() }}
         </button>
       }
@@ -19788,8 +19804,14 @@ class PlainCodeBoxComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PlainCodeBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PlainCodeBoxComponent, isStandalone: true, selector: "val-plain-code-box", inputs: { props: "props" }, viewQueries: [{ propertyName: "codeBlock", first: true, predicate: ["codeBlock"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <div class="code-box-container">
-      <ion-button *ngIf="props.showCopyButton !== false" fill="clear" class="copy-button" (click)="copyCode()">
-        <ion-icon name="copy-outline"></ion-icon>
+      <ion-button
+        *ngIf="props.showCopyButton !== false"
+        fill="clear"
+        class="copy-button"
+        (click)="copyCode()"
+        aria-label="Copiar"
+      >
+        <ion-icon name="copy-outline" slot="icon-only" aria-hidden="true"></ion-icon>
       </ion-button>
       <pre><code [class]="'language-' + (props.language || 'bash')" #codeBlock><ng-container *ngFor="let line of props.lines; let i = index"><span [class]="line.type ? 'line-' + line.type : 'line-normal'">{{ line.text }}</span><br *ngIf="i < props.lines.length - 1">
 </ng-container></code></pre>
@@ -19800,8 +19822,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             type: Component,
             args: [{ selector: 'val-plain-code-box', standalone: true, imports: [CommonModule, IonIcon, IonButton], template: `
     <div class="code-box-container">
-      <ion-button *ngIf="props.showCopyButton !== false" fill="clear" class="copy-button" (click)="copyCode()">
-        <ion-icon name="copy-outline"></ion-icon>
+      <ion-button
+        *ngIf="props.showCopyButton !== false"
+        fill="clear"
+        class="copy-button"
+        (click)="copyCode()"
+        aria-label="Copiar"
+      >
+        <ion-icon name="copy-outline" slot="icon-only" aria-hidden="true"></ion-icon>
       </ion-button>
       <pre><code [class]="'language-' + (props.language || 'bash')" #codeBlock><ng-container *ngFor="let line of props.lines; let i = index"><span [class]="line.type ? 'line-' + line.type : 'line-normal'">{{ line.text }}</span><br *ngIf="i < props.lines.length - 1">
 </ng-container></code></pre>
@@ -21900,7 +21928,7 @@ class CommentComponent {
             }
           } @else {
             <button class="view-replies-button" (click)="onLoadMoreClick()">
-              <ion-icon name="chatbubble-outline"></ion-icon>
+              <ion-icon name="chatbubble-outline" aria-hidden="true"></ion-icon>
               <span>{{ getViewRepliesText() }}</span>
             </button>
           }
@@ -22072,7 +22100,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }
           } @else {
             <button class="view-replies-button" (click)="onLoadMoreClick()">
-              <ion-icon name="chatbubble-outline"></ion-icon>
+              <ion-icon name="chatbubble-outline" aria-hidden="true"></ion-icon>
               <span>{{ getViewRepliesText() }}</span>
             </button>
           }
@@ -24117,11 +24145,11 @@ class NumberStepperComponent {
     }
     /** Get decrement button aria-label with i18n fallback */
     getDecrementLabel() {
-        return this.props.decrementLabel || this.i18n.t('decrease');
+        return this.props.decrementLabel || this.i18n.t('decrease') || 'Disminuir';
     }
     /** Get increment button aria-label with i18n fallback */
     getIncrementLabel() {
-        return this.props.incrementLabel || this.i18n.t('increase');
+        return this.props.incrementLabel || this.i18n.t('increase') || 'Aumentar';
     }
     ngOnInit() {
         // Ensure initial value is within bounds
@@ -24265,7 +24293,7 @@ class NumberStepperComponent {
           (click)="decrement()"
           [attr.aria-label]="getDecrementLabel()"
         >
-          <ion-icon slot="icon-only" name="remove-outline"></ion-icon>
+          <ion-icon slot="icon-only" name="remove-outline" aria-hidden="true"></ion-icon>
         </ion-button>
 
         <div class="value-display">
@@ -24298,16 +24326,14 @@ class NumberStepperComponent {
           (click)="increment()"
           [attr.aria-label]="getIncrementLabel()"
         >
-          <ion-icon slot="icon-only" name="add-outline"></ion-icon>
+          <ion-icon slot="icon-only" name="add-outline" aria-hidden="true"></ion-icon>
         </ion-button>
       </div>
 
       <!-- Price display -->
       @if (props.showTotal && props.unitPrice) {
         <div class="price-display">
-          <span class="price-calculation">
-            {{ currentValue }} × {{ formatPrice(props.unitPrice) }}
-          </span>
+          <span class="price-calculation"> {{ currentValue }} × {{ formatPrice(props.unitPrice) }} </span>
           <span class="price-equals">=</span>
           <span class="price-total">{{ formatPrice(totalPrice) }}</span>
         </div>
@@ -24365,7 +24391,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           (click)="decrement()"
           [attr.aria-label]="getDecrementLabel()"
         >
-          <ion-icon slot="icon-only" name="remove-outline"></ion-icon>
+          <ion-icon slot="icon-only" name="remove-outline" aria-hidden="true"></ion-icon>
         </ion-button>
 
         <div class="value-display">
@@ -24398,16 +24424,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           (click)="increment()"
           [attr.aria-label]="getIncrementLabel()"
         >
-          <ion-icon slot="icon-only" name="add-outline"></ion-icon>
+          <ion-icon slot="icon-only" name="add-outline" aria-hidden="true"></ion-icon>
         </ion-button>
       </div>
 
       <!-- Price display -->
       @if (props.showTotal && props.unitPrice) {
         <div class="price-display">
-          <span class="price-calculation">
-            {{ currentValue }} × {{ formatPrice(props.unitPrice) }}
-          </span>
+          <span class="price-calculation"> {{ currentValue }} × {{ formatPrice(props.unitPrice) }} </span>
           <span class="price-equals">=</span>
           <span class="price-total">{{ formatPrice(totalPrice) }}</span>
         </div>
@@ -25005,7 +25029,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)"
+          [attr.aria-label]="getCtaText() || resolvedProps.cta?.text || 'Ver más'"
+        >
           <span class="glow-card__cta-text">{{ getCtaText() }}</span>
           <ion-icon
             class="glow-card__cta-icon"
@@ -25066,7 +25095,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)"
+          [attr.aria-label]="getCtaText() || resolvedProps.cta?.text || 'Ver más'"
+        >
           <span class="glow-card__cta-text">{{ getCtaText() }}</span>
           <ion-icon
             class="glow-card__cta-icon"
@@ -25912,7 +25946,12 @@ class FooterLinksComponent {
                 class="social-button"
                 [attr.aria-label]="social.name"
               >
-                <ion-icon [name]="social.icon" slot="icon-only" [color]="props.socialIconColor || 'dark'"></ion-icon>
+                <ion-icon
+                  [name]="social.icon"
+                  slot="icon-only"
+                  [color]="props.socialIconColor || 'dark'"
+                  aria-hidden="true"
+                ></ion-icon>
               </ion-button>
             </div>
           </div>
@@ -25975,7 +26014,12 @@ class FooterLinksComponent {
                 class="social-button"
                 [attr.aria-label]="social.name"
               >
-                <ion-icon [name]="social.icon" slot="icon-only" [color]="props.socialIconColor || 'dark'"></ion-icon>
+                <ion-icon
+                  [name]="social.icon"
+                  slot="icon-only"
+                  [color]="props.socialIconColor || 'dark'"
+                  aria-hidden="true"
+                ></ion-icon>
               </ion-button>
             </div>
           </div>
@@ -26079,7 +26123,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 class="social-button"
                 [attr.aria-label]="social.name"
               >
-                <ion-icon [name]="social.icon" slot="icon-only" [color]="props.socialIconColor || 'dark'"></ion-icon>
+                <ion-icon
+                  [name]="social.icon"
+                  slot="icon-only"
+                  [color]="props.socialIconColor || 'dark'"
+                  aria-hidden="true"
+                ></ion-icon>
               </ion-button>
             </div>
           </div>
@@ -26142,7 +26191,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 class="social-button"
                 [attr.aria-label]="social.name"
               >
-                <ion-icon [name]="social.icon" slot="icon-only" [color]="props.socialIconColor || 'dark'"></ion-icon>
+                <ion-icon
+                  [name]="social.icon"
+                  slot="icon-only"
+                  [color]="props.socialIconColor || 'dark'"
+                  aria-hidden="true"
+                ></ion-icon>
               </ion-button>
             </div>
           </div>
@@ -27582,7 +27636,7 @@ class ActionCardComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ActionCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ActionCardComponent, isStandalone: true, selector: "val-action-card", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
-    <article
+    <div
       class="action-card"
       [class.action-card--small]="config().size === 'small'"
       [class.action-card--medium]="config().size === 'medium'"
@@ -27644,13 +27698,13 @@ class ActionCardComponent {
       @if (config().showChevron && !config().disabled) {
         <ion-icon name="chevron-forward-outline" class="action-card__chevron" aria-hidden="true"></ion-icon>
       }
-    </article>
+    </div>
   `, 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ActionCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'val-action-card', standalone: true, imports: [CommonModule, RouterLink, IonIcon, IonRippleEffect], template: `
-    <article
+    <div
       class="action-card"
       [class.action-card--small]="config().size === 'small'"
       [class.action-card--medium]="config().size === 'medium'"
@@ -27712,7 +27766,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       @if (config().showChevron && !config().disabled) {
         <ion-icon name="chevron-forward-outline" class="action-card__chevron" aria-hidden="true"></ion-icon>
       }
-    </article>
+    </div>
   `, 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"] }]
         }], propDecorators: { onClick: [{
                 type: Output
@@ -28033,7 +28087,7 @@ class ArticleCardComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ArticleCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ArticleCardComponent, isStandalone: true, selector: "val-article-card", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
-    <article
+    <div
       class="article-card"
       [class.article-card--bordered]="config().bordered"
       [class.article-card--shadowed]="config().shadowed"
@@ -28073,13 +28127,13 @@ class ArticleCardComponent {
           </p>
         }
       </div>
-    </article>
+    </div>
   `, isInline: true, styles: [":host{display:flex;flex-direction:column}.article-card{position:relative;display:flex;flex:1;flex-direction:column;background:var(--ion-card-background, var(--ion-background-color));border-radius:14px;overflow:hidden;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease;--ripple-color: var(--ion-color-primary)}.article-card--bordered{border:1px solid var(--ion-color-light-shade, rgba(0, 0, 0, .1))}.article-card--shadowed{box-shadow:0 2px 8px #00000014}.article-card--clickable{cursor:pointer}.article-card--clickable:hover{transform:translateY(-3px);box-shadow:0 6px 20px #0000001f}.article-card--clickable:focus-visible{outline:2px solid var(--ion-color-primary);outline-offset:2px}.article-card__media{width:100%;overflow:hidden;background:var(--ion-color-light, #f4f5f8)}.article-card__media img{width:100%;height:100%;object-fit:cover;display:block}.article-card__body{display:flex;flex-direction:column;gap:.5rem;padding:1rem 1.1rem 1.25rem}.article-card__meta{display:flex;align-items:center;gap:.75rem;font-size:.8rem}.article-card__date{color:var(--ion-color-medium)}.article-card__topic{font-weight:600;color:var(--ion-color-primary)}.article-card__title{margin:0;font-size:1.05rem;font-weight:700;line-height:1.35;color:var(--ion-text-color)}.article-card__excerpt{margin:0;font-size:.9rem;line-height:1.5;color:var(--ion-color-medium-shade);display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}:host-context(.dark) .article-card--bordered,:host-context(.ion-palette-dark) .article-card--bordered,:host-context(html.ion-palette-dark) .article-card--bordered,:host-context(body.dark) .article-card--bordered,:host-context([data-theme=dark]) .article-card--bordered{border-color:#ffffff1f}:host-context(.dark) .article-card--shadowed,:host-context(.ion-palette-dark) .article-card--shadowed,:host-context(html.ion-palette-dark) .article-card--shadowed,:host-context(body.dark) .article-card--shadowed,:host-context([data-theme=dark]) .article-card--shadowed{box-shadow:0 2px 8px #0000004d}:host-context(.dark) .article-card--clickable:hover,:host-context(.ion-palette-dark) .article-card--clickable:hover,:host-context(html.ion-palette-dark) .article-card--clickable:hover,:host-context(body.dark) .article-card--clickable:hover,:host-context([data-theme=dark]) .article-card--clickable:hover{box-shadow:0 6px 20px #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: IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ArticleCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'val-article-card', standalone: true, imports: [CommonModule, RouterLink, IonRippleEffect], template: `
-    <article
+    <div
       class="article-card"
       [class.article-card--bordered]="config().bordered"
       [class.article-card--shadowed]="config().shadowed"
@@ -28119,7 +28173,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           </p>
         }
       </div>
-    </article>
+    </div>
   `, styles: [":host{display:flex;flex-direction:column}.article-card{position:relative;display:flex;flex:1;flex-direction:column;background:var(--ion-card-background, var(--ion-background-color));border-radius:14px;overflow:hidden;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease;--ripple-color: var(--ion-color-primary)}.article-card--bordered{border:1px solid var(--ion-color-light-shade, rgba(0, 0, 0, .1))}.article-card--shadowed{box-shadow:0 2px 8px #00000014}.article-card--clickable{cursor:pointer}.article-card--clickable:hover{transform:translateY(-3px);box-shadow:0 6px 20px #0000001f}.article-card--clickable:focus-visible{outline:2px solid var(--ion-color-primary);outline-offset:2px}.article-card__media{width:100%;overflow:hidden;background:var(--ion-color-light, #f4f5f8)}.article-card__media img{width:100%;height:100%;object-fit:cover;display:block}.article-card__body{display:flex;flex-direction:column;gap:.5rem;padding:1rem 1.1rem 1.25rem}.article-card__meta{display:flex;align-items:center;gap:.75rem;font-size:.8rem}.article-card__date{color:var(--ion-color-medium)}.article-card__topic{font-weight:600;color:var(--ion-color-primary)}.article-card__title{margin:0;font-size:1.05rem;font-weight:700;line-height:1.35;color:var(--ion-text-color)}.article-card__excerpt{margin:0;font-size:.9rem;line-height:1.5;color:var(--ion-color-medium-shade);display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}:host-context(.dark) .article-card--bordered,:host-context(.ion-palette-dark) .article-card--bordered,:host-context(html.ion-palette-dark) .article-card--bordered,:host-context(body.dark) .article-card--bordered,:host-context([data-theme=dark]) .article-card--bordered{border-color:#ffffff1f}:host-context(.dark) .article-card--shadowed,:host-context(.ion-palette-dark) .article-card--shadowed,:host-context(html.ion-palette-dark) .article-card--shadowed,:host-context(body.dark) .article-card--shadowed,:host-context([data-theme=dark]) .article-card--shadowed{box-shadow:0 2px 8px #0000004d}:host-context(.dark) .article-card--clickable:hover,:host-context(.ion-palette-dark) .article-card--clickable:hover,:host-context(html.ion-palette-dark) .article-card--clickable:hover,:host-context(body.dark) .article-card--clickable:hover,:host-context([data-theme=dark]) .article-card--clickable:hover{box-shadow:0 6px 20px #0006}\n"] }]
         }], propDecorators: { onClick: [{
                 type: Output
@@ -34314,17 +34368,36 @@ class ToolbarComponent {
     <ion-toolbar [color]="props.color" [class.background]="props.color === 'background'">
       <ng-container *ngIf="props.withBack">
         <ion-buttons class="left-buttons" slot="start" *ngIf="props.withBack">
-          <ion-button fill="clear" (click)="goBack()" [color]="props.textColor" style="margin-left: 8px;">
-            <ion-icon name="chevron-back-outline" [slot]="props.backText ? 'start' : 'icon-only'"></ion-icon>
-            <ion-text *ngIf="props.backText">{{ props.backText }}</ion-text>
+          <ion-button
+            fill="clear"
+            (click)="goBack()"
+            [color]="props.textColor"
+            style="margin-left: 8px;"
+            [attr.aria-label]="props.backText || 'Volver'"
+          >
+            <ion-icon
+              name="chevron-back-outline"
+              [slot]="props.backText ? 'start' : 'icon-only'"
+              aria-hidden="true"
+            ></ion-icon>
+            <ion-text *ngIf="props.backText" aria-hidden="true">{{ props.backText }}</ion-text>
           </ion-button>
         </ion-buttons>
       </ng-container>
       <ng-container *ngIf="props.withActions">
         <ion-buttons slot="end" *ngIf="someInRight() || props.withMenu || props.languageSelector">
           <ng-container *ngFor="let action of rightActions()">
-            <ion-button *ngIf="action.type === actionTypes.ICON" (click)="clickHandler(action.token)">
-              <ion-icon slot="icon-only" [name]="action.description" [color]="props.textColor"></ion-icon>
+            <ion-button
+              *ngIf="action.type === actionTypes.ICON"
+              (click)="clickHandler(action.token)"
+              [attr.aria-label]="action.token"
+            >
+              <ion-icon
+                slot="icon-only"
+                [name]="action.description"
+                [color]="props.textColor"
+                aria-hidden="true"
+              ></ion-icon>
             </ion-button>
             <val-user-avatar
               *ngIf="action.type === actionTypes.AVATAR"
@@ -34356,8 +34429,17 @@ class ToolbarComponent {
         </ion-buttons>
         <ion-buttons slot="start" *ngIf="someInLeft()" style="padding-left: 4px;">
           <ng-container *ngFor="let action of leftActions()">
-            <ion-button *ngIf="action.type === actionTypes.ICON" (click)="clickHandler(action.token)">
-              <ion-icon slot="icon-only" [name]="action.description" [color]="props.textColor"></ion-icon>
+            <ion-button
+              *ngIf="action.type === actionTypes.ICON"
+              (click)="clickHandler(action.token)"
+              [attr.aria-label]="action.token"
+            >
+              <ion-icon
+                slot="icon-only"
+                [name]="action.description"
+                [color]="props.textColor"
+                aria-hidden="true"
+              ></ion-icon>
             </ion-button>
             <val-user-avatar
               *ngIf="action.type === actionTypes.AVATAR"
@@ -34383,7 +34465,7 @@ class ToolbarComponent {
       <!-- experimental -->
       <ng-content select="[toolbar-bottom]"></ng-content>
     </ion-toolbar>
-  `, 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}.left-buttons{margin-left:-1rem}.background{background:var(--ion-background-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { 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: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }, { kind: "component", type: UserAvatarComponent, selector: "val-user-avatar", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: IonMenuButton, selector: "ion-menu-button", inputs: ["autoHide", "color", "disabled", "menu", "mode", "type"] }, { kind: "component", type: LanguageSelectorComponent, selector: "val-language-selector", inputs: ["props"], outputs: ["languageChange"] }] }); }
+  `, 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}.left-buttons{margin-left:-1rem}.background{background:var(--ion-background-color)}:host ion-title{--color: var(--ion-text-color)}:host ion-button{--color: var(--ion-text-color)}:host ion-icon{color:var(--ion-text-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { 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: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }, { kind: "component", type: UserAvatarComponent, selector: "val-user-avatar", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: IonMenuButton, selector: "ion-menu-button", inputs: ["autoHide", "color", "disabled", "menu", "mode", "type"] }, { kind: "component", type: LanguageSelectorComponent, selector: "val-language-selector", inputs: ["props"], outputs: ["languageChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToolbarComponent, decorators: [{
             type: Component,
@@ -34404,17 +34486,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
     <ion-toolbar [color]="props.color" [class.background]="props.color === 'background'">
       <ng-container *ngIf="props.withBack">
         <ion-buttons class="left-buttons" slot="start" *ngIf="props.withBack">
-          <ion-button fill="clear" (click)="goBack()" [color]="props.textColor" style="margin-left: 8px;">
-            <ion-icon name="chevron-back-outline" [slot]="props.backText ? 'start' : 'icon-only'"></ion-icon>
-            <ion-text *ngIf="props.backText">{{ props.backText }}</ion-text>
+          <ion-button
+            fill="clear"
+            (click)="goBack()"
+            [color]="props.textColor"
+            style="margin-left: 8px;"
+            [attr.aria-label]="props.backText || 'Volver'"
+          >
+            <ion-icon
+              name="chevron-back-outline"
+              [slot]="props.backText ? 'start' : 'icon-only'"
+              aria-hidden="true"
+            ></ion-icon>
+            <ion-text *ngIf="props.backText" aria-hidden="true">{{ props.backText }}</ion-text>
           </ion-button>
         </ion-buttons>
       </ng-container>
       <ng-container *ngIf="props.withActions">
         <ion-buttons slot="end" *ngIf="someInRight() || props.withMenu || props.languageSelector">
           <ng-container *ngFor="let action of rightActions()">
-            <ion-button *ngIf="action.type === actionTypes.ICON" (click)="clickHandler(action.token)">
-              <ion-icon slot="icon-only" [name]="action.description" [color]="props.textColor"></ion-icon>
+            <ion-button
+              *ngIf="action.type === actionTypes.ICON"
+              (click)="clickHandler(action.token)"
+              [attr.aria-label]="action.token"
+            >
+              <ion-icon
+                slot="icon-only"
+                [name]="action.description"
+                [color]="props.textColor"
+                aria-hidden="true"
+              ></ion-icon>
             </ion-button>
             <val-user-avatar
               *ngIf="action.type === actionTypes.AVATAR"
@@ -34446,8 +34547,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </ion-buttons>
         <ion-buttons slot="start" *ngIf="someInLeft()" style="padding-left: 4px;">
           <ng-container *ngFor="let action of leftActions()">
-            <ion-button *ngIf="action.type === actionTypes.ICON" (click)="clickHandler(action.token)">
-              <ion-icon slot="icon-only" [name]="action.description" [color]="props.textColor"></ion-icon>
+            <ion-button
+              *ngIf="action.type === actionTypes.ICON"
+              (click)="clickHandler(action.token)"
+              [attr.aria-label]="action.token"
+            >
+              <ion-icon
+                slot="icon-only"
+                [name]="action.description"
+                [color]="props.textColor"
+                aria-hidden="true"
+              ></ion-icon>
             </ion-button>
             <val-user-avatar
               *ngIf="action.type === actionTypes.AVATAR"
@@ -34473,7 +34583,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       <!-- experimental -->
       <ng-content select="[toolbar-bottom]"></ng-content>
     </ion-toolbar>
-  `, 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}.left-buttons{margin-left:-1rem}.background{background:var(--ion-background-color)}\n"] }]
+  `, 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}.left-buttons{margin-left:-1rem}.background{background:var(--ion-background-color)}:host ion-title{--color: var(--ion-text-color)}:host ion-button{--color: var(--ion-text-color)}:host ion-icon{color:var(--ion-text-color)}\n"] }]
         }], ctorParameters: () => [{ type: IconService }], propDecorators: { props: [{
                 type: Input
             }], onClick: [{
@@ -36679,7 +36789,7 @@ class DataTableComponent {
     }
     /** Get actions column label */
     getActionsLabel() {
-        return this.props.actionsLabel || this.i18n.t('actions');
+        return this.props.actionsLabel || this.i18n.t('actions') || 'Acciones';
     }
     /** Get pagination info text */
     getPaginationInfoText() {
@@ -36691,19 +36801,19 @@ class DataTableComponent {
     }
     /** Get first page aria label */
     getFirstPageLabel() {
-        return this.i18n.t('firstPage');
+        return this.i18n.t('firstPage') || 'Primera página';
     }
     /** Get previous page aria label */
     getPreviousPageLabel() {
-        return this.i18n.t('previousPage');
+        return this.i18n.t('previousPage') || 'Página anterior';
     }
     /** Get next page aria label */
     getNextPageLabel() {
-        return this.i18n.t('nextPage');
+        return this.i18n.t('nextPage') || 'Página siguiente';
     }
     /** Get last page aria label */
     getLastPageLabel() {
-        return this.i18n.t('lastPage');
+        return this.i18n.t('lastPage') || 'Última página';
     }
     get pageSizeOptions() {
         return this.props.pagination?.pageSizeOptions || DEFAULT_PAGE_SIZE_OPTIONS;
@@ -36955,7 +37065,7 @@ class DataTableComponent {
                 </th>
               }
               @if (props.showSelectionColumn && props.selection?.mode === 'single') {
-                <th class="selection-cell"></th>
+                <th class="selection-cell" scope="col" aria-label="Selección"></th>
               }
 
               <!-- Row number column -->
@@ -36984,10 +37094,12 @@ class DataTableComponent {
                         <span class="sort-icons">
                           <ion-icon
                             name="chevron-up-outline"
+                            aria-hidden="true"
                             [class.active]="currentSort?.column === column.key && currentSort?.direction === 'asc'"
                           ></ion-icon>
                           <ion-icon
                             name="chevron-down-outline"
+                            aria-hidden="true"
                             [class.active]="currentSort?.column === column.key && currentSort?.direction === 'desc'"
                           ></ion-icon>
                         </span>
@@ -37312,7 +37424,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 </th>
               }
               @if (props.showSelectionColumn && props.selection?.mode === 'single') {
-                <th class="selection-cell"></th>
+                <th class="selection-cell" scope="col" aria-label="Selección"></th>
               }
 
               <!-- Row number column -->
@@ -37341,10 +37453,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         <span class="sort-icons">
                           <ion-icon
                             name="chevron-up-outline"
+                            aria-hidden="true"
                             [class.active]="currentSort?.column === column.key && currentSort?.direction === 'asc'"
                           ></ion-icon>
                           <ion-icon
                             name="chevron-down-outline"
+                            aria-hidden="true"
                             [class.active]="currentSort?.column === column.key && currentSort?.direction === 'desc'"
                           ></ion-icon>
                         </span>
@@ -39050,7 +39164,7 @@ class InfiniteListComponent {
                 lastItem: this.items()[this.items().length - 1],
             };
             const result = await this.executeLoad(params);
-            this.items.update((current) => [...current, ...result.items]);
+            this.items.update(current => [...current, ...result.items]);
             this.hasMoreBottom.set(result.hasMore);
             this.currentPage++;
             this.currentCursor = result.cursor;
@@ -39077,7 +39191,7 @@ class InfiniteListComponent {
                 firstItem: this.items()[0],
             };
             const result = await this.executeLoad(params);
-            this.items.update((current) => [...result.items, ...current]);
+            this.items.update(current => [...result.items, ...current]);
             this.hasMoreTop.set(result.hasMore);
             this.state.set('idle');
             this.itemsChange.emit(this.items());
@@ -39120,17 +39234,17 @@ class InfiniteListComponent {
     }
     /** Agregar items al inicio */
     prependItems(newItems) {
-        this.items.update((current) => [...newItems, ...current]);
+        this.items.update(current => [...newItems, ...current]);
         this.itemsChange.emit(this.items());
     }
     /** Agregar items al final */
     appendItems(newItems) {
-        this.items.update((current) => [...current, ...newItems]);
+        this.items.update(current => [...current, ...newItems]);
         this.itemsChange.emit(this.items());
     }
     /** Actualizar un item por indice */
     updateItem(index, item) {
-        this.items.update((current) => {
+        this.items.update(current => {
             const updated = [...current];
             updated[index] = item;
             return updated;
@@ -39139,7 +39253,7 @@ class InfiniteListComponent {
     }
     /** Remover un item por indice */
     removeItem(index) {
-        this.items.update((current) => current.filter((_, i) => i !== index));
+        this.items.update(current => current.filter((_, i) => i !== index));
         this.itemsChange.emit(this.items());
     }
     /** Handler para evento de infinite scroll */
@@ -39226,7 +39340,10 @@ class InfiniteListComponent {
           <div class="infinite-list-error">
             @if (mergedProps.errorState?.template) {
               <ng-container
-                *ngTemplateOutlet="mergedProps.errorState.template; context: { error: error(), retry: retry.bind(this) }"
+                *ngTemplateOutlet="
+                  mergedProps.errorState.template;
+                  context: { error: error(), retry: retry.bind(this) }
+                "
               ></ng-container>
             } @else {
               @if (mergedProps.errorState?.icon) {
@@ -39247,8 +39364,14 @@ class InfiniteListComponent {
 
         <!-- Items list -->
         @if (items().length > 0) {
-          <div class="infinite-list-items" [class.with-dividers]="mergedProps.showDividers">
-            @for (item of items(); track trackByFn($index, item); let i = $index; let first = $first; let last = $last) {
+          <div class="infinite-list-items" role="presentation" [class.with-dividers]="mergedProps.showDividers">
+            @for (
+              item of items();
+              track trackByFn($index, item);
+              let i = $index;
+              let first = $first;
+              let last = $last
+            ) {
               <article
                 class="infinite-list-item"
                 [attr.aria-setsize]="mergedProps.dataSource.totalCount || null"
@@ -39384,7 +39507,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           <div class="infinite-list-error">
             @if (mergedProps.errorState?.template) {
               <ng-container
-                *ngTemplateOutlet="mergedProps.errorState.template; context: { error: error(), retry: retry.bind(this) }"
+                *ngTemplateOutlet="
+                  mergedProps.errorState.template;
+                  context: { error: error(), retry: retry.bind(this) }
+                "
               ></ng-container>
             } @else {
               @if (mergedProps.errorState?.icon) {
@@ -39405,8 +39531,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
         <!-- Items list -->
         @if (items().length > 0) {
-          <div class="infinite-list-items" [class.with-dividers]="mergedProps.showDividers">
-            @for (item of items(); track trackByFn($index, item); let i = $index; let first = $first; let last = $last) {
+          <div class="infinite-list-items" role="presentation" [class.with-dividers]="mergedProps.showDividers">
+            @for (
+              item of items();
+              track trackByFn($index, item);
+              let i = $index;
+              let first = $first;
+              let last = $last
+            ) {
               <article
                 class="infinite-list-item"
                 [attr.aria-setsize]="mergedProps.dataSource.totalCount || null"
@@ -40381,7 +40513,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\" [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"] }] }); }
+    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\" aria-hidden=\"true\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithGoogle') }} } @case ('apple') {\n      <ion-icon slot=\"start\" name=\"logo-apple\" aria-hidden=\"true\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithApple') }} } @case ('microsoft') {\n      <ion-icon slot=\"start\" name=\"logo-microsoft\" aria-hidden=\"true\"></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\" [attr.aria-label]=\"t('close')\" (click)=\"closeMFAVerifyModal()\">\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]=\"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,
@@ -40397,7 +40529,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\" [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"] }]
+                    ], 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\" aria-hidden=\"true\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithGoogle') }} } @case ('apple') {\n      <ion-icon slot=\"start\" name=\"logo-apple\" aria-hidden=\"true\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithApple') }} } @case ('microsoft') {\n      <ion-icon slot=\"start\" name=\"logo-microsoft\" aria-hidden=\"true\"></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\" [attr.aria-label]=\"t('close')\" (click)=\"closeMFAVerifyModal()\">\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]=\"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: [{
@@ -41054,7 +41186,7 @@ class BottomNavComponent {
               type="button"
             >
               <ion-ripple-effect></ion-ripple-effect>
-              <ion-icon [name]="config().fab!.icon"></ion-icon>
+              <ion-icon [name]="config().fab!.icon" aria-hidden="true"></ion-icon>
             </button>
           } @else if (item) {
             <!-- Tab Item -->
@@ -41072,7 +41204,7 @@ class BottomNavComponent {
               <ion-ripple-effect></ion-ripple-effect>
 
               <div class="bottom-nav__tab-icon">
-                <ion-icon [name]="getIcon(item)"></ion-icon>
+                <ion-icon [name]="getIcon(item)" aria-hidden="true"></ion-icon>
 
                 <!-- Badge -->
                 @if (item.badge) {
@@ -41128,7 +41260,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
               type="button"
             >
               <ion-ripple-effect></ion-ripple-effect>
-              <ion-icon [name]="config().fab!.icon"></ion-icon>
+              <ion-icon [name]="config().fab!.icon" aria-hidden="true"></ion-icon>
             </button>
           } @else if (item) {
             <!-- Tab Item -->
@@ -41146,7 +41278,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
               <ion-ripple-effect></ion-ripple-effect>
 
               <div class="bottom-nav__tab-icon">
-                <ion-icon [name]="getIcon(item)"></ion-icon>
+                <ion-icon [name]="getIcon(item)" aria-hidden="true"></ion-icon>
 
                 <!-- Badge -->
                 @if (item.badge) {
@@ -41668,7 +41800,7 @@ class AvatarUploadComponent {
         <!-- Edit Button -->
         @if (config().editable && !loading()) {
           <button class="edit-button" type="button" (click)="openFilePicker()" [attr.aria-label]="editButtonLabel()">
-            <ion-icon name="camera-outline"></ion-icon>
+            <ion-icon name="camera-outline" aria-hidden="true"></ion-icon>
           </button>
         }
 
@@ -41775,7 +41907,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         <!-- Edit Button -->
         @if (config().editable && !loading()) {
           <button class="edit-button" type="button" (click)="openFilePicker()" [attr.aria-label]="editButtonLabel()">
-            <ion-icon name="camera-outline"></ion-icon>
+            <ion-icon name="camera-outline" aria-hidden="true"></ion-icon>
           </button>
         }
 
@@ -66100,8 +66232,8 @@ class AuthCtaComponent {
             ...AUTH_CTA_DEFAULTS,
             ...this.props(),
         }));
-        this.loginLabel = computed(() => this.config().loginLabel ?? this.i18n.t('AuthCta.login'));
-        this.registerLabel = computed(() => this.config().registerLabel ?? this.i18n.t('AuthCta.register'));
+        this.loginLabel = computed(() => (this.config().loginLabel ?? this.i18n.t('AuthCta.login')) || 'Iniciar sesión');
+        this.registerLabel = computed(() => (this.config().registerLabel ?? this.i18n.t('AuthCta.register')) || 'Registrarse');
         this.resolvedBg = computed(() => {
             const bg = this.config().backgroundColor;
             if (!bg)