desy-html 15.0.2 → 16.0.0

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

@@ -150,6 +150,12 @@
           "href": "javascript:void(0)"
         }
       ]
+    },
+    "visualDescription": "Barra horizontal con fondo blanco que contiene cinco elementos interactivos alineados a la izquierda. Cuatro botones con texto azul oscuro(color #0969DA) y flechas desplegables, seguidos de un enlace de texto azul sin flecha. Bordes grises claros de 1px rodean cada botón, con espaciado uniforme entre elementos.",
+    "_generated": {
+      "hash": "daf08d1cbb1e9bfecd64b6da6a3b6720",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:08:17.874Z"
     }
   },
   {
@@ -304,6 +310,12 @@
           "href": "javascript:void(0)"
         }
       ]
+    },
+    "visualDescription": "Barra horizontal con fondo blanco que contiene cinco elementos interactivos alineados a la izquierda. Cuatro botones con texto azul oscuro(color #0969DA) y flechas desplegables, seguidos de un enlace de texto azul sin flecha. Bordes grises claros de 1px rodean cada botón, con espaciado uniforme entre elementos.",
+    "_generated": {
+      "hash": "bae9190780ad5e0dda53356adc5cced8",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:08:17.874Z"
     }
   },
   {
@@ -457,6 +469,12 @@
           "href": "javascript:void(0)"
         }
       ]
+    },
+    "visualDescription": "Barra horizontal con fondo blanco que contiene cinco elementos interactivos alineados a la izquierda. Cuatro botones con texto azul oscuro(color #0969DA) y flechas desplegables, seguidos de un enlace de texto azul sin flecha. Bordes grises claros de 1px rodean cada botón, con espaciado uniforme entre elementos.",
+    "_generated": {
+      "hash": "003b90b0c6bb483641e7260f61d26856",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:08:17.874Z"
     }
   },
   {
@@ -611,6 +629,12 @@
           "href": "javascript:void(0)"
         }
       ]
+    },
+    "visualDescription": "Menubar horizontal con cinco botones de tamaño pequeño alineados en fila. Los botones muestran texto azul oscuro con bordes azules de 1px y fondo blanco. Cuatro botones incluyen iconos de flecha hacia abajo indicando desplegables, el quinto botón carece de flecha.",
+    "_generated": {
+      "hash": "f44d7f0356658b1412b8f9de345f6ebe",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:08:26.277Z"
     }
   },
   {
@@ -765,6 +789,12 @@
           "href": "javascript:void(0)"
         }
       ]
+    },
+    "visualDescription": "Menubar horizontal con cinco botones de tamaño pequeño alineados en fila. Los botones presentan texto azul oscuro con bordes azules de 1px y fondo blanco. Cuatro botones contienen iconos de flecha hacia abajo para menús desplegables, el último botón no tiene flecha.",
+    "_generated": {
+      "hash": "d0d8be038c2859fe8a2449bbf4794b87",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:08:26.277Z"
     }
   },
   {
@@ -919,6 +949,12 @@
           "href": "javascript:void(0)"
         }
       ]
+    },
+    "visualDescription": "Menubar horizontal con cinco botones de tamaño mediano espaciados uniformemente. Los botones muestran texto azul oscuro con bordes azules de 1px y fondo blanco. Cuatro botones incluyen iconos de flecha hacia abajo indicando funcionalidad de menú desplegable, el botón final carece de icono.",
+    "_generated": {
+      "hash": "c143f35ab8c4bc76933779b8e2d3c277",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:08:26.277Z"
     }
   },
   {
@@ -1073,6 +1109,12 @@
           "href": "javascript:void(0)"
         }
       ]
+    },
+    "visualDescription": "Barra de navegación horizontal con fondo blanco y borde gris claro. Contiene cinco botones dropdown con texto azul y flechas descendentes, alineados de izquierda a derecha con espaciado uniforme. Los botones tienen apariencia de enlaces con texto de tamaño pequeño.",
+    "_generated": {
+      "hash": "3edb0a8bd4d23f89f54e8b5e1d32da38",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:08:34.675Z"
     }
   },
   {
@@ -1227,6 +1269,12 @@
           "href": "javascript:void(0)"
         }
       ]
+    },
+    "visualDescription": "Barra de navegación horizontal sin fondo visible ni bordes. Contiene cinco botones dropdown con texto negro y flechas descendentes, alineados horizontalmente con espaciado regular. Los elementos mantienen formato de texto plano sin estilos de botón visibles.",
+    "_generated": {
+      "hash": "0ea3f0bf8c440388950a9599d140d442",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:08:34.675Z"
     }
   },
   {
@@ -1382,6 +1430,12 @@
         }
       ],
       "classes": "bg-neutral-lighter"
+    },
+    "visualDescription": "Barra de navegación horizontal con fondo blanco y borde inferior gris. Contiene cinco botones dropdown con texto negro en negrita y flechas descendentes, distribuidos horizontalmente con espaciado equilibrado. Los botones presentan formato de encabezado con tipografía de peso medio.",
+    "_generated": {
+      "hash": "80cbb1e3f38434ec968378c30c868b07",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:08:34.675Z"
     }
   },
   {
@@ -1617,6 +1671,12 @@
         }
       ],
       "classes": "c-menubar--last-right"
+    },
+    "visualDescription": "Barra de filtros con fondo blanco y borde gris claro de 1px. Contiene tres botones con texto azul oscuro(\"Estadios y trámites\", \"Tipologías\", \"Eliminar filtros\") alineados a la izquierda, y un dropdown con texto negro (\"Orden: Actividad reciente\") alineado a la derecha. Los botones tienen bordes azules y fondo blanco.",
+    "_generated": {
+      "hash": "71019a86d88c0fa7e0e97c738caf435e",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:08:44.899Z"
     }
   },
   {
@@ -1772,6 +1832,12 @@
           "href": "javascript:void(0)"
         }
       ]
+    },
+    "visualDescription": "Sección con fondo blanco y borde gris claro de 1px. Incluye un título negro pequeño \"con label\", seguido de texto gris \"Esto es un label\". Debajo hay una fila de cinco botones: cuatro dropdowns con texto negro sobre fondo blanco y bordes azules (\"Menuitem\", \"MenuItemcheckbox\", \"MenuItemradio\", \"Items mixtos\"), y un enlace azul sin borde (\"Menuitem solo\").",
+    "_generated": {
+      "hash": "b661f2b0cafa7e4adcd4607eda959333",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:08:44.899Z"
     }
   }
 ] %}

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

@@ -17,6 +17,12 @@
         }
       ],
       "isDismissible": true
+    },
+    "visualDescription": "Modal centrado con fondo blanco, bordes redondeados sutiles y sombra perimetral gris. Encabezado \"Aviso\" en texto negro negrita, seguido de tres líneas de texto gris oscuro en peso normal. Botón rectangular en la parte inferior con fondo azul petróleo y texto blanco \"De acuerdo, continuar\". Ícono de cierre (X) negro en la esquina superior derecha del modal.",
+    "_generated": {
+      "hash": "018d5f87e3b6dde9451cef768fb840e0",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:08:53.106Z"
     }
   },
   {
@@ -39,6 +45,12 @@
         }
       ],
       "isDismissible": true
+    },
+    "visualDescription": "Modal centrado con fondo blanco, bordes redondeados sutiles y sombra perimetral gris. Encabezado \"Aviso\" en texto negro negrita, seguido de tres líneas de texto gris oscuro en peso normal. Botón rectangular en la parte inferior con fondo azul petróleo mostrando indicador de carga (letra \"C\" blanca). Ícono de cierre (X) negro en la esquina superior derecha del modal.",
+    "_generated": {
+      "hash": "3dfe5525bf5786fdd38c9199b780747f",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:08:53.106Z"
     }
   },
   {
@@ -60,6 +72,12 @@
         }
       ],
       "isDismissible": true
+    },
+    "visualDescription": "Modal centrado con fondo blanco, bordes redondeados sutiles y sombra perimetral gris. Encabezado \"Esto es un h3\" en texto negro negrita, seguido de tres líneas de texto gris oscuro en peso normal. Botón rectangular en la parte inferior con fondo azul petróleo y texto blanco \"De acuerdo, continuar\". Ícono de cierre (X) negro en la esquina superior derecha del modal.",
+    "_generated": {
+      "hash": "da4cd8a099d05fa9c5d196c38d601566",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:08:53.106Z"
     }
   },
   {
@@ -85,6 +103,12 @@
         }
       ],
       "isDismissible": true
+    },
+    "visualDescription": "Modal con fondo blanco, esquinas redondeadas y sombra sutil. Encabezado con título en negrita negro y botón X para cerrar en esquina superior derecha. Cuerpo con dos líneas de texto gris oscuro centrado. Pie con dos botones: botón primario \"Editar servicio\" en azul petróleo con texto blanco, y botón secundario \"Cancelar\" con borde azul petróleo y texto azul petróleo sobre fondo blanco.",
+    "_generated": {
+      "hash": "ff469a301be2910f389039a597baa1c4",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:09:04.315Z"
     }
   },
   {
@@ -111,6 +135,12 @@
       ],
       "isDismissible": true,
       "caller": "<div class='prose max-w-auto mx-auto'><p class='text-center text-sm'>Para más información, ir a la <a href='#'>Página de ayuda</a></p></div>"
+    },
+    "visualDescription": "Modal con fondo blanco, esquinas redondeadas y sombra sutil. Encabezado con título en negrita negro y botón X para cerrar en esquina superior derecha. Cuerpo con tres líneas de texto gris oscuro centrado, seguido de una línea adicional con enlace azul subrayado. Pie con dos botones: botón primario \"Editar servicio\" en azul petróleo con texto blanco, y botón secundario \"Cancelar\" con borde azul petróleo y texto azul petróleo sobre fondo blanco.",
+    "_generated": {
+      "hash": "9bb080cae298c74d7481e34469eefc2d",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:09:04.315Z"
     }
   },
   {
@@ -144,6 +174,12 @@
       ],
       "isDismissible": true,
       "classes": "max-w-4xl"
+    },
+    "visualDescription": "Modal con fondo blanco, esquinas redondeadas y sombra sutil. Encabezado con título \"Aviso\" en negrita negro y botón X para cerrar en esquina superior derecha. Cuerpo con tres líneas de texto gris oscuro centrado. Pie con cuatro elementos: dos botones primarios (\"Guardar cambios y publicar\" y \"Guardar cambios\") en azul petróleo con texto blanco, enlace \"Más información\" en azul subrayado, y botón \"Cancelar\" con borde gris y texto gris sobre fondo blanco.",
+    "_generated": {
+      "hash": "2160a78a91aea81f363bbd6806728a04",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:09:04.315Z"
     }
   },
   {
@@ -184,6 +220,12 @@
       ],
       "isDismissible": true,
       "classes": "max-w-4xl"
+    },
+    "visualDescription": "Modal centrado con fondo blanco, título negro en negrita, texto descriptivo gris oscuro en tres líneas, y botón de cierre X negro en esquina superior derecha. Incluye botón primario verde azulado con checkmark blanco, botón secundario blanco con borde azul y texto azul, y spinner de carga circular azul oscuro. Bordes redondeados con sombra sutil de elevación.",
+    "_generated": {
+      "hash": "7773b438c50d559ceb9e86f70b93c987",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:09:15.406Z"
     }
   },
   {
@@ -212,6 +254,12 @@
       "icon": {
         "type": "delete"
       }
+    },
+    "visualDescription": "Modal centrado con fondo blanco, icono de bote de basura rosa pálido en la parte superior, título negro en negrita, y pregunta de confirmación en gris oscuro. Contiene dos botones alineados horizontalmente: botón izquierdo blanco con borde azul y texto azul, botón derecho rojo sólido con texto blanco. Bordes redondeados con sombra de elevación, X negra para cerrar en esquina superior derecha.",
+    "_generated": {
+      "hash": "a8d8918d3f30b54cefe77da62844dbae",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:09:15.406Z"
     }
   },
   {
@@ -239,6 +287,12 @@
       "icon": {
         "type": "discard"
       }
+    },
+    "visualDescription": "Modal centrado con fondo blanco, icono circular con diagonal tachada en rosa pálido, título negro en negrita, y mensaje de advertencia en gris oscuro ocupando dos líneas. Presenta dos botones horizontales: izquierdo blanco con borde azul y texto azul, derecho rojo sólido con texto blanco. Bordes redondeados con sombra de elevación, botón X negro en esquina superior derecha.",
+    "_generated": {
+      "hash": "fffcce522fc671bd89cc7b9ced1dae34",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:09:15.406Z"
     }
   },
   {
@@ -266,6 +320,12 @@
       "icon": {
         "type": "changes"
       }
+    },
+    "visualDescription": "Modal centrado con fondo blanco, título negro en negrita, icono circular gris claro arriba del título. Texto descriptivo gris debajo del título en tamaño mediano. Dos botones en la parte inferior: izquierdo con fondo azul petróleo y texto blanco, derecho con fondo blanco, borde gris y texto negro.",
+    "_generated": {
+      "hash": "f4f08fe45441efb4aeeb83c6658548ea",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:09:24.339Z"
     }
   },
   {
@@ -293,6 +353,12 @@
       "icon": {
         "type": "edit"
       }
+    },
+    "visualDescription": "Modal centrado con fondo blanco, título negro en negrita, icono cuadrado azul claro arriba del título. Bloque de texto descriptivo gris en tamaño pequeño debajo del título, centrado. Dos botones en la parte inferior: izquierdo con fondo azul petróleo y texto blanco, derecho con fondo blanco, borde gris y texto negro.",
+    "_generated": {
+      "hash": "497cffddb33ae14133917f6d17ca6f87",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:09:24.339Z"
     }
   },
   {
@@ -320,6 +386,12 @@
       "icon": {
         "type": "publish"
       }
+    },
+    "visualDescription": "Modal centrado con fondo blanco, título negro en negrita, icono triangular azul claro arriba del título. Texto descriptivo gris centrado debajo del título en tamaño mediano. Dos botones en la parte inferior: izquierdo con fondo azul petróleo y texto blanco, derecho con fondo blanco, borde gris y texto negro.",
+    "_generated": {
+      "hash": "7d62ad79715e62cf72693bcffcfb317a",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:09:24.339Z"
     }
   },
   {
@@ -350,6 +422,12 @@
       "icon": {
         "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='1em' height='1em' class='block w-16 h-16 text-primary-light' aria-label='Pregunta' focusable='false'><path d='M12,0A12,12,0,1,0,24,12,12,12,0,0,0,12,0Zm0,19a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,12,19Zm1.6-6.08a1,1,0,0,0-.6.92,1,1,0,0,1-2,0,3,3,0,0,1,1.8-2.75A2,2,0,1,0,10,9.25a1,1,0,0,1-2,0,4,4,0,1,1,5.6,3.67Z' fill='currentColor'></path></svg>"
       }
+    },
+    "visualDescription": "Diálogo modal centrado con fondo blanco, bordes redondeados y sombra suave. Icono circular azul claro con símbolo de interrogación en la parte superior, título en negrita negro, tres párrafos de texto gris oscuro con diferentes niveles de información, pregunta final en cursiva gris oscuro, botón primario teal con texto blanco \"Sí, comenzar proceso\" y botón secundario con borde teal y texto teal \"Cancelar\" alineados horizontalmente en la parte inferior. Botón de cierre (×) en la esquina superior derecha del modal.",
+    "_generated": {
+      "hash": "89dd951667eb8e973544b1c234051cd5",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:09:32.548Z"
     }
   }
 ] %}

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

@@ -29,6 +29,12 @@
       "attributes": {
         "aria-label": "Navegación local"
       }
+    },
+    "visualDescription": "Lista de navegación con cinco ítems de texto en color negro, tamaño mediano, peso normal. Fondo blanco con borde gris claro de 1px redondeado. Espaciado vertical uniforme entre ítems, padding interno generoso.",
+    "_generated": {
+      "hash": "9c8ba176bf672a0ccb4d2d2f30a558e2",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:09:40.510Z"
     }
   },
   {
@@ -61,6 +67,12 @@
       "attributes": {
         "aria-label": "Navegación local"
       }
+    },
+    "visualDescription": "Lista de navegación con cinco ítems verticales dentro de contenedor con borde gris claro de 1px redondeado, fondo blanco. Tercer ítem muestra texto gris claro acompañado de ícono circular informativo a la derecha. Resto de ítems en texto negro de tamaño mediano con espaciado vertical uniforme.",
+    "_generated": {
+      "hash": "a9c9d4785243ebb8cc6d5757b708b358",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:09:40.510Z"
     }
   },
   {
@@ -95,6 +107,12 @@
         "id": "mi-menu",
         "aria-label": "Navegación local"
       }
+    },
+    "visualDescription": "Lista de navegación vertical con cinco ítems en contenedor bordeado gris claro de 1px, fondo blanco. Cuarto ítem presenta texto negro en negrita indicando estado activo. Ítems restantes muestran texto negro peso normal, tamaño mediano, con espaciado vertical consistente.",
+    "_generated": {
+      "hash": "6187d8c94c6a5c202cbfcd2062d88e1a",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:09:40.510Z"
     }
   },{
     "name": "con target en enlaces",
@@ -145,6 +163,12 @@
       "attributes": {
         "aria-label": "Navegación local"
       }
+    },
+    "visualDescription": "Lista vertical de cinco elementos de navegación con texto negro sobre fondo blanco. Cada elemento presenta texto alineado a la izquierda con espaciado vertical uniforme entre ítems. Borde gris claro de 1px rodea el contenedor completo.",
+    "_generated": {
+      "hash": "4d25739e2209b00ddc182d04038cc2a8",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:09:48.510Z"
     }
   },
   {
@@ -177,6 +201,12 @@
       "attributes": {
         "aria-label": "Navegación local"
       }
+    },
+    "visualDescription": "Lista vertical de cinco elementos de navegación con texto negro sobre fondo blanco. Línea divisoria gris clara horizontal separa el tercer elemento de los elementos cuarto y quinto. Borde gris claro de 1px rodea el contenedor completo.",
+    "_generated": {
+      "hash": "8c693aa241211a0402dcfbbffdd63909",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:09:48.510Z"
     }
   },
   {
@@ -210,6 +240,12 @@
       "attributes": {
         "aria-label": "Navegación local"
       }
+    },
+    "visualDescription": "Lista vertical de cinco elementos de navegación con texto negro sobre fondo celeste claro. Cada elemento presenta texto alineado a la izquierda con espaciado vertical uniforme entre ítems. Borde gris claro de 1px rodea el contenedor completo.",
+    "_generated": {
+      "hash": "e65f346526fcb4232819fba29ea4d9ba",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:09:48.510Z"
     }
   },
   {
@@ -234,6 +270,12 @@
         "id": "mi-menu-icons",
         "aria-label": "Navegación local"
       }
+    },
+    "visualDescription": "Lista vertical con tres elementos de navegación, cada uno con un icono negro a la izquierda(círculo, llave, cuadrado) seguido de texto negro. Fondo blanco, sin bordes visibles entre elementos. Espaciado uniforme vertical entre los tres ítems.",
+    "_generated": {
+      "hash": "0b07a28108d22e46ca3b639913c465a0",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:09:57.139Z"
     }
   },
   {
@@ -266,6 +308,12 @@
       "attributes": {
         "aria-label": "Navegación local"
       }
+    },
+    "visualDescription": "Lista vertical con cinco opciones de texto negro sobre fondo blanco. Sin iconos ni elementos decorativos. Espaciado vertical consistente entre elementos. Texto alineado a la izquierda, sin marcadores ni bordes visibles.",
+    "_generated": {
+      "hash": "cf352e0078848bddacd8ede5bb77d556",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:09:57.139Z"
     }
   },
   {
@@ -303,6 +351,12 @@
       "attributes": {
         "aria-label": "Navegación local"
       }
+    },
+    "visualDescription": "Lista vertical con cinco opciones de texto negro sobre fondo blanco. Sin iconos, marcadores ni bordes entre elementos. Espaciado vertical uniforme. Texto alineado a la izquierda con apariencia de navegación simple.",
+    "_generated": {
+      "hash": "38b58ce7befa2cdf66aacfa6a70e5229",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:09:57.139Z"
     }
   },
   {
@@ -363,6 +417,12 @@
       "attributes": {
         "aria-label": "Navegación local"
       }
+    },
+    "visualDescription": "Lista de navegación con borde gris claro de 1px y fondo blanco. Contiene título \"con atributos\" en texto negro pequeño seguido de 5 opciones de navegación (Opción 1 a Opción 5) en texto negro regular, cada una en línea separada con espaciado vertical uniforme.",
+    "_generated": {
+      "hash": "99cd1885d81538cca9ea6129d72e39e4",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:10:05.539Z"
     }
   },
   {
@@ -398,6 +458,12 @@
       "attributes": {
         "aria-label": "Navegación local"
       }
+    },
+    "visualDescription": "Lista de navegación con borde gris claro de 1px y fondo blanco. Incluye título \"Sin nav\" en texto negro pequeño, seguido de 4 opciones numeradas (Opción 1 a Opción 4) en texto negro, donde \"Opción 3\" aparece en negrita. Debajo presenta texto adicional en color gris oscuro con descripción extendida sobre clases aplicadas para animación de menús.",
+    "_generated": {
+      "hash": "77efdb3ad6b59734bc77bee74c1b5aea",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:10:05.540Z"
     }
   }
 ] %}

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

@@ -8,6 +8,12 @@
         "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"
     }
   },
   {
@@ -17,6 +23,12 @@
         "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"
     }
   },
   {
@@ -29,6 +41,12 @@
         "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"
     }
   },
   {
@@ -41,6 +59,12 @@
         "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"
     }
   },
   {
@@ -64,6 +88,12 @@
         }
       ],
       "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"
     }
   },
   {
@@ -74,6 +104,12 @@
       },
       "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"
     }
   },
   {
@@ -98,6 +134,12 @@
       ],
       "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"
     }
   },
   {
@@ -111,6 +153,12 @@
       },
       "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"
     }
   },
   {
@@ -122,6 +170,12 @@
       },
       "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"
     }
   },
   {
@@ -133,6 +187,12 @@
       },
       "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"
     }
   },
   {
@@ -149,6 +209,12 @@
       },
       "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"
     }
   },
    {
@@ -164,6 +230,12 @@
         "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"
     }
   },
   {
@@ -194,6 +266,12 @@
       "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"
     }
   }
 ] %}