desy-html 12.0.1 → 13.0.0

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

@@ -75,7 +75,8 @@
   <li>
     {{ componentButton({
       "text": "Acceder a Tu área personal",
-      "classes": "c-button--primary"
+      "classes": "c-button--primary",
+      "href": "#"
     })  }}
   </li>
   <li>
@@ -87,13 +88,15 @@
 {% endset %}
 
 {% macro postContent(id='id') %}
-<p class="c-paragraph-sm mb-base">
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1em" width="1em" class="inline-block align-middle w-6 h-6 mr-xs"><g><path d="M7.5,10.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M12.5,10.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M17.5,10.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M7.5,14.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M12.5,14.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M17.5,14.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M7.5,18.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M12.5,18.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M17.5,18.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M21.5,3H18.75a.25.25,0,0,1-.25-.25V1a1,1,0,0,0-2,0V5.75a.75.75,0,0,1-1.5,0V3.5a.5.5,0,0,0-.5-.5H8.25A.25.25,0,0,1,8,2.75V1A1,1,0,0,0,6,1V5.75a.75.75,0,0,1-1.5,0V3.5A.5.5,0,0,0,4,3H2.5a2,2,0,0,0-2,2V22a2,2,0,0,0,2,2h19a2,2,0,0,0,2-2V5A2,2,0,0,0,21.5,3Zm0,18.5a.5.5,0,0,1-.5.5H3a.5.5,0,0,1-.5-.5V9.5A.5.5,0,0,1,3,9H21a.5.5,0,0,1,.5.5Z" fill="currentColor"></path></g></svg>
-  <strong>18 octubre 2022</strong>
-</p>
-<h3 id="titulo-card-{{ id }}" class="c-h3">Título de noticia</h3>
-<div class="prose max-w-none mb-base">
-  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
+<div class="flex flex-col">
+  <h3 id="titulo-card-{{ id }}" class="c-h3">Título de noticia</h3>
+  <p class="order-first c-paragraph-sm mb-base">
+    <svg viewBox="0 0 16 16" height="1em" width="1em" class="inline-block align-middle w-6 h-6 mr-xs" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Fecha de publicación: "><path fill-rule="evenodd" clip-rule="evenodd" d="M11.4286 0C11.9019 0 12.2857 0.383755 12.2857 0.857143V1.71429H14C15.1046 1.71429 16 2.60971 16 3.71429V6.71526V8.14383V14C16 15.1046 15.1046 16 14 16H2C0.89543 16 0 15.1046 0 14V8.14383V6.71526V3.71429C0 2.60971 0.895431 1.71429 2 1.71429H3.71429V0.857143C3.71429 0.383755 4.09805 0 4.57143 0C5.04481 0 5.42857 0.383755 5.42857 0.857143V1.71429H10.5714V0.857143C10.5714 0.383755 10.9552 0 11.4286 0ZM3.71429 3.42857V4.28571C3.71429 4.7591 4.09805 5.14286 4.57143 5.14286C5.04481 5.14286 5.42857 4.7591 5.42857 4.28571V3.42857H10.5714V4.28571C10.5714 4.7591 10.9552 5.14286 11.4286 5.14286C11.9019 5.14286 12.2857 4.7591 12.2857 4.28571V3.42857H14C14.1578 3.42857 14.2857 3.55649 14.2857 3.71429V6.32171C14.1944 6.29822 14.0986 6.28571 14 6.28571H2C1.90134 6.28571 1.8056 6.29822 1.71429 6.32171V3.71429C1.71429 3.55649 1.84221 3.42857 2 3.42857H3.71429Z" fill="#1F2331"></path></svg>
+    <strong>18 octubre 2022</strong>
+  </p>
+  <div class="prose max-w-none mb-base">
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
+  </div>
 </div>
 {{ verDetalleButton(id) | safe }}
 {% endmacro %}
@@ -138,7 +141,7 @@
     "name": "barra lateral simple",
     "data": {
       "classes": "lg:w-1/3",
-      "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
+      "containerClasses": "flex flex-col p-base bg-neutral-lighter border-t-8 border-neutral-dark",
       "caller": withButton("2").val | indent(4)
     }
   },
@@ -146,12 +149,12 @@
     "name": "con super",
     "data": {
       "classes": "lg:w-1/3",
-      "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
+      "containerClasses": "flex flex-col p-base bg-neutral-lighter border-t-8 border-neutral-dark",
       "caller": withButton("3").val | indent(4),
       "super": {
         "backgroundFullColor": "transparent",
         "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
-        "classes": "h-60 -m-base mb-base bg-cover bg-center bg-no-repeat overflow-hidden",
+        "classes": "order-first h-60 -m-base mb-base bg-cover bg-center bg-no-repeat overflow-hidden",
         "attributes": {
           "role": "img",
           "aria-label": "Alt de la imagen"
@@ -163,7 +166,7 @@
     "name": "con sub",
     "data": {
       "classes": "lg:w-1/3",
-      "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
+      "containerClasses": "flex flex-col p-base bg-neutral-lighter border-t-8 border-neutral-dark",
       "caller": withButton("4").val | indent(4),
       "sub": {
         "backgroundFullColor": "transparent",
@@ -181,12 +184,12 @@
     "description": "En móvil la imagen aparece en el área super.",
     "data": {
       "classes": "lg:w-2/3",
-      "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
+      "containerClasses": "flex flex-col p-base bg-neutral-lighter border-t-8 border-neutral-dark",
       "caller": withButton("5").val | indent(4),
       "super": {
         "backgroundFullColor": "transparent",
         "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
-        "classes": "lg:hidden h-60 -m-base mb-base bg-cover bg-center bg-no-repeat overflow-hidden",
+        "classes": "lg:hidden order-first h-60 -m-base mb-base bg-cover bg-center bg-no-repeat overflow-hidden",
         "attributes": {
           "role": "img",
           "aria-label": "Alt de la imagen"
@@ -195,7 +198,7 @@
       "left": {
         "backgroundFullColor": "transparent",
         "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
-        "classes": "hidden lg:block w-1/2 -m-base mr-base bg-cover bg-center bg-no-repeat overflow-hidden",
+        "classes": "hidden order-first lg:block w-1/2 -m-base mr-base bg-cover bg-center bg-no-repeat overflow-hidden",
         "attributes": {
           "role": "img",
           "aria-label": "Alt de la imagen"
@@ -208,12 +211,12 @@
     "description": "En móvil la imagen aparece en el área super.",
     "data": {
       "classes": "lg:w-2/3",
-      "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
+      "containerClasses": "flex flex-col p-base bg-neutral-lighter border-t-8 border-neutral-dark",
       "caller": withButton("6").val | indent(4),
       "super": {
         "backgroundFullColor": "transparent",
         "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
-        "classes": "lg:hidden h-60 -m-base mb-base bg-cover bg-center bg-no-repeat overflow-hidden",
+        "classes": "lg:hidden order-first h-60 -m-base mb-base bg-cover bg-center bg-no-repeat overflow-hidden",
         "attributes": {
           "role": "img",
           "aria-label": "Alt de la imagen"
@@ -241,12 +244,12 @@
   {
     "name": "Bloque de página de inicio con botones",
     "data": {
-      "containerClasses": "p-lg bg-neutral-lighter border-t-8 border-neutral-dark",
+      "containerClasses": "flex flex-col p-lg bg-neutral-lighter border-t-8 border-neutral-dark",
       "caller": areaPersonalContent | indent(4),
       "super": {
         "backgroundFullColor": "transparent",
         "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.png&text=Imagen",
-        "classes": "lg:hidden h-72 -m-lg mb-base bg-cover bg-center bg-no-repeat overflow-hidden",
+        "classes": "lg:hidden order-first h-72 -m-lg mb-base bg-cover bg-center bg-no-repeat overflow-hidden",
         "attributes": {
           "role": "img",
           "aria-label": "Alt de la imagen"
@@ -268,12 +271,12 @@
     "description": "Image with fixed dimensions in desktop, text flexible.",
     "data": {
       "classes": "lg:w-3/4",
-      "containerClasses": "p-lg bg-neutral-lighter",
+      "containerClasses": "flex flex-col p-lg bg-neutral-lighter",
       "caller": postContent("7").val | indent(4),
       "super": {
         "backgroundFullColor": "transparent",
         "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
-        "classes": "lg:hidden h-56 -m-lg mb-base bg-cover bg-center bg-no-repeat overflow-hidden",
+        "classes": "lg:hidden order-first h-56 -m-lg mb-base bg-cover bg-center bg-no-repeat overflow-hidden",
         "attributes": {
           "role": "img",
           "aria-label": "Alt de la imagen"
@@ -282,7 +285,7 @@
       "left": {
         "backgroundFullColor": "transparent",
         "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
-        "classes": "hidden lg:block w-72 -m-lg mr-lg bg-cover bg-center bg-no-repeat overflow-hidden",
+        "classes": "hidden order-first lg:block w-72 -m-lg mr-lg bg-cover bg-center bg-no-repeat overflow-hidden",
         "attributes": {
           "role": "img",
           "aria-label": "Alt de la imagen"

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

@@ -1,17 +1,7 @@
 <!-- card -->
 <div {%- if params.classes %} class="{{ params.classes }}"{% endif %} {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   <div {%- if params.containerClasses %} class="{{ params.containerClasses }}"{% endif %}>
-    {% if params.super %}
-    <div class="{% if params.super.classes %}{{ params.super.classes }}{% else-%} h-32 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.super.backgroundFullColor }}; {% if params.super.backgroundFullUrl %} background-image: url('{{ params.super.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.super.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-      {{ params.super.html | filterquotes | safe if params.super.html}}
-    </div>
-    {% endif %}
     <div class="flex">
-      {% if params.left %}
-      <div class="{% if params.left.classes %}{{ params.left.classes }}{% else-%} w-1/2 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.left.backgroundFullColor }}; {% if params.left.backgroundFullUrl %} background-image: url('{{ params.left.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.left.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-        {{ params.left.html | filterquotes | safe if params.left.html}}
-      </div>
-      {% endif %}
       <div {%- if params.left or params.right %} class="flex-1"{% endif %}>
         {% if caller %}
         {{ caller() | indent(4) }} {#- if statement allows usage of `call` to be optional -#}
@@ -19,12 +9,22 @@
         {{ params.caller | safe | indent(4) }}
         {% endif %}
       </div>
+      {% if params.left %}
+      <div class="{% if params.left.classes %}{{ params.left.classes }}{% else-%} lg:order-first w-1/2 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.left.backgroundFullColor }}; {% if params.left.backgroundFullUrl %} background-image: url('{{ params.left.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.left.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+        {{ params.left.html | filterquotes | safe if params.left.html}}
+      </div>
+      {% endif %}
       {% if params.right %}
       <div class="{% if params.right.classes %}{{ params.right.classes }}{% else-%} w-1/2 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.right.backgroundFullColor }}; {% if params.right.backgroundFullUrl %} background-image: url('{{ params.right.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.right.attributes %} {{attribute}}="{{value}}"{% endfor %}>
         {{ params.right.html | filterquotes | safe if params.right.html}}
       </div>
       {% endif %}
     </div>
+    {% if params.super %}
+    <div class="{% if params.super.classes %}{{ params.super.classes }}{% else-%} order-first h-32 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.super.backgroundFullColor }}; {% if params.super.backgroundFullUrl %} background-image: url('{{ params.super.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.super.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+      {{ params.super.html | filterquotes | safe if params.super.html}}
+    </div>
+    {% endif %}
     {% if params.sub %}
     <div class="{% if params.sub.classes %}{{ params.sub.classes }}{% else-%} h-32 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.sub.backgroundFullColor }}; {% if params.sub.backgroundFullUrl %} background-image: url('{{ params.sub.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.sub.attributes %} {{attribute}}="{{value}}"{% endfor %}>
       {{ params.sub.html | filterquotes | safe if params.sub.html}}

package/src/templates/components/character-count/_examples.character-count.njk

@@ -15,7 +15,7 @@
     "name": "placeholder",
     "data": {
       "name": "con-placeholder",
-      "id": "placeholder",
+      "id": "con-placeholder",
       "maxlength": 250,
       "placeholder": "Esto es un placeholder",
       "label": {

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

@@ -41,7 +41,6 @@
 
 {% if params.errorMessage %}
   {% set errorId = idPrefix + '-error' %}
-  {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
   {{ componentErrorMessage({
     id: errorId,
     classes: params.errorMessage.classes,
@@ -75,11 +74,11 @@
     <div class="{%- if params.hasDividers %} border-t border-b border-neutral-base -mb-px{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %} {%- if item.conditional.html %} c-checkboxes__conditional{% endif %} {%- if item.checked %} c-checkboxes__conditional-active {%- elif item.isIndeterminate and not item.indeterminateChecked %} c-checkboxes__indeterminate {%- elif item.isIndeterminate and item.indeterminateChecked %} c-checkboxes__indeterminate c-checkboxes__indeterminate-active {% else %} c-checkboxes__conditional-hidden{% endif %}">
       <div class="relative flex items-start py-base">
         <div class="flex items-center mx-sm">
-          <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="{{ id }}" name="{{ name }}" type="checkbox" value="{{ item.value }}"
+          <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:outline-black focus:outline-1 focus:outline-offset-2 focus:ring-3 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="{{ id }}" name="{{ name }}" type="checkbox" value="{{ item.value }}"
           {{-" checked" if item.checked }}
           {{-" disabled" if item.disabled }}
           {%- if item.conditional.html %} aria-controls="{{ conditionalId }}"{% endif -%}
-          {%- if itemDescribedBy != " " %} aria-describedby="{{ itemDescribedBy }}"{% endif -%}
+          {%- if itemDescribedBy != " " %} aria-describedby="{{ itemDescribedBy | trim }}"{% endif -%}
           {%- if params.errorMessage %} aria-invalid="true"{% endif -%}
           {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}
           {%- if item.isIndeterminate or item.indeterminateChecked %} onclick="if (this.readOnly) this.checked=this.readOnly=false; else if (!this.checked) this.readOnly=this.indeterminate=true;"{% endif %}>

package/src/templates/components/date-input/_template.date-input.njk

@@ -51,7 +51,6 @@
 {% endif %}
 {% if params.errorMessage %}
   {% set errorId = params.id + "-error" %}
-  {% set describedBy = describedBy + " " + errorId if describedBy else errorId %}
   {{ componentErrorMessage({
     id: errorId,
     classes: params.errorMessage.classes,

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

@@ -8,7 +8,6 @@
 {% set describedBy = params.describedBy if params.describedBy else "" %}
 {% if params.errorMessage %}
   {% set errorId = params.id + '-error' %}
-  {% set describedBy = describedBy + " " + errorId if describedBy else errorId %}
 {% endif %}
 {% set datepickerContent %}
   {% if caller %}
@@ -68,7 +67,7 @@
       <input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base {%- if not params.dropdown %} pr-16 w-full{% endif %} {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} border-alert-base ring-2 ring-alert-base {% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="{{ params.type | default('text') }}"
         {%- if params.value %} value="{{ params.value}}"{% endif %}
         {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
-        {%- if params.errorMessage or params.errorId %} aria-errormessage="{{ errorId }}" aria-invalid="true" {%- if not describedBy %} aria-describedby="{{ errorId }}"{% endif %}{% endif %}
+        {%- if params.errorMessage or params.errorId %} aria-errormessage="{{ errorId }}" aria-invalid="true"{% endif %}
         {%- if params.autocomplete %} autocomplete="{{ params.autocomplete}}"{% endif %}
         {%- if params.pattern %} pattern="{{ params.pattern }}"{% endif %}
         {%- if params.inputmode %} inputmode="{{ params.inputmode }}"{% endif %}

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

@@ -17,7 +17,7 @@ treat it as an interactive element - without this it will be
 <!-- dropdown -->
 <div data-module="c-dropdown" class="{% if params.classesContainer %}{{ params.classesContainer }}{% else %} relative{% endif %}">
   <button {{- commonAttributes | safe }}>
-    <span class="inline-flex self-center max-w-xs align-middle truncate">{{ params.html | filterquotes | safe if params.html else params.text }}</span>
+    <span class="inline-flex self-center align-middle">{{ params.html | filterquotes | safe if params.html else params.text }}</span>
     {# Indentation is intentional to output HTML nicely #}
     {{- iconHtml | safe | trim | indent(2, true) if iconHtml -}}
   </button>

package/src/templates/components/error-summary/_template.error-summary.njk

@@ -37,7 +37,7 @@
     {% for item in params.errorList %}
       <li>
       {% if item.href %}
-        <a href="{{ item.href }}" class="c-link c-link--alert"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ item.html | filterquotes | safe if item.html else item.text }}</a>
+        <a href="{{ item.href }}" class="c-link c-link--alert inline-block pb-sm"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ item.html | filterquotes | safe if item.html else item.text }}</a>
       {% else %}
         {{ item.html | filterquotes | safe if item.html else item.text }}
       {% endif %}

package/src/templates/components/file-upload/_examples.file-upload.njk

@@ -8,7 +8,7 @@
       "label": {
         "text": "Sube un archivo"
       },
-      "classes": "overflow-x-auto max-w-64 lg:max-w-none"
+      "classes": "overflow-x-auto max-w-64 lg:w-full lg:max-w-none"
     }
   },
   {
@@ -22,7 +22,7 @@
       "hint": {
         "text": "Tu foto puede estar en tus Imágenes, Fotos, Descargas o el Escritorio. O en una aplicación como Fotos."
       },
-      "classes": "overflow-x-auto max-w-64 lg:max-w-none"
+      "classes": "overflow-x-auto max-w-64 lg:w-full lg:max-w-none"
     }
   },
   {
@@ -39,7 +39,7 @@
       "errorMessage": {
         "text": "Error: esto es un mensaje de error"
       },
-      "classes": "overflow-x-auto max-w-64 lg:max-w-none"
+      "classes": "overflow-x-auto max-w-64 lg:w-full lg:max-w-none"
     }
   },
   {
@@ -53,7 +53,7 @@
       "attributes": {
         "accept": ".jpg, .jpeg, .png"
       },
-      "classes": "overflow-x-auto max-w-64 lg:max-w-none"
+      "classes": "overflow-x-auto max-w-64 lg:w-full lg:max-w-none"
     }
   },
   {
@@ -65,7 +65,7 @@
         "text": "Sube un archivo",
         "isPageHeading": true
       },
-      "classes": "overflow-x-auto max-w-64 lg:max-w-none"
+      "classes": "overflow-x-auto max-w-64 lg:w-full lg:max-w-none"
     }
   },
   {
@@ -76,7 +76,7 @@
       "label": {
         "text": "Sube un archivo"
       },
-      "classes": "overflow-x-auto max-w-64 lg:max-w-none",
+      "classes": "overflow-x-auto max-w-64 lg:w-full lg:max-w-none",
       "formGroup": {
         "classes": "p-base bg-warning-light"
       }

package/src/templates/components/file-upload/_template.file-upload.njk

@@ -28,7 +28,6 @@
 {% endif %}
 {% if params.errorMessage %}
   {% set errorId = params.id + '-error' %}
-  {% set describedBy = describedBy + " " + errorId if describedBy else errorId %}
   {{ componentErrorMessage({
     id: errorId,
     classes: params.errorMessage.classes,

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

@@ -4,6 +4,7 @@ text-neutral-dark {{ params.classes if params.classes }}"
         {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   <div class="container mx-auto px-base {{ params.containerClasses if params.containerClasses }}">
     {% if params.navigation | length %}
+      <h2 class="sr-only">{{ "Menú de pie de página" }}</h2>
       <div class="flex flex-col lg:flex-row flex-wrap gap-base">
         {% for nav in params.navigation %}
         <div class="{%- if nav.classes %} {{ nav.classes }}{% else -%} flex-1{% endif %}">
@@ -70,7 +71,7 @@ text-neutral-dark {{ params.classes if params.classes }}"
             <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:+34976714000" class="c-link c-link--neutral">976 714 000</a>
+            >Gobierno de Aragón</a>. Edificio Pignatelli. Paseo María Agustín, 36. 50004 - Zaragoza - Teléfono: <a href="tel:+34976714000" class="c-link c-link--neutral">976 714 000</a>
           </p>
         </div>
         {% endif %}

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

@@ -108,7 +108,7 @@
         }
     ],
     "attributes": {
-      "aria-label": "Navegación principal"
+      "aria-label": "Menú principal"
     }
   }) | indent(12)  }}
 {% endset %}
@@ -200,7 +200,7 @@
 {% set examples =  [
   {
     "name": "por defecto",
-    "description": "El menú por defecto de las aplicaciones de la administración digital tiene un logo que enlaza a la página de inicio y un menu principal de navegación. El menu de navegación se oculta en mobile si no se añaden clases a navigation. El logotipo es simple, sin letras, si la app está diseñada para funcionarios. Junto al logo hay un texto que da nombre a la app en la que estamos. Puedes usar con javascript la función global <code>activateItemHeaderNavigation(elementMenu, idItemSeleccionado)</code> para seleccionar un item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemHeaderNavigation('header-nav-item', 'page-catalogo')</code> para desactivar el item actual y activar el tercer item del header de la página.",
+    "description": "El menú por defecto de las aplicaciones de la administración digital tiene un logo que enlaza a la página de inicio y un menu principal de navegación. El menu de navegación se oculta en mobile si no se añaden clases a navigation. El logotipo es simple, sin letras, si la app está diseñada para funcionarios. Junto al logo hay un texto que da nombre a la app en la que estamos. Puedes usar con javascript la función global <code>activateItemMenuNavigation(elementMenu, idItemSeleccionado)</code> para seleccionar un item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemMenuNavigation('header-nav-item', 'page-catalogo')</code> para desactivar el item actual y activar el tercer item del header de la página.",
     "data": {
       "homepageUrl": "/",
       "idPrefix": "mi-menu",
@@ -258,7 +258,7 @@
       "subnav": {
         "text": "Gestor de expedientes"
       },
-      "customNavigationHtml": "<div class='relative flex justify-end items-center flex-1 gap-base'><div class='absolute -top-3 right-0 text-black'><a href='#'><svg class='w-5 h-5' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' aria-label='Notificaciones'><path d='M7.25 12.5h-1.5a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5Z' fill='currentColor' transform='scale(3.42857)'/><g transform='scale(3.42857)'><circle cx='10.5' cy='2.5' r='2.5' fill='currentColor'/><path d='M11.5 10a1 1 0 0 1-1-1V6.74a.25.25 0 0 0-.24-.25 4 4 0 0 1-3.76-4 3.43 3.43 0 0 1 .11-.86.12.12 0 0 0 0-.1.15.15 0 0 0-.09 0 4 4 0 0 0-4 4V9a1 1 0 0 1-1 1 .5.5 0 0 0 0 1h10a.5.5 0 0 0 0-1Z' fill='currentColor'/></g></svg></a></div></div>"
+      "customNavigationHtml": "<div class='relative flex justify-end items-center flex-1 gap-base'><div class='absolute -top-3 right-0 text-black'><a href='#'><svg class='w-5 h-5' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' aria-label='Notificaciones' role='img'><path d='M7.25 12.5h-1.5a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5Z' fill='currentColor' transform='scale(3.42857)'/><g transform='scale(3.42857)'><circle cx='10.5' cy='2.5' r='2.5' fill='currentColor'/><path d='M11.5 10a1 1 0 0 1-1-1V6.74a.25.25 0 0 0-.24-.25 4 4 0 0 1-3.76-4 3.43 3.43 0 0 1 .11-.86.12.12 0 0 0 0-.1.15.15 0 0 0-.09 0 4 4 0 0 0-4 4V9a1 1 0 0 1-1 1 .5.5 0 0 0 0 1h10a.5.5 0 0 0 0-1Z' fill='currentColor'/></g></svg></a></div></div>"
     }
   },
   {
@@ -270,6 +270,7 @@
         "href": "#content-center",
         "classes": "ds-focus",
         "attributes": {
+          "id": "skip-link",
           "attr-example": "custom-data"
         }
       },
@@ -429,7 +430,7 @@
         "text": "Gestor de expedientes"
       },
       "dropdown": {
-        "html": "<span class='block text-right'>Marta Pérez <br>(Administración)</span>",
+        "html": "<span class='block text-right'><span class='block'>Marta Pérez</span> <span class='block'>(Administración)</span></span>",
         "items": [
           {
           "text": "Perfil",

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

@@ -1,28 +1,26 @@
-{#- 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 %}
+{%- from "components/menu-navigation/_macro.menu-navigation.njk" import componentMenuNavigation -%}
 
-      <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 %}
+{%- set navigationConfig = {
+  "classes": params.classes if params.classes else "hidden lg:block",
+  "idPrefix": params.idPrefix if params.idPrefix else "header-nav-item",
+  "items": [],
+  "attributes": params.attributes if params.attributes
+} -%}
 
-      <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 -->
+{%- for item in params.items -%}
+  {%- if item -%}
+    {%- set itemConfig = {
+      "text": item.text,
+      "html": item.html,
+      "href": item.href,
+      "target": item.target,
+      "active": item.active,
+      "attributes": item.attributes,
+      "id": item.id if item.id else (navigationConfig.idPrefix + "-" + loop.index),
+      "classes": "c-menu-navigation__button--header -mr-base"
+    } -%}
+   {%- set _ = navigationConfig.items.push(itemConfig) -%}
+  {%- endif -%}
+{%- endfor -%}
+
+{{ componentMenuNavigation(navigationConfig) }}

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

@@ -76,6 +76,7 @@
               idPrefix: "header-nav-item",
               items: params.navigation.items,
               attributes: {
+                "id": "header-nav-item",
                 "aria-label": "Menú principal"
               }
             }) | indent(12) }}