desy-html 7.1.1 → 7.2.0

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

@@ -6,27 +6,27 @@ text-neutral-dark {{ params.classes if params.classes }}"
     {% if params.navigation | length %}
       <div class="flex flex-col lg:flex-row flex-wrap gap-base">
         {% for nav in params.navigation %}
-          <div class="lg:flex-1">
-            <h3 class="c-h3 mb-base">{{ nav.title }}</h3>
-            {% if nav.items | length %}
-              {% set listClasses %}
-                {% if nav.columns %}
-                  lg:grid-cols-{{ nav.columns }}
-                {% endif %}
-              {% endset %}
-              <ul class="grid grid-cols-1 gap-base {{ listClasses | trim }}">
-                {% for item in nav.items %}
-                  {% if item.href and item.text %}
-                    <li class="mb-xs">
-                      <a class="c-link font-semibold" href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-                        {{ item.text }}
-                      </a>
-                    </li>
-                  {% endif %}
-                {% endfor %}
-              </ul>
-            {% endif %}
-          </div>
+        <div class="lg:flex-1">
+          <h3 class="c-h3 mb-base">{{ nav.title }}</h3>
+          {% if nav.items | length %}
+            {% set listClasses %}
+              {% if nav.columns %}
+                lg:grid-cols-{{ nav.columns }}
+              {% endif %}
+            {% endset %}
+            <ul class="grid grid-cols-1 gap-base {{ listClasses | trim }}">
+              {% for item in nav.items %}
+              {% if item.href and item.text %}
+              <li class="mb-xs">
+                <a class="c-link font-semibold" href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+                  {{ item.text }}
+                </a>
+              </li>
+              {% endif %}
+              {% endfor %}
+            </ul>
+          {% endif %}
+        </div>
         {% endfor %}
       </div>
       <hr class="my-base border-t border-neutral-base">
@@ -34,60 +34,56 @@ text-neutral-dark {{ params.classes if params.classes }}"
     <div class="flex flex-wrap flex-col lg:flex-row justify-between">
       <div class="mb-base">
         {% if params.meta %}
-          <h2 class="sr-only">{{ params.meta.visuallyHiddenTitle | default("Enlaces de pie de página") }}</h2>
-          {% if params.meta.items | length %}
-            <ul class="flex flex-col lg:flex-row lg:flex-wrap mb-base">
-              {% for item in params.meta.items %}
-                <li class="mb-sm mr-base">
-                  <a class="c-link font-semibold" href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-                    {{ item.text }}
-                  </a>
-                </li>
-              {% endfor %}
-            </ul>
-          {% endif %}
-          {% if params.meta.text or params.meta.html %}
-            <div class="mb-sm">
-              <p>{{ params.meta.html | safe if params.meta.html else params.meta.text }}</p>
-            </div>
-          {% endif %}
+        <h2 class="sr-only">{{ params.meta.visuallyHiddenTitle | default("Enlaces de pie de página") }}</h2>
+        {% if params.meta.items | length %}
+        <ul class="flex flex-col lg:flex-row lg:flex-wrap mb-base">
+          {% for item in params.meta.items %}
+          <li class="mb-sm mr-base">
+            <a class="c-link font-semibold" href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+              {{ item.text }}
+            </a>
+          </li>
+          {% endfor %}
+        </ul>
+        {% endif %}
+        {% if params.meta.text or params.meta.html %}
+        <div class="mb-sm">
+          <p>{{ params.meta.html | safe if params.meta.html else params.meta.text }}</p>
+        </div>
+        {% endif %}
         {% endif %}
         {% if params.description %}
-          <h2 class="sr-only">{{ params.description.visuallyHiddenTitle | default("Acerca de") }}</h2>
-          {% if params.description.text or params.description.html %}
-            {{ params.description.html | safe if params.description.html else params.description.text }}
-          {% endif %}
+        <h2 class="sr-only">{{ params.description.visuallyHiddenTitle | default("Acerca de") }}</h2>
+        {% if params.description.text or params.description.html %}
+          {{ params.description.html | safe if params.description.html else params.description.text }}
+        {% endif %}
         {% else %}
-          <div>
-            <p>
-              Todo el contenido bajo
-              <a
-                class="c-link c-link--neutral"
-                href="https://creativecommons.org/licenses/by/4.0/legalcode.es"
-                rel="license"
-              >licencia CC BY 4.0</a>
-            </p>
-          </div>
-          <div>
-            <p>
-              <a
-                class="c-link c-link--neutral"
-                href="https://www.aragon.es/"
-              >Gobierno de Aragón</a>. Edificio Pignatelli. <abbr title="Paseo">Pº</abbr> María Agustín, 36. 50004 - Zaragoza - <abbr title="Teléfono">Tel.</abbr> <a href="tel:+976714000" class="c-link c-link--neutral">976 714 000</a>
-            </p>
-          </div>
+        <div>
+          <p>
+            Todo el contenido bajo
+            <a
+              class="c-link c-link--neutral"
+              href="https://creativecommons.org/licenses/by/4.0/legalcode.es"
+              rel="license"
+            >licencia CC BY 4.0</a>
+          </p>
+        </div>
+        <div>
+          <p>
+            <a
+              class="c-link c-link--neutral"
+              href="https://www.aragon.es/"
+            >Gobierno de Aragón</a>. Edificio Pignatelli. <abbr title="Paseo">Pº</abbr> María Agustín, 36. 50004 - Zaragoza - <abbr title="Teléfono">Tel.</abbr> <a href="tel:+976714000" class="c-link c-link--neutral">976 714 000</a>
+          </p>
+        </div>
         {% endif %}
       </div>
       <div class="mb-base lg:pl-base overflow-hidden">
         {% if params.icon.html %}
-          {{ params.icon.html | safe }}
+        {{ params.icon.html | safe }}
         {% endif %}
         {% if not params.noLogo %}
-          <p>
-            <a href="http://www.aragon.es/Fondos_Europeos" class="inline-block text-sm c-link no-underline -ml-sm" title="Más información sobre los Fondos Estructurales y de Inversión Europeos (Fondos EIE)">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 575 96" width="288" height="48" class="w-auto h-12" role="img" aria-label="Logotipo Unión Europea. Fondo Europeo de Desarrollo Regional (FEDER). Construyendo Europa desde Aragón."><text transform="translate(126 33)" fill="#039" font-size="20" font-family="Arial, Tahoma, Verdana, Calibri, Garamond, Trebuchet, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, HelveticaNeue-Bold, Helvetica Neue, Helvetica, sans" font-weight="700"><tspan x="0" y="0">UNIÓN EUROPEA</tspan></text><text transform="translate(126 56)" fill="#039" font-size="20" font-family="Arial, Tahoma, Verdana, Calibri, Garamond, Trebuchet, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, HelveticaNeue-Bold, Helvetica Neue, Helvetica, sans"><tspan x="0" y="0">Fondo Europeo de Desarrollo Regional (FEDER)</tspan></text><text transform="translate(126 79)" fill="#039" font-size="20" font-family="Arial, Tahoma, Verdana, Calibri, Garamond, Trebuchet, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, HelveticaNeue-Bold, Helvetica Neue, Helvetica, sans"><tspan x="0" y="0">“Construyendo Europa desde Aragón”</tspan></text><path fill="#039" stroke="#fff" stroke-width="1%" d="M14.086 13.02h104.282v69.522H14.086z"/><g fill="#fc0"><path d="M64.004 28.167l2.2-1.606 2.2 1.606-.837-2.6 2.235-1.606h-2.755l-.843-2.628-.843 2.631h-2.753l2.233 1.606zM52.617 31.229l2.2-1.606 2.2 1.606-.836-2.6 2.233-1.606h-2.755l-.843-2.631-.843 2.634H51.22l2.234 1.606zM46.486 32.743l-.843 2.634H42.89l2.234 1.606-.837 2.6 2.2-1.606 2.2 1.606-.837-2.6 2.234-1.606h-2.752zM43.429 49.345l2.2 1.606-.836-2.6 2.234-1.606h-2.753l-.843-2.631-.843 2.637-2.755-.006 2.235 1.606-.837 2.6zM47.332 58.156l-.843-2.631-.843 2.634h-2.753l2.234 1.606-.837 2.6 2.2-1.609 2.2 1.609-.837-2.6 2.234-1.606zM55.677 66.504l-.843-2.628-.842 2.631h-2.755l2.234 1.606-.836 2.6 2.2-1.606 2.2 1.606-.836-2.6 2.234-1.606zM67.05 69.528l-.843-2.631-.842 2.634H62.61l2.234 1.606-.836 2.6 2.2-1.606 2.2 1.606-.837-2.6 2.235-1.606zM78.422 66.504l-.842-2.628-.845 2.631h-2.752l2.232 1.606-.836 2.6 2.2-1.606 2.2 1.606-.839-2.6 2.235-1.606zM86.774 58.156l-.845-2.631-.845 2.634h-2.752l2.235 1.606-.839 2.6 2.2-1.609 2.2 1.609-.839-2.6 2.235-1.606zM92.551 46.716h-2.755l-.845-2.631-.842 2.634h-2.755l2.235 1.606-.836 2.6 2.2-1.609 2.2 1.609-.836-2.6zM83.728 39.544l2.2-1.606 2.2 1.606-.839-2.6 2.235-1.6h-2.752l-.845-2.631-.845 2.634H82.33l2.235 1.6zM77.613 24.395l-.842 2.634-2.755-.006 2.232 1.609-.836 2.6 2.2-1.609 2.2 1.609-.836-2.6 2.235-1.609h-2.758z"/></g></svg>
-            </a>
-          </p>
+        <p><a href="{%- if params.urlFeder %} {{ params.urlFeder }} {%- else -%} https://www.europarl.europa.eu/factsheets/es/sheet/95/el-fondo-europeo-de-desarrollo-regional-feder- {% endif %}" class="inline-block text-sm c-link no-underline -ml-sm" title="Más información sobre los Fondos Estructurales y de Inversión Europeos (Fondos EIE)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 575 96" width="288" height="48" class="w-auto h-12" role="img" aria-label="Logotipo Unión Europea. Fondo Europeo de Desarrollo Regional (FEDER). Construyendo Europa desde Aragón."><text transform="translate(126 33)" fill="#039" font-size="20" font-family="Arial, Tahoma, Verdana, Calibri, Garamond, Trebuchet, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, HelveticaNeue-Bold, Helvetica Neue, Helvetica, sans" font-weight="700"><tspan x="0" y="0">UNIÓN EUROPEA</tspan></text><text transform="translate(126 56)" fill="#039" font-size="20" font-family="Arial, Tahoma, Verdana, Calibri, Garamond, Trebuchet, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, HelveticaNeue-Bold, Helvetica Neue, Helvetica, sans"><tspan x="0" y="0">Fondo Europeo de Desarrollo Regional (FEDER)</tspan></text><text transform="translate(126 79)" fill="#039" font-size="20" font-family="Arial, Tahoma, Verdana, Calibri, Garamond, Trebuchet, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, HelveticaNeue-Bold, Helvetica Neue, Helvetica, sans"><tspan x="0" y="0">“Construyendo Europa desde Aragón”</tspan></text><path fill="#039" stroke="#fff" stroke-width="1%" d="M14.086 13.02h104.282v69.522H14.086z"/><g fill="#fc0"><path d="M64.004 28.167l2.2-1.606 2.2 1.606-.837-2.6 2.235-1.606h-2.755l-.843-2.628-.843 2.631h-2.753l2.233 1.606zM52.617 31.229l2.2-1.606 2.2 1.606-.836-2.6 2.233-1.606h-2.755l-.843-2.631-.843 2.634H51.22l2.234 1.606zM46.486 32.743l-.843 2.634H42.89l2.234 1.606-.837 2.6 2.2-1.606 2.2 1.606-.837-2.6 2.234-1.606h-2.752zM43.429 49.345l2.2 1.606-.836-2.6 2.234-1.606h-2.753l-.843-2.631-.843 2.637-2.755-.006 2.235 1.606-.837 2.6zM47.332 58.156l-.843-2.631-.843 2.634h-2.753l2.234 1.606-.837 2.6 2.2-1.609 2.2 1.609-.837-2.6 2.234-1.606zM55.677 66.504l-.843-2.628-.842 2.631h-2.755l2.234 1.606-.836 2.6 2.2-1.606 2.2 1.606-.836-2.6 2.234-1.606zM67.05 69.528l-.843-2.631-.842 2.634H62.61l2.234 1.606-.836 2.6 2.2-1.606 2.2 1.606-.837-2.6 2.235-1.606zM78.422 66.504l-.842-2.628-.845 2.631h-2.752l2.232 1.606-.836 2.6 2.2-1.606 2.2 1.606-.839-2.6 2.235-1.606zM86.774 58.156l-.845-2.631-.845 2.634h-2.752l2.235 1.606-.839 2.6 2.2-1.609 2.2 1.609-.839-2.6 2.235-1.606zM92.551 46.716h-2.755l-.845-2.631-.842 2.634h-2.755l2.235 1.606-.836 2.6 2.2-1.609 2.2 1.609-.836-2.6zM83.728 39.544l2.2-1.606 2.2 1.606-.839-2.6 2.235-1.6h-2.752l-.845-2.631-.845 2.634H82.33l2.235 1.6zM77.613 24.395l-.842 2.634-2.755-.006 2.232 1.609-.836 2.6 2.2-1.609 2.2 1.609-.836-2.6 2.235-1.609h-2.758z"/></g></svg></a></p>
         {% endif %}
       </div>
     </div>

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

@@ -98,29 +98,7 @@ params:
   type: object
   required: false
   description: HTML attributes (for example data attributes) to add to the footer component container.
-
-previewLayout: full-width
-accessibilityCriteria: |
-  Text and links in the Footer must:
-  - have a text contrast ratio higher than 4.5:1 against the background colour to meet [WCAG AA](https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast)
-
-  Links in the Footer must:
-  - accept focus
-  - be focusable with a keyboard
-  - be usable with a keyboard
-  - indicate when they have focus
-  - change in appearance when touched (in the touch-down state)
-  - change in appearance when hovered
-  - have visible text
-
-  Images in the Footer must:
-  - be presentational when linked to from accompanying text (EU icon).
-  - have a meaningful accessible name if also a linked element (EU icon).
-
-  Landmarks and Roles in the Footer should:
-  - avoid navigation landmarks or roles
-    "The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary." - (https://www.w3.org/TR/html52/sections.html#the-nav-element)
-
-  - have a role of `contentinfo` at the root of the component (<footer>) (https://www.w3.org/TR/wai-aria-1.1/#contentinfo)
-    The spec indicates that `contentinfo` is useful for "Examples of information included in this region of the page are copyrights and links to privacy statements.", which may indicate that it might be better placed around the 'meta' section of this component.
-    See also: http://www.brucelawson.co.uk/2013/why-does-html-take-rolecontentinfo
+- name: urlFeder
+  type: string
+  required: false
+  description: Add a custom link to the FEDER logo. Defaults to: https://www.europarl.europa.eu/factsheets/es/sheet/95/el-fondo-europeo-de-desarrollo-regional-feder-

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

@@ -3,6 +3,7 @@
 {% from "components/menu-navigation/_macro.menu-navigation.njk" import componentMenuNavigation %}
 
 {% set navigationCustom %}
+
   {{ componentMenuNavigation({
     "idPrefix": "header-custom-nav",
     "classes": "c-menu-navigation--last-right hidden lg:block w-full bg-neutral-lighter ",
@@ -109,10 +110,11 @@
     "attributes": {
       "aria-label": "Navegación principal"
     }
-  })  }}
+  }) | indent(12)  }}
 {% endset %}
 
 {% set exampleOffcanvas %}
+
   <nav class="w-full p-2" aria-label="Menú móvil">
     <h3 class="p-base text-base font-bold">Gestor de expedientes</h3>
     {{ componentNav({
@@ -324,7 +326,7 @@
         "textClose": "Cerrar menu",
         "labelledId": "offcanvas-title"
       },
-      "caller": exampleOffcanvas
+      "caller": exampleOffcanvas | indent(14)
     }
   },
   {
@@ -346,7 +348,7 @@
         "textClose": "Cerrar menu",
         "labelledId": "offcanvas-title"
       },
-      "caller": exampleOffcanvas
+      "caller": exampleOffcanvas | indent(14)
     }
   },
   {
@@ -519,7 +521,7 @@
         "text": "Menú",
         "textClose": "Cerrar menu"
       },
-      "caller": exampleOffcanvas
+      "caller": exampleOffcanvas | indent(14)
     }
   },
   {

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

@@ -1,22 +1,27 @@
-            {% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
-            <div class="ml-4 flex items-center lg:ml-6">
-              <div class="ml-3 relative">
-                <div>
-                  {% 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 %}
-                </div>
-              </div>
-            </div>
+{% 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,7 +1,7 @@
 {#- 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 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 %}
@@ -19,8 +19,10 @@
     	{% endif %}
     	{% 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 font-bold 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 | safe if item.html else item.text }}</strong></a>
       {% else %}
+
       <a 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 | safe if item.html else item.text }}</a>
       {% endif %}
     </li>
@@ -28,3 +30,4 @@
   {% endfor %}
   </ul>
 </nav>
+<!-- /header__navigation -->

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

@@ -1,17 +1,19 @@
-      <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-screen w-offcanvas ml-offcanvas-negative">
-          <div class="h-full overflow-auto relative h-screen bg-white z-10">
-            <div class="text-right p-sm">
-              <button
-                onclick="closeDialog(this)"
-                id="header-offcanvas-button-close"
-                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>
+<!-- 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-screen w-offcanvas ml-offcanvas-negative">
+    <div class="h-full overflow-auto relative h-screen bg-white z-10">
+      <div class="text-right p-sm">
+        <button
+          onclick="closeDialog(this)"
+          id="header-offcanvas-button-close"
+          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,3 +1,4 @@
+<!-- header__offcanvasButton -->
 <div class="{{ params.classes if params.classes else '-mr-2 flex lg:hidden' }}">
 	<button id="header-offcanvas-button"
 				onclick="openDialog('header-offcanvas', this)"
@@ -6,4 +7,4 @@
 	  <span id="header-offcanvas-button-text" class="inline-block align-middle text-right">{{ params.html | 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,30 +1,34 @@
-          {% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
+{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
 
-
-          {% 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>
-                {% 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 %}
-              </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 | safe if params.html else params.text }}
-            </p>
-          {% endif %}
+<!-- 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 | safe if params.html else params.text }}
+</p>
+{% endif %}
+<!-- /header__subnav -->

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

@@ -1,4 +1,12 @@
 {% 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 %}>
@@ -10,7 +18,7 @@
         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">
@@ -25,7 +33,7 @@
                 {{ params.customLogoHtml | safe if params.customLogoHtml }}
               </a>
               {% if params.subnav %}
-              {% from "./_macro.header.header__subnav.njk" import componentHeaderSubnav %}
+              {% set subnavContent %}
               {% call componentHeaderSubnav({
                 "text": params.subnav.text,
                 "html": params.subnav.html,
@@ -37,32 +45,32 @@
                 "items": params.subnav.items
               }) %}
                 {% if params.subnav.items %}
-                  {% from "../nav/_macro.nav.njk" import componentNav %}
-                  {{ 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"
-                    }
-                  }) }}
+                {{ 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 | safe }}
-                  {% else %}
-                    <p class="align-middle py-4 text-sm text-black overflow-hidden">{{ params.mobileTitle.text }}</p>
-                  {% endif %}
-                </div>
+              <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 | 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 %}
-            {% from "./_macro.header.header__navigation.njk" import componentHeaderNavigation %}
             {{ componentHeaderNavigation({
               classes: params.navigation.classes,
               idPrefix: "header-nav-item",
@@ -75,54 +83,56 @@
           </div>
           {{ params.customNavigationHtml | safe if params.customNavigationHtml }}
           {% if params.dropdown.items or params.dropdown.contentHtml %}
-          {% from "./_macro.header.header__dropdown.njk" import componentHeaderDropdown %}
-          {% 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 | safe }}
-            {% else %}
-              {% from "../nav/_macro.nav.njk" import componentNav %}
-              {{ 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"
-                }
-              }) }}
-            {% endif %}
-          {% endcall %}
+          {% 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 | 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 %}
-          {% from "./_macro.header.header__offcanvasButton.njk" import componentHeaderOffcanvasButton %}
           {{ componentHeaderOffcanvasButton({
             text: params.offcanvas.text,
             classes: params.offcanvas.classes
-          }) | indent(14) }}
+          }) | indent(10) }}
           {% endif %}
         </div>
       </div>
       {% if params.offcanvas %}
-      {% from "./_macro.header.header__offcanvas.njk" import componentOffcanvas %}
-      {% call componentOffcanvas({
-        text: params.offcanvas.textClose,
-        labelledId: params.offcanvas.labelledId
-      }) %}
-        {% if caller %}
-        {{ caller() }} {#- if statement allows usage of `call` to be optional -#}
-        {% elseif params.caller %}
-        {{ params.caller | safe }}
-        {% endif %}
-      {% endcall %}
+      {% set offcanvasContent %}
+        {% call componentOffcanvas({
+          text: params.offcanvas.textClose,
+          labelledId: params.offcanvas.labelledId
+        }) %}
+          {% 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>