desy-html 12.0.0 → 12.1.0

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

@@ -1,398 +1,398 @@
-{% set exampleComponent = "accordion" %}
-{% set examples =  [
-  {
-    "name": "Por defecto",
-    "description": "Si abres uno, se cierran el resto. Una vez que abres un item, se mantiene al menos un item abierto. Asume que <code>allowmultiple: false</code> y <code>allowToggle: false</code> aunque no se defina expresamente.",
-    "data": {
-      "idPrefix": "accordion-example",
-      "headingLevel": 3,
-      "items": [
-        {
-          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
-        },
-        {
-          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
-        },
-        {
-          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
-        }
-      ]
-    }
-  },
-  {
-    "name": "Permite múltiples",
-    "description": "Permite tener abiertos varios items a la vez sin cerrar automáticamente ninguno. Define <code>allowmultiple: true</code> y asume que <code>allowToggle: true</code>.",
-    "data": {
-      "idPrefix": "allowmultiple-example",
-      "headingLevel": 3,
-      "allowMultiple": true,
-      "items": [
-        {
-          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
-        },
-        {
-          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
-        },
-        {
-          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
-        }
-      ]
-    }
-  },
-  {
-    "name": "Permite cerrar",
-    "description": "Si abres uno, se cierran el resto. Permite que cierres el que está abierto para que queden todos cerrados. Define <code>allowToggle: true</code> y asume que <code>allowMultiple: false</code>.",
-    "data": {
-      "idPrefix": "allowtoggle-example",
-      "headingLevel": 3,
-      "allowToggle": true,
-      "items": [
-        {
-          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
-        },
-        {
-          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
-        },
-        {
-          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
-        }
-      ]
-    }
-  },
-  {
-    "name": "Con un item abierto",
-    "description": "Podemos abrir inicialmente un item si le añadimos el parámetro <code>'open': true</code>. También puedes usar con javascript la función global <code>activateItemAccordion(elementMenu, activeItemId)</code> para abrir un item, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemAccordion('accordion', 'with-one-item-opened-example-1-title')</code> para cerrar el item actual y abrir el primer item de este ejemplo.",
-    "data": {
-      "idPrefix": "with-one-item-opened-example",
-      "headingLevel": 3,
-      "allowToggle": true,
-      "items": [
-        {
-          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
-        },
-        {
-          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
-          "open": true
-        },
-        {
-          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
-        }
-      ],
-      "attributes": {
-        "id": "accordion"
-      }
-    }
-  },
-  {
-    "name": "Con 2 items abiertos",
-    "description": "Podemos abrir inicialmente items si les añadimos el parámetro <code>'open': true</code>. También puedes usar con javascript la función global <code>activateItemAccordion(elementMenu, activeItemsIds)</code> para abrir varios items, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemAccordion('accordion-multiple', ['with-2-items-opened-example-2-title', 'with-2-items-opened-example-3-title'])</code>.",
-    "data": {
-      "idPrefix": "with-2-items-opened-example",
-      "headingLevel": 3,
-      "allowMultiple": true,
-      "items": [
-        {
-          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
-          "open": true
-        },
-        {
-          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
-        },
-        {
-          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
-          "open": true
-        }
-      ],
-      "attributes": {
-        "id": "accordion-multiple"
-      }
-    }
-  },
-  {
-    "name": "Deshabilitados con allowToggle y allowMultiple",
-    "description": "Ocultará la infomación de mostrar/ocultar y deshabilitará el item para no poder ser clicado. Usando el parámetro <code>'disabled': true</code>.",
-    "data": {
-      "idPrefix": "accordion-disabled",
-      "headingLevel": 3,
-      "allowToggle": true,
-      "allowMultiple": true,
-      "items": [
-        {
-          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón no deshabilitado</span>",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
-        },
-        {
-          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón deshabilitado</span>",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
-          "disabled": true
-        },
-        {
-          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón deshabilitado y abierto</span>",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
-          "disabled": true,
-          "open": true
-        }
-      ]
-    }
-  },
-  {
-    "name": "Con encabezado",
-    "description": "Usa el parámetro <code>'heading'</code> para añadir un encabezado asociado al componente. Usa el parámetro <code>'headingLevel'</code> para establecer el nivel del encabezado. Por ejemplo: <code>'headingLevel': 3</code> creará un encabezado <code>&lt;h3&gt;</code>.",
-    "data": {
-      "idPrefix": "heading-example",
-      "headingLevel": 3,
-      "heading": {
-        "text": "Encabezado de acordeón"
-      },
-      "items": [
-        {
-          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
-        },
-        {
-          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
-        },
-        {
-          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
-        }
-      ]
-    }
-  },
-  {
-    "name": "Con encabezado de nivel 4",
-    "description": "Usa el parámetro <code>'heading'</code> para añadir un encabezado asociado al componente. Usa el parámetro <code>'headingLevel'</code> para establecer el nivel del encabezado. En este ejemplo: <code>'headingLevel': 4</code> creará un encabezado de componente <code>&lt;h4&gt;</code> y los botones interiores tendrán los siguientes niveles de encabezado para conservar la jerarquía de encabezados correspondiente: en este caso <code>&lt;h5&gt;</code>.",
-    "data": {
-      "idPrefix": "accordion-heading-level-example",
-      "headingLevel": 4,
-      "heading": {
-        "text": "Este encabezado con <h4>"
-      },
-      "items": [
-        {
-          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Este Item 1 con &lt;h5&gt;</span>",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
-        },
-        {
-          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Este Item 2 con &lt;h5&gt;</span>",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
-        },
-        {
-          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Este Item 3 con &lt;h5&gt;</span>",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
-        }
-      ]
-    }
-  },
-  {
-    "name": "Con encabezado y controles de Mostrar todo",
-    "description": "Usa el parámetro <code>'showControl': true</code> para mostrar un controlador que permite mostrar/ocultar todos los items de una vez.",
-    "data": {
-      "idPrefix": "heading-and-show-controls-example",
-      "headingLevel": 3,
-      "heading": {
-        "text": "Encabezado de acordeón"
-      },
-      "showControl": true,
-      "allowMultiple": true,
-      "items": [
-        {
-          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
-        },
-        {
-          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
-          "open": true
-        },
-        {
-          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
-        }
-      ]
-    }
-  },
-  {
-    "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 idPrefix del acordeó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-example-js', true)</code> para mostrar todos los items expandidos.",
-    "data": {
-      "idPrefix": "show-all-accordion-example-js",
-      "headingLevel": 3,
-      "heading": {
-        "text": "Encabezado de acordeón"
-      },
-      "showControl": true,
-      "allowMultiple": true,
-      "items": [
-        {
-          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
-        },
-        {
-          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
-          "open": true
-        },
-        {
-          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
-          "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.",
-    "data": {
-      "idPrefix": "accordion-show-hide",
-      "headingLevel": 3,
-      "allowMultiple": true,
-      "items": [
-        {
-          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
-          "show": {
-            "text": "Expandir detalles"
-          },
-          "hide": {
-            "text": "Contraer"
-          }
-        },
-        {
-          "headerHtml": "<span class='block pr-lg pointer-events-none'>Item de acordeón 2</span>",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
-          "show": {
-            "html": "<svg class='w-4 h-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M14 7a1 1 0 0 0-1-1H8.25A.25.25 0 0 1 8 5.75V1a1 1 0 0 0-2 0v4.75a.25.25 0 0 1-.25.25H1a1 1 0 0 0 0 2h4.75a.25.25 0 0 1 .25.25V13a1 1 0 0 0 2 0V8.25A.25.25 0 0 1 8.25 8H13a1 1 0 0 0 1-1Z' fill='currentColor' transform='scale(3.42857)'/></svg>"
-          },
-          "hide": {
-            "html": "<svg class='w-4 h-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M13 8H1a1 1 0 0 1 0-2h12a1 1 0 0 1 0 2Z' fill='currentColor' transform='scale(3.42857)'/></svg>"
-          }
-        },
-        {
-          "headerHtml": "<span class='block pr-lg pointer-events-none'>Item de acordeón 3</span>",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
-          "show": {
-            "html": "<span class='c-link'>
-              <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' viewBox='-0.5 -0.5 16 16' xml:space='preserve' height='1.25em' width='1.25em'><path d='M7.5 12.1875c-0.4375 0 -0.8125 -0.1875 -1.0625 -0.5L0.25 4.75c-0.375 -0.5 -0.3125 -1.25 0.1875 -1.625 0.5 -0.375 1.1875 -0.375 1.5625 0.125l5.375 6.125c0.0625 0.0625 0.125 0.0625 0.25 0l5.375 -6.125c0.4375 -0.5 1.125 -0.5625 1.625 -0.125s0.5625 1.125 0.125 1.625l-0.0625 0.0625 -6.125 6.9375c-0.25 0.25 -0.6875 0.4375 -1.0625 0.4375z' fill='currentColor' stroke-width='1'></path></svg>
-            </span>"
-          },
-          "hide": {
-            "html": "<span class='c-link'>
-              <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' viewBox='-0.5 -0.5 16 16' xml:space='preserve' height='1.25em' width='1.25em'><path d='M7.5625 2.8125c0.4375 0 0.8125 0.1875 1.0625 0.5l6.0625 6.875c0.4375 0.4375 0.375 1.1875 -0.0625 1.625s-1.1875 0.375 -1.625 -0.0625l-0.0625 -0.0625 -5.3125 -6c-0.0625 -0.0625 -0.125 -0.0625 -0.25 0l-5.3125 6c-0.4375 0.5 -1.125 0.5625 -1.625 0.125s-0.5625 -1.125 -0.125 -1.625l0.0625 -0.0625 6.0625 -6.875c0.3125 -0.25 0.6875 -0.4375 1.125 -0.4375z' fill='currentColor' stroke-width='1'></path></svg></span>"
-          }
-        },
-        {
-          "headerHtml": "Item de acordeón 4",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
-          "show": {
-            "text": ""
-          },
-          "hide": {
-            "text": ""
-          }
-        }
-      ]
-    }
-  },
-  {
-    "name": "Con HTML en las cabeceras de los items",
-    "description": "Podemos añadir texto adicional bajo las cabeceras de los items. Para evitar problemas de eventos el el click, usamos la clase <code>pointer-events-none</code> en los subelementos.",
-    "data": {
-      "idPrefix": "accordion-example-pointer-events-none",
-      "headingLevel": 3,
-      "items": [
-        {
-          "headerHtml": "<span class='block pointer-events-none'>Item de acordeón 1</span><span class='block pointer-events-none font-normal'>El subelemento también recibe eventos</span>",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
-        },
-        {
-          "headerHtml": "<span class='block pointer-events-none'>Item de acordeón 2</span><span class='block pointer-events-none font-normal'>El subelemento también recibe eventos</span>",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
-        },
-        {
-          "headerHtml": "<span class='block pointer-events-none'>Item de acordeón 3</span><span class='block pointer-events-none font-normal'>El subelemento también recibe eventos</span>",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
-        }
-      ]
-    }
-  },
-  {
-    "name": "Con clases de CSS aplicadas",
-    "description": "Los parámetros <code>classes</code> nos permiten aplicar clases de Tailwind CSS a nuestro componente.",
-    "data": {
-      "idPrefix": "classes-example",
-      "headingLevel": 3,
-      "classes": "px-lg pt-base border-t border-b border-neutral-base",
-      "heading": {
-        "text": "Accordion example",
-        "classes": "c-h2 mb-lg uppercase"
-      },
-      "items": [
-        {
-          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
-        },
-        {
-          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-white rounded-lg h-40'></div></div>",
-          "classes": "p-sm bg-primary-light",
-          "open": true
-        },
-        {
-          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
-        }
-      ]
-    }
-  },
-  {
-    "name": "Con atributos aplicados",
-    "description": "Los parámetros <code>attributes</code> nos permiten aplicar atributos de HTML a nuestro componente, como por ejemplo <code>id</code> o etiquetas ARIA como <code>aria-label</code>. Mira el código para ver los atributos aplicados.",
-    "data": {
-      "idPrefix": "attributes-example",
-      "headingLevel": 3,
-      "attributes": {
-        "id": "accordion-test"
-      },
-      "items": [
-        {
-          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
-          "attributes": {
-            "data-attr": "accordion-item-test-a"
-          }
-        },
-        {
-          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
-          "attributes": {
-            "data-attr": "accordion-item-test-b"
-          }
-        },
-        {
-          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
-          "attributes": {
-            "data-attr": "accordion-item-test-c"
-          }
-        }
-      ]
-    }
-  }
-] %}
+{% set exampleComponent = "accordion" %}
+{% set examples =  [
+  {
+    "name": "Por defecto",
+    "description": "Si abres uno, se cierran el resto. Una vez que abres un item, se mantiene al menos un item abierto. Asume que <code>allowmultiple: false</code> y <code>allowToggle: false</code> aunque no se defina expresamente.",
+    "data": {
+      "idPrefix": "accordion-example",
+      "headingLevel": 3,
+      "items": [
+        {
+          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
+        },
+        {
+          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
+        },
+        {
+          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
+        }
+      ]
+    }
+  },
+  {
+    "name": "Permite múltiples",
+    "description": "Permite tener abiertos varios items a la vez sin cerrar automáticamente ninguno. Define <code>allowmultiple: true</code> y asume que <code>allowToggle: true</code>.",
+    "data": {
+      "idPrefix": "allowmultiple-example",
+      "headingLevel": 3,
+      "allowMultiple": true,
+      "items": [
+        {
+          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
+        },
+        {
+          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
+        },
+        {
+          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
+        }
+      ]
+    }
+  },
+  {
+    "name": "Permite cerrar",
+    "description": "Si abres uno, se cierran el resto. Permite que cierres el que está abierto para que queden todos cerrados. Define <code>allowToggle: true</code> y asume que <code>allowMultiple: false</code>.",
+    "data": {
+      "idPrefix": "allowtoggle-example",
+      "headingLevel": 3,
+      "allowToggle": true,
+      "items": [
+        {
+          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
+        },
+        {
+          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
+        },
+        {
+          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
+        }
+      ]
+    }
+  },
+  {
+    "name": "Con un item abierto",
+    "description": "Podemos abrir inicialmente un item si le añadimos el parámetro <code>'open': true</code>. También puedes usar con javascript la función global <code>activateItemAccordion(elementMenu, activeItemId)</code> para abrir un item, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemAccordion('accordion', 'with-one-item-opened-example-1-title')</code> para cerrar el item actual y abrir el primer item de este ejemplo.",
+    "data": {
+      "idPrefix": "with-one-item-opened-example",
+      "headingLevel": 3,
+      "allowToggle": true,
+      "items": [
+        {
+          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
+        },
+        {
+          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
+          "open": true
+        },
+        {
+          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
+        }
+      ],
+      "attributes": {
+        "id": "accordion"
+      }
+    }
+  },
+  {
+    "name": "Con 2 items abiertos",
+    "description": "Podemos abrir inicialmente items si les añadimos el parámetro <code>'open': true</code>. También puedes usar con javascript la función global <code>activateItemAccordion(elementMenu, activeItemsIds)</code> para abrir varios items, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemAccordion('accordion-multiple', ['with-2-items-opened-example-2-title', 'with-2-items-opened-example-3-title'])</code>.",
+    "data": {
+      "idPrefix": "with-2-items-opened-example",
+      "headingLevel": 3,
+      "allowMultiple": true,
+      "items": [
+        {
+          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
+          "open": true
+        },
+        {
+          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
+        },
+        {
+          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
+          "open": true
+        }
+      ],
+      "attributes": {
+        "id": "accordion-multiple"
+      }
+    }
+  },
+  {
+    "name": "Deshabilitados con allowToggle y allowMultiple",
+    "description": "Ocultará la infomación de mostrar/ocultar y deshabilitará el item para no poder ser clicado. Usando el parámetro <code>'disabled': true</code>.",
+    "data": {
+      "idPrefix": "accordion-disabled",
+      "headingLevel": 3,
+      "allowToggle": true,
+      "allowMultiple": true,
+      "items": [
+        {
+          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón no deshabilitado</span>",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
+        },
+        {
+          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón deshabilitado</span>",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
+          "disabled": true
+        },
+        {
+          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón deshabilitado y abierto</span>",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
+          "disabled": true,
+          "open": true
+        }
+      ]
+    }
+  },
+  {
+    "name": "Con encabezado",
+    "description": "Usa el parámetro <code>'heading'</code> para añadir un encabezado asociado al componente. Usa el parámetro <code>'headingLevel'</code> para establecer el nivel del encabezado. Por ejemplo: <code>'headingLevel': 3</code> creará un encabezado <code>&lt;h3&gt;</code>.",
+    "data": {
+      "idPrefix": "heading-example",
+      "headingLevel": 3,
+      "heading": {
+        "text": "Encabezado de acordeón"
+      },
+      "items": [
+        {
+          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
+        },
+        {
+          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
+        },
+        {
+          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
+        }
+      ]
+    }
+  },
+  {
+    "name": "Con encabezado de nivel 4",
+    "description": "Usa el parámetro <code>'heading'</code> para añadir un encabezado asociado al componente. Usa el parámetro <code>'headingLevel'</code> para establecer el nivel del encabezado. En este ejemplo: <code>'headingLevel': 4</code> creará un encabezado de componente <code>&lt;h4&gt;</code> y los botones interiores tendrán los siguientes niveles de encabezado para conservar la jerarquía de encabezados correspondiente: en este caso <code>&lt;h5&gt;</code>.",
+    "data": {
+      "idPrefix": "accordion-heading-level-example",
+      "headingLevel": 4,
+      "heading": {
+        "text": "Este encabezado con <h4>"
+      },
+      "items": [
+        {
+          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Este Item 1 con &lt;h5&gt;</span>",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
+        },
+        {
+          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Este Item 2 con &lt;h5&gt;</span>",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
+        },
+        {
+          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Este Item 3 con &lt;h5&gt;</span>",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
+        }
+      ]
+    }
+  },
+  {
+    "name": "Con encabezado y controles de Mostrar todo",
+    "description": "Usa el parámetro <code>'showControl': true</code> para mostrar un controlador que permite mostrar/ocultar todos los items de una vez.",
+    "data": {
+      "idPrefix": "heading-and-show-controls-example",
+      "headingLevel": 3,
+      "heading": {
+        "text": "Encabezado de acordeón"
+      },
+      "showControl": true,
+      "allowMultiple": true,
+      "items": [
+        {
+          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
+        },
+        {
+          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
+          "open": true
+        },
+        {
+          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
+        }
+      ]
+    }
+  },
+  {
+    "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 idPrefix del acordeó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-example-js', true)</code> para mostrar todos los items expandidos.",
+    "data": {
+      "idPrefix": "show-all-accordion-example-js",
+      "headingLevel": 3,
+      "heading": {
+        "text": "Encabezado de acordeón"
+      },
+      "showControl": true,
+      "allowMultiple": true,
+      "items": [
+        {
+          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
+        },
+        {
+          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
+          "open": true
+        },
+        {
+          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
+          "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.",
+    "data": {
+      "idPrefix": "accordion-show-hide",
+      "headingLevel": 3,
+      "allowMultiple": true,
+      "items": [
+        {
+          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
+          "show": {
+            "text": "Expandir detalles"
+          },
+          "hide": {
+            "text": "Contraer"
+          }
+        },
+        {
+          "headerHtml": "<span class='block pr-lg pointer-events-none'>Item de acordeón 2</span>",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
+          "show": {
+            "html": "<svg class='w-4 h-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M14 7a1 1 0 0 0-1-1H8.25A.25.25 0 0 1 8 5.75V1a1 1 0 0 0-2 0v4.75a.25.25 0 0 1-.25.25H1a1 1 0 0 0 0 2h4.75a.25.25 0 0 1 .25.25V13a1 1 0 0 0 2 0V8.25A.25.25 0 0 1 8.25 8H13a1 1 0 0 0 1-1Z' fill='currentColor' transform='scale(3.42857)'/></svg>"
+          },
+          "hide": {
+            "html": "<svg class='w-4 h-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M13 8H1a1 1 0 0 1 0-2h12a1 1 0 0 1 0 2Z' fill='currentColor' transform='scale(3.42857)'/></svg>"
+          }
+        },
+        {
+          "headerHtml": "<span class='block pr-lg pointer-events-none'>Item de acordeón 3</span>",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
+          "show": {
+            "html": "<span class='c-link'>
+              <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' viewBox='-0.5 -0.5 16 16' xml:space='preserve' height='1.25em' width='1.25em'><path d='M7.5 12.1875c-0.4375 0 -0.8125 -0.1875 -1.0625 -0.5L0.25 4.75c-0.375 -0.5 -0.3125 -1.25 0.1875 -1.625 0.5 -0.375 1.1875 -0.375 1.5625 0.125l5.375 6.125c0.0625 0.0625 0.125 0.0625 0.25 0l5.375 -6.125c0.4375 -0.5 1.125 -0.5625 1.625 -0.125s0.5625 1.125 0.125 1.625l-0.0625 0.0625 -6.125 6.9375c-0.25 0.25 -0.6875 0.4375 -1.0625 0.4375z' fill='currentColor' stroke-width='1'></path></svg>
+            </span>"
+          },
+          "hide": {
+            "html": "<span class='c-link'>
+              <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' viewBox='-0.5 -0.5 16 16' xml:space='preserve' height='1.25em' width='1.25em'><path d='M7.5625 2.8125c0.4375 0 0.8125 0.1875 1.0625 0.5l6.0625 6.875c0.4375 0.4375 0.375 1.1875 -0.0625 1.625s-1.1875 0.375 -1.625 -0.0625l-0.0625 -0.0625 -5.3125 -6c-0.0625 -0.0625 -0.125 -0.0625 -0.25 0l-5.3125 6c-0.4375 0.5 -1.125 0.5625 -1.625 0.125s-0.5625 -1.125 -0.125 -1.625l0.0625 -0.0625 6.0625 -6.875c0.3125 -0.25 0.6875 -0.4375 1.125 -0.4375z' fill='currentColor' stroke-width='1'></path></svg></span>"
+          }
+        },
+        {
+          "headerHtml": "Item de acordeón 4",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
+          "show": {
+            "text": ""
+          },
+          "hide": {
+            "text": ""
+          }
+        }
+      ]
+    }
+  },
+  {
+    "name": "Con HTML en las cabeceras de los items",
+    "description": "Podemos añadir texto adicional bajo las cabeceras de los items. Para evitar problemas de eventos el el click, usamos la clase <code>pointer-events-none</code> en los subelementos.",
+    "data": {
+      "idPrefix": "accordion-example-pointer-events-none",
+      "headingLevel": 3,
+      "items": [
+        {
+          "headerHtml": "<span class='block pointer-events-none'>Item de acordeón 1</span><span class='block pointer-events-none font-normal'>El subelemento también recibe eventos</span>",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
+        },
+        {
+          "headerHtml": "<span class='block pointer-events-none'>Item de acordeón 2</span><span class='block pointer-events-none font-normal'>El subelemento también recibe eventos</span>",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
+        },
+        {
+          "headerHtml": "<span class='block pointer-events-none'>Item de acordeón 3</span><span class='block pointer-events-none font-normal'>El subelemento también recibe eventos</span>",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
+        }
+      ]
+    }
+  },
+  {
+    "name": "Con clases de CSS aplicadas",
+    "description": "Los parámetros <code>classes</code> nos permiten aplicar clases de Tailwind CSS a nuestro componente.",
+    "data": {
+      "idPrefix": "classes-example",
+      "headingLevel": 3,
+      "classes": "px-lg pt-base border-t border-b border-neutral-base",
+      "heading": {
+        "text": "Accordion example",
+        "classes": "c-h2 mb-lg uppercase"
+      },
+      "items": [
+        {
+          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
+        },
+        {
+          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-white rounded-lg h-40'></div></div>",
+          "classes": "p-sm bg-primary-light",
+          "open": true
+        },
+        {
+          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
+        }
+      ]
+    }
+  },
+  {
+    "name": "Con atributos aplicados",
+    "description": "Los parámetros <code>attributes</code> nos permiten aplicar atributos de HTML a nuestro componente, como por ejemplo <code>id</code> o etiquetas ARIA como <code>aria-label</code>. Mira el código para ver los atributos aplicados.",
+    "data": {
+      "idPrefix": "attributes-example",
+      "headingLevel": 3,
+      "attributes": {
+        "id": "accordion-test"
+      },
+      "items": [
+        {
+          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
+          "attributes": {
+            "data-attr": "accordion-item-test-a"
+          }
+        },
+        {
+          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
+          "attributes": {
+            "data-attr": "accordion-item-test-b"
+          }
+        },
+        {
+          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
+          "attributes": {
+            "data-attr": "accordion-item-test-c"
+          }
+        }
+      ]
+    }
+  }
+] %}