desy-html 16.0.4 → 17.0.1

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

@@ -1,465 +1,465 @@
-{% set exampleComponent = "breadcrumbs" %}
-{% set examples =  [
-  {
-    "name": "por defecto",
-    "data": {
-      "inlineOnMobile": true,
-      "inlineOnDesktop": true,
-      "items": [
-        {
-          "text": "Sección",
-          "href": "/section"
-        },
-        {
-          "text": "Sub-sección",
-          "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"
-    }
-  },
-  {
-    "name": "con 1 sólo nivel",
-    "data": {
-      "inlineOnMobile": true,
-      "inlineOnDesktop": true,
-      "items": [
-        {
-          "text": "Sección",
-          "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"
-    }
-  },
-  {
-    "name": "con múltiples niveles",
-    "data": {
-      "inlineOnMobile": true,
-      "inlineOnDesktop": true,
-      "items": [
-        {
-          "text": "Inicio",
-          "href": "/"
-        },
-        {
-          "text": "Sección",
-          "href": "/section"
-        },
-        {
-          "text": "Sub-sección",
-          "href": "/section/sub-section"
-        },
-        {
-          "text": "Sub Sub-sección",
-          "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"
-    }
-  },
-  {
-    "name": "con cadenas muy largas",
-    "description": "Sólo si las migas de pan son informativas y no son enlaces, puedes prescindir de los parámetros <code>'inlineOnMobile':true</code> y <code>'inlineOnDesktop':true</code>. De esta forma, si los items no caben enteros, se truncan y ocupan el espacio de forma equitativa.",
-    "data": {
-      "items": [
-        {
-          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor"
-        },
-        {
-          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor"
-        },
-        {
-          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor"
-        },
-        {
-          "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"
-    }
-  },
-  {
-    "name": "Último item más largo y con truncado en cadenas largas",
-    "description": "Sólo si las migas de pan son informativas y no son enlaces, puedes prescindir de los parámetros <code>'inlineOnMobile':true</code> y <code>'inlineOnDesktop':true</code>. Usa la clase <code>.c-breadcrumbs--truncated</code> para hacer que los items se trunquen solo si tienen mucha anchura (mayor que <code>20rem</code>), como el penúltimo item de este ejemplo. Y que el último item ocupe el espacio restante, truncándose si es necesario, al final, si no le queda espacio suficiente.",
-    "data": {
-      "classes": "c-breadcrumbs--truncated",
-      "items": [
-        {
-          "text": "Inicio"
-        },
-        {
-          "text": "Actividades industriales y energía"
-        },
-        {
-          "text": "Ayudas ligadas al autoconsumo, almacenamiento y sistemas térmicos con fuentes de energía renovable renovables"
-        },
-        {
-          "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"
-    }
-  },
-  {
-    "name": "Item a mitad sin href",
-    "data": {
-      "inlineOnMobile": true,
-      "inlineOnDesktop": true,
-      "items": [
-        {
-          "text": "Inicio",
-          "href": "/"
-        },
-        {
-          "text": "Section"
-        },
-        {
-          "text": "Sub-sección",
-          "href": "/section/sub-section"
-        },
-        {
-          "text": "Sub Sub-sección",
-          "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"
-    }
-  },
-  {
-    "name": "con la última miga de pan como página actual con href",
-    "data": {
-      "inlineOnMobile": true,
-      "inlineOnDesktop": true,
-      "items": [
-        {
-          "text": "Inicio",
-          "href": "/"
-        },
-        {
-          "text": "Trámites por tema",
-          "href": "/tramites/tema"
-        },
-        {
-          "text": "Vivienda",
-          "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"
-    }
-  },
-  {
-    "name": "con la última miga de pan como página actual sin href",
-    "data": {
-      "inlineOnMobile": true,
-      "inlineOnDesktop": true,
-      "items": [
-        {
-          "text": "Inicio",
-          "href": "/"
-        },
-        {
-          "text": "Trámites por tema",
-          "href": "/tramites/tema"
-        },
-        {
-          "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"
-    }
-  },
-  {
-    "name": "con colapsar en móvil",
-    "description": "Mirar en anchuras pequeñas para ver cómo se colapsan los items intermedios y sólo se muestran el primero y último.",
-    "data": {
-      "collapseOnMobile": true,
-      "items": [
-        {
-          "text": "Inicio",
-          "href": "/"
-        },
-        {
-          "text": "Trámites por tema",
-          "href": "/tramites/tema"
-        },
-        {
-          "text": "Vivienda",
-          "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"
-    }
-  },
-  {
-    "name": "con inline en móvil",
-    "description": "Usa <code>'inlineOnMobile':true</code> para hacer que los elementos se pongan en linea en móvil en lugar de truncarse. Mirar en anchuras pequeñas para ver cómo se genera un salto de línea si el texto no cabe. Si se quiere también en desktop, usar el parámetro <code>inlineOnDesktop</code>. Ten cuidado con las cadenas largas en mobile: podrían desbordar el viewport, producir scroll horizontal y no cumplir accesibilidad.",
-    "data": {
-      "inlineOnMobile": true,
-      "items": [
-        {
-          "text": "Inicio",
-          "href": "/"
-        },
-        {
-          "text": "Trámites",
-          "href": "/"
-        },
-        {
-          "text": "Categorías de trámites",
-          "href": "/"
-        },
-        {
-          "text": "Actividades industriales y energía",
-          "href": "/"
-        },
-        {
-          "text": "Actividades industriales",
-          "href": "/"
-        },
-        {
-          "text": "Instalaciones industriales",
-          "href": "/"
-        },
-        {
-          "text": "Ayudas ligadas al autoconsumo",
-          "href": "/"
-        },
-        {
-          "text": "Programa 1 Instalaciones de autoconsumo",
-          "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"
-    }
-  },
-  {
-    "name": "con inline en desktop",
-    "description": "Usa <code>'inlineOnDesktop':true</code> para hacer que los elementos se pongan en linea en escritorio y anchuras superiores, en lugar de truncarse. Se genera un salto de línea si el texto no cabe en escritorio, no en mobile. Si se quiere también en mobile, usar el parámetro <code>inlineOnMobile</code>.",
-    "data": {
-      "inlineOnDesktop": true,
-      "items": [
-        {
-          "text": "Inicio",
-          "href": "/"
-        },
-        {
-          "text": "Trámites",
-          "href": "/"
-        },
-        {
-          "text": "Categorías de trámites",
-          "href": "/"
-        },
-        {
-          "text": "Actividades industriales y energía",
-          "href": "/"
-        },
-        {
-          "text": "Actividades industriales",
-          "href": "/"
-        },
-        {
-          "text": "Instalaciones industriales",
-          "href": "/"
-        },
-        {
-          "text": "Ayudas ligadas al autoconsumo, almacenamiento y sistemas térmicos con fuentes de energía renovable renovables",
-          "href": "/"
-        },
-        {
-          "text": "Programa 1 Instalaciones de autoconsumo renovable en el sector servicios con o sin almacenamiento",
-          "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"
-    }
-  },
-  {
-    "name": "con inline en mobile y en desktop",
-    "description": "Usa <code>'inlineOnMobile':true</code> y <code>'inlineOnDesktop':true</code> para hacer que los elementos se pongan en linea en todas las anchuras. Se genera un salto de línea si el texto no cabe en escritorio y en mobile. Ten cuidado con las cadenas largas en mobile: podrían desbordar el viewport, producir scroll horizontal y no cumplir accesibilidad.",
-    "data": {
-      "inlineOnMobile": true,
-      "inlineOnDesktop": true,
-      "items": [
-        {
-          "text": "Inicio",
-          "href": "/"
-        },
-        {
-          "text": "Trámites",
-          "href": "/"
-        },
-        {
-          "text": "Categorías de trámites",
-          "href": "/"
-        },
-        {
-          "text": "Actividades industriales y energía",
-          "href": "/"
-        },
-        {
-          "text": "Actividades industriales",
-          "href": "/"
-        },
-        {
-          "text": "Instalaciones industriales",
-          "href": "/"
-        },
-        {
-          "text": "Ayudas ligadas al autoconsumo",
-          "href": "/"
-        },
-        {
-          "text": "Programa 1 Instalaciones de autoconsumo",
-          "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"
-    }
-  },
-  {
-    "name": "con botón atrás",
-    "data": {
-      "hasBackButton": true,
-      "items": [
-        {
-          "text": "Inicio",
-          "href": "/"
-        },
-        {
-          "text": "Trámites por tema",
-          "href": "/tramites/tema"
-        },
-        {
-          "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"
-    }
-  },
-  {
-    "name": "con botón atrás y colapsar en móvil",
-    "description": "Mirar en anchuras pequeñas para ver cómo se colapsan los items intermedios y sólo se muestran el primero y último.",
-    "data": {
-      "collapseOnMobile": true,
-      "hasBackButton": true,
-      "items": [
-        {
-          "text": "Inicio",
-          "href": "/"
-        },
-        {
-          "text": "Trámites por tema",
-          "href": "/tramites/tema"
-        },
-        {
-          "text": "Vivienda",
-          "href": "/tramites/tema/vivienda"
-        },
-        {
-          "text": "Urbanismo",
-          "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"
-    }
-  },
-  {
-    "name": "con botón atrás y la clase modificadora para truncar texto",
-    "data": {
-      "hasBackButton": true,
-      "classes": "c-breadcrumbs--truncated",
-      "items": [
-        {
-          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor"
-        },
-        {
-          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor"
-        },
-        {
-          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor"
-        },
-        {
-          "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"
-    }
-  }
+{% set exampleComponent = "breadcrumbs" %}
+{% set examples =  [
+  {
+    "name": "por defecto",
+    "data": {
+      "inlineOnMobile": true,
+      "inlineOnDesktop": true,
+      "items": [
+        {
+          "text": "Sección",
+          "href": "/section"
+        },
+        {
+          "text": "Sub-sección",
+          "href": "/section/sub-section"
+        }
+      ]
+    },
+    "visualDescription": "Breadcrumb horizontal con dos elementos de texto enlazados separados por chevrones (>) grises. 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"
+    }
+  },
+  {
+    "name": "con 1 sólo nivel",
+    "data": {
+      "inlineOnMobile": true,
+      "inlineOnDesktop": true,
+      "items": [
+        {
+          "text": "Sección",
+          "href": "/section"
+        }
+      ]
+    },
+    "visualDescription": "Breadcrumb horizontal con un único elemento de texto enlazado. 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"
+    }
+  },
+  {
+    "name": "con múltiples niveles",
+    "data": {
+      "inlineOnMobile": true,
+      "inlineOnDesktop": true,
+      "items": [
+        {
+          "text": "Inicio",
+          "href": "/"
+        },
+        {
+          "text": "Sección",
+          "href": "/section"
+        },
+        {
+          "text": "Sub-sección",
+          "href": "/section/sub-section"
+        },
+        {
+          "text": "Sub Sub-sección",
+          "href": "/section/sub-section/sub-sub-section"
+        }
+      ]
+    },
+    "visualDescription": "Breadcrumb horizontal con varios elementos de texto enlazados separados por chevrones (>) grises. 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"
+    }
+  },
+  {
+    "name": "con cadenas muy largas",
+    "description": "Sólo si las migas de pan son informativas y no son enlaces, puedes prescindir de los parámetros <code>'inlineOnMobile':true</code> y <code>'inlineOnDesktop':true</code>. De esta forma, si los items no caben enteros, se truncan y ocupan el espacio de forma equitativa.",
+    "data": {
+      "items": [
+        {
+          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor"
+        },
+        {
+          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor"
+        },
+        {
+          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor"
+        },
+        {
+          "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. Contiene título negro en negrita a la izquierda, seguido de varios 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"
+    }
+  },
+  {
+    "name": "Último item más largo y con truncado en cadenas largas",
+    "description": "Sólo si las migas de pan son informativas y no son enlaces, puedes prescindir de los parámetros <code>'inlineOnMobile':true</code> y <code>'inlineOnDesktop':true</code>. Usa la clase <code>.c-breadcrumbs--truncated</code> para hacer que los items se trunquen solo si tienen mucha anchura (mayor que <code>20rem</code>), como el penúltimo item de este ejemplo. Y que el último item ocupe el espacio restante, truncándose si es necesario, al final, si no le queda espacio suficiente.",
+    "data": {
+      "classes": "c-breadcrumbs--truncated",
+      "items": [
+        {
+          "text": "Inicio"
+        },
+        {
+          "text": "Actividades industriales y energía"
+        },
+        {
+          "text": "Ayudas ligadas al autoconsumo, almacenamiento y sistemas térmicos con fuentes de energía renovable renovables"
+        },
+        {
+          "text": "Programa 1 Instalaciones de autoconsumo renovable en el sector servicios con o sin almacenamiento"
+        }
+      ]
+    },
+    "visualDescription": "Breadcrumb horizontal. Título negro en negrita ubicado arriba a la izquierda. Debajo se despliegan varios 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"
+    }
+  },
+  {
+    "name": "Item a mitad sin href",
+    "data": {
+      "inlineOnMobile": true,
+      "inlineOnDesktop": true,
+      "items": [
+        {
+          "text": "Inicio",
+          "href": "/"
+        },
+        {
+          "text": "Section"
+        },
+        {
+          "text": "Sub-sección",
+          "href": "/section/sub-section"
+        },
+        {
+          "text": "Sub Sub-sección",
+          "href": "/section/sub-section/sub-sub-section"
+        }
+      ]
+    },
+    "visualDescription": "Breadcrumb horizontal. Título negro en negrita en la parte superior. Ruta de navegación compuesta por varios 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"
+    }
+  },
+  {
+    "name": "con la última miga de pan como página actual con href",
+    "data": {
+      "inlineOnMobile": true,
+      "inlineOnDesktop": true,
+      "items": [
+        {
+          "text": "Inicio",
+          "href": "/"
+        },
+        {
+          "text": "Trámites por tema",
+          "href": "/tramites/tema"
+        },
+        {
+          "text": "Vivienda",
+          "href": "/tramites/tema/vivienda"
+        }
+      ]
+    },
+    "visualDescription": "Breadcrumb horizontal. 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"
+    }
+  },
+  {
+    "name": "con la última miga de pan como página actual sin href",
+    "data": {
+      "inlineOnMobile": true,
+      "inlineOnDesktop": true,
+      "items": [
+        {
+          "text": "Inicio",
+          "href": "/"
+        },
+        {
+          "text": "Trámites por tema",
+          "href": "/tramites/tema"
+        },
+        {
+          "text": "Vivienda"
+        }
+      ]
+    },
+    "visualDescription": "Breadcrumb horizontal. 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"
+    }
+  },
+  {
+    "name": "con colapsar en móvil",
+    "description": "Mirar en anchuras pequeñas para ver cómo se colapsan los items intermedios y sólo se muestran el primero y último.",
+    "data": {
+      "collapseOnMobile": true,
+      "items": [
+        {
+          "text": "Inicio",
+          "href": "/"
+        },
+        {
+          "text": "Trámites por tema",
+          "href": "/tramites/tema"
+        },
+        {
+          "text": "Vivienda",
+          "href": "/tramites/tema/vivienda"
+        }
+      ]
+    },
+    "visualDescription": "Breadcrumb horizontal. 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"
+    }
+  },
+  {
+    "name": "con inline en móvil",
+    "description": "Usa <code>'inlineOnMobile':true</code> para hacer que los elementos se pongan en linea en móvil en lugar de truncarse. Mirar en anchuras pequeñas para ver cómo se genera un salto de línea si el texto no cabe. Si se quiere también en desktop, usar el parámetro <code>inlineOnDesktop</code>. Ten cuidado con las cadenas largas en mobile: podrían desbordar el viewport, producir scroll horizontal y no cumplir accesibilidad.",
+    "data": {
+      "inlineOnMobile": true,
+      "items": [
+        {
+          "text": "Inicio",
+          "href": "/"
+        },
+        {
+          "text": "Trámites",
+          "href": "/"
+        },
+        {
+          "text": "Categorías de trámites",
+          "href": "/"
+        },
+        {
+          "text": "Actividades industriales y energía",
+          "href": "/"
+        },
+        {
+          "text": "Actividades industriales",
+          "href": "/"
+        },
+        {
+          "text": "Instalaciones industriales",
+          "href": "/"
+        },
+        {
+          "text": "Ayudas ligadas al autoconsumo",
+          "href": "/"
+        },
+        {
+          "text": "Programa 1 Instalaciones de autoconsumo",
+          "href": "/"
+        }
+      ]
+    },
+    "visualDescription": "Breadcrumb horizontal. 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"
+    }
+  },
+  {
+    "name": "con inline en desktop",
+    "description": "Usa <code>'inlineOnDesktop':true</code> para hacer que los elementos se pongan en linea en escritorio y anchuras superiores, en lugar de truncarse. Se genera un salto de línea si el texto no cabe en escritorio, no en mobile. Si se quiere también en mobile, usar el parámetro <code>inlineOnMobile</code>.",
+    "data": {
+      "inlineOnDesktop": true,
+      "items": [
+        {
+          "text": "Inicio",
+          "href": "/"
+        },
+        {
+          "text": "Trámites",
+          "href": "/"
+        },
+        {
+          "text": "Categorías de trámites",
+          "href": "/"
+        },
+        {
+          "text": "Actividades industriales y energía",
+          "href": "/"
+        },
+        {
+          "text": "Actividades industriales",
+          "href": "/"
+        },
+        {
+          "text": "Instalaciones industriales",
+          "href": "/"
+        },
+        {
+          "text": "Ayudas ligadas al autoconsumo, almacenamiento y sistemas térmicos con fuentes de energía renovable renovables",
+          "href": "/"
+        },
+        {
+          "text": "Programa 1 Instalaciones de autoconsumo renovable en el sector servicios con o sin almacenamiento",
+          "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"
+    }
+  },
+  {
+    "name": "con inline en mobile y en desktop",
+    "description": "Usa <code>'inlineOnMobile':true</code> y <code>'inlineOnDesktop':true</code> para hacer que los elementos se pongan en linea en todas las anchuras. Se genera un salto de línea si el texto no cabe en escritorio y en mobile. Ten cuidado con las cadenas largas en mobile: podrían desbordar el viewport, producir scroll horizontal y no cumplir accesibilidad.",
+    "data": {
+      "inlineOnMobile": true,
+      "inlineOnDesktop": true,
+      "items": [
+        {
+          "text": "Inicio",
+          "href": "/"
+        },
+        {
+          "text": "Trámites",
+          "href": "/"
+        },
+        {
+          "text": "Categorías de trámites",
+          "href": "/"
+        },
+        {
+          "text": "Actividades industriales y energía",
+          "href": "/"
+        },
+        {
+          "text": "Actividades industriales",
+          "href": "/"
+        },
+        {
+          "text": "Instalaciones industriales",
+          "href": "/"
+        },
+        {
+          "text": "Ayudas ligadas al autoconsumo",
+          "href": "/"
+        },
+        {
+          "text": "Programa 1 Instalaciones de autoconsumo",
+          "href": "/"
+        }
+      ]
+    },
+    "visualDescription": "Breadcrumb horizontal. 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"
+    }
+  },
+  {
+    "name": "con botón atrás",
+    "data": {
+      "hasBackButton": true,
+      "items": [
+        {
+          "text": "Inicio",
+          "href": "/"
+        },
+        {
+          "text": "Trámites por tema",
+          "href": "/tramites/tema"
+        },
+        {
+          "text": "Vivienda"
+        }
+      ]
+    },
+    "visualDescription": "Breadcrumb horizontal. 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"
+    }
+  },
+  {
+    "name": "con botón atrás y colapsar en móvil",
+    "description": "Mirar en anchuras pequeñas para ver cómo se colapsan los items intermedios y sólo se muestran el primero y último.",
+    "data": {
+      "collapseOnMobile": true,
+      "hasBackButton": true,
+      "items": [
+        {
+          "text": "Inicio",
+          "href": "/"
+        },
+        {
+          "text": "Trámites por tema",
+          "href": "/tramites/tema"
+        },
+        {
+          "text": "Vivienda",
+          "href": "/tramites/tema/vivienda"
+        },
+        {
+          "text": "Urbanismo",
+          "href": "/tramites/tema/vivienda/urbanismo"
+        }
+      ]
+    },
+    "visualDescription": "Breadcrumb horizontal. 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"
+    }
+  },
+  {
+    "name": "con botón atrás y la clase modificadora para truncar texto",
+    "data": {
+      "hasBackButton": true,
+      "classes": "c-breadcrumbs--truncated",
+      "items": [
+        {
+          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor"
+        },
+        {
+          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor"
+        },
+        {
+          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor"
+        },
+        {
+          "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. 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"
+    }
+  }
 ] %}