desy-html 6.3.2 → 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/_macro.example-render.njk

@@ -233,7 +233,7 @@ import componentTree %}
       {% elseif exampleComponent == "tree" %}
       {{ componentTree(example.data) }}
       {% endif %}
-      <button class="inline-block text-base text-primary-base font-normal hover:text-primary-dark underline cursor-pointer c-code-snippet__button mt-xl py-base">
+      <button class="block text-base text-primary-base font-normal hover:text-primary-dark underline cursor-pointer c-code-snippet__button mt-xl py-base">
         <span class="c-code-snippet__show pointer-events-none">Mostrar</span><span class="c-code-snippet__hide pointer-events-none hidden">Ocultar</span> código
       </button>
       <div class="c-markup hidden">

package/docs/ds/_ds.example.description-list.njk

@@ -102,7 +102,7 @@
   </div>
 </div>
 <p class="c-paragraph-base py-xl">
-  Ejemplo en caso real:
+  Ejemplos en caso real:
 </p>
 <div class="grid lg:grid-cols-1 gap-2xl mb-lg">
   <div>
@@ -149,4 +149,141 @@
     })  }}
   </div>
 </div>
+<div class="grid lg:grid-cols-2 gap-2xl mb-lg">
+  <div>
+    {{ componentDescriptionList({
+      "classes": "w-full py-sm border-t border-b border-neutral-base",
+      "items": [
+        {
+          "term": {
+            "text": "Código de procedimiento",
+            "classes": "lg:w-1/3"
+          },
+          "definition": {
+            "text": "G00345-BX",
+            "classes": "lg:flex-1 font-semibold"
+          },
+          "classes": "lg:flex py-sm"
+        },
+        {
+          "term": {
+            "text": "Nombre del procedimiento",
+            "classes": "lg:w-1/3"
+          },
+          "definition": {
+            "text": "Resolución definitiva",
+            "classes": "lg:flex-1 font-semibold"
+          },
+          "classes": "lg:flex py-sm"
+        },
+        {
+          "term": {
+            "text": "CSV",
+            "classes": "lg:w-1/3"
+          },
+          "definition": {
+            "text": "CSVK45WT8V5T110CPPC",
+            "classes": "lg:flex-1 font-semibold"
+          },
+          "classes": "lg:flex py-sm"
+        },
+        {
+          "term": {
+            "text": "Fecha de captura",
+            "classes": "lg:w-1/3"
+          },
+          "definition": {
+            "text": "13 de Diciembre de 2021. A las 11:48:08",
+            "classes": "lg:flex-1 font-semibold"
+          },
+          "classes": "lg:flex py-sm"
+        },
+        {
+          "term": {
+            "text": "Categoría",
+            "classes": "lg:w-1/3"
+          },
+          "definition": {
+            "text": "Documento simple",
+            "classes": "lg:flex-1 font-semibold"
+          },
+          "classes": "lg:flex py-sm"
+        }
+      ]
+    })  }}
+  </div>
+  <div>
+    {{ componentDescriptionList({
+      "classes": "w-full",
+      "items": [
+        {
+          "term": {
+            "text": "Activo no corriente",
+            "classes": "lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark"
+          },
+          "definition": {
+            "text": "3045,45€",
+            "classes": "lg:w-2/3 px-base py-sm lg:text-right"
+          },
+          "classes": "lg:flex -mb-px border-t border-b border-neutral-base"
+        },
+        {
+          "term": {
+            "text": "Activo corriente",
+            "classes": "lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark"
+          },
+          "definition": {
+            "text": "14,32€",
+            "classes": "lg:w-2/3 px-base py-sm lg:text-right"
+          },
+          "classes": "lg:flex -mb-px border-t border-b border-neutral-base"
+        },
+        {
+          "term": {
+            "text": "Total activo",
+            "classes": "lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark"
+          },
+          "definition": {
+            "text": "279,67€",
+            "classes": "lg:w-2/3 px-base py-sm lg:text-right"
+          },
+          "classes": "lg:flex -mb-px border-t border-b border-neutral-base"
+        },
+        {
+          "term": {
+            "text": "Capital",
+            "classes": "lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark"
+          },
+          "definition": {
+            "text": "100.704,23€",
+            "classes": "lg:w-2/3 px-base py-sm lg:text-right"
+          },
+          "classes": "lg:flex -mb-px border-t border-b border-neutral-base"
+        },
+        {
+          "term": {
+            "text": "Patrimonio neto",
+            "classes": "lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark"
+          },
+          "definition": {
+            "text": "2.345,74€",
+            "classes": "lg:w-2/3 px-base py-sm lg:text-right"
+          },
+          "classes": "lg:flex -mb-px border-t border-b border-neutral-base"
+        },
+        {
+          "term": {
+            "text": "Consolidación de cuentas",
+            "classes": "lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark"
+          },
+          "definition": {
+            "html": "<strong>Si</strong>",
+            "classes": "lg:w-2/3 px-base py-sm lg:text-right"
+          },
+          "classes": "lg:flex -mb-px border-t border-b border-neutral-base"
+        }
+      ]
+    })  }}
+  </div>
+</div>
 

package/docs/ds/_ds.example.header-advanced.njk

@@ -0,0 +1,146 @@
+{% from "components/header-advanced/_macro.header-advanced.njk" import componentHeaderAdvanced %}
+{% from "components/menu-navigation/_macro.menu-navigation.njk" import componentMenuNavigation %}
+
+<div class="grid lg:grid-cols-1 gap-xl mb-lg">
+  <div>
+    {# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #}
+    {% from "components/header-advanced/_macro.header-advanced.njk" import componentHeaderAdvanced %}
+    {% call componentHeaderAdvanced({
+      "title": {
+        "homepageUrl": "/",
+        "text": "Titulo de cabecera"
+      },
+      "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"
+      }
+    })  %}
+      <nav class="w-full p-2" aria-label="Menú móvil">
+        <h3 class="p-base text-base font-bold">Titulo de cabecera</h3>
+        <!-- nav -->
+        <ul class="text-sm" aria-label="Lista de páginas">
+          <li>
+            <span class="flex items-center px-base py-sm font-semibold"  aria-current="page"  id="nav-mobile-pages">
+              <strong>Inicio</strong>
+            </span>
+          </li>
+          <li>
+            <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-mobile-pages-2">
+              Navigation item 2
+            </a>
+          </li>
+          <li>
+            <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-mobile-pages-3">
+              Navigation item 3
+            </a>
+          </li>
+          <li>
+            <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-mobile-pages-3">
+              Navigation item 4
+            </a>
+          </li>
+        </ul>
+      </nav>
+    {% endcall %}
+  </div>
+  <div>
+    {% from "components/header-advanced/_macro.header-advanced.njk" import componentHeaderAdvanced %}
+    {% call componentHeaderAdvanced({
+      "classes": "c-header-advanced--salud",
+      "titleContainer": {
+        "backgroundColor": "#06857E",
+        "classes": "bg-no-repeat bg-cover lg:bg-auto bg-center lg:bg-right bg-salud lg:bg-salud-lg text-white"
+      },
+      "logo": {
+        "url": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjkuNDc3IiBoZWlnaHQ9IjYxLjE3NSIgdmlld0JveD0iMCAwIDEyOS40NzcgNjEuMTc1Ij48ZGVmcz48Y2xpcFBhdGggaWQ9ImEiPjxwYXRoIGRhdGEtbmFtZT0iUmVjdMOhbmd1bG8gMjIwIiBmaWxsPSIjZmZmIiBkPSJNMCAwaDEyOS40Nzd2NjEuMTc1SDB6Ii8+PC9jbGlwUGF0aD48L2RlZnM+PGcgZGF0YS1uYW1lPSJHcnVwbyAxNTY1Ij48ZyBkYXRhLW5hbWU9IkdydXBvIDE1NjQiIGNsaXAtcGF0aD0idXJsKCNhKSIgZmlsbD0iI2ZmZiI+PHBhdGggZGF0YS1uYW1lPSJUcmF6YWRvIDE1NzAiIGQ9Ik0yMC4yMjYgMTQuMTMxYTI0LjY0NSAyNC42NDUgMCAwIDAtOC4yMzMtMS40OTFDNS4xMjEgMTIuNjQuNjQ3IDE2LjE0MS42NDcgMjEuNTIzYzAgMy44OSAyLjIgNi4yMjMgNy41ODcgNy45MDlsMi4wMDguNTgyYzIuODUzLjkwOCAzLjc1OCAxLjYyMSAzLjc1OCAzLjE3NyAwIDEuODgtMS44MTUgMy4wNDctNC42NjcgMy4wNDdBMjAuNzY0IDIwLjc2NCAwIDAgMSAwIDMzLjU4djguMTY5YTI3LjEyNCAyNy4xMjQgMCAwIDAgMTAuMjQyIDIuMDFjNy42NSAwIDEyLjktNC4xNSAxMi45LTEwLjM3M2E4LjQ3MSA4LjQ3MSAwIDAgMC0yLjQ2My02LjAyOWMtMS40MjYtMS40MjYtMi4yNjgtMS44MTUtNi45MzUtMy4zMDctMy4zNzItMS4wMzctNC4wMi0xLjQyNi00LjAyLTIuNTkyIDAtMS4yMzIgMS41NTYtMi4wNzUgMy43NTktMi4wNzVhMTQuMzgyIDE0LjM4MiAwIDAgMSA2Ljc0MiAxLjg4WiIvPjxwYXRoIGRhdGEtbmFtZT0iVHJhemFkbyAxNTcxIiBkPSJNMjkuMTMzIDIxLjY1MWExNS4yNzIgMTUuMjcyIDAgMCAxIDguMS0yLjJjNC4wMiAwIDYuMDk0IDEuMzYxIDYuMDk0IDQuMDg1di41ODJhMTYuNTczIDE2LjU3MyAwIDAgMC01LjM4Mi0uODQyYy03LjMyNCAwLTEyLjE4NyA0LjE1LTEyLjE4NyAxMC40MzggMCA1LjgzNCA0LjQwOCAxMC4wNDkgMTAuMzA3IDEwLjA0OWExMS43NzEgMTEuNzcxIDAgMCAwIDcuNjUtMi43ODcgNy4zMzkgNy4zMzkgMCAwIDAgLjcxNCAyLjJoOS4wMTFjLTEuMjIzLTEuNjg1LTEuNjA3LTMuMjQzLTEuNjA3LTcuMTMyVjIyLjgxOWMwLTIuNzg5LS4yNi00LjQxLTEuMDM3LTUuNy0xLjY4Ni0yLjg1NC02LjAyOS00LjQ3NS0xMS44NjQtNC40NzVhMzMuODk0IDMzLjg5NCAwIDAgMC05Ljc5OSAxLjQ4N1ptMTQuMiA4LjA0djUuNjRjLTEuOTQyIDEuMTY2LTIuOTggMS41Ni00LjQwNiAxLjU2LTIuNTI4IDAtNC4zNDMtMS41NTYtNC4zNDMtMy43NTkgMC0yLjQgMi4wMS0zLjk1NiA1LjE4Ni0zLjk1NmExMS42IDExLjYgMCAwIDEgMy41NjMuNTE1IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkYXRhLW5hbWU9IlJlY3TDoW5ndWxvIDIxOCIgZD0iTTU2LjQ3NSAwaDguNDkzdjQzLjE3OGgtOC40OTN6Ii8+PHBhdGggZGF0YS1uYW1lPSJUcmF6YWRvIDE1NzIiIGQ9Ik05Ni4yNTUgMTMuMjkxaC04LjU1NlYzMy41OGE3LjczMiA3LjczMiAwIDAgMS01LjE4OCAyLjJjLTMuMTc2IDAtNC40NzItMS45NDUtNC40NzItNi40ODNWMTMuMjkxaC04LjU1OHYxOC44YzAgMy43NjEuNjQ3IDYuMjI0IDIuMiA4LjE2OWExMC4zMzUgMTAuMzM1IDAgMCAwIDguMTY5IDMuNSAxMS4xNiAxMS4xNiAwIDAgMCA4LjMtMy40MzZ2Mi44NTJoOC4xWiIvPjxwYXRoIGRhdGEtbmFtZT0iVHJhemFkbyAxNTczIiBkPSJNMTI5LjM3NiAwaC04LjQ5M3YxNC4zMjdhMTIuODk0IDEyLjg5NCAwIDAgMC02LjYxMi0xLjY4NmMtOC4yMzQgMC0xNC4yIDYuNjc4LTE0LjIgMTUuODgzIDAgOC45NDggNS41NzQgMTUuMjM2IDEzLjM1NSAxNS4yMzZhMTAuMjMzIDEwLjIzMyAwIDAgMCA3Ljc4LTMuMTc3djIuNTkzaDguMTY4Wm0tOC40OTMgMjIuMDQxdjExLjQxMWE3LjQ0NCA3LjQ0NCAwIDAgMS01LjA1NyAyLjA3NWMtMy44MjQgMC02LjYxMy0zLjE3OS02LjYxMy03LjQ1NyAwLTQuNDA4IDIuODU0LTcuNTg1IDYuODczLTcuNTg1YTguMzU4IDguMzU4IDAgMCAxIDQuOCAxLjU1NiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggZGF0YS1uYW1lPSJUcmF6YWRvIDE1NzQiIGQ9Ik0uNTc3IDUzLjIzMmMyLjE0NiAyLjMxIDguNzgzLjU5NCA4Ljc4My41OTRsMjIuMTgzLTQuMmM2LjQwNi0xLjA1IDkuNzQ0LjY3NiA5Ljc0NC42NzZsNi4wOSAzLjA0N3YtNS45MDhILjU3N1oiLz48cGF0aCBkYXRhLW5hbWU9IlRyYXphZG8gMTU3NSIgZD0iTS41NzcgNTMuMjMyYzIuMTQ2IDIuMzEgOC43ODMuNTk0IDguNzgzLjU5NGwyMi4xODMtNC4yYzYuNDA2LTEuMDUgOS43NDQuNjc2IDkuNzQ0LjY3Nmw2LjA5IDMuMDQ3di01LjkwOEguNTc3WiIvPjxwYXRoIGRhdGEtbmFtZT0iVHJhemFkbyAxNTc2IiBkPSJNNDcuMzcgNTUuNDM3Yy0yLjE0Ni0yLjMxLTguNzgyLS41OTQtOC43ODItLjU5NGwtMjIuMTgzIDQuMmMtNi40MDggMS4wNS05Ljc0NS0uNjc2LTkuNzQ1LS42NzZMLjU3NiA1NS4zMnY1Ljc0aDQ2LjhaIi8+PHBhdGggZGF0YS1uYW1lPSJUcmF6YWRvIDE1NzciIGQ9Ik00Ny4zNyA1NS40MzdjLTIuMTQ2LTIuMzEtOC43ODItLjU5NC04Ljc4Mi0uNTk0bC0yMi4xODMgNC4yYy02LjQwOCAxLjA1LTkuNzQ1LS42NzYtOS43NDUtLjY3NkwuNTc2IDU1LjMydjUuNzRoNDYuOFoiLz48cGF0aCBkYXRhLW5hbWU9IlRyYXphZG8gMTU3OCIgZD0iTTU1LjkzNSA1NC4wMzhoLS43Njl2Mi40MzJhMS45MzUgMS45MzUgMCAwIDAtMS4xMjYtLjMxNiAyLjM1NCAyLjM1NCAwIDAgMC0yLjMxMyAyLjYgMi4xODEgMi4xODEgMCAwIDAgMi4xNDYgMi40MiAxLjk3NyAxLjk3NyAwIDAgMCAxLjMyNS0uNDgzdi4zNTdoLjczN1ptLS43NjkgMy4xNzd2Mi43ODdhMS42IDEuNiAwIDAgMS0xLjEyNi40NzQgMS41NzQgMS41NzQgMCAwIDEtMS41MTQtMS43NzQgMS42MzkgMS42MzkgMCAwIDEgMS41NzgtMS44MzkgMS43NjQgMS43NjQgMCAwIDEgMS4wNjIuMzU3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkYXRhLW5hbWU9IlRyYXphZG8gMTU3OSIgZD0iTTYxLjYxMyA1OC40NDFhMy44NDMgMy44NDMgMCAwIDAtLjIxLTEuMDMyIDEuODQ1IDEuODQ1IDAgMCAwLTEuNzgtMS4yNTFjLTEuMjMxIDAtMi4wNjIgMS0yLjA2MiAyLjQ2MWEyLjM4NiAyLjM4NiAwIDAgMCAyLjQyIDIuNTU2IDMuMSAzLjEgMCAwIDAgMS42LS40MzF2LS45MjZhMi4wNDEgMi4wNDEgMCAwIDEtMS41LjY2MyAxLjcwNSAxLjcwNSAwIDAgMS0xLjctMS44NTJ2LS4xNzhabS0uOTE1LS42OTVoLTIuMjA3YTEuMTE0IDEuMTE0IDAgMCAxIDEuMTM2LS44ODMgMS4wMzYgMS4wMzYgMCAwIDEgMS4wNzIuODgzIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkYXRhLW5hbWU9IlRyYXphZG8gMTU4MCIgZD0iTTY4LjM2IDU2LjM5OWEyLjgxNCAyLjgxNCAwIDAgMC0xLjEzNi0uMjQxYy0uOTY4IDAtMS42MzEuNTI0LTEuNjMxIDEuMyAwIC41NjguMjc1LjgyMSAxLjI5NSAxLjE4OC45NDYuMzU4IDEuMTM0LjUxNiAxLjEzNC45NTggMCAuNTI2LS40NTEuODczLTEuMTQ2Ljg3M2EyLjk0IDIuOTQgMCAwIDEtMS40NjItLjQ0MXYuODM5YTQuNTMyIDQuNTMyIDAgMCAwIDEuNDMuMjk1YzEuMTU3IDAgMS45OS0uNjczIDEuOTktMS42MmExLjMyMSAxLjMyMSAwIDAgMC0uNC0uOTU4IDIuNjcyIDIuNjcyIDAgMCAwLTEuMTQ2LS41NzZjLS43NDgtLjI2My0uODg2LS4zNTgtLjg4Ni0uNjIxIDAtLjMxNi4zNi0uNTM2Ljg1NC0uNTM2YTIuMjIgMi4yMiAwIDAgMSAxLjEuMzI1WiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggZGF0YS1uYW1lPSJUcmF6YWRvIDE1ODEiIGQ9Ik03MC42NDQgNTcuMTlhMi42MDggMi42MDggMCAwIDEgMS4zLS4zMjdjLjY5NCAwIDEuMDYyLjI1MyAxLjA2Mi43Mzd2LjNhMi45NjIgMi45NjIgMCAwIDAtLjk2OC0uMTU3IDEuOCAxLjggMCAwIDAtMS45NjMgMS43NzEgMS42MjcgMS42MjcgMCAwIDAgMS42NjMgMS42NjIgMS45MjcgMS45MjcgMCAwIDAgMS4xNjYtLjQuOTUuOTUgMCAwIDAgLjEyNi0uMDg0Ljk2My45NjMgMCAwIDAgLjEyNy4zNTdoLjgzMWExLjUyIDEuNTIgMCAwIDEtLjIxLS45bC4wMDktLjE0N3YtMi40MzRhMi4wNjggMi4wNjggMCAwIDAtLjEtLjcwNWMtLjE5MS0uNDQxLS44NDItLjctMS43MTUtLjdhMy42MyAzLjYzIDAgMCAwLTEuMzI1LjI0Wm0yLjM2NSAxLjMzNXYxLjQ4NGExLjYwOSAxLjYwOSAwIDAgMS0xLjA3Mi40NzQgMS4wMTEgMS4wMTEgMCAwIDEtMS4wNjItLjk4YzAtLjY0Mi41MzYtMS4wNTIgMS4zNTctMS4wNTJhNS4xNDQgNS4xNDQgMCAwIDEgLjc3Ny4wNzQiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGRhdGEtbmFtZT0iUmVjdMOhbmd1bG8gMjE5IiBkPSJNNzUuNjY4IDU0LjA0M2guNzY5djcuMDA1aC0uNzY5eiIvPjxwYXRoIGRhdGEtbmFtZT0iVHJhemFkbyAxNTgyIiBkPSJNODIuMTUyIDU2LjI4NWgtLjc3N3YzLjYwOGExLjc3MiAxLjc3MiAwIDAgMS0xLjI1MS41OWMtLjczNyAwLTEuMDQyLS40MTItMS4wNDItMS4zNjh2LTIuODNoLS43NzR2My4wNzJjMCAxLjE3OC42IDEuODE5IDEuNjkzIDEuODE5YTEuOTI4IDEuOTI4IDAgMCAwIDEuNC0uNTU4bC4wMTIuNDMxaC43NDZaIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkYXRhLW5hbWU9IlRyYXphZG8gMTU4MyIgZD0iTTg3Ljk4NiA1NC4wMzhoLS43Njl2Mi40MzJhMS45MzUgMS45MzUgMCAwIDAtMS4xMjYtLjMxNiAyLjM1NCAyLjM1NCAwIDAgMC0yLjMxMyAyLjYgMi4xODEgMi4xODEgMCAwIDAgMi4xNDYgMi40MiAxLjk3OCAxLjk3OCAwIDAgMCAxLjMyNS0uNDgzdi4zNTdoLjczN1ptLS43NjkgMy4xNzd2Mi43ODdhMS42IDEuNiAwIDAgMS0xLjEyNi40NzQgMS41NzQgMS41NzQgMCAwIDEtMS41MTQtMS43NzkgMS42MzkgMS42MzkgMCAwIDEgMS41NzgtMS44MzkgMS43NjQgMS43NjQgMCAwIDEgMS4wNjIuMzU3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkYXRhLW5hbWU9IlRyYXphZG8gMTU4NCIgZD0iTTU0LjUxNCA0Ny42YTIuODA5IDIuODA5IDAgMCAwLTEuMTM2LS4yNDFjLS45NjcgMC0xLjYzLjUyNC0xLjYzIDEuMyAwIC41NjguMjczLjgxOSAxLjI5MyAxLjE4OC45NDYuMzU4IDEuMTM2LjUxNiAxLjEzNi45NTggMCAuNTI2LS40NTIuODcxLTEuMTQ2Ljg3MWEyLjkyMSAyLjkyMSAwIDAgMS0xLjQ2Mi0uNDQxdi44NDZhNC41MzIgNC41MzIgMCAwIDAgMS40My4yOTVjMS4xNTcgMCAxLjk4OC0uNjczIDEuOTg4LTEuNjJhMS4zMjEgMS4zMjEgMCAwIDAtLjQtLjk1OCAyLjY2OCAyLjY2OCAwIDAgMC0xLjE0Ni0uNTc4Yy0uNzQ3LS4yNjItLjg4NC0uMzU3LS44ODQtLjYyIDAtLjMxNi4zNTgtLjUzNi44NTItLjUzNmEyLjIyIDIuMjIgMCAwIDEgMS4xLjMyNVoiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGRhdGEtbmFtZT0iVHJhemFkbyAxNTg1IiBkPSJNNjAuMjM2IDQ5LjY0YTMuOTYxIDMuOTYxIDAgMCAwLS4yMS0xLjAzIDEuODQ0IDEuODQ0IDAgMCAwLTEuNzc3LTEuMjUxYy0xLjIzMSAwLTIuMDYyIDEtMi4wNjIgMi40NjFhMi4zODUgMi4zODUgMCAwIDAgMi40MTkgMi41NTYgMy4wOTMgMy4wOTMgMCAwIDAgMS42LS40MzJ2LS45MjVhMi4wNDEgMi4wNDEgMCAwIDEtMS41LjY2MiAxLjcgMS43IDAgMCAxLTEuNy0xLjg1MXYtLjE3OFptLS45MTUtLjY5NGgtMi4yMDhhMS4xMTUgMS4xMTUgMCAwIDEgMS4xMzctLjg4MyAxLjAzNyAxLjAzNyAwIDAgMSAxLjA3Mi44ODMiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGRhdGEtbmFtZT0iVHJhemFkbyAxNTg2IiBkPSJNNjEuODIgNDcuNDg2djQuNzY0aC43Nzd2LTMuNjA4YTEuMzg0IDEuMzg0IDAgMCAxIDEuMDExLS41IDEuNDM4IDEuNDM4IDAgMCAxIC43NzcuMjUzdi0uOGExLjUzOCAxLjUzOCAwIDAgMC0uNjczLS4xNTcgMS41OSAxLjU5IDAgMCAwLTEuMTQ3LjQ5NHYtLjQ0MloiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGRhdGEtbmFtZT0iVHJhemFkbyAxNTg3IiBkPSJNNjkuNzExIDQ3LjQ4NmgtLjgzOWwtMS4yOTUgMy43LTEuMzU3LTMuN2gtLjg0MmwxLjc4OSA0Ljc2NGguOFoiLz48cGF0aCBkYXRhLW5hbWU9IlRyYXphZG8gMTU4OCIgZD0iTTcwLjk4NCA1Mi4yNTFoLjc2OXYtNC43NjRoLS43NjlabS45MzYtNi4xNzVhLjU1Mi41NTIgMCAwIDAtLjU0Ni0uNTU2LjU2MS41NjEgMCAwIDAtLjU1OC41NTYuNTUyLjU1MiAwIDAgMCAxLjEgMCIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggZGF0YS1uYW1lPSJUcmF6YWRvIDE1ODkiIGQ9Ik03Ni44NTkgNDcuNTY5YTIuMjA4IDIuMjA4IDAgMCAwLTEuMDItLjIxIDIuNDU5IDIuNDU5IDAgMCAwLTIuNDYxIDIuNTU2IDIuMzY3IDIuMzY3IDAgMCAwIDIuMzY1IDIuNDYxIDIuOTUxIDIuOTUxIDAgMCAwIDEuMTE1LS4ydi0uODA5YTEuODQ4IDEuODQ4IDAgMCAxLTEuMDMyLjMxNSAxLjY4NiAxLjY4NiAwIDAgMS0xLjY1MS0xLjc3NyAxLjcxOCAxLjcxOCAwIDAgMSAxLjY2My0xLjgzOSAxLjgyIDEuODIgMCAwIDEgMS4wMi4zMTRaIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkYXRhLW5hbWU9IlRyYXphZG8gMTU5MCIgZD0iTTc4LjM5OSA1Mi4yNTFoLjc2OXYtNC43NjRoLS43NjlabS45MzYtNi4xNzVhLjU1Mi41NTIgMCAwIDAtLjU0Ni0uNTU2LjU2MS41NjEgMCAwIDAtLjU1OC41NTYuNTUyLjU1MiAwIDAgMCAxLjEgMCIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggZGF0YS1uYW1lPSJUcmF6YWRvIDE1OTEiIGQ9Ik04NS4zNjcgNDkuODgxYTIuMyAyLjMgMCAxIDAtNC41NzQuMDEgMi4zIDIuMyAwIDEgMCA0LjU3NC0uMDFtLS44MDkuMDJjMCAxLjA3Mi0uNiAxLjc3Ny0xLjQ5NCAxLjc3Ny0uODczIDAtMS40NzItLjcxNC0xLjQ3Mi0xLjc3NyAwLTEuMTI2LjU5LTEuODUxIDEuNDk0LTEuODUxczEuNDcyLjcxNSAxLjQ3MiAxLjg1MSIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggZGF0YS1uYW1lPSJUcmF6YWRvIDE1OTIiIGQ9Ik04OS45NzggNDguMzlhMi42IDIuNiAwIDAgMSAxLjMtLjMyN2MuNjk1IDAgMS4wNjMuMjUzIDEuMDYzLjczNXYuMzA2YTIuOTY3IDIuOTY3IDAgMCAwLS45NjgtLjE1NyAxLjggMS44IDAgMCAwLTEuOTY2IDEuNzY2IDEuNjI3IDEuNjI3IDAgMCAwIDEuNjY1IDEuNjY4IDEuOTMxIDEuOTMxIDAgMCAwIDEuMTY3LS40LjgzOS44MzkgMCAwIDAgLjEyNi0uMDg1Ljk2MS45NjEgMCAwIDAgLjEyNy4zNThoLjgyOWExLjUyMyAxLjUyMyAwIDAgMS0uMjEtLjlsLjAxLS4xNDd2LTIuNDM4YTIuMDIyIDIuMDIyIDAgMCAwLS4xLS43MDVjLS4xOTEtLjQ0Mi0uODQyLS43LTEuNzE0LS43YTMuNjM3IDMuNjM3IDAgMCAwLTEuMzI2LjI0Wm0yLjM2NyAxLjMzNXYxLjQ4MmExLjYgMS42IDAgMCAxLTEuMDcyLjQ3NCAxLjAxMSAxLjAxMSAwIDAgMS0xLjA2My0uOTc4YzAtLjY0Mi41MzctMS4wNTIgMS4zNTctMS4wNTJhNS4xNDQgNS4xNDQgMCAwIDEgLjc3OS4wNzQiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGRhdGEtbmFtZT0iVHJhemFkbyAxNTkzIiBkPSJNOTQuOTkzIDQ3LjQ4NnY0Ljc2NGguNzc3di0zLjYwOGExLjM4NCAxLjM4NCAwIDAgMSAxLjAxMS0uNSAxLjQzOCAxLjQzOCAwIDAgMSAuNzc3LjI1M3YtLjhhMS41MzcgMS41MzcgMCAwIDAtLjY3Mi0uMTU3IDEuNTkxIDEuNTkxIDAgMCAwLTEuMTQ5LjQ5NHYtLjQ0MloiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGRhdGEtbmFtZT0iVHJhemFkbyAxNTk0IiBkPSJNOTkuMjU2IDQ4LjM5YTIuNiAyLjYgMCAwIDEgMS4zLS4zMjdjLjY5NSAwIDEuMDYzLjI1MyAxLjA2My43MzV2LjMwNmEyLjk2OCAyLjk2OCAwIDAgMC0uOTY4LS4xNTcgMS44IDEuOCAwIDAgMC0xLjk2NyAxLjc2NiAxLjYyNiAxLjYyNiAwIDAgMCAxLjY2NiAxLjY2OCAxLjkzMSAxLjkzMSAwIDAgMCAxLjE2Ny0uNC45Mi45MiAwIDAgMCAuMTI2LS4wODUuOTYxLjk2MSAwIDAgMCAuMTI3LjM1OGguODI5YTEuNTIzIDEuNTIzIDAgMCAxLS4yMS0uOWwuMDEtLjE0N3YtMi40MzhhMi4wNTYgMi4wNTYgMCAwIDAtLjEtLjcwNWMtLjE5MS0uNDQyLS44NDItLjctMS43MTUtLjdhMy42MyAzLjYzIDAgMCAwLTEuMzI1LjI0Wm0yLjM2NyAxLjMzNXYxLjQ4MmExLjYgMS42IDAgMCAxLTEuMDcyLjQ3NCAxLjAxIDEuMDEgMCAwIDEtMS4wNjMtLjk3OGMwLS42NDIuNTM3LTEuMDUyIDEuMzU3LTEuMDUyYTUuMTYxIDUuMTYxIDAgMCAxIC43NzkuMDc0IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkYXRhLW5hbWU9IlRyYXphZG8gMTU5NSIgZD0iTTEwOC4xODEgNDYuNjMxYS45ODYuOTg2IDAgMCAwLS40NDEtLjA4NWMtLjUzNiAwLS44NzQuMjIzLTEuMzE1Ljg4NGEyLjAyNSAyLjAyNSAwIDAgMC0uNTQ4LS4wNzIgMS42NTUgMS42NTUgMCAwIDAtMS43NTkgMS41OSAxLjQgMS40IDAgMCAwIC44NjEgMS4zYy0uNDQxLjA5NC0uNjYuMjk1LS42Ni42MXMuMjA5LjUuNi41NjhhMS40NDYgMS40NDYgMCAwIDAtMS4yNTEgMS40MmMwIDEgLjkxNiAxLjY3MiAyLjI4MSAxLjY3MiAxLjMyNiAwIDIuMjIxLS43IDIuMjIxLTEuNzY3YTEuNDIxIDEuNDIxIDAgMCAwLS41NzktMS4xNzggMy4wMzMgMy4wMzMgMCAwIDAtMS43ODctLjQzMWMtLjQ3NC0uMDEyLS42NzMtLjEwNS0uNjczLS4zNDggMC0uMjIxLjE4OS0uMzE1LjYyLS4zMTVhMi41MDUgMi41MDUgMCAwIDAgMS4wOTQtLjE1NyAxLjQ2NiAxLjQ2NiAwIDAgMCAuMDc0LTIuNy43MjQuNzI0IDAgMCAxIC42MzEtLjM3OS45NTMuOTUzIDAgMCAxIC42My4yNzVabS0xLjIgMi4zMzVhLjkzOC45MzggMCAwIDEtMS4wNjIuOS44OTIuODkyIDAgMCAxLS45OS0uOS45MjcuOTI3IDAgMCAxIDEuMDMyLS45Ljk0OS45NDkgMCAwIDEgMS4wMi45bS0xLjA2MyAyLjc5OWMuOSAwIDEuNDQxLjM3OSAxLjQ0MSAxLjAxIDAgLjY1My0uNTQ4IDEuMDUtMS40NzIgMS4wNS0uODYzIDAtMS40Mi0uNDE5LTEuNDItMS4wNXMuNTM2LTEuMDEgMS40NTItMS4wMSIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggZGF0YS1uYW1lPSJUcmF6YWRvIDE1OTYiIGQ9Ik0xMTMuNzg4IDQ5Ljg4MWEyLjMgMi4zIDAgMSAwLTQuNTc0LjAxIDIuMyAyLjMgMCAxIDAgNC41NzQtLjAxbS0uODA5LjAyYzAgMS4wNzItLjYgMS43NzctMS40OTQgMS43NzctLjg3MyAwLTEuNDcyLS43MTQtMS40NzItMS43NzcgMC0xLjEyNi41OS0xLjg1MSAxLjQ5NC0xLjg1MXMxLjQ3Mi43MTUgMS40NzIgMS44NTEiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGRhdGEtbmFtZT0iVHJhemFkbyAxNTk3IiBkPSJNMTE1LjQxNCA0Ny40ODF2NC43NjRoLjc3N3YtMy41NjRhMS42MDUgMS42MDUgMCAwIDEgMS4yMzEtLjYyMWMuNzQ3IDAgMS4wNC4zOSAxLjA1MiAxLjM3OHYyLjgwN2guNzY5di0yLjk2NGExLjkwNyAxLjkwNyAwIDAgMC0uMzI3LTEuMyAxLjcgMS43IDAgMCAwLTEuMzc3LS42MiAxLjkgMS45IDAgMCAwLTEuMzguNTY4di0uNDQ4WiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggZGF0YS1uYW1lPSJUcmF6YWRvIDE1OTgiIGQ9Ik0xMjQuODk2IDQ5LjY0MWEzLjc4IDMuNzggMCAwIDAtLjIxMS0xLjAzIDEuODQyIDEuODQyIDAgMCAwLTEuNzc4LTEuMjUxYy0xLjIzIDAtMi4wNiAxLTIuMDYgMi40NTlhMi4zODUgMi4zODUgMCAwIDAgMi40MiAyLjU1MyAzLjA5IDMuMDkgMCAwIDAgMS42LS40MzJ2LS45MjVhMi4wNDcgMi4wNDcgMCAwIDEtMS41LjY2MiAxLjcgMS43IDAgMCAxLTEuNy0xLjg1MXYtLjE3NFptLS45MTUtLjY5NGgtMi4yMDdhMS4xMTEgMS4xMTEgMCAwIDEgMS4xMzQtLjg4MyAxLjAzOCAxLjAzOCAwIDAgMSAxLjA3NC44ODNtLS4yMTEtMy41NjZoLTEuMDJsLS44MzEgMS4yNzFoLjcyNVoiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGRhdGEtbmFtZT0iVHJhemFkbyAxNTk5IiBkPSJNMTI5LjAwNCA0Ny42YTIuODExIDIuODExIDAgMCAwLTEuMTM3LS4yNDFjLS45NjcgMC0xLjYyOC41MjQtMS42MjggMS4zIDAgLjU2OC4yNzMuODE5IDEuMjkzIDEuMTg4Ljk0Ni4zNTggMS4xMzYuNTE2IDEuMTM2Ljk1OCAwIC41MjYtLjQ1Mi44NzEtMS4xNDcuODcxYTIuOTI1IDIuOTI1IDAgMCAxLTEuNDYyLS40NDF2Ljg0NmE0LjU0IDQuNTQgMCAwIDAgMS40MzIuMjk1YzEuMTU3IDAgMS45ODgtLjY3MyAxLjk4OC0xLjYyYTEuMzIxIDEuMzIxIDAgMCAwLS40LS45NTggMi42NzcgMi42NzcgMCAwIDAtMS4xNDYtLjU3OGMtLjc0OC0uMjYyLS44ODQtLjM1Ny0uODg0LS42MiAwLS4zMTYuMzU4LS41MzYuODUyLS41MzZhMi4yMiAyLjIyIDAgMCAxIDEuMS4zMjVaIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L2c+PC9nPjwvc3ZnPg==",
+        "alt": "Servicio Aragonés de Salud",
+        "classes": "inline-block w-16 lg:w-28 h-auto mb-base focus:outline-none focus:shadow-outline-black"
+      },
+      "title": {
+        "homepageUrl": "/",
+        "text": "Salud Informa"
+      },
+      "subtitle": {
+        "text": "Te ayudamos a coger las riendas de tu salud y bienestar."
+      },
+      "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"
+      }
+    })  %}
+      <nav class="w-full p-2" aria-label="Menú móvil">
+        <h3 class="p-base text-base font-bold">Titulo de cabecera</h3>
+        <!-- nav -->
+        <ul class="text-sm" aria-label="Lista de páginas">
+          <li>
+            <span class="flex items-center px-base py-sm font-semibold"  aria-current="page"  id="nav-mobile-pages">
+              <strong>Inicio</strong>
+            </span>
+          </li>
+          <li>
+            <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-mobile-pages-2">
+              Navigation item 2
+            </a>
+          </li>
+          <li>
+            <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-mobile-pages-3">
+              Navigation item 3
+            </a>
+          </li>
+          <li>
+            <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-mobile-pages-3">
+              Navigation item 4
+            </a>
+          </li>
+        </ul>
+      </nav>
+    {% endcall %}
+  </div>
+  <div>
+
+  </div>
+</div>

package/docs/ds/_ds.example.header.njk

@@ -5,36 +5,12 @@
   <div>
     {{ componentHeader({
       "homepageUrl": "/",
-      "subnav": {
-        "text": "Carpeta del gestor"
-      },
-      "navigation": {
-        "items": [
-          {
-            "href": "#1",
-            "text": "Navegación item 1"
-          },
-          {
-            "href": "#2",
-            "text": "Navegación item 2",
-            "active": true
-          },
-          {
-            "href": "#3",
-            "text": "Navegación item 3"
-          },
-          {
-            "href": "#4",
-            "text": "Navegación item 4"
-          }
-        ]
-      }
+      "expandedLogo": true
     })  }}
   </div>
   <div>
     {% call componentHeader({
       "homepageUrl": "/",
-      "expandedLogo": true,
       "subnav": {
         "text": "Carpeta ciudadana",
         "items": [

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.example.pagination.njk

@@ -125,4 +125,67 @@
       }
     })  }}
   </div>
+  <div>
+    {{ componentPagination({
+      "id": "with-items-listbox",
+      "idPrefix": "with-items-listbox",
+      "totalItems": "64",
+      "itemsPerPage": "10",
+      "hasSelect": true,
+      "itemsListbox": {
+        "items": [
+          {
+            "text": "10",
+            "active": true
+          },
+          {
+            "text": "25"
+          },
+          {
+            "text": "50"
+          },
+          {
+            "text": "75"
+          },
+          {
+            "text": "100"
+          }
+        ]
+      },
+      "items": [
+        {
+          "href": "#",
+          "text": 1
+        },
+        {
+          "href": "#",
+          "text": 2,
+          "active": true
+        },
+        {
+          "href": "#",
+          "text": 3
+        },
+        {
+          "href": "#",
+          "text": 4
+        },
+        {
+          "href": "#",
+          "text": 5
+        },
+        {
+          "href": "#",
+          "text": 6
+        }
+      ],
+      "hasPrevious": false,
+      "hasNext": true,
+      "previousText": "Anterior",
+      "nextText": "Siguiente",
+      "attributes": {
+        "aria-label": "Paginación"
+      }
+    })  }}
+  </div>
 </div>

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

@@ -7,7 +7,12 @@
   }) }}
   <div class="pb-lg"></div>
   {{ DSSubsectionTitle({
-    title: "Cabecera de página"
+    title: "Cabecera de página para sitios web o portales"
+  }) }}
+  {% include "ds/_ds.example.header-advanced.njk" %}
+  <div class="pb-lg"></div>
+  {{ DSSubsectionTitle({
+    title: "Cabecera de página para apps"
   }) }}
   {% include "ds/_ds.example.header.njk" %}
   <div class="pb-lg"></div>

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.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>
+    <li>Fixed bad "Show code" button position in docs.</li>
+    <li>Minor improvements and fixes in docs.</li>
+  </ul>
   <h3>v.6.3.2</h3>
   <ul class="text-sm">
     <li>Added header background images.</li>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "6.3.2",
+  "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)",