desy-html 11.2.0 → 12.0.0

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

@@ -4,7 +4,7 @@
   {% if params.icon or params.type %}
   <div class="h-full mr-base">
     {% if params.icon.html %}
-    {{ params.icon.html | safe }}
+    {{ params.icon.html | filterquotes | safe }}
     {% elseif params.type == 'success' %}
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-5 h-5 text-success-dark" aria-label="Éxito" focusable="false" role="img"><path 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" fill="currentColor"/></svg>
     {% elseif params.type == 'alert' %}
@@ -19,32 +19,32 @@
     {% set titleAttributes %}id="{{ params.id }}-title"  class="font-bold pr-base focus:outline-none focus:underline {%- if params.title.classes %} {{ params.title.classes }}{% endif %}" tabindex="-1"{% endset %}
     {% if params.headingLevel == "1" %}
       <h1 {{ titleAttributes | safe }}>
-        {{ params.title.html | safe if params.title.html else params.title.text }}
+        {{ params.title.html | filterquotes | safe if params.title.html else params.title.text }}
       </h1>
     {% elseif params.headingLevel == "2" %}
       <h2 {{ titleAttributes | safe }}>
-        {{ params.title.html | safe if params.title.html else params.title.text }}
+        {{ params.title.html | filterquotes | safe if params.title.html else params.title.text }}
       </h2>
     {% elseif params.headingLevel == "3" %}
       <h3 {{ titleAttributes | safe }}>
-        {{ params.title.html | safe if params.title.html else params.title.text }}
+        {{ params.title.html | filterquotes | safe if params.title.html else params.title.text }}
       </h3>
     {% elseif params.headingLevel == "4" %}
       <h4 {{ titleAttributes | safe }}>
-        {{ params.title.html | safe if params.title.html else params.title.text }}
+        {{ params.title.html | filterquotes | safe if params.title.html else params.title.text }}
       </h4>
     {% elseif params.headingLevel == "5" %}
       <h5 {{ titleAttributes | safe }}>
-        {{ params.title.html | safe if params.title.html else params.title.text }}
+        {{ params.title.html | filterquotes | safe if params.title.html else params.title.text }}
       </h5>
     {% else %}
       <p {{ titleAttributes | safe }}>
-        {{ params.title.html | safe if params.title.html else params.title.text }}
+        {{ params.title.html | filterquotes | safe if params.title.html else params.title.text }}
       </p>
     {% endif %}
     {% if params.description.html %}
       <div {%- if params.description.classes %} class="{{ params.description.classes }}"{% endif %}>
-        {{ params.description.html | safe }}
+        {{ params.description.html | filterquotes | safe }}
       </div>
     {% elseif params.description.text %}
       <p {%- if params.description.classes %} class="{{ params.description.classes }}"{% endif %}>
@@ -56,9 +56,9 @@
         {% for item in params.items %}
         <li>
         {% if item.href %}
-          <a href="{{ item.href }}" class="c-link {% if params.type == "alert" %} c-link--alert{% endif %}" {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ item.html | safe if item.html else item.text }}</a>
+          <a href="{{ item.href }}" class="c-link {% if params.type == "alert" %} c-link--alert{% endif %}" {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ item.html | filterquotes | safe if item.html else item.text }}</a>
         {% else %}
-          {{ item.html | safe if item.html else item.text }}
+          {{ item.html | filterquotes | safe if item.html else item.text }}
         {% endif %}
         </li>
         {% endfor %}
@@ -66,7 +66,7 @@
     {% endif %}
     {% if params.content.html %}
       <div class="{% if params.content.classes %}{{ params.content.classes }}{% else %}text-sm{% endif %}">
-        {{ params.content.html | safe }}
+        {{ params.content.html | filterquotes | safe }}
       </div>
     {% elseif params.content.text %}
       <p class="{% if params.content.classes %}{{ params.content.classes }}{% else %}text-sm{% endif %}">

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

@@ -41,7 +41,7 @@
   },
   {
     "name": "Estilo Select",
-    "description": 'Usa el parámetro <code>"hasSelect": true</code> para mostrar la paginación como un Select en vez de botones.',
+    "description": "Usa el parámetro <code>'hasSelect': true</code> para mostrar la paginación como un Select en vez de botones.",
     "data": {
       "id": "select-style",
       "hasSelect": true,
@@ -116,7 +116,7 @@
   },
   {
     "name": "Con página previa deshabilitada",
-    "description": 'En este ejemplo <code>"hasSelect": true</code> y <code>"hasPrevious": false</code>',
+    "description": "En este ejemplo <code>'hasSelect': true</code> y <code>'hasPrevious': false</code>",
     "data": {
       "id": "with-previous-page-disabled",
       "hasSelect": true,
@@ -160,7 +160,7 @@
   },
   {
     "name": "Sin página previa",
-    "description": 'En este ejemplo <code>"hasSelect": true</code> y <code>"showPrevious": false</code>',
+    "description": "En este ejemplo <code>'hasSelect': true</code> y <code>'showPrevious': false</code>",
     "data": {
       "id": "without-previous-page",
       "hasSelect": true,
@@ -204,7 +204,7 @@
   },
   {
     "name": "Con página primera y última",
-    "description": 'En este ejemplo <code>"hasSelect": true</code>, <code>"showFirst": true</code> y <code>"showLast": true</code>',
+    "description": "En este ejemplo <code>'hasSelect': true</code>, <code>'showFirst': true</code> y <code>'showLast': true</code>",
     "data": {
       "id": "without-previous-page-disabled",
       "hasSelect": true,
@@ -251,7 +251,7 @@
   },
   {
     "name": "Con página primera deshabilitada y última",
-    "description": 'En este ejemplo <code>"hasSelect": true</code>, <code>"hasPrevious": false</code>, <code>"showFirst": true</code> y <code>"hasFirst": false</code>',
+    "description": "En este ejemplo <code>'hasSelect': true</code>, <code>'hasPrevious': false</code>, <code>'showFirst': true</code> y <code>'hasFirst': false</code>",
     "data": {
       "id": "select-style-2",
       "hasSelect": true,
@@ -332,7 +332,7 @@
   },
   {
     "name": "con itemsPerPageSelector",
-    "description": 'Usa el parámetro <code>itemsPerPageSelector</code> para mostrar un select que permite elegir el número de items por página, a la derecha.',
+    "description": "Usa el parámetro <code>itemsPerPageSelector</code> para mostrar un select que permite elegir el número de items por página, a la derecha.",
     "data": {
       "id": "with-items-per-page-selector",
       "idPrefix": "with-items-per-page-selector",

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

@@ -33,7 +33,7 @@
     {% set suffix %}<span class="sr-only">&nbsp;(resultados del {{ loop.index | int * params.itemsPerPage | int }} al {% if ((loop.index | int + 1)  * params.itemsPerPage | int) > ( params.totalItems | int ) %}{{ params.totalItems }}{% else %}{{ (loop.index | int + 1)  * params.itemsPerPage | int }}{% endif %})</span>{% endset %}
     {% if item.selected %}
     {{ componentButton({
-      "html": '<strong>' + prefix | trim + loop.index + suffix | trim + '</strong>',
+      "html": "<strong>" + prefix | trim + loop.index + suffix | trim + "</strong>",
       "classes": "c-button--primary c-button--disabled mb-sm mr-sm",
       "disabled": true,
       "attributes": {
@@ -74,7 +74,7 @@
   <nav {{- commonAttributes | safe }}>
     {% if params.showFirst %}
     {{ componentButton({
-      "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" class="self-center h-2.5 w-2.5 mr-2" aria-hidden="true" focusable="false"><g><path d="M10.42,12a2.64,2.64,0,0,1,.77-1.88L20.73.58a1.77,1.77,0,0,1,2.5,2.5l-8.74,8.74a.27.27,0,0,0,0,.36l8.74,8.74a1.77,1.77,0,0,1-2.5,2.5l-9.54-9.54A2.64,2.64,0,0,1,10.42,12Z" fill="currentColor"></path><path d="M.25,12A2.65,2.65,0,0,1,1,10.12L10.57.58a1.77,1.77,0,0,1,2.5,2.5L4.33,11.82a.25.25,0,0,0,0,.36l8.74,8.74a1.77,1.77,0,0,1-2.5,2.5L1,13.88A2.65,2.65,0,0,1,.25,12Z" fill="currentColor"></path></g></svg>' + prefix + params.firstText + previousSuffix,
+      "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='1em' height='1em' class='self-center h-2.5 w-2.5 mr-2' aria-hidden='true' focusable='false'><g><path d='M10.42,12a2.64,2.64,0,0,1,.77-1.88L20.73.58a1.77,1.77,0,0,1,2.5,2.5l-8.74,8.74a.27.27,0,0,0,0,.36l8.74,8.74a1.77,1.77,0,0,1-2.5,2.5l-9.54-9.54A2.64,2.64,0,0,1,10.42,12Z' fill='currentColor'></path><path d='M.25,12A2.65,2.65,0,0,1,1,10.12L10.57.58a1.77,1.77,0,0,1,2.5,2.5L4.33,11.82a.25.25,0,0,0,0,.36l8.74,8.74a1.77,1.77,0,0,1-2.5,2.5L1,13.88A2.65,2.65,0,0,1,.25,12Z' fill='currentColor'></path></g></svg>" + prefix + params.firstText + previousSuffix,
       "disabled": disabledFirst,
       "classes": "c-button--sm c-button--transparent mr-xs",
       "attributes": {
@@ -84,7 +84,7 @@
     {% endif %}
     {% if params.showPrevious != false %}
     {{ componentButton({
-      "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"  width="1em" height="1em" class="self-center h-2.5 w-2.5 mr-2" aria-hidden="true" focusable="false"><path d="M54.87 71.77a2.5 2.5 0 010-3.54L106 17.07A10 10 0 1091.89 2.93L35.43 59.39a15 15 0 000 21.22l56.46 56.46A10 10 0 10106 122.93z" fill="currentColor" /></svg>' + prefix + params.previousText + previousSuffix,
+      "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'  width='1em' height='1em' class='self-center h-2.5 w-2.5 mr-2' aria-hidden='true' focusable='false'><path d='M54.87 71.77a2.5 2.5 0 010-3.54L106 17.07A10 10 0 1091.89 2.93L35.43 59.39a15 15 0 000 21.22l56.46 56.46A10 10 0 10106 122.93z' fill='currentColor' /></svg>" + prefix + params.previousText + previousSuffix,
       "disabled": disabledPrevious,
       "classes": "c-button--sm c-button--transparent mr-xs",
       "attributes": {

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": [
@@ -355,7 +355,7 @@
   },
   {
     "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.',
+    "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": [
@@ -445,7 +445,7 @@
   },
   {
     "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": [
@@ -784,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,