desy-html 8.2.1 → 8.3.0

package/docs/_include.template-header.njk

@@ -299,4 +299,11 @@
     }) }}
   </li>
 </ul>
-{% endcall %}
+{% endcall %}
+{% if activeSection != undefined %}
+  <script>
+    window.addEventListener("load", function(event) {
+      activateItemHeaderNavigation("header-navigation-header-nav-item", "{{ activeSection }}");
+    });
+  </script>
+{% endif %}

package/docs/catalogo.html

@@ -1,4 +1,5 @@
 {% set title = "Catálogo visual de componentes. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-3" %}
 {% extends "_template.default.njk" %}
 {% block contentBlock %}
   <div class="pb-lg"></div>

package/docs/componentes.html

@@ -1,4 +1,5 @@
 {% set title = "Lista de componentes. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.default.njk" %}
 
 {% from "components/menu-vertical/_macro.menu-vertical.njk" import componentMenuVertical %}

package/docs/estilos.html

@@ -1,4 +1,5 @@
 {% set title = "Estilos: colores, espaciado, retícula y tipografía. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-2" %}
 {% extends "_template.default.njk" %}
 
 {% block contentBlock %}

package/docs/examples-accordion-history.html

@@ -1,4 +1,5 @@
 {% set title = "Accordion history. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/accordion-history/_examples.accordion-history.njk" as exampleData %}

package/docs/examples-accordion.html

@@ -1,4 +1,5 @@
 {% set title = "Accordion. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/accordion/_examples.accordion.njk" as exampleData %}

package/docs/examples-alert.html

@@ -1,4 +1,5 @@
 {% set title = "Alert. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/alert/_examples.alert.njk" as exampleData %}

package/docs/examples-breadcrumbs.html

@@ -1,4 +1,5 @@
 {% set title = "Breadcrumbs. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/breadcrumbs/_examples.breadcrumbs.njk" as exampleData %}

package/docs/examples-button-loader.html

@@ -1,4 +1,5 @@
 {% set title = "Button loader. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/button-loader/_examples.button-loader.njk" as exampleData %}

package/docs/examples-button.html

@@ -1,4 +1,5 @@
 {% set title = "Button. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/button/_examples.button.njk" as exampleData %}

package/docs/examples-card.html

@@ -1,4 +1,5 @@
 {% set title = "Card. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/card/_examples.card.njk" as exampleData %}

package/docs/examples-character-count.html

@@ -1,4 +1,5 @@
 {% set title = "Character count. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/character-count/_examples.character-count.njk" as exampleData %}

package/docs/examples-checkboxes.html

@@ -1,4 +1,5 @@
 {% set title = "Checkboxes. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/checkboxes/_examples.checkboxes.njk" as exampleData %}

package/docs/examples-collapsible.html

@@ -1,4 +1,5 @@
 {% set title = "Collapsible. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/collapsible/_examples.collapsible.njk" as exampleData %}

package/docs/examples-date-input.html

@@ -1,4 +1,5 @@
 {% set title = "Date input. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/date-input/_examples.date-input.njk" as exampleData %}

package/docs/examples-description-list.html

@@ -1,4 +1,5 @@
 {% set title = "Description list. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/description-list/_examples.description-list.njk" as exampleData %}

package/docs/examples-details.html

@@ -1,4 +1,5 @@
 {% set title = "Details. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/details/_examples.details.njk" as exampleData %}

package/docs/examples-dialog.html

@@ -1,4 +1,5 @@
 {% set title = "Dialog. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/dialog/_examples.dialog.njk" as exampleData %}

package/docs/examples-dropdown.html

@@ -1,4 +1,5 @@
 {% set title = "Dropdown. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/dropdown/_examples.dropdown.njk" as exampleData %}

package/docs/examples-error-message.html

@@ -1,4 +1,5 @@
 {% set title = "Error message. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/error-message/_examples.error-message.njk" as exampleData %}

package/docs/examples-error-summary.html

@@ -1,4 +1,5 @@
 {% set title = "Error summary. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/error-summary/_examples.error-summary.njk" as exampleData %}

package/docs/examples-fieldset.html

@@ -1,4 +1,5 @@
 {% set title = "Fieldset. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/fieldset/_examples.fieldset.njk" as exampleData %}

package/docs/examples-file-upload.html

@@ -1,4 +1,5 @@
 {% set title = "File upload. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/file-upload/_examples.file-upload.njk" as exampleData %}

package/docs/examples-footer.html

@@ -1,4 +1,5 @@
 {% set title = "Footer. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/footer/_examples.footer.njk" as exampleData %}

package/docs/examples-header-advanced.html

@@ -1,4 +1,5 @@
 {% set title = "Header advanced. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/header-advanced/_examples.header-advanced.njk" as exampleData %}

package/docs/examples-header-mini.html

@@ -1,4 +1,5 @@
 {% set title = "Header mini. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/header-mini/_examples.header-mini.njk" as exampleData %}

package/docs/examples-header.html

@@ -1,4 +1,5 @@
 {% set title = "Header. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/header/_examples.header.njk" as exampleData %}

package/docs/examples-hint.html

@@ -1,4 +1,5 @@
 {% set title = "Hint. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/hint/_examples.hint.njk" as exampleData %}

package/docs/examples-input-group.html

@@ -1,4 +1,5 @@
 {% set title = "Input group. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/input-group/_examples.input-group.njk" as exampleData %}

package/docs/examples-input.html

@@ -1,4 +1,5 @@
 {% set title = "Input. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/input/_examples.input.njk" as exampleData %}

package/docs/examples-item.html

@@ -1,4 +1,5 @@
 {% set title = "Item. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/item/_examples.item.njk" as exampleData %}

package/docs/examples-label.html

@@ -1,4 +1,5 @@
 {% set title = "Label. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/label/_examples.label.njk" as exampleData %}

package/docs/examples-links-list.html

@@ -1,4 +1,5 @@
 {% set title = "Links list. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/links-list/_examples.links-list.njk" as exampleData %}

package/docs/examples-listbox.html

@@ -1,4 +1,5 @@
 {% set title = "Listbox. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/listbox/_examples.listbox.njk" as exampleData %}

package/docs/examples-media-object.html

@@ -1,4 +1,5 @@
 {% set title = "Media object. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/media-object/_examples.media-object.njk" as exampleData %}

package/docs/examples-menu-horizontal.html

@@ -1,4 +1,5 @@
 {% set title = "Menu horizontal. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/menu-horizontal/_examples.menu-horizontal.njk" as exampleData %}

package/docs/examples-menu-navigation.html

@@ -1,4 +1,5 @@
 {% set title = "Menu navigation. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/menu-navigation/_examples.menu-navigation.njk" as exampleData %}

package/docs/examples-menu-vertical.html

@@ -1,4 +1,5 @@
 {% set title = "Menu vertical. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/menu-vertical/_examples.menu-vertical.njk" as exampleData %}

package/docs/examples-menubar.html

@@ -1,4 +1,5 @@
 {% set title = "Menubar. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/menubar/_examples.menubar.njk" as exampleData %}

package/docs/examples-modal.html

@@ -1,4 +1,5 @@
 {% set title = "Modal. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/modal/_examples.modal.njk" as exampleData %}

package/docs/examples-nav.html

@@ -1,4 +1,5 @@
 {% set title = "Nav. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/nav/_examples.nav.njk" as exampleData %}

package/docs/examples-notification.html

@@ -1,4 +1,5 @@
 {% set title = "Notification. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/notification/_examples.notification.njk" as exampleData %}

package/docs/examples-pagination.html

@@ -1,4 +1,5 @@
 {% set title = "Pagination. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/pagination/_examples.pagination.njk" as exampleData %}

package/docs/examples-pill.html

@@ -1,4 +1,5 @@
 {% set title = "Pill. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/pill/_examples.pill.njk" as exampleData %}

package/docs/examples-radios.html

@@ -1,4 +1,5 @@
 {% set title = "Radios. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/radios/_examples.radios.njk" as exampleData %}

package/docs/examples-searchbar.html

@@ -1,4 +1,5 @@
 {% set title = "Searchbar. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/searchbar/_examples.searchbar.njk" as exampleData %}

package/docs/examples-select.html

@@ -1,4 +1,5 @@
 {% set title = "Select. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/select/_examples.select.njk" as exampleData %}

package/docs/examples-skip-link.html

@@ -1,4 +1,5 @@
 {% set title = "Skip link. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/skip-link/_examples.skip-link.njk" as exampleData %}

package/docs/examples-spinner.html

@@ -1,4 +1,5 @@
 {% set title = "Spinner. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/spinner/_examples.spinner.njk" as exampleData %}

package/docs/examples-status-item.html

@@ -1,4 +1,5 @@
 {% set title = "Status item. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/status-item/_examples.status-item.njk" as exampleData %}

package/docs/examples-status.html

@@ -1,4 +1,5 @@
 {% set title = "Status. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/status/_examples.status.njk" as exampleData %}

package/docs/examples-table-advanced.html

@@ -1,4 +1,5 @@
 {% set title = "Table advanced. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/table-advanced/_examples.table-advanced.njk" as exampleData %}

package/docs/examples-table.html

@@ -1,4 +1,5 @@
 {% set title = "Table. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/table/_examples.table.njk" as exampleData %}

package/docs/examples-tabs.html

@@ -1,4 +1,5 @@
 {% set title = "Tabs. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/tabs/_examples.tabs.njk" as exampleData %}

package/docs/examples-textarea.html

@@ -1,4 +1,5 @@
 {% set title = "Textarea. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/textarea/_examples.textarea.njk" as exampleData %}

package/docs/examples-toggle.html

@@ -1,4 +1,5 @@
 {% set title = "Toggle. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/toggle/_examples.toggle.njk" as exampleData %}

package/docs/examples-tooltip.html

@@ -1,4 +1,5 @@
 {% set title = "Tooltip. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/tooltip/_examples.tooltip.njk" as exampleData %}

package/docs/examples-tree.html

@@ -1,4 +1,5 @@
 {% set title = "Tree. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-4" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/tree/_examples.tree.njk" as exampleData %}

package/docs/index.html

@@ -1,5 +1,6 @@
 {% set title = "Desy. Sistema de diseño para aplicaciones web. Gobierno de Aragón" %}
 {% set description = "Documentación y librería desy-html para implementarlo en HTML, CSS y Javascript con un paquete NPM." %}
+{% set activeSection = "header-nav-item-1" %}
 {% extends "_template.default.njk" %}
 {% block contentBlock %}
 
@@ -37,6 +38,17 @@
 
   <h2>Changelog (English)</h2>
   <p>What's new in the latest version of desy-html</p>
+  <h3>v.8.3.0</h3>
+  <ul class="text-sm">
+    <li>Added global function to select an item in Header navigation in Header and Header advanced components.</li>
+    <li>Docs now show the active section in header menu.</li>
+    <li>Minor fixes.</li>
+  </ul>
+  <h3>v.8.2.2</h3>
+  <ul class="text-sm">
+    <li>Fixed duplicate ids in subitems in components with subitems.</li>
+    <li>Minor fixes.</li>
+  </ul>
   <h3>v.8.2.1</h3>
   <ul class="text-sm">
     <li>Minor fixes.</li>

package/docs/plantillas.html

@@ -1,4 +1,5 @@
 {% set title = "Plantillas para desy-html. Gobierno de Aragón" %}
+{% set activeSection = "header-nav-item-5" %}
 {% extends "_template.default.njk" %}
 
 {% block contentBlock %}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "8.2.1",
+  "version": "8.3.0",
   "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/HeaderNavigation.js

@@ -0,0 +1,55 @@
+export function HeaderNavigation(aria) {
+  (function () {
+    aria.HeaderNavigation = function (domNode) {
+      this.domNode = domNode;
+    };
+
+    aria.HeaderNavigation.prototype.init = function () {
+      this.valueActive = this.domNode.dataset.menuActive;
+      if (this.valueActive) {
+        this.activateElement(this.valueActive);
+      }
+    };
+
+    aria.HeaderNavigation.prototype.activateElement = function (elementActive) {
+      this.domNode.querySelectorAll('li').forEach((element) => {
+        const getLink = element.querySelector('a') || element.querySelector('span');
+        if (getLink) {
+          if (getLink.id === elementActive) {
+            this.wrapActiveElement(getLink);
+          } else {
+            this.deactivateElement(getLink);
+          }
+        }
+      });
+    };
+
+    aria.HeaderNavigation.prototype.wrapActiveElement = function (elementActive) {
+      elementActive.setAttribute('aria-current', 'true');
+      elementActive.innerHTML = `<strong class="font-bold">${elementActive.textContent}</strong>`;
+    };
+
+    aria.HeaderNavigation.prototype.deactivateElement = function (elementDeactivated) {
+      elementDeactivated.removeAttribute('aria-current');
+      elementDeactivated.innerHTML = elementDeactivated.textContent;
+    };
+
+    window.activateItemHeaderNavigation = function (menuId, activeItemId) {
+      const menu = document.getElementById(menuId);
+      if (menu) {
+        const activeItem = document.querySelector(`#${menuId} #${activeItemId}`);
+        if (activeItem) {
+          const menuInstance = new aria.HeaderNavigation(menu);
+          menuInstance.activateElement(activeItemId);
+          return [menu, activeItem];
+        } else {
+          console.log('There is no element with this id in the menu.');
+          return null;
+        }
+      } else {
+        console.log('There is no menu with this id in the document.');
+        return null;
+      }
+    };
+  }());
+}

package/src/js/aria/MenuVertical.js

@@ -6,66 +6,50 @@ export function MenuVertical(aria) {
 
     aria.MenuVertical.prototype.init = function () {
       this.valueActive = this.domNode.dataset.menuActive;
-      if(this.valueActive) {
+      if (this.valueActive) {
         this.activateElement(this.valueActive);
       }
     };
 
     aria.MenuVertical.prototype.activateElement = function (elementActive) {
-      this.domNode.querySelectorAll('li').forEach((element, index) => {
-        const processElement = function (elem, parent) {
-          let getId = elem.id
-          if(getId == elementActive){
-            parent.wrapActiveElement(elem)
+      this.domNode.querySelectorAll('li').forEach((element) => {
+        const getLink = element.querySelector('a') || element.querySelector('span');
+        if (getLink) {
+          if (getLink.id === elementActive) {
+            this.wrapActiveElement(getLink);
           } else {
-            parent.deactivateElement(elem)
+            this.deactivateElement(getLink);
           }
         }
-        if (element.querySelector('a')) {
-          const getLink = element.querySelector('a');
-          processElement(getLink, this);
-        } else if (element.querySelector('span')) {
-          const getLink = element.querySelector('span');
-          processElement(getLink, this);
-        }
-
-      })
+      });
     };
 
     aria.MenuVertical.prototype.wrapActiveElement = function (elementActive) {
-      const getText = elementActive.textContent;
-      const strongElement = `<strong>${getText}</strong>`;
-      elementActive.innerHTML = strongElement;
+      elementActive.setAttribute('aria-current', 'true');
+      elementActive.innerHTML = `<strong>${elementActive.textContent}</strong>`;
     };
 
     aria.MenuVertical.prototype.deactivateElement = function (elementDeactivated) {
-      const getText = elementDeactivated.textContent;
-      const strongElement = `${getText}`;
-      elementDeactivated.innerHTML = strongElement;
+      elementDeactivated.removeAttribute('aria-current');
+      elementDeactivated.innerHTML = elementDeactivated.textContent;
     };
 
-    window.activateItemMenuVertical = function (menu, elementActive) {
-      menu.querySelectorAll('li').forEach((element, index) => {
-        const processElement = function (elem) {
-          let getId = elem.id
-          if(getId == elementActive){
-            const getText = elem.textContent;
-            const strongElement = `<strong>${getText}</strong>`;
-            elem.innerHTML = strongElement;
-          } else {
-            const getText = elem.textContent;
-            const strongElement = `${getText}`;
-            elem.innerHTML = strongElement;
-          }
-        }
-        if (element.querySelector('a')) {
-          let getLink = element.querySelector('a');
-          processElement(getLink);
-        } else if (element.querySelector('span')) {
-          let getLink = element.querySelector('span');
-          processElement(getLink);
+    window.activateItemMenuVertical = function (menuId, activeItemId) {
+      const menu = document.getElementById(menuId);
+      if (menu) {
+        const activeItem = document.querySelector(`#${menuId} #${activeItemId}`);
+        if (activeItem) {
+          const menuInstance = new aria.MenuVertical(menu);
+          menuInstance.activateElement(activeItemId);
+          return [menu, activeItem];
+        } else {
+          console.log('There is no element with this id in the menu.');
+          return null;
         }
-      })
+      } else {
+        console.log('There is no menu with this id in the document.');
+        return null;
+      }
     };
   }());
 }

package/src/js/desy-html.js

@@ -18,6 +18,7 @@ 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 { HeaderNavigation } from './aria/HeaderNavigation.js';
 
 
 export function accordionComponent(aria) {
@@ -391,3 +392,16 @@ export function MenuVerticalComponent(aria) {
     }
   }
 }
+
+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);
+    }
+  }
+}

package/src/js/index.js

@@ -20,7 +20,8 @@ import {
   notificationComponent,
   radioButtonComponent,
   checkBoxComponent,
-  MenuVerticalComponent
+  MenuVerticalComponent,
+  HeaderNavigationComponent
 } from './desy-html.js';
 
 var aria = aria || {};
@@ -42,6 +43,7 @@ notificationComponent(aria);
 radioButtonComponent(aria);
 checkBoxComponent(aria);
 MenuVerticalComponent(aria);
+HeaderNavigationComponent(aria);
 
 //Using the browser API to copy code to the clipboard
 const copyButtons = document.querySelectorAll('[data-module = "c-button-copy"]');

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

@@ -5,12 +5,7 @@
     {%- if item.id -%}
       {%- set id = item.id -%}
     {%- else -%}
-      {#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
-      {%- if loop.first -%}
-        {%- set id = idPrefix %}
-      {%- else -%}
-        {%- set id = idPrefix + "-" + loop.index0 -%}
-      {%- endif -%}
+      {%- set id = idPrefix + "-" + loop.index -%}
     {%- endif -%}
     {%- if item.open -%}
       {%- set conditionalValue = id -%}
@@ -54,12 +49,7 @@
         {%- if item.id -%}
           {%- set id = item.id -%}
         {%- else -%}
-          {#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
-          {%- if loop.first -%}
-            {%- set id = idPrefix %}
-          {%- else -%}
-            {%- set id = idPrefix + "-" + loop.index0 -%}
-          {%- endif -%}
+          {%- set id = idPrefix + "-" + loop.index -%}
         {%- endif %}
 
     <div class="-my-px px-xs py-sm border-t border-b border-neutral-base">

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

@@ -5,12 +5,7 @@
     {%- if item.id -%}
       {%- set id = item.id -%}
     {%- else -%}
-      {#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
-      {%- if loop.first -%}
-        {%- set id = idPrefix %}
-      {%- else -%}
-        {%- set id = idPrefix + "-" + loop.index0 -%}
-      {%- endif -%}
+      {%- set id = idPrefix + "-" + loop.index -%}
     {%- endif -%}
     {%- if item.open -%}
       {%- set conditionalValue = id -%}
@@ -55,12 +50,7 @@
       {%- if item.id -%}
         {%- set id = item.id -%}
       {%- else -%}
-        {#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
-        {%- if loop.first -%}
-          {%- set id = idPrefix %}
-        {%- else -%}
-          {%- set id = idPrefix + "-" + loop.index0 -%}
-        {%- endif -%}
+        {%- set id = idPrefix + "-" + loop.index -%}
       {%- endif %}
 
     <div class="relative -my-px px-xs py-sm border-t border-b border-neutral-base">

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

@@ -2,28 +2,23 @@
    instead -#}
 {% set idPrefix = params.idPrefix if params.idPrefix else "header-nav-item" %}
 <!-- header__navigation -->
-<nav class="{{ params.classes if params.classes else 'hidden lg:block' }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+<nav id="header-navigation-{{ idPrefix }}" data-module="c-header-navigation" class="{{ params.classes if params.classes else 'hidden lg:block' }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   <ul class="ml-sm flex flex-wrap items-baseline">
   {% for item in params.items %}
-  	{% if item %}
+    {% if item %}
     <li>
-    	{#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
-    	{% if item.id %}
-    	{% set id = item.id %}
-    	{% else %}
-    	{#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
-    	{% if loop.first %}
-    	{% set id = idPrefix %}
-    	{% else %}
-    	{% set id = idPrefix + "-" + loop.index %}
-    	{% endif %}
-    	{% endif %}
+      {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
+      {% if item.id %}
+      {% set id = item.id %}
+      {% else %}
+      {% set id = idPrefix + "-" + loop.index %}
+      {% endif %}
       {% if item.active %}
 
-      <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="max-w-40 lg:max-w-xs px-3 py-4 font-bold text-sm text-black hover:underline truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base" aria-current="page" {%- if item.target %} target="{{ item.target }}"{% endif %}><strong class="font-bold">{{ item.html | safe if item.html else item.text }}</strong></a>
+      <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="max-w-40 lg:max-w-xs px-3 py-4 text-sm text-black hover:underline truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base" aria-current="page" {%- if item.target %} target="{{ item.target }}"{% endif %}><strong class="font-bold">{{ item.html | safe if item.html else item.text }}</strong></a>
       {% else %}
 
-      <a href="{{ item.href }}" class="max-w-40 lg:max-w-xs px-3 py-4 text-sm text-black hover:underline truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base {%- if item.disabled %} opacity-50 pointer-events-none{% endif -%}" {%- if item.disabled %} disabled="disabled" aria-disabled="true" tabindex="-1"{% endif -%}  {%- if item.target %} target="{{ item.target }}"{% endif %}>{{ item.html | safe if item.html else item.text }}</a>
+      <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="max-w-40 lg:max-w-xs px-3 py-4 text-sm text-black hover:underline truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base {%- if item.disabled %} opacity-50 pointer-events-none{% endif -%}" {%- if item.disabled %} disabled="disabled" aria-disabled="true" tabindex="-1"{% endif -%}  {%- if item.target %} target="{{ item.target }}"{% endif %}>{{ item.html | safe if item.html else item.text }}</a>
       {% endif %}
     </li>
     {% endif %}

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

@@ -15,12 +15,7 @@
         {%- if item.id -%}
           {%- set id = item.id -%}
         {%- else -%}
-          {#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
-          {%- if loop.first -%}
-            {%- set id = idPrefix %}
-          {% else %}
-            {%- set id = idPrefix + "-" + loop.index -%}
-          {%- endif -%}
+          {%- set id = idPrefix + "-" + loop.index -%}
         {%- endif -%}
         {% set subId = "sub-" + id %}
     <li class="{% if item.containerClasses %}{{ item.containerClasses }}{% else %}px-base border-y border-neutral-base -my-px{% endif %}">

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

@@ -12,13 +12,8 @@
     {% if item.id %}
     {% set id = item.id %}
     {% else %}
-    {#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
-    {% if loop.first %}
-    {% set id = idPrefix %}
-    {% else %}
     {% set id = idPrefix + "-" + loop.index %}
     {% endif %}
-    {% 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 -%}>

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

@@ -21,12 +21,7 @@
         {%- if item.id -%}
           {%- set id = item.id -%}
         {%- else -%}
-          {#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
-          {%- if loop.first -%}
-            {%- set id = idPrefix %}
-          {% else %}
-            {%- set id = idPrefix + "-" + loop.index -%}
-          {%- endif -%}
+          {%- set id = idPrefix + "-" + loop.index -%}
         {%- endif -%}
         {% set subId = "sub-" + id %}
     <li class="relative">
@@ -50,12 +45,7 @@
             {%- if subitem.id -%}
               {%- set subId = subitem.id -%}
             {%- else -%}
-              {#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
-              {%- if loop.first -%}
-                {%- set subId = "sub-" + id %}
-              {% else %}
-                {%- set subId = "sub-" + id + "-" + loop.index -%}
-              {%- endif -%}
+              {%- set subId = "sub-" + id + "-" + loop.index -%}
             {%- 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>

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

@@ -48,7 +48,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>activateItemMenuVertical(elementMenu, idItemSeleccionado)</code> para seleccionar un item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemMenuVertical(document.getElementById("mi-menu"), "active-item-3")</code> para desactivar el item actual de este ejemplo y activar el tercer item.',
+    "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>activateItemMenuVertical(elementMenu, idItemSeleccionado)</code> para seleccionar un item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemMenuVertical("mi-menu", "active-item-3")</code> para desactivar el item actual y activar el tercer item de este ejemplo.',
     "data": {
       "idPrefix": "active-item",
       "items": [

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

@@ -10,12 +10,7 @@
         {%- if item.id -%}
           {%- set id = item.id -%}
         {%- else -%}
-          {#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
-          {%- if loop.first -%}
-            {%- set id = idPrefix %}
-          {% else %}
-            {%- set id = idPrefix + "-" + loop.index -%}
-          {%- endif -%}
+          {%- set id = idPrefix + "-" + loop.index -%}
         {%- endif -%}
         {% set subId = "sub-" + id %}
     <li class="m-base">
@@ -44,12 +39,7 @@
           {%- if subitem.id -%}
             {%- set subId = subitem.id -%}
           {%- else -%}
-            {#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
-            {%- if loop.first -%}
-              {%- set subId = "sub-" + id %}
-            {% else %}
-              {%- set subId = "sub-" + id + "-" + loop.index -%}
-            {%- endif -%}
+            {%- set subId = "sub-" + id + "-" + loop.index -%}
           {%- endif %}
         <li class="m-base origin-top-left text-sm">
             {% if subitem.href %}

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

@@ -18,12 +18,7 @@
       {%- if item.id -%}
         {%- set id = item.id -%}
       {%- else -%}
-        {#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
-        {%- if loop.first -%}
-          {%- set id = idPrefix %}
-        {% else %}
-          {%- set id = idPrefix + "-" + loop.index -%}
-        {%- endif -%}
+        {%- set id = idPrefix + "-" + loop.index -%}
       {%- endif -%}
       {% set subId = "sub-" + id %}
     <li class="relative" role="none">
@@ -49,12 +44,7 @@
             {%- if subitem.id -%}
               {%- set subId = subitem.id -%}
               {%- else -%}
-                {#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
-                {%- if loop.first -%}
-                  {%- set subId = "sub-" + id %}
-                {% else %}
-                  {%- set subId = "sub-" + id + "-" + loop.index -%}
-                {%- endif -%}
+                {%- set subId = "sub-" + id + "-" + loop.index -%}
               {%- endif %}
         {% if subitem.role == 'none' %}
         <li role="none" id="{{ subId }}" data-option="{{ subId }}">
@@ -69,12 +59,7 @@
                 {%- if subsubitem.id -%}
                   {%- set subsubId = subsubitem.id -%}
                   {%- else -%}
-                    {#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
-                    {%- if loop.first -%}
-                      {%- set subsubId = "sub-" + subId %}
-                      {% else %}
-                        {%- set subsubId = "sub-" + subId + "-" + loop.index -%}
-                    {%- endif -%}
+                    {%- set subsubId = "sub-" + subId + "-" + loop.index -%}
                 {%- endif %}
             <li {%- if subsubitem.role %} role="{{ subsubitem.role}}"{% endif %}{% if subsubitem.role == 'menuitemcheckbox' or subsubitem.role == 'menuitemradio' %} aria-checked="{% if subsubitem.checked %}{{ subsubitem.checked }}{% else %}false{% endif %}"{% endif %} class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="{{ subsubId }}" data-option="{{ subsubId }}">
               {{ subsubitem.html | safe if subsubitem.html else subsubitem.text }}

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

@@ -15,13 +15,8 @@
   {% if item.id %}
   {% set id = item.id %}
   {% else %}
-  {#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
-  {% if loop.first %}
-  {% set id = idPrefix %}
-  {% else %}
   {% set id = idPrefix + "-" + loop.index %}
   {% endif %}
-  {% 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>
   {% if item.active %}

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

@@ -27,12 +27,7 @@
 {% set innerHtml %}
   {% for item in params.items %}
   {% if item %}
-  {#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
-  {% if loop.first %}
-  {% set id = idPrefix %}
-  {% else %}
   {% set id = idPrefix + "-" + loop.index %}
-  {% endif %}
   <li>
     {% set prefix %}<span class="sr-only">Página&nbsp;</span>{% endset %}
     {% set suffix %}<span class="sr-only">&nbsp;(resultados del {{ loop.index | int * params.itemsPerPage | int }} al {% if ((loop.index | int + 1)  * params.itemsPerPage | int) > ( params.totalItems | int ) %}{{ params.totalItems }}{% else %}{{ (loop.index | int + 1)  * params.itemsPerPage | int }}{% endif %})</span>{% endset %}