desy-html 15.0.3 → 16.0.0

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

@@ -231,6 +231,12 @@
           }
           ]
       }
+    },
+    "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"
     }
   },
   {
@@ -245,6 +251,12 @@
         "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"
     }
   },
   {
@@ -259,6 +271,12 @@
         "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"
     }
   },
   {
@@ -302,14 +320,26 @@
           }
           ]
       }
+    },
+    "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 del Gobierno de Aragó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.",
+    "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"
     }
   },
   {
@@ -329,6 +359,12 @@
         "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"
     }
   },
   {
@@ -351,6 +387,12 @@
         "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"
     }
   },
   {
@@ -364,6 +406,12 @@
       "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"
     }
   },
   {
@@ -396,6 +444,12 @@
           }
         ]
       }
+    },
+    "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"
     }
   },
   {
@@ -419,6 +473,12 @@
           }
         ]
       }
+    },
+    "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"
     }
   },
   {
@@ -443,6 +503,12 @@
         ],
         "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"
     }
   },
   {
@@ -464,6 +530,12 @@
           "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"
     }
   },
   {
@@ -531,6 +603,12 @@
         "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"
     }
   },
   {
@@ -539,6 +617,12 @@
     "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"
     }
   }
 ] %}

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

@@ -6,7 +6,12 @@
 {% from "./_macro.header.header__offcanvasButton.njk" import componentHeaderOffcanvasButton %}
 {% from "./_macro.header.header__offcanvas.njk" import componentOffcanvas %}
 
-
+{# Branding configuration #}
+{% set brandingEnabled = branding is defined %}
+{% set logoExpanded = params.logoExpanded | default(branding.logos.organization.expanded if brandingEnabled else null) %}
+{% set logoCompact = params.logoCompact | default(branding.logos.organization.compact if brandingEnabled else null) %}
+{% set logoAlt = params.logoAlt | default(branding.logos.organization.alt if brandingEnabled else 'Ir a la página de inicio') %}
+{% set homepageUrl = params.homepageUrl | default(branding.organization.website if brandingEnabled else '/') %}
 
 <!-- header -->
 <header {%- if params.classes %} class="{{ params.classes }}"{% endif %} {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
@@ -25,10 +30,21 @@
         <div class="flex items-center justify-between min-h-14">
           <div class="flex flex-wrap items-center">
             <div class="flex items-center">
-              <a href="{{ params.homepageUrl | default('/') }}" class="flex flex-wrap mr-4 text-black focus:outline-hidden focus:shadow-outline-black">
+              <a href="{{ homepageUrl }}" class="flex flex-wrap mr-4 text-black focus:outline-hidden focus:shadow-outline-black">
                 {% if not params.noLogo %}
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="144" height="32" class="fill-current {% if params.expandedLogo %} hidden sm:block{% else %} hidden{% endif %}" aria-label="Ir a la página de inicio de la aplicación" role="img"><defs><clipPath id="b-logo-expanded"><path fill="rgb(252, 228, 0)" d="M0 0h31.509v31.495H0z"/></clipPath><clipPath id="a-logo-expanded"><path d="M0 0h144v32H0z"/></clipPath></defs><g clip-path="url(#a-logo-expanded)"><path fill="rgb(252, 228, 0)" d="M0 .205h31.509V31.7H0z"/><g clip-path="url(#b-logo-expanded)" transform="translate(0 .205)"><g fill="#dd171b" fill-rule="evenodd"><path d="m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z"/></g></g><path d="M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z" fill="#161615" fill-rule="evenodd"/></g></svg>
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" class="w-8 h-8 fill-current {%- if params.expandedLogo %} sm:hidden{% endif %}" aria-label="Ir a la página de inicio de la aplicación" role="img"><defs><clipPath id="b-logo-mini"><path fill="rgb(252, 228, 0)" d="M0 0h32v32.001H0z"/></clipPath><clipPath id="a-logo-mini"><path d="M0 0h32v32H0z"/></clipPath></defs><g clip-path="url(#a-logo-mini)"><path fill="rgb(252, 228, 0)" d="M0 .305h32v32.001H0z"/><g clip-path="url(#b-logo-mini)" transform="translate(0 .305)"><g fill="#dd171b" fill-rule="evenodd"><path d="m31.997 6.145-7.686 1.539a14.764 14.764 0 0 1-8.028-1.042 15.267 15.267 0 0 0-5.073-1.846 12.725 12.725 0 0 0-3.59-.011l-5.13.918a94.41 94.41 0 0 1-2.491.442V.324a7.213 7.213 0 0 1 3.952-.09 10.087 10.087 0 0 1 2.118.951 17.859 17.859 0 0 0 4.36 1.993 14.13 14.13 0 0 0 6.7-.034l4.8-.872 5.016-.906 5.048-1.04ZM6.705 24.619a14.812 14.812 0 0 1 9.7 1.03 12.363 12.363 0 0 0 8.437 1.529l7.154-1.291v5.8a8.37 8.37 0 0 1-3.055.26 6.509 6.509 0 0 1-1.619-.464l-3.714-1.948a12.4 12.4 0 0 0-7.2-.838l-15.366 2.82L0 31.686v-5.8l1.28-.26 3.363-.623c.679-.125 1.393-.249 2.061-.385ZM-.003 15.32v-4.462l13.23-2.417a15.734 15.734 0 0 1 9.252 1.665 12.723 12.723 0 0 0 8.606.94l.914-.192v4.462L29.08 13.65a12.472 12.472 0 0 0-6.941-1.031l-8.131 1.483c-.974.182-2.921.532-2.921.532l-7.406 1.371a5.23 5.23 0 0 1-3.684-.685ZM31.997 16.851v4.393l-13.11 2.413a15.735 15.735 0 0 1-9.252-1.665 12.721 12.721 0 0 0-8.606-.94l-1.03.193v-4.394l3.035 1.6a12.476 12.476 0 0 0 6.941 1.03l8.13-1.483c.974-.182 2.922-.532 2.922-.532l7.406-1.371a5.219 5.219 0 0 1 3.564.756Z"/></g></g></g></svg>
+                  {% if logoExpanded or logoCompact %}
+                    {# Logo from branding config or params #}
+                    {% if logoExpanded %}
+                    <img src="{{ logoExpanded }}" alt="{{ logoAlt }}" class="h-8 {% if params.expandedLogo %} hidden sm:block{% else %} hidden{% endif %}">
+                    {% endif %}
+                    {% if logoCompact %}
+                    <img src="{{ logoCompact }}" alt="{{ logoAlt }}" class="w-8 h-8 {%- if params.expandedLogo %} sm:hidden{% endif %}">
+                    {% endif %}
+                  {% else %}
+                    {# Fallback: inline SVG logos #}
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="144" height="32" class="fill-current {% if params.expandedLogo %} hidden sm:block{% else %} hidden{% endif %}" aria-label="Ir a la página de inicio de la aplicación" role="img"><defs><clipPath id="b-logo-expanded"><path fill="rgb(252, 228, 0)" d="M0 0h31.509v31.495H0z"/></clipPath><clipPath id="a-logo-expanded"><path d="M0 0h144v32H0z"/></clipPath></defs><g clip-path="url(#a-logo-expanded)"><path fill="rgb(252, 228, 0)" d="M0 .205h31.509V31.7H0z"/><g clip-path="url(#b-logo-expanded)" transform="translate(0 .205)"><g fill="#dd171b" fill-rule="evenodd"><path d="m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z"/></g></g><path d="M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z" fill="#161615" fill-rule="evenodd"/></g></svg>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" class="w-8 h-8 fill-current {%- if params.expandedLogo %} sm:hidden{% endif %}" aria-label="Ir a la página de inicio de la aplicación" role="img"><defs><clipPath id="b-logo-mini"><path fill="rgb(252, 228, 0)" d="M0 0h32v32.001H0z"/></clipPath><clipPath id="a-logo-mini"><path d="M0 0h32v32H0z"/></clipPath></defs><g clip-path="url(#a-logo-mini)"><path fill="rgb(252, 228, 0)" d="M0 .305h32v32.001H0z"/><g clip-path="url(#b-logo-mini)" transform="translate(0 .305)"><g fill="#dd171b" fill-rule="evenodd"><path d="m31.997 6.145-7.686 1.539a14.764 14.764 0 0 1-8.028-1.042 15.267 15.267 0 0 0-5.073-1.846 12.725 12.725 0 0 0-3.59-.011l-5.13.918a94.41 94.41 0 0 1-2.491.442V.324a7.213 7.213 0 0 1 3.952-.09 10.087 10.087 0 0 1 2.118.951 17.859 17.859 0 0 0 4.36 1.993 14.13 14.13 0 0 0 6.7-.034l4.8-.872 5.016-.906 5.048-1.04ZM6.705 24.619a14.812 14.812 0 0 1 9.7 1.03 12.363 12.363 0 0 0 8.437 1.529l7.154-1.291v5.8a8.37 8.37 0 0 1-3.055.26 6.509 6.509 0 0 1-1.619-.464l-3.714-1.948a12.4 12.4 0 0 0-7.2-.838l-15.366 2.82L0 31.686v-5.8l1.28-.26 3.363-.623c.679-.125 1.393-.249 2.061-.385ZM-.003 15.32v-4.462l13.23-2.417a15.734 15.734 0 0 1 9.252 1.665 12.723 12.723 0 0 0 8.606.94l.914-.192v4.462L29.08 13.65a12.472 12.472 0 0 0-6.941-1.031l-8.131 1.483c-.974.182-2.921.532-2.921.532l-7.406 1.371a5.23 5.23 0 0 1-3.684-.685ZM31.997 16.851v4.393l-13.11 2.413a15.735 15.735 0 0 1-9.252-1.665 12.721 12.721 0 0 0-8.606-.94l-1.03.193v-4.394l3.035 1.6a12.476 12.476 0 0 0 6.941 1.03l8.13-1.483c.974-.182 2.922-.532 2.922-.532l7.406-1.371a5.219 5.219 0 0 1 3.564.756Z"/></g></g></g></svg>
+                  {% endif %}
                 {% endif %}
                 {{ params.customLogoHtml | safe if params.customLogoHtml }}
               </a>

package/src/templates/components/header/params.header.yaml

@@ -14,11 +14,11 @@ params:
 - name: noLogo
   type: boolean
   required: false
-  description: When true, there will be no Gobierno de Aragón logo.
+  description: When true, the organization logo will not be displayed.
 - name: customLogoHtml
   type: string
   required: false
-  description: HTML for the custom logo. If provided there will appear a custom logo after the Gobierno de Aragón logo
+  description: HTML for the custom logo. If provided there will appear a custom logo after the organization logo
 - name: mobileTitle
   type: object
   required: false

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

@@ -195,7 +195,7 @@
           "items": [
             {
               "href": "#",
-              "text": "Gobierno de Aragón"
+              "text": "Portal principal"
             },
             {
               "href": "#",
@@ -366,7 +366,7 @@
           "placeholder": "Buscar en este sitio"
         })  }}
     </div>
-    <h3 class="p-base text-base font-bold">Gobierno de Aragón</h3>
+    <h3 class="p-base text-base font-bold">Navegación principal</h3>
     {{ componentMenuVertical({
       "idPrefix": "nav-mobile-pages",
       "hasNav": false,
@@ -444,7 +444,7 @@
             "items": [
               {
                 "href": "#",
-                "text": "Gobierno de Aragón"
+                "text": "Portal principal"
               },
               {
                 "href": "#",
@@ -596,7 +596,7 @@
 {% set examples =  [
   {
     "name": "por defecto",
-    "description": "Esta es la cabecera por defecto para sitios web de submarcas del Gobierno de Aragón. Tiene un título que enlaza a la página de inicio. 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.",
+    "description": "Esta es la cabecera por defecto para sitios web de submarcas de la organización. Tiene un título que enlaza a la página de inicio. 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": {
       "title": {
         "homepageUrl": "/",
@@ -629,6 +629,12 @@
         "labelledId": "offcanvas-title"
       },
       "caller": exampleOffcanvas
+    },
+    "visualDescription": "Header con fondo gris azulado oscuro que contiene texto blanco grande en negrita. Logo naranja y negro posicionado arriba a la izquierda del fondo oscuro. Breadcrumb de navegación debajo con fondo blanco mostrando enlaces separados por chevrones.",
+    "_generated": {
+      "hash": "50187ac0980c79dde0b442579cf575b2",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:59:02.770Z"
     }
   },
   {
@@ -669,11 +675,17 @@
         "labelledId": "offcanvas-title"
       },
       "caller": exampleOffcanvas
+    },
+    "visualDescription": "Header con fondo gris azulado oscuro dividido en dos secciones de texto blanco: título principal en negrita grande y subtítulo en tamaño menor debajo. Logo naranja y negro ubicado arriba a la izquierda. Breadcrumb de navegación con fondo blanco debajo del header mostrando enlaces separados por chevrones.",
+    "_generated": {
+      "hash": "47bf2cb25d214bc9536a2b16306ddf0f",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:59:02.770Z"
     }
   },
   {
     "name": "con logo y subtítulo",
-    "description": "Esta es la cabecera por defecto para sitios web de submarcas del Gobierno de Aragón. Tiene un título que enlaza a la página de inicio. Por accesibilidad el logo tiene que ser de color negro con fondo transparente. El css ya se encargará de convertirlo a blanco que es como debe verse.",
+    "description": "Esta es la cabecera por defecto para sitios web de submarcas de la organización. Tiene un título que enlaza a la página de inicio. Por accesibilidad el logo tiene que ser de color negro con fondo transparente. El css ya se encargará de convertirlo a blanco que es como debe verse.",
     "data": {
       "logo": {
         "url": logoUrlEducaragon,
@@ -685,8 +697,7 @@
         "text": "Educaragón"
       },
       "subtitle": {
-        "text": "Portal del Departamento de Educación, Ciencia y Universidades del
-Gobierno de Aragón."
+        "text": "Portal del Departamento de Educación, Ciencia y Universidades."
       },
       "navigation": {
         "items": [
@@ -715,6 +726,12 @@ Gobierno de Aragón."
         "labelledId": "offcanvas-title"
       },
       "caller": exampleOffcanvas
+    },
+    "visualDescription": "Header con fondo gris azulado oscuro conteniendo logo cuadrado blanco con texto en el lado izquierdo, título en blanco grande a la derecha del logo, y subtítulo descriptivo largo en blanco de tamaño pequeño debajo del título. Logo naranja y negro posicionado arriba. Breadcrumb de navegación con fondo blanco debajo mostrando enlaces separados por chevrones.",
+    "_generated": {
+      "hash": "288a8bb03d24e993ed435441211af137",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:59:02.770Z"
     }
   },
   {
@@ -763,6 +780,12 @@ Gobierno de Aragón."
         "labelledId": "offcanvas-title"
       },
       "caller": exampleOffcanvas
+    },
+    "visualDescription": "Header con fondo gris azulado oscuro que contiene el logo en texto blanco en la parte superior. Debajo hay una barra de navegación con fondo blanco que incluye enlaces en texto gris oscuro. La zona inferior muestra una imagen panorámica de una galería con columnas blancas y paredes rojas.",
+    "_generated": {
+      "hash": "59ee08141a4cce41ed87f45cf53b6f89",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:59:16.115Z"
     }
   },
   {
@@ -814,6 +837,12 @@ Gobierno de Aragón."
         "labelledId": "offcanvas-title"
       },
       "caller": exampleOffcanvas
+    },
+    "visualDescription": "Header con fondo gris azulado oscuro que incluye el logo en blanco junto al texto descriptivo en la parte superior. Barra de navegación en blanco con enlaces en gris oscuro debajo del header principal. La sección hero ocupa gran altura con imagen de fondo oscura mostrando un espacio industrial, texto principal en blanco grande centrado, y subtexto descriptivo en blanco de menor tamaño.",
+    "_generated": {
+      "hash": "7e392ea3cc37c0a05cc4587a00e3d3d9",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:59:16.115Z"
     }
   },
   {
@@ -831,6 +860,12 @@ Gobierno de Aragón."
         "labelledId": "offcanvas-title"
       },
       "caller": exampleOffcanvas
+    },
+    "visualDescription": "Header con fondo gris azulado oscuro que presenta texto de título en blanco en la esquina izquierda. Barra de navegación personalizada en blanco con múltiples elementos desplegables en gris oscuro alineados a la izquierda. Elemento de navegación alineado a la derecha con texto gris y flecha indicadora.",
+    "_generated": {
+      "hash": "6936233f23ab7de3aa64a59e5e8f3023",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:59:16.115Z"
     }
   },
   {
@@ -848,6 +883,12 @@ Gobierno de Aragón."
         "labelledId": "offcanvas-title"
       },
       "caller": exampleOffcanvas
+    },
+    "visualDescription": "Header con logo \"GOBIERNO DE ARAGÓN\" en esquina superior izquierda (naranja y negro). Barra principal de fondo gris azulado oscuro (#3d4f5c) con texto blanco grande \"Título de cabecera\" alineado a la izquierda. Icono de inicio/home blanco pequeño en esquina superior derecha.",
+    "_generated": {
+      "hash": "16f21ec71779ddf5edcb8e5f13adb486",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:59:26.528Z"
     }
   },
   {
@@ -894,6 +935,12 @@ Gobierno de Aragón."
         "labelledId": "offcanvas-title"
       },
       "caller": exampleOffcanvas
+    },
+    "visualDescription": "Barra amarilla horizontal en la parte superior con texto centrado en negro. Logo debajo (naranja y negro), seguido de barra gris azulado oscuro con texto blanco grande. Navegación horizontal inferior con 4 enlaces de texto gris oscuro, uno subrayado en negro.",
+    "_generated": {
+      "hash": "505a776e5fe26832df3a928a25560530",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:59:26.528Z"
     }
   },
   {
@@ -910,6 +957,12 @@ Gobierno de Aragón."
         "labelledId": "offcanvas-title"
       },
       "caller": exampleOffcanvas
+    },
+    "visualDescription": "Logo en esquina superior izquierda con colores naranja y negro sobre fondo blanco. Barra principal de fondo gris azulado oscuro ocupando ancho completo con texto blanco grande alineado a la izquierda. Sin elementos de navegación visibles en la interfaz principal.",
+    "_generated": {
+      "hash": "f29dd45792ca295543e25b172a6a8362",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:59:26.528Z"
     }
   },
   {
@@ -939,6 +992,12 @@ Gobierno de Aragón."
         "labelledId": "offcanvas-title"
       },
       "caller": exampleOffcanvas
+    },
+    "visualDescription": "Header con fondo gris azulado oscuro, logo en esquina superior izquierda, título blanco en negrita, y texto alineado a la derecha con icono dropdown. Borde contenedor gris claro de 1px con etiqueta descriptiva arriba.",
+    "_generated": {
+      "hash": "822bb447ee138d077c9734cb51f778e0",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:59:35.432Z"
     }
   },
   {
@@ -968,6 +1027,12 @@ Gobierno de Aragón."
         "labelledId": "offcanvas-title"
       },
       "caller": exampleOffcanvas
+    },
+    "visualDescription": "Header con fondo gris azulado oscuro, logo en esquina superior izquierda, título blanco en negrita. Texto alineado a la derecha con subtexto en gris oscuro debajo y icono dropdown. Borde contenedor gris claro de 1px con etiqueta descriptiva arriba.",
+    "_generated": {
+      "hash": "d63688970cf54280ee75978e51fca18e",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:59:35.432Z"
     }
   },
   {
@@ -995,6 +1060,12 @@ Gobierno de Aragón."
         "labelledId": "offcanvas-title"
       },
       "caller": exampleOffcanvas
+    },
+    "visualDescription": "Header con fondo gris azulado oscuro, logo en esquina superior izquierda, título blanco en negrita. Texto alineado a la derecha con icono dropdown. Borde contenedor gris claro de 1px con etiqueta descriptiva arriba.",
+    "_generated": {
+      "hash": "d97da760c7c5b7fe4f99ad402411ebd5",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:59:35.432Z"
     }
   },
   {
@@ -1029,6 +1100,12 @@ Gobierno de Aragón."
         "labelledId": "offcanvas-title"
       },
       "caller": exampleOffcanvas
+    },
+    "visualDescription": "Header con fondo azul grisáceo oscuro que contiene texto blanco alineado a la izquierda y campo de búsqueda blanco con borde a la derecha. Debajo, barra de navegación con fondo blanco que incluye enlaces de menú negro con iconos de flecha desplegable, y un enlace con flecha desplegable alineado a la derecha. Logo con elementos naranjas y negros en la esquina superior izquierda, junto a texto pequeño gris.",
+    "_generated": {
+      "hash": "c1187553a58a9adaf307b374b9199e93",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:59:45.809Z"
     }
   }
 ] %}

package/src/templates/components/header-advanced/_template.header-advanced.njk

@@ -6,6 +6,8 @@
 {% from "../header/_macro.header.header__offcanvasButton.njk" import componentHeaderOffcanvasButton %}
 {% from "../header/_macro.header.header__offcanvas.njk" import componentOffcanvas %}
 
+{% set titleContainerBg = params.titleContainer.backgroundColor | default(null) %}
+
 <!-- header-advanced -->
 <header {%- if params.classes %} class="{{ params.classes }}"{% endif %} {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   <div  {%- if params.containerClasses %} class="{{ params.containerClasses }}"{% endif %}>
@@ -42,7 +44,7 @@
       {% endif %}
     {% endif %}
     {% if params.noTitle != true %}
-    <div class="{% if params.titleContainer.classes %}{{ params.titleContainer.classes }}{% else -%} bg-heading-base bg-no-repeat bg-cover lg:bg-auto bg-center lg:bg-right bg-general lg:bg-general-lg  text-white{% endif %}" {%- if params.titleContainer.backgroundColor %} style="background-color: {{ params.titleContainer.backgroundColor }};"{% endif %}>
+    <div class="{% if params.titleContainer.classes %}{{ params.titleContainer.classes }}{% else -%} bg-heading-base bg-no-repeat bg-cover lg:bg-auto bg-center lg:bg-right bg-general lg:bg-general-lg  text-white{% endif %}" {%- if titleContainerBg %} style="background-color: {{ titleContainerBg }};"{% endif %}>
       <div class="container mx-auto px-base">
         <div class="lg:flex lg:flex-wrap py-base lg:py-lg">
           {% if params.logo %}

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

@@ -4,8 +4,14 @@
 {% set examples =  [
   {
     "name": "por defecto",
-    "description": "Este es el mini header por defecto. Una barra con logo del Gobierno de Aragón que enlaza al portal de la administración. Deberían usarse en todos los sitios web que tengan subdominio aragon.es.",
+    "description": "Este es el mini header por defecto. Una barra con el logo de la organización que enlaza al portal de la administración. Deberían usarse en todos los sitios web oficiales.",
     "data": {
+    },
+    "visualDescription": "Header con fondo blanco y borde gris claro en la parte inferior. Contiene el logo de \"Gobierno de Aragón\" en naranja y negro alineado a la izquierda. Altura compacta con espaciado interno moderado.",
+    "_generated": {
+      "hash": "98238d95850eeeaac1dbbb52bbb0efef",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:59:51.915Z"
     }
   },
   {
@@ -13,6 +19,12 @@
     "description": "Usa el parámetro <code>'hasContainer': false</code> para que el componente no tenga container y se expanda ocupando todo el ancho posible, de forma que el logotipo quede a la derecha de la ventana y no con respecto al contenedor centrado.",
     "data": {
       "hasContainer": false
+    },
+    "visualDescription": "Header con fondo blanco y borde gris claro en la parte inferior. Presenta el logo de \"Gobierno de Aragón\" en naranja y negro alineado a la izquierda. Altura compacta sin márgenes laterales contenedores.",
+    "_generated": {
+      "hash": "0b4112eaba8169f422a12a247804f4e6",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:59:51.915Z"
     }
   }
 ] %}
@@ -234,7 +246,7 @@
                 <ul class="relative space-y-base lg:columns-1 gap-base">
                   <li class="mb-xs">
                     <a class="c-link font-semibold" href="#1">
-                      Gobierno de Aragón
+                      Portal principal
                     </a>
                   </li>
                   <li class="mb-xs">
@@ -280,7 +292,7 @@
 {% set examples2 =  [
   {
     "name": "por defecto",
-    "description": "Este es el mini header por defecto. Una barra con logo del Gobierno de Aragón que enlaza al portal de la administración. Deberían usarse en todos los sitios web que tengan subdominio aragon.es.",
+    "description": "Este es el mini header por defecto. Una barra con el logo de la organización que enlaza al portal de la administración. Deberían usarse en todos los sitios web oficiales.",
     "data": {
     }
   },

package/src/templates/components/header-mini/_template.header-mini.njk

@@ -1,3 +1,9 @@
+{# Branding configuration #}
+{% set brandingEnabled = branding is defined %}
+{% set logoSrc = params.logoSrc | default(branding.logos.organization.mini if brandingEnabled else null) %}
+{% set logoAlt = params.logoAlt | default(branding.logos.organization.alt if brandingEnabled else 'Ir a la página de inicio') %}
+{% set homepageUrl = params.homepageUrl | default(branding.organization.website if brandingEnabled else 'https://www.aragon.es/') %}
+
 <!-- header-mini -->
 <div {%- if params.classes %} class="{{ params.classes }}"{% endif %} {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   {% if params.super %}
@@ -16,8 +22,14 @@
   <div  {%- if params.containerClasses %} class="{{ params.containerClasses }}"{% endif %}>
     <div class="bg-white border-b border-neutral-base">
       <div class="flex items-center px-base {% if params.hasContainer != false %}container mx-auto{% endif %}">
-        <a href="{{ params.homepageUrl | default('https://www.aragon.es/') }}" class="inline-block pt-2.5 pb-2 text-black focus:outline-hidden focus:shadow-outline-black">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="117" height="26" class="inline-block fill-current" role="img" aria-label="Gobierno de Aragón. Ir a aragon.es"><defs><clipPath id="b-logo-expanded"><path fill="rgb(252, 228, 0)" d="M0 0h31.509v31.495H0z"/></clipPath><clipPath id="a-logo-expanded"><path d="M0 0h144v32H0z"/></clipPath></defs><g clip-path="url(#a-logo-expanded)"><path fill="rgb(252, 228, 0)" d="M0 .205h31.509V31.7H0z"/><g clip-path="url(#b-logo-expanded)" transform="translate(0 .205)"><g fill="#dd171b" fill-rule="evenodd"><path d="m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z"/></g></g><path d="M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z" fill="#161615" fill-rule="evenodd"/></g></svg>
+        <a href="{{ homepageUrl }}" class="inline-block pt-2.5 pb-2 text-black focus:outline-hidden focus:shadow-outline-black">
+          {% if logoSrc %}
+            {# Logo from branding config or params #}
+            <img src="{{ logoSrc }}" alt="{{ logoAlt }}" class="inline-block h-[26px]">
+          {% else %}
+            {# Fallback: inline SVG logo #}
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="117" height="26" class="inline-block fill-current" role="img" aria-label="{{ logoAlt }}"><defs><clipPath id="b-logo-expanded"><path fill="rgb(252, 228, 0)" d="M0 0h31.509v31.495H0z"/></clipPath><clipPath id="a-logo-expanded"><path d="M0 0h144v32H0z"/></clipPath></defs><g clip-path="url(#a-logo-expanded)"><path fill="rgb(252, 228, 0)" d="M0 .205h31.509V31.7H0z"/><g clip-path="url(#b-logo-expanded)" transform="translate(0 .205)"><g fill="#dd171b" fill-rule="evenodd"><path d="m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z"/></g></g><path d="M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z" fill="#161615" fill-rule="evenodd"/></g></svg>
+          {% endif %}
         </a>
         {{ params.customNavigationHtml | safe if params.customNavigationHtml }}
       </div>

package/src/templates/components/header-mini/params.header-mini.yaml

@@ -2,7 +2,7 @@ params:
 - name: homepageUrl
   type: string
   required: false
-  description: The url of the logo link. Defaults to `https://www.aragon.es/`
+  description: The url of the logo link. Defaults to the homepage URL configured in branding or `/`.
 - name: customNavigationHtml
   type: string
   required: false

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

@@ -4,12 +4,24 @@
     "name": "por defecto",
     "data": {
       "text": "Esto es una pista o hint."
+    },
+    "visualDescription": "Caja rectangular con borde gris de 1px y fondo blanco. Contiene título h3 en negrita negro arriba, seguido de texto gris oscuro en peso normal. Padding interno generoso alrededor del contenido.",
+    "_generated": {
+      "hash": "b99ce9a6550c307fdc6aa391a0689476",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:00:46.906Z"
     }
   },
   {
     "name": "con HTML",
     "data": {
       "html": "Esto es una <strong>pista</strong> o <em>hint</em>."
+    },
+    "visualDescription": "Caja rectangular con borde gris de 1px y fondo blanco. Contiene título h3 en negrita negro arriba, seguido de texto con formato mixto donde una palabra aparece en negrita dentro de la oración gris oscura. Padding interno generoso alrededor del contenido.",
+    "_generated": {
+      "hash": "4c8ac1658917a6a0395947068f323749",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:00:46.906Z"
     }
   }
 ] %}