valtech-components 4.0.963 → 4.0.964

package/fesm2022/valtech-components.mjs

@@ -67,7 +67,7 @@ import fixWebmDuration from 'fix-webm-duration';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '4.0.963';
+const VERSION = '4.0.964';
 
 function evaluateValtechAccess(rule, context, features = {}, visitedFeatures = new Set()) {
     if (rule == null)
@@ -8770,7 +8770,7 @@ const DEFAULT_CONFIRM_BUTTON = {
 const DEFAULT_CANCEL_BUTTON = {
     text: 'Cancel',
     role: 'cancel',
-    color: 'medium',
+    color: 'dark',
 };
 
 /**
@@ -8795,7 +8795,7 @@ const DEFAULT_MODAL_CONFIRM_BUTTON = {
 const DEFAULT_MODAL_CANCEL_BUTTON = {
     text: 'Cancel',
     role: 'cancel',
-    color: 'medium',
+    color: 'dark',
     fill: 'clear',
 };
 
@@ -16116,7 +16116,7 @@ class NoticeComponent {
         </div>
       </aside>
     }
-  `, isInline: true, styles: [":host{display:block}.notice{display:flex;align-items:flex-start;gap:10px;margin:0;padding:12px 14px;border-radius:12px;border-left:3px solid transparent;font-size:.9rem;line-height:1.4;color:var(--ion-text-color, #000);background:rgba(var(--ion-color-secondary-rgb),.08);border-left-color:rgb(var(--ion-color-secondary-rgb))}.notice ion-icon{flex-shrink:0;font-size:1.1rem;margin-top:1px;color:var(--ion-color-secondary)}.notice__body{display:flex;flex-direction:column;gap:2px}.notice__title{font-weight:700;color:var(--ion-text-color, #000)}.tone-neutral{background:rgba(var(--ion-color-medium-rgb),.08);border-left-color:rgb(var(--ion-color-medium-rgb));color:var(--ion-color-medium)}.tone-neutral ion-icon{color:var(--ion-color-medium)}.tone-warning{background:rgba(var(--ion-color-warning-rgb),.12);border-left-color:rgb(var(--ion-color-warning-rgb))}.tone-warning ion-icon{color:var(--ion-color-warning-shade)}.tone-success{background:rgba(var(--ion-color-success-rgb),.1);border-left-color:rgb(var(--ion-color-success-rgb))}.tone-success ion-icon{color:var(--ion-color-success-shade)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
+  `, isInline: true, styles: [":host{display:block}.notice{display:flex;align-items:flex-start;gap:10px;margin:0;padding:12px 14px;border-radius:12px;border-left:3px solid transparent;font-size:.9rem;line-height:1.4;color:var(--ion-text-color, #000);background:rgba(var(--ion-color-secondary-rgb),.08);border-left-color:rgb(var(--ion-color-secondary-rgb))}.notice ion-icon{flex-shrink:0;font-size:1.1rem;margin-top:1px;color:var(--ion-color-secondary)}.notice__body{display:flex;flex-direction:column;gap:2px}.notice__title{font-weight:700;color:var(--ion-text-color, #000)}.tone-neutral{background:rgba(var(--ion-color-dark-rgb),.08);border-left-color:rgb(var(--ion-color-dark-rgb));color:var(--ion-color-dark)}.tone-neutral ion-icon{color:var(--ion-color-dark)}.tone-warning{background:rgba(var(--ion-color-warning-rgb),.12);border-left-color:rgb(var(--ion-color-warning-rgb))}.tone-warning ion-icon{color:var(--ion-color-warning-shade)}.tone-success{background:rgba(var(--ion-color-success-rgb),.1);border-left-color:rgb(var(--ion-color-success-rgb))}.tone-success ion-icon{color:var(--ion-color-success-shade)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NoticeComponent, decorators: [{
             type: Component,
@@ -16143,7 +16143,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </div>
       </aside>
     }
-  `, styles: [":host{display:block}.notice{display:flex;align-items:flex-start;gap:10px;margin:0;padding:12px 14px;border-radius:12px;border-left:3px solid transparent;font-size:.9rem;line-height:1.4;color:var(--ion-text-color, #000);background:rgba(var(--ion-color-secondary-rgb),.08);border-left-color:rgb(var(--ion-color-secondary-rgb))}.notice ion-icon{flex-shrink:0;font-size:1.1rem;margin-top:1px;color:var(--ion-color-secondary)}.notice__body{display:flex;flex-direction:column;gap:2px}.notice__title{font-weight:700;color:var(--ion-text-color, #000)}.tone-neutral{background:rgba(var(--ion-color-medium-rgb),.08);border-left-color:rgb(var(--ion-color-medium-rgb));color:var(--ion-color-medium)}.tone-neutral ion-icon{color:var(--ion-color-medium)}.tone-warning{background:rgba(var(--ion-color-warning-rgb),.12);border-left-color:rgb(var(--ion-color-warning-rgb))}.tone-warning ion-icon{color:var(--ion-color-warning-shade)}.tone-success{background:rgba(var(--ion-color-success-rgb),.1);border-left-color:rgb(var(--ion-color-success-rgb))}.tone-success ion-icon{color:var(--ion-color-success-shade)}\n"] }]
+  `, styles: [":host{display:block}.notice{display:flex;align-items:flex-start;gap:10px;margin:0;padding:12px 14px;border-radius:12px;border-left:3px solid transparent;font-size:.9rem;line-height:1.4;color:var(--ion-text-color, #000);background:rgba(var(--ion-color-secondary-rgb),.08);border-left-color:rgb(var(--ion-color-secondary-rgb))}.notice ion-icon{flex-shrink:0;font-size:1.1rem;margin-top:1px;color:var(--ion-color-secondary)}.notice__body{display:flex;flex-direction:column;gap:2px}.notice__title{font-weight:700;color:var(--ion-text-color, #000)}.tone-neutral{background:rgba(var(--ion-color-dark-rgb),.08);border-left-color:rgb(var(--ion-color-dark-rgb));color:var(--ion-color-dark)}.tone-neutral ion-icon{color:var(--ion-color-dark)}.tone-warning{background:rgba(var(--ion-color-warning-rgb),.12);border-left-color:rgb(var(--ion-color-warning-rgb))}.tone-warning ion-icon{color:var(--ion-color-warning-shade)}.tone-success{background:rgba(var(--ion-color-success-rgb),.1);border-left-color:rgb(var(--ion-color-success-rgb))}.tone-success ion-icon{color:var(--ion-color-success-shade)}\n"] }]
         }], propDecorators: { props: [{
                 type: Input
             }] } });
@@ -16694,7 +16694,7 @@ function resolveCopyrightTemplate(lang) {
  *   [props]="{
  *     companyName: 'My Company',
  *     rightsText: 'All rights reserved.',
- *     color: 'medium',
+ *     color: 'dark',
  *     align: 'left'
  *   }"
  * ></val-rights-footer>
@@ -19023,7 +19023,7 @@ class DateInputComponent {
         [id]="triggerId"
         class="action date-trigger"
         fill="outline"
-        color="medium"
+        color="dark"
         [class.is-placeholder]="!displayValue"
       >
         {{ displayValue || placeholderText }}
@@ -19066,7 +19066,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         [id]="triggerId"
         class="action date-trigger"
         fill="outline"
-        color="medium"
+        color="dark"
         [class.is-placeholder]="!displayValue"
       >
         {{ displayValue || placeholderText }}
@@ -19487,7 +19487,7 @@ class FieldOptionsEditorComponent {
               <ion-button
                 type="button"
                 fill="clear"
-                color="medium"
+                color="dark"
                 [disabled]="disabled"
                 [attr.aria-label]="resolved.removeOptionLabel"
                 (click)="removeOption(option.id)"
@@ -19572,7 +19572,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
               <ion-button
                 type="button"
                 fill="clear"
-                color="medium"
+                color="dark"
                 [disabled]="disabled"
                 [attr.aria-label]="resolved.removeOptionLabel"
                 (click)="removeOption(option.id)"
@@ -21084,7 +21084,7 @@ class NotesBoxComponent {
         ></val-text>
       </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;--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-dark: #9e9e9e;--ion-color-dark-rgb: 158, 158, 158;--ion-color-dark-contrast: #000000;--ion-color-dark-contrast-rgb: 0, 0, 0;--ion-color-dark-shade: #8b8b8b;--ion-color-dark-tint: #a8a8a8;--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}.val-notes-box{--notes-rgb: var(--ion-color-primary-rgb, 112, 38, 223);--notes-bg: rgba(var(--notes-rgb), .07);--notes-border: rgba(var(--notes-rgb), .18);--notes-accent: rgb(var(--notes-rgb));--notes-text: var(--ion-text-color, #0a0612);--notes-link: rgb(var(--notes-rgb));position:relative;display:block;padding:14px 18px 14px 20px;background:var(--notes-bg);border:1px solid var(--notes-border);border-left:4px solid var(--notes-accent);border-radius:10px;color:var(--notes-text);margin:0;line-height:1.55}.val-notes-box.is-rounded{border-radius:12px}.val-notes-box[data-color=primary]{--notes-rgb: var(--ion-color-primary-rgb)}.val-notes-box[data-color=secondary]{--notes-rgb: var(--ion-color-secondary-rgb)}.val-notes-box[data-color=tertiary]{--notes-rgb: var(--ion-color-tertiary-rgb)}.val-notes-box[data-color=success]{--notes-rgb: var(--ion-color-success-rgb)}.val-notes-box[data-color=warning]{--notes-rgb: var(--ion-color-warning-rgb)}.val-notes-box[data-color=danger]{--notes-rgb: var(--ion-color-danger-rgb)}.val-notes-box[data-color=medium],.val-notes-box[data-color=dark],.val-notes-box[data-color=light]{--notes-rgb: var(--ion-color-dark-rgb)}.val-notes-box__header{display:block;margin:0 0 6px;font-weight:700;font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--notes-accent);font-family:var(--ion-font-family, inherit)}.val-notes-box__body{display:block;color:var(--notes-text);font-size:.875rem;line-height:1.6;white-space:pre-line}.val-notes-box__body.size-small{font-size:.8125rem;line-height:1.55}.val-notes-box__body.size-large{font-size:.9375rem;line-height:1.6}.val-notes-box__body.size-xlarge{font-size:1rem;line-height:1.55}.val-notes-box__body ::ng-deep val-text{display:block;color:var(--notes-text)}.val-notes-box__body ::ng-deep val-text p{margin:0;color:inherit}.val-notes-box__body ::ng-deep val-text ion-text{color:var(--notes-text)!important}.val-notes-box__body ::ng-deep val-text strong,.val-notes-box__body ::ng-deep val-text b,.val-notes-box__body ::ng-deep .partial-bold{color:var(--notes-text);font-weight:700}.val-notes-box__body ::ng-deep val-text a{color:var(--notes-link);text-decoration:underline;text-underline-offset:2px;font-weight:600}.val-notes-box__body ::ng-deep val-text a:hover{opacity:.85}.val-notes-box.align-center,.val-notes-box.align-center .val-notes-box__header{text-align:center}.val-notes-box.align-right,.val-notes-box.align-right .val-notes-box__header{text-align:right}.val-notes-box.is-compact{display:inline-block;width:fit-content;max-width:100%;padding:5px 12px;border-left-width:1px;border-radius:999px;font-size:.75rem;line-height:1.3}.val-notes-box.is-compact .val-notes-box__header{display:inline;margin:0 6px 0 0;font-size:.6875rem;letter-spacing:.06em}.val-notes-box.is-compact .val-notes-box__body{display:inline;font-size:.75rem}.val-notes-box.is-compact ::ng-deep val-text{display:inline}.val-notes-box.is-compact ::ng-deep val-text p{display:inline}@media (prefers-color-scheme: dark){:host-context(body:not(.light)) .val-notes-box{--notes-bg: rgba(var(--notes-rgb), .16);--notes-border: rgba(var(--notes-rgb), .3)}}:host-context(body.dark) .val-notes-box,:host-context(.theme-dark) .val-notes-box,:host-context([data-theme=dark]) .val-notes-box{--notes-bg: rgba(var(--notes-rgb), .16);--notes-border: rgba(var(--notes-rgb), .3)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, 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;--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-dark: #9e9e9e;--ion-color-dark-rgb: 158, 158, 158;--ion-color-dark-contrast: #000000;--ion-color-dark-contrast-rgb: 0, 0, 0;--ion-color-dark-shade: #8b8b8b;--ion-color-dark-tint: #a8a8a8;--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}.val-notes-box{--notes-rgb: var(--ion-color-primary-rgb, 112, 38, 223);--notes-bg: rgba(var(--notes-rgb), .07);--notes-border: rgba(var(--notes-rgb), .18);--notes-accent: rgb(var(--notes-rgb));--notes-text: var(--ion-text-color, #0a0612);--notes-link: rgb(var(--notes-rgb));position:relative;display:block;padding:14px 18px 14px 20px;background:var(--notes-bg);border:1px solid var(--notes-border);border-left:4px solid var(--notes-accent);border-radius:10px;color:var(--notes-text);margin:0;line-height:1.55}.val-notes-box.is-rounded{border-radius:12px}.val-notes-box[data-color=primary]{--notes-rgb: var(--ion-color-primary-rgb)}.val-notes-box[data-color=secondary]{--notes-rgb: var(--ion-color-secondary-rgb)}.val-notes-box[data-color=tertiary]{--notes-rgb: var(--ion-color-tertiary-rgb)}.val-notes-box[data-color=success]{--notes-rgb: var(--ion-color-success-rgb)}.val-notes-box[data-color=warning]{--notes-rgb: var(--ion-color-warning-rgb)}.val-notes-box[data-color=danger]{--notes-rgb: var(--ion-color-danger-rgb)}.val-notes-box[data-color=dark],.val-notes-box[data-color=light]{--notes-rgb: var(--ion-color-dark-rgb)}.val-notes-box__header{display:block;margin:0 0 6px;font-weight:700;font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--notes-accent);font-family:var(--ion-font-family, inherit)}.val-notes-box__body{display:block;color:var(--notes-text);font-size:.875rem;line-height:1.6;white-space:pre-line}.val-notes-box__body.size-small{font-size:.8125rem;line-height:1.55}.val-notes-box__body.size-large{font-size:.9375rem;line-height:1.6}.val-notes-box__body.size-xlarge{font-size:1rem;line-height:1.55}.val-notes-box__body ::ng-deep val-text{display:block;color:var(--notes-text)}.val-notes-box__body ::ng-deep val-text p{margin:0;color:inherit}.val-notes-box__body ::ng-deep val-text ion-text{color:var(--notes-text)!important}.val-notes-box__body ::ng-deep val-text strong,.val-notes-box__body ::ng-deep val-text b,.val-notes-box__body ::ng-deep .partial-bold{color:var(--notes-text);font-weight:700}.val-notes-box__body ::ng-deep val-text a{color:var(--notes-link);text-decoration:underline;text-underline-offset:2px;font-weight:600}.val-notes-box__body ::ng-deep val-text a:hover{opacity:.85}.val-notes-box.align-center,.val-notes-box.align-center .val-notes-box__header{text-align:center}.val-notes-box.align-right,.val-notes-box.align-right .val-notes-box__header{text-align:right}.val-notes-box.is-compact{display:inline-block;width:fit-content;max-width:100%;padding:5px 12px;border-left-width:1px;border-radius:999px;font-size:.75rem;line-height:1.3}.val-notes-box.is-compact .val-notes-box__header{display:inline;margin:0 6px 0 0;font-size:.6875rem;letter-spacing:.06em}.val-notes-box.is-compact .val-notes-box__body{display:inline;font-size:.75rem}.val-notes-box.is-compact ::ng-deep val-text{display:inline}.val-notes-box.is-compact ::ng-deep val-text p{display:inline}@media (prefers-color-scheme: dark){:host-context(body:not(.light)) .val-notes-box{--notes-bg: rgba(var(--notes-rgb), .16);--notes-border: rgba(var(--notes-rgb), .3)}}:host-context(body.dark) .val-notes-box,:host-context(.theme-dark) .val-notes-box,:host-context([data-theme=dark]) .val-notes-box{--notes-bg: rgba(var(--notes-rgb), .16);--notes-border: rgba(var(--notes-rgb), .3)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NotesBoxComponent, decorators: [{
             type: Component,
@@ -21114,7 +21114,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         ></val-text>
       </div>
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, 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;--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-dark: #9e9e9e;--ion-color-dark-rgb: 158, 158, 158;--ion-color-dark-contrast: #000000;--ion-color-dark-contrast-rgb: 0, 0, 0;--ion-color-dark-shade: #8b8b8b;--ion-color-dark-tint: #a8a8a8;--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}.val-notes-box{--notes-rgb: var(--ion-color-primary-rgb, 112, 38, 223);--notes-bg: rgba(var(--notes-rgb), .07);--notes-border: rgba(var(--notes-rgb), .18);--notes-accent: rgb(var(--notes-rgb));--notes-text: var(--ion-text-color, #0a0612);--notes-link: rgb(var(--notes-rgb));position:relative;display:block;padding:14px 18px 14px 20px;background:var(--notes-bg);border:1px solid var(--notes-border);border-left:4px solid var(--notes-accent);border-radius:10px;color:var(--notes-text);margin:0;line-height:1.55}.val-notes-box.is-rounded{border-radius:12px}.val-notes-box[data-color=primary]{--notes-rgb: var(--ion-color-primary-rgb)}.val-notes-box[data-color=secondary]{--notes-rgb: var(--ion-color-secondary-rgb)}.val-notes-box[data-color=tertiary]{--notes-rgb: var(--ion-color-tertiary-rgb)}.val-notes-box[data-color=success]{--notes-rgb: var(--ion-color-success-rgb)}.val-notes-box[data-color=warning]{--notes-rgb: var(--ion-color-warning-rgb)}.val-notes-box[data-color=danger]{--notes-rgb: var(--ion-color-danger-rgb)}.val-notes-box[data-color=medium],.val-notes-box[data-color=dark],.val-notes-box[data-color=light]{--notes-rgb: var(--ion-color-dark-rgb)}.val-notes-box__header{display:block;margin:0 0 6px;font-weight:700;font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--notes-accent);font-family:var(--ion-font-family, inherit)}.val-notes-box__body{display:block;color:var(--notes-text);font-size:.875rem;line-height:1.6;white-space:pre-line}.val-notes-box__body.size-small{font-size:.8125rem;line-height:1.55}.val-notes-box__body.size-large{font-size:.9375rem;line-height:1.6}.val-notes-box__body.size-xlarge{font-size:1rem;line-height:1.55}.val-notes-box__body ::ng-deep val-text{display:block;color:var(--notes-text)}.val-notes-box__body ::ng-deep val-text p{margin:0;color:inherit}.val-notes-box__body ::ng-deep val-text ion-text{color:var(--notes-text)!important}.val-notes-box__body ::ng-deep val-text strong,.val-notes-box__body ::ng-deep val-text b,.val-notes-box__body ::ng-deep .partial-bold{color:var(--notes-text);font-weight:700}.val-notes-box__body ::ng-deep val-text a{color:var(--notes-link);text-decoration:underline;text-underline-offset:2px;font-weight:600}.val-notes-box__body ::ng-deep val-text a:hover{opacity:.85}.val-notes-box.align-center,.val-notes-box.align-center .val-notes-box__header{text-align:center}.val-notes-box.align-right,.val-notes-box.align-right .val-notes-box__header{text-align:right}.val-notes-box.is-compact{display:inline-block;width:fit-content;max-width:100%;padding:5px 12px;border-left-width:1px;border-radius:999px;font-size:.75rem;line-height:1.3}.val-notes-box.is-compact .val-notes-box__header{display:inline;margin:0 6px 0 0;font-size:.6875rem;letter-spacing:.06em}.val-notes-box.is-compact .val-notes-box__body{display:inline;font-size:.75rem}.val-notes-box.is-compact ::ng-deep val-text{display:inline}.val-notes-box.is-compact ::ng-deep val-text p{display:inline}@media (prefers-color-scheme: dark){:host-context(body:not(.light)) .val-notes-box{--notes-bg: rgba(var(--notes-rgb), .16);--notes-border: rgba(var(--notes-rgb), .3)}}:host-context(body.dark) .val-notes-box,:host-context(.theme-dark) .val-notes-box,:host-context([data-theme=dark]) .val-notes-box{--notes-bg: rgba(var(--notes-rgb), .16);--notes-border: rgba(var(--notes-rgb), .3)}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, 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;--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-dark: #9e9e9e;--ion-color-dark-rgb: 158, 158, 158;--ion-color-dark-contrast: #000000;--ion-color-dark-contrast-rgb: 0, 0, 0;--ion-color-dark-shade: #8b8b8b;--ion-color-dark-tint: #a8a8a8;--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}.val-notes-box{--notes-rgb: var(--ion-color-primary-rgb, 112, 38, 223);--notes-bg: rgba(var(--notes-rgb), .07);--notes-border: rgba(var(--notes-rgb), .18);--notes-accent: rgb(var(--notes-rgb));--notes-text: var(--ion-text-color, #0a0612);--notes-link: rgb(var(--notes-rgb));position:relative;display:block;padding:14px 18px 14px 20px;background:var(--notes-bg);border:1px solid var(--notes-border);border-left:4px solid var(--notes-accent);border-radius:10px;color:var(--notes-text);margin:0;line-height:1.55}.val-notes-box.is-rounded{border-radius:12px}.val-notes-box[data-color=primary]{--notes-rgb: var(--ion-color-primary-rgb)}.val-notes-box[data-color=secondary]{--notes-rgb: var(--ion-color-secondary-rgb)}.val-notes-box[data-color=tertiary]{--notes-rgb: var(--ion-color-tertiary-rgb)}.val-notes-box[data-color=success]{--notes-rgb: var(--ion-color-success-rgb)}.val-notes-box[data-color=warning]{--notes-rgb: var(--ion-color-warning-rgb)}.val-notes-box[data-color=danger]{--notes-rgb: var(--ion-color-danger-rgb)}.val-notes-box[data-color=dark],.val-notes-box[data-color=light]{--notes-rgb: var(--ion-color-dark-rgb)}.val-notes-box__header{display:block;margin:0 0 6px;font-weight:700;font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--notes-accent);font-family:var(--ion-font-family, inherit)}.val-notes-box__body{display:block;color:var(--notes-text);font-size:.875rem;line-height:1.6;white-space:pre-line}.val-notes-box__body.size-small{font-size:.8125rem;line-height:1.55}.val-notes-box__body.size-large{font-size:.9375rem;line-height:1.6}.val-notes-box__body.size-xlarge{font-size:1rem;line-height:1.55}.val-notes-box__body ::ng-deep val-text{display:block;color:var(--notes-text)}.val-notes-box__body ::ng-deep val-text p{margin:0;color:inherit}.val-notes-box__body ::ng-deep val-text ion-text{color:var(--notes-text)!important}.val-notes-box__body ::ng-deep val-text strong,.val-notes-box__body ::ng-deep val-text b,.val-notes-box__body ::ng-deep .partial-bold{color:var(--notes-text);font-weight:700}.val-notes-box__body ::ng-deep val-text a{color:var(--notes-link);text-decoration:underline;text-underline-offset:2px;font-weight:600}.val-notes-box__body ::ng-deep val-text a:hover{opacity:.85}.val-notes-box.align-center,.val-notes-box.align-center .val-notes-box__header{text-align:center}.val-notes-box.align-right,.val-notes-box.align-right .val-notes-box__header{text-align:right}.val-notes-box.is-compact{display:inline-block;width:fit-content;max-width:100%;padding:5px 12px;border-left-width:1px;border-radius:999px;font-size:.75rem;line-height:1.3}.val-notes-box.is-compact .val-notes-box__header{display:inline;margin:0 6px 0 0;font-size:.6875rem;letter-spacing:.06em}.val-notes-box.is-compact .val-notes-box__body{display:inline;font-size:.75rem}.val-notes-box.is-compact ::ng-deep val-text{display:inline}.val-notes-box.is-compact ::ng-deep val-text p{display:inline}@media (prefers-color-scheme: dark){:host-context(body:not(.light)) .val-notes-box{--notes-bg: rgba(var(--notes-rgb), .16);--notes-border: rgba(var(--notes-rgb), .3)}}:host-context(body.dark) .val-notes-box,:host-context(.theme-dark) .val-notes-box,:host-context([data-theme=dark]) .val-notes-box{--notes-bg: rgba(var(--notes-rgb), .16);--notes-border: rgba(var(--notes-rgb), .3)}\n"] }]
         }], propDecorators: { props: [{
                 type: Input
             }] } });
@@ -21687,7 +21687,7 @@ class ProgressStatusComponent {
       </div>
       <div class="subtitle-container">
         <div class="subtitle" [class.blink]="blinking">
-          <val-text [props]="{ content: Content, color: 'medium', bold: false, size: props.size }"></val-text>
+          <val-text [props]="{ content: Content, color: 'dark', bold: false, size: props.size }"></val-text>
         </div>
       </div>
     </div>
@@ -21721,7 +21721,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       </div>
       <div class="subtitle-container">
         <div class="subtitle" [class.blink]="blinking">
-          <val-text [props]="{ content: Content, color: 'medium', bold: false, size: props.size }"></val-text>
+          <val-text [props]="{ content: Content, color: 'dark', bold: false, size: props.size }"></val-text>
         </div>
       </div>
     </div>
@@ -21858,7 +21858,7 @@ class OptionCardsComponent {
             @if (!item.disabled) {
               <ion-radio [value]="item.value" />
             } @else if (item.badge) {
-              <ion-chip color="medium" [disabled]="true">
+              <ion-chip color="dark" [disabled]="true">
                 <ion-label>{{ item.badge }}</ion-label>
               </ion-chip>
             }
@@ -21889,7 +21889,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             @if (!item.disabled) {
               <ion-radio [value]="item.value" />
             } @else if (item.badge) {
-              <ion-chip color="medium" [disabled]="true">
+              <ion-chip color="dark" [disabled]="true">
                 <ion-label>{{ item.badge }}</ion-label>
               </ion-chip>
             }
@@ -26854,7 +26854,7 @@ class MultiSelectSearchComponent {
             <ion-button
               fill="clear"
               size="small"
-              color="medium"
+              color="dark"
               (click)="clearAll()"
               [disabled]="selectedItems.length === 0"
             >
@@ -26918,7 +26918,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             <ion-button
               fill="clear"
               size="small"
-              color="medium"
+              color="dark"
               (click)="clearAll()"
               [disabled]="selectedItems.length === 0"
             >
@@ -30902,7 +30902,7 @@ class FooterLinksComponent {
         <ion-col size="12">
           <val-divider
             *ngIf="props.divider !== false"
-            [props]="props.divider || { size: 'small', color: 'medium', fill: 'solid' }"
+            [props]="props.divider || { size: 'small', color: 'dark', fill: 'solid' }"
           />
         </ion-col>
         <ion-col size-xs="12" size-md="6">
@@ -31079,7 +31079,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         <ion-col size="12">
           <val-divider
             *ngIf="props.divider !== false"
-            [props]="props.divider || { size: 'small', color: 'medium', fill: 'solid' }"
+            [props]="props.divider || { size: 'small', color: 'dark', fill: 'solid' }"
           />
         </ion-col>
         <ion-col size-xs="12" size-md="6">
@@ -32640,7 +32640,7 @@ class UpdateBannerComponent {
                 content: t().message,
                 size: 'small',
                 bold: false,
-                color: 'medium',
+                color: 'dark',
               }"
             />
           </div>
@@ -32717,7 +32717,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 content: t().message,
                 size: 'small',
                 bold: false,
-                color: 'medium',
+                color: 'dark',
               }"
             />
           </div>
@@ -35220,7 +35220,7 @@ class PermissionSelectorComponent {
       </div>
     }
     @if (groups().length === 0) {
-      <val-text [props]="{ content: tt('empty'), size: 'medium', color: 'medium', bold: false }" />
+      <val-text [props]="{ content: tt('empty'), size: 'medium', color: 'dark', bold: false }" />
     } @else {
       <div class="perm-selector">
         @for (g of groups(); track g.resource) {
@@ -35269,7 +35269,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       </div>
     }
     @if (groups().length === 0) {
-      <val-text [props]="{ content: tt('empty'), size: 'medium', color: 'medium', bold: false }" />
+      <val-text [props]="{ content: tt('empty'), size: 'medium', color: 'dark', bold: false }" />
     } @else {
       <div class="perm-selector">
         @for (g of groups(); track g.resource) {
@@ -35722,7 +35722,7 @@ class LinkedProvidersComponent {
             @if (props.allowUnlink !== false && canUnlink()) {
               <ion-button
                 fill="clear"
-                color="medium"
+                color="dark"
                 slot="end"
                 (click)="confirmUnlink(provider.provider)"
                 class="unlink-btn"
@@ -35808,7 +35808,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             @if (props.allowUnlink !== false && canUnlink()) {
               <ion-button
                 fill="clear"
-                color="medium"
+                color="dark"
                 slot="end"
                 (click)="confirmUnlink(provider.provider)"
                 class="unlink-btn"
@@ -36174,7 +36174,7 @@ class DatePickerComponent {
         [id]="triggerId"
         class="vdp__trigger"
         fill="outline"
-        color="medium"
+        color="dark"
         expand="block"
         [class.is-placeholder]="!displayValue"
         (click)="sheetOpen.set(true)"
@@ -36221,7 +36221,7 @@ class DatePickerComponent {
           <div #cal class="vdp-sheet__cal" [class.is-ready]="calReady()"></div>
 
           @if (props.clearable && displayValue) {
-            <ion-button expand="block" fill="clear" color="medium" (click)="clear()">
+            <ion-button expand="block" fill="clear" color="dark" (click)="clear()">
               {{ t('clear') }}
             </ion-button>
           }
@@ -36264,7 +36264,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         [id]="triggerId"
         class="vdp__trigger"
         fill="outline"
-        color="medium"
+        color="dark"
         expand="block"
         [class.is-placeholder]="!displayValue"
         (click)="sheetOpen.set(true)"
@@ -36311,7 +36311,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           <div #cal class="vdp-sheet__cal" [class.is-ready]="calReady()"></div>
 
           @if (props.clearable && displayValue) {
-            <ion-button expand="block" fill="clear" color="medium" (click)="clear()">
+            <ion-button expand="block" fill="clear" color="dark" (click)="clear()">
               {{ t('clear') }}
             </ion-button>
           }
@@ -37631,7 +37631,7 @@ class FormComponent {
               </div>
             }
             @if (props.showDividers !== false) {
-              <val-divider [props]="{ fill: 'solid', size: 'medium', color: 'medium' }"></val-divider>
+              <val-divider [props]="{ fill: 'solid', size: 'medium', color: 'dark' }"></val-divider>
             }
             <ng-content></ng-content>
           </div>
@@ -37806,7 +37806,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
               </div>
             }
             @if (props.showDividers !== false) {
-              <val-divider [props]="{ fill: 'solid', size: 'medium', color: 'medium' }"></val-divider>
+              <val-divider [props]="{ fill: 'solid', size: 'medium', color: 'dark' }"></val-divider>
             }
             <ng-content></ng-content>
           </div>
@@ -37939,7 +37939,7 @@ class EmptyStateComponent {
         <val-text
           [props]="{
             size: 'large',
-            color: 'medium',
+            color: 'dark',
             bold: false,
             content: desc,
           }"
@@ -37989,7 +37989,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         <val-text
           [props]="{
             size: 'large',
-            color: 'medium',
+            color: 'dark',
             bold: false,
             content: desc,
           }"
@@ -38344,7 +38344,7 @@ class AccessRequestViewComponent {
       <section class="access-request">
         <span class="access-request__eyebrow">{{ t('eyebrow') }}</span>
         <val-display [props]="{ content: t('title'), size: 'small', color: 'dark' }" />
-        <val-text [props]="{ content: t('body'), color: 'medium', size: 'medium', bold: false }" />
+        <val-text [props]="{ content: t('body'), color: 'dark', size: 'medium', bold: false }" />
 
         <val-form [props]="form()" (onSubmit)="submit($event)" />
       </section>
@@ -38360,7 +38360,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       <section class="access-request">
         <span class="access-request__eyebrow">{{ t('eyebrow') }}</span>
         <val-display [props]="{ content: t('title'), size: 'small', color: 'dark' }" />
-        <val-text [props]="{ content: t('body'), color: 'medium', size: 'medium', bold: false }" />
+        <val-text [props]="{ content: t('body'), color: 'dark', size: 'medium', bold: false }" />
 
         <val-form [props]="form()" (onSubmit)="submit($event)" />
       </section>
@@ -38507,7 +38507,7 @@ class ImageCropComponent {
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="start">
-          <ion-button (click)="cancel.emit()" color="medium">
+          <ion-button (click)="cancel.emit()" color="dark">
             {{ cancelText() }}
           </ion-button>
         </ion-buttons>
@@ -38547,7 +38547,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="start">
-          <ion-button (click)="cancel.emit()" color="medium">
+          <ion-button (click)="cancel.emit()" color="dark">
             {{ cancelText() }}
           </ion-button>
         </ion-buttons>
@@ -42113,7 +42113,7 @@ class RequestFormComponent {
       </val-form>
 
       @if (props.cancelButtonText) {
-        <ion-button fill="outline" color="medium" expand="block" class="cancel-button" (click)="onCancelClick()">
+        <ion-button fill="outline" color="dark" expand="block" class="cancel-button" (click)="onCancelClick()">
           {{ props.cancelButtonText }}
         </ion-button>
       }
@@ -42141,7 +42141,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       </val-form>
 
       @if (props.cancelButtonText) {
-        <ion-button fill="outline" color="medium" expand="block" class="cancel-button" (click)="onCancelClick()">
+        <ion-button fill="outline" color="dark" expand="block" class="cancel-button" (click)="onCancelClick()">
           {{ props.cancelButtonText }}
         </ion-button>
       }
@@ -42494,7 +42494,7 @@ class RequestReviewPanelComponent {
                   [props]="{
                     token: 'reject',
                     text: t('reject'),
-                    color: 'medium',
+                    color: 'dark',
                     fill: 'outline',
                     shape: 'round',
                     size: 'small',
@@ -42656,7 +42656,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                   [props]="{
                     token: 'reject',
                     text: t('reject'),
-                    color: 'medium',
+                    color: 'dark',
                     fill: 'outline',
                     shape: 'round',
                     size: 'small',
@@ -43115,7 +43115,7 @@ class CookieSettingsComponent {
       </div>
 
       <div class="vcs__actions">
-        <ion-button fill="outline" size="small" color="medium" (click)="onRejectAll()">{{ t('rejectAll') }}</ion-button>
+        <ion-button fill="outline" size="small" color="dark" (click)="onRejectAll()">{{ t('rejectAll') }}</ion-button>
 
         <ion-button fill="outline" size="small" color="dark" (click)="onSave()">{{ t('save') }}</ion-button>
 
@@ -43161,7 +43161,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       </div>
 
       <div class="vcs__actions">
-        <ion-button fill="outline" size="small" color="medium" (click)="onRejectAll()">{{ t('rejectAll') }}</ion-button>
+        <ion-button fill="outline" size="small" color="dark" (click)="onRejectAll()">{{ t('rejectAll') }}</ion-button>
 
         <ion-button fill="outline" size="small" color="dark" (click)="onSave()">{{ t('save') }}</ion-button>
 
@@ -45012,7 +45012,7 @@ class MfaModalComponent {
         this.toast.show({ message, duration: 3500 });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MfaModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MfaModalComponent, isStandalone: true, selector: "val-mfa-modal", inputs: { isOpen: "isOpen", prefillCode: "prefillCode" }, outputs: { changed: "changed", enabledViaDeeplink: "enabledViaDeeplink", dismissed: "dismissed" }, ngImport: i0, template: "<ion-modal [isOpen]=\"isOpen\" (didDismiss)=\"close()\" cssClass=\"val-modal-adaptive\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" shape=\"round\" (click)=\"close()\">\n            <strong>{{ t('close') }}</strong>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n\n    <ion-content class=\"ion-padding\">\n      <section class=\"mfa-modal\">\n        <val-display [props]=\"{ content: t('mfaManageTitle'), size: 'small', color: 'dark' }\" />\n\n        @switch (step()) { @case ('loading') {\n        <div class=\"mfa-loading\">\n          <ion-spinner name=\"crescent\"></ion-spinner>\n        </div>\n        } @case ('status') { @if (mfaEnabled()) {\n        <p class=\"mfa-status mfa-status--on\">{{ t('mfaEnabledLabel') }} \u00B7 {{ methodLabel(mfaMethod()) }}</p>\n\n        @if (mfaMethod() === 'TOTP') {\n        <div class=\"mfa-block\">\n          <val-title [props]=\"{ size: 'small', color: 'dark', bold: true, content: t('mfaBackupCodesTitle') }\" />\n          <val-text\n            [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaBackupCodesAvailable') + ': ' + backupCodesCount() }\"\n          />\n\n          @if (regeneratedCodes(); as codes) {\n          <div class=\"mfa-alert\">\n            <ion-icon name=\"information-circle-outline\"></ion-icon>\n            <p>{{ t('mfaBackupCodesSaveWarning') }} {{ t('mfaBackupCodesExplain') }}</p>\n          </div>\n          <div class=\"mfa-codes\">\n            @for (code of codes; track code) {\n            <code class=\"mfa-code\">{{ code }}</code>\n            }\n          </div>\n          <ion-button expand=\"block\" color=\"dark\" fill=\"outline\" shape=\"round\" (click)=\"copyCodes(codes)\">\n            {{ t('mfaCopyCodes') }}\n          </ion-button>\n          } @else { @if (backupCodesCount() < 3) {\n          <div class=\"mfa-alert\">\n            <ion-icon name=\"information-circle-outline\"></ion-icon>\n            <p>{{ t('mfaBackupCodesLow') }}</p>\n          </div>\n          }\n          <ion-button\n            expand=\"block\"\n            color=\"dark\"\n            fill=\"outline\"\n            shape=\"round\"\n            [disabled]=\"working()\"\n            (click)=\"regenerateBackupCodes()\"\n          >\n            @if (working()) {\n            <ion-spinner name=\"crescent\"></ion-spinner>\n            } @else { {{ t('mfaRegenerateCodes') }} }\n          </ion-button>\n          }\n        </div>\n        }\n\n        <ion-button expand=\"block\" color=\"dark\" fill=\"outline\" shape=\"round\" (click)=\"goToDisable()\">\n          {{ t('mfaDisableButton') }}\n        </ion-button>\n        } @else {\n        <p class=\"mfa-status mfa-status--off\">{{ t('mfaDisabledLabel') }}</p>\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisabledHint') }\" />\n        <ion-button expand=\"block\" shape=\"round\" (click)=\"goToMethodSelect()\"> {{ t('mfaEnableButton') }} </ion-button>\n        } } @case ('method-select') {\n        <val-title [props]=\"{ content: t('mfaEnableTitle'), size: 'large', color: 'dark', bold: false }\" />\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaMethodPrompt') }\" />\n\n        <div class=\"mfa-method-list\" role=\"radiogroup\">\n          <button\n            type=\"button\"\n            class=\"mfa-method-card\"\n            [class.mfa-method-card--active]=\"selectedMethod() === 'TOTP'\"\n            (click)=\"selectedMethod.set('TOTP')\"\n            role=\"radio\"\n            [attr.aria-checked]=\"selectedMethod() === 'TOTP'\"\n          >\n            <span class=\"mfa-method-card__dot\"></span>\n            <span class=\"mfa-method-card__body\">\n              <strong>{{ t('mfaMethodTotp') }}</strong>\n              <span>{{ t('mfaMethodTotpHint') }}</span>\n            </span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"mfa-method-card\"\n            [class.mfa-method-card--active]=\"selectedMethod() === 'EMAIL'\"\n            (click)=\"selectedMethod.set('EMAIL')\"\n            role=\"radio\"\n            [attr.aria-checked]=\"selectedMethod() === 'EMAIL'\"\n          >\n            <span class=\"mfa-method-card__dot\"></span>\n            <span class=\"mfa-method-card__body\">\n              <strong>{{ t('mfaMethodEmail') }}</strong>\n              <span>{{ t('mfaMethodEmailHint') }}</span>\n            </span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"mfa-method-card\"\n            [class.mfa-method-card--active]=\"selectedMethod() === 'SMS'\"\n            (click)=\"selectedMethod.set('SMS')\"\n            role=\"radio\"\n            [attr.aria-checked]=\"selectedMethod() === 'SMS'\"\n          >\n            <span class=\"mfa-method-card__dot\"></span>\n            <span class=\"mfa-method-card__body\">\n              <strong>{{ t('mfaMethodSms') }}</strong>\n              <span>{{ t('mfaMethodSmsHint') }}</span>\n            </span>\n          </button>\n        </div>\n\n        @if (selectedMethod() === 'SMS' && !userPhone()) {\n        <val-phone-input\n          [props]=\"{ control: phoneControl, label: t('mfaPhoneLabel'), placeholder: '912345678', defaultCountry: 'CL' }\"\n        />\n        @if (phoneControl.invalid && phoneControl.touched) {\n        <p class=\"mfa-error\">{{ t('mfaPhoneInvalid') }}</p>\n        } } @if (selectedMethod() === 'SMS' && userPhone(); as phone) {\n        <val-text\n          [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaPhoneRegistered') + ': ' + phone }\"\n        />\n        }\n\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"proceedWithMethod()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaContinue') }} }\n        </ion-button>\n        <ion-button expand=\"block\" fill=\"outline\" color=\"dark\" shape=\"round\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } @case ('totp-setup') {\n        <val-title [props]=\"{ content: t('mfaTotpSetupTitle'), size: 'large', color: '', bold: false }\" />\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaTotpStep1') }\" />\n\n        @if (totpQr(); as qr) {\n        <div class=\"mfa-qr\">\n          <val-qr-code [props]=\"{ qr: qr }\" />\n        </div>\n        } @if (totpSetup(); as setup) {\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaTotpManualEntry') }\" />\n        <div class=\"mfa-secret-row\">\n          <code class=\"mfa-secret\">{{ setup.secret }}</code>\n          <ion-button fill=\"clear\" size=\"small\" (click)=\"copySecret(setup.secret)\" [attr.aria-label]=\"t('copy')\">\n            @if (copiedSecret()) {\n            <ion-icon name=\"checkmark-outline\"></ion-icon>\n            } @else {\n            <ion-icon name=\"copy-outline\"></ion-icon>\n            }\n          </ion-button>\n        </div>\n\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaTotpStep2') }\" />\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"verifyTotp()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaTotpVerify') }} }\n        </ion-button>\n\n        <div class=\"mfa-backup\">\n          <val-title [props]=\"{ size: 'small', color: 'dark', bold: true, content: t('mfaBackupCodesTitle') }\" />\n          <div class=\"mfa-alert\">\n            <ion-icon name=\"information-circle-outline\"></ion-icon>\n            <p>{{ t('mfaBackupCodesSaveWarning') }} {{ t('mfaBackupCodesExplain') }}</p>\n          </div>\n          <div class=\"mfa-codes\">\n            @for (code of setup.backupCodes; track code) {\n            <code class=\"mfa-code\">{{ code }}</code>\n            }\n          </div>\n          <ion-button expand=\"block\" color=\"dark\" fill=\"outline\" shape=\"round\" (click)=\"copyCodes(setup.backupCodes)\">\n            {{ t('mfaCopyCodes') }}\n          </ion-button>\n        </div>\n        }\n\n        <ion-button expand=\"block\" fill=\"outline\" color=\"dark\" shape=\"round\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } @case ('code-confirm') {\n        <val-title [props]=\"{ content: t('mfaConfirmTitle'), size: 'large', color: '', bold: false }\" />\n        <val-text\n          [props]=\"{ size: 'medium', color: 'dark', bold: false, content: selectedMethod() === 'EMAIL' ? t('mfaConfirmPromptEmail') : t('mfaConfirmPromptSms') }\"\n        />\n\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"confirmCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaConfirmButton') }} }\n        </ion-button>\n\n        <p class=\"mfa-resend\">\n          {{ t('mfaNoCode') }} @if (resendCooldown() > 0) {\n          <span>{{ t('mfaResendIn') }} {{ resendCooldown() }}s</span>\n          } @else {\n          <a (click)=\"resendCode()\">{{ t('mfaResend') }}</a>\n          }\n        </p>\n\n        <ion-button expand=\"block\" fill=\"outline\" color=\"dark\" shape=\"round\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } @case ('disable') { @if (hasPassword()) {\n        <val-form [props]=\"disableFormProps()\" (onSubmit)=\"onDisableSubmit($event)\" />\n        } @else if (mfaMethod() === 'TOTP') {\n        <val-title [props]=\"{ content: t('mfaDisableTitle'), size: 'large', color: '', bold: false }\" />\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableTotpPrompt') }\" />\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"disableWithMfaCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaDisableButton') }} }\n        </ion-button>\n        } @else if (mfaMethod() === 'EMAIL' || mfaMethod() === 'SMS') {\n        <val-title [props]=\"{ content: t('mfaDisableTitle'), size: 'large', color: '', bold: false }\" />\n        @if (!disableCodeSent()) {\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableCodePrompt') }\" />\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"sendDisableCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaDisableSendCode') }} }\n        </ion-button>\n        } @else {\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableCodePrompt') }\" />\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"disableWithMfaCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaDisableButton') }} }\n        </ion-button>\n        <ion-button\n          expand=\"block\"\n          fill=\"clear\"\n          color=\"medium\"\n          shape=\"round\"\n          [disabled]=\"working()\"\n          (click)=\"sendDisableCode()\"\n        >\n          {{ t('mfaDisableResendCode') }}\n        </ion-button>\n        } } @else {\n        <val-title [props]=\"{ content: t('mfaDisableTitle'), size: 'large', color: '', bold: false }\" />\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableNeedsPassword') }\" />\n        }\n        <ion-button expand=\"block\" fill=\"outline\" color=\"dark\" shape=\"round\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".mfa-modal{display:flex;flex-direction:column;gap:14px;padding-top:4px}.mfa-loading{display:flex;justify-content:center;padding:40px 0}.mfa-status{display:inline-flex;align-items:center;width:fit-content;padding:4px 10px;border-radius:999px;font-size:.8125rem;font-weight:600;margin:0}.mfa-status--on{color:var(--ion-color-success-shade);background:rgba(var(--ion-color-success-rgb),.12)}.mfa-status--off{color:var(--ion-color-dark-shade);background:var(--ion-color-light)}.mfa-secret-row{display:flex;align-items:center;gap:8px}.mfa-secret-row .mfa-secret{flex:1;margin:0}.mfa-secret-row ion-button{flex-shrink:0;--color: var(--ion-color-dark);margin:0}.mfa-error{color:var(--ion-color-danger);font-size:.8125rem;margin:4px 0 0}.mfa-block,.mfa-backup{display:flex;flex-direction:column;gap:12px}.mfa-block{padding:16px;border-radius:14px;background:var(--ion-color-light)}.mfa-alert{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:10px;background:var(--ion-color-light);border-left:3px solid var(--ion-color-primary)}.mfa-alert ion-icon{font-size:1.25rem;color:var(--ion-color-primary);flex-shrink:0;margin-top:1px}.mfa-alert p{margin:0;font-size:.8125rem;line-height:1.45;color:var(--ion-color-dark)}.mfa-qr{display:flex;justify-content:center;padding:8px 0}.mfa-secret{display:block;padding:10px 12px;border-radius:8px;background:var(--ion-color-light);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9375rem;letter-spacing:.04em;word-break:break-all;text-align:center}.mfa-pin{display:flex;justify-content:center;padding:8px 0}.mfa-codes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:12px;border-radius:12px;background:var(--ion-color-light)}.mfa-code{padding:8px;border-radius:6px;background:var(--ion-background-color, #fff);color:var(--ion-color-dark);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8125rem;text-align:center}.mfa-method-list{display:flex;flex-direction:column;gap:8px}.mfa-method-card{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:12px;border:1.5px solid var(--ion-border-color, rgba(var(--ion-color-dark-rgb), .14));background:transparent;cursor:pointer;text-align:left;width:100%;transition:border-color .15s ease,background .15s ease}.mfa-method-card--active{border-color:var(--ion-color-primary);background:rgba(var(--ion-color-primary-rgb),.07)}.mfa-method-card__dot{flex-shrink:0;width:18px;height:18px;border-radius:50%;border:2px solid var(--ion-color-dark);margin-top:2px;transition:border-color .15s,box-shadow .15s}.mfa-method-card--active .mfa-method-card__dot{border-color:var(--ion-color-primary);box-shadow:inset 0 0 0 4px var(--ion-color-primary)}.mfa-method-card__body{display:flex;flex-direction:column;gap:3px}.mfa-method-card__body strong{font-size:.9375rem;font-weight:600;color:var(--ion-color-dark)}.mfa-method-card__body span{font-size:.8125rem;color:var(--ion-color-dark);line-height:1.4}.mfa-resend{text-align:center;font-size:.875rem;color:var(--ion-color-dark);margin:4px 0}.mfa-resend a{color:var(--ion-color-primary);cursor:pointer;font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onValueChange", "onInvalid", "onSelectChange"] }, { kind: "component", type: QrCodeComponent, selector: "val-qr-code", inputs: ["props"], outputs: ["actionComplete", "imageLoad", "imageError"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: PinInputComponent, selector: "val-pin-input", inputs: ["props"] }, { kind: "component", type: PhoneInputComponent, selector: "val-phone-input", inputs: ["preset", "props"], outputs: ["phoneChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MfaModalComponent, isStandalone: true, selector: "val-mfa-modal", inputs: { isOpen: "isOpen", prefillCode: "prefillCode" }, outputs: { changed: "changed", enabledViaDeeplink: "enabledViaDeeplink", dismissed: "dismissed" }, ngImport: i0, template: "<ion-modal [isOpen]=\"isOpen\" (didDismiss)=\"close()\" cssClass=\"val-modal-adaptive\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" shape=\"round\" (click)=\"close()\">\n            <strong>{{ t('close') }}</strong>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n\n    <ion-content class=\"ion-padding\">\n      <section class=\"mfa-modal\">\n        <val-display [props]=\"{ content: t('mfaManageTitle'), size: 'small', color: 'dark' }\" />\n\n        @switch (step()) { @case ('loading') {\n        <div class=\"mfa-loading\">\n          <ion-spinner name=\"crescent\"></ion-spinner>\n        </div>\n        } @case ('status') { @if (mfaEnabled()) {\n        <p class=\"mfa-status mfa-status--on\">{{ t('mfaEnabledLabel') }} \u00B7 {{ methodLabel(mfaMethod()) }}</p>\n\n        @if (mfaMethod() === 'TOTP') {\n        <div class=\"mfa-block\">\n          <val-title [props]=\"{ size: 'small', color: 'dark', bold: true, content: t('mfaBackupCodesTitle') }\" />\n          <val-text\n            [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaBackupCodesAvailable') + ': ' + backupCodesCount() }\"\n          />\n\n          @if (regeneratedCodes(); as codes) {\n          <div class=\"mfa-alert\">\n            <ion-icon name=\"information-circle-outline\"></ion-icon>\n            <p>{{ t('mfaBackupCodesSaveWarning') }} {{ t('mfaBackupCodesExplain') }}</p>\n          </div>\n          <div class=\"mfa-codes\">\n            @for (code of codes; track code) {\n            <code class=\"mfa-code\">{{ code }}</code>\n            }\n          </div>\n          <ion-button expand=\"block\" color=\"dark\" fill=\"outline\" shape=\"round\" (click)=\"copyCodes(codes)\">\n            {{ t('mfaCopyCodes') }}\n          </ion-button>\n          } @else { @if (backupCodesCount() < 3) {\n          <div class=\"mfa-alert\">\n            <ion-icon name=\"information-circle-outline\"></ion-icon>\n            <p>{{ t('mfaBackupCodesLow') }}</p>\n          </div>\n          }\n          <ion-button\n            expand=\"block\"\n            color=\"dark\"\n            fill=\"outline\"\n            shape=\"round\"\n            [disabled]=\"working()\"\n            (click)=\"regenerateBackupCodes()\"\n          >\n            @if (working()) {\n            <ion-spinner name=\"crescent\"></ion-spinner>\n            } @else { {{ t('mfaRegenerateCodes') }} }\n          </ion-button>\n          }\n        </div>\n        }\n\n        <ion-button expand=\"block\" color=\"dark\" fill=\"outline\" shape=\"round\" (click)=\"goToDisable()\">\n          {{ t('mfaDisableButton') }}\n        </ion-button>\n        } @else {\n        <p class=\"mfa-status mfa-status--off\">{{ t('mfaDisabledLabel') }}</p>\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisabledHint') }\" />\n        <ion-button expand=\"block\" shape=\"round\" (click)=\"goToMethodSelect()\"> {{ t('mfaEnableButton') }} </ion-button>\n        } } @case ('method-select') {\n        <val-title [props]=\"{ content: t('mfaEnableTitle'), size: 'large', color: 'dark', bold: false }\" />\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaMethodPrompt') }\" />\n\n        <div class=\"mfa-method-list\" role=\"radiogroup\">\n          <button\n            type=\"button\"\n            class=\"mfa-method-card\"\n            [class.mfa-method-card--active]=\"selectedMethod() === 'TOTP'\"\n            (click)=\"selectedMethod.set('TOTP')\"\n            role=\"radio\"\n            [attr.aria-checked]=\"selectedMethod() === 'TOTP'\"\n          >\n            <span class=\"mfa-method-card__dot\"></span>\n            <span class=\"mfa-method-card__body\">\n              <strong>{{ t('mfaMethodTotp') }}</strong>\n              <span>{{ t('mfaMethodTotpHint') }}</span>\n            </span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"mfa-method-card\"\n            [class.mfa-method-card--active]=\"selectedMethod() === 'EMAIL'\"\n            (click)=\"selectedMethod.set('EMAIL')\"\n            role=\"radio\"\n            [attr.aria-checked]=\"selectedMethod() === 'EMAIL'\"\n          >\n            <span class=\"mfa-method-card__dot\"></span>\n            <span class=\"mfa-method-card__body\">\n              <strong>{{ t('mfaMethodEmail') }}</strong>\n              <span>{{ t('mfaMethodEmailHint') }}</span>\n            </span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"mfa-method-card\"\n            [class.mfa-method-card--active]=\"selectedMethod() === 'SMS'\"\n            (click)=\"selectedMethod.set('SMS')\"\n            role=\"radio\"\n            [attr.aria-checked]=\"selectedMethod() === 'SMS'\"\n          >\n            <span class=\"mfa-method-card__dot\"></span>\n            <span class=\"mfa-method-card__body\">\n              <strong>{{ t('mfaMethodSms') }}</strong>\n              <span>{{ t('mfaMethodSmsHint') }}</span>\n            </span>\n          </button>\n        </div>\n\n        @if (selectedMethod() === 'SMS' && !userPhone()) {\n        <val-phone-input\n          [props]=\"{ control: phoneControl, label: t('mfaPhoneLabel'), placeholder: '912345678', defaultCountry: 'CL' }\"\n        />\n        @if (phoneControl.invalid && phoneControl.touched) {\n        <p class=\"mfa-error\">{{ t('mfaPhoneInvalid') }}</p>\n        } } @if (selectedMethod() === 'SMS' && userPhone(); as phone) {\n        <val-text\n          [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaPhoneRegistered') + ': ' + phone }\"\n        />\n        }\n\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"proceedWithMethod()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaContinue') }} }\n        </ion-button>\n        <ion-button expand=\"block\" fill=\"outline\" color=\"dark\" shape=\"round\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } @case ('totp-setup') {\n        <val-title [props]=\"{ content: t('mfaTotpSetupTitle'), size: 'large', color: '', bold: false }\" />\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaTotpStep1') }\" />\n\n        @if (totpQr(); as qr) {\n        <div class=\"mfa-qr\">\n          <val-qr-code [props]=\"{ qr: qr }\" />\n        </div>\n        } @if (totpSetup(); as setup) {\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaTotpManualEntry') }\" />\n        <div class=\"mfa-secret-row\">\n          <code class=\"mfa-secret\">{{ setup.secret }}</code>\n          <ion-button fill=\"clear\" size=\"small\" (click)=\"copySecret(setup.secret)\" [attr.aria-label]=\"t('copy')\">\n            @if (copiedSecret()) {\n            <ion-icon name=\"checkmark-outline\"></ion-icon>\n            } @else {\n            <ion-icon name=\"copy-outline\"></ion-icon>\n            }\n          </ion-button>\n        </div>\n\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaTotpStep2') }\" />\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"verifyTotp()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaTotpVerify') }} }\n        </ion-button>\n\n        <div class=\"mfa-backup\">\n          <val-title [props]=\"{ size: 'small', color: 'dark', bold: true, content: t('mfaBackupCodesTitle') }\" />\n          <div class=\"mfa-alert\">\n            <ion-icon name=\"information-circle-outline\"></ion-icon>\n            <p>{{ t('mfaBackupCodesSaveWarning') }} {{ t('mfaBackupCodesExplain') }}</p>\n          </div>\n          <div class=\"mfa-codes\">\n            @for (code of setup.backupCodes; track code) {\n            <code class=\"mfa-code\">{{ code }}</code>\n            }\n          </div>\n          <ion-button expand=\"block\" color=\"dark\" fill=\"outline\" shape=\"round\" (click)=\"copyCodes(setup.backupCodes)\">\n            {{ t('mfaCopyCodes') }}\n          </ion-button>\n        </div>\n        }\n\n        <ion-button expand=\"block\" fill=\"outline\" color=\"dark\" shape=\"round\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } @case ('code-confirm') {\n        <val-title [props]=\"{ content: t('mfaConfirmTitle'), size: 'large', color: '', bold: false }\" />\n        <val-text\n          [props]=\"{ size: 'medium', color: 'dark', bold: false, content: selectedMethod() === 'EMAIL' ? t('mfaConfirmPromptEmail') : t('mfaConfirmPromptSms') }\"\n        />\n\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"confirmCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaConfirmButton') }} }\n        </ion-button>\n\n        <p class=\"mfa-resend\">\n          {{ t('mfaNoCode') }} @if (resendCooldown() > 0) {\n          <span>{{ t('mfaResendIn') }} {{ resendCooldown() }}s</span>\n          } @else {\n          <a (click)=\"resendCode()\">{{ t('mfaResend') }}</a>\n          }\n        </p>\n\n        <ion-button expand=\"block\" fill=\"outline\" color=\"dark\" shape=\"round\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } @case ('disable') { @if (hasPassword()) {\n        <val-form [props]=\"disableFormProps()\" (onSubmit)=\"onDisableSubmit($event)\" />\n        } @else if (mfaMethod() === 'TOTP') {\n        <val-title [props]=\"{ content: t('mfaDisableTitle'), size: 'large', color: '', bold: false }\" />\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableTotpPrompt') }\" />\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"disableWithMfaCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaDisableButton') }} }\n        </ion-button>\n        } @else if (mfaMethod() === 'EMAIL' || mfaMethod() === 'SMS') {\n        <val-title [props]=\"{ content: t('mfaDisableTitle'), size: 'large', color: '', bold: false }\" />\n        @if (!disableCodeSent()) {\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableCodePrompt') }\" />\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"sendDisableCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaDisableSendCode') }} }\n        </ion-button>\n        } @else {\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableCodePrompt') }\" />\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"disableWithMfaCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaDisableButton') }} }\n        </ion-button>\n        <ion-button\n          expand=\"block\"\n          fill=\"clear\"\n          color=\"dark\"\n          shape=\"round\"\n          [disabled]=\"working()\"\n          (click)=\"sendDisableCode()\"\n        >\n          {{ t('mfaDisableResendCode') }}\n        </ion-button>\n        } } @else {\n        <val-title [props]=\"{ content: t('mfaDisableTitle'), size: 'large', color: '', bold: false }\" />\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableNeedsPassword') }\" />\n        }\n        <ion-button expand=\"block\" fill=\"outline\" color=\"dark\" shape=\"round\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".mfa-modal{display:flex;flex-direction:column;gap:14px;padding-top:4px}.mfa-loading{display:flex;justify-content:center;padding:40px 0}.mfa-status{display:inline-flex;align-items:center;width:fit-content;padding:4px 10px;border-radius:999px;font-size:.8125rem;font-weight:600;margin:0}.mfa-status--on{color:var(--ion-color-success-shade);background:rgba(var(--ion-color-success-rgb),.12)}.mfa-status--off{color:var(--ion-color-dark-shade);background:var(--ion-color-light)}.mfa-secret-row{display:flex;align-items:center;gap:8px}.mfa-secret-row .mfa-secret{flex:1;margin:0}.mfa-secret-row ion-button{flex-shrink:0;--color: var(--ion-color-dark);margin:0}.mfa-error{color:var(--ion-color-danger);font-size:.8125rem;margin:4px 0 0}.mfa-block,.mfa-backup{display:flex;flex-direction:column;gap:12px}.mfa-block{padding:16px;border-radius:14px;background:var(--ion-color-light)}.mfa-alert{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:10px;background:var(--ion-color-light);border-left:3px solid var(--ion-color-primary)}.mfa-alert ion-icon{font-size:1.25rem;color:var(--ion-color-primary);flex-shrink:0;margin-top:1px}.mfa-alert p{margin:0;font-size:.8125rem;line-height:1.45;color:var(--ion-color-dark)}.mfa-qr{display:flex;justify-content:center;padding:8px 0}.mfa-secret{display:block;padding:10px 12px;border-radius:8px;background:var(--ion-color-light);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9375rem;letter-spacing:.04em;word-break:break-all;text-align:center}.mfa-pin{display:flex;justify-content:center;padding:8px 0}.mfa-codes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:12px;border-radius:12px;background:var(--ion-color-light)}.mfa-code{padding:8px;border-radius:6px;background:var(--ion-background-color, #fff);color:var(--ion-color-dark);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8125rem;text-align:center}.mfa-method-list{display:flex;flex-direction:column;gap:8px}.mfa-method-card{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:12px;border:1.5px solid var(--ion-border-color, rgba(var(--ion-color-dark-rgb), .14));background:transparent;cursor:pointer;text-align:left;width:100%;transition:border-color .15s ease,background .15s ease}.mfa-method-card--active{border-color:var(--ion-color-primary);background:rgba(var(--ion-color-primary-rgb),.07)}.mfa-method-card__dot{flex-shrink:0;width:18px;height:18px;border-radius:50%;border:2px solid var(--ion-color-dark);margin-top:2px;transition:border-color .15s,box-shadow .15s}.mfa-method-card--active .mfa-method-card__dot{border-color:var(--ion-color-primary);box-shadow:inset 0 0 0 4px var(--ion-color-primary)}.mfa-method-card__body{display:flex;flex-direction:column;gap:3px}.mfa-method-card__body strong{font-size:.9375rem;font-weight:600;color:var(--ion-color-dark)}.mfa-method-card__body span{font-size:.8125rem;color:var(--ion-color-dark);line-height:1.4}.mfa-resend{text-align:center;font-size:.875rem;color:var(--ion-color-dark);margin:4px 0}.mfa-resend a{color:var(--ion-color-primary);cursor:pointer;font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onValueChange", "onInvalid", "onSelectChange"] }, { kind: "component", type: QrCodeComponent, selector: "val-qr-code", inputs: ["props"], outputs: ["actionComplete", "imageLoad", "imageError"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: PinInputComponent, selector: "val-pin-input", inputs: ["props"] }, { kind: "component", type: PhoneInputComponent, selector: "val-phone-input", inputs: ["preset", "props"], outputs: ["phoneChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MfaModalComponent, decorators: [{
             type: Component,
@@ -45038,7 +45038,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         TitleComponent,
                         PinInputComponent,
                         PhoneInputComponent,
-                    ], template: "<ion-modal [isOpen]=\"isOpen\" (didDismiss)=\"close()\" cssClass=\"val-modal-adaptive\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" shape=\"round\" (click)=\"close()\">\n            <strong>{{ t('close') }}</strong>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n\n    <ion-content class=\"ion-padding\">\n      <section class=\"mfa-modal\">\n        <val-display [props]=\"{ content: t('mfaManageTitle'), size: 'small', color: 'dark' }\" />\n\n        @switch (step()) { @case ('loading') {\n        <div class=\"mfa-loading\">\n          <ion-spinner name=\"crescent\"></ion-spinner>\n        </div>\n        } @case ('status') { @if (mfaEnabled()) {\n        <p class=\"mfa-status mfa-status--on\">{{ t('mfaEnabledLabel') }} \u00B7 {{ methodLabel(mfaMethod()) }}</p>\n\n        @if (mfaMethod() === 'TOTP') {\n        <div class=\"mfa-block\">\n          <val-title [props]=\"{ size: 'small', color: 'dark', bold: true, content: t('mfaBackupCodesTitle') }\" />\n          <val-text\n            [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaBackupCodesAvailable') + ': ' + backupCodesCount() }\"\n          />\n\n          @if (regeneratedCodes(); as codes) {\n          <div class=\"mfa-alert\">\n            <ion-icon name=\"information-circle-outline\"></ion-icon>\n            <p>{{ t('mfaBackupCodesSaveWarning') }} {{ t('mfaBackupCodesExplain') }}</p>\n          </div>\n          <div class=\"mfa-codes\">\n            @for (code of codes; track code) {\n            <code class=\"mfa-code\">{{ code }}</code>\n            }\n          </div>\n          <ion-button expand=\"block\" color=\"dark\" fill=\"outline\" shape=\"round\" (click)=\"copyCodes(codes)\">\n            {{ t('mfaCopyCodes') }}\n          </ion-button>\n          } @else { @if (backupCodesCount() < 3) {\n          <div class=\"mfa-alert\">\n            <ion-icon name=\"information-circle-outline\"></ion-icon>\n            <p>{{ t('mfaBackupCodesLow') }}</p>\n          </div>\n          }\n          <ion-button\n            expand=\"block\"\n            color=\"dark\"\n            fill=\"outline\"\n            shape=\"round\"\n            [disabled]=\"working()\"\n            (click)=\"regenerateBackupCodes()\"\n          >\n            @if (working()) {\n            <ion-spinner name=\"crescent\"></ion-spinner>\n            } @else { {{ t('mfaRegenerateCodes') }} }\n          </ion-button>\n          }\n        </div>\n        }\n\n        <ion-button expand=\"block\" color=\"dark\" fill=\"outline\" shape=\"round\" (click)=\"goToDisable()\">\n          {{ t('mfaDisableButton') }}\n        </ion-button>\n        } @else {\n        <p class=\"mfa-status mfa-status--off\">{{ t('mfaDisabledLabel') }}</p>\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisabledHint') }\" />\n        <ion-button expand=\"block\" shape=\"round\" (click)=\"goToMethodSelect()\"> {{ t('mfaEnableButton') }} </ion-button>\n        } } @case ('method-select') {\n        <val-title [props]=\"{ content: t('mfaEnableTitle'), size: 'large', color: 'dark', bold: false }\" />\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaMethodPrompt') }\" />\n\n        <div class=\"mfa-method-list\" role=\"radiogroup\">\n          <button\n            type=\"button\"\n            class=\"mfa-method-card\"\n            [class.mfa-method-card--active]=\"selectedMethod() === 'TOTP'\"\n            (click)=\"selectedMethod.set('TOTP')\"\n            role=\"radio\"\n            [attr.aria-checked]=\"selectedMethod() === 'TOTP'\"\n          >\n            <span class=\"mfa-method-card__dot\"></span>\n            <span class=\"mfa-method-card__body\">\n              <strong>{{ t('mfaMethodTotp') }}</strong>\n              <span>{{ t('mfaMethodTotpHint') }}</span>\n            </span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"mfa-method-card\"\n            [class.mfa-method-card--active]=\"selectedMethod() === 'EMAIL'\"\n            (click)=\"selectedMethod.set('EMAIL')\"\n            role=\"radio\"\n            [attr.aria-checked]=\"selectedMethod() === 'EMAIL'\"\n          >\n            <span class=\"mfa-method-card__dot\"></span>\n            <span class=\"mfa-method-card__body\">\n              <strong>{{ t('mfaMethodEmail') }}</strong>\n              <span>{{ t('mfaMethodEmailHint') }}</span>\n            </span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"mfa-method-card\"\n            [class.mfa-method-card--active]=\"selectedMethod() === 'SMS'\"\n            (click)=\"selectedMethod.set('SMS')\"\n            role=\"radio\"\n            [attr.aria-checked]=\"selectedMethod() === 'SMS'\"\n          >\n            <span class=\"mfa-method-card__dot\"></span>\n            <span class=\"mfa-method-card__body\">\n              <strong>{{ t('mfaMethodSms') }}</strong>\n              <span>{{ t('mfaMethodSmsHint') }}</span>\n            </span>\n          </button>\n        </div>\n\n        @if (selectedMethod() === 'SMS' && !userPhone()) {\n        <val-phone-input\n          [props]=\"{ control: phoneControl, label: t('mfaPhoneLabel'), placeholder: '912345678', defaultCountry: 'CL' }\"\n        />\n        @if (phoneControl.invalid && phoneControl.touched) {\n        <p class=\"mfa-error\">{{ t('mfaPhoneInvalid') }}</p>\n        } } @if (selectedMethod() === 'SMS' && userPhone(); as phone) {\n        <val-text\n          [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaPhoneRegistered') + ': ' + phone }\"\n        />\n        }\n\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"proceedWithMethod()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaContinue') }} }\n        </ion-button>\n        <ion-button expand=\"block\" fill=\"outline\" color=\"dark\" shape=\"round\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } @case ('totp-setup') {\n        <val-title [props]=\"{ content: t('mfaTotpSetupTitle'), size: 'large', color: '', bold: false }\" />\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaTotpStep1') }\" />\n\n        @if (totpQr(); as qr) {\n        <div class=\"mfa-qr\">\n          <val-qr-code [props]=\"{ qr: qr }\" />\n        </div>\n        } @if (totpSetup(); as setup) {\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaTotpManualEntry') }\" />\n        <div class=\"mfa-secret-row\">\n          <code class=\"mfa-secret\">{{ setup.secret }}</code>\n          <ion-button fill=\"clear\" size=\"small\" (click)=\"copySecret(setup.secret)\" [attr.aria-label]=\"t('copy')\">\n            @if (copiedSecret()) {\n            <ion-icon name=\"checkmark-outline\"></ion-icon>\n            } @else {\n            <ion-icon name=\"copy-outline\"></ion-icon>\n            }\n          </ion-button>\n        </div>\n\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaTotpStep2') }\" />\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"verifyTotp()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaTotpVerify') }} }\n        </ion-button>\n\n        <div class=\"mfa-backup\">\n          <val-title [props]=\"{ size: 'small', color: 'dark', bold: true, content: t('mfaBackupCodesTitle') }\" />\n          <div class=\"mfa-alert\">\n            <ion-icon name=\"information-circle-outline\"></ion-icon>\n            <p>{{ t('mfaBackupCodesSaveWarning') }} {{ t('mfaBackupCodesExplain') }}</p>\n          </div>\n          <div class=\"mfa-codes\">\n            @for (code of setup.backupCodes; track code) {\n            <code class=\"mfa-code\">{{ code }}</code>\n            }\n          </div>\n          <ion-button expand=\"block\" color=\"dark\" fill=\"outline\" shape=\"round\" (click)=\"copyCodes(setup.backupCodes)\">\n            {{ t('mfaCopyCodes') }}\n          </ion-button>\n        </div>\n        }\n\n        <ion-button expand=\"block\" fill=\"outline\" color=\"dark\" shape=\"round\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } @case ('code-confirm') {\n        <val-title [props]=\"{ content: t('mfaConfirmTitle'), size: 'large', color: '', bold: false }\" />\n        <val-text\n          [props]=\"{ size: 'medium', color: 'dark', bold: false, content: selectedMethod() === 'EMAIL' ? t('mfaConfirmPromptEmail') : t('mfaConfirmPromptSms') }\"\n        />\n\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"confirmCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaConfirmButton') }} }\n        </ion-button>\n\n        <p class=\"mfa-resend\">\n          {{ t('mfaNoCode') }} @if (resendCooldown() > 0) {\n          <span>{{ t('mfaResendIn') }} {{ resendCooldown() }}s</span>\n          } @else {\n          <a (click)=\"resendCode()\">{{ t('mfaResend') }}</a>\n          }\n        </p>\n\n        <ion-button expand=\"block\" fill=\"outline\" color=\"dark\" shape=\"round\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } @case ('disable') { @if (hasPassword()) {\n        <val-form [props]=\"disableFormProps()\" (onSubmit)=\"onDisableSubmit($event)\" />\n        } @else if (mfaMethod() === 'TOTP') {\n        <val-title [props]=\"{ content: t('mfaDisableTitle'), size: 'large', color: '', bold: false }\" />\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableTotpPrompt') }\" />\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"disableWithMfaCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaDisableButton') }} }\n        </ion-button>\n        } @else if (mfaMethod() === 'EMAIL' || mfaMethod() === 'SMS') {\n        <val-title [props]=\"{ content: t('mfaDisableTitle'), size: 'large', color: '', bold: false }\" />\n        @if (!disableCodeSent()) {\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableCodePrompt') }\" />\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"sendDisableCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaDisableSendCode') }} }\n        </ion-button>\n        } @else {\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableCodePrompt') }\" />\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"disableWithMfaCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaDisableButton') }} }\n        </ion-button>\n        <ion-button\n          expand=\"block\"\n          fill=\"clear\"\n          color=\"medium\"\n          shape=\"round\"\n          [disabled]=\"working()\"\n          (click)=\"sendDisableCode()\"\n        >\n          {{ t('mfaDisableResendCode') }}\n        </ion-button>\n        } } @else {\n        <val-title [props]=\"{ content: t('mfaDisableTitle'), size: 'large', color: '', bold: false }\" />\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableNeedsPassword') }\" />\n        }\n        <ion-button expand=\"block\" fill=\"outline\" color=\"dark\" shape=\"round\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".mfa-modal{display:flex;flex-direction:column;gap:14px;padding-top:4px}.mfa-loading{display:flex;justify-content:center;padding:40px 0}.mfa-status{display:inline-flex;align-items:center;width:fit-content;padding:4px 10px;border-radius:999px;font-size:.8125rem;font-weight:600;margin:0}.mfa-status--on{color:var(--ion-color-success-shade);background:rgba(var(--ion-color-success-rgb),.12)}.mfa-status--off{color:var(--ion-color-dark-shade);background:var(--ion-color-light)}.mfa-secret-row{display:flex;align-items:center;gap:8px}.mfa-secret-row .mfa-secret{flex:1;margin:0}.mfa-secret-row ion-button{flex-shrink:0;--color: var(--ion-color-dark);margin:0}.mfa-error{color:var(--ion-color-danger);font-size:.8125rem;margin:4px 0 0}.mfa-block,.mfa-backup{display:flex;flex-direction:column;gap:12px}.mfa-block{padding:16px;border-radius:14px;background:var(--ion-color-light)}.mfa-alert{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:10px;background:var(--ion-color-light);border-left:3px solid var(--ion-color-primary)}.mfa-alert ion-icon{font-size:1.25rem;color:var(--ion-color-primary);flex-shrink:0;margin-top:1px}.mfa-alert p{margin:0;font-size:.8125rem;line-height:1.45;color:var(--ion-color-dark)}.mfa-qr{display:flex;justify-content:center;padding:8px 0}.mfa-secret{display:block;padding:10px 12px;border-radius:8px;background:var(--ion-color-light);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9375rem;letter-spacing:.04em;word-break:break-all;text-align:center}.mfa-pin{display:flex;justify-content:center;padding:8px 0}.mfa-codes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:12px;border-radius:12px;background:var(--ion-color-light)}.mfa-code{padding:8px;border-radius:6px;background:var(--ion-background-color, #fff);color:var(--ion-color-dark);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8125rem;text-align:center}.mfa-method-list{display:flex;flex-direction:column;gap:8px}.mfa-method-card{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:12px;border:1.5px solid var(--ion-border-color, rgba(var(--ion-color-dark-rgb), .14));background:transparent;cursor:pointer;text-align:left;width:100%;transition:border-color .15s ease,background .15s ease}.mfa-method-card--active{border-color:var(--ion-color-primary);background:rgba(var(--ion-color-primary-rgb),.07)}.mfa-method-card__dot{flex-shrink:0;width:18px;height:18px;border-radius:50%;border:2px solid var(--ion-color-dark);margin-top:2px;transition:border-color .15s,box-shadow .15s}.mfa-method-card--active .mfa-method-card__dot{border-color:var(--ion-color-primary);box-shadow:inset 0 0 0 4px var(--ion-color-primary)}.mfa-method-card__body{display:flex;flex-direction:column;gap:3px}.mfa-method-card__body strong{font-size:.9375rem;font-weight:600;color:var(--ion-color-dark)}.mfa-method-card__body span{font-size:.8125rem;color:var(--ion-color-dark);line-height:1.4}.mfa-resend{text-align:center;font-size:.875rem;color:var(--ion-color-dark);margin:4px 0}.mfa-resend a{color:var(--ion-color-primary);cursor:pointer;font-weight:600}\n"] }]
+                    ], template: "<ion-modal [isOpen]=\"isOpen\" (didDismiss)=\"close()\" cssClass=\"val-modal-adaptive\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" shape=\"round\" (click)=\"close()\">\n            <strong>{{ t('close') }}</strong>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n\n    <ion-content class=\"ion-padding\">\n      <section class=\"mfa-modal\">\n        <val-display [props]=\"{ content: t('mfaManageTitle'), size: 'small', color: 'dark' }\" />\n\n        @switch (step()) { @case ('loading') {\n        <div class=\"mfa-loading\">\n          <ion-spinner name=\"crescent\"></ion-spinner>\n        </div>\n        } @case ('status') { @if (mfaEnabled()) {\n        <p class=\"mfa-status mfa-status--on\">{{ t('mfaEnabledLabel') }} \u00B7 {{ methodLabel(mfaMethod()) }}</p>\n\n        @if (mfaMethod() === 'TOTP') {\n        <div class=\"mfa-block\">\n          <val-title [props]=\"{ size: 'small', color: 'dark', bold: true, content: t('mfaBackupCodesTitle') }\" />\n          <val-text\n            [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaBackupCodesAvailable') + ': ' + backupCodesCount() }\"\n          />\n\n          @if (regeneratedCodes(); as codes) {\n          <div class=\"mfa-alert\">\n            <ion-icon name=\"information-circle-outline\"></ion-icon>\n            <p>{{ t('mfaBackupCodesSaveWarning') }} {{ t('mfaBackupCodesExplain') }}</p>\n          </div>\n          <div class=\"mfa-codes\">\n            @for (code of codes; track code) {\n            <code class=\"mfa-code\">{{ code }}</code>\n            }\n          </div>\n          <ion-button expand=\"block\" color=\"dark\" fill=\"outline\" shape=\"round\" (click)=\"copyCodes(codes)\">\n            {{ t('mfaCopyCodes') }}\n          </ion-button>\n          } @else { @if (backupCodesCount() < 3) {\n          <div class=\"mfa-alert\">\n            <ion-icon name=\"information-circle-outline\"></ion-icon>\n            <p>{{ t('mfaBackupCodesLow') }}</p>\n          </div>\n          }\n          <ion-button\n            expand=\"block\"\n            color=\"dark\"\n            fill=\"outline\"\n            shape=\"round\"\n            [disabled]=\"working()\"\n            (click)=\"regenerateBackupCodes()\"\n          >\n            @if (working()) {\n            <ion-spinner name=\"crescent\"></ion-spinner>\n            } @else { {{ t('mfaRegenerateCodes') }} }\n          </ion-button>\n          }\n        </div>\n        }\n\n        <ion-button expand=\"block\" color=\"dark\" fill=\"outline\" shape=\"round\" (click)=\"goToDisable()\">\n          {{ t('mfaDisableButton') }}\n        </ion-button>\n        } @else {\n        <p class=\"mfa-status mfa-status--off\">{{ t('mfaDisabledLabel') }}</p>\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisabledHint') }\" />\n        <ion-button expand=\"block\" shape=\"round\" (click)=\"goToMethodSelect()\"> {{ t('mfaEnableButton') }} </ion-button>\n        } } @case ('method-select') {\n        <val-title [props]=\"{ content: t('mfaEnableTitle'), size: 'large', color: 'dark', bold: false }\" />\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaMethodPrompt') }\" />\n\n        <div class=\"mfa-method-list\" role=\"radiogroup\">\n          <button\n            type=\"button\"\n            class=\"mfa-method-card\"\n            [class.mfa-method-card--active]=\"selectedMethod() === 'TOTP'\"\n            (click)=\"selectedMethod.set('TOTP')\"\n            role=\"radio\"\n            [attr.aria-checked]=\"selectedMethod() === 'TOTP'\"\n          >\n            <span class=\"mfa-method-card__dot\"></span>\n            <span class=\"mfa-method-card__body\">\n              <strong>{{ t('mfaMethodTotp') }}</strong>\n              <span>{{ t('mfaMethodTotpHint') }}</span>\n            </span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"mfa-method-card\"\n            [class.mfa-method-card--active]=\"selectedMethod() === 'EMAIL'\"\n            (click)=\"selectedMethod.set('EMAIL')\"\n            role=\"radio\"\n            [attr.aria-checked]=\"selectedMethod() === 'EMAIL'\"\n          >\n            <span class=\"mfa-method-card__dot\"></span>\n            <span class=\"mfa-method-card__body\">\n              <strong>{{ t('mfaMethodEmail') }}</strong>\n              <span>{{ t('mfaMethodEmailHint') }}</span>\n            </span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"mfa-method-card\"\n            [class.mfa-method-card--active]=\"selectedMethod() === 'SMS'\"\n            (click)=\"selectedMethod.set('SMS')\"\n            role=\"radio\"\n            [attr.aria-checked]=\"selectedMethod() === 'SMS'\"\n          >\n            <span class=\"mfa-method-card__dot\"></span>\n            <span class=\"mfa-method-card__body\">\n              <strong>{{ t('mfaMethodSms') }}</strong>\n              <span>{{ t('mfaMethodSmsHint') }}</span>\n            </span>\n          </button>\n        </div>\n\n        @if (selectedMethod() === 'SMS' && !userPhone()) {\n        <val-phone-input\n          [props]=\"{ control: phoneControl, label: t('mfaPhoneLabel'), placeholder: '912345678', defaultCountry: 'CL' }\"\n        />\n        @if (phoneControl.invalid && phoneControl.touched) {\n        <p class=\"mfa-error\">{{ t('mfaPhoneInvalid') }}</p>\n        } } @if (selectedMethod() === 'SMS' && userPhone(); as phone) {\n        <val-text\n          [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaPhoneRegistered') + ': ' + phone }\"\n        />\n        }\n\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"proceedWithMethod()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaContinue') }} }\n        </ion-button>\n        <ion-button expand=\"block\" fill=\"outline\" color=\"dark\" shape=\"round\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } @case ('totp-setup') {\n        <val-title [props]=\"{ content: t('mfaTotpSetupTitle'), size: 'large', color: '', bold: false }\" />\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaTotpStep1') }\" />\n\n        @if (totpQr(); as qr) {\n        <div class=\"mfa-qr\">\n          <val-qr-code [props]=\"{ qr: qr }\" />\n        </div>\n        } @if (totpSetup(); as setup) {\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaTotpManualEntry') }\" />\n        <div class=\"mfa-secret-row\">\n          <code class=\"mfa-secret\">{{ setup.secret }}</code>\n          <ion-button fill=\"clear\" size=\"small\" (click)=\"copySecret(setup.secret)\" [attr.aria-label]=\"t('copy')\">\n            @if (copiedSecret()) {\n            <ion-icon name=\"checkmark-outline\"></ion-icon>\n            } @else {\n            <ion-icon name=\"copy-outline\"></ion-icon>\n            }\n          </ion-button>\n        </div>\n\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaTotpStep2') }\" />\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"verifyTotp()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaTotpVerify') }} }\n        </ion-button>\n\n        <div class=\"mfa-backup\">\n          <val-title [props]=\"{ size: 'small', color: 'dark', bold: true, content: t('mfaBackupCodesTitle') }\" />\n          <div class=\"mfa-alert\">\n            <ion-icon name=\"information-circle-outline\"></ion-icon>\n            <p>{{ t('mfaBackupCodesSaveWarning') }} {{ t('mfaBackupCodesExplain') }}</p>\n          </div>\n          <div class=\"mfa-codes\">\n            @for (code of setup.backupCodes; track code) {\n            <code class=\"mfa-code\">{{ code }}</code>\n            }\n          </div>\n          <ion-button expand=\"block\" color=\"dark\" fill=\"outline\" shape=\"round\" (click)=\"copyCodes(setup.backupCodes)\">\n            {{ t('mfaCopyCodes') }}\n          </ion-button>\n        </div>\n        }\n\n        <ion-button expand=\"block\" fill=\"outline\" color=\"dark\" shape=\"round\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } @case ('code-confirm') {\n        <val-title [props]=\"{ content: t('mfaConfirmTitle'), size: 'large', color: '', bold: false }\" />\n        <val-text\n          [props]=\"{ size: 'medium', color: 'dark', bold: false, content: selectedMethod() === 'EMAIL' ? t('mfaConfirmPromptEmail') : t('mfaConfirmPromptSms') }\"\n        />\n\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"confirmCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaConfirmButton') }} }\n        </ion-button>\n\n        <p class=\"mfa-resend\">\n          {{ t('mfaNoCode') }} @if (resendCooldown() > 0) {\n          <span>{{ t('mfaResendIn') }} {{ resendCooldown() }}s</span>\n          } @else {\n          <a (click)=\"resendCode()\">{{ t('mfaResend') }}</a>\n          }\n        </p>\n\n        <ion-button expand=\"block\" fill=\"outline\" color=\"dark\" shape=\"round\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } @case ('disable') { @if (hasPassword()) {\n        <val-form [props]=\"disableFormProps()\" (onSubmit)=\"onDisableSubmit($event)\" />\n        } @else if (mfaMethod() === 'TOTP') {\n        <val-title [props]=\"{ content: t('mfaDisableTitle'), size: 'large', color: '', bold: false }\" />\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableTotpPrompt') }\" />\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"disableWithMfaCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaDisableButton') }} }\n        </ion-button>\n        } @else if (mfaMethod() === 'EMAIL' || mfaMethod() === 'SMS') {\n        <val-title [props]=\"{ content: t('mfaDisableTitle'), size: 'large', color: '', bold: false }\" />\n        @if (!disableCodeSent()) {\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableCodePrompt') }\" />\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"sendDisableCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaDisableSendCode') }} }\n        </ion-button>\n        } @else {\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableCodePrompt') }\" />\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n        <ion-button expand=\"block\" shape=\"round\" [disabled]=\"working()\" (click)=\"disableWithMfaCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaDisableButton') }} }\n        </ion-button>\n        <ion-button\n          expand=\"block\"\n          fill=\"clear\"\n          color=\"dark\"\n          shape=\"round\"\n          [disabled]=\"working()\"\n          (click)=\"sendDisableCode()\"\n        >\n          {{ t('mfaDisableResendCode') }}\n        </ion-button>\n        } } @else {\n        <val-title [props]=\"{ content: t('mfaDisableTitle'), size: 'large', color: '', bold: false }\" />\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableNeedsPassword') }\" />\n        }\n        <ion-button expand=\"block\" fill=\"outline\" color=\"dark\" shape=\"round\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".mfa-modal{display:flex;flex-direction:column;gap:14px;padding-top:4px}.mfa-loading{display:flex;justify-content:center;padding:40px 0}.mfa-status{display:inline-flex;align-items:center;width:fit-content;padding:4px 10px;border-radius:999px;font-size:.8125rem;font-weight:600;margin:0}.mfa-status--on{color:var(--ion-color-success-shade);background:rgba(var(--ion-color-success-rgb),.12)}.mfa-status--off{color:var(--ion-color-dark-shade);background:var(--ion-color-light)}.mfa-secret-row{display:flex;align-items:center;gap:8px}.mfa-secret-row .mfa-secret{flex:1;margin:0}.mfa-secret-row ion-button{flex-shrink:0;--color: var(--ion-color-dark);margin:0}.mfa-error{color:var(--ion-color-danger);font-size:.8125rem;margin:4px 0 0}.mfa-block,.mfa-backup{display:flex;flex-direction:column;gap:12px}.mfa-block{padding:16px;border-radius:14px;background:var(--ion-color-light)}.mfa-alert{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:10px;background:var(--ion-color-light);border-left:3px solid var(--ion-color-primary)}.mfa-alert ion-icon{font-size:1.25rem;color:var(--ion-color-primary);flex-shrink:0;margin-top:1px}.mfa-alert p{margin:0;font-size:.8125rem;line-height:1.45;color:var(--ion-color-dark)}.mfa-qr{display:flex;justify-content:center;padding:8px 0}.mfa-secret{display:block;padding:10px 12px;border-radius:8px;background:var(--ion-color-light);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9375rem;letter-spacing:.04em;word-break:break-all;text-align:center}.mfa-pin{display:flex;justify-content:center;padding:8px 0}.mfa-codes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:12px;border-radius:12px;background:var(--ion-color-light)}.mfa-code{padding:8px;border-radius:6px;background:var(--ion-background-color, #fff);color:var(--ion-color-dark);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8125rem;text-align:center}.mfa-method-list{display:flex;flex-direction:column;gap:8px}.mfa-method-card{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:12px;border:1.5px solid var(--ion-border-color, rgba(var(--ion-color-dark-rgb), .14));background:transparent;cursor:pointer;text-align:left;width:100%;transition:border-color .15s ease,background .15s ease}.mfa-method-card--active{border-color:var(--ion-color-primary);background:rgba(var(--ion-color-primary-rgb),.07)}.mfa-method-card__dot{flex-shrink:0;width:18px;height:18px;border-radius:50%;border:2px solid var(--ion-color-dark);margin-top:2px;transition:border-color .15s,box-shadow .15s}.mfa-method-card--active .mfa-method-card__dot{border-color:var(--ion-color-primary);box-shadow:inset 0 0 0 4px var(--ion-color-primary)}.mfa-method-card__body{display:flex;flex-direction:column;gap:3px}.mfa-method-card__body strong{font-size:.9375rem;font-weight:600;color:var(--ion-color-dark)}.mfa-method-card__body span{font-size:.8125rem;color:var(--ion-color-dark);line-height:1.4}.mfa-resend{text-align:center;font-size:.875rem;color:var(--ion-color-dark);margin:4px 0}.mfa-resend a{color:var(--ion-color-primary);cursor:pointer;font-weight:600}\n"] }]
         }], ctorParameters: () => [], propDecorators: { isOpen: [{
                 type: Input
             }], prefillCode: [{
@@ -45129,7 +45129,7 @@ class ItemListComponent {
               <h2>{{ item.text }}</h2>
 
               @if (item.comments) {
-                <ion-note color="medium"> {{ item.comments }} </ion-note>
+                <ion-note color="dark"> {{ item.comments }} </ion-note>
               }
 
               @if (item.subtitle) {
@@ -45159,11 +45159,11 @@ class ItemListComponent {
               }
 
               @if (item.subtitle) {
-                <ion-note color="medium"> {{ item.subtitle }} </ion-note>
+                <ion-note color="dark"> {{ item.subtitle }} </ion-note>
               }
 
               @if (item.comments) {
-                <ion-note color="medium"> {{ item.comments }} </ion-note>
+                <ion-note color="dark"> {{ item.comments }} </ion-note>
               }
             </ion-label>
 
@@ -45214,7 +45214,7 @@ class ItemListComponent {
               <h2>{{ item.text }}</h2>
 
               @if (item.comments) {
-                <ion-note color="medium"> {{ item.comments }} </ion-note>
+                <ion-note color="dark"> {{ item.comments }} </ion-note>
               }
             </ion-label>
           </ion-item>
@@ -45314,7 +45314,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
               <h2>{{ item.text }}</h2>
 
               @if (item.comments) {
-                <ion-note color="medium"> {{ item.comments }} </ion-note>
+                <ion-note color="dark"> {{ item.comments }} </ion-note>
               }
 
               @if (item.subtitle) {
@@ -45344,11 +45344,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
               }
 
               @if (item.subtitle) {
-                <ion-note color="medium"> {{ item.subtitle }} </ion-note>
+                <ion-note color="dark"> {{ item.subtitle }} </ion-note>
               }
 
               @if (item.comments) {
-                <ion-note color="medium"> {{ item.comments }} </ion-note>
+                <ion-note color="dark"> {{ item.comments }} </ion-note>
               }
             </ion-label>
 
@@ -45399,7 +45399,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
               <h2>{{ item.text }}</h2>
 
               @if (item.comments) {
-                <ion-note color="medium"> {{ item.comments }} </ion-note>
+                <ion-note color="dark"> {{ item.comments }} </ion-note>
               }
             </ion-label>
           </ion-item>
@@ -45945,7 +45945,7 @@ class CommentSectionComponent {
           <ion-icon name="chatbubbles-outline" class="title-icon"></ion-icon>
           <h3 class="title">{{ displayTitle }}</h3>
           @if (props.showCount !== false && props.count !== undefined) {
-            <ion-badge color="medium" class="count-badge">
+            <ion-badge color="dark" class="count-badge">
               {{ formatCount(props.count) }}
             </ion-badge>
           }
@@ -46107,7 +46107,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           <ion-icon name="chatbubbles-outline" class="title-icon"></ion-icon>
           <h3 class="title">{{ displayTitle }}</h3>
           @if (props.showCount !== false && props.count !== undefined) {
-            <ion-badge color="medium" class="count-badge">
+            <ion-badge color="dark" class="count-badge">
               {{ formatCount(props.count) }}
             </ion-badge>
           }
@@ -48697,7 +48697,7 @@ class MenuComponent {
             [attr.aria-pressed]="isDesktopCollapsed()"
             (click)="toggleDesktopCollapse()"
           >
-            <ion-icon color="medium" slot="icon-only" [name]="desktopCollapseIcon()"></ion-icon>
+            <ion-icon color="dark" slot="icon-only" [name]="desktopCollapseIcon()"></ion-icon>
           </ion-button>
         </div>
       }
@@ -48805,7 +48805,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             [attr.aria-pressed]="isDesktopCollapsed()"
             (click)="toggleDesktopCollapse()"
           >
-            <ion-icon color="medium" slot="icon-only" [name]="desktopCollapseIcon()"></ion-icon>
+            <ion-icon color="dark" slot="icon-only" [name]="desktopCollapseIcon()"></ion-icon>
           </ion-button>
         </div>
       }
@@ -49900,7 +49900,7 @@ class InfiniteListComponent {
                   {{ mergedProps.loadMoreText || i18n.t('loadMore') }}
                 </ion-button>
               } @else {
-                <ion-text color="medium">{{ mergedProps.noMoreText || i18n.t('noMoreItems') }}</ion-text>
+                <ion-text color="dark">{{ mergedProps.noMoreText || i18n.t('noMoreItems') }}</ion-text>
               }
             </div>
           } @else {
@@ -49920,7 +49920,7 @@ class InfiniteListComponent {
         <!-- No more items indicator -->
         @if (!hasMoreBottom() && items().length > 0 && !mergedProps.useLoadMoreButton) {
           <div class="infinite-list-end">
-            <ion-text color="medium">{{ mergedProps.noMoreText || i18n.t('noMoreItems') }}</ion-text>
+            <ion-text color="dark">{{ mergedProps.noMoreText || i18n.t('noMoreItems') }}</ion-text>
           </div>
         }
       </div>
@@ -50067,7 +50067,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                   {{ mergedProps.loadMoreText || i18n.t('loadMore') }}
                 </ion-button>
               } @else {
-                <ion-text color="medium">{{ mergedProps.noMoreText || i18n.t('noMoreItems') }}</ion-text>
+                <ion-text color="dark">{{ mergedProps.noMoreText || i18n.t('noMoreItems') }}</ion-text>
               }
             </div>
           } @else {
@@ -50087,7 +50087,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         <!-- No more items indicator -->
         @if (!hasMoreBottom() && items().length > 0 && !mergedProps.useLoadMoreButton) {
           <div class="infinite-list-end">
-            <ion-text color="medium">{{ mergedProps.noMoreText || i18n.t('noMoreItems') }}</ion-text>
+            <ion-text color="dark">{{ mergedProps.noMoreText || i18n.t('noMoreItems') }}</ion-text>
           </div>
         }
       </div>
@@ -55404,7 +55404,7 @@ class LoginAttemptModalComponent {
     get mineBtn() {
         return {
             text: this.mineLabel,
-            color: 'medium',
+            color: 'dark',
             fill: 'outline',
             size: 'default',
             type: 'button',
@@ -55477,7 +55477,7 @@ class LoginAttemptModalComponent {
                 [props]="{
                   content: metaLabel,
                   size: 'small',
-                  color: 'medium',
+                  color: 'dark',
                   bold: false,
                 }"
               />
@@ -55492,7 +55492,7 @@ class LoginAttemptModalComponent {
               [props]="{
                 content: doneLabel,
                 size: 'small',
-                color: 'medium',
+                color: 'dark',
                 bold: false,
               }"
             />
@@ -55568,7 +55568,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 [props]="{
                   content: metaLabel,
                   size: 'small',
-                  color: 'medium',
+                  color: 'dark',
                   bold: false,
                 }"
               />
@@ -55583,7 +55583,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
               [props]="{
                 content: doneLabel,
                 size: 'small',
-                color: 'medium',
+                color: 'dark',
                 bold: false,
               }"
             />
@@ -55733,7 +55733,7 @@ class SessionListModalComponent {
                 [props]="{
                   content: formatMeta(s),
                   size: 'small',
-                  color: 'medium',
+                  color: 'dark',
                   bold: false,
                 }"
               />
@@ -55793,7 +55793,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 [props]="{
                   content: formatMeta(s),
                   size: 'small',
-                  color: 'medium',
+                  color: 'dark',
                   bold: false,
                 }"
               />
@@ -56472,7 +56472,7 @@ class SecurityViewComponent {
                   [props]="{
                     content: sessionsEmptyLabel(),
                     size: 'small',
-                    color: 'medium',
+                    color: 'dark',
                     bold: false,
                   }"
                 />
@@ -56494,7 +56494,7 @@ class SecurityViewComponent {
                           [props]="{
                             content: formatSessionMeta(s),
                             size: 'small',
-                            color: 'medium',
+                            color: 'dark',
                             bold: false,
                           }"
                         />
@@ -56624,7 +56624,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                   [props]="{
                     content: sessionsEmptyLabel(),
                     size: 'small',
-                    color: 'medium',
+                    color: 'dark',
                     bold: false,
                   }"
                 />
@@ -56646,7 +56646,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                           [props]="{
                             content: formatSessionMeta(s),
                             size: 'small',
-                            color: 'medium',
+                            color: 'dark',
                             bold: false,
                           }"
                         />
@@ -57421,7 +57421,7 @@ class DeleteAccountModalComponent {
               <div class="resend-row">
                 <ion-button
                   fill="clear"
-                  color="medium"
+                  color="dark"
                   size="small"
                   [disabled]="formState() === 'WORKING'"
                   (click)="onResendCode()"
@@ -57466,7 +57466,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
               <div class="resend-row">
                 <ion-button
                   fill="clear"
-                  color="medium"
+                  color="dark"
                   size="small"
                   [disabled]="formState() === 'WORKING'"
                   (click)="onResendCode()"
@@ -60154,7 +60154,7 @@ class MemberDetailModalComponent {
             [props]="{
               content: t('roleHint'),
               size: 'small',
-              color: 'medium',
+              color: 'dark',
               bold: false,
             }"
           />
@@ -60269,7 +60269,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             [props]="{
               content: t('roleHint'),
               size: 'small',
-              color: 'medium',
+              color: 'dark',
               bold: false,
             }"
           />
@@ -60626,7 +60626,7 @@ class PermissionsViewComponent {
               [props]="{
                 content: tt('errorTitle'),
                 size: 'medium',
-                color: 'medium',
+                color: 'dark',
                 bold: false,
               }"
             />
@@ -60648,7 +60648,7 @@ class PermissionsViewComponent {
                   [props]="{
                     content: tt('systemRolesHint'),
                     size: 'medium',
-                    color: 'medium',
+                    color: 'dark',
                     bold: false,
                   }"
                 />
@@ -60719,7 +60719,7 @@ class PermissionsViewComponent {
                   [props]="{
                     content: tt('customRolesHint'),
                     size: 'medium',
-                    color: 'medium',
+                    color: 'dark',
                     bold: false,
                   }"
                 />
@@ -60729,7 +60729,7 @@ class PermissionsViewComponent {
                   [props]="{
                     content: tt('noCustomRoles'),
                     size: 'medium',
-                    color: 'medium',
+                    color: 'dark',
                     bold: false,
                   }"
                 />
@@ -60817,7 +60817,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
               [props]="{
                 content: tt('errorTitle'),
                 size: 'medium',
-                color: 'medium',
+                color: 'dark',
                 bold: false,
               }"
             />
@@ -60839,7 +60839,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                   [props]="{
                     content: tt('systemRolesHint'),
                     size: 'medium',
-                    color: 'medium',
+                    color: 'dark',
                     bold: false,
                   }"
                 />
@@ -60910,7 +60910,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                   [props]="{
                     content: tt('customRolesHint'),
                     size: 'medium',
-                    color: 'medium',
+                    color: 'dark',
                     bold: false,
                   }"
                 />
@@ -60920,7 +60920,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                   [props]="{
                     content: tt('noCustomRoles'),
                     size: 'medium',
-                    color: 'medium',
+                    color: 'dark',
                     bold: false,
                   }"
                 />
@@ -61156,7 +61156,7 @@ class TransferOwnershipModalComponent {
           [props]="{
             content: t('empty'),
             size: 'medium',
-            color: 'medium',
+            color: 'dark',
             bold: false,
           }"
         />
@@ -61165,7 +61165,7 @@ class TransferOwnershipModalComponent {
           [props]="{
             content: noResultsLabel(),
             size: 'medium',
-            color: 'medium',
+            color: 'dark',
             bold: false,
           }"
         />
@@ -61245,7 +61245,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           [props]="{
             content: t('empty'),
             size: 'medium',
-            color: 'medium',
+            color: 'dark',
             bold: false,
           }"
         />
@@ -61254,7 +61254,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           [props]="{
             content: noResultsLabel(),
             size: 'medium',
-            color: 'medium',
+            color: 'dark',
             bold: false,
           }"
         />
@@ -61551,7 +61551,7 @@ class MemberImportModalComponent {
         @if (rolesHint()) {
           <val-text
             class="import-roles-hint"
-            [props]="{ content: rolesHint(), size: 'small', color: 'medium', bold: false }"
+            [props]="{ content: rolesHint(), size: 'small', color: 'dark', bold: false }"
           />
         }
 
@@ -61709,7 +61709,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         @if (rolesHint()) {
           <val-text
             class="import-roles-hint"
-            [props]="{ content: rolesHint(), size: 'small', color: 'medium', bold: false }"
+            [props]="{ content: rolesHint(), size: 'small', color: 'dark', bold: false }"
           />
         }
 
@@ -63509,7 +63509,7 @@ class OrganizationViewComponent {
                 [props]="{
                   content: 'RBAC (live)',
                   size: 'small',
-                  color: 'medium',
+                  color: 'dark',
                   bold: false,
                 }"
               />
@@ -63827,7 +63827,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 [props]="{
                   content: 'RBAC (live)',
                   size: 'small',
-                  color: 'medium',
+                  color: 'dark',
                   bold: false,
                 }"
               />
@@ -64417,7 +64417,7 @@ class NotificationPreferencesViewComponent {
               <val-text
                 [props]="{
                   size: 'small',
-                  color: 'medium',
+                  color: 'dark',
                   bold: false,
                   content: tt('iosInstallHint'),
                 }"
@@ -64449,7 +64449,7 @@ class NotificationPreferencesViewComponent {
               <val-text
                 [props]="{
                   size: 'small',
-                  color: 'medium',
+                  color: 'dark',
                   bold: false,
                   content: tt('simpleDescription'),
                 }"
@@ -64551,7 +64551,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
               <val-text
                 [props]="{
                   size: 'small',
-                  color: 'medium',
+                  color: 'dark',
                   bold: false,
                   content: tt('iosInstallHint'),
                 }"
@@ -64583,7 +64583,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
               <val-text
                 [props]="{
                   size: 'small',
-                  color: 'medium',
+                  color: 'dark',
                   bold: false,
                   content: tt('simpleDescription'),
                 }"
@@ -66273,7 +66273,7 @@ class NotificationsViewComponent {
                 [props]="{
                   content: ctaHint(),
                   size: 'small',
-                  color: 'medium',
+                  color: 'dark',
                   bold: false,
                 }"
               />
@@ -66433,7 +66433,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 [props]="{
                   content: ctaHint(),
                   size: 'small',
-                  color: 'medium',
+                  color: 'dark',
                   bold: false,
                 }"
               />
@@ -68033,7 +68033,7 @@ class RoleManagerComponent {
                       {{ t('save') }}
                     }
                   </ion-button>
-                  <ion-button type="button" fill="clear" size="small" color="medium" (click)="closeRoleForm()">
+                  <ion-button type="button" fill="clear" size="small" color="dark" (click)="closeRoleForm()">
                     {{ t('cancel') }}
                   </ion-button>
                 </div>
@@ -68099,7 +68099,7 @@ class RoleManagerComponent {
             }
           </ion-list>
           <div class="rm-sheet-footer">
-            <ion-button fill="clear" color="medium" expand="block" (click)="closeRoleSelector()">
+            <ion-button fill="clear" color="dark" expand="block" (click)="closeRoleSelector()">
               {{ t('cancel') }}
             </ion-button>
           </div>
@@ -68239,7 +68239,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                       {{ t('save') }}
                     }
                   </ion-button>
-                  <ion-button type="button" fill="clear" size="small" color="medium" (click)="closeRoleForm()">
+                  <ion-button type="button" fill="clear" size="small" color="dark" (click)="closeRoleForm()">
                     {{ t('cancel') }}
                   </ion-button>
                 </div>
@@ -68305,7 +68305,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }
           </ion-list>
           <div class="rm-sheet-footer">
-            <ion-button fill="clear" color="medium" expand="block" (click)="closeRoleSelector()">
+            <ion-button fill="clear" color="dark" expand="block" (click)="closeRoleSelector()">
               {{ t('cancel') }}
             </ion-button>
           </div>
@@ -72047,7 +72047,7 @@ class FieldListComponent {
               <ion-button
                 class="fl-remove"
                 fill="clear"
-                color="medium"
+                color="dark"
                 size="small"
                 [attr.aria-label]="removeText()"
                 (click)="removeRow($index)"
@@ -72103,7 +72103,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
               <ion-button
                 class="fl-remove"
                 fill="clear"
-                color="medium"
+                color="dark"
                 size="small"
                 [attr.aria-label]="removeText()"
                 (click)="removeRow($index)"
@@ -72386,7 +72386,7 @@ class ApiKeysModalComponent {
         } @else {
           <!-- Lista -->
           @if (keys().length === 0) {
-            <val-text [props]="{ content: t('empty'), size: 'medium', color: 'medium', bold: false }" />
+            <val-text [props]="{ content: t('empty'), size: 'medium', color: 'dark', bold: false }" />
           } @else {
             <div class="apikey-list">
               @for (k of keys(); track k.keyId) {
@@ -72421,7 +72421,7 @@ class ApiKeysModalComponent {
                 (selectedChange)="selectedPerms.set($event)"
               />
               <val-form [props]="createForm()" (onSubmit)="onCreateSubmit($event)" />
-              <ion-button expand="block" fill="clear" color="medium" shape="round" (click)="showCreate.set(false)">
+              <ion-button expand="block" fill="clear" color="dark" shape="round" (click)="showCreate.set(false)">
                 {{ t('cancel') }}
               </ion-button>
             </div>
@@ -72489,7 +72489,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         } @else {
           <!-- Lista -->
           @if (keys().length === 0) {
-            <val-text [props]="{ content: t('empty'), size: 'medium', color: 'medium', bold: false }" />
+            <val-text [props]="{ content: t('empty'), size: 'medium', color: 'dark', bold: false }" />
           } @else {
             <div class="apikey-list">
               @for (k of keys(); track k.keyId) {
@@ -72524,7 +72524,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 (selectedChange)="selectedPerms.set($event)"
               />
               <val-form [props]="createForm()" (onSubmit)="onCreateSubmit($event)" />
-              <ion-button expand="block" fill="clear" color="medium" shape="round" (click)="showCreate.set(false)">
+              <ion-button expand="block" fill="clear" color="dark" shape="round" (click)="showCreate.set(false)">
                 {{ t('cancel') }}
               </ion-button>
             </div>
@@ -72800,7 +72800,7 @@ function makeQuoteOrCallout(block, labels) {
         props: {
             content: text,
             size: 'medium',
-            color: 'medium',
+            color: 'dark',
             bold: false,
             showQuoteMark: true,
             alignment: 'left',
@@ -73834,7 +73834,7 @@ class PageContentComponent {
                El input hideRightsFooter existe para el caso raro (un kiosco a
                pantalla completa), no para que cada vista decida. -->
           @if (!hideRightsFooter) {
-            <val-rights-footer [props]="{ align: 'center', color: 'medium' }" />
+            <val-rights-footer [props]="{ align: 'center', color: 'dark' }" />
           }
         </div>
       </ion-content>
@@ -73892,7 +73892,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                El input hideRightsFooter existe para el caso raro (un kiosco a
                pantalla completa), no para que cada vista decida. -->
           @if (!hideRightsFooter) {
-            <val-rights-footer [props]="{ align: 'center', color: 'medium' }" />
+            <val-rights-footer [props]="{ align: 'center', color: 'dark' }" />
           }
         </div>
       </ion-content>
@@ -75661,7 +75661,7 @@ function metaToInlineText(el) {
         props: {
             content: text,
             size: 'small',
-            color: 'medium',
+            color: 'dark',
             bold: false,
             allowPartialBold: true,
             processLinks: true,
@@ -79019,7 +79019,7 @@ class ContentTransformer {
             builder.paragraph({
                 content: `Tags: ${doc.meta.tags.join(', ')}`,
                 size: 'small',
-                color: 'medium',
+                color: 'dark',
                 bold: false,
             });
         }
@@ -79039,7 +79039,7 @@ class ContentTransformer {
         builder.paragraph({
             content: authorText,
             size: 'small',
-            color: 'medium',
+            color: 'dark',
             bold: false,
         });
     }
@@ -81044,7 +81044,7 @@ class FeedbackFormComponent {
       <val-form [props]="formProps" (onSubmit)="handleFormSubmit($event)" />
 
       @if (props.cancelButtonText) {
-        <ion-button fill="outline" color="medium" expand="block" class="cancel-button" (click)="onCancelClick()">
+        <ion-button fill="outline" color="dark" expand="block" class="cancel-button" (click)="onCancelClick()">
           {{ props.cancelButtonText }}
         </ion-button>
       }
@@ -81066,7 +81066,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       <val-form [props]="formProps" (onSubmit)="handleFormSubmit($event)" />
 
       @if (props.cancelButtonText) {
-        <ion-button fill="outline" color="medium" expand="block" class="cancel-button" (click)="onCancelClick()">
+        <ion-button fill="outline" color="dark" expand="block" class="cancel-button" (click)="onCancelClick()">
           {{ props.cancelButtonText }}
         </ion-button>
       }