desy-html 16.0.4 → 17.0.1

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

@@ -1,482 +1,482 @@
-{% 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>"
-        }
-      ]
-    },
-    "visualDescription": "Componente acordeón con tres ítems dentro de un contenedor con borde gris claro. Cada ítem muestra un texto de encabezado en gris oscuro alineado a la izquierda y un enlace en gris claro alineado a la derecha. El título del componente aparece en gris oscuro encima del contenedor.",
-    "_generated": {
-      "hash": "d7ede59b51fe850ce40df95a0a95a583",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:46:59.819Z"
-    }
-  },
-  {
-    "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>"
-        }
-      ]
-    },
-        "visualDescription": "Componente acordeón con tres ítems dentro de un contenedor con borde gris claro. Cada ítem muestra un texto de encabezado en gris oscuro alineado a la izquierda y un enlace en gris claro alineado a la derecha. El título del componente aparece en gris oscuro encima del contenedor.",
-    "_generated": {
-      "hash": "e6f2aa78c1838403ec4ee7df7b1e719c",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:46:59.819Z"
-    }
-  },
-  {
-    "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>"
-        }
-      ]
-    },
-        "visualDescription": "Componente acordeón con tres ítems dentro de un contenedor con borde gris claro. Cada ítem muestra un texto de encabezado en gris oscuro alineado a la izquierda y un enlace en gris claro alineado a la derecha. El título del componente aparece en gris oscuro encima del contenedor.",
-    "_generated": {
-      "hash": "edd56dd3213c489c5268159b482fe030",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:46:59.819Z"
-    }
-  },
-  {
-    "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"
-      }
-    },
-    "visualDescription": "Acordeón con borde gris claro, fondo blanco. Incluye tres ítems apilados verticalmente con títulos en texto negro regular y enlaces alineados a la derecha en azul. El segundo ítem muestra contenido expandido con área de texto visible en fondo blanco.",
-    "_generated": {
-      "hash": "67e5741571afca4fd745b203e8a26f28",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:47:08.520Z"
-    }
-  },
-  {
-    "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"
-      }
-    },
-    "visualDescription": "Acordeón con borde gris claro, fondo blanco. Contiene tres ítems apilados verticalmente con títulos en texto negro regular y enlaces alineados a la derecha en azul. Los ítems primero y tercero muestran áreas de contenido expandidas con fondo blanco visible.",
-    "_generated": {
-      "hash": "8cc15dbe93648b3015bd084cf4ae388c",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:47:08.520Z"
-    }
-  },
-  {
-    "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
-        }
-      ]
-    },
-    "visualDescription": "Acordeón con borde gris claro, fondo blanco. Presenta tres ítems apilados verticalmente con títulos en texto negro regular y enlace alineado a la derecha en azul. El tercer ítem muestra contenido expandido con área de texto en fondo blanco, mientras los dos primeros permanecen colapsados.",
-    "_generated": {
-      "hash": "64387f20fb95772be8367028cd58377d",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:47:08.520Z"
-    }
-  },
-  {
-    "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>"
-        }
-      ]
-    },
-    "visualDescription": "Acordeón con título en negrita oscuro tamaño grande, contenedor con borde gris claro de 1px y esquinas redondeadas. Tres ítems listados verticalmente con labels en negro peso normal y enlaces alineados a la derecha en color azul.",
-    "_generated": {
-      "hash": "3bfe8100b6328534aa789be728c993ad",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:47:18.465Z"
-    }
-  },
-  {
-    "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>"
-        }
-      ]
-    },
-    "visualDescription": "Acordeón con título principal en negrita tamaño medio-grande, subtítulo secundario en negrita negro debajo, contenedor con borde gris de 1px. Tres ítems con texto descriptivo incluyendo etiquetas HTML `<ol>` y `<li>` en negro, enlaces azules alineados a la derecha.",
-    "_generated": {
-      "hash": "7e43cadc000d9fe5764c2e4de1474a9e",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:47:18.465Z"
-    }
-  },
-  {
-    "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>"
-        }
-      ]
-    },
-    "visualDescription": "Acordeón con título en negrita negro, enlace azul alineado a la derecha en la cabecera, contenedor con borde gris de 1px. Tres ítems donde el primero tiene enlace azul, el segundo muestra contenedor expandido con borde punteado gris y enlace azul, el tercero tiene enlace azul.",
-    "_generated": {
-      "hash": "1568aee8b48ba13128694be9dbcaf55f",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:47:18.465Z"
-    }
-  },
-  {
-    "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>"
-        }
-      ]
-    },
-    "visualDescription": "Accordion con encabezado de sección que incluye un enlace alineado a la derecha. Cada ítem presenta un título en texto negro con enlace en gris a la derecha. Bordes grises claros separan los ítems, con fondo blanco en toda la sección.",
-    "_generated": {
-      "hash": "5e4ceff7669d666ea0d07515e6faf74a",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:47:28.590Z"
-    }
-  },
-  {
-    "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": ""
-          }
-        }
-      ]
-    },
-    "visualDescription": "Accordion con encabezado de sección en texto negro. Cada ítem muestra un título en texto negro con icono alineado a la derecha en color gris. Bordes grises finos delimitan cada fila, con fondo blanco uniforme en toda el área.",
-    "_generated": {
-      "hash": "ff9f223caeae185ddc34c20f82b39eb8",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:47:28.590Z"
-    }
-  },
-  {
-    "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>"
-        }
-      ]
-    },
-    "visualDescription": "Accordion con encabezado de sección en texto negro. Cada ítem contiene un título en negro seguido de subtexto en gris claro debajo, con enlace alineado a la derecha. Bordes grises claros separan los ítems, fondo blanco en toda la zona.",
-    "_generated": {
-      "hash": "db0b1075ced2518162926fe159f5902a",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:47:28.590Z"
-    }
-  },
-  {
-    "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>"
-        }
-      ]
-    },
-    "visualDescription": "Acordeón con borde gris claro, conteniendo tres ítems. Cada ítem muestra un label negro a la izquierda y un botón de acción alineado a la derecha. El segundo ítem está expandido, revelando un panel con fondo azul claro que contiene un rectángulo punteado en la esquina superior izquierda.",
-    "_generated": {
-      "hash": "0816e879a18c6c1f21bacddb67adbc20",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:47:37.150Z"
-    }
-  },
-  {
-    "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"
-          }
-        }
-      ]
-    },
-    "visualDescription": "Acordeón con borde gris claro, conteniendo tres ítems colapsados. Cada ítem muestra un label negro a la izquierda y un enlace gris alineado a la derecha. Los ítems están separados por líneas divisorias horizontales grises. Fondo blanco en toda la estructura del componente.",
-    "_generated": {
-      "hash": "81e85f8d412458511ccdc67958048875",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:47:37.150Z"
-    }
-  }
-] %}
+{% 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>"
+        }
+      ]
+    },
+    "visualDescription": "Componente acordeón con tres ítems dentro de un contenedor con borde gris claro. Cada ítem muestra un texto de encabezado en gris oscuro alineado a la izquierda y un enlace en gris claro alineado a la derecha. El título del componente aparece en gris oscuro encima del contenedor.",
+    "_generated": {
+      "hash": "d7ede59b51fe850ce40df95a0a95a583",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:46:59.819Z"
+    }
+  },
+  {
+    "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>"
+        }
+      ]
+    },
+    "visualDescription": "Componente acordeón con tres ítems dentro de un contenedor con borde gris claro. Cada ítem muestra un texto de encabezado en gris oscuro alineado a la izquierda y un icono de expansión en gris claro alineado a la derecha. El título del componente aparece en gris oscuro encima del contenedor. Se permite tener múltiples ítems abiertos simultáneamente.",
+    "_generated": {
+      "hash": "e6f2aa78c1838403ec4ee7df7b1e719c",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:46:59.819Z"
+    }
+  },
+  {
+    "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>"
+        }
+      ]
+    },
+    "visualDescription": "Componente acordeón con tres ítems dentro de un contenedor con borde gris claro. Cada ítem muestra un texto de encabezado en gris oscuro alineado a la izquierda y un icono de alternancia en gris claro alineado a la derecha. El título del componente aparece en gris oscuro encima del contenedor. Los ítems pueden cerrarse una vez abiertos.",
+    "_generated": {
+      "hash": "edd56dd3213c489c5268159b482fe030",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:46:59.819Z"
+    }
+  },
+  {
+    "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"
+      }
+    },
+    "visualDescription": "Acordeón con borde gris claro, fondo blanco. Incluye tres ítems apilados verticalmente con títulos en texto negro regular y enlaces alineados a la derecha en azul. El segundo ítem muestra contenido expandido con área de texto visible en fondo blanco.",
+    "_generated": {
+      "hash": "67e5741571afca4fd745b203e8a26f28",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:47:08.520Z"
+    }
+  },
+  {
+    "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"
+      }
+    },
+    "visualDescription": "Acordeón con borde gris claro, fondo blanco. Contiene tres ítems apilados verticalmente con títulos en texto negro regular y enlaces alineados a la derecha en azul. Los ítems primero y tercero muestran áreas de contenido expandidas con fondo blanco visible.",
+    "_generated": {
+      "hash": "8cc15dbe93648b3015bd084cf4ae388c",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:47:08.520Z"
+    }
+  },
+  {
+    "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
+        }
+      ]
+    },
+    "visualDescription": "Acordeón con borde gris claro, fondo blanco. Presenta tres ítems apilados verticalmente con títulos en texto negro regular y enlace alineado a la derecha en azul. El tercer ítem muestra contenido expandido con área de texto en fondo blanco, mientras los dos primeros permanecen colapsados.",
+    "_generated": {
+      "hash": "64387f20fb95772be8367028cd58377d",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:47:08.520Z"
+    }
+  },
+  {
+    "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>"
+        }
+      ]
+    },
+    "visualDescription": "Acordeón con título en negrita oscuro tamaño grande, contenedor con borde gris claro de 1px y esquinas redondeadas. Tres ítems listados verticalmente con labels en negro peso normal y enlaces alineados a la derecha en color azul.",
+    "_generated": {
+      "hash": "3bfe8100b6328534aa789be728c993ad",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:47:18.465Z"
+    }
+  },
+  {
+    "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>"
+        }
+      ]
+    },
+    "visualDescription": "Acordeón con título principal en negrita tamaño medio-grande, subtítulo secundario en negrita negro debajo, contenedor con borde gris de 1px. Tres ítems con texto descriptivo incluyendo etiquetas HTML `<ol>` y `<li>` en negro, enlaces azules alineados a la derecha.",
+    "_generated": {
+      "hash": "7e43cadc000d9fe5764c2e4de1474a9e",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:47:18.465Z"
+    }
+  },
+  {
+    "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>"
+        }
+      ]
+    },
+    "visualDescription": "Acordeón con título en negrita negro, enlace azul alineado a la derecha en la cabecera, contenedor con borde gris de 1px. Tres ítems donde el primero tiene enlace azul, el segundo muestra contenedor expandido con borde punteado gris y enlace azul, el tercero tiene enlace azul.",
+    "_generated": {
+      "hash": "1568aee8b48ba13128694be9dbcaf55f",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:47:18.465Z"
+    }
+  },
+  {
+    "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>"
+        }
+      ]
+    },
+    "visualDescription": "Accordion con encabezado de sección que incluye un enlace alineado a la derecha. Cada ítem presenta un título en texto negro con enlace en gris a la derecha. Bordes grises claros separan los ítems, con fondo blanco en toda la sección.",
+    "_generated": {
+      "hash": "5e4ceff7669d666ea0d07515e6faf74a",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:47:28.590Z"
+    }
+  },
+  {
+    "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": ""
+          }
+        }
+      ]
+    },
+    "visualDescription": "Accordion con encabezado de sección en texto negro. Cada ítem muestra un título en texto negro con icono alineado a la derecha en color gris. Bordes grises finos delimitan cada fila, con fondo blanco uniforme en toda el área.",
+    "_generated": {
+      "hash": "ff9f223caeae185ddc34c20f82b39eb8",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:47:28.590Z"
+    }
+  },
+  {
+    "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>"
+        }
+      ]
+    },
+    "visualDescription": "Accordion con encabezado de sección en texto negro. Cada ítem contiene un título en negro seguido de subtexto en gris claro debajo, con enlace alineado a la derecha. Bordes grises claros separan los ítems, fondo blanco en toda la zona.",
+    "_generated": {
+      "hash": "db0b1075ced2518162926fe159f5902a",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:47:28.590Z"
+    }
+  },
+  {
+    "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>"
+        }
+      ]
+    },
+    "visualDescription": "Acordeón con borde gris claro, conteniendo tres ítems. Cada ítem muestra un label negro a la izquierda y un botón de acción alineado a la derecha. El segundo ítem está expandido, revelando un panel con fondo azul claro que contiene un rectángulo punteado en la esquina superior izquierda.",
+    "_generated": {
+      "hash": "0816e879a18c6c1f21bacddb67adbc20",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:47:37.150Z"
+    }
+  },
+  {
+    "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"
+          }
+        }
+      ]
+    },
+    "visualDescription": "Acordeón con borde gris claro, conteniendo tres ítems colapsados. Cada ítem muestra un label negro a la izquierda y un enlace gris alineado a la derecha. Los ítems están separados por líneas divisorias horizontales grises. Fondo blanco en toda la estructura del componente.",
+    "_generated": {
+      "hash": "81e85f8d412458511ccdc67958048875",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:47:37.150Z"
+    }
+  }
+] %}