desy-html 15.0.3 → 16.0.0

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

@@ -4,6 +4,12 @@
     "name": "por defecto",
     "data": {
       "text": "Por defecto"
+    },
+    "visualDescription": "Botón rectangular con borde azul de 1-2px, fondo blanco, y texto azul en peso normal. El botón tiene padding moderado alrededor del texto. Esquinas ligeramente redondeadas.",
+    "_generated": {
+      "hash": "9c8905b1b80586acb882d3e1c9bb50e0",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:49:58.711Z"
     }
   },
   {
@@ -13,6 +19,12 @@
       "name": "active",
       "text": "Activo",
       "classes": "ds-active"
+    },
+    "visualDescription": "Botón rectangular con borde azul de 1-2px, fondo azul sólido, y texto blanco en peso normal. El botón tiene padding moderado alrededor del texto. Esquinas ligeramente redondeadas.",
+    "_generated": {
+      "hash": "87faca7a0214cfbcea6b282cef93d774",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:49:58.711Z"
     }
   },
   {
@@ -22,6 +34,12 @@
       "name": "hover",
       "text": "Hover",
       "classes": "ds-hover"
+    },
+    "visualDescription": "Botón rectangular con borde azul oscuro de 1-2px, fondo azul claro translúcido, y texto azul oscuro en peso normal. El botón tiene padding moderado alrededor del texto. Esquinas ligeramente redondeadas.",
+    "_generated": {
+      "hash": "5d335eb27a127b6d73e914f202f4d864",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:49:58.711Z"
     }
   },
   {
@@ -31,6 +49,12 @@
       "name": "focus",
       "text": "Focus",
       "classes": "ds-focus"
+    },
+    "visualDescription": "Botón rectangular con fondo amarillo brillante, borde negro de 2px, y texto en negrita negro centrado. Dimensiones compactas de altura aproximada 30-35px y ancho ajustado al contenido con padding lateral moderado.",
+    "_generated": {
+      "hash": "d0dd8934f4b1e971bff30a2b36904cfb",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:50:06.186Z"
     }
   },
   {
@@ -38,6 +62,12 @@
     "data": {
       "text": "Deshabilitado",
       "disabled": true
+    },
+    "visualDescription": "Botón rectangular con fondo blanco, borde gris claro de 1px, y texto en color gris claro centrado. Dimensiones compactas de altura aproximada 30-35px y ancho ajustado al contenido con padding lateral moderado.",
+    "_generated": {
+      "hash": "a369de481f71bb21bc4679d44d965da8",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:50:06.186Z"
     }
   },
   {
@@ -45,6 +75,12 @@
     "data": {
       "text": "Primario",
       "classes": "c-button--primary"
+    },
+    "visualDescription": "Botón rectangular con fondo azul petróleo oscuro, sin borde visible, y texto en blanco centrado. Dimensiones compactas de altura aproximada 30-35px y ancho ajustado al contenido con padding lateral moderado.",
+    "_generated": {
+      "hash": "e553b82e738719f98ddb49d77e6a77a2",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:50:06.186Z"
     }
   },
   {
@@ -54,6 +90,12 @@
       "name": "active",
       "text": "Activo",
       "classes": "c-button--primary ds-active"
+    },
+    "visualDescription": "Botón rectangular con fondo azul oscuro (teal/petróleo), texto blanco en negrita, padding horizontal amplio. Bordes con esquinas ligeramente redondeadas, aspecto sólido y clickeable.",
+    "_generated": {
+      "hash": "7e43e4748fb6c61b46af7f6213480185",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:50:13.863Z"
     }
   },
   {
@@ -63,6 +105,12 @@
       "name": "hover",
       "text": "Hover",
       "classes": "c-button--primary ds-hover"
+    },
+    "visualDescription": "Botón rectangular con fondo azul marino oscuro, texto blanco en negrita, padding horizontal amplio. Bordes con esquinas ligeramente redondeadas, superficie sólida sin transparencias.",
+    "_generated": {
+      "hash": "abd8d3b0bacd7c3a136c986e96beece9",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:50:13.863Z"
     }
   },
   {
@@ -72,6 +120,12 @@
       "name": "focus",
       "text": "Focus",
       "classes": "c-button--primary ds-focus"
+    },
+    "visualDescription": "Botón rectangular con fondo amarillo brillante, texto negro en negrita, padding horizontal amplio. Bordes con esquinas ligeramente redondeadas, alto contraste entre fondo y texto, borde negro de 2px visible.",
+    "_generated": {
+      "hash": "e0112cf7b0a54ec67ec4583d4a93d214",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:50:13.863Z"
     }
   },
   {
@@ -80,6 +134,12 @@
       "text": "Deshabilitado",
       "disabled": true,
       "classes": "c-button--primary"
+    },
+    "visualDescription": "Botón rectangular con fondo gris azulado claro, texto blanco en peso regular centrado. Bordes redondeados sutiles, apariencia atenuada sin sombras ni efectos hover visibles.",
+    "_generated": {
+      "hash": "daa793dceaf4ff9f199645ff15d34202",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:50:21.174Z"
     }
   },
   {
@@ -87,6 +147,12 @@
     "data": {
       "text": "Alerta",
       "classes": "c-button--alert"
+    },
+    "visualDescription": "Botón rectangular con fondo rojo brillante, texto blanco en peso regular centrado. Bordes redondeados sutiles, apariencia sólida con contraste alto entre fondo y texto.",
+    "_generated": {
+      "hash": "e0e1fe511c0799c3b71c98505c5daed6",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:50:21.174Z"
     }
   },
   {
@@ -96,6 +162,12 @@
       "name": "active",
       "text": "Activo",
       "classes": "c-button--alert ds-active"
+    },
+    "visualDescription": "Botón rectangular con fondo rojo oscuro intenso, texto blanco en peso regular centrado. Bordes redondeados sutiles, apariencia de estado presionado con tono más profundo que denota interacción activa.",
+    "_generated": {
+      "hash": "1d1ffc08adcde9326a974f80d944c07e",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:50:21.174Z"
     }
   },
   {
@@ -105,6 +177,12 @@
       "name": "hover",
       "text": "Hover",
       "classes": "c-button--alert ds-hover"
+    },
+    "visualDescription": "Botón rectangular con fondo rojo oscuro, texto blanco en peso normal, y esquinas ligeramente redondeadas. Padding generoso alrededor del texto, tamaño compacto de botón estándar con borde rojo sólido visible.",
+    "_generated": {
+      "hash": "e8307f5b3a7b3fe04e56cd874fd9c5f8",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:50:30.044Z"
     }
   },
   {
@@ -114,6 +192,12 @@
       "name": "focus",
       "text": "Focus",
       "classes": "c-button--alert ds-focus"
+    },
+    "visualDescription": "Botón rectangular con fondo amarillo brillante, texto negro en peso normal, y esquinas ligeramente redondeadas. Borde negro de 2-3px rodea el botón creando un contorno de enfoque visible, padding interno generoso.",
+    "_generated": {
+      "hash": "820394b187829a9a3e9050ccb6e111e3",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:50:30.044Z"
     }
   },
   {
@@ -122,6 +206,12 @@
       "text": "Deshabilitado",
       "disabled": true,
       "classes": "c-button--alert"
+    },
+    "visualDescription": "Botón rectangular con fondo rosa pálido translúcido, texto blanco en peso normal, y esquinas ligeramente redondeadas. Apariencia atenuada sin borde visible, padding interno estándar, opacidad reducida indicando estado inactivo.",
+    "_generated": {
+      "hash": "01a4fcb806863739d7c2bc132bee8734",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:50:30.044Z"
     }
   },
   {
@@ -129,6 +219,12 @@
     "data": {
       "text": "Transparente",
       "classes": "c-button--transparent"
+    },
+    "visualDescription": "Botón con texto azul en fuente regular, sin borde visible, fondo completamente transparente. Elemento clickeable de tamaño compacto con padding mínimo alrededor del texto.",
+    "_generated": {
+      "hash": "0a79bfd8d2b195eab9bae8c90bd33531",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:50:37.930Z"
     }
   },
   {
@@ -138,6 +234,12 @@
       "name": "active",
       "text": "Activo",
       "classes": "c-button--transparent ds-active"
+    },
+    "visualDescription": "Botón con texto azul en fuente bold (negrita), sin borde visible, fondo completamente transparente. Elemento clickeable de tamaño compacto que muestra énfasis tipográfico mediante el peso de fuente aumentado.",
+    "_generated": {
+      "hash": "0adfb7af89cfc304d4c8985cc731cc0e",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:50:37.930Z"
     }
   },
   {
@@ -147,6 +249,12 @@
       "name": "hover",
       "text": "Hover",
       "classes": "c-button--transparent ds-hover"
+    },
+    "visualDescription": "Botón con texto azul subrayado en fuente regular, sin borde visible, fondo gris muy claro (casi blanco). Elemento clickeable de tamaño compacto con padding ligero y decoración de subrayado en el texto.",
+    "_generated": {
+      "hash": "893c2f8477b1de95e632d5bc1fae98d8",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:50:37.930Z"
     }
   },
   {
@@ -156,6 +264,12 @@
       "name": "focus",
       "text": "Focus",
       "classes": "c-button--transparent ds-focus"
+    },
+    "visualDescription": "Botón con fondo amarillo vibrante, texto negro en negrita, y borde negro de 2px. El botón tiene padding moderado, esquinas ligeramente redondeadas, y muestra un estado de enfoque activo con outline visible.",
+    "_generated": {
+      "hash": "04256ad5d064c31de2a1aca26a34bdf2",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:50:46.737Z"
     }
   },
   {
@@ -164,6 +278,12 @@
       "text": "Deshabilitado",
       "disabled": true,
       "classes": "c-button--transparent"
+    },
+    "visualDescription": "Botón con fondo blanco transparente, texto gris claro en peso normal, y sin borde visible. El botón mantiene padding moderado, esquinas ligeramente redondeadas, y transmite un estado inactivo mediante su paleta de colores desaturada.",
+    "_generated": {
+      "hash": "b06cec5cbaf9107faa52fceddc1d024f",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:50:46.737Z"
     }
   },
   {
@@ -171,6 +291,12 @@
     "data": {
       "text": "Anchura completa",
       "classes": "w-full justify-center"
+    },
+    "visualDescription": "Botón rectangular que ocupa el 100% del ancho del contenedor, con fondo blanco, borde azul de 1px, y texto azul centrado. El botón tiene altura estándar, esquinas ligeramente redondeadas, y padding vertical uniforme que distribuye el espacio alrededor del texto.",
+    "_generated": {
+      "hash": "6fcbc3775c5d723da6f7e6e3bca26010",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:50:46.737Z"
     }
   },
   {
@@ -178,6 +304,12 @@
     "data": {
       "text": "Grande y primario",
       "classes": "c-button--lg c-button--primary"
+    },
+    "visualDescription": "Botón rectangular con fondo azul petróleo oscuro, texto blanco en negrita. Esquinas ligeramente redondeadas, padding generoso vertical y horizontal, apariencia prominente de llamada a acción principal.",
+    "_generated": {
+      "hash": "01c201e4ad9f9e9a2b642d1c05a2b40e",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:50:54.527Z"
     }
   },
   {
@@ -185,6 +317,12 @@
     "data": {
       "text": "Peque",
       "classes": "c-button--sm"
+    },
+    "visualDescription": "Botón rectangular compacto con borde azul petróleo de 1-2px, fondo blanco, texto azul petróleo. Esquinas ligeramente redondeadas, padding reducido vertical y horizontal, estilo de botón secundario outline.",
+    "_generated": {
+      "hash": "aa506181d6605353b183292f704e6cb3",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:50:54.527Z"
     }
   },
   {
@@ -192,6 +330,12 @@
     "data": {
       "text": "Peque tiene selección",
       "classes": "c-button--sm c-button--has-selection"
+    },
+    "visualDescription": "Botón rectangular compacto con borde azul petróleo de 1-2px, fondo blanco, texto azul petróleo. Esquinas ligeramente redondeadas, padding reducido vertical y horizontal, estilo de botón secundario outline.",
+    "_generated": {
+      "hash": "a803464d1a993f4d5069c6b62cf40f8b",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:50:54.527Z"
     }
   },
   {
@@ -200,6 +344,12 @@
     "data": {
       "text": "Botón enlace",
       "href": "/"
+    },
+    "visualDescription": "Botón de enlace con texto azul en tamaño estándar, sin fondo visible. El borde azul de 1px rodea el elemento con esquinas redondeadas. El texto aparece centrado dentro del área del botón.",
+    "_generated": {
+      "hash": "fae9f5d5a13f0566fd1475b7e42f3cdb",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:51:02.816Z"
     }
   },
   {
@@ -212,6 +362,12 @@
       "attributes": {
         "title": "Se abre en ventana nueva"
       }
+    },
+    "visualDescription": "Botón de enlace con texto azul en tamaño estándar, borde azul de 1px con esquinas redondeadas. Incluye un ícono de flecha diagonal pequeño en color azul posicionado a la derecha del texto. El fondo es transparente.",
+    "_generated": {
+      "hash": "1c7890a1a8a6d37debf9417fbe23555a",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:51:02.816Z"
     }
 
   },
@@ -222,18 +378,36 @@
       "text": "Botón enlace deshabilitado",
       "href": "/",
       "disabled": true
+    },
+    "visualDescription": "Botón de enlace con texto gris claro en tamaño estándar, borde gris claro de 1px con esquinas redondeadas. El fondo es transparente y el elemento presenta una apariencia visualmente atenuada. El texto aparece centrado dentro del área del botón.",
+    "_generated": {
+      "hash": "e3d5b631fb8edd34cbcd2410f74862d9",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:51:02.816Z"
     }
   },
   {
     "name": "botón con icono a la derecha",
     "data": {
       "html": "Botón con icono<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='1em' width='1em' class='self-center ml-2' aria-hidden='true' focusable='false' role='presentation'><g><path fill='currentcolor' fill-rule='evenodd' d='M6.585782857142856 2.3000685714285716C6.960857142857142 1.9249942857142854 7.469565714285714 1.7142857142857142 8 1.7142857142857142c0.5304342857142856 0 1.0391428571428571 0.2107085714285714 1.4142171428571428 0.5857828571428572 0.2369828571428571 0.2369942857142857 0.4083542857142857 0.5273257142857143 0.5024114285714285 0.8427885714285713h-3.8332571428571427c0.09405714285714285 -0.3154628571428571 0.2654285714285714 -0.6057942857142857 0.5024114285714285 -0.8427885714285713ZM4.3299199999999995 3.142857142857143c0.12042285714285714 -0.7734742857142857 0.48325714285714283 -1.4945485714285713 1.04368 -2.054968C6.070171428571428 0.3913257142857143 7.014914285714285 0 8 0c0.9850857142857142 0 1.9298285714285714 0.3913257142857143 2.6264 1.0878891428571429 0.5604228571428571 0.5604194285714286 0.9233142857142856 1.2814937142857143 1.0436571428571428 2.054968H14.571428571428571c0.47337142857142855 0 0.8571428571428571 0.38375999999999993 0.8571428571428571 0.8571428571428571s-0.38377142857142854 0.8571428571428571 -0.8571428571428571 0.8571428571428571H13.714285714285714v9.428571428571429c0 0.4546285714285714 -0.18057142857142855 0.8907428571428571 -0.5020571428571429 1.2122285714285714S12.454628571428572 16 12 16h-8c-0.45466285714285715 0 -0.8906971428571429 -0.18057142857142855 -1.212182857142857 -0.5020571428571429C2.466331428571429 15.176457142857142 2.2857142857142856 14.740342857142856 2.2857142857142856 14.285714285714285V4.857142857142857h-0.8571428571428571C0.955184 4.857142857142857 0.5714285714285714 4.473382857142857 0.5714285714285714 4s0.3837554285714285 -0.8571428571428571 0.8571428571428571 -0.8571428571428571h2.901348571428571ZM6 6.715954285714285c0.39449142857142855 0 0.7142857142857142 0.3198057142857143 0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 -0.3197942857142857 0.7142857142857142 -0.7142857142857142 0.7142857142857142s-0.7142857142857142 -0.3198857142857143 -0.7142857142857142 -0.7142857142857142V7.4302399999999995c0 -0.39447999999999994 0.3197942857142857 -0.7142857142857142 0.7142857142857142 -0.7142857142857142Zm4.714285714285714 0.7142857142857142c0 -0.39447999999999994 -0.3197942857142857 -0.7142857142857142 -0.7142857142857142 -0.7142857142857142s-0.7142857142857142 0.3198057142857143 -0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 0.3197942857142857 0.7142857142857142 0.7142857142857142 0.7142857142857142s0.7142857142857142 -0.3198857142857143 0.7142857142857142 -0.7142857142857142V7.4302399999999995Z' clip-rule='evenodd' stroke-width='1'></path></g></svg>"
+    },
+    "visualDescription": "Botón rectangular con borde azul de 1px, fondo blanco, y texto azul en peso normal alineado a la izquierda. Icono azul de un cuadrado con flecha posicionado a la derecha del texto. Padding interno generoso con espaciado horizontal entre texto e icono.",
+    "_generated": {
+      "hash": "179e00dc4724c15f3457408883b541f3",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:51:11.621Z"
     }
   },
   {
     "name": "botón con icono a la izquierda",
     "data": {
       "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='1em' width='1em' class='self-center mr-2' aria-hidden='true' focusable='false' role='presentation'><g><path fill='currentcolor' fill-rule='evenodd' d='M6.585782857142856 2.3000685714285716C6.960857142857142 1.9249942857142854 7.469565714285714 1.7142857142857142 8 1.7142857142857142c0.5304342857142856 0 1.0391428571428571 0.2107085714285714 1.4142171428571428 0.5857828571428572 0.2369828571428571 0.2369942857142857 0.4083542857142857 0.5273257142857143 0.5024114285714285 0.8427885714285713h-3.8332571428571427c0.09405714285714285 -0.3154628571428571 0.2654285714285714 -0.6057942857142857 0.5024114285714285 -0.8427885714285713ZM4.3299199999999995 3.142857142857143c0.12042285714285714 -0.7734742857142857 0.48325714285714283 -1.4945485714285713 1.04368 -2.054968C6.070171428571428 0.3913257142857143 7.014914285714285 0 8 0c0.9850857142857142 0 1.9298285714285714 0.3913257142857143 2.6264 1.0878891428571429 0.5604228571428571 0.5604194285714286 0.9233142857142856 1.2814937142857143 1.0436571428571428 2.054968H14.571428571428571c0.47337142857142855 0 0.8571428571428571 0.38375999999999993 0.8571428571428571 0.8571428571428571s-0.38377142857142854 0.8571428571428571 -0.8571428571428571 0.8571428571428571H13.714285714285714v9.428571428571429c0 0.4546285714285714 -0.18057142857142855 0.8907428571428571 -0.5020571428571429 1.2122285714285714S12.454628571428572 16 12 16h-8c-0.45466285714285715 0 -0.8906971428571429 -0.18057142857142855 -1.212182857142857 -0.5020571428571429C2.466331428571429 15.176457142857142 2.2857142857142856 14.740342857142856 2.2857142857142856 14.285714285714285V4.857142857142857h-0.8571428571428571C0.955184 4.857142857142857 0.5714285714285714 4.473382857142857 0.5714285714285714 4s0.3837554285714285 -0.8571428571428571 0.8571428571428571 -0.8571428571428571h2.901348571428571ZM6 6.715954285714285c0.39449142857142855 0 0.7142857142857142 0.3198057142857143 0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 -0.3197942857142857 0.7142857142857142 -0.7142857142857142 0.7142857142857142s-0.7142857142857142 -0.3198857142857143 -0.7142857142857142 -0.7142857142857142V7.4302399999999995c0 -0.39447999999999994 0.3197942857142857 -0.7142857142857142 0.7142857142857142 -0.7142857142857142Zm4.714285714285714 0.7142857142857142c0 -0.39447999999999994 -0.3197942857142857 -0.7142857142857142 -0.7142857142857142 -0.7142857142857142s-0.7142857142857142 0.3198057142857143 -0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 0.3197942857142857 0.7142857142857142 0.7142857142857142 0.7142857142857142s0.7142857142857142 -0.3198857142857143 0.7142857142857142 -0.7142857142857142V7.4302399999999995Z' clip-rule='evenodd' stroke-width='1'></path></g></svg>Botón con icono"
+    },
+    "visualDescription": "Botón rectangular con borde azul de 1px, fondo blanco, y texto azul en peso normal alineado a la derecha. Icono azul de información circular posicionado a la izquierda del texto. Padding interno generoso con espaciado horizontal entre icono y texto.",
+    "_generated": {
+      "hash": "2ed8dcf6496e1e19f7193e51402155e4",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:51:11.621Z"
     }
   },
   {
@@ -243,6 +417,12 @@
       "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' class='self-center mr-2' aria-hidden='true' focusable='false' width='1em' height='1em'><path d='M37.93 27.93l-35 35a10 10 0 000 14.14l35 35a10 10 0 1014.14-14.14L38.41 84.27A2.5 2.5 0 0140.18 80H130a10 10 0 000-20H40.18a2.5 2.5 0 01-1.77-4.27l13.66-13.66a10 10 0 00-14.14-14.14z' fill='currentColor'></path></svg>Volver",
       "href": "/",
       "classes": "c-button--transparent"
+    },
+    "visualDescription": "Botón de texto sin borde ni fondo visible, compuesto por flecha azul apuntando a la izquierda seguida de texto azul en peso normal. Layout horizontal compacto con espaciado mínimo entre flecha y texto. Apariencia de enlace interactivo sin contenedor visible.",
+    "_generated": {
+      "hash": "93dbb95d339fb5ed50a6e3cdad7f6f57",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:51:11.621Z"
     }
   },
   {
@@ -252,6 +432,12 @@
       "html": "Ver más<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' class='self-center ml-2' aria-hidden='true' focusable='false' width='1em' height='1em'><path d='M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z' fill='currentColor'></path></svg>",
       "href": "/",
       "classes": "c-button--transparent"
+    },
+    "visualDescription": "Botón de texto con label azul oscuro seguido de un ícono de flecha hacia la derecha. Fondo transparente sin borde visible. Dimensiones compactas con padding mínimo alrededor del texto.",
+    "_generated": {
+      "hash": "72ccb16d544c8bf466d885d852e248f1",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:51:19.812Z"
     }
   },
   {
@@ -259,6 +445,12 @@
     "data": {
       "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='1em' width='1em' class='self-center my-1' aria-hidden='true' focusable='false' role='presentation' aria-label='Borrar'><g><path fill='currentcolor' fill-rule='evenodd' d='M6.585782857142856 2.3000685714285716C6.960857142857142 1.9249942857142854 7.469565714285714 1.7142857142857142 8 1.7142857142857142c0.5304342857142856 0 1.0391428571428571 0.2107085714285714 1.4142171428571428 0.5857828571428572 0.2369828571428571 0.2369942857142857 0.4083542857142857 0.5273257142857143 0.5024114285714285 0.8427885714285713h-3.8332571428571427c0.09405714285714285 -0.3154628571428571 0.2654285714285714 -0.6057942857142857 0.5024114285714285 -0.8427885714285713ZM4.3299199999999995 3.142857142857143c0.12042285714285714 -0.7734742857142857 0.48325714285714283 -1.4945485714285713 1.04368 -2.054968C6.070171428571428 0.3913257142857143 7.014914285714285 0 8 0c0.9850857142857142 0 1.9298285714285714 0.3913257142857143 2.6264 1.0878891428571429 0.5604228571428571 0.5604194285714286 0.9233142857142856 1.2814937142857143 1.0436571428571428 2.054968H14.571428571428571c0.47337142857142855 0 0.8571428571428571 0.38375999999999993 0.8571428571428571 0.8571428571428571s-0.38377142857142854 0.8571428571428571 -0.8571428571428571 0.8571428571428571H13.714285714285714v9.428571428571429c0 0.4546285714285714 -0.18057142857142855 0.8907428571428571 -0.5020571428571429 1.2122285714285714S12.454628571428572 16 12 16h-8c-0.45466285714285715 0 -0.8906971428571429 -0.18057142857142855 -1.212182857142857 -0.5020571428571429C2.466331428571429 15.176457142857142 2.2857142857142856 14.740342857142856 2.2857142857142856 14.285714285714285V4.857142857142857h-0.8571428571428571C0.955184 4.857142857142857 0.5714285714285714 4.473382857142857 0.5714285714285714 4s0.3837554285714285 -0.8571428571428571 0.8571428571428571 -0.8571428571428571h2.901348571428571ZM6 6.715954285714285c0.39449142857142855 0 0.7142857142857142 0.3198057142857143 0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 -0.3197942857142857 0.7142857142857142 -0.7142857142857142 0.7142857142857142s-0.7142857142857142 -0.3198857142857143 -0.7142857142857142 -0.7142857142857142V7.4302399999999995c0 -0.39447999999999994 0.3197942857142857 -0.7142857142857142 0.7142857142857142 -0.7142857142857142Zm4.714285714285714 0.7142857142857142c0 -0.39447999999999994 -0.3197942857142857 -0.7142857142857142 -0.7142857142857142 -0.7142857142857142s-0.7142857142857142 0.3198057142857143 -0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 0.3197942857142857 0.7142857142857142 0.7142857142857142 0.7142857142857142s0.7142857142857142 -0.3198857142857143 0.7142857142857142 -0.7142857142857142V7.4302399999999995Z' clip-rule='evenodd' stroke-width='1'></path></g></svg>",
       "classes": "c-button--primary align-bottom"
+    },
+    "visualDescription": "Botón cuadrado con fondo azul petróleo sólido conteniendo un ícono de flecha blanca apuntando hacia la derecha. Bordes rectos sin esquinas redondeadas. Tamaño mediano aproximadamente 40x40px con el ícono centrado.",
+    "_generated": {
+      "hash": "d6e62d1043509142e6e9f16cf698f506",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:51:19.812Z"
     }
 
   },
@@ -267,6 +459,12 @@
     "data": {
       "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='1em' width='1em' class='self-center my-1' aria-hidden='true' focusable='false' role='presentation' aria-label='Borrar'><g><path fill='currentcolor' fill-rule='evenodd' d='M6.585782857142856 2.3000685714285716C6.960857142857142 1.9249942857142854 7.469565714285714 1.7142857142857142 8 1.7142857142857142c0.5304342857142856 0 1.0391428571428571 0.2107085714285714 1.4142171428571428 0.5857828571428572 0.2369828571428571 0.2369942857142857 0.4083542857142857 0.5273257142857143 0.5024114285714285 0.8427885714285713h-3.8332571428571427c0.09405714285714285 -0.3154628571428571 0.2654285714285714 -0.6057942857142857 0.5024114285714285 -0.8427885714285713ZM4.3299199999999995 3.142857142857143c0.12042285714285714 -0.7734742857142857 0.48325714285714283 -1.4945485714285713 1.04368 -2.054968C6.070171428571428 0.3913257142857143 7.014914285714285 0 8 0c0.9850857142857142 0 1.9298285714285714 0.3913257142857143 2.6264 1.0878891428571429 0.5604228571428571 0.5604194285714286 0.9233142857142856 1.2814937142857143 1.0436571428571428 2.054968H14.571428571428571c0.47337142857142855 0 0.8571428571428571 0.38375999999999993 0.8571428571428571 0.8571428571428571s-0.38377142857142854 0.8571428571428571 -0.8571428571428571 0.8571428571428571H13.714285714285714v9.428571428571429c0 0.4546285714285714 -0.18057142857142855 0.8907428571428571 -0.5020571428571429 1.2122285714285714S12.454628571428572 16 12 16h-8c-0.45466285714285715 0 -0.8906971428571429 -0.18057142857142855 -1.212182857142857 -0.5020571428571429C2.466331428571429 15.176457142857142 2.2857142857142856 14.740342857142856 2.2857142857142856 14.285714285714285V4.857142857142857h-0.8571428571428571C0.955184 4.857142857142857 0.5714285714285714 4.473382857142857 0.5714285714285714 4s0.3837554285714285 -0.8571428571428571 0.8571428571428571 -0.8571428571428571h2.901348571428571ZM6 6.715954285714285c0.39449142857142855 0 0.7142857142857142 0.3198057142857143 0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 -0.3197942857142857 0.7142857142857142 -0.7142857142857142 0.7142857142857142s-0.7142857142857142 -0.3198857142857143 -0.7142857142857142 -0.7142857142857142V7.4302399999999995c0 -0.39447999999999994 0.3197942857142857 -0.7142857142857142 0.7142857142857142 -0.7142857142857142Zm4.714285714285714 0.7142857142857142c0 -0.39447999999999994 -0.3197942857142857 -0.7142857142857142 -0.7142857142857142 -0.7142857142857142s-0.7142857142857142 0.3198057142857143 -0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 0.3197942857142857 0.7142857142857142 0.7142857142857142 0.7142857142857142s0.7142857142857142 -0.3198857142857143 0.7142857142857142 -0.7142857142857142V7.4302399999999995Z' clip-rule='evenodd' stroke-width='1'></path></g></svg>",
       "classes": "c-button--primary c-button--sm align-bottom"
+    },
+    "visualDescription": "Botón cuadrado con fondo azul petróleo sólido conteniendo un ícono de flecha blanca apuntando hacia la derecha. Bordes rectos sin esquinas redondeadas. Tamaño pequeño aproximadamente 30x30px con el ícono centrado ocupando proporcionalmente el espacio interior.",
+    "_generated": {
+      "hash": "0bfb5a790104023b5ed3d2398d99841e",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:51:19.812Z"
     }
 
   },
@@ -276,6 +474,12 @@
       "element": "input",
       "name": "send-form",
       "text": "Enviar"
+    },
+    "visualDescription": "Botón rectangular con texto en color azul (aproximadamente #0066CC). Fondo blanco con borde azul de 1px. Tamaño compacto con padding interno moderado, esquinas ligeramente redondeadas.",
+    "_generated": {
+      "hash": "8d30b903c335ed1cb5c63f6b42831a21",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:51:27.490Z"
     }
   },
   {
@@ -284,6 +488,12 @@
       "element": "input",
       "text": "Enviar",
       "disabled": true
+    },
+    "visualDescription": "Botón rectangular con texto en color gris medio. Fondo blanco con borde gris claro de 1px. Tamaño compacto con padding interno moderado, esquinas ligeramente redondeadas, apariencia visual que indica estado inactivo.",
+    "_generated": {
+      "hash": "d3119ee9d2aace49a1c9916fb9fdbace",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:51:27.490Z"
     }
   },
   {
@@ -291,6 +501,12 @@
     "data": {
       "text": "Enviar",
       "preventDoubleClick": true
+    },
+    "visualDescription": "Botón rectangular con texto en color azul (aproximadamente #0066CC). Fondo blanco con borde azul de 1px. Tamaño compacto con padding interno moderado, esquinas ligeramente redondeadas, implementación que bloquea múltiples clics.",
+    "_generated": {
+      "hash": "156ca0e885a5fe584b7d5143e2c873bc",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:51:27.490Z"
     }
   }
 ] %}