desy-html 15.0.3 → 16.0.0

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

@@ -37,6 +37,12 @@
       "attributes": {
         "aria-label": "Paginación"
       }
+    },
+    "visualDescription": "Componente de paginación con seis botones rectangulares alineados horizontalmente. El segundo botón tiene fondo azul claro con texto blanco, los demás tienen fondo blanco con bordes grises y texto gris oscuro. Texto indicador \"10 - 20 de 64\" alineado a la derecha en gris.",
+    "_generated": {
+      "hash": "cf29364d3c2d15c73a9932a03ff9f69c",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:10:57.186Z"
     }
   },
   {
@@ -112,6 +118,12 @@
       "attributes": {
         "aria-label": "Paginación"
       }
+    },
+    "visualDescription": "Componente de paginación con dos menús desplegables(dropdowns) con bordes grises y flechas hacia abajo. Texto negro \"Anterior\" y \"Siguiente\" con números entre los dropdowns. Título \"Seleccione para cargar datos automáticamente\" en negro arriba, indicador \"10 - 20 de 64\" alineado a la derecha en gris.",
+    "_generated": {
+      "hash": "55b31d23e5381f56f8b81a4926c4f77b",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:10:57.186Z"
     }
   },
   {
@@ -156,6 +168,12 @@
       "attributes": {
         "aria-label": "Paginación"
       }
+    },
+    "visualDescription": "Componente de paginación con dos elementos interactivos separados por espaciado horizontal. Texto \"Anterior\" en gris claro con número \"1\" y flecha hacia abajo, texto \"Siguiente\" en azul con flecha hacia abajo. Título \"Seleccione para cargar datos automáticamente\" en negro arriba, indicador \"0 - 10 de 64\" alineado a la derecha en gris.",
+    "_generated": {
+      "hash": "a5b916d8781cf94e65018d2d8cada8b4",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:10:57.186Z"
     }
   },
   {
@@ -200,6 +218,12 @@
       "attributes": {
         "aria-label": "Paginación"
       }
+    },
+    "visualDescription": "Componente de paginación con fondo blanco y borde gris claro. Contiene texto instructivo en gris oscuro, botón numérico con fondo blanco, flecha \"Siguiente\" en azul enlace, y contador de rango en gris oscuro alineado a la derecha. Todos los elementos están distribuidos horizontalmente en una fila con espaciado uniforme.",
+    "_generated": {
+      "hash": "e27f553ccc4937ee06a0c8f2b030d7f4",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:11:07.252Z"
     }
   },
   {
@@ -247,6 +271,12 @@
       "attributes": {
         "aria-label": "Paginación"
       }
+    },
+    "visualDescription": "Componente de paginación con fondo blanco y borde gris claro. Incluye flecha \"Primera\" en azul enlace a la izquierda, flecha \"Anterior\" en azul enlace, botón numérico \"2\" con fondo blanco, flecha \"Siguiente\" en azul enlace, flecha \"Última\" en azul enlace, y contador de rango en gris oscuro a la derecha. Texto instructivo en gris oscuro aparece arriba de los controles de navegación.",
+    "_generated": {
+      "hash": "a5606e9825f0db05a3adbb1f000d6144",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:11:07.252Z"
     }
   },
   {
@@ -328,6 +358,12 @@
       "attributes": {
         "aria-label": "Paginación"
       }
+    },
+    "visualDescription": "Componente de paginación con fondo blanco y borde gris claro. Presenta flecha \"Primera\" en gris claro deshabilitada, flecha \"Anterior\" en gris claro deshabilitada, botón numérico \"1\" con fondo blanco, flecha \"Siguiente\" en azul enlace activo, flecha \"Última\" en azul enlace activo, y contador de rango en gris oscuro a la derecha. Texto instructivo en gris oscuro se ubica en la parte superior.",
+    "_generated": {
+      "hash": "a68282e9b552e18dcc541b4952f3bbd9",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:11:07.252Z"
     }
   },
   {
@@ -398,6 +434,12 @@
       "attributes": {
         "aria-label": "Paginación"
       }
+    },
+    "visualDescription": "Componente de paginación con fondo blanco y borde gris de 1px. Contiene label negro alineado a la izquierda, dos selectores desplegables(numéricos con flechas azules) , texto negro indicando rango de resultados, y selector de ítems por página a la derecha con dropdown numérico. Todos los elementos están distribuidos horizontalmente en una sola fila con espaciado uniforme.",
+    "_generated": {
+      "hash": "6998f5ef06831c65fd7af0aa770891a2",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:11:14.624Z"
     }
   }
 ] %}

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

@@ -5,6 +5,12 @@
     "description": "Recuerda que los pills, por accesibilidad, deben estar rodeados de una etiqueta semántica, normalmente un <code>&lt;li&gt;</code>.",
     "data": {
       "text": "Pill por defecto"
+    },
+    "visualDescription": "Botón pill con fondo blanco, borde gris de 1px, y texto negro en tamaño pequeño. Esquinas completamente redondeadas tipo cápsula. Padding compacto horizontal y vertical que ajusta al contenido del texto.",
+    "_generated": {
+      "hash": "bb6c0792c91c2d5e5291f2b812b0d331",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:11:21.369Z"
     }
   },
   {
@@ -12,6 +18,12 @@
     "data": {
       "text": "Tipo enlace",
       "href": "http://www.google.com"
+    },
+    "visualDescription": "Botón pill con fondo blanco, borde gris de 1px, y texto azul estilo hipervínculo en tamaño pequeño. Esquinas completamente redondeadas tipo cápsula. Padding compacto horizontal y vertical, elemento interactivo con cursor pointer.",
+    "_generated": {
+      "hash": "8105cd9f4bb11afee7f132f3ef84e5d3",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:11:21.369Z"
     }
   },
   {
@@ -20,6 +32,12 @@
       "text": "Tipo enlace con target",
       "href": "http://www.google.com",
       "target": "_blank"
+    },
+    "visualDescription": "Botón pill con fondo blanco, borde gris de 1px, y texto azul estilo hipervínculo en tamaño pequeño. Esquinas completamente redondeadas tipo cápsula. Padding compacto horizontal y vertical, configurado para abrir en nueva pestaña del navegador.",
+    "_generated": {
+      "hash": "72e7979aad41d3895ad47575f389e5af",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:11:21.369Z"
     }
   },
   {
@@ -28,6 +46,12 @@
       "type": "button",
       "text": "Tipo botón",
       "classes": "cursor-pointer"
+    },
+    "visualDescription": "Pill con fondo blanco, borde gris de 1px y bordes redondeados. Texto en negro centrado dentro del elemento. Dimensiones compactas de altura reducida y ancho ajustado al contenido.",
+    "_generated": {
+      "hash": "f6083013ed8b81ecabf472562cab8367",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:11:28.518Z"
     }
   },
   {
@@ -37,6 +61,12 @@
       "type": "button",
       "text": "Hover",
       "classes": "ds-hover"
+    },
+    "visualDescription": "Pill con fondo gris claro, borde gris de 1px y bordes redondeados. Texto en negro centrado dentro del elemento. Dimensiones compactas de altura reducida y ancho ajustado al contenido.",
+    "_generated": {
+      "hash": "25bbf7d3d537641c2ff90b7fe168a9a2",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:11:28.518Z"
     }
   },
   {
@@ -46,6 +76,12 @@
       "type": "button",
       "text": "Focus",
       "classes": "ds-focus"
+    },
+    "visualDescription": "Pill con fondo amarillo, borde negro de 2px y bordes redondeados. Texto en negro centrado dentro del elemento. Dimensiones compactas de altura reducida y ancho ajustado al contenido.",
+    "_generated": {
+      "hash": "f164e9243fe4762a0837e43271c6c0e2",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:11:28.518Z"
     }
   },
   {
@@ -54,6 +90,12 @@
     "data": {
       "text": "Peque pill",
       "classes": "text-sm"
+    },
+    "visualDescription": "Pill de tamaño reducido con texto \"Peque pill\" en color negro sobre fondo blanco. Borde gris claro redondeado que define la forma de cápsula. Dimensiones compactas con padding mínimo alrededor del texto.",
+    "_generated": {
+      "hash": "6a9f1b3e7286b38b3d5651581580c9e2",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:11:37.723Z"
     }
   },
   {
@@ -62,6 +104,12 @@
       "type": "button",
       "html": "Icono derecha pill <svg viewBox='0 0 140 140' class='self-center ml-2' role='img' aria-label='Eliminar' width='.75em ' height='.75em '><path fill='currentColor' d='M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z'/></svg>",
       "classes": "cursor-pointer"
+    },
+    "visualDescription": "Pill con texto \"Icono derecha pill\" en negro sobre fondo blanco, seguido de un ícono \"×\" de cierre alineado a la derecha. Borde gris claro redondeado formando una cápsula horizontal. Padding uniforme que distribuye el espacio entre el texto y el ícono interactivo de cierre.",
+    "_generated": {
+      "hash": "3813aea97639cc68a6ed3af0807473b7",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:11:37.723Z"
     }
   },
   {
@@ -70,6 +118,12 @@
       "type": "button",
       "html": "<svg viewBox='0 0 140 140' class='self-center mr-2' aria-hidden='true' width='.75em ' height='.75em '><path fill='currentColor' d='M35 35a35 35 0 1070 0 35 35 0 10-70 0zM132.78 133.33a66.59 66.59 0 00-125.56 0 5 5 0 004.71 6.67h116.14a5 5 0 004.71-6.67z' /></svg> Icono izquierda pill",
       "classes": "cursor-pointer"
+    },
+    "visualDescription": "Pill que presenta un ícono de usuario a la izquierda seguido del texto \"Icono izquierda pill\" en negro, todo sobre fondo blanco. Borde gris claro redondeado que envuelve ambos elementos en forma de cápsula. Padding distribuido que equilibra el ícono inicial con el texto adyacente.",
+    "_generated": {
+      "hash": "6a1a3543e4653f4c8f603107fe2fae9d",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:11:37.723Z"
     }
   },
   {
@@ -77,6 +131,12 @@
     "data": {
       "html": "<svg viewBox='0 0 140 140' class='self-center mr-2' aria-hidden='true' width='.75em ' height='.75em '><path fill='currentColor' d='M43.7 140a17.42 17.42 0 01-12.36-5.12L5.13 108.66a17.49 17.49 0 010-24.75l24.61-24.25a7.5 7.5 0 0110.52 10.68L15.69 94.56a2.5 2.5 0 000 3.49l26.21 26.22a2.51 2.51 0 003.54 0l24.22-24.53a7.5 7.5 0 1110.68 10.52l-24.21 24.57A17.53 17.53 0 0143.7 140zM99.66 80.26a7.49 7.49 0 01.08-10.6l24.57-24.22a2.5 2.5 0 000-3.49L98.06 15.73a2.51 2.51 0 00-3.54 0L70.34 40.26a7.5 7.5 0 01-10.68-10.52L83.87 5.17a17.52 17.52 0 0124.79 0l26.21 26.21a17.49 17.49 0 010 24.75l-24.61 24.21a7.49 7.49 0 01-10.6-.08z'/><path fill='currentColor' d='M55 92.5a7.5 7.5 0 01-5.3-12.8l30-30a7.5 7.5 0 1110.6 10.6l-30 30a7.44 7.44 0 01-5.3 2.2z'/></svg> Primario",
       "classes": "c-pill--primary"
+    },
+    "visualDescription": "Componente pill con fondo azul claro, texto azul oscuro en peso normal, borde redondeado azul de 1px. Incluye ícono de checkmark circular azul a la izquierda del texto. Tamaño compacto con padding horizontal generoso.",
+    "_generated": {
+      "hash": "3f3beb76f055d8a7f013d6438ebc6b96",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:11:44.923Z"
     }
   },
   {
@@ -84,6 +144,12 @@
     "data": {
       "html": "<svg viewBox='0 0 140 140' class='self-center mr-2' aria-hidden='true' width='.75em' height='.75em '><path fill='currentColor' 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'/></svg> Aviso",
       "classes": "c-pill--warning"
+    },
+    "visualDescription": "Componente pill con fondo amarillo claro, texto negro en peso normal, borde redondeado amarillo de 1px. Incluye ícono de triángulo de advertencia amarillo a la izquierda del texto. Tamaño compacto con padding horizontal generoso.",
+    "_generated": {
+      "hash": "c1dbcba854b781b1ebcfe680ad458d25",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:11:44.923Z"
     }
   },
   {
@@ -91,6 +157,12 @@
     "data": {
       "html": "<svg viewBox='0 0 140 140' class='self-center mr-2' aria-hidden='true' width='.75em ' height='.75em '><path fill='currentColor' d='M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z'/></svg> Éxito",
       "classes": "c-pill--success"
+    },
+    "visualDescription": "Componente pill con fondo verde claro, texto verde oscuro en peso normal, borde redondeado verde de 1px. Incluye ícono de checkmark circular verde a la izquierda del texto. Tamaño compacto con padding horizontal generoso.",
+    "_generated": {
+      "hash": "86c6b3b8067a1cbedeb0c62f27dc777c",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:11:44.923Z"
     }
   },
   {
@@ -98,6 +170,12 @@
     "data": {
       "html": "<svg viewBox='0 0 140 140' class='self-center mr-2' aria-hidden='true' width='.75em ' height='.75em '><path fill='currentColor' d='M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm-7.5 35a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 75a10 10 0 1110-10 10 10 0 01-10 10z'/></svg> Alerta",
       "classes": "c-pill--alert"
+    },
+    "visualDescription": "Pill rectangular con esquinas redondeadas, fondo rojo claro, y borde rojo de 1px. Contiene texto \"Alerta\" en color rojo oscuro alineado al centro, junto con un icono circular rojo con una \"X\" blanca en el interior posicionado a la izquierda del texto. El componente tiene padding interno horizontal y vertical, creando un espacio visual compacto alrededor del contenido.",
+    "_generated": {
+      "hash": "4e1033d1fc66a2907717a23d5d79ad97",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:11:51.804Z"
     }
   }
 ] %}

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

@@ -134,6 +134,12 @@
           "checked": true
         }
       ]
+    },
+    "visualDescription": "Grupo de radio buttons con pregunta en negro bold, subtexto en gris debajo. Dos opciones apiladas verticalmente: \"Sí\" con círculo vacío blanco con borde gris, \"No\" con círculo relleno azul oscuro indicando selección. Fondo blanco con borde gris claro rodeando todo el componente.",
+    "_generated": {
+      "hash": "c0661da8ddbe3c662dd90dd77321057d",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:11:59.793Z"
     }
   },
   {
@@ -163,6 +169,12 @@
           "checked": true
         }
       ]
+    },
+    "visualDescription": "Grupo de radio buttons con pregunta en negro bold, subtexto en gris debajo. Dos opciones dispuestas horizontalmente: \"Sí\" con círculo vacío blanco con borde gris, \"No\" con círculo relleno azul con marca de selección blanca. Fondo blanco sin borde visible.",
+    "_generated": {
+      "hash": "89b65d904ea4cd559f9055034b3948f0",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:11:59.793Z"
     }
   },
   {
@@ -191,6 +203,12 @@
           "disabled": true
         }
       ]
+    },
+    "visualDescription": "Grupo de radio buttons con pregunta en negro bold, subtexto en gris debajo. Dos opciones apiladas verticalmente en estado inactivo: ambos círculos en gris claro con borde gris tenue, uno con relleno gris y otro vacío. Fondo blanco con borde gris claro rodeando el componente, toda la sección presenta opacidad reducida.",
+    "_generated": {
+      "hash": "76d3dd45ed46bacb0935f0492fe74b22",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:11:59.793Z"
     }
   },
   {
@@ -226,6 +244,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Grupo de radio buttons con borde gris de 1px y esquinas redondeadas, fondo blanco. Título en negro tamaño mediano peso normal, pregunta en negro peso negrita, dos opciones con círculos vacíos alineados verticalmente, labels en negro peso normal y texto descriptivo gris claro debajo de cada opción.",
+    "_generated": {
+      "hash": "de3c20041e27faeae9f61e568dbd2654",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:12:09.514Z"
     }
   },
   {
@@ -258,6 +282,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Grupo de radio buttons con borde gris de 1px y esquinas redondeadas, fondo blanco. Título en gris tamaño pequeño peso normal arriba, pregunta en negro tamaño grande peso negrita, dos opciones con círculos vacíos alineados verticalmente, labels en negro peso normal y texto descriptivo gris claro debajo de cada opción.",
+    "_generated": {
+      "hash": "b56321221bce74c0f9bf1cb04441eb60",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:12:09.514Z"
     }
   },
   {
@@ -287,6 +317,12 @@
           "text": "Teléfono"
         }
       ]
+    },
+    "visualDescription": "Grupo de radio buttons con borde gris de 1px y esquinas redondeadas, fondo blanco. Título en gris tamaño pequeño peso normal arriba, pregunta en negro peso negrita debajo, cuatro opciones con círculos vacíos alineados verticalmente, labels en negro peso normal. Línea horizontal gris tenue separa visualmente la tercera y cuarta opción.",
+    "_generated": {
+      "hash": "74a74b319adb3a404bb7a5952619f265",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:12:09.514Z"
     }
   },
   {
@@ -316,6 +352,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Grupo de dos radio buttons con círculos vacíos color gris oscuro a la izquierda. Cada opción tiene un label en negro peso normal y texto de ayuda en gris peso normal debajo del label. Fondo blanco sin bordes divisores entre opciones, espaciado vertical generoso.",
+    "_generated": {
+      "hash": "5d302782a8e83b6f03f6f95638d8ee1b",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:12:18.726Z"
     }
   },
   {
@@ -349,6 +391,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Grupo de dos radio buttons con círculos vacíos color gris oscuro a la izquierda. Cada opción tiene un label en negro peso normal y texto de ayuda en gris peso normal debajo del label. Línea divisora horizontal gris clara separa las dos opciones, fondo blanco, espaciado vertical generoso.",
+    "_generated": {
+      "hash": "b17432d8429d47b713eaf3e8954a1835",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:12:18.726Z"
     }
   },
   {
@@ -381,6 +429,12 @@
           "classes": "bg-neutral-lighter"
         }
       ]
+    },
+    "visualDescription": "Grupo de dos radio buttons con círculos vacíos color gris oscuro a la izquierda sobre fondo celeste claro. Cada opción tiene un label en negro peso normal y texto de ayuda en gris peso normal debajo del label. Línea divisora horizontal gris clara separa las dos opciones, espaciado vertical generoso.",
+    "_generated": {
+      "hash": "d00c76a8f4bdd98118baca3781c2efb8",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:12:18.726Z"
     }
   },
   {
@@ -403,6 +457,12 @@
           "text": "Teléfono"
         }
       ]
+    },
+    "visualDescription": "Grupo de tres radio buttons circulares no seleccionados con labels en texto negro tamaño regular. Fondo blanco sin contenedor visible. Título superior en negro pequeño.",
+    "_generated": {
+      "hash": "4290d8a36fbe37307edb99f35b807694",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:12:27.479Z"
     }
   },
   {
@@ -429,6 +489,12 @@
           "checked": true
         }
       ]
+    },
+    "visualDescription": "Fieldset con borde gris de 1px conteniendo pregunta en texto negro peso normal, mensaje de error rojo debajo, y dos radio buttons circulares donde el segundo está seleccionado con punto azul central. Fondo blanco y título superior en negro pequeño.",
+    "_generated": {
+      "hash": "9da9c1e5fd363b09b674d053e7ee9801",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:12:27.479Z"
     }
   },
   {
@@ -461,6 +527,12 @@
           "text": "Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis."
         }
       ]
+    },
+    "visualDescription": "Pregunta en texto negro peso negrita seguida de subtexto gris claro tamaño pequeño. Advertencia en texto rojo debajo del subtexto. Tres radio buttons circulares no seleccionados con labels extensos en texto negro tamaño regular ocupando múltiples líneas. Fondo blanco y borde gris delgado alrededor del contenedor.",
+    "_generated": {
+      "hash": "3150ae62c72805a0b6d63bb1296dc5a2",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:12:27.479Z"
     }
   },
   {
@@ -495,6 +567,12 @@
           "text": "Sin conditional"
         }
       ]
+    },
+    "visualDescription": "Grupo de radio buttons con pregunta en texto negro regular arriba. Tres opciones verticales: primera sin seleccionar, segunda seleccionada en azul con círculo relleno y campo de texto con label gris y borde gris de 1px indentado debajo, tercera sin seleccionar. Fondo blanco, espaciado vertical consistente entre opciones.",
+    "_generated": {
+      "hash": "470864e9ae3ad08027bd0a55ad4e8f19",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:12:38.592Z"
     }
   },
   {
@@ -532,6 +610,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Grupo de radio buttons con pregunta en texto negro regular arriba. Tres opciones verticales: primera sin seleccionar, segunda seleccionada con círculo azul relleno y campo de texto con label gris y borde gris de 1px indentado debajo, tercera sin seleccionar. Fondo blanco con borde gris claro envolviendo todo el grupo.",
+    "_generated": {
+      "hash": "6d91710ed77fa48707b34ce9df67c197",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:12:38.593Z"
     }
   },
   {
@@ -571,6 +655,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Grupo de radio buttons con pregunta en texto negro regular arriba. Tres opciones verticales: primera sin seleccionar, segunda seleccionada con círculo azul relleno y campo de texto con borde rojo de 2px más mensaje de error en texto rojo pequeño debajo, tercera con círculo rojo en estado error. Fondo blanco con borde gris claro envolviendo el grupo.",
+    "_generated": {
+      "hash": "fcc9b7451829b59a5fd3746bebf3a50d",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:12:38.593Z"
     }
   },
   {
@@ -597,6 +687,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Grupo de dos radio buttons con labels \"Si\" y \"No\" en texto negro de tamaño pequeño. Fondo blanco, radio buttons circulares con borde gris, espaciado vertical compacto entre opciones. Título \"peque\" en negro arriba del grupo.",
+    "_generated": {
+      "hash": "a01fcfd4da2fc1243bb0b1883e4df2ce",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:12:44.531Z"
     }
   }
 ] %}

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

@@ -8,6 +8,12 @@
         "text": "Buscar",
         "classes": "not-sr-only mb-sm"
       }
+    },
+    "visualDescription": "Campo de búsqueda rectangular con borde gris claro de 1px y fondo blanco. Incluye label \"Buscar\" en texto negro pequeño arriba del campo. Botón de búsqueda con icono de lupa en azul oscuro alineado a la derecha dentro del campo.",
+    "_generated": {
+      "hash": "67ef7af46754cba1bdb0e54b1a75230a",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:12:51.704Z"
     }
   },
   {
@@ -18,6 +24,12 @@
         "text": "Buscar"
       },
       "placeholder": "Buscar en este sitio"
+    },
+    "visualDescription": "Campo de búsqueda rectangular con borde gris claro de 1px y fondo blanco. Texto placeholder \"Buscar en este sitio\" en gris claro visible dentro del campo. Botón de búsqueda con icono de lupa en azul oscuro alineado a la derecha dentro del campo.",
+    "_generated": {
+      "hash": "27f4114b571c7f91493a1e0174a01321",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:12:51.704Z"
     }
   },
   {
@@ -28,6 +40,12 @@
         "text": "Buscar"
       },
       "disabled": true
+    },
+    "visualDescription": "Campo de búsqueda rectangular con borde gris muy claro de 1px y fondo gris claro(#f5f5f5) . El campo aparece sin texto ni placeholder visible. Botón de búsqueda con icono de lupa en azul oscuro alineado a la derecha dentro del campo.",
+    "_generated": {
+      "hash": "a126fc4548da4dad1efa4b75e86c7821",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:12:51.704Z"
     }
   },
   {
@@ -42,6 +60,12 @@
         "text": "Esto es un mensaje de error",
         "classes": "mt-xs"
       }
+    },
+    "visualDescription": "Barra de búsqueda con input de texto rectangular con borde rojo de 2px, fondo blanco, y botón de búsqueda(ícono de lupa) alineado a la derecha dentro del campo. Debajo del input aparece un mensaje de error en texto rojo pequeño. Encima del campo hay un título descriptivo en texto negro normal.",
+    "_generated": {
+      "hash": "dbefd6e80e153cafaa30f878cc5e913c",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:13:01.121Z"
     }
   },
   {
@@ -52,6 +76,12 @@
         "text": "Buscar items recientes",
         "classes": "not-sr-only mb-sm"
       }
+    },
+    "visualDescription": "Barra de búsqueda con input de texto rectangular con borde gris de 1px, fondo blanco, y botón de búsqueda(ícono de lupa) alineado a la derecha dentro del campo. Encima del input hay un label descriptivo en texto negro pequeño. El campo tiene altura estándar con espaciado interno generoso.",
+    "_generated": {
+      "hash": "331f38b63a508e19bf4751f9297a955c",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:13:01.121Z"
     }
   },
   {
@@ -63,6 +93,12 @@
       },
       "classes": "c-input--sm",
       "buttonClasses": "m-xs p-0.5 text-xs"
+    },
+    "visualDescription": "Barra de búsqueda con input de texto rectangular de altura reducida, borde gris claro de 1px, fondo blanco, y botón de búsqueda(ícono de lupa) alineado a la derecha dentro del campo. No presenta label superior ni mensajes auxiliares. Las dimensiones verticales son compactas con espaciado interno mínimo.",
+    "_generated": {
+      "hash": "0fd48b62c89e4225e20a86ef100a8c83",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:13:01.121Z"
     }
   },
   {
@@ -79,6 +115,12 @@
         "classes": "c-button--primary"
       },
       "classes": "flex-1"
+    },
+    "visualDescription": "Campo de búsqueda con input de texto rectangular con borde gris de 1px y fondo blanco. Botón \"Buscar\" de fondo azul petróleo con texto blanco en mayúsculas está alineado a la derecha del input. El campo ocupa todo el ancho disponible con altura estándar.",
+    "_generated": {
+      "hash": "7937ddc1545f6aa3dc955c19058f4287",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:13:08.801Z"
     }
   },
   {
@@ -95,6 +137,12 @@
         "classes": "c-button--sm"
       },
       "classes": "flex-1 c-input--sm"
+    },
+    "visualDescription": "Campo de búsqueda con input de texto rectangular con borde gris de 1px y fondo blanco. Botón \"Buscar\" compacto con borde azul petróleo y texto azul petróleo está posicionado a la derecha del input. El campo ocupa todo el ancho disponible con altura reducida.",
+    "_generated": {
+      "hash": "f2879e4a8dc9ef14f15280c181dc27bf",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:13:08.801Z"
     }
   }
 ] %}

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

@@ -17,7 +17,7 @@
   for: params.id
 }) }}
 <div class="relative {%- if params.button %} flex flex-wrap items-end gap-sm{% endif %}">
-  <input class="c-input block 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.button %} pr-12 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.id }}" type="search"
+  <input class="c-input block {% 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.button %} pr-12 w-full{% endif %} {%- if params.classes %} {{ params.classes }}{% endif %}" id="{{ params.id }}" name="{{ params.id }}" type="search"
   {%- if params.value %} value="{{ params.value}}"{% endif %}
   {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
   {%- if params.errorMessage %} aria-errormessage="{{ errorId }}" aria-invalid="true"{% endif %}