desy-html 16.0.4 → 17.0.0

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

@@ -1,3 +1,3 @@
-{% macro componentHeaderMini(params) %}
-{% include "./_template.header-mini.njk" %}
-{% endmacro %}
+{% macro componentHeaderMini(params) %}
+{% include "./_template.header-mini.njk" %}
+{% endmacro %}

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

@@ -1,52 +1,52 @@
-{# 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 %}
-    {% if params.super.customHtml %}
-      {{ params.super.customHtml | safe }}
-    {% else %}
-      <div class="{% if params.super.classes %}{{ params.super.classes }}{% else-%} bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}"  {%- if params.super.backgroundFullColor or params.super.backgroundFullUrl %} style="{% if params.super.backgroundFullColor %}background-color: {{ params.super.backgroundFullColor }};{% endif %} {%- if params.super.backgroundFullUrl %} background-image: url('{{ params.super.backgroundFullUrl }}'){% endif %}"{% endif %}>
-        <div class="container h-full mx-auto px-base">
-          <div class="relative h-full bg-cover bg-no-repeat" {% if params.super.backgroundContainerUrl %} style="background-image: url('{{ params.super.backgroundContainerUrl }}')"{% endif %}>
-            {{ params.super.customNavigationHtml | safe if params.super.customNavigationHtml }}
-          </div>
-        </div>
-      </div>
-    {% endif %}
-  {% endif %}
-  <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="{{ 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>
-    </div>
-  </div>
-  {% if params.sub %}
-    {% if params.sub.customHtml %}
-      {{ params.sub.customHtml | safe }}
-    {% else %}
-      <div class="{% if params.sub.classes %}{{ params.sub.classes }}{% else-%} bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}"  {%- if params.sub.backgroundFullColor or params.sub.backgroundFullUrl %} style="{% if params.sub.backgroundFullColor %}background-color: {{ params.sub.backgroundFullColor }};{% endif %} {%- if params.sub.backgroundFullUrl %} background-image: url('{{ params.sub.backgroundFullUrl }}'){% endif %}"{% endif %}>
-        <div class="container h-full mx-auto px-base">
-          <div class="relative h-full bg-cover bg-no-repeat" {% if params.sub.backgroundContainerUrl %} style="background-image: url('{{ params.sub.backgroundContainerUrl }}')"{% endif %}>
-            {{ params.sub.customNavigationHtml | safe if params.sub.customNavigationHtml }}
-          </div>
-        </div>
-      </div>
-    {% endif %}
-  {% endif %}
-</div>
+{# 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 %}
+    {% if params.super.customHtml %}
+      {{ params.super.customHtml | safe }}
+    {% else %}
+      <div class="{% if params.super.classes %}{{ params.super.classes }}{% else-%} bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}"  {%- if params.super.backgroundFullColor or params.super.backgroundFullUrl %} style="{% if params.super.backgroundFullColor %}background-color: {{ params.super.backgroundFullColor }};{% endif %} {%- if params.super.backgroundFullUrl %} background-image: url('{{ params.super.backgroundFullUrl }}'){% endif %}"{% endif %}>
+        <div class="container h-full mx-auto px-base">
+          <div class="relative h-full bg-cover bg-no-repeat" {% if params.super.backgroundContainerUrl %} style="background-image: url('{{ params.super.backgroundContainerUrl }}')"{% endif %}>
+            {{ params.super.customNavigationHtml | safe if params.super.customNavigationHtml }}
+          </div>
+        </div>
+      </div>
+    {% endif %}
+  {% endif %}
+  <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="{{ 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="Ir a la página de inicio"><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>
+    </div>
+  </div>
+  {% if params.sub %}
+    {% if params.sub.customHtml %}
+      {{ params.sub.customHtml | safe }}
+    {% else %}
+      <div class="{% if params.sub.classes %}{{ params.sub.classes }}{% else-%} bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}"  {%- if params.sub.backgroundFullColor or params.sub.backgroundFullUrl %} style="{% if params.sub.backgroundFullColor %}background-color: {{ params.sub.backgroundFullColor }};{% endif %} {%- if params.sub.backgroundFullUrl %} background-image: url('{{ params.sub.backgroundFullUrl }}'){% endif %}"{% endif %}>
+        <div class="container h-full mx-auto px-base">
+          <div class="relative h-full bg-cover bg-no-repeat" {% if params.sub.backgroundContainerUrl %} style="background-image: url('{{ params.sub.backgroundContainerUrl }}')"{% endif %}>
+            {{ params.sub.customNavigationHtml | safe if params.sub.customNavigationHtml }}
+          </div>
+        </div>
+      </div>
+    {% endif %}
+  {% endif %}
+</div>
 <!-- /header-mini -->

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

@@ -1,91 +1,91 @@
-params:
-- name: logoSrc
-  type: string
-  required: false
-  default: branding.logos.organization.mini
-  description: URL del logo de la organización. Por defecto usa el valor de branding.logos.organization.mini
-- name: logoAlt
-  type: string
-  required: false
-  default: branding.logos.organization.alt
-  description: Texto alternativo del logo. Por defecto usa el valor de branding.logos.organization.alt
-- name: homepageUrl
-  type: string
-  required: false
-  description: The url of the logo link. Defaults to the homepage URL configured in branding or `/`.
-- name: customNavigationHtml
-  type: string
-  required: false
-  description: HTML for the custom navigation area. If provided there will appear an embed area after the logo.
-- name: hasContainer
-  type: boolean
-  required: false
-  description: Defaults to `true`. If `false` the header won't use container class.
-- name: containerClasses
-  type: string
-  required: false
-  description: Classes for the container, useful if you want to make the header fixed width.
-- name: super
-  type: object
-  required: false
-  description: This is an area over the container
-  - name: customNavigationHtml
-    type: string
-    required: false
-    description: HTML for the custom navigation area. If provided there will appear an embed area where you can nest custom navigation under the logo area.
-  - name: backgroundFullColor
-    type: string
-    required: true
-    description: The css color used in the background image that fills all the super area.
-  - name: backgroundFullUrl
-    type: string
-    required: false
-    description: Url used in the background image that fills all the super area.
-  - name: backgroundContainerUrl
-    type: string
-    required: false
-    description: Url used in the background image in the container of the super area and over the backgroundFull.
-  - name: customHtml
-    type: string
-    required: false
-    description: If provided, the default super content will be replaced with this.
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to the super.
-- name: sub
-  type: object
-  required: false
-  description: This is an area under the container
-  - name: customNavigationHtml
-    type: string
-    required: false
-    description: HTML for the custom navigation area. If provided there will appear an embed area where you can nest custom navigation under the logo area.
-  - name: backgroundFullColor
-    type: string
-    required: true
-    description: The css color used in the background image that fills all the sub area.
-  - name: backgroundFullUrl
-    type: string
-    required: false
-    description: Url used in the background image that fills all the sub area.
-  - name: backgroundContainerUrl
-    type: string
-    required: false
-    description: Url used in the background image in the container of the sub area and over the backgroundFull.
-  - name: customHtml
-    type: string
-    required: false
-    description: If provided, the default sub content will be replaced with this.
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to the sub.
-- name: classes
-  type: string
-  required: false
-  description: Classes to add to the header-mini.
-- name: attributes
-  type: object
-  required: false
+params:
+- name: logoSrc
+  type: string
+  required: false
+  default: branding.logos.organization.mini
+  description: URL del logo de la organización. Por defecto usa el valor de branding.logos.organization.mini
+- name: logoAlt
+  type: string
+  required: false
+  default: branding.logos.organization.alt
+  description: Texto alternativo del logo. Por defecto usa el valor de branding.logos.organization.alt
+- name: homepageUrl
+  type: string
+  required: false
+  description: The url of the logo link. Defaults to the homepage URL configured in branding or `/`.
+- name: customNavigationHtml
+  type: string
+  required: false
+  description: HTML for the custom navigation area. If provided there will appear an embed area after the logo.
+- name: hasContainer
+  type: boolean
+  required: false
+  description: Defaults to `true`. If `false` the header won't use container class.
+- name: containerClasses
+  type: string
+  required: false
+  description: Classes for the container, useful if you want to make the header fixed width.
+- name: super
+  type: object
+  required: false
+  description: This is an area over the container
+  - name: customNavigationHtml
+    type: string
+    required: false
+    description: HTML for the custom navigation area. If provided there will appear an embed area where you can nest custom navigation under the logo area.
+  - name: backgroundFullColor
+    type: string
+    required: true
+    description: The css color used in the background image that fills all the super area.
+  - name: backgroundFullUrl
+    type: string
+    required: false
+    description: Url used in the background image that fills all the super area.
+  - name: backgroundContainerUrl
+    type: string
+    required: false
+    description: Url used in the background image in the container of the super area and over the backgroundFull.
+  - name: customHtml
+    type: string
+    required: false
+    description: If provided, the default super content will be replaced with this.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the super.
+- name: sub
+  type: object
+  required: false
+  description: This is an area under the container
+  - name: customNavigationHtml
+    type: string
+    required: false
+    description: HTML for the custom navigation area. If provided there will appear an embed area where you can nest custom navigation under the logo area.
+  - name: backgroundFullColor
+    type: string
+    required: true
+    description: The css color used in the background image that fills all the sub area.
+  - name: backgroundFullUrl
+    type: string
+    required: false
+    description: Url used in the background image that fills all the sub area.
+  - name: backgroundContainerUrl
+    type: string
+    required: false
+    description: Url used in the background image in the container of the sub area and over the backgroundFull.
+  - name: customHtml
+    type: string
+    required: false
+    description: If provided, the default sub content will be replaced with this.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the sub.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the header-mini.
+- name: attributes
+  type: object
+  required: false
   description: HTML attributes (for example data attributes) to add to the header-mini.

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

@@ -1,27 +1,27 @@
-{% set exampleComponent = "hint" %}
-{% set examples =  [
-  {
-    "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"
-    }
-  }
+{% set exampleComponent = "hint" %}
+{% set examples =  [
+  {
+    "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"
+    }
+  }
 ] %}

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

@@ -1,3 +1,3 @@
-{% macro componentHint(params) %}
-{% include "./_template.hint.njk" %}
-{% endmacro %}
+{% macro componentHint(params) %}
+{% include "./_template.hint.njk" %}
+{% endmacro %}

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

@@ -1,4 +1,4 @@
-<!-- hint -->
-<p {%- if params.id %} id="{{ params.id }}"{% endif %} class="block text-neutral-dark {%- if params.classes %} {{ params.classes }}{% endif %}"
-{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.html | filterquotes | safe if params.html else params.text }}</p>
+<!-- hint -->
+<p {%- if params.id %} id="{{ params.id }}"{% endif %} class="block text-neutral-dark {%- if params.classes %} {{ params.classes }}{% endif %}"
+{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.html | filterquotes | safe if params.html else params.text }}</p>
 <!-- /hint -->

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

@@ -1,21 +1,21 @@
-params:
-- name: text
-  type: string
-  required: true
-  description: If `html` is set, this is not required. Text to use within the hint. If `html` is provided, the `text` argument will be ignored.
-- name: html
-  type: string
-  required: true
-  description: If `text` is set, this is not required. HTML to use within the hint. If `html` is provided, the `text` argument will be ignored.
-- name: id
-  type: string
-  required: true
-  description: Optional id attribute to add to the hint span tag.
-- name: classes
-  type: string
-  required: false
-  description: Classes to add to the hint span tag.
-- name: attributes
-  type: object
-  required: false
-  description: HTML attributes (for example data attributes) to add to the hint span tag.
+params:
+- name: text
+  type: string
+  required: true
+  description: If `html` is set, this is not required. Text to use within the hint. If `html` is provided, the `text` argument will be ignored.
+- name: html
+  type: string
+  required: true
+  description: If `text` is set, this is not required. HTML to use within the hint. If `html` is provided, the `text` argument will be ignored.
+- name: id
+  type: string
+  required: true
+  description: Optional id attribute to add to the hint span tag.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the hint span tag.
+- name: attributes
+  type: object
+  required: false
+  description: HTML attributes (for example data attributes) to add to the hint span tag.