valtech-components 4.0.1030 → 4.0.1032

package/fesm2022/valtech-components.mjs

@@ -70,7 +70,7 @@ import fixWebmDuration from 'fix-webm-duration';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '4.0.1030';
+const VERSION = '4.0.1031';
 
 function evaluateValtechAccess(rule, context, features = {}, visitedFeatures = new Set()) {
     if (rule == null)
@@ -7826,6 +7826,7 @@ const VALTECH_DEFAULT_CONTENT = {
             // Componentes - AttachmentUploader
             attachAdd: 'Adjuntar archivo',
             attachCamera: 'Usar cámara',
+            attachFile: 'Archivo',
             attachMaxCount: 'Límite de {count} archivos alcanzado',
             attachUploadFailed: 'Error al subir el archivo',
             attachCapture: 'Capturar',
@@ -7991,6 +7992,7 @@ const VALTECH_DEFAULT_CONTENT = {
             // Components - AttachmentUploader
             attachAdd: 'Attach file',
             attachCamera: 'Use camera',
+            attachFile: 'File',
             attachMaxCount: 'Limit of {count} files reached',
             attachUploadFailed: 'Error uploading file',
             attachCapture: 'Capture',
@@ -10293,6 +10295,7 @@ class AuthService {
             .post(`${this.baseUrl}/mfa/verify`, {
             mfaToken: mfaState.mfaToken,
             code,
+            appId: this.config?.appId,
         })
             .pipe(tap(response => {
             this.stateService.clearMFAPending();
@@ -12015,16 +12018,16 @@ function provideValtechPresets(presets) {
 // Service
 
 /**
- * val-avatar
+ * vds-avatar
  *
  * Displays a user or profile image, optionally with a box style and different sizes.
  * Supports presets for reusable configurations.
  *
  * @example With preset (recommended):
- * <val-avatar preset="profile" [props]="{ image: 'url' }" (onClick)="handler()"></val-avatar>
+ * <vds-avatar preset="profile" [props]="{ image: 'url' }" (onClick)="handler()"></vds-avatar>
  *
  * @example Static (backwards compatible):
- * <val-avatar [props]="{ image: 'url', size: 'medium', box: true }" (onClick)="handler()"></val-avatar>
+ * <vds-avatar [props]="{ image: 'url', size: 'medium', box: true }" (onClick)="handler()"></vds-avatar>
  *
  * @input preset: string - Name of preset to apply
  * @input props: AvatarMetadata - Configuration for the avatar (image, size, box, default image)
@@ -12059,9 +12062,7 @@ class AvatarComponent {
      * Explicit props take precedence over preset values.
      */
     resolveProps() {
-        const presetProps = this.preset
-            ? this.presets.get('avatar', this.preset)
-            : {};
+        const presetProps = this.preset ? this.presets.get('avatar', this.preset) : {};
         this.resolvedProps = {
             ...presetProps,
             ...this.props,
@@ -12071,7 +12072,7 @@ class AvatarComponent {
         this.onClick.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AvatarComponent, isStandalone: true, selector: "val-avatar", inputs: { preset: "preset", props: "props" }, outputs: { onClick: "onClick" }, usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AvatarComponent, isStandalone: true, selector: "val-avatar, vds-avatar", inputs: { preset: "preset", props: "props" }, outputs: { onClick: "onClick" }, usesOnChanges: true, ngImport: i0, template: `
     <ion-avatar
       aria-hidden="true"
       [class]="resolvedProps.size"
@@ -12085,7 +12086,7 @@ class AvatarComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-avatar', standalone: true, imports: [IonAvatar], template: `
+            args: [{ selector: 'val-avatar, vds-avatar', standalone: true, imports: [IonAvatar], template: `
     <ion-avatar
       aria-hidden="true"
       [class]="resolvedProps.size"
@@ -13928,16 +13929,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }] } });
 
 /**
- * val-progress-bar
+ * vds-progress-bar
  *
  * A progress bar for indicating completion or loading state.
  * Supports presets for reusable configurations.
  *
  * @example With preset:
- * <val-progress-bar preset="default" [props]="{ progress: 0.5 }"></val-progress-bar>
+ * <vds-progress-bar preset="default" [props]="{ progress: 0.5 }"></vds-progress-bar>
  *
  * @example Static:
- * <val-progress-bar [props]="{ progress: 0.5, color: 'success', size: 'small' }"></val-progress-bar>
+ * <vds-progress-bar [props]="{ progress: 0.5, color: 'success', size: 'small' }"></vds-progress-bar>
  *
  * @input preset: string - Name of preset to apply
  * @input props: ProgressBarMetadata - Configuration for the progress bar (progress, color, size, etc.)
@@ -13961,6 +13962,9 @@ class ProgressBarComponent {
          */
         this.resolvedProps = {};
     }
+    get colorClass() {
+        return `color-${this.resolvedProps.color || 'primary'}`;
+    }
     ngOnInit() {
         this.resolveProps();
     }
@@ -13984,31 +13988,29 @@ class ProgressBarComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ProgressBarComponent, isStandalone: true, selector: "val-progress-bar", inputs: { preset: "preset", props: "props" }, usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ProgressBarComponent, isStandalone: true, selector: "val-progress-bar, vds-progress-bar", inputs: { preset: "preset", props: "props" }, usesOnChanges: true, ngImport: i0, template: `
     <ion-progress-bar
-      [ngClass]="[resolvedProps.size]"
+      [ngClass]="[resolvedProps.size, colorClass]"
       [class.rounded]="resolvedProps.rounded"
       [value]="resolvedProps.progress"
-      [color]="resolvedProps.color"
       [buffer]="resolvedProps.buffer"
       [type]="resolvedProps.type"
       [attr.aria-label]="resolvedProps.label || 'Progreso'"
     ></ion-progress-bar>
-  `, isInline: true, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-xl-wide: 1280px;--val-container-md-wide: 900px;--val-container-aside: 0px;--val-container-padding: 16px;--val-radius-xs: 10px;--val-radius-sm: 16px;--val-radius-md: 20px;--val-radius-lg: 28px;--val-radius-xl: 36px;--val-radius-full: 999px;--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: #737478;--ion-color-medium-rgb: 115,116,120;--ion-color-medium-contrast: #ffffff;--ion-color-medium-contrast-rgb: 255,255,255;--ion-color-medium-shade: #65666a;--ion-color-medium-tint: #818286;--ion-color-warning: #ffde38;--ion-color-warning-rgb: 255, 222, 56;--ion-color-warning-contrast: #000000;--ion-color-warning-contrast-rgb: 0, 0, 0;--ion-color-warning-shade: #e0c331;--ion-color-warning-tint: #ffe14c;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-dark)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}ion-progress-bar.rounded{border-radius:.5rem}.medium{height:.25rem}.large{height:.375rem}.xlarge{height:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IonProgressBar, selector: "ion-progress-bar", inputs: ["buffer", "color", "mode", "reversed", "type", "value"] }] }); }
+  `, 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-xl-wide: 1280px;--val-container-md-wide: 900px;--val-container-aside: 0px;--val-container-padding: 16px;--val-radius-xs: 10px;--val-radius-sm: 16px;--val-radius-md: 20px;--val-radius-lg: 28px;--val-radius-xl: 36px;--val-radius-full: 999px;--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: #737478;--ion-color-medium-rgb: 115,116,120;--ion-color-medium-contrast: #ffffff;--ion-color-medium-contrast-rgb: 255,255,255;--ion-color-medium-shade: #65666a;--ion-color-medium-tint: #818286;--ion-color-warning: #ffde38;--ion-color-warning-rgb: 255, 222, 56;--ion-color-warning-contrast: #000000;--ion-color-warning-contrast-rgb: 0, 0, 0;--ion-color-warning-shade: #e0c331;--ion-color-warning-tint: #ffe14c;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-dark)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}ion-progress-bar{--background: var(--vds-progress-bar-track-bg, var(--vds-bg-muted, rgba(148, 163, 184, .22)));--buffer-background: var( --vds-progress-bar-buffer-bg, var(--vds-bg-subtle, rgba(148, 163, 184, .32)) );--progress-background: var( --vds-progress-bar-color, var(--vds-primary, var(--ion-color-primary, #2563eb)) )}ion-progress-bar.rounded{border-radius:.5rem}.color-primary{--vds-progress-bar-color: var( --vds-primary, var(--vds-action-primary, var(--ion-color-primary, #2563eb)) )}.color-secondary{--vds-progress-bar-color: var(--vds-secondary, var(--ion-color-secondary, #64748b))}.color-tertiary{--vds-progress-bar-color: var(--vds-tertiary, var(--ion-color-tertiary, #7c3aed))}.color-success{--vds-progress-bar-color: var(--vds-success, var(--ion-color-success, #16a34a))}.color-warning{--vds-progress-bar-color: var(--vds-warning, var(--ion-color-warning, #d97706))}.color-danger{--vds-progress-bar-color: var(--vds-danger, var(--ion-color-danger, #dc2626))}.color-info{--vds-progress-bar-color: var(--vds-info, #0284c7)}.color-neutral{--vds-progress-bar-color: var(--vds-neutral, #64748b)}.color-light{--vds-progress-bar-color: var(--vds-light, var(--ion-color-light, #f8fafc))}.color-dark{--vds-progress-bar-color: var(--vds-dark, var(--ion-color-dark, #0f172a))}.medium{height:.25rem}.large{height:.375rem}.xlarge{height:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IonProgressBar, selector: "ion-progress-bar", inputs: ["buffer", "color", "mode", "reversed", "type", "value"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProgressBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-progress-bar', standalone: true, imports: [CommonModule, IonProgressBar], template: `
+            args: [{ selector: 'val-progress-bar, vds-progress-bar', standalone: true, imports: [CommonModule, IonProgressBar], template: `
     <ion-progress-bar
-      [ngClass]="[resolvedProps.size]"
+      [ngClass]="[resolvedProps.size, colorClass]"
       [class.rounded]="resolvedProps.rounded"
       [value]="resolvedProps.progress"
-      [color]="resolvedProps.color"
       [buffer]="resolvedProps.buffer"
       [type]="resolvedProps.type"
       [attr.aria-label]="resolvedProps.label || 'Progreso'"
     ></ion-progress-bar>
-  `, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-xl-wide: 1280px;--val-container-md-wide: 900px;--val-container-aside: 0px;--val-container-padding: 16px;--val-radius-xs: 10px;--val-radius-sm: 16px;--val-radius-md: 20px;--val-radius-lg: 28px;--val-radius-xl: 36px;--val-radius-full: 999px;--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: #737478;--ion-color-medium-rgb: 115,116,120;--ion-color-medium-contrast: #ffffff;--ion-color-medium-contrast-rgb: 255,255,255;--ion-color-medium-shade: #65666a;--ion-color-medium-tint: #818286;--ion-color-warning: #ffde38;--ion-color-warning-rgb: 255, 222, 56;--ion-color-warning-contrast: #000000;--ion-color-warning-contrast-rgb: 0, 0, 0;--ion-color-warning-shade: #e0c331;--ion-color-warning-tint: #ffe14c;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-dark)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}ion-progress-bar.rounded{border-radius:.5rem}.medium{height:.25rem}.large{height:.375rem}.xlarge{height:.5rem}\n"] }]
+  `, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-xl-wide: 1280px;--val-container-md-wide: 900px;--val-container-aside: 0px;--val-container-padding: 16px;--val-radius-xs: 10px;--val-radius-sm: 16px;--val-radius-md: 20px;--val-radius-lg: 28px;--val-radius-xl: 36px;--val-radius-full: 999px;--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: #737478;--ion-color-medium-rgb: 115,116,120;--ion-color-medium-contrast: #ffffff;--ion-color-medium-contrast-rgb: 255,255,255;--ion-color-medium-shade: #65666a;--ion-color-medium-tint: #818286;--ion-color-warning: #ffde38;--ion-color-warning-rgb: 255, 222, 56;--ion-color-warning-contrast: #000000;--ion-color-warning-contrast-rgb: 0, 0, 0;--ion-color-warning-shade: #e0c331;--ion-color-warning-tint: #ffe14c;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-dark)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}ion-progress-bar{--background: var(--vds-progress-bar-track-bg, var(--vds-bg-muted, rgba(148, 163, 184, .22)));--buffer-background: var( --vds-progress-bar-buffer-bg, var(--vds-bg-subtle, rgba(148, 163, 184, .32)) );--progress-background: var( --vds-progress-bar-color, var(--vds-primary, var(--ion-color-primary, #2563eb)) )}ion-progress-bar.rounded{border-radius:.5rem}.color-primary{--vds-progress-bar-color: var( --vds-primary, var(--vds-action-primary, var(--ion-color-primary, #2563eb)) )}.color-secondary{--vds-progress-bar-color: var(--vds-secondary, var(--ion-color-secondary, #64748b))}.color-tertiary{--vds-progress-bar-color: var(--vds-tertiary, var(--ion-color-tertiary, #7c3aed))}.color-success{--vds-progress-bar-color: var(--vds-success, var(--ion-color-success, #16a34a))}.color-warning{--vds-progress-bar-color: var(--vds-warning, var(--ion-color-warning, #d97706))}.color-danger{--vds-progress-bar-color: var(--vds-danger, var(--ion-color-danger, #dc2626))}.color-info{--vds-progress-bar-color: var(--vds-info, #0284c7)}.color-neutral{--vds-progress-bar-color: var(--vds-neutral, #64748b)}.color-light{--vds-progress-bar-color: var(--vds-light, var(--ion-color-light, #f8fafc))}.color-dark{--vds-progress-bar-color: var(--vds-dark, var(--ion-color-dark, #0f172a))}.medium{height:.25rem}.large{height:.375rem}.xlarge{height:.5rem}\n"] }]
         }], propDecorators: { preset: [{
                 type: Input
             }], props: [{
@@ -18245,16 +18247,16 @@ var CardSection;
 })(CardSection || (CardSection = {}));
 
 /**
- * val-card
+ * vds-card
  *
  * A flexible card component supporting images, titles, content, actions, and custom sections.
  * Supports presets for reusable configurations.
  *
  * @example With preset (recommended):
- * <val-card preset="feature" [props]="{ title: 'Card', image: 'url', content: '...' }" (onClick)="handler($event)"></val-card>
+ * <vds-card preset="feature" [props]="{ title: 'Card', image: 'url', content: '...' }" (onClick)="handler($event)"></vds-card>
  *
  * @example Static (backwards compatible):
- * <val-card [props]="{ type: 'native', title: 'Card', image: 'url', content: '...' }" (onClick)="handler($event)"></val-card>
+ * <vds-card [props]="{ type: 'native', title: 'Card', image: 'url', content: '...' }" (onClick)="handler($event)"></vds-card>
  *
  * @input preset: string - Name of preset to apply (e.g., 'feature', 'compact')
  * @input props: CardMetadata - Configuration for the card (overrides preset values)
@@ -18315,7 +18317,7 @@ class CardComponent {
         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: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CardComponent, isStandalone: true, selector: "val-card, vds-card", inputs: { preset: "preset", props: "props" }, outputs: { onClick: "onClick" }, usesOnChanges: true, ngImport: i0, template: `
     <ion-card *ngIf="resolvedProps.type === types.native">
       @if (resolvedProps.image) {
         <img [alt]="resolvedProps.title || 'Card image'" [src]="resolvedProps.image" />
@@ -18392,14 +18394,19 @@ class CardComponent {
               [attr.aria-label]="action.description"
               (click)="clickHandler(sections.headerLeft, action.token)"
             >
-              <ion-icon slot="icon-only" [name]="action.description" color="dark" aria-hidden="true"></ion-icon>
+              <ion-icon
+                slot="icon-only"
+                [name]="action.description"
+                class="card-action-icon"
+                aria-hidden="true"
+              ></ion-icon>
             </ion-button>
-            <val-avatar
+            <vds-avatar
               style="margin-right: 4px; cursor: pointer"
               *ngIf="action.type === actionTypes.AVATAR"
               [props]="{ size: 'small', image: action.description, default: '' }"
               (onClick)="clickHandler(sections.headerLeft, action.token)"
-            ></val-avatar>
+            ></vds-avatar>
             <val-image
               *ngIf="action.type === actionTypes.IMAGE"
               [props]="action.image"
@@ -18423,14 +18430,19 @@ class CardComponent {
               [attr.aria-label]="action.description"
               (click)="clickHandler(sections.headerRight, action.token)"
             >
-              <ion-icon slot="icon-only" [name]="action.description" color="dark" aria-hidden="true"></ion-icon>
+              <ion-icon
+                slot="icon-only"
+                [name]="action.description"
+                class="card-action-icon"
+                aria-hidden="true"
+              ></ion-icon>
             </ion-button>
-            <val-avatar
+            <vds-avatar
               style="margin-right: 4px; cursor: pointer"
               *ngIf="action.type === actionTypes.AVATAR"
               [props]="{ size: 'small', image: action.description, default: '' }"
               (onClick)="clickHandler(sections.headerRight, action.token)"
-            ></val-avatar>
+            ></vds-avatar>
             <val-image
               *ngIf="action.type === actionTypes.IMAGE"
               [props]="action.image"
@@ -18488,14 +18500,19 @@ class CardComponent {
             [attr.aria-label]="action.description"
             (click)="clickHandler(sections.footerExtra, action.token)"
           >
-            <ion-icon slot="icon-only" [name]="action.description" color="dark" aria-hidden="true"></ion-icon>
+            <ion-icon
+              slot="icon-only"
+              [name]="action.description"
+              class="card-action-icon"
+              aria-hidden="true"
+            ></ion-icon>
           </ion-button>
-          <val-avatar
+          <vds-avatar
             style="margin-right: 4px; cursor: pointer"
             *ngIf="action.type === actionTypes.AVATAR"
             [props]="{ size: 'small', image: action.description, default: '' }"
             (onClick)="clickHandler(sections.footerExtra, action.token)"
-          ></val-avatar>
+          ></vds-avatar>
           <val-image
             *ngIf="action.type === actionTypes.IMAGE"
             [props]="action.image"
@@ -18504,18 +18521,17 @@ class CardComponent {
           <ion-button
             *ngIf="action.type === actionTypes.BUTTON"
             (click)="clickHandler(sections.footerExtra, action.token)"
-            color="dark"
           >
             {{ action.description }}
           </ion-button>
         </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-xl-wide: 1280px;--val-container-md-wide: 900px;--val-container-aside: 0px;--val-container-padding: 16px;--val-radius-xs: 10px;--val-radius-sm: 16px;--val-radius-md: 20px;--val-radius-lg: 28px;--val-radius-xl: 36px;--val-radius-full: 999px;--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: #737478;--ion-color-medium-rgb: 115,116,120;--ion-color-medium-contrast: #ffffff;--ion-color-medium-contrast-rgb: 255,255,255;--ion-color-medium-shade: #65666a;--ion-color-medium-tint: #818286;--ion-color-warning: #ffde38;--ion-color-warning-rgb: 255, 222, 56;--ion-color-warning-contrast: #000000;--ion-color-warning-contrast-rgb: 0, 0, 0;--ion-color-warning-shade: #e0c331;--ion-color-warning-tint: #ffe14c;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-dark)}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$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.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-xl-wide: 1280px;--val-container-md-wide: 900px;--val-container-aside: 0px;--val-container-padding: 16px;--val-radius-xs: 10px;--val-radius-sm: 16px;--val-radius-md: 20px;--val-radius-lg: 28px;--val-radius-xl: 36px;--val-radius-full: 999px;--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: #737478;--ion-color-medium-rgb: 115,116,120;--ion-color-medium-contrast: #ffffff;--ion-color-medium-contrast-rgb: 255,255,255;--ion-color-medium-shade: #65666a;--ion-color-medium-tint: #818286;--ion-color-warning: #ffde38;--ion-color-warning-rgb: 255, 222, 56;--ion-color-warning-contrast: #000000;--ion-color-warning-contrast-rgb: 0, 0, 0;--ion-color-warning-shade: #e0c331;--ion-color-warning-tint: #ffe14c;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-dark)}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}.card-action-icon{color:var(--vds-fg-subtle, var(--ion-color-dark, #0f172a))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.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, vds-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,
-            args: [{ selector: 'val-card', standalone: true, imports: [
+            args: [{ selector: 'val-card, vds-card', standalone: true, imports: [
                         CommonModule,
                         ButtonComponent,
                         AvatarComponent,
@@ -18607,14 +18623,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
               [attr.aria-label]="action.description"
               (click)="clickHandler(sections.headerLeft, action.token)"
             >
-              <ion-icon slot="icon-only" [name]="action.description" color="dark" aria-hidden="true"></ion-icon>
+              <ion-icon
+                slot="icon-only"
+                [name]="action.description"
+                class="card-action-icon"
+                aria-hidden="true"
+              ></ion-icon>
             </ion-button>
-            <val-avatar
+            <vds-avatar
               style="margin-right: 4px; cursor: pointer"
               *ngIf="action.type === actionTypes.AVATAR"
               [props]="{ size: 'small', image: action.description, default: '' }"
               (onClick)="clickHandler(sections.headerLeft, action.token)"
-            ></val-avatar>
+            ></vds-avatar>
             <val-image
               *ngIf="action.type === actionTypes.IMAGE"
               [props]="action.image"
@@ -18638,14 +18659,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
               [attr.aria-label]="action.description"
               (click)="clickHandler(sections.headerRight, action.token)"
             >
-              <ion-icon slot="icon-only" [name]="action.description" color="dark" aria-hidden="true"></ion-icon>
+              <ion-icon
+                slot="icon-only"
+                [name]="action.description"
+                class="card-action-icon"
+                aria-hidden="true"
+              ></ion-icon>
             </ion-button>
-            <val-avatar
+            <vds-avatar
               style="margin-right: 4px; cursor: pointer"
               *ngIf="action.type === actionTypes.AVATAR"
               [props]="{ size: 'small', image: action.description, default: '' }"
               (onClick)="clickHandler(sections.headerRight, action.token)"
-            ></val-avatar>
+            ></vds-avatar>
             <val-image
               *ngIf="action.type === actionTypes.IMAGE"
               [props]="action.image"
@@ -18703,14 +18729,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             [attr.aria-label]="action.description"
             (click)="clickHandler(sections.footerExtra, action.token)"
           >
-            <ion-icon slot="icon-only" [name]="action.description" color="dark" aria-hidden="true"></ion-icon>
+            <ion-icon
+              slot="icon-only"
+              [name]="action.description"
+              class="card-action-icon"
+              aria-hidden="true"
+            ></ion-icon>
           </ion-button>
-          <val-avatar
+          <vds-avatar
             style="margin-right: 4px; cursor: pointer"
             *ngIf="action.type === actionTypes.AVATAR"
             [props]="{ size: 'small', image: action.description, default: '' }"
             (onClick)="clickHandler(sections.footerExtra, action.token)"
-          ></val-avatar>
+          ></vds-avatar>
           <val-image
             *ngIf="action.type === actionTypes.IMAGE"
             [props]="action.image"
@@ -18719,14 +18750,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           <ion-button
             *ngIf="action.type === actionTypes.BUTTON"
             (click)="clickHandler(sections.footerExtra, action.token)"
-            color="dark"
           >
             {{ action.description }}
           </ion-button>
         </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-xl-wide: 1280px;--val-container-md-wide: 900px;--val-container-aside: 0px;--val-container-padding: 16px;--val-radius-xs: 10px;--val-radius-sm: 16px;--val-radius-md: 20px;--val-radius-lg: 28px;--val-radius-xl: 36px;--val-radius-full: 999px;--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: #737478;--ion-color-medium-rgb: 115,116,120;--ion-color-medium-contrast: #ffffff;--ion-color-medium-contrast-rgb: 255,255,255;--ion-color-medium-shade: #65666a;--ion-color-medium-tint: #818286;--ion-color-warning: #ffde38;--ion-color-warning-rgb: 255, 222, 56;--ion-color-warning-contrast: #000000;--ion-color-warning-contrast-rgb: 0, 0, 0;--ion-color-warning-shade: #e0c331;--ion-color-warning-tint: #ffe14c;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-dark)}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"] }]
+  `, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-xl-wide: 1280px;--val-container-md-wide: 900px;--val-container-aside: 0px;--val-container-padding: 16px;--val-radius-xs: 10px;--val-radius-sm: 16px;--val-radius-md: 20px;--val-radius-lg: 28px;--val-radius-xl: 36px;--val-radius-full: 999px;--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: #737478;--ion-color-medium-rgb: 115,116,120;--ion-color-medium-contrast: #ffffff;--ion-color-medium-contrast-rgb: 255,255,255;--ion-color-medium-shade: #65666a;--ion-color-medium-tint: #818286;--ion-color-warning: #ffde38;--ion-color-warning-rgb: 255, 222, 56;--ion-color-warning-contrast: #000000;--ion-color-warning-contrast-rgb: 0, 0, 0;--ion-color-warning-shade: #e0c331;--ion-color-warning-tint: #ffe14c;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-dark)}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}.card-action-icon{color:var(--vds-fg-subtle, var(--ion-color-dark, #0f172a))}\n"] }]
         }], propDecorators: { preset: [{
                 type: Input
             }], props: [{
@@ -21875,7 +21905,7 @@ class ProgressStatusComponent {
         </div>
       </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-xl-wide: 1280px;--val-container-md-wide: 900px;--val-container-aside: 0px;--val-container-padding: 16px;--val-radius-xs: 10px;--val-radius-sm: 16px;--val-radius-md: 20px;--val-radius-lg: 28px;--val-radius-xl: 36px;--val-radius-full: 999px;--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: #737478;--ion-color-medium-rgb: 115,116,120;--ion-color-medium-contrast: #ffffff;--ion-color-medium-contrast-rgb: 255,255,255;--ion-color-medium-shade: #65666a;--ion-color-medium-tint: #818286;--ion-color-warning: #ffde38;--ion-color-warning-rgb: 255, 222, 56;--ion-color-warning-contrast: #000000;--ion-color-warning-contrast-rgb: 0, 0, 0;--ion-color-warning-shade: #e0c331;--ion-color-warning-tint: #ffe14c;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-dark)}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)}.status-container{min-height:6.25rem;margin:1rem .5rem}.progress-bar-container{max-width:60%;margin:0 auto}.title-container{margin-bottom:.5rem}.subtitle-container{width:100%;display:flex}.subtitle{padding:1rem;margin:0 auto;height:1rem}.blink{animation:blink 1s infinite alternate ease-in}@keyframes blink{0%{opacity:0;margin-top:6px}to{opacity:1;margin-top:0}}\n"], dependencies: [{ kind: "component", type: TitleBlockComponent, selector: "val-title-block", inputs: ["props"] }, { kind: "component", type: ProgressBarComponent, selector: "val-progress-bar", inputs: ["preset", "props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }] }); }
+  `, 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-xl-wide: 1280px;--val-container-md-wide: 900px;--val-container-aside: 0px;--val-container-padding: 16px;--val-radius-xs: 10px;--val-radius-sm: 16px;--val-radius-md: 20px;--val-radius-lg: 28px;--val-radius-xl: 36px;--val-radius-full: 999px;--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: #737478;--ion-color-medium-rgb: 115,116,120;--ion-color-medium-contrast: #ffffff;--ion-color-medium-contrast-rgb: 255,255,255;--ion-color-medium-shade: #65666a;--ion-color-medium-tint: #818286;--ion-color-warning: #ffde38;--ion-color-warning-rgb: 255, 222, 56;--ion-color-warning-contrast: #000000;--ion-color-warning-contrast-rgb: 0, 0, 0;--ion-color-warning-shade: #e0c331;--ion-color-warning-tint: #ffe14c;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-dark)}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)}.status-container{min-height:6.25rem;margin:1rem .5rem}.progress-bar-container{max-width:60%;margin:0 auto}.title-container{margin-bottom:.5rem}.subtitle-container{width:100%;display:flex}.subtitle{padding:1rem;margin:0 auto;height:1rem}.blink{animation:blink 1s infinite alternate ease-in}@keyframes blink{0%{opacity:0;margin-top:6px}to{opacity:1;margin-top:0}}\n"], dependencies: [{ kind: "component", type: TitleBlockComponent, selector: "val-title-block", inputs: ["props"] }, { kind: "component", type: ProgressBarComponent, selector: "val-progress-bar, vds-progress-bar", inputs: ["preset", "props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProgressStatusComponent, decorators: [{
             type: Component,
@@ -26189,21 +26219,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
 addIcons({ trendingUp, trendingDown, remove, analytics, people, cash, cart, eye, heart, star });
 /**
- * val-stats-card
+ * vds-stats-card
  *
  * A card component for displaying statistics and KPIs.
  * Supports presets for reusable configurations.
  *
  * @example With preset:
- * <val-stats-card preset="kpi" [props]="{ title: 'Users', value: 1000 }"></val-stats-card>
+ * <vds-stats-card preset="kpi" [props]="{ title: 'Users', value: 1000 }"></vds-stats-card>
  *
  * @example Basic usage
- * <val-stats-card [props]="{
+ * <vds-stats-card [props]="{
  *   title: 'Total Users',
  *   value: 12500,
  *   icon: 'people',
  *   color: 'primary'
- * }"></val-stats-card>
+ * }"></vds-stats-card>
  *
  * @input preset: string - Name of preset to apply
  * @input props: StatsCardMetadata - Configuration for the stats card
@@ -26234,7 +26264,15 @@ class StatsCardComponent {
     }
     getCardColor() {
         const color = this.resolvedProps.color || 'primary';
-        return `var(--ion-color-${color})`;
+        return `var(--vds-${color}, var(--ion-color-${color}, var(--vds-primary, #2563eb)))`;
+    }
+    getCardColorHover() {
+        const color = this.resolvedProps.color || 'primary';
+        return `var(--vds-${color}-hover, var(--vds-${color}, var(--ion-color-${color}, var(--vds-primary-hover, #1d4ed8))))`;
+    }
+    getCardColorContrast() {
+        const color = this.resolvedProps.color || 'primary';
+        return `var(--vds-${color}-fg, var(--vds-${color}-contrast, var(--ion-color-${color}-contrast, #ffffff)))`;
     }
     getBackgroundClass() {
         const bg = this.resolvedProps.background || 'light';
@@ -26258,11 +26296,13 @@ class StatsCardComponent {
         return 'remove';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StatsCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: StatsCardComponent, isStandalone: true, selector: "val-stats-card", inputs: { preset: "preset", props: "props" }, outputs: { onClick: "onClick" }, usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: StatsCardComponent, isStandalone: true, selector: "val-stats-card, vds-stats-card", inputs: { preset: "preset", props: "props" }, outputs: { onClick: "onClick" }, usesOnChanges: true, ngImport: i0, template: `
     <ion-card
       class="stats-card"
       [class]="getBackgroundClass()"
       [style.--card-color]="getCardColor()"
+      [style.--card-color-hover]="getCardColorHover()"
+      [style.--card-color-contrast]="getCardColorContrast()"
       [style.min-height.px]="resolvedProps.minHeight"
       (click)="onClick.emit()"
     >
@@ -26318,15 +26358,17 @@ class StatsCardComponent {
         }
       </ion-card-content>
     </ion-card>
-  `, isInline: true, styles: [":host{display:block}.stats-card{margin:0;border-radius:12px;cursor:pointer;transition:transform .2s,box-shadow .2s}.stats-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0000001f}.stats-card.background-light{--background: var(--ion-color-light)}.stats-card.background-light .stats-title,.stats-card.background-light .stats-footer{color:var(--ion-color-dark)}.stats-card.background-light .stats-value{color:var(--ion-text-color)}.stats-card.background-light .stats-icon{color:var(--card-color);opacity:.8}.stats-card.background-solid{--background: var(--card-color)}.stats-card.background-solid .stats-title,.stats-card.background-solid .stats-footer,.stats-card.background-solid .stats-value,.stats-card.background-solid .stats-icon{color:#fff}.stats-card.background-solid .stats-title,.stats-card.background-solid .stats-footer{opacity:.9}.stats-card.background-gradient{--background: linear-gradient(135deg, var(--card-color), var(--card-color-shade, var(--card-color)))}.stats-card.background-gradient .stats-title,.stats-card.background-gradient .stats-footer,.stats-card.background-gradient .stats-value,.stats-card.background-gradient .stats-icon{color:#fff}.stats-card.background-gradient .stats-title,.stats-card.background-gradient .stats-footer{opacity:.9}ion-card-content{padding:16px}.stats-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}.stats-title{font-size:.8125rem;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.stats-icon{font-size:1.5rem}.stats-value{font-size:1.75rem;font-weight:700;line-height:1.2;margin-bottom:8px}.stats-value .prefix,.stats-value .suffix{font-size:1.125rem;font-weight:500;opacity:.8}.stats-value .prefix{margin-right:2px}.stats-value .suffix{margin-left:4px}.stats-trend{display:inline-flex;align-items:center;gap:4px;font-size:.8125rem;font-weight:500;padding:4px 8px;border-radius:12px;margin-bottom:8px}.stats-trend ion-icon{font-size:1rem}.stats-trend.trend-up{background-color:rgba(var(--ion-color-success-rgb),.15);color:var(--ion-color-success)}.stats-trend.trend-down{background-color:rgba(var(--ion-color-danger-rgb),.15);color:var(--ion-color-danger)}.stats-trend.trend-neutral{background-color:rgba(var(--ion-color-medium-rgb),.15);color:var(--ion-color-dark)}.stats-trend .trend-label{font-weight:400;opacity:.8;margin-left:4px}.stats-footer{font-size:.75rem;margin-top:4px}.stats-description{margin-top:8px;font-size:.875rem;line-height:1.4;color:var(--ion-text-color);opacity:.8}.stats-logo{margin-top:16px;padding-top:12px;border-top:1px solid rgba(var(--ion-text-color-rgb),.1)}.stats-logo img{display:block;object-fit:contain;filter:grayscale(100%);opacity:.7;transition:filter .2s,opacity .2s}.stats-logo:hover img{filter:grayscale(0%);opacity:1}.background-solid .stats-description,.background-gradient .stats-description{color:#fff;opacity:.9}.background-solid .stats-logo,.background-gradient .stats-logo{border-top-color:#fff3}.background-solid .stats-logo img,.background-gradient .stats-logo img{filter:grayscale(100%) brightness(10)}.background-solid .stats-logo:hover img,.background-gradient .stats-logo:hover img{filter:brightness(10)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }] }); }
+  `, isInline: true, styles: [":host{display:block}.stats-card{margin:0;border:1px solid var(--vds-stats-card-border-color, var(--vds-border-subtle, rgba(148, 163, 184, .24)));border-radius:var(--vds-stats-card-radius, 12px);cursor:pointer;transition:transform .2s,box-shadow .2s}.stats-card:hover{transform:translateY(-2px);box-shadow:var(--vds-stats-card-hover-shadow, var(--vds-shadow-md, 0 8px 24px rgba(15, 23, 42, .12)))}.stats-card.background-light{--background: var( --vds-stats-card-bg, var(--vds-bg-surface, var(--vds-light, var(--ion-color-light, #f8fafc))) )}.stats-card.background-light .stats-title,.stats-card.background-light .stats-footer{color:var(--vds-fg-subtle, var(--vds-neutral-text, var(--ion-color-dark, #0f172a)))}.stats-card.background-light .stats-value{color:var(--vds-fg-base, var(--ion-text-color, #0f172a))}.stats-card.background-light .stats-icon{color:var(--card-color);opacity:.8}.stats-card.background-solid{--background: var(--card-color)}.stats-card.background-solid .stats-title,.stats-card.background-solid .stats-footer,.stats-card.background-solid .stats-value,.stats-card.background-solid .stats-icon{color:var(--card-color-contrast)}.stats-card.background-solid .stats-title,.stats-card.background-solid .stats-footer{opacity:.9}.stats-card.background-gradient{--background: linear-gradient( 135deg, var(--card-color), var(--card-color-hover, var(--card-color)) )}.stats-card.background-gradient .stats-title,.stats-card.background-gradient .stats-footer,.stats-card.background-gradient .stats-value,.stats-card.background-gradient .stats-icon{color:var(--card-color-contrast)}.stats-card.background-gradient .stats-title,.stats-card.background-gradient .stats-footer{opacity:.9}ion-card-content{padding:16px}.stats-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}.stats-title{font-size:.8125rem;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.stats-icon{font-size:1.5rem}.stats-value{font-size:1.75rem;font-weight:700;line-height:1.2;margin-bottom:8px}.stats-value .prefix,.stats-value .suffix{font-size:1.125rem;font-weight:500;opacity:.8}.stats-value .prefix{margin-right:2px}.stats-value .suffix{margin-left:4px}.stats-trend{display:inline-flex;align-items:center;gap:4px;font-size:.8125rem;font-weight:500;padding:4px 8px;border-radius:12px;margin-bottom:8px}.stats-trend ion-icon{font-size:1rem}.stats-trend.trend-up{background-color:var(--vds-success-tint, rgba(var(--ion-color-success-rgb), .15));color:var(--vds-success-tint-contrast, var(--vds-success-text, var(--ion-color-success, #16a34a)))}.stats-trend.trend-down{background-color:var(--vds-danger-tint, rgba(var(--ion-color-danger-rgb), .15));color:var(--vds-danger-tint-contrast, var(--vds-danger-text, var(--ion-color-danger, #dc2626)))}.stats-trend.trend-neutral{background-color:var(--vds-neutral-tint, rgba(var(--ion-color-medium-rgb), .15));color:var(--vds-neutral-tint-contrast, var(--vds-neutral-text, var(--ion-color-dark, #0f172a)))}.stats-trend .trend-label{font-weight:400;opacity:.8;margin-left:4px}.stats-footer{font-size:.75rem;margin-top:4px}.stats-description{margin-top:8px;font-size:.875rem;line-height:1.4;color:var(--vds-fg-base, var(--ion-text-color, #0f172a));opacity:.8}.stats-logo{margin-top:16px;padding-top:12px;border-top:1px solid var(--vds-border-subtle, rgba(var(--ion-text-color-rgb), .1))}.stats-logo img{display:block;object-fit:contain;filter:grayscale(100%);opacity:.7;transition:filter .2s,opacity .2s}.stats-logo:hover img{filter:grayscale(0%);opacity:1}.background-solid .stats-description,.background-gradient .stats-description{color:var(--card-color-contrast);opacity:.9}.background-solid .stats-logo,.background-gradient .stats-logo{border-top-color:color-mix(in srgb,var(--card-color-contrast) 22%,transparent)}.background-solid .stats-logo img,.background-gradient .stats-logo img{filter:grayscale(100%) brightness(10)}.background-solid .stats-logo:hover img,.background-gradient .stats-logo:hover img{filter:brightness(10)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StatsCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-stats-card', standalone: true, imports: [CommonModule, IonCard, IonCardContent, IonIcon, IonSkeletonText], template: `
+            args: [{ selector: 'val-stats-card, vds-stats-card', standalone: true, imports: [CommonModule, IonCard, IonCardContent, IonIcon, IonSkeletonText], template: `
     <ion-card
       class="stats-card"
       [class]="getBackgroundClass()"
       [style.--card-color]="getCardColor()"
+      [style.--card-color-hover]="getCardColorHover()"
+      [style.--card-color-contrast]="getCardColorContrast()"
       [style.min-height.px]="resolvedProps.minHeight"
       (click)="onClick.emit()"
     >
@@ -26382,7 +26424,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         }
       </ion-card-content>
     </ion-card>
-  `, styles: [":host{display:block}.stats-card{margin:0;border-radius:12px;cursor:pointer;transition:transform .2s,box-shadow .2s}.stats-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0000001f}.stats-card.background-light{--background: var(--ion-color-light)}.stats-card.background-light .stats-title,.stats-card.background-light .stats-footer{color:var(--ion-color-dark)}.stats-card.background-light .stats-value{color:var(--ion-text-color)}.stats-card.background-light .stats-icon{color:var(--card-color);opacity:.8}.stats-card.background-solid{--background: var(--card-color)}.stats-card.background-solid .stats-title,.stats-card.background-solid .stats-footer,.stats-card.background-solid .stats-value,.stats-card.background-solid .stats-icon{color:#fff}.stats-card.background-solid .stats-title,.stats-card.background-solid .stats-footer{opacity:.9}.stats-card.background-gradient{--background: linear-gradient(135deg, var(--card-color), var(--card-color-shade, var(--card-color)))}.stats-card.background-gradient .stats-title,.stats-card.background-gradient .stats-footer,.stats-card.background-gradient .stats-value,.stats-card.background-gradient .stats-icon{color:#fff}.stats-card.background-gradient .stats-title,.stats-card.background-gradient .stats-footer{opacity:.9}ion-card-content{padding:16px}.stats-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}.stats-title{font-size:.8125rem;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.stats-icon{font-size:1.5rem}.stats-value{font-size:1.75rem;font-weight:700;line-height:1.2;margin-bottom:8px}.stats-value .prefix,.stats-value .suffix{font-size:1.125rem;font-weight:500;opacity:.8}.stats-value .prefix{margin-right:2px}.stats-value .suffix{margin-left:4px}.stats-trend{display:inline-flex;align-items:center;gap:4px;font-size:.8125rem;font-weight:500;padding:4px 8px;border-radius:12px;margin-bottom:8px}.stats-trend ion-icon{font-size:1rem}.stats-trend.trend-up{background-color:rgba(var(--ion-color-success-rgb),.15);color:var(--ion-color-success)}.stats-trend.trend-down{background-color:rgba(var(--ion-color-danger-rgb),.15);color:var(--ion-color-danger)}.stats-trend.trend-neutral{background-color:rgba(var(--ion-color-medium-rgb),.15);color:var(--ion-color-dark)}.stats-trend .trend-label{font-weight:400;opacity:.8;margin-left:4px}.stats-footer{font-size:.75rem;margin-top:4px}.stats-description{margin-top:8px;font-size:.875rem;line-height:1.4;color:var(--ion-text-color);opacity:.8}.stats-logo{margin-top:16px;padding-top:12px;border-top:1px solid rgba(var(--ion-text-color-rgb),.1)}.stats-logo img{display:block;object-fit:contain;filter:grayscale(100%);opacity:.7;transition:filter .2s,opacity .2s}.stats-logo:hover img{filter:grayscale(0%);opacity:1}.background-solid .stats-description,.background-gradient .stats-description{color:#fff;opacity:.9}.background-solid .stats-logo,.background-gradient .stats-logo{border-top-color:#fff3}.background-solid .stats-logo img,.background-gradient .stats-logo img{filter:grayscale(100%) brightness(10)}.background-solid .stats-logo:hover img,.background-gradient .stats-logo:hover img{filter:brightness(10)}\n"] }]
+  `, styles: [":host{display:block}.stats-card{margin:0;border:1px solid var(--vds-stats-card-border-color, var(--vds-border-subtle, rgba(148, 163, 184, .24)));border-radius:var(--vds-stats-card-radius, 12px);cursor:pointer;transition:transform .2s,box-shadow .2s}.stats-card:hover{transform:translateY(-2px);box-shadow:var(--vds-stats-card-hover-shadow, var(--vds-shadow-md, 0 8px 24px rgba(15, 23, 42, .12)))}.stats-card.background-light{--background: var( --vds-stats-card-bg, var(--vds-bg-surface, var(--vds-light, var(--ion-color-light, #f8fafc))) )}.stats-card.background-light .stats-title,.stats-card.background-light .stats-footer{color:var(--vds-fg-subtle, var(--vds-neutral-text, var(--ion-color-dark, #0f172a)))}.stats-card.background-light .stats-value{color:var(--vds-fg-base, var(--ion-text-color, #0f172a))}.stats-card.background-light .stats-icon{color:var(--card-color);opacity:.8}.stats-card.background-solid{--background: var(--card-color)}.stats-card.background-solid .stats-title,.stats-card.background-solid .stats-footer,.stats-card.background-solid .stats-value,.stats-card.background-solid .stats-icon{color:var(--card-color-contrast)}.stats-card.background-solid .stats-title,.stats-card.background-solid .stats-footer{opacity:.9}.stats-card.background-gradient{--background: linear-gradient( 135deg, var(--card-color), var(--card-color-hover, var(--card-color)) )}.stats-card.background-gradient .stats-title,.stats-card.background-gradient .stats-footer,.stats-card.background-gradient .stats-value,.stats-card.background-gradient .stats-icon{color:var(--card-color-contrast)}.stats-card.background-gradient .stats-title,.stats-card.background-gradient .stats-footer{opacity:.9}ion-card-content{padding:16px}.stats-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}.stats-title{font-size:.8125rem;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.stats-icon{font-size:1.5rem}.stats-value{font-size:1.75rem;font-weight:700;line-height:1.2;margin-bottom:8px}.stats-value .prefix,.stats-value .suffix{font-size:1.125rem;font-weight:500;opacity:.8}.stats-value .prefix{margin-right:2px}.stats-value .suffix{margin-left:4px}.stats-trend{display:inline-flex;align-items:center;gap:4px;font-size:.8125rem;font-weight:500;padding:4px 8px;border-radius:12px;margin-bottom:8px}.stats-trend ion-icon{font-size:1rem}.stats-trend.trend-up{background-color:var(--vds-success-tint, rgba(var(--ion-color-success-rgb), .15));color:var(--vds-success-tint-contrast, var(--vds-success-text, var(--ion-color-success, #16a34a)))}.stats-trend.trend-down{background-color:var(--vds-danger-tint, rgba(var(--ion-color-danger-rgb), .15));color:var(--vds-danger-tint-contrast, var(--vds-danger-text, var(--ion-color-danger, #dc2626)))}.stats-trend.trend-neutral{background-color:var(--vds-neutral-tint, rgba(var(--ion-color-medium-rgb), .15));color:var(--vds-neutral-tint-contrast, var(--vds-neutral-text, var(--ion-color-dark, #0f172a)))}.stats-trend .trend-label{font-weight:400;opacity:.8;margin-left:4px}.stats-footer{font-size:.75rem;margin-top:4px}.stats-description{margin-top:8px;font-size:.875rem;line-height:1.4;color:var(--vds-fg-base, var(--ion-text-color, #0f172a));opacity:.8}.stats-logo{margin-top:16px;padding-top:12px;border-top:1px solid var(--vds-border-subtle, rgba(var(--ion-text-color-rgb), .1))}.stats-logo img{display:block;object-fit:contain;filter:grayscale(100%);opacity:.7;transition:filter .2s,opacity .2s}.stats-logo:hover img{filter:grayscale(0%);opacity:1}.background-solid .stats-description,.background-gradient .stats-description{color:var(--card-color-contrast);opacity:.9}.background-solid .stats-logo,.background-gradient .stats-logo{border-top-color:color-mix(in srgb,var(--card-color-contrast) 22%,transparent)}.background-solid .stats-logo img,.background-gradient .stats-logo img{filter:grayscale(100%) brightness(10)}.background-solid .stats-logo:hover img,.background-gradient .stats-logo:hover img{filter:brightness(10)}\n"] }]
         }], propDecorators: { preset: [{
                 type: Input
             }], props: [{
@@ -26832,7 +26874,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-xl-wide: 1280px;--val-container-md-wide: 900px;--val-container-aside: 0px;--val-container-padding: 16px;--val-radius-xs: 10px;--val-radius-sm: 16px;--val-radius-md: 20px;--val-radius-lg: 28px;--val-radius-xl: 36px;--val-radius-full: 999px;--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: #737478;--ion-color-medium-rgb: 115,116,120;--ion-color-medium-contrast: #ffffff;--ion-color-medium-contrast-rgb: 255,255,255;--ion-color-medium-shade: #65666a;--ion-color-medium-tint: #818286;--ion-color-warning: #ffde38;--ion-color-warning-rgb: 255, 222, 56;--ion-color-warning-contrast: #000000;--ion-color-warning-contrast-rgb: 0, 0, 0;--ion-color-warning-shade: #e0c331;--ion-color-warning-tint: #ffe14c;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-dark)}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: 20px;--max-indent: 64px;--comment-surface: rgba(var(--ion-color-medium-rgb), .06);--comment-surface-highlighted: rgba(var(--ion-color-primary-rgb), .1);background:var(--comment-surface);border-radius:var(--val-radius-sm, 16px);padding:14px 16px}.comment.highlighted{background-color:var(--comment-surface-highlighted)}.comment.pinned{box-shadow:inset 3px 0 0 var(--ion-color-primary)}.comment.collapsed{opacity:.7}.comment--social{--comment-surface: var(--ion-card-background, var(--ion-background-color, #fff));padding:18px;border-radius:24px;box-shadow:0 1px rgba(var(--ion-color-medium-rgb),.08)}.comment--social .comment-main{gap:14px;align-items:flex-start}.comment--social .comment-avatar{align-self:flex-start}.comment--social .comment-avatar val-avatar{--size: 48px}.comment--social .comment-avatar .avatar-placeholder{width:48px;height:48px;font-size:1rem}.comment--social .comment-header{gap:8px;margin-bottom:10px}.comment--social .author-name{font-size:1rem;font-weight:700}.comment--social .author-username,.comment--social .timestamp{font-size:.875rem}.comment--social .more-button{width:32px;height:32px}.comment--social .comment-content{font-size:1rem;line-height:1.45;font-weight:600;margin-bottom:12px}.comment--social .comment-footer{margin-top:12px}.comment--social .reaction-button{min-width:44px;height:34px;border-color:rgba(var(--ion-color-medium-rgb),.3);background:var(--ion-card-background, var(--ion-background-color, #fff))}.comment--social .comment-action-button{font-size:1rem;color:var(--ion-color-dark)}.pinned-indicator{display:flex;align-items:center;gap:4px;font-size:.75rem;color:var(--ion-color-primary);margin-bottom:8px;padding-left:48px}.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-dark)}.comment-meta{display:flex;align-items:center;gap:6px;margin-left:auto}.timestamp{font-size:.75rem;color:var(--ion-color-dark)}.edited-label{font-size:.6875rem;color:var(--ion-color-dark);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-dark)}.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),.comment-content :global(.comment-hashtag){display:inline-block;background:rgba(var(--ion-color-primary-rgb),.14);color:var(--ion-color-primary);font-weight:600;padding:1px 8px;border-radius:var(--val-radius-full, 999px);cursor:pointer;transition:background-color .15s ease}.comment-content :global(.comment-mention):hover,.comment-content :global(.comment-hashtag):hover{background:rgba(var(--ion-color-primary-rgb),.22);text-decoration:none}.comment-attachments{display:flex;flex-direction:column;gap:10px}.comment-attachment-image,.comment-attachment-video{display:block;width:100%;max-height:360px;aspect-ratio:16/9;border-radius:14px;border:1px solid var(--val-border-color, rgba(0, 0, 0, .08));object-fit:cover;background:rgba(var(--ion-color-medium-rgb),.08)}.comment-attachment-file{display:inline-flex;align-items:center;gap:8px;width:fit-content;max-width:100%;padding:8px 12px;border-radius:var(--val-radius-full, 999px);border:1px solid rgba(var(--ion-color-medium-rgb),.24);color:var(--ion-color-dark);text-decoration:none;font-size:.875rem;font-weight:600}.comment-attachment-file span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.comment-attachment-file ion-icon{flex-shrink:0;font-size:1rem}.comment-footer{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}.comment-reactions{display:flex;flex-wrap:wrap;gap:8px}.reaction-button{display:flex;align-items:center;justify-content:center;gap:4px;width:32px;height:32px;padding:0;background:transparent;border:1px solid rgba(var(--ion-color-medium-rgb),.22);border-radius:var(--val-radius-full, 999px);cursor:pointer;font-size:.8125rem;color:var(--reaction-color, var(--ion-color-medium));transition:background-color .15s ease,border-color .15s ease}.reaction-button.has-count{width:auto;padding:0 10px}.reaction-button:hover{background-color:rgba(var(--ion-color-medium-rgb),.1)}.reaction-button.active{background-color:rgba(var(--ion-color-primary-rgb),.12);border-color:rgba(var(--ion-color-primary-rgb),.32)}.reaction-button.active ion-icon{transform:scale(1.1)}.reaction-button ion-icon{font-size:1.0625rem;transition:transform .2s ease}.reaction-button .reaction-count{font-weight:600}.comment-actions{display:flex;flex-wrap:wrap;gap:4px}.comment-action-button{display:inline-flex;align-items:center;gap:4px;background:none;border:none;padding:6px 8px;border-radius:8px;cursor:pointer;font-size:.8125rem;font-weight:600;color:var(--ion-color-medium);transition:background-color .15s ease}.comment-action-button:hover{background-color:rgba(var(--ion-color-medium-rgb),.1)}.comment-action-button:disabled{opacity:.5;cursor:default}.comment-action-button ion-icon{font-size:1rem}.comment-action-button.action-color-primary{color:var(--ion-color-primary)}.comment-action-button.action-color-danger{color:var(--ion-color-danger)}.comment-action-button.action-color-dark{color:var(--ion-color-dark)}.expand-button,.collapse-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{background-color:rgba(var(--ion-color-primary-rgb),.1)}.expand-button ion-icon,.collapse-button ion-icon{font-size:1rem}.load-more-button,.view-replies-button{display:inline-flex;align-items:center;gap:4px;background:none;border:1px solid rgba(var(--ion-color-medium-rgb),.24);padding:5px 10px;cursor:pointer;font-size:.8125rem;font-weight:600;color:var(--ion-text-color);border-radius:var(--val-radius-full, 999px);transition:background-color .15s ease}.load-more-button:hover,.view-replies-button:hover{background-color:rgba(var(--ion-color-medium-rgb),.1)}.load-more-button ion-icon,.view-replies-button ion-icon{font-size:.9375rem}.expand-button{margin-top:4px;color:var(--ion-color-dark)}.comment-children{margin-top:10px;padding-left:min(var(--indent-size),var(--max-indent));display:flex;flex-direction:column;gap:10px}.comment-children val-comment{display:block}.load-more-button,.view-replies-button{margin-top:4px;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,:host-context(.ion-palette-dark) .comment,:host-context(html.ion-palette-dark) .comment,:host-context(body.dark) .comment,:host-context([data-theme=dark]) .comment{--comment-surface: rgba(255, 255, 255, .06);--comment-surface-highlighted: rgba(var(--ion-color-primary-rgb), .16)}:host-context(.dark) .comment--social,:host-context(.ion-palette-dark) .comment--social,:host-context(html.ion-palette-dark) .comment--social,:host-context(body.dark) .comment--social,:host-context([data-theme=dark]) .comment--social{--comment-surface: var(--ion-card-background, rgba(255, 255, 255, .08))}: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-xl-wide: 1280px;--val-container-md-wide: 900px;--val-container-aside: 0px;--val-container-padding: 16px;--val-radius-xs: 10px;--val-radius-sm: 16px;--val-radius-md: 20px;--val-radius-lg: 28px;--val-radius-xl: 36px;--val-radius-full: 999px;--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: #737478;--ion-color-medium-rgb: 115,116,120;--ion-color-medium-contrast: #ffffff;--ion-color-medium-contrast-rgb: 255,255,255;--ion-color-medium-shade: #65666a;--ion-color-medium-tint: #818286;--ion-color-warning: #ffde38;--ion-color-warning-rgb: 255, 222, 56;--ion-color-warning-contrast: #000000;--ion-color-warning-contrast-rgb: 0, 0, 0;--ion-color-warning-shade: #e0c331;--ion-color-warning-tint: #ffe14c;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-dark)}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: 20px;--max-indent: 64px;--comment-surface: rgba(var(--ion-color-medium-rgb), .06);--comment-surface-highlighted: rgba(var(--ion-color-primary-rgb), .1);background:var(--comment-surface);border-radius:var(--val-radius-sm, 16px);padding:14px 16px}.comment.highlighted{background-color:var(--comment-surface-highlighted)}.comment.pinned{box-shadow:inset 3px 0 0 var(--ion-color-primary)}.comment.collapsed{opacity:.7}.comment--social{--comment-surface: var(--ion-card-background, var(--ion-background-color, #fff));padding:18px;border-radius:24px;box-shadow:0 1px rgba(var(--ion-color-medium-rgb),.08)}.comment--social .comment-main{gap:14px;align-items:flex-start}.comment--social .comment-avatar{align-self:flex-start}.comment--social .comment-avatar val-avatar{--size: 48px}.comment--social .comment-avatar .avatar-placeholder{width:48px;height:48px;font-size:1rem}.comment--social .comment-header{gap:8px;margin-bottom:10px}.comment--social .author-name{font-size:1rem;font-weight:700}.comment--social .author-username,.comment--social .timestamp{font-size:.875rem}.comment--social .more-button{width:32px;height:32px}.comment--social .comment-content{font-size:1rem;line-height:1.45;font-weight:600;margin-bottom:12px}.comment--social .comment-footer{margin-top:12px}.comment--social .reaction-button{min-width:44px;height:34px;border-color:rgba(var(--ion-color-medium-rgb),.3);background:var(--ion-card-background, var(--ion-background-color, #fff))}.comment--social .comment-action-button{font-size:1rem;color:var(--ion-color-dark)}.pinned-indicator{display:flex;align-items:center;gap:4px;font-size:.75rem;color:var(--ion-color-primary);margin-bottom:8px;padding-left:48px}.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-dark)}.comment-meta{display:flex;align-items:center;gap:6px;margin-left:auto}.timestamp{font-size:.75rem;color:var(--ion-color-dark)}.edited-label{font-size:.6875rem;color:var(--ion-color-dark);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-dark)}.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),.comment-content :global(.comment-hashtag){display:inline-block;background:rgba(var(--ion-color-primary-rgb),.14);color:var(--ion-color-primary);font-weight:600;padding:1px 8px;border-radius:var(--val-radius-full, 999px);cursor:pointer;transition:background-color .15s ease}.comment-content :global(.comment-mention):hover,.comment-content :global(.comment-hashtag):hover{background:rgba(var(--ion-color-primary-rgb),.22);text-decoration:none}.comment-attachments{display:flex;flex-direction:column;gap:10px}.comment-attachment-image,.comment-attachment-video{display:block;width:100%;max-height:360px;aspect-ratio:16/9;border-radius:14px;border:1px solid var(--val-border-color, rgba(0, 0, 0, .08));object-fit:cover;background:rgba(var(--ion-color-medium-rgb),.08)}.comment-attachment-file{display:inline-flex;align-items:center;gap:8px;width:fit-content;max-width:100%;padding:8px 12px;border-radius:var(--val-radius-full, 999px);border:1px solid rgba(var(--ion-color-medium-rgb),.24);color:var(--ion-color-dark);text-decoration:none;font-size:.875rem;font-weight:600}.comment-attachment-file span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.comment-attachment-file ion-icon{flex-shrink:0;font-size:1rem}.comment-footer{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}.comment-reactions{display:flex;flex-wrap:wrap;gap:8px}.reaction-button{display:flex;align-items:center;justify-content:center;gap:4px;width:32px;height:32px;padding:0;background:transparent;border:1px solid rgba(var(--ion-color-medium-rgb),.22);border-radius:var(--val-radius-full, 999px);cursor:pointer;font-size:.8125rem;color:var(--reaction-color, var(--ion-color-medium));transition:background-color .15s ease,border-color .15s ease}.reaction-button.has-count{width:auto;padding:0 10px}.reaction-button:hover{background-color:rgba(var(--ion-color-medium-rgb),.1)}.reaction-button.active{background-color:rgba(var(--ion-color-primary-rgb),.12);border-color:rgba(var(--ion-color-primary-rgb),.32)}.reaction-button.active ion-icon{transform:scale(1.1)}.reaction-button ion-icon{font-size:1.0625rem;transition:transform .2s ease}.reaction-button .reaction-count{font-weight:600}.comment-actions{display:flex;flex-wrap:wrap;gap:4px}.comment-action-button{display:inline-flex;align-items:center;gap:4px;background:none;border:none;padding:6px 8px;border-radius:8px;cursor:pointer;font-size:.8125rem;font-weight:600;color:var(--ion-color-medium);transition:background-color .15s ease}.comment-action-button:hover{background-color:rgba(var(--ion-color-medium-rgb),.1)}.comment-action-button:disabled{opacity:.5;cursor:default}.comment-action-button ion-icon{font-size:1rem}.comment-action-button.action-color-primary{color:var(--ion-color-primary)}.comment-action-button.action-color-danger{color:var(--ion-color-danger)}.comment-action-button.action-color-dark{color:var(--ion-color-dark)}.expand-button,.collapse-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{background-color:rgba(var(--ion-color-primary-rgb),.1)}.expand-button ion-icon,.collapse-button ion-icon{font-size:1rem}.load-more-button,.view-replies-button{display:inline-flex;align-items:center;gap:4px;background:none;border:1px solid rgba(var(--ion-color-medium-rgb),.24);padding:5px 10px;cursor:pointer;font-size:.8125rem;font-weight:600;color:var(--ion-text-color);border-radius:var(--val-radius-full, 999px);transition:background-color .15s ease}.load-more-button:hover,.view-replies-button:hover{background-color:rgba(var(--ion-color-medium-rgb),.1)}.load-more-button ion-icon,.view-replies-button ion-icon{font-size:.9375rem}.expand-button{margin-top:4px;color:var(--ion-color-dark)}.comment-children{margin-top:10px;padding-left:min(var(--indent-size),var(--max-indent));display:flex;flex-direction:column;gap:10px}.comment-children val-comment{display:block}.load-more-button,.view-replies-button{margin-top:4px;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,:host-context(.ion-palette-dark) .comment,:host-context(html.ion-palette-dark) .comment,:host-context(body.dark) .comment,:host-context([data-theme=dark]) .comment{--comment-surface: rgba(255, 255, 255, .06);--comment-surface-highlighted: rgba(var(--ion-color-primary-rgb), .16)}:host-context(.dark) .comment--social,:host-context(.ion-palette-dark) .comment--social,:host-context(html.ion-palette-dark) .comment--social,:host-context(body.dark) .comment--social,:host-context([data-theme=dark]) .comment--social{--comment-surface: var(--ion-card-background, rgba(255, 255, 255, .08))}: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, vds-avatar", inputs: ["preset", "props"], outputs: ["onClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CommentComponent, decorators: [{
             type: Component,
@@ -33579,14 +33621,14 @@ const ACTION_CARD_DEFAULTS = {
 
 addIcons({ chevronForwardOutline });
 /**
- * val-action-card
+ * vds-action-card
  *
  * A clickable card component with icon, title, description, and optional badge.
  * Supports multiple icon formats: Ionicons, SVG paths, and image URLs.
  *
  * @example Basic usage with Ionicon
  * ```html
- * <val-action-card
+ * <vds-action-card
  *   [props]="{
  *     icon: { ionicon: 'settings-outline' },
  *     title: 'Settings',
@@ -33598,7 +33640,7 @@ addIcons({ chevronForwardOutline });
  *
  * @example With routerLink navigation
  * ```html
- * <val-action-card
+ * <vds-action-card
  *   [props]="{
  *     icon: { ionicon: 'person-outline', color: 'primary' },
  *     title: 'Profile',
@@ -33611,7 +33653,7 @@ addIcons({ chevronForwardOutline });
  *
  * @example With custom SVG icon
  * ```html
- * <val-action-card
+ * <vds-action-card
  *   [props]="{
  *     icon: { svgPath: 'M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5' },
  *     title: 'Custom Feature',
@@ -33627,13 +33669,60 @@ class ActionCardComponent {
         this.navigation = inject(NavigationService);
         /** Component configuration */
         this.props = input({});
+        this.title = input();
+        this.titleKey = input();
+        this.description = input();
+        this.descriptionKey = input();
+        this.i18nNamespace = input();
+        this.icon = input();
+        this.size = input();
+        this.variant = input();
+        this.bordered = input();
+        this.borderColor = input();
+        this.backgroundColor = input();
+        this.shadowed = input();
+        this.disabled = input();
+        this.routerLink = input();
+        this.queryParams = input();
+        this.href = input();
+        this.badge = input();
+        this.showChevron = input();
+        this.token = input();
         /** Event emitted when card is clicked */
         this.onClick = new EventEmitter();
         /** Merged configuration with defaults */
-        this.config = computed(() => ({
-            ...ACTION_CARD_DEFAULTS,
-            ...this.props(),
-        }));
+        this.config = computed(() => {
+            const directProps = {};
+            this.assignIfDefined(directProps, 'title', this.title());
+            this.assignIfDefined(directProps, 'titleKey', this.titleKey());
+            this.assignIfDefined(directProps, 'description', this.description());
+            this.assignIfDefined(directProps, 'descriptionKey', this.descriptionKey());
+            this.assignIfDefined(directProps, 'i18nNamespace', this.i18nNamespace());
+            this.assignIfDefined(directProps, 'icon', this.icon());
+            this.assignIfDefined(directProps, 'size', this.size());
+            this.assignIfDefined(directProps, 'variant', this.variant());
+            this.assignIfDefined(directProps, 'bordered', this.bordered());
+            this.assignIfDefined(directProps, 'borderColor', this.borderColor());
+            this.assignIfDefined(directProps, 'backgroundColor', this.backgroundColor());
+            this.assignIfDefined(directProps, 'shadowed', this.shadowed());
+            this.assignIfDefined(directProps, 'disabled', this.disabled());
+            this.assignIfDefined(directProps, 'routerLink', this.routerLink());
+            this.assignIfDefined(directProps, 'queryParams', this.queryParams());
+            this.assignIfDefined(directProps, 'href', this.href());
+            this.assignIfDefined(directProps, 'badge', this.badge());
+            this.assignIfDefined(directProps, 'showChevron', this.showChevron());
+            this.assignIfDefined(directProps, 'token', this.token());
+            return {
+                ...ACTION_CARD_DEFAULTS,
+                ...this.props(),
+                ...directProps,
+            };
+        });
+    }
+    assignIfDefined(target, key, value) {
+        if (value !== undefined) {
+            target[key] = value;
+        }
     }
     /** Get title with i18n support */
     getTitle() {
@@ -33653,30 +33742,37 @@ class ActionCardComponent {
         }
         return cfg.description || '';
     }
-    /** Resolve color to CSS value (named Ionic token → CSS var, else passthrough) */
-    resolveColor(color) {
-        return resolveIonicColor(color) ?? null;
+    /** Resolve a public role to VDS first, then keep Ionic as the compatibility fallback. */
+    resolveRoleColor(color, part) {
+        if (!color)
+            return null;
+        if (!isIonicColor(color))
+            return color;
+        const suffix = part && part !== 'base' ? `-${part}` : '';
+        const ionicSuffix = part === 'fg' ? '-contrast' : '';
+        return `var(--vds-${color}${suffix}, var(--ion-color-${color}${ionicSuffix}))`;
     }
     getBackgroundColor() {
-        return this.resolveColor(this.config().backgroundColor);
+        return this.resolveRoleColor(this.config().backgroundColor, 'tint');
     }
     getBorderColor() {
-        return this.resolveColor(this.config().borderColor) || 'var(--ion-color-light-shade)';
+        return (this.resolveRoleColor(this.config().borderColor, 'border') ||
+            'var(--vds-border-subtle, var(--ion-color-light-shade, rgba(148, 163, 184, 0.24)))');
     }
     getIconColor() {
-        return this.resolveColor(this.config().icon?.color) || 'var(--ion-color-primary)';
+        return this.resolveRoleColor(this.config().icon?.color, 'text') || 'var(--vds-primary-text, #1d4ed8)';
     }
     getIconBackgroundColor() {
         const bg = this.config().icon?.backgroundColor;
         if (!bg)
-            return 'rgba(var(--ion-color-primary-rgb), 0.1)';
-        return this.resolveColor(bg);
+            return 'var(--vds-primary-tint, rgba(var(--ion-color-primary-rgb), 0.1))';
+        return this.resolveRoleColor(bg, 'tint');
     }
     getBadgeColor() {
-        return this.resolveColor(this.config().badge?.color) || 'white';
+        return this.resolveRoleColor(this.config().badge?.color, 'fg') || 'var(--vds-primary-fg, #ffffff)';
     }
     getBadgeBackgroundColor() {
-        return this.resolveColor(this.config().badge?.backgroundColor) || 'var(--ion-color-primary)';
+        return this.resolveRoleColor(this.config().badge?.backgroundColor) || 'var(--vds-primary, #2563eb)';
     }
     /** Handle card click */
     handleClick(event) {
@@ -33697,18 +33793,23 @@ class ActionCardComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ActionCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ActionCardComponent, isStandalone: true, selector: "val-action-card", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ActionCardComponent, isStandalone: true, selector: "val-action-card, vds-action-card", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, titleKey: { classPropertyName: "titleKey", publicName: "titleKey", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, descriptionKey: { classPropertyName: "descriptionKey", publicName: "descriptionKey", isSignal: true, isRequired: false, transformFunction: null }, i18nNamespace: { classPropertyName: "i18nNamespace", publicName: "i18nNamespace", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, shadowed: { classPropertyName: "shadowed", publicName: "shadowed", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, showChevron: { classPropertyName: "showChevron", publicName: "showChevron", isSignal: true, isRequired: false, transformFunction: null }, token: { classPropertyName: "token", publicName: "token", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
     <div
       class="action-card"
       [class.action-card--small]="config().size === 'small'"
       [class.action-card--medium]="config().size === 'medium'"
       [class.action-card--large]="config().size === 'large'"
+      [class.action-card--marker]="config().variant === 'marker'"
       [class.action-card--bordered]="config().bordered"
       [class.action-card--shadowed]="config().shadowed"
       [class.action-card--disabled]="config().disabled"
       [class.action-card--clickable]="!config().disabled"
       [style.--card-bg]="getBackgroundColor()"
       [style.--card-border-color]="getBorderColor()"
+      [style.--card-icon-color]="getIconColor()"
+      [style.--card-icon-bg]="getIconBackgroundColor()"
+      [style.--card-badge-color]="getBadgeColor()"
+      [style.--card-badge-bg]="getBadgeBackgroundColor()"
       [routerLink]="config().disabled ? null : config().routerLink"
       [queryParams]="config().queryParams ?? null"
       (click)="handleClick($event)"
@@ -33720,17 +33821,13 @@ class ActionCardComponent {
 
       <!-- Badge (top-right corner) -->
       @if (config().badge) {
-        <span
-          class="action-card__badge"
-          [style.color]="getBadgeColor()"
-          [style.background-color]="getBadgeBackgroundColor()"
-        >
+        <span class="action-card__badge">
           {{ config().badge!.text }}
         </span>
       }
 
       <!-- Icon Container -->
-      <div class="action-card__icon" [style.color]="getIconColor()" [style.background-color]="getIconBackgroundColor()">
+      <div class="action-card__icon">
         @if (config().icon?.ionicon) {
           <ion-icon [name]="config().icon!.ionicon!" aria-hidden="true"></ion-icon>
         } @else if (config().icon?.svgPath) {
@@ -33762,22 +33859,27 @@ class ActionCardComponent {
         <ion-icon name="chevron-forward-outline" class="action-card__chevron" aria-hidden="true"></ion-icon>
       }
     </div>
-  `, isInline: true, styles: [":host{display:flex;flex-direction:column}.action-card{position:relative;display:flex;align-items:center;flex:1;gap:1rem;padding:1rem;background:var(--card-bg, var(--ion-card-background, var(--ion-background-color)));border-radius:12px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease;text-decoration:none;overflow:hidden;--ripple-color: var(--ion-color-primary)}.action-card--small{padding:.75rem;gap:.75rem}.action-card--small .action-card__icon{width:36px;height:36px;font-size:1.125rem;border-radius:8px}.action-card--small .action-card__icon svg{width:18px;height:18px}.action-card--small .action-card__title{font-size:.9rem}.action-card--small .action-card__description{font-size:.8rem}.action-card--medium{padding:1rem;gap:1rem}.action-card--medium .action-card__icon{width:48px;height:48px;font-size:1.5rem;border-radius:10px}.action-card--medium .action-card__icon svg{width:24px;height:24px}.action-card--medium .action-card__title{font-size:1rem}.action-card--medium .action-card__description{font-size:.875rem}.action-card--large{padding:1.25rem;gap:1.25rem}.action-card--large .action-card__icon{width:56px;height:56px;font-size:1.75rem;border-radius:12px}.action-card--large .action-card__icon svg{width:28px;height:28px}.action-card--large .action-card__title{font-size:1.1rem}.action-card--large .action-card__description{font-size:.9rem}.action-card--bordered{border:1px solid var(--card-border-color, var(--ion-color-light-shade))}.action-card--shadowed{box-shadow:0 2px 8px #00000014}.action-card--clickable:hover{transform:translateY(-2px);box-shadow:0 4px 16px #0000001f}.action-card--clickable:focus-visible{outline:2px solid var(--ion-color-primary);outline-offset:2px}.action-card--clickable:active{transform:translateY(0)}.action-card--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.action-card__badge{position:absolute;top:8px;right:8px;padding:2px 8px;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;border-radius:10px;z-index:1}.action-card__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.action-card__icon ion-icon{font-size:inherit}.action-card__icon svg{display:block}.action-card__icon-image{width:100%;height:100%;object-fit:cover;border-radius:8px}.action-card__content{flex:1;min-width:0}.action-card__title{margin:0 0 .25rem;font-weight:600;color:var(--ion-text-color);line-height:1.3}.action-card__description{margin:0;color:var(--ion-color-dark);line-height:1.4}.action-card__chevron{flex-shrink:0;font-size:1.25rem;color:var(--ion-color-dark);transition:transform .2s ease}.action-card--clickable:hover .action-card__chevron{transform:translate(4px)}:host-context(.dark) .action-card--shadowed,:host-context(.ion-palette-dark) .action-card--shadowed,:host-context(html.ion-palette-dark) .action-card--shadowed,:host-context(body.dark) .action-card--shadowed,:host-context([data-theme=dark]) .action-card--shadowed{box-shadow:0 2px 8px #0000004d}:host-context(.dark) .action-card--clickable:hover,:host-context(.ion-palette-dark) .action-card--clickable:hover,:host-context(html.ion-palette-dark) .action-card--clickable:hover,:host-context(body.dark) .action-card--clickable:hover,:host-context([data-theme=dark]) .action-card--clickable:hover{box-shadow:0 4px 16px #0006}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }] }); }
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column}.action-card{position:relative;display:flex;align-items:center;flex:1;gap:1rem;padding:1rem;background:var(--card-bg, var(--vds-bg-surface, var(--ion-card-background, var(--ion-background-color))));border-radius:var(--vds-action-card-radius, var(--vds-radius-surface, 12px));cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease;text-decoration:none;overflow:hidden;--ripple-color: var(--vds-primary, var(--ion-color-primary, #2563eb))}.action-card--small{padding:.75rem;gap:.75rem}.action-card--small .action-card__icon{width:36px;height:36px;font-size:1.125rem;border-radius:8px}.action-card--small .action-card__icon svg{width:18px;height:18px}.action-card--small .action-card__title{font-size:.9rem}.action-card--small .action-card__description{font-size:.8rem}.action-card--medium{padding:1rem;gap:1rem}.action-card--medium .action-card__icon{width:48px;height:48px;font-size:1.5rem;border-radius:10px}.action-card--medium .action-card__icon svg{width:24px;height:24px}.action-card--medium .action-card__title{font-size:1rem}.action-card--medium .action-card__description{font-size:.875rem}.action-card--large{padding:1.25rem;gap:1.25rem}.action-card--large .action-card__icon{width:56px;height:56px;font-size:1.75rem;border-radius:12px}.action-card--large .action-card__icon svg{width:28px;height:28px}.action-card--large .action-card__title{font-size:1.1rem}.action-card--large .action-card__description{font-size:.9rem}.action-card--marker{align-items:flex-start;border:1px solid var(--card-border-color);box-shadow:none}.action-card--marker .action-card__icon{width:12px;height:12px;margin-top:.35rem;border-radius:var(--vds-radius-pill, 9999px);background-color:var(--card-icon-color, var(--vds-primary, #2563eb))}.action-card--marker .action-card__icon ion-icon,.action-card--marker .action-card__icon svg,.action-card--marker .action-card__icon img{display:none}.action-card--bordered{border:1px solid var(--card-border-color)}.action-card--shadowed{box-shadow:var(--vds-action-card-shadow, var(--vds-shadow-sm, 0 2px 8px rgba(15, 23, 42, .08)))}.action-card--clickable:hover{transform:translateY(-2px);box-shadow:var(--vds-action-card-hover-shadow, var(--vds-shadow-md, 0 4px 16px rgba(15, 23, 42, .12)))}.action-card--clickable:focus-visible{outline:var(--vds-focus-ring-width, 2px) solid var(--vds-focus-ring-color, var(--vds-primary, #2563eb));outline-offset:2px}.action-card--clickable:active{transform:translateY(0)}.action-card--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.action-card__badge{position:absolute;top:8px;right:8px;padding:2px 8px;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;border-radius:10px;z-index:1;background-color:var(--card-badge-bg, var(--vds-primary, #2563eb));color:var(--card-badge-color, var(--vds-primary-fg, #ffffff))}.action-card__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;background-color:var(--card-icon-bg, var(--vds-primary-tint, rgba(var(--ion-color-primary-rgb), .1)));color:var(--card-icon-color, var(--vds-primary-text, #1d4ed8))}.action-card__icon ion-icon{font-size:inherit}.action-card__icon svg{display:block}.action-card__icon-image{width:100%;height:100%;object-fit:cover;border-radius:8px}.action-card__content{flex:1;min-width:0}.action-card__title{margin:0 0 .25rem;font-weight:600;color:var(--vds-fg-base, var(--ion-text-color, #0f172a));line-height:1.3}.action-card__description{margin:0;color:var(--vds-fg-subtle, var(--ion-color-dark, #334155));line-height:1.4}.action-card__chevron{flex-shrink:0;font-size:1.25rem;color:var(--vds-fg-muted, var(--ion-color-dark, #64748b));transition:transform .2s ease}.action-card--clickable:hover .action-card__chevron{transform:translate(4px)}:host-context(.dark) .action-card--shadowed,:host-context(.ion-palette-dark) .action-card--shadowed,:host-context(html.ion-palette-dark) .action-card--shadowed,:host-context(body.dark) .action-card--shadowed,:host-context([data-theme=dark]) .action-card--shadowed{box-shadow:var(--vds-action-card-shadow, var(--vds-shadow-sm, 0 2px 8px rgba(0, 0, 0, .3)))}:host-context(.dark) .action-card--clickable:hover,:host-context(.ion-palette-dark) .action-card--clickable:hover,:host-context(html.ion-palette-dark) .action-card--clickable:hover,:host-context(body.dark) .action-card--clickable:hover,:host-context([data-theme=dark]) .action-card--clickable:hover{box-shadow:var(--vds-action-card-hover-shadow, var(--vds-shadow-md, 0 4px 16px rgba(0, 0, 0, .4)))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ActionCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-action-card', standalone: true, imports: [CommonModule, RouterLink, IonIcon, IonRippleEffect], template: `
+            args: [{ selector: 'val-action-card, vds-action-card', standalone: true, imports: [CommonModule, RouterLink, IonIcon, IonRippleEffect], template: `
     <div
       class="action-card"
       [class.action-card--small]="config().size === 'small'"
       [class.action-card--medium]="config().size === 'medium'"
       [class.action-card--large]="config().size === 'large'"
+      [class.action-card--marker]="config().variant === 'marker'"
       [class.action-card--bordered]="config().bordered"
       [class.action-card--shadowed]="config().shadowed"
       [class.action-card--disabled]="config().disabled"
       [class.action-card--clickable]="!config().disabled"
       [style.--card-bg]="getBackgroundColor()"
       [style.--card-border-color]="getBorderColor()"
+      [style.--card-icon-color]="getIconColor()"
+      [style.--card-icon-bg]="getIconBackgroundColor()"
+      [style.--card-badge-color]="getBadgeColor()"
+      [style.--card-badge-bg]="getBadgeBackgroundColor()"
       [routerLink]="config().disabled ? null : config().routerLink"
       [queryParams]="config().queryParams ?? null"
       (click)="handleClick($event)"
@@ -33789,17 +33891,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
       <!-- Badge (top-right corner) -->
       @if (config().badge) {
-        <span
-          class="action-card__badge"
-          [style.color]="getBadgeColor()"
-          [style.background-color]="getBadgeBackgroundColor()"
-        >
+        <span class="action-card__badge">
           {{ config().badge!.text }}
         </span>
       }
 
       <!-- Icon Container -->
-      <div class="action-card__icon" [style.color]="getIconColor()" [style.background-color]="getIconBackgroundColor()">
+      <div class="action-card__icon">
         @if (config().icon?.ionicon) {
           <ion-icon [name]="config().icon!.ionicon!" aria-hidden="true"></ion-icon>
         } @else if (config().icon?.svgPath) {
@@ -33831,7 +33929,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         <ion-icon name="chevron-forward-outline" class="action-card__chevron" aria-hidden="true"></ion-icon>
       }
     </div>
-  `, styles: [":host{display:flex;flex-direction:column}.action-card{position:relative;display:flex;align-items:center;flex:1;gap:1rem;padding:1rem;background:var(--card-bg, var(--ion-card-background, var(--ion-background-color)));border-radius:12px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease;text-decoration:none;overflow:hidden;--ripple-color: var(--ion-color-primary)}.action-card--small{padding:.75rem;gap:.75rem}.action-card--small .action-card__icon{width:36px;height:36px;font-size:1.125rem;border-radius:8px}.action-card--small .action-card__icon svg{width:18px;height:18px}.action-card--small .action-card__title{font-size:.9rem}.action-card--small .action-card__description{font-size:.8rem}.action-card--medium{padding:1rem;gap:1rem}.action-card--medium .action-card__icon{width:48px;height:48px;font-size:1.5rem;border-radius:10px}.action-card--medium .action-card__icon svg{width:24px;height:24px}.action-card--medium .action-card__title{font-size:1rem}.action-card--medium .action-card__description{font-size:.875rem}.action-card--large{padding:1.25rem;gap:1.25rem}.action-card--large .action-card__icon{width:56px;height:56px;font-size:1.75rem;border-radius:12px}.action-card--large .action-card__icon svg{width:28px;height:28px}.action-card--large .action-card__title{font-size:1.1rem}.action-card--large .action-card__description{font-size:.9rem}.action-card--bordered{border:1px solid var(--card-border-color, var(--ion-color-light-shade))}.action-card--shadowed{box-shadow:0 2px 8px #00000014}.action-card--clickable:hover{transform:translateY(-2px);box-shadow:0 4px 16px #0000001f}.action-card--clickable:focus-visible{outline:2px solid var(--ion-color-primary);outline-offset:2px}.action-card--clickable:active{transform:translateY(0)}.action-card--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.action-card__badge{position:absolute;top:8px;right:8px;padding:2px 8px;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;border-radius:10px;z-index:1}.action-card__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.action-card__icon ion-icon{font-size:inherit}.action-card__icon svg{display:block}.action-card__icon-image{width:100%;height:100%;object-fit:cover;border-radius:8px}.action-card__content{flex:1;min-width:0}.action-card__title{margin:0 0 .25rem;font-weight:600;color:var(--ion-text-color);line-height:1.3}.action-card__description{margin:0;color:var(--ion-color-dark);line-height:1.4}.action-card__chevron{flex-shrink:0;font-size:1.25rem;color:var(--ion-color-dark);transition:transform .2s ease}.action-card--clickable:hover .action-card__chevron{transform:translate(4px)}:host-context(.dark) .action-card--shadowed,:host-context(.ion-palette-dark) .action-card--shadowed,:host-context(html.ion-palette-dark) .action-card--shadowed,:host-context(body.dark) .action-card--shadowed,:host-context([data-theme=dark]) .action-card--shadowed{box-shadow:0 2px 8px #0000004d}:host-context(.dark) .action-card--clickable:hover,:host-context(.ion-palette-dark) .action-card--clickable:hover,:host-context(html.ion-palette-dark) .action-card--clickable:hover,:host-context(body.dark) .action-card--clickable:hover,:host-context([data-theme=dark]) .action-card--clickable:hover{box-shadow:0 4px 16px #0006}\n"] }]
+  `, styles: [":host{display:flex;flex-direction:column}.action-card{position:relative;display:flex;align-items:center;flex:1;gap:1rem;padding:1rem;background:var(--card-bg, var(--vds-bg-surface, var(--ion-card-background, var(--ion-background-color))));border-radius:var(--vds-action-card-radius, var(--vds-radius-surface, 12px));cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease;text-decoration:none;overflow:hidden;--ripple-color: var(--vds-primary, var(--ion-color-primary, #2563eb))}.action-card--small{padding:.75rem;gap:.75rem}.action-card--small .action-card__icon{width:36px;height:36px;font-size:1.125rem;border-radius:8px}.action-card--small .action-card__icon svg{width:18px;height:18px}.action-card--small .action-card__title{font-size:.9rem}.action-card--small .action-card__description{font-size:.8rem}.action-card--medium{padding:1rem;gap:1rem}.action-card--medium .action-card__icon{width:48px;height:48px;font-size:1.5rem;border-radius:10px}.action-card--medium .action-card__icon svg{width:24px;height:24px}.action-card--medium .action-card__title{font-size:1rem}.action-card--medium .action-card__description{font-size:.875rem}.action-card--large{padding:1.25rem;gap:1.25rem}.action-card--large .action-card__icon{width:56px;height:56px;font-size:1.75rem;border-radius:12px}.action-card--large .action-card__icon svg{width:28px;height:28px}.action-card--large .action-card__title{font-size:1.1rem}.action-card--large .action-card__description{font-size:.9rem}.action-card--marker{align-items:flex-start;border:1px solid var(--card-border-color);box-shadow:none}.action-card--marker .action-card__icon{width:12px;height:12px;margin-top:.35rem;border-radius:var(--vds-radius-pill, 9999px);background-color:var(--card-icon-color, var(--vds-primary, #2563eb))}.action-card--marker .action-card__icon ion-icon,.action-card--marker .action-card__icon svg,.action-card--marker .action-card__icon img{display:none}.action-card--bordered{border:1px solid var(--card-border-color)}.action-card--shadowed{box-shadow:var(--vds-action-card-shadow, var(--vds-shadow-sm, 0 2px 8px rgba(15, 23, 42, .08)))}.action-card--clickable:hover{transform:translateY(-2px);box-shadow:var(--vds-action-card-hover-shadow, var(--vds-shadow-md, 0 4px 16px rgba(15, 23, 42, .12)))}.action-card--clickable:focus-visible{outline:var(--vds-focus-ring-width, 2px) solid var(--vds-focus-ring-color, var(--vds-primary, #2563eb));outline-offset:2px}.action-card--clickable:active{transform:translateY(0)}.action-card--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.action-card__badge{position:absolute;top:8px;right:8px;padding:2px 8px;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;border-radius:10px;z-index:1;background-color:var(--card-badge-bg, var(--vds-primary, #2563eb));color:var(--card-badge-color, var(--vds-primary-fg, #ffffff))}.action-card__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;background-color:var(--card-icon-bg, var(--vds-primary-tint, rgba(var(--ion-color-primary-rgb), .1)));color:var(--card-icon-color, var(--vds-primary-text, #1d4ed8))}.action-card__icon ion-icon{font-size:inherit}.action-card__icon svg{display:block}.action-card__icon-image{width:100%;height:100%;object-fit:cover;border-radius:8px}.action-card__content{flex:1;min-width:0}.action-card__title{margin:0 0 .25rem;font-weight:600;color:var(--vds-fg-base, var(--ion-text-color, #0f172a));line-height:1.3}.action-card__description{margin:0;color:var(--vds-fg-subtle, var(--ion-color-dark, #334155));line-height:1.4}.action-card__chevron{flex-shrink:0;font-size:1.25rem;color:var(--vds-fg-muted, var(--ion-color-dark, #64748b));transition:transform .2s ease}.action-card--clickable:hover .action-card__chevron{transform:translate(4px)}:host-context(.dark) .action-card--shadowed,:host-context(.ion-palette-dark) .action-card--shadowed,:host-context(html.ion-palette-dark) .action-card--shadowed,:host-context(body.dark) .action-card--shadowed,:host-context([data-theme=dark]) .action-card--shadowed{box-shadow:var(--vds-action-card-shadow, var(--vds-shadow-sm, 0 2px 8px rgba(0, 0, 0, .3)))}:host-context(.dark) .action-card--clickable:hover,:host-context(.ion-palette-dark) .action-card--clickable:hover,:host-context(html.ion-palette-dark) .action-card--clickable:hover,:host-context(body.dark) .action-card--clickable:hover,:host-context([data-theme=dark]) .action-card--clickable:hover{box-shadow:var(--vds-action-card-hover-shadow, var(--vds-shadow-md, 0 4px 16px rgba(0, 0, 0, .4)))}\n"] }]
         }], propDecorators: { onClick: [{
                 type: Output
             }] } });
@@ -37881,6 +37979,13 @@ class AttachmentUploaderComponent {
             })));
         }
     }
+    ngOnDestroy() {
+        this.closeCamera();
+        for (const url of this.previewUrls) {
+            URL.revokeObjectURL(url);
+        }
+        this.previewUrls.clear();
+    }
     constructor() {
         this.props = input({});
         this.attachmentsChange = output();
@@ -37890,6 +37995,7 @@ class AttachmentUploaderComponent {
         this.attachments = signal([]);
         this.showCameraOverlay = signal(false);
         this.cameraStream = null;
+        this.previewUrls = new Set();
         this.maxFiles = computed(() => this.props().maxFiles ?? 5);
         this.accept = computed(() => this.props().accept ?? 'image/jpeg,image/png,image/webp,application/pdf');
         this.maxReached = computed(() => this.attachments().length >= this.maxFiles());
@@ -37962,18 +38068,26 @@ class AttachmentUploaderComponent {
         const toProcess = files.slice(0, available);
         for (const file of toProcess) {
             const id = crypto.randomUUID();
+            const previewUrl = this.createPreviewUrl(file);
             if (this.props().lazy) {
                 // Lazy mode: buffear sin subir. El consumer sube cuando tenga el destino.
-                this.attachments.update(list => [...list, { id, file, status: 'ready' }]);
+                this.attachments.update(list => [...list, { id, file, previewUrl, status: 'ready' }]);
                 this.attachmentsChange.emit(this.attachments());
             }
             else {
-                this.attachments.update(list => [...list, { id, file, status: 'uploading' }]);
+                this.attachments.update(list => [...list, { id, file, previewUrl, status: 'uploading' }]);
                 this.attachmentsChange.emit(this.attachments());
                 this.uploadFile(id, file);
             }
         }
     }
+    createPreviewUrl(file) {
+        if (!file.type.startsWith('image/'))
+            return undefined;
+        const url = URL.createObjectURL(file);
+        this.previewUrls.add(url);
+        return url;
+    }
     compressImage(file) {
         return new Promise((resolve, reject) => {
             new Compressor(file, {
@@ -38042,6 +38156,11 @@ class AttachmentUploaderComponent {
         this.attachmentsChange.emit(this.attachments());
     }
     remove(id) {
+        const item = this.attachments().find(a => a.id === id);
+        if (item?.previewUrl) {
+            URL.revokeObjectURL(item.previewUrl);
+            this.previewUrls.delete(item.previewUrl);
+        }
         this.attachments.update(list => list.filter(a => a.id !== id));
         this.attachmentsChange.emit(this.attachments());
     }
@@ -38057,11 +38176,11 @@ class AttachmentUploaderComponent {
         return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AttachmentUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AttachmentUploaderComponent, isStandalone: true, selector: "val-attachment-uploader", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { attachmentsChange: "attachmentsChange" }, viewQueries: [{ propertyName: "cameraPicker", first: true, predicate: ["cameraPicker"], descendants: true }, { propertyName: "cameraVideo", first: true, predicate: ["cameraVideo"], descendants: true }], ngImport: i0, template: "<div class=\"attachment-uploader\">\n  @if (props().title) {\n  <val-title class=\"attachment-title\" [props]=\"{ content: props().title, size: 'small', color: 'dark', bold: false }\" />\n  }\n\n  <!-- file picker est\u00E1ndar -->\n  <input #filePicker type=\"file\" [accept]=\"accept()\" multiple class=\"hidden-input\" (change)=\"onFilesSelected($event)\" />\n  <!-- fallback c\u00E1mara: solo se dispara si getUserMedia falla/denegado -->\n  <input\n    #cameraPicker\n    type=\"file\"\n    accept=\"image/*\"\n    capture=\"environment\"\n    class=\"hidden-input\"\n    (change)=\"onFilesSelected($event)\"\n  />\n\n  <div class=\"attachment-actions\">\n    <ion-button\n      class=\"attachment-action\"\n      fill=\"outline\"\n      size=\"small\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"filePicker.click()\"\n    >\n      <ion-icon slot=\"start\" name=\"attach-outline\"></ion-icon>\n      {{ i18n.t('attachAdd') }}\n    </ion-button>\n    <ion-button class=\"attachment-action\" fill=\"outline\" size=\"small\" [disabled]=\"isDisabled()\" (click)=\"openCamera()\">\n      <ion-icon slot=\"start\" name=\"camera-outline\"></ion-icon>\n      {{ i18n.t('attachCamera') }}\n    </ion-button>\n  </div>\n\n  @if (attachments().length > 0) {\n  <div class=\"attachment-list\">\n    @for (item of attachments(); track item.id) {\n    <div class=\"attachment-item\" [class]=\"'status-' + item.status\">\n      @if (!item.isExternal) {\n      <ion-icon\n        class=\"file-icon\"\n        [name]=\"item.file?.type?.startsWith('image/') ? 'image-outline' : 'document-outline'\"\n      ></ion-icon>\n      }\n      <div class=\"file-info\">\n        @if (item.isExternal && item.url) {\n        <img class=\"file-thumb\" [src]=\"item.url\" alt=\"foto\" loading=\"lazy\" (error)=\"thumbFailed(item.id)\" />\n        } @else {\n        <span class=\"file-name\">{{ item.file?.name ?? 'archivo' }}</span>\n        <span class=\"file-size\">{{ item.file ? formatSize(item.file.size) : '' }}</span>\n        }\n      </div>\n\n      @if (item.status === 'uploading') {\n      <ion-spinner class=\"status-icon\" name=\"circular\"></ion-spinner>\n      } @else if (item.status === 'ready') {\n      <ion-icon class=\"status-icon\" name=\"checkmark-circle-outline\" color=\"success\"></ion-icon>\n      } @else if (item.status === 'error') {\n      <ion-icon class=\"status-icon\" name=\"close-circle-outline\" color=\"danger\"></ion-icon>\n      } @if (item.status !== 'uploading') {\n      <ion-button fill=\"clear\" size=\"small\" color=\"dark\" (click)=\"remove(item.id)\">\n        <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>\n      </ion-button>\n      } @if (item.status === 'error' && item.error) {\n      <ion-note color=\"danger\" class=\"error-note\">{{ item.error }}</ion-note>\n      }\n    </div>\n    }\n  </div>\n  } @if (props().hint) {\n  <p class=\"attachment-hint\">{{ props().hint }}</p>\n  }\n</div>\n\n<!-- Overlay de c\u00E1mara (getUserMedia) -->\n@if (showCameraOverlay()) {\n<div class=\"camera-overlay\" (click)=\"closeCamera()\">\n  <div class=\"camera-modal\" (click)=\"$event.stopPropagation()\">\n    <video #cameraVideo autoplay playsinline class=\"camera-preview\"></video>\n    <div class=\"camera-controls\">\n      <ion-button class=\"camera-control camera-control--cancel\" fill=\"outline\" (click)=\"closeCamera()\">\n        {{ i18n.t('attachCancel') }}\n      </ion-button>\n      <ion-button class=\"camera-control camera-control--capture\" shape=\"round\" (click)=\"capturePhoto()\">\n        <ion-icon slot=\"start\" name=\"camera-outline\"></ion-icon>\n        {{ i18n.t('attachCapture') }}\n      </ion-button>\n    </div>\n  </div>\n</div>\n}\n", styles: [".hidden-input{display:none}.camera-overlay{position:fixed;inset:0;z-index:9999;background:#000000d9;display:flex;align-items:center;justify-content:center}.camera-modal{display:flex;flex-direction:column;gap:16px;padding:16px;max-width:min(640px,95vw);width:100%}.camera-preview{width:100%;border-radius:12px;background:#000;aspect-ratio:16/9;object-fit:cover}.camera-controls{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.camera-controls .camera-control{margin:0;font-weight:700}.camera-controls .camera-control--cancel{--color: #fff;--border-color: rgba(255, 255, 255, .5);--background: rgba(255, 255, 255, .06);--background-hover: rgba(255, 255, 255, .12);--background-activated: rgba(255, 255, 255, .16)}.camera-controls .camera-control--capture{--background: #fff;--background-hover: #f4f4f5;--background-activated: #e4e4e7;--color: #18181b;--box-shadow: 0 10px 24px rgba(0, 0, 0, .28)}.attachment-uploader{display:flex;flex-direction:column;gap:8px}.attachment-title{display:block;margin-bottom:2px}.attachment-hint{margin:2px 0 0;text-align:left;font-size:.75rem;line-height:1.4;color:var(--ion-color-dark)}.attachment-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.attachment-actions ion-button{margin:0;height:32px}.attachment-actions .attachment-action{--background: var(--ion-card-background, var(--ion-background-color, #fff));--background-hover: rgba(var(--ion-color-primary-rgb, 56, 128, 255), .06);--background-activated: rgba(var(--ion-color-primary-rgb, 56, 128, 255), .1);--border-color: var(--ion-border-color, rgba(0, 0, 0, .14));--color: var(--ion-text-color, #222428);--color-activated: var(--ion-text-color, #222428)}.attachment-list{display:flex;flex-direction:column;gap:4px}.attachment-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;background:var(--ion-background-color, #fff);border:1px solid var(--ion-color-light-shade, rgba(0, 0, 0, .08));flex-wrap:wrap}.attachment-item.status-error{border-color:var(--ion-color-danger)}.file-icon{font-size:1.375rem;color:var(--ion-text-color);flex-shrink:0}.file-info{flex:1;min-width:0;display:flex;flex-direction:column}.file-thumb{width:48px;height:48px;object-fit:cover;border-radius:6px;flex-shrink:0}.file-name{font-size:.8125rem;color:var(--ion-text-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-size{font-size:.6875rem;color:var(--ion-color-dark)}:host-context(.dark) .attachment-item,:host-context(.ion-palette-dark) .attachment-item,:host-context(html.ion-palette-dark) .attachment-item,:host-context(body.dark) .attachment-item,:host-context([data-theme=dark]) .attachment-item{background:#ffffff0a;border-color:#ffffff1f}:host-context(.dark) .attachment-item.status-error,:host-context(.ion-palette-dark) .attachment-item.status-error,:host-context(html.ion-palette-dark) .attachment-item.status-error,:host-context(body.dark) .attachment-item.status-error,:host-context([data-theme=dark]) .attachment-item.status-error{border-color:var(--ion-color-danger)}:host-context(.dark) .attachment-action,:host-context(.ion-palette-dark) .attachment-action,:host-context(html.ion-palette-dark) .attachment-action,:host-context(body.dark) .attachment-action,:host-context([data-theme=dark]) .attachment-action{--background: rgba(255, 255, 255, .04);--background-hover: rgba(255, 255, 255, .08);--background-activated: rgba(255, 255, 255, .12);--border-color: rgba(255, 255, 255, .16);--color: var(--ion-text-color, #fff);--color-activated: var(--ion-text-color, #fff)}.status-icon{font-size:1.25rem;flex-shrink:0}.error-note{font-size:.6875rem;width:100%}.max-note{font-size:.75rem}\n"], dependencies: [{ 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: IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AttachmentUploaderComponent, isStandalone: true, selector: "val-attachment-uploader", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { attachmentsChange: "attachmentsChange" }, viewQueries: [{ propertyName: "cameraPicker", first: true, predicate: ["cameraPicker"], descendants: true }, { propertyName: "cameraVideo", first: true, predicate: ["cameraVideo"], descendants: true }], ngImport: i0, template: "<div class=\"attachment-uploader\">\n  @if (props().title) {\n  <val-title class=\"attachment-title\" [props]=\"{ content: props().title, size: 'small', color: 'dark', bold: false }\" />\n  }\n\n  <!-- file picker est\u00E1ndar -->\n  <input #filePicker type=\"file\" [accept]=\"accept()\" multiple class=\"hidden-input\" (change)=\"onFilesSelected($event)\" />\n  <!-- fallback c\u00E1mara: solo se dispara si getUserMedia falla/denegado -->\n  <input\n    #cameraPicker\n    type=\"file\"\n    accept=\"image/*\"\n    capture=\"environment\"\n    class=\"hidden-input\"\n    (change)=\"onFilesSelected($event)\"\n  />\n\n  <div class=\"attachment-actions\">\n    <ion-button\n      class=\"attachment-action\"\n      fill=\"outline\"\n      size=\"small\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"filePicker.click()\"\n    >\n      <ion-icon slot=\"start\" name=\"attach-outline\"></ion-icon>\n      {{ i18n.t('attachAdd') }}\n    </ion-button>\n    <ion-button class=\"attachment-action\" fill=\"outline\" size=\"small\" [disabled]=\"isDisabled()\" (click)=\"openCamera()\">\n      <ion-icon slot=\"start\" name=\"camera-outline\"></ion-icon>\n      {{ i18n.t('attachCamera') }}\n    </ion-button>\n  </div>\n\n  @if (attachments().length > 0) {\n  <div class=\"attachment-list\">\n    @for (item of attachments(); track item.id) {\n    <div class=\"attachment-item\" [class]=\"'status-' + item.status\">\n      @if (item.previewUrl || item.thumbnailUrl || (item.isExternal && item.url)) {\n      <img\n        class=\"file-thumb\"\n        [src]=\"item.previewUrl || item.thumbnailUrl || item.url\"\n        [alt]=\"item.file?.name ?? i18n.t('attachFile')\"\n        loading=\"lazy\"\n        (error)=\"thumbFailed(item.id)\"\n      />\n      } @else if (!item.isExternal) {\n      <ion-icon\n        class=\"file-icon\"\n        [name]=\"item.file?.type?.startsWith('image/') ? 'image-outline' : 'document-outline'\"\n      ></ion-icon>\n      }\n      <div class=\"file-info\">\n        <span class=\"file-name\">{{ item.file?.name ?? i18n.t('attachFile') }}</span>\n        <span class=\"file-size\">{{ item.file ? formatSize(item.file.size) : '' }}</span>\n      </div>\n\n      @if (item.status === 'uploading') {\n      <ion-spinner class=\"status-icon\" name=\"circular\"></ion-spinner>\n      } @else if (item.status === 'ready') {\n      <ion-icon class=\"status-icon\" name=\"checkmark-circle-outline\" color=\"success\"></ion-icon>\n      } @else if (item.status === 'error') {\n      <ion-icon class=\"status-icon\" name=\"close-circle-outline\" color=\"danger\"></ion-icon>\n      } @if (item.status !== 'uploading') {\n      <ion-button fill=\"clear\" size=\"small\" color=\"dark\" (click)=\"remove(item.id)\">\n        <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>\n      </ion-button>\n      } @if (item.status === 'error' && item.error) {\n      <ion-note color=\"danger\" class=\"error-note\">{{ item.error }}</ion-note>\n      }\n    </div>\n    }\n  </div>\n  } @if (props().hint) {\n  <p class=\"attachment-hint\">{{ props().hint }}</p>\n  }\n</div>\n\n<!-- Overlay de c\u00E1mara (getUserMedia) -->\n@if (showCameraOverlay()) {\n<div class=\"camera-overlay\" (click)=\"closeCamera()\">\n  <div class=\"camera-modal\" (click)=\"$event.stopPropagation()\">\n    <video #cameraVideo autoplay playsinline class=\"camera-preview\"></video>\n    <div class=\"camera-controls\">\n      <ion-button class=\"camera-control camera-control--cancel\" fill=\"outline\" (click)=\"closeCamera()\">\n        {{ i18n.t('attachCancel') }}\n      </ion-button>\n      <ion-button class=\"camera-control camera-control--capture\" shape=\"round\" (click)=\"capturePhoto()\">\n        <ion-icon slot=\"start\" name=\"camera-outline\"></ion-icon>\n        {{ i18n.t('attachCapture') }}\n      </ion-button>\n    </div>\n  </div>\n</div>\n}\n", styles: [".hidden-input{display:none}.camera-overlay{position:fixed;inset:0;z-index:9999;background:#000000d9;display:flex;align-items:center;justify-content:center}.camera-modal{display:flex;flex-direction:column;gap:16px;padding:16px;max-width:min(640px,95vw);width:100%}.camera-preview{width:100%;border-radius:12px;background:#000;aspect-ratio:16/9;object-fit:cover}.camera-controls{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.camera-controls .camera-control{margin:0;font-weight:700}.camera-controls .camera-control--cancel{--color: #fff;--border-color: rgba(255, 255, 255, .5);--background: rgba(255, 255, 255, .06);--background-hover: rgba(255, 255, 255, .12);--background-activated: rgba(255, 255, 255, .16)}.camera-controls .camera-control--capture{--background: #fff;--background-hover: #f4f4f5;--background-activated: #e4e4e7;--color: #18181b;--box-shadow: 0 10px 24px rgba(0, 0, 0, .28)}.attachment-uploader{display:flex;flex-direction:column;gap:8px}.attachment-title{display:block;margin-bottom:2px}.attachment-hint{margin:2px 0 0;text-align:left;font-size:.75rem;line-height:1.4;color:var(--ion-color-dark)}.attachment-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.attachment-actions ion-button{margin:0;height:32px}.attachment-actions .attachment-action{--background: var(--ion-card-background, var(--ion-background-color, #fff));--background-hover: rgba(var(--ion-color-primary-rgb, 56, 128, 255), .06);--background-activated: rgba(var(--ion-color-primary-rgb, 56, 128, 255), .1);--border-color: var(--ion-border-color, rgba(0, 0, 0, .14));--color: var(--ion-text-color, #222428);--color-activated: var(--ion-text-color, #222428)}.attachment-list{display:flex;flex-direction:column;gap:4px}.attachment-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;background:var(--ion-background-color, #fff);border:1px solid var(--ion-color-light-shade, rgba(0, 0, 0, .08));flex-wrap:wrap}.attachment-item.status-error{border-color:var(--ion-color-danger)}.file-icon{font-size:1.375rem;color:var(--ion-text-color);flex-shrink:0}.file-info{flex:1;min-width:0;display:flex;flex-direction:column}.file-thumb{width:48px;height:48px;object-fit:cover;border-radius:6px;flex-shrink:0}.file-name{font-size:.8125rem;color:var(--ion-text-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-size{font-size:.6875rem;color:var(--ion-color-dark)}:host-context(.dark) .attachment-item,:host-context(.ion-palette-dark) .attachment-item,:host-context(html.ion-palette-dark) .attachment-item,:host-context(body.dark) .attachment-item,:host-context([data-theme=dark]) .attachment-item{background:#ffffff0a;border-color:#ffffff1f}:host-context(.dark) .attachment-item.status-error,:host-context(.ion-palette-dark) .attachment-item.status-error,:host-context(html.ion-palette-dark) .attachment-item.status-error,:host-context(body.dark) .attachment-item.status-error,:host-context([data-theme=dark]) .attachment-item.status-error{border-color:var(--ion-color-danger)}:host-context(.dark) .attachment-action,:host-context(.ion-palette-dark) .attachment-action,:host-context(html.ion-palette-dark) .attachment-action,:host-context(body.dark) .attachment-action,:host-context([data-theme=dark]) .attachment-action{--background: rgba(255, 255, 255, .04);--background-hover: rgba(255, 255, 255, .08);--background-activated: rgba(255, 255, 255, .12);--border-color: rgba(255, 255, 255, .16);--color: var(--ion-text-color, #fff);--color-activated: var(--ion-text-color, #fff)}.status-icon{font-size:1.25rem;flex-shrink:0}.error-note{font-size:.6875rem;width:100%}.max-note{font-size:.75rem}\n"], dependencies: [{ 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: IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AttachmentUploaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-attachment-uploader', standalone: true, imports: [IonButton, IonIcon, IonNote, IonSpinner, TitleComponent], encapsulation: ViewEncapsulation.None, template: "<div class=\"attachment-uploader\">\n  @if (props().title) {\n  <val-title class=\"attachment-title\" [props]=\"{ content: props().title, size: 'small', color: 'dark', bold: false }\" />\n  }\n\n  <!-- file picker est\u00E1ndar -->\n  <input #filePicker type=\"file\" [accept]=\"accept()\" multiple class=\"hidden-input\" (change)=\"onFilesSelected($event)\" />\n  <!-- fallback c\u00E1mara: solo se dispara si getUserMedia falla/denegado -->\n  <input\n    #cameraPicker\n    type=\"file\"\n    accept=\"image/*\"\n    capture=\"environment\"\n    class=\"hidden-input\"\n    (change)=\"onFilesSelected($event)\"\n  />\n\n  <div class=\"attachment-actions\">\n    <ion-button\n      class=\"attachment-action\"\n      fill=\"outline\"\n      size=\"small\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"filePicker.click()\"\n    >\n      <ion-icon slot=\"start\" name=\"attach-outline\"></ion-icon>\n      {{ i18n.t('attachAdd') }}\n    </ion-button>\n    <ion-button class=\"attachment-action\" fill=\"outline\" size=\"small\" [disabled]=\"isDisabled()\" (click)=\"openCamera()\">\n      <ion-icon slot=\"start\" name=\"camera-outline\"></ion-icon>\n      {{ i18n.t('attachCamera') }}\n    </ion-button>\n  </div>\n\n  @if (attachments().length > 0) {\n  <div class=\"attachment-list\">\n    @for (item of attachments(); track item.id) {\n    <div class=\"attachment-item\" [class]=\"'status-' + item.status\">\n      @if (!item.isExternal) {\n      <ion-icon\n        class=\"file-icon\"\n        [name]=\"item.file?.type?.startsWith('image/') ? 'image-outline' : 'document-outline'\"\n      ></ion-icon>\n      }\n      <div class=\"file-info\">\n        @if (item.isExternal && item.url) {\n        <img class=\"file-thumb\" [src]=\"item.url\" alt=\"foto\" loading=\"lazy\" (error)=\"thumbFailed(item.id)\" />\n        } @else {\n        <span class=\"file-name\">{{ item.file?.name ?? 'archivo' }}</span>\n        <span class=\"file-size\">{{ item.file ? formatSize(item.file.size) : '' }}</span>\n        }\n      </div>\n\n      @if (item.status === 'uploading') {\n      <ion-spinner class=\"status-icon\" name=\"circular\"></ion-spinner>\n      } @else if (item.status === 'ready') {\n      <ion-icon class=\"status-icon\" name=\"checkmark-circle-outline\" color=\"success\"></ion-icon>\n      } @else if (item.status === 'error') {\n      <ion-icon class=\"status-icon\" name=\"close-circle-outline\" color=\"danger\"></ion-icon>\n      } @if (item.status !== 'uploading') {\n      <ion-button fill=\"clear\" size=\"small\" color=\"dark\" (click)=\"remove(item.id)\">\n        <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>\n      </ion-button>\n      } @if (item.status === 'error' && item.error) {\n      <ion-note color=\"danger\" class=\"error-note\">{{ item.error }}</ion-note>\n      }\n    </div>\n    }\n  </div>\n  } @if (props().hint) {\n  <p class=\"attachment-hint\">{{ props().hint }}</p>\n  }\n</div>\n\n<!-- Overlay de c\u00E1mara (getUserMedia) -->\n@if (showCameraOverlay()) {\n<div class=\"camera-overlay\" (click)=\"closeCamera()\">\n  <div class=\"camera-modal\" (click)=\"$event.stopPropagation()\">\n    <video #cameraVideo autoplay playsinline class=\"camera-preview\"></video>\n    <div class=\"camera-controls\">\n      <ion-button class=\"camera-control camera-control--cancel\" fill=\"outline\" (click)=\"closeCamera()\">\n        {{ i18n.t('attachCancel') }}\n      </ion-button>\n      <ion-button class=\"camera-control camera-control--capture\" shape=\"round\" (click)=\"capturePhoto()\">\n        <ion-icon slot=\"start\" name=\"camera-outline\"></ion-icon>\n        {{ i18n.t('attachCapture') }}\n      </ion-button>\n    </div>\n  </div>\n</div>\n}\n", styles: [".hidden-input{display:none}.camera-overlay{position:fixed;inset:0;z-index:9999;background:#000000d9;display:flex;align-items:center;justify-content:center}.camera-modal{display:flex;flex-direction:column;gap:16px;padding:16px;max-width:min(640px,95vw);width:100%}.camera-preview{width:100%;border-radius:12px;background:#000;aspect-ratio:16/9;object-fit:cover}.camera-controls{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.camera-controls .camera-control{margin:0;font-weight:700}.camera-controls .camera-control--cancel{--color: #fff;--border-color: rgba(255, 255, 255, .5);--background: rgba(255, 255, 255, .06);--background-hover: rgba(255, 255, 255, .12);--background-activated: rgba(255, 255, 255, .16)}.camera-controls .camera-control--capture{--background: #fff;--background-hover: #f4f4f5;--background-activated: #e4e4e7;--color: #18181b;--box-shadow: 0 10px 24px rgba(0, 0, 0, .28)}.attachment-uploader{display:flex;flex-direction:column;gap:8px}.attachment-title{display:block;margin-bottom:2px}.attachment-hint{margin:2px 0 0;text-align:left;font-size:.75rem;line-height:1.4;color:var(--ion-color-dark)}.attachment-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.attachment-actions ion-button{margin:0;height:32px}.attachment-actions .attachment-action{--background: var(--ion-card-background, var(--ion-background-color, #fff));--background-hover: rgba(var(--ion-color-primary-rgb, 56, 128, 255), .06);--background-activated: rgba(var(--ion-color-primary-rgb, 56, 128, 255), .1);--border-color: var(--ion-border-color, rgba(0, 0, 0, .14));--color: var(--ion-text-color, #222428);--color-activated: var(--ion-text-color, #222428)}.attachment-list{display:flex;flex-direction:column;gap:4px}.attachment-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;background:var(--ion-background-color, #fff);border:1px solid var(--ion-color-light-shade, rgba(0, 0, 0, .08));flex-wrap:wrap}.attachment-item.status-error{border-color:var(--ion-color-danger)}.file-icon{font-size:1.375rem;color:var(--ion-text-color);flex-shrink:0}.file-info{flex:1;min-width:0;display:flex;flex-direction:column}.file-thumb{width:48px;height:48px;object-fit:cover;border-radius:6px;flex-shrink:0}.file-name{font-size:.8125rem;color:var(--ion-text-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-size{font-size:.6875rem;color:var(--ion-color-dark)}:host-context(.dark) .attachment-item,:host-context(.ion-palette-dark) .attachment-item,:host-context(html.ion-palette-dark) .attachment-item,:host-context(body.dark) .attachment-item,:host-context([data-theme=dark]) .attachment-item{background:#ffffff0a;border-color:#ffffff1f}:host-context(.dark) .attachment-item.status-error,:host-context(.ion-palette-dark) .attachment-item.status-error,:host-context(html.ion-palette-dark) .attachment-item.status-error,:host-context(body.dark) .attachment-item.status-error,:host-context([data-theme=dark]) .attachment-item.status-error{border-color:var(--ion-color-danger)}:host-context(.dark) .attachment-action,:host-context(.ion-palette-dark) .attachment-action,:host-context(html.ion-palette-dark) .attachment-action,:host-context(body.dark) .attachment-action,:host-context([data-theme=dark]) .attachment-action{--background: rgba(255, 255, 255, .04);--background-hover: rgba(255, 255, 255, .08);--background-activated: rgba(255, 255, 255, .12);--border-color: rgba(255, 255, 255, .16);--color: var(--ion-text-color, #fff);--color-activated: var(--ion-text-color, #fff)}.status-icon{font-size:1.25rem;flex-shrink:0}.error-note{font-size:.6875rem;width:100%}.max-note{font-size:.75rem}\n"] }]
+            args: [{ selector: 'val-attachment-uploader', standalone: true, imports: [IonButton, IonIcon, IonNote, IonSpinner, TitleComponent], encapsulation: ViewEncapsulation.None, template: "<div class=\"attachment-uploader\">\n  @if (props().title) {\n  <val-title class=\"attachment-title\" [props]=\"{ content: props().title, size: 'small', color: 'dark', bold: false }\" />\n  }\n\n  <!-- file picker est\u00E1ndar -->\n  <input #filePicker type=\"file\" [accept]=\"accept()\" multiple class=\"hidden-input\" (change)=\"onFilesSelected($event)\" />\n  <!-- fallback c\u00E1mara: solo se dispara si getUserMedia falla/denegado -->\n  <input\n    #cameraPicker\n    type=\"file\"\n    accept=\"image/*\"\n    capture=\"environment\"\n    class=\"hidden-input\"\n    (change)=\"onFilesSelected($event)\"\n  />\n\n  <div class=\"attachment-actions\">\n    <ion-button\n      class=\"attachment-action\"\n      fill=\"outline\"\n      size=\"small\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"filePicker.click()\"\n    >\n      <ion-icon slot=\"start\" name=\"attach-outline\"></ion-icon>\n      {{ i18n.t('attachAdd') }}\n    </ion-button>\n    <ion-button class=\"attachment-action\" fill=\"outline\" size=\"small\" [disabled]=\"isDisabled()\" (click)=\"openCamera()\">\n      <ion-icon slot=\"start\" name=\"camera-outline\"></ion-icon>\n      {{ i18n.t('attachCamera') }}\n    </ion-button>\n  </div>\n\n  @if (attachments().length > 0) {\n  <div class=\"attachment-list\">\n    @for (item of attachments(); track item.id) {\n    <div class=\"attachment-item\" [class]=\"'status-' + item.status\">\n      @if (item.previewUrl || item.thumbnailUrl || (item.isExternal && item.url)) {\n      <img\n        class=\"file-thumb\"\n        [src]=\"item.previewUrl || item.thumbnailUrl || item.url\"\n        [alt]=\"item.file?.name ?? i18n.t('attachFile')\"\n        loading=\"lazy\"\n        (error)=\"thumbFailed(item.id)\"\n      />\n      } @else if (!item.isExternal) {\n      <ion-icon\n        class=\"file-icon\"\n        [name]=\"item.file?.type?.startsWith('image/') ? 'image-outline' : 'document-outline'\"\n      ></ion-icon>\n      }\n      <div class=\"file-info\">\n        <span class=\"file-name\">{{ item.file?.name ?? i18n.t('attachFile') }}</span>\n        <span class=\"file-size\">{{ item.file ? formatSize(item.file.size) : '' }}</span>\n      </div>\n\n      @if (item.status === 'uploading') {\n      <ion-spinner class=\"status-icon\" name=\"circular\"></ion-spinner>\n      } @else if (item.status === 'ready') {\n      <ion-icon class=\"status-icon\" name=\"checkmark-circle-outline\" color=\"success\"></ion-icon>\n      } @else if (item.status === 'error') {\n      <ion-icon class=\"status-icon\" name=\"close-circle-outline\" color=\"danger\"></ion-icon>\n      } @if (item.status !== 'uploading') {\n      <ion-button fill=\"clear\" size=\"small\" color=\"dark\" (click)=\"remove(item.id)\">\n        <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>\n      </ion-button>\n      } @if (item.status === 'error' && item.error) {\n      <ion-note color=\"danger\" class=\"error-note\">{{ item.error }}</ion-note>\n      }\n    </div>\n    }\n  </div>\n  } @if (props().hint) {\n  <p class=\"attachment-hint\">{{ props().hint }}</p>\n  }\n</div>\n\n<!-- Overlay de c\u00E1mara (getUserMedia) -->\n@if (showCameraOverlay()) {\n<div class=\"camera-overlay\" (click)=\"closeCamera()\">\n  <div class=\"camera-modal\" (click)=\"$event.stopPropagation()\">\n    <video #cameraVideo autoplay playsinline class=\"camera-preview\"></video>\n    <div class=\"camera-controls\">\n      <ion-button class=\"camera-control camera-control--cancel\" fill=\"outline\" (click)=\"closeCamera()\">\n        {{ i18n.t('attachCancel') }}\n      </ion-button>\n      <ion-button class=\"camera-control camera-control--capture\" shape=\"round\" (click)=\"capturePhoto()\">\n        <ion-icon slot=\"start\" name=\"camera-outline\"></ion-icon>\n        {{ i18n.t('attachCapture') }}\n      </ion-button>\n    </div>\n  </div>\n</div>\n}\n", styles: [".hidden-input{display:none}.camera-overlay{position:fixed;inset:0;z-index:9999;background:#000000d9;display:flex;align-items:center;justify-content:center}.camera-modal{display:flex;flex-direction:column;gap:16px;padding:16px;max-width:min(640px,95vw);width:100%}.camera-preview{width:100%;border-radius:12px;background:#000;aspect-ratio:16/9;object-fit:cover}.camera-controls{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.camera-controls .camera-control{margin:0;font-weight:700}.camera-controls .camera-control--cancel{--color: #fff;--border-color: rgba(255, 255, 255, .5);--background: rgba(255, 255, 255, .06);--background-hover: rgba(255, 255, 255, .12);--background-activated: rgba(255, 255, 255, .16)}.camera-controls .camera-control--capture{--background: #fff;--background-hover: #f4f4f5;--background-activated: #e4e4e7;--color: #18181b;--box-shadow: 0 10px 24px rgba(0, 0, 0, .28)}.attachment-uploader{display:flex;flex-direction:column;gap:8px}.attachment-title{display:block;margin-bottom:2px}.attachment-hint{margin:2px 0 0;text-align:left;font-size:.75rem;line-height:1.4;color:var(--ion-color-dark)}.attachment-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.attachment-actions ion-button{margin:0;height:32px}.attachment-actions .attachment-action{--background: var(--ion-card-background, var(--ion-background-color, #fff));--background-hover: rgba(var(--ion-color-primary-rgb, 56, 128, 255), .06);--background-activated: rgba(var(--ion-color-primary-rgb, 56, 128, 255), .1);--border-color: var(--ion-border-color, rgba(0, 0, 0, .14));--color: var(--ion-text-color, #222428);--color-activated: var(--ion-text-color, #222428)}.attachment-list{display:flex;flex-direction:column;gap:4px}.attachment-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;background:var(--ion-background-color, #fff);border:1px solid var(--ion-color-light-shade, rgba(0, 0, 0, .08));flex-wrap:wrap}.attachment-item.status-error{border-color:var(--ion-color-danger)}.file-icon{font-size:1.375rem;color:var(--ion-text-color);flex-shrink:0}.file-info{flex:1;min-width:0;display:flex;flex-direction:column}.file-thumb{width:48px;height:48px;object-fit:cover;border-radius:6px;flex-shrink:0}.file-name{font-size:.8125rem;color:var(--ion-text-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-size{font-size:.6875rem;color:var(--ion-color-dark)}:host-context(.dark) .attachment-item,:host-context(.ion-palette-dark) .attachment-item,:host-context(html.ion-palette-dark) .attachment-item,:host-context(body.dark) .attachment-item,:host-context([data-theme=dark]) .attachment-item{background:#ffffff0a;border-color:#ffffff1f}:host-context(.dark) .attachment-item.status-error,:host-context(.ion-palette-dark) .attachment-item.status-error,:host-context(html.ion-palette-dark) .attachment-item.status-error,:host-context(body.dark) .attachment-item.status-error,:host-context([data-theme=dark]) .attachment-item.status-error{border-color:var(--ion-color-danger)}:host-context(.dark) .attachment-action,:host-context(.ion-palette-dark) .attachment-action,:host-context(html.ion-palette-dark) .attachment-action,:host-context(body.dark) .attachment-action,:host-context([data-theme=dark]) .attachment-action{--background: rgba(255, 255, 255, .04);--background-hover: rgba(255, 255, 255, .08);--background-activated: rgba(255, 255, 255, .12);--border-color: rgba(255, 255, 255, .16);--color: var(--ion-text-color, #fff);--color-activated: var(--ion-text-color, #fff)}.status-icon{font-size:1.25rem;flex-shrink:0}.error-note{font-size:.6875rem;width:100%}.max-note{font-size:.75rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { cameraPicker: [{
                 type: ViewChild,
                 args: ['cameraPicker']
@@ -51140,7 +51259,7 @@ class WizardFooterComponent {
         (onClick)="clickHandler($event)"
       ></val-button-group>
     </val-footer>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: FooterComponent, selector: "val-footer", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: ProgressBarComponent, selector: "val-progress-bar", inputs: ["preset", "props"] }, { kind: "component", type: ButtonGroupComponent, selector: "val-button-group", inputs: ["props"], outputs: ["onClick"] }] }); }
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: FooterComponent, selector: "val-footer", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: ProgressBarComponent, selector: "val-progress-bar, vds-progress-bar", inputs: ["preset", "props"] }, { kind: "component", type: ButtonGroupComponent, selector: "val-button-group", inputs: ["props"], outputs: ["onClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WizardFooterComponent, decorators: [{
             type: Component,
@@ -51633,7 +51752,7 @@ class CommentSectionComponent {
         </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-xl-wide: 1280px;--val-container-md-wide: 900px;--val-container-aside: 0px;--val-container-padding: 16px;--val-radius-xs: 10px;--val-radius-sm: 16px;--val-radius-md: 20px;--val-radius-lg: 28px;--val-radius-xl: 36px;--val-radius-full: 999px;--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: #737478;--ion-color-medium-rgb: 115,116,120;--ion-color-medium-contrast: #ffffff;--ion-color-medium-contrast-rgb: 255,255,255;--ion-color-medium-shade: #65666a;--ion-color-medium-tint: #818286;--ion-color-warning: #ffde38;--ion-color-warning-rgb: 255, 222, 56;--ion-color-warning-contrast: #000000;--ion-color-warning-contrast-rgb: 0, 0, 0;--ion-color-warning-shade: #e0c331;--ion-color-warning-tint: #ffe14c;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-dark)}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-section.loading{pointer-events:none}.section-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--ion-color-light-shade)}.header-title{display:flex;align-items:center;gap:8px}.title-icon{font-size:1.5rem;color:var(--ion-color-primary)}.title{margin:0;font-size:1.125rem;font-weight:600;color:var(--ion-text-color)}.count-badge{font-size:.75rem;font-weight:600;--padding-start: 8px;--padding-end: 8px}.header-actions{display:flex;align-items:center;gap:8px}.sort-select-item{--padding-start: 0;--padding-end: 0;--inner-padding-end: 0;--background: transparent;--min-height: 36px}.sort-select-item ion-select{--padding-start: 8px;--padding-end: 8px;min-width:140px;font-size:.875rem}.sort-icon{font-size:1.125rem;color:var(--ion-color-dark);margin-right:4px}.new-comment-section{margin-bottom:24px;padding:16px;background-color:var(--ion-color-light);border-radius:12px}.input-wrapper{display:flex;gap:12px}.input-avatar{flex-shrink:0}.input-avatar val-avatar{--size: 40px}.input-container{flex:1;min-width:0}.comment-textarea{--background: var(--ion-background-color);--padding-start: 12px;--padding-end: 12px;--padding-top: 10px;--padding-bottom: 10px;border-radius:8px;font-size:.875rem;min-height:60px;border:1px solid var(--ion-color-light-shade);transition:border-color .2s}.comment-textarea:focus-within{border-color:var(--ion-color-primary)}.input-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:10px}.char-counter{font-size:.75rem;color:var(--ion-color-dark)}.char-counter.warning{color:var(--ion-color-warning);font-weight:500}.loading-state{display:flex;flex-direction:column;gap:20px}.skeleton-comment{display:flex;gap:12px;padding:12px 0}.skeleton-comment .skeleton-content{flex:1;display:flex;flex-direction:column;gap:8px}.comments-list{display:flex;flex-direction:column;gap:10px}.comments-list.with-dividers{gap:0}.comments-list.with-dividers val-comment{padding:16px 0}.comments-list.with-dividers val-comment:first-child{padding-top:0}.comment-divider{height:1px;background-color:var(--ion-color-light-shade);margin:0}.load-more-section{display:flex;justify-content:center;padding:20px 0}.load-more-section ion-button{min-width:200px}.load-more-section ion-spinner{width:28px;height:28px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;text-align:center}.empty-icon{font-size:4rem;color:var(--ion-color-dark);opacity:.5;margin-bottom:16px}.empty-title{margin:0 0 8px;font-size:1.125rem;font-weight:600;color:var(--ion-text-color)}.empty-message{margin:0;font-size:.875rem;color:var(--ion-color-dark);max-width:300px}@media (max-width: 576px){.section-header{flex-direction:column;align-items:flex-start}.header-actions,.sort-select-item{width:100%}.sort-select-item ion-select{width:100%}.input-wrapper{flex-direction:column}.input-avatar{display:none}.input-actions{flex-direction:column;align-items:stretch}.input-actions ion-button{width:100%}}:host-context(body.dark) .new-comment-section,:host-context(.dark) .new-comment-section,:host-context(.ion-palette-dark) .new-comment-section,:host-context(html.ion-palette-dark) .new-comment-section,:host-context([data-theme=dark]) .new-comment-section{background-color:var(--ion-color-step-100, #1a1a1a)}:host-context(body.dark) .comment-textarea,:host-context(.dark) .comment-textarea,:host-context(.ion-palette-dark) .comment-textarea,:host-context(html.ion-palette-dark) .comment-textarea,:host-context([data-theme=dark]) .comment-textarea{--background: var(--ion-color-step-50, #121212);border-color:var(--ion-color-step-200, #2a2a2a)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { 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: IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { kind: "component", type: IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }, { 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: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: CommentComponent, selector: "val-comment", inputs: ["props"], outputs: ["authorClick", "reactionClick", "actionClick", "menuItemClick", "loadMoreClick", "collapseToggle"] }, { kind: "component", type: AvatarComponent, selector: "val-avatar", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: SkeletonComponent, selector: "val-skeleton", inputs: ["props"] }] }); }
+  `, 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-xl-wide: 1280px;--val-container-md-wide: 900px;--val-container-aside: 0px;--val-container-padding: 16px;--val-radius-xs: 10px;--val-radius-sm: 16px;--val-radius-md: 20px;--val-radius-lg: 28px;--val-radius-xl: 36px;--val-radius-full: 999px;--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: #737478;--ion-color-medium-rgb: 115,116,120;--ion-color-medium-contrast: #ffffff;--ion-color-medium-contrast-rgb: 255,255,255;--ion-color-medium-shade: #65666a;--ion-color-medium-tint: #818286;--ion-color-warning: #ffde38;--ion-color-warning-rgb: 255, 222, 56;--ion-color-warning-contrast: #000000;--ion-color-warning-contrast-rgb: 0, 0, 0;--ion-color-warning-shade: #e0c331;--ion-color-warning-tint: #ffe14c;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-dark)}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-section.loading{pointer-events:none}.section-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--ion-color-light-shade)}.header-title{display:flex;align-items:center;gap:8px}.title-icon{font-size:1.5rem;color:var(--ion-color-primary)}.title{margin:0;font-size:1.125rem;font-weight:600;color:var(--ion-text-color)}.count-badge{font-size:.75rem;font-weight:600;--padding-start: 8px;--padding-end: 8px}.header-actions{display:flex;align-items:center;gap:8px}.sort-select-item{--padding-start: 0;--padding-end: 0;--inner-padding-end: 0;--background: transparent;--min-height: 36px}.sort-select-item ion-select{--padding-start: 8px;--padding-end: 8px;min-width:140px;font-size:.875rem}.sort-icon{font-size:1.125rem;color:var(--ion-color-dark);margin-right:4px}.new-comment-section{margin-bottom:24px;padding:16px;background-color:var(--ion-color-light);border-radius:12px}.input-wrapper{display:flex;gap:12px}.input-avatar{flex-shrink:0}.input-avatar val-avatar{--size: 40px}.input-container{flex:1;min-width:0}.comment-textarea{--background: var(--ion-background-color);--padding-start: 12px;--padding-end: 12px;--padding-top: 10px;--padding-bottom: 10px;border-radius:8px;font-size:.875rem;min-height:60px;border:1px solid var(--ion-color-light-shade);transition:border-color .2s}.comment-textarea:focus-within{border-color:var(--ion-color-primary)}.input-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:10px}.char-counter{font-size:.75rem;color:var(--ion-color-dark)}.char-counter.warning{color:var(--ion-color-warning);font-weight:500}.loading-state{display:flex;flex-direction:column;gap:20px}.skeleton-comment{display:flex;gap:12px;padding:12px 0}.skeleton-comment .skeleton-content{flex:1;display:flex;flex-direction:column;gap:8px}.comments-list{display:flex;flex-direction:column;gap:10px}.comments-list.with-dividers{gap:0}.comments-list.with-dividers val-comment{padding:16px 0}.comments-list.with-dividers val-comment:first-child{padding-top:0}.comment-divider{height:1px;background-color:var(--ion-color-light-shade);margin:0}.load-more-section{display:flex;justify-content:center;padding:20px 0}.load-more-section ion-button{min-width:200px}.load-more-section ion-spinner{width:28px;height:28px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;text-align:center}.empty-icon{font-size:4rem;color:var(--ion-color-dark);opacity:.5;margin-bottom:16px}.empty-title{margin:0 0 8px;font-size:1.125rem;font-weight:600;color:var(--ion-text-color)}.empty-message{margin:0;font-size:.875rem;color:var(--ion-color-dark);max-width:300px}@media (max-width: 576px){.section-header{flex-direction:column;align-items:flex-start}.header-actions,.sort-select-item{width:100%}.sort-select-item ion-select{width:100%}.input-wrapper{flex-direction:column}.input-avatar{display:none}.input-actions{flex-direction:column;align-items:stretch}.input-actions ion-button{width:100%}}:host-context(body.dark) .new-comment-section,:host-context(.dark) .new-comment-section,:host-context(.ion-palette-dark) .new-comment-section,:host-context(html.ion-palette-dark) .new-comment-section,:host-context([data-theme=dark]) .new-comment-section{background-color:var(--ion-color-step-100, #1a1a1a)}:host-context(body.dark) .comment-textarea,:host-context(.dark) .comment-textarea,:host-context(.ion-palette-dark) .comment-textarea,:host-context(html.ion-palette-dark) .comment-textarea,:host-context([data-theme=dark]) .comment-textarea{--background: var(--ion-color-step-50, #121212);border-color:var(--ion-color-step-200, #2a2a2a)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { 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: IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { kind: "component", type: IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }, { 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: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: CommentComponent, selector: "val-comment", inputs: ["props"], outputs: ["authorClick", "reactionClick", "actionClick", "menuItemClick", "loadMoreClick", "collapseToggle"] }, { kind: "component", type: AvatarComponent, selector: "val-avatar, vds-avatar", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: SkeletonComponent, selector: "val-skeleton", inputs: ["props"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CommentSectionComponent, decorators: [{
             type: Component,
@@ -60174,7 +60293,7 @@ class SettingsHubComponent {
         </ion-grid>
       </div>
     </val-container>
-  `, isInline: true, styles: [".page{padding:16px 0}.page-header{margin-bottom:16px}.cards-grid{margin:0 -4px;padding:0}.cards-grid ion-col{padding:4px}\n"], dependencies: [{ kind: "component", type: IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: IonRow, selector: "ion-row" }, { kind: "component", type: IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: ActionCardComponent, selector: "val-action-card", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: ContainerComponent, selector: "val-container", inputs: ["props"] }] }); }
+  `, isInline: true, styles: [".page{padding:16px 0}.page-header{margin-bottom:16px}.cards-grid{margin:0 -4px;padding:0}.cards-grid ion-col{padding:4px}\n"], dependencies: [{ kind: "component", type: IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: IonRow, selector: "ion-row" }, { kind: "component", type: IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: ActionCardComponent, selector: "val-action-card, vds-action-card", inputs: ["props", "title", "titleKey", "description", "descriptionKey", "i18nNamespace", "icon", "size", "variant", "bordered", "borderColor", "backgroundColor", "shadowed", "disabled", "routerLink", "queryParams", "href", "badge", "showChevron", "token"], outputs: ["onClick"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: ContainerComponent, selector: "val-container", inputs: ["props"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SettingsHubComponent, decorators: [{
             type: Component,
@@ -61637,7 +61756,7 @@ class SecurityViewComponent {
         />
       </div>
     </val-container>
-  `, isInline: true, styles: [".page{padding:16px 0}.page-header{margin-bottom:16px}.settings-section{padding:16px 0}.settings-section+.settings-section{border-top:1px solid var(--val-border-color, rgba(0, 0, 0, .08))}h2{font-size:16px;font-weight:600;margin:0 0 4px}.cards-grid{margin:0 -4px;padding:0}.cards-grid ion-col{padding:4px;display:flex;flex-direction:column}.cards-grid ion-col val-action-card{flex:1;display:flex;flex-direction:column}.section-body{margin-top:16px;display:flex;flex-direction:column;gap:10px}.row-actions{margin-top:12px}.row-actions--center{display:flex;justify-content:center;margin-top:4px}.sessions{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}.session{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:var(--ion-color-light, rgba(0, 0, 0, .04));border:1px solid transparent;transition:background .15s ease,border-color .15s ease}.session--current{background:#2dd36f1a;border-color:#2dd36f4d}.session__icon{font-size:26px;color:var(--ion-color-dark, #1a1a1a);flex-shrink:0}.session--current .session__icon{color:var(--ion-color-success-shade, #28ba62)}.session__body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.session__end{flex-shrink:0}.session__badge{display:inline-block;padding:4px 10px;font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--ion-color-success-shade, #28ba62);background:#2dd36f2e;border-radius:999px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: IonRow, selector: "ion-row" }, { kind: "component", type: IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: ActionCardComponent, selector: "val-action-card", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: ActionHeaderComponent, selector: "val-action-header", inputs: ["props"] }, { kind: "component", type: PageLinksComponent, selector: "val-page-links", inputs: ["props"] }, { kind: "component", type: SkeletonLayoutComponent, selector: "val-skeleton-layout", inputs: ["props"] }, { kind: "component", type: ChangeEmailModalComponent, selector: "val-change-email-modal", inputs: ["isOpen"], outputs: ["changed", "dismissed"] }, { kind: "component", type: ChangePasswordModalComponent, selector: "val-change-password-modal", inputs: ["isOpen"], outputs: ["changed", "dismissed"] }, { kind: "component", type: MfaModalComponent, selector: "val-mfa-modal", inputs: ["isOpen", "prefillCode"], outputs: ["changed", "enabledViaDeeplink", "dismissed"] }, { kind: "component", type: ContainerComponent, selector: "val-container", inputs: ["props"] }] }); }
+  `, isInline: true, styles: [".page{padding:16px 0}.page-header{margin-bottom:16px}.settings-section{padding:16px 0}.settings-section+.settings-section{border-top:1px solid var(--val-border-color, rgba(0, 0, 0, .08))}h2{font-size:16px;font-weight:600;margin:0 0 4px}.cards-grid{margin:0 -4px;padding:0}.cards-grid ion-col{padding:4px;display:flex;flex-direction:column}.cards-grid ion-col val-action-card{flex:1;display:flex;flex-direction:column}.section-body{margin-top:16px;display:flex;flex-direction:column;gap:10px}.row-actions{margin-top:12px}.row-actions--center{display:flex;justify-content:center;margin-top:4px}.sessions{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}.session{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:var(--ion-color-light, rgba(0, 0, 0, .04));border:1px solid transparent;transition:background .15s ease,border-color .15s ease}.session--current{background:#2dd36f1a;border-color:#2dd36f4d}.session__icon{font-size:26px;color:var(--ion-color-dark, #1a1a1a);flex-shrink:0}.session--current .session__icon{color:var(--ion-color-success-shade, #28ba62)}.session__body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.session__end{flex-shrink:0}.session__badge{display:inline-block;padding:4px 10px;font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--ion-color-success-shade, #28ba62);background:#2dd36f2e;border-radius:999px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: IonRow, selector: "ion-row" }, { kind: "component", type: IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: ActionCardComponent, selector: "val-action-card, vds-action-card", inputs: ["props", "title", "titleKey", "description", "descriptionKey", "i18nNamespace", "icon", "size", "variant", "bordered", "borderColor", "backgroundColor", "shadowed", "disabled", "routerLink", "queryParams", "href", "badge", "showChevron", "token"], outputs: ["onClick"] }, { kind: "component", type: ActionHeaderComponent, selector: "val-action-header", inputs: ["props"] }, { kind: "component", type: PageLinksComponent, selector: "val-page-links", inputs: ["props"] }, { kind: "component", type: SkeletonLayoutComponent, selector: "val-skeleton-layout", inputs: ["props"] }, { kind: "component", type: ChangeEmailModalComponent, selector: "val-change-email-modal", inputs: ["isOpen"], outputs: ["changed", "dismissed"] }, { kind: "component", type: ChangePasswordModalComponent, selector: "val-change-password-modal", inputs: ["isOpen"], outputs: ["changed", "dismissed"] }, { kind: "component", type: MfaModalComponent, selector: "val-mfa-modal", inputs: ["isOpen", "prefillCode"], outputs: ["changed", "enabledViaDeeplink", "dismissed"] }, { kind: "component", type: ContainerComponent, selector: "val-container", inputs: ["props"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SecurityViewComponent, decorators: [{
             type: Component,
@@ -72391,7 +72510,7 @@ class AboutViewComponent {
            pintara acá, la vista Acerca de mostraría dos (le pasó). -->
       </ion-grid>
     </val-container>
-  `, isInline: true, styles: [":host{display:block}.about-grid{padding:16px 0}.about-hero{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px 0 16px;text-align:center}.about-hero__logo{height:96px;width:auto;display:block}.about-hero__logo--var{width:96px;height:96px;background-position:center;background-repeat:no-repeat;background-size:contain}.version-row{display:flex;align-items:center;gap:6px;cursor:pointer;opacity:.85;transition:opacity .15s ease}.version-row:hover{opacity:1}.version-copy-icon{font-size:14px;color:var(--ion-color-dark)}.about-section{padding:16px 0 8px;display:flex;flex-direction:column;gap:8px}.about-actions{display:flex;flex-direction:column;gap:8px}.about-section--reviews val-action-card{display:block}.about-section--reviews val-action-card ::ng-deep .action-card{background:var(--ion-color-light, #f4f5f8);box-shadow:none}.about-section--reviews val-action-card ::ng-deep .action-card__description{color:var(--ion-color-dark);opacity:.7}.about-social{display:flex;flex-wrap:wrap;gap:10px;padding-top:8px}.about-social .social-btn{--border-radius: 50%;--background: var(--ion-color-light, #f4f5f8);--color: var(--ion-color-dark);--padding-start: 0;--padding-end: 0;width:48px;height:48px;margin:0;transition:transform .15s ease}.about-social .social-btn:hover{--background: var(--ion-color-primary-tint, #8a4ce5);--color: #fff;transform:translateY(-2px)}.about-social .social-btn ion-icon{font-size:22px}.about-footer{display:flex;flex-direction:column;align-items:center;gap:4px;padding:24px 0;text-align:center}:host-context(body.dark) val-action-card ::ng-deep .action-card,:host-context(html.ion-palette-dark) val-action-card ::ng-deep .action-card,:host-context([data-theme=\"dark\"]) val-action-card ::ng-deep .action-card{background:#ffffff0a}:host-context(body.dark) .about-section--reviews val-action-card ::ng-deep .action-card:hover,:host-context(html.ion-palette-dark) .about-section--reviews val-action-card ::ng-deep .action-card:hover,:host-context([data-theme=\"dark\"]) .about-section--reviews val-action-card ::ng-deep .action-card:hover{background:#ffffff14}:host-context(body.dark) .about-social .social-btn,:host-context(html.ion-palette-dark) .about-social .social-btn,:host-context([data-theme=\"dark\"]) .about-social .social-btn{--background: rgba(255, 255, 255, .04)}\n"], dependencies: [{ 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: IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: PillComponent, selector: "val-pill", inputs: ["preset", "props"], outputs: ["pillClick", "pillAction"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: ActionCardComponent, selector: "val-action-card", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: ContainerComponent, selector: "val-container", inputs: ["props"] }] }); }
+  `, isInline: true, styles: [":host{display:block}.about-grid{padding:16px 0}.about-hero{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px 0 16px;text-align:center}.about-hero__logo{height:96px;width:auto;display:block}.about-hero__logo--var{width:96px;height:96px;background-position:center;background-repeat:no-repeat;background-size:contain}.version-row{display:flex;align-items:center;gap:6px;cursor:pointer;opacity:.85;transition:opacity .15s ease}.version-row:hover{opacity:1}.version-copy-icon{font-size:14px;color:var(--ion-color-dark)}.about-section{padding:16px 0 8px;display:flex;flex-direction:column;gap:8px}.about-actions{display:flex;flex-direction:column;gap:8px}.about-section--reviews val-action-card{display:block}.about-section--reviews val-action-card ::ng-deep .action-card{background:var(--ion-color-light, #f4f5f8);box-shadow:none}.about-section--reviews val-action-card ::ng-deep .action-card__description{color:var(--ion-color-dark);opacity:.7}.about-social{display:flex;flex-wrap:wrap;gap:10px;padding-top:8px}.about-social .social-btn{--border-radius: 50%;--background: var(--ion-color-light, #f4f5f8);--color: var(--ion-color-dark);--padding-start: 0;--padding-end: 0;width:48px;height:48px;margin:0;transition:transform .15s ease}.about-social .social-btn:hover{--background: var(--ion-color-primary-tint, #8a4ce5);--color: #fff;transform:translateY(-2px)}.about-social .social-btn ion-icon{font-size:22px}.about-footer{display:flex;flex-direction:column;align-items:center;gap:4px;padding:24px 0;text-align:center}:host-context(body.dark) val-action-card ::ng-deep .action-card,:host-context(html.ion-palette-dark) val-action-card ::ng-deep .action-card,:host-context([data-theme=\"dark\"]) val-action-card ::ng-deep .action-card{background:#ffffff0a}:host-context(body.dark) .about-section--reviews val-action-card ::ng-deep .action-card:hover,:host-context(html.ion-palette-dark) .about-section--reviews val-action-card ::ng-deep .action-card:hover,:host-context([data-theme=\"dark\"]) .about-section--reviews val-action-card ::ng-deep .action-card:hover{background:#ffffff14}:host-context(body.dark) .about-social .social-btn,:host-context(html.ion-palette-dark) .about-social .social-btn,:host-context([data-theme=\"dark\"]) .about-social .social-btn{--background: rgba(255, 255, 255, .04)}\n"], dependencies: [{ 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: IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: PillComponent, selector: "val-pill", inputs: ["preset", "props"], outputs: ["pillClick", "pillAction"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: ActionCardComponent, selector: "val-action-card, vds-action-card", inputs: ["props", "title", "titleKey", "description", "descriptionKey", "i18nNamespace", "icon", "size", "variant", "bordered", "borderColor", "backgroundColor", "shadowed", "disabled", "routerLink", "queryParams", "href", "badge", "showChevron", "token"], outputs: ["onClick"] }, { kind: "component", type: ContainerComponent, selector: "val-container", inputs: ["props"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AboutViewComponent, decorators: [{
             type: Component,