desy-html 12.0.0 → 12.1.0

package/src/templates/components/header/_macro.header.header__dropdown.njk

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

package/src/templates/components/header/_macro.header.header__navigation.njk

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

package/src/templates/components/header/_macro.header.header__offcanvas.njk

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

package/src/templates/components/header/_macro.header.header__offcanvasButton.njk

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

package/src/templates/components/header/_macro.header.header__subnav.njk

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

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

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

package/src/templates/components/header/_styles.header.css

@@ -1,12 +1,12 @@
-/* ==========================================================================
-   _styles.header.css
-   ========================================================================== */
-
-@layer components {
-  body {
-    &.has-offcanvas-open {
-      @apply h-full;
-      @apply overflow-y-hidden;
-    }
-  }
-}
+/* ==========================================================================
+   _styles.header.css
+   ========================================================================== */
+
+@layer components {
+  body {
+    &.has-offcanvas-open {
+      @apply h-full;
+      @apply overflow-y-hidden;
+    }
+  }
+}

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

@@ -1,27 +1,27 @@
-{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
-<!-- header__dropdown -->
-<div class="ml-4 flex items-center lg:ml-6">
-  <div class="ml-3 relative">
-    <div>
-      {% set dropdownContent %}
-      {% call componentDropdown({
-        "text": params.text,
-        "html": params.html,
-        "hiddenText": params.hiddenText,
-        "classesContainer": params.classesContainer,
-        "classesTooltip": params.classesTooltip,
-        "classes": params.classes,
-        "attributes": params.attributes
-      })  %}
-          {% if caller %}
-          {{ caller() }} {#- if statement allows usage of `call` to be optional -#}
-          {% elseif params.caller %}
-          {{ params.caller | safe }}
-          {% endif %}
-      {% endcall %}
-      {% endset %}
-      {{ dropdownContent | safe | indent(6) }}
-    </div>
-  </div>
-</div>
-<!-- /header__dropdown -->
+{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
+<!-- header__dropdown -->
+<div class="ml-4 flex items-center lg:ml-6">
+  <div class="ml-3 relative">
+    <div>
+      {% set dropdownContent %}
+      {% call componentDropdown({
+        "text": params.text,
+        "html": params.html,
+        "hiddenText": params.hiddenText,
+        "classesContainer": params.classesContainer,
+        "classesTooltip": params.classesTooltip,
+        "classes": params.classes,
+        "attributes": params.attributes
+      })  %}
+          {% if caller %}
+          {{ caller() }} {#- if statement allows usage of `call` to be optional -#}
+          {% elseif params.caller %}
+          {{ params.caller | safe }}
+          {% endif %}
+      {% endcall %}
+      {% endset %}
+      {{ dropdownContent | safe | indent(6) }}
+    </div>
+  </div>
+</div>
+<!-- /header__dropdown -->

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

@@ -1,28 +1,28 @@
-{#- If an id 'prefix' is not passed, fall back to using a default one
-   instead -#}
-{% set idPrefix = params.idPrefix if params.idPrefix else "header-nav-item" %}
-<!-- header__navigation -->
-<nav id="{{ idPrefix }}" data-module="c-header-navigation" class="{{ params.classes if params.classes else 'hidden lg:block' }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-  <ul class="ml-sm flex flex-wrap items-baseline">
-  {% for item in params.items %}
-    {% if item %}
-    <li>
-      {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
-      {% if item.id %}
-      {% set id = item.id %}
-      {% else %}
-      {% set id = idPrefix + "-" + loop.index %}
-      {% endif %}
-      {% if item.active %}
-
-      <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="max-w-40 lg:max-w-xs px-3 py-4 text-sm text-black hover:underline truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base" aria-current="page" {%- if item.target %} target="{{ item.target }}"{% endif %}><strong class="font-bold">{{ item.html | filterquotes | safe if item.html else item.text }}</strong></a>
-      {% else %}
-
-      <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="max-w-40 lg:max-w-xs px-3 py-4 text-sm text-black hover:underline truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base {%- if item.disabled %} opacity-50 pointer-events-none{% endif -%}" {%- if item.disabled %} disabled="disabled" aria-disabled="true" tabindex="-1"{% endif -%}  {%- if item.target %} target="{{ item.target }}"{% endif %}>{{ item.html | filterquotes | safe if item.html else item.text }}</a>
-      {% endif %}
-    </li>
-    {% endif %}
-  {% endfor %}
-  </ul>
-</nav>
+{#- If an id 'prefix' is not passed, fall back to using a default one
+   instead -#}
+{% set idPrefix = params.idPrefix if params.idPrefix else "header-nav-item" %}
+<!-- header__navigation -->
+<nav id="{{ idPrefix }}" data-module="c-header-navigation" class="{{ params.classes if params.classes else 'hidden lg:block' }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  <ul class="ml-sm flex flex-wrap items-baseline">
+  {% for item in params.items %}
+    {% if item %}
+    <li>
+      {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
+      {% if item.id %}
+      {% set id = item.id %}
+      {% else %}
+      {% set id = idPrefix + "-" + loop.index %}
+      {% endif %}
+      {% if item.active %}
+
+      <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="max-w-40 lg:max-w-xs px-3 py-4 text-sm text-black hover:underline truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base" aria-current="page" {%- if item.target %} target="{{ item.target }}"{% endif %}><strong class="font-bold">{{ item.html | filterquotes | safe if item.html else item.text }}</strong></a>
+      {% else %}
+
+      <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="max-w-40 lg:max-w-xs px-3 py-4 text-sm text-black hover:underline truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base {%- if item.disabled %} opacity-50 pointer-events-none{% endif -%}" {%- if item.disabled %} disabled="disabled" aria-disabled="true" tabindex="-1"{% endif -%}  {%- if item.target %} target="{{ item.target }}"{% endif %}>{{ item.html | filterquotes | safe if item.html else item.text }}</a>
+      {% endif %}
+    </li>
+    {% endif %}
+  {% endfor %}
+  </ul>
+</nav>
 <!-- /header__navigation -->

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

@@ -1,20 +1,20 @@
-<!-- header__offcanvas -->
-<div id="header-offcanvas" class="hidden" role="dialog" aria-labelledby="header-offcanvas-button-text" aria-modal="true">
-  <div class="left-0 fixed top-0 h-[100dvh] w-offcanvas ml-offcanvas-negative">
-    <div class="h-full overflow-auto relative bg-white z-10">
-      <div class="text-right p-sm">
-        <button
-          onclick="closeDialog(this)"
-          id="header-offcanvas-button-close"
-          type="button"
-          class="c-button c-button--sm c-button--transparent m-sm">{{ params.text }} <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="14" height="14" class="self-center ml-2" aria-hidden="true"><path fill="currentColor" d="M8.591 7.177a.25.25 0 010-.354l4.616-4.616A1 1 0 1011.793.793L7.177 5.409a.25.25 0 01-.354 0L2.207.793A1 1 0 00.793 2.207l4.616 4.616a.25.25 0 010 .354L.793 11.793a1 1 0 001.414 1.414l4.616-4.616a.25.25 0 01.354 0l4.616 4.616a1 1 0 001.414-1.414z"/></svg></button>
-      </div>
-      {% if caller %}
-      {{ caller() }} {#- if statement allows usage of `call` to be optional -#}
-      {% elseif params.caller %}
-      {{ params.caller | safe }}
-      {% endif %}
-    </div>
-  </div>
-</div>
-<!-- /header__offcanvas -->
+<!-- header__offcanvas -->
+<div id="header-offcanvas" class="hidden" role="dialog" aria-labelledby="header-offcanvas-button-text" aria-modal="true">
+  <div class="left-0 fixed top-0 h-[100dvh] w-offcanvas ml-offcanvas-negative">
+    <div class="h-full overflow-auto relative bg-white z-10">
+      <div class="text-right p-sm">
+        <button
+          onclick="closeDialog(this)"
+          id="header-offcanvas-button-close"
+          type="button"
+          class="c-button c-button--sm c-button--transparent m-sm">{{ params.text }} <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="14" height="14" class="self-center ml-2" aria-hidden="true"><path fill="currentColor" d="M8.591 7.177a.25.25 0 010-.354l4.616-4.616A1 1 0 1011.793.793L7.177 5.409a.25.25 0 01-.354 0L2.207.793A1 1 0 00.793 2.207l4.616 4.616a.25.25 0 010 .354L.793 11.793a1 1 0 001.414 1.414l4.616-4.616a.25.25 0 01.354 0l4.616 4.616a1 1 0 001.414-1.414z"/></svg></button>
+      </div>
+      {% if caller %}
+      {{ caller() }} {#- if statement allows usage of `call` to be optional -#}
+      {% elseif params.caller %}
+      {{ params.caller | safe }}
+      {% endif %}
+    </div>
+  </div>
+</div>
+<!-- /header__offcanvas -->

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

@@ -1,11 +1,11 @@
-<!-- header__offcanvasButton -->
-<div class="{{ params.classes if params.classes else '-mr-2 flex lg:hidden' }}">
-	<button id="header-offcanvas-button"
-				type="button"
-				onclick="openDialog('header-offcanvas', this)"
-        tabindex="0"
-        class="inline-flex items-center px-3 py-4 text-sm text-black focus:outline-none focus:shadow-outline-black focus:bg-warning-base" aria-haspopup="true">
-	  <span id="header-offcanvas-button-text" class="inline-block align-middle text-right">{{ params.html | filterquotes | safe if params.html else params.text }}</span> <svg role="img" aria-label="Cerrado" class="inline-block align-middle" viewBox="0 0 96 96" fill="currentColor" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg>
-	</button>
-</div>
+<!-- header__offcanvasButton -->
+<div class="{{ params.classes if params.classes else '-mr-2 flex lg:hidden' }}">
+	<button id="header-offcanvas-button"
+				type="button"
+				onclick="openDialog('header-offcanvas', this)"
+        tabindex="0"
+        class="inline-flex items-center px-3 py-4 text-sm text-black focus:outline-none focus:shadow-outline-black focus:bg-warning-base" aria-haspopup="true">
+	  <span id="header-offcanvas-button-text" class="inline-block align-middle text-right">{{ params.html | filterquotes | safe if params.html else params.text }}</span> <svg role="img" aria-label="Cerrado" class="inline-block align-middle" viewBox="0 0 96 96" fill="currentColor" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg>
+	</button>
+</div>
 <!-- /header__offcanvasButton -->

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

@@ -1,34 +1,34 @@
-{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
-
-<!-- header__subnav -->
-{% if params.items %}
-<div class="hidden lg:flex items-center">
-  <div class="py-2 relative border-r border-l border-neutral-base">
-    <p class="sr-only">Aplicación actual: </p>
-    {% set dropdownContent %}
-    {% call componentDropdown({
-      "text": params.text,
-      "html": params.html,
-      "hiddenText": params.hiddenText,
-      "classesContainer": params.classesContainer,
-      "classesTooltip": params.classesTooltip,
-      "classes": params.classes,
-      "attributes": params.attributes
-    })  %}
-        {% if caller %}
-        {{ caller() | indent(4) }} {#- if statement allows usage of `call` to be optional -#}
-        {% elseif params.caller %}
-        {{ params.caller | safe | indent(4) }}
-        {% endif %}
-    {% endcall %}
-    {% endset %}
-    {{ dropdownContent | trim | safe | indent(4) }}
-  </div>
-</div>
-{% else %}
-<p class="hidden lg:inline-block align-middle px-3 py-4 border-r border-l border-neutral-base text-sm text-black">
-  <span class="sr-only">Aplicación actual: </span>
-  {{ params.html | filterquotes | safe if params.html else params.text }}
-</p>
-{% endif %}
+{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
+
+<!-- header__subnav -->
+{% if params.items %}
+<div class="hidden lg:flex items-center">
+  <div class="py-2 relative border-r border-l border-neutral-base">
+    <p class="sr-only">Aplicación actual: </p>
+    {% set dropdownContent %}
+    {% call componentDropdown({
+      "text": params.text,
+      "html": params.html,
+      "hiddenText": params.hiddenText,
+      "classesContainer": params.classesContainer,
+      "classesTooltip": params.classesTooltip,
+      "classes": params.classes,
+      "attributes": params.attributes
+    })  %}
+        {% if caller %}
+        {{ caller() | indent(4) }} {#- if statement allows usage of `call` to be optional -#}
+        {% elseif params.caller %}
+        {{ params.caller | safe | indent(4) }}
+        {% endif %}
+    {% endcall %}
+    {% endset %}
+    {{ dropdownContent | trim | safe | indent(4) }}
+  </div>
+</div>
+{% else %}
+<p class="hidden lg:inline-block align-middle px-3 py-4 border-r border-l border-neutral-base text-sm text-black">
+  <span class="sr-only">Aplicación actual: </span>
+  {{ params.html | filterquotes | safe if params.html else params.text }}
+</p>
+{% endif %}
 <!-- /header__subnav -->

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

@@ -1,139 +1,139 @@
-{% from "../skip-link/_macro.skip-link.njk" import componentSkipLink %}
-{% from "./_macro.header.header__subnav.njk" import componentHeaderSubnav %}
-{% from "../nav/_macro.nav.njk" import componentNav %}
-{% from "./_macro.header.header__navigation.njk" import componentHeaderNavigation %}
-{% from "./_macro.header.header__dropdown.njk" import componentHeaderDropdown %}
-{% from "./_macro.header.header__offcanvasButton.njk" import componentHeaderOffcanvasButton %}
-{% from "./_macro.header.header__offcanvas.njk" import componentOffcanvas %}
-
-
-
-<!-- header -->
-<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 %}>
-    <nav aria-labelledby="{% if params.skipLink.attributes.id %}{{ params.skipLink.attributes.id }}{% else %}skip-link{% endif %}">
-      {{ componentSkipLink({
-        classes: params.skipLink.classes if params.skipLink.classes,
-        attributes: params.skipLink.attributes if params.skipLink.attributes else { "id": "skip-link" },
-        html: params.skipLink.html if params.skipLink.html,
-        text: params.skipLink.text if params.skipLink.text else "Saltar al contenido principal",
-        href: params.skipLink.href if params.skipLink.href else "#content"
-      }) | indent(6)  }}
-    </nav>
-    <div class="bg-neutral-lighter border-b border-neutral-base">
-      <div class="container mx-auto px-base">
-        <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-none 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>
-                {% endif %}
-                {{ params.customLogoHtml | safe if params.customLogoHtml }}
-              </a>
-              {% if params.subnav %}
-              {% set subnavContent %}
-              {% call componentHeaderSubnav({
-                "text": params.subnav.text,
-                "html": params.subnav.html,
-                "hiddenText": params.subnav.hiddenText,
-                "classesContainer": params.subnav.classesContainer,
-                "classesTooltip": params.subnav.classesTooltip,
-                "classes": params.subnav.classes if params.subnav.classes else "c-dropdown--header",
-                "attributes": params.subnav.attributes,
-                "items": params.subnav.items
-              }) %}
-                {% if params.subnav.items %}
-                {{ componentNav({
-                  isMenu: true,
-                  idPrefix: "header-subnav-nav-item",
-                  items: params.subnav.items,
-                  classes: "w-max max-w-64",
-                  attributes: {
-                    "id": "id-subnav-nav",
-                    "aria-label": "Aplicaciones"
-                  }
-                }) }}
-                {% endif %}
-              {% endcall %}
-              {% endset %}
-              {{ subnavContent | trim | safe | indent(14) }}
-              {% endif %}
-              {% if params.mobileTitle %}
-              <div class="{{ params.mobileTitle.classes if params.mobileTitle.classes else 'inline-block lg:hidden max-w-full' }}" {%- for attribute, value in params.mobileTitle.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-                {% if params.mobileTitle.html %}
-                {{ params.mobileTitle.html | filterquotes | safe }}
-                {% else %}
-                <p class="align-middle py-4 text-sm text-black overflow-hidden">{{ params.mobileTitle.text }}</p>
-                {% endif %}
-              </div>
-              {% endif %}
-            </div>
-            {% if params.navigation.items %}
-            {{ componentHeaderNavigation({
-              classes: params.navigation.classes,
-              idPrefix: "header-nav-item",
-              items: params.navigation.items,
-              attributes: {
-                "aria-label": "Menú principal"
-              }
-            }) | indent(12) }}
-            {% endif %}
-          </div>
-          {{ params.customNavigationHtml | safe if params.customNavigationHtml }}
-          {% if params.dropdown.items or params.dropdown.contentHtml %}
-          {% set headerDropdownContent %}
-            {% call componentHeaderDropdown({
-              "text": params.dropdown.text,
-              "html": params.dropdown.html,
-              "hiddenText": params.dropdown.hiddenText,
-              "classesContainer": params.dropdown.classesContainer if params.dropdown.classesContainer else "hidden lg:block",
-              "classesTooltip": params.dropdown.classesTooltip,
-              "classes": params.dropdown.classes if params.dropdown.classes else "c-dropdown--header",
-              "attributes": params.dropdown.attributes
-            }) %}
-              {% if params.dropdown.contentHtml %}
-                {{ params.dropdown.contentHtml | filterquotes | safe }}
-              {% else %}
-                {{ componentNav({
-                  isMenu: true,
-                  idPrefix: "header-dropdown-nav-item",
-                  items: params.dropdown.items,
-                  classes: "w-max max-w-64",
-                  attributes: {
-                    "id": "id-dropdown-nav",
-                    "aria-label": "Menú de usuario"
-                  }
-                }) | indent(4) }}
-              {% endif %}
-            {% endcall %}
-          {% endset %}
-          {{ headerDropdownContent | trim | safe | indent(10) }}
-          {% endif %}
-          {% if params.offcanvas %}
-          {{ componentHeaderOffcanvasButton({
-            text: params.offcanvas.text,
-            classes: params.offcanvas.classes
-          }) | indent(10) }}
-          {% endif %}
-        </div>
-      </div>
-      {% if params.offcanvas %}
-      {% set offcanvasContent %}
-        {% call componentOffcanvas({
-          text: params.offcanvas.textClose
-        }) %}
-          {% if caller %}
-          {{ caller() }} {#- if statement allows usage of `call` to be optional -#}
-          {% elseif params.caller %}
-          {{ params.caller | safe }}
-          {% endif %}
-        {% endcall %}
-        {% endset %}
-      {{ offcanvasContent | safe | indent(6) }}
-      {% endif %}
-    </div>
-  </div>
-</header>
+{% from "../skip-link/_macro.skip-link.njk" import componentSkipLink %}
+{% from "./_macro.header.header__subnav.njk" import componentHeaderSubnav %}
+{% from "../nav/_macro.nav.njk" import componentNav %}
+{% from "./_macro.header.header__navigation.njk" import componentHeaderNavigation %}
+{% from "./_macro.header.header__dropdown.njk" import componentHeaderDropdown %}
+{% from "./_macro.header.header__offcanvasButton.njk" import componentHeaderOffcanvasButton %}
+{% from "./_macro.header.header__offcanvas.njk" import componentOffcanvas %}
+
+
+
+<!-- header -->
+<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 %}>
+    <nav aria-labelledby="{% if params.skipLink.attributes.id %}{{ params.skipLink.attributes.id }}{% else %}skip-link{% endif %}">
+      {{ componentSkipLink({
+        classes: params.skipLink.classes if params.skipLink.classes,
+        attributes: params.skipLink.attributes if params.skipLink.attributes else { "id": "skip-link" },
+        html: params.skipLink.html if params.skipLink.html,
+        text: params.skipLink.text if params.skipLink.text else "Saltar al contenido principal",
+        href: params.skipLink.href if params.skipLink.href else "#content"
+      }) | indent(6)  }}
+    </nav>
+    <div class="bg-neutral-lighter border-b border-neutral-base">
+      <div class="container mx-auto px-base">
+        <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-none 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>
+                {% endif %}
+                {{ params.customLogoHtml | safe if params.customLogoHtml }}
+              </a>
+              {% if params.subnav %}
+              {% set subnavContent %}
+              {% call componentHeaderSubnav({
+                "text": params.subnav.text,
+                "html": params.subnav.html,
+                "hiddenText": params.subnav.hiddenText,
+                "classesContainer": params.subnav.classesContainer,
+                "classesTooltip": params.subnav.classesTooltip,
+                "classes": params.subnav.classes if params.subnav.classes else "c-dropdown--header",
+                "attributes": params.subnav.attributes,
+                "items": params.subnav.items
+              }) %}
+                {% if params.subnav.items %}
+                {{ componentNav({
+                  isMenu: true,
+                  idPrefix: "header-subnav-nav-item",
+                  items: params.subnav.items,
+                  classes: "w-max max-w-64",
+                  attributes: {
+                    "id": "id-subnav-nav",
+                    "aria-label": "Aplicaciones"
+                  }
+                }) }}
+                {% endif %}
+              {% endcall %}
+              {% endset %}
+              {{ subnavContent | trim | safe | indent(14) }}
+              {% endif %}
+              {% if params.mobileTitle %}
+              <div class="{{ params.mobileTitle.classes if params.mobileTitle.classes else 'inline-block lg:hidden max-w-full' }}" {%- for attribute, value in params.mobileTitle.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+                {% if params.mobileTitle.html %}
+                {{ params.mobileTitle.html | filterquotes | safe }}
+                {% else %}
+                <p class="align-middle py-4 text-sm text-black overflow-hidden">{{ params.mobileTitle.text }}</p>
+                {% endif %}
+              </div>
+              {% endif %}
+            </div>
+            {% if params.navigation.items %}
+            {{ componentHeaderNavigation({
+              classes: params.navigation.classes,
+              idPrefix: "header-nav-item",
+              items: params.navigation.items,
+              attributes: {
+                "aria-label": "Menú principal"
+              }
+            }) | indent(12) }}
+            {% endif %}
+          </div>
+          {{ params.customNavigationHtml | safe if params.customNavigationHtml }}
+          {% if params.dropdown.items or params.dropdown.contentHtml %}
+          {% set headerDropdownContent %}
+            {% call componentHeaderDropdown({
+              "text": params.dropdown.text,
+              "html": params.dropdown.html,
+              "hiddenText": params.dropdown.hiddenText,
+              "classesContainer": params.dropdown.classesContainer if params.dropdown.classesContainer else "hidden lg:block",
+              "classesTooltip": params.dropdown.classesTooltip,
+              "classes": params.dropdown.classes if params.dropdown.classes else "c-dropdown--header",
+              "attributes": params.dropdown.attributes
+            }) %}
+              {% if params.dropdown.contentHtml %}
+                {{ params.dropdown.contentHtml | filterquotes | safe }}
+              {% else %}
+                {{ componentNav({
+                  isMenu: true,
+                  idPrefix: "header-dropdown-nav-item",
+                  items: params.dropdown.items,
+                  classes: "w-max max-w-64",
+                  attributes: {
+                    "id": "id-dropdown-nav",
+                    "aria-label": "Menú de usuario"
+                  }
+                }) | indent(4) }}
+              {% endif %}
+            {% endcall %}
+          {% endset %}
+          {{ headerDropdownContent | trim | safe | indent(10) }}
+          {% endif %}
+          {% if params.offcanvas %}
+          {{ componentHeaderOffcanvasButton({
+            text: params.offcanvas.text,
+            classes: params.offcanvas.classes
+          }) | indent(10) }}
+          {% endif %}
+        </div>
+      </div>
+      {% if params.offcanvas %}
+      {% set offcanvasContent %}
+        {% call componentOffcanvas({
+          text: params.offcanvas.textClose
+        }) %}
+          {% if caller %}
+          {{ caller() }} {#- if statement allows usage of `call` to be optional -#}
+          {% elseif params.caller %}
+          {{ params.caller | safe }}
+          {% endif %}
+        {% endcall %}
+        {% endset %}
+      {{ offcanvasContent | safe | indent(6) }}
+      {% endif %}
+    </div>
+  </div>
+</header>
 <!-- /header -->