desy-html 15.0.3 → 16.0.0

package/src/js/desy-html.js

@@ -153,6 +153,7 @@ export function listboxComponent(aria) {
             },
             onHidden: (instance) => {
               buttonListbox.classList.remove('open');
+              buttonListbox.setAttribute('aria-expanded', 'false');
             }
           });
 
@@ -161,6 +162,7 @@ export function listboxComponent(aria) {
               instance.show();
               list.focus();
               buttonListbox.classList.add('open');
+              buttonListbox.setAttribute('aria-expanded', 'true');
             } else {
               list.blur();
               instance.hide();
@@ -187,6 +189,9 @@ export function listboxComponent(aria) {
               buttonListbox.click();
             });
           }
+
+          // Initialize aria-expanded state
+          buttonListbox.setAttribute('aria-expanded', 'false');
         }
       }
     }

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

@@ -20,6 +20,12 @@
           "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
         }
       ]
+    },
+    "visualDescription": "Componente acordeón con tres ítems dentro de un contenedor con borde gris claro. Cada ítem muestra un texto de encabezado en gris oscuro alineado a la izquierda y un enlace en gris claro alineado a la derecha. El título del componente aparece en gris oscuro encima del contenedor.",
+    "_generated": {
+      "hash": "d7ede59b51fe850ce40df95a0a95a583",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:46:59.819Z"
     }
   },
   {
@@ -43,6 +49,12 @@
           "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
         }
       ]
+    },
+        "visualDescription": "Componente acordeón con tres ítems dentro de un contenedor con borde gris claro. Cada ítem muestra un texto de encabezado en gris oscuro alineado a la izquierda y un enlace en gris claro alineado a la derecha. El título del componente aparece en gris oscuro encima del contenedor.",
+    "_generated": {
+      "hash": "e6f2aa78c1838403ec4ee7df7b1e719c",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:46:59.819Z"
     }
   },
   {
@@ -66,6 +78,12 @@
           "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
         }
       ]
+    },
+        "visualDescription": "Componente acordeón con tres ítems dentro de un contenedor con borde gris claro. Cada ítem muestra un texto de encabezado en gris oscuro alineado a la izquierda y un enlace en gris claro alineado a la derecha. El título del componente aparece en gris oscuro encima del contenedor.",
+    "_generated": {
+      "hash": "edd56dd3213c489c5268159b482fe030",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:46:59.819Z"
     }
   },
   {
@@ -93,6 +111,12 @@
       "attributes": {
         "id": "accordion"
       }
+    },
+    "visualDescription": "Acordeón con borde gris claro, fondo blanco. Incluye tres ítems apilados verticalmente con títulos en texto negro regular y enlaces alineados a la derecha en azul. El segundo ítem muestra contenido expandido con área de texto visible en fondo blanco.",
+    "_generated": {
+      "hash": "67e5741571afca4fd745b203e8a26f28",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:47:08.520Z"
     }
   },
   {
@@ -121,6 +145,12 @@
       "attributes": {
         "id": "accordion-multiple"
       }
+    },
+    "visualDescription": "Acordeón con borde gris claro, fondo blanco. Contiene tres ítems apilados verticalmente con títulos en texto negro regular y enlaces alineados a la derecha en azul. Los ítems primero y tercero muestran áreas de contenido expandidas con fondo blanco visible.",
+    "_generated": {
+      "hash": "8cc15dbe93648b3015bd084cf4ae388c",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:47:08.520Z"
     }
   },
   {
@@ -148,6 +178,12 @@
           "open": true
         }
       ]
+    },
+    "visualDescription": "Acordeón con borde gris claro, fondo blanco. Presenta tres ítems apilados verticalmente con títulos en texto negro regular y enlace alineado a la derecha en azul. El tercer ítem muestra contenido expandido con área de texto en fondo blanco, mientras los dos primeros permanecen colapsados.",
+    "_generated": {
+      "hash": "64387f20fb95772be8367028cd58377d",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:47:08.520Z"
     }
   },
   {
@@ -173,6 +209,12 @@
           "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
         }
       ]
+    },
+    "visualDescription": "Acordeón con título en negrita oscuro tamaño grande, contenedor con borde gris claro de 1px y esquinas redondeadas. Tres ítems listados verticalmente con labels en negro peso normal y enlaces alineados a la derecha en color azul.",
+    "_generated": {
+      "hash": "3bfe8100b6328534aa789be728c993ad",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:47:18.465Z"
     }
   },
   {
@@ -198,6 +240,12 @@
           "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
         }
       ]
+    },
+    "visualDescription": "Acordeón con título principal en negrita tamaño medio-grande, subtítulo secundario en negrita negro debajo, contenedor con borde gris de 1px. Tres ítems con texto descriptivo incluyendo etiquetas HTML `<ol>` y `<li>` en negro, enlaces azules alineados a la derecha.",
+    "_generated": {
+      "hash": "7e43cadc000d9fe5764c2e4de1474a9e",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:47:18.465Z"
     }
   },
   {
@@ -226,6 +274,12 @@
           "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
         }
       ]
+    },
+    "visualDescription": "Acordeón con título en negrita negro, enlace azul alineado a la derecha en la cabecera, contenedor con borde gris de 1px. Tres ítems donde el primero tiene enlace azul, el segundo muestra contenedor expandido con borde punteado gris y enlace azul, el tercero tiene enlace azul.",
+    "_generated": {
+      "hash": "1568aee8b48ba13128694be9dbcaf55f",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:47:18.465Z"
     }
   },
   {
@@ -254,6 +308,12 @@
           "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
         }
       ]
+    },
+    "visualDescription": "Accordion con encabezado de sección que incluye un enlace alineado a la derecha. Cada ítem presenta un título en texto negro con enlace en gris a la derecha. Bordes grises claros separan los ítems, con fondo blanco en toda la sección.",
+    "_generated": {
+      "hash": "5e4ceff7669d666ea0d07515e6faf74a",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:47:28.590Z"
     }
   },
   {
@@ -308,6 +368,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Accordion con encabezado de sección en texto negro. Cada ítem muestra un título en texto negro con icono alineado a la derecha en color gris. Bordes grises finos delimitan cada fila, con fondo blanco uniforme en toda el área.",
+    "_generated": {
+      "hash": "ff9f223caeae185ddc34c20f82b39eb8",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:47:28.590Z"
     }
   },
   {
@@ -330,6 +396,12 @@
           "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
         }
       ]
+    },
+    "visualDescription": "Accordion con encabezado de sección en texto negro. Cada ítem contiene un título en negro seguido de subtexto en gris claro debajo, con enlace alineado a la derecha. Bordes grises claros separan los ítems, fondo blanco en toda la zona.",
+    "_generated": {
+      "hash": "db0b1075ced2518162926fe159f5902a",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:47:28.590Z"
     }
   },
   {
@@ -359,6 +431,12 @@
           "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
         }
       ]
+    },
+    "visualDescription": "Acordeón con borde gris claro, conteniendo tres ítems. Cada ítem muestra un label negro a la izquierda y un botón de acción alineado a la derecha. El segundo ítem está expandido, revelando un panel con fondo azul claro que contiene un rectángulo punteado en la esquina superior izquierda.",
+    "_generated": {
+      "hash": "0816e879a18c6c1f21bacddb67adbc20",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:47:37.150Z"
     }
   },
   {
@@ -393,6 +471,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Acordeón con borde gris claro, conteniendo tres ítems colapsados. Cada ítem muestra un label negro a la izquierda y un enlace gris alineado a la derecha. Los ítems están separados por líneas divisorias horizontales grises. Fondo blanco en toda la estructura del componente.",
+    "_generated": {
+      "hash": "81e85f8d412458511ccdc67958048875",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:47:37.150Z"
     }
   }
 ] %}

package/src/templates/components/accordion-history/_examples.accordion-history.njk

@@ -20,6 +20,12 @@
           "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
         }
       ]
+    },
+    "visualDescription": "Lista de tres ítems de acordeón con fondo blanco. Cada ítem muestra un indicador circular azul a la izquierda, texto de label en negro a tamaño estándar, y link en gris a la derecha. Separadores de línea gris claro entre ítems.",
+    "_generated": {
+      "hash": "db6342dbbfb54cc774dfc28139820c4a",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:46:10.876Z"
     }
   },
   {
@@ -55,6 +61,12 @@
           "status": "pending"
         }
       ]
+    },
+    "visualDescription": "Lista de cinco ítems de acordeón con fondo blanco mostrando diferentes estados visuales. Indicadores de estado variados: círculo gris relleno, círculo gris vacío, círculo azul relleno, círculo vacío con borde negro, círculo vacío con borde gris. Cada ítem tiene texto de label en negro y link alineado a la derecha, con separadores grises entre ítems.",
+    "_generated": {
+      "hash": "f35b1ec995f9bfdc48262f1ca032351f",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:46:10.876Z"
     }
   },
   {
@@ -78,6 +90,12 @@
           "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
         }
       ]
+    },
+    "visualDescription": "Lista de tres ítems de acordeón con fondo blanco. Indicadores circulares azules a la izquierda de cada ítem, texto de label en negro tamaño estándar, y link \"Mostrar\" en gris posicionado a la derecha. Líneas separadoras grises horizontales dividen cada ítem.",
+    "_generated": {
+      "hash": "760ccde69171508f302eeb06a47317c7",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:46:10.876Z"
     }
   },
   {
@@ -102,6 +120,12 @@
           "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
         }
       ]
+    },
+    "visualDescription": "Panel con borde gris claro de 1px y fondo blanco. Contiene 3 ítems verticales con labels en texto negro normal y enlaces en gris claro alineados a la derecha. Línea vertical azul conecta los ítems en el margen izquierdo con puntos azules circulares.",
+    "_generated": {
+      "hash": "eda9e7c9a08df92f2e7fb606b0569ab8",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:46:21.210Z"
     }
   },
   {
@@ -129,6 +153,12 @@
       "attributes": {
         "id": "accordion-history"
       }
+    },
+    "visualDescription": "Panel con borde gris claro de 1px y fondo blanco. Muestra 3 ítems verticales con labels en texto negro normal, el ítem del medio expandido con área de contenido vacía en fondo gris claro. Enlaces en gris claro alineados a la derecha, línea vertical azul con puntos circulares azules conecta los ítems.",
+    "_generated": {
+      "hash": "1f20079d50b868a367f77eebadf64778",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:46:21.210Z"
     }
   },
   {
@@ -157,6 +187,12 @@
       "attributes": {
         "id": "accordion-history-multiple"
       }
+    },
+    "visualDescription": "Panel con borde gris claro de 1px y fondo blanco. Presenta 3 ítems verticales con labels en texto negro normal, el primer y tercer ítem expandidos mostrando áreas de contenido vacías con fondo gris claro. Enlaces en gris claro alineados a la derecha, línea vertical azul con puntos circulares azules conecta los ítems en el margen izquierdo.",
+    "_generated": {
+      "hash": "9f448dd642a60453f93b7b10bead91f6",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:46:21.210Z"
     }
   },
   {
@@ -184,6 +220,12 @@
           "open": true
         }
       ]
+    },
+    "visualDescription": "Tres ítems de acordeón con indicadores circulares azul oscuro a la izquierda, texto de títulos en negro tamaño estándar, y enlace alineado a la derecha en gris. Fondo blanco con líneas divisorias sutiles entre ítems, sin áreas de contenido expandidas visibles.",
+    "_generated": {
+      "hash": "4cd0dc6bdb708cf63bfa506893368d1b",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:46:31.968Z"
     }
   },
   {
@@ -209,6 +251,12 @@
           "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
         }
       ]
+    },
+    "visualDescription": "Encabezado en texto negro negrita arriba del componente. Tres ítems de acordeón con indicadores circulares azul oscuro a la izquierda, títulos en texto negro tamaño estándar, y enlaces en gris alineados a la derecha. Fondo blanco contenido en borde gris claro con separadores horizontales entre ítems.",
+    "_generated": {
+      "hash": "c8c32d98632c8eb60efd5885dfd66259",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:46:31.968Z"
     }
   },
   {
@@ -234,6 +282,12 @@
           "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
         }
       ]
+    },
+    "visualDescription": "Título en texto negro negrita ubicado sobre el componente. Tres ítems de acordeón con indicadores circulares azul oscuro a la izquierda, títulos en texto negro que incluyen etiquetas HTML visibles como código, y enlaces en gris alineados a la derecha. Fondo blanco con borde gris claro perimetral y líneas divisorias horizontales grises entre elementos.",
+    "_generated": {
+      "hash": "641ad5c23596666b02c3c0806b3e9b83",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:46:31.968Z"
     }
   },
   {
@@ -262,6 +316,12 @@
           "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
         }
       ]
+    },
+    "visualDescription": "Acordeón con borde gris claro, encabezado en texto negro negrita, y enlace alineado a la derecha en azul subrayado. Tres ítems listados verticalmente con texto negro, cada uno con enlace en azul a la derecha. Línea vertical azul conecta los ítems del lado izquierdo con círculos azules como marcadores.",
+    "_generated": {
+      "hash": "8c10b877e0660adc8daf60e3707324b5",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:46:42.697Z"
     }
   },
   {
@@ -291,6 +351,12 @@
           "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
         }
       ]
+    },
+    "visualDescription": "Acordeón con borde gris claro, encabezado en texto negro negrita, y enlace alineado a la derecha en azul subrayado. Tres ítems con texto negro dispuestos verticalmente, cada uno con enlace en azul a la derecha. Línea vertical azul en el margen izquierdo conecta los ítems mediante círculos azules rellenos.",
+    "_generated": {
+      "hash": "ead3140878aa0bb7d02d491c2feb2eca",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:46:42.697Z"
     }
   },
   {
@@ -345,6 +411,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Acordeón con borde gris claro conteniendo cuatro ítems listados verticalmente con texto negro. Primer ítem muestra enlace en azul a la derecha, segundo y cuarto ítem tienen ícono gris, tercer ítem tiene ícono chevron hacia abajo. Línea vertical azul en el borde izquierdo conecta todos los ítems mediante círculos azules.",
+    "_generated": {
+      "hash": "ae7eca8b79b533cc4f80782eb506b077",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:46:42.697Z"
     }
   },
   {
@@ -367,6 +439,12 @@
           "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
         }
       ]
+    },
+    "visualDescription": "Lista vertical de tres ítems expandibles con borde izquierdo azul de 3px. Cada ítem tiene un título en texto negro mediano negrita, subtexto gris claro, y enlace gris alineado a la derecha. Fondo blanco con separadores horizontales grises tenues entre ítems.",
+    "_generated": {
+      "hash": "0651314836ada6d0e932cb09adf2feb5",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:46:52.821Z"
     }
   },
   {
@@ -392,6 +470,12 @@
           "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
         }
       ]
+    },
+    "visualDescription": "Lista vertical de tres ítems con borde izquierdo azul de 3px y fondo que alterna entre blanco y celeste claro. El segundo ítem contiene un área expandida celeste claro con un recuadro punteado blanco. Cada ítem muestra texto negro mediano con enlaces alineados a la derecha en gris.",
+    "_generated": {
+      "hash": "c99c5ceb99ef89bf71a439847eb85631",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:46:52.821Z"
     }
   },
   {
@@ -426,6 +510,12 @@
           }
         }
       ]
+    },
+    "visualDescription": "Lista vertical de tres ítems expandibles con borde izquierdo azul de 3px sobre fondo blanco. Cada ítem presenta texto negro mediano en una sola línea con enlace gris alineado a la derecha. Separadores horizontales grises tenues dividen los ítems con espaciado uniforme vertical.",
+    "_generated": {
+      "hash": "6162c72aafd439d67ea57c9d2951253a",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:46:52.821Z"
     }
   }
 ] %}

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

@@ -57,6 +57,12 @@
         "aria-live": "assertive"
       },
       "caller": defaultExample
+    },
+    "visualDescription": "Contenedor rectangular con fondo blanco, borde gris claro de 1px. Texto descriptivo negro arriba. Botón con texto azul oscuro, borde azul de 1px, fondo blanco, esquinas redondeadas.",
+    "_generated": {
+      "hash": "e9b09dbe7b16e7bac9e8296e52edcfea",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:47:42.215Z"
     }
   },
   {
@@ -75,6 +81,12 @@
         "aria-live": "assertive"
       },
       "caller": secondaryExample
+    },
+    "visualDescription": "Contenedor rectangular con fondo blanco, borde gris claro de 1px. Texto descriptivo negro arriba. Botón con texto azul oscuro, borde azul de 1px, fondo blanco, esquinas redondeadas.",
+    "_generated": {
+      "hash": "1cf721fb2ee44ed7cc947463a6f51cf6",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:47:42.215Z"
     }
   }
 ] %}

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

@@ -15,6 +15,12 @@
           "href": "/section/sub-section"
         }
       ]
+    },
+    "visualDescription": "Breadcrumb horizontal con dos elementos de texto enlazados separados por chevrones (>) grises. Fondo blanco con borde gris claro de 1px. Texto de los enlaces en negro, peso normal, tamaño mediano.",
+    "_generated": {
+      "hash": "263655ffb6c6b79a5a04025faedc11e5",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:47:48.885Z"
     }
   },
   {
@@ -28,6 +34,12 @@
           "href": "/section"
         }
       ]
+    },
+    "visualDescription": "Breadcrumb horizontal con un único elemento de texto enlazado. Fondo blanco con borde gris claro de 1px. Texto del enlace en negro, peso normal, tamaño mediano, sin separadores visibles.",
+    "_generated": {
+      "hash": "08d53ca0d879cb2357b5cbbbeaa13872",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:47:48.886Z"
     }
   },
   {
@@ -53,6 +65,12 @@
           "href": "/section/sub-section/sub-sub-section"
         }
       ]
+    },
+    "visualDescription": "Breadcrumb horizontal con cuatro elementos de texto enlazados separados por chevrones (>) grises. Fondo blanco con borde gris claro de 1px. Texto de todos los enlaces en negro, peso normal, tamaño mediano, distribuidos en línea horizontal.",
+    "_generated": {
+      "hash": "39b9d3e459f0de411b495877c8bfdef7",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:47:48.886Z"
     }
   },
   {
@@ -73,6 +91,12 @@
           "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor"
         }
       ]
+    },
+    "visualDescription": "Breadcrumb horizontal con fondo blanco y borde gris claro. Contiene título negro en negrita a la izquierda, seguido de cuatro enlaces de texto negro separados por flechas grises (\">\"). Los enlaces ocupan toda la línea horizontal con espaciado uniforme entre elementos.",
+    "_generated": {
+      "hash": "45d9f543d50a54c5f621a4d82040e1d8",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:47:57.978Z"
     }
   },
   {
@@ -94,6 +118,12 @@
           "text": "Programa 1 Instalaciones de autoconsumo renovable en el sector servicios con o sin almacenamiento"
         }
       ]
+    },
+    "visualDescription": "Breadcrumb horizontal con fondo blanco y borde gris claro. Título negro en negrita ubicado arriba a la izquierda. Debajo se despliegan cinco enlaces de texto negro separados por flechas grises (\">\"), donde el último enlace aparece truncado con puntos suspensivos al final.",
+    "_generated": {
+      "hash": "61080da45a497dd45ef77ba525338446",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:47:57.978Z"
     }
   },
   {
@@ -118,6 +148,12 @@
           "href": "/section/sub-section/sub-sub-section"
         }
       ]
+    },
+    "visualDescription": "Breadcrumb horizontal con fondo blanco y borde gris claro. Título negro en negrita en la parte superior. Ruta de navegación compuesta por cinco elementos de texto negro separados por flechas grises (\">\"), todos con peso de fuente normal y alineación horizontal consistente.",
+    "_generated": {
+      "hash": "b7f7b6a73b7e10fccc7170630bab9a75",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:47:57.978Z"
     }
   },
   {
@@ -139,6 +175,12 @@
           "href": "/tramites/tema/vivienda"
         }
       ]
+    },
+    "visualDescription": "Breadcrumb horizontal con fondo blanco y borde gris claro de 1px. Contiene enlaces en texto negro estándar separados por flechas \">\" en gris, donde el último elemento aparece en texto negro en negrita subrayado indicando que es interactivo. Espaciado uniforme entre elementos con padding interno visible.",
+    "_generated": {
+      "hash": "6f1a73d15ad323f5a10596b2f63513aa",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:48:06.684Z"
     }
   },
   {
@@ -159,6 +201,12 @@
           "text": "Vivienda"
         }
       ]
+    },
+    "visualDescription": "Breadcrumb horizontal con fondo blanco y borde gris claro de 1px. Muestra enlaces en texto negro estándar separados por separadores de flecha \">\" en gris, donde el último elemento aparece en texto negro en negrita sin subrayado. Espaciado consistente entre todos los elementos con padding interno.",
+    "_generated": {
+      "hash": "e8ffc80c6b39f1ecc1f5ee2b3fefab0b",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:48:06.684Z"
     }
   },
   {
@@ -180,6 +228,12 @@
           "href": "/tramites/tema/vivienda"
         }
       ]
+    },
+    "visualDescription": "Breadcrumb horizontal con fondo blanco y borde gris claro de 1px. Presenta enlaces en texto negro estándar separados por flechas \">\" en gris, con el último elemento en texto negro en negrita. Diseño compacto optimizado para pantallas pequeñas con espaciado reducido entre elementos.",
+    "_generated": {
+      "hash": "f8acd4710a7a58c858701727a35657f6",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:48:06.684Z"
     }
   },
   {
@@ -221,6 +275,12 @@
           "href": "/"
         }
       ]
+    },
+    "visualDescription": "Breadcrumb horizontal con fondo blanco y borde gris claro de 1px. Los enlaces de navegación aparecen en color azul oscuro separados por chevrons (>) grises, con el último elemento en texto negro negrita. Padding interno visible alrededor del contenido.",
+    "_generated": {
+      "hash": "9ab9439cc027e45ed2054524908b0b9c",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:48:14.775Z"
     }
   },
   {
@@ -262,6 +322,12 @@
           "href": "/"
         }
       ]
+    },
+    "visualDescription": "Breadcrumb horizontal con fondo gris muy claro y borde gris medio de 1px. Los enlaces de navegación aparecen en color azul estándar separados por chevrons (>) grises, con el último elemento en texto negro regular. Incluye dos líneas de navegación, la segunda con texto negro regular de menor tamaño.",
+    "_generated": {
+      "hash": "5cd4a25fb457c0e88320829a87b21bb6",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:48:14.775Z"
     }
   },
   {
@@ -304,6 +370,12 @@
           "href": "/"
         }
       ]
+    },
+    "visualDescription": "Breadcrumb horizontal con fondo blanco y borde gris claro de 1px. Los enlaces de navegación aparecen en color azul oscuro separados por chevrons (>) grises, con el último elemento en texto negro negrita. Padding interno uniforme alrededor del contenido de navegación.",
+    "_generated": {
+      "hash": "f3ebeb0b91756157255946694a49dadb",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:48:14.775Z"
     }
   },
   {
@@ -323,6 +395,12 @@
           "text": "Vivienda"
         }
       ]
+    },
+    "visualDescription": "Breadcrumb horizontal con fondo blanco y borde gris claro de 1px. Contiene flecha izquierda gris al inicio, seguida de enlaces de texto gris separados por chevrones grises. El último elemento de texto aparece en color negro indicando estado activo.",
+    "_generated": {
+      "hash": "a31f21cb10775df3165111da3f63078b",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:48:22.926Z"
     }
   },
   {
@@ -349,6 +427,12 @@
           "href": "/tramites/tema/vivienda/urbanismo"
         }
       ]
+    },
+    "visualDescription": "Breadcrumb horizontal con fondo blanco y borde gris claro de 1px. Incluye flecha izquierda gris al inicio, seguida de cuatro segmentos de texto gris separados por chevrones grises. El último segmento aparece en negro indicando estado activo.",
+    "_generated": {
+      "hash": "95fc96d5cc846d702e2497dc6892e5d1",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:48:22.926Z"
     }
   },
   {
@@ -370,6 +454,12 @@
           "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor"
         }
       ]
+    },
+    "visualDescription": "Breadcrumb horizontal con fondo blanco y borde gris claro de 1px. Presenta flecha izquierda gris seguida de tres segmentos de texto largo con puntos suspensivos, separados por chevrones grises. El último segmento aparece en negro con texto truncado terminando en \"M...\".",
+    "_generated": {
+      "hash": "69e31f343214d579f5e5a725025d87e5",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:48:22.926Z"
     }
   }
 ] %}

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

@@ -53,7 +53,7 @@ lg:grid-cols-(--grid-template-cols-max-content-8){% endif %}
   {% for item in params.items %}
     {% if item.href %}
     <li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black {% if loop.last %} flex-1 font-semibold{% endif %}">
-      <a class="underline focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black {%- if loop.last %} text-black font-semibold no-underline{% endif %} truncate" href="{{ item.href }}" {% if loop.last %} aria-current="page"{% endif %}{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+      <a class="{% if loop.last %}no-underline{% else %}underline{% endif %} focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black {%- if loop.last %} text-black font-semibold{% endif %} truncate" href="{{ item.href }}" {% if loop.last %} aria-current="page"{% endif %}{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
         {% if loop.last %}
         <strong>{{ item.html | filterquotes | safe if item.html else item.text }}</strong>
         {% else %}