desy-html 15.0.3 → 16.0.0

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

@@ -8,6 +8,12 @@
       },
       "id": "input-example-a",
       "name": "test-name"
+    },
+    "visualDescription": "Campo de entrada con borde gris de 1px y esquinas redondeadas, fondo blanco. Label en texto negro de peso regular posicionado arriba del input. Altura del campo aproximadamente 35-40px, ancho de 100px.",
+    "_generated": {
+      "hash": "2cd04835a9255d69bd6e1723b1e80db8",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:01:22.540Z"
     }
   },
   {
@@ -19,6 +25,12 @@
       "id": "input-example-b",
       "name": "test-name",
       "disabled": true
+    },
+    "visualDescription": "Campo de entrada con borde gris claro de 1px y esquinas redondeadas, fondo blanco. Label en texto negro de peso regular posicionado arriba del input. Altura del campo aproximadamente 35-40px, ancho de 100px, apariencia visual sin interacción activa.",
+    "_generated": {
+      "hash": "354ed129c3ad1cce3997b2964d2d13ff",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:01:22.540Z"
     }
   },
   {
@@ -32,6 +44,12 @@
       },
       "id": "input-with-hint-text",
       "name": "test-name"
+    },
+    "visualDescription": "Campo de entrada con borde gris de 1px y esquinas redondeadas, fondo blanco. Label en texto negro de peso regular arriba, seguido de texto secundario en gris oscuro debajo del label. Campo de entrada con altura aproximadamente 35-40px, ancho de 100px, posicionado debajo del texto secundario.",
+    "_generated": {
+      "hash": "c3df5434b5b8149c6e3a3f5ce477e726",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:01:22.540Z"
     }
   },
   {
@@ -49,6 +67,12 @@
       "errorMessage": {
         "text": "Esto es un mensaje de error"
       }
+    },
+    "visualDescription": "Campo de entrada de texto con borde rojo de 2px, fondo blanco, y esquinas ligeramente redondeadas. Incluye label negro en peso normal, texto de pista rojo debajo del label, y mensaje de error rojo debajo del campo. Ancho del input es estrecho (aproximadamente 100px).",
+    "_generated": {
+      "hash": "1ffb25c5ea4ce3a32cae47affbfd7dee",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:01:31.259Z"
     }
   },
   {
@@ -67,6 +91,12 @@
       "errorMessage": {
         "text": "Esto es un mensaje de error"
       }
+    },
+    "visualDescription": "Campo de entrada de texto con borde rojo de 2px, fondo blanco, y esquinas ligeramente redondeadas. Incluye label negro en peso normal arriba, texto de pista rojo debajo del label, y mensaje de error rojo debajo del campo. Ancho del input es estrecho (aproximadamente 100px).",
+    "_generated": {
+      "hash": "4ba8bf3975c3d0f2c1e1ea4dc26d65da",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:01:31.259Z"
     }
   },
   {
@@ -82,6 +112,12 @@
       "id": "input-width-full",
       "name": "test-width-full",
       "classes": "w-full"
+    },
+    "visualDescription": "Campo de entrada de texto con borde gris de 1px, fondo blanco, y esquinas ligeramente redondeadas ocupando el ancho completo del contenedor. Incluye label negro en peso normal arriba y texto de pista gris oscuro debajo del label. El input se extiende horizontalmente de borde a borde del área disponible.",
+    "_generated": {
+      "hash": "31643bdd218b7f66477b8d3411e7a6a2",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:01:31.259Z"
     }
   },
   {
@@ -97,6 +133,12 @@
       "id": "input-width-half",
       "name": "test-width-half",
       "classes": "w-1/2"
+    },
+    "visualDescription": "Input de texto con borde gris de 1px, fondo blanco, ocupando aproximadamente la mitad del ancho del contenedor. Label en texto negro normal arriba del campo, seguido de texto auxiliar gris claro debajo del label. Campo de entrada rectangular con altura estándar y esquinas ligeramente redondeadas.",
+    "_generated": {
+      "hash": "47bec2abeaab53af8981a185425f94e9",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:01:40.052Z"
     }
   },
   {
@@ -112,6 +154,12 @@
       "id": "input-width-32",
       "name": "test-width-32",
       "classes": "w-32"
+    },
+    "visualDescription": "Input de texto con borde gris de 1px, fondo blanco, ocupando un ancho fijo reducido (aproximadamente 150-200px). Label en texto negro normal posicionado arriba del campo, seguido de texto auxiliar gris claro debajo del label. Campo de entrada rectangular compacto con altura estándar y esquinas ligeramente redondeadas.",
+    "_generated": {
+      "hash": "3e7b239babe30d2f7549da6dfeda47f3",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:01:40.052Z"
     }
   },
   {
@@ -125,6 +173,12 @@
       "formGroup": {
         "classes": "p-base bg-primary-light"
       }
+    },
+    "visualDescription": "Input de texto con borde gris de 1px, fondo blanco, dentro de un contenedor con fondo celeste/azul claro que ocupa todo el ancho disponible. Label en texto negro normal posicionado arriba del campo dentro del área celeste. Campo de entrada rectangular con altura estándar, esquinas ligeramente redondeadas, rodeado de padding generoso del contenedor de fondo celeste.",
+    "_generated": {
+      "hash": "7eb20253c754d72a6927e109e79d7426",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:01:40.052Z"
     }
   },
   {
@@ -136,6 +190,12 @@
       "id": "input-with-autocomplete-attribute",
       "name": "postcode",
       "autocomplete": "postal-code"
+    },
+    "visualDescription": "Campo de entrada de texto con borde gris de 1px y esquinas redondeadas, fondo blanco. Label en texto negro regular posicionado arriba del campo. Dimensiones aproximadas de 100px de ancho por 30px de alto para el input.",
+    "_generated": {
+      "hash": "84615125a7220b332c8bbcfed3615c46",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:01:47.632Z"
     }
   },
   {
@@ -149,6 +209,12 @@
       "name": "numbers-only",
       "type": "tel",
       "pattern": "[0-9]*"
+    },
+    "visualDescription": "Campo de entrada de texto con borde gris de 1px y esquinas redondeadas, fondo blanco. Label en texto negro regular posicionado arriba del campo. Dimensiones aproximadas de 100px de ancho por 30px de alto para el input.",
+    "_generated": {
+      "hash": "520213e7df8c9f6452cdb2870e6d479d",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:01:47.632Z"
     }
   },
   {
@@ -163,6 +229,12 @@
       "attributes": {
         "required": ""
       }
+    },
+    "visualDescription": "Campo de entrada de texto con borde gris de 1px y esquinas redondeadas, fondo blanco. Label en texto negro regular con asterisco rojo posicionado arriba del campo. Dimensiones aproximadas de 100px de ancho por 30px de alto para el input.",
+    "_generated": {
+      "hash": "da28dc1ba3d34f5fb30851a59b91d7a5",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:01:47.632Z"
     }
   },
   {
@@ -174,6 +246,12 @@
       "id": "classes-applied-a",
       "name": "classes-applied-a",
       "classes": "c-input--sm"
+    },
+    "visualDescription": "Campo de entrada de texto con label \"Input peque\" en texto negro de peso normal. Borde gris delgado de 1px, fondo blanco, tamaño reducido del input. El campo presenta esquinas ligeramente redondeadas.",
+    "_generated": {
+      "hash": "28796c67f6b332f63b2a938f5be72684",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:01:55.148Z"
     }
   },
   {
@@ -194,6 +272,12 @@
         "classes": "order-1 w-full pt-sm"
       },
       "classes": "lg:flex-1"
+    },
+    "visualDescription": "Campo de entrada de texto con label en texto negro de peso normal. Borde rojo grueso de 2-3px, fondo blanco del input. Mensaje de error en texto rojo debajo del campo.",
+    "_generated": {
+      "hash": "74459351a7413ce629b8094f1cd74b83",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:01:55.148Z"
     }
   },
   {
@@ -206,6 +290,12 @@
       "id": "custom-type",
       "name": "custom-type",
       "type": "number"
+    },
+    "visualDescription": "Campo de entrada de texto con label en texto negro de peso normal. Borde gris delgado de 1px, fondo blanco, tamaño estándar del input. El campo presenta esquinas ligeramente redondeadas.",
+    "_generated": {
+      "hash": "c134a44062cc090af6c1d9e346d6278f",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:01:55.148Z"
     }
   },
   {
@@ -217,6 +307,12 @@
       "id": "value",
       "name": "valor",
       "value": "Esto es un valor"
+    },
+    "visualDescription": "Campo de entrada de texto con borde gris de 1px y esquinas redondeadas, fondo blanco. Título en texto negro estándar arriba, seguido de label en negro. Input contiene texto en negro estándar, tamaño mediano.",
+    "_generated": {
+      "hash": "ef77aa32e4ab25812e142eafb706c3a1",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:02:03.403Z"
     }
   },
   {
@@ -232,6 +328,12 @@
       "id": "con-placeholder",
       "name": "placeholder",
       "placeholder": "Esto es un placeholder"
+    },
+    "visualDescription": "Campo de entrada de texto con borde gris de 1px y esquinas redondeadas, fondo blanco. Título en texto negro estándar arriba, seguido de dos líneas de texto en negro. Input muestra texto placeholder en gris claro, tamaño mediano.",
+    "_generated": {
+      "hash": "696b5f65cfe3821c920a063ca0f83cd2",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:02:03.403Z"
     }
   },
   {
@@ -243,6 +345,12 @@
       "id": "with-describedby-a",
       "name": "with-describedby-a",
       "describedBy": "input-example-a"
+    },
+    "visualDescription": "Campo de entrada de texto con borde gris de 1px y esquinas redondeadas, fondo blanco vacío. Título en texto negro estándar arriba, seguido de label en negro. Input de tamaño mediano sin contenido visible ni placeholder.",
+    "_generated": {
+      "hash": "b475c8c9eef660e628173e63b331a600",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:02:03.403Z"
     }
   },
   {
@@ -257,6 +365,12 @@
       "id": "with-describedby-b",
       "name": "with-describedby-b",
       "describedBy": "input-example-a"
+    },
+    "visualDescription": "Campo de entrada de texto rectangular con borde gris de 1px y fondo blanco. Incluye un label negro en peso normal arriba y texto descriptivo gris claro debajo del label indicando \"Este es una pista\". Ancho aproximado de 100px, altura estándar de input.",
+    "_generated": {
+      "hash": "a4436e7c86171811433072d28131f38c",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:02:11.286Z"
     }
   },
   {
@@ -269,6 +383,12 @@
       "id": "con-inputmode",
       "name": "inputmode",
       "inputmode": "email"
+    },
+    "visualDescription": "Campo de entrada de texto rectangular con borde gris de 1px y fondo blanco. Presenta un label negro en peso normal posicionado arriba del campo. Ancho aproximado de 100px, altura estándar de input, sin elementos adicionales de ayuda o descripción.",
+    "_generated": {
+      "hash": "37b760563da7dbc89420b602d161f912",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:02:11.286Z"
     }
   }
 ] %}

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

@@ -40,7 +40,7 @@
     visuallyHiddenText: params.errorMessage.visuallyHiddenText
   }) | indent(2) | trim }}
 {% 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 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 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/input-group/_examples.input-group.njk

@@ -42,6 +42,12 @@
           "placeholder": "Ej: 28999876V"
         }
       ]
+    },
+    "visualDescription": "Sección con título en negrita negro arriba. Contiene label negro, dropdown con borde gris de 1px y fondo blanco, e input de texto con borde gris de 1px y fondo blanco mostrando placeholder. Los campos están alineados horizontalmente en una fila.",
+    "_generated": {
+      "hash": "07bdad60b63d8db9def45298dd26187c",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:00:55.072Z"
     }
   },
   {
@@ -89,6 +95,12 @@
           "placeholder": "Ej: 28999876V"
         }
       ]
+    },
+    "visualDescription": "Sección con título en negrita negro arriba seguido de texto descriptivo gris claro en dos líneas. Contiene label negro, dropdown con borde gris de 1px y fondo blanco, e input de texto con borde gris de 1px y fondo blanco mostrando placeholder. Los campos están alineados horizontalmente.",
+    "_generated": {
+      "hash": "d7e68d8683fe1823d682559bebb22f19",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:00:55.072Z"
     }
   },
   {
@@ -134,6 +146,12 @@
         }
       ],
       "classes": "lg:flex lg:flex-wrap lg:items-center lg:gap-x-base"
+    },
+    "visualDescription": "Sección con título en negrita negro arriba y subtítulo negro debajo. Contiene label negro, input de texto con borde gris de 1px y fondo blanco, flecha negra como separador, otro label negro, e input de texto con borde gris de 1px y fondo blanco. Los elementos están alineados horizontalmente en secuencia.",
+    "_generated": {
+      "hash": "01a63db5bc3c89ea80ca7b86aee9a42e",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:00:55.072Z"
     }
   },
   {
@@ -203,6 +221,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Formulario con encabezado negro, texto descriptivo gris, y mensaje de error en rojo indicando que dos campos no pueden estar vacíos. Tres campos de entrada: un dropdown con fondo gris claro, y dos campos de texto vacíos con bordes rojos de 2px. Labels en negro posicionados sobre cada campo.",
+    "_generated": {
+      "hash": "98642d6b98ec5de65e7da1ee0f982ee7",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:01:04.723Z"
     }
   },
   {
@@ -267,6 +291,12 @@
           "classes": "w-full lg:w-auto"
         }
       ]
+    },
+    "visualDescription": "Formulario con encabezado negro, texto descriptivo gris, y mensaje de error en rojo indicando que un campo no puede estar vacío. Tres campos de entrada: un dropdown con fondo gris claro, un campo de texto vacío con borde rojo de 2px, y un campo de texto vacío con borde gris estándar. Labels en negro sobre cada campo.",
+    "_generated": {
+      "hash": "a379cedc1068c0db35ca5e20fa9b9e77",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:01:04.723Z"
     }
   },
   {
@@ -331,6 +361,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Formulario con encabezado negro, texto descriptivo gris, y mensaje de error en rojo indicando que un campo no puede estar vacío. Tres campos de entrada: un dropdown con fondo gris claro, un campo de texto vacío con borde gris estándar, y un campo de texto vacío con borde rojo de 2px. Labels en negro posicionados sobre cada campo respectivo.",
+    "_generated": {
+      "hash": "d71542f407ca2646b7d41cd5899a766e",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:01:04.723Z"
     }
   },
   {
@@ -382,6 +418,12 @@
           "placeholder": "Ej: 28999876V"
         }
       ]
+    },
+    "visualDescription": "Sección con fondo azul claro conteniendo un formulario de documento de identidad. Incluye dropdown con fondo blanco y borde gris, campo de texto con placeholder numérico de ejemplo con borde gris. Labels en texto negro pequeño, disposición horizontal de los campos.",
+    "_generated": {
+      "hash": "54183d8d313da2f3d5c1fad3c46d79ff",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:01:15.085Z"
     }
   },
   {
@@ -438,6 +480,12 @@
           "autocomplete": "family-name"
         }
       ]
+    },
+    "visualDescription": "Formulario con fondo blanco y título h3 negro. Contiene dropdown \"Sr.\" con borde gris oscuro, dos campos de texto rectangulares con bordes grises para nombre y apellidos. Labels en texto negro pequeño posicionados encima de cada campo, layout horizontal de inputs.",
+    "_generated": {
+      "hash": "19f397b54c17cd0d0398a39fbbf5a273",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:01:15.085Z"
     }
   },
   {
@@ -500,6 +548,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Sección con fondo blanco y encabezado h3 en texto negro. Presenta dropdown \"Sr.\" con borde gris oscuro de 1px, dos campos de entrada de texto blancos con bordes grises para datos personales. Labels negros pequeños sobre cada campo, disposición en fila de los elementos del formulario.",
+    "_generated": {
+      "hash": "37883fe43c1f5355d8d1bb8f13ba5fc8",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:01:15.085Z"
     }
   }
 ] %}

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

@@ -7,6 +7,12 @@
       "title": {
         "text": "Entidades locales de la Comunidad Autónoma de Aragón"
       }
+    },
+    "visualDescription": "Caja rectangular con borde gris claro de 1px y fondo blanco. Contiene texto negro de tamaño estándar alineado a la izquierda con padding interno moderado. Esquinas ligeramente redondeadas.",
+    "_generated": {
+      "hash": "6c0453b32f6869954186fc6e57654f96",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:02:18.313Z"
     }
   },
   {
@@ -15,6 +21,12 @@
       "title":{
         "html": "Las entidades beneficiarias deberán tener su sede y actividad <strong class=' font-bold '>principal en Aragón.</strong>"
       }
+    },
+    "visualDescription": "Caja rectangular con borde gris claro de 1px y fondo blanco. Contiene texto negro de tamaño estándar con una palabra en negrita seguida de texto normal, alineado a la izquierda con padding interno moderado. Esquinas ligeramente redondeadas.",
+    "_generated": {
+      "hash": "fb0ca4264625b158e6ba9e517f6aca85",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:02:18.313Z"
     }
   },
   {
@@ -25,6 +37,12 @@
       "title": {
         "text": "Entidades locales de la Comunidad Autónoma de Aragón"
       }
+    },
+    "visualDescription": "Caja rectangular con borde gris claro de 1px y fondo blanco. Incluye encabezado en texto gris oscuro de tamaño pequeño en la parte superior, seguido de texto negro de tamaño estándar en la línea inferior, ambos alineados a la izquierda con padding interno moderado. Esquinas ligeramente redondeadas.",
+    "_generated": {
+      "hash": "77fa2fabe1520437f126bb027518118a",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:02:18.313Z"
     }
   },
   {
@@ -37,6 +55,12 @@
       "description":{
         "html": "Documento acreditativo de registro de alta de la <strong class=' font-bold '>asociación</strong>"
       }
+    },
+    "visualDescription": "Contenedor rectangular con borde gris claro de 1px y fondo blanco. Título en negrita negro seguido de dos líneas de texto en peso normal, negro, tamaño mediano. Espaciado vertical consistente entre elementos de texto.",
+    "_generated": {
+      "hash": "1d273843eaa8d25c386548c444a3ea07",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:02:26.662Z"
     }
   },
   {
@@ -57,6 +81,12 @@
           "text": "Condicionado"
         }
       ]
+    },
+    "visualDescription": "Contenedor rectangular con borde gris claro de 1px y fondo blanco. Título en negrita negro seguido de caja interna con fondo gris muy claro, conteniendo texto negro en múltiples segmentos separados por líneas verticales grises. Espaciado interno generoso en la caja gris.",
+    "_generated": {
+      "hash": "6a8ed81ed2e755538556f3a0d03249df",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:02:26.662Z"
     }
   },
   {
@@ -70,6 +100,12 @@
         "html": "Modelo: <a class=' c-link break-all ' href=' # '>Modelo de fianza (PDF, 20Kb)</a> ",
         "classes": "text-neutral-dark"
       }
+    },
+    "visualDescription": "Contenedor rectangular con borde gris claro de 1px y fondo blanco. Título en negrita negro seguido de subtexto gris en peso normal. Enlace azul subrayado debajo del subtexto. Espaciado vertical uniforme entre todos los elementos.",
+    "_generated": {
+      "hash": "da938df58b02dfcb25e103b4197a0723",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:02:26.662Z"
     }
   },
   {
@@ -84,6 +120,12 @@
         }
       },
       "caller": "<ul class='flex flex-wrap gap-sm'><li><button id='b-1a' class=' c-button c-button--sm c-button--transparent ' aria-labelledby='b-1a t1'>Eliminar</button></li><li><button id='b-1b' class='c-button c-button--sm c-button--transparent' aria-labelledby='b-1b t1'>Editar</button></li></ul>"
+    },
+    "visualDescription": "Caja rectangular con borde gris claro, fondo blanco, altura aproximada de 60px. Contiene texto negro alineado a la izquierda y dos enlaces azules (\"Eliminar\" y \"Editar\") alineados a la derecha en la misma línea. Los enlaces azules son interactivos y están separados por un pequeño espacio.",
+    "_generated": {
+      "hash": "f7d00a75e4cfba41d55006c6cecdaff6",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:02:36.374Z"
     }
   },
   {
@@ -94,6 +136,12 @@
         "text": "Entidades locales de la Comunidad Autónoma de Aragón"
       },
       "isDraggable": true
+    },
+    "visualDescription": "Caja rectangular con borde gris claro, fondo blanco, altura aproximada de 50px. Incluye un icono de líneas horizontales (handle de arrastre) alineado a la izquierda, seguido de texto negro. Fondo blanco uniforme sin elementos adicionales visibles en el área derecha.",
+    "_generated": {
+      "hash": "91fef49fe4de062072c13ff03badcfc4",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:02:36.374Z"
     }
   },
   {
@@ -108,6 +156,12 @@
       },
       "isLocked": true,
       "caller": "<ul class='flex flex-wrap gap-sm'><li><button id='b-2a' class=' c-button c-button--sm c-button--transparent ' aria-labelledby='b-2a t2'>Eliminar</button></li><li><button id='b-2b' class='c-button c-button--sm c-button--transparent' aria-labelledby='b-2b t2'>Editar</button></li></ul>"
+    },
+    "visualDescription": "Caja rectangular con borde gris claro, fondo gris muy claro (casi blanco), altura aproximada de 60px. Presenta un icono de candado gris a la izquierda, texto negro en el centro, y dos enlaces azules (\"Eliminar\" y \"Editar\") alineados a la derecha. Fondo sutilmente diferenciado del blanco puro indica estado bloqueado.",
+    "_generated": {
+      "hash": "364ac6c9faf81a4f4c14eef4f1cf4716",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:02:36.374Z"
     }
   },
   {
@@ -127,6 +181,12 @@
         "type": "document"
       },
       "caller": "<ul class='flex flex-wrap gap-sm'><li><button id='b-3a' class=' c-button c-button--sm c-button--transparent ' aria-labelledby='b-3a t3'>Eliminar</button></li><li><button id='b-3b' class='c-button c-button--sm c-button--transparent' aria-labelledby='b-3b t3'>Editar</button></li></ul>"
+    },
+    "visualDescription": "Elemento rectangular con fondo blanco y borde gris claro de 1px. Contiene un icono de documento gris a la izquierda, título en negrita negro, subtítulo en texto azul subrayado (enlace), y dos botones de texto azul alineados a la derecha.",
+    "_generated": {
+      "hash": "7f2c45cc466cd8191d3ab9c426a3c880",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:02:45.143Z"
     }
   },
   {
@@ -146,6 +206,12 @@
         "type": "link"
       },
       "caller": "<ul class='flex flex-wrap gap-sm'><li><button id='b-4a' class=' c-button c-button--sm c-button--transparent ' aria-labelledby='b-4a t4'>Eliminar</button></li><li><button id='b-4b' class='c-button c-button--sm c-button--transparent' aria-labelledby='b-4b t4'>Editar</button></li></ul>"
+    },
+    "visualDescription": "Elemento rectangular con fondo blanco y borde gris claro de 1px. Contiene un icono de enlace gris a la izquierda, título en negro peso normal, subtítulo en texto azul subrayado (enlace), y dos botones de texto azul alineados a la derecha.",
+    "_generated": {
+      "hash": "64e4d9b1e043e8caafafbd0c2c413916",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:02:45.143Z"
     }
   },
   {
@@ -173,6 +239,12 @@
         "type": "clipboard"
       },
       "caller": "<ul class='flex flex-wrap gap-sm'><li><button id='b-5a' class=' c-button c-button--sm c-button--transparent ' aria-labelledby='b-5a t5'>Eliminar</button></li><li><button id='b-5b' class='c-button c-button--sm c-button--transparent' aria-labelledby='b-5b t5'>Editar</button></li></ul>"
+    },
+    "visualDescription": "Elemento rectangular con fondo blanco y borde gris claro de 1px. Contiene un icono de portapapeles gris a la izquierda, título en negrita negro, línea de metadatos con separadores verticales en texto gris, y dos botones de texto azul alineados a la derecha.",
+    "_generated": {
+      "hash": "9d540157f9073aeb54a21994d882ee24",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:02:45.143Z"
     }
   },
   {
@@ -192,6 +264,12 @@
         "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'  width='1em' height='1em' class='w-8 h-8 text-neutral-dark' aria-label='Icono de papelera' focusable='false' role='img'><path d='M19.5 7.5h-15A.5.5 0 0 0 4 8v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a.5.5 0 0 0-.5-.5Zm-9.25 13a.75.75 0 0 1-1.5 0v-9a.75.75 0 0 1 1.5 0Zm5 0a.75.75 0 0 1-1.5 0v-9a.75.75 0 0 1 1.5 0ZM22 4h-4.75a.25.25 0 0 1-.25-.25V2.5A2.5 2.5 0 0 0 14.5 0h-5A2.5 2.5 0 0 0 7 2.5v1.25a.25.25 0 0 1-.25.25H2a1 1 0 0 0 0 2h20a1 1 0 0 0 0-2ZM9 3.75V2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v1.25a.25.25 0 0 1-.25.25h-5.5A.25.25 0 0 1 9 3.75Z' fill='currentColor' transform='scale(2)'/></svg>"
       },
       "caller": "<ul class='flex flex-wrap gap-sm'><li><button id='b-6a' class=' c-button c-button--sm c-button--transparent ' aria-labelledby='b-6a t6'>Eliminar</button></li><li><button id='b-6b' class='c-button c-button--sm c-button--transparent' aria-labelledby='b-6b t6'>Editar</button></li></ul>"
+    },
+    "visualDescription": "Contenedor rectangular con fondo blanco y borde gris claro de 1px. Incluye un icono de carpeta gris a la izquierda, seguido de texto de título negro en peso normal y un enlace azul subrayado debajo. Botones en azul están alineados a la derecha del contenedor.",
+    "_generated": {
+      "hash": "310edc56b39f5dd0d91497c0ec7752eb",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:02:54.621Z"
     }
   },
   {
@@ -218,6 +296,12 @@
         "containerClasses": "self-start h-full mr-base"
       },
       "caller": "<ul class='flex flex-wrap gap-sm'><li><button id='b-3a' class=' c-button c-button--sm c-button--transparent ' aria-labelledby='b-3a t3'>Eliminar</button></li><li><button id='b-3b' class='c-button c-button--sm c-button--transparent' aria-labelledby='b-3b t3'>Editar</button></li></ul>"
+    },
+    "visualDescription": "Contenedor rectangular con fondo blanco y borde gris claro de 1px. Presenta un icono de documento gris alineado en la parte superior izquierda, con título negro en peso normal a su derecha y párrafo de texto gris en peso normal debajo que ocupa varias líneas. Botones en azul están posicionados en la esquina superior derecha.",
+    "_generated": {
+      "hash": "0c746baed8c9cb2e0828778c0e90d7cc",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:02:54.621Z"
     }
   },
   {
@@ -238,6 +322,12 @@
       },
       "isDraggable": true,
       "caller": "<ul class='flex flex-wrap gap-sm'><li><button id='b-7a' class=' c-button c-button--sm c-button--transparent ' aria-labelledby='b-7a t7'>Eliminar</button></li><li><button id='b-7b' class='c-button c-button--sm c-button--transparent' aria-labelledby='b-7b t7'>Editar</button></li></ul>"
+    },
+    "visualDescription": "Contenedor rectangular con fondo blanco y borde gris claro de 1px. Muestra un icono de manejador de arrastre gris (seis puntos) a la izquierda, seguido de un icono de documento gris, título negro en peso normal y enlace azul subrayado debajo del título. Botones en azul están alineados a la derecha del contenedor.",
+    "_generated": {
+      "hash": "4736084104a58bad94f21e8afd10e596",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:02:54.621Z"
     }
   },
   {
@@ -270,6 +360,12 @@
         "classes": "text-neutral-dark"
       },
       "caller": "<ul class='flex flex-wrap gap-sm'><li><button id='b-8a' class=' c-button c-button--sm c-button--transparent ' aria-labelledby='b-8a t8'>Eliminar</button></li><li><button id='b-8b' class='c-button c-button--sm c-button--transparent' aria-labelledby='b-8b t8'>Editar</button></li></ul>"
+    },
+    "visualDescription": "Componente rectangular con borde gris claro, fondo blanco y encabezado con texto negro en negrita. Contiene título, subtítulo gris, metadatos con separadores verticales, y enlaces azules alineados a la derecha superior.",
+    "_generated": {
+      "hash": "5e1fd5ac697e4e67eb884526da610c51",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:03:02.178Z"
     }
   }
 ] %}

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

@@ -4,6 +4,12 @@
     "name": "por defecto",
     "data": {
       "text": "Esto es un label"
+    },
+    "visualDescription": "Bloque rectangular con borde gris claro de 1px y fondo blanco. Contiene título pequeño gris oscuro arriba y texto negro de tamaño estándar debajo. Espaciado interno moderado en todos los lados.",
+    "_generated": {
+      "hash": "ebc5e150749cc5050f89c16109b13054",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:03:09.564Z"
     }
   },
   {
@@ -11,6 +17,12 @@
     "data": {
       "classes": "inline-block p-base bg-primary-light",
       "text": "Esto es un label"
+    },
+    "visualDescription": "Bloque rectangular con borde gris claro de 1px y fondo azul muy pálido. Contiene título pequeño gris oscuro arriba y texto azul oscuro de tamaño estándar con fondo azul claro debajo. Espaciado interno moderado en todos los lados.",
+    "_generated": {
+      "hash": "a42bfa0c4cc68350157b0a39f0fe96ea",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:03:09.564Z"
     }
   },
   {
@@ -20,6 +32,12 @@
       "text": "Esto es un label",
       "classes": "c-h1",
       "isPageHeading": true
+    },
+    "visualDescription": "Bloque rectangular con borde gris claro de 1px y fondo blanco. Contiene título pequeño gris oscuro arriba y texto negro en tamaño grande con peso de fuente bold/negrita debajo. Espaciado interno moderado en todos los lados.",
+    "_generated": {
+      "hash": "12a78954721bd24612b96d59171e80af",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:03:09.564Z"
     }
   },
   {
@@ -30,6 +48,12 @@
       "classes": "c-h3",
       "isPageHeading": true,
       "headingLevel": "3"
+    },
+    "visualDescription": "Rectángulo con borde gris claro de 1px y fondo blanco. Contiene dos líneas de texto: la primera es un encabezado en peso negrita negro de tamaño mediano, la segunda es texto regular negro de tamaño estándar. Padding interno uniforme alrededor del contenido.",
+    "_generated": {
+      "hash": "82a8f1244b647702388066e57c0ad328",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:03:15.390Z"
     }
   }
 ] %}