valtech-components 2.0.1035 → 4.0.0

package/fesm2022/valtech-components.mjs

@@ -23,7 +23,7 @@ import { IonicModule, ToastController, NavController } from '@ionic/angular';
 import { isSupported, getMessaging as getMessaging$1 } from 'firebase/messaging';
 import { getApps, getApp, initializeApp as initializeApp$1 } from 'firebase/app';
 import * as i2$1 from '@ionic/angular/standalone';
-import { AlertController, IonAvatar, IonCard, IonIcon, IonButton, IonSpinner, IonText, IonModal, IonHeader, IonToolbar, IonContent, IonButtons, IonTitle, IonProgressBar, IonSkeletonText, IonFab, IonFabButton, IonFabList, IonLabel, IonCardContent, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCheckbox, IonTextarea, IonDatetime, IonInput, IonSelect, IonSelectOption, IonPopover, IonList, IonItem, IonRadioGroup, IonRadio, IonRange, IonSearchbar, IonSegment, IonSegmentButton, IonToggle, IonRippleEffect, IonAccordion, IonAccordionGroup, IonTabBar, IonTabButton, IonBadge, IonBreadcrumb, IonBreadcrumbs, IonChip, IonNote, IonDatetimeButton, ToastController as ToastController$1, IonCol, IonRow, IonRefresher, IonRefresherContent, IonMenuButton, IonFooter, IonListHeader, IonInfiniteScroll, IonInfiniteScrollContent, IonGrid, MenuController, IonMenu, IonMenuToggle, IonSplitPane } from '@ionic/angular/standalone';
+import { AlertController, IonAvatar, IonCard, IonIcon, IonButton, IonSpinner, IonText, IonModal, IonHeader, IonToolbar, IonContent, IonButtons, IonTitle, IonProgressBar, IonSkeletonText, IonFab, IonFabButton, IonFabList, IonLabel, IonCardContent, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCheckbox, IonRadio, IonRadioGroup, IonTextarea, IonDatetime, IonSelect, IonSelectOption, IonPopover, IonList, IonItem, IonInput, IonRange, IonSearchbar, IonSegment, IonSegmentButton, IonToggle, IonRippleEffect, IonAccordion, IonAccordionGroup, IonTabBar, IonTabButton, IonBadge, IonBreadcrumb, IonBreadcrumbs, IonChip, IonNote, IonDatetimeButton, ToastController as ToastController$1, IonCol, IonRow, IonRefresher, IonRefresherContent, IonMenuButton, IonFooter, IonListHeader, IonInfiniteScroll, IonInfiniteScrollContent, IonGrid, MenuController, IonMenu, IonMenuToggle, IonSplitPane } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import { addOutline, addCircleOutline, alertOutline, alertCircleOutline, arrowBackOutline, arrowForwardOutline, arrowDownOutline, settings, settingsOutline, checkmarkCircleOutline, ellipsisHorizontalOutline, notifications, notificationsOutline, openOutline, closeOutline, chatbubblesOutline, shareOutline, heart, heartOutline, home, homeOutline, eyeOffOutline, eyeOutline, scanOutline, chevronDownOutline, chevronForwardOutline, checkmarkOutline, clipboardOutline, copyOutline, filterOutline, locationOutline, calendarOutline, businessOutline, logoTwitter, logoInstagram, logoLinkedin, logoYoutube, logoTiktok, logoFacebook, logoGoogle, createOutline, trashOutline, playOutline, peopleOutline, phonePortraitOutline, refreshOutline, documentTextOutline, lockClosedOutline, informationCircleOutline, logoNpm, removeOutline, optionsOutline, personOutline, shieldCheckmarkOutline, keyOutline, desktopOutline, logOutOutline, cloudDownloadOutline, cloudOutline, gitBranchOutline, layersOutline, serverOutline, warningOutline, bulbOutline, lockOpenOutline, diamondOutline, add, close, share, create, trash, star, camera, mic, send, downloadOutline, chevronDown, language, globeOutline, checkmark, list, grid, apps, menu, search, person, helpCircle, informationCircle, documentText, mail, calendar, folder, chevronForward, ellipsisHorizontal, chevronBack, playBack, playForward, ellipse, starOutline, starHalf, heartHalf, checkmarkCircle, timeOutline, flag, trendingUp, trendingDown, remove, analytics, people, cash, cart, eye, chatbubbleOutline, thumbsUpOutline, thumbsUp, happyOutline, happy, sadOutline, sad, chevronUp, pin, pencil, callOutline, logoWhatsapp, paperPlaneOutline, mailOutline, chevronDownCircleOutline, closeCircle, alertCircle, logoApple, logoMicrosoft, linkOutline, unlinkOutline, cloudOfflineOutline, documentOutline, attachOutline, cameraOutline, closeCircleOutline, imageOutline, chevronBackOutline, sendOutline, chatbubbleEllipsesOutline, swapVerticalOutline, chevronUpOutline, searchOutline, cartOutline, chatbubble, compass, compassOutline, gridOutline, listOutline, folderOutline, documents, documentsOutline, statsChart, statsChartOutline, laptopOutline, swapHorizontalOutline, cloudUploadOutline, notificationsOffOutline, alarmOutline, chatboxEllipsesOutline, checkmarkDoneOutline, cogOutline, shareSocialOutline, helpCircleOutline, menuOutline, stopCircleOutline, videocamOffOutline } from 'ionicons/icons';
 import { Browser } from '@capacitor/browser';
@@ -56,7 +56,7 @@ import { BrowserMultiFormatReader } from '@zxing/browser';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '2.0.1035';
+const VERSION = '4.0.0';
 
 // Control de estado de refresco (singleton a nivel de módulo)
 let isRefreshing = false;
@@ -9442,6 +9442,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
+/**
+ * Presets de botón por defecto provistos por la librería.
+ *
+ * Son el reemplazo recomendado de las factories deprecadas de
+ * `atoms/button/factory.ts`: en vez de construir el `ButtonMetadata` a mano,
+ * el consumer usa `<val-button preset="primary-round" [props]="{ text }">`.
+ *
+ * Cada preset define solo el ESTILO reutilizable (color/fill/shape/expand/size).
+ * El `text`, `type`, `state`, `icon` y `href` se pasan por `[props]` en cada uso.
+ *
+ * Disponibles sin configuración: `PresetService` los siembra de fábrica y
+ * `provideValtechPresets` los preserva (las apps EXTIENDEN estos defaults en
+ * vez de pisarlos). Una app puede sobrescribir un preset declarando la misma
+ * clave bajo `button` en su `APP_PRESETS`.
+ */
+const DEFAULT_BUTTON_PRESETS = {
+    // Primary
+    primary: { color: 'primary', fill: 'solid' },
+    'primary-round': { color: 'primary', fill: 'solid', shape: 'round' },
+    'primary-block': { color: 'primary', fill: 'solid', expand: 'block' },
+    'primary-full': { color: 'primary', fill: 'solid', expand: 'full' },
+    // Secondary
+    secondary: { color: 'secondary', fill: 'solid' },
+    'secondary-round': { color: 'secondary', fill: 'solid', shape: 'round' },
+    // Generic solid (color-agnostic — color comes from val-button default / props)
+    solid: { fill: 'solid' },
+    'solid-round': { fill: 'solid', shape: 'round' },
+    'solid-block': { color: 'primary', fill: 'solid', expand: 'block' },
+    // Outline / Clear
+    outline: { fill: 'outline' },
+    'outline-round': { fill: 'outline', shape: 'round' },
+    clear: { fill: 'clear' },
+    'clear-round': { fill: 'clear', shape: 'round' },
+    // Intent
+    danger: { color: 'danger', fill: 'solid' },
+    'danger-round': { color: 'danger', fill: 'solid', shape: 'round' },
+};
+/**
+ * Presets que la librería siembra de fábrica en `PresetService`.
+ * Hoy solo botón; agregar otros componentes acá a medida que se definan.
+ */
+const DEFAULT_PRESETS = {
+    button: DEFAULT_BUTTON_PRESETS,
+};
+
 /**
  * Servicio para gestionar presets de componentes.
  *
@@ -9459,7 +9504,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  */
 class PresetService {
     constructor() {
-        this._presets = signal({});
+        // Seeded with library defaults (e.g. button presets). Apps EXTEND these via
+        // registerPresets (merge), so the defaults survive app-level registration.
+        this._presets = signal(structuredClone(DEFAULT_PRESETS));
     }
     /**
      * Obtiene un preset específico para un componente
@@ -9499,6 +9546,10 @@ class PresetService {
      *
      * @param presets Configuración de presets
      *
+     * Hace MERGE por componente sobre lo ya registrado (incluidos los defaults
+     * de la librería), así que las apps EXTIENDEN los presets existentes en vez
+     * de reemplazarlos. Para sobrescribir un preset, declarar la misma clave.
+     *
      * @example
      * presets.registerPresets({
      *   button: {
@@ -9510,13 +9561,19 @@ class PresetService {
      * });
      */
     registerPresets(presets) {
-        this._presets.set(presets);
+        this._presets.update(current => {
+            const merged = { ...current };
+            for (const [component, componentPresets] of Object.entries(presets)) {
+                merged[component] = { ...(current[component] ?? {}), ...componentPresets };
+            }
+            return merged;
+        });
     }
     /**
      * Agrega presets para un componente específico (merge con existentes)
      */
     registerComponentPresets(component, presets) {
-        this._presets.update((current) => ({
+        this._presets.update(current => ({
             ...current,
             [component]: {
                 ...current[component],
@@ -9680,95 +9737,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Output
             }] } });
 
-/* eslint-disable no-underscore-dangle */
-/**
- * Service for registering and managing custom Ionicons icons in the application.
- * Automatically registers a set of commonly used icons on initialization.
- */
-class IconService {
-    /**
-     * Registers a set of Ionicons icons for use throughout the app.
-     */
-    constructor() {
-        addIcons({
-            addOutline,
-            addCircleOutline,
-            alertOutline,
-            alertCircleOutline,
-            arrowBackOutline,
-            arrowForwardOutline,
-            arrowDownOutline,
-            settings,
-            settingsOutline,
-            checkmarkCircleOutline,
-            ellipsisHorizontalOutline,
-            notifications,
-            notificationsOutline,
-            openOutline,
-            closeOutline,
-            chatbubblesOutline,
-            shareOutline,
-            heart,
-            heartOutline,
-            home,
-            homeOutline,
-            eyeOffOutline,
-            eyeOutline,
-            scanOutline,
-            chevronDownOutline,
-            chevronForwardOutline,
-            checkmarkOutline,
-            clipboardOutline,
-            copyOutline,
-            filterOutline,
-            locationOutline,
-            calendarOutline,
-            businessOutline,
-            logoTwitter,
-            logoInstagram,
-            logoLinkedin,
-            logoYoutube,
-            logoTiktok,
-            logoFacebook,
-            logoGoogle,
-            createOutline,
-            trashOutline,
-            playOutline,
-            peopleOutline,
-            phonePortraitOutline,
-            refreshOutline,
-            documentTextOutline,
-            lockClosedOutline,
-            informationCircleOutline,
-            logoNpm,
-            removeOutline,
-            optionsOutline,
-            personOutline,
-            shieldCheckmarkOutline,
-            keyOutline,
-            desktopOutline,
-            logOutOutline,
-            cloudDownloadOutline,
-            cloudOutline,
-            gitBranchOutline,
-            layersOutline,
-            serverOutline,
-            warningOutline,
-            bulbOutline,
-            lockOpenOutline,
-            diamondOutline,
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IconService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IconService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IconService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [] });
-
 /**
  * val-box
  *
@@ -9783,17 +9751,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * @output onClick - Emits when the box or its icon is clicked
  */
 class BoxComponent {
-    constructor(icon) {
+    constructor() {
         /**
          * Event emitted when the box or its icon is clicked.
          */
         this.onClick = new EventEmitter();
     }
-    ngOnInit() { }
     clickHandler() {
         this.onClick.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BoxComponent, deps: [{ token: IconService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: BoxComponent, isStandalone: true, selector: "val-box", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
     <ion-card
       class="box"
@@ -9845,7 +9812,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       </div>
     </ion-card>
   `, 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)}.bordered{border:.0625rem solid var(--ion-color-medium)}.box{width:100%;margin:0rem;border-radius:0rem;box-shadow:none;padding:0rem}.box.rounded{border-radius:1.125rem}.icon{cursor:pointer;margin:0rem;padding:0rem;position:absolute;right:.25rem;top:.25rem;font-size:1.5rem}@media (min-width: 768px){.icon{right:.5rem;top:.5rem;font-size:2rem}}.left-border{border-left:.1875rem solid #dde3ed}.left-border.small{border-width:.1875rem}.left-border.medium{border-width:.375rem}.left-border.large{border-width:.4375rem}.left-border.xlarge{border-width:.5rem}.transparent{--background: transparent}\n"] }]
-        }], ctorParameters: () => [{ type: IconService }], propDecorators: { props: [{
+        }], propDecorators: { props: [{
                 type: Input
             }], onClick: [{
                 type: Output
@@ -10133,6 +10100,95 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }] });
 
+/* eslint-disable no-underscore-dangle */
+/**
+ * Service for registering and managing custom Ionicons icons in the application.
+ * Automatically registers a set of commonly used icons on initialization.
+ */
+class IconService {
+    /**
+     * Registers a set of Ionicons icons for use throughout the app.
+     */
+    constructor() {
+        addIcons({
+            addOutline,
+            addCircleOutline,
+            alertOutline,
+            alertCircleOutline,
+            arrowBackOutline,
+            arrowForwardOutline,
+            arrowDownOutline,
+            settings,
+            settingsOutline,
+            checkmarkCircleOutline,
+            ellipsisHorizontalOutline,
+            notifications,
+            notificationsOutline,
+            openOutline,
+            closeOutline,
+            chatbubblesOutline,
+            shareOutline,
+            heart,
+            heartOutline,
+            home,
+            homeOutline,
+            eyeOffOutline,
+            eyeOutline,
+            scanOutline,
+            chevronDownOutline,
+            chevronForwardOutline,
+            checkmarkOutline,
+            clipboardOutline,
+            copyOutline,
+            filterOutline,
+            locationOutline,
+            calendarOutline,
+            businessOutline,
+            logoTwitter,
+            logoInstagram,
+            logoLinkedin,
+            logoYoutube,
+            logoTiktok,
+            logoFacebook,
+            logoGoogle,
+            createOutline,
+            trashOutline,
+            playOutline,
+            peopleOutline,
+            phonePortraitOutline,
+            refreshOutline,
+            documentTextOutline,
+            lockClosedOutline,
+            informationCircleOutline,
+            logoNpm,
+            removeOutline,
+            optionsOutline,
+            personOutline,
+            shieldCheckmarkOutline,
+            keyOutline,
+            desktopOutline,
+            logOutOutline,
+            cloudDownloadOutline,
+            cloudOutline,
+            gitBranchOutline,
+            layersOutline,
+            serverOutline,
+            warningOutline,
+            bulbOutline,
+            lockOpenOutline,
+            diamondOutline,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IconService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IconService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IconService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
 /**
  * Configuracion por defecto para header tipo 'home'
  */
@@ -10556,222 +10612,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Output
             }] } });
 
-const Icon = (name, slot) => {
-    return {
-        name,
-        slot,
-    };
-};
-/* name convention: COLOR FILL SIZE [optionals: SHAPE EXPAND ICON HREF/DOWNLOAD] TYPE */
-const BaseDefault = (text, type) => {
-    return {
-        color: 'primary',
-        state: 'ENABLED',
-        text,
-        size: 'default',
-        type,
-    };
-};
-const ClearDefault = (text, type) => {
-    return { ...BaseDefault(text, type), fill: 'clear' };
-};
-const ClearDefaultRound = (text, type) => {
-    return { ...ClearDefault(text, type), shape: 'round' };
-};
-const SolidDefault = (text, type) => {
-    return { ...BaseDefault(text, type), fill: 'solid' };
-};
-const SolidDefaultRound = (text, type) => {
-    return { ...SolidDefault(text, type), shape: 'round' };
-};
-const OutlineDefault = (text, type) => {
-    return { ...BaseDefault(text, type), fill: 'outline' };
-};
-const OutlineDefaultRound = (text, type) => {
-    return { ...OutlineDefault(text, type), shape: 'round' };
-};
-const ClearDefaultFull = (text, type) => {
-    return { ...ClearDefault(text, type), expand: 'full' };
-};
-const ClearDefaultRoundFull = (text, type) => {
-    return { ...ClearDefaultRound(text, type), expand: 'full' };
-};
-const ClearDefaultBlock = (text, type) => {
-    return { ...ClearDefault(text, type), expand: 'block' };
-};
-const ClearDefaultRoundBlock = (text, type) => {
-    return { ...ClearDefaultRound(text, type), expand: 'block' };
-};
-const SolidDefaultFull = (text, type) => {
-    return { ...SolidDefault(text, type), expand: 'full' };
-};
-const SolidDefaultRoundFull = (text, type) => {
-    return { ...SolidDefaultRound(text, type), expand: 'full' };
-};
-const SolidDefaultBlock = (text, type) => {
-    return { ...SolidDefault(text, type), expand: 'block' };
-};
-const SolidDefaultRoundBlock = (text, type) => {
-    return { ...SolidDefaultRound(text, type), expand: 'block' };
-};
-const OutlineDefaultFull = (text, type) => {
-    return { ...OutlineDefault(text, type), expand: 'full' };
-};
-const OutlineDefaultRoundFull = (text, type) => {
-    return { ...OutlineDefaultRound(text, type), expand: 'full' };
-};
-const OutlineDefaultBlock = (text, type) => {
-    return { ...OutlineDefault(text, type), expand: 'block' };
-};
-const OutlineDefaultRoundBlock = (text, type) => {
-    return { ...OutlineDefaultRound(text, type), expand: 'block' };
-};
-const SolidDefaultButton = (text) => {
-    return SolidDefault(text, 'button');
-};
-const SolidSmallButton = (text) => {
-    return { ...SolidDefault(text, 'button'), size: 'small' };
-};
-const SolidLargeButton = (text) => {
-    return { ...SolidDefault(text, 'button'), size: 'large' };
-};
-const SolidDefaultRoundButton = (text) => {
-    return SolidDefaultRound(text, 'button');
-};
-const SolidSmallRoundButton = (text) => {
-    return { ...SolidDefaultRound(text, 'button'), size: 'small' };
-};
-const SolidLargeRoundButton = (text) => {
-    return { ...SolidDefaultRound(text, 'button'), size: 'large' };
-};
-const SolidFullButton = (text) => {
-    return SolidDefaultFull(text, 'button');
-};
-const SolidBlockButton = (text) => {
-    return SolidDefaultBlock(text, 'button');
-};
-/** PRIMARY */
-const PrimarySolidDefaultRoundButton = (text) => {
-    return { ...SolidDefaultRoundButton(text), color: 'primary' };
-};
-const PrimarySolidDefaultRoundIconButton = (text, icon) => {
-    return { ...PrimarySolidDefaultRoundButton(text), icon };
-};
-const PrimarySolidDefaultRoundHrefButton = (text, href, target) => {
-    return { ...PrimarySolidDefaultRoundButton(text), href, target };
-};
-const PrimarySolidDefaultRoundIconHrefButton = (text, icon, href, target) => {
-    return { ...PrimarySolidDefaultRoundIconButton(text, icon), href, target };
-};
-const PrimarySolidSmallRoundButton = (text) => {
-    return { ...SolidSmallRoundButton(text), color: 'primary' };
-};
-const PrimarySolidSmallRoundIconButton = (text, icon) => {
-    return { ...PrimarySolidSmallRoundButton(text), icon };
-};
-const PrimarySolidSmallRoundHrefButton = (text, href, target) => {
-    return { ...PrimarySolidSmallRoundButton(text), href, target };
-};
-const PrimarySolidSmallRoundIconHrefButton = (text, icon, href, target) => {
-    return { ...PrimarySolidSmallRoundIconButton(text, icon), href, target };
-};
-const PrimarySolidLargeRoundButton = (text) => {
-    return { ...SolidLargeRoundButton(text), color: 'primary' };
-};
-const PrimarySolidLargeRoundIconButton = (text, icon) => {
-    return { ...PrimarySolidLargeRoundButton(text), icon };
-};
-const PrimarySolidLargeRoundHrefButton = (text, href, target) => {
-    return { ...PrimarySolidLargeRoundButton(text), href, target };
-};
-const PrimarySolidLargeRoundIconHrefButton = (text, icon, href, target) => {
-    return { ...PrimarySolidLargeRoundIconButton(text, icon), href, target };
-};
-const PrimarySolidBlockButton = (text) => {
-    return { ...SolidBlockButton(text), color: 'primary' };
-};
-const PrimarySolidBlockIconButton = (text, icon) => {
-    return { ...PrimarySolidBlockButton(text), icon };
-};
-const PrimarySolidBlockHrefButton = (text, href, target) => {
-    return { ...PrimarySolidBlockButton(text), href, target };
-};
-const PrimarySolidBlockIconHrefButton = (text, icon, href, target) => {
-    return { ...PrimarySolidBlockIconButton(text, icon), href, target };
-};
-const PrimarySolidFullButton = (text) => {
-    return { ...SolidFullButton(text), color: 'primary' };
-};
-const PrimarySolidFullIconButton = (text, icon) => {
-    return { ...PrimarySolidFullButton(text), icon };
-};
-const PrimarySolidFullHrefButton = (text, href, target) => {
-    return { ...PrimarySolidFullButton(text), href, target };
-};
-const PrimarySolidFullIconHrefButton = (text, icon, href, target) => {
-    return { ...PrimarySolidFullIconButton(text, icon), href, target };
-};
-/** SECONDARY */
-const SecondarySolidDefaultRoundButton = (text) => {
-    return { ...SolidDefaultRoundButton(text), color: 'secondary' };
-};
-const SecondarySolidDefaultRoundIconButton = (text, icon) => {
-    return { ...SecondarySolidDefaultRoundButton(text), icon };
-};
-const SecondarySolidDefaultRoundHrefButton = (text, href, target) => {
-    return { ...SecondarySolidDefaultRoundButton(text), href, target };
-};
-const SecondarySolidDefaultRoundIconHrefButton = (text, icon, href, target) => {
-    return { ...SecondarySolidDefaultRoundIconButton(text, icon), href, target };
-};
-const SecondarySolidSmallRoundButton = (text) => {
-    return { ...SolidSmallRoundButton(text), color: 'secondary' };
-};
-const SecondarySolidSmallRoundIconButton = (text, icon) => {
-    return { ...SecondarySolidSmallRoundButton(text), icon };
-};
-const SecondarySolidSmallRoundHrefButton = (text, href, target) => {
-    return { ...SecondarySolidSmallRoundButton(text), href, target };
-};
-const SecondarySolidSmallRoundIconHrefButton = (text, icon, href, target) => {
-    return { ...SecondarySolidSmallRoundIconButton(text, icon), href, target };
-};
-const SecondarySolidLargeRoundButton = (text) => {
-    return { ...SolidLargeRoundButton(text), color: 'secondary' };
-};
-const SecondarySolidLargeRoundIconButton = (text, icon) => {
-    return { ...SecondarySolidLargeRoundButton(text), icon };
-};
-const SecondarySolidLargeRoundHrefButton = (text, href, target) => {
-    return { ...SecondarySolidLargeRoundButton(text), href, target };
-};
-const SecondarySolidLargeRoundIconHrefButton = (text, icon, href, target) => {
-    return { ...SecondarySolidLargeRoundIconButton(text, icon), href, target };
-};
-const SecondarySolidFullButton = (text) => {
-    return { ...SolidFullButton(text), color: 'secondary' };
-};
-const SecondarySolidFullIconButton = (text, icon) => {
-    return { ...SecondarySolidFullButton(text), icon };
-};
-const SecondarySolidFullHrefButton = (text, href, target) => {
-    return { ...SecondarySolidFullButton(text), href, target };
-};
-const SecondarySolidFullIconHrefButton = (text, icon, href, target) => {
-    return { ...SecondarySolidFullIconButton(text, icon), href, target };
-};
-const SecondarySolidBlockButton = (text) => {
-    return { ...SolidBlockButton(text), color: 'secondary' };
-};
-const SecondarySolidBlockIconButton = (text, icon) => {
-    return { ...SecondarySolidBlockButton(text), icon };
-};
-const SecondarySolidBlockHrefButton = (text, href, target) => {
-    return { ...SecondarySolidBlockButton(text), href, target };
-};
-const SecondarySolidBlockIconHrefButton = (text, icon, href, target) => {
-    return { ...SecondarySolidBlockIconButton(text, icon), href, target };
-};
+const Icon = (name, slot) => ({ name, slot });
+/**
+ * Single source of truth for building a `ButtonMetadata`.
+ *
+ * Applies the shared defaults (`primary` color, `ENABLED` state, `default`
+ * size, `button` type) and merges any overrides. This builder (and
+ * `iconButton`) is the canonical way to construct a button in code; for
+ * templates prefer a registered `<val-button preset="...">` (channel `button`
+ * of the PresetService).
+ *
+ * @example
+ * button({ text: 'Save', fill: 'solid', shape: 'round', expand: 'full' })
+ */
+const button = (overrides = {}) => ({
+    color: 'primary',
+    state: 'ENABLED',
+    size: 'default',
+    type: 'button',
+    text: '',
+    ...overrides,
+});
+/** Convenience builder for a button with a leading/trailing icon. */
+const iconButton = (text, icon, overrides = {}) => button({ text, icon, ...overrides });
 
 /**
  * val-display
@@ -10831,15 +10694,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * @input props: DividerMetadata - Configuration for the divider (size, color, fill)
  */
 class DividerComponent {
-    constructor() { }
-    ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DividerComponent, isStandalone: true, selector: "val-divider", inputs: { props: "props" }, ngImport: i0, template: ` <div [ngClass]="['divider', props.size, props.color, props.fill]"></div> `, isInline: true, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.solid{border-top:.0625rem solid #878ca0}.gradient{height:.125rem}.gradient.primary{background:linear-gradient(to right,var(--ion-color-primary),var(--ion-color-light))}.gradient.secondary{background:linear-gradient(to right,var(--ion-color-secondary),var(--ion-color-light))}.gradient.dark{background:linear-gradient(to right,var(--ion-color-dark),var(--ion-color-light))}.gradient.light{background:linear-gradient(to right,var(--ion-color-light),#ffffff)}.gradient.medium{background:linear-gradient(to right,var(--ion-color-medium),#ffffff)}.small{margin:1rem}.medium{margin:1.5rem 1rem}.large{margin:2.25rem 1rem}.primary{border-color:var(--ion-color-primary)}.secondary{border-color:var(--ion-color-secondary)}.dark{border-color:var(--ion-color-dark)}.light{border-color:var(--ion-color-light)}.medium{border-color:var(--ion-color-medium)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DividerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'val-divider', standalone: true, imports: [CommonModule], template: ` <div [ngClass]="['divider', props.size, props.color, props.fill]"></div> `, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.solid{border-top:.0625rem solid #878ca0}.gradient{height:.125rem}.gradient.primary{background:linear-gradient(to right,var(--ion-color-primary),var(--ion-color-light))}.gradient.secondary{background:linear-gradient(to right,var(--ion-color-secondary),var(--ion-color-light))}.gradient.dark{background:linear-gradient(to right,var(--ion-color-dark),var(--ion-color-light))}.gradient.light{background:linear-gradient(to right,var(--ion-color-light),#ffffff)}.gradient.medium{background:linear-gradient(to right,var(--ion-color-medium),#ffffff)}.small{margin:1rem}.medium{margin:1.5rem 1rem}.large{margin:2.25rem 1rem}.primary{border-color:var(--ion-color-primary)}.secondary{border-color:var(--ion-color-secondary)}.dark{border-color:var(--ion-color-dark)}.light{border-color:var(--ion-color-light)}.medium{border-color:var(--ion-color-medium)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
+        }], propDecorators: { props: [{
                 type: Input
             }] } });
 
@@ -10859,7 +10720,6 @@ class HrefComponent {
         this.downloadService = downloadService;
         this.onClick = new EventEmitter();
     }
-    ngOnInit() { }
     getFileName() {
         return this.downloadService.getFileNameFromUrl(this.props.url);
     }
@@ -11007,6 +10867,19 @@ class ImageComponent {
         this.isPreviewOpen = true;
         this.resetZoom();
     }
+    /**
+     * Keyboard activation of the preview trigger. Space must preventDefault to
+     * avoid scrolling the page when the focused image is activated.
+     */
+    onPreviewKeydown(event) {
+        if (!this.props.previewMode)
+            return;
+        const key = event.key;
+        if (key === ' ' || key === 'Spacebar') {
+            event.preventDefault();
+        }
+        this.openPreview();
+    }
     closePreview() {
         this.isPreviewOpen = false;
     }
@@ -11170,6 +11043,11 @@ class ImageComponent {
             [style.max-width.rem]="props.width"
             [style.height.px]="props.height"
             (click)="props.previewMode ? openPreview() : null"
+            (keydown.enter)="props.previewMode ? openPreview() : null"
+            (keydown.space)="onPreviewKeydown($event)"
+            [attr.role]="props.previewMode ? 'button' : null"
+            [attr.tabindex]="props.previewMode ? 0 : null"
+            [attr.aria-haspopup]="props.previewMode ? 'dialog' : null"
           />
         } @else {
           <img
@@ -11190,6 +11068,11 @@ class ImageComponent {
             [style.max-width.rem]="props.width"
             [style.height.px]="props.height"
             (click)="props.previewMode ? openPreview() : null"
+            (keydown.enter)="props.previewMode ? openPreview() : null"
+            (keydown.space)="onPreviewKeydown($event)"
+            [attr.role]="props.previewMode ? 'button' : null"
+            [attr.tabindex]="props.previewMode ? 0 : null"
+            [attr.aria-haspopup]="props.previewMode ? 'dialog' : null"
           />
         }
       </div>
@@ -11274,7 +11157,7 @@ class ImageComponent {
         </ion-content>
       </ng-template>
     </ion-modal>
-  `, 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)}.val-image-container{margin:0;padding:0;max-width:100%}.val-image-container--left{margin-right:auto;text-align:left}.val-image-container--center{margin-left:auto;margin-right:auto;text-align:center}.val-image-container--right{margin-left:auto;text-align:right}.val-image-wrapper{display:inline-block;position:relative}.val-image{width:100%;height:auto;display:block;opacity:1;max-width:100%}.val-image.center{margin:0 auto}.val-image.rounded{border-radius:.5rem}.val-image.circular{border-radius:50%;aspect-ratio:1;object-fit:cover}.val-image.box{border-radius:0}.val-image.bordered{border:.0625rem solid var(--ion-color-medium)}.val-image.shaded{box-shadow:.1875rem .625rem .5rem #1219541a}body.dark .val-image.dark,html.ion-palette-dark .val-image.dark,body[data-theme=dark] .val-image.dark{filter:invert(1)}.val-image.limited{max-width:100%}@media (max-width: 768px){.val-image .val-image-wrapper.small{width:40%}.val-image .val-image-wrapper.medium{width:60%}.val-image .val-image-wrapper.large{width:80%}.val-image .val-image-wrapper.xlarge{width:100%}}.val-image.small{width:30%}.val-image.medium{width:50%}.val-image.large{width:70%}.val-image.xlarge{width:100%}.val-image-caption{margin-top:.5rem;color:var(--ion-color-medium-shade, #666);font-style:italic;line-height:1.4}.val-image-caption--small{font-size:.75rem}.val-image-caption--medium{font-size:.875rem}.val-image-caption--large{font-size:1rem}.val-image.visible{animation:appearance ease-in 1s forwards}@keyframes appearance{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.val-image-container{flex-shrink:0;align-self:flex-start}.flexbox-container .val-image-container--left{align-self:flex-start}.flexbox-container .val-image-container--center{align-self:center}.flexbox-container .val-image-container--right{align-self:flex-end}.val-image--preview-enabled{cursor:pointer;transition:opacity .2s ease,transform .2s ease}.val-image--preview-enabled:hover{opacity:.9;transform:scale(1.02)}ion-modal ion-content{position:relative;--padding-start: 0;--padding-end: 0;--padding-top: 0;--padding-bottom: 0}.val-image-preview-controls{position:absolute;bottom:20px;left:50%;transform:translate(-50%);z-index:1000;display:flex;align-items:center;gap:15px;background:rgba(var(--ion-background-color-rgb, 255, 255, 255),.9);padding:4px 8px;border-radius:25px;backdrop-filter:blur(10px);box-shadow:0 4px 20px #00000026}.val-image-preview-zoom-level{font-size:.875rem;font-weight:600;min-width:50px;text-align:center;color:var(--ion-text-color)}.val-image-preview-viewport{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;touch-action:none}.val-image-preview-img{max-width:90vw;max-height:90vh;object-fit:contain;transition:transform .1s ease-out;transform-origin:center center;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}@media (max-width: 768px){.val-image-preview-controls{bottom:10px;padding:8px 16px;gap:10px}.val-image-preview-zoom-level{font-size:.75rem;min-width:40px}.val-image-preview-img{max-width:95vw;max-height:85vh}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { 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: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }] }); }
+  `, 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)}.val-image-container{margin:0;padding:0;max-width:100%}.val-image-container--left{margin-right:auto;text-align:left}.val-image-container--center{margin-left:auto;margin-right:auto;text-align:center}.val-image-container--right{margin-left:auto;text-align:right}.val-image-wrapper{display:inline-block;position:relative}.val-image{width:100%;height:auto;display:block;opacity:1;max-width:100%}.val-image.center{margin:0 auto}.val-image.rounded{border-radius:.5rem}.val-image.circular{border-radius:50%;aspect-ratio:1;object-fit:cover}.val-image.box{border-radius:0}.val-image.bordered{border:.0625rem solid var(--ion-color-medium)}.val-image.shaded{box-shadow:.1875rem .625rem .5rem #1219541a}body.dark .val-image.dark,html.ion-palette-dark .val-image.dark,body[data-theme=dark] .val-image.dark{filter:invert(1)}.val-image.limited{max-width:100%}@media (max-width: 768px){.val-image .val-image-wrapper.small{width:40%}.val-image .val-image-wrapper.medium{width:60%}.val-image .val-image-wrapper.large{width:80%}.val-image .val-image-wrapper.xlarge{width:100%}}.val-image.small{width:30%}.val-image.medium{width:50%}.val-image.large{width:70%}.val-image.xlarge{width:100%}.val-image-caption{margin-top:.5rem;color:var(--ion-color-medium-shade, #666);font-style:italic;line-height:1.4}.val-image-caption--small{font-size:.75rem}.val-image-caption--medium{font-size:.875rem}.val-image-caption--large{font-size:1rem}.val-image.visible{animation:appearance ease-in 1s forwards}@keyframes appearance{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.val-image-container{flex-shrink:0;align-self:flex-start}.flexbox-container .val-image-container--left{align-self:flex-start}.flexbox-container .val-image-container--center{align-self:center}.flexbox-container .val-image-container--right{align-self:flex-end}.val-image--preview-enabled{cursor:pointer;transition:opacity .2s ease,transform .2s ease}.val-image--preview-enabled:hover{opacity:.9;transform:scale(1.02)}.val-image--preview-enabled:focus-visible:focus{outline:none}.val-image--preview-enabled:focus-visible:focus-visible{outline:.125rem solid var(--ion-color-primary, #7026df);outline-offset:2px;border-radius:inherit}ion-modal ion-content{position:relative;--padding-start: 0;--padding-end: 0;--padding-top: 0;--padding-bottom: 0}.val-image-preview-controls{position:absolute;bottom:20px;left:50%;transform:translate(-50%);z-index:1000;display:flex;align-items:center;gap:15px;background:rgba(var(--ion-background-color-rgb, 255, 255, 255),.9);padding:4px 8px;border-radius:25px;backdrop-filter:blur(10px);box-shadow:0 4px 20px #00000026}.val-image-preview-zoom-level{font-size:.875rem;font-weight:600;min-width:50px;text-align:center;color:var(--ion-text-color)}.val-image-preview-viewport{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;touch-action:none}.val-image-preview-img{max-width:90vw;max-height:90vh;object-fit:contain;transition:transform .1s ease-out;transform-origin:center center;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}@media (max-width: 768px){.val-image-preview-controls{bottom:10px;padding:8px 16px;gap:10px}.val-image-preview-zoom-level{font-size:.75rem;min-width:40px}.val-image-preview-img{max-width:95vw;max-height:85vh}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { 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: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ImageComponent, decorators: [{
             type: Component,
@@ -11313,6 +11196,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             [style.max-width.rem]="props.width"
             [style.height.px]="props.height"
             (click)="props.previewMode ? openPreview() : null"
+            (keydown.enter)="props.previewMode ? openPreview() : null"
+            (keydown.space)="onPreviewKeydown($event)"
+            [attr.role]="props.previewMode ? 'button' : null"
+            [attr.tabindex]="props.previewMode ? 0 : null"
+            [attr.aria-haspopup]="props.previewMode ? 'dialog' : null"
           />
         } @else {
           <img
@@ -11333,6 +11221,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             [style.max-width.rem]="props.width"
             [style.height.px]="props.height"
             (click)="props.previewMode ? openPreview() : null"
+            (keydown.enter)="props.previewMode ? openPreview() : null"
+            (keydown.space)="onPreviewKeydown($event)"
+            [attr.role]="props.previewMode ? 'button' : null"
+            [attr.tabindex]="props.previewMode ? 0 : null"
+            [attr.aria-haspopup]="props.previewMode ? 'dialog' : null"
           />
         }
       </div>
@@ -11417,7 +11310,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </ion-content>
       </ng-template>
     </ion-modal>
-  `, 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)}.val-image-container{margin:0;padding:0;max-width:100%}.val-image-container--left{margin-right:auto;text-align:left}.val-image-container--center{margin-left:auto;margin-right:auto;text-align:center}.val-image-container--right{margin-left:auto;text-align:right}.val-image-wrapper{display:inline-block;position:relative}.val-image{width:100%;height:auto;display:block;opacity:1;max-width:100%}.val-image.center{margin:0 auto}.val-image.rounded{border-radius:.5rem}.val-image.circular{border-radius:50%;aspect-ratio:1;object-fit:cover}.val-image.box{border-radius:0}.val-image.bordered{border:.0625rem solid var(--ion-color-medium)}.val-image.shaded{box-shadow:.1875rem .625rem .5rem #1219541a}body.dark .val-image.dark,html.ion-palette-dark .val-image.dark,body[data-theme=dark] .val-image.dark{filter:invert(1)}.val-image.limited{max-width:100%}@media (max-width: 768px){.val-image .val-image-wrapper.small{width:40%}.val-image .val-image-wrapper.medium{width:60%}.val-image .val-image-wrapper.large{width:80%}.val-image .val-image-wrapper.xlarge{width:100%}}.val-image.small{width:30%}.val-image.medium{width:50%}.val-image.large{width:70%}.val-image.xlarge{width:100%}.val-image-caption{margin-top:.5rem;color:var(--ion-color-medium-shade, #666);font-style:italic;line-height:1.4}.val-image-caption--small{font-size:.75rem}.val-image-caption--medium{font-size:.875rem}.val-image-caption--large{font-size:1rem}.val-image.visible{animation:appearance ease-in 1s forwards}@keyframes appearance{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.val-image-container{flex-shrink:0;align-self:flex-start}.flexbox-container .val-image-container--left{align-self:flex-start}.flexbox-container .val-image-container--center{align-self:center}.flexbox-container .val-image-container--right{align-self:flex-end}.val-image--preview-enabled{cursor:pointer;transition:opacity .2s ease,transform .2s ease}.val-image--preview-enabled:hover{opacity:.9;transform:scale(1.02)}ion-modal ion-content{position:relative;--padding-start: 0;--padding-end: 0;--padding-top: 0;--padding-bottom: 0}.val-image-preview-controls{position:absolute;bottom:20px;left:50%;transform:translate(-50%);z-index:1000;display:flex;align-items:center;gap:15px;background:rgba(var(--ion-background-color-rgb, 255, 255, 255),.9);padding:4px 8px;border-radius:25px;backdrop-filter:blur(10px);box-shadow:0 4px 20px #00000026}.val-image-preview-zoom-level{font-size:.875rem;font-weight:600;min-width:50px;text-align:center;color:var(--ion-text-color)}.val-image-preview-viewport{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;touch-action:none}.val-image-preview-img{max-width:90vw;max-height:90vh;object-fit:contain;transition:transform .1s ease-out;transform-origin:center center;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}@media (max-width: 768px){.val-image-preview-controls{bottom:10px;padding:8px 16px;gap:10px}.val-image-preview-zoom-level{font-size:.75rem;min-width:40px}.val-image-preview-img{max-width:95vw;max-height:85vh}}\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)}.val-image-container{margin:0;padding:0;max-width:100%}.val-image-container--left{margin-right:auto;text-align:left}.val-image-container--center{margin-left:auto;margin-right:auto;text-align:center}.val-image-container--right{margin-left:auto;text-align:right}.val-image-wrapper{display:inline-block;position:relative}.val-image{width:100%;height:auto;display:block;opacity:1;max-width:100%}.val-image.center{margin:0 auto}.val-image.rounded{border-radius:.5rem}.val-image.circular{border-radius:50%;aspect-ratio:1;object-fit:cover}.val-image.box{border-radius:0}.val-image.bordered{border:.0625rem solid var(--ion-color-medium)}.val-image.shaded{box-shadow:.1875rem .625rem .5rem #1219541a}body.dark .val-image.dark,html.ion-palette-dark .val-image.dark,body[data-theme=dark] .val-image.dark{filter:invert(1)}.val-image.limited{max-width:100%}@media (max-width: 768px){.val-image .val-image-wrapper.small{width:40%}.val-image .val-image-wrapper.medium{width:60%}.val-image .val-image-wrapper.large{width:80%}.val-image .val-image-wrapper.xlarge{width:100%}}.val-image.small{width:30%}.val-image.medium{width:50%}.val-image.large{width:70%}.val-image.xlarge{width:100%}.val-image-caption{margin-top:.5rem;color:var(--ion-color-medium-shade, #666);font-style:italic;line-height:1.4}.val-image-caption--small{font-size:.75rem}.val-image-caption--medium{font-size:.875rem}.val-image-caption--large{font-size:1rem}.val-image.visible{animation:appearance ease-in 1s forwards}@keyframes appearance{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.val-image-container{flex-shrink:0;align-self:flex-start}.flexbox-container .val-image-container--left{align-self:flex-start}.flexbox-container .val-image-container--center{align-self:center}.flexbox-container .val-image-container--right{align-self:flex-end}.val-image--preview-enabled{cursor:pointer;transition:opacity .2s ease,transform .2s ease}.val-image--preview-enabled:hover{opacity:.9;transform:scale(1.02)}.val-image--preview-enabled:focus-visible:focus{outline:none}.val-image--preview-enabled:focus-visible:focus-visible{outline:.125rem solid var(--ion-color-primary, #7026df);outline-offset:2px;border-radius:inherit}ion-modal ion-content{position:relative;--padding-start: 0;--padding-end: 0;--padding-top: 0;--padding-bottom: 0}.val-image-preview-controls{position:absolute;bottom:20px;left:50%;transform:translate(-50%);z-index:1000;display:flex;align-items:center;gap:15px;background:rgba(var(--ion-background-color-rgb, 255, 255, 255),.9);padding:4px 8px;border-radius:25px;backdrop-filter:blur(10px);box-shadow:0 4px 20px #00000026}.val-image-preview-zoom-level{font-size:.875rem;font-weight:600;min-width:50px;text-align:center;color:var(--ion-text-color)}.val-image-preview-viewport{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;touch-action:none}.val-image-preview-img{max-width:90vw;max-height:90vh;object-fit:contain;transition:transform .1s ease-out;transform-origin:center center;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}@media (max-width: 768px){.val-image-preview-controls{bottom:10px;padding:8px 16px;gap:10px}.val-image-preview-zoom-level{font-size:.75rem;min-width:40px}.val-image-preview-img{max-width:95vw;max-height:85vh}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input
             }], onKeyDown: [{
@@ -15220,6 +15113,11 @@ class CardComponent {
     clickHandler(section, token) {
         this.onClick.emit({ section, token });
     }
+    /** Activación por teclado con Space — previene el scroll de la página. */
+    onKeyActivate(event, section, token) {
+        event.preventDefault();
+        this.clickHandler(section, token);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CardComponent, isStandalone: true, selector: "val-card", inputs: { preset: "preset", props: "props" }, outputs: { onClick: "onClick" }, usesOnChanges: true, ngImport: i0, template: `
     <ion-card *ngIf="resolvedProps.type === types.native">
@@ -15246,8 +15144,13 @@ class CardComponent {
 
     <ion-card
       *ngIf="resolvedProps.type === types.tappable"
-      (click)="clickHandler(sections.content, resolvedProps.token)"
       class="tapable"
+      role="button"
+      tabindex="0"
+      [attr.aria-label]="resolvedProps.title || resolvedProps.overtitle || null"
+      (click)="clickHandler(sections.content, resolvedProps.token)"
+      (keydown.enter)="clickHandler(sections.content, resolvedProps.token)"
+      (keydown.space)="onKeyActivate($event, sections.content, resolvedProps.token)"
     >
       @if (resolvedProps.image) {
         <img [alt]="resolvedProps.title || 'Card image'" [src]="resolvedProps.image" />
@@ -15262,8 +15165,14 @@ class CardComponent {
 
     <ion-card
       *ngIf="resolvedProps.type === types.checker"
-      (click)="clickHandler(sections.content, resolvedProps.token)"
       class="tapable"
+      role="button"
+      tabindex="0"
+      [attr.aria-pressed]="!!resolvedProps.selected"
+      [attr.aria-label]="resolvedProps.title || resolvedProps.overtitle || null"
+      (click)="clickHandler(sections.content, resolvedProps.token)"
+      (keydown.enter)="clickHandler(sections.content, resolvedProps.token)"
+      (keydown.space)="onKeyActivate($event, sections.content, resolvedProps.token)"
     >
       <ion-card-header *ngIf="resolvedProps.title || resolvedProps.overtitle" class="checker">
         <div>
@@ -15339,7 +15248,15 @@ class CardComponent {
         </ion-buttons>
       </ion-card-header>
 
-      <div class="tapable" (click)="clickHandler(sections.content, resolvedProps.token)">
+      <div
+        class="tapable"
+        role="button"
+        tabindex="0"
+        [attr.aria-label]="resolvedProps.title || resolvedProps.overtitle || null"
+        (click)="clickHandler(sections.content, resolvedProps.token)"
+        (keydown.enter)="clickHandler(sections.content, resolvedProps.token)"
+        (keydown.space)="onKeyActivate($event, sections.content, resolvedProps.token)"
+      >
         <ion-card-header *ngIf="resolvedProps.title || resolvedProps.overtitle" class="complex-header">
           <div>
             <ion-card-subtitle *ngIf="resolvedProps.overtitle">{{ resolvedProps.overtitle }}</ion-card-subtitle>
@@ -15393,7 +15310,7 @@ class CardComponent {
         </ng-container>
       </ion-buttons>
     </ion-card>
-  `, 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-card.tapable{transition:transform .3s ease,box-shadow .3s ease}ion-card.tapable:hover{transform:scale(1.01);box-shadow:.1875rem .625rem .5rem #1219541a}.tapable{cursor:pointer}.checker{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.complex-header{padding:10px;display:flex;flex-direction:row;justify-content:space-between;align-items:center}.complex-content{padding-left:10px;padding-top:4px;padding-bottom:10px}.complex{border-radius:16px}img{width:100%;height:auto;max-height:250px;object-fit:cover;display:block;border-radius:24px}.card-actions{display:flex;gap:.5rem;padding:0 16px 16px;flex-wrap:wrap}\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: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: AvatarComponent, selector: "val-avatar", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { 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"] }] }); }
+  `, 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-card.tapable{transition:transform .3s ease,box-shadow .3s ease}ion-card.tapable:hover{transform:scale(1.01);box-shadow:.1875rem .625rem .5rem #1219541a}.tapable{cursor:pointer}.tapable:focus{outline:none}.tapable:focus-visible{outline:.125rem solid var(--ion-color-primary, #7026df);outline-offset:2px;border-radius:inherit}.checker{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.complex-header{padding:10px;display:flex;flex-direction:row;justify-content:space-between;align-items:center}.complex-content{padding-left:10px;padding-top:4px;padding-bottom:10px}.complex{border-radius:16px}img{width:100%;height:auto;max-height:250px;object-fit:cover;display:block;border-radius:24px}.card-actions{display:flex;gap:.5rem;padding:0 16px 16px;flex-wrap:wrap}\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: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: AvatarComponent, selector: "val-avatar", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
@@ -15437,8 +15354,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
     <ion-card
       *ngIf="resolvedProps.type === types.tappable"
-      (click)="clickHandler(sections.content, resolvedProps.token)"
       class="tapable"
+      role="button"
+      tabindex="0"
+      [attr.aria-label]="resolvedProps.title || resolvedProps.overtitle || null"
+      (click)="clickHandler(sections.content, resolvedProps.token)"
+      (keydown.enter)="clickHandler(sections.content, resolvedProps.token)"
+      (keydown.space)="onKeyActivate($event, sections.content, resolvedProps.token)"
     >
       @if (resolvedProps.image) {
         <img [alt]="resolvedProps.title || 'Card image'" [src]="resolvedProps.image" />
@@ -15453,8 +15375,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
     <ion-card
       *ngIf="resolvedProps.type === types.checker"
-      (click)="clickHandler(sections.content, resolvedProps.token)"
       class="tapable"
+      role="button"
+      tabindex="0"
+      [attr.aria-pressed]="!!resolvedProps.selected"
+      [attr.aria-label]="resolvedProps.title || resolvedProps.overtitle || null"
+      (click)="clickHandler(sections.content, resolvedProps.token)"
+      (keydown.enter)="clickHandler(sections.content, resolvedProps.token)"
+      (keydown.space)="onKeyActivate($event, sections.content, resolvedProps.token)"
     >
       <ion-card-header *ngIf="resolvedProps.title || resolvedProps.overtitle" class="checker">
         <div>
@@ -15530,7 +15458,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </ion-buttons>
       </ion-card-header>
 
-      <div class="tapable" (click)="clickHandler(sections.content, resolvedProps.token)">
+      <div
+        class="tapable"
+        role="button"
+        tabindex="0"
+        [attr.aria-label]="resolvedProps.title || resolvedProps.overtitle || null"
+        (click)="clickHandler(sections.content, resolvedProps.token)"
+        (keydown.enter)="clickHandler(sections.content, resolvedProps.token)"
+        (keydown.space)="onKeyActivate($event, sections.content, resolvedProps.token)"
+      >
         <ion-card-header *ngIf="resolvedProps.title || resolvedProps.overtitle" class="complex-header">
           <div>
             <ion-card-subtitle *ngIf="resolvedProps.overtitle">{{ resolvedProps.overtitle }}</ion-card-subtitle>
@@ -15584,8 +15520,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </ng-container>
       </ion-buttons>
     </ion-card>
-  `, 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-card.tapable{transition:transform .3s ease,box-shadow .3s ease}ion-card.tapable:hover{transform:scale(1.01);box-shadow:.1875rem .625rem .5rem #1219541a}.tapable{cursor:pointer}.checker{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.complex-header{padding:10px;display:flex;flex-direction:row;justify-content:space-between;align-items:center}.complex-content{padding-left:10px;padding-top:4px;padding-bottom:10px}.complex{border-radius:16px}img{width:100%;height:auto;max-height:250px;object-fit:cover;display:block;border-radius:24px}.card-actions{display:flex;gap:.5rem;padding:0 16px 16px;flex-wrap:wrap}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { preset: [{
+  `, 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-card.tapable{transition:transform .3s ease,box-shadow .3s ease}ion-card.tapable:hover{transform:scale(1.01);box-shadow:.1875rem .625rem .5rem #1219541a}.tapable{cursor:pointer}.tapable:focus{outline:none}.tapable:focus-visible{outline:.125rem solid var(--ion-color-primary, #7026df);outline-offset:2px;border-radius:inherit}.checker{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.complex-header{padding:10px;display:flex;flex-direction:row;justify-content:space-between;align-items:center}.complex-content{padding-left:10px;padding-top:4px;padding-bottom:10px}.complex{border-radius:16px}img{width:100%;height:auto;max-height:250px;object-fit:cover;display:block;border-radius:24px}.card-actions{display:flex;gap:.5rem;padding:0 16px 16px;flex-wrap:wrap}\n"] }]
+        }], propDecorators: { preset: [{
                 type: Input
             }], props: [{
                 type: Input
@@ -15690,52 +15626,43 @@ class CheckboxRadioInputComponent {
         this.states = ComponentStates;
     }
     ngOnInit() { }
-    isSelected(option) {
-        return this.props.control?.value === option.id;
-    }
-    onOptionSelect(option, event) {
-        if (event.detail.checked) {
-            // Seleccionar esta opción
-            this.props.control?.setValue(option.id);
-        }
-        else {
-            // Si se deselecciona la opción actual, limpiar
-            if (this.props.control?.value === option.id) {
-                this.props.control?.setValue(null);
-            }
-        }
+    onSelectionChange(event) {
+        // ion-radio-group con allowEmptySelection: re-clickear la opción activa la
+        // deselecciona (value === undefined) → mapear a null para limpiar el control.
+        const value = event.detail.value;
+        this.props.control?.setValue(value ?? null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CheckboxRadioInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CheckboxRadioInputComponent, isStandalone: true, selector: "val-checkbox-radio-input", inputs: { props: "props" }, ngImport: i0, template: `
-    <div class="checkbox-radio-group">
+    <ion-radio-group
+      class="checkbox-radio-group"
+      [value]="props.control?.value"
+      [allowEmptySelection]="true"
+      (ionChange)="onSelectionChange($event)"
+    >
       @for (option of props.options; track option.id) {
-        <ion-checkbox
-          [checked]="isSelected(option)"
-          [disabled]="props.state === states.DISABLED"
-          [labelPlacement]="'end'"
-          (ionChange)="onOptionSelect(option, $event)"
-        >
+        <ion-radio [value]="option.id" [disabled]="props.state === states.DISABLED" labelPlacement="end">
           {{ option.name }}
-        </ion-checkbox>
+        </ion-radio>
       }
-    </div>
-  `, isInline: true, styles: [".checkbox-radio-group{display:flex;flex-direction:row;gap:12px;margin-top:.5rem}.checkbox-radio-group ion-checkbox{--size: 24px;--checkbox-background-checked: var(--ion-color-primary);--checkmark-color: var(--ion-color-primary-contrast)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }] }); }
+    </ion-radio-group>
+  `, isInline: true, styles: [".checkbox-radio-group{display:flex;flex-direction:row;gap:12px;margin-top:.5rem}.checkbox-radio-group ion-checkbox{--size: 24px;--checkbox-background-checked: var(--ion-color-primary);--checkmark-color: var(--ion-color-primary-contrast)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: IonRadio, selector: "ion-radio", inputs: ["alignment", "color", "disabled", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "compareWith", "errorText", "helperText", "name", "value"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CheckboxRadioInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-checkbox-radio-input', standalone: true, imports: [CommonModule, ReactiveFormsModule, IonCheckbox], template: `
-    <div class="checkbox-radio-group">
+            args: [{ selector: 'val-checkbox-radio-input', standalone: true, imports: [CommonModule, ReactiveFormsModule, IonRadio, IonRadioGroup], template: `
+    <ion-radio-group
+      class="checkbox-radio-group"
+      [value]="props.control?.value"
+      [allowEmptySelection]="true"
+      (ionChange)="onSelectionChange($event)"
+    >
       @for (option of props.options; track option.id) {
-        <ion-checkbox
-          [checked]="isSelected(option)"
-          [disabled]="props.state === states.DISABLED"
-          [labelPlacement]="'end'"
-          (ionChange)="onOptionSelect(option, $event)"
-        >
+        <ion-radio [value]="option.id" [disabled]="props.state === states.DISABLED" labelPlacement="end">
           {{ option.name }}
-        </ion-checkbox>
+        </ion-radio>
       }
-    </div>
+    </ion-radio-group>
   `, styles: [".checkbox-radio-group{display:flex;flex-direction:row;gap:12px;margin-top:.5rem}.checkbox-radio-group ion-checkbox{--size: 24px;--checkbox-background-checked: var(--ion-color-primary);--checkmark-color: var(--ion-color-primary-contrast)}\n"] }]
         }], propDecorators: { props: [{
                 type: Input
@@ -16062,67 +15989,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }] } });
 
-/**
- * val-email-input
- *
- * An email input field integrated with Angular forms.
- * Supports presets for reusable configurations.
- *
- * @example With preset (recommended):
- * <val-email-input preset="form-field" [props]="{ control: myControl, placeholder: 'Email' }"></val-email-input>
- *
- * @example Static (backwards compatible):
- * <val-email-input [props]="{ control: myControl, placeholder: 'Enter your email' }"></val-email-input>
- *
- * @input preset: string - Name of preset to apply (e.g., 'form-field')
- * @input props: InputMetadata - Configuration for the input (overrides preset values)
- */
-class EmailInputComponent {
-    constructor() {
-        this.presets = inject(PresetService);
-        /**
-         * Input configuration object. Values here override preset values.
-         * @type {InputMetadata}
-         * @property control - The Angular FormControl for the input.
-         * @property placeholder - The placeholder text.
-         */
-        this.props = {};
-        /**
-         * Resolved props after merging preset + explicit props.
-         */
-        this.resolvedProps = {};
-    }
-    ngOnInit() {
-        this.resolveProps();
-    }
-    ngOnChanges(changes) {
-        if (changes['preset'] || changes['props']) {
-            this.resolveProps();
-        }
-    }
-    /**
-     * Merge preset configuration with explicit props.
-     * Explicit props take precedence over preset values.
-     */
-    resolveProps() {
-        const presetProps = this.preset ? this.presets.get('emailInput', this.preset) : {};
-        this.resolvedProps = {
-            ...presetProps,
-            ...this.props,
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EmailInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EmailInputComponent, isStandalone: true, selector: "val-email-input", inputs: { preset: "preset", props: "props" }, usesOnChanges: true, ngImport: i0, template: ` <ion-input [formControl]="resolvedProps.control" type="email" [placeholder]="resolvedProps.placeholder"></ion-input> `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EmailInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-email-input', standalone: true, imports: [CommonModule, ReactiveFormsModule, IonInput], template: ` <ion-input [formControl]="resolvedProps.control" type="email" [placeholder]="resolvedProps.placeholder"></ion-input> ` }]
-        }], propDecorators: { preset: [{
-                type: Input
-            }], props: [{
-                type: Input
-            }] } });
-
 /**
  * Resolves a color string to a valid CSS value for use in styles.
  * Supports Ionic color names, CSS variables, and custom colors.
@@ -16135,7 +16001,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * resolveColor('--my-custom-color'); // returns 'var(--my-custom-color)'
  * resolveColor('#ff0000'); // returns '#ff0000'
  */
-function resolveColor$1(color) {
+function resolveColor(color) {
     // Si el color empieza con "--", se asume que es una variable CSS válida
     if (color.startsWith('--')) {
         return `var(${color})`;
@@ -16190,7 +16056,7 @@ class ExpandableTextComponent {
         this.expanded = !this.expanded;
     }
     color() {
-        return resolveColor$1(this.props.color || this.defaultColor);
+        return resolveColor(this.props.color || this.defaultColor);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ExpandableTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ExpandableTextComponent, isStandalone: true, selector: "val-expandable-text", inputs: { props: "props" }, ngImport: i0, template: `
@@ -16203,12 +16069,12 @@ class ExpandableTextComponent {
         </ion-text>
       </div>
       @if (!expanded && isTruncated) {
-        <span class="see-more" [style.color]="this.color()" (click)="toggleExpand()">
+        <button type="button" class="see-more" [style.color]="this.color()" [attr.aria-expanded]="expanded" (click)="toggleExpand()">
           {{ getExpandText() }}
-        </span>
+        </button>
       }
     </div>
-  `, isInline: true, styles: [".description-container{position:relative;overflow:hidden;transition:max-height .3s ease-in-out}.description-container:not(.expanded){max-height:10rem}.description-container.expanded{max-height:none}.content-wrapper{overflow:hidden}.description-container:not(.expanded).has-gradient .content-wrapper{-webkit-mask-image:linear-gradient(to bottom,black 50%,transparent 100%);mask-image:linear-gradient(to bottom,black 50%,transparent 100%)}.description{margin:0}.see-more{display:block;font-weight:700;cursor:pointer;margin-top:.25rem}\n"], dependencies: [{ kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }] }); }
+  `, isInline: true, styles: [".description-container{position:relative;overflow:hidden;transition:max-height .3s ease-in-out}.description-container:not(.expanded){max-height:10rem}.description-container.expanded{max-height:none}.content-wrapper{overflow:hidden}.description-container:not(.expanded).has-gradient .content-wrapper{-webkit-mask-image:linear-gradient(to bottom,black 50%,transparent 100%);mask-image:linear-gradient(to bottom,black 50%,transparent 100%)}.description{margin:0}.see-more{display:block;cursor:pointer;margin-top:.25rem;padding:0;border:none;background:none;font:inherit;font-weight:700;text-align:left}.see-more:focus{outline:none}.see-more:focus-visible{outline:.125rem solid var(--ion-color-primary, #7026df);outline-offset:2px;border-radius:4px}\n"], dependencies: [{ kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ExpandableTextComponent, decorators: [{
             type: Component,
@@ -16222,12 +16088,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </ion-text>
       </div>
       @if (!expanded && isTruncated) {
-        <span class="see-more" [style.color]="this.color()" (click)="toggleExpand()">
+        <button type="button" class="see-more" [style.color]="this.color()" [attr.aria-expanded]="expanded" (click)="toggleExpand()">
           {{ getExpandText() }}
-        </span>
+        </button>
       }
     </div>
-  `, styles: [".description-container{position:relative;overflow:hidden;transition:max-height .3s ease-in-out}.description-container:not(.expanded){max-height:10rem}.description-container.expanded{max-height:none}.content-wrapper{overflow:hidden}.description-container:not(.expanded).has-gradient .content-wrapper{-webkit-mask-image:linear-gradient(to bottom,black 50%,transparent 100%);mask-image:linear-gradient(to bottom,black 50%,transparent 100%)}.description{margin:0}.see-more{display:block;font-weight:700;cursor:pointer;margin-top:.25rem}\n"] }]
+  `, styles: [".description-container{position:relative;overflow:hidden;transition:max-height .3s ease-in-out}.description-container:not(.expanded){max-height:10rem}.description-container.expanded{max-height:none}.content-wrapper{overflow:hidden}.description-container:not(.expanded).has-gradient .content-wrapper{-webkit-mask-image:linear-gradient(to bottom,black 50%,transparent 100%);mask-image:linear-gradient(to bottom,black 50%,transparent 100%)}.description{margin:0}.see-more{display:block;cursor:pointer;margin-top:.25rem;padding:0;border:none;background:none;font:inherit;font-weight:700;text-align:left}.see-more:focus{outline:none}.see-more:focus-visible{outline:.125rem solid var(--ion-color-primary, #7026df);outline-offset:2px;border-radius:4px}\n"] }]
         }], propDecorators: { props: [{
                 type: Input
             }] } });
@@ -16249,7 +16115,11 @@ class FileInputComponent {
     ngOnInit() {
         // Initialize button with i18n text
         this.contrastButton = {
-            ...PrimarySolidDefaultRoundButton(this.props?.buttonText || this.i18n.t('uploadFile')),
+            ...button({
+                text: this.props?.buttonText || this.i18n.t('uploadFile'),
+                fill: 'solid',
+                shape: 'round',
+            }),
             color: 'light',
         };
     }
@@ -16319,14 +16189,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * val-hint
  *
  * Displays validation error messages for a form input, using Angular forms.
+ * Cuando muestra un error, el contenedor se anuncia a tecnologías asistivas
+ * (`role="alert"` + `aria-live="assertive"`). Acepta un `id` para que el input
+ * asociado lo referencie vía `aria-describedby`.
  *
  * @example
- * <val-hint [props]="{ control: myControl, errors: { required: 'Required field' } }"></val-hint>
+ * <val-hint [props]="{ control: myControl, errors: { required: 'Required field' } }" id="email-error"></val-hint>
  *
  * @input props: InputMetadata - Configuration for the input (form control, errors, etc.)
+ * @input id: string - Id del contenedor, para enlace `aria-describedby` desde el input.
  */
 class HintComponent {
     constructor() {
+        /**
+         * Si el hint representa un error (vs un hint informativo). Hoy `val-hint`
+         * siempre muestra errores de validación, así que por defecto es `true`.
+         */
+        this.isError = true;
         this.i18n = inject(I18nService);
     }
     ngOnInit() { }
@@ -16366,8 +16245,14 @@ class HintComponent {
         return errors;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: HintComponent, isStandalone: true, selector: "val-hint", inputs: { props: "props" }, ngImport: i0, template: `
-    <div class="hint-container" *ngIf="shouldShowErrors">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: HintComponent, isStandalone: true, selector: "val-hint", inputs: { props: "props", id: "id", isError: "isError" }, ngImport: i0, template: `
+    <div
+      class="hint-container"
+      *ngIf="shouldShowErrors"
+      [attr.id]="id"
+      [attr.role]="isError ? 'alert' : 'status'"
+      [attr.aria-live]="isError ? 'assertive' : 'polite'"
+    >
       <val-text
         *ngFor="let e of Errors"
         [props]="{
@@ -16383,7 +16268,13 @@ class HintComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HintComponent, decorators: [{
             type: Component,
             args: [{ selector: 'val-hint', standalone: true, imports: [CommonModule, TextComponent], template: `
-    <div class="hint-container" *ngIf="shouldShowErrors">
+    <div
+      class="hint-container"
+      *ngIf="shouldShowErrors"
+      [attr.id]="id"
+      [attr.role]="isError ? 'alert' : 'status'"
+      [attr.aria-live]="isError ? 'assertive' : 'polite'"
+    >
       <val-text
         *ngFor="let e of Errors"
         [props]="{
@@ -16397,28 +16288,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
   `, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.section{margin-top:1rem}.input{margin:var(--val-form-field-gap, .5rem) 0}@media (min-width: 768px){.input{margin:var(--val-form-field-gap, .75rem) 0}}.submit-actions--sticky{position:sticky;bottom:0;z-index:1;background:var(--ion-background-color);border-top:1px solid var(--ion-color-step-150, rgba(0, 0, 0, .08));padding:.75rem 0 calc(.75rem + env(safe-area-inset-bottom))}.field-description{display:block;font-size:.75rem;color:var(--ion-color-dark);margin-bottom:.25rem;line-height:1.4}.hint-container{margin-top:.25rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input
-            }] } });
-
-/**
- * val-hour-input
- *
- * A time picker input integrated with Angular forms, using Ionic's datetime component.
- *
- * @example
- * <val-hour-input [props]="{ control: myControl }"></val-hour-input>
- *
- * @input props: InputMetadata - Configuration for the time input (form control, etc.)
- */
-class HourInputComponent {
-    constructor() { }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HourInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: HourInputComponent, isStandalone: true, selector: "val-hour-input", inputs: { props: "props" }, ngImport: i0, template: ` <ion-datetime [formControl]="props.control" presentation="time"></ion-datetime>`, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonDatetime, selector: "ion-datetime", inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "formatOptions", "highlightedDates", "hourCycle", "hourValues", "isDateEnabled", "locale", "max", "min", "minuteValues", "mode", "monthValues", "multiple", "name", "preferWheel", "presentation", "readonly", "showAdjacentDays", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "titleSelectedDatesFormatter", "value", "yearValues"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HourInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-hour-input', standalone: true, imports: [ReactiveFormsModule, IonDatetime], template: ` <ion-datetime [formControl]="props.control" presentation="time"></ion-datetime>` }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
+            }], id: [{
+                type: Input
+            }], isError: [{
                 type: Input
             }] } });
 
@@ -17114,7 +16986,7 @@ class LayeredCardComponent {
         if (!background) {
             return '';
         }
-        return resolveColor$1(background);
+        return resolveColor(background);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LayeredCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LayeredCardComponent, isStandalone: true, selector: "layered-card", inputs: { props: "props" }, ngImport: i0, template: `
@@ -17538,145 +17410,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: [{ required: true }]
             }] } });
 
-/**
- * Utilities for handling default values in form inputs based on InputMetadata configuration.
- */
-/**
- * Resolves the initial value for a form input based on its configuration.
- *
- * @param input - The input metadata configuration
- * @returns The resolved initial value
- *
- * @example
- * // Custom default value
- * const customValue = resolveInputDefaultValue({ withDefault: '2025-06-24', type: InputType.DATE });
- *
- * // Auto default value
- * const autoValue = resolveInputDefaultValue({ withDefault: true, type: InputType.NUMBER });
- *
- * // Explicit value (takes precedence)
- * const explicitValue = resolveInputDefaultValue({ value: 'explicit', withDefault: true, type: InputType.TEXT });
- */
-function resolveInputDefaultValue(input) {
-    // Explicit value takes precedence
-    if (input.value !== undefined && input.value !== null && input.value !== '') {
-        return parseValueByType(input.value, input.type);
-    }
-    // No default configuration
-    if (!input.withDefault) {
-        return null;
-    }
-    // Custom default value
-    if (typeof input.withDefault === 'string') {
-        return parseValueByType(input.withDefault, input.type);
-    }
-    // Auto default value (withDefault === true)
-    return getAutoDefaultValue(input.type);
-}
-/**
- * Parses a string value to the appropriate type based on the input type.
- *
- * @param value - The string value to parse
- * @param type - The input type
- * @returns The parsed value
- */
-function parseValueByType(value, type) {
-    switch (type) {
-        case InputType.DATE:
-            return new Date(value).toISOString();
-        case InputType.NUMBER:
-            return parseFloat(value) || 0;
-        case InputType.CHECK:
-            return value === 'true' || value === '1';
-        case InputType.TEXT:
-        case InputType.EMAIL:
-        case InputType.PASSWORD:
-        case InputType.COMMENT:
-        case InputType.PIN_CODE:
-        case InputType.HOUR:
-        case InputType.RADIO:
-        case InputType.SELECT:
-        case InputType.SEARCH_SELECT:
-        case InputType.FILE:
-        default:
-            return value;
-    }
-}
-/**
- * Gets the automatic default value for a given input type.
- *
- * @param type - The input type
- * @returns The auto default value
- */
-function getAutoDefaultValue(type) {
-    switch (type) {
-        case InputType.DATE:
-            return new Date().toISOString();
-        case InputType.NUMBER:
-            return 0;
-        case InputType.CHECK:
-            return false;
-        case InputType.TEXT:
-        case InputType.EMAIL:
-        case InputType.PASSWORD:
-        case InputType.COMMENT:
-        case InputType.PIN_CODE:
-        case InputType.HOUR:
-        case InputType.RADIO:
-        case InputType.SELECT:
-        case InputType.SEARCH_SELECT:
-        case InputType.FILE:
-        default:
-            return '';
-    }
-}
-/**
- * Applies the resolved default value to a FormControl.
- *
- * @param input - The input metadata configuration
- * @example
- * const input = { control: myFormControl, type: InputType.DATE, withDefault: true };
- * applyDefaultValueToControl(input);
- */
-function applyDefaultValueToControl(input) {
-    if (!input.control)
-        return;
-    const defaultValue = resolveInputDefaultValue(input);
-    if (defaultValue !== null) {
-        input.control.setValue(defaultValue);
-        input.control.markAsPristine();
-        input.control.updateValueAndValidity();
-    }
-}
-
-/**
- * val-number-input
- *
- * A number input field integrated with Angular forms.
- *
- * @example
- * <val-number-input [props]="{ control: myControl, placeholder: 'Enter a number' }"></val-number-input>
- *
- * @input props: InputMetadata - Configuration for the input (form control, placeholder, etc.)
- */
-class NumberInputComponent {
-    constructor() { }
-    ngOnInit() {
-        // Apply default values on initialization
-        if (this.props?.withDefault || this.props?.value) {
-            applyDefaultValueToControl(this.props);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: NumberInputComponent, isStandalone: true, selector: "val-number-input", inputs: { props: "props" }, ngImport: i0, template: ` <ion-input [formControl]="props.control" type="number" [placeholder]="props.placeholder"></ion-input> `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NumberInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-number-input', standalone: true, imports: [ReactiveFormsModule, IonInput], template: ` <ion-input [formControl]="props.control" type="number" [placeholder]="props.placeholder"></ion-input> ` }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
-                type: Input
-            }] } });
-
 /**
  * val-number-from-to
  *
@@ -17814,6 +17547,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }] } });
 
+/**
+ * Defaults i18n (es/en) — auto-registrados si el consumer no proveyó el
+ * namespace `PasswordInput`. Cubre el aria-label del toggle mostrar/ocultar.
+ */
+const PASSWORD_INPUT_I18N = {
+    es: { showPassword: 'Mostrar contraseña', hidePassword: 'Ocultar contraseña' },
+    en: { showPassword: 'Show password', hidePassword: 'Hide password' },
+};
 /**
  * val-password-input
  *
@@ -17830,8 +17571,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * @input props: InputMetadata - Configuration for the input (overrides preset values)
  */
 class PasswordInputComponent {
-    constructor(icon) {
+    constructor() {
         this.presets = inject(PresetService);
+        this.i18n = inject(I18nService);
         /**
          * Input configuration object. Values here override preset values.
          * @type {InputMetadata}
@@ -17844,6 +17586,16 @@ class PasswordInputComponent {
          */
         this.resolvedProps = {};
         this.hidePassword = true;
+        if (!this.i18n.hasNamespace('PasswordInput')) {
+            this.i18n.registerContent('PasswordInput', PASSWORD_INPUT_I18N);
+        }
+    }
+    /** Aria-label del botón mostrar/ocultar según el estado de visibilidad. */
+    toggleLabel() {
+        this.i18n.lang();
+        return this.hidePassword
+            ? this.i18n.t('showPassword', 'PasswordInput')
+            : this.i18n.t('hidePassword', 'PasswordInput');
     }
     ngOnInit() {
         this.resolveProps();
@@ -17864,7 +17616,7 @@ class PasswordInputComponent {
             ...this.props,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PasswordInputComponent, deps: [{ token: IconService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PasswordInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PasswordInputComponent, isStandalone: true, selector: "val-password-input", inputs: { preset: "preset", props: "props" }, usesOnChanges: true, ngImport: i0, template: `
     <div class="input-container">
       <ion-input
@@ -17873,7 +17625,14 @@ class PasswordInputComponent {
         [type]="hidePassword ? 'password' : 'text'"
         [placeholder]="resolvedProps.placeholder"
       ></ion-input>
-      <ion-button color="dark" fill="clear" (click)="hidePassword = !hidePassword" size="small">
+      <ion-button
+        color="dark"
+        fill="clear"
+        (click)="hidePassword = !hidePassword"
+        size="small"
+        [attr.aria-label]="toggleLabel()"
+        [attr.aria-pressed]="!hidePassword"
+      >
         <ion-icon slot="icon-only" [name]="hidePassword ? 'eye-off-outline' : 'eye-outline'"></ion-icon>
       </ion-button>
     </div>
@@ -17889,12 +17648,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         [type]="hidePassword ? 'password' : 'text'"
         [placeholder]="resolvedProps.placeholder"
       ></ion-input>
-      <ion-button color="dark" fill="clear" (click)="hidePassword = !hidePassword" size="small">
+      <ion-button
+        color="dark"
+        fill="clear"
+        (click)="hidePassword = !hidePassword"
+        size="small"
+        [attr.aria-label]="toggleLabel()"
+        [attr.aria-pressed]="!hidePassword"
+      >
         <ion-icon slot="icon-only" [name]="hidePassword ? 'eye-off-outline' : 'eye-outline'"></ion-icon>
       </ion-button>
     </div>
   `, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.section{margin-top:1rem}.input{margin:var(--val-form-field-gap, .5rem) 0}@media (min-width: 768px){.input{margin:var(--val-form-field-gap, .75rem) 0}}.submit-actions--sticky{position:sticky;bottom:0;z-index:1;background:var(--ion-background-color);border-top:1px solid var(--ion-color-step-150, rgba(0, 0, 0, .08));padding:.75rem 0 calc(.75rem + env(safe-area-inset-bottom))}.field-description{display:block;font-size:.75rem;color:var(--ion-color-dark);margin-bottom:.25rem;line-height:1.4}.input-container{display:flex;align-items:center;flex-direction:row}\n"] }]
-        }], ctorParameters: () => [{ type: IconService }], propDecorators: { preset: [{
+        }], ctorParameters: () => [], propDecorators: { preset: [{
                 type: Input
             }], props: [{
                 type: Input
@@ -18447,6 +18213,117 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Output
             }] } });
 
+/**
+ * Utilities for handling default values in form inputs based on InputMetadata configuration.
+ */
+/**
+ * Resolves the initial value for a form input based on its configuration.
+ *
+ * @param input - The input metadata configuration
+ * @returns The resolved initial value
+ *
+ * @example
+ * // Custom default value
+ * const customValue = resolveInputDefaultValue({ withDefault: '2025-06-24', type: InputType.DATE });
+ *
+ * // Auto default value
+ * const autoValue = resolveInputDefaultValue({ withDefault: true, type: InputType.NUMBER });
+ *
+ * // Explicit value (takes precedence)
+ * const explicitValue = resolveInputDefaultValue({ value: 'explicit', withDefault: true, type: InputType.TEXT });
+ */
+function resolveInputDefaultValue(input) {
+    // Explicit value takes precedence
+    if (input.value !== undefined && input.value !== null && input.value !== '') {
+        return parseValueByType(input.value, input.type);
+    }
+    // No default configuration
+    if (!input.withDefault) {
+        return null;
+    }
+    // Custom default value
+    if (typeof input.withDefault === 'string') {
+        return parseValueByType(input.withDefault, input.type);
+    }
+    // Auto default value (withDefault === true)
+    return getAutoDefaultValue(input.type);
+}
+/**
+ * Parses a string value to the appropriate type based on the input type.
+ *
+ * @param value - The string value to parse
+ * @param type - The input type
+ * @returns The parsed value
+ */
+function parseValueByType(value, type) {
+    switch (type) {
+        case InputType.DATE:
+            return new Date(value).toISOString();
+        case InputType.NUMBER:
+            return parseFloat(value) || 0;
+        case InputType.CHECK:
+            return value === 'true' || value === '1';
+        case InputType.TEXT:
+        case InputType.EMAIL:
+        case InputType.PASSWORD:
+        case InputType.COMMENT:
+        case InputType.PIN_CODE:
+        case InputType.HOUR:
+        case InputType.RADIO:
+        case InputType.SELECT:
+        case InputType.SEARCH_SELECT:
+        case InputType.FILE:
+        default:
+            return value;
+    }
+}
+/**
+ * Gets the automatic default value for a given input type.
+ *
+ * @param type - The input type
+ * @returns The auto default value
+ */
+function getAutoDefaultValue(type) {
+    switch (type) {
+        case InputType.DATE:
+            return new Date().toISOString();
+        case InputType.NUMBER:
+            return 0;
+        case InputType.CHECK:
+            return false;
+        case InputType.TEXT:
+        case InputType.EMAIL:
+        case InputType.PASSWORD:
+        case InputType.COMMENT:
+        case InputType.PIN_CODE:
+        case InputType.HOUR:
+        case InputType.RADIO:
+        case InputType.SELECT:
+        case InputType.SEARCH_SELECT:
+        case InputType.FILE:
+        default:
+            return '';
+    }
+}
+/**
+ * Applies the resolved default value to a FormControl.
+ *
+ * @param input - The input metadata configuration
+ * @example
+ * const input = { control: myFormControl, type: InputType.DATE, withDefault: true };
+ * applyDefaultValueToControl(input);
+ */
+function applyDefaultValueToControl(input) {
+    if (!input.control)
+        return;
+    const defaultValue = resolveInputDefaultValue(input);
+    if (defaultValue !== null) {
+        input.control.setValue(defaultValue);
+        input.control.markAsPristine();
+        input.control.updateValueAndValidity();
+    }
+}
+
 /**
  * val-select-input
  *
@@ -19129,17 +19006,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Output
             }] } });
 
+/** Contador estático para generar ids únicos por instancia. */
+let textInputUid = 0;
 /**
  * val-text-input
  *
- * A text input field integrated with Angular forms.
+ * A text input field integrated with Angular forms. Renders the native HTML
+ * input type from `props.inputType` (default 'text'). Collapses the former
+ * `val-email-input` / `val-number-input` / `val-hour-input` molecules:
+ * - `inputType: 'email' | 'number' | 'tel' | 'password' | ...` → `<ion-input [type]>`
+ * - `inputType: 'time'` → `<ion-datetime presentation="time">` (ex `val-hour-input`)
+ *
  * Supports presets for reusable configurations.
  *
  * @example With preset (recommended):
  * <val-text-input preset="form-field" [props]="{ control: myControl, placeholder: 'Enter text' }"></val-text-input>
  *
- * @example Static (backwards compatible):
- * <val-text-input [props]="{ control: myControl, placeholder: 'Enter text' }"></val-text-input>
+ * @example Email:
+ * <val-text-input [props]="{ control: emailControl, inputType: 'email' }"></val-text-input>
+ *
+ * @example Time picker (ex val-hour-input):
+ * <val-text-input [props]="{ control: timeControl, inputType: 'time' }"></val-text-input>
  *
  * @input preset: string - Name of preset to apply (e.g., 'form-field', 'search')
  * @input props: InputMetadata - Configuration for the input (overrides preset values)
@@ -19152,6 +19039,7 @@ class TextInputComponent {
          * @type {InputMetadata}
          * @property control - The Angular FormControl for the input.
          * @property placeholder - The placeholder text.
+         * @property inputType - Native HTML input type ('text' | 'email' | 'number' | 'tel' | 'password' | 'time' | ...).
          * @property label, name, hint, type, validators, etc. - See InputMetadata for all options.
          */
         this.props = {};
@@ -19161,6 +19049,23 @@ class TextInputComponent {
          */
         this.resolvedProps = {};
         this.states = ComponentStates;
+        /** Ids únicos por instancia para el wiring de accesibilidad label↔input↔error. */
+        this.uid = `val-text-input-${textInputUid++}`;
+        this.inputId = `${this.uid}-control`;
+    }
+    /**
+     * Id del label visible. Si `val-form` orquesta el campo, pasa el id del
+     * `<val-title>` externo vía `props.labelId`; si no, se usa el id interno.
+     */
+    get labelId() {
+        return this.resolvedProps?.labelId ?? `${this.uid}-label`;
+    }
+    /**
+     * Id del contenedor de error. Si `val-form` orquesta el campo, pasa el id del
+     * `<val-hint>` externo vía `props.errorId`; si no, se usa el id interno.
+     */
+    get errorId() {
+        return this.resolvedProps?.errorId ?? `${this.uid}-error`;
     }
     ngOnInit() {
         this.resolveProps();
@@ -19174,6 +19079,18 @@ class TextInputComponent {
             this.resolveProps();
         }
     }
+    /**
+     * Native HTML input type, defaulting to 'text'. Drives both the `[type]` of the
+     * `<ion-input>` and the branch between `<ion-input>` and `<ion-datetime>`.
+     */
+    get resolvedType() {
+        return this.resolvedProps?.inputType ?? 'text';
+    }
+    /** Para `aria-invalid` / `aria-describedby`: error visible solo si tocado. */
+    get isInvalid() {
+        const control = this.resolvedProps?.control;
+        return !!(control && control.invalid && control.touched);
+    }
     /**
      * Merge preset configuration with explicit props.
      * Explicit props take precedence over preset values.
@@ -19187,11 +19104,57 @@ class TextInputComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TextInputComponent, isStandalone: true, selector: "val-text-input", inputs: { preset: "preset", props: "props" }, usesOnChanges: true, ngImport: i0, template: ` <ion-input [formControl]="resolvedProps.control" type="text" [placeholder]="resolvedProps.placeholder" /> `, isInline: true, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.section{margin-top:1rem}.input{margin:var(--val-form-field-gap, .5rem) 0}@media (min-width: 768px){.input{margin:var(--val-form-field-gap, .75rem) 0}}.submit-actions--sticky{position:sticky;bottom:0;z-index:1;background:var(--ion-background-color);border-top:1px solid var(--ion-color-step-150, rgba(0, 0, 0, .08));padding:.75rem 0 calc(.75rem + env(safe-area-inset-bottom))}.field-description{display:block;font-size:.75rem;color:var(--ion-color-dark);margin-bottom:.25rem;line-height:1.4}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TextInputComponent, isStandalone: true, selector: "val-text-input", inputs: { preset: "preset", props: "props" }, usesOnChanges: true, ngImport: i0, template: `
+    @if (resolvedType === 'time') {
+      <ion-datetime
+        [formControl]="resolvedProps.control"
+        presentation="time"
+        [attr.id]="inputId"
+        [attr.aria-label]="resolvedProps.label || null"
+        [attr.aria-labelledby]="resolvedProps.label ? labelId : null"
+        [attr.aria-invalid]="isInvalid"
+        [attr.aria-describedby]="isInvalid ? errorId : null"
+      ></ion-datetime>
+    } @else {
+      <ion-input
+        [formControl]="resolvedProps.control"
+        [type]="resolvedType"
+        [placeholder]="resolvedProps.placeholder"
+        [attr.id]="inputId"
+        [attr.aria-label]="resolvedProps.label || null"
+        [attr.aria-labelledby]="resolvedProps.label ? labelId : null"
+        [attr.aria-invalid]="isInvalid"
+        [attr.aria-describedby]="isInvalid ? errorId : null"
+      />
+    }
+  `, isInline: true, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.section{margin-top:1rem}.input{margin:var(--val-form-field-gap, .5rem) 0}@media (min-width: 768px){.input{margin:var(--val-form-field-gap, .75rem) 0}}.submit-actions--sticky{position:sticky;bottom:0;z-index:1;background:var(--ion-background-color);border-top:1px solid var(--ion-color-step-150, rgba(0, 0, 0, .08));padding:.75rem 0 calc(.75rem + env(safe-area-inset-bottom))}.field-description{display:block;font-size:.75rem;color:var(--ion-color-dark);margin-bottom:.25rem;line-height:1.4}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonDatetime, selector: "ion-datetime", inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "formatOptions", "highlightedDates", "hourCycle", "hourValues", "isDateEnabled", "locale", "max", "min", "minuteValues", "mode", "monthValues", "multiple", "name", "preferWheel", "presentation", "readonly", "showAdjacentDays", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "titleSelectedDatesFormatter", "value", "yearValues"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-text-input', standalone: true, imports: [ReactiveFormsModule, IonInput], template: ` <ion-input [formControl]="resolvedProps.control" type="text" [placeholder]="resolvedProps.placeholder" /> `, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.section{margin-top:1rem}.input{margin:var(--val-form-field-gap, .5rem) 0}@media (min-width: 768px){.input{margin:var(--val-form-field-gap, .75rem) 0}}.submit-actions--sticky{position:sticky;bottom:0;z-index:1;background:var(--ion-background-color);border-top:1px solid var(--ion-color-step-150, rgba(0, 0, 0, .08));padding:.75rem 0 calc(.75rem + env(safe-area-inset-bottom))}.field-description{display:block;font-size:.75rem;color:var(--ion-color-dark);margin-bottom:.25rem;line-height:1.4}\n"] }]
+            args: [{ selector: 'val-text-input', standalone: true, imports: [ReactiveFormsModule, IonInput, IonDatetime], template: `
+    @if (resolvedType === 'time') {
+      <ion-datetime
+        [formControl]="resolvedProps.control"
+        presentation="time"
+        [attr.id]="inputId"
+        [attr.aria-label]="resolvedProps.label || null"
+        [attr.aria-labelledby]="resolvedProps.label ? labelId : null"
+        [attr.aria-invalid]="isInvalid"
+        [attr.aria-describedby]="isInvalid ? errorId : null"
+      ></ion-datetime>
+    } @else {
+      <ion-input
+        [formControl]="resolvedProps.control"
+        [type]="resolvedType"
+        [placeholder]="resolvedProps.placeholder"
+        [attr.id]="inputId"
+        [attr.aria-label]="resolvedProps.label || null"
+        [attr.aria-labelledby]="resolvedProps.label ? labelId : null"
+        [attr.aria-invalid]="isInvalid"
+        [attr.aria-describedby]="isInvalid ? errorId : null"
+      />
+    }
+  `, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.section{margin-top:1rem}.input{margin:var(--val-form-field-gap, .5rem) 0}@media (min-width: 768px){.input{margin:var(--val-form-field-gap, .75rem) 0}}.submit-actions--sticky{position:sticky;bottom:0;z-index:1;background:var(--ion-background-color);border-top:1px solid var(--ion-color-step-150, rgba(0, 0, 0, .08));padding:.75rem 0 calc(.75rem + env(safe-area-inset-bottom))}.field-description{display:block;font-size:.75rem;color:var(--ion-color-dark);margin-bottom:.25rem;line-height:1.4}\n"] }]
         }], propDecorators: { preset: [{
                 type: Input
             }], props: [{
@@ -19434,7 +19397,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }] } });
 
-const IONIC_COLORS$9 = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
+const IONIC_COLORS$6 = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
 class PillComponent {
     constructor() {
         this.presets = inject(PresetService);
@@ -19474,7 +19437,7 @@ class PillComponent {
     }
     getIconColor() {
         const c = this.resolvedProps.notification?.iconColor || 'warning';
-        return IONIC_COLORS$9.includes(c) ? `var(--ion-color-${c})` : c;
+        return IONIC_COLORS$6.includes(c) ? `var(--ion-color-${c})` : c;
     }
     onPillClick(event) {
         if (!this.resolvedProps.clickable)
@@ -19626,17 +19589,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Output
             }] } });
 
+/**
+ * Defaults i18n (es/en) — auto-registrados si el consumer no proveyó el
+ * namespace `CommandDisplay`. Cubre el aria-label del botón copiar.
+ */
+const COMMAND_DISPLAY_I18N = {
+    es: { copy: 'Copiar comando' },
+    en: { copy: 'Copy command' },
+};
 class CommandDisplayComponent {
     constructor() {
         this.toast = inject(ToastController);
         this.i18n = inject(I18nService);
+        /** Mensaje anunciado por el lector de pantalla al copiar. */
+        this.copiedMessage = '';
+        if (!this.i18n.hasNamespace('CommandDisplay')) {
+            this.i18n.registerContent('CommandDisplay', COMMAND_DISPLAY_I18N);
+        }
+    }
+    copyLabel() {
+        this.i18n.lang();
+        return this.i18n.t('copy', 'CommandDisplay');
     }
     async copyCommand() {
         if (this.props.text) {
             await Clipboard.write({
                 string: this.props.text,
             });
-            this.presentToast(this.i18n.t('copiedToClipboard'));
+            const message = this.i18n.t('copiedToClipboard');
+            this.copiedMessage = message;
+            this.presentToast(message);
         }
     }
     async presentToast(message) {
@@ -19652,19 +19634,25 @@ class CommandDisplayComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CommandDisplayComponent, isStandalone: true, selector: "val-command-display", inputs: { props: "props" }, ngImport: i0, template: `
     <div class="command-container">
       <div class="command-text">$ {{ props.text }}</div>
-      <ion-icon name="copy-outline" class="copy-icon" (click)="copyCommand()"></ion-icon>
+      <button type="button" class="copy-button" [attr.aria-label]="copyLabel()" (click)="copyCommand()">
+        <ion-icon name="copy-outline" class="copy-icon" aria-hidden="true"></ion-icon>
+      </button>
     </div>
-  `, isInline: true, styles: [".command-container{display:flex;align-items:center;justify-content:space-between;background-color:var(--ion-color-light, #f2f2f2);border-radius:24px;padding:12px 16px;box-shadow:0 2px 4px #0000001a}.command-text{flex-grow:1;font-family:monospace;font-size:.8rem;color:var(--ion-color-dark, #333);margin-right:10px}.copy-icon{font-size:1.3rem;color:var(--ion-color-medium, #92949c);cursor:pointer;transition:color .2s ease-in-out}.copy-icon:hover{color:var(--ion-color-primary, #3880ff)}@media (min-width: 600px){.command-text,.copy-icon{font-size:1.2rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
+    <span class="sr-only" role="status" aria-live="polite">{{ copiedMessage }}</span>
+  `, 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)}.command-container{display:flex;align-items:center;justify-content:space-between;background-color:var(--ion-color-light, #f2f2f2);border-radius:24px;padding:12px 16px;box-shadow:0 2px 4px #0000001a}.command-text{flex-grow:1;font-family:monospace;font-size:.8rem;color:var(--ion-color-dark, #333);margin-right:10px}.copy-button{display:inline-flex;align-items:center;justify-content:center;padding:4px;margin:0;border:none;background:none;line-height:0;cursor:pointer;border-radius:8px}.copy-button:focus{outline:none}.copy-button:focus-visible{outline:.125rem solid var(--ion-color-primary, #7026df);outline-offset:2px;border-radius:inherit}.copy-button:hover .copy-icon{color:var(--ion-color-primary, #3880ff)}.copy-icon{font-size:1.3rem;color:var(--ion-color-medium, #92949c);transition:color .2s ease-in-out}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (min-width: 600px){.command-text,.copy-icon{font-size:1.2rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CommandDisplayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'val-command-display', standalone: true, imports: [CommonModule, IonIcon], template: `
     <div class="command-container">
       <div class="command-text">$ {{ props.text }}</div>
-      <ion-icon name="copy-outline" class="copy-icon" (click)="copyCommand()"></ion-icon>
+      <button type="button" class="copy-button" [attr.aria-label]="copyLabel()" (click)="copyCommand()">
+        <ion-icon name="copy-outline" class="copy-icon" aria-hidden="true"></ion-icon>
+      </button>
     </div>
-  `, styles: [".command-container{display:flex;align-items:center;justify-content:space-between;background-color:var(--ion-color-light, #f2f2f2);border-radius:24px;padding:12px 16px;box-shadow:0 2px 4px #0000001a}.command-text{flex-grow:1;font-family:monospace;font-size:.8rem;color:var(--ion-color-dark, #333);margin-right:10px}.copy-icon{font-size:1.3rem;color:var(--ion-color-medium, #92949c);cursor:pointer;transition:color .2s ease-in-out}.copy-icon:hover{color:var(--ion-color-primary, #3880ff)}@media (min-width: 600px){.command-text,.copy-icon{font-size:1.2rem}}\n"] }]
-        }], propDecorators: { props: [{
+    <span class="sr-only" role="status" aria-live="polite">{{ copiedMessage }}</span>
+  `, 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)}.command-container{display:flex;align-items:center;justify-content:space-between;background-color:var(--ion-color-light, #f2f2f2);border-radius:24px;padding:12px 16px;box-shadow:0 2px 4px #0000001a}.command-text{flex-grow:1;font-family:monospace;font-size:.8rem;color:var(--ion-color-dark, #333);margin-right:10px}.copy-button{display:inline-flex;align-items:center;justify-content:center;padding:4px;margin:0;border:none;background:none;line-height:0;cursor:pointer;border-radius:8px}.copy-button:focus{outline:none}.copy-button:focus-visible{outline:.125rem solid var(--ion-color-primary, #7026df);outline-offset:2px;border-radius:inherit}.copy-button:hover .copy-icon{color:var(--ion-color-primary, #3880ff)}.copy-icon{font-size:1.3rem;color:var(--ion-color-medium, #92949c);transition:color .2s ease-in-out}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (min-width: 600px){.command-text,.copy-icon{font-size:1.2rem}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input
             }] } });
 
@@ -20062,9 +20050,7 @@ class BreadcrumbComponent {
         }
     }
     resolveProps() {
-        const presetProps = this.preset
-            ? this.presets.get('breadcrumb', this.preset)
-            : {};
+        const presetProps = this.preset ? this.presets.get('breadcrumb', this.preset) : {};
         this.resolvedProps = {
             ...presetProps,
             ...this.props,
@@ -20094,6 +20080,7 @@ class BreadcrumbComponent {
           [active]="item.active || isLast"
           [disabled]="item.disabled"
           [separator]="!isLast"
+          [attr.aria-current]="item.active || isLast ? 'page' : null"
           (click)="onBreadcrumbClick($event, item, $index)"
         >
           @if (item.icon) {
@@ -20122,6 +20109,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           [active]="item.active || isLast"
           [disabled]="item.disabled"
           [separator]="!isLast"
+          [attr.aria-current]="item.active || isLast ? 'page' : null"
           (click)="onBreadcrumbClick($event, item, $index)"
         >
           @if (item.icon) {
@@ -20146,6 +20134,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }] } });
 
 addIcons({ chevronBack, chevronForward, playBack, playForward });
+/**
+ * Defaults i18n (es/en) — auto-registrados si el consumer no proveyó el
+ * namespace `Pagination`. Cubre los aria-label de la navegación y sus botones.
+ */
+const PAGINATION_I18N = {
+    es: {
+        nav: 'Paginación',
+        first: 'Primera página',
+        previous: 'Página anterior',
+        next: 'Página siguiente',
+        last: 'Última página',
+        page: 'Página {page}',
+        pageInfo: 'Página {current} de {total}',
+    },
+    en: {
+        nav: 'Pagination',
+        first: 'First page',
+        previous: 'Previous page',
+        next: 'Next page',
+        last: 'Last page',
+        page: 'Page {page}',
+        pageInfo: 'Page {current} of {total}',
+    },
+};
 /**
  * val-pagination
  *
@@ -20171,9 +20183,28 @@ addIcons({ chevronBack, chevronForward, playBack, playForward });
  */
 class PaginationComponent {
     constructor() {
+        this.i18n = inject(I18nService);
         this.pageChange = new EventEmitter();
         this.visiblePages = [];
         this.totalPages = 1;
+        if (!this.i18n.hasNamespace('Pagination')) {
+            this.i18n.registerContent('Pagination', PAGINATION_I18N);
+        }
+    }
+    t(key) {
+        this.i18n.lang();
+        return this.i18n.t(key, 'Pagination');
+    }
+    pageLabel(page) {
+        this.i18n.lang();
+        return this.i18n.t('page', 'Pagination', { page: page.toString() });
+    }
+    pageInfo() {
+        this.i18n.lang();
+        return this.i18n.t('pageInfo', 'Pagination', {
+            current: this.props.currentPage.toString(),
+            total: this.totalPages.toString(),
+        });
     }
     ngOnChanges(changes) {
         if (changes['props']) {
@@ -20242,16 +20273,17 @@ class PaginationComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PaginationComponent, isStandalone: true, selector: "val-pagination", inputs: { props: "props" }, outputs: { pageChange: "pageChange" }, usesOnChanges: true, ngImport: i0, template: `
-    <div class="pagination-container" [class.disabled]="props.disabled">
+    <nav class="pagination-container" [class.disabled]="props.disabled" [attr.aria-label]="t('nav')">
       @if (props.showFirstLast !== false) {
         <ion-button
           fill="clear"
           [size]="props.size || 'default'"
           [color]="props.color || 'primary'"
           [disabled]="props.disabled || props.currentPage <= 1"
+          [attr.aria-label]="t('first')"
           (click)="goToPage(1)"
         >
-          <ion-icon slot="icon-only" name="play-back"></ion-icon>
+          <ion-icon slot="icon-only" name="play-back" aria-hidden="true"></ion-icon>
         </ion-button>
       }
 
@@ -20261,21 +20293,24 @@ class PaginationComponent {
           [size]="props.size || 'default'"
           [color]="props.color || 'primary'"
           [disabled]="props.disabled || props.currentPage <= 1"
+          [attr.aria-label]="t('previous')"
           (click)="goToPage(props.currentPage - 1)"
         >
-          <ion-icon slot="icon-only" name="chevron-back"></ion-icon>
+          <ion-icon slot="icon-only" name="chevron-back" aria-hidden="true"></ion-icon>
         </ion-button>
       }
 
       @for (page of visiblePages; track page) {
         @if (page === -1) {
-          <span class="ellipsis">...</span>
+          <span class="ellipsis" aria-hidden="true">...</span>
         } @else {
           <ion-button
             [fill]="page === props.currentPage ? 'solid' : 'clear'"
             [size]="props.size || 'default'"
             [color]="props.color || 'primary'"
             [disabled]="props.disabled"
+            [attr.aria-label]="pageLabel(page)"
+            [attr.aria-current]="page === props.currentPage ? 'page' : null"
             (click)="goToPage(page)"
           >
             {{ page }}
@@ -20289,9 +20324,10 @@ class PaginationComponent {
           [size]="props.size || 'default'"
           [color]="props.color || 'primary'"
           [disabled]="props.disabled || props.currentPage >= totalPages"
+          [attr.aria-label]="t('next')"
           (click)="goToPage(props.currentPage + 1)"
         >
-          <ion-icon slot="icon-only" name="chevron-forward"></ion-icon>
+          <ion-icon slot="icon-only" name="chevron-forward" aria-hidden="true"></ion-icon>
         </ion-button>
       }
 
@@ -20301,31 +20337,33 @@ class PaginationComponent {
           [size]="props.size || 'default'"
           [color]="props.color || 'primary'"
           [disabled]="props.disabled || props.currentPage >= totalPages"
+          [attr.aria-label]="t('last')"
           (click)="goToPage(totalPages)"
         >
-          <ion-icon slot="icon-only" name="play-forward"></ion-icon>
+          <ion-icon slot="icon-only" name="play-forward" aria-hidden="true"></ion-icon>
         </ion-button>
       }
 
       @if (props.showPageInfo) {
-        <span class="page-info">Page {{ props.currentPage }} of {{ totalPages }}</span>
+        <span class="page-info">{{ pageInfo() }}</span>
       }
-    </div>
+    </nav>
   `, isInline: true, styles: [":host{display:block}.pagination-container{display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap}.pagination-container.disabled{opacity:.5;pointer-events:none}ion-button{--padding-start: 8px;--padding-end: 8px;min-width:36px;font-weight:500}ion-button[size=small]{--padding-start: 6px;--padding-end: 6px;min-width:28px;font-size:.75rem}ion-button[size=large]{--padding-start: 12px;--padding-end: 12px;min-width:44px;font-size:1rem}.ellipsis{padding:0 8px;color:var(--ion-color-medium);font-size:.875rem}.page-info{margin-left:16px;color:var(--ion-color-medium);font-size:.875rem;white-space:nowrap}\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: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'val-pagination', standalone: true, imports: [CommonModule, IonButton, IonIcon], template: `
-    <div class="pagination-container" [class.disabled]="props.disabled">
+    <nav class="pagination-container" [class.disabled]="props.disabled" [attr.aria-label]="t('nav')">
       @if (props.showFirstLast !== false) {
         <ion-button
           fill="clear"
           [size]="props.size || 'default'"
           [color]="props.color || 'primary'"
           [disabled]="props.disabled || props.currentPage <= 1"
+          [attr.aria-label]="t('first')"
           (click)="goToPage(1)"
         >
-          <ion-icon slot="icon-only" name="play-back"></ion-icon>
+          <ion-icon slot="icon-only" name="play-back" aria-hidden="true"></ion-icon>
         </ion-button>
       }
 
@@ -20335,21 +20373,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           [size]="props.size || 'default'"
           [color]="props.color || 'primary'"
           [disabled]="props.disabled || props.currentPage <= 1"
+          [attr.aria-label]="t('previous')"
           (click)="goToPage(props.currentPage - 1)"
         >
-          <ion-icon slot="icon-only" name="chevron-back"></ion-icon>
+          <ion-icon slot="icon-only" name="chevron-back" aria-hidden="true"></ion-icon>
         </ion-button>
       }
 
       @for (page of visiblePages; track page) {
         @if (page === -1) {
-          <span class="ellipsis">...</span>
+          <span class="ellipsis" aria-hidden="true">...</span>
         } @else {
           <ion-button
             [fill]="page === props.currentPage ? 'solid' : 'clear'"
             [size]="props.size || 'default'"
             [color]="props.color || 'primary'"
             [disabled]="props.disabled"
+            [attr.aria-label]="pageLabel(page)"
+            [attr.aria-current]="page === props.currentPage ? 'page' : null"
             (click)="goToPage(page)"
           >
             {{ page }}
@@ -20363,9 +20404,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           [size]="props.size || 'default'"
           [color]="props.color || 'primary'"
           [disabled]="props.disabled || props.currentPage >= totalPages"
+          [attr.aria-label]="t('next')"
           (click)="goToPage(props.currentPage + 1)"
         >
-          <ion-icon slot="icon-only" name="chevron-forward"></ion-icon>
+          <ion-icon slot="icon-only" name="chevron-forward" aria-hidden="true"></ion-icon>
         </ion-button>
       }
 
@@ -20375,18 +20417,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           [size]="props.size || 'default'"
           [color]="props.color || 'primary'"
           [disabled]="props.disabled || props.currentPage >= totalPages"
+          [attr.aria-label]="t('last')"
           (click)="goToPage(totalPages)"
         >
-          <ion-icon slot="icon-only" name="play-forward"></ion-icon>
+          <ion-icon slot="icon-only" name="play-forward" aria-hidden="true"></ion-icon>
         </ion-button>
       }
 
       @if (props.showPageInfo) {
-        <span class="page-info">Page {{ props.currentPage }} of {{ totalPages }}</span>
+        <span class="page-info">{{ pageInfo() }}</span>
       }
-    </div>
+    </nav>
   `, styles: [":host{display:block}.pagination-container{display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap}.pagination-container.disabled{opacity:.5;pointer-events:none}ion-button{--padding-start: 8px;--padding-end: 8px;min-width:36px;font-weight:500}ion-button[size=small]{--padding-start: 6px;--padding-end: 6px;min-width:28px;font-size:.75rem}ion-button[size=large]{--padding-start: 12px;--padding-end: 12px;min-width:44px;font-size:1rem}.ellipsis{padding:0 8px;color:var(--ion-color-medium);font-size:.875rem}.page-info{margin-left:16px;color:var(--ion-color-medium);font-size:.875rem;white-space:nowrap}\n"] }]
-        }], propDecorators: { props: [{
+        }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input
             }], pageChange: [{
                 type: Output
@@ -20517,13 +20560,17 @@ class StepperComponent {
       [class.vertical]="resolvedProps.orientation === 'vertical'"
     >
       @for (step of resolvedProps.steps; track step.value; let i = $index; let isLast = $last) {
-        <div
+        <button
+          type="button"
           class="step"
           [class.current]="getStepStatus(step, i) === 'current'"
           [class.completed]="getStepStatus(step, i) === 'completed'"
           [class.error]="getStepStatus(step, i) === 'error'"
           [class.disabled]="step.disabled"
           [class.clickable]="isStepClickable(step, i)"
+          [disabled]="!isStepClickable(step, i)"
+          [attr.aria-current]="getStepStatus(step, i) === 'current' ? 'step' : null"
+          [attr.aria-label]="getStepLabel(step)"
           (click)="onStepClick(step, i)"
         >
           <div class="step-indicator">
@@ -20559,10 +20606,10 @@ class StepperComponent {
               <div class="step-description">{{ step.description }}</div>
             }
           </div>
-        </div>
+        </button>
       }
     </div>
-  `, isInline: true, styles: [":host{display:block}.stepper-container{display:flex}.stepper-container.horizontal{flex-direction:row;align-items:flex-start}.stepper-container.horizontal .step{flex:1;flex-direction:column;align-items:center;text-align:center}.stepper-container.horizontal .step .step-indicator{flex-direction:row;width:100%;justify-content:center}.stepper-container.horizontal .step .step-connector{flex:1;height:2px;margin:0 8px;align-self:center}.stepper-container.vertical{flex-direction:column}.stepper-container.vertical .step{flex-direction:row;align-items:flex-start}.stepper-container.vertical .step .step-indicator{flex-direction:column;align-items:center}.stepper-container.vertical .step .step-connector{width:2px;flex:1;min-height:24px;margin:8px 0}.stepper-container.vertical .step .step-content{margin-left:12px;padding-bottom:24px}.step{display:flex;cursor:default}.step.clickable{cursor:pointer}.step.clickable:hover .step-circle{transform:scale(1.1)}.step.disabled{opacity:.5;pointer-events:none}.step.current .step-circle{box-shadow:0 0 0 4px rgba(var(--ion-color-primary-rgb),.2)}.step-indicator{display:flex;position:relative}.step-circle{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background-color:var(--step-color, var(--ion-color-medium));color:#fff;font-weight:600;font-size:.875rem;transition:transform .2s,box-shadow .2s;flex-shrink:0}.step-circle ion-icon{font-size:1.125rem}.step-connector{background-color:var(--ion-color-light-shade);transition:background-color .3s}.step-connector.completed{background-color:var(--ion-color-primary)}.step-connector.dashed{background:repeating-linear-gradient(90deg,var(--ion-color-light-shade),var(--ion-color-light-shade) 4px,transparent 4px,transparent 8px)}.step-connector.dashed.completed{background:repeating-linear-gradient(90deg,var(--ion-color-primary),var(--ion-color-primary) 4px,transparent 4px,transparent 8px)}.step-content{margin-top:8px}.step-label{font-weight:500;font-size:.875rem;color:var(--ion-text-color)}.step-label .optional-text{font-weight:400;font-size:.75rem;color:var(--ion-color-medium);margin-left:4px}.step-description{font-size:.75rem;color:var(--ion-color-medium);margin-top:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
+  `, 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)}:host{display:block}.stepper-container{display:flex}.stepper-container.horizontal{flex-direction:row;align-items:flex-start}.stepper-container.horizontal .step{flex:1;flex-direction:column;align-items:center;text-align:center}.stepper-container.horizontal .step .step-indicator{flex-direction:row;width:100%;justify-content:center}.stepper-container.horizontal .step .step-connector{flex:1;height:2px;margin:0 8px;align-self:center}.stepper-container.vertical{flex-direction:column}.stepper-container.vertical .step{flex-direction:row;align-items:flex-start}.stepper-container.vertical .step .step-indicator{flex-direction:column;align-items:center}.stepper-container.vertical .step .step-connector{width:2px;flex:1;min-height:24px;margin:8px 0}.stepper-container.vertical .step .step-content{margin-left:12px;padding-bottom:24px}.step{display:flex;cursor:default;padding:0;border:none;background:none;font:inherit;text-align:inherit;color:inherit}.step:focus{outline:none}.step:focus-visible{outline:.125rem solid var(--ion-color-primary, #7026df);outline-offset:2px;border-radius:inherit}.step.clickable{cursor:pointer}.step.clickable:hover .step-circle{transform:scale(1.1)}.step.disabled{opacity:.5}.step:disabled{cursor:default}.step.current .step-circle{box-shadow:0 0 0 4px rgba(var(--ion-color-primary-rgb),.2)}.step-indicator{display:flex;position:relative}.step-circle{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background-color:var(--step-color, var(--ion-color-medium));color:#fff;font-weight:600;font-size:.875rem;transition:transform .2s,box-shadow .2s;flex-shrink:0}.step-circle ion-icon{font-size:1.125rem}.step-connector{background-color:var(--ion-color-light-shade);transition:background-color .3s}.step-connector.completed{background-color:var(--ion-color-primary)}.step-connector.dashed{background:repeating-linear-gradient(90deg,var(--ion-color-light-shade),var(--ion-color-light-shade) 4px,transparent 4px,transparent 8px)}.step-connector.dashed.completed{background:repeating-linear-gradient(90deg,var(--ion-color-primary),var(--ion-color-primary) 4px,transparent 4px,transparent 8px)}.step-content{margin-top:8px}.step-label{font-weight:500;font-size:.875rem;color:var(--ion-text-color)}.step-label .optional-text{font-weight:400;font-size:.75rem;color:var(--ion-color-medium);margin-left:4px}.step-description{font-size:.75rem;color:var(--ion-color-medium);margin-top:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StepperComponent, decorators: [{
             type: Component,
@@ -20573,13 +20620,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       [class.vertical]="resolvedProps.orientation === 'vertical'"
     >
       @for (step of resolvedProps.steps; track step.value; let i = $index; let isLast = $last) {
-        <div
+        <button
+          type="button"
           class="step"
           [class.current]="getStepStatus(step, i) === 'current'"
           [class.completed]="getStepStatus(step, i) === 'completed'"
           [class.error]="getStepStatus(step, i) === 'error'"
           [class.disabled]="step.disabled"
           [class.clickable]="isStepClickable(step, i)"
+          [disabled]="!isStepClickable(step, i)"
+          [attr.aria-current]="getStepStatus(step, i) === 'current' ? 'step' : null"
+          [attr.aria-label]="getStepLabel(step)"
           (click)="onStepClick(step, i)"
         >
           <div class="step-indicator">
@@ -20615,10 +20666,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
               <div class="step-description">{{ step.description }}</div>
             }
           </div>
-        </div>
+        </button>
       }
     </div>
-  `, styles: [":host{display:block}.stepper-container{display:flex}.stepper-container.horizontal{flex-direction:row;align-items:flex-start}.stepper-container.horizontal .step{flex:1;flex-direction:column;align-items:center;text-align:center}.stepper-container.horizontal .step .step-indicator{flex-direction:row;width:100%;justify-content:center}.stepper-container.horizontal .step .step-connector{flex:1;height:2px;margin:0 8px;align-self:center}.stepper-container.vertical{flex-direction:column}.stepper-container.vertical .step{flex-direction:row;align-items:flex-start}.stepper-container.vertical .step .step-indicator{flex-direction:column;align-items:center}.stepper-container.vertical .step .step-connector{width:2px;flex:1;min-height:24px;margin:8px 0}.stepper-container.vertical .step .step-content{margin-left:12px;padding-bottom:24px}.step{display:flex;cursor:default}.step.clickable{cursor:pointer}.step.clickable:hover .step-circle{transform:scale(1.1)}.step.disabled{opacity:.5;pointer-events:none}.step.current .step-circle{box-shadow:0 0 0 4px rgba(var(--ion-color-primary-rgb),.2)}.step-indicator{display:flex;position:relative}.step-circle{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background-color:var(--step-color, var(--ion-color-medium));color:#fff;font-weight:600;font-size:.875rem;transition:transform .2s,box-shadow .2s;flex-shrink:0}.step-circle ion-icon{font-size:1.125rem}.step-connector{background-color:var(--ion-color-light-shade);transition:background-color .3s}.step-connector.completed{background-color:var(--ion-color-primary)}.step-connector.dashed{background:repeating-linear-gradient(90deg,var(--ion-color-light-shade),var(--ion-color-light-shade) 4px,transparent 4px,transparent 8px)}.step-connector.dashed.completed{background:repeating-linear-gradient(90deg,var(--ion-color-primary),var(--ion-color-primary) 4px,transparent 4px,transparent 8px)}.step-content{margin-top:8px}.step-label{font-weight:500;font-size:.875rem;color:var(--ion-text-color)}.step-label .optional-text{font-weight:400;font-size:.75rem;color:var(--ion-color-medium);margin-left:4px}.step-description{font-size:.75rem;color:var(--ion-color-medium);margin-top:4px}\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)}:host{display:block}.stepper-container{display:flex}.stepper-container.horizontal{flex-direction:row;align-items:flex-start}.stepper-container.horizontal .step{flex:1;flex-direction:column;align-items:center;text-align:center}.stepper-container.horizontal .step .step-indicator{flex-direction:row;width:100%;justify-content:center}.stepper-container.horizontal .step .step-connector{flex:1;height:2px;margin:0 8px;align-self:center}.stepper-container.vertical{flex-direction:column}.stepper-container.vertical .step{flex-direction:row;align-items:flex-start}.stepper-container.vertical .step .step-indicator{flex-direction:column;align-items:center}.stepper-container.vertical .step .step-connector{width:2px;flex:1;min-height:24px;margin:8px 0}.stepper-container.vertical .step .step-content{margin-left:12px;padding-bottom:24px}.step{display:flex;cursor:default;padding:0;border:none;background:none;font:inherit;text-align:inherit;color:inherit}.step:focus{outline:none}.step:focus-visible{outline:.125rem solid var(--ion-color-primary, #7026df);outline-offset:2px;border-radius:inherit}.step.clickable{cursor:pointer}.step.clickable:hover .step-circle{transform:scale(1.1)}.step.disabled{opacity:.5}.step:disabled{cursor:default}.step.current .step-circle{box-shadow:0 0 0 4px rgba(var(--ion-color-primary-rgb),.2)}.step-indicator{display:flex;position:relative}.step-circle{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background-color:var(--step-color, var(--ion-color-medium));color:#fff;font-weight:600;font-size:.875rem;transition:transform .2s,box-shadow .2s;flex-shrink:0}.step-circle ion-icon{font-size:1.125rem}.step-connector{background-color:var(--ion-color-light-shade);transition:background-color .3s}.step-connector.completed{background-color:var(--ion-color-primary)}.step-connector.dashed{background:repeating-linear-gradient(90deg,var(--ion-color-light-shade),var(--ion-color-light-shade) 4px,transparent 4px,transparent 8px)}.step-connector.dashed.completed{background:repeating-linear-gradient(90deg,var(--ion-color-primary),var(--ion-color-primary) 4px,transparent 4px,transparent 8px)}.step-content{margin-top:8px}.step-label{font-weight:500;font-size:.875rem;color:var(--ion-text-color)}.step-label .optional-text{font-weight:400;font-size:.75rem;color:var(--ion-color-medium);margin-left:4px}.step-description{font-size:.75rem;color:var(--ion-color-medium);margin-top:4px}\n"] }]
         }], propDecorators: { preset: [{
                 type: Input
             }], props: [{
@@ -20628,6 +20679,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }] } });
 
 addIcons({ close, checkmark });
+/**
+ * Defaults i18n (es/en) — auto-registrados si el consumer no proveyó el
+ * namespace `ChipGroup`. Cubre el aria-label del botón eliminar.
+ */
+const CHIP_GROUP_I18N = {
+    es: { remove: 'Eliminar {label}' },
+    en: { remove: 'Remove {label}' },
+};
 /**
  * val-chip-group
  *
@@ -20656,15 +20715,30 @@ addIcons({ close, checkmark });
 class ChipGroupComponent {
     constructor() {
         this.presets = inject(PresetService);
+        this.i18n = inject(I18nService);
         this.props = {};
         this.resolvedProps = {};
         this.selectionChange = new EventEmitter();
         this.chipRemove = new EventEmitter();
         this.chipClick = new EventEmitter();
+        if (!this.i18n.hasNamespace('ChipGroup')) {
+            this.i18n.registerContent('ChipGroup', CHIP_GROUP_I18N);
+        }
     }
     ngOnInit() {
         this.resolveProps();
     }
+    removeLabel(chip) {
+        this.i18n.lang();
+        return this.i18n.t('remove', 'ChipGroup', { label: this.getChipLabel(chip) });
+    }
+    /** Activación de chip selectable por teclado (Enter/Space). */
+    onChipKey(event, chip) {
+        if (!this.resolvedProps.selectable)
+            return;
+        event.preventDefault();
+        this.onChipClick(chip);
+    }
     ngOnChanges(changes) {
         if (changes['preset'] || changes['props']) {
             this.resolveProps();
@@ -20732,7 +20806,12 @@ class ChipGroupComponent {
           [color]="getChipColor(chip)"
           [outline]="resolvedProps.outline && !chip.selected"
           [disabled]="chip.disabled"
+          [attr.role]="resolvedProps.selectable ? 'button' : null"
+          [attr.tabindex]="resolvedProps.selectable && !chip.disabled ? 0 : null"
+          [attr.aria-pressed]="resolvedProps.selectable ? !!chip.selected : null"
           (click)="onChipClick(chip)"
+          (keydown.enter)="onChipKey($event, chip)"
+          (keydown.space)="onChipKey($event, chip)"
         >
           @if (chip.icon) {
             <ion-icon [name]="chip.icon"></ion-icon>
@@ -20742,12 +20821,14 @@ class ChipGroupComponent {
           }
           <ion-label>{{ getChipLabel(chip) }}</ion-label>
           @if (resolvedProps.removable && !chip.disabled) {
-            <ion-icon name="close" class="remove-icon" (click)="onRemoveChip($event, chip)"></ion-icon>
+            <button type="button" class="remove-button" [attr.aria-label]="removeLabel(chip)" (click)="onRemoveChip($event, chip)">
+              <ion-icon name="close" class="remove-icon" aria-hidden="true"></ion-icon>
+            </button>
           }
         </ion-chip>
       }
     </div>
-  `, isInline: true, styles: [":host{display:block}.chip-group{display:flex;gap:8px}.chip-group.wrap{flex-wrap:wrap}.chip-group:not(.wrap){overflow-x:auto;padding-bottom:4px}.chip-group:not(.wrap)::-webkit-scrollbar{height:4px}.chip-group:not(.wrap)::-webkit-scrollbar-thumb{background:var(--ion-color-light-shade);border-radius:2px}ion-chip{margin:0;cursor:pointer;transition:transform .2s,box-shadow .2s}ion-chip:hover:not([disabled]){transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}ion-chip:active:not([disabled]){transform:translateY(0)}ion-chip[disabled]{opacity:.5;cursor:not-allowed}ion-chip ion-icon{font-size:1rem}ion-chip .selected-icon{margin-right:4px}ion-chip .remove-icon{margin-left:4px;cursor:pointer;opacity:.7;transition:opacity .2s}ion-chip .remove-icon:hover{opacity:1}ion-chip ion-label{font-size:.875rem;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonChip, selector: "ion-chip", inputs: ["color", "disabled", "mode", "outline"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }] }); }
+  `, 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)}:host{display:block}.chip-group{display:flex;gap:8px}.chip-group.wrap{flex-wrap:wrap}.chip-group:not(.wrap){overflow-x:auto;padding-bottom:4px}.chip-group:not(.wrap)::-webkit-scrollbar{height:4px}.chip-group:not(.wrap)::-webkit-scrollbar-thumb{background:var(--ion-color-light-shade);border-radius:2px}ion-chip{margin:0;cursor:pointer;transition:transform .2s,box-shadow .2s}ion-chip:focus{outline:none}ion-chip:focus-visible{outline:.125rem solid var(--ion-color-primary, #7026df);outline-offset:2px;border-radius:inherit}ion-chip:hover:not([disabled]){transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}ion-chip:active:not([disabled]){transform:translateY(0)}ion-chip[disabled]{opacity:.5;cursor:not-allowed}ion-chip ion-icon{font-size:1rem}ion-chip .selected-icon{margin-right:4px}ion-chip .remove-button{display:inline-flex;align-items:center;justify-content:center;margin-left:4px;padding:0;border:none;background:none;line-height:0;cursor:pointer;border-radius:50%}ion-chip .remove-button:focus{outline:none}ion-chip .remove-button:focus-visible{outline:.125rem solid var(--ion-color-primary, #7026df);outline-offset:2px;border-radius:inherit}ion-chip .remove-icon{opacity:.7;transition:opacity .2s}.remove-button:hover ion-chip .remove-icon{opacity:1}ion-chip ion-label{font-size:.875rem;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonChip, selector: "ion-chip", inputs: ["color", "disabled", "mode", "outline"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChipGroupComponent, decorators: [{
             type: Component,
@@ -20758,7 +20839,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           [color]="getChipColor(chip)"
           [outline]="resolvedProps.outline && !chip.selected"
           [disabled]="chip.disabled"
+          [attr.role]="resolvedProps.selectable ? 'button' : null"
+          [attr.tabindex]="resolvedProps.selectable && !chip.disabled ? 0 : null"
+          [attr.aria-pressed]="resolvedProps.selectable ? !!chip.selected : null"
           (click)="onChipClick(chip)"
+          (keydown.enter)="onChipKey($event, chip)"
+          (keydown.space)="onChipKey($event, chip)"
         >
           @if (chip.icon) {
             <ion-icon [name]="chip.icon"></ion-icon>
@@ -20768,13 +20854,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           }
           <ion-label>{{ getChipLabel(chip) }}</ion-label>
           @if (resolvedProps.removable && !chip.disabled) {
-            <ion-icon name="close" class="remove-icon" (click)="onRemoveChip($event, chip)"></ion-icon>
+            <button type="button" class="remove-button" [attr.aria-label]="removeLabel(chip)" (click)="onRemoveChip($event, chip)">
+              <ion-icon name="close" class="remove-icon" aria-hidden="true"></ion-icon>
+            </button>
           }
         </ion-chip>
       }
     </div>
-  `, styles: [":host{display:block}.chip-group{display:flex;gap:8px}.chip-group.wrap{flex-wrap:wrap}.chip-group:not(.wrap){overflow-x:auto;padding-bottom:4px}.chip-group:not(.wrap)::-webkit-scrollbar{height:4px}.chip-group:not(.wrap)::-webkit-scrollbar-thumb{background:var(--ion-color-light-shade);border-radius:2px}ion-chip{margin:0;cursor:pointer;transition:transform .2s,box-shadow .2s}ion-chip:hover:not([disabled]){transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}ion-chip:active:not([disabled]){transform:translateY(0)}ion-chip[disabled]{opacity:.5;cursor:not-allowed}ion-chip ion-icon{font-size:1rem}ion-chip .selected-icon{margin-right:4px}ion-chip .remove-icon{margin-left:4px;cursor:pointer;opacity:.7;transition:opacity .2s}ion-chip .remove-icon:hover{opacity:1}ion-chip ion-label{font-size:.875rem;font-weight:500}\n"] }]
-        }], propDecorators: { preset: [{
+  `, 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)}:host{display:block}.chip-group{display:flex;gap:8px}.chip-group.wrap{flex-wrap:wrap}.chip-group:not(.wrap){overflow-x:auto;padding-bottom:4px}.chip-group:not(.wrap)::-webkit-scrollbar{height:4px}.chip-group:not(.wrap)::-webkit-scrollbar-thumb{background:var(--ion-color-light-shade);border-radius:2px}ion-chip{margin:0;cursor:pointer;transition:transform .2s,box-shadow .2s}ion-chip:focus{outline:none}ion-chip:focus-visible{outline:.125rem solid var(--ion-color-primary, #7026df);outline-offset:2px;border-radius:inherit}ion-chip:hover:not([disabled]){transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}ion-chip:active:not([disabled]){transform:translateY(0)}ion-chip[disabled]{opacity:.5;cursor:not-allowed}ion-chip ion-icon{font-size:1rem}ion-chip .selected-icon{margin-right:4px}ion-chip .remove-button{display:inline-flex;align-items:center;justify-content:center;margin-left:4px;padding:0;border:none;background:none;line-height:0;cursor:pointer;border-radius:50%}ion-chip .remove-button:focus{outline:none}ion-chip .remove-button:focus-visible{outline:.125rem solid var(--ion-color-primary, #7026df);outline-offset:2px;border-radius:inherit}ion-chip .remove-icon{opacity:.7;transition:opacity .2s}.remove-button:hover ion-chip .remove-icon{opacity:1}ion-chip ion-label{font-size:.875rem;font-weight:500}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { preset: [{
                 type: Input
             }], props: [{
                 type: Input
@@ -20787,6 +20875,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }] } });
 
 addIcons({ star, starOutline, starHalf, heart, heartOutline, heartHalf });
+/**
+ * Defaults i18n (es/en) — auto-registrados si el consumer no proveyó el
+ * namespace `Rating`. Cubre el aria-label del grupo y de cada estrella.
+ */
+const RATING_I18N = {
+    es: { groupLabel: 'Valoración', starLabel: '{value} de {max}' },
+    en: { groupLabel: 'Rating', starLabel: '{value} of {max}' },
+};
 /**
  * val-rating
  *
@@ -20810,10 +20906,14 @@ addIcons({ star, starOutline, starHalf, heart, heartOutline, heartHalf });
 class RatingComponent {
     constructor() {
         this.presets = inject(PresetService);
+        this.i18n = inject(I18nService);
         this.props = {};
         this.resolvedProps = {};
         this.ratingChange = new EventEmitter();
         this.hoverValue = null;
+        if (!this.i18n.hasNamespace('Rating')) {
+            this.i18n.registerContent('Rating', RATING_I18N);
+        }
     }
     ngOnInit() {
         this.resolveProps();
@@ -20839,6 +20939,43 @@ class RatingComponent {
         const max = this.resolvedProps.max || 5;
         return Array.from({ length: max }, (_, i) => i + 1);
     }
+    groupLabel() {
+        this.i18n.lang();
+        return this.i18n.t('groupLabel', 'Rating');
+    }
+    starLabel(position) {
+        this.i18n.lang();
+        return this.i18n.t('starLabel', 'Rating', {
+            value: position.toString(),
+            max: (this.resolvedProps.max || 5).toString(),
+        });
+    }
+    /**
+     * Roving tabindex: solo una estrella es tabbable. La estrella del valor
+     * actual (o la primera si no hay valor) recibe `0`, el resto `-1`.
+     */
+    getStarTabindex(position) {
+        if (this.resolvedProps.readonly || this.resolvedProps.disabled)
+            return -1;
+        const value = this.resolvedProps.value || 0;
+        const focusIndex = value >= 1 ? Math.ceil(value) : 1;
+        return position === focusIndex ? 0 : -1;
+    }
+    /** Navegación con flechas: mueve el foco y selecciona la estrella vecina. */
+    onArrow(event, delta) {
+        if (this.resolvedProps.readonly || this.resolvedProps.disabled)
+            return;
+        event.preventDefault();
+        const max = this.resolvedProps.max || 5;
+        const current = this.resolvedProps.value >= 1 ? Math.ceil(this.resolvedProps.value) : 1;
+        const next = Math.min(max, Math.max(1, current + delta));
+        if (next === this.resolvedProps.value)
+            return;
+        this.ratingChange.emit({ value: next, previousValue: this.resolvedProps.value });
+        const target = event.target;
+        const buttons = target.closest('.rating-container')?.querySelectorAll('.rating-star');
+        buttons?.[next - 1]?.focus();
+    }
     getStarIcon(position) {
         const value = this.hoverValue !== null ? this.hoverValue : this.resolvedProps.value;
         const baseIcon = this.resolvedProps.icon || 'star';
@@ -20893,51 +21030,77 @@ class RatingComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RatingComponent, isStandalone: true, selector: "val-rating", inputs: { preset: "preset", props: "props" }, outputs: { ratingChange: "ratingChange" }, usesOnChanges: true, ngImport: i0, template: `
     <div
       class="rating-container"
+      role="radiogroup"
+      [attr.aria-label]="groupLabel()"
       [class.readonly]="resolvedProps.readonly"
       [class.disabled]="resolvedProps.disabled"
       [class]="'size-' + (resolvedProps.size || 'medium')"
     >
       @for (i of getStars(); track i) {
-        <ion-icon
-          [name]="getStarIcon(i)"
-          [color]="getStarColor(i)"
+        <button
+          type="button"
+          class="rating-star"
+          role="radio"
           [class.clickable]="!resolvedProps.readonly && !resolvedProps.disabled"
+          [attr.aria-checked]="i <= resolvedProps.value"
+          [attr.aria-label]="starLabel(i)"
+          [attr.tabindex]="getStarTabindex(i)"
+          [disabled]="resolvedProps.disabled"
           (click)="onStarClick(i)"
+          (keydown.arrowright)="onArrow($event, 1)"
+          (keydown.arrowup)="onArrow($event, 1)"
+          (keydown.arrowleft)="onArrow($event, -1)"
+          (keydown.arrowdown)="onArrow($event, -1)"
           (mouseenter)="onStarHover(i)"
           (mouseleave)="onStarLeave()"
-        ></ion-icon>
+        >
+          <ion-icon [name]="getStarIcon(i)" [color]="getStarColor(i)" aria-hidden="true"></ion-icon>
+        </button>
       }
       @if (resolvedProps.showValue) {
         <span class="rating-value">{{ displayValue }}</span>
       }
     </div>
-  `, isInline: true, styles: [":host{display:inline-block}.rating-container{display:inline-flex;align-items:center;gap:4px}.rating-container.readonly{pointer-events:none}.rating-container.disabled{opacity:.5;pointer-events:none}.rating-container.size-small ion-icon{font-size:1rem}.rating-container.size-medium ion-icon{font-size:1.5rem}.rating-container.size-large ion-icon{font-size:2rem}ion-icon{transition:transform .15s ease,color .15s ease}ion-icon.clickable{cursor:pointer}ion-icon.clickable:hover{transform:scale(1.2)}.rating-value{margin-left:8px;font-weight:600;color:var(--ion-color-dark)}.size-small .rating-value{font-size:.75rem}.size-medium .rating-value{font-size:.875rem}.size-large .rating-value{font-size:1.125rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
+  `, 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)}:host{display:inline-block}.rating-container{display:inline-flex;align-items:center;gap:4px}.rating-container.readonly{pointer-events:none}.rating-container.disabled{opacity:.5;pointer-events:none}.rating-container.size-small ion-icon{font-size:1rem}.rating-container.size-medium ion-icon{font-size:1.5rem}.rating-container.size-large ion-icon{font-size:2rem}.rating-star{display:inline-flex;align-items:center;justify-content:center;padding:0;margin:0;border:none;background:none;color:inherit;line-height:0;cursor:default}.rating-star:focus{outline:none}.rating-star:focus-visible{outline:.125rem solid var(--ion-color-primary, #7026df);outline-offset:2px;border-radius:inherit}.rating-star.clickable{cursor:pointer}.rating-star.clickable:hover ion-icon{transform:scale(1.2)}.rating-star:disabled{cursor:default}ion-icon{transition:transform .15s ease,color .15s ease}.rating-value{margin-left:8px;font-weight:600;color:var(--ion-color-dark)}.size-small .rating-value{font-size:.75rem}.size-medium .rating-value{font-size:.875rem}.size-large .rating-value{font-size:1.125rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RatingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'val-rating', standalone: true, imports: [CommonModule, IonIcon], template: `
     <div
       class="rating-container"
+      role="radiogroup"
+      [attr.aria-label]="groupLabel()"
       [class.readonly]="resolvedProps.readonly"
       [class.disabled]="resolvedProps.disabled"
       [class]="'size-' + (resolvedProps.size || 'medium')"
     >
       @for (i of getStars(); track i) {
-        <ion-icon
-          [name]="getStarIcon(i)"
-          [color]="getStarColor(i)"
+        <button
+          type="button"
+          class="rating-star"
+          role="radio"
           [class.clickable]="!resolvedProps.readonly && !resolvedProps.disabled"
+          [attr.aria-checked]="i <= resolvedProps.value"
+          [attr.aria-label]="starLabel(i)"
+          [attr.tabindex]="getStarTabindex(i)"
+          [disabled]="resolvedProps.disabled"
           (click)="onStarClick(i)"
+          (keydown.arrowright)="onArrow($event, 1)"
+          (keydown.arrowup)="onArrow($event, 1)"
+          (keydown.arrowleft)="onArrow($event, -1)"
+          (keydown.arrowdown)="onArrow($event, -1)"
           (mouseenter)="onStarHover(i)"
           (mouseleave)="onStarLeave()"
-        ></ion-icon>
+        >
+          <ion-icon [name]="getStarIcon(i)" [color]="getStarColor(i)" aria-hidden="true"></ion-icon>
+        </button>
       }
       @if (resolvedProps.showValue) {
         <span class="rating-value">{{ displayValue }}</span>
       }
     </div>
-  `, styles: [":host{display:inline-block}.rating-container{display:inline-flex;align-items:center;gap:4px}.rating-container.readonly{pointer-events:none}.rating-container.disabled{opacity:.5;pointer-events:none}.rating-container.size-small ion-icon{font-size:1rem}.rating-container.size-medium ion-icon{font-size:1.5rem}.rating-container.size-large ion-icon{font-size:2rem}ion-icon{transition:transform .15s ease,color .15s ease}ion-icon.clickable{cursor:pointer}ion-icon.clickable:hover{transform:scale(1.2)}.rating-value{margin-left:8px;font-weight:600;color:var(--ion-color-dark)}.size-small .rating-value{font-size:.75rem}.size-medium .rating-value{font-size:.875rem}.size-large .rating-value{font-size:1.125rem}\n"] }]
-        }], propDecorators: { preset: [{
+  `, 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)}:host{display:inline-block}.rating-container{display:inline-flex;align-items:center;gap:4px}.rating-container.readonly{pointer-events:none}.rating-container.disabled{opacity:.5;pointer-events:none}.rating-container.size-small ion-icon{font-size:1rem}.rating-container.size-medium ion-icon{font-size:1.5rem}.rating-container.size-large ion-icon{font-size:2rem}.rating-star{display:inline-flex;align-items:center;justify-content:center;padding:0;margin:0;border:none;background:none;color:inherit;line-height:0;cursor:default}.rating-star:focus{outline:none}.rating-star:focus-visible{outline:.125rem solid var(--ion-color-primary, #7026df);outline-offset:2px;border-radius:inherit}.rating-star.clickable{cursor:pointer}.rating-star.clickable:hover ion-icon{transform:scale(1.2)}.rating-star:disabled{cursor:default}ion-icon{transition:transform .15s ease,color .15s ease}.rating-value{margin-left:8px;font-weight:600;color:var(--ion-color-dark)}.size-small .rating-value{font-size:.75rem}.size-medium .rating-value{font-size:.875rem}.size-large .rating-value{font-size:1.125rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { preset: [{
                 type: Input
             }], props: [{
                 type: Input
@@ -21303,6 +21466,14 @@ addIcons({
     flag,
     share,
 });
+/**
+ * Defaults i18n (es/en) — auto-registrados si el consumer no proveyó el
+ * namespace `Comment`. Cubre el aria-label del autor (avatar + nombre).
+ */
+const COMMENT_I18N = {
+    es: { viewProfileOf: 'Ver perfil de {name}' },
+    en: { viewProfileOf: 'View profile of {name}' },
+};
 /**
  * val-comment
  *
@@ -21353,10 +21524,18 @@ class CommentComponent {
         this.loadMoreClick = new EventEmitter();
         this.collapseToggle = new EventEmitter();
         this.displayContent = '';
+        if (!this.i18n.hasNamespace('Comment')) {
+            this.i18n.registerContent('Comment', COMMENT_I18N);
+        }
     }
     ngOnInit() {
         this.displayContent = this.props.content || this.props.contentFallback || '';
     }
+    /** Aria-label accesible del autor (avatar + nombre clicables). */
+    authorLabel() {
+        this.i18n.lang();
+        return this.i18n.t('viewProfileOf', 'Comment', { name: this.props.author.name });
+    }
     getInitials(name) {
         return name
             .split(' ')
@@ -21525,7 +21704,7 @@ class CommentComponent {
       }
 
       <div class="comment-main">
-        <div class="comment-avatar" (click)="onAuthorClick()">
+        <button type="button" class="comment-avatar" [attr.aria-label]="authorLabel()" (click)="onAuthorClick()">
           @if (props.author.avatar) {
             <val-avatar [props]="props.author.avatar"></val-avatar>
           } @else {
@@ -21533,11 +21712,11 @@ class CommentComponent {
               {{ getInitials(props.author.name) }}
             </div>
           }
-        </div>
+        </button>
 
         <div class="comment-body">
           <div class="comment-header">
-            <div class="author-info" (click)="onAuthorClick()">
+            <button type="button" class="author-info" [attr.aria-label]="authorLabel()" (click)="onAuthorClick()">
               <span class="author-name">{{ props.author.name }}</span>
               @if (props.author.verified) {
                 <ion-icon name="checkmark-circle" class="verified-badge"></ion-icon>
@@ -21545,7 +21724,7 @@ class CommentComponent {
               @if (props.author.username) {
                 <span class="author-username">&#64;{{ props.author.username }}</span>
               }
-            </div>
+            </button>
 
             <div class="comment-meta">
               <span class="timestamp">{{ formatTimestamp(props.timestamp) }}</span>
@@ -21686,7 +21865,7 @@ class CommentComponent {
         </div>
       }
     </div>
-  `, isInline: true, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}:host{display:block}.comment{--indent-size: 24px;--max-indent: 72px;padding:12px 0}.comment.highlighted{background-color:rgba(var(--ion-color-primary-rgb),.08);border-radius:8px;padding:12px;margin:-4px}.comment.pinned{border-left:3px solid var(--ion-color-primary);padding-left:12px}.comment.collapsed{opacity:.7}.pinned-indicator{display:flex;align-items:center;gap:4px;font-size:.75rem;color:var(--ion-color-primary);margin-bottom:8px;padding-left:44px}.pinned-indicator ion-icon{font-size:.875rem}.comment-main{display:flex;gap:12px}.comment-avatar{flex-shrink:0;cursor:pointer}.comment-avatar val-avatar{--size: 36px}.comment-avatar .avatar-placeholder{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--ion-color-primary),var(--ion-color-secondary));display:flex;align-items:center;justify-content:center;color:#fff;font-size:.875rem;font-weight:600}.comment-body{flex:1;min-width:0}.comment-header{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:4px}.author-info{display:flex;align-items:center;gap:4px;cursor:pointer}.author-info:hover .author-name{text-decoration:underline}.author-name{font-weight:600;font-size:.875rem;color:var(--ion-text-color)}.verified-badge{color:var(--ion-color-primary);font-size:1rem}.author-username{font-size:.8125rem;color:var(--ion-color-medium)}.comment-meta{display:flex;align-items:center;gap:6px;margin-left:auto}.timestamp{font-size:.75rem;color:var(--ion-color-medium)}.edited-label{font-size:.6875rem;color:var(--ion-color-medium);font-style:italic}.more-button{--padding-start: 4px;--padding-end: 4px;margin:0;height:28px}.more-button ion-icon{font-size:1.125rem;color:var(--ion-color-medium)}.menu-divider{height:1px;background-color:var(--ion-color-light);margin:4px 0}.comment-content{font-size:.875rem;line-height:1.5;color:var(--ion-text-color);word-wrap:break-word;overflow-wrap:break-word}.comment-content :global(.comment-link){color:var(--ion-color-primary);text-decoration:none}.comment-content :global(.comment-link):hover{text-decoration:underline}.comment-content :global(.comment-mention){color:var(--ion-color-primary);font-weight:500;cursor:pointer}.comment-content :global(.comment-mention):hover{text-decoration:underline}.comment-content :global(.comment-hashtag){color:var(--ion-color-primary);cursor:pointer}.comment-content :global(.comment-hashtag):hover{text-decoration:underline}.comment-reactions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.reaction-button{display:flex;align-items:center;gap:4px;background:none;border:none;padding:4px 8px;border-radius:16px;cursor:pointer;font-size:.8125rem;color:var(--reaction-color, var(--ion-color-medium));transition:all .2s ease;background-color:transparent}.reaction-button:hover{background-color:rgba(var(--ion-color-medium-rgb),.1)}.reaction-button.active{background-color:rgba(var(--ion-color-primary-rgb),.1)}.reaction-button.active ion-icon{transform:scale(1.1)}.reaction-button ion-icon{font-size:1.125rem;transition:transform .2s ease}.reaction-button .reaction-count{font-weight:500}.comment-actions{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;margin-left:-8px}.comment-actions ion-button{--padding-start: 8px;--padding-end: 8px;font-size:.8125rem;height:32px;text-transform:none;font-weight:500}.expand-button,.collapse-button,.load-more-button,.view-replies-button{display:flex;align-items:center;gap:6px;background:none;border:none;padding:8px 12px;cursor:pointer;font-size:.8125rem;color:var(--ion-color-primary);border-radius:8px;transition:background-color .2s}.expand-button:hover,.collapse-button:hover,.load-more-button:hover,.view-replies-button:hover{background-color:rgba(var(--ion-color-primary-rgb),.1)}.expand-button ion-icon,.collapse-button ion-icon,.load-more-button ion-icon,.view-replies-button ion-icon{font-size:1rem}.expand-button{margin-top:4px;color:var(--ion-color-medium)}.comment-children{margin-top:12px;padding-left:min(var(--indent-size),var(--max-indent));border-left:2px solid var(--ion-color-light-shade)}.comment-children val-comment{display:block}.comment-children val-comment:first-of-type .comment{padding-top:0}.load-more-button,.view-replies-button{margin-top:8px;margin-left:0}ion-popover{--width: 200px}ion-popover ion-list{padding:4px 0}ion-popover ion-item{--min-height: 40px;--padding-start: 12px;font-size:.875rem}ion-popover ion-item ion-icon{font-size:1.125rem;margin-right:8px}:host-context(val-comment) .comment-avatar val-avatar{--size: max(28px, 36px - 2px)}:host-context(val-comment) .comment-avatar .avatar-placeholder{width:max(28px,36px - 2px);height:max(28px,36px - 2px);font-size:max(.6875rem,.8125rem)}:host-context(val-comment) .comment-avatar val-avatar{--size: max(28px, 36px - 4px)}:host-context(val-comment) .comment-avatar .avatar-placeholder{width:max(28px,36px - 4px);height:max(28px,36px - 4px);font-size:max(.6875rem,.75rem)}:host-context(val-comment) .comment-avatar val-avatar{--size: max(28px, 36px - 6px)}:host-context(val-comment) .comment-avatar .avatar-placeholder{width:max(28px,36px - 6px);height:max(28px,36px - 6px);font-size:max(.6875rem,.6875rem)}:host-context(val-comment) .comment-avatar val-avatar{--size: max(28px, 36px - 8px)}:host-context(val-comment) .comment-avatar .avatar-placeholder{width:max(28px,36px - 8px);height:max(28px,36px - 8px);font-size:max(.6875rem,.625rem)}:host-context(val-comment) .comment-avatar val-avatar{--size: max(28px, 36px - 10px)}:host-context(val-comment) .comment-avatar .avatar-placeholder{width:max(28px,36px - 10px);height:max(28px,36px - 10px);font-size:max(.6875rem,.5625rem)}:host-context(.dark) .comment.highlighted,:host-context(.ion-palette-dark) .comment.highlighted,:host-context(html.ion-palette-dark) .comment.highlighted,:host-context(body.dark) .comment.highlighted,:host-context([data-theme=dark]) .comment.highlighted{background-color:rgba(var(--ion-color-primary-rgb),.12)}:host-context(.dark) .avatar-placeholder,:host-context(.ion-palette-dark) .avatar-placeholder,:host-context(html.ion-palette-dark) .avatar-placeholder,:host-context(body.dark) .avatar-placeholder,:host-context([data-theme=dark]) .avatar-placeholder{background:linear-gradient(135deg,var(--ion-color-primary-shade),var(--ion-color-secondary-shade))}\n"], dependencies: [{ kind: "component", type: CommentComponent, selector: "val-comment", inputs: ["props"], outputs: ["authorClick", "reactionClick", "actionClick", "menuItemClick", "loadMoreClick", "collapseToggle"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { 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: IonPopover, selector: "ion-popover" }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: AvatarComponent, selector: "val-avatar", inputs: ["preset", "props"], outputs: ["onClick"] }] }); }
+  `, 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)}:host{display:block}.comment{--indent-size: 24px;--max-indent: 72px;padding:12px 0}.comment.highlighted{background-color:rgba(var(--ion-color-primary-rgb),.08);border-radius:8px;padding:12px;margin:-4px}.comment.pinned{border-left:3px solid var(--ion-color-primary);padding-left:12px}.comment.collapsed{opacity:.7}.pinned-indicator{display:flex;align-items:center;gap:4px;font-size:.75rem;color:var(--ion-color-primary);margin-bottom:8px;padding-left:44px}.pinned-indicator ion-icon{font-size:.875rem}.comment-main{display:flex;gap:12px}.comment-avatar{flex-shrink:0;cursor:pointer;padding:0;border:none;background:none;line-height:0;border-radius:50%}.comment-avatar:focus{outline:none}.comment-avatar:focus-visible{outline:.125rem solid var(--ion-color-primary, #7026df);outline-offset:2px;border-radius:inherit}.comment-avatar val-avatar{--size: 36px}.comment-avatar .avatar-placeholder{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--ion-color-primary),var(--ion-color-secondary));display:flex;align-items:center;justify-content:center;color:#fff;font-size:.875rem;font-weight:600}.comment-body{flex:1;min-width:0}.comment-header{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:4px}.author-info{display:flex;align-items:center;gap:4px;cursor:pointer;padding:0;border:none;background:none;font:inherit;color:inherit;text-align:inherit}.author-info:focus{outline:none}.author-info:focus-visible{outline:.125rem solid var(--ion-color-primary, #7026df);outline-offset:2px;border-radius:inherit}.author-info:hover .author-name{text-decoration:underline}.author-name{font-weight:600;font-size:.875rem;color:var(--ion-text-color)}.verified-badge{color:var(--ion-color-primary);font-size:1rem}.author-username{font-size:.8125rem;color:var(--ion-color-medium)}.comment-meta{display:flex;align-items:center;gap:6px;margin-left:auto}.timestamp{font-size:.75rem;color:var(--ion-color-medium)}.edited-label{font-size:.6875rem;color:var(--ion-color-medium);font-style:italic}.more-button{--padding-start: 4px;--padding-end: 4px;margin:0;height:28px}.more-button ion-icon{font-size:1.125rem;color:var(--ion-color-medium)}.menu-divider{height:1px;background-color:var(--ion-color-light);margin:4px 0}.comment-content{font-size:.875rem;line-height:1.5;color:var(--ion-text-color);word-wrap:break-word;overflow-wrap:break-word}.comment-content :global(.comment-link){color:var(--ion-color-primary);text-decoration:none}.comment-content :global(.comment-link):hover{text-decoration:underline}.comment-content :global(.comment-mention){color:var(--ion-color-primary);font-weight:500;cursor:pointer}.comment-content :global(.comment-mention):hover{text-decoration:underline}.comment-content :global(.comment-hashtag){color:var(--ion-color-primary);cursor:pointer}.comment-content :global(.comment-hashtag):hover{text-decoration:underline}.comment-reactions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.reaction-button{display:flex;align-items:center;gap:4px;background:none;border:none;padding:4px 8px;border-radius:16px;cursor:pointer;font-size:.8125rem;color:var(--reaction-color, var(--ion-color-medium));transition:all .2s ease;background-color:transparent}.reaction-button:hover{background-color:rgba(var(--ion-color-medium-rgb),.1)}.reaction-button.active{background-color:rgba(var(--ion-color-primary-rgb),.1)}.reaction-button.active ion-icon{transform:scale(1.1)}.reaction-button ion-icon{font-size:1.125rem;transition:transform .2s ease}.reaction-button .reaction-count{font-weight:500}.comment-actions{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;margin-left:-8px}.comment-actions ion-button{--padding-start: 8px;--padding-end: 8px;font-size:.8125rem;height:32px;text-transform:none;font-weight:500}.expand-button,.collapse-button,.load-more-button,.view-replies-button{display:flex;align-items:center;gap:6px;background:none;border:none;padding:8px 12px;cursor:pointer;font-size:.8125rem;color:var(--ion-color-primary);border-radius:8px;transition:background-color .2s}.expand-button:hover,.collapse-button:hover,.load-more-button:hover,.view-replies-button:hover{background-color:rgba(var(--ion-color-primary-rgb),.1)}.expand-button ion-icon,.collapse-button ion-icon,.load-more-button ion-icon,.view-replies-button ion-icon{font-size:1rem}.expand-button{margin-top:4px;color:var(--ion-color-medium)}.comment-children{margin-top:12px;padding-left:min(var(--indent-size),var(--max-indent));border-left:2px solid var(--ion-color-light-shade)}.comment-children val-comment{display:block}.comment-children val-comment:first-of-type .comment{padding-top:0}.load-more-button,.view-replies-button{margin-top:8px;margin-left:0}ion-popover{--width: 200px}ion-popover ion-list{padding:4px 0}ion-popover ion-item{--min-height: 40px;--padding-start: 12px;font-size:.875rem}ion-popover ion-item ion-icon{font-size:1.125rem;margin-right:8px}:host-context(val-comment) .comment-avatar val-avatar{--size: max(28px, 36px - 2px)}:host-context(val-comment) .comment-avatar .avatar-placeholder{width:max(28px,36px - 2px);height:max(28px,36px - 2px);font-size:max(.6875rem,.8125rem)}:host-context(val-comment) .comment-avatar val-avatar{--size: max(28px, 36px - 4px)}:host-context(val-comment) .comment-avatar .avatar-placeholder{width:max(28px,36px - 4px);height:max(28px,36px - 4px);font-size:max(.6875rem,.75rem)}:host-context(val-comment) .comment-avatar val-avatar{--size: max(28px, 36px - 6px)}:host-context(val-comment) .comment-avatar .avatar-placeholder{width:max(28px,36px - 6px);height:max(28px,36px - 6px);font-size:max(.6875rem,.6875rem)}:host-context(val-comment) .comment-avatar val-avatar{--size: max(28px, 36px - 8px)}:host-context(val-comment) .comment-avatar .avatar-placeholder{width:max(28px,36px - 8px);height:max(28px,36px - 8px);font-size:max(.6875rem,.625rem)}:host-context(val-comment) .comment-avatar val-avatar{--size: max(28px, 36px - 10px)}:host-context(val-comment) .comment-avatar .avatar-placeholder{width:max(28px,36px - 10px);height:max(28px,36px - 10px);font-size:max(.6875rem,.5625rem)}:host-context(.dark) .comment.highlighted,:host-context(.ion-palette-dark) .comment.highlighted,:host-context(html.ion-palette-dark) .comment.highlighted,:host-context(body.dark) .comment.highlighted,:host-context([data-theme=dark]) .comment.highlighted{background-color:rgba(var(--ion-color-primary-rgb),.12)}:host-context(.dark) .avatar-placeholder,:host-context(.ion-palette-dark) .avatar-placeholder,:host-context(html.ion-palette-dark) .avatar-placeholder,:host-context(body.dark) .avatar-placeholder,:host-context([data-theme=dark]) .avatar-placeholder{background:linear-gradient(135deg,var(--ion-color-primary-shade),var(--ion-color-secondary-shade))}\n"], dependencies: [{ kind: "component", type: CommentComponent, selector: "val-comment", inputs: ["props"], outputs: ["authorClick", "reactionClick", "actionClick", "menuItemClick", "loadMoreClick", "collapseToggle"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { 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: IonPopover, selector: "ion-popover" }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: AvatarComponent, selector: "val-avatar", inputs: ["preset", "props"], outputs: ["onClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CommentComponent, decorators: [{
             type: Component,
@@ -21715,7 +21894,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       }
 
       <div class="comment-main">
-        <div class="comment-avatar" (click)="onAuthorClick()">
+        <button type="button" class="comment-avatar" [attr.aria-label]="authorLabel()" (click)="onAuthorClick()">
           @if (props.author.avatar) {
             <val-avatar [props]="props.author.avatar"></val-avatar>
           } @else {
@@ -21723,11 +21902,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
               {{ getInitials(props.author.name) }}
             </div>
           }
-        </div>
+        </button>
 
         <div class="comment-body">
           <div class="comment-header">
-            <div class="author-info" (click)="onAuthorClick()">
+            <button type="button" class="author-info" [attr.aria-label]="authorLabel()" (click)="onAuthorClick()">
               <span class="author-name">{{ props.author.name }}</span>
               @if (props.author.verified) {
                 <ion-icon name="checkmark-circle" class="verified-badge"></ion-icon>
@@ -21735,7 +21914,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
               @if (props.author.username) {
                 <span class="author-username">&#64;{{ props.author.username }}</span>
               }
-            </div>
+            </button>
 
             <div class="comment-meta">
               <span class="timestamp">{{ formatTimestamp(props.timestamp) }}</span>
@@ -21876,8 +22055,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </div>
       }
     </div>
-  `, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}:host{display:block}.comment{--indent-size: 24px;--max-indent: 72px;padding:12px 0}.comment.highlighted{background-color:rgba(var(--ion-color-primary-rgb),.08);border-radius:8px;padding:12px;margin:-4px}.comment.pinned{border-left:3px solid var(--ion-color-primary);padding-left:12px}.comment.collapsed{opacity:.7}.pinned-indicator{display:flex;align-items:center;gap:4px;font-size:.75rem;color:var(--ion-color-primary);margin-bottom:8px;padding-left:44px}.pinned-indicator ion-icon{font-size:.875rem}.comment-main{display:flex;gap:12px}.comment-avatar{flex-shrink:0;cursor:pointer}.comment-avatar val-avatar{--size: 36px}.comment-avatar .avatar-placeholder{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--ion-color-primary),var(--ion-color-secondary));display:flex;align-items:center;justify-content:center;color:#fff;font-size:.875rem;font-weight:600}.comment-body{flex:1;min-width:0}.comment-header{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:4px}.author-info{display:flex;align-items:center;gap:4px;cursor:pointer}.author-info:hover .author-name{text-decoration:underline}.author-name{font-weight:600;font-size:.875rem;color:var(--ion-text-color)}.verified-badge{color:var(--ion-color-primary);font-size:1rem}.author-username{font-size:.8125rem;color:var(--ion-color-medium)}.comment-meta{display:flex;align-items:center;gap:6px;margin-left:auto}.timestamp{font-size:.75rem;color:var(--ion-color-medium)}.edited-label{font-size:.6875rem;color:var(--ion-color-medium);font-style:italic}.more-button{--padding-start: 4px;--padding-end: 4px;margin:0;height:28px}.more-button ion-icon{font-size:1.125rem;color:var(--ion-color-medium)}.menu-divider{height:1px;background-color:var(--ion-color-light);margin:4px 0}.comment-content{font-size:.875rem;line-height:1.5;color:var(--ion-text-color);word-wrap:break-word;overflow-wrap:break-word}.comment-content :global(.comment-link){color:var(--ion-color-primary);text-decoration:none}.comment-content :global(.comment-link):hover{text-decoration:underline}.comment-content :global(.comment-mention){color:var(--ion-color-primary);font-weight:500;cursor:pointer}.comment-content :global(.comment-mention):hover{text-decoration:underline}.comment-content :global(.comment-hashtag){color:var(--ion-color-primary);cursor:pointer}.comment-content :global(.comment-hashtag):hover{text-decoration:underline}.comment-reactions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.reaction-button{display:flex;align-items:center;gap:4px;background:none;border:none;padding:4px 8px;border-radius:16px;cursor:pointer;font-size:.8125rem;color:var(--reaction-color, var(--ion-color-medium));transition:all .2s ease;background-color:transparent}.reaction-button:hover{background-color:rgba(var(--ion-color-medium-rgb),.1)}.reaction-button.active{background-color:rgba(var(--ion-color-primary-rgb),.1)}.reaction-button.active ion-icon{transform:scale(1.1)}.reaction-button ion-icon{font-size:1.125rem;transition:transform .2s ease}.reaction-button .reaction-count{font-weight:500}.comment-actions{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;margin-left:-8px}.comment-actions ion-button{--padding-start: 8px;--padding-end: 8px;font-size:.8125rem;height:32px;text-transform:none;font-weight:500}.expand-button,.collapse-button,.load-more-button,.view-replies-button{display:flex;align-items:center;gap:6px;background:none;border:none;padding:8px 12px;cursor:pointer;font-size:.8125rem;color:var(--ion-color-primary);border-radius:8px;transition:background-color .2s}.expand-button:hover,.collapse-button:hover,.load-more-button:hover,.view-replies-button:hover{background-color:rgba(var(--ion-color-primary-rgb),.1)}.expand-button ion-icon,.collapse-button ion-icon,.load-more-button ion-icon,.view-replies-button ion-icon{font-size:1rem}.expand-button{margin-top:4px;color:var(--ion-color-medium)}.comment-children{margin-top:12px;padding-left:min(var(--indent-size),var(--max-indent));border-left:2px solid var(--ion-color-light-shade)}.comment-children val-comment{display:block}.comment-children val-comment:first-of-type .comment{padding-top:0}.load-more-button,.view-replies-button{margin-top:8px;margin-left:0}ion-popover{--width: 200px}ion-popover ion-list{padding:4px 0}ion-popover ion-item{--min-height: 40px;--padding-start: 12px;font-size:.875rem}ion-popover ion-item ion-icon{font-size:1.125rem;margin-right:8px}:host-context(val-comment) .comment-avatar val-avatar{--size: max(28px, 36px - 2px)}:host-context(val-comment) .comment-avatar .avatar-placeholder{width:max(28px,36px - 2px);height:max(28px,36px - 2px);font-size:max(.6875rem,.8125rem)}:host-context(val-comment) .comment-avatar val-avatar{--size: max(28px, 36px - 4px)}:host-context(val-comment) .comment-avatar .avatar-placeholder{width:max(28px,36px - 4px);height:max(28px,36px - 4px);font-size:max(.6875rem,.75rem)}:host-context(val-comment) .comment-avatar val-avatar{--size: max(28px, 36px - 6px)}:host-context(val-comment) .comment-avatar .avatar-placeholder{width:max(28px,36px - 6px);height:max(28px,36px - 6px);font-size:max(.6875rem,.6875rem)}:host-context(val-comment) .comment-avatar val-avatar{--size: max(28px, 36px - 8px)}:host-context(val-comment) .comment-avatar .avatar-placeholder{width:max(28px,36px - 8px);height:max(28px,36px - 8px);font-size:max(.6875rem,.625rem)}:host-context(val-comment) .comment-avatar val-avatar{--size: max(28px, 36px - 10px)}:host-context(val-comment) .comment-avatar .avatar-placeholder{width:max(28px,36px - 10px);height:max(28px,36px - 10px);font-size:max(.6875rem,.5625rem)}:host-context(.dark) .comment.highlighted,:host-context(.ion-palette-dark) .comment.highlighted,:host-context(html.ion-palette-dark) .comment.highlighted,:host-context(body.dark) .comment.highlighted,:host-context([data-theme=dark]) .comment.highlighted{background-color:rgba(var(--ion-color-primary-rgb),.12)}:host-context(.dark) .avatar-placeholder,:host-context(.ion-palette-dark) .avatar-placeholder,:host-context(html.ion-palette-dark) .avatar-placeholder,:host-context(body.dark) .avatar-placeholder,:host-context([data-theme=dark]) .avatar-placeholder{background:linear-gradient(135deg,var(--ion-color-primary-shade),var(--ion-color-secondary-shade))}\n"] }]
-        }], propDecorators: { props: [{
+  `, 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)}:host{display:block}.comment{--indent-size: 24px;--max-indent: 72px;padding:12px 0}.comment.highlighted{background-color:rgba(var(--ion-color-primary-rgb),.08);border-radius:8px;padding:12px;margin:-4px}.comment.pinned{border-left:3px solid var(--ion-color-primary);padding-left:12px}.comment.collapsed{opacity:.7}.pinned-indicator{display:flex;align-items:center;gap:4px;font-size:.75rem;color:var(--ion-color-primary);margin-bottom:8px;padding-left:44px}.pinned-indicator ion-icon{font-size:.875rem}.comment-main{display:flex;gap:12px}.comment-avatar{flex-shrink:0;cursor:pointer;padding:0;border:none;background:none;line-height:0;border-radius:50%}.comment-avatar:focus{outline:none}.comment-avatar:focus-visible{outline:.125rem solid var(--ion-color-primary, #7026df);outline-offset:2px;border-radius:inherit}.comment-avatar val-avatar{--size: 36px}.comment-avatar .avatar-placeholder{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--ion-color-primary),var(--ion-color-secondary));display:flex;align-items:center;justify-content:center;color:#fff;font-size:.875rem;font-weight:600}.comment-body{flex:1;min-width:0}.comment-header{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:4px}.author-info{display:flex;align-items:center;gap:4px;cursor:pointer;padding:0;border:none;background:none;font:inherit;color:inherit;text-align:inherit}.author-info:focus{outline:none}.author-info:focus-visible{outline:.125rem solid var(--ion-color-primary, #7026df);outline-offset:2px;border-radius:inherit}.author-info:hover .author-name{text-decoration:underline}.author-name{font-weight:600;font-size:.875rem;color:var(--ion-text-color)}.verified-badge{color:var(--ion-color-primary);font-size:1rem}.author-username{font-size:.8125rem;color:var(--ion-color-medium)}.comment-meta{display:flex;align-items:center;gap:6px;margin-left:auto}.timestamp{font-size:.75rem;color:var(--ion-color-medium)}.edited-label{font-size:.6875rem;color:var(--ion-color-medium);font-style:italic}.more-button{--padding-start: 4px;--padding-end: 4px;margin:0;height:28px}.more-button ion-icon{font-size:1.125rem;color:var(--ion-color-medium)}.menu-divider{height:1px;background-color:var(--ion-color-light);margin:4px 0}.comment-content{font-size:.875rem;line-height:1.5;color:var(--ion-text-color);word-wrap:break-word;overflow-wrap:break-word}.comment-content :global(.comment-link){color:var(--ion-color-primary);text-decoration:none}.comment-content :global(.comment-link):hover{text-decoration:underline}.comment-content :global(.comment-mention){color:var(--ion-color-primary);font-weight:500;cursor:pointer}.comment-content :global(.comment-mention):hover{text-decoration:underline}.comment-content :global(.comment-hashtag){color:var(--ion-color-primary);cursor:pointer}.comment-content :global(.comment-hashtag):hover{text-decoration:underline}.comment-reactions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.reaction-button{display:flex;align-items:center;gap:4px;background:none;border:none;padding:4px 8px;border-radius:16px;cursor:pointer;font-size:.8125rem;color:var(--reaction-color, var(--ion-color-medium));transition:all .2s ease;background-color:transparent}.reaction-button:hover{background-color:rgba(var(--ion-color-medium-rgb),.1)}.reaction-button.active{background-color:rgba(var(--ion-color-primary-rgb),.1)}.reaction-button.active ion-icon{transform:scale(1.1)}.reaction-button ion-icon{font-size:1.125rem;transition:transform .2s ease}.reaction-button .reaction-count{font-weight:500}.comment-actions{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;margin-left:-8px}.comment-actions ion-button{--padding-start: 8px;--padding-end: 8px;font-size:.8125rem;height:32px;text-transform:none;font-weight:500}.expand-button,.collapse-button,.load-more-button,.view-replies-button{display:flex;align-items:center;gap:6px;background:none;border:none;padding:8px 12px;cursor:pointer;font-size:.8125rem;color:var(--ion-color-primary);border-radius:8px;transition:background-color .2s}.expand-button:hover,.collapse-button:hover,.load-more-button:hover,.view-replies-button:hover{background-color:rgba(var(--ion-color-primary-rgb),.1)}.expand-button ion-icon,.collapse-button ion-icon,.load-more-button ion-icon,.view-replies-button ion-icon{font-size:1rem}.expand-button{margin-top:4px;color:var(--ion-color-medium)}.comment-children{margin-top:12px;padding-left:min(var(--indent-size),var(--max-indent));border-left:2px solid var(--ion-color-light-shade)}.comment-children val-comment{display:block}.comment-children val-comment:first-of-type .comment{padding-top:0}.load-more-button,.view-replies-button{margin-top:8px;margin-left:0}ion-popover{--width: 200px}ion-popover ion-list{padding:4px 0}ion-popover ion-item{--min-height: 40px;--padding-start: 12px;font-size:.875rem}ion-popover ion-item ion-icon{font-size:1.125rem;margin-right:8px}:host-context(val-comment) .comment-avatar val-avatar{--size: max(28px, 36px - 2px)}:host-context(val-comment) .comment-avatar .avatar-placeholder{width:max(28px,36px - 2px);height:max(28px,36px - 2px);font-size:max(.6875rem,.8125rem)}:host-context(val-comment) .comment-avatar val-avatar{--size: max(28px, 36px - 4px)}:host-context(val-comment) .comment-avatar .avatar-placeholder{width:max(28px,36px - 4px);height:max(28px,36px - 4px);font-size:max(.6875rem,.75rem)}:host-context(val-comment) .comment-avatar val-avatar{--size: max(28px, 36px - 6px)}:host-context(val-comment) .comment-avatar .avatar-placeholder{width:max(28px,36px - 6px);height:max(28px,36px - 6px);font-size:max(.6875rem,.6875rem)}:host-context(val-comment) .comment-avatar val-avatar{--size: max(28px, 36px - 8px)}:host-context(val-comment) .comment-avatar .avatar-placeholder{width:max(28px,36px - 8px);height:max(28px,36px - 8px);font-size:max(.6875rem,.625rem)}:host-context(val-comment) .comment-avatar val-avatar{--size: max(28px, 36px - 10px)}:host-context(val-comment) .comment-avatar .avatar-placeholder{width:max(28px,36px - 10px);height:max(28px,36px - 10px);font-size:max(.6875rem,.5625rem)}:host-context(.dark) .comment.highlighted,:host-context(.ion-palette-dark) .comment.highlighted,:host-context(html.ion-palette-dark) .comment.highlighted,:host-context(body.dark) .comment.highlighted,:host-context([data-theme=dark]) .comment.highlighted{background-color:rgba(var(--ion-color-primary-rgb),.12)}:host-context(.dark) .avatar-placeholder,:host-context(.ion-palette-dark) .avatar-placeholder,:host-context(html.ion-palette-dark) .avatar-placeholder,:host-context(body.dark) .avatar-placeholder,:host-context([data-theme=dark]) .avatar-placeholder{background:linear-gradient(135deg,var(--ion-color-primary-shade),var(--ion-color-secondary-shade))}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input
             }], authorClick: [{
                 type: Output
@@ -25360,42 +25539,86 @@ class FeaturesListComponent {
       [class.features-list--center]="config().alignment === 'center'"
     >
       @for (feature of visibleFeatures(); track feature.titleKey) {
-        <div class="feature" [class.feature--clickable]="feature.token != null" (click)="onItem(feature)">
-          <div
-            class="feature__icon"
-            [style.color]="iconColorStyle()"
-            [style.width.px]="config().iconSize"
-            [style.height.px]="config().iconSize"
+        @if (feature.token != null) {
+          <button
+            type="button"
+            class="feature feature--clickable"
+            [attr.aria-label]="getTitle(feature)"
+            (click)="onItem(feature)"
           >
-            @if (feature.image) {
-              <img
-                class="feature__image"
-                [class.feature__image--circle]="config().imageShape === 'circle'"
-                [src]="feature.image"
-                [alt]="getTitle(feature)"
-              />
-            } @else if (feature.icon === 'custom' && feature.svgPath) {
-              <svg
-                [attr.width]="config().iconSize"
-                [attr.height]="config().iconSize"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="1.5"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <path [attr.d]="feature.svgPath" />
-              </svg>
-            } @else if (feature.icon) {
-              <ion-icon [name]="feature.icon" [style.font-size.px]="config().iconSize"></ion-icon>
-            }
-          </div>
-          <div class="feature__content">
-            <strong class="feature__title">{{ getTitle(feature) }}</strong>
-            <p class="feature__description">{{ getDescription(feature) }}</p>
+            <div
+              class="feature__icon"
+              [style.color]="iconColorStyle()"
+              [style.width.px]="config().iconSize"
+              [style.height.px]="config().iconSize"
+            >
+              @if (feature.image) {
+                <img
+                  class="feature__image"
+                  [class.feature__image--circle]="config().imageShape === 'circle'"
+                  [src]="feature.image"
+                  [alt]="getTitle(feature)"
+                />
+              } @else if (feature.icon === 'custom' && feature.svgPath) {
+                <svg
+                  [attr.width]="config().iconSize"
+                  [attr.height]="config().iconSize"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path [attr.d]="feature.svgPath" />
+                </svg>
+              } @else if (feature.icon) {
+                <ion-icon [name]="feature.icon" [style.font-size.px]="config().iconSize"></ion-icon>
+              }
+            </div>
+            <div class="feature__content">
+              <strong class="feature__title">{{ getTitle(feature) }}</strong>
+              <p class="feature__description">{{ getDescription(feature) }}</p>
+            </div>
+          </button>
+        } @else {
+          <div class="feature">
+            <div
+              class="feature__icon"
+              [style.color]="iconColorStyle()"
+              [style.width.px]="config().iconSize"
+              [style.height.px]="config().iconSize"
+            >
+              @if (feature.image) {
+                <img
+                  class="feature__image"
+                  [class.feature__image--circle]="config().imageShape === 'circle'"
+                  [src]="feature.image"
+                  [alt]="getTitle(feature)"
+                />
+              } @else if (feature.icon === 'custom' && feature.svgPath) {
+                <svg
+                  [attr.width]="config().iconSize"
+                  [attr.height]="config().iconSize"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path [attr.d]="feature.svgPath" />
+                </svg>
+              } @else if (feature.icon) {
+                <ion-icon [name]="feature.icon" [style.font-size.px]="config().iconSize"></ion-icon>
+              }
+            </div>
+            <div class="feature__content">
+              <strong class="feature__title">{{ getTitle(feature) }}</strong>
+              <p class="feature__description">{{ getDescription(feature) }}</p>
+            </div>
           </div>
-        </div>
+        }
       }
 
       @if (canCollapse()) {
@@ -25410,7 +25633,7 @@ class FeaturesListComponent {
         </a>
       }
     </div>
-  `, isInline: true, styles: [":host{display:block}.features-list{display:flex}.features-list--vertical{flex-direction:column}.features-list--horizontal{flex-direction:row;flex-wrap:wrap}.features-list--horizontal .feature{flex:1;min-width:200px}.features-list--gap-small{gap:1rem}.features-list--gap-medium{gap:1.5rem}.features-list--gap-large{gap:2rem}.features-list--center{align-items:center;text-align:center}.features-list--center .feature{flex-direction:column;align-items:center}.features-list--center .feature__content{text-align:center}.feature{display:flex;align-items:flex-start;gap:1rem}.feature--clickable{cursor:pointer;border-radius:10px;transition:background-color .15s ease}.feature--clickable:hover{background:var(--ion-color-light, rgba(0, 0, 0, .03))}.feature__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.feature__image{width:100%;height:100%;object-fit:contain;border-radius:8px}.feature__image--circle{object-fit:cover;border-radius:50%}.feature__content{flex:1}.feature__title{display:block;font-size:1.1rem;font-weight:600;color:var(--ion-text-color);margin-bottom:.25rem}.feature__description{margin:0;font-size:.95rem;color:var(--ion-color-medium);line-height:1.5}.features-list__more{align-self:flex-start;margin-top:.25rem;padding:0;background:none;border:none;font:inherit;font-weight:600;color:var(--ion-color-primary);cursor:pointer}.features-list--center .features-list__more,.features-list--center .features-list__footer{align-self:center}.features-list__footer{align-self:flex-start;margin-top:.25rem;font-weight:600;color:var(--ion-color-primary);text-decoration:none;cursor:pointer}.features-list__footer:hover{text-decoration:underline}:host-context(.dark) .feature__title,:host-context(.ion-palette-dark) .feature__title,:host-context(html.ion-palette-dark) .feature__title,:host-context(body.dark) .feature__title,:host-context([data-theme=\"dark\"]) .feature__title{color:var(--ion-text-color, #fff)}:host-context(.dark) .feature__description,:host-context(.ion-palette-dark) .feature__description,:host-context(html.ion-palette-dark) .feature__description,:host-context(body.dark) .feature__description,:host-context([data-theme=\"dark\"]) .feature__description{color:var(--ion-color-medium, #a0a0a0)}:host-context(.dark) .feature--clickable:hover,:host-context(.ion-palette-dark) .feature--clickable:hover,:host-context(html.ion-palette-dark) .feature--clickable:hover,:host-context(body.dark) .feature--clickable:hover,:host-context([data-theme=\"dark\"]) .feature--clickable:hover{background:#ffffff0a}\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"] }] }); }
+  `, isInline: true, styles: [":host{display:block}.features-list{display:flex}.features-list--vertical{flex-direction:column}.features-list--horizontal{flex-direction:row;flex-wrap:wrap}.features-list--horizontal .feature{flex:1;min-width:200px}.features-list--gap-small{gap:1rem}.features-list--gap-medium{gap:1.5rem}.features-list--gap-large{gap:2rem}.features-list--center{align-items:center;text-align:center}.features-list--center .feature{flex-direction:column;align-items:center}.features-list--center .feature__content{text-align:center}.feature{display:flex;align-items:flex-start;gap:1rem}.feature--clickable{cursor:pointer;border-radius:10px;transition:background-color .15s ease;width:100%;text-align:left;border:none;background:none;font:inherit;color:inherit;padding:.25rem}.feature--clickable:hover{background:var(--ion-color-light, rgba(0, 0, 0, .03))}.feature--clickable:focus{outline:none}.feature--clickable:focus-visible{outline:.125rem solid var(--ion-color-primary, #7026df);outline-offset:2px}.feature__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.feature__image{width:100%;height:100%;object-fit:contain;border-radius:8px}.feature__image--circle{object-fit:cover;border-radius:50%}.feature__content{flex:1}.feature__title{display:block;font-size:1.1rem;font-weight:600;color:var(--ion-text-color);margin-bottom:.25rem}.feature__description{margin:0;font-size:.95rem;color:var(--ion-color-medium);line-height:1.5}.features-list__more{align-self:flex-start;margin-top:.25rem;padding:0;background:none;border:none;font:inherit;font-weight:600;color:var(--ion-color-primary);cursor:pointer}.features-list--center .features-list__more,.features-list--center .features-list__footer{align-self:center}.features-list__footer{align-self:flex-start;margin-top:.25rem;font-weight:600;color:var(--ion-color-primary);text-decoration:none;cursor:pointer}.features-list__footer:hover{text-decoration:underline}:host-context(.dark) .feature__title,:host-context(.ion-palette-dark) .feature__title,:host-context(html.ion-palette-dark) .feature__title,:host-context(body.dark) .feature__title,:host-context([data-theme=\"dark\"]) .feature__title{color:var(--ion-text-color, #fff)}:host-context(.dark) .feature__description,:host-context(.ion-palette-dark) .feature__description,:host-context(html.ion-palette-dark) .feature__description,:host-context(body.dark) .feature__description,:host-context([data-theme=\"dark\"]) .feature__description{color:var(--ion-color-medium, #a0a0a0)}:host-context(.dark) .feature--clickable:hover,:host-context(.ion-palette-dark) .feature--clickable:hover,:host-context(html.ion-palette-dark) .feature--clickable:hover,:host-context(body.dark) .feature--clickable:hover,:host-context([data-theme=\"dark\"]) .feature--clickable:hover{background:#ffffff0a}\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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FeaturesListComponent, decorators: [{
             type: Component,
@@ -25425,42 +25648,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       [class.features-list--center]="config().alignment === 'center'"
     >
       @for (feature of visibleFeatures(); track feature.titleKey) {
-        <div class="feature" [class.feature--clickable]="feature.token != null" (click)="onItem(feature)">
-          <div
-            class="feature__icon"
-            [style.color]="iconColorStyle()"
-            [style.width.px]="config().iconSize"
-            [style.height.px]="config().iconSize"
+        @if (feature.token != null) {
+          <button
+            type="button"
+            class="feature feature--clickable"
+            [attr.aria-label]="getTitle(feature)"
+            (click)="onItem(feature)"
           >
-            @if (feature.image) {
-              <img
-                class="feature__image"
-                [class.feature__image--circle]="config().imageShape === 'circle'"
-                [src]="feature.image"
-                [alt]="getTitle(feature)"
-              />
-            } @else if (feature.icon === 'custom' && feature.svgPath) {
-              <svg
-                [attr.width]="config().iconSize"
-                [attr.height]="config().iconSize"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="1.5"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <path [attr.d]="feature.svgPath" />
-              </svg>
-            } @else if (feature.icon) {
-              <ion-icon [name]="feature.icon" [style.font-size.px]="config().iconSize"></ion-icon>
-            }
-          </div>
-          <div class="feature__content">
-            <strong class="feature__title">{{ getTitle(feature) }}</strong>
-            <p class="feature__description">{{ getDescription(feature) }}</p>
+            <div
+              class="feature__icon"
+              [style.color]="iconColorStyle()"
+              [style.width.px]="config().iconSize"
+              [style.height.px]="config().iconSize"
+            >
+              @if (feature.image) {
+                <img
+                  class="feature__image"
+                  [class.feature__image--circle]="config().imageShape === 'circle'"
+                  [src]="feature.image"
+                  [alt]="getTitle(feature)"
+                />
+              } @else if (feature.icon === 'custom' && feature.svgPath) {
+                <svg
+                  [attr.width]="config().iconSize"
+                  [attr.height]="config().iconSize"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path [attr.d]="feature.svgPath" />
+                </svg>
+              } @else if (feature.icon) {
+                <ion-icon [name]="feature.icon" [style.font-size.px]="config().iconSize"></ion-icon>
+              }
+            </div>
+            <div class="feature__content">
+              <strong class="feature__title">{{ getTitle(feature) }}</strong>
+              <p class="feature__description">{{ getDescription(feature) }}</p>
+            </div>
+          </button>
+        } @else {
+          <div class="feature">
+            <div
+              class="feature__icon"
+              [style.color]="iconColorStyle()"
+              [style.width.px]="config().iconSize"
+              [style.height.px]="config().iconSize"
+            >
+              @if (feature.image) {
+                <img
+                  class="feature__image"
+                  [class.feature__image--circle]="config().imageShape === 'circle'"
+                  [src]="feature.image"
+                  [alt]="getTitle(feature)"
+                />
+              } @else if (feature.icon === 'custom' && feature.svgPath) {
+                <svg
+                  [attr.width]="config().iconSize"
+                  [attr.height]="config().iconSize"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path [attr.d]="feature.svgPath" />
+                </svg>
+              } @else if (feature.icon) {
+                <ion-icon [name]="feature.icon" [style.font-size.px]="config().iconSize"></ion-icon>
+              }
+            </div>
+            <div class="feature__content">
+              <strong class="feature__title">{{ getTitle(feature) }}</strong>
+              <p class="feature__description">{{ getDescription(feature) }}</p>
+            </div>
           </div>
-        </div>
+        }
       }
 
       @if (canCollapse()) {
@@ -25475,7 +25742,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </a>
       }
     </div>
-  `, styles: [":host{display:block}.features-list{display:flex}.features-list--vertical{flex-direction:column}.features-list--horizontal{flex-direction:row;flex-wrap:wrap}.features-list--horizontal .feature{flex:1;min-width:200px}.features-list--gap-small{gap:1rem}.features-list--gap-medium{gap:1.5rem}.features-list--gap-large{gap:2rem}.features-list--center{align-items:center;text-align:center}.features-list--center .feature{flex-direction:column;align-items:center}.features-list--center .feature__content{text-align:center}.feature{display:flex;align-items:flex-start;gap:1rem}.feature--clickable{cursor:pointer;border-radius:10px;transition:background-color .15s ease}.feature--clickable:hover{background:var(--ion-color-light, rgba(0, 0, 0, .03))}.feature__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.feature__image{width:100%;height:100%;object-fit:contain;border-radius:8px}.feature__image--circle{object-fit:cover;border-radius:50%}.feature__content{flex:1}.feature__title{display:block;font-size:1.1rem;font-weight:600;color:var(--ion-text-color);margin-bottom:.25rem}.feature__description{margin:0;font-size:.95rem;color:var(--ion-color-medium);line-height:1.5}.features-list__more{align-self:flex-start;margin-top:.25rem;padding:0;background:none;border:none;font:inherit;font-weight:600;color:var(--ion-color-primary);cursor:pointer}.features-list--center .features-list__more,.features-list--center .features-list__footer{align-self:center}.features-list__footer{align-self:flex-start;margin-top:.25rem;font-weight:600;color:var(--ion-color-primary);text-decoration:none;cursor:pointer}.features-list__footer:hover{text-decoration:underline}:host-context(.dark) .feature__title,:host-context(.ion-palette-dark) .feature__title,:host-context(html.ion-palette-dark) .feature__title,:host-context(body.dark) .feature__title,:host-context([data-theme=\"dark\"]) .feature__title{color:var(--ion-text-color, #fff)}:host-context(.dark) .feature__description,:host-context(.ion-palette-dark) .feature__description,:host-context(html.ion-palette-dark) .feature__description,:host-context(body.dark) .feature__description,:host-context([data-theme=\"dark\"]) .feature__description{color:var(--ion-color-medium, #a0a0a0)}:host-context(.dark) .feature--clickable:hover,:host-context(.ion-palette-dark) .feature--clickable:hover,:host-context(html.ion-palette-dark) .feature--clickable:hover,:host-context(body.dark) .feature--clickable:hover,:host-context([data-theme=\"dark\"]) .feature--clickable:hover{background:#ffffff0a}\n"] }]
+  `, styles: [":host{display:block}.features-list{display:flex}.features-list--vertical{flex-direction:column}.features-list--horizontal{flex-direction:row;flex-wrap:wrap}.features-list--horizontal .feature{flex:1;min-width:200px}.features-list--gap-small{gap:1rem}.features-list--gap-medium{gap:1.5rem}.features-list--gap-large{gap:2rem}.features-list--center{align-items:center;text-align:center}.features-list--center .feature{flex-direction:column;align-items:center}.features-list--center .feature__content{text-align:center}.feature{display:flex;align-items:flex-start;gap:1rem}.feature--clickable{cursor:pointer;border-radius:10px;transition:background-color .15s ease;width:100%;text-align:left;border:none;background:none;font:inherit;color:inherit;padding:.25rem}.feature--clickable:hover{background:var(--ion-color-light, rgba(0, 0, 0, .03))}.feature--clickable:focus{outline:none}.feature--clickable:focus-visible{outline:.125rem solid var(--ion-color-primary, #7026df);outline-offset:2px}.feature__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.feature__image{width:100%;height:100%;object-fit:contain;border-radius:8px}.feature__image--circle{object-fit:cover;border-radius:50%}.feature__content{flex:1}.feature__title{display:block;font-size:1.1rem;font-weight:600;color:var(--ion-text-color);margin-bottom:.25rem}.feature__description{margin:0;font-size:.95rem;color:var(--ion-color-medium);line-height:1.5}.features-list__more{align-self:flex-start;margin-top:.25rem;padding:0;background:none;border:none;font:inherit;font-weight:600;color:var(--ion-color-primary);cursor:pointer}.features-list--center .features-list__more,.features-list--center .features-list__footer{align-self:center}.features-list__footer{align-self:flex-start;margin-top:.25rem;font-weight:600;color:var(--ion-color-primary);text-decoration:none;cursor:pointer}.features-list__footer:hover{text-decoration:underline}:host-context(.dark) .feature__title,:host-context(.ion-palette-dark) .feature__title,:host-context(html.ion-palette-dark) .feature__title,:host-context(body.dark) .feature__title,:host-context([data-theme=\"dark\"]) .feature__title{color:var(--ion-text-color, #fff)}:host-context(.dark) .feature__description,:host-context(.ion-palette-dark) .feature__description,:host-context(html.ion-palette-dark) .feature__description,:host-context(body.dark) .feature__description,:host-context([data-theme=\"dark\"]) .feature__description{color:var(--ion-color-medium, #a0a0a0)}:host-context(.dark) .feature--clickable:hover,:host-context(.ion-palette-dark) .feature--clickable:hover,:host-context(html.ion-palette-dark) .feature--clickable:hover,:host-context(body.dark) .feature--clickable:hover,:host-context([data-theme=\"dark\"]) .feature--clickable:hover{background:#ffffff0a}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
@@ -27123,6 +27390,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
   `, styles: ["@charset \"UTF-8\";:host{display:contents}.val-update-banner{position:fixed;top:0;left:0;right:0;z-index:1100;display:flex;justify-content:center;padding:calc(12px + env(safe-area-inset-top,0px)) 16px 12px;pointer-events:none}.val-update-banner__backdrop{position:fixed;inset:0;z-index:-1;background:#0000008c;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);pointer-events:auto}.val-update-banner__panel{pointer-events:auto;display:flex;flex-direction:row;align-items:center;gap:12px;width:100%;max-width:640px;padding:12px 16px;background:var(--ion-background-color, #fff);border:1px solid var(--val-border-color, rgba(0, 0, 0, .08));border-radius:var(--val-border-radius, 12px);box-shadow:0 4px 24px #0000001f;animation:val-update-banner-in .25s ease-out}.val-update-banner--required{align-items:center;height:100%}.val-update-banner--required .val-update-banner__panel{flex-direction:column;text-align:center;max-width:420px}.val-update-banner__icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:color-mix(in srgb,var(--ion-color-primary) 14%,transparent);font-size:22px}.val-update-banner__icon val-icon{display:flex;line-height:0}.val-update-banner__icon ::ng-deep ion-icon{display:block}.val-update-banner--required .val-update-banner__icon{background:color-mix(in srgb,var(--ion-color-warning) 16%,transparent)}.val-update-banner__body{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;min-width:0}.val-update-banner__actions{flex:0 0 auto;display:flex;flex-direction:row;align-items:center;gap:4px}.val-update-banner--required .val-update-banner__actions{margin-top:8px}@keyframes val-update-banner-in{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 540px){.val-update-banner__panel{flex-direction:column;text-align:center}.val-update-banner__actions{width:100%;justify-content:center}}\n"] }]
         }] });
 
+/**
+ * Ionic color helpers — single source of truth.
+ *
+ * Several presentational cards used to inline a literal `IONIC_COLORS` array
+ * plus a `resolveColor()` copy. This util consolidates that logic so the named
+ * Ionic palette and the CSS-var resolution live in one place.
+ */
+/** The named Ionic color palette tokens. */
+const IONIC_COLORS$5 = [
+    'primary',
+    'secondary',
+    'tertiary',
+    'success',
+    'warning',
+    'danger',
+    'light',
+    'medium',
+    'dark',
+];
+/** True when `value` is one of the named Ionic palette tokens. */
+function isIonicColor(value) {
+    return !!value && IONIC_COLORS$5.includes(value);
+}
+/**
+ * Resolve a color value to a usable CSS color.
+ *
+ * - A named Ionic token (e.g. `primary`) becomes `var(--ion-color-primary)`.
+ * - Any other value (hex, rgb, CSS var, etc.) is returned unchanged.
+ * - `undefined`/empty returns `undefined`.
+ */
+function resolveIonicColor(value) {
+    if (!value)
+        return undefined;
+    return isIonicColor(value) ? `var(--ion-color-${value})` : value;
+}
+
 /**
  * Default values for ActionCardMetadata
  */
@@ -27135,7 +27438,6 @@ const ACTION_CARD_DEFAULTS = {
 };
 
 addIcons({ chevronForwardOutline });
-const IONIC_COLORS$8 = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
 /**
  * val-action-card
  *
@@ -27211,14 +27513,9 @@ class ActionCardComponent {
         }
         return cfg.description || '';
     }
-    /** Resolve color to CSS value */
+    /** Resolve color to CSS value (named Ionic token → CSS var, else passthrough) */
     resolveColor(color) {
-        if (!color)
-            return null;
-        if (IONIC_COLORS$8.includes(color)) {
-            return `var(--ion-color-${color})`;
-        }
-        return color;
+        return resolveIonicColor(color) ?? null;
     }
     getBackgroundColor() {
         return this.resolveColor(this.config().backgroundColor);
@@ -27408,7 +27705,7 @@ const MEDIA_OBJECT_DEFAULTS = {
     circle: false,
 };
 
-const IONIC_COLORS$7 = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
+const IONIC_COLORS$4 = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
 /**
  * val-media-object
  *
@@ -27448,7 +27745,7 @@ class MediaObjectComponent {
         const color = this.config().color;
         if (!color)
             return 'var(--ion-color-primary)';
-        return IONIC_COLORS$7.includes(color) ? `var(--ion-color-${color})` : color;
+        return IONIC_COLORS$4.includes(color) ? `var(--ion-color-${color})` : color;
     }
     handleLinkClick(event) {
         const link = this.config().link;
@@ -27552,7 +27849,7 @@ const STATS_BAR_DEFAULTS = {
     stackOnMobile: true,
 };
 
-const IONIC_COLORS$6 = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
+const IONIC_COLORS$3 = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
 /**
  * val-stats-bar
  *
@@ -27589,7 +27886,7 @@ class StatsBarComponent {
         const color = stat.color;
         if (!color)
             return null;
-        return IONIC_COLORS$6.includes(color) ? `var(--ion-color-${color})` : color;
+        return IONIC_COLORS$3.includes(color) ? `var(--ion-color-${color})` : color;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StatsBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: StatsBarComponent, isStandalone: true, selector: "val-stats-bar", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
@@ -27657,7 +27954,7 @@ const ARTICLE_CARD_DEFAULTS = {
     excerptLines: 3,
 };
 
-const IONIC_COLORS$5 = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
+const IONIC_COLORS$2 = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
 /**
  * val-article-card
  *
@@ -27700,7 +27997,7 @@ class ArticleCardComponent {
         const color = this.config().topicColor;
         if (!color)
             return 'var(--ion-color-primary)';
-        return IONIC_COLORS$5.includes(color) ? `var(--ion-color-${color})` : color;
+        return IONIC_COLORS$2.includes(color) ? `var(--ion-color-${color})` : color;
     }
     handleClick(event) {
         const cfg = this.config();
@@ -27815,7 +28112,6 @@ const CTA_CARD_DEFAULTS = {
     shadowed: false,
 };
 
-const IONIC_COLORS$4 = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
 /**
  * val-cta-card
  *
@@ -27856,16 +28152,11 @@ class CtaCardComponent {
             ...this.props(),
         }));
     }
-    resolveColor(color) {
-        if (!color)
-            return null;
-        return IONIC_COLORS$4.includes(color) ? `var(--ion-color-${color})` : color;
-    }
     getBackground() {
-        return this.resolveColor(this.config().backgroundColor) || 'var(--ion-color-light, #f4f5f8)';
+        return resolveIonicColor(this.config().backgroundColor) || 'var(--ion-color-light, #f4f5f8)';
     }
     getColor() {
-        return this.resolveColor(this.config().color);
+        return resolveIonicColor(this.config().color) ?? null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CtaCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CtaCardComponent, isStandalone: true, selector: "val-cta-card", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onAction: "onAction" }, ngImport: i0, template: `
@@ -30908,6 +31199,13 @@ class FormComponent {
         this.usernamePropMemo = new WeakMap();
         this.textareaPropMemo = new WeakMap();
         this.selectPropMemo = new WeakMap();
+        // Memo de props con un inputType HTML inyectado (EMAIL/NUMBER/HOUR colapsados
+        // en val-text-input). Clave por field para conservar identidad de referencia.
+        this.textInputPropMemo = new WeakMap();
+        // Ids estables por field para el wiring de accesibilidad label↔input↔error.
+        // Estables entre CD cycles (memoizados por referencia de field) → aria-* no parpadea.
+        this.fieldIdMemo = new WeakMap();
+        this.fieldUid = 0;
         this.previousUploadingCount = 0;
         // Campos ATTACHMENT con uploads en curso — bloquea submit + DESHABILITA el
         // botón (no loading: el spinner se reserva para el submit real del form).
@@ -31067,6 +31365,28 @@ class FormComponent {
     getControl(field) {
         return this.Form.get(field);
     }
+    /**
+     * Ids estables (label + error) para un field. Memoizados por referencia para
+     * que el wiring `aria-labelledby` / `aria-describedby` no cambie entre ciclos
+     * de change detection.
+     */
+    fieldIds(field) {
+        let ids = this.fieldIdMemo.get(field);
+        if (!ids) {
+            const base = `val-form-field-${this.fieldUid++}`;
+            ids = { labelId: `${base}-label`, errorId: `${base}-error` };
+            this.fieldIdMemo.set(field, ids);
+        }
+        return ids;
+    }
+    /** Id del label visible del campo (consumido por el template + el input). */
+    labelId(field) {
+        return this.fieldIds(field).labelId;
+    }
+    /** Id del contenedor de error (`val-hint`) del campo. */
+    errorId(field) {
+        return this.fieldIds(field).errorId;
+    }
     getFieldProp(field) {
         const cached = this.fieldPropMemo.get(field);
         if (cached)
@@ -31074,19 +31394,34 @@ class FormComponent {
         if (!field.token) {
             field.token = `input-${field.type}-${field.name}`;
         }
+        const ids = this.fieldIds(field);
         let result;
         if (field.type === this.types.NUMBER_FROM_TO) {
             const fromControl = this.getControl(`${field.name}_from`);
             const toControl = this.getControl(`${field.name}_to`);
-            result = { ...field, fromControl, toControl, control: undefined };
+            result = { ...field, fromControl, toControl, control: undefined, labelId: ids.labelId, errorId: ids.errorId };
         }
         else {
             const control = this.getControl(field.name);
-            result = { ...field, control };
+            result = { ...field, control, labelId: ids.labelId, errorId: ids.errorId };
         }
         this.fieldPropMemo.set(field, result);
         return result;
     }
+    /**
+     * Adapter para los tipos colapsados en `val-text-input` (EMAIL/NUMBER/HOUR).
+     * Reusa `getFieldProp` (con su control + wiring de ids) e inyecta el `inputType`
+     * HTML nativo. Memoizado por referencia de field para no romper la identidad.
+     */
+    getTextInputProp(field, inputType) {
+        const cached = this.textInputPropMemo.get(field);
+        if (cached)
+            return cached;
+        const base = this.getFieldProp(field);
+        const result = { ...base, inputType };
+        this.textInputPropMemo.set(field, result);
+        return result;
+    }
     /**
      * Adapter para SELECT — igual que `getFieldProp` pero limpia `label`.
      * val-form ya renderiza el título del campo con `<val-title>` arriba del input;
@@ -31208,7 +31543,9 @@ class FormComponent {
             @for (f of s.fields; track f.name) {
               <div class="input" [attr.data-testid]="f.token">
                 @if (f.type !== types.PHONE && f.type !== types.HANDLE && f.type !== types.ATTACHMENT) {
-                  <val-title [props]="{ content: f.label, size: 'small', color: 'dark', bold: false }"></val-title>
+                  <div [attr.id]="labelId(f)">
+                    <val-title [props]="{ content: f.label, size: 'small', color: 'dark', bold: false }"></val-title>
+                  </div>
                 }
                 @if (f.description) {
                   <span class="field-description">{{ f.description }}</span>
@@ -31230,16 +31567,16 @@ class FormComponent {
                     <val-date-input [props]="getFieldProp(f)"></val-date-input>
                   }
                   @case (types.EMAIL) {
-                    <val-email-input [props]="getFieldProp(f)"></val-email-input>
+                    <val-text-input [props]="getTextInputProp(f, 'email')"></val-text-input>
                   }
                   @case (types.FILE) {
                     <val-file-input [props]="getFieldProp(f)"></val-file-input>
                   }
                   @case (types.HOUR) {
-                    <val-hour-input [props]="getFieldProp(f)"></val-hour-input>
+                    <val-text-input [props]="getTextInputProp(f, 'time')"></val-text-input>
                   }
                   @case (types.NUMBER) {
-                    <val-number-input [props]="getFieldProp(f)"></val-number-input>
+                    <val-text-input [props]="getTextInputProp(f, 'number')"></val-text-input>
                   }
                   @case (types.NUMBER_FROM_TO) {
                     <val-number-from-to [props]="getFieldProp(f)"></val-number-from-to>
@@ -31286,7 +31623,7 @@ class FormComponent {
                     ></val-attachment-uploader>
                   }
                 }
-                <val-hint [props]="getFieldProp(f)"></val-hint>
+                <val-hint [props]="getFieldProp(f)" [id]="errorId(f)"></val-hint>
               </div>
             }
             <val-divider [props]="{ fill: 'solid', size: 'medium', color: 'medium' }"></val-divider>
@@ -31303,7 +31640,7 @@ class FormComponent {
         }
       </form>
     </div>
-  `, isInline: true, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.section{margin-top:1rem}.input{margin:var(--val-form-field-gap, .5rem) 0}@media (min-width: 768px){.input{margin:var(--val-form-field-gap, .75rem) 0}}.submit-actions--sticky{position:sticky;bottom:0;z-index:1;background:var(--ion-background-color);border-top:1px solid var(--ion-color-step-150, rgba(0, 0, 0, .08));padding:.75rem 0 calc(.75rem + env(safe-area-inset-bottom))}.field-description{display:block;font-size:.75rem;color:var(--ion-color-dark);margin-bottom:.25rem;line-height:1.4}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextInputComponent, selector: "val-text-input", inputs: ["preset", "props"] }, { kind: "component", type: TextareaInputComponent, selector: "val-textarea-input", inputs: ["preset", "props"] }, { kind: "component", type: CheckInputComponent, selector: "val-check-input", inputs: ["preset", "props"] }, { kind: "component", type: ButtonGroupComponent, selector: "val-button-group", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: DividerComponent, selector: "val-divider", inputs: ["props"] }, { kind: "component", type: HintComponent, selector: "val-hint", inputs: ["props"] }, { kind: "component", type: CommentInputComponent, selector: "val-comment-input", inputs: ["props"] }, { kind: "component", type: DateInputComponent, selector: "val-date-input", inputs: ["preset", "props"] }, { kind: "component", type: FileInputComponent, selector: "val-file-input", inputs: ["props"] }, { kind: "component", type: HourInputComponent, selector: "val-hour-input", inputs: ["props"] }, { kind: "component", type: EmailInputComponent, selector: "val-email-input", inputs: ["preset", "props"] }, { kind: "component", type: NumberInputComponent, selector: "val-number-input", inputs: ["props"] }, { kind: "component", type: NumberFromToComponent, selector: "val-number-from-to", inputs: ["props"] }, { kind: "component", type: RadioInputComponent, selector: "val-radio-input", inputs: ["props"] }, { kind: "component", type: PasswordInputComponent, selector: "val-password-input", inputs: ["preset", "props"] }, { kind: "component", type: PinInputComponent, selector: "val-pin-input", inputs: ["props"] }, { kind: "component", type: SelectSearchComponent, selector: "val-select-search", inputs: ["label", "labelProperty", "valueProperty", "multiple", "placeholder", "props"] }, { kind: "component", type: MultiSelectSearchComponent, selector: "val-multi-select-search", inputs: ["label", "labelProperty", "valueProperty", "placeholder", "props"] }, { kind: "component", type: SearchSelectorComponent, selector: "val-select-input", inputs: ["preset", "props"] }, { kind: "component", type: PhoneInputComponent, selector: "val-phone-input", inputs: ["preset", "props"], outputs: ["phoneChange"] }, { kind: "component", type: ToggleInputComponent, selector: "val-toggle-input", inputs: ["preset", "props"] }, { kind: "component", type: CheckboxRadioInputComponent, selector: "val-checkbox-radio-input", inputs: ["props"] }, { kind: "component", type: UsernameInputComponent, selector: "val-username-input", inputs: ["props"] }, { kind: "component", type: AttachmentUploaderComponent, selector: "val-attachment-uploader", inputs: ["props"], outputs: ["attachmentsChange"] }] }); }
+  `, isInline: true, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.section{margin-top:1rem}.input{margin:var(--val-form-field-gap, .5rem) 0}@media (min-width: 768px){.input{margin:var(--val-form-field-gap, .75rem) 0}}.submit-actions--sticky{position:sticky;bottom:0;z-index:1;background:var(--ion-background-color);border-top:1px solid var(--ion-color-step-150, rgba(0, 0, 0, .08));padding:.75rem 0 calc(.75rem + env(safe-area-inset-bottom))}.field-description{display:block;font-size:.75rem;color:var(--ion-color-dark);margin-bottom:.25rem;line-height:1.4}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextInputComponent, selector: "val-text-input", inputs: ["preset", "props"] }, { kind: "component", type: TextareaInputComponent, selector: "val-textarea-input", inputs: ["preset", "props"] }, { kind: "component", type: CheckInputComponent, selector: "val-check-input", inputs: ["preset", "props"] }, { kind: "component", type: ButtonGroupComponent, selector: "val-button-group", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: DividerComponent, selector: "val-divider", inputs: ["props"] }, { kind: "component", type: HintComponent, selector: "val-hint", inputs: ["props", "id", "isError"] }, { kind: "component", type: CommentInputComponent, selector: "val-comment-input", inputs: ["props"] }, { kind: "component", type: DateInputComponent, selector: "val-date-input", inputs: ["preset", "props"] }, { kind: "component", type: FileInputComponent, selector: "val-file-input", inputs: ["props"] }, { kind: "component", type: NumberFromToComponent, selector: "val-number-from-to", inputs: ["props"] }, { kind: "component", type: RadioInputComponent, selector: "val-radio-input", inputs: ["props"] }, { kind: "component", type: PasswordInputComponent, selector: "val-password-input", inputs: ["preset", "props"] }, { kind: "component", type: PinInputComponent, selector: "val-pin-input", inputs: ["props"] }, { kind: "component", type: SelectSearchComponent, selector: "val-select-search", inputs: ["label", "labelProperty", "valueProperty", "multiple", "placeholder", "props"] }, { kind: "component", type: MultiSelectSearchComponent, selector: "val-multi-select-search", inputs: ["label", "labelProperty", "valueProperty", "placeholder", "props"] }, { kind: "component", type: SearchSelectorComponent, selector: "val-select-input", inputs: ["preset", "props"] }, { kind: "component", type: PhoneInputComponent, selector: "val-phone-input", inputs: ["preset", "props"], outputs: ["phoneChange"] }, { kind: "component", type: ToggleInputComponent, selector: "val-toggle-input", inputs: ["preset", "props"] }, { kind: "component", type: CheckboxRadioInputComponent, selector: "val-checkbox-radio-input", inputs: ["props"] }, { kind: "component", type: UsernameInputComponent, selector: "val-username-input", inputs: ["props"] }, { kind: "component", type: AttachmentUploaderComponent, selector: "val-attachment-uploader", inputs: ["props"], outputs: ["attachmentsChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
@@ -31321,9 +31658,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         CommentInputComponent,
                         DateInputComponent,
                         FileInputComponent,
-                        HourInputComponent,
-                        EmailInputComponent,
-                        NumberInputComponent,
                         NumberFromToComponent,
                         RadioInputComponent,
                         PasswordInputComponent,
@@ -31354,7 +31688,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             @for (f of s.fields; track f.name) {
               <div class="input" [attr.data-testid]="f.token">
                 @if (f.type !== types.PHONE && f.type !== types.HANDLE && f.type !== types.ATTACHMENT) {
-                  <val-title [props]="{ content: f.label, size: 'small', color: 'dark', bold: false }"></val-title>
+                  <div [attr.id]="labelId(f)">
+                    <val-title [props]="{ content: f.label, size: 'small', color: 'dark', bold: false }"></val-title>
+                  </div>
                 }
                 @if (f.description) {
                   <span class="field-description">{{ f.description }}</span>
@@ -31376,16 +31712,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     <val-date-input [props]="getFieldProp(f)"></val-date-input>
                   }
                   @case (types.EMAIL) {
-                    <val-email-input [props]="getFieldProp(f)"></val-email-input>
+                    <val-text-input [props]="getTextInputProp(f, 'email')"></val-text-input>
                   }
                   @case (types.FILE) {
                     <val-file-input [props]="getFieldProp(f)"></val-file-input>
                   }
                   @case (types.HOUR) {
-                    <val-hour-input [props]="getFieldProp(f)"></val-hour-input>
+                    <val-text-input [props]="getTextInputProp(f, 'time')"></val-text-input>
                   }
                   @case (types.NUMBER) {
-                    <val-number-input [props]="getFieldProp(f)"></val-number-input>
+                    <val-text-input [props]="getTextInputProp(f, 'number')"></val-text-input>
                   }
                   @case (types.NUMBER_FROM_TO) {
                     <val-number-from-to [props]="getFieldProp(f)"></val-number-from-to>
@@ -31432,7 +31768,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     ></val-attachment-uploader>
                   }
                 }
-                <val-hint [props]="getFieldProp(f)"></val-hint>
+                <val-hint [props]="getFieldProp(f)" [id]="errorId(f)"></val-hint>
               </div>
             }
             <val-divider [props]="{ fill: 'solid', size: 'medium', color: 'medium' }"></val-divider>
@@ -32560,7 +32896,7 @@ class ChangePasswordModalComponent {
                         },
                     ],
                     actions: {
-                        ...SolidDefaultBlock('', 'submit'),
+                        ...button({ text: '', type: 'submit', fill: 'solid', expand: 'block' }),
                         token: 'set-submit',
                         textKey: 'setPasswordSubmit',
                     },
@@ -32594,7 +32930,7 @@ class ChangePasswordModalComponent {
                     },
                 ],
                 actions: {
-                    ...SolidDefaultBlock('', 'submit'),
+                    ...button({ text: '', type: 'submit', fill: 'solid', expand: 'block' }),
                     token: 'change-submit',
                     textKey: 'changePasswordSubmit',
                 },
@@ -32819,7 +33155,7 @@ class ChangeEmailModalComponent {
                 },
             ],
             actions: {
-                ...SolidDefaultBlock('', 'submit'),
+                ...button({ text: '', type: 'submit', fill: 'solid', expand: 'block' }),
                 token: 'change-email-initiate',
                 textKey: 'changeEmailInitiate',
             },
@@ -32852,7 +33188,7 @@ class ChangeEmailModalComponent {
                 },
             ],
             actions: {
-                ...SolidDefaultBlock('', 'submit'),
+                ...button({ text: '', type: 'submit', fill: 'solid', expand: 'block' }),
                 token: 'change-email-confirm-1',
                 textKey: 'changeEmailConfirm1',
             },
@@ -32888,7 +33224,7 @@ class ChangeEmailModalComponent {
                     },
                 ],
                 actions: {
-                    ...SolidDefaultBlock('', 'submit'),
+                    ...button({ text: '', type: 'submit', fill: 'solid', expand: 'block' }),
                     token: 'change-email-confirm-2',
                     textKey: 'changeEmailConfirm2',
                 },
@@ -33262,7 +33598,7 @@ const FUN_MODAL_DEFAULTS = {
     imageRadius: 16,
 };
 
-const IONIC_COLORS$3 = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
+const IONIC_COLORS$1 = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
 /**
  * `val-fun-modal` — modal moderno tipo promo/onboarding: imagen o ilustración
  * arriba, título, cuerpo y botones de acción, con redondeo personalizable.
@@ -33312,7 +33648,7 @@ class FunModalComponent {
         const color = this.config().backgroundColor;
         if (!color)
             return null;
-        return IONIC_COLORS$3.includes(color) ? `var(--ion-color-${color})` : color;
+        return IONIC_COLORS$1.includes(color) ? `var(--ion-color-${color})` : color;
     }
     close() {
         this._isOpen = false;
@@ -34539,7 +34875,7 @@ class MfaModalComponent {
                 },
             ],
             actions: {
-                ...SolidDefaultBlock('', 'submit'),
+                ...button({ text: '', type: 'submit', fill: 'solid', expand: 'block' }),
                 token: 'mfa-disable-submit',
                 textKey: 'mfaDisableButton',
             },
@@ -34983,7 +35319,7 @@ class ItemListComponent {
      * Devuelve el color de borde de la lista.
      */
     color() {
-        return resolveColor$1(this.props.color || this.defaultColor);
+        return resolveColor(this.props.color || this.defaultColor);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ItemListComponent, deps: [{ token: IconService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ItemListComponent, isStandalone: true, selector: "val-item-list", inputs: { props: "props" }, outputs: { onClick: "onClick", onActionClick: "onActionClick" }, ngImport: i0, template: `
@@ -39388,7 +39724,7 @@ class LoginComponent {
                 },
             ],
             actions: {
-                ...SolidDefaultBlock('', 'submit'),
+                ...button({ text: '', type: 'submit', fill: 'solid', expand: 'block' }),
                 token: 'login-submit',
                 textKey: 'loginSubmit',
             },
@@ -39454,7 +39790,7 @@ class LoginComponent {
                 },
             ],
             actions: {
-                ...SolidDefaultBlock('', 'submit'),
+                ...button({ text: '', type: 'submit', fill: 'solid', expand: 'block' }),
                 token: 'register-submit',
                 textKey: 'registerSubmit',
             },
@@ -39495,7 +39831,7 @@ class LoginComponent {
                     },
                 ],
                 actions: {
-                    ...SolidDefaultBlock('', 'submit'),
+                    ...button({ text: '', type: 'submit', fill: 'solid', expand: 'block' }),
                     token: 'verify-submit',
                     textKey: 'verifySubmit',
                 },
@@ -39538,7 +39874,7 @@ class LoginComponent {
                     },
                 ],
                 actions: {
-                    ...SolidDefaultBlock('', 'submit'),
+                    ...button({ text: '', type: 'submit', fill: 'solid', expand: 'block' }),
                     token: 'mfa-verify-submit',
                     textKey: 'verifySubmit',
                 },
@@ -39575,7 +39911,7 @@ class LoginComponent {
                 },
             ],
             actions: {
-                ...SolidDefaultBlock('', 'submit'),
+                ...button({ text: '', type: 'submit', fill: 'solid', expand: 'block' }),
                 token: 'forgot-submit',
                 textKey: 'forgotSubmit',
             },
@@ -39631,7 +39967,7 @@ class LoginComponent {
                     },
                 ],
                 actions: {
-                    ...SolidDefaultBlock('', 'submit'),
+                    ...button({ text: '', type: 'submit', fill: 'solid', expand: 'block' }),
                     token: 'reset-submit',
                     textKey: 'resetSubmit',
                 },
@@ -56828,7 +57164,7 @@ class PageContentComponent {
         if (!bg) {
             return 'var(--ion-background-color)';
         }
-        return resolveColor$1(bg);
+        return resolveColor(bg);
     }
     /**
      * Handles header action clicks.
@@ -57132,7 +57468,7 @@ class PageWrapperComponent {
             if (!bg) {
                 return 'var(--ion-background-color)';
             }
-            return resolveColor$1(bg);
+            return resolveColor(bg);
         });
     }
     /**
@@ -65073,7 +65409,12 @@ class RequestFormBuilderService {
         return {
             name: formName,
             sections: [section],
-            actions: SolidDefaultBlock(this.i18n.t(submitLabelKey, i18nNamespace), 'submit'),
+            actions: button({
+                text: this.i18n.t(submitLabelKey, i18nNamespace),
+                type: 'submit',
+                fill: 'solid',
+                expand: 'block',
+            }),
             state,
         };
     }
@@ -65346,138 +65687,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Output
             }] } });
 
-/**
- * Default values for InfoCardMetadata.
- */
-const INFO_CARD_DEFAULTS = {
-    iconColor: 'primary',
-    bordered: true,
-    shadowed: false,
-    padding: '1.5rem',
-    borderRadius: '16px',
-};
-
-const IONIC_COLORS$2 = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
-/**
- * val-info-card
- *
- * Card with icon + overtitle + title + subtitle on the left side, and a list
- * of key-value pairs (label: value) on the right side. Inspired by npm's
- * "Provenance" / metadata panel style.
- *
- * Two-column layout on desktop, stacked single-column on mobile.
- *
- * Presentational — pass already-resolved strings.
- *
- * @example
- * ```html
- * <val-info-card
- *   [props]="{
- *     icon: 'cube-outline',
- *     title: 'valtech-components',
- *     subtitle: 'v2.0.962',
- *     keyValues: [
- *       { label: 'License', value: 'MIT' },
- *       { label: 'Downloads', value: '1.2M' }
- *     ]
- *   }"
- * />
- * ```
- */
-class InfoCardComponent {
-    constructor() {
-        /** Component configuration */
-        this.props = input({});
-        /** Merged configuration with defaults */
-        this.config = computed(() => ({
-            ...INFO_CARD_DEFAULTS,
-            ...this.props(),
-        }));
-    }
-    getIconColor() {
-        const color = this.config().iconColor;
-        if (!color)
-            return `var(--ion-color-primary)`;
-        return IONIC_COLORS$2.includes(color) ? `var(--ion-color-${color})` : color;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: InfoCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: InfoCardComponent, isStandalone: true, selector: "val-info-card", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <div
-      class="info-card"
-      [class.info-card--bordered]="config().bordered"
-      [class.info-card--shadowed]="config().shadowed"
-      [style.padding]="config().padding"
-      [style.border-radius]="config().borderRadius"
-    >
-      <div class="info-card__left">
-        @if (config().icon) {
-          <ion-icon class="info-card__icon" [name]="config().icon" [style.color]="getIconColor()"></ion-icon>
-        }
-
-        @if (config().overtitle) {
-          <span class="info-card__overtitle">{{ config().overtitle }}</span>
-        }
-
-        <h3 class="info-card__title">{{ config().title }}</h3>
-
-        @if (config().subtitle) {
-          <p class="info-card__subtitle">{{ config().subtitle }}</p>
-        }
-      </div>
-
-      @if (config().keyValues?.length) {
-        <div class="info-card__right">
-          @for (kv of config().keyValues; track $index) {
-            <div class="info-card__kv">
-              <span class="info-card__kv-label">{{ kv.label }}</span>
-              <span class="info-card__kv-value">{{ kv.value }}</span>
-            </div>
-          }
-        </div>
-      }
-    </div>
-  `, isInline: true, styles: [":host{display:block}.info-card{display:flex;flex-direction:row;gap:2rem;background:var(--ion-card-background, var(--ion-background-color))}.info-card--bordered{border:1px solid var(--ion-color-light-shade, rgba(0, 0, 0, .1))}.info-card--shadowed{box-shadow:0 2px 8px #00000014}.info-card__left{display:flex;flex-direction:column;gap:.35rem;flex:1 1 0;min-width:0}.info-card__icon{font-size:2rem;margin-bottom:.25rem}.info-card__overtitle{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--ion-color-medium)}.info-card__title{margin:0;font-size:1.25rem;font-weight:700;color:var(--ion-text-color);line-height:1.3}.info-card__subtitle{margin:0;font-size:.875rem;color:var(--ion-color-medium-shade)}.info-card__right{display:flex;flex-direction:column;gap:.6rem;flex:0 0 auto;min-width:160px;max-width:260px}.info-card__kv{display:flex;flex-direction:column;gap:.1rem}.info-card__kv-label{font-size:.75rem;color:var(--ion-color-medium)}.info-card__kv-value{font-size:.9rem;font-weight:600;color:var(--ion-text-color);word-break:break-word}@media (max-width: 600px){.info-card{flex-direction:column;gap:1.25rem}.info-card__right{max-width:100%;flex-direction:row;flex-wrap:wrap;gap:.75rem 1.5rem}.info-card__kv{flex:0 0 auto}}:host-context(body.dark) .info-card--bordered,:host-context(html.ion-palette-dark) .info-card--bordered,:host-context([data-theme=dark]) .info-card--bordered{border-color:#ffffff1f}:host-context(body.dark) .info-card--shadowed,:host-context(html.ion-palette-dark) .info-card--shadowed,:host-context([data-theme=dark]) .info-card--shadowed{box-shadow:0 2px 8px #0000004d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: InfoCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-info-card', standalone: true, imports: [CommonModule, IonIcon], template: `
-    <div
-      class="info-card"
-      [class.info-card--bordered]="config().bordered"
-      [class.info-card--shadowed]="config().shadowed"
-      [style.padding]="config().padding"
-      [style.border-radius]="config().borderRadius"
-    >
-      <div class="info-card__left">
-        @if (config().icon) {
-          <ion-icon class="info-card__icon" [name]="config().icon" [style.color]="getIconColor()"></ion-icon>
-        }
-
-        @if (config().overtitle) {
-          <span class="info-card__overtitle">{{ config().overtitle }}</span>
-        }
-
-        <h3 class="info-card__title">{{ config().title }}</h3>
-
-        @if (config().subtitle) {
-          <p class="info-card__subtitle">{{ config().subtitle }}</p>
-        }
-      </div>
-
-      @if (config().keyValues?.length) {
-        <div class="info-card__right">
-          @for (kv of config().keyValues; track $index) {
-            <div class="info-card__kv">
-              <span class="info-card__kv-label">{{ kv.label }}</span>
-              <span class="info-card__kv-value">{{ kv.value }}</span>
-            </div>
-          }
-        </div>
-      }
-    </div>
-  `, styles: [":host{display:block}.info-card{display:flex;flex-direction:row;gap:2rem;background:var(--ion-card-background, var(--ion-background-color))}.info-card--bordered{border:1px solid var(--ion-color-light-shade, rgba(0, 0, 0, .1))}.info-card--shadowed{box-shadow:0 2px 8px #00000014}.info-card__left{display:flex;flex-direction:column;gap:.35rem;flex:1 1 0;min-width:0}.info-card__icon{font-size:2rem;margin-bottom:.25rem}.info-card__overtitle{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--ion-color-medium)}.info-card__title{margin:0;font-size:1.25rem;font-weight:700;color:var(--ion-text-color);line-height:1.3}.info-card__subtitle{margin:0;font-size:.875rem;color:var(--ion-color-medium-shade)}.info-card__right{display:flex;flex-direction:column;gap:.6rem;flex:0 0 auto;min-width:160px;max-width:260px}.info-card__kv{display:flex;flex-direction:column;gap:.1rem}.info-card__kv-label{font-size:.75rem;color:var(--ion-color-medium)}.info-card__kv-value{font-size:.9rem;font-weight:600;color:var(--ion-text-color);word-break:break-word}@media (max-width: 600px){.info-card{flex-direction:column;gap:1.25rem}.info-card__right{max-width:100%;flex-direction:row;flex-wrap:wrap;gap:.75rem 1.5rem}.info-card__kv{flex:0 0 auto}}:host-context(body.dark) .info-card--bordered,:host-context(html.ion-palette-dark) .info-card--bordered,:host-context([data-theme=dark]) .info-card--bordered{border-color:#ffffff1f}:host-context(body.dark) .info-card--shadowed,:host-context(html.ion-palette-dark) .info-card--shadowed,:host-context([data-theme=dark]) .info-card--shadowed{box-shadow:0 2px 8px #0000004d}\n"] }]
-        }] });
-
 /**
  * Default values for MetricCardMetadata.
  */
@@ -65627,99 +65836,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Output
             }] } });
 
-/**
- * Default values for ContentCardMetadata.
- */
-const CONTENT_CARD_DEFAULTS = {
-    padding: '1.5rem',
-    borderRadius: '20px',
-    bordered: false,
-    shadowed: true,
-    align: 'start',
-};
-
-const IONIC_COLORS$1 = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
-function resolveColor(value) {
-    if (!value)
-        return undefined;
-    return IONIC_COLORS$1.includes(value) ? `var(--ion-color-${value})` : value;
-}
-/**
- * val-content-card
- *
- * Generic container card with configurable padding, border radius, background
- * color and shadow. Accepts arbitrary content via ng-content. Use it to wrap
- * val-article, stats, or any other content that needs a card shell.
- *
- * @example
- * ```html
- * <val-content-card [props]="{ title: 'Summary', shadowed: true }">
- *   <p>Any inner content here.</p>
- * </val-content-card>
- * ```
- */
-class ContentCardComponent {
-    constructor() {
-        /** Component configuration */
-        this.props = input({});
-        /** Merged configuration with defaults */
-        this.config = computed(() => ({
-            ...CONTENT_CARD_DEFAULTS,
-            ...this.props(),
-        }));
-        this.resolvedBg = computed(() => resolveColor(this.config().backgroundColor));
-        this.resolvedColor = computed(() => resolveColor(this.config().color));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ContentCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ContentCardComponent, isStandalone: true, selector: "val-content-card", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <div
-      class="content-card"
-      [class.content-card--bordered]="config().bordered"
-      [class.content-card--shadowed]="config().shadowed"
-      [class.content-card--center]="config().align === 'center'"
-      [style.padding]="config().padding"
-      [style.border-radius]="config().borderRadius"
-      [style.background-color]="resolvedBg()"
-      [style.color]="resolvedColor()"
-    >
-      @if (config().title) {
-        <h3 class="content-card__title">{{ config().title }}</h3>
-      }
-
-      @if (config().description) {
-        <p class="content-card__description">{{ config().description }}</p>
-      }
-
-      <ng-content></ng-content>
-    </div>
-  `, isInline: true, styles: [":host{display:block}.content-card{background:var(--ion-card-background, var(--ion-background-color))}.content-card--bordered{border:1px solid var(--ion-color-light-shade, rgba(0, 0, 0, .1))}.content-card--shadowed{box-shadow:0 4px 16px #00000014}.content-card--center{text-align:center}.content-card__title{margin:0 0 .5rem;font-size:1.1rem;font-weight:700;color:inherit;line-height:1.3}.content-card__description{margin:0 0 1rem;font-size:.875rem;color:var(--ion-color-medium-shade);line-height:1.5}:host-context(body.dark) .content-card--bordered,:host-context(html.ion-palette-dark) .content-card--bordered,:host-context([data-theme=dark]) .content-card--bordered{border-color:#ffffff1f}:host-context(body.dark) .content-card--shadowed,:host-context(html.ion-palette-dark) .content-card--shadowed,:host-context([data-theme=dark]) .content-card--shadowed{box-shadow:0 4px 16px #0000004d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ContentCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-content-card', standalone: true, imports: [CommonModule], template: `
-    <div
-      class="content-card"
-      [class.content-card--bordered]="config().bordered"
-      [class.content-card--shadowed]="config().shadowed"
-      [class.content-card--center]="config().align === 'center'"
-      [style.padding]="config().padding"
-      [style.border-radius]="config().borderRadius"
-      [style.background-color]="resolvedBg()"
-      [style.color]="resolvedColor()"
-    >
-      @if (config().title) {
-        <h3 class="content-card__title">{{ config().title }}</h3>
-      }
-
-      @if (config().description) {
-        <p class="content-card__description">{{ config().description }}</p>
-      }
-
-      <ng-content></ng-content>
-    </div>
-  `, styles: [":host{display:block}.content-card{background:var(--ion-card-background, var(--ion-background-color))}.content-card--bordered{border:1px solid var(--ion-color-light-shade, rgba(0, 0, 0, .1))}.content-card--shadowed{box-shadow:0 4px 16px #00000014}.content-card--center{text-align:center}.content-card__title{margin:0 0 .5rem;font-size:1.1rem;font-weight:700;color:inherit;line-height:1.3}.content-card__description{margin:0 0 1rem;font-size:.875rem;color:var(--ion-color-medium-shade);line-height:1.5}:host-context(body.dark) .content-card--bordered,:host-context(html.ion-palette-dark) .content-card--bordered,:host-context([data-theme=dark]) .content-card--bordered{border-color:#ffffff1f}:host-context(body.dark) .content-card--shadowed,:host-context(html.ion-palette-dark) .content-card--shadowed,:host-context([data-theme=dark]) .content-card--shadowed{box-shadow:0 4px 16px #0000004d}\n"] }]
-        }] });
-
 /**
  * Default values for AuthCtaMetadata.
  */
@@ -66438,5 +66554,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_CARD_DEFAULTS, AD_SIZE_MAP, API_TABLE_COLUMN_LABELS, ARTICLE_CARD_DEFAULTS, ARTICLE_SPACING, ARTICLE_STRIP_DEFAULTS, AUTH_CTA_DEFAULTS, AVATAR_UPLOAD_DEFAULTS, AboutViewComponent, AccordionComponent, AccountViewComponent, ActionCardComponent, ActionHeaderComponent, ActionType, AdSlotComponent, AdsLoaderService, AdsService, AlertBoxComponent, AnalyticsErrorHandler, AnalyticsRouterTracker, AnalyticsService, AnimatedTerminalComponent, ApiKeyCreateModalComponent, ApiKeyService, ApiKeysModalComponent, ApiKeysViewComponent, AppConfigService, AppVersionService, ArticleBuilder, ArticleCardComponent, ArticleComponent, ArticleStripComponent, AttachmentUploaderComponent, AuthBackgroundComponent, AuthCtaComponent, AuthService, AuthStateService, AuthStorageService, AuthSyncService, AvatarComponent, AvatarUploadComponent, BOTTOM_NAV_DEFAULTS, BannerComponent, BaseDefault, BlogPostBuilder, BottomNavComponent, BoxComponent, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, CALLOUT_LABELS, CHEV_KEYS, CIRCLE_KEYS, COMMON_COUNTRY_CODES, COMMON_CURRENCIES, CONTENT_CARD_DEFAULTS, CORNER_KEYS, CTA_CARD_DEFAULTS, CURRENCY_INFO, CardComponent, CardSection, CardType, CardsCarouselComponent, ChangeEmailModalComponent, ChangePasswordModalComponent, CheckInputComponent, CheckboxRadioInputComponent, ChipGroupComponent, ClearDefault, ClearDefaultBlock, ClearDefaultFull, ClearDefaultRound, ClearDefaultRoundBlock, ClearDefaultRoundFull, CodeDisplayComponent, CommandDisplayComponent, CommentComponent, CommentInputComponent, CommentSectionComponent, CompanyFooterComponent, ComponentStates, ConfirmationDialogService, ContainerComponent, ContentCardComponent, ContentLoaderComponent, ContentReactionComponent, ContentService, ContentTransformer, CookieBannerComponent, CountdownComponent, CreateOrgModalComponent, CtaCardComponent, CurrencyInputComponent, DEFAULT_ADS_CONFIG, DEFAULT_APP_CONFIG_SERVICE_CONFIG, DEFAULT_APP_VERSION_SERVICE_CONFIG, DEFAULT_AUTH_CONFIG, DEFAULT_BACK_HEADER, DEFAULT_CANCEL_BUTTON, DEFAULT_CHECK_INTERVAL_MS, DEFAULT_CONFIRM_BUTTON, DEFAULT_COUNTDOWN_LABELS, DEFAULT_COUNTDOWN_LABELS_EN, DEFAULT_DEBUG_CONSOLE_CONFIG, DEFAULT_DONATION_CONFIG, DEFAULT_EMPTY_STATE, DEFAULT_EMULATOR_CONFIG, DEFAULT_FEEDBACK_CONFIG, DEFAULT_FEEDBACK_TYPE_OPTIONS, DEFAULT_HOME_HEADER, DEFAULT_INFINITE_LIST_METADATA, DEFAULT_MODAL_CANCEL_BUTTON, DEFAULT_MODAL_CONFIRM_BUTTON, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLATFORMS, DEFAULT_REFRESHER_METADATA, DEFAULT_SKELETON_CONFIG, DEFAULT_SPLASH_SCREEN_CONFIG, DataTableComponent, DateInputComponent, DatePickerComponent, DateRangeInputComponent, DebugConsoleComponent, DeleteAccountModalComponent, DetailSkeletonComponent, DeviceService, DisplayComponent, DividerComponent, DocsApiTableComponent, DocsBreadcrumbComponent, DocsBuilder, DocsCalloutComponent, DocsCodeExampleComponent, DocsLayoutComponent, DocsNavLinksComponent, DocsNavigationService, DocsPageComponent, DocsSearchComponent, DocsSectionComponent, DocsShellComponent, DocsSidebarComponent, DocsTocComponent, DonationService, DownloadService, EditOrgModalComponent, EmailInputComponent, EmptyStateComponent, ExpandableTextComponent, FEATURES_LIST_DEFAULTS, FUN_MODAL_DEFAULTS, FabComponent, FaqComponent, FeaturesListComponent, FeedbackFormComponent, FeedbackService, FieldListComponent, FileInputComponent, FirebaseService, FirestoreCollectionFactory, FirestoreService, FontSizeOption, FontSizeService, FooterComponent, FooterLinksComponent, FormComponent, FormSkeletonComponent, FunHeaderComponent, FunModalComponent, GlassComponent, GlowCardComponent, GlowComponent, GridSkeletonComponent, HANDOFF_ROUTE_PARAM, HANDOFF_TOKEN_PARAM, HandoffService, HasPermissionDirective, HeaderComponent, HintComponent, HorizontalScrollComponent, HourInputComponent, HrefComponent, I18nService, IMAGE_DEFAULTS, INFO_CARD_DEFAULTS, INITIAL_AUTH_STATE, INITIAL_MFA_STATE, INVITATION_CARD_DEFAULTS, Icon, IconComponent, IconService, ImageComponent, ImageCropComponent, ImageService, InAppBrowserService, InfiniteListComponent, InfoCardComponent, InfoComponent, InputI18nHelper, InputType, InvitationCardComponent, InviteMemberModalComponent, ItemListComponent, LANG_STORAGE_KEY$1 as LANG_STORAGE_KEY, LEGAL_CONTENT_CONFIG, LOGIN_DEFAULTS, LandingSplitComponent, LandingStepsComponent, LanguageSelectorComponent, LayeredCardComponent, LegalContentService, LegalLinkService, LinkComponent, LinkProcessorService, LinkedProvidersComponent, LinksAccordionComponent, LinksCakeComponent, ListSkeletonComponent, LoadingDirective, LocalStorageService, LocaleService, LoginAttemptModalComponent, LoginComponent, MEDIA_OBJECT_DEFAULTS, MEMBER_CARD_DEFAULTS, METRIC_CARD_DEFAULTS, MODAL_SIZES, MOTIF_KEYS, MOTION, MaintenancePageComponent, MarkdownArticleParserService, MediaObjectComponent, MemberCardComponent, MemberDetailModalComponent, MemberImportModalComponent, MenuComponent, MessagingService, MetaService, MetricCardComponent, MfaModalComponent, ModalService, ModalShellComponent, MultiSelectSearchComponent, NUM_KEYS, NavigationService, NetworkBannerComponent, NetworkStatusService, NewsBuilder, NoContentComponent, NotesBoxComponent, NotificationActionService, NotificationPreferencesViewComponent, NotificationsService, NotificationsViewComponent, NumberFromToComponent, NumberInputComponent, NumberStepperComponent, OAUTH_PROVIDERS_INFO, OAuthCallbackComponent, OAuthService, OrgInfoSheetComponent, OrgService, OrgSwitchService, OrganizationViewComponent, OutlineDefault, OutlineDefaultBlock, OutlineDefaultFull, OutlineDefaultRound, OutlineDefaultRoundBlock, OutlineDefaultRoundFull, PATTERN_MOTIFS, PATTERN_PALETTES, PATTERN_STYLE_CONFIGS, PLATFORM_CONFIGS, PageContentComponent, PageLinksComponent, PageRefreshService, PageTemplateComponent, PageWavesComponent, PageWrapperComponent, PaginationComponent, PaginationService, PasswordInputComponent, PatternComponent, PermissionCatalogService, PermissionSelectorComponent, PermissionsViewComponent, PhoneInputComponent, PillComponent, PinInputComponent, PlainCodeBoxComponent, PopoverSelectorComponent, PreferencesService, PreferencesViewComponent, PresetService, PriceTagComponent, PrimarySolidBlockButton, PrimarySolidBlockHrefButton, PrimarySolidBlockIconButton, PrimarySolidBlockIconHrefButton, PrimarySolidDefaultRoundButton, PrimarySolidDefaultRoundHrefButton, PrimarySolidDefaultRoundIconButton, PrimarySolidDefaultRoundIconHrefButton, PrimarySolidFullButton, PrimarySolidFullHrefButton, PrimarySolidFullIconButton, PrimarySolidFullIconHrefButton, PrimarySolidLargeRoundButton, PrimarySolidLargeRoundHrefButton, PrimarySolidLargeRoundIconButton, PrimarySolidLargeRoundIconHrefButton, PrimarySolidSmallRoundButton, PrimarySolidSmallRoundHrefButton, PrimarySolidSmallRoundIconButton, PrimarySolidSmallRoundIconHrefButton, ProcessLinksPipe, ProfileSkeletonComponent, ProfileViewComponent, ProgressBarComponent, ProgressRingComponent, ProgressStatusComponent, PrompterComponent, QR_PRESETS, QrCodeComponent, QrGeneratorService, QrScannerComponent, QueryBuilder, QuoteBoxComponent, REQUEST_STATUSES, RadioInputComponent, RangeInputComponent, RatingComponent, RefresherComponent, RequestFirestoreService, RequestFormBuilderService, RequestService, RightsFooterComponent, RotatingTextComponent, SEARCH_HEADER_DEFAULTS, SETTINGS_SECTIONS_CATALOG, SHAPE_KEYS, SHARE_PROFILE_MODAL_DEFAULTS, SKELETON_LAYOUT_DEFAULT_ROWS, SKELETON_PRESETS, SOLID_KEYS, STATS_BAR_DEFAULTS, STROKE_KEYS, SearchHeaderComponent, SearchSelectorComponent, SearchbarComponent, SecondarySolidBlockButton, SecondarySolidBlockHrefButton, SecondarySolidBlockIconButton, SecondarySolidBlockIconHrefButton, SecondarySolidDefaultRoundButton, SecondarySolidDefaultRoundHrefButton, SecondarySolidDefaultRoundIconButton, SecondarySolidDefaultRoundIconHrefButton, SecondarySolidFullButton, SecondarySolidFullHrefButton, SecondarySolidFullIconButton, SecondarySolidFullIconHrefButton, SecondarySolidLargeRoundButton, SecondarySolidLargeRoundHrefButton, SecondarySolidLargeRoundIconButton, SecondarySolidLargeRoundIconHrefButton, SecondarySolidSmallRoundButton, SecondarySolidSmallRoundHrefButton, SecondarySolidSmallRoundIconButton, SecondarySolidSmallRoundIconHrefButton, SecurityViewComponent, SegmentControlComponent, SelectSearchComponent, SessionListModalComponent, SessionService, SettingsHubComponent, ShareButtonsComponent, ShareProfileModalComponent, SimpleComponent, SkeletonComponent, SkeletonLayoutComponent, SkeletonService, SolidBlockButton, SolidDefault, SolidDefaultBlock, SolidDefaultButton, SolidDefaultFull, SolidDefaultRound, SolidDefaultRoundBlock, SolidDefaultRoundButton, SolidDefaultRoundFull, SolidFullButton, SolidLargeButton, SolidLargeRoundButton, SolidSmallButton, SolidSmallRoundButton, SplashScreenService, StatsBarComponent, StatsCardComponent, StepperComponent, StorageService, SwipeCarouselComponent, SwitchOrgModalComponent, TRI_KEYS, TabbedContentComponent, TableSkeletonComponent, TabsComponent, Terminal404Component, TestimonialCardComponent, TestimonialCarouselComponent, TextComponent, TextInputComponent, TextareaInputComponent, ThemeOption, ThemeService, TicketCardComponent, TimelineComponent, TitleBlockComponent, TitleComponent, ToastService, ToggleInputComponent, TokenService, ToolbarActionType, ToolbarComponent, TransferOwnershipModalComponent, TranslatePipe, TypedCollection, UPDATE_BANNER_DEFAULT_CONTENT, UPDATE_BANNER_I18N_NAMESPACE, UpdateBannerComponent, UserAvatarComponent, UsernameInputComponent, VALTECH_ADS_CONFIG, VALTECH_APP_CONFIG, VALTECH_APP_VERSION, VALTECH_AUTH_CONFIG, VALTECH_COMPANY_LINKS, VALTECH_CONTENT_CONFIG, VALTECH_DEBUG_CONSOLE, VALTECH_DEFAULT_CONTENT, VALTECH_DONATION_CONFIG, VALTECH_FEEDBACK_CONFIG, VALTECH_FIREBASE_CONFIG, VALTECH_FOOTER_I18N, VALTECH_FOOTER_LOGO, VALTECH_LANGUAGE_SELECTOR, VALTECH_LEGAL_CONFIG, VALTECH_NETWORK_ERROR_KEY, VALTECH_SETTINGS_MENU_LINKS, VALTECH_SITE_PATHS, VALTECH_SOCIAL_LINKS, VALTECH_SPLASH_SCREEN, VALTECH_WEB_BASE_URLS, VERSION, ValtechErrorService, WizardComponent, WizardFooterComponent, applyDefaultValueToControl, authGuard, authInterceptor, authPasswordValidator, beautifyLegalArticle, blogPost, buildCompanyFooterProps, buildFooterLinks, buildLegalLinkResolver, buildPath, buildSettingsCards, collections, connectPageRefresh, createErrorStateProps, createFirebaseConfig, createGlowCardProps, createInitialPaginationState, createNumberFromToField, createPermissionLabeler, createRefreshableStream, createTitleProps, docs, errorLoggingInterceptor, extractPathParams, generatePatternTiles, generateRandomTile, getAppInfo, getAppVersion, getCollectionPath, getDocumentId, getTimeOfDayKey, goToTop, guestGuard, hasEmulators, interpretError, isAtEnd, isCollectionPath, isDocumentPath, isEmulatorMode, isValidPath, joinPath, maxLength, mulberry32, news, parseMarkdownArticle, permissionGuard, permissionGuardFromRoute, provideLegalContent, provideSplashScreen, provideValtechAboutRoutes, provideValtechAccountRoutes, provideValtechAds, provideValtechApiKeysRoutes, provideValtechAppConfig, provideValtechAppVersion, provideValtechAuth, provideValtechAuthInterceptor, provideValtechContent, provideValtechDebugConsole, provideValtechDonations, provideValtechErrorHandling, provideValtechFeedback, provideValtechFirebase, provideValtechI18n, provideValtechLegal, provideValtechNotificationPreferencesRoutes, provideValtechNotificationsRoutes, provideValtechOrganizationRoutes, provideValtechPermissionsRoutes, provideValtechPreferencesRoutes, provideValtechPresets, provideValtechProfileRoutes, provideValtechSecurityRoutes, provideValtechSettingsRoutes, provideValtechSite, provideValtechSkeleton, query, renderPatternSvgInner, replaceSpecialChars, resolveColor$1 as resolveColor, resolveInputDefaultValue, resolveWebBaseUrl, roleGuard, storagePaths, superAdminGuard, toArticle };
+export { ACTION_CARD_DEFAULTS, AD_SIZE_MAP, API_TABLE_COLUMN_LABELS, ARTICLE_CARD_DEFAULTS, ARTICLE_SPACING, ARTICLE_STRIP_DEFAULTS, AUTH_CTA_DEFAULTS, AVATAR_UPLOAD_DEFAULTS, AboutViewComponent, AccordionComponent, AccountViewComponent, ActionCardComponent, ActionHeaderComponent, ActionType, AdSlotComponent, AdsLoaderService, AdsService, AlertBoxComponent, AnalyticsErrorHandler, AnalyticsRouterTracker, AnalyticsService, AnimatedTerminalComponent, ApiKeyCreateModalComponent, ApiKeyService, ApiKeysModalComponent, ApiKeysViewComponent, AppConfigService, AppVersionService, ArticleBuilder, ArticleCardComponent, ArticleComponent, ArticleStripComponent, AttachmentUploaderComponent, AuthBackgroundComponent, AuthCtaComponent, AuthService, AuthStateService, AuthStorageService, AuthSyncService, AvatarComponent, AvatarUploadComponent, BOTTOM_NAV_DEFAULTS, BannerComponent, BlogPostBuilder, BottomNavComponent, BoxComponent, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, CALLOUT_LABELS, CHEV_KEYS, CIRCLE_KEYS, COMMON_COUNTRY_CODES, COMMON_CURRENCIES, CORNER_KEYS, CTA_CARD_DEFAULTS, CURRENCY_INFO, CardComponent, CardSection, CardType, CardsCarouselComponent, ChangeEmailModalComponent, ChangePasswordModalComponent, CheckInputComponent, CheckboxRadioInputComponent, ChipGroupComponent, CodeDisplayComponent, CommandDisplayComponent, CommentComponent, CommentInputComponent, CommentSectionComponent, CompanyFooterComponent, ComponentStates, ConfirmationDialogService, ContainerComponent, ContentLoaderComponent, ContentReactionComponent, ContentService, ContentTransformer, CookieBannerComponent, CountdownComponent, CreateOrgModalComponent, CtaCardComponent, CurrencyInputComponent, DEFAULT_ADS_CONFIG, DEFAULT_APP_CONFIG_SERVICE_CONFIG, DEFAULT_APP_VERSION_SERVICE_CONFIG, DEFAULT_AUTH_CONFIG, DEFAULT_BACK_HEADER, DEFAULT_BUTTON_PRESETS, DEFAULT_CANCEL_BUTTON, DEFAULT_CHECK_INTERVAL_MS, DEFAULT_CONFIRM_BUTTON, DEFAULT_COUNTDOWN_LABELS, DEFAULT_COUNTDOWN_LABELS_EN, DEFAULT_DEBUG_CONSOLE_CONFIG, DEFAULT_DONATION_CONFIG, DEFAULT_EMPTY_STATE, DEFAULT_EMULATOR_CONFIG, DEFAULT_FEEDBACK_CONFIG, DEFAULT_FEEDBACK_TYPE_OPTIONS, DEFAULT_HOME_HEADER, DEFAULT_INFINITE_LIST_METADATA, DEFAULT_MODAL_CANCEL_BUTTON, DEFAULT_MODAL_CONFIRM_BUTTON, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLATFORMS, DEFAULT_PRESETS, DEFAULT_REFRESHER_METADATA, DEFAULT_SKELETON_CONFIG, DEFAULT_SPLASH_SCREEN_CONFIG, DataTableComponent, DateInputComponent, DatePickerComponent, DateRangeInputComponent, DebugConsoleComponent, DeleteAccountModalComponent, DetailSkeletonComponent, DeviceService, DisplayComponent, DividerComponent, DocsApiTableComponent, DocsBreadcrumbComponent, DocsBuilder, DocsCalloutComponent, DocsCodeExampleComponent, DocsLayoutComponent, DocsNavLinksComponent, DocsNavigationService, DocsPageComponent, DocsSearchComponent, DocsSectionComponent, DocsShellComponent, DocsSidebarComponent, DocsTocComponent, DonationService, DownloadService, EditOrgModalComponent, EmptyStateComponent, ExpandableTextComponent, FEATURES_LIST_DEFAULTS, FUN_MODAL_DEFAULTS, FabComponent, FaqComponent, FeaturesListComponent, FeedbackFormComponent, FeedbackService, FieldListComponent, FileInputComponent, FirebaseService, FirestoreCollectionFactory, FirestoreService, FontSizeOption, FontSizeService, FooterComponent, FooterLinksComponent, FormComponent, FormSkeletonComponent, FunHeaderComponent, FunModalComponent, GlassComponent, GlowCardComponent, GlowComponent, GridSkeletonComponent, HANDOFF_ROUTE_PARAM, HANDOFF_TOKEN_PARAM, HandoffService, HasPermissionDirective, HeaderComponent, HintComponent, HorizontalScrollComponent, HrefComponent, I18nService, IMAGE_DEFAULTS, INITIAL_AUTH_STATE, INITIAL_MFA_STATE, INVITATION_CARD_DEFAULTS, IONIC_COLORS$5 as IONIC_COLORS, Icon, IconComponent, IconService, ImageComponent, ImageCropComponent, ImageService, InAppBrowserService, InfiniteListComponent, InfoComponent, InputI18nHelper, InputType, InvitationCardComponent, InviteMemberModalComponent, ItemListComponent, LANG_STORAGE_KEY$1 as LANG_STORAGE_KEY, LEGAL_CONTENT_CONFIG, LOGIN_DEFAULTS, LandingSplitComponent, LandingStepsComponent, LanguageSelectorComponent, LayeredCardComponent, LegalContentService, LegalLinkService, LinkComponent, LinkProcessorService, LinkedProvidersComponent, LinksAccordionComponent, LinksCakeComponent, ListSkeletonComponent, LoadingDirective, LocalStorageService, LocaleService, LoginAttemptModalComponent, LoginComponent, MEDIA_OBJECT_DEFAULTS, MEMBER_CARD_DEFAULTS, METRIC_CARD_DEFAULTS, MODAL_SIZES, MOTIF_KEYS, MOTION, MaintenancePageComponent, MarkdownArticleParserService, MediaObjectComponent, MemberCardComponent, MemberDetailModalComponent, MemberImportModalComponent, MenuComponent, MessagingService, MetaService, MetricCardComponent, MfaModalComponent, ModalService, ModalShellComponent, MultiSelectSearchComponent, NUM_KEYS, NavigationService, NetworkBannerComponent, NetworkStatusService, NewsBuilder, NoContentComponent, NotesBoxComponent, NotificationActionService, NotificationPreferencesViewComponent, NotificationsService, NotificationsViewComponent, NumberFromToComponent, NumberStepperComponent, OAUTH_PROVIDERS_INFO, OAuthCallbackComponent, OAuthService, OrgInfoSheetComponent, OrgService, OrgSwitchService, OrganizationViewComponent, PATTERN_MOTIFS, PATTERN_PALETTES, PATTERN_STYLE_CONFIGS, PLATFORM_CONFIGS, PageContentComponent, PageLinksComponent, PageRefreshService, PageTemplateComponent, PageWavesComponent, PageWrapperComponent, PaginationComponent, PaginationService, PasswordInputComponent, PatternComponent, PermissionCatalogService, PermissionSelectorComponent, PermissionsViewComponent, PhoneInputComponent, PillComponent, PinInputComponent, PlainCodeBoxComponent, PopoverSelectorComponent, PreferencesService, PreferencesViewComponent, PresetService, PriceTagComponent, ProcessLinksPipe, ProfileSkeletonComponent, ProfileViewComponent, ProgressBarComponent, ProgressRingComponent, ProgressStatusComponent, PrompterComponent, QR_PRESETS, QrCodeComponent, QrGeneratorService, QrScannerComponent, QueryBuilder, QuoteBoxComponent, REQUEST_STATUSES, RadioInputComponent, RangeInputComponent, RatingComponent, RefresherComponent, RequestFirestoreService, RequestFormBuilderService, RequestService, RightsFooterComponent, RotatingTextComponent, SEARCH_HEADER_DEFAULTS, SETTINGS_SECTIONS_CATALOG, SHAPE_KEYS, SHARE_PROFILE_MODAL_DEFAULTS, SKELETON_LAYOUT_DEFAULT_ROWS, SKELETON_PRESETS, SOLID_KEYS, STATS_BAR_DEFAULTS, STROKE_KEYS, SearchHeaderComponent, SearchSelectorComponent, SearchbarComponent, SecurityViewComponent, SegmentControlComponent, SelectSearchComponent, SessionListModalComponent, SessionService, SettingsHubComponent, ShareButtonsComponent, ShareProfileModalComponent, SimpleComponent, SkeletonComponent, SkeletonLayoutComponent, SkeletonService, SplashScreenService, StatsBarComponent, StatsCardComponent, StepperComponent, StorageService, SwipeCarouselComponent, SwitchOrgModalComponent, TRI_KEYS, TabbedContentComponent, TableSkeletonComponent, TabsComponent, Terminal404Component, TestimonialCardComponent, TestimonialCarouselComponent, TextComponent, TextInputComponent, TextareaInputComponent, ThemeOption, ThemeService, TicketCardComponent, TimelineComponent, TitleBlockComponent, TitleComponent, ToastService, ToggleInputComponent, TokenService, ToolbarActionType, ToolbarComponent, TransferOwnershipModalComponent, TranslatePipe, TypedCollection, UPDATE_BANNER_DEFAULT_CONTENT, UPDATE_BANNER_I18N_NAMESPACE, UpdateBannerComponent, UserAvatarComponent, UsernameInputComponent, VALTECH_ADS_CONFIG, VALTECH_APP_CONFIG, VALTECH_APP_VERSION, VALTECH_AUTH_CONFIG, VALTECH_COMPANY_LINKS, VALTECH_CONTENT_CONFIG, VALTECH_DEBUG_CONSOLE, VALTECH_DEFAULT_CONTENT, VALTECH_DONATION_CONFIG, VALTECH_FEEDBACK_CONFIG, VALTECH_FIREBASE_CONFIG, VALTECH_FOOTER_I18N, VALTECH_FOOTER_LOGO, VALTECH_LANGUAGE_SELECTOR, VALTECH_LEGAL_CONFIG, VALTECH_NETWORK_ERROR_KEY, VALTECH_SETTINGS_MENU_LINKS, VALTECH_SITE_PATHS, VALTECH_SOCIAL_LINKS, VALTECH_SPLASH_SCREEN, VALTECH_WEB_BASE_URLS, VERSION, ValtechErrorService, WizardComponent, WizardFooterComponent, applyDefaultValueToControl, authGuard, authInterceptor, authPasswordValidator, beautifyLegalArticle, blogPost, buildCompanyFooterProps, buildFooterLinks, buildLegalLinkResolver, buildPath, buildSettingsCards, button, collections, connectPageRefresh, createErrorStateProps, createFirebaseConfig, createGlowCardProps, createInitialPaginationState, createNumberFromToField, createPermissionLabeler, createRefreshableStream, createTitleProps, docs, errorLoggingInterceptor, extractPathParams, generatePatternTiles, generateRandomTile, getAppInfo, getAppVersion, getCollectionPath, getDocumentId, getTimeOfDayKey, goToTop, guestGuard, hasEmulators, iconButton, interpretError, isAtEnd, isCollectionPath, isDocumentPath, isEmulatorMode, isIonicColor, isValidPath, joinPath, maxLength, mulberry32, news, parseMarkdownArticle, permissionGuard, permissionGuardFromRoute, provideLegalContent, provideSplashScreen, provideValtechAboutRoutes, provideValtechAccountRoutes, provideValtechAds, provideValtechApiKeysRoutes, provideValtechAppConfig, provideValtechAppVersion, provideValtechAuth, provideValtechAuthInterceptor, provideValtechContent, provideValtechDebugConsole, provideValtechDonations, provideValtechErrorHandling, provideValtechFeedback, provideValtechFirebase, provideValtechI18n, provideValtechLegal, provideValtechNotificationPreferencesRoutes, provideValtechNotificationsRoutes, provideValtechOrganizationRoutes, provideValtechPermissionsRoutes, provideValtechPreferencesRoutes, provideValtechPresets, provideValtechProfileRoutes, provideValtechSecurityRoutes, provideValtechSettingsRoutes, provideValtechSite, provideValtechSkeleton, query, renderPatternSvgInner, replaceSpecialChars, resolveColor, resolveInputDefaultValue, resolveIonicColor, resolveWebBaseUrl, roleGuard, storagePaths, superAdminGuard, toArticle };
 //# sourceMappingURL=valtech-components.mjs.map