desy-html 16.0.4 → 17.0.0

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

@@ -1,521 +1,521 @@
-{% set exampleComponent = "accordion-history" %}
-{% 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": "Lista de tres ítems de acordeón con fondo blanco. Cada ítem muestra un indicador circular azul a la izquierda, texto de label en negro a tamaño estándar, y link en gris a la derecha. Separadores de línea gris claro entre ítems.",
-    "_generated": {
-      "hash": "db6342dbbfb54cc774dfc28139820c4a",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:46:10.876Z"
-    }
-  },
-  {
-    "name": "Con estado",
-    "description": "Usa el parámetro <code>'status': past/current/pending</code> para establecer su apariencia de estado pasado, actual, pendiente. Usa el parámetro <code>'status': muted/currentmuted</code> para establecer su apariencia de estado muteado, actual muteado, que lo utilizamos para eventos sobre los que ya no se puede actuar.",
-    "data": {
-      "idPrefix": "accordion-status",
-      "headingLevel": 3,
-      "items": [
-        {
-          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón muteado</span>",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
-          "status": "muted"
-        },
-        {
-          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón actual muteado</span>",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
-          "status": "currentmuted"
-        },
-        {
-          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón pasado</span>",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
-          "status": "past"
-        },
-        {
-          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón actual</span>",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
-          "status": "current"
-        },
-        {
-          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón pendiente</span>",
-          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
-          "status": "pending"
-        }
-      ]
-    },
-    "visualDescription": "Lista de cinco ítems de acordeón con fondo blanco mostrando diferentes estados visuales. Indicadores de estado variados: círculo gris relleno, círculo gris vacío, círculo azul relleno, círculo vacío con borde negro, círculo vacío con borde gris. Cada ítem tiene texto de label en negro y link alineado a la derecha, con separadores grises entre ítems.",
-    "_generated": {
-      "hash": "f35b1ec995f9bfdc48262f1ca032351f",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:46:10.876Z"
-    }
-  },
-  {
-    "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": "Lista de tres ítems de acordeón con fondo blanco. Indicadores circulares azules a la izquierda de cada ítem, texto de label en negro tamaño estándar, y link \"Mostrar\" en gris posicionado a la derecha. Líneas separadoras grises horizontales dividen cada ítem.",
-    "_generated": {
-      "hash": "760ccde69171508f302eeb06a47317c7",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:46:10.876Z"
-    }
-  },
-  {
-    "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,
-      "showControl": false,
-      "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": "Panel con borde gris claro de 1px y fondo blanco. Contiene 3 ítems verticales con labels en texto negro normal y enlaces en gris claro alineados a la derecha. Línea vertical azul conecta los ítems en el margen izquierdo con puntos azules circulares.",
-    "_generated": {
-      "hash": "eda9e7c9a08df92f2e7fb606b0569ab8",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:46:21.210Z"
-    }
-  },
-  {
-    "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-history', '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-history"
-      }
-    },
-    "visualDescription": "Panel con borde gris claro de 1px y fondo blanco. Muestra 3 ítems verticales con labels en texto negro normal, el ítem del medio expandido con área de contenido vacía en fondo gris claro. Enlaces en gris claro alineados a la derecha, línea vertical azul con puntos circulares azules conecta los ítems.",
-    "_generated": {
-      "hash": "1f20079d50b868a367f77eebadf64778",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:46:21.210Z"
-    }
-  },
-  {
-    "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-history-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-history-multiple"
-      }
-    },
-    "visualDescription": "Panel con borde gris claro de 1px y fondo blanco. Presenta 3 ítems verticales con labels en texto negro normal, el primer y tercer ítem expandidos mostrando áreas de contenido vacías con fondo gris claro. Enlaces en gris claro alineados a la derecha, línea vertical azul con puntos circulares azules conecta los ítems en el margen izquierdo.",
-    "_generated": {
-      "hash": "9f448dd642a60453f93b7b10bead91f6",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:46:21.210Z"
-    }
-  },
-  {
-    "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": "Tres ítems de acordeón con indicadores circulares azul oscuro a la izquierda, texto de títulos en negro tamaño estándar, y enlace alineado a la derecha en gris. Fondo blanco con líneas divisorias sutiles entre ítems, sin áreas de contenido expandidas visibles.",
-    "_generated": {
-      "hash": "4cd0dc6bdb708cf63bfa506893368d1b",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:46:31.968Z"
-    }
-  },
-  {
-   "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": "Encabezado en texto negro negrita arriba del componente. Tres ítems de acordeón con indicadores circulares azul oscuro a la izquierda, títulos en texto negro tamaño estándar, y enlaces en gris alineados a la derecha. Fondo blanco contenido en borde gris claro con separadores horizontales entre ítems.",
-    "_generated": {
-      "hash": "c8c32d98632c8eb60efd5885dfd66259",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:46:31.968Z"
-    }
-  },
-  {
-    "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": "Título en texto negro negrita ubicado sobre el componente. Tres ítems de acordeón con indicadores circulares azul oscuro a la izquierda, títulos en texto negro que incluyen etiquetas HTML visibles como código, y enlaces en gris alineados a la derecha. Fondo blanco con borde gris claro perimetral y líneas divisorias horizontales grises entre elementos.",
-    "_generated": {
-      "hash": "641ad5c23596666b02c3c0806b3e9b83",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:46:31.968Z"
-    }
-  },
-  {
-    "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 borde gris claro, encabezado en texto negro negrita, y enlace alineado a la derecha en azul subrayado. Tres ítems listados verticalmente con texto negro, cada uno con enlace en azul a la derecha. Línea vertical azul conecta los ítems del lado izquierdo con círculos azules como marcadores.",
-    "_generated": {
-      "hash": "8c10b877e0660adc8daf60e3707324b5",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:46:42.697Z"
-    }
-  },
-  {
-    "name": "Mostrar todo u ocultar todo con JavaScript",
-    "description": "Es necesario usar el parámetro <code>'showControl': true</code>. Puedes usar con javascript la función global <code>activateAllAccordion(element, show)</code>, para mostrar u ocultar todos los items, usando el id del botón, el parámetro <code>show</code> admite <code>true</code> o <code>false</code>, si le pasamos true se mostrarán todos los items expandidos, y si le pasamos false se mostrarán cerrados. Ej: Abre la consola del navegador y escribe <code>activateAllAccordion('show-all-accordion-example-history-js', true)</code> para mostrar todos los items expandidos.",
-    "data": {
-      "idPrefix": "show-all-accordion-example-history-js",
-      "id": "show-all-accordion-history-button-js",
-      "headingLevel": 3,
-      "heading": {
-        "text": "Encabezado de acordeón"
-      },
-      "showControl": true,
-      "allowMultiple": true,
-      "items": [
-        {
-          "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 borde gris claro, encabezado en texto negro negrita, y enlace alineado a la derecha en azul subrayado. Tres ítems con texto negro dispuestos verticalmente, cada uno con enlace en azul a la derecha. Línea vertical azul en el margen izquierdo conecta los ítems mediante círculos azules rellenos.",
-    "_generated": {
-      "hash": "ead3140878aa0bb7d02d491c2feb2eca",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:46:42.697Z"
-    }
-  },
-  {
-    "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": "Acordeón con borde gris claro conteniendo cuatro ítems listados verticalmente con texto negro. Primer ítem muestra enlace en azul a la derecha, segundo y cuarto ítem tienen ícono gris, tercer ítem tiene ícono chevron hacia abajo. Línea vertical azul en el borde izquierdo conecta todos los ítems mediante círculos azules.",
-    "_generated": {
-      "hash": "ae7eca8b79b533cc4f80782eb506b077",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:46:42.697Z"
-    }
-  },
-  {
-    "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": "Lista vertical de tres ítems expandibles con borde izquierdo azul de 3px. Cada ítem tiene un título en texto negro mediano negrita, subtexto gris claro, y enlace gris alineado a la derecha. Fondo blanco con separadores horizontales grises tenues entre ítems.",
-    "_generated": {
-      "hash": "0651314836ada6d0e932cb09adf2feb5",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:46:52.821Z"
-    }
-  },
-  {
-    "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",
-      "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": "Lista vertical de tres ítems con borde izquierdo azul de 3px y fondo que alterna entre blanco y celeste claro. El segundo ítem contiene un área expandida celeste claro con un recuadro punteado blanco. Cada ítem muestra texto negro mediano con enlaces alineados a la derecha en gris.",
-    "_generated": {
-      "hash": "c99c5ceb99ef89bf71a439847eb85631",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:46:52.821Z"
-    }
-  },
-  {
-    "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": "Lista vertical de tres ítems expandibles con borde izquierdo azul de 3px sobre fondo blanco. Cada ítem presenta texto negro mediano en una sola línea con enlace gris alineado a la derecha. Separadores horizontales grises tenues dividen los ítems con espaciado uniforme vertical.",
-    "_generated": {
-      "hash": "6162c72aafd439d67ea57c9d2951253a",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:46:52.821Z"
-    }
-  }
-] %}
+{% set exampleComponent = "accordion-history" %}
+{% 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": "Lista de tres ítems de acordeón con fondo blanco. Cada ítem muestra un indicador circular azul a la izquierda, texto de label en negro a tamaño estándar, y link en gris a la derecha. Separadores de línea gris claro entre ítems.",
+    "_generated": {
+      "hash": "db6342dbbfb54cc774dfc28139820c4a",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:46:10.876Z"
+    }
+  },
+  {
+    "name": "Con estado",
+    "description": "Usa el parámetro <code>'status': past/current/pending</code> para establecer su apariencia de estado pasado, actual, pendiente. Usa el parámetro <code>'status': muted/currentmuted</code> para establecer su apariencia de estado muteado, actual muteado, que lo utilizamos para eventos sobre los que ya no se puede actuar.",
+    "data": {
+      "idPrefix": "accordion-status",
+      "headingLevel": 3,
+      "items": [
+        {
+          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón muteado</span>",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
+          "status": "muted"
+        },
+        {
+          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón actual muteado</span>",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
+          "status": "currentmuted"
+        },
+        {
+          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón pasado</span>",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
+          "status": "past"
+        },
+        {
+          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón actual</span>",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
+          "status": "current"
+        },
+        {
+          "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón pendiente</span>",
+          "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
+          "status": "pending"
+        }
+      ]
+    },
+    "visualDescription": "Lista de cinco ítems de acordeón con fondo blanco mostrando diferentes estados visuales. Indicadores de estado variados: círculo gris relleno, círculo gris vacío, círculo azul relleno, círculo vacío con borde negro, círculo vacío con borde gris. Cada ítem tiene texto de label en negro y link alineado a la derecha, con separadores grises entre ítems.",
+    "_generated": {
+      "hash": "f35b1ec995f9bfdc48262f1ca032351f",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:46:10.876Z"
+    }
+  },
+  {
+    "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": "Lista de tres ítems de acordeón con fondo blanco. Indicadores circulares azules a la izquierda de cada ítem, texto de label en negro tamaño estándar, y link \"Mostrar\" en gris posicionado a la derecha. Líneas separadoras grises horizontales dividen cada ítem.",
+    "_generated": {
+      "hash": "760ccde69171508f302eeb06a47317c7",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:46:10.876Z"
+    }
+  },
+  {
+    "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,
+      "showControl": false,
+      "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": "Panel con borde gris claro de 1px y fondo blanco. Contiene 3 ítems verticales con labels en texto negro normal y enlaces en gris claro alineados a la derecha. Línea vertical azul conecta los ítems en el margen izquierdo con puntos azules circulares.",
+    "_generated": {
+      "hash": "eda9e7c9a08df92f2e7fb606b0569ab8",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:46:21.210Z"
+    }
+  },
+  {
+    "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-history', '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-history"
+      }
+    },
+    "visualDescription": "Panel con borde gris claro de 1px y fondo blanco. Muestra 3 ítems verticales con labels en texto negro normal, el ítem del medio expandido con área de contenido vacía en fondo gris claro. Enlaces en gris claro alineados a la derecha, línea vertical azul con puntos circulares azules conecta los ítems.",
+    "_generated": {
+      "hash": "1f20079d50b868a367f77eebadf64778",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:46:21.210Z"
+    }
+  },
+  {
+    "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-history-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-history-multiple"
+      }
+    },
+    "visualDescription": "Panel con borde gris claro de 1px y fondo blanco. Presenta 3 ítems verticales con labels en texto negro normal, el primer y tercer ítem expandidos mostrando áreas de contenido vacías con fondo gris claro. Enlaces en gris claro alineados a la derecha, línea vertical azul con puntos circulares azules conecta los ítems en el margen izquierdo.",
+    "_generated": {
+      "hash": "9f448dd642a60453f93b7b10bead91f6",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:46:21.210Z"
+    }
+  },
+  {
+    "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": "Tres ítems de acordeón con indicadores circulares azul oscuro a la izquierda, texto de títulos en negro tamaño estándar, y enlace alineado a la derecha en gris. Fondo blanco con líneas divisorias sutiles entre ítems, sin áreas de contenido expandidas visibles.",
+    "_generated": {
+      "hash": "4cd0dc6bdb708cf63bfa506893368d1b",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:46:31.968Z"
+    }
+  },
+  {
+   "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": "Encabezado en texto negro negrita arriba del componente. Tres ítems de acordeón con indicadores circulares azul oscuro a la izquierda, títulos en texto negro tamaño estándar, y enlaces en gris alineados a la derecha. Fondo blanco contenido en borde gris claro con separadores horizontales entre ítems.",
+    "_generated": {
+      "hash": "c8c32d98632c8eb60efd5885dfd66259",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:46:31.968Z"
+    }
+  },
+  {
+    "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": "Título en texto negro negrita ubicado sobre el componente. Tres ítems de acordeón con indicadores circulares azul oscuro a la izquierda, títulos en texto negro que incluyen etiquetas HTML visibles como código, y enlaces en gris alineados a la derecha. Fondo blanco con borde gris claro perimetral y líneas divisorias horizontales grises entre elementos.",
+    "_generated": {
+      "hash": "641ad5c23596666b02c3c0806b3e9b83",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:46:31.968Z"
+    }
+  },
+  {
+    "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 borde gris claro, encabezado en texto negro negrita, y enlace alineado a la derecha en azul subrayado. Tres ítems listados verticalmente con texto negro, cada uno con enlace en azul a la derecha. Línea vertical azul conecta los ítems del lado izquierdo con círculos azules como marcadores.",
+    "_generated": {
+      "hash": "8c10b877e0660adc8daf60e3707324b5",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:46:42.697Z"
+    }
+  },
+  {
+    "name": "Mostrar todo u ocultar todo con JavaScript",
+    "description": "Es necesario usar el parámetro <code>'showControl': true</code>. Puedes usar con javascript la función global <code>activateAllAccordion(element, show)</code>, para mostrar u ocultar todos los items, usando el id del botón, el parámetro <code>show</code> admite <code>true</code> o <code>false</code>, si le pasamos true se mostrarán todos los items expandidos, y si le pasamos false se mostrarán cerrados. Ej: Abre la consola del navegador y escribe <code>activateAllAccordion('show-all-accordion-example-history-js', true)</code> para mostrar todos los items expandidos.",
+    "data": {
+      "idPrefix": "show-all-accordion-example-history-js",
+      "id": "show-all-accordion-history-button-js",
+      "headingLevel": 3,
+      "heading": {
+        "text": "Encabezado de acordeón"
+      },
+      "showControl": true,
+      "allowMultiple": true,
+      "items": [
+        {
+          "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 borde gris claro, encabezado en texto negro negrita, y enlace alineado a la derecha en azul subrayado. Tres ítems con texto negro dispuestos verticalmente, cada uno con enlace en azul a la derecha. Línea vertical azul en el margen izquierdo conecta los ítems mediante círculos azules rellenos.",
+    "_generated": {
+      "hash": "ead3140878aa0bb7d02d491c2feb2eca",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:46:42.697Z"
+    }
+  },
+  {
+    "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": "Acordeón con borde gris claro conteniendo cuatro ítems listados verticalmente con texto negro. Primer ítem muestra enlace en azul a la derecha, segundo y cuarto ítem tienen ícono gris, tercer ítem tiene ícono chevron hacia abajo. Línea vertical azul en el borde izquierdo conecta todos los ítems mediante círculos azules.",
+    "_generated": {
+      "hash": "ae7eca8b79b533cc4f80782eb506b077",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:46:42.697Z"
+    }
+  },
+  {
+    "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": "Lista vertical de tres ítems expandibles con borde izquierdo azul de 3px. Cada ítem tiene un título en texto negro mediano negrita, subtexto gris claro, y enlace gris alineado a la derecha. Fondo blanco con separadores horizontales grises tenues entre ítems.",
+    "_generated": {
+      "hash": "0651314836ada6d0e932cb09adf2feb5",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:46:52.821Z"
+    }
+  },
+  {
+    "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",
+      "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": "Lista vertical de tres ítems con borde izquierdo azul de 3px y fondo que alterna entre blanco y celeste claro. El segundo ítem contiene un área expandida celeste claro con un recuadro punteado blanco. Cada ítem muestra texto negro mediano con enlaces alineados a la derecha en gris.",
+    "_generated": {
+      "hash": "c99c5ceb99ef89bf71a439847eb85631",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:46:52.821Z"
+    }
+  },
+  {
+    "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": "Lista vertical de tres ítems expandibles con borde izquierdo azul de 3px sobre fondo blanco. Cada ítem presenta texto negro mediano en una sola línea con enlace gris alineado a la derecha. Separadores horizontales grises tenues dividen los ítems con espaciado uniforme vertical.",
+    "_generated": {
+      "hash": "6162c72aafd439d67ea57c9d2951253a",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:46:52.821Z"
+    }
+  }
+] %}