desy-html 6.3.2 → 6.3.3

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.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/index.html

@@ -38,6 +38,12 @@
 
   <h2>Changelog (English)</h2>
   <p>What's new in the latest version of desy-html</p>
+  <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.3.3",
   "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/accordion.js

@@ -16,64 +16,93 @@ export function accordion(aria) {
     var allowToggle = (allowMultiple) ? allowMultiple : accordion.hasAttribute('data-allow-toggle');
 
     // Create the array of toggle elements for the accordion group
-    var triggers = Array.prototype.slice.call(accordion.querySelectorAll('.c-accordion-trigger'));
-    var panels = Array.prototype.slice.call(accordion.querySelectorAll('.c-accordion-panel'));
+    var triggers = Array.prototype.slice.call(accordion.querySelectorAll('.c-accordion__trigger'));
+    var panels = Array.prototype.slice.call(accordion.querySelectorAll('.c-accordion__panel'));
 
 
     accordion.addEventListener('click', function (event) {
-      console.log("event", event);
       var target = event.target;
 
-      if (target.classList.contains('c-accordion-trigger')) {
+      if(target.classList.contains('c-accordion__toggle-all')) {
+        const getAllElementsShow = target.parentElement.parentElement.querySelectorAll('.c-accordion__show')
+        const getAllElementsHide = target.parentElement.parentElement.querySelectorAll('.c-accordion__hide')
+        const getAllPanels = target.parentElement.parentElement.querySelectorAll('.c-accordion__panel')
+        const getAllTriggers = target.parentElement.parentElement.querySelectorAll('.c-accordion__trigger')
+        if(target.textContent.includes('Mostrar todo')) {
+          getAllElementsShow.forEach(element => {
+            element.classList.add('hidden')
+          })
+          getAllElementsHide.forEach(element => {
+            element.classList.remove('hidden')
+          })
+          getAllPanels.forEach(element => {
+            element.removeAttribute('hidden')
+          })
+          getAllTriggers.forEach(element => {
+            element.setAttribute('aria-expanded', 'true');
+          })
+          target.textContent = 'Ocultar todo'
+        } else {
+          getAllElementsShow.forEach(element => {
+            element.classList.remove('hidden')
+          })
+          getAllElementsHide.forEach(element => {
+            element.classList.add('hidden')
+          })
+          getAllPanels.forEach(element => {
+            element.setAttribute('hidden', "")
+          })
+          getAllTriggers.forEach(element => {
+            element.setAttribute('aria-expanded', 'false');
+          })
+          target.textContent = 'Mostrar todo'
+        }
+      }
+
+      if (target.classList.contains('c-accordion__trigger')) {
         // Check if the current toggle is expanded.
         var isExpanded = target.getAttribute('aria-expanded') == 'true';
         var active = accordion.querySelector('[aria-expanded="true"]');
 
         // without allowMultiple, close the open accordion
         if (!allowMultiple && active && active !== target) {
-          console.log("!allowMultiple && active && active !== target");
           // Set the expanded state on the triggering element
           active.setAttribute('aria-expanded', 'false');
           //active.querySelector('span').innerText = 'Mostrar';
-          active.querySelector('.c-accordion-show').classList.remove('hidden');
-          active.querySelector('.c-accordion-hide').classList.add('hidden');
+          active.querySelector('.c-accordion__show').classList.remove('hidden');
+          active.querySelector('.c-accordion__hide').classList.add('hidden');
           // Hide the accordion sections, using aria-controls to specify the desired section
           document.getElementById(active.getAttribute('aria-controls')).setAttribute('hidden', '');
 
           // When toggling is not allowed, clean up disabled state
           if (!allowToggle) {
-            console.log("allowToggle");
             active.removeAttribute('aria-disabled');
           }
         }
 
         if (!isExpanded) {
-          console.log("isExpanded");
           // Set the expanded state on the triggering element
-          console.log("target", target);
           target.setAttribute('aria-expanded', 'true');
           //target.querySelector('span').innerText = 'Ocultar';
-          target.querySelector('.c-accordion-show').classList.toggle('hidden');
-          target.querySelector('.c-accordion-hide').classList.toggle('hidden');
+          target.querySelector('.c-accordion__show').classList.toggle('hidden');
+          target.querySelector('.c-accordion__hide').classList.toggle('hidden');
           // Hide the accordion sections, using aria-controls to specify the desired section
           document.getElementById(target.getAttribute('aria-controls')).removeAttribute('hidden');
 
           // If toggling is not allowed, set disabled state on trigger
           if (!allowToggle) {
-            console.log("if");
             target.setAttribute('aria-disabled', 'true');
             //target.querySelector('span').innerText = '';
-            target.querySelector('.c-accordion-show').classList.add('hidden');
-            target.querySelector('.c-accordion-hide').classList.add('hidden');
+            target.querySelector('.c-accordion__show').classList.add('hidden');
+            target.querySelector('.c-accordion__hide').classList.add('hidden');
           }
         }
         else if (allowToggle && isExpanded) {
-          console.log("else if");
           // Set the expanded state on the triggering element
           target.setAttribute('aria-expanded', 'false');
           // target.querySelector('span').innerText = 'Mostrar';
-          target.querySelector('.c-accordion-show').classList.toggle('hidden');
-          target.querySelector('.c-accordion-hide').classList.toggle('hidden');
+          target.querySelector('.c-accordion__show').classList.toggle('hidden');
+          target.querySelector('.c-accordion__hide').classList.toggle('hidden');
 
           // Hide the accordion sections, using aria-controls to specify the desired section
           document.getElementById(target.getAttribute('aria-controls')).setAttribute('hidden', '');
@@ -95,7 +124,7 @@ export function accordion(aria) {
       var ctrlModifier = (event.ctrlKey && key.match(/33|34/));
 
       // Is this coming from an accordion header?
-      if (target.classList.contains('c-accordion-trigger')) {
+      if (target.classList.contains('c-accordion__trigger')) {
         // Up/ Down arrow and Control + Page Up/ Page Down keyboard operations
         // 38 = Up, 40 = Down
         if (key.match(/38|40/) || ctrlModifier) {
@@ -128,7 +157,7 @@ export function accordion(aria) {
     });
 
     // These are used to style the accordion when one of the buttons has focus
-    accordion.querySelectorAll('.c-accordion-trigger').forEach(function (trigger) {
+    accordion.querySelectorAll('.c-accordion__trigger').forEach(function (trigger) {
 
       trigger.addEventListener('focus', function (event) {
         accordion.classList.add('focus');
@@ -150,8 +179,8 @@ export function accordion(aria) {
       if (expanded) {
         expanded.setAttribute('aria-disabled', 'true');
         //expanded.querySelector('span').innerText = '';
-        expanded.querySelector('.c-accordion-show').classList.add('hidden');
-        expanded.querySelector('.c-accordion-hide').classList.add('hidden');
+        expanded.querySelector('.c-accordion__show').classList.add('hidden');
+        expanded.querySelector('.c-accordion__hide').classList.add('hidden');
       }
     }
 

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

@@ -23,9 +23,7 @@
     2. If there are one item opened at init and allowToggle=true, the button text ('Mostrar/Ocultar') only shows 'Ocultar' without changing to 'Mostrar'. It should change to 'Mostrar' when closed.
 -#}
 <!-- accordion -->
-<div
-{%- if params.classes %} class="{{ params.classes }}"{% endif %}
-{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+<div class="c-accordion {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} {%- if params.allowToggle == true %} data-allow-toggle{% endif %} {%- if params.allowMultiple == true %} data-allow-multiple{% endif %}>
   <div class="flex justify-between">
   {% if params.heading.html or params.heading.text %}
     {% set headingAttributes %}class="{% if params.heading.classes %}{{ params.heading.classes }}{% else %}c-h2 mb-base{% endif %}"{% endset %}
@@ -46,12 +44,12 @@
   {% endif %}
   {% if params.showControl %}
     <button
-    class="ml-auto py-base text-sm text-neutral-dark underline focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus">
+    class="c-accordion__toggle-all ml-auto py-base text-sm text-neutral-dark underline focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus text-right">
       Mostrar todo
     </button>
   {% endif %}
   </div>
-  <div class="c-accordion" {%- if params.allowToggle == true %} data-allow-toggle{% endif %} {%- if params.allowMultiple == true %} data-allow-multiple{% endif %}>
+  <div>
     {% for item in params.items %}
       {% if item %}
       {%- if item.id -%}
@@ -69,7 +67,7 @@
         {% set insideContent %}
           <button
           id="{{ id }}-title"
-          class="c-accordion-trigger 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 item.disabled %} cursor-not-allowed{% endif %}"
+          class="c-accordion__trigger 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 item.disabled %} cursor-not-allowed{% endif %}"
           aria-controls="{{ id }}"
           {% if item.open %}
             aria-expanded = "true"
@@ -81,14 +79,14 @@
             {{ item.headerHtml | safe if item.headerHtml else item.headerText }}
             <span
               class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none  {%- if item.disabled %} hidden{% endif %}" aria-hidden="true">
-                <span class="c-accordion-show {%- if item.open %} hidden{%else%}{%endif%} {%- if item.show.classes %} {{ item.show.classes }}{%endif%}">
+                <span class="c-accordion__show {%- if item.open %} hidden{%else%}{%endif%} {%- if item.show.classes %} {{ item.show.classes }}{%endif%}">
                   {% if item.show %}
                     {{ item.show.html | safe if item.show.html else item.show.text }}
                   {% else %}
                     Mostrar
                   {% endif %}
                 </span>
-                <span class="c-accordion-hide {%- if item.open %}{%else%} hidden{%endif%} {%- if item.hide.classes %} {{ item.hide.classes }}{%endif%}">
+                <span class="c-accordion__hide {%- if item.open %}{%else%} hidden{%endif%} {%- if item.hide.classes %} {{ item.hide.classes }}{%endif%}">
                   {% if item.hide %}
                     {{ item.hide.html | safe if item.hide.html else item.hide.text }}
                   {% else %}
@@ -119,7 +117,7 @@
         {%- if id %}
           id="{{ id }}"
         {% endif %}
-        class="c-accordion-panel {%- if item.classes %} {{ item.classes }}{% endif %}"
+        class="c-accordion__panel {%- if item.classes %} {{ item.classes }}{% endif %}"
         {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
           {{ item.html | safe if item.html else item.text }}
         </div>

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

@@ -87,6 +87,7 @@
       "idPrefix": "allowtoggle-example",
       "headingLevel": 3,
       "allowToggle": true,
+      "showControl": false,
       "items": [
         {
           "headerText": "Accordion Item 1",

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

@@ -23,9 +23,8 @@
     2. If there are one item opened at init and allowToggle=true, the button text ('Mostrar/Ocultar') only shows 'Ocultar' without changing to 'Mostrar'. It should change to 'Mostrar' when closed.
 -#}
 <!-- accordion-history -->
-<div
-{%- if params.classes %} class="{{ params.classes }}"{% endif %}
-{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+<div class="c-accordion {%- if params.classes %} {{ params.classes }} {% endif %}"
+{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} {%- if params.allowToggle == true %} data-allow-toggle{% endif %} {%- if params.allowMultiple == true %} data-allow-multiple{% endif %}>
 <div class="flex justify-between">
   {% if params.heading.html or params.heading.text %}
     {% set headingAttributes %}class="{% if params.heading.classes %}{{ params.heading.classes }}{% else %}c-h2 mb-base{% endif %}"{% endset %}
@@ -46,12 +45,12 @@
   {% endif %}
   {% if params.showControl %}
     <button
-    class="ml-auto py-base text-sm text-neutral-dark underline focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus">
+    class="c-accordion__toggle-all ml-auto py-base text-sm text-neutral-dark underline focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus text-right">
       Mostrar todo
     </button>
   {% endif %}
   </div>
-  <div class="Accordion pl-lg" {%- if params.allowToggle == true %} data-allow-toggle{% endif %} {%- if params.allowMultiple == true %} data-allow-multiple{% endif %}>
+  <div class="pl-lg">
     {% for item in params.items %}
       {% if item %}
       {%- if item.id -%}
@@ -69,7 +68,7 @@
         {% set insideContent %}
           <button
           id="{{ id }}-title"
-          class="Accordion-trigger 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 item.disabled %} cursor-not-allowed{% endif %}"
+          class="c-accordion__trigger 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 item.disabled %} cursor-not-allowed{% endif %}"
           aria-controls="{{ id }}"
           {% if item.open %}
             aria-expanded = "true"
@@ -92,14 +91,14 @@
             {% endif %}
             <span
               class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none {%- if item.disabled %} hidden{% endif %}" aria-hidden="true">
-                <span class="Accordion-show {%- if item.open %} hidden{%else%}{%endif%} {%- if item.show.classes %} {{ item.show.classes }}{%endif%}">
+                <span class="c-accordion__show {%- if item.open %} hidden{%else%}{%endif%} {%- if item.show.classes %} {{ item.show.classes }}{%endif%}">
                   {% if item.show %}
                     {{ item.show.html | safe if item.show.html else item.show.text }}
                   {% else %}
                     Mostrar
                   {% endif %}
                 </span>
-                <span class="Accordion-hide {%- if item.open %}{%else%} hidden{%endif%} {%- if item.hide.classes %} {{ item.hide.classes }}{%endif%}">
+                <span class="c-accordion__hide {%- if item.open %}{%else%} hidden{%endif%} {%- if item.hide.classes %} {{ item.hide.classes }}{%endif%}">
                   {% if item.hide %}
                     {{ item.hide.html | safe if item.hide.html else item.hide.text }}
                   {% else %}
@@ -167,7 +166,7 @@
         {%- if id %}
           id="{{ id }}"
         {% endif %}
-        class="Accordion-panel relative {%- if item.classes %} {{ item.classes }}{% endif %}"
+        class="c-accordion__panel relative {%- if item.classes %} {{ item.classes }}{% endif %}"
         {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
           {% if not loop.last %}
             {% if item.status == 'current' %}

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

@@ -290,34 +290,10 @@
   },
   {
     "name": "Expanded logo",
-    "description": "expandedLogo: true. Utilizar este logotipo en apps que estén dirigidas al ciudadano.",
+    "description": "expandedLogo: true. Utilizar este logotipo en apps que estén dirigidas al ciudadano y también antes de hacer login en todas las apps.",
     "data": {
       "homepageUrl": "/",
-      "expandedLogo": true,
-      "subnav": {
-        "text": "Carpeta del gestor"
-      },
-      "navigation": {
-        "items": [
-          {
-            "href": "#1",
-            "text": "Navigation item 1"
-          },
-          {
-            "href": "#2",
-            "text": "Navigation item 2",
-            "active": true
-          },
-          {
-            "href": "#3",
-            "text": "Navigation item 3"
-          },
-          {
-            "href": "#4",
-            "text": "Navigation item 4"
-          }
-          ]
-      }
+      "expandedLogo": true
     }
   },
   {
@@ -432,7 +408,6 @@
     "description": "Logo, menu de navegación, dropdown en anchuras grandes y menu mobile en pequeñas.",
     "data": {
       "homepageUrl": "/",
-      "expandedLogo": true,
       "subnav": {
         "text": "Carpeta del gestor",
         "items": [

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

@@ -216,6 +216,10 @@
           "text": 6
         }
       ],
+      "hasPrevious": false,
+      "hasNext": true,
+      "previousText": "Anterior",
+      "nextText": "Siguiente",
       "attributes": {
         "aria-label": "Paginación"
       }