desy-html 13.0.0 → 13.0.2

package/src/templates/components/date-input/_examples.date-input.njk

@@ -11,7 +11,7 @@
         }
       },
       "hint": {
-        "text": "Por ejemplo, 31 3 1980"
+        "text": "Por ejemplo, día: 31 mes: 3 año: 1980"
       },
       "items": [
         {
@@ -48,7 +48,7 @@
         }
       },
       "errorMessage": {
-        "text": "Error: Aqui va un mensaje de error"
+        "text": "Aqui va un mensaje de error"
       },
       "items": [
         {
@@ -88,10 +88,10 @@
         }
       },
       "hint": {
-        "text": "Por ejemplo, 31 3 1980"
+        "text": "Por ejemplo, día: 31 mes: 3 año: 1980"
       },
       "errorMessage": {
-        "text": "Error: Aqui va un mensaje de error"
+        "text": "Aqui va un mensaje de error"
       },
       "items": [
         {
@@ -132,10 +132,10 @@
         }
       },
       "hint": {
-        "text": "Por ejemplo, 31 3 1980"
+        "text": "Por ejemplo, día: 31 mes: 3 año: 1980"
       },
       "errorMessage": {
-        "text": "Error: Aqui va un mensaje de error"
+        "text": "Aqui va un mensaje de error"
       },
       "items": [
         {
@@ -174,10 +174,10 @@
         }
       },
       "hint": {
-        "text": "Por ejemplo, 31 3 1980"
+        "text": "Por ejemplo, día: 31 mes: 3 año: 1980"
       },
       "errorMessage": {
-        "text": "Error: Aqui va un mensaje de error"
+        "text": "Aqui va un mensaje de error"
       },
       "items": [
         {
@@ -216,10 +216,10 @@
         }
       },
       "hint": {
-        "text": "Por ejemplo, 31 3 1980"
+        "text": "Por ejemplo, día: 31 mes: 3 año: 1980"
       },
       "errorMessage": {
-        "text": "Error: Aqui va un mensaje de error"
+        "text": "Aqui va un mensaje de error"
       },
       "items": [
         {
@@ -258,7 +258,7 @@
         }
       },
       "hint": {
-        "text": "Por ejemplo, 31 3 1980"
+        "text": "Por ejemplo, día: 31 mes: 3 año: 1980"
       }
     }
   },
@@ -310,7 +310,7 @@
         }
       },
       "hint": {
-        "text": "Por ejemplo, 31 3 1980"
+        "text": "Por ejemplo, día: 31 mes: 3 año: 1980"
       },
       "formGroup": {
         "classes": "p-base bg-primary-light"
@@ -328,7 +328,7 @@
         }
       },
       "hint": {
-        "text": "Por ejemplo, 31 3 1980"
+        "text": "Por ejemplo, día: 31 mes: 3 año: 1980"
       },
       "items": [
         {
@@ -369,7 +369,7 @@
         }
       },
       "hint": {
-        "text": "Por ejemplo, 31 3 1980"
+        "text": "Por ejemplo, día: 31 mes: 3 año: 1980"
       },
       "items": [
         {
@@ -411,7 +411,7 @@
         }
       },
       "hint": {
-        "text": "Por ejemplo, 31 3 1980",
+        "text": "Por ejemplo, día: 31 mes: 3 año: 1980",
         "classes": "text-sm"
       },
       "items": [

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

@@ -194,7 +194,7 @@
         "text": "Elige tus días disponibles"
       },
       "hint": {
-        "html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span> Separa tus fechas con un espacio."
+        "html": "Para incluir las fechas en el campo de texto usa el formato de fecha <span aria-hidden='true'>DD-MM-AAAA (día-mes-año).</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span> Separa las fechas mediante un espacio. Para seleccionar varios días en el calendario, pulsa los días que quieres seleccionar."
       },
       "value": "10-01-2024 20-01-2024",
       "caller": calendarMultiExample | safe
@@ -206,10 +206,10 @@
       "id": "datepicker-range3",
       "name": "test-name",
       "label": {
-        "text": "Elige tus días disponibles"
+        "text": "Elige tu rango de días disponibles"
       },
       "hint": {
-        "html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span> Separa la fecha inicial de la final con una barra /."
+        "html": "Para incluir el rango de fechas en el campo de texto usa el formato de fecha <span aria-hidden='true'>DD-MM-AAAA (día-mes-año).</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span> Separa la fecha inicial de la final con una barra /. Para seleccionar un rango de fechas en el calendario, pulsa el primer día del rango, desplázate hasta el último día del rango y púlsalo."
       },
       "value": "10-01-2024/20-01-2024",
       "caller": calendarRangeExample | safe
@@ -221,10 +221,10 @@
       "id": "datepicker-with-hint-text-and-year",
       "name": "test-name",
       "label": {
-        "text": "Elige tus días disponibles"
+        "text": "Elige tu rango de días disponibles"
       },
       "hint": {
-        "html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span> Separa la fecha inicial de la final con una /."
+        "html": "Para incluir el rango de fechas en el campo de texto usa el formato de fecha <span aria-hidden='true'>DD-MM-AAAA (día-mes-año).</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span> Separa la fecha inicial de la final con una barra /. Para seleccionar un rango de fechas en el calendario, pulsa el primer día del rango, desplázate hasta el último día del rango y púlsalo."
       },
       "value": "16-01-2024/04-02-2024",
       "caller": calendarRangeExample2('datepicker-with-hint-text-and-year') | safe
@@ -248,6 +248,7 @@
   },
   {
     "name": "Con mensaje de error",
+    "description": "Por accesibilidad, los mensajes de error deben incluir la palabra \"error\", para que no recaiga tan sólo en el color el hecho de que es un mensaje de error.",
     "data": {
       "id": "datepicker-with-error-message",
       "name": "test-name",
@@ -258,7 +259,7 @@
         "html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span>"
       },
       "errorMessage": {
-        "text": "Error: Esto es un mensaje de error",
+        "text": "Esto es un mensaje de error",
         "classes": "mt-xs"
       },
       "pattern": "(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))",

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

@@ -52,7 +52,6 @@
     {% if params.errorMessage %}
       {% if not params.errorId %}
       {% set errorId = params.id + '-error' %}
-      {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
       {% endif %}
       {{ componentErrorMessage({
         id: errorId,

package/src/templates/components/description-list/_examples.description-list.njk

@@ -395,11 +395,11 @@
       "items": [
         {
           "term": {
-            "html": "Expedientes abiertos ↓",
+            "html": "Expedientes abiertos <span aria-hidden='true'>&darr;</span>",
             "classes": "mb-sm"
           },
           "definition": {
-            "html": "<span class='font-bold text-4xl'>45</span> <svg class='inline-block align-baseline ml-sm' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1.6rem' height='1.6rem'><path d='M140 20a20 20 0 00-20-20H20A20 20 0 000 20v100a20 20 0 0020 20h70a10 10 0 007.07-2.93l40-40A10 10 0 00140 90zM20 22.5a2.5 2.5 0 012.5-2.5h95a2.5 2.5 0 012.5 2.5v55a2.5 2.5 0 01-2.5 2.5H95a15 15 0 00-15 15v22.5a2.5 2.5 0 01-2.5 2.5h-55a2.5 2.5 0 01-2.5-2.5z'/></svg><a href='/' class='c-link block mt-sm font-normal text-sm'>Ver todos</a>"
+            "html": "<span class='font-bold text-4xl'>45</span> <svg role='img' aria-label='expedientes'  class='inline-block align-baseline ml-sm' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1.6rem' height='1.6rem'><path d='M140 20a20 20 0 00-20-20H20A20 20 0 000 20v100a20 20 0 0020 20h70a10 10 0 007.07-2.93l40-40A10 10 0 00140 90zM20 22.5a2.5 2.5 0 012.5-2.5h95a2.5 2.5 0 012.5 2.5v55a2.5 2.5 0 01-2.5 2.5H95a15 15 0 00-15 15v22.5a2.5 2.5 0 01-2.5 2.5h-55a2.5 2.5 0 01-2.5-2.5z'/></svg><a href='/' class='c-link block mt-sm font-normal text-sm'>Ver todos</a>"
           }
         }
       ],

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

@@ -29,7 +29,7 @@
       "text": "Editar servicio publicado"
     },
     "description": {
-      "html": "Actualmente este servicio está publicado. <br>Los cambios realizados no serán visibles hasta que sean validados"
+      "text": "Actualmente este servicio está publicado. Los cambios realizados no serán visibles hasta que sean validados"
     },
     "itemsPrimary": [
       {
@@ -56,7 +56,7 @@
       "text": "Servicio publicado"
     },
     "description": {
-      "html": "Actualmente este servicio está publicado. <br>Los cambios realizados no serán visibles hasta que sean validados"
+      "text": "Actualmente este servicio está publicado. Los cambios realizados no serán visibles hasta que sean validados"
     },
     "itemsSecondary": [
       {

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

@@ -116,8 +116,8 @@
     "data": {
       "text": "Dropdown anchura completa",
       "classes": "w-full justify-between",
-      "classesTooltip": "w-max max-h-64 overflow-y-auto",
-      "caller": "<div class=' p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-64 '><div style=' width:900px '></div></div></div>"
+      "classesTooltip": "w-max max-h-40 overflow-y-auto",
+      "caller": "<div class=' p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-64 '><div style=' width:120px '></div></div></div>"
     }
   },
   {
@@ -125,7 +125,7 @@
     "description": 'Usa los atributos <code>data-aria-haspopup="dialog" data-role="dialog" data-aria-modal="false" data-aria-label="Información adicional"</code> para abrir un desplegable que no contenga un menú, por ejemplo un panel informativo.',
     "data": {
       "text": "Marta Pérez",
-      "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
+      "caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>",
       "attributes": {
         "data-aria-haspopup": "dialog",
         "data-role": "dialog",

package/src/templates/components/error-message/_examples.error-message.njk

@@ -2,14 +2,16 @@
 {% set examples =  [
   {
     "name": "por defecto",
+    "description": "Por accesibilidad, los mensajes de error deben incluir la palabra \"error\", para que no recaiga tan sólo en el color el hecho de que es un mensaje de error.",
     "data": {
-      "text": "Error: esto es un mensaje de error"
+      "text": "Esto es un mensaje de error"
     }
   },
   {
     "name": "con HTML",
+    "description": "Por accesibilidad, los mensajes de error deben incluir la palabra \"error\", para que no recaiga tan sólo en el color el hecho de que es un mensaje de error.",
     "data": {
-      "html": "Error: esto es un <em>mensaje de error con HTML</em>"
+      "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 mr-xs align-baseline text-alert-base inline-block' role='img' aria-label='Alerta'><path d='M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z' fill='currentColor' /></svg>Esto es un mensaje de error con HTML"
     }
   }
 ] %}

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

@@ -18,7 +18,7 @@
   "id": "tel-error-id-" + id,
   "name": "tel-error-name-" + id,
   "errorMessage": {
-    "text": "Error: Mensaje de error aqui"
+    "text": "Mensaje de error aqui"
   }
 })  }}
 {% endmacro %}
@@ -38,7 +38,7 @@
   },
   {
     "name": "con error",
-    "description": "Mostrar código para visualizar el <code>aria-describedby</code>, el <code>aria-errormessage</code> y <code>aria-invalid='true'</code> aplicado en el HTML.",
+    "description": "Mostrar código para visualizar el <code>aria-describedby</code>, el <code>aria-errormessage</code> y <code>aria-invalid='true'</code> aplicado en el HTML. El <code>aria-errormessage</code> se asocia al fieldset, en vez de a un campo concreto, cuando el error hace referencia a los elementos en su conjunto. Debería apuntar al id de un mensaje de error que describa el problema general del fieldset.",
     "data": {
       "legend": {
         "text": "¿Cuál es tu número de teléfono?",
@@ -48,33 +48,6 @@
       "caller": callerErrorExample('1').val
     }
   },
-  {
-    "name": "con label como encabezado",
-    "description": "Utiliza el parámetro <code>'isPageheading': true</code> para que el label esté dentro de un encabezado. Usa el parámetro <code>'headingLevel'</code> para establecer el nivel del encabezado. Por ejemplo: <code>'headingLevel': 3</code> creará un encabezado <code>&lt;h3&gt;</code>. Si no se establece un <code>'headingLevel'</code>, por defecto usará un <code>&lt;h1&gt;</code>.",
-    "data": {
-      "legend": {
-        "text": "¿Cuál es tu número de teléfono?",
-        "classes": "c-h1 mb-sm",
-        "isPageHeading": true
-      },
-      "caller": callerExample('2').val
-
-    }
-  },
-  {
-    "name": "con label como encabezado con h3",
-    "description": "Utiliza el parámetro <code>'isPageheading': true</code> para que el label esté dentro de un encabezado. Usa el parámetro <code>'headingLevel'</code> para establecer el nivel del encabezado. Por ejemplo: <code>'headingLevel': 3</code> creará un encabezado <code>&lt;h3&gt;</code>.",
-    "data": {
-      "legend": {
-        "text": "¿Cuál es tu número de teléfono?",
-        "classes": "c-h3 mb-sm",
-        "isPageHeading": true
-      },
-      "headingLevel": 3,
-      "caller": callerExample('3').val
-
-    }
-  },
   {
     "name": "con clases de css aplicadas",
     "data": {

package/src/templates/components/file-upload/_examples.file-upload.njk

@@ -20,13 +20,14 @@
         "text": "Sube una foto"
       },
       "hint": {
-        "text": "Tu foto puede estar en tus Imágenes, Fotos, Descargas o el Escritorio. O en una aplicación como Fotos."
+        "text": "Formato de imágenes admitidas: jpg, jpeg, png, gif. Tamaño de archivo máximo admitido: 10 Mb."
       },
       "classes": "overflow-x-auto max-w-64 lg:w-full lg:max-w-none"
     }
   },
   {
     "name": "con mensaje de error",
+    "description": "Por accesibilidad, los mensajes de error deben incluir la palabra \"error\", para que no recaiga tan sólo en el color el hecho de que es un mensaje de error.",
     "data": {
       "id": "file-upload-3",
       "name": "file-upload-3",
@@ -34,10 +35,10 @@
         "text": "Sube un archivo"
       },
       "hint": {
-        "text": "Tu foto puede estar en tus Imágenes, Fotos, Descargas o el Escritorio. O en una aplicación como Fotos."
+        "text": "Formato de imágenes admitidas: jpg, jpeg, png, gif. Tamaño de archivo máximo admitido: 10 Mb."
       },
       "errorMessage": {
-        "text": "Error: esto es un mensaje de error"
+        "text": "Esto es un mensaje de error"
       },
       "classes": "overflow-x-auto max-w-64 lg:w-full lg:max-w-none"
     }
@@ -56,18 +57,6 @@
       "classes": "overflow-x-auto max-w-64 lg:w-full lg:max-w-none"
     }
   },
-  {
-    "name": "con label como encabezado",
-    "data": {
-      "id": "file-upload-5",
-      "name": "file-upload-5",
-      "label": {
-        "text": "Sube un archivo",
-        "isPageHeading": true
-      },
-      "classes": "overflow-x-auto max-w-64 lg:w-full lg:max-w-none"
-    }
-  },
   {
     "name": "con clases de form-group opcionales",
     "data": {

package/src/templates/components/header-advanced/_template.header-advanced.njk

@@ -89,6 +89,7 @@
                 idPrefix: "header-nav-item",
                 items: params.navigation.items,
                 attributes: {
+                  "id": "header-nav-item",
                   "aria-label": "Menú principal"
                 }
               }) | trim | indent(14) }}

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

@@ -36,6 +36,7 @@
   },
   {
     "name": "con mensaje de error",
+    "description": "Por accesibilidad, los mensajes de error deben incluir la palabra \"error\", para que no recaiga tan sólo en el color el hecho de que es un mensaje de error.",
     "data": {
       "label": {
         "text": "Esto es un label"
@@ -46,12 +47,13 @@
       "id": "input-with-error-message-a",
       "name": "test-name",
       "errorMessage": {
-        "text": "Error: esto es un mensaje de error"
+        "text": "Esto es un mensaje de error"
       }
     }
   },
   {
     "name": "con mensaje de error con id personalizado",
+    "description": "Por accesibilidad, los mensajes de error deben incluir la palabra \"error\", para que no recaiga tan sólo en el color el hecho de que es un mensaje de error.",
     "data": {
       "label": {
         "text": "Esto es un label"
@@ -63,7 +65,7 @@
       "name": "test-name",
       "errorId": "custom-error-id",
       "errorMessage": {
-        "text": "Error: esto es un mensaje de error"
+        "text": "Esto es un mensaje de error"
       }
     }
   },
@@ -112,17 +114,6 @@
       "classes": "w-32"
     }
   },
-  {
-    "name": "con label como encabezado",
-    "data": {
-      "label": {
-        "text": "Esto es un label",
-        "isPageHeading": true
-      },
-      "id": "input-with-page-heading",
-      "name": "test-name"
-    }
-  },
   {
     "name": "con clases de form-group opcionales",
     "data": {
@@ -199,7 +190,7 @@
       "id": "classes-applied-b",
       "name": "classes-applied-b",
       "errorMessage": {
-        "text": "Error: Esto es un mensaje de error",
+        "text": "Esto es un mensaje de error",
         "classes": "order-1 w-full pt-sm"
       },
       "classes": "lg:flex-1"
@@ -230,10 +221,14 @@
   },
   {
     "name": "placeholder",
+    "description": "El atributo <code>placeholder</code> proporciona un texto de ejemplo que se muestra en el campo de entrada cuando está vacío. Intenta usar la pista con el atributo <code>hint</code> en su lugar ya que es más accesible. El placeholder debe ser un apoyo a la pista, no un sustituto.",
     "data": {
       "label": {
         "text": "Esto es un label"
       },
+      "hint": {
+        "text": "Esto es una pista."
+      },
       "id": "con-placeholder",
       "name": "placeholder",
       "placeholder": "Esto es un placeholder"
@@ -264,37 +259,6 @@
       "describedBy": "input-example-a"
     }
   },
-  {
-    "name": "error con describedBy",
-    "data": {
-      "label": {
-        "text": "Error con describedBy"
-      },
-      "id": "with-describedby-c",
-      "name": "with-describedby-c",
-      "describedBy": "input-example-a",
-      "errorMessage": {
-        "text": "Error: esto es un mensaje de error"
-      }
-    }
-  },
-  {
-    "name": "con error, pista y describedBy",
-    "data": {
-      "label": {
-        "text": "Esto es un label"
-      },
-      "hint": {
-        "text": "Esto es una pista."
-      },
-      "id": "input-with-both",
-      "name": "test-name",
-      "describedBy": "input-example-a",
-      "errorMessage": {
-        "text": "Error: esto es un mensaje de error"
-      }
-    }
-  },
   {
     "name": "inputmode",
     "description": "Este atributo proporciona información al navegador para que se pueda mostrar el teclado virtual apropiado, especialmente en dispositivos móviles. Este input tiene un <code>inputmode='email'</code>",

package/src/templates/components/input-group/_examples.input-group.njk

@@ -102,37 +102,38 @@
         }
       },
       "items": [
-        {
-          "divider": {
-            "text": "Desde:",
-            "classes": "self-end mb-xl mr-base"
-          }
-        },
         {
           "name": "num-doc-A",
-          "classes": "w-full lg:w-64",
+          "classes": "w-full lg:w-64 lg:flex-1",
+          "formGroup": {
+            "classes": "lg:flex lg:flex-wrap lg:items-center lg:gap-x-base lg:mb-0"
+          },
           "label": {
             "text": "Desde:",
-            "classes": "sr-only"
+            "classes": "lg:py-sm lg:mt-sm"
           },
           "placeholder": "Ej: 0"
         },
         {
           "divider": {
-            "text": "hasta:",
-            "classes": "self-end mb-xl mx-base"
+            "html": "<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": "hidden lg:block mt-sm"
           }
         },
         {
           "name": "num-doc-B",
-          "classes": "w-full lg:w-64",
+          "classes": "w-full lg:w-64 lg:flex-1",
+          "formGroup": {
+            "classes": "lg:flex lg:flex-wrap lg:items-center lg:gap-x-base"
+          },
           "label": {
-            "text": "hasta:",
-            "classes": "sr-only"
+            "text": "Hasta:",
+            "classes": "lg:py-sm lg:mt-sm"
           },
           "placeholder": "Ej: 600"
         }
-      ]
+      ],
+      "classes": "lg:flex lg:flex-wrap lg:items-center lg:gap-x-base"
     }
   },
   {
@@ -148,7 +149,7 @@
         "text": "Necesitamos tus datos para identificarte posteriormente."
       },
       "errorMessage": {
-        "text": "Error: Estos campos no pueden estar vacíos"
+        "text": "El campo Nombre y el campo Apellidos no pueden estar vacíos."
       },
       "items": [
         {
@@ -217,7 +218,7 @@
         "text": "Necesitamos tus datos para identificarte posteriormente."
       },
       "errorMessage": {
-        "text": "Error: Estos campos no pueden estar vacíos"
+        "text": "El campo Nombre no puede estar vacío."
       },
       "items": [
         {
@@ -281,7 +282,7 @@
         "text": "Necesitamos tus datos para identificarte posteriormente."
       },
       "errorMessage": {
-        "text": "Error: Estos campos no pueden estar vacíos"
+        "text": "El campo Apellidos no puede esta vacío."
       },
       "items": [
         {
@@ -385,7 +386,7 @@
   },
   {
     "name": "con autocompletado",
-    "description": "Usa el parámetro <code>autocomplete</code>",
+    "description": "Usa el parámetro <code>autocomplete</code> en los campos que piden datos del usuario para cumplir con las especificaciones de accesibilidad.",
     "data": {
       "id": "datos-autocomplete",
       "fieldset": {

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

@@ -2,6 +2,7 @@
 {% set examples =  [
   {
     "name": "por defecto",
+    "description": "Recuerda que los pills, por accesibilidad, deben estar rodeados de una etiqueta semántica, normalmente un <code>&lt;li&gt;</code>.",
     "data": {
       "title": {
         "text": "Entidades locales de la Comunidad Autónoma de Aragón"

package/src/templates/components/media-object/_examples.media-object.njk

@@ -2,9 +2,10 @@
 {% set examples =  [
   {
     "name": "por defecto",
+    "description": "Recuerda que este componente, por accesibilidad, debería esta rodeado de una etiqueta semántica, normalmente un <code>&lt;li&gt;</code> en caso de que haya varios seguidos. O bien, que el contenido contenga algún encabezado.",
     "data": {
       "figureHtml": "<div class=' w-20 h-20 '><div class=' h-full border-4 border-dashed border-gray-200 rounded-lg '></div></div>",
-      "caller": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet."
+      "caller": "<p class='c-paragraph-base'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet.</p>"
     }
   },
   {
@@ -12,7 +13,7 @@
     "data": {
       "reverse": true,
       "figureHtml": "<div class=' w-20 h-20 '><div class=' h-full border-4 border-dashed border-gray-200 rounded-lg '></div></div>",
-      "caller": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet."
+      "caller": "<p class='c-paragraph-base'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet.</p>"
     }
   },
   {
@@ -20,7 +21,7 @@
     "data": {
       "center": true,
       "figureHtml": "<div class=' w-20 h-20 '><div class=' h-full border-4 border-dashed border-gray-200 rounded-lg '></div></div>",
-      "caller": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet."
+      "caller": "<p class='c-paragraph-base'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet.</p>"
     }
   },
   {
@@ -30,7 +31,7 @@
       "figureHtml": "<div class=' w-20 h-20 '><div class=' h-full border-4 border-dashed border-gray-200 rounded-lg '></div></div>",
       "figureClasses": "mr-base",
       "contentClasses": "text-sm",
-      "caller": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet.",
+      "caller": "<p class='c-paragraph-base'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet.</p>",
       "classes": "mb-base"
     }
   },
@@ -42,7 +43,7 @@
       "figureHtml": "<div class=' w-20 h-20 '><div class=' h-full border-4 border-dashed border-gray-200 rounded-lg '></div></div>",
       "figureClasses": "ml-base",
       "contentClasses": "text-sm",
-      "caller": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet.",
+      "caller": "<p class='c-paragraph-base'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet.</p>",
       "classes": "mb-base"
     }
   }