desy-html 10.2.2 → 11.0.1

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

@@ -1,188 +1,188 @@
-{% set exampleComponent = "toggle" %}
-{% set examples =  [
-  {
-    "name": "por defecto",
-    "description": 'Apariencia de botón, sin cambio en el texto del botón, sólo cambia su estado visual. Necesita un elemento externo con un <code>id</code> para referenciarlo con su <code>aria-controls</code> para mostrar/ocultar ese elemento externo.',
-    "data": {
-      "id": "toggle-default",
-      "classes": "c-button",
-      "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>'
-      },
-      "attributes": {
-        "aria-controls": "id-panel-oculto"
-      }
-    }
-  },
-  {
-    "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.',
-    "data": {
-      "id": "toggle-2-icons",
-      "classes": "c-button c-button--sm",
-      "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" focusable="false" width="1em" height="1em"><path d="M13.71 2.3a1.45 1.45 0 0 0 .14-1.51A1.41 1.41 0 0 0 12.57 0H1.43A1.4 1.4 0 0 0 .15.8a1.43 1.43 0 0 0 .16 1.52l5.13 6.32a.25.25 0 0 1 .06.16v4.7a.5.5 0 0 0 .31.46A.43.43 0 0 0 6 14a.47.47 0 0 0 .35-.15l2-2a.47.47 0 0 0 .15-.35V8.8a.25.25 0 0 1 .06-.16ZM7.6 6.65a.29.29 0 0 1-.2.09h-.8a.29.29 0 0 1-.2-.09L3 2.41a.26.26 0 0 1 0-.27.26.26 0 0 1 .15-.14h7.7a.26.26 0 0 1 .22.14.26.26 0 0 1 0 .27Z" fill="currentColor" transform="scale(3.42857)"/></svg>Mostrar filtros</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" focusable="false" width="1em" height="1em"><path d="M13.9.8a.51.51 0 0 0 0-.52.51.51 0 0 0-.4-.28H.5a.51.51 0 0 0-.45.28A.51.51 0 0 0 .1.8l5.19 6.79a1 1 0 0 1 .21.61v5.3a.5.5 0 0 0 .31.46A.43.43 0 0 0 6 14a.47.47 0 0 0 .35-.15l2-2a.47.47 0 0 0 .15-.35V8.2a1 1 0 0 1 .21-.61Z" fill="currentColor" transform="scale(3.42857)"/></svg>Mostrar filtros</span>'
-      },
-      "attributes": {
-        "aria-controls": "id-panel-oculto"
-      }
-    }
-  },
-  {
-    "name": "no expandible",
-    "description": 'Usa <code>"isExpandible": false</code>. En lugar de usar <code>aria-expanded</code> usará <code>aria-pressed</code>.',
-    "data": {
-      "id": "toggle-not-expandible",
-      "isExpandible": false,
-      "classes": "c-button",
-      "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 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.',
-    "data": {
-      "id": "toggle-pressed",
-      "pressed": true,
-      "classes": "c-button",
-      "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": "isSwitch",
-    "description": 'Apariencia de Switch con <code>"isSwitch": true</code>, sin cambio en el texto, sólo cambia su estado visual. Necesita un elemento externo con un <code>id</code> para referenciarlo con su <code>aria-labelledby</code>.',
-    "data": {
-      "id": "toggle-isswitch",
-      "classes": "focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black",
-      "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 pressed",
-    "description": 'Usa <code>"pressed": true</code> para activarlo inicialmente.',
-    "data": {
-      "id": "toggle-isswitch-pressed",
-      "classes": "focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black",
-      "pressed": true,
-      "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 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": "focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black",
-      "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": {
-      "id": "toggle-small",
-      "classes": "focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black",
-      "isSwitch": true,
-      "offState": {
-        "classes": "",
-        "html": '<span class="flex align-center justify-between gap-xs"><span class="text-xs" aria-hidden="true">Off</span><span class="bg-neutral-base relative inline-flex flex-shrink-0 h-4 w-8 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-3 w-3 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200" /></span></span><span class="text-xs" aria-hidden="true">On</span></span>'
-      },
-      "onState": {
-        "classes": "",
-        "html": '<span class="flex align-center justify-between gap-xs"><span class="text-xs" aria-hidden="true">Off</span><span class="bg-primary-base relative inline-flex flex-shrink-0 h-4 w-8 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-3 w-3 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200" /></span></span><span class="text-xs" aria-hidden="true">On</span></span>'
-      },
-      "attributes": {
-        "aria-labelledby": "id-text"
-      }
-    }
-  }
-] %}
+{% set exampleComponent = "toggle" %}
+{% set examples =  [
+  {
+    "name": "por defecto",
+    "description": 'Apariencia de botón, sin cambio en el texto del botón, sólo cambia su estado visual. Necesita un elemento externo con un <code>id</code> para referenciarlo con su <code>aria-controls</code> para mostrar/ocultar ese elemento externo.',
+    "data": {
+      "id": "toggle-default",
+      "classes": "c-button",
+      "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>'
+      },
+      "attributes": {
+        "aria-controls": "id-panel-oculto"
+      }
+    }
+  },
+  {
+    "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.',
+    "data": {
+      "id": "toggle-2-icons",
+      "classes": "c-button c-button--sm",
+      "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" focusable="false" width="1em" height="1em"><path d="M13.71 2.3a1.45 1.45 0 0 0 .14-1.51A1.41 1.41 0 0 0 12.57 0H1.43A1.4 1.4 0 0 0 .15.8a1.43 1.43 0 0 0 .16 1.52l5.13 6.32a.25.25 0 0 1 .06.16v4.7a.5.5 0 0 0 .31.46A.43.43 0 0 0 6 14a.47.47 0 0 0 .35-.15l2-2a.47.47 0 0 0 .15-.35V8.8a.25.25 0 0 1 .06-.16ZM7.6 6.65a.29.29 0 0 1-.2.09h-.8a.29.29 0 0 1-.2-.09L3 2.41a.26.26 0 0 1 0-.27.26.26 0 0 1 .15-.14h7.7a.26.26 0 0 1 .22.14.26.26 0 0 1 0 .27Z" fill="currentColor" transform="scale(3.42857)"/></svg>Mostrar filtros</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" focusable="false" width="1em" height="1em"><path d="M13.9.8a.51.51 0 0 0 0-.52.51.51 0 0 0-.4-.28H.5a.51.51 0 0 0-.45.28A.51.51 0 0 0 .1.8l5.19 6.79a1 1 0 0 1 .21.61v5.3a.5.5 0 0 0 .31.46A.43.43 0 0 0 6 14a.47.47 0 0 0 .35-.15l2-2a.47.47 0 0 0 .15-.35V8.2a1 1 0 0 1 .21-.61Z" fill="currentColor" transform="scale(3.42857)"/></svg>Mostrar filtros</span>'
+      },
+      "attributes": {
+        "aria-controls": "id-panel-oculto"
+      }
+    }
+  },
+  {
+    "name": "no expandible",
+    "description": 'Usa <code>"isExpandible": false</code>. En lugar de usar <code>aria-expanded</code> usará <code>aria-pressed</code>.',
+    "data": {
+      "id": "toggle-not-expandible",
+      "isExpandible": false,
+      "classes": "c-button",
+      "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 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.',
+    "data": {
+      "id": "toggle-pressed",
+      "pressed": true,
+      "classes": "c-button",
+      "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": "isSwitch",
+    "description": 'Apariencia de Switch con <code>"isSwitch": true</code>, sin cambio en el texto, sólo cambia su estado visual. Necesita un elemento externo con un <code>id</code> para referenciarlo con su <code>aria-labelledby</code>.',
+    "data": {
+      "id": "toggle-isswitch",
+      "classes": "focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black",
+      "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 pressed",
+    "description": 'Usa <code>"pressed": true</code> para activarlo inicialmente.',
+    "data": {
+      "id": "toggle-isswitch-pressed",
+      "classes": "focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black",
+      "pressed": true,
+      "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 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": "focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black",
+      "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": {
+      "id": "toggle-small",
+      "classes": "focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black",
+      "isSwitch": true,
+      "offState": {
+        "classes": "",
+        "html": '<span class="flex align-center justify-between gap-xs"><span class="text-xs" aria-hidden="true">Off</span><span class="bg-neutral-base relative inline-flex flex-shrink-0 h-4 w-8 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-3 w-3 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200" /></span></span><span class="text-xs" aria-hidden="true">On</span></span>'
+      },
+      "onState": {
+        "classes": "",
+        "html": '<span class="flex align-center justify-between gap-xs"><span class="text-xs" aria-hidden="true">Off</span><span class="bg-primary-base relative inline-flex flex-shrink-0 h-4 w-8 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-3 w-3 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200" /></span></span><span class="text-xs" aria-hidden="true">On</span></span>'
+      },
+      "attributes": {
+        "aria-labelledby": "id-text"
+      }
+    }
+  }
+] %}

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

@@ -1,3 +1,3 @@
-{% macro componentToggle(params) %}
-{% include "./_template.toggle.njk" %}
-{% endmacro %}
+{% macro componentToggle(params) %}
+{% include "./_template.toggle.njk" %}
+{% endmacro %}

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

@@ -1,31 +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;
-      }
-    }
-  }
-}
+/* ==========================================================================
+   _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

@@ -1,27 +1,27 @@
-<!-- toggle -->
-<div data-module="c-toggle" class="relative c-toggle">
-  <!-- Button -->
-  <button
-    {% if params.isSwitch and params.pressed == null %}
-      role = "switch"
-      aria-checked="false"
-    {% elseif params.isSwitch and params.pressed == true %}
-      role = "switch"
-      aria-checked="true"
-    {% elseif params.isExpandible == false %}
-      aria-pressed="false"
-    {% elseif params.pressed == true %}
-      aria-pressed="true"
-    {% else %}
-      aria-expanded="false"
-    {% 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>
-    <span class="c-button--is-pressed hidden pointer-events-none">{{ params.onState.html | safe if params.onState.html else params.onState.text }}</span>
-  </button>
-</div>
-<!-- /toggle -->
+<!-- toggle -->
+<div data-module="c-toggle" class="relative c-toggle">
+  <!-- Button -->
+  <button
+    {% if params.isSwitch and params.pressed == null %}
+      role = "switch"
+      aria-checked="false"
+    {% elseif params.isSwitch and params.pressed == true %}
+      role = "switch"
+      aria-checked="true"
+    {% elseif params.isExpandible == false %}
+      aria-pressed="false"
+    {% elseif params.pressed == true %}
+      aria-pressed="true"
+    {% else %}
+      aria-expanded="false"
+    {% 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>
+    <span class="c-button--is-pressed hidden pointer-events-none">{{ params.onState.html | safe if params.onState.html else params.onState.text }}</span>
+  </button>
+</div>
+<!-- /toggle -->