desy-html 11.2.0 → 12.0.0

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

@@ -14,7 +14,7 @@ text-neutral-dark {{ params.classes if params.classes }}"
               {% if item.text or item.html %}
               <li class="mb-xs">
                 <a class="c-link font-semibold" href="{{ item.href }}"{% 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>
               </li>
               {% endif %}
@@ -36,7 +36,7 @@ text-neutral-dark {{ params.classes if params.classes }}"
             {% if item.text or item.html %}
               <li class="mb-sm mr-base">
                 <a class="c-link font-semibold" href="{{ item.href }}"{% 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>
               </li>
             {% endif %}
@@ -45,14 +45,14 @@ text-neutral-dark {{ params.classes if params.classes }}"
         {% endif %}
         {% if params.meta.text or params.meta.html %}
         <div class="mb-sm">
-          <p>{{ params.meta.html | safe if params.meta.html else params.meta.text }}</p>
+          <p>{{ params.meta.html | filterquotes | safe if params.meta.html else params.meta.text }}</p>
         </div>
         {% endif %}
         {% endif %}
         {% if params.description %}
         <h2 class="sr-only">{{ params.description.visuallyHiddenTitle | default("Acerca de") }}</h2>
         {% if params.description.text or params.description.html %}
-          {{ params.description.html | safe if params.description.html else params.description.text }}
+          {{ params.description.html | filterquotes | safe if params.description.html else params.description.text }}
         {% endif %}
         {% else %}
         <div>
@@ -81,7 +81,7 @@ text-neutral-dark {{ params.classes if params.classes }}"
         {% if not params.noLogo %}
           <div {%- if params.logo.containerClasses %} class="{{ params.logo.containerClasses }}"{% endif %}>
             {% if params.logo.html %}
-              {{ params.logo.html | safe }}
+              {{ params.logo.html | filterquotes | safe }}
             {% else %}
               <p><a href="{%- if params.urlFeder or params.logo.url %}{%- if params.logo.url %} {{ params.logo.url }} {%- else -%} {{ params.urlFeder }}{% endif %} {%- else -%} https://www.aragon.es/-/fondos-europeos-aragon {% endif %}" class="inline-block text-sm c-link no-underline" title="Más información sobre los Fondos Europeos">
                 {% if params.logo.type == 'UE' %}
@@ -104,7 +104,7 @@ text-neutral-dark {{ params.classes if params.classes }}"
         {% if params.icon %}
           <div class="{% if params.icon.containerClasses %}{{ params.icon.containerClasses }}{% else %}flex-1{% endif %}">
             {% if params.icon.html %}
-            {{ params.icon.html | safe }}
+            {{ params.icon.html | filterquotes | safe }}
             {% endif %}
           </div>
         {% endif %}

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

@@ -200,7 +200,7 @@
 {% set examples =  [
   {
     "name": "por defecto",
-    "description": 'El menú por defecto de las aplicaciones de la administración digital tiene un logo que enlaza a la página de inicio y un menu principal de navegación. El menu de navegación se oculta en mobile si no se añaden clases a navigation. El logotipo es simple, sin letras, si la app está diseñada para funcionarios. Junto al logo hay un texto que da nombre a la app en la que estamos. Puedes usar con javascript la función global <code>activateItemHeaderNavigation(elementMenu, idItemSeleccionado)</code> para seleccionar un item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemHeaderNavigation("header-nav-item", "page-catalogo")</code> para desactivar el item actual y activar el tercer item del header de la página.',
+    "description": "El menú por defecto de las aplicaciones de la administración digital tiene un logo que enlaza a la página de inicio y un menu principal de navegación. El menu de navegación se oculta en mobile si no se añaden clases a navigation. El logotipo es simple, sin letras, si la app está diseñada para funcionarios. Junto al logo hay un texto que da nombre a la app en la que estamos. Puedes usar con javascript la función global <code>activateItemHeaderNavigation(elementMenu, idItemSeleccionado)</code> para seleccionar un item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemHeaderNavigation('header-nav-item', 'page-catalogo')</code> para desactivar el item actual y activar el tercer item del header de la página.",
     "data": {
       "homepageUrl": "/",
       "idPrefix": "mi-menu",
@@ -235,7 +235,7 @@
   },
   {
     "name": "con navegación personalizada",
-    "description": 'Tras nuestro menú de navegación tenemos <code>customNavigationHtml</code> una zona anidable para poder añadir una navegación personalizada.',
+    "description": "Tras nuestro menú de navegación tenemos <code>customNavigationHtml</code> una zona anidable para poder añadir una navegación personalizada.",
     "data": {
       "homepageUrl": "/",
       "mobileTitle": {
@@ -244,7 +244,7 @@
       "subnav": {
         "text": "Gestor de expedientes"
       },
-      "customNavigationHtml": '<div class="flex flex-wrap flex-1 gap-base">'+ navigationCustom | safe + '</div>'
+      "customNavigationHtml": "<div class='flex flex-wrap flex-1 gap-base'>"+ navigationCustom | safe + "</div>"
     }
   },
   {
@@ -258,7 +258,7 @@
       "subnav": {
         "text": "Gestor de expedientes"
       },
-      "customNavigationHtml": '<div class="relative flex justify-end items-center flex-1 gap-base"><div class="absolute -top-3 right-0 text-black"><a href="#"><svg class="w-5 h-5" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-label="Notificaciones"><path d="M7.25 12.5h-1.5a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5Z" fill="currentColor" transform="scale(3.42857)"/><g transform="scale(3.42857)"><circle cx="10.5" cy="2.5" r="2.5" fill="currentColor"/><path d="M11.5 10a1 1 0 0 1-1-1V6.74a.25.25 0 0 0-.24-.25 4 4 0 0 1-3.76-4 3.43 3.43 0 0 1 .11-.86.12.12 0 0 0 0-.1.15.15 0 0 0-.09 0 4 4 0 0 0-4 4V9a1 1 0 0 1-1 1 .5.5 0 0 0 0 1h10a.5.5 0 0 0 0-1Z" fill="currentColor"/></g></svg></a></div></div>'
+      "customNavigationHtml": "<div class='relative flex justify-end items-center flex-1 gap-base'><div class='absolute -top-3 right-0 text-black'><a href='#'><svg class='w-5 h-5' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' aria-label='Notificaciones'><path d='M7.25 12.5h-1.5a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5Z' fill='currentColor' transform='scale(3.42857)'/><g transform='scale(3.42857)'><circle cx='10.5' cy='2.5' r='2.5' fill='currentColor'/><path d='M11.5 10a1 1 0 0 1-1-1V6.74a.25.25 0 0 0-.24-.25 4 4 0 0 1-3.76-4 3.43 3.43 0 0 1 .11-.86.12.12 0 0 0 0-.1.15.15 0 0 0-.09 0 4 4 0 0 0-4 4V9a1 1 0 0 1-1 1 .5.5 0 0 0 0 1h10a.5.5 0 0 0 0-1Z' fill='currentColor'/></g></svg></a></div></div>"
     }
   },
   {
@@ -305,7 +305,7 @@
   },
   {
     "name": "logo expandido",
-    "description": 'Con el parámetro <code>"expandedLogo": true</code> se muestra el logo del Gobierno de Aragón en formato expandido. Utilizar este logotipo en apps que estén dirigidas al ciudadano y también antes de hacer login en todas las apps.',
+    "description": "Con el parámetro <code>'expandedLogo': true</code> se muestra el logo del Gobierno de Aragón en formato expandido. Utilizar este logotipo en apps que estén dirigidas al ciudadano y también antes de hacer login en todas las apps.",
     "data": {
       "homepageUrl": "/",
       "expandedLogo": true
@@ -429,7 +429,7 @@
         "text": "Gestor de expedientes"
       },
       "dropdown": {
-        "html": '<span class="block text-right">Marta Pérez <br>(Administración)</span>',
+        "html": "<span class='block text-right'>Marta Pérez <br>(Administración)</span>",
         "items": [
           {
           "text": "Perfil",
@@ -453,8 +453,14 @@
       },
       "dropdown": {
         "text": "Marta Pérez",
-        "contentHtml": '<div class="p-base"><dl><dt class="text-base">Marta Pérez</dt><dd class="text-sm text-neutral-dark">Departamento de Ciencia, Universidad y Sociedad del Conocimiento</dd></dl></div>',
-        "classesTooltip": "w-64 max-h-48 overflow-y-auto"
+        "contentHtml": "<div class='p-base'><dl><dt class='text-base'>Marta Pérez</dt><dd class='text-sm text-neutral-dark'>Departamento de Ciencia, Universidad y Sociedad del Conocimiento</dd></dl></div>",
+        "classesTooltip": "w-64 max-h-48 overflow-y-auto",
+        "attributes": {
+          "data-aria-haspopup": "dialog",
+          "data-role": "dialog",
+          "data-aria-modal": "false",
+          "data-aria-label": "Información adicional"
+        }
       }
     }
   },

package/src/templates/components/header/_template.header.header__navigation.njk

@@ -15,10 +15,10 @@
       {% endif %}
       {% if item.active %}
 
-      <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="max-w-40 lg:max-w-xs px-3 py-4 text-sm text-black hover:underline truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base" aria-current="page" {%- if item.target %} target="{{ item.target }}"{% endif %}><strong class="font-bold">{{ item.html | safe if item.html else item.text }}</strong></a>
+      <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="max-w-40 lg:max-w-xs px-3 py-4 text-sm text-black hover:underline truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base" aria-current="page" {%- if item.target %} target="{{ item.target }}"{% endif %}><strong class="font-bold">{{ item.html | filterquotes | safe if item.html else item.text }}</strong></a>
       {% else %}
 
-      <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="max-w-40 lg:max-w-xs px-3 py-4 text-sm text-black hover:underline truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base {%- if item.disabled %} opacity-50 pointer-events-none{% endif -%}" {%- if item.disabled %} disabled="disabled" aria-disabled="true" tabindex="-1"{% endif -%}  {%- if item.target %} target="{{ item.target }}"{% endif %}>{{ item.html | safe if item.html else item.text }}</a>
+      <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="max-w-40 lg:max-w-xs px-3 py-4 text-sm text-black hover:underline truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base {%- if item.disabled %} opacity-50 pointer-events-none{% endif -%}" {%- if item.disabled %} disabled="disabled" aria-disabled="true" tabindex="-1"{% endif -%}  {%- if item.target %} target="{{ item.target }}"{% endif %}>{{ item.html | filterquotes | safe if item.html else item.text }}</a>
       {% endif %}
     </li>
     {% endif %}

package/src/templates/components/header/_template.header.header__offcanvasButton.njk

@@ -5,7 +5,7 @@
 				onclick="openDialog('header-offcanvas', this)"
         tabindex="0"
         class="inline-flex items-center px-3 py-4 text-sm text-black focus:outline-none focus:shadow-outline-black focus:bg-warning-base" aria-haspopup="true">
-	  <span id="header-offcanvas-button-text" class="inline-block align-middle text-right">{{ params.html | safe if params.html else params.text }}</span> <svg role="img" aria-label="Cerrado" class="inline-block align-middle" viewBox="0 0 96 96" fill="currentColor" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg>
+	  <span id="header-offcanvas-button-text" class="inline-block align-middle text-right">{{ params.html | filterquotes | safe if params.html else params.text }}</span> <svg role="img" aria-label="Cerrado" class="inline-block align-middle" viewBox="0 0 96 96" fill="currentColor" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg>
 	</button>
 </div>
 <!-- /header__offcanvasButton -->

package/src/templates/components/header/_template.header.header__subnav.njk

@@ -28,7 +28,7 @@
 {% else %}
 <p class="hidden lg:inline-block align-middle px-3 py-4 border-r border-l border-neutral-base text-sm text-black">
   <span class="sr-only">Aplicación actual: </span>
-  {{ params.html | safe if params.html else params.text }}
+  {{ params.html | filterquotes | safe if params.html else params.text }}
 </p>
 {% endif %}
 <!-- /header__subnav -->

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

@@ -63,7 +63,7 @@
               {% if params.mobileTitle %}
               <div class="{{ params.mobileTitle.classes if params.mobileTitle.classes else 'inline-block lg:hidden max-w-full' }}" {%- for attribute, value in params.mobileTitle.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
                 {% if params.mobileTitle.html %}
-                {{ params.mobileTitle.html | safe }}
+                {{ params.mobileTitle.html | filterquotes | safe }}
                 {% else %}
                 <p class="align-middle py-4 text-sm text-black overflow-hidden">{{ params.mobileTitle.text }}</p>
                 {% endif %}
@@ -94,7 +94,7 @@
               "attributes": params.dropdown.attributes
             }) %}
               {% if params.dropdown.contentHtml %}
-                {{ params.dropdown.contentHtml | safe }}
+                {{ params.dropdown.contentHtml | filterquotes | safe }}
               {% else %}
                 {{ componentNav({
                   isMenu: true,

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

@@ -623,7 +623,7 @@
 {% set examples =  [
   {
     "name": "por defecto",
-    "description": 'Esta es la cabecera por defecto para sitios web de submarcas del Gobierno de Aragón. Tiene un título que enlaza a la página de inicio. Puedes usar con javascript la función global <code>activateItemHeaderNavigation(elementMenu, idItemSeleccionado)</code> para seleccionar un item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemHeaderNavigation("header-nav-item", "page-catalogo")</code> para desactivar el item actual y activar el tercer item del header de la página.',
+    "description": "Esta es la cabecera por defecto para sitios web de submarcas del Gobierno de Aragón. Tiene un título que enlaza a la página de inicio. Puedes usar con javascript la función global <code>activateItemHeaderNavigation(elementMenu, idItemSeleccionado)</code> para seleccionar un item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemHeaderNavigation('header-nav-item', 'page-catalogo')</code> para desactivar el item actual y activar el tercer item del header de la página.",
     "data": {
       "title": {
         "homepageUrl": "/",
@@ -851,7 +851,7 @@ Gobierno de Aragón."
         "homepageUrl": "/",
         "text": "Titulo de cabecera"
       },
-      "customNavigationHtml": '<div class="flex flex-wrap flex-1 gap-base">'+ navigationCustom | safe + '</div>'
+      "customNavigationHtml": "<div class='flex flex-wrap flex-1 gap-base'>"+ navigationCustom | safe + "</div>"
     }
   },
   {
@@ -862,7 +862,7 @@ Gobierno de Aragón."
         "homepageUrl": "/",
         "text": "Titulo de cabecera"
       },
-      "customNavigationHtml": '<div class="relative flex justify-end items-center flex-1 gap-base"><div class="absolute -top-5 right-0 text-black"><a href="#"><span class="block p-sm"><svg class="w-5 h-5" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-label="Notificaciones" role="img"><path d="M7.25 12.5h-1.5a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5Z" fill="currentColor" transform="scale(3.42857)"/><g transform="scale(3.42857)"><circle cx="10.5" cy="2.5" r="2.5" fill="currentColor"/><path d="M11.5 10a1 1 0 0 1-1-1V6.74a.25.25 0 0 0-.24-.25 4 4 0 0 1-3.76-4 3.43 3.43 0 0 1 .11-.86.12.12 0 0 0 0-.1.15.15 0 0 0-.09 0 4 4 0 0 0-4 4V9a1 1 0 0 1-1 1 .5.5 0 0 0 0 1h10a.5.5 0 0 0 0-1Z" fill="currentColor"/></g></svg></span></a></div></div>'
+      "customNavigationHtml": "<div class='relative flex justify-end items-center flex-1 gap-base'><div class='absolute -top-5 right-0 text-black'><a href='#'><span class='block p-sm'><svg class='w-5 h-5' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' aria-label='Notificaciones' role='img'><path d='M7.25 12.5h-1.5a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5Z' fill='currentColor' transform='scale(3.42857)'/><g transform='scale(3.42857)'><circle cx='10.5' cy='2.5' r='2.5' fill='currentColor'/><path d='M11.5 10a1 1 0 0 1-1-1V6.74a.25.25 0 0 0-.24-.25 4 4 0 0 1-3.76-4 3.43 3.43 0 0 1 .11-.86.12.12 0 0 0 0-.1.15.15 0 0 0-.09 0 4 4 0 0 0-4 4V9a1 1 0 0 1-1 1 .5.5 0 0 0 0 1h10a.5.5 0 0 0 0-1Z' fill='currentColor'/></g></svg></span></a></div></div>"
     }
   },
   {
@@ -952,7 +952,7 @@ Gobierno de Aragón."
         "text": "Titulo de cabecera"
       },
       "dropdown": {
-        "html": '<span class="block text-right">Marta Pérez <br>(Administración)</span>',
+        "html": "<span class='block text-right'>Marta Pérez <br>(Administración)</span>",
         "items": [
           {
           "text": "Perfil",
@@ -976,8 +976,14 @@ Gobierno de Aragón."
       },
       "dropdown": {
         "text": "Marta Pérez",
-        "contentHtml": '<div class="p-base"><dl><dt class="text-base">Marta Pérez</dt><dd class="text-sm text-neutral-dark">Departamento de Ciencia, Universidad y Sociedad del Conocimiento</dd></dl></div>',
-        "classesTooltip": "w-64 max-h-48 overflow-y-auto"
+        "contentHtml": "<div class='p-base'><dl><dt class='text-base'>Marta Pérez</dt><dd class='text-sm text-neutral-dark'>Departamento de Ciencia, Universidad y Sociedad del Conocimiento</dd></dl></div>",
+        "classesTooltip": "w-64 max-h-48 overflow-y-auto",
+        "attributes": {
+          "data-aria-haspopup": "dialog",
+          "data-role": "dialog",
+          "data-aria-modal": "false",
+          "data-aria-label": "Información adicional"
+        }
       }
     }
   },
@@ -986,14 +992,14 @@ Gobierno de Aragón."
     "description": "Se permite añadir ciertos elementos informativos y funcionales en la derecha de la cabecera. Este ejemplo con buscador en área superior, logo UE, menu de navegación, dropdown en anchuras grandes y menu mobile en pequeñas.",
     "data": {
       "sub": {
-        "customNavigationHtml": '<div class="hidden lg:grid grid-cols-2 lg:grid-cols-4 gap-xl h-full"><div class="col-span-2 lg:col-span-3"></div><div class="col-span-2 lg:col-span-1 flex items-center justify-end">'+ buscador | safe +'</div></div>',
+        "customNavigationHtml": "<div class='hidden lg:grid grid-cols-2 lg:grid-cols-4 gap-xl h-full'><div class='col-span-2 lg:col-span-3'></div><div class='col-span-2 lg:col-span-1 flex items-center justify-end'>"+ buscador | safe +"</div></div>",
         "classes": "hidden lg:block relative -top-32 h-0"
       },
       "title": {
         "homepageUrl": "/",
         "text": "Título de cabecera"
       },
-      "customNavigationHtml": '<div class="flex flex-wrap flex-1 gap-base">'+ navigationCustomAragon | safe + '</div>',
+      "customNavigationHtml": "<div class='flex flex-wrap flex-1 gap-base'>"+ navigationCustomAragon | safe + "</div>",
       "dropdown": {
         "text": "Tamaño de texto",
         "items": [

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

@@ -54,7 +54,7 @@
           <div class="flex lg:flex-1">
             <div>
               {% set headingAttributes %}class="{% if params.title.classes %}{{ params.title.classes }}{% else %} text-2xl lg:text-3xl font-bold{% endif %}"{% endset %}
-              {% set headingContent %}<a href="{{ params.title.homepageUrl | default('/') }}" class="hover:underline focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base focus:text-black" title="Ir a la página de inicio">{{ params.title.html | safe if params.title.html else params.title.text }}</a>{% endset %}
+              {% set headingContent %}<a href="{{ params.title.homepageUrl | default('/') }}" class="hover:underline focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base focus:text-black" title="Ir a la página de inicio">{{ params.title.html | filterquotes | safe if params.title.html else params.title.text }}</a>{% endset %}
               {% if params.headingLevel == "1" %}
               <h1 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h1>
               {% elseif params.headingLevel == "2" %}
@@ -69,7 +69,7 @@
               <h2 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h2>
               {% endif %}
               {% if params.subtitle %}
-              <p class="{% if params.subtitle.classes %}{{ params.subtitle.classes }}{% else -%} text-sm leading-5 lg:text-base lg:leading-6{% endif %}">{{ params.subtitle.html | safe if params.subtitle.html else params.subtitle.text }}</p>
+              <p class="{% if params.subtitle.classes %}{{ params.subtitle.classes }}{% else -%} text-sm leading-5 lg:text-base lg:leading-6{% endif %}">{{ params.subtitle.html | filterquotes | safe if params.subtitle.html else params.subtitle.text }}</p>
               {% endif %}
             </div>
             {{ params.title.customNavigationHtml | safe if params.title.customNavigationHtml }}
@@ -107,7 +107,7 @@
             "attributes": params.dropdown.attributes
           }) %}
             {% if params.dropdown.contentHtml %}
-            {{ params.dropdown.contentHtml | safe }}
+            {{ params.dropdown.contentHtml | filterquotes | safe }}
             {% else %}
             {{ componentNav({
               isMenu: true,

package/src/templates/components/header-mini/_examples.header-mini.njk

@@ -10,7 +10,7 @@
   },
   {
     "name": "Sin clase contenedora",
-    "description": 'Usa el parámetro <code>"hasContainer": false</code> para que el componente no tenga container y se expanda ocupando todo el ancho posible, de forma que el logotipo quede a la derecha de la ventana y no con respecto al contenedor centrado.',
+    "description": "Usa el parámetro <code>'hasContainer': false</code> para que el componente no tenga container y se expanda ocupando todo el ancho posible, de forma que el logotipo quede a la derecha de la ventana y no con respecto al contenedor centrado.",
     "data": {
       "hasContainer": false
     }
@@ -31,11 +31,11 @@
         "classes": "c-button c-button--sm c-button--transparent",
         "offState": {
           "classes": "",
-          "html": '<span class="inline-flex">Menu<svg class="inline-block -mr-2  align-middle -my-px pointer-events-none" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"></path></g></svg></span>'
+          "html": "<span class='inline-flex'>Menu<svg class='inline-block -mr-2  align-middle -my-px pointer-events-none' viewBox='0 0 96 96' aria-hidden='true' fill='currentColor' focusable='false' width='1.5em' height='1.5em'><g><path d='M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z'></path></g></svg></span>"
         },
         "onState": {
           "classes": "",
-          "html": '<span class="inline-flex">Menu<svg class="inline-block -mr-2  align-middle -my-px pointer-events-none rotate-180" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"></path></g></svg></span>'
+          "html": "<span class='inline-flex'>Menu<svg class='inline-block -mr-2  align-middle -my-px pointer-events-none rotate-180' viewBox='0 0 96 96' aria-hidden='true' fill='currentColor' focusable='false' width='1.5em' height='1.5em'><g><path d='M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z'></path></g></svg></span>"
         },
         "attributes": {
           "aria-controls": "megamenu-mini",

package/src/templates/components/header-mini/_template.header-mini.njk

@@ -16,8 +16,8 @@
   <div  {%- if params.containerClasses %} class="{{ params.containerClasses }}"{% endif %}>
     <div class="bg-white border-b border-neutral-base">
       <div class="flex items-center px-base {% if params.hasContainer != false %}container mx-auto{% endif %}">
-        <a href="{{ params.homepageUrl | default('https://www.aragon.es/') }}" class="inline-block pt-2.5 pb-2 text-black focus:outline-none focus:shadow-outline-black" aria-label="Gobierno de Aragón. Ir a aragon.es">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="117" height="26" class="inline-block fill-current" role="img"><defs><clipPath id="b-logo-expanded"><path fill="rgb(252, 228, 0)" d="M0 0h31.509v31.495H0z"/></clipPath><clipPath id="a-logo-expanded"><path d="M0 0h144v32H0z"/></clipPath></defs><g clip-path="url(#a-logo-expanded)"><path fill="rgb(252, 228, 0)" d="M0 .205h31.509V31.7H0z"/><g clip-path="url(#b-logo-expanded)" transform="translate(0 .205)"><g fill="#dd171b" fill-rule="evenodd"><path d="m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z"/></g></g><path d="M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z" fill="#161615" fill-rule="evenodd"/></g></svg>
+        <a href="{{ params.homepageUrl | default('https://www.aragon.es/') }}" class="inline-block pt-2.5 pb-2 text-black focus:outline-none focus:shadow-outline-black">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="117" height="26" class="inline-block fill-current" role="img" aria-label="Gobierno de Aragón. Ir a aragon.es"><defs><clipPath id="b-logo-expanded"><path fill="rgb(252, 228, 0)" d="M0 0h31.509v31.495H0z"/></clipPath><clipPath id="a-logo-expanded"><path d="M0 0h144v32H0z"/></clipPath></defs><g clip-path="url(#a-logo-expanded)"><path fill="rgb(252, 228, 0)" d="M0 .205h31.509V31.7H0z"/><g clip-path="url(#b-logo-expanded)" transform="translate(0 .205)"><g fill="#dd171b" fill-rule="evenodd"><path d="m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z"/></g></g><path d="M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z" fill="#161615" fill-rule="evenodd"/></g></svg>
         </a>
         {{ params.customNavigationHtml | safe if params.customNavigationHtml }}
       </div>

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

@@ -9,7 +9,7 @@
   {
     "name": "con HTML",
     "data": {
-      "html": 'Esto es una <strong>pista</strong> o <em>hint</em>.'
+      "html": "Esto es una <strong>pista</strong> o <em>hint</em>."
     }
   }
 ] %}

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

@@ -1,4 +1,4 @@
 <!-- hint -->
 <p {%- if params.id %} id="{{ params.id }}"{% endif %} class="block text-neutral-dark {%- if params.classes %} {{ params.classes }}{% endif %}"
-{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.html | safe if params.html else params.text }}</p>
+{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.html | filterquotes | safe if params.html else params.text }}</p>
 <!-- /hint -->

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

@@ -149,7 +149,7 @@
   },
   {
     "name": "con al atributo pattern",
-    "description": 'Usa el atributo <code>pattern</code> para elegir un patrón de entrada de datos nativo del navegador.',
+    "description": "Usa el atributo <code>pattern</code> para elegir un patrón de entrada de datos nativo del navegador.",
     "data": {
       "label": {
         "text": "Solo números"
@@ -162,7 +162,7 @@
   },
   {
     "name": "campo obligatorio",
-    "description": 'El formulario debe comenzar con un párrafo que ponga: <em>* Todos los campos marcados con asterisco son obligatorios.</em>',
+    "description": "El formulario debe comenzar con un párrafo que ponga: <em>* Todos los campos marcados con asterisco son obligatorios.</em>",
     "data": {
       "label": {
         "text": "Campo obligatorio *"
@@ -187,7 +187,7 @@
   },
   {
     "name": "Con clases de css aplicadas",
-    "description": 'Label en linea + Input flexible y mensaje de error',
+    "description": "Label en linea + Input flexible y mensaje de error",
     "data": {
       "formGroup": {
         "classes": "lg:flex lg:flex-wrap lg:items-center lg:gap-x-base"
@@ -207,7 +207,7 @@
   },
   {
     "name": "Tipo personalizado",
-    "description": 'Si no se espacifica, el tipo por defecto es <code>text</code>. Este Input tiene un <code>type="number"</code>',
+    "description": "Si no se espacifica, el tipo por defecto es <code>text</code>. Este Input tiene un <code>type='number'</code>",
     "data": {
       "label": {
         "text": "Input de tipo número"
@@ -234,7 +234,7 @@
       "label": {
         "text": "Esto es un label"
       },
-      "id": "placeholder",
+      "id": "con-placeholder",
       "name": "placeholder",
       "placeholder": "Esto es un placeholder"
     }
@@ -297,12 +297,12 @@
   },
   {
     "name": "inputmode",
-    "description": 'Este atributo proporciona información al navegador para que se pueda mostrar el teclado virtual apropiado, especialmente en dispositivos móviles. Este input tiene un <code>inputmode="email"</code>',
+    "description": "Este atributo proporciona información al navegador para que se pueda mostrar el teclado virtual apropiado, especialmente en dispositivos móviles. Este input tiene un <code>inputmode='email'</code>",
     "data": {
       "label": {
         "text": "Inputmode"
       },
-      "id": "inputmode",
+      "id": "con-inputmode",
       "name": "inputmode",
       "inputmode": "email"
     }

package/src/templates/components/input-group/_examples.input-group.njk

@@ -385,7 +385,7 @@
   },
   {
     "name": "con autocompletado",
-    "description": 'Usa el parámetro <code>autocomplete</code>',
+    "description": "Usa el parámetro <code>autocomplete</code>",
     "data": {
       "id": "datos-autocomplete",
       "fieldset": {

package/src/templates/components/input-group/_template.input-group.njk

@@ -53,7 +53,7 @@
     {% elseif item.divider %}
   <div {%- if item.divider.classes %} class="{{ item.divider.classes }}{% endif %}" role="separator">
     {% if item.divider.html %}
-      {{ item.divider.html | safe }}
+      {{ item.divider.html | filterquotes | safe }}
     {% else %}
       <p>
         {{ item.divider.text }}