npm - desy-html - Versions diffs - 11.1.2 → 12.0.0 - Mend

desy-html 11.1.2 → 12.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (134) hide show

package/src/templates/components/listbox/_examples.listbox.njk CHANGED Viewed

@@ -34,7 +34,7 @@
     },
     {
       "name": "con estado activo",
-      "description": 'Simula activar la pseudo-clase de CSS <code>:active</code>. En realidad sólo se usa para documentar estos ejemplos.',
+      "description": "Simula activar la pseudo-clase de CSS <code>:active</code>. En realidad sólo se usa para documentar estos ejemplos.",
       "data": {
         "id": "with-active-state",
         "text": "Activo",
@@ -68,7 +68,7 @@
     },
     {
       "name": "con estado hover",
-      "description": 'Simula activar la pseudo-clase de CSS <code>:hover</code>. En realidad sólo se usa para documentar estos ejemplos.',
+      "description": "Simula activar la pseudo-clase de CSS <code>:hover</code>. En realidad sólo se usa para documentar estos ejemplos.",
       "data": {
         "id": "with-hover-state",
         "text": "Hover",
@@ -102,7 +102,7 @@
     },
     {
       "name": "con estado focus",
-      "description": 'Simula activar la pseudo-clase de CSS <code>:focus</code>. En realidad sólo se usa para documentar estos ejemplos.',
+      "description": "Simula activar la pseudo-clase de CSS <code>:focus</code>. En realidad sólo se usa para documentar estos ejemplos.",
       "data": {
         "id": "with-focus-state",
         "text": "Focus",
@@ -270,6 +270,41 @@
         ]
       }
     },
+    {
+      "name": "grande",
+      "description": "Label solo visible para lectores de pantalla.",
+      "data": {
+        "id": "large",
+        "text": "Grande",
+        "label": {
+          "text": "Esto es un label",
+          "classes": "sr-only"
+        },
+        "classes": "c-listbox--lg",
+        "items": [
+          {
+            "href": "#",
+            "text": "Opción 1"
+          },
+          {
+            "href": "#",
+            "text": "Opción 2"
+          },
+          {
+            "href": "#",
+            "text": "Opción 3"
+          },
+          {
+            "href": "#",
+            "text": "Opción 4"
+          },
+          {
+            "href": "#",
+            "text": "Opción 5"
+          }
+        ]
+      }
+    },
     {
       "name": "peque tiene selección",
       "description": "Un botón con una selección aplicada se muestra con color. Label solo visible para lectores de pantalla.",
@@ -444,7 +479,7 @@
     },
     {
       "name": "con item activo",
-      "description": 'Podemos seleccionar inicialmente un item si le añadimos el parámetro <code>"active": true</code>. También puedes usar con javascript la función global <code>activateItemListBox(elementMenu, activeItemId)</code> para seleccionar un item, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemListBox("listbox", "with-active-item-listbox-item-2")</code> para seleccionar el segundo item de este ejemplo.',
+      "description": "Podemos seleccionar inicialmente un item si le añadimos el parámetro <code>'active': true</code>. También puedes usar con javascript la función global <code>activateItemListBox(elementMenu, activeItemId)</code> para seleccionar un item, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemListBox('listbox', 'with-active-item-listbox-item-2')</code> para seleccionar el segundo item de este ejemplo.",
       "data": {
         "id": "with-active-item",
         "text": "con item activo",
@@ -481,7 +516,7 @@
     },
     {
       "name": "Permite selecciones múltiples",
-      "description": 'Usa el parámetro <code>"isMultiselectable": true</code>. En este caso al seleccionar un item el elemento no se cerrará. También puedes usar con javascript la función global <code>activateItemListBox(elementMenu, activeItemId)</code> para seleccionar varios items, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemListBox("listbox-multiple", ["is-multiselectable-listbox-item-2", "is-multiselectable-listbox-item-3"])</code> para seleccionar el segundo y el tercer item de este ejemplo.',
+      "description": "Usa el parámetro <code>'isMultiselectable': true</code>. En este caso al seleccionar un item el elemento no se cerrará. También puedes usar con javascript la función global <code>activateItemListBox(elementMenu, activeItemId)</code> para seleccionar varios items, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemListBox('listbox-multiple', ['is-multiselectable-listbox-item-2', 'is-multiselectable-listbox-item-3'])</code> para seleccionar el segundo y el tercer item de este ejemplo.",
       "data": {
         "id": "is-multiselectable",
         "isMultiselectable": true,
@@ -518,7 +553,7 @@
     },
     {
       "name": "Cambia el texto del botón",
-      "description": 'Usa el parámetro <code>"doesChangeButtonText": true</code> para hacer que el texto del botón se actualice al seleccionar un item. Si <code>"doesChangeButtonText": true</code>, entonces no tiene efecto',
+      "description": "Usa el parámetro <code>'doesChangeButtonText': true</code> para hacer que el texto del botón se actualice al seleccionar un item. Si <code>'doesChangeButtonText': true</code>, entonces no tiene efecto",
       "data": {
         "id": "does-change-button-text",
         "text": "Opción 1",
@@ -561,15 +596,15 @@
         "items": [
           {
             "href": "#",
-            "html": 'Opción 1 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline ml-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>'
+            "html": "Opción 1 <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 14' width='1em' height='1em' class='inline-block align-baseline ml-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>"
           },
           {
             "href": "#",
-            "html": 'Opción 2 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"  width="1em" height="1em" class="inline-block align-baseline ml-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>'
+            "html": "Opción 2 <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 14'  width='1em' height='1em' class='inline-block align-baseline ml-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>"
           },
           {
             "href": "#",
-            "html": 'Opción 3 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline ml-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>'
+            "html": "Opción 3 <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 14' width='1em' height='1em' class='inline-block align-baseline ml-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>"
           }
         ]
       }
@@ -585,32 +620,32 @@
         "items": [
           {
             "href": "#",
-            "html": 'Actuaciones previas/preparatorias <p class="text-xs font-normal pointer-events-none">Consulta previa, actos preparatorios de expediente, bases reguladoras...</p>',
+            "html": "Actuaciones previas/preparatorias <p class='text-xs font-normal pointer-events-none'>Consulta previa, actos preparatorios de expediente, bases reguladoras...</p>",
             "classes": "flex-wrap"
           },
           {
             "href": "#",
-            "html": 'Inicio de la tramitación <p class="text-xs font-normal pointer-events-none">Solicitud, subsanación, declaración responsable, aprobación expediente...</p>',
+            "html": "Inicio de la tramitación <p class='text-xs font-normal pointer-events-none'>Solicitud, subsanación, declaración responsable, aprobación expediente...</p>",
             "classes": "flex-wrap"
           },
           {
             "href": "#",
-            "html": 'Otros trámites en fase de inicio <p class="text-xs font-normal pointer-events-none">Documentos que no se puedan asociar a ningún otro tramite en fase de inicio</p>',
+            "html": "Otros trámites en fase de inicio <p class='text-xs font-normal pointer-events-none'>Documentos que no se puedan asociar a ningún otro tramite en fase de inicio</p>",
             "classes": "flex-wrap"
           },
           {
             "href": "#",
-            "html": 'Participación pública <p class="text-xs font-normal pointer-events-none">Información pública, alegaciones, audiencia...</p>',
+            "html": "Participación pública <p class='text-xs font-normal pointer-events-none'>Información pública, alegaciones, audiencia...</p>",
             "classes": "flex-wrap"
           },
           {
             "href": "#",
-            "html": 'Informes sectoriales <p class="text-xs font-normal pointer-events-none">Informes sectoriales que se emiten en la tramitación por órganos distintos del instructor...</p>',
+            "html": "Informes sectoriales <p class='text-xs font-normal pointer-events-none'>Informes sectoriales que se emiten en la tramitación por órganos distintos del instructor...</p>",
             "classes": "flex-wrap"
           },
           {
             "href": "#",
-            "html": 'Valoración/Prueba/Licitación <p class="text-xs font-normal pointer-events-none">Informe de valoración, documentos técnicos de evaluación, peticiones de prueba, documentos fase de licitación, informes propuesta...</p>',
+            "html": "Valoración/Prueba/Licitación <p class='text-xs font-normal pointer-events-none'>Informe de valoración, documentos técnicos de evaluación, peticiones de prueba, documentos fase de licitación, informes propuesta...</p>",
             "classes": "flex-wrap"
           }
         ]
@@ -618,9 +653,9 @@
     },
     {
       "name": "Menú abierto o cerrado con Javascript",
-      "description": 'Podemos abrir o cerrar un menú usando con javascript la función global <code>toggleMenuListbox(elementMenu, open)</code> para abrir o cerrar un menú, usando su id. El parámetro <code>open</code> admite <code>true</code> o <code>false</code>, si le pasamos <code>true</code> abrirá el menú, y si le pasamos <code>false</code> cerrará el menú. Ej: Abre la consola del navegador y escribe <code>toggleMenuListbox("listbox-javascript", true)</code> para abrir el menú de este ejemplo.',
+      "description": "Podemos abrir o cerrar un menú usando con javascript la función global <code>toggleMenuListbox(elementMenu, open)</code> para abrir o cerrar un menú, usando su id. El parámetro <code>open</code> admite <code>true</code> o <code>false</code>, si le pasamos <code>true</code> abrirá el menú, y si le pasamos <code>false</code> cerrará el menú. Ej: Abre la consola del navegador y escribe <code>toggleMenuListbox('listbox-javascript', true)</code> para abrir el menú de este ejemplo.",
       "data": {
-        "id": "with-active-item",
+        "id": "with-active-unactive-item",
         "text": "con item activo",
         "label": {
           "text": "Esto es un label"

package/src/templates/components/listbox/_styles.listbox.css CHANGED Viewed

@@ -107,6 +107,13 @@
   }
+  .c-listbox--lg {
+    @apply px-4;
+    @apply py-3;
+    @apply text-lg;
+  }
   .c-listbox--sm {
     @apply px-2;
     @apply py-1;

package/src/templates/components/listbox/_template.listbox.njk CHANGED Viewed

@@ -24,7 +24,7 @@
 {% set commonTooltipAttributes %} data-module="c-listbox-list" role="listbox" tabindex="-1" class="text-sm outline-none" {%- if params.label  %} aria-labelledby="{{ params.id }}-label"{% endif %}
 {% if params.isMultiselectable %} aria-multiselectable="true"{% endif %}
-{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}{% endset %}
+{% endset %}
 {%- set classNames = "c-listbox" -%}
@@ -40,7 +40,7 @@ treat it as an interactive element - without this it will be
 {% endset %}
-{%- set commonAttributes %} id="{{ params.id }}-button" class="{{ classNames }}" data-module="c-listbox-button" aria-haspopup="listbox" {%- if params.doesChangeButtonText %} data-change="change"{% endif %} aria-labelledby="{% if params.label  %}{{ params.id }}-label {% endif -%} {{ params.id }}-button" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% if params.disabled %} disabled="disabled" aria-disabled="true"{% endif %}{% endset %}
+{%- set commonAttributes %} id="{{ params.id }}-button" class="{{ classNames }}" data-module="c-listbox-button" aria-haspopup="listbox" {%- if params.doesChangeButtonText %} data-change="change"{% endif %} aria-labelledby="{% if params.label  %}{{ params.id }}-label {% endif -%} {{ params.id }}-button" {% if params.disabled %} disabled="disabled" aria-disabled="true"{% endif %}{% endset %}
 {#- Capture the HTML so we can optionally nest it in a fieldset -#}
 {% set innerHtml %}
@@ -59,7 +59,7 @@ treat it as an interactive element - without this it will be
   {% endif %}
   {% set commonItemAttributes %}{% if id %} id="{{ id }}"{% endif %} {%- if item.title %} title="{{ item.title }}"{% endif %} {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %}{% endset %}
       <li role="option" class="flex items-center pr-base pl-lg 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.active %} aria-selected="true"{% endif -%} {{- commonItemAttributes | safe }}>
-        {{ item.html | safe if item.html else item.text }}
+        {{ item.html | filterquotes | safe if item.html else item.text }}
       </li>
   {% endif %}
   {% endfor %}
@@ -70,14 +70,14 @@ treat it as an interactive element - without this it will be
   {% 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 %}
   </div>
   {% endif %}
   <button {{- commonAttributes | safe }} >
-    <span class="inline-flex self-center max-w-xs align-middle truncate">{%- if conditionalValue %} {{ conditionalValue }}{% else %}{{ params.html | safe if params.html else params.text }}{% endif %}</span>
+    <span class="inline-flex self-center max-w-xs align-middle truncate">{%- if conditionalValue %} {{ conditionalValue }}{% else %}{{ params.html | filterquotes | safe if params.html else params.text }}{% endif %}</span>
     {# Indentation is intentional to output HTML nicely #}
     {{- iconHtml | safe | trim | indent(2, true) if iconHtml -}}
   </button>

package/src/templates/components/media-object/_examples.media-object.njk CHANGED Viewed

@@ -3,7 +3,7 @@
   {
     "name": "por defecto",
     "data": {
-      "figureHtml": "<div class=\" w-20 h-20 \"><div class=\" h-full border-4 border-dashed border-gray-200 rounded-lg \"></div></div>",
+      "figureHtml": "<div class=' w-20 h-20 '><div class=' h-full border-4 border-dashed border-gray-200 rounded-lg '></div></div>",
       "caller": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet."
     }
   },
@@ -11,7 +11,7 @@
     "name": "invertido",
     "data": {
       "reverse": true,
-      "figureHtml": "<div class=\" w-20 h-20 \"><div class=\" h-full border-4 border-dashed border-gray-200 rounded-lg \"></div></div>",
+      "figureHtml": "<div class=' w-20 h-20 '><div class=' h-full border-4 border-dashed border-gray-200 rounded-lg '></div></div>",
       "caller": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet."
     }
   },
@@ -19,7 +19,7 @@
     "name": "figure centrado verticalmente",
     "data": {
       "center": true,
-      "figureHtml": "<div class=\" w-20 h-20 \"><div class=\" h-full border-4 border-dashed border-gray-200 rounded-lg \"></div></div>",
+      "figureHtml": "<div class=' w-20 h-20 '><div class=' h-full border-4 border-dashed border-gray-200 rounded-lg '></div></div>",
       "caller": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet."
     }
   },
@@ -27,7 +27,7 @@
     "name": "clases añadiendo padding y margin",
     "description": "Lo más habitual es añadir clases para dar estilos al componente, el figure y los elementos de contenido.",
     "data": {
-      "figureHtml": "<div class=\" w-20 h-20 \"><div class=\" h-full border-4 border-dashed border-gray-200 rounded-lg \"></div></div>",
+      "figureHtml": "<div class=' w-20 h-20 '><div class=' h-full border-4 border-dashed border-gray-200 rounded-lg '></div></div>",
       "figureClasses": "mr-base",
       "contentClasses": "text-sm",
       "caller": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet.",
@@ -39,7 +39,7 @@
     "description": "Lo más habitual es añadir clases para dar estilos al componente, el figure y los elementos de contenido.",
     "data": {
       "reverse": true,
-      "figureHtml": "<div class=\" w-20 h-20 \"><div class=\" h-full border-4 border-dashed border-gray-200 rounded-lg \"></div></div>",
+      "figureHtml": "<div class=' w-20 h-20 '><div class=' h-full border-4 border-dashed border-gray-200 rounded-lg '></div></div>",
       "figureClasses": "ml-base",
       "contentClasses": "text-sm",
       "caller": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet.",

package/src/templates/components/menu-horizontal/_examples.menu-horizontal.njk CHANGED Viewed

@@ -63,7 +63,7 @@
   },
   {
     "name": "con item activo",
-    "description": 'Añade active: true a un item para mostrarlo activo inicialmente. También puedes usar con javascript la función global <code>activateItemMenuHorizontal(elementMenu, idItemSeleccionado)</code> para seleccionar un item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemMenuHorizontal("mi-menu-horizontal", "menu-item-2")</code> para desactivar el item actual y activar el segundo item de este ejemplo.',
+    "description": "Añade active: true a un item para mostrarlo activo inicialmente. También puedes usar con javascript la función global <code>activateItemMenuHorizontal(elementMenu, idItemSeleccionado)</code> para seleccionar un item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemMenuHorizontal('mi-menu-horizontal', 'menu-item-2')</code> para desactivar el item actual y activar el segundo item de este ejemplo.",
     "data": {
       "items": [
         {
@@ -90,7 +90,7 @@
       ],
       "attributes": {
         "aria-label": "Menu horizontal",
-        "id":"mi-menu-horizontal"
+        "id": "mi-menu-horizontal"
       }
     }
   },
@@ -135,15 +135,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": {
@@ -154,7 +154,7 @@
   },
   {
     "name": "con clases de css aplicadas: tipo enlaces",
-    "description": 'Clase modificadora aplicada: <code>.c-menu-horizontal--links</code>',
+    "description": "Clase modificadora aplicada: <code>.c-menu-horizontal--links</code>",
     "data": {
       "classes": "c-menu-horizontal--links",
       "items": [
@@ -189,7 +189,7 @@
   },
   {
     "name": "con clases de css aplicadas: con separadores y texto pequeño",
-    "description": 'Clase modificadora aplicada: <code>.c-menu-horizontal--links</code>. Clases aplicadas a cada item para cambiar el padding y añadir un borde lateral.',
+    "description": "Clase modificadora aplicada: <code>.c-menu-horizontal--links</code>. Clases aplicadas a cada item para cambiar el padding y añadir un borde lateral.",
     "data": {
       "classes": "c-menu-horizontal--links",
       "items": [
@@ -229,7 +229,7 @@
   },
   {
     "name": "con clases de css aplicadas: navigation bar",
-    "description": 'Clase modificadora aplicada: <code>.c-menu-horizontal--navigation-bar</code>',
+    "description": "Clase modificadora aplicada: <code>.c-menu-horizontal--navigation-bar</code>",
     "data": {
       "classes": "c-menu-horizontal--navigation-bar",
       "items": [
@@ -264,7 +264,7 @@
   },
   {
     "name": "con clases de css aplicadas: navigation bar con scroll horizontal",
-    "description": 'Clases modificadora aplicadas: <code>.c-menu-horizontal--navigation-bar</code> y <code>.c-menu-horizontal--scroll</code>. Te advertimos que esta aplicación suele dar problemas de accesibilidad y la incluimos para evitar problemas en anchuras muy pequeñas. Asegúrate que los items no desbordan en las anchuras más habituales o bien usa el ejemplo anterior.',
+    "description": "Clases modificadora aplicadas: <code>.c-menu-horizontal--navigation-bar</code> y <code>.c-menu-horizontal--scroll</code>. Te advertimos que esta aplicación suele dar problemas de accesibilidad y la incluimos para evitar problemas en anchuras muy pequeñas. Asegúrate que los items no desbordan en las anchuras más habituales o bien usa el ejemplo anterior.",
     "data": {
       "classes": "c-menu-horizontal--navigation-bar c-menu-horizontal--scroll",
       "items": [
@@ -327,7 +327,7 @@
   },
   {
     "name": "con clases de css aplicadas: tabs en escritorio",
-    "description": 'Clase modificadora aplicada: <code>.c-menu-horizontal--tabs</code>',
+    "description": "Clase modificadora aplicada: <code>.c-menu-horizontal--tabs</code>",
     "data": {
       "classes": "c-menu-horizontal--tabs",
       "items": [
@@ -362,22 +362,22 @@
   },
   {
     "name": "con clases aplicadas: tabs en móvil",
-    "description": 'Clases modificadoras aplicadas: <code>.c-menu-horizontal--tabs-mobile</code> y <code>.c-menu-horizontal--scroll</code>. Te advertimos que esta aplicación suele dar problemas de accesibilidad y la incluimos para evitar problemas en anchuras muy pequeñas. Asegúrate que los items no desbordan en las anchuras más habituales.',
+    "description": "Clases modificadoras aplicadas: <code>.c-menu-horizontal--tabs-mobile</code> y <code>.c-menu-horizontal--scroll</code>. Te advertimos que esta aplicación suele dar problemas de accesibilidad y la incluimos para evitar problemas en anchuras muy pequeñas. Asegúrate que los items no desbordan en las anchuras más habituales.",
     "data": {
       "classes": "c-menu-horizontal--tabs-mobile c-menu-horizontal--scroll",
       "items": [
         {
           "href": "#",
-          "html": '<span class="flex flex-col items-center"><span class="block"><svg class="w-6 h-6 mb-xs" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" focusable="false" width="1em" height="1em"><g transform="scale(2)"><circle cx="2.5" cy="4" r="2.5" fill="currentColor"/><path d="M8.5 5H23a1 1 0 0 0 0-2H8.5a1 1 0 0 0 0 2Z" fill="currentColor"/><circle cx="2.5" cy="12" r="2.5" fill="currentColor"/><path d="M23 11H8.5a1 1 0 0 0 0 2H23a1 1 0 0 0 0-2Z" fill="currentColor"/><circle cx="2.5" cy="20" r="2.5" fill="currentColor"/><path d="M23 19H8.5a1 1 0 0 0 0 2H23a1 1 0 0 0 0-2Z" fill="currentColor"/></g></svg></span><span class="block text-sm">Seguimiento</span></span>'
+          "html": "<span class='flex flex-col items-center'><span class='block'><svg class='w-6 h-6 mb-xs' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' aria-hidden='true' focusable='false' width='1em' height='1em'><g transform='scale(2)'><circle cx='2.5' cy='4' r='2.5' fill='currentColor'/><path d='M8.5 5H23a1 1 0 0 0 0-2H8.5a1 1 0 0 0 0 2Z' fill='currentColor'/><circle cx='2.5' cy='12' r='2.5' fill='currentColor'/><path d='M23 11H8.5a1 1 0 0 0 0 2H23a1 1 0 0 0 0-2Z' fill='currentColor'/><circle cx='2.5' cy='20' r='2.5' fill='currentColor'/><path d='M23 19H8.5a1 1 0 0 0 0 2H23a1 1 0 0 0 0-2Z' fill='currentColor'/></g></svg></span><span class='block text-sm'>Seguimiento</span></span>"
         },
         {
           "href": "#",
-          "html": '<span class="flex flex-col items-center"><span class="block"><svg class="w-6 h-6 mb-xs" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M11 8h3.5a1 1 0 0 0 0-2H11a1 1 0 0 0 0 2ZM11 12h7.5a1 1 0 0 0 0-2H11a1 1 0 0 0 0 2Z" fill="currentColor" transform="scale(2)"/><path d="M23.71 5.71 18.29.29a1 1 0 0 0-.7-.29H8a2 2 0 0 0-2 2v11.17c0 .19.1.33.25.33h1.5a.25.25 0 0 0 .25-.25v-11A.25.25 0 0 1 8.25 2h8.82a.31.31 0 0 1 .18.07l4.68 4.68a.31.31 0 0 1 .07.18v12.82a.25.25 0 0 1-.25.25h-6a.25.25 0 0 0-.25.25v1.5a.25.25 0 0 0 .25.25H22a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7Z" fill="currentColor" transform="scale(2)"/><path d="M13 15H6a1 1 0 0 1-.8-.4l-.9-1.2a1 1 0 0 0-.8-.4H1a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-7a1 1 0 0 0-1-1Z" fill="currentColor" transform="scale(2)"/></svg></span><span class="block text-sm">Documentos</span></span>',
+          "html": "<span class='flex flex-col items-center'><span class='block'><svg class='w-6 h-6 mb-xs' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' aria-hidden='true' focusable='false' width='1em' height='1em'><path d='M11 8h3.5a1 1 0 0 0 0-2H11a1 1 0 0 0 0 2ZM11 12h7.5a1 1 0 0 0 0-2H11a1 1 0 0 0 0 2Z' fill='currentColor' transform='scale(2)'/><path d='M23.71 5.71 18.29.29a1 1 0 0 0-.7-.29H8a2 2 0 0 0-2 2v11.17c0 .19.1.33.25.33h1.5a.25.25 0 0 0 .25-.25v-11A.25.25 0 0 1 8.25 2h8.82a.31.31 0 0 1 .18.07l4.68 4.68a.31.31 0 0 1 .07.18v12.82a.25.25 0 0 1-.25.25h-6a.25.25 0 0 0-.25.25v1.5a.25.25 0 0 0 .25.25H22a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7Z' fill='currentColor' transform='scale(2)'/><path d='M13 15H6a1 1 0 0 1-.8-.4l-.9-1.2a1 1 0 0 0-.8-.4H1a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-7a1 1 0 0 0-1-1Z' fill='currentColor' transform='scale(2)'/></svg></span><span class='block text-sm'>Documentos</span></span>",
           "active": true
         },
         {
           "href": "#",
-          "html": '<span class="flex flex-col items-center"><span class="block"><svg class="w-6 h-6 mb-xs" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M21.71 5.71 16.29.29a1 1 0 0 0-.7-.29H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7ZM19.5 22h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5h1.75a.25.25 0 0 1 .25.25V13a.5.5 0 0 0 .31.46.47.47 0 0 0 .54-.11l2-2a.27.27 0 0 1 .36 0l2 2a.47.47 0 0 0 .35.15.43.43 0 0 0 .19 0 .5.5 0 0 0 .25-.5V2.25a.25.25 0 0 1 .25-.25H15a.49.49 0 0 1 .36.15l4.53 4.53A.49.49 0 0 1 20 7v14.5a.5.5 0 0 1-.5.5Z" fill="currentColor" transform="scale(2)"/></svg></span><span class="block text-sm">Notificaciones</span></span>'
+          "html": "<span class='flex flex-col items-center'><span class='block'><svg class='w-6 h-6 mb-xs' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' aria-hidden='true' focusable='false' width='1em' height='1em'><path d='M21.71 5.71 16.29.29a1 1 0 0 0-.7-.29H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7ZM19.5 22h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5h1.75a.25.25 0 0 1 .25.25V13a.5.5 0 0 0 .31.46.47.47 0 0 0 .54-.11l2-2a.27.27 0 0 1 .36 0l2 2a.47.47 0 0 0 .35.15.43.43 0 0 0 .19 0 .5.5 0 0 0 .25-.5V2.25a.25.25 0 0 1 .25-.25H15a.49.49 0 0 1 .36.15l4.53 4.53A.49.49 0 0 1 20 7v14.5a.5.5 0 0 1-.5.5Z' fill='currentColor' transform='scale(2)'/></svg></span><span class='block text-sm'>Notificaciones</span></span>"
         }
       ],
       "attributes": {
@@ -388,7 +388,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",
       "items": [
@@ -420,7 +420,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": {
       "items": [
         {

package/src/templates/components/menu-horizontal/_template.menu-horizontal.njk CHANGED Viewed

@@ -18,13 +18,13 @@
     {% if item.active %}
       <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="c-menu-horizontal__link c-menu-horizontal__active relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none
           {%- if item.disabled %} no-underline pointer-events-none{% endif -%} {%- if item.classes %} {{ item.classes }}{% 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 %} aria-current="page" {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-        <strong class="flex items-center pointer-events-none font-bold">{{ item.html | safe if item.html else item.text }}</strong>
+        <strong class="flex items-center pointer-events-none 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="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none
           {%- if item.disabled %} no-underline pointer-events-none{% endif -%} {%- if item.classes %} {{ item.classes }}{% 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 -%}>
         <span class="flex items-center pointer-events-none">
-          {{ item.html | safe if item.html else item.text }}
+          {{ item.html | filterquotes | safe if item.html else item.text }}
         </span>
       </a>
     {% endif %}