desy-html 7.3.1 → 7.4.0

package/docs/_macro.example-render.njk

@@ -136,7 +136,7 @@ import componentTree %}
     <div class="grid grid-cols-1 gap-x-xl mt-xl">
       <div class="pt-xl">
         <h3 id="example-title-{{ loop.index }}" class="c-h3 group">{{ example.name | capitalize }} <a href="#{{ example.name | capitalize | urlencode }}" class="hidden font-semibold text-neutral-base underline group-hover:inline-block">#</a></h3>
-        <p class="c-paragraph-base mb-0">{{ example.description }}</p>
+        <p class="c-paragraph-base mb-0">{{ example.description | safe }}</p>
       </div>
       <div class="pt-base lg:pt-lg">
         <div class="p-base border border-neutral-base">

package/docs/index.html

@@ -38,6 +38,10 @@
 
   <h2>Changelog (English)</h2>
   <p>What's new in the latest version of desy-html</p>
+  <h3>v.7.4.0</h3>
+  <ul class="text-sm">
+    <li>Translated examples to español.</li>
+  </ul>
   <h3>v.7.3.1</h3>
   <ul class="text-sm">
     <li>Added source code links to Plantillas pages.</li>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "7.3.1",
+  "version": "7.4.0",
   "description": "desy-html contains the code you need to start building a user interface for Gobierno de Aragón government webapps.",
   "author": {
     "name": "Desy (SDA Servicios Digitales de Aragón)",

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

@@ -1,123 +1,125 @@
 {% set exampleComponent = "accordion" %}
 {% set examples =  [
   {
-    "name": "default",
-    "description": "Assumes allowMultiple and allowToggle are both false",
+    "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": [
         {
-          "headerText": "Accordion Item 1",
-          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+          "headerText": "Item de acordeón 1",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
         },
         {
-          "headerText": "Accordion Item 2",
-          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+          "headerText": "Item de acordeón 2",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
         },
         {
-          "headerText": "Accordion Item 3",
-          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+          "headerText": "Item de acordeón 3",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
         }
       ]
     }
   },
   {
-    "name": "Allow multiple",
-    "description": "allowMultiple = true. Assumes allowToggle is true",
+    "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": [
         {
-          "headerText": "Accordion Item 1",
-          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+          "headerText": "Item de acordeón 1",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
         },
         {
-          "headerText": "Accordion Item 2",
-          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+          "headerText": "Item de acordeón 2",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
         },
         {
-          "headerText": "Accordion Item 3",
-          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+          "headerText": "Item de acordeón 3",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
         }
       ]
     }
   },
   {
-    "name": "Allow toggle",
-    "description": "allowToggle = true. Assumes allowMultiple is false",
+    "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": [
         {
-          "headerText": "Accordion Item 1",
-          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+          "headerText": "Item de acordeón 1",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
         },
         {
-          "headerText": "Accordion Item 2",
-          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+          "headerText": "Item de acordeón 2",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
         },
         {
-          "headerText": "Accordion Item 3",
-          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+          "headerText": "Item de acordeón 3",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
         }
       ]
     }
   },
   {
-    "name": "With one item opened",
+    "name": "Con un item abierto",
+    "description": 'Podemos abrir inicialmente un item si le añadimos el parámetro <code>"open": true</code>.',
     "data": {
       "idPrefix": "with-one-item-opened-example",
       "headingLevel": 3,
       "allowToggle": true,
       "items": [
         {
-          "headerText": "Accordion Item 1",
-          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+          "headerText": "Item de acordeón 1",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
         },
         {
-          "headerText": "Accordion Item 2",
-          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
+          "headerText": "Item de acordeón 2",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
           "open": true
         },
         {
-          "headerText": "Accordion Item 3",
-          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+          "headerText": "Item de acordeón 3",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
         }
       ]
     }
   },
   {
-    "name": "With 2 items opened",
+    "name": "Con 2 items abiertos",
+    "description": 'Podemos abrir inicialmente items si les añadimos el parámetro <code>"open": true</code>.',
     "data": {
       "idPrefix": "with-2-items-opened-example",
       "headingLevel": 3,
       "allowMultiple": true,
       "items": [
         {
-          "headerText": "Accordion Item 1",
-          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
+          "headerText": "Item de acordeón 1",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
           "open": true
         },
         {
-          "headerText": "Accordion Item 2",
-          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+          "headerText": "Item de acordeón 2",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
         },
         {
-          "headerText": "Accordion Item 3",
-          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
+          "headerText": "Item de acordeón 3",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
           "open": true
         }
       ]
     }
   },
   {
-    "name": "disabled and allowToggle and allowMultiple",
-    "description": "will hide the show/hide info and disable click in items",
+    "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,
@@ -125,17 +127,17 @@
       "allowMultiple": true,
       "items": [
         {
-          "headerText": "Accordion Item not disabled",
-          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+          "headerText": "Item de acordeón no deshabilitado",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
         },
         {
-          "headerText": "Accordion Item disabled",
-          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
+          "headerText": "Item de acordeón deshabilitado",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
           "disabled": true
         },
         {
-          "headerText": "Accordion Item disabled and open",
-          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
+          "headerText": "Item de acordeón deshabilitado y abierto",
+          "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
         }
@@ -143,92 +145,94 @@
     }
   },
   {
-    "name": "With heading",
+    "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": "Accordion example"
+        "text": "Encabezado de acordeón"
       },
       "items": [
         {
-          "headerText": "Accordion Item 1",
-          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+          "headerText": "Item de acordeón 1",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
         },
         {
-          "headerText": "Accordion Item 2",
-          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+          "headerText": "Item de acordeón 2",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
         },
         {
-          "headerText": "Accordion Item 3",
-          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+          "headerText": "Item de acordeón 3",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
         }
       ]
     }
   },
   {
-    "name": "With heading level 4",
-    "description": "headingLevel is 4 in this example. The headings in this component start with h4 in this example. h4 for the heading and h5 inside the buttons.",
+    "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": "This header starts with h4"
+        "text": "Este encabezado con <h4>"
       },
       "items": [
         {
-          "headerText": "This is Item 1 with h5",
-          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+          "headerText": "Este Item 1 con <h5>",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
         },
         {
-          "headerText": "This is Item 2 with h5",
-          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+          "headerText": "Este Item 2 con <h5>",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
         },
         {
-          "headerText": "This is Item 3 with h5",
-          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+          "headerText": "Este Item 3 con <h5>",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
         }
       ]
     }
   },
   {
-    "name": "With heading and show controls",
+    "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": "Accordion example"
+        "text": "Encabezado de acordeón"
       },
       "showControl": true,
       "allowMultiple": true,
       "items": [
         {
-          "headerText": "Accordion Item 1",
-          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+          "headerText": "Item de acordeón 1",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
         },
         {
-          "headerText": "Accordion Item 2",
-          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
+          "headerText": "Item de acordeón 2",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
           "open": true
         },
         {
-          "headerText": "Accordion Item 3",
-          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+          "headerText": "Item de acordeón 3",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
         }
       ]
     }
   },
   {
-    "name": "with custom show/hide info",
-    "description": "The last item has empty strings to don't show any info",
+    "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": [
         {
-          "headerText": "Accordion Item 1",
-          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
+          "headerText": "Item de acordeón 1",
+          "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"
           },
@@ -237,8 +241,8 @@
           }
         },
         {
-          "headerText": "Accordion Item 2",
-          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
+          "headerText": "Item de acordeón 2",
+          "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>'
           },
@@ -247,8 +251,8 @@
           }
         },
         {
-          "headerText": "Accordion Item 3",
-          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
+          "headerText": "Item de acordeón 3",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
           "show": {
             "text": ""
           },
@@ -260,30 +264,30 @@
     }
   },
   {
-    "name": "with html in headers",
-    "description": "To avoid event problems, use pointer-events-none class in subelements",
+    "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">Accordion Item 1</span><span class="block pointer-events-none font-normal">Subelement also receives events</span>',
-          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+          "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">Accordion Item 2</span><span class="block pointer-events-none font-normal">Subelement also receives events</span>',
-          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 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">Accordion Item 3</span><span class="block pointer-events-none font-normal">Subelement also receives events</span>',
-          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+          "headerHtml": '<span class="block pointer-events-none">Item de acordeón 3</span><span class="block pointer-events-none font-normal">El subelemento también recibe eventos</span>',
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
         }
       ]
     }
   },
   {
-    "name": "With classes applied",
-    "description": "Show code to display the classes applied in html",
+    "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,
@@ -294,25 +298,25 @@
       },
       "items": [
         {
-          "headerText": "Accordion Item 1",
-          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+          "headerText": "Item de acordeón 1",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
         },
         {
-          "headerText": "Accordion Item 2",
-          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
-          "classes": "py-sm bg-neutral-light border border-neutral-base rounded-lg",
+          "headerText": "Item de acordeón 2",
+          "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
         },
         {
-          "headerText": "Accordion Item 3",
-          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+          "headerText": "Item de acordeón 3",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
         }
       ]
     }
   },
   {
-    "name": "With attributes applied",
-    "description": "Show code to display the attributes applied in html",
+    "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,
@@ -321,22 +325,22 @@
       },
       "items": [
         {
-          "headerText": "Accordion Item 1",
-          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
+          "headerText": "Item de acordeón 1",
+          "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"
           }
         },
         {
-          "headerText": "Accordion Item 2",
-          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
+          "headerText": "Item de acordeón 2",
+          "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"
           }
         },
         {
-          "headerText": "Accordion Item 3",
-          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
+          "headerText": "Item de acordeón 3",
+          "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"
           }