desy-html 16.0.4 → 17.0.0

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

@@ -1,628 +1,628 @@
-{% from "components/nav/_macro.nav.njk" import componentNav %}
-{% from "components/details/_macro.details.njk" import componentDetails %}
-{% from "components/menu-navigation/_macro.menu-navigation.njk" import componentMenuNavigation %}
-
-{% set navigationCustom %}
-
-  {{ componentMenuNavigation({
-    "idPrefix": "header-custom-nav",
-    "classes": "c-menu-navigation--last-right hidden lg:block w-full bg-neutral-lighter ",
-    "items": [
-      {
-        "text": "Custom Item 1",
-        "id": "header-custom-nav-item-1",
-        "classes": "c-menu-navigation__button--header -mr-base",
-        "sub": {
-          "items": [
-            {
-              "href": "#",
-              "text": "Subitem 1"
-            },
-            {
-              "href": "#",
-              "text": "Subitem 2"
-            },
-            {
-              "href": "#",
-              "text": "Subitem 3"
-            }
-          ],
-          "attributes": {
-            "aria-labelledby": "header-custom-nav-item-1"
-          }
-        }
-      },
-      {
-        "text": "Custom Active Item 2",
-        "id": "header-custom-nav-item-2",
-        "classes": "c-menu-navigation__button--header -mr-base",
-        "active": true,
-        "sub": {
-          "items": [
-            {
-              "href": "#",
-              "text": "Subitem 1"
-            },
-            {
-              "href": "#",
-              "text": "Subitem 2",
-              "active": true
-            },
-            {
-              "href": "#",
-              "text": "Subitem 3"
-            }
-          ],
-          "attributes": {
-            "aria-labelledby": "header-custom-nav-item-2"
-          }
-        }
-      },
-      {
-        "text": "Custom Item 3",
-        "id": "header-custom-nav-item-3",
-        "classes": "c-menu-navigation__button--header -mr-base",
-        "sub": {
-          "items": [
-            {
-              "href": "#",
-              "text": "Subitem 1"
-            },
-            {
-              "href": "#",
-              "text": "Subitem 2"
-            },
-            {
-              "href": "#",
-              "text": "Subitem 3"
-            }
-          ],
-          "attributes": {
-            "aria-labelledby": "header-custom-nav-item-3"
-          }
-        }
-      },
-      {
-          "text": "Item 4 right",
-          "id": "header-custom-nav-item-4",
-          "classes": "c-menu-navigation__button--header",
-          "sub": {
-            "items": [
-              {
-                "href": "#",
-                "text": "Subitem 1"
-              },
-              {
-                "href": "#",
-                "text": "Subitem 2"
-              },
-              {
-                "href": "#",
-                "text": "Subitem 3"
-              }
-            ],
-            "attributes": {
-              "aria-labelledby": "header-custom-nav-item-4"
-            }
-          }
-        }
-    ],
-    "attributes": {
-      "aria-label": "Menú principal"
-    }
-  }) | indent(12)  }}
-{% endset %}
-
-{% set exampleOffcanvas %}
-
-  <nav class="w-full p-2" aria-label="Menú móvil">
-    <h3 class="p-base text-base font-bold">Gestor de expedientes</h3>
-    {{ componentNav({
-      "idPrefix": "nav-mobile-pages",
-      "hasNav": false,
-      "items": [
-        {
-          "href": "#",
-          "text": "Inicio",
-          "active": true
-        },
-        {
-          "href": "#",
-          "text": "Expedientes"
-        },
-        {
-          "href": "#",
-          "text": "Bandejas",
-          "divider": true
-        }
-      ],
-      "attributes": {
-        "aria-label": "Lista de páginas"
-      }
-    })  }}
-    <h3 class="p-base text-base font-bold">Usuario/a: Marta Pérez</h3>
-    {{ componentNav({
-      "idPrefix": "nav-mobile-user",
-      "hasNav": false,
-      "items": [
-        {
-          "href": "#",
-          "text": "Perfil"
-        },
-        {
-          "href": "#",
-          "text": "Cerrar sesión",
-          "divider": true
-        }
-      ],
-      "attributes": {
-        "aria-label": "Lista de acciones de usuario"
-      }
-    })  }}
-    {% call componentDetails({
-      "classes": "px-base",
-      "summary": {
-        "html": "Cambiar de aplicación",
-        "classes": "c-link text-sm"
-      }
-    })  %}
-        {{ componentNav({
-          "idPrefix": "nav-mobile-apps",
-          "hasNav": false,
-          "items": [
-            {
-              "href": "#",
-              "text": "Gestor de expedientes",
-              "active": true
-            },
-            {
-              "href": "#",
-              "text": "Catálogo de servicios"
-            },
-            {
-              "href": "#",
-              "text": "Bandeja de entrada"
-            },
-            {
-              "href": "#",
-              "text": "Sistema de comprobación y verificación de documentos por CSV"
-            }
-          ],
-          "attributes": {
-            "aria-label": "Lista de aplicaciones"
-          }
-        })  }}
-    {% endcall %}
-  </nav>
-{% endset %}
-
-{% set exampleComponent = "header" %}
-{% set examples =  [
-  {
-    "name": "por defecto",
-    "description": "El menú por defecto de las aplicaciones de la administración digital tiene un logo que enlaza a la página de inicio y un menu principal de navegación. El menu de navegación se oculta en mobile si no se añaden clases a navigation. El logotipo es simple, sin letras, si la app está diseñada para funcionarios. Junto al logo hay un texto que da nombre a la app en la que estamos. Puedes usar con javascript la función global <code>activateItemMenuNavigation(elementMenu, idItemSeleccionado)</code> para seleccionar un item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemMenuNavigation('header-nav-item', 'page-catalogo')</code> para desactivar el item actual y activar el tercer item del header de la página.",
-    "data": {
-      "homepageUrl": "/",
-      "idPrefix": "mi-menu",
-      "mobileTitle": {
-        "text": "Gestor de expedientes"
-      },
-      "subnav": {
-        "text": "Gestor de expedientes"
-      },
-      "navigation": {
-        "items": [
-          {
-            "href": "#1",
-            "text": "Navigation item 1"
-          },
-          {
-            "href": "#2",
-            "text": "Navigation item 2",
-            "active": true
-          },
-          {
-            "href": "#3",
-            "text": "Navigation item 3"
-          },
-          {
-            "href": "#4",
-            "text": "Navigation item 4"
-          }
-          ]
-      }
-    },
-    "visualDescription": "Header con fondo blanco y borde gris claro superior e inferior de 1px. Contiene logo naranja y blanco a la izquierda, seguido de botón y cuatro elementos de navegación en texto negro alineados horizontalmente. Altura aproximada de 60px con padding interno uniforme.",
-    "_generated": {
-      "hash": "01405e1bf8230584a63727acdf2547dc",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:00:01.750Z"
-    }
-  },
-  {
-    "name": "con navegación personalizada",
-    "description": "Tras nuestro menú de navegación tenemos <code>customNavigationHtml</code> una zona anidable para poder añadir una navegación personalizada.",
-    "data": {
-      "homepageUrl": "/",
-      "mobileTitle": {
-        "text": "Gestor de expedientes"
-      },
-      "subnav": {
-        "text": "Gestor de expedientes"
-      },
-      "customNavigationHtml": "<div class='flex flex-wrap flex-1 gap-base'>"+ navigationCustom | safe + "</div>"
-    },
-    "visualDescription": "Header con fondo blanco y borde gris claro de 1px en todos los lados. Logo naranja y blanco a la izquierda, botón, tres elementos de navegación personalizados en texto negro con desplegables, y un enlace alineado al extremo derecho. Altura de 60px con elementos distribuidos horizontalmente en el espacio disponible.",
-    "_generated": {
-      "hash": "2e11128b549b10794707f11260cdc1a2",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:00:01.750Z"
-    }
-  },
-  {
-    "name": "con navegación personalizada a la derecha",
-    "description": "En el <code>customNavigationHtml</code> podemos añadir elementos posicionados a la derecha.",
-    "data": {
-      "homepageUrl": "/",
-      "mobileTitle": {
-        "text": "Gestor de expedientes"
-      },
-      "subnav": {
-        "text": "Gestor de expedientes"
-      },
-      "customNavigationHtml": "<div class='relative flex justify-end items-center flex-1 gap-base'><div class='absolute -top-3 right-0 text-black'><a href='#'><svg class='w-5 h-5' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' aria-label='Notificaciones' role='img'><path d='M7.25 12.5h-1.5a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5Z' fill='currentColor' transform='scale(3.42857)'/><g transform='scale(3.42857)'><circle cx='10.5' cy='2.5' r='2.5' fill='currentColor'/><path d='M11.5 10a1 1 0 0 1-1-1V6.74a.25.25 0 0 0-.24-.25 4 4 0 0 1-3.76-4 3.43 3.43 0 0 1 .11-.86.12.12 0 0 0 0-.1.15.15 0 0 0-.09 0 4 4 0 0 0-4 4V9a1 1 0 0 1-1 1 .5.5 0 0 0 0 1h10a.5.5 0 0 0 0-1Z' fill='currentColor'/></g></svg></a></div></div>"
-    },
-    "visualDescription": "Header con fondo blanco y borde gris claro de 1px. Logo naranja y blanco y botón alineados a la izquierda, espacio vacío central amplio, e ícono de usuario negro circular alineado al extremo derecho. Altura de 60px con distribución espaciada entre elementos izquierdos y derecho.",
-    "_generated": {
-      "hash": "6e1f0aff88ec36d96c7baba14189aaeb",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:00:01.750Z"
-    }
-  },
-  {
-    "name": "con enlace de skipLink personalizado",
-    "description": "Pasando parámetros customizados al componente Skip Link. Útil para hacer plantillas de página con barra lateral o con un contenido principal localizado en otro sitio diferente al habitual.",
-    "data": {
-      "skipLink":{
-        "text": "Saltar al contenido central",
-        "href": "#content-center",
-        "classes": "ds-focus",
-        "attributes": {
-          "id": "skip-link",
-          "attr-example": "custom-data"
-        }
-      },
-      "homepageUrl": "/",
-      "mobileTitle": {
-        "text": "Gestor de expedientes"
-      },
-      "subnav": {
-        "text": "Gestor de expedientes"
-      },
-      "navigation": {
-        "items": [
-          {
-            "href": "#1",
-            "text": "Navigation item 1"
-          },
-          {
-            "href": "#2",
-            "text": "Navigation item 2",
-            "active": true
-          },
-          {
-            "href": "#3",
-            "text": "Navigation item 3"
-          },
-          {
-            "href": "#4",
-            "text": "Navigation item 4"
-          }
-          ]
-      }
-    },
-    "visualDescription": "Header con fondo naranja degradado que contiene un enlace skipLink con texto negro sobre fondo amarillo en la parte superior. Debajo hay una barra de navegación horizontal con logo de rayas naranjas a la izquierda, seguido de texto y cuatro elementos de navegación en texto negro, con uno resaltado en fondo naranja. Borde gris claro rodea todo el componente.",
-    "_generated": {
-      "hash": "1e6aa5d5c9a2be06315f07356ebeb622",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:00:12.296Z"
-    }
-  },
-  {
-    "name": "logo expandido",
-    "description": "Con el parámetro <code>'expandedLogo': true</code> se muestra el logo de la organización en formato expandido. Utilizar este logotipo en apps que estén dirigidas al ciudadano y también antes de hacer login en todas las apps.",
-    "data": {
-      "homepageUrl": "/",
-      "expandedLogo": true
-    },
-    "visualDescription": "Header con fondo blanco que muestra el logo con texto negro y rayas naranjas horizontales. El logo está alineado a la izquierda con espaciado generoso alrededor. Borde gris claro delimita el componente completo.",
-    "_generated": {
-      "hash": "faacceb2222cfa3cfad6763327e304e3",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:00:12.296Z"
-    }
-  },
-  {
-    "name": "con offcanvas",
-    "description": "Menu mobile que sólo se muestra en anchuras pequeñas y que permite insertar dentro cualquier contenido con Nunjuks caller.",
-    "data": {
-      "homepageUrl": "/",
-      "mobileTitle": {
-        "text": "Gestor de expedientes"
-      },
-      "subnav": {
-        "text": "Gestor de expedientes"
-      },
-      "offcanvas": {
-        "text": "Menú",
-        "textClose": "Cerrar menu",
-        "labelledId": "offcanvas-title"
-      },
-      "caller": exampleOffcanvas | indent(14)
-    },
-    "visualDescription": "Header con fondo blanco que presenta un logo de rayas naranjas horizontales a la izquierda, seguido de texto en negro. Layout horizontal simple con elementos alineados verticalmente al centro. Borde gris claro rodea el componente.",
-    "_generated": {
-      "hash": "5b6cdbe3aabe96265b26b5780c2a2c9e",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:00:12.296Z"
-    }
-  },
-  {
-    "name": "con offcanvas y mobileTitle",
-    "description": "Menu mobile que sólo se muestra en anchuras pequeñas y que permite insertar dentro cualquier contenido con Nunjuks caller y título que sólo se muestra en mobile.",
-    "data": {
-      "homepageUrl": "/",
-      "mobileTitle": {
-        "text": "Gestor de expedientes"
-      },
-      "mobileTitle": {
-        "text": "Gestor de expedientes"
-      },
-      "subnav": {
-        "text": "Gestor de expedientes"
-      },
-      "offcanvas": {
-        "text": "Menú",
-        "textClose": "Cerrar menu",
-        "labelledId": "offcanvas-title"
-      },
-      "caller": exampleOffcanvas | indent(14)
-    },
-    "visualDescription": "Header con fondo blanco y borde gris claro inferior. Contiene un ícono naranja apilado (tres líneas horizontales) a la izquierda y texto negro centrado verticalmente. Altura contenida con padding vertical moderado.",
-    "_generated": {
-      "hash": "1fe60db7c376d888ef669ad7a1d7a322",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:00:21.614Z"
-    }
-  },
-  {
-    "name": "con subnav text",
-    "description": "Utilizar para mostrar el nombre de la app actual. Si no se proporcionan items en subnav, el texto será simple sin un dropdown.",
-    "data": {
-      "homepageUrl": "/",
-      "mobileTitle": {
-        "text": "Gestor de expedientes"
-      },
-      "subnav": {
-        "text": "Gestor de expedientes"
-      }
-    },
-    "visualDescription": "Header con fondo blanco y borde gris claro inferior. Incluye ícono naranja apilado (tres líneas horizontales) a la izquierda seguido de texto negro. Barra de subnavegación integrada debajo con fondo gris muy claro ocupando ancho completo.",
-    "_generated": {
-      "hash": "9f9ef51cdd09a8015fc82090f7744101",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:00:21.614Z"
-    }
-  },
-  {
-    "name": "con subnav items",
-    "description": "Un dropdown junto al logo que ha de usarse para mostrar el nombre de la app en la que estamos y para navegar a otra app diferente. Usamos los items proporcionados para la navegación.",
-    "data": {
-      "homepageUrl": "/",
-      "mobileTitle": {
-        "text": "Gestor de expedientes"
-      },
-      "subnav": {
-        "text": "Gestor de expedientes",
-        "items": [
-          {
-            "href": "#",
-            "text": "Gestor de expedientes",
-            "active": true
-          },
-          {
-            "href": "#",
-            "text": "Catálogo de servicios"
-          },
-          {
-            "href": "#",
-            "text": "Bandeja de entrada"
-          },
-          {
-            "href": "#",
-            "text": "Sistema de comprobación y verificación de documentos por CSV"
-          }
-        ]
-      }
-    },
-    "visualDescription": "Header con fondo blanco y borde gris claro superior e inferior. Presenta ícono naranja apilado (tres líneas horizontales) seguido de texto negro con indicador dropdown (flecha hacia abajo). Sección de subnavegación con fondo gris muy claro debajo ocupando ancho total del contenedor.",
-    "_generated": {
-      "hash": "0d14edcc3c1f117d599bcccfd817e9b1",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:00:21.614Z"
-    }
-  },
-  {
-    "name": "con dropdown",
-    "description": "Un dropdown a la derecha que puede usarse para mostrar información adicional, normalmante relativa a la cuenta de usuario, como: Perfil y Cerrar sesión. Se oculta por defecto en anchuras pequeñas si no se le añaden clases a dropdown.",
-    "data": {
-      "homepageUrl": "/",
-      "mobileTitle": {
-        "text": "Gestor de expedientes"
-      },
-      "dropdown": {
-        "text": "Marta Pérez",
-        "items": [
-          {
-          "text": "Perfil",
-          "href": "/"
-          },
-          {
-          "text": "Cerrar sesión",
-          "href": "/"
-          }
-        ]
-      }
-    },
-    "visualDescription": "Header con fondo blanco y borde gris claro inferior de 1px. Contiene logo naranja alineado a la izquierda y texto negro con tamaño mediano alineado a la derecha seguido de un icono de flecha dropdown. Altura aproximada de 60px con espaciado interno horizontal generoso.",
-    "_generated": {
-      "hash": "606d8ca884c7df3af7ae08a6260a24ea",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:00:30.831Z"
-    }
-  },
-  {
-    "name": "con dropdown personalizado",
-    "description": "Se pueden usar los parámetros del dropdown para personalizarlo. En este ejemplo con HTML en el dropdown.",
-    "data": {
-      "homepageUrl": "/",
-      "mobileTitle": {
-        "text": "Gestor de expedientes"
-      },
-      "dropdown": {
-        "html": "<span class='block text-right'><span class='block'>Marta Pérez</span> <span class='block'>(Administración)</span></span>",
-        "items": [
-          {
-          "text": "Perfil",
-          "href": "/"
-          },
-          {
-          "text": "Cerrar sesión",
-          "href": "/"
-          }
-        ],
-        "classesTooltip": "min-w-auto!"
-      }
-    },
-    "visualDescription": "Header con fondo gris muy claro y borde gris medio de 1px en todo el perímetro. Logo naranja posicionado a la izquierda, texto negro en peso normal alineado a la derecha con subtexto gris pequeño debajo. Altura de 80px con espaciado vertical amplio.",
-    "_generated": {
-      "hash": "c42524f8850ff38403298c688bdfc51c",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:00:30.831Z"
-    }
-  },
-  {
-    "name": "con contenido personalizado en dropdown",
-    "description": "El dropdown puede contener cualquier tipo de información.",
-    "data": {
-      "homepageUrl": "/",
-      "mobileTitle": {
-        "text": "Gestor de expedientes"
-      },
-      "dropdown": {
-        "text": "Marta Pérez",
-        "contentHtml": "<div class='p-base'><dl><dt class='text-base'>Marta Pérez</dt><dd class='text-sm text-neutral-dark'>Departamento de Ciencia, Universidad y Sociedad del Conocimiento</dd></dl></div>",
-        "classesTooltip": "w-64! max-h-48! overflow-y-auto",
-        "attributes": {
-          "data-aria-haspopup": "dialog",
-          "data-role": "dialog",
-          "data-aria-modal": "false",
-          "data-aria-label": "Información adicional"
-        }
-      }
-    },
-    "visualDescription": "Header con fondo blanco y borde gris claro inferior de 1px. Logo naranja ubicado a la izquierda, texto negro de tamaño mediano con icono de flecha alineado a la derecha. Altura de 60px con distribución de elementos similar al espaciado horizontal estándar entre componentes.",
-    "_generated": {
-      "hash": "b749cb9949e7e485e513c6403f4f4f7a",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:00:30.831Z"
-    }
-  },
-  {
-    "name": "con todo",
-    "description": "Logo, menu de navegación, dropdown en anchuras grandes y menu mobile en pequeñas.",
-    "data": {
-      "homepageUrl": "/",
-      "mobileTitle": {
-        "text": "Gestor de expedientes"
-      },
-      "subnav": {
-        "text": "Gestor de expedientes",
-        "items": [
-          {
-            "href": "#",
-            "text": "Gestor de expedientes",
-            "active": true
-          },
-          {
-            "href": "#",
-            "text": "Catálogo de servicios"
-          },
-          {
-            "href": "#",
-            "text": "Bandeja de entrada"
-          },
-          {
-            "href": "#",
-            "text": "Sistema de comprobación y verificación de documentos por CSV"
-          }
-        ]
-      },
-      "navigation": {
-        "items": [
-          {
-            "href": "#1",
-            "text": "Navigation item 1"
-          },
-          {
-            "href": "#2",
-            "text": "Navigation item 2",
-            "active": true
-          },
-          {
-            "href": "#3",
-            "text": "Navigation item 3"
-          }
-          ]
-      },
-      "dropdown": {
-        "text": "Marta Pérez",
-        "items": [
-          {
-          "text": "Perfil",
-          "href": "/"
-          },
-          {
-          "text": "Cerrar sesión",
-          "href": "/"
-          }
-        ]
-      },
-      "offcanvas": {
-        "text": "Menú",
-        "textClose": "Cerrar menu"
-      },
-      "caller": exampleOffcanvas | indent(14)
-    },
-    "visualDescription": "Header con fondo blanco que incluye un logo naranja a la izquierda (icono de barras horizontales), seguido de un desplegable con texto negro, tres enlaces de navegación en texto negro, y texto negro alineado a la derecha. Altura aproximada de 50-60px con elementos distribuidos horizontalmente en línea.",
-    "_generated": {
-      "hash": "11766b0ba3b6a60e599cab8530223ffe",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:00:40.456Z"
-    }
-  },
-  {
-    "name": "email template example",
-    "description": "Ejemplo de uso en platilla de email por defecto. Sólo con logo expandido.",
-    "data": {
-      "homepageUrl": "https://www.aragon.es/",
-      "expandedLogo": true
-    },
-    "visualDescription": "Header con fondo gris claro que contiene únicamente el logo alineado a la izquierda, compuesto por barras horizontales naranjas y texto negro en dos líneas. Altura aproximada de 60-70px con padding vertical generoso, diseño minimalista sin navegación ni elementos adicionales.",
-    "_generated": {
-      "hash": "a0d46309014690fa19b5d2ce3fae78d0",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:00:40.456Z"
-    }
-  }
+{% from "components/nav/_macro.nav.njk" import componentNav %}
+{% from "components/details/_macro.details.njk" import componentDetails %}
+{% from "components/menu-navigation/_macro.menu-navigation.njk" import componentMenuNavigation %}
+
+{% set navigationCustom %}
+
+  {{ componentMenuNavigation({
+    "idPrefix": "header-custom-nav",
+    "classes": "c-menu-navigation--last-right hidden lg:block w-full bg-neutral-lighter ",
+    "items": [
+      {
+        "text": "Custom Item 1",
+        "id": "header-custom-nav-item-1",
+        "classes": "c-menu-navigation__button--header -mr-base",
+        "sub": {
+          "items": [
+            {
+              "href": "#",
+              "text": "Subitem 1"
+            },
+            {
+              "href": "#",
+              "text": "Subitem 2"
+            },
+            {
+              "href": "#",
+              "text": "Subitem 3"
+            }
+          ],
+          "attributes": {
+            "aria-labelledby": "header-custom-nav-item-1"
+          }
+        }
+      },
+      {
+        "text": "Custom Active Item 2",
+        "id": "header-custom-nav-item-2",
+        "classes": "c-menu-navigation__button--header -mr-base",
+        "active": true,
+        "sub": {
+          "items": [
+            {
+              "href": "#",
+              "text": "Subitem 1"
+            },
+            {
+              "href": "#",
+              "text": "Subitem 2",
+              "active": true
+            },
+            {
+              "href": "#",
+              "text": "Subitem 3"
+            }
+          ],
+          "attributes": {
+            "aria-labelledby": "header-custom-nav-item-2"
+          }
+        }
+      },
+      {
+        "text": "Custom Item 3",
+        "id": "header-custom-nav-item-3",
+        "classes": "c-menu-navigation__button--header -mr-base",
+        "sub": {
+          "items": [
+            {
+              "href": "#",
+              "text": "Subitem 1"
+            },
+            {
+              "href": "#",
+              "text": "Subitem 2"
+            },
+            {
+              "href": "#",
+              "text": "Subitem 3"
+            }
+          ],
+          "attributes": {
+            "aria-labelledby": "header-custom-nav-item-3"
+          }
+        }
+      },
+      {
+          "text": "Item 4 right",
+          "id": "header-custom-nav-item-4",
+          "classes": "c-menu-navigation__button--header",
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem 1"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 2"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "header-custom-nav-item-4"
+            }
+          }
+        }
+    ],
+    "attributes": {
+      "aria-label": "Menú principal"
+    }
+  }) | indent(12)  }}
+{% endset %}
+
+{% set exampleOffcanvas %}
+
+  <nav class="w-full p-2" aria-label="Menú móvil">
+    <h3 class="p-base text-base font-bold">Gestor de expedientes</h3>
+    {{ componentNav({
+      "idPrefix": "nav-mobile-pages",
+      "hasNav": false,
+      "items": [
+        {
+          "href": "#",
+          "text": "Inicio",
+          "active": true
+        },
+        {
+          "href": "#",
+          "text": "Expedientes"
+        },
+        {
+          "href": "#",
+          "text": "Bandejas",
+          "divider": true
+        }
+      ],
+      "attributes": {
+        "aria-label": "Lista de páginas"
+      }
+    })  }}
+    <h3 class="p-base text-base font-bold">Usuario/a: Marta Pérez</h3>
+    {{ componentNav({
+      "idPrefix": "nav-mobile-user",
+      "hasNav": false,
+      "items": [
+        {
+          "href": "#",
+          "text": "Perfil"
+        },
+        {
+          "href": "#",
+          "text": "Cerrar sesión",
+          "divider": true
+        }
+      ],
+      "attributes": {
+        "aria-label": "Lista de acciones de usuario"
+      }
+    })  }}
+    {% call componentDetails({
+      "classes": "px-base",
+      "summary": {
+        "html": "Cambiar de aplicación",
+        "classes": "c-link text-sm"
+      }
+    })  %}
+        {{ componentNav({
+          "idPrefix": "nav-mobile-apps",
+          "hasNav": false,
+          "items": [
+            {
+              "href": "#",
+              "text": "Gestor de expedientes",
+              "active": true
+            },
+            {
+              "href": "#",
+              "text": "Catálogo de servicios"
+            },
+            {
+              "href": "#",
+              "text": "Bandeja de entrada"
+            },
+            {
+              "href": "#",
+              "text": "Sistema de comprobación y verificación de documentos por CSV"
+            }
+          ],
+          "attributes": {
+            "aria-label": "Lista de aplicaciones"
+          }
+        })  }}
+    {% endcall %}
+  </nav>
+{% endset %}
+
+{% set exampleComponent = "header" %}
+{% set examples =  [
+  {
+    "name": "por defecto",
+    "description": "El menú por defecto de las aplicaciones de la administración digital tiene un logo que enlaza a la página de inicio y un menu principal de navegación. El menu de navegación se oculta en mobile si no se añaden clases a navigation. El logotipo es simple, sin letras, si la app está diseñada para funcionarios. Junto al logo hay un texto que da nombre a la app en la que estamos. Puedes usar con javascript la función global <code>activateItemMenuNavigation(elementMenu, idItemSeleccionado)</code> para seleccionar un item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemMenuNavigation('header-nav-item', 'page-catalogo')</code> para desactivar el item actual y activar el tercer item del header de la página.",
+    "data": {
+      "homepageUrl": "/",
+      "idPrefix": "mi-menu",
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
+      "subnav": {
+        "text": "Gestor de expedientes"
+      },
+      "navigation": {
+        "items": [
+          {
+            "href": "#1",
+            "text": "Navigation item 1"
+          },
+          {
+            "href": "#2",
+            "text": "Navigation item 2",
+            "active": true
+          },
+          {
+            "href": "#3",
+            "text": "Navigation item 3"
+          },
+          {
+            "href": "#4",
+            "text": "Navigation item 4"
+          }
+          ]
+      }
+    },
+    "visualDescription": "Header con fondo blanco y borde gris claro superior e inferior de 1px. Contiene logo naranja y blanco a la izquierda, seguido de botón y cuatro elementos de navegación en texto negro alineados horizontalmente. Altura aproximada de 60px con padding interno uniforme.",
+    "_generated": {
+      "hash": "01405e1bf8230584a63727acdf2547dc",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:00:01.750Z"
+    }
+  },
+  {
+    "name": "con navegación personalizada",
+    "description": "Tras nuestro menú de navegación tenemos <code>customNavigationHtml</code> una zona anidable para poder añadir una navegación personalizada.",
+    "data": {
+      "homepageUrl": "/",
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
+      "subnav": {
+        "text": "Gestor de expedientes"
+      },
+      "customNavigationHtml": "<div class='flex flex-wrap flex-1 gap-base'>"+ navigationCustom | safe + "</div>"
+    },
+    "visualDescription": "Header con fondo blanco y borde gris claro de 1px en todos los lados. Logo naranja y blanco a la izquierda, botón, tres elementos de navegación personalizados en texto negro con desplegables, y un enlace alineado al extremo derecho. Altura de 60px con elementos distribuidos horizontalmente en el espacio disponible.",
+    "_generated": {
+      "hash": "2e11128b549b10794707f11260cdc1a2",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:00:01.750Z"
+    }
+  },
+  {
+    "name": "con navegación personalizada a la derecha",
+    "description": "En el <code>customNavigationHtml</code> podemos añadir elementos posicionados a la derecha.",
+    "data": {
+      "homepageUrl": "/",
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
+      "subnav": {
+        "text": "Gestor de expedientes"
+      },
+      "customNavigationHtml": "<div class='relative flex justify-end items-center flex-1 gap-base'><div class='absolute -top-3 right-0 text-black'><a href='#'><svg class='w-5 h-5' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' aria-label='Notificaciones' role='img'><path d='M7.25 12.5h-1.5a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5Z' fill='currentColor' transform='scale(3.42857)'/><g transform='scale(3.42857)'><circle cx='10.5' cy='2.5' r='2.5' fill='currentColor'/><path d='M11.5 10a1 1 0 0 1-1-1V6.74a.25.25 0 0 0-.24-.25 4 4 0 0 1-3.76-4 3.43 3.43 0 0 1 .11-.86.12.12 0 0 0 0-.1.15.15 0 0 0-.09 0 4 4 0 0 0-4 4V9a1 1 0 0 1-1 1 .5.5 0 0 0 0 1h10a.5.5 0 0 0 0-1Z' fill='currentColor'/></g></svg></a></div></div>"
+    },
+    "visualDescription": "Header con fondo blanco y borde gris claro de 1px. Logo naranja y blanco y botón alineados a la izquierda, espacio vacío central amplio, e ícono de usuario negro circular alineado al extremo derecho. Altura de 60px con distribución espaciada entre elementos izquierdos y derecho.",
+    "_generated": {
+      "hash": "6e1f0aff88ec36d96c7baba14189aaeb",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:00:01.750Z"
+    }
+  },
+  {
+    "name": "con enlace de skipLink personalizado",
+    "description": "Pasando parámetros customizados al componente Skip Link. Útil para hacer plantillas de página con barra lateral o con un contenido principal localizado en otro sitio diferente al habitual.",
+    "data": {
+      "skipLink":{
+        "text": "Saltar al contenido central",
+        "href": "#content-center",
+        "classes": "ds-focus",
+        "attributes": {
+          "id": "skip-link",
+          "attr-example": "custom-data"
+        }
+      },
+      "homepageUrl": "/",
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
+      "subnav": {
+        "text": "Gestor de expedientes"
+      },
+      "navigation": {
+        "items": [
+          {
+            "href": "#1",
+            "text": "Navigation item 1"
+          },
+          {
+            "href": "#2",
+            "text": "Navigation item 2",
+            "active": true
+          },
+          {
+            "href": "#3",
+            "text": "Navigation item 3"
+          },
+          {
+            "href": "#4",
+            "text": "Navigation item 4"
+          }
+          ]
+      }
+    },
+    "visualDescription": "Header con fondo naranja degradado que contiene un enlace skipLink con texto negro sobre fondo amarillo en la parte superior. Debajo hay una barra de navegación horizontal con logo de rayas naranjas a la izquierda, seguido de texto y cuatro elementos de navegación en texto negro, con uno resaltado en fondo naranja. Borde gris claro rodea todo el componente.",
+    "_generated": {
+      "hash": "1e6aa5d5c9a2be06315f07356ebeb622",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:00:12.296Z"
+    }
+  },
+  {
+    "name": "logo expandido",
+    "description": "Con el parámetro <code>'expandedLogo': true</code> se muestra el logo de la organización en formato expandido. Utilizar este logotipo en apps que estén dirigidas al ciudadano y también antes de hacer login en todas las apps.",
+    "data": {
+      "homepageUrl": "/",
+      "expandedLogo": true
+    },
+    "visualDescription": "Header con fondo blanco que muestra el logo con texto negro y rayas naranjas horizontales. El logo está alineado a la izquierda con espaciado generoso alrededor. Borde gris claro delimita el componente completo.",
+    "_generated": {
+      "hash": "faacceb2222cfa3cfad6763327e304e3",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:00:12.296Z"
+    }
+  },
+  {
+    "name": "con offcanvas",
+    "description": "Menu mobile que sólo se muestra en anchuras pequeñas y que permite insertar dentro cualquier contenido con Nunjuks caller.",
+    "data": {
+      "homepageUrl": "/",
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
+      "subnav": {
+        "text": "Gestor de expedientes"
+      },
+      "offcanvas": {
+        "text": "Menú",
+        "textClose": "Cerrar menu",
+        "labelledId": "offcanvas-title"
+      },
+      "caller": exampleOffcanvas | indent(14)
+    },
+    "visualDescription": "Header con fondo blanco que presenta un logo de rayas naranjas horizontales a la izquierda, seguido de texto en negro. Layout horizontal simple con elementos alineados verticalmente al centro. Borde gris claro rodea el componente.",
+    "_generated": {
+      "hash": "5b6cdbe3aabe96265b26b5780c2a2c9e",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:00:12.296Z"
+    }
+  },
+  {
+    "name": "con offcanvas y mobileTitle",
+    "description": "Menu mobile que sólo se muestra en anchuras pequeñas y que permite insertar dentro cualquier contenido con Nunjuks caller y título que sólo se muestra en mobile.",
+    "data": {
+      "homepageUrl": "/",
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
+      "subnav": {
+        "text": "Gestor de expedientes"
+      },
+      "offcanvas": {
+        "text": "Menú",
+        "textClose": "Cerrar menu",
+        "labelledId": "offcanvas-title"
+      },
+      "caller": exampleOffcanvas | indent(14)
+    },
+    "visualDescription": "Header con fondo blanco y borde gris claro inferior. Contiene un ícono naranja apilado (tres líneas horizontales) a la izquierda y texto negro centrado verticalmente. Altura contenida con padding vertical moderado.",
+    "_generated": {
+      "hash": "1fe60db7c376d888ef669ad7a1d7a322",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:00:21.614Z"
+    }
+  },
+  {
+    "name": "con subnav text",
+    "description": "Utilizar para mostrar el nombre de la app actual. Si no se proporcionan items en subnav, el texto será simple sin un dropdown.",
+    "data": {
+      "homepageUrl": "/",
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
+      "subnav": {
+        "text": "Gestor de expedientes"
+      }
+    },
+    "visualDescription": "Header con fondo blanco y borde gris claro inferior. Incluye ícono naranja apilado (tres líneas horizontales) a la izquierda seguido de texto negro. Barra de subnavegación integrada debajo con fondo gris muy claro ocupando ancho completo.",
+    "_generated": {
+      "hash": "9f9ef51cdd09a8015fc82090f7744101",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:00:21.614Z"
+    }
+  },
+  {
+    "name": "con subnav items",
+    "description": "Un dropdown junto al logo que ha de usarse para mostrar el nombre de la app en la que estamos y para navegar a otra app diferente. Usamos los items proporcionados para la navegación.",
+    "data": {
+      "homepageUrl": "/",
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
+      "subnav": {
+        "text": "Gestor de expedientes",
+        "items": [
+          {
+            "href": "#",
+            "text": "Gestor de expedientes",
+            "active": true
+          },
+          {
+            "href": "#",
+            "text": "Catálogo de servicios"
+          },
+          {
+            "href": "#",
+            "text": "Bandeja de entrada"
+          },
+          {
+            "href": "#",
+            "text": "Sistema de comprobación y verificación de documentos por CSV"
+          }
+        ]
+      }
+    },
+    "visualDescription": "Header con fondo blanco y borde gris claro superior e inferior. Presenta ícono naranja apilado (tres líneas horizontales) seguido de texto negro con indicador dropdown (flecha hacia abajo). Sección de subnavegación con fondo gris muy claro debajo ocupando ancho total del contenedor.",
+    "_generated": {
+      "hash": "0d14edcc3c1f117d599bcccfd817e9b1",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:00:21.614Z"
+    }
+  },
+  {
+    "name": "con dropdown",
+    "description": "Un dropdown a la derecha que puede usarse para mostrar información adicional, normalmante relativa a la cuenta de usuario, como: Perfil y Cerrar sesión. Se oculta por defecto en anchuras pequeñas si no se le añaden clases a dropdown.",
+    "data": {
+      "homepageUrl": "/",
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
+      "dropdown": {
+        "text": "Marta Pérez",
+        "items": [
+          {
+          "text": "Perfil",
+          "href": "/"
+          },
+          {
+          "text": "Cerrar sesión",
+          "href": "/"
+          }
+        ]
+      }
+    },
+    "visualDescription": "Header con fondo blanco y borde gris claro inferior de 1px. Contiene logo naranja alineado a la izquierda y texto negro con tamaño mediano alineado a la derecha seguido de un icono de flecha dropdown. Altura aproximada de 60px con espaciado interno horizontal generoso.",
+    "_generated": {
+      "hash": "606d8ca884c7df3af7ae08a6260a24ea",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:00:30.831Z"
+    }
+  },
+  {
+    "name": "con dropdown personalizado",
+    "description": "Se pueden usar los parámetros del dropdown para personalizarlo. En este ejemplo con HTML en el dropdown.",
+    "data": {
+      "homepageUrl": "/",
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
+      "dropdown": {
+        "html": "<span class='block text-right'><span class='block'>Marta Pérez</span> <span class='block'>(Administración)</span></span>",
+        "items": [
+          {
+          "text": "Perfil",
+          "href": "/"
+          },
+          {
+          "text": "Cerrar sesión",
+          "href": "/"
+          }
+        ],
+        "classesTooltip": "min-w-auto!"
+      }
+    },
+    "visualDescription": "Header con fondo gris muy claro y borde gris medio de 1px en todo el perímetro. Logo naranja posicionado a la izquierda, texto negro en peso normal alineado a la derecha con subtexto gris pequeño debajo. Altura de 80px con espaciado vertical amplio.",
+    "_generated": {
+      "hash": "c42524f8850ff38403298c688bdfc51c",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:00:30.831Z"
+    }
+  },
+  {
+    "name": "con contenido personalizado en dropdown",
+    "description": "El dropdown puede contener cualquier tipo de información.",
+    "data": {
+      "homepageUrl": "/",
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
+      "dropdown": {
+        "text": "Marta Pérez",
+        "contentHtml": "<div class='p-base'><dl><dt class='text-base'>Marta Pérez</dt><dd class='text-sm text-neutral-dark'>Departamento de Ciencia, Universidad y Sociedad del Conocimiento</dd></dl></div>",
+        "classesTooltip": "w-64! max-h-48! overflow-y-auto",
+        "attributes": {
+          "data-aria-haspopup": "dialog",
+          "data-role": "dialog",
+          "data-aria-modal": "false",
+          "data-aria-label": "Información adicional"
+        }
+      }
+    },
+    "visualDescription": "Header con fondo blanco y borde gris claro inferior de 1px. Logo naranja ubicado a la izquierda, texto negro de tamaño mediano con icono de flecha alineado a la derecha. Altura de 60px con distribución de elementos similar al espaciado horizontal estándar entre componentes.",
+    "_generated": {
+      "hash": "b749cb9949e7e485e513c6403f4f4f7a",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:00:30.831Z"
+    }
+  },
+  {
+    "name": "con todo",
+    "description": "Logo, menu de navegación, dropdown en anchuras grandes y menu mobile en pequeñas.",
+    "data": {
+      "homepageUrl": "/",
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
+      "subnav": {
+        "text": "Gestor de expedientes",
+        "items": [
+          {
+            "href": "#",
+            "text": "Gestor de expedientes",
+            "active": true
+          },
+          {
+            "href": "#",
+            "text": "Catálogo de servicios"
+          },
+          {
+            "href": "#",
+            "text": "Bandeja de entrada"
+          },
+          {
+            "href": "#",
+            "text": "Sistema de comprobación y verificación de documentos por CSV"
+          }
+        ]
+      },
+      "navigation": {
+        "items": [
+          {
+            "href": "#1",
+            "text": "Navigation item 1"
+          },
+          {
+            "href": "#2",
+            "text": "Navigation item 2",
+            "active": true
+          },
+          {
+            "href": "#3",
+            "text": "Navigation item 3"
+          }
+          ]
+      },
+      "dropdown": {
+        "text": "Marta Pérez",
+        "items": [
+          {
+          "text": "Perfil",
+          "href": "/"
+          },
+          {
+          "text": "Cerrar sesión",
+          "href": "/"
+          }
+        ]
+      },
+      "offcanvas": {
+        "text": "Menú",
+        "textClose": "Cerrar menu"
+      },
+      "caller": exampleOffcanvas | indent(14)
+    },
+    "visualDescription": "Header con fondo blanco que incluye un logo naranja a la izquierda (icono de barras horizontales), seguido de un desplegable con texto negro, tres enlaces de navegación en texto negro, y texto negro alineado a la derecha. Altura aproximada de 50-60px con elementos distribuidos horizontalmente en línea.",
+    "_generated": {
+      "hash": "11766b0ba3b6a60e599cab8530223ffe",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:00:40.456Z"
+    }
+  },
+  {
+    "name": "email template example",
+    "description": "Ejemplo de uso en platilla de email por defecto. Sólo con logo expandido.",
+    "data": {
+      "homepageUrl": "https://www.aragon.es/",
+      "expandedLogo": true
+    },
+    "visualDescription": "Header con fondo gris claro que contiene únicamente el logo alineado a la izquierda, compuesto por barras horizontales naranjas y texto negro en dos líneas. Altura aproximada de 60-70px con padding vertical generoso, diseño minimalista sin navegación ni elementos adicionales.",
+    "_generated": {
+      "hash": "a0d46309014690fa19b5d2ce3fae78d0",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:00:40.456Z"
+    }
+  }
 ] %}