desy-html 8.4.0 → 8.5.0

package/src/js/aria/tabs.js

@@ -80,8 +80,9 @@ export function tabs(aria) {
 
     // When a tab is clicked, activateTab is fired to activate it
     function clickEventListener (event) {
-      var tab = event.target;
-      activateTab(tab, false);
+      if(!event.target.matches('.c-tabs__link--is-active, .c-tabs__link--is-active strong')) {
+        activateTab(event.target, false);
+      }
     };
 
     // Handle keydown on tabs
@@ -279,12 +280,48 @@ export function tabs(aria) {
     function addActiveClass(element) {
       //Add active class to current tab
       element.classList.add("c-tabs__link--is-active");
-      element.firstElementChild.classList.add("text-black");
+      element.setAttribute('role', 'tab');
+      element.innerHTML = `<strong class="font-bold">${element.textContent}</strong>`;
     }
 
     function removeActiveClass(element) {
       element.classList.remove("c-tabs__link--is-active");
-      element.firstElementChild.classList.remove("text-black");
+      element.removeAttribute('role');
+      element.innerHTML = element.textContent;
     }
+
+    window.activateItemTabs = function (menuId, tabItemId) {
+      const menu = document.getElementById(menuId);
+      if (menu) {
+        const activeItemTab = document.querySelector(`#${menuId} #${tabItemId}`);
+        const activeItemPanel = document.querySelector(`[aria-labelledby="${tabItemId}"]`);
+        if (activeItemTab) {
+          document.querySelectorAll('.c-tabs__link').forEach((tab) => {
+            tab.classList.remove("c-tabs__link--is-active");
+            tab.innerHTML = tab.textContent;
+          })
+
+          activeItemTab.classList.add("c-tabs__link--is-active");
+          activeItemTab.setAttribute('role', 'tab');
+          activeItemTab.innerHTML = `<strong class="font-bold">${activeItemTab.textContent}</strong>`;
+
+          document.querySelectorAll('.c-tabs__panel').forEach((panel) => {
+            panel.setAttribute('hidden', 'hidden')
+          })
+
+          activeItemPanel.removeAttribute('hidden');
+
+          return [menu, activeItemTab, activeItemPanel];
+
+        } 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

@@ -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/breadcrumbs/_examples.breadcrumbs.njk

@@ -152,6 +152,39 @@
       ]
     }
   },
+  {
+    "name": "con inline en móvil",
+    "description": "Mirar en anchuras pequeñas para ver cómo se genera un salto de línea si el texto no cabe.",
+    "data": {
+      "inlineOnMobile": true,
+      "items": [
+        {
+          "text": "Inicio",
+          "href": "/"
+        },
+        {
+          "text": "Trámites",
+          "href": "/tramites/"
+        },
+        {
+          "text": "Trámites por tema",
+          "href": "/tramites/tema/"
+        },
+        {
+          "text": "Actividades industriales y energía",
+          "href": "/tramites/tema/actividades-industriales-y-energia/"
+        },
+        {
+          "text": "Actividades industriales",
+          "href": "/tramites/tema/actividades-industriales/"
+        },
+        {
+          "text": "Comunicaciones de servicios",
+          "href": "/tramites/tema/actividades-industriales/comunicaciones-de-servicios/"
+        }
+      ]
+    }
+  },
   {
     "name": "con botón atrás",
     "data": {

package/src/templates/components/breadcrumbs/_styles.breadcrumbs.css

@@ -41,6 +41,16 @@
   }
 
 
+  .c-breadcrumbs--inline-on-mobile {
+    li {
+      @apply inline;
+      @apply lg:inline-flex;
+      @apply leading-loose;
+      @apply lg:leading-tight;
+    }
+  }
+
+
   .c-breadcrumbs__backbutton {
     @apply mr-sm;
 

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

@@ -9,6 +9,10 @@
   {% set classNames = classNames + " c-breadcrumbs--collapse-on-mobile" %}
 {% endif -%}
 
+{% if params.inlineOnMobile %}
+  {% set classNames = classNames + " c-breadcrumbs--inline-on-mobile" %}
+{% endif -%}
+
 {# This verbose statement is for Purgecss to match the classnames needed. Purgecss needs explicit entire classnames appear in code, a string concatenation will fail. Eg. lg:grid-cols-max-content-{{ params.items.length if not params.hasBackButton else (params.items.length + 1)}} doesn't compile lg:grid-cols-max-content-1,2,3...  #}
 
 {% set gridClass %}

package/src/templates/components/breadcrumbs/params.breadcrumbs.yaml

@@ -27,6 +27,10 @@ params:
   type: boolean
   required: false
   description: When true, the breadcrumbs will collapse to the first and last item only on tablet breakpoint and below.
+- name: inlineOnMobile
+  type: boolean
+  required: false
+  description: When true, the breadcrumbs will linebreak if there is needed only on tablet breakpoint and below.
 - name: hasBackButton
   type: boolean
   required: false

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

@@ -87,7 +87,7 @@
       "meta": {
         "html": 'Creado por <a href="https://sda.aragon.es/" class="c-link c-link--neutral">SDA Servicios Digitales de Aragón</a>'
       },
-      "urlFeder": "https://www.aragon.es/-/fondo-europeo-de-desarrollo-regional-feder",
+      "urlFeder": "https://www.aragon.es/-/fondos-europeos-aragon",
       "classes": "lg:mt-48"
     }
   },

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 %}

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

@@ -30,7 +30,10 @@
             "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
           }
         }
-      ]
+      ],
+      "attributes": {
+        "id": "tabs-default"
+      }
     }
   },
   {
@@ -138,6 +141,7 @@
   },
   {
     "name": "con item activo",
+    "description": 'Añade <code>active: true</code> a una tab para mostrarla activa inicialmente. También puedes usar con javascript la función global <code>activateItemTabs(elementMenu, idItemSeleccionado)</code> para seleccionar una tab y su panel, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemTabs("tabs-active", "tab-example-active-3")</code> para desactivar la tab actual y activar la tercera tab de este ejemplo.',
     "data": {
       "tablistAriaLabel": "Ejemplo de tab",
       "idPrefix": "tab-example-active",
@@ -167,7 +171,10 @@
             "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
           }
         }
-      ]
+      ],
+      "attributes": {
+        "id": "tabs-active"
+      }
     }
   },
   {

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

@@ -1450,6 +1450,100 @@
       ]
     }
   },
+  {
+    "name": "con searchbar y scroll en el contenedor de árbol",
+    "description": 'Puedes usar las clases de CSS: <code>max-h-64</code> o <code>max-h-40</code> junto a <code>overflow-y-auto</code>, para poner barras de scroll al árbol en caso de que su altura sea muy grande o bien cuando la altura crezca debido a que los items sean expandidos por el usuario.',
+    "data": {
+      "name": "with-searchbar-scroll",
+      "classes": "mt-base max-h-64 overflow-y-auto",
+      "fieldset": {
+        "legend": {
+          "text": "Selecciona organismo"
+        }
+      },
+      "searchbar": {
+        "id": "with-searchbar-scroll-searchbar",
+        "label": {
+          "text": "Buscar"
+        },
+        "placeholder": "Buscar organismo"
+      },
+      "items": [
+        {
+          "text": "Item 1",
+          "id": "with-searchbar-scroll-item-1",
+          "expanded": true,
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem 1",
+                "value": "subitem-1"
+              },
+              {
+                "text": "Subitem 2",
+                "value": "subitem-2"
+              },
+              {
+                "text": "Subitem 3",
+                "value": "subitem-3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "with-searchbar-scroll-item-1"
+            }
+          }
+        },
+        {
+          "text": "Item 2",
+          "id": "with-searchbar-scroll-item-2",
+          "expanded": true,
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem 1",
+                "value": "subitem-1"
+              },
+              {
+                "text": "Subitem 2",
+                "value": "subitem-2"
+              },
+              {
+                "text": "Subitem 3",
+                "value": "subitem-3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "with-searchbar-scroll-item-2"
+            }
+          }
+        },
+        {
+          "text": "Item 3",
+          "id": "with-searchbar-scroll-item-3",
+          "expanded": true,
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem 1",
+                "value": "subitem-1"
+              },
+              {
+                "text": "Subitem 2",
+                "value": "subitem-2"
+              },
+              {
+                "text": "Subitem 3",
+                "value": "subitem-3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "with-searchbar-scroll-item-3"
+            }
+          }
+        }
+      ]
+    }
+  },
   {
     "name": "peque",
     "description": "Con clases aplicadas.",