desy-html 11.2.0 → 12.0.0

package/src/templates/components/menu-vertical/_template.menu-vertical.njk

@@ -17,17 +17,17 @@
       {% if item.href %}
       <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black {%- if params.hasUnderline %} underline{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %} {%- if not item.disabled %} hover:text-primary-base hover:underline{% endif %} {%- if item.disabled %} no-underline pointer-events-none{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %}{%- if item.active %} aria-current="page"{% endif %} {% if item.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {% if item.target %} target="{{ item.target }}"{% endif %}{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
         {% 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 %}
       </a>
       {% else %}
       <span {%- if id %} id="{{ id }}"{% endif %} class="block px-xs {%- if item.classes %} {{ item.classes }}{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %}{%- if item.active %} aria-current="page"{% endif %} {% if item.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
         {% 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 %}
       </span>
       {% endif %}
@@ -45,17 +45,17 @@
             {% if subitem.href %}
           <a {%- if subId %} id="{{ subId }}"{% endif %} href="{{ subitem.href }}" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black {%- if params.hasUnderline %} underline{% endif %} {%- if subitem.classes %} {{ subitem.classes }}{% endif %} {%- if subitem.disabled %} no-underline pointer-events-none{% endif %}" {%- if subitem.title %} title="{{ subitem.title }}"{% endif %}{%- if subitem.active %} aria-current="page"{% endif %} {% if subitem.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {% if subitem.target %} target="{{ subitem.target }}"{% endif %}{%- for attribute, value in subitem.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
             {% if subitem.active %}
-            <strong class="font-bold">{{ subitem.html | safe if subitem.html else subitem.text }}</strong>
+            <strong class="font-bold">{{ subitem.html | filterquotes | safe if subitem.html else subitem.text }}</strong>
             {% else %}
-            {{ subitem.html | safe if subitem.html else subitem.text }}
+            {{ subitem.html | filterquotes | safe if subitem.html else subitem.text }}
             {% endif %}
           </a>
             {% else %}
           <span {%- if subId %} id="{{ subId }}"{% endif %} class="block px-xs {%- if subitem.classes %} {{ subitem.classes }}{% endif %}" {%- if subitem.title %} title="{{ subitem.title }}"{% endif %} {%- if subitem.active %} aria-current="page"{% endif %} {%- if subitem.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {%- for attribute, value in subitem.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
             {% if subitem.active %}
-            <strong class="font-bold">{{ subitem.html | safe if subitem.html else subitem.text }}</strong>
+            <strong class="font-bold">{{ subitem.html | filterquotes | safe if subitem.html else subitem.text }}</strong>
             {% else %}
-            {{ subitem.html | safe if subitem.html else subitem.text }}
+            {{ subitem.html | filterquotes | safe if subitem.html else subitem.text }}
             {% endif %}
           </span>
             {% endif %}
@@ -70,7 +70,7 @@
       </ul>
       {% elseif item.sub.html %}
         <div class="mb-base px-xs origin-top-left text-sm text-neutral-dark {%- if item.sub.classes %} {{ item.sub.classes }}{% endif %}" id="{{ subId }}">
-          {{ item.sub.html | safe }}
+          {{ item.sub.html | filterquotes | safe }}
         </div>
       {% endif %}
     </li>

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

@@ -6,7 +6,7 @@
     "data": {
       "id": "with-all-parent-items-1",
       "idPrefix": "parent-example",
-      "ariaLabel":"Menubar descrición",
+      "ariaLabel": "Menubar descrición",
       "items": [
         {
           "text": "Menuitem",
@@ -158,7 +158,7 @@
     "data": {
       "id": "with-all-parent-items-2",
       "idPrefix": "parent-example",
-      "ariaLabel":"Menubar descrición",
+      "ariaLabel": "Menubar descrición",
       "items": [
         {
           "text": "Menuitem",
@@ -312,7 +312,7 @@
     "data": {
       "id": "mi-menubar",
       "idPrefix": "parent-example",
-      "ariaLabel":"Menubar descrición",
+      "ariaLabel": "Menubar descrición",
       "items": [
         {
           "text": "Menuitem",
@@ -464,7 +464,7 @@
     "data": {
       "id": "with-disabled",
       "idPrefix": "disabled-example",
-      "ariaLabel":"Menubar descrición",
+      "ariaLabel": "Menubar descrición",
       "items": [
         {
           "text": "Menuitem",
@@ -618,7 +618,7 @@
     "data": {
       "id": "with-active",
       "idPrefix": "active-example",
-      "ariaLabel":"Menubar descrición",
+      "ariaLabel": "Menubar descrición",
       "items": [
         {
           "text": "Menuitem",
@@ -773,7 +773,7 @@
     "data": {
       "id": "large-items",
       "idPrefix": "large-example",
-      "ariaLabel":"Menubar descrición",
+      "ariaLabel": "Menubar descrición",
       "items": [
         {
           "text": "Menuitem",
@@ -927,7 +927,7 @@
     "data": {
       "id": "small-items",
       "idPrefix": "small-example",
-      "ariaLabel":"Menubar descrición",
+      "ariaLabel": "Menubar descrición",
       "items": [
         {
           "text": "Menuitem",
@@ -1081,7 +1081,7 @@
     "data": {
       "id": "transparent-items",
       "idPrefix": "transparent-example",
-      "ariaLabel":"Menubar descrición",
+      "ariaLabel": "Menubar descrición",
       "items": [
         {
           "text": "Menuitem",
@@ -1235,7 +1235,7 @@
     "data": {
       "id": "header-items",
       "idPrefix": "header-example",
-      "ariaLabel":"Menubar descrición",
+      "ariaLabel": "Menubar descrición",
       "items": [
         {
           "text": "Menuitem",
@@ -1386,11 +1386,11 @@
   },
   {
     "name": "Ejemplo de filtros",
-    "description": 'Usa el Menubar sobre una lista de items para filtrarlos u ordenarlos. Usa la clase modificadora <code>.c-menubar--last-right</code> para posicionar el último item a la derecha en breakpoints grandes.',
+    "description": "Usa el Menubar sobre una lista de items para filtrarlos u ordenarlos. Usa la clase modificadora <code>.c-menubar--last-right</code> para posicionar el último item a la derecha en breakpoints grandes.",
     "data": {
       "id": "filter-items",
       "idPrefix": "filter-example",
-      "ariaLabel":"Menubar descrición",
+      "ariaLabel": "Menubar descrición",
       "items": [
         {
           "text": "Estados y trámites",
@@ -1418,7 +1418,7 @@
               },
               {
                 "role": "none",
-                "html": '<span class="inline-block px-base py-sm text-neutral-dark focus:outline-none">Estados</span>'
+                "html": "<span class='inline-block px-base py-sm text-neutral-dark focus:outline-none'>Estados</span>"
               },
               {
                 "role": "group",
@@ -1455,7 +1455,7 @@
               },
               {
                 "role": "none",
-                "html": '<span class="inline-block px-base py-sm text-neutral-dark focus:outline-none">Plazos (sólo aplican a convocatorias y procesos)</span>'
+                "html": "<span class='inline-block px-base py-sm text-neutral-dark focus:outline-none'>Plazos (sólo aplican a convocatorias y procesos)</span>"
               },
               {
                 "role": "group",
@@ -1607,7 +1607,7 @@
                   },
                   {
                     "role": "menuitemradio",
-                    "html": 'Número de servicio (de mayor a menor)'
+                    "html": "Número de servicio (de mayor a menor)"
                   }
                 ]
               }
@@ -1621,11 +1621,11 @@
   },
   {
     "name": "con label",
-    "description": 'Con label que explica que este menú actúa sobre otro elemento. Puedes usar las clases <code>.sr-only</code> para que se vea sólo en lectores de pantalla.',
+    "description": "Con label que explica que este menú actúa sobre otro elemento. Puedes usar las clases <code>.sr-only</code> para que se vea sólo en lectores de pantalla.",
     "data": {
       "id": "with-label-items",
       "idPrefix": "label-example",
-      "ariaLabel":"Menubar descrición",
+      "ariaLabel": "Menubar descrición",
       "label": {
         "text": "Esto es un label"
       },

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

@@ -26,14 +26,14 @@
       <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button {%- if item.classes %} {{ item.classes }}{% endif %} {%- if item.disabled %} c-menubar__button--disabled{% endif %} {%- if item.active %} c-menubar__button--has-selection{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %} {% if item.disabled %} aria-disabled="true" tabindex="-1"{% endif %}  id="{{ id }}"
         {%- if item.sub.html %} data-aria-controls="{{ subId }}"{% endif %}
         {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-        <span class="inline-flex self-center max-w-xs align-middle truncate">{{ item.html | safe if item.html else item.text }}</span>
+        <span class="inline-flex self-center max-w-xs align-middle truncate">{{ item.html | filterquotes | safe if item.html else item.text }}</span>
         {# Indentation is intentional to output HTML nicely #}
         {{- iconHtml | safe | trim if iconHtml -}}
       </a>
       {% endif %}
       {% if item.href and not item.sub %}
       <a role="menuitem" {%- if id %} id="{{ id }}"{% endif %} {%- if item.href %} href="{{ item.href }}"{% endif %} class="c-menubar__button {%- if item.classes %} {{ item.classes }}{% endif %} {%- if item.disabled %} c-menubar__button--disabled{% endif %} {%- if item.active %} c-menubar__button--has-selection{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %} {% if item.disabled %} disabled="disabled" aria-disabled="true" tabindex="-1"{% endif %} {% if item.target %} target="{{ item.target }}"{% endif %}{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-        {{ item.html | safe if item.html else item.text }}
+        {{ item.html | filterquotes | safe if item.html else item.text }}
       </a>
       {% endif %}
       {% if item.sub.items %}
@@ -48,7 +48,7 @@
               {%- endif %}
         {% if subitem.role == 'none' %}
         <li role="none" id="{{ subId }}" data-option="{{ subId }}">
-          {{ subitem.html | safe if subitem.html else subitem.text }}
+          {{ subitem.html | filterquotes | safe if subitem.html else subitem.text }}
         </li>
         {% elseif subitem.role == 'group' %}
         <li role="none">
@@ -62,7 +62,7 @@
                     {%- set subsubId = "sub-" + subId + "-" + loop.index -%}
                 {%- endif %}
             <li {%- if subsubitem.role %} role="{{ subsubitem.role}}"{% endif %}{% if subsubitem.role == 'menuitemcheckbox' or subsubitem.role == 'menuitemradio' %} aria-checked="{% if subsubitem.checked %}{{ subsubitem.checked }}{% else %}false{% endif %}"{% endif %} class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="{{ subsubId }}" data-option="{{ subsubId }}">
-              {{ subsubitem.html | safe if subsubitem.html else subsubitem.text }}
+              {{ subsubitem.html | filterquotes | safe if subsubitem.html else subsubitem.text }}
             </li>
               {% endif %}
            {% endfor %}
@@ -70,11 +70,11 @@
         </li>
         {% elseif subitem.role == 'menuitem' %}
         <li role="menuitem" id="{{ subId }}" data-option="{{ subId }}" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none" >
-          {{ subitem.html | safe if subitem.html else subitem.text }}
+          {{ subitem.html | filterquotes | safe if subitem.html else subitem.text }}
         </li>
         {% elseif subitem.role == 'menuitemcheckbox' %}
         <li role="menuitemcheckbox" aria-checked="{% if subitem.checked %}{{ subitem.checked }}{% else %}false{% endif %}" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="{{ subId }}" data-option="{{ subId }}">
-          {{ subitem.html | safe if subitem.html else subitem.text }}
+          {{ subitem.html | filterquotes | safe if subitem.html else subitem.text }}
         </li>
         {% elseif subitem.role == 'separator' %}
         <li role="separator" id="{{ subId }}" class="my-sm border-b border-neutral-base">
@@ -95,7 +95,7 @@
   {% if params.label  %}
   <div id="{{ params.id }}-label" class="mb-sm {%- if params.label.classes %} {{ params.label.classes }}{% endif %}">
     {% if params.label.html %}
-    {{ params.label.html | safe}}
+    {{ params.label.html | filterquotes | safe}}
     {% else %}
     <p>{{ params.label.text }}</p>
     {% endif %}

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

@@ -21,7 +21,7 @@
   },
   {
     "name": "Con Button Loader",
-    "description": 'Si quieres que las acciones muestren un Button loader en vez de un botón normal, utiliza el parámetro <code>"isButtonLoader": true</code>.',
+    "description": "Si quieres que las acciones muestren un Button loader en vez de un botón normal, utiliza el parámetro <code>'isButtonLoader': true</code>.",
     "data": {
       "id": "button-loader-example",
       "title": {
@@ -43,7 +43,7 @@
   },
   {
     "name": "Con encabezado de nivel 3",
-    "description": '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>'headingLevel'</code> para establecer el nivel del encabezado. Por ejemplo: <code>'headingLevel': 3</code> creará un encabezado <code>&lt;h3&gt;</code>.",
     "data": {
       "id": "headinglevel-example",
       "title": {
@@ -64,14 +64,14 @@
   },
   {
     "name": "Con acción secundaria",
-    "description": 'Las acciones primarias deberán ser botones primarios y aparecer a la izquierda. Las acciones secundarias deberán ser botones por defecto y aparecer a la derecha. Si la acción es destructiva, entonces se invierte el orden y la acción principal destructiva aparece a la derecha con el modificador de Botón alerta.',
+    "description": "Las acciones primarias deberán ser botones primarios y aparecer a la izquierda. Las acciones secundarias deberán ser botones por defecto y aparecer a la derecha. Si la acción es destructiva, entonces se invierte el orden y la acción principal destructiva aparece a la derecha con el modificador de Botón alerta.",
     "data": {
       "id": "secondary-action-example",
       "title": {
         "text": "Editar servicio publicado"
       },
       "description": {
-        "html": '<p>Actualmente este servicio está publicado.</p><p>Los cambios realizados no serán visibles hasta que sean validados</p>'
+        "html": "<p>Actualmente este servicio está publicado.</p><p>Los cambios realizados no serán visibles hasta que sean validados</p>"
       },
       "itemsPrimary": [
         {
@@ -81,7 +81,7 @@
       ],
       "itemsSecondary": [
         {
-          "html": 'Cancelar <span class="sr-only">y cerrar la ventana modal</span>'
+          "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>"
         }
       ],
       "isDismissible": true
@@ -96,7 +96,7 @@
         "text": "Editar servicio publicado"
       },
       "description": {
-        "html": '<p>Actualmente este servicio está publicado.</p><p>Los cambios realizados no serán visibles hasta que sean validados</p>'
+        "html": "<p>Actualmente este servicio está publicado.</p><p>Los cambios realizados no serán visibles hasta que sean validados</p>"
       },
       "itemsPrimary": [
         {
@@ -106,11 +106,11 @@
       ],
       "itemsSecondary": [
         {
-          "html": 'Cancelar <span class="sr-only">y cerrar la ventana modal</span>'
+          "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>"
         }
       ],
       "isDismissible": true,
-      "caller": '<div class="prose max-w-auto mx-auto"><p class="text-center text-sm">Para más información, ir a la <a href="#">Página de ayuda</a></p></div>'
+      "caller": "<div class='prose max-w-auto mx-auto'><p class='text-center text-sm'>Para más información, ir a la <a href='#'>Página de ayuda</a></p></div>"
     }
   },
   {
@@ -139,7 +139,7 @@
           "classes": "c-button--transparent"
         },
         {
-          "html": 'Cancelar <span class="sr-only">y cerrar la ventana modal</span>'
+          "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>"
         }
       ],
       "isDismissible": true,
@@ -176,7 +176,7 @@
           "classes": "c-button-loader--transparent c-button-loader--is-loading"
         },
         {
-          "html": 'Cancelar <span class="sr-only">y cerrar la ventana modal</span>',
+          "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>",
           "isButtonLoader": true,
           "state": "is-success",
           "classes": "c-button-loader--is-success"
@@ -199,7 +199,7 @@
       },
       "itemsPrimary": [
         {
-          "html": 'Cancelar <span class="sr-only">y cerrar la ventana modal</span>'
+          "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>"
         }
       ],
       "itemsSecondary": [
@@ -226,7 +226,7 @@
       },
       "itemsPrimary": [
         {
-          "html": 'Cancelar <span class="sr-only">y cerrar la ventana modal</span>'
+          "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>"
         }
       ],
       "itemsSecondary": [
@@ -276,7 +276,7 @@
         "text": "Editar servicio publicado"
       },
       "description": {
-        "html": '<p>Actualmente este servicio está publicado.</p><p>Los cambios realizados no serán visibles hasta que sean validados</p>'
+        "html": "<p>Actualmente este servicio está publicado.</p><p>Los cambios realizados no serán visibles hasta que sean validados</p>"
       },
       "itemsPrimary": [
         {
@@ -286,7 +286,7 @@
       ],
       "itemsSecondary": [
         {
-          "html": 'Cancelar <span class="sr-only">y cerrar la ventana modal</span>'
+          "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>"
         }
       ],
       "isDismissible": true,
@@ -313,7 +313,7 @@
       ],
       "itemsSecondary": [
         {
-          "html": 'Cancelar <span class="sr-only">y cerrar la ventana modal</span>'
+          "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>"
         }
       ],
       "isDismissible": true,
@@ -332,7 +332,7 @@
         "classes": "c-h2 mt-base focus:outline-none focus:underline"
       },
       "description": {
-        "html": '<p>Si el contenido de la modal es muy extenso, hay que alinear los textos a la izquierda para mejorar la accesibilidad.</p><p>Acabas de seleccionar una gran cantidad de archivos. Si ejecutas la acción, el proceso puede tardar varios minutos. Durante el proceso <strong>no cierres la ventana del navegador ni naveges a otra página</strong> en esta pestaña.</p><p>¿Estás seguro de iniciar el proceso ahora?</p>',
+        "html": "<p>Si el contenido de la modal es muy extenso, hay que alinear los textos a la izquierda para mejorar la accesibilidad.</p><p>Acabas de seleccionar una gran cantidad de archivos. Si ejecutas la acción, el proceso puede tardar varios minutos. Durante el proceso <strong>no cierres la ventana del navegador ni naveges a otra página</strong> en esta pestaña.</p><p>¿Estás seguro de iniciar el proceso ahora?</p>",
         "classes": "mb-lg text-left"
       },
       "itemsPrimary": [
@@ -343,12 +343,12 @@
       ],
       "itemsSecondary": [
         {
-          "html": 'Cancelar <span class="sr-only">y cerrar la ventana modal</span>'
+          "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>"
         }
       ],
       "isDismissible": true,
       "icon": {
-        "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" class="block w-16 h-16 text-primary-light" aria-label="Pregunta" focusable="false"><path d="M12,0A12,12,0,1,0,24,12,12,12,0,0,0,12,0Zm0,19a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,12,19Zm1.6-6.08a1,1,0,0,0-.6.92,1,1,0,0,1-2,0,3,3,0,0,1,1.8-2.75A2,2,0,1,0,10,9.25a1,1,0,0,1-2,0,4,4,0,1,1,5.6,3.67Z" fill="currentColor"></path></svg>'
+        "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='1em' height='1em' class='block w-16 h-16 text-primary-light' aria-label='Pregunta' focusable='false'><path d='M12,0A12,12,0,1,0,24,12,12,12,0,0,0,12,0Zm0,19a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,12,19Zm1.6-6.08a1,1,0,0,0-.6.92,1,1,0,0,1-2,0,3,3,0,0,1,1.8-2.75A2,2,0,1,0,10,9.25a1,1,0,0,1-2,0,4,4,0,1,1,5.6,3.67Z' fill='currentColor'></path></svg>"
       }
     }
   }

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

@@ -9,7 +9,7 @@
   {% if params.icon %}
   <div class="flex justify-center p-base">
     {% if params.icon.html %}
-    {{ params.icon.html | safe }}
+    {{ params.icon.html | filterquotes | safe }}
     {% elseif params.icon.type == 'discard' %}
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" class="block w-16 h-16 text-alert-light" focusable="false" aria-hidden="true" role="presentation"><path d="M12,0A12,12,0,1,0,24,12,12,12,0,0,0,12,0ZM5.29,5.29a9.63,9.63,0,0,1,12.23-1,.26.26,0,0,1,0,.4L4.67,17.56a.27.27,0,0,1-.4,0,9.49,9.49,0,0,1,1-12.24ZM18.75,18.76a9.53,9.53,0,0,1-12.23,1,.26.26,0,0,1,0-.4L19.37,6.49a.26.26,0,0,1,.4,0,9.49,9.49,0,0,1-1,12.24Z" fill="currentColor"></path></svg>
     {% elseif params.icon.type == 'delete' %}
@@ -26,27 +26,27 @@
   {% set titleAttributes %}id="{{ labelledId }}" class="{% if params.title.classes %}{{ params.title.classes }}{% else %}c-h2 px-base text-center focus:outline-none focus:underline{% 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 %}
   <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>
   {% endif %}
   {% if params.description.text %}
@@ -55,7 +55,7 @@
   </p>
   {% elseif params.description.html %}
   <div class="{% if params.description.classes %}{{ params.description.classes }}{% else %}c-paragraph-base my-base text-center{% endif %}">
-    {{ params.description.html | safe }}
+    {{ params.description.html | filterquotes | safe }}
   </div>
   {% endif %}
   {% if caller %}

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

@@ -65,7 +65,7 @@
   },
   {
     "name": "con item activo",
-    "description": 'Añade <code>active: true</code> a un item para mostrarlo activo inicialmente. También puedes usar con javascript la función global <code>activateItemNav(elementMenu, idItemSeleccionado)</code> para seleccionar un item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemNav("mi-menu", "nav-with-active-item-3")</code> para desactivar el item actual y activar el tercer item de este ejemplo.',
+    "description": "Añade <code>active: true</code> a un item para mostrarlo activo inicialmente. También puedes usar con javascript la función global <code>activateItemNav(elementMenu, idItemSeleccionado)</code> para seleccionar un item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemNav('mi-menu', 'nav-with-active-item-3')</code> para desactivar el item actual y activar el tercer item de este ejemplo.",
     "data": {
       "idPrefix": "nav-with-active-item",
       "items": [
@@ -219,15 +219,15 @@
       "items": [
         {
           "href": "#",
-          "html": '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline mr-sm" aria-label="Archivo" focusable="false" role="img"><g id="new-file--empty-common-file-content"><path id="Subtract" fill="currentColor" fill-rule="evenodd" d="M7.875 0H2.5C2.10218 0 1.72064 0.158035 1.43934 0.43934C1.15804 0.720644 1 1.10218 1 1.5V12.5C1 12.8978 1.15804 13.2794 1.43934 13.5607C1.72064 13.842 2.10217 14 2.5 14H11.5C11.8978 14 12.2794 13.842 12.5607 13.5607C12.842 13.2794 13 12.8978 13 12.5V5.125H8.5C8.15482 5.125 7.875 4.84518 7.875 4.5V0ZM12.5821 3.875L9.125 0.417893V3.875H12.5821Z" clip-rule="evenodd"></path></g></svg> Opción 1'
+          "html": "<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 14' width='1em' height='1em' class='inline-block align-baseline mr-sm' aria-label='Archivo' focusable='false' role='img'><g id='new-file--empty-common-file-content'><path id='Subtract' fill='currentColor' fill-rule='evenodd' d='M7.875 0H2.5C2.10218 0 1.72064 0.158035 1.43934 0.43934C1.15804 0.720644 1 1.10218 1 1.5V12.5C1 12.8978 1.15804 13.2794 1.43934 13.5607C1.72064 13.842 2.10217 14 2.5 14H11.5C11.8978 14 12.2794 13.842 12.5607 13.5607C12.842 13.2794 13 12.8978 13 12.5V5.125H8.5C8.15482 5.125 7.875 4.84518 7.875 4.5V0ZM12.5821 3.875L9.125 0.417893V3.875H12.5821Z' clip-rule='evenodd'></path></g></svg> Opción 1"
         },
         {
           "href": "#",
-          "html": '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"  width="1em" height="1em" class="inline-block align-baseline mr-sm" aria-label="Link" focusable="false" role="img"><g id="link-chain--create-hyperlink-link-make-unlink-connection-chain"><path id="Union-1" fill="currentColor" fill-rule="evenodd" d="M7.6715 2.7426L7.67146 2.74264L6.70715 3.70707C6.31665 4.09761 5.68348 4.09765 5.29293 3.70715C4.90239 3.31665 4.90235 2.68348 5.29285 2.29293L6.25721 1.32847L6.25725 1.32843C8.02849 -0.442809 10.9002 -0.442809 12.6715 1.32843C14.4427 3.09965 14.4427 5.97136 12.6715 7.7426L12.6715 7.74264L11.7071 8.70707C11.3166 9.09761 10.6835 9.09765 10.2929 8.70715C9.90239 8.31664 9.90235 7.68348 10.2929 7.29293L11.2572 6.32847L11.2572 6.32843C12.2474 5.33824 12.2474 3.73283 11.2572 2.74264C10.2671 1.75247 8.66169 1.75245 7.6715 2.7426ZM3.70696 5.29285C4.0975 5.68335 4.09754 6.31652 3.70704 6.70707L2.74268 7.67153L2.74264 7.67157C1.75245 8.66176 1.75245 10.2672 2.74264 11.2574C3.73282 12.2475 5.33819 12.2475 6.32839 11.2574L6.32843 11.2574L7.29274 10.2929C7.68324 9.90239 8.31641 9.90235 8.70696 10.2929C9.0975 10.6834 9.09754 11.3165 8.70704 11.7071L7.74268 12.6715L7.74264 12.6716C5.9714 14.4428 3.09966 14.4428 1.32843 12.6716C-0.442796 10.9003 -0.442809 8.02864 1.32839 6.2574L1.32843 6.25736L2.29274 5.29293C2.68324 4.90239 3.31641 4.90235 3.70696 5.29285ZM9.20711 6.20711C9.59763 5.81658 9.59763 5.18342 9.20711 4.79289C8.81658 4.40237 8.18342 4.40237 7.79289 4.79289L4.79289 7.79289C4.40237 8.18342 4.40237 8.81658 4.79289 9.20711C5.18342 9.59763 5.81658 9.59763 6.20711 9.20711L9.20711 6.20711Z" clip-rule="evenodd"></path></g></svg> Opción 2'
+          "html": "<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 14'  width='1em' height='1em' class='inline-block align-baseline mr-sm' aria-label='Link' focusable='false' role='img'><g id='link-chain--create-hyperlink-link-make-unlink-connection-chain'><path id='Union-1' fill='currentColor' fill-rule='evenodd' d='M7.6715 2.7426L7.67146 2.74264L6.70715 3.70707C6.31665 4.09761 5.68348 4.09765 5.29293 3.70715C4.90239 3.31665 4.90235 2.68348 5.29285 2.29293L6.25721 1.32847L6.25725 1.32843C8.02849 -0.442809 10.9002 -0.442809 12.6715 1.32843C14.4427 3.09965 14.4427 5.97136 12.6715 7.7426L12.6715 7.74264L11.7071 8.70707C11.3166 9.09761 10.6835 9.09765 10.2929 8.70715C9.90239 8.31664 9.90235 7.68348 10.2929 7.29293L11.2572 6.32847L11.2572 6.32843C12.2474 5.33824 12.2474 3.73283 11.2572 2.74264C10.2671 1.75247 8.66169 1.75245 7.6715 2.7426ZM3.70696 5.29285C4.0975 5.68335 4.09754 6.31652 3.70704 6.70707L2.74268 7.67153L2.74264 7.67157C1.75245 8.66176 1.75245 10.2672 2.74264 11.2574C3.73282 12.2475 5.33819 12.2475 6.32839 11.2574L6.32843 11.2574L7.29274 10.2929C7.68324 9.90239 8.31641 9.90235 8.70696 10.2929C9.0975 10.6834 9.09754 11.3165 8.70704 11.7071L7.74268 12.6715L7.74264 12.6716C5.9714 14.4428 3.09966 14.4428 1.32843 12.6716C-0.442796 10.9003 -0.442809 8.02864 1.32839 6.2574L1.32843 6.25736L2.29274 5.29293C2.68324 4.90239 3.31641 4.90235 3.70696 5.29285ZM9.20711 6.20711C9.59763 5.81658 9.59763 5.18342 9.20711 4.79289C8.81658 4.40237 8.18342 4.40237 7.79289 4.79289L4.79289 7.79289C4.40237 8.18342 4.40237 8.81658 4.79289 9.20711C5.18342 9.59763 5.81658 9.59763 6.20711 9.20711L9.20711 6.20711Z' clip-rule='evenodd'></path></g></svg> Opción 2"
         },
         {
           "href": "#",
-          "html": '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline mr-sm" aria-label="Solicitud" focusable="false" role="img"><g id="clipboard-text--edition-form-task-checklist-edit-clipboard"><path id="Union-2" fill="currentColor" fill-rule="evenodd" d="M5.5 0C4.94772 0 4.5 0.447716 4.5 1V1.5C4.5 2.05229 4.94772 2.5 5.5 2.5H8.5C9.05229 2.5 9.5 2.05229 9.5 1.5V1C9.5 0.447715 9.05229 0 8.5 0H5.5ZM2.75 1H3.25V1.5C3.25 2.74264 4.25736 3.75 5.5 3.75H8.5C9.74264 3.75 10.75 2.74264 10.75 1.5V1H11.25C12.0784 1 12.75 1.67157 12.75 2.5V12.5C12.75 13.3284 12.0784 14 11.25 14H2.75C1.92157 14 1.25 13.3284 1.25 12.5V2.5C1.25 1.67157 1.92157 1 2.75 1ZM3.875 8.50049C3.875 8.15531 4.15482 7.87549 4.5 7.87549H9.5C9.84518 7.87549 10.125 8.15531 10.125 8.50049C10.125 8.84567 9.84518 9.12549 9.5 9.12549H4.5C4.15482 9.12549 3.875 8.84567 3.875 8.50049ZM4.5 10.3755C4.15482 10.3755 3.875 10.6553 3.875 11.0005C3.875 11.3457 4.15482 11.6255 4.5 11.6255H9.5C9.84518 11.6255 10.125 11.3457 10.125 11.0005C10.125 10.6553 9.84518 10.3755 9.5 10.3755H4.5Z" clip-rule="evenodd"></path></g></svg> Opción 3'
+          "html": "<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 14' width='1em' height='1em' class='inline-block align-baseline mr-sm' aria-label='Solicitud' focusable='false' role='img'><g id='clipboard-text--edition-form-task-checklist-edit-clipboard'><path id='Union-2' fill='currentColor' fill-rule='evenodd' d='M5.5 0C4.94772 0 4.5 0.447716 4.5 1V1.5C4.5 2.05229 4.94772 2.5 5.5 2.5H8.5C9.05229 2.5 9.5 2.05229 9.5 1.5V1C9.5 0.447715 9.05229 0 8.5 0H5.5ZM2.75 1H3.25V1.5C3.25 2.74264 4.25736 3.75 5.5 3.75H8.5C9.74264 3.75 10.75 2.74264 10.75 1.5V1H11.25C12.0784 1 12.75 1.67157 12.75 2.5V12.5C12.75 13.3284 12.0784 14 11.25 14H2.75C1.92157 14 1.25 13.3284 1.25 12.5V2.5C1.25 1.67157 1.92157 1 2.75 1ZM3.875 8.50049C3.875 8.15531 4.15482 7.87549 4.5 7.87549H9.5C9.84518 7.87549 10.125 8.15531 10.125 8.50049C10.125 8.84567 9.84518 9.12549 9.5 9.12549H4.5C4.15482 9.12549 3.875 8.84567 3.875 8.50049ZM4.5 10.3755C4.15482 10.3755 3.875 10.6553 3.875 11.0005C3.875 11.3457 4.15482 11.6255 4.5 11.6255H9.5C9.84518 11.6255 10.125 11.3457 10.125 11.0005C10.125 10.6553 9.84518 10.3755 9.5 10.3755H4.5Z' clip-rule='evenodd'></path></g></svg> Opción 3"
         }
       ],
       "attributes": {
@@ -238,7 +238,7 @@
   },
   {
     "name": "con idPrefix",
-    "description": 'Mostrar código para ver el <code>idPrefix</code> aplicado.',
+    "description": "Mostrar código para ver el <code>idPrefix</code> aplicado.",
     "data": {
       "idPrefix": "site-menu-item-1",
       "items": [
@@ -270,7 +270,7 @@
   },
   {
     "name": "con ids individuales",
-    "description": 'Mostrar código para ver los <code>id</code> aplicados.',
+    "description": "Mostrar código para ver los <code>id</code> aplicados.",
     "data": {
       "idPrefix": "nav-with-individual-ids",
       "items": [
@@ -367,7 +367,7 @@
   },
   {
     "name": "Sin nav",
-    "description": 'Usa <code>"hasNav": false</code> si el Nav se abre con un Dropdown. No se usará el tag <code>&lt;nav&gt;</code>, sólo un simple <code>&lt;ul&gt;</code>, asumiendo que rodearás a tu componente manualmente con un <code>&lt;nav&gt;</code> personalizado con su propio <code>aria-label</code> si es necesario. También podemos usar clases para controlar la anchura del nav dentro del Dropdown.',
+    "description": "Usa <code>'hasNav': false</code> si el Nav se abre con un Dropdown. No se usará el tag <code>&lt;nav&gt;</code>, sólo un simple <code>&lt;ul&gt;</code>, asumiendo que rodearás a tu componente manualmente con un <code>&lt;nav&gt;</code> personalizado con su propio <code>aria-label</code> si es necesario. También podemos usar clases para controlar la anchura del nav dentro del Dropdown.",
     "data": {
       "hasNav": false,
       "idPrefix": "site-menu-item-2",

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

@@ -21,9 +21,9 @@
 <li>
   <a href="{{ item.href }}" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black{%- if item.classes %} {{ item.classes }}{% endif -%} {%- if item.disabled %} pointer-events-none{% endif -%}" {%- if item.disabled %} aria-disabled="true" tabindex="-1"{% endif -%} {%- if item.target %} target="{{ item.target }}"{% endif %}  {% if item.active %} aria-current="page"{% endif %}{{- commonItemAttributes | safe }}>
       {% 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 %}
       {% if item.disabled %}
       <svg viewBox="0 0 140 140" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" class="inline-block align-middle flex-initial ml-sm text-neutral-base fill-current" aria-hidden="true" focusable="false" ><path d="M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z"/></svg>

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

@@ -13,7 +13,7 @@
     "name": "por defecto con html",
     "data": {
       "title":{
-        "html": "Las <a href=\" # \" class=\" c-link \">entidades beneficiarias</a> deberán tener su sede y actividad principal en Aragón."
+        "html": "Las <a href=' # ' class=' c-link '>entidades beneficiarias</a> deberán tener su sede y actividad principal en Aragón."
       },
       "id": "default-with-html"
     }
@@ -25,7 +25,7 @@
         "html": "El documento se ha cargado correctamente"
       },
       "description":{
-        "html": '<p>Documento acreditativo de <em class=\" italic \">registro de alta de la asociación</em> puede verse publicado ya.</p>'
+        "html": "<p>Documento acreditativo de <em class=\" italic \">registro de alta de la asociación</em> puede verse publicado ya.</p>"
       },
       "id": "with-description"
     }
@@ -37,7 +37,7 @@
         "html": "El documento se ha cargado correctamente"
       },
       "content":{
-        "html": '<p>Documento acreditativo de <em class=\" italic \">registro de alta de la asociación</em> puede verse publicado ya.</p>'
+        "html": "<p>Documento acreditativo de <em class=\" italic \">registro de alta de la asociación</em> puede verse publicado ya.</p>"
       },
       "id": "with-content"
     }
@@ -106,7 +106,7 @@
         "text": "ATENCIÓN: Debido a la situación por Covid-19, pide cita previa para acudir a una de nuestras oficinas."
       },
       "description":{
-        "html": "<a class=\" c-link text-sm \" href=\" # \">Pedir cita previa</a> "
+        "html": "<a class=' c-link text-sm ' href=' # '>Pedir cita previa</a> "
       },
       "type": "info",
       "id": "type-info"
@@ -114,7 +114,7 @@
   },
   {
     "name": "con botón de cerrar",
-    "description": 'Usa el parámetro <code>"isDismissible": true</code>',
+    "description": "Usa el parámetro <code>'isDismissible': true</code>",
     "data": {
       "title": {
         "text": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut distinctio error non, reiciendis repudiandae reprehenderit minima quia laboriosam voluptate, quo veniam expedita possimus ex nam consequuntur autem eveniet, saepe ea."
@@ -125,7 +125,7 @@
   },
   {
     "name": "Cerrar la notificación con JavaScript",
-    "description": 'Puedes usar con javascript la función global <code>closeItemNotification(element)</code>, para cerrar la notificación. Ej: Abre la consola del navegador y escribe <code>closeItemNotification("with-close-button-js")</code> para cerrar la notificación. Es necesario usar el parámetro <code>"isDismissible": true</code>',
+    "description": "Puedes usar con javascript la función global <code>closeItemNotification(element)</code>, para cerrar la notificación. Ej: Abre la consola del navegador y escribe <code>closeItemNotification('with-close-button-js')</code> para cerrar la notificación. Es necesario usar el parámetro <code>'isDismissible': true</code>",
     "data": {
       "title": {
         "text": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut distinctio error non, reiciendis repudiandae reprehenderit minima quia laboriosam voluptate, quo veniam expedita possimus ex nam consequuntur autem eveniet, saepe ea."
@@ -141,10 +141,10 @@
         "text": "Acaba de publicarse la lista de admitidos y excluidos de la convocatoria publicado en el BOA"
       },
       "description":{
-        "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 140 140" width="1em" height="1em" class="w-8 h-8" aria-label="Atención" 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>'
+        "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-8 h-8' aria-label='Atención' 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>"
       },
       "id": "with-custom-icon",
       "classes": "border-neutral-dark bg-neutral-lighter"
@@ -152,7 +152,7 @@
   },
    {
     "name": "Con encabezado",
-    "description": 'Usa el parámetro <code>"headingLevel"</code> para establecer el nivel del encabezado. En este ejemplo: <code>"headingLevel": 3</code> creará un encabezado <code>&lt;h3&gt;</code>.',
+    "description": "Usa el parámetro <code>'headingLevel'</code> para establecer el nivel del encabezado. En este ejemplo: <code>'headingLevel': 3</code> creará un encabezado <code>&lt;h3&gt;</code>.",
     "data": {
       "headingLevel": 3,
       "title": {