desy-html 6.3.2 → 6.4.0

package/src/js/aria/accordion.js

@@ -16,64 +16,93 @@ export function accordion(aria) {
     var allowToggle = (allowMultiple) ? allowMultiple : accordion.hasAttribute('data-allow-toggle');
 
     // Create the array of toggle elements for the accordion group
-    var triggers = Array.prototype.slice.call(accordion.querySelectorAll('.c-accordion-trigger'));
-    var panels = Array.prototype.slice.call(accordion.querySelectorAll('.c-accordion-panel'));
+    var triggers = Array.prototype.slice.call(accordion.querySelectorAll('.c-accordion__trigger'));
+    var panels = Array.prototype.slice.call(accordion.querySelectorAll('.c-accordion__panel'));
 
 
     accordion.addEventListener('click', function (event) {
-      console.log("event", event);
       var target = event.target;
 
-      if (target.classList.contains('c-accordion-trigger')) {
+      if(target.classList.contains('c-accordion__toggle-all')) {
+        const getAllElementsShow = target.parentElement.parentElement.querySelectorAll('.c-accordion__show')
+        const getAllElementsHide = target.parentElement.parentElement.querySelectorAll('.c-accordion__hide')
+        const getAllPanels = target.parentElement.parentElement.querySelectorAll('.c-accordion__panel')
+        const getAllTriggers = target.parentElement.parentElement.querySelectorAll('.c-accordion__trigger')
+        if(target.textContent.includes('Mostrar todo')) {
+          getAllElementsShow.forEach(element => {
+            element.classList.add('hidden')
+          })
+          getAllElementsHide.forEach(element => {
+            element.classList.remove('hidden')
+          })
+          getAllPanels.forEach(element => {
+            element.removeAttribute('hidden')
+          })
+          getAllTriggers.forEach(element => {
+            element.setAttribute('aria-expanded', 'true');
+          })
+          target.textContent = 'Ocultar todo'
+        } else {
+          getAllElementsShow.forEach(element => {
+            element.classList.remove('hidden')
+          })
+          getAllElementsHide.forEach(element => {
+            element.classList.add('hidden')
+          })
+          getAllPanels.forEach(element => {
+            element.setAttribute('hidden', "")
+          })
+          getAllTriggers.forEach(element => {
+            element.setAttribute('aria-expanded', 'false');
+          })
+          target.textContent = 'Mostrar todo'
+        }
+      }
+
+      if (target.classList.contains('c-accordion__trigger')) {
         // Check if the current toggle is expanded.
         var isExpanded = target.getAttribute('aria-expanded') == 'true';
         var active = accordion.querySelector('[aria-expanded="true"]');
 
         // without allowMultiple, close the open accordion
         if (!allowMultiple && active && active !== target) {
-          console.log("!allowMultiple && active && active !== target");
           // Set the expanded state on the triggering element
           active.setAttribute('aria-expanded', 'false');
           //active.querySelector('span').innerText = 'Mostrar';
-          active.querySelector('.c-accordion-show').classList.remove('hidden');
-          active.querySelector('.c-accordion-hide').classList.add('hidden');
+          active.querySelector('.c-accordion__show').classList.remove('hidden');
+          active.querySelector('.c-accordion__hide').classList.add('hidden');
           // Hide the accordion sections, using aria-controls to specify the desired section
           document.getElementById(active.getAttribute('aria-controls')).setAttribute('hidden', '');
 
           // When toggling is not allowed, clean up disabled state
           if (!allowToggle) {
-            console.log("allowToggle");
             active.removeAttribute('aria-disabled');
           }
         }
 
         if (!isExpanded) {
-          console.log("isExpanded");
           // Set the expanded state on the triggering element
-          console.log("target", target);
           target.setAttribute('aria-expanded', 'true');
           //target.querySelector('span').innerText = 'Ocultar';
-          target.querySelector('.c-accordion-show').classList.toggle('hidden');
-          target.querySelector('.c-accordion-hide').classList.toggle('hidden');
+          target.querySelector('.c-accordion__show').classList.toggle('hidden');
+          target.querySelector('.c-accordion__hide').classList.toggle('hidden');
           // Hide the accordion sections, using aria-controls to specify the desired section
           document.getElementById(target.getAttribute('aria-controls')).removeAttribute('hidden');
 
           // If toggling is not allowed, set disabled state on trigger
           if (!allowToggle) {
-            console.log("if");
             target.setAttribute('aria-disabled', 'true');
             //target.querySelector('span').innerText = '';
-            target.querySelector('.c-accordion-show').classList.add('hidden');
-            target.querySelector('.c-accordion-hide').classList.add('hidden');
+            target.querySelector('.c-accordion__show').classList.add('hidden');
+            target.querySelector('.c-accordion__hide').classList.add('hidden');
           }
         }
         else if (allowToggle && isExpanded) {
-          console.log("else if");
           // Set the expanded state on the triggering element
           target.setAttribute('aria-expanded', 'false');
           // target.querySelector('span').innerText = 'Mostrar';
-          target.querySelector('.c-accordion-show').classList.toggle('hidden');
-          target.querySelector('.c-accordion-hide').classList.toggle('hidden');
+          target.querySelector('.c-accordion__show').classList.toggle('hidden');
+          target.querySelector('.c-accordion__hide').classList.toggle('hidden');
 
           // Hide the accordion sections, using aria-controls to specify the desired section
           document.getElementById(target.getAttribute('aria-controls')).setAttribute('hidden', '');
@@ -95,7 +124,7 @@ export function accordion(aria) {
       var ctrlModifier = (event.ctrlKey && key.match(/33|34/));
 
       // Is this coming from an accordion header?
-      if (target.classList.contains('c-accordion-trigger')) {
+      if (target.classList.contains('c-accordion__trigger')) {
         // Up/ Down arrow and Control + Page Up/ Page Down keyboard operations
         // 38 = Up, 40 = Down
         if (key.match(/38|40/) || ctrlModifier) {
@@ -128,7 +157,7 @@ export function accordion(aria) {
     });
 
     // These are used to style the accordion when one of the buttons has focus
-    accordion.querySelectorAll('.c-accordion-trigger').forEach(function (trigger) {
+    accordion.querySelectorAll('.c-accordion__trigger').forEach(function (trigger) {
 
       trigger.addEventListener('focus', function (event) {
         accordion.classList.add('focus');
@@ -150,8 +179,8 @@ export function accordion(aria) {
       if (expanded) {
         expanded.setAttribute('aria-disabled', 'true');
         //expanded.querySelector('span').innerText = '';
-        expanded.querySelector('.c-accordion-show').classList.add('hidden');
-        expanded.querySelector('.c-accordion-hide').classList.add('hidden');
+        expanded.querySelector('.c-accordion__show').classList.add('hidden');
+        expanded.querySelector('.c-accordion__hide').classList.add('hidden');
       }
     }
 

package/src/js/aria/collapsible.js

@@ -5,6 +5,9 @@ export function Collapsible(aria) {
       this.rootEl = domNode;
       this.buttonEl = this.rootEl.querySelector('button[aria-expanded]');
       this.buttonEl.addEventListener('click', this.toggle.bind(this));
+      if(domNode.dataset.expanded){
+        this.buttonEl.click()
+      }
     }
 
     toggle(event) {
@@ -18,16 +21,20 @@ export function Collapsible(aria) {
       elementCollapsibleContent.classList.toggle('hidden')
 
       if(elementCollapsibleShow.classList.contains('hidden')) {
+        this.buttonEl.setAttribute('aria-expanded', 'true')
         elementCollapsibleShow.setAttribute('aria-hidden', 'false')
         elementCollapsibleHide.setAttribute('aria-hidden', 'true')
+        elementCollapsibleContent.setAttribute('aria-hidden', 'false')
       } else {
+        this.buttonEl.setAttribute('aria-expanded', 'false')
         elementCollapsibleShow.setAttribute('aria-hidden', 'true')
         elementCollapsibleHide.setAttribute('aria-hidden', 'false')
+        elementCollapsibleContent.setAttribute('aria-hidden', 'true')
       }
     }
   }
 
-  const collapsible = document.querySelectorAll('.c-collapsible');
+  const collapsible = document.querySelectorAll('[data-module="c-collapsible"]');
   collapsible.forEach((collapsibleElement) => {
     new Collapsible(collapsibleElement);
   });

package/src/js/aria/dialog.js

@@ -276,12 +276,24 @@ export function dialog(aria) {
 
     aria.Dialog.prototype.addListeners = function () {
       document.addEventListener('focus', this.trapFocus, true);
+      document.addEventListener('click', this.clickOutSide, true)
     }; // end addListeners
 
     aria.Dialog.prototype.removeListeners = function () {
       document.removeEventListener('focus', this.trapFocus, true);
+      document.removeEventListener('click', this.clickOutSide, true);
     }; // end removeListeners
 
+    aria.Dialog.prototype.clickOutSide = function (event) {
+      var currentDialog = aria.getCurrentDialog();
+      var getDialogElement = currentDialog.dialogNode;
+      const isClickInside = getDialogElement.contains(event.target)
+
+      if (!isClickInside) {
+        currentDialog.close();
+      }
+    };
+
     aria.Dialog.prototype.trapFocus = function (event) {
       if (aria.Utils.IgnoreUtilFocusChanges) {
         return;
@@ -319,4 +331,4 @@ export function dialog(aria) {
     }; // end replaceDialog
 
   }());
-}
+}

package/src/js/aria/notification.js

@@ -0,0 +1,29 @@
+export function notification() {
+
+  class Notification {
+    constructor(domNode) {
+      this.rootEl = domNode;
+      /*No todas las notificaciones tienen botón de cerrar
+      así que comprobamos que el componente contiene el botón.*/
+      if(this.rootEl.querySelector('.c-notification-button__close')) {
+        this.buttonClose = this.rootEl.querySelector('.c-notification-button__close');
+        this.buttonClose.addEventListener('click', this._closeNotification.bind(this));
+      }
+    }
+
+    _closeNotification() {
+      //Replicamos la transición de alpine con tailwind al cerrar.
+      this.rootEl.classList.add('transition-opacity', 'duration-150', 'ease-in-out', 'opacity-0');
+      //Añadimos display: none para que el componente "desaparezca del DOM"
+      setTimeout(() =>{
+        this.rootEl.classList.add('hidden');
+      },300)
+    }
+  }
+
+  const notifications = document.querySelectorAll('[data-module="c-notification"]');
+  notifications.forEach((notificationElement) => {
+    new Notification(notificationElement);
+  });
+
+}

package/src/js/aria/tabs.js

@@ -27,12 +27,14 @@ export function tabs(aria) {
       if(getClassFromTabs.some(tab => tab.classList.contains('c-tabs__link--is-active'))) {
         tabs.forEach((tab) => {
           if(tab.classList.contains('c-tabs__link--is-active')) {
+            activateTab(tab, false)
             addActiveClass(tab)
           }
         })
       } else {
         tabs.forEach((tab, index) => {
           if(index === 0) {
+            activateTab(tab, false)
             addActiveClass(tab)
           }
         })

package/src/js/aria/toggle.js

@@ -3,21 +3,39 @@ export function Toggle(aria) {
   class Toggle {
     constructor(domNode) {
       this.rootEl = domNode;
-      this.buttonEl = this.rootEl.querySelector('button[aria-expanded]');
-
+      this.buttonEl = this.rootEl.querySelector('.c-toggle__button');
       this.buttonEl.addEventListener('click', this.toggle.bind(this));
     }
 
     toggle(event) {
       const { target } = event
-      this.buttonEl.classList.toggle('c-button--has-selection')
-      target.querySelector('.c-button-is-not_pressed').classList.toggle('hidden')
-      target.querySelector('.c-button-is_pressed').classList.toggle('hidden')
+      this.buttonEl.classList.toggle('c-toggle--is-opened')
+      target.querySelector('.c-button--is-not-pressed').classList.toggle('hidden')
+      target.querySelector('.c-button--is-pressed').classList.toggle('hidden')
+
+      this.ariaAttribute(target)
+    }
+
+    ariaAttribute(target) {
+      if(target.getAttribute('aria-checked')) {
+        const toggleIsOpened = target.classList.contains('c-toggle--is-opened') ? true : false
+        this.buttonEl.setAttribute('aria-checked', toggleIsOpened);
+      }
+
+      if(target.getAttribute('aria-pressed')) {
+        const toggleIsOpened = target.classList.contains('c-toggle--is-opened') ? true : false
+        this.buttonEl.setAttribute('aria-pressed', toggleIsOpened);
+      }
+
+      if(target.getAttribute('aria-expanded')) {
+        const toggleIsOpened = target.classList.contains('c-toggle--is-opened') ? true : false
+        this.buttonEl.setAttribute('aria-expanded', toggleIsOpened);
+      }
     }
 
   }
 
-  const toggles = document.querySelectorAll('.c-toggle');
+  const toggles = document.querySelectorAll('[data-module="c-toggle"]');
   toggles.forEach((toggleElement) => {
     new Toggle(toggleElement);
   });

package/src/js/desy-html.js

@@ -14,6 +14,7 @@ import { Treeitem } from './aria/treeitem.js';
 import { Tree } from './aria/tree.js';
 import { Toggle } from './aria/toggle.js';
 import { Collapsible } from './aria/collapsible.js';
+import { notification } from './aria/notification.js';
 
 
 export function accordionComponent(aria) {
@@ -363,3 +364,6 @@ export function treeComponent(aria) {
   }
 }
 
+export function notificationComponent(aria) {
+  notification(aria);
+}

package/src/js/index.js

@@ -16,7 +16,8 @@ import {
   tabsComponent,
   tooltipComponent,
   toggleComponent,
-  treeComponent
+  treeComponent,
+  notificationComponent
 } from './desy-html.js';
 
 var aria = aria || {};
@@ -34,6 +35,7 @@ tabsComponent(aria);
 tooltipComponent(aria);
 toggleComponent(aria);
 treeComponent(aria);
+notificationComponent(aria);
 
 document.querySelectorAll('.c-code-snippet__button').forEach(button => {
   button.addEventListener('click', (event) => {

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

@@ -259,6 +259,28 @@
       ]
     }
   },
+  {
+    "name": "with html in headers",
+    "description": "To avoid event problems, use pointer-events-none class in subelements",
+    "data": {
+      "idPrefix": "accordion-example-pointer-events-none",
+      "headingLevel": 3,
+      "items": [
+        {
+          "headerHtml": '<span class="block pointer-events-none">Accordion Item 1</span><span class="block pointer-events-none font-normal">Subelement also receives events</span>',
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+        },
+        {
+          "headerHtml": '<span class="block pointer-events-none">Accordion Item 2</span><span class="block pointer-events-none font-normal">Subelement also receives events</span>',
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+        },
+        {
+          "headerHtml": '<span class="block pointer-events-none">Accordion Item 3</span><span class="block pointer-events-none font-normal">Subelement also receives events</span>',
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+        }
+      ]
+    }
+  },
   {
     "name": "With classes applied",
     "description": "Show code to display the classes applied in html",

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

@@ -23,9 +23,7 @@
     2. If there are one item opened at init and allowToggle=true, the button text ('Mostrar/Ocultar') only shows 'Ocultar' without changing to 'Mostrar'. It should change to 'Mostrar' when closed.
 -#}
 <!-- accordion -->
-<div
-{%- if params.classes %} class="{{ params.classes }}"{% endif %}
-{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+<div class="c-accordion {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} {%- if params.allowToggle == true %} data-allow-toggle{% endif %} {%- if params.allowMultiple == true %} data-allow-multiple{% endif %}>
   <div class="flex justify-between">
   {% if params.heading.html or params.heading.text %}
     {% set headingAttributes %}class="{% if params.heading.classes %}{{ params.heading.classes }}{% else %}c-h2 mb-base{% endif %}"{% endset %}
@@ -46,12 +44,12 @@
   {% endif %}
   {% if params.showControl %}
     <button
-    class="ml-auto py-base text-sm text-neutral-dark underline focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus">
+    class="c-accordion__toggle-all ml-auto py-base text-sm text-neutral-dark underline focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus text-right">
       Mostrar todo
     </button>
   {% endif %}
   </div>
-  <div class="c-accordion" {%- if params.allowToggle == true %} data-allow-toggle{% endif %} {%- if params.allowMultiple == true %} data-allow-multiple{% endif %}>
+  <div>
     {% for item in params.items %}
       {% if item %}
       {%- if item.id -%}
@@ -69,7 +67,7 @@
         {% set insideContent %}
           <button
           id="{{ id }}-title"
-          class="c-accordion-trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black {%- if item.disabled %} cursor-not-allowed{% endif %}"
+          class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black {%- if item.disabled %} cursor-not-allowed{% endif %}"
           aria-controls="{{ id }}"
           {% if item.open %}
             aria-expanded = "true"
@@ -81,14 +79,14 @@
             {{ item.headerHtml | safe if item.headerHtml else item.headerText }}
             <span
               class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none  {%- if item.disabled %} hidden{% endif %}" aria-hidden="true">
-                <span class="c-accordion-show {%- if item.open %} hidden{%else%}{%endif%} {%- if item.show.classes %} {{ item.show.classes }}{%endif%}">
+                <span class="c-accordion__show {%- if item.open %} hidden{%else%}{%endif%} {%- if item.show.classes %} {{ item.show.classes }}{%endif%}">
                   {% if item.show %}
                     {{ item.show.html | safe if item.show.html else item.show.text }}
                   {% else %}
                     Mostrar
                   {% endif %}
                 </span>
-                <span class="c-accordion-hide {%- if item.open %}{%else%} hidden{%endif%} {%- if item.hide.classes %} {{ item.hide.classes }}{%endif%}">
+                <span class="c-accordion__hide {%- if item.open %}{%else%} hidden{%endif%} {%- if item.hide.classes %} {{ item.hide.classes }}{%endif%}">
                   {% if item.hide %}
                     {{ item.hide.html | safe if item.hide.html else item.hide.text }}
                   {% else %}
@@ -119,7 +117,7 @@
         {%- if id %}
           id="{{ id }}"
         {% endif %}
-        class="c-accordion-panel {%- if item.classes %} {{ item.classes }}{% endif %}"
+        class="c-accordion__panel {%- if item.classes %} {{ item.classes }}{% endif %}"
         {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
           {{ item.html | safe if item.html else item.text }}
         </div>

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

@@ -87,6 +87,7 @@
       "idPrefix": "allowtoggle-example",
       "headingLevel": 3,
       "allowToggle": true,
+      "showControl": false,
       "items": [
         {
           "headerText": "Accordion Item 1",
@@ -294,6 +295,28 @@
       ]
     }
   },
+  {
+    "name": "with html in headers",
+    "description": "To avoid event problems, use pointer-events-none class in subelements",
+    "data": {
+      "idPrefix": "accordion-example-pointer-events-none",
+      "headingLevel": 3,
+      "items": [
+        {
+          "headerHtml": '<span class="block pointer-events-none">Accordion Item 1</span><span class="block pointer-events-none font-normal">Subelement also receives events</span>',
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+        },
+        {
+          "headerHtml": '<span class="block pointer-events-none">Accordion Item 2</span><span class="block pointer-events-none font-normal">Subelement also receives events</span>',
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+        },
+        {
+          "headerHtml": '<span class="block pointer-events-none">Accordion Item 3</span><span class="block pointer-events-none font-normal">Subelement also receives events</span>',
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+        }
+      ]
+    }
+  },
   {
     "name": "With classes applied",
     "description": "Show code to display the classes applied in html",

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

@@ -23,9 +23,8 @@
     2. If there are one item opened at init and allowToggle=true, the button text ('Mostrar/Ocultar') only shows 'Ocultar' without changing to 'Mostrar'. It should change to 'Mostrar' when closed.
 -#}
 <!-- accordion-history -->
-<div
-{%- if params.classes %} class="{{ params.classes }}"{% endif %}
-{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+<div class="c-accordion {%- if params.classes %} {{ params.classes }} {% endif %}"
+{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} {%- if params.allowToggle == true %} data-allow-toggle{% endif %} {%- if params.allowMultiple == true %} data-allow-multiple{% endif %}>
 <div class="flex justify-between">
   {% if params.heading.html or params.heading.text %}
     {% set headingAttributes %}class="{% if params.heading.classes %}{{ params.heading.classes }}{% else %}c-h2 mb-base{% endif %}"{% endset %}
@@ -46,12 +45,12 @@
   {% endif %}
   {% if params.showControl %}
     <button
-    class="ml-auto py-base text-sm text-neutral-dark underline focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus">
+    class="c-accordion__toggle-all ml-auto py-base text-sm text-neutral-dark underline focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus text-right">
       Mostrar todo
     </button>
   {% endif %}
   </div>
-  <div class="Accordion pl-lg" {%- if params.allowToggle == true %} data-allow-toggle{% endif %} {%- if params.allowMultiple == true %} data-allow-multiple{% endif %}>
+  <div class="pl-lg">
     {% for item in params.items %}
       {% if item %}
       {%- if item.id -%}
@@ -69,7 +68,7 @@
         {% set insideContent %}
           <button
           id="{{ id }}-title"
-          class="Accordion-trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black {%- if item.disabled %} cursor-not-allowed{% endif %}"
+          class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black {%- if item.disabled %} cursor-not-allowed{% endif %}"
           aria-controls="{{ id }}"
           {% if item.open %}
             aria-expanded = "true"
@@ -92,14 +91,14 @@
             {% endif %}
             <span
               class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none {%- if item.disabled %} hidden{% endif %}" aria-hidden="true">
-                <span class="Accordion-show {%- if item.open %} hidden{%else%}{%endif%} {%- if item.show.classes %} {{ item.show.classes }}{%endif%}">
+                <span class="c-accordion__show {%- if item.open %} hidden{%else%}{%endif%} {%- if item.show.classes %} {{ item.show.classes }}{%endif%}">
                   {% if item.show %}
                     {{ item.show.html | safe if item.show.html else item.show.text }}
                   {% else %}
                     Mostrar
                   {% endif %}
                 </span>
-                <span class="Accordion-hide {%- if item.open %}{%else%} hidden{%endif%} {%- if item.hide.classes %} {{ item.hide.classes }}{%endif%}">
+                <span class="c-accordion__hide {%- if item.open %}{%else%} hidden{%endif%} {%- if item.hide.classes %} {{ item.hide.classes }}{%endif%}">
                   {% if item.hide %}
                     {{ item.hide.html | safe if item.hide.html else item.hide.text }}
                   {% else %}
@@ -167,7 +166,7 @@
         {%- if id %}
           id="{{ id }}"
         {% endif %}
-        class="Accordion-panel relative {%- if item.classes %} {{ item.classes }}{% endif %}"
+        class="c-accordion__panel relative {%- if item.classes %} {{ item.classes }}{% endif %}"
         {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
           {% if not loop.last %}
             {% if item.status == 'current' %}

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

@@ -1,5 +1,5 @@
 <!-- collapsible -->
-<div class="{%- if params.classes %} {{ params.classes }}{% else -%} -my-px py-sm border-t border-b border-neutral-base{% endif %} c-collapsible" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+<div class="{%- if params.classes %} {{ params.classes }}{% else -%} -my-px py-sm border-t border-b border-neutral-base{% endif %} c-collapsible" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} {% if params.open %} data-expanded="true" {% endif %} data-module="c-collapsible">
 	<button aria-expanded="false" {%- if params.id %} id="{{params.id}}-title"{% endif %} class="group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" {%- if params.id %} aria-controls="{{params.id}}"{% endif %}>{{ params.headerHtml | safe if params.headerHtml else params.headerText }}
   <span class="c-collapsible__show absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none " aria-hidden="false">Mostrar</span>
   <span class="c-collapsible__hide absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none  hidden" aria-hidden="true">Ocultar</span>

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

@@ -18,8 +18,7 @@
         }
       }
     ],
-    "isDismissible": true,
-    "classes": "mt-2xl"
+    "isDismissible": true
   })  }}
 {% endset %}
 
@@ -46,8 +45,7 @@
         }
       }
     ],
-    "isDismissible": true,
-    "classes": "mt-2xl"
+    "isDismissible": true
   })  }}
 {% endset %}
 

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

@@ -13,7 +13,7 @@
     @apply hidden fixed overflow-y-auto inset-0 bg-black bg-opacity-50 z-50;
 
     &.active {
-      @apply flex justify-center content-center;
+      @apply grid h-screen place-items-center;
     }
   }
 }

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

@@ -369,6 +369,25 @@
       "caller": exampleOffcanvas
     }
   },
+  {
+    "name": "con offcanvas y mobileTitle",
+    "description": "Menu mobile que sólo se muestra en anchuras pequeñas y que permite insertar dentro cualquier contenido con Nunjuks caller y título que sólo se muestra en mobile",
+    "data": {
+      "homepageUrl": "/",
+      "mobileTitle": {
+        "text": "Carpeta del gestor"
+      },
+      "subnav": {
+        "text": "Carpeta del gestor"
+      },
+      "offcanvas": {
+        "text": "Menú",
+        "textClose": "Cerrar menu",
+        "labelledId": "offcanvas-title"
+      },
+      "caller": exampleOffcanvas
+    }
+  },
   {
     "name": "con subnav text",
     "description": "Utilizar para mostrar el nombre de la app actual. Si no se proporcionan items en subnav, el texto será simple sin un dropdown.",