valtech-components 2.0.720 → 2.0.722

package/lib/version.d.ts

@@ -2,4 +2,4 @@
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-export declare const VERSION = "2.0.720";
+export declare const VERSION = "2.0.722";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valtech-components",
-  "version": "2.0.720",
+  "version": "2.0.722",
   "private": false,
   "bin": {
     "valtech-firebase-config": "./src/lib/services/firebase/scripts/generate-sw-config.js"

package/src/lib/components/styles/alert.scss

@@ -1,20 +1,31 @@
 /**
- * val-alert — Estilo unificado para ion-alert (confirmation dialogs).
+ * val-alert — Estilo unificado para ion-alert.
  *
  * Inspirado en iOS native UIAlertController:
  * - Backdrop con blur
- * - Wrapper translúcido oscuro con bordes redondeados
- * - Botones pill apilados, neutros (sin colores chillones)
- * - Variant `--destructive`: texto rojo en el botón destructivo (solo texto, no fondo)
+ * - Wrapper translúcido con bordes redondeados
+ * - Botones pill apilados, full-width
+ * - **Sin colores**: todos los botones neutros (incluido destructive)
+ * - Adapta light/dark via prefers-color-scheme con fallbacks explícitos
  *
  * Aplicado por default desde ConfirmationDialogService.
- * Override añadiendo otra cssClass al alert.
  */
 
 ion-alert.val-alert {
+  /* Defaults light mode (variables locales del scope del alert) */
+  --val-alert-bg: var(--ion-background-color, #ffffff);
+  --val-alert-border: rgba(0, 0, 0, 0.08);
+  --val-alert-text: var(--ion-text-color, #000000);
+  --val-alert-text-muted: rgba(0, 0, 0, 0.62);
+  --val-alert-btn-bg: rgba(0, 0, 0, 0.05);
+  --val-alert-btn-bg-hover: rgba(0, 0, 0, 0.08);
+  --val-alert-btn-bg-active: rgba(0, 0, 0, 0.12);
+  --val-alert-btn-border: rgba(0, 0, 0, 0.06);
+
+  /* Backdrop */
   --backdrop-opacity: 0.4;
+  --background: var(--val-alert-bg);
 
-  /* Backdrop con blur */
   &::part(backdrop) {
     background: rgba(0, 0, 0, 0.4);
     backdrop-filter: blur(8px);
@@ -22,13 +33,12 @@ ion-alert.val-alert {
   }
 
   .alert-wrapper {
-    background: rgba(28, 28, 30, 0.92);
-    backdrop-filter: blur(40px) saturate(180%);
-    -webkit-backdrop-filter: blur(40px) saturate(180%);
     border-radius: 16px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+    border: 1px solid var(--val-alert-border);
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
     overflow: hidden;
+    backdrop-filter: blur(40px) saturate(180%);
+    -webkit-backdrop-filter: blur(40px) saturate(180%);
   }
 
   .alert-head {
@@ -37,27 +47,26 @@ ion-alert.val-alert {
   }
 
   .alert-title {
-    color: rgba(255, 255, 255, 0.98);
+    color: var(--val-alert-text);
     font-weight: 700;
     font-size: 17px;
     line-height: 1.3;
   }
 
   .alert-sub-title {
-    color: rgba(255, 255, 255, 0.7);
+    color: var(--val-alert-text-muted);
     font-size: 14px;
     margin-top: 4px;
   }
 
   .alert-message {
-    color: rgba(255, 255, 255, 0.72);
+    color: var(--val-alert-text-muted);
     font-size: 14px;
     line-height: 1.4;
     padding: 0 20px 16px;
     text-align: center;
   }
 
-  /* Grupo de botones */
   .alert-button-group {
     flex-direction: column !important;
     padding: 8px;
@@ -66,16 +75,15 @@ ion-alert.val-alert {
     border-top: none;
   }
 
-  /* Cada botón */
   button.alert-button {
     flex: 0 0 auto;
     width: 100%;
     margin: 0;
     padding: 14px 20px;
     border-radius: 12px;
-    background: rgba(255, 255, 255, 0.08);
-    border: 1px solid rgba(255, 255, 255, 0.06);
-    color: rgba(255, 255, 255, 0.95);
+    background: var(--val-alert-btn-bg);
+    border: 1px solid var(--val-alert-btn-border);
+    color: var(--val-alert-text);
     font-weight: 600;
     font-size: 16px;
     text-transform: none;
@@ -89,11 +97,11 @@ ion-alert.val-alert {
     }
 
     &:hover {
-      background: rgba(255, 255, 255, 0.14);
+      background: var(--val-alert-btn-bg-hover);
     }
 
     &:active {
-      background: rgba(255, 255, 255, 0.2);
+      background: var(--val-alert-btn-bg-active);
     }
 
     .alert-button-inner {
@@ -103,20 +111,22 @@ ion-alert.val-alert {
     }
   }
 
-  /* Botón destructivo: solo el texto en rojo, fondo neutro */
-  &.val-alert--destructive button.alert-button[aria-label],
-  button.alert-button.alert-button-role-destructive,
-  button.alert-button[role='destructive'] {
-    color: #ff453a; /* iOS systemRed dark */
-
-    .alert-button-inner {
-      color: #ff453a;
-    }
-  }
-
-  /* Cancel button: ligeramente menos prominente */
   button.alert-button.alert-button-role-cancel,
   button.alert-button[role='cancel'] {
     font-weight: 500;
   }
 }
+
+/* Dark mode — overrides explícitos via prefers-color-scheme */
+@media (prefers-color-scheme: dark) {
+  ion-alert.val-alert {
+    --val-alert-bg: var(--ion-background-color, #1c1c1e);
+    --val-alert-border: rgba(255, 255, 255, 0.08);
+    --val-alert-text: var(--ion-text-color, #ffffff);
+    --val-alert-text-muted: rgba(255, 255, 255, 0.7);
+    --val-alert-btn-bg: rgba(255, 255, 255, 0.06);
+    --val-alert-btn-bg-hover: rgba(255, 255, 255, 0.12);
+    --val-alert-btn-bg-active: rgba(255, 255, 255, 0.18);
+    --val-alert-btn-border: rgba(255, 255, 255, 0.06);
+  }
+}