desy-html 15.0.3 → 16.0.0

package/src/templates/components/table-advanced/_styles.table-advanced.css

@@ -45,8 +45,6 @@
     }
 
 
-    [role="gridcell"]:focus,
-    [role="gridcell"] *:focus,
     & [tabindex="0"]:focus {
       @apply bg-warning-base;
       @apply outline-hidden;

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

@@ -34,6 +34,12 @@
       "attributes": {
         "id": "tabs-default"
       }
+    },
+    "visualDescription": "Pestañas horizontales con texto negro subrayado en negro, alineadas a la izquierda sobre fondo blanco. Panel de contenido debajo con borde gris de 1px, mostrando texto negro en párrafo. Las pestañas muestran \"Tab 1\", \"Tab 2\", \"Tab 3\", \"Tab 4\" en fuente normal.",
+    "_generated": {
+      "hash": "96ea2ac6b6b3cc73bcaf1706c594c8ef",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:16:03.166Z"
     }
   },
   {
@@ -70,6 +76,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Pestañas horizontales con texto negro y sufijo \"con b4\" en gris, subrayadas en negro, alineadas a la izquierda sobre fondo blanco. Panel de contenido debajo con borde gris de 1px, mostrando texto negro en párrafo. Las pestañas muestran etiquetas \"Tab 1 con b4\", \"Tab 2 con b4\", \"Tab 3 con b4\", \"Tab 4 con b4\".",
+    "_generated": {
+      "hash": "cb9c02e17f07834cb73dd0c81ee5e0ec",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:16:03.166Z"
     }
   },
   {
@@ -103,6 +115,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Pestañas horizontales con iconos grises a la izquierda del texto negro, subrayadas en negro, alineadas a la izquierda sobre fondo blanco. Panel de contenido debajo con borde gris de 1px, mostrando texto negro en párrafo. Cada pestaña tiene un ícono distintivo (documento, hashtag, carpeta, caja) seguido de texto en fuente normal.",
+    "_generated": {
+      "hash": "25d271305425413670fc6a658ae2c0bf",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:16:03.166Z"
     }
   },
   {
@@ -137,6 +155,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Componente de pestañas horizontal con 4 ítems alineados en fila. Las pestañas tienen texto negro con subrayado en la activa, una pestaña muestra texto gris claro indicando estado deshabilitado. Panel de contenido debajo muestra texto negro en párrafo con fondo blanco y borde gris claro.",
+    "_generated": {
+      "hash": "6866b55d9e5d36fe2ea294e2cb09daf9",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:16:12.919Z"
     }
   },
   {
@@ -175,6 +199,12 @@
       "attributes": {
         "id": "tabs-active"
       }
+    },
+    "visualDescription": "Componente de pestañas horizontal con 4 ítems alineados en fila. Las pestañas tienen texto negro, una pestaña presenta subrayado negro indicando selección activa. Panel de contenido debajo contiene texto negro en párrafo con fondo blanco y borde gris delgado alrededor del contenedor.",
+    "_generated": {
+      "hash": "99d5cc409f692729c2c3968941730dd2",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:16:12.919Z"
     }
   },
   {
@@ -256,6 +286,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Componente de pestañas horizontal con 12 ítems alineados en fila ocupando el ancho completo. Las pestañas tienen texto negro de tamaño pequeño, una pestaña muestra subrayado negro indicando estado seleccionado. Panel de contenido debajo presenta texto negro en párrafo dentro de contenedor con borde gris claro y fondo blanco.",
+    "_generated": {
+      "hash": "3e9eb41fe72a4aa7f6c4a26e3740b3f4",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:16:12.919Z"
     }
   },
   {
@@ -339,6 +375,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Fila horizontal de pestañas con texto negro en fondo blanco, dispuestas en línea con scroll horizontal activado. Borde inferior gris claro separa las pestañas del contenido, con panel de texto debajo mostrando párrafo en tipografía estándar negra sobre fondo blanco. Las pestañas están numeradas consecutivamente (Tab 1 a Tab 12) con espaciado uniforme entre ellas.",
+    "_generated": {
+      "hash": "1708de2a001f99cd5a4c39809c3cb319",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:16:23.973Z"
     }
   },
   {
@@ -370,6 +412,12 @@
       "attributes": {
         "id": "tabs-active-icons"
       }
+    },
+    "visualDescription": "Tres pestañas dispuestas horizontalmente con iconos negros arriba y etiquetas de texto debajo. Fondo blanco en toda la sección, con panel de contenido debajo mostrando texto negro en párrafo. Los iconos representan documento, enlace y portapapeles, cada uno alineado verticalmente con su label correspondiente.",
+    "_generated": {
+      "hash": "d95e35732a377ee7effcd12490f2e888",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:16:23.973Z"
     }
   },
   {
@@ -408,6 +456,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Cuatro pestañas en línea horizontal con texto negro, alineadas al inicio del contenedor con borde gris claro alrededor. Panel de contenido con fondo celeste claro muestra párrafo de texto negro. Las pestañas están etiquetadas secuencialmente (Tab 1 a Tab 4) sin separadores visuales entre ellas, con espaciado horizontal consistente.",
+    "_generated": {
+      "hash": "4bd617af84c7f555a97311f7e1e8489e",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:16:23.973Z"
     }
   },
     {
@@ -451,6 +505,12 @@
       "attributes": {
         "id": "tabs-list"
       }
+    },
+    "visualDescription": "Lista vertical de cuatro pestañas (Tab 1-4) alineadas a la izquierda, cada una con texto azul subrayado y una flecha azul (→) alineada a la derecha. Panel de contenido a la derecha con encabezado \"Panel 1\" en negrita seguido de texto gris oscuro en párrafo. Fondo blanco con bordes grises delgados separando cada elemento.",
+    "_generated": {
+      "hash": "79ffa78e714dd4e7931d2373e683b456",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:16:36.164Z"
     }
   },
   {
@@ -488,6 +548,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Fila horizontal de cuatro pestañas (Tab 1, Tab 2, Tab 3, Tab 4) con texto negro subrayado, espaciadas uniformemente. Panel de contenido debajo con encabezado \"Panel 1\" en negrita negro seguido de texto gris oscuro en párrafo. Fondo blanco con borde gris delgado alrededor del contenedor completo.",
+    "_generated": {
+      "hash": "8e64c3a8b024d00eddb18b0edfab452c",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:16:36.164Z"
     }
   },
   {
@@ -511,6 +577,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Dos pestañas horizontales (\"Cambios\" y \"Ver original\") con texto negro, la primera con subrayado indicando selección activa. Área de contenido con fondo amarillo claro conteniendo dos ítems en lista con viñetas circulares, texto negro en párrafos largos y enlaces azules subrayados. Pie de sección con texto gris indicando tiempo transcurrido (2 horas) y dos botones de acción (\"Descartar\" en azul, \"Editar\" en azul) alineados a la derecha.",
+    "_generated": {
+      "hash": "6841a9edb1642d21e6842785e9524fc9",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:16:36.164Z"
     }
   }
 ] %}

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

@@ -11,6 +11,12 @@
       "hint": {
         "text": "Esto es una pista o texto descriptivo."
       }
+    },
+    "visualDescription": "Textarea rectangular con borde gris de 1px, fondo blanco, esquinas ligeramente redondeadas. Encabezado con label en negro normal, seguido de texto descriptivo gris en tamaño pequeño. Área de texto de altura media con aproximadamente 4-5 líneas visibles.",
+    "_generated": {
+      "hash": "38168af559aee891b34be80c948a1252",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:16:44.046Z"
     }
   },
   {
@@ -25,6 +31,12 @@
       "hint": {
         "text": "Esto es una pista o texto descriptivo."
       }
+    },
+    "visualDescription": "Textarea rectangular con borde gris claro de 1px, fondo gris muy claro (#f5f5f5 aproximadamente), esquinas ligeramente redondeadas. Encabezado con label en gris oscuro, seguido de texto descriptivo gris en tamaño pequeño. Área de texto de altura media con apariencia inactiva, sin cursor de edición visible.",
+    "_generated": {
+      "hash": "d26f4711ceef5469ea804639e94bb0fd",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:16:44.046Z"
     }
   },
   {
@@ -39,6 +51,12 @@
       "errorMessage": {
         "text": "Esto es un mensaje de error"
       }
+    },
+    "visualDescription": "Textarea rectangular con borde rojo de 2px, fondo blanco, esquinas ligeramente redondeadas. Encabezado con label en negro normal, seguido de texto de error en rojo en tamaño pequeño. Área de texto de altura media con indicación visual de estado de error mediante el borde rojo prominente.",
+    "_generated": {
+      "hash": "81e20aaf57e82d2a213150357f7ca559",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:16:44.046Z"
     }
   },
   {
@@ -50,6 +68,12 @@
       "label": {
         "text": "Dirección completa"
       }
+    },
+    "visualDescription": "Textarea con borde gris de 1px, fondo blanco, altura reducida mostrando 2 líneas de texto. Label en negro normal arriba indicando \"Dirección completa\". Texto predefinido visible dentro del campo en negro estándar.",
+    "_generated": {
+      "hash": "e4b38a55567ea9db190774f8c6d39783",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:16:53.877Z"
     }
   },
   {
@@ -61,6 +85,12 @@
         "text": "Dirección completa"
       },
       "rows": 8
+    },
+    "visualDescription": "Textarea con borde gris de 1px, fondo blanco, sin texto predefinido visible. Label en negro normal arriba indicando \"Dirección completa\". Campo vacío con altura estándar mostrando múltiples líneas disponibles.",
+    "_generated": {
+      "hash": "f6c842a568fbe3c62368901bd5c65645",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:16:53.877Z"
     }
   },
   {
@@ -74,6 +104,12 @@
       "formGroup": {
         "classes": "p-base bg-primary-light"
       }
+    },
+    "visualDescription": "Textarea con borde azul oscuro de 2px, fondo blanco, campo vacío de altura estándar. Label en negro normal arriba indicando \"Dirección completa\". Contenedor con fondo azul claro tenue cubriendo toda la sección del formulario.",
+    "_generated": {
+      "hash": "2208484005331311532c1ca1e7a2a07b",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:16:53.877Z"
     }
   },
   {
@@ -85,6 +121,12 @@
         "text": "Dirección completa"
       },
       "autocomplete": "street-address"
+    },
+    "visualDescription": "Textarea rectangular con borde gris de 1px, fondo blanco, altura aproximada de 60px y ancho de 105px. Label \"Dirección completa\" en texto negro regular ubicado arriba del campo. Título de sección \"con valores de autocompletado\" en texto negro encima del label.",
+    "_generated": {
+      "hash": "e0df350b5138ec79dbce4d633a637cad",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:17:03.196Z"
     }
   },
   {
@@ -96,6 +138,12 @@
         "text": "Valor"
       },
       "placeholder": "Esto es un placeholder"
+    },
+    "visualDescription": "Textarea rectangular con borde gris de 1px, fondo blanco, altura aproximada de 60px y ancho de 105px. Contiene texto placeholder gris claro. Label \"Valor\" en texto negro regular posicionado arriba del campo, con título de sección \"placeholder\" en texto negro en la parte superior.",
+    "_generated": {
+      "hash": "a8ab74dd3ffad277bcf324d07ce1e6c6",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:17:03.196Z"
     }
   },
   {
@@ -116,6 +164,12 @@
         "classes": "order-1 w-full pt-sm"
       },
       "classes": "lg:flex-1"
+    },
+    "visualDescription": "Textarea rectangular grande con borde rojo de 2px, fondo blanco, ancho completo del contenedor y altura aproximada de 60px. Label \"Label inline:\" en texto negro regular alineado a la izquierda. Mensaje de error en texto rojo pequeño debajo del campo. Título de sección \"Con clases de css aplicadas\" en texto negro arriba.",
+    "_generated": {
+      "hash": "720d38159c72f7fb83afa6521ad1444e",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:17:03.196Z"
     }
   }
 ] %}

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

@@ -37,7 +37,7 @@
     visuallyHiddenText: params.errorMessage.visuallyHiddenText
   }) | indent(2) | trim }}
 {% endif %}
-  <textarea class="block mt-sm px-base py-sm border-black rounded-sm font-semibold leading-normal 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 }}" rows="{%if params.rows %} {{- params.rows -}} {% else %}5{%endif %}"
+  <textarea class="block mt-sm px-base py-sm {% if params.errorMessage %}border-alert-base ring-2 ring-alert-base{% else %}border-black{% endif %} rounded-sm font-semibold leading-normal 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 }}" rows="{%if params.rows %} {{- params.rows -}} {% else %}5{%endif %}"
   {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
   {%- if params.errorMessage %} aria-errormessage="{{ errorId }}" aria-invalid="true"{% endif %}
   {%- if params.autocomplete %} autocomplete="{{ params.autocomplete}}"{% endif %}

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

@@ -17,6 +17,12 @@
       "attributes": {
         "aria-controls": "id-panel-oculto"
       }
+    },
+    "visualDescription": "Componente toggle con título \"por defecto\" en texto negro regular. Contiene un botón \"Mostrar detalles\" con borde azul de 1px, texto azul, fondo blanco, y tamaño compacto. El componente está dentro de un contenedor con borde gris claro.",
+    "_generated": {
+      "hash": "f256e8099af3c2ad5d4de3222e1d7966",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:17:10.468Z"
     }
   },
   {
@@ -33,6 +39,12 @@
         "classes": "c-button--has-selection",
         "html": "<span class='inline-flex'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' class='self-center mr-2' aria-hidden='true' width='1em' height='1em'><path d='M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z' fill='currentColor'/></svg>Mostrar detalles</span>"
       }
+    },
+    "visualDescription": "Componente toggle con título \"Expandir con JavaScript\" en texto negro regular. Contiene un botón \"Mostrar detalles\" con borde azul de 1px, texto azul, fondo blanco, y tamaño compacto. El componente está dentro de un contenedor con borde gris claro.",
+    "_generated": {
+      "hash": "a803ee552d7c46c776daf83c70e364ae",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:17:10.468Z"
     }
   },
   {
@@ -52,6 +64,12 @@
       "attributes": {
         "aria-controls": "id-panel-oculto"
       }
+    },
+    "visualDescription": "Componente toggle con título \"2 iconos\" en texto negro regular. Contiene un botón \"Mostrar filtros\" con icono de flecha descendente a la izquierda, borde azul de 1px, texto azul, fondo blanco, y tamaño compacto. El componente está dentro de un contenedor con borde gris claro.",
+    "_generated": {
+      "hash": "6f376b8069776ae0cdbaf50722c1070f",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:17:10.468Z"
     }
   },
   {
@@ -69,6 +87,12 @@
         "classes": "c-button--has-selection",
         "html": "<span class='inline-flex'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' class='self-center mr-2' aria-hidden='true' width='1em' height='1em'><path d='M12 2.21a.75.75 0 0 0-1.06 0 .75.75 0 0 0 0 1.06 5.26 5.26 0 0 1 0 7.46.75.75 0 0 0 0 1.06.75.75 0 0 0 1.06 0 6.74 6.74 0 0 0 0-9.58Z' fill='currentColor' transform='scale(3.42857)'/><path d='M10.34 4.89a.75.75 0 0 0-1.23.85 2.23 2.23 0 0 1 0 2.52.74.74 0 0 0 .19 1 .75.75 0 0 0 1-.19 3.7 3.7 0 0 0 0-4.22ZM6.69 1a1.35 1.35 0 0 0-.8.27L3.07 4.42a.27.27 0 0 1-.19.08H1.75A1.76 1.76 0 0 0 0 6.25v1.5A1.76 1.76 0 0 0 1.75 9.5h1.13a.27.27 0 0 1 .19.08l2.82 3.15a1.35 1.35 0 0 0 .8.27A1.31 1.31 0 0 0 8 11.69V2.31A1.31 1.31 0 0 0 6.69 1Z' fill='currentColor' transform='scale(3.42857)'/></svg>Reproducir sonido</span>"
       }
+    },
+    "visualDescription": "Caja rectangular con borde gris delgado y fondo blanco. Contiene texto en color gris oscuro alineado a la izquierda, seguido de un botón con borde azul y texto azul que incluye un icono de reproducción.",
+    "_generated": {
+      "hash": "b1713b9890531dc1ba131c55e35bf3cf",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:17:17.635Z"
     }
   },
   {
@@ -86,6 +110,12 @@
         "classes": "c-button--has-selection",
         "html": "<span class='inline-flex'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' class='self-center mr-2' aria-hidden='true' width='1em' height='1em'><path d='M12 2.21a.75.75 0 0 0-1.06 0 .75.75 0 0 0 0 1.06 5.26 5.26 0 0 1 0 7.46.75.75 0 0 0 0 1.06.75.75 0 0 0 1.06 0 6.74 6.74 0 0 0 0-9.58Z' fill='currentColor' transform='scale(3.42857)'/><path d='M10.34 4.89a.75.75 0 0 0-1.23.85 2.23 2.23 0 0 1 0 2.52.74.74 0 0 0 .19 1 .75.75 0 0 0 1-.19 3.7 3.7 0 0 0 0-4.22ZM6.69 1a1.35 1.35 0 0 0-.8.27L3.07 4.42a.27.27 0 0 1-.19.08H1.75A1.76 1.76 0 0 0 0 6.25v1.5A1.76 1.76 0 0 0 1.75 9.5h1.13a.27.27 0 0 1 .19.08l2.82 3.15a1.35 1.35 0 0 0 .8.27A1.31 1.31 0 0 0 8 11.69V2.31A1.31 1.31 0 0 0 6.69 1Z' fill='currentColor' transform='scale(3.42857)'/></svg>Reproducir sonido</span>"
       }
+    },
+    "visualDescription": "Caja rectangular con borde gris delgado y fondo blanco. Contiene texto en color gris oscuro alineado a la izquierda, seguido de un botón con borde azul y texto azul que incluye un icono de reproducción.",
+    "_generated": {
+      "hash": "e7ade4d0883eec8da255cd876a56016c",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:17:17.635Z"
     }
   },
   {
@@ -103,6 +133,12 @@
         "classes": "c-button--has-selection",
         "html": "<span class='inline-flex'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' class='self-center mr-2' aria-hidden='true' width='1em' height='1em'><path d='M12 2.21a.75.75 0 0 0-1.06 0 .75.75 0 0 0 0 1.06 5.26 5.26 0 0 1 0 7.46.75.75 0 0 0 0 1.06.75.75 0 0 0 1.06 0 6.74 6.74 0 0 0 0-9.58Z' fill='currentColor' transform='scale(3.42857)'/><path d='M10.34 4.89a.75.75 0 0 0-1.23.85 2.23 2.23 0 0 1 0 2.52.74.74 0 0 0 .19 1 .75.75 0 0 0 1-.19 3.7 3.7 0 0 0 0-4.22ZM6.69 1a1.35 1.35 0 0 0-.8.27L3.07 4.42a.27.27 0 0 1-.19.08H1.75A1.76 1.76 0 0 0 0 6.25v1.5A1.76 1.76 0 0 0 1.75 9.5h1.13a.27.27 0 0 1 .19.08l2.82 3.15a1.35 1.35 0 0 0 .8.27A1.31 1.31 0 0 0 8 11.69V2.31A1.31 1.31 0 0 0 6.69 1Z' fill='currentColor' transform='scale(3.42857)'/></svg>Reproducir sonido</span>"
       }
+    },
+    "visualDescription": "Caja rectangular con borde gris delgado y fondo blanco. Contiene texto en color gris oscuro peso normal alineado a la izquierda, seguido de un botón con borde azul y texto azul que incluye un icono de play orientado hacia la derecha.",
+    "_generated": {
+      "hash": "1c3d6c246f9cdb88ae6bbdcedbed615a",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:17:17.635Z"
     }
   },
   {
@@ -123,6 +159,12 @@
       "attributes": {
         "aria-labelledby": "id-text"
       }
+    },
+    "visualDescription": "Caja rectangular con borde gris claro, fondo blanco, conteniendo un título en texto negro peso normal. Debajo del título aparece un control toggle switch con círculo gris en posición izquierda sobre fondo gris claro, precedido por label \"Desactivado\" en gris y seguido por label \"Activado\" en negro.",
+    "_generated": {
+      "hash": "f8ebb8282204bedc91a6f6da6563701e",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:17:26.020Z"
     }
   },
   {
@@ -144,6 +186,12 @@
       "attributes": {
         "aria-labelledby": "id-text"
       }
+    },
+    "visualDescription": "Caja rectangular con borde gris claro, fondo blanco, conteniendo un título en texto negro peso normal. Debajo del título aparece un control toggle switch con círculo blanco en posición derecha sobre fondo negro, precedido por label \"Desactivado\" en gris y seguido por label \"Activado\" en negro.",
+    "_generated": {
+      "hash": "881def83fff2ce3ce046c06cbeb619db",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:17:26.021Z"
     }
   },
   {
@@ -164,6 +212,12 @@
       "attributes": {
         "aria-labelledby": "id-text"
       }
+    },
+    "visualDescription": "Caja rectangular con borde gris claro, fondo blanco, conteniendo un título en texto negro peso normal. Debajo del título aparece un control toggle switch con círculo gris en posición izquierda sobre fondo gris claro, precedido por label \"Desactivado\" en gris y seguido por label \"Activado\" en negro.",
+    "_generated": {
+      "hash": "3807ce8562227322ae0625ac7a6d8ef0",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:17:26.021Z"
     }
   },
   {
@@ -183,6 +237,12 @@
       "attributes": {
         "aria-labelledby": "id-text"
       }
+    },
+    "visualDescription": "Toggle switch compacto con un interruptor deslizante circular blanco sobre fondo gris claro redondeado. El componente incluye label de texto negro a la izquierda que lee \"Desactivado\" y un indicador de estado \"Activado\" a la derecha del switch en gris medio. El switch tiene dimensiones pequeñas con bordes redondeados completos y el botón circular está posicionado en el lado izquierdo indicando estado desactivado.",
+    "_generated": {
+      "hash": "efea3df865fe8817162d4523690ebd4a",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:17:33.310Z"
     }
   }
 ] %}

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

@@ -8,6 +8,12 @@
         "type": "question"
       },
       "caller": "<p class='c-paragraph-base mb-0'>Esto es un tooltip</p>"
+    },
+    "visualDescription": "Contenedor rectangular con fondo blanco y borde gris claro de 1px. Título \"por defecto (sólo icono)\" en texto negro de peso normal. Icono circular azul con símbolo de información en color blanco centrado.",
+    "_generated": {
+      "hash": "303b04446da33cfd53d35edd79c4a6df",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:17:40.512Z"
     }
   },
   {
@@ -16,6 +22,12 @@
       "id": "example-text",
       "text": "Sólo texto",
       "caller": "<p class='c-paragraph-base mb-0'>Esto es un tooltip</p>"
+    },
+    "visualDescription": "Contenedor rectangular con fondo blanco y borde gris claro de 1px. Título \"sólo texto\" en texto negro de peso normal en la parte superior. Texto \"Sólo texto\" en color negro de tamaño estándar alineado a la izquierda.",
+    "_generated": {
+      "hash": "93322d72d4fbde426a0113a49f0f62ad",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:17:40.512Z"
     }
   },
   {
@@ -24,6 +36,12 @@
       "id": "example-html",
       "html": "<p class='inline-flex items-center'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 mr-xs text-primary-base' aria-hidden='true' focusable='false'><path d='M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm0 117.51a10 10 0 1110-10 10 10 0 01-10 10zm9.17-39.08a2.5 2.5 0 00-1.67 2.36v1.71a7.5 7.5 0 01-15 0v-10A7.5 7.5 0 0170 65a12.5 12.5 0 10-12.5-12.5 7.5 7.5 0 01-15 0 27.5 27.5 0 1136.67 25.93z' fill='currentColor'/></svg><span>Sólo <strong>html</strong> con icono custom a la izquierda</span></p>",
       "caller": "<p class='c-paragraph-base mb-0'>Si este contenido tiene texto extenso o con código, mira el ejemplo 'complex' más abajo.</p>"
+    },
+    "visualDescription": "Contenedor rectangular con fondo blanco y borde gris claro de 1px. Título \"con html\" en texto negro de peso normal en la parte superior. Fila con icono circular azul con símbolo de información seguido de texto \"Sólo html con icono custom a la izquierda\" en color negro.",
+    "_generated": {
+      "hash": "aa0a431fc8415ee5f5aff8c32ed74469",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:17:40.512Z"
     }
   },
   {
@@ -35,6 +53,12 @@
         "type": "question"
       },
       "caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>"
+    },
+    "visualDescription": "Caja rectangular con borde gris claro de 1px y fondo blanco. Contiene un título en negro en peso normal arriba, seguido de un texto en azul con ícono de información circular azul a la derecha. Padding interno visible alrededor del contenido.",
+    "_generated": {
+      "hash": "c3b0db65a3d5374c451c0c3a1d92e7b1",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:17:48.409Z"
     }
   },
   {
@@ -46,6 +70,12 @@
         "type": "info"
       },
       "caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>"
+    },
+    "visualDescription": "Caja rectangular con borde gris claro de 1px y fondo blanco. Contiene un título en negro en peso normal arriba, seguido de un texto en azul con ícono de información circular azul a la derecha. Padding interno visible alrededor del contenido.",
+    "_generated": {
+      "hash": "d4b618c41b037ab9ac00f90ac54e9eba",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:17:48.409Z"
     }
   },
   {
@@ -58,6 +88,12 @@
       },
       "classes": "text-alert-base",
       "caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>"
+    },
+    "visualDescription": "Caja rectangular con borde gris claro de 1px y fondo blanco. Contiene un título en negro en peso normal arriba, seguido de un texto en rojo con ícono de advertencia triangular rojo a la derecha. Padding interno visible alrededor del contenido.",
+    "_generated": {
+      "hash": "3d404bf07ccf4e91f722b95b02e0e81f",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:17:48.409Z"
     }
   },
   {
@@ -70,6 +106,12 @@
       },
       "classes": "text-neutral-dark",
       "caller": "<p class='c-paragraph-base mb-0'>1520 - Subvención para actividades de educación de personas adultas</p>"
+    },
+    "visualDescription": "Tooltip rectangular con fondo blanco, borde gris claro de 1px, y sombra sutil. Contiene texto en color negro tamaño pequeño alineado a la izquierda, seguido de un icono cuadrado pequeño con fondo oscuro que muestra una \"X\" en blanco.",
+    "_generated": {
+      "hash": "40643a99ab800bd45b8ad155b1196bca",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:17:56.137Z"
     }
   },
   {
@@ -82,6 +124,12 @@
       },
       "complex": true,
       "caller": "<p class='c-paragraph-base mb-0'>El código CVV se encuentra situado en la tarjeta por detrás. <strong>¡Compruébalo!</strong></p>"
+    },
+    "visualDescription": "Tooltip rectangular con fondo blanco, borde gris claro de 1px, y sombra sutil. Presenta un icono circular azul con signo de interrogación en la esquina superior izquierda, sin texto visible adicional. Dimensiones compactas de aproximadamente 30x30 píxeles.",
+    "_generated": {
+      "hash": "e1de9bc537dcbfe843d2a0f6a6504f98",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:17:56.137Z"
     }
   }
 ] %}