desy-html 6.3.3 → 6.4.0

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.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,17 @@
 
   <h2>Changelog (English)</h2>
   <p>What's new in the latest version of desy-html</p>
+  <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.0",
   "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,29 @@
+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')) {
+        this.buttonClose = this.rootEl.querySelector('.c-notification-button__close');
+        this.buttonClose.addEventListener('click', this._closeNotification.bind(this));
+      }
+    }
+
+    _closeNotification() {
+      //Replicamos la transición de alpine con tailwind al cerrar.
+      this.rootEl.classList.add('transition-opacity', 'duration-150', 'ease-in-out', 'opacity-0');
+      //Añadimos display: none para que el componente "desaparezca del DOM"
+      setTimeout(() =>{
+        this.rootEl.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

@@ -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,7 +16,7 @@
       <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>
@@ -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/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/_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 -->