desy-html 8.6.0 → 8.8.0

package/src/js/desy-html.js

@@ -18,8 +18,9 @@ import { notification } from './aria/notification.js';
 import { RadioButton } from './aria/radioButton.js';
 import { CheckBox } from './aria/checkBoxes.js';
 import { MenuVertical } from './aria/MenuVertical.js';
-import { MenuNavigation } from './aria/MenuNavigation.js';
 import { HeaderNavigation } from './aria/HeaderNavigation.js';
+import { MenuHorizontal } from './aria/MenuHorizontal.js';
+import { MenuNavigation } from './aria/MenuNavigation.js';
 import { Nav } from './aria/Nav.js';
 
 
@@ -125,17 +126,36 @@ export function dropdownComponent(aria) {
 export function listboxComponent(aria) {
   listbox(aria);
   const modules = document.querySelectorAll('[data-module]');
+  let activeButton;
   for (const item in modules) if (modules.hasOwnProperty(item)) {
     const moduleValue = modules[item].getAttribute('data-module');
 
-
     if (moduleValue == 'c-listbox'){
       const buttonListbox = modules[item].querySelector('[data-module = "c-listbox-button"]');
       const tooltip = modules[item].querySelector('[data-module = "c-listbox-tooltip"]');
       const list = modules[item].querySelector('[data-module = "c-listbox-list"]');
-
       if(buttonListbox && tooltip) {
         const listbox = new aria.Listbox(list);
+        const hideOnClick = {
+          name: 'hideOnClick',
+          defaultValue: true,
+          fn(instance) {
+            return {
+              onCreate() {
+                buttonListbox.addEventListener("click", (event) => {
+                  if(!buttonListbox.classList.contains('open')){
+                    instance.show();
+                    list.focus()
+                    buttonListbox.classList.add('open');
+                  } else {
+                    list.blur();
+                    instance.hide();
+                  }
+                });
+              },
+            };
+          },
+        };
         const hideOnPopperBlur = {
           /* https://atomiks.github.io/tippyjs/v6/plugins/#hideonpopperblur */
           name: 'hideOnPopperBlur',
@@ -184,34 +204,40 @@ export function listboxComponent(aria) {
           inlinePositioning: true,
           content: tooltip,
           allowHTML: true, // Make sure you are sanitizing any user data if rendering HTML to prevent XSS attacks.
-          trigger: 'click',
-          hideOnClick: true,
+          trigger: 'manual',
           interactive: true,
           arrow: false,
           offset: [0, -10],
           theme: '',
-          plugins: [hideOnEscOrEnter,hideOnPopperBlur],
+          plugins: [hideOnEscOrEnter,hideOnPopperBlur, hideOnClick],
           role: false,
           aria: {
             content: 'auto'
           },
-          onShown(instance) {
-            list.focus();
+          onMount(instance) {
             if (list.querySelectorAll('[aria-selected="true"]')[0]) {
               listbox.focusItem(list.querySelectorAll('[aria-selected="true"]')[0]);
             }
           },
-          onHidden(instance) {
-            buttonListbox.focus();
+          onHidden(instance){
+            buttonListbox.classList.remove('open');
           }
         });
 
         listbox.setHandleFocusChange(function(evt){
-          if ((!list.hasAttribute('aria-multiselectable'))&&(buttonListbox.getAttribute('data-change')=='change')){
+          if ((!list.hasAttribute('aria-multiselectable')) && (buttonListbox.getAttribute('data-change')=='change')){
             buttonListbox.firstElementChild.innerHTML = evt.innerHTML;
           }
         });
 
+        const getMultiSelectable = buttonListbox.getAttribute('aria-labelledby');
+        const allowMultiple = getMultiSelectable.includes('is-multiselectable-label');
+
+        if(!allowMultiple) {
+          list.addEventListener("click", (event) => {
+            buttonListbox.click();
+          })
+        }
       }
     }
   }
@@ -375,12 +401,21 @@ export function MenuVerticalComponent(aria) {
   });
 }
 
+export function MenuHorizontalComponent(aria) {
+  MenuHorizontal(aria);
+  const modules = document.querySelectorAll('[data-module="c-menu-horizontal"]');
+  [...modules].forEach((module) => {
+    const MenuHorizontal = new aria.MenuHorizontal(module);
+    MenuHorizontal.init(null);
+  });
+}
+
 export function MenuNavigationComponent(aria) {
   MenuNavigation(aria);
   const modules = document.querySelectorAll('[data-module="c-menu-navigation"]');
   [...modules].forEach((module) => {
     const menuNavigation = new aria.MenuNavigation(module);
-    menuNavigation.init();
+    menuNavigation.init(null);
   });
 }
 

package/src/js/index.js

@@ -21,6 +21,7 @@ import {
   radioButtonComponent,
   checkBoxComponent,
   MenuVerticalComponent,
+  MenuHorizontalComponent,
   MenuNavigationComponent,
   HeaderNavigationComponent,
   NavComponent
@@ -45,6 +46,7 @@ notificationComponent(aria);
 radioButtonComponent(aria);
 checkBoxComponent(aria);
 MenuVerticalComponent(aria);
+MenuHorizontalComponent(aria);
 MenuNavigationComponent(aria);
 HeaderNavigationComponent(aria);
 NavComponent(aria);

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

@@ -70,7 +70,7 @@
   },
   {
     "name": "Con un item abierto",
-    "description": 'Podemos abrir inicialmente un item si le añadimos el parámetro <code>"open": true</code>.',
+    "description": 'Podemos abrir inicialmente un item si le añadimos el parámetro <code>"open": true</code>. También puedes usar con javascript la función global <code>activateItemAccordion(elementMenu, activeItemId)</code> para abrir un item, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemAccordion("accordion", "with-one-item-opened-example-1-title")</code> para cerrar el item actual y abrir el primer item de este ejemplo.',
     "data": {
       "idPrefix": "with-one-item-opened-example",
       "headingLevel": 3,
@@ -89,12 +89,15 @@
           "headerText": "Item de acordeón 3",
           "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
         }
-      ]
+      ],
+      "attributes": {
+        "id": "accordion"
+      }
     }
   },
   {
     "name": "Con 2 items abiertos",
-    "description": 'Podemos abrir inicialmente items si les añadimos el parámetro <code>"open": true</code>.',
+    "description": 'Podemos abrir inicialmente items si les añadimos el parámetro <code>"open": true</code>. También puedes usar con javascript la función global <code>activateItemAccordion(elementMenu, activeItemsIds)</code> para abrir varios items, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemAccordion("accordion-multiple", ["with-2-items-opened-example-2-title", "with-2-items-opened-example-3-title"])</code>.',
     "data": {
       "idPrefix": "with-2-items-opened-example",
       "headingLevel": 3,
@@ -114,7 +117,10 @@
           "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
           "open": true
         }
-      ]
+      ],
+      "attributes": {
+        "id": "accordion-multiple"
+      }
     }
   },
   {

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

@@ -38,7 +38,7 @@
       {% endif %}
     {% endif %}
     {% if params.showControl %}
-    <button class="c-accordion__toggle-all ml-auto py-base text-sm text-neutral-dark underline focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus text-right">
+    <button class="c-accordion__toggle-all ml-auto py-base text-sm text-neutral-dark underline focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus text-right" type="button">
       Mostrar todo
     </button>
     {% endif %}
@@ -57,6 +57,7 @@
 
         <button
         id="{{ id }}-title"
+        type="button"
         class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black {%- if item.disabled %} cursor-not-allowed{% endif %}"
         aria-controls="{{ id }}"
         {% if item.open %}

package/src/templates/components/accordion-history/_examples.accordion-history.njk

@@ -106,7 +106,7 @@
   },
   {
     "name": "Con un item abierto",
-    "description": 'Podemos abrir inicialmente un item si le añadimos el parámetro <code>"open": true</code>.',
+    "description": 'Podemos abrir inicialmente un item si le añadimos el parámetro <code>"open": true</code>. También puedes usar con javascript la función global <code>activateItemAccordion(elementMenu, activeItemId)</code> para abrir un item, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemAccordion("accordion-history", "with-one-item-opened-example-1-title")</code> para cerrar el item actual y abrir el primer item de este ejemplo.',
     "data": {
       "idPrefix": "with-one-item-opened-example",
       "headingLevel": 3,
@@ -125,12 +125,15 @@
           "headerText": "Item de acordeón 3",
           "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
         }
-      ]
+      ],
+      "attributes": {
+        "id": "accordion-history"
+      }
     }
   },
   {
     "name": "Con 2 items abiertos",
-    "description": 'Podemos abrir inicialmente items si les añadimos el parámetro <code>"open": true</code>.',
+    "description": 'Podemos abrir inicialmente items si les añadimos el parámetro <code>"open": true</code>. También puedes usar con javascript la función global <code>activateItemAccordion(elementMenu, activeItemsIds)</code> para abrir varios items, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemAccordion("accordion-history-multiple", ["with-2-items-opened-example-2-title", "with-2-items-opened-example-3-title"])</code>.',
     "data": {
       "idPrefix": "with-2-items-opened-example",
       "headingLevel": 3,
@@ -150,7 +153,10 @@
           "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
           "open": true
         }
-      ]
+      ],
+      "attributes": {
+        "id": "accordion-history-multiple"
+      }
     }
   },
   {
@@ -380,4 +386,4 @@
       ]
     }
   }
-] %}
+] %}

package/src/templates/components/accordion-history/_template.accordion-history.njk

@@ -39,7 +39,7 @@
       {% endif %}
     {% endif %}
     {% if params.showControl %}
-    <button class="c-accordion__toggle-all ml-auto py-base text-sm text-neutral-dark underline focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus text-right">
+    <button class="c-accordion__toggle-all ml-auto py-base text-sm text-neutral-dark underline focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus text-right" type="button">
       Mostrar todo
     </button>
     {% endif %}
@@ -58,6 +58,7 @@
 
         <button
         id="{{ id }}-title"
+        type="button"
         class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black {%- if item.disabled %} cursor-not-allowed{% endif %}"
         aria-controls="{{ id }}"
         {% if item.open %}

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

@@ -6,6 +6,7 @@
         <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 %}

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

@@ -1,6 +1,7 @@
 <!-- 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">

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

@@ -444,6 +444,7 @@
     },
     {
       "name": "con item activo",
+      "description": 'Podemos seleccionar inicialmente un item si le añadimos el parámetro <code>"active": true</code>. También puedes usar con javascript la función global <code>activateItemListBox(elementMenu, activeItemId)</code> para seleccionar un item, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemListBox("listbox", "with-active-item-listbox-item-2")</code> para seleccionar el segundo item de este ejemplo.',
       "data": {
         "id": "with-active-item",
         "text": "con item activo",
@@ -472,12 +473,15 @@
             "href": "#",
             "text": "Opción 5"
           }
-        ]
+        ],
+        "attributes": {
+          "id": "listbox"
+        }
       }
     },
     {
       "name": "Permite selecciones múltiples",
-      "description": 'Usa el parámetro <code>"isMultiselectable": true</code>.',
+      "description": 'Usa el parámetro <code>"isMultiselectable": true</code>. En este caso al seleccionar un item el elemento no se cerrará. También puedes usar con javascript la función global <code>activateItemListBox(elementMenu, activeItemId)</code> para seleccionar varios items, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemListBox("listbox-multiple", ["is-multiselectable-listbox-item-2", "is-multiselectable-listbox-item-3"])</code> para seleccionar el segundo y el tercer item de este ejemplo.',
       "data": {
         "id": "is-multiselectable",
         "isMultiselectable": true,
@@ -506,7 +510,10 @@
             "href": "#",
             "text": "Opción 5"
           }
-        ]
+        ],
+        "attributes": {
+          "id": "listbox-multiple"
+        }
       }
     },
     {
@@ -609,4 +616,4 @@
         ]
       }
     }
-] %}
+] %}

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

@@ -66,7 +66,7 @@ treat it as an interactive element - without this it will be
 {% endset -%}
 
 <!-- listbox -->
-<div data-module="c-listbox" class="{% if params.classesContainer %}{{ params.classesContainer }}{% else %} relative{% endif %}">
+<div data-module="c-listbox" class="{% if params.classesContainer %}{{ params.classesContainer }}{% else %} relative{% endif %}" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   {% if params.label  %}
   <div id="{{ params.id }}-label" class="mb-sm {%- if params.label.classes %} {{ params.label.classes }}{% endif %}">
     {% if params.label.html %}
@@ -87,4 +87,4 @@ treat it as an interactive element - without this it will be
     </ul>
   </div>
 </div>
-<!-- /listbox -->
+<!-- /listbox -->

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

@@ -63,6 +63,7 @@
   },
   {
     "name": "con item activo",
+    "description": 'Añade active: true a un item para mostrarlo activo inicialmente. También puedes usar con javascript la función global <code>activateItemMenuHorizontal(elementMenu, idItemSeleccionado)</code> para seleccionar un item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemMenuHorizontal("mi-menu-horizontal", "menu-item-2")</code> para desactivar el item actual y activar el segundo item de este ejemplo.',
     "data": {
       "items": [
         {
@@ -79,7 +80,7 @@
         },
         {
           "href": "http://www.google.com",
-          "text": "Opción 4 activa",
+          "text": "Opción 4",
           "active": true
         },
         {
@@ -88,7 +89,8 @@
         }
       ],
       "attributes": {
-        "aria-label": "Menu horizontal"
+        "aria-label": "Menu horizontal",
+        "id":"mi-menu-horizontal"
       }
     }
   },
@@ -311,4 +313,4 @@
       ]
     }
   }
-] %}
+] %}

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

@@ -3,7 +3,7 @@
 {% set idPrefix = params.idPrefix if params.idPrefix else "menu-item" %}
 
 <!-- menu-horizontal -->
-<nav class="c-menu-horizontal {%- if params.classes %} {{ params.classes }}{% endif -%}"
+<nav data-module="c-menu-horizontal" class="c-menu-horizontal {%- if params.classes %} {{ params.classes }}{% endif -%}"
 {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
   <ul class="c-menu-horizontal__list lg:flex lg:flex-wrap">
     {% for item in params.items %}
@@ -33,4 +33,4 @@
     {% endfor %}
   </ul>
 </nav>
-<!-- /menu-horizontal -->
+<!-- /menu-horizontal -->

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>