desy-html 6.5.0 → 7.0.0

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

@@ -0,0 +1,277 @@
+{% set exampleComponent = "card" %}
+
+{% from "components/button/_macro.button.njk" import componentButton %}
+
+{% set defaultContent %}
+  <h3 class="c-h3"><a href="#" class="c-link">Título card</a></h3>
+  <div class="prose max-w-none">
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
+  </div>
+{% endset %}
+
+{% set linksContent %}
+  <h2 class="c-h1">Tus datos médicos e información personal</h2>
+  <ul class="text-lg">
+    <li class="mb-base"><a href="#" class="c-link">Cambiar tus datos de contacto</a></li>
+    <li class="mb-base"><a href="#" class="c-link">Dónde y cómo solicitar tu PIN Salud</a></li>
+    <li class="mb-base"><a href="#" class="c-link">Cómo solicitar un cambio de centro de salud</a></li>
+    <li class="mb-base"><a href="#" class="c-link">Historia Clínica e informes médicos</a></li>
+    <li class="mb-base"><a href="#" class="c-link">Derechos de protección de datos</a></li>
+  </ul>
+{% endset %}
+
+{% set verButton %}
+  {{ componentButton({
+    "html": "Más <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"self-center ml-2\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><path d=\"M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z\" fill=\"currentColor\"></path></svg>",
+    "classes": "c-button--transparent",
+    "href": "#",
+    "attributes": {
+      "id": "boton-card-1",
+      "aria-labelledby": "boton-card-1 titulo-card-1"
+    }
+  })  }}
+{% endset %}
+
+{% set verDetalleButton %}
+  {{ componentButton({
+    "html": "Ver detalle <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"self-center ml-2\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><path d=\"M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z\" fill=\"currentColor\"></path></svg>",
+    "classes": "c-button--transparent",
+    "href": "#",
+    "attributes": {
+      "id": "boton-card-1",
+      "aria-labelledby": "boton-card-1 titulo-card-1"
+    }
+  })  }}
+{% endset %}
+
+{% set withIconContent %}
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="w-6 h-6 lg:w-9 lg:h-9 mt-base mb-lg" aria-hidden="true" focusable="false"><g transform="scale(2)"><path d="M21.71 5.71 16.29.29a1 1 0 0 0-.7-.29H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7ZM20 21.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5h10.25a.25.25 0 0 1 .25.25V5a2 2 0 0 0 2 2h2.75a.25.25 0 0 1 .25.25Z" fill="currentColor"></path><rect x="6.5" y="10.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="14" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="17.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="10.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="14" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="17.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect></g></svg>
+  <h3 id="titulo-card-1" class="c-h3">Título card</h3>
+  <div class="prose max-w-none mb-base">
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
+  </div>
+  {{ verButton | safe }}
+{% endset %}
+
+{% set withButton %}
+  <h3 id="titulo-card-1" class="c-h3">Título card</h3>
+  <div class="prose max-w-none mb-base">
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
+  </div>
+  {{ verButton | safe }}
+{% endset %}
+
+{% set areaPersonalContent %}
+  <h2 class="c-h1"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="inline-block align-middle lg:w-9 lg:h-9 mr-base" aria-hidden="true" focusable="false"><g transform="scale(2)"><path d="M21.71 5.71 16.29.29a1 1 0 0 0-.7-.29H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7ZM20 21.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5h10.25a.25.25 0 0 1 .25.25V5a2 2 0 0 0 2 2h2.75a.25.25 0 0 1 .25.25Z" fill="currentColor"></path><rect x="6.5" y="10.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="14" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="17.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="10.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="14" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="17.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect></g></svg>Tu área personal</h2>
+  <p class="c-paragraph-base mb-lg">En tu área personal puedes pedir cita con tu médico/a, consultar tu historia clínica y encontrar una selección de contenidos y servicios de salud para ti. Accede de forma segura desde cualquier lugar y en cualquier momento, desde tu móvil u ordenador.</p>
+  <ul class="flex flex-wrap gap-base">
+    <li>
+      {{ componentButton({
+        "text": "Acceder a Tu área personal",
+        "classes": "c-button--primary"
+      })  }}
+    </li>
+    <li>
+      {{ componentButton({
+        "text": "Descargar la app"
+      })  }}
+    </li>
+  </ul>
+{% endset %}
+
+{% set postContent %}
+  <p class="c-paragraph-sm mb-base">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1em" width="1em" class="inline-block align-middle w-6 h-6 mr-xs"><g><path d="M7.5,10.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M12.5,10.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M17.5,10.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M7.5,14.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M12.5,14.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M17.5,14.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M7.5,18.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M12.5,18.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M17.5,18.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M21.5,3H18.75a.25.25,0,0,1-.25-.25V1a1,1,0,0,0-2,0V5.75a.75.75,0,0,1-1.5,0V3.5a.5.5,0,0,0-.5-.5H8.25A.25.25,0,0,1,8,2.75V1A1,1,0,0,0,6,1V5.75a.75.75,0,0,1-1.5,0V3.5A.5.5,0,0,0,4,3H2.5a2,2,0,0,0-2,2V22a2,2,0,0,0,2,2h19a2,2,0,0,0,2-2V5A2,2,0,0,0,21.5,3Zm0,18.5a.5.5,0,0,1-.5.5H3a.5.5,0,0,1-.5-.5V9.5A.5.5,0,0,1,3,9H21a.5.5,0,0,1,.5.5Z" fill="currentColor"></path></g></svg>
+    <strong>18 octubre 2022</strong>
+  </p>
+  <h3 id="titulo-card-1" class="c-h3">Título de noticia</h3>
+  <div class="prose max-w-none mb-base">
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
+  </div>
+  {{ verDetalleButton | safe }}
+{% endset %}
+
+
+
+{% set examples =  [
+  {
+    "name": "default",
+    "data": {
+      "classes": "lg:w-1/3",
+      "containerClasses": "p-base border border-neutral-base rounded",
+      "caller": defaultContent
+    }
+  },
+  {
+    "name": "with icon",
+    "data": {
+      "classes": "lg:w-1/3",
+      "containerClasses": "p-base border border-neutral-base rounded",
+      "caller": withIconContent
+    }
+  },
+  {
+    "name": "simple sidebar",
+    "data": {
+      "classes": "lg:w-1/3",
+      "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
+      "caller": withButton
+    }
+  },
+  {
+    "name": "with super",
+    "data": {
+      "classes": "lg:w-1/3",
+      "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
+      "caller": withButton,
+      "super": {
+        "backgroundFullColor": "transparent",
+        "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
+        "classes": "h-60 -m-base mb-base bg-cover bg-center bg-no-repeat overflow-hidden",
+        "attributes": {
+          "role": "img",
+          "aria-label": "Alt de la imagen"
+        }
+      }
+    }
+  },
+  {
+    "name": "with sub",
+    "data": {
+      "classes": "lg:w-1/3",
+      "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
+      "caller": withButton,
+      "sub": {
+        "backgroundFullColor": "transparent",
+        "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
+        "classes": "h-60 -m-base mt-base bg-cover bg-center bg-no-repeat overflow-hidden",
+        "attributes": {
+          "role": "img",
+          "aria-label": "Alt de la imagen"
+        }
+      }
+    }
+  },
+  {
+    "name": "with img left in desktop",
+    "description": "In mobile the img is in super area.",
+    "data": {
+      "classes": "lg:w-2/3",
+      "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
+      "caller": withButton,
+      "super": {
+        "backgroundFullColor": "transparent",
+        "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
+        "classes": "lg:hidden h-60 -m-base mb-base bg-cover bg-center bg-no-repeat overflow-hidden",
+        "attributes": {
+          "role": "img",
+          "aria-label": "Alt de la imagen"
+        }
+      },
+      "left": {
+        "backgroundFullColor": "transparent",
+        "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
+        "classes": "hidden lg:block w-1/2 -m-base mr-base bg-cover bg-center bg-no-repeat overflow-hidden",
+        "attributes": {
+          "role": "img",
+          "aria-label": "Alt de la imagen"
+        }
+      }
+    }
+  },
+  {
+    "name": "with img right in desktop",
+    "description": "In mobile the img is in super area.",
+    "data": {
+      "classes": "lg:w-2/3",
+      "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
+      "caller": withButton,
+      "super": {
+        "backgroundFullColor": "transparent",
+        "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
+        "classes": "lg:hidden h-60 -m-base mb-base bg-cover bg-center bg-no-repeat overflow-hidden",
+        "attributes": {
+          "role": "img",
+          "aria-label": "Alt de la imagen"
+        }
+      },
+      "right": {
+        "backgroundFullColor": "transparent",
+        "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
+        "classes": "hidden lg:block w-1/2 -m-base ml-base bg-cover bg-center bg-no-repeat overflow-hidden",
+        "attributes": {
+          "role": "img",
+          "aria-label": "Alt de la imagen"
+        }
+      }
+    }
+  },
+  {
+    "name": "home block without padding",
+    "data": {
+      "classes": "lg:w-1/2",
+      "containerClasses": "py-lg border-t-8 border-neutral-dark",
+      "caller": linksContent
+    }
+  },
+  {
+    "name": "home block with buttons",
+    "data": {
+      "containerClasses": "p-lg bg-neutral-lighter border-t-8 border-neutral-dark",
+      "caller": areaPersonalContent,
+      "super": {
+        "backgroundFullColor": "transparent",
+        "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.png&text=Imagen",
+        "classes": "lg:hidden h-72 -m-lg mb-base bg-cover bg-center bg-no-repeat overflow-hidden",
+        "attributes": {
+          "role": "img",
+          "aria-label": "Alt de la imagen"
+        }
+      },
+      "right": {
+        "backgroundFullColor": "transparent",
+        "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
+        "classes": "hidden lg:block w-1/2 h-96 -m-lg ml-xl bg-cover bg-center bg-no-repeat overflow-hidden",
+        "attributes": {
+          "role": "img",
+          "aria-label": "Alt de la imagen"
+        }
+      }
+    }
+  },
+  {
+    "name": "items in list",
+    "description": "Image with fixed dimensions in desktop, text flexible.",
+    "data": {
+      "classes": "lg:w-3/4",
+      "containerClasses": "p-lg bg-neutral-lighter",
+      "caller": postContent,
+      "super": {
+        "backgroundFullColor": "transparent",
+        "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
+        "classes": "lg:hidden h-56 -m-lg mb-base bg-cover bg-center bg-no-repeat overflow-hidden",
+        "attributes": {
+          "role": "img",
+          "aria-label": "Alt de la imagen"
+        }
+      },
+      "left": {
+        "backgroundFullColor": "transparent",
+        "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
+        "classes": "hidden lg:block w-72 -m-lg mr-lg bg-cover bg-center bg-no-repeat overflow-hidden",
+        "attributes": {
+          "role": "img",
+          "aria-label": "Alt de la imagen"
+        }
+      }
+    }
+  },
+  {
+    "name": "home mini block with icon",
+    "data": {
+      "classes": "lg:w-1/4",
+      "containerClasses": "p-base bg-neutral-lighter",
+      "caller": withIconContent
+    }
+  }
+] %}

package/src/templates/components/card/_macro.card.njk

@@ -0,0 +1,3 @@
+{% macro componentCard(params) %}
+{% include "./_template.card.njk" %}
+{% endmacro %}

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

@@ -0,0 +1,35 @@
+<!-- card -->
+<div {%- if params.classes %} class="{{ params.classes }}"{% endif %} {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+  <div {%- if params.containerClasses %} class="{{ params.containerClasses }}"{% endif %}>
+    {% if params.super %}
+      <div class="{% if params.super.classes %}{{ params.super.classes }}{% else-%} h-32 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.super.backgroundFullColor }}; {% if params.super.backgroundFullUrl %} background-image: url('{{ params.super.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.super.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+        {{ params.super.html | safe if params.super.html}}
+      </div>
+    {% endif %}
+    <div class="flex">
+      {% if params.left %}
+        <div class="{% if params.left.classes %}{{ params.left.classes }}{% else-%} w-1/2 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.left.backgroundFullColor }}; {% if params.left.backgroundFullUrl %} background-image: url('{{ params.left.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.left.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+          {{ params.left.html | safe if params.left.html}}
+        </div>
+      {% endif %}
+      <div {%- if params.left or params.right %} class="flex-1"{% endif %}>
+        {% if caller %}
+        {{ caller() }} {#- if statement allows usage of `call` to be optional -#}
+        {% elseif params.caller %}
+        {{ params.caller | safe }}
+        {% endif %}
+      </div>
+      {% if params.right %}
+        <div class="{% if params.right.classes %}{{ params.right.classes }}{% else-%} w-1/2 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.right.backgroundFullColor }}; {% if params.right.backgroundFullUrl %} background-image: url('{{ params.right.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.right.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+          {{ params.right.html | safe if params.right.html}}
+        </div>
+      {% endif %}
+    </div>
+    {% if params.sub %}
+      <div class="{% if params.sub.classes %}{{ params.sub.classes }}{% else-%} h-32 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.sub.backgroundFullColor }}; {% if params.sub.backgroundFullUrl %} background-image: url('{{ params.sub.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.sub.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+        {{ params.sub.html | safe if params.sub.html}}
+      </div>
+    {% endif %}
+  </div>
+</div>
+<!-- /card -->

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

@@ -0,0 +1,113 @@
+params:
+- name: containerClasses
+  type: string
+  required: false
+  description: Classes that can be added to the inner container.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the card component.
+- name: attributes
+  type: object
+  required: false
+  description: HTML attributes (for example data attributes) to add to the card component.
+- name: caller
+  type: nunjucks-block
+  required: false
+  description: Content in the flexible content area. Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire media-object component in a `call` block.
+- name: super
+  type: object
+  required: false
+  description: This is an area over the card content
+  - name: backgroundFullColor
+    type: string
+    required: true
+    description: The css color used in the background image that fills all the super area.
+  - name: backgroundFullUrl
+    type: string
+    required: false
+    description: Url used in the background image that fills all the super area.
+  - name: html
+    type: string
+    required: false
+    description: HTML to use inside the super area.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the super area.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the super area.
+- name: sub
+  type: object
+  required: false
+  description: This is an area under the card content
+  - name: backgroundFullColor
+    type: string
+    required: true
+    description: The css color used in the background image that fills all the sub area.
+  - name: backgroundFullUrl
+    type: string
+    required: false
+    description: Url used in the background image that fills all the sub area.
+  - name: html
+    type: string
+    required: false
+    description: HTML to use inside the sub area.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the sub area.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the sub area.
+- name: left
+  type: object
+  required: false
+  description: This is an area over the card content
+  - name: backgroundFullColor
+    type: string
+    required: true
+    description: The css color used in the background image that fills all the left area.
+  - name: backgroundFullUrl
+    type: string
+    required: false
+    description: Url used in the background image that fills all the left area.
+  - name: html
+    type: string
+    required: false
+    description: HTML to use inside the left area.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the left area.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the super area.
+- name: right
+  type: object
+  required: false
+  description: This is an area under the card content
+  - name: backgroundFullColor
+    type: string
+    required: true
+    description: The css color used in the background image that fills all the right area.
+  - name: backgroundFullUrl
+    type: string
+    required: false
+    description: Url used in the background image that fills all the right area.
+  - name: html
+    type: string
+    required: false
+    description: HTML to use inside the right area.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the right area.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the right area.

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

@@ -114,13 +114,3 @@ params:
   type: object
   required: false
   description: HTML attributes (for example data attributes) to add to the anchor tag.
-
-accessibilityCriteria: |
-  ## Conditional reveals
-  Must:
-  - be visible as static content if JavaScript is unavailable or fails
-  - be hidden if JavaScript is available and is collapsed
-  - indicate if content is expanded or collapsed
-  - indicate that there is collapsed content to interact with
-
-  Note that alphagov have known issues against this criteria: https://github.com/alphagov/govuk_elements/issues/575

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

@@ -4,7 +4,7 @@
   <span class="c-collapsible__show absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none " aria-hidden="false">Mostrar</span>
   <span class="c-collapsible__hide absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none  hidden" aria-hidden="true">Ocultar</span>
   </button>
-  <div aria-hidden="true" class="c-collapsible__content hidden py-sm" {%- if params.id %} id="{{params.id}}"{% endif %}
+  <div aria-hidden="true" class="c-collapsible__content hidden py-sm" {%- if params.id %} id="{{params.id}}"{% endif %}>
     {% if params.html %}
     {{ params.html | safe }}
     {% else %}

package/src/templates/components/error-message/params.error-message.yaml

@@ -21,18 +21,4 @@ params:
   description: HTML attributes (for example data attributes) to add to the error message span tag
 - name: visuallyHiddenText
   type: string
-  description: A visually hidden prefix used before the error message. Defaults to "Error".
-
-accessibilityCriteria: |
-  When used with a single input, the error message MUST:
-  - be announced by screen readers when the input is focussed
-
-  When used with a group of multiple inputs (such as within a fieldset), the
-  error message MUST:
-  - be announced by screen readers when focussing the first input within the
-    group (first in this case refers to the focus order, not the DOM - if the
-    user is traversing backwards through the page then this would be the last
-    input within the group in the DOM)
-
-  When used with a group of multiple inputs, the error message SHOULD NOT:
-  - be announced every time for each individual input
+  description: A visually hidden prefix used before the error message. Defaults to "Error".

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

@@ -114,7 +114,7 @@
 
 {% set exampleOffcanvas %}
   <nav class="w-full p-2" aria-label="Menú móvil">
-    <h3 class="p-base text-base font-bold">Carpeta del gestor</h3>
+    <h3 class="p-base text-base font-bold">Gestor de expedientes</h3>
     {{ componentNav({
       "idPrefix": "nav-mobile-pages",
       "hasNav": false,
@@ -170,7 +170,7 @@
           "items": [
             {
               "href": "#",
-              "text": "Carpeta del gestor",
+              "text": "Gestor de expedientes",
               "active": true
             },
             {
@@ -201,8 +201,11 @@
     "description": "El menú por defecto de las aplicaciones de la administración digital tiene un logo que enlaza a la página de inicio y un menu principal de navegación. El menu de navegación se oculta en mobile si no se añaden clases a navigation. El logotipo es simple, sin letras, si la app está diseñada para funcionarios. Junto al logo hay un texto que da nombre a la app en la que estamos.",
     "data": {
       "homepageUrl": "/",
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
       "subnav": {
-        "text": "Carpeta del gestor"
+        "text": "Gestor de expedientes"
       },
       "navigation": {
         "items": [
@@ -232,8 +235,11 @@
     "description": "Tras nuestro menú de navegación tenemos customNavigationHtml: una zona anidable para poder añadir una navegación personalizada",
     "data": {
       "homepageUrl": "/",
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
       "subnav": {
-        "text": "Carpeta del gestor"
+        "text": "Gestor de expedientes"
       },
       "customNavigationHtml": '<div class="flex flex-wrap flex-1 gap-base">'+ navigationCustom | safe + '</div>'
     }
@@ -243,8 +249,11 @@
     "description": "En el customNavigationHtml podemos añadir elementos posicionados a la derecha",
     "data": {
       "homepageUrl": "/",
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
       "subnav": {
-        "text": "Carpeta del gestor"
+        "text": "Gestor de expedientes"
       },
       "customNavigationHtml": '<div class="relative flex justify-end items-center flex-1 gap-base"><div class="absolute -top-3 right-0 text-black"><a href="#"><svg class="w-5 h-5" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-label="Notificaciones"><path d="M7.25 12.5h-1.5a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5Z" fill="currentColor" transform="scale(3.42857)"/><g transform="scale(3.42857)"><circle cx="10.5" cy="2.5" r="2.5" fill="currentColor"/><path d="M11.5 10a1 1 0 0 1-1-1V6.74a.25.25 0 0 0-.24-.25 4 4 0 0 1-3.76-4 3.43 3.43 0 0 1 .11-.86.12.12 0 0 0 0-.1.15.15 0 0 0-.09 0 4 4 0 0 0-4 4V9a1 1 0 0 1-1 1 .5.5 0 0 0 0 1h10a.5.5 0 0 0 0-1Z" fill="currentColor"/></g></svg></a></div></div>'
     }
@@ -262,8 +271,11 @@
         }
       },
       "homepageUrl": "/",
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
       "subnav": {
-        "text": "Carpeta del gestor"
+        "text": "Gestor de expedientes"
       },
       "navigation": {
         "items": [
@@ -301,8 +313,11 @@
     "description": "Menu mobile que sólo se muestra en anchuras pequeñas y que permite insertar dentro cualquier contenido con Nunjuks caller",
     "data": {
       "homepageUrl": "/",
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
       "subnav": {
-        "text": "Carpeta del gestor"
+        "text": "Gestor de expedientes"
       },
       "offcanvas": {
         "text": "Menú",
@@ -318,10 +333,13 @@
     "data": {
       "homepageUrl": "/",
       "mobileTitle": {
-        "text": "Carpeta del gestor"
+        "text": "Gestor de expedientes"
+      },
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
       },
       "subnav": {
-        "text": "Carpeta del gestor"
+        "text": "Gestor de expedientes"
       },
       "offcanvas": {
         "text": "Menú",
@@ -336,8 +354,11 @@
     "description": "Utilizar para mostrar el nombre de la app actual. Si no se proporcionan items en subnav, el texto será simple sin un dropdown.",
     "data": {
       "homepageUrl": "/",
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
       "subnav": {
-        "text": "Carpeta del gestor"
+        "text": "Gestor de expedientes"
       }
     }
   },
@@ -346,12 +367,15 @@
     "description": "Un dropdown junto al logo que ha de usarse para mostrar el nombre de la app en la que estamos y para navegar a otra app diferente. Usamos los items proporcionados para la navegación.",
     "data": {
       "homepageUrl": "/",
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
       "subnav": {
-        "text": "Carpeta del gestor",
+        "text": "Gestor de expedientes",
         "items": [
           {
             "href": "#",
-            "text": "Carpeta del gestor",
+            "text": "Gestor de expedientes",
             "active": true
           },
           {
@@ -375,6 +399,9 @@
     "description": "Un dropdown a la derecha que puede usarse para mostrar información adicional: login, acerca de... Se oculta por defecto en anchuras pequeñas si no se le añaden clases a dropdown.",
     "data": {
       "homepageUrl": "/",
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
       "dropdown": {
         "text": "Marta Pérez",
         "items": [
@@ -395,6 +422,9 @@
     "description": "Se pueden usar los parámetros del dropdown para personalizarlo. En este ejemplo con html en el dropdown.",
     "data": {
       "homepageUrl": "/",
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
       "dropdown": {
         "html": '<span class="block text-right">Marta Pérez <br>(Administración)</span>',
         "items": [
@@ -415,6 +445,9 @@
     "description": "El dropdown puede contener cualquier tipo de información.",
     "data": {
       "homepageUrl": "/",
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
       "dropdown": {
         "text": "Marta Pérez",
         "contentHtml": '<div class="p-base"><dl><dt class="text-base">Marta Pérez</dt><dd class="text-sm text-neutral-dark">Departamento de Ciencia, Universidad y Sociedad del Conocimiento</dd></dl></div>',
@@ -427,12 +460,15 @@
     "description": "Logo, menu de navegación, dropdown en anchuras grandes y menu mobile en pequeñas.",
     "data": {
       "homepageUrl": "/",
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
       "subnav": {
-        "text": "Carpeta del gestor",
+        "text": "Gestor de expedientes",
         "items": [
           {
             "href": "#",
-            "text": "Carpeta del gestor",
+            "text": "Gestor de expedientes",
             "active": true
           },
           {