desy-html 16.0.4 → 17.0.0

package/src/templates/components/notification/_examples.notification.njk

@@ -1,277 +1,277 @@
-{% set exampleComponent = "notification" %}
-{% set examples =  [
-  {
-    "name": "por defecto",
-    "description": "Este componente se suele mostrar con un componente Alert, que incluye un contenedor con los atributos <code>role=\"alert\"</code> y <code>aria-live=\"assertive\"</code>.",
-    "data": {
-      "title": {
-        "text": "El documento se ha cargado correctamente"
-      },
-      "id": "default"
-    },
-    "visualDescription": "Caja rectangular con fondo blanco y borde azul oscuro de 2-3px. Contiene texto negro en peso normal alineado a la izquierda. Encabezado gris oscuro \"por defecto\" aparece fuera de la caja arriba.",
-    "_generated": {
-      "hash": "56459c692f38c17e9f3badb8070940c2",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:10:13.086Z"
-    }
-  },
-  {
-    "name": "por defecto con html",
-    "data": {
-      "title":{
-        "html": "Las <a href=' # ' class=' c-link '>entidades beneficiarias</a> deberán tener su sede y actividad principal en Aragón."
-      },
-      "id": "default-with-html"
-    },
-    "visualDescription": "Caja rectangular con fondo blanco y borde azul oscuro de 2-3px. Contiene texto negro donde una porción específica aparece en color azul oscuro y peso negrita. Encabezado gris oscuro \"por defecto con html\" aparece fuera de la caja arriba.",
-    "_generated": {
-      "hash": "f2f592b1cef562cb8447971b4f939c80",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:10:13.086Z"
-    }
-  },
-  {
-    "name": "con description",
-    "data": {
-      "title":{
-        "html": "El documento se ha cargado correctamente"
-      },
-      "description":{
-        "html": "<p>Documento acreditativo de <em class=\" italic \">registro de alta de la asociación</em> puede verse publicado ya.</p>"
-      },
-      "id": "with-description"
-    },
-    "visualDescription": "Caja rectangular con fondo blanco y borde azul oscuro de 2-3px. Contiene dos líneas de texto negro en peso normal alineado a la izquierda, donde la primera línea es ligeramente prominente y la segunda línea es texto secundario de menor tamaño. Encabezado gris oscuro \"con description\" aparece fuera de la caja arriba.",
-    "_generated": {
-      "hash": "d5cfa68df45bfa03baa8e7d495139851",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:10:13.086Z"
-    }
-  },
-  {
-    "name": "con content",
-    "data": {
-      "title":{
-        "html": "El documento se ha cargado correctamente"
-      },
-      "content":{
-        "html": "<p>Documento acreditativo de <em class=\" italic \">registro de alta de la asociación</em> puede verse publicado ya.</p>"
-      },
-      "id": "with-content"
-    },
-    "visualDescription": "Notificación con fondo azul claro, borde azul oscuro de 2px, y padding generoso. Contiene un título en texto negro negrita y un párrafo descriptivo en texto gris oscuro de tamaño regular. El componente ocupa todo el ancho disponible con bordes redondeados sutiles.",
-    "_generated": {
-      "hash": "bcc753a0638cc54e006821fe26a23ab0",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:10:22.955Z"
-    }
-  },
-  {
-    "name": "con items",
-    "data": {
-      "title":{
-        "text": "Problemas encontrados"
-      },
-      "items": [
-        {
-          "text": "Campo Nombre de la empresa está vacío",
-          "href": "#empresa"
-        },
-        {
-          "text": "Campo Fecha de inicio de la actividad está vacío",
-          "href": "#actividad"
-        },
-        {
-          "text": "El formato de correo electrónico es incorrecto",
-          "href": "#email"
-        }
-      ],
-      "id": "with-items"
-    },
-    "visualDescription": "Notificación con fondo blanco, borde azul oscuro de 2px en la sección interior, y título \"Problemas encontrados\" en texto negro negrita. Lista de tres enlaces en texto azul subrayado apilados verticalmente. El componente tiene padding amplio y bordes redondeados.",
-    "_generated": {
-      "hash": "8d81909e750602049055f7be9011246b",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:10:22.956Z"
-    }
-  },
-  {
-    "name": "con tipo: éxito",
-    "data": {
-      "title": {
-        "text": "El documento se ha cargado correctamente"
-      },
-      "type": "success",
-      "id": "type-success"
-    },
-    "visualDescription": "Notificación rectangular con fondo verde muy claro, borde verde oscuro de 2px, e ícono de checkmark verde a la izquierda. Texto en negro de peso regular alineado horizontalmente con el ícono. El componente ocupa todo el ancho con padding uniforme y bordes redondeados sutiles.",
-    "_generated": {
-      "hash": "d8de791e99422f5559cde06202bf2cb3",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:10:22.956Z"
-    }
-  },
-  {
-    "name": "con tipo: alerta",
-    "data": {
-      "title":{
-        "text": "Problemas encontrados"
-      },
-      "items": [
-        {
-          "text": "Campo Nombre de la empresa está vacío",
-          "href": "#empresa"
-        },
-        {
-          "text": "Campo Fecha de inicio de la actividad está vacío",
-          "href": "#actividad"
-        },
-        {
-          "text": "El formato de correo electrónico es incorrecto",
-          "href": "#email"
-        }
-      ],
-      "type": "alert",
-      "id": "type-alert"
-    },
-    "visualDescription": "Notificación con fondo rosa claro, borde rojo de 2px, e icono de alerta rojo a la izquierda. Contiene título en negrita negro y tres enlaces en rojo subrayado apilados verticalmente. Formato rectangular de ancho completo con padding generoso.",
-    "_generated": {
-      "hash": "b9767d7e618df5e8976860a3c94a58aa",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:10:32.127Z"
-    }
-  },
-  {
-    "name": "con tipo: info",
-    "data": {
-      "title": {
-        "text": "ATENCIÓN: Debido a la situación por Covid-19, pide cita previa para acudir a una de nuestras oficinas."
-      },
-      "description":{
-        "html": "<a class=' c-link text-sm ' href=' # '>Pedir cita previa</a> "
-      },
-      "type": "info",
-      "id": "type-info"
-    },
-    "visualDescription": "Notificación con fondo azul celeste claro, borde azul oscuro de 2px, e icono de información azul a la izquierda. Incluye texto en negrita negro y enlace azul subrayado en línea siguiente. Formato rectangular de ancho completo con padding interno.",
-    "_generated": {
-      "hash": "0e39cefd5378e1d00b403c66180d416f",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:10:32.127Z"
-    }
-  },
-  {
-    "name": "con botón de cerrar",
-    "description": "Usa el parámetro <code>'isDismissible': true</code>",
-    "data": {
-      "title": {
-        "text": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut distinctio error non, reiciendis repudiandae reprehenderit minima quia laboriosam voluptate, quo veniam expedita possimus ex nam consequuntur autem eveniet, saepe ea."
-      },
-      "isDismissible": true,
-      "id": "with-close-button"
-    },
-    "visualDescription": "Notificación con fondo blanco, borde azul oscuro de 2px, sin icono lateral. Presenta bloque de texto negro alineado a la izquierda y botón X gris en esquina superior derecha para cerrar. Formato rectangular de ancho completo con padding interno uniforme.",
-    "_generated": {
-      "hash": "1ec81208e1edd0f4b62671d18635c581",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:10:32.127Z"
-    }
-  },
-  {
-    "name": "Cerrar la notificación con JavaScript",
-    "description": "Puedes usar con javascript la función global <code>closeItemNotification(element)</code>, para cerrar la notificación. Ej: Abre la consola del navegador y escribe <code>closeItemNotification('with-close-button-js')</code> para cerrar la notificación. Es necesario usar el parámetro <code>'isDismissible': true</code>",
-    "data": {
-      "title": {
-        "text": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut distinctio error non, reiciendis repudiandae reprehenderit minima quia laboriosam voluptate, quo veniam expedita possimus ex nam consequuntur autem eveniet, saepe ea."
-      },
-      "isDismissible": true,
-      "id": "with-close-button-js"
-    },
-    "visualDescription": "Notificación con fondo azul celeste claro, borde azul oscuro de 2-3px, conteniendo texto negro en párrafo. Incluye botón de cierre \"×\" en la esquina superior derecha de color gris oscuro.",
-    "_generated": {
-      "hash": "ade10884f457090850d0803e779db4e8",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:10:40.934Z"
-    }
-  },
-  {
-    "name": "con icono personalizado y clases",
-    "data": {
-      "title": {
-        "text": "Acaba de publicarse la lista de admitidos y excluidos de la convocatoria publicado en el BOA"
-      },
-      "description":{
-        "html": "<a class=' c-link break-all ' href=' # '>Lista de admitidos (PDF, 20Kb)</a> "
-      },
-      "icon": {
-        "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-8 h-8' aria-label='Atención' focusable='false'><path d='M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z' fill='currentColor'/></svg>"
-      },
-      "id": "with-custom-icon",
-      "classes": "border-neutral-dark bg-neutral-lighter"
-    },
-    "visualDescription": "Notificación con fondo blanco, borde azul oscuro de 2-3px a la izquierda, conteniendo icono de alerta triangular negro. Texto principal en negro con enlace azul subrayado, ambos alineados horizontalmente junto al icono.",
-    "_generated": {
-      "hash": "c71e925711d154680efe37335a68673d",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:10:40.934Z"
-    }
-  },
-   {
-    "name": "Con encabezado",
-    "description": "Usa el parámetro <code>'headingLevel'</code> para establecer el nivel del encabezado. En este ejemplo: <code>'headingLevel': 3</code> creará un encabezado <code>&lt;h3&gt;</code>. Recuerda que tras el encabezado debe ir una descripción ya que, por accesibilidad, un encabezado no puede estar solo sin que tras él haya algún texto.",
-    "data": {
-      "headingLevel": 3,
-      "title": {
-        "text": "Esto es un título con h3"
-      },
-
-      "description":{
-        "text": "Y esto es una descripción necesaria tras el encabezado"
-      },
-      "id": "headinglevel"
-    },
-    "visualDescription": "Notificación con fondo blanco, borde azul oscuro de 2-3px en todo el perímetro, conteniendo encabezado en texto negro en negrita. Línea de texto adicional en negro regular debajo del encabezado, layout vertical.",
-    "_generated": {
-      "hash": "1de9593067b29493a84f01e0cafdf396",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:10:40.934Z"
-    }
-  },
-  {
-    "name": "con parámetros mixtos",
-    "data": {
-      "headingLevel": 3,
-      "title":{
-        "text": "No olvide adjuntar el registro de alta de la asociación",
-        "classes": "font-bold"
-      },
-      "description":{
-        "text": "Necesitará el documento acreditativo de registro de alta de la asociación"
-      },
-      "items": [
-        {
-          "text": "Desde modelo",
-          "href": "#"
-        },
-        {
-          "text": "Obligatorio previo a resolución",
-          "href": "#"
-        },
-        {
-          "text": "Condicionado",
-          "href": "#"
-        }
-      ],
-      "type": "info",
-      "isDismissible": true,
-      "id": "with-mixed-params"
-    },
-    "visualDescription": "Notification box con borde azul de 2px, fondo azul muy claro, y contenido estructurado en múltiples líneas. El header incluye un icono de información circular azul a la izquierda, texto de título en negro(peso normal) , y botón de cierre \"×\" en la esquina superior derecha. El cuerpo contiene texto descriptivo en negro seguido de tres enlaces en azul subrayado dispuestos verticalmente.",
-    "_generated": {
-      "hash": "f4e3f8d568ac76aee112206ca910f89f",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:10:48.101Z"
-    }
-  }
-] %}
+{% set exampleComponent = "notification" %}
+{% set examples =  [
+  {
+    "name": "por defecto",
+    "description": "Este componente se suele mostrar con un componente Alert, que incluye un contenedor con los atributos <code>role=\"alert\"</code> y <code>aria-live=\"assertive\"</code>.",
+    "data": {
+      "title": {
+        "text": "El documento se ha cargado correctamente"
+      },
+      "id": "default"
+    },
+    "visualDescription": "Caja rectangular con fondo blanco y borde azul oscuro de 2-3px. Contiene texto negro en peso normal alineado a la izquierda. Encabezado gris oscuro \"por defecto\" aparece fuera de la caja arriba.",
+    "_generated": {
+      "hash": "56459c692f38c17e9f3badb8070940c2",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:10:13.086Z"
+    }
+  },
+  {
+    "name": "por defecto con html",
+    "data": {
+      "title":{
+        "html": "Las <a href=' # ' class=' c-link '>entidades beneficiarias</a> deberán tener su sede y actividad principal en Aragón."
+      },
+      "id": "default-with-html"
+    },
+    "visualDescription": "Caja rectangular con fondo blanco y borde azul oscuro de 2-3px. Contiene texto negro donde una porción específica aparece en color azul oscuro y peso negrita. Encabezado gris oscuro \"por defecto con html\" aparece fuera de la caja arriba.",
+    "_generated": {
+      "hash": "f2f592b1cef562cb8447971b4f939c80",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:10:13.086Z"
+    }
+  },
+  {
+    "name": "con description",
+    "data": {
+      "title":{
+        "html": "El documento se ha cargado correctamente"
+      },
+      "description":{
+        "html": "<p>Documento acreditativo de <em class=\" italic \">registro de alta de la asociación</em> puede verse publicado ya.</p>"
+      },
+      "id": "with-description"
+    },
+    "visualDescription": "Caja rectangular con fondo blanco y borde azul oscuro de 2-3px. Contiene dos líneas de texto negro en peso normal alineado a la izquierda, donde la primera línea es ligeramente prominente y la segunda línea es texto secundario de menor tamaño. Encabezado gris oscuro \"con description\" aparece fuera de la caja arriba.",
+    "_generated": {
+      "hash": "d5cfa68df45bfa03baa8e7d495139851",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:10:13.086Z"
+    }
+  },
+  {
+    "name": "con content",
+    "data": {
+      "title":{
+        "html": "El documento se ha cargado correctamente"
+      },
+      "content":{
+        "html": "<p>Documento acreditativo de <em class=\" italic \">registro de alta de la asociación</em> puede verse publicado ya.</p>"
+      },
+      "id": "with-content"
+    },
+    "visualDescription": "Notificación con fondo azul claro, borde azul oscuro de 2px, y padding generoso. Contiene un título en texto negro negrita y un párrafo descriptivo en texto gris oscuro de tamaño regular. El componente ocupa todo el ancho disponible con bordes redondeados sutiles.",
+    "_generated": {
+      "hash": "bcc753a0638cc54e006821fe26a23ab0",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:10:22.955Z"
+    }
+  },
+  {
+    "name": "con items",
+    "data": {
+      "title":{
+        "text": "Problemas encontrados"
+      },
+      "items": [
+        {
+          "text": "Campo Nombre de la empresa está vacío",
+          "href": "#empresa"
+        },
+        {
+          "text": "Campo Fecha de inicio de la actividad está vacío",
+          "href": "#actividad"
+        },
+        {
+          "text": "El formato de correo electrónico es incorrecto",
+          "href": "#email"
+        }
+      ],
+      "id": "with-items"
+    },
+    "visualDescription": "Notificación con fondo blanco, borde azul oscuro de 2px en la sección interior, y título \"Problemas encontrados\" en texto negro negrita. Lista de tres enlaces en texto azul subrayado apilados verticalmente. El componente tiene padding amplio y bordes redondeados.",
+    "_generated": {
+      "hash": "8d81909e750602049055f7be9011246b",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:10:22.956Z"
+    }
+  },
+  {
+    "name": "con tipo: éxito",
+    "data": {
+      "title": {
+        "text": "El documento se ha cargado correctamente"
+      },
+      "type": "success",
+      "id": "type-success"
+    },
+    "visualDescription": "Notificación rectangular con fondo verde muy claro, borde verde oscuro de 2px, e ícono de checkmark verde a la izquierda. Texto en negro de peso regular alineado horizontalmente con el ícono. El componente ocupa todo el ancho con padding uniforme y bordes redondeados sutiles.",
+    "_generated": {
+      "hash": "d8de791e99422f5559cde06202bf2cb3",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:10:22.956Z"
+    }
+  },
+  {
+    "name": "con tipo: alerta",
+    "data": {
+      "title":{
+        "text": "Problemas encontrados"
+      },
+      "items": [
+        {
+          "text": "Campo Nombre de la empresa está vacío",
+          "href": "#empresa"
+        },
+        {
+          "text": "Campo Fecha de inicio de la actividad está vacío",
+          "href": "#actividad"
+        },
+        {
+          "text": "El formato de correo electrónico es incorrecto",
+          "href": "#email"
+        }
+      ],
+      "type": "alert",
+      "id": "type-alert"
+    },
+    "visualDescription": "Notificación con fondo rosa claro, borde rojo de 2px, e icono de alerta rojo a la izquierda. Contiene título en negrita negro y tres enlaces en rojo subrayado apilados verticalmente. Formato rectangular de ancho completo con padding generoso.",
+    "_generated": {
+      "hash": "b9767d7e618df5e8976860a3c94a58aa",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:10:32.127Z"
+    }
+  },
+  {
+    "name": "con tipo: info",
+    "data": {
+      "title": {
+        "text": "ATENCIÓN: Debido a la situación por Covid-19, pide cita previa para acudir a una de nuestras oficinas."
+      },
+      "description":{
+        "html": "<a class=' c-link text-sm ' href=' # '>Pedir cita previa</a> "
+      },
+      "type": "info",
+      "id": "type-info"
+    },
+    "visualDescription": "Notificación con fondo azul celeste claro, borde azul oscuro de 2px, e icono de información azul a la izquierda. Incluye texto en negrita negro y enlace azul subrayado en línea siguiente. Formato rectangular de ancho completo con padding interno.",
+    "_generated": {
+      "hash": "0e39cefd5378e1d00b403c66180d416f",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:10:32.127Z"
+    }
+  },
+  {
+    "name": "con botón de cerrar",
+    "description": "Usa el parámetro <code>'isDismissible': true</code>",
+    "data": {
+      "title": {
+        "text": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut distinctio error non, reiciendis repudiandae reprehenderit minima quia laboriosam voluptate, quo veniam expedita possimus ex nam consequuntur autem eveniet, saepe ea."
+      },
+      "isDismissible": true,
+      "id": "with-close-button"
+    },
+    "visualDescription": "Notificación con fondo blanco, borde azul oscuro de 2px, sin icono lateral. Presenta bloque de texto negro alineado a la izquierda y botón X gris en esquina superior derecha para cerrar. Formato rectangular de ancho completo con padding interno uniforme.",
+    "_generated": {
+      "hash": "1ec81208e1edd0f4b62671d18635c581",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:10:32.127Z"
+    }
+  },
+  {
+    "name": "Cerrar la notificación con JavaScript",
+    "description": "Puedes usar con javascript la función global <code>closeItemNotification(element)</code>, para cerrar la notificación. Ej: Abre la consola del navegador y escribe <code>closeItemNotification('with-close-button-js')</code> para cerrar la notificación. Es necesario usar el parámetro <code>'isDismissible': true</code>",
+    "data": {
+      "title": {
+        "text": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut distinctio error non, reiciendis repudiandae reprehenderit minima quia laboriosam voluptate, quo veniam expedita possimus ex nam consequuntur autem eveniet, saepe ea."
+      },
+      "isDismissible": true,
+      "id": "with-close-button-js"
+    },
+    "visualDescription": "Notificación con fondo azul celeste claro, borde azul oscuro de 2-3px, conteniendo texto negro en párrafo. Incluye botón de cierre \"×\" en la esquina superior derecha de color gris oscuro.",
+    "_generated": {
+      "hash": "ade10884f457090850d0803e779db4e8",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:10:40.934Z"
+    }
+  },
+  {
+    "name": "con icono personalizado y clases",
+    "data": {
+      "title": {
+        "text": "Acaba de publicarse la lista de admitidos y excluidos de la convocatoria publicado en el BOA"
+      },
+      "description":{
+        "html": "<a class=' c-link break-all ' href=' # '>Lista de admitidos (PDF, 20Kb)</a> "
+      },
+      "icon": {
+        "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-8 h-8' aria-label='Atención' focusable='false'><path d='M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z' fill='currentColor'/></svg>"
+      },
+      "id": "with-custom-icon",
+      "classes": "border-neutral-dark bg-neutral-lighter"
+    },
+    "visualDescription": "Notificación con fondo blanco, borde azul oscuro de 2-3px a la izquierda, conteniendo icono de alerta triangular negro. Texto principal en negro con enlace azul subrayado, ambos alineados horizontalmente junto al icono.",
+    "_generated": {
+      "hash": "c71e925711d154680efe37335a68673d",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:10:40.934Z"
+    }
+  },
+   {
+    "name": "Con encabezado",
+    "description": "Usa el parámetro <code>'headingLevel'</code> para establecer el nivel del encabezado. En este ejemplo: <code>'headingLevel': 3</code> creará un encabezado <code>&lt;h3&gt;</code>. Recuerda que tras el encabezado debe ir una descripción ya que, por accesibilidad, un encabezado no puede estar solo sin que tras él haya algún texto.",
+    "data": {
+      "headingLevel": 3,
+      "title": {
+        "text": "Esto es un título con h3"
+      },
+
+      "description":{
+        "text": "Y esto es una descripción necesaria tras el encabezado"
+      },
+      "id": "headinglevel"
+    },
+    "visualDescription": "Notificación con fondo blanco, borde azul oscuro de 2-3px en todo el perímetro, conteniendo encabezado en texto negro en negrita. Línea de texto adicional en negro regular debajo del encabezado, layout vertical.",
+    "_generated": {
+      "hash": "1de9593067b29493a84f01e0cafdf396",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:10:40.934Z"
+    }
+  },
+  {
+    "name": "con parámetros mixtos",
+    "data": {
+      "headingLevel": 3,
+      "title":{
+        "text": "No olvide adjuntar el registro de alta de la asociación",
+        "classes": "font-bold"
+      },
+      "description":{
+        "text": "Necesitará el documento acreditativo de registro de alta de la asociación"
+      },
+      "items": [
+        {
+          "text": "Desde modelo",
+          "href": "#"
+        },
+        {
+          "text": "Obligatorio previo a resolución",
+          "href": "#"
+        },
+        {
+          "text": "Condicionado",
+          "href": "#"
+        }
+      ],
+      "type": "info",
+      "isDismissible": true,
+      "id": "with-mixed-params"
+    },
+    "visualDescription": "Notification box con borde azul de 2px, fondo azul muy claro, y contenido estructurado en múltiples líneas. El header incluye un icono de información circular azul a la izquierda, texto de título en negro(peso normal) , y botón de cierre \"×\" en la esquina superior derecha. El cuerpo contiene texto descriptivo en negro seguido de tres enlaces en azul subrayado dispuestos verticalmente.",
+    "_generated": {
+      "hash": "f4e3f8d568ac76aee112206ca910f89f",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:10:48.101Z"
+    }
+  }
+] %}

package/src/templates/components/notification/_macro.notification.njk

@@ -1,3 +1,3 @@
-{% macro componentNotification(params) %}
-{% include "./_template.notification.njk" %}
-{% endmacro %}
+{% macro componentNotification(params) %}
+{% include "./_template.notification.njk" %}
+{% endmacro %}

package/src/templates/components/notification/_styles.notification.css

@@ -1,30 +1,30 @@
-/* ==========================================================================
-   _styles.notification.css
-   ========================================================================== */
-@layer components {
-  .c-notification {
-    @apply flex;
-    @apply flex-wrap;
-    @apply relative;
-    @apply overflow-hidden;
-    @apply p-base;
-    @apply bg-white;
-    @apply border-4;
-  }
-
-  .c-notification--primary {
-    @apply border-primary-base;
-  }
-
-  .c-notification--warning {
-    @apply border-warning-dark;
-  }
-
-  .c-notification--success {
-    @apply border-success-dark;
-  }
-
-  .c-notification--alert {
-    @apply border-alert-dark;
-  }
-}
+/* ==========================================================================
+   _styles.notification.css
+   ========================================================================== */
+@layer components {
+  .c-notification {
+    @apply flex;
+    @apply flex-wrap;
+    @apply relative;
+    @apply overflow-hidden;
+    @apply p-base;
+    @apply bg-white;
+    @apply border-4;
+  }
+
+  .c-notification--primary {
+    @apply border-primary-base;
+  }
+
+  .c-notification--warning {
+    @apply border-warning-dark;
+  }
+
+  .c-notification--success {
+    @apply border-success-dark;
+  }
+
+  .c-notification--alert {
+    @apply border-alert-dark;
+  }
+}