desy-html 15.0.3 → 16.0.0

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

@@ -24,6 +24,12 @@
           "disabled": true
         }
       ]
+    },
+    "visualDescription": "Dropdown select con label \"por defecto\" en texto negro pequeño arriba. Campo rectangular con fondo blanco, borde gris de 1px, padding medio, texto \"Opción 2\" negro alineado a la izquierda, icono de flecha gris apuntando hacia abajo a la derecha. Label descriptivo \"Esta es un label\" en gris claro debajo del título.",
+    "_generated": {
+      "hash": "50e984dcaa02d1931cc408cc58083d7f",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:13:17.504Z"
     }
   },
   {
@@ -51,6 +57,12 @@
           "disabled": true
         }
       ]
+    },
+    "visualDescription": "Dropdown select con label \"deshabilitado\" en texto negro pequeño arriba. Campo rectangular con fondo gris muy claro (#f5f5f5), borde gris tenue de 1px, padding medio, texto \"Opción 2\" gris atenuado alineado a la izquierda, icono de flecha gris claro apuntando hacia abajo a la derecha. Label descriptivo \"Esta es un label\" en gris claro debajo del título, apariencia visualmente inactiva.",
+    "_generated": {
+      "hash": "aa1969045e310a4272e2e7ee800fbd6e",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:13:17.504Z"
     }
   },
   {
@@ -83,6 +95,12 @@
           "text": "Opción 3"
         }
       ]
+    },
+    "visualDescription": "Dropdown select con label \"placeholder\" en texto negro pequeño arriba. Campo rectangular con fondo blanco, borde gris de 1px, padding medio, texto \"Choose an option\" gris claro alineado a la izquierda, icono de flecha gris apuntando hacia abajo a la derecha. Label descriptivo \"Esta es un label\" en gris claro debajo del título.",
+    "_generated": {
+      "hash": "ea5f57e900141f23399190acdfea0cbc",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:13:17.504Z"
     }
   },
   {
@@ -158,6 +176,12 @@
           "text": "Opción 6"
         }
       ]
+    },
+    "visualDescription": "Dropdown select con borde gris de 1px, fondo blanco, esquinas redondeadas. Label negro en peso normal arriba del campo. Icono chevron gris apuntando hacia abajo en el extremo derecho del campo. Texto seleccionado en negro sobre fondo blanco.",
+    "_generated": {
+      "hash": "f5e3d8bfb775cbb8d86afaf0c56fa97d",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:13:26.720Z"
     }
   },
   {
@@ -189,6 +213,12 @@
           "text": "Opción 3"
         }
       ]
+    },
+    "visualDescription": "Dropdown select con borde rojo de 2px, fondo blanco, esquinas redondeadas. Label negro en peso normal arriba, texto gris debajo del label, texto rojo debajo del campo. Botón seleccionado con borde negro, fondo blanco, texto negro, icono X rojo a la derecha.",
+    "_generated": {
+      "hash": "c26a244e36a845de69498697ed7fe8c4",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:13:26.720Z"
     }
   },
   {
@@ -216,6 +246,12 @@
           "disabled": true
         }
       ]
+    },
+    "visualDescription": "Dropdown select ocupando el 100% del ancho del contenedor, borde gris de 1px, fondo blanco, esquinas redondeadas. Label negro en peso normal arriba del campo. Icono chevron gris apuntando hacia abajo alineado al extremo derecho. Texto seleccionado en negro sobre fondo blanco.",
+    "_generated": {
+      "hash": "fe5c3562a0204afdeebbb59c8448ea58",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:13:26.720Z"
     }
   },
   {
@@ -252,6 +288,12 @@
           "disabled": true
         }
       ]
+    },
+    "visualDescription": "Select desplegable con label en negro, contenedor con borde rojo de 2px, fondo blanco, y texto \"Opción 2\" seleccionado. Mensaje de error en rojo debajo del campo indicando validación fallida. Altura estándar del select con flecha dropdown negra a la derecha.",
+    "_generated": {
+      "hash": "4371662f21e81c42c3f914b60f164af9",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:13:35.628Z"
     }
   },
   {
@@ -279,6 +321,12 @@
           "disabled": true
         }
       ]
+    },
+    "visualDescription": "Select desplegable con label en negro, texto \"Opción 2\" visible, sin borde visible o con borde muy sutil, fondo transparente o blanco. Altura estándar del componente con flecha dropdown negra. Texto \"Esto es un label\" aparece entre el encabezado y el select.",
+    "_generated": {
+      "hash": "4c2e2a1e277432f3142570c3180b1afb",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:13:35.628Z"
     }
   },
   {
@@ -306,6 +354,12 @@
           "disabled": true
         }
       ]
+    },
+    "visualDescription": "Select desplegable compacto con label en negro arriba, texto \"Opción 2\" seleccionado, borde gris de 1px, fondo blanco. Altura reducida del campo select con padding mínimo. Texto \"Esto es un label\" entre el encabezado y el componente, flecha dropdown negra a la derecha.",
+    "_generated": {
+      "hash": "89b16841c1f253dd851c8d6c7bf7866f",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:13:35.628Z"
     }
   }
 ] %}

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

@@ -37,7 +37,7 @@
     visuallyHiddenText: params.errorMessage.visuallyHiddenText
   }) | indent(2) | trim }}
 {% endif %}
-  <select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded-sm font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} c-select--error border-alert-base ring-2 ring-alert-base {% endif %}" id="{{ params.id }}" name="{{ params.name }}" {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %} {%- if params.errorMessage %} aria-errorMessage="{{ errorId }}" aria-invalid="true"{% endif %} {{-" disabled" if params.disabled }} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  <select class="c-select block mt-sm transition duration-150 ease-in-out {% if params.errorMessage %}c-select--error border-alert-base ring-2 ring-alert-base{% else %}border-black{% endif %} rounded-sm font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base {%- if params.classes %} {{ params.classes }}{% endif %}" id="{{ params.id }}" name="{{ params.name }}" {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %} {%- if params.errorMessage %} aria-errorMessage="{{ errorId }}" aria-invalid="true"{% endif %} {{-" disabled" if params.disabled }} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   {% for item in params.items %}
     {% if item %}
       {% if item.optgroup %}

package/src/templates/components/skip-link/_examples.skip-link.njk

@@ -6,6 +6,12 @@
     "data": {
       "text": "Saltar al contenido principal",
       "href": "#content"
+    },
+    "visualDescription": "Componente skip-link con un rectángulo delgado de borde gris claro sobre fondo blanco. Contiene texto negro pequeño alineado a la izquierda. El elemento ocupa todo el ancho disponible con padding mínimo.",
+    "_generated": {
+      "hash": "43ab4ecc6459d5d946643b08a94efd25",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:13:41.980Z"
     }
   },
   {
@@ -15,6 +21,12 @@
       "classes": "ds-focus",
       "text": "Saltar al contenido principal",
       "href": "#content"
+    },
+    "visualDescription": "Componente skip-link con una barra amarilla brillante que ocupa todo el ancho. Contiene texto negro subrayado centrado horizontalmente. El fondo amarillo sólido cubre completamente el área del componente con padding vertical visible.",
+    "_generated": {
+      "hash": "3fe73c4cd84250602d475a36ba56e9f2",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:13:41.980Z"
     }
   }
 ] %}

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

@@ -9,6 +9,18 @@
     "data": {
       "text": "Espere por favor",
       "classes": "text-neutral-base"
+    },
+    "visualDescription": "Spinner circular animado con anillo de borde grueso, combinando color gris claro en la mayor parte y segmento azul en rotación. Dimensiones medianas (aproximadamente 40-50px de diámetro), centrado horizontalmente en contenedor rectangular blanco con borde gris claro de 1px. Incluye texto descriptivo negro pequeño posicionado a la izquierda superior del contenedor.",
+    "_generated": {
+      "hash": "8511efaf4def7cfce2399dffb0b90975",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:13:51.449Z"
+    },
+    "visualDescription": "Spinner circular animado compuesto por un anillo con borde grueso, color gris claro en la mayor parte del círculo y azul en un segmento, creando efecto de rotación. El spinner tiene tamaño mediano (aproximadamente 40-50px de diámetro) y está centrado horizontalmente dentro de un contenedor rectangular con fondo blanco y borde gris claro de 1px.",
+    "_generated": {
+      "hash": "6780338ece7add80c4ca7b880d2da372",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:13:51.449Z"
     }
   },
   {
@@ -16,18 +28,36 @@
     "description": "Usa las clases de tamaño de texto para dar tamaño al Spinner.",
     "data": {
       "classes": "text-xs"
+    },
+    "visualDescription": "Spinner circular animado de dimensiones reducidas (aproximadamente 16-20px de diámetro) con anillo de borde delgado, mostrando color gris claro en la mayoría del círculo y segmento azul en rotación. Está centrado horizontalmente dentro de contenedor rectangular con fondo blanco y borde gris claro de 1px. Texto descriptivo negro pequeño aparece en la esquina superior izquierda del contenedor.",
+    "_generated": {
+      "hash": "a61e977d2f10f747f279648b7a88d393",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:13:51.449Z"
     }
   },
   {
     "name": "Tamaño lg",
     "data": {
       "classes": "text-lg"
+    },
+    "visualDescription": "Spinner circular animado de tamaño mediano-grande centrado horizontalmente. Ícono de carga de color gris oscuro con animación de rotación. Fondo blanco sin bordes visibles en el contenedor.",
+    "_generated": {
+      "hash": "8d32fc49a76315889fc61c2e944cefe0",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:13:59.283Z"
     }
   },
   {
     "name": "Tamaño 6xl",
     "data": {
       "classes": "text-6xl"
+    },
+    "visualDescription": "Spinner circular animado de tamaño extra grande centrado horizontalmente. Ícono de carga de color gris oscuro con animación de rotación continua. Fondo blanco sin bordes, ocupando mayor espacio vertical que proporcional al tamaño del spinner.",
+    "_generated": {
+      "hash": "fd91c6a9f4ef3cfadf3f09960c34254a",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:13:59.283Z"
     }
   },
   {
@@ -35,12 +65,24 @@
     "description": "Usa las clases de color de texto para dar color al Spinner.",
     "data": {
       "classes": "text-neutral-base"
+    },
+    "visualDescription": "Spinner circular animado de tamaño mediano centrado horizontalmente. Ícono de carga de color gris medio con animación de rotación. Fondo blanco sin bordes visibles, con espaciado vertical equilibrado alrededor del elemento.",
+    "_generated": {
+      "hash": "8dbff641c7cfd55b74792bb69982882b",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:13:59.283Z"
     }
   },
   {
     "name": "color primario",
     "data": {
       "classes": "text-primary-base"
+    },
+    "visualDescription": "Spinner circular animado con borde azul primario de grosor medio. El spinner tiene un tamaño compacto (aproximadamente 20-30px de diámetro) y presenta animación de rotación continua. Fondo transparente con el indicador de carga centrado horizontalmente en el contenedor.",
+    "_generated": {
+      "hash": "aa215a43392aa849148d145595d26725",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:14:07.948Z"
     }
   },
   {
@@ -48,6 +90,12 @@
     "description": "Usa las clases de tamaño para cambiar las dimensiones del contenedor.",
     "data": {
       "classes": "border border-neutral-light w-60 h-60"
+    },
+    "visualDescription": "Spinner circular animado con borde azul primario de grosor medio. El contenedor presenta borde gris claro de 1px, padding interno visible, y título descriptivo en negro arriba del spinner. El spinner mantiene animación de rotación continua dentro de un área rectangular delimitada.",
+    "_generated": {
+      "hash": "416dacab404dafef1a6c659c714f1b3f",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:14:07.948Z"
     }
   }
-] %}
+] %}

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

@@ -7,6 +7,12 @@
       "icon": {
         "type": "success"
       }
+    },
+    "visualDescription": "Componente rectangular con borde gris delgado y fondo blanco. Contiene texto pequeño gris en la parte superior indicando tipo, seguido de texto negro en negrita con un checkmark verde al lado derecho.",
+    "_generated": {
+      "hash": "210a3c994639ff72ccf3aa8da8c78331",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:14:54.477Z"
     }
   },
   {
@@ -17,6 +23,12 @@
         "type": "alert"
       },
       "classes": "text-alert-base"
+    },
+    "visualDescription": "Componente rectangular con borde gris delgado y fondo blanco. Contiene texto pequeño gris en la parte superior indicando tipo, seguido de texto rojo en negrita con un ícono triangular de advertencia rojo al lado derecho.",
+    "_generated": {
+      "hash": "af93f448329f211c857158a43fcc9ad1",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:14:54.478Z"
     }
   },
   {
@@ -26,6 +38,12 @@
       "icon": {
         "type": "loading"
       }
+    },
+    "visualDescription": "Componente rectangular con borde gris delgado y fondo blanco. Contiene texto pequeño gris en la parte superior indicando tipo, seguido de texto negro con un ícono circular de progreso animado al lado derecho.",
+    "_generated": {
+      "hash": "0cdafd3c8ecb35991c0a071f05734b14",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:14:54.478Z"
     }
   },
   {
@@ -36,6 +54,12 @@
         "type": "error"
       },
       "classes": "text-alert-base"
+    },
+    "visualDescription": "Caja rectangular con borde gris claro de 1px y fondo blanco. Contiene encabezado en texto negro pequeño regular indicando tipo, seguido de texto en rojo negrita con ícono circular de información rojo adyacente.",
+    "_generated": {
+      "hash": "cb4f2b0375a7d930e44de5dbcb9f50d0",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:15:01.600Z"
     }
   },
   {
@@ -45,6 +69,12 @@
       "icon": {
         "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 text-primary-base' aria-hidden='true' focusable='false'><path d='M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm0 117.51a10 10 0 1110-10 10 10 0 01-10 10zm9.17-39.08a2.5 2.5 0 00-1.67 2.36v1.71a7.5 7.5 0 01-15 0v-10A7.5 7.5 0 0170 65a12.5 12.5 0 10-12.5-12.5 7.5 7.5 0 01-15 0 27.5 27.5 0 1136.67 25.93z' fill='currentColor'/></svg>"
       }
+    },
+    "visualDescription": "Caja rectangular con borde gris claro de 1px y fondo blanco. Contiene encabezado en texto negro pequeño regular, seguido de texto en negro negrita con ícono circular de información negro adyacente.",
+    "_generated": {
+      "hash": "7787f447d3996d45fb2da6a72218112d",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:15:01.601Z"
     }
   }
-] %}
+] %}

package/src/templates/components/status-item/_examples.status-item.njk

@@ -9,6 +9,12 @@
         "text": "Título"
       },
       "caller": "<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> item del Título</span></button>"
+    },
+    "visualDescription": "Contenedor rectangular con borde gris claro, fondo blanco. En la esquina superior izquierda aparece texto indicando el tipo en color gris oscuro. Dentro del contenedor hay un label en negro alineado a la izquierda, y un enlace en azul alineado a la derecha.",
+    "_generated": {
+      "hash": "e75120ac83d6febec43b8a24f2debbdc",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:14:17.308Z"
     }
   },
   {
@@ -48,6 +54,12 @@
         }
       },
       "caller": "<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> los datos de término y definición y el resto</span></button>"
+    },
+    "visualDescription": "Contenedor rectangular con borde gris claro, fondo blanco. En la esquina superior izquierda aparece texto indicando el tipo en gris oscuro. Dentro hay una tabla con tres columnas: la primera muestra texto de términos en negro, la segunda muestra definiciones en negro, y la tercera contiene un enlace azul y una marca de verificación verde con indicador de estado. Las tres filas repiten esta estructura con fondos alternados gris muy claro y blanco.",
+    "_generated": {
+      "hash": "68014e553fa91c3e998340385bd96c77",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:14:17.308Z"
     }
   },
   {
@@ -58,6 +70,12 @@
         "html": "Autorización para la consulta de datos de las personas de la unidad familiar. <span class='text-neutral-dark'>(Documento condicionado)</span>"
       },
       "caller": "<button class='c-button c-button--transparent'>Aportar<span class='sr-only'> Autorización para la consulta de datos de las personas de la unidad familiar</span></button>"
+    },
+    "visualDescription": "Contenedor rectangular con borde gris claro, fondo blanco. En la esquina superior izquierda aparece texto indicando el tipo en gris oscuro. Dentro hay texto negro que describe autorización para consulta de datos, seguido de texto gris entre paréntesis. En la esquina superior derecha del contenedor hay un enlace en azul.",
+    "_generated": {
+      "hash": "f9403633bd941ec3497ef1da6a464445",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:14:17.308Z"
     }
   },
   {
@@ -77,6 +95,12 @@
         }
       },
       "caller": "<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> personas de la unidad familiar</span></button>"
+    },
+    "visualDescription": "Contenedor con borde gris claro de 1px, fondo blanco, y padding interno. Incluye un título negro en la parte superior, un subtexto gris claro debajo, y dos enlaces en la esquina superior derecha: uno azul y otro negro con icono de check.",
+    "_generated": {
+      "hash": "0fb06d9c6fb0f6cff9edcdd966a1b38a",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:14:26.932Z"
     }
   },
   {
@@ -90,6 +114,12 @@
         "html": "<a href='#' class='c-link'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='inline-block self-center w-4 h-4 mr-sm no-underline' role='img' aria-hidden='true'><path d='M100.3 52.2a7.49 7.49 0 00-10.6 0L77.5 64.39V7.5a7.5 7.5 0 00-15 0v56.89L50.3 52.2a7.5 7.5 0 10-10.6 10.6l25 25a7.49 7.49 0 0010.6 0l25-25a7.49 7.49 0 000-10.6zM130 95a10 10 0 00-10 10v12.5a2.5 2.5 0 01-2.5 2.5h-95a2.5 2.5 0 01-2.5-2.5V105a10 10 0 00-20 0v15a20 20 0 0020 20h100a20 20 0 0020-20v-15a10 10 0 00-10-10z' fill='currentColor'/></svg>Descargar modelo</a>"
       },
       "caller": "<button class='c-button c-button--transparent'>Aportar<span class='sr-only'> Autorización para la consulta de datos de las personas de la unidad familiar</span></button>"
+    },
+    "visualDescription": "Contenedor con borde gris claro de 1px, fondo blanco, y padding interno. Contiene un texto descriptivo gris oscuro alineado a la izquierda, un enlace azul en la esquina superior derecha, y un enlace de descarga con icono en la parte inferior izquierda en color azul.",
+    "_generated": {
+      "hash": "17dbc44a0f77a35da8adf93090b4f833",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:14:26.932Z"
     }
   },
   {
@@ -103,6 +133,12 @@
         "text": "Iniciado"
       },
       "caller": "<button class='c-button c-button--transparent'>Rellenar<span class='sr-only'> datos adicionales del solicitante</span></button>"
+    },
+    "visualDescription": "Contenedor con borde gris claro de 1px, fondo blanco, y padding interno. Presenta un texto descriptivo gris oscuro alineado a la izquierda y dos elementos en la esquina superior derecha: un enlace azul seguido de una etiqueta negra en mayúsculas.",
+    "_generated": {
+      "hash": "1f36aff4510da5a8e3888d00c2602517",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:14:26.932Z"
     }
   },
   {
@@ -119,6 +155,12 @@
         }
       },
       "caller": "<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> datos adicionales del solicitante</span></button>"
+    },
+    "visualDescription": "Contenedor rectangular con fondo blanco y borde gris claro. Encabezado de texto gris oscuro peso normal alineado a la izquierda. Lado derecho contiene enlace azul y badge negro con ícono de checkmark verde.",
+    "_generated": {
+      "hash": "f35487c1634fee9714f63c2436027155",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:14:36.250Z"
     }
   },
   {
@@ -141,6 +183,12 @@
       },
       "caller": "<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> datos adicionales del solicitante</span></button>",
       "classes": "border-l-4 border-alert-base"
+    },
+    "visualDescription": "Contenedor rectangular con fondo rosa muy claro y borde rojo fino. Encabezado de texto gris oscuro peso normal arriba, mensaje de error en rojo debajo. Lado derecho contiene enlace azul y badge rojo con ícono de advertencia triangular.",
+    "_generated": {
+      "hash": "3f3cb8f24e62daa2416667b71b2d51ba",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:14:36.250Z"
     }
   },
   {
@@ -157,6 +205,12 @@
         }
       },
       "caller": "<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> datos adicionales del solicitante</span></button>"
+    },
+    "visualDescription": "Contenedor rectangular con fondo blanco y borde gris claro. Encabezado de texto gris oscuro peso normal alineado a la izquierda. Lado derecho contiene enlace azul y texto negro con spinner circular animado.",
+    "_generated": {
+      "hash": "234716fffbdcc293e8455c94686a5ec0",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:14:36.250Z"
     }
   },
   {
@@ -179,6 +233,12 @@
       },
       "caller": "<button class='c-button c-button--transparent'>Ver<span class='sr-only'> datos adicionales del solicitante</span></button>",
       "classes": "border-l-4 border-alert-base"
+    },
+    "visualDescription": "Bloque con borde rojo en el lateral izquierdo y fondo rosado claro. Contiene un encabezado en texto negro, texto descriptivo gris, y un enlace azul subrayado. En la esquina superior derecha aparecen dos elementos: un enlace azul y una etiqueta roja con texto blanco.",
+    "_generated": {
+      "hash": "d1bdc62cec77ee077854e1334914f694",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:14:46.799Z"
     }
   },
   {
@@ -202,6 +262,12 @@
         }
       },
       "caller": "<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> acreditación</span></button>"
+    },
+    "visualDescription": "Bloque rectangular con fondo blanco y borde gris claro. Fila horizontal dividida en tres secciones: etiqueta gris a la izquierda, texto negro con enlace azul en el centro, y dos elementos a la derecha (enlace azul y etiqueta verde con checkmark blanco). Layout en disposición horizontal con alineación vertical centrada.",
+    "_generated": {
+      "hash": "be7510c93bda846675b2c0883e5719ba",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:14:46.799Z"
     }
   },
   {
@@ -242,6 +308,12 @@
       },
       "caller": "<button class='c-button c-button--transparent'>Rellenar<span class='sr-only'> datos adicionales del solicitante</span></button>",
       "classes": "border-l-4 border-alert-base"
+    },
+    "visualDescription": "Bloque con borde rosa claro en el lateral izquierdo y fondo blanco. Contiene tres filas de información en formato clave-valor: etiquetas grises a la izquierda y valores negros a la derecha. En la esquina superior derecha aparecen un enlace azul y una etiqueta roja con triángulo de alerta blanco.",
+    "_generated": {
+      "hash": "7e69dd0caea1b30c605e06255fc99720",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:14:46.799Z"
     }
   }
-] %}
+] %}

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

@@ -59,6 +59,12 @@
           }
         ]
       ]
+    },
+    "visualDescription": "Tabla con encabezados de columna en texto gris oscuro, filas de datos con texto negro sobre fondo blanco. Bordes sutiles grises separan las celdas. Tres columnas de ancho variable contienen texto alineado a la izquierda.",
+    "_generated": {
+      "hash": "cf036a0003c6e657e630c6564978a471",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:15:42.810Z"
     }
   },
   {
@@ -134,6 +140,12 @@
           "classes": "lg:text-right"
         }
       ]
+    },
+    "visualDescription": "Tabla con encabezados de columna en texto gris oscuro, filas de datos con texto negro, y fila final de totales en negrita. Fondo blanco uniforme con bordes grises sutiles entre celdas. Cuatro filas de contenido donde la última muestra valores sumados.",
+    "_generated": {
+      "hash": "59ab0eb7aea7d2c36aa967d1379fe50a",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:15:42.810Z"
     }
   },
   {
@@ -197,6 +209,12 @@
           }
         ]
       ]
+    },
+    "visualDescription": "Tabla precedida por título de encabezado en negrita negro. Encabezados de columna en gris oscuro, tres filas de datos con texto negro sobre fondo blanco. Bordes grises sutiles delimitan celdas con contenido alineado a la izquierda.",
+    "_generated": {
+      "hash": "98ac535474137642f2636a581a0506e3",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:15:42.810Z"
     }
   },
   {
@@ -397,6 +415,12 @@
           "aria-label": "Tabla con scroll del ejemplo Tabla con wrapper"
         }
       }
+    },
+    "visualDescription": "Tabla con fondo blanco, bordes grises claros de 1px separando celdas. Encabezados en texto negro normal, primera columna con etiquetas en negrita. Valores monetarios en cada celda con texto negro normal. Diseño de 11 columnas y 3 filas de datos.",
+    "_generated": {
+      "hash": "e4de44465c71632cadc9a7d573daa8c6",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:15:54.179Z"
     }
   },
   {
@@ -460,6 +484,12 @@
           "aria-label": "Tabla con scroll  del ejemplo Tabla no responsive"
         }
       }
+    },
+    "visualDescription": "Tabla con fondo blanco, sin bordes visibles entre celdas. Tres columnas con encabezados en texto gris. Tres filas de datos con etiquetas en la primera columna y valores monetarios alineados en las columnas centrales. Espaciado amplio entre columnas, texto negro normal para datos.",
+    "_generated": {
+      "hash": "ac1edb5e6a66f0788de919dd3c4cc939",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:15:54.179Z"
     }
   },
   {
@@ -664,6 +694,12 @@
         }
       },
       "classes": "relative lg:whitespace-nowrap"
+    },
+    "visualDescription": "Tabla con fondo blanco, bordes grises de 1px delimitando celdas. Diez columnas con encabezados en texto negro. Tres filas de contenido mostrando valores monetarios distribuidos en celdas. Primera columna con etiquetas en texto negro normal.",
+    "_generated": {
+      "hash": "fc90630af4a95c6c93a40a8e9c2f5346",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:15:54.179Z"
     }
   }
-] %}
+] %}

package/src/templates/components/table-advanced/_examples.table-advanced.njk

@@ -61,6 +61,12 @@
         ]
       ],
       "classes": "min-w-full"
+    },
+    "visualDescription": "Tabla con encabezados en texto gris oscuro sobre fondo blanco, organizados en tres columnas. Filas de datos alternadas con fondo blanco, bordes horizontales grises claros de 1px separando cada fila. Datos numéricos con símbolo de euro alineados a la derecha, texto de meses alineado a la izquierda.",
+    "_generated": {
+      "hash": "64fea3cbdabfa03f1752565b7b8c3ce3",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:15:10.765Z"
     }
   },
   {
@@ -140,6 +146,12 @@
         ]
       ],
       "classes": "min-w-full"
+    },
+    "visualDescription": "Tabla con encabezados en texto gris oscuro sobre fondo blanco, estructura de tres columnas con bordes horizontales grises claros de 1px. Filas de datos con fondo blanco mostrando valores monetarios en euros alineados a la derecha. Fila final de totales con fondo blanco, texto en peso regular mostrando suma total de las columnas numéricas.",
+    "_generated": {
+      "hash": "816140ac55bf188f6f7a22ec006b29e1",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:15:10.765Z"
     }
   },
   {
@@ -205,6 +217,12 @@
         ]
       ],
       "classes": "min-w-full"
+    },
+    "visualDescription": "Tabla precedida por título en texto negro en peso negrita sobre fondo blanco. Encabezados de columna en texto gris oscuro, estructura de tres columnas con bordes horizontales grises claros de 1px. Filas de datos con fondo blanco, valores monetarios en euros alineados a la derecha, texto de meses alineado a la izquierda.",
+    "_generated": {
+      "hash": "63ae217f0c53c62c689f31cadaba9bdc",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:15:10.765Z"
     }
   },
   {
@@ -286,6 +304,12 @@
         ]
       ],
       "classes": "min-w-full"
+    },
+    "visualDescription": "Tabla con tres columnas de datos numéricos en euros, encabezados de columna alineados a derecha. Filas de datos con fondo blanco alternado, valores monetarios en negro, fila de totales en negrita al final. Bordes grises claros separando celdas, diseño compacto y estructurado.",
+    "_generated": {
+      "hash": "c7b2e88b7adac474ee93be6fbf4d9644",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:15:20.510Z"
     }
   },
   {
@@ -351,6 +375,12 @@
         ]
       ],
       "classes": "min-w-full"
+    },
+    "visualDescription": "Tabla con tres columnas que incluyen campos de búsqueda en la fila superior con icono de lupa. Encabezados de columna en texto negro, inputs de filtro con borde gris y placeholder de texto claro. Datos monetarios en euros alineados a derecha en filas con fondo blanco, bordes grises definiendo estructura celular.",
+    "_generated": {
+      "hash": "d529644007fd1de475776306806f27e1",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:15:20.510Z"
     }
   },
   {
@@ -441,6 +471,12 @@
         ]
       ],
       "classes": "min-w-full"
+    },
+    "visualDescription": "Tabla con tres columnas donde la primera contiene dropdown con flecha desplegable, las dos restantes tienen campos de búsqueda con icono de lupa. Encabezados en negro, inputs con borde gris de 1px y placeholder visible. Filas de datos con valores monetarios en euros alineados a derecha, fondo blanco y bordes grises separando contenido.",
+    "_generated": {
+      "hash": "88e86903d4c0efc7519bf20933b6b985",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:15:20.510Z"
     }
   },
   {
@@ -572,6 +608,12 @@
         ]
       ],
       "classes": "min-w-full"
+    },
+    "visualDescription": "Tabla con encabezados de columna en texto negro regular, filas con datos numéricos en gris oscuro (con símbolo €), y controles de filtrado mediante selectores dropdown con fondo blanco y borde gris. Tres columnas de datos alineadas: primera con labels de meses, segunda y tercera con valores monetarios. Bordes horizontales gris claro separando las filas, selectores dropdown posicionados en la fila superior para filtrado.",
+    "_generated": {
+      "hash": "120606675cbdc8fd92ee7815fa7a9d05",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:15:34.211Z"
     }
   },
   {
@@ -634,6 +676,12 @@
         ]
       ],
       "classes": "min-w-full"
+    },
+    "visualDescription": "Tabla con checkboxes cuadrados sin marcar en la columna izquierda, encabezado de columnas en texto gris oscuro, y datos organizados en tres columnas. Filas con fondo blanco alternado, bordes horizontales gris tenue, y valores monetarios con símbolo € alineados a la derecha. Checkboxes de selección con borde gris oscuro, datos de meses en texto negro regular en la segunda columna.",
+    "_generated": {
+      "hash": "79d5c1483f9980abc0db8406016f4105",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:15:34.211Z"
     }
   },
   {
@@ -780,6 +828,12 @@
         ]
       ],
       "classes": "min-w-full"
+    },
+    "visualDescription": "Tabla con columna inicial de checkboxes sin marcar, seguida de columna de identificadores alfabéticos, columna con campo de búsqueda con ícono de lupa, y dos columnas de datos con selectores dropdown. Encabezados de columna con íconos de ordenamiento (flechas), bordes gris claro, fila inferior con label de totales en negrita y valores totales. Campos de filtro con fondo blanco, bordes gris, y controles dropdown en columnas de valores monetarios.",
+    "_generated": {
+      "hash": "d8b5bae702b344629d637caf498d99d0",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:15:34.211Z"
     }
   }
 ] %}