desy-html 15.0.3 → 16.0.0

package/src/templates/components/character-count/_examples.character-count.njk

@@ -9,6 +9,12 @@
       "label": {
         "text": "Esto es un label"
       }
+    },
+    "visualDescription": "Textarea con borde gris medio de 1px, fondo blanco, esquinas redondeadas. Label negro en peso regular ubicado arriba. Contador de caracteres \"Puedes escribir hasta 250 caracteres\" en gris medio debajo del campo.",
+    "_generated": {
+      "hash": "280011d31f1d8090c2254c89c07bebc4",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:52:22.581Z"
     }
   },
   {
@@ -21,6 +27,12 @@
       "label": {
         "text": "Esto es un label"
       }
+    },
+    "visualDescription": "Textarea con borde gris medio de 1px, fondo blanco, esquinas redondeadas. Label negro en peso regular ubicado arriba. Texto placeholder \"Esto es un placeholder\" en gris claro dentro del campo. Contador de caracteres \"Puedes escribir hasta 250 caracteres\" en gris medio debajo.",
+    "_generated": {
+      "hash": "53dfb0bc76601f445c5c54e7cb7790e6",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:52:22.581Z"
     }
   },
   {
@@ -33,6 +45,12 @@
       "label": {
         "text": "Esto es un label"
       }
+    },
+    "visualDescription": "Textarea con borde gris claro de 1px, fondo gris muy claro, esquinas redondeadas. Label negro en peso regular ubicado arriba. Contador de caracteres \"Puedes escribir hasta 250 caracteres\" en gris medio debajo del campo. Apariencia visual de estado inactivo sin interacción posible.",
+    "_generated": {
+      "hash": "2b6bb817d339fded0b69001a2b6e104c",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:52:22.581Z"
     }
   },
   {
@@ -47,6 +65,12 @@
       "hint": {
         "text": "Esto es una pista."
       }
+    },
+    "visualDescription": "Textarea con borde gris de 1px, fondo blanco, esquinas redondeadas. Incluye label negro en texto normal arriba, subtexto gris debajo del label, y contador gris pequeño bajo el campo indicando caracteres disponibles (hasta 250).",
+    "_generated": {
+      "hash": "9ec2a1f2083297c1e1e9fd46e393e9a4",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:52:31.289Z"
     }
   },
   {
@@ -59,6 +83,12 @@
         "text": "Dirección completa"
       },
       "value": "Paseo María Agustín, 36,\n 50004 Zaragoza\n"
+    },
+    "visualDescription": "Textarea con borde gris de 1px, fondo blanco, esquinas redondeadas, contiene texto negro de dirección postal predefinido. Label negro en negrita arriba del campo, y contador gris pequeño bajo el textarea mostrando uso de caracteres (hasta 100).",
+    "_generated": {
+      "hash": "1d6bbc6799bd310e292689b0ca46df93",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:52:31.289Z"
     }
   },
   {
@@ -75,6 +105,12 @@
       "errorMessage": {
         "text": "Por favor, no exceder el límite máximo. Error en el campo."
       }
+    },
+    "visualDescription": "Textarea con borde rojo de 2px, fondo blanco, esquinas redondeadas, contiene texto negro de dirección postal predefinido. Label negro en negrita arriba, mensaje de error rojo debajo del label, y contador rojo pequeño bajo el textarea mostrando exceso de caracteres (hasta 250).",
+    "_generated": {
+      "hash": "9636636f48a71f5ec6cb7c3e7b20408f",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:52:31.289Z"
     }
   },
   {
@@ -87,6 +123,12 @@
         "text": "Dirección completa"
       },
       "rows": 8
+    },
+    "visualDescription": "Textarea con borde gris de 2px, fondo blanco, altura de aproximadamente 100px. Label \"Dirección completa\" en negro encima del campo. Texto contador \"Puedes escribir hasta 200 caracteres\" en gris claro debajo del textarea, alineado a la izquierda.",
+    "_generated": {
+      "hash": "c93b07854b908087a05d3cc2dad4f6bf",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:52:39.383Z"
     }
   },
   {
@@ -98,6 +140,12 @@
       "label": {
         "text": "Dirección completa"
       }
+    },
+    "visualDescription": "Textarea con borde gris de 2px, fondo blanco, altura de aproximadamente 60px. Label \"Dirección completa\" en negro encima del campo de entrada. Texto contador \"Puedes escribir hasta 10 palabras\" en gris claro debajo del textarea, alineado a la izquierda.",
+    "_generated": {
+      "hash": "602e604c19b1091e73ab88d5934f2022",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:52:39.383Z"
     }
   },
   {
@@ -110,6 +158,12 @@
       "label": {
         "text": "Dirección completa"
       }
+    },
+    "visualDescription": "Textarea con borde gris de 2px, fondo blanco, altura de aproximadamente 100px. Label \"Dirección completa\" en negro encima del campo de entrada. Texto contador \"Puedes escribir hasta 250 caracteres\" en gris claro debajo del textarea, alineado a la izquierda.",
+    "_generated": {
+      "hash": "529c3a2126914b9e8347a8b25ad014ca",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:52:39.383Z"
     }
   },
   {
@@ -131,6 +185,12 @@
         "classes": "order-1 w-full pt-sm"
       },
       "classes": "lg:flex-1"
+    },
+    "visualDescription": "Componente con label \"Intro label:\" en negro arriba a la izquierda, campo de texto grande con borde rojo grueso de 2-3px y fondo blanco. Debajo aparece mensaje de error \"Esto es un mensaje de error\" en rojo negrita, seguido de texto secundario \"Puedes escribir hasta 200 caracteres\" en gris.",
+    "_generated": {
+      "hash": "55d5d92ddf94c97e6ce6d21a1f9f138a",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:52:46.955Z"
     }
   }
 ] %}

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

@@ -130,6 +130,12 @@
           "text": "Teléfono"
         }
       ]
+    },
+    "visualDescription": "Grupo de tres checkboxes sin marcar con labels en negro. Encabezado en negrita negro pregunta sobre preferencias de contacto, seguido de texto gris instructivo. Fondo blanco con borde gris claro delimitando el componente completo.",
+    "_generated": {
+      "hash": "b35e6609f05ea9ee328a42e0da095a61",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:52:53.918Z"
     }
   },
   {
@@ -159,6 +165,12 @@
           "text": "Correo postal"
         }
       ]
+    },
+    "visualDescription": "Grupo de dos checkboxes sin marcar con labels en negro. Encabezado en negrita negro pregunta sobre preferencias de contacto, seguido de texto gris instructivo. Fondo blanco con borde gris claro delimitando el componente completo.",
+    "_generated": {
+      "hash": "e0540ce6682a0c05028cf634d18893d4",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:52:53.918Z"
     }
   },
   {
@@ -191,6 +203,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Grupo de dos checkboxes sin marcar con labels en negro y texto de ayuda gris debajo de cada opción. Encabezado en negrita negro pregunta sobre preferencias de contacto. Fondo blanco con borde gris claro delimitando el componente completo, texto secundario en gris proporciona contexto adicional para cada checkbox.",
+    "_generated": {
+      "hash": "004cf6deb01dee8dd239e4dae0d0e4c2",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:52:53.918Z"
     }
   },
   {
@@ -242,6 +260,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Grupo de checkboxes con bordes grises claros separando cada opción. Encabezado en negro con texto de ayuda en rojo debajo. Checkboxes con cuadrados blancos de borde gris, labels en negro, texto de ayuda gris debajo de cada opción. Cuando se selecciona teléfono, aparece un campo de texto con label gris y borde gris.",
+    "_generated": {
+      "hash": "afe43a55114c0c623e38954b0e90dc63",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:53:03.466Z"
     }
   },
   {
@@ -276,6 +300,12 @@
           "classes": "bg-neutral-lighter"
         }
       ]
+    },
+    "visualDescription": "Grupo de checkboxes con fondo azul claro en la primera opción. Título en negro arriba del grupo. Dos checkboxes con cuadrados blancos de borde gris, labels en negro, y texto de ayuda gris debajo de cada label. Sin bordes divisorios entre opciones.",
+    "_generated": {
+      "hash": "b2fb4e8f402a12ecbca2df64fa9869b1",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:53:03.466Z"
     }
   },
   {
@@ -300,6 +330,12 @@
           "disabled": true
         }
       ]
+    },
+    "visualDescription": "Grupo de tres checkboxes sin bordes divisorios. Primer checkbox sin marcar con cuadrado blanco de borde gris y label negro. Segundo checkbox marcado con check verde y label negro. Tercer checkbox deshabilitado con cuadrado gris, label gris atenuado, sin posibilidad de interacción.",
+    "_generated": {
+      "hash": "d08d81692b28f58c743b0054b2605af8",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:53:03.466Z"
     }
   },
   {
@@ -333,6 +369,12 @@
           "text": "Teléfono"
         }
       ]
+    },
+    "visualDescription": "Fieldset con borde gris claro de 1px, encabezado grande en texto negro preguntando sobre preferencias de contacto. Tres checkboxes verticales sin marcar (Correo electrónico, Correo postal, Teléfono) con labels en texto negro. Mensaje de error en rojo arriba indicando que se debe seleccionar al menos una opción.",
+    "_generated": {
+      "hash": "b08d35753a0856f5116cc7d9db4b21a2",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:53:13.889Z"
     }
   },
   {
@@ -355,6 +397,12 @@
           "text": "Teléfono"
         }
       ]
+    },
+    "visualDescription": "Grupo de tres checkboxes verticales sin borde contenedor, con título pequeño \"sin fieldset\" en gris oscuro arriba. Checkboxes sin marcar (Correo electrónico, Correo postal, Teléfono) con labels en texto negro, presentados en lista vertical sobre fondo blanco sin bordes delimitadores.",
+    "_generated": {
+      "hash": "0032e381b49bc66d24b36aa0a9d82439",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:53:13.889Z"
     }
   },
   {
@@ -372,6 +420,12 @@
           "html": "Acepto los <a href='#' target='_blank' class='c-link' title='Se abre en ventana nueva del navegador'>términos y condiciones</a>"
         }
       ]
+    },
+    "visualDescription": "Fieldset con borde gris claro de 1px, título descriptivo en texto negro sobre el uso de aria-describedby. Checkbox individual sin marcar con label \"Acepto los\" seguido de enlace azul subrayado \"términos y condiciones\". Mensaje de error en rojo arriba solicitando aceptar los términos.",
+    "_generated": {
+      "hash": "e10048a2729a00674e0e1e8ea1cf6d70",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:53:13.889Z"
     }
   },
   {
@@ -391,6 +445,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Checkbox sin marcar con borde rojo de 2px, acompañado de label en negro con texto secundario gris debajo. Fondo blanco, contenedor con borde gris claro. Mensaje de error en rojo encima del checkbox indica validación pendiente.",
+    "_generated": {
+      "hash": "f0fab73c491454b5e79f07634d9bc6f2",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:53:22.839Z"
     }
   },
   {
@@ -420,6 +480,12 @@
           "text": "Teléfono"
         }
       ]
+    },
+    "visualDescription": "Grupo de tres checkboxes sin marcar con bordes rojos de 2px, labels en negro (\"Correo electrónico\", \"Correo postal\", \"Teléfono\"). Título de pregunta en negro arriba, mensaje de error en rojo debajo del título. Fondo blanco, contenedor con borde gris claro.",
+    "_generated": {
+      "hash": "90be10d247ee63f67a33ffea19d03878",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:53:22.839Z"
     }
   },
   {
@@ -450,6 +516,12 @@
           "text": "Teléfono"
         }
       ]
+    },
+    "visualDescription": "Grupo de tres checkboxes sin marcar con bordes rojos de 2px, labels en negro para cada opción de contacto. Pregunta en negro encima, mensaje de validación en rojo debajo de la pregunta. Fondo blanco, layout vertical con espaciado uniforme entre elementos.",
+    "_generated": {
+      "hash": "487a697392d34c23813bb0cd56d14c98",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:53:22.839Z"
     }
   },
   {
@@ -489,6 +561,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Grupo de checkboxes con borde rojo de 2px y fondo blanco. El título principal aparece en negro, seguido de texto de error en rojo con enlace subrayado en rojo. Cada checkbox sin marcar tiene borde gris, con label en negro y texto descriptivo secundario en gris debajo de cada opción.",
+    "_generated": {
+      "hash": "12763a8865daa39641e8fa91793786d2",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:53:32.934Z"
     }
   },
   {
@@ -522,6 +600,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": "Grupo de checkboxes con borde gris de 1px y fondo blanco. El título principal en negro va seguido de subtítulo en gris y párrafo con texto negro y fragmentos en rojo subrayado. Dos checkboxes sin marcar con borde gris, cada uno con label en negro seguido de múltiples líneas de texto descriptivo en gris que ocupan varios renglones.",
+    "_generated": {
+      "hash": "2aafe56aa2d1c450b218c2ab11afdf0b",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:53:32.934Z"
     }
   },
   {
@@ -559,6 +643,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Grupo de checkboxes con borde gris de 1px y fondo blanco. Título pregunta en negro encima de tres opciones verticales. Cada checkbox sin marcar tiene borde gris con label en negro alineado a la derecha, sin texto descriptivo adicional.",
+    "_generated": {
+      "hash": "41879fc0c8d6643feb4ede218bf6374b",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:53:32.934Z"
     }
   },
   {
@@ -596,6 +686,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Grupo de checkboxes con título en texto negro. Checkbox \"Teléfono\" marcado con checkmark blanco en fondo azul, revelando label \"Número de teléfono fijo\" en negro y campo de texto rectangular con borde gris. Checkboxes \"Correo electrónico\" y \"Mensaje SMS\" desmarcados con borde gris oscuro y fondo blanco.",
+    "_generated": {
+      "hash": "1b3fc7a37bb15b87d05330e064bf6043",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:53:42.047Z"
     }
   },
   {
@@ -635,6 +731,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Grupo de checkboxes con título en texto negro. Checkbox \"Teléfono\" marcado con checkmark blanco en fondo azul, revelando label \"Número de teléfono móvil\" en negro, texto de error en rojo, y campo de texto con borde rojo grueso. Checkboxes \"Correo electrónico\" y \"Mensaje SMS\" desmarcados con borde rojo.",
+    "_generated": {
+      "hash": "2736892fbda93848e5d2988f108818f1",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:53:42.047Z"
     }
   },
   {
@@ -669,6 +771,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Lista vertical de tres checkboxes sin marcar: cada checkbox tiene borde gris oscuro y fondo blanco. Labels en texto negro regular alineados a la derecha de cada checkbox. Espaciado compacto entre elementos.",
+    "_generated": {
+      "hash": "17662ee9b3cb12d4d68cdca15572f6c6",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:53:42.047Z"
     }
   },
   {
@@ -689,6 +797,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Checkbox de tamaño pequeño con borde gris oscuro de 1px y fondo blanco, conteniendo un guion horizontal gris en el centro indicando estado indeterminado. Label de texto negro normal alineado a la derecha del checkbox, leyendo \"1 elemento seleccionado\".",
+    "_generated": {
+      "hash": "655e826fbb1a0317ca2018c37878a04d",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:53:48.604Z"
     }
   },
   {
@@ -711,6 +825,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Checkbox de tamaño pequeño con borde gris oscuro de 1px y fondo blanco, conteniendo un guion horizontal gris en el centro indicando estado indeterminado. Label de texto negro normal alineado a la derecha del checkbox, leyendo \"1 elemento seleccionado\".",
+    "_generated": {
+      "hash": "5828c23f8c6e24052da6398ec22f32f4",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:53:48.604Z"
     }
   }
 ] %}

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

@@ -11,6 +11,12 @@
       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+    },
+    "visualDescription": "Panel colapsable con fondo blanco, borde gris claro de 1px, y esquinas redondeadas. Cabecera \"Cabecera del colapsable\" en texto negro negrita alineado a la izquierda con enlace \"Ocultar\" gris en la derecha. Contenido expandido muestra párrafo de texto negro regular en múltiples líneas debajo de la cabecera.",
+    "_generated": {
+      "hash": "89a37d96f81dbd4bd089f807dc6783a5",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:53:57.032Z"
     }
   },
   {
@@ -26,6 +32,12 @@
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
       "open": true
+    },
+    "visualDescription": "Panel colapsable con fondo blanco, borde gris claro de 1px, y esquinas redondeadas. Cabecera \"Cabecera del colapsable\" en texto negro negrita alineado a la izquierda con enlace \"Mostrar\" gris en la derecha. Contenido del panel está oculto, solo visible la barra de cabecera sin texto adicional debajo.",
+    "_generated": {
+      "hash": "eca0f746008210cd0ebd898ce330cdd7",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:53:57.032Z"
     }
   },
   {
@@ -40,6 +52,12 @@
       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+    },
+    "visualDescription": "Panel colapsable con fondo blanco, borde gris claro de 1px, y esquinas redondeadas. Cabecera \"Cabecera del colapsable\" en texto negro negrita alineado a la izquierda con enlace \"Ocultar\" gris en la derecha. Contenido expandido muestra párrafo de texto negro regular en múltiples líneas debajo de la cabecera.",
+    "_generated": {
+      "hash": "52f0e096b1cec49be9c4695c0f3300af",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:53:57.032Z"
     }
   },
   {
@@ -53,6 +71,12 @@
       consequat. Duis aute irure dolor in <strong>reprehenderit</strong> in voluptate velit esse
       cillum dolore eu fugiat nulla <em>pariatur</em>. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>"
+    },
+    "visualDescription": "Panel collapsible con fondo blanco, borde gris de 1px. Título en negrita negro \"Cabecera del collapsible\" alineado a la izquierda, botón \"Ocultar\" azul pequeño alineado a la derecha. Contenido expandido muestra texto negro regular en párrafo con palabras en negrita intercaladas.",
+    "_generated": {
+      "hash": "5663d551eaa8d0337b3caee053db26be",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:54:04.708Z"
     }
   },
   {
@@ -72,6 +96,12 @@
       "showClasses": "hidden!",
       "hideClasses": "hidden!",
       "contentClasses": "flex-1 border border-neutral-base p-base bg-white rounded-sm"
+    },
+    "visualDescription": "Panel collapsible con fondo celeste claro, sin borde visible. Botón rectangular con fondo turquesa y texto blanco \"Cabecera del collapsible\" alineado a la izquierda. Contenido expandido muestra texto negro regular en párrafo sobre el fondo celeste claro.",
+    "_generated": {
+      "hash": "cc1ac121a8b979d3b9f3bc39c95c7350",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:54:04.708Z"
     }
   }
 ] %}

package/src/templates/components/date-input/_examples.date-input.njk

@@ -36,6 +36,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Componente de fecha con tres campos de entrada separados para día, mes y año. Cada campo tiene borde gris claro de 1px y fondo blanco. Encabezado en negro con texto descriptivo gris pequeño debajo mostrando formato de ejemplo.",
+    "_generated": {
+      "hash": "7654b0ccadfb86f502a9eba64139432f",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:54:11.775Z"
     }
   },
   {
@@ -76,6 +82,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Componente de fecha con tres campos de entrada separados para día, mes y año. Cada campo tiene borde rojo de 2px y fondo blanco. Encabezado en negro con mensaje de error en texto rojo pequeño debajo de los campos.",
+    "_generated": {
+      "hash": "ebf304dd3809905f8a5abf202866fee1",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:54:11.775Z"
     }
   },
   {
@@ -119,6 +131,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Componente de fecha con tres campos de entrada separados para día, mes y año. Cada campo tiene borde rojo de 2px y fondo blanco. Encabezado en negro, texto descriptivo gris pequeño arriba de los campos, y mensaje de error en texto rojo pequeño debajo de los campos.",
+    "_generated": {
+      "hash": "f6307deb728c9272ede4ad48a959cf34",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:54:11.775Z"
     }
   },
   {
@@ -161,6 +179,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Componente de fecha con tres campos de entrada alineados horizontalmente. El primer campo (día) tiene borde rojo de 2px, mientras los campos de mes y año tienen bordes grises estándar. Texto de error en rojo debajo de los campos, título negro en la parte superior, y subtexto gris claro que indica formato de ejemplo.",
+    "_generated": {
+      "hash": "7e56017e6c7907ee454cc3ad8ba51b0d",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:54:22.278Z"
     }
   },
   {
@@ -203,6 +227,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Componente de fecha con tres campos de entrada alineados horizontalmente. El campo central (mes) tiene borde rojo de 2px, mientras los campos de día y año mantienen bordes grises estándar. Texto de error en rojo debajo de los campos, título negro en la parte superior, y subtexto gris claro que muestra ejemplo de formato.",
+    "_generated": {
+      "hash": "8245312c5b2219b537c27eba0d75c5a0",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:54:22.278Z"
     }
   },
   {
@@ -245,6 +275,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Componente de fecha con tres campos de entrada alineados horizontalmente. El tercer campo (año) presenta borde rojo de 2px, mientras los campos de día y mes conservan bordes grises estándar. Texto de error en rojo ubicado debajo de los campos, título negro en la parte superior, y subtexto gris claro indicando formato esperado.",
+    "_generated": {
+      "hash": "ec5d62ef6aa779956bc25e82fb6b7835",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:54:22.278Z"
     }
   },
   {
@@ -260,6 +296,12 @@
       "hint": {
         "text": "Por ejemplo, día: 31 mes: 3 año: 1980"
       }
+    },
+    "visualDescription": "Grupo de tres campos de entrada numéricos alineados horizontalmente con bordes grises de 1px y fondo blanco. Encabezado en negrita negro, subtexto descriptivo gris con ejemplo de fecha, y tres labels grises pequeños (\"Día\", \"Mes\", \"Año\") sobre cada campo respectivo. Los campos tienen tamaño pequeño uniforme con esquinas redondeadas sutiles.",
+    "_generated": {
+      "hash": "28d86e05f5f6096f809f00d05b1453ef",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:54:32.941Z"
     }
   },
   {
@@ -297,6 +339,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Dos campos de entrada numéricos alineados horizontalmente con bordes grises de 1px y fondo blanco, separados por dos puntos negros. Encabezado principal en negrita negro, subtexto descriptivo gris con formato de ejemplo, y dos labels grises pequeños (\"Hora\", \"Minutos\") sobre cada campo. Los campos tienen ancho reducido con esquinas redondeadas sutiles.",
+    "_generated": {
+      "hash": "8f273b1ceadf88767e75c547fa49201f",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:54:32.941Z"
     }
   },
   {
@@ -315,6 +363,12 @@
       "formGroup": {
         "classes": "p-base bg-primary-light"
       }
+    },
+    "visualDescription": "Grupo de tres campos de entrada numéricos con bordes grises de 1px sobre fondo azul celeste claro. Encabezado en negrita azul oscuro, subtexto descriptivo azul oscuro con ejemplo de fecha, y tres labels azul oscuro pequeños (\"Día\", \"Mes\", \"Año\") sobre campos de fondo blanco. Los campos tienen tamaño pequeño uniforme con esquinas redondeadas, contenidos en contenedor con padding generoso.",
+    "_generated": {
+      "hash": "44afe613b59ef9620d88ec3550a1fe21",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:54:32.941Z"
     }
   },
   {
@@ -356,6 +410,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Tres campos de entrada rectangulares alineados horizontalmente con bordes grises de 1px y fondo blanco. Encabezado en negrita negro arriba, seguido de texto descriptivo gris en dos líneas. Labels \"Día\", \"Mes\", \"Año\" en negro arriba de cada campo respectivo.",
+    "_generated": {
+      "hash": "cbc06eed93ec064c5971ef9ed7618217",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:54:41.338Z"
     }
   },
   {
@@ -397,6 +457,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Tres campos de entrada rectangulares alineados horizontalmente con bordes grises de 1px y fondo blanco. Encabezado en negrita negro arriba, seguido de texto descriptivo gris en dos líneas. Labels \"Día\", \"Mes\", \"Año\" en negro arriba de cada campo respectivo.",
+    "_generated": {
+      "hash": "8418d3131ee57c0415dc6061865c568f",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:54:41.338Z"
     }
   },
   {
@@ -449,6 +515,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Tres campos de entrada rectangulares alineados horizontalmente con bordes grises de 1px y fondo blanco. Encabezado en negrita negro arriba, seguido de texto descriptivo gris en una línea. Labels \"Día\", \"Mes\", \"Año\" en negro arriba de cada campo respectivo.",
+    "_generated": {
+      "hash": "cdd0bae191cf102b7a121d97e995e150",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:54:41.338Z"
     }
   },
   {
@@ -496,6 +568,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Componente con encabezado \"Input de tiempo peque\" en fuente negra estándar. Contiene etiqueta \"Hora de aplicación\" en texto negro, ejemplo \"Por ejemplo: 14:30\" en gris, y dos campos de entrada pequeños con bordes grises de 1px y fondo blanco separados por dos puntos, etiquetados \"Hora\" y \"Minutos\" respectivamente en texto gris pequeño debajo de cada campo.",
+    "_generated": {
+      "hash": "5e718d3d90147ac0bf725bc694c6b65f",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:54:48.811Z"
     }
   }
 ] %}