desy-html 8.5.0 → 8.7.0

package/src/templates/components/menu-navigation/_examples.menu-navigation.njk

@@ -106,6 +106,7 @@
   },
   {
     "name": "con item activo",
+    "description": 'Añade <code>active: true</code> a un item para mostrarlo activo inicialmente. También 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("mi-menu", "with-active-item-example-3")</code> para desactivar el item actual y activar el tercer item de este ejemplo.',
     "data": {
       "idPrefix": "with-active-item-example",
       "items": [
@@ -124,7 +125,91 @@
         }
       ],
       "attributes": {
-        "aria-label": "Menu navigation"
+        "aria-label": "Menu navigation",
+        "id": "mi-menu"
+      }
+    }
+  },
+  {
+    "name": "con sub-item activo",
+    "description": 'Añade <code>active: true</code> a un sub-item para mostrarlo activo inicialmente. También puedes usar con javascript la función global <code>activateSubItemMenuNavigation(elementMenu, idItemSeleccionado)</code> para seleccionar un sub-item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateSubItemMenuNavigation("mi-sub-menu", "sub-active-sub-item-example-2-2")</code> para desactivar el sub-item actual y activar el tercer sub-item de este ejemplo.',
+    "data": {
+      "idPrefix": "with-active-sub-item-example",
+      "items": [
+        {
+          "text": "Item 1",
+          "id": "active-sub-item-example-1",
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem 1"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 2",
+                "active": true
+              },
+              {
+                "href": "#",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "active-sub-item-example-item-1"
+            }
+          }
+        },
+        {
+          "text": "Item 2",
+          "id": "active-sub-item-example-2",
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem 1"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 2"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "active-sub-item-example-item-2"
+            }
+          }
+        },
+        {
+          "text": "Item 3",
+          "id": "active-sub-item-example-3",
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem 1"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 2"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "active-sub-item-example-item-2"
+            }
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu navigation",
+        "id": "mi-sub-menu"
       }
     }
   },
@@ -598,65 +683,6 @@
       }
     }
   },
-  {
-    "name": "con un item hijo activo",
-    "data": {
-      "idPrefix": "nav-item-with-children-active",
-      "items": [
-        {
-          "text": "Item 1",
-          "id": "nav-item-item-1-a",
-          "sub": {
-            "items": [
-              {
-                "href": "#",
-                "text": "Subitem 1"
-              },
-              {
-                "href": "#",
-                "text": "Subitem 2",
-                "active": true
-              },
-              {
-                "href": "#",
-                "text": "Subitem 3"
-              }
-            ],
-            "attributes": {
-              "aria-labelledby": "nav-item-item-1-a"
-            }
-          }
-        },
-        {
-          "text": "Item 2",
-          "id": "nav-item-item-2-a",
-          "sub": {
-            "items": [
-              {
-                "href": "#",
-                "text": "Subitem 1"
-              },
-              {
-                "href": "#",
-                "text": "Subitem 2",
-                "active": true
-              },
-              {
-                "href": "#",
-                "text": "Subitem 3"
-              }
-            ],
-            "attributes": {
-              "aria-labelledby": "nav-item-item-2-a"
-            }
-          }
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menu navigation"
-      }
-    }
-  },
   {
     "name": "con deshabilitado o sin href en un padre e hijo",
     "data": {
@@ -717,7 +743,7 @@
   },
   {
     "name": "con estilos de cabecera",
-    "description": 'Un Menu navigation puede estar anidado en <code>customNavigationHtml</code> en el componente Header.',
+    "description": 'Un Menu navigation puede estar anidado en <code>customNavigationHtml</code> en el componente Header. Añade <code>active: true</code> a un sub-item para mostrarlo activo inicialmente. También puedes usar con javascript la función global <code>activateSubItemMenuNavigation(elementMenu, idItemSeleccionado)</code> para seleccionar un sub-item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateSubItemMenuNavigation("mi-menu-header", "sub-header-custom-nav-item-1-1")</code> para desactivar el sub-item actual y activar el primer sub-item del primer item de este ejemplo.',
     "data": {
       "idPrefix": "header-custom-nav",
       "classes": "bg-neutral-lighter c-menu-navigation--last-right w-full",
@@ -823,7 +849,8 @@
         }
       ],
       "attributes": {
-        "aria-label": "Menu navigation"
+        "aria-label": "Menu navigation",
+        "id": "mi-menu-header"
       }
     }
   },
@@ -1076,4 +1103,4 @@
       }
     }
   }
-] %}
+] %}

package/src/templates/components/menu-navigation/_styles.menu-navigation.css

@@ -78,6 +78,10 @@
       @apply cursor-not-allowed;
       @apply pointer-events-none;
     }
+
+    &[aria-expanded="true"] + .c-menu-navigation__sub {
+      @apply z-40;
+    }
   }
 
 

package/src/templates/components/menu-navigation/_template.menu-navigation.njk

@@ -14,7 +14,7 @@
 
 {#- Capture the HTML so we can optionally nest it in a fieldset -#}
 {% set innerHtml %}
-  <ul data-module="c-menu-navigation" class="flex flex-wrap gap-base">
+  <ul class="flex flex-wrap gap-base c-menu-navigation__list">
     {% for item in params.items %}
       {% if item %}
         {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
@@ -38,7 +38,7 @@
       {% endif %}
       {% if item.sub.items %}
       <div class="c-menu-navigation__sub absolute bottom-0 left-0">
-        <ul id="{{ id }}-sub-list" class="{% if item.sub.classes %}{{ item.sub.classes }}{% else-%} c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm{% endif %}" {%- for attribute, value in item.sub.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+        <ul id="{{ id }}-sub-list" class="c-menu-navigation__sub--list {% if item.sub.classes %}{{ item.sub.classes }}{% else-%} c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm{% endif %}" {%- for attribute, value in item.sub.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
         {% for subitem in item.sub.items %}
           {% if subitem %}
             {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
@@ -49,28 +49,12 @@
             {%- endif %}
             {% set commonSubItemAttributes %}{% if subId %} id="{{ subId }}"{% endif %} {%- if subitem.title %} title="{{ subitem.title }}"{% endif %} {%- for attribute, value in subitem.attributes %} {{ attribute }}="{{ value }}"{% endfor %}{% endset %}
           <li>
-            {% if subitem.href %}
-            {% if subitem.active %}
-            <span {%- if subitem.id %} id="{{ subId }}"{% endif %} class="flex items-center px-base py-sm text-sm {%- if subitem.classes %} {{ subitem.classes }}{% endif -%}" aria-current="page" {{- commonSubItemAttributes | safe }}>
-              <strong class="font-bold">{{ subitem.html | safe if subitem.html else subitem.text }}</strong>
-            </span>
-            {% else %}
-            <a {%- if subitem.id %} id="{{ subId }}"{% endif %} href="{{ subitem.href }}" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black{%- if subitem.classes %} {{ subitem.classes }}{% endif -%} {%- if subitem.disabled %} pointer-events-none{% endif -%}" {%- if subitem.disabled %} tabindex="-1"{% endif -%} {%- if subitem.target %} target="{{ subitem.target }}"{% endif %} {{- commonSubItemAttributes | safe }}>
+            <a aria-current="{%- if subitem.active %}true{% else %}false{% endif -%}" {%- if subitem.id %} id="{{ subId }}"{% endif %} href="{{ subitem.href }}" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black{%- if subitem.classes %} {{ subitem.classes }}{% endif -%} {%- if subitem.disabled %} pointer-events-none{% endif -%}" {%- if subitem.disabled %} tabindex="-1"{% endif -%} {%- if subitem.target %} target="{{ subitem.target }}"{% endif %} {{- commonSubItemAttributes | safe }}>
               {{ subitem.html | safe if subitem.html else subitem.text }}
               {% if subitem.disabled %}
               <svg viewBox="0 0 140 140" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" class="inline-block align-middle ml-sm text-neutral-base fill-current" aria-hidden="true" focusable="false" ><path d="M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z"/></svg>
               {% endif %}
             </a>
-            {% endif %}
-            {% else %}
-            <span {%- if subitem.id %} id="{{ subId }}"{% endif %} class="flex items-center px-base py-sm text-sm {%- if subitem.classes %} {{ subitem.classes }}{% endif %} {%- if subitem.active %} font-bold{% endif %} {%- if subitem.active %} font-bold{% endif %}" {%- if subitem.title %} title="{{ subitem.title }}"{% endif %} {%- if subitem.active %} aria-current="page"{% endif %} {%- if subitem.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {%- for attribute, value in subitem.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-              {% if subitem.active %}
-              <strong class="font-bold">{{ subitem.html | safe if subitem.html else subitem.text }}</strong>
-              {% else %}
-              {{ subitem.html | safe if subitem.html else subitem.text }}
-              {% endif %}
-            </span>
-            {% endif %}
           </li>
           {% if subitem.divider %}
           <li class="my-sm border-b border-neutral-base">
@@ -98,8 +82,8 @@
 {% endset -%}
 
 <!-- menu-navigation -->
-<nav {%- if params.classes %} class="{{ params.classes }}"{% endif %}
+<nav data-module="c-menu-navigation" {%- if params.classes %} class="{{ params.classes }}"{% endif %}
 {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
   {{ innerHtml | trim | safe }}
 </nav>
-<!-- /menu-navigation -->
+<!-- /menu-navigation -->

package/src/templates/components/menu-navigation/params.menu-navigation.yaml

@@ -76,3 +76,7 @@ params:
   type: object
   required: false
   description: HTML attributes (for example data attributes) to add to the nav container.
+- name: active
+  type: boolean
+  required: false
+  description: If true, item will be active.

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

@@ -2,7 +2,7 @@
 {% set examples =  [
   {
     "name": "Por defecto",
-    "description": "El menubar se usa para interactuar con él y realizar cambios en otra parte de la página, no como menú de navegación. Si necesitas una navegación con enlaces, debes usas el componente Menu navigation en vez de este Menubar. Este ejmplo muestra parámetros mixtos.",
+    "description": "El menubar se usa para interactuar con él y realizar cambios en otra parte de la página, no como menú de navegación. Si necesitas una navegación con enlaces, debes usas el componente Menu navigation en vez de este Menubar. Este ejemplo muestra parámetros mixtos.",
     "data": {
       "id": "with-all-parent-items-1",
       "idPrefix": "parent-example",
@@ -154,7 +154,7 @@
   },
   {
     "name": "Tiene selección en items padres",
-    "description": "Cuando se ha seleccionado algún elemento hijo, el padre se muestra con color.",
+    "description": "Cuando se ha seleccionado algún elemento hijo, si se desea, el padre se puede mostrar con color usando la clase <code>.c-menubar__button--has-selection</code>.",
     "data": {
       "id": "with-all-parent-items-2",
       "idPrefix": "parent-example",
@@ -306,6 +306,159 @@
       ]
     }
   },
+  {
+    "name": "Con sub-item activo",
+    "description": "Cuando se ha seleccionado algún elemento hijo, el padre se muestra con color. Añade <code>active: true</code> a un sub-item para mostrarlo activo inicialmente. También puedes usar con javascript la función global <code>activateItemMenuBarAction(elementMenu, idItemSeleccionado)</code> para seleccionar un sub-item o varios sub-items de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemMenuBarAction('mi-menubar', 'sub-sub-menuitems-example-item-3-2-1-1')</code> para desactivar el sub-item actual y activar el primer sub-item del tercer menú de este ejemplo. Si quieres activar varios sub-items, abre la consola del navegador y escribe <code>activateItemMenuBarAction('mi-menubar', ['sub-menuitems-example-item-2-2-1', 'sub-menuitems-example-item-2-2-2', 'sub-menuitems-example-item-2-2-3'])</code>.",
+    "data": {
+      "id": "mi-menubar",
+      "idPrefix": "parent-example",
+      "ariaLabel":"Menubar descrición",
+      "items": [
+        {
+          "text": "Menuitem",
+          "ariaLabel": "Menuitem",
+          "id": "menuitems-example-item-1-2",
+          "sub": {
+            "items": [
+              {
+                "role": "menuitem",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 2"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 3"
+              }
+            ]
+          },
+          "classes": "mb-base mr-base"
+        },
+        {
+          "text": "Menuitemcheckbox",
+          "ariaLabel": "Menuitemcheckbox",
+          "id": "menuitems-example-item-2-2",
+          "classes": "mb-base mr-base",
+          "sub": {
+            "items": [
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 2",
+                "active": true
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 3"
+              }
+            ]
+          }
+        },
+        {
+          "text": "Menuitemradio",
+          "ariaLabel": "Menuitemradio",
+          "id": "menuitems-example-item-3-2",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "group label",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 1"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 2"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 3"
+                  }
+                ]
+              }
+            ]
+          },
+          "classes": "mb-base mr-base"
+        },
+        {
+          "text": "Items mixtos",
+          "ariaLabel": "Items mixtos",
+          "id": "menuitems-example-item-4-2",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "Tamaño de letra",
+                "items": [
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño mayor"
+                  },
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño menor"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de letra",
+                "items": [
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Negritas"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Itálicas"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de texto",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Ninguno"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Tachado"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Subrayado"
+                  }
+                ]
+              }
+            ]
+          },
+          "classes": "mb-base mr-base"
+        },
+        {
+          "text": "Menuitem solo",
+          "ariaLabel": "Menuitem solo",
+          "id": "menuitems-example-item-6-2",
+          "classes": "c-menubar__button--transparent mb-base mr-base",
+          "href": "#"
+        }
+      ]
+    }
+  },
   {
     "name": "con un item padre deshabilitado",
     "data": {
@@ -1467,4 +1620,4 @@
       ]
     }
   }
-] %}
+] %}

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

@@ -23,7 +23,7 @@
       {% set subId = "sub-" + id %}
     <li class="relative" role="none">
       {% if item.sub %}
-      <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button {%- if item.classes %} {{ item.classes }}{% endif %} {%- if item.disabled %} c-menubar__button--disabled{% endif %} {%- if item.active %} c-menubar__button--primary{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %} {% if item.disabled %} aria-disabled="true" tabindex="-1"{% endif %}  id="{{ id }}"
+      <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button {%- if item.classes %} {{ item.classes }}{% endif %} {%- if item.disabled %} c-menubar__button--disabled{% endif %} {%- if item.active %} c-menu-navigation__button--has-selection{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %} {% if item.disabled %} aria-disabled="true" tabindex="-1"{% endif %}  id="{{ id }}"
         {%- if item.sub.html %} data-aria-controls="{{ subId }}"{% endif %}
         {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
         <span class="inline-flex self-center max-w-xs align-middle truncate">{{ item.html | safe if item.html else item.text }}</span>
@@ -32,7 +32,7 @@
       </a>
       {% endif %}
       {% if item.href and not item.sub %}
-      <a role="menuitem" {%- if id %} id="{{ id }}"{% endif %} {%- if item.href %} href="{{ item.href }}"{% endif %} class="c-menubar__button {%- if item.classes %} {{ item.classes }}{% endif %} {%- if item.disabled %} c-menubar__button--disabled{% endif %} {%- if item.active %} c-menubar__button--primary{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %} {% if item.disabled %} disabled="disabled" aria-disabled="true" tabindex="-1"{% endif %} {% if item.target %} target="{{ item.target }}"{% endif %}{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+      <a role="menuitem" {%- if id %} id="{{ id }}"{% endif %} {%- if item.href %} href="{{ item.href }}"{% endif %} class="c-menubar__button {%- if item.classes %} {{ item.classes }}{% endif %} {%- if item.disabled %} c-menubar__button--disabled{% endif %} {%- if item.active %} c-menu-navigation__button--has-selection{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %} {% if item.disabled %} disabled="disabled" aria-disabled="true" tabindex="-1"{% endif %} {% if item.target %} target="{{ item.target }}"{% endif %}{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
         {{ item.html | safe if item.html else item.text }}
       </a>
       {% endif %}

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

@@ -120,7 +120,7 @@
   </div>
   {% if params.isDismissible %}
   <div class="absolute top-0 right-0 p-sm lg:p-base">
-    <button onclick="closeDialog(this)" class="p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none" aria-label="X: Cerrar la ventana emergente">
+    <button onclick="closeDialog(this)" class="p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none" aria-label="X: Cerrar la ventana emergente" type="button">
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4" aria-hidden="true" role="presentation"><path d="M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z" fill="currentColor"/></svg>
     </button>
   </div>

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

@@ -68,7 +68,7 @@
     </div>
     {% if params.isDismissible %}
     <div class="absolute top-0 right-0 p-sm">
-      <button class="c-notification-button__close p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none" aria-label="X: Cerrar notificación">
+      <button type="button" class="c-notification-button__close p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none" aria-label="X: Cerrar notificación">
         <svg class="w-4 h-4 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" aria-hidden="true" role="presentation"><path d="M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z" fill="currentColor"/></svg>
       </button>
     </div>

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

@@ -40,7 +40,8 @@
       "attributes": {
         "id": id,
         "aria-current": "page",
-        "tabindex": "-1"
+        "tabindex": "-1",
+        "type": "button"
       }
     }) | trim | indent(4)  }}
     {% else %}
@@ -49,7 +50,8 @@
       "href": "#",
       "classes": "mb-sm mr-sm",
       "attributes": {
-        "id": id
+        "id": id,
+        "type": "button"
       }
     }) | trim | indent(4)  }}
     {% endif %}
@@ -81,7 +83,8 @@
       "disabled": disabledFirst,
       "classes": "c-button--sm c-button--transparent mr-xs",
       "attributes": {
-        "id": params.idPrefix + "-first"
+        "id": params.idPrefix + "-first",
+        "type": "button"
       }
     }) | trim | indent(4)  }}
     {% endif %}
@@ -92,7 +95,8 @@
       "disabled": disabledPrevious,
       "classes": "c-button--sm c-button--transparent mr-xs",
       "attributes": {
-        "id": params.idPrefix + "-previous"
+        "id": params.idPrefix + "-previous",
+        "type": "button"
       }
     }) | trim | indent(4)  }}
     {% endif %}
@@ -121,7 +125,8 @@
       "disabled": disabledNext,
       "classes": "c-button--sm c-button--transparent mr-xs",
       "attributes": {
-        "id": params.idPrefix + "-next"
+        "id": params.idPrefix + "-next",
+        "type": "button"
       }
     }) | trim | indent(4)  }}
     {% endif %}
@@ -132,7 +137,8 @@
       "disabled": disabledLast,
       "classes": "c-button--sm c-button--transparent mr-xs",
       "attributes": {
-        "id": params.idPrefix + "-last"
+        "id": params.idPrefix + "-last",
+        "type": "button"
       }
     }) | trim | indent(4)  }}
     {% endif %}