desy-html 15.0.3 → 16.0.0

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

@@ -4,6 +4,12 @@
     "name": "por defecto",
     "data": {
       "text": "Por defecto"
+    },
+    "visualDescription": "Botón rectangular con borde azul de 1px, fondo blanco, y texto azul en peso normal. Tamaño compacto con padding moderado alrededor del texto. Esquinas ligeramente redondeadas.",
+    "_generated": {
+      "hash": "6938ecdf24b69c365cc6a48a31016ea8",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:48:28.869Z"
     }
   },
   {
@@ -17,6 +23,12 @@
       "loader": {
         "text": "Acción en curso"
       }
+    },
+    "visualDescription": "Botón rectangular con borde gris claro de 1px, fondo blanco, y spinner circular animado en gris oscuro centrado. Tamaño compacto con padding moderado. Esquinas ligeramente redondeadas.",
+    "_generated": {
+      "hash": "44d06678265dd0f2171116569e572480",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:48:28.869Z"
     }
   },
   {
@@ -30,6 +42,12 @@
         "text": "Acción realizada con éxito"
       },
       "classes": "c-button-loader--is-success"
+    },
+    "visualDescription": "Botón rectangular con borde verde de 1px, fondo blanco, y ícono de check en verde centrado. Tamaño compacto con padding moderado. Esquinas ligeramente redondeadas.",
+    "_generated": {
+      "hash": "bd0a739bda1925c3f441fbf127500ea2",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:48:28.869Z"
     }
   },
   {
@@ -39,6 +57,12 @@
       "name": "active",
       "text": "Activo",
       "classes": "ds-active"
+    },
+    "visualDescription": "Botón rectangular con fondo azul oscuro y texto blanco en negrita. Borde azul oscuro de 2px con esquinas ligeramente redondeadas. Tamaño compacto con padding uniforme alrededor del texto.",
+    "_generated": {
+      "hash": "28f99f0460f257cdc8b08242ba4e134f",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:48:35.441Z"
     }
   },
   {
@@ -48,6 +72,12 @@
       "name": "hover",
       "text": "Hover",
       "classes": "ds-hover"
+    },
+    "visualDescription": "Botón rectangular con fondo azul claro y texto azul oscuro en negrita. Borde azul oscuro de 2px con esquinas ligeramente redondeadas. Tamaño compacto con padding uniforme alrededor del texto.",
+    "_generated": {
+      "hash": "e1e6d91147f3a0d9a09ba78b6871c069",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:48:35.441Z"
     }
   },
   {
@@ -57,6 +87,12 @@
       "name": "focus",
       "text": "Focus",
       "classes": "ds-focus"
+    },
+    "visualDescription": "Botón rectangular con fondo amarillo brillante y texto negro en negrita. Borde negro de 2px con esquinas ligeramente redondeadas. Tamaño compacto con padding uniforme alrededor del texto.",
+    "_generated": {
+      "hash": "519c33eb8b71f3fcd04838f33afa1818",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:48:35.441Z"
     }
   },
   {
@@ -64,6 +100,12 @@
     "data": {
       "text": "Deshabilitado",
       "disabled": true
+    },
+    "visualDescription": "Botón rectangular con fondo gris claro, borde gris tenue de 1px, esquinas ligeramente redondeadas. Texto en color gris medio alineado al centro. Apariencia visual indica estado no interactivo.",
+    "_generated": {
+      "hash": "c2b268b8417805a879174af343cc8ceb",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:48:43.715Z"
     }
   },
   {
@@ -71,6 +113,12 @@
     "data": {
       "text": "Primario",
       "classes": "c-button-loader--primary"
+    },
+    "visualDescription": "Botón rectangular con fondo azul oscuro sólido (tonalidad petróleo/teal), sin borde visible, esquinas ligeramente redondeadas. Texto blanco en negrita alineado al centro. Tamaño compacto con padding equilibrado horizontal y vertical.",
+    "_generated": {
+      "hash": "23c55268eb8b70b098abb54b2a4400c6",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:48:43.715Z"
     }
   },
   {
@@ -80,6 +128,12 @@
       "name": "active",
       "text": "Activo",
       "classes": "c-button-loader--primary ds-active"
+    },
+    "visualDescription": "Botón rectangular con fondo azul oscuro sólido (tonalidad petróleo/teal), sin borde visible, esquinas ligeramente redondeadas. Texto blanco en negrita alineado al centro. Tamaño compacto con padding equilibrado horizontal y vertical.",
+    "_generated": {
+      "hash": "3db22b099dfffde4f4b6be494f5aa1b7",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:48:43.715Z"
     }
   },
   {
@@ -89,6 +143,12 @@
       "name": "hover",
       "text": "Hover",
       "classes": "c-button-loader--primary ds-hover"
+    },
+    "visualDescription": "Botón rectangular con fondo azul oscuro (petróleo), texto blanco en mayúsculas, esquinas ligeramente redondeadas. Padding moderado horizontal y vertical. Tipografía sans-serif de peso medio.",
+    "_generated": {
+      "hash": "bb60242a4047a78de72a599770d619f1",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:48:51.308Z"
     }
   },
   {
@@ -98,6 +158,12 @@
       "name": "focus",
       "text": "Focus",
       "classes": "c-button-loader--primary ds-focus"
+    },
+    "visualDescription": "Botón rectangular con fondo amarillo brillante, texto negro en mayúsculas, borde negro sólido de aproximadamente 2-3px. Esquinas ligeramente redondeadas. Padding moderado horizontal y vertical, tipografía sans-serif de peso medio.",
+    "_generated": {
+      "hash": "36d3f6079c8b74bd037f700d1485654d",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:48:51.308Z"
     }
   },
   {
@@ -106,6 +172,12 @@
       "text": "Deshabilitado",
       "disabled": true,
       "classes": "c-button-loader--primary"
+    },
+    "visualDescription": "Botón rectangular con fondo gris claro apagado, texto blanco en mayúsculas, esquinas ligeramente redondeadas. Padding moderado horizontal y vertical. Apariencia atenuada sin borde visible, tipografía sans-serif de peso medio.",
+    "_generated": {
+      "hash": "ecfd10937d7b071116dc2701906d7513",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:48:51.308Z"
     }
   },
   {
@@ -113,6 +185,12 @@
     "data": {
       "text": "Alerta",
       "classes": "c-button-loader--alert"
+    },
+    "visualDescription": "Botón rectangular con fondo rojo intenso (color #C1394A aproximadamente), texto blanco en peso medio. Tamaño compacto con padding horizontal y vertical, bordes con esquinas ligeramente redondeadas.",
+    "_generated": {
+      "hash": "f5ebb1e9e0d5964c5716d3b94c33e453",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:48:58.295Z"
     }
   },
   {
@@ -122,6 +200,12 @@
       "name": "active",
       "text": "Activo",
       "classes": "c-button-loader--alert ds-active"
+    },
+    "visualDescription": "Botón rectangular con fondo rojo intenso (color #C1394A aproximadamente), texto blanco en peso medio. Tamaño compacto con padding horizontal y vertical, bordes con esquinas ligeramente redondeadas.",
+    "_generated": {
+      "hash": "839d689c681b2fe1bbf8ed058cc19d5f",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:48:58.295Z"
     }
   },
   {
@@ -131,6 +215,12 @@
       "name": "hover",
       "text": "Hover",
       "classes": "c-button-loader--alert ds-hover"
+    },
+    "visualDescription": "Botón rectangular con fondo rojo oscuro (color #8B2A35 aproximadamente), texto blanco en peso medio. Tamaño compacto con padding horizontal y vertical, bordes con esquinas ligeramente redondeadas.",
+    "_generated": {
+      "hash": "ef366638fda53b256565b79f3c913d25",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:48:58.295Z"
     }
   },
   {
@@ -140,6 +230,12 @@
       "name": "focus",
       "text": "Focus",
       "classes": "c-button-loader--alert ds-focus"
+    },
+    "visualDescription": "Botón rectangular con fondo amarillo intenso, texto negro en peso medio, y borde negro de 2px. Esquinas ligeramente redondeadas. Encabezado en texto gris oscuro ubicado arriba del botón.",
+    "_generated": {
+      "hash": "eede30ca9f9a83b50e6a6b1fbcd893df",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:49:05.664Z"
     }
   },
   {
@@ -148,6 +244,12 @@
       "text": "Deshabilitado",
       "disabled": true,
       "classes": "c-button-loader--alert"
+    },
+    "visualDescription": "Botón rectangular con fondo rosa pálido, texto blanco en peso medio, sin borde visible. Esquinas ligeramente redondeadas. Encabezado en texto gris oscuro ubicado arriba del botón.",
+    "_generated": {
+      "hash": "39c7a2b705ee8c811760114ea77bed02",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:49:05.664Z"
     }
   },
   {
@@ -155,6 +257,12 @@
     "data": {
       "text": "Transparente",
       "classes": "c-button-loader--transparent"
+    },
+    "visualDescription": "Botón rectangular con fondo blanco o transparente, texto azul en peso medio, y borde azul de 1px. Esquinas ligeramente redondeadas. Encabezado en texto gris oscuro ubicado arriba del botón.",
+    "_generated": {
+      "hash": "18da80b4f700d27f88809fe9d22959ac",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:49:05.664Z"
     }
   },
   {
@@ -164,6 +272,12 @@
       "name": "active",
       "text": "Activo",
       "classes": "c-button-loader--transparent ds-active"
+    },
+    "visualDescription": "Botón con texto azul oscuro en negrita, fondo transparente sin color de relleno, borde azul oscuro de 2px. Dimensiones compactas con padding moderado alrededor del texto. Estilo rectangular con esquinas ligeramente redondeadas.",
+    "_generated": {
+      "hash": "c847c61892502d4b373682091e178ecc",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:49:13.517Z"
     }
   },
   {
@@ -173,6 +287,12 @@
       "name": "hover",
       "text": "Hover",
       "classes": "c-button-loader--transparent ds-hover"
+    },
+    "visualDescription": "Botón con texto gris oscuro en negrita, fondo gris muy claro semitransparente, borde gris medio de 1px. Dimensiones compactas con padding moderado alrededor del texto. Estilo rectangular con esquinas ligeramente redondeadas.",
+    "_generated": {
+      "hash": "7af1744a616898b02013bfa938543291",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:49:13.517Z"
     }
   },
   {
@@ -182,6 +302,12 @@
       "name": "focus",
       "text": "Focus",
       "classes": "c-button-loader--transparent ds-focus"
+    },
+    "visualDescription": "Botón con texto negro en negrita, fondo amarillo sólido, borde negro grueso de 3px. Dimensiones compactas con padding moderado alrededor del texto. Estilo rectangular con esquinas ligeramente redondeadas, apariencia de alto contraste visual.",
+    "_generated": {
+      "hash": "75001e353bd9b7249e9c4fee4d2e3452",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:49:13.517Z"
     }
   },
   {
@@ -190,6 +316,12 @@
       "text": "Deshabilitado",
       "disabled": true,
       "classes": "c-button-loader--transparent"
+    },
+    "visualDescription": "Botón rectangular con fondo blanco, borde gris claro de 1px, y texto gris claro que lee \"Deshabilitado\". El botón tiene bordes redondeados y padding interno moderado. Apariencia visual de estado inactivo sin interactividad.",
+    "_generated": {
+      "hash": "bc778a98aac01430c65ca579cf628288",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:49:22.013Z"
     }
   },
   {
@@ -197,6 +329,12 @@
     "data": {
       "text": "Grande y primario",
       "classes": "c-button-loader--lg c-button-loader--primary"
+    },
+    "visualDescription": "Botón rectangular con fondo azul petróleo sólido, texto blanco en negrita. Esquinas ligeramente redondeadas con padding generoso vertical y horizontal. Tipografía de tamaño mediano-grande con aspecto prominente y llamativo.",
+    "_generated": {
+      "hash": "7a8ffbe46feba05fcfcb427bfc2c6e68",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:49:22.013Z"
     }
   },
   {
@@ -204,6 +342,12 @@
     "data": {
       "text": "Peque",
       "classes": "c-button-loader--sm"
+    },
+    "visualDescription": "Botón rectangular compacto con fondo blanco, borde azul oscuro de 1px, y texto azul oscuro. Esquinas redondeadas con padding interno reducido en todas direcciones. Tamaño de fuente pequeño con aspecto discreto y minimalista.",
+    "_generated": {
+      "hash": "3af77601cea5764bf8f5aea58764926a",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:49:22.013Z"
     }
   },
   {
@@ -211,6 +355,12 @@
     "data": {
       "text": "Botón enlace",
       "href": "/"
+    },
+    "visualDescription": "Botón con texto azul en fuente regular, fondo transparente sin borde visible. El botón tiene padding mínimo alrededor del texto, creando un aspecto de enlace de texto clickeable.",
+    "_generated": {
+      "hash": "d846e5b37df2f31e10adc63650ed63d5",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:49:30.222Z"
     }
   },
   {
@@ -222,6 +372,12 @@
       "attributes": {
         "title": "Se abre en ventana nueva"
       }
+    },
+    "visualDescription": "Botón con texto azul seguido de un icono de flecha diagonal apuntando hacia arriba-derecha en color azul. Fondo transparente sin borde, padding mínimo, el icono está posicionado a la derecha del texto con espaciado reducido.",
+    "_generated": {
+      "hash": "7438ed3b353d74162fbca0bd9045477d",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:49:30.222Z"
     }
   },
   {
@@ -230,6 +386,12 @@
       "text": "Botón enlace deshabilitado",
       "href": "/",
       "disabled": true
+    },
+    "visualDescription": "Botón con texto gris claro en fuente regular, fondo transparente sin borde visible. El botón tiene padding mínimo y presenta una apariencia visualmente atenuada que indica estado inactivo.",
+    "_generated": {
+      "hash": "61bdb51db908f999e69e68796986dc06",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:49:30.222Z"
     }
   },
   {
@@ -237,6 +399,12 @@
     "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>",
       "href": "/"
+    },
+    "visualDescription": "Botón rectangular con fondo blanco y borde azul de 1px. El texto aparece en azul con peso normal, alineado a la izquierda. Un icono cuadrado azul está posicionado en el extremo derecho del botón.",
+    "_generated": {
+      "hash": "51b77f98d62c7a6e09260842dc8106af",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:49:38.028Z"
     }
   },
   {
@@ -245,6 +413,12 @@
 
       "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",
       "href": "/"
+    },
+    "visualDescription": "Botón rectangular con fondo blanco y borde azul de 1px. Un icono cuadrado azul está posicionado en el extremo izquierdo. El texto aparece en azul con peso normal, alineado junto al icono.",
+    "_generated": {
+      "hash": "7006c1a1bf46a4ffec46f3e1f67dfca7",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:49:38.028Z"
     }
   },
   {
@@ -253,6 +427,12 @@
       "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='1em' width='1em' class='self-center' 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>",
       "href": "/",
       "classes": "c-button-loader--primary p-3 align-bottom"
+    },
+    "visualDescription": "Botón cuadrado pequeño con fondo azul sólido. Un icono blanco está centrado dentro del botón. Sin texto visible ni bordes adicionales aparentes.",
+    "_generated": {
+      "hash": "96df09c1be5997b1a0dac591c0e23bca",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:49:38.028Z"
     }
   },
   {
@@ -261,6 +441,12 @@
       "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='1em' width='1em' class='self-center' 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>",
       "href": "/",
       "classes": "c-button-loader--primary c-button-loader--sm p-2 align-bottom"
+    },
+    "visualDescription": "Botón cuadrado pequeño con fondo azul petróleo (teal oscuro) y un icono de signo más (+) blanco centrado. Dimensiones compactas aproximadas de 32x32px, con esquinas ligeramente redondeadas.",
+    "_generated": {
+      "hash": "fc6ca3afce9b7965b82c58033cc5016d",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:49:47.140Z"
     }
   },
   {
@@ -269,6 +455,12 @@
       "element": "input",
       "name": "send-form",
       "text": "Enviar"
+    },
+    "visualDescription": "Campo de entrada de texto rectangular con borde gris claro de 1px y fondo blanco. Incluye un botón interno con texto gris oscuro, borde gris y esquinas redondeadas, posicionado dentro del área del input. Label superior en texto negro pequeño indica el tipo de input.",
+    "_generated": {
+      "hash": "4cf4a2abaf6b0928ca353f0fc02425e7",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:49:47.140Z"
     }
   },
   {
@@ -277,6 +469,12 @@
       "element": "input",
       "text": "Enviar",
       "disabled": true
+    },
+    "visualDescription": "Campo de entrada de texto rectangular con borde gris muy claro de 1px y fondo blanco levemente atenuado. Contiene un botón interno con texto gris claro y borde gris tenue, indicando estado inactivo. Label superior en texto gris oscuro pequeño indica el estado del input.",
+    "_generated": {
+      "hash": "4f3f59d5d1fa0c75e7c1797b7fff5262",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:49:47.140Z"
     }
   },
   {
@@ -284,6 +482,12 @@
     "data": {
       "text": "Enviar",
       "preventDoubleClick": true
+    },
+    "visualDescription": "Botón rectangular con borde azul de 1px, fondo blanco, y texto azul. Tamaño compacto con padding ajustado alrededor del texto. El botón muestra un estado interactivo predeterminado con esquinas ligeramente redondeadas.",
+    "_generated": {
+      "hash": "6a5073a4fc59800f89d9764def97a60e",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:49:53.183Z"
     }
   }
 ] %}

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

@@ -110,6 +110,12 @@
       "classes": "lg:w-1/3",
       "containerClasses": "p-base border border-neutral-base rounded-sm",
       "caller": defaultContent | indent(4)
+    },
+    "visualDescription": "Card con fondo blanco, borde gris claro de 1px. Título en azul, negrita. Texto descriptivo en gris oscuro, peso normal, párrafos de tamaño regular. Padding interno moderado alrededor del contenido.",
+    "_generated": {
+      "hash": "a4bfad24a13b45b2e26564c0db6d836a",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:51:34.866Z"
     }
   },
   {
@@ -119,6 +125,12 @@
       "classes": "lg:w-1/3",
       "containerClasses": "p-base border border-neutral-base rounded-sm relative hover:bg-neutral-light",
       "caller": fullContent | indent(4)
+    },
+    "visualDescription": "Card con fondo blanco, borde gris claro de 1px. Título en azul, negrita. Texto descriptivo en gris oscuro, peso normal, párrafos de tamaño regular. Card presenta hover visual indicando interactividad completa.",
+    "_generated": {
+      "hash": "78c2100a696da1daaf14a516f17f84bb",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:51:34.866Z"
     }
   },
   {
@@ -127,6 +139,12 @@
       "classes": "lg:w-1/3",
       "containerClasses": "p-base border border-neutral-base rounded-sm",
       "caller": withIconContent("1").val | indent(4)
+    },
+    "visualDescription": "Card con fondo blanco, borde gris claro de 1px. Icono de documento en gris oscuro alineado arriba. Título en negro negrita debajo del icono. Texto descriptivo en gris oscuro, peso normal. Enlace \"Más\" en azul con flecha derecha al final del contenido.",
+    "_generated": {
+      "hash": "b400fd036b9a543677f88af1f459b40f",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:51:34.866Z"
     }
   },
   {
@@ -135,6 +153,12 @@
       "classes": "lg:w-1/3",
       "containerClasses": "relative",
       "caller": fullContent | indent(4)
+    },
+    "visualDescription": "Card con fondo blanco sin bordes visibles ni espaciado interno. Contiene un título en azul oscuro (peso normal) seguido de texto de párrafo en gris oscuro. El card es completamente clicable actuando como enlace.",
+    "_generated": {
+      "hash": "03ef0b31998b25ce3e3e868db94b4c9c",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:51:44.939Z"
     }
   },
   {
@@ -143,6 +167,12 @@
       "classes": "lg:w-1/3",
       "containerClasses": "flex flex-col p-base bg-neutral-lighter border-t-8 border-neutral-dark",
       "caller": withButton("2").val | indent(4)
+    },
+    "visualDescription": "Card con borde gris claro de 1px y fondo blanco. Incluye barra decorativa gris oscura horizontal en el borde superior, título en negro (peso negrita), texto de párrafo en gris oscuro, y enlace \"Más\" en azul con flecha. Espaciado interno consistente alrededor del contenido.",
+    "_generated": {
+      "hash": "a23b2e7251499c66302cfd72e46fb68a",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:51:44.939Z"
     }
   },
   {
@@ -160,6 +190,12 @@
           "aria-label": "Alt de la imagen"
         }
       }
+    },
+    "visualDescription": "Card con borde gris claro de 1px y fondo blanco. Contiene imagen placeholder gris con texto \"Imagen\" en blanco ocupando aproximadamente 40% superior del card, seguido de título en negro (peso negrita), texto de párrafo en gris oscuro, y enlace \"Más\" en azul con flecha. Espaciado interno alrededor del contenido de texto.",
+    "_generated": {
+      "hash": "8c47ba185d0e4b40267aaaa34f233292",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:51:44.939Z"
     }
   },
   {
@@ -177,6 +213,12 @@
           "aria-label": "Alt de la imagen"
         }
       }
+    },
+    "visualDescription": "Card con fondo blanco y borde gris delgado. Incluye barra horizontal gris oscura en el tope, seguida de título en negro negrita, bloque de texto párrafo gris oscuro, enlace azul con flecha, e imagen placeholder gris con texto blanco \"Imagen\" en la parte inferior.",
+    "_generated": {
+      "hash": "b9d48944fb50756c3579bba1c2f8277a",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:51:54.694Z"
     }
   },
   {
@@ -204,6 +246,12 @@
           "aria-label": "Alt de la imagen"
         }
       }
+    },
+    "visualDescription": "Card con fondo blanco y borde gris delgado, organizada en layout horizontal de dos columnas. Columna izquierda contiene imagen placeholder gris con texto blanco \"Imagen\". Columna derecha presenta barra horizontal gris oscura, título negro negrita, párrafo gris oscuro, y enlace azul con flecha.",
+    "_generated": {
+      "hash": "bd909379b51403d485308fa8f3ae8777",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:51:54.694Z"
     }
   },
   {
@@ -231,6 +279,12 @@
           "aria-label": "Alt de la imagen"
         }
       }
+    },
+    "visualDescription": "Card con fondo blanco y borde gris delgado, organizada en layout horizontal de dos columnas. Columna izquierda contiene título negro negrita, párrafo de texto gris oscuro, y enlace azul con flecha. Columna derecha presenta imagen placeholder gris de mayor tamaño con texto blanco \"Imagen\".",
+    "_generated": {
+      "hash": "f0a07756c4f61dfcddf469e80d15110b",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:51:54.694Z"
     }
   },
   {
@@ -239,6 +293,12 @@
       "classes": "lg:w-1/2",
       "containerClasses": "py-lg border-t-8 border-neutral-dark",
       "caller": linksContent | indent(4)
+    },
+    "visualDescription": "Card con fondo blanco y borde gris delgado. Contiene título \"Tus datos médicos e información personal\" en negro negrita, seguido de lista vertical de 5 enlaces azules subrayados (color #006BA6 aproximadamente). Sin espaciado interno aparente entre el borde y el contenido.",
+    "_generated": {
+      "hash": "e1bccc133d54f1bbae017ce84a02e0b7",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:52:08.348Z"
     }
   },
   {
@@ -264,6 +324,12 @@
           "aria-label": "Alt de la imagen"
         }
       }
+    },
+    "visualDescription": "Card rectangular dividida en dos columnas: izquierda con fondo blanco, derecha con imagen placeholder gris con texto \"Imagen\" en blanco. Columna izquierda incluye icono de documento, título \"Tu área personal\" en negro negrita, párrafo de texto gris oscuro, y dos botones: uno teal (#007A7A) con texto blanco \"Acceder a Tu área personal\" y uno blanco con borde teal \"Descargar la app\".",
+    "_generated": {
+      "hash": "3ebcd5f37e5250b149e8a1db00fc75ff",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:52:08.348Z"
     }
   },
   {
@@ -291,6 +357,12 @@
           "aria-label": "Alt de la imagen"
         }
       }
+    },
+    "visualDescription": "Card con borde gris delgado contiene imagen placeholder gris a la izquierda (proporción cuadrada) con texto \"Imagen\" en blanco. Sección derecha muestra icono calendario, fecha \"18 octubre 2022\" en gris oscuro, título \"Título de noticia\" en negro negrita, párrafo de texto gris oscuro (lorem ipsum), y enlace \"Ver detalle\" en teal con flecha.",
+    "_generated": {
+      "hash": "0b50cc63c9275fcccf3e9b866f3395fe",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:52:08.348Z"
     }
   },
   {
@@ -299,6 +371,12 @@
       "classes": "lg:w-1/4",
       "containerClasses": "p-base bg-neutral-lighter",
       "caller": withIconContent("8").val | indent(4)
+    },
+    "visualDescription": "Card rectangular con fondo gris claro, contiene un icono de documento en gris oscuro en la esquina superior izquierda. Debajo del icono hay un título en negrita negro, seguido de un párrafo de texto gris en tamaño regular que ocupa varias líneas. En la parte inferior izquierda hay un enlace en color azul turquesa con texto \"Más\" seguido de una flecha derecha.",
+    "_generated": {
+      "hash": "b442a2d8af731ed02a083d47df750d66",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:52:15.482Z"
     }
   }
 ] %}