desy-html 6.3.3 → 6.4.1

package/config/tailwind.config.js

@@ -136,6 +136,8 @@ module.exports = {
         DEFAULT: {
           css: {
             color: theme('colors.black'),
+            lineHeight: '1.5rem',
+            '--tw-prose-bullets': theme('colors.black'),
             a: {
               color: theme('colors.primary.base'),
               '&:hover': {

package/docs/ds/_ds.example.menu-navigation.njk

@@ -389,7 +389,7 @@
         {
           "text": "Item 1",
           "id": "header-custom-nav-item-1",
-          "classes": "c-menu-navigation__button--header -mr-base uppercase",
+          "classes": "c-menu-navigation__button--header -mr-base",
           "sub": {
             "items": [
               {
@@ -413,7 +413,7 @@
         {
           "text": "Active Item 2",
           "id": "header-custom-nav-item-2",
-          "classes": "c-menu-navigation__button--header -mr-base uppercase",
+          "classes": "c-menu-navigation__button--header -mr-base",
           "active": true,
           "sub": {
             "items": [
@@ -439,7 +439,7 @@
         {
           "text": "Disabled Item 3",
           "id": "header-custom-nav-item-3",
-          "classes": "c-menu-navigation__button--header -mr-base uppercase",
+          "classes": "c-menu-navigation__button--header -mr-base",
           "disabled": true,
           "sub": {
             "items": [
@@ -464,7 +464,7 @@
         {
           "text": "Item 4 right",
           "id": "header-custom-nav-item-4",
-          "classes": "c-menu-navigation__button--header uppercase",
+          "classes": "c-menu-navigation__button--header",
           "sub": {
             "items": [
               {

package/docs/ds/_ds.section.color.njk

@@ -41,7 +41,7 @@
       <div class="absolute flex inset-0 bg-warning-base text-black"><div class="self-center text-center w-full">warning-base <br><br>#fdcb33</div></div>
     </div>
     <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
-      <div class="absolute flex inset-0 bg-warning-dark text-white"><div class="self-center text-center w-full">warning-dark <br><br>#b88e12</div></div>
+      <div class="absolute flex inset-0 bg-warning-dark text-black"><div class="self-center text-center w-full">warning-dark <br><br>#b88e12</div></div>
     </div>
   </div>
   <div class="grid grid-cols-6 gap-5 mb-sm">
@@ -62,7 +62,7 @@
       <div class="absolute flex inset-0 bg-success-base text-black"><div class="self-center text-center w-full">success-base <br><br>#24d14c</div></div>
     </div>
     <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
-      <div class="absolute flex inset-0 bg-success-dark font-semibold text-white"><div class="self-center text-center w-full">success-dark <br><br>#1aa23a</div></div>
+      <div class="absolute flex inset-0 bg-success-dark font-semibold text-black"><div class="self-center text-center w-full">success-dark <br><br>#1aa23a</div></div>
     </div>
   </div>
   <div class="grid grid-cols-6 gap-5 mb-sm">
@@ -78,7 +78,7 @@
       <div class="absolute flex inset-0 bg-info-base text-black"><div class="self-center text-center w-full">info-base <br><br>#fa9902</div></div>
     </div>
     <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
-      <div class="absolute flex inset-0 bg-info-dark font-semibold text-white"><div class="self-center text-center w-full">info-dark <br><br>#c97a00</div></div>
+      <div class="absolute flex inset-0 bg-info-dark font-semibold text-black"><div class="self-center text-center w-full">info-dark <br><br>#c97a00</div></div>
     </div>
   </div>
   {% include "ds/_ds.example.colores-de-soporte.njk" %}

package/docs/ds/_ds.section.typography.njk

@@ -11,14 +11,14 @@
   {{ DSSubsectionTitle({
     title: "Tailwindcss typography plugin"
   }) }}
-  <p class="c-paragraph-base">Para dar estilos por defecto a contenido html sin clases que proviene de markdown o de wysiwyg, utilizamos un plugin de Tailwindcss: <a href="https://github.com/tailwindlabs/tailwindcss-typography" class="c-link">tailwindcss-typography</a>. Basta con añadir al contenedor la clase <code>.prose</code>. También hay variantes de estos estilos que pueden usarse con breakpoints, por ejemplo: <code>prose-sm lg:prose max-w-none lg:max-w-none mx-auto</code>. Leer la <a href="https://github.com/tailwindlabs/tailwindcss-typography" class="c-link">documentación</a>.</p>
+  <p class="c-paragraph-base">Para dar estilos por defecto a contenido html sin clases que proviene de markdown o de wysiwyg, utilizamos un plugin de Tailwindcss: <a href="https://github.com/tailwindlabs/tailwindcss-typography" class="c-link">tailwindcss-typography</a>. Basta con añadir al contenedor la clase <code>.prose</code>. También hay variantes de estos estilos que pueden usarse con breakpoints, por ejemplo: <code>prose prose-sm lg:prose-base max-w-none lg:max-w-none mx-auto</code>. Leer la <a href="https://github.com/tailwindlabs/tailwindcss-typography" class="c-link">documentación</a>.</p>
   <div class="pb-lg"></div>
   {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
   {{ DSSubsectionTitle({
     title: "Ejemplo:"
   }) }}
   <div class="pb-xl"></div>
-  <div class="prose-sm lg:prose max-w-none lg:max-w-none mx-auto">
+  <div class="prose prose-sm lg:prose-base max-w-none lg:max-w-none mx-auto">
     <p class="lead">Until now, trying to style an article, document, or blog post with Tailwind has been a tedious task that required a keen eye for typography and a lot of complex custom CSS.</p>
     <p>
       By default, Tailwind removes all of the default browser styling from paragraphs, headings, lists and more. This ends up being really useful for building application UIs because you spend less time undoing user-agent styles, but when you
@@ -249,4 +249,4 @@
     {% from "ds/_ds.macro.code-snippet.njk" import DSCodeSnippet %}
     {{ DSCodeSnippet("ds/_ds.example.typography.njk") }}
   </div>
-</div>
+</div>

package/docs/index.html

@@ -38,6 +38,23 @@
 
   <h2>Changelog (English)</h2>
   <p>What's new in the latest version of desy-html</p>
+  <h3>v.6.4.1</h3>
+  <ul class="text-sm">
+    <li>Fixed notification close.</li>
+    <li>Header GA logo has now the right colors.</li>
+    <li>Improved documentation.</li>
+  </ul>
+  <h3>v.6.4.0</h3>
+  <ul class="text-sm">
+    <li>Added title for mobile in Header.</li>
+    <li>Now the Dialog close on click outside.</li>
+    <li>Fixed Notification not closing on close button click.</li>
+    <li>Fixed Toggle bad arias and colors.</li>
+    <li>Fixed Collapsible bad arias and not opening.</li>
+    <li>Fixed Tabs active element.</li>
+    <li>Improved prose styles. Now the lists have black bullets and paragraphs correct line heights.</li>
+    <li>Improvements in documentation.</li>
+  </ul>
   <h3>v.6.3.3</h3>
   <ul class="text-sm">
     <li>Fixed behavior in Accordion and Accordion history.</li>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "6.3.3",
+  "version": "6.4.1",
   "description": "desy-html contains the code you need to start building a user interface for Gobierno de Aragón government webapps.",
   "author": {
     "name": "Desy (SDA Servicios Digitales de Aragón)",

package/src/js/aria/collapsible.js

@@ -5,6 +5,9 @@ export function Collapsible(aria) {
       this.rootEl = domNode;
       this.buttonEl = this.rootEl.querySelector('button[aria-expanded]');
       this.buttonEl.addEventListener('click', this.toggle.bind(this));
+      if(domNode.dataset.expanded){
+        this.buttonEl.click()
+      }
     }
 
     toggle(event) {
@@ -18,16 +21,20 @@ export function Collapsible(aria) {
       elementCollapsibleContent.classList.toggle('hidden')
 
       if(elementCollapsibleShow.classList.contains('hidden')) {
+        this.buttonEl.setAttribute('aria-expanded', 'true')
         elementCollapsibleShow.setAttribute('aria-hidden', 'false')
         elementCollapsibleHide.setAttribute('aria-hidden', 'true')
+        elementCollapsibleContent.setAttribute('aria-hidden', 'false')
       } else {
+        this.buttonEl.setAttribute('aria-expanded', 'false')
         elementCollapsibleShow.setAttribute('aria-hidden', 'true')
         elementCollapsibleHide.setAttribute('aria-hidden', 'false')
+        elementCollapsibleContent.setAttribute('aria-hidden', 'true')
       }
     }
   }
 
-  const collapsible = document.querySelectorAll('.c-collapsible');
+  const collapsible = document.querySelectorAll('[data-module="c-collapsible"]');
   collapsible.forEach((collapsibleElement) => {
     new Collapsible(collapsibleElement);
   });

package/src/js/aria/dialog.js

@@ -276,12 +276,24 @@ export function dialog(aria) {
 
     aria.Dialog.prototype.addListeners = function () {
       document.addEventListener('focus', this.trapFocus, true);
+      document.addEventListener('click', this.clickOutSide, true)
     }; // end addListeners
 
     aria.Dialog.prototype.removeListeners = function () {
       document.removeEventListener('focus', this.trapFocus, true);
+      document.removeEventListener('click', this.clickOutSide, true);
     }; // end removeListeners
 
+    aria.Dialog.prototype.clickOutSide = function (event) {
+      var currentDialog = aria.getCurrentDialog();
+      var getDialogElement = currentDialog.dialogNode;
+      const isClickInside = getDialogElement.contains(event.target)
+
+      if (!isClickInside) {
+        currentDialog.close();
+      }
+    };
+
     aria.Dialog.prototype.trapFocus = function (event) {
       if (aria.Utils.IgnoreUtilFocusChanges) {
         return;
@@ -319,4 +331,4 @@ export function dialog(aria) {
     }; // end replaceDialog
 
   }());
-}
+}

package/src/js/aria/notification.js

@@ -0,0 +1,32 @@
+export function notification() {
+
+  class Notification {
+
+    constructor(domNode) {
+      this.rootEl = domNode;
+      /*No todas las notificaciones tienen botón de cerrar
+      así que comprobamos que el componente contiene el botón.*/
+      if(this.rootEl.querySelector('.c-notification-button__close')) {
+        window.addEventListener('click', this.closeNotification.bind(this));
+      }
+    }
+
+    closeNotification(event) {
+      const { target } = event;
+      if(target.classList.contains('c-notification-button__close')) {
+        //Replicamos la transición de alpine con tailwind al cerrar.
+        target.parentElement.parentElement.parentElement.classList.add('transition-opacity', 'duration-150', 'ease-in-out', 'opacity-0');
+        //Añadimos display: none para que el componente "desaparezca del DOM"
+        setTimeout(() =>{
+          target.parentElement.parentElement.parentElement.classList.add('hidden');
+        }, 300)
+      }
+    }
+
+  }
+
+  const notifications = document.querySelectorAll('[data-module="c-notification"]');
+  notifications.forEach((notificationElement) => {
+    new Notification(notificationElement);
+  });
+}

package/src/js/aria/tabs.js

@@ -27,12 +27,14 @@ export function tabs(aria) {
       if(getClassFromTabs.some(tab => tab.classList.contains('c-tabs__link--is-active'))) {
         tabs.forEach((tab) => {
           if(tab.classList.contains('c-tabs__link--is-active')) {
+            activateTab(tab, false)
             addActiveClass(tab)
           }
         })
       } else {
         tabs.forEach((tab, index) => {
           if(index === 0) {
+            activateTab(tab, false)
             addActiveClass(tab)
           }
         })

package/src/js/aria/toggle.js

@@ -3,21 +3,39 @@ export function Toggle(aria) {
   class Toggle {
     constructor(domNode) {
       this.rootEl = domNode;
-      this.buttonEl = this.rootEl.querySelector('button[aria-expanded]');
-
+      this.buttonEl = this.rootEl.querySelector('.c-toggle__button');
       this.buttonEl.addEventListener('click', this.toggle.bind(this));
     }
 
     toggle(event) {
       const { target } = event
-      this.buttonEl.classList.toggle('c-button--has-selection')
-      target.querySelector('.c-button-is-not_pressed').classList.toggle('hidden')
-      target.querySelector('.c-button-is_pressed').classList.toggle('hidden')
+      this.buttonEl.classList.toggle('c-toggle--is-opened')
+      target.querySelector('.c-button--is-not-pressed').classList.toggle('hidden')
+      target.querySelector('.c-button--is-pressed').classList.toggle('hidden')
+
+      this.ariaAttribute(target)
+    }
+
+    ariaAttribute(target) {
+      if(target.getAttribute('aria-checked')) {
+        const toggleIsOpened = target.classList.contains('c-toggle--is-opened') ? true : false
+        this.buttonEl.setAttribute('aria-checked', toggleIsOpened);
+      }
+
+      if(target.getAttribute('aria-pressed')) {
+        const toggleIsOpened = target.classList.contains('c-toggle--is-opened') ? true : false
+        this.buttonEl.setAttribute('aria-pressed', toggleIsOpened);
+      }
+
+      if(target.getAttribute('aria-expanded')) {
+        const toggleIsOpened = target.classList.contains('c-toggle--is-opened') ? true : false
+        this.buttonEl.setAttribute('aria-expanded', toggleIsOpened);
+      }
     }
 
   }
 
-  const toggles = document.querySelectorAll('.c-toggle');
+  const toggles = document.querySelectorAll('[data-module="c-toggle"]');
   toggles.forEach((toggleElement) => {
     new Toggle(toggleElement);
   });

package/src/js/desy-html.js

@@ -14,6 +14,7 @@ import { Treeitem } from './aria/treeitem.js';
 import { Tree } from './aria/tree.js';
 import { Toggle } from './aria/toggle.js';
 import { Collapsible } from './aria/collapsible.js';
+import { notification } from './aria/notification.js';
 
 
 export function accordionComponent(aria) {
@@ -363,3 +364,6 @@ export function treeComponent(aria) {
   }
 }
 
+export function notificationComponent(aria) {
+  notification(aria);
+}

package/src/js/index.js

@@ -16,7 +16,8 @@ import {
   tabsComponent,
   tooltipComponent,
   toggleComponent,
-  treeComponent
+  treeComponent,
+  notificationComponent
 } from './desy-html.js';
 
 var aria = aria || {};
@@ -34,6 +35,7 @@ tabsComponent(aria);
 tooltipComponent(aria);
 toggleComponent(aria);
 treeComponent(aria);
+notificationComponent(aria);
 
 document.querySelectorAll('.c-code-snippet__button').forEach(button => {
   button.addEventListener('click', (event) => {

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

@@ -259,6 +259,28 @@
       ]
     }
   },
+  {
+    "name": "with html in headers",
+    "description": "To avoid event problems, use pointer-events-none class in subelements",
+    "data": {
+      "idPrefix": "accordion-example-pointer-events-none",
+      "headingLevel": 3,
+      "items": [
+        {
+          "headerHtml": '<span class="block pointer-events-none">Accordion Item 1</span><span class="block pointer-events-none font-normal">Subelement also receives events</span>',
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+        },
+        {
+          "headerHtml": '<span class="block pointer-events-none">Accordion Item 2</span><span class="block pointer-events-none font-normal">Subelement also receives events</span>',
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+        },
+        {
+          "headerHtml": '<span class="block pointer-events-none">Accordion Item 3</span><span class="block pointer-events-none font-normal">Subelement also receives events</span>',
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+        }
+      ]
+    }
+  },
   {
     "name": "With classes applied",
     "description": "Show code to display the classes applied in html",

package/src/templates/components/accordion-history/_examples.accordion-history.njk

@@ -295,6 +295,28 @@
       ]
     }
   },
+  {
+    "name": "with html in headers",
+    "description": "To avoid event problems, use pointer-events-none class in subelements",
+    "data": {
+      "idPrefix": "accordion-example-pointer-events-none",
+      "headingLevel": 3,
+      "items": [
+        {
+          "headerHtml": '<span class="block pointer-events-none">Accordion Item 1</span><span class="block pointer-events-none font-normal">Subelement also receives events</span>',
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+        },
+        {
+          "headerHtml": '<span class="block pointer-events-none">Accordion Item 2</span><span class="block pointer-events-none font-normal">Subelement also receives events</span>',
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+        },
+        {
+          "headerHtml": '<span class="block pointer-events-none">Accordion Item 3</span><span class="block pointer-events-none font-normal">Subelement also receives events</span>',
+          "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+        }
+      ]
+    }
+  },
   {
     "name": "With classes applied",
     "description": "Show code to display the classes applied in html",

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

@@ -1,5 +1,5 @@
 <!-- collapsible -->
-<div class="{%- if params.classes %} {{ params.classes }}{% else -%} -my-px py-sm border-t border-b border-neutral-base{% endif %} c-collapsible" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+<div class="{%- if params.classes %} {{ params.classes }}{% else -%} -my-px py-sm border-t border-b border-neutral-base{% endif %} c-collapsible" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} {% if params.open %} data-expanded="true" {% endif %} data-module="c-collapsible">
 	<button aria-expanded="false" {%- if params.id %} id="{{params.id}}-title"{% endif %} class="group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" {%- if params.id %} aria-controls="{{params.id}}"{% endif %}>{{ params.headerHtml | safe if params.headerHtml else params.headerText }}
   <span class="c-collapsible__show absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none " aria-hidden="false">Mostrar</span>
   <span class="c-collapsible__hide absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none  hidden" aria-hidden="true">Ocultar</span>

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

@@ -18,8 +18,7 @@
         }
       }
     ],
-    "isDismissible": true,
-    "classes": "mt-2xl"
+    "isDismissible": true
   })  }}
 {% endset %}
 
@@ -46,8 +45,7 @@
         }
       }
     ],
-    "isDismissible": true,
-    "classes": "mt-2xl"
+    "isDismissible": true
   })  }}
 {% endset %}
 

package/src/templates/components/dialog/_styles.dialog.css

@@ -13,7 +13,7 @@
     @apply hidden fixed overflow-y-auto inset-0 bg-black bg-opacity-50 z-50;
 
     &.active {
-      @apply flex justify-center content-center;
+      @apply grid h-screen place-items-center;
     }
   }
 }

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

@@ -326,7 +326,7 @@
     "data": {
       "homepageUrl": "/",
       "noLogo": true,
-      "customLogoHtml": '<svg xmlns="http://www.w3.org/2000/svg" width="254" height="32" viewBox="0 0 588 74" aria-label="Gobierno de Aragón. Ir a la página de inicio" role="img"><defs><clipPath id="a-logo40"><path data-name="Rectángulo 55" transform="translate(337 484)" fill="#fff" stroke="#707070" d="M0 0h588v74H0z"/></clipPath><clipPath id="b-logo40"><path data-name="Rectángulo 1" d="M0 0h207.085v73.44H0z"/></clipPath><clipPath id="c-logo40"><path data-name="Trazado 48" d="m66.9 43.754 8.184 8.228 7.966-7.966v-.261a18.374 18.374 0 0 1 12.059-17.24L83.094 14.5A34.49 34.49 0 0 0 66.9 43.754" transform="translate(-66.9 -14.5)"/></clipPath><clipPath id="e-logo40"><path data-name="Trazado 49" d="m86.7 117.514 7.313 7.313a34.482 34.482 0 0 0 18.632 5.442 33.646 33.646 0 0 0 7.879-.914L101.2 110.026a18.482 18.482 0 0 1-2.917-2.917l-.609-.609Z" transform="translate(-86.7 -106.5)"/></clipPath><clipPath id="g-logo40"><path data-name="Rectángulo 54" transform="translate(0 .446)" d="M0 0h353v138H0z"/></clipPath><clipPath id="h-logo40"><path data-name="Rectángulo 53" fill="gold" d="M0 0h67.807v67.81H0z"/></clipPath><linearGradient id="d-logo40" x1="-1.032" y1="1.791" x2="-1.017" y2="1.791" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#8b1810"/><stop offset=".25" stop-color="#8b1810"/><stop offset=".313" stop-color="#941a14"/><stop offset=".9" stop-color="#e62a35"/><stop offset="1" stop-color="#e62a35"/></linearGradient><linearGradient id="f-logo40" x1="-1.116" y1="1.139" x2="-1.103" y2="1.139" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#8b1810"/><stop offset=".092" stop-color="#941a14"/><stop offset=".95" stop-color="#e62a35"/><stop offset="1" stop-color="#e62a35"/></linearGradient></defs><g data-name="logos juntos" transform="translate(-337 -484)" clip-path="url(#a-logo40)"><g data-name="Grupo 60"><g data-name="Color-positivo-horizontal-RGB copia"><path data-name="Trazado 1" d="m454.103 488.086-1.7.522-.259-.827 2.22-.74h.74v9.011h-1Z"/><g data-name="Grupo 48"><g data-name="Grupo 1" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 2" d="m120.411 9.925.609-.784a3.184 3.184 0 0 0 2.22.958c1.611 0 2.7-1.654 2.655-3.918a3.072 3.072 0 0 1-5.659-1.35v-.043a3.046 3.046 0 0 1 3.222-3.047 3.142 3.142 0 0 1 2.351.914 4.547 4.547 0 0 1 1.128 3.486v.04c0 2.83-1.524 4.832-3.744 4.832a3.77 3.77 0 0 1-2.786-1.088m5.23-5.184a2.077 2.077 0 0 0-2.264-2.046 2.046 2.046 0 0 0-2.133 2.09 2.023 2.023 0 0 0 2.22 1.959 2.068 2.068 0 0 0 2.177-2.003"/></g><g data-name="Grupo 2" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 3" d="M128.334 8.488a2.439 2.439 0 0 1 1.828-2.22 2.3 2.3 0 0 1-1.528-2.046v-.043c0-1.393 1.437-2.351 3.047-2.351s3.047 1 3.047 2.351v.044a2.211 2.211 0 0 1-1.524 2.046 2.433 2.433 0 0 1 1.828 2.177v.044c0 1.524-1.48 2.568-3.352 2.568-1.915-.044-3.352-1.088-3.352-2.568m5.7-.044c0-1.045-1.045-1.741-2.351-1.741s-2.351.7-2.351 1.7v.044c0 .914.871 1.7 2.351 1.7s2.351-.784 2.351-1.7m-.3-4.179c0-.914-.871-1.567-2.046-1.567s-2.046.653-2.046 1.567v.044a1.851 1.851 0 0 0 2.046 1.654c1.132-.087 2.046-.74 2.046-1.7"/></g><g data-name="Grupo 3" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 4" d="m136.344 10.1 3.265-2.873c1.35-1.219 1.872-1.915 1.872-2.83a1.693 1.693 0 0 0-1.785-1.7 2.786 2.786 0 0 0-2.394 1.524l-.74-.522a3.551 3.551 0 0 1 3.221-1.914 2.6 2.6 0 0 1 2.786 2.525v.044c0 1.306-.7 2.133-2.264 3.483l-2.394 2.133h4.745v.915h-6.269v-.784Z"/></g><g data-name="Grupo 4" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Rectángulo 4" d="M145.878 6.53h5.877v1.001h-5.877z"/></g><g data-name="Grupo 5" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 5" d="m155.107 10.1 3.265-2.873c1.35-1.219 1.872-1.915 1.872-2.83a1.693 1.693 0 0 0-1.785-1.7 2.786 2.786 0 0 0-2.394 1.524l-.74-.522a3.551 3.551 0 0 1 3.221-1.914 2.6 2.6 0 0 1 2.786 2.525v.044c0 1.306-.7 2.133-2.264 3.483l-2.394 2.133h4.745v.915h-6.269v-.784Z"/></g><g data-name="Grupo 6" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 6" d="M162.943 6.443c0-2.525 1.48-4.658 3.787-4.658s3.744 2.09 3.744 4.614v.044c0 2.525-1.48 4.614-3.787 4.614-2.264 0-3.744-2.133-3.744-4.614m6.53 0c0-2-1.088-3.744-2.743-3.744-1.7 0-2.743 1.7-2.743 3.7v.044c0 1.959 1.088 3.7 2.743 3.7 1.7-.044 2.743-1.741 2.743-3.7"/></g><g data-name="Grupo 7" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 7" d="m171.78 10.1 3.265-2.873c1.349-1.219 1.872-1.915 1.872-2.83a1.693 1.693 0 0 0-1.785-1.7 2.786 2.786 0 0 0-2.394 1.524l-.784-.522a3.551 3.551 0 0 1 3.226-1.914 2.6 2.6 0 0 1 2.786 2.525v.044c0 1.306-.7 2.133-2.264 3.483l-2.394 2.133h4.745v.915h-6.273Z"/></g><g data-name="Grupo 8" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 8" d="m179.441 10.1 3.265-2.873c1.35-1.219 1.872-1.915 1.872-2.83a1.693 1.693 0 0 0-1.785-1.7 2.786 2.786 0 0 0-2.394 1.524l-.74-.522a3.551 3.551 0 0 1 3.221-1.914 2.6 2.6 0 0 1 2.786 2.525v.044c0 1.306-.7 2.133-2.264 3.483l-2.394 2.133h4.745v.915h-6.269v-.784Z"/></g><g data-name="Grupo 9" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 9" d="M119.367 16.499h.958l4.093 9.011h-1.09l-1.045-2.351h-4.875l-1.045 2.351h-1.045Zm2.525 5.746-2.046-4.571-2.046 4.571Z"/></g><g data-name="Grupo 10" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 10" d="M126.027 18.893h1v1.132a2.56 2.56 0 0 1 2.264-1.306 2.413 2.413 0 0 1 2.525 2.655v4.092h-1v-3.874a1.766 1.766 0 0 0-1.828-2 1.967 1.967 0 0 0-2 2.09v3.787h-1v-6.576Z"/></g><g data-name="Grupo 11" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 11" d="M133.906 16.368h1.132v1.088h-1.132Zm.087 2.525h1v6.617h-1Z"/></g><g data-name="Grupo 12" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 12" d="M136.605 18.893h1.088l2.22 5.485 2.264-5.485h1.045l-2.873 6.66h-.871Z"/></g><g data-name="Grupo 13" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 13" d="M147.314 24.814a2.841 2.841 0 0 0 2.09-.914l.609.566a3.44 3.44 0 0 1-2.743 1.262 3.446 3.446 0 0 1-.131-6.878c1.959 0 3.091 1.567 3.091 3.526v.348h-5.268a2.351 2.351 0 0 0 2.351 2.09m1.959-3a2.184 2.184 0 0 0-2.133-2.22 2.274 2.274 0 0 0-2.133 2.22Z"/></g><g data-name="Grupo 14" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 14" d="M151.972 18.893h1v1.741a2.773 2.773 0 0 1 2.7-1.828v1.045h-.087c-1.437 0-2.612 1.045-2.612 3.047v2.655h-1Z"/></g><g data-name="Grupo 15" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 15" d="m156.63 24.683.479-.7a3.937 3.937 0 0 0 2.307.827c.784 0 1.35-.392 1.35-1.045v-.044c0-.653-.784-.914-1.654-1.175-1.045-.3-2.177-.653-2.177-1.872v-.044a2.031 2.031 0 0 1 2.263-1.911 4.313 4.313 0 0 1 2.394.74l-.435.74a3.757 3.757 0 0 0-1.959-.653c-.784 0-1.262.392-1.262.958v.044c0 .609.827.871 1.7 1.132 1.045.3 2.133.7 2.133 1.915v.044a2.1 2.1 0 0 1-2.351 2 4.5 4.5 0 0 1-2.786-.958"/></g><g data-name="Grupo 16" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 16" d="M163.03 23.595c0-1.437 1.132-2.177 2.83-2.177a8.29 8.29 0 0 1 2 .261v-.216c0-1.175-.7-1.785-1.959-1.785a4.252 4.252 0 0 0-2 .479l-.3-.827a5.252 5.252 0 0 1 2.394-.566 2.948 2.948 0 0 1 2.133.74 2.57 2.57 0 0 1 .7 1.959v4.049h-.958v-1a2.887 2.887 0 0 1-2.394 1.132 2.222 2.222 0 0 1-2.438-2.046m4.876-.522v-.613a7.247 7.247 0 0 0-1.915-.261c-1.219 0-1.915.522-1.915 1.35v.044c0 .827.784 1.306 1.654 1.306a2.049 2.049 0 0 0 2.177-1.828"/></g><g data-name="Grupo 17" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 17" d="M170.953 18.893h1v1.741a2.773 2.773 0 0 1 2.7-1.828v1.045h-.087c-1.437 0-2.612 1.045-2.612 3.047v2.655h-1Z"/></g><g data-name="Grupo 18" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 18" d="M176.177 16.368h1.132v1.088h-1.132Zm.044 2.525h1v6.617h-1Z"/></g><g data-name="Grupo 19" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 19" d="M179.093 22.246a3.428 3.428 0 0 1 3.439-3.483 3.391 3.391 0 0 1 3.439 3.439 3.428 3.428 0 0 1-3.483 3.439 3.319 3.319 0 0 1-3.4-3.4m5.877 0a2.5 2.5 0 0 0-2.438-2.612 2.464 2.464 0 0 0-2.438 2.568 2.465 2.465 0 0 0 2.438 2.568 2.4 2.4 0 0 0 2.438-2.525"/></g><g data-name="Grupo 20" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 20" d="M115.579 31.169h7.226v2.133h-4.745v1.35h4.31v1.959h-4.31v1.437h4.789v2.09h-7.27Z"/></g><g data-name="Grupo 21" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 21" d="m123.458 39.266.914-1.48a4.456 4.456 0 0 0 2.394.784c.435 0 .609-.131.609-.392v-.044c0-.261-.392-.392-1.132-.609-1.35-.348-2.438-.827-2.438-2.22v-.044c0-1.48 1.175-2.307 2.786-2.307a5.519 5.519 0 0 1 2.873.827l-.827 1.524a4.64 4.64 0 0 0-2.046-.653c-.392 0-.566.131-.566.348v.044c0 .261.392.392 1.132.609 1.35.392 2.438.871 2.438 2.22v.044c0 1.524-1.132 2.307-2.83 2.307a5.015 5.015 0 0 1-3.308-.958"/></g><g data-name="Grupo 22" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 22" d="M130.859 38.004v-2.83h-.827v-1.959h.827v-1.741h2.438v1.741h1.611v1.959h-1.611v2.351c0 .479.218.7.653.7a2.34 2.34 0 0 0 .914-.218v1.915a3.267 3.267 0 0 1-1.7.392 2.032 2.032 0 0 1-2.307-2.307"/></g><g data-name="Grupo 23" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 23" d="M135.604 38.178c0-1.48 1.088-2.22 2.7-2.22a5.478 5.478 0 0 1 1.654.261v-.087c0-.7-.435-1.132-1.393-1.132a4.566 4.566 0 0 0-1.915.392l-.479-1.7a7.222 7.222 0 0 1 2.786-.522 3.721 3.721 0 0 1 2.655.827 2.921 2.921 0 0 1 .74 2.22v4h-2.394v-.7a2.643 2.643 0 0 1-2.046.871 2.2 2.2 0 0 1-2.307-2.22m4.4-.522v-.3a3.13 3.13 0 0 0-.958-.174c-.7 0-1.132.348-1.132.871v.044c0 .479.348.74.871.74a1.155 1.155 0 0 0 1.219-1.175"/></g><g data-name="Grupo 24" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 24" d="M144.006 38.004v-2.83h-.827v-1.959h.827v-1.741h2.438v1.741h1.611v1.959h-1.611v2.351c0 .479.218.7.653.7a2.339 2.339 0 0 0 .914-.218v1.915a3.267 3.267 0 0 1-1.7.392 2.032 2.032 0 0 1-2.307-2.307"/></g><g data-name="Grupo 25" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 25" d="M149.056 37.742v-4.527h2.438v3.744c0 .74.392 1.175 1 1.175.566 0 1-.392 1-1.175v-3.744h2.438v6.922h-2.436v-.958a2.554 2.554 0 0 1-2.09 1.088c-1.48.044-2.351-.914-2.351-2.525"/></g><g data-name="Grupo 26" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 26" d="M157.631 38.004v-2.83h-.827v-1.959h.827v-1.741h2.438v1.741h1.611v1.959h-1.611v2.351c0 .479.218.7.653.7a2.339 2.339 0 0 0 .914-.218v1.915a3.267 3.267 0 0 1-1.7.392 2.032 2.032 0 0 1-2.307-2.307"/></g><g data-name="Grupo 27" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 27" d="M162.246 36.742a3.836 3.836 0 0 1 7.662-.044v.044a3.837 3.837 0 0 1-7.662 0m5.311 0a1.489 1.489 0 0 0-1.48-1.567 1.442 1.442 0 0 0-1.437 1.524v.044a1.462 1.462 0 1 0 2.917 0"/></g><g data-name="Grupo 28" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 28" d="M174.218 36.741c0-2.264 1.393-3.657 3.047-3.657a2.708 2.708 0 0 1 2.133 1v-3.263h2.438v9.36h-2.438v-.914a2.64 2.64 0 0 1-2.133 1.088 3.328 3.328 0 0 1-3.047-3.614m5.224-.044a1.449 1.449 0 0 0-1.393-1.567 1.482 1.482 0 0 0-1.437 1.567v.044a1.482 1.482 0 0 0 1.437 1.567 1.547 1.547 0 0 0 1.393-1.611"/></g><g data-name="Grupo 29" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 29" d="M182.837 36.742a3.481 3.481 0 0 1 3.483-3.657c2.394 0 3.483 1.741 3.483 3.787v.479h-4.614a1.417 1.417 0 0 0 1.48 1.132 2.066 2.066 0 0 0 1.524-.7l1.35 1.132a3.625 3.625 0 0 1-3 1.393 3.487 3.487 0 0 1-3.7-3.57m4.745-.609c-.087-.784-.522-1.262-1.219-1.262-.653 0-1.088.479-1.219 1.262Z"/></g><g data-name="Grupo 30" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 30" d="M118.67 45.753h2.394l3.831 9.011h-2.655l-.657-1.611h-3.439l-.653 1.611h-2.608Zm2.177 5.485-1-2.568-1 2.568Z"/></g><g data-name="Grupo 31" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 31" d="M125.417 52.413v-4.527h2.438v3.744c0 .74.392 1.175 1 1.175.566 0 1-.392 1-1.175v-3.744h2.438v6.922h-2.436v-.958a2.554 2.554 0 0 1-2.09 1.088 2.246 2.246 0 0 1-2.351-2.525"/></g><g data-name="Grupo 32" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 32" d="M133.993 52.631v-2.83h-.827v-1.959h.827v-1.741h2.438v1.741h1.611v1.959h-1.611v2.351c0 .479.218.7.653.7a2.339 2.339 0 0 0 .914-.218v1.915a3.267 3.267 0 0 1-1.7.392 2.032 2.032 0 0 1-2.307-2.307"/></g><g data-name="Grupo 33" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 33" d="M138.608 51.369a3.836 3.836 0 0 1 7.662-.044v.044a3.837 3.837 0 0 1-7.662 0m5.311 0a1.489 1.489 0 0 0-1.48-1.567 1.442 1.442 0 0 0-1.437 1.524v.044a1.462 1.462 0 1 0 2.917 0"/></g><g data-name="Grupo 34" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 34" d="M147.314 47.842h2.438v.958a2.586 2.586 0 0 1 2.09-1.132 2.261 2.261 0 0 1 2.351 2.568v4.532h-2.439v-3.744c0-.74-.392-1.175-.958-1.175-.609 0-1.045.392-1.045 1.175v3.744h-2.437Z"/></g><g data-name="Grupo 35" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 35" d="M155.15 51.369a3.836 3.836 0 0 1 7.662-.044v.044a3.837 3.837 0 0 1-7.662 0m5.267 0a1.489 1.489 0 0 0-1.48-1.567 1.442 1.442 0 0 0-1.437 1.524v.044a1.462 1.462 0 1 0 2.917 0"/></g><g data-name="Grupo 36" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 36" d="M163.813 47.843h2.438v.958a2.534 2.534 0 0 1 2.046-1.088 2.124 2.124 0 0 1 2 1.132 2.908 2.908 0 0 1 2.307-1.132 2.226 2.226 0 0 1 2.351 2.525v4.527h-2.438v-3.744c0-.74-.392-1.132-.958-1.132a1 1 0 0 0-1 1.132v3.744h-2.433v-3.744c0-.74-.392-1.132-.958-1.132a1 1 0 0 0-1 1.132v3.744h-2.442v-6.922Z"/></g><g data-name="Grupo 37" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 37" d="M176.307 47.842h2.438v6.922h-2.438Zm1.611-2.96 2.264.74-1.915 1.611h-1.7Z"/></g><g data-name="Grupo 38" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 38" d="M179.746 52.805c0-1.48 1.088-2.22 2.7-2.22a5.479 5.479 0 0 1 1.654.261v-.131c0-.7-.435-1.132-1.393-1.132a4.566 4.566 0 0 0-1.915.392l-.479-1.7a7.222 7.222 0 0 1 2.786-.522 3.721 3.721 0 0 1 2.656.827 2.921 2.921 0 0 1 .74 2.22v3.961h-2.349v-.7a2.643 2.643 0 0 1-2.046.871 2.117 2.117 0 0 1-2.351-2.133m4.44-.522v-.3a3.13 3.13 0 0 0-.958-.174c-.7 0-1.132.348-1.132.871v.044c0 .479.348.74.871.74a1.181 1.181 0 0 0 1.219-1.175"/></g><g data-name="Grupo 39" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 39" d="M191.065 51.368c0-2.264 1.393-3.657 3.047-3.657a2.708 2.708 0 0 1 2.133 1v-3.263h2.438v9.36h-2.438v-.914a2.64 2.64 0 0 1-2.133 1.088 3.3 3.3 0 0 1-3.047-3.613m5.224-.044a1.449 1.449 0 0 0-1.393-1.567 1.482 1.482 0 0 0-1.437 1.567v.044a1.482 1.482 0 0 0 1.437 1.567 1.516 1.516 0 0 0 1.393-1.611"/></g><g data-name="Grupo 40" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 40" d="M199.684 51.369a3.481 3.481 0 0 1 3.483-3.657c2.394 0 3.483 1.741 3.483 3.787v.479h-4.614a1.417 1.417 0 0 0 1.48 1.132 2.066 2.066 0 0 0 1.524-.7l1.35 1.132a3.625 3.625 0 0 1-3 1.393 3.487 3.487 0 0 1-3.7-3.57m4.745-.609c-.087-.784-.522-1.262-1.219-1.262-.653 0-1.088.479-1.219 1.262Z"/></g><g data-name="Grupo 41" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 41" d="M118.67 60.38h2.394l3.831 9.011h-2.655l-.657-1.611h-3.439l-.653 1.611h-2.608Zm2.177 5.529-1-2.568-1 2.568Z"/></g><g data-name="Grupo 42" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 42" d="M125.636 62.513h2.438v1.393a2.124 2.124 0 0 1 2.177-1.524v2.568h-.218c-1.262 0-2 .74-2 2.351v2.133h-2.441v-6.922Z"/></g><g data-name="Grupo 43" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 43" d="M130.424 67.432c0-1.48 1.088-2.22 2.7-2.22a5.478 5.478 0 0 1 1.654.261v-.131c0-.7-.435-1.132-1.393-1.132a4.566 4.566 0 0 0-1.915.392l-.479-1.7a7.222 7.222 0 0 1 2.786-.522 3.721 3.721 0 0 1 2.656.827 2.921 2.921 0 0 1 .74 2.22v3.961h-2.394v-.7a2.643 2.643 0 0 1-2.046.871 2.1 2.1 0 0 1-2.307-2.133m4.44-.522v-.3a3.13 3.13 0 0 0-.958-.174c-.7 0-1.132.348-1.132.871v.044c0 .479.348.74.871.74a1.181 1.181 0 0 0 1.219-1.175"/></g><g data-name="Grupo 44" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 44" d="m138.39 70.697.784-1.611a4.96 4.96 0 0 0 2.438.653c1.219 0 1.828-.609 1.828-1.7v-.261a2.675 2.675 0 0 1-2.133 1.045 3.03 3.03 0 0 1-3.091-3.221v-.044a3.012 3.012 0 0 1 3-3.221 2.849 2.849 0 0 1 2.177.958v-.827h2.438v5.271a3.658 3.658 0 0 1-.914 2.786 4.179 4.179 0 0 1-3.047.958 7.341 7.341 0 0 1-3.483-.784m5.006-5.093a1.416 1.416 0 0 0-2.83 0v.044A1.351 1.351 0 0 0 142 67a1.4 1.4 0 0 0 1.393-1.393"/></g><g data-name="Grupo 45" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 45" d="M146.836 65.996a3.836 3.836 0 0 1 7.662-.044v.044a3.837 3.837 0 0 1-7.662 0m5.267 0a1.489 1.489 0 0 0-1.48-1.567 1.442 1.442 0 0 0-1.437 1.524v.044a1.462 1.462 0 1 0 2.917 0m-1.045-6.53 2.264.74-1.915 1.611h-1.7Z"/></g><g data-name="Grupo 46" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 46" d="M155.499 62.513h2.438v.958a2.586 2.586 0 0 1 2.09-1.132 2.261 2.261 0 0 1 2.351 2.568v4.532h-2.439v-3.744c0-.74-.392-1.175-.958-1.175-.609 0-1.045.392-1.045 1.175v3.744h-2.437v-6.922Z"/></g><g data-name="Grupo 47" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 47" d="M63.688 1.001a34.565 34.565 0 1 0 34.565 34.565A34.538 34.538 0 0 0 63.688 1.001m0 52.936A18.327 18.327 0 1 1 82.059 35.61a18.487 18.487 0 0 1-18.371 18.327" fill="#e62a35"/></g></g><g data-name="Grupo 50"><g data-name="Grupo 49" clip-path="url(#c-logo40)" transform="translate(366.123 491.481)"><path data-name="Rectángulo 49" fill="url(#d-logo40)" d="M0 0h28.209v37.482H0z"/></g></g><g data-name="Grupo 52"><g data-name="Grupo 51" clip-path="url(#e-logo40)" transform="translate(374.743 531.531)"><path data-name="Rectángulo 50" fill="url(#f-logo40)" d="M0 0h33.825v23.769H0z"/></g></g><g data-name="Grupo 54"><g data-name="Grupo 53" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 50" d="M45.274 35.566v-3.265H29.3a28.114 28.114 0 0 1 .479-3.265h15.5v-3.265H30.516c.348-1.088.7-2.177 1.132-3.265h13.626v-3.265H33.215a31.206 31.206 0 0 1 2-3.265h10.059v-3.265H37.7a38.509 38.509 0 0 1 3.265-3.265h4.353V2.133H25.9L0 36.48v13.453h29.123v19.24h16.151v-19.24h6.965V35.566Zm-26.729 0 10.578-14.1v14.1Z" fill="#ffd300"/></g></g></g><g transform="translate(593 451.555)" clip-path="url(#g-logo40)"><g data-name="Grupo 59"><path data-name="Trazado 51" d="M91.667 106.565H16.63v-75.04h75.037ZM20.245 35.147v67.809h67.807V35.147Z" fill="#fff"/><g data-name="Grupo 58"><g data-name="Grupo 57"><path data-name="Rectángulo 52" fill="gold" d="M20.245 35.147h67.807v67.81H20.245z"/><g data-name="Grupo 56" clip-path="url(#h-logo40)" transform="translate(20.245 35.147)"><g data-name="Grupo 55" fill="#dd171b" fill-rule="evenodd"><path data-name="Trazado 52" d="m67.806 13.021-16.287 3.262a31.284 31.284 0 0 1-17.012-2.207 32.347 32.347 0 0 0-10.75-3.912 26.963 26.963 0 0 0-7.606-.024l-10.87 1.945c-1.728.335-3.527.646-5.278.935V.679A15.286 15.286 0 0 1 8.377.488a21.371 21.371 0 0 1 4.483 2.016c3 1.591 5.878 3.479 9.238 4.224a29.932 29.932 0 0 0 14.2-.072l10.175-1.848 10.629-1.92 10.7-2.205Z"/><path data-name="Trazado 53" d="M14.207 52.167a31.387 31.387 0 0 1 20.563 2.184 26.2 26.2 0 0 0 17.876 3.239l15.159-2.736v12.292a17.736 17.736 0 0 1-6.473.552 13.8 13.8 0 0 1-3.432-.983l-7.87-4.127a26.282 26.282 0 0 0-15.26-1.776L2.209 66.789l-2.208.359V54.856l2.711-.552 7.126-1.32c1.446-.263 2.951-.528 4.367-.816Z"/><path data-name="Trazado 54" d="M-.004 32.462v-9.449l28.026-5.112a33.338 33.338 0 0 1 19.6 3.527 26.961 26.961 0 0 0 18.236 1.993l1.938-.406v9.454l-6.185-3.53a26.426 26.426 0 0 0-14.702-2.183L29.68 29.898a1406.99 1406.99 0 0 1-6.191 1.128l-15.693 2.9a11.082 11.082 0 0 1-7.8-1.464Z"/><path data-name="Trazado 55" d="M67.806 35.704v9.31l-27.781 5.112a33.342 33.342 0 0 1-19.6-3.527 26.952 26.952 0 0 0-18.237-1.991l-2.183.408v-9.31l6.431 3.384a26.438 26.438 0 0 0 14.708 2.183l17.229-3.144a1406.99 1406.99 0 0 1 6.191-1.128l15.693-2.9a11.06 11.06 0 0 1 7.553 1.607Z"/></g></g></g></g><path data-name="Trazado 56" d="M102.458 96.73V78.32h3c6.228 0 9.643 3.277 9.643 9.229 0 6.091-3.275 9.181-9.689 9.181Zm22.4-24.546v30.774h20.39V96.73h-13.52v-7.014h13.38v-6.23h-13.38v-5.122h13.518v-6.182Zm46.837 0-11.216 30.775h7.29l3.326-9.366h9.412l3.275 9.366h7.43l-11.441-30.774Zm4.059 6.363-2.86 9.092h5.768Zm91.177 8.677h-6.875v9.689a9.047 9.047 0 0 1-2.953.417c-5.261 0-9.135-4.107-9.135-9.689 0-6 4.107-10.011 10.2-10.011a16.112 16.112 0 0 1 8.766 2.677v-7.012a25.143 25.143 0 0 0-9.366-1.845c-9.965 0-16.886 6.689-16.886 16.286 0 9.458 6.781 15.872 16.886 15.872a27.957 27.957 0 0 0 9.369-1.616Zm34.739.278c0-9.183-6.828-15.872-16.148-15.872a15.941 15.941 0 1 0 .231 31.882c9.32 0 15.917-6.642 15.917-16.009Zm-16.052-9.6c-5.167 0-8.627 3.923-8.627 9.689s3.552 9.689 8.766 9.689c5.167 0 8.581-3.877 8.581-9.689s-3.511-9.687-8.724-9.687Zm18.712-5.721v30.774h7.013V83.346l12.407 19.609h6.507V72.181h-7.012l.009 19.139-11.911-19.139ZM121.256 50.49h-6.877v9.689a9.063 9.063 0 0 1-2.953.415c-5.259 0-9.135-4.107-9.135-9.689 0-6 4.107-10.011 10.2-10.011a16.127 16.127 0 0 1 8.766 2.675v-7.012a25.139 25.139 0 0 0-9.366-1.847c-9.965 0-16.886 6.689-16.886 16.287 0 9.457 6.782 15.869 16.886 15.869a27.975 27.975 0 0 0 9.369-1.615Zm34.706.276c0-9.181-6.828-15.871-16.148-15.871a15.941 15.941 0 1 0 .23 31.88c9.308 0 15.907-6.648 15.907-16.014Zm-16.051-9.6c-5.167 0-8.627 3.92-8.627 9.689s3.553 9.689 8.766 9.689c5.167 0 8.583-3.876 8.583-9.689s-3.524-9.692-8.737-9.692Zm18.358-5.721v30.774h12.734c6.782 0 10.749-3.369 10.749-9.136 0-3.967-2.26-6.827-6.413-8.027a6.746 6.746 0 0 0 4.194-6.321c.046-4.891-3.275-7.29-9.919-7.29Zm10.242 11.488c3 0 4.194-.831 4.194-2.907 0-1.984-1.157-2.721-4.428-2.721h-3v5.628Zm.923 13.015c3.413 0 4.889-1.062 4.889-3.553 0-2.583-1.523-3.6-5.167-3.6h-3.877v7.152Zm20.641-24.5h-6.9V66.23h6.875Zm2.993 0V66.23h20.39v-6.228h-13.52v-7.013h13.38v-6.228h-13.38V41.64h13.519v-6.182Zm108.666 15.317c0-9.181-6.828-15.871-16.148-15.871a15.94 15.94 0 1 0 .231 31.88c9.305-.006 15.9-6.65 15.9-16.017Zm-16.051-9.6c-5.167 0-8.627 3.92-8.627 9.689s3.552 9.689 8.766 9.689c5.167 0 8.581-3.876 8.581-9.689s-3.526-9.695-8.739-9.695ZM231.045 87.63l-2.907-9.092-2.86 9.092Zm-31.587 15.318V90.305h.876c4.429 0 4.891.461 7.842 8.073a15.422 15.422 0 0 0 .646 1.569l.6 1.43a13.757 13.757 0 0 0 .738 1.569h9.994l3.326-9.366h9.413l3.275 9.366h7.429l-11.441-30.774h-8.077l-9.093 24.957a129.684 129.684 0 0 1-2.24-4.933c-1.2-2.63-1.892-3.416-4.107-4.338a7.355 7.355 0 0 0 5.628-7.384c0-5.536-3.644-8.3-10.98-8.3h-10.886v30.774Zm0-18.456h3.044c2.953 0 4.429-1.061 4.429-3.275s-1.339-3.181-4.338-3.181h-3.138Zm24.024-18.283V53.568h.875c4.429 0 4.891.461 7.844 8.073a15.089 15.089 0 0 0 .647 1.569l.6 1.43a13.66 13.66 0 0 0 .737 1.569h13.851l.039-19.742 12.371 19.742h6.507V35.435h-7.012l.03 18.88-11.933-18.88h-7.015v28.649a64.051 64.051 0 0 1-4.254-8.622c-1.2-2.629-1.89-3.412-4.105-4.338a7.353 7.353 0 0 0 5.628-7.375c0-5.537-3.646-8.3-10.981-8.3h-10.889V66.23Zm0-18.455h3.046c2.951 0 4.428-1.062 4.428-3.276s-1.336-3.181-4.338-3.181h-3.139Zm-128 24.42v30.774h10.287c10.426 0 16.563-5.721 16.563-15.411 0-9.644-6.275-15.365-16.932-15.365Z" fill="#161615" fill-rule="evenodd"/></g></g></g></g></svg>',
+      "customLogoHtml": '<svg xmlns="http://www.w3.org/2000/svg" width="254" height="32" viewBox="0 0 588 74" aria-label="Gobierno de Aragón. Ir a la página de inicio" role="img"><defs><clipPath id="a-logo40"><path data-name="Rectángulo 55" transform="translate(337 484)" fill="#fff" stroke="#707070" d="M0 0h588v74H0z"/></clipPath><clipPath id="b-logo40"><path data-name="Rectángulo 1" d="M0 0h207.085v73.44H0z"/></clipPath><clipPath id="c-logo40"><path data-name="Trazado 48" d="m66.9 43.754 8.184 8.228 7.966-7.966v-.261a18.374 18.374 0 0 1 12.059-17.24L83.094 14.5A34.49 34.49 0 0 0 66.9 43.754" transform="translate(-66.9 -14.5)"/></clipPath><clipPath id="e-logo40"><path data-name="Trazado 49" d="m86.7 117.514 7.313 7.313a34.482 34.482 0 0 0 18.632 5.442 33.646 33.646 0 0 0 7.879-.914L101.2 110.026a18.482 18.482 0 0 1-2.917-2.917l-.609-.609Z" transform="translate(-86.7 -106.5)"/></clipPath><clipPath id="g-logo40"><path data-name="Rectángulo 54" transform="translate(0 .446)" d="M0 0h353v138H0z"/></clipPath><clipPath id="h-logo40"><path data-name="Rectángulo 53" fill="rgb(252, 228, 0)" d="M0 0h67.807v67.81H0z"/></clipPath><linearGradient id="d-logo40" x1="-1.032" y1="1.791" x2="-1.017" y2="1.791" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#8b1810"/><stop offset=".25" stop-color="#8b1810"/><stop offset=".313" stop-color="#941a14"/><stop offset=".9" stop-color="#e62a35"/><stop offset="1" stop-color="#e62a35"/></linearGradient><linearGradient id="f-logo40" x1="-1.116" y1="1.139" x2="-1.103" y2="1.139" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#8b1810"/><stop offset=".092" stop-color="#941a14"/><stop offset=".95" stop-color="#e62a35"/><stop offset="1" stop-color="#e62a35"/></linearGradient></defs><g data-name="logos juntos" transform="translate(-337 -484)" clip-path="url(#a-logo40)"><g data-name="Grupo 60"><g data-name="Color-positivo-horizontal-RGB copia"><path data-name="Trazado 1" d="m454.103 488.086-1.7.522-.259-.827 2.22-.74h.74v9.011h-1Z"/><g data-name="Grupo 48"><g data-name="Grupo 1" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 2" d="m120.411 9.925.609-.784a3.184 3.184 0 0 0 2.22.958c1.611 0 2.7-1.654 2.655-3.918a3.072 3.072 0 0 1-5.659-1.35v-.043a3.046 3.046 0 0 1 3.222-3.047 3.142 3.142 0 0 1 2.351.914 4.547 4.547 0 0 1 1.128 3.486v.04c0 2.83-1.524 4.832-3.744 4.832a3.77 3.77 0 0 1-2.786-1.088m5.23-5.184a2.077 2.077 0 0 0-2.264-2.046 2.046 2.046 0 0 0-2.133 2.09 2.023 2.023 0 0 0 2.22 1.959 2.068 2.068 0 0 0 2.177-2.003"/></g><g data-name="Grupo 2" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 3" d="M128.334 8.488a2.439 2.439 0 0 1 1.828-2.22 2.3 2.3 0 0 1-1.528-2.046v-.043c0-1.393 1.437-2.351 3.047-2.351s3.047 1 3.047 2.351v.044a2.211 2.211 0 0 1-1.524 2.046 2.433 2.433 0 0 1 1.828 2.177v.044c0 1.524-1.48 2.568-3.352 2.568-1.915-.044-3.352-1.088-3.352-2.568m5.7-.044c0-1.045-1.045-1.741-2.351-1.741s-2.351.7-2.351 1.7v.044c0 .914.871 1.7 2.351 1.7s2.351-.784 2.351-1.7m-.3-4.179c0-.914-.871-1.567-2.046-1.567s-2.046.653-2.046 1.567v.044a1.851 1.851 0 0 0 2.046 1.654c1.132-.087 2.046-.74 2.046-1.7"/></g><g data-name="Grupo 3" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 4" d="m136.344 10.1 3.265-2.873c1.35-1.219 1.872-1.915 1.872-2.83a1.693 1.693 0 0 0-1.785-1.7 2.786 2.786 0 0 0-2.394 1.524l-.74-.522a3.551 3.551 0 0 1 3.221-1.914 2.6 2.6 0 0 1 2.786 2.525v.044c0 1.306-.7 2.133-2.264 3.483l-2.394 2.133h4.745v.915h-6.269v-.784Z"/></g><g data-name="Grupo 4" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Rectángulo 4" d="M145.878 6.53h5.877v1.001h-5.877z"/></g><g data-name="Grupo 5" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 5" d="m155.107 10.1 3.265-2.873c1.35-1.219 1.872-1.915 1.872-2.83a1.693 1.693 0 0 0-1.785-1.7 2.786 2.786 0 0 0-2.394 1.524l-.74-.522a3.551 3.551 0 0 1 3.221-1.914 2.6 2.6 0 0 1 2.786 2.525v.044c0 1.306-.7 2.133-2.264 3.483l-2.394 2.133h4.745v.915h-6.269v-.784Z"/></g><g data-name="Grupo 6" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 6" d="M162.943 6.443c0-2.525 1.48-4.658 3.787-4.658s3.744 2.09 3.744 4.614v.044c0 2.525-1.48 4.614-3.787 4.614-2.264 0-3.744-2.133-3.744-4.614m6.53 0c0-2-1.088-3.744-2.743-3.744-1.7 0-2.743 1.7-2.743 3.7v.044c0 1.959 1.088 3.7 2.743 3.7 1.7-.044 2.743-1.741 2.743-3.7"/></g><g data-name="Grupo 7" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 7" d="m171.78 10.1 3.265-2.873c1.349-1.219 1.872-1.915 1.872-2.83a1.693 1.693 0 0 0-1.785-1.7 2.786 2.786 0 0 0-2.394 1.524l-.784-.522a3.551 3.551 0 0 1 3.226-1.914 2.6 2.6 0 0 1 2.786 2.525v.044c0 1.306-.7 2.133-2.264 3.483l-2.394 2.133h4.745v.915h-6.273Z"/></g><g data-name="Grupo 8" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 8" d="m179.441 10.1 3.265-2.873c1.35-1.219 1.872-1.915 1.872-2.83a1.693 1.693 0 0 0-1.785-1.7 2.786 2.786 0 0 0-2.394 1.524l-.74-.522a3.551 3.551 0 0 1 3.221-1.914 2.6 2.6 0 0 1 2.786 2.525v.044c0 1.306-.7 2.133-2.264 3.483l-2.394 2.133h4.745v.915h-6.269v-.784Z"/></g><g data-name="Grupo 9" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 9" d="M119.367 16.499h.958l4.093 9.011h-1.09l-1.045-2.351h-4.875l-1.045 2.351h-1.045Zm2.525 5.746-2.046-4.571-2.046 4.571Z"/></g><g data-name="Grupo 10" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 10" d="M126.027 18.893h1v1.132a2.56 2.56 0 0 1 2.264-1.306 2.413 2.413 0 0 1 2.525 2.655v4.092h-1v-3.874a1.766 1.766 0 0 0-1.828-2 1.967 1.967 0 0 0-2 2.09v3.787h-1v-6.576Z"/></g><g data-name="Grupo 11" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 11" d="M133.906 16.368h1.132v1.088h-1.132Zm.087 2.525h1v6.617h-1Z"/></g><g data-name="Grupo 12" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 12" d="M136.605 18.893h1.088l2.22 5.485 2.264-5.485h1.045l-2.873 6.66h-.871Z"/></g><g data-name="Grupo 13" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 13" d="M147.314 24.814a2.841 2.841 0 0 0 2.09-.914l.609.566a3.44 3.44 0 0 1-2.743 1.262 3.446 3.446 0 0 1-.131-6.878c1.959 0 3.091 1.567 3.091 3.526v.348h-5.268a2.351 2.351 0 0 0 2.351 2.09m1.959-3a2.184 2.184 0 0 0-2.133-2.22 2.274 2.274 0 0 0-2.133 2.22Z"/></g><g data-name="Grupo 14" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 14" d="M151.972 18.893h1v1.741a2.773 2.773 0 0 1 2.7-1.828v1.045h-.087c-1.437 0-2.612 1.045-2.612 3.047v2.655h-1Z"/></g><g data-name="Grupo 15" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 15" d="m156.63 24.683.479-.7a3.937 3.937 0 0 0 2.307.827c.784 0 1.35-.392 1.35-1.045v-.044c0-.653-.784-.914-1.654-1.175-1.045-.3-2.177-.653-2.177-1.872v-.044a2.031 2.031 0 0 1 2.263-1.911 4.313 4.313 0 0 1 2.394.74l-.435.74a3.757 3.757 0 0 0-1.959-.653c-.784 0-1.262.392-1.262.958v.044c0 .609.827.871 1.7 1.132 1.045.3 2.133.7 2.133 1.915v.044a2.1 2.1 0 0 1-2.351 2 4.5 4.5 0 0 1-2.786-.958"/></g><g data-name="Grupo 16" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 16" d="M163.03 23.595c0-1.437 1.132-2.177 2.83-2.177a8.29 8.29 0 0 1 2 .261v-.216c0-1.175-.7-1.785-1.959-1.785a4.252 4.252 0 0 0-2 .479l-.3-.827a5.252 5.252 0 0 1 2.394-.566 2.948 2.948 0 0 1 2.133.74 2.57 2.57 0 0 1 .7 1.959v4.049h-.958v-1a2.887 2.887 0 0 1-2.394 1.132 2.222 2.222 0 0 1-2.438-2.046m4.876-.522v-.613a7.247 7.247 0 0 0-1.915-.261c-1.219 0-1.915.522-1.915 1.35v.044c0 .827.784 1.306 1.654 1.306a2.049 2.049 0 0 0 2.177-1.828"/></g><g data-name="Grupo 17" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 17" d="M170.953 18.893h1v1.741a2.773 2.773 0 0 1 2.7-1.828v1.045h-.087c-1.437 0-2.612 1.045-2.612 3.047v2.655h-1Z"/></g><g data-name="Grupo 18" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 18" d="M176.177 16.368h1.132v1.088h-1.132Zm.044 2.525h1v6.617h-1Z"/></g><g data-name="Grupo 19" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 19" d="M179.093 22.246a3.428 3.428 0 0 1 3.439-3.483 3.391 3.391 0 0 1 3.439 3.439 3.428 3.428 0 0 1-3.483 3.439 3.319 3.319 0 0 1-3.4-3.4m5.877 0a2.5 2.5 0 0 0-2.438-2.612 2.464 2.464 0 0 0-2.438 2.568 2.465 2.465 0 0 0 2.438 2.568 2.4 2.4 0 0 0 2.438-2.525"/></g><g data-name="Grupo 20" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 20" d="M115.579 31.169h7.226v2.133h-4.745v1.35h4.31v1.959h-4.31v1.437h4.789v2.09h-7.27Z"/></g><g data-name="Grupo 21" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 21" d="m123.458 39.266.914-1.48a4.456 4.456 0 0 0 2.394.784c.435 0 .609-.131.609-.392v-.044c0-.261-.392-.392-1.132-.609-1.35-.348-2.438-.827-2.438-2.22v-.044c0-1.48 1.175-2.307 2.786-2.307a5.519 5.519 0 0 1 2.873.827l-.827 1.524a4.64 4.64 0 0 0-2.046-.653c-.392 0-.566.131-.566.348v.044c0 .261.392.392 1.132.609 1.35.392 2.438.871 2.438 2.22v.044c0 1.524-1.132 2.307-2.83 2.307a5.015 5.015 0 0 1-3.308-.958"/></g><g data-name="Grupo 22" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 22" d="M130.859 38.004v-2.83h-.827v-1.959h.827v-1.741h2.438v1.741h1.611v1.959h-1.611v2.351c0 .479.218.7.653.7a2.34 2.34 0 0 0 .914-.218v1.915a3.267 3.267 0 0 1-1.7.392 2.032 2.032 0 0 1-2.307-2.307"/></g><g data-name="Grupo 23" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 23" d="M135.604 38.178c0-1.48 1.088-2.22 2.7-2.22a5.478 5.478 0 0 1 1.654.261v-.087c0-.7-.435-1.132-1.393-1.132a4.566 4.566 0 0 0-1.915.392l-.479-1.7a7.222 7.222 0 0 1 2.786-.522 3.721 3.721 0 0 1 2.655.827 2.921 2.921 0 0 1 .74 2.22v4h-2.394v-.7a2.643 2.643 0 0 1-2.046.871 2.2 2.2 0 0 1-2.307-2.22m4.4-.522v-.3a3.13 3.13 0 0 0-.958-.174c-.7 0-1.132.348-1.132.871v.044c0 .479.348.74.871.74a1.155 1.155 0 0 0 1.219-1.175"/></g><g data-name="Grupo 24" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 24" d="M144.006 38.004v-2.83h-.827v-1.959h.827v-1.741h2.438v1.741h1.611v1.959h-1.611v2.351c0 .479.218.7.653.7a2.339 2.339 0 0 0 .914-.218v1.915a3.267 3.267 0 0 1-1.7.392 2.032 2.032 0 0 1-2.307-2.307"/></g><g data-name="Grupo 25" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 25" d="M149.056 37.742v-4.527h2.438v3.744c0 .74.392 1.175 1 1.175.566 0 1-.392 1-1.175v-3.744h2.438v6.922h-2.436v-.958a2.554 2.554 0 0 1-2.09 1.088c-1.48.044-2.351-.914-2.351-2.525"/></g><g data-name="Grupo 26" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 26" d="M157.631 38.004v-2.83h-.827v-1.959h.827v-1.741h2.438v1.741h1.611v1.959h-1.611v2.351c0 .479.218.7.653.7a2.339 2.339 0 0 0 .914-.218v1.915a3.267 3.267 0 0 1-1.7.392 2.032 2.032 0 0 1-2.307-2.307"/></g><g data-name="Grupo 27" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 27" d="M162.246 36.742a3.836 3.836 0 0 1 7.662-.044v.044a3.837 3.837 0 0 1-7.662 0m5.311 0a1.489 1.489 0 0 0-1.48-1.567 1.442 1.442 0 0 0-1.437 1.524v.044a1.462 1.462 0 1 0 2.917 0"/></g><g data-name="Grupo 28" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 28" d="M174.218 36.741c0-2.264 1.393-3.657 3.047-3.657a2.708 2.708 0 0 1 2.133 1v-3.263h2.438v9.36h-2.438v-.914a2.64 2.64 0 0 1-2.133 1.088 3.328 3.328 0 0 1-3.047-3.614m5.224-.044a1.449 1.449 0 0 0-1.393-1.567 1.482 1.482 0 0 0-1.437 1.567v.044a1.482 1.482 0 0 0 1.437 1.567 1.547 1.547 0 0 0 1.393-1.611"/></g><g data-name="Grupo 29" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 29" d="M182.837 36.742a3.481 3.481 0 0 1 3.483-3.657c2.394 0 3.483 1.741 3.483 3.787v.479h-4.614a1.417 1.417 0 0 0 1.48 1.132 2.066 2.066 0 0 0 1.524-.7l1.35 1.132a3.625 3.625 0 0 1-3 1.393 3.487 3.487 0 0 1-3.7-3.57m4.745-.609c-.087-.784-.522-1.262-1.219-1.262-.653 0-1.088.479-1.219 1.262Z"/></g><g data-name="Grupo 30" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 30" d="M118.67 45.753h2.394l3.831 9.011h-2.655l-.657-1.611h-3.439l-.653 1.611h-2.608Zm2.177 5.485-1-2.568-1 2.568Z"/></g><g data-name="Grupo 31" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 31" d="M125.417 52.413v-4.527h2.438v3.744c0 .74.392 1.175 1 1.175.566 0 1-.392 1-1.175v-3.744h2.438v6.922h-2.436v-.958a2.554 2.554 0 0 1-2.09 1.088 2.246 2.246 0 0 1-2.351-2.525"/></g><g data-name="Grupo 32" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 32" d="M133.993 52.631v-2.83h-.827v-1.959h.827v-1.741h2.438v1.741h1.611v1.959h-1.611v2.351c0 .479.218.7.653.7a2.339 2.339 0 0 0 .914-.218v1.915a3.267 3.267 0 0 1-1.7.392 2.032 2.032 0 0 1-2.307-2.307"/></g><g data-name="Grupo 33" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 33" d="M138.608 51.369a3.836 3.836 0 0 1 7.662-.044v.044a3.837 3.837 0 0 1-7.662 0m5.311 0a1.489 1.489 0 0 0-1.48-1.567 1.442 1.442 0 0 0-1.437 1.524v.044a1.462 1.462 0 1 0 2.917 0"/></g><g data-name="Grupo 34" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 34" d="M147.314 47.842h2.438v.958a2.586 2.586 0 0 1 2.09-1.132 2.261 2.261 0 0 1 2.351 2.568v4.532h-2.439v-3.744c0-.74-.392-1.175-.958-1.175-.609 0-1.045.392-1.045 1.175v3.744h-2.437Z"/></g><g data-name="Grupo 35" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 35" d="M155.15 51.369a3.836 3.836 0 0 1 7.662-.044v.044a3.837 3.837 0 0 1-7.662 0m5.267 0a1.489 1.489 0 0 0-1.48-1.567 1.442 1.442 0 0 0-1.437 1.524v.044a1.462 1.462 0 1 0 2.917 0"/></g><g data-name="Grupo 36" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 36" d="M163.813 47.843h2.438v.958a2.534 2.534 0 0 1 2.046-1.088 2.124 2.124 0 0 1 2 1.132 2.908 2.908 0 0 1 2.307-1.132 2.226 2.226 0 0 1 2.351 2.525v4.527h-2.438v-3.744c0-.74-.392-1.132-.958-1.132a1 1 0 0 0-1 1.132v3.744h-2.433v-3.744c0-.74-.392-1.132-.958-1.132a1 1 0 0 0-1 1.132v3.744h-2.442v-6.922Z"/></g><g data-name="Grupo 37" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 37" d="M176.307 47.842h2.438v6.922h-2.438Zm1.611-2.96 2.264.74-1.915 1.611h-1.7Z"/></g><g data-name="Grupo 38" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 38" d="M179.746 52.805c0-1.48 1.088-2.22 2.7-2.22a5.479 5.479 0 0 1 1.654.261v-.131c0-.7-.435-1.132-1.393-1.132a4.566 4.566 0 0 0-1.915.392l-.479-1.7a7.222 7.222 0 0 1 2.786-.522 3.721 3.721 0 0 1 2.656.827 2.921 2.921 0 0 1 .74 2.22v3.961h-2.349v-.7a2.643 2.643 0 0 1-2.046.871 2.117 2.117 0 0 1-2.351-2.133m4.44-.522v-.3a3.13 3.13 0 0 0-.958-.174c-.7 0-1.132.348-1.132.871v.044c0 .479.348.74.871.74a1.181 1.181 0 0 0 1.219-1.175"/></g><g data-name="Grupo 39" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 39" d="M191.065 51.368c0-2.264 1.393-3.657 3.047-3.657a2.708 2.708 0 0 1 2.133 1v-3.263h2.438v9.36h-2.438v-.914a2.64 2.64 0 0 1-2.133 1.088 3.3 3.3 0 0 1-3.047-3.613m5.224-.044a1.449 1.449 0 0 0-1.393-1.567 1.482 1.482 0 0 0-1.437 1.567v.044a1.482 1.482 0 0 0 1.437 1.567 1.516 1.516 0 0 0 1.393-1.611"/></g><g data-name="Grupo 40" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 40" d="M199.684 51.369a3.481 3.481 0 0 1 3.483-3.657c2.394 0 3.483 1.741 3.483 3.787v.479h-4.614a1.417 1.417 0 0 0 1.48 1.132 2.066 2.066 0 0 0 1.524-.7l1.35 1.132a3.625 3.625 0 0 1-3 1.393 3.487 3.487 0 0 1-3.7-3.57m4.745-.609c-.087-.784-.522-1.262-1.219-1.262-.653 0-1.088.479-1.219 1.262Z"/></g><g data-name="Grupo 41" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 41" d="M118.67 60.38h2.394l3.831 9.011h-2.655l-.657-1.611h-3.439l-.653 1.611h-2.608Zm2.177 5.529-1-2.568-1 2.568Z"/></g><g data-name="Grupo 42" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 42" d="M125.636 62.513h2.438v1.393a2.124 2.124 0 0 1 2.177-1.524v2.568h-.218c-1.262 0-2 .74-2 2.351v2.133h-2.441v-6.922Z"/></g><g data-name="Grupo 43" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 43" d="M130.424 67.432c0-1.48 1.088-2.22 2.7-2.22a5.478 5.478 0 0 1 1.654.261v-.131c0-.7-.435-1.132-1.393-1.132a4.566 4.566 0 0 0-1.915.392l-.479-1.7a7.222 7.222 0 0 1 2.786-.522 3.721 3.721 0 0 1 2.656.827 2.921 2.921 0 0 1 .74 2.22v3.961h-2.394v-.7a2.643 2.643 0 0 1-2.046.871 2.1 2.1 0 0 1-2.307-2.133m4.44-.522v-.3a3.13 3.13 0 0 0-.958-.174c-.7 0-1.132.348-1.132.871v.044c0 .479.348.74.871.74a1.181 1.181 0 0 0 1.219-1.175"/></g><g data-name="Grupo 44" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 44" d="m138.39 70.697.784-1.611a4.96 4.96 0 0 0 2.438.653c1.219 0 1.828-.609 1.828-1.7v-.261a2.675 2.675 0 0 1-2.133 1.045 3.03 3.03 0 0 1-3.091-3.221v-.044a3.012 3.012 0 0 1 3-3.221 2.849 2.849 0 0 1 2.177.958v-.827h2.438v5.271a3.658 3.658 0 0 1-.914 2.786 4.179 4.179 0 0 1-3.047.958 7.341 7.341 0 0 1-3.483-.784m5.006-5.093a1.416 1.416 0 0 0-2.83 0v.044A1.351 1.351 0 0 0 142 67a1.4 1.4 0 0 0 1.393-1.393"/></g><g data-name="Grupo 45" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 45" d="M146.836 65.996a3.836 3.836 0 0 1 7.662-.044v.044a3.837 3.837 0 0 1-7.662 0m5.267 0a1.489 1.489 0 0 0-1.48-1.567 1.442 1.442 0 0 0-1.437 1.524v.044a1.462 1.462 0 1 0 2.917 0m-1.045-6.53 2.264.74-1.915 1.611h-1.7Z"/></g><g data-name="Grupo 46" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 46" d="M155.499 62.513h2.438v.958a2.586 2.586 0 0 1 2.09-1.132 2.261 2.261 0 0 1 2.351 2.568v4.532h-2.439v-3.744c0-.74-.392-1.175-.958-1.175-.609 0-1.045.392-1.045 1.175v3.744h-2.437v-6.922Z"/></g><g data-name="Grupo 47" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 47" d="M63.688 1.001a34.565 34.565 0 1 0 34.565 34.565A34.538 34.538 0 0 0 63.688 1.001m0 52.936A18.327 18.327 0 1 1 82.059 35.61a18.487 18.487 0 0 1-18.371 18.327" fill="#e62a35"/></g></g><g data-name="Grupo 50"><g data-name="Grupo 49" clip-path="url(#c-logo40)" transform="translate(366.123 491.481)"><path data-name="Rectángulo 49" fill="url(#d-logo40)" d="M0 0h28.209v37.482H0z"/></g></g><g data-name="Grupo 52"><g data-name="Grupo 51" clip-path="url(#e-logo40)" transform="translate(374.743 531.531)"><path data-name="Rectángulo 50" fill="url(#f-logo40)" d="M0 0h33.825v23.769H0z"/></g></g><g data-name="Grupo 54"><g data-name="Grupo 53" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 50" d="M45.274 35.566v-3.265H29.3a28.114 28.114 0 0 1 .479-3.265h15.5v-3.265H30.516c.348-1.088.7-2.177 1.132-3.265h13.626v-3.265H33.215a31.206 31.206 0 0 1 2-3.265h10.059v-3.265H37.7a38.509 38.509 0 0 1 3.265-3.265h4.353V2.133H25.9L0 36.48v13.453h29.123v19.24h16.151v-19.24h6.965V35.566Zm-26.729 0 10.578-14.1v14.1Z" fill="#ffd300"/></g></g></g><g transform="translate(593 451.555)" clip-path="url(#g-logo40)"><g data-name="Grupo 59"><path data-name="Trazado 51" d="M91.667 106.565H16.63v-75.04h75.037ZM20.245 35.147v67.809h67.807V35.147Z" fill="#fff"/><g data-name="Grupo 58"><g data-name="Grupo 57"><path data-name="Rectángulo 52" fill="rgb(252, 228, 0)" d="M20.245 35.147h67.807v67.81H20.245z"/><g data-name="Grupo 56" clip-path="url(#h-logo40)" transform="translate(20.245 35.147)"><g data-name="Grupo 55" fill="#dd171b" fill-rule="evenodd"><path data-name="Trazado 52" d="m67.806 13.021-16.287 3.262a31.284 31.284 0 0 1-17.012-2.207 32.347 32.347 0 0 0-10.75-3.912 26.963 26.963 0 0 0-7.606-.024l-10.87 1.945c-1.728.335-3.527.646-5.278.935V.679A15.286 15.286 0 0 1 8.377.488a21.371 21.371 0 0 1 4.483 2.016c3 1.591 5.878 3.479 9.238 4.224a29.932 29.932 0 0 0 14.2-.072l10.175-1.848 10.629-1.92 10.7-2.205Z"/><path data-name="Trazado 53" d="M14.207 52.167a31.387 31.387 0 0 1 20.563 2.184 26.2 26.2 0 0 0 17.876 3.239l15.159-2.736v12.292a17.736 17.736 0 0 1-6.473.552 13.8 13.8 0 0 1-3.432-.983l-7.87-4.127a26.282 26.282 0 0 0-15.26-1.776L2.209 66.789l-2.208.359V54.856l2.711-.552 7.126-1.32c1.446-.263 2.951-.528 4.367-.816Z"/><path data-name="Trazado 54" d="M-.004 32.462v-9.449l28.026-5.112a33.338 33.338 0 0 1 19.6 3.527 26.961 26.961 0 0 0 18.236 1.993l1.938-.406v9.454l-6.185-3.53a26.426 26.426 0 0 0-14.702-2.183L29.68 29.898a1406.99 1406.99 0 0 1-6.191 1.128l-15.693 2.9a11.082 11.082 0 0 1-7.8-1.464Z"/><path data-name="Trazado 55" d="M67.806 35.704v9.31l-27.781 5.112a33.342 33.342 0 0 1-19.6-3.527 26.952 26.952 0 0 0-18.237-1.991l-2.183.408v-9.31l6.431 3.384a26.438 26.438 0 0 0 14.708 2.183l17.229-3.144a1406.99 1406.99 0 0 1 6.191-1.128l15.693-2.9a11.06 11.06 0 0 1 7.553 1.607Z"/></g></g></g></g><path data-name="Trazado 56" d="M102.458 96.73V78.32h3c6.228 0 9.643 3.277 9.643 9.229 0 6.091-3.275 9.181-9.689 9.181Zm22.4-24.546v30.774h20.39V96.73h-13.52v-7.014h13.38v-6.23h-13.38v-5.122h13.518v-6.182Zm46.837 0-11.216 30.775h7.29l3.326-9.366h9.412l3.275 9.366h7.43l-11.441-30.774Zm4.059 6.363-2.86 9.092h5.768Zm91.177 8.677h-6.875v9.689a9.047 9.047 0 0 1-2.953.417c-5.261 0-9.135-4.107-9.135-9.689 0-6 4.107-10.011 10.2-10.011a16.112 16.112 0 0 1 8.766 2.677v-7.012a25.143 25.143 0 0 0-9.366-1.845c-9.965 0-16.886 6.689-16.886 16.286 0 9.458 6.781 15.872 16.886 15.872a27.957 27.957 0 0 0 9.369-1.616Zm34.739.278c0-9.183-6.828-15.872-16.148-15.872a15.941 15.941 0 1 0 .231 31.882c9.32 0 15.917-6.642 15.917-16.009Zm-16.052-9.6c-5.167 0-8.627 3.923-8.627 9.689s3.552 9.689 8.766 9.689c5.167 0 8.581-3.877 8.581-9.689s-3.511-9.687-8.724-9.687Zm18.712-5.721v30.774h7.013V83.346l12.407 19.609h6.507V72.181h-7.012l.009 19.139-11.911-19.139ZM121.256 50.49h-6.877v9.689a9.063 9.063 0 0 1-2.953.415c-5.259 0-9.135-4.107-9.135-9.689 0-6 4.107-10.011 10.2-10.011a16.127 16.127 0 0 1 8.766 2.675v-7.012a25.139 25.139 0 0 0-9.366-1.847c-9.965 0-16.886 6.689-16.886 16.287 0 9.457 6.782 15.869 16.886 15.869a27.975 27.975 0 0 0 9.369-1.615Zm34.706.276c0-9.181-6.828-15.871-16.148-15.871a15.941 15.941 0 1 0 .23 31.88c9.308 0 15.907-6.648 15.907-16.014Zm-16.051-9.6c-5.167 0-8.627 3.92-8.627 9.689s3.553 9.689 8.766 9.689c5.167 0 8.583-3.876 8.583-9.689s-3.524-9.692-8.737-9.692Zm18.358-5.721v30.774h12.734c6.782 0 10.749-3.369 10.749-9.136 0-3.967-2.26-6.827-6.413-8.027a6.746 6.746 0 0 0 4.194-6.321c.046-4.891-3.275-7.29-9.919-7.29Zm10.242 11.488c3 0 4.194-.831 4.194-2.907 0-1.984-1.157-2.721-4.428-2.721h-3v5.628Zm.923 13.015c3.413 0 4.889-1.062 4.889-3.553 0-2.583-1.523-3.6-5.167-3.6h-3.877v7.152Zm20.641-24.5h-6.9V66.23h6.875Zm2.993 0V66.23h20.39v-6.228h-13.52v-7.013h13.38v-6.228h-13.38V41.64h13.519v-6.182Zm108.666 15.317c0-9.181-6.828-15.871-16.148-15.871a15.94 15.94 0 1 0 .231 31.88c9.305-.006 15.9-6.65 15.9-16.017Zm-16.051-9.6c-5.167 0-8.627 3.92-8.627 9.689s3.552 9.689 8.766 9.689c5.167 0 8.581-3.876 8.581-9.689s-3.526-9.695-8.739-9.695ZM231.045 87.63l-2.907-9.092-2.86 9.092Zm-31.587 15.318V90.305h.876c4.429 0 4.891.461 7.842 8.073a15.422 15.422 0 0 0 .646 1.569l.6 1.43a13.757 13.757 0 0 0 .738 1.569h9.994l3.326-9.366h9.413l3.275 9.366h7.429l-11.441-30.774h-8.077l-9.093 24.957a129.684 129.684 0 0 1-2.24-4.933c-1.2-2.63-1.892-3.416-4.107-4.338a7.355 7.355 0 0 0 5.628-7.384c0-5.536-3.644-8.3-10.98-8.3h-10.886v30.774Zm0-18.456h3.044c2.953 0 4.429-1.061 4.429-3.275s-1.339-3.181-4.338-3.181h-3.138Zm24.024-18.283V53.568h.875c4.429 0 4.891.461 7.844 8.073a15.089 15.089 0 0 0 .647 1.569l.6 1.43a13.66 13.66 0 0 0 .737 1.569h13.851l.039-19.742 12.371 19.742h6.507V35.435h-7.012l.03 18.88-11.933-18.88h-7.015v28.649a64.051 64.051 0 0 1-4.254-8.622c-1.2-2.629-1.89-3.412-4.105-4.338a7.353 7.353 0 0 0 5.628-7.375c0-5.537-3.646-8.3-10.981-8.3h-10.889V66.23Zm0-18.455h3.046c2.951 0 4.428-1.062 4.428-3.276s-1.336-3.181-4.338-3.181h-3.139Zm-128 24.42v30.774h10.287c10.426 0 16.563-5.721 16.563-15.411 0-9.644-6.275-15.365-16.932-15.365Z" fill="#161615" fill-rule="evenodd"/></g></g></g></g></svg>',
       "subnav": {
         "text": "Carpeta del gestor"
       },
@@ -369,6 +369,25 @@
       "caller": exampleOffcanvas
     }
   },
+  {
+    "name": "con offcanvas y mobileTitle",
+    "description": "Menu mobile que sólo se muestra en anchuras pequeñas y que permite insertar dentro cualquier contenido con Nunjuks caller y título que sólo se muestra en mobile",
+    "data": {
+      "homepageUrl": "/",
+      "mobileTitle": {
+        "text": "Carpeta del gestor"
+      },
+      "subnav": {
+        "text": "Carpeta del gestor"
+      },
+      "offcanvas": {
+        "text": "Menú",
+        "textClose": "Cerrar menu",
+        "labelledId": "offcanvas-title"
+      },
+      "caller": exampleOffcanvas
+    }
+  },
   {
     "name": "con subnav text",
     "description": "Utilizar para mostrar el nombre de la app actual. Si no se proporcionan items en subnav, el texto será simple sin un dropdown.",

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

@@ -312,6 +312,25 @@
       "caller": exampleOffcanvas
     }
   },
+  {
+    "name": "con offcanvas y mobileTitle",
+    "description": "Menu mobile que sólo se muestra en anchuras pequeñas y que permite insertar dentro cualquier contenido con Nunjuks caller y título que sólo se muestra en mobile",
+    "data": {
+      "homepageUrl": "/",
+      "mobileTitle": {
+        "text": "Carpeta del gestor"
+      },
+      "subnav": {
+        "text": "Carpeta del gestor"
+      },
+      "offcanvas": {
+        "text": "Menú",
+        "textClose": "Cerrar menu",
+        "labelledId": "offcanvas-title"
+      },
+      "caller": exampleOffcanvas
+    }
+  },
   {
     "name": "con subnav text",
     "description": "Utilizar para mostrar el nombre de la app actual. Si no se proporcionan items en subnav, el texto será simple sin un dropdown.",

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

@@ -1,6 +1,6 @@
       <div id="header-offcanvas" class="hidden" role="dialog" aria-labelledby="header-offcanvas-button-text" aria-modal="true">
-        <div class="origin-top-left left-0 fixed inset-0 h-screen">
-          <div class="h-full overflow-auto relative w-offcanvas h-screen ml-offcanvas-negative bg-white z-10">
+        <div class="left-0 fixed top-0 h-screen w-offcanvas ml-offcanvas-negative">
+          <div class="h-full overflow-auto relative h-screen bg-white z-10">
             <div class="text-right p-sm">
               <button
                 onclick="closeDialog(this)"

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

@@ -16,11 +16,11 @@
       <div class="container mx-auto px-base">
         <div class="flex items-center justify-between min-h-14">
           <div class="flex flex-wrap items-center">
-            <div class="flex items-center flex-shrink-0">
+            <div class="flex items-center">
               <a href="{{ params.homepageUrl | default('/') }}" class="flex flex-wrap mr-4 text-black focus:outline-none focus:shadow-outline-black">
                 {% if not params.noLogo %}
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="144" height="32" class="fill-current {% if params.expandedLogo %} hidden sm:block{% else %} hidden{% endif %}" aria-label="Gobierno de Aragón. Ir a la página de inicio" role="img"><defs><clipPath id="b-logo-expanded"><path fill="gold" 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="gold" 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>
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" class="w-8 h-8 fill-current {%- if params.expandedLogo %} sm:hidden{% endif %}" ><title>Ir a la página de inicio</title><defs><clipPath id="b-logo-mini"><path fill="gold" d="M0 0h32v32.001H0z"/></clipPath><clipPath id="a-logo-mini"><path d="M0 0h32v32H0z"/></clipPath></defs><g clip-path="url(#a-logo-mini)"><path fill="gold" d="M0 .305h32v32.001H0z"/><g clip-path="url(#b-logo-mini)" transform="translate(0 .305)"><g fill="#dd171b" fill-rule="evenodd"><path d="m31.997 6.145-7.686 1.539a14.764 14.764 0 0 1-8.028-1.042 15.267 15.267 0 0 0-5.073-1.846 12.725 12.725 0 0 0-3.59-.011l-5.13.918a94.41 94.41 0 0 1-2.491.442V.324a7.213 7.213 0 0 1 3.952-.09 10.087 10.087 0 0 1 2.118.951 17.859 17.859 0 0 0 4.36 1.993 14.13 14.13 0 0 0 6.7-.034l4.8-.872 5.016-.906 5.048-1.04ZM6.705 24.619a14.812 14.812 0 0 1 9.7 1.03 12.363 12.363 0 0 0 8.437 1.529l7.154-1.291v5.8a8.37 8.37 0 0 1-3.055.26 6.509 6.509 0 0 1-1.619-.464l-3.714-1.948a12.4 12.4 0 0 0-7.2-.838l-15.366 2.82L0 31.686v-5.8l1.28-.26 3.363-.623c.679-.125 1.393-.249 2.061-.385ZM-.003 15.32v-4.462l13.23-2.417a15.734 15.734 0 0 1 9.252 1.665 12.723 12.723 0 0 0 8.606.94l.914-.192v4.462L29.08 13.65a12.472 12.472 0 0 0-6.941-1.031l-8.131 1.483c-.974.182-2.921.532-2.921.532l-7.406 1.371a5.23 5.23 0 0 1-3.684-.685ZM31.997 16.851v4.393l-13.11 2.413a15.735 15.735 0 0 1-9.252-1.665 12.721 12.721 0 0 0-8.606-.94l-1.03.193v-4.394l3.035 1.6a12.476 12.476 0 0 0 6.941 1.03l8.13-1.483c.974-.182 2.922-.532 2.922-.532l7.406-1.371a5.219 5.219 0 0 1 3.564.756Z"/></g></g></g></svg>
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="144" height="32" class="fill-current {% if params.expandedLogo %} hidden sm:block{% else %} hidden{% endif %}" aria-label="Gobierno de Aragón. Ir a la página de inicio" 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>
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" class="w-8 h-8 fill-current {%- if params.expandedLogo %} sm:hidden{% endif %}" ><title>Ir a la página de inicio</title><defs><clipPath id="b-logo-mini"><path fill="rgb(252, 228, 0)" d="M0 0h32v32.001H0z"/></clipPath><clipPath id="a-logo-mini"><path d="M0 0h32v32H0z"/></clipPath></defs><g clip-path="url(#a-logo-mini)"><path fill="rgb(252, 228, 0)" d="M0 .305h32v32.001H0z"/><g clip-path="url(#b-logo-mini)" transform="translate(0 .305)"><g fill="#dd171b" fill-rule="evenodd"><path d="m31.997 6.145-7.686 1.539a14.764 14.764 0 0 1-8.028-1.042 15.267 15.267 0 0 0-5.073-1.846 12.725 12.725 0 0 0-3.59-.011l-5.13.918a94.41 94.41 0 0 1-2.491.442V.324a7.213 7.213 0 0 1 3.952-.09 10.087 10.087 0 0 1 2.118.951 17.859 17.859 0 0 0 4.36 1.993 14.13 14.13 0 0 0 6.7-.034l4.8-.872 5.016-.906 5.048-1.04ZM6.705 24.619a14.812 14.812 0 0 1 9.7 1.03 12.363 12.363 0 0 0 8.437 1.529l7.154-1.291v5.8a8.37 8.37 0 0 1-3.055.26 6.509 6.509 0 0 1-1.619-.464l-3.714-1.948a12.4 12.4 0 0 0-7.2-.838l-15.366 2.82L0 31.686v-5.8l1.28-.26 3.363-.623c.679-.125 1.393-.249 2.061-.385ZM-.003 15.32v-4.462l13.23-2.417a15.734 15.734 0 0 1 9.252 1.665 12.723 12.723 0 0 0 8.606.94l.914-.192v4.462L29.08 13.65a12.472 12.472 0 0 0-6.941-1.031l-8.131 1.483c-.974.182-2.921.532-2.921.532l-7.406 1.371a5.23 5.23 0 0 1-3.684-.685ZM31.997 16.851v4.393l-13.11 2.413a15.735 15.735 0 0 1-9.252-1.665 12.721 12.721 0 0 0-8.606-.94l-1.03.193v-4.394l3.035 1.6a12.476 12.476 0 0 0 6.941 1.03l8.13-1.483c.974-.182 2.922-.532 2.922-.532l7.406-1.371a5.219 5.219 0 0 1 3.564.756Z"/></g></g></g></svg>
                 {% endif %}
                 {{ params.customLogoHtml | safe if params.customLogoHtml }}
               </a>
@@ -51,6 +51,15 @@
                 {% endif %}
               {% endcall %}
               {% endif %}
+              {% 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 }}
+                  {% else %}
+                    <p class="align-middle py-4 text-sm text-black overflow-hidden">{{ params.mobileTitle.text }}</p>
+                  {% endif %}
+                </div>
+              {% endif %}
             </div>
             {% if params.navigation.items %}
             {% from "./_macro.header.header__navigation.njk" import componentHeaderNavigation %}

package/src/templates/components/header/params.header.yaml

@@ -19,6 +19,26 @@ params:
   type: string
   required: false
   description: HTML for the custom logo. If provided there will appear a custom logo after the Gobierno de Aragón logo
+- name: mobileTitle
+  type: object
+  required: false
+  description: The title of the app that appears after the logo only in mobile.
+  - name: text
+    type: string
+    required: true
+    description: If `html` is set, this is not required. Text for the mobileTitle. If `html` is provided, the `text` argument will be ignored.
+  - name: html
+    type: string
+    required: true
+    description: If `text` is set, this is not required. HTML for the mobileTitle. If `html` is provided, the `text` argument will be ignored.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the mobileTitle.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the mobileTitle.
 - name: subnav
   type: object
   required: false

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

@@ -599,14 +599,14 @@
   },
   {
     "name": "con subtítulo",
-    "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.",
+    "description": "Si el título es un acrónimo, se pone en mayúsuculas. La descripción se puede usar sólo si el título es un acrónimo y mostrará el nombre extendido.",
     "data": {
       "title": {
         "homepageUrl": "/",
-        "text": "Titulo de cabecera"
+        "text": "INAEM"
       },
       "subtitle": {
-        "text": "Subtítulo, nombre extendido o lema"
+        "text": "Instituto Aragonés de Empleo."
       },
       "navigation": {
         "items": [
@@ -687,55 +687,6 @@
       "caller": exampleOffcanvas
     }
   },
-  {
-    "name": "con logo, subtítulo y banda de color claro",
-    "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.",
-    "data": {
-      "titleContainer": {
-        "backgroundColor": "#a12a48",
-        "classes": "bg-no-repeat bg-cover lg:bg-auto bg-center lg:bg-right bg-empleo lg:bg-empleo-lg text-white"
-      },
-      "logo": {
-        "url": logoUrlInaem,
-        "alt": "INAEM",
-        "classes": "lg:relative lg:top-3 inline-block w-16 lg:w-28 h-auto mb-base focus:outline-none focus:shadow-outline-black"
-      },
-      "title": {
-        "homepageUrl": "/",
-        "text": "INAEM"
-      },
-      "subtitle": {
-        "text": "Instituto Aragonés de Empleo."
-      },
-      "navigation": {
-        "items": [
-          {
-            "href": "#1",
-            "text": "Inicio"
-          },
-          {
-            "href": "#2",
-            "text": "Navigation item 2",
-            "active": true
-          },
-          {
-            "href": "#3",
-            "text": "Navigation item 3"
-          },
-          {
-            "href": "#4",
-            "text": "Navigation item 4"
-          }
-          ]
-      },
-      "offcanvas": {
-        "text": "Menú",
-        "textClose": "Cerrar menu",
-        "labelledId": "offcanvas-title"
-      },
-      "caller": exampleOffcanvas
-    }
-  },
   {
     "name": "con navegación personalizada",
     "description": "Tras nuestro menú de navegación tenemos una zona anidable para poder añadir una navegación personalizada",
@@ -876,7 +827,7 @@
   },
   {
     "name": "con elementos varios",
-    "description": "Con buscador en área superior, logo UE, menu de navegación, dropdown en anchuras grandes y menu mobile en pequeñas.",
+    "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": {
       "headerMini": {
         "customNavigationHtml": '<div class="flex-1 text-right">' + logoUE | safe +'</div>'

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

@@ -4,7 +4,7 @@
     <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">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="117" height="26" class="inline-block fill-current" aria-label="Gobierno de Aragón. Ir a aragon.es" role="img"><defs><clipPath id="b-logo-expanded"><path fill="gold" 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="gold" 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>
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="117" height="26" class="inline-block fill-current" aria-label="Gobierno de Aragón. Ir a aragon.es" 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>
         {{ params.customNavigationHtml | safe if params.customNavigationHtml }}
       </div>

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

@@ -144,8 +144,11 @@
           "text": "Datos del solicitante"
         }
       },
+      "hint": {
+        "text": "Necesitamos tus datos para identificarte posteriormente."
+      },
       "errorMessage": {
-        "text": "Error: Aqui va un mensaje de error"
+        "text": "Error: Estos campos no pueden estar vacíos"
       },
       "items": [
         {
@@ -179,14 +182,24 @@
           "formGroup": {
             "classes": "mr-base"
           },
-          "classes": "w-full lg:w-40 border-alert-base ring-2 ring-alert-base"
+          "classes": "w-full lg:w-40 border-alert-base ring-2 ring-alert-base",
+          "attributes": {
+            "aria-describedby": "datos-errors-hint datos-errors-error",
+            "aria-errormessage": "datos-errors-error",
+            "aria-invalid": "true"
+          }
         },
         {
           "name": "apellidos",
           "label": {
             "text": "Apellidos"
           },
-          "classes": "w-full lg:w-40 border-alert-base ring-2 ring-alert-base"
+          "classes": "w-full lg:w-40 border-alert-base ring-2 ring-alert-base",
+          "attributes": {
+            "aria-describedby": "datos-errors-hint datos-errors-error",
+            "aria-errormessage": "datos-errors-error",
+            "aria-invalid": "true"
+          }
         }
       ]
     }
@@ -200,8 +213,11 @@
           "text": "Datos del solicitante"
         }
       },
+      "hint": {
+        "text": "Necesitamos tus datos para identificarte posteriormente."
+      },
       "errorMessage": {
-        "text": "Error: Aqui va un mensaje de error"
+        "text": "Error: Estos campos no pueden estar vacíos"
       },
       "items": [
         {
@@ -235,7 +251,12 @@
           "formGroup": {
             "classes": "mr-base"
           },
-          "classes": "w-full lg:w-40 border-alert-base ring-2 ring-alert-base"
+          "classes": "w-full lg:w-40 border-alert-base ring-2 ring-alert-base",
+          "attributes": {
+            "aria-describedby": "datos-error-nombre-a-hint datos-error-nombre-a-error",
+            "aria-errormessage": "datos-error-nombre-a-error",
+            "aria-invalid": "true"
+          }
         },
         {
           "name": "apellidos",
@@ -256,8 +277,11 @@
           "text": "Datos del solicitante"
         }
       },
+      "hint": {
+        "text": "Necesitamos tus datos para identificarte posteriormente."
+      },
       "errorMessage": {
-        "text": "Error: Aqui va un mensaje de error"
+        "text": "Error: Estos campos no pueden estar vacíos"
       },
       "items": [
         {
@@ -298,7 +322,12 @@
           "label": {
             "text": "Apellidos"
           },
-          "classes": "w-full lg:w-40 border-alert-base ring-2 ring-alert-base"
+          "classes": "w-full lg:w-40 border-alert-base ring-2 ring-alert-base",
+          "attributes": {
+            "aria-describedby": "datos-error-nombre-b-hint datos-error-nombre-b-error",
+            "aria-errormessage": "datos-error-nombre-b-error",
+            "aria-invalid": "true"
+          }
         }
       ]
     }

package/src/templates/components/menu-navigation/_examples.menu-navigation.njk

@@ -726,7 +726,7 @@
         {
           "text": "Item 1",
           "id": "header-custom-nav-item-1",
-          "classes": "c-menu-navigation__button--header -mr-base uppercase",
+          "classes": "c-menu-navigation__button--header -mr-base",
           "sub": {
             "items": [
               {
@@ -750,7 +750,7 @@
         {
           "text": "Active Item 2",
           "id": "header-custom-nav-item-2",
-          "classes": "c-menu-navigation__button--header -mr-base uppercase",
+          "classes": "c-menu-navigation__button--header -mr-base",
           "active": true,
           "sub": {
             "items": [
@@ -776,7 +776,7 @@
         {
           "text": "Disabled Item 3",
           "id": "header-custom-nav-item-3",
-          "classes": "c-menu-navigation__button--header -mr-base uppercase",
+          "classes": "c-menu-navigation__button--header -mr-base",
           "disabled": true,
           "sub": {
             "items": [
@@ -801,7 +801,7 @@
         {
           "text": "Item 4 right",
           "id": "header-custom-nav-item-4",
-          "classes": "c-menu-navigation__button--header uppercase",
+          "classes": "c-menu-navigation__button--header",
           "sub": {
             "items": [
               {

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

@@ -4,7 +4,7 @@
 {% set labelledId = 'label-' + params.id %}
 
 <!-- modal -->
-<div id="{{ params.id }}" class="relative max-w-lg mx-auto p-base lg:p-lg border border-neutral-base rounded bg-white {%- if params.classes %} {{ params.classes }}{% endif %}"
+<div id="{{ params.id }}" class="mt-16 sm:mt-0 relative max-w-lg mx-auto p-base lg:p-lg border border-neutral-base rounded bg-white {%- if params.classes %} {{ params.classes }}{% endif %}"
 {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   {% if params.icon %}
   <div class="flex justify-center p-base">
@@ -116,4 +116,4 @@
     </div>
   {% endif %}
 </div>
-<!-- /modal -->
+<!-- /modal -->

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

@@ -175,4 +175,4 @@
       "id": "with-mixed-params"
     }
   }
-] %}
+] %}

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

@@ -1,5 +1,5 @@
 <!-- notification -->
-<div id="{{ params.id }}" class="c-notification {%- if params.classes %} {{ params.classes }}{% elseif params.type=="success" %} c-notification--success{% elseif params.type=="alert" %} c-notification--alert{% elseif params.type=="info" %} c-notification--primary{% else %} c-notification--primary{% endif %}"
+<div id="{{ params.id }}" data-module="c-notification" class="c-notification {%- if params.classes %} {{ params.classes }}{% elseif params.type=="success" %} c-notification--success{% elseif params.type=="alert" %} c-notification--alert{% elseif params.type=="info" %} c-notification--primary{% else %} c-notification--primary{% endif %}"
 {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   {% if params.icon or params.type %}
   <div class="h-full mr-base">
@@ -58,8 +58,8 @@
     </div>
     {% if params.isDismissible %}
       <div class="absolute top-0 right-0 p-sm">
-        <button class="p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none" aria-label="X: Cerrar notificación">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4" aria-hidden="true" role="presentation"><path d="M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z" fill="currentColor"/></svg>
+        <button class="c-notification-button__close p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none" aria-label="X: Cerrar notificación">
+          <svg class="pointer-events-none " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4" aria-hidden="true" role="presentation"><path d="M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z" fill="currentColor"/></svg>
         </button>
       </div>
     {% endif %}

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

@@ -149,7 +149,6 @@
         },
         {
           "text": "Tab 2",
-          "active": true,
           "panel": {
             "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
           }
@@ -162,6 +161,7 @@
         },
         {
           "text": "Tab 4",
+          "active": true,
           "panel": {
             "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
           }

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

@@ -70,5 +70,24 @@
         "aria-labelledby": "id-text"
       }
     }
+  },
+  {
+    "name": "isSwitch small",
+    "description": "Switch appearance, no change of button text, only changes in visual state. It needs an outer element with an id to use it with its aria-labelledby.",
+    "data": {
+      "classes": "",
+      "isSwitch": true,
+      "offState": {
+        "classes": "",
+        "html": '<span class="flex align-center justify-between gap-xs"><span class="text-xs" aria-hidden="true">Off</span><span class="bg-neutral-base relative inline-flex flex-shrink-0 h-4 w-8 border-2 border-neutral-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75"><span class="sr-only">Off</span><span aria-hidden="true" class="translate-x-0 pointer-events-none inline-block h-3 w-3 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200" /></span></span><span class="text-xs" aria-hidden="true">On</span></span>'
+      },
+      "onState": {
+        "classes": "",
+        "html": '<span class="flex align-center justify-between gap-xs"><span class="text-xs" aria-hidden="true">Off</span><span class="bg-primary-base relative inline-flex flex-shrink-0 h-4 w-8 border-2 border-primary-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75"><span class="sr-only">On</span><span aria-hidden="true" class="translate-x-4 pointer-events-none inline-block h-3 w-3 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200" /></span></span><span class="text-xs" aria-hidden="true">On</span></span>'
+      },
+      "attributes": {
+        "aria-labelledby": "id-text"
+      }
+    }
   }
 ] %}

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

@@ -1,20 +1,22 @@
 <!-- toggle -->
-<div class="relative c-toggle"
+<div data-module="c-toggle" class="relative c-toggle"
 >
   <!-- Button -->
   <button
-    aria-checked="false"
-    aria-pressed="false"
-    aria-expanded="false"
     {% if params.isSwitch %}
       role = "switch"
+      aria-checked="false"
+    {% elseif params.isExpandible == false %}
+      aria-pressed="false"
+    {% else %}
+      aria-expanded="false"
     {% endif %}
     type="button"
-    class="{{ params.classes if params.classes else '' }}"
+    class="c-toggle__button {{ params.classes if params.classes else '' }}"
     {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}
   >
-    <span class="c-button-is-not_pressed pointer-events-none">{{ params.offState.html | safe if params.offState.html else params.offState.text }}</span>
-    <span class="c-button-is_pressed hidden pointer-events-none">{{ params.onState.html | safe if params.onState.html else params.onState.text }}</span>
+    <span class="c-button--is-not-pressed pointer-events-none">{{ params.offState.html | safe if params.offState.html else params.offState.text }}</span>
+    <span class="c-button--is-pressed hidden pointer-events-none">{{ params.onState.html | safe if params.onState.html else params.onState.text }}</span>
   </button>
 </div>
 <!-- /toggle -->