desy-html 15.0.3 → 16.0.0

package/src/templates/components/links-list/_examples.links-list.njk

@@ -39,6 +39,12 @@
       "attributes": {
         "aria-label": "Menú destacado"
       }
+    },
+    "visualDescription": "Lista de tres enlaces de texto en color azul turquesa, cada uno alineado a la izquierda con una flecha azul turquesa a la derecha. Los elementos están separados por líneas divisorias grises horizontales de 1px. El contenedor tiene un borde gris claro de 1px y fondo blanco, con un título en negro en la parte superior.",
+    "_generated": {
+      "hash": "d272d16a88348c250dab89e321f1b054",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:03:25.807Z"
     }
   },
   {
@@ -98,6 +104,12 @@
       "attributes": {
         "aria-label": "Menú destacado"
       }
+    },
+    "visualDescription": "Lista de enlaces con texto en azul turquesa, donde cada elemento tiene un icono diferente a la derecha. Los elementos están separados por líneas divisorias grises horizontales de 1px, en un contenedor con borde gris claro y fondo blanco. El último elemento contiene un bloque de texto largo en negro, con múltiples líneas y un icono de flecha a la derecha.",
+    "_generated": {
+      "hash": "71f4c9c91366a7312b7e438b59370c62",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:03:25.807Z"
     }
   },
   {
@@ -130,6 +142,12 @@
       "attributes": {
         "aria-label": "Menú destacado"
       }
+    },
+    "visualDescription": "Lista de tres enlaces con íconos de enlace externo en gris a la izquierda, texto en azul turquesa en el centro, y flechas azul turquesa a la derecha. Los elementos están separados por líneas divisorias grises horizontales de 1px. El contenedor tiene un borde gris claro de 1px y fondo blanco, con un título en negro en la parte superior.",
+    "_generated": {
+      "hash": "ecbcb0360e11f695118663cc1dc14d8b",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:03:25.807Z"
     }
   },
   {
@@ -165,6 +183,12 @@
       "attributes": {
         "aria-label": "Menú destacado"
       }
+    },
+    "visualDescription": "Lista vertical de tres elementos, cada uno con icono de carpeta azul oscuro a la izquierda, texto del enlace azul oscuro subrayado en el centro, y flecha azul oscuro a la derecha. Fondo blanco, separación vertical entre elementos, alineación horizontal distribuida con espaciado interno generoso.",
+    "_generated": {
+      "hash": "a39c3890629a18b2e5228fff4e67f98c",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:03:35.047Z"
     }
   },
   {
@@ -198,6 +222,12 @@
       "attributes": {
         "aria-label": "Menú destacado"
       }
+    },
+    "visualDescription": "Lista vertical de tres elementos con líneas divisorias grises horizontales entre cada ítem. Cada elemento tiene icono de carpeta azul oscuro a la izquierda, texto del enlace azul oscuro subrayado en el centro, y flecha azul oscuro a la derecha. Fondo blanco con espaciado interno moderado y bordes superior e inferior grises.",
+    "_generated": {
+      "hash": "5d690ee52d5e1b1352570c1260e159e3",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:03:35.047Z"
     }
   },
   {
@@ -234,6 +264,12 @@
       "attributes": {
         "aria-label": "Menú destacado"
       }
+    },
+    "visualDescription": "Lista vertical de tres elementos presentados como tarjetas rectangulares con borde gris claro de 1px. Cada tarjeta tiene fondo blanco, icono de carpeta azul oscuro a la izquierda, texto del enlace azul oscuro subrayado en el centro, y flecha azul oscuro a la derecha. Separación vertical entre tarjetas y esquinas ligeramente redondeadas.",
+    "_generated": {
+      "hash": "741fe943716b16732c92380026d136d3",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:03:35.047Z"
     }
   },
   {
@@ -257,6 +293,12 @@
       "attributes": {
         "aria-label": "Menú destacado"
       }
+    },
+    "visualDescription": "Contenedor rectangular con borde gris claro y fondo blanco. Contiene un elemento con ícono de carpeta azul a la izquierda, texto azul en negrita, y flecha chevron gris a la derecha. Debajo aparece texto gris claro de menor tamaño.",
+    "_generated": {
+      "hash": "686bd62d217b8a29ddd9b9416f938c5b",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:03:44.677Z"
     }
   },
   {
@@ -281,6 +323,12 @@
       "attributes": {
         "aria-label": "Menú destacado"
       }
+    },
+    "visualDescription": "Lista vertical de tres elementos con separadores horizontales grises claros. Los dos primeros elementos tienen texto azul en formato de enlace con flechas azules a la derecha. El tercer elemento muestra texto gris claro sin enlace y flecha gris desaturada, indicando estado inactivo.",
+    "_generated": {
+      "hash": "91186ae11902e6bd6d8d881c0b5399f8",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:03:44.677Z"
     }
   },
   {
@@ -303,6 +351,12 @@
       "attributes": {
         "aria-label": "Menú destacado"
       }
+    },
+    "visualDescription": "Lista vertical de tres elementos separados por líneas horizontales grises tenues. Primer elemento: texto azul con flecha azul a la derecha. Segundo elemento: texto negro sin formato de enlace y sin flecha. Tercer elemento: texto azul con flecha azul a la derecha.",
+    "_generated": {
+      "hash": "e3f5680595f77cd95a68a5bb92244087",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:03:44.677Z"
     }
   },
   {
@@ -327,6 +381,12 @@
       "attributes": {
         "aria-label": "Menú destacado"
       }
+    },
+    "visualDescription": "Lista vertical de tres enlaces de texto azul con iconos de flecha azul alineados a la derecha. Fondo blanco con bordes grises delgados, el primer enlace tiene fondo celeste claro indicando estado activo. Espaciado uniforme entre elementos.",
+    "_generated": {
+      "hash": "adcff09185265d85c267b59c7d3a9cc8",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:03:53.992Z"
     }
   },
   {
@@ -362,6 +422,12 @@
       "attributes": {
         "aria-label": "Menú destacado"
       }
+    },
+    "visualDescription": "Lista vertical de tres enlaces de texto azul con iconos de flecha azul alineados a la derecha. Fondo blanco con bordes grises delgados, todos los elementos tienen fondo blanco sin estado activo visible. Espaciado uniforme entre filas.",
+    "_generated": {
+      "hash": "9b7cd59c77583fb4bbc562258a29932a",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:03:53.993Z"
     }
   },
   {
@@ -385,6 +451,12 @@
       "attributes": {
         "aria-label": "Menú destacado"
       }
+    },
+    "visualDescription": "Lista vertical de tres enlaces con texto extenso en color azul que ocupa múltiples líneas por ítem, cada uno con icono de flecha azul alineado a la derecha. Fondo blanco con bordes grises delgados, altura de cada fila expandida para acomodar el contenido largo. Los enlaces mantienen el texto azul estándar con peso de fuente normal.",
+    "_generated": {
+      "hash": "3ba4ef8819a59af0ca9dc6b74bf705f4",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:03:53.993Z"
     }
   },
   {
@@ -417,6 +489,12 @@
       "attributes": {
         "aria-label": "Menú destacado"
       }
+    },
+    "visualDescription": "Lista de tres elementos con fondo blanco y bordes grises finos. Cada elemento contiene un título en azul en peso negrita, seguido de texto descriptivo gris en línea inferior con peso normal. Flecha azul alineada a la derecha en cada fila indica interactividad.",
+    "_generated": {
+      "hash": "a8a7a7d3e59b93529494a2476ea7f0b6",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:04:03.415Z"
     }
   },
   {
@@ -449,6 +527,12 @@
       "attributes": {
         "aria-label": "Menú destacado"
       }
+    },
+    "visualDescription": "Lista de cinco elementos con fondo blanco y bordes grises finos. Cada fila muestra texto de enlace en azul con peso normal, alineado a la izquierda. Flecha azul posicionada en extremo derecho de cada elemento señala navegación.",
+    "_generated": {
+      "hash": "f2c64c635f9bc7f7dddd16cd4c0e7078",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:04:03.415Z"
     }
   },
   {
@@ -485,6 +569,12 @@
       "attributes": {
         "aria-label": "Menú destacado"
       }
+    },
+    "visualDescription": "Lista de cinco elementos con fondo blanco y separadores grises horizontales. Cada entrada presenta texto de enlace azul en peso normal, con flecha azul en lado derecho. Diseño vertical uniforme con espaciado consistente entre filas.",
+    "_generated": {
+      "hash": "7dbc406ba71526e8d4e9ab582e095707",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:04:03.415Z"
     }
   },
   {
@@ -550,6 +640,12 @@
         "aria-label": "Menú destacado",
         "id": "nav-id-example"
       }
+    },
+    "visualDescription": "Lista de cinco enlaces en texto azul con peso normal, cada uno con una flecha azul alineada a la derecha. Fondo blanco con separadores grises horizontales de 1px entre elementos. Un elemento incluye texto descriptivo gris debajo del enlace principal.",
+    "_generated": {
+      "hash": "b7f0ea5ff3f7291a0d1031bd589334bf",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:04:13.336Z"
     }
   },
   {
@@ -572,6 +668,12 @@
           "text": "Item 3"
         }
       ]
+    },
+    "visualDescription": "Lista de tres enlaces en texto azul con peso normal, cada uno con flecha azul alineada a la derecha. Fondo blanco con líneas divisorias grises horizontales de 1px entre elementos. Espaciado vertical uniforme entre cada enlace.",
+    "_generated": {
+      "hash": "3d03cf5fbc5824345392c3f43add7897",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:04:13.336Z"
     }
   },
   {
@@ -617,6 +719,12 @@
       "attributes": {
         "aria-label": "Menú destacado"
       }
+    },
+    "visualDescription": "Lista de seis elementos con enlaces azules, algunos con texto descriptivo gris debajo. Fondo blanco con separadores grises horizontales de 1px. Cada enlace tiene flecha azul a la derecha. Incluye texto rojo destacado en un elemento y texto gris secundario en varios elementos describiendo estados.",
+    "_generated": {
+      "hash": "8dbbd731583a7b6d445b03cac343beb0",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:04:13.336Z"
     }
   },
   {
@@ -642,6 +750,12 @@
         "aria-label": "Menú destacado",
         "id": "links-list-js"
       }
+    },
+    "visualDescription": "Lista de tres enlaces de texto en color azul claro (item 1, item 2, item 3) dispuestos verticalmente con separadores horizontales grises tenues entre ellos. Cada fila contiene el texto del enlace alineado a la izquierda y una flecha azul claro (→) alineada a la derecha. El conjunto está contenido en un recuadro con borde gris delgado y fondo blanco, con un encabezado en texto negro regular que dice \"Activar un item con Javascript\".",
+    "_generated": {
+      "hash": "e95ff247158f6585244d9321d846bf0e",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:04:21.129Z"
     }
   }
 ] %}

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

@@ -30,7 +30,13 @@
             "text": "Opción 5"
           }
         ]
-      }
+      },
+    "visualDescription": "Listbox con borde gris de 1px y fondo blanco. Contiene un título en texto negro tamaño estándar, un label descriptivo en texto negro regular, y un botón dropdown con texto en negro con flecha hacia abajo. El botón tiene borde gris claro y esquinas redondeadas.",
+    "_generated": {
+      "hash": "b56179415d13699c386407c4f144b21a",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:04:29.014Z"
+    }
     },
     {
       "name": "con estado activo",
@@ -64,7 +70,13 @@
             "text": "Opción 5"
           }
         ]
-      }
+      },
+    "visualDescription": "Listbox con borde gris de 1px y fondo blanco. Contiene un título en texto negro tamaño estándar, un label descriptivo en texto negro regular, y un botón dropdown con texto en azul con flecha hacia abajo. El botón tiene borde azul y esquinas redondeadas, indicando selección activa.",
+    "_generated": {
+      "hash": "e113cf3a8c6b3da9de4d0c4d3960157c",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:04:29.014Z"
+    }
     },
     {
       "name": "con estado hover",
@@ -98,7 +110,13 @@
             "text": "Opción 5"
           }
         ]
-      }
+      },
+    "visualDescription": "Listbox con borde gris de 1px y fondo blanco. Contiene un título en texto negro tamaño estándar, un label descriptivo en texto negro regular, y un botón dropdown con texto en negro con flecha hacia abajo. El botón tiene borde gris y esquinas redondeadas en estado de interacción al pasar cursor.",
+    "_generated": {
+      "hash": "41d78ff6a7234333c40613dee1a72cf4",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:04:29.014Z"
+    }
     },
     {
       "name": "con estado focus",
@@ -132,7 +150,13 @@
             "text": "Opción 5"
           }
         ]
-      }
+      },
+    "visualDescription": "Listbox con borde gris claro, fondo blanco, label en texto negro arriba del componente. Botón rectangular con texto negro sobre fondo amarillo intenso, borde negro fino, esquinas ligeramente redondeadas. El botón muestra indicador de desplegable.",
+    "_generated": {
+      "hash": "456df9bd7520f6b8920ff7c19892614d",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:04:37.062Z"
+    }
     },
     {
       "name": "primario",
@@ -166,7 +190,13 @@
             "text": "Opción 5"
           }
         ]
-      }
+      },
+    "visualDescription": "Listbox con borde gris claro, fondo blanco, label en texto negro arriba del componente. Botón rectangular con texto blanco sobre fondo azul oscuro(teal/petróleo) , esquinas ligeramente redondeadas. El botón muestra indicador de desplegable.",
+    "_generated": {
+      "hash": "5967e56ef0d923f90eefe8164cf7b0cd",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:04:37.062Z"
+    }
     },
     {
       "name": "transparente",
@@ -199,7 +229,13 @@
             "text": "Opción 5"
           }
         ]
-      }
+      },
+    "visualDescription": "Listbox con borde gris claro, fondo blanco, label en texto negro arriba del componente. Enlace de texto en color azul(teal) con indicador de desplegable, sin fondo ni borde visible. El enlace aparece subrayado indicando interactividad.",
+    "_generated": {
+      "hash": "c8c22c0daf0639cf13f219d880229db1",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:04:37.062Z"
+    }
     },
     {
       "name": "Con estilos de cabecera",
@@ -233,7 +269,13 @@
             "text": "Opción 5"
           }
         ]
-      }
+      },
+    "visualDescription": "Listbox con borde gris claro de 1px, fondo blanco, conteniendo un label en texto negro regular pequeño arriba. Botón desplegable en texto negro con fondo blanco y borde gris de 1px, incluyendo un ícono de flecha hacia abajo a la derecha.",
+    "_generated": {
+      "hash": "804758f035b36dc3cb7866f8f2d1e80e",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:04:45.911Z"
+    }
     },
     {
       "name": "peque",
@@ -268,7 +310,13 @@
             "text": "Opción 5"
           }
         ]
-      }
+      },
+    "visualDescription": "Listbox con borde gris claro de 1px, fondo blanco, conteniendo un label en texto negro regular pequeño arriba. Botón desplegable con texto largo en negro sobre fondo blanco, borde gris de 1px, y flecha hacia abajo a la derecha del texto.",
+    "_generated": {
+      "hash": "23632c5d8946a2323576ae4a83a8af54",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:04:45.911Z"
+    }
     },
     {
       "name": "grande",
@@ -303,7 +351,13 @@
             "text": "Opción 5"
           }
         ]
-      }
+      },
+    "visualDescription": "Listbox con borde gris claro de 1px, fondo blanco, conteniendo un label en texto negro regular pequeño arriba. Botón desplegable en texto negro sobre fondo blanco con borde gris de 1px y ícono de flecha hacia abajo a la derecha.",
+    "_generated": {
+      "hash": "4869e9f41ccf8a26329492063207a5dd",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:04:45.911Z"
+    }
     },
     {
       "name": "peque tiene selección",
@@ -338,7 +392,13 @@
             "text": "Opción 5"
           }
         ]
-      }
+      },
+    "visualDescription": "Listbox con fondo blanco y borde gris de 1px. Contiene un botón desplegable con texto azul oscuro y un ícono de flecha hacia abajo a la derecha. El botón tiene padding interno y esquinas ligeramente redondeadas.",
+    "_generated": {
+      "hash": "2be911291033ff8f5a16ab598f9e6811",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:04:55.744Z"
+    }
     },
     {
       "name": "deshabilitado",
@@ -371,7 +431,13 @@
             "text": "Opción 5"
           }
         ]
-      }
+      },
+    "visualDescription": "Listbox con encabezado en texto gris oscuro y subtexto descriptivo en gris medio debajo. Contiene un botón desplegable con texto gris claro, fondo gris muy tenue, y flecha hacia abajo desaturada. El botón aparece sin interactividad visual, con opacidad reducida.",
+    "_generated": {
+      "hash": "66b18da8f5ddd34b734c365189624fb4",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:04:55.744Z"
+    }
     },
     {
       "name": "Con clases de css aplicadas al container",
@@ -405,7 +471,13 @@
             "text": "Opción 5"
           }
         ]
-      }
+      },
+    "visualDescription": "Listbox con encabezado en texto negro y subtexto descriptivo en gris oscuro debajo. Contiene un botón desplegable con texto en color turquesa/cyan, fondo cyan muy claro, y flecha hacia abajo del mismo color turquesa. El botón tiene borde cyan de 1px y padding interno visible.",
+    "_generated": {
+      "hash": "d36f38a4497ea12d11a18253d7611653",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:04:55.744Z"
+    }
     },
     {
       "name": "Clases aplicadas al contenido del tooltip",
@@ -439,7 +511,13 @@
             "text": "Opción 5"
           }
         ]
-      }
+      },
+    "visualDescription": "Sección con borde gris claro de 1px y fondo blanco. Título en negro tamaño mediano, seguido de label en texto negro regular. Botón dropdown con texto azul y flecha hacia abajo a la derecha.",
+    "_generated": {
+      "hash": "825faf59d2e0cec20bb4aee58c108159",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:05:04.650Z"
+    }
     },
     {
       "name": "Clases aplicadas a varios elementos",
@@ -475,7 +553,13 @@
             "text": "Opción 5"
           }
         ]
-      }
+      },
+    "visualDescription": "Sección con borde gris claro de 1px y fondo blanco. Título en negro tamaño mediano, seguido de label en texto negro regular. Campo de entrada tipo combobox con texto negro y flecha hacia abajo a la derecha, ocupando ancho completo.",
+    "_generated": {
+      "hash": "fc6f9c72554f4571d1c4599cf7fb7cdc",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:05:04.651Z"
+    }
     },
     {
       "name": "con item activo",
@@ -512,7 +596,13 @@
         "attributes": {
           "id": "listbox"
         }
-      }
+      },
+    "visualDescription": "Sección con borde gris claro de 1px y fondo blanco. Label en texto negro regular. Botón dropdown con texto azul y flecha hacia abajo a la derecha, formato compacto.",
+    "_generated": {
+      "hash": "867896813517c7e5619284e8b91517b4",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:05:04.651Z"
+    }
     },
     {
       "name": "Permite selecciones múltiples",
@@ -549,7 +639,13 @@
         "attributes": {
           "id": "listbox-multiple"
         }
-      }
+      },
+    "visualDescription": "Rectángulo con borde gris de 1px y fondo blanco contiene un label en texto gris oscuro tamaño pequeño seguido de un botón desplegable azul con flecha hacia abajo. El componente ocupa ancho completo del contenedor con padding interno y el botón tiene bordes redondeados suaves.",
+    "_generated": {
+      "hash": "2e33191fe8d3cbbf23893a4287d65b12",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:05:14.275Z"
+    }
     },
     {
       "name": "Cambia el texto del botón",
@@ -583,7 +679,13 @@
             "text": "Opción 5"
           }
         ]
-      }
+      },
+    "visualDescription": "Rectángulo con borde gris de 1px y fondo blanco contiene un label en texto gris oscuro tamaño pequeño seguido de un botón desplegable azul con flecha hacia abajo. El componente ocupa ancho completo del contenedor con padding interno y el botón tiene bordes redondeados suaves.",
+    "_generated": {
+      "hash": "bba5a8decae1dedb9652d9df7b1496e4",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:05:14.275Z"
+    }
     },
     {
       "name": "Con iconos en items",
@@ -607,7 +709,13 @@
             "html": "Opción 3 <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 14' width='1em' height='1em' class='inline-block align-baseline ml-sm' aria-label='Solicitud' focusable='false' role='img'><g id='clipboard-text--edition-form-task-checklist-edit-clipboard'><path id='Union-2' fill='currentColor' fill-rule='evenodd' d='M5.5 0C4.94772 0 4.5 0.447716 4.5 1V1.5C4.5 2.05229 4.94772 2.5 5.5 2.5H8.5C9.05229 2.5 9.5 2.05229 9.5 1.5V1C9.5 0.447715 9.05229 0 8.5 0H5.5ZM2.75 1H3.25V1.5C3.25 2.74264 4.25736 3.75 5.5 3.75H8.5C9.74264 3.75 10.75 2.74264 10.75 1.5V1H11.25C12.0784 1 12.75 1.67157 12.75 2.5V12.5C12.75 13.3284 12.0784 14 11.25 14H2.75C1.92157 14 1.25 13.3284 1.25 12.5V2.5C1.25 1.67157 1.92157 1 2.75 1ZM3.875 8.50049C3.875 8.15531 4.15482 7.87549 4.5 7.87549H9.5C9.84518 7.87549 10.125 8.15531 10.125 8.50049C10.125 8.84567 9.84518 9.12549 9.5 9.12549H4.5C4.15482 9.12549 3.875 8.84567 3.875 8.50049ZM4.5 10.3755C4.15482 10.3755 3.875 10.6553 3.875 11.0005C3.875 11.3457 4.15482 11.6255 4.5 11.6255H9.5C9.84518 11.6255 10.125 11.3457 10.125 11.0005C10.125 10.6553 9.84518 10.3755 9.5 10.3755H4.5Z' clip-rule='evenodd'></path></g></svg>"
           }
         ]
-      }
+      },
+    "visualDescription": "Rectángulo con borde gris de 1px y fondo blanco contiene un label en texto gris oscuro tamaño pequeño seguido de un botón desplegable azul con flecha hacia abajo. El componente ocupa ancho completo del contenedor con padding interno y el botón tiene bordes redondeados suaves.",
+    "_generated": {
+      "hash": "63269c0e21c0e2df131a129a2b623858",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:05:14.275Z"
+    }
     },
     {
       "name": "con párrafos en items",
@@ -650,7 +758,13 @@
           }
         ],
         classesTooltip: "w-xs!"
-      }
+      },
+    "visualDescription": "Componente listbox con borde gris de 1px, fondo blanco, y esquinas ligeramente redondeadas. Contiene un título h3 en negro, seguido de un label en negro tamaño pequeño, y un botón dropdown con texto en azul oscuro con flecha hacia abajo.",
+    "_generated": {
+      "hash": "85cca125cbe408b2d7397b5fa39aea31",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:05:22.468Z"
+    }
     },
     {
       "name": "Menú abierto o cerrado con Javascript",
@@ -687,6 +801,12 @@
         "attributes": {
           "id": "listbox-javascript"
         }
-      }
+      },
+    "visualDescription": "Componente listbox con borde gris de 1px, fondo blanco, y esquinas ligeramente redondeadas. Incluye un título h3 en negro, un label en negro tamaño pequeño debajo, y un botón dropdown con texto en azul oscuro acompañado de una flecha hacia abajo a la derecha.",
+    "_generated": {
+      "hash": "d4ae482982aee942093356db02f9127c",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:05:22.468Z"
+    }
     }
 ] %}

package/src/templates/components/media-object/_examples.media-object.njk

@@ -6,6 +6,12 @@
     "data": {
       "figureHtml": "<div class=' w-20 h-20 '><div class=' h-full border-4 border-dashed border-gray-200 rounded-lg '></div></div>",
       "caller": "<p class='c-paragraph-base'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet.</p>"
+    },
+    "visualDescription": "Contenedor rectangular con borde gris de 1px y fondo blanco. Contiene una imagen cuadrada pequeña alineada a la izquierda, seguida de un bloque de texto de múltiples líneas en negro con tipografía normal que ocupa el espacio restante a la derecha. El texto comienza al nivel superior de la imagen.",
+    "_generated": {
+      "hash": "1c3bfac759d6d9fb1e3a16b43cfe00b5",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:05:30.864Z"
     }
   },
   {
@@ -14,6 +20,12 @@
       "reverse": true,
       "figureHtml": "<div class=' w-20 h-20 '><div class=' h-full border-4 border-dashed border-gray-200 rounded-lg '></div></div>",
       "caller": "<p class='c-paragraph-base'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet.</p>"
+    },
+    "visualDescription": "Contenedor rectangular con borde gris de 1px y fondo blanco. Presenta una imagen cuadrada pequeña alineada a la derecha, con un bloque de texto de múltiples líneas en negro con tipografía normal posicionado a la izquierda ocupando el espacio disponible. El texto comienza al nivel superior de la imagen.",
+    "_generated": {
+      "hash": "63c905f73e7f9b1bdf68c1258b54818b",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:05:30.864Z"
     }
   },
   {
@@ -22,6 +34,12 @@
       "center": true,
       "figureHtml": "<div class=' w-20 h-20 '><div class=' h-full border-4 border-dashed border-gray-200 rounded-lg '></div></div>",
       "caller": "<p class='c-paragraph-base'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet.</p>"
+    },
+    "visualDescription": "Contenedor rectangular con borde gris de 1px y fondo blanco. Incluye una imagen cuadrada pequeña alineada a la izquierda, con un bloque extenso de texto de múltiples líneas en negro con tipografía normal a la derecha. El contenido de texto está verticalmente centrado respecto a la imagen, creando espacio visual balanceado arriba y abajo de la imagen.",
+    "_generated": {
+      "hash": "45d2190c13789fcb1251dbc717ff08ef",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:05:30.864Z"
     }
   },
   {
@@ -33,6 +51,12 @@
       "contentClasses": "text-sm",
       "caller": "<p class='c-paragraph-base'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet.</p>",
       "classes": "mb-base"
+    },
+    "visualDescription": "Bloque rectangular con borde gris claro de 1px y fondo blanco. Contiene texto de párrafo negro en fuente regular, con espaciado interno visible alrededor del contenido. El contenedor muestra separación clara entre el texto y los bordes del rectángulo.",
+    "_generated": {
+      "hash": "725bd9abf7e7c4b0489b3c60a9d77469",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:05:38.750Z"
     }
   },
   {
@@ -45,6 +69,12 @@
       "contentClasses": "text-sm",
       "caller": "<p class='c-paragraph-base'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet.</p>",
       "classes": "mb-base"
+    },
+    "visualDescription": "Bloque rectangular con borde gris claro de 1px y fondo blanco. Contiene texto de párrafo negro en fuente regular, distribuido en líneas continuas con espaciado interno. El contenedor presenta márgenes externos que lo separan de otros elementos y padding interno uniforme.",
+    "_generated": {
+      "hash": "b03b1262c8f33a74ff4f25d8c9fc8e21",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:05:38.750Z"
     }
   }
 ] %}