desy-html 8.3.1 → 8.4.0

package/docs/_include.template-header.njk

@@ -12,23 +12,28 @@
     items: [
     {
       text: "Inicio",
-      href: "index.html"
+      href: "index.html",
+      id: "page-inicio"
     },
     {
       text: "Estilos",
-      href: "estilos.html"
+      href: "estilos.html",
+      id: "page-estilos"
     },
     {
       text: "Catálogo",
-      href: "catalogo.html"
+      href: "catalogo.html",
+      id: "page-catalogo"
     },
     {
       text: "Componentes",
-      href: "componentes.html"
+      href: "componentes.html",
+      id: "page-componentes"
     },
     {
       text: "Plantillas",
-      href: "plantillas.html"
+      href: "plantillas.html",
+      id: "page-plantillas"
     }],
     attributes: {
       "aria-label": "Navegación principal"
@@ -49,25 +54,31 @@
         items: [
         {
           text: "Inicio",
-          href: "index.html"
+          href: "index.html",
+          id: "mobile-page-inicio"
         },
         {
           text: "Estilos",
-          href: "estilos.html"
+          href: "estilos.html",
+          id: "mobile-page-estilos"
         },
         {
           text: "Catálogo",
-          href: "catalogo.html"
+          href: "catalogo.html",
+          id: "mobile-page-catalogo"
         },
         {
           text: "Componentes",
-          href: "componentes.html"
+          href: "componentes.html",
+          id: "mobile-page-componentes"
         },
         {
           text: "Plantillas",
-          href: "plantillas.html"
+          href: "plantillas.html",
+          id: "mobile-page-plantillas"
         }],
         attributes: {
+          "id": "navegacion-principal-offcanvas",
           "aria-label": "Navegación principal"
         }
       }) }}
@@ -79,231 +90,292 @@
       items: [
       {
         href: "examples-accordion.html",
-        text: "Accordion"
+        text: "Accordion",
+        id: "page-examples-accordion"
       },
       {
         href: "examples-accordion-history.html",
-        text: "Accordion history"
+        text: "Accordion history",
+        id: "page-examples-accordion-history"
       },
       {
         href: "examples-alert.html",
-        text: "Alert"
+        text: "Alert",
+        id: "page-examples-alert"
       },
       {
         href: "examples-breadcrumbs.html",
-        text: "Breadcrumbs"
+        text: "Breadcrumbs",
+        id: "page-examples-breadcrumbs"
       },
       {
         href: "examples-button.html",
-        text: "Button"
+        text: "Button",
+        id: "page-examples-button"
       },
       {
         href: "examples-button-loader.html",
-        text: "Button loader"
+        text: "Button loader",
+        id: "page-examples-button-loader"
       },
       {
         href: "examples-card.html",
-        text: "Card"
+        text: "Card",
+        id: "page-examples-card"
       },
       {
         href: "examples-character-count.html",
-        text: "Character count"
+        text: "Character count",
+        id: "page-examples-character-count"
       },
       {
         href: "examples-checkboxes.html",
-        text: "Checkboxes"
+        text: "Checkboxes",
+        id: "page-examples-checkboxes"
       },
       {
         href: "examples-collapsible.html",
-        text: "Collapsible"
+        text: "Collapsible",
+        id: "page-examples-collapsible"
       },
       {
         href: "examples-dialog.html",
-        text: "Dialog"
+        text: "Dialog",
+        id: "page-examples-dialog"
       },
       {
         href: "examples-date-input.html",
-        text: "Date input"
+        text: "Date input",
+        id: "page-examples-date-input"
       },
       {
         href: "examples-description-list.html",
-        text: "Description list"
+        text: "Description list",
+        id: "page-examples-description-list"
       },
       {
         href: "examples-details.html",
-        text: "Details"
+        text: "Details",
+        id: "page-examples-details"
       },
       {
         href: "examples-dropdown.html",
-        text: "Dropdown"
+        text: "Dropdown",
+        id: "page-examples-dropdown"
       },
       {
         href: "examples-error-message.html",
-        text: "Error message"
+        text: "Error message",
+        id: "page-examples-error-message"
       },
       {
         href: "examples-error-summary.html",
-        text: "Error summary"
+        text: "Error summary",
+        id: "page-examples-error-summary"
       },
       {
         href: "examples-fieldset.html",
-        text: "Fieldset"
+        text: "Fieldset",
+        id: "page-examples-fieldset"
       },
       {
         href: "examples-file-upload.html",
-        text: "File upload"
+        text: "File upload",
+        id: "page-examples-file-upload"
       },
       {
         href: "examples-footer.html",
-        text: "Footer"
+        text: "Footer",
+        id: "page-examples-footer"
       },
       {
         href: "examples-header.html",
-        text: "Header"
+        text: "Header",
+        id: "page-examples-header"
       },
       {
         href: "examples-header-mini.html",
-        text: "Header mini"
+        text: "Header mini",
+        id: "page-examples-header-mini"
       },
       {
         href: "examples-header-advanced.html",
-        text: "Header advanced"
+        text: "Header advanced",
+        id: "page-examples-header-advanced"
       },
       {
         href: "examples-hint.html",
-        text: "Hint"
+        text: "Hint",
+        id: "page-examples-hint"
       },
       {
         href: "examples-input.html",
-        text: "Input"
+        text: "Input",
+        id: "page-examples-input"
       },
       {
         href: "examples-input-group.html",
-        text: "Input group"
+        text: "Input group",
+        id: "page-examples-input-group"
       },
       {
         href: "examples-item.html",
-        text: "Item"
+        text: "Item",
+        id: "page-examples-item"
       },
       {
         href: "examples-label.html",
-        text: "Label"
+        text: "Label",
+        id: "page-examples-label"
       },
       {
         href: "examples-links-list.html",
-        text: "Links list"
+        text: "Links list",
+        id: "page-examples-links-list"
       },
       {
         href: "examples-listbox.html",
-        text: "Listbox"
+        text: "Listbox",
+        id: "page-examples-listbox"
       },
       {
         href: "examples-media-object.html",
-        text: "Media object"
+        text: "Media object",
+        id: "page-examples-media-object"
       },
       {
         href: "examples-menu-horizontal.html",
-        text: "Menu horizontal"
+        text: "Menu horizontal",
+        id: "page-examples-menu-horizontal"
       },
       {
         href: "examples-menu-navigation.html",
-        text: "Menu navigation"
+        text: "Menu navigation",
+        id: "page-examples-menu-navigation"
       },
       {
         href: "examples-menu-vertical.html",
-        text: "Menu vertical"
+        text: "Menu vertical",
+        id: "page-examples-menu-vertical"
       },
       {
         href: "examples-menubar.html",
-        text: "Menubar"
+        text: "Menubar",
+        id: "page-examples-menubar"
       },
       {
         href: "examples-modal.html",
-        text: "Modal"
+        text: "Modal",
+        id: "page-examples-modal"
       },
       {
         href: "examples-nav.html",
-        text: "Nav"
+        text: "Nav",
+        id: "page-examples-nav"
       },
       {
         href: "examples-notification.html",
-        text: "Notification"
+        text: "Notification",
+        id: "page-examples-notification"
       },
       {
         href: "examples-pagination.html",
-        text: "Pagination"
+        text: "Pagination",
+        id: "page-examples-pagination"
       },
       {
         href: "examples-pill.html",
-        text: "Pill"
+        text: "Pill",
+        id: "page-examples-pill"
       },
       {
         href: "examples-radios.html",
-        text: "Radios"
+        text: "Radios",
+        id: "page-examples-radios"
       },
       {
         href: "examples-searchbar.html",
-        text: "Searchbar"
+        text: "Searchbar",
+        id: "page-examples-searchbar"
       },
       {
         href: "examples-select.html",
-        text: "Select"
+        text: "Select",
+        id: "page-examples-select"
       },
       {
         href: "examples-skip-link.html",
-        text: "Skip link"
+        text: "Skip link",
+        id: "page-examples-skip-link"
       },
       {
         href: "examples-spinner.html",
-        text: "Spinner"
+        text: "Spinner",
+        id: "page-examples-spinner"
       },
       {
         href: "examples-status.html",
-        text: "Status"
+        text: "Status",
+        id: "page-examples-status"
       },
       {
         href: "examples-status-item.html",
-        text: "Status item"
+        text: "Status item",
+        id: "page-examples-status-item"
       },
       {
         href: "examples-table.html",
-        text: "Table"
+        text: "Table",
+        id: "page-examples-table"
       },
       {
         href: "examples-table-advanced.html",
-        text: "Table advanced"
+        text: "Table advanced",
+        id: "page-examples-table-advanced"
       },
       {
         href: "examples-tabs.html",
-        text: "Tabs"
+        text: "Tabs",
+        id: "page-examples-tabs"
       },
       {
         href: "examples-textarea.html",
-        text: "Textarea"
+        text: "Textarea",
+        id: "page-examples-textarea"
       },
       {
         href: "examples-toggle.html",
-        text: "Toggle"
+        text: "Toggle",
+        id: "page-examples-toggle"
       },
       {
         href: "examples-tooltip.html",
-        text: "Tooltip"
+        text: "Tooltip",
+        id: "page-examples-tooltip"
       },
       {
         href: "examples-tree.html",
-        text: "Tree"
+        text: "Tree",
+        id: "page-examples-tree"
       }],
       attributes: {
+        "id": "navegacion-ejemplos-offcanvas",
         "aria-label": "Navegación ejemplos"
       }
     }) }}
   </li>
 </ul>
 {% endcall %}
-{% if activeSection != undefined %}
+{% if activePage != undefined or activeComponent != undefined %}
   <script>
     window.addEventListener("load", function(event) {
-      activateItemHeaderNavigation("header-nav-item", "{{ activeSection }}");
+      {% if activePage %}
+      activateItemHeaderNavigation("header-nav-item", "{{ activePage }}");
+      activateItemNav("navegacion-principal-offcanvas", "mobile-{{ activePage }}");
+      {% endif %}
+      {% if activeComponent %}
+        activateItemNav("navegacion-ejemplos-offcanvas", "page-examples-{{ activeComponent | filterslugify }}");
+      {% endif %}
     });
   </script>
 {% endif %}

package/docs/catalogo.html

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

package/docs/componentes.html

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

package/docs/estilos.html

@@ -1,5 +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" %}
+{% set activePage = "page-estilos" %}
 {% extends "_template.default.njk" %}
 
 {% block contentBlock %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Accordion history" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/accordion-history/_examples.accordion-history.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Accordion" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/accordion/_examples.accordion.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Alert" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/alert/_examples.alert.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Breadcrumbs" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/breadcrumbs/_examples.breadcrumbs.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Button loader" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/button-loader/_examples.button-loader.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Button" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/button/_examples.button.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Card" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/card/_examples.card.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Character count" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/character-count/_examples.character-count.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Checkboxes" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/checkboxes/_examples.checkboxes.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Collapsible" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/collapsible/_examples.collapsible.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Date input" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/date-input/_examples.date-input.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Description list" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/description-list/_examples.description-list.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Details" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/details/_examples.details.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Dialog" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/dialog/_examples.dialog.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Dropdown" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/dropdown/_examples.dropdown.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Error message" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/error-message/_examples.error-message.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Error summary" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/error-summary/_examples.error-summary.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Fieldset" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/fieldset/_examples.fieldset.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "File upload" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/file-upload/_examples.file-upload.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Footer" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/footer/_examples.footer.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Header advanced" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/header-advanced/_examples.header-advanced.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Header mini" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/header-mini/_examples.header-mini.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Header" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/header/_examples.header.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Hint" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/hint/_examples.hint.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Input group" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/input-group/_examples.input-group.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Input" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/input/_examples.input.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Item" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/item/_examples.item.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Label" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/label/_examples.label.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Links list" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/links-list/_examples.links-list.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Listbox" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/listbox/_examples.listbox.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Media object" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/media-object/_examples.media-object.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Menu horizontal" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/menu-horizontal/_examples.menu-horizontal.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Menu navigation" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/menu-navigation/_examples.menu-navigation.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Menu vertical" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/menu-vertical/_examples.menu-vertical.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Menubar" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/menubar/_examples.menubar.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Modal" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/modal/_examples.modal.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Nav" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/nav/_examples.nav.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Notification" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/notification/_examples.notification.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Pagination" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/pagination/_examples.pagination.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Pill" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/pill/_examples.pill.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Radios" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/radios/_examples.radios.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Searchbar" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/searchbar/_examples.searchbar.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Select" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/select/_examples.select.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Skip link" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/skip-link/_examples.skip-link.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Spinner" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/spinner/_examples.spinner.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Status item" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/status-item/_examples.status-item.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Status" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/status/_examples.status.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Table advanced" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/table-advanced/_examples.table-advanced.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Table" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/table/_examples.table.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Tabs" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/tabs/_examples.tabs.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Textarea" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/textarea/_examples.textarea.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Toggle" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/toggle/_examples.toggle.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Tooltip" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/tooltip/_examples.tooltip.njk" as exampleData %}

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 activeSection = "header-nav-item-4" %}
+
+{% set activeComponent = "Tree" %}
 {% extends "_template.examples.njk" %}
 {% block contentBlock %}
   {% import "components/tree/_examples.tree.njk" as exampleData %}

package/docs/index.html

@@ -1,6 +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" %}
+{% set activePage = "page-inicio" %}
 {% extends "_template.default.njk" %}
 {% block contentBlock %}
 
@@ -38,6 +38,11 @@
 
   <h2>Changelog (English)</h2>
   <p>What's new in the latest version of desy-html</p>
+  <h3>v.8.4.0</h3>
+  <ul class="text-sm">
+    <li>Added global function to select an item in Nav.</li>
+    <li>Docs now show the active section in offcanvas menus.</li>
+  </ul>
   <h3>v.8.3.1</h3>
   <ul class="text-sm">
     <li>Minor fixes.</li>

package/docs/plantillas.html

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "8.3.1",
+  "version": "8.4.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/Nav.js

@@ -0,0 +1,55 @@
+export function Nav(aria) {
+  (function () {
+    aria.Nav = function (domNode) {
+      this.domNode = domNode;
+    };
+
+    aria.Nav.prototype.init = function () {
+      this.valueActive = this.domNode.dataset.menuActive;
+      if (this.valueActive) {
+        this.activateElement(this.valueActive);
+      }
+    };
+
+    aria.Nav.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.Nav.prototype.wrapActiveElement = function (elementActive) {
+      elementActive.setAttribute('aria-current', 'true');
+      elementActive.innerHTML = `<strong>${elementActive.textContent}</strong>`;
+    };
+
+    aria.Nav.prototype.deactivateElement = function (elementDeactivated) {
+      elementDeactivated.removeAttribute('aria-current');
+      elementDeactivated.innerHTML = elementDeactivated.textContent;
+    };
+
+    window.activateItemNav = function (menuId, activeItemId) {
+      const menu = document.getElementById(menuId);
+      if (menu) {
+        const activeItem = document.querySelector(`#${menuId} #${activeItemId}`);
+        if (activeItem) {
+          const menuInstance = new aria.Nav(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

@@ -19,6 +19,7 @@ import { RadioButton } from './aria/radioButton.js';
 import { CheckBox } from './aria/checkBoxes.js';
 import { MenuVertical } from './aria/MenuVertical.js';
 import { HeaderNavigation } from './aria/HeaderNavigation.js';
+import { Nav } from './aria/Nav.js';
 
 
 export function accordionComponent(aria) {
@@ -405,3 +406,16 @@ export function HeaderNavigationComponent(aria) {
     }
   }
 }
+
+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);
+    }
+  }
+}

package/src/js/index.js

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

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

@@ -65,6 +65,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>activateItemNav(elementMenu, idItemSeleccionado)</code> para seleccionar un item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemNav("mi-menu", "nav-with-active-item-3")</code> para desactivar el item actual y activar el tercer item de este ejemplo.',
     "data": {
       "idPrefix": "nav-with-active-item",
       "items": [
@@ -82,7 +83,7 @@
       },
       {
         "href": "#",
-        "text": "Opción 4 activa",
+        "text": "Opción 4",
         "active": true
       },
       {
@@ -91,6 +92,7 @@
       }
       ],
       "attributes": {
+        "id": "mi-menu",
         "aria-label": "Navegación local"
       }
     }

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

@@ -2,7 +2,7 @@
    instead -#}
 {% set idPrefix = params.idPrefix if params.idPrefix else "nav-item" %}
 
-{% set commonAttributes %} class="text-sm{%- if params.classes %} {{ params.classes }}{% endif %}"
+{% set commonAttributes %} data-module="c-nav" class="text-sm{%- if params.classes %} {{ params.classes }}{% endif %}"
 {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}{% endset %}
 
 
@@ -17,20 +17,18 @@
   {% else %}
   {% set id = idPrefix + "-" + loop.index %}
   {% 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 %}
+  {% 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 %}
-  <span class="flex items-center px-base py-sm font-semibold {%- if item.classes %} {{ item.classes }}{% endif -%}" {% if params.isMenu %} aria-current="true" {% else %} aria-current="page" {% endif %} {{- commonItemAttributes | safe }}>
-    <strong>{{ item.html | safe if item.html else item.text }}</strong>
-  </span>
-  {% else %}
   <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 }}>
+      {% if item.active %}
+      <strong>{{ item.html | safe if item.html else item.text }}</strong>
+      {% else %}
       {{ item.html | safe if item.html else item.text }}
+      {% endif %}
       {% if item.disabled %}
       <svg viewBox="0 0 140 140" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" class="inline-block align-middle ml-sm text-neutral-base fill-current" aria-hidden="true" focusable="false" ><path d="M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z"/></svg>
       {% endif %}
   </a>
-  {% endif %}
 </li>
   {% if item.divider %}
 <li class="my-sm border-b border-neutral-base" aria-hidden="true">