desy-html 8.10.2 → 8.11.0

package/docs/index.html

@@ -38,6 +38,13 @@
 
   <h2>Changelog (English)</h2>
   <p>What's new in the latest version of desy-html</p>
+  <h3>v.8.11.0</h3>
+  <ul class="text-sm">
+    <li>Added. global funcion to Accordion and Accordion history to open/close all items.</li>
+    <li>Added global function to check/uncheck Toggle.</li>
+    <li>Bug fixes.</li>
+    <li>Improvements in docs.</li>
+  </ul>
   <h3>v.8.10.2</h3>
   <ul class="text-sm">
     <li>Updated Tailwind CSS form and typography plugins.</li>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "8.10.2",
+  "version": "8.11.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/css/styles.css

@@ -37,6 +37,7 @@
 @import "../templates/components/skip-link/_styles.skip-link.css";
 @import "../templates/components/table-advanced/_styles.table-advanced.css";
 @import "../templates/components/tabs/_styles.tabs.css";
+@import "../templates/components/toggle/_styles.toggle.css";
 @import "../templates/components/tree/_styles.tree.css";
 @import "./component.form-group.css";
 @import "./component.tippy-box.css";

package/src/js/aria/accordion.js

@@ -24,39 +24,7 @@ export function accordion(aria) {
       var target = event.target;
 
       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'
-        }
+        toggleAllAccordion(target)
       }
 
       if (target.classList.contains('c-accordion__trigger')) {
@@ -109,6 +77,10 @@ export function accordion(aria) {
 
         event.preventDefault();
       }
+
+      if(accordion.querySelector('.c-accordion__toggle-all') && !target.classList.contains('c-accordion__toggle-all')) {
+        checkIfAllPanelAreOpenOrClosed()
+      }
     });
 
     // Bind keyboard behaviors on the main accordion container
@@ -182,6 +154,55 @@ export function accordion(aria) {
       }
     }
 
+    function toggleAllAccordion(target, show = null) {
+      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') || show === true) {
+        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'
+      }
+    }
+
+    function checkIfAllPanelAreOpenOrClosed() {
+      const getAccordionTrigger = accordion.querySelectorAll('.c-accordion__trigger');
+      let arrayAccordionTrigger = [...getAccordionTrigger].map(element => element.getAttribute('aria-expanded'));
+
+      if(arrayAccordionTrigger.every(element => element === 'true')) {
+        accordion.querySelector('.c-accordion__toggle-all').textContent = 'Ocultar todo';
+      }
+
+      if(arrayAccordionTrigger.every(element => element === 'false')) {
+        accordion.querySelector('.c-accordion__toggle-all').textContent = 'Mostrar todo';
+      }
+    }
+
     window.activateItemAccordion = function (menuId, activeItemId) {
       const menu = document.getElementById(menuId);
       if (menu) {
@@ -194,7 +215,18 @@ export function accordion(aria) {
           return null;
         }
       } else {
-        console.log('There is no menu with this id in the document.');
+        console.log('There is no accordion with this id in the document.');
+        return null;
+      }
+    };
+
+    window.activateAllAccordion = function (element, show) {
+      const button = document.getElementById(element);
+      if (button) {
+        toggleAllAccordion(button, show);
+        return [button, show]
+      } else {
+        console.log('There is no element with this id in the menu.');
         return null;
       }
     };

package/src/js/aria/toggle.js

@@ -1,46 +1,61 @@
 export function Toggle(aria) {
 
-  class Toggle {
-    constructor(domNode) {
-      this.rootEl = domNode;
-      this.buttonEl = this.rootEl.querySelector('.c-toggle__button');
-      this.buttonEl.addEventListener('click', this.toggle.bind(this));
-      if(this.buttonEl.getAttribute('aria-pressed') === 'true' || this.buttonEl.getAttribute('aria-checked') === 'true') {
-        this.buttonEl.click()
-      }
+  aria.toggleInit = function (domNode) {
+    this.rootEl = domNode;
+    this.buttonEl = this.rootEl.querySelector('.c-toggle__button');
+    this.buttonEl.addEventListener('click', this.toggle.bind(this));
+    if(this.buttonEl.getAttribute('aria-pressed') === 'true' || this.buttonEl.getAttribute('aria-checked') === 'true') {
+      this.buttonEl.click()
     }
+  };
 
-    toggle(event) {
-      const { target } = event
-      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')
+  aria.toggle = function (event) {
+    const { target } = event
+    target.classList.toggle('c-toggle--is-opened')
 
-      this.ariaAttribute(target)
+    this.ariaAttribute(target)
+  }
+
+  aria.ariaAttribute = function (target) {
+    if(target.getAttribute('aria-checked')) {
+      const toggleIsOpened = target.classList.contains('c-toggle--is-opened') ? true : false
+      target.setAttribute('aria-checked', toggleIsOpened);
+    }
+
+    if(target.getAttribute('aria-pressed')) {
+      const toggleIsOpened = target.classList.contains('c-toggle--is-opened') ? true : false
+      target.setAttribute('aria-pressed', toggleIsOpened);
+    }
+
+    if(target.getAttribute('aria-expanded')) {
+      const toggleIsOpened = target.classList.contains('c-toggle--is-opened') ? true : false
+      target.setAttribute('aria-expanded', toggleIsOpened);
     }
+  }
 
-    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);
-      }
+  function handleToggle(element, toggle) {
+    if(toggle){
+      element.classList.add('c-toggle--is-opened')
+    } else {
+      element.classList.remove('c-toggle--is-opened')
     }
 
+    aria.ariaAttribute(element)
   }
 
+  window.activateItemToggle = function (element, toggle) {
+    const toggleElement = document.getElementById(element);
+    if (toggleElement) {
+      handleToggle(toggleElement, toggle)
+      return [toggleElement, toggle];
+    } else {
+      console.log('There is no toggle with this id in the document.');
+      return null;
+    }
+  };
+
   const toggles = document.querySelectorAll('[data-module="c-toggle"]');
   toggles.forEach((toggleElement) => {
-    new Toggle(toggleElement);
+    aria.toggleInit(toggleElement);
   });
-
 }

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

@@ -228,6 +228,35 @@
       ]
     }
   },
+  {
+    "name": "Mostrar todo u ocultar todo con JavaScript",
+    "description": 'Es necesario usar el parámetro <code>"showControl": true</code>. Puedes usar con javascript la función global <code>activateAllAccordion(element, show)</code>, para mostrar u ocultar todos los items, usando el id del botón, el parámetro <code>show</code> admite <code>true</code> o <code>false</code>, si le pasamos true se mostrarán todos los items expandidos, y si le pasamos false se mostrarán cerrados. Ej: Abre la consola del navegador y escribe <code>activateAllAccordion("show-all-accordion-button-js", true)</code> para mostrar todos los items expandidos.',
+    "data": {
+      "idPrefix": "show-all-accordion-example-js",
+      "id": "show-all-accordion-button-js",
+      "headingLevel": 3,
+      "heading": {
+        "text": "Encabezado de acordeón"
+      },
+      "showControl": true,
+      "allowMultiple": true,
+      "items": [
+        {
+          "headerText": "Item de acordeón 1",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
+        },
+        {
+          "headerText": "Item de acordeón 2",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
+          "open": true
+        },
+        {
+          "headerText": "Item de acordeón 3",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
+        }
+      ]
+    }
+  },
   {
     "name": "Con controles personalizados para mostrar/ocultar",
     "description": 'Usa los parámetros <code>"show"</code> y <code>"hide"</code> para personalizar los controles que permiten abrir cada item. El último item de este ejemplo no muestra ningún controlador visible.',

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

@@ -38,7 +38,7 @@
       {% endif %}
     {% endif %}
     {% if params.showControl %}
-    <button 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" type="button">
+    <button id="{{ params.id }}" 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" type="button">
       Mostrar todo
     </button>
     {% endif %}

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

@@ -32,6 +32,10 @@ params:
     type: string
     required: false
     description: Classes to add to the heading.
+  - name: id
+    type: string
+    required: false
+    description: Id to add to the button to show or hide all elements. Not required, but recommended to improve the accessibility.
 - name: showControl
   type: boolean
   required: false
@@ -118,4 +122,4 @@ params:
 - name: attributes
   type: object
   required: false
-  description: HTML attributes (for example data attributes) to add to the accordion container.
+  description: HTML attributes (for example data attributes) to add to the accordion container.

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

@@ -264,6 +264,35 @@
       ]
     }
   },
+  {
+    "name": "Mostrar todo u ocultar todo con JavaScript",
+    "description": 'Es necesario usar el parámetro <code>"showControl": true</code>. Puedes usar con javascript la función global <code>activateAllAccordion(element, show)</code>, para mostrar u ocultar todos los items, usando el id del botón, el parámetro <code>show</code> admite <code>true</code> o <code>false</code>, si le pasamos true se mostrarán todos los items expandidos, y si le pasamos false se mostrarán cerrados. Ej: Abre la consola del navegador y escribe <code>activateAllAccordion("show-all-accordion-history-button-js", true)</code> para mostrar todos los items expandidos.',
+    "data": {
+      "idPrefix": "show-all-accordion-example-history-js",
+      "id": "show-all-accordion-history-button-js",
+      "headingLevel": 3,
+      "heading": {
+        "text": "Encabezado de acordeón"
+      },
+      "showControl": true,
+      "allowMultiple": true,
+      "items": [
+        {
+          "headerText": "Item de acordeón 1",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
+        },
+        {
+          "headerText": "Item de acordeón 2",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
+          "open": true
+        },
+        {
+          "headerText": "Item de acordeón 3",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
+        }
+      ]
+    }
+  },
   {
     "name": "Con controles personalizados para mostrar/ocultar",
     "description": 'Usa los parámetros <code>"show"</code> y <code>"hide"</code> para personalizar los controles que permiten abrir cada item. El último item de este ejemplo no muestra ningún controlador visible.',

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

@@ -39,7 +39,7 @@
       {% endif %}
     {% endif %}
     {% if params.showControl %}
-    <button 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" type="button">
+    <button id="{{ params.id }}" 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" type="button">
       Mostrar todo
     </button>
     {% endif %}

package/src/templates/components/accordion-history/params.accordion-history.yaml

@@ -28,6 +28,10 @@ params:
     type: string
     required: true
     description: If `text` is set, this is not required. HTML to use within the heading. If `html` is provided, the `text` argument will be ignored.
+  - name: id
+    type: string
+    required: false
+    description: Id to add to the item. Not required, but recommended to improve the accessibility.
   - name: classes
     type: string
     required: false
@@ -122,4 +126,4 @@ params:
 - name: attributes
   type: object
   required: false
-  description: HTML attributes (for example data attributes) to add to the accordion container.
+  description: HTML attributes (for example data attributes) to add to the accordion container.

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

@@ -23,7 +23,7 @@
       {% set subId = "sub-" + id %}
     <li class="relative" role="none">
       {% if item.sub %}
-      <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button {%- if item.classes %} {{ item.classes }}{% endif %} {%- if item.disabled %} c-menubar__button--disabled{% endif %} {%- if item.active %} c-menu-navigation__button--has-selection{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %} {% if item.disabled %} aria-disabled="true" tabindex="-1"{% endif %}  id="{{ id }}"
+      <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button {%- if item.classes %} {{ item.classes }}{% endif %} {%- if item.disabled %} c-menubar__button--disabled{% endif %} {%- if item.active %} c-menubar__button--has-selection{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %} {% if item.disabled %} aria-disabled="true" tabindex="-1"{% endif %}  id="{{ id }}"
         {%- if item.sub.html %} data-aria-controls="{{ subId }}"{% endif %}
         {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
         <span class="inline-flex self-center max-w-xs align-middle truncate">{{ item.html | safe if item.html else item.text }}</span>
@@ -32,7 +32,7 @@
       </a>
       {% endif %}
       {% if item.href and not item.sub %}
-      <a role="menuitem" {%- if id %} id="{{ id }}"{% endif %} {%- if item.href %} href="{{ item.href }}"{% endif %} class="c-menubar__button {%- if item.classes %} {{ item.classes }}{% endif %} {%- if item.disabled %} c-menubar__button--disabled{% endif %} {%- if item.active %} c-menu-navigation__button--has-selection{% 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 -%}>
+      <a role="menuitem" {%- if id %} id="{{ id }}"{% endif %} {%- if item.href %} href="{{ item.href }}"{% endif %} class="c-menubar__button {%- if item.classes %} {{ item.classes }}{% endif %} {%- if item.disabled %} c-menubar__button--disabled{% endif %} {%- if item.active %} c-menubar__button--has-selection{% 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 -%}>
         {{ item.html | safe if item.html else item.text }}
       </a>
       {% endif %}

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

@@ -58,7 +58,7 @@ params:
 - name: firstText
   type: string
   required: false
-  description: Text for the first button. Defaults to "Anterior".
+  description: Text for the first button. Defaults to "Primera".
 - name: showLast
   type: boolean
   required: false
@@ -70,7 +70,7 @@ params:
 - name: lastText
   type: string
   required: false
-  description: Text for the last button. Defaults to "Siguiente".
+  description: Text for the last button. Defaults to "Última".
 - name: itemsListbox
   type: object
   required: false

package/src/templates/components/table-advanced/params.table-advanced.yaml

@@ -87,10 +87,6 @@ params:
     type: string
     required: false
     description: If `text` is set, this is not required. HTML for table tfoot cells. If `html` is provided, the `text` argument will be ignore
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to the table tfoot cell.
   - name: colspan
     type: integer
     required: false

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

@@ -18,6 +18,22 @@
       }
     }
   },
+  {
+    "name": "Expandir con JavaScript",
+    "description": 'También puedes usar con javascript la función global <code>activateItemToggle(element, open)</code>,  para expandir un item , usando su id, el parámetro <code>open</code> admite <code>true</code> o <code>false</code>, si le pasamos true se mostrará expandido, y si le pasamos false se mostrará cerrado. Ej: Abre la consola del navegador y escribe <code>activateItemToggle("toggle-expanded-js", true)</code> para mostrar el item actual expandido.',
+    "data": {
+      "classes": "c-button",
+      "id": "toggle-expanded-js",
+      "offState": {
+        "classes": "",
+        "html": 'Mostrar detalles'
+      },
+      "onState": {
+        "classes": "c-button--has-selection",
+        "html": '<span class="inline-flex"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="self-center mr-2" aria-hidden="true" width="1em" height="1em"><path d="M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z" fill="currentColor"/></svg>Mostrar detalles</span>'
+      }
+    }
+  },
   {
     "name": "2 iconos",
     "description": 'Apariencia de botón, sin cambio en el texto del botón, sólo cambian sus iconos. Necesita un elemento externo con un <code>id</code> para referenciarlo con su <code>aria-controls</code> para mostrar/ocultar ese elemento externo.',
@@ -52,6 +68,23 @@
       }
     }
   },
+  {
+    "name": "Pressed con Javascript",
+    "description": 'También puedes usar con javascript la función global <code>activateItemToggle(element, toggle)</code>,  para expandir un item , usando su id, el parámetro <code>toggle</code> admite <code>true</code> o <code>false</code>, si le pasamos true se mostrará expandido, y si le pasamos false se mostrará cerrado. Ej: Abre la consola del navegador y escribe <code>activateItemToggle("toggle-pressed-js", true)</code> para mostrar el item actual expandido.',
+    "data": {
+      "isExpandible": false,
+      "classes": "c-button",
+      "id": "toggle-pressed-js",
+      "offState": {
+        "classes": "",
+        "html": '<span class="inline-flex"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="self-center mr-2" aria-hidden="true" width="1em" height="1em"><path d="M6.41 10.78a.25.25 0 0 0 0 .34l2.16 2.41a1.35 1.35 0 0 0 .8.27 1.31 1.31 0 0 0 1.31-1.31V7.12a.26.26 0 0 0-.43-.18ZM.26 13.81a.76.76 0 0 0 1 0l12.5-12.5a.76.76 0 0 0 .18-.31.71.71 0 0 0 .06-.24.73.73 0 0 0-.19-.49.74.74 0 0 0-1.06 0l-2 2a.26.26 0 0 1-.19.07.25.25 0 0 1-.18-.08 1.23 1.23 0 0 0-1-.45 1.29 1.29 0 0 0-.8.27L5.74 5.21a.23.23 0 0 1-.19.09H4.42a1.75 1.75 0 0 0-1.75 1.75v1.5A1.78 1.78 0 0 0 3 9.61a.25.25 0 0 1 0 .33L.22 12.73a.75.75 0 0 0 0 1.06Z" fill="currentColor" transform="scale(3.42857)"/></svg>Reproducir sonido</span>'
+      },
+      "onState": {
+        "classes": "c-button--has-selection",
+        "html": '<span class="inline-flex"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="self-center mr-2" aria-hidden="true" width="1em" height="1em"><path d="M12 2.21a.75.75 0 0 0-1.06 0 .75.75 0 0 0 0 1.06 5.26 5.26 0 0 1 0 7.46.75.75 0 0 0 0 1.06.75.75 0 0 0 1.06 0 6.74 6.74 0 0 0 0-9.58Z" fill="currentColor" transform="scale(3.42857)"/><path d="M10.34 4.89a.75.75 0 0 0-1.23.85 2.23 2.23 0 0 1 0 2.52.74.74 0 0 0 .19 1 .75.75 0 0 0 1-.19 3.7 3.7 0 0 0 0-4.22ZM6.69 1a1.35 1.35 0 0 0-.8.27L3.07 4.42a.27.27 0 0 1-.19.08H1.75A1.76 1.76 0 0 0 0 6.25v1.5A1.76 1.76 0 0 0 1.75 9.5h1.13a.27.27 0 0 1 .19.08l2.82 3.15a1.35 1.35 0 0 0 .8.27A1.31 1.31 0 0 0 8 11.69V2.31A1.31 1.31 0 0 0 6.69 1Z" fill="currentColor" transform="scale(3.42857)"/></svg>Reproducir sonido</span>'
+      }
+    }
+  },
   {
     "name": "Pressed",
     "description": 'Usa <code>"pressed": true</code> para activarlo inicialmente.',
@@ -107,6 +140,26 @@
       }
     }
   },
+  {
+    "name": "isSwitch con JavaScript",
+    "description": 'También puedes usar con javascript la función global <code>activateItemToggle(element, toggle)</code>,  para modificar el estado del Switch, usando su id, el parámetro <code>toggle</code> admite <code>true</code> o <code>false</code>, si le pasamos true se mostrará activado, y si le pasamos false se mostrará desactivado. Ej: Abre la consola del navegador y escribe <code>activateItemToggle("toggle-switch-js", true)</code> para mostrar el switch activado.',
+    "data": {
+      "classes": "",
+      "id": "toggle-switch-js",
+      "isSwitch": true,
+      "offState": {
+        "classes": "",
+        "html": '<span class="flex align-center justify-between gap-xs"><span class="text-sm" aria-hidden="true">Off</span><span class="bg-neutral-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-neutral-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75"><span class="sr-only">Off</span><span aria-hidden="true" class="translate-x-0 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200" /></span></span><span class="text-sm" aria-hidden="true">On</span></span>'
+      },
+      "onState": {
+        "classes": "",
+        "html": '<span class="flex align-center justify-between gap-xs"><span class="text-sm" aria-hidden="true">Off</span><span class="bg-primary-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75"><span class="sr-only">On</span><span aria-hidden="true" class="translate-x-4 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200" /></span></span><span class="text-sm" aria-hidden="true">On</span></span>'
+      },
+      "attributes": {
+        "aria-labelledby": "id-text"
+      }
+    }
+  },
   {
     "name": "isSwitch peque",
     "data": {

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

@@ -0,0 +1,31 @@
+/* ==========================================================================
+   _styles.toggle.css
+   ========================================================================== */
+
+@layer components {
+  .c-toggle {
+    [aria-expanded="true"],
+    [aria-pressed="true"],
+    [aria-checked="true"] {
+      .c-button--is-not-pressed {
+        @apply hidden;
+      }
+
+      .c-button--is-pressed {
+        @apply block;
+      }
+    }
+
+    [aria-expanded="false"],
+    [aria-pressed="false"],
+    [aria-checked="false"] {
+      .c-button--is-not-pressed {
+        @apply block;
+      }
+
+      .c-button--is-pressed {
+        @apply hidden;
+      }
+    }
+  }
+}

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

@@ -17,6 +17,7 @@
     {% endif %}
     type="button"
     class="c-toggle__button {{ params.classes if params.classes else '' }}"
+    id="{{ params.id }}"
     {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}
   >
     <span class="c-button--is-not-pressed pointer-events-none">{{ params.offState.html | safe if params.offState.html else params.offState.text }}</span>

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

@@ -23,6 +23,10 @@ params:
     type: string
     required: true
     description: If `text` is set, this is not required. HTML to use within the state. If `html` is provided, the `text` argument will be ignored.
+  - name: id
+    type: string
+    required: false
+    description: Id to add to the toggle element. Not required, but recommended to improve the accessibility.
   - name: classes
     type: string
     required: false