desy-html 11.1.2 → 12.0.0

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

@@ -31,7 +31,7 @@
   },
   {
     "name": "Tipo enlace o botón con estado hover",
-    "description": 'Simula activar la pseudoclase de CSS <code>:hover</code>',
+    "description": "Simula activar la pseudoclase de CSS <code>:hover</code>",
     "data": {
       "type": "button",
       "text": "Hover",
@@ -40,7 +40,7 @@
   },
   {
     "name": "Tipo enlace o botón con estado focus",
-    "description": 'Simula activar la pseudoclase de CSS <code>:focus</code>',
+    "description": "Simula activar la pseudoclase de CSS <code>:focus</code>",
     "data": {
       "type": "button",
       "text": "Focus",
@@ -59,7 +59,7 @@
     "name": "con icono a la derecha",
     "data": {
       "type": "button",
-      "html": "Icono derecha pill <svg viewBox=\"0 0 140 140\" class=\" self-center ml-2 \" role=\" img \" aria-label=\"Eliminar\" width=\" .75em \" height=\" .75em \"><path fill=\"currentColor\" d=\"M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z\"/></svg>",
+      "html": "Icono derecha pill <svg viewBox='0 0 140 140' class='self-center ml-2' role='img' aria-label='Eliminar' width=' .75em ' height=' .75em '><path fill='currentColor' d='M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z'/></svg>",
       "classes": "cursor-pointer"
     }
   },
@@ -67,35 +67,35 @@
     "name": "con icono a la izquierda",
     "data": {
       "type": "button",
-      "html": "<svg viewBox=\"0 0 140 140\" class=\" self-center mr-2 \"  aria-hidden=\"true\" width=\" .75em \" height=\" .75em \"><path fill=\"currentColor\" d=\"M35 35a35 35 0 1070 0 35 35 0 10-70 0zM132.78 133.33a66.59 66.59 0 00-125.56 0 5 5 0 004.71 6.67h116.14a5 5 0 004.71-6.67z\" /></svg> Icono izquierda pill",
+      "html": "<svg viewBox='0 0 140 140' class=' self-center mr-2 '  aria-hidden='true' width=' .75em ' height=' .75em '><path fill='currentColor' d='M35 35a35 35 0 1070 0 35 35 0 10-70 0zM132.78 133.33a66.59 66.59 0 00-125.56 0 5 5 0 004.71 6.67h116.14a5 5 0 004.71-6.67z' /></svg> Icono izquierda pill",
       "classes": "cursor-pointer"
     }
   },
   {
     "name": "primario",
     "data": {
-      "html": "<svg viewBox=\"0 0 140 140\" class=\" self-center mr-2 \"  aria-hidden=\"true\" width=\" .75em \" height=\" .75em \"><path fill=\"currentColor\" d=\"M43.7 140a17.42 17.42 0 01-12.36-5.12L5.13 108.66a17.49 17.49 0 010-24.75l24.61-24.25a7.5 7.5 0 0110.52 10.68L15.69 94.56a2.5 2.5 0 000 3.49l26.21 26.22a2.51 2.51 0 003.54 0l24.22-24.53a7.5 7.5 0 1110.68 10.52l-24.21 24.57A17.53 17.53 0 0143.7 140zM99.66 80.26a7.49 7.49 0 01.08-10.6l24.57-24.22a2.5 2.5 0 000-3.49L98.06 15.73a2.51 2.51 0 00-3.54 0L70.34 40.26a7.5 7.5 0 01-10.68-10.52L83.87 5.17a17.52 17.52 0 0124.79 0l26.21 26.21a17.49 17.49 0 010 24.75l-24.61 24.21a7.49 7.49 0 01-10.6-.08z\"/><path fill=\"currentColor\" d=\"M55 92.5a7.5 7.5 0 01-5.3-12.8l30-30a7.5 7.5 0 1110.6 10.6l-30 30a7.44 7.44 0 01-5.3 2.2z\"/></svg> Primario",
+      "html": "<svg viewBox='0 0 140 140' class=' self-center mr-2 '  aria-hidden='true' width=' .75em ' height=' .75em '><path fill='currentColor' d='M43.7 140a17.42 17.42 0 01-12.36-5.12L5.13 108.66a17.49 17.49 0 010-24.75l24.61-24.25a7.5 7.5 0 0110.52 10.68L15.69 94.56a2.5 2.5 0 000 3.49l26.21 26.22a2.51 2.51 0 003.54 0l24.22-24.53a7.5 7.5 0 1110.68 10.52l-24.21 24.57A17.53 17.53 0 0143.7 140zM99.66 80.26a7.49 7.49 0 01.08-10.6l24.57-24.22a2.5 2.5 0 000-3.49L98.06 15.73a2.51 2.51 0 00-3.54 0L70.34 40.26a7.5 7.5 0 01-10.68-10.52L83.87 5.17a17.52 17.52 0 0124.79 0l26.21 26.21a17.49 17.49 0 010 24.75l-24.61 24.21a7.49 7.49 0 01-10.6-.08z'/><path fill='currentColor' d='M55 92.5a7.5 7.5 0 01-5.3-12.8l30-30a7.5 7.5 0 1110.6 10.6l-30 30a7.44 7.44 0 01-5.3 2.2z'/></svg> Primario",
       "classes": "c-pill--primary"
     }
   },
   {
     "name": "Aviso",
     "data": {
-      "html": "<svg viewBox=\"0 0 140 140\" class=\" self-center mr-2 \"  aria-hidden=\"true\" width=\" .75em \" height=\" .75em \"><path fill=\"currentColor\" d=\"M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z\"/></svg> Aviso",
+      "html": "<svg viewBox='0 0 140 140' class=' self-center mr-2 '  aria-hidden='true' width=' .75em ' height=' .75em '><path fill='currentColor' d='M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z'/></svg> Aviso",
       "classes": "c-pill--warning"
     }
   },
   {
     "name": "Éxito",
     "data": {
-      "html": "<svg viewBox=\"0 0 140 140\" class=\" self-center mr-2 \"  aria-hidden=\"true\" width=\" .75em \" height=\" .75em \"><path fill=\"currentColor\" d=\"M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z\"/></svg> Éxito",
+      "html": "<svg viewBox='0 0 140 140' class=' self-center mr-2 '  aria-hidden='true' width=' .75em ' height=' .75em '><path fill='currentColor' d='M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z'/></svg> Éxito",
       "classes": "c-pill--success"
     }
   },
   {
     "name": "alerta",
     "data": {
-      "html": "<svg viewBox=\"0 0 140 140\" class=\" self-center mr-2 \"  aria-hidden=\"true\" width=\" .75em \" height=\" .75em \"><path fill=\"currentColor\" d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm-7.5 35a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 75a10 10 0 1110-10 10 10 0 01-10 10z\"/></svg> Alerta",
+      "html": "<svg viewBox='0 0 140 140' class=' self-center mr-2 '  aria-hidden='true' width=' .75em ' height=' .75em '><path fill='currentColor' d='M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm-7.5 35a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 75a10 10 0 1110-10 10 10 0 01-10 10z'/></svg> Alerta",
       "classes": "c-pill--alert"
     }
   }

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

@@ -25,15 +25,15 @@
 <!-- pill -->
 {%- if element == 'a' %}
 <a href="{{ params.href }}"  {{- buttonAttributes | safe }} {% if params.target %} target="{{ params.target }}"{% endif %}{{- commonAttributes | safe }}>
-  {{- params.html | safe if params.html else params.text -}}
+  {{- params.html | filterquotes | safe if params.html else params.text -}}
 </a>
 {%- elseif element == 'button' %}
 <button {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
-  {{- params.html | safe if params.html else params.text -}}
+  {{- params.html | filterquotes | safe if params.html else params.text -}}
 </button>
 {%- else %}
 <span {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
-  {{- params.html | safe if params.html else params.text -}}
+  {{- params.html | filterquotes | safe if params.html else params.text -}}
 </span>
 {% endif %}
 <!-- /pill -->

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

@@ -167,7 +167,7 @@
   },
   {
     "name": "con un legend como 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>.',
+    "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": "legend-as-page-heading",
       "name": "legend-as-page-heading",
@@ -325,7 +325,7 @@
   },
   {
     "name": "Con clases de CSS aplicadas",
-    "description": 'Los parámetros <code>classes</code> nos permiten aplicar clases de Tailwind CSS a nuestro componente.',
+    "description": "Los parámetros <code>classes</code> nos permiten aplicar clases de Tailwind CSS a nuestro componente.",
     "data": {
       "idPrefix": "classes",
       "name": "classes",

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

@@ -100,7 +100,7 @@
     </div>
         {% if item.conditional.html %}
     <div class="mb-lg ml-5 pt-sm pb-base pl-6 origin-top-left border-l-2 border-primary-base c-radios__conditional-item" id="{{ conditionalId }}">
-      {{ item.conditional.html | safe | indent(6) }}
+      {{ item.conditional.html | filterquotes | safe | indent(6) }}
     </div>
         {% endif %}
         {% endif %}

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

@@ -55,7 +55,7 @@
   },
   {
     "name": "placeholder",
-    "description": 'Usa una combinación de los parámetros <code>"disabled": true</code>, <code>"selected": true</code> y <code>"hidden": true</code> para la primera opción y  actúará como si fuera un placeholder visual.',
+    "description": "Usa una combinación de los parámetros <code>'disabled': true</code>, <code>'selected': true</code> y <code>'hidden': true</code> para la primera opción y  actúará como si fuera un placeholder visual.",
     "data": {
       "id": "select-placeholder",
       "name": "select-placeholder",

package/src/templates/components/skip-link/_examples.skip-link.njk

@@ -10,7 +10,7 @@
   },
   {
     "name": "con estado focus",
-    "description": 'Simula activar la pseudoclase de CSS <code>:focus</code>',
+    "description": "Simula activar la pseudoclase de CSS <code>:focus</code>",
     "data": {
       "classes": "ds-focus",
       "text": "Saltar al contenido principal",

package/src/templates/components/skip-link/_template.skip-link.njk

@@ -1,5 +1,5 @@
 <!-- skip-link -->
 <a href="{{ params.href | default('#content') }}" class="c-skip-link sr-only active:not-sr-only focus:not-sr-only focus:outline-none focus:shadow-outline-focus block p-base bg-warning-base text-center text-black underline {%- if params.classes %} {{ params.classes }}{% endif -%}"{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-  {{- params.html | safe if params.html else params.text -}}
+  {{- params.html | filterquotes | safe if params.html else params.text -}}
 </a>
 <!-- /skip-link -->

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

@@ -43,7 +43,7 @@
     "data": {
       "text": "Atención",
       "icon": {
-        "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-primary-base" aria-hidden="true" focusable="false"><path d="M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm0 117.51a10 10 0 1110-10 10 10 0 01-10 10zm9.17-39.08a2.5 2.5 0 00-1.67 2.36v1.71a7.5 7.5 0 01-15 0v-10A7.5 7.5 0 0170 65a12.5 12.5 0 10-12.5-12.5 7.5 7.5 0 01-15 0 27.5 27.5 0 1136.67 25.93z" fill="currentColor"/></svg>'
+        "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 text-primary-base' aria-hidden='true' focusable='false'><path d='M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm0 117.51a10 10 0 1110-10 10 10 0 01-10 10zm9.17-39.08a2.5 2.5 0 00-1.67 2.36v1.71a7.5 7.5 0 01-15 0v-10A7.5 7.5 0 0170 65a12.5 12.5 0 10-12.5-12.5 7.5 7.5 0 01-15 0 27.5 27.5 0 1136.67 25.93z' fill='currentColor'/></svg>"
       }
     }
   }

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

@@ -7,7 +7,7 @@
     <span class="inline-block ml-sm">
     {% if params.icon %}
       {% if params.icon.html %}
-      {{ params.icon.html | safe }}
+      {{ params.icon.html | filterquotes | safe }}
       {% elseif params.icon.type == 'alert' %}
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-alert-base" aria-hidden="true" focusable="false"><path d="M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z" fill="currentColor"/></svg>
       {% elseif params.icon.type == 'loading' %}

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

@@ -7,7 +7,7 @@
       "title": {
         "text": "Título"
       },
-      "caller": '<button class="c-button c-button--transparent">Modificar<span class="sr-only"> item del Título</span></button>'
+      "caller": "<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> item del Título</span></button>"
     }
   },
   {
@@ -46,7 +46,7 @@
           "type": "success"
         }
       },
-      "caller": '<button class="c-button c-button--transparent">Modificar<span class="sr-only"> los datos de término y definición y el resto</span></button>'
+      "caller": "<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> los datos de término y definición y el resto</span></button>"
     }
   },
   {
@@ -54,9 +54,9 @@
     "data": {
       "id": "with-title-html",
       "title": {
-        "html": 'Autorización para la consulta de datos de las personas de la unidad familiar. <span class="text-neutral-dark">(Documento condicionado)</span>'
+        "html": "Autorización para la consulta de datos de las personas de la unidad familiar. <span class='text-neutral-dark'>(Documento condicionado)</span>"
       },
-      "caller": '<button class="c-button c-button--transparent">Aportar<span class="sr-only"> Autorización para la consulta de datos de las personas de la unidad familiar</span></button>'
+      "caller": "<button class='c-button c-button--transparent'>Aportar<span class='sr-only'> Autorización para la consulta de datos de las personas de la unidad familiar</span></button>"
     }
   },
   {
@@ -75,7 +75,7 @@
           "type": "success"
         }
       },
-      "caller": '<button class="c-button c-button--transparent">Modificar<span class="sr-only"> personas de la unidad familiar</span></button>'
+      "caller": "<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> personas de la unidad familiar</span></button>"
     }
   },
   {
@@ -86,9 +86,9 @@
         "text": "Autorización para la consulta de datos de las personas de la unidad familiar"
       },
       "hint": {
-        "html": '<a href="#" class="c-link"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="inline-block self-center w-4 h-4 mr-sm no-underline" role="img" aria-hidden="true"><path d="M100.3 52.2a7.49 7.49 0 00-10.6 0L77.5 64.39V7.5a7.5 7.5 0 00-15 0v56.89L50.3 52.2a7.5 7.5 0 10-10.6 10.6l25 25a7.49 7.49 0 0010.6 0l25-25a7.49 7.49 0 000-10.6zM130 95a10 10 0 00-10 10v12.5a2.5 2.5 0 01-2.5 2.5h-95a2.5 2.5 0 01-2.5-2.5V105a10 10 0 00-20 0v15a20 20 0 0020 20h100a20 20 0 0020-20v-15a10 10 0 00-10-10z" fill="currentColor"/></svg>Descargar modelo</a>'
+        "html": "<a href='#' class='c-link'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='inline-block self-center w-4 h-4 mr-sm no-underline' role='img' aria-hidden='true'><path d='M100.3 52.2a7.49 7.49 0 00-10.6 0L77.5 64.39V7.5a7.5 7.5 0 00-15 0v56.89L50.3 52.2a7.5 7.5 0 10-10.6 10.6l25 25a7.49 7.49 0 0010.6 0l25-25a7.49 7.49 0 000-10.6zM130 95a10 10 0 00-10 10v12.5a2.5 2.5 0 01-2.5 2.5h-95a2.5 2.5 0 01-2.5-2.5V105a10 10 0 00-20 0v15a20 20 0 0020 20h100a20 20 0 0020-20v-15a10 10 0 00-10-10z' fill='currentColor'/></svg>Descargar modelo</a>"
       },
-      "caller": '<button class="c-button c-button--transparent">Aportar<span class="sr-only"> Autorización para la consulta de datos de las personas de la unidad familiar</span></button>'
+      "caller": "<button class='c-button c-button--transparent'>Aportar<span class='sr-only'> Autorización para la consulta de datos de las personas de la unidad familiar</span></button>"
     }
   },
   {
@@ -101,7 +101,7 @@
       "status": {
         "text": "Iniciado"
       },
-      "caller": '<button class="c-button c-button--transparent">Rellenar<span class="sr-only"> datos adicionales del solicitante</span></button>'
+      "caller": "<button class='c-button c-button--transparent'>Rellenar<span class='sr-only'> datos adicionales del solicitante</span></button>"
     }
   },
   {
@@ -117,7 +117,7 @@
           "type": "success"
         }
       },
-      "caller": '<button class="c-button c-button--transparent">Modificar<span class="sr-only"> datos adicionales del solicitante</span></button>'
+      "caller": "<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> datos adicionales del solicitante</span></button>"
     }
   },
   {
@@ -138,7 +138,7 @@
         },
         "classes": "text-alert-base"
       },
-      "caller": '<button class="c-button c-button--transparent">Modificar<span class="sr-only"> datos adicionales del solicitante</span></button>',
+      "caller": "<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> datos adicionales del solicitante</span></button>",
       "classes": "border-l-4 border-alert-base"
     }
   },
@@ -155,7 +155,7 @@
           "type": "loading"
         }
       },
-      "caller": '<button class="c-button c-button--transparent">Modificar<span class="sr-only"> datos adicionales del solicitante</span></button>'
+      "caller": "<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> datos adicionales del solicitante</span></button>"
     }
   },
   {
@@ -176,7 +176,7 @@
         },
         "classes": "text-alert-base"
       },
-      "caller": '<button class="c-button c-button--transparent">Ver<span class="sr-only"> datos adicionales del solicitante</span></button>',
+      "caller": "<button class='c-button c-button--transparent'>Ver<span class='sr-only'> datos adicionales del solicitante</span></button>",
       "classes": "border-l-4 border-alert-base"
     }
   },
@@ -190,7 +190,7 @@
             "text": "Acreditación"
           },
           "definition": {
-            "html": 'Mediante archivo adjunto <a href="#" class="c-link inline-block">Modelo de solicitud (PDF, 200Kb)</a>'
+            "html": "Mediante archivo adjunto <a href='#' class='c-link inline-block'>Modelo de solicitud (PDF, 200Kb)</a>"
           }
         }
       ],
@@ -200,7 +200,7 @@
           "type": "success"
         }
       },
-      "caller": '<button class="c-button c-button--transparent">Modificar<span class="sr-only"> acreditación</span></button>'
+      "caller": "<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> acreditación</span></button>"
     }
   },
   {
@@ -239,7 +239,7 @@
           "type": "alert"
         }
       },
-      "caller": '<button class="c-button c-button--transparent">Rellenar<span class="sr-only"> datos adicionales del solicitante</span></button>',
+      "caller": "<button class='c-button c-button--transparent'>Rellenar<span class='sr-only'> datos adicionales del solicitante</span></button>",
       "classes": "border-l-4 border-alert-base"
     }
   }

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

@@ -9,7 +9,7 @@
 
 {%- set commonHtml %}
   {% if params.title %}
-  <p class="{% if params.title.classes %}{{ params.title.classes }}{% else %}my-sm{% endif %}">{{ params.title.html | safe  if params.title.html else params.title.text }}</p>
+  <p class="{% if params.title.classes %}{{ params.title.classes }}{% else %}my-sm{% endif %}">{{ params.title.html | filterquotes | safe  if params.title.html else params.title.text }}</p>
   {% endif %}
   {% if params.hint %}
     {% set hintId = params.id + '-hint' %}
@@ -45,11 +45,11 @@
   {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
     <dt class="{% if item.term.classes %}{{ item.term.classes }}{% else %}w-1/2 my-sm{% endif %}"
     {%- for attribute, value in item.term.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-      {{ item.term.html | safe if item.term.html else item.term.text }}
+      {{ item.term.html | filterquotes | safe if item.term.html else item.term.text }}
     </dt>
     <dd class="{% if item.definition.classes %}{{ item.definition.classes }}{% else %}w-1/2 my-sm font-semibold{% endif %}"
     {%- for attribute, value in item.definition.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-      {{ item.definition.html | safe if item.definition.html else item.definition.text }}
+      {{ item.definition.html | filterquotes | safe if item.definition.html else item.definition.text }}
     </dd>
   </div>
   {% endfor %}

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

@@ -200,7 +200,7 @@
   },
   {
     "name": "tabla con wrapper",
-    "description": 'Usa el parámetro <code>wrapper</code> para rodear la tabla con un <code>&lt;div&gt;</code> y poder añadir clases, normalmente para hacer scroll horizontal en la tabla en anchuras pequeñas.',
+    "description": "Usa el parámetro <code>wrapper</code> para rodear la tabla con un <code>&lt;div&gt;</code> y poder añadir clases, normalmente para hacer scroll horizontal en la tabla en anchuras pequeñas.",
     "data": {
       "caption": "Caption 1: Meses y pagos",
       "captionClasses": "sticky left-0 top-0 w-0 mb-base font-bold text-left text-lg lg:whitespace-nowrap",
@@ -395,7 +395,7 @@
   },
   {
     "name": "tabla no responsive",
-    "description": 'Usa la clase modificadora <code>.c-table--no-responsive</code> junto al parámetro <code>wrapper</code> para tablas que usen rowspan o colspan o tablas que no queremos que muestren sus celdas apiladas en móvil.',
+    "description": "Usa la clase modificadora <code>.c-table--no-responsive</code> junto al parámetro <code>wrapper</code> para tablas que usen rowspan o colspan o tablas que no queremos que muestren sus celdas apiladas en móvil.",
     "data": {
       "classes": "c-table--no-responsive w-full",
       "caption": "Caption 1: Meses y pagos",
@@ -453,7 +453,7 @@
   },
   {
     "name": "table con columnas sticky",
-    "description": 'En este ejemplo la primera y última columna se mantienen fijas y el resto hacen scroll horizontal si la anchura es pequeña.',
+    "description": "En este ejemplo la primera y última columna se mantienen fijas y el resto hacen scroll horizontal si la anchura es pequeña.",
     "data": {
       "caption": "Caption 1: Meses y pagos",
       "captionClasses": "sticky top-0 left-0 w-0 mb-base font-bold text-left text-lg",

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

@@ -32,11 +32,11 @@
           {% if loop.first and params.firstCellIsHeader %}
       <th scope="row" class="block lg:table-cell before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm align-top px-base py-sm text-left font-normal text-sm text-neutral-dark{%- if cell.classes %} {{ cell.classes }}{% endif %}"
             {{- commonAttributes | safe -}}
-          >{{ cell.html | safe if cell.html else cell.text }}</th>
+          >{{ cell.html | filterquotes | safe if cell.html else cell.text }}</th>
           {% else %}
       <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm {%- if cell.classes %} {{ cell.classes }}{% endif %}"
             {{- commonAttributes | safe -}}
-          >{{ cell.html | safe if cell.html else cell.text }}</td>
+          >{{ cell.html | filterquotes | safe if cell.html else cell.text }}</td>
           {% endif %}
         {% endfor %}
     </tr>

package/src/templates/components/table-advanced/_examples.table-advanced.njk

@@ -66,7 +66,7 @@
   {
     "name": "tabla con tfoot",
     "data": {
-      "idPrefix": "table-default",
+      "idPrefix": "table-tfoot",
       "caption": "Caption de la tabla",
       "captionClasses": "sr-only mb-base font-bold text-left text-lg",
       "head": [
@@ -144,7 +144,7 @@
   },
   {
     "name": "tabla con caption visible",
-    "description": 'También con <code>"firstCellIsHeader": true</code>',
+    "description": "También con <code>'firstCellIsHeader': true</code>",
     "data": {
       "idPrefix": "table-with-caption",
       "caption": "Caption 1: Meses y pagos",
@@ -209,7 +209,7 @@
   },
   {
     "name": "tabla con orderBy en columnas",
-    "description": 'Con <code>"orderBy": none</code>, <code>asc</code>, <code>desc</code>',
+    "description": "Con <code>'orderBy': none</code>, <code>asc</code>, <code>desc</code>",
     "data": {
       "idPrefix": "table-with-orderby",
       "head": [
@@ -290,7 +290,7 @@
   },
   {
     "name": "tabla con head y filtros",
-    "description": 'Con <code>"hasFilter": true</code> y clases <code>text-right</code> en columnas numéricas.',
+    "description": "Con <code>'hasFilter': true</code> y clases <code>text-right</code> en columnas numéricas.",
     "data": {
       "idPrefix": "table-with-head-and-filters",
       "head": [
@@ -353,9 +353,99 @@
       "classes": "min-w-full"
     }
   },
+  {
+    "name": "tabla con head y filtros con texto personalizado",
+    "description": "Con <code>'hasFilter': true</code>, con parámetro <code>'filterText'</code> personalizado y clases <code>text-right</code> en columnas numéricas.",
+    "data": {
+      "idPrefix": "table-with-head-and-filters-personalized",
+      "head": [
+        {
+          "text": "Mes de pago",
+          "select": {
+            "items": [
+              {
+                "value": "",
+                "text": "Selecciona mes...",
+                "disabled": true,
+                "selected": true,
+                "hidden": true
+              },
+              {
+                "value": 1,
+                "text": "Enero"
+              },
+              {
+                "value": 2,
+                "text": "Febrero"
+              },
+              {
+                "value": 3,
+                "text": "Marzo"
+              }
+            ]
+          },
+          "filterText": "Filtrar por mes"
+        },
+        {
+          "text": "Primer pago",
+          "classes": "text-right",
+          "hasFilter": true,
+          "filterText": "Filtrar por pago en esta columna"
+        },
+        {
+          "text": "Segundo pago",
+          "classes": "text-right",
+          "hasFilter": true,
+          "filterText": "Filtrar por pago en esta columna"
+        }
+      ],
+      "rows": [
+        [
+          {
+            "text": "Enero"
+          },
+          {
+            "text": "85€",
+            "classes": "text-right"
+          },
+          {
+            "text": "95€",
+            "classes": "text-right"
+          }
+        ],
+        [
+          {
+            "text": "Febrero"
+          },
+          {
+            "text": "75€",
+            "classes": "text-right"
+          },
+          {
+            "text": "55€",
+            "classes": "text-right"
+          }
+        ],
+        [
+          {
+            "text": "Marzo"
+          },
+          {
+            "text": "165€",
+            "classes": "text-right"
+          },
+          {
+            "text": "125€",
+            "classes": "text-right"
+          }
+        ]
+      ],
+      "classes": "min-w-full"
+    }
+  },
   {
     "name": "tabla con head y selectores",
-    "description": 'Selectores y clases de <code>text-right</code> en columnas numéricas.',
+    "description": "Selectores y clases de <code>text-right</code> en columnas numéricas.",
     "data": {
       "idPrefix": "table-with-head-and-selects",
       "head": [
@@ -694,7 +784,7 @@
   },
   {
     "name": "tabla con columnas sticky",
-    "description": 'Con <code>orderBy</code>, <code>hasCheckboxes</code>, <code>hasFilter</code> y <code>firstCellIsHeader</code>',
+    "description": "Con <code>orderBy</code>, <code>hasCheckboxes</code>, <code>hasFilter</code> y <code>firstCellIsHeader</code>",
     "data": {
       "idPrefix": "table-with-sticky-columns",
       "hasCheckboxes": true,

package/src/templates/components/table-advanced/_template.table-advanced.njk

@@ -76,7 +76,7 @@
               "classes": "-mt-sm mb-0"
             },
             "label": {
-              "text": "Filtrar por esta columna",
+              "text":  item.filterText if item.filterText else "Filtrar en esta columna",
               "classes": "sr-only"
             },
             "id": item.select.id if item.select.id else idSelect,
@@ -97,12 +97,12 @@
               "classes": "mb-0"
             },
             "label": {
-              "text": "Buscar en esta columna",
+              "text": item.filterText if item.filterText else "Filtrar en esta columna",
               "classes": "sr-only"
             },
             "id": idFilter,
             "name": idFilter,
-            "placeholder": "Buscar",
+            "placeholder": item.filterText if item.filterText else "Filtrar",
             "classes": "c-input--sm " + item.filterClasses if item.filterClasses else "c-input--sm",
             "buttonClasses": "m-xs p-0.5 text-xs",
             "attributes": {
@@ -142,11 +142,11 @@
         {% if loop.first and params.firstCellIsHeader %}
         <th scope="row" class="px-base py-xs border-neutral-base border-b-0 border-r text-left font-normal text-sm text-neutral-dark{%- if cell.classes %} {{ cell.classes }}{% endif %}"
           {{- commonAttributes | safe -}}
-        >{{ cell.html | safe if cell.html else cell.text }}</th>
+        >{{ cell.html | filterquotes | safe if cell.html else cell.text }}</th>
         {% else %}
         <td  tabindex="-1" class="px-base py-sm {%- if cell.classes %} {{ cell.classes }}{% endif %}"
           {{- commonAttributes | safe -}}
-        >{{ cell.html | safe if cell.html else cell.text }}</td>
+        >{{ cell.html | filterquotes | safe if cell.html else cell.text }}</td>
         {% endif %}
       {% endfor %}
       </tr>
@@ -155,7 +155,7 @@
     </tbody>
     <tfoot>
       {% for row in params.foot %}
-        {%- set idCheckbox = idPrefix + "-checkbox-" + loop.index0 -%}
+        {%- set idCheckbox = idPrefix + "-tfoot-checkbox-" + loop.index0 -%}
         {% if row %}
       <tr class="border-t-2 border-b border-neutral-base hover:bg-neutral-lighter">
         {% if params.hasCheckboxes %}
@@ -182,11 +182,11 @@
         {% if loop.first and params.firstCellIsHeader %}
         <th scope="row" class="px-base py-xs border-neutral-base border-b-0 border-r text-left font-normal text-sm text-neutral-dark{%- if cell.classes %} {{ cell.classes }}{% endif %}"
           {{- commonAttributes | safe -}}
-        >{{ cell.html | safe if cell.html else cell.text }}</th>
+        >{{ cell.html | filterquotes | safe if cell.html else cell.text }}</th>
         {% else %}
         <td  tabindex="-1" class="px-base py-sm {%- if cell.classes %} {{ cell.classes }}{% endif %}"
           {{- commonAttributes | safe -}}
-        >{{ cell.html | safe if cell.html else cell.text }}</td>
+        >{{ cell.html | filterquotes | safe if cell.html else cell.text }}</td>
         {% endif %}
       {% endfor %}
       </tr>

package/src/templates/components/table-advanced/params.table-advanced.yaml

@@ -57,6 +57,10 @@ params:
     type: boolean
     required: false
     description: If `true`, shows a filter input in head cell.
+  - name: filterText
+    type: string
+    required: false
+    description: Text for sr-only labels and placeholder for filter input in head cell.
   - name: filterClasses
     type: string
     required: false