desy-html 16.0.4 → 17.0.0

package/src/templates/includes/_test-include.njk

@@ -1,14 +1,14 @@
-{% from "components/test-component/_macro.test-component.njk" import componentTestComponent %}
-{% from "components/test-component-caller/_macro.test-component-caller.njk" import componentTestComponentCaller %}
-
-<div class="p-base border border-neutral-base">
-  <p>Este es un include de prueba</p>
-  {{ componentTestComponent({
-    "html": "Este es <strong class='font-bold'>un componente de prueba</strong>"
-  })  }}
-  {% call componentTestComponentCaller({
-    "html": "Este es un componente <strong class='font-bold '>con caller</strong>"
-  })  %}
-      <div class="w-48 p-2"><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
-  {% endcall %}
+{% from "components/test-component/_macro.test-component.njk" import componentTestComponent %}
+{% from "components/test-component-caller/_macro.test-component-caller.njk" import componentTestComponentCaller %}
+
+<div class="p-base border border-neutral-base">
+  <p>Este es un include de prueba</p>
+  {{ componentTestComponent({
+    "html": "Este es <strong class='font-bold'>un componente de prueba</strong>"
+  })  }}
+  {% call componentTestComponentCaller({
+    "html": "Este es un componente <strong class='font-bold '>con caller</strong>"
+  })  %}
+      <div class="w-48 p-2"><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
+  {% endcall %}
 </div>

package/src/templates/pages/_page.foot-headroom.njk

@@ -1,30 +1,30 @@
-<!-- page.foot-headroom -->
-<script src="js/headroom.min.js"></script>
-<script>
-  const modules = document.querySelectorAll('[data-module]');
-  for (const item in modules) if (modules.hasOwnProperty(item)) {
-    const moduleValue = modules[item].getAttribute('data-module');
-
-    if (moduleValue == 'c-header'){
-      const options = {
-        // vertical offset in px before element is first unpinned
-        offset : 0,
-        // scroll tolerance in px before state changes
-        tolerance : {
-          up : 0,
-          down : 0
-        },
-        // callback when unpinned, `this` is headroom object
-        onUnpin : function() {
-          // oculta todos los dropdowns que hubiese abiertos en el header
-        }
-      };
-      const headroom = new Headroom(modules[item], options);
-      headroom.init();
-    }
-  }
-</script>
-<script type="module" src="/src/js/index.js"></script>
-</body>
-</html>
-
+<!-- page.foot-headroom -->
+<script src="js/headroom.min.js"></script>
+<script>
+  const modules = document.querySelectorAll('[data-module]');
+  for (const item in modules) if (modules.hasOwnProperty(item)) {
+    const moduleValue = modules[item].getAttribute('data-module');
+
+    if (moduleValue == 'c-header'){
+      const options = {
+        // vertical offset in px before element is first unpinned
+        offset : 0,
+        // scroll tolerance in px before state changes
+        tolerance : {
+          up : 0,
+          down : 0
+        },
+        // callback when unpinned, `this` is headroom object
+        onUnpin : function() {
+          // oculta todos los dropdowns que hubiese abiertos en el header
+        }
+      };
+      const headroom = new Headroom(modules[item], options);
+      headroom.init();
+    }
+  }
+</script>
+<script type="module" src="/src/js/index.js"></script>
+</body>
+</html>
+

package/src/templates/pages/_page.foot.njk

@@ -1,5 +1,5 @@
-<!-- page.foot -->
-<script type="module" src="/src/js/index.js"></script>
-</body>
-</html>
-
+<!-- page.foot -->
+<script type="module" src="/src/js/index.js"></script>
+</body>
+</html>
+

package/src/templates/pages/_page.footer.njk

@@ -1,20 +1,20 @@
-<!-- page.footer -->
-{% from "components/footer/_macro.footer.njk" import componentFooter %}
-{{ componentFooter({
-  "meta": {
-    "visuallyHiddenTitle": "Enlaces a pie de página",
-    "items": [
-      {
-        "href": "pagina-accesibilidad.html",
-        "text": "Accesibilidad"
-      },
-      {
-        "href": "pagina-mapa-web.html",
-        "text": "Mapa web"
-      }
-    ],
-    "html": "Creado por <a href='https://sda.aragon.es/' class='c-link c-link--neutral'>SDA Servicios Digitales de Aragón</a>"
-  },
-  "classes": "mt-lg lg:mt-48"
-})  }}
+<!-- page.footer -->
+{% from "components/footer/_macro.footer.njk" import componentFooter %}
+{{ componentFooter({
+  "meta": {
+    "visuallyHiddenTitle": "Enlaces a pie de página",
+    "items": [
+      {
+        "href": "pagina-accesibilidad.html",
+        "text": "Accesibilidad"
+      },
+      {
+        "href": "pagina-mapa-web.html",
+        "text": "Mapa web"
+      }
+    ],
+    "html": "Creado por <a href='https://sda.aragon.es/' class='c-link c-link--neutral'>SDA Servicios Digitales de Aragón</a>"
+  },
+  "classes": "mt-lg lg:mt-48"
+})  }}
 <!-- /page.footer -->

package/src/templates/pages/_page.head.njk

@@ -1,27 +1,27 @@
-<!doctype html>
-<html lang="es">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>{{ title if title else "Project title" }}</title>
-  <link rel="stylesheet" href="/src/css/styles.css">
-  {% if branding and branding.favicon %}
-    <link rel="icon" href="{{ branding.favicon.svg }}" type="image/svg+xml">
-    <link rel="icon" href="{{ branding.favicon.ico }}" sizes="32x32">
-    <link rel="apple-touch-icon" href="{{ branding.favicon.appleTouch }}">
-  {% else %}
-    <link rel="icon" type="image/x-icon" href="https://aplicaciones.aragon.es/favicon.ico">
-  {% endif %}
-  {% if branding and branding.typography and branding.typography.fontUrl %}
-    {% if 'fonts.googleapis.com' in branding.typography.fontUrl %}
-      <link rel="preconnect" href="https://fonts.googleapis.com">
-      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    {% endif %}
-    <link href="{{ branding.typography.fontUrl }}" rel="stylesheet">
-  {% elif not branding %}
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap" rel="stylesheet">
-  {% endif %}
-</head>
-<!-- /page.head -->
+<!doctype html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{ title if title else "Project title" }}</title>
+  <link rel="stylesheet" href="/src/css/styles.css">
+  {% if branding and branding.favicon %}
+    <link rel="icon" href="{{ branding.favicon.svg }}" type="image/svg+xml">
+    <link rel="icon" href="{{ branding.favicon.ico }}" sizes="32x32">
+    <link rel="apple-touch-icon" href="{{ branding.favicon.appleTouch }}">
+  {% else %}
+    <link rel="icon" type="image/x-icon" href="https://aplicaciones.aragon.es/favicon.ico">
+  {% endif %}
+  {% if branding and branding.typography and branding.typography.fontUrl %}
+    {% if 'fonts.googleapis.com' in branding.typography.fontUrl %}
+      <link rel="preconnect" href="https://fonts.googleapis.com">
+      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    {% endif %}
+    <link href="{{ branding.typography.fontUrl }}" rel="stylesheet">
+  {% elif not branding %}
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap" rel="stylesheet">
+  {% endif %}
+</head>
+<!-- /page.head -->

package/src/templates/pages/_page.notification-edit-inner-content.njk

@@ -1,31 +1,31 @@
-{% from "components/alert/_macro.alert.njk" import componentAlert %}
-{% from "components/notification/_macro.notification.njk" import componentNotification %}
-<!-- page.notification-edit-inner-content -->
-<section id="notification-inner-content-container" aria-labelledby="notification-inner-content-heading" class="sticky top-base z-10 lg:top-28 w-full" aria-hidden="true"> {# aria-hidden must dissapear when a notification appears #}{# top-28 depends on the fixed heading height #}
-  <h2 id="notification-inner-content-heading" class="sr-only">Avisos importantes en contenido central</h2>
-  {% call componentAlert({
-    "button": {
-      "text": "Mostrar notificación",
-      "classes": "hidden",
-      "attributes": {
-        "onclick": "openAlert('notification-inner-content', this)"
-      }
-    },
-    "id": "notification-inner-content",
-    "attributes": {
-      "role": "alert",
-      "aria-live": "assertive"
-    }
-  })  %}
-    {{ componentNotification({
-      "title": {
-        "text": "El documento se ha cargado correctamente"
-      },
-      "type": "success",
-      "id": "type-success",
-      "isDismissible": true,
-      "classes": "c-notification--success mb-base"
-    })  }}
-  {% endcall %}
-</section>
-<!-- /page.notification-edit-inner-content -->
+{% from "components/alert/_macro.alert.njk" import componentAlert %}
+{% from "components/notification/_macro.notification.njk" import componentNotification %}
+<!-- page.notification-edit-inner-content -->
+<section id="notification-inner-content-container" aria-labelledby="notification-inner-content-heading" class="sticky top-base z-10 lg:top-28 w-full" aria-hidden="true"> {# aria-hidden must dissapear when a notification appears #}{# top-28 depends on the fixed heading height #}
+  <h2 id="notification-inner-content-heading" class="sr-only">Avisos importantes en contenido central</h2>
+  {% call componentAlert({
+    "button": {
+      "text": "Mostrar notificación",
+      "classes": "hidden",
+      "attributes": {
+        "onclick": "openAlert('notification-inner-content', this)"
+      }
+    },
+    "id": "notification-inner-content",
+    "attributes": {
+      "role": "alert",
+      "aria-live": "assertive"
+    }
+  })  %}
+    {{ componentNotification({
+      "title": {
+        "text": "El documento se ha cargado correctamente"
+      },
+      "type": "success",
+      "id": "type-success",
+      "isDismissible": true,
+      "classes": "c-notification--success mb-base"
+    })  }}
+  {% endcall %}
+</section>
+<!-- /page.notification-edit-inner-content -->

package/src/templates/pages/_page.notification-edit.njk

@@ -1,31 +1,31 @@
-{% from "components/alert/_macro.alert.njk" import componentAlert %}
-{% from "components/notification/_macro.notification.njk" import componentNotification %}
-<!-- page.notification-edit -->
-<section id="notification-header-container" aria-labelledby="notification-header-heading" class="sticky top-base z-10 lg:top-28 w-full" aria-hidden="true"> {# aria-hidden must dissapear when a notification appears #}{# top-28 depends on the fixed heading height #}
-  <h2 id="notification-header-heading" class="sr-only">Avisos importantes</h2>
-  {% call componentAlert({
-    "button": {
-      "text": "Mostrar notificación",
-      "classes": "hidden",
-      "attributes": {
-        "onclick": "openAlert('notification-header', this)"
-      }
-    },
-    "id": "notification-header",
-    "attributes": {
-      "role": "alert",
-      "aria-live": "assertive"
-    }
-  })  %}
-    {{ componentNotification({
-      "title": {
-        "text": "El documento se ha cargado correctamente"
-      },
-      "type": "success",
-      "id": "type-success",
-      "isDismissible": true,
-      "classes": "c-notification--success mt-base"
-    })  }}
-  {% endcall %}
-</section>
+{% from "components/alert/_macro.alert.njk" import componentAlert %}
+{% from "components/notification/_macro.notification.njk" import componentNotification %}
+<!-- page.notification-edit -->
+<section id="notification-header-container" aria-labelledby="notification-header-heading" class="sticky top-base z-10 lg:top-28 w-full" aria-hidden="true"> {# aria-hidden must dissapear when a notification appears #}{# top-28 depends on the fixed heading height #}
+  <h2 id="notification-header-heading" class="sr-only">Avisos importantes</h2>
+  {% call componentAlert({
+    "button": {
+      "text": "Mostrar notificación",
+      "classes": "hidden",
+      "attributes": {
+        "onclick": "openAlert('notification-header', this)"
+      }
+    },
+    "id": "notification-header",
+    "attributes": {
+      "role": "alert",
+      "aria-live": "assertive"
+    }
+  })  %}
+    {{ componentNotification({
+      "title": {
+        "text": "El documento se ha cargado correctamente"
+      },
+      "type": "success",
+      "id": "type-success",
+      "isDismissible": true,
+      "classes": "c-notification--success mt-base"
+    })  }}
+  {% endcall %}
+</section>
 <!-- /page.notification-edit -->

package/src/templates/pages/_page.notification-footer.njk

@@ -1,33 +1,33 @@
-{% from "components/alert/_macro.alert.njk" import componentAlert %}
-{% from "components/notification/_macro.notification.njk" import componentNotification %}
-<!-- page.notification-footer -->
-<section id="notification-footer-container" aria-labelledby="notification-footer-heading" class="fixed z-10 inset-x-0 bottom-base w-full" aria-hidden="true">{# aria-hidden must dissapear when a notification appears #}
-  <div class="container mx-auto px-base">
-    <h2 id="notification-footer-heading" class="sr-only">Avisos importantes a pie de página</h2>
-    {% call componentAlert({
-      "button": {
-        "text": "Mostrar notificación",
-        "classes": "hidden",
-        "attributes": {
-          "onclick": "openAlert('notification-footer', this)"
-        }
-      },
-      "id": "notification-footer",
-      "attributes": {
-        "role": "alert",
-        "aria-live": "assertive"
-      }
-    })  %}
-      {{ componentNotification({
-        "title": {
-          "text": "El documento se ha cargado correctamente"
-        },
-        "type": "success",
-        "id": "type-success",
-        "isDismissible": true,
-        "classes": "c-notification--success"
-      })  }}
-    {% endcall %}
-  </div>
-</section>
+{% from "components/alert/_macro.alert.njk" import componentAlert %}
+{% from "components/notification/_macro.notification.njk" import componentNotification %}
+<!-- page.notification-footer -->
+<section id="notification-footer-container" aria-labelledby="notification-footer-heading" class="fixed z-10 inset-x-0 bottom-base w-full" aria-hidden="true">{# aria-hidden must dissapear when a notification appears #}
+  <div class="container mx-auto px-base">
+    <h2 id="notification-footer-heading" class="sr-only">Avisos importantes a pie de página</h2>
+    {% call componentAlert({
+      "button": {
+        "text": "Mostrar notificación",
+        "classes": "hidden",
+        "attributes": {
+          "onclick": "openAlert('notification-footer', this)"
+        }
+      },
+      "id": "notification-footer",
+      "attributes": {
+        "role": "alert",
+        "aria-live": "assertive"
+      }
+    })  %}
+      {{ componentNotification({
+        "title": {
+          "text": "El documento se ha cargado correctamente"
+        },
+        "type": "success",
+        "id": "type-success",
+        "isDismissible": true,
+        "classes": "c-notification--success"
+      })  }}
+    {% endcall %}
+  </div>
+</section>
 <!-- /page.notification-footer -->

package/src/templates/pages/_page.notification-header-fixed.njk

@@ -1,31 +1,31 @@
-{% from "components/alert/_macro.alert.njk" import componentAlert %}
-{% from "components/notification/_macro.notification.njk" import componentNotification %}
-<!-- page.notification-header-fixed -->
-<section id="notification-header-container" aria-labelledby="notification-header-heading" class="sticky z-10 top-base lg:top-2xl w-full" aria-hidden="true">{# aria-hidden must dissapear when a notification appears #}
-  <h2 id="notification-header-heading" class="sr-only">Avisos importantes</h2>
-  {% call componentAlert({
-    "button": {
-      "text": "Mostrar notificación",
-      "classes": "hidden",
-      "attributes": {
-        "onclick": "openAlert('notification-header', this)"
-      }
-    },
-    "id": "notification-header",
-    "attributes": {
-      "role": "alert",
-      "aria-live": "assertive"
-    }
-  })  %}
-    {{ componentNotification({
-      "title": {
-        "text": "El documento se ha cargado correctamente"
-      },
-      "type": "success",
-      "id": "type-success",
-      "isDismissible": true,
-      "classes": "c-notification--success mt-base"
-    })  }}
-  {% endcall %}
-</section>
+{% from "components/alert/_macro.alert.njk" import componentAlert %}
+{% from "components/notification/_macro.notification.njk" import componentNotification %}
+<!-- page.notification-header-fixed -->
+<section id="notification-header-container" aria-labelledby="notification-header-heading" class="sticky z-10 top-base lg:top-2xl w-full" aria-hidden="true">{# aria-hidden must dissapear when a notification appears #}
+  <h2 id="notification-header-heading" class="sr-only">Avisos importantes</h2>
+  {% call componentAlert({
+    "button": {
+      "text": "Mostrar notificación",
+      "classes": "hidden",
+      "attributes": {
+        "onclick": "openAlert('notification-header', this)"
+      }
+    },
+    "id": "notification-header",
+    "attributes": {
+      "role": "alert",
+      "aria-live": "assertive"
+    }
+  })  %}
+    {{ componentNotification({
+      "title": {
+        "text": "El documento se ha cargado correctamente"
+      },
+      "type": "success",
+      "id": "type-success",
+      "isDismissible": true,
+      "classes": "c-notification--success mt-base"
+    })  }}
+  {% endcall %}
+</section>
 <!-- /page.notification-header-fixed -->

package/src/templates/pages/_page.notification-header.njk

@@ -1,31 +1,31 @@
-{% from "components/alert/_macro.alert.njk" import componentAlert %}
-{% from "components/notification/_macro.notification.njk" import componentNotification %}
-<!-- page.notification-header -->
-<section id="notification-header-container" aria-labelledby="notification-header-heading" class="sticky z-10 top-base w-full" aria-hidden="true">{# aria-hidden must dissapear when a notification appears #}
-  <h2 id="notification-header-heading" class="sr-only">Avisos importantes</h2>
-  {% call componentAlert({
-    "button": {
-      "text": "Mostrar notificación",
-      "classes": "hidden",
-      "attributes": {
-        "onclick": "openAlert('notification-header', this)"
-      }
-    },
-    "id": "notification-header",
-    "attributes": {
-      "role": "alert",
-      "aria-live": "assertive"
-    }
-  })  %}
-    {{ componentNotification({
-      "title": {
-        "text": "El documento se ha cargado correctamente"
-      },
-      "type": "success",
-      "id": "type-success",
-      "isDismissible": true,
-      "classes": "c-notification--success mt-base"
-    })  }}
-  {% endcall %}
-</section>
-<!-- /page.notification-header -->
+{% from "components/alert/_macro.alert.njk" import componentAlert %}
+{% from "components/notification/_macro.notification.njk" import componentNotification %}
+<!-- page.notification-header -->
+<section id="notification-header-container" aria-labelledby="notification-header-heading" class="sticky z-10 top-base w-full" aria-hidden="true">{# aria-hidden must dissapear when a notification appears #}
+  <h2 id="notification-header-heading" class="sr-only">Avisos importantes</h2>
+  {% call componentAlert({
+    "button": {
+      "text": "Mostrar notificación",
+      "classes": "hidden",
+      "attributes": {
+        "onclick": "openAlert('notification-header', this)"
+      }
+    },
+    "id": "notification-header",
+    "attributes": {
+      "role": "alert",
+      "aria-live": "assertive"
+    }
+  })  %}
+    {{ componentNotification({
+      "title": {
+        "text": "El documento se ha cargado correctamente"
+      },
+      "type": "success",
+      "id": "type-success",
+      "isDismissible": true,
+      "classes": "c-notification--success mt-base"
+    })  }}
+  {% endcall %}
+</section>
+<!-- /page.notification-header -->

package/src/templates/pages/_page.sidebar-content.njk

@@ -1,21 +1,21 @@
-<!-- page.sidebar-content -->
-<div class="grid grid-cols-2 lg:grid-cols-4 gap-xl">
-  <div class="col-span-2 lg:col-span-1">
-    <!-- sidebarBlock -->
-    {% block sidebarBlock %}
-    {% endblock %}
-    <!-- /sidebarBlock -->
-  </div>
-  <div class="col-span-2 lg:col-span-3">
-    <!-- notificationInnerContentBlock -->
-    {% block notificationInnerContentBlock %}
-      {% include "pages/_page.notification-edit-inner-content.njk" %}
-    {% endblock %}
-    <!-- /notificationInnerContentBlock -->
-    <!-- innerContentBlock -->
-    {% block innerContentBlock %}
-    {% endblock %}
-    <!-- /innerContentBlock -->
-  </div>
-</div>
+<!-- page.sidebar-content -->
+<div class="grid grid-cols-2 lg:grid-cols-4 gap-xl">
+  <div class="col-span-2 lg:col-span-1">
+    <!-- sidebarBlock -->
+    {% block sidebarBlock %}
+    {% endblock %}
+    <!-- /sidebarBlock -->
+  </div>
+  <div class="col-span-2 lg:col-span-3">
+    <!-- notificationInnerContentBlock -->
+    {% block notificationInnerContentBlock %}
+      {% include "pages/_page.notification-edit-inner-content.njk" %}
+    {% endblock %}
+    <!-- /notificationInnerContentBlock -->
+    <!-- innerContentBlock -->
+    {% block innerContentBlock %}
+    {% endblock %}
+    <!-- /innerContentBlock -->
+  </div>
+</div>
 <!-- /page.sidebar-content -->

package/src/templates/pages/_page.spinner-block.njk

@@ -1,15 +1,15 @@
-{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}
-<!-- page.spinner-block -->
-<div class="relative pb-2xl lg:pb-0">
-  <p>
-    {{ componentSpinner({
-      "text": "Espera por favor, el contenido principal de la página se está cargando",
-      "classes": "absolute inset-0 z-50 h-full pt-2xl text-4xl text-neutral-base",
-      "attributes": {
-        "id": spinnerId if spinnerId else "spinner-block"
-      }
-    })  }}
-  </p>
-  {# This spinner must be visible for 5 seconds. When new content is loaded, the text must change to "Se ha cargado la página _título de la página_"... After 5 seconds the spinner must dissapear #}
-</div>
+{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}
+<!-- page.spinner-block -->
+<div class="relative pb-2xl lg:pb-0">
+  <p>
+    {{ componentSpinner({
+      "text": "Espera por favor, el contenido principal de la página se está cargando",
+      "classes": "absolute inset-0 z-50 h-full pt-2xl text-4xl text-neutral-base",
+      "attributes": {
+        "id": spinnerId if spinnerId else "spinner-block"
+      }
+    })  }}
+  </p>
+  {# This spinner must be visible for 5 seconds. When new content is loaded, the text must change to "Se ha cargado la página _título de la página_"... After 5 seconds the spinner must dissapear #}
+</div>
 <!-- /page.spinner-block -->

package/src/templates/pages/_page.spinner-show.njk

@@ -1,16 +1,16 @@
-{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}
-<!-- page.spinner-show -->
-<aside aria-labelledby="page-spinner">
-  <p>
-    {{ componentSpinner({
-      "text": "Espera por favor, el contenido principal de la página se está cargando",
-      "classes": "fixed inset-0 z-50 h-screen text-6xl text-neutral-base",
-      "attributes": {
-        "id": "page-spinner"
-      }
-    })  }}
-  </p>
-  {# This spinner must be visible for 5 seconds. When new content is loaded, the text must change to "Se ha cargado la página _título de la página_"... After 5 seconds the spinner must dissapear #}
-  {# Habría que validar una vez que se carga el contenido, qué anuncia el lector (si se ha previsto algún mensaje de “contenido principal cargado”) y qué elemento coge el foco (puesto que el usuario puede moverse por la página, no debería movérsele el foco). #}
-</aside>
+{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}
+<!-- page.spinner-show -->
+<aside aria-labelledby="page-spinner">
+  <p>
+    {{ componentSpinner({
+      "text": "Espera por favor, el contenido principal de la página se está cargando",
+      "classes": "fixed inset-0 z-50 h-screen text-6xl text-neutral-base",
+      "attributes": {
+        "id": "page-spinner"
+      }
+    })  }}
+  </p>
+  {# This spinner must be visible for 5 seconds. When new content is loaded, the text must change to "Se ha cargado la página _título de la página_"... After 5 seconds the spinner must dissapear #}
+  {# Habría que validar una vez que se carga el contenido, qué anuncia el lector (si se ha previsto algún mensaje de “contenido principal cargado”) y qué elemento coge el foco (puesto que el usuario puede moverse por la página, no debería movérsele el foco). #}
+</aside>
 <!-- /page.spinner-show -->