desy-html 16.0.4 → 17.0.0

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

@@ -1,248 +1,248 @@
-{% 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"
-      }
-    },
-    "visualDescription": "Componente toggle con título \"por defecto\" en texto negro regular. Contiene un botón \"Mostrar detalles\" con borde azul de 1px, texto azul, fondo blanco, y tamaño compacto. El componente está dentro de un contenedor con borde gris claro.",
-    "_generated": {
-      "hash": "f256e8099af3c2ad5d4de3222e1d7966",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:17:10.468Z"
-    }
-  },
-  {
-    "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>"
-      }
-    },
-    "visualDescription": "Componente toggle con título \"Expandir con JavaScript\" en texto negro regular. Contiene un botón \"Mostrar detalles\" con borde azul de 1px, texto azul, fondo blanco, y tamaño compacto. El componente está dentro de un contenedor con borde gris claro.",
-    "_generated": {
-      "hash": "a803ee552d7c46c776daf83c70e364ae",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:17:10.468Z"
-    }
-  },
-  {
-    "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"
-      }
-    },
-    "visualDescription": "Componente toggle con título \"2 iconos\" en texto negro regular. Contiene un botón \"Mostrar filtros\" con icono de flecha descendente a la izquierda, borde azul de 1px, texto azul, fondo blanco, y tamaño compacto. El componente está dentro de un contenedor con borde gris claro.",
-    "_generated": {
-      "hash": "6f376b8069776ae0cdbaf50722c1070f",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:17:10.468Z"
-    }
-  },
-  {
-    "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>"
-      }
-    },
-    "visualDescription": "Caja rectangular con borde gris delgado y fondo blanco. Contiene texto en color gris oscuro alineado a la izquierda, seguido de un botón con borde azul y texto azul que incluye un icono de reproducción.",
-    "_generated": {
-      "hash": "b1713b9890531dc1ba131c55e35bf3cf",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:17:17.635Z"
-    }
-  },
-  {
-    "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>"
-      }
-    },
-    "visualDescription": "Caja rectangular con borde gris delgado y fondo blanco. Contiene texto en color gris oscuro alineado a la izquierda, seguido de un botón con borde azul y texto azul que incluye un icono de reproducción.",
-    "_generated": {
-      "hash": "e7ade4d0883eec8da255cd876a56016c",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:17:17.635Z"
-    }
-  },
-  {
-    "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>"
-      }
-    },
-    "visualDescription": "Caja rectangular con borde gris delgado y fondo blanco. Contiene texto en color gris oscuro peso normal alineado a la izquierda, seguido de un botón con borde azul y texto azul que incluye un icono de play orientado hacia la derecha.",
-    "_generated": {
-      "hash": "1c3d6c246f9cdb88ae6bbdcedbed615a",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:17:17.635Z"
-    }
-  },
-  {
-    "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-hidden focus:shadow-outline-focus focus:text-black group",
-      "isSwitch": true,
-      "offState": {
-        "classes": "",
-        "html": "<span class='flex align-center justify-between gap-xs'><span class='text-sm group-focus:text-black' aria-hidden='true'>Desactivado</span><span class='bg-neutral-base group-focus:bg-black relative inline-flex shrink-0 h-5 w-9 border-2 border-neutral-base group-focus:border-black rounded-full cursor-pointer focus:outline-hidden focus-visible:ring-2  focus-visible:ring-white/75'><span class='sr-only'>Desactivado</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'>Activado</span></span>"
-      },
-      "onState": {
-        "classes": "",
-        "html": "<span class='flex align-center justify-between gap-xs'><span class='text-sm group-focus:text-black' aria-hidden='true'>Desactivado</span><span class='bg-primary-base relative inline-flex shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer focus:outline-hidden focus-visible:ring-2  focus-visible:ring-white/75'><span class='sr-only'>Activado</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'>Activado</span></span>"
-      },
-      "attributes": {
-        "aria-labelledby": "id-text"
-      }
-    },
-    "visualDescription": "Caja rectangular con borde gris claro, fondo blanco, conteniendo un título en texto negro peso normal. Debajo del título aparece un control toggle switch con círculo gris en posición izquierda sobre fondo gris claro, precedido por label \"Desactivado\" en gris y seguido por label \"Activado\" en negro.",
-    "_generated": {
-      "hash": "f8ebb8282204bedc91a6f6da6563701e",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:17:26.020Z"
-    }
-  },
-  {
-    "name": "isSwitch pressed",
-    "description": "Usa <code>'pressed': true</code> para activarlo inicialmente.",
-    "data": {
-      "id": "toggle-isswitch-pressed",
-      "classes": "focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black group",
-      "pressed": true,
-      "isSwitch": true,
-      "offState": {
-        "classes": "",
-        "html": "<span class='flex align-center justify-between gap-xs'><span class='text-sm group-focus:text-black' aria-hidden='true'>Desactivado</span><span class='bg-neutral-base group-focus:bg-black relative inline-flex shrink-0 h-5 w-9 border-2 border-neutral-base group-focus:border-black rounded-full cursor-pointer focus:outline-hidden focus-visible:ring-2  focus-visible:ring-white/75'><span class='sr-only'>Desactivado</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'>Activado</span></span>"
-      },
-      "onState": {
-        "classes": "",
-        "html": "<span class='flex align-center justify-between gap-xs'><span class='text-sm group-focus:text-black' aria-hidden='true'>Desactivado</span><span class='bg-primary-base relative inline-flex shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer focus:outline-hidden focus-visible:ring-2  focus-visible:ring-white/75'><span class='sr-only'>Activado</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'>Activado</span></span>"
-      },
-      "attributes": {
-        "aria-labelledby": "id-text"
-      }
-    },
-    "visualDescription": "Caja rectangular con borde gris claro, fondo blanco, conteniendo un título en texto negro peso normal. Debajo del título aparece un control toggle switch con círculo blanco en posición derecha sobre fondo negro, precedido por label \"Desactivado\" en gris y seguido por label \"Activado\" en negro.",
-    "_generated": {
-      "hash": "881def83fff2ce3ce046c06cbeb619db",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:17:26.021Z"
-    }
-  },
-  {
-    "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-hidden focus:shadow-outline-focus focus:text-black group",
-      "id": "toggle-switch-js",
-      "isSwitch": true,
-      "offState": {
-        "classes": "",
-        "html": "<span class='flex align-center justify-between gap-xs'><span class='text-sm group-focus:text-black' aria-hidden='true'>Desactivado</span><span class='bg-neutral-base group-focus:bg-black relative inline-flex shrink-0 h-5 w-9 border-2 border-neutral-base group-focus:border-black rounded-full cursor-pointer focus:outline-hidden focus-visible:ring-2  focus-visible:ring-white/75'><span class='sr-only'>Desactivado</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'>Activado</span></span>"
-      },
-      "onState": {
-        "classes": "",
-        "html": "<span class='flex align-center justify-between gap-xs'><span class='text-sm group-focus:text-black' aria-hidden='true'>Desactivado</span><span class='bg-primary-base relative inline-flex shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer focus:outline-hidden focus-visible:ring-2  focus-visible:ring-white/75'><span class='sr-only'>Activado</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'>Activado</span></span>"
-      },
-      "attributes": {
-        "aria-labelledby": "id-text"
-      }
-    },
-    "visualDescription": "Caja rectangular con borde gris claro, fondo blanco, conteniendo un título en texto negro peso normal. Debajo del título aparece un control toggle switch con círculo gris en posición izquierda sobre fondo gris claro, precedido por label \"Desactivado\" en gris y seguido por label \"Activado\" en negro.",
-    "_generated": {
-      "hash": "3807ce8562227322ae0625ac7a6d8ef0",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:17:26.021Z"
-    }
-  },
-  {
-    "name": "isSwitch peque",
-    "data": {
-      "id": "toggle-small",
-      "classes": "mb-sm focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black group",
-      "isSwitch": true,
-      "offState": {
-        "classes": "",
-        "html": "<span class='flex align-center justify-between gap-xs'><span class='text-xs group-focus:text-black' aria-hidden='true'>Desactivado</span><span class='bg-neutral-base group-focus:bg-black relative inline-flex shrink-0 h-4 w-8 border-2 border-neutral-base group-focus:border-black rounded-full cursor-pointer focus:outline-hidden focus-visible:ring-2  focus-visible:ring-white/75'><span class='sr-only'>Desactivado</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'>Activado</span></span>"
-      },
-      "onState": {
-        "classes": "",
-        "html": "<span class='flex align-center justify-between gap-xs'><span class='text-xs group-focus:text-black' aria-hidden='true'>Desactivado</span><span class='bg-primary-base relative inline-flex shrink-0 h-4 w-8 border-2 border-primary-base rounded-full cursor-pointer focus:outline-hidden focus-visible:ring-2  focus-visible:ring-white/75'><span class='sr-only'>Activado</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'>Activado</span></span>"
-      },
-      "attributes": {
-        "aria-labelledby": "id-text"
-      }
-    },
-    "visualDescription": "Toggle switch compacto con un interruptor deslizante circular blanco sobre fondo gris claro redondeado. El componente incluye label de texto negro a la izquierda que lee \"Desactivado\" y un indicador de estado \"Activado\" a la derecha del switch en gris medio. El switch tiene dimensiones pequeñas con bordes redondeados completos y el botón circular está posicionado en el lado izquierdo indicando estado desactivado.",
-    "_generated": {
-      "hash": "efea3df865fe8817162d4523690ebd4a",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:17:33.310Z"
-    }
-  }
-] %}
+{% 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"
+      }
+    },
+    "visualDescription": "Componente toggle con título en texto negro regular. Contiene un botón con borde azul de 1px, texto azul, fondo blanco, y tamaño compacto.",
+    "_generated": {
+      "hash": "f256e8099af3c2ad5d4de3222e1d7966",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:17:10.468Z"
+    }
+  },
+  {
+    "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>"
+      }
+    },
+    "visualDescription": "Componente toggle con título en texto negro regular. Contiene un botón con borde azul de 1px, texto azul, fondo blanco, y tamaño compacto.",
+    "_generated": {
+      "hash": "a803ee552d7c46c776daf83c70e364ae",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:17:10.468Z"
+    }
+  },
+  {
+    "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"
+      }
+    },
+    "visualDescription": "Componente toggle con título en texto negro regular. Contiene un botón con icono de flecha descendente a la izquierda, borde azul de 1px, texto azul, fondo blanco, y tamaño compacto.",
+    "_generated": {
+      "hash": "6f376b8069776ae0cdbaf50722c1070f",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:17:10.468Z"
+    }
+  },
+  {
+    "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>"
+      }
+    },
+    "visualDescription": "Caja rectangular con borde gris delgado y fondo blanco. Contiene texto en color gris oscuro alineado a la izquierda, seguido de un botón con borde azul y texto azul que incluye un icono.",
+    "_generated": {
+      "hash": "b1713b9890531dc1ba131c55e35bf3cf",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:17:17.635Z"
+    }
+  },
+  {
+    "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>"
+      }
+    },
+    "visualDescription": "Caja rectangular con borde gris delgado y fondo blanco. Contiene texto en color gris oscuro alineado a la izquierda, seguido de un botón con borde azul y texto azul que incluye un icono.",
+    "_generated": {
+      "hash": "e7ade4d0883eec8da255cd876a56016c",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:17:17.635Z"
+    }
+  },
+  {
+    "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>"
+      }
+    },
+    "visualDescription": "Caja rectangular con borde gris delgado y fondo blanco. Contiene texto en color gris oscuro peso normal alineado a la izquierda, seguido de un botón con borde azul y texto azul que incluye un icono de acción.",
+    "_generated": {
+      "hash": "1c3d6c246f9cdb88ae6bbdcedbed615a",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:17:17.635Z"
+    }
+  },
+  {
+    "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-hidden focus:shadow-outline-focus focus:text-black group",
+      "isSwitch": true,
+      "offState": {
+        "classes": "",
+        "html": "<span class='flex align-center justify-between gap-xs'><span class='text-sm group-focus:text-black' aria-hidden='true'>Desactivado</span><span class='bg-neutral-base group-focus:bg-black relative inline-flex shrink-0 h-5 w-9 border-2 border-neutral-base group-focus:border-black rounded-full cursor-pointer focus:outline-hidden focus-visible:ring-2  focus-visible:ring-white/75'><span class='sr-only'>Desactivado</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'>Activado</span></span>"
+      },
+      "onState": {
+        "classes": "",
+        "html": "<span class='flex align-center justify-between gap-xs'><span class='text-sm group-focus:text-black' aria-hidden='true'>Desactivado</span><span class='bg-primary-base relative inline-flex shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer focus:outline-hidden focus-visible:ring-2  focus-visible:ring-white/75'><span class='sr-only'>Activado</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'>Activado</span></span>"
+      },
+      "attributes": {
+        "aria-labelledby": "id-text"
+      }
+    },
+    "visualDescription": "Caja rectangular con borde gris claro, fondo blanco, conteniendo un título en texto negro peso normal. Debajo del título aparece un control toggle switch con círculo gris en posición izquierda sobre fondo gris claro, precedido por label de estado en gris y seguido por label de estado en negro.",
+    "_generated": {
+      "hash": "f8ebb8282204bedc91a6f6da6563701e",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:17:26.020Z"
+    }
+  },
+  {
+    "name": "isSwitch pressed",
+    "description": "Usa <code>'pressed': true</code> para activarlo inicialmente.",
+    "data": {
+      "id": "toggle-isswitch-pressed",
+      "classes": "focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black group",
+      "pressed": true,
+      "isSwitch": true,
+      "offState": {
+        "classes": "",
+        "html": "<span class='flex align-center justify-between gap-xs'><span class='text-sm group-focus:text-black' aria-hidden='true'>Desactivado</span><span class='bg-neutral-base group-focus:bg-black relative inline-flex shrink-0 h-5 w-9 border-2 border-neutral-base group-focus:border-black rounded-full cursor-pointer focus:outline-hidden focus-visible:ring-2  focus-visible:ring-white/75'><span class='sr-only'>Desactivado</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'>Activado</span></span>"
+      },
+      "onState": {
+        "classes": "",
+        "html": "<span class='flex align-center justify-between gap-xs'><span class='text-sm group-focus:text-black' aria-hidden='true'>Desactivado</span><span class='bg-primary-base relative inline-flex shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer focus:outline-hidden focus-visible:ring-2  focus-visible:ring-white/75'><span class='sr-only'>Activado</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'>Activado</span></span>"
+      },
+      "attributes": {
+        "aria-labelledby": "id-text"
+      }
+    },
+    "visualDescription": "Caja rectangular con borde gris claro, fondo blanco, conteniendo un título en texto negro peso normal. Debajo del título aparece un control toggle switch con círculo blanco en posición derecha sobre fondo negro, precedido por label de estado en gris y seguido por label de estado en negro.",
+    "_generated": {
+      "hash": "881def83fff2ce3ce046c06cbeb619db",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:17:26.021Z"
+    }
+  },
+  {
+    "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-hidden focus:shadow-outline-focus focus:text-black group",
+      "id": "toggle-switch-js",
+      "isSwitch": true,
+      "offState": {
+        "classes": "",
+        "html": "<span class='flex align-center justify-between gap-xs'><span class='text-sm group-focus:text-black' aria-hidden='true'>Desactivado</span><span class='bg-neutral-base group-focus:bg-black relative inline-flex shrink-0 h-5 w-9 border-2 border-neutral-base group-focus:border-black rounded-full cursor-pointer focus:outline-hidden focus-visible:ring-2  focus-visible:ring-white/75'><span class='sr-only'>Desactivado</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'>Activado</span></span>"
+      },
+      "onState": {
+        "classes": "",
+        "html": "<span class='flex align-center justify-between gap-xs'><span class='text-sm group-focus:text-black' aria-hidden='true'>Desactivado</span><span class='bg-primary-base relative inline-flex shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer focus:outline-hidden focus-visible:ring-2  focus-visible:ring-white/75'><span class='sr-only'>Activado</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'>Activado</span></span>"
+      },
+      "attributes": {
+        "aria-labelledby": "id-text"
+      }
+    },
+    "visualDescription": "Caja rectangular con borde gris claro, fondo blanco, conteniendo un título en texto negro peso normal. Debajo del título aparece un control toggle switch con círculo gris en posición izquierda sobre fondo gris claro, precedido por label de estado en gris y seguido por label de estado en negro.",
+    "_generated": {
+      "hash": "3807ce8562227322ae0625ac7a6d8ef0",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:17:26.021Z"
+    }
+  },
+  {
+    "name": "isSwitch peque",
+    "data": {
+      "id": "toggle-small",
+      "classes": "mb-sm focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black group",
+      "isSwitch": true,
+      "offState": {
+        "classes": "",
+        "html": "<span class='flex align-center justify-between gap-xs'><span class='text-xs group-focus:text-black' aria-hidden='true'>Desactivado</span><span class='bg-neutral-base group-focus:bg-black relative inline-flex shrink-0 h-4 w-8 border-2 border-neutral-base group-focus:border-black rounded-full cursor-pointer focus:outline-hidden focus-visible:ring-2  focus-visible:ring-white/75'><span class='sr-only'>Desactivado</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'>Activado</span></span>"
+      },
+      "onState": {
+        "classes": "",
+        "html": "<span class='flex align-center justify-between gap-xs'><span class='text-xs group-focus:text-black' aria-hidden='true'>Desactivado</span><span class='bg-primary-base relative inline-flex shrink-0 h-4 w-8 border-2 border-primary-base rounded-full cursor-pointer focus:outline-hidden focus-visible:ring-2  focus-visible:ring-white/75'><span class='sr-only'>Activado</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'>Activado</span></span>"
+      },
+      "attributes": {
+        "aria-labelledby": "id-text"
+      }
+    },
+    "visualDescription": "Toggle switch compacto con un interruptor deslizante circular blanco sobre fondo gris claro redondeado. El componente incluye label de texto negro a la izquierda y un indicador de estado a la derecha del switch en gris medio. El switch tiene dimensiones pequeñas con bordes redondeados completos y el botón circular está posicionado en el lado izquierdo indicando estado inactivo.",
+    "_generated": {
+      "hash": "efea3df865fe8817162d4523690ebd4a",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:17:33.310Z"
+    }
+  }
+] %}

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!;
+      }
+    }
+  }
+}