valtech-components 2.0.741 → 2.0.743

package/lib/components/molecules/notes-box/types.d.ts

@@ -4,11 +4,13 @@ import { Color } from '@ionic/core';
  *
  * @property color - The background color of the box.
  * @property textColor - The color of the text.
- * @property prefix - Optional prefix text (bold).
- * @property text - The main text content.
+ * @property prefix - Optional prefix text (bold). Pass `''` (empty string) to suppress the prefix entirely.
+ * @property text - The main text content. May contain `<strong>` / `<b>` tags when `allowPartialBold` is enabled.
  * @property size - The size of the text and box ('small' | 'medium' | 'large' | 'xlarge').
  * @property rounded - Whether the box has rounded corners.
  * @property padding - Custom padding for the box (optional).
+ * @property allowPartialBold - Render inline `<strong>`/`<b>` tags in `text` as bold via innerHTML. Default `false`.
+ * @property processLinks - Auto-process URLs and `[text](url)` markdown links in `text`. Default `false`.
  */
 export interface NotesBoxMetadata {
     color: Color;
@@ -18,4 +20,6 @@ export interface NotesBoxMetadata {
     size: 'small' | 'medium' | 'large' | 'xlarge';
     rounded: boolean;
     padding?: string;
+    allowPartialBold?: boolean;
+    processLinks?: boolean;
 }

package/lib/components/organisms/article/types.d.ts

@@ -105,9 +105,9 @@ export interface ArticleCodeElement extends BaseArticleElement {
 export interface ArticleNoteElement extends BaseArticleElement {
     type: 'note';
     props: {
-        /** Texto principal de la nota */
+        /** Texto principal de la nota. Puede contener `<strong>`/`<b>` si `allowPartialBold` está activo. */
         text: string;
-        /** Prefijo en negrita (ej: "Nota:") */
+        /** Prefijo en negrita (ej: "Nota:"). Pasa `''` (string vacío) para suprimir el prefijo. */
         prefix?: string;
         /** Color de fondo */
         color?: Color;
@@ -119,6 +119,10 @@ export interface ArticleNoteElement extends BaseArticleElement {
         rounded?: boolean;
         /** Padding personalizado */
         padding?: string;
+        /** Renderiza `<strong>`/`<b>` inline en `text` via innerHTML. Default `false`. */
+        allowPartialBold?: boolean;
+        /** Procesa URLs y `[text](url)` en `text`. Default `false`. */
+        processLinks?: boolean;
     };
 }
 /**

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.741";
+export declare const VERSION = "2.0.743";

package/package.json

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

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

@@ -117,16 +117,17 @@ ion-alert.val-alert {
   }
 }
 
-/* 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);
-  }
+/* Dark mode — class-based (ThemeService toggle `body.dark`/`html.ion-palette-dark`).
+   No usar `@media (prefers-color-scheme: dark)` porque pisaba el manual toggle. */
+body.dark ion-alert.val-alert,
+html.ion-palette-dark ion-alert.val-alert,
+body[data-theme='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);
 }

package/src/lib/components/styles/media-queries.scss

@@ -59,8 +59,29 @@
   }
 }
 
+// Class-based dark mode. Apps deben usar `dark.class.css` palette de Ionic
+// + ThemeService que toggle `body.dark` / `html.ion-palette-dark`.
+// El mixin se mantiene para compatibilidad con consumers existentes,
+// pero ya NO usa `@media (prefers-color-scheme: dark)` para evitar
+// pintar dark según OS aunque el user tenga tema light manual.
+//
+// Uso desde un component-level .scss (top-level, NO dentro de `:host`):
+//   @include dark { ... }
 @mixin dark {
-  @media (prefers-color-scheme: dark) {
+  :host-context(.dark),
+  :host-context(.ion-palette-dark),
+  :host-context(html.ion-palette-dark),
+  :host-context(body.dark),
+  :host-context([data-theme='dark']) {
+    @content;
+  }
+}
+
+// Variante global (no usa :host-context) — para SCSS NO de componente.
+@mixin dark-global {
+  body.dark,
+  html.ion-palette-dark,
+  [data-theme='dark'] {
     @content;
   }
 }

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

@@ -185,10 +185,11 @@ ion-modal {
 
 .img-black {
   filter: invert(0);
-
-  @media (prefers-color-scheme: dark) {
-    filter: invert(1);
-  }
+}
+body.dark .img-black,
+html.ion-palette-dark .img-black,
+body[data-theme='dark'] .img-black {
+  filter: invert(1);
 }
 
 .ion-datetime-button-overlay ion-datetime.datetime-grid {

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

@@ -125,34 +125,39 @@ $color-default-placeholder: #afbacc;
   --ion-color-medium-shade: #8b8b8b;
   --ion-color-medium-tint: #a8a8a8;
 
-  @media (prefers-color-scheme: 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;
-  }
-
   --swiper-pagination-color: var(--ion-color-primary);
   --swiper-navigation-color: var(--ion-color-primary);
   --swiper-pagination-bullet-inactive-color: var(--ion-color-medium);
 }
 
+// Class-based dark mode (ThemeService toggle body.dark/html.ion-palette-dark).
+// Reemplaza la regla `@media (prefers-color-scheme: dark)` previa que pisaba el
+// manual toggle del user.
+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);