desy-html 8.4.0 → 8.4.1

package/docs/_include.template-header.njk

@@ -371,7 +371,9 @@
     window.addEventListener("load", function(event) {
       {% if activePage %}
       activateItemHeaderNavigation("header-nav-item", "{{ activePage }}");
-      activateItemNav("navegacion-principal-offcanvas", "mobile-{{ activePage }}");
+        {% if activeComponent == undefined %}
+          activateItemNav("navegacion-principal-offcanvas", "mobile-{{ activePage }}");
+        {% endif %}
       {% endif %}
       {% if activeComponent %}
         activateItemNav("navegacion-ejemplos-offcanvas", "page-examples-{{ activeComponent | filterslugify }}");

package/docs/examples-accordion-history.html

@@ -1,5 +1,6 @@
 {% set title = "Accordion history. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Accordion history" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-accordion.html

@@ -1,5 +1,6 @@
 {% set title = "Accordion. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Accordion" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-alert.html

@@ -1,5 +1,6 @@
 {% set title = "Alert. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Alert" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-breadcrumbs.html

@@ -1,5 +1,6 @@
 {% set title = "Breadcrumbs. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Breadcrumbs" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-button-loader.html

@@ -1,5 +1,6 @@
 {% set title = "Button loader. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Button loader" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-button.html

@@ -1,5 +1,6 @@
 {% set title = "Button. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Button" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-card.html

@@ -1,5 +1,6 @@
 {% set title = "Card. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Card" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-character-count.html

@@ -1,5 +1,6 @@
 {% set title = "Character count. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Character count" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-checkboxes.html

@@ -1,5 +1,6 @@
 {% set title = "Checkboxes. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Checkboxes" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-collapsible.html

@@ -1,5 +1,6 @@
 {% set title = "Collapsible. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Collapsible" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-date-input.html

@@ -1,5 +1,6 @@
 {% set title = "Date input. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Date input" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-description-list.html

@@ -1,5 +1,6 @@
 {% set title = "Description list. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Description list" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-details.html

@@ -1,5 +1,6 @@
 {% set title = "Details. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Details" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-dialog.html

@@ -1,5 +1,6 @@
 {% set title = "Dialog. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Dialog" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-dropdown.html

@@ -1,5 +1,6 @@
 {% set title = "Dropdown. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Dropdown" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-error-message.html

@@ -1,5 +1,6 @@
 {% set title = "Error message. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Error message" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-error-summary.html

@@ -1,5 +1,6 @@
 {% set title = "Error summary. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Error summary" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-fieldset.html

@@ -1,5 +1,6 @@
 {% set title = "Fieldset. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Fieldset" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-file-upload.html

@@ -1,5 +1,6 @@
 {% set title = "File upload. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "File upload" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-footer.html

@@ -1,5 +1,6 @@
 {% set title = "Footer. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Footer" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-header-advanced.html

@@ -1,5 +1,6 @@
 {% set title = "Header advanced. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Header advanced" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-header-mini.html

@@ -1,5 +1,6 @@
 {% set title = "Header mini. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Header mini" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-header.html

@@ -1,5 +1,6 @@
 {% set title = "Header. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Header" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-hint.html

@@ -1,5 +1,6 @@
 {% set title = "Hint. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Hint" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-input-group.html

@@ -1,5 +1,6 @@
 {% set title = "Input group. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Input group" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-input.html

@@ -1,5 +1,6 @@
 {% set title = "Input. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Input" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-item.html

@@ -1,5 +1,6 @@
 {% set title = "Item. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Item" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-label.html

@@ -1,5 +1,6 @@
 {% set title = "Label. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Label" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-links-list.html

@@ -1,5 +1,6 @@
 {% set title = "Links list. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Links list" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-listbox.html

@@ -1,5 +1,6 @@
 {% set title = "Listbox. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Listbox" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-media-object.html

@@ -1,5 +1,6 @@
 {% set title = "Media object. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Media object" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-menu-horizontal.html

@@ -1,5 +1,6 @@
 {% set title = "Menu horizontal. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Menu horizontal" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-menu-navigation.html

@@ -1,5 +1,6 @@
 {% set title = "Menu navigation. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Menu navigation" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-menu-vertical.html

@@ -1,5 +1,6 @@
 {% set title = "Menu vertical. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Menu vertical" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-menubar.html

@@ -1,5 +1,6 @@
 {% set title = "Menubar. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Menubar" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-modal.html

@@ -1,5 +1,6 @@
 {% set title = "Modal. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Modal" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-nav.html

@@ -1,5 +1,6 @@
 {% set title = "Nav. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Nav" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-notification.html

@@ -1,5 +1,6 @@
 {% set title = "Notification. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Notification" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-pagination.html

@@ -1,5 +1,6 @@
 {% set title = "Pagination. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Pagination" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-pill.html

@@ -1,5 +1,6 @@
 {% set title = "Pill. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Pill" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-radios.html

@@ -1,5 +1,6 @@
 {% set title = "Radios. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Radios" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-searchbar.html

@@ -1,5 +1,6 @@
 {% set title = "Searchbar. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Searchbar" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-select.html

@@ -1,5 +1,6 @@
 {% set title = "Select. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Select" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-skip-link.html

@@ -1,5 +1,6 @@
 {% set title = "Skip link. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Skip link" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-spinner.html

@@ -1,5 +1,6 @@
 {% set title = "Spinner. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Spinner" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-status-item.html

@@ -1,5 +1,6 @@
 {% set title = "Status item. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Status item" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-status.html

@@ -1,5 +1,6 @@
 {% set title = "Status. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Status" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-table-advanced.html

@@ -1,5 +1,6 @@
 {% set title = "Table advanced. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Table advanced" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-table.html

@@ -1,5 +1,6 @@
 {% set title = "Table. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Table" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-tabs.html

@@ -1,5 +1,6 @@
 {% set title = "Tabs. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Tabs" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-textarea.html

@@ -1,5 +1,6 @@
 {% set title = "Textarea. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Textarea" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-toggle.html

@@ -1,5 +1,6 @@
 {% set title = "Toggle. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Toggle" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-tooltip.html

@@ -1,5 +1,6 @@
 {% set title = "Tooltip. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Tooltip" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/examples-tree.html

@@ -1,5 +1,6 @@
 {% set title = "Tree. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
 
+{% set activePage = "page-componentes" %}
 {% set activeComponent = "Tree" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}

package/docs/index.html

@@ -38,6 +38,11 @@
 
   <h2>Changelog (English)</h2>
   <p>What's new in the latest version of desy-html</p>
+  <h3>v.8.4.1</h3>
+  <ul class="text-sm">
+    <li>Active items are font-bold now in all components.</li>
+    <li>Minor improvements.</li>
+  </ul>
   <h3>v.8.4.0</h3>
   <ul class="text-sm">
     <li>Added global function to select an item in Nav.</li>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "8.4.0",
+  "version": "8.4.1",
   "description": "desy-html contains the code you need to start building a user interface for Gobierno de Aragón government webapps.",
   "author": {
     "name": "Desy (SDA Servicios Digitales de Aragón)",

package/src/js/aria/MenuVertical.js

@@ -25,8 +25,8 @@ export function MenuVertical(aria) {
     };
 
     aria.MenuVertical.prototype.wrapActiveElement = function (elementActive) {
-      elementActive.setAttribute('aria-current', 'true');
-      elementActive.innerHTML = `<strong>${elementActive.textContent}</strong>`;
+      elementActive.setAttribute('aria-current', 'page');
+      elementActive.innerHTML = `<strong class="font-bold">${elementActive.textContent}</strong>`;
     };
 
     aria.MenuVertical.prototype.deactivateElement = function (elementDeactivated) {

package/src/js/aria/Nav.js

@@ -25,8 +25,8 @@ export function Nav(aria) {
     };
 
     aria.Nav.prototype.wrapActiveElement = function (elementActive) {
-      elementActive.setAttribute('aria-current', 'true');
-      elementActive.innerHTML = `<strong>${elementActive.textContent}</strong>`;
+      elementActive.setAttribute('aria-current', 'page');
+      elementActive.innerHTML = `<strong class="font-bold">${elementActive.textContent}</strong>`;
     };
 
     aria.Nav.prototype.deactivateElement = function (elementDeactivated) {

package/src/js/desy-html.js

@@ -221,53 +221,37 @@ export function menubarComponent(aria) {
   PopupMenuAction(aria);
   MenubarItemAction(aria);
   MenubarAction(aria);
-  const modules = document.querySelectorAll('[data-module]');
-  for (const item in modules) if (modules.hasOwnProperty(item)) {
-    const moduleValue = modules[item].getAttribute('data-module');
-
-    if (moduleValue == 'c-menubar'){
-      const menubar = new aria.MenubarAction(modules[item]);
-      menubar.init(null);
-    }
-  }
+  const modules = document.querySelectorAll('[data-module="c-menubar"]');
+  [...modules].forEach((module) => {
+    const menubar = new aria.MenubarAction(module);
+    menubar.init(null);
+  });
 }
 
 export function menuNavigationComponent(aria) {
   DisclosureNav(aria);
-  const modules = document.querySelectorAll('[data-module]');
-  for (const item in modules) if (modules.hasOwnProperty(item)) {
-    const moduleValue = modules[item].getAttribute('data-module');
-
-    if (moduleValue == 'c-menu-navigation'){
-      const menuNavigation = new aria.DisclosureNav(modules[item]);
-      menuNavigation.init();
-    }
-  }
+  const modules = document.querySelectorAll('[data-module="c-menu-navigation"]');
+  [...modules].forEach((module) => {
+    const menuNavigation = new aria.DisclosureNav(module);
+    menuNavigation.init();
+  });
 }
 
 export function tableAdvancedComponent(aria) {
   utils(aria);
   dataGrid(aria);
-  const modules = document.querySelectorAll('[data-module]');
-  for (const item in modules) if (modules.hasOwnProperty(item)) {
-    const moduleValue = modules[item].getAttribute('data-module');
-
-    if (moduleValue == 'c-table-advanced'){
-      const grid = new aria.Grid(modules[item]);
-    }
-  }
+  const modules = document.querySelectorAll('[data-module="c-table-advanced"]');
+  [...modules].forEach((module) => {
+    const grid = new aria.Grid(module);
+  });
 }
 
 export function tabsComponent(aria) {
   tabs(aria);
-  const modules = document.querySelectorAll('[data-module]');
-  for (const item in modules) if (modules.hasOwnProperty(item)) {
-    const moduleValue = modules[item].getAttribute('data-module');
-
-    if (moduleValue == 'c-tabs'){
-      aria.tabsInit(modules[item]);
-    }
-  }
+  const modules = document.querySelectorAll('[data-module="c-tabs"]');
+  [...modules].forEach((module) => {
+    aria.tabsInit(module);
+  });
 }
 
 export function tooltipComponent(aria) {
@@ -383,39 +367,27 @@ export function checkBoxComponent(aria) {
 
 export function MenuVerticalComponent(aria) {
   MenuVertical(aria);
-  const modules = document.querySelectorAll('[data-module]');
-  for (const item in modules) if (modules.hasOwnProperty(item)) {
-    const moduleValue = modules[item].getAttribute('data-module');
-
-    if (moduleValue == 'c-menu-vertical'){
-      const menuVertical = new aria.MenuVertical(modules[item]);
-      menuVertical.init(null);
-    }
-  }
+  const modules = document.querySelectorAll('[data-module="c-menu-vertical"]');
+  [...modules].forEach((module) => {
+    const menuVertical = new aria.MenuVertical(module);
+    menuVertical.init(null);
+  });
 }
 
 export function HeaderNavigationComponent(aria) {
   HeaderNavigation(aria);
-  const modules = document.querySelectorAll('[data-module]');
-  for (const item in modules) if (modules.hasOwnProperty(item)) {
-    const moduleValue = modules[item].getAttribute('data-module');
-
-    if (moduleValue == 'c-header-navigation'){
-      const headerNavigation = new aria.HeaderNavigation(modules[item]);
-      headerNavigation.init(null);
-    }
-  }
+  const modules = document.querySelectorAll('[data-module="c-header-navigation"]');
+  [...modules].forEach((module) => {
+    const headerNavigation = new aria.HeaderNavigation(module);
+    headerNavigation.init(null);
+  });
 }
 
 export function NavComponent(aria) {
   Nav(aria);
-  const modules = document.querySelectorAll('[data-module]');
-  for (const item in modules) if (modules.hasOwnProperty(item)) {
-    const moduleValue = modules[item].getAttribute('data-module');
-
-    if (moduleValue == 'c-nav'){
-      const nav = new aria.Nav(modules[item]);
-      nav.init(null);
-    }
-  }
+  const modules = document.querySelectorAll('[data-module="c-nav"]');
+  [...modules].forEach((module) => {
+    const nav = new aria.Nav(module);
+    nav.init(null);
+  });
 }

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

@@ -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", "header-nav-item-3")</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>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.',
     "data": {
       "homepageUrl": "/",
       "idPrefix": "mi-menu",

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

@@ -627,7 +627,7 @@
 {% set examples =  [
   {
     "name": "por defecto",
-    "description": 'Esta es la cabecera por defecto para sitios web de submarcas del Gobierno de Aragón. Tiene un título que enlaza a la página de inicio. 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", "header-nav-item-3")</code> para desactivar el item actual y activar el tercer item del header de la página.',
+    "description": 'Esta es la cabecera por defecto para sitios web de submarcas del Gobierno de Aragón. Tiene un título que enlaza a la página de inicio. 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.',
     "data": {
       "title": {
         "homepageUrl": "/",

package/src/templates/components/links-list/_template.links-list.njk

@@ -31,7 +31,7 @@
           {% endif %}
           <div class="flex-1">
             {% if item.active %}
-            <strong>{{ item.html | safe if item.html else item.text }}</strong>
+            <strong class="font-bold">{{ item.html | safe if item.html else item.text }}</strong>
             {% else %}
             {{ item.html | safe if item.html else item.text }}
             {% endif %}
@@ -51,7 +51,7 @@
           {% endif %}
           <div class="flex-1">
             {% if item.active %}
-            <strong>{{ item.html | safe if item.html else item.text }}</strong>
+            <strong class="font-bold">{{ item.html | safe if item.html else item.text }}</strong>
             {% else %}
             {{ item.html | safe if item.html else item.text }}
             {% endif %}

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

@@ -17,6 +17,10 @@
       @apply lg:border-b-0;
       @apply lg:rounded-t;
       @apply no-underline;
+
+      strong {
+        @apply font-normal;
+      }
     }
   }
 
@@ -38,6 +42,10 @@
       @apply border-b-0;
       @apply rounded-t;
       @apply no-underline;
+
+      strong {
+        @apply font-normal;
+      }
     }
 
     .c-menu-horizontal__link {
@@ -53,6 +61,13 @@
       @apply text-black;
       @apply outline-none;
     }
+
+    &.c-menu-horizontal__active {
+      @apply no-underline;
+      &:hover {
+        @apply underline;
+      }
+    }
   }
 
   .c-menu-horizontal--scroll {

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

@@ -16,9 +16,10 @@
     {% endif %}
     <li>
     {% if item.active %}
-      <span {%- if id %} id="{{ id }}"{% endif %} class="c-menu-horizontal__active flex items-center relative py-sm lg:px-lg lg:py-base border border-transparent truncate font-semibold {%- if item.classes %} {{ item.classes }}{% endif -%}" {%- if item.title %} title="{{ item.title }}"{% endif %} aria-current="page" {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-        <strong>{{ item.html | safe if item.html else item.text }}</strong>
-      </span>
+      <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="c-menu-horizontal__link c-menu-horizontal__active relative flex items-center py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none
+          {%- if item.disabled %} no-underline pointer-events-none{% endif -%} {%- if item.classes %} {{ item.classes }}{% 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 %} aria-current="page" {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+        <strong class="font-bold">{{ item.html | safe if item.html else item.text }}</strong>
+      </a>
     {% else %}
       <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="c-menu-horizontal__link relative flex items-center py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none
           {%- if item.disabled %} no-underline pointer-events-none{% endif -%} {%- if item.classes %} {{ item.classes }}{% 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 -%}>

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

@@ -51,8 +51,8 @@
           <li>
             {% if subitem.href %}
             {% if subitem.active %}
-            <span {%- if subitem.id %} id="{{ subId }}"{% endif %} class="flex items-center px-base py-sm text-sm font-semibold {%- if subitem.classes %} {{ subitem.classes }}{% endif -%}" aria-current="page" {{- commonSubItemAttributes | safe }}>
-              <strong>{{ subitem.html | safe if subitem.html else subitem.text }}</strong>
+            <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 }}>
@@ -65,7 +65,7 @@
             {% 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>{{ subitem.html | safe if subitem.html else subitem.text }}</strong>
+              <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 %}

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

@@ -17,7 +17,7 @@
       {% if item.href %}
       <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black {%- if params.hasUnderline %} underline{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %} {%- if not item.disabled %} hover:text-primary-base hover:underline{% endif %} {%- if item.disabled %} no-underline pointer-events-none{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %}{%- if item.active %} aria-current="page"{% endif %} {% if item.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {% if item.target %} target="{{ item.target }}"{% endif %}{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
         {% if item.active %}
-        <strong>{{ item.html | safe if item.html else item.text }}</strong>
+        <strong class="font-bold">{{ item.html | safe if item.html else item.text }}</strong>
         {% else %}
         {{ item.html | safe if item.html else item.text }}
         {% endif %}
@@ -25,7 +25,7 @@
       {% else %}
       <span {%- if id %} id="{{ id }}"{% endif %} class="block px-xs {%- if item.classes %} {{ item.classes }}{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %}{%- if item.active %} aria-current="page"{% endif %} {% if item.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
         {% if item.active %}
-        <strong>{{ item.html | safe if item.html else item.text }}</strong>
+        <strong class="font-bold">{{ item.html | safe if item.html else item.text }}</strong>
         {% else %}
         {{ item.html | safe if item.html else item.text }}
         {% endif %}
@@ -45,7 +45,7 @@
             {% if subitem.href %}
           <a {%- if subId %} id="{{ subId }}"{% endif %} href="{{ subitem.href }}" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black {%- if params.hasUnderline %} underline{% endif %} {%- if subitem.classes %} {{ subitem.classes }}{% endif %} {%- if subitem.disabled %} no-underline pointer-events-none{% endif %}" {%- if subitem.title %} title="{{ subitem.title }}"{% endif %}{%- if subitem.active %} aria-current="page"{% endif %} {% if subitem.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {% if subitem.target %} target="{{ subitem.target }}"{% endif %}{%- for attribute, value in subitem.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
             {% if subitem.active %}
-            <strong>{{ subitem.html | safe if subitem.html else subitem.text }}</strong>
+            <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 %}
@@ -53,7 +53,7 @@
             {% else %}
           <span {%- if subId %} id="{{ subId }}"{% endif %} class="block px-xs {%- if subitem.classes %} {{ subitem.classes }}{% 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>{{ subitem.html | safe if subitem.html else subitem.text }}</strong>
+            <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 %}

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

@@ -19,9 +19,9 @@
   {% endif %}
   {% set commonItemAttributes %} {% if id %} id="{{ id }}"{% endif %} {%- if item.title %} title="{{ item.title }}"{% endif %} {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %}{% endset %}
 <li>
-  <a href="{{ item.href }}" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black{%- if item.classes %} {{ item.classes }}{% endif -%} {%- if item.disabled %} pointer-events-none{% endif -%}" {%- if item.disabled %} aria-disabled="true" tabindex="-1"{% endif -%} {%- if item.target %} target="{{ item.target }}"{% endif %} {{- commonItemAttributes | safe }}>
+  <a href="{{ item.href }}" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black{%- if item.classes %} {{ item.classes }}{% endif -%} {%- if item.disabled %} pointer-events-none{% endif -%}" {%- if item.disabled %} aria-disabled="true" tabindex="-1"{% endif -%} {%- if item.target %} target="{{ item.target }}"{% endif %}  {% if item.active %} aria-current="page"{% endif %}{{- commonItemAttributes | safe }}>
       {% if item.active %}
-      <strong>{{ item.html | safe if item.html else item.text }}</strong>
+      <strong class="font-bold">{{ item.html | safe if item.html else item.text }}</strong>
       {% else %}
       {{ item.html | safe if item.html else item.text }}
       {% endif %}