desy-html 15.0.3 → 16.0.0

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

@@ -133,6 +133,12 @@
       "id": "datepicker-date",
       "standalone": true,
       "caller": calendarDateExample | safe
+    },
+    "visualDescription": "Contenedor rectangular con borde gris claro de 1px, fondo blanco, esquinas redondeadas. Encabezado con texto negro de tamaño pequeño en peso normal. Debajo aparece texto gris medio mostrando \"[object Object]\" en fuente monoespaciada.",
+    "_generated": {
+      "hash": "d82d0ba4edf1590a900de4d80b43b761",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:54:55.367Z"
     }
   },
   {
@@ -142,6 +148,12 @@
       "id": "datepicker-years",
       "standalone": true,
       "caller": calendarDateYearsExample('datepicker-years') | safe
+    },
+    "visualDescription": "Contenedor rectangular con borde gris claro de 1px, fondo blanco, esquinas redondeadas. Encabezado con texto negro de tamaño pequeño en peso normal. Debajo aparece texto gris medio mostrando \"[object Object]\" en fuente monoespaciada.",
+    "_generated": {
+      "hash": "be351e964c77f7e18c65539a14dd12ff",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:54:55.367Z"
     }
   },
   {
@@ -151,6 +163,12 @@
       "id": "datepicker-multi",
       "standalone": true,
       "caller": calendarMultiExample | safe
+    },
+    "visualDescription": "Contenedor rectangular con borde gris claro de 1px, fondo blanco, esquinas redondeadas. Encabezado con texto negro de tamaño pequeño en peso normal. Debajo aparece texto gris medio mostrando \"[object Object]\" en fuente monoespaciada.",
+    "_generated": {
+      "hash": "dfc01d2ee4c93bd8d5d1156b88abe5fa",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:54:55.367Z"
     }
   },
   {
@@ -160,6 +178,12 @@
       "id": "datepicker-range",
       "standalone": true,
       "caller": calendarRangeExample | safe
+    },
+    "visualDescription": "Sección rectangular con borde gris claro de 1px y fondo blanco. Contiene un encabezado de texto negro en tamaño pequeño, seguido de texto gris \"[object Object]\" en fuente monoespaciada. Altura compacta con padding interno moderado.",
+    "_generated": {
+      "hash": "24d8457852a9f4e084feddf277e23592",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:55:03.942Z"
     }
   },
   {
@@ -169,6 +193,12 @@
       "id": "datepicker-range2",
       "standalone": true,
       "caller": calendarRangeExample2('datepicker-range2') | safe
+    },
+    "visualDescription": "Sección rectangular con borde gris claro de 1px y fondo blanco. Incluye un encabezado de texto negro en tamaño pequeño en dos líneas, seguido de texto gris \"[object Object]\" en fuente monoespaciada. Altura compacta con padding interno moderado.",
+    "_generated": {
+      "hash": "7b05081cca5ec5df3cc72efe8e18c58e",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:55:03.942Z"
     }
   },
   {
@@ -183,6 +213,12 @@
         "html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span>"
       },
       "caller": calendarDateExample | safe
+    },
+    "visualDescription": "Sección rectangular con borde gris claro de 1px y fondo blanco. Encabezado de texto negro en negrita tamaño pequeño, seguido de dos líneas de texto gris normal como instrucciones. Campo de entrada blanco rectangular con borde gris claro de 1px y un icono azul con fondo azul claro alineado a la derecha dentro del campo.",
+    "_generated": {
+      "hash": "aeb9a788d9915ea7019e481715b3011f",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:55:03.942Z"
     }
   },
   {
@@ -198,6 +234,12 @@
       },
       "value": "10-01-2024 20-01-2024",
       "caller": calendarMultiExample | safe
+    },
+    "visualDescription": "Campo de texto con borde gris claro de 1px y esquinas redondeadas, fondo blanco, texto negro en formato de fecha. Título en negrita negro arriba, seguido de texto descriptivo gris oscuro en tamaño menor. Ícono de calendario azul alineado a la derecha dentro del campo, con desplegable indicado por flecha pequeña.",
+    "_generated": {
+      "hash": "fd85b350bd3b98bd1b2250f9d0f5734a",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:55:14.318Z"
     }
   },
   {
@@ -213,6 +255,12 @@
       },
       "value": "10-01-2024/20-01-2024",
       "caller": calendarRangeExample | safe
+    },
+    "visualDescription": "Campo de texto rectangular con borde gris claro de 1px, fondo blanco, mostrando texto negro en formato de rango de fechas separado por guión. Encabezado en negrita negro, debajo texto explicativo gris oscuro de dos líneas en tamaño reducido. Ícono de calendario azul posicionado en el extremo derecho del campo con indicador de expansión.",
+    "_generated": {
+      "hash": "b590f68b56b3d7dd35cceb782fe75db9",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:55:14.318Z"
     }
   },
   {
@@ -228,6 +276,12 @@
       },
       "value": "16-01-2024/04-02-2024",
       "caller": calendarRangeExample2('datepicker-with-hint-text-and-year') | safe
+    },
+    "visualDescription": "Input rectangular con borde gris claro de 1px y fondo blanco, conteniendo texto negro de formato de rango. Título en negrita negro en la parte superior, texto instructivo gris oscuro de dos líneas debajo del título. Ícono de calendario azul ubicado en el borde derecho del campo con flecha desplegable adyacente.",
+    "_generated": {
+      "hash": "3a17f76c70edae55e6946eca4f15c5bc",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:55:14.318Z"
     }
   },
   {
@@ -244,6 +298,12 @@
       "disabled": true,
       "pattern": "(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))",
       "caller": calendarDateExample | safe
+    },
+    "visualDescription": "Campo de entrada de fecha con fondo gris muy claro (#f5f5f5), borde gris claro de 1px, esquinas redondeadas. Label negro encima del campo, texto de ayuda gris medio debajo indicando formato. Ícono de calendario azul con cursor \"not-allowed\" alineado a la derecha dentro del input.",
+    "_generated": {
+      "hash": "9e12897eeb8c1f31d0828e2150d63356",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:55:23.628Z"
     }
   },
   {
@@ -264,6 +324,12 @@
       },
       "pattern": "(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))",
       "caller": calendarDateExample | safe
+    },
+    "visualDescription": "Campo de entrada de fecha con fondo blanco, borde rojo de 2px, esquinas redondeadas. Label negro encima del campo, texto de ayuda gris medio debajo del label, mensaje de error en texto rojo debajo del campo. Ícono de calendario azul alineado a la derecha dentro del input con borde rojo visible alrededor.",
+    "_generated": {
+      "hash": "a2308fb68f258c46b270d01ae4bfa65a",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:55:23.628Z"
     }
   },
   {
@@ -283,6 +349,12 @@
       "dropdownClasses": "c-dropdown--sm c-dropdown--transparent",
       "pattern": "(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))",
       "caller": calendarDateExample | safe
+    },
+    "visualDescription": "Campo de entrada de fecha con fondo blanco, borde gris claro de 1px, esquinas redondeadas, altura reducida. Label negro en peso normal encima del campo, texto de ayuda gris medio entre paréntesis debajo del label. Ícono de calendario azul de tamaño pequeño alineado a la derecha dentro del input compacto.",
+    "_generated": {
+      "hash": "7d29019502394cfacead0bec153c4784",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:55:23.628Z"
     }
   },
   {
@@ -303,6 +375,12 @@
       "classes": "flex-1",
       "pattern": "(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))",
       "caller": calendarDateExample | safe
+    },
+    "visualDescription": "Campo de entrada de fecha con borde gris claro de 1px y fondo blanco. Incluye label en texto negro regular arriba indicando \"Elige fecha de inicio\", texto de ayuda gris claro debajo especificando el formato de fecha esperado, y botón \"Seleccionar fecha\" con texto azul y borde azul alineado a la derecha del campo.",
+    "_generated": {
+      "hash": "b9838d33b55fbf83f2be5ef3aaa07335",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:55:30.922Z"
     }
   },
   {
@@ -326,6 +404,12 @@
       "classes": "flex-1 c-input--sm",
       "pattern": "(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))",
       "caller": calendarDateExample | safe
+    },
+    "visualDescription": "Campo de entrada de fecha con borde gris claro de 1px y fondo blanco. Incluye label en texto negro regular arriba indicando \"Elige fecha de inicio\", texto de ayuda gris claro debajo especificando el formato de fecha esperado, y botón \"Seleccionar fecha\" con texto azul y borde azul de dimensiones reducidas alineado a la derecha del campo.",
+    "_generated": {
+      "hash": "bf3f9aa1ed7519bbd6e85ef2c2ce4acb",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:55:30.922Z"
     }
   }
 ] %}

package/src/templates/components/datepicker/_template.datepicker.njk

@@ -63,7 +63,7 @@
       }) }}
     {% endif %}
     <div class="relative {%- if params.dropdown %} flex flex-wrap items-end gap-sm{% endif %}">
-      <input class="c-input block mt-sm border-black rounded-sm font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base {%- if not params.dropdown %} pr-16 w-full{% endif %} {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} border-alert-base ring-2 ring-alert-base {% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="{{ params.type | default('text') }}"
+      <input class="c-input block mt-sm {% if params.errorMessage %}border-alert-base ring-2 ring-alert-base{% else %}border-black{% endif %} rounded-sm font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base {%- if not params.dropdown %} pr-16 w-full{% endif %} {%- if params.classes %} {{ params.classes }}{% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="{{ params.type | default('text') }}"
         {%- if params.value %} value="{{ params.value}}"{% endif %}
         {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
         {%- if params.errorMessage or params.errorId %} aria-errormessage="{{ errorId }}" aria-invalid="true"{% endif %}

package/src/templates/components/description-list/_examples.description-list.njk

@@ -13,6 +13,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Caja rectangular con borde gris claro de 1px y fondo blanco. Contiene un término en texto negro peso normal tamaño pequeño, seguido de \"definición\" en texto negro peso normal del mismo tamaño, dispuestos verticalmente con espaciado mínimo entre ellos.",
+    "_generated": {
+      "hash": "bff8479f930b75718541c13186930ac8",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:55:37.348Z"
     }
   },
   {
@@ -29,6 +35,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Caja rectangular con borde gris claro de 1px y fondo blanco. Contiene un término en texto negro peso normal tamaño mediano, seguido de \"definición\" en texto negro peso normal del mismo tamaño, dispuestos verticalmente con espaciado interno generoso.",
+    "_generated": {
+      "hash": "677f066c58ef453fc43ca649302b007d",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:55:37.348Z"
     }
   },
   {
@@ -45,6 +57,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Caja rectangular con borde gris claro de 1px y fondo blanco. Contiene un término en texto negro peso negrita tamaño grande, seguido de \"definición\" en texto negro peso negrita del mismo tamaño, dispuestos verticalmente con espaciado interno amplio entre elementos.",
+    "_generated": {
+      "hash": "5bcdbfad333ac54f825c98d763a5ab7c",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:55:37.348Z"
     }
   },
   {
@@ -79,6 +97,12 @@
           "classes": "mb-base"
         }
       ]
+    },
+    "visualDescription": "Componente de lista descriptiva con fondo blanco y borde gris claro de 1px. Cada entrada contiene un término en texto gris oscuro pequeño y su definición en texto negro regular, apilados verticalmente. Presenta tres grupos término-definición organizados en disposición vertical, ocupando el ancho completo del contenedor.",
+    "_generated": {
+      "hash": "61a7526800e96d39c486dc068f3ce95d",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:55:46.668Z"
     }
   },
   {
@@ -114,6 +138,12 @@
           "classes": "flex-1 pr-base"
         }
       ]
+    },
+    "visualDescription": "Componente de lista descriptiva con fondo blanco y borde gris claro de 1px. Tres grupos de término-definición distribuidos horizontalmente en una sola fila, cada uno con término en texto gris oscuro pequeño arriba y definición en texto negro regular debajo. Los elementos están espaciados uniformemente a lo largo del ancho del contenedor.",
+    "_generated": {
+      "hash": "31480fcd7f8f4ff3cb0829608e88dba4",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:55:46.668Z"
     }
   },
   {
@@ -176,6 +206,12 @@
           "classes": "w-1/3 mb-base pr-base"
         }
       ]
+    },
+    "visualDescription": "Componente de lista descriptiva con fondo blanco y borde gris claro de 1px. Seis grupos de término-definición organizados en grilla de 2 filas por 3 columnas, cada grupo muestra término en texto gris oscuro pequeño y definición en texto negro regular apilados verticalmente. Los elementos mantienen espaciado uniforme horizontal y vertical entre todas las celdas de la grilla.",
+    "_generated": {
+      "hash": "a0aa7da84bb1ce42bde0c6298c8a4bb2",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:55:46.668Z"
     }
   },
   {
@@ -239,6 +275,12 @@
           "classes": "lg:flex py-sm"
         }
       ]
+    },
+    "visualDescription": "Lista de definiciones con fondo blanco, sin bordes visibles entre elementos. Labels en texto gris oscuro de peso normal, valores en texto negro en negrita. Espaciado vertical generoso entre pares de término-definición, layout de dos columnas con labels alineados a la izquierda y valores alineados a la derecha.",
+    "_generated": {
+      "hash": "b597699c30a7e4b4d924449a0c703433",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:55:56.804Z"
     }
   },
   {
@@ -313,6 +355,12 @@
           "classes": "lg:flex -mb-px border-t border-b border-neutral-base"
         }
       ]
+    },
+    "visualDescription": "Lista de definiciones con fondo blanco y bordes grises horizontales de 1px separando cada fila. Labels en texto gris oscuro de peso normal en columna izquierda, valores en texto negro de peso normal en columna derecha. Estructura tabular compacta con padding vertical reducido en cada fila, creando una apariencia de tabla con líneas divisorias.",
+    "_generated": {
+      "hash": "de01e8430b745275266e21b3f946e874",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:55:56.804Z"
     }
   },
   {
@@ -387,6 +435,12 @@
           "classes": "lg:flex -mb-px border-t border-b border-neutral-base"
         }
       ]
+    },
+    "visualDescription": "Lista de definiciones con fondo blanco y bordes grises horizontales de 1px separando filas. Labels en texto gris oscuro de peso normal en columna izquierda, valores numéricos alineados a la derecha en texto negro de peso normal. Estructura tabular con padding vertical uniforme, valores numéricos formateados con separadores de miles y símbolo de moneda, diseño optimizado para mostrar datos financieros.",
+    "_generated": {
+      "hash": "b6d1212d19ed7b5f6ce25b015b74686e",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:55:56.804Z"
     }
   },
   {
@@ -404,6 +458,12 @@
         }
       ],
       "classes": "inline-block p-base border border-neutral-base rounded-sm"
+    },
+    "visualDescription": "Bloque con borde gris claro conteniendo texto \"45\" en negro grande y negrita, seguido de un ícono cuadrado pequeño. Arriba aparece \"Expedientes abiertos +\" en texto pequeño gris. Abajo hay un enlace azul subrayado \"Ver todos\". Fondo blanco con padding generoso.",
+    "_generated": {
+      "hash": "406611b5b09a34fa70e8ed5915b3ec6e",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:56:06.329Z"
     }
   },
   {
@@ -432,6 +492,12 @@
       "attributes": {
         "id": "description"
       }
+    },
+    "visualDescription": "Bloque con borde gris claro mostrando dos líneas de texto negro. Primera línea dice \"Mínimo\" en tamaño pequeño, segunda línea dice \"definición\" en tamaño normal. Fondo blanco con padding mínimo. Layout vertical compacto sin elementos interactivos visibles.",
+    "_generated": {
+      "hash": "d0dcb9a0aebab6cd86566ad15f7e6616",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:56:06.329Z"
     }
   }
 ] %}

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

@@ -7,6 +7,12 @@
         "html": "Más información"
       },
       "caller": "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid distinctio mollitia itaque placeat voluptatibus, veritatis recusandae odio facere corporis laboriosam quam quia sequi, possimus consequatur enim veniam eius soluta esse.</p>"
+    },
+    "visualDescription": "Caja rectangular con borde gris de 1px y fondo blanco. Contiene un label \"por defecto\" en texto negro regular tamaño estándar en la parte superior, y un enlace \"Más información\" en azul con flecha triangular negra apuntando hacia la derecha.",
+    "_generated": {
+      "hash": "7f6c9ebf1ffd1dcac9a138e4c7e6d1d3",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:56:13.701Z"
     }
   },
   {
@@ -19,6 +25,12 @@
       },
       "caller": "<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates eum cupiditate quod minima consequuntur, eveniet aspernatur eius, consectetur ad, a enim atque dicta, repellat voluptatum iusto hic perspiciatis laboriosam unde.</p>",
       "open": true
+    },
+    "visualDescription": "Caja rectangular con borde gris de 1px y fondo blanco. Contiene un label \"expandido\" en texto negro regular tamaño estándar en la parte superior, un enlace \"Más información\" en azul con flecha triangular negra apuntando hacia abajo, y un párrafo de texto Lorem Ipsum en color gris oscuro con fuente regular tamaño estándar que ocupa múltiples líneas.",
+    "_generated": {
+      "hash": "3b3653e91b709cd9e76455a257df3779",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:56:13.701Z"
     }
   },
   {
@@ -28,6 +40,12 @@
         "html": "Más información <em>actualizada</em>"
       },
       "caller": "<p>Lorem ipsum dolor, sit amet consectetur, adipisicing elit. Quae omnis ipsa eius dolorum, maiores! Labore quaerat nam pariatur minima consectetur, tempora magnam. At sequi quidem exercitationem velit id, pariatur, animi.</p>"
+    },
+    "visualDescription": "Caja rectangular con borde gris de 1px y fondo blanco. Contiene un label \"con HTML\" en texto negro regular tamaño estándar en la parte superior, y un enlace \"Más información actualizable\" en azul donde \"actualizable\" aparece subrayado, acompañado de una flecha triangular negra apuntando hacia la derecha.",
+    "_generated": {
+      "hash": "25cd77d19a84bb4d0e2b601b821f2658",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:56:13.701Z"
     }
   },
   {
@@ -40,6 +58,12 @@
       "classes": "p-base bg-primary-light text-primary-base",
       "containerClasses": "p-base",
       "caller": "<p>Lorem ipsum dolor, sit amet <strong>consectetur</strong>, adipisicing elit. Quae omnis ipsa eius dolorum, maiores! Labore quaerat nam pariatur minima consectetur, tempora magnam. At sequi quidem exercitationem velit id, pariatur, animi.</p>"
+    },
+    "visualDescription": "Elemento details expandible con borde gris claro de 1px, fondo blanco, y esquinas redondeadas. Contiene un título en texto negro regular tamaño pequeño, seguido de un área expandible con fondo celeste claro que muestra un enlace en color azul verdoso con flecha triangular desplegable a la izquierda. El contenedor ocupa el ancho completo disponible.",
+    "_generated": {
+      "hash": "0fbd85e29b5a61a7466220e276a6cb31",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:56:20.971Z"
     }
   }
 ] %}

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

@@ -92,6 +92,12 @@
         "aria-modal": true
       },
       "caller": defaultExample
+    },
+    "visualDescription": "Sección rectangular con fondo gris muy claro y borde gris medio de 1px. Contiene título en texto negro de peso regular, alineado a la izquierda. Botón con texto azul \"Abrir modal\", borde azul de 1px, fondo transparente, esquinas ligeramente redondeadas, ubicado debajo del título.",
+    "_generated": {
+      "hash": "9a0a0b1d95255904f1837581630760c6",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:56:28.446Z"
     }
   },
   {
@@ -112,6 +118,12 @@
         "aria-modal": true
       },
       "caller": secondaryExample
+    },
+    "visualDescription": "Sección rectangular con fondo gris muy claro y borde gris medio de 1px. Contiene título en texto negro de peso regular, alineado a la izquierda. Botón con texto azul \"Abrir modal con acciones secundarias\", borde azul de 1px, fondo transparente, esquinas ligeramente redondeadas, ubicado debajo del título.",
+    "_generated": {
+      "hash": "3ab3fe4bfc63f129d5204da7f2f1f5ba",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:56:28.446Z"
     }
   },
   {
@@ -133,6 +145,12 @@
         "aria-modal": true
       },
       "caller": javascriptExample
+    },
+    "visualDescription": "Sección rectangular con fondo gris muy claro y borde gris medio de 1px. Contiene título en texto negro de peso regular, alineado a la izquierda. Botón con texto azul \"Abrir modal con JavaScript\", borde azul de 1px, fondo transparente, esquinas ligeramente redondeadas, ubicado debajo del título.",
+    "_generated": {
+      "hash": "f0663669cc4aa00796d3f3a445bda4f6",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:56:28.446Z"
     }
   }
 ] %}

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

@@ -5,6 +5,12 @@
     "data": {
       "text": "Por defecto",
       "caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>"
+    },
+    "visualDescription": "Botón dropdown con texto en azul (color de enlace), seguido de un ícono de caret hacia abajo. Borde azul de 1px con esquinas redondeadas, fondo blanco. Tamaño compacto con padding interno moderado.",
+    "_generated": {
+      "hash": "eee3661d76bcedbe8940c9d65b3a6b5e",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:56:34.969Z"
     }
   },
   {
@@ -14,6 +20,12 @@
       "text": "Activo",
       "classes": "ds-active",
       "caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>"
+    },
+    "visualDescription": "Botón dropdown con texto en azul (color de enlace), seguido de un ícono de caret hacia abajo. Borde azul de 1px con esquinas redondeadas, fondo blanco. Tamaño compacto con padding interno moderado.",
+    "_generated": {
+      "hash": "f8c3fbfe2c8ec3e58f6c0dfb01761fcf",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:56:34.969Z"
     }
   },
   {
@@ -23,6 +35,12 @@
       "text": "Hover",
       "classes": "ds-hover",
       "caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>"
+    },
+    "visualDescription": "Botón dropdown con texto en azul (color de enlace), seguido de un ícono de caret hacia abajo. Borde azul de 1px con esquinas redondeadas, fondo blanco. Tamaño compacto con padding interno moderado.",
+    "_generated": {
+      "hash": "72ae2e9faa49c39a7fea6436cb38c782",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:56:34.969Z"
     }
   },
   {
@@ -32,6 +50,12 @@
       "text": "Focus",
       "classes": "ds-focus",
       "caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>"
+    },
+    "visualDescription": "Botón rectangular con fondo amarillo brillante, texto negro en peso medio, y borde amarillo oscuro de 2px. Incluye un icono de flecha hacia abajo a la derecha del texto. El botón tiene padding interno generoso y esquinas ligeramente redondeadas.",
+    "_generated": {
+      "hash": "ed4cd45f7add2c8e30765d9573b0461a",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:56:44.627Z"
     }
   },
   {
@@ -41,6 +65,12 @@
       "text": "Primario",
       "classes": "c-dropdown--primary",
       "caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>"
+    },
+    "visualDescription": "Botón rectangular con fondo azul oscuro sólido, texto blanco en peso medio, sin borde visible. Incluye un icono de flecha hacia abajo a la derecha del texto. El botón tiene padding interno generoso y esquinas ligeramente redondeadas.",
+    "_generated": {
+      "hash": "003a979bb14b955b7f4c7b34f93f6750",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:56:44.627Z"
     }
   },
   {
@@ -49,6 +79,12 @@
       "text": "Transparente",
       "classes": "c-dropdown--transparent",
       "caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>"
+    },
+    "visualDescription": "Botón rectangular con fondo transparente (blanco), texto azul en peso normal, sin borde visible. Incluye un icono de flecha hacia abajo a la derecha del texto. El botón tiene padding interno estándar y esquinas ligeramente redondeadas.",
+    "_generated": {
+      "hash": "d71157e76dd30d0fad13530154c73b12",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:56:44.627Z"
     }
   },
   {
@@ -57,6 +93,12 @@
       "text": "Header",
       "classes": "c-dropdown--header",
       "caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>"
+    },
+    "visualDescription": "Dropdown con botón que muestra texto negro tamaño estándar, seguido de un ícono de caret descendente. El botón tiene fondo blanco, borde gris de 1px, padding moderado, y esquinas ligeramente redondeadas. El componente está contenido dentro de un rectángulo con borde gris claro.",
+    "_generated": {
+      "hash": "9039907d2361c9406e3da91fe723cec1",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:56:53.842Z"
     }
   },
   {
@@ -65,6 +107,12 @@
       "text": "Grande",
       "classes": "c-dropdown--lg",
       "caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>"
+    },
+    "visualDescription": "Dropdown con botón que muestra texto azul mediano, seguido de un ícono de caret descendente. El botón tiene fondo blanco, borde azul de 1-2px, padding compacto, y esquinas redondeadas. Encima del botón aparece un label en texto negro pequeño.",
+    "_generated": {
+      "hash": "f388215b873fd00af81354e864f8867a",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:56:53.842Z"
     }
   },
   {
@@ -73,6 +121,12 @@
       "text": "Botón pequeño con texto muy largo",
       "classes": "c-dropdown--sm",
       "caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>"
+    },
+    "visualDescription": "Dropdown con botón que muestra texto azul de tamaño pequeño con una línea larga de contenido, seguido de un ícono de caret descendente. El botón tiene fondo blanco, borde azul de 1-2px, padding compacto, y esquinas redondeadas. Encima del botón aparece un label en texto negro pequeño.",
+    "_generated": {
+      "hash": "29996df13651ec582e8940c7dc73d131",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:56:53.842Z"
     }
   },
   {
@@ -82,6 +136,12 @@
       "text": "Botón pequeño con texto muy largo",
       "classes": "c-dropdown--has-selection c-dropdown--sm",
       "caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>"
+    },
+    "visualDescription": "Botón dropdown con texto azul y fondo blanco. Borde azul de 1px con esquinas redondeadas, ícono de flecha hacia abajo en el lado derecho. Altura compacta con padding ajustado alrededor del texto.",
+    "_generated": {
+      "hash": "fd973ca52fc60cbf2fc17b1db0440266",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:57:02.547Z"
     }
   },
   {
@@ -90,6 +150,12 @@
       "text": "Deshabilitado",
       "disabled": true,
       "caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>"
+    },
+    "visualDescription": "Botón dropdown con texto gris claro y fondo gris muy claro. Borde gris claro de 1px con esquinas redondeadas, ícono de flecha hacia abajo gris en el lado derecho. Altura estándar con apariencia visual inactiva, sin interactividad disponible.",
+    "_generated": {
+      "hash": "d583f61e924e2fe38ed2de1ab7602c2d",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:57:02.547Z"
     }
   },
   {
@@ -99,6 +165,12 @@
       "text": "Clases en container",
       "classesContainer": "inline-block p-base bg-primary-light",
       "caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>"
+    },
+    "visualDescription": "Botón dropdown con texto azul y fondo blanco. Borde azul de 1px con esquinas redondeadas, ícono de flecha hacia abajo en el lado derecho. Altura estándar con padding uniforme alrededor del contenido.",
+    "_generated": {
+      "hash": "3e285b17d8635cdaf1ad7a7d2607029d",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:57:02.547Z"
     }
   },
   {
@@ -108,6 +180,12 @@
       "text": "Clases al contenido del tooltip",
       "classesTooltip": "max-h-64 overflow-y-auto",
       "caller": "<div class=' w-64 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-64 '></div></div>"
+    },
+    "visualDescription": "Contenedor rectangular con fondo blanco y borde gris claro de 1px. Botón dropdown con texto azul y flecha descendente, borde azul de 1px, fondo blanco. Label superior en texto gris oscuro, peso normal, tamaño pequeño.",
+    "_generated": {
+      "hash": "aac059a73763e993a75cb16b0c0b93af",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:57:11.543Z"
     }
   },
   {
@@ -118,6 +196,12 @@
       "classes": "w-full justify-between",
       "classesTooltip": "w-max max-h-40 overflow-y-auto",
       "caller": "<div class=' p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-64 '><div style=' width:120px '></div></div></div>"
+    },
+    "visualDescription": "Contenedor rectangular con fondo gris muy claro y borde gris medio de 1px. Campo dropdown con texto negro, fondo blanco, borde gris oscuro de 1px, flecha arriba/abajo a la derecha. Label superior en texto negro, peso negrita, tamaño pequeño.",
+    "_generated": {
+      "hash": "97e9607a93b27a66e32da4373b49fd95",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:57:11.543Z"
     }
   },
   {
@@ -132,6 +216,12 @@
         "data-aria-modal": "false",
         "data-aria-label": "Información adicional"
       }
+    },
+    "visualDescription": "Contenedor rectangular con fondo blanco y borde gris claro de 1px. Botón con texto azul seguido de símbolo más, borde azul de 1px, fondo blanco, esquinas redondeadas. Label superior en texto negro, peso normal, tamaño pequeño.",
+    "_generated": {
+      "hash": "73190343588ade90b3b32bf3f7d173e0",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:57:11.543Z"
     }
   }
 ] %}

package/src/templates/components/error-message/_examples.error-message.njk

@@ -5,6 +5,12 @@
     "description": "Por accesibilidad, los mensajes de error deben incluir la palabra \"error\", para que no recaiga tan sólo en el color el hecho de que es un mensaje de error.",
     "data": {
       "text": "Esto es un mensaje de error"
+    },
+    "visualDescription": "Mensaje de error con fondo blanco, borde gris claro de 1px, y esquinas redondeadas. Contiene un título en negro peso normal arriba y texto en rojo debajo. Padding generoso alrededor del contenido.",
+    "_generated": {
+      "hash": "f1044fcd67e3fad409982f937cbed6eb",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:57:17.425Z"
     }
   },
   {
@@ -12,6 +18,12 @@
     "description": "Por accesibilidad, los mensajes de error deben incluir la palabra \"error\", para que no recaiga tan sólo en el color el hecho de que es un mensaje de error.",
     "data": {
       "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 mr-xs align-baseline text-alert-base inline-block' role='img' aria-label='Alerta'><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>Esto es un mensaje de error con HTML"
+    },
+    "visualDescription": "Mensaje de error con fondo blanco, borde gris claro de 1px, y esquinas redondeadas. Contiene un título en negro peso normal arriba y texto en rojo con icono de advertencia triangular rojo a la izquierda debajo. Padding generoso alrededor del contenido.",
+    "_generated": {
+      "hash": "da463a15bc5ce8083452e0ca3de34903",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:57:17.425Z"
     }
   }
 ] %}