desy-html 11.2.0 → 12.0.0

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

@@ -12,13 +12,13 @@
     "name": "por defecto con HTML",
     "data": {
       "title":{
-        "html": "Las entidades beneficiarias deberán tener su sede y actividad <strong class=\" font-bold \">principal en Aragón.</strong>"
+        "html": "Las entidades beneficiarias deberán tener su sede y actividad <strong class=' font-bold '>principal en Aragón.</strong>"
       }
     }
   },
   {
     "name": "Con encabezado",
-    "description": 'Usa el parámetro <code>"headingLevel"</code> para establecer el nivel del encabezado. En este ejemplo: <code>"headingLevel": 4</code> creará un encabezado <code>&lt;h4&gt;</code>.',
+    "description": "Usa el parámetro <code>'headingLevel'</code> para establecer el nivel del encabezado. En este ejemplo: <code>'headingLevel': 4</code> creará un encabezado <code>&lt;h4&gt;</code>.",
     "data": {
       "headingLevel": 4,
       "title": {
@@ -33,7 +33,7 @@
         "html": "Registro de alta de la asociación"
       },
       "description":{
-        "html": "Documento acreditativo de registro de alta de la <strong class=\" font-bold \">asociación</strong>"
+        "html": "Documento acreditativo de registro de alta de la <strong class=' font-bold '>asociación</strong>"
       }
     }
   },
@@ -63,14 +63,14 @@
         "text": "Registro de alta de la asociación"
       },
       "content":{
-        "html": "Modelo: <a class=\" c-link break-all \" href=\" # \">Modelo de fianza (PDF, 20Kb)</a> ",
+        "html": "Modelo: <a class=' c-link break-all ' href=' # '>Modelo de fianza (PDF, 20Kb)</a> ",
         "classes": "text-neutral-dark"
       }
     }
   },
   {
     "name": "con acciones",
-    "description": 'Utiliza el componente como un caller para anidar contenido. En este ejemplo el contenido es una lista de 2 botones de acciones. Para que sea accesible, cada botón debe tener un <code>aria-labelledby</code> que apunte al <code>id</code> de si mismo y al <code>id</code> del título. Muestra el código para verlo.',
+    "description": "Utiliza el componente como un caller para anidar contenido. En este ejemplo el contenido es una lista de 2 botones de acciones. Para que sea accesible, cada botón debe tener un <code>aria-labelledby</code> que apunte al <code>id</code> de si mismo y al <code>id</code> del título. Muestra el código para verlo.",
     "data": {
       "title":{
         "text": "Registro de alta de la asociación",
@@ -78,12 +78,12 @@
           "id": "t1"
         }
       },
-      "caller": '<ul class="flex flex-wrap gap-sm"><li><button id="b-1a" class=" c-button c-button--sm c-button--transparent " aria-labelledby="b-1a t1">Eliminar</button></li><li><button id="b-1b" class="c-button c-button--sm c-button--transparent" aria-labelledby="b-1b t1">Editar</button></li></ul>'
+      "caller": "<ul class='flex flex-wrap gap-sm'><li><button id='b-1a' class=' c-button c-button--sm c-button--transparent ' aria-labelledby='b-1a t1'>Eliminar</button></li><li><button id='b-1b' class='c-button c-button--sm c-button--transparent' aria-labelledby='b-1b t1'>Editar</button></li></ul>"
     }
   },
   {
     "name": "arrastrable",
-    "description": 'Usa el parámetro <code>"isDraggable": true</code> para mostrar un icono de arrastrar.',
+    "description": "Usa el parámetro <code>'isDraggable': true</code> para mostrar un icono de arrastrar.",
     "data": {
       "title": {
         "text": "Entidades locales de la Comunidad Autónoma de Aragón"
@@ -93,7 +93,7 @@
   },
   {
     "name": "bloqueado",
-    "description": 'Usa el parámetro <code>"isLocked": true</code> para mostrar un icono de bloqueado.',
+    "description": "Usa el parámetro <code>'isLocked': true</code> para mostrar un icono de bloqueado.",
     "data": {
       "title": {
         "text": "Entidades locales de la Comunidad Autónoma de Aragón",
@@ -102,7 +102,7 @@
         }
       },
       "isLocked": true,
-      "caller": '<ul class="flex flex-wrap gap-sm"><li><button id="b-2a" class=" c-button c-button--sm c-button--transparent " aria-labelledby="b-2a t2">Eliminar</button></li><li><button id="b-2b" class="c-button c-button--sm c-button--transparent" aria-labelledby="b-2b t2">Editar</button></li></ul>'
+      "caller": "<ul class='flex flex-wrap gap-sm'><li><button id='b-2a' class=' c-button c-button--sm c-button--transparent ' aria-labelledby='b-2a t2'>Eliminar</button></li><li><button id='b-2b' class='c-button c-button--sm c-button--transparent' aria-labelledby='b-2b t2'>Editar</button></li></ul>"
     }
   },
   {
@@ -115,12 +115,12 @@
         }
       },
       "content":{
-        "html": "<a class=\" c-link break-all \" href=\" # \">Resolución años anteriores (PDF, 20Kb)</a> "
+        "html": "<a class=' c-link break-all ' href=' # '>Resolución años anteriores (PDF, 20Kb)</a> "
       },
       "icon": {
         "type": "document"
       },
-      "caller": '<ul class="flex flex-wrap gap-sm"><li><button id="b-3a" class=" c-button c-button--sm c-button--transparent " aria-labelledby="b-3a t3">Eliminar</button></li><li><button id="b-3b" class="c-button c-button--sm c-button--transparent" aria-labelledby="b-3b t3">Editar</button></li></ul>'
+      "caller": "<ul class='flex flex-wrap gap-sm'><li><button id='b-3a' class=' c-button c-button--sm c-button--transparent ' aria-labelledby='b-3a t3'>Eliminar</button></li><li><button id='b-3b' class='c-button c-button--sm c-button--transparent' aria-labelledby='b-3b t3'>Editar</button></li></ul>"
     }
   },
   {
@@ -133,12 +133,12 @@
         }
       },
       "content":{
-        "html": "<a class=\" c-link break-all \" href=\" # \">http://www.boa.aragon.es/cgi-bin/EBOA/BRSCGI?CMD=VEROBJ&MLKOB=1119520063030&type=pdf</a> "
+        "html": "<a class=' c-link break-all ' href=' # '>http://www.boa.aragon.es/cgi-bin/EBOA/BRSCGI?CMD=VEROBJ&MLKOB=1119520063030&type=pdf</a> "
       },
       "icon": {
         "type": "link"
       },
-      "caller": '<ul class="flex flex-wrap gap-sm"><li><button id="b-4a" class=" c-button c-button--sm c-button--transparent " aria-labelledby="b-4a t4">Eliminar</button></li><li><button id="b-4b" class="c-button c-button--sm c-button--transparent" aria-labelledby="b-4b t4">Editar</button></li></ul>'
+      "caller": "<ul class='flex flex-wrap gap-sm'><li><button id='b-4a' class=' c-button c-button--sm c-button--transparent ' aria-labelledby='b-4a t4'>Eliminar</button></li><li><button id='b-4b' class='c-button c-button--sm c-button--transparent' aria-labelledby='b-4b t4'>Editar</button></li></ul>"
     }
   },
   {
@@ -164,7 +164,7 @@
       "icon": {
         "type": "clipboard"
       },
-      "caller": '<ul class="flex flex-wrap gap-sm"><li><button id="b-5a" class=" c-button c-button--sm c-button--transparent " aria-labelledby="b-5a t5">Eliminar</button></li><li><button id="b-5b" class="c-button c-button--sm c-button--transparent" aria-labelledby="b-5b t5">Editar</button></li></ul>'
+      "caller": "<ul class='flex flex-wrap gap-sm'><li><button id='b-5a' class=' c-button c-button--sm c-button--transparent ' aria-labelledby='b-5a t5'>Eliminar</button></li><li><button id='b-5b' class='c-button c-button--sm c-button--transparent' aria-labelledby='b-5b t5'>Editar</button></li></ul>"
     }
   },
   {
@@ -177,17 +177,17 @@
         }
       },
       "content":{
-        "html": "<a class=\" c-link break-all \" href=\" # \">http://www.boa.aragon.es/cgi-bin/EBOA/BRSCGI?CMD=VEROBJ&MLKOB=1119520063030&type=pdf</a> "
+        "html": "<a class=' c-link break-all ' href=' # '>http://www.boa.aragon.es/cgi-bin/EBOA/BRSCGI?CMD=VEROBJ&MLKOB=1119520063030&type=pdf</a> "
       },
       "icon": {
-        "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"  width="1em" height="1em" class="w-8 h-8 text-neutral-dark" aria-label="Icono de papelera" focusable="false" role="img"><path d="M19.5 7.5h-15A.5.5 0 0 0 4 8v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a.5.5 0 0 0-.5-.5Zm-9.25 13a.75.75 0 0 1-1.5 0v-9a.75.75 0 0 1 1.5 0Zm5 0a.75.75 0 0 1-1.5 0v-9a.75.75 0 0 1 1.5 0ZM22 4h-4.75a.25.25 0 0 1-.25-.25V2.5A2.5 2.5 0 0 0 14.5 0h-5A2.5 2.5 0 0 0 7 2.5v1.25a.25.25 0 0 1-.25.25H2a1 1 0 0 0 0 2h20a1 1 0 0 0 0-2ZM9 3.75V2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v1.25a.25.25 0 0 1-.25.25h-5.5A.25.25 0 0 1 9 3.75Z" fill="currentColor" transform="scale(2)"/></svg>'
+        "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'  width='1em' height='1em' class='w-8 h-8 text-neutral-dark' aria-label='Icono de papelera' focusable='false' role='img'><path d='M19.5 7.5h-15A.5.5 0 0 0 4 8v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a.5.5 0 0 0-.5-.5Zm-9.25 13a.75.75 0 0 1-1.5 0v-9a.75.75 0 0 1 1.5 0Zm5 0a.75.75 0 0 1-1.5 0v-9a.75.75 0 0 1 1.5 0ZM22 4h-4.75a.25.25 0 0 1-.25-.25V2.5A2.5 2.5 0 0 0 14.5 0h-5A2.5 2.5 0 0 0 7 2.5v1.25a.25.25 0 0 1-.25.25H2a1 1 0 0 0 0 2h20a1 1 0 0 0 0-2ZM9 3.75V2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v1.25a.25.25 0 0 1-.25.25h-5.5A.25.25 0 0 1 9 3.75Z' fill='currentColor' transform='scale(2)'/></svg>"
       },
-      "caller": '<ul class="flex flex-wrap gap-sm"><li><button id="b-6a" class=" c-button c-button--sm c-button--transparent " aria-labelledby="b-6a t6">Eliminar</button></li><li><button id="b-6b" class="c-button c-button--sm c-button--transparent" aria-labelledby="b-6b t6">Editar</button></li></ul>'
+      "caller": "<ul class='flex flex-wrap gap-sm'><li><button id='b-6a' class=' c-button c-button--sm c-button--transparent ' aria-labelledby='b-6a t6'>Eliminar</button></li><li><button id='b-6b' class='c-button c-button--sm c-button--transparent' aria-labelledby='b-6b t6'>Editar</button></li></ul>"
     }
   },
   {
     "name": "con icono tipo: documento, alineado verticalmente arriba",
-    "description": 'Usa el parámetro <code>containerClasses</code> del parámetro <code>icon</code> para añadir clases al contenedor del icono. Esto permite posicionarlo o cambiar de color. En este ejemplo el icono aparece alineado verticalmente arriba en vez de centrado.',
+    "description": "Usa el parámetro <code>containerClasses</code> del parámetro <code>icon</code> para añadir clases al contenedor del icono. Esto permite posicionarlo o cambiar de color. En este ejemplo el icono aparece alineado verticalmente arriba en vez de centrado.",
     "data": {
       "title": {
         "text": "Resolución de años anteriores",
@@ -207,7 +207,7 @@
         "type": "document",
         "containerClasses": "self-start h-full mr-base"
       },
-      "caller": '<ul class="flex flex-wrap gap-sm"><li><button id="b-3a" class=" c-button c-button--sm c-button--transparent " aria-labelledby="b-3a t3">Eliminar</button></li><li><button id="b-3b" class="c-button c-button--sm c-button--transparent" aria-labelledby="b-3b t3">Editar</button></li></ul>'
+      "caller": "<ul class='flex flex-wrap gap-sm'><li><button id='b-3a' class=' c-button c-button--sm c-button--transparent ' aria-labelledby='b-3a t3'>Eliminar</button></li><li><button id='b-3b' class='c-button c-button--sm c-button--transparent' aria-labelledby='b-3b t3'>Editar</button></li></ul>"
     }
   },
   {
@@ -220,13 +220,13 @@
         }
       },
       "content":{
-        "html": "<a class=\" c-link break-all \" href=\" # \">Resolución años anteriores (PDF, 20Kb)</a> "
+        "html": "<a class=' c-link break-all ' href=' # '>Resolución años anteriores (PDF, 20Kb)</a> "
       },
       "icon": {
         "type": "document"
       },
       "isDraggable": true,
-      "caller": '<ul class="flex flex-wrap gap-sm"><li><button id="b-7a" class=" c-button c-button--sm c-button--transparent " aria-labelledby="b-7a t7">Eliminar</button></li><li><button id="b-7b" class="c-button c-button--sm c-button--transparent" aria-labelledby="b-7b t7">Editar</button></li></ul>'
+      "caller": "<ul class='flex flex-wrap gap-sm'><li><button id='b-7a' class=' c-button c-button--sm c-button--transparent ' aria-labelledby='b-7a t7'>Eliminar</button></li><li><button id='b-7b' class='c-button c-button--sm c-button--transparent' aria-labelledby='b-7b t7'>Editar</button></li></ul>"
     }
   },
   {
@@ -254,10 +254,10 @@
         }
       ],
       "content":{
-        "html": "Modelo: <a class=\" c-link break-all \" href=\" # \">Modelo de fianza (PDF, 20Kb)</a> ",
+        "html": "Modelo: <a class=' c-link break-all ' href=' # '>Modelo de fianza (PDF, 20Kb)</a> ",
         "classes": "text-neutral-dark"
       },
-      "caller": '<ul class="flex flex-wrap gap-sm"><li><button id="b-8a" class=" c-button c-button--sm c-button--transparent " aria-labelledby="b-8a t8">Eliminar</button></li><li><button id="b-8b" class="c-button c-button--sm c-button--transparent" aria-labelledby="b-8b t8">Editar</button></li></ul>'
+      "caller": "<ul class='flex flex-wrap gap-sm'><li><button id='b-8a' class=' c-button c-button--sm c-button--transparent ' aria-labelledby='b-8a t8'>Eliminar</button></li><li><button id='b-8b' class='c-button c-button--sm c-button--transparent' aria-labelledby='b-8b t8'>Editar</button></li></ul>"
     }
   }
 ] %}

package/src/templates/components/item/_template.item.njk

@@ -14,7 +14,7 @@
   {% if params.icon %}
   <div class="{% if params.icon.containerClasses %}{{ params.icon.containerClasses }}{% else %}self-center h-full mr-base{% endif %}">
     {% if params.icon.html %}
-    {{ params.icon.html | safe }}
+    {{ params.icon.html | filterquotes | safe }}
     {% elseif params.icon.type == 'document' %}
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="w-8 h-8 text-neutral-dark" aria-label="Icono de documento" focusable="false" role="img"><path d="m15.32 2.15 4.53 4.53A.49.49 0 0 1 20 7v14.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5H15a.49.49 0 0 1 .32.15ZM15.59 0H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7L16.29.29a1 1 0 0 0-.7-.29Z" fill="currentColor" transform="scale(2)"/><path d="M16 11H7a1 1 0 0 1 0-2h9a1 1 0 0 1 0 2ZM16 15H7a1 1 0 0 1 0-2h9a1 1 0 0 1 0 2ZM11.5 19H7a1 1 0 0 1 0-2h4.5a1 1 0 0 1 0 2Z" fill="currentColor" transform="scale(2)"/></svg>
     {% elseif params.icon.type == 'link' %}
@@ -27,21 +27,21 @@
   <div class="lg:flex flex-1 self-center">
     <div class="lg:flex-1 lg:self-center">
       {% if params.headingLevel == "1" %}
-      <h1 {%- if params.title.classes %} class="{{ params.title.classes }}"{% endif %} {%- for attribute, value in params.title.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.title.html | safe if params.title.html else params.title.text }}</h1>
+      <h1 {%- if params.title.classes %} class="{{ params.title.classes }}"{% endif %} {%- for attribute, value in params.title.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.title.html | filterquotes | safe if params.title.html else params.title.text }}</h1>
       {% elseif params.headingLevel == "2" %}
-      <h2 {%- if params.title.classes %} class="{{ params.title.classes }}"{% endif %} {%- for attribute, value in params.title.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.title.html | safe if params.title.html else params.title.text }}</h2>
+      <h2 {%- if params.title.classes %} class="{{ params.title.classes }}"{% endif %} {%- for attribute, value in params.title.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.title.html | filterquotes | safe if params.title.html else params.title.text }}</h2>
       {% elseif params.headingLevel == "3" %}
-      <h3 {%- if params.title.classes %} class="{{ params.title.classes }}"{% endif %} {%- for attribute, value in params.title.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.title.html | safe if params.title.html else params.title.text }}</h3>
+      <h3 {%- if params.title.classes %} class="{{ params.title.classes }}"{% endif %} {%- for attribute, value in params.title.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.title.html | filterquotes | safe if params.title.html else params.title.text }}</h3>
       {% elseif params.headingLevel == "4" %}
-      <h4 {%- if params.title.classes %} class="{{ params.title.classes }}"{% endif %} {%- for attribute, value in params.title.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.title.html | safe if params.title.html else params.title.text }}</h4>
+      <h4 {%- if params.title.classes %} class="{{ params.title.classes }}"{% endif %} {%- for attribute, value in params.title.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.title.html | filterquotes | safe if params.title.html else params.title.text }}</h4>
       {% elseif params.headingLevel == "5" %}
-      <h5 {%- if params.title.classes %} class="{{ params.title.classes }}"{% endif %} {%- for attribute, value in params.title.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.title.html | safe if params.title.html else params.title.text }}</h5>
+      <h5 {%- if params.title.classes %} class="{{ params.title.classes }}"{% endif %} {%- for attribute, value in params.title.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.title.html | filterquotes | safe if params.title.html else params.title.text }}</h5>
       {% else %}
-      <p {%- if params.title.classes %} class="{{ params.title.classes }}"{% endif %} {%- for attribute, value in params.title.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.title.html | safe if params.title.html else params.title.text }}</p>
+      <p {%- if params.title.classes %} class="{{ params.title.classes }}"{% endif %} {%- for attribute, value in params.title.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.title.html | filterquotes | safe if params.title.html else params.title.text }}</p>
       {% endif %}
       {% if params.description %}
       <p {%- if params.description.classes %} class="{{ params.description.classes }}"{% endif %} {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-        {{ params.description.html | safe if params.description.html else params.description.text }}
+        {{ params.description.html | filterquotes | safe if params.description.html else params.description.text }}
       </p>
       {% endif %}
       {% if params.items %}
@@ -53,7 +53,7 @@
       {% endif %}
       {% if params.content %}
       <p class="text-sm {%- if params.content.classes %} {{ params.content.classes }}{% endif %}">
-        {{ params.content.html | safe if params.content.html else params.content.text }}
+        {{ params.content.html | filterquotes | safe if params.content.html else params.content.text }}
       </p>
       {% endif %}
     </div>

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

@@ -15,7 +15,7 @@
   },
   {
     "name": "con label como encabezado",
-    "description": 'Utiliza el parámetro <code>"isPageheading": true</code> para que el label esté dentro de un encabezado. 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>. Si no se establece un <code>"headingLevel"</code>, el label no estará rodeado de un encabezado.',
+    "description": "Utiliza el parámetro <code>'isPageheading': true</code> para que el label esté dentro de un encabezado. 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>. Si no se establece un <code>'headingLevel'</code>, el label no estará rodeado de un encabezado.",
     "data": {
       "text": "Esto es un label",
       "classes": "c-h1",
@@ -24,7 +24,7 @@
   },
   {
     "name": "con label como encabezado con h3",
-    "description": 'Utiliza el parámetro <code>"isPageheading": true</code> para que el label esté dentro de un encabezado. 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>.',
+    "description": "Utiliza el parámetro <code>'isPageheading': true</code> para que el label esté dentro de un encabezado. 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": {
       "text": "Esto es un label",
       "classes": "c-h3",

package/src/templates/components/label/_template.label.njk

@@ -2,7 +2,7 @@
 {% set labelHtml %}
 <label class="block {%- if params.classes %} {{ params.classes }}{% endif %}"
   {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}
-  {%- if params.for %} for="{{ params.for }}"{% endif %}>{{ params.html | safe if params.html else params.text }}</label>{% endset %}
+  {%- if params.for %} for="{{ params.for }}"{% endif %}>{{ params.html | filterquotes | safe if params.html else params.text }}</label>{% endset %}
 
 <!-- label -->
 {% if params.isPageHeading %}

package/src/templates/components/links-list/_examples.links-list.njk

@@ -1,11 +1,11 @@
 {% set exampleComponent = "links-list" %}
 
 {% set iconSimple %}
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1em" width="1em" class="inline-block align-middle"><path d="M19.71,20H4.29A2.28,2.28,0,0,1,2,17.71V6.29A2.28,2.28,0,0,1,4.29,4H7.72a2,2,0,0,1,1.44.61l1.19,1.24a.51.51,0,0,0,.36.15H20a2,2,0,0,1,2,2v9.71A2.28,2.28,0,0,1,19.71,20ZM4.29,6A.29.29,0,0,0,4,6.29V17.71a.29.29,0,0,0,.29.29H19.71a.29.29,0,0,0,.29-.29V8.5a.5.5,0,0,0-.5-.5h-9a2,2,0,0,1-1.44-.61L7.87,6.15A.55.55,0,0,0,7.51,6Z" fill="currentColor"></path></svg>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1em" width="1em" class="inline-block align-middle" aria-label="Carpeta de documentos"><path d="M19.71,20H4.29A2.28,2.28,0,0,1,2,17.71V6.29A2.28,2.28,0,0,1,4.29,4H7.72a2,2,0,0,1,1.44.61l1.19,1.24a.51.51,0,0,0,.36.15H20a2,2,0,0,1,2,2v9.71A2.28,2.28,0,0,1,19.71,20ZM4.29,6A.29.29,0,0,0,4,6.29V17.71a.29.29,0,0,0,.29.29H19.71a.29.29,0,0,0,.29-.29V8.5a.5.5,0,0,0-.5-.5h-9a2,2,0,0,1-1.44-.61L7.87,6.15A.55.55,0,0,0,7.51,6Z" fill="currentColor"></path></svg>
 {% endset %}
 
 {% set iconComplex %}
-  <div class="flex items-center justify-center p-sm -ml-sm bg-neutral-lighter rounded-full text-4xl"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1em" width="1em" class="inline-block align-middle"><path d="M19.71,20H4.29A2.28,2.28,0,0,1,2,17.71V6.29A2.28,2.28,0,0,1,4.29,4H7.72a2,2,0,0,1,1.44.61l1.19,1.24a.51.51,0,0,0,.36.15H20a2,2,0,0,1,2,2v9.71A2.28,2.28,0,0,1,19.71,20ZM4.29,6A.29.29,0,0,0,4,6.29V17.71a.29.29,0,0,0,.29.29H19.71a.29.29,0,0,0,.29-.29V8.5a.5.5,0,0,0-.5-.5h-9a2,2,0,0,1-1.44-.61L7.87,6.15A.55.55,0,0,0,7.51,6Z" fill="currentColor"></path></svg></div>
+  <div class="flex items-center justify-center p-sm -ml-sm bg-neutral-lighter rounded-full text-4xl"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1em" width="1em" class="inline-block align-middle" aria-label="Carpeta de documentos"><path d="M19.71,20H4.29A2.28,2.28,0,0,1,2,17.71V6.29A2.28,2.28,0,0,1,4.29,4H7.72a2,2,0,0,1,1.44.61l1.19,1.24a.51.51,0,0,0,.36.15H20a2,2,0,0,1,2,2v9.71A2.28,2.28,0,0,1,19.71,20ZM4.29,6A.29.29,0,0,0,4,6.29V17.71a.29.29,0,0,0,.29.29H19.71a.29.29,0,0,0,.29-.29V8.5a.5.5,0,0,0-.5-.5h-9a2,2,0,0,1-1.44-.61L7.87,6.15A.55.55,0,0,0,7.51,6Z" fill="currentColor"></path></svg></div>
 {% endset %}
 
 {% set examples =  [
@@ -28,7 +28,7 @@
         }
       ],
       "attributes": {
-        "aria-label": "Menu destacado"
+        "aria-label": "Menú destacado"
       }
     }
   },
@@ -67,10 +67,10 @@
           "href": "#",
           "text": "Con icono pesonalizado usando iconRight.html",
           "iconRight": {
-            "html": '<svg class="self-center" aria-hidden="true" focusable="false" width="1em" height="1em" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            "html": "<svg class='self-center' aria-hidden='true' focusable='false' width='1em' height='1em' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
             <g>
-            <path fill-rule="evenodd" clip-rule="evenodd" d="M6.28572 1.71429C6.12793 1.71429 6.00001 1.84221 6.00001 2V3.14286H10V2C10 1.84221 9.87209 1.71429 9.71429 1.71429H6.28572ZM11.7143 3.14286V2C11.7143 0.895431 10.8189 0 9.71429 0H6.28572C5.18115 0 4.28572 0.895431 4.28572 2V3.14286H1.14286C0.669476 3.14286 0.285721 3.52662 0.285721 4C0.285721 4.47338 0.669476 4.85714 1.14286 4.85714H5.14286H10.8572H14.8572C15.3305 4.85714 15.7143 4.47338 15.7143 4C15.7143 3.52662 15.3305 3.14286 14.8572 3.14286H11.7143ZM2.85715 6.28571C2.69243 6.28571 2.53572 6.3568 2.42722 6.48073C2.31872 6.60466 2.26897 6.76939 2.29074 6.93266L3.4336 15.5041C3.47145 15.788 3.71361 16 4.00001 16H12C12.2864 16 12.5286 15.788 12.5664 15.5041L13.7093 6.93266C13.7311 6.76939 13.6813 6.60466 13.5728 6.48073C13.4642 6.3568 13.3076 6.28571 13.1429 6.28571H2.85715Z" fill="currentColor"></path>
-            </g></svg>'
+            <path fill-rule='evenodd' clip-rule='evenodd' d='M6.28572 1.71429C6.12793 1.71429 6.00001 1.84221 6.00001 2V3.14286H10V2C10 1.84221 9.87209 1.71429 9.71429 1.71429H6.28572ZM11.7143 3.14286V2C11.7143 0.895431 10.8189 0 9.71429 0H6.28572C5.18115 0 4.28572 0.895431 4.28572 2V3.14286H1.14286C0.669476 3.14286 0.285721 3.52662 0.285721 4C0.285721 4.47338 0.669476 4.85714 1.14286 4.85714H5.14286H10.8572H14.8572C15.3305 4.85714 15.7143 4.47338 15.7143 4C15.7143 3.52662 15.3305 3.14286 14.8572 3.14286H11.7143ZM2.85715 6.28571C2.69243 6.28571 2.53572 6.3568 2.42722 6.48073C2.31872 6.60466 2.26897 6.76939 2.29074 6.93266L3.4336 15.5041C3.47145 15.788 3.71361 16 4.00001 16H12C12.2864 16 12.5286 15.788 12.5664 15.5041L13.7093 6.93266C13.7311 6.76939 13.6813 6.60466 13.5728 6.48073C13.4642 6.3568 13.3076 6.28571 13.1429 6.28571H2.85715Z' fill='currentColor'></path>
+            </g></svg>"
           }
         },
         {
@@ -87,7 +87,7 @@
         }
       ],
       "attributes": {
-        "aria-label": "Menu destacado"
+        "aria-label": "Menú destacado"
       }
     }
   },
@@ -119,7 +119,7 @@
         }
       ],
       "attributes": {
-        "aria-label": "Menu destacado"
+        "aria-label": "Menú destacado"
       }
     }
   },
@@ -154,7 +154,7 @@
         }
       ],
       "attributes": {
-        "aria-label": "Menu destacado"
+        "aria-label": "Menú destacado"
       }
     }
   },
@@ -187,7 +187,7 @@
         }
       ],
       "attributes": {
-        "aria-label": "Menu destacado"
+        "aria-label": "Menú destacado"
       }
     }
   },
@@ -223,7 +223,7 @@
         }
       ],
       "attributes": {
-        "aria-label": "Menu destacado"
+        "aria-label": "Menú destacado"
       }
     }
   },
@@ -247,7 +247,7 @@
         }
       ],
       "attributes": {
-        "aria-label": "Menu destacado"
+        "aria-label": "Menú destacado"
       }
     }
   },
@@ -269,7 +269,7 @@
         }
       ],
       "attributes": {
-        "aria-label": "Menu destacado"
+        "aria-label": "Menú destacado"
       }
     }
   },
@@ -293,7 +293,7 @@
         }
       ],
       "attributes": {
-        "aria-label": "Menu destacado"
+        "aria-label": "Menú destacado"
       }
     }
   },
@@ -328,7 +328,7 @@
         }
       ],
       "attributes": {
-        "aria-label": "Menu destacado"
+        "aria-label": "Menú destacado"
       }
     }
   },
@@ -351,7 +351,7 @@
         }
       ],
       "attributes": {
-        "aria-label": "Menu destacado"
+        "aria-label": "Menú destacado"
       }
     }
   },
@@ -383,7 +383,7 @@
         }
       ],
       "attributes": {
-        "aria-label": "Menu destacado"
+        "aria-label": "Menú destacado"
       }
     }
   },
@@ -415,7 +415,7 @@
         }
       ],
       "attributes": {
-        "aria-label": "Menu destacado"
+        "aria-label": "Menú destacado"
       }
     }
   },
@@ -451,7 +451,7 @@
         }
       ],
       "attributes": {
-        "aria-label": "Menu destacado"
+        "aria-label": "Menú destacado"
       }
     }
   },
@@ -492,7 +492,7 @@
               "data-attribute-2": "value-B",
               "data-attribute-3": "value-C"
             },
-            "html": '<p>Este es un párrafo explicativo metido con un sub.html dentro del Item</p><p>Este es otro párrafo.</p>'
+            "html": "<p>Este es un párrafo explicativo metido con un sub.html dentro del Item</p><p>Este es otro párrafo.</p>"
           }
         },
         {
@@ -515,14 +515,14 @@
         }
       ],
       "attributes": {
-        "aria-label": "Menu destacado",
+        "aria-label": "Menú destacado",
         "id": "nav-id-example"
       }
     }
   },
   {
     "name": "Sin nav",
-    "description": 'Usa el parámetro <code>"hasNav": false</code> para no rodear el componente con una etiqueta <code>&lt;nav&gt;</code>, asumiendo que el componente estará rodeado con un nav personalizado con su propio <code>aria-label</code> si lo necesita.',
+    "description": "Usa el parámetro <code>'hasNav': false</code> para no rodear el componente con una etiqueta <code>&lt;nav&gt;</code>, asumiendo que el componente estará rodeado con un nav personalizado con su propio <code>aria-label</code> si lo necesita.",
     "data": {
       "idPrefix": "hasnav-false",
       "hasNav": false,
@@ -539,10 +539,7 @@
           "href": "#",
           "text": "Item 3"
         }
-      ],
-      "attributes": {
-        "aria-label": "Menu destacado"
-      }
+      ]
     }
   },
   {
@@ -555,7 +552,7 @@
           "html": "<strong>Deudas</strong>",
           "classes": "flex justify-between items-center py-base text-lg",
           "sub": {
-            "html": '<p class="c-paragraph-base mb-0">Tienes <span class="text-alert-base">deudas fuera de plazo</span></p>'
+            "html": "<p class='c-paragraph-base mb-0'>Tienes <span class='text-alert-base'>deudas fuera de plazo</span></p>"
           }
         },
         {
@@ -568,7 +565,7 @@
           "html": "<strong>Certificado de corriente de pago</strong>",
           "classes": "flex justify-between items-center py-base text-lg",
           "sub": {
-            "html": '<p class="c-paragraph-base mb-0">Tienes <strong>1 certificado disponible</strong>.</p>'
+            "html": "<p class='c-paragraph-base mb-0'>Tienes <strong>1 certificado disponible</strong>.</p>"
           }
         },
         {
@@ -581,18 +578,18 @@
           "html": "<strong>Aplazamiento y fraccionamiento</strong>",
           "classes": "flex justify-between items-center py-base text-lg",
           "sub": {
-            "html": '<p class="c-paragraph-base mb-0">Tienes 1 deuda fraccionada, has pagado <strong>2 fracciones</strong> de 5.</p>'
+            "html": "<p class='c-paragraph-base mb-0'>Tienes 1 deuda fraccionada, has pagado <strong>2 fracciones</strong> de 5.</p>"
           }
         }
       ],
       "attributes": {
-        "aria-label": "Menu destacado"
+        "aria-label": "Menú destacado"
       }
     }
   },
   {
     "name": "Activar un item con Javascript",
-    "description": 'Puedes activar un item con Javascript, usa la función global <code>activateItemLinksList(elementWrapper, idItem)</code> para activar un item de la lista, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemLinksList("links-list-js", "links-list-js-3")</code> para activar el último item de la lista.',
+    "description": "Puedes activar un item con Javascript, usa la función global <code>activateItemLinksList(elementWrapper, idItem)</code> para activar un item de la lista, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemLinksList('links-list-js', 'links-list-js-3')</code> para activar el último item de la lista.",
     "data": {
       "idPrefix": "links-list-js",
       "items": [
@@ -610,7 +607,7 @@
         }
       ],
       "attributes": {
-        "aria-label": "Menu destacado",
+        "aria-label": "Menú destacado",
         "id": "links-list-js"
       }
     }

package/src/templates/components/links-list/_template.links-list.njk

@@ -29,15 +29,15 @@
           {% if item.icon %}
           <div class="{% if item.icon.containerClasses %}{{ item.icon.containerClasses }}{% else %}self-center h-full{% endif %}">
             {% if item.icon.html %}
-            {{ item.icon.html | safe }}
+            {{ item.icon.html | filterquotes | safe }}
             {% endif %}
           </div>
           {% endif %}
           <div data-element="c-links-list__text" class="flex-1">
             {% if item.active %}
-            <strong class="font-bold">{{ item.html | safe if item.html else item.text }}</strong>
+            <strong class="font-bold">{{ item.html | filterquotes | safe if item.html else item.text }}</strong>
             {% else %}
-            {{ item.html | safe if item.html else item.text }}
+            {{ item.html | filterquotes | safe if item.html else item.text }}
             {% endif %}
           </div>
         </div>
@@ -46,7 +46,7 @@
             {% if item.iconRight.type == 'arrow' %}
               <div class="{% if item.iconRight.containerClasses %}{{ item.iconRight.containerClasses }}{% else %}self-center h-full{% endif %}">
                 {% if item.iconRight.html %}
-                  {{ item.iconRight.html | safe }}
+                  {{ item.iconRight.html | filterquotes | safe }}
                 {% else %}
                   {{ arrow | safe | trim }}
                 {% endif %}
@@ -54,7 +54,7 @@
             {% elseif item.iconRight.type == 'chevron' %}
               <div class="{% if item.iconRight.containerClasses %}{{ item.iconRight.containerClasses }}{% else %}self-center h-full{% endif %}">
                 {% if item.iconRight.html %}
-                  {{ item.iconRight.html | safe }}
+                  {{ item.iconRight.html | filterquotes | safe }}
                 {% else %}
                   {{ chevron | safe | trim }}
                 {% endif %}
@@ -62,7 +62,7 @@
             {% else %}
               <div class="{% if item.iconRight.containerClasses %}{{ item.iconRight.containerClasses }}{% else %}self-center h-full{% endif %}">
                 {% if item.iconRight.html %}
-                  {{ item.iconRight.html | safe }}
+                  {{ item.iconRight.html | filterquotes | safe }}
                 {% endif %}
               </div>
             {% endif %}
@@ -79,23 +79,23 @@
           {% if item.icon %}
           <div class="{% if item.icon.containerClasses %}{{ item.icon.containerClasses }}{% else %}self-center h-full{% endif %}">
             {% if item.icon.html %}
-            {{ item.icon.html | safe }}
+            {{ item.icon.html | filterquotes | safe }}
             {% endif %}
           </div>
           {% endif %}
           <div class="flex-1">
             {% if item.active %}
-            <strong class="font-bold">{{ item.html | safe if item.html else item.text }}</strong>
+            <strong class="font-bold">{{ item.html | filterquotes | safe if item.html else item.text }}</strong>
             {% else %}
-            {{ item.html | safe if item.html else item.text }}
+            {{ item.html | filterquotes | safe if item.html else item.text }}
             {% endif %}
           </div>
         </div>
       </div>
       {% endif %}
       {% if item.sub.html %}
-      <div class="{%- if item.sub.classes %} {{ item.sub.classes }}{% else %} c-paragraph-base text-neutral-dark -mt-base mr-lg{% endif %}" id="{{ subId }}">
-        {{ item.sub.html | safe }}
+      <div class="{%- if item.sub.classes %} {{ item.sub.classes }}{% else %} c-paragraph-base text-neutral-dark -mt-base mr-lg bg-white{% endif %}" id="{{ subId }}">
+        {{ item.sub.html | filterquotes | safe }}
       </div>
       {% endif %}
     </li>